How can i automatically refresh some objects of a page?

Help
1

Hello

Im new into Reflex and I am struggling with something I want to to. I currently have a page which has a grid of multiple rooms status. Each room has a number and a color representing a risk level. When page loads for the first time, colors are updated based on the roomId. I would like the color to be constantly updating every X minutes.
Here are some portions of my code.

Here i obtain the information from an external source

from Website.data.get_sql_data import get_info_room

   @rx.var
    def get_room_info(self) -> dict:
        data_room_info = get_info_room(self.id_room)
        
        result_dict = {
            "NumDocumento": data_room_info[0]['NumDocumento'],
            "Nom": data_room_info[0]['Nom'],
            "CodImagen": data_room_info[0]['CodImagen'],
            "FechaUltima": data_room_info[0]['FechaInicio'],  # Si todas son iguales
            "NivelRiesgo": data_room_info[0]['NivelAlerta'],
            "DescripcionRiesgo": data_room_info[0]['Descripcion'],
            "Etiquetas": [
                {
                    "IdCategoriaEtiqueta": item['IdCategoriaEtiqueta'],
                    "IdEtiqueta": item['IdEtiqueta'],
                    "NombreEtiqueta": item['NombreEtiqueta']
                }
                for item in data_room_info
            ]
        }
      
        result = result_dict
        return result

Here i define the colors based on the risk for each room

    @rx.var
    def load_data_room_card(self) -> list[dict[str, str]]:
        data_number_rooms = get_number_rooms(self.ubicacion)
        
        dict_alerta_color = {
            "3": styles.YellowColor.DARK,
            "2": styles.YellowColor.MEDIUM,
            "1": styles.YellowColor.LIGHT,
            "0": styles.BlueColor.LIGHT,
            "-1": styles.GrayColor.MEDIUM,
        }
        
        match_rooms_color = [
            {
                'IdCama': int(room['IdCama']),
                'NumHabitacion': int(room['NumHabitacion']),
                'color': dict_alerta_color[str(room['NivRiesgo'])]
            }
            for room in data_number_rooms
        ]
        
        return match_rooms_color

Here I create the grid for each room. Note the ‘bg’ element.

def grid_card_items(id_room: int, text: int, image: str, bg) -> rx.Component:
    
    return rx.link(
        rx.button(
            rx.flex(
                rx.icon(
                    image,
                    width = "100%",
                    height = "100px",
                    color = styles.BlueColor.LIGHT,
                ),
                rx.divider(
                    bg = styles.GrayColor.LIGHT,
                    height = "1px",
                ),
                rx.text(
                    text,
                    size = "8",
                    width = "100%",
                    border_radius = "10px",
                    color = styles.BlackColor.COLOR,
                    weight = "medium",
                    bg = bg,
                ),
                width = "100%",
                height = "100%",
                align_items = "center",
                spacing = "2",
                direction = "column",
            ),
            width = "100%",
            height = "140px",
            padding = "8px",
            border = "1px solid rgba(58, 58, 58, .8)",
            border_radius = "10px",
            bg = styles.GrayColor.DARK,
            _hover = {
                # "opacity": 1,
                "bg": styles.GrayColor.MEDIUM,
            },
            on_click = InfoRoom.click_room_card(id_room, text),
        ),
        href = "/vision_details",
    )

here i create the entire grid

def hosp_grid_floor_6(icon: str) -> rx.Component:
    
    return rx.grid(
        rx.foreach(
            InfoRoom.load_data_room_card,
            lambda item: grid_card_items(
                id_room=item["IdCama"],  # Reflex ya tiene el entero aquí
                text=item["NumHabitacion"],  # Reflex ya tiene el entero aquí
                image=icon,
                bg=item["color"]
            ),
        ),
        width = "100%",
        spacing = "4",
        padding_top = "16px",
        grid_template_columns = [
            "repeat(1, 1fr)",
            "repeat(2, 1fr)",
            "repeat(3, 1fr)",
            "repeat(4, 1fr)",
            "repeat(5, 1fr)",
            "repeat(6, 1fr)",
        ],
    )
2

Since you’re loading data from an external source in an rx.var, the framework doesn’t necessarily know when that needs to be updated.

Since you’re using non-cached rx.var any event sent to the backend will cause the data to be refreshed, so you can use rx.moment(interval=delay_in_ms, on_change=State.periodic_update(), display="none") to trigger an event from the frontend on a regular interval. This should be enough to cause the data to refresh.

In 0.7.0 however, the default for rx.var is to set cache=True, meaning the var won’t update unless some value it depends on has changed. In this case, I’d recommend changing get_room_info to a regular event handler that populates a regular state var with the data you need. Then set this as the page on_load and the moment on_change.