Ошибка при развертывании информационной панели визуализации тире на AWS Elastic Beanstalk

Question

Я создал два отдельных веб-приложения Dash и интегрировал их в одно, создав вкладки. Я легко вижу визуализацию на локальном хосте, но сталкиваюсь с проблемой при загрузке кода. Вторая вкладка состоит из выпадающих меню. После загрузки кода в AWS раскрывающееся меню не отображается.

Вывод на локальный хост

Выход на AWS

Журналы Jupyter для ноутбуков.

Вот код.

app.layout = html.Div([
    html.H1('Smoothie Fixed Benefit Prices'),
    html.P("These prices are common for all routes in India."),
    html.P("Peak months are:-Jan,June, July, August, November, December."),
    html.P("Peak Hours ( During Peak Months ):-9 A.M. to Midnight"),
    html.P("Peak Hours ( During Non Peak Months ):-12 P.M. - 12 A.M."),
    html.H3('Select Airline'),
    dcc.Dropdown(
        id='datasource-1',
        options=[
            {'label': i, 'value': i} for i in ['Low Delay Airlines (6E, UK)','High Delay Airlines (9W,AI,SG,G8)']
        ],
    ),
    html.H3('Select Peak/Non-Peak Month'),
    dcc.Dropdown(
        id='datasource-2',
        options=[
            {'label': i, 'value': i} for i in ['Peak Month','Non Peak Month']
        ]

    ),   
    html.Hr(),
    html.Div('Select Peak/Non Peak Hour and Threshold Delay'),
    html.Div(
        id='controls-container'
    ),
    html.Hr(),
    html.Div('Output'),
    html.Div(
        id='output-container'
    )
])

def generate_control_id(value):
    return 'Control {}'.format(value)

DYNAMIC_CONTROLS = {
    'Low Delay Airlines (6E, UK)': dcc.Dropdown(
        id=generate_control_id('Low Delay Airlines (6E, UK)'),
        options=[{'label': '{}'.format(i), 'value': i} for i in list(price['Hour Peaks'][price['Airlines']=='Low Delay Airlines (6E, UK)'].unique())]
    ),
    'High Delay Airlines (9W,AI,SG,G8)': dcc.Dropdown(
        id=generate_control_id('High Delay Airlines (9W,AI,SG,G8)'),
        options=[{'label': '{}'.format(i), 'value': i} for i in list(price['Hour Peaks'][price['Airlines']=='High Delay Airlines (9W,AI,SG,G8)'].unique())]
    ),
    'Peak Month': dcc.Dropdown(
        id=generate_control_id('Peak Month'),
        options=[{'label': '{}'.format(i), 'value': i} for i in [60,90,120,150,180]]
    ),
    'Non Peak Month': dcc.Dropdown(
        id=generate_control_id('Non Peak Month'),
        options=[{'label': '{}'.format(i), 'value': i} for i in [60,90,120,150,180]]
    )
}

@app.callback(
    Output('controls-container', 'children'),
    [Input('datasource-1', 'value'),
     Input('datasource-2', 'value')])
def display_controls(datasource_1_value, datasource_2_value):
    # generate 2 dynamic controls based off of the datasource selections
    return html.Div([
        DYNAMIC_CONTROLS[datasource_1_value],
        DYNAMIC_CONTROLS[datasource_2_value],
    ])

def generate_output_id(value1, value2):
    return '{} {} container'.format(value1, value2)

@app.callback(
    Output('output-container', 'children'),
    [Input('datasource-1', 'value'),
     Input('datasource-2', 'value')])
def display_controls(datasource_1_value, datasource_2_value):
    # create a unique output container for each pair of dyanmic controls
    return html.Div(id=generate_output_id(
        datasource_1_value,
        datasource_2_value
    ))
def prem(a,b,c,d):
    return (price['Office Premium ( INR )'][(price['Hour Peaks']==a)&(price['Threshold Delay ( Min )']==b)&(price['Airlines']==c)&(price['Month Peaks']==d)])
def incidence(a,b,c,d):
    return (price['Incidence Rate (%)'][(price['Hour Peaks']==a)&(price['Threshold Delay ( Min )']==b)&(price['Airlines']==c)&(price['Month Peaks']==d)])

def generate_output_callback(datasource_1_value, datasource_2_value):
    def output_callback(control_1_value, control_2_value):
        # This function can display different outputs depending on
        # the values of the dynamic controls
        premium=prem(control_1_value,control_2_value,datasource_1_value,datasource_2_value)
        incidence_rate=incidence(control_1_value,control_2_value,datasource_1_value,datasource_2_value)
        return '''
            For the selected values, premium in INR is {} and incidence rate is {} %
        '''.format(
            list(premium)[0],
            list(incidence_rate)[0]
            )
    return output_callback

app.config.supress_callback_exceptions = True

# create a callback for all possible combinations of dynamic controls
# each unique dynamic control pairing is linked to a dynamic output component
for value1, value2 in itertools.product(
        [o['value'] for o in app.layout['datasource-1'].options],
        [o['value'] for o in app.layout['datasource-2'].options]):
    app.callback(
        Output(generate_output_id(value1, value2), 'children'),
        [Input(generate_control_id(value1), 'value'),
         Input(generate_control_id(value2), 'value')])(
        generate_output_callback(value1, value2)
    )

Код для обоих приложений вместе

server = Flask(__name__)

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

application = app.server

available_indicators = df['Indicator Name'].unique()

app.layout = html.Div([
    dcc.Tabs(id="tabs", children=[
        dcc.Tab(label='Delay Comparison', children=[
    html.Div([
        html.H3('Flight Delays'),
        html.H3('Comparison of delay over different routes and different months'),
        html.Div([
            dcc.Dropdown(
                id='crossfilter-xaxis-column',
                options=[{'label': i, 'value': i} for i in available_indicators],
                value='6E'
            ),
            dcc.RadioItems(
                id='crossfilter-xaxis-type',
                options=[{'label': i, 'value': i} for i in ['Linear']],
                value='Linear',
                labelStyle={'display': 'inline-block'}
            )
        ],
        style={'width': '49%', 'display': 'inline-block'}),

        html.Div([
            dcc.Dropdown(
                id='crossfilter-yaxis-column',
                options=[{'label': i, 'value': i} for i in available_indicators],
                value='6E'
            ),
            dcc.RadioItems(
                id='crossfilter-yaxis-type',
                options=[{'label': i, 'value': i} for i in ['Linear']],
                value='Linear',
                labelStyle={'display': 'inline-block'}
            )
        ], style={'width': '49%', 'float': 'right', 'display': 'inline-block'})
    ], style={
        'borderBottom': 'thin lightgrey solid',
        'backgroundColor': 'rgb(250, 250, 250)',
        'padding': '10px 5px'
    }),

    html.Div([
        dcc.Graph(
            id='crossfilter-indicator-scatter',
            hoverData={'points': [{'customdata': 'MUM-DEL'}]}
        )
    ], style={'width': '49%', 'display': 'inline-block', 'padding': '0 20'}),
    html.Div([
        dcc.Graph(id='x-time-series'),
        dcc.Graph(id='y-time-series'),
    ], style={'display': 'inline-block', 'width': '49%'}),

    html.Div(dcc.Slider(
        id='crossfilter-year--slider',
        min=df['Year'].min(),
        max=df['Year'].max(),
        value=df['Year'].max(),
        marks={str(year): str(year) for year in df['Year'].unique()}
    ), style={'width': '49%', 'padding': '0px 20px 20px 20px'}),
    html.Div([html.H6('Months',style={'width': '49%', 'padding': '0px 20px 20px 285px','fontColor':'#7ad5f9'})],style={'fontColor': 'blue'})
]),
        dcc.Tab(label='Pricing', children=[
            html.H3('Smoothie Fixed Benefit Prices'),
    html.P("These prices are common for all routes in India."),
    html.P("Peak months are:-Jan,June, July, August, November, December."),
    html.P("Peak Hours ( During Peak Months ):-9 A.M. to Midnight"),
    html.P("Peak Hours ( During Non Peak Months ):-12 P.M. - 12 A.M."),
    html.H3('Select Airline'),
    dcc.Dropdown(
        id='datasource-1',
        options=[
            {'label': i, 'value': i} for i in ['Low Delay Airlines (6E, UK)','High Delay Airlines (9W,AI,SG,G8)']
        ],
    ),
    html.H3('Select Peak/Non-Peak Month'),
    dcc.Dropdown(
        id='datasource-2',
        options=[
            {'label': i, 'value': i} for i in ['Peak Month','Non Peak Month']
        ]

    ),   
    html.Hr(),
    html.Div('Select Peak/Non Peak Hour and Threshold Delay'),
    html.Div(
        id='controls-container'
    ),
    html.Hr(),
    html.Div('Output'),
    html.Div(
        id='output-container'
    )
])
    ])
])
@app.callback(
    dash.dependencies.Output('crossfilter-indicator-scatter', 'figure'),
    [dash.dependencies.Input('crossfilter-xaxis-column', 'value'),
     dash.dependencies.Input('crossfilter-yaxis-column', 'value'),
     dash.dependencies.Input('crossfilter-xaxis-type', 'value'),
     dash.dependencies.Input('crossfilter-yaxis-type', 'value'),
     dash.dependencies.Input('crossfilter-year--slider', 'value')])
def update_graph(xaxis_column_name, yaxis_column_name,
                 xaxis_type, yaxis_type,
                 year_value):
    dff = df[df['Year'] == year_value]

    return {
        'data': [go.Scatter(
            x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
            y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
            text=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'],
            customdata=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'],
            mode='markers',
            marker={
                'size': 15,
                'opacity': 0.5,
                'line': {'width': 0.5, 'color': 'white'}
            }
        )],
        'layout': go.Layout(
            title = 'Comparison of Airline Delay over Different Routes in India',
            xaxis={
                'title': 'First Airline Delay in Minutes',
                'type': 'linear' if xaxis_type == 'Linear' else 'log'
            },
            yaxis={
                'title': 'Second Airline Delay in Minutes',
                'type': 'linear' if yaxis_type == 'Linear' else 'log'
            },
            margin={'l': 40, 'b': 30, 't': 30, 'r': 30},
            height=450,
            hovermode='closest'
        )
    }

def create_time_series(dff, axis_type, title):
    return {
        'data': [go.Scatter(
            x=dff['Year'],
            y=dff['Value'],
            mode='lines+markers'
        )],
        'layout': {
            'height': 225,
            'margin': {'l': 35, 'b': 30, 'r': 10, 't': 10},
            'annotations': [{
                'x': 0, 'y': 0.85, 'xanchor': 'left', 'yanchor': 'bottom',
                'xref': 'paper', 'yref': 'paper', 'showarrow': False,
                'align': 'left', 'bgcolor': 'rgba(255, 255, 255, 0.5)',
                'text': title
            }],
            'yaxis': {'type': 'linear' if axis_type == 'Linear' else 'log','title':'Average Delay in Minutes'},
            'xaxis': {'showgrid': False,'title':'Months'}
        }
    }


@app.callback(
    dash.dependencies.Output('x-time-series', 'figure'),
    [dash.dependencies.Input('crossfilter-indicator-scatter', 'hoverData'),
     dash.dependencies.Input('crossfilter-xaxis-column', 'value'),
     dash.dependencies.Input('crossfilter-xaxis-type', 'value')])
def update_y_timeseries(hoverData, xaxis_column_name, axis_type):
    country_name = hoverData['points'][0]['customdata']
    dff = df[df['Country Name'] == country_name]
    dff = dff[dff['Indicator Name'] == xaxis_column_name]
    title = '<b>{}</b><br>{}'.format(country_name, xaxis_column_name)
    return create_time_series(dff, axis_type, title)


@app.callback(
    dash.dependencies.Output('y-time-series', 'figure'),
    [dash.dependencies.Input('crossfilter-indicator-scatter', 'hoverData'),
     dash.dependencies.Input('crossfilter-yaxis-column', 'value'),
     dash.dependencies.Input('crossfilter-yaxis-type', 'value')])
def update_x_timeseries(hoverData, yaxis_column_name, axis_type):
    dff = df[df['Country Name'] == hoverData['points'][0]['customdata']]
    dff = dff[dff['Indicator Name'] == yaxis_column_name]
    return create_time_series(dff, axis_type, yaxis_column_name)
def generate_control_id(value):
    return 'Control {}'.format(value)

DYNAMIC_CONTROLS = {
    'Low Delay Airlines (6E, UK)': dcc.Dropdown(
        id=generate_control_id('Low Delay Airlines (6E, UK)'),
        options=[{'label': '{}'.format(i), 'value': i} for i in list(price['Hour Peaks'][price['Airlines']=='Low Delay Airlines (6E, UK)'].unique())]
    ),
    'High Delay Airlines (9W,AI,SG,G8)': dcc.Dropdown(
        id=generate_control_id('High Delay Airlines (9W,AI,SG,G8)'),
        options=[{'label': '{}'.format(i), 'value': i} for i in list(price['Hour Peaks'][price['Airlines']=='High Delay Airlines (9W,AI,SG,G8)'].unique())]
    ),
    'Peak Month': dcc.Dropdown(
        id=generate_control_id('Peak Month'),
        options=[{'label': '{}'.format(i), 'value': i} for i in [60,90,120,150,180]]
    ),
    'Non Peak Month': dcc.Dropdown(
        id=generate_control_id('Non Peak Month'),
        options=[{'label': '{}'.format(i), 'value': i} for i in [60,90,120,150,180]]
    )
}

@app.callback(
    Output('controls-container', 'children'),
    [Input('datasource-1', 'value'),
     Input('datasource-2', 'value')])
def display_controls(datasource_1_value, datasource_2_value):
    # generate 2 dynamic controls based off of the datasource selections
    return html.Div([
        DYNAMIC_CONTROLS[datasource_1_value],
        DYNAMIC_CONTROLS[datasource_2_value],
    ])

def generate_output_id(value1, value2):
    return '{} {} container'.format(value1, value2)

@app.callback(
    Output('output-container', 'children'),
    [Input('datasource-1', 'value'),
     Input('datasource-2', 'value')])
def display_controls(datasource_1_value, datasource_2_value):
    # create a unique output container for each pair of dyanmic controls
    return html.Div(id=generate_output_id(
        datasource_1_value,
        datasource_2_value
    ))
def prem(a,b,c,d):
    return (price['Office Premium ( INR )'][(price['Hour Peaks']==a)&(price['Threshold Delay ( Min )']==b)&(price['Airlines']==c)&(price['Month Peaks']==d)])
def incidence(a,b,c,d):
    return (price['Incidence Rate (%)'][(price['Hour Peaks']==a)&(price['Threshold Delay ( Min )']==b)&(price['Airlines']==c)&(price['Month Peaks']==d)])

def generate_output_callback(datasource_1_value, datasource_2_value):
    def output_callback(control_1_value, control_2_value):
        # This function can display different outputs depending on
        # the values of the dynamic controls
        premium=prem(control_1_value,control_2_value,datasource_1_value,datasource_2_value)
        incidence_rate=incidence(control_1_value,control_2_value,datasource_1_value,datasource_2_value)
        return '''
            For the selected values, premium in INR is {} and incidence rate is {} %
        '''.format(
            list(premium)[0],
            list(incidence_rate)[0]
            )
    return output_callback

app.config.supress_callback_exceptions = True

# create a callback for all possible combinations of dynamic controls
# each unique dynamic control pairing is linked to a dynamic output component
for value1, value2 in itertools.product(
        [o['value'] for o in app.layout['datasource-1'].options],
        [o['value'] for o in app.layout['datasource-2'].options]):
    app.callback(
        Output(generate_output_id(value1, value2), 'children'),
        [Input(generate_control_id(value1), 'value'),
         Input(generate_control_id(value2), 'value')])(
        generate_output_callback(value1, value2)
    )

if __name__ == '__main__':
    application.run(debug = False,port=8080)