@workflow/web-shared 5.0.0-beta.4 → 5.0.0-beta.41

package/src/components/trace-viewer/util/use-streaming-spans.ts

@@ -1,426 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { useTraceViewer } from '../context';
-import type {
-  VisibleSpan,
-  VisibleSpanEvent,
-  WorkerRequest,
-  WorkerResponse,
-} from '../types';
-import {
-  MARKER_HEIGHT,
-  ROW_HEIGHT,
-  ROW_PADDING,
-  TIMELINE_PADDING,
-} from './constants';
-import { adjustSpanVisibility } from './tree';
-
-type UpdateFilter = (filter: string) => void;
-
-interface QueuedSpan {
-  /** The distance from this span to the viewport */
-  d: number;
-  /** The span that's waiting to be rendered */
-  span: VisibleSpan;
-}
-
-function emptyArrayInit<T>(): T[] {
-  return [];
-}
-
-export const useStreamingSpans = (
-  highlightedSpans?: string[],
-  eagerRender = false
-): {
-  rows: VisibleSpan[][];
-  spans: VisibleSpan[];
-  events: VisibleSpanEvent[];
-  scale: number;
-} => {
-  const { state, dispatch } = useTraceViewer();
-  const {
-    root,
-    filter: ctxFilter,
-    scale,
-    timelineRef,
-    timelineWidth,
-    spanMap,
-    scrollSnapshotRef,
-    selected,
-    memoCacheRef,
-  } = state;
-  const timelineHeight = useStableValue(state.timelineHeight);
-  const counterRef = useRef(0);
-  const [rows, setRows] = useState<VisibleSpan[][]>(emptyArrayInit);
-  const [visibleSpans, setVisibleSpans] =
-    useState<VisibleSpan[]>(emptyArrayInit);
-  const [visibleEvents, setVisibleEvents] =
-    useState<VisibleSpanEvent[]>(emptyArrayInit);
-  const [resultScale, setResultScale] = useState(-1);
-
-  const updateFilterRef = useRef<UpdateFilter>(undefined);
-  useEffect(() => updateFilterRef.current?.(ctxFilter), [ctxFilter]);
-
-  useEffect(() => {
-    if (!highlightedSpans?.length) return;
-
-    for (const row of rows) {
-      for (const node of row) {
-        const isHighlighted = highlightedSpans.includes(node.span.spanId);
-        if (node.isHighlighted === isHighlighted) continue;
-        node.isHighlighted = isHighlighted;
-        memoCacheRef.current.set(node.span.spanId, {});
-      }
-    }
-    dispatch({
-      type: 'forceRender',
-    });
-  }, [rows, highlightedSpans, dispatch, memoCacheRef]);
-
-  useEffect(() => {
-    if (!root.startTime) return;
-
-    const worker = new Worker(new URL('../worker', import.meta.url), {
-      type: 'module',
-    });
-    let requestId = ++counterRef.current;
-    const onMessage = (event: MessageEvent): void => {
-      const data = event.data as WorkerResponse;
-
-      switch (data.type) {
-        case 'setRowsResult': {
-          if (data?.requestId !== requestId) return;
-          if (data.isEnd) {
-            for (const row of data.rows) {
-              for (const node of row) {
-                // Ensure that we remap to the original span to reduce memory overhead
-                // and confusion down the line
-                node.span = spanMap[node.span.spanId]?.span ?? node.span;
-              }
-            }
-          }
-          setRows(data.rows);
-          break;
-        }
-        case 'updateHighlight': {
-          if (data?.requestId !== requestId) return;
-          const { matches } = data;
-          setRows((previous) => {
-            for (const row of previous) {
-              for (const node of row) {
-                const isHighlighted = matches.has(node.span.spanId);
-                if (node.isHighlighted === isHighlighted) continue;
-                node.isHighlighted = isHighlighted;
-                memoCacheRef.current.set(node.span.spanId, {});
-              }
-            }
-            return previous;
-          });
-          dispatch({
-            type: 'forceRender',
-          });
-          break;
-        }
-        default:
-          break;
-      }
-    };
-    worker.addEventListener('message', onMessage);
-
-    const message: WorkerRequest = {
-      requestId,
-      type: 'calculateSpanPositions',
-      root,
-    };
-    worker.postMessage(message);
-
-    updateFilterRef.current = (_filter) => {
-      const filter = _filter.trim().toLocaleLowerCase();
-      if (!filter) {
-        setRows((previous) =>
-          previous.map((row) =>
-            row.map((node) => {
-              node.isHighlighted = undefined;
-              return {
-                ...node,
-              };
-            })
-          )
-        );
-        return;
-      }
-
-      requestId = ++counterRef.current;
-      const filterMessage: WorkerRequest = {
-        type: 'filterSpans',
-        requestId,
-        root,
-        filter,
-      };
-      worker.postMessage(filterMessage);
-    };
-
-    return () => {
-      worker.terminate();
-    };
-  }, [root, spanMap, dispatch, memoCacheRef]);
-
-  useEffect(() => {
-    if (!rows.length) return;
-
-    if (eagerRender) {
-      const visible: VisibleSpan[] = [];
-      const events: VisibleSpanEvent[] = [];
-      for (const row of rows) {
-        for (const span of row) {
-          if (!adjustSpanVisibility(span, scale)) continue;
-          visible.push(span);
-          if (span.events) {
-            events.push(...span.events);
-          }
-        }
-      }
-      setVisibleSpans(visible);
-      setVisibleEvents(events);
-      setResultScale(scale);
-      return;
-    }
-
-    const $timeline = timelineRef.current;
-    let snapshot = scrollSnapshotRef.current;
-    let hasScrolled = false;
-    let isDone = false;
-    let maxD = 0;
-    let currentD = 0;
-    const overscan = Math.max(500, timelineWidth * 0.5);
-    const queue = new Array<QueuedSpan[] | null>(rows.length).fill(null);
-
-    const buildQueue = (): void => {
-      isDone = true;
-
-      const lastRow = Math.min(
-        1 + currentD + Math.ceil(snapshot?.endRow ?? Number.POSITIVE_INFINITY),
-        rows.length
-      );
-      for (let i = lastRow; i--; ) {
-        if (queue[i]) continue;
-        const rowDelta = getRowDelta(i);
-        if (Math.abs(rowDelta) > currentD) {
-          isDone = false;
-          if (rowDelta > 0) {
-            continue;
-          } else {
-            break;
-          }
-        }
-
-        const queueRow: QueuedSpan[] = [];
-        const row = rows[i];
-        if (!row) continue;
-
-        for (const span of row) {
-          if (!adjustSpanVisibility(span, scale)) continue;
-
-          const d = getDistance(span);
-          maxD = Math.max(d, maxD);
-
-          queueRow.push({
-            d,
-            span,
-          });
-        }
-
-        queue[i] = queueRow;
-      }
-    };
-
-    /**
-     * This returns the signed distance between the row and the targeted rows
-     */
-    const getRowDelta = (row: number): number => {
-      if (!snapshot) return 0;
-
-      if (row < snapshot.startRow) {
-        return row - snapshot.startRow;
-      } else if (row > snapshot.endRow) {
-        return row - snapshot.endRow;
-      }
-
-      return 0;
-    };
-
-    const getDistance = (span: VisibleSpan): number => {
-      if (!snapshot) return 0;
-
-      let xDistance = 0;
-      if (span.endTime < snapshot.startTime) {
-        xDistance = snapshot.startTime - span.endTime;
-      } else if (span.startTime > snapshot.endTime) {
-        xDistance = span.startTime - snapshot.endTime;
-      }
-
-      const yDistance = Math.abs(getRowDelta(span.row));
-
-      if (!xDistance && !yDistance) return 0;
-
-      return Math.sqrt(
-        (xDistance / scale) ** 2 + (yDistance * ROW_HEIGHT + ROW_PADDING) ** 2
-      );
-    };
-
-    const updateSnapshot = (): void => {
-      if (!$timeline) return;
-
-      const { scrollLeft, scrollTop } = $timeline;
-      const anchorX = 0;
-      const anchorT = scrollLeft / scale;
-      const startRow =
-        (scrollTop - MARKER_HEIGHT - TIMELINE_PADDING) /
-        (ROW_HEIGHT + ROW_PADDING);
-      const endRow =
-        startRow + Math.ceil(timelineHeight / (ROW_HEIGHT + ROW_PADDING));
-
-      snapshot = {
-        anchorT,
-        anchorX,
-        scrollLeft,
-        scrollTop,
-        startTime: root.startTime + scrollLeft / scale,
-        endTime: root.startTime + (scrollLeft + timelineWidth) / scale,
-        startRow,
-        endRow,
-        scale,
-      };
-      scrollSnapshotRef.current = snapshot;
-
-      for (let i = queue.length; i--; ) {
-        queue[i] = null;
-      }
-    };
-
-    let nextFrame = 0;
-    const onFrame = (): void => {
-      if (hasScrolled || !snapshot) {
-        hasScrolled = false;
-        updateSnapshot();
-      }
-      buildQueue();
-      const visible: VisibleSpan[] = [];
-      const events: VisibleSpanEvent[] = [];
-      for (const row of queue) {
-        if (!row) continue;
-
-        for (const { d, span } of row) {
-          if (d > currentD) continue;
-          visible.push(span);
-          if (span.events) {
-            events.push(...span.events);
-          }
-        }
-      }
-
-      if (currentD < overscan && (!isDone || currentD < maxD)) {
-        currentD = Math.min(overscan, currentD + 100);
-        nextFrame = requestAnimationFrame(onFrame);
-      }
-
-      setVisibleSpans(visible);
-      setVisibleEvents(events);
-      setResultScale(scale);
-    };
-    onFrame();
-
-    let ignoreT = Date.now();
-    const onWheel = (event: WheelEvent): void => {
-      if (event.ctrlKey || event.metaKey) {
-        ignoreT = Date.now();
-      }
-    };
-    $timeline?.addEventListener('wheel', onWheel);
-
-    const onScroll = (): void => {
-      if (Date.now() - ignoreT <= 50) return;
-
-      hasScrolled = true;
-      cancelAnimationFrame(nextFrame);
-      nextFrame = requestAnimationFrame(onFrame);
-    };
-    $timeline?.addEventListener('scroll', onScroll);
-
-    return () => {
-      cancelAnimationFrame(nextFrame);
-      $timeline?.removeEventListener('wheel', onWheel);
-      $timeline?.removeEventListener('scroll', onScroll);
-    };
-  }, [
-    rows,
-    root,
-    scale,
-    scrollSnapshotRef,
-    timelineRef,
-    timelineWidth,
-    timelineHeight,
-    eagerRender,
-  ]);
-
-  useEffect(() => {
-    if (!selected) return;
-
-    let span: VisibleSpan | undefined;
-    for (const x of visibleSpans) {
-      if (x.span.spanId === selected.span.spanId) {
-        span = x;
-        break;
-      }
-    }
-
-    const $span = span?.ref?.current;
-    if (!span || !$span) return;
-
-    span.isSelected = true;
-    $span.setAttribute('data-selected', '');
-
-    return () => {
-      span.isSelected = false;
-      $span.removeAttribute('data-selected');
-    };
-  }, [visibleSpans, selected]);
-
-  return {
-    rows,
-    spans: visibleSpans,
-    events: visibleEvents,
-    scale: resultScale,
-  };
-};
-
-/**
- * This hook keeps returning the same value until the current value
- * has been stable for a few frames in a row
- */
-function useStableValue<T>(value: T): T {
-  const [cached, setCached] = useState(value);
-
-  useEffect(() => {
-    if (cached === value) return;
-
-    let frameCount = 0;
-    let nextFrame = 0;
-    const onFrame = (): void => {
-      if (++frameCount <= 3) {
-        nextFrame = requestAnimationFrame(onFrame);
-        return;
-      }
-
-      setCached(value);
-    };
-    onFrame();
-
-    return () => {
-      cancelAnimationFrame(nextFrame);
-    };
-  }, [cached, value]);
-
-  return cached;
-}

package/src/components/trace-viewer/util/use-trackpad-zoom.tsx

@@ -1,51 +0,0 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-
-/**
- * The delta is positive while zooming in, negative while zooming out
- */
-export type TrackpadZoomHandler = (delta: number) => void;
-
-export function useTrackpadZoom(handler: TrackpadZoomHandler): void {
-  const handlerRef = useRef(handler);
-  handlerRef.current = handler;
-
-  useEffect(() => {
-    let pendingDelta = 0;
-    let nextFrame = 0;
-    const onFrame = (): void => {
-      handlerRef.current(pendingDelta);
-      pendingDelta = 0;
-    };
-
-    const onWheel = (event: WheelEvent): void => {
-      if (!event.ctrlKey && !event.metaKey) return;
-
-      event.preventDefault();
-      let delta = -event.deltaY;
-
-      switch (event.deltaMode) {
-        case WheelEvent.DOM_DELTA_PAGE:
-          delta *= window.innerHeight;
-          break;
-        case WheelEvent.DOM_DELTA_LINE:
-          delta *= 20;
-          break;
-        default:
-          break;
-      }
-
-      pendingDelta += delta;
-      cancelAnimationFrame(nextFrame);
-      nextFrame = requestAnimationFrame(onFrame);
-    };
-
-    window.addEventListener('wheel', onWheel, { passive: false });
-
-    return () => {
-      window.removeEventListener('wheel', onWheel);
-      cancelAnimationFrame(nextFrame);
-    };
-  }, []);
-}

package/src/components/trace-viewer/worker.ts

@@ -1,131 +0,0 @@
-import type {
-  RootNode,
-  Span,
-  TraceNode,
-  VisibleSpan,
-  WorkerRequest,
-  WorkerResponse,
-} from './types';
-import { addToRow } from './util/tree';
-
-// The most recent requestId
-let requestId = 0;
-
-self.addEventListener('message', (event) => {
-  const data = event.data as WorkerRequest;
-  requestId = Math.max(requestId, data?.requestId || 0);
-
-  switch (data.type) {
-    case 'calculateSpanPositions':
-      calculateSpanPositions(data.root);
-      break;
-    case 'filterSpans':
-      filterSpans(data.root, data.filter);
-      break;
-    default:
-      break;
-  }
-});
-
-const positionHelper = (node: TraceNode, pending: VisibleSpan[]): void => {
-  if ('parent' in node) {
-    const n = node as VisibleSpan;
-    n.row = -1;
-    n.isVisible = true;
-    pending.push(n);
-  }
-
-  const sortedChildren = node.children
-    .slice()
-    .sort((a, b) => a.startTime - b.startTime || b.duration - a.duration);
-  for (const child of sortedChildren) {
-    positionHelper(child, pending);
-  }
-};
-
-const calculateSpanPositions = (root: RootNode): void => {
-  const responseId = requestId;
-  const placed: VisibleSpan[][] = [];
-  const pending: VisibleSpan[] = [];
-
-  positionHelper(root, pending);
-
-  let lastFlushT = Date.now() - 10;
-  let lastFlushC = -64;
-  let count = 0;
-  const flush = (): void => {
-    for (const row of placed) {
-      row.sort((a, b) => a.startTime - b.startTime);
-    }
-    const message: WorkerResponse = {
-      requestId: responseId,
-      type: 'setRowsResult',
-      rows: placed,
-      isEnd: !pending.length,
-    };
-    postMessage(message);
-    lastFlushT = Date.now();
-    lastFlushC = count;
-  };
-
-  while (true) {
-    const node = pending.shift();
-    if (!node) {
-      flush();
-      return;
-    }
-    addToRow(placed, node, 0.001);
-    ++count;
-    if (Date.now() - lastFlushT >= 15 || count - lastFlushC >= 256) {
-      flush();
-    }
-  }
-};
-
-const ATTR_FILTER_REGEX = /(?<=^|\s)(?<pair>(?<key>[\w.]+):(?<value>\S*))/g;
-
-const filterSpans = (root: RootNode, filter: string): void => {
-  const responseId = requestId;
-
-  const matches = new Set<string>();
-
-  const name = filter
-    .replace(ATTR_FILTER_REGEX, '')
-    .replace(/\s{2,}/g, ' ')
-    .trim();
-  const attrs: [string, string][] = [];
-  for (const m of filter.matchAll(ATTR_FILTER_REGEX)) {
-    const { key = '', value = '' } = m.groups || {};
-    attrs.push([key, value.toLocaleLowerCase()]);
-  }
-
-  const match = (span: Span): boolean => {
-    const nameMatch =
-      span.name.toLocaleLowerCase().includes(name) ||
-      span.spanId.toLocaleLowerCase().includes(name);
-    if (!nameMatch) return false;
-    // TODO: support resource attribute filtering
-    return attrs.every(([key, value]) => {
-      const v = span.attributes[key];
-      if (!v) return false;
-      return String(v).toLocaleLowerCase().includes(value);
-    });
-  };
-
-  const helper = (node: TraceNode): void => {
-    for (const child of node.children) {
-      if (match(child.span)) {
-        matches.add(child.span.spanId);
-      }
-      helper(child);
-    }
-  };
-  helper(root);
-
-  const message: WorkerResponse = {
-    requestId: responseId,
-    type: 'updateHighlight',
-    matches,
-  };
-  postMessage(message);
-};

package/src/components/ui/inspector-theme.ts

@@ -1,110 +0,0 @@
-/**
- * Shared theme configuration for react-inspector's ObjectInspector.
- *
- * Colors follow Geist's Shiki JSON palette so the inspector reads the same
- * as highlighted code blocks across the product:
- *   - property names / punctuation: --ds-gray-1000 (default foreground)
- *   - strings / numbers / booleans: --ds-green-900
- *   - null / undefined: --ds-gray-900 (muted)
- *   - regexp / function: --ds-purple-900
- *   - date: --ds-pink-900
- *
- * Because the `--ds-*` tokens adapt to theme automatically, the light and
- * dark objects are intentionally identical.
- */
-
-// ---------------------------------------------------------------------------
-// Extended color tokens not supported by react-inspector's built-in theme
-// system, applied via our custom nodeRenderer in data-inspector.tsx.
-// ---------------------------------------------------------------------------
-
-export interface InspectorThemeExtended {
-  /** Color for Date values (Node: 'magenta') */
-  OBJECT_VALUE_DATE_COLOR: string;
-}
-
-export const inspectorThemeExtendedLight: InspectorThemeExtended = {
-  OBJECT_VALUE_DATE_COLOR: 'var(--ds-pink-900)',
-};
-
-export const inspectorThemeExtendedDark: InspectorThemeExtended = {
-  OBJECT_VALUE_DATE_COLOR: 'var(--ds-pink-900)',
-};
-
-// ---------------------------------------------------------------------------
-// Shared structural values (same in both themes)
-// ---------------------------------------------------------------------------
-
-const shared = {
-  BASE_FONT_SIZE: '11px',
-  BASE_LINE_HEIGHT: 1.4,
-  BASE_BACKGROUND_COLOR: 'transparent',
-  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
-  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
-  HTML_TAGNAME_TEXT_TRANSFORM: 'lowercase' as const,
-  ARROW_MARGIN_RIGHT: 3,
-  ARROW_FONT_SIZE: 12,
-  TREENODE_FONT_FAMILY: 'var(--font-mono)',
-  TREENODE_FONT_SIZE: '11px',
-  TREENODE_LINE_HEIGHT: 1.4,
-  TREENODE_PADDING_LEFT: 12,
-  TABLE_DATA_BACKGROUND_IMAGE: 'none',
-  TABLE_DATA_BACKGROUND_SIZE: '0',
-};
-
-// ---------------------------------------------------------------------------
-// Light theme
-// ---------------------------------------------------------------------------
-
-const geistTheme = {
-  ...shared,
-
-  // Base text
-  BASE_COLOR: 'var(--ds-gray-1000)',
-
-  // Property names — default foreground (matches JSON key color in Geist Shiki)
-  OBJECT_NAME_COLOR: 'var(--ds-gray-1000)',
-
-  // Strings & symbols — green
-  OBJECT_VALUE_STRING_COLOR: 'var(--ds-green-900)',
-  OBJECT_VALUE_SYMBOL_COLOR: 'var(--ds-green-900)',
-
-  // Numbers & booleans — green (Geist JSON tokens)
-  OBJECT_VALUE_NUMBER_COLOR: 'var(--ds-green-900)',
-  OBJECT_VALUE_BOOLEAN_COLOR: 'var(--ds-green-900)',
-
-  // null — muted foreground
-  OBJECT_VALUE_NULL_COLOR: 'var(--ds-gray-900)',
-
-  // undefined — muted foreground
-  OBJECT_VALUE_UNDEFINED_COLOR: 'var(--ds-gray-900)',
-
-  // RegExp — purple
-  OBJECT_VALUE_REGEXP_COLOR: 'var(--ds-purple-900)',
-
-  // Functions — purple
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'var(--ds-purple-900)',
-
-  // HTML (rarely used here, kept consistent with the palette)
-  HTML_TAG_COLOR: 'var(--ds-gray-900)',
-  HTML_TAGNAME_COLOR: 'var(--ds-blue-900)',
-  HTML_ATTRIBUTE_NAME_COLOR: 'var(--ds-amber-900)',
-  HTML_ATTRIBUTE_VALUE_COLOR: 'var(--ds-green-900)',
-  HTML_COMMENT_COLOR: 'var(--ds-gray-700)',
-  HTML_DOCTYPE_COLOR: 'var(--ds-gray-700)',
-
-  // Structural
-  ARROW_COLOR: 'var(--ds-gray-700)',
-  TABLE_BORDER_COLOR: 'var(--ds-gray-300)',
-  TABLE_TH_BACKGROUND_COLOR: 'var(--ds-gray-100)',
-  TABLE_TH_HOVER_COLOR: 'var(--ds-gray-200)',
-  TABLE_SORT_ICON_COLOR: 'var(--ds-gray-700)',
-};
-
-export const inspectorThemeLight = geistTheme;
-
-// ---------------------------------------------------------------------------
-// Dark theme
-// ---------------------------------------------------------------------------
-
-export const inspectorThemeDark = geistTheme;