@sjcrh/proteinpaint-client 2.166.0 → 2.167.1

package/dist/chunk-GBS5I24E.js

@@ -1,1706 +0,0 @@
-import {
-  barsRenderer
-} from "./chunk-K7LZ77GD.js";
-import {
-  bars_settings_default
-} from "./chunk-4WA2H5DE.js";
-import {
-  addNewGroup,
-  getFilter,
-  getSamplelstFilter,
-  getSamplelstTW,
-  rebaseGroupFilter
-} from "./chunk-N5VBIEH5.js";
-import {
-  PlotBase,
-  defaultUiLabels
-} from "./chunk-I2GCD26Y.js";
-import {
-  controlsInit,
-  renderTerm1Label,
-  term0_term2_defaultQ
-} from "./chunk-CZTC4MTE.js";
-import {
-  DownloadMenu,
-  fillTermWrapper,
-  filterJoin,
-  findItemByTermId,
-  getCombinedTermFilter,
-  getFilterItemByTag,
-  htmlLegend,
-  renderTable
-} from "./chunk-UT6W4ZZL.js";
-import {
-  isNumericTerm
-} from "./chunk-RYRCMHYR.js";
-import {
-  dt2label,
-  getColors,
-  mclass,
-  plotColor
-} from "./chunk-ECKWM4HB.js";
-import {
-  Menu
-} from "./chunk-NXOWHUR4.js";
-import {
-  copyMerge,
-  deepEqual,
-  getCompInit
-} from "./chunk-FYTZCTJC.js";
-import {
-  roundValueAuto
-} from "./chunk-5OHXYXLD.js";
-import {
-  rgb
-} from "./chunk-OMR2DT66.js";
-import {
-  create_default,
-  select_default
-} from "./chunk-NDWTN4U5.js";
-
-// plots/barchart.js
-var Barchart = class _Barchart extends PlotBase {
-  static type = "barchart";
-  constructor(opts) {
-    super(opts);
-    this.type = _Barchart.type;
-  }
-  //freeze the api of this class. don't want embedder functions to modify it.
-  preApiFreeze(api) {
-    api.download = this.download;
-    api.getChartImages = () => this.getChartImages();
-  }
-  async init(appState) {
-    const opts = this.opts;
-    const controls = this.opts.controls ? null : opts.holder.append("div");
-    const holder = opts.controls ? opts.holder : opts.holder.append("div");
-    this.dom = {
-      loadingDiv: holder.append("div").style("display", "none").style("padding", "24px").html("Loading ..."),
-      header: opts.header,
-      controls,
-      holder,
-      banner: holder.append("div").style("display", "none").style("text-align", "center").style("padding", "24px").style("font-size", "16px").style("color", "#aaa"),
-      barDiv: holder.append("div").style("display", "flex").style("flex-direction", "row").style("flex-wrap", "wrap").style("max-width", "100vw"),
-      legendDiv: holder.append("div").style("margin", "5px 5px 15px 5px")
-    };
-    if (this.dom.header) this.dom.header.html("Barchart");
-    this.settings = JSON.parse(bars_settings_default);
-    setRenderers(this);
-    setInteractivity(this);
-    this.renderers = {};
-    this.legendRenderer = htmlLegend(
-      this.dom.legendDiv,
-      {
-        settings: {
-          legendOrientation: "vertical"
-        },
-        handlers: this.handlers
-      },
-      this.dom.barDiv
-    );
-    this.controls = {};
-    this.term2toColor = {};
-    if (this.opts.bar_click_override) {
-    } else if (!this.opts.bar_click_opts) {
-      this.opts.bar_click_opts = ["hide_bar"];
-      if (this.app.getState().nav.header_mode === "with_tabs") this.opts.bar_click_opts.push("add_filter", "add_group");
-    }
-  }
-  async setControls() {
-    const state = this.state;
-    const controlLabels = state.config.controlLabels;
-    if (!controlLabels) throw "controls labels not found";
-    this.dom.controls.selectAll("*").remove();
-    if (this.opts.controls) {
-      this.opts.controls.on("downloadClick.barchart", this.download);
-    } else {
-      this.dom.holder.attr("class", "pp-termdb-plot-viz").style("display", "inline-block").style("min-width", "300px");
-      const inputs = [
-        {
-          type: "term",
-          configKey: "term",
-          chartType: "barchart",
-          usecase: { target: "barchart", detail: "term" },
-          label: controlLabels.term1?.label || renderTerm1Label,
-          vocabApi: this.app.vocabApi,
-          menuOptions: "edit",
-          defaultQ4fillTW: { geneVariant: { type: "custom-groupset" } },
-          getBodyParams: () => {
-            const tw = this.config["term"];
-            if (!tw) return { skip_categories: true };
-            if (tw.term.categories) return { categories: tw.term.categories };
-            return {};
-          }
-        },
-        {
-          type: "term",
-          configKey: "term2",
-          chartType: "barchart",
-          usecase: { target: "barchart", detail: "term2" },
-          title: controlLabels.term2.title || controlLabels.term2.label,
-          label: controlLabels.term2.label,
-          vocabApi: this.app.vocabApi,
-          numericEditMenuVersion: this.opts.numericEditMenuVersion,
-          defaultQ4fillTW: term0_term2_defaultQ,
-          // overlay option should always be visible, but must convert unit from log to abs
-          // when an overlay is added
-          //getDisplayStyle: () => (this.settings.unit == 'log' ? 'none' : ''),
-          processConfig: (config) => {
-            const s = this.state.config.settings.barchart;
-            if (!config.settings) config.settings = { barchart: {} };
-            if (config.term2 && s.unit == "log") config.settings.barchart.unit = "abs";
-            if (!config.term2 && s.unit == "pct") config.settings.barchart.unit = "abs";
-          },
-          getBodyParams: () => {
-            const tw = this.config["term2"];
-            if (!tw) return { skip_categories: true };
-            if (tw.term.categories) return { categories: tw.term.categories };
-            return {};
-          }
-        },
-        {
-          type: "term",
-          configKey: "term0",
-          chartType: "barchart",
-          usecase: { target: "barchart", detail: "term0" },
-          title: controlLabels.term0.title || controlLabels.term0.label,
-          label: controlLabels.term0.label,
-          vocabApi: this.app.vocabApi,
-          numericEditMenuVersion: this.opts.numericEditMenuVersion,
-          defaultQ4fillTW: term0_term2_defaultQ,
-          getBodyParams: () => {
-            const tw = this.config["term0"];
-            if (!tw) return { skip_categories: true };
-            if (tw.term.categories) return { categories: tw.term.categories };
-            return {};
-          }
-        },
-        {
-          label: "Bar orientation",
-          type: "radio",
-          chartType: "barchart",
-          settingsKey: "orientation",
-          options: [
-            { label: "Vertical", value: "vertical" },
-            { label: "Horizontal", value: "horizontal" }
-          ]
-        },
-        {
-          label: "Scale",
-          type: "radio",
-          chartType: "barchart",
-          settingsKey: "unit",
-          options: [
-            { label: "Linear", value: "abs" },
-            /** Option not available when term2 is present:
-             * 1. The scale for the plot renders incorrectly
-             * 2. The bars do not appear to be rendering correctly as a result
-             * TODOs: Investigate the cause of the rendering issue
-             */
-            {
-              label: "Log",
-              value: "log",
-              getDisplayStyle: (plot, computedDisplay = "inline-block") => plot.term2 ? "none" : computedDisplay
-            },
-            {
-              label: "Proportion",
-              value: "pct",
-              getDisplayStyle: (plot, computedDisplay = "inline-block") => plot.term2 ? computedDisplay : "none"
-            }
-          ]
-        },
-        {
-          label: "Multicolor bars",
-          title: "Color bars",
-          type: "checkbox",
-          chartType: "barchart",
-          settingsKey: "colorBars",
-          boxLabel: "Yes",
-          getDisplayStyle: (plot) => plot.term2 ? "none" : "table-row"
-        },
-        {
-          label: "Deduplicate",
-          title: "Use separate bars samples that has multiple values or belong to multiple groups",
-          type: "checkbox",
-          chartType: "barchart",
-          settingsKey: "dedup",
-          boxLabel: "Yes",
-          getDisplayStyle: (plot) => this.chartsData?.charts.find(
-            (c) => c.dedupedSerieses?.length && !deepEqual(
-              c.serieses.map((s) => s.seriesId),
-              c.dedupedSerieses.map((s) => s.seriesId)
-            )
-          ) ? "table-row" : "none"
-        }
-      ];
-      if (isNumericTerm(this.config.term.term))
-        inputs.push({
-          label: "Show stats",
-          type: "checkbox",
-          chartType: "barchart",
-          settingsKey: "showStats",
-          boxLabel: "Yes"
-        });
-      if (!this.config.term2)
-        inputs.push({
-          label: "Show percent",
-          type: "checkbox",
-          chartType: "barchart",
-          settingsKey: "showPercent",
-          boxLabel: "Yes"
-        });
-      else
-        inputs.push({
-          label: "Show association tests",
-          type: "checkbox",
-          chartType: "barchart",
-          settingsKey: "showAssociationTests",
-          boxLabel: "Yes"
-        });
-      if (state.config.settings.barchart.colorBars && (state.config.term2 || state.config.term0))
-        inputs.splice(7, 0, {
-          label: "Assign colors to",
-          title: `Colors bars either considering all the categories or the present categories. If there are many categories and only few are present the present choice will provide more contrast.`,
-          type: "radio",
-          chartType: "barchart",
-          settingsKey: "colorUsing",
-          options: [
-            { label: "All values", value: "all" },
-            { label: "Present values", value: "present" }
-          ]
-        });
-      else if (!state.config.settings.barchart.colorBars)
-        inputs.splice(6, 0, {
-          label: "Default color",
-          title: "Default color for bars when there is no overlay",
-          type: "color",
-          chartType: "barchart",
-          settingsKey: "defaultColor"
-          //getDisplayStyle: plot => (plot.settings.barchart.colorBars || plot.term2 ? 'none' : 'table-row')
-        });
-      const multipleTestingCorrection = this.app.getState().termdbConfig.multipleTestingCorrection;
-      if (multipleTestingCorrection) {
-        inputs.push({
-          label: "Asterisks",
-          boxLabel: "Visible",
-          type: "checkbox",
-          chartType: "barchart",
-          settingsKey: "asterisksVisible",
-          title: "Display the asterisks"
-        });
-        const mtcMethod = multipleTestingCorrection.method;
-        if (!mtcMethod) throw "no multiple testing correction method specified";
-        inputs.push({
-          label: `Multiple testing correction (${mtcMethod == "bon" ? "Bonferroni" : mtcMethod})`,
-          boxLabel: "",
-          type: "checkbox",
-          chartType: "barchart",
-          settingsKey: "multiTestingCorr",
-          title: `Perform multiple testing correction (${mtcMethod == "bon" ? "Bonferroni" : mtcMethod})`
-        });
-      }
-      this.components = {
-        controls: await controlsInit({
-          app: this.app,
-          id: this.id,
-          holder: this.dom.controls.style("display", "inline-block"),
-          inputs
-        })
-      };
-      this.components.controls.on("downloadClick.barchart", this.download);
-    }
-  }
-  reactsTo(action) {
-    if (action.type.startsWith("plot_")) {
-      return (action.id === this.id || action.id == this.parentId) && (!action.config?.childType || action.config?.childType == this.type);
-    }
-    return true;
-  }
-  getState(appState) {
-    const config = appState.plots.find((p) => p.id === this.id);
-    if (!config) {
-      throw `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`;
-    }
-    const parentConfig = this.parentId && appState.plots.find((p) => p.id === this.parentId);
-    const termfilter = getCombinedTermFilter(appState, config.filter || parentConfig?.filter);
-    return {
-      nav: {
-        header_mode: appState.nav.header_mode
-      },
-      termfilter,
-      config: Object.assign({}, config, {
-        settings: {
-          barchart: config.settings.barchart,
-          common: config.settings.common
-        },
-        displaySampleIds: appState.termdbConfig.displaySampleIds && this.app.vocabApi.hasVerifiedToken()
-      }),
-      multipleTestingCorrection: appState.termdbConfig.multipleTestingCorrection,
-      bar_click_menu: appState.bar_click_menu || {},
-      groups: rebaseGroupFilter(appState)
-    };
-  }
-  async main() {
-    const c = this.state.config;
-    if (c.chartType != this.type && c.childType != this.type) return;
-    try {
-      this.config = structuredClone(c);
-      if (!this.currServerData) this.dom.barDiv.style("max-width", window.innerWidth + "px");
-      this.prevConfig = this.config || {};
-      if (this.dom.header)
-        this.dom.header.html(
-          this.config.term.term.name + ` <span style="opacity:.6;font-size:.7em;margin-left:10px;">BARCHART</span>`
-        );
-      this.toggleLoadingDiv();
-      const reqOpts = this.getDataRequestOpts();
-      await this.getDescrStats();
-      await this.setControls();
-      const results = await this.app.vocabApi.getNestedChartSeriesData(reqOpts, this.api.getAbortSignal());
-      if (results.error) throw results;
-      const data = results.data;
-      this.charts = data.charts;
-      this.sampleType = results.sampleType;
-      this.bins = results.bins;
-      if (results.chartid2dtterm) this.chartid2dtterm = results.chartid2dtterm;
-      this.toggleLoadingDiv("none");
-      this.app.vocabApi.syncTermData(this.config, data, this.prevConfig);
-      this.currServerData = data;
-      if (this.currServerData.refs && this.currServerData.refs.q) {
-        for (const q of this.currServerData.refs.q) {
-          if (q.error) throw q.error;
-        }
-      }
-      this.term1toColor = {};
-      this.term2toColor = {};
-      this.updateSettings(this.config);
-      for (const chart of data.charts) {
-        const categoriesPerSerie = chart.serieses.map((s) => s.data.length);
-        const numColors = this.config.term2 ? Math.max(...categoriesPerSerie) : chart.serieses.length;
-        chart.colorScale = getColors(numColors);
-      }
-      this.chartsData = this.processData(this.currServerData);
-      this.render();
-      this.dom.barDiv.style("display", "flex");
-    } catch (e) {
-      if (this.app.isAbortError(e)) return;
-      this.toggleLoadingDiv("none");
-      this.dom.barDiv.style("display", "none");
-      throw e;
-    }
-  }
-  // creates an opts object for the vocabApi.getNestedChartsData()
-  getDataRequestOpts() {
-    const c = this.config;
-    const opts = { term: c.term, filter: this.state.termfilter.filter };
-    if (this.state.termfilter.filter0) opts.filter0 = this.state.termfilter.filter0;
-    if (c.term2) opts.term2 = c.term2;
-    if (c.term0) opts.term0 = c.term0;
-    return opts;
-  }
-  async getDescrStats() {
-    const terms = [this.config.term];
-    if (this.config.term2) terms.push(this.config.term2);
-    if (this.config.term0) terms.push(this.config.term0);
-    for (const t of terms) {
-      if (isNumericTerm(t.term)) {
-        const data = await this.app.vocabApi.getDescrStats(t, this.state.termfilter);
-        if (data.error) throw data.error;
-        t.q.descrStats = data;
-      }
-    }
-  }
-  updateSettings(config) {
-    if (!config) return;
-    const obj = this.state;
-    const settings = {
-      term0: config.term0 ? config.term0.term.id : "",
-      // convenient reference to the term id
-      term1: config.term.term.id,
-      // convenient reference to the term2 id
-      term2: config.term2 ? config.term2.term.id : "",
-      unit: config.settings.barchart.unit,
-      orientation: config.settings.barchart.orientation,
-      asterisksVisible: config.settings.barchart.asterisksVisible,
-      multiTestingCorr: config.settings.barchart.multiTestingCorr,
-      defaultColor: config.settings.barchart.defaultColor,
-      colorBars: config.settings.barchart.colorBars,
-      dedup: config.settings.barchart.dedup,
-      // normalize bar thickness regardless of orientation
-      colw: config.settings.common.barwidth,
-      rowh: config.settings.common.barwidth,
-      colspace: config.settings.common.barspace,
-      rowspace: config.settings.common.barspace,
-      colorUsing: config.settings.barchart.colorUsing,
-      showStats: config.settings.barchart.showStats,
-      showAssociationTests: config.settings.barchart.showAssociationTests
-    };
-    this.setExclude(this.config.term, this.config.term2);
-    Object.assign(this.settings, settings, this.currServerData.refs || {}, {
-      exclude: this.settings.exclude
-    });
-    this.settings.cols = this.settings.dedup ? this.currServerData.refs.dedupCols : this.currServerData.refs.cols;
-    this.settings.numCharts = this.currServerData.charts ? this.currServerData.charts.length : 0;
-    if (!config.term2 && this.settings.unit == "pct") {
-      this.settings.unit = "abs";
-    }
-  }
-  mayResetHidden(term, term2, term0) {
-    const combinedTermIds = (term && term.term.id) + ";;" + (term2 && term2.term.id) + ";;" + (term0 && term0.term.id);
-    if (combinedTermIds === this.currCombinedTermIds) return;
-    for (const chart of this.currServerData.charts) {
-      if (term.q && term.q.hiddenValues) {
-        this.mayEditHiddenValues(term, chart.serieses.length, "term");
-      }
-      if (term2 && term2.q && term2.q.hiddenValues) {
-        for (const series of chart.serieses) {
-          this.mayEditHiddenValues(term2, series.data.length, "term2");
-        }
-      }
-    }
-    this.currCombinedTermIds = combinedTermIds;
-  }
-  mayEditHiddenValues(term, numAvailable, termNum) {
-    const numHidden = Object.keys(term.q.hiddenValues).filter((key) => term.q.hiddenValues[key]).length;
-    if (numHidden < numAvailable) return;
-    for (const key in term.q.hiddenValues) {
-      if (!term.q.hiddenValues[key]) return;
-      delete term.q.hiddenValues[key];
-    }
-    this.app.save({
-      type: "plot_edit",
-      id: this.id,
-      config: {
-        [termNum]: term
-      }
-    });
-  }
-  setExclude(term, term2) {
-    this.settings.exclude.cols = Object.keys(term.q?.hiddenValues || {}).filter((id) => term.q.hiddenValues[id]).map((id) => {
-      return term.term.type == "categorical" ? id : this.settings.cols?.includes(id) ? id : term.term.values[id]?.label ? term.term.values[id].label : id;
-    });
-    this.settings.exclude.rows = !term2?.q?.hiddenValues ? [] : Object.keys(term2.q.hiddenValues).filter((id) => term2.q.hiddenValues[id]).map(
-      (id) => term2.term.type == "categorical" ? id : this.settings.rows?.includes(id) ? id : term2.term.values[id]?.label ? term2.term.values[id].label : id
-    );
-  }
-  processData(chartsData) {
-    this.seriesOrder = this.setMaxVisibleTotals(chartsData);
-    if (!chartsData.charts.length) {
-      this.seriesOrder = [];
-    } else if (chartsData.refs.useColOrder) {
-      this.seriesOrder = this.settings.cols;
-    }
-    const rows = chartsData.refs.rows;
-    this.barSorter = (a, b) => this.seriesOrder.indexOf(a) - this.seriesOrder.indexOf(b);
-    this.overlaySorter = chartsData.refs.useRowOrder ? (a, b) => rows.indexOf(a.dataId) - rows.indexOf(b.dataId) : (a, b) => this.totalsByDataId[b.dataId] > this.totalsByDataId[a.dataId] ? 1 : this.totalsByDataId[b.dataId] < this.totalsByDataId[a.dataId] ? -1 : a.dataId < b.dataId ? -1 : 1;
-    this.visibleCharts = chartsData.charts.filter((chart) => chart.visibleSerieses.length);
-    const t1 = this.config.term;
-    const t2 = this.config.term2;
-    const chartsTests = chartsData.tests;
-    for (const chartId in chartsTests) {
-      const chartTests = chartsTests[chartId];
-      for (const t1c of chartTests) {
-        const t1label = t1.term.values && t1c.term1comparison in t1.term.values ? t1.term.values[t1c.term1comparison].label : t1c.term1comparison;
-        t1c.term1Label = t1label;
-        for (const t2t of t1c.term2tests) {
-          const t2label = t2.term.values && t2t.term2id in t2.term.values ? t2.term.values[t2t.term2id].label : t2t.term2id;
-          t2t.term2Label = t2label;
-        }
-      }
-    }
-    return chartsData;
-  }
-  setMaxVisibleTotals(chartsData) {
-    this.totalsByDataId = {};
-    const t1 = this.config.term;
-    const t2 = this.config.term2;
-    const visibleTotalsByChartSeriesId = {};
-    let maxVisibleAcrossCharts = 0;
-    for (const chart of chartsData.charts) {
-      if (!chart.settings) chart.settings = JSON.parse(bars_settings_default);
-      Object.assign(chart.settings, this.settings);
-      chart.visibleTotal = 0;
-      const serieses = this.settings.dedup ? chart.dedupedSerieses : chart.serieses;
-      chart.visibleSerieses = serieses.filter((series) => {
-        if (chart.settings.exclude.cols.includes(series.seriesId)) return false;
-        series.visibleData = series.data.filter((d) => !chart.settings.exclude.rows.includes(d.dataId));
-        series.visibleTotal = series.visibleData.reduce((sum, a) => sum + a.total, 0);
-        if (!series.visibleTotal) return false;
-        chart.visibleTotal += series.visibleTotal;
-        if (!(series.seriesId in visibleTotalsByChartSeriesId))
-          visibleTotalsByChartSeriesId[series.seriesId] = series.visibleTotal;
-        for (const data of series.data) {
-          data.seriesId = series.seriesId;
-          if (t1.term.type == "geneVariant" && t1.q.type == "values" || t2?.term.type == "geneVariant" && t2?.q.type == "values") {
-            if (!(data.dataId in this.totalsByDataId)) {
-              this.totalsByDataId[data.dataId] = {};
-            }
-            this.totalsByDataId[data.dataId][chart.chartId] = this.totalsByDataId[data.dataId][chart.chartId] ? this.totalsByDataId[data.dataId][chart.chartId] + data.total : 0 + data.total;
-          } else {
-            if (!(data.dataId in this.totalsByDataId)) {
-              this.totalsByDataId[data.dataId] = 0;
-            }
-            this.totalsByDataId[data.dataId] += data.total;
-          }
-        }
-        return true;
-      });
-      chart.settings.colLabels = chart.visibleSerieses.map((series) => {
-        const id = series.seriesId;
-        const label = t1.term.values && id in t1.term.values ? t1.term.values[id].label : id;
-        const af = series && "AF" in series ? ", AF=" + series.AF : "";
-        const ntotal = t2 && t2.term.type == "condition" && t2.q.value_by_computable_grade ? "" : `, n=${series.visibleTotal}`;
-        return {
-          id,
-          label: label + af + ntotal
-        };
-      });
-      chart.maxVisibleSeriesTotal = chart.visibleSerieses.reduce((max, series) => {
-        return series.visibleTotal > max ? series.visibleTotal : max;
-      }, 0);
-      if (chart.maxVisibleSeriesTotal > maxVisibleAcrossCharts) {
-        maxVisibleAcrossCharts = chart.maxVisibleSeriesTotal;
-      }
-    }
-    for (const chart of chartsData.charts) {
-      chart.maxVisibleAcrossCharts = maxVisibleAcrossCharts;
-    }
-    return Object.keys(visibleTotalsByChartSeriesId).sort(
-      (a, b) => visibleTotalsByChartSeriesId[b] - visibleTotalsByChartSeriesId[a]
-    );
-  }
-  sortStacking(series, chart, chartsData) {
-    this.term1toColor[series.seriesId] = this.settings.colorBars ? this.getColor(chart, this.config.term, series.seriesId, this.bins?.[1]) : this.settings.defaultColor;
-    series.visibleData.sort(this.overlaySorter);
-    let seriesLogTotal = 0;
-    for (const result of series.visibleData) {
-      result.colgrp = "-";
-      result.rowgrp = "-";
-      result.chartId = chart.chartId;
-      result.seriesId = series.seriesId;
-      if (chartsData.tests) {
-        result.groupPvalues = chartsData.tests[chart.chartId].find((x) => x.term1comparison === series.seriesId);
-      }
-      result.seriesTotal = series.total;
-      result.chartTotal = chart.visibleTotal;
-      result.logTotal = Math.log10(result.total);
-      seriesLogTotal += result.logTotal;
-      this.setTerm2Color(chart, result);
-      result.color = this.term2toColor[result.dataId] || this.term1toColor[series.seriesId];
-    }
-    if (seriesLogTotal > chart.maxSeriesLogTotal) {
-      chart.maxSeriesLogTotal = seriesLogTotal;
-    }
-    for (const result of series.data) {
-      if (result.color) continue;
-      this.setTerm2Color(chart, result);
-      result.color = this.term2toColor[result.dataId] || this.term1toColor[series.seriesId];
-    }
-  }
-  setTerm2Color(chart, result) {
-    if (!this.config.term2) return;
-    this.term2toColor[result.dataId] = this.getColor(chart, this.config.term2, result.dataId, this.bins?.[2]);
-  }
-  getColor(chart, t, label, bins) {
-    if (!t.term) return;
-    if (t.q.type == "predefined-groupset" || t.q.type == "custom-groupset") {
-      const groupset = t.q.type == "predefined-groupset" ? t.term.groupsetting.lst[t.q.predefined_groupset_idx] : t.q.customset;
-      if (!groupset) throw "groupset is missing";
-      const group = groupset.groups.find((g) => g.name == label);
-      if (group?.color) return group.color;
-    }
-    if (t.term.values && this.settings.colorUsing == "all") {
-      for (const [key, v] of Object.entries(t.term.values)) {
-        if (!v.color) continue;
-        if (key === label) return v.color;
-        if (v.label === label) return v.color;
-      }
-    }
-    const bin = bins?.find((bin2) => bin2.label == label);
-    if (bin?.color) return bin.color;
-    if (t.term.type == "geneVariant" && t.q.type == "values") return this.getMutationColor(label);
-    return rgb(chart.colorScale(label)).toString();
-  }
-  // should move this outside of setTerm2Color(),
-  // otherwise it will get *** recreated on every call *** to setTerm2Color()
-  getMutationColor(label) {
-    for (const mc of Object.values(mclass)) if (mc.label === label && mc.color) return mc.color;
-    for (const key in mclass) {
-      if (mclass[key].label === label && mclass[key].color) return mclass[key].color;
-    }
-  }
-  /*
-    when term1 or term2 is a geneVariant term, return legendGrps: 
-  	[ 
-  		[
-  			{
-  				name: "...", 
-  				items: [...]
-  			},
-  			...
-  		],
-  		... 
-  	]
-  */
-  getLegendGrps() {
-    const t1 = this.config.term;
-    const t2 = this.config.term2;
-    if (t1.term.type == "geneVariant" && t1.q.type == "values" || t2?.term.type == "geneVariant" && t2?.q.type == "values") {
-      const legendGrps = [];
-      for (const chart of this.chartsData.charts) {
-        legendGrps.push(this.getOneLegendGrps(chart));
-      }
-      return legendGrps;
-    }
-    return this.getOneLegendGrps();
-  }
-  //Used by getLegendGrps to get one legendGrps
-  getOneLegendGrps(chart) {
-    const legendGrps = [];
-    const s = this.settings;
-    const t1 = this.config.term;
-    const t2 = this.config.term2;
-    const headingStyle = "color: #aaa; font-weight: 400";
-    if (t1.q.descrStats && s.showStats) {
-      const items = Object.values(t1.q.descrStats).map((stat) => {
-        return {
-          text: `${stat.label}: ${stat.value}`,
-          noIcon: true
-        };
-      });
-      const title = t2 ? `Descriptive statistics: ${t1.term.name}` : "Descriptive statistics";
-      const name = `<span style="${headingStyle}">${title}</span>`;
-      legendGrps.push({ name, items });
-    }
-    if (t2?.q.descrStats && s.showAssociationTests) {
-      const items = Object.values(t2.q.descrStats).map((stat) => {
-        return {
-          text: `${stat.label}: ${stat.value}`,
-          noIcon: true
-        };
-      });
-      const title = `Descriptive statistics: ${t2.term.name}`;
-      const name = `<span style="${headingStyle}">${title}</span>`;
-      legendGrps.push({ name, items });
-    }
-    if (s.cols && s.exclude.cols.length) {
-      const reducer = (sum, b) => sum + b.total;
-      const items = s.exclude.cols.filter((collabel) => s.cols.includes(collabel)).flatMap((collabel) => {
-        const filter = (c) => c.seriesId == collabel;
-        const total = t2?.term?.type == "condition" ? 0 : t1.term.type == "geneVariant" && t1.q.type == "values" || t2?.term.type == "geneVariant" && t2?.q.type == "values" ? chart.serieses.filter(filter).reduce(reducer, 0) : this.currServerData.charts.reduce((sum, chart2) => {
-          return sum + chart2.serieses.filter(filter).reduce(reducer, 0);
-        }, 0);
-        if (!total && !t2?.term?.type) return [];
-        const label = t1.term.values && collabel in t1.term.values ? t1.term.values[collabel].label : collabel;
-        const ntotal = total ? ", n=" + total : "";
-        return [
-          {
-            id: collabel,
-            text: label + ntotal,
-            color: "#fff",
-            textColor: "#000",
-            border: "1px solid #333",
-            //inset: total ? "n="+total : '',
-            noIcon: true,
-            type: "col",
-            isHidden: true,
-            hiddenOpacity: 1
-          }
-        ];
-      }).sort(this.barSorter);
-      if (items.length) {
-        const name = t2 ? t1.term.name : "Other categories";
-        legendGrps.push({
-          name: `<span style="${headingStyle}">${name}</span>`,
-          items
-        });
-      }
-    }
-    if (s.rows && !s.hidelegend && t2 && this.term2toColor) {
-      const value_by_label = t2.term.type != "condition" || !t2.q ? "" : t2.q.value_by_max_grade ? "max. grade" : t2.q.value_by_most_recent ? "most recent" : "";
-      legendGrps.push({
-        name: `<span style="${headingStyle}">` + (t2.term.type == "geneVariant" ? "" : t2.term.name) + (value_by_label ? ", " + value_by_label : "") + "</span>",
-        items: s.rows.flatMap((d) => {
-          const total = chart ? this.totalsByDataId[d]?.[chart.chartId] : this.totalsByDataId[d];
-          if (!total) return [];
-          const ntotal = total ? ", n=" + total : "";
-          const label = t2.term.values && d in t2.term.values ? t2.term.values[d].label : d;
-          return [
-            {
-              dataId: d,
-              text: label + ntotal,
-              color: this.term2toColor[d],
-              type: "row",
-              isHidden: s.exclude.rows.includes(d)
-            }
-          ];
-        }).sort(this.overlaySorter)
-      });
-    }
-    if (t2 && this.state.multipleTestingCorrection) {
-      let testNum = 0;
-      for (const chartId in this.chartsData.tests) {
-        testNum += this.chartsData.tests[chartId].reduce((a, b) => a + b.term2tests.filter((a2) => !a2.skipped).length, 0);
-      }
-      const items = testNum > 1 && this.state.config.settings.barchart.multiTestingCorr ? [{ text: `* p-value < (0.05 / ${testNum} tests)`, noEditColor: true }] : [{ text: `* p-value < 0.05`, noEditColor: true }];
-      legendGrps.push({
-        name: `<span style="${headingStyle}">&nbsp;</span>`,
-        items
-      });
-    }
-    return legendGrps;
-  }
-  // helper so that 'Loading...' does not flash when not needed
-  toggleLoadingDiv(display = "") {
-    if (display != "none") {
-      this.dom.loadingDiv.style("opacity", 0).style("display", display).transition().duration("loadingWait" in this ? this.loadingWait : 0).style("opacity", 1);
-    } else {
-      this.dom.loadingDiv.style("display", display);
-    }
-    this.loadingWait = 1e3;
-  }
-};
-var barInit = getCompInit(Barchart);
-var componentInit = barInit;
-function setRenderers(self) {
-  self.render = function() {
-    const charts = self.dom.barDiv.selectAll(".pp-sbar-div").data(self.visibleCharts, (chart) => chart.chartId);
-    charts.exit().each(self.exitChart);
-    charts.each(self.updateChart);
-    charts.enter().append("div").each(self.addChart);
-    self.dom.holder.selectAll(".pp-chart-title").style("display", self.visibleCharts.length < 2 ? "none" : "block");
-    const grps = self.getLegendGrps();
-    self.legendRenderer(grps);
-    if (!self.visibleCharts.length) {
-      const clickLegendMessage = self.settings.exclude.cols.length || self.settings.exclude.rows.length ? `<br/><span>click on a legend label below to display the barchart</span>` : "";
-      self.dom.banner.html(`<span>No visible barchart data to render</span>${clickLegendMessage}`).style("display", "block");
-      self.dom.legendDiv.selectAll("*").remove();
-    } else {
-      self.dom.banner.text("").style("display", "none");
-    }
-  };
-  self.exitChart = function(chart) {
-    delete self.renderers[chart.chartId];
-    select_default(this).remove();
-  };
-  self.updateChart = function(chart) {
-    chart.settings.cols.sort(self.barSorter);
-    chart.maxAcrossCharts = self.chartsData.maxAcrossCharts;
-    chart.handlers = self.handlers;
-    chart.maxSeriesLogTotal = 0;
-    chart.visibleSerieses.forEach((series) => self.sortStacking(series, chart, self.chartsData));
-    self.renderers[chart.chartId] = barsRenderer(self, select_default(this));
-    self.renderers[chart.chartId](chart);
-    const div = select_default(this);
-    div.style("display", "inline-block");
-    div.append("div").attr("class", "pp-sbar-div-chartLengends").attr("data-testid", "sjpcb-bars-chartLengends").style("vertical-align", "top").style("margin", "10px 10px 10px 30px").style("display", "none");
-    if (self.chartsData.tests && self.chartsData.tests[chart.chartId] && self.config.settings.barchart.showAssociationTests) {
-      generatePvalueTable(chart, div);
-    }
-  };
-  self.addChart = function(chart, i) {
-    const div = select_default(this).attr("class", "pp-sbar-div").style("display", "inline-block").style("padding", "20px").style("vertical-align", "top");
-    self.renderers[chart.chartId] = barsRenderer(self, select_default(this));
-    chart.settings.cols.sort(self.barSorter);
-    chart.maxAcrossCharts = self.chartsData.maxAcrossCharts;
-    chart.handlers = self.handlers;
-    chart.maxSeriesLogTotal = 0;
-    chart.visibleSerieses.forEach((series) => self.sortStacking(series, chart, self.chartsData));
-    self.renderers[chart.chartId](chart);
-    div.append("div").attr("class", "pp-sbar-div-chartLengends").attr("data-testid", "sjpcb-bars-chartLengends").style("vertical-align", "top").style("margin", "10px 10px 10px 30px").style("display", "none");
-    if (self.chartsData.tests && self.chartsData.tests[chart.chartId] && self.config.settings.barchart.showAssociationTests) {
-      generatePvalueTable(chart, div);
-    }
-  };
-  function generatePvalueTable(chart, div) {
-    const holder = div.select(".pp-sbar-div-chartLengends").style("display", "inline-block").style("vertical-align", "top").style("text-align", "center").append("div");
-    self.chartsData.tests[chart.chartId].sort(function(a, b) {
-      return self.settings.cols.indexOf(a.term1comparison) - self.settings.cols.indexOf(b.term1comparison);
-    });
-    for (const t1c of self.chartsData.tests[chart.chartId]) {
-      t1c.term2tests.sort(function(a, b) {
-        return self.chartsData.refs.rows.indexOf(a.term2id) - self.chartsData.refs.rows.indexOf(b.term2id);
-      });
-    }
-    const columns = [
-      { label: "Row 1" },
-      { label: "Row 2" },
-      { label: "Column 1" },
-      { label: "Column 2" },
-      { label: "P-value" }
-    ];
-    const noSkipped = self.chartsData.tests[chart.chartId].every(
-      (term1) => term1.term2tests.every((term2) => !term2.skipped)
-    );
-    const rows = [];
-    const visibleTests = self.chartsData.tests[chart.chartId].filter(
-      (term1Data) => chart.visibleSerieses.some((visibleTerm1) => visibleTerm1.seriesId === term1Data.term1comparison)
-    );
-    for (const [index, term1] of visibleTests.entries()) {
-      if (visibleTests.length == 2 && index == 1) {
-        break;
-      }
-      const visibleTerm1Data = chart.visibleSerieses.find(
-        (visibleTerm1) => visibleTerm1.seriesId === term1.term1comparison
-      );
-      const visibleTerm2Data = term1.term2tests.filter(
-        (term2Data) => visibleTerm1Data.visibleData.some((visibleTerm2) => visibleTerm2.dataId === term2Data.term2id)
-      );
-      for (const [index2, term2] of visibleTerm2Data.entries()) {
-        if (chart.settings.rows.length - chart.settings.exclude.rows.length == 2 && index2 == 1) {
-          break;
-        }
-        let negateTerm2Label = negateTermLabel(term2.term2Label);
-        if (chart.settings.rows.length - chart.settings.exclude.rows.length == 2) {
-          const visibleTerm2CatsKeys = chart.settings.rows.filter((row) => !chart.settings.exclude.rows.includes(row));
-          const visibleTerm2Labels = visibleTerm2CatsKeys.map((catK) => self.config.term2?.term?.values?.[catK]?.label).filter((x) => x != void 0);
-          if (visibleTerm2Labels?.length == 2)
-            negateTerm2Label = visibleTerm2Labels[0] == term2.term2Label ? visibleTerm2Labels[1] : visibleTerm2Labels[0];
-        }
-        rows.push([
-          { value: `${term1.term1Label}` },
-          // when term1 has only 2 categories, Row2 would be the other category instead of "not Row1"
-          { value: visibleTests.length == 2 ? visibleTests[1].term1Label : negateTermLabel(term1.term1Label) },
-          { value: term2.term2Label },
-          { value: negateTerm2Label },
-          //if both chi-square and Fisher's exact tests were used. for the tests computed by Fisher's exact test, add a superscript letter 'a' after the pvalue.
-          {
-            html: term2.skipped ? "N/A" : term2.pvalue > 1e-4 ? roundValueAuto(Number(term2.pvalue)) : roundValueAuto(Number(term2.pvalue))
-          }
-        ]);
-      }
-    }
-    const title = holder.append("div").style("font-weight", "bold").style("padding-bottom", "0.5em").html("2x2 Association test (Fisher's exact test)").style("font-size", "0.9em");
-    const table = holder.append("div").style("font-size", "0.9em");
-    renderTable({
-      columns,
-      rows,
-      div: table,
-      showLines: false,
-      maxWidth: "70vw",
-      maxHeight: `${chart.svgh - 100}px`,
-      resize: true
-    });
-    table.append("div").style("margin-top", "10px").style("text-align", "left").style("font-size", "10px").style("font-weight", "normal").html(noSkipped ? "" : "N/A: association test skipped because of limited sample size <br>");
-  }
-}
-function setInteractivity(self) {
-  self.handlers = getHandlers(self);
-  self.getChartImages = function() {
-    const charts = [];
-    for (const chart of self.charts) {
-      const name = `${this.config.term.term.name}  ${chart.name ? chart.name : ""}`;
-      charts.push({ name, svg: chart.svg });
-    }
-    return charts;
-  };
-  self.download = function(event) {
-    const charts = self.getChartImages();
-    const dm = new DownloadMenu(charts, self.config.term.term.name);
-    dm.show(event.clientX, event.clientY);
-  };
-}
-function getDefaultBarSettings(app) {
-  return {
-    orientation: "horizontal",
-    unit: "abs",
-    overlay: "none",
-    divideBy: "none",
-    rowlabelw: 250,
-    asterisksVisible: app?.getState()?.termdbConfig?.multipleTestingCorrection ? true : false,
-    multiTestingCorr: app?.getState()?.termdbConfig?.multipleTestingCorrection?.applyByDefault ? true : false,
-    defaultColor: plotColor,
-    colorBars: false,
-    colorUsing: "all",
-    dedup: false,
-    showStats: true,
-    showAssociationTests: true,
-    showPercent: false
-  };
-}
-async function getPlotConfig(opts, app) {
-  if (!opts.term) throw "barchart getPlotConfig: opts.term{} missing";
-  try {
-    await fillTermWrapper(opts.term, app.vocabApi);
-    if (opts.term2) await fillTermWrapper(opts.term2, app.vocabApi);
-    if (opts.term0) await fillTermWrapper(opts.term0, app.vocabApi);
-  } catch (e) {
-    console.log("Error reading config: " + JSON.stringify(opts));
-    console.error(e);
-    throw `${e} [barchart getPlotConfig()]`;
-  }
-  const config = {
-    id: opts.term.term.id,
-    controlLabels: Object.assign({}, defaultUiLabels, app.vocabApi.termdbConfig.uiLabels || {}),
-    settings: {
-      controls: {
-        term2: null,
-        // the previous overlay value may be displayed as a convenience for toggling
-        term0: null
-      },
-      common: {
-        use_logscale: false,
-        // flag for y-axis scale type, 0=linear, 1=log
-        use_percentage: false,
-        barheight: 300,
-        // maximum bar length
-        barwidth: 20,
-        // bar thickness
-        barspace: 2
-        // space between two bars
-      },
-      barchart: getDefaultBarSettings(app)
-    }
-  };
-  return copyMerge(config, opts);
-}
-function negateTermLabel(termLabel) {
-  const termLabelStr = String(termLabel);
-  if (termLabelStr.toUpperCase().startsWith("NOT ")) {
-    return termLabelStr.substring(4);
-  } else {
-    return "not " + termLabelStr;
-  }
-}
-
-// plots/barchart.events.js
-function getHandlers(self) {
-  const tip = new Menu({ padding: "5px" });
-  self.dom.tip = tip;
-  const s = self.settings;
-  return {
-    chart: {
-      title(chart) {
-        if (!self.config.term0) return chart.chartId;
-        return self.config.term0.term.values && chart.chartId in self.config.term0.term.values ? self.config.term0.term.values[chart.chartId].label : chart.chartId;
-      }
-    },
-    svg: {
-      mouseout: () => {
-        tip.hide();
-      }
-    },
-    series: {
-      mouseover(event, d) {
-        event.stopPropagation();
-        let percent = self.config.term2 ? d.total / d.seriesTotal * 100 : d.seriesTotal / d.chartTotal * 100;
-        percent = percent.toFixed(1);
-        const t1 = self.config.term.term;
-        const t2 = self.config.term2 && self.config.term2.term;
-        const term1unit = t1.unit;
-        const seriesLabel = (t1.values && d.seriesId in t1.values ? t1.values[d.seriesId].label : d.seriesId) + (t1.unit ? " " + t1.unit : "");
-        const dataLabel = (t2 && t2.values && d.dataId in t2.values ? t2.values[d.dataId].label : d.dataId) + (t2 && t2.unit ? " " + t2.unit : "");
-        const icon = !t2 ? "" : "<div style='display:inline-block; width:14px; height:14px; margin: 2px 3px; vertical-align:top; background:" + d.color + "'>&nbsp;</div>";
-        const rows = [`<tr><td colspan=2 style='padding:3px; text-align:center'>${seriesLabel}</td></tr>`];
-        if (t2) {
-          rows.push(
-            `<tr><td colspan=2 style='padding:3px; text-align:center'>${icon} <span>${dataLabel}</span></td></tr>`
-          );
-        }
-        rows.push(
-          `<tr><td style='padding:3px; color:#aaa'>#Individuals</td><td style='padding:3px; text-align:center'>${d.total}</td></tr>`,
-          `<tr><td style='padding:3px; color:#aaa'>percent</td><td style='padding:3px; text-align:center'>${percent}%</td></tr>`
-        );
-        if (t2) {
-          const pvalue = d.groupPvalues?.term2tests?.find((x) => x.term2id === d.dataId).pvalue;
-          const term1Label = d.groupPvalues.term1Label;
-          const term2Label = d.groupPvalues.term2tests.find((x) => x.term2id === d.dataId).term2Label;
-          const tableValues = d.groupPvalues.term2tests.find((x) => x.term2id === d.dataId).tableValues;
-          const skipped = d.groupPvalues.term2tests.find((x) => x.term2id === d.dataId).skipped;
-          const negateTerm1Label = !(self.settings.cols.length - self.settings.exclude.cols.length == 2 && self.chartsData.tests[d.chartId].length == 2) ? negateTermLabel(term1Label) : self.chartsData.tests[d.chartId][0].term1Label == term1Label ? self.chartsData.tests[d.chartId][1].term1Label : self.chartsData.tests[d.chartId][0].term1Label;
-          let negateTerm2Label = negateTermLabel(term2Label);
-          if (self.settings.rows.length - self.settings.exclude.rows.length == 2) {
-            const visibleTerm2CatsKeys = self.settings.rows.filter((row) => !self.settings.exclude.rows.includes(row));
-            const visibleTerm2Labels = visibleTerm2CatsKeys.map((catK) => self.config.term2?.term?.values?.[catK]?.label).filter((x) => x != void 0);
-            if (visibleTerm2Labels?.length == 2)
-              negateTerm2Label = visibleTerm2Labels[0] == term2Label ? visibleTerm2Labels[1] : visibleTerm2Labels[0];
-          }
-          if (self.settings.showAssociationTests) {
-            rows.push(
-              `<tr>
-							<td style='padding:3px; color:#aaa'>p-value</td>
-							<td style='padding:3px; text-align:center'>${skipped ? "N/A" : pvalue > 1e-4 ? Number(pvalue.toFixed(4)) : roundValueAuto(Number(pvalue))}</td>
-						</tr>
-						<table style="margin: 5px; text-align:left; font-size: 0.8em; border-spacing: 5px; border-collapse: separate;"
-							<tr>
-								<td style='color:#aaa'></td>
-								<td style='color:#aaa'>${term2Label}</td>
-								<td style='color:#aaa'>${negateTerm2Label}</td>
-							</tr>
-							<tr>
-								<td style='color:#aaa'>${term1Label}</td>
-								<td>${tableValues.R1C1}</td>
-								<td>${tableValues.R1C2}</td>
-							</tr>
-							<tr>
-								<td style='color:#aaa'>${negateTerm1Label}</td>
-								<td>${tableValues.R2C1}</td>
-								<td>${tableValues.R2C2}</td>
-							</tr>
-						</table>`
-            );
-          }
-        }
-        if (!t1.type == "condition" && (!t2 || !t2.type == "condition")) {
-          rows.push(
-            `<tr><td style='padding:3px; color:#aaa'>Percentage</td><td style='padding:3px; text-align:center'>${(100 * d.total / (t2 ? d.seriesTotal : d.chartTotal)).toFixed(1)}%</td></tr>`
-          );
-        }
-        tip.show(event.clientX, event.clientY).d.html(`<table class='sja_simpletable'>${rows.join("\n")}</table>`);
-      },
-      mouseout: () => {
-        tip.hide();
-      },
-      rectFill(d) {
-        return d.color;
-      },
-      strokeFill(d) {
-        const rgbColor = rgb(d.color);
-        const stroke = rgbColor.toString() == rgb("white").toString() ? rgbColor.darker() : rgbColor;
-        return stroke;
-      },
-      click: self.opts.bar_click_override ? (event, d) => self.opts.bar_click_override(getTermValues(d, self)) : (event, d) => handle_click(event, self, d)
-    },
-    barLabel: {
-      text: (d) => {
-        return "label" in d ? d.label : self.config.term.values && "id" in d && d.id in self.config.term.values ? self.config.term.values[d.id].label : d;
-      },
-      click: self.opts.bar_click_override ? (event, d) => self.opts.bar_click_override(getTermValues(d, self)) : (event, d) => handle_click(event, self, d),
-      mouseover: (event) => {
-        event.stopPropagation();
-      },
-      mouseout: () => {
-        tip.hide();
-      }
-    },
-    legend: {
-      onColorClick: (e) => handleLegendClick(e.target, self),
-      click: (e) => handleLegendClick(e.target, self),
-      mouseover: (event) => {
-        event.stopPropagation();
-        const d = event.target.__data__;
-        if (d === void 0) return;
-        if (d.isHidden) tip.show(event.clientX, event.clientY).d.html("Click to unhide bar");
-      },
-      mouseout: () => {
-        tip.hide();
-      }
-    },
-    yAxis: {
-      text: (visibleTotal) => {
-        const type = self.sampleType?.plural_name || "samples";
-        const term = self.config.term;
-        if (s.orientation == "vertical") {
-          return s.unit == "pct" ? `% of ${type}` : `# of ${type} ` + (term.q.bar_by_children || term.q.value_by_most_recent || term.q.value_by_computable_grade ? "" : `(n=${visibleTotal})`);
-        } else {
-          return term.q.bar_by_children ? "Sub-condition" : term.q.value_by_max_grade ? "Maximum grade" : term.q.value_by_most_recent ? "Most recent grade" : term.q.value_by_computable_grade ? "Any grade" : term.type == "categorical" || !term.unit ? "" : term.unit;
-        }
-      }
-    },
-    xAxis: {
-      text: (visibleTotal) => {
-        const type = self.sampleType?.plural_name || "samples";
-        const term = self.config.term;
-        if (s.orientation == "vertical") {
-          return term.q.bar_by_children ? "Sub-condition" : term.q.value_by_max_grade ? "Maximum grade" : term.q.value_by_most_recent ? "Most recent grade" : term.q.value_by_computable_grade ? "Any grade" : term.type == "categorical" || !term.unit ? "" : term.unit;
-        } else {
-          return s.unit == "pct" ? `% of ${type}` : `# of ${type} ` + (term.q.bar_by_children || term.q.value_by_most_recent || term.q.value_by_computable_grade ? "" : `(n=${visibleTotal})`);
-        }
-      }
-    }
-  };
-}
-function handleColorClick(d, self, color) {
-  const termNum = d.type == "col" ? "term" : "term2";
-  const term = self.config[termNum];
-  let dataId = d.dataId;
-  if (term.term.values && !term.term.values?.[dataId]) {
-    for (const [key, value] of Object.entries(term.term.values)) if (value.label == d.dataId) dataId = key;
-  }
-  if (term.term.values?.[dataId]) term.term.values[dataId].color = color;
-  if (term.term.type == "geneVariant") {
-    let groupset;
-    if (term.q.type == "predefined-groupset") {
-      groupset = term.term.groupsetting.lst[term.q.predefined_groupset_idx];
-    } else if (term.q.type == "custom-groupset") {
-      groupset = term.q.customset;
-    } else {
-      throw "unexpected q.type";
-    }
-    const group = groupset.groups.find((g) => g.name == d.dataId);
-    if (!group) throw "group not found";
-    group.color = color;
-  }
-  let binColored = null;
-  if (self.bins[2].length > 0) {
-    const binMatched = self.bins[2].find((bin) => bin.label == d.dataId);
-    if (binMatched) {
-      binMatched.color = color;
-      binColored = self.bins[2];
-    }
-  }
-  self.app.dispatch({
-    type: "plot_edit",
-    id: self.id,
-    config: {
-      [termNum]: {
-        $id: term.$id,
-        id: term.id,
-        isAtomic: true,
-        term: term.term,
-        q: getUpdatedQfromClick(d, term, d.isHidden, binColored)
-      }
-    }
-  });
-}
-function handleLegendClick(target, self) {
-  const d = target.__data__;
-  if (d === void 0) return;
-  if (!("type" in d)) return;
-  const termNum = d.type == "col" ? "term" : "term2";
-  const term = self.config[termNum];
-  const isHidden = "isHidden" in d ? !d.isHidden : !(term.q && term.q.hiddenValues && term.q.hiddenValues["dataId" in d ? d.dataId : d.id]);
-  const tip = self.app.tip;
-  const menu = tip.clear();
-  menu.showunder(target);
-  const div = menu.d.append("div");
-  div.append("div").attr("class", "sja_menuoption sja_sharp_border").text(!isHidden ? "Show" : "Hide").on("click", () => {
-    menu.hide();
-    hideCategory(d, self, isHidden);
-  });
-  if (term.q.hiddenValues && Object.keys(term.q.hiddenValues).length > 1)
-    div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show all").on("click", () => {
-      menu.hide();
-      const config = {};
-      const tw = structuredClone(term);
-      delete tw.q.hiddenValues;
-      self.app.dispatch({
-        type: "plot_edit",
-        id: self.id,
-        config: { [termNum]: tw }
-      });
-    });
-  const color = rgb(d.color).formatHex();
-  if (color != "#ffffff") {
-    const input = div.append("div").attr("class", "sja_sharp_border").style("padding", "0px 10px").text("Color:").append("input").attr("type", "color").attr("value", color).on("change", () => {
-      handleColorClick(d, self, input.node().value);
-      menu.hide();
-    });
-  }
-}
-function hideCategory(d, self, isHidden) {
-  const termNum = d.type == "col" ? "term" : "term2";
-  const term = self.config[termNum];
-  self.app.dispatch({
-    type: "plot_edit",
-    id: self.id,
-    config: {
-      [termNum]: {
-        //Fix for list samples options not working
-        //after hiding a category
-        $id: term?.$id,
-        id: term.id,
-        isAtomic: true,
-        term: term.term,
-        q: getUpdatedQfromClick(d, term, isHidden)
-      }
-    }
-  });
-}
-function getUpdatedQfromClick(d, term, isHidden = false, binColored = null) {
-  const label = "id" in d ? d.id : d.type == "col" ? d.seriesId : d.dataId;
-  const valueId = term.term.values && Object.keys(term.term.values).find((id2) => term.term.values[id2].label === label);
-  const id = !valueId ? label : valueId;
-  const q = JSON.parse(JSON.stringify(term.q));
-  if (!q.hiddenValues) q.hiddenValues = {};
-  if (isHidden) q.hiddenValues[id] = 1;
-  else delete q.hiddenValues[id];
-  if (binColored) q.binColored = binColored;
-  return q;
-}
-function handle_click(event, self, chart) {
-  const d = event.target.__data__ || event.target.parentNode.__data__;
-  const term1 = self.config.term.term;
-  const term2 = self.config.term2 ? self.config.term2.term : null;
-  const uncomp_term1 = term1.values ? Object.values(term1.values).map((v) => v.label) : [];
-  const uncomp_term2 = term2 && term2.values ? Object.values(term2.values).map((v) => v.label) : [];
-  const term1unit = term1.unit && !uncomp_term1.includes(d.seriesId || d.id) ? " " + term1.unit : "";
-  const term2unit = term2 && term2.unit && !uncomp_term2.includes(d.dataId || d.id) ? " " + term2.unit : "";
-  const seriesLabel = (term1.values && d.seriesId in term1.values ? term1.values[d.seriesId].label : d.seriesId ? d.seriesId : d.id) + term1unit;
-  const dataLabel = (term2 && term2.values && d.dataId in term2.values ? term2.values[d.dataId].label : d.dataId ? d.dataId : d.id) + term2unit;
-  const icon = !term2 ? "" : "<div style='display:inline-block; width:14px; height:14px; margin: 2px 3px; vertical-align:top; background:" + d.color + "'>&nbsp;</div>";
-  const header = `<div style='padding:2px'><b>${term1.name}</b>: ${seriesLabel}</div>` + (d.seriesId && term2 ? `<div style='padding:2px'><b>${term2.name}</b>: ${dataLabel} ${icon}</div>` : "");
-  const data = d.seriesId || d.seriesId === 0 ? d : { seriesId: d.id, dataId: d.dataId };
-  const options = [];
-  if (self.opts.bar_click_opts.includes("hide_bar")) {
-    options.push({
-      label: data.seriesId ? 'Hide "' + seriesLabel + '"' : "Hide",
-      callback: () => {
-        const term = self.config.term;
-        self.app.dispatch({
-          type: "plot_edit",
-          id: self.id,
-          config: {
-            term: {
-              $id: term.$id,
-              id: term.id,
-              isAtomic: true,
-              term: term.term,
-              q: getUpdatedQfromClick({ id: data.seriesId, type: "col" }, term, true)
-            }
-          }
-        });
-      }
-    });
-    if (data.dataId || data.dataId === 0) {
-      options.push({
-        label: 'Hide "' + dataLabel + '" ' + icon,
-        callback: () => {
-          const term22 = self.config.term2;
-          self.app.dispatch({
-            isAtomic: true,
-            type: "plot_edit",
-            id: self.id,
-            config: {
-              term2: {
-                isAtomic: true,
-                term: term22.term,
-                q: getUpdatedQfromClick({ id: data.dataId, type: "row" }, term22, true)
-              }
-            }
-          });
-        }
-      });
-    }
-  }
-  if (self.opts.bar_click_opts.includes("add_filter")) {
-    const item = findItemByTermId(self.state.termfilter.filter, self.config.term.term.id);
-    if (!item) {
-      options.push({
-        label: "Add as filter",
-        callback: async (self2, tvslst2) => {
-          const arg = getListSamplesArg(event, self2, data.seriesId, data.dataId, chart.chartId);
-          await menuoption_add_filter(self2, tvslst2, arg);
-        }
-      });
-    }
-  }
-  if (self.opts.bar_click_opts.includes("add_group") && self.config.displaySampleIds) {
-    options.push({
-      label: "Add as group",
-      callback: async () => {
-        const arg = getListSamplesArg(event, self, data.seriesId, data.dataId, chart.chartId);
-        await addAsGroup(arg);
-      }
-    });
-  }
-  if (self.config.displaySampleIds) {
-    options.push({
-      label: "List samples",
-      callback: async () => {
-        const arg = getListSamplesArg(event, self, data.seriesId, data.dataId, chart.chartId);
-        await listSamples(arg);
-      }
-    });
-  }
-  if (!options.length) return;
-  self.app.tip.clear();
-  if (header) {
-    self.app.tip.d.append("div").html(header);
-  }
-  const tvslst = getTermValues(data, self);
-  self.app.tip.d.append("div").selectAll("div").data(options).enter().append("div").attr("class", "sja_menuoption").html((d2) => d2.label).on("click", async (event2, d2) => {
-    if (event2.target._clicked) return;
-    event2.target._clicked = true;
-    event2.target.textContent = "Loading...";
-    await d2.callback(self, tvslst);
-    self.app.tip.hide();
-  });
-  self.app.tip.show(event.clientX, event.clientY);
-}
-function getListSamplesArg(event, self, seriesId, dataId, chartId) {
-  const terms = [self.config.term];
-  const tvslst = {
-    type: "tvslst",
-    in: true,
-    join: "and",
-    lst: []
-  };
-  const geneVariant = {};
-  const tvs = getTvs(1, seriesId, self, geneVariant);
-  if (tvs) tvslst.lst.push(tvs);
-  if (self.config.term2) {
-    terms.push(self.config.term2);
-    const tvs2 = getTvs(2, dataId, self, geneVariant);
-    if (tvs2) tvslst.lst.push(tvs2);
-  }
-  if (self.config.term0) {
-    terms.push(self.config.term0);
-    const tvs2 = getTvs(0, chartId, self, geneVariant);
-    if (tvs2) tvslst.lst.push(tvs2);
-  }
-  const arg = {
-    event,
-    self,
-    terms,
-    tvslst,
-    geneVariant
-  };
-  return arg;
-}
-function getTvs(termIndex, value, self, geneVariant) {
-  if (!value) return;
-  const term = termIndex == 0 ? self.config.term0 : termIndex == 1 ? self.config.term : self.config.term2;
-  if (term.term.type == "geneVariant") {
-    geneVariant[`t${termIndex}value`] = value;
-    return;
-  }
-  let tvs = {
-    type: "tvs",
-    tvs: {
-      term: term.term,
-      values: [{ key: value }]
-    }
-  };
-  if (term.q.type == "custom-groupset" || term.q.type == "predefined-groupset") {
-    const groupset = term.q.type == "custom-groupset" ? term.q.customset : term.term.groupsetting.lst[term.q.predefined_groupset_idx];
-    const group = groupset.groups.find((group2) => group2.name == value);
-    if (!group) throw "group not found";
-    tvs.tvs.values = group.values;
-  } else if (isNumericTerm(term.term)) {
-    const bins = self.bins[termIndex];
-    tvs.tvs.ranges = [bins.find((bin) => bin.label == value)];
-  } else if (term.term.type == "samplelst") {
-    const list = term.term.values?.[value]?.list || [];
-    const ids = list.map((s) => s.sampleId);
-    const tvslst = getSamplelstFilter(ids);
-    tvs = tvslst.lst[0];
-  } else if (term.term.type == "geneVariant" && term.q.type == "values") {
-    throw "no longer supported in barchart";
-  }
-  return tvs;
-}
-async function listSamples(arg) {
-  for (const k of Object.keys(arg)) {
-    const param = arg[k];
-    if (!param) throw `parameter '${k}' is undefined`;
-  }
-  const { event, self, terms, tvslst, geneVariant, tip } = arg;
-  const opts = {
-    terms,
-    filter: filterJoin([self.state.termfilter.filter, tvslst]),
-    filter0: self.state.termfilter.filter0,
-    isSummary: true
-  };
-  const data = await self.app.vocabApi.getAnnotatedSampleData(opts);
-  const rows = [];
-  const termIsNumeric = isNumericTerm(self.config.term.term);
-  const term2isNumeric = self.config.term2 ? isNumericTerm(self.config.term2.term) : false;
-  const termIsGv = self.config.term.term.type == "geneVariant";
-  const term2isGv = self.config.term2?.term.type == "geneVariant";
-  const term2isSurv = self.config.term2?.term.type == "survival";
-  for (const sample of data.lst) {
-    const pass = mayFilterByGeneVariant(sample, self, geneVariant);
-    if (!pass) continue;
-    const sampleName = data.refs.bySampleId[sample.sample].label;
-    const row = [{ value: sampleName }];
-    const urlTemplate = self.app.vocabApi.termdbConfig?.urlTemplates?.sample;
-    if (urlTemplate) {
-      row[0].url = urlTemplate.base + (sample[urlTemplate.namekey] || sample.sample);
-    }
-    const t1entry = sample[self.config.term.$id];
-    if (!t1entry) continue;
-    if (self.config.term.q?.hiddenValues && self.config.term.q.hiddenValues[t1entry.value]) continue;
-    if (termIsNumeric) {
-      const value = t1entry.value;
-      row.push({ value: roundValueAuto(value) });
-    } else if (termIsGv) {
-      addGvRowVals(sample, self.config.term, row);
-    }
-    if (self.config.term2) {
-      const t2entry = sample[self.config.term2.$id];
-      if (!t2entry) continue;
-      if (self.config.term2.q?.hiddenValues && self.config.term2.q.hiddenValues[t2entry.value]) continue;
-      if (term2isNumeric) {
-        const value = roundValueAuto(t2entry.value);
-        row.push({ value });
-      } else if (term2isGv) {
-        addGvRowVals(sample, self.config.term2, row);
-      } else if (term2isSurv) {
-        const value = self.config.term2.term.values[t2entry.key].label;
-        row.push({ value });
-      } else {
-        const label = self.config.term2.term.values?.[t2entry.value]?.label;
-        const value = label || t2entry.value;
-        row.push({ value });
-      }
-    }
-    rows.push(row);
-  }
-  const columns = [{ label: "Sample" }];
-  if (termIsNumeric) {
-    columns.push({ label: self.config.term.term.name });
-  } else if (termIsGv) {
-    addGvCols(self.config.term, columns);
-  }
-  if (self.config.term2) {
-    if (term2isGv) {
-      addGvCols(self.config.term2, columns);
-    } else {
-      columns.push({ label: self.config.term2.term.name });
-    }
-  }
-  let div;
-  if (tip) {
-    div = tip.d;
-    tip.clear().show(event.clientX, event.clientY, false);
-  } else {
-    const menu = new Menu({ padding: "5px" });
-    menu.show(event.clientX, event.clientY, false);
-    div = menu.d.append("div");
-  }
-  renderTable({
-    rows,
-    columns,
-    div,
-    showLines: true,
-    maxHeight: "40vh",
-    resize: true,
-    dataTestId: "sjpp-listsampletable"
-  });
-}
-async function getSampleGrp(arg) {
-  const { event, self, terms, tvslst, geneVariant, tip } = arg;
-  const opts = {
-    terms,
-    filter: filterJoin([self.state.termfilter.filter, tvslst]),
-    filter0: self.state.termfilter.filter0,
-    isSummary: true
-  };
-  const data = await self.app.vocabApi.getAnnotatedSampleData(opts);
-  const samples = [];
-  for (const sample of data.lst) {
-    const pass = mayFilterByGeneVariant(sample, self, geneVariant);
-    if (!pass) continue;
-    const t1entry = sample[self.config.term.$id];
-    if (!t1entry) continue;
-    if (self.config.term.q?.hiddenValues && self.config.term.q.hiddenValues[t1entry.value]) continue;
-    samples.push({ sampleId: sample.sample });
-  }
-  const group = {
-    name: "Group",
-    items: samples
-  };
-  return group;
-}
-async function addAsGroup(arg) {
-  for (const k of Object.keys(arg)) {
-    const param = arg[k];
-    if (!param) throw `parameter '${k}' is undefined`;
-  }
-  const group = await getSampleGrp(arg);
-  const tw = getSamplelstTW([group]);
-  const filter = getFilter(tw);
-  addNewGroup(arg.self.app, filter, arg.self.state.groups);
-}
-function mayFilterByGeneVariant(sample, self, geneVariant) {
-  if (self.config.term.term.type == "geneVariant" && geneVariant.t1value) {
-    const tw = self.config.term;
-    if (tw.q.type == "values") throw "q.type=values not supported";
-    const value = sample[tw.$id]?.value;
-    if (value != geneVariant.t1value) return false;
-  }
-  if (self.config.term2?.term.type == "geneVariant" && geneVariant.t2value) {
-    const tw = self.config.term2;
-    if (tw.q.type == "values") throw "q.type=values not supported";
-    const value = sample[tw.$id]?.value;
-    if (value != geneVariant.t2value) return false;
-  }
-  if (self.config.term0?.term.type == "geneVariant" && geneVariant.t0value) {
-    const tw = self.config.term0;
-    if (tw.q.type == "values") throw "q.type=values not supported";
-    const value = sample[tw.$id]?.value;
-    if (value != geneVariant.t0value) return false;
-  }
-  return true;
-}
-function addGvRowVals(sample, tw, row) {
-  const mlst = sample[tw.$id]?.values;
-  const gene2mlst = /* @__PURE__ */ new Map();
-  for (const gene of tw.term.genes) {
-    const mlst_gene = mlst.filter((m) => m.gene == gene.id);
-    gene2mlst.set(gene.name, mlst_gene);
-  }
-  if (!gene2mlst.size) throw "gene2mlst is empty";
-  if (gene2mlst.size == 1) {
-    const entry = gene2mlst.entries().next().value;
-    const mlst2 = entry[1];
-    const htmls = mlst2htmls(mlst2);
-    row.push({ html: htmls.join("<br>") });
-  } else {
-    const genes = [];
-    const htmls = [];
-    for (const [gene, mlst2] of gene2mlst) {
-      genes.push(...Array(mlst2.length).fill(gene));
-      htmls.push(...mlst2htmls(mlst2));
-    }
-    row.push({ html: genes.join("<br>") });
-    row.push({ html: htmls.join("<br>") });
-  }
-}
-function mlst2htmls(mlst) {
-  const htmls = mlst.map((m) => {
-    const mname = m.mname || "";
-    const value = m.value ? roundValueAuto(m.value, false, 3) : "";
-    const color = mclass[m.class].color;
-    const label = mclass[m.class].label.toUpperCase();
-    const holder = create_default("div");
-    holder.append("span").text(mname || value);
-    holder.append("span").style("margin-left", mname || value ? "5px" : "0px").style("color", color).style("font-size", ".8em").text(label);
-    return holder.html();
-  });
-  return htmls;
-}
-function addGvCols(tw, columns) {
-  if (tw.term.genes.length == 1) {
-    columns.push({ label: tw.term.name });
-  } else {
-    columns.push({ label: "Gene" });
-    if (tw.q.type == "predefined-groupset") {
-      const groupset = tw.term.groupsetting.lst[tw.q.predefined_groupset_idx];
-      columns.push({ label: dt2label[groupset.dt] });
-    } else if (tw.q.type == "custom-groupset") {
-      columns.push({ label: "Genotype" });
-    } else {
-      throw "unexpected tw.q.type";
-    }
-  }
-}
-async function menuoption_add_filter(self, tvslst, arg) {
-  if (!tvslst) return;
-  if (!self.state.termfilter || self.state.nav?.header_mode !== "with_tabs") {
-    return;
-  }
-  for (const k of Object.keys(arg)) {
-    const param = arg[k];
-    if (!param) throw `parameter '${k}' is undefined`;
-  }
-  const hasGrpSetting = arg.terms.find((t) => t.q?.type == "predefined-groupset" || t.q?.type == "custom-groupset");
-  let samplelstTW;
-  if (hasGrpSetting) {
-    const group = await getSampleGrp(arg);
-    samplelstTW = getSamplelstTW([group]);
-  }
-  const filterUiRoot = getFilterItemByTag(self.state.termfilter.filter, "filterUiRoot");
-  const filter = filterJoin([
-    filterUiRoot,
-    samplelstTW ? getFilter(samplelstTW) : {
-      type: "tvslst",
-      in: true,
-      join: tvslst.length > 1 ? "and" : "",
-      lst: [...tvslst.map(wrapTvs)]
-    }
-  ]);
-  filter.tag = "filterUiRoot";
-  self.app.dispatch({
-    type: "filter_replace",
-    filter
-  });
-}
-function wrapTvs(tvs) {
-  return tvs.type === "tvs" ? tvs : { type: "tvs", tvs };
-}
-function getTermValues(d, self) {
-  const termValues = [];
-  if (self.state.nav?.header_mode == "with_cohortHtmlSelect") {
-    const cohortFilter = getFilterItemByTag(self.state.termfilter.filter, "cohortFilter");
-    if (cohortFilter) termValues.push(JSON.parse(JSON.stringify(cohortFilter)));
-  }
-  const t1 = self.config.term;
-  const t1ValKey = t1.term.values && Object.keys(t1.term.values).filter((key) => t1.term.values[key].label === d.seriesId)[0];
-  const t1ValId = t1.term.values && t1ValKey in t1.term.values ? t1ValKey : d.seriesId;
-  const t2 = self.config.term2;
-  const t2ValKey = t2 && t2.term.values && Object.keys(t2.term.values).filter((key) => t2.term.values[key].label === d.dataId)[0];
-  const t2ValId = t2 && t2.term.values && t2ValKey in t2.term.values ? t2ValKey : d.dataId;
-  for (const term of [t1, t2]) {
-    if (!term) continue;
-    const i = term == t1 ? 1 : 2;
-    const key = term == t1 ? t1ValId : t2ValId;
-    if (!key) continue;
-    const q = term.q;
-    const label = !term || !term.term.values ? key : key in term.term.values ? term.term.values[key].label : key;
-    if (q.type == "predefined-groupset" || q.type == "custom-groupset") {
-      const groupset = q.type == "predefined-groupset" ? term.term.groupsetting.lst[q.predefined_groupset_idx] : q.customset;
-      const group = groupset.groups.find((g) => g.name === key);
-      const tvs = { term: term.term, values: group.values, groupset_label: group.name };
-      if (term.term.type == "condition") {
-        tvs.bar_by_children = term.q.bar_by_children;
-        tvs.bar_by_grade = term.q.bar_by_grade;
-        tvs.value_by_most_recent = term.q.value_by_most_recent;
-        tvs.value_by_max_grade = term.q.value_by_max_grade;
-      }
-      termValues.push(tvs);
-    } else if (term.term.type == "condition") {
-      if (!t2 || t1.term.id != t2.term.id) {
-        termValues.push(
-          Object.assign(
-            {
-              term: term.term,
-              values: [{ key, label }]
-            },
-            q
-          )
-        );
-      }
-      if (term == t1 && t2 && term.term.id == t2.term.id) {
-        const q2 = t2.q;
-        const term2Label = t2.term.values && d.dataId in t2.term.values ? self.config.term2.values[d.dataId].label : d.dataId;
-        termValues.push(
-          Object.assign(
-            {
-              term: term.term,
-              grade_and_child: [
-                {
-                  grade: q2.bar_by_grade ? d.dataId : key,
-                  grade_label: q2.bar_by_grade ? term2Label : label,
-                  child_id: q2.bar_by_children ? d.dataId : key,
-                  child_label: q2.bar_by_children ? term2Label : label
-                }
-              ]
-            },
-            q2
-          )
-        );
-      }
-    } else {
-      const bins = self.currServerData.refs.bins[i];
-      if (!bins || !bins.length) {
-        termValues.push({ term: term.term, values: [{ key, label }] });
-      } else {
-        const range = bins.find((d2) => d2.label == label || d2.name == label);
-        if (range) termValues.push({ term: term.term, ranges: [range] });
-        else if (term == t1) {
-          termValues.push({ term: term.term, ranges: [{ value: key }] });
-        } else if (term == t2) {
-          termValues.push({ term: term.term, ranges: [{ value: key }] });
-        } else {
-          throw "should not happen";
-        }
-      }
-    }
-  }
-  return termValues.map((f) => wrapTvs(f));
-}
-
-export {
-  getHandlers,
-  hideCategory,
-  listSamples,
-  addAsGroup,
-  Barchart,
-  barInit,
-  componentInit,
-  getDefaultBarSettings,
-  getPlotConfig,
-  negateTermLabel
-};
-//# sourceMappingURL=chunk-GBS5I24E.js.map