@sjcrh/proteinpaint-client 2.219.1 → 2.221.0

package/dist/termCollection-7Z55QNL7.js

@@ -0,0 +1,247 @@
+import {
+  HandlerBase,
+  getFractionSelectionError,
+  renderFractionSelection,
+  renderTable
+} from "./chunk-WD7FZ5EE.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-WXSMUSU7.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-RIHO7ZD5.js";
+import "./chunk-TVJOSRCH.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import "./chunk-4TJO2DGU.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-MHWYRNGA.js";
+import {
+  termItemType
+} from "./chunk-JHLF2ZC2.js";
+import "./chunk-WJLRU5OF.js";
+import "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-PWYMHUXY.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-HS5PO5ZQ.js";
+
+// termsetting/handlers/termCollection.ts
+var TermCollectionHandler = class extends HandlerBase {
+  //main menu dom elements before drag and drop divs are added
+  constructor(opts) {
+    super(opts);
+    this.dom = {};
+    this.termsetting = opts.termsetting;
+    this.tw = opts.termsetting.tw;
+    this.dom.holder = opts.holder || this.termsetting.dom.tip.d;
+  }
+  async showEditMenu(div) {
+    const self = this.termsetting;
+    div.selectAll("*").remove();
+    const terms = self.term.termlst;
+    const groupDiv = div.append("div");
+    const callback = this.tw.term.memberType == "numeric" ? self.tw.type === "TermCollectionTWFraction" ? addFractionTable(self, groupDiv, terms) : addNumericTable(self, groupDiv, terms) : addCategoricalTable(self, groupDiv, terms);
+    const buttons = div.append("div").style("padding", "6px 20px");
+    buttons.append("button").attr("data-testid", "sjpp-term-collection-members-apply").text("Apply").on("click", callback);
+  }
+  async showBinsEditMenu(div) {
+    const self = this.termsetting;
+    div.selectAll("*").remove();
+    const { NumericHandler } = await import("./NumericHandler-3RT32PTR.js");
+    const { NumDiscreteEditor } = await import("./NumDiscreteEditor-U7Z2QNYP.js");
+    const numericHandler = new NumericHandler({ termsetting: self });
+    const densityData = { min: 0, max: 1 };
+    numericHandler.density_data = densityData;
+    numericHandler.density.density_data = densityData;
+    numericHandler.density.no_density_data = true;
+    numericHandler.density.showViolin = async (div2) => {
+      div2.selectAll("*").remove();
+      div2.append("div").style("padding", "10px 5px").text("Fraction range is 0 to 1.");
+      return densityData;
+    };
+    numericHandler.density.setBinLines = async () => {
+    };
+    const editor = new NumDiscreteEditor({ termsetting: self }, numericHandler);
+    await editor.showEditMenu(div.append("div"));
+    const buttons = div.append("div").style("margin", "0px 0px 10px 12px");
+    buttons.append("button").attr("data-testid", "sjpp-term-collection-bins-apply").text("Apply").on("click", () => {
+      const editedQ = editor.getEditedQ();
+      self.q = {
+        ...editedQ,
+        denominators: self.q.denominators,
+        numerators: self.q.numerators
+      };
+      self.dom.tip.hide();
+      self.api.runCallback();
+    });
+    buttons.append("button").style("margin-left", "8px").text("Reset").on("click", () => editor.undoEdits());
+  }
+  getPillStatus() {
+    return this.tw.getStatus(this.termsetting.usecase);
+  }
+};
+function addFractionTable(self, div, terms) {
+  const selection = {
+    numerators: self.q.numerators?.slice() || [],
+    denominators: self.q.denominators?.slice() || []
+  };
+  renderFractionSelection({
+    holder: div,
+    termlst: terms,
+    selection,
+    propsByTermId: self.term.propsByTermId
+  });
+  return () => {
+    const error = getFractionSelectionError(selection);
+    if (error) return window.alert(error);
+    const q = self.q;
+    q.denominators = selection.denominators;
+    q.numerators = selection.numerators;
+    self.api.runCallback();
+  };
+}
+function addNumericTable(self, div, terms) {
+  const selectedRows = getSelectedRows(self, terms);
+  const rows = [];
+  for (const [index, term] of terms.entries()) {
+    const selected = selectedRows.includes(index);
+    const checked = selected && self.q.numerators?.includes(term.id) ? "checked" : "";
+    const disabled = selected ? "" : "disabled";
+    rows.push([
+      {},
+      {
+        html: `<input type='checkbox' data-testid='sjpp-term-collection-sort-member' ${checked} ${disabled} />`
+      }
+    ]);
+  }
+  const columns = [getTermNameColumn(self, terms), { label: "Use for sorting" }];
+  const noButtonCallback = () => {
+    for (const tr of div.select("table").select("tbody").node().querySelectorAll("tr")) {
+      const memberCheckbox = tr.querySelector(
+        'input[type="checkbox"]:not([data-testid="sjpp-term-collection-sort-member"])'
+      );
+      const sortingCheckbox = tr.querySelector(
+        '[data-testid="sjpp-term-collection-sort-member"]'
+      );
+      if (!memberCheckbox || !sortingCheckbox) continue;
+      sortingCheckbox.disabled = !memberCheckbox.checked;
+      if (!memberCheckbox.checked) sortingCheckbox.checked = false;
+    }
+  };
+  renderTable({
+    rows,
+    columns,
+    div,
+    maxHeight: "40vh",
+    noButtonCallback,
+    striped: false,
+    showHeader: true,
+    //false,
+    selectedRows,
+    columnButtons: void 0,
+    //Leave until table.js is typed
+    buttons: void 0
+  });
+  return () => {
+    const q = self.q;
+    const trs = div.select("table").select("tbody").node().querySelectorAll("tr");
+    q.lst = getSelectedTermIds(terms, trs);
+    q.numerators = terms.filter((term, i) => {
+      const checked = trs[i].querySelector('[data-testid="sjpp-term-collection-sort-member"]')?.checked;
+      return checked === true;
+    }).map((t) => t.id);
+    self.api.runCallback();
+  };
+}
+function addCategoricalTable(self, div, terms) {
+  const rows = [];
+  for (let i = 0; i < terms.length; i++) {
+    rows.push([{}]);
+  }
+  const selectedRows = getSelectedRows(self, terms);
+  const columns = [getTermNameColumn(self, terms)];
+  renderTable({
+    rows,
+    columns,
+    div: div.append("div").style("margin-top", "10px"),
+    maxWidth: "30vw",
+    maxHeight: "40vh",
+    noButtonCallback: () => {
+    },
+    striped: false,
+    showHeader: true,
+    //false,
+    selectedRows,
+    columnButtons: void 0,
+    //Leave until table.js is typed
+    buttons: void 0
+  });
+  const categoryDiv = div.append("div").style("margin-top", "15px");
+  const values = Object.assign({}, ...self.tw.term.termlst?.map((t) => t.values || {}) ?? []);
+  const categoryTable = categoryDiv.append("div");
+  const ckSource = self.tw.q.categoryKeys || self.tw.term.categoryKeys || [];
+  renderTable({
+    columns: [{ label: "CATEGORIES" }],
+    rows: ckSource.map((ck) => {
+      return [{ value: values[ck.key]?.label ?? ck.key, checked: ck.shown }];
+    }),
+    div: categoryTable,
+    maxWidth: "30vw",
+    maxHeight: "40vh",
+    noButtonCallback: () => {
+    },
+    // FIXME to supply a real callback
+    striped: false,
+    showHeader: true,
+    //false,
+    selectAll: true,
+    columnButtons: void 0,
+    //Leave until table.js is typed
+    buttons: void 0
+  });
+  return () => {
+    const trs = div.select("table").select("tbody").node().querySelectorAll("tr");
+    self.q.lst = getSelectedTermIds(terms, trs);
+    const catTrs = categoryTable.select("table").select("tbody").node().querySelectorAll("tr");
+    self.q.categoryKeys = ckSource.map((ck, i) => {
+      const checked = catTrs[i].querySelectorAll("td")[1].querySelector("input")?.checked;
+      return { key: ck.key, shown: !!checked };
+    });
+    self.api.runCallback();
+  };
+}
+function getSelectedRows(self, terms) {
+  const selectedIds = self.q.lst?.length > 0 ? new Set(self.q.lst) : new Set(self.term.termIds?.length > 0 ? self.term.termIds : terms.map((term) => term.id));
+  return terms.map((term, index) => selectedIds.has(term.id) ? index : -1).filter((index) => index !== -1);
+}
+function getSelectedTermIds(terms, trs) {
+  return terms.filter((_, i) => trs[i].querySelectorAll("td")[1].querySelector("input")?.checked === true).map((term) => term.id);
+}
+function getTermNameColumn(self, terms) {
+  if (!terms?.[0]) throw new Error("terms[0] missing");
+  return {
+    label: termItemType(terms[0]),
+    fillCell(td, index) {
+      const term = terms[index];
+      const color = self.term.propsByTermId?.[term.id]?.color || term.color;
+      if (color) {
+        td.append("span").attr("data-testid", "sjpp-term-collection-member-color").style("display", "inline-block").style("width", "10px").style("height", "10px").style("margin-right", "5px").style("background-color", color);
+      }
+      td.append("span").text(term.name);
+    }
+  };
+}
+function fillTW(tw) {
+  if (!tw.type) tw.type = "termCollection";
+  if (!tw.q) tw.q = { mode: "continuous", type: "compositePercentage" };
+  else tw.q.mode = "continuous";
+  return tw;
+}
+export {
+  TermCollectionHandler,
+  fillTW
+};
+//# sourceMappingURL=termCollection-7Z55QNL7.js.map

package/dist/termCollection.unit.spec-LQ5MIBDH.js

@@ -0,0 +1,295 @@
+import {
+  SearchHandler
+} from "./chunk-XBBFFOLS.js";
+import {
+  require_tape
+} from "./chunk-PJYCTAMC.js";
+import "./chunk-WD7FZ5EE.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-WXSMUSU7.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-RIHO7ZD5.js";
+import "./chunk-TVJOSRCH.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import "./chunk-4TJO2DGU.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-MHWYRNGA.js";
+import "./chunk-JHLF2ZC2.js";
+import "./chunk-WJLRU5OF.js";
+import "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-PWYMHUXY.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import {
+  __toESM
+} from "./chunk-HS5PO5ZQ.js";
+
+// termdb/handlers/test/termCollection.unit.spec.ts
+var import_tape = __toESM(require_tape(), 1);
+function getHolder() {
+  return select_default("body").append("div");
+}
+function getTermCollectionDetails(overrides = {}) {
+  return {
+    name: "Test Collection",
+    type: "gene",
+    memberType: "gene",
+    termlst: [
+      { id: "gene1", name: "TP53", values: { tissue: "Lung" } },
+      { id: "gene2", name: "KRAS", values: { tissue: "Colon" } },
+      { id: "gene3", name: "BRCA1", values: { tissue: "Breast" } }
+    ],
+    categoryKeys: [
+      { key: "tissue", shown: true },
+      { key: "expression", shown: false }
+    ],
+    propsByTermId: {
+      gene1: { color: "#FF0000" },
+      gene2: { color: "#00FF00" }
+    },
+    ...overrides
+  };
+}
+(0, import_tape.default)("\n", function(test) {
+  test.comment("-***- termdb/handlers/termCollection -***-");
+  test.end();
+});
+(0, import_tape.default)("init() should render term list table with all terms from details.termlst", async (test) => {
+  const handler = new SearchHandler();
+  const holder = getHolder();
+  const details = getTermCollectionDetails();
+  await handler.init({
+    holder,
+    callback: () => {
+    },
+    app: {},
+    details
+  });
+  const table = holder.select("table");
+  test.ok(table.node(), "Should render a table");
+  const rows = table.selectAll("tbody tr");
+  test.equal(rows.size(), 3, "Should render three rows for three terms");
+  const rowTexts = rows.nodes().map((row) => row.textContent.trim());
+  test.ok(rowTexts[0].includes("TP53"), "First row should contain TP53");
+  test.ok(rowTexts[1].includes("KRAS"), "Second row should contain KRAS");
+  test.ok(rowTexts[2].includes("BRCA1"), "Third row should contain BRCA1");
+  if (test["_ok"]) holder.remove();
+  test.end();
+});
+(0, import_tape.default)("init() should render category table when details.categoryKeys is present", async (test) => {
+  const handler = new SearchHandler();
+  const holder = getHolder();
+  const details = getTermCollectionDetails();
+  await handler.init({
+    holder,
+    callback: () => {
+    },
+    app: {},
+    details
+  });
+  const tables = holder.selectAll("table");
+  test.equal(tables.size(), 2, "Should render two tables when categoryKeys is present");
+  const categoryTable = tables.nodes()[1];
+  const categoryRows = select_default(categoryTable).selectAll("tbody tr");
+  test.equal(categoryRows.size(), 2, "Should render two rows for two categories");
+  const categoryTexts = categoryRows.nodes().map((row) => row.textContent.trim());
+  test.ok(categoryTexts[0].includes("tissue"), "Should display tissue category key");
+  test.ok(categoryTexts[1].includes("expression"), "Should display expression category key");
+  if (test["_ok"]) holder.remove();
+  test.end();
+});
+(0, import_tape.default)("init() should call callback with selected terms, categoryKeys, and properties", async (test) => {
+  const handler = new SearchHandler();
+  const holder = getHolder();
+  const details = getTermCollectionDetails();
+  let callbackResult;
+  await handler.init({
+    holder,
+    callback: (result) => {
+      callbackResult = result;
+    },
+    app: {},
+    details
+  });
+  const termsTable = holder.selectAll("table").nodes()[0];
+  const checkboxes = termsTable.querySelectorAll('tbody input[type="checkbox"]');
+  checkboxes[0].checked = true;
+  checkboxes[1].checked = true;
+  checkboxes[2].checked = false;
+  const categoryTable = holder.selectAll("table").nodes()[1];
+  const categoryCheckboxes = categoryTable.querySelectorAll('tbody input[type="checkbox"]');
+  categoryCheckboxes[0].checked = true;
+  categoryCheckboxes[1].checked = false;
+  const selectBtn = holder.select('[data-testid="sjpp-term-collection-select"]').node();
+  selectBtn.click();
+  test.equal(callbackResult?.type, "termCollection", "Should set type to termCollection");
+  test.equal(callbackResult?.name, "Test Collection", "Should pass collection name");
+  test.equal(callbackResult?.memberType, "gene", "Should pass memberType");
+  test.deepEqual(callbackResult?.termIds, ["gene1", "gene2"], "Should pass selected term IDs");
+  test.equal(callbackResult?.termlst.length, 2, "Should pass selected term list with correct length");
+  test.equal(callbackResult?.termlst[0].name, "TP53", "First selected term should be TP53");
+  test.equal(callbackResult?.termlst[1].name, "KRAS", "Second selected term should be KRAS");
+  test.deepEqual(
+    callbackResult?.categoryKeys,
+    [
+      { key: "tissue", shown: true },
+      { key: "expression", shown: false }
+    ],
+    "Should pass updated categoryKeys with shown status"
+  );
+  test.deepEqual(
+    callbackResult?.propsByTermId,
+    { gene1: { color: "#FF0000" }, gene2: { color: "#00FF00" } },
+    "Should pass propsByTermId for selected terms only"
+  );
+  if (test["_ok"]) holder.remove();
+  test.end();
+});
+(0, import_tape.default)("init() should not render category table when details.categoryKeys is missing", async (test) => {
+  const handler = new SearchHandler();
+  const holder = getHolder();
+  const details = getTermCollectionDetails({ categoryKeys: void 0 });
+  await handler.init({
+    holder,
+    callback: () => {
+    },
+    app: {},
+    details
+  });
+  const tables = holder.selectAll("table");
+  test.equal(tables.size(), 1, "Should render only one table when categoryKeys is missing");
+  if (test["_ok"]) holder.remove();
+  test.end();
+});
+(0, import_tape.default)("init() disables the Select button for an invalid collection", async (test) => {
+  const handler = new SearchHandler();
+  const holder = getHolder();
+  const details = getTermCollectionDetails();
+  let callbackResult;
+  await handler.init({
+    holder,
+    callback: (result) => {
+      callbackResult = result;
+    },
+    app: {},
+    details
+  });
+  const selectBtn = holder.select('[data-testid="sjpp-term-collection-select"]').node();
+  const getChecks = (tableIdx) => [
+    ...holder.selectAll("table").nodes()[tableIdx].querySelectorAll('tbody input[type="checkbox"]')
+  ];
+  const terms = () => getChecks(0);
+  const categories = () => getChecks(1);
+  test.equal(selectBtn.disabled, false, "enables the button for the default selection");
+  terms()[0].click();
+  test.equal(selectBtn.disabled, false, "stays enabled with two selected variables");
+  terms()[1].click();
+  test.equal(selectBtn.disabled, true, "disables the button with a single selected variable");
+  test.ok(`${selectBtn.title}`.includes("two variables"), `titles the button with the reason: ${selectBtn.title}`);
+  selectBtn.click();
+  test.equal(callbackResult, void 0, "a disabled button does not submit the selection");
+  terms()[1].click();
+  test.equal(selectBtn.disabled, false, "re-enables the button with two selected variables");
+  categories()[0].click();
+  test.equal(selectBtn.disabled, false, "stays enabled with one selected category");
+  categories()[1].click();
+  test.equal(selectBtn.disabled, true, "disables the button without a selected category");
+  test.ok(`${selectBtn.title}`.includes("category"), `titles the button with the reason: ${selectBtn.title}`);
+  categories()[1].click();
+  test.equal(selectBtn.disabled, false, "re-enables the button for a valid collection");
+  selectBtn.click();
+  test.deepEqual(callbackResult?.termIds, ["gene2", "gene3"], "submits the selected variables");
+  test.deepEqual(
+    callbackResult?.categoryKeys,
+    [
+      { key: "tissue", shown: false },
+      { key: "expression", shown: true }
+    ],
+    "submits the selected categories"
+  );
+  if (test["_ok"]) holder.remove();
+  test.end();
+});
+(0, import_tape.default)("fraction selection returns a raw fraction wrapper and retains every member", async (test) => {
+  const handler = new SearchHandler();
+  const holder = getHolder();
+  const details = getTermCollectionDetails({
+    type: "numeric",
+    memberType: "numeric",
+    categoryKeys: void 0
+  });
+  let callbackResult;
+  await handler.init({
+    holder,
+    callback: (result) => {
+      callbackResult = result;
+    },
+    app: {},
+    details,
+    usecase: { target: "barchart", detail: "term2" },
+    termCollectionSelectionMode: "fraction"
+  });
+  test.ok(holder.text().includes("Denominator"), "renders the denominator selector");
+  test.ok(holder.text().includes("Numerator"), "renders the numerator selector");
+  const rows = holder.selectAll("tbody tr").nodes();
+  const numerator = rows[1].querySelector('[data-testid="sjpp-term-collection-numerator"]');
+  numerator.click();
+  holder.select('[data-testid="sjpp-term-collection-fraction-select"]').node().click();
+  test.equal(callbackResult?.type, "TermCollectionTWFraction", "returns a fraction wrapper");
+  test.deepEqual(callbackResult?.q.denominators, ["gene1", "gene2", "gene3"], "defaults all members as denominators");
+  test.deepEqual(callbackResult?.q.numerators, ["gene1", "gene2"], "returns the selected numerators");
+  test.equal(callbackResult?.term.termlst.length, 3, "keeps the complete source member list");
+  test.deepEqual(callbackResult?.term.termIds, ["gene1", "gene2", "gene3"], "keeps every source member ID");
+  if (test["_ok"]) holder.remove();
+  test.end();
+});
+(0, import_tape.default)("fraction selection clears and disables the numerator of a deselected denominator", async (test) => {
+  const handler = new SearchHandler();
+  const holder = getHolder();
+  const details = getTermCollectionDetails({
+    type: "numeric",
+    memberType: "numeric",
+    categoryKeys: void 0
+  });
+  let callbackResult;
+  await handler.init({
+    holder,
+    callback: (result) => {
+      callbackResult = result;
+    },
+    app: {},
+    details,
+    usecase: { target: "barchart", detail: "term2" },
+    termCollectionSelectionMode: "fraction"
+  });
+  const getNumerators = () => holder.selectAll('[data-testid="sjpp-term-collection-numerator"]').nodes();
+  const getDenominators = () => holder.selectAll('[data-testid="sjpp-term-collection-denominator"]').nodes();
+  getDenominators()[0].click();
+  test.equal(getNumerators()[0].checked, false, "clears the numerator of a deselected denominator");
+  test.equal(getNumerators()[0].disabled, true, "disables the numerator of a deselected denominator");
+  const selectBtn = holder.select('[data-testid="sjpp-term-collection-fraction-select"]').node();
+  test.equal(selectBtn.disabled, true, "disables the Select button without a numerator");
+  selectBtn.click();
+  test.equal(callbackResult, void 0, "does not submit a fraction without a numerator");
+  getDenominators()[0].click();
+  test.equal(getNumerators()[0].disabled, false, "enables the numerator when its denominator is restored");
+  test.equal(getNumerators()[0].checked, false, "does not silently restore the numerator");
+  getNumerators()[1].click();
+  holder.select('[data-testid="sjpp-term-collection-fraction-select"]').node().click();
+  test.deepEqual(callbackResult?.q.numerators, ["gene2"], "submits the edited numerator selection");
+  test.deepEqual(
+    callbackResult?.q.denominators,
+    ["gene1", "gene2", "gene3"],
+    "submits the restored denominator selection"
+  );
+  if (test["_ok"]) holder.remove();
+  test.end();
+});
+//# sourceMappingURL=termCollection.unit.spec-LQ5MIBDH.js.map

package/dist/termCollectionFractionSelection-24DZYVDU.js

@@ -0,0 +1,38 @@
+import {
+  getDefaultFractionSelection,
+  getFractionSelectionError,
+  makeFractionTermWrapper,
+  mayRenderFractionSelection,
+  pickCollectionFraction,
+  renderFractionSelection
+} from "./chunk-WD7FZ5EE.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-WXSMUSU7.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-RIHO7ZD5.js";
+import "./chunk-TVJOSRCH.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import "./chunk-4TJO2DGU.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-MHWYRNGA.js";
+import "./chunk-JHLF2ZC2.js";
+import "./chunk-WJLRU5OF.js";
+import "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-PWYMHUXY.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-HS5PO5ZQ.js";
+export {
+  getDefaultFractionSelection,
+  getFractionSelectionError,
+  makeFractionTermWrapper,
+  mayRenderFractionSelection,
+  pickCollectionFraction,
+  renderFractionSelection
+};
+//# sourceMappingURL=termCollectionFractionSelection-24DZYVDU.js.map