@sjcrh/proteinpaint-client 2.166.0 → 2.167.1

package/dist/chunk-RKV3CP4C.js

@@ -0,0 +1,258 @@
+import {
+  Menu
+} from "./chunk-TGZA4ETW.js";
+import {
+  pointer_default,
+  select_default
+} from "./chunk-NDWTN4U5.js";
+
+// dom/svgSeriesTips.js
+function getSeriesTip(line, rect, _tip = null) {
+  const tip = _tip || new Menu({ padding: "5px" });
+  line.style("display", "none");
+  const rectNode = rect.style("fill", "transparent").node();
+  function mouseOver(event) {
+    const m = pointer_default(event, rectNode);
+    const mx = m[0];
+    const xVal = +opts.xScale.invert(mx).toFixed(opts.decimals);
+    const x = opts.xScale(xVal);
+    line.style("display", "").attr("stroke", "#aaa").attr("stroke-dasharray", 4).attr("x1", x).attr("x2", x);
+    const seriesHtmls = [];
+    for (const series of opts.serieses) {
+      const data = series.data;
+      const data_x = data.map((d) => d.x);
+      if (xVal >= Math.min(...data_x) && xVal <= Math.max(...data_x)) {
+        const max = Math.max(...data_x.filter((x2) => x2 <= xVal));
+        const timepoint = data.find((d) => d.x == max);
+        if (timepoint) seriesHtmls.push(timepoint.html);
+      }
+    }
+    if (seriesHtmls.length) {
+      tip.show(event.clientX, event.clientY).d.html(`${opts.xTitleLabel}: ${xVal}<br>` + seriesHtmls.map((d) => d).join(opts.separator));
+    } else {
+      tip.hide();
+    }
+  }
+  rect.on("mouseover", mouseOver).on("mousemove", mouseOver).on("mouseout", () => {
+    line.style("display", "none");
+    tip.hide();
+  });
+  const opts = {
+    separator: "<br>",
+    decimals: 1
+  };
+  return {
+    /*
+    			Will update the length of the vertical line
+    			and reassign optional data values
+    
+    			!!! MUST call api.update() before the expected mouseover event,
+    			so that the line will have the proper length and the mouse
+    			position could be computed with .xScale !!! 
+    
+    			_opts{}
+    			.xScale					required
+    										the d3-scale object that was used for the rect dimensions
+    										
+    			.xTitleLabel			required
+    										title of x-axis
+    										will be used as label of x-value in tooltip
+    
+    			.serieses[{data}] 		required
+    										array of series objects, assumed to be visibly rendered
+    							
+    				.data[{x, html}]	required
+    										array of data objects
+    										the series data that is currently rendered in the chart
+    					
+    					.x 				required, float
+    										the datapoint's actual, unscaled x value
+    					
+    					.html   		required, string
+    										the HTML to display in the tooltip if this datapoint's 
+    										x value matched the vertical line's position
+    
+    			.separator				optional, string
+    										the html to be used to join the series html strings when displayed in the tooltip
+    
+    			.decimals				optional, number
+    										number of decimal places of the datapoint's x-value
+    										will control the precision of the vertical line
+    		*/
+    update(_opts = {}) {
+      Object.assign(opts, _opts);
+      const x = rect.attr("x");
+      const y = rect.attr("y");
+      line.attr("x1", x).attr("x2", x).attr("y1", y).attr("y2", rect.attr("height") - y);
+    },
+    /*
+    	detroy to help minimize memory leaks
+    	from elements and event handlers not being garbage collected
+    	because of non-deactivated references
+    */
+    destroy() {
+      rect.on("mouseover", null).on("mousemove", null).on("mouseout", null);
+    }
+  };
+}
+
+// dom/renderAtRisk.js
+function renderAtRiskG({ g, s, chart, order, term2toColor, onSerieClick }) {
+  const bySeries = {};
+  const xTickValues = chart.xTickValues.filter((xTick) => xTick >= chart.xMin);
+  for (const series of chart.visibleSerieses) {
+    const counts = [];
+    let i = 0, d = series.data[0], prev = d, nCensored = 0;
+    for (const time of xTickValues) {
+      while (d && d.x < time) {
+        nCensored += d.ncensor;
+        prev = d;
+        i++;
+        d = series.data[i];
+      }
+      if (d && d.x === time) {
+        counts.push([time, d.nrisk, nCensored]);
+      } else {
+        counts.push([time, prev.nrisk - prev.nevent - prev.ncensor, nCensored]);
+      }
+    }
+    bySeries[series.seriesId] = counts;
+  }
+  const y = s.svgh - s.svgPadding.top - s.svgPadding.bottom + 60;
+  const seriesOrder = order || chart.serieses.map((s2) => s2.seriesId);
+  let data;
+  g.selectAll(".sjpp-atrisk-title").remove();
+  if (s.atRiskVisible) {
+    data = Object.keys(bySeries).sort((a, b) => seriesOrder.indexOf(a) - seriesOrder.indexOf(b));
+    const addYoffset = chart.serieses.length == 1 && !chart.serieses[0].seriesId;
+    const titleg = g.append("text").attr("class", "sjpp-atrisk-title").attr("transform", `translate(${s.atRiskLabelOffset}, ${addYoffset ? 2 * s.axisTitleFontSize : 0})`).attr("text-anchor", "end").attr("font-size", `${s.axisTitleFontSize - 4}px`).attr("cursor", chart.serieses.length == 1 ? "pointer" : "default").text("Number at risk").on("click", chart.serieses.length == 1 ? (e) => onSerieClick({ seriesId: "" }, e.clientX, e.clientY) : null);
+    if (term2toColor[""]) titleg.style("fill", s.defaultColor);
+    titleg.append("tspan").attr("x", 0).attr("y", s.axisTitleFontSize - 4).text("(# censored)");
+  } else {
+    data = [];
+  }
+  const sg = g.attr("transform", `translate(0,${y})`).selectAll(":scope > g").data(data, (seriesId) => seriesId);
+  sg.exit().remove();
+  sg.each(function(seriesId, i) {
+    const y2 = (i + 1) * (2 * s.axisTitleFontSize);
+    const g2 = select_default(this).attr("transform", `translate(0,${y2})`).attr("fill", term2toColor[""] ? s.defaultColor : term2toColor[seriesId].adjusted);
+    renderAtRiskTick(g2.select(":scope>g"), chart, xTickValues, s, seriesId, bySeries[seriesId]);
+  });
+  sg.enter().append("g").each(function(seriesId, i) {
+    const y2 = (i + 1) * (2 * s.axisTitleFontSize);
+    const g2 = select_default(this).attr("transform", `translate(0,${y2})`).attr("fill", term2toColor[""] ? s.defaultColor : term2toColor[seriesId].adjusted).on("click", (e) => onSerieClick({ seriesId }, e.clientX, e.clientY));
+    const sObj = chart.serieses.find((s2) => s2.seriesId === seriesId);
+    g2.append("text").attr("data-testid", "sjpp-atrisk-seriesId").attr("transform", `translate(${s.atRiskLabelOffset}, 0)`).attr("text-anchor", "end").attr("font-size", `${s.axisTitleFontSize - 4}px`).attr("cursor", "pointer").datum({ seriesId }).text(seriesId && seriesId != "*" ? sObj.seriesLabel || seriesId : "");
+    renderAtRiskTick(g2.append("g"), chart, xTickValues, s, seriesId, bySeries[seriesId]);
+  });
+}
+function renderAtRiskTick(g, chart, xTickValues, s, seriesId, series) {
+  const reversed = series.slice().reverse();
+  const data = xTickValues.map((tickVal) => {
+    if (tickVal === 0) return { seriesId, tickVal, atRisk: series[0][1], nCensored: series[0][2] };
+    const d = reversed.find((d2) => d2[0] <= tickVal);
+    return { seriesId, tickVal, atRisk: d[1], nCensored: d[2] };
+  });
+  const text = g.selectAll("text").data(data);
+  text.exit().remove();
+  text.attr("transform", (d) => `translate(${chart.xScale(d.tickVal)},0)`).attr("text-anchor", "middle").attr("font-size", `${s.axisTitleFontSize - 4}px`).attr("cursor", "pointer").each(renderAtRiskLabel);
+  text.enter().append("text").attr("transform", (d) => `translate(${chart.xScale(d.tickVal)},0)`).attr("text-anchor", "middle").attr("font-size", `${s.axisTitleFontSize - 4}px`).attr("cursor", "pointer").each(renderAtRiskLabel);
+  function renderAtRiskLabel(d) {
+    const tspans = select_default(this).selectAll("tspan").data([d.atRisk, `(${d.nCensored})`]);
+    tspans.exit().remove();
+    tspans.attr("y", (d2, i) => i === 0 ? 0 : i * (s.axisTitleFontSize - 4)).text((d2) => d2);
+    tspans.enter().append("tspan").attr("x", 0).attr("y", (d2, i) => i === 0 ? 0 : i * (s.axisTitleFontSize - 4)).text((d2) => d2);
+  }
+}
+
+// dom/renderPvalueTable.js
+function renderPvalues({ title, holder, plot, tests, s, bins, tip, setActiveMenu, updateHiddenPvalues }) {
+  let fontSize;
+  if (s.axisTitleFontSize) {
+    fontSize = s.axisTitleFontSize - 2;
+  } else fontSize = 15;
+  const maxPvalsToShow = 10;
+  holder.selectAll("*").remove();
+  if (!plot) {
+    throw `plot type '${plot}' not recognized`;
+  }
+  holder.append("div").style("padding-bottom", "5px").style("font-size", fontSize + "px").style("font-weight", "bold").text(title);
+  const tablediv = holder.append("div").style("border", "1px solid #ccc");
+  if (plot == "violin" && tests.pvalues.length > maxPvalsToShow || tests.length > maxPvalsToShow) {
+    tablediv.style("overflow", "auto").style("height", "220px");
+  }
+  const visibleTests = s.hiddenPvalues ? tests.filter((t) => !s.hiddenPvalues.find((p) => p.series1.id === t.series1.id && p.series2.id === t.series2.id)) : tests;
+  if (plot == "violin" ? visibleTests.pvalues.length : visibleTests.length) {
+    const binOrder = bins && bins.length > 0 ? bins.map((b) => b.label) : null;
+    if (binOrder) {
+      for (const test of visibleTests) {
+        const orderedSeries = [test.series1.id, test.series2.id].sort(
+          (a, b) => binOrder.indexOf(a) - binOrder.indexOf(b)
+        );
+        if (test.series2.id == orderedSeries[0]) {
+          test.series1_new = test.series2;
+          test.series2_new = test.series1;
+          test.series1 = test.series1_new;
+          test.series2 = test.series2_new;
+          delete test.series1_new;
+          delete test.series2_new;
+        }
+      }
+      visibleTests.sort(
+        (a, b) => binOrder.indexOf(a.series1.id) - binOrder.indexOf(b.series1.id) || binOrder.indexOf(a.series2.id) - binOrder.indexOf(b.series2.id)
+      );
+    }
+    const table = tablediv.append("table").style("width", "100%");
+    table.append("thead").append("tr").selectAll("td").data(["Group 1", "Group 2", "P-value"]).enter().append("td").style("padding", "1px 8px 1px 2px").style("color", "#858585").style("position", "sticky").style("top", "0px").style("background", "white").style("font-size", fontSize + "px").text((column) => column);
+    const tbody = table.append("tbody");
+    const tr = tbody.selectAll("tr").data(plot == "violin" ? visibleTests.pvalues : visibleTests).enter().append("tr").attr("class", `pp-${plot}-chartLegends-pvalue`);
+    if (plot == "survival") {
+      tr.on("click", (event, t) => {
+        const hiddenPvalues = s.hiddenPvalues.slice();
+        hiddenPvalues.push(t);
+        updateHiddenPvalues(hiddenPvalues);
+      });
+    }
+    tr.selectAll("td").data((d) => [d.series1, d.series2, d.pvalue]).enter().append("td").attr("aria-label", plot ? "Click to hide a p-value" : "").style("color", plot == "violin" ? "black" : (d) => d.color).style("padding", "1px 8px 1px 2px").style("font-size", fontSize + "px").style("cursor", plot == "survival" ? "pointer" : "auto").text((d) => plot == "violin" ? d : d.text);
+    if (plot == "cuminc") {
+      if (visibleTests.find((test) => test.permutation)) {
+        holder.append("div").style("margin-top", "10px").style("font-size", fontSize - 2 + "px").text("*computed by permutation of Gray's test statistic");
+      }
+    }
+  }
+  if (plot == "survival") {
+    const hiddenTests = tests.filter(
+      (t) => s.hiddenPvalues.find((p) => p.series1.id === t.series1.id && p.series2.id === t.series2.id)
+    );
+    if (hiddenTests.length) {
+      holder.append("div").style("color", "#aaa").style("cursor", "pointer").html(`<span style='color:#aaa; font-weight:400'><span>Hidden tests (${hiddenTests.length})</span>`).on("click", (event) => {
+        tip.clear();
+        const divs = tip.d.append("div").selectAll("div").data(hiddenTests).enter().append("div").each(function(d) {
+          setActiveMenu(true);
+          const div = select_default(this);
+          div.append("input").attr("type", "checkbox").style("margin-right", "5px");
+          div.append("span").html(`${d.series1.id} vs ${d.series2.id}`);
+        });
+        tip.d.append("button").html("Show checked test(s)").on("click", () => {
+          const hiddenPvalues = [];
+          divs.filter(function() {
+            return !select_default(this.firstChild).property("checked");
+          }).each((d) => hiddenPvalues.push(d));
+          updateHiddenPvalues(hiddenPvalues);
+          tip.hide();
+        });
+        tip.show(event.clientX, event.clientY);
+      });
+    }
+    if (s.maxTimeToEvent && visibleTests.length) {
+      holder.append("div").style("margin-top", "10px").style("font-size", fontSize - 2 + "px").text((visibleTests.length > 1 ? "p-values are" : "p-value is") + " computed with all survival data");
+    }
+  }
+}
+
+export {
+  getSeriesTip,
+  renderAtRiskG,
+  renderPvalues
+};
+//# sourceMappingURL=chunk-RKV3CP4C.js.map

package/dist/chunk-RL7RU2V7.js

@@ -0,0 +1,368 @@
+import {
+  fillTermWrapper,
+  termsettingInit
+} from "./chunk-W5EG334J.js";
+import {
+  isNumericTerm
+} from "./chunk-DKI7YOTJ.js";
+import {
+  select_default
+} from "./chunk-NDWTN4U5.js";
+
+// plots/matrix/matrix.renderers.js
+function setRenderers(self) {
+  self.render = function() {
+    const s = self.settings.matrix;
+    const l = self.layout;
+    const d = self.dimensions;
+    const duration = self.dom.svg.attr("width") ? s.duration : 0;
+    self.dom.clipRect.attr("x", d.xOffset - 1).attr("y", 0).attr("width", d.mainw + 3).attr("height", d.mainh + 500);
+    self.renderSerieses(s, l, d, duration);
+    self.renderLabels(s, l, d, duration);
+    self.renderDivideByLabel(s, l, d, duration);
+    self.dom.colBeam.attr("width", d.dx).attr("height", d.mainh).style("stroke", s.beamStroke);
+    self.dom.rowBeam.attr("width", d.zoomedMainW).attr("height", s.rowh).style("stroke", s.beamStroke);
+  };
+  self.renderSerieses = function(s, l, d, duration) {
+    if (self.prevUseCanvas != s.useCanvas) {
+      self.dom.seriesesG.selectAll("g").remove();
+    }
+    if (s.useCanvas) {
+      const _g = self.dom.seriesesG.selectAll("g");
+      const g = (
+        /*(_g.size() && _g) ||*/
+        self.dom.seriesesG.append("g").datum(this.serieses)
+      );
+      self.renderCanvas(this.serieses, g, d, s, _g, duration);
+    } else {
+      self.dom.seriesesG.attr("transform", `translate(${d.xOffset + d.seriesXoffset},${d.yOffset})`);
+      const sg = self.dom.seriesesG.selectAll(".sjpp-mass-series-g").data(this.serieses, (series) => series.tw.$id);
+      sg.exit().remove();
+      sg.each(self.renderSeries);
+      sg.enter().append("g").attr("class", "sjpp-mass-series-g").style("opacity", 1e-3).each(self.renderSeries);
+      self.mouseout();
+    }
+    self.prevUseCanvas = s.useCanvas;
+  };
+  self.renderSeries = async function(series) {
+    const s = self.settings.matrix;
+    const d = self.dimensions;
+    const g = select_default(this);
+    const duration = g.attr("transform") ? s.duration : 0;
+    g.attr("transform", `translate(${series.x},${series.y})`).style("opacity", 1);
+    const last = series.cells[series.cells.length - 1];
+    const height = series.y + last?.y + s.rowh;
+    const rects = g.selectAll("rect").data(series.cells, (cell) => cell.sample + ";;" + cell.tw.$id + ";;" + cell.valueIndex);
+    rects.exit().remove();
+    rects.each(self.renderCell);
+    rects.enter().append("rect").each(self.renderCell);
+  };
+  self.renderCanvas = async function(serieses, g, d, s, _g, duration) {
+    const pxr = window.devicePixelRatio <= 1 ? 1 : window.devicePixelRatio;
+    g.selectAll("*").remove();
+    const width = d.imgW;
+    const height = self.dimensions.mainh;
+    const canvas = window.OffscreenCanvas ? new OffscreenCanvas(width * pxr, height * pxr) : (
+      // TODO: no need to support older browser versions???
+      self.dom.holder.append("canvas").attr("width", pxr * width).attr("height", pxr * height).style("opacity", 0).node()
+    );
+    const ctx = canvas.getContext("2d");
+    ctx.imageSmoothingEnabled = false;
+    ctx.imageSmoothingQuality = "high";
+    ctx.scale(pxr, pxr);
+    for (const series of serieses) {
+      for (const cell of series.cells) {
+        self.renderCellWithCanvas(ctx, cell, series, s, d, series.y);
+      }
+    }
+    if (window.OffscreenCanvas) {
+      const reader = new FileReader();
+      reader.addEventListener(
+        "load",
+        () => {
+          _g?.remove();
+          self.dom.seriesesG.attr("transform", `translate(${d.xOffset + d.seriesXoffset},${d.yOffset})`);
+          g.selectAll("image").remove();
+          g.append("image").attr("xlink:href", reader.result).attr("x", d.xMin).attr("width", width).attr("height", height);
+        },
+        false
+      );
+      const blob = await canvas.convertToBlob({ quality: 1 });
+      const dataURL = reader.readAsDataURL(blob);
+    } else {
+      _g?.remove();
+      self.dom.seriesesG.attr("transform", `translate(${d.xOffset + d.seriesXoffset},${d.yOffset})`);
+      const dataURL = canvas.toDataURL();
+      const ratio = window.devicePixelRatio * window.devicePixelRatio;
+      g.append("image").attr("width", width).attr("height", height).attr("xlink:href", dataURL);
+      if (!window.OffscreenCanvas) canvas.remove();
+    }
+    self.mouseout();
+  };
+  self.renderCellWithCanvas = function(ctx, cell, series, s, d, _y) {
+    if (!cell.fill)
+      cell.fill = cell.$id in self.colorScaleByTermId ? self.colorScaleByTermId[cell.$id](cell.key) : getRectFill(cell);
+    const x = cell.x ? cell.x - d.xMin : 0;
+    const y = _y ? _y + cell.y : cell.y || 0;
+    const width = s.useMinPixelWidth ? Math.max(cell.width || d.colw, d.pxw) : cell.width || d.colw;
+    const height = "height" in cell ? cell.height : s.rowh;
+    ctx.fillStyle = cell.fill;
+    ctx.fillRect(x, y, width, height);
+    const borderWidth = Math.min(width, height) * 0.1;
+    if (cell.border) {
+      ctx.lineWidth = borderWidth;
+      ctx.strokeStyle = "white";
+      ctx.strokeRect(x, y, width, height);
+    }
+  };
+  self.renderCell = function(cell) {
+    if (!cell.fill)
+      cell.fill = cell.$id in self.colorScaleByTermId ? self.colorScaleByTermId[cell.$id](cell.key) : getRectFill(cell);
+    const s = self.settings.matrix;
+    const rect = select_default(this).attr("x", cell.x || 0).attr("y", cell.y || 0).attr("width", cell.width || self.dimensions.colw).attr("height", "height" in cell ? Math.max(0, cell.height) : s.rowh).attr("shape-rendering", "crispEdges").attr("fill", cell.fill);
+    if (cell.border) {
+      rect.attr("stroke", "white").attr("stroke-width", 0.8);
+    }
+  };
+  self.renderLabels = function(s, l, d, duration) {
+    for (const direction of ["top", "btm", "left", "right"]) {
+      let renderLabel2 = function(lab) {
+        const g = select_default(this);
+        g.attr("transform", side.attr.labelGTransform);
+        if (!g.select(":scope>text").size()) g.append("text");
+        const showContAxis = !side.isGroup && lab.grp?.type !== "hierCluster" && lab.tw?.q?.mode == "continuous";
+        const labelText = side.label(lab);
+        const text = g.select(":scope>text").attr("fill", "#000");
+        let continuousBarHAdjust;
+        const twSpecificSettings = self.config.settings.matrix.twSpecificSettings;
+        const twSettingsBarH = twSpecificSettings[lab.tw?.$id]?.contBarH;
+        if (twSettingsBarH && s.barh) continuousBarHAdjust = (twSettingsBarH - s.barh) * 0.5;
+        text.attr(
+          "display",
+          lab.grp?.type === "hierCluster" && s.clusterRowh < 6 ? "none" : side.attr.fontSize < 6 || labelText === "configure" ? "none" : ""
+        ).attr("font-size", lab.grp?.type === "hierCluster" ? Math.max(4, s.clusterRowh - 4) : side.attr.fontSize).attr("text-anchor", side.attr.labelAnchor).attr(
+          "transform",
+          side.attr.labelTransform + (continuousBarHAdjust ? ` translate(0,${continuousBarHAdjust})` : "")
+        ).attr("cursor", "pointer").attr(side.attr.textpos.coord, side.attr.textpos.factor * (showContAxis ? 30 : 0));
+        if (!Array.isArray(labelText)) {
+          text.text(labelText);
+          text.attr(
+            "y",
+            lab.grp?.type !== "hierCluster" && lab.tw?.q?.mode == "continuous" ? 10 : lab.grp?.type === "hierCluster" ? 0.1 * s.clusterRowh : 0
+          );
+          if (lab.grp?.type !== "hierCluster" && lab.tw?.q?.mode == "continuous") text.attr("x", -20);
+        } else {
+          text.text("");
+          const tspan = text.selectAll("tspan").data(labelText);
+          tspan.enter().append("tspan").attr("class", getTspanCls2).attr("dx", getTspanDx2).attr("font-size", getTspanFontSize2).text(getTspanText2);
+        }
+        text.on("mouseover", labelText === "configure" ? () => text.attr("opacity", 0.5) : null).on("mouseout", labelText === "configure" ? () => text.attr("opacity", 0) : null);
+        const hasAxis = g.select(".sjpp-matrix-cell-axis").size() && true;
+        if (showContAxis && labelText) {
+          if (!hasAxis) {
+            g.append("g").attr("class", "sjpp-matrix-cell-axis").attr("shape-rendering", "crispEdges");
+          }
+          const axisg = g.select(".sjpp-matrix-cell-axis");
+          axisg.selectAll("*").remove();
+          const domain = [lab.counts.maxval, lab.counts.minval];
+          if (s.transpose) domain.reverse();
+          const twSpecificSettings2 = self.config.settings.matrix.twSpecificSettings;
+          const twSettings = twSpecificSettings2[lab.tw.$id];
+          const x = !s.transpose ? 0 : twSettings.contBarGap - 1 - lab.labelOffset;
+          const y = !s.transpose ? twSettings.contBarGap - 1 - lab.labelOffset : 0;
+          axisg.attr("shape-rendering", "crispEdges").attr("transform", `translate(${x},${y})`).call(side.attr.axisFxn(lab.scales.full.domain(lab.scales.tickValues)).tickValues(lab.scales.tickValues));
+        } else if (hasAxis) {
+          g.select(".sjpp-matrix-cell-axis").remove();
+        }
+      }, getTspanCls2 = function(d2) {
+        return d2.cls;
+      }, getTspanDx2 = function(d2) {
+        return d2.dx;
+      }, getTspanFontSize2 = function(d2) {
+        return d2.fontSize || side.attr.fontSize;
+      }, getTspanText2 = function(d2) {
+        return d2.text;
+      };
+      var renderLabel = renderLabel2, getTspanCls = getTspanCls2, getTspanDx = getTspanDx2, getTspanFontSize = getTspanFontSize2, getTspanText = getTspanText2;
+      const side = l[direction];
+      side.box.style("display", side.display || "").attr("transform", side.attr.boxTransform);
+      const labels = side.box.selectAll(".sjpp-matrix-label").data(side.data, side.key);
+      labels.exit().remove();
+      labels.each(renderLabel2);
+      labels.enter().append("g").attr("class", "sjpp-matrix-label").each(renderLabel2);
+    }
+  };
+  self.colLabelGTransform = (lab, grpIndex) => {
+    const s = self.settings.matrix;
+    const d = self.dimensions;
+    lab.labelOffset = 0.8 * d.colw;
+    const x = lab.grpIndex * s.colgspace + lab.totalIndex * d.dx + lab.labelOffset + lab.totalHtAdjustments;
+    const y = 0;
+    return `translate(${x + d.seriesXoffset},${y})`;
+  };
+  self.colGrpLabelGTransform = (lab, grpIndex) => {
+    const s = self.settings.matrix;
+    const d = self.dimensions;
+    const len = (lab.processedLst || lab.grp.lst).length;
+    const x = lab.grpIndex * s.colgspace + lab.prevGrpTotalIndex * d.dx + len * d.dx / 2 + s.grpLabelFontSize / 2 + lab.totalHtAdjustments;
+    return `translate(${x + d.seriesXoffset},0)`;
+  };
+  self.rowLabelGTransform = (lab, grpIndex) => {
+    const s = self.settings.matrix;
+    const d = self.dimensions;
+    const x = 0;
+    lab.labelOffset = 0.7 * (lab.grp.type == "hierCluster" ? s.clusterRowh : s.rowh);
+    const y = lab.grpIndex * s.rowgspace + lab.totalIndex * d.dy + lab.labelOffset + lab.totalHtAdjustments;
+    return `translate(${x},${y})`;
+  };
+  self.rowGrpLabelGTransform = (lab, grpIndex) => {
+    const s = self.settings.matrix;
+    const d = self.dimensions;
+    const len = (lab.processedLst || lab.grp.lst).length;
+    const x = lab.tw?.q?.mode == "continuous" ? 20 : 0;
+    const y = lab.grpIndex * s.rowgspace + lab.prevGrpTotalIndex * d.dy + len * d.dy / 2 + s.grpLabelFontSize / 2 + lab.totalHtAdjustments;
+    return `translate(${x},${y})`;
+  };
+  self.rowAxisGTransform = (lab, grpIndex) => {
+    const s = self.settings.matrix;
+    const d = self.dimensions;
+    const x = 0;
+    const y = lab.grpIndex * s.rowgspace + lab.totalIndex * d.dy + 0.7 * s.rowh + lab.totalHtAdjustments;
+    return `translate(${x},${y})`;
+  };
+  self.renderDivideByLabel = async (s, l, d) => {
+    self.dom.mainG.selectAll(".sjpp-matrix-divide-by-label").remove();
+    if (!self.config.divideBy) return;
+    const name = self.config.divideBy?.term.name || "";
+    const text = name.length <= s.rowlabelmaxchars ? name : name.slice(0, s.rowlabelmaxchars) + "\u2026";
+    const sides = !s.transpose ? [l.left, l.right] : [l.top, l.bottom];
+    const box = sides.find((d2) => !d2.isGroup)?.box;
+    const y = (s.collabelpos == "top" ? d.mainh + s.collabelmaxchars : -s.collabelmaxchars) + 8;
+    const anchor = s.rowlabelpos == "left" ? "end" : "start";
+    const cl = s.controlLabels;
+    const gNote = box.append("g").attr("class", "sjpp-matrix-divide-by-label").attr("transform", `translate(0, ${y})`);
+    gNote.append("text").attr("text-anchor", anchor).attr("font-style", "italic").attr("y", -20).text(`${cl.Samples} grouped by`);
+    const g = box.datum({ tw: self.config.divideBy }).append("g").attr("class", "sjpp-matrix-divide-by-label").attr("transform", `translate(0, ${y})`).on("click", (event, d2) => {
+      pill.showMenu(event, textElem.node());
+    });
+    const textElem = g.append("text").attr("text-anchor", anchor).attr("font-weight", 600).text(text);
+    g.append("title").text(`${cl.Samples} are grouped by this gene or variable. Click to edit.`);
+    const customMenuOptions = [];
+    const tvsKey = isNumericTerm(self.config.divideBy.term) ? "ranges" : "values";
+    if (self.config.legendValueFilter.lst?.find(
+      (l2) => l2.legendGrpName == self.config.divideBy.term.id || l2.legendGrpName == self.config.divideBy.term.name
+    )?.tvs[tvsKey]?.length) {
+      customMenuOptions.push({ label: `Show filtered ${cl.samples}`, callback: self.showDeletedSampleGroups });
+    }
+    const pill = await termsettingInit({
+      menuOptions: "{edit,replace,remove}",
+      //numericEditMenuVersion: opts.numericEditMenuVersion,
+      customMenuOptions,
+      //custom menu options other than menuOptions
+      vocabApi: self.app.vocabApi,
+      vocab: self.state.vocab,
+      //activeCohort: opts.state?.activeCohort,
+      holder: g,
+      debug: self.opts.debug,
+      usecase: { target: "matrix" },
+      getBodyParams: () => {
+        const currentGeneNames = self.termOrder.filter((t) => t.tw.term.type === "geneVariant").map(
+          (t) => t.tw.term.chr ? `${t.tw.term.chr}:${t.tw.term.start}-${t.tw.term.stop}` : t.tw.term.gene || t.tw.term.name
+        );
+        if (currentGeneNames.length) return { currentGeneNames };
+        return {};
+      },
+      callback: async (tw) => {
+        if (self.dom.loadingDiv && self.dom.svg) {
+          self.dom.loadingDiv.selectAll("*").remove();
+          self.dom.loadingDiv.html("").style("display", "").style("position", "relative").style("left", "45%");
+          self.dom.loadingDiv.html("Processing data ...");
+          self.dom.svg.style("opacity", 0.1).style("pointer-events", "none");
+        }
+        if (tw && !tw.q) throw "data.q{} missing from pill callback";
+        if (tw?.term && isNumericTerm(tw.term)) {
+          tw.q = { ...tw.q, mode: "discrete" };
+        }
+        if (tw) await fillTermWrapper(tw, self.app.vocabApi);
+        await pill.main(tw ? tw : { term: null, q: null });
+        box.datum({ tw });
+        self.app.dispatch({
+          type: "plot_edit",
+          id: self.id,
+          config: {
+            divideBy: tw,
+            legendValueFilter: self.mayRemoveTvsEntry(self.config.divideBy)
+          }
+        });
+      }
+    });
+    const arg = {
+      term: self.config.divideBy.term,
+      q: self.config.divideBy.q
+    };
+    if (self.config.divideBy.$id) arg.$id = self.config.divideBy.$id;
+    pill.main(arg);
+  };
+  self.adjustSvgDimensions = async function(prevTranspose) {
+    const s = self.settings.matrix;
+    const hc = self.settings.hierCluster || {};
+    const hcHeight = hc.yDendrogramHeight || 0;
+    const hcWidth = hc.xDendrogramHeight || 0;
+    const d = self.dimensions;
+    const duration = self.dom.svg.attr("width") ? s.duration : 0;
+    await sleep(prevTranspose == s.transpose ? duration : s.duration);
+    const l = self.layout;
+    const topBox = l.top.box.node().getBBox();
+    const btmBox = l.btm.box.node().getBBox();
+    const leftBox = l.left.box.node().getBBox();
+    const rtBox = l.right.box.node().getBBox();
+    const legendBox = self.dom.legendG.node().getBBox();
+    const seriesBox = self.dom.seriesesG.node().getBBox();
+    d.extraWidth = leftBox.width + rtBox.width + s.margin.left + s.margin.right + s.rowlabelgap * 2;
+    d.extraHeight = topBox.height + btmBox.height + s.margin.top + s.margin.bottom + s.collabelgap * 2;
+    d.svgw = d.mainw + d.extraWidth + hcWidth;
+    d.svgh = d.mainh + d.extraHeight + legendBox.height + 20 + s.scrollHeight + hcHeight;
+    self.dom.svg.attr("width", d.svgw).attr("height", d.svgh);
+    let maxLabelWidth = self.type == "hierCluster" ? 0 : leftBox.width, maxLabelNumChars = 0;
+    if (hc.xDendrogramHeight) {
+      self.dom.termLabelG.selectAll(".sjpp-matrix-label").each(function(d2) {
+        if (d2.grp.type !== "hierCluster") return;
+        const box = this.getBBox();
+        if (box.width > maxLabelWidth) {
+          maxLabelWidth = box.width;
+          maxLabelNumChars = d2.label.length;
+        }
+      });
+    }
+    const x = -l.left.offset + hcWidth + maxLabelWidth;
+    const xAdjust = !hc.xDendrogramHeight ? 0 : Math.max(leftBox.width - (hc.xDendrogramHeight + maxLabelWidth), 0);
+    const y = (l.top.display == "none" ? 0 : topBox.height) - l.top.offset + hcHeight;
+    self.dom.mainG.attr("transform", `translate(${x + xAdjust},${y})`);
+    self.dom.clipRect.attr("y", -y).attr("height", d.mainh + 500 + y);
+    const legendX = d.xOffset + (s.transpose ? 20 : 0);
+    const legendY = d.yOffset + d.mainh + s.collabelgap + (l.btm.display == "none" ? 0 : btmBox.height) + 20;
+    self.dom.legendG.attr("transform", `translate(${legendX},${legendY})`);
+    if (hc.xDendrogramHeight) {
+      const dendroX = maxLabelWidth + xAdjust - l.left.offset + d.xOffset - d.dx / 2;
+      self.dom.hcClipRect.attr("x", dendroX + hcWidth + d.dx / 2).attr("y", 0).attr("width", d.mainw + 3).attr("height", d.mainh + hc.yDendrogramHeight + 500);
+      self.topDendroX = dendroX + d.seriesXoffset;
+      self.dom.topDendrogram.attr("transform", `translate(${self.topDendroX}, 0)`);
+      const y2 = l.top.display == "none" ? 0 : topBox.height + s.collabelgap;
+      self.dom.leftDendrogram.attr("transform", `translate(${dendroX - maxLabelWidth - 10}, ${y2})`);
+    }
+  };
+}
+function getRectFill(d) {
+  if (d.fill) return d.fill;
+  const cls = d.class || Array.isArray(d.values) && d.values[0].class;
+  if (!cls) console.log;
+  return cls ? mclass[cls].color : "#555";
+}
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export {
+  setRenderers
+};
+//# sourceMappingURL=chunk-RL7RU2V7.js.map