V3•7mo ago

Dropdown Box w/ plotly

Would it be okay to ask questions about using/interacting with Marimo here? I want to make just a simple dropdown that decides what plots i display, but when i choose the value in the dropdown box, the graph only displays for a split second before just dissapearing. I am using plotly plots.

15 Replies

V3OP•7mo ago

idk why its not working, its just a simple dropdown box that returns the plot global variable

eugene•7mo ago

can you try this: juandice_bar_plot = _fig instead of mo.ui.plotly(_fig)

V3OP•7mo ago

it worked. why tho?

eugene•7mo ago

i think mo.ui.plotly(_fig) will make dropdown rerender again and again you can also set value=Jaundice in the dropdown set the default value of the dropdown to that plotly object i think something is happening inside mo.ui.plotly(_fig) and this everlasting change will make dropdown roll back to its default

V3OP•7mo ago

yeah that's the assumption that I just came down too, but now my question is how would configure my plotly plot if i cant use the mo.ui.ploty function, nor can use fig.show

eugene•7mo ago

i can't figure out how to do this sorry 🫠 oh i solve that you need to implement as below:

get_state, set_state = mo.state("Jaundice", allow_self_loops=True)

get_state, set_state = mo.state("Jaundice", allow_self_loops=True)

dropdown = mo.ui.dropdown(["Jaundice", "Family History"], value=get_state(), on_change=set_state)

dropdown = mo.ui.dropdown(["Jaundice", "Family History"], value=get_state(), on_change=set_state)

and create a mapping:

mapping = {"Jaundice": jaundice_bar_plot, "Family History": family_history_bar_plot}

mapping = {"Jaundice": jaundice_bar_plot, "Family History": family_history_bar_plot}

and display use mapping:

mapping[dropdown.value]

mapping[dropdown.value]

it should work fine 🐌

V3OP•7mo ago

omg thank you! i havent even tried touching states, but this will be an amazing segway into it. I appreciate the help!

V3OP•7mo ago

Hi i'm back again, with another problem when using plotly with marimo, this time im trying to use a box plot with a dropdown and its just printing out the Figure data :/ The same thing is happening for every box_plot, my bar graphs from early are not experiecing any issues though. My box_plots were fine until i tried configure the color of my graphs using plotly expresses' libary of colors: - specifically:

color_discrete_sequence=px.colors.qualitative.G10

color_discrete_sequence=px.colors.qualitative.G10

After trying to configure the colors, all of my box_plots started printing like that instead of displaying the actual graph Attempts to Fix: - literally uninstalled and reinstalled plotly and marimo, the error still persisted

eugene•7mo ago

i think you maybe should try this:

## Distribution of scores by:

{box_plots_dropdown}

## Distribution of scores by:

{box_plots_dropdown}

don't write them in a single line maybe it's a problem regarding incorrect markdown format

V3OP•7mo ago

sadly not the case

Akshay•7mo ago

It’s possibly we don’t support plotly configuration correctly. We can look into this Nice suggestion! It's actually possible to do this without using mo.state at all, since you don't need cycles and dropdown already stores its value. Here is what I would suggest. (cc @V3)

box_plot_options = mo.ui.dropdown(["Jaundice", "Family History"])

box_plot_options = mo.ui.dropdown(["Jaundice", "Family History"])

mapping = {"Jaundice": jaundice_bar_plot, "Family History": family_history_bar_plot}

mapping = {"Jaundice": jaundice_bar_plot, "Family History": family_history_bar_plot}

mapping[box_plot_options.value]

mapping[box_plot_options.value]

Akshay•7mo ago

^ Full source code

drop.py

V3OP•7mo ago

Thank you for the suggestion! I just got out of work/class so I’ll try the code once I get home!

V3OP•7mo ago

still appears wrong in the markdown box :/

V3OP•7mo ago

So, I just tried using a tabs instead of dropdown, and the plots started to show correctly which is yay, but no clue why dropdown menu doesnt work with box plots dropdown menu worked with bar plots in a previous segment of this doc