Pausing dcc.interval while off canvas is open

Dash Python
,
#1

Hello! I am trying to pause live updates (with dcc.interval) when my off canvas is open. I would like the interval to be enabled when the canvas is closed/clicked out of. Here is the callback I have so far:

##toggle timeline config offcanvas
@app.callback(
    Output(component_id="offcanvas-timeline", component_property="is_open"),
    Output(component_id='interval-component',component_property= 'disabled'),
    Output(component_id='open-offcanvas-timeline',component_property= 'n_clicks'),
    Input(component_id="open-offcanvas-timeline", component_property="n_clicks"),
    State(component_id="offcanvas-timeline", component_property="is_open"),
)
def toggle_offcanvas_scrollable_timeline(n1, is_open):
    if n1 == 1:
        return True, True, None
    return False, False, None

On page load, the dcc.interval is working and it does pause when I open the canvas. However, it does not restart after I close the canvas. I am trying to reset the number of clicks, but something is off.

#2

Not sure if this is the best way to do it… but I was able to solve the problem by breaking this into 2 callbacks:

@app.callback(
    Output(component_id="offcanvas-timeline", component_property="is_open"),
    Output(component_id='open-offcanvas-timeline',component_property= 'n_clicks'),
    Input(component_id="open-offcanvas-timeline", component_property="n_clicks"),
    State(component_id="offcanvas-timeline", component_property="is_open"),
)
def toggle_offcanvas_scrollable_timeline(n1, is_open):
    if n1 == 1:
        return True, None
    return False, None

@app.callback(
    Output(component_id='interval-component',component_property= 'disabled'),
    Input(component_id="offcanvas-timeline", component_property="is_open")
)
def toggle_offcanvas_interval(is_open):
    if is_open == True:
        return True
    return False
#3

I personally think this is the proper way to do it, but possibly not the best. I think it’s best practice to keep each callback focused on doing a single function.