Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Multi-select list box

Hello, How do I create a multi-select listbox in Dash similar to this matlab example

https://www.mathworks.com/help/matlab/creating_guis/plot-workspace-variables-in-a-guide-gui.html

There isn’t a component that provides that exact behavior, but you can put together something that should get you what you need. I would use the Dropdown Dash core component with multi=True. If you want the callback to only be triggered only after you have selected more than one option (as well as potentially input being entered into other form elements), then you’ll need to use this component as a State for a callback (rather than an Input) and have the callback be triggered through say a click Event on a submit button.

For example:

@app.callback(Output('output-id', 'children'), [], [State('dropdown-id', 'value')], [Event('submit-id', 'click')])
def multi_select(dropdown_values):
    return f"values submitted: {dropdown_values}"

You can also use the dcc.Checklist component if the number of items is small. See https://plot.ly/dash/dash-core-components for a full list of inputs

Thanks all for your prompt reply.

Dropdown won’t work well for my application as I will have a list of up to 10000 different curves I’d want to select. To manage the large number of curves I would create a textbox as an input to filter based on curve name. For example (see attached), let’s say I had curves for tests 1 to M and each test has a number of curves 1 to N. I would want to filter the multi select list box to just those that apply to test 1 and from there manually select individual curves to plot. I’d also want to filter based on other curve attributes that would be stored in a pandas data frame that are not associated with the curve name itself (e.g. test date).

I’ve created this prototype in MATLAB, but I’d like to leverage python / DASH if possible.

By default the Dropdown component supports find-as-you-type, so you get part of the search functionality you describe with the textarea for free already. 10000 does seem like a lot to squeeze into a single dropdown though. What about breaking it out into two dropdpwns, one with the test number which triggers a callback to update the second dropdown with only the values that correspond to that test?

10000 does seem like a lot to squeeze into a single dropdown

I have used the multi-select dropdown for gene names (~25000 rows) and it works totally fine. I think the original poster should try it (maybe some of the redundant text in the names could be eliminated)

Ah, that’s good to know!

In https://github.com/plotly/dash-core-components/pull/47 I made the dcc.Dropdown component. Here is an example with 50k rows

Thanks Chris for this example. I think our users would prefer to have the option of seeing all the curves at once. I just stumbled upon the table experiment which seems like a better option.

A couple other needs we have:

  1. re-arrange the order of curves within the table
    (e.g. move all the common plotted curves to the top of the table)

  2. create new columns on the fly
    (e.g. group curves together convenient to the analysis, this would be an alternative to having a tree list

  3. filter through curves using wildcards
    (e.g. A*rica would bring up America and Africa
    and A?rica would bring up Africa)

Another option would be to build your own custom React.js component with the UI that you prefer, see https://plot.ly/dash/plugins for documentation on that.

Also note that if your organization or company has the resources, Plotly’s advanced development team can be contracted to build out custom components or add features. For more, see https://plot.ly/dash/pricing/ or get in touch directly here: https://plotly.typeform.com/to/rkO85m

I created something similar here:

Let me know if it helps.

1 Like