@sjcrh/proteinpaint-client 2.223.0 → 2.224.0

package/dist/chunk-3BXY7XEV.js

@@ -1,237 +0,0 @@
-import {
-  DataPointInteractions,
-  axisstyle,
-  createLollipopFromGene,
-  drawHoverShapes,
-  showResultsTable,
-  table2col,
-  to_svg
-} from "./chunk-JP4IU7DO.js";
-import {
-  Menu
-} from "./chunk-CNFTQSNE.js";
-import {
-  icons
-} from "./chunk-3CIL7KH7.js";
-import {
-  axisLeft
-} from "./chunk-WJLRU5OF.js";
-import {
-  linear
-} from "./chunk-4OLM3KSB.js";
-import {
-  select_default
-} from "./chunk-I6Y4O3RR.js";
-
-// plots/manhattan/manhattan.ts
-var manhattanLayoutDefaults = {
-  plotWidth: 1e3,
-  plotHeight: 400,
-  pngDotRadius: 2,
-  yAxisX: 70,
-  yAxisY: 40,
-  yAxisSpace: 20,
-  xAxisLabelPad: 30,
-  yAxisPad: 5,
-  axisColor: "#545454",
-  showYAxisLine: true,
-  fontSize: 12,
-  showLegend: true,
-  legendItemWidth: 80,
-  legendDotRadius: 3,
-  legendRightOffset: 15,
-  legendTextOffset: 12,
-  legendVerticalOffset: 4,
-  legendFontSize: 12,
-  showInteractiveDots: true,
-  interactiveDotRadius: 2,
-  interactiveDotStrokeWidth: 1,
-  showDownload: true,
-  interactiveDotsCap: 5e3,
-  maxTooltipGenes: 5
-};
-function plotManhattan(div, data, settings, app, custom = {}) {
-  const handle = { points: [], highlight: () => {
-  } };
-  settings = {
-    ...settings
-  };
-  let interactivePoints = data.plotData.points;
-  if (data.plotData.points.length > settings.interactiveDotsCap) {
-    interactivePoints = data.plotData.points.sort((a, b) => Math.abs(b.y) - Math.abs(a.y)).slice(0, settings.interactiveDotsCap);
-  }
-  const signed = data.plotData.y_min < 0;
-  div.style("position", "relative");
-  const geneTip = new Menu({ padding: "" });
-  const svg = div.append("svg").attr("data-testid", "sjpp-manhattan").attr("width", settings.plotWidth + 2 * settings.pngDotRadius + settings.yAxisX + settings.yAxisSpace).attr("height", settings.plotHeight + 2 * settings.pngDotRadius + settings.yAxisY * 4);
-  const yPlot = linear().domain([data.plotData.y_min, data.plotData.y_max]).range([settings.plotHeight + 2 * settings.pngDotRadius, 0]);
-  const yPad = data.plotData.y_pad ?? settings.pngDotRadius;
-  const yAxisLow = signed ? data.plotData.y_min + yPad : 0;
-  const yAxisScale = linear().domain([yAxisLow, data.plotData.y_max - yPad]).range([yPlot(yAxisLow), yPlot(data.plotData.y_max - yPad)]);
-  const axisG = svg.append("g").attr("transform", `translate(${settings.yAxisX + settings.yAxisSpace - settings.yAxisPad},${settings.yAxisY})`);
-  axisG.call(
-    axisLeft(yAxisScale).tickSizeOuter(0)
-    // removes top/bottom cap lines for clean look
-  );
-  axisstyle({
-    axis: axisG,
-    color: settings.axisColor,
-    fontsize: settings.fontSize + 2,
-    showline: settings.showYAxisLine
-  });
-  svg.append("text").attr("x", -((settings.plotHeight + 2 * settings.pngDotRadius) / 2) - settings.yAxisY).attr("y", settings.yAxisX / 2).attr("transform", "rotate(-90)").attr("text-anchor", "middle").attr("font-size", `${settings.fontSize + 4}px`).attr("fill", "black").text((custom.yAxisLabel ?? "-log\u2081\u2080(q-value)") + (data.plotData.has_capped_points ? " [capped]" : ""));
-  svg.append("image").attr("transform", `translate(${settings.yAxisX + settings.yAxisSpace},${settings.yAxisY})`).attr("width", settings.plotWidth + 2 * settings.pngDotRadius).attr("height", settings.plotHeight + 2 * settings.pngDotRadius).attr("href", `data:image/png;base64,${data.pngImg || data.png}`);
-  const xScale = linear().domain([-data.plotData.x_buffer, data.plotData.total_genome_length + data.plotData.x_buffer]).range([0, settings.plotWidth + 2 * settings.pngDotRadius]);
-  if (settings.showInteractiveDots && data.plotData.points && data.plotData.points.length > 0) {
-    const hoverLayer = svg.append("g").attr("transform", `translate(${settings.yAxisX + settings.yAxisSpace},${settings.yAxisY})`).style("pointer-events", "none");
-    const cover = select_default(svg.node().parentNode).append("div").style("position", "absolute").style("left", `${settings.yAxisX + settings.yAxisSpace}px`).style("top", `${settings.yAxisY}px`).style("width", `${settings.plotWidth + 2 * settings.pngDotRadius}px`).style("height", `${settings.plotHeight + 2 * settings.pngDotRadius}px`).style("pointer-events", "all");
-    const circlePath = (r) => `M${r},0 A${r},${r} 0 1,1 ${-r},0 A${r},${r} 0 1,1 ${r},0 Z`;
-    const linkedLayer = svg.append("g").attr("transform", `translate(${settings.yAxisX + settings.yAxisSpace},${settings.yAxisY})`).style("pointer-events", "none");
-    handle.points = interactivePoints;
-    handle.highlight = (dots) => drawHoverShapes(
-      linkedLayer,
-      dots.map((d) => ({
-        path: circlePath(settings.pngDotRadius + 2),
-        transform: `translate(${d.pixel_x},${d.pixel_y})`,
-        stroke: "black",
-        strokeWidth: 2
-      }))
-    );
-    const grin2Hover = (d, container) => {
-      const table = table2col({ holder: container.append("div"), margin: "10px" });
-      table.addRow("Gene", d.gene);
-      table.addRow("Position", `${d.chrom}:${d.start}-${d.end}`);
-      const [t1, t2] = table.addRow();
-      t1.text("Type");
-      t2.html(`<span style="color:${d.color}">\u25CF</span> ${d.type.charAt(0).toUpperCase() + d.type.slice(1)}`);
-      table.addRow("Q-value", d.q_value.toPrecision(3));
-      table.addRow("Subject count", d.nsubj);
-    };
-    const grin2Table = (dots) => ({
-      columns: [
-        { label: "Gene" },
-        { label: "Position" },
-        { label: "Type" },
-        { label: "Q-value", sortable: true },
-        { label: "Subject count", sortable: true }
-      ],
-      rows: dots.map((d) => [
-        { value: d.gene },
-        { value: `${d.chrom}:${d.start}-${d.end}` },
-        {
-          html: `<span style="color:${d.color}">\u25CF</span> ${d.type.charAt(0).toUpperCase() + d.type.slice(1)}`
-        },
-        { value: d.q_value.toPrecision(3) },
-        { value: d.nsubj }
-      ])
-    });
-    const interactions = new DataPointInteractions({
-      cover,
-      hoverLayer,
-      hoverTip: geneTip,
-      points: interactivePoints,
-      getX: (d) => d.pixel_x,
-      getY: (d) => d.pixel_y,
-      hitRadius: settings.pngDotRadius + 3,
-      toHoverSpec: (d) => ({
-        path: circlePath(settings.pngDotRadius),
-        transform: `translate(${d.pixel_x},${d.pixel_y})`,
-        fill: "none",
-        stroke: "black",
-        strokeWidth: settings.interactiveDotStrokeWidth
-      }),
-      maxTooltipRows: settings.maxTooltipGenes,
-      onHover: custom.onHover,
-      itemNoun: custom.itemNoun ?? "gene",
-      renderSingleHoverTooltip: custom.renderSingleHoverTooltip ?? grin2Hover,
-      buildMultiHitTableData: custom.buildMultiHitTableData ?? grin2Table,
-      // A caller with actions gets the module's standard click flow: an action menu for one
-      // dot, a pick-a-row menu for several. Without one, GRIN2's behaviour below.
-      ...custom.getActions ? {
-        getActions: custom.getActions,
-        renderSingleHitInfo: custom.renderSingleHitInfo ?? custom.renderSingleHoverTooltip,
-        getRowKey: custom.getRowKey
-      } : {
-        // Manhattan single-click goes straight to a lollipop launch — no menu.
-        // Release hover-suppression immediately so the cursor's next move re-engages.
-        onSingleClick: (d, _event, ctx) => {
-          ctx.dismiss();
-          if (app && d.gene) createLollipopFromGene(d.gene, app);
-        },
-        // Manhattan multi-click shows showResultsTable directly with `app + clickMenu`
-        // so the table renders inline Matrix/Lollipop buttons. Reuses the module's
-        // clickMenu so its onHide cleanup (clear flag, clear hover) fires on dismiss.
-        // Content is built BEFORE show2 so Menu can measure the populated rect for
-        // its right-edge clamp — otherwise the wide table is placed at cursor+offsetX
-        // and extends off the right edge of the viewport.
-        onMultiClick: (dots, event, ctx) => {
-          if (!app) {
-            ctx.dismiss();
-            return;
-          }
-          ctx.clickMenu.clear();
-          const holder = ctx.clickMenu.d.append("div").style("margin", "10px");
-          showResultsTable({ tableDiv: holder, hits: dots, app, clickMenu: ctx.clickMenu });
-          ctx.clickMenu.show2(event.clientX, event.clientY);
-        }
-      }
-    });
-    interactions.attach();
-  }
-  if (data.plotData.chrom_data) {
-    const chromLabelY = settings.plotHeight + 2 * settings.pngDotRadius + settings.yAxisY + 10;
-    Object.entries(data.plotData.chrom_data).forEach(([chrom, chromData]) => {
-      const chromLabel = chrom.replace("chr", "");
-      if (chromLabel === "M") return;
-      const centerPos = settings.yAxisX + settings.yAxisSpace + xScale(chromData.center);
-      svg.append("text").attr("x", centerPos).attr("y", chromLabelY).attr("text-anchor", "middle").attr("font-size", `${settings.fontSize + 2}px`).text(chromLabel);
-    });
-  }
-  svg.append("text").attr("x", settings.yAxisX + settings.yAxisSpace + (settings.plotWidth + 2 * settings.pngDotRadius) / 2).attr("y", settings.plotHeight + 2 * settings.pngDotRadius + settings.yAxisY + settings.xAxisLabelPad).attr("text-anchor", "middle").attr("font-size", `${settings.fontSize + 4}px`).attr("fill", "black").text("Chromosomes");
-  const title = svg.append("text").attr("x", settings.yAxisX + settings.yAxisSpace).attr("y", settings.yAxisY / 2).attr("font-weight", "bold").attr("font-size", `${settings.fontSize + 2}px`).text(custom.title ?? "Manhattan Plot");
-  const titleWidth = title.node().getBBox?.().width || 100;
-  if (settings.showDownload) {
-    const downloadDiv = div.append("div").style("position", "absolute").style("top", "5px").style("left", `${settings.yAxisX + settings.yAxisSpace + titleWidth + 8}px`);
-    icons["download"](downloadDiv, {
-      width: 16,
-      height: 16,
-      title: "Download Manhattan plot",
-      handler: () => {
-        const svgNode = svg.node();
-        const clone = svgNode.cloneNode(true);
-        const bbox = svgNode.getBBox();
-        clone.setAttribute("width", bbox.width.toString());
-        clone.setAttribute("height", bbox.height.toString());
-        clone.setAttribute("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
-        to_svg(clone, `manhattan_plot_${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, -5)}`, {
-          apply_dom_styles: true
-        });
-      }
-    });
-  }
-  const mutationTypes = [...new Set(data.plotData.points.map((p) => p.type).filter(Boolean))];
-  const legendData = custom.legend?.map((l) => ({ type: l.label, color: l.color, hollow: l.hollow })) ?? mutationTypes.map((type) => {
-    const point = data.plotData.points.find((p) => p.type === type);
-    return {
-      type: String(type).charAt(0).toUpperCase() + String(type).slice(1),
-      color: point?.color
-    };
-  });
-  if (settings.showLegend && legendData.length > 0) {
-    const legendY = settings.yAxisY / 2;
-    const totalWidth = legendData.length * settings.legendItemWidth;
-    const legendX = settings.yAxisX + settings.yAxisSpace + (settings.plotWidth + 2 * settings.pngDotRadius) - totalWidth - settings.legendRightOffset;
-    legendData.forEach((item, i) => {
-      const x = legendX + i * settings.legendItemWidth;
-      svg.append("circle").attr("cx", x + 8).attr("cy", legendY).attr("r", settings.legendDotRadius).attr("fill", item.hollow ? "none" : item.color).attr("stroke", item.hollow ? item.color : "none");
-      svg.append("text").attr("x", x + 8 + settings.legendTextOffset).attr("y", legendY + settings.legendVerticalOffset).attr("font-size", `${settings.legendFontSize + 2}px`).text(item.type);
-    });
-  }
-  return handle;
-}
-
-export {
-  manhattanLayoutDefaults,
-  plotManhattan
-};
-//# sourceMappingURL=chunk-3BXY7XEV.js.map

package/dist/chunk-4HCFRRDQ.js

@@ -1,243 +0,0 @@
-import {
-  keyupEnter
-} from "./chunk-JP4IU7DO.js";
-import {
-  get_bin_label,
-  get_bin_range_equation
-} from "./chunk-4TJO2DGU.js";
-import {
-  toStoredUnit,
-  toUserUnit
-} from "./chunk-W5J3LTYS.js";
-
-// termsetting/handlers/NumCustomBinEditor.ts
-var NumCustomBinEditor = class {
-  constructor(editHandler) {
-    this.dom = {};
-    this.editHandler = editHandler;
-    this.opts = editHandler.opts;
-    this.tw = editHandler.tw;
-    this.termsetting = editHandler.termsetting;
-  }
-  /* bin boundaries are stored in the term's own unit but entered and shown in its user-facing one.
-  both are identity functions unless the term declares valueConversion{} */
-  toDisplay(v) {
-    return toUserUnit(v, this.tw.term);
-  }
-  toStored(v) {
-    return toStoredUnit(v, this.tw.term);
-  }
-  async render(div) {
-    this.tw = this.editHandler.tw;
-    const isRemounting = !!this.dom.inputsDiv && this.editHandler.dom.binsDiv?.node().contains(this.dom.inputsDiv.node());
-    if (!isRemounting) this.q = this.getDefaultQ();
-    await this.editHandler.handler.density.setBinLines(this.getBoundaryOpts());
-    if (isRemounting) return;
-    if (this.dom.inputsDiv) {
-      this.dom.inputsDiv.remove();
-      delete this.dom.inputsDiv;
-    }
-    this.dom.inputsDiv = div.append("div").style("display", "flex").style("width", "100%");
-    this.renderCustomBinInputs();
-  }
-  getBoundaryOpts() {
-    return {
-      values: this.q.lst.slice(1).map((bin) => ({ x: this.toDisplay(bin.startunbounded ? bin.stop : bin.start), isDraggable: true })),
-      // the dragged value arrives in display units, matching what the textarea holds
-      callback: (d, value) => {
-        const boundaryValues = this.q.lst.slice(1).map((d2) => "start" in d2 ? this.toDisplay(d2.start) : "");
-        boundaryValues[d.index] = value;
-        this.dom.customBinBoundaryInput.property("value", boundaryValues.join("\n"));
-        this.handleInputChange("drag");
-        return 0;
-      }
-    };
-  }
-  getDefaultQ() {
-    if (this.tw.q.mode == "discrete" && this.tw.q.type == "custom-bin") {
-      const copy = JSON.parse(JSON.stringify(this.tw.q));
-      copy.lst.forEach((bin) => {
-        if (!bin.label) bin.label = get_bin_label(bin, this.tw.q, this.tw.term.valueConversion);
-        bin.range = get_bin_range_equation(bin, this.tw.q, this.tw.term.valueConversion);
-      });
-      return copy;
-    }
-    const { min, max } = this.editHandler.handler.density_data;
-    const defaultCustomBoundary = (
-      /* when no sample is annotated by this term,
-      minvalue and maxvalue are both null
-      setting defaultCustomBoundary to arbitrary "0" will allow existing UI to work
-      but remains to be evaluated if is really okay to use 0
-      */
-      !Number.isFinite(min) || !Number.isFinite(max) ? 0 : (
-        // minvalue and maxvalue is valid number
-        max != min ? min + (max - min) / 2 : max
-      )
-    );
-    const firstBin = {
-      startunbounded: true,
-      startinclusive: false,
-      stopinclusive: false,
-      stop: +defaultCustomBoundary.toFixed(this.tw.term.type == "integer" ? 0 : 2)
-    };
-    const lastBin = {
-      stopunbounded: true,
-      startinclusive: true,
-      stopinclusive: false,
-      start: +defaultCustomBoundary.toFixed(this.tw.term.type == "integer" ? 0 : 2)
-    };
-    return {
-      mode: "discrete",
-      type: "custom-bin",
-      lst: [
-        // Type '{ label: any; range: any; startunbounded: boolean; startinclusive: boolean; stopinclusive: boolean; stop: number; }' is not assignable to type 'StartUnboundedBin | FullyBoundedBin'.
-        // Property 'start' is missing in type '{ label: any; range: any; startunbounded: boolean; startinclusive: boolean; stopinclusive: boolean; stop: number; }' but required in type 'FullyBoundedBin'.
-        {
-          ...firstBin,
-          label: get_bin_label(firstBin, this.tw.q, this.tw.term.valueConversion),
-          range: get_bin_range_equation(firstBin, this.tw.q, this.tw.term.valueConversion)
-        },
-        {
-          ...lastBin,
-          label: get_bin_label(lastBin, this.tw.q, this.tw.term.valueConversion),
-          range: get_bin_range_equation(lastBin, this.tw.q, this.tw.term.valueConversion)
-        }
-        //satisfies StopUnboundedBin
-      ]
-    };
-  }
-  /******************* Functions for Numerical Custom size bins *******************/
-  renderCustomBinInputs() {
-    const q = this.q;
-    const boundaryDiv = this.dom.inputsDiv.append("div").style("margin-right", "20px");
-    this.dom.rangeAndLabelDiv = this.dom.inputsDiv.append("div");
-    boundaryDiv.append("div").style("margin-bottom", "5px").style("color", "rgb(136, 136, 136)").text("Bin boundaries");
-    this.dom.customBinBoundaryInput = boundaryDiv.append("textarea").style("width", "100px").style("height", "70px").text(
-      q.lst.slice(1).map((d) => "start" in d ? this.toDisplay(d.start) : "").join("\n")
-    ).on("change", () => this.handleInputChange()).on("keyup", async (event) => {
-      if (!keyupEnter(event) && event.key != 8 && event.key != "Enter") return;
-      if (!this.dom.inputsDiv.selectAll("input").node().value) return;
-      this.handleInputChange();
-    });
-    boundaryDiv.append("div").style("font-size", ".6em").style("margin-left", "1px").style("color", "#858585").html("Enter numeric values </br>seperated by ENTER");
-    this.renderBoundaryInputDivs();
-  }
-  renderBoundaryInputDivs() {
-    const data = this.q.lst;
-    const holder = this.dom.rangeAndLabelDiv;
-    holder.selectAll("*").remove();
-    const grid = holder.append("div").style("display", "grid").style("grid-template-columns", "auto auto").style("column-gap", "20px").style("align-items", "center");
-    grid.append("div").style("margin-bottom", "3px").style("color", "rgb(136, 136, 136)").text("Range");
-    grid.append("div").style("margin-bottom", "3px").style("color", "rgb(136, 136, 136)").text("Bin label");
-    for (const d of data) {
-      grid.append("div").attr("name", "range").html(d.range);
-      grid.append("div").append("input").attr("type", "text").style("margin", "2px 0px").property("value", d.label).on("change", function() {
-        d.label = this.value;
-      });
-    }
-    this.dom.customBinRanges = this.dom.inputsDiv.selectAll('div[name="range"]').data(data);
-    this.dom.customBinLabelInput = this.dom.inputsDiv.selectAll("input").data(data);
-  }
-  handleInputChange(eventType = "") {
-    const self = this.tw;
-    const inputs = this.dom.inputsDiv.selectAll("input");
-    inputs.property("value", "");
-    const data = this.processCustomBinInputs();
-    if (data == void 0) {
-      return;
-    }
-    if (self.q.hiddenValues) this.tw.q.hiddenValues = self.q.hiddenValues;
-    if (this.binsChanged(data, this.q.lst)) {
-      this.q.lst = data;
-    }
-    this.renderBoundaryInputDivs();
-    if (eventType != "drag") this.editHandler.handler.density.setBinLines(this.getBoundaryOpts());
-  }
-  binsChanged(data, qlst) {
-    if (data.length != qlst.length) return true;
-    if (Object.keys(data[0]).length !== Object.keys(qlst[0]).length) return true;
-    for (const [i, bin] of qlst.entries()) {
-      for (const k of Object.keys(bin)) {
-        if (bin[k] && bin[k] !== data[i][k]) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-  processCustomBinInputs() {
-    const self = this.termsetting;
-    const startinclusive = this.editHandler.boundaryInclusion == "startinclusive";
-    const stopinclusive = this.editHandler.boundaryInclusion == "stopinclusive";
-    const inputs = this.dom.inputsDiv.node().querySelectorAll("input");
-    const inputData = this.dom.customBinBoundaryInput.property("value").split("\n").filter((d) => d != "" && !isNaN(d));
-    const trackBins = new Set(inputData);
-    if (!trackBins.size) return this.tw.q.lst;
-    const sortedBins = Array.from(trackBins).map((v) => this.toStored(Number(v))).sort((a, b) => a - b);
-    const data = [
-      // first bin: StartUnbounded type
-      {
-        startunbounded: true,
-        stop: sortedBins[0],
-        startinclusive: false,
-        stopinclusive,
-        label: inputs[0].value
-      }
-    ];
-    if (!data[0].label) data[0].label = get_bin_label(data[0], self.q, self.term.valueConversion);
-    if (!data[0].range) data[0].range = get_bin_range_equation(data[0], self.q, self.term.valueConversion);
-    for (const [i, d] of sortedBins.entries()) {
-      let bin;
-      const label = inputs[i + 1]?.value || "";
-      if (i !== trackBins.size - 1) {
-        bin = {
-          start: +d,
-          startinclusive,
-          stopinclusive,
-          stop: sortedBins[i + 1],
-          label
-          //range: ''
-        };
-      } else {
-        bin = {
-          start: +d,
-          startinclusive,
-          stopinclusive: false,
-          stopunbounded: true,
-          label
-          //range: ''
-        };
-      }
-      if (bin.label === "" || bin.label === void 0) bin.label = get_bin_label(bin, self.q, self.term.valueConversion);
-      if (bin.range === "" || bin.range === void 0)
-        bin.range = get_bin_range_equation(bin, self.q, self.term.valueConversion);
-      data.push(bin);
-    }
-    return data;
-  }
-  getEditedQ(destroyDom = true) {
-    const lst = this.processCustomBinInputs();
-    if (destroyDom) {
-      for (const name of Object.keys(this.dom)) {
-        this.dom[name].remove();
-        delete this.dom[name];
-      }
-    }
-    return {
-      mode: "discrete",
-      type: "custom-bin",
-      lst
-    };
-  }
-  undoEdits() {
-    this.q = this.getDefaultQ();
-    this.dom.inputsDiv.selectAll("*").remove();
-    this.renderCustomBinInputs();
-    this.editHandler.handler.density.setBinLines(this.getBoundaryOpts());
-  }
-};
-
-export {
-  NumCustomBinEditor
-};
-//# sourceMappingURL=chunk-4HCFRRDQ.js.map