I am trying to use an example from the panel documentation of how to display a panel component from python using pyodide, but from a react component, instead of from pure html.
I have set up a minimal NextJS react app which can be cloned, and ran locally simply with npm i && npm start
. My example works for simple python code returning a string or number, but when I attempt to use it with the example panel code for a simple slider I am unsure what to return in order for react to render the slider.
The python code is contained in src/App.js. I am simply overwriting the myPythonCodeString variable from the panel code to a simple 1+9 arithmetic to demonstrate it works in that simple case.
Any help would be much appreciated.
Edit: I have added commits to this repo fixing the problem, the state of the repo when this question was asked can be seen in commit 3c735653dda0e873f17a98d0fb74edaca367ca00.
2
Answers
Thanks to @TachyonicBytes for the assistance in solving this. As they said, there were 2 issues, one was that the scripts needed to be loaded synchronously, one after another in sequence, I did this using the useScript hook from the usehooks-ts library. The other was that I needed to create a div with an id matching that of the servable target in the panel component in the python code.
A github repo with the working app with the corrections in can be viewed here
The component which runs the python code with pyodide looks like so:
And example usage looks like:
The result being:
Your code is actually correct, and produces the widget. The only problem is that
Helmet
does not load the scripts in sync, as<head>
does. So, your scripts will end up being loaded at the same time, and because they depend on each other, the loading will fail.There is a simple way to get the correct output:
id="simple_app"
to your applicationHelmet
, apart frompyodide
andbokeh
npm run start
At the end, all the scripts will have loaded in the correct manner and you will be left with the widget working.
The simplest solution is to make
Helmet
load the scripts in sync, or load the scripts using another method.