@sjcrh/proteinpaint-client 2.209.0 → 2.210.1-0

package/dist/chunk-PTQ4GQCS.js

@@ -0,0 +1,692 @@
+import {
+  ColorScale,
+  DownloadMenu,
+  LegendCircleReference,
+  PlotBase,
+  capitalizeFirstLetter,
+  controlsInit,
+  formatHeaderText,
+  getCombinedTermFilter,
+  getMaxLabelWidth,
+  table2col
+} from "./chunk-CSAS3PVJ.js";
+import {
+  Menu
+} from "./chunk-ELJX3QIQ.js";
+import {
+  isNonDictionaryType
+} from "./chunk-4Y5W26UF.js";
+import {
+  PSEUDOBULK
+} from "./chunk-UYKJOBRO.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-WINIL2KN.js";
+import {
+  linear
+} from "./chunk-4OLM3KSB.js";
+import {
+  roundValueAuto
+} from "./chunk-TLT4YIG3.js";
+import {
+  rgb
+} from "./chunk-Q5RDQNIT.js";
+
+// 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,
+      gradientMethod: 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
+function getAggregateMatrixSettings(overrides = {}) {
+  const defaults = {
+    startColor: "#ff9400",
+    stopColor: "#0080ff",
+    gradientMethod: "mean",
+    sizeMethod: "percent",
+    minDotSize: 5,
+    maxDotSize: 20,
+    dotInputMin: 2,
+    dotInputMax: 35
+  };
+  const mergedSettings = Object.assign({}, defaults, overrides);
+  const isValidMinMax = validateMinMax(mergedSettings, mergedSettings.minDotSize, mergedSettings.maxDotSize);
+  if (isValidMinMax !== null) {
+    throw new Error(`Invalid min/max dot size settings: ${isValidMinMax}`);
+  }
+  return mergedSettings;
+}
+function validateMinMax(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/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 dotPadding = settings.maxDotSize * 1.5;
+    const cellSize = settings.maxDotSize + dotPadding;
+    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.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);
+  }
+  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: [],
+      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 ? [
+      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) {
+    const startX = this.hoziPad + this.maxRowLabelLgth;
+    const startY = this.topPad;
+    this.lastY = startY;
+    this.lastX = startX;
+    for (const [i, row] of data.entries()) {
+      for (const dot of row) {
+        const hasData = dot.colorValue !== null && dot.sizeValue !== null;
+        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 ? this.viewData.colorScale.scale(dot.colorValue) : "transparent",
+          hasData,
+          row: dot.row,
+          rowSection: dot.rowSection,
+          column: dot.column,
+          colSection: dot.colSection,
+          tipData: [
+            {
+              label: dot.rowSection,
+              value: dot.row
+            },
+            {
+              label: dot.colSection,
+              value: dot.column
+            },
+            {
+              // Show the color value
+              label: capitalizeFirstLetter(settings.gradientMethod),
+              value: roundValueAuto(dot.colorValue) ?? "No available data"
+            },
+            {
+              // Show the size value
+              label: capitalizeFirstLetter(settings.sizeMethod),
+              value: roundValueAuto(dot.sizeValue) ?? "No available data"
+            }
+          ]
+        };
+        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;
+  }
+  render(viewData, div) {
+    const settings = this.ag.state.config.settings.aggregateMatrix;
+    const colorScaleSvg = div.append("svg").style("display", "block").attr("height", 100);
+    const dotScaleSvg = div.append("svg").style("display", "block").attr("height", settings.maxDotSize + 20 + 50);
+    this.renderColorScale(viewData.colorScale, settings, colorScaleSvg);
+    this.renderDotScaleRef(dotScaleSvg, settings);
+  }
+  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 LegendCircleReference({
+      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),
+      menu: {
+        minMaxLabel: "pixels",
+        callback: async (obj) => {
+          const { min, max } = obj;
+          const isValid = validateMinMax(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
+                }
+              }
+            }
+          });
+        }
+      }
+    });
+  }
+};
+
+// 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.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).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);
+        }
+      }).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" }
+              }
+            }
+          });
+        });
+      }
+    }
+  }
+};
+function addTableRow(table, label, value) {
+  const [td1, td2] = table.addRow();
+  td1.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 inputs = [
+    {
+      label: `${gradientLabel} start color`,
+      type: "color",
+      chartType,
+      settingsKey: "startColor"
+    },
+    {
+      label: `${gradientLabel} stop color`,
+      type: "color",
+      chartType,
+      settingsKey: "stopColor"
+    },
+    {
+      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 = validateMinMax(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 = validateMinMax(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 config = {
+    hidePlotFilter: true,
+    settings: {
+      aggregateMatrix: getAggregateMatrixSettings(opts?.settings?.aggregateMatrix)
+    }
+  };
+  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`);
+  validateAxis(config.rows, "rows");
+  validateAxis(config.columns, "columns");
+  const settings = config.settings?.aggregateMatrix || {};
+  if (typeof settings.sizeMethod != "string" || !settings.sizeMethod) {
+    throw new Error(`Invalid aggregate method for dot size`);
+  }
+  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.");
+}
+function validateAxis(axis, name) {
+  if (!axis || typeof axis != "object" || Array.isArray(axis) || !Object.keys(axis).length) {
+    throw new Error(`No ${name} provided for aggregate matrix plot`);
+  }
+  for (const [section, terms] of Object.entries(axis)) {
+    if (!section.trim()) throw new Error(`Every ${name} section requires a name`);
+    if (!Array.isArray(terms) || !terms.length) throw new Error(`${name} section '${section}' has no terms`);
+    const types = new Set(terms.map((item) => (item.term || item)?.type));
+    if (types.size != 1 || types.has(void 0)) {
+      throw new Error(`${name} section '${section}' must contain exactly one term type`);
+    }
+    const termType = (terms[0].term || terms[0]).type;
+    if (!isNonDictionaryType(termType) && terms.length != 1) {
+      throw new Error(`${name} dictionary section '${section}' can contain only one term`);
+    }
+  }
+}
+
+export {
+  AggregateMatrix,
+  aggMatrixInit,
+  componentInit,
+  getPlotConfig,
+  validatePlotConfig
+};
+//# sourceMappingURL=chunk-PTQ4GQCS.js.map