@sjcrh/proteinpaint-client 2.220.0 → 2.222.0

package/dist/brainImaging-OQB2ZHCU.js

@@ -1,550 +0,0 @@
-import {
-  PlotBase,
-  controlsInit,
-  fetchBrainImagingSamples,
-  fillTermWrapper,
-  getCombinedTermFilter,
-  getT0T2defaultQ,
-  renderTable,
-  require_debounce,
-  sayerror,
-  svgLegend
-} from "./chunk-PEKCVKJK.js";
-import "./chunk-HJ6L54YS.js";
-import "./chunk-YR6EXI2K.js";
-import {
-  Menu
-} from "./chunk-CNFTQSNE.js";
-import "./chunk-RIHO7ZD5.js";
-import "./chunk-TVJOSRCH.js";
-import "./chunk-3CIL7KH7.js";
-import "./chunk-T4XPCSLP.js";
-import {
-  dofetch3
-} from "./chunk-4TJO2DGU.js";
-import "./chunk-W5J3LTYS.js";
-import "./chunk-MHWYRNGA.js";
-import "./chunk-JHLF2ZC2.js";
-import "./chunk-WJLRU5OF.js";
-import {
-  copyMerge,
-  getCompInit
-} from "./chunk-HBNB5TRH.js";
-import "./chunk-PF4DSFDR.js";
-import {
-  linear
-} from "./chunk-4OLM3KSB.js";
-import "./chunk-6XKAOSQE.js";
-import "./chunk-TLT4YIG3.js";
-import "./chunk-5R63Q5KH.js";
-import "./chunk-I6Y4O3RR.js";
-import {
-  rgb
-} from "./chunk-Q5RDQNIT.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-OQB2ZHCU.js.map