@sjcrh/proteinpaint-client 2.166.0 → 2.167.1

package/dist/chunk-46T54RUY.js

@@ -0,0 +1,1133 @@
+import {
+  getSamplelstFilter
+} from "./chunk-LMELY5Z2.js";
+import {
+  PlotBase,
+  defaultUiLabels
+} from "./chunk-GLSDMBHR.js";
+import {
+  controlsInit,
+  renderTerm1Label,
+  term0_term2_defaultQ
+} from "./chunk-RQ7CE7SK.js";
+import {
+  DownloadMenu,
+  axisstyle,
+  drawBoxplot,
+  fillTermWrapper,
+  filterJoin,
+  getCombinedTermFilter,
+  getFilterItemByTag,
+  getMaxLabelWidth,
+  renderTable
+} from "./chunk-W5EG334J.js";
+import {
+  isNumericTerm
+} from "./chunk-DKI7YOTJ.js";
+import {
+  plotColor
+} from "./chunk-6VQ4C735.js";
+import {
+  Menu
+} from "./chunk-TGZA4ETW.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-DDOM4XYV.js";
+import {
+  axisLeft,
+  axisTop
+} from "./chunk-LOZEKOES.js";
+import {
+  format,
+  linear,
+  log
+} from "./chunk-W2IWHXLL.js";
+import {
+  decimalPlacesUntilFirstNonZero,
+  roundValueAuto
+} from "./chunk-5OHXYXLD.js";
+import {
+  rgb
+} from "./chunk-OMR2DT66.js";
+import {
+  select_default
+} from "./chunk-NDWTN4U5.js";
+
+// plots/boxplot/model/Model.ts
+var Model = class {
+  constructor(boxplot, config) {
+    this.boxplot = boxplot;
+    this.config = config;
+    this.state = boxplot.state;
+    this.app = boxplot.app;
+    this.settings = config.settings.boxplot;
+  }
+  async getData() {
+    const boxPlotDataArgs = this.setRequestOpts();
+    const data = await this.app.vocabApi.getBoxPlotData(
+      boxPlotDataArgs,
+      this.boxplot.api.getAbortSignal()
+    );
+    return data;
+  }
+  setRequestOpts() {
+    const opts = {
+      tw: this.getContinousTerm(),
+      filter: this.state.termfilter.filter,
+      filter0: this.state.termfilter.filter0,
+      orderByMedian: this.settings.orderByMedian,
+      isLogScale: this.settings.isLogScale,
+      removeOutliers: this.settings.removeOutliers,
+      showAssocTests: this.settings.showAssocTests
+    };
+    if (this.config.term2)
+      opts.overlayTw = this.getContinousTerm() == this.config.term ? this.config.term2 : this.config.term;
+    if (this.config.term0) opts.divideTw = this.config.term0;
+    return opts;
+  }
+  getContinousTerm() {
+    if (!this.config?.term2) return this.config.term;
+    return isNumericTerm(this.config.term.term) && this.config.term.q.mode == "continuous" ? this.config.term : this.config.term2;
+  }
+};
+
+// plots/boxplot/viewModel/LegendDataMapper.ts
+var LegendDataMapper = class {
+  constructor(config, data, plots) {
+    this.legendData = [];
+    const isTerm2 = config?.term2;
+    if (config.term.q?.descrStats) {
+      this.legendData.push({
+        label: `Descriptive Statistics${isTerm2 ? `: ${config.term.term.name}` : ""}`,
+        items: this.getDescrStatItems(config.term.q.descrStats)
+      });
+    }
+    if (isTerm2 && isTerm2.q?.descrStats) {
+      this.legendData.push({
+        label: `Descriptive Statistics: ${config.term2.term.name}`,
+        items: this.getDescrStatItems(isTerm2.q.descrStats)
+      });
+    }
+    const hiddenPlots = plots.filter((p) => p.isHidden)?.map((p) => {
+      const total = p.descrStats.total;
+      if (!total || !total.value) throw `Missing total value for ${p.key}`;
+      return { key: p.key, text: p.key, n: total.value, isHidden: true, isPlot: true };
+    }) || [];
+    if (config.term.term?.values) {
+      const term1Label = config.term2 ? config.term.term.name : "Other categories";
+      const term1Data = this.setHiddenCategoryItems(config.term, term1Label, hiddenPlots, data.uncomputableValues || []);
+      if (term1Data) this.legendData.push(term1Data);
+    }
+    if (config.term2?.term?.values) {
+      const term2Data = this.setHiddenCategoryItems(
+        config.term2,
+        config.term2.term.name,
+        hiddenPlots,
+        data.uncomputableValues || []
+      );
+      if (term2Data) this.legendData.push(term2Data);
+    }
+  }
+  getDescrStatItems(stats) {
+    return Object.values(stats).map((s) => ({
+      key: s.key,
+      text: `${s.label}: ${s.value}`,
+      isHidden: false,
+      isPlot: false
+    }));
+  }
+  setHiddenCategoryItems(tw, label, hiddenPlots, uncomputableValues) {
+    const termData = { label, items: [] };
+    if (hiddenPlots.length) {
+      for (const key of Object.keys(tw.q.hiddenValues || {})) {
+        const plot = hiddenPlots.find((p) => p.key === key);
+        if (plot) termData.items.push(plot);
+      }
+    }
+    if (uncomputableValues && uncomputableValues.length) {
+      for (const v of Object.values(tw.term.values || {})) {
+        const uncomputableItem = uncomputableValues.find((u) => u.label === v.label);
+        if (uncomputableItem) {
+          termData.items.push({
+            key: uncomputableItem.label,
+            text: `${uncomputableItem.label}, n=${uncomputableItem.value}`,
+            isHidden: true,
+            isPlot: false
+          });
+        }
+      }
+    }
+    return termData.items.length ? termData : null;
+  }
+};
+
+// plots/boxplot/viewModel/ViewModel.ts
+var ViewModel = class {
+  constructor(config, data, settings, maxLabelLgth, useDefaultSettings) {
+    /** Top padding for the svg */
+    this.topPad = 20;
+    /** Bottom padding for the svg */
+    this.bottomPad = 40;
+    /** Horizontal, or right and left padding */
+    this.horizPad = 120;
+    /** For outliers, set a radius rather than using the default. */
+    this.outRadius = 5;
+    /** Increasing padding to space out the boxplots and determine position */
+    this.incrPad = 40;
+    const numOfPlots = data.plots.filter((p) => !p.isHidden).length;
+    if (useDefaultSettings) {
+      const isLargePlotCount = numOfPlots > 20;
+      this.rowHeight = numOfPlots > 10 ? isLargePlotCount ? 20 : 35 : 50;
+      this.rowSpace = numOfPlots > 10 ? isLargePlotCount ? 10 : 12 : 15;
+    } else {
+      this.rowHeight = settings.rowHeight;
+      this.rowSpace = settings.rowSpace;
+    }
+    this.totalLabelSize = maxLabelLgth + settings.labelPad;
+    this.totalRowSize = this.rowHeight + this.rowSpace;
+    const plotDim = this.setPlotDimensions(data, config, settings);
+    this.incrPad += 30;
+    const plots = this.setPlotData(data, config, settings);
+    this.viewData = {
+      plotDim,
+      plots: plots.filter((p) => !p.isHidden),
+      legend: new LegendDataMapper(config, data, plots).legendData
+    };
+  }
+  setPlotDimensions(data, config, settings) {
+    const svg = this.setSvgDimensions(settings, data);
+    const plotDim = {
+      //Add 1 to the max is big enough so the upper line to boxplot isn't cutoff
+      //Note: ts is complaining absMax could be null. Ignore. Error in server request.
+      domain: [data.absMin, data.absMax <= 1 ? data.absMax : data.absMax + 1],
+      range: [0, settings.plotLength],
+      svg,
+      chartTitle: getChartTitle(config, data.chartId),
+      title: this.setTitleDimensions(config, settings, svg.height),
+      axis: {
+        x: settings.isVertical ? this.horizPad / 2 + this.incrPad + this.topPad : this.totalLabelSize,
+        y: this.topPad + (settings.isVertical ? settings.labelPad : this.incrPad + 20),
+        values: (ticks) => {
+          if (settings.isLogScale) return this.filterTickValues(ticks);
+          return ticks;
+        },
+        format: (d) => {
+          if (settings.isLogScale) {
+            if (Number.isInteger(d)) return format(".0f")(d);
+            const dec = decimalPlacesUntilFirstNonZero(d);
+            if (dec > 1) return format(`.${dec + 1}f`)(d);
+            return format(".2f")(d);
+          }
+          return d.toString();
+        }
+      },
+      backgroundColor: settings.displayMode == "dark" ? "black" : "white",
+      textColor: settings.displayMode == "dark" ? "white" : "black"
+    };
+    return plotDim;
+  }
+  filterTickValues(ticks) {
+    const signifcantLessThanOne = ticks.filter((t) => t < 1).length / ticks.length;
+    const range = ticks[ticks.length - 1] - ticks[0];
+    const spread = range > 1e3 ? 4 : range > 100 ? 3 : 2;
+    const formattedTicks = ticks.filter((t, i) => {
+      if (t === 0 || i == ticks.length - 1 && i % spread !== 0) return t;
+      else if (t <= 1 && signifcantLessThanOne > 0.5) {
+        if (i % 5 === 0) return t;
+      } else if (i % spread === 0) return t;
+    });
+    return formattedTicks;
+  }
+  setSvgDimensions(settings, data) {
+    const plotsSpace = data.plots.filter((p) => !p.isHidden).length * this.totalRowSize + this.topPad + this.bottomPad + this.incrPad;
+    const depth = settings.plotLength + this.totalLabelSize + this.horizPad / 2;
+    return {
+      width: settings.isVertical ? plotsSpace + this.horizPad : depth,
+      height: settings.isVertical ? depth : plotsSpace
+    };
+  }
+  setTitleDimensions(config, settings, height) {
+    const depth = this.totalLabelSize + settings.plotLength / 2;
+    return {
+      x: settings.isVertical ? this.horizPad / 2 : depth,
+      y: settings.isVertical ? height - depth - this.horizPad / 2 : this.topPad + this.incrPad / 2,
+      text: config.term.q.mode == "continuous" ? config.term.term.name : config.term2.term.name
+    };
+  }
+  setPlotData(data, config, settings) {
+    const plots = structuredClone(data.plots);
+    for (const plot of plots) {
+      let color;
+      const term2 = config.term2;
+      if (term2) {
+        if (term2.q.type == "predefined-groupset" || term2.q.type == "custom-groupset") {
+          const groupset = term2.q.type == "predefined-groupset" ? term2.term.groupsetting.lst[term2.q.predefined_groupset_idx] : term2.q.customset;
+          if (!groupset) throw "groupset is missing";
+          const group = groupset.groups.find((g) => g.name == plot.seriesId);
+          if (group?.color) color = group.color;
+        } else {
+          color = term2.term.values?.[plot.seriesId]?.color;
+        }
+      }
+      if (!color) color = settings.color;
+      if (!plot.color) plot.color = color;
+      if (settings.displayMode == "dark") plot.color = rgb(plot.color).brighter(0.75);
+      if (plot.isHidden) continue;
+      if (plot.boxplot.out.length) {
+        const maxOut = plot.boxplot.out.reduce(
+          (a, b) => Math.max(a.value, b.value)
+        );
+        if (maxOut && maxOut.value > data.absMax) data.absMax = maxOut.value;
+        plot.boxplot.radius = this.outRadius;
+      }
+      plot.labColor = settings.displayMode == "dark" ? "white" : "black";
+      plot.boxplot.rectFill = settings.displayMode == "dark" ? "black" : settings.displayMode == "filled" ? color : "white";
+      plot.x = settings.isVertical ? this.horizPad / 2 + this.incrPad : this.totalLabelSize;
+      plot.y = this.topPad + (settings.isVertical ? settings.plotLength + settings.labelPad : this.incrPad);
+      this.incrPad += this.totalRowSize;
+    }
+    return plots;
+  }
+};
+function getChartTitle(config, chartId) {
+  if (!config.term0) return chartId;
+  return config.term0.term.values && chartId in config.term0.term.values ? config.term0.term.values[chartId].label : chartId;
+}
+
+// plots/boxplot/view/BoxPlotToolTips.ts
+var BoxPlotToolTips = class {
+  constructor(plot, g, tip, isVertical) {
+    this.tablePadding = "3px";
+    this.plot = plot;
+    this.g = g;
+    this.boxplot = plot.boxplot;
+    this.isVertical = isVertical;
+    this.tip = tip;
+    this.addLabelTooltip();
+    this.addOutliersTooltip();
+  }
+  //Add rendering preferences here to maintain styles
+  //across all tooltip instances
+  addText(text) {
+    this.tip.d.append("div").text(text);
+  }
+  addLabelTooltip() {
+    if (Object.keys(this.plot.descrStats).length < 2) return;
+    this.boxplot.labelG.on("mouseover", (event) => {
+      this.tip.clear();
+      if (this.isVertical) this.tip.show(event.clientX, event.clientY);
+      else this.tip.showunder(this.boxplot.labelG.node());
+      const table = this.tip.d.append("table").attr("class", "sja_simpletable");
+      table.append("tr").style("text-align", "center").append("td").attr("colspan", 2).style("padding", this.tablePadding).text(this.plot.key);
+      for (const stat of Object.values(this.plot.descrStats)) {
+        const row = table.append("tr");
+        row.append("td").style("padding", this.tablePadding).style("opacity", 0.5).text(stat.label);
+        row.append("td").style("padding", this.tablePadding).style("text-align", "center").text(stat.value);
+      }
+    });
+    this.boxplot.labelG.on("mouseout", () => {
+      this.tip.hide();
+    });
+  }
+  // addLineToolTips() {
+  // 	const addToolTips = (elem, text: string) => {
+  // 		const elemBBox = elem.node().getBBox()
+  // 		//Add an expanded area for the tooltip
+  // 		//Easier for user to hover over
+  // 		this.g
+  // 			.append('rect')
+  // 			.attr('x', elemBBox.x - 10)
+  // 			.attr('y', elemBBox.y - 10)
+  // 			.attr('width', elemBBox.width + 20)
+  // 			.attr('height', elemBBox.height + 20)
+  // 			.attr('fill', 'transparent')
+  // 			.style('pointer-events', 'all')
+  // 			.on('mouseover', () => {
+  // 				this.tip.clear().showunder(elem.node())
+  // 				this.addText(text)
+  // 			})
+  // 			.on('mouseout', () => {
+  // 				this.tip.hide()
+  // 			})
+  // 	}
+  // 	if (this.boxplot.linep50) {
+  // 		const median = this.plot.descrStats.find((d: any) => d.id == 'median')
+  // 		if (!median) throw `Missing median value for ${this.plot.key}`
+  // 		addToolTips(this.boxplot.linep50, `Median: ${median.value}`)
+  // 	}
+  // 	if (this.boxplot.linew1) {
+  // 		addToolTips(this.boxplot.linew1, `${this.boxplot.w1}`)
+  // 	}
+  // 	if (this.boxplot.linew2) {
+  // 		addToolTips(this.boxplot.linew2, `${this.boxplot.w2}`)
+  // 	}
+  // }
+  addOutliersTooltip() {
+    this.g.selectAll("circle").data(this.boxplot.out).each((d, i, nodes) => {
+      const circle = select_default(nodes[i]);
+      circle.on("mouseover", () => {
+        this.tip.clear().showunder(circle.node());
+        this.addText(d.value);
+      });
+      circle.on("mouseout", () => {
+        this.tip.hide();
+      });
+    });
+  }
+};
+
+// plots/boxplot/view/BoxPlotLabelMenu.ts
+var BoxPlotLabelMenu = class {
+  constructor(plot, app, interactions, tip, isVertical) {
+    const options = [
+      {
+        text: `Add filter: ${plot.key}`,
+        isVisible: () => true,
+        callback: () => interactions.addFilter(plot)
+      },
+      {
+        text: `Hide ${plot.key}`,
+        isVisible: () => true,
+        callback: () => interactions.hidePlot(plot)
+      },
+      {
+        text: `List samples`,
+        isVisible: (state) => state.termdbConfig.displaySampleIds && app.vocabApi.hasVerifiedToken(),
+        callback: async (event) => {
+          if (isVertical) tip.clear().show(event.clientX, event.clientY);
+          else tip.clear().showunder(plot.boxplot.labelG.node());
+          const rows = await interactions.listSamples(plot);
+          const tableDiv = tip.d.append("div");
+          const columns = [{ label: "Sample" }, { label: "Value" }];
+          renderTable({
+            rows,
+            columns,
+            div: tableDiv,
+            maxWidth: "30vw",
+            maxHeight: "25vh",
+            resize: true,
+            showLines: true
+          });
+        }
+      }
+    ];
+    plot.boxplot.labelG.on("click", (event) => {
+      tip.clear();
+      if (isVertical) tip.show(event.clientX, event.clientY);
+      else tip.showunder(plot.boxplot.labelG.node());
+      const state = app.getState();
+      for (const opt of options) {
+        if (!opt.isVisible(state)) continue;
+        tip.d.append("div").classed("sja_menuoption", true).text(opt.text).on("click", (event2) => {
+          tip.hide();
+          opt.callback(event2);
+        });
+      }
+      if (plot.color) {
+        tip.d.append("div").style("padding", "5px 10px").style("display", "inline-block").text("Color:").append("input").attr("type", "color").property("value", rgb(plot.color).formatHex()).on("change", (event2) => {
+          interactions.updatePlotColor(plot, event2.target.value);
+          tip.hide();
+        });
+      }
+    });
+  }
+};
+
+// plots/boxplot/view/View.ts
+var View = class {
+  constructor(data, settings, dom, app, interactions) {
+    this.app = app;
+    this.dom = dom;
+    this.interactions = interactions;
+    this.settings = settings;
+    if (!data || !data.plots.length) return;
+    const plotDim = data.plotDim;
+    dom.div.style("background-color", plotDim.backgroundColor);
+    dom.svg.transition().attr("width", plotDim.svg.width).attr("height", plotDim.svg.height).style("fill", plotDim.backgroundColor);
+    const setScaleFunc = settings.isLogScale ? log().base(10) : linear();
+    const scale = setScaleFunc.domain(plotDim.domain).range(plotDim.range);
+    this.renderTitle(plotDim, dom);
+    this.renderBoxPlots(dom, data, scale, settings);
+    this.renderAxis(plotDim, dom, scale, settings);
+  }
+  renderTitle(plotDim, dom) {
+    dom.chartTitle.text(plotDim.chartTitle);
+    const transformStr = `translate(${plotDim.title.x}, ${plotDim.title.y})${this.settings.isVertical ? `,rotate(-90)` : ""}`;
+    dom.plotTitle.attr("class", "sjpp-boxplot-title").style("font-weight", 600).attr("text-anchor", "middle").attr("transform", transformStr).attr("fill", plotDim.textColor).text(plotDim.title.text.length > 80 ? plotDim.title.text.slice(0, 80) + "..." : plotDim.title.text);
+  }
+  //Fix for the axis rendering min -> max when the plot is vertical
+  renderAxis(plotDim, dom, scale, settings) {
+    if (settings.isVertical) scale.range([scale.range()[1], scale.range()[0]]);
+    const ticks = scale.ticks();
+    const tickValues = plotDim.axis.values(ticks);
+    dom.axis.attr("class", "sjpp-boxplot-axis").attr("transform", `translate(${plotDim.axis.x}, ${plotDim.axis.y})`).transition().call(
+      this.settings.isVertical ? axisLeft(scale).tickValues(tickValues).tickFormat((d) => plotDim.axis.format(d)).tickPadding(8) : axisTop(scale).tickValues(tickValues).tickFormat((d) => plotDim.axis.format(d))
+    );
+    axisstyle({
+      axis: dom.axis,
+      showline: true,
+      fontsize: 12,
+      color: plotDim.textColor
+    });
+  }
+  renderBoxPlots(dom, data, scale, settings) {
+    for (const plot of data.plots) {
+      const g = dom.boxplots.append("g").attr("class", "sjpp-boxplot-plot").attr("padding", "5px");
+      drawBoxplot({
+        bp: plot.boxplot,
+        g,
+        color: settings.displayMode == "filled" ? "black" : plot.color,
+        scale,
+        rowheight: settings.rowHeight,
+        labpad: settings.labelPad,
+        labColor: plot.labColor
+      });
+      const transformStr = `translate(${plot.x}, ${plot.y})${settings.isVertical ? `, rotate(-90)` : ""}`;
+      g.attr("transform", transformStr);
+      if (settings.isVertical) {
+        g.select("text").attr("transform", "rotate(45)");
+      }
+      new BoxPlotToolTips(plot, g, this.dom.tip, settings.isVertical);
+      if (data.plots.length > 1) {
+        const labelMenuTip = new Menu({ padding: "" });
+        new BoxPlotLabelMenu(
+          plot,
+          this.app,
+          this.interactions,
+          labelMenuTip,
+          settings.isVertical
+        );
+      }
+    }
+  }
+};
+
+// plots/boxplot/interactions/ListSamples.ts
+var ListSamples = class {
+  constructor(app, state, id, plot, getRange = true) {
+    this.app = app;
+    this.plot = plot;
+    const plotConfig = state.plots.find((p) => p.id === id);
+    if (!plotConfig) throw "Box plot not found [ListSamples]";
+    try {
+      const min = plot.descrStats.min.value;
+      const max = plot.descrStats.max.value;
+      this.tvslst = this.getTvsLst(min, max, getRange, plotConfig.term, plotConfig.term2);
+    } catch (e) {
+      console.error(e.message || e);
+    }
+    this.term = plotConfig.term.q?.mode === "continuous" ? plotConfig.term : plotConfig.term2;
+    const filter = {
+      type: "tvslst",
+      join: "and",
+      lst: [state.termfilter.filter, this.tvslst],
+      in: true
+    };
+    this.dataOpts = {
+      terms: [this.term],
+      filter
+    };
+  }
+  async getData() {
+    return await this.app.vocabApi.getAnnotatedSampleData(this.dataOpts);
+  }
+  setRows(data) {
+    const rows = [];
+    for (const [c, k] of Object.entries(data.samples))
+      rows.push([
+        { value: data.refs.bySampleId[c].label },
+        { value: Number(roundValueAuto(k[this.term.$id].value)) }
+      ]);
+    return rows;
+  }
+  createTvsTerm(tw, tvslst) {
+    tvslst.lst.push({
+      type: "tvs",
+      tvs: {
+        term: tw.term
+      }
+    });
+  }
+  createTvsLstValues(tw, tvslst, lstIdx) {
+    this.createTvsTerm(tw, tvslst);
+    if (tw.term.type === "samplelst") {
+      const key = this.plot.seriesId;
+      const ids = tw.term.values[key].list.map((s) => s.sampleId);
+      const tvs = getSamplelstFilter(ids).lst[0];
+      tvslst.lst[lstIdx] = tvs;
+    } else tvslst.lst[lstIdx].tvs.values = [{ key: this.plot.seriesId, label: this.plot.key }];
+    if (tw.term.type === "condition") {
+      Object.assign(tvslst.lst[lstIdx].tvs, {
+        bar_by_grade: tw.q?.bar_by_grade || null,
+        value_by_max_grade: tw.q.value_by_max_grade
+      });
+    }
+  }
+  createTvsLstRanges(tw, tvslst, rangeStart, rangeStop, lstIdx) {
+    this.createTvsTerm(tw, tvslst);
+    tvslst.lst[lstIdx].tvs.ranges = [
+      {
+        //Only show integers for integer terms
+        start: tw.term.type == "integer" ? Math.round(rangeStart) : rangeStart,
+        stop: tw.term.type == "integer" ? Math.round(rangeStop) : rangeStop,
+        startinclusive: true,
+        stopinclusive: true,
+        startunbounded: false,
+        stopunbounded: false
+      }
+    ];
+  }
+  assignPlotRangeRanges() {
+    const { start, stop, startinclusive, stopinclusive, startunbounded, stopunbounded } = this.plot.overlayBins || {};
+    return [
+      {
+        start: start ?? null,
+        stop: stop ?? null,
+        startinclusive: startinclusive ?? true,
+        stopinclusive: stopinclusive ?? false,
+        startunbounded: startunbounded ?? null,
+        stopunbounded: stopunbounded ?? null
+      }
+    ];
+  }
+  isContinuousOrBinned(tw2) {
+    if (!("mode" in tw2.q)) return;
+    return tw2.q?.mode === "continuous" || ["float", "integer"].includes(tw2.term?.type) && this.plot.overlayBins != null;
+  }
+  getTvsLst(rangeStart, rangeStop, getRange = true, tw1, tw2) {
+    const tvslst = {
+      type: "tvslst",
+      in: true,
+      join: "and",
+      lst: []
+    };
+    const isTw1CategoricalOrCondition = ["categorical", "condition"].includes(tw1.term.type);
+    if (tw2) {
+      if (isTw1CategoricalOrCondition) {
+        this.createTvsLstValues(tw1, tvslst, 0);
+        if (getRange) this.createTvsLstRanges(tw2, tvslst, rangeStart, rangeStop, 1);
+      } else if (this.isContinuousOrBinned(tw2)) {
+        this.createTvsTerm(tw2, tvslst);
+        tvslst.lst[0].tvs.ranges = this.assignPlotRangeRanges();
+        if (getRange) this.createTvsLstRanges(tw1, tvslst, rangeStart, rangeStop, 1);
+      } else {
+        this.createTvsLstValues(tw2, tvslst, 0);
+        if (getRange) this.createTvsLstRanges(tw1, tvslst, rangeStart, rangeStop, 1);
+      }
+    } else {
+      if (getRange) this.createTvsLstRanges(tw1, tvslst, rangeStart, rangeStop, 0);
+    }
+    return tvslst;
+  }
+};
+
+// plots/boxplot/interactions/BoxPlotInteractions.ts
+var BoxPlotInteractions = class {
+  constructor(app, dom, id) {
+    this.app = app;
+    this.dom = dom;
+    this.id = id;
+  }
+  help() {
+    window.open("https://github.com/stjude/proteinpaint/wiki/Box-plot");
+  }
+  /** Option to add a global filter from the box plot label menu. */
+  addFilter(plot) {
+    const config = this.app.getState();
+    const sampleList = new ListSamples(this.app, config, this.id, plot, false);
+    const filterUiRoot = getFilterItemByTag(config.termfilter.filter, "filterUiRoot");
+    const filter = filterJoin([filterUiRoot, sampleList.tvslst]);
+    filter.tag = "filterUiRoot";
+    this.app.dispatch({
+      type: "filter_replace",
+      filter
+    });
+  }
+  /** Option to hide a plot from the box plot label menu. */
+  hidePlot(plot) {
+    const plotConfig = this.app.getState().plots.find((p) => p.id === this.id);
+    const config = structuredClone(plotConfig);
+    const contTerm = config.term.q.mode == "continuous" ? "term2" : "term";
+    if (!config[contTerm].q.hiddenValues) config[contTerm].q.hiddenValues = {};
+    config[contTerm].q.hiddenValues[plot.key] = 1;
+    this.app.dispatch({
+      type: "plot_edit",
+      id: this.id,
+      config
+    });
+  }
+  /** Trigger when clicking on a hidden plot in the legend */
+  unhidePlot(item) {
+    const plotConfig = this.app.getState().plots.find((p) => p.id === this.id);
+    const config = structuredClone(plotConfig);
+    const contTerm = config.term.q.mode == "continuous" ? "term2" : "term";
+    delete config[contTerm].q.hiddenValues[item.key];
+    this.app.dispatch({
+      type: "plot_edit",
+      id: this.id,
+      config
+    });
+  }
+  /** Option from box plot label to show the samples in a table within the tooltip. */
+  async listSamples(plot) {
+    const config = this.app.getState();
+    const sampleList = new ListSamples(this.app, config, this.id, plot);
+    const data = await sampleList.getData();
+    const rows = sampleList.setRows(data);
+    return rows;
+  }
+  /** Callback for color picker in plot(s) label menu */
+  updatePlotColor(plot, color) {
+    if (!plot.seriesId) return;
+    const plotConfig = this.app.getState().plots.find((p) => p.id === this.id);
+    const config = structuredClone(plotConfig);
+    config.term2.term.values[plot.seriesId].color = color;
+    this.app.dispatch({
+      type: "plot_edit",
+      id: this.id,
+      config
+    });
+  }
+  clearDom() {
+    this.dom.error.style("padding", "").text("");
+    this.dom.charts.selectAll("*").remove();
+    this.dom.legend.selectAll("*").remove();
+  }
+};
+
+// plots/boxplot/view/LegendRender.ts
+var LegendRenderer = class {
+  constructor(legendDiv, legendData, interactions, textColor) {
+    this.interactions = interactions;
+    this.textColor = textColor;
+    this.renderLegend(legendDiv, legendData);
+  }
+  renderLegend(legendDiv, legendData) {
+    legendDiv.attr("id", "sjpp-boxplot-legend");
+    for (const section of legendData) {
+      legendDiv.append("div").style("opacity", "0.5").style("color", this.textColor).text(section.label);
+      const sectionDiv = legendDiv.append("div").style("padding-left", "10px");
+      for (const item of section.items) {
+        this.addItem(item, sectionDiv);
+      }
+    }
+  }
+  addItem(item, sectionDiv) {
+    const legendItem = sectionDiv.append("div");
+    if (item.isPlot) {
+      legendItem.append("div").style("display", "inline-block").style("margin-right", "3px").style("position", "relative").style("vertical-align", "middle").html(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="${this.textColor}" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16" style="vertical-align: middle; display: block; margin: auto;">
+                <path stroke="#000" stroke-width="0.25" fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
+                <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
+                </svg>`);
+    }
+    legendItem.append("div").style("display", "inline-block").style("color", this.textColor).style("text-decoration", item.isHidden ? "line-through" : "").text(item.text);
+    if (item.isPlot) {
+      legendItem.attr("aria-label", `Click to unhide plot`).on("click", () => {
+        this.interactions.unhidePlot(item);
+      });
+    }
+  }
+};
+
+// plots/boxplot/view/AssociationTableRender.ts
+var AssociationTableRender = class {
+  constructor(div, data) {
+    const wrapper = div.style("vertical-align", "top").style("margin-top", "30px");
+    wrapper.append("div").text("Group comparisons (Wilcoxon's rank sum test)").style("font-weight", "600").style("text-align", "center");
+    const tableDiv = wrapper.append("div").style("margin-top", "5px");
+    renderTable({
+      div: tableDiv,
+      columns: [{ label: "Group 1" }, { label: "Group 2" }, { label: "P-Value" }],
+      rows: data
+    });
+  }
+};
+
+// plots/boxplot/BoxPlot.ts
+var TdbBoxplot = class _TdbBoxplot extends PlotBase {
+  constructor(opts, api) {
+    super(opts);
+    this.useDefaultSettings = true;
+    this.opts = opts;
+    this.api = api;
+    this.type = _TdbBoxplot.type;
+    this.components = {
+      controls: {}
+    };
+    const holder = opts.holder.classed("sjpp-boxplot-main", true);
+    const controls = opts.controls ? holder : holder.append("div");
+    const div = holder.append("div");
+    const errorDiv = div.append("div").attr("class", "sjpp-boxplot-error").style("opacity", 0.75);
+    const chartsDiv = div.append("div").attr("class", "sjpp-boxplot-charts").style("display", "flex").style("flex-direction", "row").style("flex-wrap", "wrap").style("max-width", "100vw");
+    this.dom = {
+      controls,
+      div,
+      error: errorDiv,
+      charts: chartsDiv,
+      legend: div.append("div").attr("class", "sjpp-boxplot-legend").style("margin-top", "25px"),
+      tip: new Menu()
+    };
+    if (opts.header) this.dom.header = opts.header.html("Box plot");
+  }
+  static {
+    this.type = "boxplot";
+  }
+  async setControls() {
+    const state = this.getState(this.app.getState());
+    const controlLabels = state.config.controlLabels;
+    if (!controlLabels) throw new Error("controls labels not found");
+    const inputs = [
+      {
+        type: "term",
+        configKey: "term",
+        chartType: "boxplot",
+        usecase: { target: "boxplot", detail: "term" },
+        label: controlLabels.term1?.label || renderTerm1Label,
+        vocabApi: this.app.vocabApi,
+        menuOptions: "edit"
+      },
+      {
+        type: "term",
+        configKey: "term2",
+        chartType: "boxplot",
+        usecase: { target: "boxplot", detail: "term2" },
+        title: controlLabels.term2.title || controlLabels.term2.label,
+        label: controlLabels.term2.label,
+        vocabApi: this.app.vocabApi,
+        numericEditMenuVersion: this.opts.numericEditMenuVersion || ["continuous", "discrete"],
+        defaultQ4fillTW: term0_term2_defaultQ
+      },
+      {
+        type: "term",
+        configKey: "term0",
+        chartType: "boxplot",
+        usecase: { target: "boxplot", detail: "term0" },
+        title: controlLabels.term0.title || controlLabels.term0.label,
+        label: controlLabels.term0.label,
+        vocabApi: this.app.vocabApi,
+        numericEditMenuVersion: this.opts.numericEditMenuVersion || ["continuous", "discrete"],
+        defaultQ4fillTW: term0_term2_defaultQ
+      },
+      {
+        label: "Order by",
+        title: "Order box plots by parameters",
+        type: "radio",
+        chartType: "boxplot",
+        settingsKey: "orderByMedian",
+        options: [
+          { label: "Default", value: false },
+          { label: "Median values", value: true }
+        ],
+        getDisplayStyle: () => {
+          let style = "none";
+          for (const k of Object.keys(this.data.charts)) {
+            const chart = this.data.charts[k];
+            if (chart.plots.length > 1) style = "";
+          }
+          return style;
+        }
+      },
+      {
+        label: "Scale",
+        title: "Change the axis scale",
+        type: "radio",
+        chartType: "boxplot",
+        settingsKey: "isLogScale",
+        options: [
+          { label: "Linear", value: false },
+          { label: "Log10", value: true }
+        ]
+      },
+      {
+        label: "Orientation",
+        title: "Change the orientation of the box plots",
+        type: "radio",
+        chartType: "boxplot",
+        settingsKey: "isVertical",
+        options: [
+          { label: "Vertical", value: true },
+          { label: "Horizontal", value: false }
+        ]
+      },
+      {
+        label: "Plot length",
+        title: "Set the plot length of the entire plot in pixels, >=200",
+        type: "number",
+        chartType: "boxplot",
+        settingsKey: "plotLength",
+        debounceInterval: 500,
+        min: 200,
+        step: 10
+      },
+      {
+        label: "Plot height",
+        title: "Set the height of each box plot between 20 and 50",
+        type: "number",
+        chartType: "boxplot",
+        settingsKey: "rowHeight",
+        step: 1,
+        max: 50,
+        min: 20,
+        debounceInterval: 500,
+        processInput: (val) => {
+          if (this.useDefaultSettings == true) this.useDefaultSettings = false;
+          return val;
+        }
+      },
+      {
+        label: "Plot padding",
+        title: "Set the space between each box plot. Number must be between 10 and 20",
+        type: "number",
+        chartType: "boxplot",
+        settingsKey: "rowSpace",
+        step: 1,
+        max: 20,
+        min: 10,
+        debounceInterval: 500,
+        processInput: (val) => {
+          if (this.useDefaultSettings == true) this.useDefaultSettings = false;
+          return val;
+        }
+      },
+      {
+        label: "Default color",
+        type: "color",
+        chartType: "boxplot",
+        settingsKey: "color",
+        getDisplayStyle: () => {
+          let style = "";
+          for (const k of Object.keys(this.data.charts)) {
+            const chart = this.data.charts[k];
+            if (chart.plots.length > 1) style = "none";
+          }
+          return style;
+        }
+      },
+      {
+        label: "Display mode",
+        title: "Apply a dark theme to the plot",
+        type: "radio",
+        chartType: "boxplot",
+        settingsKey: "displayMode",
+        options: [
+          { label: "Default", value: "default" },
+          { label: "Filled", value: "filled" },
+          { label: "Dark mode", value: "dark" }
+        ]
+      },
+      {
+        label: "Show association tests",
+        boxLabel: "",
+        type: "checkbox",
+        chartType: "boxplot",
+        settingsKey: "showAssocTests",
+        title: `Show association tests next to the box plots.`,
+        getDisplayStyle: (plot) => {
+          return plot?.term2 ? "" : "none";
+        }
+      }
+    ];
+    if (state.termdbConfig?.boxplots?.removeOutliers) {
+      inputs.push({
+        label: "Remove outliers",
+        boxLabel: "",
+        type: "checkbox",
+        chartType: "boxplot",
+        settingsKey: "removeOutliers",
+        title: `Option to remove outliers from the analysis`
+      });
+    }
+    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.boxplot", (event) => {
+      this.download(event);
+    });
+    this.components.controls.on("helpClick.boxplot", () => {
+      this.interactions.help();
+    });
+    if (state.vocab.dslabel.toLowerCase() == "gdc") {
+      this.dom.controls.select('div[aria-label="Documentation"]').remove();
+    }
+  }
+  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 new Error(
+        `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`
+      );
+    }
+    const parentConfig = appState.plots.find((p) => p.id === this.parentId);
+    const termfilter = getCombinedTermFilter(appState, config.filter || parentConfig?.filter);
+    return {
+      termdbConfig: appState.termdbConfig,
+      termfilter,
+      vocab: appState.vocab,
+      config: Object.assign({}, config, {
+        settings: {
+          boxplot: config.settings.boxplot
+        }
+      })
+    };
+  }
+  async init() {
+    this.dom.div.style("display", "inline-block").style("margin-left", "20px");
+    this.interactions = new BoxPlotInteractions(this.app, this.dom, this.id);
+    await this.setControls();
+  }
+  async main() {
+    try {
+      const config = structuredClone(this.state.config);
+      if (config.childType != this.type && config.chartType != this.type) return;
+      if (!this.interactions) throw new Error("Interactions not initialized [box plot main()]");
+      const settings = config.settings.boxplot;
+      const model = new Model(this, config);
+      const data = await model.getData();
+      config.term.q.descrStats = data.descrStats;
+      if (data.error) throw new Error(data.error);
+      if (!data.charts || !Object.keys(data.charts).length) {
+        this.interactions.clearDom();
+        this.dom.error.style("padding", "20px 20px 20px 60px").text("No visible box plot data to render");
+        return;
+      }
+      this.data = data;
+      this.dom.charts.selectAll("*").remove();
+      const labels = [];
+      const tempsvg = this.dom.charts.append("svg");
+      for (const key of Object.keys(data.charts)) {
+        const chart = data.charts[key];
+        const chartLabels = chart.plots.filter((p) => !p.isHidden).map((p) => p.boxplot.label);
+        labels.push(...chartLabels);
+      }
+      const maxLabelLgth = getMaxLabelWidth(tempsvg.append("g"), labels);
+      tempsvg.remove();
+      const legend = [];
+      for (const key of Object.keys(data.charts)) {
+        const chart = data.charts[key];
+        chart.absMin = data.absMin;
+        chart.absMax = data.absMax;
+        chart.uncomputableValues = data.uncomputableValues;
+        const viewModel = new ViewModel(config, chart, settings, maxLabelLgth, this.useDefaultSettings);
+        for (const l of viewModel.viewData.legend) {
+          if (!legend.find((x) => x.label == l.label)) legend.push(l);
+        }
+        if ((viewModel.rowSpace !== settings.rowSpace || viewModel.rowHeight !== settings.rowHeight) && this.useDefaultSettings == true) {
+          settings.rowSpace = viewModel.rowSpace;
+          settings.rowHeight = viewModel.rowHeight;
+          this.app.save({
+            type: "plot_edit",
+            id: this.id,
+            config: {
+              settings: {
+                boxplot: {
+                  rowSpace: viewModel.rowSpace,
+                  rowHeight: viewModel.rowHeight
+                }
+              }
+            }
+          });
+        }
+        const chartDiv = this.dom.charts.append("div").attr("class", "sjpp-boxplot-chartDiv").style("padding", Object.keys(data.charts).length > 1 ? "20px 20px 0px 0px" : "0px");
+        const chartSvg = chartDiv.append("svg");
+        chart.svg = chartSvg;
+        const chartTitle = chartDiv.append("div").attr("class", "pp-chart-title").style("display", config.term0 ? "block" : "none").style("text-align", "center").style("font-size", "1.1em").style("margin-bottom", "20px");
+        const assocTableDiv = chartDiv.append("div").attr("class", "sjpp-boxplot-assocTableDiv").style("display", "inline-block");
+        const chartDom = Object.assign({}, this.dom, {
+          svg: chartSvg,
+          chartTitle,
+          plotTitle: chartSvg.append("text"),
+          axis: chartSvg.append("g"),
+          boxplots: chartSvg.append("g"),
+          assocTableDiv
+        });
+        new View(viewModel.viewData, settings, chartDom, this.app, this.interactions);
+        if (chart.wilcoxon) new AssociationTableRender(chartDom.assocTableDiv, chart.wilcoxon);
+      }
+      this.dom.legend.selectAll("*").remove();
+      const textColor = settings.displayMode == "dark" ? "white" : "black";
+      if (legend.length) new LegendRenderer(this.dom.legend, legend, this.interactions, textColor);
+    } catch (e) {
+      if (this.app.isAbortError(e)) return;
+      if (e.stack) console.log(e.stack);
+      if (e instanceof Error) console.error(e.message || e);
+      throw new Error(e);
+    }
+  }
+  getChartImages() {
+    const chartImages = [];
+    const charts = this.data.charts;
+    for (const [key, chart] of Object.entries(charts)) {
+      const svg = chart.svg;
+      const title = getChartTitle(this.state.config, key);
+      const name = `${this.state.config.term.term.name}  ${title}`;
+      chartImages.push({ name, svg });
+    }
+    return chartImages;
+  }
+  download(event) {
+    if (!this.state) return;
+    const name2svg = this.getChartImages();
+    const dm = new DownloadMenu(name2svg, this.state.config.term.term.name);
+    dm.show(event.clientX, event.clientY);
+  }
+};
+var boxplotInit = getCompInit(TdbBoxplot);
+var componentInit = boxplotInit;
+function getDefaultBoxplotSettings(app, overrides = {}) {
+  const defaults = {
+    plotLength: 550,
+    color: plotColor,
+    displayMode: "default",
+    labelPad: 10,
+    isLogScale: false,
+    isVertical: false,
+    orderByMedian: false,
+    rowHeight: 50,
+    rowSpace: 15,
+    removeOutliers: false,
+    showAssocTests: true
+  };
+  return Object.assign(defaults, overrides);
+}
+async function getPlotConfig(opts, app) {
+  if (!opts.term) throw new Error("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.error(new Error(`${e} [boxplot getPlotConfig()]`));
+    throw new Error(`boxplot getPlotConfig() failed`);
+  }
+  const config = {
+    id: opts.term.term.id,
+    controlLabels: Object.assign({}, defaultUiLabels, app.vocabApi.termdbConfig.uiLabels || {}),
+    settings: {
+      controls: {
+        term2: null,
+        term0: null
+      },
+      boxplot: getDefaultBoxplotSettings(app, opts.overrides || {})
+    }
+  };
+  return copyMerge(config, opts);
+}
+
+export {
+  TdbBoxplot,
+  boxplotInit,
+  componentInit,
+  getDefaultBoxplotSettings,
+  getPlotConfig
+};
+//# sourceMappingURL=chunk-46T54RUY.js.map