@diagrammo/dgmo 0.90.0 → 0.91.0

package/dist/{chunk-QRIW46LR.js → chunk-57L2JPP2.js}

@@ -19,7 +19,7 @@ import {
 } from "./chunk-VLC6WNRD.js";
 import {
   tagAttrKey
-} from "./chunk-HX2KJEPD.js";
+} from "./chunk-QKJ6MQXW.js";
 import {
   measureLegendText
 } from "./chunk-I6GGMCTV.js";
@@ -40,6 +40,7 @@ var LEGEND_BOTTOM_GAP = 10;
 function mapLegendGroups(legend) {
   const ramp = legend.ramp;
   const scoreGroup = ramp ? {
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- a blank metric name must still read 'Value'
     name: ramp.metric?.trim() || "Value",
     entries: [],
     gradient: {
@@ -1981,7 +1982,10 @@ function layoutMap(resolvedIn, data, size, opts) {
   const rampHue = resolveColor(resolved.directives.regionMetricColor ?? "", palette) ?? palette.colors.red;
   const rampLow = resolved.directives.regionMetricLowColor ? resolveColor(resolved.directives.regionMetricLowColor, palette) ?? void 0 : void 0;
   const hasRamp = values.length > 0;
-  const VALUE_NAME = hasRamp ? resolved.directives.regionMetric?.trim() || "Value" : null;
+  const VALUE_NAME = hasRamp ? (
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- a blank metric name must still read 'Value'
+    resolved.directives.regionMetric?.trim() || "Value"
+  ) : null;
   const matchColorGroup = (v) => {
     const lv = v.trim().toLowerCase();
     if (lv === "none") return null;

package/dist/{chunk-IIOLFAGJ.js → chunk-5DIBB2QG.js}

@@ -1,9 +1,10 @@
 import {
-  buildPlacedNotes
-} from "./chunk-HTNLLT34.js";
+  searchPlacement
+} from "./chunk-JJUDOR4I.js";
 import {
+  buildPlacedNotes,
   noteCanvasShift
-} from "./chunk-6EK55ART.js";
+} from "./chunk-Q3N7PI3B.js";
 import {
   resolveNotes
 } from "./chunk-O753JUEZ.js";
@@ -69,6 +70,7 @@ function findConnectedComponents(tableIds, relationships) {
   }
   return components;
 }
+var newDagreGraph = () => new dagre.graphlib.Graph({ multigraph: true });
 function layoutComponent(tables, rels, dimMap) {
   const nodePositions = /* @__PURE__ */ new Map();
   const edgePoints = /* @__PURE__ */ new Map();
@@ -87,22 +89,44 @@ function layoutComponent(tables, rels, dimMap) {
       height: dims.height
     };
   }
-  const g = new dagre.graphlib.Graph({ multigraph: true });
-  g.setGraph({ rankdir: "LR", nodesep: 40, ranksep: 80, edgesep: 20 });
-  g.setDefaultEdgeLabel(() => ({}));
-  for (const table of tables) {
-    const dims = dimMap.get(table.id);
-    g.setNode(table.id, { width: dims.width, height: dims.height });
-  }
-  for (const rel of rels) {
-    g.setEdge(
-      rel.source,
-      rel.target,
-      { label: rel.label ?? "" },
-      String(rel.lineNumber)
-    );
-  }
-  dagre.layout(g);
+  const place = (ranker, shuffle) => {
+    const ord = shuffle ?? ((a) => a.slice());
+    const g2 = newDagreGraph();
+    g2.setGraph({
+      rankdir: "LR",
+      ranker,
+      nodesep: 40,
+      ranksep: 80,
+      edgesep: 20
+    });
+    g2.setDefaultEdgeLabel(() => ({}));
+    for (const table of ord(tables)) {
+      const dims = dimMap.get(table.id);
+      g2.setNode(table.id, { width: dims.width, height: dims.height });
+    }
+    for (const rel of ord(rels)) {
+      g2.setEdge(
+        rel.source,
+        rel.target,
+        { label: rel.label ?? "" },
+        String(rel.lineNumber)
+      );
+    }
+    dagre.layout(g2);
+    return g2;
+  };
+  const { g, edgePoints: bent } = searchPlacement("LR", place, (lay) => ({
+    nodes: tables.map((t) => {
+      const p = lay.node(t.id);
+      return { id: t.id, x: p.x, y: p.y, width: p.width, height: p.height };
+    }),
+    edges: rels.map((r) => ({
+      source: r.source,
+      target: r.target,
+      points: lay.edge(r.source, r.target, String(r.lineNumber))?.points ?? []
+    }))
+  }));
+  const routeOf = (i, rel) => bent?.[i] ?? g.edge(rel.source, rel.target, String(rel.lineNumber))?.points ?? [];
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const table of tables) {
     const pos = g.node(table.id);
@@ -112,22 +136,21 @@ function layoutComponent(tables, rels, dimMap) {
     maxX = Math.max(maxX, pos.x + dims.width / 2);
     maxY = Math.max(maxY, pos.y + dims.height / 2);
   }
-  for (const rel of rels) {
-    const ed = g.edge(rel.source, rel.target, String(rel.lineNumber));
-    for (const pt of ed?.points ?? []) {
+  rels.forEach((rel, i) => {
+    const pts = routeOf(i, rel);
+    for (const pt of pts) {
       minX = Math.min(minX, pt.x);
       minY = Math.min(minY, pt.y);
       maxX = Math.max(maxX, pt.x);
       maxY = Math.max(maxY, pt.y);
     }
-    if (rel.label && (ed?.points ?? []).length > 0) {
-      const pts = ed.points;
+    if (rel.label && pts.length > 0) {
       const mid = pts[Math.floor(pts.length / 2)];
       const hw = (measureText(rel.label, EDGE_LABEL_FONT_SIZE) + 8) / 2;
       minX = Math.min(minX, mid.x - hw);
       maxX = Math.max(maxX, mid.x + hw);
     }
-  }
+  });
   for (const table of tables) {
     const pos = g.node(table.id);
     const dims = dimMap.get(table.id);
@@ -137,16 +160,12 @@ function layoutComponent(tables, rels, dimMap) {
       ...dims
     });
   }
-  for (const rel of rels) {
-    const ed = g.edge(rel.source, rel.target, String(rel.lineNumber));
+  rels.forEach((rel, i) => {
     edgePoints.set(
       rel.lineNumber,
-      (ed?.points ?? []).map((pt) => ({
-        x: pt.x - minX,
-        y: pt.y - minY
-      }))
+      routeOf(i, rel).map((pt) => ({ x: pt.x - minX, y: pt.y - minY }))
     );
-  }
+  });
   return {
     nodePositions,
     edgePoints,

package/dist/{chunk-7Z2VFRP5.js → chunk-5U6DXIMV.js}

@@ -1,9 +1,10 @@
 import {
-  buildPlacedNotes
-} from "./chunk-HTNLLT34.js";
+  searchPlacement
+} from "./chunk-JJUDOR4I.js";
 import {
+  buildPlacedNotes,
   noteCanvasShift
-} from "./chunk-6EK55ART.js";
+} from "./chunk-Q3N7PI3B.js";
 import {
   resolveNotes
 } from "./chunk-O753JUEZ.js";
@@ -75,32 +76,51 @@ function computeNodeDimensions(node) {
   const height = headerHeight + fieldsHeight + methodsHeight;
   return { width, height, headerHeight, fieldsHeight, methodsHeight };
 }
+var newDagreGraph = () => new dagre.graphlib.Graph();
 function layoutClassDiagram(parsed, options) {
   if (parsed.classes.length === 0) {
     return { nodes: [], edges: [], width: 0, height: 0 };
   }
-  const g = new dagre.graphlib.Graph();
-  g.setGraph({
-    rankdir: "TB",
-    nodesep: 60,
-    ranksep: 80,
-    edgesep: 20
-  });
-  g.setDefaultEdgeLabel(() => ({}));
   const dimMap = /* @__PURE__ */ new Map();
   for (const node of parsed.classes) {
-    const dims = computeNodeDimensions(node);
-    dimMap.set(node.id, dims);
-    g.setNode(node.id, {
-      label: node.name,
-      width: dims.width,
-      height: dims.height
-    });
+    dimMap.set(node.id, computeNodeDimensions(node));
   }
-  for (const rel of parsed.relationships) {
-    g.setEdge(rel.source, rel.target, { label: rel.label ?? "" });
-  }
-  dagre.layout(g);
+  const place = (ranker, shuffle) => {
+    const ord = shuffle ?? ((a) => a.slice());
+    const g2 = newDagreGraph();
+    g2.setGraph({
+      rankdir: "TB",
+      ranker,
+      nodesep: 60,
+      ranksep: 80,
+      edgesep: 20
+    });
+    g2.setDefaultEdgeLabel(() => ({}));
+    for (const node of ord(parsed.classes)) {
+      const dims = dimMap.get(node.id);
+      g2.setNode(node.id, {
+        label: node.name,
+        width: dims.width,
+        height: dims.height
+      });
+    }
+    for (const rel of ord(parsed.relationships)) {
+      g2.setEdge(rel.source, rel.target, { label: rel.label ?? "" });
+    }
+    dagre.layout(g2);
+    return g2;
+  };
+  const { g, edgePoints } = searchPlacement("TB", place, (lay) => ({
+    nodes: parsed.classes.map((n) => {
+      const p = lay.node(n.id);
+      return { id: n.id, x: p.x, y: p.y, width: p.width, height: p.height };
+    }),
+    edges: parsed.relationships.map((r) => ({
+      source: r.source,
+      target: r.target,
+      points: lay.edge(r.source, r.target)?.points ?? []
+    }))
+  }));
   const notesSuppressed = parsed.options?.["no-notes"] === "on";
   const noteByNode = notesSuppressed || !parsed.notes ? /* @__PURE__ */ new Map() : resolveNotes(
     parsed.notes,
@@ -137,13 +157,13 @@ function layoutClassDiagram(parsed, options) {
       ...note && { note }
     };
   });
-  const layoutEdges = parsed.relationships.map((rel) => {
+  const layoutEdges = parsed.relationships.map((rel, i) => {
     const edgeData = g.edge(rel.source, rel.target);
     const layoutEdge = {
       source: rel.source,
       target: rel.target,
       type: rel.type,
-      points: edgeData?.points ?? [],
+      points: edgePoints?.[i] ?? edgeData?.points ?? [],
       ...rel.label !== void 0 && { label: rel.label },
       lineNumber: rel.lineNumber
     };
@@ -175,6 +195,9 @@ function layoutClassDiagram(parsed, options) {
       );
     }
   }
+  for (const edge of layoutEdges) {
+    for (const pt of edge.points) extend(pt.x, pt.y, pt.x, pt.y);
+  }
   if (!Number.isFinite(bbMinX)) {
     bbMinX = 0;
     bbMinY = 0;

package/dist/{chunk-5M6PMV5Z.js → chunk-5VPWIC6T.js}

@@ -7,10 +7,10 @@ import {
   mutedFill,
   resolveCellColor,
   resolveColorMode
-} from "./chunk-A5EE66RQ.js";
+} from "./chunk-53BJIOLF.js";
 import {
   renderIntegratedLegend
-} from "./chunk-NJYA4QSN.js";
+} from "./chunk-QVKTAU7P.js";
 import {
   layoutInlineHeader
 } from "./chunk-CNUN5GO6.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk-ICLB27PZ.js";
 import {
   tagAttrKey
-} from "./chunk-HX2KJEPD.js";
+} from "./chunk-QKJ6MQXW.js";
 import {
   LEGEND_GROUP_GAP
 } from "./chunk-I6GGMCTV.js";

package/dist/{chunk-SLO22FPS.js → chunk-634LDSN6.js}

@@ -1,6 +1,6 @@
 import {
   GRAPH_DX
-} from "./chunk-7TF3QOOD.js";
+} from "./chunk-TIVMAITN.js";
 import {
   tryCollectNote
 } from "./chunk-KSZHIAI2.js";

package/dist/{chunk-G5BGW4BX.js → chunk-6NO3MNBC.js}

@@ -1,6 +1,6 @@
 import {
   compactNumber
-} from "./chunk-A5EE66RQ.js";
+} from "./chunk-53BJIOLF.js";
 import {
   parseInlineMarkdown
 } from "./chunk-S7W75MIM.js";
@@ -43,11 +43,11 @@ function computeMetrics(parsed) {
 }
 function autoBandColor(pctFrac, palette) {
   const name = pctFrac < 0.5 ? "red" : pctFrac < 0.8 ? "orange" : "green";
-  return resolveColor(name, palette) || name;
+  return resolveColor(name, palette) ?? name;
 }
 function resolvePaint(parsed, palette, isDark, pctFrac) {
   const autoColor = !parsed.options.noAutoColor && parsed.hasTarget ? autoBandColor(pctFrac, palette) : null;
-  const base = parsed.color && resolveColor(parsed.color, palette) || parsed.color || autoColor || getSeriesColors(palette)[0];
+  const base = (parsed.color && resolveColor(parsed.color, palette)) ?? parsed.color ?? autoColor ?? getSeriesColors(palette)[0];
   return {
     base,
     // §1.9 fill family: tint (default) / solid / outline. In outline mode the

package/dist/{chunk-NUYWNKHH.js → chunk-6QEXWMBP.js}

@@ -17,7 +17,7 @@ import {
   stripDefaultModifier,
   tagAttrKey,
   validateTagGroupNames
-} from "./chunk-HX2KJEPD.js";
+} from "./chunk-QKJ6MQXW.js";
 import {
   AliasRegistry,
   GANTT_BOOLEAN_SET,
@@ -326,7 +326,7 @@ function parseGantt(content, palette) {
             // Peel after extractColor — the quotes are what keep a trailing
             // color word inside the label (§2.2).
             label: peelQuotedName(eraExtracted.label),
-            color: eraExtracted.color || null,
+            color: eraExtracted.color ?? null,
             lineNumber
           });
         } else {
@@ -357,7 +357,7 @@ function parseGantt(content, palette) {
             // Peel after extractColor — the quotes are what keep a trailing
             // color word inside the label (§2.2).
             label: peelQuotedName(markerExtracted.label),
-            color: markerExtracted.color || null,
+            color: markerExtracted.color ?? null,
             lineNumber
           });
         } else {
@@ -383,7 +383,7 @@ function parseGantt(content, palette) {
           diagnostics,
           lineNumber
         );
-        const color = extracted.color || seriesColors[currentTagGroup.entries.length % seriesColors.length] || "#888888";
+        const color = extracted.color ?? seriesColors[currentTagGroup.entries.length % seriesColors.length] ?? "#888888";
         const isFirstEntry = currentTagGroup.entries.length === 0;
         currentTagGroup.entries.push({
           value: extracted.label,
@@ -582,7 +582,7 @@ function parseGantt(content, palette) {
           startDate: "",
           endDate: "",
           label: peelQuotedName(eraExtracted.label),
-          color: eraExtracted.color || null,
+          color: eraExtracted.color ?? null,
           lineNumber,
           ...startOff && { offsetStart: startOff },
           ...endOff && { offsetEnd: endOff }
@@ -602,7 +602,7 @@ function parseGantt(content, palette) {
         result.markers.push({
           date: "",
           label: peelQuotedName(markerExtracted.label),
-          color: markerExtracted.color || null,
+          color: markerExtracted.color ?? null,
           lineNumber,
           ...dateOff && { offsetDate: dateOff }
         });
@@ -685,7 +685,7 @@ function parseGantt(content, palette) {
           startDate: eraMatch.start,
           endDate: eraMatch.end,
           label: peelQuotedName(eraExtracted.label),
-          color: eraExtracted.color || null,
+          color: eraExtracted.color ?? null,
           lineNumber
         });
         continue;
@@ -710,7 +710,7 @@ function parseGantt(content, palette) {
         result.markers.push({
           date: markerMatch.iso,
           label: peelQuotedName(markerExtracted.label),
-          color: markerExtracted.color || null,
+          color: markerExtracted.color ?? null,
           lineNumber
         });
         continue;
@@ -1086,7 +1086,7 @@ function parseGantt(content, palette) {
   validateTagGroupNames(result.tagGroups, warn, (line, msg) => {
     const diag = makeDgmoError(line, msg);
     diagnostics.push(diag);
-    if (!result.error) result.error = formatDgmoError(diag);
+    result.error ??= formatDgmoError(diag);
   });
   const activeTagWarning = activeTagNoMatchMessage(
     result.options.activeTag,
@@ -1094,7 +1094,7 @@ function parseGantt(content, palette) {
   );
   if (activeTagWarning) {
     warn(
-      result.options.optionLineNumbers["active-tag"] || 1,
+      result.options.optionLineNumbers["active-tag"] ?? 1,
       activeTagWarning,
       "W_ACTIVE_TAG_NO_MATCH"
     );
@@ -1107,12 +1107,8 @@ function parseGantt(content, palette) {
     result.options.sprintMode = "auto";
   }
   if (result.options.sprintMode) {
-    if (!result.options.sprintLength) {
-      result.options.sprintLength = { amount: 2, unit: "w" };
-    }
-    if (result.options.sprintNumber === null) {
-      result.options.sprintNumber = 1;
-    }
+    result.options.sprintLength ??= { amount: 2, unit: "w" };
+    result.options.sprintNumber ??= 1;
   }
   result.diagnostics.push(...nameAliasMap.finish());
   return result;

package/dist/{chunk-POBNN5DP.js → chunk-7BBRSOKS.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-RE27AX7O.js";
 import {
   parseDgmoChartType
-} from "./chunk-YWRZG6GN.js";
+} from "./chunk-2AM6VA3A.js";
 import {
   chartTypes
 } from "./chunk-MPJQMMBZ.js";
@@ -189,7 +189,7 @@ function frownMark(cx, cy, color) {
 }
 function diagrammoIcon(x, y, size) {
   const s = size / 100;
-  return `<g transform="translate(${x} ${y}) scale(${s})"><rect width="100" height="100" rx="18" fill="#1f2933"/><path d="M41 71 L41 63.51 A28 28 0 1 1 59 63.51 L59 71" fill="none" stroke="#c9a227" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><rect x="36" y="43" width="7" height="9" rx="1.9" fill="#c0504d"/><rect x="45" y="37" width="7" height="15" rx="1.9" fill="#5b9357"/><rect x="54" y="30" width="7" height="22" rx="1.9" fill="#3b6ea5"/><rect x="36" y="75" width="28" height="4.6" rx="2.3" fill="#7d5ba6"/><rect x="36" y="82" width="28" height="4.6" rx="2.3" fill="#7d5ba6"/><rect x="36" y="89" width="28" height="4.6" rx="2.3" fill="#7d5ba6"/></g>`;
+  return `<g transform="translate(${x} ${y}) scale(${s})"><g transform="translate(-3.27 -4.56) scale(1.0911)"><rect x="11" y="8" width="22" height="39.5" rx="2.5" fill="#c0504d"/><rect x="11" y="52.5" width="22" height="22.1" rx="2.5" fill="#5b9357"/><rect x="11" y="79.6" width="22" height="12.4" rx="2.5" fill="#4f96c4"/><path fill="#3a9188" d="M45 11.12 A3 3 0 0 1 48.23 8.12 A42 42 0 0 1 86.52 43.65 A3 3 0 0 1 83.78 47.10 L72.76 47.92 A3 3 0 0 1 69.59 45.47 A25 25 0 0 0 47.68 25.14 A3 3 0 0 1 45 22.16 Z"/><path fill="#7d5ba6" d="M83.78 52.90 A3 3 0 0 1 86.52 56.35 A42 42 0 0 1 74.53 79.87 A3 3 0 0 1 70.13 79.67 L62.99 71.24 A3 3 0 0 1 63.12 67.23 A25 25 0 0 0 69.59 54.53 A3 3 0 0 1 72.76 52.08 Z"/><path fill="#cc7a33" d="M65.43 83.08 A3 3 0 0 1 64.27 87.32 A42 42 0 0 1 48.23 91.88 A3 3 0 0 1 45 88.88 L45 77.84 A3 3 0 0 1 47.68 74.86 A25 25 0 0 0 55.78 72.56 A3 3 0 0 1 59.63 73.69 Z"/></g></g>`;
 }
 function docIcon(x, y, size, color) {
   const s = size / 18;

package/dist/{chunk-NFWRIC2V.js → chunk-AR4QVMWG.js}

@@ -159,7 +159,10 @@ function parseCycle(content) {
           warn(lineNum, "Edge line found outside of a node context.");
           continue;
         }
-        const edgeLabel = bareMatch ? void 0 : labeledMatch[1]?.trim() || void 0;
+        const edgeLabel = bareMatch ? void 0 : (
+          // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- an empty label is stored as no label
+          labeledMatch[1]?.trim() || void 0
+        );
         const rest = (bareMatch ? bareMatch[1] ?? "" : labeledMatch[2] ?? "").trim();
         const edgeSplit = splitNameAndMeta(
           rest,

package/dist/{chunk-JRQ4LBQI.js → chunk-B6EUFLRP.js}

@@ -1,6 +1,6 @@
 import {
   layoutOrg
-} from "./chunk-GQVXYRPC.js";
+} from "./chunk-MI6SJJQU.js";
 import {
   renderCollapseBar,
   renderNodeCard
@@ -10,7 +10,7 @@ import {
 } from "./chunk-24YPR5EH.js";
 import {
   renderIntegratedLegend
-} from "./chunk-NJYA4QSN.js";
+} from "./chunk-QVKTAU7P.js";
 import {
   CARD_RADIUS,
   COLLAPSE_BAR_HEIGHT,
@@ -44,11 +44,11 @@ import {
 } from "./chunk-ICLB27PZ.js";
 import {
   parseOrg
-} from "./chunk-FS2LZBHG.js";
+} from "./chunk-UWJP4JSZ.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-HX2KJEPD.js";
+} from "./chunk-QKJ6MQXW.js";
 import {
   fillModeFromOptions
 } from "./chunk-MPJQMMBZ.js";

package/dist/{chunk-LNQDICFJ.js → chunk-CPGKRI7H.js}

@@ -4,13 +4,13 @@ import {
 import {
   computeNodeSizing,
   layoutPert
-} from "./chunk-64KSPLU2.js";
+} from "./chunk-273GB7WK.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
 import {
   renderIntegratedLegend
-} from "./chunk-NJYA4QSN.js";
+} from "./chunk-QVKTAU7P.js";
 import {
   ARROWHEAD_HEIGHT,
   ARROWHEAD_WIDTH,
@@ -52,7 +52,7 @@ import {
 } from "./chunk-ICLB27PZ.js";
 import {
   parsePert
-} from "./chunk-AAC3XQWV.js";
+} from "./chunk-37QQXKFV.js";
 import {
   addCalendarDays,
   formatDuration,
@@ -65,7 +65,7 @@ import {
   resolveActiveTagGroup,
   resolveGroupTagColor,
   resolveTagColor
-} from "./chunk-HX2KJEPD.js";
+} from "./chunk-QKJ6MQXW.js";
 import {
   LEGEND_HEIGHT
 } from "./chunk-I6GGMCTV.js";
@@ -918,10 +918,7 @@ function renderNodes(root, _defs, resolved, layout, palette, isDark, sizing, onC
     } else {
       band = isCritical ? "red" : null;
     }
-    const g = layer.append("g").attr("class", "pert-node").attr("transform", `translate(${node.x}, ${node.y})`).attr("data-activity-id", node.id).attr("data-line-number", String(r.activity.lineNumber)).attr(
-      "data-group-id",
-      r.activity.groupId !== void 0 ? r.activity.groupId : ""
-    ).attr("data-critical-path", String(isCritical)).attr("data-criticality-band", band ?? "").attr("data-duration-rank", isTopMu ? "top" : isBottomMu ? "bottom" : "");
+    const g = layer.append("g").attr("class", "pert-node").attr("transform", `translate(${node.x}, ${node.y})`).attr("data-activity-id", node.id).attr("data-line-number", String(r.activity.lineNumber)).attr("data-group-id", r.activity.groupId ?? "").attr("data-critical-path", String(isCritical)).attr("data-criticality-band", band ?? "").attr("data-duration-rank", isTopMu ? "top" : isBottomMu ? "bottom" : "");
     if (r.activity.tags) {
       for (const [tagKey, tagValue] of Object.entries(r.activity.tags)) {
         g.attr(`data-tag-${tagKey}`, String(tagValue).toLowerCase());