@yuneta/gobj-ui 7.23.136 → 7.23.138

package/dist/gobj-ui.cjs.js

@@ -21908,6 +21908,31 @@ function cmd_get_topic_data$1(gobj, cmd, kw, src) {
 ************************************************************/
 function build_ui$6(gobj) {
 	let source_url = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "source_url") || "";
+	let routes = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "card_action_routes");
+	let graph_tpl = (0, _yuneta_gobj_js.is_object)(routes) && typeof routes.graph === "string" ? routes.graph : "";
+	let graph_href = /\/\{topic\}$/.test(graph_tpl) ? graph_tpl.replace(/\/\{topic\}$/, "") : "";
+	let graph_items = [];
+	if (graph_href) graph_items.push([
+		"a",
+		{
+			class: "button TREEDB_GRAPH_BTN",
+			href: graph_href,
+			style: "margin-left:auto;",
+			title: (0, i18next.t)("graph"),
+			"aria-label": (0, i18next.t)("graph"),
+			"data-i18n-title": "graph",
+			"data-i18n-aria-label": "graph"
+		},
+		[[
+			"span",
+			{ class: "icon" },
+			[yui_toolbar_icon("yi-hexagon-nodes")]
+		], [
+			"span",
+			{ i18n: "graph" },
+			"graph"
+		]]
+	]);
 	let $container = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
@@ -21988,11 +22013,12 @@ function build_ui$6(gobj) {
 								source_url
 							]]
 						],
+						...graph_items,
 						[
 							"button",
 							{
 								class: "button TREEDB_JSON_BTN",
-								style: "margin-left:auto;",
+								style: graph_href ? "" : "margin-left:auto;",
 								title: (0, i18next.t)("raw json"),
 								"aria-label": (0, i18next.t)("raw json"),
 								"data-i18n-title": "raw json",
@@ -57017,12 +57043,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 +57096,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 +61319,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);
@@ -63130,56 +63188,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 +63270,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 +63291,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);

package/dist/gobj-ui.es.js

@@ -21903,6 +21903,31 @@ function cmd_get_topic_data$1(gobj, cmd, kw, src) {
 ************************************************************/
 function build_ui$6(gobj) {
 	let source_url = gobj_read_str_attr(gobj, "source_url") || "";
+	let routes = gobj_read_attr(gobj, "card_action_routes");
+	let graph_tpl = is_object(routes) && typeof routes.graph === "string" ? routes.graph : "";
+	let graph_href = /\/\{topic\}$/.test(graph_tpl) ? graph_tpl.replace(/\/\{topic\}$/, "") : "";
+	let graph_items = [];
+	if (graph_href) graph_items.push([
+		"a",
+		{
+			class: "button TREEDB_GRAPH_BTN",
+			href: graph_href,
+			style: "margin-left:auto;",
+			title: t("graph"),
+			"aria-label": t("graph"),
+			"data-i18n-title": "graph",
+			"data-i18n-aria-label": "graph"
+		},
+		[[
+			"span",
+			{ class: "icon" },
+			[yui_toolbar_icon("yi-hexagon-nodes")]
+		], [
+			"span",
+			{ i18n: "graph" },
+			"graph"
+		]]
+	]);
 	let $container = createElement2([
 		"div",
 		{
@@ -21983,11 +22008,12 @@ function build_ui$6(gobj) {
 								source_url
 							]]
 						],
+						...graph_items,
 						[
 							"button",
 							{
 								class: "button TREEDB_JSON_BTN",
-								style: "margin-left:auto;",
+								style: graph_href ? "" : "margin-left:auto;",
 								title: t("raw json"),
 								"aria-label": t("raw json"),
 								"data-i18n-title": "raw json",
@@ -57012,12 +57038,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 +57091,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 +61314,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);
@@ -63125,56 +63183,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 +63265,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 +63286,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.136",
+  "version": "7.23.138",
   "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

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_topics.js

@@ -254,6 +254,29 @@ function build_ui(gobj)
 {
     let source_url = gobj_read_str_attr(gobj, "source_url") || "";
 
+    /*  The whole treedb as a graph, with NO topic focused. A card's graph
+     *  icon lands on `<graph route>/<topic>`, and that segment is a
+     *  FOCUS: going through a card was the only way in, and it always
+     *  arrived with that topic highlighted. The route is the card's
+     *  template without its `/{topic}`; a host whose template does not
+     *  end in it, or gives none, gets no button.  */
+    let routes = gobj_read_attr(gobj, "card_action_routes");
+    let graph_tpl = is_object(routes) && typeof routes.graph === "string"? routes.graph : "";
+    let graph_href = /\/\{topic\}$/.test(graph_tpl)? graph_tpl.replace(/\/\{topic\}$/, "") : "";
+    let graph_items = [];
+    if(graph_href) {
+        graph_items.push(
+            ['a', {class: 'button TREEDB_GRAPH_BTN',
+                   href: graph_href,
+                   style: 'margin-left:auto;',
+                   title: t('graph'), 'aria-label': t('graph'),
+                   'data-i18n-title': 'graph', 'data-i18n-aria-label': 'graph'}, [
+                ['span', {class: 'icon'}, [yui_toolbar_icon('yi-hexagon-nodes')]],
+                ['span', {i18n: 'graph'}, 'graph']
+            ]]
+        );
+    }
+
     /*----------------------------------------------*
      *  Layout Schema
      *----------------------------------------------*/
@@ -262,12 +285,15 @@ function build_ui(gobj)
             ['div', {class: 'is-flex-grow-0'}, [
                 ['div', {class: 'is-flex is-align-items-center TREEDB_TOPICS_TOOLBAR',
                          style: 'gap:.25rem; padding:.25rem .25rem;'}, [
-                    /*  This toolbar never holds more than TWO buttons at once
-                     *  (back|toggle on the left, json on the right), so the
-                     *  labels stay on mobile — a deliberate exception to the
-                     *  icon-only-on-mobile rule: two bare squares side by side
-                     *  read as the same control. The graph's toolbar has many
-                     *  more, so it keeps is-hidden-mobile. */
+                    /*  This toolbar never holds more than THREE buttons at once
+                     *  (back|toggle on the left, graph and json on the right),
+                     *  so the labels stay on mobile — a deliberate exception
+                     *  to the icon-only-on-mobile rule: bare squares side by
+                     *  side read as the same control, and the toggle and the
+                     *  graph wear the same icon. They fit at 360px because the
+                     *  source url between them gives way down to its icon. The
+                     *  graph's toolbar has many more, so it keeps
+                     *  is-hidden-mobile. */
 
                     /*  Back to the topic-cards grid (cards-landing mode only);
                      *  hidden until a topic is open. */
@@ -309,11 +335,14 @@ function build_ui(gobj)
                         ['span', {class: 'icon'}, [yui_toolbar_icon('yi-cloudversify')]],
                         ['span', {class: 'TREEDB_TOPICS_SOURCE_URL'}, source_url]
                     ]],
+                    ...graph_items,
                     /*  Inspect the treedb's raw tranger json (whole service,
-                     *  print-tranger, lazy drill). Last + margin-left:auto:
-                     *  flush right, away from the back arrow it sat next to. */
+                     *  print-tranger, lazy drill). Last and flush right, away
+                     *  from the back arrow it sat next to: the `margin-left:
+                     *  auto` goes on the first button of the right group,
+                     *  which is the graph one when there is one. */
                     ['button', {class: 'button TREEDB_JSON_BTN',
-                                style: 'margin-left:auto;',
+                                style: graph_href? '' : 'margin-left:auto;',
                                 title: t('raw json'), 'aria-label': t('raw json'),
                                 'data-i18n-title': 'raw json', 'data-i18n-aria-label': 'raw json'}, [
                         ['span', {class: 'icon'}, [yui_toolbar_icon('yi-eye')]],