@qe-libs/qeviz 0.1.0 → 0.4.0

package/dist/qeviz.es.js

@@ -160,7 +160,7 @@ const _DataFrame = class _DataFrame extends Array {
       }
     });
     __privateSet(this, _names2, names);
-    if (rowNames && rowNames.length !== this[0].length) {
+    if (rowNames && this[0] && rowNames.length !== this[0].length) {
       throw new Error("Row names length must match the number of rows in the DataFrame.");
     }
     if (rowNames && rowNames.length > 0) {
@@ -224,6 +224,9 @@ const _DataFrame = class _DataFrame extends Array {
   rows(...wh) {
     let selectors, selectedRows = [], selectedRowNames = [];
     if (wh.length === 0) {
+      if (!this[0] || this.length === 0) {
+        return [];
+      }
       const numRows = this[0].length;
       selectedRows = Array.from({ length: numRows }, (_, i) => this.getRowByIndex(i));
       selectedRowNames = __privateGet(this, _rowNames2);
@@ -282,7 +285,7 @@ const _DataFrame = class _DataFrame extends Array {
     return __privateGet(this, _rowNames2);
   }
   get nrow() {
-    return this[0].length;
+    return this[0] ? this[0].length : 0;
   }
   get ncol() {
     return this.length;
@@ -349,6 +352,12 @@ const _Model = class _Model {
   set groups(v) {
     this._groups = v;
   }
+  get trajectories() {
+    return this._trajectories;
+  }
+  set trajectories(v) {
+    this._trajectories = v;
+  }
   get dimensions() {
     return this._dimensions;
   }
@@ -461,7 +470,7 @@ const _QEVisualElement = class _QEVisualElement extends HTMLElement {
    */
   setModelData(data) {
     var _a, _b, _c, _d;
-    const frameKeys = ["nodes", "edges", "points", "groups", "confidence", "outlier"];
+    const frameKeys = ["nodes", "edges", "points", "groups", "confidence", "outlier", "trajectories"];
     frameKeys.forEach((name) => {
       var _a2;
       const raw = data[name];
@@ -470,7 +479,7 @@ const _QEVisualElement = class _QEVisualElement extends HTMLElement {
       let idCol;
       if (name === "nodes") {
         idCol = data.node_id_col ?? colNames.find((c) => (types[c] ?? "character") === "character");
-      } else if (name === "edges" || name === "points") {
+      } else if (name === "edges" || name === "points" || name === "trajectories") {
         idCol = data.id_col ?? colNames.find((c) => (types[c] ?? "character") === "character");
       } else {
         idCol = data.group_col ?? colNames.find((c) => (types[c] ?? "character") === "character");
@@ -540,8 +549,12 @@ const _QEVisualElement = class _QEVisualElement extends HTMLElement {
 __name(_QEVisualElement, "QEVisualElement");
 _QEVisualElement.tagName = "qe-visual";
 _QEVisualElement.styles = `
-    :host { display: inline-block; }
+    :host { display: block; width: 100%; }
     :host(.hidden) { display: none !important; }
+    /* The output wrapper and the slotted graph fill the host so the plot
+       stretches to its container instead of collapsing to intrinsic size. */
+    div { display: block; width: 100%; height: 100%; }
+    ::slotted(qe-graph) { display: block; width: 100%; height: 100%; }
   `;
 let QEVisualElement = _QEVisualElement;
 customElements.define(QEVisualElement.tagName, QEVisualElement);
@@ -582,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) {
@@ -655,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");
@@ -812,7 +827,9 @@ var Tools;
       __name(slopeIntercept, "slopeIntercept");
       Line2.slopeIntercept = slopeIntercept;
       function point_along(line, distance = 0) {
-        let len = Tools2.Geometry.Line.length(line[0], line[1]), ratio = distance / len, Xt = (1 - ratio) * line[0][0] + ratio * line[1][0], Yt = (1 - ratio) * line[0][1] + ratio * line[1][1];
+        const ratio = distance;
+        const Xt = (1 - ratio) * line[0][0] + ratio * line[1][0];
+        const Yt = (1 - ratio) * line[0][1] + ratio * line[1][1];
         return [Xt, Yt];
       }
       __name(point_along, "point_along");
@@ -1659,6 +1676,7 @@ const _Graph = class _Graph {
     this.points = /* @__PURE__ */ new Map();
     this.nodes = /* @__PURE__ */ new Map();
     this.edges = /* @__PURE__ */ new Map();
+    this.trajectories = /* @__PURE__ */ new Map();
     this.labels = /* @__PURE__ */ new Map();
     this.transform = new Transform();
     this.scale_x = 1;
@@ -1701,6 +1719,7 @@ const _Graph = class _Graph {
             { name: "edgenodes", layers: [], tabindex: 0 }
           ]
         },
+        { name: "trajectories", layers: [], tabindex: 0 },
         { name: "points", layers: [], tabindex: 0 },
         { name: "labels", layers: [], tabindex: 0 }
       ] }
@@ -1826,9 +1845,13 @@ const _Graph = class _Graph {
     if (search_layers.length === 0) {
       this.extremes = new Extremes(1, 1);
     } else {
-      const found_max = Math.max(...search_layers.map((l) => Math.max(...[...l.objects.values()].map((o) => Math.max(Math.abs(o.x), Math.abs(o.y))))).filter((a) => Math.abs(a) !== Infinity)) * 1.5;
-      console.log("Found max for extremes:", found_max);
-      this.extremes = new Extremes(Math.ceil(found_max), Math.ceil(found_max));
+      const content_max = Math.max(
+        ...search_layers.map((l) => Math.max(
+          ...[...l.objects.values()].map((o) => Math.max(Math.abs(o.x), Math.abs(o.y)))
+        )).filter((a) => Math.abs(a) !== Infinity)
+      );
+      const found_max = (Number.isFinite(content_max) && content_max > 0 ? content_max : 1) * 1.3;
+      this.extremes = new Extremes(found_max, found_max);
     }
   }
   base_point_size(scale = 8) {
@@ -1868,6 +1891,251 @@ _DrawableElement.style = `
     }
   `;
 let DrawableElement = _DrawableElement;
+const TRAJECTORY_ZERO_EPS = 1e-8;
+function nearOriginFilter(pts, eps = TRAJECTORY_ZERO_EPS) {
+  return pts.filter((p) => Math.abs(p.x) > eps || Math.abs(p.y) > eps);
+}
+__name(nearOriginFilter, "nearOriginFilter");
+function normalizedT(n) {
+  if (n <= 0) return [];
+  if (n === 1) return [0];
+  const t = new Array(n);
+  for (let i = 0; i < n; i++) t[i] = i / (n - 1);
+  return t;
+}
+__name(normalizedT, "normalizedT");
+function design(t, degree) {
+  return t.map((ti) => {
+    const row = new Array(degree + 1);
+    let p = 1;
+    for (let k = 0; k <= degree; k++) {
+      row[k] = p;
+      p *= ti;
+    }
+    return row;
+  });
+}
+__name(design, "design");
+function qr(A) {
+  const n = A.length;
+  const m = A[0].length;
+  const Q = A.map((row) => row.slice());
+  const R = Array.from({ length: m }, () => new Array(m).fill(0));
+  for (let j = 0; j < m; j++) {
+    let norm = 0;
+    for (let i = 0; i < n; i++) norm += Q[i][j] * Q[i][j];
+    norm = Math.sqrt(norm);
+    R[j][j] = norm;
+    if (norm > 1e-300) {
+      for (let i = 0; i < n; i++) Q[i][j] /= norm;
+    }
+    for (let k = j + 1; k < m; k++) {
+      let dot = 0;
+      for (let i = 0; i < n; i++) dot += Q[i][j] * Q[i][k];
+      R[j][k] = dot;
+      for (let i = 0; i < n; i++) Q[i][k] -= dot * Q[i][j];
+    }
+  }
+  return { Q, R };
+}
+__name(qr, "qr");
+function qtY(Q, y) {
+  const n = Q.length;
+  const m = Q[0].length;
+  const out = new Array(m).fill(0);
+  for (let j = 0; j < m; j++) {
+    let s = 0;
+    for (let i = 0; i < n; i++) s += Q[i][j] * y[i];
+    out[j] = s;
+  }
+  return out;
+}
+__name(qtY, "qtY");
+function backSolve(R, b) {
+  const m = b.length;
+  const c = new Array(m).fill(0);
+  for (let i = m - 1; i >= 0; i--) {
+    let s = b[i];
+    for (let j = i + 1; j < m; j++) s -= R[i][j] * c[j];
+    c[i] = Math.abs(R[i][i]) > 1e-12 ? s / R[i][i] : 0;
+  }
+  return c;
+}
+__name(backSolve, "backSolve");
+function leverages(Q) {
+  return Q.map((row) => {
+    let s = 0;
+    for (let j = 0; j < row.length; j++) s += row[j] * row[j];
+    return s;
+  });
+}
+__name(leverages, "leverages");
+function fitCoeffs(t, y, degree) {
+  const X = design(t, degree);
+  const { Q, R } = qr(X);
+  return backSolve(R, qtY(Q, y));
+}
+__name(fitCoeffs, "fitCoeffs");
+function evalPoly(coeffs, t) {
+  let v = 0;
+  let p = 1;
+  for (let k = 0; k < coeffs.length; k++) {
+    v += coeffs[k] * p;
+    p *= t;
+  }
+  return v;
+}
+__name(evalPoly, "evalPoly");
+function loocv2d(t, x, y, degree) {
+  const X = design(t, degree);
+  const { Q, R } = qr(X);
+  const h = leverages(Q);
+  const cx = backSolve(R, qtY(Q, x));
+  const cy = backSolve(R, qtY(Q, y));
+  let press = 0;
+  for (let i = 0; i < t.length; i++) {
+    const denom = 1 - h[i];
+    if (denom <= 0) return Infinity;
+    const ex = x[i] - evalPoly(cx, t[i]);
+    const ey = y[i] - evalPoly(cy, t[i]);
+    press += (ex / denom) ** 2 + (ey / denom) ** 2;
+  }
+  return press;
+}
+__name(loocv2d, "loocv2d");
+function selectDegree(fitPts, maxDegree, mode) {
+  const n = fitPts.length;
+  const cap = Math.min(Math.max(1, Math.floor(maxDegree)), Math.max(1, n - 1));
+  if (mode === "fixed" || n < 3) return cap;
+  const t = normalizedT(n);
+  const x = fitPts.map((p) => p.x);
+  const y = fitPts.map((p) => p.y);
+  let best = 1;
+  let bestVal = Infinity;
+  for (let deg = 1; deg <= cap; deg++) {
+    const v = loocv2d(t, x, y, deg);
+    if (v < bestVal) {
+      bestVal = v;
+      best = deg;
+    }
+  }
+  return best;
+}
+__name(selectDegree, "selectDegree");
+function fitTrajectory(activePts, opts) {
+  const fitPts = nearOriginFilter(activePts);
+  if (fitPts.length < 3) return null;
+  const selBasis = opts.selectionSet ? nearOriginFilter(opts.selectionSet) : fitPts;
+  const basis = selBasis.length >= 3 ? selBasis : fitPts;
+  let degree = selectDegree(basis, opts.maxDegree, opts.degreeSelection);
+  degree = Math.min(degree, Math.max(1, fitPts.length - 1));
+  const t = normalizedT(fitPts.length);
+  const coeffsX = fitCoeffs(t, fitPts.map((p) => p.x), degree);
+  const coeffsY = fitCoeffs(t, fitPts.map((p) => p.y), degree);
+  return { degree, coeffsX, coeffsY };
+}
+__name(fitTrajectory, "fitTrajectory");
+function sampleCurve(fit, steps = 100) {
+  const out = [];
+  for (let s = 0; s <= steps; s++) {
+    const t = s / steps;
+    out.push({ x: evalPoly(fit.coeffsX, t), y: evalPoly(fit.coeffsY, t) });
+  }
+  return out;
+}
+__name(sampleCurve, "sampleCurve");
+const TRAJECTORY_CURVE_STEPS = 100;
+const _Trajectory = class _Trajectory extends PlottedObject {
+  constructor(options = {}) {
+    const defaultColor = options.color instanceof Color ? options.color : new Color(typeof options.color === "string" ? options.color : "#000000");
+    super([], {
+      ID: options.ID || `traj-${Math.random().toString(36).substring(2, 9)}`,
+      size: options.size || 1,
+      color: defaultColor,
+      highlight: null,
+      active: options.active || false,
+      meta: options.meta || {},
+      ...options
+    });
+    this._typeName = "Trajectory";
+    this.trajPoints = [];
+    this.smooth = "none";
+    this.maxDegree = 3;
+    this.degreeSelection = "loocv_2d";
+    this.selectedDegree = -1;
+    this.polyCoeffsX = [];
+    this.polyCoeffsY = [];
+    this.currentTime = Infinity;
+    this.showPoints = true;
+    this.showTips = true;
+    this.lineStyle = "uniform";
+    this.strokeWidth = 2;
+    this.strokeWidthRange = [1, 6];
+    this.opacityRange = [0.3, 1];
+    this.smooth = options.smooth || "none";
+    this.maxDegree = options.maxDegree !== void 0 ? options.maxDegree : 3;
+    this.degreeSelection = options.degreeSelection || "loocv_2d";
+    this.polyCoeffsX = options.polyCoeffsX || [];
+    this.polyCoeffsY = options.polyCoeffsY || [];
+    this.currentTime = options.currentTime !== void 0 ? options.currentTime : Infinity;
+    this.showPoints = options.showPoints !== void 0 ? options.showPoints : true;
+    this.showTips = options.showTips !== void 0 ? options.showTips : true;
+    this.lineStyle = options.lineStyle || "uniform";
+    this.strokeWidth = options.strokeWidth || 2;
+    this.strokeWidthRange = options.strokeWidthRange || [1, 6];
+    this.opacityRange = options.opacityRange || [0.3, 1];
+    if (options.points && Array.isArray(options.points)) {
+      this.trajPoints = options.points.map((p) => {
+        if (p instanceof Point) return p;
+        const pt = new Point({ dimensions: [p.x, p.y], meta: { time: p.time, label: p.label } });
+        pt.x = p.x;
+        pt.y = p.y;
+        return pt;
+      });
+    }
+  }
+  get activePoints() {
+    if (this.currentTime === Infinity) {
+      return this.trajPoints;
+    }
+    return this.trajPoints.filter((p) => {
+      const t = p.meta && typeof p.meta.time === "number" ? p.meta.time : 0;
+      return t <= this.currentTime;
+    });
+  }
+  get path() {
+    return this.pathPoints.reduce((acc, pt, idx) => {
+      return idx === 0 ? `M${pt.x},${pt.y}` : `${acc} L${pt.x},${pt.y}`;
+    }, "");
+  }
+  get pathPoints() {
+    const pts = this.activePoints;
+    if (pts.length < 2) return [];
+    if (this.smooth === "poly") {
+      if (this.polyCoeffsX.length > 0 && this.polyCoeffsY.length > 0) {
+        return sampleCurve(
+          { degree: this.polyCoeffsX.length - 1, coeffsX: this.polyCoeffsX, coeffsY: this.polyCoeffsY },
+          TRAJECTORY_CURVE_STEPS
+        );
+      }
+      const fit = fitTrajectory(
+        pts.map((p) => ({ x: p.x, y: p.y })),
+        {
+          maxDegree: this.maxDegree,
+          degreeSelection: this.degreeSelection,
+          selectionSet: this.trajPoints.map((p) => ({ x: p.x, y: p.y }))
+        }
+      );
+      if (fit) {
+        this.selectedDegree = fit.degree;
+        return sampleCurve(fit, TRAJECTORY_CURVE_STEPS);
+      }
+    }
+    return pts.map((pt) => ({ x: pt.x, y: pt.y }));
+  }
+};
+__name(_Trajectory, "Trajectory");
+let Trajectory = _Trajectory;
 const zoom_level = 1;
 const _Edge = class _Edge extends Line {
   constructor(data, from, to, weight = 0) {
@@ -1914,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.7), nock = Tools.Geometry.Line.point_along([[_this.to.x, _this.to.y], _mid], 0.85), 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;
   }
 };
@@ -2059,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__);
@@ -2068,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");
@@ -2106,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__);
@@ -2137,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());
@@ -2164,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);
     }
   }
 };
@@ -2197,14 +2556,45 @@ 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
+   *  up at any zoom. No-op unless the object requests it via meta.stroke. */
+  applyStroke(el) {
+    var _a;
+    const stroke = (_a = this.__data__.meta) == null ? void 0 : _a.stroke;
+    if (!stroke) return;
+    el.setAttribute("stroke", stroke);
+    el.setAttribute("stroke-width", (this.computeRadius() * 0.22).toString());
   }
   create() {
     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();
     if (this.isSquare) {
       el.setAttribute("x", (this.x - r).toString());
@@ -2217,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", {
@@ -2242,6 +2630,7 @@ const _QEPoint = class _QEPoint extends Drawable {
     }
     const r = this.computeRadius();
     this.svg_element.setAttribute("fill", this.__data__.color.toString());
+    this.applyStroke(this.svg_element);
     if (this.isSquare) {
       this.svg_element.setAttribute("x", (this.x - r).toString());
       this.svg_element.setAttribute("y", (this.y - r).toString());
@@ -2260,6 +2649,141 @@ const _QEPoint = class _QEPoint extends Drawable {
 };
 __name(_QEPoint, "QEPoint");
 let QEPoint = _QEPoint;
+const _QETrajectory = class _QETrajectory extends Drawable {
+  constructor(__data__, parent, graph, __children__ = new QEArray()) {
+    super(__data__, parent, graph, __children__);
+    this.__data__ = __data__;
+    this.parent = parent;
+    this.graph = graph;
+    this.__children__ = __children__;
+    this.__name__ = "trajectory";
+    this._path_el = null;
+    this._segments_group = null;
+    this._tip_el = null;
+    this._points_group = null;
+    this.svg_element = this.create();
+  }
+  // Trajectory styling is specified in display pixels, while SVG paths use
+  // graph coordinates. Convert at render time so marks stay legible at any scale.
+  graphUnitsForPixels(pixels) {
+    var _a;
+    const extent = this.graph.__data__.extremes.x_max || 1;
+    const width = ((_a = this.graph.svg_element) == null ? void 0 : _a.getBoundingClientRect().width) || 0;
+    return width > 0 ? pixels * (2 * extent / width) : pixels * extent * 6e-3;
+  }
+  create() {
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.setAttribute("class", "qe-trajectory-group");
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("fill", "none");
+    path.setAttribute("stroke", this.__data__.color.toString());
+    path.setAttribute("stroke-width", this.graphUnitsForPixels(this.__data__.strokeWidth).toString());
+    group.appendChild(path);
+    this._path_el = path;
+    const segmentsGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    segmentsGroup.setAttribute("class", "qe-trajectory-segments");
+    group.appendChild(segmentsGroup);
+    this._segments_group = segmentsGroup;
+    const pointsGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    pointsGroup.setAttribute("class", "qe-trajectory-points");
+    group.appendChild(pointsGroup);
+    this._points_group = pointsGroup;
+    if (this.__data__.showTips) {
+      const tip = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+      tip.setAttribute("fill", this.__data__.color.toString());
+      tip.setAttribute("r", this.graphUnitsForPixels(4).toString());
+      tip.setAttribute("stroke", "#ffffff");
+      tip.setAttribute("stroke-width", this.graphUnitsForPixels(1.5).toString());
+      group.appendChild(tip);
+      this._tip_el = tip;
+    }
+    this.svg_element = group;
+    return group;
+  }
+  update() {
+    if (!this.svg_element) {
+      this.create();
+    }
+    if (!this.svg_element.parentElement) {
+      this.parent.appendChild(this.svg_element);
+    }
+    const dStr = this.__data__.path;
+    if (this._path_el) {
+      this._path_el.setAttribute("d", dStr);
+      this._path_el.setAttribute("stroke", this.__data__.color.toString());
+      this._path_el.setAttribute("stroke-width", this.graphUnitsForPixels(this.__data__.strokeWidth).toString());
+      this._path_el.style.display = this.__data__.lineStyle === "tapered" ? "none" : "block";
+    }
+    if (this._segments_group) {
+      this._segments_group.innerHTML = "";
+      if (this.__data__.lineStyle === "tapered") {
+        const pathPts = this.__data__.pathPoints;
+        const nSegments = pathPts.length - 1;
+        const [minWidth, maxWidth] = this.__data__.strokeWidthRange;
+        const [minOpacity, maxOpacity] = this.__data__.opacityRange;
+        for (let i = 0; i < nSegments; i++) {
+          const start = pathPts[i];
+          const end = pathPts[i + 1];
+          const progress = nSegments <= 1 ? 1 : i / (nSegments - 1);
+          const width = minWidth + (maxWidth - minWidth) * progress;
+          const opacity = minOpacity + (maxOpacity - minOpacity) * progress;
+          const segment = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          segment.setAttribute("d", `M${start.x},${start.y} L${end.x},${end.y}`);
+          segment.setAttribute("fill", "none");
+          segment.setAttribute("stroke", this.__data__.color.toString());
+          segment.setAttribute("stroke-linecap", "round");
+          segment.setAttribute("stroke-linejoin", "round");
+          segment.setAttribute("stroke-width", this.graphUnitsForPixels(width).toString());
+          segment.setAttribute("opacity", opacity.toString());
+          this._segments_group.appendChild(segment);
+        }
+        this._segments_group.style.display = "block";
+      } else {
+        this._segments_group.style.display = "none";
+      }
+    }
+    const pts = this.__data__.activePoints;
+    if (this._points_group) {
+      if (this.__data__.showPoints && pts.length > 0) {
+        this._points_group.innerHTML = "";
+        pts.forEach((pt) => {
+          var _a;
+          const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+          dot.setAttribute("cx", pt.x.toString());
+          dot.setAttribute("cy", pt.y.toString());
+          dot.setAttribute("r", this.graphUnitsForPixels(2.5).toString());
+          dot.setAttribute("fill", this.__data__.color.toString());
+          dot.setAttribute("opacity", "0.7");
+          (_a = this._points_group) == null ? void 0 : _a.appendChild(dot);
+        });
+        this._points_group.style.display = "block";
+      } else {
+        this._points_group.style.display = "none";
+      }
+    }
+    if (this._tip_el && this.__data__.showTips) {
+      if (pts.length > 0) {
+        const lastPt = pts[pts.length - 1];
+        this._tip_el.setAttribute("cx", lastPt.x.toString());
+        this._tip_el.setAttribute("cy", lastPt.y.toString());
+        this._tip_el.setAttribute("fill", this.__data__.color.toString());
+        this._tip_el.setAttribute("r", this.graphUnitsForPixels(4).toString());
+        this._tip_el.setAttribute("stroke-width", this.graphUnitsForPixels(1.5).toString());
+        this._tip_el.style.display = "block";
+      } else {
+        this._tip_el.style.display = "none";
+      }
+    }
+  }
+  draw() {
+    if (this.svg_element && !this.svg_element.parentElement) {
+      this.parent.appendChild(this.svg_element);
+    }
+    this.update();
+  }
+};
+__name(_QETrajectory, "QETrajectory");
+let QETrajectory = _QETrajectory;
 const { ArrayTools } = Tools;
 const _QEArray = class _QEArray extends Array {
   constructor(...args) {
@@ -2319,7 +2843,8 @@ const QEElementConstructors = {
   "Edge": QELine,
   "TaperedEdge": QELine,
   "TaperedWeightedMidpointEdge": QELine,
-  "NodeEdge": QELine
+  "NodeEdge": QELine,
+  "Trajectory": QETrajectory
 };
 const _QELayer = class _QELayer {
   constructor(__data__, parent, graph, __children__ = new QEArray()) {
@@ -2343,8 +2868,14 @@ const _QELayer = class _QELayer {
         (obj) => !this.__children__.some((child) => childId(child) === obj.ID)
       );
       adding.forEach((obj) => {
-        const obj_name = obj.constructor.name;
-        const ena_element = new QEElementConstructors[obj_name](obj, this.svg_element, this.graph);
+        const obj_name = obj._typeName || obj.constructor.name;
+        let constructor = QEElementConstructors[obj_name];
+        if (!constructor) {
+          if (obj instanceof Trajectory) constructor = QETrajectory;
+          else if (obj instanceof Point) constructor = QEPoint;
+          else constructor = QELine;
+        }
+        const ena_element = new constructor(obj, this.svg_element, this.graph);
         this.__children__.push(ena_element);
       });
       updating.forEach((child) => {
@@ -2423,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;
@@ -2436,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).
@@ -2488,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");
@@ -2501,6 +3080,7 @@ const _QELabel = class _QELabel {
     this.update();
   }
   hide() {
+    if (this.pinned) return;
     this._visible = false;
     this.svg_element.setAttribute("display", "none");
   }
@@ -2536,10 +3116,22 @@ const _QEEdgesElement = class _QEEdgesElement extends HTMLElement {
 __name(_QEEdgesElement, "QEEdgesElement");
 _QEEdgesElement.tagName = "qe-edges";
 let QEEdgesElement = _QEEdgesElement;
+const _QETrajectoriesElement = class _QETrajectoriesElement extends HTMLElement {
+};
+__name(_QETrajectoriesElement, "QETrajectoriesElement");
+_QETrajectoriesElement.tagName = "qe-trajectories";
+let QETrajectoriesElement = _QETrajectoriesElement;
+const _QEAxesElement = class _QEAxesElement extends HTMLElement {
+};
+__name(_QEAxesElement, "QEAxesElement");
+_QEAxesElement.tagName = "qe-axes";
+let QEAxesElement = _QEAxesElement;
 customElements.define(QENodesElement.tagName, QENodesElement);
 customElements.define(QEMeansElement.tagName, QEMeansElement);
 customElements.define(QEPointsElement.tagName, QEPointsElement);
 customElements.define(QEEdgesElement.tagName, QEEdgesElement);
+customElements.define(QETrajectoriesElement.tagName, QETrajectoriesElement);
+customElements.define(QEAxesElement.tagName, QEAxesElement);
 const GROUP_PALETTE = [
   "#4477AA",
   "#EE6677",
@@ -2571,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);
@@ -2584,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":
@@ -2613,6 +3218,17 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
     this._nodeLabels = /* @__PURE__ */ new Map();
     this._meanLabels = /* @__PURE__ */ new Map();
     this._pointLabels = /* @__PURE__ */ new Map();
+    this._showAxes = false;
+    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);
@@ -2620,16 +3236,22 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
     this.svg_element = this.create();
     console.log("Created ena-graph svg element: ", this.svg_element);
     document.addEventListener("model-updated", (e) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
       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;
       const nodeIdCol = model.node_id_col;
       const groupColName = model.group_col;
       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)) {
         const groupCol = model.points.col(groupColName);
@@ -2663,7 +3285,9 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
       }, "getExtent");
       const maxNodeExtent = ((_c = model.nodes) == null ? void 0 : _c.rows) ? getExtent(model.nodes.rows()) : 0;
       const maxPointExtent = ((_d = model.points) == null ? void 0 : _d.rows) ? getExtent(model.points.rows()) : 0;
-      const pointScale = scalePointsEnabled && maxPointExtent > 0 && maxNodeExtent > 0 ? maxNodeExtent / maxPointExtent : 1;
+      const maxTrajExtent = ((_e = model.trajectories) == null ? void 0 : _e.rows) ? getExtent(model.trajectories.rows()) : 0;
+      const effectivePointExtent = maxPointExtent > 0 ? maxPointExtent : maxTrajExtent;
+      const pointScale = scalePointsEnabled && effectivePointExtent > 0 && maxNodeExtent > 0 ? maxNodeExtent / effectivePointExtent : 1;
       const labelNodes = config.labelNodes;
       const labelMeans = config.labelMeans;
       const labelPoints = config.labelPoints;
@@ -2686,7 +3310,7 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
       }, "rowToPoint");
       const groupSums = {};
       const showUnitPoints = config.showPoints;
-      if ((_e = model.points) == null ? void 0 : _e.rows) {
+      if ((_f = model.points) == null ? void 0 : _f.rows) {
         const pointsLayer = this.__children__.search("__children__", "points");
         if (pointsLayer) {
           model.points.rows().forEach((row) => {
@@ -2695,6 +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 = 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);
             }
@@ -2712,7 +3346,7 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
               groupSums[group].n += 1;
             }
           });
-          const hasGroupsFrame = !!(((_f = model.groups) == null ? void 0 : _f.rows) && model.groups.rows().length > 0);
+          const hasGroupsFrame = !!(((_g = model.groups) == null ? void 0 : _g.rows) && model.groups.rows().length > 0);
           const activeGroupRows = config.showMeans && hasGroupsFrame ? model.groups.rows().filter((r) => {
             const g = r.rowName ?? String(r[0]);
             return activeMeanGroups.size === 0 || activeMeanGroups.has(g);
@@ -2744,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");
@@ -2782,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;
@@ -2798,7 +3439,7 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
                     this._ciRects.delete(g);
                   }
                 });
-                if ((_g = model.confidence) == null ? void 0 : _g.rows) {
+                if ((_h = model.confidence) == null ? void 0 : _h.rows) {
                   model.confidence.rows().forEach((row) => {
                     const groupIdx = row.names.indexOf(groupColName ?? "group");
                     const group = groupIdx >= 0 ? String(row[groupIdx]) : row.rowName ?? null;
@@ -2810,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");
@@ -2837,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");
@@ -2858,7 +3509,7 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
                   });
                 }
               }
-              if ((_h = model.outlier) == null ? void 0 : _h.rows) {
+              if ((_i = model.outlier) == null ? void 0 : _i.rows) {
                 this._outlierRects.forEach((el, g) => {
                   if (!groupColorMap[g]) {
                     el.remove();
@@ -2947,20 +3598,74 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
           pointsLayer.__data__.__state__.setVariable("layer_updated", pointsLayer.__data__);
         }
       }
+      const trajectoriesLayer = this.__children__.search("__children__", "trajectories");
+      const trajectoriesEnabled = config.showTrajectories;
+      if (trajectoriesEnabled && trajectoriesLayer) {
+        trajectoriesLayer.__data__.objects.clear();
+        this.__data__.trajectories.clear();
+        const trajSource = ((_j = model.trajectories) == null ? void 0 : _j.rows) ? model.trajectories : model.points;
+        if (trajSource == null ? void 0 : trajSource.rows) {
+          const unitRows = {};
+          const selectedUnits = config.trajectoryUnits ? config.trajectoryUnits.split(",").map((s) => s.trim()) : null;
+          trajSource.rows().forEach((row) => {
+            const uIdx = row.names.indexOf(unitIdCol) >= 0 ? row.names.indexOf(unitIdCol) : row.names.indexOf("unit") >= 0 ? row.names.indexOf("unit") : row.names.indexOf("ENA_UNIT") >= 0 ? row.names.indexOf("ENA_UNIT") : -1;
+            const unit = uIdx >= 0 ? String(row[uIdx]) : row.rowName || "unit-1";
+            if (selectedUnits && !selectedUnits.includes(unit)) return;
+            const xIdx = row.names.indexOf(dims[0]);
+            const yIdx = dims.length > 1 ? row.names.indexOf(dims[1]) : -1;
+            const tIdx = row.names.indexOf("time") >= 0 ? row.names.indexOf("time") : row.names.indexOf("ActivityNumber") >= 0 ? row.names.indexOf("ActivityNumber") : row.names.indexOf("RowID") >= 0 ? row.names.indexOf("RowID") : -1;
+            const time = tIdx >= 0 ? Number(row[tIdx]) : unitRows[unit] ? unitRows[unit].length + 1 : 1;
+            if (xIdx >= 0 && yIdx >= 0) {
+              if (!unitRows[unit]) unitRows[unit] = [];
+              unitRows[unit].push({
+                x: Number(row[xIdx]) * pointScale,
+                y: -Number(row[yIdx]) * pointScale,
+                time
+              });
+            }
+          });
+          const unitKeys = Object.keys(unitRows);
+          unitKeys.forEach((unitKey, uIdx) => {
+            const rawPts = unitRows[unitKey];
+            if (rawPts.length === 0) return;
+            const colorStr = GROUP_PALETTE[uIdx % GROUP_PALETTE.length];
+            const trajObj = new Trajectory({
+              ID: `traj-${unitKey}`,
+              unitId: unitKey,
+              color: new Color(colorStr),
+              lineStyle: config.trajectoryLineStyle,
+              strokeWidth: config.trajectoryStrokeWidth,
+              strokeWidthRange: config.trajectoryStrokeWidthRange,
+              opacityRange: config.trajectoryOpacityRange,
+              smooth: config.trajectorySmooth,
+              maxDegree: config.trajectoryMaxDegree,
+              degreeSelection: config.trajectoryDegreeSelection,
+              currentTime: config.trajectoryPlayhead ?? Infinity,
+              showPoints: config.trajectoryShowPoints,
+              showTips: config.trajectoryShowTips,
+              points: rawPts.map((p) => ({ x: p.x, y: p.y, time: p.time }))
+            });
+            this.__data__.trajectories.set(unitKey, trajObj);
+            trajectoriesLayer.__data__.objects.set(trajObj.ID, trajObj);
+          });
+        }
+        trajectoriesLayer.__data__.__state__.setVariable("layer_updated", trajectoriesLayer.__data__);
+      }
       const networkLayer = this.__children__.search("__children__", "network");
       const edgeLayer = networkLayer == null ? void 0 : networkLayer.__children__.search("__children__", "edges");
       const nodeLayer = networkLayer == null ? void 0 : networkLayer.__children__.search("__children__", "nodes");
       const edgenodeLayer = networkLayer == null ? void 0 : networkLayer.__children__.search("__children__", "edgenodes");
       const edgesEnabled = config.showEdges;
-      if (((_i = model.nodes) == null ? void 0 : _i.rows) && nodeLayer) {
+      if (((_k = model.nodes) == null ? void 0 : _k.rows) && nodeLayer) {
         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 && ((_j = model.edges) == null ? void 0 : _j.rows)) {
+        if (edgesEnabled && edgeLayer && ((_l = model.edges) == null ? void 0 : _l.rows)) {
           const unitGroupMap = {};
-          if (groupColName && ((_k = model.points) == null ? void 0 : _k.rows)) {
+          if (groupColName && ((_m = model.points) == null ? void 0 : _m.rows)) {
             model.points.rows().forEach((row) => {
               const qIdx = row.names.indexOf(unitIdCol);
               const gIdx = row.names.indexOf(groupColName);
@@ -3054,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]) : "";
@@ -3076,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) {
@@ -3086,15 +3820,13 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
               totalWeightByPair[key] = (totalWeightByPair[key] ?? 0) + weight;
             });
           }
-          ((_l = this.__data__.extremes) == null ? void 0 : _l.x_max) ?? 1;
           drawEdges.forEach(({ col, pair, weight, color }) => {
             const fromNode = nodeLayer.__data__.objects.get(pair[0]);
             const toNode = nodeLayer.__data__.objects.get(pair[1]);
             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;
@@ -3118,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);
@@ -3135,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();
@@ -3143,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);
@@ -3164,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() {
@@ -3204,17 +3952,27 @@ 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");
     const edgesEl = this.querySelector("qe-edges");
+    const trajectoriesEl = this.querySelector("qe-trajectories");
+    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,
@@ -3224,20 +3982,56 @@ 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
+      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,
+      trajectorySmooth: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("smooth")) ?? "none",
+      trajectoryMaxDegree: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("max-degree")) ? parseInt(trajectoriesEl.getAttribute("max-degree"), 10) : 3,
+      trajectoryDegreeSelection: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("degree-selection")) ?? "loocv_2d",
+      trajectoryShowPoints: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("points")) !== "false",
+      trajectoryShowTips: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("tips")) !== "false",
+      trajectoryPlayhead: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("playhead")) ? parseFloat(trajectoriesEl.getAttribute("playhead")) : null,
+      trajectoryLineStyle: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("line-style")) ?? "uniform",
+      trajectoryStrokeWidth: (trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("stroke-width")) ? parseFloat(trajectoriesEl.getAttribute("stroke-width")) : 2,
+      trajectoryStrokeWidthRange: this._parseNumberPair(trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("stroke-width-range"), [1, 6]),
+      trajectoryOpacityRange: this._parseNumberPair(trajectoriesEl == null ? void 0 : trajectoriesEl.getAttribute("opacity-range"), [0.3, 1]),
+      // Axes — presence of <qe-axes> = draw axis lines. The x / y attributes add
+      // a per-axis label: a value is used verbatim, an empty attribute falls back
+      // to the dimension name (resolved later, where dims are known). null = no
+      // label for that axis.
+      showAxes: !!axesEl,
+      axisXLabel: (axesEl == null ? void 0 : axesEl.hasAttribute("x")) ? axesEl.getAttribute("x") ?? "" : null,
+      axisYLabel: (axesEl == null ? void 0 : axesEl.hasAttribute("y")) ? axesEl.getAttribute("y") ?? "" : null
     };
   }
+  _parseNumberPair(value, fallback) {
+    if (!value) return fallback;
+    const parts = value.split(",").map((part) => Number(part.trim()));
+    if (parts.length < 2 || !parts.every(Number.isFinite)) return fallback;
+    return [parts[0], parts[1]];
+  }
   attributeChangedCallback(_name2, oldValue, newValue) {
     if (oldValue === newValue) return;
     this._scheduleRerender();
@@ -3246,9 +4040,11 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
     var _a;
     const w = this.getAttribute("width");
     const h = this.getAttribute("height");
+    this.style.display = "block";
     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,
@@ -3259,14 +4055,32 @@ 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",
-        "label-points"
+        "label-points",
+        "units",
+        "smooth",
+        "degree",
+        "points",
+        "tips",
+        "playhead",
+        "line-style",
+        "stroke-width",
+        "stroke-width-range",
+        "opacity-range",
+        "x",
+        "y",
+        "size",
+        "fixed-size"
       ]
     });
     const forId = this.getAttribute("for");
@@ -3286,13 +4100,283 @@ 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");
     svg.classList.add("graph");
+    svg.style.display = "block";
+    svg.style.width = "100%";
+    svg.style.height = "100%";
+    svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
     svg.setAttribute("viewBox", this.__data__.extremes.as_viewBox());
     svg.setAttribute("transform", this.__data__.transform.toString());
     svg.setAttribute("role", "figure");
@@ -3402,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;
@@ -3419,6 +4635,78 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
     this.update_layers();
     this.update_labels();
     this.update_extremes();
+    this.update_axes();
+    this._applyHighlights();
+  }
+  /**
+   * Axes (<qe-axes>): toggle the axis-line cross by presence, and draw/position
+   * per-axis labels at the positive ends using the current extent. Labels are
+   * 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";
+    }
+    const parent = this._labelsGroup;
+    const extent = this.__data__.extremes.x_max;
+    if (!parent || extent <= 0) return;
+    const fontSize = extent * 0.06;
+    const gap = fontSize * 0.6;
+    const place = /* @__PURE__ */ __name((axis, text) => {
+      let el = this._axisLabelEls.get(axis);
+      if (!this._showAxes || text == null) {
+        if (el) {
+          el.remove();
+          this._axisLabelEls.delete(axis);
+        }
+        return;
+      }
+      if (!el) {
+        el = document.createElementNS("http://www.w3.org/2000/svg", "text");
+        el.setAttribute("data-axis-label", axis);
+        el.setAttribute("pointer-events", "none");
+        parent.appendChild(el);
+        this._axisLabelEls.set(axis, el);
+      }
+      el.textContent = text;
+      el.setAttribute("font-size", fontSize.toString());
+      el.setAttribute("font-family", "system-ui, sans-serif");
+      el.setAttribute("font-weight", "600");
+      el.setAttribute("fill", "#556");
+      if (axis === "x") {
+        el.setAttribute("x", (extent - gap).toString());
+        el.setAttribute("y", (-gap).toString());
+        el.setAttribute("text-anchor", "end");
+      } else {
+        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());
@@ -3482,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,
@@ -3492,6 +4784,7 @@ export {
   DataFrameRow,
   Edge,
   Graph,
+  QEAxesElement,
   QEEdgesElement,
   QEGraphElement,
   QELayer,
@@ -3500,8 +4793,18 @@ export {
   QENodesElement,
   QEPoint,
   QEPointsElement,
+  QETrajectoriesElement,
+  QETrajectory,
   QEVisualElement,
+  TRAJECTORY_ZERO_EPS,
+  Trajectory,
   WeightedColor,
+  fitTrajectory,
+  getGraph,
+  getGraphs,
+  nearOriginFilter,
+  sampleCurve,
+  selectDegree,
   vizENA
 };
 //# sourceMappingURL=qeviz.es.js.map