[Bug][Jupyter Widget] When rendering in Databricks: Class constructor o cannot be invoked without 'new'

[fwetdb]

Describe the bug When trying to run the following code in a Databricks notebook

from keplergl import KeplerGl

import pandas as pd
df = pd.DataFrame({
  "hex_id": ["8c2a100d26655ff"]
})

mp = KeplerGl()
mp.add_data(data=df, name="render_ipywidget")
mp

There is the following error:

deck: error during initialization of EnhancedColumnLayer({id: 'rokkbq1-hexagon-cell'}) TypeError: Class constructor o cannot be invoked without 'new'
TypeError: Class constructor o cannot be invoked without 'new'
at new t (cdn.jsdelivr.net/npm/keplergl-jupyter@%5E0.3.2/dist/index.js:42:346465)

Expected behavior There should be no error and the widget should work like in plain Jupyter.

Screenshots

Environment (please complete the following information):

• Python version: Python3
• keplergl Widget version 0.3.2

Additional context To me this seems to be an issue with ES6. When I looked at the pretty printed JS, the error was close to a ´column-geometry´ object. When I looked at the deck.gl code (which is a dependency of kepler.gl) it seems that they call luma.gl/core to create a uid and I am wondering if here the “new” word has to be used?

Summing up, I think this issue can be solved if the JS bundle target is explicitly set to ES6 in the babel config for the kepler.gl jupyter widget.

What do you think?

[jasongrout]

I also tried keplergl in current JupyterLab with the latest ipywidgets 7, and I also see this error in Firefox. I looked into it as well, and I agree that likely the fix here is that the babel config should target es6 classes (i.e., not try to transpile es6 classes to es5). Would that be possible to change? Would you accept a PR doing it?

(disclaimer: I also work at Databricks, and I also work on ipywidgets)

[mjohns-databricks]

@heshan0131 I am the Geospatial SME Leader at Databricks. Kepler.gl has become very important to our customers for in-notebook rendering and map-based analysis. So much so that we have introduced a kepler magic within Databricks Labs project Mosaic, see docs. Right now, mostly due to this class constructor issue with ipywidgets we have to use the _repr_html() call for static rendering which means that users lose the full power of kepler since they cannot get a hook back on the actual KeplerGl instance once rendered, e.g. to export config. Would you please give this a look? Or if you have, what is your assessment for making the proposed change?

[mjohns-databricks]

This issues seems to be related to #1644 (open, submitted OCT 2021) -- may have to do with requiring mapbox token.

Also, I see from https://github.com/keplergl/kepler.gl/issues/1033#issuecomment-604649622 via @heshan0131:

I think the warning comes from kepler's default mapStyles (dark, light, muted...). They are still mapbox styles that requires a mapbox token to load. And kepler will try to load them when initialized.

Looking into the app.js code for the ipywidget, see const MAPBOX_TOKEN = process.env.MapboxAccessTokenJupyter; // eslint-disable-line.

I will work on a way to get this set within Databricks and circle back.