@sjcrh/proteinpaint-client 2.201.0 → 2.202.0

package/dist/tk-RHWJJXH2.js

@@ -1,1127 +0,0 @@
-import {
-  getFilterName,
-  makelabel,
-  printCategory,
-  rangequery_rglst
-} from "./chunk-DKAHHMKN.js";
-import {
-  makeJunctionCustomTerm
-} from "./chunk-MGGAWPTR.js";
-import {
-  rehydrateFilter
-} from "./chunk-SKMFMGCD.js";
-import "./chunk-Q4AP5L7R.js";
-import {
-  legend_newrow
-} from "./chunk-DCNDZOI3.js";
-import "./chunk-V2OJLJSK.js";
-import "./chunk-E2GHT7RH.js";
-import "./chunk-ZVDOSFWU.js";
-import {
-  axisstyle,
-  table2col
-} from "./chunk-K6OVOHIZ.js";
-import "./chunk-HJ6L54YS.js";
-import "./chunk-XFAL46LZ.js";
-import "./chunk-HQAJVJCQ.js";
-import {
-  Menu
-} from "./chunk-HYOEWQ5P.js";
-import "./chunk-6QCYT6G2.js";
-import "./chunk-FN5XPUPH.js";
-import "./chunk-IIT367QZ.js";
-import "./chunk-RZGEKL77.js";
-import "./chunk-ZFJUVP2N.js";
-import "./chunk-R3ARQMM4.js";
-import {
-  dofetch3
-} from "./chunk-4USLEUNR.js";
-import "./chunk-4WF3XDQP.js";
-import "./chunk-X6VTVZY7.js";
-import "./chunk-M3J4MINX.js";
-import "./chunk-PF4DSFDR.js";
-import "./chunk-L44P5N4U.js";
-import {
-  JT_a3ss,
-  JT_a5ss,
-  JT_canonical,
-  JT_exonaltuse,
-  JT_exonskip,
-  JTypes,
-  TermTypes,
-  bplen
-} from "./chunk-GEQUQ3GG.js";
-import "./chunk-WPHUM5S5.js";
-import "./chunk-75T7ESEO.js";
-import {
-  collide_default,
-  simulation_default,
-  x_default,
-  y_default
-} from "./chunk-2KXLYFAO.js";
-import {
-  axisRight
-} from "./chunk-LOZEKOES.js";
-import "./chunk-VQZ2Z5YU.js";
-import {
-  linear,
-  log
-} from "./chunk-UJELJXJG.js";
-import "./chunk-FXQXCOII.js";
-import "./chunk-TLT4YIG3.js";
-import "./chunk-5R63Q5KH.js";
-import {
-  select_default
-} from "./chunk-I6Y4O3RR.js";
-import "./chunk-Q5RDQNIT.js";
-import "./chunk-DQC5FFGV.js";
-import "./chunk-HFNDKYVF.js";
-
-// j2/legend.js
-function initLegend(tk, block) {
-  if (!block.legend) return;
-  if (!tk.legend) tk.legend = {};
-  tk.legend.tip = new Menu({ padding: "0px" });
-  const [tr, td, td0] = legend_newrow(block, tk.dslabel);
-  tk.legend.headTd = td0;
-  tk.tr_legend = tr;
-  const table = td.append("table").style("border-spacing", "5px").style("border-collapse", "separate");
-  tk.legend.table = table;
-  create_type(tk, block);
-}
-function updateLegend(data, tk, block) {
-  if (!tk.legend) {
-    return;
-  }
-  update_type(tk);
-}
-function create_type(tk, block) {
-  if (!tk.legend.type) tk.legend.type = {};
-  if (!tk.legend.type.hiddenvalues) tk.legend.type.hiddenvalues = /* @__PURE__ */ new Set();
-  if (tk.hiddentypes) {
-    for (const c of tk.hiddentypes.split(",")) tk.legend.type.hiddenvalues.add(c);
-    delete tk.hiddentypes;
-  }
-  tk.legend.type.row = tk.legend.table.append("tr");
-  tk.legend.type.row.append("td").attr("data-testid", "sjpp-j2-legend-row-type").style("text-align", "right").style("opacity", 0.7).text("Type");
-  tk.legend.type.holder = tk.legend.type.row.append("td");
-}
-function update_type(tk) {
-  if (tk.hardcodeCnvOnly) return;
-  const type2count = /* @__PURE__ */ new Map();
-  for (const j of tk.data) {
-    for (const t of j.types) {
-      type2count.set(t, 1 + (type2count.get(t) || 0));
-    }
-  }
-  tk.legend.type.holder.selectAll("*").remove();
-  for (const [t, c] of [...type2count].sort((i, j) => j[1] - i[1])) {
-    printCategory({
-      holder: tk.legend.type.holder,
-      key: t,
-      label: JTypes[t].name,
-      color: JTypes[t].color,
-      count: c,
-      testid: "sjpp-j2-legend-row-type-item",
-      click: (event) => {
-        const opts = [
-          {
-            label: "Hide",
-            callback: () => {
-              tk.legend.type.hiddenvalues.add(t);
-            }
-          },
-          {
-            label: "Show only",
-            callback: () => {
-              for (const t2 of type2count.keys()) {
-                tk.legend.type.hiddenvalues.add(t2);
-              }
-              tk.legend.type.hiddenvalues.delete(t);
-            }
-          },
-          {
-            label: "Show all",
-            isVisible: () => tk.legend.type.hiddenvalues.size,
-            callback: () => {
-              tk.legend.type.hiddenvalues.clear();
-            }
-          }
-        ];
-        tk.legend.tip.clear().showunder(event.target);
-        for (const o of opts) {
-          if (o.isVisible && o.isVisible() == false) continue;
-          tk.legend.tip.d.append("div").attr("class", "sja_menuoption").attr("data-testid", `sjpp-legend-option-${o.label.toLowerCase().replace(/\s/g, "-")}`).style("border-radius", "0px").text(o.label).on("click", () => {
-            o.callback();
-            tk.legend.tip.hide();
-            tk.load();
-          });
-        }
-      }
-    });
-  }
-  for (const c of tk.legend.type.hiddenvalues) {
-    let loading = false;
-    tk.legend.type.holder.append("div").style("display", "inline-block").attr("class", "sja_clb").style("text-decoration", "line-through").style("opacity", 0.7).text(JTypes[c].name).on("click", async (event) => {
-      if (loading) return;
-      loading = true;
-      tk.legend.type.hiddenvalues.delete(c);
-      event.target.innerHTML = "Updating...";
-      await tk.load();
-    });
-  }
-}
-
-// j2/render.js
-var minfontsize = 12;
-var lineopacity = 0.5;
-var discopacity = 0.5;
-function renderTk(data, tk, block) {
-  if (data) {
-    if (data.junctions?.length == 0) {
-      tk.data = [];
-      tk.leftlabels?.doms?.jug?.text("0 junctions");
-      return;
-    }
-    if (!Number.isFinite(data.maxReadCount)) throw new Error("data.maxReadCount is not number");
-    rawdata2track(data.junctions, tk, block);
-  } else {
-  }
-  tk.leftlabels.doms.jug.text(`${tk.data.length} junction${tk.data.length > 1 ? "s" : ""}`);
-  const viewpxwidth = block.width + block.subpanels.reduce((i, j) => i + j.leftpad + j.width, 0);
-  setColor(tk);
-  tk.sections.jug.g.selectAll("*").remove();
-  const mg = tk.sections.jug.g;
-  tk.data.sort((a, b) => {
-    return a._x - b._x;
-  });
-  const maxsamplecount = tk.data.reduce((max, j) => Math.max(max, j.sampleCount), 0);
-  {
-    const radius = 5;
-    let mrd = 0;
-    const w = Math.pow(radius, 2) * Math.PI;
-    if (maxsamplecount <= 10) {
-      mrd = w * maxsamplecount * 0.9;
-    } else if (maxsamplecount <= 100) {
-      mrd = w * 10;
-    } else if (maxsamplecount <= 1e3) {
-      mrd = w * 14;
-    } else {
-      mrd = w * 20;
-    }
-    const sf_discradius = linear().domain([
-      1,
-      maxsamplecount * 0.5 + 0.1,
-      maxsamplecount * 0.6 + 0.1,
-      maxsamplecount * 0.7 + 0.1,
-      maxsamplecount * 0.8 + 0.1,
-      maxsamplecount
-    ]).range([w, w + (mrd - w) * 0.8, w + (mrd - w) * 0.85, w + (mrd - w) * 0.9, w + (mrd - w) * 0.95, mrd]);
-    let maxradius = 0;
-    for (const j of tk.data) {
-      j.radius = Math.sqrt(sf_discradius(j.sampleCount) / Math.PI);
-      if (j.sampleCount > 1) {
-        mg.append("text").attr("font-family", "Arial").attr("font-size", Math.max(minfontsize, j.radius)).text(j.sampleCount).each(function() {
-          const b = this.getBBox();
-          const newrad = Math.sqrt(Math.pow(b.width, 2) + Math.pow(b.height, 2)) / 2;
-          j.radius = Math.max(j.radius, newrad);
-        }).remove();
-      }
-      j.rimwidth = j.rimcount ? Math.max(2, j.radius / 6) : 0;
-      j.radius2 = j.radius + j.rimwidth + (j.rimwidth > 0 ? 1 : 0);
-      maxradius = Math.max(maxradius, j.radius2);
-    }
-    tk.maxradius = maxradius;
-  }
-  const maxmedian = tk.data.reduce((c, j) => Math.max(c, j.medianReadCount), 0);
-  tk.sections.jug.yscale = (tk.yscaleUseLog ? log() : linear()).domain([tk.readcountCutoff || 1, data.maxReadCount]).range([tk.sections.jug.axisheight, 0]);
-  for (const j of tk.data) {
-    if (j.axisy == void 0) {
-      j.axisy = tk.sections.jug.axisheight - tk.sections.jug.yscale(j.medianReadCount);
-    }
-  }
-  tk.sections.jug.height = tk.sections.jug.axisheight + tk.sections.jug.neckheight + tk.sections.jug.legheight;
-  mg.attr("transform", `translate(0,${tk.sections.jug.height})`);
-  {
-    const topy = -tk.sections.jug.legheight - tk.sections.jug.neckheight - tk.sections.jug.axisheight;
-    mg.append("line").attr("x1", 0).attr("y1", topy).attr("y2", topy).attr("x2", viewpxwidth).attr("stroke", "#858585").attr("stroke-opacity", 0.2).attr("shape-rendering", "crispEdges");
-    mg.append("line").attr("x1", 0).attr("y1", topy + tk.sections.jug.axisheight).attr("y2", topy + tk.sections.jug.axisheight).attr("x2", viewpxwidth).attr("stroke", "#858585").attr("stroke-opacity", 0.2).attr("shape-rendering", "crispEdges");
-    let v = 10;
-    while (v <= data.maxReadCount) {
-      mg.append("line").attr("x1", 0).attr("y1", topy + tk.sections.jug.yscale(v)).attr("y2", topy + tk.sections.jug.yscale(v)).attr("x2", viewpxwidth).attr("stroke", "#858585").attr("stroke-opacity", 0.2).attr("stroke-dasharray", "4,4").attr("shape-rendering", "crispEdges");
-      v *= 10;
-    }
-  }
-  const jug = mg.selectAll().data(tk.data).enter().append("g").attr("class", "sja_jug").attr("transform", (d) => set_jug(d)).each(function(j) {
-    j.jugg = this;
-  });
-  jug.append("line").attr("stroke", (d) => d.color).attr("x1", (d) => set_leg_x1(d)).attr("y2", -tk.sections.jug.legheight).attr("stroke-opacity", lineopacity).attr("class", "sja_jug_leg1").each(function(d) {
-    d.leg1 = this;
-  });
-  jug.append("line").attr("stroke", (d) => d.color).attr("x2", (d) => set_leg_x2(d)).attr("y1", -tk.sections.jug.legheight).attr("stroke-opacity", lineopacity).attr("class", "sja_jug_leg2").each(function(d) {
-    d.leg2 = this;
-  });
-  const jug2 = jug.append("g").attr("class", "sja_jug_jug2").attr("transform", (d) => set_jug2(d, tk));
-  jug2.append("line").attr("stroke", (d) => d.color).attr("class", "sja_jug_stem").attr("stroke-dasharray", "2,2").attr("shape-rendering", "crispEdges").attr("y1", (d) => d.radius).attr("y2", (d) => {
-    return tk.sections.jug.neckheight + d.axisy;
-  }).attr("stroke-opacity", lineopacity).each(function(d) {
-    d.stem = this;
-  });
-  jug2.append("circle").each(function(d) {
-    d.disc = this;
-  }).attr("r", (d) => d.radius).attr("fill", (d) => d.color).attr("stroke", "white").attr("fill-opacity", discopacity);
-  jug2.filter((d) => d.sampleCount > 1).append("text").text((d) => d.sampleCount).attr("font-size", (d) => Math.max(minfontsize, d.radius)).attr("class", "sja_jug_discnum").attr("fill", "white").attr("font-family", "Arial").attr("text-anchor", "middle").attr("dominant-baseline", "central");
-  jug2.append("circle").attr("r", (d) => d.radius).attr("stroke", (d) => d.color).attr("fill", "white").attr("fill-opacity", 0).attr("stroke-opacity", 0).on("mouseover", (event, d) => {
-    event.stopPropagation();
-    select_default(d.disc).attr("fill-opacity", 0.8);
-    select_default(d.stem).attr("stroke-opacity", 1);
-    select_default(d.leg1).attr("stroke-opacity", 1);
-    select_default(d.leg2).attr("stroke-opacity", 1);
-    mouseoverSpanBackground(d, tk, block, viewpxwidth);
-    mouseoverBoxplot(d, tk);
-    const p = event.target.getBoundingClientRect();
-    tk.hovertip.clear().show(p.left + p.width, p.top - 50);
-    showOneJunction(d, tk, tk.hovertip.d, block);
-  }).on("mouseout", (event, d) => {
-    tk.hovertip.hide();
-    tk.pica.g.selectAll("*").remove();
-    block.cursorhlbar.attr("fill", block.cursorhlbarFillColor);
-    select_default(d.disc).attr("fill-opacity", discopacity);
-    select_default(d.stem).attr("stroke-opacity", lineopacity);
-    select_default(d.leg1).attr("stroke-opacity", lineopacity);
-    select_default(d.leg2).attr("stroke-opacity", lineopacity);
-  }).on("mousedown", (event) => {
-    event.stopPropagation();
-  }).on("mousemove", (event) => {
-    event.stopPropagation();
-  }).on("click", (event, d) => {
-    tk.hovertip.hide();
-    const p = event.target.getBoundingClientRect();
-    tk.itemtip.clear().show(p.left + p.width, p.top - 50);
-    showOneJunction(d, tk, tk.itemtip.d.append("div"), block, true);
-  });
-  doForceLayout(tk, block, viewpxwidth).then(() => {
-    set_all(tk);
-    axisstyle({
-      axis: tk.sections.jug.axis.transition().call(
-        axisRight().scale(tk.sections.jug.yscale).ticks(Math.floor(tk.sections.jug.axisheight / 20), ".0f")
-      ),
-      color: "black",
-      showline: true
-    });
-  });
-}
-function rawdata2track(raw, tk, block) {
-  const viewpxwidth = block.width + block.subpanels.reduce((i, j) => i + j.leftpad + j.width, 0);
-  const junctions = [];
-  for (const j of raw) {
-    if (j.sv && j.chr == j.sv.mate.chr) {
-      if (j.start > j.sv.mate.start) {
-        const p = j.start;
-        j.start = j.stop = j.sv.mate.start;
-        j.sv.mate.start = j.sv.mate.stop = p;
-        const q = j.strand;
-        j.strand = j.sv.mate.strand;
-        j.sv.mate.strand = q;
-      }
-    }
-    const e = j2block(j, block, viewpxwidth);
-    if (e) {
-      console.log(
-        "junction not in view range: " + j.chr + ":" + j.start + "-" + (j.sv ? j.sv.mate.chr + ":" + j.sv.mate.start : j.stop)
-      );
-      continue;
-    }
-    junctions.push(j);
-  }
-  if (tk.data) {
-    const map = /* @__PURE__ */ new Map();
-    tk.data.forEach((j) => map.set(j.chr + "." + j.start + "." + j.stop + "." + j.strand, j));
-    const pannedpx = Number.isInteger(block.pannedpx) ? block.pannedpx : 0;
-    for (const i of junctions) {
-      const j = map.get(i.chr + "." + i.start + "." + i.stop + "." + i.strand);
-      if (j) {
-        i.x = j.x + pannedpx;
-        i.axisy = j.axisy;
-      }
-    }
-  }
-  if (junctions.length == 0) {
-    return "no junctions in view range";
-  }
-  tk.data = junctions;
-}
-function j2block(j, block, viewpxwidth) {
-  let starthit;
-  let stophit;
-  {
-    const l = block.seekcoord(j.chr, j.start);
-    for (const hit of l) {
-      if (hit.ridx != void 0 && block.subpanels) {
-        if (hit.x < 0 || hit.x > block.width) {
-          continue;
-        }
-      }
-      starthit = hit;
-    }
-  }
-  {
-    const l = block.seekcoord(j.sv ? j.sv.mate.chr : j.chr, j.sv ? j.sv.mate.start : j.stop);
-    for (const hit of l) {
-      if (hit.ridx != void 0 && block.subpanels) {
-        if (hit.x < 0 || hit.x > block.width) {
-          continue;
-        }
-      }
-      stophit = hit;
-    }
-  }
-  if (starthit) {
-    if (!stophit) {
-      stophit = starthit;
-    }
-  } else {
-    if (stophit) {
-      starthit = stophit;
-    } else {
-      return true;
-    }
-  }
-  let startout = starthit.x < 0 || starthit.x > viewpxwidth;
-  let stopout = stophit.x < 0 || stophit.x > viewpxwidth;
-  if (startout && stopout) {
-    return true;
-  }
-  j.x0 = starthit.x;
-  j.x1 = stophit.x;
-  j.x = (j.x0 + j.x1) / 2;
-  j._x = j.x;
-  return false;
-}
-function setColor(tk) {
-  for (const j of tk.data) {
-    delete j.color;
-    j.color = JTypes[j.types[0]]?.color;
-    if (j.color == void 0) throw new Error("unknown j.type");
-  }
-}
-function set_jug(d) {
-  return "translate(" + d.x + ",0)";
-}
-function set_leg_x1(d) {
-  return d.x0 - d.x;
-}
-function set_leg_x2(d) {
-  return d.x1 - d.x;
-}
-function set_jug2(d, tk) {
-  return "translate(0,-" + (tk.sections.jug.legheight + tk.sections.jug.neckheight + d.axisy) + ")";
-}
-function set_all(tk) {
-  const mg = tk.sections.jug;
-  tk.data.forEach((j) => j.axisy = mg.axisheight - mg.yscale(j.medianReadCount));
-  const dur = 500;
-  mg.g.selectAll(".sja_jug_leg1").transition().duration(dur).attr("y2", -mg.legheight).attr("x1", (d) => set_leg_x1(d));
-  mg.g.selectAll(".sja_jug_leg2").transition().duration(dur).attr("y1", -mg.legheight).attr("x2", (d) => set_leg_x2(d));
-  mg.g.selectAll(".sja_jug_jug2").transition().duration(dur).attr("transform", (d) => set_jug2(d, tk));
-  mg.g.selectAll(".sja_jug").transition().duration(dur).attr("transform", (d) => set_jug(d));
-  mg.g.selectAll(".sja_jug_stem").transition().duration(dur).attr("y2", (d) => mg.neckheight + d.axisy);
-}
-function doForceLayout(tk, block, viewpxwidth) {
-  const nodes = [];
-  let sumdiscwidth = 0;
-  tk.data.map((j) => {
-    let tox;
-    if (j.x0 < 0) {
-      tox = j.x1 - j.radius2 * 2;
-    } else if (j.x1 > viewpxwidth) {
-      tox = j.x0 + j.radius2 * 2;
-    } else {
-      tox = j._x;
-    }
-    nodes.push({
-      junction: j,
-      tox,
-      x: tox,
-      y: tk.sections.jug.axisheight - tk.sections.jug.yscale(j.medianReadCount)
-    });
-    sumdiscwidth += j.radius2 * 2;
-  });
-  nodes.sort((i, j) => i.tox - j.tox);
-  nodes.forEach((n, i) => n.index = i);
-  const collidestrength = sumdiscwidth <= viewpxwidth ? 1 : viewpxwidth / sumdiscwidth;
-  return new Promise((resolve, reject) => {
-    simulation_default(nodes).force(
-      "y",
-      y_default((d) => {
-        return tk.sections.jug.axisheight - tk.sections.jug.yscale(d.junction.medianReadCount);
-      }).strength(1)
-    ).force("x", x_default((d) => d.tox).strength(0.1)).force(
-      "collide",
-      collide_default((d) => {
-        return d.junction.radius2 + 2;
-      }).strength(collidestrength)
-    ).alphaMin(0.5).on("end", () => {
-      nodes.forEach((n) => {
-        n.junction.x = n.x;
-      });
-      resolve();
-    });
-  });
-}
-function mouseoverSpanBackground(j, tk, block, viewpxwidth) {
-  let xleft = Math.min(j.x0, j.x1);
-  let xright = Math.max(j.x0, j.x1);
-  if (block.usegm && block.usegm.strand == "-") {
-    xleft = j.x1;
-    xright = j.x0;
-  }
-  if (xleft >= 0 && xright <= viewpxwidth) {
-    block.cursorhlbar.attr("x", block.leftheadw + block.lpad + xleft).attr("y", 0).attr("width", xright - xleft).attr("height", block.totalheight()).attr("fill", "url(#" + tk.gradient4spanBackground.mid.id + ")");
-    return;
-  }
-  const boxwidth = 50;
-  if (xleft >= 0) {
-    block.cursorhlbar.attr("x", block.leftheadw + block.lpad + xleft).attr("fill", "url(#" + tk.gradient4spanBackground.left.id + ")");
-  } else {
-    block.cursorhlbar.attr("x", block.leftheadw + block.lpad + xright - boxwidth).attr("fill", "url(#" + tk.gradient4spanBackground.right.id + ")");
-  }
-  block.cursorhlbar.attr("y", 0).attr("width", boxwidth).attr("height", block.totalheight());
-}
-function mouseoverBoxplot(j, tk) {
-  if (!j.readcountBoxplot) return;
-  const color = "black";
-  const p5 = tk.sections.jug.yscale(j.readcountBoxplot[0]);
-  const p25 = tk.sections.jug.yscale(j.readcountBoxplot[1]);
-  const p50 = tk.sections.jug.yscale(j.readcountBoxplot[2]);
-  const p75 = tk.sections.jug.yscale(j.readcountBoxplot[3]);
-  const p95 = tk.sections.jug.yscale(j.readcountBoxplot[4]);
-  const w = 10;
-  tk.pica.g.selectAll("*").remove();
-  tk.pica.g.attr("transform", "translate(" + j.x + "," + p50 + ")");
-  const g = tk.pica.g.append("g").attr("transform", "translate(" + (-5 - w - j.radius2) + ",0)");
-  g.append("line").attr("x1", w / 2).attr("x2", w / 2).attr("y1", p95 - p50).attr("y2", p5 - p50).attr("stroke", color).attr("shape-rendering", "crispEdges");
-  g.append("line").attr("x1", 0).attr("x2", w).attr("y1", p5 - p50).attr("y2", p5 - p50).attr("stroke", color).attr("shape-rendering", "crispEdges");
-  g.append("line").attr("x1", 0).attr("x2", w).attr("y1", p95 - p50).attr("y2", p95 - p50).attr("stroke", color).attr("shape-rendering", "crispEdges");
-  g.append("rect").attr("y", p75 - p50).attr("width", w).attr("height", p25 - p75).attr("stroke", color).attr("fill", "white").attr("shape-rendering", "crispEdges");
-  if (p25 - p75 > 3) {
-    g.append("line").attr("x2", w).attr("stroke", color).attr("shape-rendering", "crispEdges");
-  }
-}
-function showOneJunction(j, tk, holder, block, isClickMenu = false) {
-  const table = table2col({ holder, margin: "0px" });
-  {
-    const [t12, t22] = table.addRow();
-    t12.text("Junction");
-    const div = t22.append("div");
-    if (!j.sv || j.chr == j.sv.mate.chr) {
-      div.html(
-        bplen(Math.abs(j.start - (j.sv ? j.sv.mate.start : j.stop))) + ' <span style="font-size:.8em;">' + j.chr + ":" + (j.start + 1) + "-" + ((j.sv ? j.sv.mate.start : j.stop) + 1) + "</span>"
-      );
-    } else {
-      div.html(
-        '<span style="font-size:.8em;">' + j.chr + ":" + (j.start + 1) + "-" + j.sv.mate.chr + ":" + (j.sv.mate.start + 1) + "</span>"
-      );
-    }
-    const d2 = t22.append("div");
-    d2.append("span").attr("class", "sja_mcdot").style("padding", "1px 5px").style("background-color", "#555").style("margin-right", "5px").text(j.strand);
-    if (j.info.site) {
-      d2.append("span").style("font-size", ".7em").style("margin-right", "5px").text(j.info.site);
-    }
-    for (const t of j.types) {
-      d2.append("span").attr("class", "sja_mcdot").style("padding", "1px 5px").style("background-color", JTypes[t]?.color || "black").style("margin-right", "5px").text(JTypes[t]?.name || "?");
-    }
-  }
-  const [t1, t2] = table.addRow();
-  if (j.sampleCount == 1) {
-    t1.text("Sample");
-    const sndiv = t2.append("div");
-    sndiv.text(j.sampleName || "single sample");
-    t2.append("div").html(j.medianReadCount + ' <span style="font-size:.7em">read count</span>');
-  } else {
-    t1.text("Samples");
-    t2.append("div").html(`${j.sampleCount} <span style="font-size:.7em">samples</span>
-			<br>${j.medianReadCount} <span style="font-size:.7em">median read count</span>`);
-  }
-  if (isClickMenu && tk.massApp) {
-    const [, buttonCell] = table.addRow();
-    buttonCell.append("button").attr("data-testid", "sjpp-junction-details").text("Details").on("click", async () => {
-      tk.itemtip.hide();
-      await tk.massApp.dispatch({
-        type: "plot_create",
-        config: {
-          chartType: "summary",
-          term: { term: makeJunctionTerm(j), q: { mode: "continuous" } }
-        }
-      });
-    });
-    buttonCell.append("button").attr("data-testid", "sjpp-junction-select").text("Select").on("click", async (event) => {
-      await addJunctionCustomTerm(tk, [makeJunctionTerm(j)], event.currentTarget, msgDiv);
-    });
-    const msgDiv = buttonCell.append("div").style("font-size", ".7em");
-  }
-  const type2elst = /* @__PURE__ */ new Map();
-  for (const e of j.info?.events || []) {
-    if (!type2elst.has(e.type)) type2elst.set(e.type, []);
-    type2elst.get(e.type).push(e);
-  }
-  for (const [type, elst] of type2elst) {
-    listAllEvents(elst, table, j, tk, block, isClickMenu);
-  }
-  if (type2elst.size == 0) {
-    const [t12, t22] = table.addRow();
-    t12.text("Diagram");
-    showJunctionDiagram(j, tk, t22);
-  }
-}
-function makeJunctionTerm(j) {
-  const position = `${j.chr}:${j.start + 1}-${j.stop + 1}`;
-  return {
-    type: TermTypes.JUNCTION,
-    id: `${j.chr}:${j.start}-${j.stop}:${j.strand}`,
-    name: j.name || `${position} (${j.strand})`,
-    chr: j.chr,
-    start: j.start,
-    stop: j.stop,
-    strand: j.strand,
-    info: j.info || {}
-  };
-}
-function showJunctionDiagram(j, tk, holder) {
-  if (typeof j.info != "object" || Object.keys(j.info).length == 0) {
-    return;
-  }
-  const leftgenes = /* @__PURE__ */ new Map();
-  if (j.info.exonleft) j.info.exonleft.forEach((i) => leftgenes.set(i.isoform, { gene: i.gene, strand: i.strand }));
-  if (j.info.exonleftin) j.info.exonleftin.forEach((i) => leftgenes.set(i.isoform, { gene: i.gene, strand: i.strand }));
-  if (j.info.intronleft) j.info.intronleft.forEach((i) => leftgenes.set(i.isoform, { gene: i.gene, strand: i.strand }));
-  const rightgenes = /* @__PURE__ */ new Map();
-  if (j.info.exonright) j.info.exonright.forEach((i) => rightgenes.set(i.isoform, { gene: i.gene, strand: i.strand }));
-  if (j.info.exonrightin) j.info.exonrightin.forEach((i) => rightgenes.set(i.isoform, { gene: i.gene, strand: i.strand }));
-  if (j.info.intronright) j.info.intronright.forEach((i) => rightgenes.set(i.isoform, { gene: i.gene, strand: i.strand }));
-  let isoform;
-  let strand;
-  if (leftgenes.size) {
-    if (rightgenes.size) {
-      for (const [n, a] of leftgenes) {
-        if (rightgenes.has(n)) {
-          isoform = n;
-          strand = a.strand;
-          break;
-        }
-      }
-    } else {
-      const a = [...leftgenes][0];
-      isoform = a[0];
-      strand = a[1].strand;
-    }
-  } else if (rightgenes.size) {
-    const a = [...rightgenes][0];
-    isoform = a[0];
-    strand = a[1].strand;
-  }
-  if (isoform) {
-    if (strand != "+" && strand != "-") {
-      holder.text("unknown strand for " + isoform);
-      return;
-    }
-    import("./spliceevent.noeventdiagram-EFPFRUFI.js").then((p) => {
-      p.samegene({
-        isoform,
-        reverse: strand == "-",
-        ongene: j.info,
-        holder
-      });
-    });
-    return;
-  }
-  import("./spliceevent.noeventdiagram-EFPFRUFI.js").then((p) => {
-    p.differentgenes({
-      ongene: j.info,
-      holder
-    });
-  });
-}
-function showEventdiagram_a53ss(j, e, tk, holder, block, isClickMenu) {
-  const e2 = {
-    junctionB: {
-      start: j.start,
-      stop: j.stop,
-      strand: j.strand,
-      v: j.medianReadCount
-    },
-    a5ss: e.type == JT_a5ss,
-    a3ss: e.type == JT_a3ss,
-    altinintron: e.altinintron,
-    altinexon: e.altinexon,
-    frame: e.frame,
-    exon5idx: e.exon5idx,
-    strand: e.strand,
-    sitedist: e.sitedist
-  };
-  const otherJs = [];
-  if (e.junctionA) {
-    e2.junctionA = { start: e.junctionA.start, stop: e.junctionA.stop, strand: e.junctionA.strand, v: "..." };
-    const aj = structuredClone(e.junctionA);
-    aj.name = `E${e.exon5idx + 1}-E${e.exon5idx + 1 + 1}`;
-    otherJs.push(aj);
-  }
-  if (isClickMenu) {
-    mayGroupSelect(tk, block, j, otherJs, `${e.gene} ${e.isoform} E${e.exon5idx + 1} ${e.type}`, holder);
-  }
-  import("./spliceevent.a53ss.diagram-YDFVSDMT.js").then((p) => {
-    const text = p.default({
-      event: e2,
-      holder
-    });
-    if (!text) return;
-    setTimeout(() => {
-      if (text.node().getBoundingClientRect().top == 0) return;
-      const strandA = e.junctionA.strand;
-      fetchReadcount4junctionAbyjunctionBsamples(
-        tk,
-        block,
-        j,
-        /* @__PURE__ */ new Map([[e.junctionA.start + "." + e.junctionA.stop + "." + strandA, text]]),
-        [[e.junctionA.start, e.junctionA.stop, strandA]]
-      );
-    }, 1e3);
-  });
-}
-function showEventdiagram_skipalt_fetchreadcount(j, e, tk, holder, block, isClickMenu) {
-  const e2 = {
-    gm: {
-      // confirm if can delete
-      name: e.gene,
-      isoform: e.isoform
-    },
-    junctionB: {
-      data: [{ v: j.medianReadCount }]
-    },
-    skippedexon: e.skippedexon,
-    isskipexon: e.type == JT_exonskip,
-    isaltexon: e.type == JT_exonaltuse,
-    frame: e.frame,
-    junctionAlst: [],
-    color: "#99004d"
-  };
-  const otherJs = [];
-  const firstSkipped = Math.min(...e.skippedexon) + 1;
-  const lastSkipped = Math.max(...e.skippedexon) + 1;
-  if (e.junctionAlst) {
-    for (const [i, jA] of e.junctionAlst.entries()) {
-      if (jA) {
-        const aj = structuredClone(jA);
-        aj.name = `E${firstSkipped - 1 + i}-E${firstSkipped + i}`;
-        otherJs.push(aj);
-        jA.data = [{ v: "..." }];
-        e2.junctionAlst.push(jA);
-        continue;
-      }
-      e2.junctionAlst.push(null);
-    }
-  }
-  if (e.up1junction) {
-    const uj = structuredClone(e.up1junction);
-    uj.name = `E${firstSkipped - 2}-E${firstSkipped - 1}`;
-    otherJs.push(uj);
-    e.up1junction.data = [{ v: "..." }];
-    e2.up1junction = e.up1junction;
-  }
-  if (e.down1junction) {
-    const dj = structuredClone(e.down1junction);
-    dj.name = `E${lastSkipped + 1}-E${lastSkipped + 2}`;
-    otherJs.push(dj);
-    e.down1junction.data = [{ v: "..." }];
-    e2.down1junction = e.down1junction;
-  }
-  if (isClickMenu) {
-    const jc = structuredClone({
-      // duplicate j.info{} just in case
-      chr: j.chr,
-      start: j.start,
-      stop: j.stop,
-      strand: j.strand,
-      info: j.info
-    });
-    jc.name = `E${firstSkipped - 1}-E${lastSkipped + 1}`;
-    mayGroupSelect(
-      tk,
-      block,
-      jc,
-      otherJs,
-      `${e.gene} ${e.isoform} ${e.skippedexon.map((i) => "E" + (i + 1)).join(",")} ${e.type}`,
-      holder
-    );
-  }
-  import("./spliceevent.exonskip.diagram-VDKN5JBE.js").then((p) => {
-    const [junction2readcounttext, junctionlst] = p.default({
-      event: e2,
-      holder,
-      nophrase: true
-    });
-    setTimeout(() => {
-      for (const [k, text] of junction2readcounttext) {
-        if (text.node().getBoundingClientRect().top == 0) {
-          return;
-        }
-      }
-      fetchReadcount4junctionAbyjunctionBsamples(tk, block, j, junction2readcounttext, junctionlst);
-    }, 1e3);
-  });
-}
-function mayGroupSelect(tk, block, mainJ, otherJs, eventlabel, holder) {
-  if (!tk.massApp) return;
-  for (const j of otherJs) {
-    j.chr = mainJ.chr;
-    j.info = {
-      type: JT_canonical
-    };
-  }
-  holder.append("button").attr("data-testid", "sjpp-junction-select").text(`Select ${otherJs.length + 1} junctions`).on("click", async (event) => {
-    await addJunctionCustomTerm(
-      tk,
-      [makeJunctionTerm(mainJ), ...otherJs.map(makeJunctionTerm)],
-      event.currentTarget,
-      msgDiv,
-      eventlabel
-    );
-  });
-  const msgDiv = holder.append("div").style("font-size", ".7em");
-}
-async function addJunctionCustomTerm(tk, junctions, button, msgDiv, eventlabel) {
-  await tk.massApp.dispatch({
-    type: "add_customTerm",
-    obj: makeJunctionCustomTerm(junctions, eventlabel)
-  });
-  button.remove();
-  msgDiv.text(
-    eventlabel ? `${junctions.length} junctions can now be found through variable selection under ${eventlabel}.` : "This junction can now be found through variable selection."
-  );
-}
-function listAllEvents(lst, table, j, tk, block, isClickMenu) {
-  if (lst.length == 1) {
-    const [t1, t2] = table.addRow();
-    const e = lst[0];
-    t1.append("div").text(e.gene);
-    t1.append("div").text(e.isoform).style("font-size", ".8em");
-    if (e.type == JT_exonskip || e.type == JT_exonaltuse) {
-      showEventdiagram_skipalt_fetchreadcount(j, e, tk, t2, block, isClickMenu);
-    } else if (e.type == JT_a5ss || e.type == JT_a3ss) {
-      showEventdiagram_a53ss(j, e, tk, t2, block, isClickMenu);
-    }
-    return;
-  }
-  const map = /* @__PURE__ */ new Map();
-  for (const e of lst) {
-    const f = structuredClone(e);
-    const v = e.isoform;
-    delete f.isoform;
-    const key = JSON.stringify(f);
-    if (map.has(key)) map.get(key).push(e.isoform);
-    else map.set(key, [e.isoform]);
-  }
-  for (const [key, isolst] of map) {
-    const eo = JSON.parse(key);
-    eo.isoform = isolst[0];
-    const [t1, t2] = table.addRow();
-    t1.append("div").text(eo.gene);
-    {
-      const s = isolst.length >= 5 ? 0.7 : 0.8;
-      for (const i of isolst)
-        t1.append("div").text(i).style("font-size", s + "em");
-    }
-    if (eo.type == JT_exonskip || eo.type == JT_exonaltuse) {
-      showEventdiagram_skipalt_fetchreadcount(j, eo, tk, t2, block, isClickMenu);
-    } else if (eo.type == JT_a5ss || eo.type == JT_a3ss) {
-      showEventdiagram_a53ss(j, eo, tk, t2, block, isClickMenu);
-    }
-  }
-}
-async function fetchReadcount4junctionAbyjunctionBsamples(tk, block, jB, junction2readcounttext, jAlst) {
-  const [body, headers] = getParameter(tk, block);
-  delete body.rglst;
-  delete body.hiddenTypes;
-  body.junctionB = { chr: jB.chr, start: jB.start, stop: jB.stop, strand: jB.strand };
-  body.junctionAposlst = jAlst;
-  try {
-    const data = await dofetch3("termdb/junctions/AbyB", { body, headers });
-    if (data.error) throw new Error(data.error);
-    if (!Array.isArray(data.lst)) throw new Error(".lst[] missing");
-    for (const j of data.lst) {
-      const key = j.start + "." + j.stop + "." + j.strand;
-      if (junction2readcounttext.has(key)) {
-        junction2readcounttext.get(key).text(j.v);
-      }
-    }
-  } catch (e) {
-    console.error(e.message || e);
-  }
-}
-
-// j2/makeTk.js
-async function makeTk(tk, block) {
-  if ("yscaleUseLog" in tk) {
-    if (typeof tk.yscaleUseLog != "boolean") throw new Error("tk.yscaleUseLog not boolean");
-  } else {
-    tk.yscaleUseLog = true;
-  }
-  if (tk.hiddentypes) {
-    if (typeof tk.hiddentypes != "string") throw new Error("tk.hiddentypes not string");
-  }
-  if (tk.readcountCutoff) {
-    if (!Number.isInteger(tk.readcountCutoff) || tk.readcountCutoff < 0)
-      throw new Error("tk.readcountCutoff is not positive integer");
-  } else {
-    tk.readcountCutoff = 0;
-  }
-  {
-    const pale = "#FFFEAB";
-    const dark = "#F7F69E";
-    const id1 = Math.random().toString();
-    const id2 = Math.random().toString();
-    const id3 = Math.random().toString();
-    const defs = tk.gleft.append("defs");
-    const left = defs.append("linearGradient").attr("id", id1);
-    left.append("stop").attr("offset", 0).attr("stop-color", dark);
-    left.append("stop").attr("offset", 1).attr("stop-color", "white");
-    const mid = defs.append("linearGradient").attr("id", id2);
-    mid.append("stop").attr("offset", 0).attr("stop-color", pale);
-    mid.append("stop").attr("offset", 0.5).attr("stop-color", "white");
-    mid.append("stop").attr("offset", 1).attr("stop-color", pale);
-    const right = defs.append("linearGradient").attr("id", id3);
-    right.append("stop").attr("offset", 0).attr("stop-color", "white");
-    right.append("stop").attr("offset", 1).attr("stop-color", dark);
-    tk.gradient4spanBackground = {
-      left: { id: id1, gradient: left },
-      mid: { id: id2, gradient: mid },
-      right: { id: id3, gradient: right }
-    };
-  }
-  tk.leftlabels = {
-    // all labels are rendered here, except track label
-    g: tk.gleft.append("g").attr("transform", "translate(0,17)"),
-    doms: {},
-    // keys: label name, value: label dom
-    // to avoid having to delete all labels upon tk rendering
-    laby: 0,
-    // cumulative height, 0 for no labels
-    xoff: 0,
-    maxwidth: 0
-    // set default 0 in case track runs into err, can still render tk
-  };
-  tk.leftlabels.doms.jug = makelabel(tk, block, 0);
-  {
-    const g = tk.glider.append("g");
-    tk.sections = {
-      // sections from top to bottom.
-      jug: {
-        height: 0,
-        // total height of the jug section
-        g: g.append("g"),
-        axis: g.append("g")
-      }
-    };
-  }
-  setH(tk, "axisheight", 200);
-  setH(tk, "legheight", 50);
-  setH(tk, "neckheight", 50);
-  tk._finish = loadTk_finish_closure(tk, block);
-  tk.hovertip = new Menu();
-  tk.itemtip = new Menu();
-  tk.menutip = new Menu({ padding: "" });
-  tk.load = _load(tk, block);
-  await initTermdb(tk, block);
-  if (tk.filter) await Promise.all(rehydrateFilter(tk.filter, tk.vocabApi));
-  tk.tklabel.text(tk.dslabel || tk.name);
-  tk.clear = () => {
-    tk.sections.jug.g.selectAll("*").remove();
-  };
-  tk.config_handle = block.maketkconfighandle(tk).on("click", () => {
-    configPanel(tk, block);
-  });
-  initLegend(tk, block);
-}
-function setH(tk, prop, v) {
-  const customv = tk[prop];
-  if (customv != void 0) {
-    if (!Number.isFinite(customv) || customv <= 0) throw new Error("invalid tk." + prop);
-    tk.sections.jug[prop] = customv;
-    delete tk[prop];
-    return;
-  }
-  tk.sections.jug[prop] = v;
-}
-function loadTk_finish_closure(tk, block) {
-  return (data) => {
-    tk.legend?.headTd.text(tk.dslabel + (tk.filter ? " - " + getFilterName(tk.filter) : ""));
-    if (data) {
-      if (data.error) {
-        tk.sections.jug.height = 40;
-      } else {
-        if (data.junctions?.length == 0) {
-          tk.sections.jug.g.selectAll("*").remove();
-          tk.sections.jug.axis.selectAll("*").remove();
-          tk.sections.jug.g.transition().attr("transform", "translate(0,0)");
-          tk.sections.jug.g.append("text").text("No splice junctions").attr("y", 25).attr("x", block.width / 2).attr("text-anchor", "middle").attr("dominant-baseline", "center");
-          tk.sections.jug.height = 40;
-        }
-        if (data.alert) {
-          console.log("TODO print this alert in tk", data.alert);
-        }
-      }
-    }
-    tk.height_main = tk.sections.jug.height + tk.toppad + tk.bottompad;
-    if (data) {
-      updateLegend(data, tk, block);
-    }
-    ;
-    tk.leftLabelMaxwidth = tk.leftlabels.maxwidth + tk.leftlabels.xoff, block.tkcloakoff(tk, { error: data ? data.error : null });
-    block.block_setheight();
-    block.setllabel();
-    tk.callbackOnRender?.(tk, block);
-  };
-}
-async function initTermdb(tk, block) {
-  if (!tk.dslabel) {
-    throw new Error("tk.dslabel missing");
-  }
-  if (!tk.vocabApi) {
-    const arg = {
-      vocab: {
-        genome: block.genome.name,
-        dslabel: tk.dslabel
-      }
-    };
-    const _ = await import("./vocabulary-ECJX27W2.js");
-    tk.vocabApi = _.vocabInit(arg);
-    if (!tk.vocabApi.app) {
-      tk.vocabApi.app = { opts: { genome: block.genome } };
-    }
-  }
-  if (!tk.termdbConfig) {
-    tk.termdbConfig = await tk.vocabApi.getTermdbConfig();
-  }
-  if (!tk.termdbConfig.queries?.junction) throw new Error("queries.junction missing");
-}
-function _load(tk, block) {
-  return async () => {
-    return await loadTk(tk, block);
-  };
-}
-function configPanel(tk, block) {
-  tk.tkconfigtip.clear().showunder(tk.config_handle.node());
-  const holder = tk.tkconfigtip.d;
-  {
-    const row = holder.append("div").style("margin-bottom", "15px");
-    row.append("span").html("Read count cutoff&nbsp;");
-    row.append("input").property("value", tk.readcountCutoff || 0).attr("type", "number").style("width", "50px").on("keyup", (event) => {
-      if (event.code != "Enter" && event.code != "NumpadEnter") return;
-      let v = Number(event.target.value);
-      if (!v || v < 0) {
-        v = 0;
-      }
-      if (v == 0) {
-        if (tk.readcountCutoff) {
-          tk.readcountCutoff = 0;
-          loadTk(tk, block, true);
-        } else {
-        }
-        return;
-      }
-      if (tk.readcountCutoff) {
-        if (tk.readcountCutoff == v) {
-        } else {
-          tk.readcountCutoff = v;
-          loadTk(tk, block, true);
-        }
-      } else {
-        tk.readcountCutoff = v;
-        loadTk(tk, block, true);
-      }
-    });
-    row.append("div").style("font-size", ".7em").style("color", "#858585").text("For a junction, samples with read count lower than cutoff will not be shown.");
-  }
-  {
-    const k = tk.sections.jug;
-    const row = holder.append("div").style("margin-bottom", "15px");
-    row.append("span").text("Track height");
-    row.append("button").html("&nbsp;&nbsp;+&nbsp;&nbsp;").style("margin-left", "10px").on("click", () => {
-      k.axisheight += 30;
-      k.legheight = k.axisheight / 4;
-      renderTk(null, tk, block);
-      block.block_setheight();
-    });
-    row.append("button").html("&nbsp;&nbsp;-&nbsp;&nbsp;").style("margin-left", "5px").on("click", () => {
-      if (k.axisheight <= 90) return;
-      k.axisheight -= 30;
-      k.legheight = k.axisheight / 4;
-      renderTk(null, tk, block);
-      block.block_setheight();
-    });
-  }
-  {
-    const row = holder.append("div").style("margin-bottom", "1px");
-    const id = Math.random();
-    const input = row.append("input").attr("type", "checkbox").style("margin-right", "10px").attr("id", id).on("change", () => {
-      tk.yscaleUseLog = !tk.yscaleUseLog;
-      renderTk(null, tk, block);
-    });
-    if (tk.yscaleUseLog) {
-      input.property("checked", 1);
-    }
-    row.append("label").text("Use log10 for Y scale read count").attr("for", id);
-  }
-}
-
-// j2/tk.js
-async function loadTk(tk, block) {
-  block.tkcloakon(tk);
-  block.block_setheight();
-  try {
-    if (tk.uninitialized) {
-      await makeTk(tk, block);
-      delete tk.uninitialized;
-    }
-    const data = await getTkData(tk, block);
-    renderTk(data, tk, block);
-    tk._finish(data);
-  } catch (e) {
-    if (tk.clear) tk.clear();
-    if (tk._finish) tk._finish({ error: e.message || e });
-    if (e.stack) console.log(e.stack);
-  }
-}
-function getParameter(tk, block) {
-  const par = {
-    genome: block.genome.name,
-    dslabel: tk.dslabel,
-    filter0: tk.filter0,
-    filter: tk.filter,
-    readcountCutoff: tk.readcountCutoff
-  };
-  const headers = { "Content-Type": "application/json", Accept: "application/json" };
-  rangequery_rglst(tk, block, par);
-  if (tk.legend?.type?.hiddenvalues?.size) par.hiddenTypes = [...tk.legend.type.hiddenvalues].join(",");
-  return [par, headers];
-}
-async function getTkData(tk, block) {
-  let data;
-  if (tk.custom_data) {
-    data = await dataFromCustomData(tk, block);
-  } else {
-    const [body, headers] = getParameter(tk, block);
-    data = await dofetch3("termdb/junctions", { body, headers });
-  }
-  if (data.error) throw new Error(data.error);
-  return data;
-}
-async function dataFromCustomData(tk, block) {
-  const data = [];
-  return data;
-}
-export {
-  getParameter,
-  loadTk
-};
-//# sourceMappingURL=tk-RHWJJXH2.js.map