@sjcrh/proteinpaint-client 2.204.0 → 2.205.0

package/dist/chunk-OKUFTLFL.js

@@ -1,4297 +0,0 @@
-import {
-  d3lasso
-} from "./chunk-JH73IL4C.js";
-import {
-  getId
-} from "./chunk-GF6CKFXE.js";
-import {
-  expColor,
-  maxSvgSamplesCutoff,
-  noExpColor
-} from "./chunk-6SKLD7JU.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,
-  getFilter,
-  getMaxLabelWidth,
-  getSamplelstTW,
-  getSingleCellSpecialCase,
-  renderTable,
-  sayerror,
-  shapeSelector,
-  shapesArray,
-  table2col
-} from "./chunk-7RX5UEF3.js";
-import {
-  Menu
-} from "./chunk-ELJX3QIQ.js";
-import {
-  icons
-} from "./chunk-6RRZRISL.js";
-import {
-  calculatePadding,
-  dofetch3,
-  getCoordinate,
-  xAxisOffSet,
-  yAxisOffSet
-} from "./chunk-FUSTNOQZ.js";
-import {
-  dictionaryNumericTypes,
-  getDateFromNumber,
-  getDateStrFromNumber,
-  isNumericTerm,
-  numericTypes
-} from "./chunk-WVPFLPWB.js";
-import {
-  SINGLECELL_CELLTYPE,
-  SINGLECELL_GENE_EXPRESSION,
-  dt2label,
-  getColors,
-  mclass,
-  morigin
-} from "./chunk-S5SOLLGM.js";
-import {
-  copyMerge,
-  getCompInit
-} from "./chunk-WINIL2KN.js";
-import {
-  Greys_default,
-  axisBottom,
-  axisLeft,
-  density_default,
-  identity,
-  line_default,
-  path_default,
-  zoom_default
-} from "./chunk-YLJOZP4P.js";
-import {
-  extent,
-  linear,
-  max,
-  sequential,
-  time
-} from "./chunk-HDTFYTEL.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);
-  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 || "" });
-    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 ("sampleId" in data && !(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;
-    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) => "sampleId" in sample) : [];
-    if (cohortSamples.length > 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 > 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 ("sampleId" in c) {
-      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 = !("sampleId" in c);
-    let scale;
-    if (!this.scatter.config.scaleDotTW || isRef) {
-      scale = "sampleId" in c ? this.scatter.settings.size : this.scatter.settings.refSize;
-    } 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 = noExpColor;
-      else if (c.geneExp > chart.ranges.geMax) color = expColor;
-      else color = chart.colorGenerator(c.geneExp);
-      return color;
-    }
-    if (this.scatter.config.colorTW?.q.mode == "continuous" && "sampleId" in c) {
-      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([yMinDate, yMaxDate]).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);
-  }
-  initColorGenerator(chart) {
-    const config = this.scatter.config;
-    const settings = this.scatter.settings;
-    if (!chart.ranges) return;
-    const gradientColor = rgb(settings.defaultColor);
-    if (!config.startColor) {
-      config.startColor = {};
-      config.stopColor = {};
-    }
-    if (!config.startColor[chart.id]) {
-      config.startColor[chart.id] = config.colorTW?.term.type == SINGLECELL_GENE_EXPRESSION ? noExpColor : config.colorTW?.term.continuousColorScale?.minColor || gradientColor.brighter().brighter().toString();
-    }
-    if (!config.stopColor[chart.id]) {
-      config.stopColor[chart.id] = config.colorTW?.term.type == SINGLECELL_GENE_EXPRESSION ? expColor : config.colorTW?.term.continuousColorScale?.maxColor || gradientColor.darker().toString();
-    }
-    if (config.colorTW?.q.mode === "continuous") {
-      let colorValues;
-      if (config.colorTW.term.type == SINGLECELL_GENE_EXPRESSION) {
-        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) => 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;
-      }
-      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();
-      this.dom.header.html(
-        `${this.scatter.config.name || ""} <span style="opacity:.6;font-size:.7em;margin-left:10px;">${chartName}</span>`
-      );
-    }
-  }
-  getControlInputs() {
-    const labels = this.scatter.config.controlLabels;
-    const hasRef = this.scatter.model.charts?.[0]?.data?.samples?.find((s) => !("sampleId" in s)) || 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`);
-    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");
-          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("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`);
-        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("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("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("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("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").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})`);
-    const shift = 30;
-    minG.append("path").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("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("type", "number").attr("min", minShapeSize).attr("step", "0.5").attr("max", maxShapeSize).style("width", "50px").attr("value", this.scatter.settings.minShapeSize).on("change", () => {
-        const value = parseFloat(minInput.node().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("type", "number").attr("step", "0.5").attr("min", minShapeSize).attr("max", maxShapeSize).style("width", "50px").attr("value", this.scatter.settings.maxShapeSize).on("change", () => {
-        const value = parseFloat(maxInput.node().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 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 (!("sampleId" in s) && (!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" });
-    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;
-    if (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 (!("sampleId" in sample) || 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 plot to defaults" });
-    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 symbols = g.selectAll('path[name="serie"]').data(data.samples);
-    symbols.transition().duration(duration).attr("name", "serie").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("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) => "sampleId" in c && 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 DragControls = await import("./DragControls-VBN4LBU5.js");
-    this.view.dom.mainDiv.selectAll("*").remove();
-    this.canvas = this.view.dom.mainDiv.insert("div").style("display", "inline-block").append("canvas").node();
-    this.canvas.width = this.scatter.settings.svgw;
-    this.canvas.height = this.scatter.settings.svgh;
-    chart.chartDiv.style("margin", "20px 20px");
-    const fov = this.scatter.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, 1.5);
-    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(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 });
-    renderer.setSize(this.scatter.settings.svgw, this.scatter.settings.svgh);
-    renderer.setPixelRatio(window.devicePixelRatio);
-    new DragControls.DragControls([particles], camera, renderer.domElement);
-    document.addEventListener("mousewheel", (event) => {
-      if (event.ctrlKey) camera.position.z += event.deltaY / 500;
-    });
-    this.addLegendSVG(chart);
-    this.animate(camera, scene, renderer);
-  }
-  animate(camera, scene, renderer) {
-    requestAnimationFrame(() => this.animate(camera, scene, renderer));
-    camera.zoom = this.scatter.vm.scatterZoom.zoom;
-    camera.updateProjectionMatrix();
-    renderer.render(scene, camera);
-  }
-  getVertices(chart) {
-    const xAxisScale = chart.xAxisScale.range([-1, 1]);
-    const yAxisScale = chart.yAxisScale.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 noExpColor2 = "#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-VM273TXU.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-VM273TXU.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 = noExpColor2;
-      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-OKUFTLFL.js.map