@ddd-ts/event-tree-viewer 0.0.0-eventviz.10

package/src/components/views/list-view.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useMemo, useRef } from "react"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Button } from "@/components/ui/button"
+import { NodeBadge } from "@/components/node-badge"
+import { NODE_KINDS, type Node, type NodeKind } from "@/domain/node"
+import { nodeId, type NodeId } from "@/domain/graph"
+
+interface ListViewProps {
+  nodes: Node[]
+  selectedId: NodeId | null
+  onSelect: (id: NodeId) => void
+}
+
+export function ListView({ nodes, selectedId, onSelect }: ListViewProps) {
+  const grouped = useMemo(() => groupByKind(nodes), [nodes])
+  const rootRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!selectedId) return
+    const root = rootRef.current
+    if (!root) return
+    const el = root.querySelector<HTMLElement>(
+      `[data-node-id="${cssEscape(selectedId)}"]`
+    )
+    el?.scrollIntoView({ block: "center", behavior: "auto" })
+  }, [selectedId, nodes])
+
+  return (
+    <ScrollArea ref={rootRef} className="h-full">
+      <div className="flex flex-col gap-4 px-6 py-4">
+        {NODE_KINDS.map((kind) => {
+          const items = grouped.get(kind) ?? []
+          if (!items.length) return null
+          return (
+            <section key={kind} className="flex flex-col gap-2">
+              <h2 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
+                {kind} ({items.length})
+              </h2>
+              <ul className="flex flex-col gap-1">
+                {items.map((node) => (
+                  <NodeRow
+                    key={`${node.type}:${node.name}`}
+                    node={node}
+                    selected={selectedId === nodeId(node.type, node.name)}
+                    onSelect={onSelect}
+                  />
+                ))}
+              </ul>
+            </section>
+          )
+        })}
+        {!nodes.length && (
+          <p className="text-sm text-muted-foreground">No matching nodes.</p>
+        )}
+      </div>
+    </ScrollArea>
+  )
+}
+
+function NodeRow({
+  node,
+  selected,
+  onSelect,
+}: {
+  node: Node
+  selected: boolean
+  onSelect: (id: NodeId) => void
+}) {
+  const id = nodeId(node.type, node.name)
+  return (
+    <li>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => onSelect(id)}
+        aria-pressed={selected}
+        data-node-id={id}
+        className={`h-auto w-full justify-start gap-3 px-3 py-2 text-sm font-normal ${
+          selected ? "bg-muted" : ""
+        }`}
+      >
+        <NodeBadge kind={node.type} />
+        <span className="font-medium">{node.name}</span>
+        {"meta" in node &&
+          "alias" in node.meta &&
+          node.meta.alias !== node.name && (
+            <span className="font-mono text-xs text-muted-foreground">
+              {node.meta.alias}
+            </span>
+          )}
+      </Button>
+    </li>
+  )
+}
+
+function cssEscape(value: string): string {
+  return typeof CSS !== "undefined" && CSS.escape
+    ? CSS.escape(value)
+    : value.replace(/(["\\])/g, "\\$1")
+}
+
+function groupByKind(nodes: Node[]): Map<NodeKind, Node[]> {
+  const out = new Map<NodeKind, Node[]>()
+  for (const node of nodes) {
+    const list = out.get(node.type) ?? []
+    list.push(node)
+    out.set(node.type, list)
+  }
+  return out
+}

package/src/components/views/tree-view.tsx

@@ -0,0 +1,485 @@
+import { memo, useCallback, useEffect, useMemo, useState } from "react"
+import { CaretRightIcon } from "@phosphor-icons/react"
+import {
+  defaultRangeExtractor,
+  useVirtualizer,
+  type Range,
+} from "@tanstack/react-virtual"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Button } from "@/components/ui/button"
+import { NodeBadge } from "@/components/node-badge"
+import { DomainHeader } from "@/components/domain-header"
+import { NodeName } from "@/components/node-name"
+import { type GraphIndex, type NodeId } from "@/domain/graph"
+import type { Node } from "@/domain/node"
+import { edgeKind, verbFor, type Edge } from "@/domain/edge"
+import { effectiveRoots } from "@/domain/roots"
+import type { Direction } from "@/domain/direction"
+import { groupByDomain } from "@/domain/domain-grouping"
+import { flattenTree, type FlatRow } from "@/domain/flatten-tree"
+import { type ExpansionApi } from "@/application/use-expansion"
+import { useReveal, type RevealApi } from "@/application/use-reveal"
+import type { DomainMap } from "@/application/use-domains"
+import type { FontSize, Settings } from "@/application/use-settings"
+
+const INDENT = 31
+const HEADER_Z = 40
+const ROW_Z_BASE = 30
+const STICKY_BOTTOM_CLASSES =
+  "after:bg-border after:pointer-events-none after:absolute after:bottom-[-1px] after:left-[-9999px] after:right-[-9999px] after:h-px after:content-['']"
+
+const ROW_HEIGHT_BY_FONT: Record<FontSize, number> = {
+  sm: 30,
+  md: 36,
+  lg: 44,
+}
+
+const ROW_TEXT_BY_FONT: Record<
+  FontSize,
+  { main: string; meta: string; padY: string }
+> = {
+  sm: { main: "text-xs", meta: "text-[10px]", padY: "py-1" },
+  md: { main: "text-sm", meta: "text-xs", padY: "py-1.5" },
+  lg: { main: "text-base", meta: "text-sm", padY: "py-2" },
+}
+
+interface TreeViewProps {
+  index: GraphIndex
+  visibleNodes: Node[]
+  domains: DomainMap
+  direction: Direction
+  settings: Settings
+  expansion: ExpansionApi
+  selectedId: NodeId | null
+  onSelect: (id: NodeId) => void
+}
+
+export function TreeView(props: TreeViewProps) {
+  const reveal = useReveal()
+  const rowHeight = ROW_HEIGHT_BY_FONT[props.settings.fontSize]
+  const [scrollRoot, setScrollRoot] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <ScrollArea ref={setScrollRoot} className="h-full">
+      <TreeViewBody
+        key={rowHeight}
+        {...props}
+        reveal={reveal}
+        rowHeight={rowHeight}
+        scrollRoot={scrollRoot}
+      />
+    </ScrollArea>
+  )
+}
+
+interface TreeViewBodyProps extends TreeViewProps {
+  reveal: RevealApi
+  rowHeight: number
+  scrollRoot: HTMLDivElement | null
+}
+
+function TreeViewBody({
+  index,
+  visibleNodes,
+  domains,
+  direction,
+  settings,
+  expansion,
+  selectedId,
+  onSelect,
+  reveal,
+  rowHeight,
+  scrollRoot,
+}: TreeViewBodyProps) {
+  const visibleIds = useMemo(
+    () => new Set(visibleNodes.map((n) => `${n.type}:${n.name}` as NodeId)),
+    [visibleNodes]
+  )
+
+  const groups = useMemo(() => {
+    const visibleRoots = effectiveRoots(index, direction).filter((id) =>
+      visibleIds.has(id)
+    )
+    return groupByDomain(visibleRoots, domains)
+  }, [index, direction, visibleIds, domains])
+
+  const rows = useMemo(
+    () =>
+      flattenTree({
+        index,
+        groups,
+        direction,
+        visibleIds,
+        isExpanded: expansion.isExpanded,
+        isRevealed: reveal.isRevealed,
+        headerHeight: rowHeight,
+        rowHeight,
+      }),
+    [index, groups, direction, visibleIds, expansion, reveal, rowHeight]
+  )
+
+  const rangeExtractor = useCallback(
+    (range: Range) => {
+      const first = rows[range.startIndex]
+      const ancestors = first?.ancestors ?? []
+      const set = new Set<number>([
+        ...ancestors,
+        ...defaultRangeExtractor(range),
+      ])
+      return [...set].sort((a, b) => a - b)
+    },
+    [rows]
+  )
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () =>
+      scrollRoot?.querySelector<HTMLElement>(
+        '[data-slot="scroll-area-viewport"]'
+      ) ?? scrollRoot,
+    estimateSize: () => rowHeight,
+    overscan: 20,
+    rangeExtractor,
+  })
+
+  useEffect(() => {
+    if (!selectedId) return
+    const index = rows.findIndex(
+      (r) => r.kind === "trace-row" && r.trace.id === selectedId
+    )
+    if (index < 0) {
+      const domain = domains.get(selectedId)
+      if (!domain) return
+      const sectionPath = `domain:${domain.key}`
+      if (!expansion.isExpanded(sectionPath)) {
+        expansion.toggle(sectionPath)
+      }
+      return
+    }
+    const raf = requestAnimationFrame(() => {
+      const vp = scrollRoot?.querySelector<HTMLElement>(
+        '[data-slot="scroll-area-viewport"]'
+      )
+      if (!vp) {
+        virtualizer.scrollToIndex(index, { align: "center" })
+        return
+      }
+      const targetTop = Math.max(
+        0,
+        index * rowHeight - vp.clientHeight / 2 + rowHeight / 2
+      )
+      vp.scrollTop = targetTop
+    })
+    return () => cancelAnimationFrame(raf)
+  }, [
+    selectedId,
+    rows,
+    virtualizer,
+    domains,
+    expansion,
+    rowHeight,
+    scrollRoot,
+  ])
+
+  const scrollOffset = virtualizer.scrollOffset ?? 0
+  const virtualItems = virtualizer.getVirtualItems()
+  let pinnedBottomPath: string | null = null
+  let deepestStickyTop = -1
+  for (const item of virtualItems) {
+    const row = rows[item.index]
+    if (!row.stickable) continue
+    const enter = item.start - row.stickyTop
+    const exit = item.start + row.subtreeSize * rowHeight - row.stickyTop
+    if (scrollOffset >= enter && scrollOffset < exit) {
+      if (row.stickyTop > deepestStickyTop) {
+        deepestStickyTop = row.stickyTop
+        pinnedBottomPath = row.path
+      }
+    }
+  }
+
+  if (rows.length === 0) {
+    return (
+      <p className="px-6 py-4 text-sm text-muted-foreground">
+        No matching roots.
+      </p>
+    )
+  }
+
+  return (
+    <div className="overflow-x-clip px-6 pb-4">
+      <div className="relative" style={{ height: virtualizer.getTotalSize() }}>
+        {virtualItems.map((virtualRow) => (
+          <FlatRowSlot
+            key={virtualRow.key}
+            row={rows[virtualRow.index]}
+            naturalY={virtualRow.start}
+            size={virtualRow.size}
+            rowHeight={rowHeight}
+            isPinnedBottom={rows[virtualRow.index].path === pinnedBottomPath}
+            direction={direction}
+            settings={settings}
+            selectedId={selectedId}
+            onSelect={onSelect}
+            expansion={expansion}
+            reveal={reveal}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+interface FlatRowSlotProps {
+  row: FlatRow
+  naturalY: number
+  size: number
+  rowHeight: number
+  isPinnedBottom: boolean
+  direction: Direction
+  settings: Settings
+  selectedId: NodeId | null
+  onSelect: (id: NodeId) => void
+  expansion: ExpansionApi
+  reveal: RevealApi
+}
+
+const FlatRowSlot = memo(function FlatRowSlot({
+  row,
+  naturalY,
+  rowHeight,
+  isPinnedBottom,
+  direction,
+  settings,
+  selectedId,
+  onSelect,
+  expansion,
+  reveal,
+}: FlatRowSlotProps) {
+  const depth = row.kind === "trace-row" ? row.depth : 0
+  const zIndex = row.stickable
+    ? row.kind === "domain-header"
+      ? HEADER_Z
+      : ROW_Z_BASE - depth
+    : 0
+
+  if (row.stickable) {
+    return (
+      <div
+        className="pointer-events-none absolute right-0 left-0"
+        style={{
+          top: naturalY,
+          height: row.subtreeSize * rowHeight,
+          zIndex,
+        }}
+      >
+        <div
+          className={`pointer-events-auto sticky flex w-full items-center bg-background ${
+            isPinnedBottom ? STICKY_BOTTOM_CLASSES : ""
+          }`}
+          style={{ top: row.stickyTop, minHeight: rowHeight }}
+        >
+          <RowContent
+            row={row}
+            rowHeight={rowHeight}
+            direction={direction}
+            settings={settings}
+            selectedId={selectedId}
+            onSelect={onSelect}
+            expansion={expansion}
+            reveal={reveal}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className="absolute right-0 left-0 flex items-center bg-background"
+      style={{
+        top: naturalY,
+        minHeight: rowHeight,
+        zIndex,
+      }}
+    >
+      <RowContent
+        row={row}
+        rowHeight={rowHeight}
+        direction={direction}
+        settings={settings}
+        selectedId={selectedId}
+        onSelect={onSelect}
+        expansion={expansion}
+        reveal={reveal}
+      />
+    </div>
+  )
+})
+
+function RowContent({
+  row,
+  rowHeight,
+  direction,
+  settings,
+  selectedId,
+  onSelect,
+  expansion,
+  reveal,
+}: {
+  row: FlatRow
+  rowHeight: number
+  direction: Direction
+  settings: Settings
+  selectedId: NodeId | null
+  onSelect: (id: NodeId) => void
+  expansion: ExpansionApi
+  reveal: RevealApi
+}) {
+  if (row.kind === "domain-header") {
+    return (
+      <DomainHeader
+        label={row.label}
+        expanded={row.expanded}
+        onToggle={() => expansion.toggle(row.path)}
+        meta={`${row.count} root${row.count === 1 ? "" : "s"}`}
+      />
+    )
+  }
+
+  if (row.kind === "hidden-indicator") {
+    const indentDepth = (row.stickyTop - rowHeight) / rowHeight
+    return (
+      <div
+        className="relative flex h-full w-full items-center"
+        style={{ paddingLeft: indentDepth * INDENT }}
+      >
+        <IndentGuides depth={indentDepth} />
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => reveal.toggle(row.togglePath)}
+          className="h-auto w-fit justify-start px-3 py-1 text-xs font-normal text-muted-foreground italic"
+        >
+          {row.revealed
+            ? `Hide ${row.count} filtered`
+            : `${row.count} hidden by filter`}
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <TraceItem
+      row={row}
+      direction={direction}
+      settings={settings}
+      selectedId={selectedId}
+      onSelect={onSelect}
+      expansion={expansion}
+    />
+  )
+}
+
+function TraceItem({
+  row,
+  direction,
+  settings,
+  selectedId,
+  onSelect,
+  expansion,
+}: {
+  row: Extract<FlatRow, { kind: "trace-row" }>
+  direction: Direction
+  settings: Settings
+  selectedId: NodeId | null
+  onSelect: (id: NodeId) => void
+  expansion: ExpansionApi
+}) {
+  const { trace, depth, hasChildren, expanded, domainPrefix } = row
+  const selected = selectedId === trace.id
+  const text = ROW_TEXT_BY_FONT[settings.fontSize]
+
+  return (
+    <div
+      className="relative flex h-full w-full items-center gap-1"
+      style={{ paddingLeft: depth * INDENT }}
+    >
+      <IndentGuides depth={depth} />
+      <Button
+        variant="ghost"
+        size="icon-xs"
+        onClick={() => expansion.toggle(row.path)}
+        disabled={!hasChildren}
+        aria-expanded={expanded}
+        className="shrink-0 text-muted-foreground"
+      >
+        <CaretRightIcon
+          className={`transition-transform ${expanded ? "rotate-90" : ""} ${
+            hasChildren ? "" : "opacity-0"
+          }`}
+        />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => onSelect(trace.id)}
+        aria-pressed={selected}
+        className={`h-auto w-fit justify-start gap-3 px-3 ${text.padY} ${text.main} font-normal ${
+          selected ? "bg-muted" : ""
+        }`}
+      >
+        {trace.edge && (
+          <EdgeLabel
+            edge={trace.edge}
+            direction={direction}
+            metaClass={text.meta}
+          />
+        )}
+        <NodeBadge kind={trace.node.type} />
+        <span>
+          <NodeName
+            name={trace.node.name}
+            kind={trace.node.type}
+            domainPrefix={domainPrefix}
+            hide={settings.hideDomainPrefix}
+            metaClass={text.meta}
+          />
+        </span>
+      </Button>
+    </div>
+  )
+}
+
+function IndentGuides({ depth }: { depth: number }) {
+  if (depth === 0) return null
+  return (
+    <>
+      {Array.from({ length: depth }, (_, i) => (
+        <span
+          key={i}
+          className="pointer-events-none absolute top-0 bottom-0 border-l border-border/60"
+          style={{ left: 11.5 + i * INDENT }}
+        />
+      ))}
+    </>
+  )
+}
+
+function EdgeLabel({
+  edge,
+  direction,
+  metaClass,
+}: {
+  edge: Edge
+  direction: Direction
+  metaClass: string
+}) {
+  return (
+    <span
+      className={`font-mono text-muted-foreground ${metaClass} tracking-wide uppercase`}
+    >
+      {verbFor(direction, edgeKind(edge))}
+    </span>
+  )
+}

package/src/domain/cypher-export.ts

@@ -0,0 +1,66 @@
+import { edgeKind, type Edge, type EdgeKind } from "./edge"
+import type { Graph } from "./graph"
+import type { Node, NodeKind } from "./node"
+
+const NODE_LABEL: Record<NodeKind, string> = {
+  event: "Event",
+  command: "Command",
+  saga: "Saga",
+  aggregate: "Aggregate",
+  projection: "Projection",
+}
+
+const REL_TYPE: Record<EdgeKind, string> = {
+  reacts: "TRIGGERS",
+  sends: "SENDS",
+  emits: "EMITS",
+  "handler-emits": "EMITS",
+}
+
+export function exportGraphToCypher(graph: Graph): string {
+  if (graph.nodes.length === 0) return "// No nodes to export\n"
+
+  const varByKey = new Map<string, string>()
+  graph.nodes.forEach((node, i) => {
+    varByKey.set(`${node.type}:${node.name}`, `n${i}`)
+  })
+
+  const lines: string[] = []
+  lines.push("CREATE")
+
+  const parts: string[] = []
+  for (const node of graph.nodes) {
+    const variable = varByKey.get(`${node.type}:${node.name}`)!
+    parts.push(
+      `  (${variable}:${NODE_LABEL[node.type]} {name: ${quote(node.name)}})`
+    )
+  }
+  for (const edge of graph.edges) {
+    const from = varByKey.get(`${edge.from.type}:${edge.from.name}`)
+    const to = varByKey.get(`${edge.to.type}:${edge.to.name}`)
+    if (!from || !to) continue
+    parts.push(`  (${from})-[:${REL_TYPE[edgeKind(edge)]}]->(${to})`)
+  }
+
+  lines.push(parts.join(",\n") + ";")
+  return lines.join("\n") + "\n"
+}
+
+export function subgraphFromVisible(
+  graph: Graph,
+  visibleNodes: Node[]
+): Graph {
+  const visibleIds = new Set(visibleNodes.map((n) => `${n.type}:${n.name}`))
+  return {
+    nodes: graph.nodes.filter((n) => visibleIds.has(`${n.type}:${n.name}`)),
+    edges: graph.edges.filter(
+      (e: Edge) =>
+        visibleIds.has(`${e.from.type}:${e.from.name}`) &&
+        visibleIds.has(`${e.to.type}:${e.to.name}`)
+    ),
+  }
+}
+
+function quote(value: string): string {
+  return `'${value.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`
+}

package/src/domain/direction.ts

@@ -0,0 +1 @@
+export type Direction = "forward" | "reverse"