Connect Dash Dropdown to Network graph

Dash Python
1

I have built a dashboard containing a network graph as well as a dropdown with the names of each node. I want to connect the two in order to filter the network so that it will change the network to show the node I filtered as well as its connecting nodes.

Network Dashboard.PNG
Network Dashboard.PNG1913Ă—852 141 KB

2

Hi! Welcome to the community! Could you provide a sample of your code in order to make it easier to help you?

3

image
image769Ă—754 48.9 KB

image
image732Ă—768 47.6 KB

image
image742Ă—659 134 KB

image
image759Ă—706 51.1 KB

Hello! Here are snippets of my code used to create my network. I just want to be able to use my dropdown to filter the network down to the selected node and the nodes to which it is connected to.

4

Hi again @mjkline6!
It’s quite hard to give you a complete code based on the screenshot but basically what you want to do is to filter your nodes by the dropdown value, with a callback.

What you need to generate in the callback is the whole process that generates the network graph but just for that value.

So basically your callback will look something like

@callback(
    Output(component_id="your_figure_id", component_property="figure"),
    Input(component_id="your_dropdown_id", component_property="value")
)

Then you define what happens when the callback is triggered:
If you have a dataframe filter it by value using

def dropdownupdate(value):
     df_filtered = df[df['your_column'].isin(value)]
     your code to recalculate the network graph goes here

finally

return name_of_your_graph

Depending on your data structure this is the basic to make a dropdown value change a plotly graph.

Hope this helps.

5

Thank you so much for your help I will give that a shot! What do you mean when you say “your code to recalculate the network graph goes here”. Would I need to copy and paste in all of the code from the creation of the network/edge trace node trace/ plotting etc? Thanks again!

6

I meant that you will need to generate the code again (copy and paste if you will) but based on the filtered data by the value coming from the dropdown.

Let me know if it works and welcome to the community!

1 Like
7

Hey there jhomes_eu!

I never got to thank you for your last comment; I took a break from this project but made some small improvements and have some updated code if you wouldn’t mind taking a look. The way my functions are structured I am having trouble wrapping my head around how to make the callbacks talk to the rest of the code. the link is below!

Thanks again for all of your help.

Plotly Dash Network Callbacks - :bar_chart: Plotly Python - Plotly Community Forum

8

Hi @mjkline6, I just answered the question on the new thread. Hope it helps!