Merge 2bd69cd into cc598f4

visgl · Sep 16, 2019 · ad3f1fb · ad3f1fb
2 parents cc598f4 + 2bd69cd
commit ad3f1fb
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 23 deletions.
diff --git a/bindings/python/pydeck/requirejs_dependencies.json b/bindings/python/pydeck/requirejs_dependencies.json
@@ -8,6 +8,7 @@
     "deck.gl": "https://unpkg.com/deck.gl/dist.min",
     "mapbox-gl": "https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl",
     "h3": "https://unpkg.com/h3-js@^3.4.3/dist/h3-js.umd",
-    "S2": "https://unpkg.com/s2-geometry@^1.2.10/src/s2geometry"
+    "S2": "https://unpkg.com/s2-geometry@^1.2.10/src/s2geometry",
+    "loaders.gl/csv": "https://unpkg.com/@loaders.gl/csv@1.2.2/dist/dist.min"
   }
 }
diff --git a/modules/jupyter-widget/src/utils.js b/modules/jupyter-widget/src/utils.js
@@ -17,40 +17,42 @@ export function hideMapboxCSSWarning() {
   }
 }
 
-export function updateDeck(inputJSON, {jsonConverter, deckConfig}) {
-  const results = jsonConverter.convertJsonToDeckProps(inputJSON);
-  deckConfig.setProps(results);
+export function updateDeck(inputJSON, {jsonConverter, deckgl}) {
+  const results = jsonConverter.convert(inputJSON);
+  deckgl.setProps(results);
 }
 
 export function initDeck({mapboxApiKey, container, jsonInput}, onComplete, handleClick) {
   require(['mapbox-gl', 'h3', 'S2'], mapboxgl => {
-    require(['deck.gl'], deckgl => {
+    require(['deck.gl', 'loaders.gl/csv'], (deck, loaders) => {
       try {
-        const layersDict = {};
-        const layers = Object.keys(deckgl).filter(
-          x => x.indexOf('Layer') > 0 && x.indexOf('_') !== 0
+        // Filter down to the deck.gl classes of interest
+        const classesDict = {};
+        const classes = Object.keys(deck).filter(
+          x => (x.indexOf('Layer') > 0 || x.indexOf('View') > 0) && x.indexOf('_') !== 0
         );
-        layers.map(k => (layersDict[k] = deckgl[k]));
+        classes.map(k => (classesDict[k] = deck[k]));
 
-        const jsonConverter = new deckgl.JSONConverter({
+        loaders.registerLoaders([loaders.CSVLoader]);
+
+        const jsonConverter = new deck.JSONConverter({
           configuration: {
-            layers: layersDict
+            classes: classesDict
           }
         });
 
-        const deckConfig = new deckgl.DeckGL({
+        const props = jsonConverter.convert(jsonInput);
+
+        const deckgl = new deck.DeckGL({
+          ...props,
           map: mapboxgl,
           mapboxApiAccessToken: mapboxApiKey,
-          latitude: 0,
-          longitude: 0,
-          zoom: 1,
           onClick: handleClick,
           getTooltip,
-          container,
-          onLoad: () => updateDeck(jsonInput, {jsonConverter, deckConfig})
+          container
         });
         if (onComplete) {
-          onComplete({jsonConverter, deckConfig});
+          onComplete({jsonConverter, deckgl});
         }
       } catch (err) {
         // This will fail in node tests

diff --git a/modules/jupyter-widget/src/widget.js b/modules/jupyter-widget/src/widget.js
@@ -21,7 +21,6 @@ export class DeckGLModel extends DOMWidgetModel {
       json_input: null,
       mapbox_key: null,
       selected_data: null,
-      initialized: false,
       width: 500,
       height: 500
     };
@@ -53,16 +52,27 @@ export class DeckGLModel extends DOMWidgetModel {
 }
 
 export class DeckGLView extends DOMWidgetView {
+  initialize() {
+    this.listenTo(this.model, 'destroy', this.remove);
+  }
+
+  remove() {
+    if (this.jsonDeck) {
+      this.jsonDeck.deckgl.finalize();
+      this.jsonDeck = null;
+    }
+  }
+
   render() {
     super.render();
     this.model.on('change:json_input', this.valueChanged.bind(this), this);
-    const initialized = this.model.get('initialized');
 
     const containerDiv = document.createElement('div');
 
-    if (!initialized) {
+    if (!this.jsonDeck) {
       containerDiv.style.height = `${this.model.get('height')}px`;
       containerDiv.style.width = `${this.model.get('width')}px`;
+      containerDiv.style.position = 'relative';
       this.el.appendChild(containerDiv);
 
       loadCss(MAPBOX_CSS_URL);
@@ -77,7 +87,6 @@ export class DeckGLView extends DOMWidgetView {
         },
         this.handleClick.bind(this)
       );
-      this.model.set('initialized', true);
     }
   }
 

diff --git a/modules/jupyter-widget/webpack.config.js b/modules/jupyter-widget/webpack.config.js
@@ -43,7 +43,7 @@ const config = {
     ]
   },
   // Packages that shouldn't be bundled but loaded at runtime
-  externals: ['@jupyter-widgets/base', 'deck.gl', 'mapbox-gl', 'h3', 'S2'],
+  externals: ['@jupyter-widgets/base', 'deck.gl', 'mapbox-gl', 'h3', 'S2', 'loaders.gl/csv'],
   plugins: [
     // Uncomment for bundle size debug
     // new (require('webpack-bundle-analyzer')).BundleAnalyzerPlugin()