@arcote.tech/arc-map 0.7.27 → 0.7.29

package/src/app/subgraph.ts

@@ -1,127 +0,0 @@
-/**
- * Build the scoped sub-graph for a use case from its `<Arc>` references and the
- * full map. Pure and dependency-free (testable in bun).
- *
- * Node set = referenced ∪ direct neighbours (1 hop) ∪ all nodes on the shortest
- * UNDIRECTED connecting paths between pairs of referenced nodes (so the plumbing
- * that links two steps — e.g. command → event → listener → event → view — shows
- * even when the author didn't reference it). Bounded by a max path length.
- */
-
-import type { MapEdge, MapJson } from "../types";
-
-/** Default cap for connecting-path length (in hops). */
-export const DEFAULT_MAX_PATH = 5;
-
-export interface SubgraphInput {
-  map: MapJson;
-  /** Referenced node ids in document order (may include unresolved — filtered). */
-  referenced: string[];
-  /** Extra nodes added via expand-on-click. */
-  expanded?: string[];
-  maxPath?: number;
-}
-
-export interface SubgraphResult {
-  /** All node ids included in the sub-graph. */
-  nodeIds: Set<string>;
-  /** Referenced node ids that exist in the map, in document order, de-duped. */
-  referencedIds: string[];
-  /** Edges induced on the node set. */
-  edges: MapEdge[];
-}
-
-function buildAdjacency(map: MapJson): Map<string, Set<string>> {
-  const adj = new Map<string, Set<string>>();
-  const link = (a: string, b: string) => {
-    let s = adj.get(a);
-    if (!s) adj.set(a, (s = new Set()));
-    s.add(b);
-  };
-  for (const e of map.edges) {
-    link(e.source, e.target);
-    link(e.target, e.source);
-  }
-  return adj;
-}
-
-/** Undirected neighbours of a node (for 1-hop and expand-on-click). */
-export function neighborsOf(map: MapJson, nodeId: string): string[] {
-  return [...buildAdjacency(map).get(nodeId) ?? []];
-}
-
-/** BFS shortest path (undirected) from `start` to `goal`, capped at maxLen hops. */
-function shortestPath(
-  adj: Map<string, Set<string>>,
-  start: string,
-  goal: string,
-  maxLen: number,
-): string[] | null {
-  if (start === goal) return [start];
-  const prev = new Map<string, string>();
-  const depth = new Map<string, number>([[start, 0]]);
-  const queue: string[] = [start];
-  while (queue.length) {
-    const cur = queue.shift()!;
-    const d = depth.get(cur)!;
-    if (d >= maxLen) continue;
-    for (const nb of adj.get(cur) ?? []) {
-      if (depth.has(nb)) continue;
-      depth.set(nb, d + 1);
-      prev.set(nb, cur);
-      if (nb === goal) {
-        const path = [goal];
-        let p = cur;
-        while (p !== start) {
-          path.push(p);
-          p = prev.get(p)!;
-        }
-        path.push(start);
-        return path.reverse();
-      }
-      queue.push(nb);
-    }
-  }
-  return null;
-}
-
-export function buildSubgraph(input: SubgraphInput): SubgraphResult {
-  const { map, maxPath = DEFAULT_MAX_PATH } = input;
-  const exists = new Set(map.elements.map((e) => e.id));
-  const adj = buildAdjacency(map);
-
-  // Resolved referenced ids, de-duped, in document order.
-  const referencedIds: string[] = [];
-  const seen = new Set<string>();
-  for (const id of input.referenced) {
-    if (exists.has(id) && !seen.has(id)) {
-      seen.add(id);
-      referencedIds.push(id);
-    }
-  }
-
-  const nodeIds = new Set<string>(referencedIds);
-
-  // Expanded (click) nodes + their neighbours.
-  for (const id of input.expanded ?? []) {
-    if (!exists.has(id)) continue;
-    nodeIds.add(id);
-    for (const nb of adj.get(id) ?? []) nodeIds.add(nb);
-  }
-
-  // 1-hop neighbours of referenced.
-  for (const id of referencedIds) {
-    for (const nb of adj.get(id) ?? []) nodeIds.add(nb);
-  }
-
-  // Connecting paths between every pair of referenced nodes.
-  for (let i = 0; i < referencedIds.length; i++) {
-    for (let j = i + 1; j < referencedIds.length; j++) {
-      const path = shortestPath(adj, referencedIds[i], referencedIds[j], maxPath);
-      if (path) for (const n of path) nodeIds.add(n);
-    }
-  }
-
-  const edges = map.edges.filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target));
-  return { nodeIds, referencedIds, edges };
-}

package/src/app/usecase-layout.ts

@@ -1,249 +0,0 @@
-/**
- * Deterministic 2-D layout for the use-case data-flow diagram.
- *
- *   x = depth  (time / dependency order)
- *   y = lane   (parallel / branch track)
- *
- * Independent steps land at the same depth on separate lanes (stacked
- * vertically). Per-depth horizontal spacing reserves room for any expanded
- * dependency columns, so expanding never reshuffles the backbone.
- */
-
-import type { Edge, Node } from "@xyflow/react";
-import type { MapJson } from "../types";
-import { REL_SIDE, type RelKind, type UseCaseModel } from "./usecase-model";
-import { EDGE_COLOR, ELEMENT_COLOR } from "./theme";
-
-const STEP_W = 215;
-const STEP_HALF = STEP_W / 2;
-const DEP_W = 178;
-const COL_GAP_X = 250;
-const COL_HALF = COL_GAP_X + DEP_W / 2;
-const MARGIN = 80;
-const BASELINE_Y = 360;
-const LANE_GAP_Y = 230;
-const DEP_H = 48;
-const DEP_GAP_Y = 14;
-
-/** Edge kinds where the target is an INPUT to the source (read / triggered-by). */
-const INPUT_KINDS = new Set(["queries", "listens", "handles"]);
-
-const REL_COLOR: Record<RelKind, string> = {
-  queries: EDGE_COLOR.queries,
-  mutates: EDGE_COLOR.mutates,
-  mutatedBy: EDGE_COLOR.mutates,
-  queriedBy: EDGE_COLOR.queries,
-  handledBy: EDGE_COLOR.handles,
-  usedByUI: ELEMENT_COLOR.page,
-};
-
-export interface UseCaseLayoutInput {
-  model: UseCaseModel;
-  map: MapJson;
-  expanded: Record<string, RelKind[]>;
-}
-
-export interface UseCaseLayoutResult {
-  nodes: Node[];
-  edges: Edge[];
-}
-
-export function layoutUseCaseModel(input: UseCaseLayoutInput): UseCaseLayoutResult {
-  const { model, map, expanded } = input;
-  const elementById = new Map(map.elements.map((e) => [e.id, e]));
-  for (const [id, el] of model.uiById) if (!elementById.has(id)) elementById.set(id, el);
-  const nodes: Node[] = [];
-  const edges: Edge[] = [];
-  const steps = model.steps;
-  if (steps.length === 0) return { nodes, edges };
-
-  // Expanded items per step, split by side.
-  const sideItems = new Map<string, { left: { kind: RelKind; id: string }[]; right: { kind: RelKind; id: string }[] }>();
-  for (const s of steps) {
-    const left: { kind: RelKind; id: string }[] = [];
-    const right: { kind: RelKind; id: string }[] = [];
-    for (const kind of expanded[s.occId] ?? []) {
-      const bucket = REL_SIDE[kind] === "left" ? left : right;
-      for (const id of s.badges[kind] ?? []) bucket.push({ kind, id });
-    }
-    sideItems.set(s.occId, { left, right });
-  }
-
-  // Per-depth reservation: does any step at depth d expand a left / right column?
-  const maxDepth = Math.max(...steps.map((s) => s.depth));
-  const leftAt: boolean[] = [];
-  const rightAt: boolean[] = [];
-  for (const s of steps) {
-    const si = sideItems.get(s.occId)!;
-    if (si.left.length) leftAt[s.depth] = true;
-    if (si.right.length) rightAt[s.depth] = true;
-  }
-  const xByDepth: number[] = [];
-  for (let d = 0; d <= maxDepth; d++) {
-    const halfLeft = leftAt[d] ? COL_HALF : STEP_HALF;
-    const halfRight = (dd: number) => (rightAt[dd] ? COL_HALF : STEP_HALF);
-    xByDepth[d] = d === 0 ? halfLeft : xByDepth[d - 1] + halfRight(d - 1) + MARGIN + halfLeft;
-  }
-  const stepY = (lane: number) => BASELINE_Y + lane * LANE_GAP_Y;
-
-  // 1) Step nodes.
-  for (const s of steps) {
-    nodes.push({
-      id: s.occId,
-      type: "step",
-      position: { x: xByDepth[s.depth] - STEP_HALF, y: stepY(s.lane) },
-      data: { step: s, expanded: expanded[s.occId] ?? [] },
-    });
-  }
-
-  // Backbone edges (document order), skipping parallel siblings (same block,
-  // different lane) which are concurrent rather than sequential.
-  for (let i = 1; i < steps.length; i++) {
-    const a = steps[i - 1];
-    const b = steps[i];
-    if (a.blockId && a.blockId === b.blockId && a.lane !== b.lane) continue;
-    edges.push({
-      id: `bb:${i}`,
-      source: a.occId,
-      target: b.occId,
-      style: { stroke: "#c4b5fd", strokeWidth: 1.5, strokeDasharray: "3 5", opacity: 0.6 },
-      data: { backbone: true },
-    });
-  }
-
-  // element id -> first step occId + depth (for relation edges & connectors).
-  const firstOccByElement = new Map<string, string>();
-  const depthByElement = new Map<string, number>();
-  for (const s of steps) {
-    if (s.exists && !firstOccByElement.has(s.element!.id)) {
-      firstOccByElement.set(s.element!.id, s.occId);
-      depthByElement.set(s.element!.id, s.depth);
-    }
-  }
-  const nodeIdForElement = (elId: string): string | undefined =>
-    firstOccByElement.get(elId) ?? (model.visible.has(elId) ? `conn:${elId}` : undefined);
-
-  // 2) Connector nodes — placed BETWEEN the two narrated steps they connect,
-  //    interpolated left→right by their flow order, on a dedicated lane just
-  //    below the backbone (so they never overlap a step) and rendered like any
-  //    other element node.
-  const stepDepthByOcc = new Map(steps.map((s) => [s.occId, s.depth]));
-  const connDepth = new Map<string, number>();
-  const maxLane = Math.max(...steps.map((s) => s.lane));
-  const connLaneY = BASELINE_Y + (maxLane + 1) * LANE_GAP_Y;
-  const xStack = new Map<number, number>(); // rounded x → vertical stack count
-  for (const c of model.connectors) {
-    const da = depthByElement.get(stepElementForSeq(model, c.between[0])) ?? 0;
-    const db = depthByElement.get(stepElementForSeq(model, c.between[1])) ?? da;
-    // Spread intermediates evenly across the span between the two steps.
-    const frac = c.order / (c.count + 1);
-    const pseudoDepth = da + (db - da) * frac;
-    const x = xByDepth[da] + (xByDepth[db] - xByDepth[da]) * frac;
-    const key = Math.round(x);
-    const idx = xStack.get(key) ?? 0;
-    xStack.set(key, idx + 1);
-    const y = connLaneY + idx * (DEP_H + DEP_GAP_Y);
-    connDepth.set(`conn:${c.id}`, pseudoDepth);
-    nodes.push({ id: `conn:${c.id}`, type: "connector", position: { x: x - DEP_W / 2, y }, data: { element: c.element } });
-  }
-
-  const depthOf = (nodeId: string): number =>
-    connDepth.get(nodeId) ?? stepDepthByOcc.get(nodeId) ?? 0;
-
-  // Relation edges, oriented by data-flow:
-  //  - queries/listens/handles = INPUT → draw element→consumer (arrow into step);
-  //  - mutates/emits = OUTPUT → draw producer→element, but DROP backward outputs
-  //    (an output pointing to an earlier element is noise).
-  const seenEdge = new Set<string>();
-  for (const e of map.edges) {
-    const sId = nodeIdForElement(e.source);
-    const tId = nodeIdForElement(e.target);
-    if (!sId || !tId || sId === tId) continue;
-    const input = INPUT_KINDS.has(e.kind);
-    const from = input ? tId : sId;
-    const to = input ? sId : tId;
-    if (!input && depthOf(to) < depthOf(from)) continue; // backward output → skip
-    const key = `${from}->${to}:${e.kind}`;
-    if (seenEdge.has(key)) continue;
-    seenEdge.add(key);
-    const color = EDGE_COLOR[e.kind];
-    edges.push({
-      id: `rel:${key}`,
-      source: from,
-      target: to,
-      label: e.kind,
-      style: { stroke: color, strokeWidth: 1.5, opacity: 0.75 },
-      labelStyle: { fill: color, fontSize: 9, fontWeight: 600 },
-      labelBgStyle: { fill: "#fff", fillOpacity: 0.8 },
-      markerEnd: { type: "arrowclosed", color } as any,
-    });
-  }
-
-  // 2b) UI scope-usage edges — a narrated screen (page/component) connects to
-  //     the context elements it uses via useQuery/useMutation. query = reads
-  //     (input, element→screen); mutation = triggers (output, screen→element).
-  //     Drawn only when BOTH ends are visible; otherwise it stays a `usedByUI`
-  //     badge. Dashed indigo to read as "UI uses", distinct from domain edges.
-  for (const e of map.componentEdges ?? []) {
-    const sId = nodeIdForElement(e.source);
-    const tId = nodeIdForElement(e.target);
-    if (!sId || !tId || sId === tId) continue;
-    const input = e.usage === "query";
-    const from = input ? tId : sId;
-    const to = input ? sId : tId;
-    if (!input && depthOf(to) < depthOf(from)) continue; // backward output → skip
-    const key = `ui:${from}->${to}:${e.usage}`;
-    if (seenEdge.has(key)) continue;
-    seenEdge.add(key);
-    const color = ELEMENT_COLOR.page;
-    edges.push({
-      id: `uirel:${key}`,
-      source: from,
-      target: to,
-      label: input ? "czyta" : "wywołuje",
-      style: { stroke: color, strokeWidth: 1.5, opacity: 0.7, strokeDasharray: "4 3" },
-      labelStyle: { fill: color, fontSize: 9, fontWeight: 600 },
-      labelBgStyle: { fill: "#fff", fillOpacity: 0.8 },
-      markerEnd: { type: "arrowclosed", color } as any,
-    });
-  }
-
-  // 3) Expanded badge columns around each step.
-  for (const s of steps) {
-    const si = sideItems.get(s.occId)!;
-    const cx = xByDepth[s.depth];
-    const cy = stepY(s.lane);
-    const place = (items: { kind: RelKind; id: string }[], side: "left" | "right") => {
-      const colX = cx + (side === "left" ? -COL_GAP_X : COL_GAP_X) - DEP_W / 2;
-      const total = items.length;
-      items.forEach((it, k) => {
-        const el = elementById.get(it.id);
-        if (!el) return;
-        const y = cy + (k - (total - 1) / 2) * (DEP_H + DEP_GAP_Y);
-        const depNodeId = `dep:${s.occId}:${it.kind}:${it.id}`;
-        nodes.push({ id: depNodeId, type: "dep", position: { x: colX, y }, data: { element: el, relKind: it.kind } });
-        const intoStep = it.kind === "queries" || it.kind === "queriedBy" || it.kind === "mutatedBy" || it.kind === "usedByUI";
-        const color = REL_COLOR[it.kind];
-        edges.push({
-          id: `de:${depNodeId}`,
-          source: intoStep ? depNodeId : s.occId,
-          target: intoStep ? s.occId : depNodeId,
-          style: { stroke: color, strokeWidth: 1.5, opacity: 0.9 },
-          markerEnd: { type: "arrowclosed", color } as any,
-        });
-      });
-    };
-    place(si.left, "left");
-    place(si.right, "right");
-  }
-
-  return { nodes, edges };
-}
-
-/** Find the element id of the first step at a given seq (for connector depth). */
-function stepElementForSeq(model: UseCaseModel, seq: number): string {
-  const s = model.steps.find((x) => x.seq === seq);
-  return s?.element?.id ?? "";
-}
-
-export { ELEMENT_COLOR };