Multi-select list box

Dash Python
1

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

2

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}"
3

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

4

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.

SampleUI
SampleUI.png2634×1948 342 KB

5

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?

6

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)

7

Ah, that’s good to know!

8

In make dropdowns with hundreds of thousands of options more performant by chriddyp · Pull Request #47 · plotly/dash-core-components · GitHub I made the dcc.Dropdown component. Here is an example with 50k rows

Dropdown with many options
Dropdown with many options1263×719 152 KB

9

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)

10

Another option would be to build your own custom React.js component with the UI that you prefer, see Build Your Own Components | Dash for Python Documentation | Plotly 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 Get Pricing or get in touch directly here: Discover Typeform, where forms = fun

11

I created something similar here:

Let me know if it helps.

1 Like
12

really old thread are you around, i took a look at your dual list package and it works great, however your only example:

doesn’t line the list boxes up in a nice row, its left on top of middle buttons on top of right list, do you know how you would configure the .css or the python code to get proper alignment ? thanks!