Progress Bar Styling Not Rendering due to CORS

Panel
,
1

The Jupyter Server I am working on has extremely strict CORS policies (meaning any External CSS requests are immediately blocked). This normally is not an issue as panel and bokeh are having their renders resources as inline, but there seems to be something different about the progress bar.

Using the following code, the render result is exactly the same as <progress value="20" max="100"></progress> without any styling:

import panel as pn
from bokeh import resources
from bokeh.io import output_notebook

r = resources.Resources(mode='inline')

output_notebook(r)
pn.extension()

pn.indicators.Progress(name='Progress', value=20, width=200)

I ran the same code snippet on a local Jupyter server without any CORS policies and it works just fine.

Likewise I even attempted to download and render the following CSS link that are being block using the IPython.display.HTML and IPython.display.display to render them as Internal CSS to no avail:

  • https://cdn.holoviz.org/panel/1.2.0/dist/css/loading.css
  • https://cdn.holoviz.org/panel/1.2.0/dist/css/progress.css
  • https://cdn.holoviz.org/panel/1.2.0/dist/bundled/theme/default.css
  • https://cdn.holoviz.org/panel/1.2.0/dist/bundled/theme/native.css

Curious if any one had any ideas or workarounds for this?

2

Found a workaround; however, I fell like this is a still a bug that only these stylesheets are not loaded properly.

Workaround for this is use the stylesheets keyword argument inside of parameter and statically include the stylesheets.

My solutions looks like:

loading = # contents of "https://cdn.holoviz.org/panel/1.2.0/dist/css/loading.css" as string
progress = # contents of "https://cdn.holoviz.org/panel/1.2.0/dist/css/progress.css" as string
default = # contents of "https://cdn.holoviz.org/panel/1.2.0/dist/bundled/theme/default.css" as string
native = # contents of "https://cdn.holoviz.org/panel/1.2.0/dist/bundled/theme/native.css" as string

pn.indicators.Progress(name='Progress', value=20 width=200, stylesheets=[css, loading, native, default])
1 Like
3

Hi @1nv8rzim

Welcome to the community.

Could you file this as a big on GitHub? Thanks.

4

Same issue here. I could not replicate the Progress bar the way it appears in the docs until I fed the raw strings from the 4 files to the stylesheets argument.

I opened an issue here: Progress Bar Styling Not Rendering due to CORS · Issue #6924 · holoviz/panel · GitHub