Refactoring deckgl (#4293)

* Refactoring dekgl

* Refactor layers

* Standardize function name

* Fix exports

* Fix require

* Fix lint

superset/assets/visualizations/deckgl/factory.jsx

@@ -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(
-    <DeckGLContainer
-      mapboxApiAccessToken={payload.data.mapboxApiKey}
-      viewport={viewport}
-      layers={[layer]}
-      mapStyle={fd.mapbox_style}
-      setControlValue={setControlValue}
-    />,
-    document.getElementById(slice.containerId),
-  );
-}

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(
+    <DeckGLContainer
+      mapboxApiAccessToken={payload.data.mapboxApiKey}
+      viewport={viewport}
+      layers={[layer]}
+      mapStyle={slice.formData.mapbox_style}
+      setControlValue={setControlValue}
+    />,
+    document.getElementById(slice.containerId),
+  );
+}
+
+module.exports = {
+  default: deckArc,
+  getLayer,
+};

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(
+    <DeckGLContainer
+      mapboxApiAccessToken={payload.data.mapboxApiKey}
+      viewport={viewport}
+      layers={[layer]}
+      mapStyle={slice.formData.mapbox_style}
+      setControlValue={setControlValue}
+    />,
+    document.getElementById(slice.containerId),
+  );
+}
+
+module.exports = {
+  default: deckGeoJson,
+  getLayer,
+};

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(
+    <DeckGLContainer
+      mapboxApiAccessToken={payload.data.mapboxApiKey}
+      viewport={viewport}
+      layers={[layer]}
+      mapStyle={slice.formData.mapbox_style}
+      setControlValue={setControlValue}
+    />,
+    document.getElementById(slice.containerId),
+  );
+}
+
+module.exports = {
+  default: deckGrid,
+  getLayer,
+};

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(
+    <DeckGLContainer
+      mapboxApiAccessToken={payload.data.mapboxApiKey}
+      viewport={viewport}
+      layers={[layer]}
+      mapStyle={slice.formData.mapbox_style}
+      setControlValue={setControlValue}
+    />,
+    document.getElementById(slice.containerId),
+  );
+}
+
+module.exports = {
+  default: deckHex,
+  getLayer,
+};

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,

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(
+    <DeckGLContainer
+      mapboxApiAccessToken={payload.data.mapboxApiKey}
+      viewport={viewport}
+      layers={[layer]}
+      mapStyle={slice.formData.mapbox_style}
+      setControlValue={setControlValue}
+    />,
+    document.getElementById(slice.containerId),
+  );
+}
+
+module.exports = {
+  default: deckPath,
+  getLayer,
+};

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(
+    <DeckGLContainer
+      mapboxApiAccessToken={payload.data.mapboxApiKey}
+      viewport={viewport}
+      layers={[layer]}
+      mapStyle={slice.formData.mapbox_style}
+      setControlValue={setControlValue}
+    />,
+    document.getElementById(slice.containerId),
+  );
+}
+
+module.exports = {
+  default: deckPolygon,
+  getLayer,
+};

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(
+    <DeckGLContainer
+      mapboxApiAccessToken={payload.data.mapboxApiKey}
+      viewport={viewport}
+      layers={[layer]}
+      mapStyle={slice.formData.mapbox_style}
+      setControlValue={setControlValue}
+    />,
+    document.getElementById(slice.containerId),
+  );
+}
+
+module.exports = {
+  default: deckScatter,
+  getLayer,
+};

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(
+    <DeckGLContainer
+      mapboxApiAccessToken={payload.data.mapboxApiKey}
+      viewport={viewport}
+      layers={[layer]}
+      mapStyle={slice.formData.mapbox_style}
+      setControlValue={setControlValue}
+    />,
+    document.getElementById(slice.containerId),
+  );
+}
+
+module.exports = {
+  default: deckScreenGrid,
+  getLayer,
+};

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;