allotaxonometer-ui 0.1.3 → 0.1.4

package/dist/index.js

@@ -1,23 +1,74 @@
 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 { map, extent, InternSet, range, rollup, scaleLinear, scaleBand, rgb, interpolateInferno, scaleOrdinal } 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>`);
+const colors = {
+  darkgrey: "rgb(140, 140, 140)",
+  darkergrey: "rgb(89, 89, 89)"};
+
+const fonts = {
+  family: '"EB Garamond", "Garamond", "Century Schoolbook L", "URW Bookman L", "Bookman Old Style", "Times", serif',
+  sizes: { 
+    sm: "12px", 
+    lg: "16px"}
+};
+
+// Style builder function
+function style(props) {
+  return Object.entries(props)
+    .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
+    .join('; ');
+}
+
+// Axis styles
+const axisStyles = {
+  label: () => style({
+    fontFamily: fonts.family,
+    fontSize: fonts.sizes.lg,
+    fill: colors.darkergrey,
+    textAnchor: "middle"
+  }),
+  
+  tickLabel: () => style({
+    fontFamily: fonts.family,
+    fontSize: fonts.sizes.sm,
+    fill: colors.darkergrey,
+  }),
+  
+  helperText: () => style({
+    fontFamily: fonts.family,
+    fontSize: fonts.sizes.sm,
+    fill: colors.darkgrey,
+    textAnchor: "middle",
+    opacity: "0.8"
+  }),
+  
+  tickLine: () => style({
+    stroke: colors.darkgrey,
+    strokeWidth: "0.5"
+  })
+};
+
+var root_1$7 = $.from_svg(`<g><line x1="0" x2="0" y1="0" y2="6"></line></g><g><text dx="5" dy="13" text-anchor="start"> </text></g>`, 1);
+var root$8 = $.from_svg(`<g class="axis x"><!><g class="xlab"><text dy="45">Rank r</text><text dy="63">for</text><text dy="80"> </text><text dy="60">more →</text><text dy="75">frequent</text><text dy="60">← less</text><text dy="75">frequent</text></g></g>`);
 
 function AxisX($$anchor, $$props) {
 	$.push($$props, true);
 
-	let logFormat10 = $$props.scale.tickFormat();
-	let xTicks = $$props.scale.ticks();
+	let logFormat10 = $.derived(() => $$props.scale.tickFormat());
+	let xTicks = $.derived(() => $$props.scale.ticks().filter((t) => t >= 1 && Number.isInteger(Math.log10(t))));
 	var g = root$8();
 	var node = $.child(g);
 
-	$.each(node, 17, () => xTicks, $.index, ($$anchor, tick) => {
+	$.each(node, 17, () => $.get(xTicks), $.index, ($$anchor, tick) => {
 		var fragment = root_1$7();
 		var g_1 = $.first_child(fragment);
+		var line = $.child(g_1);
+
+		$.reset(g_1);
+
 		var g_2 = $.sibling(g_1);
 		var text = $.child(g_2);
 		var text_1 = $.child(text, true);
@@ -26,15 +77,19 @@ function AxisX($$anchor, $$props) {
 		$.reset(g_2);
 
 		$.template_effect(
-			($0, $1, $2) => {
+			($0, $1, $2, $3, $4) => {
 				$.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);
+				$.set_style(line, $1);
+				$.set_attribute(g_2, 'transform', `translate(${$2 ?? ''}, 0) scale(-1,1) rotate(45)`);
+				$.set_style(text, $3);
+				$.set_text(text_1, $4);
 			},
 			[
 				() => $$props.scale($.get(tick)),
+				() => axisStyles.tickLine(),
 				() => $$props.scale($.get(tick)),
-				() => logFormat10($.get(tick))
+				() => axisStyles.tickLabel(),
+				() => $.get(logFormat10)($.get(tick))
 			]
 		);
 
@@ -61,35 +116,63 @@ function AxisX($$anchor, $$props) {
 	$.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);
-	});
+	$.template_effect(
+		($0, $1, $2, $3, $4, $5, $6) => {
+			$.set_attribute(g, 'transform', `translate(0, ${$$props.innerHeight ?? ''})`);
+			$.set_attribute(text_2, 'x', $$props.innerHeight / 2);
+			$.set_attribute(text_2, 'transform', `scale(-1,1) translate(-${$$props.innerHeight ?? ''}, 0)`);
+			$.set_style(text_2, $0);
+			$.set_attribute(text_3, 'x', $$props.innerHeight / 2);
+			$.set_attribute(text_3, 'transform', `scale(-1,1) translate(-${$$props.innerHeight ?? ''}, 0)`);
+			$.set_style(text_3, $1);
+			$.set_attribute(text_4, 'x', $$props.innerHeight / 2);
+			$.set_attribute(text_4, 'transform', `scale(-1,1) translate(-${$$props.innerHeight ?? ''}, 0)`);
+			$.set_style(text_4, $2);
+			$.set_text(text_5, $$props.title[1]);
+			$.set_attribute(text_6, 'x', $$props.innerHeight - 40);
+			$.set_attribute(text_6, 'transform', `scale(-1,1) translate(-${$$props.innerHeight ?? ''}, 0)`);
+			$.set_style(text_6, $3);
+			$.set_attribute(text_7, 'x', $$props.innerHeight - 40);
+			$.set_attribute(text_7, 'transform', `scale(-1,1) translate(-${$$props.innerHeight ?? ''}, 0)`);
+			$.set_style(text_7, $4);
+			$.set_attribute(text_8, 'transform', `scale(-1,1) translate(-${$$props.innerHeight ?? ''}, 0)`);
+			$.set_style(text_8, $5);
+			$.set_attribute(text_9, 'transform', `scale(-1,1) translate(-${$$props.innerHeight ?? ''}, 0)`);
+			$.set_style(text_9, $6);
+		},
+		[
+			() => axisStyles.label(),
+			() => axisStyles.label(),
+			() => axisStyles.label(),
+			() => axisStyles.helperText(),
+			() => axisStyles.helperText(),
+			() => axisStyles.helperText(),
+			() => axisStyles.helperText()
+		]
+	);
 
 	$.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>`);
+var root_1$6 = $.from_svg(`<g><line x1="0" x2="-6" y1="0" y2="0"></line></g><g><text dx="-5" dy="13" text-anchor="end"> </text></g>`, 1);
+var root$7 = $.from_svg(`<g class="axis y"><!><g class="ylab" transform="rotate(90)"><text dy="45">Rank r</text><text dy="63">for</text><text dy="80"> </text><text dy="60">less →</text><text dy="75">frequent</text><text dy="60">← more</text><text dy="75">frequent</text></g></g>`);
 
 function AxisY($$anchor, $$props) {
 	$.push($$props, true);
 
-	let logFormat10 = $$props.scale.tickFormat();
-	let yTicks = $.derived(() => $$props.scale.ticks());
+	let logFormat10 = $.derived(() => $$props.scale.tickFormat());
+	let yTicks = $.derived(() => $$props.scale.ticks().filter((t) => t >= 1 && Number.isInteger(Math.log10(t))));
 	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 line = $.child(g_1);
+
+		$.reset(g_1);
+
 		var g_2 = $.sibling(g_1);
 		var text = $.child(g_2);
 		var text_1 = $.child(text, true);
@@ -98,15 +181,19 @@ function AxisY($$anchor, $$props) {
 		$.reset(g_2);
 
 		$.template_effect(
-			($0, $1, $2) => {
+			($0, $1, $2, $3, $4) => {
 				$.set_attribute(g_1, 'transform', `translate(0, ${$0 ?? ''})`);
-				$.set_attribute(g_2, 'transform', `translate(0, ${$1 ?? ''}) rotate(45)`);
-				$.set_text(text_1, $2);
+				$.set_style(line, $1);
+				$.set_attribute(g_2, 'transform', `translate(0, ${$2 ?? ''}) rotate(45)`);
+				$.set_style(text, $3);
+				$.set_text(text_1, $4);
 			},
 			[
 				() => $$props.scale($.get(tick)),
+				() => axisStyles.tickLine(),
 				() => $$props.scale($.get(tick)),
-				() => logFormat10($.get(tick))
+				() => axisStyles.tickLabel(),
+				() => $.get(logFormat10)($.get(tick))
 			]
 		);
 
@@ -133,15 +220,33 @@ function AxisY($$anchor, $$props) {
 	$.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);
-	});
+	$.template_effect(
+		($0, $1, $2, $3, $4, $5, $6) => {
+			$.set_attribute(g, 'transform', `translate(${$$props.innerHeight ?? ''}, 0) scale(-1, 1)`);
+			$.set_attribute(text_2, 'x', $$props.innerHeight / 2);
+			$.set_style(text_2, $0);
+			$.set_attribute(text_3, 'x', $$props.innerHeight / 2);
+			$.set_style(text_3, $1);
+			$.set_attribute(text_4, 'x', $$props.innerHeight / 2);
+			$.set_style(text_4, $2);
+			$.set_text(text_5, $$props.title[0]);
+			$.set_attribute(text_6, 'x', $$props.innerHeight - 40);
+			$.set_style(text_6, $3);
+			$.set_attribute(text_7, 'x', $$props.innerHeight - 40);
+			$.set_style(text_7, $4);
+			$.set_style(text_8, $5);
+			$.set_style(text_9, $6);
+		},
+		[
+			() => axisStyles.label(),
+			() => axisStyles.label(),
+			() => axisStyles.label(),
+			() => axisStyles.helperText(),
+			() => axisStyles.helperText(),
+			() => axisStyles.helperText(),
+			() => axisStyles.helperText()
+		]
+	);
 
 	$.append($$anchor, g);
 	$.pop();
@@ -298,9 +403,63 @@ function Contours($$anchor, $$props) {
 	$.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>`);
+// Helper: convert [0–1, 0–1, 0–1] → "rgb(R, G, B)"
+function rgbArrayToCss(rgbArray) {
+    const [r, g, b] = rgbArray.map(v => Math.round(v * 255));
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  // // imported from matlab version. Normalized RGB color definitions
+  const rawColors = {
+    blue: [43, 103, 198].map(v => v / 255),
+    red: [198, 43, 103].map(v => v / 255),
+
+    paleblue: [195, 230, 243].map(v => v / 255),
+    palered: [255, 204, 204].map(v => v / 255),
+
+    lightergrey: [1, 1, 1].map(v => v * 0.96),
+    lightishgrey: [1, 1, 1].map(v => v * 0.93),
+    lightgrey: [1, 1, 1].map(v => v * 0.90),
+
+    lightgreyer: [1, 1, 1].map(v => v * 0.85),
+    lightgreyish: [1, 1, 1].map(v => v * 0.80),
+
+    grey: [1, 1, 1].map(v => v * 0.75),
+    darkgrey: [1, 1, 1].map(v => v * 0.55),
+    darkergrey: [1, 1, 1].map(v => v * 0.35),
+    verydarkgrey: [1, 1, 1].map(v => v * 0.15),
+    superdarkgrey: [1, 1, 1].map(v => v * 0.10),
+    reallyverdarkgrey: [1, 1, 1].map(v => v * 0.05),
+
+    orange: [255, 116, 0].map(v => v / 255)
+  };
+
+  // Create CSS strings for each
+  const cssColors = {};
+  for (const [key, rgb] of Object.entries(rawColors)) {
+    cssColors[key] = rgbArrayToCss(rgb);
+  }
+
+  // Export both raw RGB arrays and CSS strings
+  const alloColors = {
+    css: cssColors     // e.g., colors.css.blue → "rgb(43, 103, 198)"
+  };
+
+  // System font stack in order of preference
+  const alloFonts = `"EB Garamond", "Garamond", "Century Schoolbook L", "URW Bookman L", "Bookman Old Style", "Times", serif`;
+
+function updateTooltipPosition(event, tooltipVisible, tooltipX, tooltipY) {
+	if ($.get(tooltipVisible)) {
+		$.set(tooltipX, event.clientX + 15);
+		$.set(tooltipY, event.clientY - 10);
+	}
+}
+
+var root_1$3 = $.from_svg(`<rect class="diamond-cell"></rect>`);
+var root_2$3 = $.from_svg(`<rect></rect>`);
+var root_3$1 = $.from_svg(`<text dy="5"> </text>`);
+var root_4$1 = $.from_html(`<div><!></div>`);
+var root$4 = $.from_html(`<div style="position: relative;"><svg xmlns="http://www.w3.org/2000/svg" style="overflow: visible; display: block;"><polygon class="diamond-background grey-triangle" fill-opacity="0.8" stroke="black" stroke-width="0.5"></polygon><polygon class="diamond-background blue-triangle" fill-opacity="0.8" stroke="black" stroke-width="0.5"></polygon><!><!><!><!><!><!><line x1="0" y1="0"></line><!></svg> <!></div>`);
 
 function Diamond($$anchor, $$props) {
 	$.push($$props, true);
@@ -312,12 +471,11 @@ function Diamond($$anchor, $$props) {
 	// Extract data from dat object
 	let diamond_dat = $.derived(() => $$props.dat.counts);
 	$.derived(() => $$props.dat.deltas);
-	// Calculate derived dimensions (matching D3 version)
+	// Calculate derived dimensions (matching D3 version exactly)
 	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 = [];
@@ -330,7 +488,6 @@ function Diamond($$anchor, $$props) {
 					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)];
 
@@ -346,7 +503,7 @@ function Diamond($$anchor, $$props) {
 		return Array.from(arr1, (x) => arr2.indexOf(x) !== -1);
 	}
 
-	// Wrangling data - Fixed variable references
+	// Wrangling data
 	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]));
@@ -359,7 +516,7 @@ function Diamond($$anchor, $$props) {
 	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)
+	// Background triangles
 	let blue_triangle = $.derived(() => [
 		[
 			$.get(innerHeight),
@@ -382,13 +539,39 @@ function Diamond($$anchor, $$props) {
 		return rin(relevant_types, d.types.split(",")).some((x) => x === true);
 	}
 
-	var g = root$4();
-	var polygon = $.child(g);
+	// TOOLTIP
+	let tooltipVisible = $.state(false);
+	let tooltipContent = $.state('');
+	let tooltipX = $.state(0);
+	let tooltipY = $.state(0);
+
+	function showTooltip(event, d) {
+		if (d.value === 0) return;
+
+		const tokens = d.types.split(",");
+		const displayTokens = tokens.length < 50 ? tokens.slice(0, 8).join(", ") : tokens.slice(0, 8).join(", ") + " ...";
+
+		$.set(tooltipContent, `
+        <div style="color: rgb(89, 89, 89); font-size: 11px;">Types: ${displayTokens}</div>
+        `);
+
+		$.set(tooltipX, event.clientX + 15);
+		$.set(tooltipY, event.clientY - 10);
+		$.set(tooltipVisible, true);
+	}
+
+	function hideTooltip() {
+		$.set(tooltipVisible, false);
+	}
+
+	var div = root$4();
+	var svg = $.child(div);
+	var polygon = $.child(svg);
 	var polygon_1 = $.sibling(polygon);
 	var node = $.sibling(polygon_1);
 
 	AxisX(node, {
-		get height() {
+		get innerHeight() {
 			return $.get(innerHeight);
 		},
 		get scale() {
@@ -402,7 +585,7 @@ function Diamond($$anchor, $$props) {
 	var node_1 = $.sibling(node);
 
 	AxisY(node_1, {
-		get height() {
+		get innerHeight() {
 			return $.get(innerHeight);
 		},
 		get scale() {
@@ -442,16 +625,13 @@ 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 === 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)
+				() => $.get(d).value === 0 ? "none" : color_scale($.get(d).value)
 			]
 		);
 
@@ -460,44 +640,76 @@ function Diamond($$anchor, $$props) {
 
 	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);
+	$.each(node_4, 17, () => $.get(diamond_dat), $.index, ($$anchor, d) => {
+		var rect_1 = root_2$3();
+
+		rect_1.__mousemove = [
+			updateTooltipPosition,
+			tooltipVisible,
+			tooltipX,
+			tooltipY
+		];
+
+		$.template_effect(
+			($0, $1, $2, $3) => {
+				$.set_attribute(rect_1, 'x', $0);
+				$.set_attribute(rect_1, 'y', $1);
+				$.set_attribute(rect_1, 'width', $2);
+				$.set_attribute(rect_1, 'height', $3);
+				$.set_attribute(rect_1, 'fill', $.get(d).value > 0 ? 'rgba(255,255,255,0.001)' : 'none');
+				$.set_attribute(rect_1, 'stroke', $.get(d).value > 0 ? alloColors.css.darkergrey : 'none');
+				$.set_attribute(rect_1, 'stroke-width', $.get(d).value > 0 ? '1.18' : '0');
+				$.set_attribute(rect_1, 'stroke-opacity', $.get(d).value > 0 ? '0.4' : '0');
+				$.set_style(rect_1, `cursor: ${$.get(d).value > 0 ? 'pointer' : 'default'};`);
+			},
+			[
+				() => $.get(xy)($.get(d).x1),
+				() => $.get(xy)($.get(d).y1),
+				() => $.get(xy).bandwidth(),
+				() => $.get(xy).bandwidth()
+			]
+		);
+
+		$.event('mouseenter', rect_1, (e) => showTooltip(e, $.get(d)));
+		$.event('mouseleave', rect_1, hideTooltip);
+		$.append($$anchor, rect_1);
+	});
+
+	var node_5 = $.sibling(node_4);
+
+	$.each(node_5, 17, () => $.get(diamond_dat).filter((d) => filter_labs(d, $.get(relevant_types))), $.index, ($$anchor, d) => {
+		var text = root_3$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, 'x', $0);
+				$.set_attribute(text, 'y', $1);
+				$.set_attribute(text, 'dx', $.get(d).x1 - $.get(d).y1 <= 0 ? 5 : -5);
 				$.set_attribute(text, 'text-anchor', $.get(d).x1 - $.get(d).y1 <= 0 ? "start" : "end");
+				$.set_attribute(text, 'transform', `scale(1,-1) rotate(-90) rotate(-45, ${$2 ?? ''}, ${$3 ?? ''}) translate(${$4 ?? ''}, 0)`);
+				$.set_style(text, `font-family: ${alloFonts}; font-size: 12px; fill: ${alloColors.css.darkergrey ?? ''};`);
 				$.set_text(text_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(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);
+		$.append($$anchor, text);
 	});
 
-	var node_5 = $.sibling(node_4);
+	var line = $.sibling(node_5);
+	var node_6 = $.sibling(line);
 
-	Contours(node_5, {
+	Contours(node_6, {
 		get alpha() {
 			return $$props.alpha;
 		},
@@ -512,57 +724,111 @@ function Diamond($$anchor, $$props) {
 		}
 	});
 
-	$.reset(g);
+	$.reset(svg);
+
+	var node_7 = $.sibling(svg, 2);
+
+	{
+		var consequent = ($$anchor) => {
+			var div_1 = root_4$1();
+			var node_8 = $.child(div_1);
+
+			$.html(node_8, () => $.get(tooltipContent));
+			$.reset(div_1);
+
+			$.template_effect(() => $.set_style(div_1, `
+                position: fixed; 
+                left: ${$.get(tooltipX) ?? ''}px; 
+                top: ${$.get(tooltipY) ?? ''}px;
+                background: white;
+                border: 1px solid rgb(200, 200, 200);
+                border-radius: 6px;
+                padding: 10px 12px;
+                font-family: 'EB Garamond', serif;
+                font-size: 12px;
+                line-height: 1.5;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+                pointer-events: none;
+                z-index: 1000;
+                max-width: 280px;
+            `));
+
+			$.append($$anchor, div_1);
+		};
+
+		$.if(node_7, ($$render) => {
+			if ($.get(tooltipVisible)) $$render(consequent);
+		});
+	}
+
+	$.reset(div);
 
 	$.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));
+		$.set_attribute(svg, 'width', DiamondHeight());
+		$.set_attribute(svg, 'height', DiamondHeight());
+		$.set_attribute(svg, 'viewBox', `0 0 ${DiamondHeight() ?? ''} ${DiamondHeight() ?? ''}`);
+		$.set_attribute(svg, 'transform', `scale(-1,1) rotate(45) translate(${$.get(innerHeight) / 4}, ${$.get(innerHeight) / 4})`);
+		$.set_attribute(polygon, 'points', $.get(grey_triangle));
+		$.set_attribute(polygon, 'fill', alloColors.css.lightgrey);
+		$.set_attribute(polygon_1, 'points', $.get(blue_triangle));
+		$.set_attribute(polygon_1, 'fill', alloColors.css.paleblue);
+		$.set_attribute(line, 'x2', $.get(innerHeight) - 7);
+		$.set_attribute(line, 'y2', $.get(innerHeight) - 7);
+		$.set_style(line, `stroke: ${alloColors.css.verydarkgrey ?? ''}; stroke-width: 0.5;`);
 	});
 
-	$.append($$anchor, g);
+	$.append($$anchor, div);
 	$.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>`);
+$.delegate(['mousemove']);
+
+var root_1$2 = $.from_svg(`<line y1="0" y2="6" style="stroke: currentColor; stroke-width: 1;"></line><line class="wordshift-grid-line" y1="0"></line><text y="-12" text-anchor="middle"> </text>`, 1);
+var root_2$2 = $.from_svg(`<rect class="wordshift-bar" style="mix-blend-mode: multiply;"></rect>`);
+var root_4 = $.from_svg(`<text dy="0.32em"> </text>`);
+var root_3 = $.from_svg(`<g class="wordshift-label-group"><text dy="0.32em"> </text><!></g>`);
+var root$3 = $.from_svg(`<svg style="overflow: visible; display: block;"><g class="wordshift-container"><g class="wordshift-axis x"><!><text y="-35" text-anchor="middle"> </text></g><!><g class="wordshift-y-axis"></g></g></svg>`);
 
 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, '%'),
+		marginTop = $.prop($$props, 'marginTop', 3, 50),
+		marginRight = $.prop($$props, 'marginRight', 3, 60),
+		marginBottom = $.prop($$props, 'marginBottom', 3, 40),
+		marginLeft = $.prop($$props, 'marginLeft', 3, 70),
+		width = $.prop($$props, 'width', 3, 360),
+		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']);
+		yPadding = $.prop($$props, 'yPadding', 3, 0),
+		colors = $.prop($$props, 'colors', 19, () => [
+			alloColors.css.lightgrey,
+			alloColors.css.paleblue
+		]),
+		barHeightFactor = $.prop($$props, 'barHeightFactor', 3, 0.7);
 
-	// Compute values (matching D3 version)
+	// Compute values (matching D3 version exactly)
 	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());
+	// Match D3 dimensions exactly
+	const xAxisYOffset = 10; // Space below x-axis (from original)
+	const bandHeight = 18; // Fixed band height (from original)
+	const shiftSvgBy = 12; // shift svg up to align with system titles
+	const barYOffset = 10; // Additional offset just for bars
+	let compactHeight = $.derived(() => $.get(yDomain).size * bandHeight);
+	let innerWidth = $.derived(() => width() - marginLeft() - marginRight());
+	let innerHeight = $.derived(() => $.get(compactHeight) + xAxisYOffset);
+	let computedHeight = $.derived(() => $.get(innerHeight) + marginTop() + marginBottom());
+	// Compute ranges exactly like D3
+	let xRange = $.derived(() => [0, $.get(innerWidth)]);
 
 	let yRange = $.derived(() => [
-		marginTop(),
-		$.get(computedHeight) - marginBottom()
+		xAxisYOffset + barYOffset,
+		xAxisYOffset + barYOffset + $.get(compactHeight)
 	]);
 
 	// Filter indices and create lookup
@@ -573,31 +839,61 @@ function Wordshift($$anchor, $$props) {
 	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();
+
+	// Helper function matching D3 logic exactly
+	function parseLabelData(label) {
+		const splitIndex = label.indexOf(' ');
+		let name_y, numbers_y;
+
+		if (splitIndex === -1) {
+			name_y = label;
+			numbers_y = "";
+		} else {
+			name_y = label.slice(0, splitIndex);
+			numbers_y = label.slice(splitIndex + 1).trim();
+
+			// Strip first and last characters from numbers_y if possible
+			if (numbers_y.length > 2) {
+				numbers_y = numbers_y.slice(1, numbers_y.length - 1);
+			}
+		}
+
+		return { name_y, numbers_y };
+	}
+
+	let finalHeight = $.derived(() => $$props.height || $.get(computedHeight));
+	var svg = root$3();
+	var g = $.child(svg);
 	var g_1 = $.child(g);
+
+	$.set_attribute(g_1, 'transform', 'translate(0, 10)');
+
 	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 fragment = root_1$2();
+		var line = $.first_child(fragment);
+		var line_1 = $.sibling(line);
+		var text = $.sibling(line_1);
 		var text_1 = $.child(text, true);
 
 		$.reset(text);
-		$.reset(g_2);
 
 		$.template_effect(
-			($0, $1, $2, $3) => {
+			($0, $1, $2, $3, $4, $5) => {
 				$.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);
+				$.set_attribute(line_1, 'x1', $2);
+				$.set_attribute(line_1, 'x2', $3);
+				$.set_attribute(line_1, 'y2', $.get(innerHeight) - xAxisYOffset + barYOffset);
+				$.set_style(line_1, $.get(tick) === 0 ? `stroke: ${alloColors.css.verydarkgrey}; stroke-width: 1; stroke-opacity: 0.8;` : `stroke: currentColor; stroke-opacity: 0.1;`);
+				$.set_attribute(text, 'x', $4);
+				$.set_style(text, `font-family: ${alloFonts}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''};`);
+				$.set_text(text_1, $5);
 			},
 			[
+				() => $.get(xScale)($.get(tick)),
+				() => $.get(xScale)($.get(tick)),
 				() => $.get(xScale)($.get(tick)),
 				() => $.get(xScale)($.get(tick)),
 				() => $.get(xScale)($.get(tick)),
@@ -605,7 +901,7 @@ function Wordshift($$anchor, $$props) {
 			]
 		);
 
-		$.append($$anchor, g_2);
+		$.append($$anchor, fragment);
 	});
 
 	var text_2 = $.sibling(node);
@@ -629,50 +925,82 @@ function Wordshift($$anchor, $$props) {
 			},
 			[
 				() => Math.min($.get(xScale)(0), $.get(xScale)($.get(X)[$.get(i)])),
-				() => $.get(yScale)($.get(Y)[$.get(i)]),
+				() => $.get(yScale)($.get(Y)[$.get(i)]) + ($.get(yScale).bandwidth() - $.get(yScale).bandwidth() * barHeightFactor()) / 2,
 				() => Math.abs($.get(xScale)($.get(X)[$.get(i)]) - $.get(xScale)(0)),
-				() => $.get(yScale).bandwidth()
+				() => $.get(yScale).bandwidth() * barHeightFactor()
 			]
 		);
 
 		$.append($$anchor, rect);
 	});
 
-	var g_3 = $.sibling(node_1);
+	var g_2 = $.sibling(node_1);
 
-	$.each(g_3, 21, () => $.get(yScale).domain(), $.index, ($$anchor, label) => {
-		var text_4 = root_3$2();
+	$.each(g_2, 21, () => $.get(yScale).domain(), $.index, ($$anchor, label) => {
+		var g_3 = root_3();
+		const labelData = $.derived(() => parseLabelData($.get(label)));
+		const xValue = $.derived(() => $.get(YX).get($.get(label)));
+		var text_4 = $.child(g_3);
 		var text_5 = $.child(text_4, true);
 
 		$.reset(text_4);
 
+		var node_2 = $.sibling(text_4);
+
+		{
+			var consequent = ($$anchor) => {
+				var text_6 = root_4();
+				var text_7 = $.child(text_6, true);
+
+				$.reset(text_6);
+
+				$.template_effect(() => {
+					$.set_attribute(text_6, 'x', $.get(xValue) > 0 ? -6 : 6);
+					$.set_attribute(text_6, 'text-anchor', $.get(xValue) > 0 ? "end" : "start");
+					$.set_style(text_6, `font-family: ${alloFonts}; font-size: 14px; fill: ${alloColors.css.darkergrey ?? ''}; opacity: 0.5;`);
+					$.set_text(text_7, $.get(labelData).numbers_y);
+				});
+
+				$.append($$anchor, text_6);
+			};
+
+			$.if(node_2, ($$render) => {
+				if ($.get(labelData).numbers_y) $$render(consequent);
+			});
+		}
+
+		$.reset(g_3);
+
 		$.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));
+			($0) => {
+				$.set_attribute(g_3, 'transform', `translate(0, ${$0 ?? ''})`);
+				$.set_attribute(text_4, 'x', $.get(xValue) > 0 ? 6 : -6);
+				$.set_attribute(text_4, 'text-anchor', $.get(xValue) > 0 ? "start" : "end");
+				$.set_style(text_4, `font-family: ${alloFonts}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''};`);
+				$.set_text(text_5, $.get(labelData).name_y);
 			},
 			[
-				() => $.get(YX).get($.get(label)) > 0 ? 6 : -6,
-				() => $.get(yScale)($.get(label)) + $.get(yScale).bandwidth() / 2,
-				() => $.get(YX).get($.get(label)) > 0 ? "start" : "end"
+				() => $.get(yScale)($.get(label)) + $.get(yScale).bandwidth() / 2
 			]
 		);
 
-		$.append($$anchor, text_4);
+		$.append($$anchor, g_3);
 	});
 
-	$.reset(g_3);
+	$.reset(g_2);
 	$.reset(g);
+	$.reset(svg);
 
 	$.template_effect(
 		($0, $1) => {
-			$.set_attribute(g, 'transform', `translate(${$.get(chartX) ?? ''}, ${$.get(chartY) ?? ''})`);
-			$.set_attribute(g_1, 'transform', `translate(0, ${marginTop() ?? ''})`);
+			$.set_attribute(svg, 'width', width());
+			$.set_attribute(svg, 'height', $.get(finalHeight));
+			$.set_attribute(svg, 'viewBox', `0 0 ${width() ?? ''} ${$.get(finalHeight) ?? ''}`);
+			$.set_attribute(g, 'transform', `translate(${marginLeft() ?? ''}, ${marginTop() - shiftSvgBy})`);
 			$.set_attribute(text_2, 'x', $0);
+			$.set_style(text_2, `font-family: ${alloFonts}; font-size: 16px; fill: ${alloColors.css.verydarkgrey ?? ''};`);
 			$.set_text(text_3, xLabel());
-			$.set_attribute(g_3, 'transform', `translate(${$1 ?? ''}, 0)`);
+			$.set_attribute(g_2, 'transform', `translate(${$1 ?? ''}, 0)`);
 		},
 		[
 			() => $.get(xScale)(0),
@@ -680,14 +1008,13 @@ function Wordshift($$anchor, $$props) {
 		]
 	);
 
-	$.append($$anchor, g);
+	$.append($$anchor, svg);
 	$.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>`);
+var root_1$1 = $.from_svg(`<rect></rect><text dy="0.35em"> </text>`, 1);
+var root_2$1 = $.from_svg(`<text x="0" dy="0.35em" text-anchor="middle"> </text>`);
+var root$2 = $.from_svg(`<svg style="overflow: visible; display: block;"><g class="balance-chart"><!><g class="y-axis"></g></g></svg>`);
 
 function DivergingBarChart($$anchor, $$props) {
 	$.push($$props, true);
@@ -700,7 +1027,10 @@ function DivergingBarChart($$anchor, $$props) {
 		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"]);
+		colors = $.prop($$props, 'colors', 19, () => [
+			alloColors.css.lightgrey,
+			alloColors.css.paleblue
+		]);
 
 	// Compute values (matching D3 version exactly)
 	let X = $.derived(() => map($$props.data, x()));
@@ -729,33 +1059,12 @@ function DivergingBarChart($$anchor, $$props) {
 	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);
+	var svg = root$2();
+	var g = $.child(svg);
+	var node = $.child(g);
 
 	$.each(node, 17, () => $.get(I), $.index, ($$anchor, i) => {
-		var fragment = root_2$1();
+		var fragment = root_1$1();
 		var rect = $.first_child(fragment);
 		var text = $.sibling(rect);
 		var text_1 = $.child(text, true);
@@ -772,6 +1081,7 @@ function DivergingBarChart($$anchor, $$props) {
 				$.set_attribute(text, 'x', $4);
 				$.set_attribute(text, 'y', $5);
 				$.set_attribute(text, 'text-anchor', $.get(X)[$.get(i)] < 0 ? "end" : "start");
+				$.set_style(text, `font-family: ${alloFonts}; font-size: 10px; fill: ${alloColors.css.darkergrey ?? ''}; opacity: 0.5;`);
 				$.set_text(text_1, $6);
 			},
 			[
@@ -788,10 +1098,10 @@ function DivergingBarChart($$anchor, $$props) {
 		$.append($$anchor, fragment);
 	});
 
-	var g_2 = $.sibling(node);
+	var g_1 = $.sibling(node);
 
-	$.each(g_2, 21, () => $.get(yScale).domain(), $.index, ($$anchor, label) => {
-		var text_2 = root_3$1();
+	$.each(g_1, 21, () => $.get(yScale).domain(), $.index, ($$anchor, label) => {
+		var text_2 = root_2$1();
 		var text_3 = $.child(text_2, true);
 
 		$.reset(text_2);
@@ -800,6 +1110,7 @@ function DivergingBarChart($$anchor, $$props) {
 			($0, $1) => {
 				$.set_attribute(text_2, 'y', $0);
 				$.set_attribute(text_2, 'opacity', $1);
+				$.set_style(text_2, `font-family: ${alloFonts}; font-size: 14px; fill: ${alloColors.css.darkergrey ?? ''};`);
 				$.set_text(text_3, $.get(label));
 			},
 			[
@@ -811,60 +1122,61 @@ function DivergingBarChart($$anchor, $$props) {
 		$.append($$anchor, text_2);
 	});
 
-	$.reset(g_2);
+	$.reset(g_1);
 	$.reset(g);
+	$.reset(svg);
 
 	$.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)`);
+			$.set_attribute(svg, 'width', width());
+			$.set_attribute(svg, 'height', $.get(height));
+			$.set_attribute(svg, 'viewBox', `0 0 ${width() ?? ''} ${$.get(height) ?? ''}`);
+			$.set_attribute(g_1, 'transform', `translate(${$0 ?? ''}, -12)`);
 		},
 		[() => $.get(xScale)(0)]
 	);
 
-	$.append($$anchor, g);
+	$.append($$anchor, svg);
 	$.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);
+var root_1 = $.from_svg(`<rect transform="rotate(-90) translate(-70,0)" style="stroke: black; stroke-width: 0.65; shape-rendering: crispEdges;"></rect>`);
+var root_2 = $.from_svg(`<g class="tick"><text dx="30" dy="-30" transform="rotate(90)"> </text></g>`);
+var root$1 = $.from_svg(`<svg style="overflow: visible; display: block;"><!><g transform="rotate(-90) translate(-60,5)"><!><text class="title" dx="30" dy="-5" transform="rotate(90)">Counts per cell</text></g></svg>`);
 
 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();
+	let tickSize = $.prop($$props, 'tickSize', 3, 0),
+		height = $.prop($$props, 'height', 19, () => 44 + tickSize()),
+		width = $.prop($$props, 'width', 3, 300),
+		marginTop = $.prop($$props, 'marginTop', 3, 13),
+		marginBottom = $.prop($$props, 'marginBottom', 19, () => 16 + tickSize()),
+		marginLeft = $.prop($$props, 'marginLeft', 3, 0),
+		N_CATEGO = $.prop($$props, 'N_CATEGO', 3, 20);
+
+	const myramp = range(N_CATEGO()).map((i) => rgb(interpolateInferno(i / (N_CATEGO() - 1))).hex());
+	const color = scaleOrdinal(range(N_CATEGO()), myramp);
+	let x = $.derived(() => scaleBand().domain(color.domain()).rangeRound([marginLeft(), width() - 100]));
+	let x2 = $.derived(() => scaleBand().domain(range($$props.max_count_log).map((i) => 10 ** i).sort((a, b) => b - a)).rangeRound([marginLeft() - 40, width() - 90]));
+	var svg = root$1();
+	var node = $.child(svg);
 
-		$.set_attribute(rect, 'x', 0);
-		$.set_attribute(rect, 'width', 14);
-		$.set_attribute(rect, 'height', 13);
+	$.each(node, 17, () => color.domain(), $.index, ($$anchor, d) => {
+		var rect = root_1();
 
 		$.template_effect(
-			($0, $1) => {
-				$.set_attribute(rect, 'y', $0);
-				$.set_attribute(rect, 'fill', $1);
+			($0, $1, $2, $3) => {
+				$.set_attribute(rect, 'x', $0);
+				$.set_attribute(rect, 'y', marginTop());
+				$.set_attribute(rect, 'width', $1);
+				$.set_attribute(rect, 'height', $2);
+				$.set_attribute(rect, 'fill', $3);
 			},
 			[
-				() => $.get(y)($.get(d)),
+				() => $.get(x)($.get(d)),
+				() => Math.max(0, $.get(x).bandwidth()),
+				() => $.get(x).bandwidth(),
 				() => color($.get(d))
 			]
 		);
@@ -872,62 +1184,48 @@ function Legend($$anchor, $$props) {
 		$.append($$anchor, rect);
 	});
 
-	$.reset(g);
+	var g = $.sibling(node);
+	var node_1 = $.child(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);
+	$.each(node_1, 17, () => $.get(x2).domain(), $.index, ($$anchor, tick) => {
+		var g_1 = root_2();
 		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);
+			($0) => {
+				$.set_attribute(g_1, 'transform', `translate(${$0 ?? ''}, 0)`);
+				$.set_style(text, `font-family: ${alloFonts}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''}; text-anchor: start;`);
+				$.set_text(text_1, $.get(tick));
 			},
-			[
-				() => $$props.DiamondHeight + $.get(logY)($.get(tick)) - margin.top,
-				() => $.get(logFormat10)($.get(tick))
-			]
+			[() => $.get(x2)($.get(tick))]
 		);
 
-		$.append($$anchor, fragment_1);
+		$.append($$anchor, g_1);
+	});
+
+	var text_2 = $.sibling(node_1);
+
+	$.reset(g);
+	$.reset(svg);
+
+	$.template_effect(() => {
+		$.set_attribute(svg, 'width', width());
+		$.set_attribute(svg, 'height', height());
+		$.set_attribute(svg, 'viewBox', `0 0 ${width() ?? ''} ${height() ?? ''}`);
+		$.set_attribute(text_2, 'x', marginLeft() - 25);
+		$.set_attribute(text_2, 'y', marginTop() + marginBottom());
+		$.set_style(text_2, `font-family: ${alloFonts}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''}; text-anchor: start;`);
 	});
 
-	$.template_effect(() => $.set_attribute(g, 'transform', `translate(${margin.left}, ${$$props.DiamondHeight - margin.top})`));
-	$.append($$anchor, fragment);
+	$.append($$anchor, svg);
 	$.pop();
 }
 
-var root = $.from_html(`<div><svg id="allotaxonometer-svg" class="svelte-n6o6ey"><!><!><!><!></svg></div>`);
+var root = $.from_html(`<div class="allotaxonometer-dashboard" style="position: relative; margin: 0; padding: 0;"><div style="display:flex; flex-wrap: wrap; align-items:center; justify-content: center; row-gap: 50px;"><div style="margin-top:20px"><div style="display:flex; gap: 10em; justify-content: center; margin-bottom: -70px; margin-right: 70px; position: relative;"><div style="position: relative;"><div> </div> <div> </div> <div> </div></div> <div> </div></div> <div id="diamondplot"><!></div> <div style="display: flex; gap: 13em; justify-content: center;"><div id="legend" style="margin-left: -50px;"><!></div> <div id="balance"><!></div></div></div> <div style="margin-top:60px; overflow: visible;"><div id="wordshift" style="overflow: visible;"><!></div></div></div></div>`);
 
 function Dashboard($$anchor, $$props) {
 	$.push($$props, true);
@@ -938,24 +1236,25 @@ function Dashboard($$anchor, $$props) {
 		barData = $.prop($$props, 'barData', 19, () => []),
 		balanceData = $.prop($$props, 'balanceData', 19, () => []),
 		xDomain = $.prop($$props, 'xDomain', 3, undefined),
+		instrumentText = $.prop($$props, 'instrumentText', 3, 'Instrument: Rank-Turbulence Divergence'),
 		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),
+		maxlog10 = $.prop($$props, 'maxlog10', 3, 0);
+		$.prop($$props, 'height', 3, 815);
+		$.prop($$props, 'width', 3, 1200);
+		let 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, [
+		max_count_log = $.prop($$props, 'max_count_log', 3, undefined);
+		$.prop($$props, 'class', 3, '');
+		$.prop($$props, 'style', 3, '');
+		$.prop($$props, 'showDiamond', 3, true);
+		$.prop($$props, 'showWordshift', 3, true);
+		$.prop($$props, 'showDivergingBar', 3, true);
+		$.prop($$props, 'showLegend', 3, true);
+		$.rest_props($$props, [
 			'$$slots',
 			'$$events',
 			'$$legacy',
@@ -965,6 +1264,7 @@ function Dashboard($$anchor, $$props) {
 			'barData',
 			'balanceData',
 			'xDomain',
+			'instrumentText',
 			'title',
 			'maxlog10',
 			'height',
@@ -992,133 +1292,137 @@ function Dashboard($$anchor, $$props) {
 	]);
 
 	var div = root();
+	var div_1 = $.child(div);
+	var div_2 = $.child(div_1);
+	var div_3 = $.child(div_2);
+	var div_4 = $.child(div_3);
+	var div_5 = $.child(div_4);
+	var text = $.child(div_5, true);
 
-	$.attribute_effect(
-		div,
-		() => ({
-			class: `allotaxonometer-dashboard ${className() ?? ''}`,
-			style: style(),
-			...restProps
-		}),
-		undefined,
-		'svelte-n6o6ey'
-	);
+	$.reset(div_5);
 
-	var svg = $.child(div);
-	var node = $.child(svg);
+	var div_6 = $.sibling(div_5, 2);
+	var text_1 = $.child(div_6, true);
 
-	{
-		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();
-				}
-			});
-		};
+	$.reset(div_6);
 
-		$.if(node, ($$render) => {
-			if (showDiamond() && dat()) $$render(consequent);
-		});
-	}
+	var div_7 = $.sibling(div_6, 2);
+	var text_2 = $.child(div_7);
 
-	var node_1 = $.sibling(node);
+	$.reset(div_7);
+	$.reset(div_4);
 
-	{
-		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
-			});
-		};
+	var div_8 = $.sibling(div_4, 2);
+	var text_3 = $.child(div_8, true);
 
-		$.if(node_1, ($$render) => {
-			if (showWordshift() && barData().length > 0) $$render(consequent_1);
-		});
-	}
+	$.reset(div_8);
+	$.reset(div_3);
 
-	var node_2 = $.sibling(node_1);
+	var div_9 = $.sibling(div_3, 2);
+	var node = $.child(div_9);
 
-	{
-		var consequent_2 = ($$anchor) => {
-			DivergingBarChart($$anchor, {
-				get data() {
-					return balanceData();
-				},
-				get DiamondHeight() {
-					return DiamondHeight();
-				},
-				get DiamondWidth() {
-					return DiamondWidth();
-				}
-			});
-		};
+	Diamond(node, {
+		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_2, ($$render) => {
-			if (showDivergingBar() && balanceData().length > 0) $$render(consequent_2);
-		});
-	}
+	$.reset(div_9);
 
-	var node_3 = $.sibling(node_2);
+	var div_10 = $.sibling(div_9, 2);
+	var div_11 = $.child(div_10);
+	var node_1 = $.child(div_11);
+	const expression = $.derived(() => max_count_log() || 5);
 
-	{
-		var consequent_3 = ($$anchor) => {
-			Legend($$anchor, {
-				get diamond_dat() {
-					return dat().counts;
-				},
-				get DiamondHeight() {
-					return DiamondHeight();
-				},
-				get max_count_log() {
-					return max_count_log();
-				}
-			});
-		};
+	Legend(node_1, {
+		get diamond_dat() {
+			return dat().counts;
+		},
+		get DiamondHeight() {
+			return DiamondHeight();
+		},
+		get max_count_log() {
+			return $.get(expression);
+		}
+	});
 
-		$.if(node_3, ($$render) => {
-			if (showLegend() && dat()) $$render(consequent_3);
-		});
-	}
+	$.reset(div_11);
 
-	$.reset(svg);
+	var div_12 = $.sibling(div_11, 2);
+	var node_2 = $.child(div_12);
+
+	DivergingBarChart(node_2, {
+		get data() {
+			return balanceData();
+		},
+		get DiamondHeight() {
+			return DiamondHeight();
+		},
+		get DiamondWidth() {
+			return DiamondWidth();
+		}
+	});
+
+	$.reset(div_12);
+	$.reset(div_10);
+	$.reset(div_2);
+
+	var div_13 = $.sibling(div_2, 2);
+	var div_14 = $.child(div_13);
+	var node_3 = $.child(div_14);
+
+	Wordshift(node_3, {
+		get barData() {
+			return barData();
+		},
+		get DashboardHeight() {
+			return DashboardHeight();
+		},
+		get DashboardWidth() {
+			return DashboardWidth();
+		},
+		get xDomain() {
+			return $.get(wordshiftXDomain);
+		},
+		width: 640,
+		marginLeft: 140
+	});
+
+	$.reset(div_14);
+	$.reset(div_13);
+	$.reset(div_1);
 	$.reset(div);
 
 	$.template_effect(() => {
-		$.set_attribute(svg, 'height', height());
-		$.set_attribute(svg, 'width', width());
+		$.set_style(div_5, `font-family: ${alloFonts}; font-size: 16px; color: ${alloColors.css.superdarkgrey ?? ''};`);
+		$.set_text(text, title()[0]);
+		$.set_style(div_6, `position: absolute; top: 100%; left: -12em; margin-top: 2.5em; font-family: ${alloFonts}; font-size: 14px; color: ${alloColors.css.darkgrey ?? ''};`);
+		$.set_text(text_1, instrumentText());
+		$.set_style(div_7, `position: absolute; top: 100%; left: -12em; margin-top: 3.5em; font-family: ${alloFonts}; font-size: 14px; color: ${alloColors.css.darkgrey ?? ''};`);
+		$.set_text(text_2, `α = ${alpha() ?? ''}`);
+		$.set_style(div_8, `font-family: ${alloFonts}; font-size: 16px; color: ${alloColors.css.superdarkgrey ?? ''};`);
+		$.set_text(text_3, title()[1]);
 	});
 
 	$.append($$anchor, div);