✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Using hidden div to make filter/scale/etc in multipage app

Hi everyone,

The goal of this multi-page app is to read a user uploaded file, do a bunch of processing, analysis, store the resulting DFs, and then graph them in a couple different ways. For example, https://dash.plot.ly/getting-started-part-2 with filters and stuff. However, I am storing a resulting DF from the analysis as hidden JSON and I’m not sure how I can make layouts of filters, scales, etc with a non-global df (the example uses global df to reference layouts). My code below:

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    # This is the 'hidden div' however its really a container for sub-divs, some hidden, some not 
    html.Div(id='output-data-upload'),
    html.Div(id = 'Target-File'),
    html.Div(id = 'exogenous_var_json'),
    html.Div(id = 'correlation_results_json'),
    html.Div(id = 'merged_json'),
    html.Br(),
    html.Div(id='page-content'),

])

## STARTING PAGE
home_page = html.Div([
    dcc.Markdown('''
        rules and guidelines for the tool
        '''),
    html.Br(),
    dcc.Link('Upload My Data', href='/page-1'),
    html.Br(),
    dcc.Link('View Analysis', href='/page-2'),
])

#UPLOAD DATA PAGE
upload_page = html.Div([
    html.H3('Select Data for Analysis'),
#UPLOAD DATA
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
            'width': '100%',
            'height': '60px',
            'lineHeight': '60px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '10px'
        },
    ),
    html.Div(id='output-data-upload'),
    html.Hr(), #horizontal line


#ANALYSIS PAGE
analysis_page = html.Div([
    html.Div(id='output-data-upload'),


    html.Br(),
    dcc.Link('Back to upload page', href='/page-1'),
    html.Br(),
    dcc.Link('Go to Home', href='/')
])


@app.callback(Output('analysis-button-output', 'children'),
              [Input('analyze-button', 'n_clicks')],
              [State('Target-File', 'children'),
              State('max-date-value', 'children'),
              State('min-date-value', 'children')])
def analysis_function(n_clicks,target_json, max_date, min_date):
    if n_clicks is not None:
---big analysis function that returns several DFs and stores them as JSON as shown below--
            return html.Div([
                html.Div(exogenous_var_json, id = 'exogenous_var_json', style = {'display':'none'}),
                html.Div(correlation_results_json, id = 'correlation_results_json', style = {'display':'none'}),
                html.Div(merged_json, id = 'merged_json', style = {'display':'none'}),
                # generate_table('x',merged_df),
                generate_table('y', correlation_results_df),
                html.Div('Analysis was successful!')])

Basically, the user uploads data in upload page, button executes the analysis script and stores JSON through the callback, then the analysis page should populate with scale, filter, option to display variety of graphs. I’m not sure how I can set up the layout without global df (I want to make it so that multiple users can use this without clashing at the same time).

Thank you!