SelectMultiple Widgets, but with CheckBoxes or RadioButtons

[den-run-ai]

SelectMultiple widget is nice, but does not allow to make persistent selection without pressing CTRL/SHIFT. Using CheckBoxes or RadioButtons will make the selection do not disappear, if CTRL/SHIFT not pressed.

What is the use case? Scrolling through the list in SelectMultiple with UP and DOWN keys and making selection by pressing SPACEBAR without any need for mouse. Also this allows to quickly navigate by first letter without messing the current selection.

Try working with large SelectMultiple widgets and you will understand my concerns.

https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html#SelectMultiple

I'm open to alternative suggestions!

[akhmerov]

Another option (see jupyter/help#119) would be to interchange click with ctrl-click, so that the default action isn't as disruptive.

[den-run-ai]

It maybe worth looking at standard UI elements provided by frameworks such QT, Wx, GTK. Maybe they have a better design. I'm not sure what the best option will be, but definitely not the current implementation.

On Tue, Jan 17, 2017, 12:59 AM Anton Akhmerov notifications@github.com wrote:

Another option (see jupyter/help#119 https://github.com/jupyter/help/issues/119) would be to interchange click with ctrl-click, so that the default action isn't as disruptive.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ipython/ipywidgets/issues/893#issuecomment-273036992, or mute the thread https://github.com/notifications/unsubscribe-auth/AHgZ5fCO-KfCUrgSEn6ec0c7bD_S3w4gks5rTGa6gaJpZM4KwMBI .

[jasongrout]

It maybe worth looking at standard UI elements provided by frameworks such QT, Wx, GTK

The SelectMultiple widget uses the browser's native listbox - it should work exactly the same as any other native listbox on the platform. Just to be clear I'm understanding you - are you suggesting modifying how the standard listbox behaves on the platform?

[akhmerov]

I'm just wondering if the default listbox behavior is a useful default for selecting multiple items from a list. And for my own personal use, I'm wondering whether it is possible to implement a workaround. Specifically, I wonder about a single widget that would allow to select an arbitrary subsection of entries without using keyboard.

[jasongrout]

Specifically, I wonder about a single widget that would allow to select an arbitrary subsection of entries without using keyboard.

Great question. And the OP for this issue suggested allowing multiple selection using only the keyboard. What if you had a table of checkboxes, like the OP suggested? Would that work, or be too unwieldy?

I think it would also be interesting to experiment with other handling of clicks/keyboard in the listbox in a separate widget, or perhaps even as an option on the SelectMultiple widget, but I also think it's important to have access to the standard native listbox.

[den-run-ai]

I found a temporary partial workaround for easier selection of items from large collections in SelectMultiple widget: use the search button in the browser (Ctrl+F). It does not disrupt the current selection while searching. Still not super easy to use.

@jasongrout regarding your question about native listbox, I was not aware about its existence and usage in ipywidgets. I thought you implemented this widget from scratch :)

Anyway can you point me to any example for:

What if you had a table of checkboxes

I could not find anything close enough in these docs:

http://ipywidgets.readthedocs.io/en/stable/examples/Widget%20List.html http://ipywidgets.readthedocs.io/en/stable/examples/Widget%20Styling.html

I'm thinking that the carousel example is the closest thing, how do I add multi-select to it?

[pbugnion]

What if you had a table of checkboxes

There isn't a single widget that gives you a table of checkboxes, but you can pack arbitrary widgets into a vbox. I've put together a small example with what I think is acceptable UX for multiple selection from a large number of options: there's a search field that lets you search for options, and you can interact with the widget entirely through keybindings (tab/shift-tab to navigate between the search field and checkboxes, and space to select a checkbox).

You can find the source in this Github gist.

This is what the result looks like:

[den-run-ai]

This is awesome @pbugnion I plan to check this tomorrow!

[den-run-ai]

For comparison I just noticed that the dash multi-select widget by default has almost the same functionality as the gist from @pbugnion which works great:

https://plot.ly/dash/getting-started

[pbugnion]

At some point, we need a community widget that uses select2 or another rich multi-select library. Select 2 supports a tag-like multi-select very similar to the dash example. This has been on my list of things to do for a while (but I'll very happily help if someone else wants to implement it).

The general feeling among ipywidgets contributors seems to be that core widgets (i.e. the widgets in this package) should remain simple wrappers around DOM components, since simple components compose better.

[den-run-ai]

@pbugnion is there repository for ipywidgets community contributions outside of core?

[pbugnion]

There are several community widgets:

• bqplot
• ipyvolume
• pythreejs
• ipyleaflet
• gmaps
• nglview and others.

For a discussion on the discoverability of community libraries, see issue #1697.

[jasongrout]

@pbugnion is there repository for ipywidgets community contributions outside of core?

There's not a single repo for widgets from the community. Rather, there are a number of repos for each set of community widgets.

[seabarron]

Does anybody know how to use the gist from @pbugnion with interact/interactive, I understand it is with a VBox but I'm not sure how to implement this (even after reading the ipywidgets docs). Thanks

[MattJBritton]

@seabarron I'm sure this is much too late to be of use, but I ran into the same issue as you, and developed a solution that works with interact. You can find the details in my fork of the excellent work by @pbugnion. Or see my comment on his original gist.

Mine also adds some additional functionality similar to the Plot.ly example. Selected options appear at the top of the list, so it's easy to see the currently selected values.

[seabarron]

@MattJBritton Great solution! This is actually a project I plan on revisiting, so that is helpful

[ianhi]

I think that an array of checkbox would be an awesome addition to the ipywidgets library. Either as a standalone widget or as an option to selectMultiple. This would solve issues like the flickering described in https://stackoverflow.com/questions/64368419/toggle-all-checkboxes-with-ipywidgets that arise when you pack multiple checkbox widgets into a vbox