@sjcrh/proteinpaint-client 2.208.0 → 2.209.0

package/dist/brainImaging-MBI4XTTU.js

@@ -0,0 +1,555 @@
+import {
+  PlotBase,
+  controlsInit,
+  fetchBrainImagingSamples,
+  fillTermWrapper,
+  getCombinedTermFilter,
+  getT0T2defaultQ,
+  renderTable,
+  sayerror,
+  svgLegend
+} from "./chunk-C3HEDQPT.js";
+import "./chunk-HJ6L54YS.js";
+import {
+  require_debounce
+} from "./chunk-KV4W2ACA.js";
+import "./chunk-B6UXFX73.js";
+import {
+  Menu
+} from "./chunk-ELJX3QIQ.js";
+import "./chunk-3FEP6B5T.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import {
+  dofetch3
+} from "./chunk-OBDIJ4QS.js";
+import "./chunk-6FG6JFZP.js";
+import "./chunk-3XBG5HIV.js";
+import "./chunk-SB36AUG7.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-7X6NF7NI.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-Z2ZITHT4.js";
+import {
+  linear
+} from "./chunk-4OLM3KSB.js";
+import "./chunk-FXQXCOII.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import {
+  rgb
+} from "./chunk-Q5RDQNIT.js";
+import "./chunk-DQC5FFGV.js";
+import {
+  __toESM
+} from "./chunk-HS5PO5ZQ.js";
+
+// plots/brainImaging.ts
+var import_debounce = __toESM(require_debounce(), 1);
+var BrainImaging = class _BrainImaging extends PlotBase {
+  static {
+    this.type = "brainImaging";
+  }
+  constructor(opts, api) {
+    super(opts, api);
+    this.type = _BrainImaging.type;
+    this.components = { controls: {} };
+    setInteractivity(this);
+  }
+  /* the chart has two modes, decided by config.selectedSampleFileNames:
+  - absent: "sample table" mode, launched from the chart button. lists the imaging samples
+    passing the sandbox's local filter (plus the global filter) for the user to pick from;
+    "Generate image" launches a new sandbox in image mode
+  - present: "image" mode, renders the selected samples on a brain template. also launched
+    directly by sample view, matrix and groups, which supply the samples themselves */
+  isSampleTableMode(config) {
+    return !config.selectedSampleFileNames;
+  }
+  async init(appState) {
+    const state = this.getState(appState);
+    const holder = this.opts.holder;
+    if (this.isSampleTableMode(state.config)) {
+      if (this.opts.header) {
+        this.opts.header.style("padding-left", "7px").style("color", "rgb(85, 85, 85)").html("Brain Imaging");
+      }
+      this.dom = { tableHolder: holder.append("div").style("padding", "10px") };
+      return;
+    }
+    if (this.opts.header) {
+      const fileNames = state.config.selectedSampleFileNames;
+      const samplesLabel = fileNames.length < 3 ? fileNames.map((f) => f.split(".nii")[0]).join(", ") : `${fileNames.length} samples`;
+      this.opts.header.style("padding-left", "7px").style("color", "rgb(85, 85, 85)").html(`Brain Imaging: ${state.config.queryKey}/${samplesLabel}`);
+    }
+    const controlsHolder = holder.append("div").style("display", "inline-block").style("vertical-align", "top");
+    const rightDiv = holder.append("div").style("display", "inline-block").style("vertical-align", "top");
+    const headerHolder = rightDiv.append("div").style("display", "inline-block").style("vertical-align", "top").style("padding", "10px");
+    const contentHolder = rightDiv.append("div").style("vertical-align", "top");
+    const table = contentHolder.append("table").style("border-collapse", "collapse");
+    const headerTr = table.append("tr");
+    const contentTr = table.append("tr").style("background-color", "black");
+    const tdL = contentTr.append("td");
+    const tdF = contentTr.append("td");
+    const tdT = contentTr.append("td");
+    const legendHolder = contentHolder.append("svg").style("width", "100%").on("mouseup", this.legendLabelMouseup);
+    const legendMenu = new Menu({ padding: "0px" });
+    this.dom = {
+      headerHolder,
+      contentHolder,
+      headerTr,
+      tdL,
+      tdF,
+      tdT,
+      legendHolder,
+      legendMenu
+    };
+    this.addSliders(state);
+    const configInputsOptions = this.getConfigInputsOptions(state);
+    this.components = {
+      controls: await controlsInit({
+        app: this.app,
+        id: this.id,
+        holder: controlsHolder,
+        inputs: configInputsOptions
+      })
+    };
+    this.components.controls.on("downloadClick.brainImaging", () => {
+      const urls = [];
+      for (const key in this.imagesData)
+        for (const category in this.imagesData[key].dataUrls) {
+          const dataUrl = this.imagesData[key].dataUrls[category].url;
+          urls.push(dataUrl);
+        }
+      this.downloadImage(urls);
+    });
+    this.legendRenderer = svgLegend({ holder: this.dom.legendHolder });
+  }
+  addSliders(state) {
+    const settings = state.config.settings.brainImaging;
+    const dims = state.RefNIdata?.dimensions;
+    const maxL = (dims?.l || 193) - 1;
+    const maxF = (dims?.f || 229) - 1;
+    const maxT = (dims?.t || 193) - 1;
+    const tr = this.dom.headerTr;
+    let td = tr.append("td");
+    td.append("label").attr("for", "saggital").text("Sagittal:");
+    this.dom.saggitalSlider = td.append("input").attr("id", "saggital").attr("type", "range").attr("min", 0).attr("max", maxL).attr("value", settings.brainImageL).on("change", (e) => {
+      this.editBrainImage("brainImageL", e.target.value);
+    });
+    this.dom.saggitalInput = td.append("input").attr("type", "number").attr("min", 0).attr("max", maxL).attr("value", settings.brainImageL).on("change", (e) => {
+      this.editBrainImage("brainImageL", e.target.value);
+    }).style("vertical-align", "top");
+    td = tr.append("td");
+    td.append("label").attr("for", "coronal").text("Coronal:");
+    this.dom.coronalSlider = td.append("input").attr("type", "range").attr("min", 0).attr("max", maxF).attr("value", settings.brainImageF).on("change", (e) => {
+      this.editBrainImage("brainImageF", e.target.value);
+    });
+    this.dom.coronalInput = td.append("input").attr("type", "number").attr("min", 0).attr("max", maxF).attr("value", settings.brainImageF).on("change", (e) => {
+      this.editBrainImage("brainImageF", e.target.value);
+    }).style("vertical-align", "top");
+    td = tr.append("td");
+    td.append("label").attr("for", "axial").text("Axial:");
+    this.dom.axialSlider = td.append("input").attr("id", "axial").attr("type", "range").attr("min", 0).attr("max", maxT).attr("value", settings.brainImageT).on("change", (e) => {
+      this.editBrainImage("brainImageT", e.target.value);
+    });
+    this.dom.axialInput = td.append("input").attr("type", "number").attr("min", 0).attr("max", maxT).attr("value", settings.brainImageT).on("change", (e) => {
+      this.editBrainImage("brainImageT", e.target.value);
+    });
+  }
+  editBrainImage(key, value) {
+    if (!value) return;
+    const settings = { [key]: Number(value) };
+    this.app.dispatch({ type: "plot_edit", id: this.id, config: { settings: { brainImaging: settings } } });
+  }
+  downloadImage(dataUrls) {
+    for (const dataUrl of dataUrls) {
+      const downloadImgName = "brainImaging";
+      const a = document.createElement("a");
+      document.body.appendChild(a);
+      a.addEventListener(
+        "click",
+        () => {
+          a.download = downloadImgName + ".png";
+          a.href = dataUrl;
+          document.body.removeChild(a);
+        },
+        false
+      );
+      a.click();
+    }
+  }
+  getConfigInputsOptions(state) {
+    if (state.config.selectedSampleFileNames.length == 1) return [];
+    const mandatoryConfigInputOptions = [
+      {
+        label: "Divide by",
+        type: "term",
+        chartType: "brainImaging",
+        configKey: "divideByTW",
+        title: "Categories to divide by",
+        usecase: { target: "brainImaging", detail: "term0" },
+        vocabApi: this.app.vocabApi,
+        numericEditMenuVersion: ["discrete"],
+        defaultQ4fillTW: getT0T2defaultQ()
+      },
+      {
+        label: "Color by",
+        type: "term",
+        chartType: "brainImaging",
+        configKey: "overlayTW",
+        title: "Categories to color the samples",
+        usecase: { target: "brainImaging", detail: "term2" },
+        vocabApi: this.app.vocabApi,
+        numericEditMenuVersion: ["discrete"],
+        defaultQ4fillTW: getT0T2defaultQ()
+      }
+    ];
+    return mandatoryConfigInputOptions;
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    const termfilter = getCombinedTermFilter(appState, config.filter);
+    return {
+      config,
+      termfilter,
+      dslabel: appState.vocab.dslabel,
+      genome: appState.vocab.genome,
+      termdbConfig: appState.termdbConfig,
+      RefNIdata: appState.termdbConfig.queries.NIdata.references[config.queryKey]
+    };
+  }
+  async main() {
+    if (this.isSampleTableMode(this.state.config)) {
+      await this.renderSampleTable();
+      return;
+    }
+    this.config = structuredClone(this.state.config);
+    this.settings = this.state.config.settings.brainImaging;
+    this.dom.saggitalSlider.property("value", this.settings.brainImageL);
+    this.dom.saggitalInput.property("value", this.settings.brainImageL);
+    this.dom.coronalSlider.property("value", this.settings.brainImageF);
+    this.dom.coronalInput.property("value", this.settings.brainImageF);
+    this.dom.axialSlider.property("value", this.settings.brainImageT);
+    this.dom.axialInput.property("value", this.settings.brainImageT);
+    let data;
+    try {
+      data = await Promise.all([
+        this.requestImage("l", this.settings.brainImageL),
+        this.requestImage("f", this.settings.brainImageF),
+        this.requestImage("t", this.settings.brainImageT)
+      ]);
+    } catch (e) {
+      this.showNoImage(e?.message || e);
+      return;
+    }
+    const failedIdx = data.findIndex((d) => !d || typeof d == "string" || d.error || !d.brainImage);
+    if (failedIdx != -1) {
+      const failed = data[failedIdx];
+      this.showNoImage(typeof failed == "string" && failed || failed?.error || "no brain imaging data");
+      return;
+    }
+    this.imagesData = {
+      brainImageL: { dataUrls: {}, td: this.dom.tdL, data: data[0] },
+      brainImageF: { dataUrls: {}, td: this.dom.tdF, data: data[1] },
+      brainImageT: { dataUrls: {}, td: this.dom.tdT, data: data[2] }
+    };
+    for (const img of Object.values(this.imagesData)) this.renderImages(img);
+    this.renderLegend();
+  }
+  // shown when image data could not be generated, e.g. the sample has no imaging file
+  showNoImage(message) {
+    for (const td of [this.dom.tdL, this.dom.tdF, this.dom.tdT]) td.selectAll("*").remove();
+    this.dom.tdL.append("div").style("color", "white").style("padding", "20px").style("white-space", "nowrap").text(String(message));
+    this.dom.legendHolder.selectAll("*").remove();
+  }
+  async requestImage(key, value) {
+    const body = {
+      genome: this.state.genome,
+      dslabel: this.state.dslabel,
+      refKey: this.state.config.queryKey,
+      [key]: value,
+      selectedSampleFileNames: this.state.config.selectedSampleFileNames,
+      divideByTW: this.state.config.divideByTW,
+      overlayTW: this.state.config.overlayTW,
+      legendFilter: this.state.config.legendFilter,
+      filter: this.state.termfilter?.filter
+    };
+    return await dofetch3("termdb/brainImaging", { body });
+  }
+  renderImages({ data, td, dataUrls }) {
+    this.legendValues = data.legend;
+    if (data.error) throw data.error;
+    for (const [termV, result] of Object.entries(data.brainImage)) {
+      dataUrls[termV] = result;
+    }
+    td.selectAll("*").remove();
+    for (const [termV, result] of Object.entries(dataUrls)) {
+      const imgResult = result;
+      if (this.state.config.divideByTW)
+        td.append("div").attr("class", "pp-chart-title").style("text-align", "center").text(`${termV} (n=${imgResult.catNum})`).style("font-weight", "600").style("color", "white").style("font-size", "24px").style("margin-bottom", "5px").style("margin-top", "5px").style("display", "block");
+      td.append("div").append("img").attr("src", imgResult.url);
+    }
+  }
+  /* sample table mode. re-runs on every state change, in particular when the local filter
+  is edited: the table is rebuilt from a fresh sample query and checked rows are reset */
+  async renderSampleTable() {
+    const NIdata = this.state.termdbConfig.queries.NIdata;
+    const refKeys = Object.keys(NIdata.references);
+    const refKey = this.tableRefKey && refKeys.includes(this.tableRefKey) ? this.tableRefKey : refKeys[0];
+    const requestNum = this.sampleRequestNum = (this.sampleRequestNum || 0) + 1;
+    const holder = this.dom.tableHolder;
+    holder.selectAll("*").remove();
+    const loadingDiv = holder.append("div").style("opacity", 0.6).text("Loading samples...");
+    const body = {
+      genome: this.state.genome,
+      dslabel: this.state.dslabel,
+      refKey,
+      // global mass filter combined with this sandbox's local filter
+      filter: this.state.termfilter?.filter
+    };
+    let samples;
+    try {
+      const result = await fetchBrainImagingSamples(body);
+      samples = result.samples || [];
+    } catch (e) {
+      if (requestNum != this.sampleRequestNum) return;
+      loadingDiv.remove();
+      sayerror(holder, e?.message || String(e));
+      return;
+    }
+    if (requestNum != this.sampleRequestNum) return;
+    loadingDiv.remove();
+    if (!samples.length) {
+      holder.append("div").style("opacity", 0.6).text("No imaging samples match the current filter");
+      return;
+    }
+    const columns = await getTableColumns(this, refKey);
+    if (requestNum != this.sampleRequestNum) return;
+    let shownSamples = samples;
+    const selectedSamples = /* @__PURE__ */ new Set();
+    const container = holder.append("div").style("display", "inline-block");
+    const toolbar = container.append("div").style("display", "flex").style("align-items", "center").style("gap", "30px").style("padding", "5px 0px");
+    const generateBtn = toolbar.append("button").attr("data-testid", "sjpp-brainImaging-generate").property("disabled", true).style("padding", "10px 15px").style("border-radius", "20px").style("border-color", "#ededed").text("Generate image").on("click", () => {
+      if (!selectedSamples.size) return;
+      const selectedSampleFileNames = [...selectedSamples].map((s) => s + ".nii");
+      this.app.dispatch({
+        type: "plot_create",
+        config: {
+          chartType: "brainImaging",
+          queryKey: refKey,
+          selectedSampleFileNames
+        }
+      });
+    });
+    if (refKeys.length > 1) {
+      const span = toolbar.append("span");
+      span.append("span").style("opacity", 0.6).text("Template: ");
+      const name = `sjpp-brainImaging-template-${this.id}`;
+      for (const k of refKeys) {
+        const label = span.append("label").style("margin-right", "10px").style("cursor", "pointer");
+        label.append("input").attr("type", "radio").attr("name", name).attr("value", k).property("checked", k == refKey).on("change", () => {
+          this.tableRefKey = k;
+          this.renderSampleTable();
+        });
+        label.append("span").text(" " + k);
+      }
+    }
+    const countLabel = toolbar.append("span").style("margin-left", "auto").style("opacity", 0.6);
+    const debouncedRenderRows = (0, import_debounce.debounce)(() => renderRows(), 200);
+    const searchInput = toolbar.append("input").attr("type", "search").attr("aria-label", "Search samples").attr("placeholder", "Search samples").style("width", "200px").on("input", debouncedRenderRows);
+    const tableDiv = container.append("div");
+    const alignToolbar = () => {
+      const checkbox = tableDiv.select("input[type=checkbox]").node();
+      if (!checkbox) return;
+      const offset = checkbox.getBoundingClientRect().left - container.node().getBoundingClientRect().left;
+      toolbar.style("padding-left", `${Math.max(0, offset)}px`);
+    };
+    const updateToolbar = (str) => {
+      countLabel.text(
+        (str ? `${shownSamples.length} of ${samples.length} samples` : `${samples.length} samples`) + (selectedSamples.size ? `; ${selectedSamples.size} selected` : "")
+      );
+      generateBtn.property("disabled", !selectedSamples.size);
+    };
+    const renderRows = () => {
+      const str = searchInput.property("value").trim().toLowerCase();
+      shownSamples = !str ? samples : samples.filter((s) => Object.values(s).some((v) => v != void 0 && String(v).toLowerCase().includes(str)));
+      updateToolbar(str);
+      const rows = getTableRows(shownSamples, this.state, refKey);
+      tableDiv.selectAll("*").remove();
+      renderTable({
+        rows,
+        columns,
+        resize: true,
+        singleMode: false,
+        div: tableDiv,
+        maxHeight: "60vh",
+        header: { allowSort: true },
+        selectedRows: shownSamples.map((s, i) => selectedSamples.has(s.sample) ? i : -1).filter((i) => i >= 0),
+        /* fires per checkbox on any change, incl. check-all. the checkbox value is the
+        index into the rows array passed above, i.e. into shownSamples, also after
+        sorting. rows hidden by the search keep their recorded state, so selections
+        persist across searches */
+        noButtonCallback: (_i, node) => {
+          const sample = shownSamples[Number(node.value)]?.sample;
+          if (!sample) return;
+          if (node.checked) selectedSamples.add(sample);
+          else selectedSamples.delete(sample);
+          updateToolbar(str);
+        }
+      });
+      alignToolbar();
+    };
+    renderRows();
+  }
+  renderLegend() {
+    if (this.state.config.selectedSampleFileNames?.length == 1) {
+      this.dom.legendHolder.selectAll("*").remove();
+      return;
+    }
+    const legendItems = [];
+    for (const [label, v] of Object.entries(this.legendValues)) {
+      const scale = linear([0, v.maxLength], [rgb("white").formatHex(), v.color]).clamp(true);
+      legendItems.push({
+        text: label == "default" ? "Combined Intensity" : label,
+        width: 140,
+        scale,
+        colors: ["white", v.color],
+        domain: [0, v.maxLength],
+        key: label,
+        crossedOut: v.crossedOut
+      });
+    }
+    this.legendItems = legendItems;
+    const legendRendererData = [
+      {
+        items: legendItems
+      }
+    ];
+    this.legendRenderer(legendRendererData, {
+      settings: {
+        fontsize: 16,
+        iconh: 14,
+        iconw: 14,
+        dimensions: {
+          xOffset: 0
+        }
+      }
+    });
+  }
+};
+var brainImaging = getCompInit(BrainImaging);
+var componentInit = brainImaging;
+async function getPlotConfig(opts, app) {
+  const ref = app.vocabApi?.termdbConfig?.queries?.NIdata?.references?.[opts.queryKey];
+  const parameters = ref?.parameters;
+  const dims = ref?.dimensions;
+  const settings = {
+    brainImaging: {
+      brainImageL: parameters?.l ?? (dims ? Math.floor(dims.l / 2) : 98),
+      brainImageF: parameters?.f ?? (dims ? Math.floor(dims.f / 2) : 81),
+      brainImageT: parameters?.t ?? (dims ? Math.floor(dims.t / 2) : 53)
+    }
+  };
+  const config = { chartType: "brainImaging", settings };
+  copyMerge(config, opts);
+  if (config.overlayTW) config.overlayTW = await fillTermWrapper(config.overlayTW, app.vocabApi);
+  if (config.divideByTW) config.divideByTW = await fillTermWrapper(config.divideByTW, app.vocabApi);
+  return config;
+}
+function getTableRows(samples, state, refKey) {
+  const rows = [];
+  for (const sample of samples) {
+    const row = [{ value: sample.sample }];
+    for (const c of state.termdbConfig.queries.NIdata.references[refKey].sampleColumns || []) {
+      row.push({ value: sample[c.termid] });
+    }
+    rows.push(row);
+  }
+  return rows;
+}
+async function getTableColumns(self, refKey) {
+  const columns = [{ label: "Sample", sortable: true }];
+  for (const c of self.state.termdbConfig.queries.NIdata.references[refKey].sampleColumns || []) {
+    columns.push({
+      label: (await self.app.vocabApi.getterm(c.termid)).name,
+      sortable: true
+    });
+  }
+  return columns;
+}
+function setInteractivity(self) {
+  self.legendLabelMouseup = (event) => {
+    const targetData = event.target.__data__;
+    if (!targetData || targetData.key == "default") return;
+    const legendMenu = self.dom.legendMenu.clear();
+    const legendMenuDiv = legendMenu.d.append("div");
+    const legendFilter = self.state.config.legendFilter ? [...self.state.config.legendFilter] : [];
+    const legendFilterIndex = legendFilter.indexOf(targetData.key);
+    if (legendFilterIndex !== -1 || legendFilter.length + 1 !== self.legendItems.length) {
+      legendMenuDiv.append("div").attr("class", "sja_menuoption sja_sharp_border").text(legendFilterIndex == -1 ? "Hide" : "Show").on("click", () => {
+        legendMenu.hide();
+        if (legendFilterIndex == -1) legendFilter.push(targetData.key);
+        else legendFilter.splice(legendFilterIndex, 1);
+        self.app.dispatch({
+          type: "plot_edit",
+          id: self.id,
+          config: { legendFilter }
+        });
+      });
+    }
+    legendMenuDiv.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show only").on("click", () => {
+      legendMenu.hide();
+      const legendFilter2 = [];
+      for (const legendCat of self.legendItems) {
+        if (legendCat.key !== targetData.key) legendFilter2.push(legendCat.key);
+      }
+      self.app.dispatch({
+        type: "plot_edit",
+        id: self.id,
+        config: { legendFilter: legendFilter2 }
+      });
+    });
+    legendMenuDiv.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show all").on("click", () => {
+      legendMenu.hide();
+      self.app.dispatch({
+        type: "plot_edit",
+        id: self.id,
+        config: { legendFilter: [] }
+      });
+    });
+    if (self.state.config.overlayTW.term.type != "geneVariant") {
+      let color = self.state.config.overlayTW?.term?.values?.[targetData.key]?.color || "red";
+      color = rgb(color).formatHex();
+      legendMenuDiv.append("div").attr("class", "sja_sharp_border").style("padding", "0px 10px").text("Color:").append("input").attr("type", "color").attr("value", color).on("change", (e) => {
+        self.changeColor(targetData.key, e.target.value);
+      });
+    }
+    legendMenu.showunder(event.target);
+  };
+  self.changeColor = async function(key, color) {
+    const tw = self.config.overlayTW;
+    if (!(tw.term.type == "geneVariant" && tw.q.type == "values") && tw.term.values[key])
+      tw.term.values[key].color = color;
+    else {
+      if (!tw.term.values) tw.term.values = {};
+      if (!tw.term.values[key]) tw.term.values[key] = {};
+      tw.term.values[key].color = color;
+    }
+    await self.app.dispatch({
+      type: "plot_edit",
+      id: self.id,
+      config: { overlayTW: tw }
+    });
+  };
+}
+export {
+  brainImaging,
+  componentInit,
+  getPlotConfig
+};
+//# sourceMappingURL=brainImaging-MBI4XTTU.js.map