@sjcrh/proteinpaint-client 2.226.0 → 2.227.0

package/dist/chunk-7DC4PD5R.js

@@ -0,0 +1,182 @@
+import {
+  Tabs,
+  addGeneSearchbox,
+  make_one_checkbox,
+  make_radios
+} from "./chunk-YBXQBSFY.js";
+import {
+  Menu
+} from "./chunk-CNFTQSNE.js";
+import {
+  termType2label
+} from "./chunk-CFYWQJ7F.js";
+import {
+  TermTypeGroups
+} from "./chunk-2N345NXD.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-7DC4PD5R.js.map

package/dist/chunk-7ISYXUJ7.js

@@ -0,0 +1,243 @@
+import {
+  keyupEnter
+} from "./chunk-YBXQBSFY.js";
+import {
+  get_bin_label,
+  get_bin_range_equation
+} from "./chunk-VVWZ4BOI.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-7ISYXUJ7.js.map

package/dist/chunk-7NVFEGCE.js

@@ -0,0 +1,30 @@
+import {
+  dtTermTypes,
+  migrateLegacyTvsOrigins
+} from "./chunk-CFYWQJ7F.js";
+
+// filter/rehydrateFilter.js
+function rehydrateFilter(filter, vocabApi, proms = []) {
+  if (Object.isFrozen(filter)) throw "filter obj is frozen, unable to rehydrate and modify";
+  if (filter.type == "tvslst") {
+    for (const f of filter.lst) rehydrateFilter(f, vocabApi, proms);
+  } else if (filter.type == "tvs") {
+    if (typeof filter.tvs?.term != "object") throw "a tvs lacks structure of .tvs.term{}";
+    if (dtTermTypes.has(filter.tvs.term.type)) migrateLegacyTvsOrigins(filter.tvs);
+    if (filter.tvs.term.id && !filter.tvs.term.name) {
+      proms.push(
+        vocabApi.getterm(filter.tvs.term.id).then((term) => {
+          filter.tvs.term = term;
+        })
+      );
+    }
+  } else {
+    throw `cannot rehydrate filter.type='${filter.type}'`;
+  }
+  return proms;
+}
+
+export {
+  rehydrateFilter
+};
+//# sourceMappingURL=chunk-7NVFEGCE.js.map