@sjcrh/proteinpaint-client 2.208.0 → 2.210.0

package/dist/Violin-BAS6DQHL.js

@@ -1,1081 +0,0 @@
-import {
-  getDefaultViolinSettings
-} from "./chunk-KAY2ODXX.js";
-import {
-  DownloadMenu,
-  ListSamples,
-  PlotBase,
-  controlsInit,
-  defaultUiLabels,
-  fillTermWrapper,
-  filterJoin,
-  getCombinedTermFilter,
-  getFilterItemByTag,
-  getMaxLabelWidth,
-  getSingleCellSpecialCase,
-  getT0T2defaultQ,
-  htmlLegend,
-  renderTable,
-  renderTerm1Label,
-  table2col
-} from "./chunk-QJ3HYZH3.js";
-import "./chunk-HJ6L54YS.js";
-import "./chunk-KV4W2ACA.js";
-import "./chunk-DMWOK4DS.js";
-import {
-  Menu
-} from "./chunk-ELJX3QIQ.js";
-import "./chunk-5IMFPVGT.js";
-import "./chunk-EEB5VE2A.js";
-import "./chunk-6RRZRISL.js";
-import "./chunk-2KM4PRQM.js";
-import "./chunk-VMRO6DMC.js";
-import "./chunk-HKKTNIMX.js";
-import {
-  isNumericTw,
-  isSingleCellTerm
-} from "./chunk-GMRIEUBW.js";
-import "./chunk-4EZLVENZ.js";
-import {
-  copyMerge,
-  getCompInit
-} from "./chunk-WINIL2KN.js";
-import "./chunk-PF4DSFDR.js";
-import {
-  niceNumLabels
-} from "./chunk-7X6NF7NI.js";
-import {
-  getValueConversionFactor,
-  toUserUnit
-} from "./chunk-W5J3LTYS.js";
-import {
-  axisLeft,
-  axisTop,
-  basis_default,
-  line_default
-} from "./chunk-Z2ZITHT4.js";
-import {
-  format,
-  linear,
-  log
-} from "./chunk-4OLM3KSB.js";
-import "./chunk-FXQXCOII.js";
-import "./chunk-TLT4YIG3.js";
-import {
-  brushX,
-  brushY
-} from "./chunk-5R63Q5KH.js";
-import "./chunk-I6Y4O3RR.js";
-import {
-  rgb
-} from "./chunk-Q5RDQNIT.js";
-import "./chunk-DQC5FFGV.js";
-import "./chunk-HS5PO5ZQ.js";
-
-// plots/violin/violin.renderer.ts
-function getNumericTerm(t1, t2) {
-  return t2?.q?.mode === "continuous" ? t2.term : t1?.term;
-}
-function setViolinRenderer(self) {
-  self.render = function() {
-    const settings = self.config.settings.violin;
-    const isH = settings.orientation === "horizontal";
-    const t1 = self.config.term;
-    const t2 = self.config.term2;
-    const termNum = t2?.term.type === "condition" || t2?.term.type === "samplelst" || t2?.term.type === "categorical" || (t2?.term.type === "float" || t2?.term.type === "integer") && t1.q.mode === "continuous" ? t2 : t1;
-    if (!termNum?.q.hiddenValues) termNum.q.hiddenValues = {};
-    if (termNum?.term?.values) {
-      for (const [k, val] of Object.entries(termNum.term.values)) {
-        const v = val;
-        if (v.uncomputable) {
-          if (termNum.q.hiddenValues[k]) {
-            termNum.q.hiddenValues[v.label] = 1;
-            delete termNum.q.hiddenValues[k];
-          }
-        }
-      }
-    }
-    self.dom.violinDiv.selectAll("*").remove();
-    const chartKeys = Object.keys(self.data.charts);
-    if (!chartKeys?.length) {
-      self.dom.banner.html(`<span>No visible violin plot data to render</span>`).style("display", "block");
-      self.dom.legendDiv.selectAll("*").remove();
-      return;
-    }
-    for (const chartKey of chartKeys) {
-      const chart = self.data.charts[chartKey];
-      const plots = chart.plots.filter((p) => !termNum?.q?.hiddenValues?.[p.label || p.seriesId]);
-      if (settings.orderByMedian == true) {
-        plots.sort(
-          (a, b) => a.summaryStats.find((x) => x.id === "median").value - b.summaryStats.find((x) => x.id === "median").value
-        );
-      }
-      if (self.legendRenderer) self.legendRenderer(getLegendGrps(termNum, self));
-      const chartDiv = self.dom.violinDiv.append("div").attr("class", "sjpp-vp-chartDiv").style("padding", Object.keys(self.data.charts).length > 1 ? "20px 20px 0px 0px" : "0px");
-      chart.chartDiv = chartDiv;
-      if (plots.length === 0) {
-        chartDiv.html(
-          ` <span style="opacity:.6;font-size:1em;margin-left:90px;">No visible violin plot data to render</span>`
-        );
-        return;
-      }
-      chartDiv.select(".sjpp-violin-plot").remove();
-      const chartWrapper = chartDiv.append("div").style("display", "inline-block");
-      if (chart.chartId) {
-        const totalCount = chart.plots.reduce((acc, plot) => acc + plot.plotValueCount, 0);
-        chartWrapper.append("div").attr("class", "pp-chart-title").style("display", "block").style("text-align", "center").style("font-size", "1.1em").style("margin-bottom", "5px").html(`${self.getChartTitle(chart.chartId)} (n=${totalCount})`);
-      }
-      const svgData = renderSvg(t1, plots, chartWrapper, self, isH, settings);
-      renderScale(t1, t2, settings, isH, svgData, self);
-      let y = 0;
-      const thickness = self.settings.plotThickness || self.getAutoThickness();
-      for (const plot of plots) {
-        const wScale = linear().domain([plot.density.densityMax, plot.density.densityMin]).range([thickness / 2, 0]);
-        let areaBuilder;
-        if (isH) {
-          areaBuilder = line_default().curve(basis_default).x((d) => svgData.axisScale(d.x0)).y((d) => wScale(d.density));
-        } else {
-          areaBuilder = line_default().curve(basis_default).x((d) => wScale(d.density)).y((d) => svgData.axisScale(d.x0));
-        }
-        const { violinG, height } = renderViolinPlot(svgData, plot, isH, wScale, areaBuilder, y);
-        y += height;
-        if (self.opts.mode != "minimal") renderLabels(t1, t2, violinG, plot, isH, settings);
-        if (isSingleCellTerm(self.config.term.term.type)) {
-        } else {
-          if (self.opts.mode != "minimal") renderBrushing(t1, t2, violinG, settings, plot, isH, svgData);
-        }
-        self.labelHideLegendClicking(t2, plot);
-      }
-      if (self.settings.showAssociationTests) self.renderPvalueTable(chartDiv, chart);
-    }
-  };
-  self.displaySummaryStats = function(data, event) {
-    const d = data;
-    if (!d.summaryStats) return;
-    self.dom.hovertip.clear().show(event.clientX, event.clientY);
-    const table = table2col({ holder: self.dom.hovertip.d.append("div") });
-    const term = getNumericTerm(self.config.term, self.config.term2);
-    for (const { key, label, value } of Object.values(d.summaryStats))
-      table.addRow(label, key == "total" ? value : toUserUnit(value, term));
-  };
-  self.getAutoThickness = function() {
-    let maxPlotCount = 0;
-    for (const k of Object.keys(this.data.charts)) {
-      const chart = this.data.charts[k];
-      maxPlotCount = Math.max(maxPlotCount, chart.plots.length);
-    }
-    if (maxPlotCount == 1) return 150;
-    return Math.min(100, Math.max(40, 600 / maxPlotCount));
-  };
-  self.getPlotThicknessWithPadding = function() {
-    const plotThickness = self.settings.plotThickness || self.getAutoThickness();
-    return plotThickness + self.settings.rowSpace;
-  };
-  self.renderPvalueTable = function(chartDiv, chart) {
-    if (!chart.pvalues) return;
-    const tableHolder = chartDiv.append("div").classed("sjpp-tableHolder", true).style("display", "inline-block").style("padding", "10px").style("vertical-align", "top").style("margin-left", "0px").style("margin-top", "30px").style("margin-right", "30px");
-    const t1 = self.config.term;
-    const t2 = self.config.term2;
-    if (!t2) {
-      tableHolder.style("display", "none");
-      return;
-    }
-    const termNum = t2?.term.type === "condition" || t2?.term.type === "samplelst" || t2?.term.type === "categorical" || (t2?.term.type === "float" || t2?.term.type === "integer") && t1.q.mode === "continuous" ? t2 : t1;
-    const pvalues = chart.pvalues.filter((arr) => {
-      for (let i = 0; i < arr.length; i++) {
-        if (typeof arr[i].value === "string") {
-          if (termNum.q?.hiddenValues && arr[i].value in termNum.q.hiddenValues) {
-            return false;
-          }
-        }
-      }
-      return true;
-    });
-    tableHolder.style("display", "inline-block").style("vertical-align", "top").append("div").style("font-weight", "bold").text(pvalues.length > 0 ? "Group comparisons (Wilcoxon's rank sum test)" : "");
-    const columns = [{ label: "Group 1" }, { label: "Group 2" }, { label: "P-value" }];
-    const rows = pvalues;
-    const isH = this.settings.orientation === "horizontal";
-    const maxHeight = isH ? self.getPlotThicknessWithPadding() * chart.plots.length + 10 : this.settings.svgw + this.config.term.term.name.length;
-    renderTable({
-      rows,
-      columns,
-      div: tableHolder,
-      showLines: false,
-      maxWidth: "27vw",
-      maxHeight: `${maxHeight}px`,
-      resize: true
-    });
-  };
-  self.getChartTitle = function(chartId) {
-    if (!self.config.term0) return chartId;
-    return self.config.term0.term.values && chartId in self.config.term0.term.values ? self.config.term0.term.values[chartId].label : chartId;
-  };
-  function createMargins(labelsize, settings, isH, isMinimal) {
-    let margins;
-    if (isMinimal) {
-      margins = isH ? { left: 5, top: settings.axisHeight, right: settings.rightMargin, bottom: 10 } : { left: settings.axisHeight, top: 30, right: settings.rightMargin, bottom: 10 };
-    } else {
-      margins = isH ? { left: labelsize + 5, top: settings.axisHeight, right: settings.rightMargin, bottom: 10 } : { left: settings.axisHeight, top: 50, right: settings.rightMargin, bottom: labelsize };
-    }
-    return margins;
-  }
-  function renderSvg(t1, plots, chartDiv, self2, isH, settings) {
-    const violinDiv = chartDiv.append("div").style("display", "inline-block").style("padding", self2.opts.mode != "minimal" ? "5px" : "0px").style("overflow", "auto").style("scrollbar-width", "none");
-    const violinSvg = violinDiv.append("svg");
-    const labelsize = getMaxLabelWidth(
-      violinSvg,
-      plots.map((plot) => `${plot.label}, n=${plot.plotValueCount}`)
-    );
-    const margin = createMargins(labelsize, settings, isH, self2.opts.mode == "minimal");
-    const plotThickness = self2.getPlotThicknessWithPadding();
-    const width = margin.left + margin.top + (isH ? settings.svgw : plotThickness * plots.length + t1.term.name.length);
-    const height = margin.bottom + margin.top + (isH ? plotThickness * plots.length : settings.svgw + t1.term.name.length);
-    violinSvg.attr("width", width).attr("height", height).classed("sjpp-violin-plot", true).attr("data-testid", "sja_violin_plot");
-    const svgG = violinSvg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-    return { margin, svgG, axisScale: createNumericScale(self2, settings, isH), violinSvg };
-  }
-  function renderScale(t1, t2, settings, isH, svg, self2) {
-    const g = svg.svgG.append("g").style("font-size", "12").classed(settings.isLogScale ? "sjpp-logscale" : "sjpp-linearscale", true);
-    const f = getValueConversionFactor(getNumericTerm(t1, t2));
-    const uiScale = f == 1 ? svg.axisScale : svg.axisScale.copy().domain(svg.axisScale.domain().map((v) => v * f));
-    const ticks = settings.isLogScale ? uiScale.ticks(15) : (
-      // svg.axisScale.ticks().filter(tick => tick > 0 || tick < 0)
-      uiScale.ticks()
-    );
-    g.call(
-      (isH ? axisTop : axisLeft)(uiScale).scale(uiScale).tickFormat((d, i) => {
-        const value = Number(d);
-        if (settings.isLogScale) {
-          if (self2.app.vocabApi.termdbConfig.logscaleBase2) {
-            if (ticks.length > 10 && i % 2 !== 0) return "";
-            if (value < 0.1) return format(".3f")(value);
-            return format(".1f")(value);
-          } else {
-            if (ticks.length >= 12 && i % 5 !== 0) return "";
-            if (value < 50) return String(value);
-            return format(".1s")(value);
-          }
-        }
-        if (ticks.length >= 12 && i % 2 !== 0) return "";
-        return String(value);
-      }).tickValues(ticks)
-    );
-    if (self2.opts.mode != "minimal") {
-      const numTerm = getNumericTerm(t1, t2);
-      const n = numTerm.valueConversion ? `${numTerm.name} (${numTerm.valueConversion.toUnit}s)` : numTerm.name;
-      svg.svgG.append("text").text(n).classed("sjpp-numeric-term-label", true).attr("data-testid", `sjpp-violin-label-${n}`).style("font-weight", 600).attr("text-anchor", "middle").attr("x", isH ? settings.svgw / 2 : -settings.svgw / 2).attr("y", isH ? -30 : -45).style("opacity", 0).attr("transform", isH ? null : "rotate(-90)").style("opacity", 1);
-    }
-  }
-  function renderViolinPlot(svgData, plot, isH, wScale, areaBuilder, y) {
-    const label = plot.label?.split(",")[0];
-    const catTerm = self.config.term.q.mode == "discrete" ? self.config.term : self.config.term2;
-    const category = catTerm?.term.values ? Object.values(catTerm.term.values).find(
-      (o) => o.label == label
-    ) ?? null : null;
-    let color;
-    if (catTerm) {
-      if (catTerm.q.type == "predefined-groupset" || catTerm.q.type == "custom-groupset") {
-        const groupset = catTerm.q.type == "predefined-groupset" ? catTerm.term.groupsetting.lst[catTerm.q.predefined_groupset_idx] : catTerm.q.customset;
-        if (!groupset) throw "groupset is missing";
-        const group = groupset.groups.find((g) => g.name == label);
-        if (group?.color) color = group.color;
-      } else {
-        color = category?.color;
-      }
-    }
-    if (!color) color = self.config.settings.violin.defaultColor;
-    if (!plot.color) plot.color = color;
-    if (category && !category.color) category.color = color;
-    const svg = svgData.svgG;
-    const violinG = svg.append("g").datum(plot).attr("class", "sjpp-violinG");
-    renderArea(violinG, plot, areaBuilder);
-    renderArea(violinG, plot, isH ? areaBuilder.y((d) => -wScale(d.density)) : areaBuilder.x((d) => -wScale(d.density)));
-    renderSymbolImage(self, violinG, plot, isH);
-    if (self.opts.mode != "minimal") renderMedian(violinG, isH, plot, svgData, self);
-    renderLines(violinG, isH, self.config.settings.violin.lines, svgData);
-    if ("value" in self.state.config) {
-      const value = svgData.axisScale(self.state.config.value);
-      const s = self.config.settings.violin;
-      violinG.append("line").style("stroke", "black").style("stroke-width", s.medianThickness).attr("x1", 200).attr("x2", 200).attr("x1", isH ? value : -s.medianLength).attr("x2", isH ? value : s.medianLength).attr("y1", isH ? -s.medianLength : value).attr("y2", isH ? s.medianLength : value);
-    }
-    const height = self.getPlotThicknessWithPadding();
-    const translate = isH ? `translate(0, ${y + height / 2}) ` : `translate(${y + height / 2}, 0)`;
-    violinG.attr("transform", translate);
-    return { violinG, height };
-  }
-  function renderLabels(t1, t2, violinG, plot, isH, settings) {
-    violinG.append("text").attr("data-testid", "sjpp-violin-label").text(`${plot.label}, n=${plot.plotValueCount}`).style("cursor", "pointer").on("click", function(event) {
-      if (!event) return;
-      self.displayLabelClickMenu(t1, t2, plot, event);
-    }).on("mouseover", function(event, d) {
-      event.stopPropagation();
-      if (!event) return;
-      self.displaySummaryStats(d, event);
-    }).on("mouseout", function() {
-      self.dom.hovertip.hide();
-    }).style("opacity", 0).style("opacity", 1).attr("x", isH ? -5 : 0 - settings.svgw - 5).attr("y", 0).attr("text-anchor", "end").attr("dominant-baseline", "central").attr("transform", isH ? null : "rotate(-90)");
-  }
-  function renderArea(violinG, plot, areaBuilder) {
-    if (plot.density.densityMax == 0) return;
-    violinG.append("path").attr("class", "sjpp-vp-path").style("fill", self.opts.mode === "minimal" ? rgb(221, 221, 221) : plot.color).style("opacity", 0).attr("stroke", rgb(plot.color).darker()).attr("stroke-width", 1).attr("stroke-linejoin", "round").style("opacity", "0.8").attr("d", areaBuilder(plot.density.bins));
-  }
-  function renderSymbolImage(self2, violinG, plot, isH) {
-    const i = violinG.append("image").style("opacity", 0).classed(self2.config.settings.violin.datasymbol === "rug" ? "sjpp-rug-img" : "sjpp-beans-img", true).style("opacity", 1).attr("xlink:href", plot.src).attr(
-      "transform",
-      isH ? `translate(0, -${self2.settings.radius / 2})` : `translate(-${self2.settings.radius / 2}, 0)`
-    );
-    if (self2.settings.orientation == "horizontal") {
-      i.attr("width", self2.settings.svgw);
-    } else if (self2.settings.orientation == "vertical") {
-      i.attr("height", self2.settings.svgw);
-    }
-  }
-  function renderMedian(violinG, isH, plot, svgData, self2) {
-    const s = self2.config.settings.violin;
-    const median = svgData.axisScale(plot.summaryStats.median.value);
-    if (plot.plotValueCount >= 2) {
-      violinG.append("line").attr("class", "sjpp-median-line").style("stroke-width", s.medianThickness).style("stroke", s.medianColor).style("opacity", "0.5").attr("y1", isH ? -s.medianLength : median).attr("y2", isH ? s.medianLength : median).attr("x1", isH ? median : -s.medianLength).attr("x2", isH ? median : s.medianLength);
-    } else return;
-  }
-  function renderLines(violinG, isH, lines, svgData) {
-    const plotThickness = self.settings.plotThickness;
-    violinG.selectAll(".sjpp-vp-line").remove();
-    if (!lines?.length) return;
-    for (const line of lines) {
-      violinG.append("line").attr("class", "sjpp-vp-line").style("stroke", self.opts.mode == "minimal" ? "red" : "black").attr("y1", isH ? -(plotThickness / 2) : svgData.axisScale(line)).attr("y2", isH ? plotThickness / 2 : svgData.axisScale(line)).attr("x1", isH ? svgData.axisScale(line) : -(plotThickness / 2)).attr("x2", isH ? svgData.axisScale(line) : plotThickness / 2);
-    }
-  }
-  function renderBrushing(t1, t2, violinG, settings, plot, isH, svgData) {
-    if (settings.datasymbol === "rug" || settings.datasymbol === "bean") {
-      const br = isH ? brushX().extent([
-        [0, -20],
-        [settings.svgw, 20]
-      ]).on("end", (event) => {
-        if (!event.selection) return;
-        self.displayBrushMenu(t1, t2, self, plot, event, svgData.axisScale, isH);
-        document.body.addEventListener("pointerdown", onClickOut, true);
-      }) : brushY().extent([
-        [-20, 0],
-        [20, settings.svgw]
-      ]).on("end", (event) => {
-        if (!event.selection) return;
-        self.displayBrushMenu(t1, t2, self, plot, event, svgData.axisScale, isH);
-        document.body.addEventListener("pointerdown", onClickOut, true);
-      });
-      const brushG = violinG.append("g").classed("sjpp-brush", true).call(br);
-      const onClickOut = (e) => {
-        if (!brushG || !br) return;
-        if (!brushG.node().contains(e.target)) br.clear(brushG);
-        document.body.removeEventListener("pointerdown", onClickOut, true);
-      };
-    }
-  }
-}
-function createNumericScale(self, settings, isH) {
-  let axisScale;
-  if (settings.isLogScale) {
-    axisScale = log().base(self.app.vocabApi.termdbConfig.logscaleBase2 ? 2 : 10).domain([self.data.min, self.data.max]).range(isH ? [0, settings.svgw] : [settings.svgw, 0]);
-  } else {
-    axisScale = linear().domain([self.data.min, self.data.max]).range(isH ? [0, settings.svgw] : [settings.svgw, 0]);
-  }
-  return axisScale;
-}
-function getLegendGrps(termNum, self) {
-  const legendGrps = [], t1 = self.config.term, t2 = self.config.term2, headingStyle = "color: #555; font-weight: 400";
-  if (self.settings.showStats) addDescriptiveStats(t1, legendGrps, headingStyle, self);
-  if (t2?.term.type === "float" || t2?.q.mode === "continuous" || t2?.term.type === "integer")
-    addDescriptiveStats(t2, legendGrps, headingStyle, self);
-  addUncomputableValues(
-    t1?.q.mode === "continuous" && t1?.q.hiddenValues && Object.keys(t1?.q.hiddenValues).length > 0 ? t1 : t2?.q.mode === "continuous" && t2?.q.hiddenValues && Object.keys(t2?.q.hiddenValues).length > 0 ? t2 : null,
-    legendGrps,
-    headingStyle,
-    self
-  );
-  if (t2) {
-    if (termNum.q.hiddenValues && Object.entries(termNum.q.hiddenValues).length != 0) {
-      addHiddenValues(termNum, legendGrps, headingStyle);
-    }
-  }
-  return legendGrps;
-}
-function addDescriptiveStats(term, legendGrps, headingStyle, self) {
-  const descrStats = term?.q?.descrStats;
-  if (descrStats) {
-    const items = Object.values(descrStats).map((stat) => {
-      return {
-        text: `${stat.label}: ${stat.value}`,
-        noIcon: true
-      };
-    });
-    const title = self.config.term2?.term.type === "float" || self.config.term2?.term.type === "integer" ? `Descriptive statistics: ${term.term.name}` : `Descriptive statistics`;
-    const name = `<span style="${headingStyle}">${title}</span>`;
-    legendGrps.push({ name, items });
-  }
-}
-function addUncomputableValues(term, legendGrps, headingStyle, self) {
-  if (term?.term.values) {
-    const items = [];
-    const values = term.term.values;
-    for (const k in values) {
-      const label = values[k]?.label;
-      if (!label) continue;
-      if (self.data.uncomputableValues?.[label]) {
-        items.push({
-          text: `${label}, n = ${self.data.uncomputableValues[label]}`,
-          noIcon: true,
-          /** Need to specify that this is a hidden value for
-           * text styling in the legend but not a plot to avoid
-           * rendering a tooltip or click events.
-           */
-          isHidden: true,
-          isClickable: false,
-          hiddenOpacity: 1
-        });
-      }
-    }
-    if (items.length) {
-      const name = self.config.term2?.term.type === "float" || self.config.term2?.term.type === "integer" ? `<span style="${headingStyle}">${term.term.name}</span>` : `<span style="${headingStyle}">Other categories</span>`;
-      legendGrps.push({ name, items });
-    }
-  }
-}
-function addHiddenValues(term, legendGrps, headingStyle) {
-  const items = [];
-  for (const key of Object.keys(term.q.hiddenValues || {})) {
-    items.push({
-      text: `${key}`,
-      noIcon: true,
-      /** Need to specify that this is a hidden value for
-       * text styling in the legend and  a plot for
-       * rendering a tooltip or click events.
-       */
-      isHidden: true,
-      isClickable: true,
-      hiddenOpacity: 1
-    });
-  }
-  const title = `${term.term.name}`;
-  const name = `<span style="${headingStyle}">${title}</span>`;
-  legendGrps.push({ name, items });
-}
-
-// plots/violin/violin.interactivity.ts
-function setInteractivity(self) {
-  self.getChartImages = function() {
-    const charts = [];
-    for (const chart of Object.values(self.data.charts)) {
-      const title = self.getChartTitle(chart.chartId);
-      const name = `${self.config.term.term.name}  ${title}`;
-      const chartDiv = chart.chartDiv;
-      charts.push({ name, svg: chartDiv.select("svg") });
-    }
-    return charts;
-  };
-  self.download = function(event) {
-    if (!self.state) return;
-    const name2svg = self.getChartImages();
-    const dm = new DownloadMenu(name2svg, self.config.term.term.name);
-    dm.show(event.clientX, event.clientY, void 0);
-  };
-  self.displayLabelClickMenu = function(t1, t2, plot, event) {
-    if (!t2) return;
-    if (isSingleCellTerm(self.config.term.term)) return;
-    const label = t1.q.mode === "continuous" ? "term2" : "term";
-    const options = [];
-    if (this.app.getState().nav.header_mode !== "only_buttons")
-      options.push({
-        label: `Add filter: ${plot.label.split(",")[0]}`,
-        testid: "sjpp-violinLabOpt-addf",
-        callback: getAddFilterCallback(self, plot)
-      });
-    options.push({
-      label: `Hide: ${plot.label}`,
-      testid: "sjpp-violinLabOpt-hide",
-      callback: () => {
-        const term = self.config[label];
-        const isHidden = true;
-        self.app.dispatch({
-          type: "plot_edit",
-          id: self.id,
-          config: {
-            [label]: {
-              isAtomic: true,
-              term: term.term,
-              q: getUpdatedQfromClick(plot, term, isHidden)
-            }
-          }
-        });
-      }
-    });
-    const { samples } = self.config.controlLabels;
-    if (self.state.displaySampleIds && self.state.hasVerifiedToken) {
-      options.push({
-        label: `List ${samples}`,
-        testid: "sjpp-violinLabOpt-list",
-        callback: async () => {
-          const [start, end] = [self.data.min, self.data.max];
-          await self.callListSamples(event, plot, start, end);
-        }
-      });
-      if (self.opts.allow2selectSamples) {
-        const ss = self.opts.allow2selectSamples;
-        options.push({
-          label: ss.buttonText,
-          callback: async () => {
-            const [start, end] = [self.data.min, self.data.max];
-            await self.selectSamples(plot, start, end, ss);
-          }
-        });
-      }
-    }
-    self.displayMenu(event, options);
-  };
-  self.displayBrushMenu = function(t1, t2, self2, plot, event, scale, isH) {
-    const selection = event.selection;
-    const [start, end] = isH ? [scale.invert(selection[0]), scale.invert(selection[1])] : [scale.invert(selection[1]), scale.invert(selection[0])];
-    const options = [];
-    if (this.app.getState().nav.header_mode === "with_tabs")
-      options.push({
-        label: `Add filter`,
-        testid: "sjpp-violinBrushOpt-addf",
-        callback: getAddFilterCallback(self2, plot, start, end)
-      });
-    const { samples } = self2.config.controlLabels;
-    if (self2.state.displaySampleIds && self2.state.hasVerifiedToken) {
-      options.push({
-        label: `List ${samples}`,
-        testid: "sjpp-violinBrushOpt-list",
-        callback: async () => self2.callListSamples(event.sourceEvent, plot, start, end)
-      });
-      if (self2.opts.allow2selectSamples) {
-        const ss = self2.opts.allow2selectSamples;
-        options.push({
-          label: ss.buttonText,
-          callback: async () => {
-            await self2.selectSamples(plot, start, end, ss);
-          }
-        });
-      }
-    }
-    self2.displayMenu(event.sourceEvent, options, start, end);
-  };
-  self.displayMenu = function(event, options, start, end) {
-    const tip = self.dom.clicktip.clear().show(event.clientX, event.clientY);
-    const isBrush = start != null && end != null;
-    if (isBrush) {
-      const [niceStart, niceEnd] = self.config.term.term.type == "integer" ? [Math.round(start), Math.round(end)] : niceNumLabels([start, end]);
-      tip.d.append("div").style("margin", "10px").text(`From ${niceStart} to ${niceEnd}`);
-    }
-    tip.d.append("div").selectAll("div").data(options).enter().append("div").attr("class", "sja_menuoption sja_sharp_border").attr("data-testid", (d) => d.testid).text((d) => d.label).on("click", async (event2, d) => {
-      const target = event2.target;
-      if (target._clicked) return;
-      target._clicked = true;
-      target.textContent = "Loading...";
-      try {
-        await d.callback();
-      } catch (e) {
-        if (self.app.isAbortError(e) || self.app.isAbortError(e?.message)) {
-          tip.hide();
-          return;
-        }
-        throw e;
-      }
-      tip.hide();
-    });
-  };
-  self.selectSamples = async function(plot, start, end, ss) {
-    const ls = self.getSampleList(plot, start, end);
-    const data = await ls.getData();
-    const table = ls.setTableData(data);
-    const samples = table[2];
-    ss.callback({
-      samples: await self.app.vocabApi.convertSampleId(samples, ss.attributes),
-      source: ss.defaultSelectionLabel || `Selected from violin`
-    });
-  };
-  self.getSampleList = function(plot, start, end) {
-    const { term, term2, term0 } = self.config;
-    const bins = self.data.bins;
-    const rangeStart = start !== void 0 ? start : null;
-    const rangeStop = end !== void 0 ? end : null;
-    const ls = new ListSamples({
-      app: self.app,
-      termfilter: self.state.termfilter,
-      term,
-      term2,
-      term0,
-      plot,
-      bins,
-      start: rangeStart,
-      end: rangeStop
-    });
-    return ls;
-  };
-  self.callListSamples = async function(event, plot, start, end) {
-    const ls = self.getSampleList(plot, start, end);
-    const data = await ls.getData();
-    const [rows, columns] = ls.setTableData(data);
-    const tip = self.dom.sampletabletip;
-    tip.clear().show(event.clientX, event.clientY, false);
-    renderTable({
-      rows,
-      columns,
-      div: tip.d,
-      showLines: true,
-      maxHeight: "40vh",
-      resize: true,
-      dataTestId: "sjpp-listsampletable"
-    });
-  };
-  self.labelHideLegendClicking = function(t2, plot) {
-    self.dom.legendDiv.selectAll(".sjpp-htmlLegend").on("click", (event) => {
-      event.stopPropagation();
-      const d = event.target.__data__;
-      const termNum = t2?.term.type === "condition" || t2?.term.type === "samplelst" || t2?.term.type === "categorical" || (t2?.term.type === "float" || t2?.term.type === "integer") && self.config.term?.q.mode === "continuous" ? "term2" : "term";
-      const term = self.config[termNum];
-      if (t2) {
-        for (const key of Object.keys(term?.q?.hiddenValues)) {
-          if (d.text === key) {
-            delete term.q.hiddenValues[key];
-          }
-        }
-        const isHidden = false;
-        self.app.dispatch({
-          type: "plot_edit",
-          id: self.id,
-          config: {
-            [termNum]: {
-              isAtomic: true,
-              term: term.term,
-              q: getUpdatedQfromClick(plot, term, isHidden)
-            }
-          }
-        });
-      }
-    }).on("mouseover", (event) => {
-      const q = event.target.__data__;
-      if (q === void 0) return;
-      if (q.isHidden === true && q.isClickable === true) {
-        self.dom.hovertip.clear().show(event.clientX, event.clientY).d.append("span").text("Click to unhide plot");
-      }
-    }).on("mouseout", function() {
-      self.dom.hovertip.hide();
-    });
-  };
-}
-function getAddFilterCallback(self, plot, rangeStart, rangeStop) {
-  const ls = self.getSampleList(plot, rangeStart, rangeStop);
-  return () => {
-    const filterUiRoot = getFilterItemByTag(self.state.termfilter.filter, "filterUiRoot");
-    const filter = filterJoin([filterUiRoot, ls.tvslst]);
-    filter.tag = "filterUiRoot";
-    self.app.dispatch({
-      type: "filter_replace",
-      filter
-    });
-  };
-}
-function getUpdatedQfromClick(plot, term, isHidden = false) {
-  const label = plot.label;
-  const valueId = term?.term?.values ? term?.term?.values?.[label]?.label : label;
-  const id = !valueId ? label : valueId;
-  const q = term.q;
-  if (!q.hiddenValues) q.hiddenValues = {};
-  if (isHidden) q.hiddenValues[id] = 1;
-  else delete q.hiddenValues[id];
-  return q;
-}
-
-// plots/violin/Violin.ts
-var ViolinPlot = class _ViolinPlot extends PlotBase {
-  static {
-    this.type = "violin";
-  }
-  constructor(opts, api) {
-    super(opts, api);
-    this.type = _ViolinPlot.type;
-  }
-  async init() {
-    const holder = this.opts.holder.append("div").attr("id", "sjpp-vp-holder");
-    const { controls, errdiv, loadingDiv, banner, renderedData, charts, legendDiv } = this.getStandardDomLayout(
-      holder,
-      this.opts
-    );
-    this.dom = {
-      hovertip: new Menu({ padding: "3px" }),
-      // separate tips for hover & click on violin labels to avoid interfering
-      clicktip: new Menu({ padding: "0px" }),
-      sampletabletip: new Menu({ padding: "3px" }),
-      // sampletable is lauched from option shown in clicktip which closes on clicking, thus need its own menu..
-      header: this.opts.header,
-      controls: controls.attr("class", "sjpp-plot-controls").style("display", "inline-block"),
-      banner: banner.attr("data-testid", "sjpp-violin-banner"),
-      errdiv,
-      loadingDiv: loadingDiv.attr("data-testid", "sjpp-violin-loading-div").style("display", this.opts.mode != "minimal" ? "inline-block" : "none"),
-      renderedData,
-      violinDiv: charts.append("div").attr("class", "sjpp-vp-violinDiv").attr("data-testid", "sjpp-violin-div").style("display", "flex").style("flex-direction", "row").style("flex-wrap", "wrap").style("max-width", "100vw"),
-      legendDiv: legendDiv.classed("sjpp-vp-legend", true).attr("data-testid", "sjpp-violin-legend").style("margin-left", "-15px").style("padding-top", "20px")
-    };
-    setViolinRenderer(this);
-    setInteractivity(this);
-    if (this.opts.mode != "minimal") {
-      this.legendRenderer = htmlLegend(this.dom.legendDiv, {
-        settings: {
-          legendOrientation: "vertical"
-        },
-        handlers: {}
-      });
-    }
-  }
-  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;
-  }
-  preApiFreeze(api) {
-    api.download = this.download;
-    api.getChartImages = () => this.getChartImages();
-  }
-  async setControls() {
-    if (this.components.controls) return;
-    this.dom.controls.selectAll("*").remove();
-    const controlLabels = this.state.config.controlLabels;
-    if (!controlLabels) throw "controls labels not found";
-    this.components = {};
-    if (this.opts.mode == "minimal") return;
-    const specialCase = getSingleCellSpecialCase(this.config);
-    const inputs = [
-      {
-        type: "term",
-        configKey: "term",
-        chartType: "violin",
-        usecase: { target: "violin", detail: "term" },
-        label: controlLabels.term1?.label || renderTerm1Label,
-        vocabApi: this.app.vocabApi,
-        menuOptions: "edit"
-      },
-      {
-        type: "term",
-        configKey: "term2",
-        chartType: "violin",
-        usecase: { target: "violin", detail: "term2", specialCase },
-        title: controlLabels.term2.title || controlLabels.term2.label,
-        label: controlLabels.term2.label,
-        vocabApi: this.app.vocabApi,
-        numericEditMenuVersion: this.opts.numericEditMenuVersion,
-        defaultQ4fillTW: getT0T2defaultQ(),
-        getDisplayStyle: (plot) => plot.config?.term?.term?.type === "termCollection" ? "none" : ""
-      },
-      {
-        type: "term",
-        configKey: "term0",
-        chartType: "violin",
-        usecase: { target: "violin", detail: "term0", specialCase },
-        title: controlLabels.term0.title || controlLabels.term0.label,
-        label: controlLabels.term0.label,
-        vocabApi: this.app.vocabApi,
-        // by default, do not allow continuous mode for divide-by term, since
-        // it will create a separate violin-overlay group per unique float or integer value
-        // and there will nonsensical tens/hundreds of these charts based on the cohort size
-        numericEditMenuVersion: this.opts.numericEditMenuVersion || ["discrete"],
-        defaultQ4fillTW: getT0T2defaultQ(),
-        getDisplayStyle: (plot) => plot.config?.term?.term?.type === "termCollection" ? "none" : ""
-      },
-      {
-        label: "Orientation",
-        title: "Orientation of the chart",
-        type: "radio",
-        chartType: "violin",
-        settingsKey: "orientation",
-        options: [
-          { label: "Vertical", value: "vertical" },
-          { label: "Horizontal", value: "horizontal" }
-        ]
-      },
-      {
-        label: "Data symbol",
-        title: "Symbol type",
-        type: "radio",
-        chartType: "violin",
-        settingsKey: "datasymbol",
-        options: [
-          { label: "Ticks", value: "rug" },
-          { label: "Circles", value: "bean" },
-          { label: "Off", value: "none" }
-        ]
-      },
-      {
-        label: "Scale",
-        title: "Axis scale",
-        type: "radio",
-        chartType: "violin",
-        settingsKey: "isLogScale",
-        options: [
-          { label: "Linear", value: false },
-          { label: "Log10", value: true }
-        ]
-      },
-      {
-        label: "Order by",
-        title: "Order violin plots by parameters",
-        type: "radio",
-        chartType: "violin",
-        settingsKey: "orderByMedian",
-        options: [
-          { label: "Default", value: false },
-          { label: "Median", value: true }
-        ],
-        getDisplayStyle: () => {
-          let style = "none";
-          const charts = this.data?.charts || {};
-          for (const k of Object.keys(charts)) {
-            const chart = charts[k];
-            if (chart?.plots.length > 1) style = "";
-          }
-          return style;
-        }
-      },
-      {
-        label: "Symbol size",
-        type: "number",
-        chartType: "violin",
-        settingsKey: "radius",
-        step: 1,
-        max: 30,
-        min: 4
-      },
-      {
-        label: "Bins",
-        type: "number",
-        chartType: "violin",
-        settingsKey: "ticks",
-        title: "Number of bins used to build the plot",
-        min: 1,
-        max: 50
-      },
-      {
-        label: "Plot length",
-        title: "Length of the plot",
-        type: "number",
-        chartType: "violin",
-        settingsKey: "svgw",
-        step: 10,
-        max: 1e3,
-        min: 200,
-        debounceInterval: 1e3
-      },
-      {
-        label: "Plot thickness",
-        title: "If not specified, the plot thickness is calculated based on the number of categories",
-        type: "number",
-        chartType: "violin",
-        settingsKey: "plotThickness",
-        step: 10,
-        max: 200,
-        min: 20,
-        debounceInterval: 1e3
-      },
-      {
-        label: "Plot padding",
-        type: "number",
-        chartType: "violin",
-        settingsKey: "rowSpace",
-        step: 1,
-        max: 20,
-        min: 0,
-        debounceInterval: 1e3
-      },
-      {
-        label: "Median length",
-        title: "Length of median",
-        type: "number",
-        chartType: "violin",
-        settingsKey: "medianLength",
-        step: 1,
-        max: 50,
-        min: 3,
-        debounceInterval: 1e3
-      },
-      {
-        label: "Median color",
-        title: "color of median",
-        type: "color",
-        chartType: "violin",
-        settingsKey: "medianColor"
-      },
-      {
-        label: "Median thickness",
-        title: "Width of median",
-        type: "number",
-        chartType: "violin",
-        settingsKey: "medianThickness",
-        step: 1,
-        max: 10,
-        min: 3,
-        debounceInterval: 100
-      },
-      {
-        label: "Default violin color",
-        type: "color",
-        chartType: "violin",
-        settingsKey: "defaultColor"
-      },
-      {
-        label: "Show stats",
-        type: "checkbox",
-        chartType: "violin",
-        settingsKey: "showStats",
-        boxLabel: "Yes"
-      },
-      {
-        label: "Show association tests",
-        type: "checkbox",
-        chartType: "violin",
-        settingsKey: "showAssociationTests",
-        boxLabel: "Yes",
-        getDisplayStyle: (plot) => plot.term2 ? "table-row" : "none"
-      }
-    ];
-    this.components.controls = await controlsInit({
-      app: this.app,
-      id: this.id,
-      holder: this.dom.controls,
-      inputs
-    });
-    this.components.controls.on("downloadClick.violin", this.download);
-  }
-  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 = appState.plots.find((p) => p.id === this.parentId);
-    const termfilter = getCombinedTermFilter(appState, config.filter || parentConfig?.filter);
-    return {
-      termfilter,
-      config,
-      displaySampleIds: appState.termdbConfig.displaySampleIds,
-      hasVerifiedToken: this.app.vocabApi.hasVerifiedToken()
-    };
-  }
-  async main() {
-    this.config = structuredClone(this.state.config);
-    this.settings = this.config.settings.violin;
-    await this.setControls();
-    if (this.config.chartType != this.type && this.config.childType != this.type) return;
-    if (this.dom.header)
-      this.dom.header.html(
-        this.config.term.term.name + ` <span style="opacity:.6;font-size:1em;margin-left:10px;">Violin Plot</span>`
-      );
-    const existingMsg = this.dom.banner.style("display", "none").select("span");
-    if (!existingMsg.empty()) existingMsg.remove();
-    const args = this.validateArgs();
-    let data;
-    try {
-      this.toggleLoadingDiv("block", "block");
-      data = await this.app.vocabApi.getViolinBox(args, null, this.api?.getAbortSignal());
-    } catch (e) {
-      this.toggleLoadingDiv("none", "none");
-      if (this.app.isAbortError(e)) return;
-      throw e;
-    }
-    this.data = data;
-    if (this.data.error) {
-      this.toggleLoadingDiv("none", "none");
-      throw this.data.error;
-    }
-    args.tw.q.descrStats = this.data.descrStats;
-    setTimeout(
-      () => {
-        this.render();
-        this.toggleLoadingDiv("none");
-      },
-      this.opts.mode == "minimal" ? 0 : 500
-    );
-  }
-  validateArgs() {
-    const {
-      term,
-      term2,
-      term0
-      /*settings*/
-    } = this.config;
-    const s = this.settings;
-    const arg = {
-      plotType: "violin",
-      svgw: s.svgw,
-      orientation: s.orientation,
-      devicePixelRatio: window.devicePixelRatio,
-      datasymbol: s.datasymbol,
-      radius: s.radius,
-      axisHeight: s.axisHeight,
-      rightMargin: s.rightMargin,
-      isLogScale: s.isLogScale,
-      ticks: s.ticks,
-      orderByMedian: s.orderByMedian,
-      filter: this.state.termfilter.filter
-    };
-    if (this.opts.mode == "minimal") {
-      arg.tw = term;
-      if (term2 || term0) throw "only a single term allowed for minimal plot";
-      if (term.q.mode == "spline") {
-        s.lines = term.q.knots.map((x) => Number(x.value));
-      } else {
-        s.lines = [];
-      }
-      if (term.q.scale) {
-        arg.scale = term.q.scale;
-      }
-    } else if (term.term?.type === "termCollection" && term.term?.memberType === "numeric" && term.type !== "TermCollectionTWFraction") {
-      arg.tw = term;
-    } else if (isNumericTw(term) && term.q.mode === "continuous") {
-      arg.tw = term;
-      if (term2) arg.overlayTw = term2;
-    } else if (isNumericTw(term2) && term2.q.mode === "continuous") {
-      arg.tw = term2;
-      arg.overlayTw = term;
-    } else {
-      throw "both term1 and term2 are not numeric/continuous";
-    }
-    if (term0) arg.divideTw = term0;
-    return arg ? arg : arg;
-  }
-};
-var violinInit = getCompInit(ViolinPlot);
-var componentInit = violinInit;
-async function getPlotConfig(opts, app) {
-  if (!opts.term) throw "violin getPlotConfig: opts.term{} missing";
-  try {
-    await fillTermWrapper(opts.term, app.vocabApi);
-    if (opts.term2) await fillTermWrapper(opts.term2, app.vocabApi);
-    if (opts.term0) await fillTermWrapper(opts.term0, app.vocabApi);
-  } catch (e) {
-    throw `${e} [violin getPlotConfig()]`;
-  }
-  const config = {
-    controlLabels: Object.assign({}, defaultUiLabels, app.vocabApi.termdbConfig.uiLabels || {}),
-    settings: {
-      controls: {
-        term2: null,
-        // the previous overlay value may be displayed as a convenience for toggling
-        term0: null
-      },
-      // common: {
-      // 	use_logscale: false, // flag for y-axis scale type, 0=linear, 1=log
-      // 	use_percentage: false,
-      // 	barheight: 300, // maximum bar length
-      // 	barwidth: 20, // bar thickness
-      // 	barspace: 2 // space between two bars
-      // },
-      violin: getDefaultViolinSettings(app)
-    }
-  };
-  return copyMerge(config, opts);
-}
-export {
-  componentInit,
-  getPlotConfig,
-  violinInit
-};
-//# sourceMappingURL=Violin-BAS6DQHL.js.map