Hosting a panel app converted to pyodide-worker on GitHub pages

Does anyone have experience hosting a panel app converted to pyodide-worker on GitHub pages?

I get:

ahuang11.github.io/:1 Access to script at 'https://cdn.holoviz.org/panel/0.14.1/dist/bundled/js/@microsoft/fast-colors@5.3.1/dist/color-interpolation.js' from origin 'https://ahuang11.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

And dumped output here (renamed to index.html / index.js)

1 Like

Hi @ahuang11 .

I see issues like that once in a while. But I cannot really reproduce them.

FYI. @philippjfr

Are you able to open the app successfully here? Squarify

The console results in the error from above.

1 Like

I see another error

I’ve seen other people report the CORS issue but have double and triple checked the setting and could never reproduce it myself. And yes, the app seems to missing the .js file. I think you renamed the files from app.html/js → index.html/js but did not update the reference to app.js in the app.html to refer to the renamed index.js.

1 Like

Thanks all! I got it live now: Squarify

1 Like

I’m getting consistent CORS errors with this app

https://midnighter.github.io/multi-package-biocontainers/mulled.html

Enter, for example, bedtools 2.29.0 and pigz 2.3.4 and you should see a failing request to quay.io which is denied by CORS.

Hello! I’m currently exploring the capabilities of Panel. I recently followed a helpful guide by Marc Skov and Sophia Yang on deploying a simple Panel app on GitHub (How to Deploy a Panel Visualization Dashboard to GitHub Pages | by Sophia Yang, Ph.D. | Towards Data Science). It was a fantastic resource, and I’m grateful for their contribution.

However, I’ve encountered an issue while attempting to deploy another Panel app that incorporates geospatial data in the zarr format, loaded through intake. Although this app functions perfectly offline, I’ve been unable to make it work on GitHub. Whenever I try to load the page, an “ImportError: HPPTFileSystem requires ‘requests’ and ‘aiohttp’ to be installed” message appears.

I’m curious to know if this limitation is specific to GitHub or if there might be another underlying cause. I would greatly appreciate any insights, suggestions, or guidance you may have regarding this matter.

Thank you for your time and assistance. Cheers!

I think it might be because aiohttp is not natively supported by pyscript.

Perhaps try using requests?
https://docs.pyscript.net/latest/guides/http-requests.html#how-to-make-http-requests-using-pyscript-in-pure-python

In order to show exactly what’s going on, I’ll provide some sample code. This is the .py file that I exported through the Jupyter-Lab interface:

#!/usr/bin/env python
# coding: utf-8

# In[1]:

import os
import xarray as xr
import hvplot.xarray
import pandas as pd
import panel as pn
import intake

# In[2]:

Regs = ['gl', 'hn', 'tr', 'hs', 'as']
Exps = ['BAMH']
Stats = ['VIES', 'RMSE', 'MEAN']

data = '20230216002023030300'

# In[3]:

catalog = intake.open_catalog('https://raw.githubusercontent.com/cfbastarz/panel_tests/main/catalog.yml')

# In[4]:

ds1 = catalog.scantec_gl_rmse_dtc.to_dask()

# In[5]:

ds1

# In[6]:

Vars = list(ds1.variables)
Vars.remove('time')
Vars.remove('lat')
Vars.remove('lon')

variable_list = Vars
variable = pn.widgets.Select(name='Variable', value=variable_list[0], options=variable_list)

region = pn.widgets.Select(name='Region', value=Regs[0], options=Regs)
experiment = pn.widgets.Select(name='Experiment', value=Exps[0], options=Exps)
statistic = pn.widgets.Select(name='Statistic', value=Stats[0], options=Stats)

test_list = ['ref_GFS', 'ref_Era5', 'ref_PAnl']
test = pn.widgets.Select(name='Reference', value=test_list[0], options=test_list)

@pn.depends(variable, region, experiment, statistic, test)
def plotFields(variable, region, experiment, statistic, test):
    if test == 'ref_GFS': ttest = 'T1'
    if test == 'ref_Era5': ttest = 'T2'
    if test == 'ref_PAnl': ttest = 'T3'
    lfname = 'scantec_' + region.lower() + '_' + statistic.lower() + '_' + experiment.lower()
    dfs = catalog[lfname].to_dask()
    cmin=dfs[variable].min()
    cmax=dfs[variable].max()
    cmap='tab20c_r'
    if region == 'as': 
        frame_width=500
    else: 
        frame_width=960
    ax = dfs[variable].hvplot(groupby='time', clim=(cmin, cmax), widget_type='scrubber', widget_location='bottom', 
                              frame_width=frame_width, cmap=cmap)
    return pn.Column(ax, sizing_mode='stretch_width')

card_parameters = pn.Card(variable, region, experiment, statistic, test, title='Parameters', collapsed=False)

settings = pn.Column(card_parameters)

pn.template.FastListTemplate(
    site="My Dashboard", title="panel_tests", sidebar=[settings],
    main=["My test.", plotFields], 
#).show();
).servable();

The code is pretty simple. I use the intake to load a catalog file, which contains data sources in the Zarr format.

At this point, I’m just trying to show a spatial field in the panel app (I didn’t even correctly projected the data to avoid other issues). So, I guess the approach of loading the data by using the intake catalog is ok, altough the loading time is pretty long (I guess it can be improved by rechunking the dataset?).

I’m trying to deploy the panel app at GitHub pages (my repo is GitHub - cfbastarz/panel_tests) and I successfully did it before, but using only CSV data that I hosted along with the panel files in the repository. When I try to load the panel (here’s the url panel_tests), this is what I get:

This is what I get after I manually include the requests and aiohttp packages inside the panel_app.js file.

So, is this panel app supposed to work the way it is or there is something missing or it is just the way I’m doing things? Any suggestions and guidance is greatly appreciated.

Cheers,

Carlos

@ahuang11 Thanks for your reply. I just replyed with the code I’m using. Maybe @philippjfr can help? Cheers!

1 Like