initialize process models

src/components/display-and-visualization/process-model/ProcessModelActivityNode.tsx

@@ -0,0 +1,77 @@
+import type { MouseEventHandler, PointerEventHandler, ReactNode } from 'react'
+import clsx from 'clsx'
+import { PropsUtil } from '@/src/utils/propsUtil'
+
+export type ProcessModelActivityNodeKind = 'activity' | 'terminal'
+
+export type ProcessModelActivityNodeProps = {
+  nodeId: string,
+  label: string,
+  count: string,
+  customIcon: ReactNode,
+  kind?: ProcessModelActivityNodeKind,
+  bordered?: boolean,
+  active?: boolean,
+  visited?: boolean,
+  className?: string,
+  onClick?: MouseEventHandler<HTMLDivElement>,
+  onPointerEnter?: PointerEventHandler<HTMLDivElement>,
+  onPointerLeave?: PointerEventHandler<HTMLDivElement>,
+}
+
+export const ProcessModelActivityNode = ({
+  nodeId,
+  label,
+  count,
+  customIcon,
+  kind = 'activity',
+  bordered = true,
+  active = false,
+  visited = false,
+  className,
+  onClick,
+  onPointerEnter,
+  onPointerLeave,
+}: ProcessModelActivityNodeProps) => {
+  const interactive = !!onClick
+  const rootName = kind === 'terminal' ? 'process-model-terminal-node' : 'process-model-activity-node'
+  return (
+    <div
+      data-name={rootName}
+      id={`nd-${nodeId}`}
+      className={clsx('process-model-activity-node', className)}
+      data-kind={kind}
+      data-bordered={PropsUtil.dataAttributes.bool(bordered)}
+      data-active={PropsUtil.dataAttributes.bool(active)}
+      data-visited={PropsUtil.dataAttributes.bool(visited)}
+      data-interactive={PropsUtil.dataAttributes.bool(interactive)}
+      tabIndex={interactive ? 0 : undefined}
+      role={interactive ? 'button' : undefined}
+      aria-label={interactive ? label : undefined}
+      onClick={(event) => {
+        onClick?.(event)
+      }}
+      onPointerEnter={(event) => {
+        onPointerEnter?.(event)
+      }}
+      onPointerLeave={(event) => {
+        onPointerLeave?.(event)
+      }}
+      onKeyDown={(event) => {
+        if (!interactive) {
+          return
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          event.currentTarget.click()
+        }
+      }}
+    >
+      <div className="process-model-activity-node-icon">{customIcon}</div>
+      <div className="process-model-activity-node-text">
+        <div className="process-model-activity-node-label">{label}</div>
+        <div className="process-model-activity-node-count">{count}</div>
+      </div>
+    </div>
+  )
+}

src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx

@@ -0,0 +1,233 @@
+import { useId, useMemo, type ReactNode } from 'react'
+import clsx from 'clsx'
+import { Check, Plus } from 'lucide-react'
+import { ProcessModelActivityNode } from './ProcessModelActivityNode'
+import { ProcessModelTerminalNode } from './ProcessModelTerminalNode'
+import {
+  computeLayout,
+  getEdgePoints,
+  getProcessModelEdgePathDomId,
+  maxEdgeWeight,
+  weightToStyle
+} from './layoutProcessModel'
+import type {
+  ProcessModelGraph,
+  ProcessModelGraphActivityNode,
+  ProcessModelGraphNode
+} from './types'
+
+export type ProcessModelCanvasProps = {
+  graph: ProcessModelGraph,
+  className?: string,
+  showNodeBorder?: boolean,
+  activeNodeId?: string,
+  visitedNodeIds?: ReadonlySet<string>,
+  renderActivityIcon?: (node: ProcessModelGraphActivityNode) => ReactNode,
+  edgePathIdPrefix?: string,
+  edgeReplayHighlight?: { from: string, to: string } | null,
+  replayParticle?: { cx: number, cy: number, opacity: number } | null,
+}
+
+function defaultRenderActivityIcon(node: ProcessModelGraphActivityNode): ReactNode {
+  if (node.activityIcon === 'check') {
+    return <Check size={15} strokeWidth={2} className="process-model-activity-node-icon-svg" />
+  }
+  return <Plus size={15} strokeWidth={2} className="process-model-activity-node-icon-svg" />
+}
+
+function isVisited(
+  nodeId: string,
+  activeNodeId: string | undefined,
+  visited: ReadonlySet<string> | undefined
+): boolean {
+  if (!visited?.size) {
+    return false
+  }
+  if (nodeId === activeNodeId) {
+    return false
+  }
+  return visited.has(nodeId)
+}
+
+export const ProcessModelCanvas = ({
+  graph,
+  className,
+  showNodeBorder = true,
+  activeNodeId,
+  visitedNodeIds,
+  renderActivityIcon = defaultRenderActivityIcon,
+  edgePathIdPrefix,
+  edgeReplayHighlight = null,
+  replayParticle = null,
+}: ProcessModelCanvasProps) => {
+  const uid = useId().replace(/:/g, '')
+  const { positions, canvasW, canvasH } = useMemo(() => computeLayout(graph), [graph])
+  const maxW = useMemo(() => maxEdgeWeight(graph.edges), [graph.edges])
+
+  const edgeElements = useMemo(() => {
+    return graph.edges.map((edge) => {
+      const pts = getEdgePoints(positions, edge.from, edge.to, graph.edges)
+      if (!pts) {
+        return null
+      }
+      const { opacity, sw, markerTier } = weightToStyle(edge.weight, maxW)
+      const lp = pts.labelPt
+      const pillW = edge.label.length * 6.8 + 12
+      const pillH = 17
+      const labelStrong = opacity > 0.7
+      const isReplayEdge =
+        edgeReplayHighlight != null
+        && edge.from === edgeReplayHighlight.from
+        && edge.to === edgeReplayHighlight.to
+      const pathId = getProcessModelEdgePathDomId(edgePathIdPrefix, edge.from, edge.to)
+      const strokeOpacity = isReplayEdge ? 1 : opacity
+      const strokeWidth = isReplayEdge ? 3 : sw
+      return (
+        <g key={`${edge.from}-${edge.to}`}>
+          <path
+            id={pathId}
+            d={pts.pathD}
+            fill="none"
+            className="process-model-edge-path"
+            strokeWidth={strokeWidth}
+            strokeOpacity={strokeOpacity}
+            markerEnd={`url(#pm-arr-${markerTier}-${uid})`}
+            data-base-opacity={String(opacity)}
+            data-base-sw={String(sw)}
+          />
+          {edge.label ? (
+            <>
+              <rect
+                className="process-model-edge-label-bg"
+                x={lp.x - pillW / 2}
+                y={lp.y - pillH / 2}
+                width={pillW}
+                height={pillH}
+                rx={4}
+              />
+              <text
+                className={clsx(
+                  'process-model-edge-label-text',
+                  labelStrong ? 'process-model-edge-label-text-strong' : 'process-model-edge-label-text-muted'
+                )}
+                x={lp.x}
+                y={lp.y + 4.5}
+                textAnchor="middle"
+                fontSize={11}
+                fontWeight={600}
+              >
+                {edge.label}
+              </text>
+            </>
+          ) : null}
+        </g>
+      )
+    })
+  }, [graph, positions, maxW, uid, edgePathIdPrefix, edgeReplayHighlight])
+
+  const nodeElements = useMemo(() => {
+    const visited = visitedNodeIds ?? new Set<string>()
+    return graph.nodes.map((node: ProcessModelGraphNode) => {
+      const p = positions[node.id]
+      if (!p) {
+        return null
+      }
+      const active = node.id === activeNodeId
+      const wasVisited = isVisited(node.id, activeNodeId, visited)
+      let inner: ReactNode
+      if (node.type === 'start' || node.type === 'end') {
+        inner = (
+          <ProcessModelTerminalNode
+            nodeId={node.id}
+            variant={node.type}
+            label={node.label}
+            count={node.count}
+            bordered={showNodeBorder}
+            active={active}
+            visited={wasVisited}
+          />
+        )
+      } else {
+        const activityNode = node as ProcessModelGraphActivityNode
+        inner = (
+          <ProcessModelActivityNode
+            nodeId={activityNode.id}
+            label={activityNode.label}
+            count={activityNode.count}
+            customIcon={renderActivityIcon(activityNode)}
+            bordered={showNodeBorder}
+            active={active}
+            visited={wasVisited}
+          />
+        )
+      }
+      return (
+        <foreignObject
+          key={node.id}
+          id={`fn-${node.id}`}
+          x={p.x}
+          y={p.y}
+          width={p.w}
+          height={p.h}
+          className="process-model-foreign-object"
+        >
+          <div className="process-model-foreign-object-inner">{inner}</div>
+        </foreignObject>
+      )
+    })
+  }, [graph.nodes, positions, activeNodeId, visitedNodeIds, renderActivityIcon, showNodeBorder])
+
+  return (
+    <div
+      data-name="process-model-canvas"
+      className={clsx('process-model-canvas-wrap', className)}
+      style={{ width: canvasW + 64, minHeight: canvasH + 64 }}
+    >
+      <svg
+        className="process-model-svg"
+        width={canvasW}
+        height={canvasH}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          {(['strong', 'medium', 'faint'] as const).map((tier) => {
+            const op = tier === 'strong' ? 1 : tier === 'medium' ? 0.65 : 0.32
+            return (
+              <marker
+                key={tier}
+                id={`pm-arr-${tier}-${uid}`}
+                markerWidth="8"
+                markerHeight="8"
+                refX="8"
+                refY="4"
+                orient="auto"
+              >
+                <path
+                  d="M0,0.5 L0,7.5 L8,4 z"
+                  className="process-model-edge-marker-fill"
+                  fillOpacity={op}
+                />
+              </marker>
+            )
+          })}
+          <filter id={`pm-glow-${uid}`} x="-80%" y="-80%" width="360%" height="360%">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
+          </filter>
+        </defs>
+        <g className="process-model-edge-layer">{edgeElements}</g>
+        <g className="process-model-node-layer">{nodeElements}</g>
+        {replayParticle ? (
+          <circle
+            className="process-model-replay-particle"
+            cx={replayParticle.cx}
+            cy={replayParticle.cy}
+            r={5}
+            fill="var(--color-primary)"
+            fillOpacity={replayParticle.opacity}
+            filter={`url(#pm-glow-${uid})`}
+          />
+        ) : null}
+      </svg>
+    </div>
+  )
+}

src/components/display-and-visualization/process-model/ProcessModelTerminalNode.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react'
+import { ProcessModelActivityNode } from './ProcessModelActivityNode'
+import { terminalCountDisplayLine } from './layoutProcessModel'
+import type { ProcessModelTerminalKind } from './types'
+
+export type ProcessModelTerminalNodeProps = {
+  nodeId: string,
+  variant: ProcessModelTerminalKind,
+  label: string,
+  count: string,
+  bordered?: boolean,
+  active?: boolean,
+  visited?: boolean,
+  className?: string,
+}
+
+function TerminalHexIcon({ variant }: { variant: ProcessModelTerminalKind }): ReactNode {
+  const isStart = variant === 'start'
+  return (
+    <svg
+      className="process-model-terminal-node-hex shrink-0"
+      width="34"
+      height="34"
+      viewBox="0 0 44 44"
+      fill="none"
+      aria-hidden
+    >
+      <polygon
+        className="process-model-terminal-node-hex-fill"
+        points="22,2 40,12 40,32 22,42 4,32 4,12"
+      />
+      <polygon
+        points="22,5 38,14 38,30 22,39 6,30 6,14"
+        fill="none"
+        stroke="rgba(255,255,255,0.2)"
+        strokeWidth="1"
+      />
+      {isStart ? (
+        <polygon points="18,15 30,22 18,29" fill="white" />
+      ) : (
+        <rect x="14" y="14" width="16" height="16" rx="2" fill="white" />
+      )}
+    </svg>
+  )
+}
+
+export const ProcessModelTerminalNode = ({
+  nodeId,
+  variant,
+  label,
+  count,
+  bordered = true,
+  active = false,
+  visited = false,
+  className,
+}: ProcessModelTerminalNodeProps) => {
+  return (
+    <ProcessModelActivityNode
+      nodeId={nodeId}
+      kind="terminal"
+      label={label}
+      count={terminalCountDisplayLine(count)}
+      customIcon={<TerminalHexIcon variant={variant} />}
+      bordered={bordered}
+      active={active}
+      visited={visited}
+      className={className}
+    />
+  )
+}