Declaring widget semantics

[jbednar]

@philippjfr recently posted this nice example of using .rx to control theming :

color = pn.widgets.ColorPicker(value='#ff0000')
dark = pn.widgets.Checkbox(value=pn.config.theme=='dark')

design_kwargs = dict(
    theme_config={'palette': {'primary': {'main': color}}},
    theme=dark.rx().rx.where('dark', 'default')
)
...
MuiComponent(**design_kwargs)

Compared to just about any other way of writing GUI code, this is really concise, which is great. Still, I personally have a very hard time reading dark.rx().rx.where('dark', 'default'). What it does is simple, i.e. to provide the string 'dark' when the checkbox is selected, and the string 'default' otherwise, but I don't think that simple behavior is particularly obvious or readable.

I think the issue here is that the checkbox's semantics weren't declared when the checkbox is declared, in the same way that a Numpy column has no declared semantics or meaning, while a Pandas column does (a name that says what it is, so that the meaning is no longer sitting only in the programmer's head). A Select widget does capture that semantics, with each option in the selector having a meaningful name and even potentially a name and associated Python object. If Philipp had used a Select here, he wouldn't have needed the awkward where expression, but that wasn't the UI he wanted, so he used a checkbox and then had to later impose a semantic mapping from [True, False] to [dark,default].

So, can we provide support for such semantic mapping in a Checkbox and other similar widgets like Switch, Toggle, and ToggleIcon? I'm imagining a syntax just like Select's:

color = pn.widgets.ColorPicker(value='#ff0000')
dark = pn.widgets.Checkbox(value=pn.config.theme, options=['dark', 'default'])

design_kwargs = dict(
    theme_config={'palette': {'primary': {'main': color}}},
    theme=dark
)
...
MuiComponent(**design_kwargs)

Here the declaration of the widget captures the semantics, and then the program can simply use it, which I greatly prefer.

[Coderambling]

Agree with both your comments. The first code snippet is very compact / concise, but also hard to comprehend for new users. Does that apply to more cases that use .rx ?

The second code example feels easier to read / parse / comprehend.