Add ability to inline internal resources in Jupyter

[jonnyboynewton]

We are running a jupyter-lab application environment behind a strict firewall and users cannot access the internet. Hence for all panel work we have a default environment variable set for PANEL_INLINE

This works for most panels functions but not for tabulator as the code for models/tabulator.py has explicit dependence on the tabulator and moment CDNs. I think this is an issue for plotly functions too.

As a general feature request - PANEL_INLINE should inline all panel and included items like tabulator, plotly (bokeh seems to work)

[jonnyboynewton]

from panel/models/tabulator.py:

JS_SRC = "https://unpkg.com/tabulator-tables@5.0.7/dist/js/tabulator.js"
MOMENT_SRC = "https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min.js"

THEME_PATH = "tabulator-tables@5.0.7/dist/css/"
THEME_URL = f"https://unpkg.com/{THEME_PATH}"
PANEL_CDN = f'https://cdn.jsdelivr.net/npm/@holoviz/panel/dist/bundled/{THEME_PATH}'

none of this supports PANEL_INLINE from what I can tell..

[philippjfr]

This is a general problem that goes beyond just tabulator and affects all external components. We do not currently support inlining external resources. However since we a) bundle all external components and b) have a server extension for Jupyter that serves up the bundled resources we should be able to server them from that endpoint instead.

[MarcSkovMadsen]

Just for reference. Dove88 is also trying to use Tabulator and Plotly offline in a notebook without luck. See https://discourse.holoviz.org/t/panel-doesnt-show-output-in-the-jupyter-lab-notebook/5104.

[philippjfr]

Yup working on this in the coming week. Technically this should already work on main but it's loading from an endpoint that isn't always defined so I'll experiment with inlining instead.

[sunilkr]

We too have an isolated environments where having tabualtor working in offline context would solve most of Jupyter UI issues.

[sunilkr]

@philippjfr I am still seeing requests being made to following URLs which fails on an isolated device.

https://cdn.holoviz.org/panel/1.1.0/dist/panel.min.js

Following are installed packages.

bokeh 3.1.1
panel 1.1.0

Was my understanding of this patch was incorrect that updated versions would work in offline context?

[philippjfr]

Inline resources are very inefficient and therefore not enabled by default. If you want to inline resources you should request it explicitly with pn.extension(inline=True)

[sunilkr]

Thanks for quick response @philippjfr .

Got following warnings in browser console and table is not shown.

Bokeh: BokehJS was loaded multiple times but one version failed to initialize.
VM227:54  Panel: ERROR: Unable to run Panel code because Bokeh or Panel library is missing
(anonymous) @ VM227:54
setInterval (async)
(anonymous) @ VM227:44
(anonymous) @ VM227:63
t.attachWidget @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
t.insertWidget @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
_insertOutput @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
onModelChanged @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
m @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
l @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
e.emit @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
_onListChanged @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
m @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
l @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
e.emit @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
push @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
_add @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
add @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
_onIOPub @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
_handleIOPub @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
await in _handleIOPub (async)
handleMsg @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
_handleMessage @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
(anonymous) @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
Promise.then (async)
_onWSMessage @ jlab_core.d6bc082464b66ab0e79a.js?v=d6bc082464b66ab0e79a:2
VM228:54  Panel: ERROR: Unable to run Panel code because Bokeh or Panel library is missing

source

import panel as pn
pn.extension("tabulator", inline=True)
tbl = pn.widgets.Tabulator(df,   #df is already defined before
                           show_index=False,
                           sizing_mode = 'stretch_width',
                          )
tbl

Same code works where internet is available.

Running it on JupyterLab 3.4.6

[sunilkr]

@philippjfr Issue I reported just now has disappeared, but I am still seeing failed requests to following URLs which makes the rendered table illegible.

Failed to load resource: net::ERR_CONNECTION_CLOSED  https://cdn.holoviz.org/panel/1.1.0/dist/css/loading.css
 loading.css:1

Failed to load resource: net::ERR_CONNECTION_CLOSED https://cdn.holoviz.org/panel/1.1.0/dist/bundled/font-awesome/css/all.min.css
all.min.css:1 


Failed to load resource: net::ERR_CONNECTION_CLOSED https://cdn.holoviz.org/panel/1.1.0/dist/bundled/theme/default.css
default.css:1 


Failed to load resource: net::ERR_CONNECTION_CLOSED https://cdn.holoviz.org/panel/1.1.0/dist/bundled/theme/native.css
native.css:1 


Failed to load resource: net::ERR_CONNECTION_CLOSED https://cdn.holoviz.org/panel/1.1.0/dist/bundled/datatabulator/tabulator-tables@5.4.4/dist/css/tabulator_simple.min.css
tabulator_simple.min.css:1 

[sunilkr]

@philippjfr I was looking around in the source to see if putting css in the installation folder would work.
I see that loading.css exists, but other css files are missing.

Also, panel/dist/css/bundled does not contain font-awesome folder.

Could you please tell me if copying these files to the package installation directory will allow it server local copy?

[sunilkr]

Hi @philippjfr , should I create a new issue for this?

[philippjfr]

Please do, thank you!