search

yWorks / yfiles-jupyter-graphs

The home of the Jupyter notebook graph visualization widget powered by yFiles for HTML
https://www.yworks.com/products/yfiles-graphs-for-jupyter
Other
173 stars 18 forks source link

Support Visual Studio Code as Notebook host #1

Closed yGuy closed 1 year ago

yGuy commented 2 years ago

Describe the bug The widget currently does not work in the Visual Studio Code environment.

To Reproduce Steps to reproduce the behavior:

  1. Open a notebook in Visual Studio Code and enable Notebook editing
  2. Install the plugin
  3. Try to run any of the examples
  4. On Windows you won't see anything - the widget is simply missing. On Mac, you might see an image saying that only localhost and 127.0.0.1 are supported

Expected behavior Ideally the widget would also work in Visual Studio Code which has superior code editing functionality.

Additional context Unfortunately the Visual Studio Code environment is not perfectly compatible to JupyterLab or JupyterNotebook. Specifically custom widgets do not work out-of-the box and custom steps are necessary. It's not perfectly clear what these steps are and whether it is feasible in the case of this plugin.

Plea for help If you can help us better understand how to properly implement this (and whether this is even feasible given the current VSC architecture), we'll be happy to add this useful feature.

yGuy commented 2 years ago

As far as I understand, Visual Studio creates headless browser instances using WebKitviews to render the widgets - in the Visual Studio Code editor only image-snapshots of the widgets are rendered. This is OK for static images, but does not work with a highly dynamic widget like this plugin. This plugin uses both SVG and WebGL(2) to render the graphs interactively at high framerates. With the image capturing approach, this does not seem feasible at all.

There also is this strange requirements to publish the widget as an NPM package so that it will be served from two predetermined CDNs (which can be configured in VSCode). I really don't understand why this should be necessary and can't be extracted from the main plugin. Any insights would be greatly appreciated.

References: https://github.com/jupyter-widgets/ipywidgets/issues/2512 https://github.com/microsoft/vscode-jupyter/issues/3767 https://github.com/jupyter-widgets/ipywidgets/blob/master/docs/source/embedding.md

fskpf commented 2 years ago

The Wiki pages of https://github.com/microsoft/vscode-jupyter also seem to contain some useful background information, e.g. Component: IPyWidgets or IPyWidget Support in VS Code Python.

Jim-Salmons commented 2 years ago

Rather than open a new issue, I have found that this great package suffers a similar gothca in PyCharm. After importing the library and instantiating a GraphWidget with a Networkx graph, running the cell returns the message "This notebook contains widget which is not supported by Intellij. See JavaScript logs for more info." A search for a relevant Javascript log was unsuccessful.

yGuy commented 2 years ago

Corresponding issue is on the JetBrains Bugtracker for the IntelliJ Issue. With VSCode, we might be able to solve this on our own, but without the help of JetBrains, this is going to be tough. So please also consider voting on the JetBrains issue.

fskpf commented 1 year ago

The widget should now work in VSCode.