Using lonboard in a Kaggle Notebook

[isaiahlg]

Question

Hi! I'm trying to get lonboard working in a Kaggle notebook, but I'm getting a Javascript error (details below). Has anyone gotten lonboard to work in Kaggle?

Goal

Visualize a simple geodataframe with about 100k points in a Kaggle Notebook.

My code

import pandas as pd
import geopandas as gpd
from lonboard import viz

df = pd.read_csv("dhs_final_labels_centered.csv")
gdf = gpd.GeoDataFrame(df, geometry=gpd.points_from_xy(df["Lon"], df["Lat"]), crs="EPSG:4326")
viz(df_gdf)

The error

[Open Browser Console for more detailed log - Double click to close this message]
Failed to load model class 'AnyModel' from module 'anywidget'
Error: No version of module anywidget is registered
    at f.loadClass (https://kkb-production.jupyter-proxy.kaggle.net/static/dist/jupyterlab/v-45a2b7357cb926cda99c4f837edd0b05/lab/extensions/@jupyter-widgets/jupyterlab-manager/static/446.fdf8b1b233cb8c1783f6.js?v=fdf8b1b233cb8c1783f6:1:74920)
    at f.loadModelClass (https://kkb-production.jupyter-proxy.kaggle.net/static/dist/jupyterlab/v-45a2b7357cb926cda99c4f837edd0b05/lab/extensions/@jupyter-widgets/jupyterlab-manager/static/327.68dbf8491690b3aff1e7.js?v=68dbf8491690b3aff1e7:1:10729)
    at f._make_model (https://kkb-production.jupyter-proxy.kaggle.net/static/dist/jupyterlab/v-45a2b7357cb926cda99c4f837edd0b05/lab/extensions/@jupyter-widgets/jupyterlab-manager/static/327.68dbf8491690b3aff1e7.js?v=68dbf8491690b3aff1e7:1:7517)
    at f.new_model (https://kkb-production.jupyter-proxy.kaggle.net/static/dist/jupyterlab/v-45a2b7357cb926cda99c4f837edd0b05/lab/extensions/@jupyter-widgets/jupyterlab-manager/static/327.68dbf8491690b3aff1e7.js?v=68dbf8491690b3aff1e7:1:5137)
    at f.handle_comm_open (https://kkb-production.jupyter-proxy.kaggle.net/static/dist/jupyterlab/v-45a2b7357cb926cda99c4f837edd0b05/lab/extensions/@jupyter-widgets/jupyterlab-manager/static/327.68dbf8491690b3aff1e7.js?v=68dbf8491690b3aff1e7:1:3894)
    at _handleCommOpen (https://kkb-production.jupyter-proxy.kaggle.net/static/dist/jupyterlab/v-45a2b7357cb926cda99c4f837edd0b05/lab/extensions/@jupyter-widgets/jupyterlab-manager/static/446.fdf8b1b233cb8c1783f6.js?v=fdf8b1b233cb8c1783f6:1:73457)
    at f._handleCommOpen (https://kkb-production.jupyter-proxy.kaggle.net/static/dist/jupyterlab/v-45a2b7357cb926cda99c4f837edd0b05/notebook/3676.bundle.js:1:30958)
    at async f._handleMessage (https://kkb-production.jupyter-proxy.kaggle.net/static/dist/jupyterlab/v-45a2b7357cb926cda99c4f837edd0b05/notebook/3676.bundle.js:1:32852)

Steps tried

1. Ensured that anywidget was installed through pip
2. Ensured that a simple interactive widget was able to run in Kaggle with import ipywidgets as widgets; widgets.IntSlider()
3. Ensured the extension was registerd with !jupyter nbextension enable --py anywidget --sys-prefix

Left to try

The html option suggested in the databricks discussion post.

[kylebarron]

You'd need to check if kaggle supports jupyter widgets. That makes it seem like anywidget's javascript is not enabled on the page. I don't seem to see any issues related to kaggle on the anywidget issue tracker: https://github.com/manzt/anywidget/issues?q=sort%3Aupdated-desc%20is%3Aissue%20is%3Aopen%20kaggle

to_html should work

[isaiahlg]

Thanks for the quick response, Kyle! It seems Kaggle does support jupyter widgets as the following code worked well:

import ipywidgets as widgets; widgets.IntSlider()

I tried to_html and it definitely rendered, but it also seemed to break the vertical scrolling behavior of the notebook in editing mode. Below is the code and a screenshot from the view-only version of the notebook.

from lonboard import ScatterplotLayer, Map
from IPython.core.display import display, HTML

df = pd.read_csv("dhs_final_labels_centered.csv")
gdf = gpd.GeoDataFrame(df, geometry=gpd.points_from_xy(df["Lon"], df["Lat"]), crs="EPSG:4326")
layer = ScatterplotLayer.from_geopandas(gdf[['geometry']])
mymap = Map(layers = [layer])
mymap.to_html('lonboard_test.html')

display(HTML('lonboard_test.html'))

The scrolling not working anymore seems to be related to this Kaggle discussion where HTML code in the Markdown cells was found to cause a horizontal scrolling issue.
https://www.kaggle.com/discussions/product-feedback/524053

Any other ideas for how to use lonboard within Kaggle without breaking scrolling, or is this just Kaggle's problem?

Cheers!
Isaiah

[kylebarron]

You might want to try installing anywidget and then reloading your browser tab. https://developmentseed.org/lonboard/latest/troubleshooting/#anywidget-not-available

It's unclear in general when there's an interaction like that for scrolling whether it's an issue from the extension or from the notebook provider, however given that that side effect doesn't appear for other notebook providers, I'm inclined to say that it's kaggle's issue.

In general, we use JupyterLab as the canonical source of truth for considering extension "correctness"

[isaiahlg]

Thanks for the suggestion. I tried installing anywidget with pip and then reloaded the browser tab but no luck, it still froze the scrolling. I'm going to settle for some non-interactive viz for now, I'll revisit this again down the road as I'm teaching GeoML in Kaggle and would love to be able to use lonboard down the road! Thanks for the support today.