@qe-libs/qeviz 0.1.0 → 0.2.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);
@@ -812,7 +825,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 +1674,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 +1717,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 +1843,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 +1889,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) {
@@ -1915,7 +2181,7 @@ const _EdgeArrow = class _EdgeArrow extends PlottedObject {
   }
   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 _mid = _this.from_point, head = Tools.Geometry.Line.point_along([[_this.to.x, _this.to.y], _mid], 0.2), nock = Tools.Geometry.Line.point_along([[_this.to.x, _this.to.y], _mid], 0.35), mid = Tools.Geometry.Line.midpoint(head, nock), rot_mid = Tools.Geometry.Line.rotate(_this.line, mid), rot_nock = Tools.Geometry.Line.rotate(_this.line, nock), mid_int0 = Tools.Geometry.Line.intersection([_mid, _this.base_pts[0]], rot_mid), mid_int1 = Tools.Geometry.Line.intersection([_mid, _this.base_pts[1]], rot_mid), nock_int0 = Tools.Geometry.Line.intersection([_mid, _this.base_pts[0]], rot_nock), nock_int1 = Tools.Geometry.Line.intersection([_mid, _this.base_pts[1]], rot_nock);
     let p = `M${head.join(" ")} ${mid_int0.join(" ")} ${nock_int0.join(" ")}  ${mid.join(" ")} ${nock_int1.join(" ")}  ${mid_int1.join(" ")}z`;
     return p;
   }
@@ -2200,11 +2466,22 @@ const _QEPoint = class _QEPoint extends Drawable {
     const extent = this.graph.__data__.extremes.x_max;
     return (extent > 0 ? extent : 1) * 6e-3 * this.__data__.size;
   }
+  /** 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);
     el.setAttribute("fill", this.__data__.color.toString());
+    this.applyStroke(el);
     const r = this.computeRadius();
     if (this.isSquare) {
       el.setAttribute("x", (this.x - r).toString());
@@ -2242,6 +2519,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 +2538,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 +2732,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 +2757,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) => {
@@ -2536,10 +2956,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",
@@ -2613,6 +3045,10 @@ 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.graph = this;
     this.parent = null;
     this.__data__ = new Graph(DefaultGraphOptions);
@@ -2620,7 +3056,7 @@ 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;
@@ -2630,6 +3066,9 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
       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._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 +3102,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 +3127,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 +3136,8 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
             const colorStr = group ? groupColorMap[group] ?? "#888888" : "#888888";
             if (showUnitPoints) {
               const pt = rowToPoint(row, unitIdCol, colorStr, pointScale);
+              pt.size = 2.5;
+              pt.meta = { ...pt.meta ?? {}, stroke: "#ffffff" };
               this.__data__.points.set(pt.ID, pt);
               pointsLayer.__data__.objects.set(pt.ID, pt);
             }
@@ -2712,7 +3155,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);
@@ -2798,7 +3241,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;
@@ -2858,7 +3301,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 +3390,73 @@ 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;
           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);
@@ -3086,7 +3582,6 @@ 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]);
@@ -3208,6 +3703,8 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
     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.
@@ -3235,9 +3732,35 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
       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,
+      // 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,6 +3769,7 @@ 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);
@@ -3266,7 +3790,19 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
         "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"
       ]
     });
     const forId = this.getAttribute("for");
@@ -3293,6 +3829,10 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
   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");
@@ -3419,6 +3959,56 @@ const _QEGraphElement = class _QEGraphElement extends DrawableElement {
     this.update_layers();
     this.update_labels();
     this.update_extremes();
+    this.update_axes();
+  }
+  /**
+   * 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() {
+    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", (fontSize * 0.35).toString());
+        el.setAttribute("text-anchor", "start");
+      } else {
+        el.setAttribute("x", "0");
+        el.setAttribute("y", (-extent - gap).toString());
+        el.setAttribute("text-anchor", "middle");
+      }
+    }, "place");
+    place("x", this._axisXText);
+    place("y", this._axisYText);
   }
   update_labels() {
     this._nodeLabels.forEach((lbl) => lbl.update());
@@ -3492,6 +4082,7 @@ export {
   DataFrameRow,
   Edge,
   Graph,
+  QEAxesElement,
   QEEdgesElement,
   QEGraphElement,
   QELayer,
@@ -3500,8 +4091,16 @@ export {
   QENodesElement,
   QEPoint,
   QEPointsElement,
+  QETrajectoriesElement,
+  QETrajectory,
   QEVisualElement,
+  TRAJECTORY_ZERO_EPS,
+  Trajectory,
   WeightedColor,
+  fitTrajectory,
+  nearOriginFilter,
+  sampleCurve,
+  selectDegree,
   vizENA
 };
 //# sourceMappingURL=qeviz.es.js.map