Как в DASH изменять диапазон абсциссы без сброса при мониторинге через dash_core_components.Interval?

Question

[Данил Самодуров]

Голову сломал, но так и не смог понять, как заставить DASH сохранять устанавливаемые мной пределы абсциссы через Range Selector Buttons при построении графика в реальном времени через dash_core_components.Interval. В идеале бы понять, как сохранять пределы при простом зумировании графика. Ниже код из примера со страницы https://dash.plotly.com/live-updates немного мной доработанный:

import datetime
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly
from dash.dependencies import Input, Output

# pip install pyorbital
from pyorbital.orbital import Orbital

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(
    html.Div([
        html.H4('TERRA Satellite Live Feed'),
        html.Div(id='live-update-text'),
        dcc.Graph(id='live-update-graph'),
        dcc.Interval(
            id='interval-component',
            interval=1*1000, # in milliseconds
            n_intervals=0
        )
    ])
)

@app.callback(Output('live-update-text', 'children'),
              [Input('interval-component', 'n_intervals')])
def update_metrics(n):
    satellite = Orbital('TERRA')
    lon, lat, alt = satellite.get_lonlatalt(datetime.datetime.now())
    style = {'padding': '5px', 'fontSize': '16px'}
    return [
        html.Span('Altitude: {0:0.2f}'.format(alt), style=style)
    ]

# Multiple components can update everytime interval gets fired.
@app.callback(Output('live-update-graph', 'figure'),
              [Input('interval-component', 'n_intervals')])
def update_graph_live(n):
    satellite = Orbital('TERRA')
    data = {
        'time': [],
        'Altitude': []
    }

    # Collect some data
    for i in range(180):
        time = datetime.datetime.now() - datetime.timedelta(seconds=i*20)
        lon, lat, alt = satellite.get_lonlatalt(
            time
        )        
        data['Altitude'].append(alt)
        data['time'].append(time)

    # Create the graph with subplots
    fig = plotly.tools.make_subplots(rows=1, cols=1, vertical_spacing=0.2)
    fig['layout']['margin'] = {
        'l': 30, 'r': 10, 'b': 30, 't': 10
    }
    fig['layout']['legend'] = {'x': 0, 'y': 1, 'xanchor': 'left'}
    fig.append_trace({
        'x': data['time'],
        'y': data['Altitude'],
        'name': 'Altitude',
        'mode': 'lines+markers',
        'type': 'scatter'
    }, 1, 1)
    fig.update_xaxes(
        rangeslider_visible=False,
        rangeselector=dict(
            buttons=list([
                dict(count=10, label="10m", step="minute", stepmode="backward"),
                dict(count=0.5, label="30m", step="hour", stepmode="backward"),
                dict(step="all")
            ])
        )
    )

    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

Поясняю: при нажатии на кнопки 10М или 30М, означающие 10 и 30 минут, соответсвенно, пределы абсциссы меняются, но только на секунду, до следующего обновления графика. Мне нужно, чтобы пределы абсциссы не сбрасывались. как это сделать?

Answer 1

[paparazi]

Прокиньте параметр uirevision в update_xaxes как то так:

fig.update_xaxes(
        rangeslider_visible = False,
        uirevision = '*time*',
        rangeselector = dict(
            buttons = list( [
                dict( count = 10, label = "10m", step = "minute", stepmode = "backward" ),
                dict( count = 0.5, label = "30m", step = "hour", stepmode = "backward" ),
                dict( step = "all" )
            ] )
        )
    )

Он используется, чтобы взаимодействие пользователя с графиком сохранялось после вызовов `Plotly.react`, и описан в документации к Figure layout
P.S. Лучше поздно, чем никогда. Возможно кому-то поможет)