@yuneta/gobj-ui 2.0.0 → 2.2.3

package/{c_yui_shell.js → src/c_yui_shell.js}

@@ -30,6 +30,7 @@ import {
     gobj_create, gobj_destroy,
     gobj_start, gobj_stop,
     gobj_publish_event,
+    gobj_send_event,
     gobj_subscribe_event,
     gobj_read_attr, gobj_read_pointer_attr, gobj_write_attr,
     createElement2, empty_string, is_object, is_array, is_string,
@@ -495,8 +496,8 @@ function build_ui(gobj)
     let shell_cfg = config.shell || {};
 
     /*  Root */
-    let $root = createElement2(
-        ["div", {class: "yui-shell"}]
+    let $container = createElement2(
+        ["div", {class: "C_YUI_SHELL yui-shell"}]
     );
 
     /*  Build layers */
@@ -504,7 +505,7 @@ function build_ui(gobj)
         let $layer = createElement2(
             ["div", {class: `yui-layer yui-layer-${id}`, style: `z-index:${z};`}]
         );
-        $root.appendChild($layer);
+        $container.appendChild($layer);
         priv.layers[id] = $layer;
     }
 
@@ -561,9 +562,9 @@ function build_ui(gobj)
 
     /*  Mount */
     let $mount = gobj_read_attr(gobj, "mount_element") || document.body;
-    $mount.appendChild($root);
+    $mount.appendChild($container);
 
-    gobj_write_attr(gobj, "$container", $root);
+    gobj_write_attr(gobj, "$container", $container);
 }
 
 /************************************************************
@@ -1049,10 +1050,11 @@ function navigate_to(gobj, route)
     let prev_route = stage.active_route;
     if(prev_route && prev_route !== matched_route) {
         let prev_gobj = stage.items[prev_route];
+        let $prev = null;
         if(prev_gobj) {
-            let $c = gobj_read_attr(prev_gobj, "$container");
-            if($c) {
-                $c.classList.add("is-hidden");
+            $prev = gobj_read_attr(prev_gobj, "$container");
+            if($prev) {
+                $prev.classList.add("is-hidden");
             }
         }
         /*  lazy_destroy: drop previous on exit */
@@ -1064,6 +1066,14 @@ function navigate_to(gobj, route)
             } catch(e) {
                 log_warning(`C_YUI_SHELL: lazy_destroy of '${prev_route}' failed: ${e}`);
             }
+            /*  The shell appended $container on mount (build_view_gobj), so
+             *  remove it symmetrically here: a view that doesn't remove its
+             *  own container in mt_destroy would otherwise leak a hidden
+             *  copy in the stage on every revisit — and any fixed DOM id
+             *  inside it then shadows the fresh instance's.  */
+            if($prev && $prev.parentNode) {
+                $prev.parentNode.removeChild($prev);
+            }
             delete stage.items[prev_route];
         }
     }
@@ -2085,6 +2095,151 @@ function ac_drawer_close_requested(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  Close 'x' on a closable tab (from a C_YUI_NAV child).  The
+ *  shell does not own the item set — re-publish so the app (which
+ *  owns the underlying data, e.g. the selected-nodes list) removes
+ *  the item and calls yui_shell_set_submenu() with the new list.
+ ************************************************************/
+function ac_nav_item_close(gobj, event, kw, src)
+{
+    gobj_publish_event(gobj, "EV_NAV_ITEM_CLOSE", {
+        item_id: (kw && kw.item_id) || "",
+        route:   (kw && kw.route) || "",
+        menu_id: (kw && kw.menu_id) || "",
+        zone:    (kw && kw.zone) || ""
+    });
+    return 0;
+}
+
+/************************************************************
+ *  Runtime nav API (Yuneta philosophy: the app_config path is the
+ *  first, startup caller of the very same machinery — build_item_index
+ *  + instantiate + set items; this is its dynamic counterpart).
+ *
+ *  yui_shell_set_submenu(shell, parent_item_id, items) replaces the
+ *  items of a primary item's submenu (its secondary nav) at runtime
+ *  and re-registers their routes so navigation resolves.  Item
+ *  descriptors may carry { id, name, icon, route, class, closable,
+ *  target:{stage,gclass,kw,lifecycle} }.  Routes present before but
+ *  absent now are pruned (index entry removed, mounted view destroyed).
+ ************************************************************/
+function find_secondary_nav(priv, parent_item_id)
+{
+    let suffix = "." + parent_item_id;
+    for(let nav of priv.navs) {
+        let menu_id = gobj_read_attr(nav, "menu_id") || "";
+        if(menu_id.startsWith("secondary.") && menu_id.endsWith(suffix)) {
+            return nav;
+        }
+    }
+    return null;
+}
+
+function find_primary_item(shell_gobj, menu_id, item_id)
+{
+    let config = gobj_read_attr(shell_gobj, "config") || {};
+    let menu = (config.menu && config.menu[menu_id]) || null;
+    if(menu && is_array(menu.items)) {
+        for(let it of menu.items) {
+            if(it && it.id === item_id) {
+                return it;
+            }
+        }
+    }
+    return null;
+}
+
+/*  Drop a route from the index and destroy any mounted view for it. */
+function prune_route(shell_gobj, route)
+{
+    let priv = gobj_read_attr(shell_gobj, "priv");
+    delete priv.item_index[route];
+    for(let stage_name in priv.stages) {
+        let stage = priv.stages[stage_name];
+        let view = stage.items && stage.items[route];
+        if(!view) {
+            continue;
+        }
+        let $c = gobj_read_attr(view, "$container");
+        if($c) {
+            $c.classList.add("is-hidden");
+        }
+        try {
+            gobj_stop(view);
+            gobj_destroy(view);
+        } catch(e) {
+            log_warning(`C_YUI_SHELL: prune_route destroy '${route}' failed: ${e}`);
+        }
+        delete stage.items[route];
+        if(stage.active_route === route) {
+            stage.active_route = "";
+        }
+    }
+}
+
+function yui_shell_set_submenu(shell_gobj, parent_item_id, items)
+{
+    let priv = gobj_read_attr(shell_gobj, "priv");
+    if(!priv) {
+        return -1;
+    }
+    let nav = find_secondary_nav(priv, parent_item_id);
+    if(!nav) {
+        log_warning(
+            `C_YUI_SHELL: yui_shell_set_submenu — no secondary nav for '${parent_item_id}'`
+        );
+        return -1;
+    }
+    items = is_array(items) ? items : [];
+
+    /*  Resolve owning menu_id + primary item from the nav's synthesized
+     *  id "secondary.<menu_id>.<parent_item_id>", so registered routes
+     *  highlight correctly and keep this secondary nav visible. */
+    let nav_menu_id = gobj_read_attr(nav, "menu_id") || "";
+    let m = /^secondary\.(.+)\.([^.]+)$/.exec(nav_menu_id);
+    let owning_menu_id = m ? m[1] : "";
+    let parent_item = find_primary_item(shell_gobj, owning_menu_id, parent_item_id);
+
+    /*  Track the routes THIS submenu owns dynamically, so we only prune
+     *  our own previous routes — never the static config routes (e.g. a
+     *  base "/console/agent" landing declared in app_config).  */
+    priv.dynamic_routes = priv.dynamic_routes || {};
+    let prev_routes = priv.dynamic_routes[parent_item_id] || [];
+    let new_routes = [];
+    let new_set = {};
+    for(let it of items) {
+        if(it && it.route) {
+            new_routes.push(it.route);
+            new_set[it.route] = true;
+        }
+    }
+    for(let route of prev_routes) {
+        if(!new_set[route]) {
+            prune_route(shell_gobj, route);
+        }
+    }
+
+    /*  Register / refresh routes for the new items. */
+    for(let it of items) {
+        if(!it || !it.route) {
+            continue;
+        }
+        priv.item_index[it.route] = {
+            item: it,
+            parent_item: parent_item,
+            stage: (it.target && it.target.stage) || null,
+            target: it.target || null,
+            menu_id: owning_menu_id
+        };
+    }
+    priv.dynamic_routes[parent_item_id] = new_routes;
+
+    /*  Push the new items into the nav (rebuilds its DOM in place). */
+    gobj_send_event(nav, "EV_SET_ITEMS", {items: items}, shell_gobj);
+    return 0;
+}
+
 /***************************************************************
  *              FSM
  ***************************************************************/
@@ -2113,13 +2268,19 @@ function create_gclass(gclass_name)
             ["EV_NAV_CLICKED",            ac_nav_clicked,            null],
             /*  Drawer backdrop close (from a C_YUI_NAV child whose
              *  layout is "drawer"). */
-            ["EV_DRAWER_CLOSE_REQUESTED", ac_drawer_close_requested, null]
+            ["EV_DRAWER_CLOSE_REQUESTED", ac_drawer_close_requested, null],
+            /*  Close 'x' on a closable tab (from a child C_YUI_NAV);
+             *  re-published for the app. */
+            ["EV_NAV_ITEM_CLOSE",         ac_nav_item_close,         null]
         ]]
     ];
 
     const event_types = [
         ["EV_NAV_CLICKED",            0],
         ["EV_DRAWER_CLOSE_REQUESTED", 0],
+        ["EV_NAV_ITEM_CLOSE",         event_flag_t.EVF_OUTPUT_EVENT
+                                     |event_flag_t.EVF_PUBLIC_EVENT
+                                     |event_flag_t.EVF_NO_WARN_SUBS],
         /*  Audit witness: every navigation attempt publishes this BEFORE
          *  any work is done, so the FSM trace records intent regardless
          *  of whether the route resolves successfully.  Pairs with
@@ -2269,11 +2430,11 @@ function yui_shell_set_connection_state(shell_gobj, connected)
  ************************************************************/
 function yui_shell_set_toolbar_item_icon(shell_gobj, item_id, icon_class)
 {
-    let $root = gobj_read_attr(shell_gobj, "$container");
-    if(!$root || empty_string(item_id) || empty_string(icon_class)) {
+    let $container = gobj_read_attr(shell_gobj, "$container");
+    if(!$container || empty_string(item_id) || empty_string(icon_class)) {
         return;
     }
-    let $i = $root.querySelector(
+    let $i = $container.querySelector(
         `[data-toolbar-item-id="${item_id}"] .icon i`
     );
     if($i) {
@@ -2317,5 +2478,6 @@ export {
     yui_shell_set_translator,
     yui_shell_set_connection_state,
     yui_shell_set_toolbar_item_icon,
-    yui_shell_close_dropdown
+    yui_shell_close_dropdown,
+    yui_shell_set_submenu
 };

package/{c_yui_tabs.js → src/c_yui_tabs.js}

@@ -183,7 +183,7 @@ function build_ui(gobj)
     let tabs_style = gobj_read_attr(gobj, "tabs_style");
     let $container = createElement2(
         // Don't use is-flex, don't work well with is-hidden
-        ['div', {class: `yui_tabs`, style: 'height:100%; display:flex; flex-direction:column;'}, [
+        ['div', {class: `C_YUI_TABS`, style: 'height:100%; display:flex; flex-direction:column;'}, [
             ['div', {class: 'is-flex-grow-0'}, [
                 ['div', {class: `tabs ${tabs_style}`, style: ''}, [
                     ['ul', {}]

package/{c_yui_treedb_graph.js → src/c_yui_treedb_graph.js}

@@ -319,7 +319,7 @@ function build_ui(gobj)
 
     let $container = createElement2(
         // Don't use is-flex, don't work well with is-hidden
-        ['div', {class: 'graphs', style: `height:100%; display:flex; flex-direction:column;`}, [
+        ['div', {class: 'C_YUI_TREEDB_GRAPH', style: `height:100%; display:flex; flex-direction:column;`}, [
             ['div', {class: 'is-flex-grow-0 is-flex is-align-items-center toolbar_yui_treedb_graph'}, $toolbar],
             ['div', {class: `is-flex-grow-1 ${padding}`, style: 'height:100%; min-height:0; overflow:hidden;'}, [
                 ['div', {id: priv.canvas_id, class: `graph-container`, style: 'height:100%; min-height:0;border: 1px solid var(--bulma-border-weak);border-radius:0.2rem;'}, [
@@ -333,6 +333,28 @@ function build_ui(gobj)
     return $container;
 }
 
+/************************************************************
+ *   Show a non-blocking inline error banner at the top of the view
+ *   (used when the treedb schema `descs` cannot load). Reuses a single
+ *   banner so retries don't stack.
+ ************************************************************/
+function show_load_error(gobj, message)
+{
+    let $container = gobj_read_attr(gobj, "$container");
+    if(!$container) {
+        return;
+    }
+    let $err = $container.querySelector(".treedb-load-error");
+    if(!$err) {
+        $err = createElement2(
+            ["div", {class: "notification is-danger is-light m-3 treedb-load-error"}, []]
+        );
+        $container.insertBefore($err, $container.firstChild);
+    }
+    let treedb = gobj_read_attr(gobj, "treedb_name") || "";
+    $err.textContent = (treedb ? `${treedb}: ` : "") + (message || "cannot load treedb");
+}
+
 /************************************************************
  *   Destroy UI
  ************************************************************/
@@ -908,18 +930,22 @@ function ac_mt_command_answer(gobj, event, kw, src)
         log_error(e);
         return;
     }
-    if(result < 0) {
-        display_error_message(
-            "Error",
-            t(comment)
-        );
-        // HACK don't return, pass errors when need it.
-    }
-
     let __command__ = msg_iev_get_stack(gobj, kw, "command_stack", true);
     let command = kw_get_str(gobj, __command__, "command", "", kw_flag_t.KW_REQUIRED);
     let kw_command = kw_get_dict(gobj, __command__, "kw", {}, kw_flag_t.KW_REQUIRED);
 
+    if(result < 0) {
+        if(command === "descs") {
+            /*  The schema couldn't load (not a treedb, no authz for it, backend
+             *  down…). Show an inline banner in the view rather than a blocking
+             *  app-modal that wedges the whole SPA behind an empty tab. */
+            show_load_error(gobj, t(comment));
+        } else {
+            display_error_message("Error", t(comment));
+        }
+        // HACK don't return for non-descs, pass errors when need it.
+    }
+
     switch(command) {
         case "descs":
             if(result >= 0) {

package/{c_yui_treedb_topic_with_form.js → src/c_yui_treedb_topic_with_form.js}

@@ -506,7 +506,7 @@ function build_ui(gobj)
      *----------------------------------------------*/
     let table_id = gobj_read_str_attr(gobj, "table_id");
     let $container = createElement2(
-        ['div', {class: 'container-treedb-topic-with-form', style: 'height:100%;'}, [
+        ['div', {class: 'C_YUI_TREEDB_TOPIC_WITH_FORM', style: 'height:100%;'}, [
             ['div', {class: 'toolbar_tabulator_table m-1', style: 'display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;'}],
             ['div',
                 {

package/{c_yui_treedb_topics.js → src/c_yui_treedb_topics.js}

@@ -216,7 +216,7 @@ function build_ui(gobj)
      *  Layout Schema
      *----------------------------------------------*/
     let $container = createElement2(
-        ['div', {class: `${gobj_read_attr(gobj, "treedb_name")}`, style: 'height:100%; display:flex; flex-direction:column;'}, [
+        ['div', {class: `C_YUI_TREEDB_TOPICS ${gobj_read_attr(gobj, "treedb_name")}`, style: 'height:100%; display:flex; flex-direction:column;'}, [
             ['div', {class: 'is-flex-grow-0'}, [
                 ['div', {class: `tabs ${gobj_read_attr(gobj, "tabs_style")}`, style: ''}, [
                     ['ul', {}]
@@ -229,6 +229,28 @@ function build_ui(gobj)
     gobj_write_attr(gobj, "$container", $container);
 }
 
+/************************************************************
+ *   Show a non-blocking inline error banner at the top of the view
+ *   (used when the treedb schema `descs` cannot load). Reuses a single
+ *   banner so retries don't stack.
+ ************************************************************/
+function show_load_error(gobj, message)
+{
+    let $container = gobj_read_attr(gobj, "$container");
+    if(!$container) {
+        return;
+    }
+    let $err = $container.querySelector(".treedb-load-error");
+    if(!$err) {
+        $err = createElement2(
+            ["div", {class: "notification is-danger is-light m-3 treedb-load-error"}, []]
+        );
+        $container.insertBefore($err, $container.firstChild);
+    }
+    let treedb = gobj_read_attr(gobj, "treedb_name") || "";
+    $err.textContent = (treedb ? `${treedb}: ` : "") + (message || "cannot load treedb");
+}
+
 /************************************************************
  *   Destroy UI
  ************************************************************/
@@ -786,16 +808,22 @@ function ac_mt_command_answer(gobj, event, kw, src)
         log_error(e);
         return;
     }
-    if(result < 0) {
-        display_error_message(
-            "Error",
-            t(comment)
-        );
-    }
-
     let __command__  = msg_iev_get_stack(gobj, kw, "command_stack", true);
     let command = kw_get_str(gobj, __command__, "command", "", kw_flag_t.KW_REQUIRED);
     let kw_command = kw_get_dict(gobj, __command__, "kw", {}, kw_flag_t.KW_REQUIRED);
+
+    if(result < 0) {
+        if(command === "descs") {
+            /*  The schema couldn't load (not a treedb, no authz for it, backend
+             *  down…). Show an inline banner in the view rather than a blocking
+             *  app-modal that wedges the whole SPA behind an empty tab. */
+            show_load_error(gobj, t(comment));
+        } else {
+            display_error_message("Error", t(comment));
+        }
+        return 0;
+    }
+
     switch(command) {
         case "descs":
             if(result >= 0) {

package/{c_yui_uplot.js → src/c_yui_uplot.js}

@@ -145,7 +145,7 @@ function build_ui(gobj)
         $container = createElement2(
             ['div',
                 {
-                    class: '',
+                    class: 'C_YUI_UPLOT',
                     style: 'overflow:auto;'
                 }
             ]