@yuneta/gobj-ui 6.2.0 → 6.3.0

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",
 							{

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",
 							{

package/package.json

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

package/src/c_yui_node.js

@@ -632,6 +632,27 @@ function clear_navs(gobj)
  *      "index"  — I am the tip: the projection is the page.
  *      "chrome" — a child is showing: the projection is its chrome.
  ************************************************************/
+/************************************************************
+ *  WHERE A CHILD'S NAV ITEM POINTS.
+ *
+ *  One function, because two things read it and they must not
+ *  disagree: the item's own href, and the `active_route` the nav
+ *  is told to highlight — C_YUI_NAV matches by EXACT route, so an
+ *  item pointing at a remembered position while the active route
+ *  stayed canonical is an item that is never marked active.
+ ************************************************************/
+function child_nav_route(gobj, id)
+{
+    let my_route = route_of(gobj);
+    let base = my_route === "/" ? "" : my_route;
+    let route = `${base}/${id}`;
+
+    if(!gobj_read_bool_attr(gobj, "remember_position")) {
+        return route;
+    }
+    return nav_route_with_tail(route, gobj.priv.remembered[id]);
+}
+
 function render_projection(gobj, mode, $where, active_route, active_id, zones_only)
 {
     let priv = gobj.priv;
@@ -662,11 +683,7 @@ function render_projection(gobj, mode, $where, active_route, active_id, zones_on
      *  contract either way: what the item carries is a real position,
      *  so clicking it is a navigation and not a restore that would then
      *  have to argue with the url.  */
-    let remember = gobj_read_bool_attr(gobj, "remember_position");
-    let items = child_nav_items(specs, (id) => {
-        let route = `${base}/${id}`;
-        return remember ? nav_route_with_tail(route, priv.remembered[id]) : route;
-    });
+    let items = child_nav_items(specs, (id) => child_nav_route(gobj, id));
 
     let i = 0;
     for(let render of renders) {
@@ -892,7 +909,10 @@ function render_child(gobj, child)
      *  level.  `chrome_depth` is how a node caps that for its corner
      *  of the tree (see resolve_chrome_depth). */
     if(chrome_visible(priv.distance, priv.chrome_depth)) {
-        render_projection(gobj, "chrome", priv.$chrome, route_of(child),
+        /*  The SAME route the item carries, or the nav has nothing to
+         *  match: it highlights by exact route.  */
+        render_projection(gobj, "chrome", priv.$chrome,
+            child_nav_route(gobj, gobj_read_attr(child, "node_id")),
             gobj_read_attr(child, "node_id"));
     }
     render_path(gobj, priv.$chrome);

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. */