@yuneta/gobj-ui 7.23.186 → 7.23.188

package/src/c_yui_treedb_topics.js

@@ -335,12 +335,19 @@ function build_ui(gobj)
                         }
                     }],
                     /*  Landing view toggle: cards grid <-> schema graph
-                     *  (topics as nodes). Shown only on the landing. */
+                     *  (topics as nodes). Shown only on the landing.
+                     *
+                     *  The glyph is the draughtsman's compass, not the
+                     *  `hexagon-nodes` of the graph: the button one place
+                     *  to its left opens the graph of the DATA, and the
+                     *  two wore the same shape with only their labels
+                     *  telling them apart -- which on a narrow toolbar is
+                     *  nothing. A schema is the PLAN of the treedb. */
                     ['button', {class: 'button TREEDB_LANDING_TOGGLE is-hidden',
                                 title: t('schema graph'), 'aria-label': t('schema graph'),
                                 'data-i18n-title': 'schema graph',
                                 'data-i18n-aria-label': 'schema graph'}, [
-                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-hexagon-nodes')]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-compass-drafting')]],
                         ['span', {i18n: 'schema'}, 'schema']
                     ], {
                         click: (evt) => {
@@ -348,6 +355,24 @@ function build_ui(gobj)
                             gobj_send_event(gobj, "EV_TOGGLE_LANDING_VIEW", {}, gobj);
                         }
                     }],
+                    /*  The schema as JSON -- the `descs` the view is drawing,
+                     *  which is what a person writing a schema literal, or
+                     *  chasing a flag that did not take, actually needs to
+                     *  read. Landing-only, like the toggle it stands next
+                     *  to; the `raw json` button further right is another
+                     *  thing entirely (the tranger's content). */
+                    ['button', {class: 'button TREEDB_SCHEMA_JSON_BTN is-hidden',
+                                title: t('schema json'), 'aria-label': t('schema json'),
+                                'data-i18n-title': 'schema json',
+                                'data-i18n-aria-label': 'schema json'}, [
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-code')]],
+                        ['span', {i18n: 'schema json'}, 'schema json']
+                    ], {
+                        click: (evt) => {
+                            evt.stopPropagation();
+                            gobj_send_event(gobj, "EV_OPEN_SCHEMA_JSON", {}, 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
@@ -817,6 +842,7 @@ function show_topics_landing(gobj)
     let $info = $container.querySelector(".TREEDB_TOPIC_INFO");
     let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
     let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+    let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
     if($tabs) {
         $tabs.classList.add("is-hidden");
     }
@@ -835,6 +861,11 @@ function show_topics_landing(gobj)
         $toggle.classList.remove("is-hidden");   /*  the toggle lives on the landing  */
         $toggle.classList.toggle("is-primary", schema_mode);
     }
+    if($schema_json) {
+        /*  The schema's json is worth reading when the schema is what is
+         *  on screen; on the cards grid it is one more button in the way.  */
+        $schema_json.classList.toggle("is-hidden", !schema_mode);
+    }
     if(schema_mode) {
         if($landing) {
             $landing.classList.add("is-hidden");
@@ -946,6 +977,7 @@ function show_topic_detail(gobj)
     let $info = $container.querySelector(".TREEDB_TOPIC_INFO");
     let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
     let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+    let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
     if($landing) {
         $landing.classList.add("is-hidden");
     }
@@ -955,6 +987,9 @@ function show_topic_detail(gobj)
     if($info) {
         $info.classList.add("is-hidden");
     }
+    if($schema_json) {
+        $schema_json.classList.add("is-hidden");
+    }
     if($toggle) {
         $toggle.classList.add("is-hidden");   /*  landing-only  */
     }
@@ -1010,12 +1045,16 @@ function show_topic_info(gobj, topic)
     let $schema = $container.querySelector(".TREEDB_TOPICS_SCHEMA");
     let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
     let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+    let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
     if($landing) {
         $landing.classList.add("is-hidden");
     }
     if($schema) {
         $schema.classList.add("is-hidden");
     }
+    if($schema_json) {
+        $schema_json.classList.add("is-hidden");
+    }
     if($toggle) {
         $toggle.classList.add("is-hidden");
     }
@@ -1307,7 +1346,7 @@ function register_sub_routes(gobj)
     let nodes = [];
     if(is_object(gobj_read_attr(gobj, "landing_routes"))) {
         nodes.push({route: base + "/schema", label: "schema",
-                    icon: "yi-hexagon-nodes", gclass: "C_YUI_TREEDB_SCHEMA"});
+                    icon: "yi-compass-drafting", gclass: "C_YUI_TREEDB_SCHEMA"});
     }
     if(is_object(descs)) {
         for(let topic of Object.keys(descs)) {
@@ -1655,13 +1694,18 @@ function is_mobile()
  *  whole service (lazy drill). CHILD model: the viewer publishes
  *  EV_EXPAND_PATH to us.
  ************************************************************/
-function open_json_viewer(gobj)
+function open_json_viewer(gobj, opts)
 {
     let priv = gobj.priv;
+    let schema = !!(opts && opts.schema);
 
-    /*  Already open: just re-fetch.  */
+    /*  Already open: just re-fetch. The schema needs no fetch -- it is
+     *  the `descs` this view already holds -- so a second click on a
+     *  viewer that is already showing it does nothing.  */
     if(priv.json_win || priv.json_modal) {
-        request_print_tranger(gobj, "");
+        if(!schema) {
+            request_print_tranger(gobj, "");
+        }
         return;
     }
 
@@ -1681,7 +1725,11 @@ function open_json_viewer(gobj)
             /*  No `title`: the host titles it — the window's title bar on
              *  desktop, the dialog's header on mobile. The viewer's own
              *  title would land INSIDE that host, doubling it.  */
-            subscriber: gobj        /*  publishes EV_EXPAND_PATH to us  */
+            subscriber: gobj,       /*  publishes EV_EXPAND_PATH to us  */
+            /*  The schema is here already and it is small: it goes in
+             *  whole, and no drill-down happens because nothing is
+             *  collapsed.  */
+            json_data: schema? gobj_read_attr(gobj, "descs") : null
         },
         gobj
     );
@@ -1703,7 +1751,7 @@ function open_json_viewer(gobj)
             dialog:        true,
             logical_class: "TREEDB_JSON_SHEET",
             title_prefix: priv.treedb_name,
-            title:         "raw json",
+            title:         schema? "schema json" : "raw json",
             t:             t,
             on_close: () => {
                 if(gobj_is_destroying(gobj)) {
@@ -1733,8 +1781,8 @@ function open_json_viewer(gobj)
                 height:     620,
                 logical_class: "TREEDB_JSON_WINDOW",
                 title_prefix: priv.treedb_name,
-                title:      "raw json",
-                icon:       "yi-eye",
+                title:      schema? "schema json" : "raw json",
+                icon:       schema? "yi-code" : "yi-eye",
                 body:       $box,
                 manager:    null,
                 on_close: () => {
@@ -1754,7 +1802,9 @@ function open_json_viewer(gobj)
         gobj_start(priv.json_win);
     }
 
-    request_print_tranger(gobj, "");
+    if(!schema) {
+        request_print_tranger(gobj, "");
+    }
 }
 
 /************************************************************
@@ -2718,6 +2768,24 @@ function ac_open_json(gobj, event, kw, src)
     return 0;
 }
 
+/********************************************
+ *  The schema, as the json it is: the `descs` the schema graph is
+ *  drawing. Same viewer and same host as the tranger's raw json --
+ *  one at a time, so it closes whatever was open first.
+ ********************************************/
+function ac_open_schema_json(gobj, event, kw, src)
+{
+    if(!is_object(gobj_read_attr(gobj, "descs"))) {
+        /*  Not reachable by hand -- the button only exists while the
+         *  schema is on screen, which needs the descs -- so this is a
+         *  broken caller, not something to tell the reader about.  */
+        log_error(`${gobj_short_name(gobj)}: schema json with no descs`);
+        return -1;
+    }
+    open_json_viewer(gobj, {schema: true});
+    return 0;
+}
+
 /********************************************
  *  Open the graph where the reader left it: its last visited
  *  route under the graph's base -- `<graph>/<topic>` when a topic
@@ -2823,6 +2891,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_SCHEMA_JSON",     ac_open_schema_json,        null],
             ["EV_OPEN_GRAPH",           ac_open_graph,              null],
             ["EV_EXPAND_PATH",          ac_json_expand_path,        null],
             ["EV_JSON_CLOSED",          ac_json_closed,             null],
@@ -2857,6 +2926,7 @@ function create_gclass(gclass_name)
                                     event_flag_t.EVF_NO_WARN_SUBS],
         ["EV_REFRESH_TOPIC",        0],
         ["EV_OPEN_JSON",            0],
+        ["EV_OPEN_SCHEMA_JSON",     0],
         ["EV_OPEN_GRAPH",           0],
         ["EV_EXPAND_PATH",          0],
         ["EV_JSON_CLOSED",          0],

package/src/treedb_node_label.js

@@ -2,78 +2,78 @@
  *          treedb_node_label.js
  *
  *      Pure, testable logic behind the label of a node in the treedb
- *      graph: WHAT A RECORD IS CALLED, which is not always what it is
- *      keyed by. Kept out of the gclass so it can be unit-tested with
- *      no DOM and no G6.
+ *      graph: WHAT A RECORD IS CALLED. Kept out of the gclass so it can
+ *      be unit-tested with no DOM and no G6.
  *
  *          Copyright (c) 2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
 
+const SEP = " · ";     /*  the middle dot the shell titles use  */
+
 /************************************************************
- *  What a node is CALLED, which is not always what it is
- *  keyed by.
+ *  What a node is CALLED: **its id, and the secondary keys it
+ *  carries**.
  *
- *  A topic whose id column is flagged `rowid`, `uuid` or
- *  `qualified` keys its records by something that is not the
- *  name — a counter, a random string, or the name with every
- *  ancestor in front of it — and the name a human knows the
- *  record by lives in the secondary key the topic declares
- *  (`pkey2s`, carried in the desc since SDK > 7.13.0). The
- *  `topics` and `cols` topics of treedb_system_schema are the
- *  case that forced this: named in `value`, so every card in
- *  the graph read "181", "225", "193" while they were keyed by
- *  rowid, and reads the whole path now that they are
- *  qualified.
+ *  A record is one thing and an INSTANCE of it is another: the
+ *  topic keys the record by `id` and the instance by the
+ *  columns it declares in `pkey2s`. A card that shows one
+ *  without the other is a card that cannot be identified --
+ *  and it used to show one INSTEAD of the other, so the yunos
+ *  of an agent read `7.23.0-1`, `7.23.0-1`, `7.23.0-1` (the
+ *  release, which they share) and never said which yuno each
+ *  one was, while a `configurations` card read `1`.
  *
- *  The pkey stays reachable: it is the card's tooltip.
+ *  It came from the opposite case, and that one still works:
+ *  the `topics` and `cols` of treedb_system_schema are keyed
+ *  by a rowid, so the card said "181" and the name lived in
+ *  the pkey2. Now it says both -- `181 · yuno_role` -- which
+ *  is what the record is: that name, under that key.
  *
- *  Falls back to the id whenever the schema does not say
- *  otherwise — an older node whose desc carries no `pkey2s`
- *  included.
+ *  Rules:
+ *      - the id always opens the label;
+ *      - every pkey2 the record carries follows it, in the
+ *        order the topic declares them, separated by `·`;
+ *      - a pkey2 whose value is empty, absent or equal to the
+ *        id adds nothing;
+ *      - a desc with no `pkey2s` (an older node's schema
+ *        included) gives the bare id.
  ************************************************************/
 export function node_label(desc, record)
 {
-    /*  treedb stores every record under `id` (the pkey name is fixed in
-     *  tranger2_create_topic), so the fallback reads `id` while the FLAGS
-     *  are read from whatever column the desc names as the pkey.  */
+    /*  treedb stores every record under `id`: the pkey name is fixed in
+     *  tranger2_create_topic, whatever the desc calls it.  */
     let id = record.id;
 
-    let id_col = null;
-    if(Array.isArray(desc.cols)) {
-        for(let col of desc.cols) {
-            if(col && col.id === (desc.pkey || "id")) {
-                id_col = col;
-                break;
-            }
-        }
-    }
-    if(!id_col || !Array.isArray(id_col.flag)) {
-        return id;
-    }
-    if(id_col.flag.indexOf("rowid") < 0 &&
-        id_col.flag.indexOf("uuid") < 0 &&
-        id_col.flag.indexOf("qualified") < 0
-    ) {
-        return id;
-    }
-
+    let pkey2s = desc? desc.pkey2s : null;
     /*  `pkey2s` is a list in the desc, but the schema literal may
-     *  declare it as a bare string — take either.  */
-    let pkey2s = desc.pkey2s;
+     *  declare it as a bare string -- take either.  */
     if(typeof pkey2s === "string") {
         pkey2s = pkey2s? [pkey2s] : [];
     }
-    if(!Array.isArray(pkey2s)) {
+    if(!Array.isArray(pkey2s) || pkey2s.length === 0) {
         return id;
     }
+
+    let parts = [];
     for(let name of pkey2s) {
+        if(!name) {
+            continue;
+        }
         let value = record[name];
-        if(typeof value === "string" && value.length > 0) {
-            return value;
+        if(typeof value === "number") {
+            value = String(value);
+        }
+        if(typeof value !== "string" || value.length === 0) {
+            continue;
+        }
+        if(value === String(id)) {
+            continue;   /*  the same thing twice says nothing  */
         }
+        parts.push(value);
     }
-
-    return id;
+    if(parts.length === 0) {
+        return id;
+    }
+    return [id, ...parts].join(SEP);
 }
-

package/src/treedb_node_label.test.js

@@ -1,8 +1,10 @@
 /***********************************************************************
  *          treedb_node_label.test.js
  *
- *      The label of a treedb graph node: the pkey when it names the
- *      record, the secondary key when the pkey is synthetic.
+ *      The label of a treedb graph node: its id, and the secondary
+ *      keys it carries. A record is one thing and an INSTANCE of it
+ *      another, and a card that shows one without the other cannot be
+ *      identified.
  *
  *          Copyright (c) 2026, ArtGins.
  *          All Rights Reserved.
@@ -35,44 +37,67 @@ const REALMS_DESC = {
 };
 
 describe("node_label", () => {
-    it("uses the secondary key when the pkey is a rowid", () => {
+    const DOT = " \u00b7 ";
+
+    it("says the id AND the secondary key that names the record", () => {
         expect(node_label(COLS_DESC, {id: "181", value: "yuno_role"}))
-            .toBe("yuno_role");
+            .toBe("181" + DOT + "yuno_role");
+    });
+
+    it("says the id AND the instance: the case that brought it", () => {
+        /*  Three yunos of one agent, all of release 7.23.0-1: the cards
+         *  read `7.23.0-1` three times and never said which yuno.  */
+        let yunos = {
+            topic_name: "yunos",
+            pkey:       "id",
+            pkey2s:     ["yuno_release"],
+            cols: [
+                {id: "id",           type: "string", flag: ["persistent", "rowid"]},
+                {id: "yuno_release", type: "string", flag: ["persistent"]},
+            ],
+        };
+        expect(node_label(yunos, {id: "1", yuno_release: "7.23.0-1"}))
+            .toBe("1" + DOT + "7.23.0-1");
+        expect(node_label(yunos, {id: "1600", yuno_release: "1.8.1.0-2"}))
+            .toBe("1600" + DOT + "1.8.1.0-2");
     });
 
-    it("uses the pkey when it names the record", () => {
+    it("gives the bare id when the topic declares no secondary key", () => {
         expect(node_label(REALMS_DESC, {id: "artgins.utilities.all", realm_name: "all"}))
             .toBe("artgins.utilities.all");
     });
 
     it("accepts a pkey2s declared as a bare string", () => {
         let desc = {...COLS_DESC, pkey2s: "value"};
-        expect(node_label(desc, {id: "181", value: "yuno_role"})).toBe("yuno_role");
+        expect(node_label(desc, {id: "181", value: "yuno_role"}))
+            .toBe("181" + DOT + "yuno_role");
     });
 
-    it("treats a qualified pkey like a rowid one", () => {
-        let desc = {
-            ...COLS_DESC,
-            cols: [
-                {id: "id",    type: "string", flag: ["persistent", "qualified"]},
-                {id: "value", type: "string", flag: ["persistent", "required"]},
-            ],
-        };
-        expect(node_label(desc, {
-            id:    "treedb_yunovatioscodb.yunos.yuno_role",
-            value: "yuno_role",
-        })).toBe("yuno_role");
+    it("does not care what the id column is flagged", () => {
+        /*  rowid, uuid, qualified or nothing at all: the id is shown
+         *  either way, and the flags decide nothing here any more.  */
+        for(let flag of [["persistent", "uuid"], ["persistent", "qualified"], ["persistent"]]) {
+            let desc = {
+                ...COLS_DESC,
+                cols: [
+                    {id: "id",    type: "string", flag: flag},
+                    {id: "value", type: "string", flag: ["persistent", "required"]},
+                ],
+            };
+            expect(node_label(desc, {id: "k", value: "named"})).toBe("k" + DOT + "named");
+        }
     });
 
-    it("treats a uuid pkey like a rowid one", () => {
-        let desc = {
-            ...COLS_DESC,
-            cols: [
-                {id: "id",    type: "string", flag: ["persistent", "uuid"]},
-                {id: "value", type: "string", flag: ["persistent", "required"]},
-            ],
-        };
-        expect(node_label(desc, {id: "3f2a…", value: "named"})).toBe("named");
+    it("says every secondary key the topic declares, in its order", () => {
+        let desc = {topic_name: "x", pkey: "id", pkey2s: ["a", "b"], cols: []};
+        expect(node_label(desc, {id: "7", a: "one", b: "two"}))
+            .toBe("7" + DOT + "one" + DOT + "two");
+    });
+
+    it("skips a secondary key that is empty, absent or the id again", () => {
+        expect(node_label(COLS_DESC, {id: "181", value: ""})).toBe("181");
+        expect(node_label(COLS_DESC, {id: "181"})).toBe("181");
+        expect(node_label(COLS_DESC, {id: "181", value: "181"})).toBe("181");
     });
 
     it("falls back to the id when the desc carries no pkey2s (older node)", () => {
@@ -80,27 +105,13 @@ describe("node_label", () => {
         expect(node_label(desc, {id: "181", value: "yuno_role"})).toBe("181");
     });
 
-    it("falls back to the id when the secondary key is empty in the record", () => {
-        expect(node_label(COLS_DESC, {id: "181", value: ""})).toBe("181");
-        expect(node_label(COLS_DESC, {id: "181"})).toBe("181");
-    });
-
-    it("honours a pkey that is not called 'id'", () => {
-        let desc = {
-            topic_name: "x",
-            pkey:       "key",
-            pkey2s:     ["name"],
-            cols: [
-                {id: "key",  type: "string", flag: ["persistent", "rowid"]},
-                {id: "name", type: "string", flag: ["persistent", "required"]},
-                /*  A col called `id` that is NOT the pkey must not decide.  */
-                {id: "id",   type: "string", flag: ["persistent"]},
-            ],
-        };
-        expect(node_label(desc, {id: "7", key: "7", name: "seven"})).toBe("seven");
+    it("takes a numeric secondary key as the text it is", () => {
+        expect(node_label(COLS_DESC, {id: "emailsender.artgins", value: 1}))
+            .toBe("emailsender.artgins" + DOT + "1");
     });
 
-    it("survives a desc with no cols", () => {
+    it("survives a desc with no cols, and no desc at all", () => {
         expect(node_label({topic_name: "x", pkey: "id"}, {id: "42"})).toBe("42");
+        expect(node_label(null, {id: "42"})).toBe("42");
     });
 });

package/src/yui_icons.css

@@ -176,6 +176,15 @@
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M41-24.9c-9.4-9.4-24.6-9.4-33.9 0S-2.3-.3 7 9.1l528 528c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-96.4-96.4c2.7-2.4 5.4-4.8 8-7.2 46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1-47.1-43.7-111.8-80.6-192.6-80.6-56.8 0-105.6 18.2-146 44.2L41-24.9zM204.5 138.7c23.5-16.8 52.4-26.7 83.5-26.7 79.5 0 144 64.5 144 144 0 31.1-9.9 59.9-26.7 83.5l-34.7-34.7c12.7-21.4 17-47.7 10.1-73.7-13.7-51.2-66.4-81.6-117.6-67.9-8.6 2.3-16.7 5.7-24 10l-34.7-34.7zM325.3 395.1c-11.9 3.2-24.4 4.9-37.3 4.9-79.5 0-144-64.5-144-144 0-12.9 1.7-25.4 4.9-37.3L69.4 139.2c-32.6 36.8-55 75.8-66.9 104.5-3.3 7.9-3.3 16.7 0 24.6 14.9 35.7 46.2 87.7 93 131.1 47.1 43.7 111.8 80.6 192.6 80.6 37.3 0 71.2-7.9 101.5-20.6l-64.2-64.2z'/%3E%3C/svg%3E");
 }
 
+/*  The SCHEMA of a treedb -- its plan, as against the `hexagon-nodes`
+ *  of the DATA graph. The two sat on the same glyph in the same
+ *  toolbar, one button apart, and nothing but the label told them
+ *  apart.  */
+.yi-compass-drafting::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='M99.3 256.1l69.4-119.9c-5.6-12.2-8.8-25.8-8.8-40.2 0-53 43-96 96-96s96 43 96 96c0 14.3-3.1 27.9-8.8 40.2l44.4 76.7c-23.1 26-53.7 45.1-88.4 53.8L256 191.9 187.9 309.5c21.5 6.8 44.3 10.5 68.1 10.5 70.7 0 133.8-32.7 174.9-84 11.1-13.8 31.2-16 45-5s16 31.2 5 45c-52.7 65.8-133.9 108-224.8 108-35.4 0-69.4-6.4-100.7-18.1L98.7 463.7C94 471.8 87 478.4 78.6 482.6L23.2 510.3c-5 2.5-10.9 2.2-15.6-.7S0 501.5 0 496l0-55.4c0-8.4 2.2-16.7 6.5-24.1l60-103.7c-12.8-11.2-24.6-23.5-35.3-36.8-11.1-13.8-8.8-33.9 5-45s33.9-8.8 45 5c5.7 7.1 11.8 13.8 18.2 20.1zM381.1 407.9c32.5-13 62.4-31 88.9-52.9l35.6 61.5c4.2 7.3 6.5 15.6 6.5 24.1l0 55.4c0 5.5-2.9 10.7-7.6 13.6s-10.6 3.2-15.6 .7l-55.4-27.7c-8.4-4.2-15.4-10.8-20.1-18.9l-32.3-55.8zM256 128a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%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='M99.3 256.1l69.4-119.9c-5.6-12.2-8.8-25.8-8.8-40.2 0-53 43-96 96-96s96 43 96 96c0 14.3-3.1 27.9-8.8 40.2l44.4 76.7c-23.1 26-53.7 45.1-88.4 53.8L256 191.9 187.9 309.5c21.5 6.8 44.3 10.5 68.1 10.5 70.7 0 133.8-32.7 174.9-84 11.1-13.8 31.2-16 45-5s16 31.2 5 45c-52.7 65.8-133.9 108-224.8 108-35.4 0-69.4-6.4-100.7-18.1L98.7 463.7C94 471.8 87 478.4 78.6 482.6L23.2 510.3c-5 2.5-10.9 2.2-15.6-.7S0 501.5 0 496l0-55.4c0-8.4 2.2-16.7 6.5-24.1l60-103.7c-12.8-11.2-24.6-23.5-35.3-36.8-11.1-13.8-8.8-33.9 5-45s33.9-8.8 45 5c5.7 7.1 11.8 13.8 18.2 20.1zM381.1 407.9c32.5-13 62.4-31 88.9-52.9l35.6 61.5c4.2 7.3 6.5 15.6 6.5 24.1l0 55.4c0 5.5-2.9 10.7-7.6 13.6s-10.6 3.2-15.6 .7l-55.4-27.7c-8.4-4.2-15.4-10.8-20.1-18.9l-32.3-55.8zM256 128a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E");
+}
+
 .yi-hexagon-nodes::before {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M248 106.6c18.9-9 32-28.3 32-50.6c0-30.9-25.1-56-56-56s-56 25.1-56 56c0 22.3 13.1 41.6 32 50.6l0 98.8c-2.8 1.3-5.5 2.9-8 4.7l-80.1-45.8c1.6-20.8-8.6-41.6-27.9-52.8C57.2 96 23 105.2 7.5 132S1.2 193 28 208.5c1.3 .8 2.6 1.5 4 2.1l0 90.8c-1.3 .6-2.7 1.3-4 2.1C1.2 319-8 353.2 7.5 380S57.2 416 84 400.5c19.3-11.1 29.4-32 27.8-52.8l50.5-28.9c-11.5-11.2-19.9-25.6-23.8-41.7L88 306.1c-2.6-1.8-5.2-3.3-8-4.7l0-90.8c2.8-1.3 5.5-2.9 8-4.7l80.1 45.8c-.1 1.4-.2 2.8-.2 4.3c0 22.3 13.1 41.6 32 50.6l0 98.8c-18.9 9-32 28.3-32 50.6c0 30.9 25.1 56 56 56s56-25.1 56-56c0-22.3-13.1-41.6-32-50.6l0-98.8c2.8-1.3 5.5-2.9 8-4.7l80.1 45.8c-1.6 20.8 8.6 41.6 27.8 52.8c26.8 15.5 61 6.3 76.5-20.5s6.3-61-20.5-76.5c-1.3-.8-2.7-1.5-4-2.1l0-90.8c1.4-.6 2.7-1.3 4-2.1c26.8-15.5 36-49.7 20.5-76.5S390.8 96 364 111.5c-19.3 11.1-29.4 32-27.8 52.8l-50.6 28.9c11.5 11.2 19.9 25.6 23.8 41.7L360 205.9c2.6 1.8 5.2 3.3 8 4.7l0 90.8c-2.8 1.3-5.5 2.9-8 4.6l-80.1-45.8c.1-1.4 .2-2.8 .2-4.3c0-22.3-13.1-41.6-32-50.6l0-98.8z'/%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 d='M248 106.6c18.9-9 32-28.3 32-50.6c0-30.9-25.1-56-56-56s-56 25.1-56 56c0 22.3 13.1 41.6 32 50.6l0 98.8c-2.8 1.3-5.5 2.9-8 4.7l-80.1-45.8c1.6-20.8-8.6-41.6-27.9-52.8C57.2 96 23 105.2 7.5 132S1.2 193 28 208.5c1.3 .8 2.6 1.5 4 2.1l0 90.8c-1.3 .6-2.7 1.3-4 2.1C1.2 319-8 353.2 7.5 380S57.2 416 84 400.5c19.3-11.1 29.4-32 27.8-52.8l50.5-28.9c-11.5-11.2-19.9-25.6-23.8-41.7L88 306.1c-2.6-1.8-5.2-3.3-8-4.7l0-90.8c2.8-1.3 5.5-2.9 8-4.7l80.1 45.8c-.1 1.4-.2 2.8-.2 4.3c0 22.3 13.1 41.6 32 50.6l0 98.8c-18.9 9-32 28.3-32 50.6c0 30.9 25.1 56 56 56s56-25.1 56-56c0-22.3-13.1-41.6-32-50.6l0-98.8c2.8-1.3 5.5-2.9 8-4.7l80.1 45.8c-1.6 20.8 8.6 41.6 27.8 52.8c26.8 15.5 61 6.3 76.5-20.5s6.3-61-20.5-76.5c-1.3-.8-2.7-1.5-4-2.1l0-90.8c1.4-.6 2.7-1.3 4-2.1c26.8-15.5 36-49.7 20.5-76.5S390.8 96 364 111.5c-19.3 11.1-29.4 32-27.8 52.8l-50.6 28.9c11.5 11.2 19.9 25.6 23.8 41.7L360 205.9c2.6 1.8 5.2 3.3 8 4.7l0 90.8c-2.8 1.3-5.5 2.9-8 4.6l-80.1-45.8c.1-1.4 .2-2.8 .2-4.3c0-22.3-13.1-41.6-32-50.6l0-98.8z'/%3E%3C/svg%3E");