Refactoring deckgl

superset/assets/visualizations/deckgl/layers/index.js

@@ -3,7 +3,6 @@ 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';
@@ -13,7 +12,6 @@ const layerGenerators = {
   deck_screengrid,
   deck_path,
   deck_hex,
-  deck_scatter,
   deck_geojson,
   deck_arc,
   deck_polygon,

superset/assets/visualizations/deckgl/scatter.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import DeckGLContainer from './DeckGLContainer';
+
+import { ScatterplotLayer } from 'deck.gl';
+
+import * as common from './layers/common';
+import { getColorFromScheme, hexToRGB } from '../../javascripts/modules/colors';
+import { unitToRadius } from '../../javascripts/modules/geo';
+import sandboxedEval from '../../javascripts/modules/sandbox';
+
+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),
+  );
+}
+
+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];
+
+  let data = payload.data.features.map((d) => {
+    let radius = unitToRadius(fd.point_unit, d.radius) || 10;
+    if (fd.multiplier) {
+      radius *= fd.multiplier;
+    }
+    let color;
+    if (fd.dimension) {
+      color = hexToRGB(getColorFromScheme(d.cat_color, fd.color_scheme), c.a * 255);
+    } else {
+      color = fixedColor;
+    }
+    return {
+      ...d,
+      radius,
+      color,
+    };
+  });
+
+  if (fd.js_data_mutator) {
+    // Applying user defined data mutator if defined
+    const jsFnMutator = sandboxedEval(fd.js_data_mutator);
+    data = jsFnMutator(data);
+  }
+
+  return new ScatterplotLayer({
+    id: `scatter-layer-${fd.slice_id}`,
+    data,
+    fp64: true,
+    outline: false,
+    ...common.commonLayerProps(fd, slice),
+  });
+}
+
+module.exports = deckScatter;

superset/assets/visualizations/main.js

@@ -89,7 +89,7 @@ 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_scatter]: require('./deckgl/scatter.jsx'),
   [VIZ_TYPES.deck_screengrid]: deckglFactory,
   [VIZ_TYPES.deck_grid]: deckglFactory,
   [VIZ_TYPES.deck_hex]: deckglFactory,