@sjcrh/proteinpaint-client 2.146.4-1 → 2.147.1

package/dist/chunk-NNDNVBTX.js

@@ -0,0 +1,524 @@
+import {
+  Tabs,
+  appInit,
+  filterInit,
+  getNormalRoot,
+  make_one_checkbox,
+  renderTable
+} from "./chunk-5GYHGTRN.js";
+import {
+  getCompInit
+} from "./chunk-SU6RBYZK.js";
+import {
+  Menu
+} from "./chunk-IVJWQYGG.js";
+
+// plots/genomeBrowser.controls.js
+var groupTip = new Menu({ padding: "0px" });
+var GbControls = class {
+  constructor(opts) {
+    this.type = "gbControls";
+    this.filterUI = {};
+  }
+  async init(appState) {
+    this.initUI(this.getState(appState));
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) throw `No plot with id='${this.id}' found`;
+    if (config._partialData) {
+      this._partialData = config._partialData;
+      return;
+    }
+    return {
+      activeCohort: appState.activeCohort,
+      config,
+      filter: getNormalRoot(appState.termfilter.filter)
+    };
+  }
+  async main() {
+    const groups = this.state.config.snvindel?.details?.groups;
+    if (groups) {
+      this.render1group(0);
+      this.render1group(1);
+      if (this.state.config.snvindel.details.groupTestMethods) {
+        this.renderTestMethod();
+      }
+    }
+    if (this.state.config.variantFilter) {
+      if (!this.variantFilterRendered) {
+        this.variantFilterRendered = true;
+        this.makeVariantFilter();
+      }
+    }
+  }
+  async makeVariantFilter() {
+    filterInit({
+      joinWith: this.state.config.variantFilter.opts.joinWith,
+      emptyLabel: "+Add Filter",
+      holder: this.dom.variantFilterHolder,
+      vocab: { terms: this.state.config.variantFilter.terms },
+      callback: async (filter) => {
+        await this.app.dispatch({
+          type: "plot_edit",
+          id: this.id,
+          config: { variantFilter: { filter } }
+        });
+      }
+    }).main(this.state.config.variantFilter.filter);
+  }
+  /*
+  	render ui contents of one group, both arguments are provided to be convenient for ad-hoc update
+  
+  	groupIdx: array index of self.state.config.snvindel.details.groups[]
+  		determines which <div> to render to at self.dom.group1/2div
+  	group{}: element of same array
+  	*/
+  render1group(groupIdx) {
+    const group = this.state.config.snvindel.details.groups[groupIdx];
+    const div = groupIdx == 0 ? this.dom.group1div : this.dom.group2div;
+    let canReuse = false;
+    if (group?.type == "filter" && this.filterUI[groupIdx]) {
+      canReuse = true;
+    } else {
+      delete this.filterUI[groupIdx];
+      div.selectAll("*").remove();
+    }
+    if (!group) {
+      makePrompt2addNewGroup(this, groupIdx, div);
+      return;
+    }
+    if (!canReuse) makeGroupHeaderButton(this, groupIdx, div);
+    if (group.type == "info") return render1group_info(this, groupIdx, group, div);
+    if (group.type == "population") return render1group_population(this, groupIdx, group, div);
+    if (group.type == "filter") return render1group_filter(this, groupIdx, group, div);
+    throw "render1group: unknown group type";
+  }
+  renderTestMethod() {
+    const div = this.dom.testMethodDiv;
+    div.selectAll("*").remove();
+    const [g1, g2] = this.state.config.snvindel.details.groups;
+    if (!g2) {
+      return;
+    }
+    div.append("span").text("TEST METHOD").style("font-size", ".8em").style("opacity", 0.6);
+    if (g1.type != "filter" && g2.type != "filter") {
+      div.append("span").style("padding-left", "10px").text("Value difference").style("opacity", 0.6);
+      return;
+    }
+    const select = div.append("select").style("margin-left", "10px").on("change", () => {
+      this.app.dispatch({
+        type: "plot_edit",
+        id: this.id,
+        config: { snvindel: { details: { groupTestMethodsIdx: select.property("selectedIndex") } } }
+      });
+    });
+    for (const m of this.state.config.snvindel.details.groupTestMethods) {
+      select.append("option").text(m.name);
+    }
+    select.property("selectedIndex", this.state.config.snvindel.details.groupTestMethodsIdx);
+  }
+  initUI(state) {
+    this.dom = {};
+    const tabs = [];
+    if (state.config.trackLst?.facets) {
+      for (const facet of state.config.trackLst.facets) {
+        tabs.push({ label: facet.name || "Facet Table" });
+      }
+      tabs[0].active = true;
+    }
+    if (state.config.snvindel) {
+      if (state.config.snvindel.details) {
+        tabs.push({ label: "Variant Values", active: true });
+        if (state.config.variantFilter) {
+          tabs.push({ label: "Variant Filter" });
+        }
+      } else {
+        if (state.config.trackLst) {
+          tabs.push({ label: "Variants", active: true });
+        } else {
+        }
+      }
+    }
+    if (state.config.ld) {
+      tabs.push({ label: "LD Map" });
+    }
+    if (tabs.length == 0) {
+      return;
+    }
+    const toggles = new Tabs({
+      holder: this.opts.holder.append("div").style("border-bottom", "solid 1px #ccc").style("padding-bottom", "20px"),
+      tabs,
+      hideOnDblClick: true
+    });
+    toggles.main();
+    let tabsIdx = 0;
+    if (state.config.trackLst?.facets) {
+      for (const facet of state.config.trackLst.facets) {
+        const div = tabs[tabsIdx++].contentHolder.append("div");
+        renderFacetTable(this, facet, div);
+      }
+    }
+    if (state.config.snvindel) {
+      if (state.config.snvindel.details) {
+        const div = tabs[tabsIdx++].contentHolder.append("div");
+        this.dom.group1div = div.append("div");
+        this.dom.group2div = div.append("div");
+        this.dom.testMethodDiv = div.append("div").style("margin-top", "3px");
+        if (state.config.variantFilter) {
+          this.dom.variantFilterHolder = tabs[tabsIdx++].contentHolder.append("div").style("white-space", "normal");
+        }
+      } else {
+        if (state.config.trackLst) {
+          const div = tabs[tabsIdx++].contentHolder.append("div");
+          make_one_checkbox({
+            labeltext: "Show variant track",
+            checked: state.config.snvindel.shown,
+            holder: div,
+            callback: (checked) => {
+              this.app.dispatch({
+                type: "plot_edit",
+                id: this.id,
+                config: { snvindel: { shown: checked } }
+              });
+            }
+          });
+        }
+      }
+    }
+    if (state.config.ld) {
+      const tracks = structuredClone(state.config.ld.tracks);
+      const div = tabs[tabsIdx++].contentHolder.append("div");
+      div.append("div").text("Show/hide linkage disequilibrium map from an ancestry:").style("opacity", 0.5);
+      for (const [i, t] of tracks.entries()) {
+        make_one_checkbox({
+          labeltext: t.name,
+          checked: t.shown,
+          holder: div,
+          callback: (checked) => {
+            tracks[i].shown = checked;
+            this.app.dispatch({
+              type: "plot_edit",
+              id: this.id,
+              config: { ld: { tracks } }
+            });
+          }
+        });
+      }
+    }
+  }
+};
+var gbControlsInit = getCompInit(GbControls);
+function render1group_info(self, groupIdx, group, div) {
+  let name = group.infoKey;
+  if (self.state.config.variantFilter?.terms) {
+    const f = self.state.config.variantFilter.terms.find((i) => i.id == group.infoKey);
+    if (f && f.name) name = f.name;
+  }
+  div.append("span").text(name).attr("class", "sja_menuoption").on("click", (event) => {
+    if (self.state.config.variantFilter.terms.length <= 1) {
+      return;
+    }
+    groupTip.clear().showunder(event.target).d.append("div").text("Replace with:").style("margin", "10px").style("font-size", ".8em");
+    for (const f of self.state.config.variantFilter.terms) {
+      if (f.type != "integer" && f.type != "float") continue;
+      if (f.id == group.infoKey) continue;
+      groupTip.d.append("div").text(f.name).attr("class", "sja_menuoption").on("click", () => {
+        groupTip.hide();
+        const groups = structuredClone(self.state.config.snvindel.details.groups);
+        groups[groupIdx].infoKey = f.id;
+        groups[groupIdx].type = "info";
+        self.app.dispatch({
+          type: "plot_edit",
+          id: self.id,
+          config: { snvindel: { details: { groups } } }
+        });
+      });
+    }
+  });
+  div.append("span").text("PER-VARIANT NUMERICAL VALUES").style("font-size", ".7em").style("opacity", 0.6).style("margin-left", "10px");
+}
+function render1group_population(self, groupIdx, group, div) {
+  div.append("span").text(group.label).attr("class", "sja_menuoption").on("click", (event) => {
+    if (self.state.config.snvindel.populations.length <= 1) {
+      return;
+    }
+    groupTip.clear().showunder(event.target).d.append("div").text("Replace with:").style("margin", "10px").style("font-size", ".8em");
+    for (const p of self.state.config.snvindel.populations) {
+      if (p.key == group.key) continue;
+      groupTip.d.append("div").text(p.label).attr("class", "sja_menuoption").on("click", () => {
+        groupTip.hide();
+        const groups = structuredClone(self.state.config.snvindel.details.groups);
+        groups[groupIdx] = structuredClone(p);
+        groups[groupIdx].type = "population";
+        self.app.dispatch({
+          type: "plot_edit",
+          id: self.id,
+          config: { snvindel: { details: { groups } } }
+        });
+      });
+    }
+  });
+  div.append("span").text(`POPULATION${group.adjust_race ? ", RACE ADJUSTED" : ""}`).style("font-size", ".7em").style("margin-left", "10px").style("opacity", 0.6);
+  if (self._partialData?.pop2average) {
+    if (self.state.config.snvindel.details.groups[groupIdx == 1 ? 0 : 1]?.type == "filter") {
+      const lst = [];
+      for (const k in self._partialData.pop2average) {
+        const value = self._partialData.pop2average[k];
+        if (!Number.isFinite(value)) continue;
+        lst.push(`${k}=${value.toFixed(2)}`);
+      }
+      if (lst.length) {
+        div.append("span").text(`Group ${groupIdx == 1 ? 1 : 2} average admixture: ${lst.join(", ")}`).style("margin-left", "20px").attr("class", "sja_clbtext").on("click", (event) => {
+          groupTip.clear().showunder(event.target).d.append("div").style("margin", "10px").style("width", "500px").html(`These are average admixture coefficients based on current Group ${groupIdx == 1 ? 1 : 2} samples.
+						They are used to adjust variant allele counts of matching ancestries from <span class=sja_menuoption style="padding:2px 5px">${group.label}</span>,
+						so that the adjusted allele counts can be compared against Group ${groupIdx == 1 ? 1 : 2} allele counts.
+						This allows to account for ancestry composition difference between the two groups.
+						`);
+        });
+      }
+    }
+  }
+}
+async function render1group_filter(self, groupIdx, group, div) {
+  let span;
+  if (!self.filterUI[groupIdx]) {
+    self.filterUI[groupIdx] = await filterInit({
+      holder: div,
+      vocab: self.app.opts.state.vocab,
+      emptyLabel: "Entire cohort",
+      termdbConfig: self.app.vocabApi.termdbConfig,
+      callback: async (f) => {
+        const groups = JSON.parse(JSON.stringify(self.state.config.snvindel.details.groups));
+        groups[groupIdx].filter = f;
+        self.app.dispatch({
+          type: "plot_edit",
+          id: self.id,
+          config: { snvindel: { details: { groups } } }
+        });
+      }
+    });
+  }
+  self.filterUI[groupIdx].main(getJoinedFilter(self, group));
+  div.select(".sjpp-gb-filter-count").remove();
+  const count = self._partialData?.groupSampleCounts?.[groupIdx];
+  if (Number.isInteger(count)) {
+    div.append("span").attr("class", "sjpp-gb-filter-count").style("margin-left", "10px").style("opacity", 0.5).style("font-size", ".9em").text("n=" + count);
+  }
+}
+function getJoinedFilter(self, group) {
+  const joinedFilter = structuredClone(self.state.filter || { type: "tvslst", in: true, join: "", lst: [] });
+  const gf = structuredClone(group.filter);
+  gf.tag = "filterUiRoot";
+  joinedFilter.lst.push(gf);
+  joinedFilter.join = "and";
+  return joinedFilter;
+}
+function makePrompt2addNewGroup(self, groupIdx, div) {
+  div.append("div").style("display", "inline-block").text("Create Group 2").attr("class", "sja_clbtext").style("margin", "10px").on("click", (event) => {
+    groupTip.showunder(event.target).clear();
+    launchMenu_createGroup(self, groupIdx, groupTip.d);
+  });
+}
+function makeGroupHeaderButton(self, groupIdx, div) {
+  div.append("div").style("display", "inline-block").text("Group " + (groupIdx + 1)).attr("class", "sja_menuoption").style("margin-right", "10px").on("click", (event) => {
+    groupTip.showunder(event.target).clear();
+    if (groupIdx == 0) {
+      launchMenu_createGroup(self, 0, groupTip.d);
+      return;
+    }
+    groupTip.d.append("div").text("Change").attr("class", "sja_menuoption").style("border-radius", "0px").on("click", () => {
+      launchMenu_createGroup(self, 1, groupTip.clear().d);
+    });
+    groupTip.d.append("div").text("Delete").attr("class", "sja_menuoption").style("border-radius", "0px").on("click", () => {
+      groupTip.hide();
+      const groups = [self.state.config.snvindel.details.groups[0]];
+      self.app.dispatch({
+        type: "plot_edit",
+        id: self.id,
+        config: { snvindel: { details: { groups } } }
+      });
+    });
+  });
+}
+function launchMenu_createGroup(self, groupIdx, div) {
+  const opt = {
+    holder: div.append("div").style("margin", "5px"),
+    tabs: self.state.config.snvindel.details.groupTypes.map((i) => {
+      return { label: i.name };
+    }),
+    tabsPosition: "vertical",
+    linePosition: "right"
+  };
+  new Tabs(opt).main();
+  for (const [idx, groupType] of self.state.config.snvindel.details.groupTypes.entries()) {
+    const tab = opt.tabs[idx];
+    tab.contentHolder.style("margin", "10px");
+    if (groupType.type == "info") {
+      if (!self.state.config.variantFilter?.terms)
+        throw "looking for snvindel info fields but self.state.config.variantFilter.terms[] missing";
+      for (const f of self.state.config.variantFilter.terms) {
+        if (f.type != "integer" && f.type != "float") continue;
+        tab.contentHolder.append("div").text(f.name).attr("class", "sja_menuoption").on("click", () => {
+          groupTip.hide();
+          const newGroup = {
+            type: "info",
+            infoKey: f.id
+          };
+          const details = makeNewDetail(self, newGroup, groupIdx);
+          mayUpdateGroupTestMethodsIdx(self, details);
+          self.app.dispatch({
+            type: "plot_edit",
+            id: self.id,
+            config: { snvindel: { details } }
+          });
+        });
+      }
+      continue;
+    }
+    if (groupType.type == "population") {
+      if (!self.state.config.snvindel.populations) throw "state.config.snvindel.populations missing";
+      for (const p of self.state.config.snvindel.populations) {
+        tab.contentHolder.append("div").text(p.label).attr("class", "sja_menuoption").on("click", () => {
+          groupTip.hide();
+          const newGroup = {
+            type: "population",
+            key: p.key,
+            label: p.label,
+            allowto_adjust_race: p.allowto_adjust_race,
+            adjust_race: p.adjust_race
+          };
+          const details = makeNewDetail(self, newGroup, groupIdx);
+          mayUpdateGroupTestMethodsIdx(self, details);
+          self.app.dispatch({
+            type: "plot_edit",
+            id: self.id,
+            config: { snvindel: { details } }
+          });
+        });
+      }
+      continue;
+    }
+    if (groupType.type == "filter") {
+      const arg = {
+        holder: tab.contentHolder,
+        vocabApi: self.app.vocabApi,
+        state: {
+          activeCohort: self.state.activeCohort,
+          termfilter: { filter: self.state.filter }
+        },
+        tree: {
+          click_term2select_tvs: (tvs) => {
+            groupTip.hide();
+            const newGroup = {
+              type: "filter",
+              filter: {
+                in: true,
+                join: "",
+                type: "tvslst",
+                lst: [{ type: "tvs", tvs }]
+              }
+            };
+            const details = makeNewDetail(self, newGroup, groupIdx);
+            mayUpdateGroupTestMethodsIdx(self, details);
+            self.app.dispatch({
+              type: "plot_edit",
+              id: self.id,
+              config: { snvindel: { details } }
+            });
+          }
+        }
+      };
+      appInit(arg);
+      continue;
+    }
+    throw "unknown group type";
+  }
+}
+function makeNewDetail(self, newGroup, groupIdx) {
+  const newDetail = {
+    groups: JSON.parse(JSON.stringify(self.state.config.snvindel.details.groups))
+  };
+  newDetail.groups[groupIdx] = newGroup;
+  return newDetail;
+}
+function mayUpdateGroupTestMethodsIdx(self, d) {
+  if (d.groups.length != 2) return;
+  const [g1, g2] = d.groups;
+  if (g1.type == "info" || g2.type == "info" || g1.type == "population" && g2.type == "population") {
+    const i = self.state.config.snvindel.details.groupTestMethods.findIndex(
+      (i2) => i2.name == "Allele frequency difference"
+    );
+    if (i == -1) throw "Allele frequency difference not found";
+    d.groupTestMethodsIdx = i;
+  } else {
+  }
+}
+function renderFacetTable(self, facet, div) {
+  const assayset = /* @__PURE__ */ new Set(), sampleset = /* @__PURE__ */ new Set();
+  for (const t of facet.tracks) {
+    if (t.assay) assayset.add(t.assay);
+    if (t.sample) sampleset.add(t.sample);
+  }
+  const sampleLst = [...sampleset];
+  const assayLst = [...assayset];
+  const columns = [{ label: "Sample" }];
+  for (const assay of assayLst) {
+    columns.push({
+      label: assay,
+      fillCell: (td, si) => {
+        const tklst = facet.tracks.filter((i) => i.assay == assay && i.sample == sampleLst[si]);
+        if (tklst.length == 0) return;
+        td.append("div").attr("class", "sja_clbtext").style("text-align", "center").text(tklst.length).on("click", (event) => {
+          groupTip.clear().showunder(event.target);
+          const table = groupTip.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(self.state.config.trackLst.activeTracks.includes(tk.name) ? "SHOWN" : "");
+            const td2 = tr.append("td").attr("class", "sja_menuoption").text(tk.name).on("click", () => {
+              let newActiveTracks, newRemoveTracks;
+              if (self.state.config.trackLst.activeTracks.includes(tk.name)) {
+                td1.text("");
+                newActiveTracks = self.state.config.trackLst.activeTracks.filter((n) => n != tk.name);
+                newRemoveTracks = [tk.name];
+              } else {
+                td1.text("SHOWN");
+                newActiveTracks = structuredClone(self.state.config.trackLst.activeTracks);
+                newActiveTracks.push(tk.name);
+              }
+              self.app.dispatch({
+                type: "plot_edit",
+                id: self.id,
+                config: {
+                  trackLst: {
+                    activeTracks: newActiveTracks,
+                    removeTracks: newRemoveTracks
+                  }
+                }
+              });
+            });
+          }
+        });
+      }
+    });
+  }
+  const rows = [];
+  for (const sample of sampleLst) {
+    const row = [{ value: sample }];
+    for (let i = 0; i < assayLst.length; i++) {
+      row.push({});
+    }
+    rows.push(row);
+  }
+  renderTable({
+    columns,
+    rows,
+    div
+  });
+}
+
+export {
+  gbControlsInit,
+  mayUpdateGroupTestMethodsIdx
+};
+//# sourceMappingURL=chunk-NNDNVBTX.js.map

package/dist/chunk-OGTHZVXJ.js

@@ -0,0 +1,40 @@
+import {
+  TwRouter,
+  routedTermTypes
+} from "./chunk-5GYHGTRN.js";
+
+// plots/PlotBase.ts
+var PlotBase = class {
+  constructor(opts, plotApi) {
+    this.dom = {};
+    this.components = {};
+    if (plotApi) this.api = plotApi;
+    this.opts = opts;
+    this.id = opts.id;
+    this.app = opts.app;
+  }
+  async getMutableConfig() {
+    const config = structuredClone(this.state.config);
+    if (!this.configTermKeys) return config;
+    const opts = {
+      vocabApi: this.app.vocabApi
+    };
+    for (const key of this.configTermKeys) {
+      const value = config[key];
+      if (!value) continue;
+      if (Array.isArray(value)) {
+        for (const [i, tw] of value.entries()) {
+          if (routedTermTypes.has(tw.term?.type)) config[key][i] = TwRouter.init(tw, opts);
+        }
+      } else if (routedTermTypes.has(value.term?.type)) {
+        config[key] = await TwRouter.initRaw(value, opts);
+      }
+    }
+    return config;
+  }
+};
+
+export {
+  PlotBase
+};
+//# sourceMappingURL=chunk-OGTHZVXJ.js.map