How to extract primitive types from Var?

[owlur]

Hi, I'm looking to implement color assignment for parameters in Reflex, where each parameter name is assigned a color and this mapping is stored. When a parameter name key is encountered, the stored color should be applied. The following code snippet achieves the desired functionality:

class ColorState(rx.State):
    colors: list[str] = ["indigo", "cyan", "orange", "crimson"]
    parameter_color: dict[str, str] = {}

    parameter_names: list[str] = []
    parameter_items: list[dict[str, str]] = [{}]

    def load(self):
        # result from any api
        self.parameter_names = ["param_a", "param_b"]
        self.parameter_items = [{
            "param_a": "a-1",
            "param_b": "b-1"
        }, {
            "param_a": "a-2",
            "param_b": "b-2"
        }]

        self.parameter_color = {
            parameter: self.colors[i % len(self.colors)]
            for i, parameter in enumerate(self.parameter_names)
        }


def show_param_name(param_name: str) -> rx.Component:
    return rx.badge(param_name, color_scheme=ColorState.parameter_color[param_name])


def show_param_dict(param: tuple[str, str]):
    return rx.badge(f"{param[0]}: {param[1]}", color_scheme=ColorState.parameter_color[param[0]])


def show_param_items(param_dict) -> rx.Component:
    return rx.hstack(
        rx.foreach(
            param_dict, show_param_dict
        )
    )


@rx.page(route="/test", on_load=ColorState.load)
def example():
    return rx.vstack(
        rx.hstack(
            rx.foreach(
                ColorState.parameter_names, show_param_name
            )
        ),
        rx.foreach(
            ColorState.parameter_items, show_param_items
        ),
        margin="10px"
    )

Using on_load to directly retrieve the dictionary works correctly and I can write the code as I intended.

However, the problem arises when I want to separate it using ComponentState. Below is the attempt I made to separate it into ComponentState. This is not the complete code, and I tried to output only the parameter names:

class ParameterComponent(rx.ComponentState):
    colors: list[str] = ["indigo", "cyan", "orange", "crimson"]
    parameter_color: dict[str, str] = {}

    param_names: list[str] = []
    parameter_items: list[dict[str, str]] = [{}]

    @classmethod
    def show_param_name(cls, param_name: str) -> rx.Component:
        return rx.badge(param_name, color_scheme=cls.parameter_color[param_name])

    @classmethod
    def get_component(cls, **props):
        cls.param_names: list[str] = props.pop("param_names")
        cls.parameter_items = props.pop("parameter_items")

        cls.parameter_color = {
            parameter: cls.colors[i % cls.colors.length()]
            for i, parameter in enumerate(cls.param_names)
        }

        return rx.vstack(
            rx.hstack(
                rx.foreach(
                    cls.param_names, lambda v: cls.show_param_name(v)
                )
            ),
            margin="10px"
        )

parameter_component = ParameterComponent.create

@rx.page(route="/test2")
def example2():
    return parameter_component(
        param_names=["param_a", "param_b"],
        parameter_items=[{
            "param_a": "a-1",
            "param_b": "b-1"
        }, {
            "param_a": "a-2",
            "param_b": "b-2"
        }]
    )

When running the above code, a KeyError occurs as shown below, which seems to be due to param_name being converted to a Var during the foreach iteration:

    return rx.badge(param_name, color_scheme=cls.parameter_color[param_name])
                                             ~~~~~~~~~~~~~~~~~~~^^^^^^^^^^^^
KeyError: BaseVar(_var_name='v', _var_type=typing.Any, _var_is_local=False, _var_is_string=False, _var_full_name_needs_state_prefix=False, _var_data=None)

I have tried various methods, but it becomes difficult to write the desired logic because primitive types are converted to BaseVar in some way. Is there a way to extract primitive types from Var, or any appropriate methods to handle this in the code above?

[masenf]

I think the main problem that you're encountering is that get_component should not be assigning to the BaseVars param_names, parameter_items or parameter_color. This is overwriting the placeholder with an actual value that will not work in a rendering function.

A workaround is to set the default value for the field inside get_component, but this is a bit hacky.

    @classmethod
    def get_component(cls, **props):
        param_names = cls.__fields__["param_names"].default = props.pop("param_names")
        cls.__fields__["parameter_items"].default = props.pop("parameter_items")

        # Not clear if `cls.colors` is intended to be a state var or a ClassVar
        colors = cls.__fields__["colors"].default
        cls.__fields__["parameter_color"].default = {
            parameter: colors[i % colors.length()]
            for i, parameter in enumerate(param_names)
        }

As you can see, this isn't so nice. We're still trying to figure out a good API for how to set the initial values for the ComponentState class that gets created, based on values the user supplies to create.

[owlur]

@masenf Your solution worked perfectly! Thank you so much for your help.

However, I was actually trying to accomplish a more complex task and simplified my question for clarity (since I believed solving the simplified version would help me with the actual problem I'm facing).

What I'm really trying to do is to manage and modify the following Base within a State, as shown in the code below:

class ParameterData(rx.Base):
    parameter_names: list[str]
    parameter_items: list[dict[str, str]]

class PageState(rx.State):
    parameter_data: ParameterData | None

    def load(self):
        self.parameter_data = ParameterData(
            parameter_names=["param_a", "param_b"],
            parameter_items=[{
                "param_a": "a-1",
                "param_b": "b-1"
            }, {
                "param_a": "a-2",
                "param_b": "b-2"
            }]
        )

Based on your response, I revised my code as follows:

class ParameterComponent(rx.ComponentState):
    colors: list[str] = ["indigo", "cyan", "orange", "crimson"]
    parameter_color: dict[str, str] = {}

    parameter_data: ParameterData | None

    def add_parameter(self, form_data, parameter_data: ParameterData):
        # # AttributeError: The State var `state__page_state.parameter_data?.parameter_names` has no attribute 'append' or may have been annotated wrongly.
        self.__fields__["parameter_data"].default.parameter_names.append(form_data["input_parameter"])

        # parameter_data is converted to a dictionary. why?
        parameter_data["parameter_names"].append(form_data["input_parameter"])

    @classmethod
    def show_param_name(cls, param_name: str) -> rx.Component:
        return rx.badge(param_name, color_scheme=cls.parameter_color[param_name])

    @classmethod
    def get_component(cls, **props):
        cls.parameter_data = cls.__fields__["parameter_data"].default = props.pop("parameter_data")

        # # TypeError: Cannot iterate over Var 'state__page_state.parameter_data?.parameter_names'. Instead use `rx.foreach`.
        # colors = cls.__fields__["colors"].default
        # cls.__fields__["parameter_color"].default = {
        #     parameter: colors[i % len(colors)]
        #     for i, parameter in enumerate(cls.parameter_data.parameter_names)
        # }

        # hard coding for test
        cls.__fields__["parameter_color"].default = {"param_a": "indigo", "param_b": "cyan"}


        return rx.vstack(
            rx.hstack(
                rx.foreach(
                    cls.parameter_data.parameter_names, lambda v: cls.show_param_name(v)
                ),
                rx.form(
                    rx.input(placeholder="add param..", name="input_parameter"),
                    on_submit=lambda form_data: cls.add_parameter(form_data, cls.parameter_data)
                )
            ),
            margin="10px"
        )


parameter_component = ParameterComponent.create


@rx.page(route="/test3", on_load=PageState.load)
def example3():
    return parameter_component(
        parameter_data=PageState.parameter_data
    )

As you can see, there are several issues with this code:

• parameter_data.parameter_names becomes a Var, making it impossible to iterate over in a for loop.
• When trying to add parameter_name using add_parameter()
  • Initially, I tried adding it via __fields__["parameter_data"].default, but received the following error: AttributeError: The State var state__page_state.parameter_data has no attribute 'append' or may have been annotated wrongly. One question here is why the append() method fails, even though it's used in the example. Is this the intended behavior?
  • I then tried passing parameter_data as a parameter to modify it, but it gets converted to a dictionary and any modifications are not reflected back in the State.

Could you please advise if there's any other approach I should try?