✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

How to pass the dataframe along list in dash framework?

I’m trying to pass the data frame and selected property of a dropdown to the different calling function in dash. I’m able to pass selected value but I don’t get data frame. Here is my code.

"""Visualization graph"""
import os
from flask import Flask
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd


DIRECTORY_PATH = 'C:/Users/fortu/Desktop/Zuhair/'

directories = [
    d for d in (os.path.join(DIRECTORY_PATH, directories) for directories in
                os.listdir(DIRECTORY_PATH))
    if os.path.isdir(d)
]

external_stylesheets = [
    'https://js.api.here.com/v3/3.1/mapsjs-ui.css'
]


# Normally, Dash creates its own Flask server internally. By creating our own,
# we can create a route for downloading files directly:
server = Flask(__name__)
app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP])


app.layout = html.Div(
    [
        dbc.Row(dbc.Col(
            html.Div("Ground truth visualization",
                     style={'textAlign': 'center',
                            'color': 'red', 'fontSize': '40px'}),
            md=12)),
        dbc.Row(
            dbc.Col(
                html.Div([
                    dbc.Row([
                        dbc.Col(html.Div(dbc.Row(dcc.Dropdown(
                            id='selected-dir',
                            options=[{'label': i, 'value': i}
                                     for i in directories],
                            placeholder="Select the directory"),
                            style={
                                'marginLeft': '25px',
                                'display': 'inline-block',
                                'width': '90%'
                            }
                        )), width=2),
                        dbc.Col(children=[
                            html.Div(dbc.Row(dcc.Dropdown(
                                id='selected-csv-fields',
                                placeholder="Select the field"),
                                style={
                                    'display': 'inline-block',
                                    'width': '90%'
                                }
                            )),
                            html.Div(dbc.Row(id='intermediate-value'), style={'display': 'none'})
                        ], width=2),
                    ]),
                    dbc.Row([
                        dbc.Col(html.Div([
                            dbc.Row(
                                [dbc.Col(html.Div(
                                    dcc.Graph(id='line-graph'),
                                    className='bg-dark badge-dark'))]),
                            dbc.Row([dbc.Col(html.Div(
                                dcc.Graph(id='stack-graph'),
                                className='bg-warning'))],
                                className="row mt-3")]), width=5)

                    ], className="row mt-3")]))
        )
    ]
)


@app.callback(
    [Output("selected-csv-fields", "options"),
     Output("intermediate-value", "data")],
    [Input("selected-dir", "value")]
)
def get_all_csv(selector):
    """Get all the csv from the folder"""
    if selector is not None:
        csv_files = list(filter(lambda x: '.csv' in x, os.listdir(selector)))
        _DF = pd.concat([pd.read_csv(os.path.join(selector, f))
                         for f in csv_files])
        demo = [{'label': i, 'value': i} for i in _DF]
        return demo, _DF

    return []


@app.callback(
    Output("line-graph", "figure"),
    Output("stack-graph", "figure"),
    [Input("selected-csv-fields", "value"), Input("intermediate-value", "data")]
)
def update_graph(selector, done):
    """display the graph based on selected value."""
    if selector is not None:
        fig = px.line(done, x="Time", y=selector)
        stack = px.histogram(done, x="Time", y=selector, marginal="box",
                             hover_data=done)
        return fig, stack

    return {}, {}


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

When I remove the Output(“intermediate-value”, “data”)] from get_all_csv() and Input(“intermediate-value”, “data”) from update_graph(a, b) respectively it works fine. but when try to pass this parameters it gives me error

ERROR : Callback error updating selected-csv-fields.options, intermediate-value.data