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) =>