@qe-libs/qeviz 0.2.0 → 0.4.0

package/dist/qeviz.es.js

@@ -595,9 +595,10 @@ const _Color = class _Color {
 __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) {
@@ -668,7 +669,8 @@ const _WeightedColor = class _WeightedColor extends Color {
   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");
@@ -2180,9 +2182,22 @@ const _EdgeArrow = class _EdgeArrow extends PlottedObject {
     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;
   }
 };
@@ -2325,6 +2340,46 @@ const _Drawable = class _Drawable {
 };
 __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__);
@@ -2334,8 +2389,22 @@ const _QELine = class _QELine extends Drawable {
     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");
@@ -2372,24 +2441,28 @@ const _QELine = class _QELine extends Drawable {
     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__);
@@ -2403,20 +2476,39 @@ const _QELine = class _QELine extends Drawable {
                 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());
@@ -2430,10 +2522,11 @@ const _QELine = class _QELine extends Drawable {
     }
   }
   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);
     }
   }
 };
@@ -2463,8 +2556,23 @@ const _QEPoint = class _QEPoint extends Drawable {
    *  (≈ 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
@@ -2480,6 +2588,11 @@ const _QEPoint = class _QEPoint extends Drawable {
     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();
@@ -2494,9 +2607,7 @@ const _QEPoint = class _QEPoint extends Drawable {
       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", {
@@ -2843,6 +2954,9 @@ const _QELabel = class _QELabel {
     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;
@@ -2856,10 +2970,52 @@ const _QELabel = class _QELabel {
     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).
@@ -2908,6 +3064,9 @@ const _QELabel = class _QELabel {
     }
     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");
@@ -2921,6 +3080,7 @@ const _QELabel = class _QELabel {
     this.update();
   }
   hide() {
+    if (this.pinned) return;
     this._visible = false;
     this.svg_element.setAttribute("display", "none");
   }
@@ -3003,6 +3163,14 @@ function computeCIRect(varX, varY, n, pointScale) {
   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);
@@ -3016,6 +3184,11 @@ function readIntervalBounds(row, dim0, dim1) {
   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":
@@ -3049,6 +3222,13 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
     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);
@@ -3060,6 +3240,8 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
       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;
@@ -3068,6 +3250,7 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
       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)) {
@@ -3136,8 +3319,16 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
             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);
             }
@@ -3187,19 +3378,26 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
                 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");
@@ -3225,7 +3423,7 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
                 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;
@@ -3253,6 +3451,11 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
                     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");
@@ -3280,6 +3483,11 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
                     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");
@@ -3452,6 +3660,7 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
         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)) {
@@ -3550,21 +3759,46 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
             });
           }
           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((self) => {
+            const vals = [];
+            edgePairs.forEach(({ col, pair }) => {
+              if (pair[0] === pair[1] !== self) 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((self) => rangeOf(drawEdges.filter((e2) => e2.pair[0] === e2.pair[1] === self).map((e2) => e2.weight)), "plotRange");
+          const cscale = config.edgeColorScale;
+          const colourRange = /* @__PURE__ */ __name((self) => cscale === "plot" ? plotRange(self) : modelRange(self), "colourRange");
+          const lineRange = colourRange(false), selfRange = colourRange(true);
+          const colourOf = /* @__PURE__ */ __name((w, self) => {
+            if (cscale === "absolute") {
+              const a = Math.min(1, Math.abs(w));
+              return { saturation: a, opacity: a };
+            }
+            const [lo, hi] = self ? 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]) : "";
@@ -3572,8 +3806,12 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
             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) {
@@ -3588,8 +3826,7 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
             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;
@@ -3613,16 +3850,17 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
             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);
@@ -3630,7 +3868,15 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
           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();
@@ -3638,11 +3884,17 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
             }
           });
           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);
@@ -3659,6 +3911,7 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
       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() {
@@ -3699,6 +3952,7 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
   // 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");
@@ -3707,11 +3961,18 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
     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,
@@ -3721,18 +3982,28 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
         (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,
@@ -3773,6 +4044,7 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
     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,
@@ -3783,10 +4055,14 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
         "unit",
         "compare",
         "also",
+        "color-scale",
+        "magnify",
         "groups",
         "confidence",
         "label",
+        "unconnected",
         "scale-points",
+        "edge-width",
         "labels",
         "label-nodes",
         "label-means",
@@ -3802,7 +4078,9 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
         "stroke-width-range",
         "opacity-range",
         "x",
-        "y"
+        "y",
+        "size",
+        "fixed-size"
       ]
     });
     const forId = this.getAttribute("for");
@@ -3822,9 +4100,275 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
     }
   }
   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");
@@ -3942,6 +4486,138 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
       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;
@@ -3960,6 +4636,7 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
     this.update_labels();
     this.update_extremes();
     this.update_axes();
+    this._applyHighlights();
   }
   /**
    * Axes (<qe-axes>): toggle the axis-line cross by presence, and draw/position
@@ -3967,6 +4644,7 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
    * 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";
@@ -3998,17 +4676,37 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
       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());
@@ -4072,8 +4770,12 @@ _QEGraphElement.style = `
       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");
 export {
   Color,
   DataFrame,
@@ -4098,6 +4800,8 @@ export {
   Trajectory,
   WeightedColor,
   fitTrajectory,
+  getGraph,
+  getGraphs,
   nearOriginFilter,
   sampleCurve,
   selectDegree,