Update widget to use a callback to set deckJson

visgl · Aug 30, 2019 · b99f134 · b99f134
1 parent 48aa551
commit b99f134
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 53 deletions.
diff --git a/bindings/python/pydeck/pydeck/widget/widget.py b/bindings/python/pydeck/pydeck/widget/widget.py
@@ -4,7 +4,7 @@
 from __future__ import unicode_literals
 
 import ipywidgets as widgets
-from traitlets import Int, List, Unicode
+from traitlets import Int, Any, Unicode
 
 from ._frontend import module_name, module_version
 
@@ -38,4 +38,4 @@ class DeckGLWidget(widgets.DOMWidget):
     json_input = Unicode('').tag(sync=True)
     height = Int(500).tag(sync=True)
     width = Int(500).tag(sync=True)
-    selected_data = List().tag(sync=True)
+    selected_data = Any().tag(sync=True)
diff --git a/modules/jupyter-widget/src/index.js b/modules/jupyter-widget/src/index.js
@@ -17,4 +17,5 @@ if (dataBaseUrl) {
 }
 
 export {MODULE_VERSION, MODULE_NAME} from './version';
-export {DeckGLModel, DeckGLView, initDeck} from './widget';
+export {DeckGLModel, DeckGLView} from './widget';
+export {initDeck} from './utils';
diff --git a/modules/jupyter-widget/src/utils.js b/modules/jupyter-widget/src/utils.js
@@ -1,5 +1,5 @@
 /* global document */
-function loadCss(url) {
+export function loadCss(url) {
   const link = document.createElement('link');
   link.type = 'text/css';
   link.rel = 'stylesheet';
@@ -10,11 +10,53 @@ function loadCss(url) {
 /**
  * Hides a warning in the mapbox-gl.js library from surfacing in the notebook as text.
  */
-function hideMapboxCSSWarning() {
+export function hideMapboxCSSWarning() {
   const missingCssWarning = document.getElementsByClassName('mapboxgl-missing-css')[0];
   if (missingCssWarning) {
     missingCssWarning.style.display = 'none';
   }
 }
 
-export {loadCss, hideMapboxCSSWarning};
+export function updateDeck(inputJSON, {jsonConverter, deckConfig}) {
+  const results = jsonConverter.convertJsonToDeckProps(inputJSON);
+  deckConfig.setProps(results);
+}
+
+export function initDeck({mapboxApiKey, container, jsonInput}, onComplete, handleClick) {
+  require(['mapbox-gl', 'h3', 'S2'], mapboxgl => {
+    require(['deck.gl'], deckgl => {
+      try {
+        const layersDict = {};
+        const layers = Object.keys(deckgl).filter(
+          x => x.indexOf('Layer') > 0 && x.indexOf('_') !== 0
+        );
+        layers.map(k => (layersDict[k] = deckgl[k]));
+
+        const jsonConverter = new deckgl._JSONConverter({
+          configuration: {
+            layers: layersDict
+          }
+        });
+
+        const deckConfig = new deckgl.DeckGL({
+          map: mapboxgl,
+          mapboxApiAccessToken: mapboxApiKey,
+          latitude: 0,
+          longitude: 0,
+          zoom: 1,
+          onClick: handleClick,
+          container,
+          onLoad: () => updateDeck(jsonInput, {jsonConverter, deckConfig})
+        });
+        if (onComplete) {
+          onComplete({jsonConverter, deckConfig});
+        }
+      } catch (err) {
+        // This will fail in node tests
+        // eslint-disable-next-line
+        console.error(err);
+      }
+      return {};
+    });
+  });
+}
diff --git a/modules/jupyter-widget/src/widget.js b/modules/jupyter-widget/src/widget.js
@@ -3,7 +3,7 @@ import {DOMWidgetModel, DOMWidgetView} from '@jupyter-widgets/base';
 
 import {MODULE_NAME, MODULE_VERSION} from './version';
 
-import {loadCss, hideMapboxCSSWarning} from './utils';
+import {loadCss, hideMapboxCSSWarning, initDeck, updateDeck} from './utils';
 
 const MAPBOX_CSS_URL = 'https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css';
 
@@ -72,7 +72,9 @@ export class DeckGLView extends DOMWidgetView {
           container: containerDiv,
           jsonInput: JSON.parse(this.model.get('json_input'))
         },
-        this,
+        x => {
+          this.jsonDeck = x;
+        },
         this.handleClick.bind(this)
       );
       this.model.set('initialized', true);
@@ -86,51 +88,14 @@ export class DeckGLView extends DOMWidgetView {
   }
 
   handleClick(e) {
-    console.table(e); // eslint-disable-line
-    this.model.set('selected_data', e.object.points);
+    if (!e) {
+      return;
+    }
+    if (e.object && e.object.points) {
+      this.model.set('selected_data', e.object.points);
+    } else {
+      this.model.set('selected_data', e.object);
+    }
     this.model.save_changes();
   }
 }
-
-function updateDeck(inputJSON, {jsonConverter, deckConfig}) {
-  const results = jsonConverter.convertJsonToDeckProps(inputJSON);
-  deckConfig.setProps(results);
-}
-
-export function initDeck({mapboxApiKey, container, jsonInput}, context, handleClick) {
-  require(['mapbox-gl', 'h3', 'S2'], mapboxgl => {
-    require(['deck.gl'], deckgl => {
-      try {
-        const layersDict = {};
-        const layers = Object.keys(deckgl).filter(
-          x => x.indexOf('Layer') > 0 && x.indexOf('_') !== 0
-        );
-        layers.map(k => (layersDict[k] = deckgl[k]));
-
-        const jsonConverter = new deckgl._JSONConverter({
-          configuration: {
-            layers: layersDict
-          }
-        });
-
-        const deckConfig = new deckgl.DeckGL({
-          map: mapboxgl,
-          mapboxApiAccessToken: mapboxApiKey,
-          latitude: 0,
-          longitude: 0,
-          zoom: 1,
-          onClick: handleClick,
-          container,
-          onLoad: () => updateDeck(jsonInput, {jsonConverter, deckConfig})
-        });
-        context.jsonDeck = {jsonConverter, deckConfig};
-        return {jsonConverter, deckConfig};
-      } catch (err) {
-        // This will fail in node tests
-        // eslint-disable-next-line
-        console.error(err);
-      }
-      return {};
-    });
-  });
-}