[geo] Add JS controls to remaining layers (#4272)

* Update viz.py

* added JS controls

* add JS to grid layout

* add JS to hexagon layer

* added JS controls to screengrid

* update to js_data_mutator controls

* remove .map()

superset/assets/javascripts/explore/stores/visTypes.js

@@ -373,6 +373,15 @@ export const visTypes = {
           ['grid_size', 'extruded'],
         ],
       },
+      {
+        label: t('Advanced'),
+        controlSetRows: [
+          ['js_columns'],
+          ['js_data_mutator'],
+          ['js_tooltip'],
+          ['js_onclick_href'],
+        ],
+      },
     ],
     controlOverrides: {
       size: {
@@ -402,6 +411,15 @@ export const visTypes = {
           ['grid_size', 'extruded'],
         ],
       },
+      {
+        label: t('Advanced'),
+        controlSetRows: [
+          ['js_columns'],
+          ['js_data_mutator'],
+          ['js_tooltip'],
+          ['js_onclick_href'],
+        ],
+      },
     ],
     controlOverrides: {
       size: {
@@ -469,6 +487,15 @@ export const visTypes = {
           ['grid_size', 'color_picker'],
         ],
       },
+      {
+        label: t('Advanced'),
+        controlSetRows: [
+          ['js_columns'],
+          ['js_data_mutator'],
+          ['js_tooltip'],
+          ['js_onclick_href'],
+        ],
+      },
     ],
     controlOverrides: {
       size: {
@@ -582,6 +609,15 @@ export const visTypes = {
           ['stroke_width', null],
         ],
       },
+      {
+        label: t('Advanced'),
+        controlSetRows: [
+          ['js_columns'],
+          ['js_data_mutator'],
+          ['js_tooltip'],
+          ['js_onclick_href'],
+        ],
+      },
     ],
   },
 

superset/assets/visualizations/deckgl/layers/arc.jsx

@@ -1,16 +1,26 @@
 import { ArcLayer } from 'deck.gl';
 
-export default function arcLayer(formData, payload) {
+import * as common from './common';
+import sandboxedEval from '../../../javascripts/modules/sandbox';
+
+export default function arcLayer(formData, payload, slice) {
   const fd = formData;
   const fc = fd.color_picker;
-  const data = payload.data.arcs.map(d => ({
+  let data = payload.data.arcs.map(d => ({
     ...d,
     color: [fc.r, fc.g, fc.b, 255 * fc.a],
   }));
 
+  if (fd.js_data_mutator) {
+    // Applying user defined data mutator if defined
+    const jsFnMutator = sandboxedEval(fd.js_data_mutator);
+    data = jsFnMutator(data);
+  }
+
   return new ArcLayer({
     id: `path-layer-${fd.slice_id}`,
     data,
     strokeWidth: (fd.stroke_width) ? fd.stroke_width : 3,
+    ...common.commonLayerProps(fd, slice),
   });
 }

superset/assets/visualizations/deckgl/layers/grid.jsx

@@ -1,12 +1,22 @@
 import { GridLayer } from 'deck.gl';
 
-export default function getLayer(formData, payload) {
+import * as common from './common';
+import sandboxedEval from '../../../javascripts/modules/sandbox';
+
+export default function getLayer(formData, payload, slice) {
   const fd = formData;
   const c = fd.color_picker;
-  const data = payload.data.features.map(d => ({
+  let data = payload.data.features.map(d => ({
     ...d,
     color: [c.r, c.g, c.b, 255 * c.a],
   }));
+
+  if (fd.js_data_mutator) {
+    // Applying user defined data mutator if defined
+    const jsFnMutator = sandboxedEval(fd.js_data_mutator);
+    data = jsFnMutator(data);
+  }
+
   return new GridLayer({
     id: `grid-layer-${fd.slice_id}`,
     data,
@@ -18,5 +28,6 @@ export default function getLayer(formData, payload) {
     outline: false,
     getElevationValue: points => points.reduce((sum, point) => sum + point.weight, 0),
     getColorValue: points => points.reduce((sum, point) => sum + point.weight, 0),
+    ...common.commonLayerProps(fd, slice),
   });
 }

superset/assets/visualizations/deckgl/layers/hex.jsx

@@ -1,13 +1,22 @@
 import { HexagonLayer } from 'deck.gl';
 
-export default function getLayer(formData, payload) {
+import * as common from './common';
+import sandboxedEval from '../../../javascripts/modules/sandbox';
+
+export default function getLayer(formData, payload, slice) {
   const fd = formData;
   const c = fd.color_picker;
-  const data = payload.data.features.map(d => ({
+  let data = payload.data.features.map(d => ({
     ...d,
     color: [c.r, c.g, c.b, 255 * c.a],
   }));
 
+  if (fd.js_data_mutator) {
+    // Applying user defined data mutator if defined
+    const jsFnMutator = sandboxedEval(fd.js_data_mutator);
+    data = jsFnMutator(data);
+  }
+
   return new HexagonLayer({
     id: `hex-layer-${fd.slice_id}`,
     data,
@@ -19,5 +28,6 @@ export default function getLayer(formData, payload) {
     outline: false,
     getElevationValue: points => points.reduce((sum, point) => sum + point.weight, 0),
     getColorValue: points => points.reduce((sum, point) => sum + point.weight, 0),
+    ...common.commonLayerProps(fd, slice),
   });
 }

superset/assets/visualizations/deckgl/layers/screengrid.jsx

@@ -1,13 +1,22 @@
 import { ScreenGridLayer } from 'deck.gl';
 
-export default function getLayer(formData, payload) {
+import * as common from './common';
+import sandboxedEval from '../../../javascripts/modules/sandbox';
+
+export default function getLayer(formData, payload, slice) {
   const fd = formData;
   const c = fd.color_picker;
-  const data = payload.data.features.map(d => ({
+  let data = payload.data.features.map(d => ({
     ...d,
     color: [c.r, c.g, c.b, 255 * c.a],
   }));
 
+  if (fd.js_data_mutator) {
+    // Applying user defined data mutator if defined
+    const jsFnMutator = sandboxedEval(fd.js_data_mutator);
+    data = jsFnMutator(data);
+  }
+
   // Passing a layer creator function instead of a layer since the
   // layer needs to be regenerated at each render
   return new ScreenGridLayer({
@@ -19,5 +28,6 @@ export default function getLayer(formData, payload) {
     maxColor: [c.r, c.g, c.b, 255 * c.a],
     outline: false,
     getWeight: d => d.weight || 0,
+    ...common.commonLayerProps(fd, slice),
   });
 }

superset/viz.py

@@ -2077,7 +2077,7 @@ class DeckArc(BaseDeckGLViz):
         arcs = d['features']
 
         return {
-            'arcs': [arc['position'] for arc in arcs],
+            'arcs': arcs,
             'mapboxApiKey': config.get('MAPBOX_API_KEY'),
         }