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

Dash Python
1

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, Part 2. Basic Callbacks | Dash for Python Documentation | Plotly 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!