allotaxonometer-ui 0.1.2 → 0.1.3

package/dist/index.js

@@ -1,67 +1,8 @@
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
-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';
-
-var root_1$8 = $.from_svg(`<circle stroke="white" stroke-width="1"></circle>`);
-var root$9 = $.from_svg(`<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"> </text><g class="chart"></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>`);
-
-function Test($$anchor, $$props) {
-	$.push($$props, true);
-
-	let message = $.prop($$props, 'message', 3, "Hello World"),
-		data = $.prop($$props, 'data', 19, () => []);
-
-	// If no data provided, generate some test data
-	let testData = data().length > 0
-		? data()
-		: range(10).map((i) => ({
-			x: i,
-			y: Math.sin(i / 2) * 20 + 50,
-			value: Math.random()
-		}));
-	// Pure D3 calculations - no DOM manipulation
-	let xScale = scaleLinear().domain(extent(testData, (d) => d.x)).range([20, 380]);
-	let yScale = scaleLinear().domain(extent(testData, (d) => d.y)).range([180, 20]);
-
-	// Calculate positions
-	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%)`
-	}));
-
-	var svg = root$9();
-	var text = $.sibling($.child(svg));
-	var text_1 = $.child(text, true);
-
-	$.reset(text);
-
-	var g = $.sibling(text);
-
-	$.each(g, 21, () => points, $.index, ($$anchor, point) => {
-		var circle = root_1$8();
-
-		$.template_effect(() => {
-			$.set_attribute(circle, 'cx', $.get(point).cx);
-			$.set_attribute(circle, 'cy', $.get(point).cy);
-			$.set_attribute(circle, 'r', $.get(point).r);
-			$.set_attribute(circle, 'fill', $.get(point).fill);
-		});
-
-		$.append($$anchor, circle);
-	});
-
-	$.reset(g);
-	$.next(4);
-	$.reset(svg);
-	$.template_effect(() => $.set_text(text_1, message()));
-	$.append($$anchor, svg);
-	$.pop();
-}
+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>`);
@@ -269,14 +210,14 @@ function Contours($$anchor, $$props) {
 		}
 	}
 
-	function make_grid(Ninset, tmpr1, tmpr2, alpha, rtd) {
+	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 / rtd.normalization;
+				deltamatrix[i][j] = divElem / divnorm;
 			}
 
 			deltamatrix[i][i] = -1;
@@ -319,14 +260,14 @@ function Contours($$anchor, $$props) {
 		return out;
 	}
 
-	function get_contours(alpha, maxlog10, rtd) {
+	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, rtd);
+		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]);
@@ -339,7 +280,7 @@ function Contours($$anchor, $$props) {
 	}
 
 	// Only calculate contours in browser
-	let mycontours = $.derived(() => get_contours($$props.alpha, $$props.maxlog10, $$props.rtd));
+	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]));
@@ -357,32 +298,39 @@ function Contours($$anchor, $$props) {
 	$.pop();
 }
 
-var root_1$3 = $.from_svg(`<rect stroke="black" stroke-width="0.2"></rect>`);
+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) {
-		const ncells = 60;
-		const bin_size = 1.5;
-		const cummulative_bin = d3.range(0, ncells, bin_size);
+		// 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 < cummulative_bin.length; i++) {
-				const filtered_dat = diamond_dat.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]);
+			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) => {
-						return Math.max(a, b);
-					});
-
+					const max_dist = cos_dists.reduce((a, b) => Math.max(a, b));
 					const max_dist_idx = cos_dists.indexOf(max_dist);
-					// Use a simple random selection instead of d3.shuffle during SSR
+					// SSR-safe random selection
 					const types = filtered_dat[max_dist_idx]['types'].split(",");
 					const name = types[Math.floor(Math.random() * types.length)];
 
@@ -395,44 +343,40 @@ function Diamond($$anchor, $$props) {
 	}
 
 	function rin(arr1, arr2) {
-		return Array.from(arr1, (x) => {
-			return arr2.indexOf(x) == -1 ? false : true;
-		});
+		return Array.from(arr1, (x) => arr2.indexOf(x) !== -1);
 	}
 
-	// Wrangling data
-	let relevant_types = $.derived(() => get_relevant_types($$props.diamond_dat));
-	// Extracting constants - all these should be SSR-safe
-	let max_rank_raw = $.derived(() => d3.range(d3.max($$props.diamond_count, (d) => d.x1)));
-	let max_rank = $.derived(() => d3.max($$props.diamond_dat, (d) => d.rank_L[1]));
-	let rounded_max_rank = $.derived(() => 10 ** Math.ceil(Math.max(Math.log10($.get(max_rank)))));
-	let ncells = $.derived(() => d3.max($.get(max_rank_raw)));
+	// 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)]);
-	// All the Scales! - These should be SSR-safe
-	let linScale = $.derived(() => d3.scaleLinear().domain([0, $.get(ncells) - 1]).range([0, $$props.DiamondInnerHeight]));
-	let wxy = $.derived(() => d3.scaleBand().domain($.get(max_rank_raw)).range([0, $$props.DiamondInnerHeight]));
-	let logScale = $.derived(() => d3.scaleLog().domain($.get(xyDomain)).range([0, $$props.DiamondInnerHeight]).nice());
-	let xy = $.derived(() => d3.scaleBand().domain($.get(max_rank_raw)).range([0, $$props.trueDiamondHeight]));
+	// 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 colors
-	let blue_triangle = [
+	// Background triangles (using innerHeight like D3 version)
+	let blue_triangle = $.derived(() => [
 		[
-			$$props.DiamondInnerHeight,
-			$$props.DiamondInnerHeight
+			$.get(innerHeight),
+			$.get(innerHeight)
 		],
 		[0, 0],
-		[0, $$props.DiamondInnerHeight]
-	].join(" ");
+		[0, $.get(innerHeight)]
+	].join(" "));
 
-	let grey_triangle = [
+	let grey_triangle = $.derived(() => [
 		[
-			$$props.DiamondInnerHeight,
-			$$props.DiamondInnerHeight
+			$.get(innerHeight),
+			$.get(innerHeight)
 		],
 		[0, 0],
-		[$$props.DiamondInnerHeight, 0]
-	].join(" ");
+		[$.get(innerHeight), 0]
+	].join(" "));
 
 	function filter_labs(d, relevant_types) {
 		return rin(relevant_types, d.types.split(",")).some((x) => x === true);
@@ -445,7 +389,7 @@ function Diamond($$anchor, $$props) {
 
 	AxisX(node, {
 		get height() {
-			return $$props.DiamondInnerHeight;
+			return $.get(innerHeight);
 		},
 		get scale() {
 			return $.get(logScale);
@@ -459,7 +403,7 @@ function Diamond($$anchor, $$props) {
 
 	AxisY(node_1, {
 		get height() {
-			return $$props.DiamondInnerHeight;
+			return $.get(innerHeight);
 		},
 		get scale() {
 			return $.get(logScale);
@@ -473,7 +417,7 @@ function Diamond($$anchor, $$props) {
 
 	Grid(node_2, {
 		get height() {
-			return $$props.DiamondInnerHeight;
+			return $.get(innerHeight);
 		},
 		get wxy() {
 			return $.get(wxy);
@@ -488,7 +432,7 @@ function Diamond($$anchor, $$props) {
 
 	var node_3 = $.sibling(node_2);
 
-	$.each(node_3, 17, () => $$props.diamond_dat, $.index, ($$anchor, d) => {
+	$.each(node_3, 17, () => $.get(diamond_dat), $.index, ($$anchor, d) => {
 		var rect = root_1$3();
 
 		$.template_effect(
@@ -498,7 +442,9 @@ function Diamond($$anchor, $$props) {
 				$.set_attribute(rect, 'width', $2);
 				$.set_attribute(rect, 'height', $3);
 				$.set_attribute(rect, 'fill', $4);
-				$.set_attribute(rect, 'opacity', $.get(d).value === null ? 0 : 1.);
+				$.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),
@@ -514,7 +460,7 @@ function Diamond($$anchor, $$props) {
 
 	var node_4 = $.sibling(node_3);
 
-	$.each(node_4, 17, () => $$props.diamond_dat.filter((d) => filter_labs(d, $.get(relevant_types))), $.index, ($$anchor, d) => {
+	$.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);
@@ -558,264 +504,325 @@ function Diamond($$anchor, $$props) {
 		get maxlog10() {
 			return $$props.maxlog10;
 		},
-		get rtd() {
-			return $$props.rtd;
+		get divnorm() {
+			return $$props.divnorm;
 		},
 		get DiamondInnerHeight() {
-			return $$props.DiamondInnerHeight;
+			return $.get(innerHeight);
 		}
 	});
 
 	$.reset(g);
 
 	$.template_effect(() => {
-		$.set_attribute(g, 'transform', `translate(360, 0) scale (-1,1) rotate(45) translate(${$$props.margin.inner / 2}, ${$$props.margin.inner / 2})`);
-		$.set_attribute(polygon, 'points', blue_triangle);
-		$.set_attribute(polygon_1, 'points', grey_triangle);
+		$.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="hsla(212, 10%, 53%, 1)" stroke-opacity="0.2"> </line><text y="-12" font-size="0.8em"> </text></g>`);
-var root_2$2 = $.from_svg(`<rect></rect><text dy="14" font-size="0.7em"> </text>`, 1);
-var root$3 = $.from_svg(`<g class="barChart-container svelte-37sv8o"><g class="axis x"></g><!></g>`);
+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 margin = { top: 80, left: 140, right: 50, bottom: 10 };
-	let width = 640;
-	let yPadding = 0.2;
-	let Y = $.derived(() => d3.map($$props.barData, (d) => d.type));
-	let max_shift = $.derived(() => d3.max($$props.barData, (d) => Math.abs(d.metric)) * 1.5);
-	let xDomain = $.derived(() => [-$.get(max_shift), $.get(max_shift)]);
+	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(() => [
-		$$props.DashboardWidth - width + margin.left,
-		$$props.DashboardWidth - margin.right
+		marginLeft(),
+		width() - marginRight()
 	]);
 
+	let computedHeight = $.derived(() => Math.ceil(($.get(yDomain).size + yPadding()) * 25) + marginTop() + marginBottom());
+
 	let yRange = $.derived(() => [
-		margin.top,
-		$$props.DashboardHeight - margin.bottom
+		marginTop(),
+		$.get(computedHeight) - marginBottom()
 	]);
 
-	let xScale = $.derived(() => d3.scaleLinear().domain($.get(xDomain)).range($.get(xRange)));
-	let yScale = $.derived(() => d3.scaleBand($.get(yDomain), $.get(yRange)).padding(yPadding));
-	let xTicks = $.derived(() => $.get(xScale).ticks(width / 80));
-	const colors = ["lightgrey", "lightblue"];
+	// 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(g_1, 21, () => $.get(xTicks), $.index, ($$anchor, tick) => {
+	$.each(node, 17, () => $.get(xTicks), $.index, ($$anchor, tick) => {
 		var g_2 = root_1$2();
 		var line = $.child(g_2);
-		var text = $.child(line, true);
-
-		$.reset(line);
-
-		var text_1 = $.sibling(line);
-		var text_2 = $.child(text_1);
+		var text = $.sibling(line);
+		var text_1 = $.child(text, true);
 
-		$.reset(text_1);
+		$.reset(text);
 		$.reset(g_2);
 
 		$.template_effect(
-			($0, $1, $2) => {
+			($0, $1, $2, $3) => {
 				$.set_attribute(line, 'x1', $0);
 				$.set_attribute(line, 'x2', $1);
-				$.set_attribute(line, 'y2', $$props.DashboardHeight - margin.top - margin.bottom);
-				$.set_text(text, $.get(tick));
-				$.set_attribute(text_1, 'x', $2);
-				$.set_text(text_2, `${$.get(tick) * 100}%`);
+				$.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(xScale)($.get(tick)),
+				() => $.get(format)($.get(tick))
 			]
 		);
 
 		$.append($$anchor, g_2);
 	});
 
-	$.reset(g_1);
+	var text_2 = $.sibling(node);
+	var text_3 = $.child(text_2, true);
 
-	var node = $.sibling(g_1);
+	$.reset(text_2);
+	$.reset(g_1);
 
-	$.each(node, 17, () => $$props.barData, $.index, ($$anchor, d) => {
-		var fragment = root_2$2();
-		var rect = $.first_child(fragment);
-		var text_3 = $.sibling(rect);
-		var text_4 = $.child(text_3, true);
+	var node_1 = $.sibling(g_1);
 
-		$.reset(text_3);
+	$.each(node_1, 17, () => $.get(I), $.index, ($$anchor, i) => {
+		var rect = root_2$2();
 
 		$.template_effect(
-			($0, $1, $2, $3, $4, $5) => {
+			($0, $1, $2, $3) => {
 				$.set_attribute(rect, 'x', $0);
 				$.set_attribute(rect, 'y', $1);
-				$.set_attribute(rect, 'fill', colors[$.get(d).metric > 0 ? colors.length - 1 : 0]);
+				$.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_3, 'x', $4);
-				$.set_attribute(text_3, 'y', $5);
-				$.set_text(text_4, $.get(d).type);
 			},
 			[
-				() => Math.min($.get(xScale)(0), $.get(xScale)($.get(d).metric)),
-				() => $.get(yScale)($.get(d).type),
-				() => Math.abs($.get(xScale)($.get(d).metric) - $.get(xScale)(0)),
-				() => $.get(yScale).bandwidth(),
-				() => Math.min($.get(xScale)(0), $.get(xScale)($.get(d).metric)),
-				() => $.get(yScale)($.get(d).type)
+				() => 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, fragment);
+		$.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(() => $.set_attribute(g_1, 'transform', `translate(0, ${margin.top})`));
+
+	$.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(`<rect></rect><text opacity="0.5" dy="0.35em" font-size="10"> </text>`, 1);
-var root_2$1 = $.from_svg(`<g class="diverging-ticks"><text dy="-.9em" dx="-3em" font-size="10"> </text></g>`);
-var root$2 = $.from_svg(`<g class="balance-chart"><!><!></g>`);
+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);
 
-	const setdiff = (x, y) => {
-		let a = new Set(x);
-		let b = new Set(y);
-
-		return new Set([...a].filter((x) => !b.has(x)));
-	};
-
-	const union = (x, y) => {
-		let a = new Set(x);
-		let b = new Set(y);
+	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)));
 
-		return new Set([...a, ...b]);
-	};
+	// Compute dimensions
+	let xRange = $.derived(() => [
+		marginLeft(),
+		width() - marginRight()
+	]);
 
-	let types_1 = $.derived(() => $$props.test_elem_1.map((d) => d.types));
-	let types_2 = $.derived(() => $$props.test_elem_2.map((d) => d.types));
-	let union_types = $.derived(() => union($.get(types_1), $.get(types_2)));
-	let tot_types = $.derived(() => $.get(types_1).length + $.get(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 height = $.derived(() => Math.ceil(($.get(yDomain).size + yPadding()) * 25) + marginTop() + marginBottom());
 
-	let dat = $.proxy([
-		{
-			y_coord: "total count",
-			frequency: +($.get(types_2).length / $.get(tot_types)).toFixed(3)
-		},
-		{
-			y_coord: "total count",
-			frequency: -($.get(types_1).length / $.get(tot_types)).toFixed(3)
-		},
-		{
-			y_coord: "all names",
-			frequency: +($.get(types_2).length / $.get(union_types).size).toFixed(3)
-		},
-		{
-			y_coord: "all names",
-			frequency: -($.get(types_1).length / $.get(union_types).size).toFixed(3)
-		},
-		{
-			y_coord: "exclusive names",
-			frequency: +(setdiff($.get(types_2), $.get(types_1)).size / $.get(types_2).length).toFixed(3)
-		},
-		{
-			y_coord: "exclusive names",
-			frequency: -(setdiff($.get(types_1), $.get(types_2)).size / $.get(types_1).length).toFixed(3)
-		}
+	let yRange = $.derived(() => [
+		marginTop(),
+		$.get(height) - marginBottom()
 	]);
 
-	let X = $.derived(() => dat.map((d) => d.frequency));
-	let Y = $.derived(() => dat.map((d) => d.y_coord));
-	let xRange = $.derived(() => [margin.left, width - margin.right]);
-	let xDomain = $.derived(() => extent$1($.get(X)));
-	let yDomain = $.derived(() => new InternSet($.get(Y)));
-	let height = $.derived(() => Math.ceil(($.get(yDomain).size + yPadding) * 25) + margin.top + margin.bottom);
-	let I = $.derived(() => range$1($.get(X).length).filter((i) => $.get(yDomain).has($.get(Y)[i])));
-	$.derived(() => rollup($.get(I), ([i]) => $.get(X)[i], (i) => $.get(Y)[i]));
-	let xScale = $.derived(() => scaleLinear$1($.get(xDomain), $.get(xRange)));
-	let yScale = $.derived(() => scaleBand().domain($.get(yDomain)).range([margin.top, $.get(height) - margin.bottom]).padding(yPadding));
+	// 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 node = $.child(g);
+	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))
+			]
+		);
 
-	$.each(node, 17, () => dat, $.index, ($$anchor, d, i) => {
-		var fragment = root_1$1();
+		$.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_1 = $.sibling(rect);
-		var text_2 = $.child(text_1, true);
+		var text = $.sibling(rect);
+		var text_1 = $.child(text, true);
 
-		$.reset(text_1);
+		$.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)[i] > 0 ? colors.length - 1 : 0]);
+				$.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_1, 'x', $4);
-				$.set_attribute(text_1, 'y', $5);
-				$.set_attribute(text_1, 'text-anchor', $.get(d).frequency < 0 ? "end" : "start");
-				$.set_text(text_2, $6);
+				$.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(d).frequency)),
-				() => $.get(yScale)($.get(d).y_coord),
-				() => Math.abs($.get(xScale)($.get(d).frequency) - $.get(xScale)(0)),
+				() => 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)[i]) + Math.sign($.get(X)[i] - 0) * 4,
-				() => $.get(yScale)($.get(Y)[i]) + $.get(yScale).bandwidth() / 2,
-				() => $.get(format)(Math.abs($.get(d).frequency))
+				() => $.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 node_1 = $.sibling(node);
+	var g_2 = $.sibling(node);
 
-	$.each(node_1, 17, () => $.get(yScale).domain(), $.index, ($$anchor, text) => {
-		var g_1 = root_2$1();
-		var text_3 = $.child(g_1);
-		var text_4 = $.child(text_3, true);
+	$.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_3);
-		$.reset(g_1);
+		$.reset(text_2);
 
 		$.template_effect(
 			($0, $1) => {
-				$.set_attribute(text_3, 'x', $0);
-				$.set_attribute(text_3, 'y', $1);
-				$.set_text(text_4, $.get(text));
+				$.set_attribute(text_2, 'y', $0);
+				$.set_attribute(text_2, 'opacity', $1);
+				$.set_text(text_3, $.get(label));
 			},
 			[
-				() => $.get(xScale)(0),
-				() => $.get(yScale)($.get(text)) + $.get(yScale).bandwidth() / 2
+				() => $.get(yScale)($.get(label)) + $.get(yScale).bandwidth() / 2,
+				() => $.get(YX).get($.get(label)) ? "0.5" : "1"
 			]
 		);
 
-		$.append($$anchor, g_1);
+		$.append($$anchor, text_2);
 	});
 
+	$.reset(g_2);
 	$.reset(g);
-	$.template_effect(() => $.set_attribute(g, 'transform', `translate(${$$props.DiamondWidth - 75}, ${$$props.DiamondHeight + 75})`));
+
+	$.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();
 }
@@ -829,19 +836,16 @@ function Legend($$anchor, $$props) {
 	$.push($$props, true);
 
 	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);
+	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)]));
-
-	let logY = $.derived(() => scaleLog().domain([
-		1,
-		10 ** Math.ceil(Math.max(Math.log10($.get(max_rank))) - 1)
-	]).rangeRound([0, $.get(innerHeight)]).nice());
-
+	// 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();
@@ -926,22 +930,25 @@ function Legend($$anchor, $$props) {
 var root = $.from_html(`<div><svg id="allotaxonometer-svg" class="svelte-n6o6ey"><!><!><!><!></svg></div>`);
 
 function Dashboard($$anchor, $$props) {
-	let diamond_count = $.prop($$props, 'diamond_count', 19, () => []),
-		diamond_dat = $.prop($$props, 'diamond_dat', 19, () => []),
+	$.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, () => []),
-		test_elem_1 = $.prop($$props, 'test_elem_1', 3, null),
-		test_elem_2 = $.prop($$props, 'test_elem_2', 3, null),
+		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),
-		DiamondInnerHeight = $.prop($$props, 'DiamondInnerHeight', 3, 440),
-		margin = $.prop($$props, 'margin', 19, () => ({ inner: 160, diamond: 40 })),
-		trueDiamondHeight = $.prop($$props, 'trueDiamondHeight', 3, 400),
-		alpha = $.prop($$props, 'alpha', 3, 0.58),
-		maxlog10 = $.prop($$props, 'maxlog10', 3, 0),
-		rtd = $.prop($$props, 'rtd', 3, null),
-		title = $.prop($$props, 'title', 19, () => ['System 1', 'System 2']),
+		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),
@@ -952,22 +959,23 @@ function Dashboard($$anchor, $$props) {
 			'$$slots',
 			'$$events',
 			'$$legacy',
-			'diamond_count',
-			'diamond_dat',
+			'dat',
+			'alpha',
+			'divnorm',
 			'barData',
-			'test_elem_1',
-			'test_elem_2',
+			'balanceData',
+			'xDomain',
+			'title',
+			'maxlog10',
 			'height',
 			'width',
+			'DashboardHeight',
+			'DashboardWidth',
 			'DiamondHeight',
 			'DiamondWidth',
-			'DiamondInnerHeight',
-			'margin',
-			'trueDiamondHeight',
-			'alpha',
-			'maxlog10',
-			'rtd',
-			'title',
+			'marginInner',
+			'marginDiamond',
+			'max_count_log',
 			'class',
 			'style',
 			'showDiamond',
@@ -976,6 +984,13 @@ function Dashboard($$anchor, $$props) {
 			'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(
@@ -995,38 +1010,35 @@ function Dashboard($$anchor, $$props) {
 	{
 		var consequent = ($$anchor) => {
 			Diamond($$anchor, {
-				get diamond_count() {
-					return diamond_count();
-				},
-				get diamond_dat() {
-					return diamond_dat();
-				},
-				get DiamondInnerHeight() {
-					return DiamondInnerHeight();
-				},
-				get margin() {
-					return margin();
-				},
-				get trueDiamondHeight() {
-					return trueDiamondHeight();
+				get dat() {
+					return dat();
 				},
 				get alpha() {
 					return alpha();
 				},
+				get divnorm() {
+					return divnorm();
+				},
+				get title() {
+					return title();
+				},
 				get maxlog10() {
 					return maxlog10();
 				},
-				get rtd() {
-					return rtd();
+				get DiamondHeight() {
+					return DiamondHeight();
+				},
+				get marginInner() {
+					return marginInner();
 				},
-				get title() {
-					return title();
+				get marginDiamond() {
+					return marginDiamond();
 				}
 			});
 		};
 
 		$.if(node, ($$render) => {
-			if (showDiamond()) $$render(consequent);
+			if (showDiamond() && dat()) $$render(consequent);
 		});
 	}
 
@@ -1039,16 +1051,21 @@ function Dashboard($$anchor, $$props) {
 					return barData();
 				},
 				get DashboardHeight() {
-					return height();
+					return DashboardHeight();
 				},
 				get DashboardWidth() {
-					return width();
-				}
+					return DashboardWidth();
+				},
+				get xDomain() {
+					return $.get(wordshiftXDomain);
+				},
+				width: 640,
+				marginLeft: 140
 			});
 		};
 
 		$.if(node_1, ($$render) => {
-			if (showWordshift()) $$render(consequent_1);
+			if (showWordshift() && barData().length > 0) $$render(consequent_1);
 		});
 	}
 
@@ -1057,11 +1074,8 @@ function Dashboard($$anchor, $$props) {
 	{
 		var consequent_2 = ($$anchor) => {
 			DivergingBarChart($$anchor, {
-				get test_elem_1() {
-					return test_elem_1();
-				},
-				get test_elem_2() {
-					return test_elem_2();
+				get data() {
+					return balanceData();
 				},
 				get DiamondHeight() {
 					return DiamondHeight();
@@ -1073,7 +1087,7 @@ function Dashboard($$anchor, $$props) {
 		};
 
 		$.if(node_2, ($$render) => {
-			if (showDivergingBar()) $$render(consequent_2);
+			if (showDivergingBar() && balanceData().length > 0) $$render(consequent_2);
 		});
 	}
 
@@ -1083,16 +1097,19 @@ function Dashboard($$anchor, $$props) {
 		var consequent_3 = ($$anchor) => {
 			Legend($$anchor, {
 				get diamond_dat() {
-					return diamond_dat();
+					return dat().counts;
 				},
 				get DiamondHeight() {
 					return DiamondHeight();
+				},
+				get max_count_log() {
+					return max_count_log();
 				}
 			});
 		};
 
 		$.if(node_3, ($$render) => {
-			if (showLegend()) $$render(consequent_3);
+			if (showLegend() && dat()) $$render(consequent_3);
 		});
 	}
 
@@ -1105,6 +1122,667 @@ function Dashboard($$anchor, $$props) {
 	});
 
 	$.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])];
+  }
+  
+  return {'value': sorted, 'orig_idx': orig_idx}
+}
+
+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;
+  }
+  
+  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 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;
+  }
+  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) } 
+  ]
+}
+   
+// 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], 
+    });
+  }
+  
+  return out.slice().sort((a, b) => descending(Math.abs(a.metric), Math.abs(b.metric)))
+}
+
+// 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
+  }
+}
+
+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;
+      }
+      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 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];
+  }
+
+  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);
+        }
+
+        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);
+          }
+        }
+
+        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;
+      }
+    }
+
+    const {message} = value;
+    return as([TYPE, {name: type, message}], value);
+  };
+
+  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;
+  }
+  
+  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]]
+          });
+        }
+     }
+    }
+  }
+  // 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"
+    }
+  })
+}
+
+
+// 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 };