@yuneta/gobj-ui 7.23.19 → 7.23.21

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -80,6 +80,7 @@ import {
     set_cancel_state,
     set_active_state,
     set_pressed_state,
+    getPointPosition,
     getStrokeColor,
 } from "./lib_graph.js";
 
@@ -1598,59 +1599,6 @@ function configure_behaviour(gobj)
     graph_write_behaviors(gobj, behaviors);
 }
 
-/************************************************************
- * Returns the proportional position (between 0 and 1) of a specific point,
- * centered and spaced with margins.
- *
- * index - Index of the point (0 to count-1)
- * count - Total number of points
- * margin - Total margin space (default 0.2 means 10% on each end)
- ************************************************************/
-function getPointPosition(count, index, margin = 0.2)
-{
-    if(count <= 0 || index < 0 || index >= count) {
-        log_error("Invalid count or index");
-        return 0.5;
-    }
-
-    const start = margin / 2;
-    const end = 1 - margin / 2;
-    const step = (end - start) / count;
-
-    return start + index * step + step / 2;
-}
-
-/************************************************************
- *  Count hooks and fkeys in topic desc, classify node type
- ************************************************************/
-function calculate_hooks_fkeys_counter(desc)
-{
-    let cols = desc.cols;
-    desc.hooks_counter = 0;
-    desc.fkeys_counter = 0;
-
-    for(let i=0; i<cols.length; i++) {
-        let col = cols[i];
-        const field_desc = treedb_get_field_desc(col);
-        switch(field_desc.type) {
-            case "hook":
-                desc.hooks_counter++;
-                break;
-            case "fkey":
-                desc.fkeys_counter++;
-                break;
-        }
-    }
-
-    if(desc.hooks_counter === 0) {
-        desc.node_treedb_type = 'child';
-    } else if(desc.fkeys_counter === 0) {
-        desc.node_treedb_type = 'extended';
-    } else {
-        desc.node_treedb_type = 'hierarchical';
-    }
-}
-
 /************************************************************
  *  Build ports for a topic desc
  ************************************************************/

package/src/c_yui_json_graph.js

@@ -72,6 +72,12 @@ import {
 import { ensure_drag_canvas_patch } from "./g6_drag_canvas_touch.js";
 import { ensure_pinch_zoom_patch } from "./g6_touch_gestures.js";
 import { yui_is_dark, yui_theme_now, yui_watch_theme } from "./yui_theme.js";
+import { getPointPosition } from "./lib_graph.js";
+import {
+    is_pure_collection,
+    has_branch,
+    count_branches,
+} from "./json_view_helpers.js";
 
 /***************************************************************
  *              Constants
@@ -767,10 +773,22 @@ function build_graph(gobj)
     }
 }
 
+/************************************************************
+ *  The port a container key opens on its card.
+ *
+ *  Prefixed so it can never collide with anything G6 puts in
+ *  the same namespace, and stringified because an array index
+ *  is a number and a port key is a string.
+ ************************************************************/
+function port_key(key)
+{
+    return "p_" + String(key);
+}
+
 /************************************************************
  *  Build cell value HTML (matching old mx_json_viewer colors)
  ************************************************************/
-function build_cell_html(key, value, type, dark, matched)
+function build_cell_html(key, value, type, dark, matched, fold)
 {
     /*
      *  A match is a LIGHT chip on BOTH themes, so what sits on it is
@@ -813,6 +831,19 @@ function build_cell_html(key, value, type, dark, matched)
     let row = `<span style="color:${key_color}">• ${escapeHtml(String(key))}: </span>` +
               `<span style="color:${color}">${display_value}</span>`;
 
+    /*
+     *  A fold chip ON THE ROW, for a container that gets no card of its
+     *  own: the control belongs next to the key it folds, which is
+     *  where a tree puts it, and it is the only handle those children
+     *  have -- their parent's header chip folds every branch it has,
+     *  not this one.
+     */
+    if(fold) {
+        row += `<span style="margin-left:8px;">` +
+               fold_toggle_html(fold.path, true, fold.folded, fold.branches, fold.colors) +
+               `</span>`;
+    }
+
     if(matched) {
         /*  The highlight is baked into the card's MARKUP and not set as
          *  a G6 node state: the key shape of an `html` node is a DOM
@@ -963,7 +994,7 @@ function get_group_label(path)
 /************************************************************
  *  Recursively build nodes and edges from JSON
  ************************************************************/
-function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
+function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
 {
     let group_id = gen_node_id(gobj);
     let is_dict = is_object(kw);
@@ -985,6 +1016,10 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
     let pending_complex = [];
     let card_matched = false;
 
+    let colors = json_card_style(
+        is_dict ? GROUP_COLORS.dict : GROUP_COLORS.list, dark
+    );
+
     let entries = is_dict ? Object.entries(kw) : kw.map((v, i) => [i, v]);
 
     for(let [key, value] of entries) {
@@ -996,32 +1031,72 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
         }
 
         /*
-         *  A non-empty container gets a CARD OF ITS OWN, so a row for it
-         *  here would be the same thing drawn twice -- and the second
-         *  drawing is the one that does not scale.  An array of 14 dicts
-         *  printed fourteen `0: {13}` rows above fourteen cards saying
-         *  the same; an array of a thousand prints a thousand-row card
-         *  nobody can read, beside the thousand cards it duplicates.
+         *  EVERY key is a row, containers included: `cols` is one key of
+         *  the topic dict exactly like `pkey` and `tkey`, and a drawing
+         *  that leaves it out of the card does not say what the document
+         *  says.
          *
-         *  What is left in the body is exactly the SCALARS: what this
-         *  node IS.  What it CONTAINS is the edges, and the count now
-         *  rides in the header for the case where the body comes out
-         *  empty.
+         *  What a container key does NOT get is its contents repeated
+         *  underneath it -- the row says `[14]` and the fourteen cards
+         *  say the rest. That is the part which does not scale: an array
+         *  of a thousand dicts would otherwise print a thousand-row card
+         *  beside the thousand cards it duplicates.
          */
-        if((is_object(value) && json_object_size(value) > 0) ||
-           (is_array(value) && value.length > 0)) {
-            pending_complex.push({key: key, value: value});
-            continue;
+        let fold = null;
+        if(has_branch(value)) {
+            pending_complex.push({key: key, value: value, port: port_key(key)});
+
+            /*
+             *  A child that gets no card of its own is folded from HERE
+             *  or from nowhere.
+             */
+            if(is_pure_collection(value)) {
+                let child_path = add_segment(path, key);
+                fold = {
+                    path: child_path,
+                    folded: priv.collapsed.has(child_path),
+                    branches: count_branches(value),
+                    colors: colors,
+                };
+            }
         }
 
-        lines.push(build_cell_html(key, value, type, dark, matched));
+        lines.push(build_cell_html(key, value, type, dark, matched, fold));
     }
 
-    let label = get_group_label(path) || (is_dict ? "{}" : "[]");
-    if(pending_complex.length > 0) {
-        label += is_dict? ` {${pending_complex.length}}`: ` [${pending_complex.length}]`;
+    /*
+     *  A pure collection is not drawn: its row above names it and its
+     *  children hang from THIS card's parent. The root always gets a
+     *  card, or a document that is a plain list of records would have
+     *  nothing to hang anything from.
+     */
+    if(parent_id && is_pure_collection(kw)) {
+        if(priv.collapsed.has(path)) {
+            return parent_id;
+        }
+        for(let pending of pending_complex) {
+            /*
+             *  `parent_port` and not one of ours: this collection has no
+             *  card, so the port its row opened in the PARENT is the one
+             *  every one of these lines leaves from -- fourteen columns
+             *  out of the single `cols` port, which is what the document
+             *  says and what the reader traces back.
+             */
+            build_json_nodes(
+                gobj,
+                add_segment(path, pending.key),
+                pending.value,
+                nodes,
+                edges,
+                parent_id,
+                parent_port
+            );
+        }
+        return parent_id;
     }
 
+    let label = get_group_label(path) || (is_dict ? "{}" : "[]");
+
     /*
      *  Folded: keep the card, drop the branch, and SAY how much went
      *  with it.  A cut that is not marked reads as a document that ends
@@ -1032,9 +1107,6 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
      */
     let foldable = pending_complex.length > 0;
     let folded = foldable && priv.collapsed.has(path);
-    let colors = json_card_style(
-        is_dict ? GROUP_COLORS.dict : GROUP_COLORS.list, dark
-    );
     let border_color = card_matched? (dark? "#ffb300": "#ff8f00"): colors.border;
     let border_width = card_matched? 2: 1;
 
@@ -1069,6 +1141,38 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
     ${content_html}
 </div>`;
 
+    /*
+     *  ONE PORT PER CONTAINER KEY, and every line leaves from its own.
+     *
+     *  Without them each card was a single anchor: fourteen lines came
+     *  out of one point, and which row a line belonged to was a guess
+     *  the reader had to make from where it landed. A port makes the row
+     *  the ORIGIN, which is the same thing the treedb graph does with a
+     *  hook column and the reason `getPointPosition` is now shared.
+     *
+     *  On the BOTTOM edge because the layouts put children below, and
+     *  exactly ON it (`y = 1`) rather than inside: an html node draws its
+     *  HTML in a DOM layer above the canvas, so a port fully inside the
+     *  box would be painted under the card and never seen. Half of it
+     *  sticks out.
+     *
+     *  Coloured by what the row LEADS TO -- a dict or a list -- which is
+     *  the one thing the port can say that the row does not.
+     */
+    let ports = [];
+    for(let i = 0; i < pending_complex.length; i++) {
+        let pending = pending_complex[i];
+        let child_colors = json_card_style(
+            is_object(pending.value)? GROUP_COLORS.dict: GROUP_COLORS.list, dark
+        );
+        ports.push({
+            key: pending.port,
+            placement: [getPointPosition(pending_complex.length, i), 1],
+            fill: child_colors.border,
+            stroke: colors.border,
+        });
+    }
+
     let node = {
         id: group_id,
         type: 'html',
@@ -1081,22 +1185,30 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
             size: [min_width, 24 + lines.length * 22],
             dx: -(min_width / 2),
             dy: -((24 + lines.length * 22) / 2),
+            port: ports.length > 0,
+            ports: ports,
+            portR: 4,
+            portLineWidth: 1,
         },
     };
     nodes.push(node);
 
     /*
-     *  Edge from parent to this group
+     *  Edge from parent to this group, out of the port its key opened.
      */
     if(parent_id) {
-        edges.push({
+        let edge = {
             source: parent_id,
             target: group_id,
             style: {
                 stroke: colors.border,
                 lineWidth: 1,
             }
-        });
+        };
+        if(parent_port) {
+            edge.style.sourcePort = parent_port;
+        }
+        edges.push(edge);
     }
 
     /*
@@ -1112,7 +1224,8 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
             pending.value,
             nodes,
             edges,
-            group_id
+            group_id,
+            pending.port
         );
     }
 
@@ -1190,8 +1303,11 @@ function load_json(gobj)
 
 /************************************************************
  *  Every path that HAS a branch to fold, in the same recursion
- *  build_json_nodes uses — so "collapse all" can never name a
- *  card that does not exist.  The root is excluded: folding it
+ *  build_json_nodes uses — so "collapse all" can never name
+ *  something with no handle.  The handle is a card's header chip
+ *  for a container that gets a card, and the chip on its ROW in
+ *  the parent for a pure collection, which gets none; both are
+ *  keyed by this same path.  The root is excluded: folding it
  *  would leave an empty canvas.
  ************************************************************/
 function collect_foldable_paths(value, path, out, is_root)
@@ -1202,20 +1318,21 @@ function collect_foldable_paths(value, path, out, is_root)
         return false;
     }
 
-    let has_branch = false;
+    /*  `found_branch` and not `has_branch`: that name belongs to the
+     *  helper above, and a local would shadow it here.  */
+    let found_branch = false;
     let entries = is_dict ? Object.entries(value) : value.map((v, i) => [i, v]);
     for(let [key, child] of entries) {
-        if((is_object(child) && json_object_size(child) > 0) ||
-           (is_array(child) && child.length > 0)) {
-            has_branch = true;
+        if(has_branch(child)) {
+            found_branch = true;
             collect_foldable_paths(child, add_segment(path, key), out, false);
         }
     }
 
-    if(has_branch && !is_root) {
+    if(found_branch && !is_root) {
         out.push(path);
     }
-    return has_branch;
+    return found_branch;
 }
 
 /************************************************************

package/src/json_view_helpers.js

@@ -314,3 +314,70 @@ export function container_label(value, max_chars)
     }
     return text;
 }
+
+
+/************************************************************
+ *   A dict, in the JSON sense: not an array and not null.
+ ************************************************************/
+function is_plain_object(v)
+{
+    return v !== null && typeof v === "object" && !Array.isArray(v);
+}
+
+/************************************************************
+ *  Does this container hold ONLY other containers?
+ *
+ *  Such a value is not a thing, it is a LIST of things -- and a
+ *  list is fully described by the row that names it in its
+ *  parent, plus the edges to what it holds.  Drawing it as a
+ *  card of its own put a node in the middle of the graph with no
+ *  data in it, saying nothing the parent's row did not already
+ *  say, and pushed everything below it one level down.
+ *
+ *  An EMPTY container inside counts as content: `{0}` is
+ *  something the card has to show, and there is no child card
+ *  to show it instead.
+ ************************************************************/
+export function is_pure_collection(value)
+{
+    let entries = is_plain_object(value)? Object.entries(value)
+                : Array.isArray(value)? value.map((v, i) => [i, v])
+                : [];
+
+    if(entries.length === 0) {
+        return false;
+    }
+    for(let [, v] of entries) {
+        if(!has_branch(v)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+/************************************************************
+ *  A value that gets a card, or children, of its own.
+ ************************************************************/
+export function has_branch(value)
+{
+    return (is_plain_object(value) && Object.keys(value).length > 0) ||
+           (Array.isArray(value) && value.length > 0);
+}
+
+/************************************************************
+ *  How many branches a container has, which is what the fold
+ *  chip counts.
+ ************************************************************/
+export function count_branches(value)
+{
+    let entries = is_plain_object(value)? Object.values(value)
+                : Array.isArray(value)? value
+                : [];
+    let n = 0;
+    for(let v of entries) {
+        if(has_branch(v)) {
+            n++;
+        }
+    }
+    return n;
+}

package/src/json_view_helpers.test.js

@@ -18,6 +18,9 @@ import {
     json_text_dump,
     pick_view_mode,
     container_label,
+    is_pure_collection,
+    has_branch,
+    count_branches,
 } from "./json_view_helpers.js";
 
 
@@ -243,3 +246,67 @@ test("container_label: cut at max_chars, and said with an ellipsis", () => {
     expect(container_label({id: uuid}, 0)).toBe(uuid);
     expect(container_label({id: uuid}, undefined)).toBe(uuid);
 });
+
+/***************************************************************
+ *      has_branch() / count_branches() / is_pure_collection()
+ ***************************************************************/
+test("has_branch: only a NON-EMPTY container branches", () => {
+    expect(has_branch({a: 1})).toBe(true);
+    expect(has_branch([1])).toBe(true);
+    expect(has_branch({})).toBe(false);
+    expect(has_branch([])).toBe(false);
+    expect(has_branch("x")).toBe(false);
+    expect(has_branch(0)).toBe(false);
+    expect(has_branch(null)).toBe(false);
+});
+
+test("count_branches: counts what gets a card, not what is there", () => {
+    expect(count_branches({a: 1, b: {}, c: {x: 1}, d: [1]})).toBe(2);
+    expect(count_branches([{}, [], {a: 1}])).toBe(1);
+    expect(count_branches({a: 1})).toBe(0);
+    expect(count_branches("x")).toBe(0);
+});
+
+test("is_pure_collection: a LIST of things, not a thing", () => {
+    /*  Every entry a container with something in it. */
+    expect(is_pure_collection([{a: 1}, {b: 2}])).toBe(true);
+    expect(is_pure_collection({x: {a: 1}, y: [1]})).toBe(true);
+
+    /*  One scalar is enough to make it a thing with content of its own,
+     *  and so is an EMPTY container: `{0}` has no child card to show it. */
+    expect(is_pure_collection([{a: 1}, 2])).toBe(false);
+    expect(is_pure_collection({x: {a: 1}, n: 3})).toBe(false);
+    expect(is_pure_collection([{a: 1}, {}])).toBe(false);
+
+    expect(is_pure_collection([])).toBe(false);
+    expect(is_pure_collection({})).toBe(false);
+    expect(is_pure_collection("x")).toBe(false);
+});
+
+test("is_pure_collection: the schema this came from", () => {
+    /*  The `devices` topic descriptor, cut to shape: `cols` is one key of
+     *  the dict like `pkey` is, and the only one that branches. */
+    let col = {id: "id", header: "Device", type: "string", flag: [], enum: {}};
+    let topic = {
+        topic_name: "devices",
+        pkey: "id",
+        pkey2s: [],             /*  empty: a row, not a branch  */
+        tkey: "tm",
+        system_flag: 1,
+        topic_version: 3,
+        cols: [col, col, col],
+    };
+
+    /*  The topic is NOT a pure collection: it has six scalar rows, so it
+     *  keeps its card. */
+    expect(is_pure_collection(topic)).toBe(false);
+    expect(count_branches(topic)).toBe(1);
+
+    /*  `cols` IS one: nothing but columns. It gets no card of its own --
+     *  its row in the topic names it, and the columns hang from the topic. */
+    expect(is_pure_collection(topic.cols)).toBe(true);
+    expect(count_branches(topic.cols)).toBe(3);
+
+    /*  A column has content, so it keeps its card. */
+    expect(is_pure_collection(col)).toBe(false);
+});

package/src/lib_graph.js

@@ -8,6 +8,7 @@
  ***********************************************************************/
 import {
     gobj_read_attr,
+    log_error,
 } from "@yuneta/gobj-js";
 
 // import {t} from "i18next";
@@ -195,6 +196,59 @@ function getStrokeColor(fillColor, theme = 'light', factor = 0.2) {
 //=======================================================================
 //      Expose the class via the global object
 //=======================================================================
+/************************************************************
+ * Returns the proportional position (between 0 and 1) of a specific point,
+ * centered and spaced with margins.
+ *
+ * index - Index of the point (0 to count-1)
+ * count - Total number of points
+ * margin - Total margin space (default 0.2 means 10% on each end)
+ ************************************************************/
+function getPointPosition(count, index, margin = 0.2)
+{
+    if(count <= 0 || index < 0 || index >= count) {
+        log_error("Invalid count or index");
+        return 0.5;
+    }
+
+    const start = margin / 2;
+    const end = 1 - margin / 2;
+    const step = (end - start) / count;
+
+    return start + index * step + step / 2;
+}
+
+/************************************************************
+ *  Count hooks and fkeys in topic desc, classify node type
+ ************************************************************/
+function calculate_hooks_fkeys_counter(desc)
+{
+    let cols = desc.cols;
+    desc.hooks_counter = 0;
+    desc.fkeys_counter = 0;
+
+    for(let i=0; i<cols.length; i++) {
+        let col = cols[i];
+        const field_desc = treedb_get_field_desc(col);
+        switch(field_desc.type) {
+            case "hook":
+                desc.hooks_counter++;
+                break;
+            case "fkey":
+                desc.fkeys_counter++;
+                break;
+        }
+    }
+
+    if(desc.hooks_counter === 0) {
+        desc.node_treedb_type = 'child';
+    } else if(desc.fkeys_counter === 0) {
+        desc.node_treedb_type = 'extended';
+    } else {
+        desc.node_treedb_type = 'hierarchical';
+    }
+}
+
 export {
     addClasses,
     removeClasses,
@@ -207,4 +261,5 @@ export {
     set_active_state,
     set_pressed_state,
     getStrokeColor,
+    getPointPosition,
 };