✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

How to Implement RESET button for GRAPH

I have a case where i was saving the data in the hidden div tag and when the div is changed, i am updating the graph. I have four graphs in the page, on clicking one graph, remaining three graphs will update accordingly.

I am maintaining the color column in every data frame and passing the column of data frame to the marker.color. so that the graph will get updated with the specified color for highlighting the bar.

After few selections of graphs i want to reset the graph to the default state by clearing the hidden div data.

Please help me… :slight_smile:

I do not know your current implementation, but I am guessing you have a callback assigned to an Input dependency from the hidden Div's children and an Output dependency of the graphs children, maybe also passing the data through a state or both colors and data are in the same hidden Div.

To illustrate the flow, if the above is correct, you have: Some click/interval [Input]->Callback is triggered-> [Output] Hidden div changes [Input] -> Callback is triggered -> [Output] Graph object changes in figure.
Since currently there is no support for multiple callbacks with single output (that b.t.w can be added with a simple 5-lined patch which, I will upload a post soon/contribute)__, you can’t output to the same Div and change the color selection in the JSONified data on the page. That means, you cannot access the same hidden Div or Figure to change its content, if you already assigned a different callback to the outputs.

Having said that, I suggest:

Think of another way you can update your figure without connecting two different flow chains to the same output element, from the UI design perspective. You can do the follows: Split the data and the colors to two different divs. Data will be injected from the same source you already do. The colors will be changed using a small panel you can add, with an update button. Then, use the two different Divs (one is the data and the other is the colow) as Input events that trigger a callback that update the graph (you can have multiple inputs that trigger the same output).

** I hope to upload the hack as a post here. I prefer “correct” implementations but I’m having trouble with
the bundle.js, specifically the part that handles the dependency injection through the _dash-dependencies access point.

@mrmr Thanks for the reply. I implemented almost the same.

When i clicking the button, I am saving the n_clicks_timestamp value in a hidden div tag. and passing the reset_btn timestamp as input and hidden div timestamp as state. with the both variables able to know whether the reset btn is clicked or not.

Nice hack. I have once implemented RSS with the same output canvas (multiple click buttons) and ended up saving n_clicks for every session ID with timeouts. The current implementation of this dashboard (it was POC) is using a modified version of the dash package when I added a workaround to inject a UID for every output element and used it to identify which callback should be triggered.