Use named arguments in initDeck function

visgl · Sep 18, 2019 · 5c49c2f · 5c49c2f
1 parent 2012666
commit 5c49c2f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 23 deletions.
diff --git a/bindings/python/pydeck/pydeck/io/templates/js.j2 b/bindings/python/pydeck/pydeck/io/templates/js.j2
@@ -16,8 +16,7 @@ requirejs(['@deck.gl/jupyter-widget'], (root) => {
   const deck = root.initDeck({
     mapboxApiKey: MAPBOX_API_KEY, 
     container: document.getElementById('deck-container'),
-    width: '100%',
-    height: '100%',
-    jsonInput
-  }, useTooltip);
+    jsonInput,
+    useTooltip
+  });
 })
diff --git a/modules/jupyter-widget/src/utils.js b/modules/jupyter-widget/src/utils.js
@@ -24,12 +24,14 @@ export function updateDeck(inputJSON, {jsonConverter, deckgl}) {
   deckgl.setProps(results);
 }
 
-export function initDeck(
-  {mapboxApiKey, container, jsonInput},
+export function initDeck({
+  mapboxApiKey,
+  container,
+  jsonInput,
   useTooltip,
   onComplete,
   handleClick
-) {
+}) {
   require(['mapbox-gl', 'h3', 'S2'], mapboxgl => {
     require(['deck.gl', 'loaders.gl/csv'], (deck, loaders) => {
       try {

diff --git a/modules/jupyter-widget/src/widget.js b/modules/jupyter-widget/src/widget.js
@@ -68,27 +68,31 @@ export class DeckGLView extends DOMWidgetView {
     super.render();
     this.model.on('change:json_input', this.valueChanged.bind(this), this);
 
-    const containerDiv = document.createElement('div');
+    const container = document.createElement('div');
 
     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);
+      const height = this.model.get('height');
+      const width = this.model.get('width');
+      const mapboxApiKey = this.model.get('mapbox_key');
+      const jsonInput = JSON.parse(this.model.get('json_input'));
+      const useTooltip = this.model.get('tooltip');
+
+      container.style.height = `${height}px`;
+      container.style.width = `${width}px`;
+      container.style.position = 'relative';
+      this.el.appendChild(container);
 
       loadCss(MAPBOX_CSS_URL);
-      initDeck(
-        {
-          mapboxApiKey: this.model.get('mapbox_key'),
-          container: containerDiv,
-          jsonInput: JSON.parse(this.model.get('json_input'))
-        },
-        this.model.get('tooltip'),
-        x => {
-          this.jsonDeck = x;
+      initDeck({
+        mapboxApiKey,
+        container,
+        jsonInput,
+        useTooltip,
+        onComplete: ({jsonConverter, deckgl}) => {
+          this.jsonDeck = {jsonConverter, deckgl};
         },
-        this.handleClick.bind(this)
-      );
+        handleClick: this.handleClick.bind(this)
+      });
     }
   }