feat: make all deckgl charts handle their own tooltips (apache-supers…

…et#13) * feat: make all deckgl charts handle their own tooltips * fix: use destructuring
zhaoyongjie · Sep 23, 2021 · de91dc4 · de91dc4
1 parent 0d4c6dd
commit de91dc4
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 46 deletions.
diff --git a/...-kepler/packages/superset-ui-legacy-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx b/...-kepler/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) {
-      this.containerRef.current.setTooltip(tooltip);
+    const { current } = this.containerRef;
+    if (current) {
+      current.setTooltip(tooltip);
     }
   };
 

diff --git a/...kepler/packages/superset-ui-legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.jsx b/...kepler/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) {
-      this.containerRef.current.setTooltip(tooltip);
+    const { current } = this.containerRef;
+    if (current) {
+      current.setTooltip(tooltip);
     }
   };
 

diff --git a/...y-preset-chart-kepler/packages/superset-ui-legacy-preset-chart-deckgl/src/Multi/Multi.jsx b/...y-preset-chart-kepler/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}

diff --git a/...egacy-preset-chart-kepler/packages/superset-ui-legacy-preset-chart-deckgl/src/factory.jsx b/...egacy-preset-chart-kepler/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}

diff --git a/...art-kepler/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.jsx b/...art-kepler/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) {
-  const { formData, payload, setControlValue, onAddFilter, setTooltip, viewport } = props;
+class DeckGLGeoJson extends React.Component {
+  containerRef = React.createRef();
 
-  // TODO get this to work
-  // if (formData.autozoom) {
-  //   viewport = common.fitViewport(viewport, geojsonExtent(payload.data.features));
-  // }
-
-  const layer = getLayer(formData, payload, onAddFilter, setTooltip);
+  setTooltip = tooltip => {
+    const { current } = this.containerRef;
+    if (current) {
+      current.setTooltip(tooltip);
+    }
+  };
 
-  return (
-    <DeckGLContainer
-      mapboxApiAccessToken={payload.data.mapboxApiKey}
-      viewport={viewport}
-      layers={[layer]}
-      mapStyle={formData.mapbox_style}
-      setControlValue={setControlValue}
-    />
-  );
+  render() {
+    const { formData, payload, setControlValue, onAddFilter, viewport } = this.props;
+
+    // TODO get this to work
+    // if (formData.autozoom) {
+    //   viewport = common.fitViewport(viewport, geojsonExtent(payload.data.features));
+    // }
+
+    const layer = getLayer(formData, payload, onAddFilter, this.setTooltip);
+
+    return (
+      <DeckGLContainer
+        ref={this.containerRef}
+        mapboxApiAccessToken={payload.data.mapboxApiKey}
+        viewport={viewport}
+        layers={[layer]}
+        mapStyle={formData.mapbox_style}
+        setControlValue={setControlValue}
+      />
+    );
+  }
 }
 
-deckGeoJson.propTypes = propTypes;
-deckGeoJson.defaultProps = defaultProps;
+DeckGLGeoJson.propTypes = propTypes;
+DeckGLGeoJson.defaultProps = defaultProps;
 
-export default deckGeoJson;
+export default DeckGLGeoJson;
diff --git a/...art-kepler/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx b/...art-kepler/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) {
-      this.containerRef.current.setTooltip(tooltip);
+    const { current } = this.containerRef;
+    if (current) {
+      current.setTooltip(tooltip);
     }
   };
 

diff --git a/...pler/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Screengrid/Screengrid.jsx b/...pler/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}

diff --git a/...preset-chart-kepler/packages/superset-ui-legacy-preset-chart-deckgl/src/transformProps.js b/...preset-chart-kepler/packages/superset-ui-legacy-preset-chart-deckgl/src/transformProps.js
@@ -20,15 +20,14 @@ 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,
     height,
     onAddFilter,
     payload: queryData,
     setControlValue,
-    setTooltip,
     viewport: {
       ...rawFormData.viewport,
       height,