fix(playground): fix selector blank display for router update and creation (load balancing strategy)

Author: tibo-pdn

playground/app/features/routers/components/forms.py

@@ -33,11 +33,11 @@ def router_settings_form_fields() -> rx.Component:
         ),
         entity_form_select_field(
             label="Load balancing strategy",
-            items=RoutersState.router_load_balancing_strategies_list,
+            value_labels={"shuffle": "Shuffle", "least_busy": "Least busy"},
             value=RoutersState.entity.load_balancing_strategy,
             on_change=lambda value: RoutersState.set_edit_entity_attribut("load_balancing_strategy", value),
             tooltip="Strategy to use for load balancing between providers of the router",
-            disable=RoutersState.edit_entity_loading,
+            disabled=RoutersState.edit_entity_loading,
         ),
         entity_form_input_field(
             label="Prompt tokens cost",
@@ -106,7 +106,7 @@ def router_create_form_fields() -> rx.Component:
         ),
         entity_form_select_field(
             label="Load balancing strategy",
-            items=RoutersState.router_load_balancing_strategies_list,
+            value_labels={"shuffle": "Shuffle", "least_busy": "Least busy"},
             value=RoutersState.entity_to_create.load_balancing_strategy,
             on_change=lambda value: RoutersState.set_new_entity_attribut("load_balancing_strategy", value),
             tooltip="Strategy to use for load balancing between providers of the router",

playground/app/features/routers/state.py

@@ -26,11 +26,6 @@ def router_types_list(self) -> list[str]:
             ]
         )
 
-    @rx.var
-    def router_load_balancing_strategies_list(self) -> list[str]:
-        """Get list of router load balancing strategies."""
-        return ["Shuffle", "Least busy"]
-
     ############################################################
     # Load entities
     ############################################################
@@ -40,17 +35,13 @@ def router_load_balancing_strategies_list(self) -> list[str]:
     def _format_router(self, router: dict) -> Router:
         """Format router."""
 
-        _load_balancing_strategy_converter = {
-            "shuffle": "Shuffle",
-            "least_busy": "Least busy",
-        }
         return Router(
             id=router["id"],
             name=router["name"],
             user=self.router_owners[router["user_id"]],
             type=router["type"],
             aliases=",".join(router["aliases"]) if router["aliases"] else "",
-            load_balancing_strategy=_load_balancing_strategy_converter.get(router["load_balancing_strategy"]),
+            load_balancing_strategy=router["load_balancing_strategy"],
             max_context_length=router["max_context_length"],
             vector_size=router["vector_size"],
             cost_prompt_tokens=router["cost_prompt_tokens"],
@@ -182,7 +173,7 @@ async def delete_entity(self):
     ############################################################
     entity_to_create: Router = Router(
         type="text-generation",
-        load_balancing_strategy="Shuffle",
+        load_balancing_strategy="shuffle",
         cost_prompt_tokens=0.0,
         cost_completion_tokens=0.0,
     )
@@ -205,12 +196,10 @@ async def create_entity(self):
         self.create_entity_loading = True
         yield
 
-        new_router_load_balancing_strategy = self.entity_to_create.load_balancing_strategy.lower().replace(" ", "_")
-
         payload = {
             "name": self.entity_to_create.name,
             "type": self.entity_to_create.type,
-            "load_balancing_strategy": new_router_load_balancing_strategy,
+            "load_balancing_strategy": self.entity_to_create.load_balancing_strategy,
             "cost_prompt_tokens": self.entity_to_create.cost_prompt_tokens,
             "cost_completion_tokens": self.entity_to_create.cost_completion_tokens,
         }
@@ -276,13 +265,12 @@ async def edit_entity(self):
         yield
 
         router_aliases = [alias.strip() for alias in self.entity.aliases.split(",") if alias.strip()]
-        router_load_balancing_strategy = self.entity.load_balancing_strategy.lower().replace(" ", "_")
 
         payload = {
             "name": self.entity.name,
             "type": self.entity.type,
             "aliases": router_aliases,
-            "load_balancing_strategy": router_load_balancing_strategy,
+            "load_balancing_strategy": self.entity.load_balancing_strategy,
             "cost_prompt_tokens": self.entity.cost_prompt_tokens,
             "cost_completion_tokens": self.entity.cost_completion_tokens,
         }

playground/app/shared/components/forms.py

@@ -8,11 +8,12 @@
 
 def entity_form_select_field(
     label: str,
-    items: rx.var,
+    items: rx.var = None,
     value: Any = None,
     on_change: Callable | None = None,
     disabled: bool = False,
     tooltip: str | None = None,
+    value_labels: dict[str, str] | None = None,
     **kwargs,
 ) -> rx.Component:
     normalized_value: Any = ""
@@ -23,6 +24,30 @@ def entity_form_select_field(
     else:
         normalized_value = value
 
+    placeholder = kwargs.pop("placeholder", None)
+
+    if value_labels is not None:
+        trigger = rx.select.trigger(placeholder=placeholder, width="100%") if placeholder else rx.select.trigger(width="100%")
+        select_component = rx.select.root(
+            trigger,
+            rx.select.content(
+                *[rx.select.item(display, value=val) for val, display in value_labels.items()],
+            ),
+            value=normalized_value,
+            on_change=on_change,
+            disabled=disabled,
+        )
+    else:
+        select_component = rx.select(
+            items=items,
+            value=normalized_value,
+            on_change=on_change,
+            disabled=disabled,
+            placeholder=placeholder,
+            **kwargs,
+            width="100%",
+        )
+
     return rx.vstack(
         rx.cond(
             bool(tooltip),
@@ -37,14 +62,7 @@ def entity_form_select_field(
             ),
             rx.text(label, size=TEXT_SIZE_LABEL, weight="bold"),
         ),
-        rx.select(
-            items=items,
-            value=normalized_value,
-            on_change=on_change,
-            disabled=disabled,
-            **kwargs,
-            width="100%",
-        ),
+        select_component,
         spacing=SPACING_TINY,
         width="100%",
     )