Refactoring deckgl

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,
+};