@sjcrh/proteinpaint-client 2.166.0 → 2.167.1

package/dist/chunk-2OVIUIIL.js

@@ -0,0 +1,1720 @@
+import {
+  barsRenderer
+} from "./chunk-ITJ2SXU5.js";
+import {
+  plotLength,
+  rendererSettings
+} from "./chunk-FN5XPUPH.js";
+import {
+  addNewGroup,
+  getFilter,
+  getSamplelstFilter,
+  getSamplelstTW,
+  rebaseGroupFilter
+} from "./chunk-LMELY5Z2.js";
+import {
+  PlotBase,
+  defaultUiLabels
+} from "./chunk-GLSDMBHR.js";
+import {
+  controlsInit,
+  renderTerm1Label,
+  term0_term2_defaultQ
+} from "./chunk-RQ7CE7SK.js";
+import {
+  DownloadMenu,
+  fillTermWrapper,
+  filterJoin,
+  findItemByTermId,
+  getCombinedTermFilter,
+  getFilterItemByTag,
+  htmlLegend,
+  renderTable
+} from "./chunk-W5EG334J.js";
+import {
+  isNumericTerm
+} from "./chunk-DKI7YOTJ.js";
+import {
+  dt2label,
+  getColors,
+  mclass,
+  plotColor
+} from "./chunk-6VQ4C735.js";
+import {
+  Menu
+} from "./chunk-TGZA4ETW.js";
+import {
+  copyMerge,
+  deepEqual,
+  getCompInit
+} from "./chunk-DDOM4XYV.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";
+  configTermKeys = ["term", "term0", "term2"];
+  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(rendererSettings);
+    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')
+        });
+      inputs.push({
+        label: "Plot length",
+        title: `Set the plot length in pixels between 200 and 800.`,
+        type: "number",
+        chartType: "barchart",
+        settingsKey: "plotLength",
+        min: 200,
+        max: 800,
+        step: 10
+      });
+      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 = await this.getMutableConfig(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,
+      plotLength: config.settings.barchart.plotLength,
+      // normalize bar thickness regardless of orientation
+      colw: config.settings.barchart.barwidth,
+      rowh: config.settings.barchart.barwidth,
+      colspace: config.settings.barchart.barspace,
+      rowspace: config.settings.barchart.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(rendererSettings);
+      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 {
+    barspace: 2,
+    barwidth: 20,
+    plotLength,
+    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 {
+    opts.tw = await fillTermWrapper(opts.term, app.vocabApi);
+    if (opts.term2) opts.term2 = await fillTermWrapper(opts.term2, app.vocabApi);
+    if (opts.term0) 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
+        // Moved to barchart settings
+        // 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-2OVIUIIL.js.map