Switch to use anywidget

[marthacryan]

Co-authored by @manzt! This updates the logic for the FigureWidget to rely on anywidget.
A quote about anywidget from the documentation for context:

anywidget is both a specification and toolset for authoring reusable web-based widgets for interactive computing environments. As a specification, it defines a standard for widget front-end code. As a toolkit, it provides tools for authoring widget front-end code according to the specification, as well as a Python library that simplifies creating and publishing custom Jupyter Widgets.

How to test

Create a python environment.

cd packages/python/plotly/js
npm i && npm run build
cd ..
pip install -e .
pip install jupyter anywidget
jupyter lab

Docs on how to use FigureWidget: https://plotly.com/python/figurewidget/

More context

This will not affect the go.Figure class. High level explanation of the difference between using go.Figure and go.FigureWidget:

• go.Figure: The chart generated by this object will be interactive on the client side. For many purposes, this is all a user needs to do with a chart. The interactions are things like zooming in, or any of the various operations in the toolbar.
• go.FigureWidget: The difference here is that the figure is interactive on the server side as well.
  • Interactions with the plotly chart can be sent to the python kernel and used in other widgets.
  • Interactions with other widgets can be used to control the chart

Some info about the code changes:

• This changes our requirement for using jupyter widgets from ipywidgets to anywidget. The majority of the files changed in this PR are only changing that.
• This adds a folder into packages/python/plotly called js, which contains:
  • package.json: A very small amount of dependencies and scripts to build bundle.js
  • widget.ts: The code used by jupyter to render and interact with the widget. This is transpiled into packages/python/plotly/plotly/bundle.js and referenced from basewidget.py.
  • tsconfig.json: Configurations for transpiling widget.ts.

[ndrezn]

FYI @marthacryan when I install from the build files in CI nothing renders. Does MANIFEST.in need to be updated?

[marthacryan]

@ndrezn Which CI artifact are you using? And could you give me more info on the steps you took to install? I'm not able to reproduce

[emilykl]

@marthacryan I followed your steps for testing locally and the FigureWidget seems to be working properly!

• I also tested that the warnings for jupyterlab<3 and notebook<7 are showing up:

[emilykl]

🚀

At least one more reviewer would be ideal since I'm not a frequent Jupyter Notebook user, but looks great to me.

[alexcjohnson]

IDK how this would happen in practice, but in principle .parent() can return None which would make this fail. In that case I guess we aren't in a jupyter context so we can short-circuit the rest of this.

[marthacryan]

I added some code to address this! Let me know if you think there's a better approach than a try/except

[alexcjohnson]

Can we move the optional_imports.get_module calls inside these conditionals? Something like:

if "jupyter-notebook" in parent_process:
    jupyter_notebook = optional_imports.get_module("notebook")
    if jupyter_notebook.__version__ < "7":

and similar for jupyterlab. Those imports can be slow (particularly jupyterlab, it's nearly a second on my computer), no need to increase everyone's startup time (for example Dash apps). And calling optional_imports.get_module on an already-loaded module or a nonexistent module you've previously asked for is very fast.

I wonder about the existing optional import calls in _renderers.py as well - looks like IPython and IPython.display are automatically imported when you're in an IPython or jupyter environment, so I bet we could just add should_load=False to those calls. nbformat is not automatically loaded, so it would need to move into the show method where it's called, like I'm suggesting here.

[marthacryan]

Good point! I moved them into the if statements. I'm not sure about the other optional calls in that file but I can make an issue to investigate that more

[marthacryan]

Just made this issue: #4856

[manzt]

Just had a chance to read the blog post, congrats on the pre-release! I have a quick question about this part:

"The other big change in Plotly.py 6.0 is that we are dropping support for Jupyter Notebook versions before 7.0, which allows us to support the AnyWidget standard for notebook extensions."

This language suggests this incompatibility is due to anywidget. However, anywidget should be compatible with at least Jupyter Notebook v6, so just wanted to clarify. Is there some API that is missing that the FigureWidget required?

Steps to reproduce with uv (via juv).

uvx juv init example.ipynb
uvx juv add example.ipynb anywidget==0.9.13 plotly==6.0.0rc0
uvx juv run --jupyter=notebook@6 example.ipynb

import plotly.graph_objects as go

f = go.FigureWidget()
f
# Warning: Plotly version >= 6 requires Jupyter Notebook >= 7 but you have 6.0.0 installed.

import anywidget
import traitlets

class CounterWidget(anywidget.AnyWidget):
    _esm = """
    function render({ model, el }) {
      let count = () => model.get("value");
      let btn = document.createElement("button");
      btn.innerHTML = `count is ${count()}`;
      btn.addEventListener("click", () => {
        model.set("value", count() + 1);
        model.save_changes();
      });
      model.on("change:value", () => {
        btn.innerHTML = `count is ${count()}`;
      });
      el.appendChild(btn);
    }
    export default { render };
    """
    value = traitlets.Int(0).tag(sync=True)
    
CounterWidget() # shows button

[ndrezn]

Hey @manzt, that's a mistake in the blog post. We're dropping support for <7.0 primarily because it simplifies our build and release process; it is unrelated to AnyWidget. I'll make sure that gets corrected -- thanks for taking the time to deep dive on this & apologies for that error!