@skyhook-io/radar-app 0.2.1 → 0.3.1

package/src/components/timeline/TimelineView.urlparams.test.ts

@@ -0,0 +1,335 @@
+import { describe, expect, it } from 'vitest'
+import type { ActivityFilterKey, TimelineGrouping, TimelineSort } from '@skyhook-io/k8s-ui'
+import {
+  parseTimeMode,
+  resolveApplicationTimelineScope,
+  writeTimelineParams,
+  onlyHighFreqDiffer,
+  timeModeEqual,
+  type TimelineMode,
+  type PersistedTimelineState,
+  type TimelineViewMode,
+} from './TimelineView'
+
+// These mirror the module-private defaults writeTimelineParams omits at (and
+// parseTimeMode falls back to). Kept in sync deliberately: the round-trip tests
+// below fail loudly if a module default drifts from what is asserted here.
+const DEFAULT_LIVE_WIDTH_MS = 60 * 60 * 1000
+const DAY_MS = 24 * 60 * 60 * 1000
+const DEFAULT_VIEW: TimelineViewMode = 'swimlane'
+const DEFAULT_GROUPING: TimelineGrouping = 'app'
+const DEFAULT_SORT: TimelineSort = 'importance'
+const ACTIVITY_KEYS: readonly ActivityFilterKey[] = ['changes', 'k8s_events', 'warnings', 'unhealthy']
+const GROUPINGS: readonly TimelineGrouping[] = ['app', 'owner', 'flat']
+const SORTS: readonly TimelineSort[] = ['importance', 'recent', 'name']
+
+const live = (widthMs: number, all?: boolean): TimelineMode => (all ? { kind: 'live', widthMs, all } : { kind: 'live', widthMs })
+const frozen = (fromMs: number, toMs: number): TimelineMode => ({ kind: 'frozen', fromMs, toMs })
+const sp = (obj: Record<string, string>) => new URLSearchParams(obj)
+
+// The inverse of writeTimelineParams, reconstructed from the component's own
+// URL->state read (TimelineView's sync effect). Uses the exported parseTimeMode
+// for the time mode; the remaining fields parse inline the same way the
+// component does, so parse(write(state)) exercises the real deep-link contract.
+const parseEnum = <T extends string>(value: string | null, allowed: readonly T[], fallback: T): T =>
+  value != null && (allowed as readonly string[]).includes(value) ? (value as T) : fallback
+
+function parseState(
+  params: URLSearchParams,
+  opts: { isRetained: boolean; requiresNamespaceFilter: boolean; maxRangeDays?: number; hasPins: boolean },
+): PersistedTimelineState {
+  const view = params.get('view')
+  const viewMode: TimelineViewMode = opts.requiresNamespaceFilter
+    ? 'list'
+    : view === 'list' || view === 'swimlane'
+      ? view
+      : DEFAULT_VIEW
+  const activityRaw = params.get('activity')
+  const activityFilter =
+    activityRaw == null
+      ? []
+      : activityRaw
+          .split(',')
+          .map((s) => s.trim())
+          .filter((s): s is ActivityFilterKey => (ACTIVITY_KEYS as readonly string[]).includes(s))
+  const kindsRaw = params.get('kinds')
+  const kindFilter = kindsRaw ? kindsRaw.split(',').map((s) => s.trim()).filter(Boolean) : []
+  return {
+    viewMode,
+    mode: parseTimeMode(params, opts.isRetained, opts.maxRangeDays),
+    showDeleted: params.get('deleted') !== '0',
+    pinnedOnly: params.get('pinnedOnly') === '1' && opts.hasPins,
+    search: params.get('q') ?? '',
+    activityFilter,
+    kindFilter,
+    grouping: parseEnum(params.get('grouping'), GROUPINGS, DEFAULT_GROUPING),
+    sort: parseEnum(params.get('sort'), SORTS, DEFAULT_SORT),
+    selectedEventId: params.get('event'),
+  }
+}
+
+const defaultState: PersistedTimelineState = {
+  viewMode: DEFAULT_VIEW,
+  mode: live(DEFAULT_LIVE_WIDTH_MS),
+  showDeleted: true,
+  pinnedOnly: false,
+  search: '',
+  activityFilter: [],
+  kindFilter: [],
+  grouping: DEFAULT_GROUPING,
+  sort: DEFAULT_SORT,
+  selectedEventId: null,
+}
+
+const sortedEntries = (params: URLSearchParams) => [...params.entries()].sort(([a], [b]) => a.localeCompare(b))
+
+describe('parseTimeMode', () => {
+  it('round-trips the live-window presets encoded in ?window', () => {
+    expect(parseTimeMode(sp({ window: 'all' }), true)).toEqual(live(DEFAULT_LIVE_WIDTH_MS, true))
+    expect(parseTimeMode(sp({ window: '1800000' }), true)).toEqual(live(1_800_000))
+  })
+
+  it('parses an explicit from/to into a frozen window', () => {
+    const from = 1_700_000_000_000
+    const to = from + 2 * DAY_MS
+    expect(parseTimeMode(sp({ from: String(from), to: String(to) }), true)).toEqual(frozen(from, to))
+  })
+
+  it('rejects from >= to and falls back to the default live window', () => {
+    const t = 1_700_000_000_000
+    expect(parseTimeMode(sp({ from: String(t), to: String(t) }), true)).toEqual(live(DEFAULT_LIVE_WIDTH_MS))
+    expect(parseTimeMode(sp({ from: String(t + 1000), to: String(t) }), true)).toEqual(live(DEFAULT_LIVE_WIDTH_MS))
+  })
+
+  it('caps an out-of-retention from to maxRangeDays before to', () => {
+    const to = 10 * DAY_MS
+    expect(parseTimeMode(sp({ from: '1', to: String(to) }), true, 7)).toEqual(frozen(to - 7 * DAY_MS, to))
+  })
+
+  it('leaves from uncapped when already within maxRangeDays', () => {
+    const to = 10 * DAY_MS
+    const from = to - 3 * DAY_MS
+    expect(parseTimeMode(sp({ from: String(from), to: String(to) }), true, 7)).toEqual(frozen(from, to))
+  })
+
+  it('falls back to the default mode on garbage from/to/window', () => {
+    expect(parseTimeMode(sp({ from: 'abc', to: 'def' }), true)).toEqual(live(DEFAULT_LIVE_WIDTH_MS))
+    expect(parseTimeMode(sp({ from: '1.5', to: '9.5' }), true)).toEqual(live(DEFAULT_LIVE_WIDTH_MS))
+    expect(parseTimeMode(sp({ window: 'abc' }), true)).toEqual(live(DEFAULT_LIVE_WIDTH_MS))
+    expect(parseTimeMode(sp({ window: '0' }), true)).toEqual(live(DEFAULT_LIVE_WIDTH_MS))
+    expect(parseTimeMode(sp({ window: '-5' }), true)).toEqual(live(DEFAULT_LIVE_WIDTH_MS))
+  })
+
+  it('ignores from/to/window entirely when the source is not retained', () => {
+    const from = 1_700_000_000_000
+    expect(
+      parseTimeMode(sp({ from: String(from), to: String(from + DAY_MS), window: 'all' }), false),
+    ).toEqual(live(DEFAULT_LIVE_WIDTH_MS))
+  })
+})
+
+describe('writeTimelineParams', () => {
+  const retainedOpts = { isRetained: true, requiresNamespaceFilter: false as boolean | undefined }
+
+  it('writes no params for the pristine default state', () => {
+    const written = writeTimelineParams(new URLSearchParams(), defaultState, retainedOpts)
+    expect(written.toString()).toBe('')
+  })
+
+  it('writes exactly the expected keys for a fully non-default state', () => {
+    const state: PersistedTimelineState = {
+      viewMode: 'list',
+      mode: live(6 * 60 * 60 * 1000),
+      showDeleted: false,
+      pinnedOnly: true,
+      search: 'nginx',
+      activityFilter: ['warnings', 'unhealthy'],
+      kindFilter: ['Pod', 'Deployment'],
+      grouping: 'owner',
+      sort: 'recent',
+      selectedEventId: 'evt-42',
+    }
+    const written = writeTimelineParams(new URLSearchParams(), state, retainedOpts)
+    expect(sortedEntries(written)).toEqual([
+      ['activity', 'warnings,unhealthy'],
+      ['deleted', '0'],
+      ['event', 'evt-42'],
+      ['grouping', 'owner'],
+      ['kinds', 'Pod,Deployment'],
+      ['pinnedOnly', '1'],
+      ['q', 'nginx'],
+      ['sort', 'recent'],
+      ['view', 'list'],
+      ['window', '21600000'],
+    ])
+  })
+
+  it('encodes a frozen window as from/to and omits window', () => {
+    const from = 1_700_000_000_000
+    const to = from + 2 * DAY_MS
+    const written = writeTimelineParams(new URLSearchParams(), { ...defaultState, mode: frozen(from, to) }, retainedOpts)
+    expect(written.get('from')).toBe(String(from))
+    expect(written.get('to')).toBe(String(to))
+    expect(written.has('window')).toBe(false)
+  })
+
+  it('preserves foreign params, including application scope, and strips the legacy filter seed', () => {
+    const base = new URLSearchParams({
+      tab: 'topology',
+      app: 'staging/Deployment/api',
+      scopeNamespaces: 'argocd,staging',
+      filter: 'warnings',
+    })
+    const written = writeTimelineParams(base, defaultState, retainedOpts)
+    expect(written.get('tab')).toBe('topology')
+    expect(written.get('app')).toBe('staging/Deployment/api')
+    expect(written.get('scopeNamespaces')).toBe('argocd,staging')
+    expect(written.has('filter')).toBe(false)
+  })
+
+  it('does not persist the list view a large cluster forces', () => {
+    const written = writeTimelineParams(new URLSearchParams(), { ...defaultState, viewMode: 'list' }, {
+      isRetained: true,
+      requiresNamespaceFilter: true,
+    })
+    expect(written.has('view')).toBe(false)
+  })
+})
+
+describe('resolveApplicationTimelineScope', () => {
+  it('uses the current namespace selection outside application scope', () => {
+    expect(resolveApplicationTimelineScope(new URLSearchParams(), ['default', 'staging'])).toEqual({
+      appKey: null,
+      namespaces: ['default', 'staging'],
+      ready: true,
+    })
+  })
+
+  it('uses the application scope namespaces and removes duplicates', () => {
+    const params = sp({
+      app: '/Application/radar-hub-staging',
+      scopeNamespaces: 'argocd, staging,argocd',
+    })
+
+    expect(resolveApplicationTimelineScope(params, ['default'])).toEqual({
+      appKey: '/Application/radar-hub-staging',
+      namespaces: ['argocd', 'staging'],
+      ready: true,
+    })
+  })
+
+  it('fails closed when an application link omits its namespace scope', () => {
+    const params = sp({ app: '/Application/radar-hub-staging' })
+
+    expect(resolveApplicationTimelineScope(params, ['default'])).toEqual({
+      appKey: '/Application/radar-hub-staging',
+      namespaces: [],
+      ready: false,
+    })
+  })
+})
+
+describe('parse(write(state)) round-trip', () => {
+  const opts = { isRetained: true, requiresNamespaceFilter: false, maxRangeDays: undefined, hasPins: true }
+  const roundTrip = (state: PersistedTimelineState) => {
+    const written = writeTimelineParams(new URLSearchParams(), state, {
+      isRetained: opts.isRetained,
+      requiresNamespaceFilter: opts.requiresNamespaceFilter,
+    })
+    return parseState(new URLSearchParams(written.toString()), opts)
+  }
+
+  it('round-trips the pristine default state', () => {
+    expect(roundTrip(defaultState)).toEqual(defaultState)
+  })
+
+  it('round-trips a live preset with every control set', () => {
+    const state: PersistedTimelineState = {
+      viewMode: 'list',
+      mode: live(6 * 60 * 60 * 1000),
+      showDeleted: false,
+      pinnedOnly: true,
+      search: 'nginx',
+      activityFilter: ['warnings', 'unhealthy'],
+      kindFilter: ['Pod', 'Deployment'],
+      grouping: 'owner',
+      sort: 'recent',
+      selectedEventId: 'evt-42',
+    }
+    expect(roundTrip(state)).toEqual(state)
+  })
+
+  it('round-trips a frozen window with a selected event', () => {
+    const from = 1_700_000_000_000
+    const state: PersistedTimelineState = {
+      ...defaultState,
+      mode: frozen(from, from + 2 * DAY_MS),
+      selectedEventId: 'evt-frozen',
+    }
+    expect(roundTrip(state)).toEqual(state)
+  })
+
+  it('round-trips a whole-span live window and a search with a space', () => {
+    const state: PersistedTimelineState = {
+      ...defaultState,
+      mode: live(DEFAULT_LIVE_WIDTH_MS, true),
+      search: 'foo bar',
+      activityFilter: ['changes'],
+      sort: 'name',
+    }
+    expect(roundTrip(state)).toEqual(state)
+  })
+})
+
+describe('timeModeEqual', () => {
+  it('is reflexive for live and frozen modes', () => {
+    expect(timeModeEqual(live(DEFAULT_LIVE_WIDTH_MS), live(DEFAULT_LIVE_WIDTH_MS))).toBe(true)
+    expect(timeModeEqual(frozen(1, 2), frozen(1, 2))).toBe(true)
+  })
+
+  it('treats the whole-span all flag as significant', () => {
+    expect(timeModeEqual(live(DEFAULT_LIVE_WIDTH_MS), live(DEFAULT_LIVE_WIDTH_MS, true))).toBe(false)
+    expect(timeModeEqual(live(DEFAULT_LIVE_WIDTH_MS, true), live(DEFAULT_LIVE_WIDTH_MS, true))).toBe(true)
+  })
+
+  it('is false across the live/frozen boundary', () => {
+    expect(timeModeEqual(live(DEFAULT_LIVE_WIDTH_MS), frozen(0, DEFAULT_LIVE_WIDTH_MS))).toBe(false)
+  })
+
+  it('distinguishes different widths and different frozen windows', () => {
+    expect(timeModeEqual(live(DEFAULT_LIVE_WIDTH_MS), live(2 * DEFAULT_LIVE_WIDTH_MS))).toBe(false)
+    expect(timeModeEqual(frozen(1, 2), frozen(1, 3))).toBe(false)
+  })
+})
+
+describe('onlyHighFreqDiffer (history replace vs push)', () => {
+  it('replaces when only a high-frequency key differs (window pan/zoom, search, drawer event)', () => {
+    expect(onlyHighFreqDiffer('window=3600000', 'window=7200000')).toBe(true)
+    expect(onlyHighFreqDiffer('q=a', 'q=b')).toBe(true)
+    expect(onlyHighFreqDiffer('event=evt-1', 'event=evt-2')).toBe(true)
+  })
+
+  it('replaces on a live<->frozen transition — every time-window key is high-frequency', () => {
+    expect(onlyHighFreqDiffer('window=7200000', 'from=1&to=2')).toBe(true)
+    expect(onlyHighFreqDiffer('', 'from=1&to=2')).toBe(true)
+  })
+
+  it('pushes when a discrete control changes', () => {
+    expect(onlyHighFreqDiffer('view=list', 'view=swimlane')).toBe(false)
+    expect(onlyHighFreqDiffer('', 'grouping=owner')).toBe(false)
+    expect(onlyHighFreqDiffer('', 'sort=recent')).toBe(false)
+    expect(onlyHighFreqDiffer('', 'activity=warnings')).toBe(false)
+    expect(onlyHighFreqDiffer('', 'kinds=Pod')).toBe(false)
+    expect(onlyHighFreqDiffer('', 'deleted=0')).toBe(false)
+    expect(onlyHighFreqDiffer('', 'pinnedOnly=1')).toBe(false)
+  })
+
+  it('pushes when a diff mixes a high-frequency and a discrete key', () => {
+    expect(onlyHighFreqDiffer('', 'window=7200000&grouping=owner')).toBe(false)
+  })
+
+  it('is not replace-worthy when nothing differs', () => {
+    expect(onlyHighFreqDiffer('window=3600000', 'window=3600000')).toBe(false)
+    expect(onlyHighFreqDiffer('', '')).toBe(false)
+  })
+})

package/src/components/traffic/TrafficFilterSidebar.tsx

@@ -1,5 +1,4 @@
-import { memo, useState, useRef } from 'react'
-import { createPortal } from 'react-dom'
+import { memo, useState } from 'react'
 import {
   ChevronDown,
   Eye,
@@ -16,43 +15,8 @@ import { clsx } from 'clsx'
 import { SEVERITY_BADGE } from '@skyhook-io/k8s-ui/utils/badge-colors'
 import type { AddonMode } from './TrafficView'
 import { getNamespaceColor } from '../../utils/traffic-colors'
-
-// Fast tooltip component using portal to escape overflow
-function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
-  const [show, setShow] = useState(false)
-  const [pos, setPos] = useState({ x: 0, y: 0 })
-  const ref = useRef<HTMLDivElement>(null)
-
-  const handleMouseEnter = () => {
-    if (ref.current) {
-      const rect = ref.current.getBoundingClientRect()
-      setPos({ x: rect.right + 8, y: rect.top + rect.height / 2 })
-    }
-    setShow(true)
-  }
-
-  return (
-    <div
-      ref={ref}
-      className="inline-flex"
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={() => setShow(false)}
-    >
-      {children}
-      {show && createPortal(
-        <div
-          className="fixed z-[9999] pointer-events-none"
-          style={{ left: pos.x, top: pos.y, transform: 'translateY(-50%)' }}
-        >
-          <div className="bg-gray-900 text-white text-[10px] px-2 py-1.5 rounded shadow-lg max-w-[180px] leading-tight whitespace-normal">
-            {content}
-          </div>
-        </div>,
-        document.body
-      )}
-    </div>
-  )
-}
+import { Tooltip } from '../ui/Tooltip'
+import { Input } from '@skyhook-io/k8s-ui'
 
 // Connection threshold options
 const CONNECTION_THRESHOLDS = [
@@ -152,7 +116,7 @@ function ToggleOption({
           {label}
         </span>
       </button>
-      <Tooltip content={description}>
+      <Tooltip content={description} position="right">
         <Info className="w-3 h-3 text-theme-text-tertiary hover:text-theme-text-secondary cursor-help" />
       </Tooltip>
       <button
@@ -225,29 +189,31 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
         <div className="px-3 py-2 border-b border-theme-border space-y-1.5">
           <div className="flex items-center gap-2">
             <Clock className="w-3.5 h-3.5 text-theme-text-tertiary" />
+            <Tooltip content="Show traffic from the selected time window" wrapperClassName="!flex flex-1">
             <select
               value={timeRange}
               onChange={(e) => setTimeRange(e.target.value)}
-              title="Show traffic from the selected time window"
               className="flex-1 bg-theme-elevated text-theme-text-primary text-xs rounded px-2 py-1.5 border border-theme-border focus:outline-none focus:ring-1 focus:ring-blue-500"
             >
               {TIME_RANGES.map(({ value, label }) => (
                 <option key={value} value={value}>{label}</option>
               ))}
             </select>
+            </Tooltip>
           </div>
           <div className="flex items-center gap-2">
             <Filter className="w-3.5 h-3.5 text-theme-text-tertiary" />
+            <Tooltip content="Hide low-traffic flows to reduce noise" wrapperClassName="!flex flex-1">
             <select
               value={minConnections}
               onChange={(e) => setMinConnections(Number(e.target.value))}
-              title="Hide low-traffic flows to reduce noise"
               className="flex-1 bg-theme-elevated text-theme-text-primary text-xs rounded px-2 py-1.5 border border-theme-border focus:outline-none focus:ring-1 focus:ring-blue-500"
             >
               {CONNECTION_THRESHOLDS.map(({ value, label }) => (
                 <option key={value} value={value}>{label}</option>
               ))}
             </select>
+            </Tooltip>
           </div>
         </div>
 
@@ -279,7 +245,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
             <div className="flex items-center gap-2 mb-1.5">
               <Puzzle className="w-3.5 h-3.5 text-theme-text-tertiary" />
               <span className="text-xs text-theme-text-primary">Cluster Addons</span>
-              <Tooltip content="Monitoring, logging, cert-manager, etc. Excludes ingress controllers and service mesh.">
+              <Tooltip content="Monitoring, logging, cert-manager, etc. Excludes ingress controllers and service mesh." position="right">
                 <Info className="w-3 h-3 text-theme-text-tertiary hover:text-theme-text-secondary cursor-help" />
               </Tooltip>
             </div>
@@ -433,8 +399,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
             {(l7Protocol === 'all' || l7Protocol === 'DNS') && (
               <div>
                 <div className="text-[10px] text-theme-text-tertiary mb-1">DNS Query</div>
-                <input
-                  type="text"
+                <Input
                   value={dnsPattern}
                   onChange={(e) => setDnsPattern(e.target.value)}
                   placeholder="e.g. example.com"

package/src/components/traffic/TrafficFlowList.tsx

@@ -1,4 +1,5 @@
 import { useState, useMemo } from 'react'
+import { Virtuoso } from 'react-virtuoso'
 import type { TrafficFlow } from '../../types'
 import { clsx } from 'clsx'
 import { ChevronDown, ChevronUp, ShieldCheck } from 'lucide-react'
@@ -7,6 +8,7 @@ import { pluralize } from '@skyhook-io/k8s-ui'
 import { useFlowSearch } from './TrafficFlowListContext'
 import { useQuery } from '@tanstack/react-query'
 import { fetchJSON } from '../../api/client'
+import { Tooltip } from '../ui/Tooltip'
 
 // DNS response code names
 const DNS_RCODES: Record<number, string> = {
@@ -141,14 +143,18 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
         <span className="text-right">Verdict</span>
       </div>
 
-      {/* Flow rows */}
-      <div className="flex-1 overflow-y-auto">
-        {sorted.length === 0 ? (
-          <div className="flex items-center justify-center h-32 text-sm text-theme-text-tertiary">
-            {search ? 'No flows match the search' : 'No flows to display'}
-          </div>
-        ) : (
-          sorted.map((flow, i) => {
+      {/* Flow rows — virtualized so tens of thousands of Hubble/Cilium flows
+          don't all become DOM. Virtuoso measures variable row heights, so the
+          expand/collapse panel still works. */}
+      {sorted.length === 0 ? (
+        <div className="flex-1 flex items-center justify-center text-sm text-theme-text-tertiary">
+          {search ? 'No flows match the search' : 'No flows to display'}
+        </div>
+      ) : (
+        <Virtuoso
+          className="flex-1"
+          data={sorted}
+          itemContent={(i, flow) => {
             const isExpanded = expandedIdx === i
             const isHTTP = flow.l7Protocol === 'HTTP'
             const isDNS = flow.l7Protocol === 'DNS'
@@ -169,28 +175,36 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
                   <span className="text-theme-text-tertiary tabular-nums whitespace-nowrap">{time}</span>
 
                   {/* Source */}
-                  <span className="truncate text-theme-text-primary" title={flow.source.namespace ? `${flow.source.namespace}/${flow.source.name}` : flow.source.name}>
+                  <Tooltip content={flow.source.namespace ? `${flow.source.namespace}/${flow.source.name}` : flow.source.name} wrapperClassName="min-w-0">
+                  <span className="truncate text-theme-text-primary">
                     {flow.source.name}
                   </span>
+                  </Tooltip>
 
                   {/* Destination */}
-                  <span className="truncate text-theme-text-primary" title={flow.destination.namespace ? `${flow.destination.namespace}/${flow.destination.name}` : flow.destination.name}>
+                  <Tooltip content={flow.destination.namespace ? `${flow.destination.namespace}/${flow.destination.name}` : flow.destination.name} wrapperClassName="min-w-0">
+                  <span className="truncate text-theme-text-primary">
                     {flow.destination.name}
                   </span>
+                  </Tooltip>
 
                   {/* Request info */}
                   <div className="flex items-center gap-1.5 min-w-0">
                     {isHTTP && (
                       <>
                         <span className={clsx('shrink-0 badge badge-sm text-[10px]', SEVERITY_BADGE.info)}>{flow.httpMethod}</span>
-                        <span className="truncate text-theme-text-secondary" title={flow.httpPath}>{flow.httpPath}</span>
+                        <Tooltip content={flow.httpPath ?? ''} wrapperClassName="min-w-0">
+                        <span className="truncate text-theme-text-secondary">{flow.httpPath}</span>
+                        </Tooltip>
                         {flow.l7Type === 'REQUEST' && <span className={clsx('shrink-0 text-[9px]', SEVERITY_TEXT.warning)}>no response</span>}
                       </>
                     )}
                     {isDNS && (
                       <>
                         <span className={clsx('shrink-0 badge badge-sm text-[10px]', SEVERITY_BADGE.neutral)}>DNS</span>
-                        <span className="truncate text-theme-text-secondary" title={flow.dnsQuery}>{flow.dnsQuery}</span>
+                        <Tooltip content={flow.dnsQuery ?? ''} wrapperClassName="min-w-0">
+                        <span className="truncate text-theme-text-secondary">{flow.dnsQuery}</span>
+                        </Tooltip>
                       </>
                     )}
                     {!isHTTP && !isDNS && (
@@ -316,9 +330,9 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
                 )}
               </div>
             )
-          })
-        )}
-      </div>
+          }}
+        />
+      )}
 
       {/* Footer */}
       <div className="px-3 py-1.5 border-t border-theme-border text-[10px] text-theme-text-tertiary">

package/src/components/traffic/TrafficGraph.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useState, useCallback, useRef } from 'react'
+import { useMemo, useEffect, useState, useCallback, useRef, type MutableRefObject } from 'react'
 import {
   ReactFlow,
   Background,
@@ -22,6 +22,7 @@ import { X, ArrowRight, Globe, Server, Activity, Puzzle } from 'lucide-react'
 import { isClusterAddon, type AddonMode } from './TrafficView'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
 import { getNamespaceColor } from '../../utils/traffic-colors'
+import { Tooltip } from '../ui/Tooltip'
 
 const elk = new ELK()
 
@@ -845,7 +846,9 @@ function DetailsPanel({
                     {edgeData.flow.topHTTPPaths.map((p, i) => (
                       <div key={i} className="flex items-center gap-1.5 text-[10px]">
                         <span className={clsx('shrink-0 px-1 py-0.5 rounded badge font-medium', SEVERITY_BADGE.info)}>{p.method}</span>
-                        <span className="text-theme-text-primary truncate flex-1" title={p.path}>{p.path || '/'}</span>
+                        <Tooltip content={p.path} wrapperClassName="min-w-0 flex-1">
+                        <span className="text-theme-text-primary truncate flex-1">{p.path || '/'}</span>
+                        </Tooltip>
                         <span className="shrink-0 text-theme-text-secondary">{p.count}</span>
                         {p.avgMs ? <span className="shrink-0 text-theme-text-tertiary">{formatLatency(p.avgMs)}</span> : null}
                         {p.errorPct ? <span className={clsx('shrink-0', p.errorPct > 10 ? SEVERITY_TEXT.error : SEVERITY_TEXT.warning)}>{p.errorPct.toFixed(0)}%err</span> : null}
@@ -862,7 +865,9 @@ function DetailsPanel({
                   <div className="space-y-1 max-h-40 overflow-y-auto">
                     {edgeData.flow.topDNSQueries.map((q, i) => (
                       <div key={i} className="flex items-center gap-1.5 text-[10px]">
-                        <span className="text-theme-text-primary truncate flex-1" title={q.query}>{q.query}</span>
+                        <Tooltip content={q.query} wrapperClassName="min-w-0 flex-1">
+                        <span className="text-theme-text-primary truncate flex-1">{q.query}</span>
+                        </Tooltip>
                         <span className="shrink-0 text-theme-text-secondary">{q.count}</span>
                         {q.nxCount ? <span className={clsx('shrink-0', SEVERITY_TEXT.warning)}>NX:{q.nxCount}</span> : null}
                         {q.avgTTL ? <span className="shrink-0 text-theme-text-tertiary">TTL:{q.avgTTL}s</span> : null}
@@ -966,6 +971,33 @@ const nodeTypes = {
   addonGroup: AddonGroupNode,
 }
 
+// Fits the view once nodes have been laid out. Module-scope (not defined inside
+// TrafficGraph's render) so it keeps a stable identity — otherwise it remounts
+// every render and its effect churns. Must render inside <ReactFlow> for the
+// useReactFlow() context; the trigger state is passed in as props.
+function FitViewOnChange({
+  shouldFitViewRef,
+  layoutedNodes,
+}: {
+  shouldFitViewRef: MutableRefObject<boolean>
+  layoutedNodes: Node<TrafficNodeData>[]
+}) {
+  const { fitView } = useReactFlow()
+
+  useEffect(() => {
+    if (shouldFitViewRef.current && layoutedNodes.length > 0) {
+      // Small delay to ensure nodes are rendered
+      const timer = setTimeout(() => {
+        fitView({ padding: 0.2, duration: 200 })
+        shouldFitViewRef.current = false
+      }, 50)
+      return () => clearTimeout(timer)
+    }
+  }, [fitView, layoutedNodes, shouldFitViewRef])
+
+  return null
+}
+
 export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups = false, serviceCategories, addonMode = 'show', trafficSource = '', onSelectionChange }: TrafficGraphProps) {
   const isIstio = trafficSource === 'istio'
   const connLabel = isIstio ? 'req/s' : 'conn'
@@ -1264,9 +1296,13 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
     try {
       const layoutResult = await elk.layout(elkGraph)
 
+      // Index ELK's positioned children by id once — a .find() per node here is
+      // O(nodes²) and bites on dense traffic graphs.
+      const elkPositions = new Map((layoutResult.children ?? []).map(n => [n.id, n]))
+
       // Apply positions from ELK to nodes
       let positionedNodes = rawNodes.map(node => {
-        const elkNode = layoutResult.children?.find(n => n.id === node.id)
+        const elkNode = elkPositions.get(node.id)
         return {
           ...node,
           position: {
@@ -1339,7 +1375,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
       }
 
       // Build final edges list
-      let finalEdges = [...rawEdges]
+      const finalEdges = [...rawEdges]
 
       // Add edge from addon-internet to addon-group if we have one
       if (addonMode === 'group' && groupEdgeInfo) {
@@ -1483,24 +1519,6 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
     onSelectionChange?.(null)
   }, [onSelectionChange])
 
-  // FitView handler component - must be inside ReactFlow
-  const FitViewOnChange = () => {
-    const { fitView } = useReactFlow()
-
-    useEffect(() => {
-      if (shouldFitViewRef.current && layoutedNodes.length > 0) {
-        // Small delay to ensure nodes are rendered
-        const timer = setTimeout(() => {
-          fitView({ padding: 0.2, duration: 200 })
-          shouldFitViewRef.current = false
-        }, 50)
-        return () => clearTimeout(timer)
-      }
-    }, [fitView, layoutedNodes])
-
-    return null
-  }
-
   return (
     <div className="w-full h-full relative">
       <ReactFlow
@@ -1526,7 +1544,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
       >
         <Background />
         <Controls />
-        <FitViewOnChange />
+        <FitViewOnChange shouldFitViewRef={shouldFitViewRef} layoutedNodes={layoutedNodes} />
       </ReactFlow>
 
       {/* Legend */}