@deck.gl/jupyter-widget 8.9.0-alpha.5 → 8.9.0-beta.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/jupyter-widget",
   "description": "Jupyter widget for rendering deck.gl in a Jupyter notebook",
   "license": "MIT",
-  "version": "8.9.0-alpha.5",
+  "version": "8.9.0-beta.2",
   "keywords": [
     "jupyter",
     "jupyterlab",
@@ -23,24 +23,24 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "watch": "webpack --watch",
-    "build": "webpack -p",
+    "watch": "npm run build -- --watch",
+    "build": "ocular-bundle ./src/index.js --output=./dist/index.js --globalName= --sourcemap --format=umd --externals=@jupyter-widgets/base",
     "build:labextension": "npm pack",
-    "prepublishOnly": "webpack -p"
+    "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@deck.gl/aggregation-layers": "8.9.0-alpha.5",
-    "@deck.gl/geo-layers": "8.9.0-alpha.5",
-    "@deck.gl/google-maps": "8.9.0-alpha.5",
-    "@deck.gl/json": "8.9.0-alpha.5",
-    "@deck.gl/layers": "8.9.0-alpha.5",
-    "@deck.gl/mesh-layers": "8.9.0-alpha.5",
+    "@deck.gl/aggregation-layers": "8.9.0-beta.2",
+    "@deck.gl/geo-layers": "8.9.0-beta.2",
+    "@deck.gl/google-maps": "8.9.0-beta.2",
+    "@deck.gl/json": "8.9.0-beta.2",
+    "@deck.gl/layers": "8.9.0-beta.2",
+    "@deck.gl/mesh-layers": "8.9.0-beta.2",
     "@jupyter-widgets/base": "^1.1.10 || ^2 || ^3 || ^4",
-    "@loaders.gl/3d-tiles": "^3.2.10",
-    "@loaders.gl/core": "^3.2.10",
-    "@loaders.gl/csv": "^3.2.10",
+    "@loaders.gl/3d-tiles": "^3.3.1",
+    "@loaders.gl/core": "^3.3.1",
+    "@loaders.gl/csv": "^3.3.1",
     "@luma.gl/constants": "^8.5.16",
-    "mapbox-gl": "^1.2.1"
+    "mapbox-gl": "^1.13.2"
   },
   "jupyterlab": {
     "extension": "src/plugin",
@@ -51,5 +51,5 @@
       }
     }
   },
-  "gitHead": "36330f8ca588055b11ed8032dc68ced641cb258b"
+  "gitHead": "5dae086e4f3eb46c30d8e761f9d600be4f68e949"
 }

package/src/deck-bundle.js

@@ -2,16 +2,10 @@
  * Pulls together all deck.gl dependencies used
  * in @deck.gl/jupyter-widget
  */
-const deck = require('../../core/bundle');
-
-Object.assign(
-  deck,
-  require('@deck.gl/layers'),
-  require('@deck.gl/aggregation-layers'),
-  require('@deck.gl/geo-layers'),
-  require('@deck.gl/mesh-layers'),
-  require('@deck.gl/google-maps'),
-  require('@deck.gl/json')
-);
-
-module.exports = deck;
+export * from '@deck.gl/core';
+export * from '@deck.gl/layers';
+export * from '@deck.gl/aggregation-layers';
+export * from '@deck.gl/geo-layers';
+export * from '@deck.gl/mesh-layers';
+export * from '@deck.gl/google-maps';
+export * from '@deck.gl/json';

package/src/index.js

@@ -3,42 +3,50 @@
 // See https://github.com/jupyter-widgets/widget-ts-cookiecutter/blob/master/%7B%7Bcookiecutter.github_project_name%7D%7D/src/extension.ts
 // Entry point for the Jupyter Notebook bundle containing custom Backbone model and view definitions.
 
+import {MODULE_VERSION, MODULE_NAME} from './version';
+// TODO - this should be placed in a separate module `@deck.gl/playground`
+import {createDeck, updateDeck} from './playground/create-deck';
+import {initPlayground} from './playground';
+import jupyterTransport from './lib/jupyter-transport';
+import JupyterTransportModel from './lib/jupyter-transport-model';
+import JupyterTransportView from './lib/jupyter-transport-view';
+
+import * as deckExports from './deck-bundle';
+import * as lumaExports from '@deck.gl/core/scripting/lumagl';
+import * as loadersExports from '@deck.gl/core/scripting/loadersgl';
+
 // Some static assets may be required by the custom widget javascript. The base
 // url for the notebook is not known at build time and is therefore computed dynamically.
 const dataBaseUrl = document.body && document.body.getAttribute('data-base-url');
 if (dataBaseUrl) {
+  // @ts-expect-error undefined global property
   window.__webpack_public_path__ = `${dataBaseUrl}nbextensions/pydeck/nb_extension`;
 }
 
 // Initialize the transport
-const {jupyterTransport} = require('./lib/jupyter-transport').default;
-
-let JupyterTransportModel = null;
-let JupyterTransportView = null;
-try {
-  JupyterTransportModel = require('./lib/jupyter-transport-model').default;
-  JupyterTransportView = require('./lib/jupyter-transport-view').default;
-} catch (err) {
-  // Note: Happens in the to_html() case
-}
-
-const {MODULE_VERSION, MODULE_NAME} = require('./version');
 
-// TODO - this should be placed in a separate module `@deck.gl/playground`
-const {createDeck, updateDeck} = require('./playground/create-deck');
-const {initPlayground} = require('./playground');
 initPlayground();
 
-module.exports = {
+// Expose deck
+globalThis.deck = globalThis.deck || {};
+Object.assign(globalThis.deck, deckExports);
+
+// Expose luma
+globalThis.luma = globalThis.luma || {};
+Object.assign(globalThis.luma, lumaExports);
+
+// Expose loaders
+globalThis.loaders = globalThis.loaders || {};
+Object.assign(globalThis.loaders, loadersExports);
+
+export {
   // Transports
   jupyterTransport,
-
   // Jupyter Hooks
   MODULE_VERSION,
   MODULE_NAME,
   JupyterTransportModel,
   JupyterTransportView,
-
   // For to_html()...
   initPlayground,
   // TODO - use playground?

package/src/lib/jupyter-transport-model.js

@@ -1,56 +1,65 @@
-import {DOMWidgetModel} from '@jupyter-widgets/base';
+import * as widgets from '@jupyter-widgets/base';
 import {MODULE_NAME, MODULE_VERSION} from '../version';
 import {deserializeMatrix} from './utils/deserialize-matrix';
-/**
- *
- * Note: Variables shared explictly between Python and JavaScript use snake_case
- */
-export default class JupyterTransportModel extends DOMWidgetModel {
-  defaults() {
-    return {
-      ...super.defaults(),
-      _model_name: JupyterTransportModel.model_name,
-      _model_module: JupyterTransportModel.model_module,
-      _model_module_version: JupyterTransportModel.model_module_version,
-      _view_name: JupyterTransportModel.view_name,
-      _view_module: JupyterTransportModel.view_module,
-      _view_module_version: JupyterTransportModel.view_module_version,
-      custom_libraries: [],
-      json_input: null,
-      mapbox_key: null,
-      selected_data: [],
-      data_buffer: null,
-      tooltip: null,
-      width: '100%',
-      height: 500,
-      js_warning: false
-    };
-  }
 
-  static get serializers() {
-    return {
-      ...DOMWidgetModel.serializers,
-      // Add any extra serializers here
-      data_buffer: {deserialize: deserializeMatrix}
-    };
-  }
+let JupyterTransportModel = null;
+const DOMWidgetModel = widgets && widgets.DOMWidgetModel;
 
-  static get model_name() {
-    return 'JupyterTransportModel';
-  }
-  static get model_module() {
-    return MODULE_NAME;
-  }
-  static get model_module_version() {
-    return MODULE_VERSION;
-  }
-  static get view_name() {
-    return 'JupyterTransportView';
-  }
-  static get view_module() {
-    return MODULE_NAME;
-  }
-  static get view_module_version() {
-    return MODULE_VERSION;
+if (DOMWidgetModel) {
+  /**
+   *
+   * Note: Variables shared explictly between Python and JavaScript use snake_case
+   */
+  class Model extends DOMWidgetModel {
+    defaults() {
+      return {
+        ...super.defaults(),
+        _model_name: JupyterTransportModel.model_name,
+        _model_module: JupyterTransportModel.model_module,
+        _model_module_version: JupyterTransportModel.model_module_version,
+        _view_name: JupyterTransportModel.view_name,
+        _view_module: JupyterTransportModel.view_module,
+        _view_module_version: JupyterTransportModel.view_module_version,
+        custom_libraries: [],
+        json_input: null,
+        mapbox_key: null,
+        selected_data: [],
+        data_buffer: null,
+        tooltip: null,
+        width: '100%',
+        height: 500,
+        js_warning: false
+      };
+    }
+
+    static get serializers() {
+      return {
+        ...DOMWidgetModel.serializers,
+        // Add any extra serializers here
+        data_buffer: {deserialize: deserializeMatrix}
+      };
+    }
+
+    static get model_name() {
+      return 'JupyterTransportModel';
+    }
+    static get model_module() {
+      return MODULE_NAME;
+    }
+    static get model_module_version() {
+      return MODULE_VERSION;
+    }
+    static get view_name() {
+      return 'JupyterTransportView';
+    }
+    static get view_module() {
+      return MODULE_NAME;
+    }
+    static get view_module_version() {
+      return MODULE_VERSION;
+    }
   }
+  JupyterTransportModel = Model;
 }
+
+export default JupyterTransportModel;

package/src/lib/jupyter-transport-view.js

@@ -1,56 +1,64 @@
-import {DOMWidgetView} from '@jupyter-widgets/base';
+import * as widgets from '@jupyter-widgets/base';
 import JupyterTransport from './jupyter-transport';
 
-export default class JupyterTransportView extends DOMWidgetView {
-  initialize() {
-    this.listenTo(this.model, 'destroy', this.remove);
+let JupyterTransportView = null;
+const DOMWidgetView = widgets && widgets.DOMWidgetView;
 
-    // TODO - is there any variable information on the model we can use to
-    // give an interesting name or id to this instance?
-    this.transport = new JupyterTransport();
+if (DOMWidgetView) {
+  class View extends DOMWidgetView {
+    initialize() {
+      this.listenTo(this.model, 'destroy', this.remove);
 
-    // Expose Jupyter internals to enable work-arounds
-    this.transport.jupyterModel = this.model;
-    this.transport.jupyterView = this;
-    this.transport._initialize();
-    super.initialize.apply(this, arguments);
-  }
+      // TODO - is there any variable information on the model we can use to
+      // give an interesting name or id to this instance?
+      this.transport = new JupyterTransport();
 
-  remove() {
-    if (this.transport) {
-      this.transport._finalize();
-      this.transport.jupyterModel = null;
-      this.transport.jupyterView = null;
-      this.transport = null;
+      // Expose Jupyter internals to enable work-arounds
+      this.transport.jupyterModel = this.model;
+      this.transport.jupyterView = this;
+      this.transport._initialize();
+      super.initialize.apply(this, arguments);
     }
-  }
 
-  render() {
-    super.render();
+    remove() {
+      if (this.transport) {
+        this.transport._finalize();
+        this.transport.jupyterModel = null;
+        this.transport.jupyterView = null;
+        this.transport = null;
+      }
+    }
 
-    this.model.on('change:json_input', this.onJsonChanged.bind(this));
-    this.model.on('change:data_buffer', this.onDataBufferChanged.bind(this));
+    render() {
+      super.render();
 
-    this.onDataBufferChanged();
-  }
+      this.model.on('change:json_input', this.onJsonChanged.bind(this));
+      this.model.on('change:data_buffer', this.onDataBufferChanged.bind(this));
 
-  onJsonChanged() {
-    const json = JSON.parse(this.model.get('json_input'));
-    this.transport._messageReceived({type: 'json', json});
-  }
+      this.onDataBufferChanged();
+    }
 
-  onDataBufferChanged() {
-    const json = this.model.get('json_input');
-    const dataBuffer = this.model.get('data_buffer');
-
-    if (json && dataBuffer) {
-      this.transport._messageReceived({
-        type: 'json-with-binary',
-        json,
-        binary: dataBuffer
-      });
-    } else {
+    onJsonChanged() {
+      const json = JSON.parse(this.model.get('json_input'));
       this.transport._messageReceived({type: 'json', json});
     }
+
+    onDataBufferChanged() {
+      const json = this.model.get('json_input');
+      const dataBuffer = this.model.get('data_buffer');
+
+      if (json && dataBuffer) {
+        this.transport._messageReceived({
+          type: 'json-with-binary',
+          json,
+          binary: dataBuffer
+        });
+      } else {
+        this.transport._messageReceived({type: 'json', json});
+      }
+    }
   }
+  JupyterTransportView = View;
 }
+
+export default JupyterTransportView;

package/src/playground/create-deck.js

@@ -13,10 +13,14 @@ import {createGoogleMapsDeckOverlay} from './utils/google-maps-utils';
 
 import {addSupportComponents} from '../lib/components/index';
 
-import * as deck from '../deck-bundle';
+/* eslint-disable import/namespace */
+import * as deckExports from '../deck-bundle';
+import {COORDINATE_SYSTEM, log, WebMercatorViewport} from '@deck.gl/core';
+import {JSONConverter} from '@deck.gl/json';
+import DeckGL from '@deck.gl/core/scripting/deckgl';
 
 const classesFilter = x => x.charAt(0) === x.charAt(0).toUpperCase();
-const functionsFilter = x => x.charAt(0) === x.charAt(0).toLowerCase() && x.charAt(0) != '_';
+const functionsFilter = x => x.charAt(0) === x.charAt(0).toLowerCase() && x.charAt(0) !== '_';
 
 function extractElements(library = {}, filter) {
   // Extracts exported elements as a dictionary from a library
@@ -30,17 +34,17 @@ function extractElements(library = {}, filter) {
 
 // Handle JSONConverter and loaders configuration
 const jsonConverterConfiguration = {
-  classes: extractElements(deck, classesFilter),
+  classes: extractElements(deckExports, classesFilter),
   // Will be resolved as `<enum-name>.<enum-value>`
   enumerations: {
-    COORDINATE_SYSTEM: deck.COORDINATE_SYSTEM,
+    COORDINATE_SYSTEM,
     GL: GLConstants
   }
 };
 
 registerLoaders([CSVLoader]);
 
-const jsonConverter = new deck.JSONConverter({
+const jsonConverter = new JSONConverter({
   configuration: jsonConverterConfiguration
 });
 
@@ -122,7 +126,7 @@ function createStandaloneFromProvider({
         onHover: info => handleEvent('deck-hover-event', info),
         onResize: size => handleEvent('deck-resize-event', size),
         onViewStateChange: ({viewState, interactionState, oldViewState}) => {
-          const viewport = new deck.WebMercatorViewport(viewState);
+          const viewport = new WebMercatorViewport(viewState);
           viewState.nw = viewport.unproject([0, 0]);
           viewState.se = viewport.unproject([viewport.width, viewport.height]);
           handleEvent('deck-view-state-change-event', viewState);
@@ -141,8 +145,8 @@ function createStandaloneFromProvider({
 
   switch (mapProvider) {
     case 'mapbox':
-      deck.log.info('Using Mapbox base maps')();
-      return new deck.DeckGL({
+      log.info('Using Mapbox base maps')();
+      return new DeckGL({
         ...sharedProps,
         ...props,
         map: mapboxgl,
@@ -150,22 +154,22 @@ function createStandaloneFromProvider({
         onLoad: modifyMapboxElements
       });
     case 'carto':
-      deck.log.info('Using Carto base maps')();
-      return new deck.DeckGL({
+      log.info('Using Carto base maps')();
+      return new DeckGL({
         map: mapboxgl,
         ...sharedProps,
         ...props
       });
     case 'google_maps':
-      deck.log.info('Using Google Maps base maps')();
+      log.info('Using Google Maps base maps')();
       return createGoogleMapsDeckOverlay({
         ...sharedProps,
         ...props,
         googleMapsKey
       });
     default:
-      deck.log.info('No recognized map provider specified')();
-      return new deck.DeckGL({
+      log.info('No recognized map provider specified')();
+      return new DeckGL({
         ...sharedProps,
         ...props,
         map: null,

package/src/playground/playground.js

@@ -1,4 +1,4 @@
-import * as deckBundle from '../deck-bundle';
+import {Layer} from '@deck.gl/core';
 
 import {Transport} from '@deck.gl/json';
 
@@ -83,7 +83,8 @@ export function processDataBuffer({binary, convertedJson}) {
 
 // Filters circular references on JSON string conversion
 function filterJsonValue(key, value) {
-  return value instanceof deckBundle.Layer ? value.id : value;
+  // eslint-disable-next-line
+  return value instanceof Layer ? value.id : value;
 }
 
 // Handles a general event

package/src/playground/utils/google-maps-utils.js

@@ -1,5 +1,7 @@
 /* global window */
-import * as deck from '../../deck-bundle';
+/* eslint-disable import/namespace */
+import {log} from '@deck.gl/core';
+import {GoogleMapsOverlay} from '@deck.gl/google-maps';
 
 export function createGoogleMapsDeckOverlay({
   container,
@@ -12,10 +14,10 @@ export function createGoogleMapsDeckOverlay({
   initialViewState = {latitude: 0, longitude: 0, zoom: 1}
 }) {
   if (!googleMapsKey) {
-    deck.log.warn('No Google Maps API key set')();
+    log.warn('No Google Maps API key set')();
     return null;
   }
-  const deckOverlay = new deck.GoogleMapsOverlay({layers});
+  const deckOverlay = new GoogleMapsOverlay({layers});
   const view = {
     center: {lat: initialViewState.latitude, lng: initialViewState.longitude},
     mapTypeId: mapStyle,

package/src/playground/utils/mapbox-utils.js

@@ -1,16 +1,9 @@
-/* global process, document */
+/* global document */
 import {loadCSS} from './css-utils';
 
-// SSR safe import (ensures this file can be imported under Node.js e.g. for tests)
-// From https://github.com/mapbox/mapbox-gl-js/issues/4593#issuecomment-546290823
-// eslint-disable-next-line no-undef
-let mapboxgl;
+import mapboxgl from 'mapbox-gl';
 
-if (process.browser) {
-  mapboxgl = require('mapbox-gl');
-}
-
-const MAPBOX_CSS_URL = 'https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css';
+const MAPBOX_CSS_URL = 'https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.2/mapbox-gl.css';
 
 export default mapboxgl;