@sjcrh/proteinpaint-client 2.219.1 → 2.221.0

package/dist/NumBinaryEditor-DSRP4OOU.js

@@ -0,0 +1,274 @@
+import {
+  HandlerBase,
+  make_one_checkbox
+} from "./chunk-WD7FZ5EE.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-WXSMUSU7.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-RIHO7ZD5.js";
+import "./chunk-TVJOSRCH.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import {
+  get_bin_label,
+  get_bin_range_equation
+} from "./chunk-4TJO2DGU.js";
+import {
+  toStoredUnit,
+  toUserUnit
+} from "./chunk-W5J3LTYS.js";
+import "./chunk-MHWYRNGA.js";
+import "./chunk-JHLF2ZC2.js";
+import "./chunk-WJLRU5OF.js";
+import "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-PWYMHUXY.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-HS5PO5ZQ.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();
+  }
+  /* the cutoff is stored in the term's own unit but entered and shown in its user-facing one.
+  both are identity functions unless the term declares valueConversion{} */
+  toDisplay(v) {
+    return toUserUnit(v, this.tw.term);
+  }
+  toStored(v) {
+    return toStoredUnit(v, this.tw.term);
+  }
+  async showEditMenu(div) {
+    this.tw = this.handler.tw;
+    const isRemounting = !!this.dom.density_div && this.handler.dom.editDiv?.node().contains(this.dom.density_div.node());
+    if (!isRemounting) this.q = this.getDefaultQ();
+    if (this.dom.density_div) {
+      if (isRemounting) {
+        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, this.tw.term.valueConversion);
+      });
+      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, this.tw.term.valueConversion)
+        },
+        {
+          ...lastBin,
+          label: get_bin_label(lastBin, this.tw.q, this.tw.term.valueConversion),
+          range: get_bin_range_equation(lastBin, this.tw.q, this.tw.term.valueConversion)
+        }
+        //satisfies StopUnboundedBin
+      ],
+      cutoffType: "normal"
+    };
+  }
+  getBoundaryOpts() {
+    return {
+      values: [
+        {
+          //this.q.lst[0].map(bin => ({ x: bin.startunbounded ? bin.stop : bin.start, isDraggable: true })),
+          x: this.toDisplay(this.q.lst[0].stop),
+          isDraggable: true
+        }
+      ],
+      // the dragged value arrives in display units, matching what the cutoff <input> shows
+      callback: (d, value) => {
+        this.q.lst[0].stop = this.toStored(value);
+        this.q.lst[1].start = this.toStored(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", this.toDisplay(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", this.toDisplay(data.values[0]));
+      this.renderBoundaryInputDivs();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  renderBoundaryInputDivs() {
+    const cutoff = this.toStored(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, this.tw.term.valueConversion),
+        range: get_bin_range_equation(firstBin, this.tw.q, this.tw.term.valueConversion)
+      },
+      {
+        ...lastBin,
+        label: get_bin_label(lastBin, this.q, this.tw.term.valueConversion),
+        range: get_bin_range_equation(lastBin, this.tw.q, this.tw.term.valueConversion)
+      }
+    ];
+    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-DSRP4OOU.js.map

package/dist/NumBinaryEditor.unit.spec-TT666YL4.js

@@ -0,0 +1,308 @@
+import {
+  sleep
+} from "./chunk-WA3C3A2M.js";
+import {
+  agedx
+} from "./chunk-32AI7I4C.js";
+import {
+  termjson
+} from "./chunk-CWWE77DH.js";
+import {
+  require_tape
+} from "./chunk-PJYCTAMC.js";
+import {
+  NumericHandler
+} from "./chunk-HRTPGNOG.js";
+import "./chunk-WY3IORKG.js";
+import {
+  TwRouter
+} from "./chunk-WD7FZ5EE.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-WXSMUSU7.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-RIHO7ZD5.js";
+import "./chunk-TVJOSRCH.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import "./chunk-4TJO2DGU.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-MHWYRNGA.js";
+import "./chunk-JHLF2ZC2.js";
+import "./chunk-WJLRU5OF.js";
+import "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-PWYMHUXY.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import {
+  __toESM
+} from "./chunk-HS5PO5ZQ.js";
+
+// termsetting/handlers/test/NumBinaryEditor.unit.spec.ts
+var import_tape = __toESM(require_tape(), 1);
+var pct50 = 6.3475409836;
+var pct70 = 1000.36986301355;
+var DAY_TO_YEAR = 1 / 365.25;
+function getConvertedTerm() {
+  const term = JSON.parse(JSON.stringify(termjson.agedx));
+  term.valueConversion = { fromUnit: "day", toUnit: "year", scaleFactor: DAY_TO_YEAR };
+  return term;
+}
+async function getNumericHandler(opts = {}) {
+  const term = opts.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();
+});
+(0, import_tape.default)("converted term", async (test) => {
+  const { editHandler, holder, destroy } = await getNumericHandler({ term: getConvertedTerm() });
+  await editHandler.showEditMenu(holder);
+  test.equal(
+    editHandler.dom.cutoffInput.property("value"),
+    String(Number((pct50 * DAY_TO_YEAR).toFixed(2))),
+    `should fill the cutoff input in years`
+  );
+  editHandler.dom.cutoffInput.property("value", 5);
+  editHandler.dom.cutoffInput.node().dispatchEvent(new Event("change", { bubbles: true }));
+  const editedQ = editHandler.getEditedQ(false);
+  test.deepEqual(
+    [editedQ.lst[0].stop, editedQ.lst[1].start],
+    [1826.25, 1826.25],
+    `should store a cutoff typed in years as days`
+  );
+  test.deepEqual(
+    editedQ.lst.map((bin) => bin.label),
+    // the default boundary inclusion is stopinclusive
+    ["\u22645y", ">5y"],
+    `should label the two bins in years`
+  );
+  if (test._ok) destroy();
+  test.end();
+});
+//# sourceMappingURL=NumBinaryEditor.unit.spec-TT666YL4.js.map

package/dist/NumContEditor-6CURFOCH.js

@@ -0,0 +1,100 @@
+import {
+  HandlerBase,
+  make_one_checkbox
+} from "./chunk-WD7FZ5EE.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-WXSMUSU7.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-RIHO7ZD5.js";
+import "./chunk-TVJOSRCH.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import "./chunk-4TJO2DGU.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-MHWYRNGA.js";
+import "./chunk-JHLF2ZC2.js";
+import "./chunk-WJLRU5OF.js";
+import "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-PWYMHUXY.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-HS5PO5ZQ.js";
+
+// termsetting/handlers/NumContEditor.ts
+var NumContEditor = class extends HandlerBase {
+  constructor(opts, handler) {
+    super(opts);
+    this.dom = {};
+    this.termsetting = opts.termsetting;
+    this.tw = opts.termsetting.tw;
+    this.handler = handler;
+    this.q = this.setDefaultQ();
+  }
+  setDefaultQ() {
+    if (this.tw.q.mode == "continuous") return JSON.parse(JSON.stringify(this.tw.q));
+    return { mode: "continuous" };
+  }
+  async showEditMenu(div) {
+    this.tw = this.handler.tw;
+    this.q = this.setDefaultQ();
+    if (this.dom.inputsDiv) {
+      if (div.node().contains(this.dom.inputsDiv.node())) return;
+      else delete this.dom.inputsDiv;
+    }
+    this.dom.density_div = div.append("div");
+    await this.handler.density.showViolin(this.dom.density_div);
+    this.dom.inputsDiv = div.append("div");
+    this.mayShowValueconversionMsg(this.dom.inputsDiv);
+    if (this.termsetting.opts.usecase?.target == "matrix") {
+      this.dom.convert2ZCheckbox = await make_one_checkbox({
+        holder: this.dom.inputsDiv.append("div"),
+        labeltext: "Convert to Z-score",
+        checked: this.q.convert2ZScore ? true : false,
+        divstyle: { display: "inline-block", padding: "3px 10px" },
+        callback: (checked) => {
+          this.q.convert2ZScore = checked;
+          if (checked) {
+            this.dom.scaleSelect.property("value", 1);
+            delete this.q.scale;
+          }
+        }
+      });
+    }
+    const selectDiv = this.dom.inputsDiv.append("div").style("display", "inline-block");
+    selectDiv.append("div").style("display", "inline-block").style("padding", "3px 10px").html("Scale values");
+    this.dom.scaleSelect = selectDiv.append("select").on("change", (event) => {
+      if (event.target.value == "1") delete this.q.scale;
+      else {
+        if (this.dom.convert2ZCheckbox) this.dom.convert2ZCheckbox.property("checked", false);
+        this.q.scale = Number(event.target.value);
+      }
+    });
+    this.dom.scaleSelect.selectAll("option").data([
+      { html: "No Scaling", value: 1 },
+      { html: "Per 10", value: 10 },
+      { html: "Per 100", value: 100 },
+      { html: "Per 1000", value: 1e3 }
+    ]).enter().append("option").attr("value", (d) => d.value).html((d) => d.html).property("selected", (d) => "scale" in this.q && d.value == this.q.scale);
+  }
+  getEditedQ() {
+    const scaleValue = this.dom.scaleSelect.property("value");
+    if (scaleValue == "1") delete this.q.scale;
+    else this.q.scale = Number(scaleValue);
+    if (this.dom.convert2ZCheckbox) this.q.convert2ZScore = this.dom.convert2ZCheckbox.property("checked");
+    return this.q;
+  }
+  destroy() {
+    for (const name of Object.keys(this.dom)) {
+      this.dom[name].remove();
+      delete this.dom[name];
+    }
+  }
+};
+export {
+  NumContEditor
+};
+//# sourceMappingURL=NumContEditor-6CURFOCH.js.map