[WiP] Integrate Kepler.gl as a new visualization type

Kepler.gl is an amazing geospatial React application. It offers a very
well designed user interface to compose geo layers and slice and dice
geospatial data.

As it turns out, Kepler is designed to be embedded as part of React
apps. It took me only a few hours to get to a working prototype.

Next steps:
* allow to save the state, without the data
* restore the state, and merge with the new data
* tweak styles, make a light style that looks decent within Superste,
  Kepler uses stylable components, so that should be somewhat
  straigthforward

(cherry picked from commit 43ed9a6)
(cherry picked from commit 595832a)
(cherry picked from commit 1fa1d05)

superset/assets/package.json

@@ -80,14 +80,15 @@
     "d3-tip": "^0.9.1",
     "datamaps": "^0.5.8",
     "datatables.net-bs": "^1.10.15",
-    "deck.gl": "^5.3.5",
+    "deck.gl": "^5.3.4",
     "distributions": "^1.0.0",
     "dnd-core": "^2.6.0",
     "dompurify": "^1.0.3",
     "geolib": "^2.0.24",
     "immutable": "^3.8.2",
     "jquery": "3.1.1",
     "json-bigint": "^0.3.0",
+    "kepler.gl": "0.1.6",
     "lodash": "^4.17.11",
     "mapbox-gl": "^0.45.0",
     "mathjs": "^3.20.2",

superset/assets/src/explore/controlPanels/Kepler.js

@@ -0,0 +1,44 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t } from '@superset-ui/translation';
+
+export default {
+  controlPanelSections: [
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [
+        ['all_columns'],
+        ['order_by_cols'],
+        ['row_limit', null],
+        ['adhoc_filters'],
+      ],
+    },
+    {
+      label: t('Advanced'),
+      expanded: true,
+      controlSetRows: [
+        ['autozoom', 'readonly'],
+        ['config'],
+      ],
+    },
+  ],
+  controlOverrides: {
+  },
+};

superset/assets/src/explore/controlPanels/index.js

@@ -62,6 +62,7 @@ import TimeTable from './TimeTable';
 import Treemap from './Treemap';
 import WordCloud from './WordCloud';
 import WorldMap from './WorldMap';
+import Kepler from './Kepler';
 import DeckArc from './DeckArc';
 import DeckGeojson from './DeckGeojson';
 import DeckGrid from './DeckGrid';
@@ -112,6 +113,7 @@ export const controlPanelConfigs = {
   treemap: Treemap,
   word_cloud: WordCloud,
   world_map: WorldMap,
+  kepler: Kepler,
   deck_arc: DeckArc,
   deck_geojson: DeckGeojson,
   deck_grid: DeckGrid,

superset/assets/src/explore/controls.jsx

@@ -442,6 +442,14 @@ export const controls = {
     description: t('When checked, the map will zoom to your data after each query'),
   },
 
+  readonly: {
+    type: 'CheckboxControl',
+    label: t('Read Only Mode'),
+    default: false,
+    renderTrigger: true,
+    description: t('Whether to show/hide the left panel'),
+  },
+
   show_perc: {
     type: 'CheckboxControl',
     label: t('Show percentage'),
@@ -1334,6 +1342,14 @@ export const controls = {
     default: '',
   },
 
+  config: {
+    type: 'TextAreaControl',
+    renderTrigger: true,
+    language: 'json',
+    label: t('Config'),
+    default: '',
+  },
+
   pandas_aggfunc: {
     type: 'SelectControl',
     label: t('Aggregation function'),

superset/assets/src/visualizations/Kepler/Kepler.css

@@ -0,0 +1,20 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+.kepler {
+}

superset/assets/src/visualizations/Kepler/Kepler.jsx

@@ -0,0 +1,132 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { connect, Provider } from 'react-redux';
+import PropTypes from 'prop-types';
+import KeplerGl from 'kepler.gl';
+import KeplerGlSchema from 'kepler.gl/schemas';
+import { addDataToMap } from 'kepler.gl/actions';
+import Processors from 'kepler.gl/processors';
+import shortid from 'shortid';
+import { createStore, combineReducers } from 'redux';
+import keplerGlReducer from 'kepler.gl/reducers';
+
+import './Kepler.css';
+
+const propTypes = {
+  height: PropTypes.number,
+  setControlValue: PropTypes.func,
+  readonly: PropTypes.boolean,
+};
+const reducers = combineReducers({
+  // <-- mount kepler.gl reducer in your app
+  keplerGl: keplerGlReducer,
+  readonly: false,
+});
+
+class Kepler extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.setMapConfig = this.setMapConfig.bind(this);
+    this.state = {
+      keplerId: shortid.generate(),
+    };
+  }
+  componentDidMount() {
+    this.addDataToMap(this.props);
+    this.setMapConfig();
+  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.features !== this.props.features) {
+      this.addDataToMap(nextProps, false);
+      this.setMapConfig();
+    }
+  }
+  getCurrentConfig() {
+    try {
+      const { keplerGl } = this.props;
+      return KeplerGlSchema.getConfigToSave(keplerGl[this.state.keplerId]);
+    } catch (e) {
+      return null;
+    }
+  }
+  setMapConfig() {
+    const { setControlValue } = this.props;
+    const config = this.getCurrentConfig();
+    if (config) {
+      setControlValue('config', JSON.stringify(this.getCurrentConfig(), null, 2));
+    }
+  }
+  addDataToMap(props, useControlConfig = true) {
+    let config = props.config;
+    if (!config) {
+      config = null;
+    } else {
+      config = useControlConfig ? JSON.parse(config) : this.getCurrentConfig();
+    }
+    const data = Processors.processRowObject(props.features);
+    const datasets = [{
+      data,
+      info: {
+        id: 'main',
+        label: 'Superset Data',
+      },
+    }];
+    const options = { readOnly: this.props.readonly };
+    if (this.props.autozoom) {
+      options.centerMap = true;
+      if (config && config.config) {
+        config.config.mapState = {};
+      }
+    }
+    props.dispatch(addDataToMap({ datasets, config, options }));
+  }
+  render() {
+    return (
+      <div>
+        <KeplerGl
+          id={this.state.keplerId}
+          onSaveMap={this.setMapConfig}
+          {...this.props}
+        />
+      </div>);
+  }
+}
+
+Kepler.displayName = 'Kepler';
+Kepler.propTypes = propTypes;
+
+const mapStateToProps = state => ({ keplerGl: state.keplerGl });
+const dispatchToProps = dispatch => ({ dispatch });
+const KeplerConnected = connect(mapStateToProps, dispatchToProps)(Kepler);
+
+// eslint-disable-next-line react/no-multi-comp
+export default class SubApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.store = createStore(reducers);
+  }
+  render() {
+    return (
+      <Provider store={this.store}>
+        <KeplerConnected {...this.props} />
+      </Provider>
+    );
+  }
+}

superset/assets/src/visualizations/Kepler/KeplerChartPlugin.js

@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t } from '@superset-ui/translation';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
+import transformProps from './transformProps';
+import thumbnail from './images/thumbnail.png';
+
+const metadata = new ChartMetadata({
+  name: t('Kepler.gl'),
+  description: '',
+  credits: ['https://github.com/uber/kepler.gl'],
+  thumbnail,
+});
+
+export default class KeplerChartPlugin extends ChartPlugin {
+  constructor() {
+    super({
+      metadata,
+      transformProps,
+      loadChart: () => import('./Kepler.jsx'),
+    });
+  }
+}

superset/assets/src/visualizations/Kepler/transformProps.js

@@ -0,0 +1,33 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export default function transformProps(chartProps) {
+  const { formData, height, width, payload, setControlValue } = chartProps;
+  const { mapboxApiAccessToken, features } = payload.data;
+  const { config, autozoom, readonly } = formData;
+  return {
+    height,
+    width,
+    config,
+    autozoom,
+    readonly,
+    features,
+    setControlValue,
+    mapboxApiAccessToken,
+  };
+}

superset/assets/src/visualizations/presets/DeckGLChartPreset.js

@@ -21,6 +21,7 @@ import ArcChartPlugin from '../deckgl/layers/Arc/ArcChartPlugin';
 import GeoJsonChartPlugin from '../deckgl/layers/Geojson/GeojsonChartPlugin';
 import GridChartPlugin from '../deckgl/layers/Grid/GridChartPlugin';
 import HexChartPlugin from '../deckgl/layers/Hex/HexChartPlugin';
+import KeplerChartPlugin from '../Kepler/KeplerChartPlugin';
 import MultiChartPlugin from '../deckgl/Multi/MultiChartPlugin';
 import PathChartPlugin from '../deckgl/layers/Path/PathChartPlugin';
 import PolygonChartPlugin from '../deckgl/layers/Polygon/PolygonChartPlugin';
@@ -36,6 +37,7 @@ export default class DeckGLChartPreset extends Preset {
         new GeoJsonChartPlugin().configure({ key: 'deck_geojson' }),
         new GridChartPlugin().configure({ key: 'deck_grid' }),
         new HexChartPlugin().configure({ key: 'deck_hex' }),
+        new KeplerChartPlugin().configure({ key: 'kepler' }),
         new MultiChartPlugin().configure({ key: 'deck_multi' }),
         new PathChartPlugin().configure({ key: 'deck_path' }),
         new PolygonChartPlugin().configure({ key: 'deck_polygon' }),

superset/viz.py

@@ -2651,6 +2651,32 @@ def get_data(self, df):
         return df.to_dict(orient='records')
 
 
+class KeplerViz(BaseViz):
+
+    """A visualization to explore patterns in event sequences"""
+
+    viz_type = 'kepler'
+    verbose_name = _('Kepler')
+    is_timeseries = False
+
+    def query_obj(self):
+        d = super(KeplerViz, self).query_obj()
+        fd = self.form_data
+
+        d['columns'] = fd.get('all_columns')
+        d['groupby'] = []
+        order_by_cols = fd.get('order_by_cols') or []
+        d['orderby'] = [json.loads(t) for t in order_by_cols]
+        return d
+
+    def get_data(self, df):
+        features = df.to_dict(orient='records')
+        return {
+            'mapboxApiAccessToken': config.get('MAPBOX_API_KEY'),
+            'features': features,
+        }
+
+
 class PairedTTestViz(BaseViz):
 
     """A table displaying paired t-test values"""