Drag n drop with controls . how to use drag n drop?

Dash Python
1

hi

I have done a app with data from drag n drop

the problem, comes with the controls, this is an example:

controls:

controls001=dbc.Card(
            [
                html.Div(
                    [
                        
                        
                            id="x-stat",
                            options=[
                                {"label": col, "value": col} for col in dff.columns
                            ],
                            value="x",
                        ),
                    ]
                ),
                
        },
                        
                    ]
                ),
            ],
            body=True,
        ),

and the callback :



@app.callback(
    Output("cluster-graph", "figure"),
    [
        Input("x-stat", "value"),
        Input("y-stat", "value"),
        Input("intermediate-value",'data'),
        
    ],
)
def make_graph(drop1, drop2,cleaned_dff):
    if cleaned_dff!=[]:
        df = pd.read_json(cleaned_dff, orient='split')
    else:
        df=dff.copy()
    
    

    df = df.loc[:,[drop1, drop2]]
    dffff=df.dropna()
    
    
   

   
    fig=go.Figure()
   
    return go.Figure(data=data, layout=layout)
        



                dbc.Tab(label=" 2D",tab_id="",,children=[
                    dbc.Container(
                    [
                        html.H1(""),
                        html.Hr(),
                        dbc.Row(
                            [
                                dbc.Col(controls001, md=4),
                                
                                dbc.Col(dcc.Graph(id="",config= {'displaylogo': False}), md=8),
                            ],
                            align="center",
                        ),
                        html.Hr(),
                        dbc.Row([
                                html.P(""),
                                html.P(""),
                            ]),

How can I load the controls with the drag n drop dropdown of the new db?

2

Hi @topotaman ,

How are these code snippet connected? I actually do not understand what is your problem/ what you try to achieve.

General information concerning dcc.Upload:

3

@topotaman,

When you load the new data from the drag and drop, you need to output the new data to the options of the x-stat and so forth.

It will need to be configured in the same way that the original is, a list of dictionaries.

4

hi … I’ve been messing arround and can’t make it work …

here are some codes … lets see if you can make this work (I’m sure of this)

The app does choose with the drop down menu, but the graph doesnt refresh … I managed to fix the part of seeing the drop down of the drag and drop, but dont know why it doesn’t make de figure or refresh.

app.layout = html.Div([
    dcc.Location(id='url', refresh=True),
    # This is the 'hidden div' however its really a container for sub-divs, some hidden, some not 
    #html.Div(id='output-data-upload'),
    dcc.Store(id='intermediate-value'),
    dcc.Store(id='intermediate-value2'),
    dcc.Store(id='intermediate-value3'),
    dcc.Store(id='intermediate-value4'),
    dcc.Store(id='intermediate-value5'),
    dcc.Store(id='intermediate-value6'),
    dcc.Store(id='intermediate-value7'),
    dcc.Store(id='intermediate-value8'),

@app.callback(Output('intermediate-value3', 'options'), [Input("intermediate-value",'data'),],prevent_initial_call=True,suppress_callback_exceptions=True)
def set_optiones0(cleaned_dff):
    if cleaned_dff!=[]:
        df = pd.read_json(cleaned_dff, orient='split')
        print("dff pasó")
    else:
        df=dff.copy()

    return [{"label": col, "value": col} for col in df.columns]

@app.callback(Output('intermediate-value4', 'value'), [Input("intermediate-value3",'options')],prevent_initial_call=True,suppress_callback_exceptions=True)
def set_values0(cleaned_dff):
    set_optiones0(cleaned_dff)

    return df.columns['VPIP']

@app.callback(Output('controls001','children'),Input("intermediate-value3",'options'),Input("intermediate-value",'data'),Input("intermediate-value5",'options'),prevent_initial_call=True,)
def set_display(set_optiones0,cleaned_dff, set_optiones1):
    if cleaned_dff!=[]:
        df = pd.read_json(cleaned_dff, orient='split')
        print("dff pasóooo")
    else:
        df=dff.copy()
    print("chiii pasóooo",df)
    return dbc.Card(
                [
                    html.Div(
                        [
                            
                            html.H5("X stat"),
                            dcc.Dropdown(style={

            },
                                id="x-stat",
                                options=set_optiones0,
                                #value=df['x'],
                            ),
                        ]
                    ),
                    html.Div(
                        [
                            html.H5("Y stat"),
                            dcc.Dropdown(style={
            
            },
                                id="y-stat",
                                options=set_optiones1,
                                #value=df['y'],
                            ),
                        ]
                    ),
5

@topotaman,

It looks like in your function (make_graph you are reusing the data instead of setting it up as the new dffff. That’s my guess as to why its not updating. Glad you got the cards to update.

6

Is there any way to get the data from a call and pass it to the raw code?

example:

I have a df, and the app shows figures
I get from the call back a new dataframe for ex a drag and drop
and whant to use that new df in the figures…

how to pass from a callback to raw?