@sjcrh/proteinpaint-client 2.190.2 → 2.191.2

package/dist/NumBinaryEditor-6ZAL6CCP.js

@@ -0,0 +1,271 @@
+import {
+  make_one_checkbox
+} from "./chunk-L4TUTGTA.js";
+import "./chunk-HJ6L54YS.js";
+import {
+  HandlerBase
+} from "./chunk-LSEFWW72.js";
+import "./chunk-4FKWINMK.js";
+import "./chunk-HYOEWQ5P.js";
+import "./chunk-HBW42TDT.js";
+import "./chunk-G6O3URDN.js";
+import "./chunk-FN5XPUPH.js";
+import "./chunk-IIT367QZ.js";
+import "./chunk-RZGEKL77.js";
+import "./chunk-XVZ5UJWU.js";
+import "./chunk-WS3NUPNV.js";
+import "./chunk-6VKTEMFV.js";
+import "./chunk-7IYJZZQI.js";
+import "./chunk-M3J4MINX.js";
+import "./chunk-PF4DSFDR.js";
+import {
+  get_bin_label,
+  get_bin_range_equation
+} from "./chunk-S4JLRRKK.js";
+import "./chunk-TVADJLMF.js";
+import "./chunk-EBKERML3.js";
+import "./chunk-DD4R5P6W.js";
+import "./chunk-JNITUVXP.js";
+import "./chunk-KSGA62R2.js";
+import "./chunk-LOZEKOES.js";
+import "./chunk-TOU7EVFQ.js";
+import "./chunk-OAWQ6LOO.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-KYBIQBXE.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-OMR2DT66.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-HFNDKYVF.js";
+
+// termsetting/handlers/NumBinaryEditor.ts
+var NumBinaryEditor = class extends HandlerBase {
+  constructor(opts, handler) {
+    super(opts);
+    this.dom = {};
+    this.cutoffPercentile = 50;
+    this.opts = opts;
+    this.handler = handler;
+    this.tw = handler.tw;
+    this.q = this.getDefaultQ();
+  }
+  async showEditMenu(div) {
+    this.tw = this.handler.tw;
+    this.q = this.getDefaultQ();
+    if (this.dom.density_div) {
+      if (this.handler.dom.editDiv?.node().contains(this.dom.density_div.node())) {
+        await this.handler.density.showViolin(this.dom.density_div, this.getBoundaryOpts());
+        return;
+      } else {
+        this.dom.density_div.remove();
+        delete this.dom.density_div;
+      }
+    }
+    this.dom.density_div = div.append("div");
+    await this.handler.density.showViolin(this.dom.density_div);
+    await this.handler.density.setBinLines(this.getBoundaryOpts());
+    this.dom.boundaryInclusionDiv = div.append("div").style("padding", "5px");
+    this.dom.cutoff_div = div.append("div").style("padding", "10px");
+    this.dom.inputsDiv = div.append("div").style("padding", "10px").style("display", "flex").style("width", "100%");
+    this.renderBoundaryInclusionSelect();
+    this.renderCutoffInput();
+    this.renderBoundaryInputDivs();
+  }
+  getDefaultQ() {
+    const tw = this.termsetting.tw;
+    if (tw.q.mode == "binary") {
+      const copy = JSON.parse(JSON.stringify(tw.q));
+      copy.lst.forEach((bin) => {
+        if (!bin.label) bin.label = get_bin_label(bin, tw.q, tw.term.valueConversion);
+        bin.range = get_bin_range_equation(bin, this.tw.q);
+      });
+      return copy;
+    }
+    const { min, max } = this.handler.density_data;
+    const defaultCustomBoundary = (
+      /* when no sample is annotated by this term,
+      minvalue and maxvalue are both null
+      setting defaultCustomBoundary to arbitrary "0" will allow existing UI to work
+      but remains to be evaluated if is really okay to use 0
+      */
+      !Number.isFinite(min) || !Number.isFinite(max) ? 0 : (
+        // minvalue and maxvalue is valid number
+        max != min ? min + (max - min) / 2 : max
+      )
+    );
+    const firstBin = {
+      startunbounded: true,
+      startinclusive: false,
+      stopinclusive: false,
+      stop: +defaultCustomBoundary.toFixed(this.tw.term.type == "integer" ? 0 : 2)
+    };
+    const lastBin = {
+      stopunbounded: true,
+      startinclusive: true,
+      stopinclusive: false,
+      start: +defaultCustomBoundary.toFixed(this.tw.term.type == "integer" ? 0 : 2)
+    };
+    return {
+      mode: "binary",
+      type: "custom-bin",
+      lst: [
+        {
+          ...firstBin,
+          label: get_bin_label(firstBin, this.tw.q, this.tw.term.valueConversion),
+          range: get_bin_range_equation(firstBin, this.tw.q)
+        },
+        {
+          ...lastBin,
+          label: get_bin_label(lastBin, this.tw.q, this.tw.term.valueConversion),
+          range: get_bin_range_equation(lastBin, this.tw.q)
+        }
+        //satisfies StopUnboundedBin
+      ],
+      cutoffType: "normal"
+    };
+  }
+  getBoundaryOpts() {
+    return {
+      values: [
+        {
+          //this.q.lst[0].map(bin => ({ x: bin.startunbounded ? bin.stop : bin.start, isDraggable: true })),
+          x: this.q.lst[0].stop,
+          isDraggable: true
+        }
+      ],
+      callback: (d, value) => {
+        this.q.lst[0].stop = value;
+        this.q.lst[1].start = value;
+        this.dom.cutoffInput.property("value", value);
+        this.q.lst = this.processBinaryBinInputs();
+        this.dom.customBinRanges.data(this.q.lst).html((d2) => d2.range);
+        this.dom.customBinLabelInput.data(this.q.lst).property("value", (d2) => d2.label);
+      }
+    };
+  }
+  getBoundaryInclusion() {
+    return this.q.lst[0].startinclusive ? "startinclusive" : "stopinclusive";
+  }
+  renderBoundaryInclusionSelect() {
+    this.dom.boundaryInclusionDiv.selectAll("*").remove();
+    this.dom.boundaryInclusionDiv.append("span").style("padding", "5px").style("color", "rgb(136, 136, 136)").html("Boundary Inclusion");
+    const x = '<span style="font-family:Times;font-style:italic">x</span>';
+    this.dom.boundaryInclusionSelect = this.dom.boundaryInclusionDiv.append("select").style("margin-left", "10px").on("change", () => {
+      this.renderBoundaryInputDivs();
+    });
+    this.dom.boundaryInclusionSelect.selectAll("option").data([
+      { value: "stopinclusive", html: `start &lt; ${x} &le; end` },
+      { value: "startinclusive", html: `start &le; ${x} &lt; end` }
+    ]).enter().append("option").property("value", (d) => d.value).property("selected", (d) => this.tw.q.lst?.[0]?.[d.value] == true).html((d) => d.html);
+  }
+  async renderCutoffInput() {
+    this.dom.cutoff_div.append("span").style("margin-right", "5px").style("opacity", 0.5).text("Boundary value");
+    const q = this.q;
+    this.dom.cutoffInput = this.dom.cutoff_div.append("input").style("width", "100px").attr("type", "number").style("margin-right", "10px").attr("value", q.lst[0].stop).on("change", () => this.renderBoundaryInputDivs());
+    this.dom.cutoffPercentileCheckbox = make_one_checkbox({
+      holder: this.dom.cutoff_div,
+      labeltext: "Use percentile",
+      checked: false,
+      divstyle: { display: "inline-block" },
+      callback: async (checked) => {
+        this.dom.cutoffInput.property("disabled", checked == true);
+        this.dom.cutoffInputPercentile.style("display", checked ? "" : "none");
+        this.handlePercentileChange();
+      }
+    });
+    this.dom.cutoffInputPercentile = this.dom.cutoff_div.append("input").attr("type", "number").attr("value", this.cutoffPercentile).style("display", "none").style("width", "100px").style("margin-right", "10px").on("change", () => this.handlePercentileChange());
+  }
+  async handlePercentileChange() {
+    try {
+      const cutoffPercentile = Number(this.dom.cutoffInputPercentile.property("value"));
+      this.q.cutoffPercentile = cutoffPercentile;
+      const data = await this.termsetting.vocabApi.getPercentile(
+        this.tw.term,
+        [cutoffPercentile],
+        this.termsetting.vocabApi.state?.termfilter
+      );
+      this.dom.cutoffInput.property("value", data.values[0]);
+      this.renderBoundaryInputDivs();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  renderBoundaryInputDivs() {
+    const cutoff = this.dom.cutoffInput.property("value");
+    this.q.lst[0].stop = cutoff;
+    this.q.lst[1].start = cutoff;
+    this.q.lst = this.processBinaryBinInputs();
+    const data = this.q.lst;
+    const holder = this.dom.inputsDiv;
+    holder.selectAll("*").remove();
+    const grid = holder.append("div").style("display", "grid").style("grid-template-columns", "auto auto").style("column-gap", "20px").style("align-items", "center");
+    grid.append("div").style("margin-bottom", "3px").style("color", "rgb(136, 136, 136)").text("Range");
+    grid.append("div").style("margin-bottom", "3px").style("color", "rgb(136, 136, 136)").text("Bin label");
+    for (const d of data) {
+      grid.append("div").datum(d).attr("name", "range").html(d.range);
+      grid.append("div").append("input").datum(d).attr("type", "text").style("margin", "2px 0px").property("value", d.label).on("change", function() {
+        d.label = this.value;
+      });
+    }
+    this.dom.customBinRanges = this.dom.inputsDiv.selectAll('div[name="range"]');
+    this.dom.customBinLabelInput = this.dom.inputsDiv.selectAll("input");
+    this.handler.density.setBinLines(this.getBoundaryOpts());
+  }
+  processBinaryBinInputs() {
+    const inclusive = this.dom.boundaryInclusionSelect.property("value");
+    const startinclusive = inclusive == "startinclusive";
+    const stopinclusive = inclusive == "stopinclusive";
+    const val = this.q.lst[0].stop;
+    if (!val && val !== 0) throw "val is undefined";
+    const firstBin = {
+      startunbounded: true,
+      stop: Number(val),
+      startinclusive: false,
+      stopinclusive
+    };
+    const lastBin = {
+      start: Number(val),
+      startinclusive,
+      stopinclusive: false,
+      stopunbounded: true
+    };
+    const bins = [
+      {
+        ...firstBin,
+        label: get_bin_label(firstBin, this.q),
+        range: get_bin_range_equation(firstBin, this.tw.q)
+      },
+      {
+        ...lastBin,
+        label: get_bin_label(lastBin, this.q),
+        range: get_bin_range_equation(lastBin, this.tw.q)
+      }
+    ];
+    return bins;
+  }
+  getEditedQ(destroyDom = true) {
+    const lst = this.processBinaryBinInputs();
+    if (destroyDom) {
+      for (const name of Object.keys(this.dom)) {
+        this.dom[name].remove();
+        delete this.dom[name];
+      }
+    }
+    return {
+      mode: "binary",
+      type: "custom-bin",
+      lst
+    };
+  }
+  async undoEdits() {
+    this.q = this.getDefaultQ();
+    await this.handler.density.setBinLines(this.getBoundaryOpts());
+    this.dom.inputsDiv.selectAll("*").remove();
+    this.renderBoundaryInclusionSelect();
+    this.renderCutoffInput();
+    this.renderBoundaryInputDivs();
+  }
+};
+export {
+  NumBinaryEditor
+};
+//# sourceMappingURL=NumBinaryEditor-6ZAL6CCP.js.map

package/dist/NumBinaryEditor-6ZAL6CCP.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../termsetting/handlers/NumBinaryEditor.ts"],
+  "sourcesContent": ["//import { keyupEnter } from '#src/client'\nimport type { NumCustomBins } from '#tw'\nimport type { NumericHandler } from './NumericHandler.ts'\nimport type { BoundaryOpts, LineData } from './NumericDensity.ts'\n//import type { TermSetting } from '../TermSetting.ts'\nimport type { BinaryNumericQ, StartUnboundedBin, StopUnboundedBin, Handler } from '#types'\nimport { HandlerBase } from '../HandlerBase.ts'\nimport { get_bin_label, get_bin_range_equation } from '#shared/termdb.bins.js'\nimport { make_one_checkbox } from '#dom'\n\nexport class NumBinaryEditor extends HandlerBase implements Handler {\n\ttw: NumCustomBins\n\tq: BinaryNumericQ\n\thandler: NumericHandler\n\t//termsetting: TermSetting\n\topts: any\n\tdom: {\n\t\t[elemName: string]: any\n\t} = {}\n\n\tcutoffPercentile: number = 50\n\n\tconstructor(opts, handler) {\n\t\tsuper(opts)\n\t\tthis.opts = opts\n\t\tthis.handler = handler\n\t\tthis.tw = handler.tw\n\t\tthis.q = this.getDefaultQ()\n\t}\n\n\tasync showEditMenu(div) {\n\t\tthis.tw = this.handler.tw as NumCustomBins\n\t\tthis.q = this.getDefaultQ()\n\t\tif (this.dom.density_div) {\n\t\t\tif (this.handler.dom.editDiv?.node().contains(this.dom.density_div.node())) {\n\t\t\t\tawait this.handler.density.showViolin(this.dom.density_div, this.getBoundaryOpts())\n\t\t\t\treturn\n\t\t\t} else {\n\t\t\t\tthis.dom.density_div.remove()\n\t\t\t\tdelete this.dom.density_div\n\t\t\t}\n\t\t}\n\t\tthis.dom.density_div = div.append('div')\n\t\tawait this.handler.density.showViolin(this.dom.density_div)\n\t\tawait this.handler.density.setBinLines(this.getBoundaryOpts())\n\n\t\tthis.dom.boundaryInclusionDiv = div.append('div').style('padding', '5px')\n\t\tthis.dom.cutoff_div = div.append('div').style('padding', '10px')\n\t\tthis.dom.inputsDiv = div.append('div').style('padding', '10px').style('display', 'flex').style('width', '100%')\n\t\tthis.renderBoundaryInclusionSelect()\n\t\tthis.renderCutoffInput()\n\t\tthis.renderBoundaryInputDivs()\n\t}\n\n\tgetDefaultQ(): BinaryNumericQ {\n\t\tconst tw = this.termsetting.tw as NumCustomBins\n\t\tif (tw.q.mode == 'binary') {\n\t\t\tconst copy = JSON.parse(JSON.stringify(tw.q))\n\t\t\tcopy.lst.forEach(bin => {\n\t\t\t\tif (!bin.label) bin.label = get_bin_label(bin, tw.q, tw.term.valueConversion)\n\t\t\t\tbin.range = get_bin_range_equation(bin, this.tw.q)\n\t\t\t})\n\t\t\treturn copy\n\t\t}\n\t\tconst { min, max } = this.handler.density_data\n\t\tconst defaultCustomBoundary =\n\t\t\t/* when no sample is annotated by this term,\n\t\t\tminvalue and maxvalue are both null\n\t\t\tsetting defaultCustomBoundary to arbitrary \"0\" will allow existing UI to work\n\t\t\tbut remains to be evaluated if is really okay to use 0\n\t\t\t*/\n\t\t\t!Number.isFinite(min) || !Number.isFinite(max)\n\t\t\t\t? 0\n\t\t\t\t: // minvalue and maxvalue is valid number\n\t\t\t\tmax != min\n\t\t\t\t? min + (max - min) / 2\n\t\t\t\t: max\n\n\t\tconst firstBin = {\n\t\t\tstartunbounded: true,\n\t\t\tstartinclusive: false,\n\t\t\tstopinclusive: false,\n\t\t\tstop: +defaultCustomBoundary.toFixed(this.tw.term.type == 'integer' ? 0 : 2)\n\t\t} satisfies StartUnboundedBin\n\n\t\tconst lastBin = {\n\t\t\tstopunbounded: true,\n\t\t\tstartinclusive: true,\n\t\t\tstopinclusive: false,\n\t\t\tstart: +defaultCustomBoundary.toFixed(this.tw.term.type == 'integer' ? 0 : 2)\n\t\t} satisfies StopUnboundedBin\n\n\t\treturn {\n\t\t\tmode: 'binary',\n\t\t\ttype: 'custom-bin',\n\t\t\tlst: [\n\t\t\t\t{\n\t\t\t\t\t...firstBin,\n\t\t\t\t\tlabel: get_bin_label(firstBin, this.tw.q, this.tw.term.valueConversion),\n\t\t\t\t\trange: get_bin_range_equation(firstBin, this.tw.q)\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t...lastBin,\n\t\t\t\t\tlabel: get_bin_label(lastBin, this.tw.q, this.tw.term.valueConversion),\n\t\t\t\t\trange: get_bin_range_equation(lastBin, this.tw.q)\n\t\t\t\t} //satisfies StopUnboundedBin\n\t\t\t],\n\t\t\tcutoffType: 'normal'\n\t\t} //as BinaryNumericQ //TODO: remove forced type\n\t}\n\n\tgetBoundaryOpts(): BoundaryOpts {\n\t\treturn {\n\t\t\tvalues: [\n\t\t\t\t{\n\t\t\t\t\t//this.q.lst[0].map(bin => ({ x: bin.startunbounded ? bin.stop : bin.start, isDraggable: true })),\n\t\t\t\t\tx: this.q.lst[0].stop,\n\t\t\t\t\tisDraggable: true\n\t\t\t\t}\n\t\t\t],\n\t\t\tcallback: (d: LineData, value) => {\n\t\t\t\tthis.q.lst[0].stop = value\n\t\t\t\tthis.q.lst[1].start = value\n\t\t\t\tthis.dom.cutoffInput.property('value', value)\n\t\t\t\tthis.q.lst = this.processBinaryBinInputs()\n\t\t\t\tthis.dom.customBinRanges.data(this.q.lst).html(d => d.range)\n\t\t\t\tthis.dom.customBinLabelInput.data(this.q.lst).property('value', d => d.label)\n\t\t\t}\n\t\t}\n\t}\n\n\tgetBoundaryInclusion() {\n\t\treturn this.q.lst[0].startinclusive ? 'startinclusive' : 'stopinclusive'\n\t}\n\n\trenderBoundaryInclusionSelect() {\n\t\t//if (this.dom.boundaryInput) return\n\t\t//const handler = this.handler\n\t\tthis.dom.boundaryInclusionDiv.selectAll('*').remove()\n\t\tthis.dom.boundaryInclusionDiv\n\t\t\t.append('span')\n\t\t\t.style('padding', '5px')\n\t\t\t.style('color', 'rgb(136, 136, 136)')\n\t\t\t.html('Boundary Inclusion')\n\n\t\tconst x = '<span style=\"font-family:Times;font-style:italic\">x</span>'\n\n\t\tthis.dom.boundaryInclusionSelect = this.dom.boundaryInclusionDiv\n\t\t\t.append('select')\n\t\t\t.style('margin-left', '10px')\n\t\t\t.on('change', () => {\n\t\t\t\tthis.renderBoundaryInputDivs()\n\t\t\t})\n\n\t\tthis.dom.boundaryInclusionSelect\n\t\t\t.selectAll('option')\n\t\t\t.data([\n\t\t\t\t{ value: 'stopinclusive', html: `start &lt; ${x} &le; end` },\n\t\t\t\t{ value: 'startinclusive', html: `start &le; ${x} &lt; end` }\n\t\t\t])\n\t\t\t.enter()\n\t\t\t.append('option')\n\t\t\t.property('value', d => d.value)\n\t\t\t.property('selected', d => this.tw.q.lst?.[0]?.[d.value] == true)\n\t\t\t.html(d => d.html)\n\t}\n\n\tasync renderCutoffInput() {\n\t\tthis.dom.cutoff_div.append('span').style('margin-right', '5px').style('opacity', 0.5).text('Boundary value')\n\n\t\tconst q = this.q\n\n\t\tthis.dom.cutoffInput = this.dom.cutoff_div\n\t\t\t.append('input')\n\t\t\t.style('width', '100px')\n\t\t\t.attr('type', 'number')\n\t\t\t.style('margin-right', '10px')\n\t\t\t.attr('value', q.lst[0].stop)\n\t\t\t.on('change', () => this.renderBoundaryInputDivs())\n\n\t\tthis.dom.cutoffPercentileCheckbox = make_one_checkbox({\n\t\t\tholder: this.dom.cutoff_div,\n\t\t\tlabeltext: 'Use percentile',\n\t\t\tchecked: false,\n\t\t\tdivstyle: { display: 'inline-block' },\n\t\t\tcallback: async checked => {\n\t\t\t\tthis.dom.cutoffInput.property('disabled', checked == true)\n\t\t\t\tthis.dom.cutoffInputPercentile.style('display', checked ? '' : 'none')\n\t\t\t\tthis.handlePercentileChange()\n\t\t\t}\n\t\t})\n\n\t\tthis.dom.cutoffInputPercentile = this.dom.cutoff_div\n\t\t\t.append('input')\n\t\t\t.attr('type', 'number')\n\t\t\t.attr('value', this.cutoffPercentile)\n\t\t\t.style('display', 'none')\n\t\t\t.style('width', '100px')\n\t\t\t.style('margin-right', '10px')\n\t\t\t.on('change', () => this.handlePercentileChange())\n\t}\n\n\tasync handlePercentileChange() {\n\t\ttry {\n\t\t\tconst cutoffPercentile = Number(this.dom.cutoffInputPercentile.property('value'))\n\t\t\tthis.q.cutoffPercentile = cutoffPercentile\n\t\t\tconst data = await this.termsetting.vocabApi.getPercentile(\n\t\t\t\tthis.tw.term,\n\t\t\t\t[cutoffPercentile],\n\t\t\t\tthis.termsetting.vocabApi.state?.termfilter\n\t\t\t)\n\t\t\tthis.dom.cutoffInput.property('value', data.values[0])\n\t\t\tthis.renderBoundaryInputDivs()\n\t\t} catch (e) {\n\t\t\tconsole.error(e)\n\t\t}\n\t}\n\n\trenderBoundaryInputDivs() {\n\t\tconst cutoff = this.dom.cutoffInput.property('value')\n\t\tthis.q.lst[0].stop = cutoff\n\t\tthis.q.lst[1].start = cutoff\n\t\tthis.q.lst = this.processBinaryBinInputs()\n\t\tconst data = this.q.lst\n\t\tconst holder = this.dom.inputsDiv\n\n\t\tholder.selectAll('*').remove()\n\n\t\tconst grid = holder\n\t\t\t.append('div')\n\t\t\t.style('display', 'grid')\n\t\t\t.style('grid-template-columns', 'auto auto')\n\t\t\t.style('column-gap', '20px')\n\t\t\t.style('align-items', 'center')\n\n\t\tgrid.append('div').style('margin-bottom', '3px').style('color', 'rgb(136, 136, 136)').text('Range')\n\t\tgrid.append('div').style('margin-bottom', '3px').style('color', 'rgb(136, 136, 136)').text('Bin label')\n\n\t\tfor (const d of data) {\n\t\t\tgrid.append('div').datum(d).attr('name', 'range').html(d.range)\n\n\t\t\tgrid\n\t\t\t\t.append('div')\n\t\t\t\t.append('input')\n\t\t\t\t.datum(d)\n\t\t\t\t.attr('type', 'text')\n\t\t\t\t.style('margin', '2px 0px')\n\t\t\t\t.property('value', d.label)\n\t\t\t\t.on('change', function (this: any) {\n\t\t\t\t\td.label = this.value\n\t\t\t\t})\n\t\t}\n\n\t\tthis.dom.customBinRanges = this.dom.inputsDiv.selectAll('div[name=\"range\"]')\n\t\tthis.dom.customBinLabelInput = this.dom.inputsDiv.selectAll('input')\n\t\tthis.handler.density.setBinLines(this.getBoundaryOpts())\n\t}\n\n\tprocessBinaryBinInputs() {\n\t\tconst inclusive = this.dom.boundaryInclusionSelect.property('value')\n\t\tconst startinclusive = inclusive == 'startinclusive'\n\t\tconst stopinclusive = inclusive == 'stopinclusive'\n\t\t//const inputDivs = this.dom.bins_table.node().querySelectorAll('input')\n\t\tconst val = this.q.lst[0].stop // should not get value from dom.cutoffInput as value can be percentile\n\t\tif (!val && val !== 0) throw 'val is undefined'\n\n\t\tconst firstBin = {\n\t\t\tstartunbounded: true,\n\t\t\tstop: Number(val),\n\t\t\tstartinclusive: false,\n\t\t\tstopinclusive\n\t\t} satisfies StartUnboundedBin\n\n\t\tconst lastBin = {\n\t\t\tstart: Number(val),\n\t\t\tstartinclusive,\n\t\t\tstopinclusive: false,\n\t\t\tstopunbounded: true\n\t\t} satisfies StopUnboundedBin\n\n\t\tconst bins: [StartUnboundedBin, StopUnboundedBin] = [\n\t\t\t{\n\t\t\t\t...firstBin,\n\t\t\t\tlabel: get_bin_label(firstBin, this.q),\n\t\t\t\trange: get_bin_range_equation(firstBin, this.tw.q)\n\t\t\t},\n\t\t\t{\n\t\t\t\t...lastBin,\n\t\t\t\tlabel: get_bin_label(lastBin, this.q),\n\t\t\t\trange: get_bin_range_equation(lastBin, this.tw.q)\n\t\t\t}\n\t\t]\n\n\t\treturn bins\n\t}\n\n\tgetEditedQ(destroyDom: boolean = true): BinaryNumericQ {\n\t\tconst lst = this.processBinaryBinInputs()\n\t\tif (destroyDom) {\n\t\t\tfor (const name of Object.keys(this.dom)) {\n\t\t\t\tthis.dom[name].remove()\n\t\t\t\tdelete this.dom[name]\n\t\t\t}\n\t\t}\n\t\treturn {\n\t\t\tmode: 'binary',\n\t\t\ttype: 'custom-bin',\n\t\t\tlst\n\t\t}\n\t}\n\n\tasync undoEdits() {\n\t\tthis.q = this.getDefaultQ()\n\t\tawait this.handler.density.setBinLines(this.getBoundaryOpts())\n\t\tthis.dom.inputsDiv.selectAll('*').remove()\n\t\tthis.renderBoundaryInclusionSelect()\n\t\tthis.renderCutoffInput()\n\t\tthis.renderBoundaryInputDivs()\n\t}\n}\n"],
+  "mappings": "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",
+  "names": ["d"]
+}

package/dist/NumBinaryEditor.unit.spec-3VTJLILH.js

@@ -0,0 +1,286 @@
+import {
+  agedx
+} from "./chunk-32AI7I4C.js";
+import {
+  NumericHandler
+} from "./chunk-52RORO74.js";
+import "./chunk-WHI6466S.js";
+import {
+  termjson
+} from "./chunk-DHPLHIVP.js";
+import {
+  sleep
+} from "./chunk-DJQTUDJM.js";
+import {
+  require_tape
+} from "./chunk-QWOE5YTB.js";
+import {
+  TwRouter
+} from "./chunk-L4TUTGTA.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-LSEFWW72.js";
+import "./chunk-4FKWINMK.js";
+import "./chunk-HYOEWQ5P.js";
+import "./chunk-HBW42TDT.js";
+import "./chunk-G6O3URDN.js";
+import "./chunk-FN5XPUPH.js";
+import "./chunk-IIT367QZ.js";
+import "./chunk-RZGEKL77.js";
+import "./chunk-XVZ5UJWU.js";
+import "./chunk-WS3NUPNV.js";
+import "./chunk-6VKTEMFV.js";
+import "./chunk-7IYJZZQI.js";
+import "./chunk-M3J4MINX.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-S4JLRRKK.js";
+import "./chunk-TVADJLMF.js";
+import "./chunk-EBKERML3.js";
+import "./chunk-DD4R5P6W.js";
+import "./chunk-JNITUVXP.js";
+import "./chunk-KSGA62R2.js";
+import "./chunk-LOZEKOES.js";
+import "./chunk-TOU7EVFQ.js";
+import "./chunk-OAWQ6LOO.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-KYBIQBXE.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+import "./chunk-OMR2DT66.js";
+import "./chunk-DQC5FFGV.js";
+import {
+  __toESM
+} from "./chunk-HFNDKYVF.js";
+
+// termsetting/handlers/test/NumBinaryEditor.unit.spec.ts
+var import_tape = __toESM(require_tape(), 1);
+var pct50 = 6.3475409836;
+var pct70 = 1000.36986301355;
+async function getNumericHandler(opts = {}) {
+  const term = JSON.parse(JSON.stringify(termjson.agedx));
+  const rawTw = {
+    term,
+    q: {
+      mode: "binary"
+    }
+  };
+  let handler = {};
+  const vocabApi = {
+    state: {
+      termfilter: { filter: { type: "tvslst", in: "", lst: [] } }
+    },
+    getViolinBox() {
+      return agedx;
+    },
+    getPercentile() {
+      return {
+        values: handler?.editHandler?.q.cutoffPercentile === 70 ? [pct70] : [pct50]
+      };
+    }
+  };
+  const tw = await TwRouter.initRaw(rawTw, { vocabApi });
+  handler = new NumericHandler({
+    termsetting: {
+      tw,
+      term: rawTw.term,
+      q: rawTw.q,
+      opts: {
+        numericEditMenuVersion: ["binary"],
+        usecase: opts.usecase
+      },
+      api: {
+        runCallback() {
+        }
+      },
+      dom: {
+        tip: {
+          hide() {
+          }
+        }
+      },
+      vocabApi
+    }
+  });
+  handler.density_data = { min: 0, max: 100 };
+  const holder = select_default("body").append("div").style("position", "relative").style("width", "fit-content").style("margin", "20px").style("padding", "5px").style("border", "1px solid #000");
+  handler.dom.editDiv = holder;
+  await handler.setEditHandler(handler.tabs[0]);
+  return {
+    rawTw,
+    tw,
+    handler,
+    editHandler: handler.editHandler,
+    holder,
+    destroy: () => {
+      if ("destroy" in handler.editHandler) handler.editHandler.destroy();
+      if (typeof handler.destroy == "function") handler.destroy();
+      holder.remove();
+    }
+  };
+}
+(0, import_tape.default)("\n", (test) => {
+  test.comment("-***- NumBinaryEditor.unit.spec -***-");
+  test.end();
+});
+(0, import_tape.default)("handler methods", async (test) => {
+  const { editHandler, destroy } = await getNumericHandler();
+  editHandler.termsetting.tw.q = { mode: "continuous" };
+  test.deepEqual(
+    await editHandler.getDefaultQ(),
+    {
+      mode: "binary",
+      type: "custom-bin",
+      lst: [
+        {
+          startunbounded: true,
+          startinclusive: false,
+          stopinclusive: false,
+          stop: 50,
+          label: "<50",
+          range: '<span style="font-family:Times;font-style:italic;">x</span> <50'
+        },
+        {
+          stopunbounded: true,
+          startinclusive: true,
+          stopinclusive: false,
+          start: 50,
+          label: "\u226550",
+          range: '<span style="font-family:Times;font-style:italic;">x</span> \u226550'
+        }
+      ],
+      cutoffType: "normal"
+    },
+    "should give the expected defaultQ"
+  );
+  if (test._ok) destroy();
+  test.end();
+});
+(0, import_tape.default)("initial rendered UI", async (test) => {
+  const { editHandler, holder, destroy } = await getNumericHandler();
+  await editHandler.showEditMenu(holder);
+  test.equal(editHandler.dom?.density_div.selectAll("svg").size(), 1, `should render a density plot svg`);
+  test.equal(
+    editHandler.dom.boundaryInclusionDiv.selectAll("option").size(),
+    2,
+    `should render a boundary inclusion dropdown with 2 options`
+  );
+  test.equal(
+    editHandler.dom.cutoff_div.selectAll(`input[type='number']`).size(),
+    2,
+    `should render cutoff inputs, absolute and in percentile`
+  );
+  test.equal(
+    editHandler.dom.cutoff_div.selectAll(`input[type='checkbox']`).size(),
+    1,
+    `should render cutoff option for percentile`
+  );
+  test.equal(editHandler.dom.cutoffInputPercentile.style("display"), "none", `should hide percentile input by default`);
+  editHandler.dom.cutoffPercentileCheckbox.property("checked", true);
+  editHandler.dom.cutoffPercentileCheckbox.node().dispatchEvent(new Event("input", { bubbles: true }));
+  await sleep(0);
+  test.equal(
+    editHandler.dom.cutoffInputPercentile.style("display"),
+    "inline-block",
+    `should show the percentile input when the checkbox is checked`
+  );
+  test.equal(
+    editHandler.dom.cutoffInputPercentile.property("value"),
+    "50",
+    `should default to 50% percentile input value`
+  );
+  const newCutoff = 6.3475409836;
+  const ranges = editHandler.dom.inputsDiv.node().querySelectorAll('div[name="range"]');
+  test.equal(ranges[0].innerText, `x \u2264${newCutoff}`, `should render the expected first bin range`);
+  test.equal(ranges[1].innerText, `x >${newCutoff}`, `should render the expected last bin range`);
+  const binInputs = editHandler.dom.inputsDiv.node().querySelectorAll("input");
+  test.equal(binInputs[0].value, `\u2264${newCutoff}`, `should render the expected first bin input value`);
+  test.equal(binInputs[1].value, `>${newCutoff}`, `should render the expected last bin input value`);
+  if (test._ok) destroy();
+  test.end();
+});
+(0, import_tape.default)("cutoff interactivity", async (test) => {
+  const { editHandler, holder, destroy } = await getNumericHandler();
+  await editHandler.showEditMenu(holder);
+  const lines = editHandler.handler.density.dom.binsize_g.selectAll("line");
+  test.equal(lines.size(), 1, `should render only one draggable line in the density plot`);
+  const line = lines.node();
+  const x1 = Number(line.getAttribute("x1"));
+  editHandler.dom.boundaryInclusionSelect.property("value", "startinclusive");
+  editHandler.dom.boundaryInclusionSelect.node().dispatchEvent(new Event("change", { bubbles: true }));
+  const newCutoff = 500;
+  editHandler.dom.cutoffInput.property("value", newCutoff);
+  editHandler.dom.cutoffInput.node().dispatchEvent(new Event("change", { bubbles: true }));
+  const ranges = editHandler.dom.inputsDiv.node().querySelectorAll('div[name="range"]');
+  test.equal(ranges[0].innerText, `x <${newCutoff}`, `should render the expected first bin range`);
+  test.equal(ranges[1].innerText, `x \u2265${newCutoff}`, `should render the expected last bin range`);
+  const binInputs = editHandler.dom.inputsDiv.node().querySelectorAll("input");
+  test.equal(binInputs[0].value, `<${newCutoff}`, `should render the expected first bin input value`);
+  test.equal(binInputs[1].value, `\u2265${newCutoff}`, `should render the expected last bin input value`);
+  const line2 = editHandler.handler.density.dom.binsize_g.select("line").node();
+  test.true(x1 <= Number(line2.getAttribute("x1")), "should trigger the density line to move to the right");
+  editHandler.dom.cutoffPercentileCheckbox.property("checked", true);
+  editHandler.dom.cutoffPercentileCheckbox.node().dispatchEvent(new Event("input", { bubbles: true }));
+  editHandler.dom.cutoffInputPercentile.property("value", 70);
+  editHandler.dom.cutoffInputPercentile.node().dispatchEvent(new Event("change", { bubbles: true }));
+  await sleep(0);
+  {
+    const lines2 = [...editHandler.handler.density.dom.binsize_g.node().querySelectorAll("line")];
+    test.deepEqual(
+      lines2.map((l) => l.getAttribute("x1")),
+      ["116"],
+      `should re-render a draggable line in the updated x-position`
+    );
+    const ranges2 = editHandler.dom.inputsDiv.node().querySelectorAll('div[name="range"]');
+    test.equal(ranges2[0].innerText, `x <${pct70}`, `should render the expected first bin range`);
+    test.equal(ranges2[1].innerText, `x \u2265${pct70}`, `should render the expected last bin range`);
+    const binInputs2 = editHandler.dom.inputsDiv.node().querySelectorAll("input");
+    test.equal(binInputs2[0].value, `<${pct70}`, `should render the expected first bin input value`);
+    test.equal(binInputs2[1].value, `\u2265${pct70}`, `should render the expected last bin input value`);
+  }
+  test.deepEqual(
+    editHandler.getEditedQ(false),
+    {
+      mode: "binary",
+      type: "custom-bin",
+      lst: [
+        {
+          startunbounded: true,
+          stop: pct70,
+          startinclusive: false,
+          stopinclusive: false,
+          label: `<${pct70}`,
+          range: `<span style="font-family:Times;font-style:italic;">x</span> <${pct70}`
+        },
+        {
+          start: pct70,
+          startinclusive: true,
+          stopinclusive: false,
+          stopunbounded: true,
+          label: `\u2265${pct70}`,
+          range: `<span style="font-family:Times;font-style:italic;">x</span> \u2265${pct70}`
+        }
+      ]
+    },
+    `should give the expected edited q object`
+  );
+  const density_div = editHandler.dom.density_div.node();
+  await editHandler.showEditMenu(holder);
+  test.equal(
+    density_div,
+    editHandler.dom.density_div.node(),
+    `should not re-render the menu when the holder has not changed`
+  );
+  await editHandler.undoEdits();
+  await sleep(0);
+  {
+    const lines2 = [...editHandler.handler.density.dom.binsize_g.node().querySelectorAll("line")];
+    test.deepEqual(
+      lines2.map((l) => l.getAttribute("x1")),
+      ["11"],
+      `should render a draggable line in the expected x-position`
+    );
+  }
+  if (test._ok) destroy();
+  test.end();
+});
+//# sourceMappingURL=NumBinaryEditor.unit.spec-3VTJLILH.js.map