libpetri 2.0.0 → 2.3.0

package/dist/viewer/index.js

@@ -178,6 +178,447 @@ function directChild(parent, tagName) {
   return null;
 }
 
+// src/viewer/c0-annotations.ts
+function ownTitle(g) {
+  for (const child of Array.from(g.children)) {
+    if (child.tagName === "title") return child.textContent ?? "";
+  }
+  return "";
+}
+function enclosingClusterShortName(node) {
+  const cluster = node.parentElement?.closest("g.cluster");
+  if (!cluster) return "";
+  return ownTitle(cluster).replace(/^cluster_/, "");
+}
+function annotateSvgForC0(svg) {
+  const nodes = Array.from(svg.querySelectorAll("g.node"));
+  for (const node of nodes) {
+    const id = ownTitle(node);
+    if (!id) continue;
+    node.setAttribute("data-id", id);
+    const replicaM = /__rep__([A-Za-z0-9_]+)$/.exec(id);
+    if (replicaM) {
+      node.setAttribute("data-instance", replicaM[1]);
+    } else if (!node.hasAttribute("data-instance")) {
+      const inst = enclosingClusterShortName(node);
+      if (inst) node.setAttribute("data-instance", inst);
+    }
+  }
+  const nodeIndex = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const id = n.getAttribute("data-id");
+    if (id) nodeIndex.set(id, n);
+  }
+  for (const edge of Array.from(svg.querySelectorAll("g.edge"))) {
+    const title = ownTitle(edge);
+    const arrow = title.indexOf("->");
+    if (arrow <= 0) continue;
+    const src = title.slice(0, arrow).trim();
+    const dst = title.slice(arrow + 2).trim();
+    edge.setAttribute("data-src", src);
+    edge.setAttribute("data-dst", dst);
+    const srcInst = nodeIndex.get(src)?.getAttribute("data-instance") ?? "";
+    const dstInst = nodeIndex.get(dst)?.getAttribute("data-instance") ?? "";
+    edge.setAttribute("data-src-cluster", srcInst);
+    edge.setAttribute("data-dst-cluster", dstInst);
+    edge.classList.remove("intra-cluster", "cross-cluster");
+    if (srcInst !== "" && srcInst === dstInst) {
+      edge.classList.add("intra-cluster");
+      edge.setAttribute("data-cluster", srcInst);
+    } else {
+      edge.classList.add("cross-cluster");
+      edge.removeAttribute("data-cluster");
+    }
+  }
+}
+
+// src/viewer/chrome/sidebar.ts
+var SIDEBAR_CLASS = "libpetri-sidebar";
+var CHIP_CLASS = "libpetri-sidebar-chip";
+var CHIP_OFF_CLASS = "is-off";
+function mountSidebar(container, clusters, callbacks) {
+  const visibleClusters = /* @__PURE__ */ new Set();
+  for (const prefix of clusters.keys()) visibleClusters.add(prefix);
+  let includeSharedPlaces = true;
+  let highlightMode = true;
+  const emit = () => {
+    callbacks.onVisibilityChange({
+      visibleClusters: new Set(visibleClusters),
+      includeSharedPlaces
+    });
+  };
+  const root = document.createElement("aside");
+  root.className = SIDEBAR_CLASS;
+  const title = document.createElement("h4");
+  title.className = "libpetri-sidebar-title";
+  title.textContent = `Subnets (${clusters.size})`;
+  root.appendChild(title);
+  const actions = document.createElement("div");
+  actions.className = "libpetri-sidebar-actions";
+  const showAll = document.createElement("button");
+  showAll.type = "button";
+  showAll.textContent = "show all";
+  const hideAll = document.createElement("button");
+  hideAll.type = "button";
+  hideAll.textContent = "hide all";
+  actions.appendChild(showAll);
+  actions.appendChild(hideAll);
+  root.appendChild(actions);
+  const sharedLabel = document.createElement("label");
+  sharedLabel.className = "libpetri-sidebar-checkbox";
+  const sharedCb = document.createElement("input");
+  sharedCb.type = "checkbox";
+  sharedCb.checked = includeSharedPlaces;
+  sharedLabel.appendChild(sharedCb);
+  sharedLabel.appendChild(document.createTextNode(" Shared places"));
+  sharedCb.addEventListener("change", () => {
+    includeSharedPlaces = sharedCb.checked;
+    emit();
+  });
+  root.appendChild(sharedLabel);
+  const hlLabel = document.createElement("label");
+  hlLabel.className = "libpetri-sidebar-checkbox";
+  const hlCb = document.createElement("input");
+  hlCb.type = "checkbox";
+  hlCb.checked = highlightMode;
+  hlLabel.appendChild(hlCb);
+  hlLabel.appendChild(document.createTextNode(" Click node \u2192 highlight"));
+  hlCb.addEventListener("change", () => {
+    highlightMode = hlCb.checked;
+    callbacks.onHighlightModeChange(highlightMode);
+  });
+  root.appendChild(hlLabel);
+  const hint = document.createElement("div");
+  hint.className = "libpetri-sidebar-hint";
+  hint.innerHTML = "Click chip: toggle.<br>Shift-click: isolate.<br>Cmd/Ctrl-click: multi-select.<br>Click empty: clear highlight.";
+  root.appendChild(hint);
+  const chipList = document.createElement("ul");
+  chipList.className = "libpetri-sidebar-chips";
+  const chipMap = /* @__PURE__ */ new Map();
+  for (const cluster of clusters.values()) {
+    const li = document.createElement("li");
+    li.className = CHIP_CLASS;
+    li.style.borderLeftColor = cluster.color;
+    li.dataset.prefix = cluster.prefix;
+    const dot = document.createElement("span");
+    dot.className = "libpetri-sidebar-chip-dot";
+    dot.style.background = cluster.color;
+    const name = document.createElement("span");
+    name.className = "libpetri-sidebar-chip-name";
+    name.textContent = cluster.prefix;
+    const count = document.createElement("span");
+    count.className = "libpetri-sidebar-chip-count";
+    count.textContent = String(cluster.nodeCount);
+    li.appendChild(dot);
+    li.appendChild(name);
+    li.appendChild(count);
+    li.addEventListener("click", (ev) => {
+      const prefix = cluster.prefix;
+      if (ev.shiftKey) {
+        const allOff = [...clusters.keys()].every(
+          (k) => k === prefix ? visibleClusters.has(k) : !visibleClusters.has(k)
+        );
+        visibleClusters.clear();
+        if (allOff) for (const k of clusters.keys()) visibleClusters.add(k);
+        else visibleClusters.add(prefix);
+      } else if (ev.ctrlKey || ev.metaKey) {
+        const anyHidden = [...clusters.keys()].some((k) => !visibleClusters.has(k));
+        if (!anyHidden) {
+          visibleClusters.clear();
+          visibleClusters.add(prefix);
+        } else if (visibleClusters.has(prefix)) {
+          visibleClusters.delete(prefix);
+        } else {
+          visibleClusters.add(prefix);
+        }
+      } else {
+        if (visibleClusters.has(prefix)) visibleClusters.delete(prefix);
+        else visibleClusters.add(prefix);
+      }
+      refreshChips();
+      emit();
+    });
+    chipList.appendChild(li);
+    chipMap.set(cluster.prefix, li);
+  }
+  root.appendChild(chipList);
+  function refreshChips() {
+    for (const [prefix, li] of chipMap) {
+      li.classList.toggle(CHIP_OFF_CLASS, !visibleClusters.has(prefix));
+    }
+  }
+  showAll.addEventListener("click", () => {
+    visibleClusters.clear();
+    for (const k of clusters.keys()) visibleClusters.add(k);
+    includeSharedPlaces = true;
+    sharedCb.checked = true;
+    refreshChips();
+    emit();
+  });
+  hideAll.addEventListener("click", () => {
+    visibleClusters.clear();
+    includeSharedPlaces = false;
+    sharedCb.checked = false;
+    refreshChips();
+    emit();
+  });
+  container.appendChild(root);
+  emit();
+  return {
+    root,
+    dispose() {
+      if (root.parentNode === container) container.removeChild(root);
+    }
+  };
+}
+
+// src/viewer/highlight.ts
+var HIGHLIGHT_CLASSES = ["is-highlight", "is-neighbor", "is-faded"];
+function clearHighlightClasses(svg) {
+  for (const cls of HIGHLIGHT_CLASSES) {
+    for (const el of Array.from(svg.querySelectorAll("." + cls))) {
+      el.classList.remove(cls);
+    }
+  }
+}
+function findAllCopies(svg, focusId) {
+  const focus = svg.querySelector(`g.node[data-id="${cssEscape2(focusId)}"]`);
+  if (!focus) return /* @__PURE__ */ new Set([focusId]);
+  const copies = /* @__PURE__ */ new Set([focusId]);
+  const origLabel = focus.getAttribute("data-replica-of") ?? (focusId.startsWith("p_") ? focusId.slice(2) : null);
+  if (origLabel) {
+    const orig = svg.querySelector(`g.node[data-id="${cssEscape2("p_" + origLabel)}"]`);
+    if (orig) {
+      const id = orig.getAttribute("data-id");
+      if (id) copies.add(id);
+    }
+    for (const sibling of Array.from(
+      svg.querySelectorAll(`g.node[data-replica-of="${cssEscape2(origLabel)}"]`)
+    )) {
+      const id = sibling.getAttribute("data-id");
+      if (id) copies.add(id);
+    }
+  }
+  return copies;
+}
+function applyHighlight(svg, focusId) {
+  clearHighlightClasses(svg);
+  if (focusId === null) return;
+  const copies = findAllCopies(svg, focusId);
+  for (const id of copies) {
+    const n = svg.querySelector(`g.node[data-id="${cssEscape2(id)}"]`);
+    if (n && !n.classList.contains("is-hidden")) n.classList.add("is-highlight");
+  }
+  const neighbors = /* @__PURE__ */ new Set();
+  const pathJunctions = /* @__PURE__ */ new Set();
+  const pathEdges = [];
+  const queue = Array.from(copies);
+  const visited = new Set(copies);
+  const allEdges = Array.from(svg.querySelectorAll("g.edge"));
+  while (queue.length > 0) {
+    const nodeId = queue.shift();
+    for (const e of allEdges) {
+      if (e.classList.contains("is-hidden")) continue;
+      const s = e.getAttribute("data-src");
+      const d = e.getAttribute("data-dst");
+      if (s !== nodeId && d !== nodeId) continue;
+      const otherId = s === nodeId ? d : s;
+      if (!otherId) continue;
+      pathEdges.push(e);
+      if (visited.has(otherId)) continue;
+      visited.add(otherId);
+      if (otherId.startsWith("j_")) {
+        pathJunctions.add(otherId);
+        queue.push(otherId);
+      } else {
+        neighbors.add(otherId);
+      }
+    }
+  }
+  for (const e of pathEdges) e.classList.add("is-highlight");
+  for (const e of allEdges) {
+    if (e.classList.contains("is-hidden") || e.classList.contains("is-highlight")) continue;
+    e.classList.add("is-faded");
+  }
+  for (const n of Array.from(svg.querySelectorAll("g.node"))) {
+    if (n.classList.contains("is-hidden")) continue;
+    const id = n.getAttribute("data-id") ?? "";
+    if (copies.has(id)) continue;
+    if (neighbors.has(id)) n.classList.add("is-neighbor");
+    else if (pathJunctions.has(id)) continue;
+    else n.classList.add("is-faded");
+  }
+  for (const c of Array.from(
+    svg.querySelectorAll("g.cluster:not(.cluster-orchestrator)")
+  )) {
+    if (c.classList.contains("is-hidden")) continue;
+    c.classList.add("is-faded");
+  }
+}
+function cssEscape2(value) {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+
+// src/viewer/replica-tagging.ts
+var REPLICA_RE = /^(p_[A-Za-z0-9_]+)__rep__/;
+function semanticName(placeId) {
+  return placeId.replace(/^p_/, "");
+}
+function tagReplicas(svg) {
+  const originalsWithCopies = /* @__PURE__ */ new Set();
+  const allNodes = Array.from(svg.querySelectorAll("g.node"));
+  for (const g of allNodes) {
+    const title = g.querySelector("title")?.textContent ?? "";
+    const m = REPLICA_RE.exec(title);
+    if (m) originalsWithCopies.add(m[1]);
+  }
+  for (const g of allNodes) {
+    const title = g.querySelector("title")?.textContent ?? "";
+    const replicaMatch = REPLICA_RE.exec(title);
+    let semantic = null;
+    if (replicaMatch) {
+      semantic = semanticName(replicaMatch[1]);
+    } else if (originalsWithCopies.has(title)) {
+      semantic = semanticName(title);
+    }
+    if (semantic === null) continue;
+    g.classList.add("petri-replica");
+    g.setAttribute("data-replica-of", semantic);
+    appendSharedGlyph(g);
+  }
+}
+var SVG_NS = "http://www.w3.org/2000/svg";
+var GLYPH_CLASS = "libpetri-replica-glyph";
+function appendSharedGlyph(g) {
+  if (g.querySelector(`text.${GLYPH_CLASS}`)) return;
+  const shape = g.querySelector("ellipse, circle");
+  if (!shape) return;
+  let cx = 0, cy = 0, rx = 0, ry = 0;
+  if (shape.tagName === "ellipse") {
+    cx = parseFloat(shape.getAttribute("cx") ?? "0");
+    cy = parseFloat(shape.getAttribute("cy") ?? "0");
+    rx = parseFloat(shape.getAttribute("rx") ?? "0");
+    ry = parseFloat(shape.getAttribute("ry") ?? "0");
+  } else {
+    cx = parseFloat(shape.getAttribute("cx") ?? "0");
+    cy = parseFloat(shape.getAttribute("cy") ?? "0");
+    rx = parseFloat(shape.getAttribute("r") ?? "0");
+    ry = rx;
+  }
+  const text = document.createElementNS(SVG_NS, "text");
+  text.setAttribute("class", GLYPH_CLASS);
+  text.setAttribute("x", (cx + rx + 2).toFixed(2));
+  text.setAttribute("y", (cy - ry + 2).toFixed(2));
+  text.setAttribute("text-anchor", "start");
+  text.setAttribute("font-size", "9");
+  text.textContent = "\u21C4";
+  g.appendChild(text);
+}
+
+// src/viewer/visibility.ts
+function computeVisibleOrphans(svg, visibleClusters) {
+  if (visibleClusters.size === 0) return /* @__PURE__ */ new Set();
+  const orphanNodes = Array.from(
+    svg.querySelectorAll("g.node:not([data-instance])")
+  );
+  const orphanIds = /* @__PURE__ */ new Set();
+  for (const n of orphanNodes) {
+    const id = n.getAttribute("data-id");
+    if (id) orphanIds.add(id);
+  }
+  const fwdAdj = /* @__PURE__ */ new Map();
+  const bwdAdj = /* @__PURE__ */ new Map();
+  const link = (m, k, v) => {
+    let s = m.get(k);
+    if (!s) {
+      s = /* @__PURE__ */ new Set();
+      m.set(k, s);
+    }
+    s.add(v);
+  };
+  for (const e of Array.from(svg.querySelectorAll("g.edge"))) {
+    const s = e.getAttribute("data-src") ?? "";
+    const d = e.getAttribute("data-dst") ?? "";
+    if (orphanIds.has(s) && orphanIds.has(d)) {
+      link(fwdAdj, s, d);
+      link(bwdAdj, d, s);
+    }
+  }
+  const seedUpstream = /* @__PURE__ */ new Set();
+  const seedDownstream = /* @__PURE__ */ new Set();
+  for (const e of Array.from(
+    svg.querySelectorAll("g.edge.cross-cluster")
+  )) {
+    const s = e.getAttribute("data-src") ?? "";
+    const d = e.getAttribute("data-dst") ?? "";
+    const sCl = e.getAttribute("data-src-cluster") ?? "";
+    const dCl = e.getAttribute("data-dst-cluster") ?? "";
+    if (orphanIds.has(s) && visibleClusters.has(dCl)) seedUpstream.add(s);
+    if (orphanIds.has(d) && visibleClusters.has(sCl)) seedDownstream.add(d);
+  }
+  const visible = /* @__PURE__ */ new Set();
+  const bfs = (seeds, adj) => {
+    const q = [];
+    for (const s of seeds) {
+      visible.add(s);
+      q.push(s);
+    }
+    while (q.length) {
+      const cur = q.shift();
+      const next = adj.get(cur);
+      if (!next) continue;
+      for (const x of next) {
+        if (!visible.has(x)) {
+          visible.add(x);
+          q.push(x);
+        }
+      }
+    }
+  };
+  bfs(seedUpstream, bwdAdj);
+  bfs(seedDownstream, fwdAdj);
+  return visible;
+}
+function applyVisibility(svg, state) {
+  annotateSvgForC0(svg);
+  const { visibleClusters, includeSharedPlaces } = state;
+  for (const c of Array.from(
+    svg.querySelectorAll("g.cluster:not(.cluster-orchestrator)")
+  )) {
+    const titleEl = c.querySelector(":scope > title");
+    const shortName = (titleEl?.textContent ?? "").replace(/^cluster_/, "");
+    c.classList.toggle("is-hidden", !visibleClusters.has(shortName));
+  }
+  for (const n of Array.from(svg.querySelectorAll("g.node[data-instance]"))) {
+    const inst = n.getAttribute("data-instance") ?? "";
+    n.classList.toggle("is-hidden", !visibleClusters.has(inst));
+  }
+  const visOrphans = computeVisibleOrphans(svg, visibleClusters);
+  for (const n of Array.from(
+    svg.querySelectorAll("g.node:not([data-instance])")
+  )) {
+    const id = n.getAttribute("data-id") ?? "";
+    n.classList.toggle("is-hidden", !visOrphans.has(id));
+  }
+  if (!includeSharedPlaces) {
+    for (const n of Array.from(svg.querySelectorAll("g.node.petri-replica"))) {
+      n.classList.add("is-hidden");
+    }
+  }
+  const nodeById = /* @__PURE__ */ new Map();
+  for (const n of Array.from(svg.querySelectorAll("g.node"))) {
+    const id = n.getAttribute("data-id");
+    if (id) nodeById.set(id, n);
+  }
+  for (const e of Array.from(svg.querySelectorAll("g.edge"))) {
+    const s = e.getAttribute("data-src") ?? "";
+    const d = e.getAttribute("data-dst") ?? "";
+    const sHidden = nodeById.get(s)?.classList.contains("is-hidden") ?? false;
+    const dHidden = nodeById.get(d)?.classList.contains("is-hidden") ?? false;
+    e.classList.toggle("is-hidden", sHidden || dHidden);
+  }
+}
+
 // src/viewer/styles.ts
 var VIEWER_CSS_VARIABLES = [
   "--lpv-bg",
@@ -194,14 +635,66 @@ var VIEWER_CSS_VARIABLES = [
   "--lpv-active-filter-outline",
   "--lpv-legend-bg",
   "--lpv-chip-bg",
-  "--lpv-chip-active-bg"
+  "--lpv-chip-active-bg",
+  // C0 sidebar + replica + highlight (Stage 5)
+  "--lpv-sidebar-bg",
+  "--lpv-sidebar-border",
+  "--lpv-sidebar-text",
+  "--lpv-sidebar-muted",
+  "--lpv-sidebar-chip-bg",
+  "--lpv-sidebar-chip-hover-bg",
+  "--lpv-sidebar-chip-off-opacity",
+  "--lpv-shared-glyph-color",
+  "--lpv-replica-fill",
+  "--lpv-replica-stroke",
+  "--lpv-highlight-stroke",
+  "--lpv-highlight-glow",
+  "--lpv-neighbor-stroke",
+  "--lpv-faded-node-opacity",
+  "--lpv-faded-edge-opacity",
+  "--lpv-faded-cluster-opacity"
 ];
 
+// src/viewer/dot-flatten.ts
+var CLUSTER_OPEN = /^\s*subgraph\s+cluster_[A-Za-z0-9_]+\s*\{\s*$/;
+var ONLY_CLOSE_BRACE = /^\s*\}\s*$/;
+function flattenClusters(dot) {
+  const lines = dot.split("\n");
+  const out = [];
+  let clusterDepth = 0;
+  for (const line of lines) {
+    if (CLUSTER_OPEN.test(line)) {
+      clusterDepth++;
+      continue;
+    }
+    if (clusterDepth > 0) {
+      if (ONLY_CLOSE_BRACE.test(line)) {
+        clusterDepth--;
+        continue;
+      }
+      if (line.includes("[") || line.includes("->")) {
+        out.push(stripClusterEdgeAttrs(line));
+      }
+      continue;
+    }
+    if (line.includes("->") && (line.includes("ltail=") || line.includes("lhead="))) {
+      out.push(stripClusterEdgeAttrs(line));
+      continue;
+    }
+    out.push(line);
+  }
+  return out.join("\n");
+}
+function stripClusterEdgeAttrs(line) {
+  return line.replace(/,\s*ltail="cluster_[^"]*"/g, "").replace(/,\s*lhead="cluster_[^"]*"/g, "").replace(/\[\s*ltail="cluster_[^"]*"\s*,\s*/g, "[").replace(/\[\s*lhead="cluster_[^"]*"\s*,\s*/g, "[").replace(/\[\s*ltail="cluster_[^"]*"\s*\]/g, "[]").replace(/\[\s*lhead="cluster_[^"]*"\s*\]/g, "[]");
+}
+
 // src/viewer/index.ts
 async function mount(dotSource, container, opts = {}) {
   const previousHandle = opts.previousHandle ?? null;
   const preservedCollapsed = previousHandle ? new Set(previousHandle.collapsedPrefixes) : /* @__PURE__ */ new Set();
   const preservedFilter = previousHandle?.activeFilter ?? null;
+  const subnetsMode = opts.subnets ?? previousHandle?.subnets ?? "show";
   if (previousHandle) {
     previousHandle.dispose();
   }
@@ -213,8 +706,10 @@ async function mount(dotSource, container, opts = {}) {
     }
     svg = existing;
   } else {
-    const { renderDotToSvg } = await import("../render-P6GROU7J.js");
-    svg = await renderDotToSvg(dotSource);
+    const renderModule = await import("../render-QK57X4TP.js");
+    const useElk = (opts.layout ?? "elk") === "elk";
+    const renderedDot = subnetsMode === "hide" ? flattenClusters(dotSource) : dotSource;
+    svg = useElk ? await renderModule.renderDotToSvgWithElkLayout(renderedDot) : await renderModule.renderDotToSvg(renderedDot);
     container.innerHTML = "";
     container.appendChild(svg);
   }
@@ -222,10 +717,18 @@ async function mount(dotSource, container, opts = {}) {
   const panzoomInstance = attachPanzoom(svg, opts.panzoom);
   const clusters = discoverClusters(svg);
   paintClusterBorders(clusters);
+  const layoutMode = opts.layout ?? "elk";
+  if (layoutMode === "elk") {
+    tagReplicas(svg);
+    annotateSvgForC0(svg);
+  }
   const collapsedPrefixes = /* @__PURE__ */ new Set();
   let activeFilter = null;
+  let highlightedNodeId = null;
   let disposed = false;
   let chromeRoot = null;
+  let sidebarHandle = null;
+  let highlightModeEnabled = true;
   function ensureChrome() {
     if (!opts.chrome) return;
     if (chromeRoot && chromeRoot.parentNode === container) return;
@@ -234,16 +737,6 @@ async function mount(dotSource, container, opts = {}) {
     chromeRoot.style.position = "absolute";
     chromeRoot.style.inset = "0";
     chromeRoot.style.pointerEvents = "none";
-    const legend = document.createElement("div");
-    legend.className = "diagram-legend";
-    legend.style.pointerEvents = "auto";
-    legend.innerHTML = '<div class="legend-title">Clusters</div>';
-    chromeRoot.appendChild(legend);
-    const strip = document.createElement("div");
-    strip.className = "diagram-filter-strip";
-    strip.style.pointerEvents = "auto";
-    strip.innerHTML = '<span class="filter-strip-label">Show only:</span>';
-    chromeRoot.appendChild(strip);
     const controls = document.createElement("div");
     controls.className = "diagram-controls";
     controls.style.pointerEvents = "auto";
@@ -259,6 +752,19 @@ async function mount(dotSource, container, opts = {}) {
     fsBtn.title = "Toggle fullscreen";
     fsBtn.textContent = "Fullscreen";
     fsBtn.addEventListener("click", () => toggleFullscreen(container, fsBtn));
+    const subnetsBtn = document.createElement("button");
+    subnetsBtn.type = "button";
+    subnetsBtn.className = "diagram-btn btn-subnets";
+    subnetsBtn.title = subnetsMode === "show" ? "Hide subnet groupings" : "Show subnet groupings";
+    subnetsBtn.textContent = subnetsMode === "show" ? "Flat view" : "Subnets view";
+    if (dotSource == null) {
+      subnetsBtn.disabled = true;
+      subnetsBtn.title = "Subnet toggle unavailable for pre-rendered SVG";
+    }
+    subnetsBtn.addEventListener("click", () => {
+      void handle.toggleSubnets();
+    });
+    controls.appendChild(subnetsBtn);
     controls.appendChild(resetBtn);
     controls.appendChild(fsBtn);
     chromeRoot.appendChild(controls);
@@ -266,73 +772,21 @@ async function mount(dotSource, container, opts = {}) {
       container.style.position = "relative";
     }
     container.appendChild(chromeRoot);
-    renderLegend(legend);
-    renderFilterStrip(strip);
+    if (layoutMode === "elk" && subnetsMode === "show" && clusters.size > 0) {
+      sidebarHandle = mountSidebar(container, clusters, {
+        onVisibilityChange: (state) => handle.setVisibility(state),
+        onHighlightModeChange: (enabled) => {
+          highlightModeEnabled = enabled;
+          if (!enabled) handle.highlight(null);
+        }
+      });
+    }
   }
   function toggleFullscreen(host, btn) {
     const isFs = host.classList.toggle("diagram-fullscreen");
     btn.textContent = isFs ? "Exit fullscreen" : "Fullscreen";
     requestAnimationFrame(() => handle.fit());
   }
-  function renderLegend(legend) {
-    legend.innerHTML = '<div class="legend-title">Clusters</div>';
-    for (const cluster of clusters.values()) {
-      const row = document.createElement("div");
-      row.className = "legend-row";
-      row.innerHTML = '<span class="legend-ribbon" style="background:' + cluster.color + '"></span><span class="legend-label"></span><span class="legend-count"></span>';
-      row.querySelector(".legend-label").textContent = cluster.prefix;
-      row.querySelector(".legend-count").textContent = String(cluster.nodeCount);
-      row.addEventListener("click", () => {
-        if (collapsedPrefixes.has(cluster.prefix)) {
-          handle.expand(cluster.prefix);
-        } else {
-          handle.collapse(cluster.prefix);
-        }
-      });
-      legend.appendChild(row);
-    }
-  }
-  function renderFilterStrip(strip) {
-    strip.innerHTML = '<span class="filter-strip-label">Show only:</span>';
-    const allChip = document.createElement("button");
-    allChip.type = "button";
-    allChip.className = "filter-chip filter-chip-all filter-chip-active";
-    allChip.textContent = "all";
-    allChip.addEventListener("click", () => {
-      handle.filter(null);
-    });
-    strip.appendChild(allChip);
-    for (const cluster of clusters.values()) {
-      const chip = document.createElement("button");
-      chip.type = "button";
-      chip.className = "filter-chip";
-      chip.style.borderColor = cluster.color;
-      chip.dataset.prefix = cluster.prefix;
-      chip.innerHTML = '<span class="chip-dot" style="background:' + cluster.color + '"></span>';
-      chip.append(document.createTextNode(cluster.prefix));
-      chip.addEventListener("click", () => {
-        if (activeFilter === cluster.prefix) {
-          handle.filter(null);
-        } else {
-          handle.filter(cluster.prefix);
-        }
-      });
-      strip.appendChild(chip);
-    }
-  }
-  function refreshChromeActiveStates() {
-    if (!chromeRoot) return;
-    const strip = chromeRoot.querySelector(".diagram-filter-strip");
-    if (!strip) return;
-    strip.querySelectorAll(".filter-chip").forEach((chip) => {
-      chip.classList.remove("filter-chip-active");
-    });
-    if (activeFilter === null) {
-      strip.querySelector(".filter-chip-all")?.classList.add("filter-chip-active");
-    } else {
-      strip.querySelector(`.filter-chip[data-prefix="${activeFilter}"]`)?.classList.add("filter-chip-active");
-    }
-  }
   const handle = {
     svg,
     panzoom: panzoomInstance,
@@ -343,6 +797,29 @@ async function mount(dotSource, container, opts = {}) {
     get activeFilter() {
       return activeFilter;
     },
+    get subnets() {
+      return subnetsMode;
+    },
+    setSubnets(mode) {
+      if (dotSource == null) return Promise.resolve(handle);
+      if (mode === subnetsMode) return Promise.resolve(handle);
+      return mount(dotSource, container, {
+        ...opts,
+        previousHandle: handle,
+        subnets: mode
+      }).then((next) => {
+        container.dispatchEvent(
+          new CustomEvent("libpetri-viewer:remount", {
+            bubbles: true,
+            detail: { handle: next, subnets: mode }
+          })
+        );
+        return next;
+      });
+    },
+    toggleSubnets() {
+      return handle.setSubnets(subnetsMode === "show" ? "hide" : "show");
+    },
     collapse(prefix) {
       if (disposed) return;
       const cluster = clusters.get(prefix);
@@ -388,7 +865,6 @@ async function mount(dotSource, container, opts = {}) {
       activeFilter = prefix;
       applyFilter(svg, prefix);
       opts.onClusterFilter?.(prefix);
-      refreshChromeActiveStates();
     },
     resetZoom() {
       if (disposed) return;
@@ -409,6 +885,20 @@ async function mount(dotSource, container, opts = {}) {
     isInsideCollapsedCluster(graphId) {
       return isInsideCollapsedCluster(svg, clusters, collapsedPrefixes, graphId);
     },
+    get highlightedNodeId() {
+      return highlightedNodeId;
+    },
+    highlight(nodeId) {
+      if (disposed) return;
+      if (layoutMode !== "elk") return;
+      highlightedNodeId = nodeId;
+      applyHighlight(svg, nodeId);
+    },
+    setVisibility(state) {
+      if (disposed) return;
+      if (layoutMode !== "elk") return;
+      applyVisibility(svg, state);
+    },
     dispose() {
       if (disposed) return;
       disposed = true;
@@ -416,6 +906,8 @@ async function mount(dotSource, container, opts = {}) {
         panzoomInstance.dispose();
       } catch {
       }
+      sidebarHandle?.dispose();
+      sidebarHandle = null;
       if (chromeRoot && chromeRoot.parentNode === container) {
         container.removeChild(chromeRoot);
       }
@@ -428,6 +920,21 @@ async function mount(dotSource, container, opts = {}) {
   if (preservedFilter !== null) {
     handle.filter(preservedFilter);
   }
+  if (layoutMode === "elk") {
+    svg.addEventListener("click", (ev) => {
+      if (!highlightModeEnabled) return;
+      const target = ev.target;
+      if (!(target instanceof Element)) return;
+      const nodeG = target.closest("g.node");
+      if (!nodeG) {
+        handle.highlight(null);
+        return;
+      }
+      const id = nodeG.getAttribute("data-id");
+      if (!id) return;
+      handle.highlight(id === highlightedNodeId ? null : id);
+    });
+  }
   ensureChrome();
   requestAnimationFrame(() => handle.fit());
   return handle;