Support easy match layout

[MarcSkovMadsen]

With React and Reflex its easy to layout based on a match https://reflex.dev/docs/library/dynamic-rendering/match/:

With Panel you have to write some boiler plat code breaking the layout into more pieces. For example the match function below:

# https://reflex.dev/docs/library/dynamic-rendering/cond/

import param
import panel as pn

pn.extension()

class MatchState(param.Parameterized):
    cat_breed: str = param.String("persian")
    animal_options: list[str] = param.List([
        "persian",
        "siamese",
        "maine coon",
        "ragdoll",
        "pug",
        "corgi",
    ])

def match(cond, *match_cases):
    if isinstance(cond, param.Parameter):
        return pn.bind(match, cond, *match_cases)

    default = pn.pane.Str("No Match")
    
    for item in match_cases:
        if isinstance(item, (list, tuple)):
            key, value = item
            if cond==key:
                return value
        else:
            default = item
    
    return default

state = MatchState()

def match_demo():
    return pn.Column(
        pn.widgets.Select.from_param(state.param.cat_breed, options=state.param.animal_options),
        match(
            state.param.cat_breed,
             ("persian", pn.pane.Str("Persian cat selected.")),
            ("siamese", pn.pane.Str("Siamese cat selected.")),
            (
                "maine coon",
                pn.pane.Str("Maine Coon cat selected."),
            ),
            ("ragdoll", pn.pane.Str("Ragdoll cat selected.")),
            pn.pane.Str("Unknown cat breed selected."),
        )
    )


pn.Column(
    match_demo
).servable()

This makes it harder to use Panel. Furthermore there is no .rx.match function. I think there should be?

[MarcSkovMadsen]

Alternative Implementations

Reactive pipe and get (Recommended?)

This one is using reactive expressions

# https://reflex.dev/docs/library/dynamic-rendering/cond/

import param
import panel as pn

pn.extension()

class MatchState(param.Parameterized):
    cat_breed: str = param.String("persian")
    animal_options: list[str] = param.List([
        "persian",
        "siamese",
        "maine coon",
        "ragdoll",
        "pug",
        "corgi",
    ])

state = MatchState()

def match_demo():
    return pn.Column(
        pn.widgets.Select.from_param(state.param.cat_breed, options=state.param.animal_options),
        pn.rx([
            ("persian", pn.pane.Str("Persian cat selected.")),
            ("siamese", pn.pane.Str("Siamese cat selected.")),
            (
                "maine coon",
                pn.pane.Str("Maine Coon cat selected."),
            ),
            ("ragdoll", pn.pane.Str("Ragdoll cat selected.")),
        ]).rx.pipe(dict).get(state.param.cat_breed,  pn.pane.Str("Unknown cat breed selected.")),
    )

pn.Column(
    match_demo
).servable()

It works. It might not be clear to users as its not documented. The specific match function is easier to read. But I think this is OK and we should just document it?

The simplified version below is probably the one that should end up in the documentation

import param
import panel as pn

pn.extension()

class MatchState(param.Parameterized):
    cat_breed: str = param.Selector(objects=[
        "persian",
        "siamese",
        "maine coon",
        "ragdoll",
        "pug",
        "corgi",
    ])

state = MatchState()

def match_demo():
    return pn.Column(
        pn.widgets.Select.from_param(state.param.cat_breed),
        pn.rx({
            "persian": pn.pane.Str("Persian cat selected."),
            "siamese": pn.pane.Str("Siamese cat selected."),
            "maine coon": pn.pane.Str("Maine Coon cat selected."),
            "ragdoll": pn.pane.Str("Ragdoll cat selected."),
        }).get(state.param.cat_breed,  pn.pane.Str("Unknown cat breed selected.")),
    )

match_demo().servable()

Here is the christmas version

import param
import panel as pn

pn.extension(design="bootstrap")

class HolidayMatchState(param.Parameterized):
    holiday_item: str = param.Selector(objects=[
        "🎄 Christmas Tree",
        "🎅 Santa Claus",
        "🎁 Gift",
        "🦌 Reindeer",
        "❄️ Snowflake",
        "🌟 Star",
    ])

state = HolidayMatchState()

def holiday_match_demo():
    return pn.Column(
        pn.widgets.Select.from_param(state.param.holiday_item, name="Choose Your Holiday Favorite 🎉"),
        pn.rx({
            "🎄 Christmas Tree": pn.pane.Str("You picked the festive 🎄 Christmas Tree!"),
            "🎅 Santa Claus": pn.pane.Str("Ho ho ho! 🎅 Santa is here!"),
            "🎁 Gift": pn.pane.Str("A 🎁 Gift? What could it be? 🎀"),
            "🦌 Reindeer": pn.pane.Str("The 🦌 Reindeer are ready to fly!"),
            "🌟 Star": pn.pane.Str("The 🌟 Star shines bright this holiday season!"),
        }).get(state.param.holiday_item, pn.pane.Str("Unknown holiday favorite selected! 🎅")),
    )

holiday_match_demo().servable()

For some unknown reason it works as a server app. But it did not work for me in jupyter or vs code notebooks using different python environments! When I select another value nothing happens.

[philippjfr]

The notebook version does work for me as well and yes, the .get approach is what I've used in the past.