@yuneta/gobj-ui 7.23.73 → 7.23.75

package/src/c_yui_treedb_graph.js

@@ -49,6 +49,7 @@ import {
     treedb_get_field_desc,
     treedb_decoder_fkey,
     gobj_write_str_attr,
+    gobj_write_bool_attr,
     gobj_command,
     msg_iev_get_stack,
     kw_get_dict,
@@ -88,6 +89,7 @@ import {
     enableElements,
     set_submit_state,
     set_active_state,
+    set_pressed_state,
 } from "./lib_graph.js";
 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";
@@ -118,6 +120,8 @@ SDATA(data_type_t.DTP_STRING,   "layout",           sdata_flag_t.SDF_PERSIST, ""
 SDATA(data_type_t.DTP_LIST,     "hidden_topics",    sdata_flag_t.SDF_PERSIST, "[]", "Topics hidden from the graph (legend). User preference, per treedb"),
 SDATA(data_type_t.DTP_STRING,   "main_topic",       sdata_flag_t.SDF_PERSIST, "", "The topic the tree hangs from; empty = deduced by the graph. User preference, per treedb"),
 SDATA(data_type_t.DTP_LIST,     "loose_topics",     sdata_flag_t.SDF_PERSIST, "[]", "Topics whose LOOSE records (no parent) are shown. User preference, per treedb"),
+SDATA(data_type_t.DTP_STRING,   "node_mode",        sdata_flag_t.SDF_PERSIST, "expanded", "How the records are drawn: `expanded` = the cards with their ports, `compact` = coloured squares, the topology alone. User preference"),
+SDATA(data_type_t.DTP_BOOLEAN,  "node_labels",      sdata_flag_t.SDF_PERSIST, true, "A compact node says its name under its square. User preference"),
 
 /*---------------- Remote Connection ----------------*/
 SDATA(data_type_t.DTP_POINTER,  "gobj_remote_yuno", 0,  null,   "Remote Yuno to request data"),
@@ -253,6 +257,8 @@ function mt_create(gobj)
             hidden_topics: gobj_read_attr(gobj, "hidden_topics") || [],
             main_topic: gobj_read_str_attr(gobj, "main_topic") || "",
             loose_topics: gobj_read_attr(gobj, "loose_topics") || [],
+            node_mode: gobj_read_str_attr(gobj, "node_mode") || "expanded",
+            node_labels: gobj_read_bool_attr(gobj, "node_labels"),
         },
         gobj
     );
@@ -360,6 +366,7 @@ function build_ui(gobj)
      *----------------------------------------------*/
     let padding = gobj_read_attr(gobj, "padding");
     let $toolbar = make_toolbar(gobj);
+    refresh_node_shape_buttons(gobj, $toolbar);
 
     /*  The back link is pinned in the row, BEFORE the toolbar, so the
      *  toolbar's horizontal scroll never carries it off-screen. */
@@ -529,6 +536,62 @@ function option_label(name)
 /************************************************************
  *
  ************************************************************/
+/************************************************************
+ *  The two toggles of the nodes' shape.
+ *
+ *  Closed nodes: every record a rounded square of its topic's
+ *  colour, no ports, no text -- the topology of a graph of many
+ *  nodes, which the cards hide behind their own size. Labels:
+ *  the name under each square, when the squares alone do not say
+ *  enough. Both persist, both are forwarded to the G6 child, and
+ *  one node can be opened against the rule with a double click or
+ *  its context menu (the child's business).
+ ************************************************************/
+function node_shape_items(gobj, wide)
+{
+    let toggle = (cls, icon, event_name, label_key) => {
+        return ['button', {class: `${cls} button`, type: 'button',
+                           style: {height: wide, width: '2.5em'},
+                           title: t(label_key), 'data-i18n-title': label_key,
+                           'aria-label': t(label_key), 'data-i18n-aria-label': label_key,
+                           'aria-pressed': 'false'},
+            ['i', {style: 'font-size:1.5em; color:inherit;', class: icon}],
+            {
+                click: (evt) => {
+                    evt.stopPropagation();
+                    gobj_send_event(gobj, event_name, {}, gobj);
+                }
+            }
+        ];
+    };
+    return [
+        toggle('GRAPH_NODE_MODE', 'yi-hexagon-nodes', 'EV_TOGGLE_NODE_MODE', 'closed nodes'),
+        toggle('GRAPH_NODE_LABELS', 'yi-font', 'EV_TOGGLE_NODE_LABELS', 'node labels'),
+    ];
+}
+
+/*  The pressed look and `aria-pressed` of the two, from the attrs.
+ *  `$root` is whatever holds the toolbar: the toolbar itself before
+ *  the view is mounted, the view's container after.  */
+function refresh_node_shape_buttons(gobj, $root)
+{
+    if(!$root) {
+        return;
+    }
+    let compact = (gobj_read_str_attr(gobj, "node_mode") === "compact");
+    let labels = gobj_read_bool_attr(gobj, "node_labels");
+    set_pressed_state($root, '.GRAPH_NODE_MODE', compact);
+    set_pressed_state($root, '.GRAPH_NODE_LABELS', labels);
+    let $mode = $root.querySelector('.GRAPH_NODE_MODE');
+    if($mode) {
+        $mode.setAttribute('aria-pressed', compact? 'true' : 'false');
+    }
+    let $labels = $root.querySelector('.GRAPH_NODE_LABELS');
+    if($labels) {
+        $labels.setAttribute('aria-pressed', labels? 'true' : 'false');
+    }
+}
+
 function make_toolbar(gobj)
 {
     let priv = gobj.priv;
@@ -593,6 +656,10 @@ function make_toolbar(gobj)
          *  way back to the default depth.  */
         ...yui_graph_fold_items(gobj, gobj_read_str_attr(gobj, "wide")),
 
+        /*  The shape pair: closed squares or open cards, and the name
+         *  under a square. Two STATES, so they look pressed.  */
+        ...node_shape_items(gobj, gobj_read_str_attr(gobj, "wide")),
+
         /*  Inspect the treedb's raw tranger json in the lazy tree viewer
          *  (print-tranger on the C_NODE service). A treedb can be huge, so
          *  the viewer drills in on demand — see open_json_viewer.  */
@@ -2348,6 +2415,18 @@ const LEGEND_GLYPH_STYLE = 'font-size:1.5em; line-height:1; color:inherit;';
 const LEGEND_NAME_STYLE  = 'font-size:1.2em; line-height:1.2;';
 const LEGEND_COUNT_STYLE = 'margin-left:.4rem; font-size:1em;';
 
+/*  The focused chip is HIGHLIGHTED, not pressed. The body of a chip is
+ *  the show/hide toggle, and that is what its `aria-pressed` says;
+ *  the focus belongs to the crosshair next to it, which is the button
+ *  that looks pressed. 7.23.73 painted the body with `pressed_state`
+ *  as well, so the eye and the screen reader read two different
+ *  states off one button -- and the count, `has-text-grey` by Bulma's
+ *  `!important`, sat grey on the near-black at 2.7:1. A ring inside
+ *  the border marks the chip without repainting anything in it.
+ *  Inset, because a chip lives in a `has-addons` group and a shadow
+ *  outside the box is clipped by its neighbours.  */
+const LEGEND_FOCUSED_STYLE = 'box-shadow: inset 0 0 0 2px var(--bulma-text, #2e333d);';
+
 function refresh_legend(gobj)
 {
     let priv = gobj.priv;
@@ -2412,10 +2491,10 @@ function refresh_legend(gobj)
          *  every chip was dead except its star.  */
         let body_attrs = {
             class: 'GRAPH_LEGEND_ITEM button is-small' +
-                   (focused? ' pressed_state' : '') +
+                   (focused? ' GRAPH_LEGEND_FOCUSED' : '') +
                    (is_main? ' GRAPH_LEGEND_MAIN' : ''),
             type: 'button',
-            style: 'gap:0; flex:0 0 auto;',
+            style: 'gap:0; flex:0 0 auto;' + (focused? ' ' + LEGEND_FOCUSED_STYLE : ''),
             title: is_main? t('main topic') : (hidden? t('show topic') : t('hide topic')),
             'aria-label': topic_name,
             'aria-pressed': hidden? 'false' : 'true',
@@ -2692,6 +2771,39 @@ function ac_collapse_all(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  The shape pair of the toolbar: the attr flips, persists,
+ *  shows on the button, and reaches the G6 child, which owns
+ *  the nodes.
+ ************************************************************/
+function ac_toggle_node_mode(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    let mode = (gobj_read_str_attr(gobj, "node_mode") === "compact")? "expanded" : "compact";
+
+    gobj_write_str_attr(gobj, "node_mode", mode);
+    gobj_save_persistent_attrs(gobj, "node_mode");
+    refresh_node_shape_buttons(gobj, priv.$container);
+    if(priv.gobj_nodes_tree) {
+        gobj_send_event(priv.gobj_nodes_tree, "EV_SET_NODE_MODE", {node_mode: mode}, gobj);
+    }
+    return 0;
+}
+
+function ac_toggle_node_labels(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    let labels = !gobj_read_bool_attr(gobj, "node_labels");
+
+    gobj_write_bool_attr(gobj, "node_labels", labels);
+    gobj_save_persistent_attrs(gobj, "node_labels");
+    refresh_node_shape_buttons(gobj, priv.$container);
+    if(priv.gobj_nodes_tree) {
+        gobj_send_event(priv.gobj_nodes_tree, "EV_SET_NODE_LABELS", {node_labels: labels}, gobj);
+    }
+    return 0;
+}
+
 /************************************************************
  *  How many nodes the term matched, from the graph child. Zero with a
  *  term typed is an ANSWER and is shown; an empty box shows nothing.
@@ -2845,6 +2957,8 @@ function create_gclass(gclass_name)
             ["EV_FIND_NODES",               ac_find_nodes,              null],
             ["EV_EXPAND_ALL",               ac_expand_all,              null],
             ["EV_COLLAPSE_ALL",             ac_collapse_all,            null],
+            ["EV_TOGGLE_NODE_MODE",         ac_toggle_node_mode,        null],
+            ["EV_TOGGLE_NODE_LABELS",       ac_toggle_node_labels,      null],
             ["EV_LAYOUT_AUTOSET",           ac_layout_autoset,          null],
             ["EV_LEGEND_TOPIC",             ac_legend_topic,            null],
             ["EV_LEGEND_STATE",             ac_legend_state,            null],
@@ -2886,6 +3000,8 @@ function create_gclass(gclass_name)
         ["EV_FIND_NODES",               0],
         ["EV_EXPAND_ALL",               0],
         ["EV_COLLAPSE_ALL",             0],
+        ["EV_TOGGLE_NODE_MODE",         0],
+        ["EV_TOGGLE_NODE_LABELS",       0],
         ["EV_FIND_RESULT",              0],
         ["EV_LAYOUT_AUTOSET",           0],
         ["EV_LEGEND_TOPIC",             0],

package/src/treedb_layout.js

@@ -4,7 +4,7 @@
  *      Two layouts made for a treedb, and nothing else.
  *
  *      What a treedb graph IS, once it is folded (treedb_fold_model.js):
- *      a forest read left to right. A main topic is a tree (places:
+ *      a forest read top to bottom. A main topic is a tree (places:
  *      country, region, site, hall), the other topics hang from its
  *      nodes through hooks (devices, users, controllers), a record may
  *      hang from two parents (a device from its place AND its
@@ -25,8 +25,8 @@
  *      - the force family scatters a tree, which is the pile with
  *        physics.
  *
- *      So: a tidy tree (`tree`) and an outline (`outline`), both fed by
- *      the SAME spanning tree, chosen deterministically:
+ *      So: a tidy tree (`tree`) and a radial tree (`radial`), both fed
+ *      by the SAME spanning tree, chosen deterministically:
  *
  *      - roots are the nodes with no incoming edge, in node order;
  *      - a node belongs to the FIRST parent that reaches it in a
@@ -38,16 +38,21 @@
  *        and then by node order (record order, the pages' order);
  *      - a node nothing reaches (a cycle) is a root too.
  *
- *      `tree`: the classic tidy tree, left to right. Each depth is a
- *      column as wide as its widest card; a node is centred on the
- *      block of its children; siblings stack with `nodesep` between
- *      them. O(n), and opening a hook moves NOTHING that is not below
- *      or beside it -- the cards keep their order, the eye keeps its
- *      place.
+ *      `tree`: the classic tidy tree, top to bottom. Each depth is a
+ *      row as tall as its tallest card; a node is centred over the
+ *      block of its children; siblings sit side by side with `nodesep`
+ *      between them. O(n), and opening a hook moves NOTHING that is
+ *      not below or beside it -- the cards keep their order, the eye
+ *      keeps its place. It reads DOWN because that is the direction a
+ *      tree with many children has room in: a hall with a hundred
+ *      devices is a wide row, not a tall column beside a card. (The
+ *      left-to-right reading is `direction: "LR"`, kept for a host
+ *      that wants it; `dagre` reads that way in the graph.)
  *
- *      `outline`: one node per row, indented by depth -- what a JSON
- *      viewer draws, and what a treedb is when read as one. Tall, but
- *      nothing is ever beside anything: the reader scrolls a list.
+ *      `radial`: the root in the middle and a ring per depth, each
+ *      subtree owning a sector proportional to its leaves; the radius
+ *      of a ring grows until its neighbours sit side by side, so
+ *      nothing overlaps by construction (see `layout_radial`).
  *
  *      Pure: takes plain nodes and edges, returns positions. The G6
  *      classes in c_g6_nodes_tree.js are two thin adapters over it.
@@ -57,9 +62,9 @@
  ***********************************************************************/
 
 const DEFAULTS = {
-    nodesep: 18,        /*  gap between siblings (tree) / rows (outline)  */
-    ranksep: 110,       /*  gap between a column and the next (tree)  */
-    indent: 48,         /*  what a depth adds to the x of a row (outline)  */
+    nodesep: 18,        /*  gap between siblings (tree) / neighbours (radial)  */
+    ranksep: 90,        /*  gap between a depth and the next  */
+    direction: "TB",    /*  tree: "TB" reads down, "LR" reads right  */
 };
 
 /************************************************************
@@ -169,14 +174,35 @@ function walk_order(t)
 }
 
 /************************************************************
- *  The tidy tree, left to right.
+ *  The tidy tree.
  *
  *  Returns Map<id, {x, y}> with the CENTRE of each node, the way G6
  *  positions a node.
+ *
+ *  The algorithm is written ONCE, reading left to right (depths are
+ *  columns, siblings stack down). Top to bottom -- the default -- is
+ *  the same tree with the axes swapped: every card is fed in
+ *  transposed (its height as its width), and every position comes
+ *  back transposed. That is the whole difference, and it is the
+ *  reason the code is not duplicated for a second direction.
  ************************************************************/
 export function layout_tree(nodes, edges, opts)
 {
     let o = Object.assign({}, DEFAULTS, opts || {});
+    if(o.direction === "LR") {
+        return tidy_tree_lr(nodes, edges, o);
+    }
+    let transposed = nodes.map((n) => Object.assign({}, n, {w: n.h, h: n.w}));
+    let lr = tidy_tree_lr(transposed, edges, o);
+    let pos = new Map();
+    for(let [id, p] of lr) {
+        pos.set(id, {x: p.y, y: p.x});
+    }
+    return pos;
+}
+
+function tidy_tree_lr(nodes, edges, o)
+{
     let t = spanning_tree(nodes, edges);
     let pos = new Map();
 
@@ -377,39 +403,3 @@ export function layout_radial(nodes, edges, opts)
 
     return pos;
 }
-
-/************************************************************
- *  The outline: one node per row, indented by depth, in the
- *  pre-order of the spanning tree. Rows are left-aligned on
- *  their indent, so a column of chips reads as a list.
- ************************************************************/
-export function layout_outline(nodes, edges, opts)
-{
-    let o = Object.assign({}, DEFAULTS, opts || {});
-    let t = spanning_tree(nodes, edges);
-    let pos = new Map();
-
-    let y = 0;
-    let visit = (root_id) => {
-        let stack = [root_id];
-        while(stack.length) {
-            let id = stack.pop();
-            let n = t.by_id.get(id);
-            let d = t.depth.get(id);
-            pos.set(id, {x: d * o.indent + n.w / 2, y: y + n.h / 2});
-            y += n.h + o.nodesep;
-            /*  Reversed, so a sibling pops in the order it was given:
-             *  here the order of the walk IS the order of the rows.  */
-            let kids = t.children.get(id) || [];
-            for(let i = kids.length - 1; i >= 0; i--) {
-                stack.push(kids[i]);
-            }
-        }
-    };
-    for(let root of t.roots) {
-        visit(root);
-        y += o.nodesep;     /*  a breath between two trees  */
-    }
-
-    return pos;
-}

package/src/treedb_layout.test.js

@@ -3,10 +3,10 @@
  *
  *      The two treedb layouts, pinned: the spanning tree they share
  *      (roots, first parent wins, hook order then record order), the
- *      tidy tree's columns and centring, the outline's rows.
+ *      tidy tree's rows and centring, the radial tree's rings.
  ***********************************************************************/
 import { describe, test, expect } from "vitest";
-import { spanning_tree, layout_tree, layout_outline, layout_radial } from "./treedb_layout.js";
+import { spanning_tree, layout_tree, layout_radial } from "./treedb_layout.js";
 
 /*  es -> (norte, sur); norte -> nave; nave -> d0, d1 (hook rank 1) and
  *  c1 (hook rank 2); c1 -> d0 as well (second parent).  */
@@ -63,9 +63,43 @@ describe("the spanning tree", () => {
     });
 });
 
-describe("the tidy tree", () => {
-    test("depths are columns; a column is as wide as its widest card", () => {
+describe("the tidy tree, read down (the default)", () => {
+    test("depths are rows; a row is as tall as its tallest card", () => {
+        let pos = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100});
+        expect(pos.get("es").y).toBe(48);                       /*  96/2  */
+        expect(pos.get("norte").y).toBe(96 + 100 + 48);
+        expect(pos.get("sur").y).toBe(pos.get("norte").y);
+        /*  depth 2 holds nave (120 tall): the row is 120 tall  */
+        expect(pos.get("nave").y).toBe(2 * (96 + 100) + 60);
+        /*  depth 3 holds chips (40) and c1 (96): row is 96 tall, the
+         *  chips are centred in it  */
+        let row3 = 2 * (96 + 100) + 120 + 100;
+        expect(pos.get("c1").y).toBe(row3 + 48);
+        expect(pos.get("d0").y).toBe(row3 + 48);
+    });
+
+    test("siblings sit side by side; a parent is centred over its children", () => {
         let pos = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100});
+        /*  nave's children: d0 (116), d1 (116), c1 (172) = 424 wide  */
+        expect(pos.get("d1").x - pos.get("d0").x).toBe(126);
+        expect(pos.get("c1").x - pos.get("d1").x).toBe(58 + 10 + 86);
+        let first = pos.get("d0").x - 58;
+        let last = pos.get("c1").x + 86;
+        expect(pos.get("nave").x).toBe((first + last) / 2);
+    });
+
+    test("two trees sit side by side, not overlapped", () => {
+        let pos = layout_tree(
+            [N("a", 100, 50), N("b", 100, 50)], [], {nodesep: 10}
+        );
+        expect(pos.get("a").x).toBe(50);
+        expect(pos.get("b").x).toBe(50 + 100 + 20);
+    });
+});
+
+describe("the tidy tree, read right", () => {
+    test("depths are columns; a column is as wide as its widest card", () => {
+        let pos = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100, direction: "LR"});
         expect(pos.get("es").x).toBe(86);                       /*  172/2  */
         expect(pos.get("norte").x).toBe(172 + 100 + 86);
         expect(pos.get("sur").x).toBe(pos.get("norte").x);
@@ -77,7 +111,7 @@ describe("the tidy tree", () => {
     });
 
     test("siblings stack with the gap; a parent is centred on its children", () => {
-        let pos = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100});
+        let pos = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100, direction: "LR"});
         /*  nave's children: d0 (40), d1 (40), c1 (96) = 196 tall  */
         expect(pos.get("d1").y - pos.get("d0").y).toBe(50);
         expect(pos.get("c1").y - pos.get("d1").y).toBe(20 + 10 + 48);
@@ -89,7 +123,7 @@ describe("the tidy tree", () => {
     test("a parent taller than its children keeps its own height", () => {
         let pos = layout_tree(
             [N("p", 100, 200), N("k", 50, 20)],
-            [{source: "p", target: "k"}], {nodesep: 10, ranksep: 50}
+            [{source: "p", target: "k"}], {nodesep: 10, ranksep: 50, direction: "LR"}
         );
         expect(pos.get("p").y).toBe(100);
         expect(pos.get("k").y).toBe(100);     /*  centred in the parent's block  */
@@ -97,17 +131,17 @@ describe("the tidy tree", () => {
 
     test("two trees are stacked, not overlapped", () => {
         let pos = layout_tree(
-            [N("a", 100, 50), N("b", 100, 50)], [], {nodesep: 10}
+            [N("a", 100, 50), N("b", 100, 50)], [], {nodesep: 10, direction: "LR"}
         );
         expect(pos.get("a").y).toBe(25);
         expect(pos.get("b").y).toBe(25 + 50 + 20);
     });
 
     test("opening a hook does not move what is not under or beside it", () => {
-        let base = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100});
+        let base = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100, direction: "LR"});
         let more = nodes.concat([N("d2", 116, 40)]);
         let more_edges = edges.concat([{source: "nave", target: "d2", rank: 1}]);
-        let pos = layout_tree(more, more_edges, {nodesep: 10, ranksep: 100});
+        let pos = layout_tree(more, more_edges, {nodesep: 10, ranksep: 100, direction: "LR"});
         expect(pos.get("es").x).toBe(base.get("es").x);
         expect(pos.get("d0").y).toBe(base.get("d0").y);     /*  above the new one  */
         expect(pos.get("d1").y).toBe(base.get("d1").y);
@@ -158,19 +192,6 @@ describe("the radial tree", () => {
     });
 });
 
-describe("the outline", () => {
-    test("one node per row, pre-order, indented by depth", () => {
-        let pos = layout_outline(nodes, edges, {nodesep: 10, indent: 40});
-        let rows = [...pos.entries()].sort((a, b) => a[1].y - b[1].y).map((e) => e[0]);
-        expect(rows).toEqual(["es", "norte", "nave", "d0", "d1", "c1", "sur"]);
-        expect(pos.get("es").x).toBe(86);
-        expect(pos.get("nave").x).toBe(2 * 40 + 86);
-        expect(pos.get("d0").x).toBe(3 * 40 + 58);
-        expect(pos.get("es").y).toBe(48);
-        expect(pos.get("norte").y).toBe(96 + 10 + 48);
-    });
-});
-
 describe("a deep tree", () => {
     /*  A self-referent hook -- a place inside a place inside a place --
      *  is as deep as the data says. The walks are iterative for exactly
@@ -193,8 +214,8 @@ describe("a deep tree", () => {
         expect(t.depth.get(`n${DEEP - 1}`)).toBe(DEEP - 1);
     });
 
-    test("the three layouts place every node of it", () => {
-        for(let layout of [layout_tree, layout_outline, layout_radial]) {
+    test("the two layouts place every node of it", () => {
+        for(let layout of [layout_tree, layout_radial]) {
             let pos = layout(deep_nodes, deep_edges);
             expect(pos.size).toBe(DEEP);
             expect(Number.isFinite(pos.get(`n${DEEP - 1}`).x)).toBe(true);

package/src/yui_icons.css

@@ -386,3 +386,9 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32S0 334.3 0 352l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z'/%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='M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32S0 334.3 0 352l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z'/%3E%3C/svg%3E");
 }
+
+/*  A letter, for "labels": the name under a closed graph node.  */
+.yi-font::before {
+    -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");
+}