Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DS: Enable Jupyter widgets (aka ipywidgets) #3429

Open
Babakjfard opened this issue Nov 21, 2018 · 13 comments
Open

DS: Enable Jupyter widgets (aka ipywidgets) #3429

Babakjfard opened this issue Nov 21, 2018 · 13 comments

Comments

@Babakjfard
Copy link

@Babakjfard Babakjfard commented Nov 21, 2018

I use BeakerX widget in Jupyter a lot to explore my pandas data frames. It will be great if this feature can be added to vscode (and in general the support for Jupyter Widgets in vscode)

@Babakjfard Babakjfard changed the title Enabling Jupyter widgets (BeakerX) in vscode-python Enabling Jupyter widgets (e.g. BeakerX) in vscode-python Nov 21, 2018
@Dessix

This comment has been minimized.

Copy link
Member

@Dessix Dessix commented Dec 9, 2018

This would be very helpful for one of my projects.

Do we know a rough outline of what needs completed in order to implement this?

@rchiodo

This comment has been minimized.

Copy link

@rchiodo rchiodo commented Jan 4, 2019

I have a feeling we'll need something along these lines:
https://github.com/jupyter-widgets/ipywidgets/blob/master/docs/source/embedding.md

Beaker (at least plots) is using a custom jupyter widget mime type:
application/vnd.jupyter.widget-view+json

@rchiodo

This comment has been minimized.

Copy link

@rchiodo rchiodo commented Jan 8, 2019

This is also likely part of the solution:
https://www.npmjs.com/package/@jupyter-widgets/controls

@rchiodo

This comment has been minimized.

Copy link

@rchiodo rchiodo commented Jan 9, 2019

Yeah looking at the examples here:
https://github.com/jupyter-widgets/ipywidgets/blob/master/examples

We're going to have to refactor our jupyter communication to exist in our react control instead of the main extension.

@DonJayamanne

This comment has been minimized.

Copy link

@DonJayamanne DonJayamanne commented May 16, 2019

Another solution is to try out the transform-widgets react package from nteract

@rchiodo /cc

@rchiodo

This comment has been minimized.

Copy link

@rchiodo rchiodo commented Oct 14, 2019

See this issue for some more hints
jupyter-widgets/ipywidgets#2512

@gramster gramster added this to the DS Bucket milestone Oct 23, 2019
@DonJayamanne

This comment has been minimized.

Copy link

@DonJayamanne DonJayamanne commented Oct 25, 2019

MVP

  • Standard/builtin ipwidget (here's the list https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html)
  • Interactive Widgets, with client side links (user interaction executes pure js code)
  • Interactive Widgets, with kernel links (user interaction sends messages to kernels)
  • Third-party widgets (list what works and what doesn't)
  • Ensure widget state is maintained/updated even when cell output is hiddden/collapsed
  • Moving cells around with output (widgets)
  • Investigate why some third-party widgets don't work (reach out to ipywidgets/jupyterlabs folk)
  • VS Code Remote (need to spike to find out what the issues are)

Long term goals

  • Live share with interactive widgets
  • Saving widgets in notebooks

Challenges/Unknowns

  • Ensure widget state is updated/maintained even when not displayed (we have a spike for this)
    • Tehnically this should work out of the box, as backbone manages the state of these controls.
  • Collapsing output cells (we'd need to show/hide ipywidgets, we have a spike for this)
  • Saving state of widgets in notebooks (is this supported today in classic notebooks)
  • Moving cells with ipywidget in output panels (should be possible, we'd need to re-render the widgets, we have a spike for this)
  • Third-party widgets (some don't seem to work, no errors, nothing. Then again, these don't even work on other notebook implementation).
  • VS Code Remote
  • Live Share
    • Interactive widgets with js links will not work - i.e. moving a slider on host will not move slider on guest)
      • We could get this working by hooking into the state of each (backbone) control and broadcasting this and manually applying it. However, there's a complication of two users moving the same slider! Which one wins, gets even more complicated with links - impacting other controls
    • Interactive widgets with kernels links should technically work (we'll need to ensure all kernel messages are also broadcasted)

Solution

  • The details found here will form the basis of the implementation https://ipywidgets.readthedocs.io/en/latest/embedding.html
    • Basically use ipywidget widget manager to do everything.
    • We create the manager, and give it the command chanel
    • Manager will render the widgets.
    • We can give the manager a map of request id to html elements. Will allow us to render the ipywidget in the right spot.
  • Implement a communications channel on UI, so widgets can communicate directly with kernel (basically we'll need a proxy a connection to the actual one maintained within the extension process)
  • Build and embed widgets as a separate JS project? (this project will only include the JS code for widgets, not the comms or the like). Basically it'll be similar to web3
  • Integration with native editor (create a react control to render ipywidgets and just give it the requestid/commid). Attempting to give it the data, will be unnecessarily complicated, as we'll need to untangle the comms, etc. This is better handled by the ipywidget manager (based on the HTMLManager, see their docs)

Estimates (total 14.5)

  • Clean up prototype (2)
  • Support theming (0.5)
  • Implement comms channel (2)
  • Typing in widgets sets focus to monaco editor (bug) (1)
  • Bundling jupyter ipywidgets (hopefully as a separate js project, as these require requirejs) (0)
  • Integration with notebook (react integration) (0)
  • Re-rendering widgets (show/hide/clear output cells or moving cells) (1)
  • Add UI tests (2-3) (might not be possible without #8182)
  • Spike VS Code remote (1) (no idea whether it will even work, cannot estimate without knowing)
  • Basic widgets (2)
  • Third-party widgets (requirejs) (1/2)
  • Ensure ensure widget state is updated/maintained even when not displayed (1/2)

** Updates to Estimates 7th Jan 2020 **

  • Load 3rd party script files from jupyter server (if this fails, then fallback to download using internet connection). (2)
    • Currently 3rd party scripts are loaded from external resource (internet connection).
    • Downloading the local bits could be a preferred option (faster, no reliance on active internet connection, more accurate to what the user has installed).
  • Add support for Output widget (requires special handling, seems jupyter notebooks and labs have special code to handle this particular widget) (2)
  • Update old code base to latest codebase (updated React and other changes) (1)
    • The old prototype is based on the old code base
@greazer greazer changed the title Enabling Jupyter widgets (e.g. BeakerX) in vscode-python Enable Jupyter widgets (e.g. ipywidgets based libraries like BeakerX) in vscode-python Nov 14, 2019
@stonebig

This comment has been minimized.

Copy link

@stonebig stonebig commented Nov 22, 2019

test of today version on winpython:

  • ipywidgets interactive doesn't seem to work
  • latex rendering of latex expression doesn't seem to work
@rchiodo

This comment has been minimized.

Copy link

@rchiodo rchiodo commented Nov 22, 2019

@stonebig not sure what you mean. We haven't submitted any code for ipywidgets support yet. So it's expected that ipywidgets don't work.

Can you go into more detail about latex expressions? Perhaps you're hitting this issue:
#8673

@stonebig

This comment has been minimized.

Copy link

@stonebig stonebig commented Nov 22, 2019

Yes probably same latex issue, with a $$ formula

@greazer greazer changed the title Enable Jupyter widgets (e.g. ipywidgets based libraries like BeakerX) in vscode-python Enable Jupyter widgets (e.g. ipywidgets based libraries like BeakerX) Jan 10, 2020
@greazer greazer changed the title Enable Jupyter widgets (e.g. ipywidgets based libraries like BeakerX) Enable Jupyter widgets (aka ipywidgets) Jan 10, 2020
This was referenced Jan 21, 2020
DonJayamanne added a commit that referenced this issue Jan 24, 2020
This reverts commit 43d30fd.

For #3429
DonJayamanne added a commit that referenced this issue Jan 24, 2020
DonJayamanne added a commit that referenced this issue Jan 29, 2020
@NellyWhadsDev

This comment has been minimized.

Copy link

@NellyWhadsDev NellyWhadsDev commented Feb 10, 2020

Hey folks, just wondering if this is still targeted for the February release?

@rchiodo

This comment has been minimized.

Copy link

@rchiodo rchiodo commented Feb 10, 2020

No, sorry, it didn't make it in. Hopefully March.

@greazer

This comment has been minimized.

Copy link

@greazer greazer commented Feb 12, 2020

Couldn't fit this in February release due to unexpected complications supporting Custom Editors. For March, it's still iffy.

@greazer greazer changed the title Enable Jupyter widgets (aka ipywidgets) DS: Enable Jupyter widgets (aka ipywidgets) Feb 13, 2020
@stonebig stonebig mentioned this issue Feb 16, 2020
2 of 5 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants
You can’t perform that action at this time.