Create a checkbox+dropdown list of checkbox

slamer59 · September 25, 2020, 10:46am

Hello, I wonder if it is possible to create a dropdown of checkboxes list. I don’t know how to call that

It’s kind of multiselection.

philippjfr · September 25, 2020, 10:50am

Seems like a nice idea for a composite component. I suspect for now you’d have to build this manually by combining an Accordion layout (due to be released in 0.10.0) with checkboxes and even then it won’t quite achieve what you want. A feature request on the issue tracker might be good.

Marc · September 25, 2020, 3:51pm

I see this component as a treeview like for example https://www.jstree.com/

SAP also has a nice treeview here https://sap.github.io/ui5-webcomponents/playground/components/Tree/

Would be nice to have a Treeview in Bokeh/ Panel.

There is already a IPytree which should be possible to use in Panel. At least for POCs and exploration.

Personally I hope to implement the Fast treeview one day

and add it to the awesome-panel-extensions package. I’m not sure the Fast treeview has all the functionality you need yet though.

philippjfr · September 26, 2020, 10:13am

A TreeView is certainly nice, and you can already have one with a simple JSON pane, but it’s not quite the same as allowing checkboxes at every level.

slamer59 · October 4, 2020, 2:47pm

I found something written in React with Material-ui.

and the trial here:

Marc · October 14, 2020, 8:04pm

Hi @slamer59

Did you get the material ui treeview working in Panel?

If yes could you provide a code example? I would like to learn how to do this.

slamer59 · October 14, 2020, 8:24pm

Not yet

I tried to figure it out how to do it. So I read panel, awesome_panel, and bokeh documentation.

I think I will start on bokeh. I am still not at ease between Javascript and Python integration…

slamer59 · October 14, 2020, 8:26pm

Or even add a custom bokeh model to panel. I really don’t know

slamer59 · October 19, 2020, 9:24pm

I finally got something digging the documentation

I mirror what Crosselector do. I took advantage of CompositeWidget.

github.com

holoviz/panel/blob/3961571aecf125e642bdfd092e99189a18ba551d/panel/widgets/base.py#L160


          A list of value states to explore.
        getter: callable
          A function that returns the state value given the model
        on_change: string
          The name of the widget property to attach a callback on
        js_getter: string
          JS snippet that returns the state value given the model
        """


class CompositeWidget(Widget):
    """
    A baseclass for widgets which are made up of two or more other
    widgets
    """

    __abstract = True

    _composite_type = Row

    def __init__(self, **params):

The dropdown is a Checkbox where I replace via CSS the appearance.
It was not so easy but I learn a lot aha.

The only things I miss now is to inject directly the CSS for this widget. I use a Font awesome icon to replace it.

pn.extension(raw_css=[css], css_files=css_files)

Next step would be to have a “SuperComposit” widget to embed the two TreeViewCheckBox or not…

Any suggestions for this appreciated.

I may do PR if interested.

Marc · October 20, 2020, 4:08am

Looks awesome.

Could you share the code of the implementation? Either directly in a post below or via a link?

I would like to learn how to use the CompositeWidget have never tried that. And maybe I have some ideas for improving the implementation when I see it.

Thanks.

slamer59 · October 20, 2020, 5:28pm

@Marc of course !
Code source here :

github.com

slamer59/panel/blob/c54d353acdf40980595a8cff7acf7e4264a85097/panel/widgets/select.py#L583


        if len(self._lists[True].options):
            self._selected[-1] = self._lists[True]
        else:
            self._selected[-1] = self._placeholder
        self.value = [self._items[o] for o in self._lists[True].options if o != '']
        self._apply_filters()

    def _get_model(self, doc, root=None, parent=None, comm=None):
        return self._composite._get_model(doc, root, parent, comm)

class TreeViewCheckBox(CompositeWidget):
    _composite_type = Column
    box_size = param.Number(default=100)
    select_all = param.String()
    select_options = param.List()

    def __init__(self, select_all, select_options, **params):
        super().__init__(**params)
        try:
            self.select_all=select_all
        except NameError as n:

And an exemple:

github.com

slamer59/panel/blob/master/examples/gallery/demos/TreeViewCheckBox.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import param\n",
    "pn.extension() "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "css = \"\"\"\n",

This file has been truncated. show original

Few things I would like to change / add:

inject somewhere a css or a something else… I see only HTMLBox doing this but this is a widget.
select_all, select_options may be replaceable by a param.Dict
Finding a better method for sizing the dropdown button https://github.com/slamer59/panel/blob/c54d353acdf40980595a8cff7acf7e4264a85097/panel/widgets/select.py#L604
When there is only one widget that’s ok but here I made a class attribute to align the drodown if multiple.
-> First solution wrap to another widget or refactor to have multiple widgets.

slamer59 · October 26, 2020, 9:17am

I would be happy to see your feedback on this. If you have time of course.

@philippjfr what do you think about a PR on panel for this?