Plotly Dash - непонятное понимание функции extendData с составной полосой диаграммы

Я создал составную гистограмму в приложении тире, которое обновляет количество точек данных в трассировке в соответствии с вводом от ползунка, как показано:

Два разных состояния:

К сожалению, обновления изображения очень медленные (обратите внимание, что режим обновления - «перетаскивание», а не режим по умолчанию. Я хочу, чтобы ползунок действовал плавно при его перемещении. Я попытался реализовать обратный вызов на стороне клиента для обновления данных, как показано в этом сообщении: Plotly / Dash отображают данные в реальном времени в плавная анимация (спасибо emher за этот отличный ответ), но я не могу заставить ее работать (я чувствую, что очень сложно понять взаимодействие между входами / выходами без более сложных примеров, и я даже не уверен, что это лучшее решение или оно работает с моим типом сюжета). Я думаю, что это связано с несколькими вызовами go.Bar (), которые у меня есть в основном вызове go.Figure (), но я, честно говоря, не слишком уверен, и вам действительно сложно найти документацию с использованием функций обратного вызова extendData или на стороне клиента. Я прилагаю очень простой рабочий пример структуры моей pl ots - он не работает исключительно медленно, потому что объем данных невелик, но в идеале я хотел бы иметь полную плавную реакцию, когда пользователь перетаскивает ползунок. Я был бы очень признателен за некоторую помощь в том, чтобы здесь работали обратные вызовы на стороне клиента или любой другой метод, позволяющий использовать эту функцию вместо того, чтобы постоянно пинговать контейнер aws для повторного рендеринга. (Что касается JS, я не уверен, следует ли мне повторно отображать график в Plotly.js, или только обновлять данные, или как использовать dcc.Store со всем этим.) Спасибо за любые указания.

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


trace1 = [1, 2, 3, 2, 3, 4, 5, 2]
trace2 = [3, 4, 2, 5, 3, 1, 3, 2]

dates = [datetime.date(2019, 1, 1), datetime.date(2019, 1, 2), datetime.date(2019, 1, 3), datetime.date(2019, 1, 4), 
        datetime.date(2019, 1, 5), datetime.date(2019, 1, 6), datetime.date(2019, 1, 7), datetime.date(2019, 1, 8)]


def serve_layout():

    return html.Div(children=[
        
        dcc.Graph(id="bar-chart"),
        html.Div("   Select the starting date:"),
        html.Br(),
        html.Div(dcc.Slider(
            id='slider',
            min=0,
            max=len(dates) - 1,
            value=0,
            updatemode='drag'))
        ])

app = dash.Dash(__name__)

@app.callback(
    Output("bar-chart", "figure"),
    [Input("slider", "value")])
def update_bar_chart(day):
    
    fig = go.Figure(data=[
            go.Bar(name='Trace 1', x=dates[day:], y=trace1[day:], marker_color='blue'),
            go.Bar(name='Trace 2', x=dates[day:], y=trace2[day:], marker_color='red')])

    fig.update_layout({'barmode': 'stack'})
    
    return fig

app.layout = serve_layout

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