@sjcrh/proteinpaint-client 2.166.0 → 2.167.1

package/dist/chunk-BP2F2GRB.js

@@ -1,2676 +0,0 @@
-import {
-  addNewGroup,
-  getFilter,
-  getSamplelstTW
-} from "./chunk-N5VBIEH5.js";
-import {
-  fillTermWrapper,
-  newSandboxDiv,
-  renderCnvConfig,
-  renderTable,
-  rgb2hex,
-  table2col,
-  termsettingInit
-} from "./chunk-UT6W4ZZL.js";
-import {
-  dofetch3
-} from "./chunk-5TDKRZN5.js";
-import {
-  NUMERIC_DICTIONARY_TERM,
-  TermTypes,
-  isNumericTerm
-} from "./chunk-RYRCMHYR.js";
-import {
-  dt2label,
-  dtcnv,
-  dtgeneexpression,
-  dtmetaboliteintensity,
-  dtsnvindel,
-  mclass
-} from "./chunk-ECKWM4HB.js";
-import {
-  Menu
-} from "./chunk-NXOWHUR4.js";
-import {
-  icons
-} from "./chunk-5MWX5HUZ.js";
-import {
-  format
-} from "./chunk-W2IWHXLL.js";
-import {
-  pointer_default,
-  select_default
-} from "./chunk-NDWTN4U5.js";
-
-// plots/matrix/matrix.interactivity.js
-var inputIndex = 0;
-var svgIcons = {
-  externalLink: ""
-  //`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" transform="scale(0.8)" style="display: inline-block; position:relative; top: -2px; left:4px;" ><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>`
-};
-function setInteractivity(self) {
-  let t;
-  self.delayedMouseoutHandler = () => {
-    if (t) clearTimeout(t);
-    t = setTimeout(self.mouseout, 500);
-  };
-  self.showCellInfo = function(event2) {
-    if (self.activeLabel || self.zoomArea) return;
-    if (event2.target.__data__?.isLegendItem) {
-      return;
-    }
-    if (!(event2.target.tagName == "rect" || event2.target.tagName == "image")) {
-      const d2 = event2.target.__data__;
-      const grp = d2?.grp;
-      if (grp?.legendData) {
-        if (event2.target.closest(".sjpp-matrix-series-group-label-g")) self.displaySampleGroupInfo(event2, grp);
-      }
-      return;
-    }
-    if (event2.target.tagName !== "rect" && !self.imgBox) self.imgBox = event2.target.getBoundingClientRect();
-    const d = event2.target.tagName == "rect" ? event2.target.__data__ : self.getImgCell(event2);
-    if (!d || !d.term || !d.sample) {
-      self.dom.tip.hide();
-      self.mouseout();
-      return;
-    }
-    const x = self.dimensions.xOffset + self.dimensions.seriesXoffset;
-    const y = self.dimensions.yOffset;
-    const s = self.settings.matrix;
-    const l = s.controlLabels;
-    const twSpecificSettings = self.config.settings.matrix.twSpecificSettings;
-    const twBarh = twSpecificSettings[d.tw.$id]?.contBarH;
-    const twGap = twSpecificSettings[d.tw.$id]?.contBarGap;
-    self.dom.rowBeam.attr("x", x).attr("y", y + d.seriesY).attr("height", twBarh ? twBarh + 2 * twGap : d.t.grp.type == "hierCluster" ? s.clusterRowh : s.rowh).style("display", "");
-    self.dom.colBeam.attr("x", x + d.x).attr("y", y).style("display", "");
-    self.dom.matrixCellHoverOver.clear();
-    const table = table2col({ holder: self.dom.matrixCellHoverOver.d.append("div") });
-    if (d.term.type == "geneVariant" && d.tw.q?.type == "values") {
-      {
-        const [c1, c2] = table.addRow();
-        c1.html(l.Sample);
-        c2.html(d.row._ref_.label || d.value?.sample);
-      }
-      {
-        const [c1, c2] = table.addRow();
-        c1.html("Gene");
-        c2.html(d.term.name);
-      }
-      const siblingCellLabels = {};
-      if (d.siblingCells)
-        for (const c of d.siblingCells) {
-          if (c.$id != d.$id) continue;
-          const v = c.value;
-          const p = v.pairlst;
-          const dtLabel = v.origin ? `${v.origin} ${dt2label[v.dt]}` : dt2label[v.dt];
-          const label = getLabel(c, v, p);
-          const color = c.fill == v.color || v.class == "Blank" ? "" : c.fill;
-          if (!siblingCellLabels[dtLabel]) {
-            siblingCellLabels[dtLabel] = [{ label, color }];
-          } else {
-            siblingCellLabels[dtLabel].push({ label, color });
-          }
-        }
-      for (const [dtLabel, classArray] of Object.entries(siblingCellLabels).sort((a, b) => b.length - a.length)) {
-        const [c1, c2] = table.addRow();
-        c1.html(dtLabel);
-        c2.html(`<span style="display:inline-block; width:12px; height:12px; background-color:${classArray[0].color}" ></span>
-					${classArray[0].label}`);
-        for (const classType of classArray.slice(1)) {
-          const [c12, c22] = table.addRow();
-          c12.html("");
-          c22.html(`<span style="display:inline-block; width:12px; height:12px; background-color:${classType.color}" ></span>
-						${classType.label}`);
-        }
-      }
-    } else {
-      {
-        const [c1, c2] = table.addRow();
-        c1.html(l.Sample);
-        c2.html(d.row._ref_.label);
-      }
-      let survivalInfo;
-      if (d.term.type == TermTypes.SURVIVAL && d.exitCodeKey) {
-        survivalInfo = d.term.values?.[d.exitCodeKey]?.label || d.exitCodeKey;
-      }
-      if (survivalInfo || d.convertedValueLabel || d.label || d.label === 0) {
-        if (d.term.type == TermTypes.GENE_EXPRESSION) {
-          {
-            const [c1, c2] = table.addRow();
-            c1.html("Gene");
-            c2.html(d.term.gene);
-          }
-          {
-            const colorSquare = d.tw?.q?.convert2ZScore && d.tw.q.mode == "continuous" || d.tw.q.mode !== "continuous" ? `<span style="display:inline-block; width:12px; height:12px; background-color:${d.fill == "#fff" || d.fill == "transparent" ? "" : d.fill}" ></span>` : "";
-            const [c1, c2] = table.addRow();
-            c1.html("Gene Expression");
-            c2.html(
-              `${colorSquare} ${d.convertedValueLabel || d.label}${d.tw?.q?.convert2ZScore && d.tw.q.mode == "continuous" && d.zscoreLabel ? d.zscoreLabel : ""}`
-            );
-          }
-        } else if (d.term.type == TermTypes.METABOLITE_INTENSITY) {
-          {
-            const [c1, c2] = table.addRow();
-            c1.html("Metabolite");
-            c2.html(d.term.name);
-          }
-          {
-            const colorSquare = d.tw?.q?.convert2ZScore && d.tw.q.mode == "continuous" || d.tw.q.mode !== "continuous" ? `<span style="display:inline-block; width:12px; height:12px; background-color:${d.fill == "#fff" || d.fill == "transparent" ? "" : d.fill}" ></span>` : "";
-            const [c1, c2] = table.addRow();
-            c1.html("Metabolite Intensity");
-            c2.html(
-              `${colorSquare} ${d.convertedValueLabel || d.label}${d.tw?.q?.convert2ZScore && d.tw.q.mode == "continuous" && d.zscoreLabel ? d.zscoreLabel : ""}`
-            );
-          }
-        } else if (d.term.type == TermTypes.SURVIVAL) {
-          {
-            const [c1, c2] = table.addRow();
-            c1.html(d.term.name);
-            c2.html(`<span style="display:inline-block; width:12px; height:12px; background-color:${d.fill == "#fff" || d.fill == "transparent" ? "" : d.fill}" ></span>
-							${survivalInfo || d.label}`);
-          }
-          const timeToEventKey = "Time to Event: " + (d.timeToEventKey ? d.timeToEventKey + (d.term.unit ? ` ${d.term.unit}` : "") : (d.convertedValueLabel || d.label) + (d.tw?.q?.convert2ZScore && d.tw.q.mode == "continuous" && d.zscoreLabel ? d.zscoreLabel : ""));
-          {
-            const [c1, c2] = table.addRow();
-            c1.html("");
-            c2.html(timeToEventKey);
-          }
-        } else if (d.term.type == TermTypes.TERM_COLLECTION) {
-          const renderedValues = d.row[d.$id].renderedValues;
-          const sortedRenderedValues = renderedValues.filter((rv) => rv.value !== 0).sort((a, b) => b.value - a.value);
-          for (const renderedValue of sortedRenderedValues) {
-            const colorSquare = `<span style="display:inline-block; width:12px; height:12px; background-color:${renderedValue.color}"></span>`;
-            const [c1, c2] = table.addRow();
-            c1.html(`${colorSquare} ${renderedValue.label}`);
-            c2.html(`${renderedValue.value.toFixed(2)}%`);
-          }
-        } else {
-          const colorSquare = d.tw?.q?.convert2ZScore && d.tw.q.mode == "continuous" || d.tw.q.mode !== "continuous" ? `<span style="display:inline-block; width:12px; height:12px; background-color:${d.fill == "#fff" || d.fill == "transparent" ? "" : d.fill}" ></span>` : "";
-          const [c1, c2] = table.addRow();
-          c1.html(d.term.name);
-          c2.html(
-            `${colorSquare} ${d.convertedValueLabel || d.label}${d.tw?.q?.convert2ZScore && d.tw.q.mode == "continuous" && d.zscoreLabel ? d.zscoreLabel : ""}`
-          );
-        }
-      }
-    }
-    self.dom.matrixCellHoverOver.show2(event2.clientX, event2.clientY);
-    self.dom.mainG.on("mouseout", self.mouseout);
-  };
-  self.getImgCell = function(event2) {
-    if (!self.imgBox) {
-      if (event2.target.tagName == "image") self.imgBox = event2.target.getBoundingClientRect();
-      else return;
-    }
-    const y = event2.clientY - self.imgBox.y - event2.target.clientTop;
-    const d = event2.target.__data__.find((series) => series.hoverY0 <= y && y <= series.hoverY1);
-    if (!d) return;
-    const { xMin, dx } = self.dimensions;
-    const x2 = event2.clientX - self.imgBox.x - event2.target.clientLeft + xMin;
-    for (const cell of d.cells) {
-      const min = cell.x;
-      const max = cell.x + dx;
-      if (min <= x2 && x2 <= max) return cell;
-    }
-    return null;
-  };
-  self.mouseout = function() {
-    if (!self.activeLabel && self.dom.tip) self.dom.tip.hide();
-    delete self.imgBox;
-    if (self.dom.colBeam) self.dom.colBeam.style("display", "none");
-    if (self.dom.rowBeam) self.dom.rowBeam.style("display", "none");
-    if (self.dom.matrixCellHoverOver) self.dom.matrixCellHoverOver.clear();
-  };
-  self.mouseclick = async function(event2, data) {
-    const q = self.state.termdbConfig.queries;
-    if (!q) return;
-    if (!(q.singleSampleGenomeQuantification || q.singleSampleMutation || q.NIdata || q.DZImages)) return;
-    self.dom.mainG.on("mouseout", null);
-    delete self.imgBox;
-    const sampleData = data || event2.target.__data__;
-    if (!sampleData) return;
-    const s = self.config.settings.matrix;
-    const sample = {
-      sample_id: sampleData.row._ref_.label
-    };
-    const geneName = sampleData.term?.type == "geneVariant" ? sampleData.term.name : null;
-    self.dom.clickMenu.clear();
-    self.dom.dendroClickMenu.clear();
-    self.dom.brushMenu.clear();
-    self.dom.matrixCellHoverOver.clear();
-    if (self.dom.sampleListMenu) self.dom.sampleListMenu.destroy();
-    if (q.singleSampleGenomeQuantification) {
-      for (const k in q.singleSampleGenomeQuantification) {
-        const menuDiv = self.dom.clickMenu.d.append("div").attr("class", "sja_menuoption sja_sharp_border").attr("data-testid", "sjpp-ssgp-menu-btn").text(k).on("click", async (event3) => {
-          const sandbox = newSandboxDiv(self.opts.plotDiv || select_default(self.opts.holder.node().parentNode));
-          sandbox.header.text(sample.sample_id);
-          await (await import("./plot.ssgq-YFQEZQYK.js")).plotSingleSampleGenomeQuantification(
-            self.state.termdbConfig,
-            self.state.vocab.dslabel,
-            k,
-            sample,
-            sandbox.body.append("div").style("margin", "20px"),
-            self.app.opts.genome,
-            geneName
-          );
-          menuDiv.remove();
-          self.dom.clickMenu.d.selectAll("*").remove();
-        });
-      }
-    }
-    if (q?.singleSampleMutation) {
-      const menuDiv = self.dom.clickMenu.d.append("div").attr("class", "sja_menuoption sja_sharp_border").attr("data-testid", "oncoMatrix_termLabel_disco_button").text("Disco plot").on("click", async (event3) => {
-        const sandbox = newSandboxDiv(self.opts.plotDiv || select_default(self.opts.holder.node().parentNode));
-        sandbox.header.text(sample.sample_id);
-        (await import("./plot.disco-DBVPBMLG.js")).default(
-          self.state.termdbConfig,
-          self.state.vocab.dslabel,
-          sample,
-          sandbox.body,
-          self.app.opts.genome
-        );
-        menuDiv.remove();
-        self.dom.clickMenu.d.selectAll("*").remove();
-      });
-    }
-    if (q.DZImages) {
-      const menuDiv = self.dom.clickMenu.d.append("div").attr("class", "sja_menuoption sja_sharp_border").attr("data-testid", "oncoMatrix_termLabel_dzi_button").style("display", "none").text(`${q.DZImages.type} Images (0)`);
-      const data2 = await dofetch3("sampledzimages", {
-        body: {
-          genome: self.app.opts.genome.name,
-          dslabel: self.state.vocab.dslabel,
-          sample_id: sample.sample_id
-        }
-      });
-      if (data2.sampleDZImages?.length > 0) {
-        menuDiv.style("display", "block");
-        menuDiv.text(`${q.DZImages.type} Images (${data2.sampleDZImages.length})`);
-        menuDiv.on("click", async (_) => {
-          const sandbox = newSandboxDiv(self.opts.plotDiv || select_default(self.opts.holder.node().parentNode));
-          sandbox.header.text(sample.sample_id);
-          (await import("./plot.dzi-O2OA4EBK.js")).default(
-            self.state.vocab.dslabel,
-            sandbox.body,
-            self.app.opts.genome,
-            sample.sample_id,
-            data2.sampleDZImages
-          );
-          menuDiv.remove();
-          self.dom.clickMenu.d.selectAll("*").remove();
-        });
-      }
-    }
-    if (q.NIdata) {
-      for (const [queryKey, ref] of Object.entries(q.NIdata)) {
-        const menuDiv = self.dom.clickMenu.d.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Neuro Image: " + queryKey).on("click", async () => {
-          self.dom.clickMenu.clear();
-          const config = {
-            chartType: "brainImaging",
-            queryKey,
-            settings: {
-              brainImaging: {
-                brainImageL: ref.parameters.l,
-                brainImageF: ref.parameters.f,
-                brainImageT: ref.parameters.t
-              }
-            },
-            selectedSampleFileNames: [sample.sample_id + ".nii"]
-          };
-          self.app.dispatch({
-            type: "plot_create",
-            config
-          });
-        });
-      }
-    }
-    const l = self.settings.matrix.controlLabels;
-    const table = table2col({ holder: self.dom.clickMenu.d.append("div").append("span") });
-    const templates = self.state.termdbConfig.urlTemplates;
-    if (templates?.sample) {
-      const name = sampleData[templates.sample.namekey] || sampleData.sample || sampleData.row.sample;
-      const [c1, c2] = table.addRow();
-      c1.html(l.Sample);
-      c2.html(
-        `<a href="${templates.sample.base}${name}" target="_blank">${sampleData.row._ref_.label} ${svgIcons.externalLink}</a>`
-      );
-    } else {
-      const [c1, c2] = table.addRow();
-      c1.html(l.Sample);
-      c2.html(sampleData.row._ref_.label || sampleData.value.sample);
-    }
-    if (sampleData.term?.type == "geneVariant" && sampleData.tw.q?.type == "values") {
-      if (sampleData.value) {
-        if (templates?.gene) {
-          const name = self.data.refs.byTermId[sampleData.tw.$id][templates.gene.namekey];
-          const [c1, c2] = table.addRow();
-          c1.html("Gene");
-          c2.html(
-            `<a href="${templates.gene.base}${name}" target="_blank">${sampleData.tw.term.name} ${svgIcons.externalLink}</a>`
-          );
-        } else {
-          const [c1, c2] = table.addRow();
-          c1.html("Gene");
-          c2.html(sampleData.term.name);
-        }
-        const siblingCellLabels = {};
-        for (const c of sampleData.siblingCells) {
-          if (c.$id != sampleData.$id) continue;
-          const v = c.value;
-          const p = v.pairlst;
-          const dtLabel = v.origin ? `${v.origin} ${dt2label[v.dt]}` : dt2label[v.dt];
-          const label = getLabel(c, v, p);
-          const color = c.fill == v.color || v.class == "Blank" ? "" : c.fill;
-          if (!siblingCellLabels[dtLabel]) {
-            siblingCellLabels[dtLabel] = [{ label, color }];
-          } else {
-            siblingCellLabels[dtLabel].push({ label, color });
-          }
-        }
-        for (const [dtLabel, classArray] of Object.entries(siblingCellLabels).sort((a, b) => b.length - a.length)) {
-          const [c1, c2] = table.addRow();
-          c1.html(dtLabel);
-          c2.html(`<span style="display:inline-block; width:12px; height:12px; background-color:${classArray[0].color}" ></span>
-						${classArray[0].label}`);
-          for (const classType of classArray.slice(1)) {
-            const [c12, c22] = table.addRow();
-            c12.html("");
-            c22.html(`<span style="display:inline-block; width:12px; height:12px; background-color:${classType.color}" ></span>
-							${classType.label}`);
-          }
-        }
-      }
-    } else if (sampleData.term) {
-      let survivalInfo;
-      if (sampleData.term.type == TermTypes.SURVIVAL && sampleData.exitCodeKey) {
-        survivalInfo = sampleData.term.values?.[sampleData.exitCodeKey]?.label || sampleData.exitCodeKey;
-      }
-      if (survivalInfo || sampleData.convertedValueLabel || sampleData.label || sampleData.label === 0) {
-        if (sampleData.term.type == TermTypes.GENE_EXPRESSION) {
-          {
-            const [c1, c2] = table.addRow();
-            c1.html("Gene");
-            c2.html(sampleData.term.name);
-          }
-          {
-            const colorSquare = sampleData.tw?.q?.convert2ZScore && sampleData.tw.q.mode == "continuous" || sampleData.tw.q.mode !== "continuous" ? `<span style="display:inline-block; width:12px; height:12px; background-color:${sampleData.fill == "#fff" || sampleData.fill == "transparent" ? "" : sampleData.fill}" ></span>` : "";
-            const [c1, c2] = table.addRow();
-            c1.html("Gene Expression");
-            c2.html(
-              `${colorSquare} ${sampleData.convertedValueLabel || sampleData.label}${sampleData.tw?.q?.convert2ZScore && sampleData.tw.q.mode == "continuous" && sampleData.zscoreLabel ? sampleData.zscoreLabel : ""}`
-            );
-          }
-        } else if (sampleData.term.type == TermTypes.METABOLITE_INTENSITY) {
-          {
-            const [c1, c2] = table.addRow();
-            c1.html("Metabolite");
-            c2.html(sampleData.term.name);
-          }
-          {
-            const colorSquare = sampleData.tw?.q?.convert2ZScore && sampleData.tw.q.mode == "continuous" || sampleData.tw.q.mode !== "continuous" ? `<span style="display:inline-block; width:12px; height:12px; background-color:${sampleData.fill == "#fff" || sampleData.fill == "transparent" ? "" : sampleData.fill}" ></span>` : "";
-            const [c1, c2] = table.addRow();
-            c1.html("Metabolite Intensity");
-            c2.html(
-              `${colorSquare} ${sampleData.convertedValueLabel || sampleData.label}${sampleData.tw?.q?.convert2ZScore && sampleData.tw.q.mode == "continuous" && sampleData.zscoreLabel ? sampleData.zscoreLabel : ""}`
-            );
-          }
-        } else if (sampleData.term.type == TermTypes.SURVIVAL) {
-          {
-            const [c1, c2] = table.addRow();
-            c1.html(sampleData.term.name);
-            c2.html(`<span style="display:inline-block; width:12px; height:12px; background-color:${sampleData.fill == "#fff" || sampleData.fill == "transparent" ? "" : sampleData.fill}" ></span>
-							${survivalInfo || sampleData.label}`);
-          }
-          const timeToEventKey = "Time to Event: " + (sampleData.timeToEventKey ? sampleData.timeToEventKey + (sampleData.term.unit ? ` ${sampleData.term.unit}` : "") : (sampleData.convertedValueLabel || sampleData.label) + (sampleData.tw?.q?.convert2ZScore && sampleData.tw.q.mode == "continuous" && sampleData.zscoreLabel ? sampleData.zscoreLabel : ""));
-          {
-            const [c1, c2] = table.addRow();
-            c1.html("");
-            c2.html(timeToEventKey);
-          }
-        } else if (sampleData.term.type == TermTypes.TERM_COLLECTION) {
-          const renderedValues = sampleData.row[sampleData.$id].renderedValues;
-          const sortedRenderedValues = renderedValues.filter((rv) => rv.value !== 0).sort((a, b) => b.value - a.value);
-          for (const renderedValue of sortedRenderedValues) {
-            const colorSquare = `<span style="display:inline-block; width:12px; height:12px; background-color:${renderedValue.color}"></span>`;
-            const [c1, c2] = table.addRow();
-            c1.html(`${colorSquare} ${renderedValue.label}`);
-            c2.html(`${renderedValue.value.toFixed(2)}%`);
-          }
-        } else {
-          const colorSquare = sampleData.tw?.q?.convert2ZScore && sampleData.tw.q.mode == "continuous" || sampleData.tw.q.mode !== "continuous" ? `<span style="display:inline-block; width:12px; height:12px; background-color:${sampleData.fill == "#fff" || sampleData.fill == "transparent" ? "" : sampleData.fill}" ></span>` : "";
-          const [c1, c2] = table.addRow();
-          c1.html(sampleData.term.name);
-          c2.html(
-            `${colorSquare} ${sampleData.convertedValueLabel || sampleData.label}${sampleData.tw?.q?.convert2ZScore && sampleData.tw.q.mode == "continuous" && sampleData.zscoreLabel ? sampleData.zscoreLabel : ""}`
-          );
-        }
-      }
-    }
-    self.dom.clickMenu.show(event2.clientX, event2.clientY, false, true);
-  };
-  self.legendClick = function() {
-  };
-  self.svgMousemove = function(event2) {
-    if (!self.dragged) return;
-    const s = self.config.settings.matrix;
-    const d = self.dragged;
-    const x2 = !s.transpose ? d.x : d.x - d.clientX + event2.clientX;
-    const y2 = !s.transpose ? d.y - d.clientY + event2.clientY : d.y;
-    d.clone.attr("transform", `translate(${x2},${y2})`);
-  };
-  self.svgMouseup = function(event2) {
-    if (!self.dragged) return;
-    self.dragged.clone.remove();
-    delete self.dragged;
-    delete self.clicked;
-  };
-  self.getVisibleCenterCell = function(dx) {
-    const d = self.dimensions;
-    if (d.seriesXoffset <= 0 && d.mainw >= d.zoomedMainW) {
-      return self.sampleOrder[Math.floor(self.sampleOrder.length / 2)];
-    }
-    const w = 0.5 * d.mainw - d.seriesXoffset - dx;
-    const i = Math.round(w / d.dx);
-    return self.sampleOrder[i];
-  };
-  setTermActions(self);
-  setTermGroupActions(self);
-  setSampleGroupActions(self);
-  setZoomPanActions(self);
-  setResizeHandler(self);
-  setLengendActions(self);
-  setMutationSelectionActions(self);
-}
-function setResizeHandler(self) {
-  let resizeId;
-  select_default(window).on(`resize.sjpp-${self.id}`, () => {
-    if (resizeId) clearTimeout(resizeId);
-    if (self.dimensions && self.layout) resizeId = setTimeout(resize, 200);
-  });
-  function resize() {
-    if (self.dimensions && self.layout) self.main();
-  }
-}
-function setTermActions(self) {
-  setLabelDragEvents(self, "term");
-  self.setPill = function(appState) {
-    self.pill = termsettingInit({
-      tip: self.customTipApi,
-      menuOptions: "all",
-      menuLayout: "horizontal",
-      vocabApi: self.app.vocabApi,
-      vocab: appState.vocab,
-      activeCohort: appState.activeCohort,
-      numericEditMenuVersion: ["discrete", "continuous"],
-      usecase: { target: "matrix" },
-      getBodyParams: () => {
-        const currentGeneNames = [];
-        for (const g of self.config.termgroups) {
-          if (self.chartType == "hierCluster" && g.type != "hierCluster") continue;
-          for (const t of g.lst) {
-            if (t.term.chr) {
-              currentGeneNames.push(`${t.term.chr}:${t.term.start}-${t.term.stop}`);
-            } else if (t.term.gene) {
-              currentGeneNames.push(t.term.gene);
-            }
-          }
-        }
-        if (currentGeneNames.length) return { currentGeneNames };
-        return {};
-      },
-      //holder: {}, //self.dom.inputTd.append('div'),
-      //debug: opts.debug,
-      renderAs: "none",
-      callback: (tw) => {
-        if (tw && !tw.q) throw "data.q{} missing from pill callback";
-        const t = self.activeLabel || self.lastactiveLabel;
-        if (tw) {
-          tw.label = t.tw.label;
-          if (t && t.tw) tw.$id = t.tw.$id;
-          const legendValueFilter = self.mayRemoveTvsEntry(tw);
-          self.pill.main(Object.assign({ filter: self.state.filter }, tw));
-          self.app.dispatch({
-            type: "plot_nestedEdits",
-            id: self.opts.id,
-            edits: [
-              {
-                nestedKeys: ["termgroups", t.grpIndex, "lst", t.lstIndex],
-                value: tw
-              },
-              {
-                nestedKeys: ["legendValueFilter"],
-                value: legendValueFilter
-              }
-            ]
-          });
-        } else {
-          self.removeTerm();
-        }
-        self.dom.tip.hide();
-      }
-    });
-  };
-  self.getMenuOptions = function(t) {
-    return self.config.chartType == "hierCluster" && t.grp.type === "hierCluster" ? "{remove,}" : t.tw.term.type == "geneVariant" ? "{edit,replace,remove}" : t.tw.term.type == "termCollection" ? "{replace,remove}" : "*";
-  };
-  self.showTermMenu = async function(event2) {
-    const t = event2.target.__data__;
-    if (!t || !t.tw || !t.grp) return;
-    const s = self.settings.matrix;
-    const l = s.controlLabels;
-    self.activeLabel = t;
-    self.dom.menutop.style("display", "").selectAll("*").remove();
-    self.dom.menubody.style("padding", 0).selectAll("*").remove();
-    const termMenuWaitDiv = self.dom.menutop.append("div").style("display", "block").text("Loading...");
-    self.dom.tip.show(event2.clientX - 20, event2.clientY - 20);
-    await self.pill.main(
-      Object.assign(
-        { menuOptions: self.getMenuOptions(t), filter: self.state.filter },
-        t.tw ? t.tw : { term: null, q: null }
-      )
-    );
-    termMenuWaitDiv.remove();
-    if (t.tw?.term?.type && t.tw.term.type !== "termCollection") {
-      self.dom.shortcutDiv = self.dom.menutop.append("div").style("z-index", 1e4);
-      self.showShortcuts(t, self.dom.shortcutDiv);
-    }
-    self.dom.twMenuDiv = self.dom.menutop.append("div");
-    const labelEditDiv = self.dom.twMenuDiv.append("div").style("text-align", "center");
-    if (t.tw?.term?.type) labelEditDiv.append("span").text(`${l.Term} `);
-    const twlabel = t.tw.label || t.tw.term.name;
-    const vartype = t.tw.term.type == "geneVariant" || t.tw.term.type == TermTypes.GENE_EXPRESSION ? "gene" : t.tw.term.type == TermTypes.METABOLITE_INTENSITY ? "metabolite" : "variable";
-    if (t.tw?.term?.type)
-      self.dom.twLabelInput = labelEditDiv.append("input").attr("type", "text").attr("size", twlabel.length + 3).attr("aria-label", `Type to edit the ${vartype} label`).style("padding", "1px 5px").style("text-align", "center").property("value", twlabel).on("input", () => {
-        const value = self.dom.twLabelInput.property("value");
-        self.dom.twLabelInput.attr("size", value.length + 3);
-        self.dom.twLabelEditBtn.style("display", value.trim() === twlabel ? "none" : "inline");
-      });
-    if (t.tw?.term?.type)
-      self.dom.twLabelEditBtn = labelEditDiv.append("button").style("display", "none").style("margin-left", "5px").html("submit").on("click", () => {
-        if (twlabel != self.dom.twLabelInput.property("value").trim()) self.updateTermLabel();
-        self.dom.tip.hide();
-      });
-    if (vartype == "gene") {
-      if (t.tw.term.type == "geneVariant") {
-        self.dom.gbButton = labelEditDiv.append("button").style("text-align", "center").html("Lollipop").attr("data-testid", "oncoMatrix_cell_lollipop_button").on("click", async () => {
-          await self.launchGB(t);
-          self.dom.tip.hide();
-        });
-      }
-    }
-    if (self.state.termdbConfig.urlTemplates?.gene && vartype == "gene") {
-      const templates = self.state.termdbConfig.urlTemplates;
-      self.dom.geneSummaryLink = labelEditDiv.append("div").style("display", "inline-block").style("margin-left", "5px").style("text-align", "center").style("color", "rgb(0, 0, 238)").style("cursor", "pointer").style("text-decoration", "underline").html(`${templates.gene.defaultText || ""}${svgIcons.externalLink}`).on("click", async () => {
-        const name = self.data.refs.byTermId[t.tw.$id][templates.gene.namekey];
-        window.open(`${templates.gene.base}${name}`, "_blank");
-        self.dom.tip.hide();
-      });
-    }
-    const twSpecificSettings = self.config.settings.matrix.twSpecificSettings;
-    if (!twSpecificSettings[t.tw.$id]) twSpecificSettings[t.tw.$id] = {};
-    const twSettings = twSpecificSettings[t.tw.$id];
-    const rowHeightColorEditDiv = self.dom.twMenuDiv.append("div").style("text-align", "center");
-    if (t.grp?.type !== "hierCluster" && t.tw?.q?.mode == "continuous") {
-      rowHeightColorEditDiv.append("span").text("Row Height");
-      self.dom.twRowheightInput = rowHeightColorEditDiv.append("input").attr("type", "number").attr("aria-label", `edit the row height`).style("padding", "1px 5px").style("text-align", "center").style("width", "60px").property("value", twSettings.contBarH).on("keyup", async (event3) => {
-        if (event3.code != "Enter") return;
-        const newBarh = parseFloat(self.dom.twRowheightInput.node().value);
-        twSettings.contBarH = newBarh;
-        self.app.dispatch({
-          type: "plot_edit",
-          id: self.opts.id,
-          config: { settings: { matrix: { twSpecificSettings } } }
-        });
-        self.dom.tip.hide();
-      });
-    }
-    if (t.grp?.type !== "hierCluster" && t.tw?.q?.mode == "continuous" && t.tw.term.type != "survival" && t.tw.term.type != "termCollection" && t.tw.q.convert2ZScore != true) {
-      rowHeightColorEditDiv.append("span").text("Bar Color");
-      self.dom.twRowColorInput = rowHeightColorEditDiv.append("input").attr("type", "color").attr("aria-label", `change the bar color`).style("padding", "1px 5px").attr("value", twSettings.contBarColor).on("change", async () => {
-        const color = self.dom.twRowColorInput.node().value;
-        twSettings.contBarColor = color;
-        self.app.dispatch({
-          type: "plot_edit",
-          id: self.opts.id,
-          config: { settings: { matrix: { twSpecificSettings } } }
-        });
-        self.dom.tip.hide();
-      });
-    }
-    if (self.config.settings.matrix.maxSample && t.counts.samples && t.allCounts.samples) {
-      self.dom.twMenuDiv.append("div").style("text-align", "center").style("margin", "5px").text(`#${l.samples}: ${t.counts.samples} rendered, ${t.allCounts.samples - t.counts.samples} not rendered`);
-    }
-    self.dom.twMenuBar = self.dom.twMenuDiv.append("div").style("text-align", "center");
-    const clickedElem = event2.target;
-    self.pill.showMenu(event2, clickedElem, self.dom.twMenuBar);
-    self.dom.grpMenuDiv = self.dom.menutop.append("div").style("margin-top", "10px");
-  };
-  self.launchGB = (t) => {
-    self.app.dispatch({
-      type: "plot_create",
-      config: {
-        chartType: "genomeBrowser",
-        snvindel: { shown: true },
-        geneSearchResult: { geneSymbol: t.tw.term.name }
-      }
-    });
-  };
-  self.updateTermLabel = () => {
-    const value = self.dom.twLabelInput.property("value").trim();
-    const t = self.activeLabel;
-    if (t.tw.label === value) return;
-    t.tw.label = value;
-    t.grp.lst[t.lstIndex] = t.tw;
-    self.app.dispatch({
-      type: "plot_nestedEdits",
-      id: self.opts.id,
-      edits: [
-        {
-          nestedKeys: ["termgroups", t.grpIndex],
-          value: t.grp
-        }
-      ]
-    });
-  };
-  self.showShortcuts = (t, div) => {
-    const l = self.settings.matrix.controlLabels;
-    div.style("text-align", "center");
-    const vartype = t.tw.term.type == "geneVariant" || t.tw.term.type == TermTypes.GENE_EXPRESSION ? "gene" : t.tw.term.type == TermTypes.METABOLITE_INTENSITY ? "metabolite" : "variable";
-    const sortRevertable = self.type != "hierCluster" && t.tw.sortSamples?.priority !== void 0;
-    div.append("span").selectAll("div").data(
-      [
-        {
-          icon: "corner",
-          title: `Sort ${l.samples} against this ${vartype}, and position this ${vartype} at the top left corner`,
-          disabled: t.grp.lst.length < 1 || t.index === 0 && t.tw.sortSamples?.priority === 0 || self.type == "hierCluster",
-          handler: self.sortSamplesAgainstCornerTerm
-        },
-        {
-          icon: "left",
-          title: `Sort ${l.samples} against this ${vartype}`,
-          // should not disable sorting when hierCluster has top dendrogram
-          disabled: t.tw.sortSamples?.priority === 0 && !self.config.settings.hierCluster?.clusterSamples,
-          fill: sortRevertable ? "rgba(200,100,100,0.5)" : "",
-          handler: sortRevertable ? self.unsortSamplesAgainstTerm : self.sortSamplesAgainstTerm
-        },
-        {
-          html: "&nbsp;|&nbsp;"
-        },
-        {
-          icon: "up",
-          title: `Move this ${vartype} up`,
-          disabled: t.index === 0 || self.type == "hierCluster",
-          handler: self.moveTermUp
-        },
-        {
-          icon: "down",
-          title: `Move this ${vartype} down`,
-          disabled: t.index === t.grp.lst.length - 1 || self.type == "hierCluster",
-          handler: self.moveTermDown
-        }
-      ],
-      (d) => d.icon
-    ).enter().append("div").style("display", "inline-block").each(function(d) {
-      const elem = select_default(this);
-      if (d.icon) icons[d.icon](elem, d);
-      else elem.html(d.html);
-    });
-  };
-  self.sortSamplesAgainstCornerTerm = (event2) => {
-    event2.stopPropagation();
-    const t = self.activeLabel;
-    const termgroups = JSON.parse(JSON.stringify(self.termGroups));
-    const grp = termgroups[t.grpIndex];
-    const [tcopy, sorterTerms] = self.getSorterTerms(t);
-    const removed = grp.lst.splice(t.lstIndex, 1);
-    grp.lst.unshift(tcopy);
-    grp.sortTermsBy = "asListed";
-    for (const g of termgroups) {
-      if (g == grp) {
-        for (const [priority, tw] of g.lst.entries()) {
-          if (!tw.sortSamples) tw.sortSamples = { priority, by: "values" };
-          tw.sortSamples.priority = priority;
-        }
-      } else {
-        for (const tw of g.lst) {
-          if (!tw.sortSamples) continue;
-          tw.sortSamples.priority = sorterTerms.findIndex((t2) => t2.tw?.$id === tw.$id) + grp.lst.length;
-        }
-      }
-    }
-    self.app.dispatch({
-      type: "plot_edit",
-      id: self.opts.id,
-      config: {
-        termgroups,
-        settings: {
-          matrix: {
-            sortTermsBy: "asListed"
-          }
-        }
-      }
-    });
-    self.dom.tip.hide();
-  };
-  self.sortSamplesAgainstTerm = (event2) => {
-    event2?.stopPropagation();
-    const t = self.activeLabel;
-    const [tcopy] = self.getSorterTerms(t);
-    if (t.grp.type == "hierCluster") tcopy.sortSamples.by = "values";
-    const termgroups = self.termGroups;
-    termgroups[t.grpIndex].lst[t.lstIndex] = tcopy;
-    for (const g of termgroups) {
-      for (const tw of g.lst) {
-        if (!tw.sortSamples) continue;
-        if (tw.$id === t.tw.$id) {
-          tw.sortSamples.priority = 0;
-        } else tw.sortSamples.priority += 1;
-      }
-    }
-    if (self.chartType == "hierCluster") {
-      self.config.settings.hierCluster.clusterSamples = false;
-      self.config.settings.hierCluster.yDendrogramHeight = 0;
-    }
-    self.config.termgroups = termgroups;
-    self.app.dispatch({
-      type: "plot_edit",
-      id: self.opts.id,
-      config: self.config
-    });
-    self.dom.tip.hide();
-  };
-  self.unsortSamplesAgainstTerm = (event2, d) => {
-    event2.stopPropagation();
-    const t = self.activeLabel || d.data.t;
-    const [tcopy] = self.getSorterTerms(t);
-    const termgroups = self.termGroups;
-    termgroups[t.grpIndex].lst[t.lstIndex] = tcopy;
-    for (const g of termgroups) {
-      for (const tw of g.lst) {
-        if (!tw.sortSamples) continue;
-        if (tw.$id === t.tw.$id) {
-          delete tw.sortSamples;
-        } else if ("sortSamples" in tw && "priority" in tw.sortSamples) {
-          if (tw.sortSamples.priority > t.sortSamples?.priority) tw.sortSamples.priority -= 1;
-        }
-      }
-    }
-    self.app.dispatch({
-      type: "plot_edit",
-      id: self.opts.id,
-      config: {
-        termgroups
-      }
-    });
-    self.dom.tip.hide();
-  };
-  self.moveTermUp = (event2) => {
-    event2.stopPropagation();
-    const t = self.activeLabel;
-    const grp = self.termGroups[t.grpIndex];
-    grp.lst.splice(t.lstIndex, 1);
-    grp.lst.splice(t.lstIndex - 1, 0, t.tw);
-    grp.sortTermsBy = "asListed";
-    self.app.dispatch({
-      type: "plot_nestedEdits",
-      id: self.opts.id,
-      edits: [
-        {
-          nestedKeys: ["termgroups", t.grpIndex],
-          value: grp
-        },
-        {
-          nestedKeys: ["settings", "matrix", "sortTermsBy"],
-          value: "asListed"
-        }
-      ]
-    });
-    self.dom.tip.hide();
-  };
-  self.moveTermDown = (event2) => {
-    event2.stopPropagation();
-    const t = self.activeLabel;
-    const grp = self.termGroups[t.grpIndex];
-    grp.lst.splice(t.lstIndex, 1);
-    grp.lst.splice(t.lstIndex + 1, 0, t.tw);
-    grp.sortTermsBy = "asListed";
-    self.app.dispatch({
-      type: "plot_nestedEdits",
-      id: self.opts.id,
-      edits: [
-        {
-          nestedKeys: ["termgroups", t.grpIndex],
-          value: grp
-        },
-        {
-          nestedKeys: ["settings", "matrix", "sortTermsBy"],
-          value: "asListed"
-        }
-      ]
-    });
-    self.dom.tip.hide();
-  };
-  self.showTermEditMenu = async () => {
-    self.dom.menubody.selectAll("*").remove();
-    const t = self.activeLabel;
-    const s = self.config.settings.matrix;
-    const l = s.controlLabels;
-    if (t.tw.term.type == "geneVariant") {
-      const div = self.dom.menubody.append("div");
-      const label = div.append("label");
-      label.append("span").html(`Minimum # ${l.samples} to be visible`);
-      const minNumSamples = "minNumSamples" in t.tw ? t.tw.minNumSamples : "";
-      const input = label.append("input").attr("type", "number").style("margin-left", "5px").style("width", "50px").property("value", minNumSamples);
-      div.append("div").append("button").html("Submit").on("click", () => {
-        const value = input.property("value");
-        if (value === minNumSamples) return;
-        if (value === "") {
-          delete t.tw.minNumSamples;
-        } else {
-          t.tw.minNumSamples = Number(value);
-        }
-        self.app.dispatch({
-          type: "plot_nestedEdits",
-          id: self.opts.id,
-          edits: [
-            {
-              nestedKeys: ["termgroups", t.grpIndex, "lst", t.lstIndex],
-              value: t.tw
-            }
-          ]
-        });
-        self.dom.tip.hide();
-      });
-    } else {
-      await self.pill.main(
-        Object.assign({ menuOptions: self.getMenuOptions(t), filter: self.state.filter }, self.activeLabel.tw)
-      );
-      self.pill.showMenu();
-    }
-  };
-  self.showMoveMenu = async () => {
-    self.dom.menubody.selectAll("*").remove();
-    self.termBeingMoved = self.activeLabel;
-    const div = self.dom.menubody.append("div");
-    div.append("span").html("Click on another label");
-    self.makeInsertPosRadios(div);
-  };
-  self.showTermInsertMenu = () => {
-    self.dom.menubody.selectAll("*").remove();
-    self.dom.editbtns = self.dom.menubody.append("div");
-    self.dom.editbody = self.dom.menubody.append("div");
-    if (self.activeLabel.grp.type == "hierCluster") {
-      self.showDictTermSelection(self.dom.editbody);
-      return;
-    }
-    const grpNameDiv = self.dom.editbtns.append("div").style("margin", "10px 5px");
-    grpNameDiv.append("label").html(`Insert genes or variables in `);
-    self.dom.grpNameSelect = grpNameDiv.append("select").on("change", () => {
-      const value = self.dom.grpNameSelect.property("value");
-      self.dom.grpNameTextInput.property("disabled", value == "current").property("value", value == "current" ? self.activeLabel.grp.name : newGrpName);
-    });
-    self.dom.grpNameSelect.selectAll("option").data([
-      { label: "current", value: "current", selected: true },
-      { label: "new", value: "new" }
-    ]).enter().append("option").attr("selected", (d) => d.selected).html((d) => d.label);
-    grpNameDiv.append("span").html("&nbsp;group: &nbsp;");
-    let newGrpName = "";
-    self.dom.grpNameTextInput = grpNameDiv.append("input").attr("type", "text").property("disabled", true).property("value", self.activeLabel.grp.name).on("change", () => {
-      const name = self.dom.grpNameTextInput.property("value");
-      if (name == self.activeLabel.grp.name) {
-      } else {
-        newGrpName = self.dom.grpNameTextInput.property("value");
-      }
-    });
-    self.makeInsertPosRadios(self.dom.editbtns);
-    self.showDictTermSelection(self.dom.editbody);
-  };
-  self.makeInsertPosRadios = function(div) {
-    const insertPosInput = div.append("div").style("margin", "10px 5px");
-    insertPosInput.append("div").style("display", "inline-block").style("padding-right", "10px").html("Insert&nbsp");
-    const insertRadiosDiv = insertPosInput.append("div").style("display", "inline-block");
-    self.insertRadioId = `sjpp-matrix-${self.id}-insert-pos`;
-    const aboveLabel = insertRadiosDiv.append("label");
-    aboveLabel.append("input").attr("type", "radio").attr("value", "above").property("checked", true).attr("name", self.insertRadioId);
-    aboveLabel.append("span").html("above");
-    insertRadiosDiv.append("span").html("&nbsp;&nbsp");
-    const belowLabel = insertRadiosDiv.append("label");
-    belowLabel.append("input").attr("type", "radio").attr("value", "below").attr("name", self.insertRadioId);
-    belowLabel.append("span").html("&nbsp;below");
-  };
-  self.showDictTermSelection = async (holder) => {
-    const usecase = { target: "matrix", detail: "termgroups" };
-    if (self.chartType == "hierCluster") {
-      if (self.config.dataType == NUMERIC_DICTIONARY_TERM && (!self.activeLabel || self.activeLabel.grp.type == "hierCluster")) {
-        usecase.target = "numericDictTermCluster";
-        usecase.detail = { exclude: self.state.termdbConfig.numericDictTermCluster?.exclude };
-      } else if (self.config.dataType == TermTypes.METABOLITE_INTENSITY && (!self.activeLabel || self.activeLabel.grp.type == "hierCluster")) {
-        usecase.target = TermTypes.METABOLITE_INTENSITY;
-        usecase.detail = "term";
-      } else {
-        usecase.target = self.activeLabel.tw.term.type;
-        usecase.detail = "term";
-      }
-    }
-    const termdb = await import("./app-JPURIGQW.js");
-    holder.selectAll("*").remove();
-    termdb.appInit({
-      holder: holder.append("div"),
-      vocabApi: self.app.vocabApi,
-      state: {
-        vocab: self.state.vocab,
-        activeCohort: self.activeCohort,
-        nav: {
-          header_mode: "search_only"
-        },
-        tree: {
-          usecase
-        },
-        ...!self.activeLabel || self.activeLabel.grp.type == "hierCluster" ? { selectedTerms: self.hcTermGroup.lst.map((t) => t.term) } : {}
-      },
-      tree: {
-        submit_lst
-      },
-      search: {
-        handleGeneVariant: (term) => submit_lst([term])
-      }
-    });
-  };
-  async function submit_lst(termlst) {
-    const newterms = await Promise.all(
-      termlst.map(async (_term) => {
-        const term = structuredClone(_term);
-        const tw = "id" in term ? { id: term.id, term } : { term };
-        await fillTermWrapper(tw, self.app.vocabApi);
-        return tw;
-      })
-    );
-    const t = self.activeLabel;
-    const termgroups = self.termGroups;
-    const isNumericDictTermCBut = self.config.dataType == NUMERIC_DICTIONARY_TERM && !t;
-    const isMetaboliteIntensityCBut = self.config.dataType == TermTypes.METABOLITE_INTENSITY && !t;
-    if (isNumericDictTermCBut || isMetaboliteIntensityCBut || t.grp.type == "hierCluster") {
-      const grp = isNumericDictTermCBut || isMetaboliteIntensityCBut ? termgroups[0] : termgroups[t.grpIndex];
-      grp.lst.splice(0, grp.lst.length, ...newterms);
-      self.app.dispatch({
-        type: "plot_nestedEdits",
-        id: self.opts.id,
-        edits: [
-          {
-            nestedKeys: ["termgroups", isNumericDictTermCBut || isMetaboliteIntensityCBut ? 0 : t.grpIndex, "lst"],
-            value: grp.lst
-          }
-        ]
-      });
-    } else if (self.dom.grpNameSelect.property("value") == "current") {
-      const pos = self.insertRadioId && select_default(`input[name='${self.insertRadioId}']:checked`)?.property("value");
-      const grp = termgroups[t.grpIndex];
-      const i = pos == "above" ? t.lstIndex : t.lstIndex + 1;
-      grp.lst.splice(i, 0, ...newterms);
-      self.app.dispatch({
-        type: "plot_nestedEdits",
-        id: self.opts.id,
-        edits: [
-          {
-            nestedKeys: ["termgroups", t.grpIndex, "lst"],
-            value: grp.lst
-          }
-        ]
-      });
-    } else {
-      const pos = self.insertRadioId && select_default(`input[name='${self.insertRadioId}']:checked`)?.property("value");
-      const i = pos == "above" ? t.grpIndex : t.grpIndex + 1;
-      termgroups.splice(i, 0, {
-        name: self.dom.grpNameTextInput.property("value"),
-        lst: newterms
-      });
-      self.app.dispatch({
-        type: "plot_edit",
-        id: self.opts.id,
-        config: { termgroups }
-      });
-    }
-    self.dom.tip.hide();
-  }
-  self.showSortMenu = () => {
-    const t = self.activeLabel;
-    self.dom.menubody.selectAll("*").remove();
-    self.dom.menubody.append("div").style("margin-top", "10px").style("text-align", "center").html(t.tw.term.name);
-    self.moveInput = void 0;
-    self.showSortOptions(t);
-  };
-  self.showTermMoveOptions = (t) => {
-    const moveDiv = self.dom.menubody.append("div").style("margin-top", "10px");
-    const moveLabel = moveDiv.append("label");
-    self.moveInput = moveLabel.append("input").attr("type", "checkbox").style("text-align", "center");
-    moveLabel.append("span").html(`&nbsp;move this row&nbsp;`);
-    const movePos = moveDiv.append("select");
-    movePos.selectAll("option").data([
-      { label: "before", value: 0 },
-      { label: "after", value: 1 }
-    ]).enter().append("option").attr("value", (d) => d.value).html((d) => d.label);
-    moveDiv.append("span").html("&nbsp;");
-    const otherTermsInGrp = t.grp.lst.filter((tw) => tw.$id != t.tw.$id).map((tw) => {
-      return { label: tw.term.name, value: tw.$id };
-    });
-    const moveTarget = moveDiv.append("select");
-    moveTarget.selectAll("option").data([{ label: "all", value: "*" }, ...otherTermsInGrp]).enter().append("option").attr("value", (d) => d.value).html((d) => d.label);
-  };
-  self.showSortOptions = (t) => {
-    const sortColDiv = self.dom.menubody.append("div").style("margin-top", "10px");
-    const sortColLabel = sortColDiv.append("label");
-    const sortColInput = sortColLabel.append("input").attr("type", "checkbox").property("checked", true).style("text-align", "center");
-    const l = self.settings.matrix.controlLabels;
-    sortColLabel.append("span").html(`&nbsp;sort ${l.samples} against (in order of priority):`);
-    const tcopy = self.showSorterTerms(sortColDiv, t);
-    self.dom.menubody.append("button").html("Apply").on("click", () => {
-      const matrix = JSON.parse(JSON.stringify(self.config.settings.matrix)) || {};
-      delete tcopy.div;
-      delete tcopy.up;
-      delete tcopy.down;
-      delete tcopy.delete;
-      if (sortColInput.property("checked") || self.moveInput?.property("checked")) {
-        self.app.dispatch({
-          type: "plot_nestedEdits",
-          id: self.opts.id,
-          edits: [
-            {
-              nestedKeys: ["termgroups", t.grpIndex, "lst", t.lstIndex],
-              value: tcopy
-            }
-          ]
-        });
-      }
-      self.dom.tip.hide();
-    });
-  };
-  self.showSorterTerms = (sortColDiv, t) => {
-    const [tcopy, sorterTerms] = self.getSorterTerms(t);
-    const s = self.settings.matrix;
-    const l = s.controlLabels;
-    sortColDiv.append("div").style("margin", "5px").style("padding", "5px 10px").selectAll("div").data(sorterTerms, (s2) => s2.$id).enter().append("div").style("width", "fit-content").style("margin", "3px").style("cursor", "default").style("padding", "3px 10px").style("border-radius", "5px").style("color", "black").style("background-color", "rgb(238, 238, 238)").each(function(st, i) {
-      st.sortSamples.priority = i;
-      st.div = select_default(this);
-      const label = st.$id == "sample" ? `${l.Sample} name` : st.term.name;
-      st.div.append("span").style("margin-right", "10px").html(label);
-      st.up = st.div.append("span").html(" &#9650; ").style("display", i === 0 ? "none" : "inline").style("color", "#555").on("click", () => {
-        this.parentNode.insertBefore(this, this.previousSibling);
-        sorterTerms.splice(st.priority, 1);
-        sorterTerms.splice(st.priority - 1, 0, st);
-        updateSorterDivStyles();
-      });
-      st.down = st.div.append("span").html(" &#9660; ").style("display", i < sorterTerms.length - 1 ? "inline" : "none").style("color", "#555").on("click", () => {
-        this.parentNode.insertBefore(this, this.nextSibling.nextSibling);
-        sorterTerms.splice(st.priority, 1);
-        sorterTerms.splice(st.priority + 1, 0, st);
-        updateSorterDivStyles();
-      });
-      st.delete = st.div.append("span").html(" &#10005; ").style("display", "inline").style("color", "rgb(255, 100, 100)").on("click", () => {
-        st.div.remove();
-        sorterTerms.splice(st.priority, 1);
-        updateSorterDivStyles();
-      });
-    });
-    function updateSorterDivStyles() {
-      for (const [i, st] of sorterTerms.entries()) {
-        st.priority = i;
-        st.up.style("display", st.priority > 0 ? "inline" : "none");
-        st.down.style("display", st.priority < sorterTerms.length - 1 ? "inline" : "none");
-      }
-    }
-    return tcopy;
-  };
-  self.getSorterTerms = (t) => {
-    const sorterTerms = [
-      ...self.termOrder.filter((t2) => t2.tw.sortSamples).map((t2) => JSON.parse(JSON.stringify(t2.tw))).sort((a, b) => a.sortSamples.priority - b.sortSamples.priority),
-      ...self.config.settings.matrix.sortSamplesTieBreakers.map((st) => JSON.parse(JSON.stringify(st)))
-    ];
-    const s = self.settings.matrix;
-    const activeOption = s.sortOptions[s.sortSamplesBy];
-    if (!activeOption) {
-      throw `unsupported s.sortSamplesBy='${s.sortSamplesBy}'`;
-    }
-    const matchingSortSamples = activeOption.sortPriority?.find((o) => o.types.includes(t.tw?.term?.type))?.tiebreakers[0];
-    const sortSamples = matchingSortSamples ? {} : t.tw?.term?.type == "geneVariant" ? {
-      by: "class",
-      order: [
-        "Fuserna",
-        "CNV_homozygous_deletion",
-        "CNV_amplification",
-        "CNV_loss",
-        "CNV_amp",
-        "CNV_loh",
-        // truncating
-        "F",
-        "N",
-        // indel
-        "D",
-        "I",
-        // point
-        "M",
-        "P",
-        "L",
-        // noncoding
-        "Utr3",
-        "Utr5",
-        "S",
-        "Intron",
-        "WT",
-        "Blank"
-      ]
-    } : { by: "values" };
-    const i = sorterTerms.findIndex((st) => st.$id === t.tw?.$id);
-    const tcopy = JSON.parse(JSON.stringify(t.tw || {}));
-    tcopy.sortSamples = sortSamples;
-    if (i == -1) {
-      sorterTerms.unshift(tcopy);
-    } else {
-      if (sortSamples.order) tcopy.sortSamples.order = sortSamples.order;
-    }
-    return [tcopy, sorterTerms];
-  };
-  self.removeTerm = () => {
-    const t = self.activeLabel;
-    const legendValueFilter = self.mayRemoveTvsEntry(t.tw);
-    const termgroups = self.termGroups;
-    const grp = termgroups[t.grpIndex];
-    grp.lst.splice(t.lstIndex, 1);
-    if (grp.lst.length) {
-      self.app.dispatch({
-        type: "plot_nestedEdits",
-        id: self.opts.id,
-        edits: [
-          {
-            nestedKeys: ["termgroups", t.grpIndex, "lst"],
-            value: grp.lst
-          },
-          {
-            nestedKeys: ["legendValueFilter"],
-            value: legendValueFilter
-          }
-        ]
-      });
-    } else {
-      termgroups.splice(t.grpIndex, 1);
-      self.app.dispatch({
-        type: "plot_edit",
-        id: self.opts.id,
-        config: {
-          termgroups,
-          legendValueFilter
-        }
-      });
-    }
-    self.dom.tip.hide();
-  };
-  self.removeTermGroup = () => {
-    const t = self.activeLabel;
-    const termgroups = self.termGroups;
-    termgroups.splice(t.grpIndex, 1);
-    self.app.dispatch({
-      type: "plot_edit",
-      id: self.opts.id,
-      config: { termgroups }
-    });
-    self.dom.tip.hide();
-  };
-  self.mayRemoveTvsEntry = (tw) => {
-    if (!self.config.legendValueFilter?.lst.length) return self.config.legendValueFilter;
-    const lst = structuredClone(self.config.legendValueFilter.lst);
-    const items = lst.filter(
-      (f) => f.tvs?.term.type === tw?.term.type && (("id" in f.tvs.term || "id" in tw.term) && f.tvs.term.id === tw.term.id || f.tvs.term.name === tw.term.name)
-    );
-    if (!items.length) return self.config.legendValueFilter;
-    else {
-      for (const t of items) {
-        const tvs = t.tvs;
-        if (tvs.term.type != tw.term.type) continue;
-        if (("id" in tvs.term || "id" in tw.term) && tvs.term.id !== tw.term.id) continue;
-        else if (tvs.term.name != tw.term.name) continue;
-        const i = lst.findIndex((t2) => t2 === tvs);
-        lst.splice(i, 1);
-      }
-    }
-    return { in: true, join: "and", type: "tvslst", lst };
-  };
-}
-function setSampleGroupActions(self) {
-  self.showSampleGroupMenu = function(event2) {
-    const d = event2.target.__data__;
-    if (!d) return;
-    self.activeLabel = d;
-    self.dom.menutop.selectAll("*").remove();
-    self.dom.menubody.style("padding", 0).selectAll("*").remove();
-    const options = JSON.parse(JSON.stringify(self.config.menuOpts?.sampleGroup || [])).map((d2) => {
-      d2.callback = self[d2.callback];
-      return d2;
-    });
-    const menuOptions = [...options, { label: "Delete", callback: self.removeSampleGroup }];
-    self.dom.menutop.append("div").selectAll(":scope>.sja_menuoption").data(menuOptions).enter().append("div").attr("class", "sja_menuoption sja_sharp_border").style("display", "block").html((d2) => d2.label).on("click", (event3, d2) => {
-      event3.stopPropagation();
-      d2.callback(d2);
-    });
-    self.dom.tip.showunder(event2.target);
-  };
-  self.showNewChartMenu = () => {
-    self.dom.menubody.selectAll("*").remove();
-  };
-  self.launchSurvivalPlot = async (menuOpt) => {
-    self.dom.menubody.selectAll("*").remove();
-    self.dom.menubody.append("div").style("padding-top", "10px").html(`Use "<b>${self.config.divideBy.term.name}</b>" to`);
-    const radioDiv = self.dom.menubody.append("div").style("padding", "0 10px");
-    const radioName = "sjpp-matrix-surv-termnum-" + inputIndex++;
-    const label1 = radioDiv.append("label");
-    label1.append("input").attr("type", "radio").attr("name", radioName).attr("value", "term2").property("checked", true);
-    label1.append("span").html(" overlay");
-    const label2 = radioDiv.append("label").style("margin-left", "10px");
-    label2.append("input").attr("type", "radio").attr("name", radioName).attr("value", "term0");
-    label2.append("span").html(" divide");
-    self.dom.menubody.append("div").style("padding-bottom", "10px").html(`the selected survival variable below:`);
-    const termdb = await import("./app-JPURIGQW.js");
-    termdb.appInit({
-      holder: self.dom.menubody.append("div"),
-      vocabApi: self.app.vocabApi,
-      state: {
-        vocab: self.state.vocab,
-        activeCohort: self.state.activeCohort,
-        nav: {
-          header_mode: "search_only"
-        },
-        tree: { usecase: { target: "survival", detail: "term" } }
-      },
-      tree: {
-        click_term: (term) => {
-          self.dom.tip.hide();
-          const termNum = radioDiv.select(`input[name='${radioName}']:checked`).property("value");
-          self.dom.menubody.selectAll("*").remove();
-          const config = {
-            chartType: "survival",
-            term,
-            [termNum]: JSON.parse(JSON.stringify(self.config.divideBy)),
-            insertBefore: self.id
-          };
-          if (menuOpt.config) {
-            Object.assign(config, menuOpt.config);
-          }
-          self.app.dispatch({ type: "plot_create", config });
-        }
-      }
-    });
-  };
-  self.removeSampleGroup = () => {
-    if (!self.config.divideBy) return;
-    const tw = self.activeLabel.grp.tw;
-    const term = tw.term;
-    if (term.type == "categorical" || term.type == "survival") {
-      term.$id = tw.$id;
-      const filterGrpIndex = self.config.legendValueFilter.lst.findIndex((l) => l.legendGrpName == tw.term.id);
-      if (filterGrpIndex == -1) {
-        const filterNew = {
-          legendGrpName: tw.term.id,
-          type: "tvs",
-          tvs: {
-            isnot: true,
-            term,
-            values: [{ key: self.activeLabel.grp.id }]
-          }
-        };
-        self.config.legendValueFilter.lst.push(filterNew);
-      } else {
-        self.config.legendValueFilter.lst[filterGrpIndex].tvs.values.push({ key: self.activeLabel.grp.id });
-      }
-    } else if (isNumericTerm(term)) {
-      term.$id = tw.$id;
-      const filterNew = {
-        legendGrpName: tw.term.id || tw.term.name,
-        type: "tvs",
-        tvs: {
-          isnot: true,
-          term,
-          ranges: [self.data.refs.byTermId[tw.$id].bins.find((b) => self.activeLabel.grp.id == b.name)]
-        }
-      };
-      self.config.legendValueFilter.lst.push(filterNew);
-    }
-    self.app.dispatch({
-      type: "plot_edit",
-      id: self.id,
-      config: { legendValueFilter: self.config.legendValueFilter }
-    });
-    self.dom.tip.hide();
-  };
-  self.showDeletedSampleGroups = () => {
-    if (!self.config.divideBy) return;
-    const tw = self.activeLabel?.grp?.tw || self.config.divideBy;
-    self.config.legendValueFilter.lst = self.config.legendValueFilter.lst.filter(
-      (l) => l.legendGrpName !== tw.term.id && l.legendGrpName != tw.term.name
-    );
-    self.app.dispatch({
-      type: "plot_edit",
-      id: self.id,
-      config: { legendValueFilter: self.config.legendValueFilter }
-    });
-    self.dom.tip.hide();
-  };
-  self.displaySampleGroupInfo = (event2, grp) => {
-    const l = self.settings.matrix.controlLabels;
-    const n = grp.lst.length;
-    self.dom.menutop.selectAll("*").remove();
-    self.dom.menubody.selectAll("*").remove();
-    self.dom.menubody.append("div").style("text-align", "center").html(`<b>${grp.name}</b> (${n} ${n < 2 ? l.sample : l.samples})`);
-    const div = self.dom.menubody.append("div").style("max-width", "400px").style("padding", "5px");
-    for (const key in event2.target.__data__.grp.legendData) {
-      const g = event2.target.__data__.grp.legendData[key];
-      div.append("div").style("padding-top", "10px").html(`<b>${g.name}</b>`);
-      const t = div.append("table");
-      for (const i of g.items) {
-        const tr = t.append("tr");
-        tr.append("td").append("div").style("width", "12px").style("height", "12px").style("background-color", i.color).style("border", `1px soloid ${i.stroke}`);
-        tr.append("td").html(i.text);
-      }
-    }
-    self.dom.tip.show(event2.clientX, event2.clientY);
-  };
-  self.legendItemSorter = (a, b) => {
-    if (a.order && b.order) return a.order - b.order;
-    if (Number.isFinite(a.order) || b.order == -1) return -1;
-    if (Number.isFinite(b.order) || a.order == -1) return 1;
-    if (a.count) return b.count - a.count;
-    if (Number.isFinite(a.count)) return -1;
-    if (Number.isFinite(b.count)) return 1;
-    return 0;
-  };
-  self.handleLegendItemClick = (d) => {
-    const dvt = structuredClone(self.config.divideBy || {});
-    const id = "id" in dvt ? dvt.id : dvt.name;
-    if (d.termid == id) {
-      if (!dvt.exclude) dvt.exclude = [];
-      const i = dvt.exclude?.indexOf(d.key);
-      if (i == -1) dvt.exclude.push(d.key);
-      else dvt.exclude.splice(i, 1);
-      self.app.dispatch({
-        type: "plot_edit",
-        id: self.id,
-        config: {
-          divideBy: dvt
-        }
-      });
-    }
-  };
-  self.handleLegendMouseover = (event2, d) => {
-    const dvt = structuredClone(self.config.divideBy || {});
-    const id = "id" in dvt ? dvt.id : dvt.name;
-    if (d.termid == id) {
-      self.dom.menutop.selectAll("*").remove();
-      self.dom.menubody.selectAll("*").remove();
-      self.dom.menubody.html(`Click to ${d.isExcluded ? "show" : "hide"}`);
-      self.dom.tip.show(event2.clientX, event2.clientY);
-    }
-  };
-}
-function setTermGroupActions(self) {
-  setLabelDragEvents(self, "termGrp");
-  self.showTermGroupMenu = function(event2) {
-    const d = event2.target.tagName.toLowerCase() == "tspan" ? event2.target.parentNode.__data__ : event2.target.__data__;
-    if (!d) return;
-    self.activeLabel = d;
-    self.dom.menutop.style("display", "").selectAll("*").remove();
-    self.showTermGroupInputs(self.dom.menutop.append("div"));
-    self.dom.tip.showunder(event2.target);
-  };
-  self.showTermGroupInputs = function(div) {
-    const holder = div;
-    const labelEditDiv = holder.append("div").style("text-align", "center");
-    labelEditDiv.append("span").text("Group ");
-    self.dom.grpNameInput = labelEditDiv.append("input").attr("type", "text").attr("size", (self.activeLabel.grp.name?.length || 0) + 5).style("padding", "1px 5px").style("text-align", "center").property("value", self.activeLabel.grp.name).on("input", () => {
-      const value = self.dom.grpNameInput.property("value");
-      self.dom.grpNameInput.attr("size", value.length + 5);
-      self.dom.grpEditBtn.style("display", value === self.activeLabel.grp.name ? "none" : "");
-    });
-    self.dom.grpEditBtn = labelEditDiv.append("button").style("display", "none").style("margin-left", "5px").html("submit").on("click", () => {
-      self.updateTermGrpName();
-      self.dom.tip.hide();
-    });
-    self.dom.menubody.style("padding", 0).selectAll("*").remove();
-    const menuOptions = [{ label: "Add Rows", callback: self.showTermInsertMenu }];
-    if (self.chartType != "hierCluster") {
-      menuOptions.push(
-        { label: "Edit", callback: self.showTermGroupEditMenu }
-        //{ label: 'Sort', callback: self.showSortMenu },
-      );
-    }
-    if (self.activeLabel.grp.type != "hierCluster") {
-      menuOptions.push({ label: "Delete", callback: self.removeTermGroup });
-    }
-    holder.append("div").style("text-align", "center").selectAll(":scope>.sja_menuoption").data(menuOptions).enter().append("div").attr("class", "sja_menuoption sja_sharp_border").style("display", "inline-block").html((d) => d.label).on("click", (event2, d) => {
-      event2.stopPropagation();
-      self.dom.menutop.style("display", "none");
-      d.callback(d);
-    });
-  };
-  self.updateTermGrpName = () => {
-    const value = self.dom.grpNameInput.property("value");
-    const t = self.activeLabel;
-    if (t.grp.name === value) return;
-    t.grp.name = value;
-    self.app.dispatch({
-      type: "plot_nestedEdits",
-      id: self.opts.id,
-      edits: [
-        {
-          nestedKeys: ["termgroups", t.grpIndex],
-          value: t.grp
-        }
-      ]
-    });
-  };
-  self.showTermGroupEditMenu = async () => {
-    self.dom.menubody.selectAll("*").remove();
-    const menu = self.dom.menubody.append("div").style("padding", "5px");
-    menu.append("div").style("width", "100%").style("font-weight", 600).html("Group options");
-    const label = menu.append("div").append("label");
-    const l = self.settings.matrix.controlLabels;
-    label.append("span").html(
-      `Minimum # of mutated ${l.samples} for the ${l.term.charAt(0).toLowerCase() + l.term.slice(1)} to be visible `
-    ).attr("aria-label", `May be overridden by a row-specific minNumSamples`);
-    const minNumSampleInput = label.append("input").attr("type", "number").style("margin-left", "5px").style("width", "50px").property("value", self.activeLabel.grp.settings?.minNumSamples || 0);
-    menu.append("div").append("button").html("Submit").on("click", () => {
-      const settings = self.activeLabel.grp.settings || {};
-      settings.minNumSamples = minNumSampleInput.property("value");
-      self.app.dispatch({
-        type: "plot_nestedEdits",
-        id: self.id,
-        edits: [
-          {
-            nestedKeys: ["termgroups", self.activeLabel.grpIndex, "settings"],
-            value: settings
-          }
-        ]
-      });
-    });
-  };
-  self.removeTermGroup = () => {
-    const termgroups = self.termGroups;
-    termgroups.splice(self.activeLabel.grpIndex, 1);
-    self.app.dispatch({
-      type: "plot_edit",
-      id: self.id,
-      config: {
-        termgroups
-      }
-    });
-    self.dom.tip.hide();
-  };
-  const labelParentSelectors = ["series", "series-group", "term", "term-group"].map((d) => `.sjpp-matrix-${d}-label-g`).join(",");
-  self.enableTextHighlight = (event2) => {
-    select_default(event2.target.closest(labelParentSelectors)).selectAll(".sjpp-matrix-label text").style("-webkit-user-select", "auto").style("-moz-user-select", "auto").style("-ms-user-select", "auto").style("user-select", "auto");
-    select_default("body").on("mouseup.sjppMatrixLabelText", self.disableTextHighlight);
-  };
-  self.disableTextHighlight = (event2) => {
-    select_default(event2.target.closest(labelParentSelectors)).selectAll(".sjpp-matrix-label text").style("-webkit-user-select", "none").style("-moz-user-select", "none").style("-ms-user-select", "none").style("user-select", "none");
-    select_default("body").on("mouseup.sjppMatrixLabelText", null);
-  };
-}
-function setLabelDragEvents(self, prefix) {
-  self[`${prefix}LabelMousedown`] = (event2, d) => {
-    self.clicked = { event: event2, d };
-  };
-  self[`${prefix}LabelMouseover`] = (event2, t) => {
-    if (prefix == "term" && event2.target.__data__?.tw && event2.target.__data__.grp) {
-      if (event2.target.__data__.grp.type == "hierCluster") {
-        return;
-      }
-      if (self.activeLabel || self.zoomArea) {
-        return;
-      }
-      self.dom.menutop.selectAll("*").remove();
-      self.dom.menubody.selectAll("*").remove();
-      const groupName = event2.target.__data__.grp.name;
-      const termName = event2.target.__data__.tw.term.name;
-      const titleDiv = self.dom.menubody.append("div").style("text-align", "left").style("font-size", "1.1em").html(groupName ? `<b>${groupName}: ${termName}</b>` : `<b>${termName}</b>`);
-      const div = self.dom.menubody.append("div").style("max-width", "400px");
-      const data = event2.target.__data__;
-      if (data.tw.term.type == "geneVariant" && data.tw.q?.type == "values") {
-        const notTestedSum = Object.values(data.counts.subGroupCounts).reduce(
-          (sum, curr) => sum + curr.samplesNotTested,
-          0
-        );
-        titleDiv.append("div").style("text-align", "left").style("font-size", "0.9em").html(`(tested ${self.samples.length - notTestedSum} of ${self.samples.length})`);
-        for (const [grpName, counts] of Object.entries(data.counts.subGroupCounts)) {
-          const groupSampleTotal = self.sampleGroups.find((g) => g.name == grpName).lst.length;
-          const mRate = groupSampleTotal - counts.samplesNotTested ? counts.samplesTotal / (groupSampleTotal - counts.samplesNotTested) : 0;
-          div.append("div").style("padding-top", "10px").html(
-            grpName ? `<b>${grpName}</b>: Mutated samples (${counts.samplesTotal} of ${groupSampleTotal - counts.samplesNotTested}, ${format(".1%")(mRate)})` : `<b>Mutated samples (${counts.samplesTotal} of ${groupSampleTotal - counts.samplesNotTested}, ${format(".1%")(mRate)})`
-          );
-          const t2 = div.append("table").style("margin-left", "15px");
-          for (const [classType, num] of Object.entries(counts.classes).sort((a, b) => b[1] - a[1])) {
-            const tr = t2.append("tr");
-            tr.append("td").append("div").style("width", "12px").style("height", "12px").style("background-color", mclass[classType].color);
-            tr.append("td").html(`${mclass[classType].label}: ${num}`);
-          }
-          if (counts.notTestedClasses) {
-            div.append("div").style("margin-left", "15px").style("padding-top", "12px").html("<b> Not counted:</b>");
-            const t3 = div.append("table").style("margin-left", "15px");
-            for (const [classType, num] of Object.entries(counts.notTestedClasses).sort((a, b) => b[1] - a[1])) {
-              const tr = t3.append("tr");
-              tr.append("td").append("div").style("width", "12px").style("height", "12px").style("background-color", mclass[classType].color);
-              tr.append("td").html(`${mclass[classType].label}: ${num}`);
-            }
-          }
-        }
-      } else if (!self.config.divideBy) {
-        const termLegend = self.legendData.find((t2) => t2.name == data.tw.term.name);
-        if (termLegend && termLegend.items) {
-          const t2 = div.append("table");
-          for (const classType of termLegend.items) {
-            const tr = t2.append("tr");
-            tr.append("td").append("div").style("width", "12px").style("height", "12px").style("background-color", classType.color);
-            tr.append("td").html(`${classType.key}: ${classType.count}`);
-          }
-        } else {
-          for (const [grpName, counts] of Object.entries(data.counts.subGroupCounts)) {
-            const groupSampleTotal = self.sampleGroups.find((g) => g.name == grpName).totalCountedValues;
-            div.append("div").style("padding-top", "10px").html(
-              grpName !== "" ? `<b>${grpName}</b>: ${counts.samplesTotal} of ${groupSampleTotal}` : `<b>${counts.samplesTotal} of ${groupSampleTotal}`
-            );
-            const t2 = div.append("table").style("margin-left", "15px");
-            for (const [classType, num] of Object.entries(counts.classes).sort((a, b) => b[1] - a[1])) {
-              const classColor = data.tw.term.values?.[classType]?.color;
-              if (!classColor) continue;
-              const tr = t2.append("tr");
-              tr.append("td").append("div").style("width", "12px").style("height", "12px").style("background-color", classColor);
-              tr.append("td").html(`${classType}: ${num}`);
-            }
-          }
-        }
-      } else {
-        for (const [grpName, counts] of Object.entries(data.counts.subGroupCounts)) {
-          const groupSampleTotal = self.sampleGroups.find((g) => g.name == grpName).totalCountedValues;
-          div.append("div").style("padding-top", "10px").html(
-            grpName !== "" ? `<b>${grpName}</b>: ${counts.samplesTotal} of ${groupSampleTotal}` : `<b>${counts.samplesTotal} of ${groupSampleTotal}`
-          );
-          const subGrp = self.sampleGroups.find((g) => g.name == grpName);
-          const termLegend = subGrp.legendData.find((t2) => t2.name == data.tw.term.name);
-          if (termLegend && termLegend.items) {
-            const t2 = div.append("table").style("margin-left", "15px");
-            for (const classType of termLegend.items) {
-              const tr = t2.append("tr");
-              tr.append("td").append("div").style("width", "12px").style("height", "12px").style("background-color", classType.color);
-              tr.append("td").html(`${classType.key}: ${classType.count}`);
-            }
-          } else {
-            const t2 = div.append("table").style("margin-left", "15px");
-            for (const [classType, num] of Object.entries(counts.classes).sort((a, b) => b[1] - a[1])) {
-              const classColor = data.tw.term.values?.[classType]?.color;
-              if (!classColor) continue;
-              const tr = t2.append("tr");
-              tr.append("td").append("div").style("width", "12px").style("height", "12px").style("background-color", classColor);
-              tr.append("td").html(`${classType}: ${num}`);
-            }
-          }
-        }
-      }
-      self.dom.tip.show(event2.clientX, event2.clientY);
-    }
-    if (event2.target.innerHTML.includes("grouped by")) return;
-    if (event2.target.tagName === "text") {
-      select_default(event2.target).style("fill", "blue");
-    }
-    if (!self.dragged) return;
-    self.hovered = event2.target.__data__;
-  };
-  self[`${prefix}LabelMouseout`] = (event2) => {
-    select_default(event2.target).style("fill", "");
-  };
-  self[`${prefix}LabelMousemove`] = (event2, data) => {
-    const s = self.config.settings.matrix;
-    if (self.clicked && !self.dragged) {
-      self.dom[`${prefix}LabelG`].selectAll("text").style("-webkit-user-select", "none").style("-moz-user-select", "none").style("-ms-user-select", "none").style("user-select", "none");
-      const label = self.clicked.event.target.closest(".sjpp-matrix-label");
-      const t = label?.__data__;
-      if (!t) return;
-      if (self.type == "hierCluster" && t.tw && t.grp?.name == self.config.settings.hierCluster?.termGroupName) return;
-      const [x, y] = select_default(label).attr("transform").split("translate(")[1].split(")")[0].split(",").map(Number);
-      const node = label.cloneNode(true);
-      self.dom[`${prefix}LabelG`].node().prepend(node);
-      self.dragged = {
-        orig: label,
-        clone: select_default(node).style("cursor", "move").style("pointer-events", "none"),
-        node,
-        x,
-        y,
-        clientX: event2.clientX,
-        clientY: event2.clientY
-      };
-      self.dragged.clone.selectAll("text").style("fill", "red");
-    }
-    if (!self.dragged) return;
-    const d = self.dragged;
-    const x2 = !s.transpose ? d.x : d.x - d.clientX + event2.clientX;
-    const y2 = !s.transpose ? d.y - d.clientY + event2.clientY : d.y;
-    d.clone.attr("transform", `translate(${x2},${y2})`);
-  };
-  self[`${prefix}LabelMouseup`] = (event2) => {
-    delete self.clicked;
-    const s = self.config.settings.matrix;
-    if (self.dragged) {
-      self.dragged.clone.remove();
-      if (self.hovered) {
-        const d = self.dragged;
-        const t = d.orig.__data__;
-        const h = self.hovered;
-        if (prefix == "termGrp") {
-          const grp = self.config.termgroups.splice(t.grpIndex, 1)[0];
-          self.config.termgroups.splice(h.grpIndex, 0, grp);
-        } else {
-          for (const grp of self.config.termgroups) {
-            grp.lst.sort((a, b) => {
-              const a1 = self.termOrder.find((t2) => t2.tw.$id === a.$id);
-              const b1 = self.termOrder.find((t2) => t2.tw.$id === b.$id);
-              if (!a1 && !b1) return 0;
-              if (!a1) return 1;
-              if (!b1) return -1;
-              return a1.totalIndex - b1.totalIndex;
-            });
-          }
-          const tw = self.config.termgroups[t.grpIndex].lst.splice(t.index, 1)[0];
-          self.config.termgroups[h.grpIndex].lst.splice(h.index, 0, t.tw);
-          if (!self.config.termgroups[t.grpIndex].lst.length) self.config.termgroups.splice(t.grpIndex, 1);
-        }
-        const sortKey = prefix == "term" ? "sortTermsBy" : "sortTermGroupsBy";
-        self.app.dispatch({
-          type: "plot_edit",
-          id: self.id,
-          config: {
-            termgroups: self.config.termgroups,
-            settings: {
-              matrix: {
-                [sortKey]: "asListed"
-              }
-            }
-          }
-        });
-      }
-      self.dom[`${prefix}LabelG`].selectAll("text").style("fill", "").style("-webkit-user-select", "").style("-moz-user-select", "").style("-ms-user-select", "").style("user-select", "");
-      delete self.dragged;
-    } else if (prefix == "term") {
-      self.showTermMenu(event2);
-    } else {
-      self.showTermGroupMenu(event2);
-    }
-  };
-}
-function setZoomPanActions(self) {
-  self.resetInteractions = function() {
-    if (self.zoomArea) {
-      self.zoomArea.remove();
-      delete self.zoomArea;
-      select_default("body").on("mouseup.matrixZoom", null);
-    }
-    delete self.clickedSeriesCell;
-  };
-  self.seriesesGMousedown = function(event2) {
-    event2.stopPropagation();
-    self.resetInteractions();
-    const startCell = self.getCellByPos(event2);
-    if (!startCell) return;
-    self.clickedSeriesCell = { event: event2, startCell };
-    if (self.settings.matrix.mouseMode == "pan") {
-      self.seriesesGdragInit();
-    } else {
-      self.zoomPointer = pointer_default(event2, self.dom.seriesesG.node());
-      self.dom.seriesesG.on("mousemove", self.seriesesGoutlineZoom).on("mouseup", self.seriesesGtriggerZoom).on("contextmenu", self.resetInteractions);
-    }
-    self.dom.mainG.selectAll("text").style("-webkit-user-select", "none").style("-moz-user-select", "none").style("-ms-user-select", "none").style("user-select", "none");
-  };
-  self.getCellByPos = function(event2) {
-    const s = self.settings.matrix;
-    const d = self.dimensions;
-    if (event2.target.tagName == "rect") {
-      if (event2.target.__data__?.sample) return event2.target.__data__;
-      if (event2.target.__data__?.xg) {
-        const width = event2.clientX - event2.target.getBoundingClientRect().x + d.seriesXoffset;
-        const i = Math.floor(width / d.dx);
-        return self.sampleOrder[i];
-      }
-    }
-    if (event2.target.tagName == "image" && s.useCanvas) {
-      return self.getImgCell(event2);
-    }
-  };
-  self.seriesesGdragInit = function() {
-    select_default("body").on("mousemove.sjppMatrixDrag", self.seriesesGdrag).on("mouseup.sjppMatrixDrag", self.seriesesGcancelDrag);
-    const s = self.settings.matrix;
-    const d = self.dimensions;
-    const c = self.clickedSeriesCell;
-    c.dxPad = 20;
-    c.dxMax = -d.seriesXoffset;
-    c.dxMaxPad = c.dxMax + c.dxPad;
-    c.dxMin = d.mainw - d.zoomedMainW - d.seriesXoffset;
-    c.dxMinPad = c.dxMin - c.dxPad;
-    const halfw = 0.5 * d.mainw;
-    c.center = {
-      max: halfw + (d.zoomedMainW - d.mainw),
-      min: halfw
-    };
-  };
-  self.seriesesGdrag = function(event2) {
-    const s = self.settings.matrix;
-    const c = self.clickedSeriesCell;
-    const d = self.dimensions;
-    const dx = event2.clientX - c.event.clientX;
-    if (Math.abs(dx) < 1) return;
-    if (dx < c.dxMinPad || dx > c.dxMaxPad) return;
-    self.clickedSeriesCell.dx = dx;
-    self.translateElems(dx, d, s, c);
-  };
-  self.translateElems = function(dx, d, s, c) {
-    self.dom.seriesesG.attr("transform", `translate(${d.xOffset + d.seriesXoffset + dx},${d.yOffset})`);
-    self.layout.top.attr.adjustBoxTransform(dx);
-    self.layout.btm.attr.adjustBoxTransform(dx);
-    const computedCenter = s.zoomCenterPct * d.mainw - d.seriesXoffset - dx;
-    self.controlsRenderer.svgScrollApi.update({ zoomCenter: computedCenter });
-  };
-  self.seriesesGcancelDrag = function(event2) {
-    select_default("body").on("mousemove.sjppMatrixDrag", null).on("mouseup.sjppMatrixDrag", null);
-    const s = self.settings.matrix;
-    const d = self.dimensions;
-    const cc = self.clickedSeriesCell;
-    const _dx = event2.clientX - cc.event.clientX;
-    const dx = Math.min(cc.dxMax, Math.max(_dx, cc.dxMin));
-    if (Math.abs(_dx) < 1 || Math.abs(dx) < 1) {
-      self.translateElems(0, d, s, cc);
-      return;
-    }
-    self.translateElems(dx, d, s, cc);
-    const c = self.getVisibleCenterCell(dx);
-    self.app.dispatch({
-      type: "plot_edit",
-      id: self.id,
-      config: {
-        settings: {
-          matrix: {
-            zoomCenterPct: 0.5,
-            zoomIndex: c.totalIndex,
-            zoomGrpIndex: c.grpIndex
-          }
-        }
-      }
-    });
-  };
-  self.seriesesGoutlineZoom = function(event2) {
-    if (!self.clickedSeriesCell) return;
-    const s = self.config.settings.matrix;
-    const e = self.clickedSeriesCell.event;
-    if (self.clickedSeriesCell && !self.zoomArea) {
-      self.zoomArea = self.dom.seriesesG.append("rect").attr("fill", "rgba(50, 50, 50, 0.3)");
-      select_default("body").on("mouseup.matrixZoom", self.mouseup);
-      self.dom.mainG.selectAll("text").style("-webkit-user-select", "none").style("-moz-user-select", "none").style("-ms-user-select", "none").style("user-select", "none");
-    }
-    const dx = event2.clientX - e.clientX;
-    const dy = event2.clientY - e.clientY;
-    const x = dx > 0 ? self.zoomPointer[0] : self.zoomPointer[0] + dx + 3;
-    self.zoomWidth = Math.abs(dx);
-    self.zoomArea.attr("transform", `translate(${x},0)`).attr("width", Math.max(0, self.zoomWidth - 2)).attr("height", self.dimensions.mainh);
-    if (!self.clickedSeriesCell.endCell) self.clickedSeriesCell.endCell = self.getCellByPos(event2);
-  };
-  self.seriesesGtriggerZoom = function(event2) {
-    event2.stopPropagation();
-    self.dom.seriesesG.on("mousemove", null).on("mouseup", null);
-    select_default("body").on("mouseup.matrixZoom", null);
-    self.dom.mainG.selectAll("text").style("-webkit-user-select", "").style("-moz-user-select", "").style("-ms-user-select", "").style("user-select", "");
-    const c = self.clickedSeriesCell;
-    const endCell = self.getCellByPos(event2);
-    if (!c || !c.startCell) {
-      self.dom.mainG.on("mouseout", null);
-      delete self.clickedSeriesCell;
-      return;
-    } else if (!c.endCell || endCell === c.startCell) {
-      self.dom.mainG.on("mouseout", null);
-      self.dom.tip.hide();
-      const cell = event2.target.tagName == "rect" ? event2.target.__data__ : c.startCell;
-      if (cell) {
-        if (self.opts.cellClick) {
-          self.opts.cellClick(
-            structuredClone({
-              sampleData: cell.row,
-              term: cell.term,
-              value: cell.value,
-              s: cell.s,
-              t: cell.t,
-              siblingCells: cell.siblingCells.filter((c2) => c2 !== cell).map((c2) => ({
-                term: c2.term,
-                value: c2.value,
-                s: c2.s,
-                t: c2.t
-              }))
-            })
-          );
-        } else {
-          self.mouseclick(event2, cell);
-        }
-      }
-      delete self.clickedSeriesCell;
-      delete self.zoomArea;
-      return;
-    }
-    const s = self.settings.matrix;
-    const l = s.controlLabels;
-    c.endCell = endCell;
-    const ss = self.opts.allow2selectSamples;
-    const startCellTouched = c.startCell.totalIndex < c.endCell.totalIndex ? c.startCell : c.endCell;
-    const endCellTouched = c.startCell.totalIndex < c.endCell.totalIndex ? c.endCell : c.startCell;
-    const samplesSet = /* @__PURE__ */ new Set();
-    for (let i = startCellTouched.totalIndex; i <= endCellTouched.totalIndex; i++) {
-      samplesSet.add(self.sampleOrder[i].row);
-    }
-    const samples = [...samplesSet];
-    const optionArr = [
-      {
-        label: "Zoom in",
-        callback: self.triggerZoomArea
-      },
-      {
-        label: `List ${samples.length} ${l.samples}`,
-        callback: () => {
-          self.resetInteractions();
-          self.dom.tip.hide();
-          showTable(self, samples, event2.clientX, event2.clientY);
-        }
-      }
-    ];
-    if (ss) {
-      optionArr.push({
-        label: ss.buttonText || `Select ${l.Samples}`,
-        callback: async () => {
-          ss.callback({
-            samples: samples.map((c2) => {
-              return { "cases.case_id": c2.sample };
-            }),
-            source: `Selected ${l.samples} from OncoMatrix`
-          });
-          self.zoomArea.remove();
-          delete self.zoomArea;
-          delete self.clickedSeriesCell;
-        }
-      });
-    } else {
-      if (self.state.nav && self.state.nav.header_mode !== "hidden") {
-        for (const s2 of samples) {
-          if (!s2.sampleId) s2.sampleId = s2.sample;
-        }
-        optionArr.push({
-          label: "Add to a group",
-          callback: async () => {
-            self.resetInteractions();
-            const group = {
-              name: "Group",
-              items: samples
-            };
-            self.addGroup(group);
-          }
-        });
-      }
-    }
-    self.dom.dendroClickMenu.clear();
-    self.dom.clickMenu.clear();
-    self.mouseout();
-    self.dom.tip.hide();
-    self.dom.brushMenu.clear();
-    self.dom.brushMenu.d.selectAll("div").data(optionArr).enter().append("div").attr("class", "sja_menuoption").style("border-radius", "0px").html((d) => d.label).on("click", (event3) => {
-      self.dom.brushMenu.d.selectAll("*").remove();
-      event3.target.__data__.callback();
-    });
-    self.dom.brushMenu.show(event2.clientX, event2.clientY);
-  };
-  const showTable = function(self2, samples, x, y) {
-    delete self2.clickedSeriesCell;
-    const templates = self2.state.termdbConfig.urlTemplates;
-    const rows = templates?.sample ? samples.map((c) => [{ value: c._ref_.label, url: `${templates.sample.base}${c.sample}` }]) : samples.map((c) => [{ value: c._ref_.label }]);
-    const columns = [{ label: self2.settings.matrix.controlLabels.Samples }];
-    if (!self2.dom.sampleListMenu) self2.dom.sampleListMenu = new Menu({ padding: "5px" });
-    else self2.dom.sampleListMenu.clear();
-    const div = self2.dom.sampleListMenu.d.append("div");
-    renderTable({
-      rows,
-      columns,
-      div,
-      showLines: true,
-      maxWidth: columns.length * "30" + "vw",
-      maxHeight: "35vh",
-      resize: true
-    });
-    self2.dom.sampleListMenu.show(x, y);
-  };
-  self.addGroup = async function(group) {
-    const tw = getSamplelstTW([group]);
-    const filter = getFilter(tw);
-    addNewGroup(self.app, filter, self.state.groups);
-  };
-  self.triggerZoomArea = function() {
-    if (self.zoomArea) {
-      self.zoomArea.remove();
-      delete self.zoomArea;
-    }
-    const c = self.clickedSeriesCell;
-    delete self.clickedSeriesCell;
-    const s = self.settings.matrix;
-    const d = self.dimensions;
-    const start = c.startCell.totalIndex < c.endCell.totalIndex ? c.startCell : c.endCell;
-    const zoomIndex = Math.floor(start.totalIndex + Math.abs(c.endCell.totalIndex - c.startCell.totalIndex) / 2);
-    const centerCell = self.sampleOrder[zoomIndex] || self.getImgCell(event);
-    const colw = self.computedSettings.colw || self.settings.matrix.colw;
-    const maxZoomLevel = s.colwMax / colw;
-    const minZoomLevel = s.colwMin / colw;
-    const tentativeZoomLevel = s.zoomLevel * d.mainw / self.zoomWidth * 0.75;
-    const zoomLevel = Math.max(minZoomLevel, Math.min(tentativeZoomLevel, maxZoomLevel));
-    const zoomCenter = centerCell.totalIndex * d.dx + (centerCell.grpIndex - 1) * s.colgspace + d.seriesXoffset;
-    self.app.dispatch({
-      type: "plot_edit",
-      id: self.id,
-      config: {
-        settings: {
-          matrix: {
-            zoomLevel,
-            // try to keep the center of the grey zoom rectangle in the same position before and after zoom
-            // this could aslo support mouse scroll zoom in the future.
-            zoomCenterPct: zoomLevel < 1 && d.mainw >= d.zoomedMainW ? 0.5 : zoomCenter / d.mainw,
-            zoomIndex,
-            zoomGrpIndex: centerCell.grpIndex
-          }
-        }
-      }
-    });
-    self.resetInteractions();
-  };
-}
-function setLengendActions(self) {
-  self.legendLabelMouseover = (event2) => {
-    const targetData = event2.target.__data__;
-    if (!targetData || targetData.dt == dtgeneexpression || targetData.dt == dtmetaboliteintensity) {
-      return;
-    }
-    if (!targetData.isLegendItem && !targetData.dt) {
-      return;
-    }
-    const legendGrpHidden = self.config.legendGrpFilter.lst.find(
-      (f) => f.dt?.includes(targetData.dt) && (!f.origin || f.origin == targetData.origin)
-    ) && true;
-    if (targetData.isLegendItem && legendGrpHidden) {
-      return;
-    }
-    const term = self.termOrder.find((t) => t.tw.$id == targetData.$id);
-    if (term?.tw?.q?.type == "predefined-groupset" || term?.tw?.q?.type == "custom-groupset") {
-      return;
-    }
-    if (event2.target.nodeName == "rect") select_default(event2.target).style("stroke", "blue").style("cursor", "pointer");
-    else select_default(event2.target).style("fill", "blue").style("cursor", "pointer");
-  };
-  self.legendLabelMouseout = (event2) => {
-    if (event2.target.nodeName == "rect") select_default(event2.target).style("stroke", "#aaa");
-    else select_default(event2.target).style("fill", "");
-  };
-  self.legendLabelMouseup = (event2) => {
-    const targetData = event2.target.__data__;
-    if (!targetData || targetData.dt == dtgeneexpression || targetData.dt == dtmetaboliteintensity) {
-      return;
-    }
-    const byOrigin = self.state.termdbConfig.assayAvailability?.byDt?.[parseInt(targetData.dt)]?.byOrigin;
-    const menuGrp = self.dom.legendMenu.clear();
-    if (!targetData.isLegendItem) {
-      if (!targetData.dt) {
-        return;
-      }
-      const legendGrpFilterIndex = self.config.legendGrpFilter.lst.findIndex(
-        (f) => f.dt.slice().sort().toString() === targetData.dt.slice().sort().toString() && (!byOrigin || f.origin == targetData.origin)
-      );
-      const legendFilterIndex2 = self.config.legendValueFilter.lst.findIndex(
-        (l) => l.legendGrpName == targetData.name && l.tvs.values.find((v) => targetData.dt.includes(v.dt) && (!byOrigin || v.origin == targetData.origin))
-      );
-      const div2 = menuGrp.d.append("div");
-      if (legendGrpFilterIndex == -1) {
-        if (targetData.dt.includes(dtsnvindel)) {
-          div2.append("div").attr("class", "sja_menuoption sja_sharp_border").text(`Show only truncating mutations`).on("click", () => {
-            showOnlyTrunc(menuGrp, targetData, self);
-          });
-          div2.append("div").attr("class", "sja_menuoption sja_sharp_border").text(`Show only protein-changing mutations`).on("click", () => {
-            showOnlyPC(menuGrp, targetData, self);
-          });
-        }
-        const onlyGeneGroupShown = self.legendData.filter(
-          (l) => l.dt && !l.crossedOut && (l.name == targetData.name || l.items.find((i) => !i.greyedOut && !i.crossedOut))
-        ).length <= 1;
-        div2.append("div").attr(
-          "class",
-          onlyGeneGroupShown ? "sja_menuoption_not_interactive sja_sharp_border" : "sja_menuoption sja_sharp_border"
-        ).text(`Do not show ${targetData.name}`).style("opacity", onlyGeneGroupShown ? "0.5" : "1").on("click", () => {
-          if (!onlyGeneGroupShown) showNone(menuGrp, targetData, self);
-        });
-      }
-      if (legendGrpFilterIndex !== -1 || legendFilterIndex2 !== -1) {
-        div2.append("div").attr("class", "sja_menuoption sja_sharp_border").text(`Show all ${targetData.name}`).on("click", () => {
-          showAll(menuGrp, targetData, self);
-        });
-      }
-      const cnv = Object.keys(self.config.cnvCutoffs).length !== 0 ? self.config.cnvCutoffs : self.state.termdbConfig?.queries?.cnv;
-      const keys = Object.keys(cnv);
-      if (targetData.dt.includes(dtcnv) && legendGrpFilterIndex == -1 && (keys.includes("cnvGainCutoff") || keys.includes("cnvLossCutoff"))) {
-        const existingCnvSetDiv = div2.select(".cnv-set-div");
-        if (!existingCnvSetDiv.empty()) existingCnvSetDiv.remove();
-        const cnvSetDiv = div2.append("div").classed("cnv-set-div", true);
-        const arg = {
-          holder: cnvSetDiv,
-          cnvGainCutoff: cnv.cnvGainCutoff,
-          cnvLossCutoff: cnv.cnvLossCutoff,
-          cnvMaxLength: cnv.cnvMaxLength,
-          callback: (config) => {
-            menuGrp.hide();
-            self.config.cnvCutoffs = structuredClone(config);
-            for (const termgroup of self.config.termgroups) {
-              for (const t of termgroup.lst) {
-                if (t.term.type == "geneVariant") {
-                  t.q.cnvGainCutoff = config.cnvGainCutoff;
-                  t.q.cnvLossCutoff = config.cnvLossCutoff;
-                  t.q.cnvMaxLength = config.cnvMaxLength;
-                }
-              }
-            }
-            self.app.dispatch({
-              type: "plot_edit",
-              id: self.id,
-              config: self.config
-            });
-          }
-        };
-        renderCnvConfig(arg);
-      }
-      menuGrp.showunder(event2.target);
-      return;
-    }
-    const legendGrpHidden = self.config.legendGrpFilter.lst.find(
-      (f) => f.dt?.includes(targetData.dt) && (!f.origin || f.origin == targetData.origin)
-    ) && true;
-    if (targetData.isLegendItem && legendGrpHidden) {
-      return;
-    }
-    const term = self.terms.find((t) => t.tw.$id == targetData.$id);
-    if (term?.tw?.q?.type == "predefined-groupset" || term?.tw?.q?.type == "custom-groupset") {
-      return;
-    }
-    let legendFilterIndex;
-    if (targetData.dt) {
-      legendFilterIndex = self.config.legendValueFilter.lst.findIndex(
-        (l) => l.legendGrpName == targetData.termid && l.tvs.values.find(
-          (v) => v.dt == targetData.dt && (!byOrigin || v.origin == targetData.origin) && v.mclasslst[0] == targetData.key
-        )
-      );
-    } else {
-      const legendTerm = self.termOrder.find((to) => to.tw.$id == targetData.$id)?.tw?.term;
-      if (!legendTerm) {
-        return;
-      }
-      if (legendTerm.type == "categorical" || legendTerm.type == "survival") {
-        legendFilterIndex = self.config.legendValueFilter.lst.findIndex(
-          (l) => l.legendGrpName == targetData.termid && l.tvs.values.find((v) => v.key == targetData.key)
-        );
-      } else if (isNumericTerm(legendTerm)) {
-        legendFilterIndex = self.config.legendValueFilter.lst.findIndex(
-          (l) => l.legendGrpName == targetData.termid && l.tvs.ranges.find((r) => r.name == targetData.key)
-        );
-      }
-    }
-    const controlLabels = self.settings.matrix.controlLabels;
-    const div = menuGrp.d.append("div");
-    const addMenuOptions = (targetItemData) => {
-      const term2 = self.termOrder.find((t) => t.tw.$id == targetItemData.$id)?.tw?.term;
-      if (term2?.type !== "termCollection" && (!targetItemData.dt || self.type !== "hierCluster" || legendFilterIndex !== -1)) {
-        div.append("div").attr("class", "sja_menuoption sja_sharp_border").text(
-          targetItemData.dt ? legendFilterIndex == -1 ? `Hide ${controlLabels.samples} with ${mclass[targetItemData.key].label}` : `Show ${controlLabels.samples} with ${mclass[targetItemData.key].label}` : legendFilterIndex == -1 ? "Hide" : "Show"
-        ).on("click", () => {
-          menuGrp.hide();
-          if (legendFilterIndex == -1) {
-            if (targetItemData.dt) {
-              const filterNew = {
-                legendGrpName: targetItemData.termid,
-                type: "tvs",
-                tvs: {
-                  isnot: true,
-                  legendFilterType: "geneVariant_hard",
-                  // indicates this matrix legend filter is hard filter
-                  term: { type: "geneVariant" },
-                  values: [
-                    {
-                      dt: targetItemData.dt,
-                      origin: targetItemData.origin,
-                      mclasslst: [targetItemData.key]
-                    }
-                  ]
-                }
-              };
-              self.config.legendValueFilter.lst.push(filterNew);
-            } else {
-              const term3 = self.termOrder.find((t) => t.tw.$id == targetItemData.$id).tw.term;
-              if (term3.type == "categorical" || term3.type == "survival") {
-                term3.$id = targetItemData.$id;
-                const filterGrpIndex = self.config.legendValueFilter.lst.findIndex(
-                  (l) => l.legendGrpName == targetItemData.termid
-                );
-                if (filterGrpIndex == -1) {
-                  const filterNew = {
-                    legendGrpName: targetItemData.termid,
-                    type: "tvs",
-                    tvs: {
-                      isnot: true,
-                      term: term3,
-                      values: [{ key: targetItemData.key }]
-                    }
-                  };
-                  self.config.legendValueFilter.lst.push(filterNew);
-                } else {
-                  self.config.legendValueFilter.lst[filterGrpIndex].tvs.values.push({ key: targetItemData.key });
-                }
-              } else if (isNumericTerm(term3)) {
-                term3.$id = targetItemData.$id;
-                const filterNew = {
-                  legendGrpName: targetItemData.termid,
-                  type: "tvs",
-                  tvs: {
-                    isnot: true,
-                    term: term3,
-                    ranges: [self.data.refs.byTermId[targetItemData.$id].bins.find((b) => targetItemData.key == b.name)]
-                  }
-                };
-                self.config.legendValueFilter.lst.push(filterNew);
-              }
-            }
-          } else {
-            if (targetItemData.dt) self.config.legendValueFilter.lst.splice(legendFilterIndex, 1);
-            else {
-              const term3 = self.termOrder.find((t) => t.tw.$id == targetItemData.$id).tw.term;
-              if (term3.type == "categorical" || term3.type == "survival") {
-                const filterGrpIndex = self.config.legendValueFilter.lst.findIndex(
-                  (l) => l.legendGrpName == targetItemData.termid
-                );
-                const filterIndex = self.config.legendValueFilter.lst[filterGrpIndex].tvs.values.findIndex(
-                  (v) => v.key == targetItemData.key
-                );
-                self.config.legendValueFilter.lst[filterGrpIndex].tvs.values.splice(filterIndex, 1);
-              } else self.config.legendValueFilter.lst.splice(legendFilterIndex, 1);
-            }
-          }
-          if (self.state.config.settings.matrix.addMutationCNVButtons && self.chartType !== "hierCluster") {
-            if (targetItemData.dt == dtsnvindel) {
-              self.config.settings.matrix.showMatrixMutation = "bySelection";
-              const cl = self.settings.matrix.controlLabels;
-              if (self.legendData.find((l) => l.name == cl.Mutations)?.items?.length == self.config.legendValueFilter.lst.filter((l) => l.legendGrpName == cl.Mutations)?.length) {
-                self.config.settings.matrix.allMatrixMutationHidden = true;
-              } else self.config.settings.matrix.allMatrixMutationHidden = false;
-            }
-            if (targetItemData.dt == dtcnv) {
-              self.config.settings.matrix.showMatrixCNV = "bySelection";
-              if (self.legendData.find((l) => l.name == "CNV")?.items?.length == self.config.legendValueFilter.lst.filter((l) => l.legendGrpName == "CNV")?.length) {
-                self.config.settings.matrix.allMatrixCNVHidden = true;
-                if (self.config.settings.matrix.cellEncoding == "oncoprint")
-                  self.config.settings.matrix.cellEncoding = "single";
-              } else {
-                self.config.settings.matrix.allMatrixCNVHidden = false;
-                if (self.config.settings.matrix.cellEncoding !== "")
-                  self.config.settings.matrix.cellEncoding = "oncoprint";
-              }
-            }
-          }
-          self.app.dispatch({
-            type: "plot_edit",
-            id: self.id,
-            config: self.config
-          });
-        });
-      }
-      if (targetItemData.isLegendItem) {
-        if (targetItemData.dt && legendFilterIndex == -1 && term2?.type !== "termCollection") {
-          div.append("div").attr("class", "sja_menuoption sja_sharp_border").text(`Do not show ${mclass[targetItemData.key]?.label}`).on("click", () => {
-            menuGrp.hide();
-            const filterNew = {
-              legendGrpName: targetItemData.termid,
-              type: "tvs",
-              tvs: {
-                isnot: true,
-                legendFilterType: "geneVariant_soft",
-                // indicates this matrix legend filter is soft filter
-                term: { type: "geneVariant" },
-                values: [{ dt: targetItemData.dt, origin: targetItemData.origin, mclasslst: [targetItemData.key] }]
-              }
-            };
-            self.config.legendValueFilter.lst.push(filterNew);
-            if (self.state.config.settings.matrix.addMutationCNVButtons && self.chartType !== "hierCluster") {
-              if (targetItemData.dt == dtsnvindel) {
-                self.config.settings.matrix.showMatrixMutation = "bySelection";
-                const cl = self.settings.matrix.controlLabels;
-                if (self.legendData.find((l) => l.name == cl.Mutations)?.items?.length == self.config.legendValueFilter.lst.filter((l) => l.legendGrpName == cl.Mutations)?.length) {
-                  self.config.settings.matrix.allMatrixMutationHidden = true;
-                } else self.config.settings.matrix.allMatrixMutationHidden = false;
-              }
-              if (targetItemData.dt == dtcnv) {
-                self.config.settings.matrix.showMatrixCNV = "bySelection";
-                if (self.legendData.find((l) => l.name == "CNV")?.items?.length == self.config.legendValueFilter.lst.filter((l) => l.legendGrpName == "CNV")?.length) {
-                  self.config.settings.matrix.allMatrixCNVHidden = true;
-                  if (self.config.settings.matrix.cellEncoding == "oncoprint")
-                    self.config.settings.matrix.cellEncoding = "single";
-                } else self.config.settings.matrix.allMatrixCNVHidden = false;
-              }
-            }
-            self.app.dispatch({
-              type: "plot_edit",
-              id: self.id,
-              config: self.config
-            });
-          });
-        }
-        if (!targetItemData.dt && term2?.type !== "termCollection") {
-          div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show only").on("click", () => {
-            menuGrp.hide();
-            const term3 = self.termOrder.find((t) => t.tw.$id == targetItemData.$id)?.tw?.term;
-            const legendGrp = self.legendData.find((lg) => lg.name == targetItemData.termid) || self.legendData.find((lg) => lg.$id == targetItemData.$id);
-            self.config.legendValueFilter.lst = self.config.legendValueFilter.lst.filter(
-              (l) => l.legendGrpName !== targetItemData.termid
-            );
-            if (term3.type == "categorical" || term3.type == "survival") {
-              term3.$id = targetItemData.$id;
-              for (const l of legendGrp.items) {
-                if (l.key == targetItemData.key) continue;
-                const filterGrpIndex = self.config.legendValueFilter.lst.findIndex(
-                  (l2) => l2.legendGrpName == targetItemData.termid
-                );
-                if (filterGrpIndex == -1) {
-                  const filterNew = {
-                    legendGrpName: targetItemData.termid,
-                    type: "tvs",
-                    tvs: {
-                      isnot: true,
-                      term: term3,
-                      values: [{ key: l.key }]
-                    }
-                  };
-                  self.config.legendValueFilter.lst.push(filterNew);
-                } else {
-                  self.config.legendValueFilter.lst[filterGrpIndex].tvs.values.push({ key: l.key });
-                }
-              }
-            } else if (isNumericTerm(term3)) {
-              term3.$id = targetItemData.$id;
-              for (const l of legendGrp.items) {
-                if (l.key == targetItemData.key) continue;
-                const filterNew = {
-                  legendGrpName: targetItemData.termid,
-                  type: "tvs",
-                  tvs: {
-                    isnot: true,
-                    term: term3,
-                    ranges: [self.data.refs.byTermId[targetItemData.$id].bins.find((b) => l.key == b.name)]
-                  }
-                };
-                if (!self.config.legendValueFilter.lst.length) self.config.legendValueFilter.lst = [filterNew];
-                else self.config.legendValueFilter.lst.push(filterNew);
-              }
-            }
-            self.app.dispatch({
-              type: "plot_edit",
-              id: self.id,
-              config: self.config
-            });
-          });
-        }
-        if (!targetItemData.dt && term2?.type !== "termCollection") {
-          div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show all").on("click", () => {
-            menuGrp.hide();
-            self.config.legendValueFilter.lst = self.config.legendValueFilter.lst.filter(
-              (l) => l.legendGrpName !== targetItemData.termid
-            );
-            self.app.dispatch({
-              type: "plot_edit",
-              id: self.id,
-              config: self.config
-            });
-          });
-        }
-        if (!targetData.domain) {
-          div.append("span").text("Color").style("padding", "5px 10px").style("margin", "1px");
-          self.dom.legendColorInput = div.append("input").attr("type", "color").attr("aria-label", `change the bar color`).attr("value", targetData.color?.startsWith("rgb") ? rgb2hex(targetData.color) : targetData.color).on("change", async () => {
-            menuGrp.hide();
-            const color = self.dom.legendColorInput.node().value;
-            if (targetData.dt) {
-              if (!mclass[targetData.key].origColor) mclass[targetData.key].origColor = mclass[targetData.key].color;
-              mclass[targetData.key].color = color;
-              self.main();
-              return;
-            }
-            const twSpecificSettings = self.config.settings.matrix.twSpecificSettings;
-            if (!twSpecificSettings[targetData.$id]) twSpecificSettings[targetData.$id] = {};
-            const twSettings = twSpecificSettings[targetData.$id];
-            if (!twSettings[targetData.key]) twSettings[targetData.key] = {};
-            twSettings[targetData.key].color = color;
-            self.app.dispatch({
-              type: "plot_edit",
-              id: self.opts.id,
-              config: { settings: { matrix: { twSpecificSettings } } }
-            });
-          });
-          if (targetData.dt && mclass[targetData.key].origColor) {
-            const resetDiv = div.append("div").style("display", "inline-block");
-            const handler = () => {
-              menuGrp.hide();
-              mclass[targetData.key].color = mclass[targetData.key].origColor;
-              delete mclass[targetData.key].origColor;
-              self.main();
-            };
-            icons["restart"](resetDiv, { handler, title: "Reset to original color" });
-          }
-        }
-        menuGrp.showunder(event2.target);
-      }
-    };
-    if (targetData.parents) {
-      for (const p of targetData.parents) {
-        addMenuOptions(p);
-      }
-    } else {
-      addMenuOptions(targetData);
-    }
-  };
-}
-function setMutationSelectionActions(self) {
-  self.mutationSelectionActions = {
-    onlyTruncating: showOnlyTrunc,
-    onlyPC: showOnlyPC,
-    none: showNone,
-    all: showAll,
-    bySelection: showByLegendFilter
-  };
-  self.mutationControlCallback = (mutationSelection) => {
-    const menuGrp = self.dom.legendMenu.clear();
-    const targetData = self.legendData.find((l) => l.dt?.includes(dtsnvindel));
-    self.mutationSelectionActions[mutationSelection](menuGrp, targetData, self, "mutation");
-  };
-  self.CNVControlCallback = (CNVSelection) => {
-    const menuGrp = self.dom.legendMenu.clear();
-    const targetData = self.legendData.find((l) => l.dt?.includes(dtcnv));
-    self.mutationSelectionActions[CNVSelection](menuGrp, targetData, self, "CNV");
-  };
-  self.geneStyleControlCallback = (styleSelection) => {
-    const targetData = self.legendData.find((l) => l.dt?.includes(dtcnv));
-    if (styleSelection == "") showStackedStyle(targetData, self);
-    else if (styleSelection == "single") showSingleStyle(targetData, self);
-    else if (styleSelection == "oncoprint") showOncoprintStyle(targetData, self);
-  };
-}
-function showSingleStyle(targetData, self) {
-  if (self.state.config.settings.matrix.addMutationCNVButtons && self.chartType !== "hierCluster") {
-    if (targetData) {
-      const byOrigin = self.state.termdbConfig.assayAvailability?.byDt?.[parseInt(targetData.dt)]?.byOrigin;
-      const legendGrpFilterIndex = self.config.legendGrpFilter.lst.findIndex(
-        (f) => f.dt.slice().sort().toString() === targetData.dt.slice().sort().toString() && (!byOrigin || f.origin == targetData.origin)
-      );
-      if (legendGrpFilterIndex == -1) {
-        const filterNew = { dt: targetData.dt };
-        if (byOrigin) {
-          filterNew.origin = targetData.origin;
-        }
-        self.config.legendValueFilter.lst = self.config.legendValueFilter.lst.filter(
-          (f) => f.legendGrpName !== targetData.name
-        );
-        self.config.legendGrpFilter.lst.push(filterNew);
-      }
-    }
-    self.config.settings.matrix.cellEncoding = "single";
-  }
-  self.app.dispatch({
-    type: "plot_edit",
-    id: self.id,
-    config: self.config
-  });
-}
-function showOncoprintStyle(targetData, self) {
-  if (self.state.config.settings.matrix.addMutationCNVButtons && self.chartType !== "hierCluster") {
-    if (targetData) {
-      const byOrigin = self.state.termdbConfig.assayAvailability?.byDt?.[parseInt(targetData.dt)]?.byOrigin;
-      const legendGrpFilterIndex = self.config.legendGrpFilter.lst.findIndex(
-        (f) => f.dt.slice().sort().toString() === targetData.dt.slice().sort().toString() && (!byOrigin || f.origin == targetData.origin)
-      );
-      if (legendGrpFilterIndex !== -1) self.config.legendGrpFilter.lst.splice(legendGrpFilterIndex, 1);
-      self.config.legendValueFilter.lst = self.config.legendValueFilter.lst.filter(
-        (f) => f.legendGrpName !== targetData.name
-      );
-    }
-    self.config.settings.matrix.showMatrixCNV = "all";
-    self.config.settings.matrix.allMatrixCNVHidden = false;
-  }
-  self.config.settings.matrix.cellEncoding = "oncoprint";
-  self.app.dispatch({
-    type: "plot_edit",
-    id: self.id,
-    config: self.config
-  });
-}
-function showStackedStyle(targetData, self) {
-  if (self.state.config.settings.matrix.addMutationCNVButtons && self.chartType !== "hierCluster") {
-    if (targetData) {
-      const byOrigin = self.state.termdbConfig.assayAvailability?.byDt?.[parseInt(targetData.dt)]?.byOrigin;
-      const legendGrpFilterIndex = self.config.legendGrpFilter.lst.findIndex(
-        (f) => f.dt.slice().sort().toString() === targetData.dt.slice().sort().toString() && (!byOrigin || f.origin == targetData.origin)
-      );
-      if (legendGrpFilterIndex !== -1) self.config.legendGrpFilter.lst.splice(legendGrpFilterIndex, 1);
-      self.config.legendValueFilter.lst = self.config.legendValueFilter.lst.filter(
-        (f) => f.legendGrpName !== targetData.name
-      );
-    }
-  }
-  self.config.settings.matrix.cellEncoding = "";
-  self.app.dispatch({
-    type: "plot_edit",
-    id: self.id,
-    config: self.config
-  });
-}
-function showOnlyTrunc(menuGrp, targetData, self) {
-  menuGrp.hide();
-  if (targetData) {
-    self.config.legendValueFilter.lst = self.config.legendValueFilter.lst.filter(
-      (f) => f.legendGrpName !== targetData.name
-    );
-    self.config.legendGrpFilter.lst = self.config.legendGrpFilter.lst.filter(
-      (f) => !(f.dt.includes(dtsnvindel) && f.origin == targetData.origin)
-    );
-    const truncatingM = self.config.settings.matrix.truncatingMutations;
-    const controlLabels = self.config.settings.matrix.controlLabels;
-    for (const [k, v] of Object.entries(mclass)) {
-      if (truncatingM.includes(k) || v.dt != dtsnvindel) continue;
-      const filterNew = {
-        legendGrpName: targetData.origin ? `${targetData.origin[0].toUpperCase() + targetData.origin.slice(1)} ${controlLabels.Mutations}` : controlLabels.Mutations,
-        type: "tvs",
-        tvs: {
-          isnot: true,
-          legendFilterType: "geneVariant_soft",
-          term: { type: "geneVariant" },
-          values: [{ dt: dtsnvindel, origin: targetData.origin, mclasslst: [k] }]
-        }
-      };
-      self.config.legendValueFilter.lst.push(filterNew);
-    }
-  }
-  self.app.dispatch({
-    type: "plot_edit",
-    id: self.id,
-    config: self.config
-  });
-}
-function showOnlyPC(menuGrp, targetData, self) {
-  menuGrp.hide();
-  if (targetData) {
-    self.config.legendValueFilter.lst = self.config.legendValueFilter.lst.filter(
-      (f) => f.legendGrpName !== targetData.name
-    );
-    self.config.legendGrpFilter.lst = self.config.legendGrpFilter.lst.filter(
-      (f) => !(f.dt.includes(dtsnvindel) && f.origin == targetData.origin)
-    );
-    const proteinChangingMutations = self.config.settings.matrix.proteinChangingMutations;
-    const controlLabels = self.config.settings.matrix.controlLabels;
-    for (const [k, v] of Object.entries(mclass)) {
-      if (proteinChangingMutations.includes(k) || v.dt != dtsnvindel) continue;
-      const filterNew = {
-        legendGrpName: targetData.origin ? `${targetData.origin[0].toUpperCase() + targetData.origin.slice(1)} ${controlLabels.Mutations}` : controlLabels.Mutations,
-        type: "tvs",
-        tvs: {
-          isnot: true,
-          legendFilterType: "geneVariant_soft",
-          term: { type: "geneVariant" },
-          values: [{ dt: dtsnvindel, origin: targetData.origin, mclasslst: [k] }]
-        }
-      };
-      self.config.legendValueFilter.lst.push(filterNew);
-    }
-  }
-  self.app.dispatch({
-    type: "plot_edit",
-    id: self.id,
-    config: self.config
-  });
-}
-function showNone(menuGrp, targetData, self, target) {
-  menuGrp.hide();
-  if (targetData) {
-    const byOrigin = self.state.termdbConfig.assayAvailability?.byDt?.[parseInt(targetData.dt)]?.byOrigin;
-    const legendGrpFilterIndex = self.config.legendGrpFilter.lst.findIndex(
-      (f) => f.dt.slice().sort().toString() === targetData.dt.slice().sort().toString() && (!byOrigin || f.origin == targetData.origin)
-    );
-    if (legendGrpFilterIndex == -1) {
-      const filterNew = { dt: targetData.dt };
-      if (byOrigin) {
-        filterNew.origin = targetData.origin;
-      }
-      self.config.legendValueFilter.lst = self.config.legendValueFilter.lst.filter(
-        (f) => f.legendGrpName !== targetData.name
-      );
-      self.config.legendGrpFilter.lst.push(filterNew);
-    }
-  }
-  if (self.state.config.settings.matrix.addMutationCNVButtons && self.chartType !== "hierCluster" && (target == "CNV" || targetData?.dt?.includes(dtcnv)) && self.config.settings.matrix.cellEncoding == "oncoprint") {
-    self.config.settings.matrix.cellEncoding = "single";
-  }
-  self.app.dispatch({
-    type: "plot_edit",
-    id: self.id,
-    config: self.config
-  });
-}
-function getConfigForShowAll(self, targetData, target) {
-  if (targetData) {
-    const byOrigin = self.state.termdbConfig.assayAvailability?.byDt?.[parseInt(targetData.dt)]?.byOrigin;
-    const legendGrpFilterIndex = self.config.legendGrpFilter.lst.findIndex(
-      (f) => f.dt.slice().sort().toString() === targetData.dt.slice().sort().toString() && (!byOrigin || f.origin == targetData.origin)
-    );
-    const legendFilterIndex = self.config.legendValueFilter.lst.findIndex(
-      (l) => l.legendGrpName == targetData.name && l.tvs.values.find((v) => targetData.dt.includes(v.dt) && (!byOrigin || v.origin == targetData.origin))
-    );
-    if (legendGrpFilterIndex !== -1) self.config.legendGrpFilter.lst.splice(legendGrpFilterIndex, 1);
-    if (legendFilterIndex !== -1)
-      self.config.legendValueFilter.lst = self.config.legendValueFilter.lst.filter(
-        (f) => f.legendGrpName != targetData.name
-      );
-  }
-  const s = self.config.settings.matrix;
-  if (s.addMutationCNVButtons && self.chartType !== "hierCluster" && (target == "CNV" || targetData?.dt?.includes(dtcnv)) && s.cellEncoding !== "") {
-    s.cellEncoding = "oncoprint";
-  }
-  return self.config;
-}
-function showAll(menuGrp, targetData, self, target) {
-  menuGrp.hide();
-  self.app.dispatch({
-    type: "plot_edit",
-    id: self.id,
-    config: getConfigForShowAll(self, targetData, target)
-  });
-}
-function showByLegendFilter(menuGrp, targetData, self, target) {
-  menuGrp.hide();
-  const s = self.config.settings.matrix;
-  if (!targetData) {
-    if (s.addMutationCNVButtons && self.chartType !== "hierCluster" && target == "mutation") {
-      s.showMatrixMutation = "bySelection";
-    } else if (s.addMutationCNVButtons && self.chartType !== "hierCluster" && target == "CNV") {
-      s.showMatrixCNV = "bySelection";
-    }
-    self.app.dispatch({
-      type: "plot_edit",
-      id: self.id,
-      config: self.config
-    });
-    return;
-  }
-  self.app.tip.d.selectAll(".byLFClassDiv").remove();
-  const classDiv = self.app.tip.d.append("div").attr("class", "byLFClassDiv");
-  const checkboxName = Math.random().toString();
-  const mClassDiv = classDiv.selectAll(":scope>div").data(target == "mutation" ? s.mutationClasses : s.CNVClasses).enter().append("label").style("margin", "5px").style("margin-left", "30px").style("display", "block").each(function(d) {
-    const mclassDisabled = self.config.legendValueFilter.lst.find(
-      (f) => f.tvs.legendFilterType == "geneVariant_hard" && f.tvs.values[0].dt == mclass[d].dt && f.tvs.values[0].mclasslst.includes(d)
-    );
-    const mclassHidden = target == "mutation" ? s.hiddenMutations.includes(d) : s.hiddenCNVs.includes(d);
-    const oneClassDiv = select_default(this).attr("class", "sjpp_row_wrapper");
-    oneClassDiv.append("input").attr("type", "checkbox").attr("name", checkboxName).property("disabled", mclassDisabled ? true : false).property("checked", mclassDisabled || mclassHidden ? false : true).style("vertical-align", "top").style("margin-right", "3px").on("change", function() {
-      const anyChecked = mClassDiv.selectAll(`input[type='checkbox'][name='${checkboxName}']:checked`).empty();
-      applyBtn.property("disabled", anyChecked);
-    });
-    oneClassDiv.append("span").style("margin-left", "3px").html(mclass[d].label).style("text-decoration", mclassDisabled ? "line-through" : "");
-  });
-  const applyBtn = classDiv.append("button").property("disabled", true).style("margin-top", "3px").text("Apply").on("click", () => {
-    const checkedCheckboxes = mClassDiv.selectAll(`input[type='checkbox'][name='${checkboxName}']:checked`);
-    const checkedItems = checkedCheckboxes.nodes().map((c) => select_default(c).datum());
-    menuGrp.hide();
-    self.config.legendValueFilter.lst = self.config.legendValueFilter.lst.filter(
-      (f) => f.legendGrpName !== targetData.name || f.tvs.legendFilterType == "geneVariant_hard"
-    );
-    self.config.legendGrpFilter.lst = self.config.legendGrpFilter.lst.filter(
-      (f) => !(f.dt.includes(dtsnvindel) && targetData.dt.includes(dtsnvindel) || f.dt.includes(dtcnv) && targetData.dt.includes(dtcnv))
-    );
-    for (const item of target == "mutation" ? s.mutationClasses : s.CNVClasses) {
-      if (checkedItems.includes(item)) continue;
-      const filterNew = {
-        legendGrpName: targetData.name,
-        type: "tvs",
-        tvs: {
-          isnot: true,
-          legendFilterType: "geneVariant_soft",
-          // indicates this matrix legend filter is soft filter
-          term: { type: "geneVariant" },
-          values: [{ dt: mclass[item].dt, origin: targetData.origin, mclasslst: [item] }]
-        }
-      };
-      self.config.legendValueFilter.lst.push(filterNew);
-    }
-    if (self.state.config.settings.matrix.addMutationCNVButtons && self.chartType !== "hierCluster" && (target == "CNV" || targetData?.dt?.includes(dtcnv))) {
-      if (checkedItems.length == 0 && self.config.settings.matrix.cellEncoding == "oncoprint") {
-        self.config.settings.matrix.cellEncoding = "single";
-      } else if (checkedItems.length > 0 && self.config.settings.matrix.cellEncoding == "single") {
-        self.config.settings.matrix.cellEncoding = "oncoprint";
-      }
-    }
-    self.app.dispatch({
-      type: "plot_edit",
-      id: self.id,
-      config: self.config
-    });
-  });
-}
-function getLabel(c, v, p) {
-  let fusionLabel;
-  if (p)
-    fusionLabel = p[0].a.name && p[0].b.name ? p[0].a.name + "::" + p[0].b.name : p[0].a.name ? p[0].a.name + "::?" : p[0].b.name ? "?::" + p[0].b.name : "";
-  const label = c.t.grp.type == "hierCluster" ? v.value : v && v.dt == dtcnv && v.value ? `${mclass[v.class].label} (${v.value.toFixed(2)})` : p ? fusionLabel : v.mname ? `${v.mname} ${mclass[v.class].label}` : mclass[v.class].label;
-  return label;
-}
-
-export {
-  setInteractivity,
-  getConfigForShowAll,
-  showAll
-};
-//# sourceMappingURL=chunk-BP2F2GRB.js.map