allotaxonometer-ui 0.1.1 → 0.1.3

package/dist/index.js

@@ -1,505 +1,1788 @@
-import * as $ from "svelte/internal/server";
-import { scaleLinear } from "d3-scale";
-import { range, extent } from "d3-array";
-import * as d3 from "d3";
-import { extent as extent$1, InternSet, range as range$1, rollup, scaleLinear as scaleLinear$1, scaleBand, rgb, interpolateInferno, scaleOrdinal, max, scaleLog } from "d3";
-function Test($$payload, $$props) {
-  $.push();
-  let { message = "Hello World", data = [] } = $$props;
-  let testData = data.length > 0 ? data : range(10).map((i) => ({
-    x: i,
-    y: Math.sin(i / 2) * 20 + 50,
-    value: Math.random()
-  }));
-  let xScale = scaleLinear().domain(extent(testData, (d) => d.x)).range([20, 380]);
-  let yScale = scaleLinear().domain(extent(testData, (d) => d.y)).range([180, 20]);
-  let points = testData.map((d) => ({
-    cx: xScale(d.x),
-    cy: yScale(d.y),
-    r: 4 + d.value * 6,
-    fill: `hsl(${d.value * 360}, 70%, 50%)`
-  }));
-  const each_array = $.ensure_array_like(points);
-  $$payload.out += `<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><rect width="400" height="200" fill="#f8f9fa" stroke="#dee2e6"></rect><text x="200" y="25" text-anchor="middle" font-size="16" font-weight="bold">${$.escape(message)}</text><g class="chart"><!--[-->`;
-  for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
-    let point = each_array[$$index];
-    $$payload.out += `<circle${$.attr("cx", point.cx)}${$.attr("cy", point.cy)}${$.attr("r", point.r)}${$.attr("fill", point.fill)} stroke="white" stroke-width="1"></circle>`;
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+import * as d3 from 'd3';
+import { map, extent, InternSet, range, rollup, scaleLinear, scaleBand, rgb, interpolateInferno, scaleOrdinal, max, scaleLog } from 'd3';
+import { descending, sum, group, extent as extent$1 } from 'd3-array';
+
+var root_1$7 = $.from_svg(`<g class="xtick"><line x1="0" x2="0" y1="0" y2="6" stroke="hsla(212, 10%, 53%, 1)"></line></g><g class="tick-text"><text font-size="10" dx="13" dy="13"> </text></g>`, 1);
+var root$8 = $.from_svg(`<g class="axis x"><!><g class="xlab svelte-1y8xk6i"><text dy="45">Rank r</text><text dy="63">for</text><text dy="80"> </text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">more →</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">← less</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text></g></g>`);
+
+function AxisX($$anchor, $$props) {
+	$.push($$props, true);
+
+	let logFormat10 = $$props.scale.tickFormat();
+	let xTicks = $$props.scale.ticks();
+	var g = root$8();
+	var node = $.child(g);
+
+	$.each(node, 17, () => xTicks, $.index, ($$anchor, tick) => {
+		var fragment = root_1$7();
+		var g_1 = $.first_child(fragment);
+		var g_2 = $.sibling(g_1);
+		var text = $.child(g_2);
+		var text_1 = $.child(text, true);
+
+		$.reset(text);
+		$.reset(g_2);
+
+		$.template_effect(
+			($0, $1, $2) => {
+				$.set_attribute(g_1, 'transform', `translate(${$0 ?? ''}, 0)`);
+				$.set_attribute(g_2, 'transform', `translate(${$1 ?? ''}, 0) scale(-1,1) rotate(45)`);
+				$.set_text(text_1, $2);
+			},
+			[
+				() => $$props.scale($.get(tick)),
+				() => $$props.scale($.get(tick)),
+				() => logFormat10($.get(tick))
+			]
+		);
+
+		$.append($$anchor, fragment);
+	});
+
+	var g_3 = $.sibling(node);
+	var text_2 = $.child(g_3);
+	var text_3 = $.sibling(text_2);
+	var text_4 = $.sibling(text_3);
+	var text_5 = $.child(text_4, true);
+
+	$.reset(text_4);
+
+	var text_6 = $.sibling(text_4);
+	var text_7 = $.sibling(text_6);
+	var text_8 = $.sibling(text_7);
+
+	$.set_attribute(text_8, 'x', 40);
+
+	var text_9 = $.sibling(text_8);
+
+	$.set_attribute(text_9, 'x', 40);
+	$.reset(g_3);
+	$.reset(g);
+
+	$.template_effect(() => {
+		$.set_attribute(g, 'transform', `translate(0, ${$$props.height ?? ''})`);
+		$.set_attribute(g_3, 'transform', `scale(-1,1) translate(-${$$props.height ?? ''}, 0)`);
+		$.set_attribute(text_2, 'x', $$props.height / 2);
+		$.set_attribute(text_3, 'x', $$props.height / 2);
+		$.set_attribute(text_4, 'x', $$props.height / 2);
+		$.set_text(text_5, $$props.title[1]);
+		$.set_attribute(text_6, 'x', $$props.height - 40);
+		$.set_attribute(text_7, 'x', $$props.height - 40);
+	});
+
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1$6 = $.from_svg(`<g class="ytick"><line x1="0" x2="-6" y1="0" y2="0" stroke="hsla(212, 10%, 53%, 1)"></line></g><g class="tick-text"><text font-size="10" dx="-23" dy="10"> </text></g>`, 1);
+var root$7 = $.from_svg(`<g class="axis y"><!><g class="ylab svelte-1y8visx" transform="rotate(90)"><text dy="45">Rank r</text><text dy="63">for</text><text dy="80"> </text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">more →</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">← less</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text></g></g>`);
+
+function AxisY($$anchor, $$props) {
+	$.push($$props, true);
+
+	let logFormat10 = $$props.scale.tickFormat();
+	let yTicks = $.derived(() => $$props.scale.ticks());
+	var g = root$7();
+	var node = $.child(g);
+
+	$.each(node, 17, () => $.get(yTicks), $.index, ($$anchor, tick) => {
+		var fragment = root_1$6();
+		var g_1 = $.first_child(fragment);
+		var g_2 = $.sibling(g_1);
+		var text = $.child(g_2);
+		var text_1 = $.child(text, true);
+
+		$.reset(text);
+		$.reset(g_2);
+
+		$.template_effect(
+			($0, $1, $2) => {
+				$.set_attribute(g_1, 'transform', `translate(0, ${$0 ?? ''})`);
+				$.set_attribute(g_2, 'transform', `translate(0, ${$1 ?? ''}) rotate(45)`);
+				$.set_text(text_1, $2);
+			},
+			[
+				() => $$props.scale($.get(tick)),
+				() => $$props.scale($.get(tick)),
+				() => logFormat10($.get(tick))
+			]
+		);
+
+		$.append($$anchor, fragment);
+	});
+
+	var g_3 = $.sibling(node);
+	var text_2 = $.child(g_3);
+	var text_3 = $.sibling(text_2);
+	var text_4 = $.sibling(text_3);
+	var text_5 = $.child(text_4, true);
+
+	$.reset(text_4);
+
+	var text_6 = $.sibling(text_4);
+	var text_7 = $.sibling(text_6);
+	var text_8 = $.sibling(text_7);
+
+	$.set_attribute(text_8, 'x', 40);
+
+	var text_9 = $.sibling(text_8);
+
+	$.set_attribute(text_9, 'x', 40);
+	$.reset(g_3);
+	$.reset(g);
+
+	$.template_effect(() => {
+		$.set_attribute(g, 'transform', `translate(${$$props.height ?? ''}, 0) scale(-1, 1)`);
+		$.set_attribute(text_2, 'x', $$props.height / 2);
+		$.set_attribute(text_3, 'x', $$props.height / 2);
+		$.set_attribute(text_4, 'x', $$props.height / 2);
+		$.set_text(text_5, $$props.title[0]);
+		$.set_attribute(text_6, 'x', $$props.height - 40);
+		$.set_attribute(text_7, 'x', $$props.height - 40);
+	});
+
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1$5 = $.from_svg(`<g><line y2="0" stroke="#d3d3d3" stroke-dasharray="3,3"></line></g><g><line x2="0" stroke="#d3d3d3" stroke-dasharray="3,3"></line></g>`, 1);
+var root$6 = $.from_svg(`<g class="grid"></g>`);
+
+function Grid($$anchor, $$props) {
+	$.push($$props, true);
+
+	let xygridLines = $.derived(() => $$props.scale.ticks($$props.ncells / 2));
+	var g = root$6();
+
+	$.each(g, 21, () => $.get(xygridLines), $.index, ($$anchor, yline, index) => {
+		var fragment = root_1$5();
+		var g_1 = $.first_child(fragment);
+		var line = $.child(g_1);
+
+		$.set_attribute(line, 'opacity', index === 0 ? 0 : 1);
+		$.reset(g_1);
+
+		var g_2 = $.sibling(g_1);
+		var line_1 = $.child(g_2);
+
+		$.set_attribute(line_1, 'opacity', index === 0 ? 0 : 1);
+		$.reset(g_2);
+
+		$.template_effect(
+			($0, $1) => {
+				$.set_attribute(g_1, 'transform', `translate(${$0 ?? ''}, 0)`);
+				$.set_attribute(line, 'y1', $$props.height);
+				$.set_attribute(g_2, 'transform', `translate(0, ${$1 ?? ''})`);
+				$.set_attribute(line_1, 'x1', $$props.height);
+			},
+			[
+				() => $$props.wxy($.get(yline)),
+				() => $$props.wxy($.get(yline))
+			]
+		);
+
+		$.append($$anchor, fragment);
+	});
+
+	$.reset(g);
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1$4 = $.from_svg(`<path fill="none" stroke="grey" stroke-width="0.9" stroke-opacity="0.9"></path>`);
+var root$5 = $.from_svg(`<g class="contours"></g>`);
+
+function Contours($$anchor, $$props) {
+	$.push($$props, true);
+
+	function alpha_norm_type2(x1, x2, alpha) {
+		if (alpha == 0) {
+			return Math.abs(Math.log(x1 / x2));
+		} else if (alpha === Infinity) {
+			return x1 === x2 ? 0 : Math.max(x1, x2);
+		} else {
+			const prefactor = (alpha + 1) / alpha;
+			const power = 1 / (alpha + 1);
+
+			return prefactor * Math.abs(Math.pow(x1, alpha) - Math.pow(x2, alpha)) ** power;
+		}
+	}
+
+	function make_grid(Ninset, tmpr1, tmpr2, alpha, divnorm) {
+		const deltamatrix = Array.from({ length: Ninset }, () => Array(Ninset).fill(0));
+
+		for (let i = 0; i < Ninset; i++) {
+			for (let j = 0; j < Ninset; j++) {
+				const divElem = alpha_norm_type2(1 / tmpr1[i], 1 / tmpr2[j], alpha);
+
+				deltamatrix[i][j] = divElem / divnorm;
+			}
+
+			deltamatrix[i][i] = -1;
+
+			if (i < Ninset - 1) {
+				deltamatrix[i][i + 1] = -1;
+				deltamatrix[i + 1][i] = -1;
+			}
+		}
+
+		return deltamatrix;
+	}
+
+	function filter_contours(tmpcontours, Ninset, maxlog10) {
+		const chart2val = d3.scaleLinear().domain([0, Ninset]).range([0, maxlog10]);
+		let out = [];
+
+		tmpcontours.forEach((contour) => {
+			contour.coordinates.forEach((pair, i) => {
+				const tmpr1 = pair[0].map((d) => d[0]);
+				const tmpr2 = pair[0].map((d) => d[1]);
+				const filteredPairs = [];
+
+				for (let index = 0; index < tmpr1.length - 1; index++) {
+					const x1 = chart2val(tmpr1[index]);
+					const x2 = chart2val(tmpr2[index]);
+					const tmpxrot = Math.abs(x2 - x1) / Math.sqrt(2);
+
+					if (Math.abs(tmpxrot) >= 0.1 & x1 != maxlog10 & x2 != 0 & x1 != 0 & x2 != maxlog10) {
+						filteredPairs.push([x1, x2]);
+					}
+				}
+
+				if (filteredPairs.length > 0) {
+					out.push(filteredPairs);
+				}
+			});
+		});
+
+		return out;
+	}
+
+	function get_contours(alpha, maxlog10, divnorm) {
+		const Ninset = 10 ** 3;
+		const tmpr1 = d3.range(0, 1000).map((d) => Math.pow(10, d / 999 * 5));
+		const tmpr2 = d3.range(0, 1000).map((d) => Math.pow(10, d / 999 * 5));
+		const Ncontours = 10;
+		const scale = d3.scaleLinear().domain([0, Ncontours + 1]).range([1, tmpr1.length]);
+		const contour_indices = d3.range(Ncontours + 2).map((i) => Math.round(scale(i)));
+		const grid = make_grid(Ninset, tmpr1, tmpr2, alpha, divnorm);
+		const indices = contour_indices.slice(1, -1);
+		const lastRow = grid[grid.length - 1];
+		const heights = indices.map((index) => lastRow[index]);
+		const logTmpr = tmpr1.map(Math.log10);
+		const contourGenerator = d3.contours().size([logTmpr.length, logTmpr.length]).thresholds(heights);
+		const flatDeltamatrix = grid.flat();
+		const tmpcontours = contourGenerator(flatDeltamatrix);
+
+		return filter_contours(tmpcontours, Ninset, maxlog10);
+	}
+
+	// Only calculate contours in browser
+	let mycontours = $.derived(() => get_contours($$props.alpha, $$props.maxlog10, $$props.divnorm));
+	const x = $.derived(() => d3.scaleLinear([0, $$props.maxlog10], [0, $$props.DiamondInnerHeight]));
+	const y = $.derived(() => d3.scaleLinear([$$props.maxlog10, 0], [$$props.DiamondInnerHeight, 0]));
+	const pathData = d3.line().x((d, i) => $.get(x)(d[0])).y((d, i) => $.get(y)(d[1]));
+	var g = root$5();
+
+	$.each(g, 21, () => $.get(mycontours), $.index, ($$anchor, contour) => {
+		var path = root_1$4();
+
+		$.template_effect(($0) => $.set_attribute(path, 'd', $0), [() => pathData($.get(contour))]);
+		$.append($$anchor, path);
+	});
+
+	$.reset(g);
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1$3 = $.from_svg(`<rect stroke="black"></rect>`);
+var root_2$3 = $.from_svg(`<g class="diamond-lab"><text dy="20" font-size="10"> </text></g>`);
+var root$4 = $.from_svg(`<g class="diamond-chart"><polygon fill="#89CFF0" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon><polygon fill="grey" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon><!><!><!><!><!><!></g>`);
+
+function Diamond($$anchor, $$props) {
+	$.push($$props, true);
+
+	let DiamondHeight = $.prop($$props, 'DiamondHeight', 3, 600),
+		marginInner = $.prop($$props, 'marginInner', 3, 160),
+		marginDiamond = $.prop($$props, 'marginDiamond', 3, 40);
+
+	// Extract data from dat object
+	let diamond_dat = $.derived(() => $$props.dat.counts);
+	$.derived(() => $$props.dat.deltas);
+	// Calculate derived dimensions (matching D3 version)
+	let innerHeight = $.derived(() => DiamondHeight() - marginInner());
+	let diamondHeight = $.derived(() => $.get(innerHeight) - marginDiamond());
+
+	function get_relevant_types(diamond_dat) {
+		// Use the logic from your D3 version instead
+		const ncells = d3.max(diamond_dat, (d) => d.x1);
+		const cumbin = d3.range(0, ncells, 1.5);
+		const relevant_types = [];
+
+		for (let sys of ["right", "left"]) {
+			for (let i = 1; i < cumbin.length; i++) {
+				const filtered_dat = diamond_dat.filter((d) => d.value > 0 && d.which_sys == sys).filter((d) => d.coord_on_diag >= cumbin[i - 1] && d.coord_on_diag < cumbin[i]);
+
+				if (filtered_dat.length > 0) {
+					const cos_dists = filtered_dat.map((d) => d.cos_dist);
+					const max_dist = cos_dists.reduce((a, b) => Math.max(a, b));
+					const max_dist_idx = cos_dists.indexOf(max_dist);
+					// SSR-safe random selection
+					const types = filtered_dat[max_dist_idx]['types'].split(",");
+					const name = types[Math.floor(Math.random() * types.length)];
+
+					relevant_types.push(name);
+				}
+			}
+		}
+
+		return relevant_types;
+	}
+
+	function rin(arr1, arr2) {
+		return Array.from(arr1, (x) => arr2.indexOf(x) !== -1);
+	}
+
+	// Wrangling data - Fixed variable references
+	let relevant_types = $.derived(() => get_relevant_types($.get(diamond_dat)));
+	let ncells = $.derived(() => d3.max($.get(diamond_dat), (d) => d.x1));
+	let max_rank = $.derived(() => d3.max($.get(diamond_dat), (d) => d.rank_L[1]));
+	let rounded_max_rank = $.derived(() => 10 ** Math.ceil(Math.log10($.get(max_rank))));
+	let xyDomain = $.derived(() => [1, $.get(rounded_max_rank)]);
+	// Scales (matching D3 version dimensions)
+	let xy = $.derived(() => d3.scaleBand().domain($.get(diamond_dat).map((d) => d.y1)).range([0, $.get(diamondHeight)]));
+	let logScale = $.derived(() => d3.scaleLog().domain($.get(xyDomain)).range([0, $.get(innerHeight)]).nice());
+	let linScale = $.derived(() => d3.scaleLinear().domain([0, $.get(ncells) - 1]).range([0, $.get(innerHeight)]));
+	let wxy = $.derived(() => d3.scaleBand().domain(d3.range($.get(ncells))).range([0, $.get(innerHeight)]));
+	let color_scale = d3.scaleSequentialLog().domain([$.get(rounded_max_rank), 1]).interpolator(d3.interpolateInferno);
+
+	// Background triangles (using innerHeight like D3 version)
+	let blue_triangle = $.derived(() => [
+		[
+			$.get(innerHeight),
+			$.get(innerHeight)
+		],
+		[0, 0],
+		[0, $.get(innerHeight)]
+	].join(" "));
+
+	let grey_triangle = $.derived(() => [
+		[
+			$.get(innerHeight),
+			$.get(innerHeight)
+		],
+		[0, 0],
+		[$.get(innerHeight), 0]
+	].join(" "));
+
+	function filter_labs(d, relevant_types) {
+		return rin(relevant_types, d.types.split(",")).some((x) => x === true);
+	}
+
+	var g = root$4();
+	var polygon = $.child(g);
+	var polygon_1 = $.sibling(polygon);
+	var node = $.sibling(polygon_1);
+
+	AxisX(node, {
+		get height() {
+			return $.get(innerHeight);
+		},
+		get scale() {
+			return $.get(logScale);
+		},
+		get title() {
+			return $$props.title;
+		}
+	});
+
+	var node_1 = $.sibling(node);
+
+	AxisY(node_1, {
+		get height() {
+			return $.get(innerHeight);
+		},
+		get scale() {
+			return $.get(logScale);
+		},
+		get title() {
+			return $$props.title;
+		}
+	});
+
+	var node_2 = $.sibling(node_1);
+
+	Grid(node_2, {
+		get height() {
+			return $.get(innerHeight);
+		},
+		get wxy() {
+			return $.get(wxy);
+		},
+		get ncells() {
+			return $.get(ncells);
+		},
+		get scale() {
+			return $.get(linScale);
+		}
+	});
+
+	var node_3 = $.sibling(node_2);
+
+	$.each(node_3, 17, () => $.get(diamond_dat), $.index, ($$anchor, d) => {
+		var rect = root_1$3();
+
+		$.template_effect(
+			($0, $1, $2, $3, $4) => {
+				$.set_attribute(rect, 'x', $0);
+				$.set_attribute(rect, 'y', $1);
+				$.set_attribute(rect, 'width', $2);
+				$.set_attribute(rect, 'height', $3);
+				$.set_attribute(rect, 'fill', $4);
+				$.set_attribute(rect, 'opacity', $.get(d).value === 0 ? 0 : 1);
+				$.set_attribute(rect, 'stroke-width', $.get(d).value === 0 ? 0 : 0.1);
+				$.set_attribute(rect, 'stroke-opacity', $.get(d).value === 0 ? 0 : 0.9);
+			},
+			[
+				() => $.get(xy)($.get(d).x1),
+				() => $.get(xy)($.get(d).y1),
+				() => $.get(xy).bandwidth(),
+				() => $.get(xy).bandwidth(),
+				() => color_scale($.get(d).value)
+			]
+		);
+
+		$.append($$anchor, rect);
+	});
+
+	var node_4 = $.sibling(node_3);
+
+	$.each(node_4, 17, () => $.get(diamond_dat).filter((d) => filter_labs(d, $.get(relevant_types))), $.index, ($$anchor, d) => {
+		var g_1 = root_2$3();
+		var text = $.child(g_1);
+		var text_1 = $.child(text, true);
+
+		$.reset(text);
+		$.reset(g_1);
+
+		$.template_effect(
+			($0, $1, $2, $3, $4, $5) => {
+				$.set_attribute(g_1, 'transform', `
+            scale(1,-1) 
+            rotate(-90) 
+            rotate(-45, ${$0 ?? ''}, ${$1 ?? ''}) 
+            translate(${$2 ?? ''}, 0)
+        `);
+
+				$.set_attribute(text, 'x', $3);
+				$.set_attribute(text, 'y', $4);
+				$.set_attribute(text, 'text-anchor', $.get(d).x1 - $.get(d).y1 <= 0 ? "start" : "end");
+				$.set_text(text_1, $5);
+			},
+			[
+				() => $.get(xy)($.get(d).x1),
+				() => $.get(xy)($.get(d).y1),
+				() => $.get(d).which_sys === "right" ? $.get(xy)(Math.sqrt($.get(d).cos_dist)) * 1.5 : -$.get(xy)(Math.sqrt($.get(d).cos_dist)) * 1.5,
+				() => $.get(xy)($.get(d).x1),
+				() => Number.isInteger($.get(d).coord_on_diag) ? $.get(xy)($.get(d).y1) : $.get(xy)($.get(d).y1) - 1,
+				() => $.get(d).types.split(",")[0]
+			]
+		);
+
+		$.append($$anchor, g_1);
+	});
+
+	var node_5 = $.sibling(node_4);
+
+	Contours(node_5, {
+		get alpha() {
+			return $$props.alpha;
+		},
+		get maxlog10() {
+			return $$props.maxlog10;
+		},
+		get divnorm() {
+			return $$props.divnorm;
+		},
+		get DiamondInnerHeight() {
+			return $.get(innerHeight);
+		}
+	});
+
+	$.reset(g);
+
+	$.template_effect(() => {
+		$.set_attribute(g, 'transform', `translate(360, 0) scale (-1,1) rotate(45) translate(${$.get(innerHeight) / 4}, ${$.get(innerHeight) / 4})`);
+		$.set_attribute(polygon, 'points', $.get(blue_triangle));
+		$.set_attribute(polygon_1, 'points', $.get(grey_triangle));
+	});
+
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1$2 = $.from_svg(`<g class="tick"><line y1="0" stroke="currentColor" stroke-opacity="0.1"></line><text y="-12" font-size="0.8em" text-anchor="middle"> </text></g>`);
+var root_2$2 = $.from_svg(`<rect></rect>`);
+var root_3$2 = $.from_svg(`<text dy="0.35em" font-size="0.7em"> </text>`);
+var root$3 = $.from_svg(`<g class="wordshift-container svelte-48jn79"><g class="axis x"><!><text y="-22" fill="currentColor" text-anchor="center" font-size="0.9em"> </text></g><!><g class="y-axis"></g></g>`);
+
+function Wordshift($$anchor, $$props) {
+	$.push($$props, true);
+
+	let x = $.prop($$props, 'x', 3, (d) => d.metric),
+		y = $.prop($$props, 'y', 3, (d) => d.type),
+		marginTop = $.prop($$props, 'marginTop', 3, 30),
+		marginRight = $.prop($$props, 'marginRight', 3, 40),
+		marginBottom = $.prop($$props, 'marginBottom', 3, 10),
+		marginLeft = $.prop($$props, 'marginLeft', 3, 40),
+		width = $.prop($$props, 'width', 3, 300);
+		$.prop($$props, 'height', 3, 680);
+		let xFormat = $.prop($$props, 'xFormat', 3, '%'),
+		xLabel = $.prop($$props, 'xLabel', 3, '← System 1 · Divergence contribution · System 2 →'),
+		yPadding = $.prop($$props, 'yPadding', 3, 0.2),
+		colors = $.prop($$props, 'colors', 19, () => ['lightgrey', 'lightblue']);
+
+	// Compute values (matching D3 version)
+	let X = $.derived(() => d3.map($$props.barData, x()));
+	let Y = $.derived(() => d3.map($$props.barData, y()));
+	// Compute domains
+	let computedXDomain = $.derived(() => $$props.xDomain || d3.extent($.get(X)));
+	let yDomain = $.derived(() => new d3.InternSet($.get(Y)));
+
+	// Compute dimensions
+	let xRange = $.derived(() => [
+		marginLeft(),
+		width() - marginRight()
+	]);
+
+	let computedHeight = $.derived(() => Math.ceil(($.get(yDomain).size + yPadding()) * 25) + marginTop() + marginBottom());
+
+	let yRange = $.derived(() => [
+		marginTop(),
+		$.get(computedHeight) - marginBottom()
+	]);
+
+	// Filter indices and create lookup
+	let I = $.derived(() => d3.range($.get(X).length).filter((i) => $.get(yDomain).has($.get(Y)[i])));
+	let YX = $.derived(() => d3.rollup($.get(I), ([i]) => $.get(X)[i], (i) => $.get(Y)[i]));
+	// Scales
+	let xScale = $.derived(() => d3.scaleLinear($.get(computedXDomain), $.get(xRange)));
+	let yScale = $.derived(() => d3.scaleBand().domain($.get(yDomain)).range($.get(yRange)).padding(yPadding()));
+	let format = $.derived(() => $.get(xScale).tickFormat(100, xFormat()));
+	let xTicks = $.derived(() => $.get(xScale).ticks(width() / 80));
+	// Position the chart (matching your current positioning)
+	let chartX = $.derived(() => $$props.DashboardWidth - width() + marginLeft());
+	let chartY = $.derived(marginTop);
+	var g = root$3();
+	var g_1 = $.child(g);
+	var node = $.child(g_1);
+
+	$.each(node, 17, () => $.get(xTicks), $.index, ($$anchor, tick) => {
+		var g_2 = root_1$2();
+		var line = $.child(g_2);
+		var text = $.sibling(line);
+		var text_1 = $.child(text, true);
+
+		$.reset(text);
+		$.reset(g_2);
+
+		$.template_effect(
+			($0, $1, $2, $3) => {
+				$.set_attribute(line, 'x1', $0);
+				$.set_attribute(line, 'x2', $1);
+				$.set_attribute(line, 'y2', $.get(computedHeight) - marginTop() - marginBottom());
+				$.set_attribute(text, 'x', $2);
+				$.set_text(text_1, $3);
+			},
+			[
+				() => $.get(xScale)($.get(tick)),
+				() => $.get(xScale)($.get(tick)),
+				() => $.get(xScale)($.get(tick)),
+				() => $.get(format)($.get(tick))
+			]
+		);
+
+		$.append($$anchor, g_2);
+	});
+
+	var text_2 = $.sibling(node);
+	var text_3 = $.child(text_2, true);
+
+	$.reset(text_2);
+	$.reset(g_1);
+
+	var node_1 = $.sibling(g_1);
+
+	$.each(node_1, 17, () => $.get(I), $.index, ($$anchor, i) => {
+		var rect = root_2$2();
+
+		$.template_effect(
+			($0, $1, $2, $3) => {
+				$.set_attribute(rect, 'x', $0);
+				$.set_attribute(rect, 'y', $1);
+				$.set_attribute(rect, 'fill', colors()[$.get(X)[$.get(i)] > 0 ? colors().length - 1 : 0]);
+				$.set_attribute(rect, 'width', $2);
+				$.set_attribute(rect, 'height', $3);
+			},
+			[
+				() => Math.min($.get(xScale)(0), $.get(xScale)($.get(X)[$.get(i)])),
+				() => $.get(yScale)($.get(Y)[$.get(i)]),
+				() => Math.abs($.get(xScale)($.get(X)[$.get(i)]) - $.get(xScale)(0)),
+				() => $.get(yScale).bandwidth()
+			]
+		);
+
+		$.append($$anchor, rect);
+	});
+
+	var g_3 = $.sibling(node_1);
+
+	$.each(g_3, 21, () => $.get(yScale).domain(), $.index, ($$anchor, label) => {
+		var text_4 = root_3$2();
+		var text_5 = $.child(text_4, true);
+
+		$.reset(text_4);
+
+		$.template_effect(
+			($0, $1, $2) => {
+				$.set_attribute(text_4, 'x', $0);
+				$.set_attribute(text_4, 'y', $1);
+				$.set_attribute(text_4, 'text-anchor', $2);
+				$.set_text(text_5, $.get(label));
+			},
+			[
+				() => $.get(YX).get($.get(label)) > 0 ? 6 : -6,
+				() => $.get(yScale)($.get(label)) + $.get(yScale).bandwidth() / 2,
+				() => $.get(YX).get($.get(label)) > 0 ? "start" : "end"
+			]
+		);
+
+		$.append($$anchor, text_4);
+	});
+
+	$.reset(g_3);
+	$.reset(g);
+
+	$.template_effect(
+		($0, $1) => {
+			$.set_attribute(g, 'transform', `translate(${$.get(chartX) ?? ''}, ${$.get(chartY) ?? ''})`);
+			$.set_attribute(g_1, 'transform', `translate(0, ${marginTop() ?? ''})`);
+			$.set_attribute(text_2, 'x', $0);
+			$.set_text(text_3, xLabel());
+			$.set_attribute(g_3, 'transform', `translate(${$1 ?? ''}, 0)`);
+		},
+		[
+			() => $.get(xScale)(0),
+			() => $.get(xScale)(0)
+		]
+	);
+
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1$1 = $.from_svg(`<line y1="0" stroke="currentColor" stroke-opacity="0.1"></line>`);
+var root_2$1 = $.from_svg(`<rect></rect><text opacity="0.5" dy="0.35em" font-size="10" font-family="sans-serif"> </text>`, 1);
+var root_3$1 = $.from_svg(`<text x="0" dy="0.35em" font-size="10" font-family="sans-serif" text-anchor="middle"> </text>`);
+var root$2 = $.from_svg(`<g class="balance-chart"><g class="grid"></g><!><g class="y-axis"></g></g>`);
+
+function DivergingBarChart($$anchor, $$props) {
+	$.push($$props, true);
+
+	let x = $.prop($$props, 'x', 3, (d) => d.frequency),
+		y = $.prop($$props, 'y', 3, (d) => d.y_coord),
+		marginTop = $.prop($$props, 'marginTop', 3, 0),
+		marginRight = $.prop($$props, 'marginRight', 3, 40),
+		marginBottom = $.prop($$props, 'marginBottom', 3, 10),
+		marginLeft = $.prop($$props, 'marginLeft', 3, 40),
+		width = $.prop($$props, 'width', 3, 200),
+		yPadding = $.prop($$props, 'yPadding', 3, 0.5),
+		colors = $.prop($$props, 'colors', 19, () => ["lightgrey", "lightblue"]);
+
+	// Compute values (matching D3 version exactly)
+	let X = $.derived(() => map($$props.data, x()));
+	let Y = $.derived(() => map($$props.data, y()));
+	// Compute domains
+	let xDomain = $.derived(() => extent($.get(X)));
+	let yDomain = $.derived(() => new InternSet($.get(Y)));
+
+	// Compute dimensions
+	let xRange = $.derived(() => [
+		marginLeft(),
+		width() - marginRight()
+	]);
+
+	let height = $.derived(() => Math.ceil(($.get(yDomain).size + yPadding()) * 25) + marginTop() + marginBottom());
+
+	let yRange = $.derived(() => [
+		marginTop(),
+		$.get(height) - marginBottom()
+	]);
+
+	// Filter indices and create lookup
+	let I = $.derived(() => range($.get(X).length).filter((i) => $.get(yDomain).has($.get(Y)[i])));
+	let YX = $.derived(() => rollup($.get(I), ([i]) => $.get(X)[i], (i) => $.get(Y)[i]));
+	// Scales
+	let xScale = $.derived(() => scaleLinear($.get(xDomain), $.get(xRange)));
+	let yScale = $.derived(() => scaleBand().domain($.get(yDomain)).range($.get(yRange)).padding(yPadding()));
+	let format = $.derived(() => $.get(xScale).tickFormat(100, "%"));
+	var g = root$2();
+	var g_1 = $.child(g);
+
+	$.each(g_1, 21, () => $.get(xScale).ticks(width() / 80), $.index, ($$anchor, tick) => {
+		var line = root_1$1();
+
+		$.template_effect(
+			($0, $1) => {
+				$.set_attribute(line, 'x1', $0);
+				$.set_attribute(line, 'x2', $1);
+				$.set_attribute(line, 'y2', $.get(height) - marginTop() - marginBottom());
+			},
+			[
+				() => $.get(xScale)($.get(tick)),
+				() => $.get(xScale)($.get(tick))
+			]
+		);
+
+		$.append($$anchor, line);
+	});
+
+	$.reset(g_1);
+
+	var node = $.sibling(g_1);
+
+	$.each(node, 17, () => $.get(I), $.index, ($$anchor, i) => {
+		var fragment = root_2$1();
+		var rect = $.first_child(fragment);
+		var text = $.sibling(rect);
+		var text_1 = $.child(text, true);
+
+		$.reset(text);
+
+		$.template_effect(
+			($0, $1, $2, $3, $4, $5, $6) => {
+				$.set_attribute(rect, 'x', $0);
+				$.set_attribute(rect, 'y', $1);
+				$.set_attribute(rect, 'fill', colors()[$.get(X)[$.get(i)] > 0 ? colors().length - 1 : 0]);
+				$.set_attribute(rect, 'width', $2);
+				$.set_attribute(rect, 'height', $3);
+				$.set_attribute(text, 'x', $4);
+				$.set_attribute(text, 'y', $5);
+				$.set_attribute(text, 'text-anchor', $.get(X)[$.get(i)] < 0 ? "end" : "start");
+				$.set_text(text_1, $6);
+			},
+			[
+				() => Math.min($.get(xScale)(0), $.get(xScale)($.get(X)[$.get(i)])),
+				() => $.get(yScale)($.get(Y)[$.get(i)]),
+				() => Math.abs($.get(xScale)($.get(X)[$.get(i)]) - $.get(xScale)(0)),
+				() => $.get(yScale).bandwidth(),
+				() => $.get(xScale)($.get(X)[$.get(i)]) + Math.sign($.get(X)[$.get(i)] - 0) * 4,
+				() => $.get(yScale)($.get(Y)[$.get(i)]) + $.get(yScale).bandwidth() / 2,
+				() => $.get(format)(Math.abs($.get(X)[$.get(i)]))
+			]
+		);
+
+		$.append($$anchor, fragment);
+	});
+
+	var g_2 = $.sibling(node);
+
+	$.each(g_2, 21, () => $.get(yScale).domain(), $.index, ($$anchor, label) => {
+		var text_2 = root_3$1();
+		var text_3 = $.child(text_2, true);
+
+		$.reset(text_2);
+
+		$.template_effect(
+			($0, $1) => {
+				$.set_attribute(text_2, 'y', $0);
+				$.set_attribute(text_2, 'opacity', $1);
+				$.set_text(text_3, $.get(label));
+			},
+			[
+				() => $.get(yScale)($.get(label)) + $.get(yScale).bandwidth() / 2,
+				() => $.get(YX).get($.get(label)) ? "0.5" : "1"
+			]
+		);
+
+		$.append($$anchor, text_2);
+	});
+
+	$.reset(g_2);
+	$.reset(g);
+
+	$.template_effect(
+		($0) => {
+			$.set_attribute(g, 'transform', `translate(${$$props.DiamondWidth - 75}, ${$$props.DiamondHeight + 75})`);
+			$.set_attribute(g_1, 'transform', `translate(0,${marginTop() ?? ''})`);
+			$.set_attribute(g_2, 'transform', `translate(${$0 ?? ''},-12)`);
+		},
+		[() => $.get(xScale)(0)]
+	);
+
+	$.append($$anchor, g);
+	$.pop();
+}
+
+var root_1 = $.from_svg(`<rect stroke="whitesmoke" stroke-width="1"></rect>`);
+var root_3 = $.from_svg(`<g class="legend-title"><text font-size="13">Counts per cell</text></g>`);
+var root_2 = $.from_svg(`<g class="legend-text"><text font-size="10" dx="20"> </text></g><!>`, 1);
+var root$1 = $.from_svg(`<g class="legend-container"></g><!>`, 1);
+
+function Legend($$anchor, $$props) {
+	$.push($$props, true);
+
+	const N_CATEGO = 20;
+	const myramp = range(N_CATEGO).map((i) => rgb(interpolateInferno(i / (N_CATEGO - 1))).hex());
+	const color = scaleOrdinal(range(N_CATEGO), myramp);
+	let height = 370;
+	const margin = { right: 40, top: 65, left: 10 };
+	let innerHeight = $.derived(() => height - margin.top - margin.right);
+	let max_rank = $.derived(() => max($$props.diamond_dat, (d) => d.rank_L[1]));
+	let y = $.derived(() => scaleBand().domain(color.domain().reverse()).rangeRound([0, $.get(innerHeight)]));
+	// Use max_count_log if provided, otherwise calculate from data
+	let logDomain = $.derived(() => $$props.max_count_log || 10 ** Math.ceil(Math.log10($.get(max_rank)) - 1));
+	let logY = $.derived(() => scaleLog().domain([1, $.get(logDomain)]).rangeRound([0, $.get(innerHeight)]).nice());
+	let logFormat10 = $.derived(() => $.get(logY).tickFormat());
+	let yTicks = $.derived(() => $.get(logY).ticks());
+	var fragment = root$1();
+	var g = $.first_child(fragment);
+
+	$.each(g, 21, () => color.domain(), $.index, ($$anchor, d) => {
+		var rect = root_1();
+
+		$.set_attribute(rect, 'x', 0);
+		$.set_attribute(rect, 'width', 14);
+		$.set_attribute(rect, 'height', 13);
+
+		$.template_effect(
+			($0, $1) => {
+				$.set_attribute(rect, 'y', $0);
+				$.set_attribute(rect, 'fill', $1);
+			},
+			[
+				() => $.get(y)($.get(d)),
+				() => color($.get(d))
+			]
+		);
+
+		$.append($$anchor, rect);
+	});
+
+	$.reset(g);
+
+	var node = $.sibling(g);
+
+	$.each(node, 17, () => $.get(yTicks), $.index, ($$anchor, tick, i) => {
+		var fragment_1 = root_2();
+		var g_1 = $.first_child(fragment_1);
+		var text = $.child(g_1);
+		var text_1 = $.child(text, true);
+
+		$.reset(text);
+		$.reset(g_1);
+
+		var node_1 = $.sibling(g_1);
+
+		{
+			var consequent = ($$anchor) => {
+				var g_2 = root_3();
+				var text_2 = $.child(g_2);
+
+				$.set_attribute(text_2, 'dy', "9");
+				$.reset(g_2);
+
+				$.template_effect(($0) => $.set_attribute(g_2, 'transform', `translate(${margin.left}, ${$0 ?? ''})`), [
+					() => $$props.DiamondHeight + $.get(logY)($.get(tick)) - margin.top
+				]);
+
+				$.append($$anchor, g_2);
+			};
+
+			$.if(node_1, ($$render) => {
+				if (i === $.get(yTicks).length - 1) $$render(consequent);
+			});
+		}
+
+		$.template_effect(
+			($0, $1) => {
+				$.set_attribute(g_1, 'transform', `translate(${margin.left}, ${$0 ?? ''})`);
+				$.set_attribute(text, 'dy', $.get(yTicks).length - 1 == i ? "-3" : "13");
+				$.set_text(text_1, $1);
+			},
+			[
+				() => $$props.DiamondHeight + $.get(logY)($.get(tick)) - margin.top,
+				() => $.get(logFormat10)($.get(tick))
+			]
+		);
+
+		$.append($$anchor, fragment_1);
+	});
+
+	$.template_effect(() => $.set_attribute(g, 'transform', `translate(${margin.left}, ${$$props.DiamondHeight - margin.top})`));
+	$.append($$anchor, fragment);
+	$.pop();
+}
+
+var root = $.from_html(`<div><svg id="allotaxonometer-svg" class="svelte-n6o6ey"><!><!><!><!></svg></div>`);
+
+function Dashboard($$anchor, $$props) {
+	$.push($$props, true);
+
+	let dat = $.prop($$props, 'dat', 3, null),
+		alpha = $.prop($$props, 'alpha', 3, 0.58),
+		divnorm = $.prop($$props, 'divnorm', 3, 1),
+		barData = $.prop($$props, 'barData', 19, () => []),
+		balanceData = $.prop($$props, 'balanceData', 19, () => []),
+		xDomain = $.prop($$props, 'xDomain', 3, undefined),
+		title = $.prop($$props, 'title', 19, () => ['System 1', 'System 2']),
+		maxlog10 = $.prop($$props, 'maxlog10', 3, 0),
+		height = $.prop($$props, 'height', 3, 815),
+		width = $.prop($$props, 'width', 3, 1200),
+		DashboardHeight = $.prop($$props, 'DashboardHeight', 3, 815),
+		DashboardWidth = $.prop($$props, 'DashboardWidth', 3, 1200),
+		DiamondHeight = $.prop($$props, 'DiamondHeight', 3, 600),
+		DiamondWidth = $.prop($$props, 'DiamondWidth', 3, 600),
+		marginInner = $.prop($$props, 'marginInner', 3, 160),
+		marginDiamond = $.prop($$props, 'marginDiamond', 3, 40),
+		max_count_log = $.prop($$props, 'max_count_log', 3, undefined),
+		className = $.prop($$props, 'class', 3, ''),
+		style = $.prop($$props, 'style', 3, ''),
+		showDiamond = $.prop($$props, 'showDiamond', 3, true),
+		showWordshift = $.prop($$props, 'showWordshift', 3, true),
+		showDivergingBar = $.prop($$props, 'showDivergingBar', 3, true),
+		showLegend = $.prop($$props, 'showLegend', 3, true),
+		restProps = $.rest_props($$props, [
+			'$$slots',
+			'$$events',
+			'$$legacy',
+			'dat',
+			'alpha',
+			'divnorm',
+			'barData',
+			'balanceData',
+			'xDomain',
+			'title',
+			'maxlog10',
+			'height',
+			'width',
+			'DashboardHeight',
+			'DashboardWidth',
+			'DiamondHeight',
+			'DiamondWidth',
+			'marginInner',
+			'marginDiamond',
+			'max_count_log',
+			'class',
+			'style',
+			'showDiamond',
+			'showWordshift',
+			'showDivergingBar',
+			'showLegend'
+		]);
+
+	let max_shift = $.derived(() => barData().length > 0 ? Math.max(...barData().map((d) => Math.abs(d.metric))) : 1);
+
+	let wordshiftXDomain = $.derived(() => xDomain() || [
+		-$.get(max_shift) * 1.5,
+		$.get(max_shift) * 1.5
+	]);
+
+	var div = root();
+
+	$.attribute_effect(
+		div,
+		() => ({
+			class: `allotaxonometer-dashboard ${className() ?? ''}`,
+			style: style(),
+			...restProps
+		}),
+		undefined,
+		'svelte-n6o6ey'
+	);
+
+	var svg = $.child(div);
+	var node = $.child(svg);
+
+	{
+		var consequent = ($$anchor) => {
+			Diamond($$anchor, {
+				get dat() {
+					return dat();
+				},
+				get alpha() {
+					return alpha();
+				},
+				get divnorm() {
+					return divnorm();
+				},
+				get title() {
+					return title();
+				},
+				get maxlog10() {
+					return maxlog10();
+				},
+				get DiamondHeight() {
+					return DiamondHeight();
+				},
+				get marginInner() {
+					return marginInner();
+				},
+				get marginDiamond() {
+					return marginDiamond();
+				}
+			});
+		};
+
+		$.if(node, ($$render) => {
+			if (showDiamond() && dat()) $$render(consequent);
+		});
+	}
+
+	var node_1 = $.sibling(node);
+
+	{
+		var consequent_1 = ($$anchor) => {
+			Wordshift($$anchor, {
+				get barData() {
+					return barData();
+				},
+				get DashboardHeight() {
+					return DashboardHeight();
+				},
+				get DashboardWidth() {
+					return DashboardWidth();
+				},
+				get xDomain() {
+					return $.get(wordshiftXDomain);
+				},
+				width: 640,
+				marginLeft: 140
+			});
+		};
+
+		$.if(node_1, ($$render) => {
+			if (showWordshift() && barData().length > 0) $$render(consequent_1);
+		});
+	}
+
+	var node_2 = $.sibling(node_1);
+
+	{
+		var consequent_2 = ($$anchor) => {
+			DivergingBarChart($$anchor, {
+				get data() {
+					return balanceData();
+				},
+				get DiamondHeight() {
+					return DiamondHeight();
+				},
+				get DiamondWidth() {
+					return DiamondWidth();
+				}
+			});
+		};
+
+		$.if(node_2, ($$render) => {
+			if (showDivergingBar() && balanceData().length > 0) $$render(consequent_2);
+		});
+	}
+
+	var node_3 = $.sibling(node_2);
+
+	{
+		var consequent_3 = ($$anchor) => {
+			Legend($$anchor, {
+				get diamond_dat() {
+					return dat().counts;
+				},
+				get DiamondHeight() {
+					return DiamondHeight();
+				},
+				get max_count_log() {
+					return max_count_log();
+				}
+			});
+		};
+
+		$.if(node_3, ($$render) => {
+			if (showLegend() && dat()) $$render(consequent_3);
+		});
+	}
+
+	$.reset(svg);
+	$.reset(div);
+
+	$.template_effect(() => {
+		$.set_attribute(svg, 'height', height());
+		$.set_attribute(svg, 'width', width());
+	});
+
+	$.append($$anchor, div);
+	$.pop();
+}
+
+// Takes arrays, returns a Set object containing the union of both arrays
+ function getUnions(x,y) {
+  let a = new Set(x); // convert array x to a Set object
+  let b = new Set(y); // convert array y to a Set object
+  return new Set([...a, ...b]); // return a new Set object containing the union of a and b
+}
+
+// Takes arrays, returns a Set object
+function setdiff(x,y) {
+  let a = new Set(x); // convert array x to a Set object
+  let b = new Set(y); // convert array y to a Set object
+  // return a new Set object containing elements in a that are not present in b
+  return new Set(       
+    [...a].filter(x => !b.has(x)));
+} 
+
+function which(x) {
+  // Which indices are TRUE?
+  // Description:
+  //   Give the ‘TRUE’ indices of a logical object, allowing for array indices.
+  // Arguments:
+  //   x: a ‘logical’ vector or array.
+  return x.reduce(
+      (out, bool, index) => bool ? out.concat(index) : out, 
+      []
+    )
+}
+
+
+function matlab_sort(A, rev) {
+  // Inspired by matlab, this functions keep track of the original indices of an array after sorting.
+  // Returns both the sorted vector `v` and the original indices.
+  //
+  // examples 
+  // A = [5, 4, 1, 2, 3]
+  // ([1, 2, 3, 3, 4, 5], [3, 4, 5, 6, 2, 1])
+  
+  let sorted = rev ? A.slice().sort((a, b) => b - a) : A.slice().sort((a, b) => a - b);
+
+  const A_cp = A.slice();
+  const orig_idx = [];
+  for (let i = 0; i < A.length; ++i) {
+    orig_idx.push(A_cp.indexOf(sorted[i]));
+    delete A_cp[A_cp.indexOf(sorted[i])];
   }
-  $$payload.out += `<!--]--></g><line x1="20" y1="180" x2="380" y2="180" stroke="#666" stroke-width="1"></line><line x1="20" y1="20" x2="20" y2="180" stroke="#666" stroke-width="1"></line><text x="200" y="198" text-anchor="middle" font-size="12" fill="#666">X Axis</text><text x="12" y="100" text-anchor="middle" font-size="12" fill="#666" transform="rotate(-90, 12, 100)">Y Axis</text></svg>`;
-  $.pop();
+  
+  return {'value': sorted, 'orig_idx': orig_idx}
 }
-function AxisX($$payload, $$props) {
-  $.push();
-  let {
-    height,
-    scale,
-    title
-  } = $$props;
-  let logFormat10 = scale.tickFormat();
-  let xTicks = scale.ticks();
-  const each_array = $.ensure_array_like(xTicks);
-  $$payload.out += `<g class="axis x"${$.attr("transform", `translate(0, ${$.stringify(height)})`)}><!--[-->`;
-  for (let index = 0, $$length = each_array.length; index < $$length; index++) {
-    let tick = each_array[index];
-    $$payload.out += `<g class="xtick"${$.attr("transform", `translate(${$.stringify(scale(tick))}, 0)`)}><line x1="0" x2="0" y1="0" y2="6" stroke="hsla(212, 10%, 53%, 1)"></line></g><g class="tick-text"${$.attr("transform", `translate(${$.stringify(scale(tick))}, 0) scale(-1,1) rotate(45)`)}><text font-size="10" dx="13" dy="13">${$.escape(logFormat10(tick))}</text></g>`;
+
+function tiedrank(arr) {
+  // tiedrank(X) computes the ranks of the values in the vector X. If any X values are tied, tiedrank computes their average rank. Same as in matlab.
+  function getIndex(arr, val) {
+    var indexes = [], i;
+    for(i = 0; i < arr.length; i++)
+        if (arr[i] === val)
+           indexes.push(i+1);
+    return indexes.reduce((a, b) => a + b) / indexes.length;
   }
-  $$payload.out += `<!--]--><g class="xlab svelte-1y8xk6i"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(height)}, 0)`)}><text dy="45"${$.attr("x", height / 2)}>Rank r</text><text dy="63"${$.attr("x", height / 2)}>for</text><text dy="80"${$.attr("x", height / 2)}>${$.escape(title[1])}</text><text dy="60"${$.attr("x", height - 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">more →</text><text dy="75"${$.attr("x", height - 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text><text dy="60"${$.attr("x", 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">← less</text><text dy="75"${$.attr("x", 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text></g></g>`;
-  $.pop();
+  
+  const sorted = arr.slice().sort((a, b) => b - a);
+  return arr.map(e => getIndex(sorted, e))
+}
+
+function rank_maxlog10(mixedelements) {
+  // Get maximum of log10 ranks from both systems, then round up
+  let logged_max = [
+    Math.max(...mixedelements[[0]].ranks), Math.max(...mixedelements[[1]].ranks)
+  ].map(Math.log10);
+  return Math.ceil(Math.max(...[logged_max[0], logged_max[1]]))
 }
-function AxisY($$payload, $$props) {
-  $.push();
-  let { height, scale, title } = $$props;
-  let logFormat10 = scale.tickFormat();
-  let yTicks = scale.ticks();
-  const each_array = $.ensure_array_like(yTicks);
-  $$payload.out += `<g class="axis y"${$.attr("transform", `translate(${$.stringify(height)}, 0) scale(-1, 1)`)}><!--[-->`;
-  for (let index = 0, $$length = each_array.length; index < $$length; index++) {
-    let tick = each_array[index];
-    $$payload.out += `<g class="ytick"${$.attr("transform", `translate(0, ${$.stringify(scale(tick))})`)}><line x1="0" x2="-6" y1="0" y2="0" stroke="hsla(212, 10%, 53%, 1)"></line></g><g class="tick-text"${$.attr("transform", `translate(0, ${$.stringify(scale(tick))}) rotate(45)`)}><text font-size="10" dx="-23" dy="10">${$.escape(logFormat10(tick))}</text></g>`;
+
+function rin(arr1, arr2) {
+  // Find element arr1 presents in arr2, i.e. arr1 %in% arr2
+  //
+  // examples
+  // A = ["bob", "george", "jesus"]
+  // B = ["bob", "jesus", "terrence"]
+  // rin(A, B)
+  // [true, false, true]
+  return Array.from(arr1, (x) => {
+    return arr2.indexOf(x) == -1 ? false : true
+  })
+}
+
+function zeros(length){
+  // Create array of all zeros. Similar to matlab.
+  function createArray(length) {
+    var arr = new Array(length || 0),
+        i = length;
+    if (arguments.length > 1) {
+        var args = Array.prototype.slice.call(arguments, 1);
+        while(i--) arr[length-1 - i] = createArray.apply(this, args);
+    }
+    return arr;
   }
-  $$payload.out += `<!--]--><g class="ylab svelte-1y8visx" transform="rotate(90)"><text dy="45"${$.attr("x", height / 2)}>Rank r</text><text dy="63"${$.attr("x", height / 2)}>for</text><text dy="80"${$.attr("x", height / 2)}>${$.escape(title[0])}</text><text dy="60"${$.attr("x", height - 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">more →</text><text dy="75"${$.attr("x", height - 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text><text dy="60"${$.attr("x", 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">← less</text><text dy="75"${$.attr("x", 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text></g></g>`;
-  $.pop();
+  let empty_mat = createArray(length,length);
+  return Array.from(empty_mat, arr => arr.fill(0))
+}
+
+// Builds a mixed element array containing the union of types in elem1 and elem2
+function buildMixedElems(elem1, elem2) {
+   const mixedelem = [[], []];
+   const x = elem1.map(d=>d.types);  // extract types from elem1
+   const y = elem2.map(d=>d.types); // extract types from elem
+   const union = Array.from(getUnions(x,y)); // get the union of x and y
+   mixedelem[0]['types'] = union; // store union in mixedelem array for elem1
+   mixedelem[1]['types'] = union; // store union in mixedelem array for elem2
+   return mixedelem // return mixedelem array
+ }
+ 
+// Combine elements and return a combined array containing counts, ranks, probs, and totalunique
+function combElems(elem1, elem2) {
+   const mixedelem = buildMixedElems(elem1, elem2);  // build mixed elements array
+   const enum_list = [elem1, elem2]; // list containing elem1 and elem2
+
+   for (let j=0; j < enum_list.length; j++) {
+     const enumlist_types = enum_list[j].map(d => d.types); // extract types from enum_list[j]
+     const counts = new Array(mixedelem[j]['types'].length); // initialize counts array
+     const probs = new Array(mixedelem[j]['types'].length);  // initialize probs array
+
+    
+     // for each index in mixed elem[j], which is the union of both systems
+     for (let i=0; i < mixedelem[j]['types'].length; i++) {  // find the index of type mixedelem[j]['types'][i] in system 1 or 2
+       // find the index of type mixedelem[j]['types'][i] in system 1 or 2
+       let idx_type_enumlist_in_elem = enumlist_types.indexOf(mixedelem[j]['types'][i]);
+       // if it exists, grabs counts and probs information else put a 0.
+       counts[i] = idx_type_enumlist_in_elem === -1 ? 0 : enum_list[j][idx_type_enumlist_in_elem]["counts"];
+       probs[i]  = idx_type_enumlist_in_elem === -1 ? 0 : enum_list[j][idx_type_enumlist_in_elem]["probs"];
+     }
+     
+     
+     // store counts, ranks, probs, and totalunique in mixedelem array for elem1 or elem2   
+     mixedelem[j]['counts']      = counts;
+     mixedelem[j]['ranks']       = tiedrank(mixedelem[j]['counts']);
+     mixedelem[j]['probs']       = probs;
+     mixedelem[j]['totalunique'] = getUnions().length;
+
+   }
+
+   return mixedelem  // return mixedelem array
+ }
+
+ // helpers to wrangle data for the balance plot
+function balanceDat(elem1, elem2) {
+  const types_1 = elem1.map(d => d.types);
+  const types_2 = elem2.map(d => d.types);
+  
+  const union_types = getUnions(types_1, types_2);
+  const tot_types = types_1.length+types_2.length;
+  
+  return [ 
+    { y_coord: "total count",     frequency: +(types_2.length / tot_types).toFixed(3) },
+    { y_coord: "total count",     frequency: -(types_1.length / tot_types).toFixed(3) },
+    { y_coord: "all names",       frequency: +(types_2.length / union_types.size).toFixed(3) },
+    { y_coord: "all names",       frequency: -(types_1.length / union_types.size).toFixed(3) },
+    { y_coord: "exclusive names", frequency: +(setdiff(types_2, types_1).size / types_2.length).toFixed(3) },
+    { y_coord: "exclusive names", frequency: -(setdiff(types_1, types_2).size / types_1.length).toFixed(3) } 
+  ]
 }
-function Grid($$payload, $$props) {
-  $.push();
-  let { scale, height, wxy, ncells } = $$props;
-  let xygridLines = scale.ticks(ncells / 2);
-  const each_array = $.ensure_array_like(xygridLines);
-  $$payload.out += `<g class="grid"><!--[-->`;
-  for (let index = 0, $$length = each_array.length; index < $$length; index++) {
-    let yline = each_array[index];
-    $$payload.out += `<g${$.attr("transform", `translate(${$.stringify(wxy(yline))}, 0)`)}><line${$.attr("y1", height)} y2="0" stroke="#d3d3d3" stroke-dasharray="3,3"${$.attr("opacity", index === 0 ? 0 : 1)}></line></g><g${$.attr("transform", `translate(0, ${$.stringify(wxy(yline))})`)}><line${$.attr("x1", height)} x2="0" stroke="#d3d3d3" stroke-dasharray="3,3"${$.attr("opacity", index === 0 ? 0 : 1)}></line></g>`;
+   
+// helper to wrangle the data for the wordshift plot
+function wordShift_dat(me, dat) { 
+  const out = [];
+  for (let i=0; i < me[0]['types'].length; i++) {
+    const rank_diff = me[0]['ranks'][i]-me[1]['ranks'][i];
+    out.push({
+      'type': `${me[0]['types'][i]} (${me[0]['ranks'][i]} ⇋ ${me[1]['ranks'][i]})` ,
+      'rank_diff': rank_diff,
+      'metric': rank_diff < 0 ? -dat.deltas[i] : dat.deltas[i], 
+    });
   }
-  $$payload.out += `<!--]--></g>`;
-  $.pop();
+  
+  return out.slice().sort((a, b) => descending(Math.abs(a.metric), Math.abs(b.metric)))
 }
-function Contours($$payload, $$props) {
-  $.push();
-  let { alpha, maxlog10, rtd, DiamondInnerHeight } = $$props;
-  function alpha_norm_type2(x1, x2, alpha2) {
-    if (alpha2 == 0) {
-      return Math.abs(Math.log(x1 / x2));
-    } else if (alpha2 === Infinity) {
-      return x1 === x2 ? 0 : Math.max(x1, x2);
-    } else {
-      const prefactor = (alpha2 + 1) / alpha2;
-      const power = 1 / (alpha2 + 1);
-      return prefactor * Math.abs(Math.pow(x1, alpha2) - Math.pow(x2, alpha2)) ** power;
+
+// This function calculates the divergence between two arrays of inverse ranks
+// based on the specified alpha value. If alpha is equal to infinity, it returns
+// an array with the maximum of each element in inv_r1 and inv_r2. If alpha is
+// equal to 0, it returns an array with the log of the ratio of the maximum and
+// minimum of 1/inv_r1 and 1/inv_r2 for each element. Otherwise, it returns an
+// array with the absolute value of (alpha + 1)/alpha * (inv_r1^alpha - inv_r2^alpha)^(1/(alpha + 1))
+// for each element.
+
+function divElems(inv_r1, inv_r2, alpha) {
+  if (alpha === Infinity) {
+      return inv_r1.map((d,i) => inv_r1[i] == inv_r2[i] ? 0 : Math.max(inv_r1[i], inv_r2[i]))
+  } else if (alpha == 0) {
+      const x_max = inv_r1.map((d,i) => Math.max(1 / inv_r1[i], 1 / inv_r2[i]));
+      const x_min = inv_r1.map((d,i) => Math.min(1 / inv_r1[i], 1 / inv_r2[i]));
+      return inv_r1.map((d,i) => Math.log10(x_max[i] / x_min[i]))
+  } else {
+      return inv_r1.map((d,i) => (alpha+1) / alpha * Math.abs(inv_r1[i]**alpha - inv_r2[i]**alpha)**(1. / (alpha+1)))
+    }
+}
+
+// This function calculates the normalization factor for the divergence between
+// two arrays of inverse ranks. It first extracts the counts from the mixedelements
+// parameter and finds the indices where the counts are greater than 0. It then
+// calculates the disjoint set for each array based on the number of non-zero
+// counts. If alpha is equal to infinity, it returns the sum of the elements in
+// inv_r1 and inv_r2 for the indices with non-zero counts. If alpha is equal to
+// 0, it returns the sum of the absolute value of the log of the ratio of each
+// element in inv_r1 and the disjoint set for inv_r2, and the absolute value of
+// the log of the ratio of each element in inv_r2 and the disjoint set for inv_r1.
+// Otherwise, it returns the sum of (alpha + 1)/alpha * (inv_r1^alpha - disjoint set^alpha)^(1/(alpha + 1))
+// for each element in inv_r1, and the same for inv_r2.
+
+function norm_divElems(mixedelements, inv_r1, inv_r2, alpha) {
+  const c1 = mixedelements[0]['counts'];  
+  const c2 = mixedelements[1]['counts'];
+
+  const indices1 = which(c1.map(d => d > 0));
+  const indices2 = which(c2.map(d => d > 0));
+
+  const N1 = indices1.length;
+  const N2 = indices2.length;
+
+// This function calculates the disjoint set for a given array of inverse ranks
+  // based on the number of non-zero counts in the array and the number of non-zero
+  // counts in the other array. It returns 1/(number of non-zero counts in other array + 
+  // number of non-zero counts in this array/2)
+  
+  function calc_disjoint(N1, N2) { 
+    return( 1 / (N2 + N1/2) )
+    }
+  
+  const inv_r1_disjoint = calc_disjoint(N1, N2); 
+  const inv_r2_disjoint = calc_disjoint(N2, N1); 
+  
+  if (alpha === Infinity) {
+    
+      return sum(indices1.map((i) => inv_r1[i])) + sum(indices2.map((i) => inv_r2[i]))
+    
+  } else if (alpha === 0) {
+      const term1 = sum(
+        indices1.map((i) => Math.abs(Math.log(inv_r1[i] / inv_r2_disjoint)))
+      );
+      const term2 = sum(
+        indices2.map((i) => Math.abs(Math.log(inv_r2[i] / inv_r1_disjoint)))
+      );
+      return term1 + term2 
+  } else {
+      const term1 = (alpha+1)/alpha * sum( 
+        indices1.map((i) => inv_r1[i]).map( d => (Math.abs(d**alpha) - inv_r2_disjoint**alpha)**(1./(alpha+1) ))
+      );
+      const term2 = (alpha+1)/alpha * sum(
+        indices2.map((i) => inv_r2[i]).map(d => Math.abs(inv_r1_disjoint**alpha - d**alpha)**(1. / (alpha+1)))
+      );
+      return term1 + term2
     }
+}
+
+// This function calculates the rank turbulence divergence for two arrays of mixed
+// elements, using the specified alpha value. It first calculates the arrays of
+// inverse ranks for each mixed element array and then calculates the divergence
+// and normalization factors using the divElems and norm_divElems functions. It
+// returns the divergence divided by the normalization.
+
+function rank_turbulence_divergence(mixedelements, alpha) {
+
+  const inv_r1 = mixedelements[0]['ranks'].map(d => Math.pow(d, -1));
+  const inv_r2 = mixedelements[1]['ranks'].map(d => Math.pow(d, -1));
+  
+  const divergence_elements = divElems(inv_r1, inv_r2, alpha);
+  const normalization = norm_divElems(mixedelements, inv_r1, inv_r2, alpha);
+  
+  return { // the divergence used to wordshift dat to sort name in wordshift plot
+         // is equal to the formula in the upperleft of the diamond plot. However
+         // the formula is a proportionality and miss the normalization constant 
+         // shown here. 
+         // Example: for alpha = infinity, for the rank 1 names on both systems, the formula as written is equal to max(1/1, 1/former_rank) = 1/1 =1
+         // this value of 1 is then divided by the normalization constant.
+         // this constant of proportionality is the reason for the difference between the 1/1 that the written formula gives you
+         // and the decimal value that wordshift_dat states and which is actuallly used to sort the types.
+    'divergence_elements': divergence_elements.map(d => d / normalization), 
+    'normalization': normalization
   }
-  function make_grid(Ninset, tmpr1, tmpr2, alpha2, rtd2) {
-    const deltamatrix = Array.from({ length: Ninset }, () => Array(Ninset).fill(0));
-    for (let i = 0; i < Ninset; i++) {
-      for (let j = 0; j < Ninset; j++) {
-        const divElem = alpha_norm_type2(1 / tmpr1[i], 1 / tmpr2[j], alpha2);
-        deltamatrix[i][j] = divElem / rtd2.normalization;
+}
+
+const VOID       = -1;
+const PRIMITIVE  = 0;
+const ARRAY      = 1;
+const OBJECT     = 2;
+const DATE       = 3;
+const REGEXP     = 4;
+const MAP        = 5;
+const SET        = 6;
+const ERROR      = 7;
+const BIGINT     = 8;
+// export const SYMBOL = 9;
+
+const env = typeof self === 'object' ? self : globalThis;
+
+const deserializer = ($, _) => {
+  const as = (out, index) => {
+    $.set(index, out);
+    return out;
+  };
+
+  const unpair = index => {
+    if ($.has(index))
+      return $.get(index);
+
+    const [type, value] = _[index];
+    switch (type) {
+      case PRIMITIVE:
+      case VOID:
+        return as(value, index);
+      case ARRAY: {
+        const arr = as([], index);
+        for (const index of value)
+          arr.push(unpair(index));
+        return arr;
+      }
+      case OBJECT: {
+        const object = as({}, index);
+        for (const [key, index] of value)
+          object[unpair(key)] = unpair(index);
+        return object;
       }
-      deltamatrix[i][i] = -1;
-      if (i < Ninset - 1) {
-        deltamatrix[i][i + 1] = -1;
-        deltamatrix[i + 1][i] = -1;
+      case DATE:
+        return as(new Date(value), index);
+      case REGEXP: {
+        const {source, flags} = value;
+        return as(new RegExp(source, flags), index);
+      }
+      case MAP: {
+        const map = as(new Map, index);
+        for (const [key, index] of value)
+          map.set(unpair(key), unpair(index));
+        return map;
+      }
+      case SET: {
+        const set = as(new Set, index);
+        for (const index of value)
+          set.add(unpair(index));
+        return set;
+      }
+      case ERROR: {
+        const {name, message} = value;
+        return as(new env[name](message), index);
+      }
+      case BIGINT:
+        return as(BigInt(value), index);
+      case 'BigInt':
+        return as(Object(BigInt(value)), index);
+      case 'ArrayBuffer':
+        return as(new Uint8Array(value).buffer, value);
+      case 'DataView': {
+        const { buffer } = new Uint8Array(value);
+        return as(new DataView(buffer), value);
       }
     }
-    return deltamatrix;
+    return as(new env[type](value), index);
+  };
+
+  return unpair;
+};
+
+/**
+ * @typedef {Array<string,any>} Record a type representation
+ */
+
+/**
+ * Returns a deserialized value from a serialized array of Records.
+ * @param {Record[]} serialized a previously serialized value.
+ * @returns {any}
+ */
+const deserialize = serialized => deserializer(new Map, serialized)(0);
+
+const EMPTY = '';
+
+const {toString} = {};
+const {keys} = Object;
+
+const typeOf = value => {
+  const type = typeof value;
+  if (type !== 'object' || !value)
+    return [PRIMITIVE, type];
+
+  const asString = toString.call(value).slice(8, -1);
+  switch (asString) {
+    case 'Array':
+      return [ARRAY, EMPTY];
+    case 'Object':
+      return [OBJECT, EMPTY];
+    case 'Date':
+      return [DATE, EMPTY];
+    case 'RegExp':
+      return [REGEXP, EMPTY];
+    case 'Map':
+      return [MAP, EMPTY];
+    case 'Set':
+      return [SET, EMPTY];
+    case 'DataView':
+      return [ARRAY, asString];
   }
-  function filter_contours(tmpcontours, Ninset, maxlog102) {
-    const chart2val = d3.scaleLinear().domain([0, Ninset]).range([0, maxlog102]);
-    let out = [];
-    tmpcontours.forEach((contour) => {
-      contour.coordinates.forEach((pair, i) => {
-        const tmpr1 = pair[0].map((d) => d[0]);
-        const tmpr2 = pair[0].map((d) => d[1]);
-        const filteredPairs = [];
-        for (let index = 0; index < tmpr1.length - 1; index++) {
-          const x1 = chart2val(tmpr1[index]);
-          const x2 = chart2val(tmpr2[index]);
-          const tmpxrot = Math.abs(x2 - x1) / Math.sqrt(2);
-          if (Math.abs(tmpxrot) >= 0.1 & x1 != maxlog102 & x2 != 0 & x1 != 0 & x2 != maxlog102) {
-            filteredPairs.push([x1, x2]);
+
+  if (asString.includes('Array'))
+    return [ARRAY, asString];
+
+  if (asString.includes('Error'))
+    return [ERROR, asString];
+
+  return [OBJECT, asString];
+};
+
+const shouldSkip = ([TYPE, type]) => (
+  TYPE === PRIMITIVE &&
+  (type === 'function' || type === 'symbol')
+);
+
+const serializer = (strict, json, $, _) => {
+
+  const as = (out, value) => {
+    const index = _.push(out) - 1;
+    $.set(value, index);
+    return index;
+  };
+
+  const pair = value => {
+    if ($.has(value))
+      return $.get(value);
+
+    let [TYPE, type] = typeOf(value);
+    switch (TYPE) {
+      case PRIMITIVE: {
+        let entry = value;
+        switch (type) {
+          case 'bigint':
+            TYPE = BIGINT;
+            entry = value.toString();
+            break;
+          case 'function':
+          case 'symbol':
+            if (strict)
+              throw new TypeError('unable to serialize ' + type);
+            entry = null;
+            break;
+          case 'undefined':
+            return as([VOID], value);
+        }
+        return as([TYPE, entry], value);
+      }
+      case ARRAY: {
+        if (type) {
+          let spread = value;
+          if (type === 'DataView') {
+            spread = new Uint8Array(value.buffer);
+          }
+          else if (type === 'ArrayBuffer') {
+            spread = new Uint8Array(value);
           }
+          return as([type, [...spread]], value);
         }
-        if (filteredPairs.length > 0) {
-          out.push(filteredPairs);
+
+        const arr = [];
+        const index = as([TYPE, arr], value);
+        for (const entry of value)
+          arr.push(pair(entry));
+        return index;
+      }
+      case OBJECT: {
+        if (type) {
+          switch (type) {
+            case 'BigInt':
+              return as([type, value.toString()], value);
+            case 'Boolean':
+            case 'Number':
+            case 'String':
+              return as([type, value.valueOf()], value);
+          }
         }
-      });
-    });
-    return out;
-  }
-  function get_contours(alpha2, maxlog102, rtd2) {
-    const Ninset = 10 ** 3;
-    const tmpr1 = d3.range(0, 1e3).map((d) => Math.pow(10, d / 999 * 5));
-    const tmpr2 = d3.range(0, 1e3).map((d) => Math.pow(10, d / 999 * 5));
-    const Ncontours = 10;
-    const scale = d3.scaleLinear().domain([0, Ncontours + 1]).range([1, tmpr1.length]);
-    const contour_indices = d3.range(Ncontours + 2).map((i) => Math.round(scale(i)));
-    const grid = make_grid(Ninset, tmpr1, tmpr2, alpha2, rtd2);
-    const indices = contour_indices.slice(1, -1);
-    const lastRow = grid[grid.length - 1];
-    const heights = indices.map((index) => lastRow[index]);
-    const logTmpr = tmpr1.map(Math.log10);
-    const contourGenerator = d3.contours().size([logTmpr.length, logTmpr.length]).thresholds(heights);
-    const flatDeltamatrix = grid.flat();
-    const tmpcontours = contourGenerator(flatDeltamatrix);
-    return filter_contours(tmpcontours, Ninset, maxlog102);
-  }
-  let mycontours = get_contours(alpha, maxlog10, rtd);
-  const x = d3.scaleLinear([0, maxlog10], [0, DiamondInnerHeight]);
-  const y = d3.scaleLinear([maxlog10, 0], [DiamondInnerHeight, 0]);
-  const pathData = d3.line().x((d, i) => x(d[0])).y((d, i) => y(d[1]));
-  const each_array = $.ensure_array_like(mycontours);
-  $$payload.out += `<g class="contours"><!--[-->`;
-  for (let index = 0, $$length = each_array.length; index < $$length; index++) {
-    let contour = each_array[index];
-    $$payload.out += `<path fill="none" stroke="grey"${$.attr("d", pathData(contour))} stroke-width="0.9" stroke-opacity="0.9"></path>`;
-  }
-  $$payload.out += `<!--]--></g>`;
-  $.pop();
-}
-function Diamond($$payload, $$props) {
-  $.push();
-  let {
-    diamond_count,
-    diamond_dat,
-    margin,
-    DiamondInnerHeight,
-    trueDiamondHeight,
-    alpha,
-    maxlog10,
-    rtd,
-    title
-  } = $$props;
-  function get_relevant_types(diamond_dat2) {
-    const ncells2 = 60;
-    const bin_size = 1.5;
-    const cummulative_bin = d3.range(0, ncells2, bin_size);
-    const relevant_types2 = [];
-    for (let sys of ["right", "left"]) {
-      for (let i = 1; i < cummulative_bin.length; i++) {
-        const filtered_dat = diamond_dat2.filter((d) => d.value > 0 && d.which_sys == sys).filter((d) => d.coord_on_diag >= cummulative_bin[i - 1] && d.coord_on_diag < cummulative_bin[i]);
-        if (filtered_dat.length > 0) {
-          const cos_dists = filtered_dat.map((d) => d.cos_dist);
-          const max_dist = cos_dists.reduce((a, b) => {
-            return Math.max(a, b);
-          });
-          const max_dist_idx = cos_dists.indexOf(max_dist);
-          const types = filtered_dat[max_dist_idx]["types"].split(",");
-          const name = types[Math.floor(Math.random() * types.length)];
-          relevant_types2.push(name);
+
+        if (json && ('toJSON' in value))
+          return pair(value.toJSON());
+
+        const entries = [];
+        const index = as([TYPE, entries], value);
+        for (const key of keys(value)) {
+          if (strict || !shouldSkip(typeOf(value[key])))
+            entries.push([pair(key), pair(value[key])]);
         }
+        return index;
+      }
+      case DATE:
+        return as([TYPE, value.toISOString()], value);
+      case REGEXP: {
+        const {source, flags} = value;
+        return as([TYPE, {source, flags}], value);
+      }
+      case MAP: {
+        const entries = [];
+        const index = as([TYPE, entries], value);
+        for (const [key, entry] of value) {
+          if (strict || !(shouldSkip(typeOf(key)) || shouldSkip(typeOf(entry))))
+            entries.push([pair(key), pair(entry)]);
+        }
+        return index;
+      }
+      case SET: {
+        const entries = [];
+        const index = as([TYPE, entries], value);
+        for (const entry of value) {
+          if (strict || !shouldSkip(typeOf(entry)))
+            entries.push(pair(entry));
+        }
+        return index;
       }
     }
-    return relevant_types2;
-  }
-  function rin(arr1, arr2) {
-    return Array.from(arr1, (x) => {
-      return arr2.indexOf(x) == -1 ? false : true;
-    });
-  }
-  let relevant_types = get_relevant_types(diamond_dat);
-  let max_rank_raw = d3.range(d3.max(diamond_count, (d) => d.x1));
-  let max_rank = d3.max(diamond_dat, (d) => d.rank_L[1]);
-  let rounded_max_rank = 10 ** Math.ceil(Math.max(Math.log10(max_rank)));
-  let ncells = d3.max(max_rank_raw);
-  let xyDomain = [1, rounded_max_rank];
-  let linScale = d3.scaleLinear().domain([0, ncells - 1]).range([0, DiamondInnerHeight]);
-  let wxy = d3.scaleBand().domain(max_rank_raw).range([0, DiamondInnerHeight]);
-  let logScale = d3.scaleLog().domain(xyDomain).range([0, DiamondInnerHeight]).nice();
-  let xy = d3.scaleBand().domain(max_rank_raw).range([0, trueDiamondHeight]);
-  let color_scale = d3.scaleSequentialLog().domain([rounded_max_rank, 1]).interpolator(d3.interpolateInferno);
-  let blue_triangle = [
-    [DiamondInnerHeight, DiamondInnerHeight],
-    [0, 0],
-    [0, DiamondInnerHeight]
-  ].join(" ");
-  let grey_triangle = [
-    [DiamondInnerHeight, DiamondInnerHeight],
-    [0, 0],
-    [DiamondInnerHeight, 0]
-  ].join(" ");
-  function filter_labs(d, relevant_types2) {
-    return rin(relevant_types2, d.types.split(",")).some((x) => x === true);
-  }
-  const each_array = $.ensure_array_like(diamond_dat);
-  const each_array_1 = $.ensure_array_like(diamond_dat.filter((d) => filter_labs(d, relevant_types)));
-  $$payload.out += `<g class="diamond-chart"${$.attr("transform", `translate(360, 0) scale (-1,1) rotate(45) translate(${$.stringify(margin.inner / 2)}, ${$.stringify(margin.inner / 2)})`)}><polygon${$.attr("points", blue_triangle)} fill="#89CFF0" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon><polygon${$.attr("points", grey_triangle)} fill="grey" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon>`;
-  AxisX($$payload, {
-    height: DiamondInnerHeight,
-    scale: logScale,
-    title
-  });
-  $$payload.out += `<!---->`;
-  AxisY($$payload, {
-    height: DiamondInnerHeight,
-    scale: logScale,
-    title
-  });
-  $$payload.out += `<!---->`;
-  Grid($$payload, {
-    height: DiamondInnerHeight,
-    wxy,
-    ncells,
-    scale: linScale
-  });
-  $$payload.out += `<!----><!--[-->`;
-  for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
-    let d = each_array[$$index];
-    $$payload.out += `<rect${$.attr("x", xy(d.x1))}${$.attr("y", xy(d.y1))}${$.attr("width", xy.bandwidth())}${$.attr("height", xy.bandwidth())}${$.attr("fill", color_scale(d.value))}${$.attr("opacity", d.value === null ? 0 : 1)} stroke="black" stroke-width="0.2"></rect>`;
-  }
-  $$payload.out += `<!--]--><!--[-->`;
-  for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
-    let d = each_array_1[$$index_1];
-    $$payload.out += `<g class="diamond-lab"${$.attr("transform", `
-            scale(1,-1) 
-            rotate(-90) 
-            rotate(-45, ${$.stringify(xy(d.x1))}, ${$.stringify(xy(d.y1))}) 
-            translate(${$.stringify(d.which_sys === "right" ? xy(Math.sqrt(d.cos_dist)) * 1.5 : -xy(Math.sqrt(d.cos_dist)) * 1.5)}, 0)
-        `)}><text${$.attr("x", xy(d.x1))}${$.attr("y", Number.isInteger(d.coord_on_diag) ? xy(d.y1) : xy(d.y1) - 1)} dy="20" font-size="10"${$.attr("text-anchor", d.x1 - d.y1 <= 0 ? "start" : "end")}>${$.escape(d.types.split(",")[0])}</text></g>`;
-  }
-  $$payload.out += `<!--]-->`;
-  Contours($$payload, { alpha, maxlog10, rtd, DiamondInnerHeight });
-  $$payload.out += `<!----></g>`;
-  $.pop();
-}
-function Wordshift($$payload, $$props) {
-  $.push();
-  let { barData, DashboardHeight, DashboardWidth } = $$props;
-  let margin = { top: 80, left: 140, right: 50, bottom: 10 };
-  let width = 640;
-  let yPadding = 0.2;
-  let Y = d3.map(barData, (d) => d.type);
-  let max_shift = d3.max(barData, (d) => Math.abs(d.metric)) * 1.5;
-  let xDomain = [-max_shift, max_shift];
-  let yDomain = new d3.InternSet(Y);
-  let xRange = [
-    DashboardWidth - width + margin.left,
-    DashboardWidth - margin.right
-  ];
-  let yRange = [margin.top, DashboardHeight - margin.bottom];
-  let xScale = d3.scaleLinear().domain(xDomain).range(xRange);
-  let yScale = d3.scaleBand(yDomain, yRange).padding(yPadding);
-  let xTicks = xScale.ticks(width / 80);
-  const colors = ["lightgrey", "lightblue"];
-  const each_array = $.ensure_array_like(xTicks);
-  const each_array_1 = $.ensure_array_like(barData);
-  $$payload.out += `<g class="barChart-container svelte-37sv8o"><g class="axis x"${$.attr("transform", `translate(0, ${$.stringify(margin.top)})`)}><!--[-->`;
-  for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
-    let tick = each_array[$$index];
-    $$payload.out += `<g class="tick"><line${$.attr("x1", xScale(tick))} y1="0"${$.attr("x2", xScale(tick))}${$.attr("y2", DashboardHeight - margin.top - margin.bottom)} stroke="hsla(212, 10%, 53%, 1)" stroke-opacity="0.2">${$.escape(tick)}</line><text${$.attr("x", xScale(tick))} y="-12" font-size="0.8em">${$.escape(tick * 100)}%</text></g>`;
-  }
-  $$payload.out += `<!--]--></g><!--[-->`;
-  for (let i = 0, $$length = each_array_1.length; i < $$length; i++) {
-    let d = each_array_1[i];
-    $$payload.out += `<rect${$.attr("x", Math.min(xScale(0), xScale(d.metric)))}${$.attr("y", yScale(d.type))}${$.attr("fill", colors[d.metric > 0 ? colors.length - 1 : 0])}${$.attr("width", Math.abs(xScale(d.metric) - xScale(0)))}${$.attr("height", yScale.bandwidth())}></rect><text${$.attr("x", Math.min(xScale(0), xScale(d.metric)))}${$.attr("y", yScale(d.type))} dy="14" font-size="0.7em">${$.escape(d.type)}</text>`;
-  }
-  $$payload.out += `<!--]--></g>`;
-  $.pop();
-}
-function DivergingBarChart($$payload, $$props) {
-  $.push();
-  let {
-    test_elem_1,
-    test_elem_2,
-    DiamondHeight,
-    DiamondWidth
-  } = $$props;
-  const setdiff = (x, y) => {
-    let a = new Set(x);
-    let b = new Set(y);
-    return new Set([...a].filter((x2) => !b.has(x2)));
-  };
-  const union = (x, y) => {
-    let a = new Set(x);
-    let b = new Set(y);
-    return /* @__PURE__ */ new Set([...a, ...b]);
+
+    const {message} = value;
+    return as([TYPE, {name: type, message}], value);
   };
-  let types_1 = test_elem_1.map((d) => d.types);
-  let types_2 = test_elem_2.map((d) => d.types);
-  let union_types = union(types_1, types_2);
-  let tot_types = types_1.length + types_2.length;
-  let width = 200;
-  let margin = { right: 40, top: 30, left: 40, bottom: 10 };
-  let yPadding = 0.5;
-  let colors = ["lightgrey", "lightblue"];
-  let dat = [
-    {
-      y_coord: "total count",
-      frequency: +(types_2.length / tot_types).toFixed(3)
-    },
-    {
-      y_coord: "total count",
-      frequency: -(types_1.length / tot_types).toFixed(3)
-    },
-    {
-      y_coord: "all names",
-      frequency: +(types_2.length / union_types.size).toFixed(3)
-    },
-    {
-      y_coord: "all names",
-      frequency: -(types_1.length / union_types.size).toFixed(3)
-    },
-    {
-      y_coord: "exclusive names",
-      frequency: +(setdiff(types_2, types_1).size / types_2.length).toFixed(3)
-    },
-    {
-      y_coord: "exclusive names",
-      frequency: -(setdiff(types_1, types_2).size / types_1.length).toFixed(3)
-    }
-  ];
-  let X = dat.map((d) => d.frequency);
-  let Y = dat.map((d) => d.y_coord);
-  let xRange = [margin.left, width - margin.right];
-  let xDomain = extent$1(X);
-  let yDomain = new InternSet(Y);
-  let height = Math.ceil((yDomain.size + yPadding) * 25) + margin.top + margin.bottom;
-  let I = range$1(X.length).filter((i) => yDomain.has(Y[i]));
-  rollup(I, ([i]) => X[i], (i) => Y[i]);
-  let xScale = scaleLinear$1(xDomain, xRange);
-  let yScale = scaleBand().domain(yDomain).range([margin.top, height - margin.bottom]).padding(yPadding);
-  let format = xScale.tickFormat(100, "%");
-  const each_array = $.ensure_array_like(dat);
-  const each_array_1 = $.ensure_array_like(yScale.domain());
-  $$payload.out += `<g class="balance-chart"${$.attr("transform", `translate(${$.stringify(DiamondWidth - 75)}, ${$.stringify(DiamondHeight + 75)})`)}><!--[-->`;
-  for (let i = 0, $$length = each_array.length; i < $$length; i++) {
-    let d = each_array[i];
-    $$payload.out += `<rect${$.attr("x", Math.min(xScale(0), xScale(d.frequency)))}${$.attr("y", yScale(d.y_coord))}${$.attr("fill", colors[X[i] > 0 ? colors.length - 1 : 0])}${$.attr("width", Math.abs(xScale(d.frequency) - xScale(0)))}${$.attr("height", yScale.bandwidth())}></rect><text${$.attr("x", xScale(X[i]) + Math.sign(X[i] - 0) * 4)}${$.attr("y", yScale(Y[i]) + yScale.bandwidth() / 2)} opacity="0.5" dy="0.35em" font-size="10"${$.attr("text-anchor", d.frequency < 0 ? "end" : "start")}>${$.escape(format(Math.abs(d.frequency)))}</text>`;
-  }
-  $$payload.out += `<!--]--><!--[-->`;
-  for (let i = 0, $$length = each_array_1.length; i < $$length; i++) {
-    let text = each_array_1[i];
-    $$payload.out += `<g class="diverging-ticks"><text${$.attr("x", xScale(0))}${$.attr("y", yScale(text) + yScale.bandwidth() / 2)} dy="-.9em" dx="-3em" font-size="10">${$.escape(text)}</text></g>`;
-  }
-  $$payload.out += `<!--]--></g>`;
-  $.pop();
-}
-function Legend($$payload, $$props) {
-  $.push();
-  let { diamond_dat, DiamondHeight } = $$props;
-  const N_CATEGO = 20;
-  const myramp = range$1(N_CATEGO).map((i) => rgb(interpolateInferno(i / (N_CATEGO - 1))).hex());
-  const color = scaleOrdinal(range$1(N_CATEGO), myramp);
-  let height = 370;
-  const margin = { right: 40, top: 65, left: 10 };
-  let innerHeight = height - margin.top - margin.right;
-  let max_rank = max(diamond_dat, (d) => d.rank_L[1]);
-  let y = scaleBand().domain(color.domain().reverse()).rangeRound([0, innerHeight]);
-  let logY = scaleLog().domain([
-    1,
-    10 ** Math.ceil(Math.max(Math.log10(max_rank)) - 1)
-  ]).rangeRound([0, innerHeight]).nice();
-  let logFormat10 = logY.tickFormat();
-  let yTicks = logY.ticks();
-  const each_array = $.ensure_array_like(color.domain());
-  const each_array_1 = $.ensure_array_like(yTicks);
-  $$payload.out += `<g class="legend-container"${$.attr("transform", `translate(${$.stringify(margin.left)}, ${$.stringify(DiamondHeight - margin.top)})`)}><!--[-->`;
-  for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
-    let d = each_array[$$index];
-    $$payload.out += `<rect${$.attr("x", 0)}${$.attr("y", y(d))}${$.attr("width", 14)}${$.attr("height", 13)}${$.attr("fill", color(d))} stroke="whitesmoke" stroke-width="1"></rect>`;
+
+  return pair;
+};
+
+/**
+ * @typedef {Array<string,any>} Record a type representation
+ */
+
+/**
+ * Returns an array of serialized Records.
+ * @param {any} value a serializable value.
+ * @param {{json?: boolean, lossy?: boolean}?} options an object with a `lossy` or `json` property that,
+ *  if `true`, will not throw errors on incompatible types, and behave more
+ *  like JSON stringify would behave. Symbol and Function will be discarded.
+ * @returns {Record[]}
+ */
+ const serialize = (value, {json, lossy} = {}) => {
+  const _ = [];
+  return serializer(!(json || lossy), !!json, new Map, _)(value), _;
+};
+
+/**
+ * @typedef {Array<string,any>} Record a type representation
+ */
+
+/**
+ * Returns an array of serialized Records.
+ * @param {any} any a serializable value.
+ * @param {{transfer?: any[], json?: boolean, lossy?: boolean}?} options an object with
+ * a transfer option (ignored when polyfilled) and/or non standard fields that
+ * fallback to the polyfill if present.
+ * @returns {Record[]}
+ */
+const structuredClone$1 = typeof structuredClone === "function" ?
+  /* c8 ignore start */
+  (any, options) => (
+    options && ('json' in options || 'lossy' in options) ?
+      deserialize(serialize(any, options)) : structuredClone(any)
+  ) :
+  (any, options) => deserialize(serialize(any, options));
+
+function rank2coord(rank) { return Math.floor(Math.log10(rank) / (1/15)) }
+
+// Augment information already in `me` class with coordinates. 
+function diamond_counts(mixedelements) {
+
+  let maxlog10 = rank_maxlog10(mixedelements); // max of values of me[system]['rank'] in logspace
+  
+  if (maxlog10 < 1) {
+    maxlog10 = 1;
   }
-  $$payload.out += `<!--]--></g><!--[-->`;
-  for (let i = 0, $$length = each_array_1.length; i < $$length; i++) {
-    let tick = each_array_1[i];
-    $$payload.out += `<g class="legend-text"${$.attr("transform", `translate(${$.stringify(margin.left)}, ${$.stringify(DiamondHeight + logY(tick) - margin.top)})`)}><text font-size="10"${$.attr("dy", yTicks.length - 1 == i ? "-3" : "13")} dx="20">${$.escape(logFormat10(tick))}</text></g>`;
-    if (i === yTicks.length - 1) {
-      $$payload.out += "<!--[-->";
-      $$payload.out += `<g class="legend-title"${$.attr("transform", `translate(${$.stringify(margin.left)}, ${$.stringify(DiamondHeight + logY(tick) - margin.top)})`)}><text font-size="13" dy="9">Counts per cell</text></g>`;
-    } else {
-      $$payload.out += "<!--[!-->";
+  
+  const CELL_LENGTH = 1/15;
+  const Ncells = Math.floor(maxlog10/CELL_LENGTH) + 1; 
+
+  // me = mixed elements which is of the form:
+  // [array_from_system_L, array_from_system_R]
+  // where each array is of the form [types:{types}, counts:{counts}, ranks:{ranks}, probs:{probs}, totalunique]
+  // where types is in the order [rank1TypeFromL, rank1TypeFromR, ... rankMaxTypeFromL, rankMaxTypeFromR] and if there is a tie it goes ... ranknTypeFromL, ranknTypeFromR_1, ranknTypeFromR_2, ranknplus1TypeFromL ... Example 1880-2015 charlie and clarence tie from left
+  // counts, ranks, and probs are correct corresponding to the types 
+  const x1s = mixedelements[0]['ranks'].map(r => rank2coord(r)); // Math.floor(Math.log10(rank) / (1/15))
+  const y1s = mixedelements[1]['ranks'].map(r => rank2coord(r));
+
+  // all the combination of coords that exists. There are many duplicated coords.
+  const existing_coords = Array.from(mixedelements[0]['ranks'], (d,i) => { return `(${x1s[i]}, ${y1s[i]})` }); // for i in range(len(me[0]['ranks'])), existing_coords.append('x1s[i], y1s[i]'). or alternatively existing_coords = [str(pair) for pair in zip(x1s, y1s)]
+  // note we make this a tring so that indexOf works later. In python we would use a 2-tuple
+  
+  // return existing_coords
+  
+  const out = [];
+  // iterate through each cell
+  for (var i=0; i < Ncells; i++) { // Ncells is the length of the square matrix (note 1-d length not total number of cells)
+    for (var j=0; j < Ncells; j++) { 
+      
+      // Does coords (i,j) are in existing_coords? 
+      if ( existing_coords.indexOf(`(${i}, ${j})`)  === -1) {  
+        out.push({ types: "", x1: i, y1: j, rank1: "", rank2: "" }); // if it doesnt exist, thats a blank cell, make the data there blank
+      } else { //if that coordinate is full of data
+        const indices_coords_in_exist_coords = which(rin(existing_coords, `(${i}, ${j})`)); //rin(arr1, arr2) = [foo is in arr2 for foo in arr1]. rin([3, 4, 5], [3]) = [true, false, false], then the which is returning the indices of the elements which are true. So in the end this is getting all the indices where '${i}, ${j})' appears in existing_coords. When there are ties, the same coordinate appears multiple times in a row in exisiting_coords and so indices_coords_in_exist_coords will be an array with multiple indices
+
+        for (let z=0; z < indices_coords_in_exist_coords.length; z++ ) {
+          out.push({
+            types: mixedelements[0]['types'][indices_coords_in_exist_coords[z]],
+            x1: i,  
+            y1: j, 
+            rank1: mixedelements[0]['ranks'][indices_coords_in_exist_coords[z]],  
+            rank2: mixedelements[1]['ranks'][indices_coords_in_exist_coords[z]]
+          });
+        }
+     }
     }
-    $$payload.out += `<!--]-->`;
   }
-  $$payload.out += `<!--]-->`;
-  $.pop();
+  // group data by unique coordinates
+  const agg_dat = group(out, d => `${d.x1}, ${d.y1}`);
+
+  return Array.from(agg_dat , ([ key, value ]) => {
+    const x1 = +key.split(", ")[1]; // 2
+    const y1 = +key.split(", ")[0]; // 7
+    return {
+      x1: x1,
+      y1: y1,
+      coord_on_diag: (y1+x1)/2, 
+      cos_dist: (x1-y1)**2,
+      rank: value.map(d => d.types)[0] === ""   ? "" : value.map(d => `(${d.rank1}, ${d.rank2})`)[0],
+      rank_L: value.map(d => d.types)[0] === "" ? "" : extent$1(value.map(d => d.rank1)),
+      rank_R: value.map(d => d.types)[0] === "" ? "" : extent$1(value.map(d => d.rank2)),
+      value: value.map(d => d.types)[0] === ""  ? 0 : value.length,
+      types: value.map(d => d.types).join(', '),
+      which_sys: x1 - y1 <= 0 ? "right" : "left"
+    }
+  })
 }
-function Dashboard($$payload, $$props) {
-  let {
-    diamond_count = [],
-    diamond_dat = [],
-    barData = [],
-    test_elem_1 = null,
-    test_elem_2 = null,
-    height = 815,
-    width = 1200,
-    DiamondHeight = 600,
-    DiamondWidth = 600,
-    DiamondInnerHeight = 440,
-    margin = { inner: 160, diamond: 40 },
-    trueDiamondHeight = 400,
-    alpha = 0.58,
-    maxlog10 = 0,
-    rtd = null,
-    title = ["System 1", "System 2"],
-    class: className = "",
-    style = "",
-    showDiamond = true,
-    showWordshift = true,
-    showDivergingBar = true,
-    showLegend = true,
-    $$slots,
-    $$events,
-    ...restProps
-  } = $$props;
-  $$payload.out += `<div${$.spread_attributes(
-    {
-      class: `allotaxonometer-dashboard ${$.stringify(className)}`,
-      style,
-      ...restProps
-    },
-    "svelte-n6o6ey"
-  )}><svg id="allotaxonometer-svg"${$.attr("height", height)}${$.attr("width", width)} class="svelte-n6o6ey">`;
-  if (showDiamond) {
-    $$payload.out += "<!--[-->";
-    Diamond($$payload, {
-      diamond_count,
-      diamond_dat,
-      DiamondInnerHeight,
-      margin,
-      trueDiamondHeight,
-      alpha,
-      maxlog10,
-      rtd,
-      title
-    });
-  } else {
-    $$payload.out += "<!--[!-->";
-  }
-  $$payload.out += `<!--]-->`;
-  if (showWordshift) {
-    $$payload.out += "<!--[-->";
-    Wordshift($$payload, {
-      barData,
-      DashboardHeight: height,
-      DashboardWidth: width
-    });
-  } else {
-    $$payload.out += "<!--[!-->";
-  }
-  $$payload.out += `<!--]-->`;
-  if (showDivergingBar) {
-    $$payload.out += "<!--[-->";
-    DivergingBarChart($$payload, {
-      test_elem_1,
-      test_elem_2,
-      DiamondHeight,
-      DiamondWidth
-    });
-  } else {
-    $$payload.out += "<!--[!-->";
-  }
-  $$payload.out += `<!--]-->`;
-  if (showLegend) {
-    $$payload.out += "<!--[-->";
-    Legend($$payload, { diamond_dat, DiamondHeight });
-  } else {
-    $$payload.out += "<!--[!-->";
-  }
-  $$payload.out += `<!--]--></svg></div>`;
+
+
+// we expect wordshift to be of the form { divergence_elements: [ length of type ], normalization: float }
+function diamond_count(mixedelements, wordshift) {
+
+  let deltas = wordshift["divergence_elements"];
+  let sorted_div = matlab_sort(deltas, true);
+  let indices_deltas = sorted_div.orig_idx;
+ 
+  deltas = indices_deltas.map(e => deltas[e]);
+
+
+  mixedelements[0]['types']  =  indices_deltas.map(i => mixedelements[0]['types'][i]);  
+  mixedelements[0]['counts']  =  indices_deltas.map(i => mixedelements[0]['counts'][i]);
+  mixedelements[0]['ranks']  =  indices_deltas.map(i => mixedelements[0]['ranks'][i]);
+  mixedelements[0]['probs'] =  indices_deltas.map(i => mixedelements[0]['probs'][i]);
+  
+  mixedelements[1]['types']  =  indices_deltas.map(i => mixedelements[1]['types'][i]);
+  mixedelements[1]['counts']  =  indices_deltas.map(i => mixedelements[1]['counts'][i]);
+  mixedelements[1]['ranks']  =  indices_deltas.map(i => mixedelements[1]['ranks'][i]);
+  mixedelements[1]['probs'] =  indices_deltas.map(i => mixedelements[1]['probs'][i]);
+  
+  const deltas_loss = structuredClone$1(deltas);
+  const deltas_gain = structuredClone$1(deltas);
+
+  which(mixedelements[0]['ranks'].map((d,i) => mixedelements[0]['ranks'][i] > mixedelements[1]['ranks'][i])).map(e => deltas_loss[e] = -1);
+  which(mixedelements[0]['ranks'].map((d,i) => mixedelements[1]['ranks'][i] < mixedelements[1]['ranks'][i])).map(e => deltas_gain[e] = -1);
+
+  
+  const counts = diamond_counts(mixedelements);
+  
+  return({'counts': counts, 'deltas': deltas, 'max_delta_loss': Math.max(...deltas_loss)})
 }
-export {
-  Dashboard,
-  Diamond,
-  DivergingBarChart,
-  Legend,
-  Test,
-  Wordshift
-};
+
+export { Dashboard, Diamond, DivergingBarChart, Legend, Wordshift, balanceDat, combElems, diamond_count, matlab_sort, rank_maxlog10, rank_turbulence_divergence, rin, tiedrank, which, wordShift_dat, zeros };