From adb59a7af8a709801f19056759a3a55e93d750a1 Mon Sep 17 00:00:00 2001 From: "devin-ai-integration[bot]" <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Mon, 5 Oct 2026 08:42:19 -0700 Subject: [PATCH] fix(ui): remove Top models by task card from Model Leaderboard (#44502) Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Ishaan Jaffer <155045088+ishaan-berri@users.noreply.github.com> --- .../_components/ModelInsightsView.test.tsx | 57 +-------- .../_components/ModelInsightsView.tsx | 118 +----------------- .../_components/modelInsightsData.ts | 10 -- 3 files changed, 8 insertions(+), 177 deletions(-) diff --git a/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/ModelInsightsView.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/ModelInsightsView.test.tsx index 37d265c4e35..7aad92f9814 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/ModelInsightsView.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/ModelInsightsView.test.tsx @@ -20,7 +20,6 @@ vi.mock("recharts", () => ({ ), CartesianGrid: () => null, - Treemap: () => null, XAxis: () => null, YAxis: () => null, })); @@ -45,48 +44,26 @@ const response = { daily_totals: [{ date: "2026-09-28", spend: 2.5, prompt_tokens: 1000, completion_tokens: 2000, requests: 12 }], }; -const taskResponse = { - start_date: "2025-09-29", - end_date: "2026-09-28", - tasks: [ - { - task_type: "code_generation", - label: "Code Generation", - category: "Code", - value: 2.5, - share: 100, - leader: "fast-chat", - provider: "openai", - }, - ], -}; - -const mockApi = (tasks: unknown = taskResponse) => - vi - .mocked(apiClient.get) - .mockImplementation((path: string) => - path === "/model-insights/tasks" ? (tasks as Promise) : Promise.resolve(response), - ); - describe("ModelInsightsView", () => { beforeEach(() => { vi.mocked(apiClient.get).mockReset(); - mockApi(Promise.resolve(taskResponse)); + vi.mocked(apiClient.get).mockResolvedValue(response); }); - it("shows the ranking with share and the task legend from the API response", async () => { + it("shows the ranking with share from the API response", async () => { render(); expect(await screen.findByText("fast-chat")).toBeInTheDocument(); expect(screen.getByText("by openai")).toBeInTheDocument(); - expect(await screen.findByText("Code")).toBeInTheDocument(); - expect(screen.getAllByText("100.0%")).toHaveLength(2); + expect(screen.getAllByText("100.0%")).toHaveLength(1); + expect(screen.queryByText("Top models by task")).not.toBeInTheDocument(); expect(screen.getByRole("tab", { name: "tokens" })).toHaveAttribute("aria-selected", "true"); expect(screen.getByRole("tab", { name: "log" })).toBeInTheDocument(); expect(apiClient.get).toHaveBeenCalledWith("/model-insights", { accessToken: "token", query: { metric: "tokens" }, }); + expect(apiClient.get).not.toHaveBeenCalledWith("/model-insights/tasks", expect.anything()); }); it("refetches with the selected metric so top models are ranked by it", async () => { @@ -103,24 +80,6 @@ describe("ModelInsightsView", () => { ); }); - it("does not refetch the task breakdown when the chart metric changes", async () => { - render(); - await screen.findByText("Code"); - const taskCalls = () => - vi.mocked(apiClient.get).mock.calls.filter(([path]) => path === "/model-insights/tasks").length; - const before = taskCalls(); - - await userEvent.click(screen.getByRole("tab", { name: "requests" })); - await waitFor(() => - expect(apiClient.get).toHaveBeenCalledWith("/model-insights", { - accessToken: "token", - query: { metric: "requests" }, - }), - ); - - expect(taskCalls()).toBe(before); - }); - it("shows the API error instead of loading forever", async () => { vi.mocked(apiClient.get).mockRejectedValue(new Error("Only proxy admins can view deployment-wide model insights")); render(); @@ -133,11 +92,7 @@ describe("ModelInsightsView", () => { render(); await screen.findByText("fast-chat"); let resolve: (value: typeof response) => void = () => {}; - vi.mocked(apiClient.get).mockImplementation((path: string) => - path === "/model-insights/tasks" - ? Promise.resolve(taskResponse) - : new Promise((done) => (resolve = done as typeof resolve)), - ); + vi.mocked(apiClient.get).mockImplementation(() => new Promise((done) => (resolve = done as typeof resolve))); await userEvent.click(screen.getByRole("tab", { name: "spend" })); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/ModelInsightsView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/ModelInsightsView.tsx index ab406597589..21a707b8c42 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/ModelInsightsView.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/ModelInsightsView.tsx @@ -2,8 +2,8 @@ import { Page } from "@/components/shared/Page"; import React from "react"; -import { Bar, BarChart, CartesianGrid, Treemap, XAxis, YAxis } from "recharts"; -import { ArrowDownRight, ArrowUpRight, BarChart3, Layers, Minus } from "lucide-react"; +import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"; +import { ArrowDownRight, ArrowUpRight, BarChart3, Minus } from "lucide-react"; import { apiClient } from "@/components/networking"; import { extractErrorMessage } from "@/utils/errorUtils"; @@ -12,7 +12,6 @@ import { PageHeader, PageHeaderDescription, PageHeaderTitle } from "@/components import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Skeleton } from "@/components/ui/skeleton"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { @@ -22,8 +21,6 @@ import { Granularity, Metric, ModelInsightsResponse, - ModelInsightTasksResponse, - TaskSummary, modelOrder, rankModels, RankedModel, @@ -41,13 +38,6 @@ const PALETTE = [ "#6366f1", "#f97316", ]; -const FALLBACK_COLOR = "#64748b"; -const CATEGORY_COLORS: Record = { - General: "#ee8650", - Agent: "#7666e4", - Code: "#5fb074", - Data: "#3b82f6", -}; const SCALES = ["linear", "log"] as const; const GRANULARITIES = ["day", "week"] as const; const GRANULARITY_LABELS: Record = { day: "Daily", week: "Weekly" }; @@ -90,37 +80,11 @@ const RankingRow = ({ model, rank }: { model: RankedModel; rank: number }) => ( ); -type TileProps = TaskSummary & { x: number; y: number; width: number; height: number; index: number }; - -const TaskTileContent = ({ x, y, width, height, category, label, leader }: TileProps) => { - if (width <= 0 || height <= 0) return null; - const color = CATEGORY_COLORS[category] ?? FALLBACK_COLOR; - const fits = width > 90 && height > 44; - return ( - - - {fits && ( - <> - - {label} - - - {leader} - - - )} - - ); -}; - export default function ModelInsightsView({ accessToken }: { accessToken: string | null }) { const [loaded, setLoaded] = React.useState<{ metric: Metric; response: ModelInsightsResponse } | null>(null); const [metric, setMetric] = React.useState("tokens"); const [scale, setScale] = React.useState("linear"); const [granularity, setGranularity] = React.useState("day"); - const [taskMetric, setTaskMetric] = React.useState("spend"); - const [taskData, setTaskData] = React.useState(null); - const [taskError, setTaskError] = React.useState(null); const [error, setError] = React.useState(null); React.useEffect(() => { @@ -141,24 +105,6 @@ export default function ModelInsightsView({ accessToken }: { accessToken: string }; }, [accessToken, metric]); - React.useEffect(() => { - if (!accessToken) return; - let cancelled = false; - apiClient - .get("/model-insights/tasks", { accessToken, query: { metric: taskMetric } }) - .then((response) => { - if (cancelled) return; - setTaskError(null); - setTaskData(response); - }) - .catch((err: unknown) => { - if (!cancelled) setTaskError(extractErrorMessage(err)); - }); - return () => { - cancelled = true; - }; - }, [accessToken, taskMetric]); - const data = loaded?.response ?? null; const shown = loaded?.metric ?? metric; const isStale = loaded !== null && loaded.metric !== metric; @@ -176,15 +122,6 @@ export default function ModelInsightsView({ accessToken }: { accessToken: string () => (data ? rankModels(data.top_models, data.daily, shown, range) : []), [data, shown, range], ); - const tiles = React.useMemo(() => taskData?.tasks ?? [], [taskData]); - const categoryShares = React.useMemo( - () => - [...new Set(tiles.map((tile) => tile.category))].map((category) => ({ - category, - share: tiles.filter((tile) => tile.category === category).reduce((sum, tile) => sum + tile.share, 0), - })), - [tiles], - ); if (error) { return ( @@ -317,57 +254,6 @@ export default function ModelInsightsView({ accessToken }: { accessToken: string - - -
- - Top models by task - - - Each task's share of {METRIC_LABELS[taskMetric]}, labelled with its leading model - -
- - - - {taskError && ( - - Could not load tasks - {taskError} - - )} - - ({ ...tile, name: tile.task_type }))} - dataKey="value" - isAnimationActive={false} - content={} - /> - -
    - {categoryShares.map(({ category, share }) => ( -
  • - - {category} - {share.toFixed(1)}% -
    • - ))} -
- - - Cost per session diff --git a/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/modelInsightsData.ts b/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/modelInsightsData.ts index 0e1a5fa7aac..9e0aecc9e8e 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/modelInsightsData.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/modelInsightsData.ts @@ -21,16 +21,6 @@ export type ModelInsightsResponse = { daily_totals: DailyTotal[]; top_models: ModelMetric[]; }; -export type TaskSummary = { - task_type: string; - label: string; - category: string; - value: number; - share: number; - leader: string; - provider: string; -}; -export type ModelInsightTasksResponse = { start_date: string; end_date: string; tasks: TaskSummary[] }; export type RankedModel = { model_group: string; provider: string; share: number; delta: number }; export type Granularity = "day" | "week";