Merge pull request #1 from apache-superset/upgrade_simple

chore: upgrade to deck.gl 7.x
apache · Nov 30, 2021 · 6c895c9 · 6c895c9
1 parent 369021d
commit 6c895c9
Show file tree

Hide file tree

Showing 13 changed files with 90 additions and 91 deletions.
diff --git a/...i/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/package.json b/...i/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/package.json
@@ -30,7 +30,7 @@
     "d3-array": "^1.2.4",
     "d3-color": "^1.2.0",
     "d3-scale": "^2.1.2",
-    "deck.gl": "^5.3.5",
+    "deck.gl": "7.1.11",
     "jquery": "^3.4.1",
     "lodash": "^4.17.15",
     "mapbox-gl": "^0.53.0",

diff --git a/...-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx b/...-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx
@@ -42,32 +42,20 @@ const propTypes = {
   mapStyle: PropTypes.string,
   mapboxApiAccessToken: PropTypes.string.isRequired,
   setControlValue: PropTypes.func,
-  onViewportChange: PropTypes.func,
   onValuesChange: PropTypes.func,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
 };
 
 const defaultProps = {
   aggregation: false,
   disabled: false,
   mapStyle: 'light',
   setControlValue: () => {},
-  onViewportChange: () => {},
   onValuesChange: () => {},
 };
 
-export default class AnimatableDeckGLContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.onViewportChange = this.onViewportChange.bind(this);
-  }
-
-  onViewportChange(viewport) {
-    const originalViewport = this.props.disabled
-      ? { ...viewport }
-      : { ...viewport, height: viewport.height + PLAYSLIDER_HEIGHT };
-    this.props.onViewportChange(originalViewport);
-  }
-
+export default class AnimatableDeckGLContainer extends React.PureComponent {
   render() {
     const {
       start,
@@ -83,24 +71,22 @@ export default class AnimatableDeckGLContainer extends React.Component {
       setControlValue,
       mapStyle,
       mapboxApiAccessToken,
+      height,
+      width,
     } = this.props;
     const layers = getLayers(values);
 
-    // leave space for the play slider
-    const modifiedViewport = {
-      ...viewport,
-      height: disabled ? viewport.height : viewport.height - PLAYSLIDER_HEIGHT,
-    };
-
     return (
       <div>
         <DeckGLContainer
-          viewport={modifiedViewport}
+          viewport={viewport}
           layers={layers}
           setControlValue={setControlValue}
           mapStyle={mapStyle}
           mapboxApiAccessToken={mapboxApiAccessToken}
-          onViewportChange={this.onViewportChange}
+          bottomMargin={disabled ? 0 : PLAYSLIDER_HEIGHT}
+          width={width}
+          height={height}
         />
         {!disabled && (
           <PlaySlider

diff --git a/...deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.jsx b/...deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.jsx
@@ -74,6 +74,8 @@ const propTypes = {
   payload: PropTypes.object.isRequired,
   onAddFilter: PropTypes.func,
   setTooltip: PropTypes.func,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
 };
 
 export default class CategoricalDeckGLContainer extends React.PureComponent {
@@ -89,7 +91,6 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
 
     this.getLayers = this.getLayers.bind(this);
     this.onValuesChange = this.onValuesChange.bind(this);
-    this.onViewportChange = this.onViewportChange.bind(this);
     this.toggleCategory = this.toggleCategory.bind(this);
     this.showSingleCategory = this.showSingleCategory.bind(this);
   }
@@ -106,10 +107,6 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
     });
   }
 
-  onViewportChange(viewport) {
-    this.setState({ viewport });
-  }
-
   getStateFromProps(props, state) {
     const features = props.payload.data.features || [];
     const timestamps = features.map(f => f.__timestamp);
@@ -239,10 +236,11 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
           onValuesChange={this.onValuesChange}
           disabled={this.state.disabled}
           viewport={this.state.viewport}
-          onViewportChange={this.onViewportChange}
           mapboxApiAccessToken={this.props.mapboxApiKey}
           mapStyle={this.props.formData.mapbox_style}
           setControlValue={this.props.setControlValue}
+          width={this.props.width}
+          height={this.props.height}
         >
           <Legend
             categories={this.state.categories}

diff --git a/...ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/DeckGLContainer.jsx b/...ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/DeckGLContainer.jsx
@@ -22,76 +22,60 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import MapGL from 'react-map-gl';
+import { StaticMap } from 'react-map-gl';
 import DeckGL from 'deck.gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
-import { isEqual } from 'lodash';
 import './css/deckgl.css';
 
-const TICK = 2000; // milliseconds
+const TICK = 250; // milliseconds
 
 const propTypes = {
   viewport: PropTypes.object.isRequired,
   layers: PropTypes.array.isRequired,
   setControlValue: PropTypes.func,
   mapStyle: PropTypes.string,
   mapboxApiAccessToken: PropTypes.string.isRequired,
-  onViewportChange: PropTypes.func,
+  children: PropTypes.node,
+  bottomMargin: PropTypes.number,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
 };
 const defaultProps = {
   mapStyle: 'light',
-  onViewportChange: () => {},
   setControlValue: () => {},
+  children: null,
+  bottomMargin: 0,
 };
 
 export default class DeckGLContainer extends React.Component {
   constructor(props) {
     super(props);
     this.tick = this.tick.bind(this);
-    this.onViewportChange = this.onViewportChange.bind(this);
+    this.onViewStateChange = this.onViewStateChange.bind(this);
     // This has to be placed after this.tick is bound to this
     this.state = {
-      previousViewport: props.viewport,
       timer: setInterval(this.tick, TICK),
+      viewState: props.viewport,
     };
   }
 
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.viewport !== prevState.viewport) {
-      return {
-        viewport: { ...nextProps.viewport },
-        previousViewport: prevState.viewport,
-      };
-    }
-
-    return null;
-  }
-
   componentWillUnmount() {
     clearInterval(this.state.timer);
   }
 
-  onViewportChange(viewport) {
-    const vp = Object.assign({}, viewport);
-    // delete vp.width;
-    // delete vp.height;
-    const newVp = { ...this.state.previousViewport, ...vp };
-
-    // this.setState(() => ({ viewport: newVp }));
-    this.props.onViewportChange(newVp);
+  onViewStateChange({ viewState }) {
+    this.setState({ viewState, lastUpdate: Date.now() });
   }
 
   tick() {
-    // Limiting updating viewport controls through Redux at most 1*sec
-    // Deep compare is needed as shallow equality doesn't work here, viewport object
-    // changes id at every change
-    if (this.state && !isEqual(this.state.previousViewport, this.props.viewport)) {
+    // Rate limiting updating viewport controls as it triggers lotsa renders
+    const { lastUpdate } = this.state;
+    if (lastUpdate && Date.now() - lastUpdate > TICK) {
       const setCV = this.props.setControlValue;
-      const vp = this.props.viewport;
       if (setCV) {
-        setCV('viewport', vp);
+        setCV('viewport', this.state.viewState);
       }
-      this.setState(() => ({ previousViewport: this.props.viewport }));
+      this.setState({ lastUpdate: null });
     }
   }
 
@@ -105,17 +89,30 @@ export default class DeckGLContainer extends React.Component {
   }
 
   render() {
-    const { viewport } = this.props;
+    const { children, bottomMargin, height, width } = this.props;
+    const { viewState } = this.state;
+    const adjustedHeight = height - bottomMargin;
+
+    const layers = this.layers();
 
     return (
-      <MapGL
-        {...viewport}
-        mapStyle={this.props.mapStyle}
-        onViewportChange={this.onViewportChange}
-        mapboxApiAccessToken={this.props.mapboxApiAccessToken}
-      >
-        <DeckGL {...viewport} layers={this.layers()} initWebGLParameters />
-      </MapGL>
+      <div style={{ position: 'relative', width, height: adjustedHeight }}>
+        <DeckGL
+          width={width}
+          height={adjustedHeight}
+          layers={layers}
+          viewState={viewState}
+          onViewStateChange={this.onViewStateChange}
+          initWebGLParameters
+          controller
+        >
+          <StaticMap
+            mapStyle={this.props.mapStyle}
+            mapboxApiAccessToken={this.props.mapboxApiAccessToken}
+          />
+        </DeckGL>
+        {children}
+      </div>
     );
   }
 }

diff --git a/...uperset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/factory.jsx b/...uperset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/factory.jsx
@@ -39,6 +39,8 @@ const propTypes = {
   viewport: PropTypes.object.isRequired,
   onAddFilter: PropTypes.func,
   setTooltip: PropTypes.func,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
 };
 const defaultProps = {
   onAddFilter() {},
@@ -81,7 +83,7 @@ export function createDeckGLComponent(getLayer, getPoints) {
     }
 
     render() {
-      const { formData, payload, setControlValue } = this.props;
+      const { formData, payload, setControlValue, height, width } = this.props;
       const { layer, viewport } = this.state;
 
       return (
@@ -92,6 +94,8 @@ export function createDeckGLComponent(getLayer, getPoints) {
           mapStyle={formData.mapbox_style}
           setControlValue={setControlValue}
           onViewportChange={this.onViewportChange}
+          width={width}
+          height={height}
         />
       );
     }
@@ -104,7 +108,16 @@ export function createDeckGLComponent(getLayer, getPoints) {
 
 export function createCategoricalDeckGLComponent(getLayer, getPoints) {
   function Component(props) {
-    const { formData, payload, setControlValue, onAddFilter, setTooltip, viewport } = props;
+    const {
+      formData,
+      payload,
+      setControlValue,
+      onAddFilter,
+      setTooltip,
+      viewport,
+      width,
+      height,
+    } = props;
 
     return (
       <CategoricalDeckGLContainer
@@ -117,6 +130,8 @@ export function createCategoricalDeckGLComponent(getLayer, getPoints) {
         onAddFilter={onAddFilter}
         setTooltip={setTooltip}
         getPoints={getPoints}
+        width={width}
+        height={height}
       />
     );
   }

diff --git a/...i-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Grid/Grid.jsx b/...i-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Grid/Grid.jsx
@@ -32,7 +32,7 @@ function setTooltipContent(o) {
     <div className="deckgl-tooltip">
       <TooltipRow
         label={`${t('Longitude and Latitude')}: `}
-        value={`${o.object.position[0]}, ${o.object.position[1]}`}
+        value={`${o.coordinate[0]}, ${o.coordinate[1]}`}
       />
       <TooltipRow label={`${t('Height')}: `} value={`${o.object.elevationValue}`} />
     </div>

diff --git a/...-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Hex/Hex.jsx b/...-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Hex/Hex.jsx
@@ -32,7 +32,7 @@ function setTooltipContent(o) {
     <div className="deckgl-tooltip">
       <TooltipRow
         label={`${t('Centroid (Longitude and Latitude)')}: `}
-        value={`(${o.object.centroid[0]}, ${o.object.centroid[1]})`}
+        value={`(${o.coordinate[0]}, ${o.coordinate[1]})`}
       />
       <TooltipRow label={`${t('Height')}: `} value={`${o.object.elevationValue}`} />
     </div>

diff --git a/...i-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Path/Path.jsx b/...i-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Path/Path.jsx
@@ -60,6 +60,9 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
 
   return new PathLayer({
     id: `path-layer-${fd.slice_id}`,
+    getColor: d => d.color,
+    getPath: d => d.path,
+    getWidth: d => d.width,
     data,
     rounded: true,
     widthScale: 1,

diff --git a/...ins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx b/...ins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx
@@ -137,6 +137,8 @@ const propTypes = {
   viewport: PropTypes.object.isRequired,
   onAddFilter: PropTypes.func,
   setTooltip: PropTypes.func,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
 };
 
 const defaultProps = {
@@ -153,7 +155,6 @@ class DeckGLPolygon extends React.Component {
     this.getLayers = this.getLayers.bind(this);
     this.onSelect = this.onSelect.bind(this);
     this.onValuesChange = this.onValuesChange.bind(this);
-    this.onViewportChange = this.onViewportChange.bind(this);
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -224,10 +225,6 @@ class DeckGLPolygon extends React.Component {
     });
   }
 
-  onViewportChange(viewport) {
-    this.setState({ viewport });
-  }
-
   getLayers(values) {
     if (this.props.payload.data.features === undefined) {
       return [];
@@ -276,7 +273,8 @@ class DeckGLPolygon extends React.Component {
           onValuesChange={this.onValuesChange}
           disabled={disabled}
           viewport={viewport}
-          onViewportChange={this.onViewportChange}
+          width={this.props.width}
+          height={this.props.height}
           mapboxApiAccessToken={payload.data.mapboxApiKey}
           mapStyle={formData.mapbox_style}
           setControlValue={setControlValue}

diff --git a/...ins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Scatter/Scatter.jsx b/...ins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Scatter/Scatter.jsx
@@ -70,9 +70,11 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
     id: `scatter-layer-${fd.slice_id}`,
     data: dataWithRadius,
     fp64: true,
+    getFillColor: d => d.color,
+    getRadius: d => d.radius,
     radiusMinPixels: fd.min_radius || null,
     radiusMaxPixels: fd.max_radius || null,
-    outline: false,
+    stroked: false,
     ...commonLayerProps(fd, setTooltip, setTooltipContent(fd)),
   });
 }