@qe-libs/qeviz 0.2.0 → 0.4.0

package/dist/qeviz.umd.js

@@ -599,9 +599,10 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   __name(_Color, "Color");
   let Color = _Color;
   const _WeightedColor = class _WeightedColor extends Color {
-    constructor(base, weight) {
+    constructor(base, weight, alpha) {
       super(base);
       this.weight = weight;
+      this.alpha = alpha;
     }
     // Parse hex → HSV (h in [0, 360), s/v in [0, 1]).
     static toHSV(hex) {
@@ -672,7 +673,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     toString() {
       const { h, v } = _WeightedColor.toHSV(this.base);
       const w = Math.min(1, Math.abs(this.weight));
-      return _WeightedColor.hsvToRgba(h, w, v, w);
+      const a = this.alpha === void 0 ? w : Math.min(1, Math.max(0, this.alpha));
+      return _WeightedColor.hsvToRgba(h, w, v, a);
     }
   };
   __name(_WeightedColor, "WeightedColor");
@@ -2184,9 +2186,22 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       return __privateGet(this, _edge);
     }
     get path() {
-      let _this = __privateGet(this, _edge);
-      let _mid = _this.from_point, head = Tools.Geometry.Line.point_along([[_this.to.x, _this.to.y], _mid], 0.2), nock = Tools.Geometry.Line.point_along([[_this.to.x, _this.to.y], _mid], 0.35), mid = Tools.Geometry.Line.midpoint(head, nock), rot_mid = Tools.Geometry.Line.rotate(_this.line, mid), rot_nock = Tools.Geometry.Line.rotate(_this.line, nock), mid_int0 = Tools.Geometry.Line.intersection([_mid, _this.base_pts[0]], rot_mid), mid_int1 = Tools.Geometry.Line.intersection([_mid, _this.base_pts[1]], rot_mid), nock_int0 = Tools.Geometry.Line.intersection([_mid, _this.base_pts[0]], rot_nock), nock_int1 = Tools.Geometry.Line.intersection([_mid, _this.base_pts[1]], rot_nock);
-      let p = `M${head.join(" ")} ${mid_int0.join(" ")} ${nock_int0.join(" ")}  ${mid.join(" ")} ${nock_int1.join(" ")}  ${mid_int1.join(" ")}z`;
+      const _this = __privateGet(this, _edge);
+      const T = [_this.to.x, _this.to.y];
+      const A = _this.from_point;
+      const [B0, B1] = _this.base_pts;
+      const L = Math.hypot(A[0] - T[0], A[1] - T[1]);
+      const W = Math.hypot(B0[0] - B1[0], B0[1] - B1[1]);
+      if (!(L > 0) || !(W > 0)) return "";
+      const u = [(A[0] - T[0]) / L, (A[1] - T[1]) / L];
+      const b = Math.hypot(B0[0] - T[0], B0[1] - T[1]);
+      const v = [(B0[0] - T[0]) / b, (B0[1] - T[1]) / b];
+      const halfW = /* @__PURE__ */ __name((d) => W / 2 * Math.max(0, 1 - d / L), "halfW");
+      const at = /* @__PURE__ */ __name((d, s) => `${T[0] + u[0] * d + v[0] * s} ${T[1] + u[1] * d + v[1] * s}`, "at");
+      const dh = 0.2 * L;
+      const c = Math.min(0.15 * L, 0.8 * 2 * halfW(dh));
+      const dm = dh + c / 2, dn = dh + c;
+      const p = `M${at(dh, 0)} L${at(dm, halfW(dm))} L${at(dn, halfW(dn))} L${at(dm, 0)} L${at(dn, -halfW(dn))} L${at(dm, -halfW(dm))}z`;
       return p;
     }
   };
@@ -2329,6 +2344,46 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   };
   __name(_Drawable, "Drawable");
   let Drawable = _Drawable;
+  const DEFAULT_EDGE_WIDTH = 0.04;
+  const SATURATION_RANGE = [0.25, 1];
+  const OPACITY_RANGE = [0.3, 1];
+  function rampFor(w, lo, hi, range) {
+    const a = Math.abs(w);
+    if (!(a > 0)) return 0;
+    if (!(hi > lo)) return range[1];
+    const t = Math.min(1, Math.max(0, (a - lo) / (hi - lo)));
+    return range[0] + t * (range[1] - range[0]);
+  }
+  __name(rampFor, "rampFor");
+  const EDGE_WIDTH_PER_EXTENT = 0.011;
+  const TAPERED_OUTLINE_PX = 0.75;
+  const CHEVRON_DARKEN = 0.8;
+  const CHEVRON_HALO_PX = 0.75;
+  const POINT_RADIUS_PER_EXTENT = 6e-3;
+  const UNCONNECTED_NODE_SIZE = 0.6;
+  function widthPerWeight(edgeWidth) {
+    return 2 * edgeWidth;
+  }
+  __name(widthPerWeight, "widthPerWeight");
+  function nodeSizeForEdges(weightSum, widthFrac) {
+    return weightSum * widthFrac / (2 * POINT_RADIUS_PER_EXTENT);
+  }
+  __name(nodeSizeForEdges, "nodeSizeForEdges");
+  function flattenOnWhite(col) {
+    const m = /rgba?\(([^)]+)\)/.exec(col);
+    if (!m) return col;
+    const [r, g, b, a = 1] = m[1].split(",").map(Number);
+    const f = /* @__PURE__ */ __name((c) => Math.round(255 + (c - 255) * a), "f");
+    return `rgb(${f(r)},${f(g)},${f(b)})`;
+  }
+  __name(flattenOnWhite, "flattenOnWhite");
+  function darkenRgba(col, k) {
+    const m = /rgba?\(([^)]+)\)/.exec(col);
+    if (!m) return col;
+    const [r, g, b, a = 1] = m[1].split(",").map(Number);
+    return `rgba(${Math.round(r * k)},${Math.round(g * k)},${Math.round(b * k)},${a})`;
+  }
+  __name(darkenRgba, "darkenRgba");
   const _QELine = class _QELine extends Drawable {
     constructor(__data__, parent, graph, __children__ = new QEArray()) {
       super(__data__, parent, graph, __children__);
@@ -2338,8 +2393,22 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       this.__children__ = __children__;
       this.__name__ = "unnamed-line";
       this._arrow_el = null;
+      this._hit_el = null;
       this.svg_element = this.create();
     }
+    /** Stamp edge identity onto an element so <qe-graph> delegation can resolve
+     *  qe-edge-* events. No-op for non-edges (e.g. axis lines). */
+    _stampEdge(el) {
+      const meta = this.__data__.meta ?? {};
+      if (!meta.isMeanEdge) return;
+      el.setAttribute("data-edge-source", String(meta.source ?? ""));
+      el.setAttribute("data-edge-target", String(meta.target ?? ""));
+      el.setAttribute("data-edge-weight", String(meta.weight ?? 0));
+      el.setAttribute("data-edge-directed", meta.isDirected ? "true" : "false");
+      if (meta.isSelf) el.setAttribute("data-edge-self", "true");
+      if (meta.group != null) el.setAttribute("data-edge-group", String(meta.group));
+      if (meta.unit != null) el.setAttribute("data-edge-unit", String(meta.unit));
+    }
     create() {
       if (this.__data__ instanceof NodeEdge) {
         const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
@@ -2376,24 +2445,28 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       const extent = ((_a = this.graph.__data__.extremes) == null ? void 0 : _a.x_max) ?? 1;
       const meta = this.__data__.meta ?? {};
       if (meta.isMeanEdge) {
+        this._stampEdge(this.svg_element);
         const weight = typeof meta.weight === "number" ? meta.weight : 0;
         const maxW = typeof meta.maxWeight === "number" ? meta.maxWeight : 1;
         const opacity = typeof meta.opacity === "number" ? meta.opacity : Math.min(1, weight / (maxW || 1));
-        const sw = (extent > 0 ? extent : 1) * 0.011 * (weight / (maxW || 1));
+        const ext = extent > 0 ? extent : 1;
+        const sw = typeof meta.widthFrac === "number" ? ext * meta.widthFrac * weight : ext * EDGE_WIDTH_PER_EXTENT * (weight / (maxW || 1));
         const baseColor = this.__data__._color || new Color("#000000");
-        const edgeColor = new WeightedColor(baseColor, opacity).toString();
+        const saturation = typeof meta.saturation === "number" ? meta.saturation : opacity;
+        const edgeColor = new WeightedColor(baseColor, saturation, opacity).toString();
         if (this.__data__ instanceof NodeEdge) {
-          const nodeSize = typeof meta.nodeSize === "number" ? meta.nodeSize : 2;
-          const nodeR = extent * 6e-3 * nodeSize;
-          this.__data__.weight = 2 * nodeR * 0.55 * opacity;
+          this.__data__.weight = sw;
           this.svg_element.setAttribute("d", this.__data__.path);
           this.svg_element.setAttribute("fill", edgeColor);
           this.svg_element.setAttribute("stroke", "none");
         } else if (this.__data__ instanceof TaperedEdge) {
-          this.__data__.weight = sw * 4;
+          this.__data__.weight = sw;
           this.svg_element.setAttribute("d", this.__data__.path);
           this.svg_element.setAttribute("fill", edgeColor);
-          this.svg_element.setAttribute("stroke", "none");
+          this.svg_element.setAttribute("stroke", edgeColor);
+          this.svg_element.setAttribute("stroke-width", String(TAPERED_OUTLINE_PX));
+          this.svg_element.setAttribute("vector-effect", "non-scaling-stroke");
+          this.svg_element.setAttribute("stroke-linejoin", "round");
           if (meta.isDirected) {
             try {
               const arrow = new EdgeArrow(this.__data__);
@@ -2407,20 +2480,39 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                   this.parent.appendChild(this._arrow_el);
                 }
                 this._arrow_el.setAttribute("d", arrowPath);
-                const arrowColor = baseColor.toString();
-                this._arrow_el.setAttribute("fill", arrowColor);
+                this._arrow_el.setAttribute("fill", darkenRgba(flattenOnWhite(edgeColor), CHEVRON_DARKEN));
+                this._arrow_el.setAttribute("stroke", "#ffffff");
+                this._arrow_el.setAttribute("stroke-width", String(CHEVRON_HALO_PX));
+                this._arrow_el.setAttribute("vector-effect", "non-scaling-stroke");
+                this._arrow_el.setAttribute("stroke-linejoin", "round");
               }
             } catch (_) {
             }
           }
         } else {
-          this.svg_element.setAttribute("x1", this.__data__.from.x.toString());
-          this.svg_element.setAttribute("y1", this.__data__.from.y.toString());
-          this.svg_element.setAttribute("x2", this.__data__.to.x.toString());
-          this.svg_element.setAttribute("y2", this.__data__.to.y.toString());
+          const x1 = this.__data__.from.x, y1 = this.__data__.from.y;
+          const x2 = this.__data__.to.x, y2 = this.__data__.to.y;
+          this.svg_element.setAttribute("x1", x1.toString());
+          this.svg_element.setAttribute("y1", y1.toString());
+          this.svg_element.setAttribute("x2", x2.toString());
+          this.svg_element.setAttribute("y2", y2.toString());
           this.svg_element.setAttribute("stroke-width", sw.toString());
           this.svg_element.setAttribute("stroke", edgeColor);
+          this.svg_element.setAttribute("pointer-events", "stroke");
           this.svg_element.removeAttribute("marker-end");
+          if (!this._hit_el) {
+            this._hit_el = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            this._hit_el.setAttribute("stroke", "transparent");
+            this._hit_el.setAttribute("stroke-linecap", "round");
+            this._hit_el.setAttribute("pointer-events", "stroke");
+          }
+          if (!this._hit_el.parentElement) this.parent.appendChild(this._hit_el);
+          this._hit_el.setAttribute("x1", x1.toString());
+          this._hit_el.setAttribute("y1", y1.toString());
+          this._hit_el.setAttribute("x2", x2.toString());
+          this._hit_el.setAttribute("y2", y2.toString());
+          this._hit_el.setAttribute("stroke-width", Math.max(sw, extent * 0.03).toString());
+          this._stampEdge(this._hit_el);
         }
       } else {
         this.svg_element.setAttribute("x1", this.__data__.from.x.toString());
@@ -2434,10 +2526,11 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
     }
     draw() {
-      var _a, _b;
-      (_a = this.parent) == null ? void 0 : _a.appendChild(this.svg_element);
+      var _a, _b, _c;
+      if (this._hit_el) (_a = this.parent) == null ? void 0 : _a.appendChild(this._hit_el);
+      (_b = this.parent) == null ? void 0 : _b.appendChild(this.svg_element);
       if (this._arrow_el) {
-        (_b = this.parent) == null ? void 0 : _b.appendChild(this._arrow_el);
+        (_c = this.parent) == null ? void 0 : _c.appendChild(this._arrow_el);
       }
     }
   };
@@ -2467,8 +2560,23 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
      *  (≈ 1–2 % of the coordinate half-extent for a typical ENA network).
      */
     computeRadius() {
-      const extent = this.graph.__data__.extremes.x_max;
-      return (extent > 0 ? extent : 1) * 6e-3 * this.__data__.size;
+      var _a;
+      const r = this.baseRadius();
+      const cap = (_a = this.__data__.meta) == null ? void 0 : _a.maxRadius;
+      return typeof cap === "number" && cap > 0 ? Math.min(r, cap) : r;
+    }
+    baseRadius() {
+      var _a, _b, _c, _d;
+      const extent = this.graph.__data__.extremes.x_max || 1;
+      const sizeScale = ((_a = this.__data__.meta) == null ? void 0 : _a.sizeScale) ?? 1;
+      if ((_b = this.__data__.meta) == null ? void 0 : _b.fixedSize) {
+        const rect = (_d = (_c = this.graph.svg_element) == null ? void 0 : _c.getBoundingClientRect) == null ? void 0 : _d.call(_c);
+        const zoom = this.graph.zoom_level || 1;
+        const pxPerUnit = rect && rect.width > 0 ? rect.width / (2 * extent) : 1;
+        const targetPx = this.__data__.size * 2 * sizeScale;
+        return targetPx / pxPerUnit / zoom;
+      }
+      return extent * POINT_RADIUS_PER_EXTENT * this.__data__.size * sizeScale;
     }
     /** Optional halo stroke (e.g. white outline on unit points to separate
      *  overlapping dots in dense clusters). Width scales with the dot so it holds
@@ -2484,6 +2592,11 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       const tag = this.isSquare ? "rect" : "circle";
       const el = document.createElementNS("http://www.w3.org/2000/svg", tag);
       el.setAttribute("data-point-id", this.__data__.ID);
+      const meta = this.__data__.meta ?? {};
+      if (meta.kind) el.setAttribute("data-kind", meta.kind);
+      if (meta.name != null) el.setAttribute("data-name", String(meta.name));
+      if (meta.group != null) el.setAttribute("data-group", String(meta.group));
+      if (meta.unit != null) el.setAttribute("data-unit", String(meta.unit));
       el.setAttribute("fill", this.__data__.color.toString());
       this.applyStroke(el);
       const r = this.computeRadius();
@@ -2498,9 +2611,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         el.setAttribute("r", r.toString());
       }
       this.svg_element = el;
-      el.addEventListener("click", (event) => {
-        console.log("Point clicked: ", this.__data__);
-        event.stopPropagation();
+      el.addEventListener("click", () => {
         this.__data__.active = !this.__data__.active;
         this.update();
         const pointEvent = new CustomEvent("point-clicked", {
@@ -2847,6 +2958,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       this.customX = customX;
       this.customY = customY;
       this._visible = false;
+      this._offsetX = 0;
+      this._offsetY = 0;
+      this.pinned = false;
       this.svg_element = this._create();
       if (displayMode === Label.DISPLAY_TYPES.ON) {
         this._visible = true;
@@ -2860,10 +2974,52 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       const el = document.createElementNS("http://www.w3.org/2000/svg", "text");
       el.textContent = this.text;
       el.setAttribute("data-label-for", this.point.ID);
-      el.setAttribute("pointer-events", "none");
+      el.setAttribute("pointer-events", "auto");
+      el.style.cursor = "grab";
+      this._attachDrag(el);
       this.parent.appendChild(el);
       return el;
     }
+    /** Drag to reposition; pins the label open and emits qe-label-move on drop. */
+    _attachDrag(el) {
+      el.addEventListener("mousedown", (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const svg = el.ownerSVGElement;
+        if (!svg) return;
+        const toUser = /* @__PURE__ */ __name((cx, cy) => {
+          const p = svg.createSVGPoint();
+          p.x = cx;
+          p.y = cy;
+          const m = svg.getScreenCTM();
+          return m ? p.matrixTransform(m.inverse()) : { x: 0, y: 0 };
+        }, "toUser");
+        const start = toUser(ev.clientX, ev.clientY);
+        const baseX = this._offsetX, baseY = this._offsetY;
+        el.style.cursor = "grabbing";
+        const onMove = /* @__PURE__ */ __name((e) => {
+          const p = toUser(e.clientX, e.clientY);
+          this._offsetX = baseX + (p.x - start.x);
+          this._offsetY = baseY + (p.y - start.y);
+          this.pinned = true;
+          this._visible = true;
+          this.svg_element.setAttribute("display", "block");
+          this.update();
+        }, "onMove");
+        const onUp = /* @__PURE__ */ __name(() => {
+          document.removeEventListener("mousemove", onMove);
+          document.removeEventListener("mouseup", onUp);
+          el.style.cursor = "grab";
+          this.graph.dispatchEvent(new CustomEvent("qe-label-move", {
+            detail: { id: this.point.ID, transform: { x: this._offsetX, y: this._offsetY } },
+            bubbles: true,
+            composed: true
+          }));
+        }, "onUp");
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", onUp);
+      });
+    }
     /**
      * Recompute position and font-size from current graph extents.
      * No-ops when the label is hidden (AUTO/CLICK modes while not hovered/clicked).
@@ -2912,6 +3068,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
       this.svg_element.setAttribute("x", x.toString());
       this.svg_element.setAttribute("y", y.toString());
+      if (this._offsetX || this._offsetY) {
+        this.svg_element.setAttribute("transform", `translate(${this._offsetX}, ${this._offsetY})`);
+      }
       this.svg_element.setAttribute("font-size", fontSize.toString());
       this.svg_element.setAttribute("font-family", "system-ui, sans-serif");
       this.svg_element.setAttribute("font-weight", "500");
@@ -2925,6 +3084,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       this.update();
     }
     hide() {
+      if (this.pinned) return;
       this._visible = false;
       this.svg_element.setAttribute("display", "none");
     }
@@ -3007,6 +3167,14 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     return { halfW: t95 * seX, halfH: t95 * seY };
   }
   __name(computeCIRect, "computeCIRect");
+  const MEAN_MAX_FRACTION_OF_INTERVAL = 0.5;
+  function capMeanToInterval(meanPt, halfW, halfH) {
+    if (!meanPt) return;
+    const half = Math.min(Math.abs(halfW), Math.abs(halfH));
+    if (!(half > 0)) return;
+    meanPt.meta = { ...meanPt.meta ?? {}, maxRadius: half * MEAN_MAX_FRACTION_OF_INTERVAL };
+  }
+  __name(capMeanToInterval, "capMeanToInterval");
   function readIntervalBounds(row, dim0, dim1) {
     const get = /* @__PURE__ */ __name((col) => {
       const i = row.names.indexOf(col);
@@ -3020,6 +3188,11 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     return { x_low: xLow, x_high: xHigh, y_low: yLow, y_high: yHigh };
   }
   __name(readIntervalBounds, "readIntervalBounds");
+  function parseColorScale(attr) {
+    const a = attr == null ? void 0 : attr.trim().toLowerCase();
+    return a === "plot" || a === "absolute" ? a : "model";
+  }
+  __name(parseColorScale, "parseColorScale");
   function parseLabelMode(attr, defaultMode) {
     switch (attr == null ? void 0 : attr.toLowerCase()) {
       case "on":
@@ -3053,6 +3226,13 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       this._axisXText = null;
       this._axisYText = null;
       this._axisLabelEls = /* @__PURE__ */ new Map();
+      this._magnifyText = null;
+      this._magnifyEl = null;
+      this._animateMs = 0;
+      this._tweenRaf = null;
+      this._highlight = { edges: /* @__PURE__ */ new Set(), nodes: /* @__PURE__ */ new Set() };
+      this._highlightGroup = null;
+      this._tooltipEl = null;
       this.graph = this;
       this.parent = null;
       this.__data__ = new Graph(DefaultGraphOptions);
@@ -3064,6 +3244,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         if (this._vizena && e.target !== this._vizena) return;
         const model = e.detail;
         if (!model) return;
+        this._animateMs = this.hasAttribute("animate") ? parseInt(this.getAttribute("animate") || "", 10) || 300 : 0;
+        const tweenFrom = this._animateMs > 0 && this._hasModel ? this._captureTween() : null;
         this._hasModel = true;
         const dims = model.dimensions;
         const unitIdCol = model.unit_id_col;
@@ -3072,6 +3254,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         const config = this._readLayerConfig();
         this._showAxes = config.showAxes;
         this._axisXText = config.axisXLabel === null ? null : config.axisXLabel || String((dims == null ? void 0 : dims[0]) ?? "x");
+        this._magnifyText = config.edgeMagnify == null ? null : `(scaled ${config.edgeMagnify.toFixed(1)}x)`;
         this._axisYText = config.axisYLabel === null ? null : config.axisYLabel || String((dims == null ? void 0 : dims[1]) ?? "y");
         const groupColorMap = {};
         if (groupColName && ((_a = model.points) == null ? void 0 : _a.names)) {
@@ -3140,8 +3323,16 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
               const colorStr = group ? groupColorMap[group] ?? "#888888" : "#888888";
               if (showUnitPoints) {
                 const pt = rowToPoint(row, unitIdCol, colorStr, pointScale);
-                pt.size = 2.5;
-                pt.meta = { ...pt.meta ?? {}, stroke: "#ffffff" };
+                pt.size = config.pointSize ?? 2.5;
+                pt.meta = {
+                  ...pt.meta ?? {},
+                  stroke: "#ffffff",
+                  kind: "point",
+                  name: pt.ID,
+                  group: group ?? void 0,
+                  unit: pt.ID,
+                  fixedSize: config.pointFixedSize
+                };
                 this.__data__.points.set(pt.ID, pt);
                 pointsLayer.__data__.objects.set(pt.ID, pt);
               }
@@ -3191,19 +3382,26 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                   const meanPt = new Point({
                     ID: `mean-${group}`,
                     dimensions: [mx, my],
-                    meta: { group }
+                    meta: { kind: "mean", name: group, group, fixedSize: config.meanFixedSize }
                   });
                   meanPt.color = new Color(color);
                   meanPt.size = 4;
                   meanPt.shape = "rect";
                   this.__data__.points.set(meanPt.ID, meanPt);
                   pointsLayer.__data__.objects.set(meanPt.ID, meanPt);
-                  const bounds = readIntervalBounds(row, dims[0], dims[1]);
-                  if (bounds) {
+                  const bounds = config.showCI ? readIntervalBounds(row, dims[0], dims[1]) : null;
+                  if (!bounds) {
+                    const stale = this._ciRects.get(group);
+                    if (stale) {
+                      stale.remove();
+                      this._ciRects.delete(group);
+                    }
+                  } else {
                     const rect_x = bounds.x_low * pointScale;
                     const rect_y = -bounds.y_high * pointScale;
                     const rect_width = (bounds.x_high - bounds.x_low) * pointScale;
                     const rect_height = (bounds.y_high - bounds.y_low) * pointScale;
+                    capMeanToInterval(meanPt, rect_width / 2, rect_height / 2);
                     let el = this._ciRects.get(group);
                     if (!el) {
                       el = document.createElementNS("http://www.w3.org/2000/svg", "rect");
@@ -3229,7 +3427,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                   const meanPt = new Point({
                     ID: `mean-${group}`,
                     dimensions: [x / n * pointScale, -(y / n) * pointScale],
-                    meta: { group }
+                    meta: { kind: "mean", name: group, group, fixedSize: config.meanFixedSize }
                   });
                   meanPt.color = new Color(color);
                   meanPt.size = 4;
@@ -3257,6 +3455,11 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                       const rect_y = -bounds.y_high * pointScale;
                       const rect_width = (bounds.x_high - bounds.x_low) * pointScale;
                       const rect_height = (bounds.y_high - bounds.y_low) * pointScale;
+                      capMeanToInterval(
+                        this.__data__.points.get(`mean-${group}`),
+                        rect_width / 2,
+                        rect_height / 2
+                      );
                       let el = this._ciRects.get(group);
                       if (!el) {
                         el = document.createElementNS("http://www.w3.org/2000/svg", "rect");
@@ -3284,6 +3487,11 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
                       const rawVarY = y2 / n - μy * μy;
                       const { halfW, halfH } = computeCIRect(rawVarX, rawVarY, n, pointScale);
                       const cx = μx * pointScale, cy = -μy * pointScale;
+                      capMeanToInterval(
+                        this.__data__.points.get(`mean-${group}`),
+                        halfW,
+                        halfH
+                      );
                       let el = this._ciRects.get(group);
                       if (!el) {
                         el = document.createElementNS("http://www.w3.org/2000/svg", "rect");
@@ -3456,6 +3664,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
           model.nodes.rows().forEach((row) => {
             const pt = rowToPoint(row, nodeIdCol, "#444444");
             pt.size = 2;
+            pt.meta = { ...pt.meta ?? {}, kind: "node", name: pt.ID };
             nodeLayer.__data__.objects.set(pt.ID, pt);
           });
           if (edgesEnabled && edgeLayer && ((_l = model.edges) == null ? void 0 : _l.rows)) {
@@ -3554,21 +3763,46 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
               });
             }
             const isDirected = !!model.directed;
-            const nonSelfWeights = drawEdges.filter((e2) => e2.pair[0] !== e2.pair[1]).map((e2) => e2.weight);
-            const maxEdgeWeight = nonSelfWeights.length > 0 ? Math.max(...nonSelfWeights) : 1e-9;
-            const selfWeights = drawEdges.filter((e2) => e2.pair[0] === e2.pair[1]).map((e2) => e2.weight);
-            const maxSelfWeight = selfWeights.length > 0 ? Math.max(...selfWeights) : 0;
+            const widthFrac = widthPerWeight(config.edgeWidth) * (config.edgeMagnify ?? 1);
+            const rangeOf = /* @__PURE__ */ __name((ws) => {
+              const nz = ws.map(Math.abs).filter((v) => v > 0);
+              return nz.length ? [Math.min(...nz), Math.max(...nz)] : [0, 0];
+            }, "rangeOf");
+            const modelRange = /* @__PURE__ */ __name((self2) => {
+              const vals = [];
+              edgePairs.forEach(({ col, pair }) => {
+                if (pair[0] === pair[1] !== self2) return;
+                const column = model.edges.col(col);
+                if (column) for (const v of column) vals.push(Number(v));
+              });
+              return rangeOf(vals);
+            }, "modelRange");
+            const plotRange = /* @__PURE__ */ __name((self2) => rangeOf(drawEdges.filter((e2) => e2.pair[0] === e2.pair[1] === self2).map((e2) => e2.weight)), "plotRange");
+            const cscale = config.edgeColorScale;
+            const colourRange = /* @__PURE__ */ __name((self2) => cscale === "plot" ? plotRange(self2) : modelRange(self2), "colourRange");
+            const lineRange = colourRange(false), selfRange = colourRange(true);
+            const colourOf = /* @__PURE__ */ __name((w, self2) => {
+              if (cscale === "absolute") {
+                const a = Math.min(1, Math.abs(w));
+                return { saturation: a, opacity: a };
+              }
+              const [lo, hi] = self2 ? selfRange : lineRange;
+              return { saturation: rampFor(w, lo, hi, SATURATION_RANGE), opacity: rampFor(w, lo, hi, OPACITY_RANGE) };
+            }, "colourOf");
             const nodeWeightSum = {};
             drawEdges.forEach(({ pair, weight }) => {
               const isSelf = pair[0] === pair[1];
               if (isSelf && !isDirected) return;
-              nodeWeightSum[pair[0]] = (nodeWeightSum[pair[0]] ?? 0) + weight;
-              if (!isSelf) {
-                nodeWeightSum[pair[1]] = (nodeWeightSum[pair[1]] ?? 0) + weight;
+              const add = /* @__PURE__ */ __name((id) => {
+                nodeWeightSum[id] = (nodeWeightSum[id] ?? 0) + Math.abs(weight);
+              }, "add");
+              if (isDirected) {
+                add(pair[1]);
+                return;
               }
+              add(pair[0]);
+              add(pair[1]);
             });
-            const maxNodeWeight = Math.max(1, ...Object.values(nodeWeightSum));
-            const nodeSizes = {};
             model.nodes.rows().forEach((row) => {
               const codeIdx = row.names.indexOf(nodeIdCol);
               const id = codeIdx >= 0 ? String(row[codeIdx]) : "";
@@ -3576,8 +3810,12 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
               const pt = nodeLayer.__data__.objects.get(id);
               if (!pt) return;
               const w = nodeWeightSum[id] ?? 0;
-              pt.size = 2 + w / maxNodeWeight * 3;
-              nodeSizes[id] = pt.size;
+              const unconnected = !(w > 0);
+              pt.size = unconnected ? config.hideUnconnectedNodes ? 0 : UNCONNECTED_NODE_SIZE : nodeSizeForEdges(w, widthFrac);
+              pt.meta = {
+                ...pt.meta ?? {},
+                hidden: unconnected && config.hideUnconnectedNodes
+              };
             });
             const totalWeightByPair = {};
             if (isDirected) {
@@ -3592,8 +3830,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
               if (!fromNode || !toNode) return;
               const isSelf = pair[0] === pair[1];
               if (isSelf && !isDirected) return;
-              const classMax = isSelf ? Math.max(maxSelfWeight, 1e-9) : maxEdgeWeight;
-              const opacity = Math.min(1, weight / classMax);
+              const { saturation, opacity } = colourOf(weight, isSelf);
               const fromPt = new Point({ ID: `${pair[0]}-src`, dimensions: [fromNode.x, fromNode.y], meta: {} });
               const toPt = new Point({ ID: `${pair[1]}-dst`, dimensions: [toNode.x, toNode.y], meta: {} });
               let edgeLine;
@@ -3617,16 +3854,17 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
               edgeLine.meta = {
                 isMeanEdge: true,
                 weight,
-                // NodeEdge compares within the self-loop class; cross-pair edges
-                // compare within their own class.  Store the correct denominator
-                // so QELine.update() can compute opacity and display size properly.
-                maxWeight: isSelf ? maxSelfWeight : maxEdgeWeight,
+                // Width per unit weight (extent units), shared by all marks.
+                widthFrac,
+                saturation,
                 opacity,
                 isDirected,
                 isSelf,
-                // nodeSize is needed by QELine.update() to compute the NodeEdge
-                // display radius at update time (when extremes.x_max is available).
-                nodeSize: isSelf ? nodeSizes[pair[0]] ?? 2 : void 0
+                // Identity for the qe-edge-* interaction events.
+                source: pair[0],
+                target: pair[1],
+                group: groupAttr ?? void 0,
+                unit: unitAttr ?? void 0
               };
               const targetLayer = isSelf ? edgenodeLayer ?? edgeLayer : edgeLayer;
               targetLayer.__data__.objects.set(edgeLine.ID, edgeLine);
@@ -3634,7 +3872,15 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
             edgeLayer.__data__.__state__.setVariable("layer_updated", edgeLayer.__data__);
             if (edgenodeLayer) edgenodeLayer.__data__.__state__.setVariable("layer_updated", edgenodeLayer.__data__);
           }
-          if (labelSvg && labelNodes !== 0) {
+          const nodesVisible = config.showNodes;
+          if (nodeLayer.svg_element) {
+            nodeLayer.svg_element.style.display = nodesVisible ? "" : "none";
+          }
+          if (!nodesVisible) {
+            this._nodeLabels.forEach((lbl) => lbl.remove());
+            this._nodeLabels.clear();
+          }
+          if (labelSvg && labelNodes !== 0 && nodesVisible) {
             this._nodeLabels.forEach((lbl, id) => {
               if (!nodeLayer.__data__.objects.get(id)) {
                 lbl.remove();
@@ -3642,11 +3888,17 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
               }
             });
             model.nodes.rows().forEach((row) => {
+              var _a2, _b2;
               const codeIdx = row.names.indexOf(nodeIdCol);
               const id = codeIdx >= 0 ? String(row[codeIdx]) : "";
               if (!id) return;
               const pt = nodeLayer.__data__.objects.get(id);
               if (!pt) return;
+              if ((_a2 = pt.meta) == null ? void 0 : _a2.hidden) {
+                (_b2 = this._nodeLabels.get(id)) == null ? void 0 : _b2.remove();
+                this._nodeLabels.delete(id);
+                return;
+              }
               let lbl = this._nodeLabels.get(id);
               if (!lbl) {
                 lbl = new QELabel(id, pt, labelSvg, this, labelNodes);
@@ -3663,6 +3915,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         if (axisPointsLayer) this.__data__.__state__.setVariable("graph_updated_axis_points", axisPointsLayer.__data__.objects);
         if (axisLinesLayer) this.__data__.__state__.setVariable("graph_updated_axis_lines", axisLinesLayer.__data__.objects);
         this.update();
+        if (tweenFrom) this._runTween(tweenFrom);
       });
     }
     static get observedAttributes() {
@@ -3703,6 +3956,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     // should render.  Called once at the top of every model-updated handler so
     // all rendering decisions are derived from a single snapshot.
     _readLayerConfig() {
+      var _a;
       const nodesEl = this.querySelector("qe-nodes");
       const meansEl = this.querySelector("qe-means");
       const pointsEl = this.querySelector("qe-points");
@@ -3711,11 +3965,18 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       const axesEl = this.querySelector("qe-axes");
       const labelsShorthand = this.getAttribute("labels");
       return {
-        // Nodes — always rendered (coordinate anchors); <qe-nodes> controls labels.
+        // Nodes — always placed from the model (they anchor the coordinate
+        // space); <qe-nodes> presence draws them, like every other layer.
         labelNodes: parseLabelMode(
           (nodesEl == null ? void 0 : nodesEl.getAttribute("label")) ?? this.getAttribute("label-nodes") ?? labelsShorthand,
           Label.DISPLAY_TYPES.ON
         ),
+        showNodes: !!nodesEl,
+        edgeWidth: (() => {
+          const v = Number(this.getAttribute("edge-width"));
+          return Number.isFinite(v) && v > 0 && v <= 1 ? v : DEFAULT_EDGE_WIDTH;
+        })(),
+        hideUnconnectedNodes: ((_a = nodesEl == null ? void 0 : nodesEl.getAttribute("unconnected")) == null ? void 0 : _a.toLowerCase()) === "hide",
         scalePoints: this.getAttribute("scale-points") !== "false",
         // Means — presence of <qe-means> = show; absence = hide.
         showMeans: !!meansEl,
@@ -3725,18 +3986,28 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
           (meansEl == null ? void 0 : meansEl.getAttribute("label")) ?? this.getAttribute("label-means") ?? labelsShorthand,
           Label.DISPLAY_TYPES.ON
         ),
+        // fixed-size keeps mean markers a constant on-screen px size (webENA parity).
+        meanFixedSize: !!meansEl && meansEl.hasAttribute("fixed-size"),
         // Points — presence of <qe-points> = show unit dots.
         showPoints: !!pointsEl,
         labelPoints: parseLabelMode(
           (pointsEl == null ? void 0 : pointsEl.getAttribute("label")) ?? this.getAttribute("label-points") ?? labelsShorthand,
           Label.DISPLAY_TYPES.OFF
         ),
+        pointSize: (pointsEl == null ? void 0 : pointsEl.getAttribute("size")) ? parseFloat(pointsEl.getAttribute("size")) : null,
+        // fixed-size keeps unit dots a constant on-screen px size (webENA parity).
+        pointFixedSize: !!pointsEl && pointsEl.hasAttribute("fixed-size"),
         // Edges — presence of <qe-edges> = draw a network.
         showEdges: !!edgesEl,
         edgeGroup: (edgesEl == null ? void 0 : edgesEl.getAttribute("group")) ?? null,
         edgeUnit: (edgesEl == null ? void 0 : edgesEl.getAttribute("unit")) ?? null,
         edgeCompare: (edgesEl == null ? void 0 : edgesEl.getAttribute("compare")) ?? null,
         edgeAlso: (edgesEl == null ? void 0 : edgesEl.getAttribute("also")) ?? null,
+        edgeColorScale: parseColorScale((edgesEl == null ? void 0 : edgesEl.getAttribute("color-scale")) ?? null),
+        edgeMagnify: (edgesEl == null ? void 0 : edgesEl.hasAttribute("magnify")) ? (() => {
+          const v = Number(edgesEl.getAttribute("magnify"));
+          return Number.isFinite(v) && v > 0 ? v : 1;
+        })() : null,
         // Trajectories — presence of <qe-trajectories> = draw cognitive trajectories
         showTrajectories: !!trajectoriesEl,
         trajectoryUnits: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("units")) ?? null,
@@ -3777,6 +4048,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       if (w) this.style.width = isNaN(Number(w)) ? w : `${w}px`;
       if (h) this.style.height = isNaN(Number(h)) ? h : `${h}px`;
       this.appendChild(this.svg_element);
+      _QEGraphElement._instances.add(this);
       this._childObserver = new MutationObserver(() => this._scheduleRerender());
       this._childObserver.observe(this, {
         childList: true,
@@ -3787,10 +4059,14 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
           "unit",
           "compare",
           "also",
+          "color-scale",
+          "magnify",
           "groups",
           "confidence",
           "label",
+          "unconnected",
           "scale-points",
+          "edge-width",
           "labels",
           "label-nodes",
           "label-means",
@@ -3806,7 +4082,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
           "stroke-width-range",
           "opacity-range",
           "x",
-          "y"
+          "y",
+          "size",
+          "fixed-size"
         ]
       });
       const forId = this.getAttribute("for");
@@ -3826,9 +4104,275 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
     }
     disconnectedCallback() {
-      var _a;
+      var _a, _b;
       (_a = this._childObserver) == null ? void 0 : _a.disconnect();
       this._childObserver = null;
+      _QEGraphElement._instances.delete(this);
+      (_b = this._tooltipEl) == null ? void 0 : _b.remove();
+      this._tooltipEl = null;
+    }
+    /** All connected <qe-graph> instances (newest membership order). */
+    static instances() {
+      return [..._QEGraphElement._instances];
+    }
+    /** Look up a graph by its `id` or `plot-group` attribute. */
+    static getGraph(key) {
+      for (const g of _QEGraphElement._instances) {
+        if (g.id === key || g.getAttribute("plot-group") === key) return g;
+      }
+      return null;
+    }
+    /** Resolved code nodes with their current graph-space coordinates. */
+    getNodes() {
+      const layer = this.__children__.search("__children__", "nodes");
+      if (!layer) return [];
+      return [...layer.__data__.objects.values()].map((o) => {
+        var _a;
+        return {
+          id: o.ID,
+          name: ((_a = o.meta) == null ? void 0 : _a.name) ?? o.ID,
+          x: o.x,
+          y: o.y
+        };
+      });
+    }
+    /** Resolved edges of the current network with weights and direction. */
+    getEdges() {
+      const collect = /* @__PURE__ */ __name((name) => {
+        const l = this.__children__.search("__children__", name);
+        return l ? [...l.__data__.objects.values()] : [];
+      }, "collect");
+      return [...collect("edges"), ...collect("edgenodes")].map((o) => {
+        const m = o.meta ?? {};
+        return {
+          source: m.source,
+          target: m.target,
+          weight: m.weight ?? 0,
+          directed: !!m.isDirected,
+          self: !!m.isSelf
+        };
+      }).filter((e) => e.source != null && e.target != null);
+    }
+    /** Marks (circles/rects), undirected edge lines, and directed / self-edge
+     *  triangle paths all participate in tweening. */
+    _tweenTargets() {
+      return [...this.svg_element.querySelectorAll(
+        "circle[data-point-id], rect[data-point-id], line[data-edge-source], path[data-edge-source]"
+      )];
+    }
+    _readCoords(el) {
+      const tag = el.tagName.toLowerCase();
+      const n = /* @__PURE__ */ __name((a) => parseFloat(el.getAttribute(a) || "0"), "n");
+      if (tag === "circle") return { t: "c", cx: n("cx"), cy: n("cy") };
+      if (tag === "rect") return { t: "r", x: n("x"), y: n("y") };
+      if (tag === "line") return { t: "l", x1: n("x1"), y1: n("y1"), x2: n("x2"), y2: n("y2") };
+      if (tag === "path") {
+        const d = el.getAttribute("d") || "";
+        return { t: "p", d, nums: (d.match(_QEGraphElement._PATH_NUM_RE) || []).map(Number) };
+      }
+      return null;
+    }
+    /** Snapshot current tween-target positions keyed by element. */
+    _captureTween() {
+      const m = /* @__PURE__ */ new Map();
+      this._tweenTargets().forEach((el) => {
+        const c = this._readCoords(el);
+        if (c) m.set(el, c);
+      });
+      return m;
+    }
+    /** Animate each still-present element from its snapshot to its new position. */
+    _runTween(from) {
+      if (this._tweenRaf !== null) {
+        cancelAnimationFrame(this._tweenRaf);
+        this._tweenRaf = null;
+      }
+      const to = /* @__PURE__ */ new Map();
+      this._tweenTargets().forEach((el) => {
+        if (from.has(el)) {
+          const c = this._readCoords(el);
+          if (c) to.set(el, c);
+        }
+      });
+      if (!to.size) return;
+      const dur = this._animateMs;
+      const t0 = performance.now();
+      const ease = /* @__PURE__ */ __name((t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2, "ease");
+      const lerp = /* @__PURE__ */ __name((a, b, k) => a + (b - a) * k, "lerp");
+      const step = /* @__PURE__ */ __name((now) => {
+        const t = Math.min(1, (now - t0) / dur);
+        const k = ease(t);
+        to.forEach((nc, el) => {
+          const oc = from.get(el);
+          if (!oc || oc.t !== nc.t) return;
+          if (nc.t === "c") {
+            el.setAttribute("cx", String(lerp(oc.cx, nc.cx, k)));
+            el.setAttribute("cy", String(lerp(oc.cy, nc.cy, k)));
+          } else if (nc.t === "r") {
+            el.setAttribute("x", String(lerp(oc.x, nc.x, k)));
+            el.setAttribute("y", String(lerp(oc.y, nc.y, k)));
+          } else if (nc.t === "l") {
+            el.setAttribute("x1", String(lerp(oc.x1, nc.x1, k)));
+            el.setAttribute("y1", String(lerp(oc.y1, nc.y1, k)));
+            el.setAttribute("x2", String(lerp(oc.x2, nc.x2, k)));
+            el.setAttribute("y2", String(lerp(oc.y2, nc.y2, k)));
+          } else {
+            if (!oc.nums || oc.nums.length !== nc.nums.length) return;
+            let i = 0;
+            const d = nc.d.replace(
+              _QEGraphElement._PATH_NUM_RE,
+              () => String(lerp(oc.nums[i], nc.nums[i++], k))
+            );
+            el.setAttribute("d", d);
+          }
+        });
+        this._tweenRaf = t < 1 ? requestAnimationFrame(step) : null;
+      }, "step");
+      this._tweenRaf = requestAnimationFrame(step);
+    }
+    /** Serialize the current plot as a standalone SVG string (webENA P2.3). */
+    toSVG() {
+      const svg = this.svg_element.cloneNode(true);
+      svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+      svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+      const rect = this.svg_element.getBoundingClientRect();
+      if (rect.width) svg.setAttribute("width", String(Math.round(rect.width)));
+      if (rect.height) svg.setAttribute("height", String(Math.round(rect.height)));
+      return new XMLSerializer().serializeToString(svg);
+    }
+    /** Rasterize the current plot to a PNG data URL (webENA P2.3). `scale`
+     *  multiplies the pixel dimensions for a higher-resolution image. */
+    toPNG(scale = 2) {
+      const svgStr = this.toSVG();
+      const rect = this.svg_element.getBoundingClientRect();
+      const w = Math.max(1, Math.round(rect.width));
+      const h = Math.max(1, Math.round(rect.height));
+      return new Promise((resolve, reject) => {
+        const blob = new Blob([svgStr], { type: "image/svg+xml;charset=utf-8" });
+        const url = URL.createObjectURL(blob);
+        const img = new Image();
+        img.onload = () => {
+          try {
+            const canvas = document.createElement("canvas");
+            canvas.width = w * scale;
+            canvas.height = h * scale;
+            const ctx = canvas.getContext("2d");
+            if (!ctx) {
+              URL.revokeObjectURL(url);
+              reject(new Error("no 2d context"));
+              return;
+            }
+            ctx.scale(scale, scale);
+            ctx.drawImage(img, 0, 0, w, h);
+            URL.revokeObjectURL(url);
+            resolve(canvas.toDataURL("image/png"));
+          } catch (err) {
+            URL.revokeObjectURL(url);
+            reject(err);
+          }
+        };
+        img.onerror = (e) => {
+          URL.revokeObjectURL(url);
+          reject(e);
+        };
+        img.src = url;
+      });
+    }
+    /** Unit points with their current graph-space coordinates. */
+    getPoints() {
+      const layer = this.__children__.search("__children__", "points");
+      if (!layer) return [];
+      return [...layer.__data__.objects.values()].filter((o) => {
+        var _a;
+        return ((_a = o.meta) == null ? void 0 : _a.kind) === "point";
+      }).map((o) => {
+        var _a;
+        return { id: o.ID, group: (_a = o.meta) == null ? void 0 : _a.group, x: o.x, y: o.y };
+      });
+    }
+    /** Ids of unit points inside a graph-space rectangle (for drag/lasso select). */
+    pointsInRect(rect) {
+      return this.getPoints().filter((p) => p.x >= rect.x && p.x <= rect.x + rect.w && p.y >= rect.y && p.y <= rect.y + rect.h).map((p) => p.id);
+    }
+    /** Order-independent key so an undirected pair matches either direction. */
+    _edgeKey(a, b) {
+      return a <= b ? `${a}\0${b}` : `${b}\0${a}`;
+    }
+    /** Mark edges/nodes as highlighted. Replaces the previous selection. */
+    setHighlight(sel) {
+      this._highlight.edges = new Set((sel.edges ?? []).map((e) => this._edgeKey(e.source, e.target)));
+      this._highlight.nodes = new Set((sel.nodes ?? []).map(String));
+      this._applyHighlights();
+    }
+    /** Clear all highlighting. */
+    clearHighlight() {
+      this._highlight.edges.clear();
+      this._highlight.nodes.clear();
+      this._applyHighlights();
+    }
+    _applyHighlights() {
+      if (!this.svg_element) return;
+      if (!this._highlightGroup) {
+        this._highlightGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+        this._highlightGroup.setAttribute("data-layer-name", "highlight");
+        this._highlightGroup.setAttribute("pointer-events", "none");
+      }
+      this.svg_element.appendChild(this._highlightGroup);
+      const g = this._highlightGroup;
+      g.textContent = "";
+      const extent = this.__data__.extremes.x_max || 1;
+      const HL = "#f5a623";
+      const mk = /* @__PURE__ */ __name((tag, attrs) => {
+        const el = document.createElementNS("http://www.w3.org/2000/svg", tag);
+        for (const k in attrs) el.setAttribute(k, String(attrs[k]));
+        return el;
+      }, "mk");
+      if (this._highlight.edges.size) {
+        const xy = {};
+        this.getNodes().forEach((n) => {
+          xy[n.id] = { x: n.x, y: n.y };
+        });
+        this._highlight.edges.forEach((key) => {
+          const [a, b] = key.split("\0");
+          const A = xy[a], B = xy[b];
+          if (!A || !B) return;
+          g.appendChild(mk("line", {
+            x1: A.x,
+            y1: A.y,
+            x2: B.x,
+            y2: B.y,
+            stroke: HL,
+            "stroke-width": extent * 0.02,
+            "stroke-opacity": 0.6,
+            "stroke-linecap": "round"
+          }));
+        });
+      }
+      this._highlight.nodes.forEach((id) => {
+        var _a;
+        const el = this.svg_element.querySelector(`[data-point-id="${((_a = window.CSS) == null ? void 0 : _a.escape) ? CSS.escape(id) : id}"]`);
+        if (!el) return;
+        const tag = el.tagName.toLowerCase();
+        let cx, cy, r;
+        if (tag === "rect") {
+          const w = parseFloat(el.getAttribute("width") || "0");
+          cx = parseFloat(el.getAttribute("x") || "0") + w / 2;
+          cy = parseFloat(el.getAttribute("y") || "0") + parseFloat(el.getAttribute("height") || "0") / 2;
+          r = w / 2;
+        } else {
+          cx = parseFloat(el.getAttribute("cx") || "0");
+          cy = parseFloat(el.getAttribute("cy") || "0");
+          r = parseFloat(el.getAttribute("r") || "0");
+        }
+        g.appendChild(mk("circle", {
+          cx,
+          cy,
+          r: r * 1.7 + extent * 4e-3,
+          fill: "none",
+          stroke: HL,
+          "stroke-width": extent * 6e-3
+        }));
+      });
     }
     create() {
       const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -3946,6 +4490,138 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         const lbl = getAutoLabel(id);
         if ((lbl == null ? void 0 : lbl.displayMode) === Label.DISPLAY_TYPES.AUTO) lbl.hide();
       });
+      this._attachInteractionEvents();
+    }
+    /** Emit a namespaced CustomEvent on the public element (bubbles + composed). */
+    _emit(name, detail) {
+      this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+    /** Walk up from a hit element to the nearest ancestor carrying `attr`. */
+    _closestWith(el, attr) {
+      var _a, _b;
+      while (el && el !== this.svg_element) {
+        if (((_a = el.getAttribute) == null ? void 0 : _a.call(el, attr)) != null && ((_b = el.hasAttribute) == null ? void 0 : _b.call(el, attr))) return el;
+        el = el.parentElement;
+      }
+      return null;
+    }
+    /** Resolve an edge hit element to a qe-edge-* detail, or null. */
+    _edgeDetail(el) {
+      const e = this._closestWith(el, "data-edge-source");
+      if (!e) return null;
+      const d = {
+        source: e.getAttribute("data-edge-source"),
+        target: e.getAttribute("data-edge-target"),
+        weight: parseFloat(e.getAttribute("data-edge-weight") || "0"),
+        directed: e.getAttribute("data-edge-directed") === "true",
+        self: e.getAttribute("data-edge-self") === "true"
+      };
+      if (e.hasAttribute("data-edge-group")) d.group = e.getAttribute("data-edge-group");
+      if (e.hasAttribute("data-edge-unit")) d.unit = e.getAttribute("data-edge-unit");
+      return d;
+    }
+    /** Resolve a node/mean/point hit element to a qe-node-* detail, or null. */
+    _nodeDetail(el) {
+      const n = this._closestWith(el, "data-point-id");
+      if (!n) return null;
+      const tag = n.tagName.toLowerCase();
+      let x, y;
+      if (tag === "rect") {
+        x = parseFloat(n.getAttribute("x") || "0") + parseFloat(n.getAttribute("width") || "0") / 2;
+        y = parseFloat(n.getAttribute("y") || "0") + parseFloat(n.getAttribute("height") || "0") / 2;
+      } else {
+        x = parseFloat(n.getAttribute("cx") || "0");
+        y = parseFloat(n.getAttribute("cy") || "0");
+      }
+      const id = n.getAttribute("data-point-id");
+      const d = {
+        id,
+        kind: n.getAttribute("data-kind") || "point",
+        name: n.getAttribute("data-name") || id,
+        x,
+        y
+      };
+      if (n.hasAttribute("data-group")) d.group = n.getAttribute("data-group");
+      if (n.hasAttribute("data-unit")) d.unit = n.getAttribute("data-unit");
+      return d;
+    }
+    _attachInteractionEvents() {
+      const svg = this.svg_element;
+      svg.addEventListener("click", (ev) => {
+        const target = ev.target;
+        const edge = this._edgeDetail(target);
+        if (edge) {
+          this._emit("qe-edge-click", { ...edge, originalEvent: ev });
+          return;
+        }
+        const node = this._nodeDetail(target);
+        if (node) this._emit("qe-node-click", { ...node, originalEvent: ev });
+      });
+      let hovered = null;
+      const keyOf = /* @__PURE__ */ __name((t, d) => t === "edge" ? `${d.source}\0${d.target}` : String(d.id), "keyOf");
+      svg.addEventListener("mousemove", (ev) => {
+        const target = ev.target;
+        const edge = this._edgeDetail(target);
+        const node = edge ? null : this._nodeDetail(target);
+        const next = edge ? { type: "edge", detail: edge } : node ? { type: "node", detail: node } : null;
+        const nextKey = next ? keyOf(next.type, next.detail) : null;
+        if (hovered && (!next || hovered.key !== nextKey)) {
+          this._emit(hovered.type === "edge" ? "qe-edge-unhover" : "qe-node-unhover", { key: hovered.key });
+          hovered = null;
+        }
+        if (next && (!hovered || hovered.key !== nextKey)) {
+          this._emit(next.type === "edge" ? "qe-edge-hover" : "qe-node-hover", { ...next.detail, originalEvent: ev });
+          hovered = { type: next.type, key: nextKey };
+        }
+        if (this.hasAttribute("tooltip") && next) {
+          this._showTooltip(this._tooltipText(next.type, next.detail), ev.clientX, ev.clientY);
+        } else {
+          this._hideTooltip();
+        }
+      });
+      svg.addEventListener("mouseleave", () => {
+        if (hovered) {
+          this._emit(hovered.type === "edge" ? "qe-edge-unhover" : "qe-node-unhover", { key: hovered.key });
+          hovered = null;
+        }
+        this._hideTooltip();
+      });
+    }
+    /** "source – target (weight)" for edges; the mark name for nodes/means/points. */
+    _tooltipText(type, d) {
+      if (type === "edge") {
+        const w = Number(d.weight);
+        const wStr = Number.isFinite(w) ? ` (${+w.toFixed(3)})` : "";
+        return `${d.source} – ${d.target}${wStr}`;
+      }
+      return String(d.name ?? d.id);
+    }
+    _showTooltip(text, clientX, clientY) {
+      if (!this._tooltipEl) {
+        const el = document.createElement("div");
+        el.setAttribute("data-qe-tooltip", "");
+        Object.assign(el.style, {
+          position: "fixed",
+          zIndex: "2147483647",
+          pointerEvents: "none",
+          background: "rgba(20,20,20,0.92)",
+          color: "#fff",
+          font: "12px/1.4 system-ui, sans-serif",
+          padding: "3px 7px",
+          borderRadius: "4px",
+          whiteSpace: "nowrap",
+          transform: "translate(-50%, calc(-100% - 8px))"
+        });
+        document.body.appendChild(el);
+        this._tooltipEl = el;
+      }
+      this._tooltipEl.textContent = text;
+      this._tooltipEl.style.left = `${clientX}px`;
+      this._tooltipEl.style.top = `${clientY}px`;
+      this._tooltipEl.style.display = "block";
+    }
+    _hideTooltip() {
+      if (this._tooltipEl) this._tooltipEl.style.display = "none";
     }
     draw() {
       var _a;
@@ -3964,6 +4640,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       this.update_labels();
       this.update_extremes();
       this.update_axes();
+      this._applyHighlights();
     }
     /**
      * Axes (<qe-axes>): toggle the axis-line cross by presence, and draw/position
@@ -3971,6 +4648,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
      * cached SVG <text> nodes in the labels group; null text removes them.
      */
     update_axes() {
+      var _a;
       const axesLayer = this.__children__.search("__children__", "axes");
       if (axesLayer == null ? void 0 : axesLayer.svg_element) {
         axesLayer.svg_element.style.display = this._showAxes ? "" : "none";
@@ -4002,17 +4680,37 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         el.setAttribute("font-weight", "600");
         el.setAttribute("fill", "#556");
         if (axis === "x") {
-          el.setAttribute("x", (extent + gap).toString());
-          el.setAttribute("y", (fontSize * 0.35).toString());
-          el.setAttribute("text-anchor", "start");
+          el.setAttribute("x", (extent - gap).toString());
+          el.setAttribute("y", (-gap).toString());
+          el.setAttribute("text-anchor", "end");
         } else {
-          el.setAttribute("x", "0");
-          el.setAttribute("y", (-extent - gap).toString());
-          el.setAttribute("text-anchor", "middle");
+          el.setAttribute("x", gap.toString());
+          el.setAttribute("y", (-extent + fontSize + gap).toString());
+          el.setAttribute("text-anchor", "start");
         }
       }, "place");
       place("x", this._axisXText);
       place("y", this._axisYText);
+      if (this._magnifyText == null) {
+        (_a = this._magnifyEl) == null ? void 0 : _a.remove();
+        this._magnifyEl = null;
+      } else {
+        if (!this._magnifyEl) {
+          this._magnifyEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+          this._magnifyEl.setAttribute("data-magnify-label", "");
+          this._magnifyEl.setAttribute("pointer-events", "none");
+        }
+        if (!this._magnifyEl.parentElement) parent.appendChild(this._magnifyEl);
+        const el = this._magnifyEl;
+        el.textContent = this._magnifyText;
+        el.setAttribute("font-size", (fontSize * 0.85).toString());
+        el.setAttribute("font-family", "system-ui, sans-serif");
+        el.setAttribute("font-style", "italic");
+        el.setAttribute("fill", "#556");
+        el.setAttribute("x", (-extent + gap).toString());
+        el.setAttribute("y", (-extent + fontSize + gap).toString());
+        el.setAttribute("text-anchor", "start");
+      }
     }
     update_labels() {
       this._nodeLabels.forEach((lbl) => lbl.update());
@@ -4076,8 +4774,12 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       background-color: #FFF;
     }
   `;
+  _QEGraphElement._instances = /* @__PURE__ */ new Set();
+  _QEGraphElement._PATH_NUM_RE = /-?\d*\.?\d+(?:e[-+]?\d+)?/gi;
   let QEGraphElement = _QEGraphElement;
   customElements.define(QEGraphElement.tagName, QEGraphElement);
+  const getGraph = /* @__PURE__ */ __name((key) => QEGraphElement.getGraph(key), "getGraph");
+  const getGraphs = /* @__PURE__ */ __name(() => QEGraphElement.instances(), "getGraphs");
   exports2.Color = Color;
   exports2.DataFrame = DataFrame;
   exports2.DataFrameColumn = DataFrameColumn;
@@ -4101,6 +4803,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   exports2.Trajectory = Trajectory;
   exports2.WeightedColor = WeightedColor;
   exports2.fitTrajectory = fitTrajectory;
+  exports2.getGraph = getGraph;
+  exports2.getGraphs = getGraphs;
   exports2.nearOriginFilter = nearOriginFilter;
   exports2.sampleCurve = sampleCurve;
   exports2.selectDegree = selectDegree;