Navigation icons missing when integrating matplotlib widgets into Thebelab

[tannavee]

I am trying to integrate the matplotlib widgets into Thebelab, but the icons are missing from the navigation bar (screenshot 1). I was wondering how I would go about resolving this. The nav bar should look like this (screenshot 2). I appreciate any input.

This is my environment.yml

name: python-environment 
channels:
  - conda-forge
dependencies:
  - python=3.6.*
  - ipywidgets
  - ipympl
  - pythreejs
  - ipyleaflet
  - resonance
  - opty
  - pandas
  - pydy
  - numexpr
  - matplotlib
  - nodejs
  - scipy
  - seaborn
  - scikit-learn
  - scikit-image
  - sympy
  - cython
  - numba
  - bokeh
  - numpy
  - astropy
  - bqplot
  - nb_conda_kernels
  - statsmodels
  - patsy
  - requests
  - cloudpickle
  - dill
  - dask
  - sqlalchemy*
  - hdf5
  - h5py
  - vincent
  - beautifulsoup4
  - protobuf
  - xlrd
  - numba
  - gnuplot
  - ghostscript
  - rpy2

This is my postBuild

#!/bin/bash

# A way for mybinder.org to realize it should install the jupyter lab extension
# automatically. This file does not affect anything except when mybinder.org use
# it for this specifically.
jupyter labextension install @jupyter-widgets/jupyterlab-manager@^1.0.1
jupyter labextension install jupyterlab_bokeh@1.0.0 --no-build
jupyter labextension install jupyter-matplotlib@0.5.0

[martinRenou]

FontAwesome seems to be missing on the page. ipywidgets and jupyter-matplotlib just assume FontAwesome is available (as Jupyter Notebook and JupyterLab provide it).

You can quickly fix it by adding font-awesome on your page

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>

But we might want to fix this in Thebelab by including FA

[sandertyu]

I've created a repository which contains sample Thebe pages for many Jupyter widgets and you can view them here.

I added the font-awesome script to my ipympl.html page as suggested above, but it still does not completely display the buttons properly as seen below;

Luckily, the buttons are still fully functional. There is certainly a way to get the buttons to display properly through Thebe, because we are able to get them to all display properly on this LibreTexts page.

Relatedly, bqplot also experiences similar issues with font-awesome. In this case though, the buttons neither display nor function, except for the save image button. This is probably worth another issue for itself, but I wanted to get this information out there before the Jupytercon sprint tomorrow.

[celine168]

@sandertyu and I were researching and found that icons will show up only with Font Awesome 4 and not with 5.

This is probably due to the changes in the tag names from version 4 to 5, as described in the docs: https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4#changes Version 4 uses the prefix fa for their icons, while version 5 uses four different prefixes.

An example of the html of one of the icons:

To fix this issue, you should add a <script> tag with the src to the Font Awesome 4 js file in your html page with thebe.

[choldgraf]

I wonder if we should create a page with "known dependencies for common libraries" and list this kind of thing.

E.g.: for matplotlib, we tell users they need FontAwesome 4 for icons. For ipywidgets, we tell users they need require.js loaded, etc.

[celine168]

That's a good idea! @sandertyu has a repo keeping track of some of these dependencies, we can create a page based on these.

[moorepants]

As a start, you all can complete the matplotlib example page you started in the sprint. That also documents what is needed to get that particular library to work. If we can figure out the specific requirements for all the major jupyter widgets/extensions/etc. then we can potentially consolidate the recommendations in the docs and/or add new things to thebe so that documentation isn't needed. First, we need to know precisely what thebe isn't providing that Jupyter Lab and Notebook do.

[choldgraf]

@moorepants that's a good point. I think starting off by finishing each example page is a good idea

[celine168]

I did create a page on this: https://github.com/celine168/thebe/tree/docs-ipympl I'm having a bit of trouble trying to use matplotlib/ipympl as the binder repo as I'm getting this sort of error:

---------------------------------------------------------------------------
FileNotFoundError                         Traceback (most recent call last)
<ipython-input-1-38257e2684a4> in <module>
----> 1 get_ipython().run_line_magic('matplotlib', 'widget')
      2 import matplotlib.pyplot as plt
      3 fig, ax = plt.subplots()
      4 fig.canvas.layout.width = '7in'
      5 fig.canvas.layout.height= '5in'

/srv/conda/envs/notebook/lib/python3.7/site-packages/IPython/core/interactiveshell.py in run_line_magic(self, magic_name, line, _stack_depth)
   2305                 kwargs['local_ns'] = sys._getframe(stack_depth).f_locals
   2306             with self.builtin_trap:
-> 2307                 result = fn(*args, **kwargs)
   2308             return result
   2309 

</srv/conda/envs/notebook/lib/python3.7/site-packages/decorator.py:decorator-gen-108> in matplotlib(self, line)

/srv/conda/envs/notebook/lib/python3.7/site-packages/IPython/core/magic.py in <lambda>(f, *a, **k)
    185     # but it's overkill for just that one bit of state.
    186     def magic_deco(arg):
--> 187         call = lambda f, *a, **k: f(*a, **k)
    188 
    189         if callable(arg):

/srv/conda/envs/notebook/lib/python3.7/site-packages/IPython/core/magics/pylab.py in matplotlib(self, line)
     97             print("Available matplotlib backends: %s" % backends_list)
     98         else:
---> 99             gui, backend = self.shell.enable_matplotlib(args.gui.lower() if isinstance(args.gui, str) else args.gui)
    100             self._show_matplotlib_backend(args.gui, backend)
    101 

/srv/conda/envs/notebook/lib/python3.7/site-packages/IPython/core/interactiveshell.py in enable_matplotlib(self, gui)
   3405                 gui, backend = pt.find_gui_and_backend(self.pylab_gui_select)
   3406 
-> 3407         pt.activate_matplotlib(backend)
   3408         pt.configure_inline_support(self, backend)
   3409 

/srv/conda/envs/notebook/lib/python3.7/site-packages/IPython/core/pylabtools.py in activate_matplotlib(backend)
    314     # when this function runs.
    315     # So avoid needing matplotlib attribute-lookup to access pyplot.
--> 316     from matplotlib import pyplot as plt
    317 
    318     plt.switch_backend(backend)

/srv/conda/envs/notebook/lib/python3.7/site-packages/matplotlib/pyplot.py in <module>
   2280     dict.__setitem__(rcParams, "backend", rcsetup._auto_backend_sentinel)
   2281 # Set up the backend.
-> 2282 switch_backend(rcParams["backend"])
   2283 
   2284 # Just to be safe.  Interactive mode can be turned on without

/srv/conda/envs/notebook/lib/python3.7/site-packages/matplotlib/pyplot.py in switch_backend(newbackend)
    219         else "matplotlib.backends.backend_{}".format(newbackend.lower()))
    220 
--> 221     backend_mod = importlib.import_module(backend_name)
    222     Backend = type(
    223         "Backend", (matplotlib.backends._Backend,), vars(backend_mod))

/srv/conda/envs/notebook/lib/python3.7/importlib/__init__.py in import_module(name, package)
    125                 break
    126             level += 1
--> 127     return _bootstrap._gcd_import(name[level:], package, level)
    128 
    129 

~/ipympl/backend_nbagg.py in <module>
     25 
     26 here = os.path.dirname(__file__)
---> 27 with open(os.path.join(here, 'static', 'package.json')) as fid:
     28     js_semver = '^%s' % json.load(fid)['version']
     29 

FileNotFoundError: [Errno 2] No such file or directory: '/home/jovyan/ipympl/static/package.json'

[moorepants]

I suggest opening a PR so we can discuss there and it'll make it easy for us to try it out.

[moorepants]

All buttons work in this example https://thebe.readthedocs.io/en/latest/examples/ipympl_example.html if fontawesome is loaded. Reopen if there are further issues.