Trying to find a way to update an dcc.input value with an dictionnary value

Dash Python
1

Hi,

I am trying to create a form in which the dropdown button will select value from a pandas dataframe and this will also filled the dcc.input container with data from the same row but different column. The user will see default value linked with his query. I have been using the pattern-matchin callback to implement this but my code generate an error code linked with input of the second callback and I don’t really understand why.

here is the code:

# -*- coding: utf-8 -*-
"""
Created on Thu Sep 23 12:22:40 2021

@author: Michael Levesque
"""

##############################################################################
# importation des modules
##############################################################################

#Dash Framework
import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output, State, MATCH, ALL

#autres modules
import numpy as np
import plotly.express as px
import matplotlib.pyplot as plt
from plotly.tools import mpl_to_plotly
import pandas as pd

##############################################################################
#Importation des fichiers
##############################################################################

use_Cols = ['Name','nicename','source','starname','Mstar','Rstar','Lstar','per','ap','tt','T14']

df       = pd.read_csv('plas_all.csv', nrows=10, usecols=use_Cols)

##############################################################################
#List, arrays, dictionnary
##############################################################################

available_names= df['Name'].unique()

print(df['Name'])
print(available_names)

print( df[df['Name'] == available_names[0]]['nicename'].values)

##############################################################################
#setting external sheets
##############################################################################

external_stylesheets = external_stylesheets = [
    # Dash CSS
    'https://codepen.io/chriddyp/pen/bWLwgP.css',
    # Loading screen CSS
    'https://codepen.io/chriddyp/pen/brPBPO.css']#['https://codepen.io/chriddyp/pen/bWLwgP.css']

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

##############################################################################
#initial layout
##############################################################################


app.layout = html.Div([
    html.Div(children=[
    html.H1(children='Phy-3030'),

    html.Div(children='''
        Example of realistic interaction with user-Interface
    ''')]),
    
    html.Div(children=[
    dcc.Dropdown(
        id='planet_name',
        options=[{'label': i, 'value': i} for i in available_names],
        value=available_names[0]
    ),
    html.Button(id='submit-button-state', n_clicks=0, children='Submit')
    ]),
    html.Div(id='input_container',children=[          
    html.Div(["Nicename",
              dcc.Input(id='nicename', value='0', type='text')
    ], style={'width': '30%', 'display': 'inline-block'}),
    html.Div(["Source",
              dcc.Input(id='source', value='0', type='text')
    ], style={'width': '30%', 'display': 'inline-block'}) ]),
    html.Div(id='my_output')]
    )

###############################################################################
# Callbacks
###############################################################################

@app.callback(
    Output('input_container', 'children'),
    [Input('input_container','children'),
    Input('submit-button-state', 'n_clicks'),
    State('planet_name', 'value')])
def update_layout(children, n_clicks, planet_name):
    
    if n_clicks==1:
        
        new_input1=html.Div(["Nicename",
              dcc.Input(id={'type':'nicename', 'index': planet_name }, value= df[df['Name'] == planet_name]['nicename'].values, type='text')],
              style={'width': '30%', 'display': 'inline-block'}) 
        
        children[0]=new_input1
        
        new_input2=    html.Div(["Source",
              dcc.Input(id={'type':'source', 'index': planet_name }, value=df[df['Name'] == planet_name]['source'].values, type='text')
              ], style={'width': '30%', 'display': 'inline-block'})
        
        children[1]=new_input2
        
    return children

@app.callback(
    Output('my_output', 'children'),
    Input({'type':'nicename','index':ALL}, 'value'),
    Input({'type':'source','index':ALL}, 'value'),
    Input('submit-button-state', 'n_clicks'),
    State('planet_name', 'value'))
def update_value(nicename,source,n_clicks,planet_name):
    
    if df[df['Name'] == planet_name]['nicename'].values==nicename and df[df['Name'] == planet_name]['source'].values==source:
        return 'Default values'
    else:
        return 'Customised value'
#Input({'type': 'filter-dropdown', 'index': ALL}, 'value')
if __name__ == '__main__':
    app.run_server(debug=True)

and here is the error it generates:

Invalid argument value passed into Input with ID “{“index”:“TOI_101.01”,“type”:“source”}”.
Value provided:
[
“TESS”
]

and

Invalid argument value passed into Input with ID “{“index”:“TOI_101.01”,“type”:“nicename”}”.
Value provided:
[
“TOI-101.01”
]

If anyone can help it would be appreciate.

Thanks

2

In your update_layout callback, df[df['Name'] == planet_name]['nicename'].values returns a list which dcc.Input does not allow. To fix it you can just grab the first value from the list, df[df['Name'] == planet_name]['nicename'].values[0].

1 Like
3

It work thank you. I was under the impression that .values was suppose to extract th data from the array and return it as a string. So you’re solution never occured to me. Thank you again!

1 Like