@sjcrh/proteinpaint-client 2.226.0 → 2.227.0

package/dist/chunk-DFHERVYA.js

@@ -0,0 +1,961 @@
+import {
+  ColorScale,
+  DotSizeScale,
+  DownloadMenu,
+  LegendItemMenu,
+  PlotBase,
+  capitalizeFirstLetter,
+  controlsInit,
+  formatHeaderText,
+  getCombinedTermFilter,
+  getMaxLabelWidth,
+  table2col
+} from "./chunk-YBXQBSFY.js";
+import {
+  Menu
+} from "./chunk-CNFTQSNE.js";
+import {
+  isNonDictionaryType
+} from "./chunk-CFYWQJ7F.js";
+import {
+  CATEGORICAL,
+  DNA_METHYLATION,
+  FLOAT,
+  GENE_EXPRESSION,
+  GENE_VARIANT,
+  INTEGER,
+  ISOFORM_EXPRESSION,
+  PSEUDOBULK,
+  SINGLECELL_CELLTYPE,
+  SSGSEA,
+  arc_default,
+  mclass,
+  pie_default
+} from "./chunk-2N345NXD.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-HBNB5TRH.js";
+import {
+  linear
+} from "./chunk-4OLM3KSB.js";
+import {
+  roundValue
+} from "./chunk-TLT4YIG3.js";
+import {
+  rgb
+} from "./chunk-Q5RDQNIT.js";
+
+// ../shared/utils/dist/src/aggregateMatrix.js
+var AGG_MATRIX_TERM_TYPES = [
+  CATEGORICAL,
+  INTEGER,
+  FLOAT,
+  GENE_EXPRESSION,
+  ISOFORM_EXPRESSION,
+  SSGSEA,
+  DNA_METHYLATION,
+  GENE_VARIANT,
+  SINGLECELL_CELLTYPE
+];
+function getAxisTermTypes(axis) {
+  return axis && typeof axis == "object" ? Object.values(axis).flatMap((terms) => Array.isArray(terms) ? terms.map((tw) => tw?.term?.type) : []) : [];
+}
+function isPieOnly(rows, columns) {
+  const rowTypes = getAxisTermTypes(rows);
+  const colTypes = getAxisTermTypes(columns);
+  const allVariants = (list) => list.length > 0 && list.every((type) => type == GENE_VARIANT);
+  const noVariants = (list) => list.length > 0 && list.every((type) => type && type != GENE_VARIANT);
+  return allVariants(rowTypes) && noVariants(colTypes) || allVariants(colTypes) && noVariants(rowTypes);
+}
+function hasPieAxes(rows, columns) {
+  const rowTypes = getAxisTermTypes(rows);
+  const colTypes = getAxisTermTypes(columns);
+  const hasOther = (list) => list.some((type) => type && type != GENE_VARIANT);
+  return rowTypes.includes(GENE_VARIANT) && hasOther(colTypes) || colTypes.includes(GENE_VARIANT) && hasOther(rowTypes);
+}
+var AGG_MATRIX_ROW_TYPES = AGG_MATRIX_TERM_TYPES;
+var AGG_MATRIX_COLUMN_TYPES = [...AGG_MATRIX_TERM_TYPES, PSEUDOBULK];
+function getAggMatrixTermId(term) {
+  const id = term?.gene || term?.id || term?.name;
+  if (id) return String(id);
+  if (!Array.isArray(term?.genes) || !term.genes.length) return;
+  const ids = term.genes.map(getGeneEntryId);
+  if (ids.some((id2) => !id2)) return;
+  return ids.join(",");
+}
+function getGeneEntryId(entry) {
+  const id = entry?.gene || entry?.name || entry?.id;
+  if (id) return String(id);
+  if (entry?.chr && Number.isFinite(entry.start) && Number.isFinite(entry.stop)) {
+    return `${entry.chr}:${entry.start}-${entry.stop}`;
+  }
+}
+function validateAggMatrixAxis(axis, name, allowEmpty = false) {
+  if (!axis || typeof axis != "object" || Array.isArray(axis)) throw new Error(`invalid .${name}`);
+  const sections = Object.entries(axis);
+  if (!sections.length && !allowEmpty) throw new Error(`invalid .${name}: no sections`);
+  const allowedTypes = name == "rows" ? AGG_MATRIX_ROW_TYPES : AGG_MATRIX_COLUMN_TYPES;
+  for (const [section, terms] of sections) {
+    if (!section.trim()) throw new Error(`every .${name} section requires a name`);
+    if (!Array.isArray(terms) || !terms.length) throw new Error(`invalid .${name}[${section}]`);
+    if (terms.some((tw) => !tw?.term || typeof tw.term != "object")) {
+      throw new Error(`${name} section '${section}' must contain term wrappers, such as { term, q }`);
+    }
+    const types = new Set(terms.map((tw) => tw.term.type));
+    if (types.size != 1 || types.has(void 0)) {
+      throw new Error(`${name} section '${section}' must contain one term type`);
+    }
+    const termType = terms[0].term.type;
+    if (!allowedTypes.includes(termType)) {
+      throw new Error(`${name} section '${section}' has unsupported term type '${termType}'`);
+    }
+    if (termType == SINGLECELL_CELLTYPE) {
+      if (terms.length != 1) throw new Error(`${name} cell type section '${section}' must contain one term`);
+      if (!getAggMatrixTermId(terms[0].term)) {
+        throw new Error(`${name} section '${section}' has a ${termType} term without an identifier`);
+      }
+    } else if (!isNonDictionaryType(termType)) {
+      if (terms.length != 1) throw new Error(`${name} dictionary section '${section}' must contain one term`);
+    } else if (terms.some((tw) => !getAggMatrixTermId(tw.term))) {
+      throw new Error(`${name} section '${section}' has a ${termType} term without an identifier`);
+    }
+  }
+}
+function validateAggMatrixAxes(rows, columns) {
+  validateAggMatrixAxis(rows, "rows");
+  validateAggMatrixAxis(columns, "columns");
+  const termTypes = (axis) => Object.values(axis).flatMap((terms) => terms.map((tw) => tw.term.type));
+  const allTypes = /* @__PURE__ */ new Set([...termTypes(rows), ...termTypes(columns)]);
+  if (allTypes.has(SINGLECELL_CELLTYPE) && allTypes.size > 1) {
+    const others = [...allTypes].filter((type) => type != SINGLECELL_CELLTYPE).join(", ");
+    throw new Error(
+      `${SINGLECELL_CELLTYPE} terms are cells and cannot be combined with sample-level terms (${others}) in an aggregate matrix`
+    );
+  }
+  const columnTypes = new Set(Object.values(columns).flatMap((terms) => terms.map((tw) => tw.term.type)));
+  if (!columnTypes.has(PSEUDOBULK)) return;
+  if (columnTypes.size > 1) {
+    throw new Error("pseudobulk columns cannot be combined with other column term types");
+  }
+  const rowTypes = new Set(Object.values(rows).flatMap((terms) => terms.map((tw) => tw.term.type)));
+  if (rowTypes.size != 1 || !rowTypes.has(GENE_EXPRESSION)) {
+    throw new Error(`pseudobulk columns require ${GENE_EXPRESSION} rows`);
+  }
+}
+
+// plots/aggregateMatrix/model/AggMatrixModel.ts
+var AggMatrixModel = class {
+  constructor(ag) {
+    this.ag = ag;
+    this.app = ag.app;
+  }
+  async getData() {
+    const state = this.ag.state;
+    const config = structuredClone(state.config);
+    validatePlotConfig(config);
+    const settings = config.settings.aggregateMatrix || {};
+    const body = {
+      rows: config.rows,
+      columns: config.columns,
+      // not needed when every dot is a pie
+      gradientMethod: isPieOnly(config.rows, config.columns) ? void 0 : settings.gradientMethod,
+      sizeMethod: settings.sizeMethod,
+      minDotSize: settings.minDotSize,
+      maxDotSize: settings.maxDotSize,
+      filter: state.termfilter.filter,
+      filter0: state.termfilter.filter0,
+      signal: this.ag.api?.getAbortSignal()
+    };
+    return await this.app.vocabApi.getAggregateMatrixData(body);
+  }
+};
+
+// plots/aggregateMatrix/settings/defaults.ts
+var dotSizeDefaults = {
+  minDotSize: 5,
+  maxDotSize: 20,
+  dotInputMin: 2,
+  dotInputMax: 35
+};
+var pieSizeDefaults = {
+  minDotSize: 30,
+  maxDotSize: 60,
+  dotInputMin: dotSizeDefaults.minDotSize,
+  dotInputMax: 300
+};
+var cellToDotSize = 2.5;
+var reservedSpace = { width: 400, height: 250 };
+function getPieSizeDefaults(rows, columns, overrides = {}, viewport = { width: window.innerWidth, height: window.innerHeight }) {
+  if (overrides.minDotSize !== void 0 || overrides.maxDotSize !== void 0) return pieSizeDefaults;
+  const cellSize = Math.min(
+    (viewport.width - reservedSpace.width) / getAxisTermTypes(columns).length,
+    (viewport.height - reservedSpace.height) / getAxisTermTypes(rows).length
+  );
+  const maxDotSize = Math.min(
+    pieSizeDefaults.maxDotSize,
+    Math.max(dotSizeDefaults.maxDotSize, Math.floor(cellSize / cellToDotSize))
+  );
+  const minDotSize = Math.round(pieSizeDefaults.minDotSize * maxDotSize / pieSizeDefaults.maxDotSize);
+  return { ...pieSizeDefaults, minDotSize, maxDotSize };
+}
+function getAggregateMatrixSettings(overrides = {}, sizeDefaults = {}) {
+  const defaults = {
+    startColor: "#ff9400",
+    stopColor: "#0080ff",
+    gradientMethod: "mean",
+    sizeMethod: "percent",
+    ...dotSizeDefaults,
+    ...sizeDefaults
+  };
+  const mergedSettings = Object.assign({}, defaults, overrides);
+  const isValidMinMax = validateMinMaxDotSetting(mergedSettings, mergedSettings.minDotSize, mergedSettings.maxDotSize);
+  if (isValidMinMax !== null) {
+    throw new Error(`Invalid min/max dot size settings: ${isValidMinMax}`);
+  }
+  return mergedSettings;
+}
+function validateMinMaxDotSetting(settings, min, max) {
+  if (min < settings.dotInputMin) {
+    return `Minimum dot size must be greater than or equal to ${settings.dotInputMin}`;
+  }
+  if (max > settings.dotInputMax) {
+    return `Maximum dot size must be less than or equal to ${settings.dotInputMax}`;
+  }
+  if (min > max) {
+    return `Minimum dot size must be less than or equal to maximum dot size`;
+  }
+  return null;
+}
+
+// plots/aggregateMatrix/viewModel/PieViewModel.ts
+function getSectionTypes(axis) {
+  return new Map(Object.entries(axis || {}).map(([section, terms]) => [section, terms[0]?.term?.type]));
+}
+function isPieCell(dot, rowTypes, columnTypes) {
+  return rowTypes.get(dot.rowSection) == GENE_VARIANT !== (columnTypes.get(dot.colSection) == GENE_VARIANT);
+}
+function getDotPie(dot, settings, isPie, sampleType) {
+  const position = dot.pie ? getPiePosition(dot.pie, settings) : void 0;
+  const pie = position?.slices.length ? position : void 0;
+  return {
+    pie,
+    tipData: dot.pie && pie ? getPieTipData(dot.pie, settings, sampleType) : [],
+    isNoData: isPie && !pie
+  };
+}
+function isSliceHidden(slice, settings) {
+  return settings.hiddenSliceKeys ? settings.hiddenSliceKeys.includes(slice.key) : !!slice.hidden;
+}
+function describeSlice(slice, termType) {
+  if (termType == GENE_VARIANT && Object.prototype.hasOwnProperty.call(mclass, slice.key)) {
+    const { label, color } = mclass[slice.key];
+    return { label, color };
+  }
+  return { label: slice.label, color: slice.color };
+}
+function getPiePosition(data, settings) {
+  const radius = Math.max(settings.minDotSize, data.radius * settings.maxDotSize);
+  const arcs = pie_default().sort(null).value((slice) => slice.count)(data.slices.filter((slice) => !isSliceHidden(slice, settings)));
+  const makePath = arc_default().innerRadius(0).outerRadius(radius);
+  return {
+    radius,
+    n: data.n,
+    slices: arcs.map((a) => ({
+      key: a.data.key,
+      count: a.data.count,
+      ...describeSlice(a.data, data.termType),
+      path: makePath(a) || ""
+    }))
+  };
+}
+function getPieTipData(data, settings, sampleType) {
+  const drawn = data.slices.filter((slice) => !isSliceHidden(slice, settings));
+  const total = drawn.reduce((sum, slice) => sum + slice.count, 0);
+  const samples = capitalizeFirstLetter(sampleType?.plural_name || "samples");
+  const entries = [];
+  if (data.termType == GENE_VARIANT && data.variantSamples !== void 0) {
+    entries.push({ label: `${samples} with a variant`, value: data.variantSamples });
+    entries.push({ label: "Variants", value: total });
+  } else {
+    entries.push({ label: samples, value: total });
+  }
+  for (const slice of drawn) {
+    const { label, color } = describeSlice(slice, data.termType);
+    entries.push({ label, value: slice.count, color });
+  }
+  return entries;
+}
+function getPieLegend(data, settings = {}) {
+  const entries = /* @__PURE__ */ new Map();
+  let termType;
+  for (const row of data) {
+    for (const dot of row) {
+      if (!dot.pie) continue;
+      termType ??= dot.pie.termType;
+      for (const slice of dot.pie.slices) {
+        if (!entries.has(slice.key)) {
+          entries.set(slice.key, {
+            key: slice.key,
+            ...describeSlice(slice, dot.pie.termType),
+            hidden: isSliceHidden(slice, settings)
+          });
+        }
+      }
+    }
+  }
+  return { title: termType == GENE_VARIANT ? "Variant class" : "Category", entries: [...entries.values()] };
+}
+
+// plots/aggregateMatrix/viewModel/AggMatrixViewModel.ts
+var AggMatrixViewModel = class {
+  constructor(ag) {
+    this.rowSectionRotateFlags = [];
+    this.colSectionRotateFlags = [];
+    this.topPad = 20;
+    this.hoziPad = 20;
+    this.bottomPad = 20;
+    this.sectionGap = 8;
+    this.colSectionGap = 4;
+    this.minColSectionLineInset = 2;
+    this.colSectionLabelLineGap = 3;
+    this.colSectionLabelGap = 8;
+    this.labelFontPx = 12;
+    this.ag = ag;
+    this.sizeScale = (value) => value;
+  }
+  processData(data) {
+    this.viewData = this.getDefaultViewData();
+    const settings = this.ag.state.config.settings.aggregateMatrix;
+    const cellSize = settings.maxDotSize * cellToDotSize;
+    const measureSvg = this.ag.dom.mainDiv.append("svg");
+    const rowData = data.axesLayout.rows;
+    this.rowTermLabelLgth = getMaxLabelWidth(measureSvg, [rowData.longestLabel]);
+    const rowSectionLayout = this.getSectionLabelLayout(rowData.sections, cellSize, measureSvg, true);
+    this.rowSectionRotateFlags = rowSectionLayout.rotateFlags;
+    this.maxRowSectionLabelWdth = rowSectionLayout.maxCrossAxisSpace;
+    this.maxRowLabelLgth = this.rowTermLabelLgth + (this.maxRowSectionLabelWdth ? this.sectionGap + this.maxRowSectionLabelWdth : 0);
+    this.totalRowHght = cellSize * rowData.rowCount;
+    const colData = data.axesLayout.columns;
+    this.colTermLabelLgth = getMaxLabelWidth(measureSvg, [colData.longestLabel]);
+    const colSectionLayout = this.getSectionLabelLayout(colData.sections, cellSize, measureSvg, false);
+    this.colSectionRotateFlags = colSectionLayout.rotateFlags;
+    this.maxColSectionLabelHght = colSectionLayout.maxCrossAxisSpace;
+    this.maxColLabelLgth = this.colTermLabelLgth + (this.maxColSectionLabelHght ? this.colSectionGap + this.maxColSectionLabelHght : 0);
+    this.totalColWdth = cellSize * colData.colCount;
+    measureSvg.remove();
+    this.getPlotDimensions();
+    this.getAxisLabelPositions(rowData, colData, cellSize);
+    this.viewData.hasColorScale = !!data.colorScale;
+    if (data.colorScale) this.setColorScale(settings, data.colorScale);
+    this.sizeScale = linear().domain([data.sizeScale.min, data.sizeScale.max]).range([settings.minDotSize, settings.maxDotSize]).clamp(true);
+    this.getDotPositions(data.data, cellSize, settings, data.sampleType);
+    this.viewData.pieLegend = getPieLegend(data.data, settings);
+  }
+  getSectionLabelLayout(sections, cellSize, measureSvg, isYaxis) {
+    const rotateFlags = [];
+    const widthCache = /* @__PURE__ */ new Map();
+    let maxCrossAxisSpace = 0;
+    for (const section of sections) {
+      const label = section.id || "";
+      let labelWidth = 0;
+      if (label) {
+        if (!widthCache.has(label)) widthCache.set(label, getMaxLabelWidth(measureSvg, [label]));
+        labelWidth = widthCache.get(label) || 0;
+      }
+      const sectionSpan = section.terms.length * cellSize;
+      const rotate = isYaxis ? labelWidth <= sectionSpan : labelWidth > sectionSpan;
+      rotateFlags.push(rotate);
+      const crossAxisSpace = rotate ? isYaxis ? this.labelFontPx : labelWidth : isYaxis ? labelWidth : this.labelFontPx;
+      maxCrossAxisSpace = Math.max(maxCrossAxisSpace, crossAxisSpace);
+    }
+    return { rotateFlags, maxCrossAxisSpace };
+  }
+  getPlotDimensions() {
+    const plotDim = {
+      svg: {
+        width: this.hoziPad + this.maxRowLabelLgth + this.totalColWdth + this.hoziPad,
+        height: this.topPad + this.totalRowHght + this.maxColLabelLgth + this.bottomPad
+      },
+      rowLabels: {
+        x: this.hoziPad + this.maxRowLabelLgth,
+        y: this.topPad
+      },
+      colLabels: {
+        x: 0,
+        y: this.topPad + this.totalRowHght
+      }
+    };
+    this.viewData.plotDim = plotDim;
+  }
+  getDefaultViewData() {
+    return {
+      plotDim: {
+        svg: { width: 0, height: 0 },
+        rowLabels: { x: 0, y: 0 },
+        colLabels: { x: 0, y: 0 }
+      },
+      rowLabels: [],
+      colLabels: [],
+      rowSectionLabels: [],
+      colSectionLabels: [],
+      rowSectionLines: [],
+      colSectionLines: [],
+      dotPositions: [],
+      pieLegend: { title: "", entries: [] },
+      hasColorScale: true,
+      colorScale: {
+        //TODO: If the user cannot set the min and max for color values,
+        // revert to colorScale = scale
+        scale: () => "",
+        absMin: 0,
+        absMax: 0
+      }
+    };
+  }
+  getAxisLabelPositions(rowData, colData, cellSize) {
+    const rowSectionLineX = -(this.rowTermLabelLgth + this.sectionGap / 2);
+    const rowSectionLabelGap = this.sectionGap / 2;
+    const rowSectionRotateExtraGap = this.labelFontPx / 2 + 1;
+    const colTermY = this.labelFontPx;
+    const colTermBandDepth = colTermY + this.colTermLabelLgth;
+    const colSectionBandStart = colTermBandDepth + (this.maxColSectionLabelHght ? this.colSectionGap : 0);
+    const colSectionLineY = Math.max(0, colSectionBandStart - this.colSectionLabelLineGap);
+    const colSectionLineInset = Math.max(this.minColSectionLineInset, cellSize * 0.06);
+    this.lastY = 0;
+    this.lastX = this.hoziPad + this.maxRowLabelLgth;
+    this.viewData.rowLabels = [];
+    this.viewData.colLabels = [];
+    this.viewData.rowSectionLabels = [];
+    this.viewData.colSectionLabels = [];
+    this.viewData.rowSectionLines = [];
+    this.viewData.colSectionLines = [];
+    for (const [rowSectionIndex, section] of rowData.sections.entries()) {
+      const sectionStartY = this.lastY;
+      for (const term of section.terms) {
+        const row = {
+          x: 0,
+          y: this.lastY + cellSize / 2,
+          label: term.label || term.id
+        };
+        this.viewData.rowLabels.push(row);
+        this.lastY += cellSize;
+      }
+      const sectionCenterY = sectionStartY + section.terms.length * cellSize / 2;
+      const sectionEndY = sectionStartY + section.terms.length * cellSize;
+      const rotate = this.rowSectionRotateFlags[rowSectionIndex];
+      this.viewData.rowSectionLabels.push({
+        x: rowSectionLineX - rowSectionLabelGap - (rotate ? rowSectionRotateExtraGap : 0),
+        y: sectionCenterY,
+        label: section.id,
+        rotate
+      });
+      this.viewData.rowSectionLines.push({
+        x: rowSectionLineX,
+        y1: sectionStartY + cellSize / 2,
+        y2: sectionEndY - cellSize / 2
+      });
+    }
+    for (const [colSectionIndex, section] of colData.sections.entries()) {
+      const sectionStartX = this.lastX;
+      for (const term of section.terms) {
+        const col = {
+          x: this.lastX + cellSize / 2,
+          y: colTermY,
+          label: term.label || term.id
+        };
+        this.viewData.colLabels.push(col);
+        this.lastX += cellSize;
+      }
+      const sectionCenterX = sectionStartX + section.terms.length * cellSize / 2;
+      const rotate = this.colSectionRotateFlags[colSectionIndex];
+      const colSectionLabelY = colSectionLineY + this.colSectionLabelGap + (rotate ? 0 : this.labelFontPx / 2);
+      this.viewData.colSectionLabels.push({
+        x: sectionCenterX,
+        y: colSectionLabelY,
+        label: section.id,
+        rotate
+      });
+      this.viewData.colSectionLines.push({
+        y: colSectionLineY,
+        x1: sectionStartX + colSectionLineInset,
+        x2: this.lastX - colSectionLineInset
+      });
+    }
+  }
+  setColorScale(settings, colorScaleData) {
+    const domain = colorScaleData.min === colorScaleData.max ? (
+      /** Instances, like count, may return identical min and max values.
+       * Slightly adjust the domain to avoid having identical min and max values.
+       * Circumvents ColorScale requirement for unique values.
+       * If reverted, reinstate check in agg matrix route. */
+      [
+        colorScaleData.min - Math.max(Math.abs(colorScaleData.min) * 0.01, 1e-12),
+        colorScaleData.max + Math.max(Math.abs(colorScaleData.max) * 0.01, 1e-12)
+      ]
+    ) : [colorScaleData.min, colorScaleData.max];
+    const scale = linear().domain(domain).range([settings.startColor, settings.stopColor]);
+    this.viewData.colorScale = {
+      scale,
+      absMin: colorScaleData.min,
+      absMax: colorScaleData.max
+    };
+  }
+  getDotPositions(data, cellSize, settings, sampleType) {
+    const startX = this.hoziPad + this.maxRowLabelLgth;
+    const startY = this.topPad;
+    this.lastY = startY;
+    this.lastX = startX;
+    const { rows, columns } = this.ag.state.config;
+    const rowTypes = getSectionTypes(rows);
+    const columnTypes = getSectionTypes(columns);
+    for (const [i, row] of data.entries()) {
+      for (const dot of row) {
+        const {
+          pie,
+          tipData: pieTipData,
+          isNoData
+        } = getDotPie(dot, settings, isPieCell(dot, rowTypes, columnTypes), sampleType);
+        const hasColorScale = this.viewData.hasColorScale;
+        const noData = hasColorScale && dot.colorValue === null || dot.sizeValue === null || isNoData;
+        const hasData = !noData;
+        const dotPos = {
+          x: this.lastX + cellSize / 2,
+          y: this.lastY + cellSize / 2,
+          /** Regardless if the size and color value are available, the dot will render.
+           * This will allow the tooltip to appear, displaying the data or lack thereof
+           * to the user. */
+          size: hasData ? this.sizeScale(dot.sizeValue) : settings.maxDotSize,
+          color: hasData && hasColorScale ? this.viewData.colorScale.scale(dot.colorValue) : "transparent",
+          hasData,
+          row: dot.row,
+          rowSection: dot.rowSection,
+          column: dot.column,
+          colSection: dot.colSection,
+          pie,
+          tipData: [
+            {
+              label: dot.rowSection,
+              value: dot.row
+            },
+            {
+              label: dot.colSection,
+              value: dot.column
+            },
+            // The color value, unless there is no color scale
+            ...hasColorScale ? [
+              {
+                label: capitalizeFirstLetter(settings.gradientMethod),
+                value: noData ? "No available data" : roundValue(dot.colorValue, 2)
+              }
+            ] : [],
+            {
+              // Show the size value
+              label: capitalizeFirstLetter(settings.sizeMethod),
+              value: noData ? "No available data" : roundValue(dot.sizeValue, 2)
+            }
+          ]
+        };
+        dotPos.tipData.push(...pieTipData);
+        this.viewData.dotPositions.push(dotPos);
+        this.lastX += cellSize;
+      }
+      this.lastX = startX;
+      this.lastY = startY + (i + 1) * cellSize;
+    }
+  }
+};
+
+// plots/aggregateMatrix/view/LegendRender.ts
+var LegendRender = class {
+  constructor(ag) {
+    this.xStart = 15;
+    this.ag = ag;
+    this.pieLegendMenu = new LegendItemMenu({
+      callback: (hiddenSliceKeys) => {
+        this.ag.app.dispatch({
+          type: "plot_edit",
+          id: this.ag.id,
+          config: { settings: { aggregateMatrix: { hiddenSliceKeys } } }
+        });
+      }
+    });
+  }
+  render(viewData, div) {
+    const settings = this.ag.state.config.settings.aggregateMatrix;
+    if (viewData.hasColorScale) {
+      const colorScaleSvg = div.append("svg").style("display", "block").attr("height", 100);
+      this.renderColorScale(viewData.colorScale, settings, colorScaleSvg);
+    }
+    const dotScaleSvg = div.append("svg").style("display", "block");
+    this.renderDotScaleRef(dotScaleSvg, settings);
+    if (viewData.pieLegend.entries.length) this.renderPieLegend(viewData.pieLegend, div);
+  }
+  /** One shared legend of the slice colors, as every pie uses the same colors and order. It has every slice,
+   * hidden or not. Hidden slices are crossed out, and clicking an entry opens a menu to show or hide slices. */
+  renderPieLegend(legend, div) {
+    const rowHeight = 18;
+    const svg = div.append("svg").attr("class", "sjpp-ag-matrix-pie-legend").attr("data-testid", "sjpp-ag-matrix-pie-legend").style("display", "block").attr("width", 260).attr("height", 30 + legend.entries.length * rowHeight);
+    svg.append("text").attr("x", this.xStart).attr("y", 20).style("font-weight", "bold").style("font-size", "0.8em").text(legend.title);
+    const keys = legend.entries.map((entry) => entry.key);
+    const hiddenKeys = legend.entries.filter((entry) => entry.hidden).map((entry) => entry.key);
+    legend.entries.forEach((entry, i) => {
+      const y = 30 + i * rowHeight;
+      const g = svg.append("g").attr("class", "sjpp-ag-matrix-pie-legend-item").attr("data-testid", "sjpp-ag-matrix-pie-legend-item").style("cursor", "pointer").on("click", (event) => {
+        this.pieLegendMenu.show({ target: event.currentTarget, key: entry.key, keys, hiddenKeys });
+      });
+      g.append("rect").attr("x", this.xStart).attr("y", y).attr("width", 12).attr("height", 12).attr("fill", entry.color).attr("fill-opacity", entry.hidden ? 0.3 : 1).attr("stroke", "#999").attr("stroke-width", 0.5);
+      g.append("text").attr("x", this.xStart + 18).attr("y", y + 10).style("font-size", "0.8em").style("text-decoration", entry.hidden ? "line-through" : "none").style("opacity", entry.hidden ? 0.6 : 1).text(entry.label);
+    });
+  }
+  renderColorScale(colorScale, settings, svg) {
+    svg.append("text").attr("x", this.xStart).attr("y", 20).style("font-weight", "bold").style("font-size", "0.8em").text(capitalizeFirstLetter(settings.gradientMethod));
+    new ColorScale({
+      holder: svg,
+      domain: colorScale.scale.domain(),
+      colors: [settings.startColor, settings.stopColor],
+      barheight: 20,
+      barwidth: 200,
+      position: `${this.xStart + 10}, 35`,
+      setColorsCallback: (val, idx) => {
+        const hexColor = rgb(val).formatHex();
+        const colorKey = idx == 0 ? "startColor" : "stopColor";
+        this.ag.app.dispatch({
+          type: "plot_edit",
+          id: this.ag.id,
+          config: {
+            settings: {
+              aggregateMatrix: {
+                [colorKey]: hexColor
+              }
+            }
+          }
+        });
+      }
+    });
+  }
+  renderDotScaleRef(svg, settings) {
+    new DotSizeScale({
+      g: svg.append("g").attr("transform", `translate(${this.xStart}, 15)`),
+      inputMax: settings.dotInputMax,
+      inputMin: settings.dotInputMin,
+      maxRadius: settings.maxDotSize,
+      minRadius: settings.minDotSize,
+      isAscending: true,
+      title: `${capitalizeFirstLetter(settings.sizeMethod)} size (in pixels)`,
+      menu: {
+        minMaxLabel: "pixels",
+        callback: async (obj) => {
+          const { min, max } = obj;
+          const isValid = validateMinMaxDotSetting(settings, min, max);
+          if (isValid !== null) {
+            alert(isValid);
+            return;
+          }
+          this.ag.app.dispatch({
+            type: "plot_edit",
+            id: this.ag.id,
+            config: {
+              settings: {
+                aggregateMatrix: {
+                  minDotSize: min,
+                  maxDotSize: max
+                }
+              }
+            }
+          });
+        }
+      }
+    });
+    const box = svg.node().getBBox();
+    svg.attr("width", Math.ceil(box.x + box.width + this.xStart)).attr("height", Math.ceil(box.y + box.height + 15));
+  }
+};
+
+// plots/aggregateMatrix/view/AggMatrixView.ts
+var AggMatrixView = class {
+  constructor(ag) {
+    this.ag = ag;
+    this.legendRender = new LegendRender(ag);
+  }
+  render(viewData) {
+    this.initDom(viewData.plotDim);
+    this.renderAxesLabels(
+      viewData.colLabels,
+      viewData.rowLabels,
+      viewData.colSectionLabels,
+      viewData.rowSectionLabels,
+      viewData.colSectionLines,
+      viewData.rowSectionLines
+    );
+    this.renderDots(viewData.dotPositions);
+    this.legendRender.render(viewData, this.dom.legendDiv);
+  }
+  initDom(plotDim) {
+    const mainDiv = this.ag.dom.mainDiv;
+    mainDiv.selectAll("*").remove();
+    const svg = mainDiv.append("svg").attr("width", plotDim.svg.width).attr("height", plotDim.svg.height).attr("data-testid", "sjpp-ag-matrix-svg");
+    const rowLabels = svg.append("g").attr("class", "sjpp-ag-matrix-row-labels").attr("transform", `translate(${plotDim.rowLabels.x}, ${plotDim.rowLabels.y}) `);
+    const colLabels = svg.append("g").attr("class", "sjpp-ag-matrix-col-labels").attr("transform", `translate(${plotDim.colLabels.x}, ${plotDim.colLabels.y})`);
+    const legendDiv = mainDiv.append("div").attr("class", "sjpp-ag-matrix-legend").attr("data-testid", "sjpp-ag-matrix-legend").style("vertical-align", "top").style("display", "inline-block").style("padding", `${this.ag.viewModel.topPad}px ${this.ag.viewModel.hoziPad}px`);
+    this.dom = {
+      svg,
+      rowLabels,
+      colLabels,
+      legendDiv
+    };
+  }
+  renderAxesLabels(colLabels, rowLabels, colSectionLabels, rowSectionLabels, colSectionLines, rowSectionLines) {
+    const { rowLabels: rowLabelsGroup, colLabels: colLabelsGroup } = this.dom;
+    rowLabelsGroup.selectAll("text").data(rowLabels).enter().append("text").attr("class", "sjpp-ag-matrix-row-label").attr("text-anchor", "end").attr("dominant-baseline", "middle").attr("fill", "#3f3f46").attr("font-size", 12).attr("font-weight", 400).attr("transform", (d) => `translate(${d.x}, ${d.y})`).text((d) => d.label);
+    rowLabelsGroup.selectAll(".sjpp-ag-matrix-row-section-label").data(rowSectionLabels).enter().append("text").attr("class", "sjpp-ag-matrix-row-section-label").attr("text-anchor", (d) => d.rotate ? "middle" : "end").attr("dominant-baseline", "middle").attr("fill", "#111827").attr("font-size", 12).attr("letter-spacing", "0.02em").attr("transform", (d) => d.rotate ? `translate(${d.x}, ${d.y}) rotate(-90)` : `translate(${d.x}, ${d.y})`).text((d) => d.label);
+    rowLabelsGroup.selectAll(".sjpp-ag-matrix-row-section-line").data(rowSectionLines).enter().append("line").attr("class", "sjpp-ag-matrix-row-section-line").attr("stroke", "#6b7280").attr("stroke-width", 1).attr("opacity", 0.9).attr("x1", (d) => d.x).attr("x2", (d) => d.x).attr("y1", (d) => d.y1).attr("y2", (d) => d.y2);
+    colLabelsGroup.selectAll("text").data(colLabels).enter().append("text").attr("class", "sjpp-ag-matrix-col-label").attr("text-anchor", "end").attr("dominant-baseline", "middle").attr("fill", "#3f3f46").attr("font-size", 12).attr("font-weight", 400).attr("transform", (d) => `translate(${d.x}, ${d.y}) rotate(-90)`).text((d) => d.label);
+    colLabelsGroup.selectAll(".sjpp-ag-matrix-col-section-label").data(colSectionLabels).enter().append("text").attr("class", "sjpp-ag-matrix-col-section-label").attr("text-anchor", (d) => d.rotate ? "end" : "middle").attr("dominant-baseline", "middle").attr("fill", "#111827").attr("font-size", 12).attr("letter-spacing", "0.02em").attr("transform", (d) => d.rotate ? `translate(${d.x}, ${d.y}) rotate(-90)` : `translate(${d.x}, ${d.y})`).text((d) => d.label);
+    colLabelsGroup.selectAll(".sjpp-ag-matrix-col-section-line").data(colSectionLines).enter().append("line").attr("class", "sjpp-ag-matrix-col-section-line").attr("stroke", "#6b7280").attr("stroke-width", 1).attr("opacity", 0.9).attr("x1", (d) => d.x1).attr("x2", (d) => d.x2).attr("y1", (d) => d.y).attr("y2", (d) => d.y);
+  }
+  renderDots(dotPositions) {
+    for (const dot of dotPositions) {
+      const circle = this.renderDotShape(dot).on("mouseover", (event) => {
+        this.ag.dom.tip.clear().show(event.clientX, event.clientY);
+        const table = table2col({ holder: this.ag.dom.tip.d });
+        for (const v of dot.tipData) {
+          addTableRow(table, v.label, v.value, v.color);
+        }
+      }).on("mouseout", () => {
+        this.ag.dom.tip.clear().hide();
+      });
+      if (dot.hasData) {
+        circle.on("click", () => {
+          const config = this.ag.state.config;
+          const colTerms = config.columns?.[dot.colSection] || [];
+          const colTerm = colTerms.find((term) => term.id === dot.column);
+          if (!colTerm) return;
+          if (colTerm.type !== PSEUDOBULK) return;
+          const tmp = structuredClone(colTerm);
+          const idName = `geneExpression ${dot.row} ${dot.column}`;
+          tmp.gene = dot.row;
+          tmp.category = dot.column;
+          tmp.id = idName;
+          tmp.name = idName;
+          this.ag.app.dispatch({
+            type: "plot_create",
+            config: {
+              chartType: "summary",
+              term: {
+                term: tmp,
+                q: { mode: "continuous" }
+              }
+            }
+          });
+        });
+      }
+    }
+  }
+  /** A circle, or a pie of slices when the server returned a composition for the dot.
+   * Both keep the dot class and test id, so a pie counts as a dot. */
+  renderDotShape(dot) {
+    if (!dot.pie) {
+      return this.dom.svg.append("circle").attr("class", "sjpp-ag-matrix-dot").attr("data-testid", `sjpp-ag-matrix-dot-${dot.row}-${dot.column}`).attr("cx", dot.x).attr("cy", dot.y).attr("r", dot.size).attr("fill", dot.color);
+    }
+    const g = this.dom.svg.append("g").attr("class", "sjpp-ag-matrix-dot sjpp-ag-matrix-pie").attr("data-testid", `sjpp-ag-matrix-dot-${dot.row}-${dot.column}`).attr("transform", `translate(${dot.x}, ${dot.y})`);
+    for (const slice of dot.pie.slices) {
+      g.append("path").attr("class", "sjpp-ag-matrix-pie-slice").attr("data-testid", `sjpp-ag-matrix-pie-slice-${slice.key}`).attr("d", slice.path).attr("fill", slice.color).attr("stroke", "#fff").attr("stroke-width", 0.5);
+    }
+    return g;
+  }
+};
+function addTableRow(table, label, value, color) {
+  const [td1, td2] = table.addRow();
+  if (color) {
+    td1.append("span").attr("class", "sjpp-ag-matrix-tip-swatch").style("display", "inline-block").style("width", "10px").style("height", "10px").style("margin-right", "6px").style("background-color", color).style("border", "1px solid #999");
+  }
+  td1.append("span").text(label);
+  td2.text(value);
+}
+
+// plots/aggregateMatrix/view/setControls.ts
+async function setControls(controlsDiv, ag, initConfig) {
+  const settings = initConfig.settings.aggregateMatrix;
+  const chartType = initConfig.chartType;
+  const gradientLabel = capitalizeFirstLetter(settings.gradientMethod);
+  const colorInputs = isPieOnly(initConfig.rows, initConfig.columns) ? [] : [
+    {
+      label: `${gradientLabel} start color`,
+      type: "color",
+      chartType,
+      settingsKey: "startColor"
+    },
+    {
+      label: `${gradientLabel} stop color`,
+      type: "color",
+      chartType,
+      settingsKey: "stopColor"
+    }
+  ];
+  const inputs = [
+    ...colorInputs,
+    {
+      label: "Min dot size",
+      title: "Set the minimum dot size. Number must be between 2 and 35",
+      type: "number",
+      chartType,
+      settingsKey: "minDotSize",
+      step: 1,
+      max: settings.dotInputMax,
+      min: settings.dotInputMin,
+      width: 55,
+      debounceInterval: 300,
+      processInput: (val) => {
+        const currentSettings = ag.state.config.settings.aggregateMatrix;
+        const isValid = validateMinMaxDotSetting(currentSettings, val, currentSettings.maxDotSize);
+        if (isValid !== null) {
+          alert(isValid);
+          return currentSettings.minDotSize;
+        }
+        return val;
+      }
+    },
+    {
+      label: "Max dot size",
+      title: "Set the maximum dot size. Number must be between 2 and 35",
+      type: "number",
+      chartType,
+      settingsKey: "maxDotSize",
+      step: 1,
+      max: settings.dotInputMax,
+      min: settings.dotInputMin,
+      width: 55,
+      debounceInterval: 300,
+      processInput: (val) => {
+        const currentSettings = ag.state.config.settings.aggregateMatrix;
+        const isValid = validateMinMaxDotSetting(currentSettings, currentSettings.minDotSize, val);
+        if (isValid !== null) {
+          alert(isValid);
+          return currentSettings.maxDotSize;
+        }
+        return val;
+      }
+    }
+  ];
+  ag.components.controls = await controlsInit({
+    app: ag.app,
+    id: ag.id,
+    holder: controlsDiv,
+    inputs
+  });
+  ag.components.controls.on("downloadClick.aggregateMatrix", async (event) => {
+    const name = ag.state.config.name || "Aggregate matrix";
+    const svg = ag.dom.mainDiv.select("svg");
+    const chartImages = [{ name, svg }];
+    new DownloadMenu(chartImages, name).show(event.clientX, event.clientY);
+  });
+}
+
+// plots/aggregateMatrix/AggregateMatrix.ts
+var AggregateMatrix = class _AggregateMatrix extends PlotBase {
+  static {
+    this.type = "aggregateMatrix";
+  }
+  constructor(opts, api) {
+    super(opts, api);
+    this.type = _AggregateMatrix.type;
+    this.components = { controls: {} };
+    const dom = super.getStandardDomLayout(opts.holder);
+    this.dom = {
+      holder: opts.holder,
+      controls: dom.controls.attr("data-testid", "sjpp-ag-matrix-controls"),
+      errorDiv: dom.errdiv.attr("data-testid", "sjpp-ag-matrix-error"),
+      loadingDiv: dom.loadingDiv.attr("data-testid", "sjpp-ag-matrix-loading"),
+      mainDiv: dom.charts.attr("data-testid", "sjpp-ag-matrix-main").style("padding", "10px"),
+      tip: new Menu({ padding: "3px" })
+    };
+    if (opts.header)
+      formatHeaderText({
+        header: opts.header,
+        chartType: "AGGREGATE MATRIX"
+      });
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) {
+      throw new Error(
+        `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`
+      );
+    }
+    const parentConfig = appState.plots.find((p) => p.id === this.parentId);
+    const termfilter = getCombinedTermFilter(appState, config.filter || parentConfig?.filter);
+    return {
+      termfilter,
+      config
+    };
+  }
+  async init(appState) {
+    this.model = new AggMatrixModel(this);
+    this.viewModel = new AggMatrixViewModel(this);
+    this.view = new AggMatrixView(this);
+    const config = this.getState(appState).config;
+    await setControls(this.dom.controls, this, config);
+  }
+  async main() {
+    if (!this.model) throw new Error(`Model not initialized`);
+    if (!this.viewModel) throw new Error(`ViewModel not initialized`);
+    if (!this.view) throw new Error(`View not initialized`);
+    super.toggleLoadingDiv();
+    try {
+      const data = await this.model.getData();
+      if (!data || data.error) {
+        super.toggleLoadingDiv("none");
+        super.printError(data?.error || "No data returned from server");
+        return;
+      }
+      this.viewModel.processData(data);
+    } catch (e) {
+      if (e instanceof Error) console.error(`${e.message || e} [AggregateMatrix main()]`);
+      else if (e.stack) console.log(e.stack);
+      super.toggleLoadingDiv("none");
+      super.printError(e.message || e);
+      return;
+    }
+    this.view.render(this.viewModel.viewData);
+    super.toggleLoadingDiv("none");
+  }
+};
+var aggMatrixInit = getCompInit(AggregateMatrix);
+var componentInit = aggMatrixInit;
+function getPlotConfig(opts) {
+  const overrides = opts?.settings?.aggregateMatrix;
+  const sizeDefaults = hasPieAxes(opts?.rows, opts?.columns) ? getPieSizeDefaults(opts.rows, opts.columns, overrides) : {};
+  const config = {
+    hidePlotFilter: true,
+    settings: { aggregateMatrix: getAggregateMatrixSettings(overrides, sizeDefaults) }
+  };
+  const returnConfig = copyMerge(config, opts);
+  validatePlotConfig(returnConfig);
+  return returnConfig;
+}
+function validatePlotConfig(config) {
+  if (!config || typeof config !== "object") throw new Error(`Invalid config provided for aggregate matrix plot`);
+  validateAggMatrixAxes(config.rows, config.columns);
+  const settings = config.settings?.aggregateMatrix || {};
+  if (typeof settings.sizeMethod != "string" || !settings.sizeMethod) {
+    throw new Error(`Invalid aggregate method for dot size`);
+  }
+  if (isPieOnly(config.rows, config.columns)) return;
+  if (typeof settings.gradientMethod != "string" || !settings.gradientMethod) {
+    throw new Error(`Invalid aggregate method for color gradient`);
+  }
+  if (settings.gradientMethod == settings.sizeMethod)
+    throw new Error(
+      "Aggregate method for the color gradient cannot be the same as the aggregate method for the dot size."
+    );
+}
+
+export {
+  AggregateMatrix,
+  aggMatrixInit,
+  componentInit,
+  getPlotConfig,
+  validatePlotConfig
+};
+//# sourceMappingURL=chunk-DFHERVYA.js.map