[Bug] Exported html file from KeplerGL v0.2.0 not rendering in Plotly Dash app

[anasm-17]

Describe the bug After exporting a plot to html with KeplerGLv0.2.0, I am unable to read the file to a Plotly Dash Iframe. However, when I use an older version (v0.1.2) I am able to embed the plot's html file into my Dash App with Plotly Dash Iframe.

To Reproduce Run the code using KeplerGL v0.2.0 and KeplerGL v0.1.2, you may create a file called app.py in a new directory:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import keplergl
import geopandas as gpd
import urllib.request

url = "https://docs.mapbox.com/help/data/stations.geojson"
download_file = urllib.request.urlretrieve(url, "stations.geojson")

def make_kepler_plot():
    map_data = gpd.read_file("stations.geojson")
    map_1 = keplergl.KeplerGl()
    map_1.add_data(data=map_data)
    map_1.save_to_html(file_name="map_test.html")

# make plot
make_kepler_plot()

app = dash.Dash(__name__)
server = app.server

kep_viz = html.Iframe(srcDoc = open('map_test.html').read(), height='800', width='800')
app.layout = html.Div([kep_viz])

if __name__ == '__main__':
    app.run_server(debug=True)

To launch, navigate to the directory in terminal and type python app.py, then go to the link output on the terminal.

Expected behavior I expect the map to be rendered in this basic dash app, however, it is not possible with v0.2.0 of KeplerGL but it works with v0.1.2.

Screenshots Dash app ingerated with KeplerGL v0.1.2 map:

Desktop (please complete the following information):

• OS: Windows 10 Education
• Browser: Chrome
• Version: 83.0

[firasm]

I can also reproduce the bug above on macOS 10.15.5 on Safari, Chrome, and Firefox so this seems to be OS and browser independent.

In case it helps, here are the javascript errors that show up on keplergl==0.2.0

The same dashboard when running keplergl==0.1.2doesn't show any errors:

Error messages

[Error] TypeError: undefined is not an object (evaluating 'pe.origin')
	fullyQualify (keplergl.min.js:97:4931)
	parts (keplergl.min.js:97:5359)
	(anonymous function) (keplergl.min.js:97:5973)
	(anonymous function) (keplergl.min.js:140:89891)
	n (keplergl.min.js:1:665)
	(anonymous function) (keplergl.min.js:57:168093)
	n (keplergl.min.js:1:665)
	(anonymous function) (keplergl.min.js:40:94383)
	n (keplergl.min.js:1:665)
	(anonymous function) (keplergl.min.js:70:165748)
	n (keplergl.min.js:1:665)
	(anonymous function) (keplergl.min.js:70:117486)
	n (keplergl.min.js:1:665)
	(anonymous function) (keplergl.min.js:62:25900)
	n (keplergl.min.js:1:665)
	(anonymous function) (keplergl.min.js:1:1461)
	(anonymous function) (keplergl.min.js:1:1471)
	(anonymous function) (keplergl.min.js:1:468)
	Global Code (keplergl.min.js:1:519)
[Error] TypeError: undefined is not an object (evaluating 'o.keplerGlReducer')
	(anonymous function) (about:srcdoc:32:3547)
	n (about:srcdoc:32:1369)
	(anonymous function) (about:srcdoc:32:2165)
	(anonymous function) (about:srcdoc:32:2174)
	(anonymous function) (about:srcdoc:32:986)
	Global Code (about:srcdoc:32:1203)

and the second error:

[Error] TypeError: undefined is not an object (evaluating 'o.keplerGlReducer')
	(anonymous function) (about:srcdoc:32:3547)
	n (about:srcdoc:32:1369)
	(anonymous function) (about:srcdoc:32:2165)
	(anonymous function) (about:srcdoc:32:2174)
	(anonymous function) (about:srcdoc:32:986)
	Global Code (about:srcdoc:32:1203)

[jonherke]

Any progress on this bug? Running into the same issue.

[jonherke]

bump.

[chrisgervang]

Has anyone tried making a Dash component for kepler.gl? It should be possible by following this Dash guide, and I imagine it would be more reliable than an iframe.