diff --git a/web/components/charts/tooltips/BarTooltip.tsx b/web/components/charts/tooltips/BarTooltip.tsx index ea37c186..63171b6f 100644 --- a/web/components/charts/tooltips/BarTooltip.tsx +++ b/web/components/charts/tooltips/BarTooltip.tsx @@ -4,7 +4,6 @@ import React from "react"; import type { TooltipContentProps } from "recharts"; import { DedicatedBadge } from "@/components/shared/DedicatedInferenceInfo"; -import { RegionBadge } from "@/components/shared/InferenceRegionInfo"; import { normalizeModelName } from "@/lib/utils/formatters"; import { WER_BREAKDOWN_LABELS } from "@/lib/utils/werBreakdown"; import type { BarDataPoint } from "@/types/benchmark.types"; @@ -16,8 +15,6 @@ interface CustomBarTooltipProps extends Partial string; /** Dedicated-inference endpoints carry the badge in their tooltip. */ dedicatedModels?: Set; - /** Model key -> inference region, for models served outside our worker's region. */ - crossRegionModels?: Map; /** Bar dataKey to read; defaults to WER so existing callers are unchanged. */ dataKey?: string; /** Value caption; defaults to WER wording. */ @@ -32,7 +29,6 @@ const CustomBarTooltip: React.FC = ({ label, getProviderForModel, dedicatedModels, - crossRegionModels, dataKey = "averageWER", valueLabel = "Average WER", formatValue = (value) => `${value.toFixed(1)}%` @@ -60,7 +56,6 @@ const CustomBarTooltip: React.FC = ({ style={{ margin: 0, fontWeight: "bold", color: "var(--color-text-on-tooltip)" }} >{`Model: ${modelLabel}`}

{dedicatedModels?.has(modelKey) && } -

{`${valueLabel}: ${formatValue( value )}`}

diff --git a/web/components/charts/tooltips/ScatterTooltip.tsx b/web/components/charts/tooltips/ScatterTooltip.tsx index a322da30..0b49ce03 100644 --- a/web/components/charts/tooltips/ScatterTooltip.tsx +++ b/web/components/charts/tooltips/ScatterTooltip.tsx @@ -5,7 +5,6 @@ import React from "react"; import type { TooltipContentProps } from "recharts"; import type { ScatterDataPoint } from "@/types/benchmark.types"; import { DedicatedBadge } from "@/components/shared/DedicatedInferenceInfo"; -import { RegionBadge } from "@/components/shared/InferenceRegionInfo"; import { normalizeModelName, normalizeSTTProviderName, normalizeTTSProviderName } from "@/lib/utils/formatters"; interface ScatterTooltipProps extends Partial; - /** Model key -> inference region, for models served outside our worker's region. */ - crossRegionModels?: Map; } -const CustomScatterTooltip: React.FC = ({ active, payload, activeTab, metric, dedicatedModels, crossRegionModels }) => { +const CustomScatterTooltip: React.FC = ({ active, payload, activeTab, metric, dedicatedModels }) => { if (active && payload && payload.length > 0) { const item = payload[0]; const point = item?.payload as ScatterDataPoint | undefined; @@ -40,7 +37,6 @@ const CustomScatterTooltip: React.FC = ({ active, payload, >{`Model: ${normalizeModelName(point.model)}`}

{`Provider: ${activeTab === "stt" ? normalizeSTTProviderName(point.provider) : normalizeTTSProviderName(point.provider)}`}

{dedicatedModels?.has(point.model) && } -

{`Avg ${metric}: ${point.x.toFixed(0)}ms`}

{`Avg WER: ${point.y.toFixed(1)}%`}

{`Samples: ${point.count}`}

diff --git a/web/components/charts/tooltips/TimelineTooltip.tsx b/web/components/charts/tooltips/TimelineTooltip.tsx index daa29df3..1b0365f4 100644 --- a/web/components/charts/tooltips/TimelineTooltip.tsx +++ b/web/components/charts/tooltips/TimelineTooltip.tsx @@ -3,6 +3,7 @@ import React from "react"; import type { TooltipContentProps } from "recharts"; +import { RegionBadge } from "@/components/shared/InferenceRegionInfo"; import { formatDate, formatTimeWithSeconds, normalizeModelName } from "@/lib/utils/formatters"; interface TimelineTooltipProps extends Partial string; /** IANA timezone (e.g. "UTC") for the timestamp label; defaults to the viewer's local zone. */ timeZone?: string; + /** Model key -> inference region, for models served outside our worker's region. */ + crossRegionModels?: Map; } -const CustomTimelineTooltip: React.FC = ({ active, payload, label, getProviderForModel, showDate, dimmedKeys, compact, interactionHint, maxHeight, onModelClick, hasRecording, labelText, formatValue, timeZone }) => { +const CustomTimelineTooltip: React.FC = ({ active, payload, label, getProviderForModel, showDate, dimmedKeys, compact, interactionHint, maxHeight, onModelClick, hasRecording, labelText, formatValue, timeZone, crossRegionModels }) => { if (!active || !payload || payload.length === 0) return null; // Filter out null/undefined values and sort by value (fastest to slowest) @@ -191,10 +194,14 @@ const CustomTimelineTooltip: React.FC = ({ active, payload style={{ color: "var(--color-text-on-tooltip-secondary)", fontSize: "10px", - marginTop: "1px" + marginTop: "1px", + display: "flex", + alignItems: "center", + gap: "6px" }} > {provider} + diff --git a/web/components/dashboard/LatencyAccuracySection.tsx b/web/components/dashboard/LatencyAccuracySection.tsx index e8553376..a379fd10 100644 --- a/web/components/dashboard/LatencyAccuracySection.tsx +++ b/web/components/dashboard/LatencyAccuracySection.tsx @@ -65,7 +65,6 @@ const LatencyAccuracySection: React.FC = () => { getScatterData, activeMetric: metric, dedicatedModels, - crossRegionModels, } = useDashboard(); const activeTab = useActiveTab(); @@ -368,7 +367,6 @@ const LatencyAccuracySection: React.FC = () => { activeTab={activeTab} metric={metric} dedicatedModels={dedicatedModels} - crossRegionModels={crossRegionModels} /> )} @@ -414,7 +412,6 @@ const LatencyAccuracySection: React.FC = () => { activeTab={activeTab} metric={metric} dedicatedModels={dedicatedModels} - crossRegionModels={crossRegionModels} /> } isAnimationActive={false} diff --git a/web/components/dashboard/QualityBarSection.tsx b/web/components/dashboard/QualityBarSection.tsx index 5e3093d8..64ffb3fb 100644 --- a/web/components/dashboard/QualityBarSection.tsx +++ b/web/components/dashboard/QualityBarSection.tsx @@ -4,14 +4,13 @@ "use client"; import React, { useCallback, useMemo, useRef, useState } from "react"; -import { Globe, Server } from "lucide-react"; +import { Server } from "lucide-react"; import { Cell, type LabelProps } from "recharts"; import CustomBarTooltip from "@/components/charts/tooltips/BarTooltip"; import QualityMetricBars from "@/components/charts/QualityMetricBars"; import { normalizeModelName, parseModelKey } from "@/lib/utils/formatters"; import Card from "@/components/shared/Card"; import { useDedicatedInfoTip } from "@/components/shared/DedicatedInferenceInfo"; -import { REGION_CONTENT } from "@/components/shared/InferenceRegionInfo"; import SectionHeader from "@/components/shared/SectionHeader"; import WerDatasetSelect from "@/components/dashboard/WerDatasetSelect"; import { datasetLabel } from "@/lib/config/datasets"; @@ -88,7 +87,6 @@ const QualityBarSection: React.FC = () => { instructionBarDataWithColors, getProviderForModel, dedicatedModels, - crossRegionModels, isMobile, clickedWERBars, handleWERBarClick, @@ -106,11 +104,9 @@ const QualityBarSection: React.FC = () => { const chartWrapRef = useRef(null); const { iconHandlers: dedicatedIconHandlers, - handlersFor, overlay: dedicatedOverlay, open: dedicatedTipOpen, } = useDedicatedInfoTip(chartWrapRef); - const regionIconHandlers = useMemo(() => handlersFor(REGION_CONTENT), [handlersFor]); const handleWERBarClickTracked = ( data: Parameters[0] @@ -191,7 +187,7 @@ const QualityBarSection: React.FC = () => { {`${Number(value).toFixed(1)}%`} {/* Caveat markers ride the top of the bar, under the value; hover or - tap opens the explainer. Two markers sit side by side. */} + tap opens the explainer. */} {entry && [ dedicatedModels.has(entry.model) @@ -202,14 +198,6 @@ const QualityBarSection: React.FC = () => { on: dedicatedIconHandlers, } : null, - crossRegionModels.has(entry.model) - ? { - key: "region", - Icon: Globe, - label: "About inference region", - on: regionIconHandlers, - } - : null, ] .filter((m): m is NonNullable => m !== null) .map(({ key, Icon, label, on }, i, all) => { @@ -250,8 +238,6 @@ const QualityBarSection: React.FC = () => { themeColors.label, dedicatedModels, dedicatedIconHandlers, - crossRegionModels, - regionIconHandlers, ] ); @@ -397,7 +383,6 @@ const QualityBarSection: React.FC = () => { dataKey="instructionScore" valueLabel="Instruction adherence" formatValue={(value) => `${value.toFixed(0)}%`} - crossRegionModels={crossRegionModels} /> } isMobile={isMobile} @@ -423,7 +408,6 @@ const QualityBarSection: React.FC = () => { } isMobile={isMobile} diff --git a/web/components/layout/FacetFilter.tsx b/web/components/layout/FacetFilter.tsx index a331c091..01dfaeb4 100644 --- a/web/components/layout/FacetFilter.tsx +++ b/web/components/layout/FacetFilter.tsx @@ -4,8 +4,12 @@ "use client"; import React from "react"; -import { ChevronDown, Server } from "lucide-react"; -import { DEDICATED_INFERENCE, SOURCE_CATEGORY } from "@/lib/utils/facets"; +import { ChevronDown, Globe, Server } from "lucide-react"; +import { + DEDICATED_INFERENCE, + REGION_CATEGORY, + SOURCE_CATEGORY, +} from "@/lib/utils/facets"; import { useDashboard } from "@/contexts/DashboardContext"; import { useSidebarMenu } from "@/contexts/SidebarMenuContext"; import TimeWindowToggle from "@/components/shared/TimeWindowToggle"; @@ -134,6 +138,9 @@ const FacetFilter: React.FC = () => { option.value === DEDICATED_INFERENCE && ( )} + {group.category === REGION_CATEGORY && ( + + )} {option.label} { legendModels, toggleLegendModel, dedicatedModels, + crossRegionModels, selectedModels, page, s2sPlayRequest, @@ -1148,6 +1149,7 @@ const TimelineChart: React.FC = () => { compact timeZone={displayTz} hasRecording={page === "s2s" ? hasS2SBucketRecording : undefined} + crossRegionModels={crossRegionModels} /> } active={pinned || dragging || hoveredMarker || isMobile ? false : undefined} @@ -1318,6 +1320,7 @@ const TimelineChart: React.FC = () => { interactionHint="tap axis to see all" timeZone={displayTz} hasRecording={page === "s2s" ? hasS2SProviderRecording : undefined} + crossRegionModels={crossRegionModels} /> )} @@ -1356,6 +1359,7 @@ const TimelineChart: React.FC = () => { maxHeight={isMobile ? 106 : undefined} timeZone={displayTz} hasRecording={page === "s2s" ? hasS2SProviderRecording : undefined} + crossRegionModels={crossRegionModels} onModelClick={ page === "s2s" ? (model, label) =>