@sjcrh/proteinpaint-client 2.181.0 → 2.182.0

package/dist/chunk-GW7DHJYH.js

@@ -0,0 +1,439 @@
+import {
+  setViolinRenderer
+} from "./chunk-MXI3NXRB.js";
+import {
+  setInteractivity
+} from "./chunk-2OSEZCWZ.js";
+import {
+  PlotBase,
+  controlsInit,
+  defaultUiLabels,
+  fillTermWrapper,
+  getCombinedTermFilter,
+  htmlLegend,
+  renderTerm1Label,
+  term0_term2_defaultQ
+} from "./chunk-7FEHI46K.js";
+import {
+  Menu
+} from "./chunk-2SRMRC6L.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-MVTCBVSX.js";
+import {
+  isNumericTerm
+} from "./chunk-MDL2HG3N.js";
+import {
+  plotColor
+} from "./chunk-IGEQI6MR.js";
+
+// plots/violin.js
+var ViolinPlot = class _ViolinPlot extends PlotBase {
+  static type = "violin";
+  constructor(opts) {
+    super(opts);
+    this.type = _ViolinPlot.type;
+  }
+  async init(appState) {
+    const controls = this.opts.holder.append("div").attr("class", "sjpp-plot-controls").style("display", "inline-block");
+    const config = appState.plots.find((p) => p.id === this.id);
+    const holder = this.opts.holder.append("div").style("display", "inline-block").style("padding", this.opts.mode != "minimal" ? "5px" : "0px").style("padding-left", this.opts.mode != "minimal" ? "20px" : "0px").attr("id", "sjpp-vp-holder");
+    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,
+      banner: holder.append("div").attr("data-testid", "sjpp-violin-banner").style("display", "none").style("text-align", "center").style("padding", "24px").style("font-size", "16px"),
+      loadingDiv: holder.append("div").attr("data-testid", "sjpp-violin-loading-div").style("display", this.opts.mode != "minimal" ? "inline-block" : "none").style("padding", "24px").text("Loading ..."),
+      violinDiv: holder.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: holder.append("div").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 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" },
+        title: controlLabels.term2.title || controlLabels.term2.label,
+        label: controlLabels.term2.label,
+        vocabApi: this.app.vocabApi,
+        numericEditMenuVersion: this.opts.numericEditMenuVersion,
+        defaultQ4fillTW: term0_term2_defaultQ
+      },
+      {
+        type: "term",
+        configKey: "term0",
+        chartType: "violin",
+        usecase: { target: "violin", detail: "term0" },
+        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: term0_term2_defaultQ
+      },
+      {
+        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();
+      data = await this.app.vocabApi.getViolinBox(args, null, this.api.getAbortSignal());
+    } catch (e) {
+      this.toggleLoadingDiv("none");
+      if (this.app.isAbortError(e)) return;
+      throw e;
+    }
+    this.data = data;
+    if (this.data.error) {
+      this.toggleLoadingDiv("none");
+      throw this.data.error;
+    }
+    args.tw.q.descrStats = this.data.descrStats;
+    this.toggleLoadingDiv(this.opts.mode == "minimal" ? "none" : "");
+    setTimeout(
+      () => {
+        this.render();
+      },
+      this.opts.mode == "minimal" ? 0 : 500
+    );
+    this.toggleLoadingDiv("none");
+  }
+  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 (isNumericTerm(term.term) && term.q.mode === "continuous") {
+      arg.tw = term;
+      if (term2) arg.overlayTw = term2;
+    } else if (isNumericTerm(term2?.term) && 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;
+  }
+};
+var violinInit = getCompInit(ViolinPlot);
+var componentInit = violinInit;
+function getDefaultViolinSettings(app, overrides = {}) {
+  const defaults = {
+    orientation: "horizontal",
+    rowlabelw: 250,
+    brushRange: null,
+    //object with start and end if there is a brush selection
+    svgw: 500,
+    // span length of a plot/svg, not including margin
+    datasymbol: "rug",
+    radius: 10,
+    axisHeight: 60,
+    rightMargin: 50,
+    lines: [],
+    isLogScale: false,
+    // false: linear scale, true: log scale
+    rowSpace: 10,
+    medianLength: 7,
+    medianColor: "#FF0000",
+    medianThickness: 3,
+    ticks: 15,
+    defaultColor: plotColor,
+    method: 0,
+    orderByMedian: false,
+    showStats: true,
+    showAssociationTests: true
+  };
+  return Object.assign(defaults, overrides);
+}
+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 = {
+    id: opts.term.term.id,
+    controlLabels: Object.assign({}, defaultUiLabels, app.vocabApi.termdbConfig.uiLabels || {}),
+    settings: {
+      controls: {
+        term2: null,
+        // the previous overlay value may be displayed as a convenience for toggling
+        term0: null
+      },
+      // common: {
+      // 	use_logscale: false, // flag for y-axis scale type, 0=linear, 1=log
+      // 	use_percentage: false,
+      // 	barheight: 300, // maximum bar length
+      // 	barwidth: 20, // bar thickness
+      // 	barspace: 2 // space between two bars
+      // },
+      violin: getDefaultViolinSettings(app)
+    }
+  };
+  return copyMerge(config, opts);
+}
+
+export {
+  violinInit,
+  componentInit,
+  getDefaultViolinSettings,
+  getPlotConfig
+};
+//# sourceMappingURL=chunk-GW7DHJYH.js.map

package/dist/chunk-H2D7EVUA.js

@@ -0,0 +1,158 @@
+import {
+  NumericDensity
+} from "./chunk-TE3DK3A6.js";
+import {
+  Tabs
+} from "./chunk-7FEHI46K.js";
+import {
+  HandlerBase
+} from "./chunk-LSEFWW72.js";
+
+// termsetting/handlers/NumericHandler.ts
+var NumericHandler = class extends HandlerBase {
+  constructor(opts) {
+    super(opts);
+    this.tabs = [];
+    this.handlerByMode = {};
+    this.dom = {};
+    this.opts = opts;
+    this.termsetting = opts.termsetting;
+    this.tw = opts.termsetting.tw;
+    this.tabs = this.setTabData();
+    this.density = new NumericDensity(opts);
+  }
+  getPillStatus() {
+    this.tw = this.termsetting.tw;
+    return this.tw.getStatus(this.termsetting.usecase, this.termsetting.data);
+  }
+  setTabData() {
+    const self = this.termsetting;
+    const tabs = [];
+    const callback = async (event, tabData) => {
+      if (event) event.stopPropagation();
+      try {
+        await this.setEditHandler(tabData);
+        await this.editHandler.showEditMenu(tabData.contentHolder);
+      } catch (e) {
+        this.dom.errdiv.style("display", "").text(e);
+      }
+    };
+    const numTabs = self.opts.numericEditMenuVersion.length;
+    if (self.opts.numericEditMenuVersion.includes("continuous")) {
+      tabs.push({
+        mode: "continuous",
+        label: self.term.type == "survival" ? "Time to Event" : "Continuous",
+        callback,
+        active: this.tw.q.mode === "continuous" || numTabs === 1
+      });
+    }
+    if (self.opts.numericEditMenuVersion.includes("discrete")) {
+      tabs.push({
+        mode: "discrete",
+        label: self.term.type == "survival" ? "Exit code" : "Discrete",
+        callback,
+        active: this.tw.q.mode === "discrete" || numTabs === 1
+      });
+    }
+    if (self.opts.numericEditMenuVersion.includes("spline")) {
+      tabs.push({
+        mode: "spline",
+        label: "Cubic spline",
+        callback,
+        active: this.tw.q.mode === "spline" || numTabs === 1
+      });
+    }
+    if (self.opts.numericEditMenuVersion.includes("binary")) {
+      tabs.push({
+        mode: "binary",
+        label: "Binary",
+        callback,
+        active: this.tw.q.mode === "binary" || numTabs === 1
+      });
+    }
+    return tabs;
+  }
+  async setEditHandler(tabData) {
+    if (!this.handlerByMode[tabData.mode]) {
+      switch (tabData.mode) {
+        case "continuous": {
+          const { NumContEditor } = await import("./NumContEditor-ZPLVZFLH.js");
+          this.handlerByMode.continuous = new NumContEditor(this.opts, this);
+          break;
+        }
+        case "discrete": {
+          const { NumDiscreteEditor } = await import("./NumDiscreteEditor-6C4OWX62.js");
+          this.handlerByMode.discrete = new NumDiscreteEditor(this.opts, this);
+          break;
+        }
+        case "binary": {
+          const { NumBinaryEditor } = await import("./NumBinaryEditor-4QA5DQJT.js");
+          this.handlerByMode.binary = new NumBinaryEditor(this.opts, this);
+          break;
+        }
+        case "spline": {
+          const { NumSplineEditor } = await import("./NumSplineEditor-SXOJICHU.js");
+          this.handlerByMode.spline = new NumSplineEditor(this.opts, this);
+          break;
+        }
+        default:
+          throw `unexpected numeric tabData.mode='${tabData.mode}'`;
+          break;
+      }
+    }
+    this.editHandler = this.handlerByMode[tabData.mode];
+  }
+  async showEditMenu(div) {
+    try {
+      this.showLoading(div);
+      this.dom.errdiv = div.append("div").attr("class", "sja_errorbar").style("display", "none");
+      this.tw = this.termsetting.tw;
+      const self = this.tw;
+      for (const t of this.tabs) {
+        t.active = this.tabs.length === 1 || self.q.mode == t.mode || t.mode == "continuous" && !self.q.mode;
+      }
+      this.density_data = await this.density.setData();
+      await this.setEditHandler(this.tabs.find((t) => t.active));
+      this.dom.editDiv = div.append("div").attr("data-testid", "sjpp-num-ts-edit-div");
+      this.dom.btnDiv = div.append("div");
+      this.renderButtons(this.dom.btnDiv);
+      if (this.tabs.length > 1) {
+        this.dom.topBar = this.dom.editDiv.append("div").style("padding", "10px");
+        this.dom.topBar.append("span").html("Use as ");
+        new Tabs({
+          holder: this.dom.topBar.append("div").style("display", "inline-block"),
+          contentHolder: this.dom.editDiv.append("div"),
+          noTopContentStyle: true,
+          tabs: this.tabs
+        }).main();
+      } else {
+        await this.editHandler.showEditMenu(this.dom.editDiv);
+      }
+      this.dom.loadingDiv.style("display", "none");
+    } catch (e) {
+      this.hideLoading();
+      this.dom.errdiv.style("display", "").text(typeof e == "object" ? e.message || e.error || e : e);
+    }
+  }
+  renderButtons(btnDiv) {
+    btnDiv.append("button").style("margin", "5px").html("Apply").on("click", () => {
+      this.termsetting.q = this.editHandler.getEditedQ();
+      this.termsetting.dom.tip.hide();
+      this.termsetting.api.runCallback();
+    });
+    btnDiv.append("button").style("margin", "5px").html("Reset").on("click", () => {
+      this.editHandler.undoEdits();
+    });
+  }
+  destroy() {
+    for (const s of Object.values(this.dom)) {
+      if (typeof s.remove == "function") s.remove();
+    }
+    this.density.destroy();
+  }
+};
+
+export {
+  NumericHandler
+};
+//# sourceMappingURL=chunk-H2D7EVUA.js.map

package/dist/chunk-H2D7EVUA.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../termsetting/handlers/NumericHandler.ts"],
+  "sourcesContent": ["import { HandlerBase } from '../HandlerBase.ts'\nimport type { Handler } from '../index.ts'\nimport type { NumRegularBin, NumCustomBins, NumCont, NumSpline } from '#tw'\nimport { Tabs } from '#dom'\nimport { NumericDensity } from './NumericDensity.ts'\nimport type { NumContEditor } from './NumContEditor'\nimport type { NumDiscreteEditor } from './NumDiscreteEditor'\nimport type { NumBinaryEditor } from './NumBinaryEditor'\nimport type { NumSplineEditor } from './NumSplineEditor'\n\ntype NumericTabCallback = (event: PointerEvent, tab: TabData) => void\n\ntype TabData = {\n\tmode: 'continuous' | 'discrete' | 'binary' | 'spline'\n\tlabel: string\n\tcallback: NumericTabCallback\n\tcontentHolder?: any //\n\tactive?: boolean\n}\n\n/*\n\tNumericHandler \n\t- NumericDensity\n\t- NumericDiscrete\n\t\t - NumRegularBinEditor\n\t\t - NumCustomBinEditor\n*/\n\ntype EditHandler = NumContEditor | NumDiscreteEditor | NumBinaryEditor | NumSplineEditor\n\nexport class NumericHandler extends HandlerBase implements Handler {\n\topts: any // TODO\n\ttw: NumRegularBin | NumCustomBins | NumCont | NumSpline\n\ttabs: TabData[] = []\n\thandlerByMode: {\n\t\t[twType: string]: EditHandler\n\t} = {}\n\teditHandler!: EditHandler\n\ttoggleBtns!: Tabs\n\n\tdom: {\n\t\t[name: string]: any\n\t} = {}\n\n\tdensity: NumericDensity\n\tdensity_data!: any\n\n\tconstructor(opts) {\n\t\tsuper(opts)\n\t\tthis.opts = opts\n\t\tthis.termsetting = opts.termsetting\n\t\tthis.tw = opts.termsetting.tw\n\t\tthis.tabs = this.setTabData()\n\t\tthis.density = new NumericDensity(opts)\n\t}\n\n\tgetPillStatus() {\n\t\tthis.tw = this.termsetting.tw as NumRegularBin | NumCustomBins | NumCont | NumSpline // TODO: do not force type\n\t\treturn this.tw.getStatus(this.termsetting.usecase, this.termsetting.data)\n\t}\n\n\tsetTabData() {\n\t\tconst self = this.termsetting\n\t\tconst tabs: TabData[] = []\n\t\tconst callback = async (event, tabData) => {\n\t\t\tif (event) event.stopPropagation()\n\t\t\ttry {\n\t\t\t\tawait this.setEditHandler(tabData)\n\t\t\t\t//this.dom.editDiv.selectAll('*').remove()\n\t\t\t\tawait this.editHandler.showEditMenu(tabData.contentHolder) //this.dom.editDiv)\n\t\t\t} catch (e) {\n\t\t\t\tthis.dom.errdiv.style('display', '').text(e)\n\t\t\t}\n\t\t}\n\n\t\tconst numTabs = self.opts.numericEditMenuVersion.length\n\t\tif (self.opts.numericEditMenuVersion.includes('continuous')) {\n\t\t\ttabs.push({\n\t\t\t\tmode: 'continuous',\n\t\t\t\tlabel: self.term.type == 'survival' ? 'Time to Event' : 'Continuous',\n\t\t\t\tcallback,\n\t\t\t\tactive: this.tw.q.mode === 'continuous' || numTabs === 1\n\t\t\t})\n\t\t}\n\n\t\tif (self.opts.numericEditMenuVersion.includes('discrete')) {\n\t\t\ttabs.push({\n\t\t\t\tmode: 'discrete',\n\t\t\t\tlabel: self.term.type == 'survival' ? 'Exit code' : 'Discrete',\n\t\t\t\tcallback,\n\t\t\t\tactive: this.tw.q.mode === 'discrete' || numTabs === 1\n\t\t\t})\n\t\t}\n\n\t\tif (self.opts.numericEditMenuVersion.includes('spline')) {\n\t\t\ttabs.push({\n\t\t\t\tmode: 'spline',\n\t\t\t\tlabel: 'Cubic spline',\n\t\t\t\tcallback,\n\t\t\t\tactive: this.tw.q.mode === 'spline' || numTabs === 1\n\t\t\t})\n\t\t}\n\n\t\tif (self.opts.numericEditMenuVersion.includes('binary')) {\n\t\t\ttabs.push({\n\t\t\t\tmode: 'binary',\n\t\t\t\tlabel: 'Binary',\n\t\t\t\tcallback,\n\t\t\t\tactive: this.tw.q.mode === 'binary' || numTabs === 1\n\t\t\t})\n\t\t}\n\n\t\treturn tabs\n\t}\n\n\tasync setEditHandler(tabData) {\n\t\tif (!this.handlerByMode[tabData.mode]) {\n\t\t\tswitch (tabData.mode) {\n\t\t\t\tcase 'continuous': {\n\t\t\t\t\tconst { NumContEditor } = await import('./NumContEditor.ts')\n\t\t\t\t\tthis.handlerByMode.continuous = new NumContEditor(this.opts, this)\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'discrete': {\n\t\t\t\t\tconst { NumDiscreteEditor } = await import('./NumDiscreteEditor.ts')\n\t\t\t\t\tthis.handlerByMode.discrete = new NumDiscreteEditor(this.opts, this)\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'binary': {\n\t\t\t\t\tconst { NumBinaryEditor } = await import('./NumBinaryEditor.ts')\n\t\t\t\t\tthis.handlerByMode.binary = new NumBinaryEditor(this.opts, this)\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'spline': {\n\t\t\t\t\tconst { NumSplineEditor } = await import('./NumSplineEditor.ts')\n\t\t\t\t\tthis.handlerByMode.spline = new NumSplineEditor(this.opts, this)\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\t\tthrow `unexpected numeric tabData.mode='${tabData.mode}'`\n\t\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t\tthis.editHandler = this.handlerByMode[tabData.mode]\n\t}\n\n\tasync showEditMenu(div) {\n\t\ttry {\n\t\t\tthis.showLoading(div)\n\t\t\tthis.dom.errdiv = div.append('div').attr('class', 'sja_errorbar').style('display', 'none')\n\t\t\tthis.tw = this.termsetting.tw as NumRegularBin | NumCustomBins | NumCont | NumSpline // TODO: do not force type\n\n\t\t\tconst self = this.tw\n\t\t\tfor (const t of this.tabs) {\n\t\t\t\tt.active = this.tabs.length === 1 || self.q.mode == t.mode || (t.mode == 'continuous' && !self.q.mode)\n\t\t\t}\n\n\t\t\tthis.density_data = await this.density.setData()\n\t\t\tawait this.setEditHandler(this.tabs.find(t => t.active))\n\t\t\tthis.dom.editDiv = div.append('div').attr('data-testid', 'sjpp-num-ts-edit-div')\n\t\t\tthis.dom.btnDiv = div.append('div')\n\t\t\tthis.renderButtons(this.dom.btnDiv)\n\n\t\t\tif (this.tabs.length > 1) {\n\t\t\t\tthis.dom.topBar = this.dom.editDiv.append('div').style('padding', '10px')\n\t\t\t\tthis.dom.topBar.append('span').html('Use as ')\n\t\t\t\tnew Tabs({\n\t\t\t\t\tholder: this.dom.topBar.append('div').style('display', 'inline-block'),\n\t\t\t\t\tcontentHolder: this.dom.editDiv.append('div'),\n\t\t\t\t\tnoTopContentStyle: true,\n\t\t\t\t\ttabs: this.tabs\n\t\t\t\t}).main()\n\t\t\t} else {\n\t\t\t\tawait this.editHandler.showEditMenu(this.dom.editDiv)\n\t\t\t}\n\n\t\t\tthis.dom.loadingDiv.style('display', 'none')\n\t\t} catch (e: any) {\n\t\t\tthis.hideLoading()\n\t\t\tthis.dom.errdiv.style('display', '').text(typeof e == 'object' ? e.message || e.error || e : e)\n\t\t}\n\t}\n\n\trenderButtons(btnDiv) {\n\t\tbtnDiv\n\t\t\t.append('button')\n\t\t\t.style('margin', '5px')\n\t\t\t.html('Apply')\n\t\t\t.on('click', () => {\n\t\t\t\tthis.termsetting.q = this.editHandler.getEditedQ()\n\t\t\t\tthis.termsetting.dom.tip.hide()\n\t\t\t\tthis.termsetting.api.runCallback()\n\t\t\t})\n\n\t\tbtnDiv\n\t\t\t.append('button')\n\t\t\t.style('margin', '5px')\n\t\t\t.html('Reset')\n\t\t\t.on('click', () => {\n\t\t\t\tthis.editHandler.undoEdits()\n\t\t\t})\n\t}\n\n\tdestroy() {\n\t\tfor (const s of Object.values(this.dom)) {\n\t\t\tif (typeof s.remove == 'function') s.remove()\n\t\t}\n\t\tthis.density.destroy()\n\t}\n}\n"],
+  "mappings": "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",
+  "names": []
+}