@sjcrh/proteinpaint-client 2.205.0 → 2.206.0

package/dist/table-EAXMDWOY.js

@@ -0,0 +1,197 @@
+import {
+  PlotBase,
+  controlsInit
+} from "./chunk-Q5SK3U2T.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-54KC7DAB.js";
+import "./chunk-N7DVQTPC.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import "./chunk-RPDVFM7E.js";
+import "./chunk-M4XXKTH2.js";
+import "./chunk-5ILEFNXJ.js";
+import "./chunk-IZUYLFOX.js";
+import {
+  getCompInit
+} from "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-7X6NF7NI.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-Z2ZITHT4.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-FXQXCOII.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-HS5PO5ZQ.js";
+
+// plots/table.js
+var TdbTable = class _TdbTable extends PlotBase {
+  static type = "table";
+  constructor(opts, api) {
+    super(opts, api);
+    this.type = _TdbTable.type;
+  }
+  async init() {
+    const opts = this.opts;
+    const controls = opts.controls ? null : opts.holder.append("div");
+    const holder = opts.controls ? opts.holder : opts.holder.append("div");
+    this.dom = {
+      header: opts.header,
+      controls,
+      holder,
+      div: holder.style("margin", "10px 0px").style("display", "none"),
+      inputs: ["term1", "overlay"]
+    };
+    if (this.dom.header) this.dom.header.html("Crosstab");
+    setInteractivity(this);
+    setRenderers(this);
+    await this.setControls();
+  }
+  async setControls() {
+    if (this.opts.controls) {
+      this.opts.controls.on("downloadClick.table", this.download);
+    } else {
+      this.dom.holder.attr("class", "pp-termdb-plot-viz").style("display", "inline-block").style("min-width", "300px").style("margin-left", "50px");
+      this.components = {
+        controls: await controlsInit({
+          app: this.app,
+          id: this.id,
+          holder: this.dom.controls.style("display", "inline-block")
+        })
+      };
+      this.components.controls.on("downloadClick.table", this.download);
+    }
+  }
+  getState(appState, sub) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) {
+      throw `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`;
+    }
+    return {
+      activeCohort: appState.activeCohort,
+      termfilter: appState.termfilter,
+      config: {
+        term: config.term,
+        term2: config.term2,
+        settings: {
+          common: config.settings.common,
+          table: config.settings.table
+        }
+      }
+    };
+  }
+  async main() {
+    try {
+      this.config = structuredClone(this.state.config);
+      if (!this.config.term2) {
+        this.dom.div.style("display", "none");
+        throw "term2 is required for table view";
+      }
+      const c = this.state.config;
+      if (this.dom.header) this.dom.header.html(c.term.term.name + " vs " + c.term2.term.name);
+      const reqOpts = this.getDataRequestOpts();
+      this.data = await this.vocabApi.getNestedChartSeriesData(reqOpts);
+      this.app.vocabApi.syncTermData(this.state.config, this.data);
+      const [columns, rows] = this.processData(this.data);
+      this.render(columns, rows);
+    } catch (e) {
+      throw e;
+    }
+  }
+  // creates an opts object for the vocabApi.getNestedChartsData()
+  getDataRequestOpts() {
+    const c = this.config;
+    const opts = { term: c.term, filter: this.state.termfilter.filter };
+    if (c.term2) opts.term2 = c.term2;
+    if (c.term0) opts.term0 = c.term0;
+    if (this.state.ssid) opts.ssid = this.state.ssid;
+    return opts;
+  }
+  processData(data) {
+    const t2 = this.config.term2.term;
+    const columns = data.refs.rows.map((key) => {
+      const label = t2.values && key in t2.values ? t2.values[key].label : key;
+      return { key, label };
+    });
+    const column_keys = data.refs.rows;
+    const t1 = this.config.term.term;
+    const rows = data.refs.cols.map((v1) => {
+      const series = data.charts[0].serieses.find((d) => d.seriesId == v1);
+      const label = t1.values && v1 in t1.values ? t1.values[v1].label : v1;
+      return {
+        label,
+        lst: !series ? [] : series.data.slice().sort((a, b) => column_keys.indexOf(a.dataId) - column_keys.indexOf(b.dataId)).map((d) => {
+          return {
+            label: d.dataId,
+            value: d.total
+          };
+        })
+      };
+    });
+    return [columns, rows];
+  }
+};
+function setInteractivity(self) {
+  self.download = () => {
+    if (!self.state || !self.state.isVisible) return;
+    const data = [];
+    self.dom.div.selectAll("tr").each(function() {
+      const series = [];
+      select_default(this).selectAll("th, td").each(function() {
+        series.push(select_default(this).text());
+      });
+      data.push(series);
+    });
+    const matrix = data.map((row) => row.join("	")).join("\n");
+    const a = document.createElement("a");
+    document.body.appendChild(a);
+    a.addEventListener(
+      "click",
+      function() {
+        a.download = self.config.term.term.name + " table.txt";
+        a.href = URL.createObjectURL(new Blob([matrix], { type: "text/tab-separated-values" }));
+        document.body.removeChild(a);
+      },
+      false
+    );
+    a.click();
+  };
+}
+function setRenderers(self) {
+  self.render = function render(columns, rows) {
+    self.dom.div.style("display", "inline-block").selectAll("*").remove();
+    const table = self.dom.div.append("table").style("margin-right", "20px").style("border-spacing", "3px").style("border-collapse", "collapse").style("border", "1px solid black");
+    const tr = table.append("tr").style("white-space", "normal").style("background-color", "#ececec");
+    tr.append("td");
+    for (const value of columns) {
+      const label = value.label;
+      tr.append("th").text(label.length > 20 ? label.slice(0, 16) + "..." : label).attr("aria-label", label).style("border", "1px solid black").style("padding", "3px").style("text-align", "center").style("min-width", "80px").style("max-width", "150px").style("word-break", label.length > 12 ? "break-word" : "normal").style("vertical-align", "top");
+    }
+    let i = 0;
+    for (const t1v of rows) {
+      const tr2 = table.append("tr").style("background-color", i++ % 2 == 0 ? "#fff" : "#ececec");
+      tr2.append("th").text(t1v.label.length > 20 ? t1v.label.slice(0, 20) + "..." : t1v.label).attr("aria-label", t1v.label).style("border", "1px solid black").style("padding", "3px").style("word-break", t1v.label.length > 12 ? "break-all" : "normal");
+      const column_keys = columns.map((d) => d.key);
+      for (const t2label of column_keys) {
+        const td = tr2.append("td").style("border", "1px solid black").style("padding", "3px 5px").style("text-align", "center");
+        const v = t1v.lst.find((i2) => i2.label == t2label);
+        if (v) {
+          td.html(v.value);
+        }
+      }
+    }
+  };
+}
+var tableInit = getCompInit(TdbTable);
+export {
+  tableInit
+};
+//# sourceMappingURL=table-EAXMDWOY.js.map

package/dist/termCollection-5LG7ICQY.js

@@ -0,0 +1,252 @@
+import {
+  getFractionSelectionError,
+  renderFractionSelection,
+  renderTable
+} from "./chunk-Q5SK3U2T.js";
+import "./chunk-HJ6L54YS.js";
+import {
+  HandlerBase
+} from "./chunk-KV4W2ACA.js";
+import "./chunk-54KC7DAB.js";
+import "./chunk-N7DVQTPC.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import "./chunk-RPDVFM7E.js";
+import "./chunk-M4XXKTH2.js";
+import {
+  termItemType
+} from "./chunk-5ILEFNXJ.js";
+import "./chunk-IZUYLFOX.js";
+import "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-7X6NF7NI.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-Z2ZITHT4.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-FXQXCOII.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-DQC5FFGV.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-5XU3SSPD.js");
+    const { NumDiscreteEditor } = await import("./NumDiscreteEditor-K2NZZQTH.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-5LG7ICQY.js.map

package/dist/termCollection-SB6MWLFK.js

@@ -0,0 +1,33 @@
+import {
+  SearchHandler
+} from "./chunk-LB7NENEB.js";
+import "./chunk-Q5SK3U2T.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-54KC7DAB.js";
+import "./chunk-N7DVQTPC.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import "./chunk-RPDVFM7E.js";
+import "./chunk-M4XXKTH2.js";
+import "./chunk-5ILEFNXJ.js";
+import "./chunk-IZUYLFOX.js";
+import "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-7X6NF7NI.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-Z2ZITHT4.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-FXQXCOII.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-HS5PO5ZQ.js";
+export {
+  SearchHandler
+};
+//# sourceMappingURL=termCollection-SB6MWLFK.js.map