Github Pages-widget rendering problems

I am developing a straightforward Panel app to interactively illustrate cubic Bezier curves and serve it with Github Pages. I followed the excellent blog post How to Deploy a Panel Visualization Dashboard to GitHub Pages. When I serve the panel convert-generated html file locally on my mac laptop, everything works great. When I access the app through Github Pages, the slider widgets are rendered without the grab point, and the toggles in the header aren’t rendered. The app can be accessed here with Github Pages. After it loads in a browser (I’ve tried Brave, Safari, and Chrome), you can see 3 errors in the javascript console, most of which have to do with “…not allowed by Access-Control-Allow-Origin”. I assume this is what’s causing the problem with rendering the widgets. If so, any suggestions on how to proceed?

Thanks for a great project!

1 Like

Hi @greg_nordin,

This is what I see when click the link

It appears to render correctly for myself in safari on iOS.

The error sounds related to the allow all origins switch when launching a server but I’m really not sure.

Nice work

Thanks, @carl. I just tried it in Firefox on iOS & the sliders look & work right. Not sure what’s going on when trying to view with my laptop.

Also renders fine for me, note that you can get a much more performant app by changing these lines:

interactive_bezier = pn.bind(
    bezier_curve_bind,
    p1_angle_deg_slider,
    d0_length_slider,
    d0_angle_deg_slider,
    d1_length_slider,
    d1_angle_deg_slider,
)

to


interactive_bezier = hv.DynamicMap(
    bezier_curve_bind, streams={
        'p1_angle_deg': p1_angle_deg_slider,
        'd0_length': d0_length_slider,
        'd0_angle_deg': d0_angle_deg_slider,
        'd1_length': d1_length_slider,
        'd1_angle_deg': d1_angle_deg_slider,
    }
)

This ensure that HoloViews updates the individual components rather than redrawing the entire plot.

1 Like

This trick should be documented one day @philippjfr :+1:

Would it give the same performance boost if the pn.bind function was put in a DynamicMap.

Thanks, @philippjfr! I implemented the change to DynamicMap and it seems to work well.

Strangely, everything is rendering fine for me now. The only difference to when I observed the problem is I’m now home and the problem occurred as I was using the internet on a trans-Atlantic flight. I’m not sure what’s up with that, but I’m happy that the problem seems to be limited to that circumstance.

2 Likes