From 8155f4bf30ebd94eab96a85f625f94cb9c517679 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Mon, 19 Nov 2018 14:02:07 -0800
Subject: [PATCH] [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 c3b9ccc1c..dd88f70b4 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) {