feat: Optionally comparing fields in Var.contains, e.g. on rx.Base based types.

[abulvenz]

I want to make the example app at the bottom work.

TLDR:

    rx.foreach(
        State.available_items,
        lambda item: rx.menu.item(
            rx.checkbox(
                item.name,
                checked=State.selected_items.contains(item.key, "key"),  # The argument "key" is new.
                on_change=lambda _: State.select_item(item),
            )
        ),
    )

The contains function checks if a var is contained in the array by comparing a specific field.
This can also be helpful in other circumstances.

Other implementation ideas:

• Use a function such as _.isEqual
• By default compare the field if item.key is passed (Maybe interfering with other use cases).
• Pass the entire JS-expression that should be used for comparison (Messy code).
• Use only keys for selected_items, that is not always possible (e.g. when using sqlalchemy-ORM objects.

Screenshot of the app:

"""Welcome to Reflex! This file outlines the steps to create a basic app."""

import reflex as rx
from rxconfig import config


class ComplexItem(rx.Base):
    name: str
    color: str
    key: str


class State(rx.State):
    selected_items: list[ComplexItem] = []

    available_items: list[ComplexItem] = [
        ComplexItem(name="Apple", color="red", key="apple"),
        ComplexItem(name="Banana", color="yellow", key="banana"),
        ComplexItem(name="Orange", color="orange", key="orange"),
        ComplexItem(name="Grape", color="purple", key="grape"),
        ComplexItem(name="Kiwi", color="green", key="kiwi"),
        ComplexItem(name="Blueberry", color="blue", key="blueberry"),
    ]

    def select_item(self, item: ComplexItem):
        if item in self.selected_items:
            self.selected_items.remove(item)
        else:
            self.selected_items.append(item)
            

def index() -> rx.Component:
    return rx.container(
        rx.color_mode.button(position="top-right"),
        rx.menu.root(
            rx.menu.trigger(rx.button("Select Items")),
            rx.menu.content(
                rx.foreach(
                    State.available_items,
                    lambda item: rx.menu.item(
                        rx.checkbox(
                            item.name,
                            checked=State.selected_items.contains(item.key, "key"),
                            on_change=lambda _: State.select_item(item),
                        )
                    ),
                )
            ),
        ),
        rx.grid(
            rx.foreach(
            State.selected_items,
            lambda item: rx.card(
                rx.text(item.name, size="2"),
                rx.text(item.key, size="1"),
                style={"width": "200px", "color": item.color},
            ),
        ),
        columns="4",
        ),
    )


app = rx.App()
app.add_page(index)

[benedikt-bartscher]

Awesome, looks good to me. Thanks, @abulvenz

[masenf]

i haven't tested the suggested change, but i think field should be specifiable as another var, like the other var operations.

[masenf]

i think this should work if the field is specified as a state var, so maybe we can write it like

field = Var.create_safe(field, _var_is_string=isinstance(field, str))

and

f"{self._var_name}.some(e=>e[{field._var_full_name}]==={other._var_full_name})"

[abulvenz]

@masenf Thanks for your idea. I tried it as you suggested:

    _var_name = None
    if field is None:
        _var_name = f"{self._var_name}.includes({other._var_full_name})"
    else:
        field = Var.create_safe(field, _var_is_string=isinstance(field, str))
        _var_name = f"{self._var_name}.some(e=>e[{field._var_full_name}]==={other._var_full_name})"

The code results in this for string literals passed in

<RadixThemesCheckbox 
  checked={state__state.selected_items.some(e=>e[key]===item.key)} 
 ...
/>

where key is not defined ⚡.
Maybe it would be helpful for me to understand the aim of your suggested change.

[Lendemor]

I think the purpose is being able to write something like

rx.foreach(
    State.available_items,
    lambda item: rx.menu.item(
        rx.checkbox(
            item.name,
            checked=State.selected_items.contains(item.key, State.filter_key),
            on_change=lambda _: State.select_item(item),
        )
    ),
)

where you can change the value of filter_key dynamically

[masenf]

ah okay, we actually need _var_name_unwrapped, like this

_var_name = f"{self._var_name}.some(e=>e[{field._var_name_unwrapped}]==={other._var_full_name})"

[abulvenz]

Thanks @masenf, I will use your corrected version, it works with both strings and vars.

One thing that is that e.{field} could also take nested values like field="address.street" which will not work with the e[...] syntax.

I can also support this case, when I use this abomination:

_var_name = f"{self._var_name}.some(e=>{field._var_name_unwrapped}.split(\".\").reduce((acc,v)=>acc[v],e)==={other._var_full_name})"

class ComplexKey(rx.Base):
    part1: str
    part2: int

class ComplexItem(rx.Base):
    name: str
    color: str
    key: ComplexKey

Then you could write:

State.selected_items.contains(item.key.part1, "key.part1"),

But at some point it becomes ridiculously complex...

-------- 8< --------- 8< --------------

And ideas for sleepless nights 🛌 🖥️
Please nobody take this seriously 😄

import reflex.js as js
...
checked=State.selected_items.some(
    js.λ("e", 
        js.var("e")
            .subscript(State.filter_key)                        
            .equals(js.var(State.search_text)
        )
    )
),
...
assert js.λ("e", 
        js.var("e")
            .subscript(State.filter_key)                        
            .equals(State.search_text)
        )
    ).__str__() == "e=>e[state__state.filter_key]===state__state.search_text"

assert is_turing_complete(js)

[masenf]

🏆