Add debounce time for wcc.Select with fix after revert (equinor#257)

- Add debounce time for wcc.Select
- Update storybook

Author: jorgenherje

CHANGELOG.md

@@ -26,8 +26,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   [#219](https://github.com/equinor/webviz-core-components/pull/219) - Pinned `dash` version to `2.4.x`, added more info output to GitHub workflow, switched to React version `16.14.0` in order to comply with non-maintained `react-colorscales` requirements, implemented adjustments to `Overlay` and `ScrollArea`
 -   [#240](https://github.com/equinor/webviz-core-components/pull/240) - Settings groups remain open when others are toggled (independent toggle state).
--   [#243](https://github.com/equinor/webviz-core-components/pull/243) - Added debounce time for `Select` component to prevent firing selected values immediately. The selected values will be updated after configured amount of milliseconds after last interaction. Reduces number of callback triggers in Dash.
 -   [#252](https://github.com/equinor/webviz-core-components/pull/252) - Refactored `Menu` component in order to make it work seamlessly with `dcc.Location` and `dcc.Link`.
+-   [#257](https://github.com/equinor/webviz-core-components/pull/257) - Added debounce time for `Select` component to prevent firing selected values immediately. The selected values will be updated after configured amount of milliseconds after last interaction. Reduces number of callback triggers in Dash.
 
 ## [0.5.7] - 2022-05-05
 

react/src/lib/components/Select/Select.stories.tsx

@@ -17,14 +17,38 @@ export default {
     },
 } as ComponentMeta<typeof Select>;
 
-const Template: ComponentStory<typeof Select> = (args) => <Select {...args} />;
+const Template: ComponentStory<typeof Select> = (args) => {
+    const { setProps, debounce_time_ms, ...other } = args;
+
+    const [selected, setSelected] = React.useState<
+        string | number | (string | number)[]
+    >([]);
+
+    return (
+        <>
+            <Select
+                setProps={(prop) => setSelected(prop.value)}
+                debounce_time_ms={debounce_time_ms}
+                {...other}
+            />
+            <div>{`Debounce time: ${debounce_time_ms?.toString()} ms`}</div>
+            <div>{`Selected values: ${selected.toString()}`}</div>
+        </>
+    );
+};
 
 export const Basic = Template.bind({});
 Basic.args = {
     id: Select.defaultProps?.id || "select-component",
-    size: Select.defaultProps?.size || 4,
-    options: Select.defaultProps?.options || [],
+    size: Select.defaultProps?.size || 5,
+    options: [
+        { label: 1, value: 1 },
+        { label: 2, value: 2 },
+        { label: 3, value: 3 },
+        { label: 4, value: 4 },
+    ],
     value: Select.defaultProps?.value || [],
+    debounce_time_ms: Select.defaultProps?.debounce_time_ms || 1000,
     multi: Select.defaultProps?.multi || true,
     className: Select.defaultProps?.className || "",
     style: Select.defaultProps?.style || {},
@@ -33,4 +57,7 @@ Basic.args = {
     persistence: Select.defaultProps?.persistence || false,
     persisted_props: Select.defaultProps?.persisted_props || ["value"],
     persistence_type: Select.defaultProps?.persistence_type || "local",
+    setProps: () => {
+        return;
+    },
 };

react/src/lib/components/Select/Select.tsx

@@ -7,6 +7,7 @@
 
 import React from "react";
 import PropTypes, { InferProps } from "prop-types";
+import { isEqual } from "lodash";
 
 import {
     getPropsWithMissingValuesSetToDefault,
@@ -66,6 +67,12 @@ const propTypes = {
             ]).isRequired
         ).isRequired,
     ]),
+    /**
+     * Debounce time for props update for user. The value prop for selected
+     * values for Dash callbacks are debounced with the configured number
+     * of milliseconds.
+     */
+    debounce_time_ms: PropTypes.number,
     /**
      * If true, the user can select multiple values
      */
@@ -125,6 +132,7 @@ const defaultProps: Optionals<InferProps<typeof propTypes>> = {
     size: 4,
     value: [],
     multi: true,
+    debounce_time_ms: 0,
     style: {},
     parent_style: {},
     className: "",
@@ -149,31 +157,63 @@ export const Select: React.FC<InferProps<typeof propTypes>> = (
         parent_style,
         value,
         multi,
+        debounce_time_ms,
         size,
         className,
         style,
         options,
         setProps,
     } = getPropsWithMissingValuesSetToDefault(props, defaultProps);
 
-    const handleChange = (e: React.ChangeEvent) => {
-        const selectedOptions = [].slice.call(
-            (e.target as HTMLSelectElement).selectedOptions
-        );
-        const values: (string | number)[] = [];
-
-        for (let i = 0; i < options.length; i++) {
-            if (
-                selectedOptions.some(
-                    (el: HTMLOptionElement) =>
-                        el.value === options[i].value.toString()
+    const [selectedValues, setSelectedValues] =
+        React.useState<string | number | (string | number)[]>(value);
+
+    const debounceTimer =
+        React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    React.useEffect(() => {
+        if (!isEqual(value, selectedValues)) {
+            setSelectedValues(value);
+        }
+    }, [value]);
+
+    React.useEffect(() => {
+        return () => {
+            debounceTimer.current && clearTimeout(debounceTimer.current);
+        };
+    }, []);
+
+    const handleChange = React.useCallback(
+        (e: React.ChangeEvent) => {
+            const selectedOptions = [].slice.call(
+                (e.target as HTMLSelectElement).selectedOptions
+            );
+            const values = options
+                .filter((option) =>
+                    selectedOptions.some(
+                        (selectedOption: HTMLOptionElement) =>
+                            selectedOption.value === option.value.toString()
+                    )
                 )
-            ) {
-                values.push(options[i].value);
+                .map((option) => option.value);
+
+            if (!isEqual(values, selectedValues)) {
+                setSelectedValues(values);
             }
-        }
-        setProps({ value: values });
-    };
+
+            debounceTimer.current && clearTimeout(debounceTimer.current);
+            debounceTimer.current = setTimeout(() => {
+                setProps({ value: values });
+            }, debounce_time_ms);
+        },
+        [
+            debounceTimer.current,
+            debounce_time_ms,
+            options,
+            selectedValues,
+            setProps,
+        ]
+    );
 
     return (
         <div
@@ -183,11 +223,12 @@ export const Select: React.FC<InferProps<typeof propTypes>> = (
         >
             <select
                 value={
-                    value
-                        ? typeof value === "string" || typeof value === "number"
-                            ? value
-                            : (value as (string | number)[]).map((el) =>
-                                  el.toString()
+                    selectedValues
+                        ? typeof selectedValues === "string" ||
+                          typeof selectedValues === "number"
+                            ? selectedValues
+                            : (selectedValues as (string | number)[]).map(
+                                  (el) => el.toString()
                               )
                         : ""
                 }