How to render xarray_leaflet with voila? E.g. $ voila xarray_interact.ipynb

[wietzesuijker]

Hi,

Recently, I've been looking into xarray-leaflet. It's an exciting project, thanks for all the great work!
Would you know how to render the map directly through voila?

It works when navigating to voila through Jupyter (i.e. voila/render/notebook.ipynb) (Figure A). However, $ voila xarray_interact.ipynb does not render the data on the map for me (Figure B).

Figure: A) rendering voila through the Jupyter interface or B) with voila.

Notebook example to reproduce the issue xarray_interact.ipynb.zip

Thanks

[davidbrochart]

Hi Wietze, thanks for opening this issue.
The whole URL handling is not very clean right now. Basically the issue is that the kernel writes the tiles in the back-end and needs Leaflet to fetch them through the Jupyter server. If there were a unique way the classic Notebook, Jupyter Lab and Voila handled URL, that would be easy, but it's not the case. Right now we get the browser window URL from ipyleaflet's front-end and process it in the kernel, but we shouldn't do that, so I need to rewrite that part.
Anyways, there is a get_base_url parameter that you can use as a workaround, which is a function taking the window URL and returning the base URL to use. Maybe you can play with that as a temporary solution, but I'll try to come up with a proper fix.

[12rambau]

I tried several tools and ideas that I found on the web :

the one that stands out are the following :

from notebook import notebookapp
servers = list(notebookapp.list_running_servers())
print(servers)

[{u'base_url': u'/',
  u'hostname': u'localhost',
  u'notebook_dir': u'/Users/username/your/notebook/path',
  u'pid':123,
  u'port': 8888,
  u'secure': False,
  u'url': u'http://localhost:8888/'},
 ...
 {u'base_url': u'/',
  u'hostname': u'localhost',
  u'notebook_dir': u'/Users/username/your/other/notebook/path',
  u'pid': 1234,
  u'port': 8889,
  u'secure': True,
  u'url': u'http://localhost:8889/'}]

which give a proper base_url but I cannot get how to know which one is the currently used.

There is also ipyparams that is mainly a wrapper for all the javascripts hack i've seen on the web

import ipyparams
ipyparams.raw_url
# returns https://your.jupyter.server/awsome_notebook.ipynb?foo=bar&baz=1

import ipyparams
ipyparams.notebook_name  # returns 'awesome_notebook.ipynb'

[wietzesuijker]

@12rambau when voila renders, you can read the os.environ variables.

import os
env = os.environ
current_localhost = f"http://{env['SERVER_NAME']}:{env['SERVER_PORT']}"  # http://localhost:8866/

[davidbrochart]

See #45