@sjcrh/proteinpaint-client 2.211.0 → 2.211.1-0

package/dist/chunk-KPXUMHAA.js

@@ -0,0 +1,182 @@
+import {
+  Tabs,
+  addGeneSearchbox,
+  make_one_checkbox,
+  make_radios
+} from "./chunk-UODENFH4.js";
+import {
+  Menu
+} from "./chunk-7XZA2XR2.js";
+import {
+  termType2label
+} from "./chunk-RU2UHH7M.js";
+import {
+  TermTypeGroups
+} from "./chunk-57Z4VYLM.js";
+
+// termdb/handlers/pseudobulk.ts
+var SearchHandler = class {
+  async init(opts) {
+    const pseudobulkTerms = this.validateOpts(opts);
+    this.callback = opts.callback;
+    this.app = opts.app;
+    this.genome = opts.genomeObj;
+    const holder = opts.holder.append("div").style("padding", "10px 0px");
+    this.multiSelect = opts?.usecase?.target == "aggregateMatrix";
+    this.selectedTerm = void 0;
+    this.map = this.buildRenderingDataMap(pseudobulkTerms);
+    this.renderPseudobulkSearch(holder);
+  }
+  validateOpts(opts) {
+    if (!opts) throw new Error("opts is required");
+    if (!opts.app) throw new Error("opts.app is required");
+    if (!opts.holder) throw new Error("opts.holder is required");
+    if (opts.genomeObj == null || typeof opts.genomeObj !== "object") throw new Error("genomeObj is required");
+    if (!opts.callback) throw new Error("opts.callback is required");
+    const pseudobulkTerms = opts.app.vocabApi.termdbConfig?.termType2terms?.[TermTypeGroups.PSEUDOBULK];
+    if (!pseudobulkTerms?.length) {
+      throw new Error(
+        `termType2terms[${TermTypeGroups.PSEUDOBULK}]:[] is required in termdbConfig for pseudobulk handler`
+      );
+    }
+    return pseudobulkTerms;
+  }
+  /** Builds a map from assay to memberId to terms */
+  buildRenderingDataMap(pseudobulkTerms) {
+    const map = /* @__PURE__ */ new Map();
+    for (const term of pseudobulkTerms) {
+      const { assay, memberId } = term;
+      if (!map.has(assay)) map.set(assay, /* @__PURE__ */ new Map());
+      const assayMap = map.get(assay);
+      if (!assayMap.has(memberId)) assayMap.set(memberId, []);
+      assayMap.get(memberId).push(term);
+    }
+    return map;
+  }
+  /** If more than one assay, render tabs for each assay. Member IDs within
+   * an assay are rendered as tabs when there is more than one. */
+  renderPseudobulkSearch(holder) {
+    if (!this.map || this.map.size < 1) throw new Error("map is not initialized");
+    if (this.map.size === 1) {
+      const label = termType2label(this.map.keys().next().value);
+      holder.append("div").style("padding-bottom", "10px").text("Single-cell pseudobulk " + label);
+      this.renderMemberIdsByAssay(holder.append("div"), this.map);
+      return;
+    }
+    const tabs = this.buildTabsOpts(this.map);
+    new Tabs({ holder, tabs, tabsPosition: "vertical" }).main();
+  }
+  buildTabsOpts(map) {
+    const tabs = [];
+    for (const [key, valuesMap] of map.entries()) {
+      const label = termType2label(key);
+      tabs.push({
+        label,
+        active: false,
+        callback: (_, tab) => {
+          this.renderMemberIdsByAssay(tab.contentHolder, /* @__PURE__ */ new Map([[key, valuesMap]]));
+        }
+      });
+    }
+    return tabs;
+  }
+  renderMemberIdsByAssay(holder, map) {
+    const memberIdMap = map.values().next().value;
+    holder.selectAll("*").remove();
+    this.renderTermdByMemberId(holder, memberIdMap);
+  }
+  renderTermdByMemberId(holder, memberIdMap) {
+    const layout = holder.append("div").style("display", "flex").style("align-items", "flex-start").style("gap", "30px");
+    const pseudoTermsWrapper = layout.append("div").attr("data-testid", "sjpp-pseudobulk-terms-wrapper");
+    const geneSearchWrapper = layout.append("div").attr("data-testid", "sjpp-pseudobulk-gene-search-wrapper");
+    this.renderPseudobulkTerms(pseudoTermsWrapper, memberIdMap, geneSearchWrapper);
+  }
+  renderPseudobulkTerms(holder, memberIdMap, geneSearchHolder) {
+    if (memberIdMap.size === 1) {
+      const [memberId, terms] = memberIdMap.entries().next().value;
+      if (this.multiSelect) {
+        this.renderCategoriesAsTerms(holder, terms);
+      } else this.renderCategoryRadios(holder, memberId, terms, geneSearchHolder);
+      return;
+    }
+    const memberEntries = Array.from(memberIdMap.entries());
+    const tabs = memberEntries.map(([memberId, terms]) => ({
+      label: memberId,
+      active: false,
+      testid: `sjpp-pseudobulk-member-${memberId}`,
+      callback: (_, tab) => {
+        geneSearchHolder.selectAll("*").remove();
+        tab.contentHolder.selectAll("*").remove();
+        if (this.multiSelect) this.renderCategoriesAsTerms(tab.contentHolder, terms);
+        else this.renderCategoryRadios(tab.contentHolder, memberId, terms, geneSearchHolder);
+      }
+    }));
+    new Tabs({ holder, tabs, tabsPosition: "vertical" }).main();
+  }
+  renderCategoryRadios(holder, memberId, terms, geneSearchHolder) {
+    if (!terms || terms.length < 1) throw new Error("No terms found for memberId");
+    const options = terms.map((term) => ({
+      label: term.name,
+      value: term.id,
+      checked: false,
+      testid: `sjpp-pseudobulk-category-${term.id}`
+    }));
+    make_radios({
+      holder,
+      inputName: `sjpp-pseudobulk-category-radios-${memberId}`,
+      options,
+      styles: { display: "block", padding: "3px 5px" },
+      callback: (value) => {
+        const term = terms.find((term2) => term2.id == value);
+        if (!term) throw new Error(`No pseudobulk term found for category ${value}`);
+        this.selectedTerm = term;
+        this.renderGeneSelection(geneSearchHolder);
+      }
+    });
+  }
+  renderGeneSelection(holder) {
+    holder.selectAll("*").remove();
+    const geneSearch = addGeneSearchbox({
+      tip: new Menu({ padding: "0px" }),
+      genome: this.genome,
+      row: holder,
+      searchOnly: "gene",
+      callback: () => {
+        if (!geneSearch.geneSymbol) throw new Error("No gene selected");
+        if (!this.selectedTerm) throw new Error("No pseudobulk cell type selected");
+        this.callback(createPseudobulkTerm(this.selectedTerm, geneSearch.geneSymbol));
+      }
+    });
+  }
+  /** Mimics the style and functionality of pills created in tree.js.
+   * Returns the term object(s) from termdbConfig.termType2terms.[TermTypeGroups.PSEUDOBULK]
+   * without the gene. */
+  renderCategoriesAsTerms(holder, terms) {
+    holder.style("padding", "0px 10px");
+    make_one_checkbox({
+      holder,
+      labeltext: "Select all",
+      divstyle: { opacity: "0.7" },
+      callback: () => this.callback(terms)
+    });
+    const wrapper = holder.append("div").style("display", "block").style("padding", "10px 15px 0px");
+    wrapper.selectAll(".pseudobulk-term").data(terms, (term) => term.id).join((enter) => {
+      const row = enter.append("div").attr("class", "pseudobulk-term");
+      row.append("div").attr("class", "termlabel sja_filter_tag_btn sja_tree_click_term ts_pill").style("padding", "5px 8px").style("margin", "1px 0px").style("border-radius", "6px").text((term) => term.name).on("click", async (_, term) => {
+        await this.callback(term);
+      });
+      return row;
+    });
+  }
+};
+function createPseudobulkTerm(selectedTerm, gene) {
+  const category = selectedTerm.category || selectedTerm.id;
+  const name = `${selectedTerm.assay} ${category} ${gene}`;
+  return { ...selectedTerm, id: name, category, gene, name };
+}
+
+export {
+  SearchHandler,
+  createPseudobulkTerm
+};
+//# sourceMappingURL=chunk-KPXUMHAA.js.map

package/dist/chunk-KQO5GSCC.js

@@ -0,0 +1,237 @@
+import {
+  DataPointInteractions,
+  axisstyle,
+  createLollipopFromGene,
+  drawHoverShapes,
+  showResultsTable,
+  table2col,
+  to_svg
+} from "./chunk-UODENFH4.js";
+import {
+  Menu
+} from "./chunk-7XZA2XR2.js";
+import {
+  icons
+} from "./chunk-6RRZRISL.js";
+import {
+  axisLeft
+} from "./chunk-Z2ZITHT4.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-KQO5GSCC.js.map

package/dist/chunk-KUB7DPKZ.js

@@ -0,0 +1,56 @@
+import {
+  sayerror
+} from "./chunk-UODENFH4.js";
+import {
+  TermTypeGroups
+} from "./chunk-57Z4VYLM.js";
+
+// termdb/handlers/singleCellNumericValue.ts
+var SearchHandler = class {
+  async init(opts) {
+    this.validateOpts(opts);
+    this.callback = opts.callback;
+    this.app = opts.app;
+    const holder = opts.holder.append("div").style("padding", "10px 0px");
+    const scnvTerms = opts.app.vocabApi.termdbConfig?.termType2terms?.[TermTypeGroups.SINGLECELL_NUMERIC_VALUE];
+    if (!scnvTerms?.length) {
+      sayerror(
+        holder,
+        `termType2terms[${TermTypeGroups.SINGLECELL_NUMERIC_VALUE}]:[] is required in termdbConfig for singleCellNumericValue handler`
+      );
+      return;
+    }
+    const usecaseConfig = opts.usecase?.specialCase?.config;
+    const plots = usecaseConfig?.sample?.plots;
+    const isMeta = usecaseConfig?.sample?.isMetaResult;
+    const filtered = plots ? scnvTerms.filter((t) => plots.includes(t.plot)) : usecaseConfig?.name ? scnvTerms.filter((t) => t.plot === usecaseConfig.name) : scnvTerms;
+    const getLabel = (t) => isMeta || plots?.length == 1 ? t.name : `${t.name} (${t.plot})`;
+    const filteredTerms = new Set(
+      plots || !usecaseConfig?.name ? filtered.map((t) => ({ ...t, label: getLabel(t) })) : filtered
+    );
+    for (const t of Array.from(filteredTerms)) {
+      holder.append("div").classed("termdiv", true).style("padding", "0px 5px").append("div").classed("termlabel sja_filter_tag_btn sja_tree_click_term ts_pill", true).style("display", "inline-block").style("padding", "5px 8px").style("margin", "1px 0px").style("border-radius", "6px").text(t.label || t.name).on("click", () => {
+        const term = this.makeTerm(t, usecaseConfig);
+        this.callback(term);
+      });
+    }
+  }
+  makeTerm(_term, usecaseConfig) {
+    const term = { ..._term };
+    if (!term.sample && usecaseConfig?.sample) term.sample = usecaseConfig.sample;
+    return term;
+  }
+  validateOpts(opts) {
+    if (opts.callback == null) throw new Error("callback is required");
+    if (opts.app == null) throw new Error("app is required");
+    if (opts.holder == null) throw new Error("holder is required");
+    if (opts.usecase == null) throw new Error("usecase is required");
+    if (!opts.app.vocabApi.termdbConfig?.termType2terms)
+      throw new Error("termType2terms is required in termdbConfig for singleCellNumericValue handler");
+  }
+};
+
+export {
+  SearchHandler
+};
+//# sourceMappingURL=chunk-KUB7DPKZ.js.map