@workflow/web-shared 4.1.0-beta.52 → 4.1.0-beta.54

package/src/components/trace-viewer/components/span-strategies.ts

@@ -0,0 +1,205 @@
+import type { RefObject } from 'react';
+import type { RootNode, ScrollSnapshot, VisibleSpan } from '../types';
+import { MARKER_HEIGHT, ROW_HEIGHT, ROW_PADDING } from '../util/constants';
+
+/**
+ * The resource type of a workflow span, read from span.attributes.resource.
+ * Falls back to 'default' for non-workflow (generic OTEL) spans.
+ */
+export type ResourceType = 'run' | 'step' | 'hook' | 'sleep' | 'default';
+
+/** Minimum rendered width so very short spans are always visible */
+const MIN_SPAN_WIDTH = 4;
+
+/**
+ * Layout result computed by a span strategy. Controls how the span
+ * is sized and positioned in the timeline.
+ */
+export interface SpanLayout {
+  /** The rendered width in pixels */
+  width: number;
+  /** The actual duration-based width (before min-width clamping) */
+  actualWidth: number;
+  /** The rendered height in pixels */
+  height: number;
+  /** The y position in pixels */
+  top: number;
+  /** The x position in pixels (from left) */
+  left: number;
+  /** Whether the span is considered "small" (< 64px actual width) */
+  isSmall: boolean;
+  /** Whether the span is considered "huge" (>= 500px actual width) */
+  isHuge: boolean;
+  /** Whether the span is currently hovered (with hover eligibility) */
+  isHovered: boolean;
+  /** Whether the span is expanded (hovered or selected) — controls sizing */
+  isExpanded: boolean;
+  /** Whether the span is near the right side of the visible area */
+  isNearRightSide: boolean;
+}
+
+/**
+ * Reads the resource type from a span's attributes.
+ */
+export function getResourceType(node: VisibleSpan): ResourceType {
+  const resource = node.span.attributes?.resource;
+  if (
+    resource === 'run' ||
+    resource === 'step' ||
+    resource === 'hook' ||
+    resource === 'sleep'
+  ) {
+    return resource;
+  }
+  return 'default';
+}
+
+// ──────────────────────────────────────────────────────────────────────────
+// Shared helpers
+// ──────────────────────────────────────────────────────────────────────────
+
+function computeIsSmall(actualWidth: number): boolean {
+  return actualWidth < 64;
+}
+
+function computeIsHuge(actualWidth: number): boolean {
+  return actualWidth >= 500;
+}
+
+function computeIsHovered(node: VisibleSpan, isHuge: boolean): boolean {
+  return node.isHovered && !isHuge && node.isHighlighted !== false;
+}
+
+function computeIsNearRightSide(
+  node: VisibleSpan,
+  root: RootNode,
+  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>,
+  isHovered: boolean
+): boolean {
+  if (!isHovered) return false;
+
+  let visibleDuration = root.duration;
+  let visibleEndTime = root.endTime;
+  const snapshot = scrollSnapshotRef.current;
+  if (snapshot) {
+    visibleDuration = snapshot.endTime - snapshot.startTime;
+    visibleEndTime = snapshot.endTime;
+  }
+  return visibleEndTime - node.startTime < 0.25 * visibleDuration;
+}
+
+// ──────────────────────────────────────────────────────────────────────────
+// Default layout (used by step, hook, run, default — all behave the same today)
+// ──────────────────────────────────────────────────────────────────────────
+
+function computeDefaultLayout(
+  node: VisibleSpan,
+  root: RootNode,
+  scale: number,
+  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>
+): SpanLayout {
+  const left = (node.startTime - root.startTime) * scale;
+  let top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * node.row;
+  const actualWidth = node.duration * scale;
+  const width = Math.max(actualWidth, MIN_SPAN_WIDTH);
+  let height = ROW_HEIGHT;
+
+  const isHuge = computeIsHuge(actualWidth);
+  const isSmall = computeIsSmall(actualWidth);
+  const isHovered = computeIsHovered(node, isHuge);
+  const isExpanded = isHovered || Boolean(node.isSelected);
+
+  if (isSmall && !isExpanded) {
+    height *= 0.4;
+    top += (ROW_HEIGHT - height) * 0.5;
+  }
+
+  const isNearRightSide = computeIsNearRightSide(
+    node,
+    root,
+    scrollSnapshotRef,
+    isExpanded
+  );
+
+  return {
+    width,
+    actualWidth,
+    height,
+    top,
+    left,
+    isSmall,
+    isHuge,
+    isHovered,
+    isExpanded,
+    isNearRightSide,
+  };
+}
+
+// ──────────────────────────────────────────────────────────────────────────
+// Per-type layout functions
+// Each returns the same result today but provides a clear extension point.
+// ──────────────────────────────────────────────────────────────────────────
+
+export function getRunLayout(
+  node: VisibleSpan,
+  root: RootNode,
+  scale: number,
+  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>
+): SpanLayout {
+  return computeDefaultLayout(node, root, scale, scrollSnapshotRef);
+}
+
+export function getStepLayout(
+  node: VisibleSpan,
+  root: RootNode,
+  scale: number,
+  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>
+): SpanLayout {
+  return computeDefaultLayout(node, root, scale, scrollSnapshotRef);
+}
+
+export function getHookLayout(
+  node: VisibleSpan,
+  root: RootNode,
+  scale: number,
+  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>
+): SpanLayout {
+  return computeDefaultLayout(node, root, scale, scrollSnapshotRef);
+}
+
+export function getSleepLayout(
+  node: VisibleSpan,
+  root: RootNode,
+  scale: number,
+  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>
+): SpanLayout {
+  return computeDefaultLayout(node, root, scale, scrollSnapshotRef);
+}
+
+// ──────────────────────────────────────────────────────────────────────────
+// Dispatcher
+// ──────────────────────────────────────────────────────────────────────────
+
+/**
+ * Computes the layout for a span based on its resource type.
+ */
+export function getSpanLayout(
+  resourceType: ResourceType,
+  node: VisibleSpan,
+  root: RootNode,
+  scale: number,
+  scrollSnapshotRef: RefObject<ScrollSnapshot | undefined>
+): SpanLayout {
+  switch (resourceType) {
+    case 'run':
+      return getRunLayout(node, root, scale, scrollSnapshotRef);
+    case 'step':
+      return getStepLayout(node, root, scale, scrollSnapshotRef);
+    case 'hook':
+      return getHookLayout(node, root, scale, scrollSnapshotRef);
+    case 'sleep':
+      return getSleepLayout(node, root, scale, scrollSnapshotRef);
+    default:
+      return computeDefaultLayout(node, root, scale, scrollSnapshotRef);
+  }
+}

package/src/components/trace-viewer/context.tsx

@@ -117,12 +117,6 @@ export interface TraceViewerState {
    * Whether the trace viewer is small enough that it should be in mobile mode
    */
   isMobile: boolean;
-  /**
-   * @deprecated Panel rendering has been moved outside the context.
-   * This field is kept for backwards compatibility but is no longer
-   * used by the workflow trace viewer.
-   */
-  customPanelComponent: ReactNode | null;
   /**
    * A function to provide custom class names for spans.
    */
@@ -216,6 +210,13 @@ export type TraceViewerAction =
     }
   | {
       type: 'forceRender';
+    }
+  | {
+      /** Like setRoot but preserves scroll position and memo cache (for incremental data updates) */
+      type: 'updateRoot';
+      root: RootNode;
+      spanMap: Record<string, SpanNode>;
+      resources: Resource[];
     };
 
 export interface TraceViewerContextProps {
@@ -251,16 +252,10 @@ export const initialState: TraceViewerState = {
   getQuickLinks: () => [],
   withPanel: false,
   isMobile: false,
-  customPanelComponent: null,
 };
 
 const getMinScale = (state: TraceViewerState): number => {
-  return (
-    (state.width -
-      state.scrollbarWidth -
-      Number(Boolean(state.selected && state.withPanel)) * state.panelWidth) /
-    state.root.duration
-  );
+  return (state.timelineWidth - state.scrollbarWidth) / state.root.duration;
 };
 
 export const TraceViewerContext = createContext<TraceViewerContextProps>({
@@ -324,11 +319,20 @@ const reducer: Reducer<TraceViewerState, TraceViewerAction> = (
         240,
         Math.min(action.width, state.width - 240)
       );
-      return {
-        ...state,
-        timelineWidth: state.width - panelWidth,
-        panelWidth,
-      };
+      const timelineWidth =
+        state.withPanel && state.selected && !state.isMobile
+          ? state.width - panelWidth
+          : state.width;
+      return reducer(
+        {
+          ...state,
+          timelineWidth,
+          panelWidth,
+        },
+        {
+          type: 'detectBaseScale',
+        }
+      );
     }
     case 'setFilter':
       return {
@@ -343,7 +347,7 @@ const reducer: Reducer<TraceViewerState, TraceViewerAction> = (
           timelineWidth: state.width,
         },
         {
-          type: 'minScale',
+          type: 'detectBaseScale',
         }
       );
     case 'select': {
@@ -352,13 +356,18 @@ const reducer: Reducer<TraceViewerState, TraceViewerAction> = (
         return state;
       }
 
-      return {
-        ...state,
-        selected: node,
-        timelineWidth:
-          state.width -
-          (state.withPanel && !state.isMobile ? state.panelWidth : 0),
-      };
+      return reducer(
+        {
+          ...state,
+          selected: node,
+          timelineWidth:
+            state.width -
+            (state.withPanel && !state.isMobile ? state.panelWidth : 0),
+        },
+        {
+          type: 'detectBaseScale',
+        }
+      );
     }
     case 'escape': {
       if (state.selected) {
@@ -387,13 +396,18 @@ const reducer: Reducer<TraceViewerState, TraceViewerAction> = (
     }
     case 'detectBaseScale': {
       const baseScale =
-        (state.width - state.scrollbarWidth) / state.root.duration;
+        (state.timelineWidth - state.scrollbarWidth) / state.root.duration;
 
-      return {
-        ...state,
-        baseScale,
-        scale: baseScale * state.scaleRatio,
-      };
+      return reducer(
+        {
+          ...state,
+          baseScale,
+          scale: baseScale * state.scaleRatio,
+        },
+        {
+          type: 'minScale',
+        }
+      );
     }
     case 'setScale':
       return {
@@ -552,16 +566,43 @@ const reducer: Reducer<TraceViewerState, TraceViewerAction> = (
     }
     case 'setWithPanel': {
       if (state.withPanel === action.withPanel) return state;
-      return {
-        ...state,
-        withPanel: action.withPanel,
-      };
+      const timelineWidth =
+        action.withPanel && state.selected && !state.isMobile
+          ? state.width - state.panelWidth
+          : state.width;
+      return reducer(
+        {
+          ...state,
+          withPanel: action.withPanel,
+          timelineWidth,
+        },
+        {
+          type: 'detectBaseScale',
+        }
+      );
     }
     case 'forceRender':
       state.memoCacheRef.current.set('', {});
       return {
         ...state,
       };
+    case 'updateRoot':
+      // Incremental update: preserve scroll snapshot and only invalidate
+      // memo cache for spans whose data may have changed
+      state.memoCacheRef.current.set('', {});
+      return reducer(
+        {
+          ...state,
+          root: action.root,
+          spanMap: action.spanMap,
+          resourceMap: Object.fromEntries(
+            action.resources.map(({ name, attributes }) => [name, attributes])
+          ),
+        },
+        {
+          type: 'detectBaseScale',
+        }
+      );
   }
 };
 
@@ -594,7 +635,6 @@ export function TraceViewerContextProvider({
       scrollSnapshotRef,
       customSpanClassNameFunc,
       customSpanEventClassNameFunc,
-      customPanelComponent,
       memoCacheRef,
       withPanel,
       getQuickLinks: (span) => {
@@ -624,11 +664,23 @@ export function TraceViewerContextProvider({
   );
 
   return (
-    <TraceViewerContext.Provider value={value}>
-      {children}
-    </TraceViewerContext.Provider>
+    <CustomPanelContext.Provider value={customPanelComponent}>
+      <TraceViewerContext.Provider value={value}>
+        {children}
+      </TraceViewerContext.Provider>
+    </CustomPanelContext.Provider>
   );
 }
 
 export const useTraceViewer = (): TraceViewerContextProps =>
   useContext(TraceViewerContext);
+
+/**
+ * Separate context for the custom panel component. This is intentionally
+ * outside the useReducer state so that the panel re-renders reactively
+ * when props like spanDetailData change.
+ */
+const CustomPanelContext = createContext<ReactNode | null>(null);
+
+export const useCustomPanelComponent = (): ReactNode | null =>
+  useContext(CustomPanelContext);

package/src/components/trace-viewer/trace-viewer.module.css

@@ -63,7 +63,7 @@
     top: -7px;
   }
 
-  &:hover:not(.selected) {
+  &:hover:not([data-selected]) {
     filter: brightness(0.95);
   }
 
@@ -103,7 +103,7 @@
     border-radius: 4px;
   }
 
-  &.selected {
+  &[data-selected] {
     border-width: 2px;
     outline: 2px solid var(--span-border);
     outline-offset: -1px;
@@ -112,6 +112,7 @@
       filter: brightness(0.95);
     }
   }
+
 }
 
 .spanNodeEvent {
@@ -271,11 +272,11 @@
     }
   }
 
-  & .spanNode:hover:not(.selected) {
+  & .spanNode:hover:not([data-selected]) {
     filter: brightness(1.05);
   }
 
-  & .spanNode.selected:hover {
+  & .spanNode[data-selected]:hover {
     filter: brightness(1.05);
   }
 }
@@ -295,11 +296,11 @@
       }
     }
 
-    & .spanNode:hover:not(.selected) {
+    & .spanNode:hover:not([data-selected]) {
       filter: brightness(1.05);
     }
 
-    & .spanNode.selected:hover {
+    & .spanNode[data-selected]:hover {
       filter: brightness(1.05);
     }
   }
@@ -311,6 +312,8 @@
   text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
+  position: relative;
+  z-index: 1;
 }
 
 .spanDuration {
@@ -318,6 +321,8 @@
   padding-right: 6px;
   font-variant-numeric: tabular-nums;
   color: var(--span-secondary, var(--ds-gray-alpha-700));
+  position: relative;
+  z-index: 1;
 }
 
 /* SPAN DETAIL PANEL */
@@ -796,6 +801,16 @@
   bottom: 6px;
   color: var(--ds-gray-900);
   user-select: none;
+  white-space: nowrap;
+}
+
+.markerClockTime {
+  display: block;
+  font-size: 9px;
+  color: var(--ds-gray-alpha-500);
+  margin-top: 1px;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
 }
 
 .eventMarkersContainer {
@@ -1253,6 +1268,164 @@
   --span-secondary: var(--ds-gray-900);
 }
 
+/* ──────────────────────────────────────────────────────────────────────── */
+/* Span segments — colored sections overlaid inside span bars              */
+/* ──────────────────────────────────────────────────────────────────────── */
+
+.segmentLayer {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.segment {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+.segmentLabel {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 4px;
+  font-size: 9px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--ds-gray-900);
+  opacity: 0.7;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Inline segment tags rendered next to the span name */
+.segmentTag {
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.6;
+  white-space: nowrap;
+}
+
+/* Queued: hatched — waiting to start */
+.segQueued {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--ds-gray-alpha-200),
+    var(--ds-gray-alpha-200) 6px,
+    var(--ds-gray-alpha-100) 6px,
+    var(--ds-gray-alpha-100) 12px
+  );
+}
+
+/* Running: soft blue — actively executing */
+.segRunning {
+  background-color: var(--ds-blue-200);
+}
+
+/* Failed: soft red — attempt ended in failure */
+.segFailed {
+  background-color: var(--ds-red-200);
+}
+
+/* Retrying: hatched — waiting between retry attempts */
+.segRetrying {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--ds-gray-alpha-200),
+    var(--ds-gray-alpha-200) 6px,
+    var(--ds-gray-alpha-100) 6px,
+    var(--ds-gray-alpha-100) 12px
+  );
+}
+
+/* Succeeded: soft green — final successful attempt */
+.segSucceeded {
+  background-color: var(--ds-green-200);
+}
+
+/* Waiting: hatched — hook waiting for payload */
+.segWaiting {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--ds-gray-alpha-200),
+    var(--ds-gray-alpha-200) 6px,
+    var(--ds-gray-alpha-100) 6px,
+    var(--ds-gray-alpha-100) 12px
+  );
+}
+
+/* Sleeping: soft amber — sleep in progress */
+.segSleeping {
+  background-color: var(--ds-amber-200);
+}
+
+/* Received: soft blue — hook received payload */
+.segReceived {
+  background-color: var(--ds-blue-200);
+}
+
+/* Boundary markers — workflow events shown as thin vertical lines instead of diamonds */
+.boundaryMarker {
+  & .boundaryLine {
+    position: absolute;
+    left: -0.5px;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: transparent;
+    z-index: 0;
+    transition: background-color 0.15s ease;
+  }
+
+  &[data-hovered="true"] .boundaryLine {
+    background-color: var(--ds-gray-alpha-400);
+  }
+
+  /* Tooltip must sit above the boundary line */
+  & .hoverInfo {
+    z-index: 1;
+  }
+}
+
+/* When segments are active, make span background transparent so segments show */
+.spanNode.hasSegments {
+  background-color: transparent;
+
+  &.small:not(.xHover) {
+    background-color: transparent;
+  }
+
+  /* Suppress hover expansion gradient — segments handle the background */
+  &.xHover {
+    background: none;
+    min-width: var(--span-width);
+    max-width: var(--span-width);
+
+    &[data-right-side="true"] {
+      background: none;
+    }
+  }
+
+  /* Remove duration label background bleed — segments provide the visual */
+  & .spanDuration {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  /* Let segment tooltips receive pointer events */
+  &::after {
+    pointer-events: none;
+  }
+
+  & .segmentLayer {
+    pointer-events: auto;
+  }
+}
+
 /* Event markers */
 
 /* Failure events - Red */