@yuneta/gobj-ui 7.1.0 → 7.2.1

package/README.md

@@ -561,6 +561,31 @@ Two implementation notes worth keeping:
   still arrive from a keyboard path or a form that outlived the flag, and an
   ignored write is exactly the behaviour this whole change exists to stop.
 
+### Finding a node in the graph
+
+`C_YUI_TREEDB_GRAPH` carries a find box in the middle of its toolbar. It
+matches the term against the node's **label**, its id and its topic name, puts
+every match in the same amber `active` state the topic focus uses, and centres
+the viewport on them.
+
+Two details that are not decoration:
+
+- it matches the **label**, not only the id. On a topic keyed by `rowid`,
+  `uuid` or `qualified` the id is a counter or a path and the name a human
+  knows the record by lives in a secondary key — the same reason `node_label()`
+  exists.
+- it **says how many** it found. A graph that did not move looks identical
+  whether nothing matched or the only match was already on screen, so the count
+  is shown next to the box (hidden while the box is empty; a typed term that
+  matches nothing shows `0`, which is an answer).
+
+The find and the topic focus **share the highlight**: starting one clears the
+other. Two amber sets at once would say nothing about either.
+
+Wiring: the box sends `EV_FIND_NODES {text}` to the view, which forwards it to
+`C_G6_NODES_TREE`; the graph answers `EV_FIND_RESULT {term, matches}`, which the
+view declares like every other event its child publishes.
+
 ### C_YUI_TREEDB_SCHEMA — the treedb drawn the way its `.c` draws it
 
 A landing view that draws a treedb the way its schema literal draws it in ASCII

package/dist/gobj-ui.cjs.js

@@ -18772,101 +18772,140 @@ function make_toolbar(gobj) {
 	gobj.priv;
 	let modes = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "operation_modes");
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "readonly")) modes = modes.filter((mode) => mode !== "edition");
+	let left_items = [
+		[
+			"span",
+			{
+				class: "GRAPH_LAYOUT_LABEL is-hidden-mobile",
+				style: "padding-right:5px;",
+				i18n: "layout"
+			},
+			"layout"
+		],
+		[
+			"div",
+			{ class: "select" },
+			[["select", { class: "GRAPH_LAYOUT_SELECT" }]],
+			{ change: (evt) => {
+				evt.stopPropagation();
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_LAYOUT", { layout: evt.target.value }, gobj);
+			} }
+		],
+		[
+			"span",
+			{
+				class: "GRAPH_MODE_LABEL is-hidden-mobile",
+				style: "padding-left:10px; padding-right:5px;",
+				i18n: "operation mode"
+			},
+			"operation mode"
+		],
+		[
+			"div",
+			{ class: "select" },
+			[[
+				"select",
+				{ class: "GRAPH_MODE_SELECT" },
+				modes.map((item) => [
+					"option",
+					{},
+					item
+				])
+			]],
+			{ change: (evt) => {
+				evt.stopPropagation();
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_OPERATION_MODE", { operation_mode: evt.target.value }, gobj);
+			} }
+		],
+		[
+			"button",
+			{ class: "GRAPH_REFRESH button" },
+			[["i", { class: "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);
+			} }
+		],
+		[
+			"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"
+			},
+			[["i", { class: "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);
+			} }
+		]
+	];
+	let center_items = [[
+		"div",
+		{
+			class: "GRAPH_FIND control has-icons-left",
+			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
+		},
+		[["input", {
+			class: "GRAPH_FIND_INPUT input",
+			type: "text",
+			placeholder: (0, i18next.t)("search"),
+			"data-i18n-placeholder": "search",
+			"aria-label": (0, i18next.t)("search"),
+			"data-i18n-aria-label": "search"
+		}], [
+			"span",
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
+		]],
+		{ input: (evt) => {
+			evt.stopPropagation();
+			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text: evt.target.value.trim() }, gobj);
+		} }
+	], [
+		"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" },
+			""
+		], [
+			"span",
+			{ i18n: "matches" },
+			"matches"
+		]]
+	]];
 	const $toolbar_header = yui_toolbar({}, [
 		[
 			"div",
 			{ class: "yui-horizontal-toolbar-section left" },
-			[
-				[
-					"span",
-					{
-						class: "GRAPH_LAYOUT_LABEL is-hidden-mobile",
-						style: "padding-right:5px;",
-						i18n: "layout"
-					},
-					"layout"
-				],
-				[
-					"div",
-					{ class: "select" },
-					[["select", { class: "GRAPH_LAYOUT_SELECT" }]],
-					{ change: (evt) => {
-						evt.stopPropagation();
-						(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_LAYOUT", { layout: evt.target.value }, gobj);
-					} }
-				],
-				[
-					"span",
-					{
-						class: "GRAPH_MODE_LABEL is-hidden-mobile",
-						style: "padding-left:10px; padding-right:5px;",
-						i18n: "operation mode"
-					},
-					"operation mode"
-				],
-				[
-					"div",
-					{ class: "select" },
-					[[
-						"select",
-						{ class: "GRAPH_MODE_SELECT" },
-						modes.map((item) => [
-							"option",
-							{},
-							item
-						])
-					]],
-					{ change: (evt) => {
-						evt.stopPropagation();
-						(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_OPERATION_MODE", { operation_mode: evt.target.value }, gobj);
-					} }
-				],
-				[
-					"button",
-					{ class: "GRAPH_REFRESH button" },
-					[["i", { class: "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);
-					} }
-				],
-				[
-					"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"
-					},
-					[["i", { class: "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);
-					} }
-				]
-			]
+			left_items
 		],
 		[
 			"div",
 			{ class: "yui-horizontal-toolbar-section center" },
-			[]
+			center_items
 		],
 		[
 			"div",
@@ -19798,6 +19837,33 @@ function ac_set_operation_mode$1(gobj, event, kw, src) {
 *  tree, which centres + highlights that topic's nodes (deferring
 *  until its data is loaded).
 ************************************************************/
+/************************************************************
+*  Forward the find down to the graph child.
+************************************************************/
+function ac_find_nodes$1(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.gobj_nodes_tree) (0, _yuneta_gobj_js.gobj_send_event)(priv.gobj_nodes_tree, "EV_FIND_NODES", { text: kw && kw.text || "" }, gobj);
+	return 0;
+}
+/************************************************************
+*  How many nodes the term matched, from the graph child. Zero with a
+*  term typed is an ANSWER and is shown; an empty box shows nothing.
+************************************************************/
+function ac_find_result(gobj, event, kw, src) {
+	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
+	if (!$container) return 0;
+	let $result = $container.querySelector(".GRAPH_FIND_RESULT");
+	let $count = $container.querySelector(".GRAPH_FIND_COUNT");
+	if (!$result || !$count) return 0;
+	if (!(kw && kw.term || "")) {
+		$result.classList.add("is-hidden");
+		$count.textContent = "";
+		return 0;
+	}
+	$count.textContent = String(kw && kw.matches || 0);
+	$result.classList.remove("is-hidden");
+	return 0;
+}
 function ac_set_focus_topic(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	if (priv.gobj_nodes_tree) (0, _yuneta_gobj_js.gobj_send_event)(priv.gobj_nodes_tree, "EV_FOCUS_TOPIC", { topic: kw && kw.topic }, gobj);
@@ -19963,6 +20029,16 @@ function create_gclass$4(gclass_name) {
 			ac_set_focus_topic,
 			null
 		],
+		[
+			"EV_FIND_NODES",
+			ac_find_nodes$1,
+			null
+		],
+		[
+			"EV_FIND_RESULT",
+			ac_find_result,
+			null
+		],
 		[
 			"EV_SHOW",
 			ac_show$3,
@@ -20004,6 +20080,8 @@ function create_gclass$4(gclass_name) {
 		["EV_SET_LAYOUT", 0],
 		["EV_SET_OPERATION_MODE", 0],
 		["EV_SET_FOCUS_TOPIC", 0],
+		["EV_FIND_NODES", 0],
+		["EV_FIND_RESULT", 0],
 		["EV_OPERATION_MODE_CHANGED", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_RECORD_WRITTEN", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_SHOW", 0],
@@ -52669,7 +52747,8 @@ var PRIVATE_DATA$1 = {
 	_link_saved_styles: [],
 	_focus_topic: null,
 	_focus_ids: [],
-	_pending_focus_topic: null
+	_pending_focus_topic: null,
+	_pending_find: null
 };
 var __gclass__$1 = null;
 /******************************
@@ -53843,6 +53922,67 @@ function graph_focus_topic(gobj, topic) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: focus topic apply failed: ${e}`);
 	}
 }
+/************************************************************
+*  Find the nodes whose name, id or topic contains `term`, highlight
+*  them with the same amber 'active' state the topic focus uses, and
+*  centre the viewport on them. Returns how many matched, which is the
+*  half the toolbar needs: a search that finds nothing must SAY so,
+*  because a graph that did not move is also what a graph looks like
+*  when the match is off-screen.
+*
+*  It shares the highlight slot with graph_focus_topic on purpose —
+*  two amber sets at once would say nothing about either. An empty
+*  term clears it. Matching reads the node's LABEL and not only its
+*  id: on a topic keyed by rowid or by a qualified path, the id is a
+*  counter and the name a human knows is elsewhere (see node_label).
+************************************************************/
+function graph_find_nodes(gobj, term) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	if (!graph || !priv.graph_rendered) {
+		priv._pending_find = term;
+		return 0;
+	}
+	let data = {};
+	try {
+		data = graph.getData() || {};
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: graph.getData() failed: ${e}`);
+		return 0;
+	}
+	let nodes = (0, _yuneta_gobj_js.is_array)(data.nodes) ? data.nodes : [];
+	let states = {};
+	for (let id of priv._focus_ids || []) states[id] = [];
+	let ids = [];
+	if (!(0, _yuneta_gobj_js.empty_string)(term)) {
+		let needle = String(term).toLowerCase();
+		for (let n of nodes) {
+			if (!n || !n.data) continue;
+			let record = n.data.record || {};
+			let label = "";
+			try {
+				label = node_label(n.data.desc || {}, record) || "";
+			} catch (e) {
+				label = "";
+			}
+			if ([
+				label,
+				record.id,
+				n.data.topic_name
+			].filter((v) => typeof v === "string").join(" ").toLowerCase().includes(needle)) ids.push(n.id);
+		}
+		for (let id of ids) states[id] = ["active"];
+	}
+	priv._focus_ids = ids;
+	priv._focus_topic = null;
+	try {
+		if (typeof graph.setElementState === "function") graph.setElementState(states);
+		if (ids.length && typeof graph.focusElement === "function") graph.focusElement(ids);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: find apply failed: ${e}`);
+	}
+	return ids.length;
+}
 async function graph_zoom_in(gobj) {
 	let graph = gobj.priv.graph;
 	const z = graph.getZoom();
@@ -56137,6 +56277,11 @@ function ac_load_data(gobj, event, kw, src) {
 					priv._pending_focus_topic = null;
 					graph_focus_topic(gobj, ft);
 				}
+				if (priv._pending_find !== null) {
+					let term = priv._pending_find;
+					priv._pending_find = null;
+					publish_find_result(gobj, term, graph_find_nodes(gobj, term));
+				}
 			});
 		});
 	});
@@ -56353,6 +56498,25 @@ function ac_focus_topic(gobj, event, kw, src) {
 	graph_focus_topic(gobj, kw && kw.topic);
 	return 0;
 }
+/************************************************************
+*  Tell whoever asked how many nodes the term matched. The count is
+*  the answer to the question the box asks; without it "nothing moved"
+*  and "nothing matched" look the same.
+************************************************************/
+function publish_find_result(gobj, term, matches) {
+	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_FIND_RESULT", {
+		term,
+		matches
+	});
+}
+/************************************************************
+*
+************************************************************/
+function ac_find_nodes(gobj, event, kw, src) {
+	let term = kw && kw.text || "";
+	publish_find_result(gobj, term, graph_find_nodes(gobj, term));
+	return 0;
+}
 function ac_center(gobj, event, kw, src) {
 	graph_center(gobj);
 	return 0;
@@ -56654,6 +56818,11 @@ function create_gclass$1(gclass_name) {
 			ac_focus_topic,
 			null
 		],
+		[
+			"EV_FIND_NODES",
+			ac_find_nodes,
+			null
+		],
 		[
 			"EV_CENTER",
 			ac_center,
@@ -56737,6 +56906,8 @@ function create_gclass$1(gclass_name) {
 		["EV_ZOOM_RESET", 0],
 		["EV_AUTO_FIT", 0],
 		["EV_FOCUS_TOPIC", 0],
+		["EV_FIND_NODES", 0],
+		["EV_FIND_RESULT", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_CENTER", 0],
 		["EV_FULLSCREEN", 0],
 		["EV_SET_LAYOUT", 0],

package/dist/gobj-ui.es.js

@@ -18759,101 +18759,140 @@ function make_toolbar(gobj) {
 	gobj.priv;
 	let modes = gobj_read_attr(gobj, "operation_modes");
 	if (gobj_read_bool_attr(gobj, "readonly")) modes = modes.filter((mode) => mode !== "edition");
+	let left_items = [
+		[
+			"span",
+			{
+				class: "GRAPH_LAYOUT_LABEL is-hidden-mobile",
+				style: "padding-right:5px;",
+				i18n: "layout"
+			},
+			"layout"
+		],
+		[
+			"div",
+			{ class: "select" },
+			[["select", { class: "GRAPH_LAYOUT_SELECT" }]],
+			{ change: (evt) => {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_SET_LAYOUT", { layout: evt.target.value }, gobj);
+			} }
+		],
+		[
+			"span",
+			{
+				class: "GRAPH_MODE_LABEL is-hidden-mobile",
+				style: "padding-left:10px; padding-right:5px;",
+				i18n: "operation mode"
+			},
+			"operation mode"
+		],
+		[
+			"div",
+			{ class: "select" },
+			[[
+				"select",
+				{ class: "GRAPH_MODE_SELECT" },
+				modes.map((item) => [
+					"option",
+					{},
+					item
+				])
+			]],
+			{ change: (evt) => {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_SET_OPERATION_MODE", { operation_mode: evt.target.value }, gobj);
+			} }
+		],
+		[
+			"button",
+			{ class: "GRAPH_REFRESH button" },
+			[["i", { class: "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);
+			} }
+		],
+		[
+			"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"
+			},
+			[["i", { class: "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);
+			} }
+		]
+	];
+	let center_items = [[
+		"div",
+		{
+			class: "GRAPH_FIND control has-icons-left",
+			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
+		},
+		[["input", {
+			class: "GRAPH_FIND_INPUT input",
+			type: "text",
+			placeholder: t("search"),
+			"data-i18n-placeholder": "search",
+			"aria-label": t("search"),
+			"data-i18n-aria-label": "search"
+		}], [
+			"span",
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
+		]],
+		{ input: (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, "EV_FIND_NODES", { text: evt.target.value.trim() }, gobj);
+		} }
+	], [
+		"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" },
+			""
+		], [
+			"span",
+			{ i18n: "matches" },
+			"matches"
+		]]
+	]];
 	const $toolbar_header = yui_toolbar({}, [
 		[
 			"div",
 			{ class: "yui-horizontal-toolbar-section left" },
-			[
-				[
-					"span",
-					{
-						class: "GRAPH_LAYOUT_LABEL is-hidden-mobile",
-						style: "padding-right:5px;",
-						i18n: "layout"
-					},
-					"layout"
-				],
-				[
-					"div",
-					{ class: "select" },
-					[["select", { class: "GRAPH_LAYOUT_SELECT" }]],
-					{ change: (evt) => {
-						evt.stopPropagation();
-						gobj_send_event(gobj, "EV_SET_LAYOUT", { layout: evt.target.value }, gobj);
-					} }
-				],
-				[
-					"span",
-					{
-						class: "GRAPH_MODE_LABEL is-hidden-mobile",
-						style: "padding-left:10px; padding-right:5px;",
-						i18n: "operation mode"
-					},
-					"operation mode"
-				],
-				[
-					"div",
-					{ class: "select" },
-					[[
-						"select",
-						{ class: "GRAPH_MODE_SELECT" },
-						modes.map((item) => [
-							"option",
-							{},
-							item
-						])
-					]],
-					{ change: (evt) => {
-						evt.stopPropagation();
-						gobj_send_event(gobj, "EV_SET_OPERATION_MODE", { operation_mode: evt.target.value }, gobj);
-					} }
-				],
-				[
-					"button",
-					{ class: "GRAPH_REFRESH button" },
-					[["i", { class: "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);
-					} }
-				],
-				[
-					"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"
-					},
-					[["i", { class: "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);
-					} }
-				]
-			]
+			left_items
 		],
 		[
 			"div",
 			{ class: "yui-horizontal-toolbar-section center" },
-			[]
+			center_items
 		],
 		[
 			"div",
@@ -19785,6 +19824,33 @@ function ac_set_operation_mode$1(gobj, event, kw, src) {
 *  tree, which centres + highlights that topic's nodes (deferring
 *  until its data is loaded).
 ************************************************************/
+/************************************************************
+*  Forward the find down to the graph child.
+************************************************************/
+function ac_find_nodes$1(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.gobj_nodes_tree) gobj_send_event(priv.gobj_nodes_tree, "EV_FIND_NODES", { text: kw && kw.text || "" }, gobj);
+	return 0;
+}
+/************************************************************
+*  How many nodes the term matched, from the graph child. Zero with a
+*  term typed is an ANSWER and is shown; an empty box shows nothing.
+************************************************************/
+function ac_find_result(gobj, event, kw, src) {
+	let $container = gobj_read_attr(gobj, "$container");
+	if (!$container) return 0;
+	let $result = $container.querySelector(".GRAPH_FIND_RESULT");
+	let $count = $container.querySelector(".GRAPH_FIND_COUNT");
+	if (!$result || !$count) return 0;
+	if (!(kw && kw.term || "")) {
+		$result.classList.add("is-hidden");
+		$count.textContent = "";
+		return 0;
+	}
+	$count.textContent = String(kw && kw.matches || 0);
+	$result.classList.remove("is-hidden");
+	return 0;
+}
 function ac_set_focus_topic(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	if (priv.gobj_nodes_tree) gobj_send_event(priv.gobj_nodes_tree, "EV_FOCUS_TOPIC", { topic: kw && kw.topic }, gobj);
@@ -19950,6 +20016,16 @@ function create_gclass$4(gclass_name) {
 			ac_set_focus_topic,
 			null
 		],
+		[
+			"EV_FIND_NODES",
+			ac_find_nodes$1,
+			null
+		],
+		[
+			"EV_FIND_RESULT",
+			ac_find_result,
+			null
+		],
 		[
 			"EV_SHOW",
 			ac_show$3,
@@ -19991,6 +20067,8 @@ function create_gclass$4(gclass_name) {
 		["EV_SET_LAYOUT", 0],
 		["EV_SET_OPERATION_MODE", 0],
 		["EV_SET_FOCUS_TOPIC", 0],
+		["EV_FIND_NODES", 0],
+		["EV_FIND_RESULT", 0],
 		["EV_OPERATION_MODE_CHANGED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_RECORD_WRITTEN", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_SHOW", 0],
@@ -52656,7 +52734,8 @@ var PRIVATE_DATA$1 = {
 	_link_saved_styles: [],
 	_focus_topic: null,
 	_focus_ids: [],
-	_pending_focus_topic: null
+	_pending_focus_topic: null,
+	_pending_find: null
 };
 var __gclass__$1 = null;
 /******************************
@@ -53830,6 +53909,67 @@ function graph_focus_topic(gobj, topic) {
 		log_error(`${gobj_short_name(gobj)}: focus topic apply failed: ${e}`);
 	}
 }
+/************************************************************
+*  Find the nodes whose name, id or topic contains `term`, highlight
+*  them with the same amber 'active' state the topic focus uses, and
+*  centre the viewport on them. Returns how many matched, which is the
+*  half the toolbar needs: a search that finds nothing must SAY so,
+*  because a graph that did not move is also what a graph looks like
+*  when the match is off-screen.
+*
+*  It shares the highlight slot with graph_focus_topic on purpose —
+*  two amber sets at once would say nothing about either. An empty
+*  term clears it. Matching reads the node's LABEL and not only its
+*  id: on a topic keyed by rowid or by a qualified path, the id is a
+*  counter and the name a human knows is elsewhere (see node_label).
+************************************************************/
+function graph_find_nodes(gobj, term) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	if (!graph || !priv.graph_rendered) {
+		priv._pending_find = term;
+		return 0;
+	}
+	let data = {};
+	try {
+		data = graph.getData() || {};
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: graph.getData() failed: ${e}`);
+		return 0;
+	}
+	let nodes = is_array(data.nodes) ? data.nodes : [];
+	let states = {};
+	for (let id of priv._focus_ids || []) states[id] = [];
+	let ids = [];
+	if (!empty_string(term)) {
+		let needle = String(term).toLowerCase();
+		for (let n of nodes) {
+			if (!n || !n.data) continue;
+			let record = n.data.record || {};
+			let label = "";
+			try {
+				label = node_label(n.data.desc || {}, record) || "";
+			} catch (e) {
+				label = "";
+			}
+			if ([
+				label,
+				record.id,
+				n.data.topic_name
+			].filter((v) => typeof v === "string").join(" ").toLowerCase().includes(needle)) ids.push(n.id);
+		}
+		for (let id of ids) states[id] = ["active"];
+	}
+	priv._focus_ids = ids;
+	priv._focus_topic = null;
+	try {
+		if (typeof graph.setElementState === "function") graph.setElementState(states);
+		if (ids.length && typeof graph.focusElement === "function") graph.focusElement(ids);
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: find apply failed: ${e}`);
+	}
+	return ids.length;
+}
 async function graph_zoom_in(gobj) {
 	let graph = gobj.priv.graph;
 	const z = graph.getZoom();
@@ -56124,6 +56264,11 @@ function ac_load_data(gobj, event, kw, src) {
 					priv._pending_focus_topic = null;
 					graph_focus_topic(gobj, ft);
 				}
+				if (priv._pending_find !== null) {
+					let term = priv._pending_find;
+					priv._pending_find = null;
+					publish_find_result(gobj, term, graph_find_nodes(gobj, term));
+				}
 			});
 		});
 	});
@@ -56340,6 +56485,25 @@ function ac_focus_topic(gobj, event, kw, src) {
 	graph_focus_topic(gobj, kw && kw.topic);
 	return 0;
 }
+/************************************************************
+*  Tell whoever asked how many nodes the term matched. The count is
+*  the answer to the question the box asks; without it "nothing moved"
+*  and "nothing matched" look the same.
+************************************************************/
+function publish_find_result(gobj, term, matches) {
+	gobj_publish_event(gobj, "EV_FIND_RESULT", {
+		term,
+		matches
+	});
+}
+/************************************************************
+*
+************************************************************/
+function ac_find_nodes(gobj, event, kw, src) {
+	let term = kw && kw.text || "";
+	publish_find_result(gobj, term, graph_find_nodes(gobj, term));
+	return 0;
+}
 function ac_center(gobj, event, kw, src) {
 	graph_center(gobj);
 	return 0;
@@ -56641,6 +56805,11 @@ function create_gclass$1(gclass_name) {
 			ac_focus_topic,
 			null
 		],
+		[
+			"EV_FIND_NODES",
+			ac_find_nodes,
+			null
+		],
 		[
 			"EV_CENTER",
 			ac_center,
@@ -56724,6 +56893,8 @@ function create_gclass$1(gclass_name) {
 		["EV_ZOOM_RESET", 0],
 		["EV_AUTO_FIT", 0],
 		["EV_FOCUS_TOPIC", 0],
+		["EV_FIND_NODES", 0],
+		["EV_FIND_RESULT", event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_CENTER", 0],
 		["EV_FULLSCREEN", 0],
 		["EV_SET_LAYOUT", 0],

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -280,6 +280,7 @@ let PRIVATE_DATA = {
     _focus_topic:       null,       // topic currently focused (EV_FOCUS_TOPIC)
     _focus_ids:         [],         // node ids carrying the focus 'active' state
     _pending_focus_topic: null,     // focus requested before data was loaded
+    _pending_find:      null,       // find requested before data was loaded
 };
 
 let __gclass__ = null;
@@ -2127,6 +2128,89 @@ function graph_focus_topic(gobj, topic)
     }
 }
 
+/************************************************************
+ *  Find the nodes whose name, id or topic contains `term`, highlight
+ *  them with the same amber 'active' state the topic focus uses, and
+ *  centre the viewport on them. Returns how many matched, which is the
+ *  half the toolbar needs: a search that finds nothing must SAY so,
+ *  because a graph that did not move is also what a graph looks like
+ *  when the match is off-screen.
+ *
+ *  It shares the highlight slot with graph_focus_topic on purpose —
+ *  two amber sets at once would say nothing about either. An empty
+ *  term clears it. Matching reads the node's LABEL and not only its
+ *  id: on a topic keyed by rowid or by a qualified path, the id is a
+ *  counter and the name a human knows is elsewhere (see node_label).
+ ************************************************************/
+function graph_find_nodes(gobj, term)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+    if(!graph || !priv.graph_rendered) {
+        priv._pending_find = term;
+        return 0;
+    }
+
+    let data = {};
+    try {
+        data = graph.getData() || {};
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: graph.getData() failed: ${e}`);
+        return 0;
+    }
+    let nodes = is_array(data.nodes) ? data.nodes : [];
+
+    let states = {};
+    for(let id of (priv._focus_ids || [])) {
+        states[id] = [];
+    }
+
+    let ids = [];
+    if(!empty_string(term)) {
+        let needle = String(term).toLowerCase();
+        for(let n of nodes) {
+            if(!n || !n.data) {
+                continue;
+            }
+            let record = n.data.record || {};
+            let label = "";
+            try {
+                label = node_label(n.data.desc || {}, record) || "";
+            } catch(e) {
+                label = "";
+            }
+            let haystack = [
+                label,
+                record.id,
+                n.data.topic_name
+            ].filter((v) => typeof v === "string").join(" ").toLowerCase();
+
+            if(haystack.includes(needle)) {
+                ids.push(n.id);
+            }
+        }
+        for(let id of ids) {
+            states[id] = ['active'];
+        }
+    }
+
+    priv._focus_ids = ids;
+    priv._focus_topic = null;       /*  a find takes over the highlight  */
+
+    try {
+        if(typeof graph.setElementState === "function") {
+            graph.setElementState(states);
+        }
+        if(ids.length && typeof graph.focusElement === "function") {
+            graph.focusElement(ids);
+        }
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: find apply failed: ${e}`);
+    }
+
+    return ids.length;
+}
+
 async function graph_zoom_in(gobj)
 {
     let priv = gobj.priv;
@@ -5546,6 +5630,11 @@ function ac_load_data(gobj, event, kw, src)
                         priv._pending_focus_topic = null;
                         graph_focus_topic(gobj, ft);
                     }
+                    if(priv._pending_find !== null) {
+                        let term = priv._pending_find;
+                        priv._pending_find = null;
+                        publish_find_result(gobj, term, graph_find_nodes(gobj, term));
+                    }
                 });
             });
         });
@@ -5891,6 +5980,27 @@ function ac_focus_topic(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  Tell whoever asked how many nodes the term matched. The count is
+ *  the answer to the question the box asks; without it "nothing moved"
+ *  and "nothing matched" look the same.
+ ************************************************************/
+function publish_find_result(gobj, term, matches)
+{
+    gobj_publish_event(gobj, "EV_FIND_RESULT", {term: term, matches: matches});
+}
+
+/************************************************************
+ *
+ ************************************************************/
+function ac_find_nodes(gobj, event, kw, src)
+{
+    let term = (kw && kw.text) || "";
+    let matches = graph_find_nodes(gobj, term);
+    publish_find_result(gobj, term, matches);
+    return 0;
+}
+
 function ac_center(gobj, event, kw, src)
 {
     graph_center(gobj);
@@ -6254,6 +6364,7 @@ function create_gclass(gclass_name)
             ["EV_ZOOM_RESET",               ac_zoom_reset,          null],
             ["EV_AUTO_FIT",                 ac_auto_fit,            null],
             ["EV_FOCUS_TOPIC",              ac_focus_topic,         null],
+            ["EV_FIND_NODES",               ac_find_nodes,          null],
             ["EV_CENTER",                   ac_center,              null],
             ["EV_FULLSCREEN",               ac_fullscreen,          null],
             ["EV_SET_LAYOUT",               ac_set_layout,          null],
@@ -6297,6 +6408,8 @@ function create_gclass(gclass_name)
         ["EV_ZOOM_RESET",               0],
         ["EV_AUTO_FIT",                 0],
         ["EV_FOCUS_TOPIC",              0],
+        ["EV_FIND_NODES",               0],
+        ["EV_FIND_RESULT",              event_flag_t.EVF_OUTPUT_EVENT],
         ["EV_CENTER",                   0],
         ["EV_FULLSCREEN",               0],
         ["EV_SET_LAYOUT",               0],

package/src/c_yui_treedb_graph.js

@@ -504,9 +504,58 @@ function make_toolbar(gobj)
     ];
 
     /*
-     *  Center, common controls
+     *  Center: 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
+     *  match with the same amber the topic focus uses and centres the
+     *  viewport on them, and it SAYS how many it found — a graph that did
+     *  not move looks the same whether nothing matched or the match was
+     *  already on screen.
      */
-    let center_items = [];
+    let center_items = [
+        ['div', {class: 'GRAPH_FIND control has-icons-left',
+                 style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
+            ['input', {
+                class: 'GRAPH_FIND_INPUT input',
+                type: 'text',
+                /*  A placeholder is not a text node, so the data-i18n walk
+                 *  cannot reach it: it needs its own key. */
+                placeholder: t('search'),
+                'data-i18n-placeholder': 'search',
+                'aria-label': t('search'),
+                'data-i18n-aria-label': 'search'
+            }],
+            ['span', {class: 'icon is-left'}, [
+                ['i', {class: 'yi-magnifying-glass'}]
+            ]]
+        ], {
+            input: (evt) => {
+                evt.stopPropagation();
+                gobj_send_event(
+                    gobj,
+                    "EV_FIND_NODES",
+                    {text: evt.target.value.trim()},
+                    gobj
+                );
+            }
+        }],
+        /*  Two spans, not one string: the number is DATA and "matches" is
+         *  the word, so a language switch re-translates the half that is a
+         *  word. Spaced with CSS because createElement2 trims text nodes. */
+        /*  `display:flex` inline and NOT the `is-flex` helper: both Bulma
+         *  helpers carry !important, so `is-hidden is-flex` on one element
+         *  is decided by whichever lands later in the stylesheet — and the
+         *  count showed with an empty box. An inline rule loses to
+         *  `is-hidden`'s !important and applies the moment it is removed,
+         *  which is the toggle this needs. */
+        ['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'}, ''],
+            ['span', {i18n: 'matches'}, 'matches']
+        ]]
+    ];
 
     /*
      *  Right, fill in set_mode
@@ -2129,6 +2178,51 @@ function ac_set_operation_mode(gobj, event, kw, src)
  *  tree, which centres + highlights that topic's nodes (deferring
  *  until its data is loaded).
  ************************************************************/
+/************************************************************
+ *  Forward the find down to the graph child.
+ ************************************************************/
+function ac_find_nodes(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    if(priv.gobj_nodes_tree) {
+        gobj_send_event(
+            priv.gobj_nodes_tree,
+            "EV_FIND_NODES",
+            {text: (kw && kw.text) || ""},
+            gobj
+        );
+    }
+    return 0;
+}
+
+/************************************************************
+ *  How many nodes the term matched, from the graph child. Zero with a
+ *  term typed is an ANSWER and is shown; an empty box shows nothing.
+ ************************************************************/
+function ac_find_result(gobj, event, kw, src)
+{
+    let $container = gobj_read_attr(gobj, "$container");
+    if(!$container) {
+        return 0;
+    }
+    let $result = $container.querySelector(".GRAPH_FIND_RESULT");
+    let $count = $container.querySelector(".GRAPH_FIND_COUNT");
+    if(!$result || !$count) {
+        return 0;
+    }
+
+    let term = (kw && kw.term) || "";
+    if(!term) {
+        $result.classList.add("is-hidden");
+        $count.textContent = "";
+        return 0;
+    }
+
+    $count.textContent = String((kw && kw.matches) || 0);
+    $result.classList.remove("is-hidden");
+    return 0;
+}
+
 function ac_set_focus_topic(gobj, event, kw, src)
 {
     let priv = gobj.priv;
@@ -2228,6 +2322,8 @@ function create_gclass(gclass_name)
             ["EV_SET_LAYOUT",               ac_set_layout,              null],
             ["EV_SET_OPERATION_MODE",       ac_set_operation_mode,      null],
             ["EV_SET_FOCUS_TOPIC",          ac_set_focus_topic,         null],
+            ["EV_FIND_NODES",               ac_find_nodes,              null],
+            ["EV_FIND_RESULT",              ac_find_result,             null],
             ["EV_SHOW",                     ac_show,                    null],
             ["EV_HIDE",                     ac_hide,                    null],
             ["EV_TRANSPORT_STATE",          ac_transport_state,         null],
@@ -2262,6 +2358,8 @@ function create_gclass(gclass_name)
         ["EV_SET_LAYOUT",               0],
         ["EV_SET_OPERATION_MODE",       0],
         ["EV_SET_FOCUS_TOPIC",          0],
+        ["EV_FIND_NODES",               0],
+        ["EV_FIND_RESULT",              0],
         ["EV_OPERATION_MODE_CHANGED",
             event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
         ["EV_RECORD_WRITTEN",