[superset] branch master updated: fix(explore): drag & drop column select component triggering onChange unnecessarily (#16073)

[suddjian]

This is an automated email from the ASF dual-hosted git repository.

suddjian pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new e6292a8  fix(explore): drag & drop column select component triggering 
onChange unnecessarily (#16073)
e6292a8 is described below

commit e6292a89bba75978d96bf0d71f392a63e446b915
Author: David Aaron Suddjian <1858430+suddj...@users.noreply.github.com>
AuthorDate: Thu Aug 5 15:38:28 2021 -0700

    fix(explore): drag & drop column select component triggering onChange 
unnecessarily (#16073)
    
    * fix(explore): avoid sync until after first render
    
    * fix example
---
 .../controls/DndColumnSelectControl/DndColumnSelect.tsx    | 14 ++++++++++----
 superset/examples/random_time_series.py                    |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git 
a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
 
b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
index 839784f..32097b2 100644
--- 
a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
+++ 
b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { tn } from '@superset-ui/core';
 import { ColumnMeta } from '@superset-ui/chart-controls';
 import { isEmpty } from 'lodash';
@@ -27,6 +27,7 @@ import { OptionSelector } from 
'src/explore/components/controls/DndColumnSelectC
 import { DatasourcePanelDndItem } from 
'src/explore/components/DatasourcePanel/types';
 import { DndItemType } from 'src/explore/components/DndItemType';
 import { StyledColumnOption } from 'src/explore/components/optionRenderers';
+import { useComponentDidUpdate } from 'src/common/hooks/useComponentDidUpdate';
 
 export const DndColumnSelect = (props: LabelProps) => {
   const {
@@ -45,7 +46,7 @@ export const DndColumnSelect = (props: LabelProps) => {
   );
 
   // synchronize values in case of dataset changes
-  useEffect(() => {
+  const handleOptionsChange = useCallback(() => {
     const optionSelectorValues = optionSelector.getValues();
     if (typeof value !== typeof optionSelectorValues) {
       onChange(optionSelectorValues);
@@ -65,8 +66,13 @@ export const DndColumnSelect = (props: LabelProps) => {
     ) {
       onChange(optionSelectorValues);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(value), JSON.stringify(optionSelector.getValues())]);
+    // when options change, that means that the dataset has changed
+    // so we have to check if values are still applicable.
+  }, [options, value, optionSelector]);
+
+  // useComponentDidUpdate to avoid running this for the first render, to avoid
+  // calling onChange when the initial value is not valid for the dataset
+  useComponentDidUpdate(handleOptionsChange);
 
   const onDrop = useCallback(
     (item: DatasourcePanelDndItem) => {
diff --git a/superset/examples/random_time_series.py 
b/superset/examples/random_time_series.py
index 6a33812..394e895 100644
--- a/superset/examples/random_time_series.py
+++ b/superset/examples/random_time_series.py
@@ -72,7 +72,7 @@ def load_random_time_series_data(
     tbl = obj
 
     slice_data = {
-        "granularity_sqla": "day",
+        "granularity_sqla": "ds",
         "row_limit": app.config["ROW_LIMIT"],
         "since": "2019-01-01",
         "until": "2019-02-01",