@skyhook-io/radar-app 1.16.2 → 1.17.0

package/src/components/traffic/TrafficFocusSearch.tsx

@@ -0,0 +1,172 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { clsx } from 'clsx'
+import { Crosshair, X } from 'lucide-react'
+import { Badge, Input } from '@skyhook-io/k8s-ui'
+import { useNavCustomization } from '../../context/NavCustomization'
+import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
+import { formatRate, searchEndpoints, type EndpointSummary, type TrafficFocus } from './trafficFilters'
+
+interface TrafficFocusSearchProps {
+  endpoints: EndpointSummary[]
+  onFocus: (focus: TrafficFocus) => void
+  isRateBased: boolean
+  /** The pane the overlay covers; the viewport when absent. */
+  overlayContainer?: HTMLElement | null
+  /** 'toolbar' is the floating chip over the graph; 'panel' the wider button
+   *  in the too-large panel. Both open the same overlay. */
+  variant?: 'toolbar' | 'panel'
+}
+
+export function TrafficFocusSearch({ endpoints, onFocus, isRateBased, overlayContainer, variant = 'toolbar' }: TrafficFocusSearchProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const resultsRef = useRef<HTMLDivElement>(null)
+
+  const results = useMemo(() => (isOpen ? searchEndpoints(endpoints, query) : []), [isOpen, endpoints, query])
+
+  useEffect(() => setSelectedIndex(0), [results])
+  useEffect(() => {
+    const el = resultsRef.current?.children[selectedIndex] as HTMLElement | undefined
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [selectedIndex])
+
+  const open = useCallback(() => {
+    setIsOpen(true)
+    setTimeout(() => inputRef.current?.focus(), 0)
+  }, [])
+  const close = useCallback(() => {
+    setIsOpen(false)
+    setQuery('')
+  }, [])
+  const choose = useCallback((e: EndpointSummary) => {
+    onFocus({ namespace: e.namespace, name: e.name })
+    close()
+  }, [onFocus, close])
+
+  // The view renders one of the two variants at a time, so whichever is shown
+  // owns the shortcut. An embedding host (Radar Hub) binds / to its own search.
+  const { embedded } = useNavCustomization()
+  useRegisterShortcut({
+    id: 'traffic-focus-search',
+    keys: '/',
+    description: 'Focus on a workload',
+    category: 'Search',
+    scope: 'traffic',
+    handler: open,
+    enabled: !embedded,
+  })
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      close()
+      return
+    }
+    if (results.length === 0) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setSelectedIndex(i => Math.min(i + 1, results.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setSelectedIndex(i => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      if (results[selectedIndex]) choose(results[selectedIndex])
+    }
+  }
+
+  const portalTarget = overlayContainer ?? (typeof document !== 'undefined' ? document.body : null)
+
+  return (
+    <>
+      {variant === 'toolbar' ? (
+        <button
+          type="button"
+          onClick={open}
+          className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-theme-surface/90 backdrop-blur border border-theme-border text-[11px] text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+        >
+          <Crosshair className="w-3 h-3" />
+          Focus on a workload
+          {!embedded && <kbd className="hidden sm:inline-flex items-center px-1 text-[10px] bg-theme-elevated rounded border border-theme-border-light">/</kbd>}
+        </button>
+      ) : (
+        <button
+          type="button"
+          onClick={open}
+          className="btn-brand-muted inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-md"
+        >
+          <Crosshair className="w-3.5 h-3.5" />
+          Focus on a workload…
+        </button>
+      )}
+
+      {isOpen && portalTarget && createPortal(
+        <div className={clsx(overlayContainer ? 'absolute' : 'fixed', 'inset-0 z-50 flex items-start justify-center pt-[10vh]')}>
+          <div className="absolute inset-0 bg-theme-base/60 backdrop-blur-sm" onClick={close} />
+          <div role="dialog" aria-label="Focus on a workload" className="relative w-full max-w-lg mx-4 bg-theme-surface border border-theme-border rounded-xl shadow-theme-lg overflow-hidden">
+            <div className="flex items-center gap-3 px-4 py-3 border-b border-theme-border">
+              <Crosshair className="w-5 h-5 text-theme-text-secondary" />
+              <Input
+                ref={inputRef}
+                value={query}
+                onChange={e => setQuery(e.target.value)}
+                onKeyDown={onKeyDown}
+                placeholder="Workload, service or external name…"
+                className="flex-1 bg-transparent text-theme-text-primary placeholder-theme-text-disabled outline-none text-sm"
+                autoFocus
+              />
+              {query && (
+                <button type="button" onClick={() => setQuery('')} aria-label="Clear" className="p-1 text-theme-text-secondary hover:text-theme-text-primary">
+                  <X className="w-4 h-4" />
+                </button>
+              )}
+              <kbd className="px-1.5 py-0.5 text-xs text-theme-text-tertiary bg-theme-elevated rounded border border-theme-border-light">ESC</kbd>
+            </div>
+            <div ref={resultsRef} className="max-h-[50vh] overflow-y-auto">
+              {results.map((e, index) => (
+                <button
+                  key={e.id}
+                  type="button"
+                  onClick={() => choose(e)}
+                  // Not onMouseEnter: results re-rendering under a resting
+                  // pointer would move the highlight away from what was typed.
+                  onMouseMove={() => { if (index !== selectedIndex) setSelectedIndex(index) }}
+                  className={clsx(
+                    'w-full flex items-center gap-3 px-4 py-2 text-left transition-colors',
+                    index === selectedIndex ? 'bg-theme-elevated/60' : 'hover:bg-theme-elevated/30',
+                  )}
+                >
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium text-theme-text-primary truncate">{e.name}</span>
+                      <span className="px-1.5 py-0.5 text-[10px] rounded bg-theme-elevated text-theme-text-secondary">{e.workloadKind || e.kind}</span>
+                    </div>
+                    {e.namespace && <div className="text-xs text-theme-text-tertiary truncate">{e.namespace}</div>}
+                  </div>
+                  <div className="flex items-center gap-1.5 shrink-0 text-[10px] tabular-nums">
+                    {e.drops > 0 && <Badge severity="error" size="sm">{e.drops.toLocaleString()} dropped</Badge>}
+                    {e.errors > 0 && <Badge severity="error" size="sm">{isRateBased ? `${formatRate(e.errors)}/s` : e.errors.toLocaleString()} 5xx</Badge>}
+                  </div>
+                </button>
+              ))}
+              {results.length === 0 && (
+                <div className="px-4 py-6 text-center text-sm text-theme-text-tertiary">
+                  {query
+                    ? <>No traffic for &ldquo;{query}&rdquo; in this view</>
+                    : 'Nothing in this view has traffic yet'}
+                </div>
+              )}
+            </div>
+            <div className="px-4 py-2 border-t border-theme-border text-xs text-theme-text-tertiary">
+              Shows the workload and everything it talks to. Only endpoints with traffic in this view are listed.
+            </div>
+          </div>
+        </div>,
+        portalTarget,
+      )}
+    </>
+  )
+}

package/src/components/traffic/TrafficGraph.tsx

@@ -18,12 +18,12 @@ import '@xyflow/react/dist/style.css'
 import ELK from 'elkjs/lib/elk.bundled.js'
 import type { AggregatedFlow } from '../../types'
 import { clsx } from 'clsx'
-import { X, ArrowRight, Globe, Server, Activity, Puzzle } from 'lucide-react'
+import { X, ArrowRight, Globe, Server, Activity, Puzzle, Crosshair } from 'lucide-react'
 import { isClusterAddon, type AddonMode } from './TrafficView'
 import { SEVERITY_BADGE, SEVERITY_DOT, SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
 import { getNamespaceColor } from '../../utils/traffic-colors'
 import { Tooltip } from '../ui/Tooltip'
-import { isRateBasedSource, isExternalKind, requestRateOf, errorRateOf, formatRate, displayVolume, latencyWeightOf } from './trafficFilters'
+import { isRateBasedSource, isExternalKind, requestRateOf, errorRateOf, formatRate, displayVolume, latencyWeightOf, edgesOnPort, type TrafficFocus } from './trafficFilters'
 
 const elk = new ELK()
 
@@ -48,6 +48,8 @@ export interface TrafficGraphSelection {
   sourceId?: string
   destId?: string
   port?: number
+  // The graph draws traffic of unknown direction as its own edge.
+  directionUnknown?: boolean
 }
 
 interface TrafficGraphProps {
@@ -57,7 +59,13 @@ interface TrafficGraphProps {
   serviceCategories?: Map<string, string>
   addonMode?: AddonMode
   trafficSource?: string
+  /** The selection, owned by the view: the graph shows it and reports clicks. */
+  selection?: TrafficGraphSelection | null
   onSelectionChange?: (selection: TrafficGraphSelection | null) => void
+  /** Narrows the view to a node and its neighbors. */
+  onFocus?: (focus: TrafficFocus) => void
+  /** The focused node, which is not offered as a focus again. */
+  focusedId?: string
 }
 
 // Phase 2.1: Calculate edge width based on connection count (log scale)
@@ -146,10 +154,12 @@ interface TrafficNodeData extends Record<string, unknown> {
   namespace?: string
   kind: string
   workload?: string
+  workloadKind?: string
   connections?: number
   totalConnections?: number // Total connections for this node
   namespaceColor?: string // Background color for namespace grouping
   isHotPath?: boolean // Whether this node is on a hot path
+  isFocused?: boolean // The endpoint the view is focused on
   isAddonNode?: boolean // Whether this is a cluster addon node
   serviceCategory?: string // For external nodes: database, cloud, etc.
   ports?: PortInfo[] // All inbound ports sorted by connection count
@@ -205,7 +215,7 @@ function TrafficNode({ data }: { data: TrafficNodeData }) {
                   : hasNamespaceColor
                     ? 'border-white/20'
                     : 'bg-theme-surface border-theme-border',
-        data.isHotPath && 'ring-2 ring-orange-500/50'
+        data.isFocused ? 'ring-2 ring-skyhook-500' : data.isHotPath && 'ring-2 ring-orange-500/50'
       )}
       style={{
         width: NODE_WIDTH,
@@ -426,11 +436,13 @@ function formatBytes(bytes: number): string {
 function DetailsPanel({
   selection,
   onClose,
+  onFocus,
   flows,
   isRateBased,
 }: {
   selection: Selection
   onClose: () => void
+  onFocus?: () => void
   flows: AggregatedFlow[]
   // True for sources that measure a rate rather than counting connections —
   // Istio and Beyla both do. Changes the wording and the /s suffix.
@@ -539,12 +551,26 @@ function DetailsPanel({
             {isNode ? (nodeData?.kind === 'Internet' ? 'Internet Traffic' : nodeData?.kind === 'Addon' ? 'Cluster Addons' : 'Service Details') : 'Connection Details'}
           </span>
         </div>
-        <button
-          onClick={onClose}
-          className="p-1 rounded hover:bg-theme-hover text-theme-text-secondary"
-        >
-          <X className="h-4 w-4" />
-        </button>
+        <div className="flex items-center gap-1">
+          {onFocus && (
+            <Tooltip content="Show only this and what it talks to">
+              <button
+                type="button"
+                onClick={onFocus}
+                className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-hover"
+              >
+                <Crosshair className="h-3.5 w-3.5" /> Focus
+              </button>
+            </Tooltip>
+          )}
+          <button
+            onClick={onClose}
+            aria-label="Close"
+            className="p-1 rounded hover:bg-theme-hover text-theme-text-secondary"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
       </div>
 
       {/* Content */}
@@ -569,7 +595,7 @@ function DetailsPanel({
                       : isExternalKind(nodeData.kind)
                         ? 'bg-yellow-500/20 text-yellow-400'
                         : 'bg-blue-500/20 text-blue-400'
-                )}>{nodeData.kind === 'Addon' ? 'Cluster Addons' : nodeData.kind}</span>
+                )}>{nodeData.kind === 'Addon' ? 'Cluster Addons' : nodeData.workloadKind || nodeData.kind}</span>
               </div>
               {nodeData.workload && nodeData.workload !== nodeData.label && (
                 <div className="text-xs text-theme-text-secondary">
@@ -1085,6 +1111,26 @@ function FitViewOnChange({
   return null
 }
 
+function edgeSelection(edge: Edge, flow: AggregatedFlow | undefined): Selection {
+  return {
+    type: 'edge',
+    id: edge.id,
+    data: {
+      source: edge.source,
+      target: edge.target,
+      port: flow?.port || 0,
+      connections: flow?.connections || 0,
+      protocol: flow?.protocol || 'tcp',
+      flow,
+    },
+  }
+}
+
+// The Internet node and the addon group stand for many endpoints at once.
+function isFocusable(id: string, data: TrafficNodeData | undefined): boolean {
+  return id !== 'addon-group' && !!data?.kind && data.kind !== 'Internet' && data.kind !== 'Addon' && data.kind !== 'AddonInternet'
+}
+
 // A pair can carry both oriented and unoriented traffic at the same port, and the
 // backend keeps those as separate aggregates because no single answer about the
 // direction is right for both. Without the suffix they would share an edge id and
@@ -1094,7 +1140,7 @@ function trafficEdgeId(sourceId: string, destId: string, flow: AggregatedFlow):
   return `${sourceId}->${destId}:${flow.port}${flow.directionUnknown ? ':unoriented' : ''}`
 }
 
-export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups = false, serviceCategories, addonMode = 'show', trafficSource = '', onSelectionChange }: TrafficGraphProps) {
+export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups = false, serviceCategories, addonMode = 'show', trafficSource = '', selection: viewSelection, onSelectionChange, onFocus, focusedId }: TrafficGraphProps) {
   // Beyla is rate-based too: its Connections field carries requests per second,
   // not a connection count, so it needs the same label Istio gets.
   const isRateBased = isRateBasedSource(trafficSource)
@@ -1217,6 +1263,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
             namespace: flow.source.namespace,
             kind: isAddonInternet ? 'AddonInternet' : flow.source.kind, // Keep AddonInternet kind for styling
             workload: flow.source.workload,
+            workloadKind: flow.source.workloadKind,
             connections: connectionCounts.get(sourceId),
             totalConnections: totalConnections.get(sourceId),
             namespaceColor: showNamespaceGroups && !sourceIsAddon ? getNamespaceColor(flow.source.namespace) : undefined,
@@ -1249,6 +1296,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
               namespace: flow.destination.namespace,
               kind: flow.destination.kind,
               workload: flow.destination.workload,
+              workloadKind: flow.destination.workloadKind,
               connections: connectionCounts.get(destId),
               totalConnections: totalConnections.get(destId),
               namespaceColor: showNamespaceGroups ? getNamespaceColor(flow.destination.namespace) : undefined,
@@ -1279,6 +1327,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
             namespace: flow.destination.namespace,
             kind: flow.destination.kind,
             workload: flow.destination.workload,
+            workloadKind: flow.destination.workloadKind,
             connections: connectionCounts.get(destId),
             totalConnections: totalConnections.get(destId),
             namespaceColor: showNamespaceGroups && !destIsAddon ? getNamespaceColor(flow.destination.namespace) : undefined,
@@ -1599,6 +1648,43 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
   const shouldFitViewRef = useRef(false)
   const prevFlowCountRef = useRef(flows.length)
 
+  // Drawn per pod, a focused workload is each of its pods.
+  const displayNodes = useMemo(() => {
+    if (!focusedId) return nodes
+    const isFocus = (n: Node<TrafficNodeData>) => n.id === focusedId ||
+      (n.data.kind === 'Pod' && !!n.data.workload && `${n.data.namespace ?? ''}/${n.data.workload}` === focusedId)
+    return nodes.map(n => (isFocus(n) ? { ...n, data: { ...n.data, isFocused: true } } : n))
+  }, [nodes, focusedId])
+
+  // A new focus is a different graph even when it has as many edges.
+  const prevFocusRef = useRef(focusedId)
+  if (prevFocusRef.current !== focusedId) {
+    prevFocusRef.current = focusedId
+    shouldFitViewRef.current = true
+  }
+
+  // The view owns the selection: it is set from outside the graph too (the
+  // connections table selects an edge). The details are read
+  // from the current layout, so a refresh updates them and a node that is no
+  // longer drawn closes them.
+  useEffect(() => {
+    if (viewSelection === undefined) return
+    if (!viewSelection) {
+      setSelection(null)
+      return
+    }
+    if (viewSelection.type === 'node' && viewSelection.nodeId) {
+      const node = layoutedNodes.find(n => n.id === viewSelection.nodeId)
+      setSelection(node ? { type: 'node', id: node.id, data: node.data } : null)
+      return
+    }
+    const between = layoutedEdges.filter(e =>
+      e.source === viewSelection.sourceId && e.target === viewSelection.destId &&
+      !!flowByEdgeId.get(e.id)?.directionUnknown === !!viewSelection.directionUnknown)
+    const [edge] = edgesOnPort(between, e => flowByEdgeId.get(e.id), viewSelection.port)
+    setSelection(edge ? edgeSelection(edge, flowByEdgeId.get(edge.id)) : null)
+  }, [viewSelection, layoutedNodes, layoutedEdges, flowByEdgeId])
+
   // Update nodes and edges when layout changes
   useEffect(() => {
     // Check if flow count changed (filter/namespace change)
@@ -1622,19 +1708,8 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
 
   const onEdgeClick: EdgeMouseHandler<Edge> = useCallback((_event, edge) => {
     const flow = flowByEdgeId.get(edge.id)
-    setSelection({
-      type: 'edge',
-      id: edge.id,
-      data: {
-        source: edge.source,
-        target: edge.target,
-        port: flow?.port || 0,
-        connections: flow?.connections || 0,
-        protocol: flow?.protocol || 'tcp',
-        flow,
-      },
-    })
-    onSelectionChange?.({ type: 'edge', sourceId: edge.source, destId: edge.target, port: flow?.port })
+    setSelection(edgeSelection(edge, flow))
+    onSelectionChange?.({ type: 'edge', sourceId: edge.source, destId: edge.target, port: flow?.port, directionUnknown: !!flow?.directionUnknown })
   }, [flowByEdgeId, onSelectionChange])
 
   const onPaneClick = useCallback(() => {
@@ -1645,7 +1720,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
   return (
     <div className="w-full h-full relative">
       <ReactFlow
-        nodes={nodes}
+        nodes={displayNodes}
         edges={edges}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
@@ -1677,7 +1752,15 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
       {selection && (
         <DetailsPanel
           selection={selection}
-          onClose={() => setSelection(null)}
+          onClose={onPaneClick}
+          onFocus={onFocus && selection.type === 'node' && selection.id !== focusedId && isFocusable(selection.id, selection.data as TrafficNodeData)
+            ? () => {
+                // The id is "ns/name"; an endpoint with no namespace is its
+                // name alone, which may hold a slash of its own.
+                const ns = (selection.data as TrafficNodeData).namespace || undefined
+                onFocus({ namespace: ns, name: ns ? selection.id.slice(ns.length + 1) : selection.id })
+              }
+            : undefined}
           flows={flows}
           isRateBased={isRateBased}
         />

package/src/components/traffic/TrafficGraphTooLarge.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { ChevronDown, Network } from 'lucide-react'
+import { pluralNoun } from '@skyhook-io/k8s-ui'
+import { SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
+import type { AggregatedFlow } from '../../types'
+import { LargeClusterNamespacePicker } from '../shared/LargeClusterNamespacePicker'
+import { TrafficConnectionsTable } from './TrafficConnectionsTable'
+import { TrafficFocusSearch } from './TrafficFocusSearch'
+import type { TrafficGraphSelection } from './TrafficGraph'
+import { formatRate, namespaceOverBudget, type EndpointSummary, type NamespaceSummary, type TrafficFocus } from './trafficFilters'
+
+const count = (n: number, noun: string) => `${n.toLocaleString()} ${pluralNoun(n, noun)}`
+
+interface TrafficGraphTooLargeProps {
+  graph: { nodes: number; edges: number }
+  /** The focused endpoint's name, when the view is a neighborhood. */
+  focusName?: string
+  /** The sidebar can hide other namespaces' endpoints from this view. */
+  canFilterNamespaces?: boolean
+  onDrawAnyway?: () => void
+  /** Null when the namespace can't be changed from here (a single namespace
+   *  in view, or a deployment scoped to one). */
+  namespaces: NamespaceSummary[] | null
+  onPickNamespace: (namespace: string) => void
+  endpoints: EndpointSummary[]
+  onFocus: (focus: TrafficFocus) => void
+  isRateBased: boolean
+  overlayContainer?: HTMLElement | null
+  flows: AggregatedFlow[]
+  selection: TrafficGraphSelection | null
+  onSelect: (selection: TrafficGraphSelection | null) => void
+  focusedId?: string
+  /** Shown above the explanation, in the layout rather than over it. */
+  notice?: ReactNode
+}
+
+function nextStep(focused: boolean, canPickNamespace: boolean, canFilterNamespaces: boolean): string {
+  if (focused) return 'Its connections are listed below, problems first. Focus on one of them, or narrow them with the traffic filters on the left.'
+  if (canPickNamespace) return 'They are listed below, problems first. Narrow to a namespace or focus on a workload to see a map.'
+  if (canFilterNamespaces) return 'They are listed below, problems first. Focus on a workload, or hide other namespaces in the Namespaces filter on the left.'
+  return 'They are listed below, problems first. Focus on a workload to see a map.'
+}
+
+/**
+ * Stands in for the map when it is too large to lay out: says why, offers the
+ * ways to narrow it, and lists the connections so the view still answers
+ * something.
+ */
+export function TrafficGraphTooLarge(props: TrafficGraphTooLargeProps) {
+  const { graph, focusName, canFilterNamespaces, onDrawAnyway, namespaces, onPickNamespace, endpoints, onFocus, isRateBased, overlayContainer, notice } = props
+  const [pickerOpen, setPickerOpen] = useState(false)
+  const pickerRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!pickerOpen) return
+    const handler = (e: MouseEvent) => {
+      if (pickerRef.current && !pickerRef.current.contains(e.target as Node)) setPickerOpen(false)
+    }
+    document.addEventListener('mousedown', handler, true)
+    return () => document.removeEventListener('mousedown', handler, true)
+  }, [pickerOpen])
+
+  const statsByName = useMemo(() => new Map((namespaces ?? []).map(ns => [ns.name, ns])), [namespaces])
+
+  return (
+    <div className="absolute inset-x-0 bottom-0 top-12 flex flex-col px-3 pb-3 gap-2">
+      {notice}
+      <div className="rounded-lg border border-theme-border bg-theme-surface px-4 py-3 shadow-theme-sm">
+        <div className="flex items-start gap-3">
+          <Network className="mt-0.5 h-5 w-5 shrink-0 text-theme-text-tertiary" />
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-medium text-theme-text-primary">
+              {focusName ? `${focusName} has too many connections to draw` : 'Too much traffic to draw at once'}
+            </div>
+            <p className="mt-0.5 text-xs text-theme-text-secondary">
+              {count(graph.nodes, 'endpoint')} and {count(graph.edges, 'connection')} — more than the map can lay out without freezing this tab.
+              {' '}{nextStep(!!focusName, !!namespaces?.length, !!canFilterNamespaces)}
+            </p>
+            <div className="mt-2 flex flex-wrap items-center gap-2">
+              {namespaces && namespaces.length > 0 && (
+                <div className="relative" ref={pickerRef}>
+                  <button
+                    type="button"
+                    onClick={() => setPickerOpen(o => !o)}
+                    aria-expanded={pickerOpen}
+                    className="btn-brand-muted inline-flex items-center gap-1 text-xs px-2.5 py-1 rounded-md"
+                  >
+                    Narrow to a namespace <ChevronDown className="h-3.5 w-3.5" />
+                  </button>
+                  {pickerOpen && (
+                    <div className="absolute left-0 top-full z-50 mt-1 w-80 rounded-lg border border-theme-border bg-theme-surface p-2 shadow-theme-lg">
+                      <LargeClusterNamespacePicker
+                        namespaces={namespaces}
+                        ranked
+                        onSelect={ns => {
+                          setPickerOpen(false)
+                          onPickNamespace(ns)
+                        }}
+                        renderMeta={name => {
+                          const ns = statsByName.get(name)
+                          if (!ns) return null
+                          return (
+                            <span className="flex shrink-0 items-center gap-1.5 text-[10px] tabular-nums text-theme-text-tertiary">
+                              {ns.drops > 0 && <span className={SEVERITY_TEXT.error}>{ns.drops.toLocaleString()} dropped</span>}
+                              {ns.errors > 0 && <span className={SEVERITY_TEXT.error}>{isRateBased ? `${formatRate(ns.errors)}/s` : ns.errors.toLocaleString()} 5xx</span>}
+                              <span>{count(ns.endpoints, 'endpoint')}</span>
+                              {namespaceOverBudget(ns) && <span className={SEVERITY_TEXT.warning}>too large to map</span>}
+                            </span>
+                          )
+                        }}
+                      />
+                      <p className="mt-1 px-1 text-[10px] text-theme-text-tertiary">
+                        Sets the namespace for all of Radar. Traffic to and from other namespaces stays in view.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              )}
+              <TrafficFocusSearch
+                endpoints={endpoints}
+                onFocus={onFocus}
+                isRateBased={isRateBased}
+                overlayContainer={overlayContainer}
+                variant="panel"
+              />
+              {onDrawAnyway && (
+                <button
+                  type="button"
+                  onClick={onDrawAnyway}
+                  className="text-xs px-2.5 py-1 rounded-md border border-theme-border text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-hover"
+                >
+                  Draw anyway
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="min-h-0 flex-1 overflow-hidden rounded-lg border border-theme-border bg-theme-surface">
+        <TrafficConnectionsTable
+          flows={props.flows}
+          isRateBased={isRateBased}
+          selection={props.selection}
+          onSelect={props.onSelect}
+          onFocus={onFocus}
+          focusedId={props.focusedId}
+        />
+      </div>
+    </div>
+  )
+}