@sjcrh/proteinpaint-client 2.206.0 → 2.207.0

package/dist/brainImaging-6WLB6DWG.js

@@ -0,0 +1,555 @@
+import {
+  PlotBase,
+  controlsInit,
+  fetchBrainImagingSamples,
+  fillTermWrapper,
+  getCombinedTermFilter,
+  getT0T2defaultQ,
+  renderTable,
+  sayerror,
+  svgLegend
+} from "./chunk-NQDF3U2C.js";
+import "./chunk-HJ6L54YS.js";
+import {
+  require_debounce
+} from "./chunk-KV4W2ACA.js";
+import "./chunk-CCYVGZGI.js";
+import {
+  Menu
+} from "./chunk-ELJX3QIQ.js";
+import "./chunk-N7DVQTPC.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import {
+  dofetch3
+} from "./chunk-GRVO7RW4.js";
+import "./chunk-7CJKL3LK.js";
+import "./chunk-HZ3TCGBK.js";
+import "./chunk-IZUYLFOX.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-6WLB6DWG.js.map

package/dist/brainImaging-6WLB6DWG.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../plots/brainImaging.ts"],
+  "sourcesContent": ["import { getCompInit, copyMerge, type RxComponent, type ComponentApi } from '#rx'\nimport { PlotBase } from '#plots/PlotBase.ts'\nimport { controlsInit } from './controls'\nimport { getT0T2defaultQ } from './summaryQ.ts'\nimport { fillTermWrapper } from '#termsetting'\nimport { dofetch3 } from '#common/dofetch'\nimport { Menu, renderTable, sayerror, type TableRow, type TableColumn } from '#dom'\nimport { debounce } from 'debounce'\nimport { getCombinedTermFilter } from '#filter'\nimport { fetchBrainImagingSamples } from './getBrainImagingSampleSet.ts'\nimport svgLegend from '#dom/svg.legend'\nimport { scaleLinear } from 'd3-scale'\nimport { rgb } from 'd3-color'\n\ntype ImgData = { data: any; td: any; dataUrls: any }\n\nclass BrainImaging extends PlotBase implements RxComponent {\n\tstatic type = 'brainImaging'\n\n\ttype: string\n\tcomponents: { controls: any }\n\tlegendLabelMouseup!: any\n\timagesData!: { [index: string]: ImgData }\n\tlegendRenderer!: any\n\tlegendItems!: any\n\tlegendValues!: { [index: string]: { color: string; maxLength: number; crossedOut: boolean } }\n\tconfig!: any\n\tsettings!: any\n\tdom!: any\n\tsampleRequestNum?: number\n\t// sample table mode: the template chosen by the toolbar radio; persists across re-renders\n\ttableRefKey?: string\n\n\tconstructor(opts: any, api: ComponentApi) {\n\t\tsuper(opts, api)\n\t\tthis.type = BrainImaging.type\n\t\tthis.components = { controls: {} }\n\t\tsetInteractivity(this)\n\t}\n\n\t/* the chart has two modes, decided by config.selectedSampleFileNames:\n\t- absent: \"sample table\" mode, launched from the chart button. lists the imaging samples\n\t  passing the sandbox's local filter (plus the global filter) for the user to pick from;\n\t  \"Generate image\" launches a new sandbox in image mode\n\t- present: \"image\" mode, renders the selected samples on a brain template. also launched\n\t  directly by sample view, matrix and groups, which supply the samples themselves */\n\tisSampleTableMode(config) {\n\t\treturn !config.selectedSampleFileNames\n\t}\n\n\tasync init(appState) {\n\t\tconst state = this.getState(appState)\n\t\tconst holder = this.opts.holder\n\t\tif (this.isSampleTableMode(state.config)) {\n\t\t\tif (this.opts.header) {\n\t\t\t\tthis.opts.header.style('padding-left', '7px').style('color', 'rgb(85, 85, 85)').html('Brain Imaging')\n\t\t\t}\n\t\t\tthis.dom = { tableHolder: holder.append('div').style('padding', '10px') }\n\t\t\treturn\n\t\t}\n\t\tif (this.opts.header) {\n\t\t\tconst fileNames = state.config.selectedSampleFileNames\n\t\t\t// show individual sample names only for small selections; otherwise show the count\n\t\t\tconst samplesLabel =\n\t\t\t\tfileNames.length < 3 ? fileNames.map(f => f.split('.nii')[0]).join(', ') : `${fileNames.length} samples`\n\t\t\tthis.opts.header\n\t\t\t\t.style('padding-left', '7px')\n\t\t\t\t.style('color', 'rgb(85, 85, 85)')\n\t\t\t\t.html(`Brain Imaging: ${state.config.queryKey}/${samplesLabel}`)\n\t\t}\n\t\tconst controlsHolder = holder.append('div').style('display', 'inline-block').style('vertical-align', 'top')\n\t\tconst rightDiv = holder.append('div').style('display', 'inline-block').style('vertical-align', 'top')\n\t\tconst headerHolder = rightDiv\n\t\t\t.append('div')\n\t\t\t.style('display', 'inline-block')\n\t\t\t.style('vertical-align', 'top')\n\t\t\t.style('padding', '10px')\n\t\tconst contentHolder = rightDiv.append('div').style('vertical-align', 'top')\n\t\tconst table = contentHolder.append('table').style('border-collapse', 'collapse')\n\t\tconst headerTr = table.append('tr')\n\t\tconst contentTr = table.append('tr').style('background-color', 'black')\n\t\tconst tdL = contentTr.append('td')\n\t\tconst tdF = contentTr.append('td')\n\t\tconst tdT = contentTr.append('td')\n\t\tconst legendHolder = contentHolder.append('svg').style('width', '100%').on('mouseup', this.legendLabelMouseup)\n\t\tconst legendMenu = new Menu({ padding: '0px' })\n\n\t\tthis.dom = {\n\t\t\theaderHolder,\n\t\t\tcontentHolder,\n\t\t\theaderTr,\n\t\t\ttdL,\n\t\t\ttdF,\n\t\t\ttdT,\n\t\t\tlegendHolder,\n\t\t\tlegendMenu\n\t\t}\n\t\tthis.addSliders(state)\n\n\t\tconst configInputsOptions = this.getConfigInputsOptions(state)\n\n\t\tthis.components = {\n\t\t\tcontrols: await controlsInit({\n\t\t\t\tapp: this.app,\n\t\t\t\tid: this.id,\n\t\t\t\tholder: controlsHolder,\n\t\t\t\tinputs: configInputsOptions\n\t\t\t})\n\t\t}\n\t\tthis.components.controls.on('downloadClick.brainImaging', () => {\n\t\t\tconst urls: unknown[] = []\n\t\t\tfor (const key in this.imagesData)\n\t\t\t\tfor (const category in this.imagesData[key].dataUrls) {\n\t\t\t\t\tconst dataUrl = this.imagesData[key].dataUrls[category].url\n\t\t\t\t\turls.push(dataUrl)\n\t\t\t\t}\n\t\t\tthis.downloadImage(urls)\n\t\t})\n\t\tthis.legendRenderer = svgLegend({ holder: this.dom.legendHolder })\n\t}\n\n\taddSliders(state) {\n\t\tconst settings = state.config.settings.brainImaging\n\t\t/* slice index ranges come from the template's voxel counts, read from the NIfTI\n\t\theader at server launch */\n\t\tconst dims = state.RefNIdata?.dimensions\n\t\tconst maxL = (dims?.l || 193) - 1\n\t\tconst maxF = (dims?.f || 229) - 1\n\t\tconst maxT = (dims?.t || 193) - 1\n\n\t\tconst tr = this.dom.headerTr\n\t\tlet td = tr.append('td')\n\t\ttd.append('label').attr('for', 'saggital').text('Sagittal:')\n\t\tthis.dom.saggitalSlider = td\n\t\t\t.append('input')\n\t\t\t.attr('id', 'saggital')\n\t\t\t.attr('type', 'range')\n\t\t\t.attr('min', 0)\n\t\t\t.attr('max', maxL)\n\t\t\t.attr('value', settings.brainImageL)\n\t\t\t.on('change', e => {\n\t\t\t\tthis.editBrainImage('brainImageL', e.target.value)\n\t\t\t})\n\t\tthis.dom.saggitalInput = td\n\t\t\t.append('input')\n\t\t\t.attr('type', 'number')\n\t\t\t.attr('min', 0)\n\t\t\t.attr('max', maxL)\n\t\t\t.attr('value', settings.brainImageL)\n\t\t\t.on('change', e => {\n\t\t\t\tthis.editBrainImage('brainImageL', e.target.value)\n\t\t\t})\n\t\t\t.style('vertical-align', 'top')\n\n\t\ttd = tr.append('td')\n\n\t\ttd.append('label').attr('for', 'coronal').text('Coronal:')\n\t\tthis.dom.coronalSlider = td\n\t\t\t.append('input')\n\t\t\t.attr('type', 'range')\n\t\t\t.attr('min', 0)\n\t\t\t.attr('max', maxF)\n\t\t\t.attr('value', settings.brainImageF)\n\t\t\t.on('change', e => {\n\t\t\t\tthis.editBrainImage('brainImageF', e.target.value)\n\t\t\t})\n\t\tthis.dom.coronalInput = td\n\t\t\t.append('input')\n\t\t\t.attr('type', 'number')\n\t\t\t.attr('min', 0)\n\t\t\t.attr('max', maxF)\n\t\t\t.attr('value', settings.brainImageF)\n\t\t\t.on('change', e => {\n\t\t\t\tthis.editBrainImage('brainImageF', e.target.value)\n\t\t\t})\n\t\t\t.style('vertical-align', 'top')\n\n\t\ttd = tr.append('td')\n\n\t\ttd.append('label').attr('for', 'axial').text('Axial:')\n\t\tthis.dom.axialSlider = td\n\t\t\t.append('input')\n\t\t\t.attr('id', 'axial')\n\t\t\t.attr('type', 'range')\n\t\t\t.attr('min', 0)\n\t\t\t.attr('max', maxT)\n\t\t\t.attr('value', settings.brainImageT)\n\t\t\t.on('change', e => {\n\t\t\t\tthis.editBrainImage('brainImageT', e.target.value)\n\t\t\t})\n\t\tthis.dom.axialInput = td\n\t\t\t.append('input')\n\t\t\t.attr('type', 'number')\n\t\t\t.attr('min', 0)\n\t\t\t.attr('max', maxT)\n\t\t\t.attr('value', settings.brainImageT)\n\t\t\t.on('change', e => {\n\t\t\t\tthis.editBrainImage('brainImageT', e.target.value)\n\t\t\t})\n\t}\n\n\teditBrainImage(key, value) {\n\t\tif (!value) return\n\t\tconst settings = { [key]: Number(value) }\n\n\t\tthis.app.dispatch({ type: 'plot_edit', id: this.id, config: { settings: { brainImaging: settings } } })\n\t}\n\n\tdownloadImage(dataUrls) {\n\t\tfor (const dataUrl of dataUrls) {\n\t\t\tconst downloadImgName = 'brainImaging'\n\t\t\tconst a = document.createElement('a')\n\t\t\tdocument.body.appendChild(a)\n\n\t\t\ta.addEventListener(\n\t\t\t\t'click',\n\t\t\t\t() => {\n\t\t\t\t\t// Download the image\n\t\t\t\t\ta.download = downloadImgName + '.png'\n\t\t\t\t\ta.href = dataUrl\n\t\t\t\t\tdocument.body.removeChild(a)\n\t\t\t\t},\n\t\t\t\tfalse\n\t\t\t)\n\t\t\ta.click()\n\t\t}\n\t}\n\n\tgetConfigInputsOptions(state) {\n\t\tif (state.config.selectedSampleFileNames.length == 1) return []\n\t\tconst mandatoryConfigInputOptions = [\n\t\t\t{\n\t\t\t\tlabel: 'Divide by',\n\t\t\t\ttype: 'term',\n\t\t\t\tchartType: 'brainImaging',\n\t\t\t\tconfigKey: 'divideByTW',\n\t\t\t\ttitle: 'Categories to divide by',\n\t\t\t\tusecase: { target: 'brainImaging', detail: 'term0' },\n\t\t\t\tvocabApi: this.app.vocabApi,\n\t\t\t\tnumericEditMenuVersion: ['discrete'],\n\t\t\t\tdefaultQ4fillTW: getT0T2defaultQ()\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Color by',\n\t\t\t\ttype: 'term',\n\t\t\t\tchartType: 'brainImaging',\n\t\t\t\tconfigKey: 'overlayTW',\n\t\t\t\ttitle: 'Categories to color the samples',\n\t\t\t\tusecase: { target: 'brainImaging', detail: 'term2' },\n\t\t\t\tvocabApi: this.app.vocabApi,\n\t\t\t\tnumericEditMenuVersion: ['discrete'],\n\t\t\t\tdefaultQ4fillTW: getT0T2defaultQ()\n\t\t\t}\n\t\t]\n\t\treturn mandatoryConfigInputOptions\n\t}\n\n\tgetState(appState) {\n\t\tconst config = appState.plots.find(p => p.id === this.id)\n\n\t\t// global mass filter combined with this plot's local filter (config.filter,\n\t\t// set by the plot wrapper's filter UI); restricts which selected samples render\n\t\tconst termfilter = getCombinedTermFilter(appState, config.filter)\n\n\t\treturn {\n\t\t\tconfig,\n\t\t\ttermfilter,\n\t\t\tdslabel: appState.vocab.dslabel,\n\t\t\tgenome: appState.vocab.genome,\n\t\t\ttermdbConfig: appState.termdbConfig,\n\t\t\tRefNIdata: appState.termdbConfig.queries.NIdata.references[config.queryKey]\n\t\t}\n\t}\n\n\tasync main() {\n\t\tif (this.isSampleTableMode(this.state.config)) {\n\t\t\tawait this.renderSampleTable()\n\t\t\treturn\n\t\t}\n\t\tthis.config = structuredClone(this.state.config) //to modify config on plot_edit\n\t\tthis.settings = this.state.config.settings.brainImaging\n\n\t\t//settings may be edited by the slider or the input, so we update the sliders and inputs to reflect the current settings\n\t\tthis.dom.saggitalSlider.property('value', this.settings.brainImageL)\n\t\tthis.dom.saggitalInput.property('value', this.settings.brainImageL)\n\t\tthis.dom.coronalSlider.property('value', this.settings.brainImageF)\n\t\tthis.dom.coronalInput.property('value', this.settings.brainImageF)\n\t\tthis.dom.axialSlider.property('value', this.settings.brainImageT)\n\t\tthis.dom.axialInput.property('value', this.settings.brainImageT)\n\n\t\tlet data\n\t\ttry {\n\t\t\tdata = await Promise.all([\n\t\t\t\tthis.requestImage('l', this.settings.brainImageL),\n\t\t\t\tthis.requestImage('f', this.settings.brainImageF),\n\t\t\t\tthis.requestImage('t', this.settings.brainImageT)\n\t\t\t])\n\t\t} catch (e: any) {\n\t\t\tthis.showNoImage(e?.message || e)\n\t\t\treturn\n\t\t}\n\t\t// e.g. none of the requested samples has an imaging file (sample view and\n\t\t// matrix may request any sample); show the message instead of crashing.\n\t\t// the route sends errors as a plain string, so it is not cached by dofetch3\n\t\tconst failedIdx = data.findIndex(d => !d || typeof d == 'string' || d.error || !d.brainImage)\n\t\tif (failedIdx != -1) {\n\t\t\tconst failed = data[failedIdx]\n\t\t\tthis.showNoImage((typeof failed == 'string' && failed) || failed?.error || 'no brain imaging data')\n\t\t\treturn\n\t\t}\n\n\t\tthis.imagesData = {\n\t\t\tbrainImageL: { dataUrls: {}, td: this.dom.tdL, data: data[0] },\n\t\t\tbrainImageF: { dataUrls: {}, td: this.dom.tdF, data: data[1] },\n\t\t\tbrainImageT: { dataUrls: {}, td: this.dom.tdT, data: data[2] }\n\t\t}\n\n\t\tfor (const img of Object.values(this.imagesData)) this.renderImages(img)\n\n\t\tthis.renderLegend()\n\t}\n\n\t// shown when image data could not be generated, e.g. the sample has no imaging file\n\tshowNoImage(message: any) {\n\t\tfor (const td of [this.dom.tdL, this.dom.tdF, this.dom.tdT]) td.selectAll('*').remove()\n\t\tthis.dom.tdL\n\t\t\t.append('div')\n\t\t\t.style('color', 'white')\n\t\t\t.style('padding', '20px')\n\t\t\t.style('white-space', 'nowrap')\n\t\t\t.text(String(message))\n\t\tthis.dom.legendHolder.selectAll('*').remove()\n\t}\n\n\tasync requestImage(key, value) {\n\t\tconst body = {\n\t\t\tgenome: this.state.genome,\n\t\t\tdslabel: this.state.dslabel,\n\t\t\trefKey: this.state.config.queryKey,\n\t\t\t[key]: value,\n\t\t\tselectedSampleFileNames: this.state.config.selectedSampleFileNames,\n\t\t\tdivideByTW: this.state.config.divideByTW,\n\t\t\toverlayTW: this.state.config.overlayTW,\n\t\t\tlegendFilter: this.state.config.legendFilter,\n\t\t\tfilter: this.state.termfilter?.filter\n\t\t}\n\t\treturn await dofetch3('termdb/brainImaging', { body })\n\t}\n\n\trenderImages({ data, td, dataUrls }: ImgData) {\n\t\tthis.legendValues = data.legend\n\t\tif (data.error) throw data.error\n\t\tfor (const [termV, result] of Object.entries(data.brainImage)) {\n\t\t\tdataUrls[termV] = result\n\t\t}\n\n\t\ttd.selectAll('*').remove()\n\t\tfor (const [termV, result] of Object.entries(dataUrls)) {\n\t\t\tconst imgResult = result as { catNum: number; url: string }\n\t\t\tif (this.state.config.divideByTW)\n\t\t\t\ttd.append('div')\n\t\t\t\t\t.attr('class', 'pp-chart-title')\n\t\t\t\t\t.style('text-align', 'center')\n\t\t\t\t\t.text(`${termV} (n=${imgResult.catNum})`)\n\t\t\t\t\t.style('font-weight', '600')\n\t\t\t\t\t.style('color', 'white')\n\t\t\t\t\t.style('font-size', '24px')\n\t\t\t\t\t.style('margin-bottom', '5px')\n\t\t\t\t\t.style('margin-top', '5px')\n\t\t\t\t\t.style('display', 'block')\n\t\t\ttd.append('div').append('img').attr('src', imgResult.url)\n\t\t}\n\t}\n\n\t/* sample table mode. re-runs on every state change, in particular when the local filter\n\tis edited: the table is rebuilt from a fresh sample query and checked rows are reset */\n\tasync renderSampleTable() {\n\t\tconst NIdata = this.state.termdbConfig.queries.NIdata\n\t\tconst refKeys = Object.keys(NIdata.references)\n\t\t/* the template to render the selected samples on; a radio in the toolbar switches it,\n\t\twhich refetches the samples and rebuilds the table with that template's sampleColumns\n\t\t(templates may differ in samples dir and columns) */\n\t\tconst refKey = this.tableRefKey && refKeys.includes(this.tableRefKey) ? this.tableRefKey : refKeys[0]\n\t\t// guards against an earlier, slower sample query landing after a later one\n\t\tconst requestNum = (this.sampleRequestNum = (this.sampleRequestNum || 0) + 1)\n\n\t\tconst holder = this.dom.tableHolder\n\t\tholder.selectAll('*').remove()\n\t\tconst loadingDiv = holder.append('div').style('opacity', 0.6).text('Loading samples...')\n\n\t\tconst body = {\n\t\t\tgenome: this.state.genome,\n\t\t\tdslabel: this.state.dslabel,\n\t\t\trefKey,\n\t\t\t// global mass filter combined with this sandbox's local filter\n\t\t\tfilter: this.state.termfilter?.filter\n\t\t}\n\t\tlet samples: any[]\n\t\ttry {\n\t\t\tconst result = await fetchBrainImagingSamples(body)\n\t\t\tsamples = result.samples || []\n\t\t} catch (e: any) {\n\t\t\tif (requestNum != this.sampleRequestNum) return // superseded by a newer render\n\t\t\tloadingDiv.remove()\n\t\t\tsayerror(holder, e?.message || String(e))\n\t\t\treturn\n\t\t}\n\t\tif (requestNum != this.sampleRequestNum) return // superseded by a newer render\n\t\tloadingDiv.remove()\n\n\t\tif (!samples.length) {\n\t\t\tholder.append('div').style('opacity', 0.6).text('No imaging samples match the current filter')\n\t\t\treturn\n\t\t}\n\n\t\tconst columns = await getTableColumns(this, refKey)\n\t\tif (requestNum != this.sampleRequestNum) return\n\n\t\t// samples currently shown in the table (narrowed by the search box)\n\t\tlet shownSamples = samples\n\t\t// sample names checked by the user; persists across search box re-renders\n\t\tconst selectedSamples = new Set<string>()\n\n\t\t/* shrink-to-fit container: its width follows the table (also when the user drags\n\t\tthe table's resize handle), so the toolbar above spans exactly the table width */\n\t\tconst container = holder.append('div').style('display', 'inline-block')\n\t\t/* toolbar above the table, always visible: Generate image + template radios on the\n\t\tleft, sample count + search on the right, flush with the table's right edge */\n\t\tconst toolbar = container\n\t\t\t.append('div')\n\t\t\t.style('display', 'flex')\n\t\t\t.style('align-items', 'center')\n\t\t\t.style('gap', '30px')\n\t\t\t.style('padding', '5px 0px')\n\t\tconst generateBtn = toolbar\n\t\t\t.append('button')\n\t\t\t.attr('data-testid', 'sjpp-brainImaging-generate')\n\t\t\t.property('disabled', true)\n\t\t\t// same pill style as the chart menu buttons, e.g. sample scatter\n\t\t\t.style('padding', '10px 15px')\n\t\t\t.style('border-radius', '20px')\n\t\t\t.style('border-color', '#ededed')\n\t\t\t.text('Generate image')\n\t\t\t.on('click', () => {\n\t\t\t\tif (!selectedSamples.size) return\n\t\t\t\tconst selectedSampleFileNames = [...selectedSamples].map(s => s + '.nii')\n\t\t\t\t// launch the images in a new sandbox; this table stays for further launches.\n\t\t\t\t// default slice positions are resolved by getPlotConfig() from the template's parameters\n\t\t\t\tthis.app.dispatch({\n\t\t\t\t\ttype: 'plot_create',\n\t\t\t\t\tconfig: {\n\t\t\t\t\t\tchartType: 'brainImaging',\n\t\t\t\t\t\tqueryKey: refKey,\n\t\t\t\t\t\tselectedSampleFileNames\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t})\n\t\tif (refKeys.length > 1) {\n\t\t\tconst span = toolbar.append('span')\n\t\t\tspan.append('span').style('opacity', 0.6).text('Template: ')\n\t\t\tconst name = `sjpp-brainImaging-template-${this.id}`\n\t\t\tfor (const k of refKeys) {\n\t\t\t\tconst label = span.append('label').style('margin-right', '10px').style('cursor', 'pointer')\n\t\t\t\tlabel\n\t\t\t\t\t.append('input')\n\t\t\t\t\t.attr('type', 'radio')\n\t\t\t\t\t.attr('name', name)\n\t\t\t\t\t.attr('value', k)\n\t\t\t\t\t.property('checked', k == refKey)\n\t\t\t\t\t.on('change', () => {\n\t\t\t\t\t\tthis.tableRefKey = k\n\t\t\t\t\t\tthis.renderSampleTable()\n\t\t\t\t\t})\n\t\t\t\tlabel.append('span').text(' ' + k)\n\t\t\t}\n\t\t}\n\t\tconst countLabel = toolbar.append('span').style('margin-left', 'auto').style('opacity', 0.6)\n\t\t// debounce: re-rendering a large table on every keystroke is janky\n\t\tconst debouncedRenderRows = debounce(() => renderRows(), 200)\n\t\tconst searchInput = toolbar\n\t\t\t.append('input')\n\t\t\t.attr('type', 'search')\n\t\t\t.attr('aria-label', 'Search samples')\n\t\t\t.attr('placeholder', 'Search samples')\n\t\t\t.style('width', '200px')\n\t\t\t.on('input', debouncedRenderRows)\n\t\tconst tableDiv = container.append('div')\n\n\t\t// line up the button's left edge with the table's checkbox column\n\t\tconst alignToolbar = () => {\n\t\t\tconst checkbox = tableDiv.select('input[type=checkbox]').node()\n\t\t\tif (!checkbox) return\n\t\t\tconst offset = checkbox.getBoundingClientRect().left - container.node().getBoundingClientRect().left\n\t\t\ttoolbar.style('padding-left', `${Math.max(0, offset)}px`)\n\t\t}\n\n\t\tconst updateToolbar = (str: string) => {\n\t\t\tcountLabel.text(\n\t\t\t\t(str ? `${shownSamples.length} of ${samples.length} samples` : `${samples.length} samples`) +\n\t\t\t\t\t(selectedSamples.size ? `; ${selectedSamples.size} selected` : '')\n\t\t\t)\n\t\t\t// considers all selections, also those hidden by the search\n\t\t\tgenerateBtn.property('disabled', !selectedSamples.size)\n\t\t}\n\n\t\tconst renderRows = () => {\n\t\t\tconst str = searchInput.property('value').trim().toLowerCase()\n\t\t\tshownSamples = !str\n\t\t\t\t? samples\n\t\t\t\t: samples.filter(s => Object.values(s).some(v => v != undefined && String(v).toLowerCase().includes(str)))\n\t\t\tupdateToolbar(str)\n\t\t\tconst rows = getTableRows(shownSamples, this.state, refKey)\n\t\t\ttableDiv.selectAll('*').remove()\n\t\t\trenderTable({\n\t\t\t\trows,\n\t\t\t\tcolumns,\n\t\t\t\tresize: true,\n\t\t\t\tsingleMode: false,\n\t\t\t\tdiv: tableDiv,\n\t\t\t\tmaxHeight: '60vh',\n\t\t\t\theader: { allowSort: true },\n\t\t\t\tselectedRows: shownSamples.map((s, i) => (selectedSamples.has(s.sample) ? i : -1)).filter(i => i >= 0),\n\t\t\t\t/* fires per checkbox on any change, incl. check-all. the checkbox value is the\n\t\t\t\tindex into the rows array passed above, i.e. into shownSamples, also after\n\t\t\t\tsorting. rows hidden by the search keep their recorded state, so selections\n\t\t\t\tpersist across searches */\n\t\t\t\tnoButtonCallback: (_i: number, node: any) => {\n\t\t\t\t\tconst sample = shownSamples[Number(node.value)]?.sample\n\t\t\t\t\tif (!sample) return\n\t\t\t\t\tif (node.checked) selectedSamples.add(sample)\n\t\t\t\t\telse selectedSamples.delete(sample)\n\t\t\t\t\tupdateToolbar(str)\n\t\t\t\t}\n\t\t\t})\n\t\t\talignToolbar()\n\t\t}\n\t\trenderRows()\n\t}\n\n\trenderLegend() {\n\t\t// with a single sample the intensity color scale carries no information; skip it\n\t\tif (this.state.config.selectedSampleFileNames?.length == 1) {\n\t\t\tthis.dom.legendHolder.selectAll('*').remove()\n\t\t\treturn\n\t\t}\n\t\tconst legendItems: any[] = []\n\t\tfor (const [label, v] of Object.entries(this.legendValues)) {\n\t\t\tconst scale = scaleLinear([0, v.maxLength], [rgb('white').formatHex(), v.color]).clamp(true)\n\t\t\tlegendItems.push({\n\t\t\t\ttext: label == 'default' ? 'Combined Intensity' : label,\n\t\t\t\twidth: 140,\n\t\t\t\tscale,\n\t\t\t\tcolors: ['white', v.color],\n\t\t\t\tdomain: [0, v.maxLength],\n\t\t\t\tkey: label,\n\t\t\t\tcrossedOut: v.crossedOut\n\t\t\t})\n\t\t}\n\t\tthis.legendItems = legendItems\n\t\tconst legendRendererData = [\n\t\t\t{\n\t\t\t\titems: legendItems\n\t\t\t}\n\t\t]\n\n\t\tthis.legendRenderer(legendRendererData, {\n\t\t\tsettings: {\n\t\t\t\tfontsize: 16,\n\t\t\t\ticonh: 14,\n\t\t\t\ticonw: 14,\n\t\t\t\tdimensions: {\n\t\t\t\t\txOffset: 0\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}\n}\n\nexport const brainImaging = getCompInit(BrainImaging)\nexport const componentInit = brainImaging\n\nexport async function getPlotConfig(opts, app) {\n\t/* default slice positions come from the template's dataset-configured\n\tparameters (NIdata.references[queryKey].parameters in e.g. DISCOVER.hg38.ts); a ds\n\tthat omits parameters falls back to the volume midpoint (dimensions are\n\tread from the NIfTI header at server launch), then to default numbers */\n\tconst ref = app.vocabApi?.termdbConfig?.queries?.NIdata?.references?.[opts.queryKey]\n\tconst parameters = ref?.parameters\n\tconst dims = ref?.dimensions\n\tconst settings = {\n\t\tbrainImaging: {\n\t\t\tbrainImageL: parameters?.l ?? (dims ? Math.floor(dims.l / 2) : 98),\n\t\t\tbrainImageF: parameters?.f ?? (dims ? Math.floor(dims.f / 2) : 81),\n\t\t\tbrainImageT: parameters?.t ?? (dims ? Math.floor(dims.t / 2) : 53)\n\t\t}\n\t}\n\tconst config: any = { chartType: 'brainImaging', settings }\n\tcopyMerge(config, opts)\n\t/* a tw of a saved session is only raw until it is filled here, same as every other\n\tchart type. required, since a session is serialized without the derived properties\n\tof a geneVariant term, see trimGvTermsForSave() */\n\tif (config.overlayTW) config.overlayTW = await fillTermWrapper(config.overlayTW, app.vocabApi)\n\tif (config.divideByTW) config.divideByTW = await fillTermWrapper(config.divideByTW, app.vocabApi)\n\treturn config\n}\n\nfunction getTableRows(samples, state, refKey): TableRow[] {\n\tconst rows: TableRow[] = []\n\tfor (const sample of samples) {\n\t\t// first cell is sample name\n\t\tconst row = [{ value: sample.sample }]\n\n\t\t// optional sample columns\n\t\tfor (const c of state.termdbConfig.queries.NIdata.references[refKey].sampleColumns || []) {\n\t\t\trow.push({ value: sample[c.termid] })\n\t\t}\n\t\trows.push(row)\n\t}\n\treturn rows\n}\n\nasync function getTableColumns(self, refKey): Promise<TableColumn[]> {\n\t// first column is sample and is hardcoded\n\tconst columns: TableColumn[] = [{ label: 'Sample', sortable: true }]\n\n\t// add in optional sample columns\n\tfor (const c of self.state.termdbConfig.queries.NIdata.references[refKey].sampleColumns || []) {\n\t\tcolumns.push({\n\t\t\tlabel: (await self.app.vocabApi.getterm(c.termid)).name,\n\t\t\tsortable: true\n\t\t})\n\t}\n\n\treturn columns\n}\n\nfunction setInteractivity(self) {\n\tself.legendLabelMouseup = event => {\n\t\tconst targetData = event.target.__data__\n\t\tif (!targetData || targetData.key == 'default') return\n\t\tconst legendMenu = self.dom.legendMenu.clear()\n\t\tconst legendMenuDiv = legendMenu.d.append('div')\n\t\tconst legendFilter = self.state.config.legendFilter ? [...self.state.config.legendFilter] : []\n\n\t\tconst legendFilterIndex = legendFilter.indexOf(targetData.key)\n\n\t\tif (legendFilterIndex !== -1 || legendFilter.length + 1 !== self.legendItems.length) {\n\t\t\t// only show the Hide option when the cat is not the last shown cat\n\t\t\tlegendMenuDiv\n\t\t\t\t.append('div')\n\t\t\t\t.attr('class', 'sja_menuoption sja_sharp_border')\n\t\t\t\t.text(legendFilterIndex == -1 ? 'Hide' : 'Show')\n\t\t\t\t.on('click', () => {\n\t\t\t\t\tlegendMenu.hide()\n\t\t\t\t\tif (legendFilterIndex == -1) legendFilter.push(targetData.key)\n\t\t\t\t\telse legendFilter.splice(legendFilterIndex, 1)\n\n\t\t\t\t\tself.app.dispatch({\n\t\t\t\t\t\ttype: 'plot_edit',\n\t\t\t\t\t\tid: self.id,\n\t\t\t\t\t\tconfig: { legendFilter }\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t}\n\n\t\tlegendMenuDiv\n\t\t\t.append('div')\n\t\t\t.attr('class', 'sja_menuoption sja_sharp_border')\n\t\t\t.text('Show only')\n\t\t\t.on('click', () => {\n\t\t\t\tlegendMenu.hide()\n\t\t\t\tconst legendFilter: unknown[] = []\n\t\t\t\tfor (const legendCat of self.legendItems) {\n\t\t\t\t\tif (legendCat.key !== targetData.key) legendFilter.push(legendCat.key)\n\t\t\t\t}\n\t\t\t\tself.app.dispatch({\n\t\t\t\t\ttype: 'plot_edit',\n\t\t\t\t\tid: self.id,\n\t\t\t\t\tconfig: { legendFilter }\n\t\t\t\t})\n\t\t\t})\n\n\t\tlegendMenuDiv\n\t\t\t.append('div')\n\t\t\t.attr('class', 'sja_menuoption sja_sharp_border')\n\t\t\t.text('Show all')\n\t\t\t.on('click', () => {\n\t\t\t\tlegendMenu.hide()\n\t\t\t\tself.app.dispatch({\n\t\t\t\t\ttype: 'plot_edit',\n\t\t\t\t\tid: self.id,\n\t\t\t\t\tconfig: { legendFilter: [] }\n\t\t\t\t})\n\t\t\t})\n\n\t\t//TODO: support changing color for grouped geneVariant term\n\t\tif (self.state.config.overlayTW.term.type != 'geneVariant') {\n\t\t\tlet color = self.state.config.overlayTW?.term?.values?.[targetData.key]?.color || 'red'\n\t\t\tcolor = rgb(color).formatHex() //so that the color is in the correct format to be shown in the input\n\t\t\tlegendMenuDiv\n\t\t\t\t.append('div')\n\t\t\t\t.attr('class', 'sja_sharp_border')\n\t\t\t\t.style('padding', '0px 10px')\n\t\t\t\t.text('Color:')\n\t\t\t\t.append('input')\n\t\t\t\t.attr('type', 'color')\n\t\t\t\t.attr('value', color)\n\t\t\t\t.on('change', e => {\n\t\t\t\t\tself.changeColor(targetData.key, e.target.value)\n\t\t\t\t})\n\t\t}\n\t\tlegendMenu.showunder(event.target)\n\t}\n\n\tself.changeColor = async function (key, color) {\n\t\tconst tw = self.config.overlayTW\n\n\t\tif (!(tw.term.type == 'geneVariant' && tw.q.type == 'values') && tw.term.values[key])\n\t\t\ttw.term.values[key].color = color\n\t\telse {\n\t\t\tif (!tw.term.values) tw.term.values = {}\n\t\t\tif (!tw.term.values[key]) tw.term.values[key] = {}\n\t\t\ttw.term.values[key].color = color\n\t\t}\n\n\t\tawait self.app.dispatch({\n\t\t\ttype: 'plot_edit',\n\t\t\tid: self.id,\n\t\t\tconfig: { overlayTW: tw }\n\t\t})\n\t}\n}\n"],
+  "mappings": "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",
+  "names": ["legendFilter"]
+}