@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/network/SugiyamaDagChart.js

@@ -0,0 +1,170 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { EdgeRouter } from "./EdgeRouter.js";
+import { LabelPlacer } from "./LabelPlacer.js";
+import { NetworkEdge, NetworkFlip } from "./networkEnums.js";
+import { NetworkChart } from "./NetworkChart.js";
+import { NetworkSamples } from "./NetworkSamples.js";
+import { DagCoordinates, DagCrossing, DagLayering, SugiyamaLayout } from "./SugiyamaLayout.js";
+// src/charts/network/SugiyamaDagChart.ts
+var DagNodeStyle = /* @__PURE__ */ function(DagNodeStyle) {
+	DagNodeStyle["Pill"] = "pill";
+	DagNodeStyle["Dot"] = "dot";
+	return DagNodeStyle;
+}({});
+/** Layered drawing of directed graphs: pipelines, dependencies, workflows, anything with an up and a down. */
+var SugiyamaDagChart = class extends NetworkChart {
+	static meta = {
+		id: "sugiyama-dag",
+		name: "Layered DAG",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Lays a directed graph out in layers with few crossings, for pipelines, dependencies and workflows.",
+		tags: [
+			"network",
+			"dag",
+			"sugiyama",
+			"layered",
+			"dependency",
+			"workflow"
+		],
+		sample: (seed) => NetworkSamples.dag(seed),
+		variants: {
+			layering: [
+				DagLayering.LongestPath,
+				DagLayering.Sink,
+				DagLayering.Balanced
+			],
+			crossing: [
+				DagCrossing.Median,
+				DagCrossing.Barycentre,
+				DagCrossing.None
+			],
+			coordinates: [DagCoordinates.Aligned, DagCoordinates.Centred],
+			routing: [
+				NetworkEdge.Bundled,
+				NetworkEdge.Bump,
+				NetworkEdge.Straight,
+				NetworkEdge.Orthogonal
+			],
+			orientation: [NetworkFlip.Vertical, NetworkFlip.Horizontal]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			layering: DagLayering.LongestPath,
+			crossing: DagCrossing.Median,
+			coordinates: DagCoordinates.Aligned,
+			routing: NetworkEdge.Bundled,
+			orientation: NetworkFlip.Vertical,
+			nodeStyle: "pill"
+		};
+	}
+	drawNetwork(ctx, model) {
+		const { layering, crossing, coordinates, routing, orientation, nodeStyle } = this.options;
+		const plan = new SugiyamaLayout(model, layering, crossing, coordinates).plan();
+		const vertical = orientation === NetworkFlip.Vertical, pills = nodeStyle === "pill";
+		const { width, height } = ctx.plot;
+		const every = plan.layers.flat(), low = Math.min(...every.map((v) => v.at)), high = Math.max(...every.map((v) => v.at));
+		const depth = vertical ? height : width, breadth = vertical ? width : height;
+		const cellAlong = breadth / Math.max(1, ...plan.layers.map((layer) => layer.length)), cellDepth = depth / Math.max(1, plan.layers.length);
+		const pillHeight = Math.min(22, Math.max(14, (vertical ? cellDepth : cellAlong) - 8));
+		const longest = Math.max(...model.nodes.map((node) => node.label.length)) * 6.2 + 14;
+		const pillWidth = Math.max(18, Math.min(longest, (vertical ? cellAlong : cellDepth) - 8, 110));
+		const padDepth = (vertical ? pillHeight : pillWidth) / 2 + 2, padAlong = (vertical ? pillWidth : pillHeight) / 2 + 2;
+		const spot = (v) => {
+			const t = high > low ? (v.at - low) / (high - low) : .5;
+			const along = padAlong + t * (breadth - padAlong * 2);
+			const down = padDepth + (plan.layers.length > 1 ? v.layer / (plan.layers.length - 1) : .5) * (depth - padDepth * 2);
+			return vertical ? {
+				x: along,
+				y: down
+			} : {
+				x: down,
+				y: along
+			};
+		};
+		const dot = 6, end = pills ? vertical ? pillHeight / 2 : pillWidth / 2 : dot;
+		const thick = this.widths(model, false), center = {
+			x: width / 2,
+			y: height / 2
+		}, axis = vertical ? "y" : "x";
+		const edges = plan.edges.map(({ link, chain }) => {
+			const points = chain.map(spot), a = points[0], b = points[points.length - 1];
+			const base = {
+				color: ctx.theme.inkMuted,
+				opacity: .6,
+				width: thick(link),
+				link
+			};
+			if (routing === NetworkEdge.Bundled) return {
+				...base,
+				...EdgeRouter.route(routing, {
+					a,
+					b,
+					ra: 0,
+					rb: end,
+					center,
+					arrow: true,
+					axis,
+					via: points.slice(1, -1),
+					bundle: 1
+				})
+			};
+			const parts = points.slice(1).map((point, i) => EdgeRouter.route(routing, {
+				a: points[i],
+				b: point,
+				ra: 0,
+				rb: i === points.length - 2 ? end : 0,
+				center,
+				arrow: i === points.length - 2,
+				axis
+			}));
+			return {
+				...base,
+				d: parts.map((part) => part.d).join(""),
+				tip: parts[parts.length - 1].tip
+			};
+		});
+		const paths = this.paintEdges(ctx, edges);
+		const nodes = model.nodes.map((node) => ({
+			node,
+			...spot(plan.vertices.get(node.id))
+		}));
+		const dots = pills ? [] : nodes.map((d) => ({
+			...d,
+			r: dot
+		}));
+		this.paintNodes(ctx, model, dots, paths);
+		this.paintLabels(ctx, dots);
+		const blocks = pills ? nodes.map((d) => ({
+			...d,
+			width: pillWidth,
+			height: pillHeight,
+			text: LabelPlacer.clip(d.node.label, pillWidth - 10)
+		})) : [];
+		const rects = ctx.marks("pills", "rect", blocks, (d) => d.node.id).attr("rx", Math.min(6, pillHeight / 2)).attr("fill", (d) => ctx.palette.color(d.node.group));
+		const box = {
+			x: (d) => d.x - d.width / 2,
+			y: (d) => d.y - d.height / 2,
+			width: (d) => d.width,
+			height: (d) => d.height
+		};
+		ctx.set(rects, box, {
+			...box,
+			width: 0
+		}, 12);
+		ctx.hover(rects, (d) => this.nodeTip(ctx, d.node));
+		const text = ctx.marks("pill-text", "text", blocks, (d) => d.node.id).text((d) => d.text).attr("text-anchor", "middle").attr("dy", "0.32em").attr("pointer-events", "none");
+		ctx.text(text, 11, "ink").attr("fill", (d) => ctx.palette.inkOn(ctx.palette.color(d.node.group)));
+		ctx.set(text, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		}, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+};
+export { DagNodeStyle, SugiyamaDagChart };

package/dist/charts/network/SugiyamaLayout.js

@@ -0,0 +1,210 @@
+import { ascending, median } from "d3";
+// src/charts/network/SugiyamaLayout.ts
+var DagLayering = /* @__PURE__ */ function(DagLayering) {
+	DagLayering["LongestPath"] = "longest-path";
+	DagLayering["Sink"] = "sink-aligned";
+	DagLayering["Balanced"] = "balanced";
+	return DagLayering;
+}({});
+var DagCrossing = /* @__PURE__ */ function(DagCrossing) {
+	DagCrossing["Median"] = "median";
+	DagCrossing["Barycentre"] = "barycentre";
+	DagCrossing["None"] = "none";
+	return DagCrossing;
+}({});
+var DagCoordinates = /* @__PURE__ */ function(DagCoordinates) {
+	DagCoordinates["Aligned"] = "aligned";
+	DagCoordinates["Centred"] = "centred";
+	return DagCoordinates;
+}({});
+/** The Sugiyama pipeline: break cycles, assign layers, insert dummies, reduce crossings, assign coordinates. */
+var SugiyamaLayout = class {
+	model;
+	layering;
+	crossing;
+	coordinates;
+	constructor(model, layering, crossing, coordinates) {
+		this.model = model;
+		this.layering = layering;
+		this.crossing = crossing;
+		this.coordinates = coordinates;
+	}
+	plan() {
+		const { model } = this;
+		const reversed = this.backEdges();
+		const forward = model.links.map((link) => reversed.has(link.key) ? {
+			a: link.target,
+			b: link.source,
+			link
+		} : {
+			a: link.source,
+			b: link.target,
+			link
+		});
+		const ranks = this.rank(forward);
+		const layers = [];
+		const add = (vertex) => {
+			(layers[vertex.layer] ??= []).push(vertex);
+			return vertex;
+		};
+		const vertices = new Map(model.nodes.map((node) => [node.id, add({
+			node,
+			layer: ranks[node.index],
+			at: 0,
+			order: 0,
+			up: [],
+			down: []
+		})]));
+		const edges = forward.map(({ a, b, link }) => {
+			const start = vertices.get(a.id), end = vertices.get(b.id), chain = [start];
+			for (let layer = start.layer + 1; layer < end.layer; layer++) chain.push(add({
+				layer,
+				at: 0,
+				order: 0,
+				up: [],
+				down: []
+			}));
+			chain.push(end);
+			for (let i = 1; i < chain.length; i++) {
+				chain[i - 1].down.push(chain[i]);
+				chain[i].up.push(chain[i - 1]);
+			}
+			return {
+				link,
+				chain: reversed.has(link.key) ? [...chain].reverse() : chain
+			};
+		});
+		const full = Array.from({ length: layers.length }, (_, i) => layers[i] ?? []);
+		this.order(full);
+		this.place(full);
+		return {
+			layers: full,
+			vertices,
+			edges
+		};
+	}
+	/** Depth-first search; any link into a node still on the stack is a back edge. */
+	backEdges() {
+		const state = /* @__PURE__ */ new Map(), back = /* @__PURE__ */ new Set();
+		const outgoing = /* @__PURE__ */ new Map();
+		for (const link of this.model.links) outgoing.set(link.source.index, [...outgoing.get(link.source.index) ?? [], link]);
+		for (const root of this.model.nodes) {
+			if (state.has(root.index)) continue;
+			const stack = [{
+				index: root.index,
+				next: 0
+			}];
+			state.set(root.index, 1);
+			while (stack.length) {
+				const top = stack[stack.length - 1], link = outgoing.get(top.index)?.[top.next++];
+				if (!link) {
+					state.set(top.index, 2);
+					stack.pop();
+					continue;
+				}
+				const mark = state.get(link.target.index);
+				if (mark === 1) back.add(link.key);
+				else if (!mark) {
+					state.set(link.target.index, 1);
+					stack.push({
+						index: link.target.index,
+						next: 0
+					});
+				}
+			}
+		}
+		return back;
+	}
+	rank(edges) {
+		const n = this.model.nodes.length, incoming = new Array(n).fill(0), next = Array.from({ length: n }, () => []), prior = Array.from({ length: n }, () => []);
+		for (const { a, b } of edges) {
+			incoming[b.index]++;
+			next[a.index].push(b.index);
+			prior[b.index].push(a.index);
+		}
+		const topo = incoming.flatMap((count, i) => count ? [] : [i]);
+		for (let head = 0; head < topo.length; head++) for (const b of next[topo[head]]) if (--incoming[b] === 0) topo.push(b);
+		const ranks = new Array(n).fill(0);
+		for (const a of topo) for (const b of next[a]) ranks[b] = Math.max(ranks[b], ranks[a] + 1);
+		const last = Math.max(0, ...ranks);
+		if (this.layering === "longest-path") return ranks;
+		const late = new Array(n).fill(last);
+		for (const b of [...topo].reverse()) for (const a of prior[b]) late[a] = Math.min(late[a], late[b] - 1);
+		if (this.layering === "sink-aligned") return late;
+		const load = new Array(last + 1).fill(0);
+		for (const rank of ranks) load[rank]++;
+		for (const i of [...topo].reverse()) {
+			const low = ranks[i], high = next[i].length ? Math.min(...next[i].map((b) => ranks[b])) - 1 : last;
+			let best = low;
+			for (let layer = low; layer <= high; layer++) if (load[layer] < load[best] - 1) best = layer;
+			load[ranks[i]]--;
+			load[best]++;
+			ranks[i] = best;
+		}
+		return ranks;
+	}
+	crossings(layers) {
+		let total = 0;
+		for (let l = 0; l + 1 < layers.length; l++) {
+			layers[l + 1].forEach((vertex, i) => {
+				vertex.order = i;
+			});
+			const ends = layers[l].flatMap((vertex) => [...vertex.down].sort((a, b) => a.order - b.order).map((d) => d.order));
+			for (let i = 0; i < ends.length; i++) for (let j = i + 1; j < ends.length; j++) if (ends[i] > ends[j]) total++;
+		}
+		return total;
+	}
+	order(layers) {
+		const number = () => layers.forEach((layer) => layer.forEach((vertex, i) => {
+			vertex.order = i;
+		}));
+		number();
+		if (this.crossing === "none") return;
+		const score = this.crossing === "median" ? (list) => median(list) : (list) => list.reduce((a, b) => a + b, 0) / list.length;
+		const sweep = (layer, side) => {
+			layer.forEach((vertex, i) => {
+				vertex.at = side(vertex).length ? score(side(vertex).map((v) => v.order)) : i;
+			});
+			layer.sort((a, b) => ascending(a.at, b.at) || a.order - b.order).forEach((vertex, i) => {
+				vertex.order = i;
+			});
+		};
+		let best = layers.map((layer) => [...layer]), least = this.crossings(layers);
+		for (let round = 0; round < 12 && least > 0; round++) {
+			for (let l = 1; l < layers.length; l++) sweep(layers[l], (vertex) => vertex.up);
+			for (let l = layers.length - 2; l >= 0; l--) sweep(layers[l], (vertex) => vertex.down);
+			const count = this.crossings(layers);
+			if (count < least) {
+				least = count;
+				best = layers.map((layer) => [...layer]);
+			}
+		}
+		best.forEach((layer, l) => {
+			layers[l] = layer;
+		});
+		number();
+	}
+	place(layers) {
+		for (const layer of layers) layer.forEach((vertex, i) => {
+			vertex.at = i - (layer.length - 1) / 2;
+		});
+		if (this.coordinates === "centred") return;
+		const settle = (layer, side) => {
+			const wish = layer.map((vertex) => {
+				const near = [...side(vertex)];
+				return near.length ? near.reduce((sum, v) => sum + v.at, 0) / near.length : vertex.at;
+			});
+			const low = [...wish], high = [...wish];
+			for (let i = 1; i < low.length; i++) low[i] = Math.max(low[i], low[i - 1] + 1);
+			for (let i = high.length - 2; i >= 0; i--) high[i] = Math.min(high[i], high[i + 1] - 1);
+			layer.forEach((vertex, i) => {
+				vertex.at = (low[i] + high[i]) / 2;
+			});
+		};
+		for (let round = 0; round < 10; round++) {
+			for (let l = 1; l < layers.length; l++) settle(layers[l], (vertex) => vertex.up);
+			for (let l = layers.length - 2; l >= 0; l--) settle(layers[l], (vertex) => vertex.down);
+		}
+	}
+};
+export { DagCoordinates, DagCrossing, DagLayering, SugiyamaLayout };

package/dist/charts/network/TreeOfNetwork.js

@@ -0,0 +1,241 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GraphCommunities } from "./GraphCommunities.js";
+import { GraphLayouts } from "./GraphLayouts.js";
+import { NetworkCommunity } from "./networkEnums.js";
+import { NetworkChart } from "./NetworkChart.js";
+import { NetworkSamples } from "./NetworkSamples.js";
+import { cluster, hierarchy } from "d3";
+// src/charts/network/TreeOfNetwork.ts
+var TreeNetworkLayout = /* @__PURE__ */ function(TreeNetworkLayout) {
+	TreeNetworkLayout["Vertical"] = "vertical";
+	TreeNetworkLayout["Horizontal"] = "horizontal";
+	TreeNetworkLayout["Radial"] = "radial";
+	return TreeNetworkLayout;
+}({});
+/** Layout inside each leaf pod. */
+var PodLayout = /* @__PURE__ */ function(PodLayout) {
+	PodLayout["Ring"] = "ring";
+	PodLayout["Force"] = "force";
+	return PodLayout;
+}({});
+var TreeTrunk = /* @__PURE__ */ function(TreeTrunk) {
+	TreeTrunk["Elbow"] = "elbow";
+	TreeTrunk["Straight"] = "straight";
+	return TreeTrunk;
+}({});
+/** A tree whose leaves are small networks: for org charts and systems where hierarchy holds local clusters. */
+var TreeOfNetwork = class extends NetworkChart {
+	static meta = {
+		id: "tree-of-network",
+		name: "Tree of networks",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Arranges a graph’s communities as leaves of a tree, each drawn as its own small network.",
+		tags: [
+			"network",
+			"compound graph",
+			"tree",
+			"hierarchy",
+			"pods"
+		],
+		sample: (seed) => NetworkSamples.clustered(seed, 40, 3),
+		variants: {
+			layout: [
+				"vertical",
+				"horizontal",
+				"radial"
+			],
+			pod: ["ring", "force"],
+			trunk: ["elbow", "straight"],
+			bridges: [false, true],
+			scaled: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			layout: "vertical",
+			pod: "ring",
+			trunk: "elbow",
+			bridges: false,
+			scaled: true
+		};
+	}
+	branches(model) {
+		return {
+			name: "All",
+			children: model.groups.map((group) => {
+				const members = model.nodes.filter((node) => node.group === group), sub = model.subgraph(members);
+				const labels = members.length > 5 ? GraphCommunities.label(sub, NetworkCommunity.Louvain) : members.map(() => 0);
+				return {
+					name: group,
+					children: [...new Set(labels)].map((label) => ({
+						name: `${group}/${label}`,
+						members: members.filter((_, i) => labels[i] === label)
+					}))
+				};
+			})
+		};
+	}
+	pods(root, spot, slot) {
+		const leaves = root.leaves(), top = Math.max(...leaves.map((leaf) => leaf.data.members.length));
+		return leaves.map((leaf) => {
+			const members = leaf.data.members, share = this.options.scaled ? Math.sqrt(members.length / top) : 1;
+			return {
+				key: leaf.data.name,
+				group: members[0].group,
+				members,
+				r: Math.max(9, slot * share),
+				...spot(leaf)
+			};
+		});
+	}
+	podPoints(pod, model, dot) {
+		const sub = model.subgraph(pod.members), inset = pod.r - dot - 2;
+		if (pod.members.length === 1) return [{
+			x: pod.x,
+			y: pod.y
+		}];
+		if (this.options.pod === "force") {
+			const box = {
+				width: inset * 2,
+				height: inset * 2
+			}, radii = pod.members.map(() => dot);
+			return GraphLayouts.fit(GraphLayouts.force(sub, {
+				box,
+				radii,
+				ticks: 160,
+				gravity: .12
+			}), box, dot, 1).map(({ x, y }) => {
+				const dx = x - inset, dy = y - inset, far = Math.hypot(dx, dy), pull = far > inset ? inset / far : 1;
+				return {
+					x: pod.x + dx * pull,
+					y: pod.y + dy * pull
+				};
+			});
+		}
+		return pod.members.map((_, i) => {
+			const turn = i / pod.members.length * 2 * Math.PI - Math.PI / 2;
+			return {
+				x: pod.x + Math.cos(turn) * inset,
+				y: pod.y + Math.sin(turn) * inset
+			};
+		});
+	}
+	drawNetwork(ctx, model) {
+		const { layout, trunk, bridges } = this.options;
+		const { width, height } = ctx.plot, radial = layout === "radial", vertical = layout === "vertical";
+		const root = hierarchy(this.branches(model));
+		const count = root.leaves().length, depth = root.height || 1;
+		const side = Math.min(width, height) / 2;
+		const slot = radial ? Math.min(Math.PI * side / (count + Math.PI) * .88, side * .24) : Math.min((vertical ? width : height) / count * .46, (vertical ? height : width) / (depth + 1) * .5);
+		const laid = cluster().size(radial ? [2 * Math.PI, side - slot - 2] : vertical ? [width, height - slot * 2 - 2] : [height, width - slot * 2 - 2]).separation(() => 1)(root);
+		const spot = (d) => {
+			if (radial) return {
+				x: width / 2 + Math.sin(d.x) * d.y,
+				y: height / 2 - Math.cos(d.x) * d.y
+			};
+			return vertical ? {
+				x: d.x,
+				y: d.y + 6
+			} : {
+				x: d.y + 6,
+				y: d.x
+			};
+		};
+		const pods = this.pods(laid, spot, slot);
+		const trunks = laid.links().map((link) => {
+			const a = spot(link.source), b = spot(link.target), key = link.target.data.name;
+			if (trunk === "straight") return {
+				key,
+				d: `M${a.x.toFixed(2)},${a.y.toFixed(2)}L${b.x.toFixed(2)},${b.y.toFixed(2)}`
+			};
+			if (radial) {
+				const m = (link.source.y + link.target.y) / 2, c = spot({
+					x: link.target.x,
+					y: m
+				});
+				return {
+					key,
+					d: `M${a.x.toFixed(2)},${a.y.toFixed(2)}Q${c.x.toFixed(2)},${c.y.toFixed(2)} ${b.x.toFixed(2)},${b.y.toFixed(2)}`
+				};
+			}
+			return {
+				key,
+				d: vertical ? `M${a.x.toFixed(2)},${a.y.toFixed(2)}V${((a.y + b.y) / 2).toFixed(2)}H${b.x.toFixed(2)}V${b.y.toFixed(2)}` : `M${a.x.toFixed(2)},${a.y.toFixed(2)}H${((a.x + b.x) / 2).toFixed(2)}V${b.y.toFixed(2)}H${b.x.toFixed(2)}`
+			};
+		});
+		const lines = ctx.marks("trunk", "path", trunks, (d) => d.key).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(lines, { d: (d) => d.d }, { d: (d) => d.d });
+		const shells = ctx.marks("pods", "circle", pods, (d) => d.key).attr("fill", ctx.theme.surface).attr("stroke", (d) => ctx.palette.color(d.group)).attr("stroke-opacity", .45).attr("stroke-width", 1.5);
+		ctx.set(shells, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: (d) => d.r
+		}, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 0
+		}, 20);
+		ctx.hover(shells, (d) => ({
+			title: d.group,
+			color: ctx.palette.color(d.group),
+			rows: [["Members", d.members.length]]
+		}));
+		const placed = pods.flatMap((pod) => {
+			const dot = Math.max(2.2, Math.min(4, pod.r / Math.max(3, Math.sqrt(pod.members.length) * 1.6)));
+			const points = this.podPoints(pod, model, dot);
+			return pod.members.map((node, i) => ({
+				node,
+				r: dot,
+				...points[i]
+			}));
+		});
+		const at = new Map(placed.map((d) => [d.node.id, d]));
+		const podOf = new Map(pods.flatMap((pod) => pod.members.map((node) => [node.id, pod])));
+		const edges = model.links.filter((link) => bridges || podOf.get(link.source.id) === podOf.get(link.target.id)).map((link) => {
+			const a = at.get(link.source.id), b = at.get(link.target.id), same = podOf.get(link.source.id) === podOf.get(link.target.id);
+			const mid = {
+				x: (a.x + b.x) / 2 + (width / 2 - (a.x + b.x) / 2) * (radial ? .5 : 0),
+				y: (a.y + b.y) / 2 + (vertical ? -Math.abs(a.x - b.x) * .25 : 0)
+			};
+			return {
+				link,
+				d: same ? `M${a.x.toFixed(2)},${a.y.toFixed(2)}L${b.x.toFixed(2)},${b.y.toFixed(2)}` : `M${a.x.toFixed(2)},${a.y.toFixed(2)}Q${mid.x.toFixed(2)},${mid.y.toFixed(2)} ${b.x.toFixed(2)},${b.y.toFixed(2)}`,
+				width: same ? 1.25 : 1,
+				...this.edgeTone(ctx, link),
+				opacity: same ? .6 : .3
+			};
+		});
+		const paths = this.paintEdges(ctx, edges);
+		this.paintNodes(ctx, model, placed, paths);
+		const hubs = laid.descendants().filter((d) => d.depth === 1 || d.depth === 0);
+		const knots = ctx.marks("knots", "circle", hubs, (d) => d.data.name).attr("fill", (d) => d.depth ? ctx.palette.color(d.data.name) : ctx.theme.inkMuted).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(knots, {
+			cx: (d) => spot(d).x,
+			cy: (d) => spot(d).y,
+			r: (d) => d.depth ? 5 : 6
+		}, {
+			cx: (d) => spot(d).x,
+			cy: (d) => spot(d).y,
+			r: 0
+		});
+		ctx.hover(knots, (d) => ({
+			title: d.data.name,
+			rows: [["Pods", d.leaves().length]]
+		}));
+		const tags = hubs.filter((d) => d.depth === 1).map((d) => {
+			const { x, y } = spot(d);
+			return {
+				key: d.data.name,
+				text: d.data.name.slice(0, 12),
+				x: radial ? x : vertical ? x + 8 : x,
+				y: radial ? y - 11 : vertical ? y - 9 : y - 11,
+				anchor: vertical ? "start" : "middle"
+			};
+		});
+		this.paintAxisLabels(ctx, tags);
+	}
+};
+export { PodLayout, TreeNetworkLayout, TreeOfNetwork, TreeTrunk };

package/dist/charts/network/index.js

@@ -0,0 +1,53 @@
+import { NetworkCommunity, NetworkEdge, NetworkFlip, NetworkMetric, NetworkOrder, NetworkSpanning } from "./networkEnums.js";
+import { NetworkModel } from "./NetworkModel.js";
+import { NetworkChart } from "./NetworkChart.js";
+import { AdjacencyMatrixChart, MatrixMark, MatrixSymmetry, MatrixWeight } from "./AdjacencyMatrixChart.js";
+import { ArcCurve, ArcDiagram, ArcSide } from "./ArcDiagram.js";
+import { BioFabricChart, BioFabricEdges } from "./BioFabricChart.js";
+import { NodeLinkNetwork } from "./NodeLinkNetwork.js";
+import { BipartiteChart, BipartiteLayout, BipartiteOrder } from "./BipartiteChart.js";
+import { ChordAggregate, ChordDiagram, ChordRibbon, ChordSort } from "./ChordDiagram.js";
+import { CircularArrangement, CircularLayoutGraph } from "./CircularLayoutGraph.js";
+import { ClusterArrangement, ClusterHull, ClusteredForceChart } from "./ClusteredForceChart.js";
+import { CommunityChart, CommunityLinkage, CommunitySize, CommunityView } from "./CommunityChart.js";
+import { ContactForm, ContactMap, ContactMark } from "./ContactMap.js";
+import { EgoLayout, EgoNetworkChart } from "./EgoNetworkChart.js";
+import { ForceConstraint, ForceGraphChart } from "./ForceGraphChart.js";
+import { GeoFreeNodeLink, GeoFreeProjection, GeoFreeRoute } from "./GeoFreeNodeLink.js";
+import { GridLattice, GridLayoutGraph, GridPlacement } from "./GridLayoutGraph.js";
+import { BoxBridges, BoxInner, BoxSize, BoxTile, GroupInABox } from "./GroupInABox.js";
+import { BundleHierarchy, BundleLayout, BundleSort, HierarchicalEdgeBundling } from "./HierarchicalEdgeBundling.js";
+import { HiveAxis, HiveChart, HiveEdge, HivePosition } from "./HiveChart.js";
+import { PivotGraph, PivotMeasure } from "./PivotGraph.js";
+import { RadialNetwork, RadialRing, RadialSweep } from "./RadialNetwork.js";
+import { SpanningLayout, SpanningTreeChart } from "./SpanningTreeChart.js";
+import { StressAlgorithm, StressLayoutGraph } from "./StressLayoutGraph.js";
+import { DagCoordinates, DagCrossing, DagLayering } from "./SugiyamaLayout.js";
+import { DagNodeStyle, SugiyamaDagChart } from "./SugiyamaDagChart.js";
+import { PodLayout, TreeNetworkLayout, TreeOfNetwork, TreeTrunk } from "./TreeOfNetwork.js";
+// src/charts/network/index.ts
+var networkCatalog = [
+	ForceGraphChart,
+	ClusteredForceChart,
+	StressLayoutGraph,
+	CommunityChart,
+	EgoNetworkChart,
+	RadialNetwork,
+	CircularLayoutGraph,
+	GridLayoutGraph,
+	BipartiteChart,
+	SugiyamaDagChart,
+	SpanningTreeChart,
+	TreeOfNetwork,
+	GroupInABox,
+	PivotGraph,
+	GeoFreeNodeLink,
+	ArcDiagram,
+	BioFabricChart,
+	HiveChart,
+	ChordDiagram,
+	HierarchicalEdgeBundling,
+	AdjacencyMatrixChart,
+	ContactMap
+];
+export { AdjacencyMatrixChart, ArcCurve, ArcDiagram, ArcSide, BioFabricChart, BioFabricEdges, BipartiteChart, BipartiteLayout, BipartiteOrder, BoxBridges, BoxInner, BoxSize, BoxTile, BundleHierarchy, BundleLayout, BundleSort, ChordAggregate, ChordDiagram, ChordRibbon, ChordSort, CircularArrangement, CircularLayoutGraph, ClusterArrangement, ClusterHull, ClusteredForceChart, CommunityChart, CommunityLinkage, CommunitySize, CommunityView, ContactForm, ContactMap, ContactMark, DagCoordinates, DagCrossing, DagLayering, DagNodeStyle, EgoLayout, EgoNetworkChart, ForceConstraint, ForceGraphChart, GeoFreeNodeLink, GeoFreeProjection, GeoFreeRoute, GridLattice, GridLayoutGraph, GridPlacement, GroupInABox, HierarchicalEdgeBundling, HiveAxis, HiveChart, HiveEdge, HivePosition, MatrixMark, MatrixSymmetry, MatrixWeight, NetworkChart, NetworkCommunity, NetworkEdge, NetworkFlip, NetworkMetric, NetworkModel, NetworkOrder, NetworkSpanning, NodeLinkNetwork, PivotGraph, PivotMeasure, PodLayout, RadialNetwork, RadialRing, RadialSweep, SpanningLayout, SpanningTreeChart, StressAlgorithm, StressLayoutGraph, SugiyamaDagChart, TreeNetworkLayout, TreeOfNetwork, TreeTrunk, networkCatalog };