@yuneta/gobj-ui 7.23.137 → 7.23.139

package/dist/gobj-ui.cjs.js

@@ -21798,7 +21798,7 @@ var attrs_table$6 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "tabs_style", 0, "is-toggle is-fullwidth", "Bulma tab styling"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_cards_landing", 0, false, "Land on a grid of topic cards (list->detail): a card opens its table, with the tabs bar + a back-to-grid button. Off = tabs only (legacy)."),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "readonly", 0, false, "The whole treedb is read-only: every topic opens without its write affordances and the write events are refused. Set it when this yuno is not the MASTER of the treedb's tranger -- only the master can write, and the yuno answers 'READ-ONLY' to a write since SDK 7.13.0 (ask `treedb-info`)"),
-	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "card_action_routes", 0, null, "Per-card hash-route templates {info, table, graph} with a {topic} placeholder (host-supplied, route-agnostic). Present ⇒ cards show 3 icon actions; absent ⇒ a single card that opens the table."),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "card_action_routes", 0, null, "Hash-route templates {info, table, graph} with a {topic} placeholder (host-supplied, route-agnostic). Present ⇒ cards show the info and table icons, and `graph` without its `/{topic}` is the toolbar's graph button (the card has no graph icon: its topic segment is a focus); absent ⇒ a single card that opens the table."),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "landing_routes", 0, null, "Host-supplied hashes for the two landing sub-views {cards, schema}; the toggle navigates to them so the landing is URL-addressable (ROUTING.md). Absent ⇒ toggle flips in-view only (legacy)."),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "base_route", 0, "", "This view's base route (host-supplied); used to declare its sub-routes (topics / info / schema) to the site map (ROUTING.md contributor)."),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "source_url", 0, "", "The backend this view browses (host-supplied, typically the wss url of the connection), shown in the toolbar. A tab label names the TREEDB, and the same treedb name lives on more than one node, so the node has to be readable somewhere -- and a tab is too narrow to carry a url. Empty ⇒ nothing is shown."),
@@ -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",
@@ -22195,13 +22221,103 @@ function card_action_anchor(logical_class, icon, i18n_key, href) {
 	];
 }
 /************************************************************
+*  What a topic card says about its topic, from its desc alone
+*  (no request): its version and how many columns it has, the
+*  topics it hangs FROM (its fkeys) and the ones that hang from
+*  it (its hooks). The names are DATA and are not translated;
+*  each label carries its key. Lists are cut with an ellipsis,
+*  whole in the title.
+************************************************************/
+function topic_card_meta(desc) {
+	if (!(0, _yuneta_gobj_js.is_object)(desc)) return [];
+	let cols = (0, _yuneta_gobj_js.is_array)(desc.cols) ? desc.cols : [];
+	let n_cols = 0;
+	let parents = [];
+	let children = [];
+	for (let col of cols) {
+		if (!col || !col.id || col.id.charAt(0) === "_") continue;
+		n_cols++;
+		if ((0, _yuneta_gobj_js.is_object)(col.fkey)) {
+			for (let t_name of Object.keys(col.fkey)) if (!parents.includes(t_name)) parents.push(t_name);
+		}
+		if ((0, _yuneta_gobj_js.is_object)(col.hook)) {
+			for (let t_name of Object.keys(col.hook)) if (!children.includes(t_name)) children.push(t_name);
+		}
+	}
+	let meta = [];
+	let head = [];
+	if (desc.topic_version !== void 0 && desc.topic_version !== null && desc.topic_version !== "") head.push([
+		"span",
+		{
+			class: "TREEDB_TOPIC_CARD_VERSION",
+			title: (0, i18next.t)("version"),
+			"data-i18n-title": "version"
+		},
+		`v${desc.topic_version}`
+	]);
+	head.push([
+		"span",
+		{ class: "TREEDB_TOPIC_CARD_COLS" },
+		[[
+			"span",
+			{},
+			`${n_cols}`
+		], [
+			"span",
+			{ i18n: "columns" },
+			"columns"
+		]]
+	]);
+	meta.push([
+		"div",
+		{ class: "TREEDB_TOPIC_CARD_META" },
+		head
+	]);
+	let relation = (cls, key, arrow, names) => {
+		let list = names.join(", ");
+		return [
+			"div",
+			{
+				class: `TREEDB_TOPIC_CARD_REL ${cls}`,
+				title: list
+			},
+			[
+				[
+					"span",
+					{
+						class: "TREEDB_TOPIC_CARD_REL_ARROW",
+						"aria-hidden": "true"
+					},
+					arrow
+				],
+				[
+					"span",
+					{
+						class: "TREEDB_TOPIC_CARD_REL_LABEL",
+						i18n: key
+					},
+					key
+				],
+				[
+					"span",
+					{ class: "TREEDB_TOPIC_CARD_REL_LIST" },
+					list
+				]
+			]
+		];
+	};
+	if (parents.length) meta.push(relation("TREEDB_TOPIC_CARD_PARENTS", "parents", "↑", parents));
+	if (children.length) meta.push(relation("TREEDB_TOPIC_CARD_CHILDREN", "children", "↓", children));
+	return meta;
+}
+/************************************************************
 *  Add one topic card to the cards-landing grid (list->detail).
 *  With `card_action_routes` (host-supplied templates) the card
 *  shows three hash-routed icons — info / table / graph. Without,
 *  it falls back to a single card that opens the table (same id
 *  contract as the tab, `<gobj>?<topic>`).
 ************************************************************/
-function add_topic_card(gobj, id, text, icon) {
+function add_topic_card(gobj, id, text, icon, desc) {
 	let $grid = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container").querySelector(".TREEDB_TOPICS_LANDING .yui-nav-cards");
 	if (!$grid) return;
 	let routes = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "card_action_routes");
@@ -22244,25 +22360,28 @@ function add_topic_card(gobj, id, text, icon) {
 	let actions = [];
 	if (routes.info) actions.push(card_action_anchor("TREEDB_CARD_INFO", "yi-circle-info", "info", fill(routes.info)));
 	if (routes.table) actions.push(card_action_anchor("TREEDB_CARD_TABLE", "yi-table", "table", fill(routes.table)));
-	if (routes.graph) actions.push(card_action_anchor("TREEDB_CARD_GRAPH", "yi-hexagon-nodes", "graph", fill(routes.graph)));
 	let $card = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
 			class: "TREEDB_TOPIC_CARD",
 			"data-topic": topic
 		},
-		[[
-			"span",
-			{
-				class: "TREEDB_TOPIC_CARD_NAME",
-				i18n: text
-			},
-			text
-		], [
-			"div",
-			{ class: "TREEDB_TOPIC_CARD_ACTIONS" },
-			actions
-		]]
+		[
+			[
+				"span",
+				{
+					class: "TREEDB_TOPIC_CARD_NAME",
+					i18n: text
+				},
+				text
+			],
+			...topic_card_meta(desc),
+			[
+				"div",
+				{ class: "TREEDB_TOPIC_CARD_ACTIONS" },
+				actions
+			]
+		]
 	]);
 	if (gobj.priv._selected_card_topic === topic) $card.classList.add("is-selected");
 	$card.addEventListener("click", function() {
@@ -22615,7 +22734,7 @@ function process_treedb_descs$1(gobj) {
 		let id = `${(0, _yuneta_gobj_js.gobj_name)(gobj)}?${desc.topic_name}`;
 		let gobj_topic_form = (0, _yuneta_gobj_js.gobj_create_service)(id, "C_YUI_TREEDB_TOPIC_WITH_FORM", kw_topic_form, gobj);
 		add_tab(gobj, gobj_topic_form, id, key, "yi-table");
-		add_topic_card(gobj, id, key, "yi-table");
+		add_topic_card(gobj, id, key, "yi-table", desc);
 		(0, _yuneta_gobj_js.gobj_start)(gobj_topic_form);
 	}
 	let href = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "last_selection");

package/dist/gobj-ui.es.js

@@ -21793,7 +21793,7 @@ var attrs_table$6 = [
 	SDATA(data_type_t.DTP_STRING, "tabs_style", 0, "is-toggle is-fullwidth", "Bulma tab styling"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_cards_landing", 0, false, "Land on a grid of topic cards (list->detail): a card opens its table, with the tabs bar + a back-to-grid button. Off = tabs only (legacy)."),
 	SDATA(data_type_t.DTP_BOOLEAN, "readonly", 0, false, "The whole treedb is read-only: every topic opens without its write affordances and the write events are refused. Set it when this yuno is not the MASTER of the treedb's tranger -- only the master can write, and the yuno answers 'READ-ONLY' to a write since SDK 7.13.0 (ask `treedb-info`)"),
-	SDATA(data_type_t.DTP_JSON, "card_action_routes", 0, null, "Per-card hash-route templates {info, table, graph} with a {topic} placeholder (host-supplied, route-agnostic). Present ⇒ cards show 3 icon actions; absent ⇒ a single card that opens the table."),
+	SDATA(data_type_t.DTP_JSON, "card_action_routes", 0, null, "Hash-route templates {info, table, graph} with a {topic} placeholder (host-supplied, route-agnostic). Present ⇒ cards show the info and table icons, and `graph` without its `/{topic}` is the toolbar's graph button (the card has no graph icon: its topic segment is a focus); absent ⇒ a single card that opens the table."),
 	SDATA(data_type_t.DTP_JSON, "landing_routes", 0, null, "Host-supplied hashes for the two landing sub-views {cards, schema}; the toggle navigates to them so the landing is URL-addressable (ROUTING.md). Absent ⇒ toggle flips in-view only (legacy)."),
 	SDATA(data_type_t.DTP_STRING, "base_route", 0, "", "This view's base route (host-supplied); used to declare its sub-routes (topics / info / schema) to the site map (ROUTING.md contributor)."),
 	SDATA(data_type_t.DTP_STRING, "source_url", 0, "", "The backend this view browses (host-supplied, typically the wss url of the connection), shown in the toolbar. A tab label names the TREEDB, and the same treedb name lives on more than one node, so the node has to be readable somewhere -- and a tab is too narrow to carry a url. Empty ⇒ nothing is shown."),
@@ -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",
@@ -22190,13 +22216,103 @@ function card_action_anchor(logical_class, icon, i18n_key, href) {
 	];
 }
 /************************************************************
+*  What a topic card says about its topic, from its desc alone
+*  (no request): its version and how many columns it has, the
+*  topics it hangs FROM (its fkeys) and the ones that hang from
+*  it (its hooks). The names are DATA and are not translated;
+*  each label carries its key. Lists are cut with an ellipsis,
+*  whole in the title.
+************************************************************/
+function topic_card_meta(desc) {
+	if (!is_object(desc)) return [];
+	let cols = is_array(desc.cols) ? desc.cols : [];
+	let n_cols = 0;
+	let parents = [];
+	let children = [];
+	for (let col of cols) {
+		if (!col || !col.id || col.id.charAt(0) === "_") continue;
+		n_cols++;
+		if (is_object(col.fkey)) {
+			for (let t_name of Object.keys(col.fkey)) if (!parents.includes(t_name)) parents.push(t_name);
+		}
+		if (is_object(col.hook)) {
+			for (let t_name of Object.keys(col.hook)) if (!children.includes(t_name)) children.push(t_name);
+		}
+	}
+	let meta = [];
+	let head = [];
+	if (desc.topic_version !== void 0 && desc.topic_version !== null && desc.topic_version !== "") head.push([
+		"span",
+		{
+			class: "TREEDB_TOPIC_CARD_VERSION",
+			title: t("version"),
+			"data-i18n-title": "version"
+		},
+		`v${desc.topic_version}`
+	]);
+	head.push([
+		"span",
+		{ class: "TREEDB_TOPIC_CARD_COLS" },
+		[[
+			"span",
+			{},
+			`${n_cols}`
+		], [
+			"span",
+			{ i18n: "columns" },
+			"columns"
+		]]
+	]);
+	meta.push([
+		"div",
+		{ class: "TREEDB_TOPIC_CARD_META" },
+		head
+	]);
+	let relation = (cls, key, arrow, names) => {
+		let list = names.join(", ");
+		return [
+			"div",
+			{
+				class: `TREEDB_TOPIC_CARD_REL ${cls}`,
+				title: list
+			},
+			[
+				[
+					"span",
+					{
+						class: "TREEDB_TOPIC_CARD_REL_ARROW",
+						"aria-hidden": "true"
+					},
+					arrow
+				],
+				[
+					"span",
+					{
+						class: "TREEDB_TOPIC_CARD_REL_LABEL",
+						i18n: key
+					},
+					key
+				],
+				[
+					"span",
+					{ class: "TREEDB_TOPIC_CARD_REL_LIST" },
+					list
+				]
+			]
+		];
+	};
+	if (parents.length) meta.push(relation("TREEDB_TOPIC_CARD_PARENTS", "parents", "↑", parents));
+	if (children.length) meta.push(relation("TREEDB_TOPIC_CARD_CHILDREN", "children", "↓", children));
+	return meta;
+}
+/************************************************************
 *  Add one topic card to the cards-landing grid (list->detail).
 *  With `card_action_routes` (host-supplied templates) the card
 *  shows three hash-routed icons — info / table / graph. Without,
 *  it falls back to a single card that opens the table (same id
 *  contract as the tab, `<gobj>?<topic>`).
 ************************************************************/
-function add_topic_card(gobj, id, text, icon) {
+function add_topic_card(gobj, id, text, icon, desc) {
 	let $grid = gobj_read_attr(gobj, "$container").querySelector(".TREEDB_TOPICS_LANDING .yui-nav-cards");
 	if (!$grid) return;
 	let routes = gobj_read_attr(gobj, "card_action_routes");
@@ -22239,25 +22355,28 @@ function add_topic_card(gobj, id, text, icon) {
 	let actions = [];
 	if (routes.info) actions.push(card_action_anchor("TREEDB_CARD_INFO", "yi-circle-info", "info", fill(routes.info)));
 	if (routes.table) actions.push(card_action_anchor("TREEDB_CARD_TABLE", "yi-table", "table", fill(routes.table)));
-	if (routes.graph) actions.push(card_action_anchor("TREEDB_CARD_GRAPH", "yi-hexagon-nodes", "graph", fill(routes.graph)));
 	let $card = createElement2([
 		"div",
 		{
 			class: "TREEDB_TOPIC_CARD",
 			"data-topic": topic
 		},
-		[[
-			"span",
-			{
-				class: "TREEDB_TOPIC_CARD_NAME",
-				i18n: text
-			},
-			text
-		], [
-			"div",
-			{ class: "TREEDB_TOPIC_CARD_ACTIONS" },
-			actions
-		]]
+		[
+			[
+				"span",
+				{
+					class: "TREEDB_TOPIC_CARD_NAME",
+					i18n: text
+				},
+				text
+			],
+			...topic_card_meta(desc),
+			[
+				"div",
+				{ class: "TREEDB_TOPIC_CARD_ACTIONS" },
+				actions
+			]
+		]
 	]);
 	if (gobj.priv._selected_card_topic === topic) $card.classList.add("is-selected");
 	$card.addEventListener("click", function() {
@@ -22610,7 +22729,7 @@ function process_treedb_descs$1(gobj) {
 		let id = `${gobj_name(gobj)}?${desc.topic_name}`;
 		let gobj_topic_form = gobj_create_service(id, "C_YUI_TREEDB_TOPIC_WITH_FORM", kw_topic_form, gobj);
 		add_tab(gobj, gobj_topic_form, id, key, "yi-table");
-		add_topic_card(gobj, id, key, "yi-table");
+		add_topic_card(gobj, id, key, "yi-table", desc);
 		gobj_start(gobj_topic_form);
 	}
 	let href = gobj_read_str_attr(gobj, "last_selection");

package/package.json

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

package/src/c_yui_treedb_topics.css

@@ -36,6 +36,31 @@
     line-height: 1.2;
     word-break: break-word;
 }
+/*  What the card says about its topic: version + columns, then the
+ *  topics it hangs from and the ones hanging from it. Muted and small,
+ *  under the name; a long list is cut, whole in the title. The spans
+ *  are spaced by `gap` because createElement2 trims text nodes.  */
+.TREEDB_TOPIC_CARD_META,
+.TREEDB_TOPIC_CARD_REL {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 0.3rem;
+    max-width: 100%;
+    font-size: 0.75rem;
+    color: var(--bulma-text-weak, #7a7a7a);
+    white-space: nowrap;
+}
+.TREEDB_TOPIC_CARD_COLS {
+    display: inline-flex;
+    gap: 0.25rem;
+}
+.TREEDB_TOPIC_CARD_REL_LIST {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--bulma-text, inherit);
+}
 .TREEDB_TOPIC_CARD_ACTIONS {
     display: flex;
     justify-content: center;

package/src/c_yui_treedb_topics.js

@@ -84,7 +84,7 @@ SDATA(data_type_t.DTP_BOOLEAN,  "system",           0,  false,  "Manage system t
 SDATA(data_type_t.DTP_STRING,   "tabs_style",       0,  "is-toggle is-fullwidth", "Bulma tab styling"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_cards_landing",0, false,  "Land on a grid of topic cards (list->detail): a card opens its table, with the tabs bar + a back-to-grid button. Off = tabs only (legacy)."),
 SDATA(data_type_t.DTP_BOOLEAN,  "readonly",         0,  false,  "The whole treedb is read-only: every topic opens without its write affordances and the write events are refused. Set it when this yuno is not the MASTER of the treedb's tranger -- only the master can write, and the yuno answers 'READ-ONLY' to a write since SDK 7.13.0 (ask `treedb-info`)"),
-SDATA(data_type_t.DTP_JSON,     "card_action_routes",0, null,   "Per-card hash-route templates {info, table, graph} with a {topic} placeholder (host-supplied, route-agnostic). Present ⇒ cards show 3 icon actions; absent ⇒ a single card that opens the table."),
+SDATA(data_type_t.DTP_JSON,     "card_action_routes",0, null,   "Hash-route templates {info, table, graph} with a {topic} placeholder (host-supplied, route-agnostic). Present ⇒ cards show the info and table icons, and `graph` without its `/{topic}` is the toolbar's graph button (the card has no graph icon: its topic segment is a focus); absent ⇒ a single card that opens the table."),
 SDATA(data_type_t.DTP_JSON,     "landing_routes",   0,  null,   "Host-supplied hashes for the two landing sub-views {cards, schema}; the toggle navigates to them so the landing is URL-addressable (ROUTING.md). Absent ⇒ toggle flips in-view only (legacy)."),
 SDATA(data_type_t.DTP_STRING,   "base_route",       0,  "",     "This view's base route (host-supplied); used to declare its sub-routes (topics / info / schema) to the site map (ROUTING.md contributor)."),
 SDATA(data_type_t.DTP_STRING,   "source_url",       0,  "",     "The backend this view browses (host-supplied, typically the wss url of the connection), shown in the toolbar. A tab label names the TREEDB, and the same treedb name lives on more than one node, so the node has to be readable somewhere -- and a tab is too narrow to carry a url. Empty ⇒ nothing is shown."),
@@ -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')]],
@@ -570,6 +599,74 @@ function card_action_anchor(logical_class, icon, i18n_key, href)
     ]];
 }
 
+/************************************************************
+ *  What a topic card says about its topic, from its desc alone
+ *  (no request): its version and how many columns it has, the
+ *  topics it hangs FROM (its fkeys) and the ones that hang from
+ *  it (its hooks). The names are DATA and are not translated;
+ *  each label carries its key. Lists are cut with an ellipsis,
+ *  whole in the title.
+ ************************************************************/
+function topic_card_meta(desc)
+{
+    if(!is_object(desc)) {
+        return [];
+    }
+    let cols = is_array(desc.cols)? desc.cols : [];
+    let n_cols = 0;
+    let parents = [];
+    let children = [];
+    for(let col of cols) {
+        if(!col || !col.id || col.id.charAt(0) === "_") {
+            continue;
+        }
+        n_cols++;
+        if(is_object(col.fkey)) {
+            for(let t_name of Object.keys(col.fkey)) {
+                if(!parents.includes(t_name)) {
+                    parents.push(t_name);
+                }
+            }
+        }
+        if(is_object(col.hook)) {
+            for(let t_name of Object.keys(col.hook)) {
+                if(!children.includes(t_name)) {
+                    children.push(t_name);
+                }
+            }
+        }
+    }
+
+    let meta = [];
+    let head = [];
+    if(desc.topic_version !== undefined && desc.topic_version !== null && desc.topic_version !== "") {
+        head.push(['span', {class: 'TREEDB_TOPIC_CARD_VERSION',
+                            title: t('version'), 'data-i18n-title': 'version'},
+                   `v${desc.topic_version}`]);
+    }
+    head.push(['span', {class: 'TREEDB_TOPIC_CARD_COLS'}, [
+        ['span', {}, `${n_cols}`],
+        ['span', {i18n: 'columns'}, 'columns']
+    ]]);
+    meta.push(['div', {class: 'TREEDB_TOPIC_CARD_META'}, head]);
+
+    let relation = (cls, key, arrow, names) => {
+        let list = names.join(", ");
+        return ['div', {class: `TREEDB_TOPIC_CARD_REL ${cls}`, title: list}, [
+            ['span', {class: 'TREEDB_TOPIC_CARD_REL_ARROW', 'aria-hidden': 'true'}, arrow],
+            ['span', {class: 'TREEDB_TOPIC_CARD_REL_LABEL', i18n: key}, key],
+            ['span', {class: 'TREEDB_TOPIC_CARD_REL_LIST'}, list]
+        ]];
+    };
+    if(parents.length) {
+        meta.push(relation('TREEDB_TOPIC_CARD_PARENTS', 'parents', '↑', parents));
+    }
+    if(children.length) {
+        meta.push(relation('TREEDB_TOPIC_CARD_CHILDREN', 'children', '↓', children));
+    }
+    return meta;
+}
+
 /************************************************************
  *  Add one topic card to the cards-landing grid (list->detail).
  *  With `card_action_routes` (host-supplied templates) the card
@@ -577,7 +674,7 @@ function card_action_anchor(logical_class, icon, i18n_key, href)
  *  it falls back to a single card that opens the table (same id
  *  contract as the tab, `<gobj>?<topic>`).
  ************************************************************/
-function add_topic_card(gobj, id, text, icon)
+function add_topic_card(gobj, id, text, icon, desc)
 {
     let $container = gobj_read_attr(gobj, "$container");
     let $grid = $container.querySelector(".TREEDB_TOPICS_LANDING .yui-nav-cards");
@@ -606,9 +703,16 @@ function add_topic_card(gobj, id, text, icon)
         return;
     }
 
-    /*  Three-icon card: info / table / graph, all real hash anchors.
-     *  {topic} in each template is the raw topic name (identifier-safe,
-     *  matching the tab/host `<base_route>/<topic>` convention). */
+    /*  Two-icon card: info / table, real hash anchors. {topic} in each
+     *  template is the raw topic name (identifier-safe, matching the
+     *  tab/host `<base_route>/<topic>` convention).
+     *
+     *  NO graph icon any more. Its route was `<graph>/<topic>`, and that
+     *  segment is a FOCUS: every way into the graph from a card arrived
+     *  with that topic highlighted, over whatever the reader had left
+     *  there. The graph is one button in the toolbar now, with no topic
+     *  (routes.graph still feeds it), and the room goes to what the card
+     *  can say about its topic. */
     let topic = id.indexOf("?") >= 0 ? id.split("?")[1] : id;
     let fill = (tpl) => String(tpl || "").replace("{topic}", topic);
 
@@ -621,14 +725,11 @@ function add_topic_card(gobj, id, text, icon)
         actions.push(card_action_anchor(
             "TREEDB_CARD_TABLE", "yi-table", "table", fill(routes.table)));
     }
-    if(routes.graph) {
-        actions.push(card_action_anchor(
-            "TREEDB_CARD_GRAPH", "yi-hexagon-nodes", "graph", fill(routes.graph)));
-    }
 
     let $card = createElement2(
         ['div', {class: 'TREEDB_TOPIC_CARD', 'data-topic': topic}, [
             ['span', {class: 'TREEDB_TOPIC_CARD_NAME', i18n: text}, text],
+            ...topic_card_meta(desc),
             ['div', {class: 'TREEDB_TOPIC_CARD_ACTIONS'}, actions]
         ]]
     );
@@ -1058,7 +1159,7 @@ function process_treedb_descs(gobj)
 
         // TODO get icon from remote config
         add_tab(gobj, gobj_topic_form, id, key, "yi-table");
-        add_topic_card(gobj, id, key, "yi-table");
+        add_topic_card(gobj, id, key, "yi-table", desc);
 
         gobj_start(gobj_topic_form);
     }