@yuneta/gobj-ui 7.23.72 → 7.23.73

package/README.md

@@ -1882,6 +1882,35 @@ the middle, and **a toolbar left with a single group is centred**. An unknown
 name is reported, not silently dropped: a typo would otherwise remove the save
 button with no trace of why.
 
+### `C_YUI_FORM` — which field is editable, and the one `writable` does not govern
+
+A form opened to LOOK at a record has no editable field: that is a property of
+the opening (`readonly`), not of the schema, and it wins over everything. Under
+it the schema decides — a column needs `writable` — **with one exception, and
+it is the whole of linking: an fkey.**
+
+`writable` governs the WRITE of a column's VALUE, and an fkey is not written,
+it is **linked**. An fkey is normally declared with no `writable` flag at all
+(`treedb_authzs`'s `users.roles` is `['fkey']`, and so is almost every fkey in
+the tree), so reading "not writable" as "not editable" takes away the only way
+to link a record to its parent — with `users.roles`, the only way to give a
+person a role. The other half of the same rule is in the topic view, where the
+record travels back: it sends "the writable cols, the fkeys (a link is edited
+by linking) and the pkey". The two halves have to agree; when they did not, the
+form disabled the control whose value the save was still waiting for.
+
+The rule lives in `form_field_readonly.js`, pure and tested. A `file` column is
+an fkey too (`['fkey','file']`) and is deliberately NOT covered: it answers
+`type: "file"`, its bytes travel beside the record, and the SDK declares as
+legal a `file` column that only a load fills.
+
+**And `readonly` is an attribute of a TEXT control and of nothing else.** A
+`<select>`, a checkbox and a radio accept it and let the reader change the
+value anyway; only `disabled` stops them, and tom-select has to be told through
+its API. So the form applies `disabled` to those three, and the record is still
+read from a disabled control — it is collected by reading each marked control,
+never by submitting the form.
+
 ### Selecting rows in any table — `yui_table_select.js`
 
 Deleting twenty rows one confirmation at a time is not a workflow. Any view

package/dist/gobj-ui.cjs.js

@@ -27492,6 +27492,28 @@ function spanning_tree(nodes, edges) {
 	};
 }
 /************************************************************
+*  The ids of a spanning tree in PARENT-BEFORE-CHILD order.
+*
+*  Every pass below used to be a recursive walk, which is the natural
+*  way to write it and the one that dies on a deep tree: a
+*  self-referent hook (a place inside a place inside a place) is as
+*  deep as the data says, and the stack is not. Read this list
+*  forwards for a pre-order pass and BACKWARDS for a post-order one
+*  -- a child always sits after its parent, so reversed it always
+*  sits before it, which is the whole of what post-order was for.
+************************************************************/
+function walk_order(t) {
+	let order = [];
+	let stack = t.roots.slice().reverse();
+	while (stack.length) {
+		let id = stack.pop();
+		order.push(id);
+		let kids = t.children.get(id) || [];
+		for (let i = kids.length - 1; i >= 0; i--) stack.push(kids[i]);
+	}
+	return order;
+}
+/************************************************************
 *  The tidy tree, left to right.
 *
 *  Returns Map<id, {x, y}> with the CENTRE of each node, the way G6
@@ -27512,56 +27534,45 @@ function layout_tree(nodes, edges, opts) {
 		col_x[d] = x;
 		x += (col_w[d] || 0) + o.ranksep;
 	}
+	let order = walk_order(t);
 	let height = /* @__PURE__ */ new Map();
-	let measure = (id) => {
+	for (let i = order.length - 1; i >= 0; i--) {
+		let id = order[i];
 		let kids = t.children.get(id) || [];
 		let own = t.by_id.get(id).h;
-		if (!kids.length) {
-			height.set(id, own);
-			return own;
-		}
 		let sum = 0;
-		for (let i = 0; i < kids.length; i++) {
-			sum += measure(kids[i]);
-			if (i > 0) sum += o.nodesep;
+		for (let k = 0; k < kids.length; k++) {
+			sum += height.get(kids[k]);
+			if (k > 0) sum += o.nodesep;
 		}
-		let h = Math.max(own, sum);
-		height.set(id, h);
-		return h;
-	};
-	for (let root of t.roots) measure(root);
-	let place = (id, top) => {
-		let n = t.by_id.get(id);
+		height.set(id, kids.length ? Math.max(own, sum) : own);
+	}
+	let tops = /* @__PURE__ */ new Map();
+	let top = 0;
+	for (let root of t.roots) {
+		tops.set(root, top);
+		top += height.get(root) + o.nodesep * 2;
+	}
+	for (let id of order) {
 		let d = t.depth.get(id);
 		let kids = t.children.get(id) || [];
 		let block = height.get(id);
-		let cx = col_x[d] + (col_w[d] - n.w) / 2 + n.w / 2;
-		if (!kids.length) {
-			pos.set(id, {
-				x: cx,
-				y: top + block / 2
-			});
-			return;
-		}
+		let own_top = tops.get(id);
+		pos.set(id, {
+			x: col_x[d] + col_w[d] / 2,
+			y: own_top + block / 2
+		});
+		if (!kids.length) continue;
 		let kids_h = 0;
-		for (let i = 0; i < kids.length; i++) {
-			kids_h += height.get(kids[i]);
-			if (i > 0) kids_h += o.nodesep;
+		for (let k = 0; k < kids.length; k++) {
+			kids_h += height.get(kids[k]);
+			if (k > 0) kids_h += o.nodesep;
 		}
-		let cursor = top + (block - kids_h) / 2;
+		let cursor = own_top + (block - kids_h) / 2;
 		for (let kid of kids) {
-			place(kid, cursor);
+			tops.set(kid, cursor);
 			cursor += height.get(kid) + o.nodesep;
 		}
-		pos.set(id, {
-			x: cx,
-			y: top + block / 2
-		});
-	};
-	let top = 0;
-	for (let root of t.roots) {
-		place(root, top);
-		top += height.get(root) + o.nodesep * 2;
 	}
 	return pos;
 }
@@ -27588,40 +27599,53 @@ function layout_radial(nodes, edges, opts) {
 	let t = spanning_tree(nodes, edges);
 	let pos = /* @__PURE__ */ new Map();
 	if (!t.roots.length) return pos;
+	let order = walk_order(t);
 	let leaves = /* @__PURE__ */ new Map();
-	let count = (id) => {
+	for (let i = order.length - 1; i >= 0; i--) {
+		let id = order[i];
 		let kids = t.children.get(id) || [];
 		if (!kids.length) {
 			leaves.set(id, 1);
-			return 1;
+			continue;
 		}
 		let n = 0;
-		for (let kid of kids) n += count(kid);
+		for (let kid of kids) n += leaves.get(kid);
 		leaves.set(id, n);
-		return n;
-	};
+	}
 	let total = 0;
-	for (let root of t.roots) total += count(root);
+	for (let root of t.roots) total += leaves.get(root);
 	let single = t.roots.length === 1;
 	let ring_of = (id) => t.depth.get(id) + (single ? 0 : 1);
 	let angle = /* @__PURE__ */ new Map();
 	let rings = [];
-	let sector = (id, from, span) => {
-		let a = from + span / 2;
-		angle.set(id, a);
-		let ring = ring_of(id);
-		if (!rings[ring]) rings[ring] = [];
-		let n = t.by_id.get(id);
-		rings[ring].push({
-			id,
-			angle: a,
-			diag: Math.hypot(n.w, n.h)
-		});
-		let cursor = from;
-		for (let kid of t.children.get(id) || []) {
-			let part = span * leaves.get(kid) / leaves.get(id);
-			sector(kid, cursor, part);
-			cursor += part;
+	let sector = (root_id, root_from, root_span) => {
+		let stack = [{
+			id: root_id,
+			from: root_from,
+			span: root_span
+		}];
+		while (stack.length) {
+			let { id, from, span } = stack.pop();
+			let a = from + span / 2;
+			angle.set(id, a);
+			let ring = ring_of(id);
+			if (!rings[ring]) rings[ring] = [];
+			let n = t.by_id.get(id);
+			rings[ring].push({
+				id,
+				angle: a,
+				diag: Math.hypot(n.w, n.h)
+			});
+			let cursor = from;
+			for (let kid of t.children.get(id) || []) {
+				let part = span * leaves.get(kid) / leaves.get(id);
+				stack.push({
+					id: kid,
+					from: cursor,
+					span: part
+				});
+				cursor += part;
+			}
 		}
 	};
 	if (single) {
@@ -27672,15 +27696,20 @@ function layout_outline(nodes, edges, opts) {
 	let t = spanning_tree(nodes, edges);
 	let pos = /* @__PURE__ */ new Map();
 	let y = 0;
-	let visit = (id) => {
-		let n = t.by_id.get(id);
-		let d = t.depth.get(id);
-		pos.set(id, {
-			x: d * o.indent + n.w / 2,
-			y: y + n.h / 2
-		});
-		y += n.h + o.nodesep;
-		for (let kid of t.children.get(id) || []) visit(kid);
+	let visit = (root_id) => {
+		let stack = [root_id];
+		while (stack.length) {
+			let id = stack.pop();
+			let n = t.by_id.get(id);
+			let d = t.depth.get(id);
+			pos.set(id, {
+				x: d * o.indent + n.w / 2,
+				y: y + n.h / 2
+			});
+			y += n.h + o.nodesep;
+			let kids = t.children.get(id) || [];
+			for (let i = kids.length - 1; i >= 0; i--) stack.push(kids[i]);
+		}
 	};
 	for (let root of t.roots) {
 		visit(root);
@@ -62107,6 +62136,8 @@ function ac_set_operation_mode(gobj, event, kw, src) {
 *  into the URL, so what you are looking at stays linkable.
 ************************************************************/
 var LEGEND_GLYPH_STYLE = "font-size:1.5em; line-height:1; color:inherit;";
+var LEGEND_NAME_STYLE = "font-size:1.2em; line-height:1.2;";
+var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:1em;";
 function refresh_legend(gobj) {
 	let priv = gobj.priv;
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
@@ -62132,19 +62163,19 @@ function refresh_legend(gobj) {
 			"span",
 			{
 				class: "GRAPH_LEGEND_NAME",
-				style: hidden ? "text-decoration:line-through; opacity:.6;" : ""
+				style: LEGEND_NAME_STYLE + (hidden ? " text-decoration:line-through; opacity:.6;" : "")
 			},
 			topic_name
 		], [
 			"span",
 			{
 				class: "GRAPH_LEGEND_COUNT has-text-grey",
-				style: "margin-left:.35rem; font-size:.8em;"
+				style: LEGEND_COUNT_STYLE
 			},
 			hidden ? `${entry.total}` : `${entry.visible}/${entry.total}`
 		]);
 		let body_attrs = {
-			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " is-primary is-light" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
+			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " pressed_state" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
 			type: "button",
 			style: "gap:0; flex:0 0 auto;",
 			title: is_main ? (0, i18next.t)("main topic") : hidden ? (0, i18next.t)("show topic") : (0, i18next.t)("hide topic"),
@@ -62168,7 +62199,7 @@ function refresh_legend(gobj) {
 		if (is_main && state.main_chosen) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_STAR button is-small is-warning is-light",
+				class: "GRAPH_LEGEND_STAR button is-small pressed_state",
 				type: "button",
 				style: "padding:0 .4rem;",
 				title: (0, i18next.t)("main topic"),
@@ -62229,7 +62260,7 @@ function refresh_legend(gobj) {
 		if (!hidden && entry.linked && entry.loose > 0) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_LOOSE button is-small" + (entry.loose_shown ? " is-warning is-light" : ""),
+				class: "GRAPH_LEGEND_LOOSE button is-small" + (entry.loose_shown ? " pressed_state" : ""),
 				type: "button",
 				style: "padding:0 .45rem;",
 				title: (0, i18next.t)("loose records"),
@@ -62249,7 +62280,7 @@ function refresh_legend(gobj) {
 		if (!hidden) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_FOCUS button is-small" + (focused ? " is-primary is-light" : ""),
+				class: "GRAPH_LEGEND_FOCUS button is-small" + (focused ? " pressed_state" : ""),
 				type: "button",
 				style: "padding:0 .4rem;",
 				title: (0, i18next.t)("highlight topic"),

package/dist/gobj-ui.es.js

@@ -27487,6 +27487,28 @@ function spanning_tree(nodes, edges) {
 	};
 }
 /************************************************************
+*  The ids of a spanning tree in PARENT-BEFORE-CHILD order.
+*
+*  Every pass below used to be a recursive walk, which is the natural
+*  way to write it and the one that dies on a deep tree: a
+*  self-referent hook (a place inside a place inside a place) is as
+*  deep as the data says, and the stack is not. Read this list
+*  forwards for a pre-order pass and BACKWARDS for a post-order one
+*  -- a child always sits after its parent, so reversed it always
+*  sits before it, which is the whole of what post-order was for.
+************************************************************/
+function walk_order(t) {
+	let order = [];
+	let stack = t.roots.slice().reverse();
+	while (stack.length) {
+		let id = stack.pop();
+		order.push(id);
+		let kids = t.children.get(id) || [];
+		for (let i = kids.length - 1; i >= 0; i--) stack.push(kids[i]);
+	}
+	return order;
+}
+/************************************************************
 *  The tidy tree, left to right.
 *
 *  Returns Map<id, {x, y}> with the CENTRE of each node, the way G6
@@ -27507,56 +27529,45 @@ function layout_tree(nodes, edges, opts) {
 		col_x[d] = x;
 		x += (col_w[d] || 0) + o.ranksep;
 	}
+	let order = walk_order(t);
 	let height = /* @__PURE__ */ new Map();
-	let measure = (id) => {
+	for (let i = order.length - 1; i >= 0; i--) {
+		let id = order[i];
 		let kids = t.children.get(id) || [];
 		let own = t.by_id.get(id).h;
-		if (!kids.length) {
-			height.set(id, own);
-			return own;
-		}
 		let sum = 0;
-		for (let i = 0; i < kids.length; i++) {
-			sum += measure(kids[i]);
-			if (i > 0) sum += o.nodesep;
+		for (let k = 0; k < kids.length; k++) {
+			sum += height.get(kids[k]);
+			if (k > 0) sum += o.nodesep;
 		}
-		let h = Math.max(own, sum);
-		height.set(id, h);
-		return h;
-	};
-	for (let root of t.roots) measure(root);
-	let place = (id, top) => {
-		let n = t.by_id.get(id);
+		height.set(id, kids.length ? Math.max(own, sum) : own);
+	}
+	let tops = /* @__PURE__ */ new Map();
+	let top = 0;
+	for (let root of t.roots) {
+		tops.set(root, top);
+		top += height.get(root) + o.nodesep * 2;
+	}
+	for (let id of order) {
 		let d = t.depth.get(id);
 		let kids = t.children.get(id) || [];
 		let block = height.get(id);
-		let cx = col_x[d] + (col_w[d] - n.w) / 2 + n.w / 2;
-		if (!kids.length) {
-			pos.set(id, {
-				x: cx,
-				y: top + block / 2
-			});
-			return;
-		}
+		let own_top = tops.get(id);
+		pos.set(id, {
+			x: col_x[d] + col_w[d] / 2,
+			y: own_top + block / 2
+		});
+		if (!kids.length) continue;
 		let kids_h = 0;
-		for (let i = 0; i < kids.length; i++) {
-			kids_h += height.get(kids[i]);
-			if (i > 0) kids_h += o.nodesep;
+		for (let k = 0; k < kids.length; k++) {
+			kids_h += height.get(kids[k]);
+			if (k > 0) kids_h += o.nodesep;
 		}
-		let cursor = top + (block - kids_h) / 2;
+		let cursor = own_top + (block - kids_h) / 2;
 		for (let kid of kids) {
-			place(kid, cursor);
+			tops.set(kid, cursor);
 			cursor += height.get(kid) + o.nodesep;
 		}
-		pos.set(id, {
-			x: cx,
-			y: top + block / 2
-		});
-	};
-	let top = 0;
-	for (let root of t.roots) {
-		place(root, top);
-		top += height.get(root) + o.nodesep * 2;
 	}
 	return pos;
 }
@@ -27583,40 +27594,53 @@ function layout_radial(nodes, edges, opts) {
 	let t = spanning_tree(nodes, edges);
 	let pos = /* @__PURE__ */ new Map();
 	if (!t.roots.length) return pos;
+	let order = walk_order(t);
 	let leaves = /* @__PURE__ */ new Map();
-	let count = (id) => {
+	for (let i = order.length - 1; i >= 0; i--) {
+		let id = order[i];
 		let kids = t.children.get(id) || [];
 		if (!kids.length) {
 			leaves.set(id, 1);
-			return 1;
+			continue;
 		}
 		let n = 0;
-		for (let kid of kids) n += count(kid);
+		for (let kid of kids) n += leaves.get(kid);
 		leaves.set(id, n);
-		return n;
-	};
+	}
 	let total = 0;
-	for (let root of t.roots) total += count(root);
+	for (let root of t.roots) total += leaves.get(root);
 	let single = t.roots.length === 1;
 	let ring_of = (id) => t.depth.get(id) + (single ? 0 : 1);
 	let angle = /* @__PURE__ */ new Map();
 	let rings = [];
-	let sector = (id, from, span) => {
-		let a = from + span / 2;
-		angle.set(id, a);
-		let ring = ring_of(id);
-		if (!rings[ring]) rings[ring] = [];
-		let n = t.by_id.get(id);
-		rings[ring].push({
-			id,
-			angle: a,
-			diag: Math.hypot(n.w, n.h)
-		});
-		let cursor = from;
-		for (let kid of t.children.get(id) || []) {
-			let part = span * leaves.get(kid) / leaves.get(id);
-			sector(kid, cursor, part);
-			cursor += part;
+	let sector = (root_id, root_from, root_span) => {
+		let stack = [{
+			id: root_id,
+			from: root_from,
+			span: root_span
+		}];
+		while (stack.length) {
+			let { id, from, span } = stack.pop();
+			let a = from + span / 2;
+			angle.set(id, a);
+			let ring = ring_of(id);
+			if (!rings[ring]) rings[ring] = [];
+			let n = t.by_id.get(id);
+			rings[ring].push({
+				id,
+				angle: a,
+				diag: Math.hypot(n.w, n.h)
+			});
+			let cursor = from;
+			for (let kid of t.children.get(id) || []) {
+				let part = span * leaves.get(kid) / leaves.get(id);
+				stack.push({
+					id: kid,
+					from: cursor,
+					span: part
+				});
+				cursor += part;
+			}
 		}
 	};
 	if (single) {
@@ -27667,15 +27691,20 @@ function layout_outline(nodes, edges, opts) {
 	let t = spanning_tree(nodes, edges);
 	let pos = /* @__PURE__ */ new Map();
 	let y = 0;
-	let visit = (id) => {
-		let n = t.by_id.get(id);
-		let d = t.depth.get(id);
-		pos.set(id, {
-			x: d * o.indent + n.w / 2,
-			y: y + n.h / 2
-		});
-		y += n.h + o.nodesep;
-		for (let kid of t.children.get(id) || []) visit(kid);
+	let visit = (root_id) => {
+		let stack = [root_id];
+		while (stack.length) {
+			let id = stack.pop();
+			let n = t.by_id.get(id);
+			let d = t.depth.get(id);
+			pos.set(id, {
+				x: d * o.indent + n.w / 2,
+				y: y + n.h / 2
+			});
+			y += n.h + o.nodesep;
+			let kids = t.children.get(id) || [];
+			for (let i = kids.length - 1; i >= 0; i--) stack.push(kids[i]);
+		}
 	};
 	for (let root of t.roots) {
 		visit(root);
@@ -62102,6 +62131,8 @@ function ac_set_operation_mode(gobj, event, kw, src) {
 *  into the URL, so what you are looking at stays linkable.
 ************************************************************/
 var LEGEND_GLYPH_STYLE = "font-size:1.5em; line-height:1; color:inherit;";
+var LEGEND_NAME_STYLE = "font-size:1.2em; line-height:1.2;";
+var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:1em;";
 function refresh_legend(gobj) {
 	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
@@ -62127,19 +62158,19 @@ function refresh_legend(gobj) {
 			"span",
 			{
 				class: "GRAPH_LEGEND_NAME",
-				style: hidden ? "text-decoration:line-through; opacity:.6;" : ""
+				style: LEGEND_NAME_STYLE + (hidden ? " text-decoration:line-through; opacity:.6;" : "")
 			},
 			topic_name
 		], [
 			"span",
 			{
 				class: "GRAPH_LEGEND_COUNT has-text-grey",
-				style: "margin-left:.35rem; font-size:.8em;"
+				style: LEGEND_COUNT_STYLE
 			},
 			hidden ? `${entry.total}` : `${entry.visible}/${entry.total}`
 		]);
 		let body_attrs = {
-			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " is-primary is-light" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
+			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " pressed_state" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
 			type: "button",
 			style: "gap:0; flex:0 0 auto;",
 			title: is_main ? t("main topic") : hidden ? t("show topic") : t("hide topic"),
@@ -62163,7 +62194,7 @@ function refresh_legend(gobj) {
 		if (is_main && state.main_chosen) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_STAR button is-small is-warning is-light",
+				class: "GRAPH_LEGEND_STAR button is-small pressed_state",
 				type: "button",
 				style: "padding:0 .4rem;",
 				title: t("main topic"),
@@ -62224,7 +62255,7 @@ function refresh_legend(gobj) {
 		if (!hidden && entry.linked && entry.loose > 0) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_LOOSE button is-small" + (entry.loose_shown ? " is-warning is-light" : ""),
+				class: "GRAPH_LEGEND_LOOSE button is-small" + (entry.loose_shown ? " pressed_state" : ""),
 				type: "button",
 				style: "padding:0 .45rem;",
 				title: t("loose records"),
@@ -62244,7 +62275,7 @@ function refresh_legend(gobj) {
 		if (!hidden) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_FOCUS button is-small" + (focused ? " is-primary is-light" : ""),
+				class: "GRAPH_LEGEND_FOCUS button is-small" + (focused ? " pressed_state" : ""),
 				type: "button",
 				style: "padding:0 .4rem;",
 				title: t("highlight topic"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.72",
+  "version": "7.23.73",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_treedb_graph.js

@@ -2339,6 +2339,15 @@ function ac_set_operation_mode(gobj, event, kw, src)
  *  stays small so the strip keeps its height; the glyph inside grows.  */
 const LEGEND_GLYPH_STYLE = 'font-size:1.5em; line-height:1; color:inherit;';
 
+/*  And the same for what a chip SAYS. The legend is a layer control --
+ *  a gadget somebody uses, not a footnote somebody glances at -- and a
+ *  topic name is the thing it is read for, so 0.75rem is the wrong
+ *  size for it. The button stays `is-small` because the strip has to
+ *  hold a chip per topic on one row; the name and the count come back
+ *  up inside it, exactly as the glyphs did.  */
+const LEGEND_NAME_STYLE  = 'font-size:1.2em; line-height:1.2;';
+const LEGEND_COUNT_STYLE = 'margin-left:.4rem; font-size:1em;';
+
 function refresh_legend(gobj)
 {
     let priv = gobj.priv;
@@ -2389,10 +2398,11 @@ function refresh_legend(gobj)
                              `border:1px solid rgba(0,0,0,.25);` +
                              (hidden? 'opacity:.35;' : '')}],
             ['span', {class: 'GRAPH_LEGEND_NAME',
-                      style: hidden? 'text-decoration:line-through; opacity:.6;' : ''},
+                      style: LEGEND_NAME_STYLE +
+                             (hidden? ' text-decoration:line-through; opacity:.6;' : '')},
              topic_name],
             ['span', {class: 'GRAPH_LEGEND_COUNT has-text-grey',
-                      style: 'margin-left:.35rem; font-size:.8em;'},
+                      style: LEGEND_COUNT_STYLE},
              hidden? `${entry.total}` : `${entry.visible}/${entry.total}`]
         );
 
@@ -2402,7 +2412,7 @@ function refresh_legend(gobj)
          *  every chip was dead except its star.  */
         let body_attrs = {
             class: 'GRAPH_LEGEND_ITEM button is-small' +
-                   (focused? ' is-primary is-light' : '') +
+                   (focused? ' pressed_state' : '') +
                    (is_main? ' GRAPH_LEGEND_MAIN' : ''),
             type: 'button',
             style: 'gap:0; flex:0 0 auto;',
@@ -2430,7 +2440,7 @@ function refresh_legend(gobj)
          *  is a button too: pressing it hands the choice back to the
          *  graph (deduced again). On a deduced one it is a mark.  */
         if(is_main && state.main_chosen) {
-            extras.push(['button', {class: 'GRAPH_LEGEND_STAR button is-small is-warning is-light',
+            extras.push(['button', {class: 'GRAPH_LEGEND_STAR button is-small pressed_state',
                                     type: 'button', style: 'padding:0 .4rem;',
                                     title: t('main topic'), 'data-i18n-title': 'main topic',
                                     'aria-label': t('main topic'), 'aria-pressed': 'true'},
@@ -2466,7 +2476,7 @@ function refresh_legend(gobj)
         if(!hidden && entry.linked && entry.loose > 0) {
             extras.push(['button', {
                 class: 'GRAPH_LEGEND_LOOSE button is-small' +
-                       (entry.loose_shown? ' is-warning is-light' : ''),
+                       (entry.loose_shown? ' pressed_state' : ''),
                 type: 'button', style: 'padding:0 .45rem;',
                 title: t('loose records'), 'data-i18n-title': 'loose records',
                 'aria-label': t('loose records'),
@@ -2483,7 +2493,7 @@ function refresh_legend(gobj)
         if(!hidden) {
             extras.push(['button', {
                 class: 'GRAPH_LEGEND_FOCUS button is-small' +
-                       (focused? ' is-primary is-light' : ''),
+                       (focused? ' pressed_state' : ''),
                 type: 'button', style: 'padding:0 .4rem;',
                 title: t('highlight topic'), 'data-i18n-title': 'highlight topic',
                 'aria-label': t('highlight topic'),

package/src/treedb_layout.js

@@ -142,6 +142,32 @@ export function spanning_tree(nodes, edges)
     return {roots: roots, children: children, depth: depth, by_id: by_id};
 }
 
+/************************************************************
+ *  The ids of a spanning tree in PARENT-BEFORE-CHILD order.
+ *
+ *  Every pass below used to be a recursive walk, which is the natural
+ *  way to write it and the one that dies on a deep tree: a
+ *  self-referent hook (a place inside a place inside a place) is as
+ *  deep as the data says, and the stack is not. Read this list
+ *  forwards for a pre-order pass and BACKWARDS for a post-order one
+ *  -- a child always sits after its parent, so reversed it always
+ *  sits before it, which is the whole of what post-order was for.
+ ************************************************************/
+function walk_order(t)
+{
+    let order = [];
+    let stack = t.roots.slice().reverse();
+    while(stack.length) {
+        let id = stack.pop();
+        order.push(id);
+        let kids = t.children.get(id) || [];
+        for(let i = kids.length - 1; i >= 0; i--) {
+            stack.push(kids[i]);
+        }
+    }
+    return order;
+}
+
 /************************************************************
  *  The tidy tree, left to right.
  *
@@ -167,60 +193,54 @@ export function layout_tree(nodes, edges, opts)
         x += (col_w[d] || 0) + o.ranksep;
     }
 
-    /*  Subtree heights, post-order.  */
+    /*  Subtree heights: post-order, so children before parents.  */
+    let order = walk_order(t);
     let height = new Map();
-    let measure = (id) => {
+    for(let i = order.length - 1; i >= 0; i--) {
+        let id = order[i];
         let kids = t.children.get(id) || [];
         let own = t.by_id.get(id).h;
-        if(!kids.length) {
-            height.set(id, own);
-            return own;
-        }
         let sum = 0;
-        for(let i = 0; i < kids.length; i++) {
-            sum += measure(kids[i]);
-            if(i > 0) {
+        for(let k = 0; k < kids.length; k++) {
+            sum += height.get(kids[k]);
+            if(k > 0) {
                 sum += o.nodesep;
             }
         }
-        let h = Math.max(own, sum);
-        height.set(id, h);
-        return h;
-    };
-    for(let root of t.roots) {
-        measure(root);
+        height.set(id, kids.length? Math.max(own, sum) : own);
     }
 
     /*  Placement, pre-order: a node is centred on the block of its
-     *  children, which starts at the top of its own block.  */
-    let place = (id, top) => {
-        let n = t.by_id.get(id);
+     *  children, which starts at the top of its own block. Every node
+     *  in a column is centred on the column, whatever its own width --
+     *  the cards of one depth line up by their middles.  */
+    let tops = new Map();
+    let top = 0;
+    for(let root of t.roots) {
+        tops.set(root, top);
+        top += height.get(root) + o.nodesep * 2;
+    }
+    for(let id of order) {
         let d = t.depth.get(id);
         let kids = t.children.get(id) || [];
         let block = height.get(id);
-        let cx = col_x[d] + (col_w[d] - n.w) / 2 + n.w / 2;
+        let own_top = tops.get(id);
+        pos.set(id, {x: col_x[d] + col_w[d] / 2, y: own_top + block / 2});
         if(!kids.length) {
-            pos.set(id, {x: cx, y: top + block / 2});
-            return;
+            continue;
         }
         let kids_h = 0;
-        for(let i = 0; i < kids.length; i++) {
-            kids_h += height.get(kids[i]);
-            if(i > 0) {
+        for(let k = 0; k < kids.length; k++) {
+            kids_h += height.get(kids[k]);
+            if(k > 0) {
                 kids_h += o.nodesep;
             }
         }
-        let cursor = top + (block - kids_h) / 2;
+        let cursor = own_top + (block - kids_h) / 2;
         for(let kid of kids) {
-            place(kid, cursor);
+            tops.set(kid, cursor);
             cursor += height.get(kid) + o.nodesep;
         }
-        pos.set(id, {x: cx, y: top + block / 2});
-    };
-    let top = 0;
-    for(let root of t.roots) {
-        place(root, top);
-        top += height.get(root) + o.nodesep * 2;
     }
 
     return pos;
@@ -253,24 +273,25 @@ export function layout_radial(nodes, edges, opts)
         return pos;
     }
 
-    /*  Leaves under each node: the sector it deserves.  */
+    /*  Leaves under each node: the sector it deserves. Post-order.  */
+    let order = walk_order(t);
     let leaves = new Map();
-    let count = (id) => {
+    for(let i = order.length - 1; i >= 0; i--) {
+        let id = order[i];
         let kids = t.children.get(id) || [];
         if(!kids.length) {
             leaves.set(id, 1);
-            return 1;
+            continue;
         }
         let n = 0;
         for(let kid of kids) {
-            n += count(kid);
+            n += leaves.get(kid);
         }
         leaves.set(id, n);
-        return n;
-    };
+    }
     let total = 0;
     for(let root of t.roots) {
-        total += count(root);
+        total += leaves.get(root);
     }
 
     /*  One root sits at the centre; several sit on the first ring
@@ -283,20 +304,27 @@ export function layout_radial(nodes, edges, opts)
      *  Angles do not depend on the radii, so they come first.  */
     let angle = new Map();
     let rings = [];         /*  ring -> [{id, angle, diag}]  */
-    let sector = (id, from, span) => {
-        let a = from + span / 2;
-        angle.set(id, a);
-        let ring = ring_of(id);
-        if(!rings[ring]) {
-            rings[ring] = [];
-        }
-        let n = t.by_id.get(id);
-        rings[ring].push({id: id, angle: a, diag: Math.hypot(n.w, n.h)});
-        let cursor = from;
-        for(let kid of (t.children.get(id) || [])) {
-            let part = span * leaves.get(kid) / leaves.get(id);
-            sector(kid, cursor, part);
-            cursor += part;
+    /*  An explicit stack, not recursion: the sectors of a ring are
+     *  sorted by angle in pass 2, so the order they are pushed in does
+     *  not matter -- only that every node gets its own.  */
+    let sector = (root_id, root_from, root_span) => {
+        let stack = [{id: root_id, from: root_from, span: root_span}];
+        while(stack.length) {
+            let {id, from, span} = stack.pop();
+            let a = from + span / 2;
+            angle.set(id, a);
+            let ring = ring_of(id);
+            if(!rings[ring]) {
+                rings[ring] = [];
+            }
+            let n = t.by_id.get(id);
+            rings[ring].push({id: id, angle: a, diag: Math.hypot(n.w, n.h)});
+            let cursor = from;
+            for(let kid of (t.children.get(id) || [])) {
+                let part = span * leaves.get(kid) / leaves.get(id);
+                stack.push({id: kid, from: cursor, span: part});
+                cursor += part;
+            }
         }
     };
     if(single) {
@@ -362,13 +390,20 @@ export function layout_outline(nodes, edges, opts)
     let pos = new Map();
 
     let y = 0;
-    let visit = (id) => {
-        let n = t.by_id.get(id);
-        let d = t.depth.get(id);
-        pos.set(id, {x: d * o.indent + n.w / 2, y: y + n.h / 2});
-        y += n.h + o.nodesep;
-        for(let kid of (t.children.get(id) || [])) {
-            visit(kid);
+    let visit = (root_id) => {
+        let stack = [root_id];
+        while(stack.length) {
+            let id = stack.pop();
+            let n = t.by_id.get(id);
+            let d = t.depth.get(id);
+            pos.set(id, {x: d * o.indent + n.w / 2, y: y + n.h / 2});
+            y += n.h + o.nodesep;
+            /*  Reversed, so a sibling pops in the order it was given:
+             *  here the order of the walk IS the order of the rows.  */
+            let kids = t.children.get(id) || [];
+            for(let i = kids.length - 1; i >= 0; i--) {
+                stack.push(kids[i]);
+            }
         }
     };
     for(let root of t.roots) {

package/src/treedb_layout.test.js

@@ -170,3 +170,35 @@ describe("the outline", () => {
         expect(pos.get("norte").y).toBe(96 + 10 + 48);
     });
 });
+
+describe("a deep tree", () => {
+    /*  A self-referent hook -- a place inside a place inside a place --
+     *  is as deep as the data says. The walks are iterative for exactly
+     *  this: recursive ones died here with "Maximum call stack size
+     *  exceeded", and a graph that cannot be drawn is not a layout
+     *  choice, it is an exception in the console.  */
+    const DEEP = 20000;
+    const deep_nodes = [];
+    const deep_edges = [];
+    for(let i = 0; i < DEEP; i++) {
+        deep_nodes.push({id: `n${i}`, w: 100, h: 40});
+        if(i > 0) {
+            deep_edges.push({source: `n${i - 1}`, target: `n${i}`, rank: 0});
+        }
+    }
+
+    test("the spanning tree reaches the bottom", () => {
+        let t = spanning_tree(deep_nodes, deep_edges);
+        expect(t.roots).toEqual(["n0"]);
+        expect(t.depth.get(`n${DEEP - 1}`)).toBe(DEEP - 1);
+    });
+
+    test("the three layouts place every node of it", () => {
+        for(let layout of [layout_tree, layout_outline, layout_radial]) {
+            let pos = layout(deep_nodes, deep_edges);
+            expect(pos.size).toBe(DEEP);
+            expect(Number.isFinite(pos.get(`n${DEEP - 1}`).x)).toBe(true);
+            expect(Number.isFinite(pos.get(`n${DEEP - 1}`).y)).toBe(true);
+        }
+    });
+});