Show the inference region only where latency is plotted

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<Pick<
   getProviderForModel?: (model: string) => string;
   /** Dedicated-inference endpoints carry the badge in their tooltip. */
   dedicatedModels?: Set<string>;
-  /** Model key -> inference region, for models served outside our worker's region. */
-  crossRegionModels?: Map<string, string>;
   /** 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<CustomBarTooltipProps> = ({
   label,
   getProviderForModel,
   dedicatedModels,
-  crossRegionModels,
   dataKey = "averageWER",
   valueLabel = "Average WER",
   formatValue = (value) => `${value.toFixed(1)}%`
@@ -60,7 +56,6 @@ const CustomBarTooltip: React.FC<CustomBarTooltipProps> = ({
           style={{ margin: 0, fontWeight: "bold", color: "var(--color-text-on-tooltip)" }}
         >{`Model: ${modelLabel}`}</p>
         {dedicatedModels?.has(modelKey) && <DedicatedBadge />}
-        <RegionBadge region={crossRegionModels?.get(modelKey)} />
         <p style={{ margin: 0, color: "var(--color-text-on-tooltip)" }}>{`${valueLabel}: ${formatValue(
           value
         )}`}</p>

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<Pick<
@@ -16,11 +15,9 @@ interface ScatterTooltipProps extends Partial<Pick<
   metric: string;
   /** Dedicated-inference endpoints carry the server marker in their tooltip. */
   dedicatedModels?: Set<string>;
-  /** Model key -> inference region, for models served outside our worker's region. */
-  crossRegionModels?: Map<string, string>;
 }
 
-const CustomScatterTooltip: React.FC<ScatterTooltipProps> = ({ active, payload, activeTab, metric, dedicatedModels, crossRegionModels }) => {
+const CustomScatterTooltip: React.FC<ScatterTooltipProps> = ({ 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<ScatterTooltipProps> = ({ active, payload,
         >{`Model: ${normalizeModelName(point.model)}`}</p>
         <p style={{ margin: 0 }}>{`Provider: ${activeTab === "stt" ? normalizeSTTProviderName(point.provider) : normalizeTTSProviderName(point.provider)}`}</p>
         {dedicatedModels?.has(point.model) && <DedicatedBadge />}
-        <RegionBadge region={crossRegionModels?.get(point.model)} />
         <p style={{ margin: 0 }}>{`Avg ${metric}: ${point.x.toFixed(0)}ms`}</p>
         <p style={{ margin: 0 }}>{`Avg WER: ${point.y.toFixed(1)}%`}</p>
         <p style={{ margin: 0 }}>{`Samples: ${point.count}`}</p>

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<Pick<
@@ -37,9 +38,11 @@ interface TimelineTooltipProps extends Partial<Pick<
   formatValue?: (value: number) => 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<string, string>;
 }
 
-const CustomTimelineTooltip: React.FC<TimelineTooltipProps> = ({ active, payload, label, getProviderForModel, showDate, dimmedKeys, compact, interactionHint, maxHeight, onModelClick, hasRecording, labelText, formatValue, timeZone }) => {
+const CustomTimelineTooltip: React.FC<TimelineTooltipProps> = ({ 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<TimelineTooltipProps> = ({ active, payload
                     style={{
                       color: "var(--color-text-on-tooltip-secondary)",
                       fontSize: "10px",
-                      marginTop: "1px"
+                      marginTop: "1px",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px"
                     }}
                   >
                     {provider}
+                    <RegionBadge region={crossRegionModels?.get(modelName)} />
                   </div>
                 </div>
               </div>

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}
               />
             </div>
           )}
@@ -414,7 +412,6 @@ const LatencyAccuracySection: React.FC = () => {
                       activeTab={activeTab}
                       metric={metric}
                       dedicatedModels={dedicatedModels}
-                      crossRegionModels={crossRegionModels}
                     />
                   }
                   isAnimationActive={false}

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<HTMLDivElement>(null);
   const {
     iconHandlers: dedicatedIconHandlers,
-    handlersFor,
     overlay: dedicatedOverlay,
     open: dedicatedTipOpen,
   } = useDedicatedInfoTip(chartWrapRef);
-  const regionIconHandlers = useMemo(() => handlersFor(REGION_CONTENT), [handlersFor]);
 
   const handleWERBarClickTracked = (
     data: Parameters<typeof handleWERBarClick>[0]
@@ -191,7 +187,7 @@ const QualityBarSection: React.FC = () => {
             {`${Number(value).toFixed(1)}%`}
           </text>
           {/* 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<typeof m> => 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 = () => {
               <CustomBarTooltip
                 getProviderForModel={getProviderForModel}
                 dedicatedModels={dedicatedModels}
-                crossRegionModels={crossRegionModels}
               />
             }
             isMobile={isMobile}

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 && (
                           <Server size={12} aria-hidden className="shrink-0" />
                         )}
+                      {group.category === REGION_CATEGORY && (
+                        <Globe size={12} aria-hidden className="shrink-0" />
+                      )}
                       <span>{option.label}</span>
                       <span
                         style={{

web/components/visualizations/TimelineChart.tsx

@@ -271,6 +271,7 @@ const TimelineChart: React.FC = () => {
     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}
               />
             </div>
           )}
@@ -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) =>