feat(ui): entities swimlanes 3

ui/packages/@quent/client/src/entityList.test.ts

@@ -0,0 +1,52 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from 'vitest';
+import { keepPreviousData } from '@tanstack/react-query';
+import type { EntityListResponse } from '@quent/utils';
+import { entityListInfiniteQueryOptions, entityListQueryOptions } from './entityList';
+
+describe('entityListQueryOptions', () => {
+  it('copies selected operator IDs into the entity-list request', () => {
+    const options = entityListQueryOptions({
+      engineId: 'engine-1',
+      queryId: 'query-1',
+      window: { start: 0, end: 1 },
+      operatorIds: ['operator-1'],
+      minUsageSeconds: 0.15,
+      maxItems: 20,
+      page: 2,
+    });
+
+    expect(options.queryKey).toEqual([
+      'entityList',
+      'engine-1',
+      expect.objectContaining({
+        entry: expect.objectContaining({
+          application: { operator_ids: ['operator-1'] },
+          filter: expect.objectContaining({ min_usage_s: 0.15 }),
+          page: { page: 2, max: 20 },
+        }),
+      }),
+    ]);
+    expect(options.placeholderData).toBe(keepPreviousData);
+  });
+
+  it('continues paging until all matching entities are loaded', () => {
+    const options = entityListInfiniteQueryOptions({
+      engineId: 'engine-1',
+      queryId: 'query-1',
+      window: { start: 0, end: 1 },
+      maxItems: 1,
+    });
+    const item = {} as EntityListResponse['items'][number];
+    const firstPage: EntityListResponse = { items: [item], total: 3 };
+    const secondPage: EntityListResponse = { items: [item], total: 3 };
+
+    expect(options.placeholderData).toBe(keepPreviousData);
+    expect(options.getNextPageParam?.(secondPage, [firstPage, secondPage], 1, [0, 1])).toBe(2);
+    expect(
+      options.getNextPageParam?.({ items: [item], total: 2 }, [firstPage, secondPage], 1, [0, 1])
+    ).toBeUndefined();
+  });
+});

ui/packages/@quent/client/src/entityList.ts

@@ -1,7 +1,13 @@
 // SPDX-FileCopyrightText: Copyright (c) 2026, NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { queryOptions, useQuery } from '@tanstack/react-query';
+import {
+  infiniteQueryOptions,
+  keepPreviousData,
+  queryOptions,
+  useInfiniteQuery,
+  useQuery,
+} from '@tanstack/react-query';
 import type {
   EntityListRequest,
   EntityScope,
@@ -18,8 +24,8 @@ interface EntityListParams {
   queryId: string;
   /** Window bounds in seconds relative to the query epoch. */
   window: { start: number; end: number };
-  /** Restrict to a single operator; `null` returns entities across all. */
-  operatorId?: string | null;
+  /** Restrict entities to the selected operators; empty returns entities across all. */
+  operatorIds?: string[];
   /** Restrict entities to a resource / resource-group scope; `null` for all. */
   filter?: { scope?: EntityScope | null; entityTypeName?: string | null };
   /** Keep only entities whose longest usage span exceeds this (seconds). */
@@ -28,17 +34,20 @@ interface EntityListParams {
   sortDir?: SortDir;
   /** Max entities to return; omit for the full (unpaged) list. */
   maxItems?: number | null;
+  /** Zero-based page index; only used when `maxItems` is set. */
+  page?: number;
 }
 
 function buildRequest({
   queryId,
   window,
-  operatorId = null,
+  operatorIds = [],
   filter,
   minUsageSeconds = null,
   sortKey = 'UsageDuration',
   sortDir = 'Desc',
   maxItems = null,
+  page = 0,
 }: EntityListParams): EntityListRequest<QueryFilter, OperatorFilter> {
   return {
     entry: {
@@ -49,8 +58,8 @@ function buildRequest({
         min_usage_s: minUsageSeconds,
       },
       sort: { key: sortKey, dir: sortDir },
-      page: maxItems != null ? { page: 0, max: maxItems } : null,
-      application: { operator_ids: operatorId == null ? [] : [operatorId] },
+      page: maxItems != null ? { page, max: maxItems } : null,
+      application: { operator_ids: operatorIds },
     },
     app_params: { query_id: queryId },
   };
@@ -66,9 +75,37 @@ export const entityListQueryOptions = (
     queryFn: () => fetchEntityList(params.engineId, request),
     staleTime: options?.staleTime ?? DEFAULT_STALE_TIME,
     enabled: options?.enabled ?? true,
+    placeholderData: keepPreviousData,
   });
 };
 export const useEntityList = (
   params: EntityListParams,
   options?: { staleTime?: number; enabled?: boolean }
 ) => useQuery(entityListQueryOptions(params, options));
+
+type PaginatedEntityListParams = EntityListParams & { maxItems: number };
+
+export const entityListInfiniteQueryOptions = (
+  params: PaginatedEntityListParams,
+  options?: { staleTime?: number; enabled?: boolean }
+) => {
+  const initialRequest = buildRequest({ ...params, page: 0 });
+  return infiniteQueryOptions({
+    queryKey: ['entityList', 'infinite', params.engineId, initialRequest],
+    queryFn: ({ pageParam }) =>
+      fetchEntityList(params.engineId, buildRequest({ ...params, page: pageParam })),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, pages) => {
+      const loadedCount = pages.reduce((count, page) => count + page.items.length, 0);
+      return lastPage.items.length > 0 && loadedCount < lastPage.total ? pages.length : undefined;
+    },
+    staleTime: options?.staleTime ?? DEFAULT_STALE_TIME,
+    enabled: options?.enabled ?? true,
+    placeholderData: keepPreviousData,
+  });
+};
+
+export const useInfiniteEntityList = (
+  params: PaginatedEntityListParams,
+  options?: { staleTime?: number; enabled?: boolean }
+) => useInfiniteQuery(entityListInfiniteQueryOptions(params, options));

ui/packages/@quent/client/src/index.ts

@@ -25,7 +25,7 @@ export { queriesQueryOptions } from './queries';
 export { singleTimelineQueryOptions } from './timeline';
 export { bulkTimelineQueryOptions } from './bulkTimelines';
 export { dataFlowQueryOptions } from './dataFlow';
-export { entityListQueryOptions } from './entityList';
+export { entityListInfiniteQueryOptions, entityListQueryOptions } from './entityList';
 
 // Hooks
 export { useQueryBundle } from './queryBundle';
@@ -34,4 +34,4 @@ export { useQueryGroups } from './queryGroups';
 export { useQueries } from './queries';
 export { useTimeline } from './timeline';
 export { useDataFlow } from './dataFlow';
-export { useEntityList } from './entityList';
+export { useEntityList, useInfiniteEntityList } from './entityList';

ui/packages/@quent/components/src/dag/DataFlowMatrix.tsx

@@ -14,8 +14,8 @@ import {
   formatDuration,
   type PaletteTheme,
 } from '@quent/utils';
+import { ColorSwatch } from '../ui/color-swatch';
 import { DataText } from '../ui/data-text';
-import { ColorDot } from './ColorDot';
 
 /**
  * State × dimension matrix of the data-flow distribution for the selected
@@ -84,7 +84,7 @@ export const DataFlowMatrix = ({
                 className="text-right font-normal text-muted-foreground px-1.5"
               >
                 <span className="inline-flex items-center gap-1">
-                  <ColorDot color={dimensionColor(k.key)} />
+                  <ColorSwatch color={dimensionColor(k.key)} shape="square" />
                   <DataText>{k.display_name}</DataText>
                 </span>
               </th>
@@ -99,7 +99,7 @@ export const DataFlowMatrix = ({
             <tr key={state}>
               <th scope="row" className="pr-2 text-left font-normal">
                 <span className="inline-flex items-center gap-1">
-                  <ColorDot color={stateColor(state)} />
+                  <ColorSwatch color={stateColor(state)} shape="square" />
                   <DataText>{state}</DataText>
                 </span>
               </th>

ui/packages/@quent/components/src/gantt-chart/utils.test.ts

@@ -56,19 +56,29 @@ describe('stackIntervalsIntoRows', () => {
     expect(entries.map(entry => entry.rowIndex)).toEqual([0, 0, 0]);
   });
 
-  it('packs overlapping intervals into the minimum rows', () => {
+  it('reuses the first compatible row', () => {
     const a = span(0, 10);
     const b = span(5, 15);
     const c = span(12, 20);
     stackIntervalsIntoRows([a, b, c]);
     expect([a.rowIndex, b.rowIndex, c.rowIndex]).toEqual([0, 1, 0]);
   });
 
-  it('handles unsorted input and mutates the original entries', () => {
-    const later = span(10, 20);
-    const earlier = span(0, 5);
-    const entries = [later, earlier];
+  it('uses input order as the packing priority', () => {
+    const rankedFirst = span(5, 10);
+    const rankedSecond = span(0, 6);
+    const entries = [rankedFirst, rankedSecond];
     expect(stackIntervalsIntoRows(entries)).toBe(entries);
-    expect(entries.map(entry => entry.rowIndex)).toEqual([0, 0]);
+    expect(entries.map(entry => entry.rowIndex)).toEqual([0, 1]);
+  });
+
+  it('does not move existing entries when new entries are appended', () => {
+    const existing = [span(5, 10), span(0, 6), span(10, 20)];
+    stackIntervalsIntoRows(existing);
+    const previousRows = existing.map(entry => entry.rowIndex);
+
+    stackIntervalsIntoRows([...existing, span(4, 12)]);
+
+    expect(existing.map(entry => entry.rowIndex)).toEqual(previousRows);
   });
 });

ui/packages/@quent/components/src/gantt-chart/utils.ts

@@ -20,25 +20,45 @@ export function clipRectByRect(target: GanttRect, bounds: GanttRect): GanttRect
   return undefined;
 }
 
-/** Greedily pack intervals into non-overlapping rows. */
+type PackedInterval = { startMs: number; endMs: number };
+
+function findInsertionIndex(intervals: PackedInterval[], startMs: number): number {
+  let low = 0;
+  let high = intervals.length;
+  while (low < high) {
+    const mid = Math.floor((low + high) / 2);
+    if (intervals[mid]!.startMs < startMs) low = mid + 1;
+    else high = mid;
+  }
+  return low;
+}
+
+/** Greedily pack intervals in input order so appended entries do not move existing rows. */
 export function stackIntervalsIntoRows<
   T extends { startMs: number; endMs: number; rowIndex: number },
 >(entries: T[]): T[] {
   if (entries.length === 0) return entries;
 
-  const sorted = [...entries].sort((a, b) => a.startMs - b.startMs || a.endMs - b.endMs);
-  const rowEndMs: number[] = [];
-
-  for (const entry of sorted) {
+  const rows: PackedInterval[][] = [];
+  for (const entry of entries) {
     let row = 0;
-    while (row < rowEndMs.length && entry.startMs < rowEndMs[row]) {
+    let insertionIndex = 0;
+    while (row < rows.length) {
+      const intervals = rows[row]!;
+      insertionIndex = findInsertionIndex(intervals, entry.startMs);
+      const previous = intervals[insertionIndex - 1];
+      const next = intervals[insertionIndex];
+      if (
+        (previous == null || previous.endMs <= entry.startMs) &&
+        (next == null || entry.endMs <= next.startMs)
+      ) {
+        break;
+      }
       row++;
     }
-    if (row === rowEndMs.length) {
-      rowEndMs.push(entry.endMs);
-    } else {
-      rowEndMs[row] = Math.max(rowEndMs[row], entry.endMs);
-    }
+
+    if (row === rows.length) rows.push([]);
+    rows[row]!.splice(insertionIndex, 0, entry);
     entry.rowIndex = row;
   }
 

ui/packages/@quent/components/src/index.ts

@@ -44,6 +44,8 @@ export {
   NavigationMenuViewport,
 } from './ui/navigation-menu';
 export { Popover, PopoverTrigger, PopoverContent } from './ui/popover';
+export { PointerTooltipPortal } from './ui/pointer-tooltip-portal';
+export type { PointerPosition } from './ui/pointer-tooltip-portal';
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './ui/resizable';
 export { ScrollArea, ScrollBar } from './ui/scroll-area';
 export {
@@ -146,6 +148,7 @@ export type { DAGData, QueryPlanDataItem, QueryPlanNodeData } from './services/q
 // ─── Timeline components ──────────────────────────────────────────────────────
 export { TimelineController } from './timeline/TimelineController';
 export { TimelineRuler } from './timeline/TimelineRuler';
+export { TimelineSettingsPopover } from './timeline/TimelineSettingsPopover';
 export { TimelineSkeleton } from './timeline/TimelineSkeleton';
 export { TimelineToolbar } from './timeline/TimelineToolbar';
 export { QueryToolbar } from './timeline/QueryToolbar';
@@ -240,10 +243,18 @@ export {
 export type { GroupIndexDef, RowWithGroupKeys } from './pivot-table/utils';
 
 // ─── Long-entities components ─────────────────────────────────────────────────
-export { LongEntitiesGantt } from './long-entities/LongEntitiesGantt';
+export {
+  LongEntitiesGantt,
+  LONG_ENTITIES_TIMELINE_HEIGHT,
+} from './long-entities/LongEntitiesGantt';
 export type { LongEntitiesGanttProps } from './long-entities/LongEntitiesGantt';
 export type { LongEntityEntry, LongEntitySegment } from './long-entities/types';
-export { buildLongEntityEntries } from './long-entities/utils';
+export {
+  buildLongEntityEntries,
+  LONG_ENTITIES_ROW_TYPE,
+  longEntitiesRowId,
+  resourceIdFromLongEntitiesRowId,
+} from './long-entities/utils';
 
 // ─── Operator-timeline components ────────────────────────────────────────────
 export { OperatorGanttChart } from './operator-timeline/OperatorGanttChart';

ui/packages/@quent/components/src/lib/timeline.utils.test.ts

@@ -119,15 +119,13 @@ describe('nanosToMs', () => {
 // ---- getLongEntitiesThreshold ----------------------------------------------
 
 describe('getLongEntitiesThreshold', () => {
-  // Formula: 30 * (windowSeconds / MAX_TIMELINE_BINS) = 30 * (windowSeconds / 200)
-
-  it('returns the correct threshold for a 200-second window', () => {
-    expect(getLongEntitiesThreshold(200)).toBe(30);
+  it('returns the bin-scaled threshold for a 200-second window', () => {
+    expect(getLongEntitiesThreshold(200)).toBe(2);
   });
 
-  it('scales linearly with window size', () => {
-    expect(getLongEntitiesThreshold(100)).toBe(15);
-    expect(getLongEntitiesThreshold(400)).toBe(60);
+  it('scales linearly with the visible window', () => {
+    expect(getLongEntitiesThreshold(100)).toBe(1);
+    expect(getLongEntitiesThreshold(400)).toBe(4);
   });
 
   it('returns 0 for a zero-second window', () => {

ui/packages/@quent/components/src/lib/timeline.utils.ts

@@ -36,7 +36,7 @@ import { MAX_TIMELINE_BINS } from '@quent/utils';
 
 // Suppress unused import warning — getColorForKey is used by consumers of this module
 void getColorForKey;
-const LONG_ENTITIES_BIN_MULTIPLIER = 30;
+const LONG_ENTITIES_BIN_MULTIPLIER = 2;
 
 /** Minimum bin duration in nanoseconds — the backend cannot produce sub-1ns bins. */
 export const MIN_BIN_DURATION_NS = 10;
@@ -61,7 +61,7 @@ export function getAdaptiveNumBins(): number {
   return MAX_TIMELINE_BINS;
 }
 
-/** Threshold for "long" entities: 10x the current bin duration in seconds. */
+/** Threshold for "long" entities as a fraction of the current bin duration. */
 export function getLongEntitiesThreshold(windowSeconds: number): number {
   const numBins = getAdaptiveNumBins();
   return LONG_ENTITIES_BIN_MULTIPLIER * (windowSeconds / numBins);
@@ -676,8 +676,6 @@ export function buildBulkParamsForItem(
   } else {
     fsmTypeName = lookupFsmTypeName(item, entities);
   }
-  const threshold = getLongEntitiesThreshold(config.end - config.start);
-
   if (isGroup) {
     return {
       ResourceGroup: {
@@ -694,7 +692,7 @@ export function buildBulkParamsForItem(
   return {
     Resource: {
       resource_id: item.id,
-      long_entities_threshold_s: threshold,
+      long_entities_threshold_s: null,
       entity_filter: { entity_type_name: fsmTypeName },
       application: { operator_ids: operatorId ? [operatorId] : [] },
       config,