Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix bad render states

This commit is contained in:
Nate Kelley 2025-03-12 12:28:02 -06:00
parent b496523a4c
commit 2788f7e675
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
6 changed files with 69 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/features/dropdowns/SaveToDashboardDropdown.tsx
View File

@ -102,7 +102,7 @@ export const SaveToDashboardDropdown: React.FC<{
onOpenChange={onOpenChange}
footerContent={memoizedButton}
items={items}>
<AppTooltip title={showDropdown ? '' : 'Save to collection'}>{children} </AppTooltip>
<AppTooltip title={showDropdown ? '' : 'Save to dashboard'}>{children} </AppTooltip>
</Dropdown>
);
};

47
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditScatterDotSize.tsx
View File

@ -10,32 +10,29 @@ export const EditScatterDotSize: React.FC<{
scatterDotSize: IBusterMetricChartConfig['scatterDotSize'];
scatterAxis: ScatterAxis;
onUpdateChartConfig: (config: Partial<IBusterMetricChartConfig>) => void;
}> = React.memo(
({ scatterDotSize, scatterAxis, onUpdateChartConfig }) => {
const hasSize = !isEmpty(scatterAxis.size);
const defaultValue = hasSize ? scatterDotSize : scatterDotSize[0];
}> = React.memo(({ scatterDotSize, scatterAxis, onUpdateChartConfig }) => {
const hasSize = !isEmpty(scatterAxis.size);
const defaultValue = hasSize ? scatterDotSize : scatterDotSize[0];
const onChange = useMemoizedFn((v: number[]) => {
const newLower = v[0];
const newUpper = hasSize ? v[1] : newLower + 18;
const arrayFormat: [number, number] = [newLower, newUpper];
onUpdateChartConfig({
scatterDotSize: arrayFormat
});
const onChange = useMemoizedFn((v: number[]) => {
const newLower = v[0];
const newUpper = hasSize ? v[1] : newLower + 18;
const arrayFormat: [number, number] = [newLower, newUpper];
onUpdateChartConfig({
scatterDotSize: arrayFormat
});
});
return (
<LabelAndInput label="Dot size">
<Slider
min={1}
max={50}
step={1}
defaultValue={defaultValue as number[]}
onValueChange={onChange}
/>
</LabelAndInput>
);
},
() => true
);
return (
<LabelAndInput label="Dot size">
<Slider
min={1}
max={50}
step={1}
defaultValue={defaultValue as number[]}
onValueChange={onChange}
/>
</LabelAndInput>
);
});
EditScatterDotSize.displayName = 'EditScatterDotSize';

3
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditShowHeadline.tsx
View File

@ -76,7 +76,6 @@ export const EditShowHeadline: React.FC<{
/>
</LabelAndInput>
);
},
() => true
}
);
EditShowHeadline.displayName = 'EditShowHeadline';

6
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditShowLegend.tsx
View File

@ -22,18 +22,18 @@ export const EditShowLegend: React.FC<{
allYAxisColumnNames
});
console.log('showLegend', showLegend);
return (
<LabelAndInput label={'Show legend'}>
<div className="flex justify-end">
<Switch
defaultChecked={showLegend ?? false}
checked={showLegend}
onCheckedChange={(v) => onUpdateChartConfig({ showLegend: v })}
/>
</div>
</LabelAndInput>
);
},
() => true
}
);
EditShowLegend.displayName = 'EditShowLegend';

43
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditReplaceMissingData.tsx
View File

@ -11,29 +11,26 @@ export const MISSING_VALUES_OPTIONS: SelectItem[] = [
export const EditReplaceMissingData: React.FC<{
replaceMissingDataWith: IColumnLabelFormat['replaceMissingDataWith'];
onUpdateColumnConfig: (columnLabelFormat: Partial<IColumnLabelFormat>) => void;
}> = React.memo(
({ replaceMissingDataWith, onUpdateColumnConfig }) => {
const selectedValue = useMemo(() => {
if (replaceMissingDataWith === null) return '🧸✂️';
return 0;
}, [replaceMissingDataWith]);
}> = React.memo(({ replaceMissingDataWith, onUpdateColumnConfig }) => {
const selectedValue = useMemo(() => {
if (replaceMissingDataWith === null) return '🧸✂️';
return 0;
}, [replaceMissingDataWith]);
return (
<LabelAndInput label="Missing values">
<Select
items={MISSING_VALUES_OPTIONS}
value={selectedValue || '0'}
onChange={(v) => {
let value: IColumnLabelFormat['replaceMissingDataWith'];
if (v === '🧸✂️') value = null;
else value = 0;
onUpdateColumnConfig({ replaceMissingDataWith: value });
}}
/>
</LabelAndInput>
);
},
() => true
);
return (
<LabelAndInput label="Missing values">
<Select
items={MISSING_VALUES_OPTIONS}
value={selectedValue || '0'}
onChange={(v) => {
let value: IColumnLabelFormat['replaceMissingDataWith'];
if (v === '🧸✂️') value = null;
else value = 0;
onUpdateColumnConfig({ replaceMissingDataWith: value });
}}
/>
</LabelAndInput>
);
});
EditReplaceMissingData.displayName = 'EditReplaceMissingData';

47
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingMetric/EditHeaderTitle.tsx
View File

@ -7,33 +7,30 @@ export const EditHeaderTitle: React.FC<{
value: string | undefined;
type: 'header' | 'subHeader';
onUpdateChartConfig: (chartConfig: Partial<IBusterMetricChartConfig>) => void;
}> = React.memo(
({ value, onUpdateChartConfig, type }) => {
const inputRef = useRef<HTMLInputElement>(null);
const key: keyof IBusterMetricChartConfig =
type === 'header' ? 'metricHeader' : 'metricSubHeader';
const title = type === 'header' ? 'Header' : 'Sub-header';
const placeholder = type === 'header' ? 'Enter header' : 'Enter sub-header';
}> = React.memo(({ value, onUpdateChartConfig, type }) => {
const inputRef = useRef<HTMLInputElement>(null);
const key: keyof IBusterMetricChartConfig =
type === 'header' ? 'metricHeader' : 'metricSubHeader';
const title = type === 'header' ? 'Header' : 'Sub-header';
const placeholder = type === 'header' ? 'Enter header' : 'Enter sub-header';
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onUpdateChartConfig({ [key]: e.target.value });
};
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onUpdateChartConfig({ [key]: e.target.value });
};
useEffect(() => {
setTimeout(() => {
if (!value) {
inputRef.current?.focus();
}
}, 150);
}, []);
useEffect(() => {
setTimeout(() => {
if (!value) {
inputRef.current?.focus();
}
}, 150);
}, []);
return (
<LabelAndInput label={title}>
<Input ref={inputRef} placeholder={placeholder} defaultValue={value} onChange={onChange} />
</LabelAndInput>
);
},
() => true
);
return (
<LabelAndInput label={title}>
<Input ref={inputRef} placeholder={placeholder} defaultValue={value} onChange={onChange} />
</LabelAndInput>
);
});
EditHeaderTitle.displayName = 'EditHeaderTitle';