From c77bab8160fac364bac2c46387b78ec13ea985b3 Mon Sep 17 00:00:00 2001 From: Beto Dealmeida Date: Tue, 30 Jan 2018 23:03:35 -0800 Subject: [PATCH] Refactoring deckgl (#4293) * Refactoring dekgl * Refactor layers * Standardize function name * Fix exports * Fix require * Fix lint --- .../assets/visualizations/deckgl/factory.jsx | 25 --------------- .../visualizations/deckgl/layers/arc.jsx | 31 ++++++++++++++++++- .../visualizations/deckgl/layers/geojson.jsx | 31 ++++++++++++++++++- .../visualizations/deckgl/layers/grid.jsx | 31 ++++++++++++++++++- .../visualizations/deckgl/layers/hex.jsx | 31 ++++++++++++++++++- .../visualizations/deckgl/layers/index.js | 16 +++++----- .../visualizations/deckgl/layers/path.jsx | 31 ++++++++++++++++++- .../visualizations/deckgl/layers/polygon.jsx | 31 ++++++++++++++++++- .../visualizations/deckgl/layers/scatter.jsx | 31 ++++++++++++++++++- .../deckgl/layers/screengrid.jsx | 31 ++++++++++++++++++- superset/assets/visualizations/main.js | 17 +++++----- 11 files changed, 256 insertions(+), 50 deletions(-) delete mode 100644 superset/assets/visualizations/deckgl/factory.jsx diff --git a/superset/assets/visualizations/deckgl/factory.jsx b/superset/assets/visualizations/deckgl/factory.jsx deleted file mode 100644 index fa6c372979..0000000000 --- a/superset/assets/visualizations/deckgl/factory.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import DeckGLContainer from './DeckGLContainer'; -import layerGenerators from './layers'; - -export default function deckglFactory(slice, payload, setControlValue) { - const fd = slice.formData; - const layer = layerGenerators[fd.viz_type](fd, payload, slice); - const viewport = { - ...fd.viewport, - width: slice.width(), - height: slice.height(), - }; - ReactDOM.render( - , - document.getElementById(slice.containerId), - ); -} diff --git a/superset/assets/visualizations/deckgl/layers/arc.jsx b/superset/assets/visualizations/deckgl/layers/arc.jsx index 8e04e9af52..ebeff3cb89 100644 --- a/superset/assets/visualizations/deckgl/layers/arc.jsx +++ b/superset/assets/visualizations/deckgl/layers/arc.jsx @@ -1,9 +1,14 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + import { ArcLayer } from 'deck.gl'; +import DeckGLContainer from './../DeckGLContainer'; + import * as common from './common'; import sandboxedEval from '../../../javascripts/modules/sandbox'; -export default function arcLayer(formData, payload, slice) { +function getLayer(formData, payload, slice) { const fd = formData; const fc = fd.color_picker; let data = payload.data.arcs.map(d => ({ @@ -24,3 +29,27 @@ export default function arcLayer(formData, payload, slice) { ...common.commonLayerProps(fd, slice), }); } + +function deckArc(slice, payload, setControlValue) { + const layer = getLayer(slice.formData, payload, slice); + const viewport = { + ...slice.formData.viewport, + width: slice.width(), + height: slice.height(), + }; + ReactDOM.render( + , + document.getElementById(slice.containerId), + ); +} + +module.exports = { + default: deckArc, + getLayer, +}; diff --git a/superset/assets/visualizations/deckgl/layers/geojson.jsx b/superset/assets/visualizations/deckgl/layers/geojson.jsx index 7792d23c80..7f0936304e 100644 --- a/superset/assets/visualizations/deckgl/layers/geojson.jsx +++ b/superset/assets/visualizations/deckgl/layers/geojson.jsx @@ -1,5 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + import { GeoJsonLayer } from 'deck.gl'; +import DeckGLContainer from './../DeckGLContainer'; + import * as common from './common'; import { hexToRGB } from '../../../javascripts/modules/colors'; import sandboxedEval from '../../../javascripts/modules/sandbox'; @@ -53,7 +58,7 @@ const recurseGeoJson = (node, propOverrides, extraProps) => { } }; -export default function geoJsonLayer(formData, payload, slice) { +function getLayer(formData, payload, slice) { const fd = formData; const fc = fd.fill_color_picker; const sc = fd.stroke_color_picker; @@ -87,3 +92,27 @@ export default function geoJsonLayer(formData, payload, slice) { ...common.commonLayerProps(fd, slice), }); } + +function deckGeoJson(slice, payload, setControlValue) { + const layer = getLayer(slice.formData, payload, slice); + const viewport = { + ...slice.formData.viewport, + width: slice.width(), + height: slice.height(), + }; + ReactDOM.render( + , + document.getElementById(slice.containerId), + ); +} + +module.exports = { + default: deckGeoJson, + getLayer, +}; diff --git a/superset/assets/visualizations/deckgl/layers/grid.jsx b/superset/assets/visualizations/deckgl/layers/grid.jsx index ed970d2976..1e7ff1d70b 100644 --- a/superset/assets/visualizations/deckgl/layers/grid.jsx +++ b/superset/assets/visualizations/deckgl/layers/grid.jsx @@ -1,9 +1,14 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + import { GridLayer } from 'deck.gl'; +import DeckGLContainer from './../DeckGLContainer'; + import * as common from './common'; import sandboxedEval from '../../../javascripts/modules/sandbox'; -export default function getLayer(formData, payload, slice) { +function getLayer(formData, payload, slice) { const fd = formData; const c = fd.color_picker; let data = payload.data.features.map(d => ({ @@ -31,3 +36,27 @@ export default function getLayer(formData, payload, slice) { ...common.commonLayerProps(fd, slice), }); } + +function deckGrid(slice, payload, setControlValue) { + const layer = getLayer(slice.formData, payload, slice); + const viewport = { + ...slice.formData.viewport, + width: slice.width(), + height: slice.height(), + }; + ReactDOM.render( + , + document.getElementById(slice.containerId), + ); +} + +module.exports = { + default: deckGrid, + getLayer, +}; diff --git a/superset/assets/visualizations/deckgl/layers/hex.jsx b/superset/assets/visualizations/deckgl/layers/hex.jsx index 86fb5349d5..7dc4d8b025 100644 --- a/superset/assets/visualizations/deckgl/layers/hex.jsx +++ b/superset/assets/visualizations/deckgl/layers/hex.jsx @@ -1,9 +1,14 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + import { HexagonLayer } from 'deck.gl'; +import DeckGLContainer from './../DeckGLContainer'; + import * as common from './common'; import sandboxedEval from '../../../javascripts/modules/sandbox'; -export default function getLayer(formData, payload, slice) { +function getLayer(formData, payload, slice) { const fd = formData; const c = fd.color_picker; let data = payload.data.features.map(d => ({ @@ -31,3 +36,27 @@ export default function getLayer(formData, payload, slice) { ...common.commonLayerProps(fd, slice), }); } + +function deckHex(slice, payload, setControlValue) { + const layer = getLayer(slice.formData, payload, slice); + const viewport = { + ...slice.formData.viewport, + width: slice.width(), + height: slice.height(), + }; + ReactDOM.render( + , + document.getElementById(slice.containerId), + ); +} + +module.exports = { + default: deckHex, + getLayer, +}; diff --git a/superset/assets/visualizations/deckgl/layers/index.js b/superset/assets/visualizations/deckgl/layers/index.js index 4e354e535e..d8d25d5b0e 100644 --- a/superset/assets/visualizations/deckgl/layers/index.js +++ b/superset/assets/visualizations/deckgl/layers/index.js @@ -1,12 +1,12 @@ /* eslint camelcase: 0 */ -import deck_grid from './grid'; -import deck_screengrid from './screengrid'; -import deck_path from './path'; -import deck_hex from './hex'; -import deck_scatter from './scatter'; -import deck_geojson from './geojson'; -import deck_arc from './arc'; -import deck_polygon from './polygon'; +import { getLayer as deck_grid } from './grid'; +import { getLayer as deck_screengrid } from './screengrid'; +import { getLayer as deck_path } from './path'; +import { getLayer as deck_hex } from './hex'; +import { getLayer as deck_scatter } from './scatter'; +import { getLayer as deck_geojson } from './geojson'; +import { getLayer as deck_arc } from './arc'; +import { getLayer as deck_polygon } from './polygon'; const layerGenerators = { deck_grid, diff --git a/superset/assets/visualizations/deckgl/layers/path.jsx b/superset/assets/visualizations/deckgl/layers/path.jsx index df2c1b0c1a..a20c2bbdb0 100644 --- a/superset/assets/visualizations/deckgl/layers/path.jsx +++ b/superset/assets/visualizations/deckgl/layers/path.jsx @@ -1,9 +1,14 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + import { PathLayer } from 'deck.gl'; +import DeckGLContainer from './../DeckGLContainer'; + import * as common from './common'; import sandboxedEval from '../../../javascripts/modules/sandbox'; -export default function getLayer(formData, payload, slice) { +function getLayer(formData, payload, slice) { const fd = formData; const c = fd.color_picker; const fixedColor = [c.r, c.g, c.b, 255 * c.a]; @@ -27,3 +32,27 @@ export default function getLayer(formData, payload, slice) { ...common.commonLayerProps(fd, slice), }); } + +function deckPath(slice, payload, setControlValue) { + const layer = getLayer(slice.formData, payload, slice); + const viewport = { + ...slice.formData.viewport, + width: slice.width(), + height: slice.height(), + }; + ReactDOM.render( + , + document.getElementById(slice.containerId), + ); +} + +module.exports = { + default: deckPath, + getLayer, +}; diff --git a/superset/assets/visualizations/deckgl/layers/polygon.jsx b/superset/assets/visualizations/deckgl/layers/polygon.jsx index 886282707f..920fb6a89a 100644 --- a/superset/assets/visualizations/deckgl/layers/polygon.jsx +++ b/superset/assets/visualizations/deckgl/layers/polygon.jsx @@ -1,9 +1,14 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + import { PolygonLayer } from 'deck.gl'; +import DeckGLContainer from './../DeckGLContainer'; + import * as common from './common'; import sandboxedEval from '../../../javascripts/modules/sandbox'; -export default function polygonLayer(formData, payload, slice) { +function getLayer(formData, payload, slice) { const fd = formData; const fc = fd.fill_color_picker; let data = payload.data.features.map(d => ({ @@ -26,3 +31,27 @@ export default function polygonLayer(formData, payload, slice) { ...common.commonLayerProps(fd, slice), }); } + +function deckPolygon(slice, payload, setControlValue) { + const layer = getLayer(slice.formData, payload, slice); + const viewport = { + ...slice.formData.viewport, + width: slice.width(), + height: slice.height(), + }; + ReactDOM.render( + , + document.getElementById(slice.containerId), + ); +} + +module.exports = { + default: deckPolygon, + getLayer, +}; diff --git a/superset/assets/visualizations/deckgl/layers/scatter.jsx b/superset/assets/visualizations/deckgl/layers/scatter.jsx index 0f591a2123..ed1dd792af 100644 --- a/superset/assets/visualizations/deckgl/layers/scatter.jsx +++ b/superset/assets/visualizations/deckgl/layers/scatter.jsx @@ -1,11 +1,16 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + import { ScatterplotLayer } from 'deck.gl'; +import DeckGLContainer from './../DeckGLContainer'; + import * as common from './common'; import { getColorFromScheme, hexToRGB } from '../../../javascripts/modules/colors'; import { unitToRadius } from '../../../javascripts/modules/geo'; import sandboxedEval from '../../../javascripts/modules/sandbox'; -export default function getLayer(formData, payload, slice) { +function getLayer(formData, payload, slice) { const fd = formData; const c = fd.color_picker || { r: 0, g: 0, b: 0, a: 1 }; const fixedColor = [c.r, c.g, c.b, 255 * c.a]; @@ -42,3 +47,27 @@ export default function getLayer(formData, payload, slice) { ...common.commonLayerProps(fd, slice), }); } + +function deckScatter(slice, payload, setControlValue) { + const layer = getLayer(slice.formData, payload, slice); + const viewport = { + ...slice.formData.viewport, + width: slice.width(), + height: slice.height(), + }; + ReactDOM.render( + , + document.getElementById(slice.containerId), + ); +} + +module.exports = { + default: deckScatter, + getLayer, +}; diff --git a/superset/assets/visualizations/deckgl/layers/screengrid.jsx b/superset/assets/visualizations/deckgl/layers/screengrid.jsx index ca589cd8d5..7494c67d3d 100644 --- a/superset/assets/visualizations/deckgl/layers/screengrid.jsx +++ b/superset/assets/visualizations/deckgl/layers/screengrid.jsx @@ -1,9 +1,14 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + import { ScreenGridLayer } from 'deck.gl'; +import DeckGLContainer from './../DeckGLContainer'; + import * as common from './common'; import sandboxedEval from '../../../javascripts/modules/sandbox'; -export default function getLayer(formData, payload, slice) { +function getLayer(formData, payload, slice) { const fd = formData; const c = fd.color_picker; let data = payload.data.features.map(d => ({ @@ -31,3 +36,27 @@ export default function getLayer(formData, payload, slice) { ...common.commonLayerProps(fd, slice), }); } + +function deckScreenGrid(slice, payload, setControlValue) { + const layer = getLayer(slice.formData, payload, slice); + const viewport = { + ...slice.formData.viewport, + width: slice.width(), + height: slice.height(), + }; + ReactDOM.render( + , + document.getElementById(slice.containerId), + ); +} + +module.exports = { + default: deckScreenGrid, + getLayer, +}; diff --git a/superset/assets/visualizations/main.js b/superset/assets/visualizations/main.js index 93c12e8617..40b6592d90 100644 --- a/superset/assets/visualizations/main.js +++ b/superset/assets/visualizations/main.js @@ -1,5 +1,4 @@ /* eslint-disable global-require */ -import deckglFactory from './deckgl/factory'; // You ***should*** use these to reference viz_types in code export const VIZ_TYPES = { @@ -89,14 +88,14 @@ const vizMap = { [VIZ_TYPES.event_flow]: require('./EventFlow.jsx'), [VIZ_TYPES.paired_ttest]: require('./paired_ttest.jsx'), [VIZ_TYPES.partition]: require('./partition.js'), - [VIZ_TYPES.deck_scatter]: deckglFactory, - [VIZ_TYPES.deck_screengrid]: deckglFactory, - [VIZ_TYPES.deck_grid]: deckglFactory, - [VIZ_TYPES.deck_hex]: deckglFactory, - [VIZ_TYPES.deck_path]: deckglFactory, - [VIZ_TYPES.deck_geojson]: deckglFactory, - [VIZ_TYPES.deck_arc]: deckglFactory, - [VIZ_TYPES.deck_polygon]: deckglFactory, + [VIZ_TYPES.deck_scatter]: require('./deckgl/layers/scatter.jsx').default, + [VIZ_TYPES.deck_screengrid]: require('./deckgl/layers/screengrid.jsx').default, + [VIZ_TYPES.deck_grid]: require('./deckgl/layers/grid.jsx').default, + [VIZ_TYPES.deck_hex]: require('./deckgl/layers/hex.jsx').default, + [VIZ_TYPES.deck_path]: require('./deckgl/layers/path.jsx').default, + [VIZ_TYPES.deck_geojson]: require('./deckgl/layers/geojson.jsx').default, + [VIZ_TYPES.deck_arc]: require('./deckgl/layers/arc.jsx').default, + [VIZ_TYPES.deck_polygon]: require('./deckgl/layers/polygon.jsx').default, [VIZ_TYPES.deck_multi]: require('./deckgl/multi.jsx'), }; export default vizMap;