From 8fbeba101c9563c3c209f881e1cdf3bfb3af3e89 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Thu, 19 Mar 2020 16:30:42 -0700 Subject: [PATCH] feat: make all deckgl charts handle their own tooltips (#13) * feat: make all deckgl charts handle their own tooltips * fix: use destructuring --- .../src/AnimatableDeckGLContainer.jsx | 5 +- .../src/CategoricalDeckGLContainer.jsx | 10 ++-- .../src/Multi/Multi.jsx | 14 +++-- .../src/factory.jsx | 20 ++++--- .../src/layers/Geojson/Geojson.jsx | 52 +++++++++++-------- .../src/layers/Polygon/Polygon.jsx | 5 +- .../src/layers/Screengrid/Screengrid.jsx | 14 +++-- .../src/transformProps.js | 3 +- 8 files changed, 78 insertions(+), 45 deletions(-) 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 23e13b52eb..9fb19c7a4d 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 @@ -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/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.jsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.jsx index e32130e0e1..33d2febf87 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.jsx +++ b/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) { - this.containerRef.current.setTooltip(tooltip); + const { current } = this.containerRef; + if (current) { + current.setTooltip(tooltip); } }; diff --git a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/Multi/Multi.jsx b/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/Multi/Multi.jsx index a1168e9633..8a5764fd24 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-legacy-preset-chart-deckgl/src/Multi/Multi.jsx +++ b/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 ( { + const { current } = this.containerRef; + if (current) { + current.setTooltip(tooltip); + } + }; + render() { const { formData, payload, setControlValue, height, width } = this.props; const { layer, viewport } = this.state; return ( { + const { current } = this.containerRef; + 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 + // if (formData.autozoom) { + // viewport = common.fitViewport(viewport, geojsonExtent(payload.data.features)); + // } + + const layer = getLayer(formData, payload, onAddFilter, this.setTooltip); + + return ( + + ); + } } -deckGeoJson.propTypes = propTypes; -deckGeoJson.defaultProps = defaultProps; +DeckGLGeoJson.propTypes = propTypes; +DeckGLGeoJson.defaultProps = defaultProps; -export default deckGeoJson; +export default DeckGLGeoJson; 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 25b0baae7e..2801c7e4ff 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 @@ -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/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 1128d1bfeb..4e0b175a44 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 @@ -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 (
{}; 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,