figure as state out of sync

In this simple app from @emmanuelle, figure.layout.shapes doesn’t seem to be updated when figure is captured as State, meaning that we have to do all sorts of gymnastics with relayoutData to work with shapes.

@alexcjohnson can you help me figure out if this is something in dcc or if Plotly.js is doing something odd here, in which case help me translate this into a CodePen that @archmoj can use?

import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
from dash.dependencies import Input, Output, State
import dash
import json

app = dash.Dash(__name__)

fig = go.Figure().update_layout(dragmode='drawrect')

app.layout = html.Div([
    dcc.Graph(id='graph', figure=fig),
    html.Pre(id='annotations-data'),
])

@app.callback(
    Output('annotations-data', 'children'),
    [Input("graph", "relayoutData")],
    [State("graph", "figure")]
)
def on_new_annotation(relayout_data, fig):
    return json.dumps(go.Figure(fig).layout.shapes, indent=2)

app.run_server(debug=True)

[emmanuelle]

@almarklein, @nicolaskruchten mentioned that https://github.com/plotly/dash-core-components/issues/584 targets the same piece of the dcc code so that it could be interesting to target the two issues together.

[dellacortelab]

I am running into related issues with a callback that Outputs a figure and loads the figure from a State. Many of deeper attributes, like line_colors of traces or _grid_ref are set to None in the figure dictionary received from State.

I had to use various hacks, like creating empty figures with subplot grids or storing color information in store objects and adding them back in annoying for-loops over the traces.

Is it somehow possible to return a “deep dictionary” of a figure that retains attributes currently lost?

I am using Dash 2.5.0.