🐛 Fix debouncing sync issue in panel

elastic · Sep 21, 2021 · 69768de · 69768de
1 parent 81fa3bd
commit 69768de
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 19 deletions.
diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts
@@ -443,7 +443,7 @@ export interface VisualizationToolbarProps<T = unknown> {
 export type VisualizationDimensionEditorProps<T = unknown> = VisualizationConfigProps<T> & {
   groupId: string;
   accessor: string;
-  setState: (newState: T) => void;
+  setState(newState: T | ((currState: T) => T)): void;
   panelRef: MutableRefObject<HTMLDivElement | null>;
 };
 

diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/threshold_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel/threshold_panel.tsx
@@ -119,21 +119,27 @@ export const ThresholdPanel = (
   const index = state.layers.findIndex((l) => l.layerId === layerId);
   const layer = state.layers[index];
 
-  const setYConfig = (yConfig: Partial<YConfig>) => {
-    const newYConfigs = [...(layer.yConfig || [])];
-    const existingIndex = newYConfigs.findIndex(
-      (yAxisConfig) => yAxisConfig.forAccessor === accessor
-    );
-    if (existingIndex !== -1) {
-      newYConfigs[existingIndex] = { ...newYConfigs[existingIndex], ...yConfig };
-    } else {
-      newYConfigs.push({
-        forAccessor: accessor,
-        ...yConfig,
+  const setYConfig = useCallback(
+    (yConfig: Partial<YConfig> | undefined) => {
+      if (yConfig == null) {
+        return;
+      }
+      setState((currState) => {
+        const currLayer = currState.layers[index];
+        const newYConfigs = [...(currLayer.yConfig || [])];
+        const existingIndex = newYConfigs.findIndex(
+          (yAxisConfig) => yAxisConfig.forAccessor === accessor
+        );
+        if (existingIndex !== -1) {
+          newYConfigs[existingIndex] = { ...newYConfigs[existingIndex], ...yConfig };
+        } else {
+          newYConfigs.push({ forAccessor: accessor, ...yConfig });
+        }
+        return updateLayer(currState, { ...currLayer, yConfig: newYConfigs }, index);
       });
-    }
-    setState(updateLayer(state, { ...layer, yConfig: newYConfigs }, index));
-  };
+    },
+    [accessor, index, setState]
+  );
 
   const currentYConfig = layer.yConfig?.find((yConfig) => yConfig.forAccessor === accessor);
 
@@ -187,7 +193,7 @@ export const ThresholdPanel = (
           idSelected={`${idPrefix}${currentYConfig?.lineStyle || 'solid'}`}
           onChange={(id) => {
             const newMode = id.replace(idPrefix, '') as LineStyle;
-            setYConfig({ lineStyle: newMode });
+            setYConfig({ forAccessor: accessor, lineStyle: newMode });
           }}
         />
       </EuiFormRow>
@@ -201,7 +207,7 @@ export const ThresholdPanel = (
         <LineThicknessSlider
           value={currentYConfig?.lineWidth || 1}
           onChange={(value) => {
-            setYConfig({ lineWidth: value });
+            setYConfig({ forAccessor: accessor, lineWidth: value });
           }}
         />
       </EuiFormRow>
@@ -246,7 +252,7 @@ export const ThresholdPanel = (
           idSelected={`${idPrefix}${currentYConfig?.fill || 'none'}`}
           onChange={(id) => {
             const newMode = id.replace(idPrefix, '') as FillStyle;
-            setYConfig({ fill: newMode });
+            setYConfig({ forAccessor: accessor, fill: newMode });
           }}
         />
       </EuiFormRow>
@@ -260,7 +266,7 @@ export const ThresholdPanel = (
         <IconSelect
           value={currentYConfig?.icon}
           onChange={(newIcon) => {
-            setYConfig({ icon: newIcon });
+            setYConfig({ forAccessor: accessor, icon: newIcon });
           }}
         />
       </EuiFormRow>