@sjcrh/proteinpaint-client 2.200.0 → 2.201.0

package/dist/tk-RHWJJXH2.js

@@ -0,0 +1,1127 @@
+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