@yuneta/gobj-ui 7.23.135 → 7.23.137

package/dist/gobj-ui.cjs.js

@@ -57017,12 +57017,41 @@ var MIN_READABLE_ZOOM = .5;
 *      G6 reports them.
 ************************************************************/
 var CAMERA_SETTLE_MS = 700;
+function node_nearest_view_centre(gobj) {
+	let graph = gobj.priv.graph;
+	let size;
+	try {
+		size = graph.getSize();
+	} catch (e) {
+		return "";
+	}
+	if (!(0, _yuneta_gobj_js.is_array)(size) || !(size[0] > 0) || !(size[1] > 0)) return "";
+	let [w, h] = size;
+	let best = "";
+	let best_d = Infinity;
+	for (let nd of graph.getNodeData() || []) {
+		let vp = yui_graph_viewport_of(graph, nd.id);
+		if (!vp || !(0, _yuneta_gobj_js.is_number)(vp[0]) || !(0, _yuneta_gobj_js.is_number)(vp[1])) continue;
+		if (vp[0] < 0 || vp[1] < 0 || vp[0] > w || vp[1] > h) continue;
+		let d = (vp[0] - w / 2) ** 2 + (vp[1] - h / 2) ** 2;
+		if (d < best_d) {
+			best_d = d;
+			best = nd.id;
+		}
+	}
+	return best;
+}
+function camera_anchor_node(gobj) {
+	let priv = gobj.priv;
+	if (priv.anchor_state === "on" && priv.anchor_id) return priv.anchor_id;
+	return node_nearest_view_centre(gobj) || fold_keep_node(gobj);
+}
 function read_camera(gobj) {
 	let graph = gobj.priv.graph;
 	if (!graph || typeof graph.getZoom !== "function") return null;
 	try {
 		let z = graph.getZoom();
-		let node = fold_keep_node(gobj);
+		let node = camera_anchor_node(gobj);
 		let vp = node ? yui_graph_viewport_of(graph, node) : null;
 		if (!(0, _yuneta_gobj_js.is_number)(z) || !node || !vp || !(0, _yuneta_gobj_js.is_number)(vp[0]) || !(0, _yuneta_gobj_js.is_number)(vp[1])) return null;
 		return {
@@ -57041,6 +57070,8 @@ async function restore_camera(gobj) {
 	let cam = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "camera");
 	if (!graph || (0, _yuneta_gobj_js.empty_json)(cam) || !(0, _yuneta_gobj_js.is_number)(cam.zoom) || !cam.node || !(0, _yuneta_gobj_js.is_number)(cam.x) || !(0, _yuneta_gobj_js.is_number)(cam.y)) return false;
 	if (!yui_graph_viewport_of(graph, cam.node)) return false;
+	let size = graph.getSize() || [0, 0];
+	if (cam.x < 0 || cam.y < 0 || cam.x > size[0] || cam.y > size[1]) return false;
 	priv._camera_restoring = true;
 	try {
 		await graph.zoomTo(cam.zoom);
@@ -61262,6 +61293,7 @@ async function reconcile_fold_apply(gobj, opts, visible) {
 		if (opts.fit) await graph_fit_readable(gobj);
 		else if (opts.keep && opts.keep_vp) await yui_graph_place_at(graph, opts.keep, opts.keep_vp);
 	}
+	if ((graph.getNodeData() || []).length > 0 && !node_nearest_view_centre(gobj)) await graph_fit_readable(gobj);
 	priv._camera_placed = true;
 	update_resize_handles_position(gobj);
 	update_port_resize_handles_position(gobj);
@@ -61339,13 +61371,13 @@ function ac_descs(gobj, event, kw, src) {
 	gobj.priv;
 	let descs = kw;
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "descs", descs);
-	let idx = 0;
-	for (const [topic_name, desc] of Object.entries(descs)) {
-		calculate_hooks_fkeys_counter(desc);
-		if (topic_name.substring(0, 2) === "__") continue;
-		desc.color = node_colors[idx % node_colors.length];
-		idx++;
-	}
+	for (const desc of Object.values(descs)) calculate_hooks_fkeys_counter(desc);
+	let names = Object.keys(descs).filter((topic_name) => {
+		return topic_name.substring(0, 2) !== "__";
+	}).sort((a, b) => {
+		return a.localeCompare(b);
+	});
+	for (let idx = 0; idx < names.length; idx++) descs[names[idx]].color = node_colors[idx % node_colors.length];
 	return 0;
 }
 /************************************************************
@@ -63130,56 +63162,54 @@ function make_toolbar(gobj) {
 				evt.stopPropagation();
 				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_OPERATION_MODE", { operation_mode: evt.target.value }, gobj);
 			} }
-		],
-		[
-			"button",
+		]
+	];
+	let center_items = [...yui_graph_fold_items(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "wide")), ...node_shape_items(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "wide"))];
+	let backend_items = [[
+		"button",
+		{
+			class: "GRAPH_REFRESH button",
+			title: (0, i18next.t)("refresh"),
+			"data-i18n-title": "refresh",
+			"aria-label": (0, i18next.t)("refresh"),
+			"data-i18n-aria-label": "refresh"
+		},
+		[yui_toolbar_icon("yi-arrows-rotate"), [
+			"span",
 			{
-				class: "GRAPH_REFRESH button",
-				title: (0, i18next.t)("refresh"),
-				"data-i18n-title": "refresh",
-				"aria-label": (0, i18next.t)("refresh"),
-				"data-i18n-aria-label": "refresh"
+				class: "is-hidden-mobile",
+				style: "padding-left:5px;",
+				i18n: "refresh"
 			},
-			[yui_toolbar_icon("yi-arrows-rotate"), [
-				"span",
-				{
-					class: "is-hidden-mobile",
-					style: "padding-left:5px;",
-					i18n: "refresh"
-				},
-				"refresh"
-			]],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_REFRESH_TREEDB", { evt }, gobj);
-			} }
-		],
-		...yui_graph_fold_items(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "wide")),
-		...node_shape_items(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "wide")),
-		[
-			"button",
+			"refresh"
+		]],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_REFRESH_TREEDB", { evt }, gobj);
+		} }
+	], [
+		"button",
+		{
+			class: "button ml-2 TREEDB_JSON_BTN",
+			title: (0, i18next.t)("raw json"),
+			"aria-label": (0, i18next.t)("raw json"),
+			"data-i18n-title": "raw json",
+			"data-i18n-aria-label": "raw json"
+		},
+		[yui_toolbar_icon("yi-eye"), [
+			"span",
 			{
-				class: "button ml-2 TREEDB_JSON_BTN",
-				title: (0, i18next.t)("raw json"),
-				"aria-label": (0, i18next.t)("raw json"),
-				"data-i18n-title": "raw json",
-				"data-i18n-aria-label": "raw json"
+				class: "is-hidden-mobile",
+				style: "padding-left:5px;",
+				i18n: "raw json"
 			},
-			[yui_toolbar_icon("yi-eye"), [
-				"span",
-				{
-					class: "is-hidden-mobile",
-					style: "padding-left:5px;",
-					i18n: "raw json"
-				},
-				"raw json"
-			]],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_OPEN_JSON", {}, gobj);
-			} }
-		]
-	];
+			"raw json"
+		]],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_OPEN_JSON", {}, gobj);
+		} }
+	]];
 	let $find_input = (0, _yuneta_gobj_js.createElement2)([
 		"input",
 		{
@@ -63214,6 +63244,18 @@ function make_toolbar(gobj) {
 		]]
 	]);
 	attach_clear($find_control, $find_input);
+	let right_items = [...[$find_control, [
+		"div",
+		{
+			class: "GRAPH_FIND_RESULT is-hidden",
+			style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+		},
+		[[
+			"span",
+			{ class: "GRAPH_FIND_COUNT" },
+			""
+		]]
+	]], ...backend_items];
 	const $toolbar_header = yui_toolbar({}, [
 		[
 			"div",
@@ -63223,23 +63265,12 @@ function make_toolbar(gobj) {
 		[
 			"div",
 			{ class: "yui-horizontal-toolbar-section center" },
-			[$find_control, [
-				"div",
-				{
-					class: "GRAPH_FIND_RESULT is-hidden",
-					style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
-				},
-				[[
-					"span",
-					{ class: "GRAPH_FIND_COUNT" },
-					""
-				]]
-			]]
+			center_items
 		],
 		[
 			"div",
 			{ class: "GRAPH_MODE_BUTTONS yui-horizontal-toolbar-section right" },
-			[]
+			right_items
 		]
 	]);
 	(0, _yuneta_gobj_js.refresh_language)($toolbar_header, i18next.t);
@@ -65162,17 +65193,21 @@ function schema_to_graph(gobj) {
 		nodes,
 		edges: []
 	};
-	let idx = 0;
+	let rank = {};
+	Object.keys(descs).filter((topic) => {
+		return topic.substring(0, 2) !== "__";
+	}).sort((a, b) => {
+		return a.localeCompare(b);
+	}).forEach((topic, i) => {
+		rank[topic] = i;
+	});
 	for (let topic of Object.keys(descs)) {
 		let is_system = topic.substring(0, 2) === "__";
 		if (!system && is_system) continue;
 		let rows = schema_rows(descs[topic]);
 		let color;
 		if (is_system) color = SYSTEM_TOPIC_COLOR;
-		else {
-			color = topic_colors[idx % topic_colors.length];
-			idx++;
-		}
+		else color = topic_colors[rank[topic] % topic_colors.length];
 		cards[topic] = {
 			rows,
 			size: card_size(rows),

package/dist/gobj-ui.es.js

@@ -57012,12 +57012,41 @@ var MIN_READABLE_ZOOM = .5;
 *      G6 reports them.
 ************************************************************/
 var CAMERA_SETTLE_MS = 700;
+function node_nearest_view_centre(gobj) {
+	let graph = gobj.priv.graph;
+	let size;
+	try {
+		size = graph.getSize();
+	} catch (e) {
+		return "";
+	}
+	if (!is_array(size) || !(size[0] > 0) || !(size[1] > 0)) return "";
+	let [w, h] = size;
+	let best = "";
+	let best_d = Infinity;
+	for (let nd of graph.getNodeData() || []) {
+		let vp = yui_graph_viewport_of(graph, nd.id);
+		if (!vp || !is_number(vp[0]) || !is_number(vp[1])) continue;
+		if (vp[0] < 0 || vp[1] < 0 || vp[0] > w || vp[1] > h) continue;
+		let d = (vp[0] - w / 2) ** 2 + (vp[1] - h / 2) ** 2;
+		if (d < best_d) {
+			best_d = d;
+			best = nd.id;
+		}
+	}
+	return best;
+}
+function camera_anchor_node(gobj) {
+	let priv = gobj.priv;
+	if (priv.anchor_state === "on" && priv.anchor_id) return priv.anchor_id;
+	return node_nearest_view_centre(gobj) || fold_keep_node(gobj);
+}
 function read_camera(gobj) {
 	let graph = gobj.priv.graph;
 	if (!graph || typeof graph.getZoom !== "function") return null;
 	try {
 		let z = graph.getZoom();
-		let node = fold_keep_node(gobj);
+		let node = camera_anchor_node(gobj);
 		let vp = node ? yui_graph_viewport_of(graph, node) : null;
 		if (!is_number(z) || !node || !vp || !is_number(vp[0]) || !is_number(vp[1])) return null;
 		return {
@@ -57036,6 +57065,8 @@ async function restore_camera(gobj) {
 	let cam = gobj_read_attr(gobj, "camera");
 	if (!graph || empty_json(cam) || !is_number(cam.zoom) || !cam.node || !is_number(cam.x) || !is_number(cam.y)) return false;
 	if (!yui_graph_viewport_of(graph, cam.node)) return false;
+	let size = graph.getSize() || [0, 0];
+	if (cam.x < 0 || cam.y < 0 || cam.x > size[0] || cam.y > size[1]) return false;
 	priv._camera_restoring = true;
 	try {
 		await graph.zoomTo(cam.zoom);
@@ -61257,6 +61288,7 @@ async function reconcile_fold_apply(gobj, opts, visible) {
 		if (opts.fit) await graph_fit_readable(gobj);
 		else if (opts.keep && opts.keep_vp) await yui_graph_place_at(graph, opts.keep, opts.keep_vp);
 	}
+	if ((graph.getNodeData() || []).length > 0 && !node_nearest_view_centre(gobj)) await graph_fit_readable(gobj);
 	priv._camera_placed = true;
 	update_resize_handles_position(gobj);
 	update_port_resize_handles_position(gobj);
@@ -61334,13 +61366,13 @@ function ac_descs(gobj, event, kw, src) {
 	gobj.priv;
 	let descs = kw;
 	gobj_write_attr(gobj, "descs", descs);
-	let idx = 0;
-	for (const [topic_name, desc] of Object.entries(descs)) {
-		calculate_hooks_fkeys_counter(desc);
-		if (topic_name.substring(0, 2) === "__") continue;
-		desc.color = node_colors[idx % node_colors.length];
-		idx++;
-	}
+	for (const desc of Object.values(descs)) calculate_hooks_fkeys_counter(desc);
+	let names = Object.keys(descs).filter((topic_name) => {
+		return topic_name.substring(0, 2) !== "__";
+	}).sort((a, b) => {
+		return a.localeCompare(b);
+	});
+	for (let idx = 0; idx < names.length; idx++) descs[names[idx]].color = node_colors[idx % node_colors.length];
 	return 0;
 }
 /************************************************************
@@ -63125,56 +63157,54 @@ function make_toolbar(gobj) {
 				evt.stopPropagation();
 				gobj_send_event(gobj, "EV_SET_OPERATION_MODE", { operation_mode: evt.target.value }, gobj);
 			} }
-		],
-		[
-			"button",
+		]
+	];
+	let center_items = [...yui_graph_fold_items(gobj, gobj_read_str_attr(gobj, "wide")), ...node_shape_items(gobj, gobj_read_str_attr(gobj, "wide"))];
+	let backend_items = [[
+		"button",
+		{
+			class: "GRAPH_REFRESH button",
+			title: t("refresh"),
+			"data-i18n-title": "refresh",
+			"aria-label": t("refresh"),
+			"data-i18n-aria-label": "refresh"
+		},
+		[yui_toolbar_icon("yi-arrows-rotate"), [
+			"span",
 			{
-				class: "GRAPH_REFRESH button",
-				title: t("refresh"),
-				"data-i18n-title": "refresh",
-				"aria-label": t("refresh"),
-				"data-i18n-aria-label": "refresh"
+				class: "is-hidden-mobile",
+				style: "padding-left:5px;",
+				i18n: "refresh"
 			},
-			[yui_toolbar_icon("yi-arrows-rotate"), [
-				"span",
-				{
-					class: "is-hidden-mobile",
-					style: "padding-left:5px;",
-					i18n: "refresh"
-				},
-				"refresh"
-			]],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				gobj_send_event(gobj, "EV_REFRESH_TREEDB", { evt }, gobj);
-			} }
-		],
-		...yui_graph_fold_items(gobj, gobj_read_str_attr(gobj, "wide")),
-		...node_shape_items(gobj, gobj_read_str_attr(gobj, "wide")),
-		[
-			"button",
+			"refresh"
+		]],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, "EV_REFRESH_TREEDB", { evt }, gobj);
+		} }
+	], [
+		"button",
+		{
+			class: "button ml-2 TREEDB_JSON_BTN",
+			title: t("raw json"),
+			"aria-label": t("raw json"),
+			"data-i18n-title": "raw json",
+			"data-i18n-aria-label": "raw json"
+		},
+		[yui_toolbar_icon("yi-eye"), [
+			"span",
 			{
-				class: "button ml-2 TREEDB_JSON_BTN",
-				title: t("raw json"),
-				"aria-label": t("raw json"),
-				"data-i18n-title": "raw json",
-				"data-i18n-aria-label": "raw json"
+				class: "is-hidden-mobile",
+				style: "padding-left:5px;",
+				i18n: "raw json"
 			},
-			[yui_toolbar_icon("yi-eye"), [
-				"span",
-				{
-					class: "is-hidden-mobile",
-					style: "padding-left:5px;",
-					i18n: "raw json"
-				},
-				"raw json"
-			]],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				gobj_send_event(gobj, "EV_OPEN_JSON", {}, gobj);
-			} }
-		]
-	];
+			"raw json"
+		]],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, "EV_OPEN_JSON", {}, gobj);
+		} }
+	]];
 	let $find_input = createElement2([
 		"input",
 		{
@@ -63209,6 +63239,18 @@ function make_toolbar(gobj) {
 		]]
 	]);
 	attach_clear($find_control, $find_input);
+	let right_items = [...[$find_control, [
+		"div",
+		{
+			class: "GRAPH_FIND_RESULT is-hidden",
+			style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+		},
+		[[
+			"span",
+			{ class: "GRAPH_FIND_COUNT" },
+			""
+		]]
+	]], ...backend_items];
 	const $toolbar_header = yui_toolbar({}, [
 		[
 			"div",
@@ -63218,23 +63260,12 @@ function make_toolbar(gobj) {
 		[
 			"div",
 			{ class: "yui-horizontal-toolbar-section center" },
-			[$find_control, [
-				"div",
-				{
-					class: "GRAPH_FIND_RESULT is-hidden",
-					style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
-				},
-				[[
-					"span",
-					{ class: "GRAPH_FIND_COUNT" },
-					""
-				]]
-			]]
+			center_items
 		],
 		[
 			"div",
 			{ class: "GRAPH_MODE_BUTTONS yui-horizontal-toolbar-section right" },
-			[]
+			right_items
 		]
 	]);
 	refresh_language($toolbar_header, t);
@@ -65157,17 +65188,21 @@ function schema_to_graph(gobj) {
 		nodes,
 		edges: []
 	};
-	let idx = 0;
+	let rank = {};
+	Object.keys(descs).filter((topic) => {
+		return topic.substring(0, 2) !== "__";
+	}).sort((a, b) => {
+		return a.localeCompare(b);
+	}).forEach((topic, i) => {
+		rank[topic] = i;
+	});
 	for (let topic of Object.keys(descs)) {
 		let is_system = topic.substring(0, 2) === "__";
 		if (!system && is_system) continue;
 		let rows = schema_rows(descs[topic]);
 		let color;
 		if (is_system) color = SYSTEM_TOPIC_COLOR;
-		else {
-			color = topic_colors[idx % topic_colors.length];
-			idx++;
-		}
+		else color = topic_colors[rank[topic] % topic_colors.length];
 		cards[topic] = {
 			rows,
 			size: card_size(rows),

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -3382,6 +3382,58 @@ const CAMERA_SETTLE_MS = 700;
  *
  *  A node and a pixel is also the SAME thing the folds keep across a
  *  rebuild. One idea, used twice.  */
+/*  The drawn node nearest the middle of the VIEWPORT, among the ones
+ *  inside it; "" when there is none -- which is a blank view.  */
+function node_nearest_view_centre(gobj)
+{
+    let graph = gobj.priv.graph;
+    let size;
+    try {
+        size = graph.getSize();
+    } catch(e) {
+        return "";      /*  between renders: nothing is drawn  */
+    }
+    if(!is_array(size) || !(size[0] > 0) || !(size[1] > 0)) {
+        return "";
+    }
+    let [w, h] = size;
+    let best = "";
+    let best_d = Infinity;
+    for(let nd of (graph.getNodeData() || [])) {
+        let vp = yui_graph_viewport_of(graph, nd.id);
+        if(!vp || !is_number(vp[0]) || !is_number(vp[1])) {
+            continue;
+        }
+        if(vp[0] < 0 || vp[1] < 0 || vp[0] > w || vp[1] > h) {
+            continue;
+        }
+        let d = (vp[0] - w / 2) ** 2 + (vp[1] - h / 2) ** 2;
+        if(d < best_d) {
+            best_d = d;
+            best = nd.id;
+        }
+    }
+    return best;
+}
+
+/*  The node a camera is SAVED by: the anchor when one is set, else the
+ *  node nearest the middle of the viewport.
+ *
+ *  It used to be fold_keep_node() -- the first root of the tree,
+ *  wherever it was. A reader who had panned away saved a node OFF
+ *  screen at a pixel off screen, and a reload whose layout had moved
+ *  by a hair put that one node back at that pixel and nothing else in
+ *  view: a blank graph, with the whole tree sitting in the minimap.  */
+function camera_anchor_node(gobj)
+{
+    let priv = gobj.priv;
+
+    if(priv.anchor_state === "on" && priv.anchor_id) {
+        return priv.anchor_id;
+    }
+    return node_nearest_view_centre(gobj) || fold_keep_node(gobj);
+}
+
 function read_camera(gobj)
 {
     let priv = gobj.priv;
@@ -3392,7 +3444,7 @@ function read_camera(gobj)
     }
     try {
         let z = graph.getZoom();
-        let node = fold_keep_node(gobj);
+        let node = camera_anchor_node(gobj);
         let vp = node? yui_graph_viewport_of(graph, node) : null;
         if(!is_number(z) || !node || !vp || !is_number(vp[0]) || !is_number(vp[1])) {
             return null;
@@ -3422,6 +3474,13 @@ async function restore_camera(gobj)
     if(!yui_graph_viewport_of(graph, cam.node)) {
         return false;
     }
+    /*  A camera saved by a node OFF screen (before 7.23.137 the node was
+     *  the first root, wherever it was) frames nothing it can promise:
+     *  the opening fit instead.  */
+    let size = graph.getSize() || [0, 0];
+    if(cam.x < 0 || cam.y < 0 || cam.x > size[0] || cam.y > size[1]) {
+        return false;
+    }
     priv._camera_restoring = true;
     try {
         await graph.zoomTo(cam.zoom);
@@ -9709,6 +9768,15 @@ async function reconcile_fold_apply(gobj, opts, visible)
             await yui_graph_place_at(graph, opts.keep, opts.keep_vp);
         }
     }
+    /*  And never a BLANK viewport. Every branch above can leave one: a
+     *  restore by a node whose surroundings moved, a refresh or a global
+     *  fold holding the first root still at a pixel off screen, a saved
+     *  arrangement opened with no camera (no fit: its owner's view is
+     *  part of it) far from where G6 starts looking. A view with nothing
+     *  in it is not a place anybody chose to be.  */
+    if((graph.getNodeData() || []).length > 0 && !node_nearest_view_centre(gobj)) {
+        await graph_fit_readable(gobj);
+    }
     /*  Whichever branch ran -- including none of them, which is a
      *  graph somebody had arranged and left where it was -- the
      *  opening viewport is decided from here on, and every move after
@@ -9825,15 +9893,23 @@ function ac_descs(gobj, event, kw, src)
     /*
      *  Assign colors and calculate counters
      *  descs is a dict: { __snaps__: {…}, roles: {…}, users: {…} }
+     *
+     *  The palette goes by ALPHABETICAL order of the topic names, not
+     *  by the order the backend lists them in: that one is not the same
+     *  from one load to the next, and two topics swapped colours with
+     *  it. The legend is alphabetical too, so the strip reads as the
+     *  palette in order.
      */
-    let idx = 0;
-    for(const [topic_name, desc] of Object.entries(descs)) {
+    for(const desc of Object.values(descs)) {
         calculate_hooks_fkeys_counter(desc);
-        if(topic_name.substring(0, 2) === "__") {
-            continue;
-        }
-        desc.color = node_colors[idx % node_colors.length];
-        idx++;
+    }
+    let names = Object.keys(descs).filter((topic_name) => {
+        return topic_name.substring(0, 2) !== "__";
+    }).sort((a, b) => {
+        return a.localeCompare(b);
+    });
+    for(let idx = 0; idx < names.length; idx++) {
+        descs[names[idx]].color = node_colors[idx % node_colors.length];
     }
 
     return 0;

package/src/c_yui_treedb_graph.js

@@ -694,6 +694,11 @@ function make_toolbar(gobj)
     );
 
     /*
+     *  Three sections, by what the control is ABOUT:
+     *      left    how the graph is built: layout and operation mode
+     *      center  how it is SHOWN: the fold pair and the node views
+     *      right   what it is asked: find, refresh, the raw json
+     *
      *  Left: layout and mode selectors
      *  Layout options are empty — populated after child creation
      *  via populate_nodes_tree_options()
@@ -730,6 +735,28 @@ function make_toolbar(gobj)
             }
         }],
 
+    ];
+
+    /*
+     *  Center: how the graph is SHOWN.
+     */
+    let center_items = [
+        /*  The fold pair, the same two chevrons the JSON graph and the
+         *  lazy tree use: the graph opens folded (see the G6 child), and
+         *  these are the whole thing and the roots alone. Refresh is the
+         *  way back to the default depth.  */
+        ...yui_graph_fold_items(gobj, gobj_read_str_attr(gobj, "wide")),
+
+        /*  The view of the nodes -- full cards, one-line pills or
+         *  figures -- and the name under a figure.  */
+        ...node_shape_items(gobj, gobj_read_str_attr(gobj, "wide")),
+    ];
+
+    /*
+     *  Right, after the find box: ask the backend again, and read its
+     *  raw json.
+     */
+    let backend_items = [
         /*  Icon + label, and the label is `is-hidden-mobile`: on a phone
          *  this is a bare icon, so the name has to be on the button.  */
         ['button', {class: 'GRAPH_REFRESH button',
@@ -744,16 +771,6 @@ function make_toolbar(gobj)
             }
         }],
 
-        /*  The fold pair, the same two chevrons the JSON graph and the
-         *  lazy tree use: the graph opens folded (see the G6 child), and
-         *  these are the whole thing and the roots alone. Refresh is the
-         *  way back to the default depth.  */
-        ...yui_graph_fold_items(gobj, gobj_read_str_attr(gobj, "wide")),
-
-        /*  The view of the nodes -- full cards, one-line pills or
-         *  figures -- and the name under a figure.  */
-        ...node_shape_items(gobj, gobj_read_str_attr(gobj, "wide")),
-
         /*  Inspect the treedb's raw tranger json in the lazy tree viewer
          *  (print-tranger on the C_NODE service). A treedb can be huge, so
          *  the viewer drills in on demand — see open_json_viewer.  */
@@ -771,7 +788,7 @@ function make_toolbar(gobj)
     ];
 
     /*
-     *  Center: find a node.
+     *  Right: find a node.
      *
      *  A graph of a few hundred records has no other way in: the only way
      *  to locate one was to read every card. The box highlights every
@@ -821,7 +838,7 @@ function make_toolbar(gobj)
         ]]);
     attach_clear($find_control, $find_input);
 
-    let center_items = [
+    let find_items = [
         $find_control,
         /*  ONE counted span, not a number beside a word: "1 matches" is
          *  what two spans always produce, because nothing there can see
@@ -844,10 +861,9 @@ function make_toolbar(gobj)
         ]]
     ];
 
-    /*
-     *  Right, fill in set_mode
-     */
     let right_items = [
+        ...find_items,
+        ...backend_items,
     ];
 
     const $toolbar_header = yui_toolbar({}, [

package/src/c_yui_treedb_schema.js

@@ -406,7 +406,19 @@ function schema_to_graph(gobj)
         return {nodes: nodes, edges: []};
     }
 
-    let idx = 0;
+    /*  The palette by ALPHABETICAL rank, as the treedb graph does it:
+     *  the backend's order is not the same from one load to the next,
+     *  and a topic's colour must not change with it. The cards keep
+     *  the backend's order; only the colour is ranked.  */
+    let rank = {};
+    Object.keys(descs).filter((topic) => {
+        return topic.substring(0, 2) !== "__";
+    }).sort((a, b) => {
+        return a.localeCompare(b);
+    }).forEach((topic, i) => {
+        rank[topic] = i;
+    });
+
     for(let topic of Object.keys(descs)) {
         let is_system = (topic.substring(0, 2) === "__");
         if(!system && is_system) {
@@ -417,8 +429,7 @@ function schema_to_graph(gobj)
         if(is_system) {
             color = SYSTEM_TOPIC_COLOR;
         } else {
-            color = topic_colors[idx % topic_colors.length];
-            idx++;
+            color = topic_colors[rank[topic] % topic_colors.length];
         }
         cards[topic] = {rows: rows, size: card_size(rows), color: color};
     }