@tensor_1/react 2.17.0 → 2.18.0

package/dist/relationship-graph-model.js

@@ -60,9 +60,428 @@ function traverseRelationshipNode(nodes, currentId, direction) {
   const current = Math.max(0, nodes.findIndex((node) => node.id === currentId));
   return nodes[(current + direction + nodes.length) % nodes.length]?.id;
 }
+const LAYERED_GEOMETRY = {
+  standard: { nodeWidth: 176, nodeHeight: 76, columnGap: 96, rowGap: 12 },
+  compact: { nodeWidth: 160, nodeHeight: 60, columnGap: 80, rowGap: 8 }
+};
+const LAYERED_PADDING = 16;
+const LAYERED_HEADER = 28;
+const GROUP_HEADER = 28;
+const AUTO_LABEL_MAX_FANOUT = 4;
+const LABEL_CHAR_WIDTH = 5.6;
+const LABEL_MAX_LINES = 2;
+function wrapEdgeLabel(label, width) {
+  const max = Math.max(4, Math.floor(width / LABEL_CHAR_WIDTH));
+  const clip = (word) => word.length > max ? `${word.slice(0, max - 1)}\u2026` : word;
+  const lines = [];
+  let current = "";
+  for (const word of label.split(/\s+/).filter(Boolean)) {
+    const next = current ? `${current} ${word}` : word;
+    if (next.length <= max) {
+      current = next;
+      continue;
+    }
+    if (current) lines.push(current);
+    current = clip(word);
+    if (lines.length === LABEL_MAX_LINES) break;
+  }
+  if (current && lines.length < LABEL_MAX_LINES) lines.push(current);
+  if (lines.length === LABEL_MAX_LINES) {
+    const consumed = lines.join(" ").replace(/…$/, "").length;
+    if (consumed < label.replace(/\s+/g, " ").trim().length) {
+      const last = lines[LABEL_MAX_LINES - 1];
+      lines[LABEL_MAX_LINES - 1] = last.endsWith("\u2026") ? last : `${last.slice(0, Math.max(1, max - 1))}\u2026`;
+    }
+  }
+  return lines;
+}
+const drawableEdge = (edge, ids) => ids.has(edge.source) && ids.has(edge.target) && edge.source !== edge.target;
+function classifyLayeredEdges(nodes, edges, rootId = nodes[0]?.id) {
+  const ids = new Set(nodes.map((node) => node.id));
+  const root = rootId !== void 0 && ids.has(rootId) ? rootId : nodes[0]?.id;
+  const outgoing = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    if (!drawableEdge(edge, ids)) continue;
+    const list = outgoing.get(edge.source);
+    if (list) list.push(edge.target);
+    else outgoing.set(edge.source, [edge.target]);
+  }
+  const bfs = /* @__PURE__ */ new Map();
+  if (root !== void 0) {
+    bfs.set(root, 0);
+    const queue = [root];
+    for (let head = 0; head < queue.length; head += 1) {
+      const current = queue[head];
+      for (const next of outgoing.get(current) ?? []) {
+        if (!bfs.has(next)) {
+          bfs.set(next, bfs.get(current) + 1);
+          queue.push(next);
+        }
+      }
+    }
+  }
+  const depthById = /* @__PURE__ */ new Map();
+  let deepest = 0;
+  for (const node of nodes) {
+    const supplied = node.depth !== void 0 && Number.isFinite(node.depth) ? Math.max(0, Math.floor(node.depth)) : void 0;
+    const depth = supplied ?? bfs.get(node.id);
+    if (depth === void 0) continue;
+    depthById.set(node.id, depth);
+    deepest = Math.max(deepest, depth);
+  }
+  for (const node of nodes) if (!depthById.has(node.id)) depthById.set(node.id, deepest + 1);
+  const forwardOut = /* @__PURE__ */ new Map();
+  const kindById = /* @__PURE__ */ new Map();
+  const backEdges = [];
+  for (const edge of edges) {
+    if (!drawableEdge(edge, ids)) continue;
+    const from = depthById.get(edge.source);
+    const to = depthById.get(edge.target);
+    if (to === from + 1) {
+      kindById.set(edge.id, "forward");
+      const list = forwardOut.get(edge.source);
+      if (list) list.push(edge.target);
+      else forwardOut.set(edge.source, [edge.target]);
+    } else if (to < from) {
+      backEdges.push(edge);
+    } else {
+      kindById.set(edge.id, "lateral");
+    }
+  }
+  for (const edge of backEdges) {
+    const limit = depthById.get(edge.source);
+    const seen = /* @__PURE__ */ new Set([edge.target]);
+    const stack = [edge.target];
+    let closes = false;
+    while (stack.length > 0 && !closes) {
+      const current = stack.pop();
+      for (const next of forwardOut.get(current) ?? []) {
+        if (next === edge.source) {
+          closes = true;
+          break;
+        }
+        if (!seen.has(next) && depthById.get(next) < limit) {
+          seen.add(next);
+          stack.push(next);
+        }
+      }
+    }
+    kindById.set(edge.id, closes ? "cycle" : "lateral");
+  }
+  return { depthById, kindById };
+}
+function clusterIdFor(parentId, type, edgeType) {
+  return `cluster:${parentId}:${type ?? ""}:${edgeType ?? ""}`;
+}
+const mean = (values) => values.reduce((sum, value) => sum + value, 0) / values.length;
+const round1 = (value) => Math.round(value * 10) / 10;
+function layoutLayeredGraph(nodes, edges, options = {}) {
+  const { nodeWidth, nodeHeight, columnGap, rowGap } = LAYERED_GEOMETRY[options.density ?? "standard"];
+  const threshold = options.clusterThreshold ?? 6;
+  const expanded = options.expandedClusterIds ?? /* @__PURE__ */ new Set();
+  const rootId = options.rootId !== void 0 && nodes.some((node) => node.id === options.rootId) ? options.rootId : nodes[0]?.id;
+  if (nodes.length === 0) {
+    return {
+      rootId,
+      items: [],
+      edges: [],
+      clusters: [],
+      columns: [],
+      itemOf: {},
+      width: 0,
+      height: 0,
+      nodeWidth,
+      nodeHeight,
+      headerHeight: LAYERED_HEADER
+    };
+  }
+  const { depthById, kindById } = classifyLayeredEdges(nodes, edges, rootId);
+  const drawable = edges.filter((edge) => kindById.has(edge.id));
+  const forwardParents = /* @__PURE__ */ new Map();
+  const forwardChildCount = /* @__PURE__ */ new Map();
+  const inCycle = /* @__PURE__ */ new Set();
+  const nodeDegree = /* @__PURE__ */ new Map();
+  for (const edge of drawable) {
+    nodeDegree.set(edge.source, (nodeDegree.get(edge.source) ?? 0) + 1);
+    nodeDegree.set(edge.target, (nodeDegree.get(edge.target) ?? 0) + 1);
+    if (kindById.get(edge.id) === "forward") {
+      const list = forwardParents.get(edge.target);
+      if (list) list.push(edge);
+      else forwardParents.set(edge.target, [edge]);
+      forwardChildCount.set(edge.source, (forwardChildCount.get(edge.source) ?? 0) + 1);
+    } else {
+      inCycle.add(edge.source);
+      inCycle.add(edge.target);
+    }
+  }
+  const groups = /* @__PURE__ */ new Map();
+  if (threshold > 0) {
+    for (const node of nodes) {
+      if (node.id === rootId || inCycle.has(node.id) || (forwardChildCount.get(node.id) ?? 0) > 0) continue;
+      const parents = forwardParents.get(node.id) ?? [];
+      if (parents.length !== 1) continue;
+      const via = parents[0];
+      const id = clusterIdFor(via.source, node.type, via.type);
+      const group = groups.get(id);
+      if (group) {
+        group.members.push(node);
+        continue;
+      }
+      const created = { id, parentId: via.source, depth: depthById.get(node.id), members: [node] };
+      if (node.type !== void 0) created.type = node.type;
+      if (via.type !== void 0) created.edgeType = via.type;
+      const edgeLabel = via.label ?? via.type;
+      if (edgeLabel !== void 0) created.edgeLabel = edgeLabel;
+      groups.set(id, created);
+    }
+  }
+  const clusterById = /* @__PURE__ */ new Map();
+  const itemOf = {};
+  const expandedGroupOf = /* @__PURE__ */ new Map();
+  for (const group of groups.values()) {
+    if (group.members.length < threshold) continue;
+    if (expanded.has(group.id)) {
+      for (const member of group.members) expandedGroupOf.set(member.id, group);
+      continue;
+    }
+    clusterById.set(group.id, group);
+    for (const member of group.members) itemOf[member.id] = group.id;
+  }
+  for (const node of nodes) if (itemOf[node.id] === void 0) itemOf[node.id] = node.id;
+  const columnsByDepth = /* @__PURE__ */ new Map();
+  const itemById = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const id = itemOf[node.id];
+    if (itemById.has(id)) continue;
+    const cluster = clusterById.get(id);
+    const depth = depthById.get(node.id);
+    const item = {
+      id,
+      kind: cluster ? "cluster" : "node",
+      depth,
+      index: 0,
+      x: 0,
+      y: 0,
+      width: nodeWidth,
+      height: nodeHeight,
+      parents: [],
+      children: [],
+      inCycle: cluster ? false : inCycle.has(node.id),
+      degree: cluster ? cluster.members.length : nodeDegree.get(node.id) ?? 0
+    };
+    if (cluster) item.cluster = cluster;
+    else item.node = node;
+    itemById.set(id, item);
+    const column = columnsByDepth.get(depth);
+    if (column) column.push(item);
+    else columnsByDepth.set(depth, [item]);
+  }
+  for (const edge of drawable) {
+    if (kindById.get(edge.id) !== "forward") continue;
+    const from = itemById.get(itemOf[edge.source]);
+    const to = itemById.get(itemOf[edge.target]);
+    if (!from.children.includes(to.id)) from.children.push(to.id);
+    if (!to.parents.includes(from.id)) to.parents.push(from.id);
+  }
+  const depths = [...columnsByDepth.keys()].sort((a, b) => a - b);
+  const position = /* @__PURE__ */ new Map();
+  const reindex = (column) => {
+    column.forEach((item, index) => {
+      item.index = index;
+      position.set(item.id, index);
+    });
+  };
+  for (const depth of depths) reindex(columnsByDepth.get(depth));
+  const groupOfItem = (item) => item.node ? expandedGroupOf.get(item.node.id) : void 0;
+  const sweep = (depth, neighbours) => {
+    const keyed = columnsByDepth.get(depth).map((item) => {
+      const around = neighbours(item).map((id) => position.get(id)).filter((value) => value !== void 0);
+      return { item, key: around.length > 0 ? mean(around) : item.index, tie: item.index };
+    });
+    keyed.sort((a, b) => a.key - b.key || a.tie - b.tie);
+    const ordered = [];
+    const placed = /* @__PURE__ */ new Set();
+    for (const { item } of keyed) {
+      if (placed.has(item.id)) continue;
+      const group = groupOfItem(item);
+      for (const candidate of group ? keyed.map((entry) => entry.item).filter((other) => groupOfItem(other) === group) : [item]) {
+        if (placed.has(candidate.id)) continue;
+        ordered.push(candidate);
+        placed.add(candidate.id);
+      }
+    }
+    columnsByDepth.set(depth, ordered);
+    reindex(ordered);
+  };
+  const inner = depths.slice(1);
+  for (const depth of inner) sweep(depth, (item) => item.parents);
+  for (const depth of [...inner].reverse()) sweep(depth, (item) => item.children);
+  for (const depth of inner) sweep(depth, (item) => item.parents);
+  const top = LAYERED_PADDING + LAYERED_HEADER;
+  const columns = [];
+  let width = 0;
+  let height = 0;
+  for (const depth of depths) {
+    const column = columnsByDepth.get(depth);
+    const x = LAYERED_PADDING + depth * (nodeWidth + columnGap);
+    let cursor = top;
+    let count = 0;
+    const ledGroups = /* @__PURE__ */ new Set();
+    for (const item of column) {
+      const parentCentres = item.parents.map((id) => itemById.get(id)).filter((parent) => parent.depth < depth).map((parent) => parent.y + parent.height / 2);
+      const group = groupOfItem(item);
+      const leadsGroup = group !== void 0 && !ledGroups.has(group);
+      if (group) ledGroups.add(group);
+      const floor = cursor + (leadsGroup ? GROUP_HEADER : 0);
+      const target = parentCentres.length > 0 ? mean(parentCentres) - item.height / 2 : floor;
+      item.x = x;
+      item.y = round1(Math.max(target, floor));
+      if (leadsGroup) item.expandedGroup = group;
+      cursor = item.y + item.height + rowGap;
+      count += item.cluster ? item.cluster.members.length : 1;
+      width = Math.max(width, x + item.width);
+      height = Math.max(height, item.y + item.height);
+    }
+    columns.push({ depth, x, count });
+  }
+  const byPosition = (a, b) => (position.get(a) ?? 0) - (position.get(b) ?? 0);
+  for (const item of itemById.values()) {
+    item.children.sort(byPosition);
+    item.parents.sort(byPosition);
+  }
+  const routed = /* @__PURE__ */ new Map();
+  for (const edge of drawable) {
+    const kind = kindById.get(edge.id);
+    const from = itemById.get(itemOf[edge.source]);
+    const to = itemById.get(itemOf[edge.target]);
+    const key = from.kind === "cluster" || to.kind === "cluster" ? `${from.id}->${to.id}` : edge.id;
+    const existing = routed.get(key);
+    if (existing) {
+      existing.edgeIds.push(edge.id);
+      continue;
+    }
+    let startX;
+    let startY;
+    let endX;
+    let endY;
+    let path;
+    let labelX;
+    let labelY;
+    let startAngle;
+    let endAngle;
+    if (kind === "forward") {
+      startX = from.x + from.width;
+      startY = from.y + from.height / 2;
+      endX = to.x;
+      endY = to.y + to.height / 2;
+      const bend = Math.max(columnGap / 2, 24);
+      path = `M${round1(startX)} ${round1(startY)} C${round1(startX + bend)} ${round1(startY)} ${round1(endX - bend)} ${round1(endY)} ${round1(endX)} ${round1(endY)}`;
+      labelX = (startX + endX) / 2;
+      labelY = (startY + endY) / 2;
+      startAngle = Math.PI;
+      endAngle = 0;
+    } else if (from.depth === to.depth) {
+      startX = from.x + from.width;
+      startY = from.y + from.height / 2;
+      endX = to.x + to.width;
+      endY = to.y + to.height / 2;
+      const bulge = Math.min(columnGap - 8, 20 + Math.abs(endY - startY) * 0.1);
+      path = `M${round1(startX)} ${round1(startY)} C${round1(startX + bulge)} ${round1(startY)} ${round1(endX + bulge)} ${round1(endY)} ${round1(endX)} ${round1(endY)}`;
+      labelX = startX + bulge * 0.75;
+      labelY = (startY + endY) / 2;
+      startAngle = Math.PI;
+      endAngle = Math.PI;
+    } else {
+      startX = from.x + from.width / 2;
+      startY = from.y + from.height;
+      endX = to.x + to.width / 2;
+      endY = to.y + to.height;
+      const dip = 28 + Math.abs(endX - startX) * 0.12;
+      const low = Math.max(startY, endY) + dip;
+      path = `M${round1(startX)} ${round1(startY)} C${round1(startX)} ${round1(low)} ${round1(endX)} ${round1(low)} ${round1(endX)} ${round1(endY)}`;
+      labelX = (startX + endX) / 2;
+      labelY = low - dip * 0.25;
+      startAngle = -Math.PI / 2;
+      endAngle = -Math.PI / 2;
+      height = Math.max(height, low);
+    }
+    const arrow = edge.arrow ?? "forward";
+    const atStart = arrow === "backward";
+    const entry = {
+      id: key,
+      source: from.id,
+      target: to.id,
+      kind,
+      edgeIds: [edge.id],
+      arrow,
+      emphasis: edge.emphasis === true,
+      path,
+      labelX: round1(labelX),
+      labelY: round1(labelY),
+      arrowX: round1(atStart ? startX : endX),
+      arrowY: round1(atStart ? startY : endY),
+      arrowAngle: atStart ? startAngle : endAngle,
+      labelLines: [],
+      autoLabel: to.kind !== "cluster" && (edge.emphasis === true || kind === "forward" && from.children.length <= AUTO_LABEL_MAX_FANOUT)
+    };
+    if (edge.type !== void 0) entry.type = edge.type;
+    const label = edge.label ?? edge.type;
+    if (label !== void 0) entry.label = label;
+    routed.set(key, entry);
+  }
+  const seenLabels = /* @__PURE__ */ new Set();
+  for (const entry of routed.values()) {
+    if (entry.label === void 0) continue;
+    entry.labelLines = wrapEdgeLabel(entry.label, columnGap - 8);
+    if (!entry.autoLabel || entry.emphasis || entry.kind !== "forward") continue;
+    const key = `${entry.source}|${entry.label}`;
+    if (seenLabels.has(key)) entry.autoLabel = false;
+    else seenLabels.add(key);
+  }
+  return {
+    rootId,
+    items: depths.flatMap((depth) => columnsByDepth.get(depth)),
+    edges: [...routed.values()],
+    clusters: [...clusterById.values()],
+    columns,
+    itemOf,
+    width: round1(width + LAYERED_PADDING),
+    height: round1(height + LAYERED_PADDING + 8),
+    nodeWidth,
+    nodeHeight,
+    headerHeight: LAYERED_HEADER
+  };
+}
+function layeredNeighbor(layout, currentId, key) {
+  const root = layout.rootId !== void 0 ? layout.itemOf[layout.rootId] : layout.items[0]?.id;
+  const current = layout.items.find((item) => item.id === currentId);
+  if (!current) return root ?? layout.items[0]?.id;
+  const column = layout.items.filter((item) => item.depth === current.depth);
+  switch (key) {
+    case "ArrowUp":
+      return column[current.index - 1]?.id;
+    case "ArrowDown":
+      return column[current.index + 1]?.id;
+    case "ArrowRight":
+      return current.children[0];
+    case "ArrowLeft":
+      return current.parents[0];
+    case "Home":
+      return root;
+    case "End":
+      return column[column.length - 1]?.id;
+    default:
+      return void 0;
+  }
+}
 export {
   boundRelationshipGraph,
+  classifyLayeredEdges,
+  clusterIdFor,
+  layeredNeighbor,
+  layoutLayeredGraph,
   layoutRelationshipGraph,
   relationshipNeighbors,
-  traverseRelationshipNode
+  traverseRelationshipNode,
+  wrapEdgeLabel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/react",
-  "version": "2.17.0",
+  "version": "2.18.0",
   "description": "Thin React wrappers over the UIx v2 CSS component library.",
   "license": "UNLICENSED",
   "type": "module",