@kopai/ui 0.8.0 → 0.9.0

package/src/components/observability/TraceTimeline/FlamegraphView.tsx

@@ -0,0 +1,232 @@
+import { useMemo, useState, useCallback } from "react";
+import type { ParsedTrace, SpanNode } from "../types.js";
+import { getServiceColor } from "../utils/colors.js";
+import { formatDuration } from "../utils/time.js";
+import { flattenAllSpans } from "../utils/flatten-tree.js";
+
+interface FlamegraphViewProps {
+  trace: ParsedTrace;
+  onSpanClick?: (span: SpanNode) => void;
+  selectedSpanId?: string;
+}
+
+const ROW_HEIGHT = 24;
+const MIN_WIDTH = 1;
+const LABEL_MIN_WIDTH = 40;
+
+function findSpanById(rootSpans: SpanNode[], spanId: string): SpanNode | null {
+  for (const root of rootSpans) {
+    if (root.spanId === spanId) return root;
+    const found = findSpanById(root.children, spanId);
+    if (found) return found;
+  }
+  return null;
+}
+
+function getAncestorPath(rootSpans: SpanNode[], targetId: string): SpanNode[] {
+  const path: SpanNode[] = [];
+  function walk(span: SpanNode, ancestors: SpanNode[]): boolean {
+    if (span.spanId === targetId) {
+      path.push(...ancestors, span);
+      return true;
+    }
+    for (const child of span.children) {
+      if (walk(child, [...ancestors, span])) return true;
+    }
+    return false;
+  }
+  for (const root of rootSpans) {
+    if (walk(root, [])) break;
+  }
+  return path;
+}
+
+export function FlamegraphView({
+  trace,
+  onSpanClick,
+  selectedSpanId,
+}: FlamegraphViewProps) {
+  const [zoomSpanId, setZoomSpanId] = useState<string | null>(null);
+  const [tooltip, setTooltip] = useState<{
+    span: SpanNode;
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const zoomRoot = useMemo(() => {
+    if (!zoomSpanId) return null;
+    return findSpanById(trace.rootSpans, zoomSpanId);
+  }, [trace.rootSpans, zoomSpanId]);
+
+  const breadcrumbs = useMemo(() => {
+    if (!zoomSpanId) return [];
+    return getAncestorPath(trace.rootSpans, zoomSpanId);
+  }, [trace.rootSpans, zoomSpanId]);
+
+  const viewRoots = zoomRoot ? [zoomRoot] : trace.rootSpans;
+  const viewMinTime = zoomRoot ? zoomRoot.startTimeUnixMs : trace.minTimeMs;
+  const viewMaxTime = zoomRoot ? zoomRoot.endTimeUnixMs : trace.maxTimeMs;
+  const viewDuration = viewMaxTime - viewMinTime;
+
+  const flatSpans = useMemo(
+    () =>
+      flattenAllSpans(viewRoots).map((fs) => ({
+        span: fs.span,
+        depth: fs.level,
+      })),
+    [viewRoots]
+  );
+
+  const maxDepth = useMemo(
+    () => flatSpans.reduce((max, fs) => Math.max(max, fs.depth), 0) + 1,
+    [flatSpans]
+  );
+
+  const svgWidth = 1200;
+  const svgHeight = maxDepth * ROW_HEIGHT;
+
+  const handleClick = useCallback(
+    (span: SpanNode) => {
+      onSpanClick?.(span);
+      setZoomSpanId(span.spanId);
+    },
+    [onSpanClick]
+  );
+
+  const handleZoomOut = useCallback((spanId: string | null) => {
+    setZoomSpanId(spanId);
+  }, []);
+
+  return (
+    <div className="flex-1 overflow-auto p-2">
+      {/* Breadcrumb bar */}
+      {breadcrumbs.length > 0 && (
+        <div className="flex items-center gap-1 text-xs text-muted-foreground mb-2 flex-wrap">
+          <button
+            className="hover:text-foreground underline"
+            onClick={() => handleZoomOut(null)}
+          >
+            root
+          </button>
+          {breadcrumbs.map((bc, i) => (
+            <span key={bc.spanId} className="flex items-center gap-1">
+              <span className="text-muted-foreground/50">&gt;</span>
+              {i < breadcrumbs.length - 1 ? (
+                <button
+                  className="hover:text-foreground underline"
+                  onClick={() => handleZoomOut(bc.spanId)}
+                >
+                  {bc.serviceName}: {bc.name}
+                </button>
+              ) : (
+                <span className="text-foreground">
+                  {bc.serviceName}: {bc.name}
+                </span>
+              )}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* SVG flamegraph */}
+      <div className="overflow-x-auto">
+        <svg
+          width={svgWidth}
+          height={svgHeight}
+          className="block"
+          onMouseLeave={() => setTooltip(null)}
+        >
+          {flatSpans.map(({ span, depth }) => {
+            const x =
+              viewDuration > 0
+                ? ((span.startTimeUnixMs - viewMinTime) / viewDuration) *
+                  svgWidth
+                : 0;
+            const w =
+              viewDuration > 0
+                ? Math.max(
+                    MIN_WIDTH,
+                    (span.durationMs / viewDuration) * svgWidth
+                  )
+                : svgWidth;
+            const y = depth * ROW_HEIGHT;
+            const color = getServiceColor(span.serviceName);
+            const isSelected = span.spanId === selectedSpanId;
+            const showLabel = w >= LABEL_MIN_WIDTH;
+            const label = `${span.serviceName}: ${span.name}`;
+
+            return (
+              <g
+                key={span.spanId}
+                className="cursor-pointer"
+                onClick={() => handleClick(span)}
+                onMouseEnter={(e) =>
+                  setTooltip({
+                    span,
+                    x: e.clientX,
+                    y: e.clientY,
+                  })
+                }
+                onMouseMove={(e) =>
+                  setTooltip((prev) =>
+                    prev ? { ...prev, x: e.clientX, y: e.clientY } : null
+                  )
+                }
+                onMouseLeave={() => setTooltip(null)}
+              >
+                <rect
+                  x={x}
+                  y={y}
+                  width={w}
+                  height={ROW_HEIGHT - 1}
+                  fill={color}
+                  opacity={0.85}
+                  rx={2}
+                  stroke={isSelected ? "#ffffff" : "transparent"}
+                  strokeWidth={isSelected ? 2 : 0}
+                  className="hover:opacity-100"
+                />
+                {showLabel && (
+                  <text
+                    x={x + 4}
+                    y={y + ROW_HEIGHT / 2 + 1}
+                    dominantBaseline="middle"
+                    fill="#ffffff"
+                    fontSize={11}
+                    fontFamily="monospace"
+                    clipPath={`inset(0 0 0 0)`}
+                  >
+                    <tspan>
+                      {label.length > w / 7
+                        ? label.slice(0, Math.floor(w / 7) - 1) + "\u2026"
+                        : label}
+                    </tspan>
+                  </text>
+                )}
+              </g>
+            );
+          })}
+        </svg>
+      </div>
+
+      {/* Tooltip */}
+      {tooltip && (
+        <div
+          className="fixed z-50 pointer-events-none bg-popover border border-border rounded px-3 py-2 text-xs shadow-lg"
+          style={{
+            left: tooltip.x + 12,
+            top: tooltip.y + 12,
+          }}
+        >
+          <div className="font-medium text-foreground">{tooltip.span.name}</div>
+          <div className="text-muted-foreground">
+            {tooltip.span.serviceName}
+          </div>
+          <div className="text-foreground mt-1">
+            {formatDuration(tooltip.span.durationMs)}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/observability/TraceTimeline/GraphView.tsx

@@ -0,0 +1,322 @@
+/**
+ * GraphView - SVG-based DAG showing service dependencies within a trace.
+ */
+
+import { useMemo } from "react";
+import type { ParsedTrace, SpanNode } from "../types.js";
+import { getServiceColor } from "../utils/colors.js";
+
+export interface GraphViewProps {
+  trace: ParsedTrace;
+}
+
+// ── DAG types ──
+
+interface ServiceNode {
+  name: string;
+  spanCount: number;
+  errorCount: number;
+  layer: number;
+  x: number;
+  y: number;
+}
+
+interface ServiceEdge {
+  from: string;
+  to: string;
+  callCount: number;
+  totalDurationMs: number;
+}
+
+// ── DAG construction ──
+
+function buildDAG(trace: ParsedTrace) {
+  const nodeMap = new Map<string, { spanCount: number; errorCount: number }>();
+  const edgeMap = new Map<
+    string,
+    { callCount: number; totalDurationMs: number }
+  >();
+  const childServices = new Map<string, Set<string>>();
+
+  function walk(span: SpanNode, parentService?: string) {
+    const svc = span.serviceName;
+
+    const existing = nodeMap.get(svc);
+    if (existing) {
+      existing.spanCount++;
+      if (span.status === "ERROR") existing.errorCount++;
+    } else {
+      nodeMap.set(svc, {
+        spanCount: 1,
+        errorCount: span.status === "ERROR" ? 1 : 0,
+      });
+    }
+
+    if (parentService && parentService !== svc) {
+      const key = `${parentService}→${svc}`;
+      const edge = edgeMap.get(key);
+      if (edge) {
+        edge.callCount++;
+        edge.totalDurationMs += span.durationMs;
+      } else {
+        edgeMap.set(key, { callCount: 1, totalDurationMs: span.durationMs });
+      }
+      if (!childServices.has(parentService))
+        childServices.set(parentService, new Set());
+      const parentChildren = childServices.get(parentService);
+      if (parentChildren) parentChildren.add(svc);
+    }
+
+    for (const child of span.children) {
+      walk(child, svc);
+    }
+  }
+
+  for (const root of trace.rootSpans) {
+    walk(root);
+  }
+
+  const edges: ServiceEdge[] = [];
+  for (const [key, meta] of edgeMap) {
+    const [from, to] = key.split("→");
+    if (from && to) edges.push({ from, to, ...meta });
+  }
+
+  return { nodeMap, edges, childServices };
+}
+
+// ── Layout ──
+
+const NODE_W = 160;
+const NODE_H = 60;
+const LAYER_GAP_Y = 100;
+const NODE_GAP_X = 40;
+
+function layoutNodes(
+  nodeMap: Map<string, { spanCount: number; errorCount: number }>,
+  edges: ServiceEdge[]
+): ServiceNode[] {
+  // Build adjacency for BFS
+  const children = new Map<string, Set<string>>();
+  const hasParent = new Set<string>();
+  for (const e of edges) {
+    if (!children.has(e.from)) children.set(e.from, new Set());
+    const fromChildren = children.get(e.from);
+    if (fromChildren) fromChildren.add(e.to);
+    hasParent.add(e.to);
+  }
+
+  // Root services = no incoming edges
+  const roots = [...nodeMap.keys()].filter((s) => !hasParent.has(s));
+  if (roots.length === 0 && nodeMap.size > 0) {
+    const firstKey = nodeMap.keys().next().value;
+    if (firstKey !== undefined) roots.push(firstKey);
+  }
+
+  // BFS to assign layers (with cycle protection)
+  const layerOf = new Map<string, number>();
+  const enqueueCount = new Map<string, number>();
+  const maxEnqueue = nodeMap.size * 2;
+  const queue: string[] = [];
+  for (const r of roots) {
+    layerOf.set(r, 0);
+    queue.push(r);
+  }
+  while (queue.length > 0) {
+    const cur = queue.shift();
+    if (!cur) continue;
+    const curLayer = layerOf.get(cur);
+    if (curLayer === undefined) continue;
+    const kids = children.get(cur);
+    if (!kids) continue;
+    for (const kid of kids) {
+      const prev = layerOf.get(kid);
+      const count = enqueueCount.get(kid) ?? 0;
+      if (prev === undefined && count < maxEnqueue) {
+        layerOf.set(kid, curLayer + 1);
+        enqueueCount.set(kid, count + 1);
+        queue.push(kid);
+      }
+    }
+  }
+
+  // Any unvisited nodes get layer 0
+  for (const name of nodeMap.keys()) {
+    if (!layerOf.has(name)) layerOf.set(name, 0);
+  }
+
+  // Group by layer
+  const layers = new Map<number, string[]>();
+  for (const [name, layer] of layerOf) {
+    if (!layers.has(layer)) layers.set(layer, []);
+    const layerNames = layers.get(layer);
+    if (layerNames) layerNames.push(name);
+  }
+
+  // Position
+  const nodes: ServiceNode[] = [];
+  const maxLayerWidth = Math.max(
+    ...Array.from(layers.values()).map((l) => l.length),
+    1
+  );
+  const totalWidth = maxLayerWidth * (NODE_W + NODE_GAP_X) - NODE_GAP_X;
+
+  for (const [layer, names] of layers) {
+    const layerWidth = names.length * (NODE_W + NODE_GAP_X) - NODE_GAP_X;
+    const offsetX = (totalWidth - layerWidth) / 2;
+    names.forEach((name, i) => {
+      const meta = nodeMap.get(name);
+      if (!meta) return;
+      nodes.push({
+        name,
+        spanCount: meta.spanCount,
+        errorCount: meta.errorCount,
+        layer,
+        x: offsetX + i * (NODE_W + NODE_GAP_X),
+        y: layer * (NODE_H + LAYER_GAP_Y),
+      });
+    });
+  }
+
+  return nodes;
+}
+
+// ── Component ──
+
+export function GraphView({ trace }: GraphViewProps) {
+  const { nodes, edges, svgWidth, svgHeight } = useMemo(() => {
+    const { nodeMap, edges } = buildDAG(trace);
+    const nodes = layoutNodes(nodeMap, edges);
+
+    const maxX = Math.max(...nodes.map((n) => n.x + NODE_W), NODE_W);
+    const maxY = Math.max(...nodes.map((n) => n.y + NODE_H), NODE_H);
+    const padding = 40;
+
+    return {
+      nodes,
+      edges,
+      svgWidth: maxX + padding * 2,
+      svgHeight: maxY + padding * 2,
+    };
+  }, [trace]);
+
+  const nodeByName = useMemo(() => {
+    const m = new Map<string, ServiceNode>();
+    for (const n of nodes) m.set(n.name, n);
+    return m;
+  }, [nodes]);
+
+  const padding = 40;
+
+  return (
+    <div className="flex-1 overflow-auto bg-background p-4 flex justify-center">
+      <svg
+        viewBox={`0 0 ${svgWidth} ${svgHeight}`}
+        width={svgWidth}
+        height={svgHeight}
+        role="img"
+        aria-label="Service dependency graph"
+      >
+        <defs>
+          <marker
+            id="arrowhead"
+            markerWidth="10"
+            markerHeight="7"
+            refX="9"
+            refY="3.5"
+            orient="auto"
+          >
+            <polygon points="0 0, 10 3.5, 0 7" fill="#94a3b8" />
+          </marker>
+        </defs>
+
+        {/* Edges */}
+        {edges.map((edge) => {
+          const from = nodeByName.get(edge.from);
+          const to = nodeByName.get(edge.to);
+          if (!from || !to) return null;
+
+          const x1 = padding + from.x + NODE_W / 2;
+          const y1 = padding + from.y + NODE_H;
+          const x2 = padding + to.x + NODE_W / 2;
+          const y2 = padding + to.y;
+
+          const midY = (y1 + y2) / 2;
+
+          const d = `M ${x1} ${y1} C ${x1} ${midY}, ${x2} ${midY}, ${x2} ${y2}`;
+
+          return (
+            <g key={`${edge.from}→${edge.to}`}>
+              <path
+                d={d}
+                fill="none"
+                stroke="#475569"
+                strokeWidth={1.5}
+                markerEnd="url(#arrowhead)"
+              />
+              {edge.callCount > 1 && (
+                <text
+                  x={(x1 + x2) / 2}
+                  y={midY - 6}
+                  textAnchor="middle"
+                  fontSize={11}
+                  fill="#94a3b8"
+                >
+                  {edge.callCount}x
+                </text>
+              )}
+            </g>
+          );
+        })}
+
+        {/* Nodes */}
+        {nodes.map((node) => {
+          const color = getServiceColor(node.name);
+          const hasError = node.errorCount > 0;
+          const textColor = "#f8fafc";
+          const nx = padding + node.x;
+          const ny = padding + node.y;
+
+          return (
+            <g key={node.name}>
+              <rect
+                x={nx}
+                y={ny}
+                width={NODE_W}
+                height={NODE_H}
+                rx={8}
+                ry={8}
+                fill={color}
+                stroke={hasError ? "#ef4444" : "none"}
+                strokeWidth={hasError ? 2 : 0}
+              />
+              <text
+                x={nx + NODE_W / 2}
+                y={ny + 24}
+                textAnchor="middle"
+                fontSize={13}
+                fontWeight={600}
+                fill={textColor}
+              >
+                {node.name.length > 18
+                  ? node.name.slice(0, 16) + "..."
+                  : node.name}
+              </text>
+              <text
+                x={nx + NODE_W / 2}
+                y={ny + 44}
+                textAnchor="middle"
+                fontSize={11}
+                fill={textColor}
+                opacity={0.85}
+              >
+                {node.spanCount} span{node.spanCount !== 1 ? "s" : ""}
+                {node.errorCount > 0 && ` · ${node.errorCount} err`}
+              </text>
+            </g>
+          );
+        })}
+      </svg>
+    </div>
+  );
+}