Using plotly-resampler with dashapp?

[k-a-mendoza]

I'm having some issues when rendering this figure with dashapp.

Firstly, I make a dashapp with the following controls:

controls = [
            dcc.Graph(
                id='uptime-graph',
               ''' some additional styling"""
                }
            ),
            dcc.Graph(
                id='timeseries-graph',
                figure={
                    'data': []
                    
                }
            )
        ]

I'm using an uptime graph to select specific trace segments I want to look at. then, I update 'timeseries-graph' with a callback upon selection within the uptime graph:

def update_timeseries(relayoutData):
    if new_coords is None or 'autosize' in new_coords.keys() or 'xaxis.autorange' \
        in new_coords.keys():
            return None
    start = new_coords['xaxis.range[0]']
    end   = new_coords['xaxis.range[1]']
    dict_frame = self.model.get_timeseries(start,end)
    n_titles, plotting_dict = self._restructure_data(dict_frame)

    fig = FigureResampler(
                        make_subplots(
                            rows=len(plotting_dict.keys()),
                            cols=1,
                            row_titles=n_titles,
                            vertical_spacing=0.001,
                            shared_xaxes=True),
                            default_n_shown_samples=5_000,
                                verbose=False,
                    )
    fig['layout'].update(height=1700)
    row_iterator = 1
    has_legend = {'ex':False,'ey':False,'hx':False,'hy':False,'hz':False}
    for station_key in plotting_dict.keys():
        for trace_data in plotting_dict[station_key]:
            color = self._get_trace_color(station_key)
            name, showlegend =self._legend_name_parser(has_legend,station_key)
            fig.add_trace(go.Scattergl(name=name, showlegend=showlegend,connectgaps=False,
                                                   line={'color':color,'dash':'solid'}), 
                            hf_x=trace_data.time, hf_y=trace_data['value'],row=row_iterator,col=1)
        row_iterator+=1
    print('updated timeseries figure')
    fig.show_dash(mode='inline')
    return fig


@dashapp.callback(
    Output('timeseries-graph', 'figure'),
    Input('uptime-graph', 'relayoutData'))
def uptime_data_select(relayoutData):
    fig = controller.update_timeseries_daterange(relayoutData)
    return fig

It kinda works, then begins to spit the same error every four seconds, preventing any further interaction with the webapp

Traceback (most recent call last):
  File "/Users/.../miniconda3/envs/mtpytest/lib/python3.9/site-packages/flask/app.py", line 2077, in wsgi_app
    response = self.full_dispatch_request()
  File "/Users.../miniconda3/envs/mtpytest/lib/python3.9/site-packages/flask/app.py", line 1525, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "/Users/.../miniconda3/envs/mtpytest/lib/python3.9/site-packages/flask/app.py", line 1523, in full_dispatch_request
    rv = self.dispatch_request()
  File "/Users/.../miniconda3/envs/mtpytest/lib/python3.9/site-packages/flask/app.py", line 1509, in dispatch_request
    return self.ensure_sync(self.view_functions[rule.endpoint])(**req.view_args)
  File "/Users/.../miniconda3/envs/mtpytest/lib/python3.9/site-packages/dash/dash.py", line 1382, in dispatch
    raise KeyError(msg.format(output)) from missing_callback_function
KeyError: "Callback function not found for output 'timeseries-graph.figure', perhaps you forgot to prepend the '@'?"
2022-05-11T15:10:10 [line 1455] local_app.log_exception - ERROR: Exception on /_dash-update-component [POST]
Traceback (most recent call last):
  File "/Users/kevinmendoza/miniconda3/envs/mtpytest/lib/python3.9/site-packages/dash/dash.py", line 1344, in dispatch
    cb = self.callback_map[output]
KeyError: 'timeseries-graph.figure'

I suppose its possible i'm not using it correctly, but if I am, there appears to be an error with resampling hooking back into the graph.

[jonasvdd]

Hi @k-a-mendoza,

I suggest you first look thoroughly at our dash-app examples and read the docs about dash-app integration to increase your understanding of plotly-resampler!

As you provided an interesting use-case; i.e. detailed & course grained graph, I will make an example within the dash-app examples folder from this repo somewhere later this week.

Keep you posted!

[jonasvdd]

Hi @k-a-mendoza,

I created your example https://github.com/predict-idlab/plotly-resampler/blob/figurewidget/examples/dash_apps/dash_app_course_fine.py

[jonasvdd]

In my honest opinion, you should be able to create such an example from reading the docs and having an proper understanding of plotly. If something was not clear in the docs. Please let me know, so I can try to improve this! 😃

[k-a-mendoza]

@jonasvdd Nah its probably my bad. I needed to get familiar and use plotly for a non-typical use-case within like a week for science collection purposes. I'm coming from a primarily oop matplotlib and xarray/numpy datastructures background so there's a lot thats new to me.

[jonasvdd]

@k-a-mendoza, no problem at all. I love doing stuff for the community and enabling others! Certainly on my birthday (today) 🎉

Please, let me know if something still is unclear! 😃

Best regards,
Jonas

[k-a-mendoza]

@jonasvdd Well happy Birthday! I'll be sure to link to this repo once I get this dashboard up and running. (Hm, I should also star this repo too!)

[k-a-mendoza]

@jonasvdd one question, Why the sharedxaxis = False? Is it just for your example or to prevent changes propagating from zooming in the dynamic graph to the static graph? In my case I need my resampled traces to all maintain the same x axis range upon zoom

[k-a-mendoza]

@jonasvdd There also appears to be a bug with the example. the callback_helper import file has an import dependency functionals that i can't seem to find a definition for anywhere.

[jonasvdd]

Hi @k-a-mendoza,

I just copied the dash-app example and made it suitable for your use case. So a lot of code still is irrelevant. I will further clean up this example somewhere later this week. I suppose that the functionals you mention comes from the pyfunctional library.

Hope this helps

[jonasvdd]

@k-a-mendoza, Your requested dash-app example now is available on the main branch of this repository, so I will close this issue for now! 😄