Enhancement: Use python installed plotly.min.js instead of renderer.

[janosh]

Adding fig.update_layout(legend_groupclick="toggleitem") (as documented) to the grouped legend items example does not affect legend click behavior in VS Code. It does when opening the figure in a browser. This appears to be because VS Code Jupyter ships with an outdated version of plotly.js.

Posted earlier: plotly/plotly.py#3488
Related: #2648

import plotly.graph_objects as go


fig = go.Figure()

fig.add_trace(
    go.Scatter(
        x=[1, 2, 3],
        y=[2, 1, 3],
        legendgroup="group",  # this can be any string, not just "group"
        legendgrouptitle_text="First Group Title",
        name="first legend group",
        mode="markers",
        marker=dict(color="Crimson", size=10),
    )
)

fig.add_trace(
    go.Scatter(
        x=[1, 2, 3],
        y=[2, 2, 2],
        legendgroup="group",
        name="first legend group - average",
        mode="lines",
        line=dict(color="Crimson"),
    )
)

fig.add_trace(
    go.Scatter(
        x=[1, 2, 3],
        y=[4, 9, 2],
        legendgroup="group2",
        legendgrouptitle_text="Second Group Title",
        name="second legend group",
        mode="markers",
        marker=dict(color="MediumPurple", size=10),
    )
)

fig.add_trace(
    go.Scatter(
        x=[1, 2, 3],
        y=[5, 5, 5],
        legendgroup="group2",
        name="second legend group - average",
        mode="lines",
        line=dict(color="MediumPurple"),
    )
)

# No effect from this line
fig.update_layout(legend_groupclick="toggleitem")

[jackthepanisher]

If you want to stay within VS code, a possible workaround is to use a different renderer for Plotly. Only the default vscode renderer will use the old plotly.js but others will use the plotly.js from the installed Plotly Python package:

fig.show(renderer='notebook')

Alternatively, this can be set for all fig.show() calls:

import plotly.io as pio
pio.renderers.default = 'notebook'

I believe the https://github.com/microsoft/vscode-notebook-renderers is responsible for supplying the plotly.js that is used for the vscode renderer. Currently, that plotly.js is version 2.2.1 while the one from Plotly package 5.4.0 uses already version 2.6.3 of plotly.js.

[janosh]

Thanks for the help! fig.show(renderer='notebook') fixes the issue! Still a bummer that this doesn't work out of the box. There must be a better solution than bundling a really old plotly in the default renderer.

[janosh]

The fact that there's no error message makes this a particularly pernicious issue. Most users will first suspect their own code to be the problem, then think plotly doesn't work as advertised. I'd never have thought of the possibility that the version of plotly used might not be the one I installed.

[rchiodo]

We probably just need to get this to go through:
microsoft/vscode-notebook-renderers#78

[janosh]

@rchiodo Maybe there's a more permanent solution than manually updating deps? Is there still a reason not to use the user-installed plotly.js? Having a version mismatch between what users expect to be running and what VS Code Jupyter actually uses will always be a source for confusion.

[rchiodo]

@rchiodo Maybe there's a more permanent solution than manually updating deps? Is there still a reason not to use the user-installed plotly.js? Having a version mismatch between what users expect to be running and what VS Code Jupyter actually uses will always be a source for confusion.

I don't think we realized plotly.js could be installed in the user's environment. Are you talking about as a jupyter extension or is it included in the plotly python package? We'd have to investigate, but for widgets we couldn't use javascript from python packages because it doesn't work in VS code. It all depends upon what plotly does.

[janosh]

It all depends upon what plotly does.

@rchiodo In that case it might best to hear @nicolaskruchten's advice. There's a lot going on in plotly.py/setup.py which would take me a while to understand.

But plotly.py must come with its own version of plotly.js in some shape or form or else the fix suggested by @jackthepanisher of doing fig.show(renderer='notebook') at the end wouldn't suddenly let the legend_groupclick="toggleitem" work as expected. Considering how simple the fix is, I'd imagine it can't be hard for VS Code Jupyter to simply hand over to it and dispense with the bundled plotly.js.

[rchiodo]

fig.show(renderer='notebook') must inline the renderer into the output then. Yeah it does. Mime type that comes back is 'text/html' instead of 'application/vnd.plotly.v1+json'.

Might be easier for us to just force the renderer to be notebook than try to find the plotly.min.js file on disk and get the renderer to load that (it won't load js files from outside of the extension folder I believe)