Using a Pandas dataframe with Foreach

[chimeracle]

I'm trying to use a dataframe in a foreach loop inside a responsive grid. I'm following the docs example as close as possible and calling the row data passed to create_card like a row from the pandas function iterrows. Running the app throws a type error relating to the type for row. Does anyone know how to correct what I'm doing or point me in the right direction?

import pandas as pd
import reflex as rx


class UserState(rx.State):
    @rx.var
    def get_users(self) -> pd.DataFrame:
        # Usually call database for this
        df = pd.DataFrame({'col1': [1, 2], 'col2': [3, 4],
                           'col3': [5, 6]})
        return df

    df_users: pd.DataFrame = get_users


def create_card(row, index):
    return rx.card(
        rx.text(row['col2']),
        header=rx.heading(row['col1'], size="lg"),
        footer=rx.heading(row['col3'], size="sm"),
    )


def user_grid() -> rx.Component:
    return rx.fragment(rx.vstack(
        rx.heading("Sample"),
        rx.responsive_grid(
            rx.foreach(UserState.df_users, lambda row, index: create_card(row, index)),
            columns=[1, 2]
        )
    )
    )


app = rx.App()
app.add_page(user_grid())
app.compile()

Traceback:

Traceback (most recent call last):
  File "C:\Program Files\Python310\lib\runpy.py", line 196, in _run_module_as_main
    return _run_code(code, main_globals, None,
  File "C:\Program Files\Python310\lib\runpy.py", line 86, in _run_code
    exec(code, run_globals)
  File "C:\Users\PycharmProjects\reflex_test\venv\Scripts\reflex.exe\__main__.py", line 7, in <module>
    sys.exit(cli())
  File "C:\Users\PycharmProjects\reflex_test\venv\lib\site-packages\typer\main.py", line 214, in __call__
    return get_command(self)(*args, **kwargs)
  File "C:\Users\PycharmProjects\reflex_test\venv\lib\site-packages\click\core.py", line 1157, in __call__
    return self.main(*args, **kwargs)
  File "C:\Users\PycharmProjects\reflex_test\venv\lib\site-packages\click\core.py", line 1078, in main
    rv = self.invoke(ctx)
  File "C:\Users\PycharmProjects\reflex_test\venv\lib\site-packages\click\core.py", line 1688, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "C:\Users\PycharmProjects\reflex_test\venv\lib\site-packages\click\core.py", line 1434, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "C:\Users\PycharmProjects\reflex_test\venv\lib\site-packages\click\core.py", line 783, in invoke
    return __callback(*args, **kwargs)
  File "C:\Users\PycharmProjects\reflex_test\venv\lib\site-packages\typer\main.py", line 532, in wrapper
    return callback(**use_params)  # type: ignore
  File "C:\Users\PycharmProjects\reflex_test\venv\lib\site-packages\reflex\reflex.py", line 146, in run
    prerequisites.get_app()
  File "C:\Users\PycharmProjects\reflex_test\venv\lib\site-packages\reflex\utils\prerequisites.py", line 114, in get_app
    app = __import__(module, fromlist=(constants.APP_VAR,))
  File "C:\Users\PycharmProjects\reflex_test\reflex_test\reflex_test.py", line 36, in <module>
    app.add_page(user_grid())
  File "C:\Users\PycharmProjects\reflex_test\reflex_test\reflex_test.py", line 28, in user_grid
    rx.foreach(UserState.df_users, lambda row, index: create_card(row, index)),
  File "C:\Users\PycharmProjects\reflex_test\venv\lib\site-packages\reflex\components\layout\foreach.py", line 53, in create
    children=[IterTag.render_component(render_fn, arg=arg)],
  File "C:\Users\PycharmProjects\reflex_test\venv\lib\site-packages\reflex\components\tags\iter_tag.py", line 77, in render_component
    component = render_fn(arg, index)
  File "C:\Users\PycharmProjects\reflex_test\reflex_test\reflex_test.py", line 28, in <lambda>
    rx.foreach(UserState.df_users, lambda row, index: create_card(row, index)),
  File "C:\Users\PycharmProjects\reflex_test\reflex_test\reflex_test.py", line 18, in create_card
    rx.text(row['col2']),
  File "C:\Users\PycharmProjects\reflex_test\venv\lib\site-packages\reflex\vars.py", line 284, in __getitem__
    raise TypeError(
TypeError: Could not index into var of type Any. (If you are trying to index into a state var, add the correct type annotation to the var.)

[masenf]

Reflex does not currently support iterrows style for DataFrame inside the foreach, but you can do something like this with a cached_var to convert the rows to something that reflex can handle (note the return type annotation list[dict], which allows iteration and then indexing)

import pandas as pd
import reflex as rx


class UserState(rx.State):
    @rx.cached_var
    def get_users(self) -> pd.DataFrame:
        # Usually call database for this
        df = pd.DataFrame({'col1': [1, 2], 'col2': [3, 4],
                           'col3': [5, 6]})
        return df

    @rx.cached_var
    def user_rows(self) -> list[dict]:
        return [row[1].to_dict() for row in self.get_users.iterrows()]


def create_card(row, index):
    return rx.card(
        rx.text(row['col2']),
        header=rx.heading(row['col1'], size="lg"),
        footer=rx.heading(row['col3'], size="sm"),
    )


def user_grid() -> rx.Component:
    return rx.fragment(rx.vstack(
        rx.heading("Sample"),
        rx.responsive_grid(
            rx.foreach(UserState.user_rows, lambda row, index: create_card(row, index)),
            columns=[1, 2]
        )
    )
    )


app = rx.App()
app.add_page(user_grid(), route="/")
app.compile()

[chimeracle]

@masenf Thanks for this. It works. I'm a bit confused on how the rx.cached_var hands off the dictionary to create_card. When I ran a print(type(row['username'])) and print(row['username'] inside create_card, they came back reflex.vars.BaseVar and _['username'] respectively. How is rx.text able to accept it, but I can't print it?

I'm asking, because I want to set up an on_click event in create_card to rx.redirect("/user/[username]"), but I'm having trouble accessing the card values. Using the below, it redirects to http://localhost:3000/user/$%7Bzssupsyz[%22username%22]%7D/

import pandas as pd
import reflex as rx


class UserState(rx.State):
    @rx.cached_var
    def get_users(self) -> pd.DataFrame:
        df = pd.DataFrame({'userID': [110035, 566822, 393939, 175839], 'username': ["Fredericks101", "Sleebarg34", "BigRoger", "HatsOff404"],
                           'usertype': ["Basic User", "Advanced User", "Administrator", "Basic User"]})
        return df

    @rx.cached_var
    def user_rows(self) -> list[dict]:
        return [row[1].to_dict() for row in self.get_users.iterrows()]


def create_card(row, index):
    print(row)
    print(type(row))
    print(type(row['username']))
    return rx.card(
        rx.text(row['username']),
        header=rx.heading(row['userID'], size="lg"),
        footer=rx.heading(row['usertype'], size="sm"),
        on_click=rx.redirect(f"/user/{row['username']}"),
        _hover={"shadow": "15px -15px 32px #0d0f15, -15px 15px 32px #2d374b"},
    )


def user_grid() -> rx.Component:
    return rx.fragment(rx.vstack(
        rx.heading("Sample"),
        rx.container(height="20px"),
        rx.responsive_grid(
            rx.foreach(UserState.user_rows, lambda row, index: create_card(row, index)),
            spacing="4",
            columns=[1, 2, 3]
        )
    )
    )


app = rx.App()
app.add_page(user_grid(), route="/")
app.compile()

[masenf]

The BaseVar is essentially a placeholder for what the value will be on the frontend. Keep in mind that the create_card function runs at compile time, when the frontend is being transpiled from python into a NextJS app. At the time this frontend is generated, the python code cannot know what the value will be. It's only at runtime, in the client browser, when the State is hydrated and has the actual value that the frontend is able to render it.

As for why the rx.redirect isn't working, I'd actually consider that a bug. Try the same thing, but set it up as a regular event handler that returns the rx.redirect (essentially do the URL formatting on the backend, not the frontend)

[chimeracle]

@masenf I tried three different ways to use an event handler to build the url by using on_click to call it:

@rx.var
    def card_link(self, user_link):
        return rx.redirect(f"/user/{user_link}")

Produces:

File "C:\Users\PycharmProjects\reflex_app3\reflex_app3\reflex_app3.py", line 26, in create_card
    on_click=UserState.card_link(row['username']),
TypeError: 'ComputedVar' object is not callable

Second:

@rx.cached_var
    def card_link(self, user_link):
        return rx.redirect(f"/user/{user_link}")

Produces:

File "C:\Users\PycharmProjects\reflex_app3\reflex_app3\reflex_app3.py", line 26, in create_card
    on_click=UserState.card_link(row['username']),
TypeError: 'ComputedVar' object is not callable

And third is outside the state:

def card_link(user_link):
    return rx.redirect(f"/user/{user_link}")

This one allowed the app to run, but gave the weird variable:
http://localhost:3000/user/$%7Biwghgbgi[%22username%22]%7D/

[masenf]

card_link is "ComputedVar" because it is decorated with rx.var or rx.cached_var, these functions act like property, they cannot take parameters and are computed based on the current state.

My suggestion was to use a normal event handler, so remove these decorators and try again.