@sjcrh/proteinpaint-client 2.193.0 → 2.194.0

package/dist/{GB-MUPI6RL5.js → GB-TA5LQGX6.js}

@@ -2,17 +2,20 @@ import {
   PlotBase,
   addGeneSearchbox,
   appInit,
+  controlsInit,
+  fillTermWrapper,
   filterInit,
   filterJoin,
   first_genetrack_tolist,
+  getCombinedTermFilter,
   getNormalRoot,
   make_one_checkbox,
   renderTable,
   sayerror
-} from "./chunk-L7VDSIM7.js";
+} from "./chunk-RHGAE6PY.js";
 import "./chunk-HJ6L54YS.js";
 import "./chunk-LSEFWW72.js";
-import "./chunk-UXDVUCXU.js";
+import "./chunk-7K6LTROG.js";
 import {
   Menu
 } from "./chunk-HYOEWQ5P.js";
@@ -76,16 +79,27 @@ var Model = class {
   }
 };
 
+// plots/gb/trackLst.ts
+function sanitizeTrackLstConfig(config) {
+  if (!config.trackLst?.facets) return;
+  for (const facet of config.trackLst.facets) delete facet.tracks;
+}
+
 // plots/gb/interactions/Interactions.ts
 var Interactions = class {
   constructor(app, dom, id) {
-    // using arrow function to bind "this" to the Interactions class
-    // otherwise "this" can refer to the Block class
-    this.onCoordinateChange = (rglst) => {
+    this.facetTrackNames = /* @__PURE__ */ new Set();
+    this.onCoordinateChange = (rglst, blockInstance) => {
+      if (!rglst?.length) return;
+      const config = {
+        geneSearchResult: { chr: rglst[0].chr, start: rglst[0].start, stop: rglst[0].stop }
+      };
+      const block = getBlockState(blockInstance, rglst);
+      if (block) config.block = block;
       this.app.dispatch({
         type: "plot_edit",
         id: this.id,
-        config: { geneSearchResult: { chr: rglst[0].chr, start: rglst[0].start, stop: rglst[0].stop } }
+        config
       });
     };
     this.onGeneSearch = (result, blockIsProteinMode) => {
@@ -94,7 +108,8 @@ var Interactions = class {
         id: this.id,
         config: {
           geneSearchResult: result,
-          blockIsProteinMode
+          blockIsProteinMode,
+          block: { rglst: [] }
         }
       });
     };
@@ -102,6 +117,7 @@ var Interactions = class {
       if (!blockInstance) return;
       const state = this.getState(this.app.getState());
       const config = structuredClone(state.config);
+      sanitizeTrackLstConfig(config);
       config.subMds3Tks = [];
       for (const t of blockInstance.tklst) {
         if (t.type == "mds3" && t.filterObj) {
@@ -121,14 +137,10 @@ var Interactions = class {
         }
       }
       let facetActiveTracksChanged = false;
-      if (config.trackLst?.activeTracks && config.trackLst.facets) {
-        const facetTrackNames = /* @__PURE__ */ new Set();
-        for (const f of config.trackLst.facets) {
-          for (const t of f.tracks) facetTrackNames.add(t.name);
-        }
+      if (config.trackLst?.activeTracks && this.facetTrackNames.size) {
         const newLst = config.trackLst.activeTracks.filter((n) => blockInstance.tklst.find((i) => i.name == n));
         for (const t of blockInstance.tklst) {
-          if (t.name && facetTrackNames.has(t.name) && !newLst.includes(t.name)) {
+          if (t.name && this.facetTrackNames.has(t.name) && !newLst.includes(t.name)) {
             newLst.push(t.name);
           }
         }
@@ -197,6 +209,9 @@ var Interactions = class {
     this.dom = dom;
     this.id = id;
   }
+  setFacetTrackNames(names) {
+    this.facetTrackNames = names;
+  }
   // copied from "GB.ts", should try to inherit it instead
   getState(appState) {
     const config = appState.plots.find((p) => p.id === this.id);
@@ -208,6 +223,31 @@ var Interactions = class {
     };
   }
 };
+function getBlockState(blockInstance, rglst) {
+  const blockRglst = cloneRglst(blockInstance?.rglst || rglst);
+  if (!blockRglst?.length) return null;
+  const block = { rglst: blockRglst };
+  for (const key of ["startidx", "stopidx", "regionspace", "gmmode"]) {
+    const value = blockInstance?.[key];
+    if (value !== void 0) block[key] = value;
+  }
+  if (blockInstance?.coord?.reverse !== void 0) block.coordReverse = blockInstance.coord.reverse;
+  return block;
+}
+function cloneRglst(rglst) {
+  if (!Array.isArray(rglst)) return null;
+  return rglst.map((r) => {
+    const r2 = {
+      chr: r.chr,
+      start: r.start,
+      stop: r.stop
+    };
+    for (const key of ["bstart", "bstop", "width", "reverse", "name"]) {
+      if (r[key] !== void 0) r2[key] = r[key];
+    }
+    return r2;
+  });
+}
 function mayUpdateGroupTestMethodsIdx(state, d) {
   if (d.groups.length != 2) return;
   const [g1, g2] = d.groups;
@@ -221,12 +261,13 @@ function mayUpdateGroupTestMethodsIdx(state, d) {
 
 // plots/gb/view/TabsRenderer.ts
 var TabsRenderer = class {
-  constructor(state, dom, opts, interactions) {
+  constructor(state, dom, opts, interactions, facetData = []) {
     this.state = state;
     this.dom = dom;
     this.opts = opts;
     this.interactions = interactions;
     this.filterUI = {};
+    this.facetData = facetData;
   }
   async main() {
     let previousActiveTabLabel = null;
@@ -249,8 +290,8 @@ var TabsRenderer = class {
     const tabs = [];
     if (this.state.config.trackLst?.facets) {
       const activeTracks = this.state.config.trackLst.activeTracks;
-      for (const facet of this.state.config.trackLst.facets) {
-        const shown = facet.tracks.some((t) => activeTracks.includes(t.name));
+      for (const facet of this.facetData) {
+        const shown = facet.tracks?.some((t) => activeTracks.includes(t.name));
         tabs.push({ label: facet.name || "Facet Table", active: shown });
       }
     }
@@ -285,7 +326,7 @@ var TabsRenderer = class {
     toggles.main();
     let tabsIdx = 0;
     if (this.state.config.trackLst?.facets) {
-      for (const facet of this.state.config.trackLst.facets) {
+      for (const facet of this.facetData) {
         const div = tabs[tabsIdx++].contentHolder.append("div");
         this.renderFacetTable(facet, div);
       }
@@ -331,6 +372,10 @@ var TabsRenderer = class {
     }
   }
   renderFacetTable(facet, div) {
+    if (!facet.tracks?.length) {
+      div.append("div").style("opacity", 0.7).style("margin", "8px 0px").text("No tracks match the current filter.");
+      return;
+    }
     const assayset = /* @__PURE__ */ new Set(), sampleset = /* @__PURE__ */ new Set();
     for (const t of facet.tracks) {
       if (t.assay) assayset.add(t.assay);
@@ -338,10 +383,28 @@ var TabsRenderer = class {
     }
     const sampleLst = [...sampleset];
     const assayLst = [...assayset];
-    const columns = [{ label: "Sample" }];
+    const facetTwLst = [];
+    for (const tw of [this.state.config.facetTw1, this.state.config.facetTw2, this.state.config.facetTw3]) {
+      if (!tw) break;
+      facetTwLst.push(tw);
+    }
+    const columns = [{ label: "Sample", headerTestId: "sjpp-gb-facettable-sample-columnheader" }];
+    for (const tw of facetTwLst) {
+      columns.push({
+        label: tw.term?.name || tw.term?.id || tw.id,
+        headerTestId: "sjpp-gb-facettable-tw-columnheader",
+        fillCell: (td, si) => {
+          const sample = sampleLst[si];
+          const annotation = facet.samples?.[sample]?.[tw.$id];
+          if (annotation !== void 0) td.text(annotation);
+        }
+      });
+    }
     for (const assay of assayLst) {
       columns.push({
         label: assay,
+        headerTestId: "sjpp-gb-facettable-assay-columnheader",
+        labelVertical: true,
         fillCell: (td, si) => {
           const tklst = facet.tracks.filter((i) => i.assay == assay && i.sample == sampleLst[si]);
           if (tklst.length == 0) return;
@@ -356,6 +419,9 @@ var TabsRenderer = class {
     const rows = [];
     for (const sample of sampleLst) {
       const row = [{ value: sample }];
+      for (let i = 0; i < facetTwLst.length; i++) {
+        row.push({});
+      }
       for (let i = 0; i < assayLst.length; i++) {
         row.push({});
       }
@@ -369,22 +435,22 @@ var TabsRenderer = class {
   }
   clickFacetCell(event, tklst) {
     this.dom.tip.clear().showunder(event.target);
-    const activeTracks = this.state.config.trackLst.activeTracks;
+    const activeTracks = this.getLatestActiveTracks() || this.state.config.trackLst.activeTracks;
     const table = this.dom.tip.d.append("table").style("margin", "5px 5px 5px 2px");
     for (const tk of tklst) {
       const tr = table.append("tr");
       const td1 = tr.append("td").style("font-size", ".8em").text(activeTracks.includes(tk.name) ? "SHOWN" : "");
       tr.append("td").attr("class", "sja_menuoption").text(tk.name).on("click", () => {
-        this.dom.tip.hide();
+        const currentActiveTracks = this.getLatestActiveTracks() || activeTracks;
         let newActiveTracks, newRemoveTracks;
-        if (activeTracks.includes(tk.name)) {
+        if (currentActiveTracks.includes(tk.name)) {
           td1.text("");
-          newActiveTracks = structuredClone(activeTracks).filter((n) => n != tk.name);
+          newActiveTracks = structuredClone(currentActiveTracks).filter((n) => n != tk.name);
           newRemoveTracks = [tk.name];
         } else {
           td1.text("SHOWN");
-          newActiveTracks = structuredClone(activeTracks);
-          newActiveTracks.push(tk.name);
+          newActiveTracks = [.../* @__PURE__ */ new Set([...currentActiveTracks, tk.name])];
+          newRemoveTracks = [];
         }
         const config = {
           trackLst: {
@@ -396,6 +462,10 @@ var TabsRenderer = class {
       });
     }
   }
+  getLatestActiveTracks() {
+    const config = this.interactions.app.getState().plots.find((p) => p.id === this.interactions.id);
+    return config?.trackLst?.activeTracks;
+  }
   async mayRenderGroups() {
     const groups = this.state.config.snvindel.details.groups;
     if (!groups) return;
@@ -712,16 +782,17 @@ var GeneSearchRenderer = class {
 
 // plots/gb/view/View.ts
 var View = class {
-  constructor(state, blockInstance, data, dom, opts, interactions) {
+  constructor(state, blockInstance, data, dom, opts, interactions, facetData = []) {
     this.state = state;
     this.blockInstance = blockInstance;
     this.data = data;
     this.dom = dom;
     this.opts = opts;
     this.interactions = interactions;
+    this.facetData = facetData;
   }
   async main() {
-    const tabs = new TabsRenderer(this.state, this.dom, this.opts, this.interactions);
+    const tabs = new TabsRenderer(this.state, this.dom, this.opts, this.interactions, this.facetData);
     await tabs.main();
     const geneSearch = new GeneSearchRenderer(this.state, this.dom.geneSearchDiv, this.opts, this.interactions);
     geneSearch.main();
@@ -803,8 +874,8 @@ var View = class {
     }
     if (this.state.config?.trackLst?.activeTracks?.length) {
       for (const n of this.state.config.trackLst.activeTracks) {
-        for (const f of this.state.config.trackLst.facets) {
-          for (const t of f.tracks) {
+        for (const f of this.facetData) {
+          for (const t of f.tracks || []) {
             if (t.name == n) tklst.push(t);
           }
         }
@@ -931,24 +1002,29 @@ var View = class {
       },
       filter0: this.state.filter0
     };
-    if (this.data) {
-      arg.onCoordinateChange = this.interactions.onCoordinateChange;
-    }
+    const interactions = this.interactions;
+    arg.onCoordinateChange = function(rglst) {
+      interactions.onCoordinateChange(rglst, this);
+    };
     if (this.state.config.blockIsProteinMode) {
       if (!this.state.config.geneSearchResult.geneSymbol) throw "blockIsProteinMode=true but geneSymbol missing";
       arg.query = this.state.config.geneSearchResult.geneSymbol;
-      const _2 = await import("./block.init-7FHXQJNE.js");
+      const _2 = await import("./block.init-QOAPDKCC.js");
       await _2.default(arg);
       this.blockInstance = arg.__blockInstance;
       if (this.opts.header) this.opts.header.text(arg.query);
       return;
     }
-    if (!this.state.config.geneSearchResult.chr) throw "blockIsProteinMode=false but chr missing";
-    arg.chr = this.state.config.geneSearchResult.chr;
-    arg.start = this.state.config.geneSearchResult.start;
-    arg.stop = this.state.config.geneSearchResult.stop;
+    if (this.state.config.block?.rglst?.length) {
+      arg.rglst = this.state.config.block.rglst;
+    } else {
+      if (!this.state.config.geneSearchResult.chr) throw "blockIsProteinMode=false but chr missing";
+      arg.chr = this.state.config.geneSearchResult.chr;
+      arg.start = this.state.config.geneSearchResult.start;
+      arg.stop = this.state.config.geneSearchResult.stop;
+    }
     first_genetrack_tolist(this.opts.genome, arg.tklst);
-    const _ = await import("./block-TCWYUB4R.js");
+    const _ = await import("./block-BYXWS7H7.js");
     this.blockInstance = new _.Block(arg);
   }
 };
@@ -993,6 +1069,7 @@ var TdbGenomeBrowser = class _TdbGenomeBrowser extends PlotBase {
   constructor(opts, api) {
     super(opts, api);
     this.components = {};
+    this.configTermKeys = ["facetTw1", "facetTw2", "facetTw3"];
     this.type = _TdbGenomeBrowser.type;
     this.dom = this.getDom();
   }
@@ -1004,43 +1081,111 @@ var TdbGenomeBrowser = class _TdbGenomeBrowser extends PlotBase {
     if (this.opts.header) {
       this.opts.header.append("div").style("opacity", 0.6).style("padding-left", "10px").style("font-size", "0.75em").text("GENOME BROWSER");
     }
-    const loadingDiv = holder.append("div").style("display", "none").style("margin-left", "25px").text("Loading...");
-    const errDiv = holder.append("div").style("display", "none").style("margin", "10px");
-    const controlsDiv = holder.append("div").style("margin", "15px 0px 0px 25px");
+    const body = holder.append("div").style("display", "flex").style("align-items", "flex-start").style("gap", "12px");
+    const controlsDiv = body.append("div").style("flex", "0 0 auto");
+    const mainDiv = body.append("div").style("flex", "1 1 auto").style("min-width", 0).style("margin", "15px 0px 0px 25px");
+    const errDiv = mainDiv.append("div").style("display", "none").style("margin", "10px");
     const dom = {
       tip: new Menu(),
       holder,
-      loadingDiv,
       errDiv,
-      tabsDiv: controlsDiv.append("div"),
-      geneSearchDiv: controlsDiv.append("div").style("margin", "20px 0px"),
-      blockHolder: holder.append("div")
+      controls: controlsDiv.append("div"),
+      tabsDiv: mainDiv.append("div"),
+      geneSearchDiv: mainDiv.append("div").style("margin", "20px 0px"),
+      blockHolder: mainDiv.append("div")
     };
     return dom;
   }
   async init() {
     this.interactions = new Interactions(this.app, this.dom, this.id);
+    await this.setControls();
+  }
+  async setControls() {
+    const state = this.getState(this.app.getState());
+    if (!state.config.trackLst) return;
+    this.dom.holder.attr("class", "pp-termdb-plot-viz").style("display", "inline-block").style("min-width", "300px");
+    this.components = {
+      controls: await controlsInit({
+        app: this.app,
+        id: this.id,
+        holder: this.dom.controls.style("display", "inline-block"),
+        title: "Genome Browser",
+        inputs: [
+          {
+            type: "term",
+            configKey: "facetTw1",
+            chartType: "genomeBrowser",
+            usecase: { target: "genomeBrowser", detail: "facetTw1" },
+            title: "Add column",
+            label: "Add column",
+            vocabApi: this.app.vocabApi,
+            processConfig: (config) => {
+              if (!config.facetTw1) {
+                config.facetTw2 = null;
+                config.facetTw3 = null;
+              }
+            }
+          },
+          {
+            type: "term",
+            configKey: "facetTw2",
+            chartType: "genomeBrowser",
+            usecase: { target: "genomeBrowser", detail: "facetTw2" },
+            title: "Add column",
+            label: "Add column",
+            vocabApi: this.app.vocabApi,
+            getDisplayStyle: (plot) => getGbConfig(plot).facetTw1 ? "table-row" : "none",
+            processConfig: (config) => {
+              if (!config.facetTw2) config.facetTw3 = null;
+            }
+          },
+          {
+            type: "term",
+            configKey: "facetTw3",
+            chartType: "genomeBrowser",
+            usecase: { target: "genomeBrowser", detail: "facetTw3" },
+            title: "Add column",
+            label: "Add column",
+            vocabApi: this.app.vocabApi,
+            getDisplayStyle: (plot) => getGbConfig(plot).facetTw2 ? "table-row" : "none"
+          }
+        ]
+      })
+    };
   }
   getState(appState) {
     const config = appState.plots.find((p) => p.id === this.id);
     if (!config) throw `No plot with id='${this.id}' found`;
+    const parentConfig = appState.plots.find((p) => p.id === this.parentId);
+    const termfilter = getCombinedTermFilter(appState, config.filter || parentConfig?.filter);
     return {
       config,
-      filter: getNormalRoot(appState.termfilter.filter),
-      filter0: appState.termfilter.filter0,
+      filter: getNormalRoot(termfilter.filter),
+      filter0: termfilter.filter0,
       vocab: appState.vocab
     };
   }
   async main() {
-    this.dom.loadingDiv.style("display", "block");
+    this.dom.holder.style("opacity", 0.5).style("pointer-events", "none");
     this.dom.errDiv.style("display", "none");
     const state = this.getState(this.app.getState());
     if (state.config.chartType != this.type) return;
     const opts = this.getOpts();
+    const mergedTkFilter = state.filter && state.config.snvindel?.filter ? filterJoin([state.filter, state.config.snvindel.filter]) : state.filter || state.config.snvindel?.filter || null;
+    const filterSig = JSON.stringify({
+      filter: mergedTkFilter || null,
+      filter0: state.filter0 || null
+    });
+    if (this._prevFilterSig && this._prevFilterSig !== filterSig && this.blockInstance) {
+      this.dom.blockHolder.selectAll("*").remove();
+      this.blockInstance = null;
+    }
+    this._prevFilterSig = filterSig;
     try {
       const model = new Model(state, this.app);
-      const data = await model.preComputeData();
-      const view = new View(state, this.blockInstance, data, this.dom, opts, this.interactions);
+      const [data, facetData] = await Promise.all([model.preComputeData(), this.getFacetData(state)]);
+      this.interactions.setFacetTrackNames(getFacetTrackNames(facetData));
+      const view = new View(state, this.blockInstance, data, this.dom, opts, this.interactions, facetData);
       await view.main();
       this.blockInstance = view.blockInstance;
     } catch (e) {
@@ -1048,7 +1193,33 @@ var TdbGenomeBrowser = class _TdbGenomeBrowser extends PlotBase {
       sayerror(this.dom.errDiv, "Error: " + (e.message || e));
       if (e.stack) console.log(e.stack);
     }
-    this.dom.loadingDiv.style("display", "none");
+    this.dom.holder.style("opacity", 1).style("pointer-events", "auto");
+  }
+  async getFacetData(state) {
+    if (!state.config.trackLst?.facets?.length) return [];
+    const headers = await this.app.vocabApi.mayGetAuthHeaders("termdb");
+    return await Promise.all(
+      state.config.trackLst.facets.map(async (facet) => {
+        const body = {
+          genome: this.app.vocabApi.vocab.genome,
+          dslabel: this.app.vocabApi.vocab.dslabel,
+          facetname: facet.name,
+          twLst: getFacetTwLst(state.config)
+        };
+        if (state.filter?.lst?.length) body.filter = state.filter;
+        const data = await this.app.vocabApi.dofetch3(
+          "termdb/facet",
+          { headers, body },
+          this.app.vocabApi.opts.fetchOpts
+        );
+        if (data.error) throw data.error;
+        return {
+          ...facet,
+          tracks: data.tracks || [],
+          samples: data.samples
+        };
+      })
+    );
   }
   // get options for view instance
   getOpts() {
@@ -1063,6 +1234,15 @@ var TdbGenomeBrowser = class _TdbGenomeBrowser extends PlotBase {
     return opts;
   }
 };
+function getFacetTrackNames(facets) {
+  const names = /* @__PURE__ */ new Set();
+  for (const facet of facets || []) {
+    for (const track of facet.tracks || []) {
+      if (track.name) names.add(track.name);
+    }
+  }
+  return names;
+}
 var genomeBrowserInit = getCompInit(TdbGenomeBrowser);
 var componentInit = genomeBrowserInit;
 async function getPlotConfig(opts, app, activeCohort) {
@@ -1083,6 +1263,7 @@ async function getDefaultConfig(vocabApi, override, activeCohort) {
     }),
     override || {}
   );
+  sanitizeTrackLstConfig(config);
   computeBlockModeFlag(config, vocabApi);
   if (config.snvindel) {
     if (!config.variantFilter) {
@@ -1112,9 +1293,29 @@ async function getDefaultConfig(vocabApi, override, activeCohort) {
   if (config.trackLst) {
     if (!config.trackLst.facets) throw "trackLst.facets[] missing";
     if (!config.trackLst.activeTracks) config.trackLst.activeTracks = [];
+    const facetTwLst = [config.facetTw1, config.facetTw2, config.facetTw3].some(Boolean) ? [config.facetTw1, config.facetTw2, config.facetTw3] : config.trackLst.facetTwLst || [];
+    for (const [i, tw] of facetTwLst.slice(0, 3).entries()) {
+      if (!tw) continue;
+      const key = `facetTw${i + 1}`;
+      config[key] = await fillTermWrapper(tw, vocabApi);
+    }
+    delete config.trackLst.facetTwLst;
+    config.settings = config.settings || {};
+    config.settings.controls = config.settings.controls || {};
   }
   return config;
 }
+function getGbConfig(plotOrState) {
+  return plotOrState?.config || plotOrState || {};
+}
+function getFacetTwLst(config) {
+  const facetTwLst = [];
+  for (const tw of [config.facetTw1, config.facetTw2, config.facetTw3]) {
+    if (!tw) break;
+    facetTwLst.push(tw);
+  }
+  return facetTwLst;
+}
 function computeBlockModeFlag(config, vocabApi) {
   if (typeof config.blockIsProteinMode == "boolean") {
     return;
@@ -1145,7 +1346,8 @@ export {
   componentInit,
   computeBlockModeFlag,
   genomeBrowserInit,
+  getFacetTwLst,
   getPlotConfig,
   makeChartBtnMenu
 };
-//# sourceMappingURL=GB-MUPI6RL5.js.map
+//# sourceMappingURL=GB-TA5LQGX6.js.map