search

holoviz / panel

Panel: The powerful data exploration & web app framework for Python
https://panel.holoviz.org
BSD 3-Clause "New" or "Revised" License
4.61k stars 500 forks source link

CSS is missing when inlining static resources. #5167

Open sunilkr opened 1 year ago

sunilkr commented 1 year ago

When using inline=True, some of the CSS files are not loaded inline and request is sent to CDN. This does not work if machine is not connected to internet.

ALL software version info

(this library, plus any other relevant software, e.g. bokeh, python, notebook, OS, browser, etc)

bokeh 3.1.1 panel 1.1.0

Running it on JupyterLab 3.4.6, Python-3.9 in a Linux container. Browser: Edge 114.0

Description of expected behavior and the observed behavior

Expected behavior: DataTable is shown with full functionality. Observed Behavior: DataTaable is rendered incorrectly and is illegible.

Complete, minimal, self-contained example code that reproduces the issue

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

Stack traceback and/or browser JavaScript console output

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

Sometimes I get following warning in Browser console. Not sure if it is related.

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
sunilkr commented 1 year ago

@philippjfr FYI ref #3013

naveen-mahendrakar commented 1 year ago

I am also facing the same issue w.r.t Tabulator. Tabulator does not get rendered properly due to unavailability of the CSS files offline.

Found In bokeh - 3.1.1 panel - 1.1.0 & 1.2.0

Browser: Chrome (114.0.5735.199) OS: Windows 10

Sample code : 

import panel as pn
pn.extension("tabulator", inline=True)
table = pn.widgets.Tabulator(data_frame, sizing_mode = 'stretch_width')
table

Browser Console output:

Failed to load resource: net::ERR_NAME_NOT_RESOLVED
loading.css:1     Failed to load resource: net::ERR_NAME_NOT_RESOLVED
widgetbox.css:1     Failed to load resource: net::ERR_NAME_NOT_RESOLVED
listpanel.css:1     Failed to load resource: net::ERR_NAME_NOT_RESOLVED
all.min.css:1     Failed to load resource: net::ERR_NAME_NOT_RESOLVED
tabulator_bootstrap4.min.css:1     Failed to load resource: net::ERR_NAME_NOT_RESOLVED
loading.css:1     Failed to load resource: net::ERR_NAME_NOT_RESOLVED
all.min.css:1     Failed to load resource: net::ERR_NAME_NOT_RESOLVED
tabulator_bootstrap4.min.css:1     Failed to load resource: net::ERR_NAME_NOT_RESOLVED
gc153671 commented 5 months ago

I'm also running into the same issue. It looks like the missing urls (e.g. default.css) come from importing CDN_DIST from panel.io.resources. Would it be worth dynamically setting CDN_DIST (either to point at LOCAL_DIST or the jupyterlab extension endpoint) when config.inline is set to True? Are there differences between using the jupyterlab server extension to serve files v.s. having the dependencies truly inline?

I did try setting CDN_DIST to different values as a hacky test but ran into issues with missing tabulator JS and CSS files. I'm happy to submit a PR to try and address this if it would be helpful but wanted to get input first.

BranLWill commented 2 months ago

@philippjfr I too am getting this issue when trying to render datashaded plots. Where pretty much every css file is being loaded via CDN rather than using the local dist in an offline scenario.

Files reaching out to the CDN: