Black Lives Matter. Please consider donating to Black Girls Code today.

Dynamic dropdown list display with input from dynamic queried data from

Dear All,
I’m creating a dash bar graph from a dropdown list input. the dropdown list options are from dynamic generated/updated data source (for example a freshly updated csv file). I found that the dropdown list only display the options members (for example [‘new york’,‘nyc’, ‘shanghai’,‘sh’]). but what I need is that if the file changed with adding new option members (for example now the file added a city name to [‘new york’,‘nyc’, ‘shanghai’,‘sh’, ‘tokyo’,‘tk’]) triggered by some button clicking, the dropdown list will also dynamically changed members of options with displaying the new dropdown list with added members.
Is that possible? currently all the show cases I found only have static data source (like a static csv file.)
any reply are highly appreciated.
Tony

Hi @tonydeck
I did something similar but creating a live connection to a DB. I used sqlalchemy for that. But you might not need that is you plan to upload the csv document every time

Hi, Adam,
thanks for your reply. Can you help to tell the stuff with more information? In my case, I update a file based on a input parameter in a callback. another callback aligned with dropdown list will then read the updated file and generate updated dropdown list. do you think the process makes sense? do I need to refresh page first?
thanks in advance.
Tony

@tonydeck
it’s challenging to see a clear picture. Can you attach your code please. Where is your csv document located? is it in the same folder as the code?

Hi, Adam,
thanks for your reply.
Here is the code. You can see that 1.I queried data and save to a file based on the input. 2. based on the newly updated file, I need to dynamically create a dropdown list.
currently status is that I can see 1. the file can be created successfully by a call back function named ‘collected data’, 2. the data for dropdown ‘options’ feature can be created correctly based on the file 3. the problem is that the web page did not updated with the newly generated dropdown list. 4. You just ignore the module githubOps.github_saveToCsv, as it is just used for query and generated file and it works as expected.
thanks!
Tony

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output,State
import pandas as pd
import json
from pandas.io.json import json_normalize
from flask import Flask
from os import path
from githubGraphql import githubOps

#define Flask Server
SERVER = Flask(name)

#define APP configuration

loading_div_id = “loading”
loading_children_div_id = “loading-output”
download_completed_div_id = “download-complete-md”

features

features = [‘forks’, ‘openIssues.openIssues’, ‘closedIssues.closedIssues’, ‘closedPullRequests.closedPullRequests’]

#app = dash.Dash()
APP = dash.Dash(name=‘app1’, server=SERVER)

APP.layout = html.Div([
html.Div([

html.Div([
‘Please input your Organization Name and click the button’,
dcc.Input(
id=‘inputOrgName’,
type=‘text’,
placeholder=‘please input your github org name’

value=‘AET’

    ),
   html.Button(id='githubButton',n_clicks=0, children='Submit'),
   dcc.Loading(id= loading_div_id,children=[html.Div([html.Div(id= loading_children_div_id)])],type="circle"),
   dcc.Markdown(id = download_completed_div_id)
  ],style={'width': '100%', 'display': 'inline-block'}),

html.Div([
   'Choose your project by dropdown list:',
   dcc.Dropdown(
      id='dropDownProjectName'
   ),
   dcc.Interval(
        id='interval-component',
        interval=3*1000, # in milliseconds
        max_intervals=10)

], className=“three rows”)
] )
])

some callbacks are going to refer to divs that have not been created yet

APP.config[‘suppress_callback_exceptions’] = True

@APP.callback(
Output(‘dropDownProjectName’, ‘options’),
[Input(‘inputOrgName’, ‘value’),
Input(‘interval-component’, ‘n_intervals’)]
)

def update_dropDownProjectName(inputorgname,n1):
#read csv file
gitDataFile=’./data/’+inputorgname+’.csv’
if path.exists(gitDataFile):
jenkins_norm = pd.read_csv(gitDataFile)
jen_projectname = jenkins_norm[‘name’].astype(‘str’).tolist()
#print(jen_projectname)
jen = [{‘label’: i, ‘value’: i} for i in jen_projectname]
print(jen)
return(jen)
else:
print(“no file found.”)

on submit-button press, collect data from the github data query by graphql and store it in an invisible div, store its data types, display loading circle and display text when finished

@APP.callback([Output(loading_children_div_id,‘children’),
Output(download_completed_div_id, ‘children’)],
[Input(‘githubButton’,‘n_clicks’),
Input(‘inputOrgName’,‘value’)])
def collect_data(n_clicks,inputOrgName):
“”“Collects data from a customer if customer_id has been provided and the button
in the div “submit-button” has been clicked.
This operation can only be done from the button.
“””

# "the callbacks are always going to fire on page load. So, you’ll just need to check if n_clicks is 0 or None in your callback"
if n_clicks == 0:
    return None,None,None,""
orgToken = 'xxxxxxx....'
githubOps.github_saveToCsv(githubOps.githubOrgJson(inputOrgName,orgToken),inputOrgName)
#print(jenkins_norm)
#print(jenkins_norm.to_json()) 
#print(jenkins_norm.dtypes.to_json())
return "","Github data loading is finished! You can now view the vizualisations of your projects."

if name == ‘main’:
APP.run_server(debug=True,host=“0.0.0.0”)

@adamschroeder
Hi, Adam,
do you think this could be realized with the scenario? I attached the code and explanation above.
thanks in advance.
Tony

Let me try this when I have access to a computer. I’ll let you know if I figure this out.

Hi, Adam,
thanks a lot. I’ve found the solution. Just put the dropdown list component under a html.Div component with defining the Div component id, i.e. the children property is used.
code is like the following.
html.Div(
id=‘dropdown-parent’,
children = [html.Div([
‘Choose your project by dropdown list:’,
dcc.Dropdown(
id=‘dropDownProjectName’
),

and in the relevant call back. define the html.Div component as the input. the code is like.

@app.callback(output=Output(‘dropDownProjectName’, ‘options’),
inputs=[Input(‘my-dropdown-parent’, ‘n_clicks’)],

1 Like

Smart Solution, @tonydeck. Thanks for sharing.