feat: make all deckgl charts handle their own tooltips (#13)

* feat: make all deckgl charts handle their own tooltips

* fix: use destructuring

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx

@@ -58,8 +58,9 @@ export default class AnimatableDeckGLContainer extends React.PureComponent {
   containerRef = React.createRef();
 
   setTooltip = tooltip => {
-    if (this.containerRef.current) {
+    const { current } = this.containerRef;
-      this.containerRef.current.setTooltip(tooltip);
+    if (current) {
+      current.setTooltip(tooltip);
     }
   };
 

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.jsx

@@ -66,7 +66,6 @@ const propTypes = {
   getPoints: PropTypes.func.isRequired,
   payload: PropTypes.object.isRequired,
   onAddFilter: PropTypes.func,
-  setTooltip: PropTypes.func,
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
 };
@@ -147,7 +146,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
   }
 
   getLayers(values) {
-    const { getLayer, payload, formData: fd, onAddFilter, setTooltip } = this.props;
+    const { getLayer, payload, formData: fd, onAddFilter } = this.props;
     let features = payload.data.features ? [...payload.data.features] : [];
 
     // Add colors from categories or fixed color
@@ -177,7 +176,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
       data: { ...payload.data, features },
     };
 
-    return [getLayer(fd, filteredPayload, onAddFilter, setTooltip)];
+    return [getLayer(fd, filteredPayload, onAddFilter, this.setTooltip)];
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -228,8 +227,9 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
   }
 
   setTooltip = tooltip => {
-    if (this.containerRef.current) {
+    const { current } = this.containerRef;
-      this.containerRef.current.setTooltip(tooltip);
+    if (current) {
+      current.setTooltip(tooltip);
     }
   };
 

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/Multi/Multi.jsx

@@ -36,16 +36,16 @@ const propTypes = {
   setControlValue: PropTypes.func.isRequired,
   viewport: PropTypes.object.isRequired,
   onAddFilter: PropTypes.func,
-  setTooltip: PropTypes.func,
   onSelect: PropTypes.func,
 };
 const defaultProps = {
   onAddFilter() {},
-  setTooltip() {},
   onSelect() {},
 };
 
 class DeckMulti extends React.PureComponent {
+  containerRef = React.createRef();
+
   constructor(props) {
     super(props);
     this.state = { subSlicesLayers: {} };
@@ -96,7 +96,7 @@ class DeckMulti extends React.PureComponent {
             subsliceCopy.form_data,
             json,
             this.props.onAddFilter,
-            this.props.setTooltip,
+            this.setTooltip,
             [],
             this.props.onSelect,
           );
@@ -111,6 +111,13 @@ class DeckMulti extends React.PureComponent {
     });
   }
 
+  setTooltip = tooltip => {
+    const { current } = this.containerRef;
+    if (current) {
+      current.setTooltip(tooltip);
+    }
+  };
+
   render() {
     const { payload, formData, setControlValue } = this.props;
     const { subSlicesLayers } = this.state;
@@ -119,6 +126,7 @@ class DeckMulti extends React.PureComponent {
 
     return (
       <DeckGLContainer
+        ref={this.containerRef}
         mapboxApiAccessToken={payload.data.mapboxApiKey}
         viewport={this.state.viewport || this.props.viewport}
         layers={layers}

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/factory.jsx

@@ -35,18 +35,18 @@ const propTypes = {
   setControlValue: PropTypes.func.isRequired,
   viewport: PropTypes.object.isRequired,
   onAddFilter: PropTypes.func,
-  setTooltip: PropTypes.func,
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
 };
 const defaultProps = {
   onAddFilter() {},
-  setTooltip() {},
 };
 
 export function createDeckGLComponent(getLayer, getPoints) {
   // Higher order component
   class Component extends React.PureComponent {
+    containerRef = React.createRef();
+
     constructor(props) {
       super(props);
 
@@ -80,19 +80,26 @@ export function createDeckGLComponent(getLayer, getPoints) {
       this.setState({ viewport });
     }
 
-    // eslint-disable-next-line class-methods-use-this
     computeLayer(props) {
-      const { formData, payload, onAddFilter, setTooltip } = props;
+      const { formData, payload, onAddFilter } = props;
 
-      return getLayer(formData, payload, onAddFilter, setTooltip);
+      return getLayer(formData, payload, onAddFilter, this.setTooltip);
     }
 
+    setTooltip = tooltip => {
+      const { current } = this.containerRef;
+      if (current) {
+        current.setTooltip(tooltip);
+      }
+    };
+
     render() {
       const { formData, payload, setControlValue, height, width } = this.props;
       const { layer, viewport } = this.state;
 
       return (
         <DeckGLContainer
+          ref={this.containerRef}
           mapboxApiAccessToken={payload.data.mapboxApiKey}
           viewport={viewport}
           layers={[layer]}
@@ -113,7 +120,7 @@ export function createDeckGLComponent(getLayer, getPoints) {
 
 export function createCategoricalDeckGLComponent(getLayer, getPoints) {
   function Component(props) {
-    const { formData, payload, setControlValue, setTooltip, viewport, width, height } = props;
+    const { formData, payload, setControlValue, viewport, width, height } = props;
 
     return (
       <CategoricalDeckGLContainer
@@ -123,7 +130,6 @@ export function createCategoricalDeckGLComponent(getLayer, getPoints) {
         viewport={viewport}
         getLayer={getLayer}
         payload={payload}
-        setTooltip={setTooltip}
         getPoints={getPoints}
         width={width}
         height={height}

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.jsx

@@ -136,35 +136,45 @@ const propTypes = {
   setControlValue: PropTypes.func.isRequired,
   viewport: PropTypes.object.isRequired,
   onAddFilter: PropTypes.func,
-  setTooltip: PropTypes.func,
 };
 const defaultProps = {
   onAddFilter() {},
-  setTooltip() {},
 };
 
-function deckGeoJson(props) {
+class DeckGLGeoJson extends React.Component {
-  const { formData, payload, setControlValue, onAddFilter, setTooltip, viewport } = props;
+  containerRef = React.createRef();
 
-  // TODO get this to work
+  setTooltip = tooltip => {
-  // if (formData.autozoom) {
+    const { current } = this.containerRef;
-  //   viewport = common.fitViewport(viewport, geojsonExtent(payload.data.features));
+    if (current) {
-  // }
+      current.setTooltip(tooltip);
+    }
+  };
 
-  const layer = getLayer(formData, payload, onAddFilter, setTooltip);
+  render() {
+    const { formData, payload, setControlValue, onAddFilter, viewport } = this.props;
 
-  return (
+    // TODO get this to work
-    <DeckGLContainer
+    // if (formData.autozoom) {
-      mapboxApiAccessToken={payload.data.mapboxApiKey}
+    //   viewport = common.fitViewport(viewport, geojsonExtent(payload.data.features));
-      viewport={viewport}
+    // }
-      layers={[layer]}
+
-      mapStyle={formData.mapbox_style}
+    const layer = getLayer(formData, payload, onAddFilter, this.setTooltip);
-      setControlValue={setControlValue}
+
-    />
+    return (
-  );
+      <DeckGLContainer
+        ref={this.containerRef}
+        mapboxApiAccessToken={payload.data.mapboxApiKey}
+        viewport={viewport}
+        layers={[layer]}
+        mapStyle={formData.mapbox_style}
+        setControlValue={setControlValue}
+      />
+    );
+  }
 }
 
-deckGeoJson.propTypes = propTypes;
+DeckGLGeoJson.propTypes = propTypes;
-deckGeoJson.defaultProps = defaultProps;
+DeckGLGeoJson.defaultProps = defaultProps;
 
-export default deckGeoJson;
+export default DeckGLGeoJson;

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx

@@ -259,8 +259,9 @@ class DeckGLPolygon extends React.Component {
   }
 
   setTooltip = tooltip => {
-    if (this.containerRef.current) {
+    const { current } = this.containerRef;
-      this.containerRef.current.setTooltip(tooltip);
+    if (current) {
+      current.setTooltip(tooltip);
     }
   };
 

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Screengrid/Screengrid.jsx

@@ -89,16 +89,16 @@ const propTypes = {
   setControlValue: PropTypes.func.isRequired,
   viewport: PropTypes.object.isRequired,
   onAddFilter: PropTypes.func,
-  setTooltip: PropTypes.func,
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
 };
 const defaultProps = {
   onAddFilter() {},
-  setTooltip() {},
 };
 
 class DeckGLScreenGrid extends React.PureComponent {
+  containerRef = React.createRef();
+
   constructor(props) {
     super(props);
 
@@ -170,19 +170,27 @@ class DeckGLScreenGrid extends React.PureComponent {
       this.props.formData,
       this.props.payload,
       this.props.onAddFilter,
-      this.props.setTooltip,
+      this.setTooltip,
       filters,
     );
 
     return [layer];
   }
 
+  setTooltip = tooltip => {
+    const { current } = this.containerRef;
+    if (current) {
+      current.setTooltip(tooltip);
+    }
+  };
+
   render() {
     const { formData, payload, setControlValue } = this.props;
 
     return (
       <div>
         <AnimatableDeckGLContainer
+          ref={this.containerRef}
           aggregation
           getLayers={this.getLayers}
           start={this.state.start}

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/transformProps.js

@@ -20,7 +20,7 @@ const NOOP = () => {};
 
 export default function transformProps(chartProps) {
   const { width, height, rawFormData, queryData, hooks } = chartProps;
-  const { onAddFilter = NOOP, setControlValue = NOOP, setTooltip = NOOP } = hooks;
+  const { onAddFilter = NOOP, setControlValue = NOOP } = hooks;
 
   return {
     formData: rawFormData,
@@ -28,7 +28,6 @@ export default function transformProps(chartProps) {
     onAddFilter,
     payload: queryData,
     setControlValue,
-    setTooltip,
     viewport: {
       ...rawFormData.viewport,
       height,