[incubator-superset] branch master updated: [bugfix] deckgl legend is not interactive (#6365)

[ma...@apache.org]

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

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


The following commit(s) were added to refs/heads/master by this push:
     new 8155f4b  [bugfix] deckgl legend is not interactive (#6365)
8155f4b is described below

commit 8155f4bf30ebd94eab96a85f625f94cb9c517679
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon Nov 19 14:02:07 2018 -0800

    [bugfix] deckgl legend is not interactive (#6365)
    
    * [bugfix] deckgl legend is not interactive
    
    Somehow when clicking categories in the legend, nothing happened. The
    problem seemed to be around the `getDerivedStateFromProps` override
    which gets triggered after each render and would alter the state and
    reset the categories state to their origin.
    
    Changed the method name to not be an override and just be called once
    in the constructor
    
    https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
    
    * lint
---
 .../deckgl/CategoricalDeckGLContainer.jsx          | 35 ++++++++++++----------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx b/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx
index c3b9ccc..dd88f70 100644
--- a/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx
+++ b/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx
@@ -52,8 +52,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
    */
   constructor(props) {
     super(props);
-
-    this.state = CategoricalDeckGLContainer.getDerivedStateFromProps(props);
+    this.state = this.getInitialStateFromProps(props);
 
     this.getLayers = this.getLayers.bind(this);
     this.onValuesChange = this.onValuesChange.bind(this);
@@ -61,7 +60,17 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
     this.toggleCategory = this.toggleCategory.bind(this);
     this.showSingleCategory = this.showSingleCategory.bind(this);
   }
-  static getDerivedStateFromProps(props, state) {
+  onValuesChange(values) {
+    this.setState({
+      values: Array.isArray(values)
+        ? values
+        : [values, values + this.state.getStep(values)],
+    });
+  }
+  onViewportChange(viewport) {
+    this.setState({ viewport });
+  }
+  getInitialStateFromProps(props, state) {
     const features = props.payload.data.features || [];
     const timestamps = features.map(f => f.__timestamp);
     const categories = getCategories(props.formData, features);
@@ -106,16 +115,6 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
       categories,
     };
   }
-  onValuesChange(values) {
-    this.setState({
-      values: Array.isArray(values)
-        ? values
-        : [values, values + this.state.getStep(values)],
-    });
-  }
-  onViewportChange(viewport) {
-    this.setState({ viewport });
-  }
   getLayers(values) {
     const {
       getLayer,
@@ -171,15 +170,19 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
   }
   toggleCategory(category) {
     const categoryState = this.state.categories[category];
-    categoryState.enabled = !categoryState.enabled;
-    const categories = { ...this.state.categories, [category]: categoryState };
+    const categories = {
+      ...this.state.categories,
+      [category]: {
+        ...categoryState,
+        enabled: !categoryState.enabled,
+      },
+    };
 
     // if all categories are disabled, enable all -- similar to nvd3
     if (Object.values(categories).every(v => !v.enabled)) {
       /* eslint-disable no-param-reassign */
       Object.values(categories).forEach((v) => { v.enabled = true; });
     }
-
     this.setState({ categories });
   }
   showSingleCategory(category) {