I’m using Ubuntu 20.04, Chrome 111.0.5563.64 and the following:
dash==2.7.1
dash-core-components==2.0.0
dash-daq==0.5.0
dash-extensions==0.1.10
dash-html-components==2.0.0
dash-mantine-components==0.11.1
dash-table==5.0.0
Description
I’m working on a tool right now that displays network graphs in Dash.
I have noticed, that whenever I tried to update the dcc.Graph some of the lines from the previous figure remained on screen,
and they also follow your viewport unlike the rest of the figure.
Minimal reproducible example
First I import all things necessary and create an app with a button and a graph on screen:
from typing import Iterable, Optional
import numpy as np
import plotly.graph_objects as go
from dash import Dash, Input, Output, dcc, html
app = Dash()
app.layout = html.Div(
[
html.Button(id=“button”, children=“Click me!”, n_clicks=0),
dcc.Graph(
id=“figure”,
style={“flex”: 1},
),
],
style={
“display”: “flex”,
“position”: “fixed”,
“width”: “100%”,
“height”: “100%”,
},
)
I have a function that produces positions with lines in accordance with the network graph guide. For simplicity’s sake I just connect all nodes in the graph.
It takes either the x or y positions of the nodes and then returns the x or y positions of the edges.
def edge_pos(pos: Iterable[float]) → list[Optional[float]]:
res =
for start_pos in pos:
for end_pos in pos:
res.extend([start_pos, end_pos, None])
return res
Then I declare a callback that draws a new random network whenever the button is clicked.
@app.callback(Output(“figure”, “figure”), Input(“button”, “n_clicks”))
def update_fig(_: int) → go.Figure:
# Randomly generate points from a standard normal
x, y = np.random.normal(0, 1, size=(2, 5))
# Create the trace for nodes
node_trace = go.Scatter(x=x, y=y, mode=“markers”)
# Create a trace of lines connecting them
edge_trace = go.Scatter(x=edge_pos(x), y=edge_pos(y), mode=“lines”)
fig = go.Figure(
data=[edge_trace, node_trace],
)
return fig
And launch the app when the script is run:
if name == “main”:
app.run_server(debug=True)
If I run the app, and then click the button to generate new plots, some of the edges from previous figures stay on screen but they don’t get smaller when zooming out and they follow you when you pan.
If I turn the trace off and on again they disappear, but then if I pan again they reappear.
I checked and this behavior does not occur when I just .show() on the figure produced by the callback, so it’s exclusive to dcc.Graph.
Furthermore if I download the figure as png these additional lines are not visible.
Expected Behavior
Everything that was previously on the graph should be cleared before the new graph is displayed.
