embed widgets - not interactive on static webpage

[Alcampopiano]

Hi guys,

I've created a three "Select" widgets that observe one another. Basically, when one option is clicked by the user, the other boxes update their options accordingly based on a nested yaml file. Once the user selects all desired options, a button widget is pressed which displays the contents of a text file in the notebook (rendered to HTML with widgets.HTML). Here is an example of the code flow, just so you can get an idea:

create widgets, with text options based on yaml file:

top_level_select = widgets.Select(options=list(yam.keys())) mid_level_select = widgets.Select(options=list(yam[key1])) bottom_level_select = widgets.Select(options=list(yam[key1][key2])) button_widget = widgets.Button(description='Retrieve Results') text_widget = widgets.HTML(value='waiting for results')

define callback functions for "observe" methods

def update_mid_level_select(*args): . . .

def update_bottom_level_select(*args): . . .

def display_current_options(*args): . . .

observe methods to control text options

top_level_select.observe(update_mid_level_select, 'value') mid_level_select.observe(update_bottom_level_select, 'value') button_widget.on_click(display_current_options)

display widgets

VBox([top_level_select, mid_level_select, bottom_level_select, button_widget, text_widget])

here's how they look

Now, all of this works perfectly, and in a very small amount of code which is great. However, when I click the "embed widgets" menu option, copy the code, and paste it into an html file, the widgets are no longer responding to one another (options are not changing), and no results are displayed when the button is pressed. Could you help me to understand how I might get this to work?

Thank you very much, Allan

[jasongrout]

You'll need to hook them up to a live python kernel to have the actual python functions run. There are some examples of the javascript and python code needed using ipywidgets 6.0 in the examples directory: https://github.com/jupyter-widgets/ipywidgets/tree/6.x/jupyter-js-widgets/examples/web3

[Alcampopiano]

Thanks for the reply Jason. I am trying to follow the instructions you sent but unfortunately I require some additional help. The instructions say to run npm install in the jupyter-js-widgets subfolder of the repo. However, I have two jupyter-js-widgets folders on my computer

\Anaconda3\share\jupyter\nbextensions\jupyter-js-widgets Anaconda3\pkgs\widgetsnbextension-2.0.0-py36_0\share\jupyter\nbextensions\jupyter-js-widgets

Am I supposed to run npm install from within one of these directories?

I apologize for my confusion, but I am relatively new to python and jupyter notebooks/lab. Any feedback you could provide would be much appreciated. Jupyter lab has become a game changer for me in my data science work at a school board. It has allowed me to explore, generate, and automate static reports, all in the same environment. If I could share interactive reports with end-users, as I am trying to do here, we could move away from other commercial business analytics tools, and instead stick with python and jupyter lab.

Take care, Al

[jasongrout]

Al, great to hear that it's a useful tool to you!

Clone the ipywidgets repo, then go to the jupyter-js-widgets directory of the ipywidgets repo you just cloned, and run npm install in that directory.

[jasongrout]

(The point is that the examples in the ipywidgets repo use the repo's version of jupyter-js-widgets, so you have to build it first.)

[jasongrout]

Alternatively, as noted in the readme (https://github.com/jupyter-widgets/ipywidgets/tree/6.x/jupyter-js-widgets/examples/web3#details), you can change the example's package.json by running npm install --save jupyter-js-widgets@2.*), and then just continue on with step 2 of the example instructions.

[Alcampopiano]

Thanks Jason,

These are very helpful and I will try them as soon as I have a bit of time. Thanks very much for the detailed suggestions.

Sincerely, Al

[yngstr]

Getting this error when connecting to localhost in browser:

"GET /built/index.built.js" Error (404): "Not found"

I'm guessing I'm not correctly installing jupyer-js-widgets, but i can't find it in the ipywidgets repo anywhere...

[jasongrout]

@yngstr - what steps did you do leading up to that error?

[yngstr]

Downloaded the repo, ran npm install in the web3 example directory, ran npm run host in same directory, in new terminal ran python -m notebook --no-browser --NotebookApp.allow_origin="*" --NotebookApp.disable_check_xsrf=True --NotebookApp.token='', and then navigated to localhost through browser. When I did that, window running npm run host showed the error

[jasongrout]

We're right now working on the examples in the master branch. If you check out the 6.x branch (git checkout 6.x), corresponding to ipywidgets 6.0, things should work.

[jasongrout]

@yngstr - things should work now on master. A couple of points:

1. The instructions in the web3 readme are to run npm install in the root directory of the repo, and then to run npm run build:examples.
2. However, it should still work to cd into the specific example and run npm install and then npm run build. I had to make two changes to fix some errors to do this, but it works fine for me now.

Can you check on the ipywidgets current master branch and see if going into the web3 example, then doing npm install, npm run build, and then running the npm run host and the notebook command works?

[jasongrout]

Closing as resolved. Please reopen if you'd like to continue the conversation.

[nscozzaro]

Hi, When I follow the instructions I'm getting the following error: node_modules/@types/backbone/index.d.ts(259,24): error TS2503: Cannot find namespace '_'.

I tried searching for a solution online but I don't know how to resolve it. One note is that I don't have root access on the computer (and I'm behind a corporate proxy).

This results in a npm ERR:

[nscozzaro]

Update: I resolved this by changing the @types/underscore version: npm i @types/underscore@1.8.9

[nscozzaro]

I've fallen back to trying to get web3 working, but have now run into a different issue that is a blocker for me. I get the box that pops up for me to enter the running Jupyter notebook url, but when I do it throws this error in the console:

Access to XMLHttpRequest at 'http://localhost:8888/?token=5a5c20f259c8b5571297fb70372f0492a37da092eac14e94/api/kernelspecs&1555968663690' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any suggestions for how to resolve it would be appreciated.

[nscozzaro]

@jasongrout I would think that --NotebookApp.allow_origin='*' would make it so I wouldn't get that error above, but I do... so instead just for testing purposes I set --NotebookApp.token='' which made that error to go away, but instead I get a different error. I'm struggling to get this to work. Any suggestions are appreciated.