Fix routing UI bugs and unify chart formats

- Fix double-click bug on Let's ROUTE button (remove unnecessary yield)
- Disable Let's ROUTE button until routing model is selected
- Unify token charts: all values in millions (M)
- Unify legends: horizontal, positioned at top-right
- Fix model_name mismatch in calculated tokens

app.py

@@ -686,26 +686,26 @@ def create_token_charts(df: pd.DataFrame, input_price: float, cache_read_price:
 
     token_data = pd.DataFrame({
         "Token Type": ["Uncached Input", "Cache Read", "Cache Creation", "Completion"],
-        "Total Tokens": [total_uncached_input, total_cache_read, total_cache_creation, total_completion],
+        "Total Tokens (M)": [total_uncached_input / 1e6, total_cache_read / 1e6, total_cache_creation / 1e6, total_completion / 1e6],
     })
 
     fig_tokens = px.bar(
         token_data,
         x="Token Type",
-        y="Total Tokens",
+        y="Total Tokens (M)",
         title="Total Tokens by Type",
         color="Token Type",
         color_discrete_sequence=["#EF553B", "#19D3F3", "#FFA15A", "#AB63FA"],
     )
     fig_tokens.update_layout(
         xaxis_title="Token Type",
-        yaxis_title="Total Tokens",
+        yaxis_title="Tokens (M)",
         showlegend=False,
         margin=dict(l=40, r=20, t=40, b=40),
     )
-    total_all = token_data["Total Tokens"].sum()
+    total_all = total_uncached_input + total_cache_read + total_cache_creation + total_completion
     fig_tokens.add_annotation(
-        text=f"Total: {total_all:,.0f}",
+        text=f"Total: {total_all/1e6:.2f}M",
         xref="paper", yref="paper",
         x=0.95, y=0.95, showarrow=False,
         font=dict(size=12),
@@ -722,26 +722,26 @@ def create_token_charts(df: pd.DataFrame, input_price: float, cache_read_price:
 
     fig_stacked = go.Figure()
     fig_stacked.add_trace(go.Bar(
-        name="Uncached Input", x=df_sorted["trajectory_idx"], y=df_sorted["uncached_input_tokens"],
-        marker_color="#EF553B", hovertemplate="Trajectory: %{x}<br>Uncached Input: %{y:,.0f}<extra></extra>",
+        name="Uncached Input", x=df_sorted["trajectory_idx"], y=df_sorted["uncached_input_tokens"] / 1e6,
+        marker_color="#EF553B", hovertemplate="Trajectory: %{x}<br>Uncached Input: %{y:.2f}M<extra></extra>",
     ))
     fig_stacked.add_trace(go.Bar(
-        name="Cache Read", x=df_sorted["trajectory_idx"], y=df_sorted["cache_read_tokens"],
-        marker_color="#19D3F3", hovertemplate="Trajectory: %{x}<br>Cache Read: %{y:,.0f}<extra></extra>",
+        name="Cache Read", x=df_sorted["trajectory_idx"], y=df_sorted["cache_read_tokens"] / 1e6,
+        marker_color="#19D3F3", hovertemplate="Trajectory: %{x}<br>Cache Read: %{y:.2f}M<extra></extra>",
     ))
     fig_stacked.add_trace(go.Bar(
-        name="Cache Creation", x=df_sorted["trajectory_idx"], y=df_sorted["cache_creation_tokens"],
-        marker_color="#FFA15A", hovertemplate="Trajectory: %{x}<br>Cache Creation: %{y:,.0f}<extra></extra>",
+        name="Cache Creation", x=df_sorted["trajectory_idx"], y=df_sorted["cache_creation_tokens"] / 1e6,
+        marker_color="#FFA15A", hovertemplate="Trajectory: %{x}<br>Cache Creation: %{y:.2f}M<extra></extra>",
     ))
     fig_stacked.add_trace(go.Bar(
-        name="Completion", x=df_sorted["trajectory_idx"], y=df_sorted["completion_tokens"],
-        marker_color="#AB63FA", hovertemplate="Trajectory: %{x}<br>Completion: %{y:,.0f}<extra></extra>",
+        name="Completion", x=df_sorted["trajectory_idx"], y=df_sorted["completion_tokens"] / 1e6,
+        marker_color="#AB63FA", hovertemplate="Trajectory: %{x}<br>Completion: %{y:.2f}M<extra></extra>",
     ))
     fig_stacked.update_layout(
         barmode="stack",
         title="Tokens per Trajectory (stacked)",
         xaxis_title="Trajectory (sorted by total tokens)",
-        yaxis_title="Tokens",
+        yaxis_title="Tokens (M)",
         legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1),
         margin=dict(l=50, r=20, t=60, b=40),
     )
@@ -1367,7 +1367,7 @@ def build_app():
                                     end_step_3 = gr.Number(label="End (int=step; 0,0-1,0=ratio)", value=0.5, minimum=0, precision=2, interactive=True)
 
                     gr.Markdown("---")
-                    route_btn = gr.Button("🚀 Let's ROUTE!!", variant="primary", size="lg")
+                    route_btn = gr.Button("🚀 Let's ROUTE!!", variant="primary", size="lg", interactive=False)
                     routing_result = gr.Markdown(visible=False)
 
 
@@ -1458,7 +1458,7 @@ def build_app():
         def on_routing_model_1_select(model_name):
             prices = get_routing_prices_with_labels(model_name)
             show_btn = bool(model_name)
-            return *prices, gr.update(visible=show_btn)
+            return *prices, gr.update(visible=show_btn), gr.update(interactive=show_btn)
 
         def on_routing_model_2_select(model_name):
             prices = get_routing_prices_with_labels(model_name)
@@ -1471,7 +1471,7 @@ def build_app():
         routing_model_1.change(
             fn=on_routing_model_1_select,
             inputs=[routing_model_1],
-            outputs=[routing_price_1_input, routing_price_1_cache_read, routing_price_1_cache_creation, routing_price_1_completion, add_model_2_btn],
+            outputs=[routing_price_1_input, routing_price_1_cache_read, routing_price_1_cache_creation, routing_price_1_completion, add_model_2_btn, route_btn],
         )
 
         add_model_2_btn.click(
@@ -1645,13 +1645,6 @@ def build_app():
             additional_token_models = [(routing_model_1_val, total_routing_tokens)]
             additional_cost_models = [(routing_model_1_val, routing_costs)]
 
-            yield (
-                gr.update(visible=True, value="⏳ Creating charts..."),
-                gr.update(visible=True),
-                None,
-                None,
-            )
-
             tokens_chart = create_routed_token_chart(total_base_tokens, additional_token_models)
             cost_chart = create_routed_cost_chart(base_costs, additional_cost_models)