Added DeckGL.Polygon Layer w/ JS controls

superset/assets/javascripts/explore/stores/controls.jsx

@@ -571,6 +571,16 @@ export const controls = {
     }),
   },
 
+  polygon: {
+    type: 'SelectControl',
+    label: t('Polygon Column'),
+    validators: [v.nonEmpty],
+    description: t('Select the polygon column'),
+    mapStateToProps: state => ({
+      choices: (state.datasource) ? state.datasource.all_cols : [],
+    }),
+  },
+
   point_radius_scale: {
     type: 'SelectControl',
     freeForm: true,

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

@@ -517,6 +517,44 @@ export const visTypes = {
     ],
   },
 
+  deck_polygon: {
+    label: t('Deck.gl - Polygon'),
+    requiresTime: true,
+    controlPanelSections: [
+      {
+        label: t('Query'),
+        expanded: true,
+        controlSetRows: [
+          ['polygon', 'row_limit'],
+        ],
+      },
+      {
+        label: t('Map'),
+        controlSetRows: [
+          ['mapbox_style', 'viewport'],
+        ],
+      },
+      {
+        label: t('Polygon Settings'),
+        controlSetRows: [
+          ['fill_color_picker', 'stroke_color_picker'],
+          ['filled', 'stroked'],
+          ['extruded', null],
+          ['point_radius_scale', null],
+        ],
+      },
+      {
+        label: t('Advanced'),
+        controlSetRows: [
+          ['js_columns'],
+          ['js_datapoint_mutator'],
+          ['js_tooltip'],
+          ['js_onclick_href'],
+        ],
+      },
+    ],
+  },
+
   deck_arc: {
     label: t('Deck.gl - Arc'),
     requiresTime: true,

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

@@ -6,6 +6,7 @@ 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';
 
 const layerGenerators = {
   deck_grid,
@@ -15,5 +16,6 @@ const layerGenerators = {
   deck_scatter,
   deck_geojson,
   deck_arc,
+  deck_polygon,
 };
 export default layerGenerators;

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

@@ -0,0 +1,28 @@
+import { PolygonLayer } from 'deck.gl';
+
+import * as common from './common';
+import sandboxedEval from '../../../javascripts/modules/sandbox';
+
+export default function polygonLayer(formData, payload, slice) {
+  const fd = formData;
+  const fc = fd.fill_color_picker;
+  let data = payload.data.polygons.map(d => ({
+    ...d,
+    fillColor: [fc.r, fc.g, fc.b, 255 * fc.a],
+  }));
+
+  if (fd.js_datapoint_mutator) {
+    // Applying user defined data mutator if defined
+    const jsFnMutator = sandboxedEval(fd.js_datapoint_mutator);
+    data = data.map(jsFnMutator);
+  }
+
+  return new PolygonLayer({
+    id: `path-layer-${fd.slice_id}`,
+    data,
+    filled: fd.filled,
+    stroked: fd.stoked,
+    extruded: fd.extruded,
+    ...common.commonLayerProps(fd, slice),
+  });
+}

superset/assets/visualizations/main.js

@@ -47,6 +47,7 @@ export const VIZ_TYPES = {
   deck_geojson: 'deck_geojson',
   deck_multi: 'deck_multi',
   deck_arc: 'deck_arc',
+  deck_polygon: 'deck_polygon',
 };
 
 const vizMap = {
@@ -94,6 +95,7 @@ const vizMap = {
   [VIZ_TYPES.deck_path]: deckglFactory,
   [VIZ_TYPES.deck_geojson]: deckglFactory,
   [VIZ_TYPES.deck_arc]: deckglFactory,
+  [VIZ_TYPES.deck_polygon]: deckglFactory,
   [VIZ_TYPES.deck_multi]: require('./deckgl/multi.jsx'),
 };
 export default vizMap;

superset/data/__init__.py

@@ -1552,6 +1552,36 @@ def load_paris_iris_geojson():
     tbl.fetch_metadata()
 
 
+def load_sf_population_polygons():
+    tbl_name = 'sf_population_polygons'
+
+    with gzip.open(os.path.join(DATA_FOLDER, 'sf_population.json.gz')) as f:
+        df = pd.read_json(f)
+        df['contour'] = df.contour.map(json.dumps)
+
+    df.to_sql(
+        tbl_name,
+        db.engine,
+        if_exists='replace',
+        chunksize=500,
+        dtype={
+            'zipcode': BigInteger,
+            'population': BigInteger,
+            'contour': Text,
+            'area': BigInteger,
+        },
+        index=False)
+    print("Creating table {} reference".format(tbl_name))
+    tbl = db.session.query(TBL).filter_by(table_name=tbl_name).first()
+    if not tbl:
+        tbl = TBL(table_name=tbl_name)
+    tbl.description = "Population density of San Francisco"
+    tbl.database = get_or_create_main_db()
+    db.session.merge(tbl)
+    db.session.commit()
+    tbl.fetch_metadata()
+
+
 def load_bart_lines():
     tbl_name = 'bart_lines'
     with gzip.open(os.path.join(DATA_FOLDER, 'bart-lines.json.gz')) as f:

superset/viz.py

@@ -2067,6 +2067,28 @@ def get_data(self, df):
         }
 
 
+class DeckPolygon(BaseDeckGLViz):
+
+    """deck.gl's Polygon Layer"""
+
+    viz_type = 'deck_polygon'
+    verbose_name = _('Deck.gl - Polygon')
+
+    def query_obj(self):
+        d = super(DeckPolygon, self).query_obj()
+        d['columns'] = [self.form_data.get('polygon')]
+        d['metrics'] = []
+        d['groupby'] = []
+        return d
+
+    def get_data(self, df):
+        fd = self.form_data
+        return {
+            'polygons': [{'polygon': json.loads(item)} for item in df[fd.get('polygon')]],
+            'mapboxApiKey': config.get('MAPBOX_API_KEY'),
+        }
+
+
 class EventFlowViz(BaseViz):
 
     """A visualization to explore patterns in event sequences"""