@yuneta/gobj-ui 6.2.1 → 6.3.1

package/README.md

@@ -468,6 +468,24 @@ It needs the descriptor to carry `pkey2s`, which `tranger2_topic_desc()` only
 clones from **SDK > 7.13.0**. Against an older node the desc has no `pkey2s`, the
 label falls back to the id, and nothing else changes.
 
+### Which backend a view browses: `source_url`
+
+`C_YUI_TREEDB_TOPICS` takes an optional **`source_url`** string and prints it in
+its toolbar, between the left buttons and the *raw json* one. A host passes the
+url of the connection the view reads through (`wss://host:port`), and an empty
+value renders nothing.
+
+The tab that hosts the view is labelled with the **treedb** name, and a treedb
+name is not unique across backends: two tabs reading `treedb_yuneta_agent` are
+two different machines, and a wrong assumption there is a write on the wrong
+node. The url is what tells them apart, and it does not fit in a tab label —
+a tab wide enough for `wss://artgins.yunetacontrol.com:1996` is a tab bar with
+room for one tab. So the view carries it, where there is a whole row for it.
+
+The buttons of that toolbar never shrink. When the row runs out of room, the
+url is what gives way, cut with an ellipsis, and the whole value stays in the
+`title` and the `aria-label`.
+
 ### Read-only treedbs: `readonly`
 
 `C_YUI_TREEDB_TOPICS` and `C_YUI_TREEDB_GRAPH` take a **`readonly`** attr; the

package/dist/gobj-ui.cjs.js

@@ -14413,6 +14413,7 @@ var attrs_table$6 = [
 	(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, "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."),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "Root HTML element, show/hide managed by external routing"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$current_item", 0, null, "Currently selected item"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "last_selection", 0, null, "Last href selection"),
@@ -14518,6 +14519,7 @@ function cmd_get_topic_data$1(gobj, cmd, kw, src) {
 *   Build UI
 ************************************************************/
 function build_ui$6(gobj) {
+	let source_url = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "source_url") || "";
 	let $container = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
@@ -14581,6 +14583,23 @@ function build_ui$6(gobj) {
 								(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_LANDING_VIEW", {}, gobj);
 							} }
 						],
+						[
+							"div",
+							{
+								class: source_url ? "TREEDB_TOPICS_SOURCE" : "TREEDB_TOPICS_SOURCE is-hidden",
+								title: source_url,
+								"aria-label": source_url
+							},
+							[[
+								"span",
+								{ class: "icon" },
+								[["i", { class: "yi-cloudversify" }]]
+							], [
+								"span",
+								{ class: "TREEDB_TOPICS_SOURCE_URL" },
+								source_url
+							]]
+						],
 						[
 							"button",
 							{
@@ -20205,11 +20224,7 @@ function build_graph$1(gobj) {
 		let node_id = evt && evt.target && evt.target.id;
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_CLICK", { node_id }, gobj);
 	});
-	graph.render().then(() => {
-		try {
-			graph.fitView();
-		} catch (e) {}
-	}).catch((e) => {
+	graph.render().catch((e) => {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: schema graph render failed: ${e}`);
 	});
 }
@@ -20263,8 +20278,10 @@ function ac_node_click$2(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
-*   Shown by the host: (re)fit the view now the container is
-*   visible and sized (G6 renders at 0×0 while display:none).
+*   Shown by the host: match the canvas to the container now it
+*   is visible and sized (G6 renders at 0×0 while display:none).
+*   A resize only, never a fit: the camera stays where it was, so
+*   the diagram keeps its scale and the user's pan/zoom.
 ************************************************************/
 function ac_show$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
@@ -20273,7 +20290,7 @@ function ac_show$2(gobj, event, kw, src) {
 		return 0;
 	}
 	try {
-		priv.graph.fitView();
+		priv.graph.resize();
 	} catch (e) {}
 	return 0;
 }

package/dist/gobj-ui.es.js

@@ -14408,6 +14408,7 @@ var attrs_table$6 = [
 	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, "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."),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "Root HTML element, show/hide managed by external routing"),
 	SDATA(data_type_t.DTP_POINTER, "$current_item", 0, null, "Currently selected item"),
 	SDATA(data_type_t.DTP_STRING, "last_selection", 0, null, "Last href selection"),
@@ -14513,6 +14514,7 @@ function cmd_get_topic_data$1(gobj, cmd, kw, src) {
 *   Build UI
 ************************************************************/
 function build_ui$6(gobj) {
+	let source_url = gobj_read_str_attr(gobj, "source_url") || "";
 	let $container = createElement2([
 		"div",
 		{
@@ -14576,6 +14578,23 @@ function build_ui$6(gobj) {
 								gobj_send_event(gobj, "EV_TOGGLE_LANDING_VIEW", {}, gobj);
 							} }
 						],
+						[
+							"div",
+							{
+								class: source_url ? "TREEDB_TOPICS_SOURCE" : "TREEDB_TOPICS_SOURCE is-hidden",
+								title: source_url,
+								"aria-label": source_url
+							},
+							[[
+								"span",
+								{ class: "icon" },
+								[["i", { class: "yi-cloudversify" }]]
+							], [
+								"span",
+								{ class: "TREEDB_TOPICS_SOURCE_URL" },
+								source_url
+							]]
+						],
 						[
 							"button",
 							{
@@ -20192,11 +20211,7 @@ function build_graph$1(gobj) {
 		let node_id = evt && evt.target && evt.target.id;
 		gobj_send_event(gobj, "EV_NODE_CLICK", { node_id }, gobj);
 	});
-	graph.render().then(() => {
-		try {
-			graph.fitView();
-		} catch (e) {}
-	}).catch((e) => {
+	graph.render().catch((e) => {
 		log_error(`${gobj_short_name(gobj)}: schema graph render failed: ${e}`);
 	});
 }
@@ -20250,8 +20265,10 @@ function ac_node_click$2(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
-*   Shown by the host: (re)fit the view now the container is
-*   visible and sized (G6 renders at 0×0 while display:none).
+*   Shown by the host: match the canvas to the container now it
+*   is visible and sized (G6 renders at 0×0 while display:none).
+*   A resize only, never a fit: the camera stays where it was, so
+*   the diagram keeps its scale and the user's pan/zoom.
 ************************************************************/
 function ac_show$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
@@ -20260,7 +20277,7 @@ function ac_show$2(gobj, event, kw, src) {
 		return 0;
 	}
 	try {
-		priv.graph.fitView();
+		priv.graph.resize();
 	} catch (e) {}
 	return 0;
 }

package/package.json

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

package/src/c_yui_treedb_schema.js

@@ -574,13 +574,10 @@ function build_graph(gobj)
         gobj_send_event(gobj, "EV_NODE_CLICK", {node_id: node_id}, gobj);
     });
 
-    graph.render().then(() => {
-        try {
-            graph.fitView();
-        } catch(e) {
-            // best-effort centring
-        }
-    }).catch((e) => {
+    /*  No fitView: the diagram is drawn at its own scale and stays there.
+     *  Zooming it to the container the moment it appears rewrites the size
+     *  the reader just saw, and does it differently for every treedb. */
+    graph.render().catch((e) => {
         log_error(`${gobj_short_name(gobj)}: schema graph render failed: ${e}`);
     });
 }
@@ -659,8 +656,10 @@ function ac_node_click(gobj, event, kw, src)
 }
 
 /************************************************************
- *   Shown by the host: (re)fit the view now the container is
- *   visible and sized (G6 renders at 0×0 while display:none).
+ *   Shown by the host: match the canvas to the container now it
+ *   is visible and sized (G6 renders at 0×0 while display:none).
+ *   A resize only, never a fit: the camera stays where it was, so
+ *   the diagram keeps its scale and the user's pan/zoom.
  ************************************************************/
 function ac_show(gobj, event, kw, src)
 {
@@ -670,7 +669,7 @@ function ac_show(gobj, event, kw, src)
         return 0;
     }
     try {
-        priv.graph.fitView();
+        priv.graph.resize();
     } catch(e) {
         // best-effort
     }

package/src/c_yui_treedb_topics.css

@@ -71,3 +71,31 @@
     background: transparent;
     padding: 0;
 }
+
+/*  The backend url in the toolbar, between the left buttons and the
+ *  json button (which keeps itself flush right with margin-left:auto).
+ *  The buttons never shrink: when the row runs out of room it is the
+ *  url that gives way, one character at a time, down to its icon. */
+.TREEDB_TOPICS_TOOLBAR > .button {
+    flex: none;
+}
+.TREEDB_TOPICS_SOURCE {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex: 0 1 auto;
+    min-width: 0;
+    margin-left: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--bulma-text-weak, #7a7a7a);
+}
+.TREEDB_TOPICS_SOURCE .icon {
+    flex: none;
+}
+/*  One line, cut with an ellipsis. The whole url stays in the title. */
+.TREEDB_TOPICS_SOURCE .TREEDB_TOPICS_SOURCE_URL {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/src/c_yui_treedb_topics.js

@@ -81,6 +81,7 @@ SDATA(data_type_t.DTP_BOOLEAN,  "readonly",         0,  false,  "The whole treed
 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,     "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."),
 SDATA(data_type_t.DTP_POINTER,  "$container",       0,  null,   "Root HTML element, show/hide managed by external routing"),
 SDATA(data_type_t.DTP_POINTER,  "$current_item",    0,  null,   "Currently selected item"),
 SDATA(data_type_t.DTP_STRING,   "last_selection",   0,  null,   "Last href selection"),
@@ -245,6 +246,8 @@ function cmd_get_topic_data(gobj, cmd, kw, src)
  ************************************************************/
 function build_ui(gobj)
 {
+    let source_url = gobj_read_str_attr(gobj, "source_url") || "";
+
     /*----------------------------------------------*
      *  Layout Schema
      *----------------------------------------------*/
@@ -287,6 +290,19 @@ function build_ui(gobj)
                             gobj_send_event(gobj, "EV_TOGGLE_LANDING_VIEW", {}, gobj);
                         }
                     }],
+                    /*  The backend this view browses. The tab that hosts this
+                     *  view is labelled with the TREEDB name, and the same
+                     *  treedb name lives on more than one node — two tabs
+                     *  reading `treedb_yuneta_agent` are two different
+                     *  machines. A tab label cannot carry a url without
+                     *  becoming unreadable, so the url is here, where there is
+                     *  room for it. Hidden when the host supplies none. */
+                    ['div', {class: source_url?
+                                'TREEDB_TOPICS_SOURCE' : 'TREEDB_TOPICS_SOURCE is-hidden',
+                             title: source_url, 'aria-label': source_url}, [
+                        ['span', {class: 'icon'}, [['i', {class: 'yi-cloudversify'}]]],
+                        ['span', {class: 'TREEDB_TOPICS_SOURCE_URL'}, source_url]
+                    ]],
                     /*  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. */