@dxos/react-ui-trace 0.11.1 → 0.14.0

package/src/components/ProcessTree/ProcessTree.tsx

@@ -8,9 +8,11 @@ import * as Option from 'effect/Option';
 import React, { useCallback, useContext, useMemo, useRef } from 'react';
 
 import * as Process from '@dxos/compute/Process';
-import { Icon, IconButton, ScrollArea, Tooltip, composable, composableProps } from '@dxos/react-ui';
-import { type ColumnRenderer, type IconRenderer, Tree, createStaticTreeModel } from '@dxos/react-ui-list';
-import { mx } from '@dxos/ui-theme';
+import { Tree, type TreeNode, type TreeSelectEvent, createStaticTreeModel } from '@dxos/react-ui-list';
+import * as Button from '@dxos/react-ui/Button';
+import * as Icon from '@dxos/react-ui/Icon';
+import * as Tooltip from '@dxos/react-ui/Tooltip';
+import * as Util from '@dxos/react-ui/Util';
 import { Unit } from '@dxos/util';
 
 const DEFAULT_DEPTH = 1;
@@ -23,7 +25,7 @@ const NESTED_ACTIVE_STATES = new Set<Process.State>([
 
 export type ProcessTreeProps = {
   // TODO(burdon): Atom.
-  processes: readonly Process.Info[];
+  processes: readonly Process.Process[];
   /**
    * Maximum nesting depth from the root (1 = top-level processes only).
    *
@@ -36,19 +38,19 @@ export type ProcessTreeProps = {
    *
    * Must be referentially stable — `ProcessTree` is memoized on its props.
    */
-  resolveLabel?: (process: Process.Info) => string | undefined;
+  resolveLabel?: (process: Process.Process) => string | undefined;
   /** Pids drawn as selected; the tree is controlled, so a click reports through `onSelectedChange`. */
   selected?: readonly string[];
   /** The selection after a click: the clicked pid alone, or toggled among the others on a meta-click. */
   onSelectedChange?: (selected: string[]) => void;
-  onProcessTerminate?: (process: Process.Info) => void;
+  onProcessTerminate?: (process: Process.Process) => void;
 };
 
 /** Node of the pruned process forest handed to the tree model. */
 type ProcessNode = {
   id: string;
   /** Absent on the synthetic root, which anchors the top-level processes and is never rendered. */
-  process?: Process.Info;
+  process?: Process.Process;
   children: ProcessNode[];
 };
 
@@ -63,7 +65,7 @@ const NO_SELECTION: readonly string[] = [];
  * model and is re-seeded — a collapse must survive the next tick. Renders through `Tree`.
  */
 export const ProcessTree = React.memo(
-  composable<HTMLDivElement, ProcessTreeProps>(
+  Util.composable<HTMLDivElement, ProcessTreeProps>(
     (
       {
         processes,
@@ -109,7 +111,7 @@ export const ProcessTree = React.memo(
       );
 
       const handleSelect = useCallback(
-        ({ item, current, meta }: { item: ProcessNode; current: boolean; meta: boolean }) => {
+        ({ item, current, meta }: TreeSelectEvent<ProcessNode>) => {
           if (!item.process) {
             return;
           }
@@ -121,91 +123,98 @@ export const ProcessTree = React.memo(
         [selected, onSelectedChange],
       );
 
-      const renderIcon = useMemo(() => makeIconRenderer(), []);
-      const renderColumns = useMemo(() => makeColumnRenderer(onProcessTerminate), [onProcessTerminate]);
+      const renderRow = useCallback(
+        (node: TreeNode<ProcessNode>) => <ProcessRow node={node} onProcessTerminate={onProcessTerminate} />,
+        [onProcessTerminate],
+      );
 
       return (
-        <ScrollArea.Root {...composableProps(props)} thin ref={forwardedRef}>
-          <ScrollArea.Viewport>
-            <Tree<ProcessNode>
-              id={ROOT_ID}
-              model={model}
-              density='sm'
-              selectionMode='multiple'
-              classNames='text-sm tabular-nums font-thin'
-              gridTemplateColumns='[tree-row-start] var(--dx-control) minmax(0, 1fr) min-content min-content [tree-row-end]'
-              renderIcon={renderIcon}
-              renderColumns={renderColumns}
-              onOpenChange={handleOpenChange}
-              onSelect={handleSelect}
-            />
-          </ScrollArea.Viewport>
-        </ScrollArea.Root>
+        <div {...Util.composableProps(props, { classNames: 'flex flex-col min-h-0' })} ref={forwardedRef}>
+          <Tree.Root
+            id={ROOT_ID}
+            model={model}
+            virtual='fixed'
+            size='sm'
+            selectionMode='multiple'
+            columns={COLUMNS}
+            onOpenChange={handleOpenChange}
+            onSelect={handleSelect}
+          >
+            <Tree.Content>{renderRow}</Tree.Content>
+          </Tree.Root>
+        </div>
       );
     },
   ),
 );
 
-/** Status glyph — animated, coloured and tooltipped per state, which `TreeItemDataProps.icon` cannot express. */
-const makeIconRenderer =
-  (): IconRenderer<ProcessNode> =>
-  ({ item: { process } }) =>
-    process === undefined ? null : (
-      <Tooltip.Trigger content={process.state.toString()}>
-        <Icon
-          size={4}
-          synchronized
-          classNames={mx(
-            'shrink-0',
-            process.state === Process.State.RUNNING && 'animate-spin',
-            process.state === Process.State.FAILED && 'text-error-text',
-            process.state === Process.State.SUCCEEDED && 'text-success-text',
-          )}
-          icon={Match.value(process.state).pipe(
-            Match.when(Process.State.RUNNING, () => 'ph--spinner-gap--regular'),
-            Match.when(Process.State.SUCCEEDED, () => 'ph--check-circle--regular'),
-            Match.when(Process.State.FAILED, () => 'ph--warning--regular'),
-            Match.when(Process.State.HYBERNATING, () => 'ph--spinner--regular'),
-            Match.when(Process.State.IDLE, () => 'ph--moon-stars--regular'),
-            Match.when(Process.State.TERMINATING, () => 'ph--x-circle--regular'),
-            Match.when(Process.State.TERMINATED, () => 'ph--x-circle--regular'),
-            Match.orElse(() => 'ph--spinner-gap--regular'),
-          )}
-        />
-      </Tooltip.Trigger>
-    );
+/** Disclosure, status glyph, label, then the elapsed time and the terminate control. */
+const COLUMNS = 'var(--dx-half-block-size) var(--dx-block-size) minmax(0, 1fr) min-content min-content';
 
-/** Trailing columns: elapsed time for finished processes, and the terminate control. */
-const makeColumnRenderer =
-  (onProcessTerminate?: (process: Process.Info) => void): ColumnRenderer<ProcessNode> =>
-  ({ item: { process } }) =>
-    process === undefined ? null : (
-      <>
-        <div className='flex items-center justify-end text-xs text-description tabular-nums'>
-          {[Process.State.FAILED, Process.State.SUCCEEDED].includes(process.state) && (
-            <span className='whitespace-nowrap'>{Unit.Duration(process.metrics.wallTime).toString()}</span>
-          )}
-        </div>
-        <div className='flex items-center'>
-          {onProcessTerminate && (
-            <IconButton
-              classNames='min-h-0 p-1'
-              icon='ph--x--regular'
-              iconOnly
-              density='sm'
-              variant='ghost'
-              label='Actions'
-              onClick={(event) => {
-                event.stopPropagation();
-                onProcessTerminate(process);
-              }}
-            />
-          )}
-        </div>
-      </>
-    );
+type ProcessRowProps = {
+  node: TreeNode<ProcessNode>;
+  onProcessTerminate?: (process: Process.Process) => void;
+};
+
+/** One process: its status glyph (animated, coloured and tooltipped per state), elapsed time and terminate control. */
+const ProcessRow = ({ node, onProcessTerminate }: ProcessRowProps) => {
+  const process = node.item?.process;
+  return (
+    <Tree.Item node={node}>
+      <Tree.ItemIndicator />
+      <Tree.ItemIcon>{process && <StatusIcon process={process} />}</Tree.ItemIcon>
+      <Tree.ItemText />
+      <span className='text-end ps-1 text-xs text-fg-muted tabular-nums whitespace-nowrap'>
+        {process &&
+          [Process.State.FAILED, Process.State.SUCCEEDED].includes(process.state) &&
+          Unit.Duration(process.metrics.wallTime).toString()}
+      </span>
+      <span>
+        {process && onProcessTerminate && process.state !== Process.State.TERMINATED && (
+          <Button.Root
+            icon='ph--x--regular'
+            iconOnly
+            size='sm'
+            variant='ghost'
+            label='Actions'
+            onClick={(event) => {
+              event.stopPropagation();
+              onProcessTerminate(process);
+            }}
+          />
+        )}
+      </span>
+    </Tree.Item>
+  );
+};
+
+const StatusIcon = ({ process }: { process: Process.Process }) => (
+  <Tooltip.Trigger content={process.state.toString()}>
+    <Icon.Icon
+      size='md'
+      spin={process.state === Process.State.RUNNING}
+      valence={
+        process.state === Process.State.FAILED
+          ? 'error'
+          : process.state === Process.State.SUCCEEDED
+            ? 'success'
+            : undefined
+      }
+      icon={Match.value(process.state).pipe(
+        Match.when(Process.State.RUNNING, () => 'ph--spinner-gap--regular'),
+        Match.when(Process.State.SUCCEEDED, () => 'ph--check-circle--regular'),
+        Match.when(Process.State.FAILED, () => 'ph--warning--regular'),
+        Match.when(Process.State.HYBERNATING, () => 'ph--spinner--regular'),
+        Match.when(Process.State.IDLE, () => 'ph--moon-stars--regular'),
+        Match.when(Process.State.TERMINATING, () => 'ph--x-circle--regular'),
+        Match.when(Process.State.TERMINATED, () => 'ph--x-circle--regular'),
+        Match.orElse(() => 'ph--spinner-gap--regular'),
+      )}
+    />
+  </Tooltip.Trigger>
+);
 
-const sortProcesses = (processes: readonly Process.Info[]): Process.Info[] => {
+const sortProcesses = (processes: readonly Process.Process[]): Process.Process[] => {
   return [
     ...processes.filter((process) => [Process.State.RUNNING, Process.State.HYBERNATING].includes(process.state)),
     ...processes.filter((process) => [Process.State.IDLE].includes(process.state)).slice(0, 3),
@@ -219,7 +228,7 @@ const sortProcesses = (processes: readonly Process.Info[]): Process.Info[] => {
   });
 };
 
-const sortNestedActive = (processes: readonly Process.Info[]): Process.Info[] =>
+const sortNestedActive = (processes: readonly Process.Process[]): Process.Process[] =>
   processes
     .filter((process) => NESTED_ACTIVE_STATES.has(process.state))
     .sort((left, right) => {
@@ -232,10 +241,10 @@ const sortNestedActive = (processes: readonly Process.Info[]): Process.Info[] =>
  * Builds the process forest, pruned to `maxDepth` from each root. Nested levels surface only still-
  * active processes, so a deep tree stays readable while completed work collapses out of view.
  */
-const buildProcessForest = (processes: readonly Process.Info[], maxDepth: number): ProcessNode => {
+const buildProcessForest = (processes: readonly Process.Process[], maxDepth: number): ProcessNode => {
   const pidSet = new Set(processes.map((process) => String(process.pid)));
-  const childrenByParent = new Map<string, Process.Info[]>();
-  const roots: Process.Info[] = [];
+  const childrenByParent = new Map<string, Process.Process[]>();
+  const roots: Process.Process[] = [];
 
   for (const process of processes) {
     const parent = process.parentPid;
@@ -249,7 +258,7 @@ const buildProcessForest = (processes: readonly Process.Info[], maxDepth: number
     childrenByParent.set(key, siblings);
   }
 
-  const visit = (process: Process.Info, level: number): ProcessNode => {
+  const visit = (process: Process.Process, level: number): ProcessNode => {
     const children = level >= maxDepth ? [] : sortNestedActive(childrenByParent.get(String(process.pid)) ?? []);
     return {
       id: String(process.pid),

package/src/components/Timeline/Timeline.stories.tsx

@@ -4,13 +4,19 @@
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef, useState } from 'react';
+import { expect, userEvent, waitFor } from 'storybook/test';
 
 import { LogLevel } from '@dxos/log';
 import { random } from '@dxos/random';
-import { Button, Panel, ScrollArea, ScrollContainer, Toolbar, useInterval } from '@dxos/react-ui';
-import { type ScrollController } from '@dxos/react-ui';
+import * as Button from '@dxos/react-ui/Button';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Panel from '@dxos/react-ui/Panel';
+import * as ScrollArea from '@dxos/react-ui/ScrollArea';
+import * as ScrollContainer from '@dxos/react-ui/ScrollContainer';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import * as Toolbar from '@dxos/react-ui/Toolbar';
 
+import { defaultOptions } from './timeline-options.ts';
 import { type Commit, Timeline, TimelineProps } from './Timeline.tsx';
 
 random.seed(1);
@@ -130,22 +136,23 @@ const generateCommits = (n: number): Pick<TimelineProps, 'commits' | 'branches'>
   return { commits, branches };
 };
 
-const DefaultStory = (props: TimelineProps) => {
+const DefaultStory = (props: Omit<TimelineProps, 'scroller'>) => {
+  const [viewport, setViewport] = useState<HTMLDivElement | null>(null);
+
   return (
     <ScrollArea.Root>
-      <ScrollArea.Viewport>
-        <Timeline {...props} />
+      <ScrollArea.Viewport ref={setViewport}>
+        <Timeline {...props} scroller={viewport} />
       </ScrollArea.Viewport>
     </ScrollArea.Root>
   );
 };
 
 const meta = {
-  title: 'ui/react-ui-components/Timeline',
-  component: Timeline,
+  title: 'ui/react-ui-trace/Timeline',
   render: DefaultStory,
-  decorators: [withTheme(), withLayout({ layout: 'column' })],
-} satisfies Meta<typeof Timeline>;
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-(--dx-complementary-sidebar-size)' })],
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
@@ -250,6 +257,86 @@ export const Compact: Story = {
   args: { ...generateCommits(100), compact: true },
 };
 
+/** A history far longer than any viewport; only the rows in view are in the DOM. */
+const LARGE_HISTORY_LENGTH = 5_000;
+
+const generateLargeHistory = (): Pick<TimelineProps, 'commits' | 'branches'> => {
+  const branches = ['main', 'worker'];
+  const commits: Commit[] = [];
+  for (let index = 0; index < LARGE_HISTORY_LENGTH; index++) {
+    const branch = index % 20 < 4 ? 'worker' : 'main';
+    commits.push({
+      id: `commit-${index}`,
+      branch,
+      message: `Commit ${index}`,
+      parents: index > 0 ? [`commit-${index - 1}`] : [],
+    });
+  }
+
+  return { commits, branches };
+};
+
+const mountedRows = (canvasElement: HTMLElement) => canvasElement.querySelectorAll<HTMLElement>('[role="listitem"]');
+
+export const Large: Story = {
+  args: { ...generateLargeHistory(), showTimestamp: true },
+  play: async ({ canvasElement }) => {
+    await waitFor(() => expect(mountedRows(canvasElement).length).toBeGreaterThan(0));
+
+    const rows = mountedRows(canvasElement);
+    // Windowed: a viewport's worth of rows plus the overscan, never the whole history.
+    await expect(rows.length).toBeLessThan(LARGE_HISTORY_LENGTH / 10);
+    // Rows are exactly `lineHeight` tall, which is what makes the declared extent exact.
+    for (const row of rows) {
+      await expect(row.getBoundingClientRect().height).toBe(defaultOptions.lineHeight);
+    }
+  },
+};
+
+/**
+ * Windowing must not cost the graph: a row deep in the history still draws every lane crossing it,
+ * because the spans it reads are computed over the whole history, not over the mounted rows.
+ */
+export const Branching: Story = {
+  args: generateLargeHistory(),
+  play: async ({ canvasElement }) => {
+    await waitFor(() => expect(mountedRows(canvasElement).length).toBeGreaterThan(0));
+
+    // Jump to the end, so every mounted row was windowed in rather than rendered at mount.
+    const timeline = canvasElement.querySelector<HTMLElement>('[tabindex="0"]');
+    timeline?.focus();
+    await userEvent.keyboard('{Meta>}{ArrowDown}{/Meta}');
+    await waitFor(() =>
+      expect(canvasElement.querySelector(`[data-commit-index="${LARGE_HISTORY_LENGTH - 1}"]`)).not.toBeNull(),
+    );
+
+    const rows = [...mountedRows(canvasElement)];
+    // Each row carries its own node, and a connector for every lane that runs through it.
+    const nodesPerRow = rows.map((row) => row.querySelectorAll('svg circle').length);
+    await expect(Math.min(...nodesPerRow)).toBeGreaterThan(0);
+    // Somewhere in the window a second lane is open, so its through-line is drawn beside the node.
+    const connectorsPerRow = rows.map((row) => row.querySelectorAll('svg path').length);
+    await expect(Math.max(...connectorsPerRow)).toBeGreaterThan(1);
+  },
+};
+
+export const Keyboard: Story = {
+  args: generateLargeHistory(),
+  play: async ({ canvasElement }) => {
+    await waitFor(() => expect(mountedRows(canvasElement).length).toBeGreaterThan(0));
+
+    // The last row is thousands of rows down, so it is only reachable if the move scrolls to it.
+    const timeline = canvasElement.querySelector<HTMLElement>('[tabindex="0"]');
+    await expect(timeline).not.toBeNull();
+    timeline?.focus();
+    await userEvent.keyboard('{Meta>}{ArrowDown}{/Meta}');
+
+    const lastRow = () => canvasElement.querySelector(`[data-commit-index="${LARGE_HISTORY_LENGTH - 1}"]`);
+    await waitFor(() => expect(lastRow()).not.toBeNull());
+    await waitFor(() => expect(lastRow()?.getAttribute('aria-current')).toBe('true'));
+  },
+};
+
 export const Streaming: Story = {
   render: () => {
     const [branches, setBranches] = useState<string[]>(['main']);
@@ -265,7 +352,7 @@ export const Streaming: Story = {
     const closedBranches = useRef<Set<string>>(new Set());
 
     const [running, setRunning] = useState(true);
-    useInterval(
+    Hooks.useInterval(
       () => {
         if (!running) {
           return;
@@ -294,28 +381,29 @@ export const Streaming: Story = {
       [running],
     );
 
-    const scrollerRef = useRef<ScrollController>(null);
+    const scrollerRef = useRef<ScrollContainer.ScrollController>(null);
+    const [viewport, setViewport] = useState<HTMLDivElement | null>(null);
 
     return (
       <Panel.Root>
-        <Panel.Toolbar asChild>
+        <Panel.Header>
           <Toolbar.Root>
-            <Button onClick={() => setRunning(true)}>Start</Button>
-            <Button onClick={() => setRunning(false)}>Stop</Button>
-            <Button onClick={() => scrollerRef.current?.scrollToTop()}>Top</Button>
-            <Button onClick={() => scrollerRef.current?.scrollToBottom()}>Bottom</Button>
+            <Button.Root onClick={() => setRunning(true)}>Start</Button.Root>
+            <Button.Root onClick={() => setRunning(false)}>Stop</Button.Root>
+            <Button.Root onClick={() => scrollerRef.current?.scrollToTop()}>Top</Button.Root>
+            <Button.Root onClick={() => scrollerRef.current?.scrollToBottom()}>Bottom</Button.Root>
           </Toolbar.Root>
-        </Panel.Toolbar>
-        <Panel.Content asChild>
+        </Panel.Header>
+        <Panel.Body>
           <ScrollContainer.Root pin ref={scrollerRef}>
-            <ScrollContainer.Content thin>
-              <ScrollContainer.Viewport>
-                <Timeline branches={branches} commits={commits} showTimestamp />
+            <ScrollContainer.Content width='thin'>
+              <ScrollContainer.Viewport ref={setViewport}>
+                <Timeline branches={branches} commits={commits} showTimestamp scroller={viewport} />
               </ScrollContainer.Viewport>
               <ScrollContainer.ScrollDownButton />
             </ScrollContainer.Content>
           </ScrollContainer.Root>
-        </Panel.Content>
+        </Panel.Body>
       </Panel.Root>
     );
   },