@yuneta/gobj-ui 7.23.139 → 7.23.141

package/src/c_yui_treedb_topics.js

@@ -58,7 +58,12 @@ import {
 import "./c_yui_treedb_topics.css";
 
 import {yui_shell_show_error, yui_shell_show_modal, yui_shell_popup_layer} from "./shell_modals.js";
-import {yui_shell_of, yui_shell_set_sub_routes} from "./c_yui_shell.js";
+import {
+    yui_shell_of,
+    yui_shell_set_sub_routes,
+    yui_shell_navigate,
+    yui_shell_last_route_under,
+} from "./c_yui_shell.js";
 import {nodes_answer} from "./nodes_answer.js";
 import {yui_toolbar_icon} from "./yui_toolbar.js";
 
@@ -254,26 +259,28 @@ function build_ui(gobj)
 {
     let source_url = gobj_read_str_attr(gobj, "source_url") || "";
 
-    /*  The whole treedb as a graph, with NO topic focused. A card's graph
-     *  icon lands on `<graph route>/<topic>`, and that segment is a
-     *  FOCUS: going through a card was the only way in, and it always
-     *  arrived with that topic highlighted. The route is the card's
-     *  template without its `/{topic}`; a host whose template does not
-     *  end in it, or gives none, gets no button.  */
-    let routes = gobj_read_attr(gobj, "card_action_routes");
-    let graph_tpl = is_object(routes) && typeof routes.graph === "string"? routes.graph : "";
-    let graph_href = /\/\{topic\}$/.test(graph_tpl)? graph_tpl.replace(/\/\{topic\}$/, "") : "";
+    /*  The treedb as a graph, AS THE READER LEFT IT. The route is the
+     *  card template without its `/{topic}`; a host whose template does
+     *  not end in it, or gives none, gets no button. Not a fixed link:
+     *  the graph's focus lives in its url (`<graph>/<topic>`), so the
+     *  bare route took it away every time -- the click asks the shell
+     *  where the reader last was under that route (ac_open_graph).  */
+    let graph_href = graph_route_of(gobj);
     let graph_items = [];
     if(graph_href) {
         graph_items.push(
-            ['a', {class: 'button TREEDB_GRAPH_BTN',
-                   href: graph_href,
-                   style: 'margin-left:auto;',
-                   title: t('graph'), 'aria-label': t('graph'),
-                   'data-i18n-title': 'graph', 'data-i18n-aria-label': 'graph'}, [
+            ['button', {class: 'button TREEDB_GRAPH_BTN',
+                        style: 'margin-left:auto;',
+                        title: t('graph'), 'aria-label': t('graph'),
+                        'data-i18n-title': 'graph', 'data-i18n-aria-label': 'graph'}, [
                 ['span', {class: 'icon'}, [yui_toolbar_icon('yi-hexagon-nodes')]],
                 ['span', {i18n: 'graph'}, 'graph']
-            ]]
+            ], {
+                click: (evt) => {
+                    evt.stopPropagation();
+                    gobj_send_event(gobj, "EV_OPEN_GRAPH", {}, gobj);
+                }
+            }]
         );
     }
 
@@ -389,6 +396,21 @@ function build_ui(gobj)
     }
 }
 
+/************************************************************
+ *  The graph's route with no topic: the host's card template
+ *  `card_action_routes.graph` without its trailing `/{topic}`,
+ *  as a ROUTE (no `#`). "" when the host gives no such template.
+ ************************************************************/
+function graph_route_of(gobj)
+{
+    let routes = gobj_read_attr(gobj, "card_action_routes");
+    let tpl = (is_object(routes) && typeof routes.graph === "string")? routes.graph : "";
+    if(!/\/\{topic\}$/.test(tpl)) {
+        return "";
+    }
+    return tpl.replace(/\/\{topic\}$/, "").replace(/^#/, "");
+}
+
 /************************************************************
  *  Is the backend session live? The Raw JSON viewer issues a remote
  *  print-tranger, so it only makes sense with a session — the remote
@@ -2476,6 +2498,28 @@ function ac_open_json(gobj, event, kw, src)
     return 0;
 }
 
+/********************************************
+ *  Open the graph where the reader left it: its last visited
+ *  route under the graph's base -- `<graph>/<topic>` when a topic
+ *  was focused there -- or the bare base when the graph was never
+ *  opened in this page. A user move: pushed, so Back returns.
+ ********************************************/
+function ac_open_graph(gobj, event, kw, src)
+{
+    let base = graph_route_of(gobj);
+    if(!base) {
+        log_error(`${gobj_short_name(gobj)}: open graph with no graph route`);
+        return -1;
+    }
+    let shell = yui_shell_of(gobj);
+    if(!shell) {
+        log_error(`${gobj_short_name(gobj)}: open graph with no shell`);
+        return -1;
+    }
+    yui_shell_navigate(shell, yui_shell_last_route_under(shell, base), {push: true});
+    return 0;
+}
+
 /********************************************
  *  The viewer asked to load a collapsed subtree (tranger mode only):
  *  re-issue print-tranger for that path.
@@ -2556,6 +2600,7 @@ function create_gclass(gclass_name)
             ["EV_DELETE_RECORD",        ac_delete_record,           null],
             ["EV_REFRESH_TOPIC",        ac_refresh_topic,           null],
             ["EV_OPEN_JSON",            ac_open_json,               null],
+            ["EV_OPEN_GRAPH",           ac_open_graph,              null],
             ["EV_EXPAND_PATH",          ac_json_expand_path,        null],
             ["EV_JSON_CLOSED",          ac_json_closed,             null],
             ["EV_SHOW",                 ac_show,                    null],
@@ -2586,6 +2631,7 @@ function create_gclass(gclass_name)
                                     event_flag_t.EVF_NO_WARN_SUBS],
         ["EV_REFRESH_TOPIC",        0],
         ["EV_OPEN_JSON",            0],
+        ["EV_OPEN_GRAPH",           0],
         ["EV_EXPAND_PATH",          0],
         ["EV_JSON_CLOSED",          0],
         ["EV_SHOW",                 0],

package/src/treedb_fold_model.js

@@ -281,7 +281,7 @@ export function fold_build_model(descs, records, opts)
         }
     }
 
-    return {
+    let model = {
         nodes: nodes,
         groups: groups,
         topics: topics,
@@ -291,7 +291,67 @@ export function fold_build_model(descs, records, opts)
         linked: linked,         /*  Set of topics the schema hangs from main  */
         loose: loose,           /*  {topic: [key, ...]} records that should hang and do not  */
         loose_shown: loose_shown,
+        level_of: null,         /*  Map<node_key, level> of the MAIN tree, see below  */
+        levels: 0,              /*  its deepest level (0 = no tree to step through)  */
     };
+    count_levels(model);
+    return model;
+}
+
+/************************************************************
+ *  The LEVELS of the main tree: the roots of the main topic --
+ *  and of the topics hung from it, whose roots are the loose
+ *  records the reader asked for -- are level 1, their children
+ *  level 2, and so on down every hook of every topic that is not
+ *  hidden. A node reached by two paths takes the shallowest.
+ *
+ *  With no main topic every topic is a tree of its own and all
+ *  of them count. A topic the schema does not tie to the main
+ *  one is a separate tree, and has no level: the stepper of the
+ *  toolbar speaks for the main tree and nothing else, those
+ *  trees are opened by their own pills.
+ ************************************************************/
+function count_levels(model)
+{
+    let level_of = new Map();
+    let queue = [];
+    let deepest = 0;
+
+    for(let topic_name of model.topics) {
+        if(model.main_topic && !model.linked.has(topic_name)) {
+            continue;
+        }
+        let roots = model.groups.get(fold_root_group_key(topic_name)) || [];
+        for(let key of roots) {
+            if(!level_of.has(key)) {
+                level_of.set(key, 1);
+                queue.push(key);
+            }
+        }
+    }
+    let head = 0;
+    while(head < queue.length) {
+        let key = queue[head++];
+        let lv = level_of.get(key);
+        if(lv > deepest) {
+            deepest = lv;
+        }
+        let node = model.nodes.get(key);
+        if(!node) {
+            continue;
+        }
+        for(let hook of Object.keys(node.hooks)) {
+            for(let child of node.hooks[hook]) {
+                if(!level_of.has(child)) {
+                    level_of.set(child, lv + 1);
+                    queue.push(child);
+                }
+            }
+        }
+    }
+
+    model.level_of = level_of;
+    model.levels = deepest;
 }
 
 /************************************************************
@@ -565,6 +625,78 @@ export function fold_expand_to_depth(model, state, depth)
     }
 }
 
+/************************************************************
+ *  The toolbar's STEPPER over the levels of the main tree (see
+ *  count_levels): level N shows the roots and N-1 levels under
+ *  them. A level is a floor of what is open, not a picture that
+ *  replaces it:
+ *
+ *      opening to N   opens, on its first page, every hook of
+ *                     every node above level N that is folded;
+ *                     what the reader opened, and every page
+ *                     already shown, stays
+ *      closing to N   folds every hook of every node at level N
+ *                     or below, and touches nothing above it
+ *
+ *  A separate tree (a topic not tied to the main one) has no
+ *  level, so neither ever touches it.
+ ************************************************************/
+export function fold_level_clamp(model, level)
+{
+    let top = (model.levels > 0)? model.levels : 1;
+    level = Math.floor(Number(level)) || 1;
+    if(level < 1) {
+        return 1;
+    }
+    if(level > top) {
+        return top;
+    }
+    return level;
+}
+
+export function fold_open_levels(model, state, level)
+{
+    for(let [key, lv] of model.level_of) {
+        if(lv >= level) {
+            continue;
+        }
+        let node = model.nodes.get(key);
+        if(!node) {
+            continue;
+        }
+        for(let hook of Object.keys(node.hooks)) {
+            let group_key = fold_group_key(key, hook);
+            if(node.hooks[hook].length > 0 && !fold_is_open(state, group_key)) {
+                state.shown.set(group_key, state.page_size);
+            }
+        }
+    }
+}
+
+export function fold_close_levels(model, state, level)
+{
+    for(let [key, lv] of model.level_of) {
+        if(lv < level) {
+            continue;
+        }
+        let node = model.nodes.get(key);
+        if(!node) {
+            continue;
+        }
+        for(let hook of Object.keys(node.hooks)) {
+            state.shown.delete(fold_group_key(key, hook));
+        }
+    }
+}
+
+/*  From scratch: the roots of every tree on their first page, and
+ *  the main tree open down to `level`. What a load opens.  */
+export function fold_expand_to_level(model, state, level)
+{
+    fold_collapse_all(model, state);
+    fold_open_levels(model, state, fold_level_clamp(model, level));
+}
+
 /************************************************************
  *  The set of node keys on screen, from the roots down through
  *  every open group -- and only through open groups whose parent

package/src/treedb_fold_model.test.js

@@ -26,6 +26,11 @@ import {
     fold_split_group_key,
     fold_main_topic,
     fold_group_shown,
+    fold_is_open,
+    fold_level_clamp,
+    fold_open_levels,
+    fold_close_levels,
+    fold_expand_to_level,
 } from "./treedb_fold_model.js";
 
 const places_desc = {
@@ -323,6 +328,81 @@ describe("depth", () => {
     });
 });
 
+describe("levels of the main tree (the toolbar's stepper)", () => {
+    test("levels count from the main topic's roots, down every hook", () => {
+        let m = fold_build_model(descs, make_records(30));
+        /*  es 1, norte/sur 2, nave1 3, its devices and c1 4  */
+        expect(m.levels).toBe(4);
+        expect(m.level_of.get(K("places", "es"))).toBe(1);
+        expect(m.level_of.get(K("places", "nave1"))).toBe(3);
+        /*  d0 hangs from nave1 (3) and c1 (4): the shallowest wins  */
+        expect(m.level_of.get(K("devices", "d0"))).toBe(4);
+        /*  device_groups is not tied to places: a tree of its own, no level  */
+        expect(m.level_of.has(K("device_groups", "g1"))).toBe(false);
+    });
+
+    test("a hidden topic takes its levels with it", () => {
+        let m = fold_build_model(descs, make_records(30), {hidden_topics: ["devices", "controllers"]});
+        expect(m.levels).toBe(3);
+        let m0 = fold_build_model({}, {});
+        expect(m0.levels).toBe(0);
+        expect(fold_level_clamp(m0, 5)).toBe(1);
+    });
+
+    test("clamp keeps a level between 1 and the deepest one", () => {
+        let m = fold_build_model(descs, make_records(3));
+        expect(fold_level_clamp(m, 0)).toBe(1);
+        expect(fold_level_clamp(m, 3)).toBe(3);
+        expect(fold_level_clamp(m, 9)).toBe(4);
+        expect(fold_level_clamp(m, "2")).toBe(2);
+    });
+
+    test("level 1 is the roots of every tree, and each step opens one more", () => {
+        let m = fold_build_model(descs, make_records(30));
+        let st = fold_new_state(24);
+        fold_expand_to_level(m, st, 1);
+        expect([...fold_visible_set(m, st)].sort())
+            .toEqual([K("device_groups", "g1"), K("places", "es")]);
+        fold_open_levels(m, st, 2);
+        let v = fold_visible_set(m, st);
+        expect(v.has(K("places", "norte"))).toBe(true);
+        expect(v.has(K("places", "nave1"))).toBe(false);
+        fold_open_levels(m, st, 3);
+        expect(fold_visible_set(m, st).has(K("places", "nave1"))).toBe(true);
+        expect(fold_visible_set(m, st).has(K("devices", "d0"))).toBe(false);
+        fold_open_levels(m, st, 4);
+        v = fold_visible_set(m, st);
+        expect(v.has(K("devices", "d23"))).toBe(true);
+        expect(v.has(K("devices", "d24"))).toBe(false);  /*  one page  */
+        expect(v.has(K("controllers", "c1"))).toBe(true);
+    });
+
+    test("opening keeps the pages already shown; closing folds only from its level down", () => {
+        let m = fold_build_model(descs, make_records(30));
+        let st = fold_new_state(24);
+        fold_expand_to_level(m, st, 4);
+        let g = fold_group_key(K("places", "nave1"), "devices");
+        fold_show_more(m, st, g);                           /*  30  */
+        fold_open_levels(m, st, 4);
+        expect(fold_group_shown(m, st, g)).toBe(30);
+        fold_close_levels(m, st, 3);
+        let v = fold_visible_set(m, st);
+        expect(v.has(K("places", "nave1"))).toBe(true);     /*  level 3 stays  */
+        expect(v.has(K("devices", "d0"))).toBe(false);      /*  its hooks folded  */
+        expect(v.has(K("controllers", "c1"))).toBe(false);
+        expect(fold_is_open(st, fold_group_key(K("places", "norte"), "places"))).toBe(true);
+    });
+
+    test("closing does not reopen what the reader folded above the level", () => {
+        let m = fold_build_model(descs, make_records(3));
+        let st = fold_new_state(24);
+        fold_expand_to_level(m, st, 4);
+        fold_toggle(m, st, fold_group_key(K("places", "es"), "places"));   /*  fold es  */
+        fold_close_levels(m, st, 3);
+        expect(fold_is_open(st, fold_group_key(K("places", "es"), "places"))).toBe(false);
+    });
+});
+
 describe("toggle and pages", () => {
     test("a folded group opens on its first page and closes again", () => {
         let m = fold_build_model(descs, make_records(30));