From 6c895c9510d09a947381db0601201ffa689186ef Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Tue, 1 Oct 2019 21:19:42 -0700 Subject: [PATCH] Merge pull request #1 from apache-superset/upgrade_simple chore: upgrade to deck.gl 7.x --- .../package.json | 2 +- .../src/AnimatableDeckGLContainer.jsx | 32 +++----- .../src/CategoricalDeckGLContainer.jsx | 10 +-- .../src/DeckGLContainer.jsx | 81 +++++++++---------- .../src/factory.jsx | 19 ++++- .../src/layers/Grid/Grid.jsx | 2 +- .../src/layers/Hex/Hex.jsx | 2 +- .../src/layers/Path/Path.jsx | 3 + .../src/layers/Polygon/Polygon.jsx | 10 +-- .../src/layers/Scatter/Scatter.jsx | 4 +- .../src/layers/Screengrid/Screengrid.jsx | 12 ++- .../src/layers/common.jsx | 2 +- .../src/transformProps.js | 2 + 13 files changed, 90 insertions(+), 91 deletions(-) diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/package.json b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/package.json index f24f0b167e..34ef00e9a3 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/package.json +++ b/superset-frontend/temporary_superset_ui/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/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx index de4ca69bb6..3f7e399ba8 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx @@ -42,8 +42,9 @@ 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 = { @@ -51,23 +52,10 @@ const defaultProps = { 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 (
{!disabled && ( 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} > {}, 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 ( - - - +
+ + + + {children} +
); } } diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/factory.jsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/factory.jsx index 0442abb586..e4f730cddb 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/factory.jsx +++ b/superset-frontend/temporary_superset_ui/superset-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 ( ); } diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Grid/Grid.jsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Grid/Grid.jsx index 54e19ead94..0fdd038022 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Grid/Grid.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Grid/Grid.jsx @@ -32,7 +32,7 @@ function setTooltipContent(o) {
diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Hex/Hex.jsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Hex/Hex.jsx index 82c7e5c7c7..6db3d8296c 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Hex/Hex.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Hex/Hex.jsx @@ -32,7 +32,7 @@ function setTooltipContent(o) {
diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Path/Path.jsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Path/Path.jsx index 9ffaf9f982..aef20469bc 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Path/Path.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-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/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx index 6ce3e06a22..266618787f 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-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/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Scatter/Scatter.jsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Scatter/Scatter.jsx index 3e1bbbb6a6..7e1031ee49 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Scatter/Scatter.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-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)), }); } diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Screengrid/Screengrid.jsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Screengrid/Screengrid.jsx index ed2cadd7e7..6bdb709d63 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Screengrid/Screengrid.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/Screengrid/Screengrid.jsx @@ -42,7 +42,7 @@ function setTooltipContent(o) {
@@ -92,6 +92,8 @@ const propTypes = { viewport: PropTypes.object.isRequired, onAddFilter: PropTypes.func, setTooltip: PropTypes.func, + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, }; const defaultProps = { onAddFilter() {}, @@ -106,7 +108,6 @@ class DeckGLScreenGrid extends React.PureComponent { this.getLayers = this.getLayers.bind(this); this.onValuesChange = this.onValuesChange.bind(this); - this.onViewportChange = this.onViewportChange.bind(this); } static getDerivedStateFromProps(props, state) { @@ -151,10 +152,6 @@ class DeckGLScreenGrid extends React.PureComponent { }); } - onViewportChange(viewport) { - this.setState({ viewport }); - } - getLayers(values) { const filters = []; @@ -190,7 +187,8 @@ class DeckGLScreenGrid extends React.PureComponent { onValuesChange={this.onValuesChange} disabled={this.state.disabled} viewport={this.state.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/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/common.jsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/common.jsx index 0d9bf23419..76516df191 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/common.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/layers/common.jsx @@ -98,7 +98,7 @@ export function commonLayerProps(formData, setTooltip, setTooltipContent, onSele setTooltip({ content: tooltipContentGenerator(o), x: o.x, - y: o.y + 30, + y: o.y, }); } else { setTooltip(null); diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/transformProps.js b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/transformProps.js index db10062d7c..e27d9e6f00 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/transformProps.js +++ b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/transformProps.js @@ -24,6 +24,7 @@ export default function transformProps(chartProps) { return { formData: rawFormData, + height, onAddFilter, payload: queryData, setControlValue, @@ -33,5 +34,6 @@ export default function transformProps(chartProps) { height, width, }, + width, }; }