diff --git a/bindings/python/pydeck/requirejs_dependencies.json b/bindings/python/pydeck/requirejs_dependencies.json index 9c2c66f4253..f81af009920 100644 --- 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 index d30122921bb..085a7287295 100644 --- 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 index bf94d7242f4..62c85b77d05 100644 --- 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 index 3987b8d6df6..817b480784b 100644 --- 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()