@sjcrh/proteinpaint-client 2.217.0 → 2.218.0

package/dist/chunk-OXVB4OZC.js

@@ -0,0 +1,4373 @@
+import {
+  d3lasso
+} from "./chunk-JH73IL4C.js";
+import {
+  getId
+} from "./chunk-C7O67FZJ.js";
+import {
+  BufferGeometry,
+  CanvasTexture,
+  Color,
+  Float32BufferAttribute,
+  Line,
+  LineBasicMaterial,
+  LinearSRGBColorSpace,
+  Mesh,
+  MeshBasicMaterial,
+  PerspectiveCamera,
+  PlaneGeometry,
+  Points,
+  PointsMaterial,
+  Scene,
+  TextureLoader,
+  Vector2,
+  Vector3,
+  WebGLRenderer
+} from "./chunk-72PLI3GC.js";
+import {
+  ColorScale,
+  DataPointInteractions,
+  Tabs,
+  addGeneSearchbox,
+  addNewGroup,
+  controlsInit,
+  digestMessage,
+  downloadSingleSVG,
+  downloadTable,
+  fillTermWrapper,
+  formatHeaderText,
+  getFilter,
+  getMaxLabelWidth,
+  getSamplelstTW,
+  getSingleCellSpecialCase,
+  renderTable,
+  sayerror,
+  shapeSelector,
+  shapesArray,
+  table2col
+} from "./chunk-YS7Y257H.js";
+import {
+  Menu
+} from "./chunk-CNFTQSNE.js";
+import {
+  icons
+} from "./chunk-3CIL7KH7.js";
+import {
+  calculatePadding,
+  dofetch3,
+  getCoordinate,
+  xAxisOffSet,
+  yAxisOffSet
+} from "./chunk-XJYVMXMZ.js";
+import {
+  dictionaryNumericTypes,
+  getDateFromNumber,
+  getDateStrFromNumber,
+  isNumericTerm,
+  numericTypes
+} from "./chunk-ET2KFCXK.js";
+import {
+  Greys_default,
+  SINGLECELL_CELLTYPE,
+  SINGLECELL_GENE_EXPRESSION,
+  SINGLECELL_NUMERIC_VALUE,
+  axisBottom,
+  axisLeft,
+  density_default,
+  dt2label,
+  getColors,
+  identity,
+  line_default,
+  mclass,
+  morigin,
+  path_default,
+  zoom_default
+} from "./chunk-LMG7Y5IN.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-HBNB5TRH.js";
+import {
+  extent,
+  linear,
+  max,
+  sequential,
+  time
+} from "./chunk-4OLM3KSB.js";
+import {
+  roundValueAuto
+} from "./chunk-TLT4YIG3.js";
+import {
+  create_default,
+  pointer_default,
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+import {
+  rgb
+} from "./chunk-Q5RDQNIT.js";
+import {
+  __commonJS,
+  __toESM
+} from "./chunk-HS5PO5ZQ.js";
+
+// ../node_modules/d3-regression/dist/d3-regression.js
+var require_d3_regression = __commonJS({
+  "../node_modules/d3-regression/dist/d3-regression.js"(exports, module) {
+    (function(global, factory) {
+      typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = global || self, factory(global.d3 = {}));
+    })(exports, (function(exports2) {
+      "use strict";
+      function _slicedToArray(arr, i) {
+        return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+      }
+      function _arrayWithHoles(arr) {
+        if (Array.isArray(arr)) return arr;
+      }
+      function _iterableToArrayLimit(arr, i) {
+        var _arr = [];
+        var _n = true;
+        var _d = false;
+        var _e = void 0;
+        try {
+          for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+          }
+        } catch (err) {
+          _d = true;
+          _e = err;
+        } finally {
+          try {
+            if (!_n && _i["return"] != null) _i["return"]();
+          } finally {
+            if (_d) throw _e;
+          }
+        }
+        return _arr;
+      }
+      function _nonIterableRest() {
+        throw new TypeError("Invalid attempt to destructure non-iterable instance");
+      }
+      function points(data, x, y, sort) {
+        data = data.filter(function(d2, i2) {
+          var u = x(d2, i2), v = y(d2, i2);
+          return u != null && isFinite(u) && v != null && isFinite(v);
+        });
+        if (sort) {
+          data.sort(function(a, b) {
+            return x(a) - x(b);
+          });
+        }
+        var n = data.length, X = new Float64Array(n), Y = new Float64Array(n);
+        var ux = 0, uy = 0, xv, yv, d;
+        for (var i = 0; i < n; ) {
+          d = data[i];
+          X[i] = xv = +x(d, i, data);
+          Y[i] = yv = +y(d, i, data);
+          ++i;
+          ux += (xv - ux) / i;
+          uy += (yv - uy) / i;
+        }
+        for (var _i = 0; _i < n; ++_i) {
+          X[_i] -= ux;
+          Y[_i] -= uy;
+        }
+        return [X, Y, ux, uy];
+      }
+      function visitPoints(data, x, y, cb) {
+        var iterations = 0;
+        for (var i = 0, n = data.length; i < n; i++) {
+          var d = data[i], dx = +x(d, i, data), dy = +y(d, i, data);
+          if (dx != null && isFinite(dx) && dy != null && isFinite(dy)) {
+            cb(dx, dy, iterations++);
+          }
+        }
+      }
+      function determination(data, x, y, uY, predict) {
+        var SSE = 0, SST = 0;
+        visitPoints(data, x, y, function(dx, dy) {
+          var sse = dy - predict(dx), sst = dy - uY;
+          SSE += sse * sse;
+          SST += sst * sst;
+        });
+        return 1 - SSE / SST;
+      }
+      function angle(line) {
+        return Math.atan2(line[1][1] - line[0][1], line[1][0] - line[0][0]) * 180 / Math.PI;
+      }
+      function midpoint(line) {
+        return [(line[0][0] + line[1][0]) / 2, (line[0][1] + line[1][1]) / 2];
+      }
+      function interpose(xmin, xmax, predict) {
+        var l = Math.log(xmax - xmin) * Math.LOG10E + 1 | 0;
+        var precision = 1 * Math.pow(10, -l / 2 - 1), maxIter = 1e4;
+        var points2 = [px(xmin), px(xmax)], iter = 0;
+        while (find(points2) && iter < maxIter) {
+        }
+        return points2;
+        function px(x) {
+          return [x, predict(x)];
+        }
+        function find(points3) {
+          iter++;
+          var n = points3.length;
+          var found = false;
+          for (var i = 0; i < n - 1; i++) {
+            var p0 = points3[i], p1 = points3[i + 1], m = midpoint([p0, p1]), mp = px(m[0]), a0 = angle([p0, m]), a1 = angle([p0, mp]), a = Math.abs(a0 - a1);
+            if (a > precision) {
+              points3.splice(i + 1, 0, mp);
+              found = true;
+            }
+          }
+          return found;
+        }
+      }
+      function ols(uX, uY, uXY, uX2) {
+        var delta = uX2 - uX * uX, slope = Math.abs(delta) < 1e-24 ? 0 : (uXY - uX * uY) / delta, intercept = uY - slope * uX;
+        return [intercept, slope];
+      }
+      function exponential() {
+        var x = function x2(d) {
+          return d[0];
+        }, y = function y2(d) {
+          return d[1];
+        }, domain;
+        function exponential2(data) {
+          var n = 0, Y = 0, YL = 0, XY = 0, XYL = 0, X2Y = 0, xmin = domain ? +domain[0] : Infinity, xmax = domain ? +domain[1] : -Infinity;
+          visitPoints(data, x, y, function(dx, dy) {
+            var ly = Math.log(dy), xy = dx * dy;
+            ++n;
+            Y += (dy - Y) / n;
+            XY += (xy - XY) / n;
+            X2Y += (dx * xy - X2Y) / n;
+            YL += (dy * ly - YL) / n;
+            XYL += (xy * ly - XYL) / n;
+            if (!domain) {
+              if (dx < xmin) xmin = dx;
+              if (dx > xmax) xmax = dx;
+            }
+          });
+          var _ols = ols(XY / Y, YL / Y, XYL / Y, X2Y / Y), _ols2 = _slicedToArray(_ols, 2), a = _ols2[0], b = _ols2[1];
+          a = Math.exp(a);
+          var fn = function fn2(x2) {
+            return a * Math.exp(b * x2);
+          }, out = interpose(xmin, xmax, fn);
+          out.a = a;
+          out.b = b;
+          out.predict = fn;
+          out.rSquared = determination(data, x, y, Y, fn);
+          return out;
+        }
+        exponential2.domain = function(arr) {
+          return arguments.length ? (domain = arr, exponential2) : domain;
+        };
+        exponential2.x = function(fn) {
+          return arguments.length ? (x = fn, exponential2) : x;
+        };
+        exponential2.y = function(fn) {
+          return arguments.length ? (y = fn, exponential2) : y;
+        };
+        return exponential2;
+      }
+      function linear2() {
+        var x = function x2(d) {
+          return d[0];
+        }, y = function y2(d) {
+          return d[1];
+        }, domain;
+        function linear3(data) {
+          var n = 0, X = 0, Y = 0, XY = 0, X2 = 0, xmin = domain ? +domain[0] : Infinity, xmax = domain ? +domain[1] : -Infinity;
+          visitPoints(data, x, y, function(dx, dy) {
+            ++n;
+            X += (dx - X) / n;
+            Y += (dy - Y) / n;
+            XY += (dx * dy - XY) / n;
+            X2 += (dx * dx - X2) / n;
+            if (!domain) {
+              if (dx < xmin) xmin = dx;
+              if (dx > xmax) xmax = dx;
+            }
+          });
+          var _ols = ols(X, Y, XY, X2), _ols2 = _slicedToArray(_ols, 2), intercept = _ols2[0], slope = _ols2[1], fn = function fn2(x2) {
+            return slope * x2 + intercept;
+          }, out = [[xmin, fn(xmin)], [xmax, fn(xmax)]];
+          out.a = slope;
+          out.b = intercept;
+          out.predict = fn;
+          out.rSquared = determination(data, x, y, Y, fn);
+          return out;
+        }
+        linear3.domain = function(arr) {
+          return arguments.length ? (domain = arr, linear3) : domain;
+        };
+        linear3.x = function(fn) {
+          return arguments.length ? (x = fn, linear3) : x;
+        };
+        linear3.y = function(fn) {
+          return arguments.length ? (y = fn, linear3) : y;
+        };
+        return linear3;
+      }
+      function median(arr) {
+        arr.sort(function(a, b) {
+          return a - b;
+        });
+        var i = arr.length / 2;
+        return i % 1 === 0 ? (arr[i - 1] + arr[i]) / 2 : arr[Math.floor(i)];
+      }
+      var maxiters = 2, epsilon = 1e-12;
+      function loess() {
+        var x = function x2(d) {
+          return d[0];
+        }, y = function y2(d) {
+          return d[1];
+        }, bandwidth = 0.3;
+        function loess2(data) {
+          var _points = points(data, x, y, true), _points2 = _slicedToArray(_points, 4), xv = _points2[0], yv = _points2[1], ux = _points2[2], uy = _points2[3], n = xv.length, bw = Math.max(2, ~~(bandwidth * n)), yhat = new Float64Array(n), residuals = new Float64Array(n), robustWeights = new Float64Array(n).fill(1);
+          for (var iter = -1; ++iter <= maxiters; ) {
+            var interval = [0, bw - 1];
+            for (var i = 0; i < n; ++i) {
+              var dx = xv[i], i0 = interval[0], i1 = interval[1], edge = dx - xv[i0] > xv[i1] - dx ? i0 : i1;
+              var W = 0, X = 0, Y = 0, XY = 0, X2 = 0, denom = 1 / Math.abs(xv[edge] - dx || 1);
+              for (var k = i0; k <= i1; ++k) {
+                var xk = xv[k], yk = yv[k], w = tricube(Math.abs(dx - xk) * denom) * robustWeights[k], xkw = xk * w;
+                W += w;
+                X += xkw;
+                Y += yk * w;
+                XY += yk * xkw;
+                X2 += xk * xkw;
+              }
+              var _ols = ols(X / W, Y / W, XY / W, X2 / W), _ols2 = _slicedToArray(_ols, 2), a = _ols2[0], b = _ols2[1];
+              yhat[i] = a + b * dx;
+              residuals[i] = Math.abs(yv[i] - yhat[i]);
+              updateInterval(xv, i + 1, interval);
+            }
+            if (iter === maxiters) {
+              break;
+            }
+            var medianResidual = median(residuals);
+            if (Math.abs(medianResidual) < epsilon) break;
+            for (var _i = 0, arg, _w; _i < n; ++_i) {
+              arg = residuals[_i] / (6 * medianResidual);
+              robustWeights[_i] = arg >= 1 ? epsilon : (_w = 1 - arg * arg) * _w;
+            }
+          }
+          return output(xv, yhat, ux, uy);
+        }
+        loess2.bandwidth = function(bw) {
+          return arguments.length ? (bandwidth = bw, loess2) : bandwidth;
+        };
+        loess2.x = function(fn) {
+          return arguments.length ? (x = fn, loess2) : x;
+        };
+        loess2.y = function(fn) {
+          return arguments.length ? (y = fn, loess2) : y;
+        };
+        return loess2;
+      }
+      function tricube(x) {
+        return (x = 1 - x * x * x) * x * x;
+      }
+      function updateInterval(xv, i, interval) {
+        var val = xv[i], left = interval[0], right = interval[1] + 1;
+        if (right >= xv.length) return;
+        while (i > left && xv[right] - val <= val - xv[left]) {
+          interval[0] = ++left;
+          interval[1] = right;
+          ++right;
+        }
+      }
+      function output(xv, yhat, ux, uy) {
+        var n = xv.length, out = [];
+        var i = 0, cnt = 0, prev = [], v;
+        for (; i < n; ++i) {
+          v = xv[i] + ux;
+          if (prev[0] === v) {
+            prev[1] += (yhat[i] - prev[1]) / ++cnt;
+          } else {
+            cnt = 0;
+            prev[1] += uy;
+            prev = [v, yhat[i]];
+            out.push(prev);
+          }
+        }
+        prev[1] += uy;
+        return out;
+      }
+      function logarithmic() {
+        var x = function x2(d) {
+          return d[0];
+        }, y = function y2(d) {
+          return d[1];
+        }, base = Math.E, domain;
+        function logarithmic2(data) {
+          var n = 0, X = 0, Y = 0, XY = 0, X2 = 0, xmin = domain ? +domain[0] : Infinity, xmax = domain ? +domain[1] : -Infinity, lb = Math.log(base);
+          visitPoints(data, x, y, function(dx, dy) {
+            var lx = Math.log(dx) / lb;
+            ++n;
+            X += (lx - X) / n;
+            Y += (dy - Y) / n;
+            XY += (lx * dy - XY) / n;
+            X2 += (lx * lx - X2) / n;
+            if (!domain) {
+              if (dx < xmin) xmin = dx;
+              if (dx > xmax) xmax = dx;
+            }
+          });
+          var _ols = ols(X, Y, XY, X2), _ols2 = _slicedToArray(_ols, 2), intercept = _ols2[0], slope = _ols2[1], fn = function fn2(x2) {
+            return slope * Math.log(x2) / lb + intercept;
+          }, out = interpose(xmin, xmax, fn);
+          out.a = slope;
+          out.b = intercept;
+          out.predict = fn;
+          out.rSquared = determination(data, x, y, Y, fn);
+          return out;
+        }
+        logarithmic2.domain = function(arr) {
+          return arguments.length ? (domain = arr, logarithmic2) : domain;
+        };
+        logarithmic2.x = function(fn) {
+          return arguments.length ? (x = fn, logarithmic2) : x;
+        };
+        logarithmic2.y = function(fn) {
+          return arguments.length ? (y = fn, logarithmic2) : y;
+        };
+        logarithmic2.base = function(n) {
+          return arguments.length ? (base = n, logarithmic2) : base;
+        };
+        return logarithmic2;
+      }
+      function quad() {
+        var x = function x2(d) {
+          return d[0];
+        }, y = function y2(d) {
+          return d[1];
+        }, domain;
+        function quadratic(data) {
+          var _points = points(data, x, y), _points2 = _slicedToArray(_points, 4), xv = _points2[0], yv = _points2[1], ux = _points2[2], uy = _points2[3], n = xv.length;
+          var X2 = 0, X3 = 0, X4 = 0, XY = 0, X2Y = 0, i, dx, dy, x2;
+          for (i = 0; i < n; ) {
+            dx = xv[i];
+            dy = yv[i++];
+            x2 = dx * dx;
+            X2 += (x2 - X2) / i;
+            X3 += (x2 * dx - X3) / i;
+            X4 += (x2 * x2 - X4) / i;
+            XY += (dx * dy - XY) / i;
+            X2Y += (x2 * dy - X2Y) / i;
+          }
+          var Y = 0, n0 = 0, xmin = domain ? +domain[0] : Infinity, xmax = domain ? +domain[1] : -Infinity;
+          visitPoints(data, x, y, function(dx2, dy2) {
+            n0++;
+            Y += (dy2 - Y) / n0;
+            if (!domain) {
+              if (dx2 < xmin) xmin = dx2;
+              if (dx2 > xmax) xmax = dx2;
+            }
+          });
+          var X2X2 = X4 - X2 * X2, d = X2 * X2X2 - X3 * X3, a = (X2Y * X2 - XY * X3) / d, b = (XY * X2X2 - X2Y * X3) / d, c = -a * X2, fn = function fn2(x3) {
+            x3 = x3 - ux;
+            return a * x3 * x3 + b * x3 + c + uy;
+          };
+          var out = interpose(xmin, xmax, fn);
+          out.a = a;
+          out.b = b - 2 * a * ux;
+          out.c = c - b * ux + a * ux * ux + uy;
+          out.predict = fn;
+          out.rSquared = determination(data, x, y, Y, fn);
+          return out;
+        }
+        quadratic.domain = function(arr) {
+          return arguments.length ? (domain = arr, quadratic) : domain;
+        };
+        quadratic.x = function(fn) {
+          return arguments.length ? (x = fn, quadratic) : x;
+        };
+        quadratic.y = function(fn) {
+          return arguments.length ? (y = fn, quadratic) : y;
+        };
+        return quadratic;
+      }
+      function polynomial() {
+        var x = function x2(d) {
+          return d[0];
+        }, y = function y2(d) {
+          return d[1];
+        }, order = 3, domain;
+        function polynomial2(data) {
+          if (order === 1) {
+            var o = linear2().x(x).y(y).domain(domain)(data);
+            o.coefficients = [o.b, o.a];
+            delete o.a;
+            delete o.b;
+            return o;
+          }
+          if (order === 2) {
+            var _o = quad().x(x).y(y).domain(domain)(data);
+            _o.coefficients = [_o.c, _o.b, _o.a];
+            delete _o.a;
+            delete _o.b;
+            delete _o.c;
+            return _o;
+          }
+          var _points = points(data, x, y), _points2 = _slicedToArray(_points, 4), xv = _points2[0], yv = _points2[1], ux = _points2[2], uy = _points2[3], n = xv.length, lhs = [], rhs = [], k = order + 1;
+          var Y = 0, n0 = 0, xmin = domain ? +domain[0] : Infinity, xmax = domain ? +domain[1] : -Infinity;
+          visitPoints(data, x, y, function(dx, dy) {
+            ++n0;
+            Y += (dy - Y) / n0;
+            if (!domain) {
+              if (dx < xmin) xmin = dx;
+              if (dx > xmax) xmax = dx;
+            }
+          });
+          var i, j, l, v, c;
+          for (i = 0; i < k; ++i) {
+            for (l = 0, v = 0; l < n; ++l) {
+              v += Math.pow(xv[l], i) * yv[l];
+            }
+            lhs.push(v);
+            c = new Float64Array(k);
+            for (j = 0; j < k; ++j) {
+              for (l = 0, v = 0; l < n; ++l) {
+                v += Math.pow(xv[l], i + j);
+              }
+              c[j] = v;
+            }
+            rhs.push(c);
+          }
+          rhs.push(lhs);
+          var coef = gaussianElimination(rhs), fn = function fn2(x2) {
+            x2 -= ux;
+            var y2 = uy + coef[0] + coef[1] * x2 + coef[2] * x2 * x2;
+            for (i = 3; i < k; ++i) {
+              y2 += coef[i] * Math.pow(x2, i);
+            }
+            return y2;
+          }, out = interpose(xmin, xmax, fn);
+          out.coefficients = uncenter(k, coef, -ux, uy);
+          out.predict = fn;
+          out.rSquared = determination(data, x, y, Y, fn);
+          return out;
+        }
+        polynomial2.domain = function(arr) {
+          return arguments.length ? (domain = arr, polynomial2) : domain;
+        };
+        polynomial2.x = function(fn) {
+          return arguments.length ? (x = fn, polynomial2) : x;
+        };
+        polynomial2.y = function(fn) {
+          return arguments.length ? (y = fn, polynomial2) : y;
+        };
+        polynomial2.order = function(n) {
+          return arguments.length ? (order = n, polynomial2) : order;
+        };
+        return polynomial2;
+      }
+      function uncenter(k, a, x, y) {
+        var z = Array(k);
+        var i, j, v, c;
+        for (i = 0; i < k; ++i) {
+          z[i] = 0;
+        }
+        for (i = k - 1; i >= 0; --i) {
+          v = a[i];
+          c = 1;
+          z[i] += v;
+          for (j = 1; j <= i; ++j) {
+            c *= (i + 1 - j) / j;
+            z[i - j] += v * Math.pow(x, j) * c;
+          }
+        }
+        z[0] += y;
+        return z;
+      }
+      function gaussianElimination(matrix) {
+        var n = matrix.length - 1, coef = [];
+        var i, j, k, r, t;
+        for (i = 0; i < n; ++i) {
+          r = i;
+          for (j = i + 1; j < n; ++j) {
+            if (Math.abs(matrix[i][j]) > Math.abs(matrix[i][r])) {
+              r = j;
+            }
+          }
+          for (k = i; k < n + 1; ++k) {
+            t = matrix[k][i];
+            matrix[k][i] = matrix[k][r];
+            matrix[k][r] = t;
+          }
+          for (j = i + 1; j < n; ++j) {
+            for (k = n; k >= i; k--) {
+              matrix[k][j] -= matrix[k][i] * matrix[i][j] / matrix[i][i];
+            }
+          }
+        }
+        for (j = n - 1; j >= 0; --j) {
+          t = 0;
+          for (k = j + 1; k < n; ++k) {
+            t += matrix[k][j] * coef[k];
+          }
+          coef[j] = (matrix[n][j] - t) / matrix[j][j];
+        }
+        return coef;
+      }
+      function power() {
+        var x = function x2(d) {
+          return d[0];
+        }, y = function y2(d) {
+          return d[1];
+        }, domain;
+        function power2(data) {
+          var n = 0, X = 0, Y = 0, XY = 0, X2 = 0, YS = 0, xmin = domain ? +domain[0] : Infinity, xmax = domain ? +domain[1] : -Infinity;
+          visitPoints(data, x, y, function(dx, dy) {
+            var lx = Math.log(dx), ly = Math.log(dy);
+            ++n;
+            X += (lx - X) / n;
+            Y += (ly - Y) / n;
+            XY += (lx * ly - XY) / n;
+            X2 += (lx * lx - X2) / n;
+            YS += (dy - YS) / n;
+            if (!domain) {
+              if (dx < xmin) xmin = dx;
+              if (dx > xmax) xmax = dx;
+            }
+          });
+          var _ols = ols(X, Y, XY, X2), _ols2 = _slicedToArray(_ols, 2), a = _ols2[0], b = _ols2[1];
+          a = Math.exp(a);
+          var fn = function fn2(x2) {
+            return a * Math.pow(x2, b);
+          }, out = interpose(xmin, xmax, fn);
+          out.a = a;
+          out.b = b;
+          out.predict = fn;
+          out.rSquared = determination(data, x, y, YS, fn);
+          return out;
+        }
+        power2.domain = function(arr) {
+          return arguments.length ? (domain = arr, power2) : domain;
+        };
+        power2.x = function(fn) {
+          return arguments.length ? (x = fn, power2) : x;
+        };
+        power2.y = function(fn) {
+          return arguments.length ? (y = fn, power2) : y;
+        };
+        return power2;
+      }
+      exports2.regressionExp = exponential;
+      exports2.regressionLinear = linear2;
+      exports2.regressionLoess = loess;
+      exports2.regressionLog = logarithmic;
+      exports2.regressionPoly = polynomial;
+      exports2.regressionPow = power;
+      exports2.regressionQuad = quad;
+      Object.defineProperty(exports2, "__esModule", { value: true });
+    }));
+  }
+});
+
+// plots/scatter/viewmodel/scatterSampleTable.ts
+function getCategoryValue(category, d, tw, includeMutation = false) {
+  if (category == "") return "";
+  let value = d[category];
+  if (tw?.term.type == "geneVariant" && tw.q?.type == "values") {
+    const mutation = value.split(", ")[0];
+    for (const id in mclass) {
+      const class_info = mclass[id];
+      if (mutation == class_info.label) {
+        const mname = d.cat_info[category].find((m) => m.class == class_info.key).mname;
+        if (mname && includeMutation) value = `${mname} ${value}`;
+      }
+    }
+  }
+  if (tw?.term.type == "date") value = getDateStrFromNumber(value);
+  else if (tw?.term.type == SINGLECELL_GENE_EXPRESSION && Number.isFinite(d.geneExp)) {
+    value = roundValueAuto(d.geneExp);
+  } else if (typeof value == "number" && value % 1 != 0) value = roundValueAuto(value);
+  return value;
+}
+function buildSampleTableData(config, itemLabel, samples) {
+  const hasName = samples.some((d) => !!(d.sample || d.cellId || d.sampleId) || d.sampleId === 0);
+  const hasInfo = samples.some((d) => "info" in d);
+  const dims = [
+    { tw: config.term, key: "x" },
+    { tw: config.term2, key: "y" },
+    { tw: config.colorTW, key: "category" },
+    { tw: config.shapeTW, key: "shape" },
+    { tw: config.scaleDotTW, key: "scale", sortable: true }
+  ].filter((d) => d.tw);
+  const columns = [];
+  if (hasName) columns.push({ label: config.controlLabels?.Sample || itemLabel });
+  for (const d of dims) columns.push(d.sortable ? { label: d.tw.term.name, sortable: true } : { label: d.tw.term.name });
+  if (hasInfo) columns.push({ label: "Info" });
+  const rows = samples.map((s) => {
+    const row = [];
+    if (hasName) row.push({ value: s.sample || s.cellId || s.sampleId || "" });
+    for (const d of dims) row.push({ value: getCategoryValue(d.key, s, d.tw) });
+    if (hasInfo)
+      row.push({
+        value: "info" in s ? Object.entries(s.info).map(([k, v]) => `${k}: ${v}`).join(", ") : ""
+      });
+    return row;
+  });
+  return { columns, rows };
+}
+
+// plots/scatter/viewmodel/scatterLasso.ts
+var ScatterLasso = class {
+  constructor(scatter) {
+    this.scatter = scatter;
+    this.model = scatter.model;
+    this.view = scatter.view;
+    this.interactivity = scatter.interactivity;
+    const supportedChartTypes = this.scatter.state.currentCohortChartTypes;
+    this.hasSampleView = supportedChartTypes && supportedChartTypes.includes("sampleView");
+  }
+  start(chart) {
+    if (this.scatter.config.lassoOn) {
+      chart.lasso.items().attr("transform", (c) => this.model.transform(chart, c, 1 / 2)).style("fill-opacity", (c) => this.model.getOpacity(c) != 0 ? 0.5 : 0).classed("not_possible", true).classed("selected", false);
+    }
+  }
+  draw(chart) {
+    if (this.scatter.config.lassoOn) {
+      chart.lasso.possibleItems().attr("transform", (c) => this.model.transform(chart, c, 1.2)).style("fill-opacity", (c) => this.model.getOpacity(c)).classed("not_possible", false).classed("possible", true);
+      chart.lasso.notPossibleItems().attr("transform", (c) => this.model.transform(chart, c, 1 / 2)).style("fill-opacity", (c) => this.model.getOpacity(c) != 0 ? 0.5 : 0).classed("not_possible", true).classed("possible", false);
+    }
+  }
+  end(dragEnd, chart) {
+    if (this.scatter.config.lassoOn) {
+      chart.lasso.items().classed("not_possible", false).classed("possible", false);
+      chart.lasso.selectedItems().attr("transform", (c) => this.model.transform(chart, c, 1.3));
+      chart.lasso.items().style("fill-opacity", (c) => this.model.getOpacity(c));
+      this.selectedItems = [];
+      for (const item of chart.lasso.selectedItems()) {
+        const data = item.__data__;
+        if (!data.isRef && !(data.hidden["category"] || data.hidden["shape"])) this.selectedItems.push(item);
+      }
+      chart.lasso.notSelectedItems().attr("transform", (c) => this.model.transform(chart, c));
+      const samples = this.selectedItems.map((item) => item.__data__);
+      this.showLassoMenu(dragEnd.sourceEvent, samples);
+    }
+  }
+  showLassoMenu(event, samples) {
+    this.view.dom.tip.clear().hide();
+    if (samples.length == 0) return;
+    if (samples.some((s) => s.sampleId == null)) return;
+    this.view.dom.tip.show(event.clientX, event.clientY);
+    const labels = this.scatter.config.controlLabels;
+    const menuDiv = this.view.dom.tip.d.append("div");
+    menuDiv.append("div").attr("class", "sja_menuoption sja_sharp_border").text(`List ${samples.length} ${labels.samples}`).on("click", (event2) => {
+      this.view.dom.tip.hide();
+      this.showTable(
+        {
+          name: "Group " + (this.scatter.config.groups.length + 1),
+          items: samples
+        },
+        event2.clientX,
+        event2.clientY,
+        this.scatter.app.getState().nav.header_mode === "with_tabs"
+      );
+    });
+    if (this.scatter.app.getState().nav.header_mode === "with_tabs")
+      menuDiv.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Add to a group").on("click", async () => {
+        this.createGroup(samples);
+        this.view.dom.tip.hide();
+      });
+    if (this.scatter.app.getState().nav.header_mode === "with_tabs")
+      menuDiv.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Add to a group and filter").on("click", () => {
+        const tw = this.createGroup(samples);
+        this.interactivity.addToFilter(tw);
+        this.view.dom.tip.hide();
+      });
+    if ("sample" in samples[0] && this.hasSampleView)
+      menuDiv.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Open sample view").on("click", async () => {
+        const groupSamples = [];
+        for (const sample of samples) groupSamples.push({ sampleId: sample.sampleId, sampleName: sample.sample });
+        this.scatter.app.dispatch({
+          type: "plot_create",
+          id: getId(),
+          config: {
+            chartType: "sampleView",
+            samples: groupSamples
+          }
+        });
+        this.view.dom.tip.hide();
+      });
+  }
+  createGroup(samples) {
+    const group = {
+      name: "Group",
+      items: samples
+    };
+    const tw = getSamplelstTW([group]);
+    const filter = getFilter(tw);
+    addNewGroup(this.scatter.app, filter, this.scatter.state.groups);
+    return tw;
+  }
+  lassoReset(chart) {
+    const mainG = chart.mainG;
+    if (this.scatter.config.lassoOn) {
+      chart.lasso.items(mainG.select(".sjpcb-scatter-series").selectAll('path[name="serie"]')).targetArea(mainG).on("start", () => this.start(chart)).on("draw", () => this.draw(chart)).on("end", (event) => this.end(event, chart));
+      mainG.on(".zoom", null);
+      mainG.on("mousedown.drag", null);
+      mainG.call(chart.lasso);
+    } else {
+      chart.mainG.on(".dragstart", null);
+      chart.mainG.on(".drag", null);
+      chart.mainG.on(".dragend", null);
+    }
+  }
+  showTable(group, x, y, addGroup) {
+    const { columns, rows } = buildSampleTableData(this.scatter.config, this.scatter.settings.itemLabel, group.items);
+    const hasSampleName = "sample" in group.items[0];
+    this.view.dom.tip.clear();
+    const div = this.view.dom.tip.d.append("div").style("padding", "5px");
+    const headerDiv = div.append("div").style("margin-top", "5px");
+    const groupDiv = headerDiv.append("div").html("&nbsp;" + group.name).style("font-size", "0.9rem").on("click", () => {
+      const isEdit = groupDiv.select("input").empty();
+      if (!isEdit) return;
+      groupDiv.html("");
+      const input = groupDiv.append("input").attr("value", group.name).on("change", async () => {
+        const name = input.node().value;
+        if (name) group.name = name;
+        else input.node().value = group.name;
+        groupDiv.html("&nbsp;" + group.name);
+      });
+      input.node().focus();
+      input.node().select();
+    });
+    const tableDiv = div.append("div");
+    let buttons;
+    if (addGroup) {
+      const addGroupCallback = {
+        text: "Add to a group",
+        callback: (indexes) => {
+          const items = [];
+          for (const i of indexes) items.push(this.selectedItems[i].__data__);
+          const group2 = {
+            name: `Group ${this.scatter.config.groups.length + 1}`,
+            items,
+            index: this.scatter.config.groups.length
+          };
+          const filter = getFilter(getSamplelstTW([group2]));
+          addNewGroup(this.scatter.app, filter, this.scatter.state.groups);
+        }
+      };
+      buttons = [addGroupCallback];
+    }
+    const columnButton = {
+      text: "View",
+      callback: async (event, i) => {
+        const sample = group.items[i];
+        this.interactivity.openSampleView(sample);
+      }
+    };
+    const columnButtons = hasSampleName && this.hasSampleView ? [columnButton] : [];
+    renderTable({
+      rows,
+      columns,
+      div: tableDiv,
+      showLines: true,
+      //maxWidth: columns.length * '15' + 'vw',
+      maxHeight: "35vh",
+      buttons,
+      selectAll: true,
+      columnButtons
+    });
+    this.view.dom.tip.show(x, y, false, false);
+  }
+};
+
+// plots/scatter/model/ScatterModelBase.ts
+var import_d3_regression = __toESM(require_d3_regression(), 1);
+var shapes = shapesArray;
+var ScatterModelBase = class {
+  constructor(scatter) {
+    this.filterSampleStr = null;
+    this.scatter = scatter;
+    this.is3D = false;
+    this.is2DLarge = false;
+    this.axisOffset = { x: xAxisOffSet, y: yAxisOffSet };
+  }
+  createChart(id, data) {
+    const cohortSamples = data.samples ? data.samples.filter((sample) => !sample.isRef) : [];
+    if (cohortSamples.length > this.scatter.settings.maxSvgSamplesCutoff) this.is2DLarge = true;
+    const colorLegend = new Map(data.colorLegend);
+    const shapeLegend = new Map(data.shapeLegend);
+    const chart = { id, data, cohortSamples, colorLegend, shapeLegend };
+    if (data.src) {
+      chart.src = data.src;
+      if ("canvasWidth" in data) chart.canvasWidth = data.canvasWidth;
+      if ("canvasHeight" in data) chart.canvasHeight = data.canvasHeight;
+      if (data.totalSampleCount) chart.totalSampleCount = data.totalSampleCount;
+      this.is2DLarge = true;
+    }
+    this.charts.push(chart);
+  }
+  async initRanges() {
+    const settings = this.scatter.settings;
+    let samples = [];
+    for (const chart of this.charts) samples = samples.concat(chart.data?.samples || []);
+    if (samples.length == 0) {
+      if (this.scatter.config.singleCellPlot) {
+        this.charts[0].ranges = {
+          xMin: settings.minXScale != null ? settings.minXScale : this.range.xMin,
+          xMax: settings.maxXScale != null ? settings.maxXScale : this.range.xMax,
+          yMin: settings.minYScale != null ? settings.minYScale : this.range.yMin,
+          yMax: settings.maxYScale != null ? settings.maxYScale : this.range.yMax,
+          geMin: this.range.geMin,
+          geMax: this.range.geMax
+        };
+      }
+      return;
+    }
+    if (samples.length > settings.maxSvgSamplesCutoff) this.is2DLarge = true;
+    const s0 = samples[0];
+    const [xMin, xMax, yMin, yMax, zMin, zMax, scaleMin, scaleMax, geMin, geMax] = samples.reduce(
+      (s, d) => [
+        d.x < s[0] ? d.x : s[0],
+        d.x > s[1] ? d.x : s[1],
+        d.y < s[2] ? d.y : s[2],
+        d.y > s[3] ? d.y : s[3],
+        d.z < s[4] ? d.z : s[4],
+        d.z > s[5] ? d.z : s[5],
+        "scale" in d ? d.scale < s[6] ? d.scale : s[6] : Number.POSITIVE_INFINITY,
+        "scale" in d ? d.scale > s[7] ? d.scale : s[7] : Number.NEGATIVE_INFINITY,
+        "geneExp" in d ? d.geneExp < s[8] ? d.geneExp : s[8] : Number.POSITIVE_INFINITY,
+        "geneExp" in d ? d.geneExp > s[9] ? d.geneExp : s[9] : Number.NEGATIVE_INFINITY
+      ],
+      [s0.x, s0.x, s0.y, s0.y, s0.z, s0.z, s0.scale, s0.scale, s0.geneExp, s0.geneExp]
+    );
+    for (const chart of this.charts) {
+      chart.ranges = {
+        xMin: settings.minXScale != null ? settings.minXScale : settings.useGlobalMinMax ? this.range.xMin : xMin,
+        xMax: settings.maxXScale != null ? settings.maxXScale : settings.useGlobalMinMax ? this.range.xMax : xMax,
+        yMin: settings.minYScale != null ? settings.minYScale : settings.useGlobalMinMax ? this.range.yMin : yMin,
+        yMax: settings.maxYScale != null ? settings.maxYScale : settings.useGlobalMinMax ? this.range.yMax : yMax,
+        zMin,
+        zMax,
+        scaleMin,
+        scaleMax,
+        geMin,
+        geMax
+      };
+    }
+  }
+  getOpacity(c) {
+    if (!c.isRef) {
+      const hidden = c.hidden?.["category"] || c.hidden?.["shape"];
+      if (this.filterSampleStr) {
+        if (!c.sample?.toLowerCase().includes(this.filterSampleStr.toLowerCase())) {
+          if (hidden) return 0;
+          else return 0.1;
+        } else return 1.2;
+      }
+      const opacity = hidden ? 0 : this.scatter.settings.opacity;
+      return opacity;
+    }
+    const refOpacity = this.scatter.settings.showRef ? this.scatter.settings.opacity : 0;
+    return refOpacity;
+  }
+  getShape(chart, c) {
+    const index = chart.shapeLegend.get(c.shape).shape % shapes.length;
+    return shapes[index];
+  }
+  /** Returns the calculated coordinate or the min/max axis
+   * cap set by the user. */
+  getCoordinates(chart, c) {
+    const cx = () => {
+      return getCoordinate(c.x, this.scatter.settings.minXScale, this.scatter.settings.maxXScale);
+    };
+    const cy = () => {
+      return getCoordinate(c.y, this.scatter.settings.minYScale, this.scatter.settings.maxYScale);
+    };
+    const x = chart.xAxisScale(cx());
+    const y = chart.yAxisScale(cy());
+    return { x, y };
+  }
+  getScale(chart, c, factor = 1) {
+    const isRef = !!c.isRef;
+    let scale;
+    if (!this.scatter.config.scaleDotTW || isRef) {
+      scale = isRef ? this.scatter.settings.refSize : this.scatter.settings.size;
+    } else {
+      const range = this.scatter.settings.maxShapeSize - this.scatter.settings.minShapeSize;
+      if (this.scatter.settings.scaleDotOrder == "Ascending")
+        scale = this.scatter.settings.minShapeSize + (c.scale - chart.ranges.scaleMin) / (chart.ranges.scaleMax - chart.ranges.scaleMin) * range;
+      else
+        scale = this.scatter.settings.maxShapeSize - (c.scale - chart.ranges.scaleMin) / (chart.ranges.scaleMax - chart.ranges.scaleMin) * range;
+    }
+    const zoom = this.is2DLarge ? this.scatter.zoom : 1;
+    scale = zoom * scale * factor / 3;
+    if (this.filterSampleStr) {
+      if (c.sample?.toLowerCase().includes(this.filterSampleStr.toLowerCase())) scale = scale * 2;
+      else scale = scale * 0.8;
+    }
+    return scale;
+  }
+  transform(chart, c, factor = 1) {
+    const scale = this.getScale(chart, c, factor);
+    const particleSize = 16 * scale;
+    const { x, y } = this.getCoordinates(chart, c);
+    const offSetX = x - particleSize / 2;
+    const offSetY = y - particleSize / 2;
+    const transform = `translate(${offSetX},${offSetY}) scale(${scale})`;
+    return transform;
+  }
+  getColor(c, chart) {
+    if (this.scatter.config.colorTW?.term.type == SINGLECELL_GENE_EXPRESSION) {
+      let color;
+      if (!c.geneExp) color = this.scatter.settings.noExpColor;
+      else if (c.geneExp > chart.ranges.geMax) color = this.scatter.settings.expColor;
+      else color = chart.colorGenerator(c.geneExp);
+      return color;
+    }
+    if (this.scatter.config.colorTW?.q.mode == "continuous" && !c.isRef) {
+      const [min, max2] = chart.colorGenerator.domain();
+      if (c.category < min) return chart.colorGenerator(min);
+      if (c.category > max2) return chart.colorGenerator(max2);
+      const color = chart.colorGenerator(c.category);
+      return color;
+    }
+    if (c.category == "Default") return this.scatter.settings.defaultColor;
+    const category = chart.colorLegend.get(c.category);
+    return category.color;
+  }
+  async addGroup(group) {
+    group.plotId = this.scatter.id;
+    await this.scatter.app.vocabApi.addGroup(group);
+  }
+  getStrokeWidth(c) {
+    const opacity = this.getOpacity(c);
+    if (opacity <= 0.2)
+      return 0;
+    if (opacity == 1.2)
+      return 2;
+    return 1;
+  }
+  initAxes(chart) {
+    const config = this.scatter.config;
+    const settings = this.scatter.settings;
+    if (!chart.data?.samples || chart.data.samples.length == 0) return;
+    const offsetX = this.axisOffset.x;
+    const offsetY = this.axisOffset.y;
+    const xMin = chart.ranges.xMin;
+    const xMax = chart.ranges.xMax;
+    const yMin = chart.ranges.yMin;
+    const yMax = chart.ranges.yMax;
+    const extraSpaceX = calculatePadding(settings.minXScale, settings.maxXScale, xMin, xMax);
+    const extraSpaceY = calculatePadding(settings.minYScale, settings.maxYScale, yMin, yMax);
+    chart.xAxisScale = linear().domain([xMin - extraSpaceX, xMax + extraSpaceX]).range([offsetX, settings.svgw + offsetX]);
+    if (config.term && config.term.term.type == "date") {
+      const xMinDate = getDateFromNumber(xMin - extraSpaceX);
+      const xMaxDate = getDateFromNumber(xMax + extraSpaceX);
+      chart.xAxisScaleTime = time().domain([xMinDate, xMaxDate]).range([offsetX, settings.svgw + offsetX]);
+      chart.axisBottom = axisBottom(chart.xAxisScaleTime);
+    } else chart.axisBottom = axisBottom(chart.xAxisScale);
+    const svgh = settings.svgh;
+    chart.yAxisScale = linear().domain([yMax + extraSpaceY, yMin - extraSpaceY]).range([offsetY, svgh + offsetY]);
+    if (config.term2 && config.term2.term.type == "date") {
+      const yMinDate = getDateFromNumber(yMin - extraSpaceY);
+      const yMaxDate = getDateFromNumber(yMax + extraSpaceY);
+      chart.yAxisScaleTime = time().domain([yMaxDate, yMinDate]).range([offsetY, settings.svgh + offsetY]);
+      chart.axisLeft = axisLeft(chart.yAxisScaleTime);
+    } else chart.axisLeft = axisLeft(chart.yAxisScale);
+    chart.zAxisScale = linear().domain([chart.ranges.zMin, chart.ranges.zMax]).range([0, settings.svgd]);
+    this.initColorGenerator(chart);
+  }
+  initColorDefaults(chartId) {
+    const config = this.scatter.config;
+    const settings = this.scatter.settings;
+    const gradientColor = rgb(settings.defaultColor);
+    config.startColor ||= {};
+    config.stopColor ||= {};
+    if (!config.startColor[chartId]) {
+      config.startColor[chartId] = config.colorTW?.term.type == SINGLECELL_GENE_EXPRESSION ? settings.noExpColor : config.colorTW?.term.continuousColorScale?.minColor || gradientColor.brighter().brighter().toString();
+    }
+    if (!config.stopColor[chartId]) {
+      config.stopColor[chartId] = config.colorTW?.term.type == SINGLECELL_GENE_EXPRESSION ? settings.expColor : config.colorTW?.term.continuousColorScale?.maxColor || gradientColor.darker().toString();
+    }
+  }
+  initColorGenerator(chart) {
+    const config = this.scatter.config;
+    if (!chart.ranges) return;
+    this.initColorDefaults(chart.id);
+    if (config.colorTW?.q.mode === "continuous") {
+      let colorValues;
+      if (config.colorTW.term.type == SINGLECELL_GENE_EXPRESSION || config.colorTW.term.type == SINGLECELL_NUMERIC_VALUE && chart.data.src) {
+        colorValues = [chart.ranges.geMin, chart.ranges.geMax];
+      } else {
+        colorValues = chart.cohortSamples.filter((s) => !config.colorTW.term.values || !(s.category in config.colorTW.term.values)).map((s) => Number(s.category)).sort((a, b) => a - b);
+      }
+      chart.colorValues = colorValues;
+      let min, max2, index;
+      const colorScaleSettings = config.settings.sampleScatter;
+      switch (colorScaleSettings.colorScaleMode) {
+        // Fixed mode: Use user-defined min/max values
+        // This is useful when you want consistent scaling across different views
+        case "fixed":
+          min = colorScaleSettings.colorScaleMinFixed;
+          max2 = colorScaleSettings.colorScaleMaxFixed;
+          break;
+        case "percentile":
+          min = colorValues[0];
+          index = Math.floor(colorValues.length * colorScaleSettings.colorScalePercentile / 100);
+          max2 = colorValues[index];
+          break;
+        case "auto":
+        default:
+          min = colorValues[0];
+          max2 = colorValues[colorValues.length - 1];
+          break;
+      }
+      if (chart.data.src && "colorDomain" in chart.data && chart.data.colorDomain) {
+        [min, max2] = chart.data.colorDomain;
+      }
+      chart.colorGenerator = linear().domain([min, max2]).range([config.startColor[chart.id], config.stopColor[chart.id]]);
+      chart.currentColorRange = { min, max: max2 };
+    }
+  }
+  async processData() {
+    const term0Values = this.scatter.config.term0?.term.values;
+    if (term0Values) {
+      const orderedLabels = Object.values(term0Values).sort(
+        (a, b) => "order" in a && "order" in b ? a.order - b.order : 0
+      );
+      this.charts.sort(
+        (a, b) => orderedLabels.findIndex((v) => v.label == a.id) - orderedLabels.findIndex((v) => v.label == b.id)
+      );
+    }
+    for (const chart of this.charts) {
+      this.initAxes(chart);
+      if (!chart.colorGenerator) this.initColorGenerator(chart);
+      const regressionType = this.scatter.settings.regression;
+      if (!regressionType || regressionType == "None") continue;
+      let regression;
+      const data = [];
+      await chart.cohortSamples.forEach((c) => {
+        data.push(this.getCoordinates(chart, c));
+      });
+      let regressionCurve;
+      if (regressionType == "Polynomial") {
+        regression = (0, import_d3_regression.regressionPoly)().x((c) => c.x).y((c) => c.y).order(3);
+        regressionCurve = regression(data);
+      } else if (regressionType == "Lowess") {
+        const X = [], Y = [];
+        for (const sample of data) {
+          X.push(sample.x);
+          Y.push(sample.y);
+        }
+        regressionCurve = await this.scatter.vocabApi.getLowessCurve({ coords: { X, Y } });
+      } else {
+        throw `unsupported regression type='${regressionType}'`;
+      }
+      chart.regressionCurve = regressionCurve;
+    }
+  }
+};
+
+// plots/scatter/model/scatterModel.ts
+var ScatterModel = class extends ScatterModelBase {
+  constructor(scatter) {
+    super(scatter);
+  }
+  // creates an opts object for the vocabApi.someMethod(),
+  // may need to add a new method to client/termdb/vocabulary.js
+  // for now, just add methods to TermdbVocab,
+  // later on, add methods with same name to FrontendVocab
+  getDataRequestOpts() {
+    const c = this.scatter.config;
+    const coordTWs = [];
+    if (c.term) coordTWs.push(c.term);
+    if (c.term2) coordTWs.push(c.term2);
+    const filter = this.scatter.parentId ? this.scatter.state.termfilter.filter : this.scatter.getFilter();
+    const opts = {
+      name: c.name,
+      // the actual identifier of the plot, for retrieving data from server
+      colorTW: c.colorTW,
+      filter,
+      coordTWs,
+      chartType: this.scatter.type,
+      excludeOutliers: this.scatter.settings.excludeOutliers
+    };
+    if (this.scatter.state.termfilter.filter0) opts.filter0 = this.scatter.state.termfilter.filter0;
+    if (c.colorColumn) opts.colorColumn = c.colorColumn;
+    if (c.shapeTW) opts.shapeTW = c.shapeTW;
+    if (c.scaleDotTW) {
+      if (!c.scaleDotTW.q) c.scaleDotTW.q = {};
+      c.scaleDotTW.q.mode = "continuous";
+      opts.scaleDotTW = c.scaleDotTW;
+    }
+    if (c.term0) opts.divideByTW = c.term0;
+    return opts;
+  }
+  async initData() {
+    try {
+      const reqOpts = this.getDataRequestOpts();
+      if (reqOpts.coordTWs?.length == 1 && this.scatter.type == "sampleScatter") return;
+      const data = await this.scatter.app.vocabApi.getScatterData(
+        reqOpts,
+        this.scatter.api?.getAbortSignal()
+      );
+      if ("error" in data || !data.result) throw new Error(data["error"] || "No data received");
+      this.charts = [];
+      this.range = data.range;
+      for (const [key, chartData] of Object.entries(data.result)) {
+        const chart = chartData;
+        if (!Array.isArray(chart.samples)) throw new Error("data.samples[] not array");
+        this.createChart(key, chart);
+      }
+      this.is3D = this.scatter.config.term0?.q.mode == "continuous";
+      this.initRanges();
+    } catch (e) {
+      if (this.scatter.app.isAbortError(e)) return;
+      console.error(e);
+      throw e.message || e;
+    }
+  }
+};
+
+// plots/scatter/viewmodel/scatterLegendInteractivity.ts
+var ScatterLegendInteractivity = class {
+  constructor(scatter) {
+    this.scatter = scatter;
+  }
+  onLegendClick(chart, name, key, e, category) {
+    const tw = this.scatter.config[name];
+    const isColorTW = name == "colorTW";
+    const hidden = tw.q.hiddenValues ? key in tw.q.hiddenValues : false;
+    const hiddenCount = tw.q.hiddenValues ? Object.keys(tw.q.hiddenValues).length : 0;
+    if (hidden && hiddenCount == 1) {
+      this.hideCategory(tw, key, false);
+      this.dispatchConfig(name, tw);
+      return;
+    }
+    const menu = new Menu({ padding: "0px" });
+    const div = menu.d.append("div");
+    div.append("div").attr("class", "sja_menuoption sja_sharp_border").text(hidden ? "Show" : "Hide").on("click", () => {
+      this.hideCategory(tw, key, !hidden);
+      menu.hide();
+      this.dispatchConfig(name, tw);
+    });
+    div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show only").on("click", () => {
+      const map = name == "colorTW" ? chart.colorLegend : chart.shapeLegend;
+      for (const mapKey of map.keys())
+        this.hideCategory(
+          tw,
+          mapKey,
+          tw.term.type == "geneVariant" && tw.q.type == "values" ? !mapKey.startsWith(key) : mapKey != key
+        );
+      menu.hide();
+      this.dispatchConfig(name, tw);
+    });
+    if (hiddenCount > 1)
+      div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show all").on("click", () => {
+        menu.hide();
+        const map = isColorTW ? chart.colorLegend : chart.shapeLegend;
+        for (const mapKey of map.keys()) this.hideCategory(tw, mapKey, false);
+        this.dispatchConfig(name, tw);
+      });
+    if (isColorTW) {
+      const color = rgb(category.color).formatHex();
+      const input = div.append("div").attr("class", "sja_sharp_border").style("padding", "0px 10px").text("Color:").append("input").attr("type", "color").attr("value", color).on("change", () => {
+        this.changeColor(category.key, input.node().value);
+        menu.hide();
+      });
+    }
+    if (!isColorTW) {
+      div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Change shape").on("click", () => {
+        div.selectAll("*").remove();
+        const callback = (index) => {
+          this.changeShape(category.key, index);
+          menu.hide();
+        };
+        shapeSelector(div, callback);
+      });
+    }
+    menu.showunder(e.target);
+  }
+  async changeShape(key, shape) {
+    const tw = this.scatter.config.shapeTW;
+    if (!tw.term.values) tw.term.values = {};
+    if (!tw.term.values[key]) tw.term.values[key] = {};
+    tw.term.values[key].shape = shape;
+    await this.scatter.app.dispatch({
+      type: "plot_edit",
+      id: this.scatter.id,
+      config: { shapeTW: tw }
+    });
+  }
+  dispatchConfig(name, tw) {
+    this.scatter.app.dispatch({
+      type: "plot_edit",
+      id: this.scatter.id,
+      config: { [name]: tw }
+    });
+  }
+  hideCategory(tw, key, hide) {
+    if (!tw.q) tw.q = {};
+    if (!tw.q.hiddenValues) tw.q.hiddenValues = {};
+    const value = !(tw.term.type == "geneVariant" && tw.q.type == "values") && tw.term.values?.[key] ? tw.term.values[key] : { key, label: key };
+    if (!hide) delete tw.q.hiddenValues[key];
+    else tw.q.hiddenValues[key] = value;
+    if (key == "Ref") {
+      this.scatter.settings.showRef = !hide;
+      this.scatter.app.dispatch({
+        type: "plot_edit",
+        id: this.scatter.id,
+        config: {
+          settings: { sampleScatter: this.scatter.settings }
+        }
+      });
+    }
+  }
+  changeGradientColor(chart, color, idx) {
+    const hexColor = rgb(color).formatHex();
+    const colorKey = idx == 0 ? "startColor" : "stopColor";
+    this.scatter.config[colorKey][chart.id] = hexColor;
+    const range = chart.currentColorRange || chart.colorGenerator.domain();
+    chart.colorGenerator = linear().domain(range).range([this.scatter.config.startColor[chart.id], this.scatter.config.stopColor[chart.id]]);
+    this.scatter.app.dispatch({
+      type: "plot_edit",
+      id: this.scatter.id,
+      config: this.scatter.config
+    });
+  }
+  async changeColor(key, color) {
+    const tw = this.scatter.config.colorTW;
+    if (!tw.term.values) tw.term.values = {};
+    if (!tw.term.values[key]) tw.term.values[key] = {};
+    tw.term.values[key].color = color;
+    await this.scatter.app.dispatch({
+      type: "plot_edit",
+      id: this.scatter.id,
+      config: { colorTW: tw }
+    });
+  }
+};
+
+// plots/scatter/view/scatterView.ts
+var minShapeSize = 0.2;
+var maxShapeSize = 6;
+var chartSizeMin = 200;
+var chartSizeMax = 800;
+function getShapeDefaultQ() {
+  const defaultQ = {};
+  for (const type of numericTypes) {
+    if (dictionaryNumericTypes.has(type)) continue;
+    defaultQ[type] = { mode: "discrete", type: "custom-bin", preferredBins: "median" };
+  }
+  return defaultQ;
+}
+var ScatterView = class {
+  constructor(scatter) {
+    this.opts = scatter.opts;
+    this.scatter = scatter;
+    const leftDiv = this.opts.holder.insert("div").style("display", "inline-block");
+    const rightDiv = this.opts.holder.insert("div").style("display", "inline-block").style("vertical-align", "top");
+    const controlsHolder = leftDiv.append("div").style("display", "inline-block").attr("data-testid", "sjpp-scatter-controls-div");
+    const domOpts = { controls: controlsHolder, mainWrapper: rightDiv };
+    const { errdiv, loadingDiv, banner, renderedData } = scatter.getStandardDomLayout(this.opts.holder, domOpts);
+    renderedData.selectAll("*").remove();
+    this.dom = {
+      controlsHolder,
+      toolsDiv: leftDiv.insert("div"),
+      errdiv,
+      loadingDiv: loadingDiv.attr("data-testid", "sjpp-scatter-loading-div"),
+      bannerDiv: banner,
+      headerDiv: renderedData.append("div").attr("data-testid", "sjpp-scatter-header-div"),
+      renderedData: renderedData.attr("data-testid", "sjpp-scatter-main-div").style("display", "flex").style("flex-direction", "row").style("flex-wrap", "wrap").style("max-width", "100vw"),
+      mainDiv: renderedData,
+      header: this.opts.header,
+      tip: new Menu({ padding: "0px" }),
+      tooltip: new Menu({ padding: "2px", offsetX: 10, offsetY: 0 })
+    };
+    if (this.dom.header) {
+      const chartName = splitCamelCase(this.scatter.type).toUpperCase();
+      formatHeaderText({
+        header: this.dom.header,
+        chartType: chartName,
+        text: this.scatter.config.name || ""
+      });
+    }
+  }
+  getControlInputs() {
+    const labels = this.scatter.config.controlLabels;
+    const hasRef = this.scatter.model.charts?.[0]?.data?.samples?.find((s) => s.isRef) || false;
+    const chartType = "sampleScatter";
+    const itemLabel = this.scatter.settings.itemLabel;
+    const scaleDotOption = {
+      type: "term",
+      configKey: "scaleDotTW",
+      chartType,
+      usecase: { target: "sampleScatter", detail: "numeric" },
+      title: `Scale symbol size by term value`,
+      label: "Scale by",
+      vocabApi: this.scatter.app.vocabApi,
+      numericEditMenuVersion: ["continuous"],
+      //Eventually this will be corrected with usecase.detail
+      //When single cell, only relevant terms will be displayed
+      //in the tree
+      getDisplayStyle: () => {
+        return this.scatter.config?.singleCellPlot ? "none" : "";
+      }
+    };
+    const shapeOption = {
+      type: "term",
+      configKey: "shapeTW",
+      chartType,
+      usecase: { target: "sampleScatter", detail: "shapeTW" },
+      title: "Categories to assign a shape",
+      label: "Shape",
+      vocabApi: this.scatter.app.vocabApi,
+      numericEditMenuVersion: ["discrete"],
+      // only applies when a term is first picked from the tree, so a user-chosen binning
+      // from the pill's edit menu is not overridden
+      defaultQ4fillTW: getShapeDefaultQ(),
+      //Eventually this will be corrected with usecase.detail
+      //When single cell, only relevant terms will be displayed
+      //in the tree
+      getDisplayStyle: () => {
+        return this.scatter.config?.singleCellPlot ? "none" : "";
+      },
+      processInput: async (tw) => {
+        if (isNumericTerm(tw?.term)) {
+          if (!tw.q) tw.q = {};
+          tw.q.mode = "discrete";
+          await fillTermWrapper(tw, this.scatter.app.vocabApi);
+        }
+      }
+    };
+    const shapeSizeOption = {
+      label: `${itemLabel} size`,
+      type: "number",
+      chartType,
+      settingsKey: "size",
+      title: `${itemLabel} size, represents the factor used to scale the ${itemLabel.toLowerCase()}`,
+      min: minShapeSize,
+      max: maxShapeSize,
+      step: 0.1
+    };
+    const step = (maxShapeSize - minShapeSize) / 10;
+    const minShapeSizeOption = {
+      label: "Min size",
+      type: "number",
+      chartType,
+      settingsKey: "minShapeSize",
+      title: "Minimum symbol size",
+      min: minShapeSize,
+      max: maxShapeSize,
+      step
+    };
+    const maxShapeSizeOption = {
+      label: "Max size",
+      type: "number",
+      chartType,
+      settingsKey: "maxShapeSize",
+      title: "Maximum symbol size",
+      min: minShapeSize,
+      max: maxShapeSize,
+      step
+    };
+    const orientation = {
+      label: "Scale order",
+      type: "radio",
+      chartType,
+      settingsKey: "scaleDotOrder",
+      options: [
+        { label: "Ascending", value: "Ascending" },
+        { label: "Descending", value: "Descending" }
+      ]
+    };
+    const refSizeOption = {
+      label: "Reference size",
+      type: "number",
+      chartType,
+      settingsKey: "refSize",
+      title: "Set the area of the reference symbol in square pixels.",
+      min: 0,
+      max: maxShapeSize,
+      step: 0.1
+    };
+    const showAxes = {
+      boxLabel: "",
+      label: "Show axes",
+      type: "checkbox",
+      chartType,
+      settingsKey: "showAxes",
+      title: `Option to show/hide plot axes`,
+      testid: "showAxes"
+    };
+    const term = this.scatter.config.term ? "term" : "colorTW";
+    const specialCase = getSingleCellSpecialCase(this.scatter.config, term, true);
+    const inputs = [
+      {
+        type: "term",
+        configKey: "colorTW",
+        chartType,
+        usecase: { target: "sampleScatter", detail: "colorTW", specialCase },
+        title: `Categories to color the ${labels.sample} symbol`,
+        label: "Color",
+        vocabApi: this.scatter.app.vocabApi,
+        numericEditMenuVersion: ["continuous", "discrete"],
+        /** Disabling colorBy when two sc terms present.
+         * Dots overlap and colorBy is not meaningful in this case. */
+        getDisplayStyle: () => {
+          return this.scatter.config?.singleCellPlot && this.scatter.config.term2 ? "none" : "";
+        }
+      },
+      {
+        label: "Opacity",
+        type: "number",
+        chartType,
+        settingsKey: "opacity",
+        title: "Set the opacity of the elements",
+        min: 0,
+        max: 1,
+        step: 0.1
+      },
+      {
+        label: "Chart width",
+        type: "number",
+        chartType,
+        min: chartSizeMin,
+        max: chartSizeMax,
+        step: 10,
+        settingsKey: "svgw"
+      },
+      {
+        label: "Chart height",
+        type: "number",
+        chartType,
+        min: chartSizeMin,
+        max: chartSizeMax,
+        step: 10,
+        settingsKey: "svgh"
+      },
+      {
+        label: "Show contour map",
+        boxLabel: "",
+        type: "checkbox",
+        chartType,
+        settingsKey: "showContour",
+        title: "Shows the density of point clouds. If 'Color' is used in continous mode, it uses it to weight the points when calculating the density contours. If 'Z/Divide by' is added in continous mode, it used it instead.",
+        getDisplayStyle: () => {
+          return this.scatter.config?.singleCellPlot && this.scatter.model.is2DLarge ? "none" : "";
+        }
+      },
+      {
+        label: "Save zoom transform",
+        boxLabel: "",
+        type: "checkbox",
+        chartType,
+        settingsKey: "saveZoomTransform",
+        title: `Option to save the zoom transformation in the state. Needed if you want to save a session with the actual zoom and pan applied`,
+        processInput: (value) => this.saveZoomTransform(value),
+        getDisplayStyle: () => {
+          return this.scatter.config?.singleCellPlot && this.scatter.model.is2DLarge ? "none" : "";
+        }
+      }
+    ];
+    if (this.scatter.settings.showContour)
+      inputs.push(
+        {
+          label: "Color contours",
+          boxLabel: "",
+          type: "checkbox",
+          chartType,
+          settingsKey: "colorContours"
+        },
+        {
+          label: "Contour bandwidth",
+          type: "number",
+          chartType,
+          settingsKey: "contourBandwidth",
+          title: "Reduce to increase resolution.",
+          min: 5,
+          max: 50,
+          step: 5
+        },
+        {
+          label: "Contour thresholds",
+          type: "number",
+          chartType,
+          settingsKey: "contourThresholds",
+          title: "Increase to enhance contour detail.",
+          min: 5,
+          max: 30,
+          step: 5
+        }
+      );
+    if (this.scatter.config.sampleCategory) {
+      const options = Object.values(this.scatter.config.sampleCategory.tw.term.values).map((v) => ({
+        label: v.label || v.key,
+        value: v.key
+      }));
+      if (this.scatter.config.sampleCategory.order)
+        options.sort((elem1, elem2) => {
+          const i1 = this.scatter.config.sampleCategory.order.indexOf(elem1.value);
+          const i2 = this.scatter.config.sampleCategory.order.indexOf(elem2.value);
+          if (i1 < i2) return -1;
+          return 1;
+        });
+      if (!this.scatter.settings.sampleCategory)
+        this.scatter.settings.sampleCategory = this.scatter.config.sampleCategory.defaultValue || "";
+      options.push({ label: "All", value: "" });
+      const sampleCategory = {
+        label: "Sample type",
+        type: "dropdown",
+        chartType,
+        settingsKey: "sampleCategory",
+        options
+      };
+      inputs.push(sampleCategory);
+    }
+    if (!this.scatter.model.is2DLarge && !this.scatter.config.singleCellPlot) {
+      const isPremade = this.scatter.config.name !== void 0 && !this.scatter.config.term;
+      inputs.unshift({
+        type: "term",
+        configKey: "term0",
+        chartType,
+        usecase: { target: "sampleScatter", detail: "term0" },
+        title: "Term to to divide by categories or to use as Z coordinate",
+        label: "Z / Divide by",
+        vocabApi: this.scatter.app.vocabApi,
+        // do not allow 'continuous' mode for now, even if it can be rendered along z-axis,
+        // since clicking to barchart/violin/boxplot tab from the scatter tab does not
+        // automatically convert the divide-by term to discrete; a continuous mode in those
+        // other charts leads to nonsensical chart per unique float/integer value
+        numericEditMenuVersion: ["discrete"],
+        processInput: (tw) => {
+          if (!isPremade && isNumericTerm(tw?.term)) tw.q = { mode: "continuous" };
+        }
+      });
+    } else if (!this.scatter.config.singleCellPlot) {
+      inputs.push(
+        {
+          // below was changed from 'Sample size'
+          // TODO: clarify how this is different from `${itemLabel} size`/`Symbol size`?
+          label: `${labels.Sample} size`,
+          type: "number",
+          chartType,
+          settingsKey: "threeSize",
+          title: `${labels.Sample} size`,
+          min: 0,
+          max: 1,
+          step: 1e-3
+        },
+        {
+          label: "Field of Vision",
+          type: "number",
+          chartType,
+          settingsKey: "threeFOV",
+          title: "Field of Vision",
+          min: 50,
+          max: 90,
+          step: 1
+        }
+      );
+    }
+    if (this.scatter.config.term) {
+      inputs.unshift(
+        ...[
+          {
+            type: "term",
+            configKey: "term",
+            chartType,
+            usecase: { target: "sampleScatter", detail: "numeric", specialCase },
+            title: `X coordinate to plot the ${labels.samples}`,
+            label: "X",
+            vocabApi: this.scatter.app.vocabApi,
+            menuOptions: "!remove",
+            numericEditMenuVersion: ["continuous"]
+          },
+          {
+            type: "term",
+            configKey: "term2",
+            chartType,
+            usecase: { target: "sampleScatter", detail: "numeric", specialCase },
+            title: `Y coordinate to plot the ${labels.samples}`,
+            label: "Y",
+            vocabApi: this.scatter.app.vocabApi,
+            menuOptions: "!remove",
+            numericEditMenuVersion: ["continuous"]
+          }
+        ]
+      );
+      if (!this.scatter.model.is3D) {
+        inputs.splice(4, 0, shapeOption);
+        inputs.splice(5, 0, scaleDotOption);
+        if (this.scatter.config.scaleDotTW) {
+          inputs.splice(6, 0, minShapeSizeOption);
+          inputs.splice(7, 0, maxShapeSizeOption);
+          inputs.splice(8, 0, orientation);
+          if (hasRef) inputs.splice(9, 0, refSizeOption);
+        } else {
+          inputs.splice(6, 0, shapeSizeOption);
+          if (hasRef) inputs.splice(7, 0, refSizeOption);
+        }
+        inputs.push({
+          label: "Show regression",
+          type: "dropdown",
+          chartType,
+          settingsKey: "regression",
+          options: [
+            { label: "None", value: "None" },
+            //{ label: 'Loess', value: 'Loess' },
+            { label: "Lowess", value: "Lowess" },
+            { label: "Polynomial", value: "Polynomial" }
+          ]
+        });
+      } else {
+        inputs.push({
+          label: "Chart depth",
+          type: "number",
+          chartType,
+          settingsKey: "svgd"
+        });
+        inputs.push({
+          label: "Field of vision",
+          title: "Camera field of view, in degrees",
+          type: "number",
+          chartType,
+          settingsKey: "fov"
+        });
+      }
+      inputs.push(showAxes, ...this.getMinMaxInputs());
+      inputs.push({
+        label: "Default color",
+        type: "color",
+        chartType,
+        settingsKey: "defaultColor"
+      });
+    } else if (!this.scatter.model.is2DLarge) {
+      inputs.splice(2, 0, shapeOption);
+      inputs.splice(3, 0, scaleDotOption);
+      if (this.scatter.config.scaleDotTW) {
+        inputs.splice(4, 0, minShapeSizeOption);
+        inputs.splice(5, 0, maxShapeSizeOption);
+        inputs.splice(6, 0, orientation);
+        if (hasRef) inputs.splice(7, 0, refSizeOption);
+      } else {
+        inputs.splice(4, 0, shapeSizeOption);
+        if (hasRef) inputs.splice(5, 0, refSizeOption);
+      }
+      inputs.push(showAxes);
+    }
+    this.mayAddControlLabels(inputs);
+    return this.scatter.config.bySample ? inputs.filter((i) => i.type != "term") : inputs;
+  }
+  getMinMaxInputs() {
+    const range = this.scatter.model.range;
+    if (!range) return [];
+    const xMin = roundValueAuto(range.xMin);
+    const xMax = roundValueAuto(range.xMax);
+    const xStep = (xMax - xMin) / 10;
+    const yMin = roundValueAuto(range.yMin);
+    const yMax = roundValueAuto(range.yMax);
+    const yStep = (yMax - yMin) / 10;
+    const inputs = [
+      {
+        label: "X axis minimum",
+        type: "number",
+        chartType: this.scatter.type,
+        settingsKey: "minXScale",
+        title: `Set the minimum X axis value between ${xMin} and ${xMax}`,
+        placeholder: `${xMin}`,
+        min: xMin,
+        max: xMax,
+        step: xStep
+      },
+      {
+        label: "X axis maximum",
+        type: "number",
+        chartType: this.scatter.type,
+        settingsKey: "maxXScale",
+        title: `Set the maximum X axis value between ${xMin} and ${xMax}`,
+        placeholder: `${xMax}`,
+        min: xMin,
+        max: xMax,
+        step: xStep,
+        processInput: (value) => {
+          const n = this.dom.controlsHolder.selectAll("input").filter(function() {
+            return this.placeholder == `${xMax}`;
+          });
+          if (!n.node().value) return xMax;
+          else return value;
+        }
+      },
+      {
+        label: "Y axis minimum",
+        type: "number",
+        chartType: this.scatter.type,
+        settingsKey: "minYScale",
+        title: `Set the minimum Y axis value between ${yMin} and ${yMax}`,
+        placeholder: `${yMin}`,
+        min: yMin,
+        max: yMax,
+        step: yStep
+      },
+      {
+        label: "Y axis maximum",
+        type: "number",
+        chartType: this.scatter.type,
+        settingsKey: "maxYScale",
+        title: `Set the maximum Y axis value between ${yMin} and ${yMax}`,
+        placeholder: `${yMax}`,
+        min: yMin,
+        max: yMax,
+        step: yStep,
+        processInput: (value) => {
+          const n = this.dom.controlsHolder.selectAll("input").filter(function() {
+            return this.placeholder == `${yMax}`;
+          });
+          if (!n.node().value) return yMax;
+          else return value;
+        }
+      }
+    ];
+    return inputs;
+  }
+  mayAddControlLabels(inputs) {
+    const controlLabels = structuredClone(this.scatter.config.controlLabels);
+    if (!controlLabels) return;
+    let term1input, term2input, term0input;
+    for (const i of inputs) {
+      if (i.configKey == "term") term1input = i;
+      else if (i.configKey == "term2") term2input = i;
+      else if (i.configKey == "term0") term0input = i;
+    }
+    if (term1input && term2input) {
+      if (controlLabels.term1) term1input.label = controlLabels.term1.label + " (X)";
+      if (controlLabels.term2) term2input.label = controlLabels.term2.label + " (Y)";
+      if (term0input && controlLabels.term0) term0input.label = controlLabels.term0.label + " (Z)";
+    }
+  }
+  saveZoomTransform(value) {
+    if (value) this.scatter.vm.scatterZoom.saveZoomTransform();
+    return value;
+  }
+};
+function splitCamelCase(text) {
+  return text.split(/(?=[A-Z])/).join(" ");
+}
+
+// plots/scatter/viewmodel/scatterLegend.ts
+var ScatterLegend = class {
+  constructor(scatter) {
+    this.scatter = scatter;
+    this.vm = scatter.vm;
+    this.model = scatter.model;
+    this.interactivity = scatter.interactivity;
+    this.legendInteractivity = new ScatterLegendInteractivity(scatter);
+  }
+  //Dynamically calculate the length of the legend labels
+  getLegendLabelWidth(chart, key, svg, size) {
+    const legend = chart[`${key}Legend`];
+    if (!legend) return 0;
+    const labels = [];
+    for (const [k, v] of legend.entries()) {
+      if (k != "Ref") labels.push(`${k}, n=(${v.sampleCount})`);
+    }
+    labels.push(this.scatter.config[`${key}TW`]?.term?.name ?? "");
+    const width = getMaxLabelWidth(svg, labels, size) + 70;
+    return width;
+  }
+  getFontSize(chart, legend) {
+    let fontSize = 0.9;
+    if (chart.colorLegend.size < 10 && chart.shapeLegend.size < 10) return fontSize;
+    const top = 20;
+    if (legend.size > top) {
+      fontSize = Math.min(0.9, top / legend.size);
+      if (fontSize < 0.7) fontSize = 0.7;
+    }
+    return fontSize;
+  }
+  renderLegend(chart, step) {
+    const legendG = chart.legendG;
+    legendG.selectAll("*").remove();
+    let offsetX = 0;
+    let offsetY = 15;
+    let legendHeight = 0;
+    if (!this.scatter.config.colorTW && !this.scatter.config.shapeTW && !this.scatter.config.colorColumn) {
+      if (this.scatter.config.scaleDotTW) {
+        chart.scaleG = legendG.append("g").attr("transform", `translate(${offsetX + 45},${this.scatter.vm.legendHeight - 150})`);
+        this.drawScaleDotLegend(chart);
+      }
+      return;
+    }
+    let title;
+    let title0;
+    if (this.scatter.config.term0) {
+      title0 = `${this.scatter.config.term0.term.name + " " + chart.id}, n=${chart.cohortSamples.length}`;
+    } else {
+      const n = chart.totalSampleCount ?? chart.cohortSamples?.length;
+      const noun = this.scatter.config.sampleType || this.scatter.settings.itemLabel.toLowerCase();
+      title0 = `${n} ${noun}${n == 1 ? "" : "s"}`;
+    }
+    if (this.model.filterSampleStr) title0 += `, search = ${this.model.filterSampleStr}`;
+    legendG.append("text").attr("x", 0).attr("y", offsetY).text(title0).style("font-weight", "bold");
+    const fontSize = this.getFontSize(chart, chart.colorLegend);
+    const scale = chart.colorLegend.size > 20 || chart.shapeLegend.size > 20 ? 0.6 : 0.7;
+    const colorG = legendG.append("g").style("font-size", `${fontSize}em`).attr("data-testid", "sjpp-color-legend");
+    offsetY += step + 20;
+    if (this.scatter.config.colorTW || this.scatter.config.colorColumn) {
+      title = `${getTitle(
+        this.scatter.config.colorTW?.term?.name || this.scatter.config.colorColumn.name,
+        40,
+        this.scatter.config.shapeTW == void 0
+      )}`;
+      const colorRefCategory = chart.colorLegend.get("Ref");
+      if (this.scatter.config.colorTW?.term?.type == "geneVariant" && this.scatter.config.colorTW?.q.type == "values") {
+        offsetY = this.renderGeneVariantLegend(
+          chart,
+          offsetX,
+          offsetY,
+          legendG,
+          this.scatter.config.colorTW,
+          "category",
+          chart.colorLegend,
+          scale
+        );
+      } else {
+        this.addLegendTitle(legendG, title, offsetX, offsetY, this.scatter.config.colorTW, "COLOR");
+        offsetY += step;
+        if (this.scatter.config.colorTW?.q?.mode === "continuous") {
+          let [min, max2] = chart.colorGenerator.domain();
+          const colorValues = chart.colorValues;
+          const scaleG = colorG.append("g").attr("data-testid", "sjpp-scale-legend");
+          const colorScale = new ColorScale({
+            // Basic visual configuration
+            holder: scaleG,
+            // SVG group to contain our color scale
+            barheight: 20,
+            // Height of the color gradient bar
+            barwidth: 150,
+            // Width of the color gradient bar
+            colors: [
+              // Start and end colors for our gradient
+              this.scatter.config.startColor[chart.id],
+              this.scatter.config.stopColor[chart.id]
+            ],
+            domain: [min, max2],
+            // Current numerical range of our data
+            position: `0, 100`,
+            // Position within the legend
+            ticks: 4,
+            // Number of tick marks to show
+            tickSize: 5,
+            // Size of tick marks
+            topTicks: true,
+            // Display ticks above the gradient bar
+            // Callback for when gradient colors are changed via color picker
+            setColorsCallback: (val, idx) => {
+              this.legendInteractivity.changeGradientColor(chart, val, idx);
+            },
+            // Configuration for our enhanced scaling modes
+            numericInputs: {
+              // Start with either the chart's current mode or default to 'auto'
+              cutoffMode: this.scatter.settings.colorScaleMode,
+              // Default percentile value for percentile mode
+              defaultPercentile: this.scatter.settings.colorScalePercentile,
+              // This callback handles all mode changes and updates
+              callback: (obj) => {
+                if (obj.cutoffMode === "auto") {
+                  min = colorValues[0];
+                  max2 = colorValues[colorValues.length - 1];
+                } else if (obj.cutoffMode === "fixed") {
+                  min = obj.min;
+                  max2 = obj.max;
+                } else if (obj.cutoffMode === "percentile") {
+                  min = colorValues[0];
+                  const index = Math.floor(colorValues.length * obj.percentile / 100);
+                  max2 = colorValues[index];
+                }
+                this.scatter.app.dispatch({
+                  type: "plot_edit",
+                  id: this.scatter.id,
+                  config: {
+                    settings: {
+                      sampleScatter: {
+                        colorScaleMode: obj.cutoffMode,
+                        colorScaleMinFixed: obj.cutoffMode === "fixed" ? min : null,
+                        colorScaleMaxFixed: obj.cutoffMode === "fixed" ? max2 : null,
+                        colorScalePercentile: obj.cutoffMode === "percentile" ? obj.percentile : this.scatter.settings.colorScalePercentile
+                      }
+                    }
+                  }
+                });
+              }
+            }
+          });
+          colorScale.updateScale();
+          offsetY += step * 2;
+        } else {
+          for (const [key, category] of chart.colorLegend) {
+            if (key == "Ref") continue;
+            const name = key;
+            const hidden = this.scatter.config.colorTW?.q.hiddenValues ? key in this.scatter.config.colorTW.q.hiddenValues : false;
+            const [circleG, itemG] = this.addLegendItem(
+              chart,
+              colorG,
+              category,
+              name,
+              key,
+              offsetX,
+              offsetY,
+              scale,
+              hidden
+            );
+            if (!this.scatter.config.colorColumn) {
+              circleG.on("click", (e) => this.legendInteractivity.onLegendClick(chart, "colorTW", key, e, category));
+              itemG.on("click", (event) => this.legendInteractivity.onLegendClick(chart, "colorTW", key, event, category));
+            }
+            offsetY += step;
+          }
+        }
+      }
+      if (colorRefCategory?.sampleCount > 0) {
+        offsetY = offsetY + step;
+        const titleG = legendG.append("g");
+        titleG.append("text").attr("x", offsetX).attr("y", offsetY).text("Reference").style("font-weight", "bold");
+        offsetY = offsetY + step;
+        const refColorG = legendG.append("g");
+        refColorG.append("path").attr("transform", () => `translate(${offsetX - 2}, ${offsetY - 4}) scale(${scale})`).style("fill", colorRefCategory.color).attr("d", shapes[0]).style("stroke", rgb(colorRefCategory.color).darker());
+        refColorG.on("click", (e) => this.legendInteractivity.onLegendClick(chart, "colorTW", "Ref", e, colorRefCategory));
+        const refText = legendG.append("g").append("text").attr("name", "sjpp-scatter-legend-label").attr("data-testid", "sjpp-scatter-ref-legend-label").attr("x", offsetX + 20).attr("y", offsetY + 4).text(`n=${colorRefCategory.sampleCount}`).style("text-decoration", !this.scatter.settings.showRef ? "line-through" : "none").attr("alignment-baseline", "middle");
+        refText.on("click", (e) => this.legendInteractivity.onLegendClick(chart, "colorTW", "Ref", e, colorRefCategory));
+      }
+      legendHeight = offsetY;
+    }
+    if (this.scatter.config.shapeTW) {
+      offsetX = chart.colorLegendWidth;
+      offsetY = 60;
+      title = `${getTitle(this.scatter.config.shapeTW.term.name, 40)}`;
+      if (this.scatter.config.shapeTW.term.type == "geneVariant" && this.scatter.config.shapeTW.q.type == "values") {
+        offsetY = this.renderGeneVariantLegend(
+          chart,
+          offsetX,
+          offsetY,
+          legendG,
+          this.scatter.config.shapeTW,
+          "shape",
+          chart.shapeLegend,
+          scale
+        );
+      } else {
+        const shapeG = legendG.append("g").style("font-size", `${this.getFontSize(chart, chart.shapeLegend)}em`).attr("data-testid", "sjpp-shape-legend");
+        this.addLegendTitle(legendG, title, offsetX, offsetY, this.scatter.config.shapeTW, "SHAPE");
+        offsetY += step;
+        const color = "gray";
+        for (const [key, shape] of chart.shapeLegend) {
+          if (key == "Ref") continue;
+          const index = shape.shape % shapes.length;
+          const symbol = shapes[index];
+          const name = key;
+          const count = shape.sampleCount;
+          const hidden = this.scatter.config.shapeTW.q.hiddenValues ? key in this.scatter.config.shapeTW.q.hiddenValues : false;
+          const itemG = shapeG.append("g");
+          itemG.append("path").attr("data-testid", "sjpp-legend-shape").attr("transform", () => `translate(${offsetX}, ${offsetY - 4}) scale(${scale + 0.1})`).style("pointer-events", "bounding-box").style("fill", color).attr("d", symbol).style("stroke", rgb(color).darker());
+          itemG.append("text").attr("name", "sjpp-scatter-legend-label").attr("data-testid", "sjpp-scatter-shape-legend-label").attr("x", offsetX + 25).attr("y", offsetY + 4).text(`${name}, n=${count}`).style("text-decoration", hidden ? "line-through" : "none").attr("alignment-baseline", "middle");
+          offsetY += step;
+          itemG.on("click", (event) => this.legendInteractivity.onLegendClick(chart, "shapeTW", key, event, shape));
+        }
+      }
+      if (offsetY > legendHeight) legendHeight = offsetY;
+    }
+    if (this.scatter.config.scaleDotTW) {
+      chart.scaleG = legendG.append("g").attr("transform", `translate(${0},${legendHeight + 50})`);
+      this.drawScaleDotLegend(chart);
+    }
+  }
+  addLegendItem(chart, g, category, name, key, x, y, scale, hidden = false) {
+    const circleG = g.append("g");
+    circleG.append("path").attr("d", shapes[0]).attr("transform", `translate(${x - 2}, ${y - 4}) scale(${scale})`).style("fill", category.color).style("stroke", rgb(category.color).darker());
+    if (!this.scatter.config.colorColumn)
+      circleG.on("click", (e) => this.legendInteractivity.onLegendClick(chart, "colorTW", key, e, category));
+    const itemG = g.append("g");
+    itemG.append("text").attr("name", "sjpp-scatter-legend-label").attr("data-testid", "sjpp-scatter-color-legend-label").attr("x", x + 20).attr("y", y + 4).text(`${name}, n=${category.sampleCount}`).style("text-decoration", hidden ? "line-through" : "none").attr("alignment-baseline", "middle");
+    return [circleG, itemG];
+  }
+  addLegendTitle(G, title, x, y, tw, extraText) {
+    const _t = G.append("text").attr("data-testid", "legendTitle").attr("x", x).attr("y", y).text(title).style("font-weight", "bold");
+    if (extraText) {
+      _t.append("tspan").text(extraText).attr("dx", 7).style("font-weight", "normal").attr("font-size", ".7em");
+    }
+  }
+  renderGeneVariantLegend(chart, offsetX, offsetY, legendG, tw, cname, map, scale) {
+    const step = 125;
+    const name = tw.term.name.length > 25 ? tw.term.name.slice(0, 25) + "..." : tw.term.name;
+    const title = name;
+    const G = legendG.append("g").style("font-size", "0.9em");
+    this.addLegendTitle(G, title, offsetX, offsetY, tw, cname == "category" ? "COLOR" : "SHAPE");
+    offsetX += step;
+    const mutations = [];
+    for (const value of map.values())
+      if (value.mutation)
+        mutations.push(value.mutation);
+    const mutationsLabels = /* @__PURE__ */ new Set();
+    offsetY += 10;
+    for (const mutation of mutations) {
+      const dt = mutation.dt;
+      const origin = morigin[mutation.origin]?.label;
+      const dtlabel = origin ? `${origin[0]} ${dt2label[dt]}` : dt2label[dt];
+      if (!mutationsLabels.has(dtlabel)) mutationsLabels.add(dtlabel);
+      else continue;
+      offsetY += 15;
+      G.append("text").attr("x", offsetX - step).attr("y", offsetY).text(origin ? `${origin} ${dt2label[dt]}` : dt2label[dt]).style("font-weight", "bold");
+      offsetY += 25;
+      for (const [key, category] of map) {
+        if (key == "Ref") continue;
+        if (!key.includes(dtlabel)) continue;
+        const [mkey, cat_dtlabel] = key.split(", ");
+        if (!cat_dtlabel.includes(dtlabel)) continue;
+        const itemG = G.append("g");
+        if (cname == "shape") {
+          const index = category.shape % shapes.length;
+          itemG.append("path").attr("data-testid", "sjpp-legend-shape").attr("transform", () => `translate(${offsetX - step - 2}, ${offsetY - 8}) scale(${scale})`).style("fill", "gray").style("pointer-events", "bounding-box").attr("d", shapes[index]).style("stroke", rgb("gray").darker());
+          itemG.on("click", (e) => this.legendInteractivity.onLegendClick(chart, "shapeTW", key, e, category));
+        } else {
+          itemG.append("path").attr("d", shapes[0]).attr("transform", `translate(${-2}, ${offsetY - 8}) scale(${scale})`).style("fill", category.color).style("stroke", rgb(category.color).darker());
+          itemG.on("click", (e) => this.legendInteractivity.onLegendClick(chart, "colorTW", key, e, category));
+        }
+        const hidden = tw.q.hiddenValues ? key in tw.q.hiddenValues : false;
+        const text = mkey.toUpperCase() + (key.includes(dtlabel) ? `, n=${category.sampleCount}` : "");
+        G.append("g").append("text").attr("x", offsetX - step + 24).attr("y", offsetY + 4).attr("name", "sjpp-scatter-legend-label").attr("data-testid", cname == "shape" ? "sjpp-scatter-shape-legend-label" : "sjpp-scatter-color-legend-label").style("text-decoration", hidden ? "line-through" : "none").text(text).on(
+          "click",
+          (event) => this.legendInteractivity.onLegendClick(
+            chart,
+            cname == "shape" ? "shapeTW" : "colorTW",
+            key,
+            event,
+            category
+          )
+        );
+        offsetY += 25;
+      }
+    }
+    return offsetY;
+  }
+  drawScaleDotLegend(chart) {
+    const scaleG = chart.scaleG;
+    scaleG.selectAll("*").remove();
+    const width = 70;
+    const minScale = this.scatter.settings.minShapeSize / 3;
+    const maxScale = this.scatter.settings.maxShapeSize / 3;
+    const order = this.scatter.settings.scaleDotOrder;
+    const isAscending = order == "Ascending";
+    const titleG = scaleG.append("g");
+    titleG.append("text").text(this.scatter.config.scaleDotTW.term.name).style("font-weight", "bold");
+    const start = roundValueAuto(chart.ranges.scaleMin).toString();
+    const end = roundValueAuto(chart.ranges.scaleMax).toString();
+    const x = 30;
+    const y = 40;
+    const defaultSize = 16;
+    const minSize = defaultSize * minScale;
+    const maxSize = defaultSize * maxScale;
+    const minRadius = minSize / 2;
+    const maxRadius = maxSize / 2;
+    const minG = scaleG.append("g").attr("transform", `translate(${x},${y})`).attr("data-testid", "sjpp-legend-min-scale-g");
+    const shift = 30;
+    minG.append("path").attr("data-testid", "sjpp-legend-min-scale-dot").attr("d", shapes[0]).style("fill", "#aaa").style("stroke", "#aaa").attr(
+      "transform",
+      `translate(${isAscending ? -minRadius : -maxRadius}, ${isAscending ? -minRadius : -maxRadius}) scale(${isAscending ? minScale : maxScale})`
+    );
+    const maxG = scaleG.append("g").attr("transform", `translate(${width + x},${y})`);
+    maxG.append("path").attr("data-testid", "sjpp-legend-max-scale-dot").attr("d", shapes[0]).style("fill", "#aaa").style("stroke", "#aaa").attr(
+      "transform",
+      `translate(${isAscending ? -maxRadius : -minRadius}, ${isAscending ? -maxRadius : -minRadius}) scale(${isAscending ? maxScale : minScale})`
+    );
+    minG.append("text").attr("x", isAscending ? -minRadius - shift : -maxRadius - shift).attr("y", 5).style("font-size", ".8em").attr("text-anchor", "start").text(start);
+    maxG.append("text").attr("x", isAscending ? maxSize + 5 : minSize + 5).attr("y", 5).style("font-size", ".8em").text(end);
+    minG.append("line").attr("x1", 0).attr("y1", isAscending ? minRadius : maxRadius).attr("x2", width).attr("y2", isAscending ? maxRadius : minRadius).style("stroke", "#aaa");
+    minG.append("line").attr("x1", 0).attr("y1", isAscending ? -minRadius : -maxRadius).attr("x2", width).attr("y2", isAscending ? -maxRadius : -minRadius).style("stroke", "#aaa");
+    scaleG.append("rect").attr("width", 110 * this.scatter.zoom).attr("height", 50).attr("fill", "transparent").on("click", (e) => {
+      const menu = new Menu({ padding: "3px" });
+      const div = menu.d;
+      div.append("label").text("Min:");
+      const minInput = div.append("input").attr("data-testid", "sjpp-legend-min-scale-input").attr("type", "number").attr("min", minShapeSize).attr("step", "0.5").attr("max", maxShapeSize).style("width", "50px").property("value", this.scatter.settings.minShapeSize).on("change", () => {
+        let value = parseFloat(minInput.node().value);
+        if (!Number.isFinite(value)) return;
+        value = clampValue(value, minShapeSize, maxShapeSize);
+        value = value > this.scatter.config.settings.sampleScatter.maxShapeSize ? this.scatter.config.settings.sampleScatter.maxShapeSize : value;
+        minInput.property("value", value);
+        this.scatter.config.settings.sampleScatter.minShapeSize = value;
+        this.scatter.app.dispatch({
+          type: "plot_edit",
+          id: this.scatter.id,
+          config: this.scatter.config
+        });
+      });
+      div.append("label").text("Max:");
+      const maxInput = div.append("input").attr("data-testid", "sjpp-legend-max-scale-input").attr("type", "number").attr("step", "0.5").attr("min", minShapeSize).attr("max", maxShapeSize).style("width", "50px").property("value", this.scatter.settings.maxShapeSize).on("change", () => {
+        let value = parseFloat(maxInput.node().value);
+        if (!Number.isFinite(value)) return;
+        value = clampValue(value, minShapeSize, maxShapeSize);
+        value = value < this.scatter.config.settings.sampleScatter.minShapeSize ? this.scatter.config.settings.sampleScatter.minShapeSize : value;
+        maxInput.property("value", value);
+        this.scatter.config.settings.sampleScatter.maxShapeSize = value;
+        this.scatter.app.dispatch({
+          type: "plot_edit",
+          id: this.scatter.id,
+          config: this.scatter.config
+        });
+      });
+      const divRadios = menu.d.append("div");
+      divRadios.append("label").text("Order: ");
+      const data = ["Ascending", "Descending"];
+      divRadios.selectAll("input").data(data).enter().append("div").style("display", "inline-block").each((text, i, divs) => {
+        const div2 = select_default(divs[i]);
+        const input = div2.append("input").attr("type", "radio").attr("name", "order").attr("id", text).attr("value", text).property("checked", (text2) => text2 == order);
+        div2.append("label").text(text).attr("for", text);
+        input.on("change", (e2) => {
+          this.changeScaleDotOrder(e2.target.value);
+        });
+      });
+      menu.showunder(e.target);
+    });
+  }
+  changeScaleDotOrder(order) {
+    this.scatter.config.settings.sampleScatter.scaleDotOrder = order;
+    this.scatter.app.dispatch({
+      type: "plot_edit",
+      id: this.scatter.id,
+      config: this.scatter.config
+    });
+  }
+};
+function clampValue(inputValue, minValue, maxValue) {
+  if (maxValue < inputValue) inputValue = maxValue;
+  if (minValue > inputValue) inputValue = minValue;
+  return inputValue;
+}
+function getTitle(name, size = 30, complete = false) {
+  if (name.length > size && !complete) name = name.slice(0, size) + "...";
+  return name;
+}
+
+// plots/scatter/viewmodel/scatterTooltip.ts
+var HIT_BUFFER_PX = 3;
+var HOVER_RING_MARGIN_PX = 2;
+var ScatterTooltip = class {
+  constructor(scatter) {
+    /** One DataPointInteractions per chart; a term0 divide-by renders several charts. */
+    this.byChart = /* @__PURE__ */ new Map();
+    this.scatter = scatter;
+    this.view = scatter.view;
+  }
+  /** Rendered radius of a dot in serie-local px. `transform()` draws each shape in a 16x16
+   * box scaled by `getScale()`, so the radius is half of that. `getScale()` already accounts
+   * for scaleDotTW sizing, the reference cloud's refSize, and the search-match enlargement,
+   * and is zoom-invariant for the svg view. */
+  dotRadius(chart, s) {
+    return 8 * this.scatter.model.getScale(chart, s);
+  }
+  /** Projected center + rendered radius of every dot, built once per attach. Hover fires on
+   * every mousemove, so recomputing this per event turned plain cursor movement into an O(n)
+   * sweep of d3 scale calls over up to maxSvgSamplesCutoff (20k) samples. Everything it
+   * depends on — the axis scales and the size settings — is fixed for the life of an attach,
+   * and any change to them re-renders, which re-attaches. */
+  buildGeom(chart) {
+    const geom = /* @__PURE__ */ new Map();
+    let maxR = 0;
+    for (const s of chart.data.samples) {
+      const { x, y } = this.scatter.model.getCoordinates(chart, s);
+      const r = this.dotRadius(chart, s);
+      if (r > maxR) maxR = r;
+      geom.set(s, { x, y, r });
+    }
+    return { geom, maxR };
+  }
+  isVisible(s) {
+    if (s.isRef && (!this.scatter.settings.showRef || this.scatter.settings.refSize == 0)) return false;
+    return this.scatter.model.getOpacity(s) > 0;
+  }
+  /** Is `b` inside the hover neighbourhood of `a`? The reach is the two dots' radii added
+   * together — "close enough that they would overlap at 100%" — but held constant in SCREEN
+   * px, so it does not stretch as you zoom.
+   *
+   * Plain circle overlap looks zoom-invariant (uniform scaling preserves it) but is not what
+   * the eye sees: the dots themselves grow with zoom, so at 11x a pair that merely touches
+   * spans ~48 screen px and the tooltip reports dots strewn right across the plot. Dividing
+   * the reach by the current scale pins it at ~4px on screen at any zoom, matching the
+   * screen-constant neighbourhood the old 5/zoom threshold happened to give. At 1x this is
+   * exactly circle overlap; it only bites once zoom would have inflated it.
+   *
+   * `scale` is screenScale(chart), hoisted by the caller — it is a layout read, and this runs
+   * once per sample. */
+  isNeighbour(chart, a, b, scale = this.screenScale(chart)) {
+    const ca = this.scatter.model.getCoordinates(chart, a);
+    const cb = this.scatter.model.getCoordinates(chart, b);
+    const reach = (this.dotRadius(chart, a) + this.dotRadius(chart, b)) / scale;
+    return Math.hypot(ca.x - cb.x, ca.y - cb.y) <= reach;
+  }
+  /** Screen px per serie-local px. Reads the composite CTM rather than the zoom state so it
+   * stays right no matter which ancestor carries the transform. */
+  screenScale(chart) {
+    return chart.serie?.node()?.getScreenCTM()?.a || 1;
+  }
+  /** Serie-local px that a constant SCREEN-px length occupies at the current zoom. */
+  fromScreenPx(chart, px) {
+    return px / this.screenScale(chart);
+  }
+  /** How close the cursor must get to a dot's center to pick it, in serie-local px: the
+   * radius you can see, plus a forgiveness margin that stays the same size on screen at any
+   * zoom. Leaving the margin in serie-local px would inflate it with everything else — at
+   * 10x zoom a 3px slop becomes 30 screen px of grab area around every dot. */
+  hitRadiusFor(chart, s) {
+    return this.dotRadius(chart, s) + this.fromScreenPx(chart, HIT_BUFFER_PX);
+  }
+  /** Scale factor passed to model.transform() to draw the hover ring. The gap is a constant
+   * number of SCREEN px, not a fixed multiple of the dot: a 1.6x ring is snug on a 2px dot
+   * but becomes a fat halo once zoom has blown the same dot up to 18px. */
+  hoverRingFactor(chart, s) {
+    const r = this.dotRadius(chart, s);
+    if (!r) return 1;
+    return 1 + HOVER_RING_MARGIN_PX / this.screenScale(chart) / r;
+  }
+  /** Rings are drawn inside chart.serie so they inherit the zoom transform and track their
+   * dots. renderSerie() wipes chart.serie, so (re)create the layer lazily. */
+  getHoverLayer(chart) {
+    let g = chart.serie.select("g.sjpp-scatter-hover");
+    if (g.empty()) g = chart.serie.append("g").attr("class", "sjpp-scatter-hover").attr("pointer-events", "none");
+    return g;
+  }
+  /** destroy() rather than detach(): attachTo() builds a fresh DataPointInteractions on every
+   * renderSerie, and each one owns a Menu that adds a div to <body> plus a body-level
+   * mousedown listener. detach() alone would leave both behind on every render. */
+  detach(chartId) {
+    if (chartId == void 0) {
+      for (const dpi of this.byChart.values()) dpi.destroy();
+      this.byChart.clear();
+      return;
+    }
+    this.byChart.get(chartId)?.destroy();
+    this.byChart.delete(chartId);
+  }
+  attachTo(chart) {
+    this.detach(chart.id);
+    if (this.scatter.config.lassoOn) return;
+    if (!chart.cover || !chart.data?.samples?.length) return;
+    const model = this.scatter.model;
+    const { geom, maxR } = this.buildGeom(chart);
+    const dpi = new DataPointInteractions({
+      cover: chart.cover,
+      hoverLayer: this.getHoverLayer(chart),
+      hoverTip: this.view.dom.tooltip,
+      points: chart.data.samples,
+      toLocalCoords: (event) => pointer_default(event, chart.serie.node()),
+      getX: (s) => geom.get(s).x,
+      getY: (s) => geom.get(s).y,
+      // broad quadtree query; must not under-select before the per-dot filter runs
+      hitRadius: () => maxR + this.fromScreenPx(chart, HIT_BUFFER_PX),
+      perDotRadius: (s) => geom.get(s).r + this.fromScreenPx(chart, HIT_BUFFER_PX),
+      isHidden: (s) => !this.isVisible(s),
+      // the cursor picks the nearest dot; the cluster then adds every dot whose rendered
+      // circle overlaps that one, so "neighbour" means "visibly on top of each other".
+      // sorted nearest-first because the module truncates this list to maxTooltipRows —
+      // in chart.data.samples order the dot actually under the cursor could be cut.
+      getCluster: (seed, all) => {
+        const a = geom.get(seed);
+        const scale = this.screenScale(chart);
+        return all.filter((s) => {
+          if (!this.isVisible(s)) return false;
+          const b = geom.get(s);
+          return Math.hypot(a.x - b.x, a.y - b.y) <= (a.r + b.r) / scale;
+        }).sort((s1, s2) => {
+          const b1 = geom.get(s1), b2 = geom.get(s2);
+          return Math.hypot(a.x - b1.x, a.y - b1.y) - Math.hypot(a.x - b2.x, a.y - b2.y);
+        });
+      },
+      toHoverSpec: (s) => ({
+        path: model.getShape(chart, s),
+        transform: model.transform(chart, s, this.hoverRingFactor(chart, s)),
+        stroke: "black",
+        fill: "none"
+      }),
+      maxTooltipRows: this.scatter.settings.maxTooltipRows,
+      itemNoun: this.scatter.settings.itemLabel.toLowerCase(),
+      renderSingleHoverTooltip: (s, container) => this.renderSampleRows(s, chart, container),
+      buildMultiHitTableData: (dots) => this.buildTableData(dots),
+      getActions: (s) => this.getActions(s),
+      renderSingleHitInfo: (s, container) => this.renderSampleRows(s, chart, container),
+      getRowKey: (s) => s.sample || s.cellId || String(s.sampleId ?? `${s.x},${s.y}`)
+    });
+    dpi.attach();
+    chart.cover.on("click.sjpp-scatter-searchmenu", () => this.scatter.interactivity.searchMenu?.hide());
+    this.byChart.set(chart.id, dpi);
+  }
+  getTW(category) {
+    switch (category) {
+      case "category":
+        return this.scatter.config.colorTW;
+      case "shape":
+        return this.scatter.config.shapeTW;
+      case "scale":
+        return this.scatter.config.scaleDotTW;
+      case "x":
+        return this.scatter.config.term;
+      case "y":
+        return this.scatter.config.term2;
+      default:
+        return null;
+    }
+  }
+  /** Two-column detail view of one sample, shared by the hover tooltip and the click
+   * action menu. */
+  renderSampleRows(sample, chart, container) {
+    const config = this.scatter.config;
+    const table = table2col({
+      holder: container.append("div"),
+      disableScroll: true,
+      cellPadding: "5px",
+      testid: "sjpp-single-hit-table"
+    });
+    if (config.term) {
+      table.addRow(config.term.term.name, this.getCategoryValue("x", sample, config.term));
+      if (config.term2) table.addRow(config.term2.term.name, this.getCategoryValue("y", sample, config.term2));
+    }
+    if (sample.category != "Ref") {
+      if (config.colorTW) this.addTermRow(table, "category", sample, chart);
+      if (config.shapeTW) this.addTermRow(table, "shape", sample, chart);
+      if (config.scaleDotTW)
+        table.addRow(config.scaleDotTW.term.name, this.getCategoryValue("scale", sample, config.scaleDotTW));
+    }
+    if ("info" in sample) for (const [k, v] of Object.entries(sample.info)) table.addRow(k, v);
+    const name = sample.sample || sample.cellId || sample.sampleId;
+    if (name != null && name !== "") table.addRow(this.scatter.settings.itemLabel, name);
+  }
+  /** A color/shape term row, drawn with the dot's own glyph so the tooltip matches the plot. */
+  addTermRow(table, category, sample, chart) {
+    const tw = this.getTW(category);
+    const [tdlabel, td] = table.addRow();
+    tdlabel.text(tw.term.name);
+    const isColor = category == "category";
+    const color = isColor ? this.scatter.model.getColor(sample, chart) : this.scatter.config.colorTW ? "gray" : this.scatter.settings.defaultColor;
+    const shapeKey = isColor ? "Ref" : sample.shape;
+    const shape = shapesArray[chart.shapeLegend.get(shapeKey).shape % shapesArray.length];
+    let value = this.getCategoryValue(category, sample, tw);
+    let fontColor = "black";
+    if (tw?.term.type == "geneVariant" && tw.q.type == "values") {
+      const whiteColor = rgb("white").toString();
+      for (const id in mclass) {
+        const class_info = mclass[id];
+        if (!value.toString().includes(class_info.label)) continue;
+        if (rgb(class_info.color).toString() != whiteColor) fontColor = class_info.color;
+        value = this.getCategoryValue(category, sample, tw, true);
+        break;
+      }
+    }
+    const svg = td.append("svg").attr("width", value.toString().length * 9 + 60).attr("height", "25px");
+    const g = svg.append("g").attr("transform", "translate(0, 14)");
+    g.append("path").attr("d", shape).attr("fill", color).attr("stroke", "#aaa").attr("transform", "translate(0, -4) scale(0.6)");
+    g.append("text").attr("x", 15).attr("y", 6).attr("font-size", "0.9em").append("tspan").text(value).attr("fill", fontColor);
+  }
+  /** Flat table for the multi-hit hover tooltip and click menu. */
+  buildTableData(dots) {
+    return buildSampleTableData(this.scatter.config, this.scatter.settings.itemLabel, dots);
+  }
+  getActions(sample) {
+    const config = this.scatter.config;
+    const interactivity = this.scatter.interactivity;
+    const actions = [];
+    if (sample.isRef || sample.sampleId == null || config.singleCellPlot) return actions;
+    const geneTW = [config.colorTW, config.shapeTW].find((tw) => tw?.term.type == "geneVariant");
+    if (geneTW) actions.push({ label: "Lollipop", onClick: () => interactivity.openLollipop(geneTW.term.name) });
+    const queries = this.scatter.state.termdbConfig.queries;
+    if (this.scatter.state.currentCohortChartTypes.includes("sampleView"))
+      actions.push({ label: "Sample view", onClick: () => interactivity.openSampleView(sample) });
+    if (queries?.singleSampleMutation)
+      actions.push({ label: "Disco", onClick: () => interactivity.openDiscoPlot(sample) });
+    if (queries?.singleSampleGenomeQuantification)
+      actions.push({ label: "Met Array", onClick: () => interactivity.openMetArray(sample) });
+    return actions;
+  }
+  getCategoryValue(category, d, tw, includeMutation = false) {
+    return getCategoryValue(category, d, tw, includeMutation);
+  }
+};
+
+// plots/scatter/viewmodel/scatterZoom.ts
+var ScatterZoom = class {
+  constructor(scatter) {
+    this.zoom = 1;
+    this.scatter = scatter;
+    this.zoomD3 = zoom_default().scaleExtent([0.1, 10]).on("zoom", (event) => this.handleZoom(event.transform)).filter((event) => {
+      if (event.type === "wheel") return event.ctrlKey;
+      return true;
+    }).on("end", async (event) => {
+      this.scatter.transform = event.transform;
+      this.scatter.zoom = event.transform.k;
+      if (this.scatter.settings.saveZoomTransform) this.saveZoomTransform();
+    });
+  }
+  async saveZoomTransform() {
+    const transform = this.scatter.transform?.toString() || null;
+    this.scatter.app.dispatch({ type: "plot_edit", id: this.scatter.id, config: { transform } });
+  }
+  initZoom(toolsDiv) {
+    this.zoomD3.scaleExtent([0.1, this.scatter.config.scaleDotTW ? 4 : 10]);
+    toolsDiv.selectAll("*").remove();
+    const display = "block";
+    const resetDiv = toolsDiv.insert("div").style("display", display).style("margin", "15px 10px").attr("name", "sjpp-reset-btn");
+    icons["restart"](resetDiv, { handler: () => this.resetToIdentity(), title: "Reset to original zoom" });
+    const zoomInDiv = toolsDiv.insert("div").style("display", display).style("margin", "15px 10px").attr("name", "sjpp-zoom-in-btn");
+    icons["zoomIn"](zoomInDiv, {
+      handler: () => this.zoomIn(),
+      title: "Zoom in. You can also zoom in pressing the Ctrl key and using the mouse wheel"
+    });
+    const zoomOutDiv = toolsDiv.insert("div").style("display", display).style("margin", "15px 10px").attr("name", "sjpp-zoom-out-btn");
+    icons["zoomOut"](zoomOutDiv, {
+      handler: () => this.zoomOut(),
+      title: "Zoom out. You can also zoom out pressing the Ctrl key and using the mouse wheel"
+    });
+    for (const chart of this.scatter.model.charts) {
+      chart.mainG.call(this.zoomD3);
+    }
+    if (this.scatter.config.scaleDotTW && this.zoom > 4) this.resetToIdentity();
+  }
+  handleZoom(transform) {
+    this.zoom = transform.scale(1).k;
+    for (const chart of this.scatter.model.charts) {
+      const new_xScale = transform.rescaleX(chart.xAxisScale);
+      const new_yScale = transform.rescaleY(chart.yAxisScale);
+      chart.serie.attr("transform", transform);
+      chart.regressionG?.attr("transform", transform);
+      chart.xAxis.call(chart.axisBottom.scale(new_xScale));
+      chart.yAxis.call(chart.axisLeft.scale(new_yScale));
+      if (this.scatter.config.lassoOn)
+        chart.lasso.selectedItems().attr("transform", (c) => this.scatter.model.transform(chart, c, 1.2));
+      if (this.scatter.config.scaleDotTW) this.scatter.vm.legendvm.drawScaleDotLegend(chart);
+    }
+  }
+  zoomIn() {
+    this.zoom = this.zoom * 1.2;
+    if (!this.scatter.model.is2DLarge)
+      for (const chart of this.scatter.model.charts) this.zoomD3.scaleBy(chart.mainG.transition().duration(500), 1.2);
+  }
+  zoomOut() {
+    this.zoom = this.zoom * 0.8;
+    if (!this.scatter.model.is2DLarge)
+      for (const chart of this.scatter.model.charts) this.zoomD3.scaleBy(chart.mainG.transition().duration(500), 0.8);
+  }
+  resetToIdentity() {
+    this.zoom = 1;
+    if (!this.scatter.model.is2DLarge)
+      for (const chart of this.scatter.model.charts)
+        chart.mainG.transition().duration(500).call(this.zoomD3.transform, identity);
+  }
+};
+
+// plots/scatter/viewmodel/scatterViewModelBase.ts
+var ScatterViewModelBase = class {
+  constructor(scatter) {
+    this.scatter = scatter;
+    this.view = scatter.view;
+    this.model = scatter.model;
+    this.interactivity = scatter.interactivity;
+    this.legendvm = new ScatterLegend(scatter);
+    this.scatterTooltip = new ScatterTooltip(scatter);
+    this.scatterZoom = new ScatterZoom(scatter);
+  }
+  render() {
+    const chartDivs = this.view.dom.mainDiv.selectAll(":scope > div").data(this.model.charts, (chart) => chart?.id);
+    chartDivs.exit().remove();
+    chartDivs.each((chart, i, divs) => {
+      const div = select_default(divs[i]);
+      this.renderChart(chart, div);
+    });
+    chartDivs.enter().append("div").style("vertical-align", "top").each((chart, i, divs) => {
+      const div = select_default(divs[i]);
+      this.renderChart(chart, div);
+    });
+    if (!this.model.charts?.length) {
+      this.view.dom.bannerDiv.html(`<span>No visible scatter plot data to render</span>`).style("display", "block");
+      return;
+    } else {
+      this.view.dom.bannerDiv.style("display", "none");
+    }
+  }
+  renderChart(chart, div, removePrevious = true) {
+    const s = this.scatter.settings;
+    div.style("opacity", 0).style("display", "inline-block").attr("data-testid", `sjpp-scatter-chart-div-${chart?.id ?? "Default"}`);
+    chart.svg = div.select("svg").empty() ? div.append("svg") : div.select("svg");
+    this.renderSVG(chart, s, removePrevious);
+    div.transition().duration(s.duration).style("opacity", 1);
+    chart.chartDiv = div;
+  }
+  async renderSVG(chart, s, removePrevious) {
+    const svg = chart.svg;
+    let step = Math.min(20 * 40 / chart.colorLegend.size, 25);
+    if (step < 18) step = 18;
+    this.step = step;
+    let colorLegendSize = chart.colorLegend.size * step;
+    if (chart.colorLegend.get("Ref")?.sampleCount > 0) colorLegendSize += 60;
+    const scaleHeight = this.scatter.config.scaleDotTW ? 200 : 100;
+    this.legendHeight = Math.max(colorLegendSize, chart.shapeLegend.size * 25) + scaleHeight;
+    let fontSize = this.legendvm.getFontSize(chart, chart.colorLegend);
+    const labels = [];
+    if (this.scatter.config.colorTW) labels.push(getTitle(this.scatter.config.colorTW.term.name, 40) + " COLOR");
+    else if (this.scatter.config.colorColumn && this.scatter.config.bySample)
+      labels.push(getTitle(this.scatter.config.colorColumn.name, 40) + " COLOR");
+    if (this.scatter.config.scaleDotTW) labels.push(getTitle(this.scatter.config.scaleDotTW.term.name, 40) + " SHAPE");
+    if (labels.length > 0) {
+      const labelsWidth = getMaxLabelWidth(svg, labels) + 40;
+      chart.colorLegendWidth = this.scatter.config?.colorTW?.q.mode == "continuous" ? Math.max(175, labelsWidth) : Math.max(this.legendvm.getLegendLabelWidth(chart, "color", svg, `${fontSize}em`), labelsWidth);
+    } else chart.colorLegendWidth = 0;
+    fontSize = this.legendvm.getFontSize(chart, chart.shapeLegend);
+    const shapeWidth = this.legendvm.getLegendLabelWidth(chart, "shape", svg, `${fontSize}em`);
+    const width = s.svgw + chart.colorLegendWidth + shapeWidth + 125;
+    svg.attr("width", width).attr("height", Math.max(s.svgh + 200, this.legendHeight)).transition().duration(s.duration);
+    this.fillSvgSubElems(chart);
+    await this.renderSerie(chart, removePrevious);
+    this.legendvm.renderLegend(chart, step);
+  }
+  fillSvgSubElems(chart) {
+    const svg = chart.svg;
+    let axisG, labelsG;
+    if (svg.select(".sjpcb-scatter-mainG").size() == 0) {
+      chart.G = svg.append("g").attr("class", "sjpcb-scatter-G");
+      chart.mainG = chart.G.append("g").attr("class", "sjpcb-scatter-mainG");
+      axisG = svg.append("g").attr("class", "sjpcb-scatter-axis");
+      labelsG = svg.append("g").attr("class", "sjpcb-scatter-labelsG");
+      chart.xAxis = axisG.append("g").attr("class", "sjpcb-scatter-x-axis");
+      chart.yAxis = axisG.append("g").attr("class", "sjpcb-scatter-y-axis").attr("transform", `translate(${this.model.axisOffset.x}, 0)`);
+      chart.mainG.append("rect").attr("class", "zoom").attr("x", this.model.axisOffset.x).attr("y", this.model.axisOffset.y).attr("width", this.scatter.settings.svgw).attr("height", this.scatter.settings.svgh).attr("fill", "white");
+      const id = "clip" + this.scatter.id;
+      chart.clipRect = chart.svg.append("defs").append("clipPath").attr("id", id).append("rect").attr("x", this.model.axisOffset.x).attr("y", this.model.axisOffset.y).attr("width", this.scatter.settings.svgw + 10).attr("height", this.scatter.settings.svgh);
+      chart.serie = chart.mainG.append("g").attr("class", "sjpcb-scatter-series");
+      chart.regressionG = chart.mainG.append("g").attr("class", "sjpcb-scatter-lowess");
+      chart.cover = chart.mainG.append("rect").attr("class", "sjpp-scatter-cover").attr("x", this.model.axisOffset.x).attr("y", this.model.axisOffset.y).attr("width", this.scatter.settings.svgw).attr("height", this.scatter.settings.svgh).attr("fill", "none").style("pointer-events", "all");
+      chart.legendG = svg.append("g").attr("class", "sjpcb-scatter-legend");
+      if (this.scatter.state.config.transform && chart.mainG.attr("transform") != this.scatter.state.config.transform) {
+        chart.mainG.attr("transform", this.scatter.state.config.transform);
+      }
+      chart.G.attr("clip-path", `url(#${id})`);
+    } else {
+      chart.G = svg.select(".sjpcb-scatter-G");
+      chart.mainG = svg.select(".sjpcb-scatter-mainG");
+      chart.serie = chart.mainG.select(".sjpcb-scatter-series");
+      chart.regressionG = chart.mainG.select(".sjpcb-scatter-lowess");
+      chart.cover = chart.mainG.select(".sjpp-scatter-cover");
+      axisG = svg.select(".sjpcb-scatter-axis");
+      labelsG = svg.select(".sjpcb-scatter-labelsG");
+      chart.xAxis = axisG.select(".sjpcb-scatter-x-axis");
+      chart.yAxis = axisG.select(".sjpcb-scatter-y-axis");
+      chart.legendG = svg.select(".sjpcb-scatter-legend");
+      chart.clipRect = svg.select("defs").select("clipPath").select("rect");
+    }
+    chart.axisG = axisG;
+    chart.labelsG = labelsG;
+    chart.cover.attr("width", this.scatter.settings.svgw).attr("height", this.scatter.settings.svgh);
+    chart.xAxis.attr("transform", `translate(0, ${this.scatter.settings.svgh + this.model.axisOffset.y})`);
+    chart.legendG.attr("transform", `translate(${this.scatter.settings.svgw + this.model.axisOffset.x + 50}, 20)`);
+    if (chart.axisBottom) {
+      chart.xAxis.call(chart.axisBottom);
+      chart.yAxis.call(chart.axisLeft);
+    }
+    if (this.scatter.config.term) {
+      let termName = getTitle(this.scatter.config.term.term.name, 60);
+      if (!this.scatter.config.colorTW && !this.scatter.config.shapeTW && !this.scatter.config.term0)
+        termName = `${termName}, n=${chart.cohortSamples.length || chart.totalSampleCount}`;
+      labelsG.selectAll("*").remove();
+      let text = labelsG.append("text").attr(
+        "transform",
+        `translate(${this.model.axisOffset.x + this.scatter.settings.svgw / 2}, ${this.scatter.settings.svgh + this.model.axisOffset.y + 40})`
+      ).attr("text-anchor", "middle").text(termName).style("font-size", "0.9em");
+      if (termName.length > 65) {
+        text.on("mouseenter", (event) => {
+          this.scatter.interactivity.showText(event, this.scatter.config.term.term.name);
+        }).on("mouseleave", () => this.view.dom.tooltip.hide());
+      }
+      if (this.scatter.config.term0 && !this.scatter.config.colorTW && !this.scatter.config.shapeTW) {
+        const term0Name = `${chart.id}, n=${chart.cohortSamples.length}`;
+        labelsG.append("text").attr(
+          "transform",
+          `translate(${this.model.axisOffset.x + this.scatter.settings.svgw / 2}, ${this.scatter.settings.svgh + this.model.axisOffset.y + 65})`
+        ).attr("text-anchor", "middle").text(term0Name);
+      }
+      if (this.scatter.config.term2) {
+        const t2name = this.scatter.config.term2.term.name;
+        const term2Name = getTitle(t2name, 60);
+        text = labelsG.append("text").attr(
+          "transform",
+          `translate(${this.model.axisOffset.x - 50}, ${this.scatter.settings.svgh / 2 + this.model.axisOffset.y}) rotate(-90)`
+        ).attr("text-anchor", "middle").text(term2Name).style("font-size", "0.9em");
+        if (term2Name.length > 60) {
+          text.on("mouseenter", (event) => {
+            this.scatter.interactivity.showText(event, this.scatter.config.term2.term.name);
+          }).on("mouseleave", () => this.view.dom.tooltip.hide());
+        }
+      }
+    }
+  }
+  renderSerie(chart, removePrevious) {
+    const duration = this.scatter.settings.duration;
+    if (this.canvas) this.canvas.remove();
+    const g = chart.serie;
+    const data = chart.data;
+    if (removePrevious) chart.serie.selectAll("*").remove();
+    const labelPointTestId = (c) => "sjpp-scatter-dot-" + (c.sample ?? c.sampleId ?? "");
+    const symbols = g.selectAll('path[name="serie"]').data(data.samples);
+    symbols.transition().duration(duration).attr("name", "serie").attr("data-testid", labelPointTestId).attr("transform", (c) => this.model.transform(chart, c)).attr("d", (c) => this.model.getShape(chart, c)).attr("fill", (c) => this.model.getColor(c, chart)).attr("stroke", (c) => this.model.getColor(c, chart)).attr("stroke-width", (c) => this.model.getStrokeWidth(c)).style("fill-opacity", (c) => this.model.getOpacity(c));
+    symbols.enter().append("path").attr("name", "serie").attr("data-testid", labelPointTestId).attr("transform", (c) => this.model.transform(chart, c)).attr("d", (c) => this.model.getShape(chart, c)).attr("fill", (c) => this.model.getColor(c, chart)).attr("stroke", (c) => this.model.getColor(c, chart)).attr("stroke-width", (c) => this.model.getStrokeWidth(c)).style("fill-opacity", (c) => this.model.getOpacity(c)).transition().duration(duration);
+    this.mayRenderSampleLabels(chart);
+    this.mayRenderRegression();
+  }
+  /** Draw the sample name as a text label next to each cohort (db) sample dot. Used by per-sample
+   * (bySample) scatterplots, where a single highlighted dot sits among a reference cloud. */
+  mayRenderSampleLabels(chart) {
+    const g = chart.serie;
+    const labelData = this.scatter.config.bySample && chart.data?.samples ? chart.data.samples.filter((c) => !c.isRef && c.sample) : [];
+    const labels = g.selectAll('text[name="sampleLabel"]').data(labelData, (c) => c.sample);
+    labels.exit().remove();
+    labels.enter().append("text").attr("name", "sampleLabel").attr("pointer-events", "none").attr("font-size", "12px").attr("font-weight", "bold").attr("paint-order", "stroke").attr("stroke", "white").attr("stroke-width", "3px").attr("fill", "black").merge(labels).attr("x", (c) => this.model.getCoordinates(chart, c).x + 8).attr("y", (c) => this.model.getCoordinates(chart, c).y + 4).text((c) => c.sample);
+  }
+  async mayRenderRegression() {
+    for (const chart of this.model.charts) {
+      chart.regressionG?.selectAll("*").remove();
+      if (chart.regressionCurve) {
+        const l = line_default().x((d) => d[0]).y((d) => d[1]);
+        const regressionPath = chart.regressionG.append("path");
+        regressionPath.attr("d", l(chart.regressionCurve)).attr("stroke", "blue").attr("fill", "none").style("stroke-width", "2");
+      }
+    }
+  }
+  async addGroup(group) {
+    this.model.addGroup(group);
+    this.view.dom.tip.hide();
+  }
+  setTools() {
+    if (!this.model.charts[0]) return;
+    const toolsDiv = this.view.dom.toolsDiv.style("background-color", "white");
+    toolsDiv.selectAll("*").remove();
+    if (!(this.model.is2DLarge && this.scatter.config.singleCellPlot)) this.scatterZoom.initZoom(toolsDiv);
+  }
+  /** Applies to the ViewModel only
+   * Note: legendvm.renderLegend called in this file applies to all
+   * inherited classes. The g dimensions are different
+   * between the svg rendered scatter and the 2D Large/3D scatter.
+   * Hence the similar function in scatterViewModel. */
+  addLegendSVG(chart) {
+    chart.chartDiv.style("margin", "20px 20px");
+    chart.legendDiv = this.view.dom.mainDiv.insert("div").style("display", "inline-block").style("vertical-align", "top");
+    chart.legendG = chart.legendDiv.append("svg").attr("width", this.scatter.settings.svgw / 2).attr("height", this.scatter.settings.svgh).append("g").attr("transform", "translate(20, 20)");
+  }
+};
+
+// plots/scatter/viewmodel/scatterViewModel.ts
+var ScatterViewModel = class extends ScatterViewModelBase {
+  constructor(scatter) {
+    super(scatter);
+    this.scatterLasso = new ScatterLasso(scatter);
+  }
+  fillSvgSubElems(chart) {
+    super.fillSvgSubElems(chart);
+    chart.axisG.style("opacity", this.scatter.settings.showAxes ? 1 : 0);
+    chart.labelsG.style("opacity", this.scatter.settings.showAxes ? 1 : 0);
+  }
+  renderSerie(chart, removePrevious) {
+    super.renderSerie(chart, removePrevious);
+    if (this.scatter.settings.showContour) this.renderContours(chart);
+    this.scatterTooltip.attachTo(chart);
+  }
+  renderContours(chart) {
+    const contourG = chart.serie;
+    let zAxisScale;
+    if (this.scatter.config.colorTW?.q.mode == "continuous") {
+      const [zMin, zMax] = extent(chart.data.samples, (d) => d.category);
+      zAxisScale = linear().domain([zMin, zMax]).range([0, 1]);
+    }
+    const data = chart.data.samples.filter((s) => this.model.getOpacity(s) > 0).map((s) => {
+      return { x: chart.xAxisScale(s.x), y: chart.yAxisScale(s.y), z: zAxisScale ? zAxisScale(s.category) : 1 };
+    });
+    renderContours(
+      contourG,
+      data,
+      this.scatter.settings.svgw,
+      this.scatter.settings.svgh,
+      this.scatter.settings.colorContours,
+      this.scatter.settings.contourBandwidth,
+      this.scatter.settings.contourThresholds
+    );
+  }
+  async mayRenderRegression() {
+    for (const chart of this.model.charts) {
+      chart.regressionG?.selectAll("*").remove();
+      if (chart.regressionCurve) {
+        const l = line_default().x((d) => d[0]).y((d) => d[1]);
+        const regressionPath = chart.regressionG.append("path");
+        regressionPath.attr("d", l(chart.regressionCurve)).attr("stroke", "blue").attr("fill", "none").style("stroke-width", "2");
+      }
+    }
+  }
+  async toggleLasso() {
+    this.scatter.config.lassoOn = !this.scatter.config.lassoOn;
+    this.scatter.app.dispatch({ type: "plot_edit", id: this.scatter.id, config: this.scatter.config });
+  }
+  async addGroup(group) {
+    this.model.addGroup(group);
+    this.view.dom.tip.hide();
+  }
+  setTools() {
+    super.setTools();
+    if (this.scatter.config.singleCellPlot || this.scatter.config.bySample) return;
+    const toolsDiv = this.view.dom.toolsDiv;
+    const display = "block";
+    const searchDiv = toolsDiv.insert("div").style("display", display).style("margin", "15px 10px");
+    this.view.dom.lassoDiv = toolsDiv.insert("div").style("display", display).style("margin", "15px 10px");
+    icons["search"](searchDiv, { handler: (e) => this.interactivity.searchSample(e), title: "Search samples" });
+    icons["lasso"](this.view.dom.lassoDiv, {
+      handler: () => this.toggleLasso(),
+      enabled: this.scatter.config.lassoOn,
+      title: "Select a group of samples"
+    });
+    this.view.dom.groupDiv = toolsDiv.insert("div").style("display", display).style("margin", "15px 10px");
+    for (const chart of this.model.charts) {
+      if (!chart.lasso) chart.lasso = d3lasso();
+      this.scatterLasso.lassoReset(chart);
+    }
+  }
+  /** Applies to 2D large and 3D add an svg for the legend
+   * Note: legendvm.renderLegend called in ViewModeBase applies to all
+   * inherited classes. The g dimensions are different
+   * between the svg rendered scatter and the 2D Large/3D scatter.
+   * Hence the similar function in scatterViewModelBase.*/
+  addLegendSVG(chart) {
+    chart.chartDiv.style("margin", "20px 20px");
+    chart.legendDiv = this.view.dom.mainDiv.insert("div").style("display", "inline-block").style("vertical-align", "top");
+    chart.legendG = chart.legendDiv.append("svg").attr("width", this.scatter.settings.svgw / 2).attr("height", this.scatter.vm.legendHeight).append("g").attr("transform", "translate(20, 20)");
+  }
+};
+function renderContours(contourG, data, width, height, colorContours, bandwidth, thresholds) {
+  const contours = density_default().x((s) => s.x).y((s) => s.y).weight((s) => s.z).size([width, height]).cellSize(2).bandwidth(bandwidth).thresholds(thresholds)(data);
+  const colorScale = sequential().domain([0, max(contours, (d) => d.value)]).interpolator(Greys_default);
+  contourG.attr("fill", "none").attr("stroke", "gray").attr("stroke-linejoin", "round").selectAll().data(contours).join("path").attr("stroke-width", (d, i) => i % 5 ? 0.25 : 1).attr("d", path_default()).attr("fill", colorContours ? (d) => colorScale(d.value) : "none").attr("fill-opacity", 0.05);
+}
+
+// plots/scatter/viewmodel/scatterViewModel2DLarge.ts
+var ScatterViewModel2DLarge = class extends ScatterViewModel {
+  constructor(scatter) {
+    super(scatter);
+    this.isSingleCell = false;
+    this.isSingleCell = scatter.config?.singleCellPlot;
+  }
+  async renderSerie(chart) {
+    if (this.isSingleCell && chart.src) {
+      this.renderLargeSingleCell(chart);
+      return;
+    }
+    const s = this.scatter.settings;
+    const offsetX = this.model.axisOffset.x;
+    const offsetY = this.model.axisOffset.y;
+    const div = select_default(chart.svg.node().parentNode);
+    div.style("position", "relative");
+    div.selectAll("canvas").remove();
+    chart.serie?.selectAll("*").remove();
+    chart.regressionG?.selectAll("*").remove();
+    this.canvas = div.append("canvas").style("position", "absolute").style("left", `${offsetX}px`).style("top", `${offsetY}px`).node();
+    this.canvas.width = s.svgw;
+    this.canvas.height = s.svgh;
+    const fov = s.threeFOV;
+    const near = 0.1;
+    const far = 1e3;
+    const camera = new PerspectiveCamera(fov, 1, near, far);
+    const scene = new Scene();
+    camera.position.set(0, 0, 1 / Math.tan(fov * Math.PI / 180 / 2));
+    camera.lookAt(scene.position);
+    camera.updateMatrix();
+    const geometry = new BufferGeometry();
+    const { vertices, colors } = this.getVertices(chart);
+    geometry.setAttribute("position", new Float32BufferAttribute(vertices, 3));
+    geometry.setAttribute("color", new Float32BufferAttribute(colors, 3));
+    const tex = getThreeCircle(128);
+    const material = new PointsMaterial({
+      size: this.scatter.settings.threeSize,
+      sizeAttenuation: true,
+      transparent: true,
+      opacity: this.scatter.settings.opacity,
+      map: tex,
+      vertexColors: true
+    });
+    const particles = new Points(geometry, material);
+    scene.add(particles);
+    const renderer = new WebGLRenderer({
+      antialias: true,
+      canvas: this.canvas,
+      preserveDrawingBuffer: true,
+      alpha: true
+    });
+    renderer.setClearColor(0, 0);
+    renderer.setSize(this.scatter.settings.svgw, this.scatter.settings.svgh);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    this.canvas.addEventListener("wheel", (event) => {
+      if (!event.ctrlKey) return;
+      event.preventDefault();
+      const zoomState = this.scatter.vm.scatterZoom;
+      const factor = event.deltaY < 0 ? 1.1 : 0.9;
+      zoomState.zoom = Math.max(0.1, Math.min(10, zoomState.zoom * factor));
+    });
+    this.renderAxes(chart);
+    this.animate(chart, camera, scene, renderer);
+  }
+  /** Redraw the given chart's x/y axes to match the current WebGL zoom. camera.zoom scales the point
+   * cloud by k about the plot center, so express that as a d3 zoom transform and rescale the axes the
+   * way ScatterZoom.handleZoom() does for the small plots. Rescaling keeps each axis RANGE pinned to
+   * the plot edges (only the visible data window is relabeled), so the two axes stay joined at the
+   * corner and neither the ticks nor the spine spill past the canvas when zoomed in. Ticks that fall
+   * outside the data range (e.g. when zoomed out past the data) are dropped.
+   *
+   * The zoom is tracked per chart (chart.currentAxisZoom), not on the view model, because a
+   * categorical term0 renders multiple charts — each with its own canvas and animation loop — that
+   * all share one zoom level; per-chart tracking keeps every chart's axes in sync, not just the last. */
+  renderAxes(chart) {
+    if (!chart?.axisBottom || !chart?.axisLeft || !chart.xAxis || !chart.yAxis) return;
+    const s = this.scatter.settings;
+    const k = this.scatter.vm.scatterZoom.zoom || 1;
+    const offsetX = this.model.axisOffset.x;
+    const offsetY = this.model.axisOffset.y;
+    const cx = offsetX + s.svgw / 2;
+    const cy = offsetY + s.svgh / 2;
+    const transform = identity.translate(cx * (1 - k), cy * (1 - k)).scale(k);
+    const xBase = chart.xAxisScaleTime || chart.xAxisScale;
+    const yBase = chart.yAxisScaleTime || chart.yAxisScale;
+    const xScale = transform.rescaleX(xBase);
+    const yScale = transform.rescaleY(yBase);
+    chart.xAxis.call(chart.axisBottom.scale(xScale).tickValues(this.ticksWithinData(xScale, xBase)));
+    chart.yAxis.call(chart.axisLeft.scale(yScale).tickValues(this.ticksWithinData(yScale, yBase)));
+    chart.currentAxisZoom = k;
+  }
+  /** Ticks of the zoomed scale that still fall within the base (data) domain, so zooming out past
+   * the data does not render tick marks for values below the minimum or above the maximum. */
+  ticksWithinData(zoomedScale, baseScale) {
+    const [d0, d1] = baseScale.domain();
+    const lo = Math.min(d0, d1);
+    const hi = Math.max(d0, d1);
+    return zoomedScale.ticks().filter((t) => t >= lo && t <= hi);
+  }
+  animate(chart, camera, scene, renderer) {
+    if (this.scatter.vm !== this) {
+      renderer.domElement.remove();
+      renderer.dispose();
+      return;
+    }
+    requestAnimationFrame(() => this.animate(chart, camera, scene, renderer));
+    const k = this.scatter.vm.scatterZoom.zoom;
+    camera.zoom = k;
+    camera.updateProjectionMatrix();
+    if (k !== chart.currentAxisZoom) this.renderAxes(chart);
+    renderer.render(scene, camera);
+  }
+  getVertices(chart) {
+    const xAxisScale = chart.xAxisScale.copy().range([-1, 1]);
+    const yAxisScale = chart.yAxisScale.copy().range([1, -1]);
+    const vertices = [];
+    const colors = [];
+    for (const sample of chart.data.samples) {
+      const opacity = this.model.getOpacity(sample);
+      if (opacity == 0) continue;
+      const x = xAxisScale(sample.x);
+      const y = yAxisScale(sample.y);
+      const z = 0;
+      vertices.push(x, y, z);
+      const color = new Color(rgb(this.model.getColor(sample, chart)).toString());
+      colors.push(color.r, color.g, color.b);
+    }
+    return { vertices, colors };
+  }
+  /** Renders the server generated image for a single cell */
+  renderLargeSingleCell(chart) {
+    chart.svg.selectAll(".sjpp-scatter-img-g").remove();
+    const imgG = chart.svg.append("g").attr("class", "sjpp-scatter-img-g");
+    const img = imgG.append("image").attr("xlink:href", chart.src);
+    if (chart.canvasWidth) img.attr("width", chart.canvasWidth);
+    if (chart.canvasHeight) img.attr("height", chart.canvasHeight);
+    this.canvas = img;
+  }
+};
+function getThreeCircle(size) {
+  const c = document.createElement("canvas");
+  c.width = size;
+  c.height = size;
+  const ctx = c.getContext("2d");
+  ctx.clearRect(0, 0, size, size);
+  ctx.fillStyle = "white";
+  ctx.beginPath();
+  ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI);
+  ctx.fill();
+  const tex = new CanvasTexture(c);
+  return tex;
+}
+
+// plots/singleCellPlot.js
+var SAMPLES_TAB = 1;
+var PLOTS_TAB = 2;
+var DIFFERENTIAL_EXPRESSION_TAB = 3;
+var GENE_EXPRESSION_TAB = 4;
+var IMAGES_TAB = 5;
+var VIOLIN_TAB = 6;
+var noExpColor = "#F5F5F5";
+var DE_GENES_TAB = 8;
+var DE_GSEA_TAB = 7;
+var singleCellPlot = class _singleCellPlot {
+  static type = "singleCellPlot";
+  constructor() {
+    this.type = _singleCellPlot.type;
+    this.tip = new Menu({ padding: "4px", offsetX: 10, offsetY: 0 });
+    this.tip.d.style("max-height", "300px").style("overflow", "scroll").style("font-size", "0.9em");
+    this.startGradient = {};
+    this.stopGradient = {};
+  }
+  async init(appState) {
+    const state = this.getState(appState);
+    if (this.opts.header) this.opts.header.html(`SINGLE CELL PLOT`).style("font-size", "0.9em");
+    this.tabs = [];
+    const activeTab = state.config.activeTab;
+    const isVisible = () => this.isValidSample;
+    this.tabs.push({
+      label: "Samples",
+      id: SAMPLES_TAB,
+      isVisible,
+      active: activeTab == SAMPLES_TAB,
+      callback: () => this.setActiveTab(SAMPLES_TAB)
+    });
+    this.tabs.push({
+      label: "Plots",
+      id: PLOTS_TAB,
+      active: activeTab == PLOTS_TAB,
+      isVisible,
+      callback: () => this.setActiveTab(PLOTS_TAB)
+    });
+    if (state.termdbConfig.queries.singleCell.DEgenes) {
+      this.tabs.push({
+        label: "Differential Expression",
+        id: DIFFERENTIAL_EXPRESSION_TAB,
+        active: activeTab == DIFFERENTIAL_EXPRESSION_TAB,
+        isVisible,
+        testid: "sjppoldscTabDE",
+        callback: () => this.setActiveTab(DIFFERENTIAL_EXPRESSION_TAB)
+      });
+    }
+    if (state.termdbConfig.queries.singleCell.geneExpression)
+      this.tabs.push({
+        label: "Gene Expression",
+        id: GENE_EXPRESSION_TAB,
+        active: activeTab == GENE_EXPRESSION_TAB,
+        isVisible,
+        testid: "sjppoldscTabGE",
+        callback: () => this.setActiveTab(GENE_EXPRESSION_TAB)
+      });
+    this.tabs.push({
+      label: "Summary",
+      id: VIOLIN_TAB,
+      active: activeTab == VIOLIN_TAB,
+      isVisible,
+      testid: "sjppoldscTabSummary",
+      callback: () => this.setActiveTab(VIOLIN_TAB)
+    });
+    if (state.termdbConfig.queries.singleCell.images)
+      this.tabs.push({
+        label: state.termdbConfig.queries.singleCell.images.label,
+        id: IMAGES_TAB,
+        active: activeTab == IMAGES_TAB,
+        isVisible,
+        callback: () => this.setActiveTab(IMAGES_TAB)
+      });
+    const q = state.termdbConfig.queries;
+    this.opts.holder.style("position", "relative").style("min-height", "200px");
+    this.mainDivId = `${this.id}-sandbox`;
+    const errorDiv = this.opts.holder.append("div");
+    const mainDiv = this.opts.holder.insert("div").style("display", "inline-block").style("vertical-align", "top").style("white-space", "nowrap").attr("id", this.mainDivId);
+    const leftDiv = mainDiv.append("div").style("display", "inline-block").style("vertical-align", "top");
+    const controlsDiv = leftDiv.append("div").attr("class", "pp-termdb-plot-controls");
+    const contentDiv = mainDiv.append("div").style("display", "inline-block").style("vertical-align", "top").style("padding-left", "10px").style("min-height", "300px");
+    this.tabsComp = await new Tabs({
+      holder: contentDiv,
+      tabsPosition: "horizontal",
+      tabs: this.tabs
+    });
+    this.tabsComp.main();
+    const headerDiv = contentDiv.append("div").style("display", "inline-block").style("padding-bottom", "10px");
+    const samplesPromptDiv = headerDiv.append("div").style("display", "none").text("Select a sample below to see its data:").style("padding", "0px 40px 10px 10px");
+    const showDiv = headerDiv.append("div").style("padding-bottom", "10px").style("display", "none");
+    if (state.config.plots.length > 1) this.renderShowPlots(showDiv, state);
+    const geDiv = headerDiv.append("div").style("display", "none");
+    const violinSelectDiv = headerDiv.append("div").style("padding-left", "30px").style("display", "none");
+    const deDiv = headerDiv.append("div").style("display", "none");
+    const sampleDiv = headerDiv.append("div").style("display", "inline-block").html(await this.getSampleDetails(state)).style("padding", "10px 20px");
+    const plotsDivParent = contentDiv.append("div");
+    const samplesTableDiv = plotsDivParent.append("div").style("padding-bottom", "10px");
+    const plotsDiv = plotsDivParent.append("div").style("display", "flex").style("flex-wrap", "wrap").style("justify-content", "flex-start");
+    const loadingDiv = this.opts.holder.append("div").style("position", "absolute").style("top", "0").style("left", "0").style("width", "100%").style("height", "100%").style("background-color", "rgba(255, 255, 255, 0.95)").style("text-align", "center");
+    this.dom = {
+      sampleDiv,
+      samplesPromptDiv,
+      samplesTableDiv,
+      showDiv,
+      mainDiv,
+      loadingDiv,
+      tip: new Menu({ padding: "0px" }),
+      tooltip: new Menu({ padding: "2px", offsetX: 10, offsetY: 0 }),
+      controlsHolder: controlsDiv,
+      geDiv,
+      violinSelectDiv,
+      deDiv,
+      plotsDiv,
+      plotsDivParent,
+      errorDiv
+    };
+    if (q.singleCell?.geneExpression) this.renderGeneExpressionControls(geDiv, state);
+    const offsetX = 80;
+    this.axisOffset = { x: offsetX, y: 30 };
+    if (q.singleCell?.DEgenes) {
+      const label = this.dom.deDiv.append("label").html("View differentially expressed genes for cells of a cluster versus rest of the cells:&nbsp;");
+      this.dom.deselect = label.append("select").attr("data-testid", "sjppoldscDEselect").on("change", (e) => {
+        const display = this.dom.deselect.node().value ? "inline-block" : "none";
+        const cluster = this.dom.deselect.node().value.split(" ")[1];
+        this.genes = null;
+        this.app.dispatch({ type: "plot_edit", id: this.id, config: { cluster, gene: null } });
+      });
+      this.dom.deselect.append("option").text("");
+    }
+    this.settings = {};
+    document.addEventListener("scroll", (event) => this?.tip?.hide());
+    select_default(".sjpp-output-sandbox-content").on("scroll", (event) => this.tip.hide());
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) {
+      throw `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`;
+    }
+    return {
+      config,
+      dslabel: appState.vocab.dslabel,
+      genome: appState.vocab.genome,
+      termdbConfig: appState.termdbConfig,
+      termfilter: appState.termfilter,
+      vocab: appState.vocab
+    };
+  }
+  // called in relevant dispatch when reactsTo==true
+  // or current.state != replcament.state
+  async main() {
+    this.dom.mainDiv.style("display", "block");
+    this.dom.loadingDiv.selectAll("*").remove();
+    this.dom.loadingDiv.style("display", "").append("div").style("position", "relative").style("top", "50%").text("Loading...");
+    try {
+      const body = {
+        genome: this.state.genome,
+        dslabel: this.state.dslabel,
+        filter0: this.state.termfilter.filter0 || null
+      };
+      const result = await dofetch3("termdb/singlecellSamples", { body });
+      if (result.error) throw result.error;
+      this.samples = result.samples;
+      if (this.samples.length == 0) {
+        this.showNoMatchingDataMessage();
+        return;
+      }
+      this.isValidSample = this.state.config.sample && this.samples.find((i) => i.sample == this.state.config.sample);
+      this.colorByGene = this.state.config.activeTab == GENE_EXPRESSION_TAB || this.state.config.activeTab == DIFFERENTIAL_EXPRESSION_TAB;
+      this.config = structuredClone(this.state.config);
+      copyMerge(this.settings, this.config.settings.singleCellPlot);
+      this.plotColorByDivs = [];
+      this.plots = [];
+      this.legendRendered = false;
+      this.dom.plotsDiv.selectAll("*").remove();
+      await this.getData();
+      await this.setControls();
+      this.dom.sampleDiv.html(await this.getSampleDetails(this.state));
+      this.showActiveTab();
+      this.dom.loadingDiv.style("display", "none");
+    } catch (e) {
+      this.app.tip.hide();
+      this.dom.loadingDiv.style("display", "none");
+      if (e.stack) console.log(e.stack);
+      sayerror(this.dom.errorDiv, e);
+    }
+  }
+  async getData() {
+    if (!this.state.config.sample) return;
+    const plots = [];
+    for (const plot of this.config.plots) {
+      if (plot.selected) plots.push(plot.name);
+    }
+    const body = {
+      genome: this.state.genome,
+      dslabel: this.state.dslabel,
+      plots,
+      filter0: this.state.termfilter.filter0
+    };
+    body.sample = {
+      eID: this.state.config.experimentID,
+      sID: this.state.config.sample
+    };
+    if (this.state.config.gene && (this.state.config.activeTab == GENE_EXPRESSION_TAB || this.state.config.activeTab == DIFFERENTIAL_EXPRESSION_TAB))
+      body.gene = this.state.config.gene;
+    else body.colorBy = this.state.config.colorBy;
+    const result = await dofetch3("termdb/singlecellData", { body });
+    if (result.error) throw result.error;
+    this.refName = result.refName;
+    this.data = result;
+  }
+  async getSampleDetails(state) {
+    if (!this.samples) return "";
+    const sampleIdx = this.samples.findIndex((i) => i.sample == state.config.sample);
+    if (sampleIdx == -1) return "";
+    const extraText = [];
+    if (state.config.experimentID) {
+      extraText.push(
+        '<span style="margin-left:15px;font-size:.7em">SAMPLE</span> ' + this.samples[sampleIdx].experiments?.find((i) => i.experimentID == state.config.experimentID)?.sampleName
+      );
+    } else if (this.samples[sampleIdx].experiments) {
+      extraText.push(
+        '<span style="margin-left:15px;font-size:.7em">SAMPLE</span> ' + this.samples[sampleIdx].experiments[0].sampleName
+      );
+    }
+    if (state.termdbConfig.queries.singleCell.samples.extraSampleTabLabel) {
+      const termname = (await this.app.vocabApi.getterm(state.termdbConfig.queries.singleCell.samples.extraSampleTabLabel)).name;
+      const sampleValue = this.samples[sampleIdx][state.termdbConfig.queries.singleCell.samples.extraSampleTabLabel];
+      extraText.push(`<span style="margin-left:15px;font-size:.7em">${termname.toUpperCase()}</span> ${sampleValue}`);
+    }
+    return `<span style="font-size:.7em">${state.config.settings.singleCellPlot.uiLabels.sample.toUpperCase()}</span>
+			${this.samples[sampleIdx].sample}
+			${extraText.join("")}`;
+  }
+  async getSampleFilename(state) {
+    const sampleIdx = this.samples.findIndex((i) => i.sample == state.config.sample);
+    if (sampleIdx == -1) return "";
+    const extraText = [];
+    if (state.config.experimentID) {
+      extraText.push(
+        "SAMPLE_" + this.samples[sampleIdx].experiments?.find((i) => i.experimentID == state.config.experimentID)?.sampleName
+      );
+    } else if (this.samples[sampleIdx].experiments) {
+      extraText.push("SAMPLE_" + this.samples[sampleIdx].experiments[0].sampleName);
+    }
+    if (state.termdbConfig.queries.singleCell.samples.extraSampleTabLabel) {
+      const termname = (await this.app.vocabApi.getterm(state.termdbConfig.queries.singleCell.samples.extraSampleTabLabel)).name;
+      const sampleValue = this.samples[sampleIdx][state.termdbConfig.queries.singleCell.samples.extraSampleTabLabel];
+      extraText.push(`${termname.toUpperCase()}_${sampleValue}`);
+    }
+    if (this.state.config.activeTab == GENE_EXPRESSION_TAB) extraText.push(this.state.config.gene);
+    if (this.state.config.activeTab == DIFFERENTIAL_EXPRESSION_TAB) extraText.push(this.state.config.cluster);
+    if (this.state.config.activeTab == VIOLIN_TAB && this.dom.expressionBySelect)
+      extraText.push(this.dom.expressionBySelect.node().value);
+    const filename = `${state.config.settings.singleCellPlot.uiLabels.sample.toUpperCase()}_
+			${this.samples[sampleIdx].sample}_
+			${extraText.join("_")}`;
+    return filename.replace(/[^0-9a-z_]/gi, "");
+  }
+  renderShowPlots(showDiv, state) {
+    showDiv.append("label").text("Plots:").style("font-size", "1.1em");
+    for (const plot of state.config.plots) {
+      const id = plot.name.replace(/\s+/g, "");
+      const key = `show${id}`;
+      showDiv.append("input").attr("type", "checkbox").attr("id", key).property("checked", plot.selected).on("change", (e) => {
+        let plots = structuredClone(this.state.config.plots);
+        plots.find((p) => p.name == plot.name).selected = e.target.checked;
+        const selectedCount = plots.filter((p) => p.selected).length;
+        const defaultSettings = getDefaultSingleCellSettings();
+        let settings = { svgw: defaultSettings.svgw, svgh: defaultSettings.svgh };
+        if (selectedCount > 1) {
+          const width = 800;
+          const height = 800;
+          settings.svgh = width / selectedCount;
+          settings.svgw = height / selectedCount;
+          settings.contourBandwidth = 10;
+        }
+        this.app.dispatch({
+          type: "plot_edit",
+          id: this.id,
+          config: { plots, settings: { singleCellPlot: settings } }
+        });
+      });
+      showDiv.append("label").attr("for", key).text(plot.name);
+    }
+  }
+  renderGeneExpressionControls(geDiv, state) {
+    this.dom.searchboxDiv = geDiv.append("div").style("display", "inline-block");
+    this.dom.geneSearch = addGeneSearchbox({
+      tip: new Menu({ padding: "0px" }),
+      genome: this.app.opts.genome,
+      row: this.dom.searchboxDiv,
+      searchOnly: "gene",
+      placeholder: state.config.gene || "Gene",
+      callback: () => this.colorByGeneExp(),
+      emptyInputCallback: () => this.colorByGeneExp(),
+      hideHelp: true,
+      focusOff: true
+    });
+    this.dom.searchbox = this.dom.geneSearch?.searchbox;
+  }
+  async setActiveTab(tab) {
+    if (!this.state) return;
+    await this.app.dispatch({ type: "plot_edit", id: this.id, config: { activeTab: tab } });
+  }
+  async showActiveTab() {
+    let id = this.state.config.activeTab || this.tabs[0].id;
+    if (!this.isValidSample && id != SAMPLES_TAB) {
+      id = SAMPLES_TAB;
+      this.config.activeTab = SAMPLES_TAB;
+    }
+    const index = this.tabs.findIndex((t) => t.id == id);
+    const tab = this.tabs[index];
+    tab.active = true;
+    this.tabsComp.update(index);
+    this.dom.deDiv.style("display", "none");
+    this.dom.geDiv.style("display", "none");
+    this.dom.showDiv.style("display", "none");
+    this.dom.violinSelectDiv.style("display", "none");
+    this.dom.samplesTableDiv.style("display", "none");
+    this.dom.samplesPromptDiv.style("display", "none");
+    this.dom.controlsHolder.style("display", "none");
+    switch (id) {
+      case SAMPLES_TAB:
+        this.dom.samplesTableDiv.style("display", "block");
+        this.dom.samplesPromptDiv.style("display", "inline-block");
+        this.renderSamplesTable();
+        break;
+      case PLOTS_TAB:
+        await this.renderPlots();
+        this.dom.showDiv.style("display", "inline-block");
+        this.dom.controlsHolder.style("display", "block");
+        break;
+      case GENE_EXPRESSION_TAB:
+        this.dom.controlsHolder.style("display", "block");
+        await this.renderPlots();
+        this.dom.geDiv.style("display", "inline-block");
+        this.dom.searchbox.node().focus();
+        if (this.state.config.gene) this.dom.searchbox.node().value = this.state.config.gene;
+        break;
+      case DIFFERENTIAL_EXPRESSION_TAB:
+        this.dom.deDiv.style("display", "inline-block");
+        this.renderDETable();
+        break;
+      case IMAGES_TAB:
+        this.renderImage();
+        break;
+      case VIOLIN_TAB:
+        this.dom.geDiv.style("display", "inline-block");
+        this.renderViolinTab();
+        this.dom.searchbox.node().focus();
+        break;
+    }
+  }
+  addZoomIcons(iconsDiv, plot) {
+    const zoomInDiv = iconsDiv.append("div").style("margin", "20px 0px");
+    icons["zoomIn"](zoomInDiv, {
+      handler: () => {
+        plot.particles.position.z += 0.1;
+      },
+      title: "Zoom in. You can also zoom in moving the mouse wheel with the Ctrl key pressed."
+    });
+    const zoomOutDiv = iconsDiv.append("div").style("margin", "20px 0px");
+    icons["zoomOut"](zoomOutDiv, {
+      handler: () => {
+        plot.particles.position.z -= 0.1;
+      },
+      title: "Zoom out. You can also zoom out moving the mouse wheel with the Ctrl key pressed."
+    });
+    const identityDiv = iconsDiv.append("div").style("margin", "20px 0px");
+    icons["restart"](identityDiv, {
+      handler: () => {
+        plot.particles.position.z = 0;
+        plot.particles.position.x = 0;
+        plot.particles.position.y = 0;
+      },
+      title: "Reset plot to defaults"
+    });
+  }
+  async renderImage() {
+    const sample = this.state.config.sample || this.samples[0].sample;
+    const i = this.state.termdbConfig.queries.singleCell.images;
+    const result = await dofetch3(`img?file=${i.folder}${i.folder.endsWith("/") ? "" : "/"}${sample}/${i.fileName}`);
+    if (!result.src || result.error) {
+      sayerror(this.dom.plotsDiv, "Cannot load image: " + (result.error || ""));
+      return;
+    }
+    this.dom.plotsDiv.append("img").attr("src", result.src).attr("height", 400);
+  }
+  async renderViolinTab() {
+    if (!this.state.config.gene) return;
+    const selectDiv = this.dom.violinSelectDiv.style("display", "inline-block");
+    selectDiv.selectAll("*").remove();
+    const plotDiv = this.dom.plotsDiv.append("div").style("width", "100%");
+    const options = /* @__PURE__ */ new Set();
+    let selectedOption = "";
+    for (const plot of this.data.plots) {
+      const colorBy = this.state.config.colorBy?.[plot.name] || plot.colorColumns[0];
+      if (!selectedOption) selectedOption = colorBy;
+      for (const c of plot.colorColumns) options.add(c);
+    }
+    if (options.size > 1) {
+      selectDiv.append("label").text("Show expression by: ");
+      const expressionBySelect = selectDiv.append("select").on("change", async (e) => {
+        const expressionBy = e.target.value;
+        violinDiv.selectAll("*").remove();
+        this.renderViolin(expressionBy, violinDiv);
+      });
+      this.dom.expressionBySelect = expressionBySelect;
+      expressionBySelect.selectAll("option").data(Array.from(options)).enter().append("option").attr("value", (d) => d).attr("selected", (d) => d == selectedOption ? d : null).html((d) => d);
+    } else selectDiv.append("label").text(`Expression by ${selectedOption}:`);
+    const violinDiv = this.dom.plotsDiv.append("div");
+    this.renderViolin(selectedOption, violinDiv);
+  }
+  async renderViolin(colorBy, violinDiv) {
+    const gene = this.state.config.gene;
+    const plot = this.data.plots.find((p) => p.colorColumns.find((c) => c == colorBy));
+    this.initPlot(plot);
+    const values = {};
+    for (const cluster of plot.clusters) {
+      values[cluster] = { key: cluster, value: cluster };
+    }
+    const downloadFilename = await this.getSampleFilename(this.state) + "_VIOLIN";
+    const opts = {
+      holder: violinDiv,
+      state: {
+        vocab: this.state.vocab,
+        plots: [
+          {
+            chartType: "violin",
+            term: {
+              $id: await digestMessage(`${gene}-${this.state.config.sample}-${this.state.config.experimentID}`),
+              term: {
+                type: SINGLECELL_GENE_EXPRESSION,
+                id: gene,
+                gene,
+                name: gene,
+                sample: {
+                  sID: this.state.config.sample,
+                  eID: this.state.config.experimentID
+                }
+              },
+              q: { mode: "continuous" }
+            },
+            term2: {
+              $id: await digestMessage(`${colorBy}-${this.state.config.sample}-${this.state.config.experimentID}`),
+              term: {
+                type: SINGLECELL_CELLTYPE,
+                id: colorBy,
+                name: colorBy,
+                sample: {
+                  sID: this.state.config.sample,
+                  eID: this.state.config.experimentID
+                },
+                //plot and color by are used to read the sample categories from the plot
+                plot: plot.name,
+                colorBy,
+                values
+              }
+            },
+            downloadFilename
+          }
+        ]
+      }
+    };
+    const plotImport = await import("./plot.app-JNEOGNVW.js");
+    const plotAppApi = await plotImport.appInit(opts);
+  }
+  async renderGSEA(holder) {
+    const gsea_params = {
+      genes: this.genes,
+      fold_change: this.fold_changes,
+      genome: this.app.vocabApi.opts.state.vocab.genome
+    };
+    const downloadFilename = await this.getSampleFilename(this.state) + "_GSEA";
+    const config = {
+      chartType: "gsea",
+      gsea_params,
+      // if getPlotHolder is defined, use this.mainDivId as insertBefore,
+      // so that in GDC frontend framework, plots that are launched from scRNAseq
+      // will be inserted before it. TODO: may insert after the scRNAseq plot instead???
+      insertBefore: this.app.opts?.app?.getPlotHolder ? this.mainDivId : this.id,
+      downloadFilename
+    };
+    const opts = {
+      genome: this.app.opts.genome,
+      holder,
+      state: {
+        vocab: this.state.vocab,
+        plots: [config]
+      }
+    };
+    const plotImport = await import("./plot.app-JNEOGNVW.js");
+    const plotAppApi = await plotImport.appInit(opts);
+  }
+  async renderDETable() {
+    this.dom.deselect.selectAll("*").remove();
+    this.dom.deselect.append("option").text("");
+    const plot = this.data.plots[0];
+    this.initPlot(plot);
+    for (const cluster of plot.clusters) this.dom.deselect.append("option").text(cluster);
+    const categoryName = this.state.config.cluster;
+    this.dom.deselect.node().value = categoryName != void 0 ? `Cluster ${categoryName}` : "";
+    if (!categoryName) return;
+    const columnName = this.state.termdbConfig.queries.singleCell.DEgenes.termId;
+    const sample = this.state.config.experimentID || this.state.config.sample || this.samples?.[0]?.experiments[0]?.experimentID;
+    const DEContentDiv = this.dom.plotsDiv.append("div").style("width", "100%");
+    const tabsDiv = DEContentDiv.append("div");
+    const tableDiv = DEContentDiv.append("div");
+    const GSEADiv = DEContentDiv.append("div").style("display", "none");
+    let result;
+    try {
+      const args = { genome: this.state.genome, dslabel: this.state.dslabel, categoryName, sample, columnName };
+      result = await dofetch3("termdb/singlecellDEgenes", { body: args });
+      if (result.error) {
+        tableDiv.text(result.error);
+        return;
+      }
+      if (!result.data || !result?.data?.length) {
+        tableDiv.text("No differentially expressed genes found.");
+        return;
+      }
+    } catch (e) {
+      if (e.stack) console.error(e.stack);
+      else throw `Error fetching DE genes: ${e.message || e} [singleCellPlot.renderDETable()]`;
+      return;
+    }
+    const tabs = [
+      {
+        label: "Differentially Expressed Genes",
+        id: DE_GENES_TAB,
+        active: true,
+        callback: () => showActiveDETab(DE_GENES_TAB)
+      }
+    ];
+    if (this.app.opts.genome.termdbs) {
+      tabs.push({
+        label: "Gene Set Enrichment Analysis (GSEA)",
+        id: DE_GSEA_TAB,
+        active: false,
+        callback: () => showActiveDETab(DE_GSEA_TAB)
+      });
+    }
+    function showActiveDETab(id) {
+      tableDiv.style("display", "none");
+      GSEADiv.style("display", "none");
+      if (id == DE_GENES_TAB) tableDiv.style("display", "block");
+      if (id == DE_GSEA_TAB) GSEADiv.style("display", "block");
+    }
+    if (tabs.length > 1) {
+      const deTabs = await new Tabs({
+        holder: tabsDiv,
+        tabsPosition: "horizontal",
+        tabs
+      });
+      deTabs.main();
+    }
+    tableDiv.append("div").style("padding-bottom", "10px").text("Select a gene to view its expression:");
+    const tableDivContent = tableDiv.append("div").style("padding-bottom", "10px");
+    const columns = [
+      { label: "Gene", width: "15vw" },
+      { label: "Log2FC", width: "12vw", barplot: {} },
+      { label: "Adjusted P-value", width: "12vw" }
+    ];
+    const rows = [];
+    this.genes = [];
+    this.fold_changes = [];
+    result.data.sort((a, b) => b.fold_change - a.fold_change);
+    const selectedRows = [];
+    let i = 0;
+    for (const gene of result.data) {
+      const row = [
+        { value: gene.gene_name },
+        { value: gene.fold_change },
+        { value: roundValueAuto(gene.adjusted_p_value) }
+      ];
+      rows.push(row);
+      this.genes.push(gene.gene_name);
+      this.fold_changes.push(gene.fold_change);
+      if (gene.gene_name == this.state.config.gene) selectedRows.push(i);
+      i++;
+    }
+    this.DETable = { rows, columns };
+    const downloadFilename = `${await this.getSampleFilename(this.state)}_DE_GENES.tsv`;
+    renderTable({
+      rows,
+      columns,
+      maxHeight: "50vh",
+      div: tableDivContent,
+      singleMode: true,
+      noButtonCallback: (i2, node) => {
+        const gene = result.data[i2].gene_name;
+        this.app.dispatch({
+          type: "plot_edit",
+          id: this.id,
+          config: {
+            gene,
+            sample: this.state.config.sample || this.samples?.[0]?.sample,
+            experimentID: this.state.config.experimentID || this.samples?.[0].experiments?.[0]?.experimentID,
+            activeTab: GENE_EXPRESSION_TAB
+          }
+        });
+      },
+      selectedRows,
+      resize: true,
+      dataTestId: "sjppoldscDEtable",
+      download: { fileName: downloadFilename }
+    });
+    this.renderGSEA(GSEADiv);
+  }
+  colorByGeneExp() {
+    const gene = this.dom.searchbox.node().value;
+    for (const div of this.plotColorByDivs) div.style("display", "none");
+    this.app.dispatch({
+      type: "plot_edit",
+      id: this.id,
+      config: {
+        gene,
+        sample: this.state.config.sample || this.samples?.[0]?.sample,
+        experimentID: this.state.config.experimentID || this.samples?.[0].experiments?.[0]?.experimentID
+      }
+    });
+  }
+  async setControls() {
+    this.dom.controlsHolder.selectAll("*").remove();
+    const inputs = [
+      {
+        label: "Chart width",
+        title: "Chart width",
+        type: "number",
+        chartType: "singleCellPlot",
+        settingsKey: "svgw",
+        min: 300,
+        max: 1e3
+      },
+      {
+        label: "Chart height",
+        title: "Chart height",
+        type: "number",
+        chartType: "singleCellPlot",
+        settingsKey: "svgh",
+        min: 300,
+        max: 1e3
+      },
+      {
+        label: "Dot size",
+        type: "number",
+        chartType: "singleCellPlot",
+        settingsKey: "sampleSizeThree",
+        title: "Dot size",
+        min: 1e-3,
+        max: 0.1,
+        step: 1e-3
+      },
+      {
+        label: "Dot opacity",
+        type: "number",
+        chartType: "singleCellPlot",
+        settingsKey: "opacity",
+        title: "Dot opacity",
+        min: 0.1,
+        max: 1,
+        step: 0.1
+      },
+      {
+        label: "Show grid",
+        boxLabel: "",
+        type: "checkbox",
+        chartType: "singleCellPlot",
+        settingsKey: "showGrid",
+        title: "Show grid"
+      }
+    ];
+    const enableContour = this.state.config.activeTab == GENE_EXPRESSION_TAB && this.state.config.gene;
+    if (enableContour)
+      inputs.push({
+        label: "Show contour map",
+        boxLabel: "",
+        type: "checkbox",
+        chartType: "singleCellPlot",
+        settingsKey: "showContour",
+        title: "Shows the density of point clouds. It uses gene expression to weight the points when calculating the density contours."
+      });
+    if (enableContour && this.settings.showContour)
+      inputs.push(
+        {
+          label: "Color contours",
+          boxLabel: "",
+          type: "checkbox",
+          chartType: "singleCellPlot",
+          settingsKey: "colorContours"
+        },
+        {
+          label: "Contour bandwidth",
+          type: "number",
+          chartType: "singleCellPlot",
+          settingsKey: "contourBandwidth",
+          title: "Reduce to increase resolution. ",
+          min: 5,
+          max: 50,
+          step: 5
+        },
+        {
+          label: "Contour thresholds",
+          type: "number",
+          chartType: "singleCellPlot",
+          settingsKey: "contourThresholds",
+          title: "Dot size",
+          min: 5,
+          max: 30,
+          step: 5
+        }
+      );
+    if ((this.state.config.activeTab == GENE_EXPRESSION_TAB || this.state.config.activeTab == DIFFERENTIAL_EXPRESSION_TAB) && this.state.config.gene)
+      inputs.unshift({
+        label: "Show unexpressed cells",
+        boxLabel: "",
+        type: "checkbox",
+        chartType: "singleCellPlot",
+        settingsKey: "showNoExpCells",
+        title: "Show cells not expressing the selected gene"
+      });
+    this.components = {
+      controls: await controlsInit({
+        app: this.app,
+        id: this.id,
+        holder: this.dom.controlsHolder,
+        inputs
+      })
+    };
+    this.components.controls.on("downloadClick.singleCellPlot", async () => {
+      if (!this.state) return;
+      const filename = await this.getSampleFilename(this.state);
+      if (this.state.config.activeTab == GENE_EXPRESSION_TAB || this.state.config.activeTab == PLOTS_TAB)
+        for (const plot of this.plots) this.downloadPlot(plot, filename);
+    });
+  }
+  downloadSCTable(name, table) {
+    downloadTable(table.rows, table.columns, name);
+  }
+  downloadPlot(plot, filename) {
+    downloadSingleSVG(plot.legendSVG, filename + "_LEGEND.svg", this.opts.holder.node());
+    const downloadImgName = plot.name;
+    const a = document.createElement("a");
+    document.body.appendChild(a);
+    const dataURL = plot.canvas.toDataURL();
+    a.addEventListener(
+      "click",
+      () => {
+        a.download = filename + "_" + downloadImgName + ".png";
+        a.href = dataURL;
+        document.body.removeChild(a);
+      },
+      false
+    );
+    a.click();
+  }
+  showNoMatchingDataMessage() {
+    this.dom.mainDiv.style("display", "none");
+    this.dom.loadingDiv.selectAll("*").remove();
+    this.dom.loadingDiv.style("display", "").append("div").style("font-size", "1.2em").html("No matching cohort data.");
+  }
+  renderPlots() {
+    const result = this.data;
+    if (result.nodata) return;
+    for (const plot of result.plots) {
+      if ((this.state.config.activeTab == DIFFERENTIAL_EXPRESSION_TAB || this.state.config.activeTab == GENE_EXPRESSION_TAB) && this.state.config.gene && !plot.expCells.length)
+        continue;
+      this.renderPlot(plot);
+    }
+    if (this.plots.length == 0) this.dom.plotsDiv.append("div").text("No data to plot");
+  }
+  renderPlot(plot) {
+    if (!plot.plotDiv) {
+      const plotDiv = this.dom.plotsDiv.append("div").style("display", "inline-block").style("vertical-align", "top");
+      const leftDiv = plotDiv.append("div").style("display", "inline-block").style("vertical-align", "top").style("padding-top", "30px");
+      plot.plotDiv = plotDiv.append("div").style("display", "inline-block");
+      this.addZoomIcons(leftDiv, plot);
+    }
+    const colorMap = {};
+    this.initPlot(plot);
+    const cat2Color = getColors(plot.clusters.length + 2);
+    for (const cluster of plot.clusters)
+      colorMap[cluster] = plot.colorMap?.[cluster] ? plot.colorMap[cluster] : cat2Color(cluster);
+    plot.colorMap = colorMap;
+    this.initAxes(plot);
+    plot.headerDiv = plot.plotDiv.append("div");
+    plot.headerDiv.append("label").text(plot.name).style("font-size", "1.2em").style("margin-right", "10px");
+    if (this.colorByGene && this.state.config.gene) {
+      if (!this.config.startColor[plot.name]) this.config.startColor[plot.name] = "#fffee0";
+      if (!this.config.stopColor[plot.name]) this.config.stopColor[plot.name] = "red";
+      const startColor = this.config.startColor[plot.name];
+      const stopColor = this.config.stopColor[plot.name];
+      let min, max2;
+      const expCells = plot.expCells;
+      const values = expCells.map((cell) => cell.geneExp).sort();
+      plot.colorValues = values;
+      if (values.length == 0) {
+        plot.colorGenerator = null;
+      } else {
+        switch (this.settings.colorScaleMode) {
+          // Fixed mode: Use user-defined min/max values
+          // This is useful when you want consistent scaling across different views
+          case "fixed":
+            min = this.settings.colorScaleMinFixed;
+            max2 = this.settings.colorScaleMaxFixed;
+            break;
+          case "percentile":
+            min = values[0];
+            const index = Math.floor(values.length * this.settings.colorScalePercentile / 100);
+            max2 = values[index];
+            break;
+          case "auto":
+          default:
+            min = values[0];
+            max2 = values[values.length - 1];
+            break;
+        }
+        plot.colorGenerator = linear().domain([min, max2]).range([startColor, stopColor]);
+      }
+    }
+    this.renderLargePlotThree(plot);
+    this.renderLegend(plot);
+  }
+  initPlot(plot) {
+    this.plots.push(plot);
+    const expCells = plot.expCells.sort((a, b) => a.geneExp - b.geneExp);
+    plot.cells = [...plot.noExpCells, ...expCells];
+    plot.id = plot.name.replace(/\s+/g, "");
+    let clusters = new Set(plot.cells.map((c) => c.category));
+    plot.clusters = Array.from(clusters).sort((a, b) => {
+      const num1 = parseInt(a.split(" ")[1]);
+      const num2 = parseInt(b.split(" ")[1]);
+      return num1 - num2;
+    });
+  }
+  getOpacity(d) {
+    if (this.config.hiddenClusters[d.category]) return 0;
+    if (this.colorByGene && this.state.config.gene && !d.geneExp)
+      return this.settings.showNoExpCells ? this.settings.opacity : 0;
+    return this.settings.opacity;
+  }
+  getColor(d, plot) {
+    let color = plot.colorMap[d.category];
+    if (this.colorByGene && this.state.config.gene) {
+      if (!d.geneExp) color = noExpColor;
+      else if (d.geneExp > plot.max) color = plot.colorGenerator(plot.max);
+      else color = plot.colorGenerator(d.geneExp);
+    }
+    return color;
+  }
+  handleZoom(e, plot) {
+    plot.mainG.attr("transform", e.transform);
+  }
+  initAxes(plot) {
+    if (!plot.cells.length) return;
+    const s0 = plot.cells[0];
+    const [xMin, xMax, yMin, yMax] = plot.cells.reduce(
+      (s, d) => [d.x < s[0] ? d.x : s[0], d.x > s[1] ? d.x : s[1], d.y < s[2] ? d.y : s[2], d.y > s[3] ? d.y : s[3]],
+      [s0.x, s0.x, s0.y, s0.y]
+    );
+    plot.xAxisScale = linear().domain([xMin, xMax]).range([-1, 1]);
+    plot.yAxisScale = linear().domain([yMin, yMax]).range([-1, 1]);
+  }
+  renderLegend(plot) {
+    const colorMap = plot.colorMap;
+    let legendSVG = plot.legendSVG;
+    const clustersHeight = 20 * Object.keys(colorMap).length + 50;
+    const height = Math.max(this.settings.svgh, clustersHeight);
+    if (!plot.legendSVG) {
+      const activeTab = this.tabs.find((tab) => tab.active);
+      if (activeTab.id == PLOTS_TAB) {
+        const app = this.app;
+        if (plot.colorColumns.length > 1) {
+          const plotColorByDiv = plot.headerDiv.append("div").style("display", "inline-block").style("padding-bottom", "20px");
+          plotColorByDiv.append("label").text("Color by:").style("margin-right", "5px");
+          const colorBySelect = plotColorByDiv.append("select");
+          this.plotColorByDivs.push(plotColorByDiv);
+          colorBySelect.selectAll("option").data(plot.colorColumns).enter().append("option").attr("value", (d) => d).property("selected", (d) => d == this.state.config.colorBy?.[plot.name]).html((d) => d);
+          colorBySelect.on("change", () => {
+            const colorBy = colorBySelect.node().value;
+            app.dispatch({
+              type: "plot_edit",
+              id: this.id,
+              config: { colorBy: { [plot.name]: colorBy } }
+            });
+          });
+        }
+      }
+      legendSVG = plot.plotDiv.append("svg").attr("width", 250).attr("height", height).style("display", "inline-block").style("vertical-align", "top").style("font-size", "0.9em");
+      plot.legendSVG = legendSVG;
+    }
+    legendSVG.selectAll("*").remove();
+    this.legendRendered = true;
+    if ((this.state.config.activeTab == GENE_EXPRESSION_TAB || this.state.config.activeTab == DIFFERENTIAL_EXPRESSION_TAB) && this.state.config.gene) {
+      this.renderColorGradient(plot);
+      return;
+    }
+    let x = 20;
+    plot.legendSVG.append("text").attr("transform", `translate(${x}, ${25})`).style("font-weight", "bold").text(`${plot.colorBy}`);
+    let step = 25;
+    if (height < 500) {
+      plot.legendSVG.style("font-size", "0.8em");
+      step = 20;
+    }
+    let y = 50;
+    const configPlot = this.state.config.plots.find((p) => p.name == plot.name);
+    const aliases = configPlot.colorColumns.find((c) => c.name == plot.colorBy)?.aliases;
+    for (const cluster in colorMap) {
+      const clusterCells = plot.cells.filter((item) => item.category == cluster);
+      const hidden = this.config.hiddenClusters?.[cluster];
+      const n = clusterCells.length;
+      const color = colorMap[cluster];
+      const itemG = plot.legendSVG.append("g").attr("transform", (c) => `translate(${x}, ${y})`);
+      itemG.append("circle").attr("r", 5).attr("fill", color);
+      itemG.append("g").attr("transform", `translate(15, 5)`).append("text").text(
+        `${cluster == "ref" ? this.state.termdbConfig.queries.singleCell.data.refName : cluster == "query" ? this.state.config.sample || this.samples[0].sample : aliases ? aliases[cluster] : cluster} n=${n}`
+      ).style("text-decoration", hidden ? "line-through" : "none").on("click", (e) => this.showLegendItemMenu(e, cluster, plot));
+      y += step;
+    }
+  }
+  hideCategory(key, hidden) {
+    this.app.dispatch({
+      type: "plot_edit",
+      id: this.id,
+      config: { hiddenClusters: { [key]: hidden } }
+    });
+  }
+  showLegendItemMenu(e, key, plot) {
+    let hiddenCount = 0;
+    for (const cluster in this.state.config.hiddenClusters) if (this.state.config.hiddenClusters[cluster]) hiddenCount++;
+    const hidden = this.state.config.hiddenClusters?.[key];
+    if (hidden && hiddenCount == 1) {
+      this.hideCategory(key, false, plot.legendSVG);
+      return;
+    }
+    const menu = this.tip.clear();
+    const div = menu.d.append("div");
+    div.append("div").attr("class", "sja_menuoption sja_sharp_border").text(hidden ? "Show" : "Hide").on("click", () => {
+      this.hideCategory(key, !hidden, plot.legendSVG);
+      menu.hide();
+    });
+    div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show only").on("click", () => {
+      for (const cluster in plot.colorMap) if (key != cluster) this.hideCategory(cluster, true, plot.legendSVG);
+      this.hideCategory(key, false, plot.legendSVG);
+      menu.hide();
+    });
+    if (hiddenCount > 1)
+      div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show all").on("click", () => {
+        menu.hide();
+        for (const mapKey in plot.colorMap) this.hideCategory(mapKey, false, plot.legendSVG);
+      });
+    menu.showunder(e.target);
+  }
+  renderColorGradient(plot) {
+    if (plot.cells.length == 0 || !plot.colorGenerator) return;
+    const colors = [this.config.startColor[plot.name], this.config.stopColor[plot.name]];
+    const gene = this.state.config.gene;
+    let offsetY = 20;
+    const barwidth = 100;
+    plot.legendSVG.append("g").attr("transform", `translate(${20}, ${offsetY})`).append("text").text(`${gene} expression`);
+    const legendG = plot.legendSVG.append("g").attr("transform", `translate(20, ${2 * offsetY})`);
+    const colorScale = new ColorScale({
+      holder: legendG,
+      barwidth,
+      barheight: 20,
+      colors,
+      domain: plot.colorGenerator.domain(),
+      position: "0, 20",
+      ticks: 4,
+      tickSize: 5,
+      topTicks: true,
+      setColorsCallback: (val, idx) => {
+        this.changeGradientColor(plot, val, idx);
+      },
+      numericInputs: {
+        cutoffMode: this.settings.colorScaleMode,
+        defaultPercentile: this.settings.colorScalePercentile,
+        callback: (obj) => {
+          let min, max2;
+          const colorValues = plot.colorValues;
+          if (obj.cutoffMode === "auto") {
+            min = colorValues[0];
+            max2 = colorValues[colorValues.length - 1];
+          } else if (obj.cutoffMode === "fixed") {
+            min = obj.min;
+            max2 = obj.max;
+          } else if (obj.cutoffMode === "percentile") {
+            min = colorValues[0];
+            const index = Math.floor(colorValues.length * obj.percentile / 100);
+            max2 = colorValues[index];
+          }
+          this.app.dispatch({
+            type: "plot_edit",
+            id: this.id,
+            config: {
+              settings: {
+                singleCellPlot: {
+                  colorScaleMode: obj.cutoffMode,
+                  colorScaleMinFixed: obj.cutoffMode === "fixed" ? min : null,
+                  colorScaleMaxFixed: obj.cutoffMode === "fixed" ? max2 : null,
+                  colorScalePercentile: obj.cutoffMode === "percentile" ? obj.percentile : this.settings.colorScalePercentile
+                }
+              }
+            }
+          });
+        }
+      }
+    });
+    colorScale.updateScale();
+  }
+  changeGradientColor = function(plot, newColor, idx) {
+    const colorKey = idx == 0 ? "startColor" : "stopColor";
+    this.config[colorKey][plot.name] = newColor;
+    this.app.dispatch({
+      type: "plot_edit",
+      id: this.id,
+      config: this.config
+    });
+  };
+  showTooltip(event, plot) {
+    if (this.onClick && event.type == "click") {
+      this.onClick = false;
+      this.tip.hide();
+      return;
+    }
+    if (event.target.tagName == "circle") {
+      this.onClick = event.type == "click";
+      const d = event.target.__data__;
+      const menu = this.tip.clear();
+      const table = menu.d.append("table");
+      let tr = table.append("tr");
+      tr.append("td").style("color", "#aaa").text(plot.colorBy);
+      let td = tr.append("td");
+      td.text(d.category);
+      if ("geneExp" in d) {
+        tr = table.append("tr");
+        tr.append("td").style("color", "#aaa").text("Gene expression");
+        td = tr.append("td");
+        const svg = td.append("svg").attr("width", 150).attr("height", 20);
+        const x = 10;
+        const y = 12;
+        const g = svg.append("g").attr("transform", `translate(${x}, ${y})`);
+        g.append("circle").attr("fill", this.getColor(d, plot)).attr("r", 4);
+        svg.append("g").attr("transform", `translate(${x + 15}, ${y + 4})`).append("text").text(roundValueAuto(d.geneExp));
+      }
+      menu.show(event.clientX, event.clientY, true, true);
+    } else this.onMouseOut(event);
+  }
+  onMouseOut(event) {
+    this.tip.hide();
+  }
+  async renderSamplesTable() {
+    const state = this.state;
+    const div = this.dom.samplesTableDiv;
+    div.selectAll("*").remove();
+    const [rows, columns] = await this.getTableData(state);
+    if (columns.length > 5) div.style("font-size", "0.9em");
+    const selectedRows = [];
+    const i = this.samples.findIndex((i2) => i2.sample == state.config.sample);
+    if (i != -1) selectedRows.push(i);
+    renderTable({
+      rows,
+      columns,
+      resize: true,
+      singleMode: true,
+      div,
+      maxWidth: columns.length > 3 ? "98vw" : "40vw",
+      maxHeight: "50vh",
+      dataTestId: "sjppoldscSampleTable",
+      noButtonCallback: (index) => {
+        const sample = rows[index][0].value;
+        const hiddenClusters = {};
+        for (const cluster in this.config.hiddenClusters) hiddenClusters[cluster] = false;
+        const settings = {
+          colorScaleMode: "auto",
+          colorScaleMinFixed: null,
+          colorScaleMaxFixed: null,
+          colorScalePercentile: 95,
+          showNoExpCells: false,
+          showContour: false,
+          colorContours: false,
+          contourBandwidth: 15,
+          contourThresholds: 10
+        };
+        const config = {
+          chartType: "singleCellPlot",
+          sample,
+          // track sample name to identify it in this.samples[]
+          activeTab: PLOTS_TAB,
+          // on selecting a sample from table, auto switch to plots to directly show this sample's plots, to save user a click
+          cluster: null,
+          // reset cluster
+          hiddenClusters,
+          // reset hidden clusters
+          settings: { singleCellPlot: settings }
+        };
+        this.genes = null;
+        if (rows[index][0].__experimentID) {
+          config.experimentID = rows[index][0].__experimentID;
+        }
+        this.app.dispatch({ type: "plot_edit", id: this.id, config });
+      },
+      selectedRows,
+      striped: true,
+      header: { style: { "text-transform": "capitalize" } }
+      // to show header in title case; if it results in a conflict (e.g. a sample name showing in 1st tab has to be lower case), then use sampleColumns[].columnHeader as override of term name
+    });
+  }
+  async getTableData(state) {
+    const { uiLabels } = state.config.settings.singleCellPlot;
+    const s = state.termdbConfig.queries?.singleCell?.samples || {};
+    const samples = this.samples;
+    const rows = [];
+    const hasExperiments = samples.some((i) => i.experiments);
+    const columns = [{ label: uiLabels.Sample }];
+    if (hasExperiments) columns.push({ label: "Sample" });
+    for (const c of s.sampleColumns || []) {
+      let label = c.termid;
+      try {
+        label = (await this.app.vocabApi.getterm(c.termid)).name;
+      } catch (e) {
+      }
+      columns.push({ label, width: "14vw" });
+    }
+    if (hasExperiments) columns.push({ label: "Experiment" });
+    for (const sample of samples) {
+      if (hasExperiments)
+        for (const exp of sample.experiments) {
+          const row = [{ value: sample.sample, __experimentID: exp.experimentID }];
+          row.push({ value: exp.sampleName });
+          for (const c of s.sampleColumns || []) {
+            row.push({ value: sample[c.termid] });
+          }
+          const urlTemp = this.state.termdbConfig?.urlTemplates?.scrnaExperimentId;
+          if (urlTemp) row.push({ value: exp.experimentID, url: `${urlTemp.base}${exp.experimentID}` });
+          else row.push({ value: exp.experimentID });
+          rows.push(row);
+        }
+      else {
+        const row = [{ value: sample.sample }];
+        for (const c of s.sampleColumns || []) {
+          row.push({ value: sample[c.termid] });
+        }
+        rows.push(row);
+      }
+    }
+    return [rows, columns];
+  }
+  renderLargePlotThree = async function(plot) {
+    if (!plot.canvas) {
+      const canvas = plot.plotDiv.append("canvas").attr("data-testid", "sjppoldsccanvas").style("display", "inline-block").style("vertical-align", "top");
+      plot.canvas = canvas.node();
+      plot.canvas.width = this.settings.svgw;
+      plot.canvas.height = this.settings.svgh;
+      plot.renderer = new WebGLRenderer({ antialias: true, canvas: plot.canvas, preserveDrawingBuffer: true });
+    } else plot.renderer.clear();
+    const renderer = plot.renderer;
+    renderer.outputColorSpace = LinearSRGBColorSpace;
+    const DragControls = await import("./DragControls-VBN4LBU5.js");
+    const fov = this.settings.threeFOV;
+    const near = 0.1;
+    const far = 1e3;
+    const camera = new PerspectiveCamera(fov, 1, near, far);
+    const scene = new Scene();
+    camera.position.set(0, 0, 2);
+    camera.lookAt(scene.position);
+    camera.updateMatrix();
+    const whiteColor = new Color("rgb(255,255,255)");
+    scene.background = whiteColor;
+    const geometry = new BufferGeometry();
+    const { vertices, colors } = this.getVertices(plot);
+    geometry.setAttribute("position", new Float32BufferAttribute(vertices, 3));
+    geometry.setAttribute("color", new Float32BufferAttribute(colors, 3));
+    const tex = getThreeCircle(256);
+    const material = new PointsMaterial({
+      size: this.settings.sampleSizeThree,
+      sizeAttenuation: true,
+      transparent: true,
+      opacity: this.settings.opacity,
+      map: tex,
+      vertexColors: true
+    });
+    const particles = new Points(geometry, material);
+    plot.particles = particles;
+    scene.add(particles);
+    renderer.setSize(this.settings.svgw, this.settings.svgh);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    plot.canvas.addEventListener("mousewheel", (event) => {
+      if (!event.ctrlKey) return;
+      event.preventDefault();
+      particles.position.z -= event.deltaY / 500;
+    });
+    if (this.settings.showContour && this.state.config.gene && this.state.config.activeTab == GENE_EXPRESSION_TAB) {
+      const cells = plot.expCells.length > 0 ? plot.expCells : plot.cells;
+      const xAxisScale = plot.xAxisScale.range([0, this.settings.svgw]);
+      const yAxisScale = plot.yAxisScale.range([this.settings.svgh, 0]);
+      let zAxisScale;
+      if (plot.expCells.length > 0) {
+        const [min, max2] = extent(plot.expCells, (d) => d.geneExp);
+        zAxisScale = linear().domain([min, max2]).range([0, 1]);
+      }
+      const xCoords = cells.map((c) => xAxisScale(c.x));
+      const yCoords = cells.map((c) => yAxisScale(c.y));
+      const zCoords = cells.map((c) => zAxisScale ? zAxisScale(c.geneExp) : 1);
+      await this.renderContourMap(scene, xCoords, yCoords, zCoords, plot);
+    }
+    const controls = new DragControls.DragControls([particles], camera, renderer.domElement);
+    function animate() {
+      requestAnimationFrame(animate);
+      renderer.render(scene, camera);
+    }
+    animate();
+    if (this.settings.showGrid) this.renderThreeGrid(scene);
+  };
+  async renderContourMap(scene, xCoords, yCoords, zCoords, plot) {
+    const data = xCoords.map((x, i) => ({ x, y: yCoords[i], z: zCoords[i] }));
+    const imageUrl = getContourImage(
+      data,
+      this.settings.svgw,
+      this.settings.svgh,
+      this.settings.colorContours,
+      this.settings.contourBandwidth,
+      this.settings.contourThresholds
+    );
+    const loader = new TextureLoader();
+    loader.load(imageUrl, (texture) => {
+      const geometry = new PlaneGeometry(2, 2);
+      const material = new MeshBasicMaterial({ map: texture, transparent: true, color: 1315860 });
+      const plane = new Mesh(geometry, material);
+      scene.add(plane);
+      plot.plane = plane;
+      plane.position.z = 1e-5;
+      plot.particles.add(plane);
+    });
+  }
+  renderThreeGrid(scene) {
+    let x = -1;
+    const lineMaterial = new LineBasicMaterial({ color: 4292072403 });
+    const lines = 10;
+    const step = 2 / lines;
+    for (let i = 0; i < lines; i++) {
+      let points = [];
+      points.push(new Vector3(x, 1.5, 0));
+      points.push(new Vector3(x, -1.5, 0));
+      let lineGeometry = new BufferGeometry().setFromPoints(points);
+      let line = new Line(lineGeometry, lineMaterial);
+      line.position.z = 1;
+      scene.add(line);
+      points = [];
+      points.push(new Vector3(-1.5, x, 0));
+      points.push(new Vector3(1.5, x, 0));
+      lineGeometry = new BufferGeometry().setFromPoints(points);
+      line = new Line(lineGeometry, lineMaterial);
+      scene.add(line);
+      x += step;
+      line.position.z = 1;
+    }
+  }
+  getVertices(plot) {
+    const vertices = [];
+    const colors = [];
+    for (const c of plot.cells) {
+      const opacity = this.getOpacity(c);
+      if (opacity == 0) continue;
+      let x = plot.xAxisScale(c.x);
+      let y = plot.yAxisScale(c.y);
+      const rgbColor = rgb(this.getColor(c, plot));
+      vertices.push(x, y, 0);
+      colors.push(rgbColor.r / 255, rgbColor.g / 255, rgbColor.b / 255);
+    }
+    return { vertices, colors };
+  }
+};
+function getContourImage(data, width, height, colorContours, bandwidth, thresholds) {
+  const svg = create_default("svg").attr("width", width).attr("height", height);
+  renderContours(svg.append("g"), data, width, height, colorContours, bandwidth, thresholds);
+  const svgString = new XMLSerializer().serializeToString(svg.node());
+  const encodedSvg = encodeURIComponent(svgString);
+  const imageUrl = "data:image/svg+xml;charset=utf-8," + encodedSvg;
+  return imageUrl;
+}
+function getMouseNDC(event, rect) {
+  return new Vector2(
+    (event.clientX - rect.left) / rect.width * 2 - 1,
+    -(event.clientY - rect.top) / rect.height * 2 + 1
+  );
+}
+var scatterInit = getCompInit(singleCellPlot);
+var componentInit = scatterInit;
+async function getPlotConfig(opts, app) {
+  try {
+    const data = app.vocabApi.termdbConfig?.queries?.singleCell?.data;
+    const plots = data?.plots;
+    let settings = getDefaultSingleCellSettings();
+    if (data.settings)
+      for (const key in data.settings) {
+        settings[key] = data.settings[key];
+      }
+    const config = {
+      hiddenClusters: {},
+      settings: {
+        singleCellPlot: settings,
+        controls: { isOpen: false }
+      },
+      startColor: {},
+      stopColor: {},
+      plots,
+      hidePlotFilter: true
+    };
+    const result = copyMerge(config, opts);
+    return result;
+  } catch (e) {
+    console.log(e);
+    throw `${e} [singleCellPlot getPlotConfig()]`;
+  }
+}
+function getDefaultSingleCellSettings() {
+  return {
+    svgw: 600,
+    svgh: 600,
+    showGrid: true,
+    sampleSize: 1.5,
+    sampleSizeThree: 0.04,
+    threeFOV: 60,
+    opacity: 0.8,
+    showNoExpCells: false,
+    showContour: false,
+    colorContours: false,
+    contourBandwidth: 15,
+    contourThresholds: 10,
+    uiLabels: {
+      // allow customized user interface labels (buttons, menus, etc) by dataset override,
+      // for example in GDC, use 'Case' instead of 'Sample'
+      // TODO: different plots should use the same uiLabels override,
+      // should not need to define separately for matrix, single cell, etc
+      Samples: "Samples",
+      samples: "samples",
+      Sample: "Sample",
+      sample: "sample"
+    },
+    colorScaleMode: "auto",
+    // Default to automatic scaling based on data range
+    // Other options: 'fixed' (user-defined range) or
+    // 'percentile' (scale based on data distribution)
+    colorScalePercentile: 95,
+    // Default percentile for percentile mode
+    // This means we'll scale colors based on values
+    // up to the 95th percentile by default
+    colorScaleMinFixed: null,
+    // User-defined minimum value for fixed mode
+    // Null indicates this hasn't been set yet
+    colorScaleMaxFixed: null
+    // User-defined maximum value for fixed mode
+  };
+}
+
+export {
+  ScatterModelBase,
+  ScatterModel,
+  ScatterView,
+  ScatterViewModel,
+  ScatterViewModel2DLarge,
+  getThreeCircle,
+  getContourImage,
+  getMouseNDC,
+  scatterInit,
+  componentInit,
+  getPlotConfig,
+  getDefaultSingleCellSettings
+};
+//# sourceMappingURL=chunk-OXVB4OZC.js.map