@sjcrh/proteinpaint-client 2.222.0 → 2.224.0

package/dist/AggMatrixInput-A4EATVXG.js

@@ -0,0 +1,402 @@
+import {
+  validatePlotConfig
+} from "./chunk-RQPXQOAX.js";
+import {
+  PlotBase,
+  appInit,
+  capitalizeFirstLetter,
+  formatHeaderText
+} from "./chunk-U45YALDI.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KZXFNO75.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-RIHO7ZD5.js";
+import "./chunk-TVJOSRCH.js";
+import {
+  icons
+} from "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import "./chunk-KBTFT76L.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-MHWYRNGA.js";
+import {
+  isNonDictionaryType
+} from "./chunk-JHLF2ZC2.js";
+import "./chunk-WJLRU5OF.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./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";
+
+// plots/aggMatrixInput/viewModel/AggMatrixInputViewModel.ts
+var AggMatrixInputViewModel = class {
+  constructor() {
+    this.state = {
+      availableMethods: [],
+      methodsStatus: "idle",
+      methodsError: ""
+    };
+    this.methodTermsKey = "";
+    this.methodRequestId = 0;
+  }
+  async updateAvailableMethods(config, vocabApi, signal) {
+    if (!this.hasTerms(config.rowSections) || !this.hasTerms(config.colSections)) {
+      this.methodRequestId++;
+      this.methodTermsKey = "";
+      this.state = { availableMethods: [], methodsStatus: "idle", methodsError: "" };
+      return;
+    }
+    const columns = this.toAxis(config.colSections || [], false);
+    const key = Object.values(columns).flatMap((terms) => terms.map((wrapper) => getTermSelectionKey(wrapper.term))).join("\n");
+    if (key == this.methodTermsKey && this.state.methodsStatus == "ready") return;
+    this.methodTermsKey = key;
+    this.state = { ...this.state, methodsStatus: "loading", methodsError: "" };
+    const requestId = ++this.methodRequestId;
+    try {
+      const response = await vocabApi.getAvailableAggregateMatrixMethods(columns, signal);
+      if (requestId != this.methodRequestId) return;
+      if (response?.error) throw new Error(response.error);
+      this.state = {
+        availableMethods: response?.availableMethods || [],
+        methodsStatus: "ready",
+        methodsError: ""
+      };
+    } catch (error) {
+      if (requestId != this.methodRequestId) return;
+      this.state = {
+        availableMethods: [],
+        methodsStatus: "error",
+        methodsError: error.message || String(error)
+      };
+    }
+  }
+  getSectionTermType(section) {
+    return section.termType || getTerm(section.terms[0])?.type;
+  }
+  getAggregateMatrixConfig(config) {
+    return {
+      chartType: "aggregateMatrix",
+      rows: this.toAxis(config.rowSections || []),
+      columns: this.toAxis(config.colSections || []),
+      settings: {
+        aggregateMatrix: {
+          sizeMethod: config.sizeMethod || "",
+          gradientMethod: config.gradientMethod || ""
+        }
+      }
+    };
+  }
+  getValidationError(config) {
+    for (const sections of [config.rowSections || [], config.colSections || []]) {
+      const names = sections.map((section) => (section.name || "").trim());
+      if (names.some((name) => !name)) return "Every section requires a name.";
+      if (new Set(names).size != names.length) return "Section names must be unique within each axis.";
+      for (const section of sections) {
+        if (!section.terms.length) continue;
+        const types = new Set(section.terms.map((item) => getTerm(item).type));
+        const termType = this.getSectionTermType(section);
+        if (types.size != 1 || !termType || !types.has(termType)) return "Every section must contain exactly one term type.";
+        if (!isNonDictionaryType(termType) && section.terms.length != 1) {
+          return "Dictionary sections can contain only one term.";
+        }
+      }
+    }
+    if (this.state.methodsError) return `Unable to load aggregate methods: ${this.state.methodsError}`;
+    if (this.hasTerms(config.rowSections) && this.hasTerms(config.colSections)) {
+      if (this.state.methodsStatus != "ready") return "Loading compatible aggregate methods.";
+      if (this.state.availableMethods.length < 2) return "Selected column terms do not share at least two aggregate methods.";
+      const availableIds = new Set(this.state.availableMethods.map((method) => method.id));
+      if (config.sizeMethod && !availableIds.has(config.sizeMethod)) return "The selected size method is not compatible.";
+      if (config.gradientMethod && !availableIds.has(config.gradientMethod)) return "The selected gradient method is not compatible.";
+    }
+    try {
+      validatePlotConfig(this.getAggregateMatrixConfig(config));
+      return "";
+    } catch (error) {
+      return error.message || String(error);
+    }
+  }
+  hasTerms(sections) {
+    return sections?.some((section) => section.terms?.length) === true;
+  }
+  toAxis(sections, cloneTerms = true) {
+    return Object.fromEntries(
+      sections.map((section) => [
+        section.name.trim(),
+        section.terms.map((item) => cloneTerms ? structuredClone(item) : item)
+      ])
+    );
+  }
+};
+function getTerm(item) {
+  return item?.term || item;
+}
+function getTermSelectionKey(term) {
+  return `${term.type}\0${term.assay || ""}\0${term.memberId || ""}\0${term.id || term.gene || term.name}`;
+}
+
+// plots/aggMatrixInput/AggMatrixInput.ts
+var chartType = "aggMatrixInput";
+var AggMatrixInput = class _AggMatrixInput extends PlotBase {
+  constructor(opts, api) {
+    super(opts, api);
+    this.startOpt = "-- Select --";
+    this.nextSectionViewId = 0;
+    this.sectionViews = /* @__PURE__ */ new Map();
+    this.viewModel = new AggMatrixInputViewModel();
+    this.type = _AggMatrixInput.type;
+    if (opts.header) formatHeaderText({
+      header: opts.header,
+      chartType: "aggregate matrix"
+    });
+  }
+  static {
+    this.type = chartType;
+  }
+  getState(appState) {
+    const config = appState.plots.find((plot) => plot.id === this.id);
+    if (!config) throw new Error(`No plot with id='${this.id}' found`);
+    return { config, activeCohort: appState.activeCohort };
+  }
+  async init() {
+    const wrapper = this.opts.holder.append("div").style("padding", "10px").attr("data-testid", "sjpp-agg-matrix-input-wrapper");
+    const axisWrapper = wrapper.append("div").style("display", "grid").style("grid-template-columns", "repeat(auto-fit, minmax(320px, 1fr))").style("gap", "12px").style("margin-bottom", "10px");
+    this.dom.sectionHolders = {};
+    for (const [type, label] of [
+      ["row", "Row"],
+      ["column", "Column"]
+    ]) {
+      const axis = axisWrapper.append("div");
+      const header = axis.append("div").style("border-bottom", "0.5px solid #ddd").style("padding", "5px");
+      header.append("span").style("margin-right", "5px").text(`${label} sections:`);
+      header.append("button").attr("type", "button").attr("data-testid", "sjpp-agg-matrix-add-section-btn").style("border", "none").style("border-radius", "12px").style("padding", "6px 10px").style("background-color", "#cfe2f3").text(`Add ${type} section`).on("click", () => this.addSection(type));
+      this.dom.sectionHolders[type] = axis.append("div");
+    }
+    this.dom.methodsHolder = wrapper.append("div").style("display", "none");
+    this.dom.methodSelects = {};
+    for (const method of ["size", "gradient"]) {
+      const methodKey = `${method}Method`;
+      const methodWrapper = this.dom.methodsHolder.append("div").style("margin", "5px").style("display", "inline-flex").style("align-items", "center");
+      methodWrapper.append("label").attr("for", `sjpp-agg-matrix-${method}-method-select`).style("margin-right", "5px").text(`${capitalizeFirstLetter(method)} method:`);
+      this.dom.methodSelects[methodKey] = methodWrapper.append("select").attr("id", `sjpp-agg-matrix-${method}-method-select`).attr("name", `sjpp-agg-matrix-${method}-method-select`).on("change", (event) => {
+        this.editConfig({ [methodKey]: event.target.value === this.startOpt ? "" : event.target.value });
+      });
+    }
+    const submitWrapper = wrapper.append("div").style("margin-top", "12px");
+    this.dom.submit = submitWrapper.append("button").attr("data-testid", "sjpp-agg-matrix-submit-btn").attr("type", "button").property("disabled", true).style("border", "none").style("border-radius", "20px").style("padding", "5px 10px").style("font-size", "0.9em").text("Submit").on("click", () => this.submit());
+    this.dom.validationMessage = submitWrapper.append("div").attr("role", "status").style("color", "#b33").style("font-size", "0.9em").style("margin-top", "6px");
+  }
+  async main() {
+    this.config = this.state.config;
+    await this.renderSections("row", this.config.rowSections || []);
+    await this.renderSections("column", this.config.colSections || []);
+    this.dom.methodsHolder.style("display", "none");
+    await this.viewModel.updateAvailableMethods(this.config, this.vocabApi, this.api?.getAbortSignal());
+    if (this.viewModel.state.methodsStatus == "ready") {
+      this.renderMethodSelects();
+      this.dom.methodsHolder.style("display", "");
+    }
+    const error = this.viewModel.getValidationError(this.config);
+    const enabled = !error;
+    this.dom.submit.property("disabled", !enabled).style("cursor", enabled ? "pointer" : "default");
+    this.dom.validationMessage.text(error || "");
+  }
+  renderMethodSelects() {
+    for (const methodKey of ["sizeMethod", "gradientMethod"]) {
+      const otherMethod = methodKey == "sizeMethod" ? this.config.gradientMethod : this.config.sizeMethod;
+      this.dom.methodSelects[methodKey].selectAll("option").data([{ id: this.startOpt, label: this.startOpt }, ...this.viewModel.state.availableMethods], (method) => method.id).join("option").attr("value", (method) => method.id).property("disabled", (method) => method.id != this.startOpt && method.id == otherMethod).text((method) => method.label);
+      this.dom.methodSelects[methodKey].property("value", this.config[methodKey] || this.startOpt);
+    }
+  }
+  async renderSections(type, sections) {
+    const holder = this.dom.sectionHolders[type];
+    for (const key of this.sectionViews.keys()) {
+      const idx = Number(key.slice(type.length + 1));
+      if (key.startsWith(`${type}:`) && idx >= sections.length) {
+        this.destroySectionView(type, idx);
+      }
+    }
+    for (const [idx, section] of sections.entries()) {
+      const key = `${type}:${idx}`;
+      let view = this.sectionViews.get(key);
+      if (!view) {
+        view = await this.createSectionView(holder, type, idx, section);
+        this.sectionViews.set(key, view);
+      }
+      const hasName = !!(section.name || "").trim();
+      const termType = this.viewModel.getSectionTermType(section);
+      const isDictionary = !!termType && !isNonDictionaryType(termType);
+      view.nameLabel.style("display", isDictionary ? "none" : "");
+      view.nameInput.property("value", section.name).attr("aria-invalid", hasName ? null : "true").attr("title", hasName ? null : "A section name is required").style("border-color", hasName ? null : "#c33").style("display", isDictionary ? "none" : "");
+      view.displayName.style("display", isDictionary ? "" : "none").text(section.name);
+      view.editButton.style("display", isDictionary ? "" : "none");
+      view.holder.select('[data-testid="sjpp-agg-matrix-section-term-list"]').selectAll("div").data(section.terms || [], (item) => getTermSelectionKey(getTerm(item))).join("div").attr("data-testid", "sjpp-agg-matrix-section-term").style("margin", "5px").text((term) => term.term?.name || term.name || term.term?.id || term.id);
+      view.termsHolder.style("display", isDictionary ? "none" : "");
+      holder.node().appendChild(view.holder.node());
+    }
+  }
+  async createSectionView(holder, type, idx, section) {
+    const sectionHolder = holder.append("div").attr("data-testid", `sjpp-agg-matrix-${type}-section`).style("margin", "10px 0").style("padding", "10px").style("border", "1px solid #eee").style("border-radius", "5px");
+    const header = sectionHolder.append("div").style("display", "flex").style("align-items", "center").style("gap", "5px");
+    const nameId = `sjpp-agg-matrix-${type}-section-name-${this.nextSectionViewId++}`;
+    const nameLabel = header.append("label").attr("for", nameId).text("Section name *:");
+    const nameInput = header.append("input").attr("id", nameId).attr("data-testid", "sjpp-agg-matrix-section-name-input").attr("type", "text").attr("required", true).attr("aria-required", "true").attr("placeholder", "Required").on("change", (event) => this.updateSection(type, idx, { name: event.target.value }));
+    const displayName = header.append("strong").style("display", "none");
+    const editButton = header.append("button").attr("type", "button").attr("data-testid", "sjpp-agg-matrix-edit-section-btn").attr("aria-label", `Edit ${type} section`).style("display", "none").style("border", "none").style("background", "transparent").style("padding", "3px");
+    icons.pencil(editButton, {
+      title: `Edit ${type} section`,
+      handler: () => this.editSection(type, idx)
+    });
+    header.append("button").attr("type", "button").attr("data-testid", "sjpp-agg-matrix-remove-section-btn").attr("aria-label", `Remove ${type} section`).text("\xD7").on("click", () => this.removeSection(type, idx));
+    sectionHolder.append("div").attr("data-testid", "sjpp-agg-matrix-section-term-list").style("margin-left", "10px");
+    const termsHolder = sectionHolder.append("div").attr("data-testid", "sjpp-agg-matrix-section-terms");
+    const view = {
+      holder: sectionHolder,
+      nameLabel,
+      nameInput,
+      displayName,
+      editButton,
+      termsHolder
+    };
+    view.termdb = await appInit({
+      holder: termsHolder,
+      vocabApi: this.app.vocabApi,
+      state: {
+        activeCohort: this.state.activeCohort,
+        selectedTerms: [],
+        allowedTermTypes: this.viewModel.getSectionTermType(section) ? [this.viewModel.getSectionTermType(section)] : void 0,
+        nav: { header_mode: "search_only" },
+        tree: { usecase: { target: "aggregateMatrix" } }
+      },
+      tree: { click_term: (term) => this.selectSectionTerm(type, idx, term, nameInput) }
+    });
+    return view;
+  }
+  addSection(type) {
+    const key = type === "row" ? "rowSections" : "colSections";
+    const sections = structuredClone(this.config[key] || []);
+    sections.push({ name: "", termType: void 0, terms: [] });
+    this.editConfig({ [key]: sections });
+  }
+  selectSectionTerm(type, idx, selected, nameInput) {
+    const key = type === "row" ? "rowSections" : "colSections";
+    const section = this.config[key]?.[idx];
+    if (!section) return;
+    const selectedItems = Array.isArray(selected) ? selected : [selected];
+    const selectedTerms = selectedItems.map(getTerm);
+    if (!selectedTerms.length) return;
+    if (selectedTerms.some((term) => !term?.type)) throw new Error("Selected term has no type");
+    const selectedType = selectedTerms[0].type;
+    if (selectedTerms.some((term) => term.type != selectedType)) {
+      this.dom.validationMessage.text("A section can only contain one term type.");
+      return;
+    }
+    const sectionTermType = this.viewModel.getSectionTermType(section);
+    if (sectionTermType && sectionTermType != selectedType) {
+      this.dom.validationMessage.text(`A section can only contain ${sectionTermType} terms.`);
+      return;
+    }
+    if (!isNonDictionaryType(selectedType)) {
+      const term = selectedTerms[0];
+      this.destroySectionView(type, idx);
+      this.updateSection(type, idx, {
+        name: term.name || term.id,
+        termType: term.type,
+        terms: [selectedItems[0]]
+      });
+      return;
+    }
+    const name = nameInput.property("value").trim();
+    if (!name) {
+      nameInput.node().reportValidity();
+      return;
+    }
+    const terms = [...section.terms || []];
+    const termKeys = new Set(terms.map((item) => getTermSelectionKey(getTerm(item))));
+    for (const [index, term] of selectedTerms.entries()) {
+      const termKey = getTermSelectionKey(term);
+      if (termKeys.has(termKey)) continue;
+      termKeys.add(termKey);
+      terms.push(selectedItems[index]);
+    }
+    this.destroySectionView(type, idx);
+    this.updateSection(type, idx, { name, termType: selectedType, terms });
+  }
+  updateSection(type, idx, edits) {
+    const key = type === "row" ? "rowSections" : "colSections";
+    const sections = structuredClone(this.config[key] || []);
+    const section = sections[idx];
+    if (!section) return;
+    Object.assign(section, edits);
+    this.editConfig({ [key]: sections });
+  }
+  editSection(type, idx) {
+    this.destroySectionView(type, idx);
+    this.updateSection(type, idx, { name: "", termType: void 0, terms: [] });
+  }
+  destroySectionView(type, idx) {
+    const key = `${type}:${idx}`;
+    const view = this.sectionViews.get(key);
+    if (!view) return;
+    view.termdb?.destroy?.();
+    view.holder.remove();
+    this.sectionViews.delete(key);
+  }
+  removeSection(type, idx) {
+    const key = type === "row" ? "rowSections" : "colSections";
+    const sections = structuredClone(this.config[key] || []);
+    sections.splice(idx, 1);
+    this.destroySectionViews(type);
+    this.editConfig({ [key]: sections });
+  }
+  destroySectionViews(type) {
+    for (const [key, view] of this.sectionViews) {
+      if (!key.startsWith(`${type}:`)) continue;
+      view.termdb?.destroy?.();
+      view.holder.remove();
+      this.sectionViews.delete(key);
+    }
+  }
+  editConfig(config) {
+    this.app.dispatch({ type: "plot_edit", id: this.id, config });
+  }
+  submit() {
+    const config = this.viewModel.getAggregateMatrixConfig(this.config);
+    validatePlotConfig(config);
+    this.app.dispatch({
+      type: "app_refresh",
+      subactions: [
+        {
+          type: "plot_create",
+          config
+        },
+        { type: "plot_delete", id: this.id }
+      ]
+    });
+  }
+};
+var AggMatrixInputInit = getCompInit(AggMatrixInput);
+var componentInit = AggMatrixInputInit;
+async function getPlotConfig(opts) {
+  const config = {
+    chartType,
+    hidePlotFilter: true,
+    rowSections: [],
+    colSections: []
+  };
+  return copyMerge(config, opts);
+}
+export {
+  AggMatrixInputInit,
+  componentInit,
+  getPlotConfig
+};
+//# sourceMappingURL=AggMatrixInput-A4EATVXG.js.map

package/dist/AggregateMatrix-3D36XP7Q.js

@@ -0,0 +1,37 @@
+import {
+  AggregateMatrix,
+  aggMatrixInit,
+  componentInit,
+  getPlotConfig,
+  validatePlotConfig
+} from "./chunk-RQPXQOAX.js";
+import "./chunk-U45YALDI.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KZXFNO75.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-RIHO7ZD5.js";
+import "./chunk-TVJOSRCH.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import "./chunk-KBTFT76L.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 {
+  AggregateMatrix,
+  aggMatrixInit,
+  componentInit,
+  getPlotConfig,
+  validatePlotConfig
+};
+//# sourceMappingURL=AggregateMatrix-3D36XP7Q.js.map