Enable multi-select on gradio.Dropdown #2871

dawoodkhan82 · 2022-12-21T04:36:31Z

Description

Add option to select multiple options on gr.Dropdown

Will be updating the colors to match other form components.

Screen.Recording.2023-01-03.at.3.12.44.PM.mov

Please include:

relevant motivation
a summary of the change
which issue is fixed.
any additional dependencies that are required for this change.

Closes: #1076

Checklist:

I have performed a self-review of my own code
I have added a short summary of my change to the CHANGELOG.md
My code follows the style guidelines of this project
I have commented my code in hard-to-understand areas
I have made corresponding changes to the documentation
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes

A note about the CHANGELOG

Hello 👋 and thank you for contributing to Gradio!

All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.

Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by [@myusername](link-to-your-github-profile) in [PR 11111](https://github.com/gradio-app/gradio/pull/11111)".

If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the
GitHub web UI since that lets you upload files directly via drag-and-drop.

gradio/components.py

abidlabs · 2022-12-21T05:31:38Z

Awesome, love the fact that the dropdown is typeable as well. Will be useful for very large number of choices.

Some additional suggestions on the UI / UX side:

The appearance of Dropdown(multiselect=False) and Dropdown(multiselect=True) are very different. We should make them more consistent, with the only difference being that you can only choose a single element if multiselect=False.

For example, the container with the Dropdown label is now completely gone. We should bring that back. But also, the entire design of the list of choices is different, the textbox part is different, etc.

You can't seem to currently use Dropdown(multiselect=False) as an output component the way you can with Dropdown(multiselect=True).

Try running:

import gradio as gr

with gr.Blocks() as demo:
    gr.Dropdown(["angola", "pakistan", "canada"], multiselect=True, value=["angola"])
    
demo.launch()

vs.

import gradio as gr

with gr.Blocks() as demo:
    gr.Dropdown(["angola", "pakistan", "canada"], multiselect=False, value="angola")
    
demo.launch()

Typing doesn't filter choices. As I start typing "Pa", I would expect the choices to filter to just Pakistan, and that I could use the down arrow key and enter to go down and select it. However, this does not happen:

github-actions · 2022-12-21T18:35:27Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

freddyaboulton

@dawoodkhan82 This is so cool! It's great that developers can update whether or not multi-select is enabled via gr.Dropdown.update as well.

Left comments on some bugs I think I found.

In addition, I agree with @abidlabs comment about filtering with what's been typed and the look being too different from the existing dropdown.

freddyaboulton · 2022-12-21T23:17:21Z

gradio/components.py

+    def update(
+        value: Optional[Any] = _Keywords.NO_VALUE,
+        choices: Optional[str | List[str]] = None,
+        multiselect: bool = False,


Better to make multiselect=None otherwise any update to a multi-select dropdown will switch off the multiselect

We do not support update changing backend configuration yet, such as multiselect. update only allows changing frontend configuration. So please remove multiselect as an option to update

ui/packages/form/src/Dropdown.svelte

github-actions · 2022-12-26T16:24:22Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

github-actions · 2022-12-27T16:29:14Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

github-actions · 2022-12-27T16:32:04Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

github-actions · 2022-12-27T16:34:56Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

github-actions · 2022-12-27T17:59:27Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

github-actions · 2022-12-27T18:52:15Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

github-actions · 2022-12-27T19:43:26Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

github-actions · 2022-12-27T19:44:08Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

github-actions · 2022-12-27T20:43:47Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

This reverts commit fb8762e.

github-actions · 2022-12-27T20:57:43Z

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

aliabid94 · 2022-12-30T00:39:07Z

great work. styling is still a bit off, I'll just make changes directly to branch.

aliabid94 · 2022-12-30T00:45:39Z

Just looking at this, I feel like should be a completely different element than Dropdown, e.g. a gr.Select. It has a different type (List of strings vs string), different purpose, and different visual layout than Dropdown. There's so little in common that all the logic branches whether or not it is a multiselect. @abidlabs @dawoodkhan82

abidlabs · 2022-12-30T04:11:47Z

Just looking at this, I feel like should be a completely different element than Dropdown, e.g. a gr.Select. It has a different type (List of strings vs string), different purpose, and different visual layout than Dropdown. There's so little in common that all the logic branches whether or not it is a multiselect. @abidlabs @dawoodkhan82

From a user's perspective, it feels "natural" to me to have a multiselect variant of the dropdown alongside a regular single-select dropdown. But I don't have a strong opinion, I'm fine with a separate component. If we do end up making it a different component, I think gr.Multiselect is more of an appropriate name

dawoodkhan82 · 2022-12-30T04:31:16Z

Synced with @aliabid94 , there's changes he suggested which makes sense and I'll implement:

change the styling of the selected option bubbles to match the radio button
separate the front end code into a separate Multiselect.svelte component
re-implement the multiselect dropdown to use datalist
Maybe separate the component completely (frontend + backend)? Not sure about this, I think for the same reasons as @abidlabs mentioned, it makes sense from a developer's pov to have it be the same component.

abidlabs · 2022-12-30T04:36:39Z

This is going to be a really slick component!

dawoodkhan82 · 2023-01-03T20:12:22Z

synced with @aliabid94 and @pngwn. Decided to move forward with the custom drop-down. Will look into combining the custom dropdown with datalist to improve accessibility, along with the other forms.

gradio-pr-bot · 2023-01-03T22:50:18Z

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-2871-all-demos

aliabid94 · 2023-01-04T19:24:30Z

gradio/components.py

+    def update(
+        value: Optional[Any] = _Keywords.NO_VALUE,
+        choices: Optional[str | List[str]] = None,
+        multiselect: bool = False,


We do not support update changing backend configuration yet, such as multiselect. update only allows changing frontend configuration. So please remove multiselect as an option to update

ui/packages/app/src/components/Column/Column.svelte

ui/packages/form/src/MultiSelect.svelte

CHANGELOG.md

abidlabs

Looks beautiful! Nit: can we add backend tests to ensure that preprocessing/postprocess multiselect works as we expect it to?

gradio-pr-bot · 2023-01-04T20:38:41Z

🎉 The demo notebooks match the run.py files! 🎉

dawoodkhan82 added 2 commits December 20, 2022 23:33

multiselect dropdown

a82a447

Merge branch 'main' into multiselect

6db16ba

abidlabs reviewed Dec 21, 2022

View reviewed changes

gradio/components.py Outdated Show resolved Hide resolved

fixes

8d4a597

freddyaboulton reviewed Dec 21, 2022

View reviewed changes

more fixes

846b9d8

changes

3f15952

dawoodkhan82 added 2 commits December 27, 2022 11:29

Merge branch 'main' into multiselect

6ae9dcf

changelog

60b690b

formatting

a38d796

format notebooks

fb8762e

type fixes

6a11472

notebok fix

6231a40

remove console log

d4dd8ab

dawoodkhan82 added 2 commits December 27, 2022 14:53

notebook fix

91ee93c

type fix

60c6b30

dawoodkhan82 added 2 commits December 27, 2022 15:51

Merge branch 'main' into multiselect

6020aa8

Revert "format notebooks"

09e5685

This reverts commit fb8762e.

change remove token styling

e464c4b

dawoodkhan82 added 4 commits January 2, 2023 15:03

separate multiselect into separate file

4409650

Merge branch 'main' into multiselect

de0f908

Merge branch 'main' into multiselect

48dd1d9

style fixes

188619f

dawoodkhan82 requested a review from aliabid94 January 3, 2023 20:14

dawoodkhan82 added 4 commits January 3, 2023 15:14

Merge branch 'main' into multiselect

422fc9d

Update CHANGELOG.md

038d967

Update CHANGELOG.md

cb0c1d5

Update CHANGELOG.md

7a5d30d

gradio-app deleted a comment from github-actions bot Jan 3, 2023

dawoodkhan82 added 2 commits January 4, 2023 01:59

some more style fixes

6828763

small bug fix

a1d495f

dawoodkhan82 force-pushed the multiselect branch from 1a08e23 to a1d495f Compare January 4, 2023 07:28

aliabid94 reviewed Jan 4, 2023

View reviewed changes

abidlabs reviewed Jan 4, 2023

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

abidlabs approved these changes Jan 4, 2023

View reviewed changes

dawoodkhan82 added 2 commits January 4, 2023 15:36

addressed pr comments

786daa5

Merge branch 'main' into multiselect

24acee1

fix active color highlighting

c88bbeb

dawoodkhan82 merged commit 9fff1e0 into main Jan 5, 2023

dawoodkhan82 deleted the multiselect branch January 5, 2023 00:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable multi-select on gradio.Dropdown #2871

Enable multi-select on gradio.Dropdown #2871

dawoodkhan82 commented Dec 21, 2022 •

edited

abidlabs commented Dec 21, 2022 •

edited

github-actions bot commented Dec 21, 2022

freddyaboulton left a comment

freddyaboulton Dec 21, 2022

aliabid94 Jan 4, 2023

github-actions bot commented Dec 26, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

aliabid94 commented Dec 30, 2022

aliabid94 commented Dec 30, 2022

abidlabs commented Dec 30, 2022

dawoodkhan82 commented Dec 30, 2022 •

edited

abidlabs commented Dec 30, 2022

dawoodkhan82 commented Jan 3, 2023

gradio-pr-bot commented Jan 3, 2023

aliabid94 Jan 4, 2023

abidlabs left a comment

gradio-pr-bot commented Jan 4, 2023 •

edited

Enable multi-select on gradio.Dropdown #2871

Enable multi-select on gradio.Dropdown #2871

Conversation

dawoodkhan82 commented Dec 21, 2022 • edited

Description

Checklist:

A note about the CHANGELOG

abidlabs commented Dec 21, 2022 • edited

github-actions bot commented Dec 21, 2022

freddyaboulton left a comment

Choose a reason for hiding this comment

freddyaboulton Dec 21, 2022

Choose a reason for hiding this comment

aliabid94 Jan 4, 2023

Choose a reason for hiding this comment

github-actions bot commented Dec 26, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

github-actions bot commented Dec 27, 2022

aliabid94 commented Dec 30, 2022

aliabid94 commented Dec 30, 2022

abidlabs commented Dec 30, 2022

dawoodkhan82 commented Dec 30, 2022 • edited

abidlabs commented Dec 30, 2022

dawoodkhan82 commented Jan 3, 2023

gradio-pr-bot commented Jan 3, 2023

aliabid94 Jan 4, 2023

Choose a reason for hiding this comment

abidlabs left a comment

Choose a reason for hiding this comment

gradio-pr-bot commented Jan 4, 2023 • edited

dawoodkhan82 commented Dec 21, 2022 •

edited

abidlabs commented Dec 21, 2022 •

edited

dawoodkhan82 commented Dec 30, 2022 •

edited

gradio-pr-bot commented Jan 4, 2023 •

edited