How to reset animation setting while choosing different animation styles/data

Dash Python
1

In the second animation example of this on the above page, I’m experiencing some problems.
For example - (You can check them too in the sample code of this website)

  1. If you play the animation and select the Bar type of animation (Scatter deafult), The graph does not render correctly. This works fine if you pause the animation before toggling to a new style of animation.
  2. If you pause when the slider is in the middle, and then play another style of animation, the slider automatically moves to the middle, instead of starting from the start.

In my code, I’ve tried to reset the entire layout and frames section for the graph.figure but it did not give me any desired results.

Here I’m sharing my code with the default graph setting in the graph dictionary object, and a callback to change the frames of any selected graph.

graph = {
  'data': [{'name': 'qwe', 'line':{'simplify':False}},{'name': 'zxc', 'line':{'simplify':False}},{'name': '', 'line':{'simplify':False}},{'name': '', 'line':{'simplify':False}},{'line':{'simplify':False}}],
              # {'line':{'simplify':False}},{'line':{'simplify':False}},{'line':{'simplify':False}},{'line':{'simplify':False}},{'line':{'simplify':False}}],
  'layout': {
    'title': {'text': 'Empty graph'},
    'xaxis':{"title": "Nodes"},
    'yaxis':{},
    'height': 700,
    # 'margin':dict(r=0, l=0),
    'sliders': [{"x": 0.01, "y":-0.02,"steps": [],"activebgcolor":"#2D6BCF", "currentvalue": { "font": {"size": 10}, "prefix": "Time: ", "visible": True,}}],
    'updatemenus': [{'direction': 'left','type': 'buttons','x': 0,'y': -0.1,'buttons': [
            {'args':  [None, {"frame": {"duration": 50, "redraw": False}, "fromcurrent": True, 
                "transition": {"duration": 0,"easing":'linear'}}], 'label': 'Play', 'method': 'animate'},
            {'args':  [[None], {'mode': 'immediate'}],'label': 'Pause', 'method': 'animate'}]}]},
  'frames': [],
}

@app.callback(Output({'type':'graph-2','index':MATCH}, 'figure'),
              Input({'type':'search-btn','index':MATCH}, 'n_clicks'),
              [State({'type':'n-signal-selector','index':MATCH}, 'value'), State('hdf-filename', 'value')],
              prevent_initial_call = True)
def graph_2(clicked, inputs, f5_file):
  graph2=graph.copy()
  if len(inputs) == 0: return graph2

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#just some code for data preparation and creating a few variables.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 for t_idx, time in enumerate(tset):
    steps.append(
      {'args': [
        [t_idx], 
        { "frame": {"redraw": False}, "mode": "immediate", "transition": {"duration": 0} }],
      "label": str(time),
      "method": "animate"}
    )
    frame_list.append({ 'name': t_idx, 
    'data': [{  
              'name': names[idx],
              'y': data[:, t_idx]} 
              for idx, data in enumerate(frames)
    ]})

  graph2["frames"] = frame_list
  graph2["layout"]["sliders"][0]["steps"] = steps
  graph2["layout"]["yaxis"] = {'title': {'text': f'{y_label}'}, 'range': [minval, maxval]}
  graph2["layout"]["xaxis"] = {"title": 'Nodes', 'range': [0,maxnodes-1]}

  toc = timer.perf_counter() 
  # print(f'time node-signal plot: {round((toc-tic)*1000)}')
  return graph2

I’m pretty sure that the data type of the variables used in the layout are correct and work fine. They only create problems if I select another graph before pausing the current animation.
What would you suggest to mitigate this animation issue?