@yuneta/gobj-ui 7.23.142 → 7.23.144

package/src/c_yui_treedb_topic_with_form.js

@@ -1522,6 +1522,20 @@ function create_tabulator(gobj)
      *  had once opened the table. Only a real change is written.  */
     gobj.priv._page_size = tabulator_settings.paginationSize;
 
+    /*  Normalized records are read by their KEY: a topic table opens
+     *  sorted by `id` (the pkey), ascending and natural (`d2` before
+     *  `d10`) -- unless the app set its own order, or the table pages
+     *  from the backend, where a sort in the browser would reorder one
+     *  page and say nothing about the others.  */
+    let pkey_col = columns.find((c) => c && c.field === pkey);
+    if(pkey_col && !tabulator_settings.initialSort &&
+            !gobj_read_bool_attr(gobj, "with_remote_paging")) {
+        if(!pkey_col.sorter) {
+            pkey_col.sorter = "alphanum";
+        }
+        tabulator_settings.initialSort = [{column: pkey, dir: "asc"}];
+    }
+
     Object.assign(tabulator_settings, {
         index: pkey,
         columns: columns,

package/src/json_view_helpers.js

@@ -5,7 +5,8 @@
  *      viewer).  Kept out of the gclass so it can be unit-tested with
  *      no DOM: collapsed-sentinel detection, path (segments) algebra,
  *      search matching, timestamp recognition/formatting, the JSON
- *      type discriminator and the text view's capped dump.
+ *      type discriminator and the text view's capped dump -- and the
+ *      differences of two documents, for the JSON pad's compare.
  *
  *      Path convention mirrors the C kernel (kw_collapse / kw_find_path
  *      in kwid.c): segments are joined by the backtick delimiter, arrays
@@ -14,6 +15,7 @@
  *          Copyright (c) 2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
+import {json2flat, flat_diff} from "@yuneta/gobj-js";
 
 /*
  *  Path delimiter, identical to the kernel's `delimiter` in kwid.c.
@@ -397,3 +399,56 @@ export function count_branches(value)
     }
     return n;
 }
+
+/************************************************************
+ *  What differs between two documents: one row per id of
+ *  their flat form (json2flat), sorted by id in natural order,
+ *  so `[2]` comes before `[10]`:
+ *
+ *      [{id, kind: "added"|"removed"|"changed", from?, to?}]
+ *
+ *  `from` is the first document's value and `to` the second's:
+ *  an added row has no `from`, a removed row no `to`.
+ *
+ *  Two roots that are not containers of the same kind have no
+ *  ids in common to compare by: they are one value each, and
+ *  the row that says they differ has the empty id.
+ *
+ *  Throws what json2flat throws (a document too deep).
+ ************************************************************/
+export function json_diff_rows(doc_a, doc_b)
+{
+    const kind_of = (v) => {
+        if(Array.isArray(v)) {
+            return "array";
+        }
+        if(v !== null && typeof v === "object") {
+            return "object";
+        }
+        return "scalar";
+    };
+
+    let kind_a = kind_of(doc_a);
+    if(kind_a === "scalar" || kind_a !== kind_of(doc_b)) {
+        if(JSON.stringify(doc_a) === JSON.stringify(doc_b)) {
+            return [];
+        }
+        return [{id: "", kind: "changed", from: doc_a, to: doc_b}];
+    }
+
+    let diff = flat_diff(json2flat(doc_a), json2flat(doc_b));
+    let rows = [];
+    for(const id of Object.keys(diff.added)) {
+        rows.push({id: id, kind: "added", to: diff.added[id]});
+    }
+    for(const id of Object.keys(diff.removed)) {
+        rows.push({id: id, kind: "removed", from: diff.removed[id]});
+    }
+    for(const id of Object.keys(diff.changed)) {
+        rows.push({id: id, kind: "changed", from: diff.changed[id].from, to: diff.changed[id].to});
+    }
+
+    const collator = new Intl.Collator("en", {numeric: true});
+    rows.sort((x, y) => collator.compare(x.id, y.id));
+    return rows;
+}

package/src/json_view_helpers.test.js

@@ -21,9 +21,52 @@ import {
     is_pure_collection,
     has_branch,
     count_branches,
+    json_diff_rows,
 } from "./json_view_helpers.js";
 
 
+/*============================================================
+ *      json_diff_rows
+ *============================================================*/
+test("json_diff_rows: two equal documents have no rows, whatever their key order", () => {
+    expect(json_diff_rows({a: 1, b: [1, {c: null}]}, {b: [1, {c: null}], a: 1})).toEqual([]);
+});
+
+test("json_diff_rows: one row per differing id, sorted by id", () => {
+    let a = {a: 1, b: {c: [1, 2]}, e: "x"};
+    let b = {a: 2, b: {c: [1]}, d: {}, e: "x"};
+    expect(json_diff_rows(a, b)).toEqual([
+        {id: "a",       kind: "changed", from: 1, to: 2},
+        {id: "b`c`[1]", kind: "removed", from: 2},
+        {id: "d",       kind: "added",   to: {}},
+    ]);
+});
+
+test("json_diff_rows: array indexes sort as numbers, [2] before [10]", () => {
+    let a = [];
+    let b = [];
+    for(let i = 0; i < 12; i++) {
+        a.push(i);
+        b.push((i === 2 || i === 10)? -1 : i);
+    }
+    expect(json_diff_rows(a, b).map((r) => r.id)).toEqual(["[2]", "[10]"]);
+});
+
+test("json_diff_rows: a leaf that becomes a container is one id gone and one new", () => {
+    expect(json_diff_rows({a: 1}, {a: {b: 2}})).toEqual([
+        {id: "a",   kind: "removed", from: 1},
+        {id: "a`b", kind: "added",   to: 2},
+    ]);
+});
+
+test("json_diff_rows: roots that are not containers of one kind are one value each", () => {
+    expect(json_diff_rows(1, 1)).toEqual([]);
+    expect(json_diff_rows("x", "y")).toEqual([{id: "", kind: "changed", from: "x", to: "y"}]);
+    expect(json_diff_rows({}, [])).toEqual([{id: "", kind: "changed", from: {}, to: []}]);
+    expect(json_diff_rows(null, {a: 1})).toEqual([{id: "", kind: "changed", from: null, to: {a: 1}}]);
+});
+
+
 /*============================================================
  *      json_type
  *============================================================*/

package/src/yui_icons.css

@@ -392,3 +392,15 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill-rule='evenodd' d='M190 32h68l150 448h-72l-40-120H152l-40 120H40L190 32zM172 300h104l-52-158-52 158z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill-rule='evenodd' d='M190 32h68l150 448h-72l-40-120H152l-40 120H40L190 32zM172 300h104l-52-158-52 158z'/%3E%3C/svg%3E");
 }
+
+/*  Two columns, for "a second pane beside the first" (the JSON pad).  */
+.yi-columns::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' d='M0 96C0 60.7 28.7 32 64 32h384c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 32v288h160V128H64zm224 0v288h160V128H288z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' d='M0 96C0 60.7 28.7 32 64 32h384c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 32v288h160V128H64zm224 0v288h160V128H288z'/%3E%3C/svg%3E");
+}
+
+/*  Two opposite arrows, for "compare" (the JSON pad's differences).  */
+.yi-right-left::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 64L480 160 352 256V192H64V128H352ZM160 256L32 352 160 448V384H448V320H160Z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 64L480 160 352 256V192H64V128H352ZM160 256L32 352 160 448V384H448V320H160Z'/%3E%3C/svg%3E");
+}

package/src/yui_json_pad.js

@@ -0,0 +1,109 @@
+/***********************************************************************
+ *          yui_json_pad.js
+ *
+ *          JSON viewer -- a blank C_YUI_JSON_PAD in a floating window,
+ *          to paste JSON from outside and read it with the library's own
+ *          viewer.  Peer of the frontend view (yui_frontend_view.js), and
+ *          opened the same way: an entry of the account menu.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {
+    createElement2,
+    gclass_find_by_name,
+    gobj_create_service,
+    gobj_create_pure_child,
+    gobj_find_service,
+    gobj_read_attr,
+    gobj_start_tree,
+    log_error,
+} from "@yuneta/gobj-js";
+
+import {register_c_yui_json_pad} from "./c_yui_json_pad.js";
+
+/*  Service name of the window. The host toggles the entry by looking
+ *  it up, exactly as it does with "Frontend-View-Window". */
+const WIN_NAME = "Json-Viewer-Window";
+
+
+                    /******************************
+                     *      Public API
+                     ******************************/
+
+
+/************************************************************
+ *  Open a blank JSON pad (C_YUI_JSON_PAD) inside a non-modal
+ *  C_YUI_WINDOW, the same shape as the frontend view.
+ *
+ *  Self-contained: it registers C_YUI_JSON_PAD (and the
+ *  C_YUI_JSON it hosts) if the app did not, so an app gets the
+ *  viewer with one menu entry and one action.
+ *
+ *  Returns the window gobj, or null.
+ ************************************************************/
+function setup_json_pad(self)
+{
+    if(gobj_find_service(WIN_NAME, false)) {
+        return null;
+    }
+    if(!gclass_find_by_name("C_YUI_JSON_PAD", false)) {
+        register_c_yui_json_pad();
+    }
+
+    /*  The pad is created AFTER the window, as a pure child of it, so
+     *  every teardown path (the ✕, or the host destroying the window to
+     *  toggle the entry off) takes the pad down with it -- which is why
+     *  the body is a placeholder: C_YUI_WINDOW builds its UI in
+     *  mt_create, before the pad exists. */
+    let $body = createElement2(
+        ["div", {class: "YJSONPAD_BODY",
+            style: "height:100%; display:flex; flex-direction:column;"}, []]
+    );
+
+    let win = gobj_create_service(
+        WIN_NAME,
+        "C_YUI_WINDOW",
+        {
+            $parent: (typeof document !== "undefined" &&
+                document.getElementById("top-layer")) || null,
+            subscriber: null,
+            modal: false,
+            showMax: true,
+            showFooter: false,
+            resizable: true,
+            center: false,
+            auto_save_size_and_position: true,
+            width: 900,
+            height: 640,
+            logical_class: "JSON_VIEWER_WINDOW",
+            title: "json viewer",
+            icon: "yi-code",
+            body: $body,
+            /*  `|| null`: an undefined attr value logs "attr undefined:
+             *  manager" in an app without a window manager.  */
+            manager: gobj_find_service("__window_manager__", false) || null,
+        },
+        self
+    );
+    if(!win) {
+        log_error("yui_json_pad: cannot create the json-viewer window");
+        return null;
+    }
+
+    /*  The window is mounted by its mt_create, so $body is live DOM here:
+     *  the viewer's graph measures its canvas when it is first shown.  */
+    let pad = gobj_create_pure_child("json_pad", "C_YUI_JSON_PAD", {}, win);
+    let $pad = pad? gobj_read_attr(pad, "$container") : null;
+    if(!$pad) {
+        log_error("yui_json_pad: C_YUI_JSON_PAD without $container");
+        return win;
+    }
+    $body.appendChild($pad);
+
+    gobj_start_tree(win);
+
+    return win;
+}
+
+export {setup_json_pad};