@sjcrh/proteinpaint-client 2.182.0 → 2.182.1

package/dist/chunk-KWFEGPZL.js

@@ -0,0 +1,97 @@
+import {
+  addGeneSearchbox,
+  first_genetrack_tolist,
+  getDNAMethUnit,
+  sayerror
+} from "./chunk-NVB7MQLH.js";
+import {
+  Menu
+} from "./chunk-A6TQGNDQ.js";
+import {
+  DNA_METHYLATION
+} from "./chunk-6ITDJ5UR.js";
+
+// termdb/handlers/dnaMethylation.ts
+var SearchHandler = class {
+  init(opts) {
+    this.opts = opts;
+    this.callback = opts.callback;
+    this.app = opts.app;
+    const holder = opts.holder.append("div").style("margin", "10px 0px");
+    this.dom = {};
+    this.dom.errDiv = holder.append("div").style("margin", "5px 0px").style("display", "none");
+    this.dom.geneSearchDiv = holder.append("div");
+    this.dom.blockDiv = holder.append("div").style("display", "none").style("margin", "15px 4px");
+    const geneSearch = addGeneSearchbox({
+      tip: new Menu({ padding: "0px" }),
+      genome: opts.genomeObj,
+      row: this.dom.geneSearchDiv,
+      callback: async () => {
+        try {
+          this.dom.errDiv.style("display", "none");
+          await this.handleGeneSearch(geneSearch);
+        } catch (e) {
+          this.dom.errDiv.style("display", "block");
+          sayerror(this.dom.errDiv, "Error: " + (e.message || e));
+          if (e.stack) console.log(e.stack);
+        }
+      }
+    });
+  }
+  async handleGeneSearch(geneSearch) {
+    if (geneSearch.geneSymbol) {
+      const { chr, start, stop } = geneSearch;
+      if (!chr || !Number.isInteger(start) || !Number.isInteger(stop))
+        throw new Error("unable to retrieve gene coordinate");
+      this.dom.blockDiv.selectAll("*").remove();
+      this.dom.blockDiv.style("display", "block");
+      this.dom.blockDiv.append("div").style("opacity", 0.6).text("Navigate genome browser to desired region");
+      const arg = {
+        holder: this.dom.blockDiv,
+        genome: this.opts.genomeObj,
+        // genome obj
+        chr,
+        start,
+        stop,
+        tklst: [],
+        nobox: true,
+        width: 500,
+        hidegenelegend: true,
+        debugmode: this.opts.debug
+      };
+      first_genetrack_tolist(this.opts.genomeObj, arg.tklst);
+      const _ = await import("./block-OO2NLGUP.js");
+      this.blockInstance = new _.Block(arg);
+      this.dom.submitBtn = this.dom.blockDiv.append("div").attr("data-testid", "sjpp-dnaMethylation-submitDiv").style("margin", "10px 0px").append("button").style("border", "none").style("border-radius", "20px").style("padding", "10px 15px").text("Submit Region").on("click", async () => {
+        const { chr: chr2, start: start2, stop: stop2 } = this.blockInstance.rglst[0];
+        const term = this.makeTerm({ chr: chr2, start: start2, stop: stop2 });
+        await this.callback(term);
+      });
+    } else if (geneSearch.chr && Number.isInteger(geneSearch.start) && Number.isInteger(geneSearch.stop)) {
+      const { chr, start, stop } = geneSearch;
+      const term = this.makeTerm({ chr, start, stop });
+      await this.callback(term);
+    } else {
+      throw new Error("invalid gene search input");
+    }
+  }
+  makeTerm(opts) {
+    const { chr, start, stop } = opts;
+    if (!chr || !Number.isInteger(start) || !Number.isInteger(stop)) throw new Error("invalid coordinate");
+    const unit = getDNAMethUnit("region", this.app.vocabApi);
+    const term = {
+      chr,
+      start,
+      stop,
+      type: DNA_METHYLATION,
+      unit,
+      genomicFeatureType: "region"
+    };
+    return term;
+  }
+};
+
+export {
+  SearchHandler
+};
+//# sourceMappingURL=chunk-KWFEGPZL.js.map

package/dist/chunk-KWFEGPZL.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../termdb/handlers/dnaMethylation.ts"],
+  "sourcesContent": ["import { Menu, addGeneSearchbox, sayerror } from '#dom'\nimport { DNA_METHYLATION } from '#shared/terms.js'\nimport { getDNAMethUnit } from '#tw/dnaMethylation'\nimport { first_genetrack_tolist } from '#common/1stGenetk'\n\n// TODO: currently, when inputting a single position (e.g. chr17:7661778 or chr17:7661778-7661778), the output is a region 400bp long. Need to support single position input.\n// TODO: verify whether coordiante is 0-based or 1-based (need to do the same for other search handlers e.g. geneVariant.ts, snp.ts, etc.)\n\nexport class SearchHandler {\n\topts: any\n\tcallback: any\n\tapp: any\n\tdom: any\n\tblockInstance: any\n\tinit(opts) {\n\t\tthis.opts = opts\n\t\tthis.callback = opts.callback\n\t\tthis.app = opts.app\n\t\tconst holder = opts.holder.append('div').style('margin', '10px 0px')\n\t\tthis.dom = {}\n\t\tthis.dom.errDiv = holder.append('div').style('margin', '5px 0px').style('display', 'none')\n\t\tthis.dom.geneSearchDiv = holder.append('div')\n\t\tthis.dom.blockDiv = holder.append('div').style('display', 'none').style('margin', '15px 4px')\n\t\tconst geneSearch = addGeneSearchbox({\n\t\t\ttip: new Menu({ padding: '0px' }),\n\t\t\tgenome: opts.genomeObj,\n\t\t\trow: this.dom.geneSearchDiv,\n\t\t\tcallback: async () => {\n\t\t\t\ttry {\n\t\t\t\t\tthis.dom.errDiv.style('display', 'none')\n\t\t\t\t\tawait this.handleGeneSearch(geneSearch)\n\t\t\t\t} catch (e: any) {\n\t\t\t\t\tthis.dom.errDiv.style('display', 'block')\n\t\t\t\t\tsayerror(this.dom.errDiv, 'Error: ' + (e.message || e))\n\t\t\t\t\tif (e.stack) console.log(e.stack)\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}\n\n\tasync handleGeneSearch(geneSearch) {\n\t\tif (geneSearch.geneSymbol) {\n\t\t\t// gene input\n\t\t\t// embed block of gene locus to allow navigation to region of interest\n\t\t\tconst { chr, start, stop } = geneSearch\n\t\t\tif (!chr || !Number.isInteger(start) || !Number.isInteger(stop))\n\t\t\t\tthrow new Error('unable to retrieve gene coordinate')\n\n\t\t\tthis.dom.blockDiv.selectAll('*').remove()\n\t\t\tthis.dom.blockDiv.style('display', 'block')\n\t\t\tthis.dom.blockDiv.append('div').style('opacity', 0.6).text('Navigate genome browser to desired region')\n\n\t\t\tconst arg: any = {\n\t\t\t\tholder: this.dom.blockDiv,\n\t\t\t\tgenome: this.opts.genomeObj, // genome obj\n\t\t\t\tchr,\n\t\t\t\tstart,\n\t\t\t\tstop,\n\t\t\t\ttklst: [],\n\t\t\t\tnobox: true,\n\t\t\t\twidth: 500,\n\t\t\t\thidegenelegend: true,\n\t\t\t\tdebugmode: this.opts.debug\n\t\t\t}\n\t\t\tfirst_genetrack_tolist(this.opts.genomeObj, arg.tklst)\n\t\t\tconst _ = await import('#src/block')\n\t\t\tthis.blockInstance = new _.Block(arg)\n\n\t\t\tthis.dom.submitBtn = this.dom.blockDiv\n\t\t\t\t.append('div')\n\t\t\t\t.attr('data-testid', 'sjpp-dnaMethylation-submitDiv')\n\t\t\t\t.style('margin', '10px 0px')\n\t\t\t\t.append('button')\n\t\t\t\t.style('border', 'none')\n\t\t\t\t.style('border-radius', '20px')\n\t\t\t\t.style('padding', '10px 15px')\n\t\t\t\t.text('Submit Region')\n\t\t\t\t.on('click', async () => {\n\t\t\t\t\tconst { chr, start, stop } = this.blockInstance.rglst[0]\n\t\t\t\t\tconst term = this.makeTerm({ chr, start, stop })\n\t\t\t\t\tawait this.callback(term)\n\t\t\t\t})\n\t\t} else if (geneSearch.chr && Number.isInteger(geneSearch.start) && Number.isInteger(geneSearch.stop)) {\n\t\t\t// coordinate input\n\t\t\t// directly use coordinate to make term\n\t\t\tconst { chr, start, stop } = geneSearch\n\t\t\tconst term = this.makeTerm({ chr, start, stop })\n\t\t\tawait this.callback(term)\n\t\t} else {\n\t\t\tthrow new Error('invalid gene search input')\n\t\t}\n\t}\n\n\tmakeTerm(opts) {\n\t\tconst { chr, start, stop } = opts\n\t\tif (!chr || !Number.isInteger(start) || !Number.isInteger(stop)) throw new Error('invalid coordinate')\n\t\tconst unit = getDNAMethUnit('region', this.app.vocabApi)\n\n\t\tconst term = {\n\t\t\tchr,\n\t\t\tstart,\n\t\t\tstop,\n\t\t\ttype: DNA_METHYLATION,\n\t\t\tunit,\n\t\t\tgenomicFeatureType: 'region'\n\t\t}\n\t\treturn term\n\t}\n}\n"],
+  "mappings": "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",
+  "names": ["chr", "start", "stop"]
+}

package/dist/chunk-L4QG7XZE.js

@@ -0,0 +1,46 @@
+// ../shared/utils/src/roundValue.js
+function roundValue(value, digits) {
+  const v = Number(value);
+  if (Number.isInteger(v)) return v;
+  if (Math.abs(v) < 1) return Number(v.toPrecision(digits));
+  return Number(v.toFixed(digits));
+}
+function roundValueAuto(value, format = false, defaultDigits = 2) {
+  if (!value && value != 0) return value;
+  const dp = decimalPlacesUntilFirstNonZero(value);
+  const digits = Math.abs(value) > 1 ? defaultDigits : dp > 0 ? dp + 1 : defaultDigits;
+  if (format) return formatValue(value, digits);
+  return roundValue(value, digits);
+}
+function decimalPlacesUntilFirstNonZero(number) {
+  const numberStr = number.toString();
+  const decimalIndex = numberStr.indexOf(".");
+  if (decimalIndex === -1 || decimalIndex === numberStr.length - 1) {
+    return 0;
+  }
+  let decimalPlaces = 0;
+  for (let i = decimalIndex + 1; i < numberStr.length; i++) {
+    if (numberStr[i] === "0") {
+      decimalPlaces++;
+    } else if (numberStr[i] >= "1" && numberStr[i] <= "9") {
+      break;
+    }
+  }
+  return decimalPlaces;
+}
+function formatValue(value, digits) {
+  const v = Number(value);
+  if (Number.isInteger(v)) return v;
+  const abs = Math.abs(v);
+  if (abs < 1 || abs > 9999) {
+    return abs > 9999 ? v.toPrecision(digits) : Number(v.toPrecision(digits));
+  }
+  return Number(v.toFixed(digits));
+}
+
+export {
+  roundValue,
+  roundValueAuto,
+  decimalPlacesUntilFirstNonZero
+};
+//# sourceMappingURL=chunk-L4QG7XZE.js.map

package/dist/chunk-L4QG7XZE.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../shared/utils/src/roundValue.js"],
+  "sourcesContent": ["/*\nround a value to specified digits\n    - if value is integer, value is returned\n    - if value is a fractional float, round to precision\n    - if value is not a fractional float, round to decimal point\n    - TODO: handle scientific notation\nvalue: given value\ndigits: number of digits to round to\n*/\n\nexport function roundValue(value, digits) {\n\tconst v = Number(value)\n\tif (Number.isInteger(v)) return v\n\tif (Math.abs(v) < 1) return Number(v.toPrecision(digits))\n\treturn Number(v.toFixed(digits))\n}\n\n/** Rounds numbers to the appropriate decimal point\n * if format is true, returns either a number or string in\n * scientific notation.\n *\n * TODO: Review digit logic.\n */\n\nexport function roundValueAuto(value, format = false, defaultDigits = 2) {\n\tif (!value && value != 0) return value\n\tconst dp = decimalPlacesUntilFirstNonZero(value)\n\tconst digits =\n\t\tMath.abs(value) > 1 ? defaultDigits : dp > 0 ? dp + 1 : defaultDigits\n\tif (format) return formatValue(value, digits)\n\treturn roundValue(value, digits)\n}\n\nexport function decimalPlacesUntilFirstNonZero(number) {\n\t// Convert number to string\n\tconst numberStr = number.toString()\n\n\t// Find the position of the decimal point\n\tconst decimalIndex = numberStr.indexOf(\".\")\n\n\t// If decimal point is not found or number is an integer, return 0\n\tif (decimalIndex === -1 || decimalIndex === numberStr.length - 1) {\n\t\treturn 0\n\t}\n\n\t// Iterate through characters after the decimal point\n\tlet decimalPlaces = 0\n\tfor (let i = decimalIndex + 1; i < numberStr.length; i++) {\n\t\t// Increment the count of decimal places until a non-zero digit is found\n\t\tif (numberStr[i] === \"0\") {\n\t\t\tdecimalPlaces++\n\t\t} else if (numberStr[i] >= \"1\" && numberStr[i] <= \"9\") {\n\t\t\tbreak\n\t\t}\n\t}\n\n\treturn decimalPlaces\n}\n\n/* \nsimple logic to return a number close to original while rounding up decimals.\nsupplements roundValueAuto which rounds 12345 to 1.2e4 which is only suitable for human quick glance but not subsequent computing\n\nTODO:\n10000 and 10001 to 1e4\n0.00001 to 1e-5\n1.00001 to 1\n*/\nexport function roundValue2(value) {\n\tif (!Number.isFinite(value)) return value // not a number\n\tif (Number.isInteger(value)) return value // is integer, do not convert\n\tconst abs = Math.abs(value)\n\tif (abs > 100) return Math.round(value) // 12345.1234 to 12345 (compared to 1.2e4 from roundValueAuto)\n\tif (abs > 10) return Number(value.toFixed(1)) // 99.1234 to 99.1\n\tif (abs > 1) return Number(value.toFixed(2)) // 9.1234 to 9.12\n\tif (abs > 0.1) return Number(value.toFixed(3)) // 0.12345 to 0.123\n\tif (abs > 0.01) return Number(value.toFixed(4)) // 0.012345 to 0.0123\n\treturn value // as is\n}\n\n/** Use to return displayed values in scientific notation\n * Do not use for values intended for calculation later.\n */\nexport function formatValue(value, digits) {\n\tconst v = Number(value)\n\tif (Number.isInteger(v)) return v\n\tconst abs = Math.abs(v)\n\tif (abs < 1 || abs > 9999) {\n\t\t//Number() reverts positive values less than 10^21 to a whole number\n\t\t//To return the value in scientific notation, use toPrecision without Number()\n\t\treturn abs > 9999 ? v.toPrecision(digits) : Number(v.toPrecision(digits))\n\t}\n\treturn Number(v.toFixed(digits))\n}\n"],
+  "mappings": ";AAUO,SAAS,WAAW,OAAO,QAAQ;AACzC,QAAM,IAAI,OAAO,KAAK;AACtB,MAAI,OAAO,UAAU,CAAC,EAAG,QAAO;AAChC,MAAI,KAAK,IAAI,CAAC,IAAI,EAAG,QAAO,OAAO,EAAE,YAAY,MAAM,CAAC;AACxD,SAAO,OAAO,EAAE,QAAQ,MAAM,CAAC;AAChC;AASO,SAAS,eAAe,OAAO,SAAS,OAAO,gBAAgB,GAAG;AACxE,MAAI,CAAC,SAAS,SAAS,EAAG,QAAO;AACjC,QAAM,KAAK,+BAA+B,KAAK;AAC/C,QAAM,SACL,KAAK,IAAI,KAAK,IAAI,IAAI,gBAAgB,KAAK,IAAI,KAAK,IAAI;AACzD,MAAI,OAAQ,QAAO,YAAY,OAAO,MAAM;AAC5C,SAAO,WAAW,OAAO,MAAM;AAChC;AAEO,SAAS,+BAA+B,QAAQ;AAEtD,QAAM,YAAY,OAAO,SAAS;AAGlC,QAAM,eAAe,UAAU,QAAQ,GAAG;AAG1C,MAAI,iBAAiB,MAAM,iBAAiB,UAAU,SAAS,GAAG;AACjE,WAAO;AAAA,EACR;AAGA,MAAI,gBAAgB;AACpB,WAAS,IAAI,eAAe,GAAG,IAAI,UAAU,QAAQ,KAAK;AAEzD,QAAI,UAAU,CAAC,MAAM,KAAK;AACzB;AAAA,IACD,WAAW,UAAU,CAAC,KAAK,OAAO,UAAU,CAAC,KAAK,KAAK;AACtD;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AA0BO,SAAS,YAAY,OAAO,QAAQ;AAC1C,QAAM,IAAI,OAAO,KAAK;AACtB,MAAI,OAAO,UAAU,CAAC,EAAG,QAAO;AAChC,QAAM,MAAM,KAAK,IAAI,CAAC;AACtB,MAAI,MAAM,KAAK,MAAM,MAAM;AAG1B,WAAO,MAAM,OAAO,EAAE,YAAY,MAAM,IAAI,OAAO,EAAE,YAAY,MAAM,CAAC;AAAA,EACzE;AACA,SAAO,OAAO,EAAE,QAAQ,MAAM,CAAC;AAChC;",
+  "names": []
+}

package/dist/chunk-LBXZGYU5.js

@@ -0,0 +1,368 @@
+import {
+  fillTermWrapper,
+  termsettingInit
+} from "./chunk-NVB7MQLH.js";
+import {
+  isNumericTerm
+} from "./chunk-6ITDJ5UR.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 l = self.layout;
+    const hcHeight = !hc.yDendrogramHeight ? 0 : hc.yDendrogramHeight + (l.top.display === "none" ? 0 : 10);
+    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 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-LBXZGYU5.js.map