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

package/src/components/trace-viewer/components/event-list.tsx

@@ -0,0 +1,144 @@
+import { Circle } from 'lucide-react';
+import { useRef } from 'react';
+import { cn } from '../../../lib/cn';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
+import {
+  SleepIcon,
+  StepForwardIcon,
+  WebhookIcon,
+  WorkflowIcon,
+} from '../icons';
+import { isSpanDimmedBySearch, type SpanSearchResult } from '../search';
+import type { Span } from '../types';
+import { formatDurationPrecise } from '../util/timing';
+import { getSpanDurationMs, isSpanErrored } from '../utils';
+import { MiddleTruncate } from './middle-truncate/middle-truncate';
+import { ROW_HEIGHT_PX, useRowWindow } from './use-row-window';
+
+interface EventStyle {
+  icon: React.ComponentType<{ className?: string }>;
+  className: string;
+  label: string;
+}
+
+const eventStyles: Record<string, EventStyle> = {
+  run: { icon: WorkflowIcon, className: 'text-blue-900', label: 'Workflow' },
+  step: { icon: StepForwardIcon, className: 'text-green-900', label: 'Step' },
+  hook: { icon: WebhookIcon, className: 'text-gray-900', label: 'Hook' },
+  sleep: { icon: SleepIcon, className: 'text-gray-900', label: 'Sleep' },
+};
+
+const defaultStyle: EventStyle = {
+  icon: Circle,
+  className: 'text-gray-900',
+  label: 'Event',
+};
+
+const ROW_HEIGHT_CLASS = 'h-10';
+
+function getEventStyle(resource: string, isErrored: boolean): EventStyle {
+  const style = eventStyles[resource] ?? defaultStyle;
+  return {
+    icon: style.icon,
+    className: cn(isErrored ? 'text-red-900' : style.className),
+    label: style.label,
+  };
+}
+
+const EventRow = ({
+  span,
+  isSelected,
+  isDimmed,
+  onSelectSpan,
+}: {
+  span: Span;
+  isSelected: boolean;
+  isDimmed?: boolean;
+  onSelectSpan: (spanId: string) => void;
+}) => {
+  const durationMs = getSpanDurationMs(span);
+  const isErrored = isSpanErrored(span);
+  const {
+    icon: Icon,
+    className: tagClassName,
+    label: iconLabel,
+  } = getEventStyle(span.resource, isErrored);
+
+  return (
+    <li
+      className={cn(
+        'relative overflow-clip group transition-opacity',
+        ROW_HEIGHT_CLASS,
+        isDimmed && 'opacity-35'
+      )}
+      role="treeitem"
+      aria-selected={isSelected}
+      aria-expanded={isSelected}
+      aria-level={1}
+      onClick={() => onSelectSpan(span.spanId)}
+    >
+      <div className="h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200">
+        <div className="flex h-full min-w-0 items-center pl-4 pr-2">
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            <Tooltip delayDuration={500}>
+              <TooltipTrigger asChild>
+                <span className={cn('shrink-0', tagClassName)}>
+                  <Icon className="w-4 h-4" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="top">{iconLabel}</TooltipContent>
+            </Tooltip>
+            <span className="min-w-0 text-label-14">
+              <MiddleTruncate value={span.name} />
+            </span>
+          </div>
+          <div className="ml-2 shrink-0">
+            <span className="text-label-14 text-gray-900 tabular-nums">
+              {formatDurationPrecise(durationMs)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+const EventList = ({
+  spans,
+  activeSpanId,
+  searchResult,
+  onSelectSpan,
+}: {
+  spans: Span[];
+  activeSpanId: string | null;
+  searchResult: SpanSearchResult;
+  onSelectSpan: (spanId: string) => void;
+}) => {
+  const listRef = useRef<HTMLUListElement>(null);
+  const { start, end } = useRowWindow(listRef, spans.length, ROW_HEIGHT_PX);
+
+  return (
+    <ul
+      ref={listRef}
+      id="event-list"
+      role="tree"
+      className="block min-h-0 overflow-visible divide-y divide-gray-400 border-b border-gray-400"
+      style={{
+        paddingTop: start * ROW_HEIGHT_PX,
+        paddingBottom: (spans.length - end) * ROW_HEIGHT_PX,
+      }}
+    >
+      {spans.slice(start, end).map((span) => (
+        <EventRow
+          key={span.spanId}
+          span={span}
+          isSelected={span.spanId === activeSpanId}
+          isDimmed={isSpanDimmedBySearch(span.spanId, searchResult)}
+          onSelectSpan={onSelectSpan}
+        />
+      ))}
+    </ul>
+  );
+};
+
+export default EventList;

package/src/components/{new-trace-viewer → trace-viewer}/components/middle-truncate/middle-truncate.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { useCallback, useRef } from 'react';
 import type { ClipboardEvent, ComponentPropsWithoutRef, JSX } from 'react';
-import { cn } from '../../../../lib/utils';
+import { useCallback, useRef } from 'react';
+import { cn } from '../../../../lib/cn';
 import {
   getMiddleTruncateCopyText,
   getMiddleTruncateCopyTextFromSelectionText,
@@ -122,16 +122,16 @@ function MiddleTruncate({
       )}
       onCopy={handleCopy}
     >
-      {isTruncated && <span className='sr-only select-none'>{value}</span>}
+      {isTruncated && <span className="sr-only select-none">{value}</span>}
       <span
-        aria-hidden='true'
-        className='pointer-events-none col-start-1 row-start-1 invisible select-none whitespace-nowrap'
+        aria-hidden="true"
+        className="pointer-events-none col-start-1 row-start-1 invisible select-none whitespace-nowrap"
       >
         {value}
       </span>
       <span
         aria-hidden={isTruncated || undefined}
-        className='col-start-1 row-start-1 min-w-0 overflow-hidden'
+        className="col-start-1 row-start-1 min-w-0 overflow-hidden"
         ref={visibleRef}
       >
         {isTruncated ? (
@@ -145,8 +145,8 @@ function MiddleTruncate({
         )}
       </span>
       <span
-        aria-hidden='true'
-        className='pointer-events-none absolute left-0 top-0 inline-block invisible select-none whitespace-nowrap'
+        aria-hidden="true"
+        className="pointer-events-none absolute left-0 top-0 inline-block invisible select-none whitespace-nowrap"
         ref={measureRef}
       />
     </span>

package/src/components/{new-trace-viewer → trace-viewer}/components/middle-truncate/truncate.ts

@@ -1,4 +1,4 @@
-const ELLIPSIS = '...';
+const ELLIPSIS = '…';
 const MIN_START = 3;
 const MIN_END = 3;
 const MIN_KEPT = MIN_START + MIN_END;