Clientside_callback doesn't update dcc.Graph

Dash Python
1

Hi guys. I have the problem with clientside_callback. clientside_callback doesn’t update dcc.Grpaph. There is a dcc.Store, which get data from the graph.

app.clientside_callback(
    """
    function(slider_smooth, log_data) {
        console.log(slider_smooth)
        if(log_data?.data === undefined) {
            return {'data': [], 'layout': {}};
        } 
        let count = 0;
        let prevA = 0;
        let prevF = 0;
        let newF = 0;
        let alfa = slider_smooth
        for(i=0; i < log_data.data[1].y.length; i++) {
            if(log_data.data[1].y[i] == null) {
                continue;
            } else {
                if (count == 0) {
                    prevA = log_data.data[1].y[i];
                    prevF = log_data.data[1].y[i];
                    newF = log_data.data[1].y[i];
                }  else {
                    newF = prevF + alfa * (prevA - prevF);
                    prevF = newF;
                    prevA = log_data.data[1].y[i];
                    log_data.data[1].y[i] = newF;
                    console.log(newF)
                }
                count++;
            }
        }
        
        const newObject = Object.assign({}, log_data);
  
        return newObject
    }
    """,
    Output('log_graph', 'figure'),
    Input('slider_smooth', 'value'),
    Input('clientside_log_store', 'data')
)

dcc.Store(id='clientside_log_store'),
dcc.Graph(id="log_graph",
                                config={
                                    "modeBarButtonsToAdd": [
                                        "drawline",
                                        "drawcircle",
                                        "drawrect",
                                        "eraseshape",
                                    ],
                                    "editable": True,
                                    "watermark": False
                                },
                                figure={
                                    "layout": {
                                        "title": "dP/dg",
                                        "height": 700,  # px
                                        "width": 1800
                                    },
                                },

                                style={
                                    'width': '90vh'
                                }
                            ),

                     dcc.Slider(
                            id='slider_smooth',
                            step=None,
                            value=0.1,
                            marks={
                                0.001: {'label': '0.001', 'style': {'color': '#77b0b1'}},
                                0.005: {'label': '0.005'},
                                0.01: {'label': '0.01'},
                                0.05: {'label': '0.05'},
                                0.1: {'label': '0.1'},
                                0.2: {'label': '0.2'},
                                0.3: {'label': '0.3'},
                                0.4: {'label': '0.4'},
                                0.5: {'label': '0.5'},
                                0.6: {'label': '0.6'},
                                0.7: {'label': '0.7'},
                                0.8: {'label': '0.8'},
                                0.9: {'label': '0.9'},
                                1: {'label': '1', 'style': {'color': '#f50'}},
                            },
                            min=0.001,
                            max=1,
                            included=False
                        ),
2

Could you share how your dcc.Store data gets updated?

3

Hi. Yes.

@app.callback(
        Output('clientside_log_store', 'data'),
    [
        Input("graphsAnalysis", "value"),
    ]
)

def log_report(graph_id):
    if graph_id == 'log_log':
        loglog = LogLog.LogLog()
        log_pnet = loglog.get_pnet(create_report_cri)
        log_data = loglog.get_d()

        fig_log = make_subplots(specs=[[{"secondary_y": True}]])

        fig_log.add_trace(
            go.Scatter(x=log_pnet['DIFF'], y=log_pnet['PRESS'], name="Pressure delta", mode='lines+markers')
        )

        new_index = list(range(0, log_data.index.max()+1))

        log_data = log_data.reindex(new_index, fill_value=None)

        fig_log.add_trace(
            go.Scatter(x=log_data['DIFF'], y=log_data['D'], name="Derivative", mode='lines')
        )

        FIGURE_LOG = Fig.FigGraph()
        FIGURE_LOG.get(fig_log)
        FIGURE_LOG.update_axes_name("P, atm.")
        fig_log = FIGURE_LOG.get_fig()
        fig_log.update_xaxes(type="log")
        fig_log.update_yaxes(type="log")

        fig_log.add_annotation(
            x=0, y=2, xref="x", yref="y",
            text="Radial flow start:",
            showarrow=False,
            font=dict(family="Courier New, monospace", size=16, color="#ffffff"),
            align="left", ax=10, ay=50,
            bordercolor="#c7c7c7", borderwidth=2, borderpad=4,
            bgcolor="#ff7f0e", opacity=0.8
        )

        return fig_log
    return dash.no_update
4

Thanks! Sorry for the delay in reaching out again… Have you solved it already?

If not, would you be able to share if there are errors popping up in the browser console?

5

I solved this problem, but I am getting an warning “Circular Dependencies” now.
Error: Dependency Cycle Found: graphsAnalysis.value → clientside_log_store.data → log_graph.figure → clientside_log_store.data

1 Like
6

Glad to hear! I am not sure why you are getting this warning, it doesn’t look like log_graph.figure → clientside_log_store.data happens in your app. It might be a false warning…

1 Like
7

I solved my problem, but I cannot send my code. The problem was simple, but I had problems with the architecture. Thank you for your help.