fix bad render states

web/src/components/features/dropdowns/SaveToDashboardDropdown.tsx

@@ -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>
   );
 };

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

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

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

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

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

@@ -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';

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

@@ -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(
+}> = React.memo(({ replaceMissingDataWith, onUpdateColumnConfig }) => {
-  ({ replaceMissingDataWith, onUpdateColumnConfig }) => {
+  const selectedValue = useMemo(() => {
-    const selectedValue = useMemo(() => {
+    if (replaceMissingDataWith === null) return '🧸✂️';
-      if (replaceMissingDataWith === null) return '🧸✂️';
+    return 0;
-      return 0;
+  }, [replaceMissingDataWith]);
-    }, [replaceMissingDataWith]);
 
-    return (
+  return (
-      <LabelAndInput label="Missing values">
+    <LabelAndInput label="Missing values">
-        <Select
+      <Select
-          items={MISSING_VALUES_OPTIONS}
+        items={MISSING_VALUES_OPTIONS}
-          value={selectedValue || '0'}
+        value={selectedValue || '0'}
-          onChange={(v) => {
+        onChange={(v) => {
-            let value: IColumnLabelFormat['replaceMissingDataWith'];
+          let value: IColumnLabelFormat['replaceMissingDataWith'];
-            if (v === '🧸✂️') value = null;
+          if (v === '🧸✂️') value = null;
-            else value = 0;
+          else value = 0;
-            onUpdateColumnConfig({ replaceMissingDataWith: value });
+          onUpdateColumnConfig({ replaceMissingDataWith: value });
-          }}
+        }}
-        />
+      />
-      </LabelAndInput>
+    </LabelAndInput>
-    );
+  );
-  },
+});
-  () => true
-);
 
 EditReplaceMissingData.displayName = 'EditReplaceMissingData';

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

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