@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/flow/SwimFlowChart.js

@@ -0,0 +1,191 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FlowDirection, FlowRouter, FlowSort } from "./flowEnums.js";
+import { FlowGeometry } from "./FlowPathKit.js";
+import { FlowSamples } from "./FlowSamples.js";
+import { FlowTable } from "./FlowTable.js";
+import { LayeredLayout } from "./LayeredLayout.js";
+import { FlowNodeShape, NodeLinkChart } from "./FlowNodeLinkChart.js";
+import { mean } from "d3";
+// src/charts/flow/SwimFlowChart.ts
+/** `Ranked` shares columns between parallel steps; `Sequential` gives every step its own column. */
+var SwimSpacing = /* @__PURE__ */ function(SwimSpacing) {
+	SwimSpacing["Ranked"] = "ranked";
+	SwimSpacing["Sequential"] = "sequential";
+	return SwimSpacing;
+}({});
+/** `Input` keeps lanes as given; `Flow` orders them by when work reaches them. */
+var SwimLaneOrder = /* @__PURE__ */ function(SwimLaneOrder) {
+	SwimLaneOrder["Input"] = "input";
+	SwimLaneOrder["Flow"] = "flow";
+	return SwimLaneOrder;
+}({});
+var SwimHeader = /* @__PURE__ */ function(SwimHeader) {
+	SwimHeader["Band"] = "band";
+	SwimHeader["Inline"] = "inline";
+	return SwimHeader;
+}({});
+/** Show who does what in a process that crosses teams: one lane per owner, with work moving across lanes. */
+var SwimFlowChart = class extends NodeLinkChart {
+	static meta = {
+		id: "swim-flow",
+		name: "Swimlane flow",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "A process diagram divided into lanes, one per team or system, so handoffs stand out.",
+		tags: [
+			"swimlane",
+			"cross-functional",
+			"handoff",
+			"bpmn"
+		],
+		sample: (seed) => {
+			const graph = FlowSamples.network(seed, 11, 3);
+			return {
+				...graph,
+				nodes: [...graph.nodes].reverse()
+			};
+		},
+		variants: {
+			direction: [FlowDirection.LeftRight, FlowDirection.TopBottom],
+			router: [
+				FlowRouter.Orthogonal,
+				FlowRouter.Curved,
+				FlowRouter.Straight
+			],
+			spacing: ["ranked", "sequential"],
+			laneOrder: ["input", "flow"],
+			header: ["band", "inline"],
+			nodeShape: [FlowNodeShape.Box, FlowNodeShape.Pill]
+		}
+	};
+	defaults() {
+		return {
+			direction: FlowDirection.LeftRight,
+			router: FlowRouter.Orthogonal,
+			spacing: "ranked",
+			laneOrder: "input",
+			header: "band",
+			nodeShape: FlowNodeShape.Box
+		};
+	}
+	plotMargin() {
+		return {
+			top: 6,
+			right: 8,
+			bottom: 8,
+			left: 8
+		};
+	}
+	draw(ctx) {
+		const { spacing, laneOrder, header, nodeShape } = this.options;
+		const vertical = this.vertical;
+		const to = this.toPlot;
+		const graph = this.graph(false);
+		const [length, breadth] = vertical ? [ctx.plot.height, ctx.plot.width] : [ctx.plot.width, ctx.plot.height];
+		const laneOf = (id) => graph.vertices.find((vertex) => vertex.id === id)?.group ?? "Unassigned";
+		const ranked = LayeredLayout.ranks(graph);
+		const order = [...graph.vertices].sort((a, b) => ranked.get(a.id) - ranked.get(b.id));
+		const column = new Map(spacing === "sequential" ? order.map((vertex, i) => [vertex.id, i]) : ranked);
+		const named = [...new Set(graph.vertices.map((vertex) => laneOf(vertex.id)))];
+		const lanes = laneOrder === "flow" ? FlowTable.sorted(named, FlowSort.Ascending, (name) => mean(graph.vertices.filter((vertex) => laneOf(vertex.id) === name), (vertex) => ranked.get(vertex.id)) ?? 0) : named;
+		const band = header === "band" ? vertical ? 22 : 72 : 0;
+		const start = vertical ? Math.max(band, 18) : band;
+		const columns = Math.max(0, ...column.values()) + 1;
+		const step = (length - start) / columns;
+		const laneSize = breadth / Math.max(1, lanes.length);
+		const cells = /* @__PURE__ */ new Map();
+		for (const vertex of order) {
+			const key = `${laneOf(vertex.id)}/${column.get(vertex.id)}`;
+			cells.set(key, [...cells.get(key) ?? [], vertex.id]);
+		}
+		const inline = header === "inline" && !vertical ? 14 : 0;
+		const along = Math.min(step * .74, vertical ? 34 : 96);
+		const peers = Math.max(1, ...[...cells.values()].map((list) => list.length));
+		const across = Math.min((laneSize - inline - 4) / peers - 6, vertical ? laneSize - 10 : Math.max(22, along));
+		const position = (id) => {
+			const lane = lanes.indexOf(laneOf(id)), list = cells.get(`${laneOf(id)}/${column.get(id)}`);
+			const each = (laneSize - inline) / list.length;
+			return [start + step * (column.get(id) + .5), lane * laneSize + inline + each * (list.indexOf(id) + .5)];
+		};
+		const stripes = lanes.map((name, i) => ({
+			name,
+			i
+		}));
+		const shade = ctx.marks("lanes", "path", stripes, (d) => d.name).attr("fill", ctx.theme.grid).attr("fill-opacity", (d) => d.i % 2 ? 0 : .45);
+		const stripe = (d) => FlowGeometry.polygon([
+			to(0, d.i * laneSize + 1),
+			to(length, d.i * laneSize + 1),
+			to(length, (d.i + 1) * laneSize - 1),
+			to(0, (d.i + 1) * laneSize - 1)
+		]);
+		ctx.set(shade, { d: stripe });
+		this.labels(ctx, "lane-names", stripes.map((lane) => {
+			if (header === "inline") {
+				const [x, y] = vertical ? [lane.i * laneSize + 6, 9] : [4, lane.i * laneSize + 10];
+				return {
+					key: lane.name,
+					x,
+					y,
+					text: FlowTable.fit(lane.name, laneSize - 8),
+					weight: 600
+				};
+			}
+			const [x, y] = to(vertical ? 11 : 6, (lane.i + .5) * laneSize);
+			return {
+				key: lane.name,
+				x,
+				y,
+				text: FlowTable.fit(lane.name, vertical ? laneSize - 8 : band - 10),
+				weight: 600,
+				tone: "ink",
+				anchor: vertical ? "middle" : "start"
+			};
+		}));
+		const half = along / 2;
+		const connectors = graph.arcs.filter((arc) => arc.source !== arc.target).map((arc) => {
+			const a = position(arc.source), b = position(arc.target);
+			const sign = Math.sign(b[0] - a[0]);
+			const key = `${arc.source}>${arc.target}`, tip = { title: `${arc.source} → ${arc.target}` };
+			if (sign) return {
+				key,
+				tip,
+				stops: [[a[0] + sign * half, a[1]], [b[0] - sign * half, b[1]]]
+			};
+			const down = Math.sign(b[1] - a[1]) || 1;
+			return {
+				key,
+				tip,
+				stops: [
+					[a[0] + half, a[1]],
+					[a[0] + half + 10, a[1]],
+					[a[0] + half + 10, b[1] - down * .01],
+					[b[0] + half, b[1]]
+				]
+			};
+		});
+		this.drawConnectors(ctx, connectors);
+		const boxes = graph.vertices.map((vertex) => {
+			const [u, v] = position(vertex.id);
+			return {
+				id: vertex.id,
+				label: vertex.label,
+				u,
+				v,
+				along,
+				across: Math.max(14, across),
+				shape: nodeShape,
+				fill: ctx.palette.color(laneOf(vertex.id)),
+				tip: {
+					title: vertex.label,
+					rows: [["Lane", laneOf(vertex.id)]]
+				}
+			};
+		});
+		this.drawBoxes(ctx, boxes);
+	}
+	legendItems() {
+		return [];
+	}
+};
+export { SwimFlowChart, SwimHeader, SwimLaneOrder, SwimSpacing };

package/dist/charts/flow/flowEnums.js

@@ -0,0 +1,51 @@
+// src/charts/flow/flowEnums.ts
+/** Silhouette of a filled band between two edges. */
+var FlowRibbon = /* @__PURE__ */ function(FlowRibbon) {
+	FlowRibbon["Curved"] = "curved";
+	FlowRibbon["Angular"] = "angular";
+	FlowRibbon["Shoulder"] = "shoulder";
+	return FlowRibbon;
+}({});
+/** Path of a connector line through its stops. */
+var FlowRouter = /* @__PURE__ */ function(FlowRouter) {
+	FlowRouter["Orthogonal"] = "orthogonal";
+	FlowRouter["Curved"] = "curved";
+	FlowRouter["Straight"] = "straight";
+	return FlowRouter;
+}({});
+/** How nodes along an axis are drawn. */
+var FlowNodeMark = /* @__PURE__ */ function(FlowNodeMark) {
+	FlowNodeMark["Bar"] = "bar";
+	FlowNodeMark["Hairline"] = "hairline";
+	return FlowNodeMark;
+}({});
+/** Ordering of categories, nodes or columns. */
+var FlowSort = /* @__PURE__ */ function(FlowSort) {
+	FlowSort["Input"] = "input";
+	FlowSort["Descending"] = "descending";
+	FlowSort["Ascending"] = "ascending";
+	FlowSort["Alpha"] = "alpha";
+	return FlowSort;
+}({});
+/** Direction of reading through a node-link diagram. */
+var FlowDirection = /* @__PURE__ */ function(FlowDirection) {
+	FlowDirection["LeftRight"] = "left-right";
+	FlowDirection["TopBottom"] = "top-bottom";
+	return FlowDirection;
+}({});
+/** Colour of a band: its source, its target, a blend of both or neutral ink. */
+var FlowPaint = /* @__PURE__ */ function(FlowPaint) {
+	FlowPaint["Source"] = "source";
+	FlowPaint["Target"] = "target";
+	FlowPaint["Gradient"] = "gradient";
+	FlowPaint["Neutral"] = "neutral";
+	return FlowPaint;
+}({});
+/** Vertical alignment of a column of marks. */
+var FlowBaseline = /* @__PURE__ */ function(FlowBaseline) {
+	FlowBaseline["Center"] = "center";
+	FlowBaseline["Top"] = "top";
+	FlowBaseline["Bottom"] = "bottom";
+	return FlowBaseline;
+}({});
+export { FlowBaseline, FlowDirection, FlowNodeMark, FlowPaint, FlowRibbon, FlowRouter, FlowSort };

package/dist/charts/flow/index.js

@@ -0,0 +1,51 @@
+import { FlowBaseline, FlowDirection, FlowNodeMark, FlowPaint, FlowRibbon, FlowRouter, FlowSort } from "./flowEnums.js";
+import { FlowGeometry } from "./FlowPathKit.js";
+import { FlowTable } from "./FlowTable.js";
+import { FlowGraph } from "./FlowGraph.js";
+import { FlowChart, FlowGraphChart } from "./FlowChart.js";
+import { StratumAxisOrder, StratumChart, StratumThreading } from "./StratumChart.js";
+import { AlluvialChart } from "./AlluvialChart.js";
+import { BumpFlow, BumpLeader, BumpMark, BumpSpacing } from "./BumpFlow.js";
+import { ChordDirection, ChordFlow, ChordHead, ChordLayout } from "./ChordFlow.js";
+import { CircularColumn, CircularCorner, CircularLoopSide, CircularSankey } from "./CircularSankey.js";
+import { CohortAlignment, CohortFlow, CohortForm, CohortMeasure, CohortStack } from "./CohortFlow.js";
+import { ConversionAlign, ConversionFlow, ConversionShape } from "./ConversionFlow.js";
+import { DecisionLayout, DecisionLinkWidth, DecisionNode, DecisionTreeChart, TreeGrowth } from "./DecisionTreeChart.js";
+import { EnergyBalanceChart, EnergyBranch, EnergyLossSide, EnergyTip } from "./EnergyBalanceChart.js";
+import { FlowMapLess, MapLessArc, MapLessBend, MapLessLayout, MapLessMeasure } from "./FlowMapLess.js";
+import { MarimekkoFlow, MekkoConnector, MekkoSeriesOrder } from "./MarimekkoFlow.js";
+import { LayeredLayout } from "./LayeredLayout.js";
+import { FlowNodeShape, NodeLinkChart } from "./FlowNodeLinkChart.js";
+import { MaxFlow } from "./MaxFlow.js";
+import { NetworkFlowChart, NetworkFlowEncoding } from "./NetworkFlowChart.js";
+import { ParallelSets } from "./ParallelSets.js";
+import { ProcessDensity, ProcessFlowChart, ProcessNodeStyle } from "./ProcessFlowChart.js";
+import { RetentionExit, RetentionFlow, RetentionScale } from "./RetentionFlow.js";
+import { RibbonFlow, RibbonScale } from "./RibbonFlow.js";
+import { SankeyAlign, SankeyChart } from "./SankeyChart.js";
+import { StateEdge, StateLayout, StateMark, StateTransitionChart, StateWeight } from "./StateTransitionChart.js";
+import { StreamFlow, StreamOffset, StreamOrder } from "./StreamFlow.js";
+import { SwimFlowChart, SwimHeader, SwimLaneOrder, SwimSpacing } from "./SwimFlowChart.js";
+// src/charts/flow/index.ts
+var flowCatalog = [
+	SankeyChart,
+	AlluvialChart,
+	ChordFlow,
+	ParallelSets,
+	StreamFlow,
+	FlowMapLess,
+	CircularSankey,
+	RibbonFlow,
+	MarimekkoFlow,
+	ProcessFlowChart,
+	DecisionTreeChart,
+	StateTransitionChart,
+	SwimFlowChart,
+	BumpFlow,
+	CohortFlow,
+	RetentionFlow,
+	ConversionFlow,
+	NetworkFlowChart,
+	EnergyBalanceChart
+];
+export { AlluvialChart, BumpFlow, BumpLeader, BumpMark, BumpSpacing, ChordDirection, ChordFlow, ChordHead, ChordLayout, CircularColumn, CircularCorner, CircularLoopSide, CircularSankey, CohortAlignment, CohortFlow, CohortForm, CohortMeasure, CohortStack, ConversionAlign, ConversionFlow, ConversionShape, DecisionLayout, DecisionLinkWidth, DecisionNode, DecisionTreeChart, EnergyBalanceChart, EnergyBranch, EnergyLossSide, EnergyTip, FlowBaseline, FlowChart, FlowDirection, FlowGeometry, FlowGraph, FlowGraphChart, FlowMapLess, FlowNodeMark, FlowNodeShape, FlowPaint, FlowRibbon, FlowRouter, FlowSort, FlowTable, LayeredLayout, MapLessArc, MapLessBend, MapLessLayout, MapLessMeasure, MarimekkoFlow, MaxFlow, MekkoConnector, MekkoSeriesOrder, NetworkFlowChart, NetworkFlowEncoding, NodeLinkChart, ParallelSets, ProcessDensity, ProcessFlowChart, ProcessNodeStyle, RetentionExit, RetentionFlow, RetentionScale, RibbonFlow, RibbonScale, SankeyAlign, SankeyChart, StateEdge, StateLayout, StateMark, StateTransitionChart, StateWeight, StratumAxisOrder, StratumChart, StratumThreading, StreamFlow, StreamOffset, StreamOrder, SwimFlowChart, SwimHeader, SwimLaneOrder, SwimSpacing, TreeGrowth, flowCatalog };

package/dist/charts/genomics/CircosFrame.js

@@ -0,0 +1,32 @@
+// src/charts/genomics/CircosFrame.ts
+var TAU = Math.PI * 2;
+/** Maps genomic position to angle: clockwise from 12 o'clock, chromosomes in karyotype order. */
+var CircosFrame = class {
+	sectors;
+	opening;
+	#byName;
+	constructor(chromosomes, radius, opening, focus, magnify) {
+		this.opening = chromosomes.length > 1 ? opening : 0;
+		const gap = Math.max(2.5 / radius, .006);
+		const weight = (chromosome) => chromosome.length * (chromosome.name === focus ? magnify : 1);
+		const total = chromosomes.reduce((sum, chromosome) => sum + weight(chromosome), 0) || 1;
+		const room = TAU - this.opening - gap * Math.max(0, chromosomes.length - (this.opening ? 1 : 0));
+		let cursor = this.opening / 2;
+		this.sectors = chromosomes.map((chromosome) => {
+			const a0 = cursor, a1 = a0 + weight(chromosome) / total * room;
+			cursor = a1 + gap;
+			return {
+				chromosome,
+				a0,
+				a1,
+				perBp: (a1 - a0) / chromosome.length
+			};
+		});
+		this.#byName = new Map(this.sectors.map((sector) => [sector.chromosome.name, sector]));
+	}
+	angle(chrom, position) {
+		const sector = this.#byName.get(chrom);
+		return sector ? sector.a0 + position * sector.perBp : 0;
+	}
+};
+export { CircosFrame };

package/dist/charts/genomics/CircosPlot.js

@@ -0,0 +1,319 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { RadialChart } from "../../core/RadialChart.js";
+import { CircosFrame } from "./CircosFrame.js";
+import { GenomeAssembly } from "./GenomeAssembly.js";
+import { GenomeSamples } from "./GenomeSamples.js";
+import { GenomeStainScale } from "./GenomeStainScale.js";
+import { CircosIdeogram, CircosLinkMark, CircosLinkScope, CircosScale, CircosTrackMark, GenomeBandLevel } from "./genomicsEnums.js";
+import { arc, ascending, extent, groups, lineRadial, quantile, scaleLinear } from "d3";
+// src/charts/genomics/CircosPlot.ts
+var TICK_STEPS = [
+	1,
+	2,
+	5,
+	10,
+	25,
+	50,
+	100
+];
+var point = (angle, radius) => `${+(radius * Math.sin(angle)).toFixed(2)} ${+(-radius * Math.cos(angle)).toFixed(2)}`;
+/** Show a whole genome at once: chromosomes around a circle, data tracks inside, and links for rearrangements or synteny. */
+var CircosPlot = class extends RadialChart {
+	#shown = /* @__PURE__ */ new Set();
+	static meta = {
+		id: "circos-plot",
+		name: "Circos plot",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Genome,
+		description: "Lays chromosomes around a circular ideogram with concentric data tracks and links joining distant genomic loci.",
+		tags: [
+			"genomics",
+			"circular",
+			"ideogram",
+			"synteny",
+			"structural variants"
+		],
+		sample: (seed) => GenomeSamples.cancerGenome(seed),
+		variants: {
+			ideogram: [CircosIdeogram.Banded, CircosIdeogram.Plain],
+			trackMark: [
+				CircosTrackMark.Histogram,
+				CircosTrackMark.Heatmap,
+				CircosTrackMark.Line,
+				CircosTrackMark.Scatter
+			],
+			linkMark: [
+				CircosLinkMark.Ribbon,
+				CircosLinkMark.Bezier,
+				CircosLinkMark.None
+			],
+			linkScope: [
+				CircosLinkScope.All,
+				CircosLinkScope.Inter,
+				CircosLinkScope.Intra
+			],
+			scale: [CircosScale.Proportional, CircosScale.Focus]
+		},
+		valid: (v) => v.linkMark !== CircosLinkMark.None || v.linkScope === CircosLinkScope.All
+	};
+	defaults() {
+		return {
+			ideogram: CircosIdeogram.Banded,
+			trackMark: CircosTrackMark.Histogram,
+			linkMark: CircosLinkMark.Ribbon,
+			linkScope: CircosLinkScope.All,
+			scale: CircosScale.Proportional,
+			opening: 30,
+			magnify: 5
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 12,
+			bottom: 8,
+			left: 12
+		};
+	}
+	/** Colours are fixed by the full link list, so a class keeps its colour when scope filters it out. */
+	legendItems() {
+		return this.palette.items().filter((item) => this.#shown.has(item.key));
+	}
+	#assembly() {
+		return new GenomeAssembly(this.options.data, this.options.bandFields, this.options.ideogram === CircosIdeogram.Banded ? GenomeBandLevel.Published : GenomeBandLevel.Band);
+	}
+	table() {
+		return this.#assembly().table([
+			"links",
+			"tracks",
+			"bands"
+		]);
+	}
+	#links(assembly) {
+		const { linkMark, linkScope, linkFields } = this.options;
+		if (linkMark === CircosLinkMark.None) return [];
+		return assembly.links(linkFields).filter(({ a, b }) => linkScope === CircosLinkScope.All || linkScope === CircosLinkScope.Intra === (a.chrom === b.chrom));
+	}
+	#frame(assembly, radius) {
+		const { scale, focus, magnify, opening } = this.options;
+		const ends = assembly.links(this.options.linkFields).flatMap(({ a, b }) => [a.chrom, b.chrom]);
+		const zoomed = scale === CircosScale.Focus ? assembly.busiest(ends, focus)?.name : void 0;
+		return new CircosFrame(assembly.chromosomes, radius, opening * Math.PI / 180, zoomed, magnify);
+	}
+	#drawIdeogram(ctx, frame, inner, outer) {
+		const banded = this.options.ideogram === CircosIdeogram.Banded;
+		const stain = new GenomeStainScale(ctx.theme);
+		const shape = arc().innerRadius(inner).outerRadius(outer).startAngle((d) => d.a0).endAngle((d) => d.a1);
+		const items = banded ? frame.sectors.flatMap((sector) => sector.chromosome.bands.map((band) => ({
+			band,
+			a0: frame.angle(sector.chromosome.name, band.start),
+			a1: frame.angle(sector.chromosome.name, band.end)
+		}))) : [];
+		const bands = ctx.marks("bands", "path", items, (d) => d.band.key).attr("fill", (d) => stain.fill(d.band));
+		ctx.set(bands, {
+			d: (d) => shape(d),
+			"fill-opacity": 1
+		}, { "fill-opacity": 0 });
+		ctx.hover(bands, ({ band }) => ({
+			title: `${band.chrom}${band.name}`,
+			rows: [["Stain", band.stain], ["Position", GenomeAssembly.span(band.start, band.end)]]
+		}));
+		const shells = ctx.marks("sectors", "path", frame.sectors, (d) => d.chromosome.name).attr("fill", banded ? "none" : ctx.theme.axis).attr("stroke", banded ? ctx.theme.inkMuted : "none").attr("stroke-width", .75).attr("pointer-events", banded ? "none" : null);
+		ctx.set(shells, { d: (d) => shape(d) });
+		if (!banded) ctx.hover(shells, (d) => ({
+			title: `Chromosome ${d.chromosome.name}`,
+			rows: [["Length", GenomeAssembly.megabases(d.chromosome.length)]]
+		}));
+	}
+	/** Mb ticks outside the ideogram: a step that is legible at this radius, with larger ones labelled. */
+	#drawTicks(ctx, frame, outer, labelled) {
+		const ticks = frame.sectors.flatMap((sector) => {
+			const px = (mb) => sector.perBp * mb * 1e6 * outer;
+			const minor = TICK_STEPS.find((step) => px(step) >= 6) ?? 100;
+			const major = TICK_STEPS.find((step) => step % minor === 0 && px(step) >= 26) ?? minor * 4;
+			return Array.from({ length: Math.floor(sector.chromosome.length / 1e6 / minor) + 1 }, (_, i) => {
+				const mb = i * minor;
+				return {
+					key: `${sector.chromosome.name}:${mb}`,
+					a: sector.a0 + mb * 1e6 * sector.perBp,
+					major: mb % major === 0,
+					label: `${mb}`
+				};
+			});
+		});
+		const reach = (d) => outer + (d.major ? 5 : 3);
+		const lines = ctx.marks("ticks", "line", ticks, (d) => d.key).attr("stroke", ctx.theme.inkMuted).attr("stroke-width", (d) => d.major ? 1 : .6);
+		const xy = (a, r) => point(a, r).split(" ").map(Number);
+		ctx.set(lines, {
+			x1: (d) => xy(d.a, outer)[0],
+			y1: (d) => xy(d.a, outer)[1],
+			x2: (d) => xy(d.a, reach(d))[0],
+			y2: (d) => xy(d.a, reach(d))[1]
+		});
+		const shown = labelled ? ticks.filter((d) => d.major && d.label !== "0") : [];
+		const labels = ctx.marks("tick-labels", "text", shown, (d) => d.key);
+		ctx.text(labels, 8, "muted").attr("dy", "0.33em").attr("pointer-events", "none").attr("text-anchor", (d) => Math.sin(d.a) >= 0 ? "start" : "end").attr("transform", (d) => {
+			const [x, y] = xy(d.a, outer + 7), degrees = d.a * 180 / Math.PI - 90;
+			return `translate(${x},${y}) rotate(${Math.sin(d.a) >= 0 ? degrees : degrees + 180})`;
+		}).text((d) => d.label);
+		return labelled ? 24 : 7;
+	}
+	#drawNames(ctx, frame, radius) {
+		const centre = (d) => (d.a0 + d.a1) / 2;
+		let last = -Infinity;
+		const clear = frame.sectors.filter((d) => {
+			const at = centre(d) * radius;
+			if (at - last < 5.2 * d.chromosome.name.length + 2) return false;
+			last = at;
+			return true;
+		});
+		const names = ctx.marks("chromosome-names", "text", clear, (d) => d.chromosome.name);
+		ctx.text(names, 9.5).attr("text-anchor", "middle").attr("dy", "0.33em").attr("pointer-events", "none").attr("transform", (d) => `translate(${point(centre(d), radius).replace(" ", ",")})`).text((d) => d.chromosome.name);
+	}
+	#rings(rows, ctx, top, thick) {
+		return groups(rows, (row) => row.track).map(([name, own], i) => {
+			const outer = top - i * (thick + 3), inner = outer - thick;
+			const [low = 0, high = 1] = extent(own, (row) => row.value);
+			const signed = low < 0;
+			const reach = quantile(own.map((row) => Math.abs(row.value)).sort(ascending), .98) || Math.max(Math.abs(low), Math.abs(high)) || 1;
+			const radius = scaleLinear(signed ? [-reach, reach] : [0, reach], [inner, outer]).clamp(true);
+			const shade = signed ? (value) => ctx.palette.diverging(value / reach) : (value) => ctx.palette.sequential(.15 + .85 * value / reach);
+			return {
+				name,
+				rows: own,
+				inner,
+				outer,
+				base: signed ? radius(0) : inner,
+				radius,
+				shade,
+				signed
+			};
+		});
+	}
+	#drawRings(ctx, frame, rings, assembly) {
+		const mark = this.options.trackMark;
+		const plates = rings.flatMap((ring) => frame.sectors.map((sector) => ({
+			key: `${ring.name}:${sector.chromosome.name}`,
+			ring,
+			a0: sector.a0,
+			a1: sector.a1
+		})));
+		const backing = arc().innerRadius((d) => d.ring.inner).outerRadius((d) => d.ring.outer).startAngle((d) => d.a0).endAngle((d) => d.a1);
+		const plate = ctx.marks("track-plates", "path", plates, (d) => d.key).attr("fill", ctx.theme.grid).attr("fill-opacity", .45).attr("pointer-events", "none");
+		ctx.set(plate, { d: (d) => backing(d) });
+		const midlines = rings.filter((ring) => ring.signed).flatMap((ring) => frame.sectors.map((sector) => ({
+			key: `${ring.name}:${sector.chromosome.name}`,
+			ring,
+			a0: sector.a0,
+			a1: sector.a1
+		})));
+		const zero = arc().innerRadius((d) => d.ring.base - .3).outerRadius((d) => d.ring.base + .3).startAngle((d) => d.a0).endAngle((d) => d.a1);
+		ctx.set(ctx.marks("track-zero", "path", midlines, (d) => d.key).attr("fill", ctx.theme.axis).attr("pointer-events", "none"), { d: (d) => zero(d) });
+		const bins = rings.flatMap((ring) => ring.rows.map((row) => ({
+			...row,
+			ring,
+			a0: frame.angle(row.chrom, row.start),
+			a1: Math.max(frame.angle(row.chrom, row.end), frame.angle(row.chrom, row.start) + .002)
+		})));
+		const tip = (d) => ({
+			title: assembly.locus(d.chrom, d.start),
+			color: d.ring.shade(d.value),
+			rows: [[d.track, d.value], ["Position", GenomeAssembly.span(d.start, d.end)]]
+		});
+		const area = mark === CircosTrackMark.Histogram || mark === CircosTrackMark.Heatmap;
+		const shape = arc().startAngle((d) => d.a0).endAngle((d) => d.a1).innerRadius((d) => mark === CircosTrackMark.Heatmap ? d.ring.inner : Math.min(d.ring.base, d.ring.radius(d.value))).outerRadius((d) => mark === CircosTrackMark.Heatmap ? d.ring.outer : Math.max(d.ring.base, d.ring.radius(d.value)));
+		const fills = ctx.marks("track-bins", "path", area ? bins : [], (d) => `${d.track}:${d.chrom}:${d.start}`).attr("fill", (d) => d.ring.shade(d.value));
+		ctx.set(fills, {
+			d: (d) => shape(d),
+			"fill-opacity": 1
+		}, { "fill-opacity": 0 });
+		ctx.hover(fills, tip);
+		const shown = mark === CircosTrackMark.Scatter ? bins : [];
+		const xy = (d) => point((d.a0 + d.a1) / 2, d.ring.radius(d.value)).split(" ").map(Number);
+		const dots = ctx.marks("track-dots", "circle", shown, (d) => `${d.track}:${d.chrom}:${d.start}`).attr("fill", (d) => d.ring.shade(d.value));
+		ctx.set(dots, {
+			cx: (d) => xy(d)[0],
+			cy: (d) => xy(d)[1],
+			r: (d) => d.ring.outer - d.ring.inner >= 20 ? 2.4 : 1.6
+		}, { r: 0 });
+		ctx.hover(dots, tip);
+		const paths = mark !== CircosTrackMark.Line ? [] : rings.flatMap((ring) => groups(ring.rows, (row) => row.chrom).map(([chrom, own]) => ({
+			key: `${ring.name}:${chrom}`,
+			ring,
+			chrom,
+			own
+		})));
+		const lines = ctx.marks("track-lines", "path", paths, (d) => d.key).attr("fill", "none").attr("stroke", (d) => ctx.palette.color(d.ring.name)).attr("stroke-width", 1.5).attr("stroke-linejoin", "round");
+		const trace = (d) => lineRadial().angle((row) => frame.angle(row.chrom, (row.start + row.end) / 2)).radius((row) => d.ring.radius(row.value))(d.own);
+		ctx.set(lines, {
+			d: trace,
+			"stroke-opacity": 1
+		}, { "stroke-opacity": 0 });
+		ctx.hover(lines, (d) => ({
+			title: `Chromosome ${d.chrom}`,
+			color: ctx.palette.color(d.ring.name),
+			rows: [[d.ring.name, `${+Math.min(...d.own.map((row) => row.value)).toFixed(2)} to ${+Math.max(...d.own.map((row) => row.value)).toFixed(2)}`]]
+		}));
+	}
+	/** Track names sit horizontally in the opening at 12 o'clock, when they fit its width there. */
+	#drawTrackNames(ctx, frame, rings) {
+		const fitting = rings.filter((ring) => frame.opening > 0 && ring.name.length * 4.9 <= 2 * (ring.inner + ring.outer) / 2 * Math.tan(frame.opening / 2) - 4);
+		const names = ctx.marks("track-names", "text", fitting, (d) => d.name);
+		ctx.text(names, 8.5, "muted").attr("text-anchor", "middle").attr("dy", "0.33em").attr("pointer-events", "none").attr("x", 0).attr("y", (d) => -(d.inner + d.outer) / 2).text((d) => d.name);
+	}
+	#drawLinks(ctx, frame, links, radius, assembly) {
+		const ribbon = this.options.linkMark === CircosLinkMark.Ribbon;
+		const thin = 2 / radius;
+		/** Quadratic control point: through the centre for opposite loci, near the rim for close ones. */
+		const control = (a, b) => {
+			const turn = Math.atan2(Math.sin(b - a), Math.cos(b - a)), separation = Math.abs(turn);
+			return point(a + turn / 2, Math.min(radius * .74, radius * (1 - separation / Math.PI) ** 1.6));
+		};
+		const shape = ({ a, b }) => {
+			const a0 = frame.angle(a.chrom, a.start), a1 = Math.max(frame.angle(a.chrom, a.end), a0 + thin);
+			const b0 = frame.angle(b.chrom, b.start), b1 = Math.max(frame.angle(b.chrom, b.end), b0 + thin);
+			if (!ribbon) {
+				const from = (a0 + a1) / 2, to = (b0 + b1) / 2;
+				return `M${point(from, radius)}Q${control(from, to)} ${point(to, radius)}`;
+			}
+			const rim = `A${radius} ${radius} 0 0 1`;
+			return `M${point(a0, radius)}${rim} ${point(a1, radius)}Q${control(a1, b0)} ${point(b0, radius)}${rim} ${point(b1, radius)}Q${control(b1, a0)} ${point(a0, radius)}Z`;
+		};
+		const color = (d) => ctx.palette.color(d.kind);
+		const paths = ctx.marks("links", "path", links, (d) => d.key).attr("fill", ribbon ? color : "none").attr("stroke", ribbon ? "none" : color).attr("stroke-width", radius < 60 ? 1.25 : 2).attr("stroke-linecap", "round");
+		ctx.set(paths, {
+			d: shape,
+			opacity: ribbon ? .72 : .85
+		}, { opacity: 0 }, 8);
+		ctx.hover(paths, (d) => ({
+			title: d.name,
+			color: color(d),
+			rows: [
+				["Class", d.kind],
+				[assembly.locus(d.a.chrom, d.a.start), GenomeAssembly.span(d.a.start, d.a.end)],
+				[assembly.locus(d.b.chrom, d.b.start), GenomeAssembly.span(d.b.start, d.b.end)],
+				...d.value == null ? [] : [["Value", d.value]]
+			]
+		}));
+	}
+	drawRadial(ctx, { radius }) {
+		const assembly = this.#assembly();
+		const wide = radius >= 150;
+		const ideogramOuter = Math.max(24, radius - 10 - (wide ? 22 : 6));
+		const ideogramInner = ideogramOuter - Math.max(6, Math.min(14, radius * .075));
+		const frame = this.#frame(assembly, ideogramOuter);
+		this.#drawNames(ctx, frame, radius - 5);
+		this.#drawTicks(ctx, frame, ideogramOuter, wide);
+		this.#drawIdeogram(ctx, frame, ideogramInner, ideogramOuter);
+		const thick = Math.max(6, Math.min(30, radius * .1));
+		for (const link of assembly.links(this.options.linkFields)) ctx.palette.color(link.kind);
+		const links = this.#links(assembly);
+		const rings = this.#rings(assembly.tracks(this.options.trackFields), ctx, ideogramInner - 3, thick);
+		this.#drawRings(ctx, frame, rings, assembly);
+		this.#drawTrackNames(ctx, frame, rings);
+		this.#shown = /* @__PURE__ */ new Set([...links.map((link) => link.kind), ...this.options.trackMark === CircosTrackMark.Line ? rings.map((ring) => ring.name) : []]);
+		this.#drawLinks(ctx, frame, links, Math.max(12, ideogramInner - 5 - rings.length * (thick + 3)), assembly);
+	}
+};
+export { CircosPlot };