@carlonicora/nextjs-jsonapi 1.99.0 → 1.100.1

package/src/hooks/computeLayeredLayout.ts

@@ -16,10 +16,25 @@ export interface LayeredLayoutPosition {
   y: number;
 }
 
+export interface FitLayeredLayoutOptions extends LayeredLayoutOptions {
+  targetAspectRatio: number;
+  maxIterations?: number;
+  tolerance?: number;
+}
+
 const DEFAULT_RANKDIR: LayeredRankDir = "LR";
 const DEFAULT_NODESEP = 50;
 const DEFAULT_RANKSEP = 120;
 
+const MIN_NODESEP = 20;
+const MAX_NODESEP = 400;
+const MIN_RANKSEP = 40;
+const MAX_RANKSEP = 600;
+const MIN_FACTOR = 0.25;
+const MAX_FACTOR = 4;
+const DEFAULT_TOLERANCE = 0.05;
+const DEFAULT_MAX_ITERATIONS = 4;
+
 const TITLE_PX_PER_CHAR_16 = 8;
 const NAME_PX_PER_CHAR_12 = 6.5;
 const NAME_PX_PER_CHAR_16_BOLD = 8;
@@ -40,20 +55,22 @@ function linkEndpointId(end: D3Link["source"] | D3Link["target"]): string {
   return typeof end === "string" ? end : end.id;
 }
 
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+interface DagreRunResult {
+  positions: Map<string, LayeredLayoutPosition>;
+  bbox: { width: number; height: number };
+}
+
 /**
- * Compute a layered DAG layout using dagre. Pure function: no DOM, no React,
- * no d3 globals. Returns a Map of node.id -> { x, y } in graph coordinates.
- *
- * Returns null if dagre.layout throws (e.g. an unexpected cycle). Callers
- * should fall back to their previous layout in that case.
+ * Run dagre once for the given nodes/links/opts and return both the
+ * computed positions and the bounding box of the laid-out graph.
+ * Internal helper — callers should use `computeLayeredLayout` or
+ * `fitLayeredLayoutToAspectRatio`.
  */
-export function computeLayeredLayout(
-  nodes: D3Node[],
-  links: D3Link[],
-  opts: LayeredLayoutOptions,
-): Map<string, LayeredLayoutPosition> | null {
-  if (nodes.length === 0) return new Map();
-
+function runDagreOnce(nodes: D3Node[], links: D3Link[], opts: LayeredLayoutOptions): DagreRunResult | null {
   const rankdir = opts.rankdir ?? DEFAULT_RANKDIR;
   const nodesep = opts.nodesep ?? DEFAULT_NODESEP;
   const ranksep = opts.ranksep ?? DEFAULT_RANKSEP;
@@ -86,11 +103,107 @@ export function computeLayeredLayout(
   }
 
   const positions = new Map<string, LayeredLayoutPosition>();
+  let xMin = Infinity;
+  let xMax = -Infinity;
+  let yMin = Infinity;
+  let yMax = -Infinity;
+
   for (const node of nodes) {
     const laid = g.node(node.id);
     if (laid && Number.isFinite(laid.x) && Number.isFinite(laid.y)) {
       positions.set(node.id, { x: laid.x, y: laid.y });
+      const halfW = (laid.width ?? opts.minNodeWidth) / 2;
+      const halfH = (laid.height ?? opts.minNodeHeight) / 2;
+      xMin = Math.min(xMin, laid.x - halfW);
+      xMax = Math.max(xMax, laid.x + halfW);
+      yMin = Math.min(yMin, laid.y - halfH);
+      yMax = Math.max(yMax, laid.y + halfH);
     }
   }
-  return positions;
+
+  const bbox =
+    positions.size === 0
+      ? { width: 0, height: 0 }
+      : { width: Math.max(0, xMax - xMin), height: Math.max(0, yMax - yMin) };
+
+  return { positions, bbox };
+}
+
+/**
+ * Compute a layered DAG layout using dagre. Pure function: no DOM, no React,
+ * no d3 globals. Returns a Map of node.id -> { x, y } in graph coordinates.
+ *
+ * Returns null if dagre.layout throws (e.g. an unexpected cycle). Callers
+ * should fall back to their previous layout in that case.
+ */
+export function computeLayeredLayout(
+  nodes: D3Node[],
+  links: D3Link[],
+  opts: LayeredLayoutOptions,
+): Map<string, LayeredLayoutPosition> | null {
+  if (nodes.length === 0) return new Map();
+  const result = runDagreOnce(nodes, links, opts);
+  return result ? result.positions : null;
+}
+
+/**
+ * Compute a layered layout, then iteratively re-run dagre with adjusted
+ * `nodesep`/`ranksep` until the bounding-box aspect ratio is within
+ * `tolerance` of `targetAspectRatio` (or `maxIterations` is reached).
+ *
+ * Degenerate cases (empty graph, single-rank graph where one axis has
+ * zero extent, missing target ratio) skip fitting and return the
+ * single-pass result.
+ */
+export function fitLayeredLayoutToAspectRatio(
+  nodes: D3Node[],
+  links: D3Link[],
+  opts: FitLayeredLayoutOptions,
+): Map<string, LayeredLayoutPosition> | null {
+  if (nodes.length === 0) return new Map();
+  if (!Number.isFinite(opts.targetAspectRatio) || opts.targetAspectRatio <= 0) {
+    return computeLayeredLayout(nodes, links, opts);
+  }
+
+  const maxIterations = opts.maxIterations ?? DEFAULT_MAX_ITERATIONS;
+  const tolerance = opts.tolerance ?? DEFAULT_TOLERANCE;
+  const rankdir = opts.rankdir ?? DEFAULT_RANKDIR;
+  const isHorizontalFlow = rankdir === "LR" || rankdir === "RL";
+
+  let nodesep = opts.nodesep ?? DEFAULT_NODESEP;
+  let ranksep = opts.ranksep ?? DEFAULT_RANKSEP;
+
+  let best: DagreRunResult | null = null;
+
+  for (let i = 0; i < maxIterations; i++) {
+    const result = runDagreOnce(nodes, links, {
+      ...opts,
+      nodesep,
+      ranksep,
+    });
+    if (!result) return best ? best.positions : null;
+    best = result;
+
+    if (result.positions.size <= 1) return result.positions;
+
+    const { width, height } = result.bbox;
+    if (width === 0 || height === 0) return result.positions;
+
+    const currentAspect = width / height;
+    const ratio = opts.targetAspectRatio / currentAspect;
+
+    if (Math.abs(ratio - 1) < tolerance) return result.positions;
+
+    const factor = clamp(Math.sqrt(ratio), MIN_FACTOR, MAX_FACTOR);
+
+    if (isHorizontalFlow) {
+      ranksep = clamp(ranksep * factor, MIN_RANKSEP, MAX_RANKSEP);
+      nodesep = clamp(nodesep / factor, MIN_NODESEP, MAX_NODESEP);
+    } else {
+      ranksep = clamp(ranksep / factor, MIN_RANKSEP, MAX_RANKSEP);
+      nodesep = clamp(nodesep * factor, MIN_NODESEP, MAX_NODESEP);
+    }
+  }
+
+  return best ? best.positions : null;
 }

package/src/hooks/index.ts

@@ -37,6 +37,8 @@ export * from "./usePushNotifications";
 export * from "./useSocket";
 export {
   computeLayeredLayout,
+  fitLayeredLayoutToAspectRatio,
+  type FitLayeredLayoutOptions,
   type LayeredLayoutOptions,
   type LayeredLayoutPosition,
   type LayeredRankDir,

package/src/hooks/useCustomD3Graph.tsx

@@ -5,7 +5,28 @@ import { Loader2 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { D3Link, D3Node } from "../interfaces";
-import { computeLayeredLayout, type LayeredRankDir } from "./computeLayeredLayout";
+import { computeLayeredLayout, fitLayeredLayoutToAspectRatio, type LayeredRankDir } from "./computeLayeredLayout";
+
+// Heuristic estimate of a node label's rendered width, used to size the
+// force-collision radius so that long titles like "Investigative Journalism
+// Class" do not overlap neighbouring circles. Mirrors the constants in
+// computeLayeredLayout.ts — the small duplication is intentional, the
+// heuristic may evolve per-layout-context.
+const TITLE_PX_PER_CHAR_16 = 8;
+const NAME_PX_PER_CHAR_12 = 6.5;
+const NAME_PX_PER_CHAR_16_BOLD = 8;
+const SUBTITLE_PX_PER_CHAR_11 = 6;
+const LABEL_PADDING_PX = 16;
+
+function estimateLabelWidth(node: D3Node): number {
+  if (node.subtitle) {
+    const titleWidth = (node.name?.length ?? 0) * TITLE_PX_PER_CHAR_16;
+    const subtitleWidth = node.subtitle.length * SUBTITLE_PX_PER_CHAR_11;
+    return Math.max(titleWidth, subtitleWidth) + LABEL_PADDING_PX;
+  }
+  const perChar = node.bold ? NAME_PX_PER_CHAR_16_BOLD : NAME_PX_PER_CHAR_12;
+  return (node.name?.length ?? 0) * perChar + LABEL_PADDING_PX;
+}
 
 /**
  * Custom hook for D3 graph visualization with larger circles and more interactive features
@@ -22,6 +43,7 @@ export function useCustomD3Graph(
       rankdir?: LayeredRankDir;
       nodesep?: number;
       ranksep?: number;
+      fitContainer?: boolean;
     };
   },
   loadingNodeIds?: Set<string>,
@@ -244,13 +266,23 @@ export function useCustomD3Graph(
 
     if (layoutMode === "layered") {
       const layeredOpts = options?.layered ?? {};
-      const positions = computeLayeredLayout(visibleNodes, visibleLinks, {
-        rankdir: layeredOpts.rankdir ?? "LR",
-        nodesep: layeredOpts.nodesep,
-        ranksep: layeredOpts.ranksep,
-        minNodeWidth: nodeRadius * 2,
-        minNodeHeight: nodeRadius * 2,
-      });
+      const useFit = layeredOpts.fitContainer === true && width > 0 && height > 0;
+      const positions = useFit
+        ? fitLayeredLayoutToAspectRatio(visibleNodes, visibleLinks, {
+            rankdir: layeredOpts.rankdir ?? "LR",
+            nodesep: layeredOpts.nodesep,
+            ranksep: layeredOpts.ranksep,
+            minNodeWidth: nodeRadius * 2,
+            minNodeHeight: nodeRadius * 2,
+            targetAspectRatio: width / height,
+          })
+        : computeLayeredLayout(visibleNodes, visibleLinks, {
+            rankdir: layeredOpts.rankdir ?? "LR",
+            nodesep: layeredOpts.nodesep,
+            ranksep: layeredOpts.ranksep,
+            minNodeWidth: nodeRadius * 2,
+            minNodeHeight: nodeRadius * 2,
+          });
 
       if (positions) {
         visibleNodes.forEach((node) => {
@@ -445,12 +477,15 @@ export function useCustomD3Graph(
             .distance(nodeRadius * 3)
             .strength(0.1),
         )
-        .force("charge", d3.forceManyBody().strength(-500).distanceMax(300))
-        .force("collision", d3.forceCollide().radius(nodeRadius * 1.2))
+        .force("charge", d3.forceManyBody().strength(-2500).distanceMax(800))
+        .force(
+          "collision",
+          d3.forceCollide<D3Node>().radius((d) => Math.max(nodeRadius * 1.1, estimateLabelWidth(d) / 2 + 8)),
+        )
         .force("center", d3.forceCenter(width / 2, height / 2).strength(0.1));
 
       simulation.stop();
-      for (let i = 0; i < 100; i++) {
+      for (let i = 0; i < 300; i++) {
         simulation.tick();
       }
 
@@ -785,6 +820,7 @@ export function useCustomD3Graph(
     options?.layered?.rankdir,
     options?.layered?.nodesep,
     options?.layered?.ranksep,
+    options?.layered?.fitContainer,
     loadingNodeIds,
     onNodeClick,
   ]);