6.0.0 vs. 5.24.1 → go.FigureWidget → same syntax broken output in JN 7.3.2

[MichalRIcar]

Hi,

I am using plotly for the last 5 years with the same syntax without an issue to show graphs in Jupyter Notebook (JN).
However, new v6 has broken functionality of the go.FigureWidget while transiting to anywidgets.
On the other hand, any other graphs (flow generates thousands of them across plotly lib) seems to work OK.

The usecase is that go.FigureWidget is inside python's widgets HBox to show dynamically two graphs next to each other in JN 7.3.2.

Please let me know what other info would be needed.

The code snippet goes like this:

for T in self.TT:
 self.G[T] = go.FigureWidget(
 data = [
 go.Scatter(
 y = self.GRAPH[T][Feature.value],
 x = list(self.GRAPH[T].index),
 line=dict(width = 1, color = self.Exo_wg_Update(TH, URi[T])[1])
 )],
 layout = go.Layout(Glayout(T,0))
 )
...
G_Box = wg.HBox(list(self.G.values()), layout=wg.Layout(width='1050px',height='320px'))
...
display(G_Box)

Any version < 6 (e.g. 5.2.4) provides designed output:

Version 6 turns to (wrong size and no graph data is shown):

python packages versions:
notebook 7.3.2
ipywidgets 8.1.5
IPython 8.31.0
plotly 6.0.0
anywidget 0.9.13

[XstormLeigh]

My index won't align either under 6.0.0, tested on py3.11.11 this morning, switched back to 5.2.4. I think there is a bug in index session, not sure what it is.

[MarcoGorelli]

Hi @XstormLeigh and @MichalRIcar , thanks for reporting - any chance either of you could post a reproducible example please? That would make it much easier (and faster!) to resolve, thanks 🙏

[XstormLeigh]

@MarcoGorelli
Codes are identical.
I just couldn't think of anywhere that is relavent to such issue, probably shared_xaxes is bugged?

	fig_ = make_subplots(
		rows=3, cols=1,
		shared_xaxes=True,
		vertical_spacing=0.067,
		row_heights=[0.7, 0.12, 0.18],
		specs=[[{"secondary_y": False}],
		 [{"secondary_y": True}],
		 [{"secondary_y": True}]],
	)

produced by 5.24.1

produced by 6.0.0

[MarcoGorelli]

Sorry what's your data? If you post a complete reproducible examples which can be copied-and-pasted and run from top to bottom, this will be much easier to triage and resolve

Here's a post I usually recommend on making reproducible examples in bug reports: https://matthewrocklin.com/minimal-bug-reports.html

[MarcoGorelli]

Just to further belabour the point: I've tried coming up with some code to reproduce the issue

import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import numpy as np

date_rng = pd.date_range(start='2023-01-01', end='2023-01-10', freq='D')
y1 = np.random.randn(len(date_rng)).cumsum()
y2 = np.random.randn(len(date_rng)).cumsum()
fig = make_subplots(rows=2, cols=1, shared_xaxes=True, vertical_spacing=0.1,
 subplot_titles=("Time Series 1", "Time Series 2"))
fig.add_trace(go.Scatter(x=date_rng, y=y1, name="Series 1"), row=1, col=1)
fig.add_trace(go.Scatter(x=date_rng[1:], y=y2[1:], name="Series 1"), row=2, col=1)
fig.show()

but the plot looks fine:

Could you please try to create a little example like this one which reproduces the issue? This will help narrow down where the issue is (e.g. is it in shared_xaxes? In FigureWidget?)

[MichalRIcar]

Hi,

thank you @MarcoGorelli for such a prompt response.

Here is a brief code which reproduces the issue on my side.

Result from 6.0.0:

Result from 5.24.1:

Code:

import pandas as pd
import plotly.graph_objects as go
import ipywidgets as wg

def Glayout(T):
 return dict(title = GTitle(T), margin=margin, width=width, height=height)
 
def GTitle(T):
 Title = {
 'text': T + ' → ' + 'AAA',
 'y': 0.99, 'x': 0.1, 'xanchor': 'left', 'yanchor': 'top',
 'font': dict(family="Arial", size=12, color="black")
 }
 return Title

margin = {'t': 30,'l':50,'r':0,'b':0}
width = 520
height = 300


G = {}
TT = ['a','b']
R = range(20)
GRAPH ={ T: pd.DataFrame({'x':R}) for T in TT }

for T in TT:
 G[T] = go.FigureWidget(
 data = [
 go.Scatter(
 y = GRAPH[T]['x'],
 x = list(GRAPH[T].index),
 line=dict(width = 1) 
 )],
 layout = go.Layout(Glayout(T))
 )
G_Box = wg.HBox(list(G.values()), layout=wg.Layout(width='1050px',height='320px'))
display(G_Box)

python packages:
notebook 7.3.2
ipywidgets 8.1.5
IPython 8.31.0
plotly 6.0.0 and 5.24.1
anywidget 0.9.13

[MarcoGorelli]

Simpler reproducer:

import plotly.graph_objects as go
import ipywidgets as wg

figure_widget = go.FigureWidget(data = [go.Scatter(y = [1,2,3], x = [1,2,3])])
G_Box = wg.HBox([figure_widget])
display(G_Box)

Plotly pre-6.0:

Plotly 6.0:

[ParfaitG]

I may be facing a similar issue as OP with empty plots rendering in v6.0.0 which worked perfectly in prior releases though my use case is Plotly within a Flask app. See my issue #5045 with a reproducible example.

[jescalada]

Hi folks, I've been looking at this bug and noticed that it is most likely caused by the library's refactor to use anywidget internally instead of ipywidgets.

It seems that this PR may have affected the compatibility: #4823

Printing the figures directly works fine:

Wrapping them in the ipywidgets.Hbox causes the bug:

Are there any examples of how to generate a visual equivalent of an ipywidgets Hbox by using anywidget? Otherwise a fix for backward compatibility would be fantastic! 🙏🏼

[jescalada]

Calling display(fig1) beforehand will fix the broken view. I guess that anywidget is doing some lazy initialization, whereas ipywidgets was forcing a refresh when initializing the FigureWidget.

Workaround

I found a workaround that makes it work as expected on 6.0.0:

import plotly.graph_objects as go
import ipywidgets as wg
import anywidget
from IPython.display import display

fig1 = go.FigureWidget(data=[go.Scatter(y=[1,2,3])])
fig2 = go.FigureWidget(data=[go.Bar(y=[3, 2, 1])])

hidden_output = wg.Output()

with hidden_output:
 display(fig1)
 display(fig2)

G_Box = wg.HBox([fig1, fig2])
display(G_Box)

This will correctly show the figures in the HBox while hiding the display() calls to load the data correctly.

Possible Fixes

One possibility is that the widget traitlets are no longer automatically synchronized (source: #4823):

Notes

ipywidgets is not the only library with interop problems in v6. Integration with other well-known UI libraries seems to be affected as well: marimo-team/marimo#4091. Folks in our org have had issues with other tools relying on plotly as well.

Pinging @MarcoGorelli and @manzt for insights. Thank you!

[jescalada]

Hi folks, I believe I found a fix for the issue: Some variables were renamed and no longer initialized on FigureWidget creation. These variables are likely what third-party libraries are using to generate the view.

Feel free to check out the PR linked above in case it fixes your problems (I have only tested ipywidgets integration).