Component with memory that increment

Hello Dash communauty,
It may seem a silly question but I m not a pro in Dash.
I would like to label my data and for this, I have to Browse over all my data set. As you can see in the figure below I have two buttons that are supposed to increment/decrement the Time stamp by 10 minutes. It’s not working :(.
I tried to use the timestamp as state and output but it didn’t work. I think the problem here is that the timestamp is an input and an output at the same time.

image_2020-12-02_1740351128×706 86.6 KB

def Dash(signal_type,
         sensor,
         staring_date,
         port,project_db,
         data_root ,
         location ):
    app = JupyterDash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])
    app.layout = html.Div([
          dbc.Row(
            dbc.Col(

                html.H1(children='Signal Labeling of '+str(signal_type), style = {'textAlign': 'center'}),
                width={'size':12, 'offset':0},
            ),
        ),
        dbc.Row([
            dbc.Col(
                dbc.Button(
                    'Previous Timestamp', id='previous', style=dict(width='100%', display='inline-block'), n_clicks=0),
                width=4
            ),
            dbc.Col(
                html.Div(
                     [staring_date],id='timestamp', style=dict(width='100%', display='inline-block')),
                width=4
            ),
            dbc.Col(
                dbc.Button(
                    'Next Timestamp', id='next', style=dict(width='100%', display='inline-block'), n_clicks=0
                ),
                width=4
            ),
        ]),
        dbc.Row([
            dbc.Col(
                dcc.Graph(id='graph'),
                width=10
            )
        ]),
        dbc.Row([
            dbc.Col(
                dcc.RangeSlider(
                    id='BoundaryEvent1',
                    min=0,
                    max=600,
                    step=1,
                    value=[0,600]
                ),
                width=10
            ),
            dbc.Col(
                dbc.Button(
                    'Event1', id='Event1', style=dict(width='100%', display='inline-block'), n_clicks=0
                ),
                width=2
            )
        ]),
        dbc.Row([
            dbc.Col(
                dcc.RangeSlider(
                    id='BoundaryEvent2',
                    min=0,
                    max=600,
                    step=1,
                    value=[0, 600]
                ),
                width=10
            ),
            dbc.Col(
                dbc.Button(
                    'Event2', id='Event2', style=dict(width='100%', display='inline-block'), n_clicks=0
                ),
                width=2
            )
        ])
        ]
    )
    @app.callback(
        Output('graph','figure'),
        [Input('previous','n_clicks'),
         Input('next','n_clicks'),
         Input('timestamp','children')])
    def display_graph(previous,next,dt):
        print('I m triggered')
        dt=dt[0]
        dt = datetime.datetime.strptime(dt[:19], '%Y-%m-%dT%H:%M:%S')
        dt = dt.replace(tzinfo=utc)

        ctx = dash.callback_context

        triggered_id = ctx.triggered[0]['prop_id'].split('.')[0]
        print(triggered_id)
        if triggered_id == 'previous':
            dt=dt-datetime.timedelta(minutes=10)
        elif triggered_id == 'next':
            dt = dt + datetime.timedelta(minutes=10)

        signal = dw.getTDMS(dt,signal_type , location, root=data_root, duration=1, database=project_db)
        data, layout = signal[sensor].plotly()
        fig = go.Figure(data=data, layout=layout)


        # time=list(signal.as_df(style='timeseries')[sensor].index)
        # Yvalue=list(signal.as_df(style='timeseries')[sensor].values)
        # fig=go.Figure([go.Scatter(
        #     x=time,
        #     y=Yvalue
        # )])
        return fig
    app.run_server(mode='inline', port=port)

1 post - 1 participant

Read full topic