@yuneta/gobj-ui 7.23.67 → 7.23.68

package/dist/gobj-ui.es.js

@@ -1,5 +1,5 @@
 import * as gobj_js from "@yuneta/gobj-js";
-import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, duplicate_objects, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_find_by_name, gclass_flag_t, getPositionRelativeToBody, gobj_bottom_gobj, gobj_change_state, gobj_command, gobj_create, gobj_create_pure_child, gobj_create_service, gobj_current_state, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_is_destroying, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_post_event, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_set_trace_machine_format, gobj_short_name, gobj_start, gobj_start_tree, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, gobj_yuno_name, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_string, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, set_console_log_enabled, set_log_callback, sprintf, str_in_list, template_get_field_desc, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
+import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, delete_from_list, duplicate_objects, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_find_by_name, gclass_flag_t, getPositionRelativeToBody, gobj_bottom_gobj, gobj_change_state, gobj_command, gobj_create, gobj_create_pure_child, gobj_create_service, gobj_current_state, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_is_destroying, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_post_event, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_set_trace_machine_format, gobj_short_name, gobj_start, gobj_start_tree, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, gobj_yuno_name, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_string, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, set_console_log_enabled, set_log_callback, sprintf, str_in_list, template_get_field_desc, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
 import i18next, { t } from "i18next";
 import TomSelect from "tom-select";
 import { createJSONEditor } from "vanilla-jsoneditor";
@@ -26909,17 +26909,26 @@ function parents_of(descs, desc, record) {
 *          topics: [topic_name, ...]  topics with records, in desc order
 *      }
 ************************************************************/
-function fold_build_model(descs, records) {
+function fold_build_model(descs, records, opts) {
 	let nodes = /* @__PURE__ */ new Map();
 	let groups = /* @__PURE__ */ new Map();
 	let topics = [];
 	descs = is_object(descs) ? descs : {};
 	records = is_object(records) ? records : {};
+	opts = is_object(opts) ? opts : {};
+	let hidden = new Set(is_array(opts.hidden_topics) ? opts.hidden_topics : []);
+	let loose_shown = new Set(is_array(opts.loose_topics) ? opts.loose_topics : []);
+	let main_topic = opts.main_topic || fold_main_topic(descs);
+	if (main_topic && (!descs[main_topic] || hidden.has(main_topic))) main_topic = "";
+	let linked = fold_linked_topics(descs, main_topic);
+	let totals = {};
 	for (let topic_name of Object.keys(descs)) {
 		if (topic_name.substring(0, 2) === "__") continue;
 		descs[topic_name];
 		let list = records[topic_name];
 		if (!is_array(list)) continue;
+		totals[topic_name] = list.length;
+		if (hidden.has(topic_name)) continue;
 		topics.push(topic_name);
 		for (let i = 0; i < list.length; i++) {
 			let record = list[i];
@@ -26948,21 +26957,100 @@ function fold_build_model(descs, records) {
 	}
 	for (let node of nodes.values()) for (let hook of Object.keys(node.hooks)) groups.set(fold_group_key(node.key, hook), node.hooks[hook]);
 	let roots = {};
-	for (let topic_name of topics) roots[topic_name] = [];
-	for (let node of nodes.values()) if (node.parents.length === 0) roots[node.topic_name].push(node.key);
+	let loose = {};
+	for (let topic_name of topics) {
+		roots[topic_name] = [];
+		loose[topic_name] = [];
+	}
+	for (let node of nodes.values()) {
+		if (node.parents.length > 0) continue;
+		let t = node.topic_name;
+		if (main_topic && t !== main_topic && linked.has(t)) {
+			loose[t].push(node.key);
+			if (loose_shown.has(t)) roots[t].push(node.key);
+		} else roots[t].push(node.key);
+	}
 	let reached = reach_from(nodes, [].concat(...Object.values(roots)));
-	for (let node of nodes.values()) if (!reached.has(node.key)) {
-		roots[node.topic_name].push(node.key);
+	for (let node of nodes.values()) {
+		if (reached.has(node.key)) continue;
+		let t = node.topic_name;
+		if (main_topic && t !== main_topic && linked.has(t)) {
+			if (node.parents.length > 0) loose[t].push(node.key);
+			if (!loose_shown.has(t)) continue;
+		}
+		roots[t].push(node.key);
 		for (let k of reach_from(nodes, [node.key])) reached.add(k);
 	}
 	for (let topic_name of topics) if (roots[topic_name].length > 0) groups.set(fold_root_group_key(topic_name), roots[topic_name]);
 	return {
 		nodes,
 		groups,
-		topics
+		topics,
+		totals,
+		hidden,
+		main_topic,
+		linked,
+		loose,
+		loose_shown
 	};
 }
 /************************************************************
+*  The topic the schema hangs the others from: the one whose hooks
+*  reach the most OTHER topics, a self-referent hook breaking a tie
+*  (a tree of places over a flat list of groups), schema order
+*  breaking the rest. "" when no topic reaches another -- a treedb of
+*  unrelated lists has no trunk, and every topic is a tree of its own.
+************************************************************/
+function fold_main_topic(descs) {
+	descs = is_object(descs) ? descs : {};
+	let best = "";
+	let best_score = 0;
+	let best_self = false;
+	for (let topic_name of Object.keys(descs)) {
+		if (topic_name.substring(0, 2) === "__") continue;
+		let reach = hook_targets(descs, topic_name);
+		let self = reach.has(topic_name);
+		reach.delete(topic_name);
+		let score = reach.size;
+		if (score === 0) continue;
+		if (score > best_score || score === best_score && self && !best_self) {
+			best = topic_name;
+			best_score = score;
+			best_self = self;
+		}
+	}
+	return best;
+}
+function hook_targets(descs, topic_name) {
+	let out = /* @__PURE__ */ new Set();
+	let desc = descs[topic_name];
+	if (!desc || desc.node_treedb_type === "extended") return out;
+	let cols = is_array(desc.cols) ? desc.cols : [];
+	for (let col of cols) {
+		if (!is_object(col.hook) || !is_array(col.flag) || col.flag.indexOf("hook") < 0) continue;
+		for (let child of Object.keys(col.hook)) if (child.substring(0, 2) !== "__" && descs[child]) out.add(child);
+	}
+	return out;
+}
+/************************************************************
+*  The topics the schema hangs from `main_topic`, main included:
+*  reached by following hooks from it. A record of one of these
+*  with no parent is LOOSE; a topic outside the set is its own tree.
+*  Empty when there is no main topic.
+************************************************************/
+function fold_linked_topics(descs, main_topic) {
+	let linked = /* @__PURE__ */ new Set();
+	if (!main_topic || !is_object(descs) || !descs[main_topic]) return linked;
+	let queue = [main_topic];
+	while (queue.length) {
+		let t = queue.shift();
+		if (linked.has(t)) continue;
+		linked.add(t);
+		for (let child of hook_targets(descs, t)) if (!linked.has(child)) queue.push(child);
+	}
+	return linked;
+}
+/************************************************************
 *  Everything reachable downwards from `start`, cycles included.
 ************************************************************/
 function reach_from(nodes, start) {
@@ -26993,7 +27081,10 @@ function fold_group_total(model, group_key) {
 }
 function fold_group_shown(model, state, group_key) {
 	let total = fold_group_total(model, group_key);
-	let n = state.shown.get(group_key) || 0;
+	let n;
+	if (state.shown.has(group_key)) n = state.shown.get(group_key);
+	else if (group_key.charAt(0) === "|") n = state.page_size;
+	else n = 0;
 	return Math.min(n, total);
 }
 function fold_is_open(state, group_key) {
@@ -54099,6 +54190,9 @@ var attrs_table$4 = [
 	SDATA(data_type_t.DTP_STRING, "fkey_port_position", 0, "top", "Fkey port position"),
 	SDATA(data_type_t.DTP_INTEGER, "expand_depth", 0, 2, "Levels open when a treedb loads: 1 = the roots alone, 2 = the roots and their children. Every open hook shows its first page"),
 	SDATA(data_type_t.DTP_INTEGER, "fold_page_size", 0, 24, "Children of one hook shown per page; the `+N` chip after the page opens the next one"),
+	SDATA(data_type_t.DTP_LIST, "hidden_topics", 0, "[]", "Topics left out of the tree: no card, no pill counts them, no edge reaches them"),
+	SDATA(data_type_t.DTP_STRING, "main_topic", 0, "", "The topic the tree hangs from; empty = deduced (the one whose hooks reach the most others). Its parentless records are the roots; a parentless record of a topic linked to it is LOOSE and shown only on request"),
+	SDATA(data_type_t.DTP_LIST, "loose_topics", 0, "[]", "Topics whose loose records (no parent, in a topic the schema hangs from the main one) are shown as roots"),
 	SDATA(data_type_t.DTP_BOOLEAN, "confirm_delete_node", 0, true, "Ask confirmation before deleting a node"),
 	SDATA(data_type_t.DTP_BOOLEAN, "confirm_unlink_edge", 0, true, "Ask confirmation before unlinking an edge"),
 	SDATA(data_type_t.DTP_STRING, "wide", 0, "40px", "Height of header"),
@@ -54168,12 +54262,16 @@ var PRIVATE_DATA$4 = {
 	_selected_paint_ids: [],
 	_pending_focus_topic: null,
 	_pending_focus_all: false,
+	_find_hidden_matches: 0,
 	_pending_find: null,
 	_layout_asked: "",
 	_nodes_total: 0,
 	_nodes_placed: 0,
 	expand_depth: 2,
 	fold_page_size: 24,
+	hidden_topics: null,
+	main_topic: "",
+	loose_topics: null,
 	_fold_model: null,
 	_fold_state: null,
 	_fold_listener: null,
@@ -55749,23 +55847,26 @@ function graph_find_nodes(gobj, term) {
 	let model = priv._fold_model;
 	let state = priv._fold_state;
 	let keys = [];
+	let hidden_matches = 0;
 	if (!empty_string(term)) {
 		let needle = String(term).toLowerCase();
-		for (let node of model.nodes.values()) {
-			let record = node.record || {};
+		let matches = (topic_name, record) => {
 			let label = "";
 			try {
-				label = node_label(priv.descs[node.topic_name] || {}, record) || "";
+				label = node_label(priv.descs[topic_name] || {}, record) || "";
 			} catch (e) {
 				label = "";
 			}
-			if ([
+			return [
 				label,
 				record.id,
-				node.topic_name
-			].filter((v) => typeof v === "string").join(" ").toLowerCase().includes(needle)) keys.push(node.key);
-		}
+				topic_name
+			].filter((v) => typeof v === "string").join(" ").toLowerCase().includes(needle);
+		};
+		for (let node of model.nodes.values()) if (matches(node.topic_name, node.record || {})) keys.push(node.key);
+		for (let topic_name of model.hidden) for (let record of priv.records[topic_name] || []) if (is_object(record) && matches(topic_name, record)) hidden_matches++;
 	}
+	priv._find_hidden_matches = hidden_matches;
 	let visible = fold_visible_set(model, state);
 	let revealed = 0;
 	for (let key of keys) {
@@ -58696,7 +58797,11 @@ function uninstall_fold_listener(gobj) {
 ************************************************************/
 function rebuild_fold_model(gobj) {
 	let priv = gobj.priv;
-	priv._fold_model = fold_build_model(priv.descs || {}, priv.records || {});
+	priv._fold_model = fold_build_model(priv.descs || {}, priv.records || {}, {
+		hidden_topics: gobj_read_attr(gobj, "hidden_topics") || [],
+		main_topic: gobj_read_str_attr(gobj, "main_topic") || "",
+		loose_topics: gobj_read_attr(gobj, "loose_topics") || []
+	});
 	if (!priv._fold_state) priv._fold_state = fold_new_state(gobj_read_integer_attr(gobj, "fold_page_size"));
 	if (!priv._pill_sig) priv._pill_sig = /* @__PURE__ */ new Map();
 }
@@ -58758,8 +58863,47 @@ async function reconcile_fold_now(gobj, opts) {
 	} finally {
 		history_resume(gobj);
 	}
+	publish_legend_state(gobj, visible);
 	return changed;
 }
+/************************************************************
+*  What the legend has to say, published after every reconcile:
+*  one entry per topic of the treedb, hidden ones included, with
+*  its colour, how many records it has, how many are on screen,
+*  how many are LOOSE, and the flags -- plus which topic is the
+*  main one and whether it was deduced or chosen. The host draws
+*  the strip from this and nothing else; the engine is the truth.
+************************************************************/
+function publish_legend_state(gobj, visible) {
+	let priv = gobj.priv;
+	let model = priv._fold_model;
+	if (!model || !priv.descs) return;
+	let on_screen = {};
+	for (let key of visible) {
+		let node = model.nodes.get(key);
+		if (node) on_screen[node.topic_name] = (on_screen[node.topic_name] || 0) + 1;
+	}
+	let topics = [];
+	for (const [topic_name, desc] of Object.entries(priv.descs)) {
+		if (topic_name.substring(0, 2) === "__" || !desc) continue;
+		let loose = model.loose[topic_name] || [];
+		topics.push({
+			topic: topic_name,
+			color: desc.color || "",
+			total: model.totals[topic_name] || 0,
+			visible: on_screen[topic_name] || 0,
+			loose: loose.length,
+			loose_shown: model.loose_shown.has(topic_name),
+			hidden: model.hidden.has(topic_name),
+			linked: model.linked.has(topic_name)
+		});
+	}
+	gobj_publish_event(gobj, "EV_LEGEND_STATE", {
+		main_topic: model.main_topic,
+		main_chosen: !!gobj_read_str_attr(gobj, "main_topic"),
+		topics
+	});
+}
 async function reconcile_fold_apply(gobj, opts, visible) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
@@ -59435,6 +59579,43 @@ function ac_collapse_all$1(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The legend's three settings, from the host, which persists
+*  them. Each rebuilds the tree; the fold state is kept -- it is
+*  keyed by group, and a group that is gone is never read -- except
+*  for a new MAIN topic, whose roots are other roots: the tree
+*  opens again at `expand_depth`.
+************************************************************/
+function ac_set_hidden_topics(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let topics = kw && is_array(kw.topics) ? kw.topics : [];
+	gobj_write_attr(gobj, "hidden_topics", topics);
+	if (!priv._fold_model) return 0;
+	rebuild_fold_model(gobj);
+	reconcile_fold(gobj, {});
+	return 0;
+}
+function ac_set_main_topic(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	gobj_write_str_attr(gobj, "main_topic", kw && kw.topic || "");
+	if (!priv._fold_model) return 0;
+	rebuild_fold_model(gobj);
+	fold_expand_to_depth(priv._fold_model, priv._fold_state, gobj_read_integer_attr(gobj, "expand_depth"));
+	reconcile_fold(gobj, {
+		relayout: true,
+		fit: true
+	});
+	return 0;
+}
+function ac_set_loose_topics(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let topics = kw && is_array(kw.topics) ? kw.topics : [];
+	gobj_write_attr(gobj, "loose_topics", topics);
+	if (!priv._fold_model) return 0;
+	rebuild_fold_model(gobj);
+	reconcile_fold(gobj, {});
+	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.
@@ -59442,7 +59623,8 @@ function ac_collapse_all$1(gobj, event, kw, src) {
 function publish_find_result(gobj, term, matches) {
 	gobj_publish_event(gobj, "EV_FIND_RESULT", {
 		term,
-		matches
+		matches,
+		hidden_matches: gobj.priv._find_hidden_matches || 0
 	});
 }
 /************************************************************
@@ -59908,6 +60090,21 @@ function create_gclass$4(gclass_name) {
 			ac_collapse_all$1,
 			null
 		],
+		[
+			"EV_SET_HIDDEN_TOPICS",
+			ac_set_hidden_topics,
+			null
+		],
+		[
+			"EV_SET_MAIN_TOPIC",
+			ac_set_main_topic,
+			null
+		],
+		[
+			"EV_SET_LOOSE_TOPICS",
+			ac_set_loose_topics,
+			null
+		],
 		[
 			"EV_CENTER",
 			ac_center,
@@ -60009,6 +60206,10 @@ function create_gclass$4(gclass_name) {
 		["EV_SHOW_MORE", 0],
 		["EV_EXPAND_ALL", 0],
 		["EV_COLLAPSE_ALL", 0],
+		["EV_SET_HIDDEN_TOPICS", 0],
+		["EV_SET_MAIN_TOPIC", 0],
+		["EV_SET_LOOSE_TOPICS", 0],
+		["EV_LEGEND_STATE", event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_CENTER", 0],
 		["EV_FULLSCREEN", 0],
 		["EV_SET_LAYOUT", 0],
@@ -60070,6 +60271,9 @@ var attrs_table$3 = [
 	SDATA(data_type_t.DTP_INTEGER, "fold_page_size", 0, 24, "Children of one hook shown per page in the graph; a `+N` chip opens the next page. Forwarded to the G6 child"),
 	SDATA(data_type_t.DTP_STRING, "operation_mode", sdata_flag_t.SDF_PERSIST, "reading", "Current operation mode (internal behaviour or role). Changed by the user trough the gui."),
 	SDATA(data_type_t.DTP_STRING, "layout", sdata_flag_t.SDF_PERSIST, "", "Current graph layout. User preference. Changed by the user through the gui."),
+	SDATA(data_type_t.DTP_LIST, "hidden_topics", sdata_flag_t.SDF_PERSIST, "[]", "Topics hidden from the graph (legend). User preference, per treedb"),
+	SDATA(data_type_t.DTP_STRING, "main_topic", sdata_flag_t.SDF_PERSIST, "", "The topic the tree hangs from; empty = deduced by the graph. User preference, per treedb"),
+	SDATA(data_type_t.DTP_LIST, "loose_topics", sdata_flag_t.SDF_PERSIST, "[]", "Topics whose LOOSE records (no parent) are shown. User preference, per treedb"),
 	SDATA(data_type_t.DTP_POINTER, "gobj_remote_yuno", 0, null, "Remote Yuno to request data"),
 	SDATA(data_type_t.DTP_STRING, "treedb_name", 0, null, "Remote service treedb name"),
 	SDATA(data_type_t.DTP_DICT, "descs", 0, null, "Descriptions of topics obtained"),
@@ -60111,6 +60315,7 @@ var PRIVATE_DATA$3 = {
 	operation_mode: null,
 	layout: null,
 	_topics_subscribed: {},
+	_legend_state: null,
 	_links_subscribed: false,
 	is_pinhold_window: false
 };
@@ -60143,7 +60348,10 @@ function mt_create$3(gobj) {
 		hook_port_position: "bottom",
 		fkey_port_position: "top",
 		expand_depth: gobj_read_integer_attr(gobj, "expand_depth"),
-		fold_page_size: gobj_read_integer_attr(gobj, "fold_page_size")
+		fold_page_size: gobj_read_integer_attr(gobj, "fold_page_size"),
+		hidden_topics: gobj_read_attr(gobj, "hidden_topics") || [],
+		main_topic: gobj_read_str_attr(gobj, "main_topic") || "",
+		loose_topics: gobj_read_attr(gobj, "loose_topics") || []
 	}, gobj);
 	populate_nodes_tree_options(gobj);
 	if (priv.with_treedb_tables) {}
@@ -60210,8 +60418,8 @@ function build_ui$3(gobj) {
 			[
 				"div",
 				{
-					class: "GRAPH_LEGEND is-hidden is-flex-grow-0",
-					style: "display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; padding:.35rem .5rem;"
+					class: "GRAPH_LEGEND is-flex-grow-0",
+					style: "display:flex; flex-wrap:nowrap; align-items:center; gap:.35rem; padding:.3rem .5rem; overflow-x:auto; min-height:2.2rem;"
 				},
 				[]
 			],
@@ -60402,29 +60610,6 @@ function make_toolbar(gobj) {
 			} }
 		],
 		...yui_graph_fold_items(gobj, gobj_read_str_attr(gobj, "wide")),
-		[
-			"button",
-			{
-				class: "GRAPH_LEGEND_BTN button ml-2",
-				title: t("legend"),
-				"aria-label": t("legend"),
-				"data-i18n-title": "legend",
-				"data-i18n-aria-label": "legend"
-			},
-			[["i", { class: "yi-square" }], [
-				"span",
-				{
-					class: "is-hidden-mobile",
-					style: "padding-left:5px;",
-					i18n: "legend"
-				},
-				"legend"
-			]],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				gobj_send_event(gobj, "EV_TOGGLE_LEGEND", {}, gobj);
-			} }
-		],
 		[
 			"button",
 			{
@@ -61454,55 +61639,185 @@ function refresh_legend(gobj) {
 	if (!$container) return;
 	let $legend = $container.querySelector(".GRAPH_LEGEND");
 	if (!$legend) return;
-	let descs = priv.gobj_nodes_tree ? gobj_read_attr(priv.gobj_nodes_tree, "descs") : null;
+	let state = priv._legend_state;
 	$legend.textContent = "";
-	if (!descs) return;
-	for (const [topic_name, desc] of Object.entries(descs)) {
-		if (topic_name.substring(0, 2) === "__") continue;
-		if (!desc || !desc.color) continue;
+	if (!state || !is_array(state.topics)) return;
+	let topics = state.topics.slice().sort((a, b) => {
+		return (a.topic === state.main_topic ? 0 : 1) - (b.topic === state.main_topic ? 0 : 1);
+	});
+	for (let entry of topics) {
+		let topic_name = entry.topic;
+		let is_main = topic_name === state.main_topic;
 		let focused = priv.focus_topic === topic_name;
-		let $item = createElement2([
+		let hidden = !!entry.hidden;
+		let controls = [];
+		controls.push(["span", {
+			class: "GRAPH_LEGEND_SWATCH",
+			style: `display:inline-block; width:.8rem; height:.8rem; border-radius:3px; margin-right:.35rem; flex:0 0 auto; background:${entry.color || "#94a3b8"}; border:1px solid rgba(0,0,0,.25);` + (hidden ? "opacity:.35;" : "")
+		}], [
+			"span",
+			{
+				class: "GRAPH_LEGEND_NAME",
+				style: hidden ? "text-decoration:line-through; opacity:.6;" : ""
+			},
+			topic_name
+		], [
+			"span",
+			{
+				class: "GRAPH_LEGEND_COUNT has-text-grey",
+				style: "margin-left:.35rem; font-size:.8em;"
+			},
+			hidden ? `${entry.total}` : `${entry.visible}/${entry.total}`
+		]);
+		let body_attrs = {
+			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " is-primary is-light" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
+			type: "button",
+			style: "gap:0; flex:0 0 auto;",
+			title: is_main ? t("main topic") : hidden ? t("show topic") : t("hide topic"),
+			"aria-label": topic_name,
+			"aria-pressed": hidden ? "false" : "true"
+		};
+		if (is_main) body_attrs.disabled = "disabled";
+		let $body = createElement2([
+			"button",
+			body_attrs,
+			controls,
+			{ click: (evt) => {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_LEGEND_TOPIC", {
+					topic: topic_name,
+					action: "toggle"
+				}, gobj);
+			} }
+		]);
+		let extras = [];
+		if (is_main && state.main_chosen) extras.push([
+			"button",
+			{
+				class: "GRAPH_LEGEND_STAR button is-small is-warning is-light",
+				type: "button",
+				style: "padding:0 .4rem;",
+				title: t("main topic"),
+				"data-i18n-title": "main topic",
+				"aria-label": t("main topic"),
+				"aria-pressed": "true"
+			},
+			"★",
+			{ click: (evt) => {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_LEGEND_TOPIC", {
+					topic: "",
+					action: "main"
+				}, gobj);
+			} }
+		]);
+		else if (is_main) extras.push([
+			"span",
+			{
+				class: "GRAPH_LEGEND_STAR button is-small is-static",
+				style: "padding:0 .4rem;",
+				title: t("main topic"),
+				"data-i18n-title": "main topic"
+			},
+			"★"
+		]);
+		else if (!hidden) extras.push([
+			"button",
+			{
+				class: "GRAPH_LEGEND_STAR button is-small",
+				type: "button",
+				style: "padding:0 .4rem;",
+				title: t("main topic"),
+				"data-i18n-title": "main topic",
+				"aria-label": t("main topic")
+			},
+			"☆",
+			{ click: (evt) => {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_LEGEND_TOPIC", {
+					topic: topic_name,
+					action: "main"
+				}, gobj);
+			} }
+		]);
+		if (!hidden && entry.linked && entry.loose > 0) extras.push([
+			"button",
+			{
+				class: "GRAPH_LEGEND_LOOSE button is-small" + (entry.loose_shown ? " is-warning is-light" : ""),
+				type: "button",
+				style: "padding:0 .45rem;",
+				title: t("loose records"),
+				"data-i18n-title": "loose records",
+				"aria-label": t("loose records"),
+				"aria-pressed": entry.loose_shown ? "true" : "false"
+			},
+			`+${entry.loose}`,
+			{ click: (evt) => {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_LEGEND_TOPIC", {
+					topic: topic_name,
+					action: "loose"
+				}, gobj);
+			} }
+		]);
+		if (!hidden) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " is-primary is-light" : ""),
-				title: topic_name,
-				"aria-label": topic_name,
+				class: "GRAPH_LEGEND_FOCUS button is-small" + (focused ? " is-primary is-light" : ""),
+				type: "button",
+				style: "padding:0 .4rem;",
+				title: t("highlight topic"),
+				"data-i18n-title": "highlight topic",
+				"aria-label": t("highlight topic"),
 				"aria-pressed": focused ? "true" : "false"
 			},
-			[["span", {
-				class: "GRAPH_LEGEND_SWATCH",
-				style: `display:inline-block; width:.8rem; height:.8rem; border-radius:3px; margin-right:.4rem; background:${desc.color}; border:1px solid rgba(0,0,0,.25);`
-			}], [
-				"span",
-				{},
-				topic_name
-			]],
+			[["i", { class: "yi-location-crosshairs" }]],
 			{ click: (evt) => {
 				evt.stopPropagation();
-				gobj_send_event(gobj, "EV_LEGEND_TOPIC", { topic: topic_name }, gobj);
+				gobj_send_event(gobj, "EV_LEGEND_TOPIC", {
+					topic: topic_name,
+					action: "focus"
+				}, gobj);
 			} }
 		]);
-		$legend.appendChild($item);
+		let $chip = createElement2([
+			"div",
+			{
+				class: "GRAPH_LEGEND_CHIP buttons has-addons",
+				style: "margin:0; flex:0 0 auto; flex-wrap:nowrap;"
+			},
+			[$body].concat(extras.map((spec) => createElement2(spec)))
+		]);
+		$legend.appendChild($chip);
 	}
 }
 /************************************************************
-*
+*  The engine said what is drawn: repaint the strip.
 ************************************************************/
-function ac_toggle_legend(gobj, event, kw, src) {
-	let $container = gobj_read_attr(gobj, "$container");
-	if (!$container) return 0;
-	let $legend = $container.querySelector(".GRAPH_LEGEND");
-	if (!$legend) {
-		log_error(`${gobj_short_name(gobj)}: no legend strip to toggle`);
-		return -1;
-	}
-	if ($legend.classList.contains("is-hidden")) {
-		refresh_legend(gobj);
-		$legend.classList.remove("is-hidden");
-	} else $legend.classList.add("is-hidden");
+function ac_legend_state(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	priv._legend_state = kw || null;
+	refresh_legend(gobj);
 	return 0;
 }
 /************************************************************
+*
+************************************************************/
+/************************************************************
+*  One of the legend's settings changed: write it, SAVE it (they
+*  are the reader's, per treedb) and tell the engine.
+************************************************************/
+function set_legend_list_attr(gobj, name, event_name, topics) {
+	let priv = gobj.priv;
+	gobj_write_attr(gobj, name, topics);
+	gobj_save_persistent_attrs(gobj, name);
+	if (priv.gobj_nodes_tree) gobj_send_event(priv.gobj_nodes_tree, event_name, { topics }, gobj);
+}
+function legend_list_attr(gobj, name) {
+	let list = gobj_read_attr(gobj, name);
+	return is_array(list) ? list.slice() : [];
+}
+/************************************************************
 *  A legend entry was clicked: focus that topic, or clear the focus if
 *  it was already the focused one. Published UP rather than applied
 *  here, so the URL follows — the host owns the route.
@@ -61510,10 +61825,41 @@ function ac_toggle_legend(gobj, event, kw, src) {
 function ac_legend_topic(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let topic = kw && kw.topic || "";
-	if (!topic) {
+	let action = kw && kw.action || "focus";
+	if (!topic && action !== "main") {
 		log_error(`${gobj_short_name(gobj)}: legend click with no topic`);
 		return -1;
 	}
+	let state = priv._legend_state || {};
+	switch (action) {
+		case "toggle": {
+			if (topic === state.main_topic) {
+				log_error(`${gobj_short_name(gobj)}: the main topic '${topic}' cannot be hidden`);
+				return -1;
+			}
+			let hidden = legend_list_attr(gobj, "hidden_topics");
+			if (str_in_list(hidden, topic)) delete_from_list(hidden, topic);
+			else hidden.push(topic);
+			set_legend_list_attr(gobj, "hidden_topics", "EV_SET_HIDDEN_TOPICS", hidden);
+			return 0;
+		}
+		case "loose": {
+			let loose = legend_list_attr(gobj, "loose_topics");
+			if (str_in_list(loose, topic)) delete_from_list(loose, topic);
+			else loose.push(topic);
+			set_legend_list_attr(gobj, "loose_topics", "EV_SET_LOOSE_TOPICS", loose);
+			return 0;
+		}
+		case "main":
+			gobj_write_str_attr(gobj, "main_topic", topic);
+			gobj_save_persistent_attrs(gobj, "main_topic");
+			if (priv.gobj_nodes_tree) gobj_send_event(priv.gobj_nodes_tree, "EV_SET_MAIN_TOPIC", { topic }, gobj);
+			return 0;
+		case "focus": break;
+		default:
+			log_error(`${gobj_short_name(gobj)}: legend action unknown: ${action}`);
+			return -1;
+	}
 	let next = priv.focus_topic === topic ? "" : topic;
 	gobj_send_event(gobj, "EV_SET_FOCUS_TOPIC", {
 		topic: next,
@@ -61574,20 +61920,28 @@ function ac_find_result(gobj, event, kw, src) {
 		$count.textContent = "";
 		return 0;
 	}
-	$count.textContent = t("matches", { count: kw && kw.matches || 0 });
+	let text = t("matches", { count: kw && kw.matches || 0 });
+	let hidden = kw && kw.hidden_matches || 0;
+	if (hidden > 0) text += ` (+${hidden} ${t("hidden topics")})`;
+	$count.textContent = text;
 	$result.classList.remove("is-hidden");
 	return 0;
 }
 function ac_set_focus_topic(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	priv.focus_topic = kw && kw.topic || "";
+	if (priv.focus_topic) {
+		let hidden = legend_list_attr(gobj, "hidden_topics");
+		if (str_in_list(hidden, priv.focus_topic)) {
+			delete_from_list(hidden, priv.focus_topic);
+			set_legend_list_attr(gobj, "hidden_topics", "EV_SET_HIDDEN_TOPICS", hidden);
+		}
+	}
 	if (priv.gobj_nodes_tree) gobj_send_event(priv.gobj_nodes_tree, "EV_FOCUS_TOPIC", {
 		topic: priv.focus_topic,
 		reveal: kw && kw.reveal || "page"
 	}, gobj);
-	let $container = gobj_read_attr(gobj, "$container");
-	let $legend = $container ? $container.querySelector(".GRAPH_LEGEND") : null;
-	if ($legend && !$legend.classList.contains("is-hidden")) refresh_legend(gobj);
+	refresh_legend(gobj);
 	return 0;
 }
 /************************************************************
@@ -61771,13 +62125,13 @@ function create_gclass$3(gclass_name) {
 			null
 		],
 		[
-			"EV_TOGGLE_LEGEND",
-			ac_toggle_legend,
+			"EV_LEGEND_TOPIC",
+			ac_legend_topic,
 			null
 		],
 		[
-			"EV_LEGEND_TOPIC",
-			ac_legend_topic,
+			"EV_LEGEND_STATE",
+			ac_legend_state,
 			null
 		],
 		[
@@ -61831,8 +62185,8 @@ function create_gclass$3(gclass_name) {
 		["EV_COLLAPSE_ALL", 0],
 		["EV_FIND_RESULT", 0],
 		["EV_LAYOUT_AUTOSET", 0],
-		["EV_TOGGLE_LEGEND", 0],
 		["EV_LEGEND_TOPIC", 0],
+		["EV_LEGEND_STATE", 0],
 		["EV_TOPIC_SELECTED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
 		["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],