@sjcrh/proteinpaint-client 2.220.0 → 2.222.0

package/dist/chunk-R55JRVX7.js

@@ -0,0 +1,652 @@
+import {
+  LINK,
+  RULE,
+  SELECT_STROKE,
+  SIZE,
+  SunburstRenderer,
+  TEXT_DARK,
+  TEXT_MUTED,
+  badge,
+  card,
+  icon,
+  pill
+} from "./chunk-7SFK32JP.js";
+import {
+  PlotBase,
+  addNewGroup,
+  availabilitySections,
+  capitalizeFirstLetter,
+  escapeHtml,
+  fetchDataAvailability,
+  fillTermWrapper,
+  filterJoin,
+  getActiveCohortStr,
+  getCombinedTermFilter,
+  getGroupFilterOfConditions,
+  getNormalRoot,
+  termsettingInit
+} from "./chunk-4ASBDE27.js";
+import {
+  dofetch3
+} from "./chunk-4TJO2DGU.js";
+import {
+  TermTypes
+} from "./chunk-WJLRU5OF.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-HBNB5TRH.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+
+// plots/sunburst/sunburst.data.ts
+function buildTermTree(res, twLst, rootName, colors) {
+  const convert = (n, ring, parentPath) => {
+    const tw = twLst[ring];
+    const category = res.rings[ring].categories[n.key] || { label: n.key };
+    const path = [...parentPath, [tw.$id, n.key]];
+    const children = (n.children || []).map((c) => convert(c, ring + 1, path));
+    const node = {
+      name: category.label,
+      level: tw.term.name,
+      // d3 adds the children to a node's own value, so it holds only the samples that end here
+      value: n.count - children.reduce((s, c) => s + c.count, 0),
+      count: n.count,
+      id: JSON.stringify(path),
+      ring,
+      key: n.key,
+      category
+    };
+    const color = ring == 0 && colors?.[n.key] || category.color;
+    if (color) node.color = color;
+    if (children.length) node.children = children;
+    return node;
+  };
+  return { name: rootName, value: 0, count: res.total, children: res.nodes.map((n) => convert(n, 0, [])) };
+}
+function categoryFilterItem(tw, category) {
+  if (category.filter) return structuredClone(category.filter);
+  if (!category.tvs) throw `no filter for category '${category.label}' of ${tw.term.name}`;
+  return { type: "tvs", tvs: { term: tw.term, ...structuredClone(category.tvs) } };
+}
+function wedgeFilter(path, twLst) {
+  const lst = path.map((n) => categoryFilterItem(twLst[n.ring], n.category));
+  return { type: "tvslst", in: true, join: lst.length > 1 ? "and" : "", lst };
+}
+function selectionFilter(paths, twLst) {
+  if (!paths.length) throw "no wedge selected";
+  if (paths.length == 1) return wedgeFilter(paths[0], twLst);
+  return { type: "tvslst", in: true, join: "or", lst: paths.map((p) => wedgeFilter(p, twLst)) };
+}
+function selectionName(paths, maxLen = 60) {
+  const names = paths.length == 1 ? paths[0].map((n) => n.name).join(" \u203A ") : paths.map((p) => p[p.length - 1].name).join(" or ");
+  return names.length > maxLen ? names.slice(0, maxLen - 1) + "\u2026" : names;
+}
+function allowedSampleTypes(otherTwLst, sampleTypes) {
+  if (!sampleTypes || Object.keys(sampleTypes).length < 2) return;
+  const parent = (t) => {
+    const p = sampleTypes[t]?.parent_id;
+    return p === null || p === void 0 ? void 0 : String(p);
+  };
+  const ancestors = (t) => {
+    const lst = [];
+    for (let p = parent(t); p !== void 0 && !lst.includes(p); p = parent(p)) lst.push(p);
+    return lst;
+  };
+  const types = otherTwLst.map((tw) => tw.term?.sample_type).filter((t) => t !== null && t !== void 0 && sampleTypes[t]).map(String);
+  const below = types.filter((t) => parent(t) !== void 0);
+  if (!below.length) return;
+  const deepest = below.reduce((a, b) => ancestors(b).length > ancestors(a).length ? b : a);
+  const descendants = Object.keys(sampleTypes).filter((t) => ancestors(t).includes(deepest));
+  return [...ancestors(deepest), deepest, ...descendants];
+}
+
+// plots/sunburst/SunburstChart.ts
+var STAT_SAMPLES = "Samples";
+var STAT_SELECTED = "Selected samples";
+var RING_STEP = 6;
+var RING_LINE = "#cbd5e1";
+var SunburstChart = class {
+  constructor(opts) {
+    this.twLst = [];
+    /** selected wedges by node id, in selection order */
+    this.selected = /* @__PURE__ */ new Map();
+    /** note shown in the selection card after a group is created */
+    this.createdNote = "";
+    /** the counted unit, from the server */
+    this.unit = { one: "sample", many: "samples" };
+    /** number of the latest update(), so that the response of an earlier one that arrives later is dropped */
+    this.updateId = 0;
+    /** whether the available data of the selection is shown; a change of the selection hides it */
+    this.dataShown = false;
+    /** number of the latest renderData(), so that the response of an earlier one is dropped */
+    this.dataId = 0;
+    this.app = opts.app;
+    this.beforeLaunch = opts.beforeLaunch;
+    const holder = opts.holder;
+    const errdiv = holder.append("div").attr("class", "sja_errorbar").style("display", "none");
+    const loadingDiv = holder.append("div").style("display", "none").style("padding", "24px").text("Loading ...");
+    const noteDiv = holder.append("div").style("font-size", ".85em").style("color", TEXT_MUTED).style("margin-bottom", "6px");
+    const chartHolder = holder.append("div").attr("data-testid", "sjpp-sunburst-chart");
+    this.renderer = new SunburstRenderer({
+      holder: chartHolder,
+      unit: this.unit,
+      rootName: "All samples",
+      statLabels: [STAT_SAMPLES, STAT_SELECTED],
+      pathCard: false,
+      gap: opts.gap,
+      hooks: {
+        onClick: (d, event) => this.onWedgeClick(d, event),
+        isSelected: (d) => this.selected.has(d.data.id),
+        cursor: (d) => d.children ? "zoom-in" : "pointer",
+        tooltip: (d, box) => this.tooltip(d, box),
+        onFocus: () => {
+          this.renderStats();
+          this.renderSidebar();
+          this.renderSelectFocus();
+          this.markShownRings();
+        }
+      }
+    });
+    const rings = card(this.renderer.dom.left, "Rings");
+    rings.body.attr("data-testid", "sjpp-sunburst-rings");
+    const selectFocus = this.renderer.addControl().attr("data-testid", "sjpp-sunburst-select-focus").on("click", () => {
+      const f = this.renderer.focus;
+      if (f?.depth && !this.selectedAncestor(f)) this.toggle(f);
+    });
+    this.dom = {
+      errdiv,
+      loadingDiv,
+      noteDiv,
+      rings,
+      sel: card(this.renderer.dom.right, "Selected wedges"),
+      selectFocus
+    };
+  }
+  /** fetch and draw the counts of the rings; with no rings, an empty chart and `emptyNote`. Resolves true
+   *  when drawn, false when the request failed (the error is shown), and undefined when a later update
+   *  replaced this one, which then has its own outcome */
+  async update(arg, emptyNote = "") {
+    const id = ++this.updateId;
+    this.twLst = arg.twLst;
+    this.groupFilter = arg.groupFilter;
+    this.dom.errdiv.style("display", "none");
+    this.dom.noteDiv.text("");
+    if (!this.twLst.length) {
+      this.dom.loadingDiv.style("display", "none");
+      this.selected.clear();
+      this.renderer.setTree({ name: this.renderer.opts.rootName, children: [] });
+      this.dom.noteDiv.text(emptyNote);
+      return true;
+    }
+    try {
+      this.dom.loadingDiv.style("display", "");
+      const res = await fetchSunburst({
+        genome: arg.genome,
+        dslabel: arg.dslabel,
+        twLst: this.twLst,
+        filter: getNormalRoot(arg.termfilter?.filter),
+        filter0: arg.termfilter?.filter0
+      });
+      if (id != this.updateId) return;
+      this.dom.loadingDiv.style("display", "none");
+      this.render(res, arg.colors);
+      return true;
+    } catch (e) {
+      if (id != this.updateId) return;
+      this.dom.loadingDiv.style("display", "none");
+      this.dom.errdiv.style("display", "").text(e?.message || String(e));
+      if (e instanceof Error) console.error(e);
+      return false;
+    }
+  }
+  render(res, colors) {
+    this.setUnit(res.unit || { one: "sample", many: "samples" });
+    if (res.noFirstRingValue) {
+      const n = res.noFirstRingValue;
+      this.dom.noteDiv.text(
+        `${n.toLocaleString()} ${n == 1 ? this.unit.one : this.unit.many} with ${noValue(this.twLst[0])} ${n == 1 ? "is" : "are"} not shown.`
+      );
+    }
+    const focusId = this.renderer.focus?.data.id;
+    const selectedIds = [...this.selected.keys()];
+    this.renderer.setTree(buildTermTree(res, this.twLst, this.renderer.opts.rootName, colors));
+    const byId = new Map(this.renderer.root.descendants().map((d) => [d.data.id, d]));
+    this.selected = new Map(selectedIds.filter((id) => byId.has(id)).map((id) => [id, byId.get(id)]));
+    this.renderer.refresh();
+    const focus = focusId && byId.get(focusId);
+    if (focus?.children) this.renderer.zoomTo(focus);
+    else this.renderSidebar();
+  }
+  /** wording of the counted unit: centre, stat box titles, tooltip and the create-group action */
+  setUnit(unit) {
+    this.unit = unit;
+    this.renderer.opts.unit = unit;
+    this.renderer.opts.rootName = `All ${unit.many}`;
+    this.renderer.setStatTitle(STAT_SAMPLES, capitalizeFirstLetter(unit.many));
+    this.renderer.setStatTitle(STAT_SELECTED, `Selected ${unit.many}`);
+  }
+  /** SELECT above the chart, for the wedge at the centre (which cannot be clicked) */
+  renderSelectFocus() {
+    const f = this.renderer.focus;
+    const el = this.dom.selectFocus;
+    if (!f?.depth) {
+      el.style("display", "none");
+      return;
+    }
+    const anc = this.selectedAncestor(f);
+    const on = this.selected.has(f.data.id);
+    el.style("display", "").style("opacity", anc ? 0.35 : 1).style("cursor", anc ? "default" : "pointer").style("color", on ? SELECT_STROKE : TEXT_MUTED).attr("title", anc ? `Included in the selected ${anc.data.name}` : null).html(
+      on ? `${icon('<polyline points="5 12 10 17 19 7"/>')}SELECTED \xB7 ${escapeHtml(f.data.name.toUpperCase())}` : `${icon('<circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/>')}SELECT ${escapeHtml(
+        f.data.name.toUpperCase()
+      )}`
+    );
+  }
+  /************ rings box ************/
+  /** a line of the Rings box, indented by its ring, with an elbow from the line above */
+  ringRow(level) {
+    const row = this.dom.rings.body.append("div").style("position", "relative").style("margin", "2px 0").style("margin-left", `${level * RING_STEP}px`);
+    if (level) {
+      row.append("div").style("position", "absolute").style("left", `${-RING_STEP + 4}px`).style("top", "-6px").style("width", `${RING_STEP - 6}px`).style("height", "18px").style("border-left", `1px solid ${RING_LINE}`).style("border-bottom", `1px solid ${RING_LINE}`).style("border-bottom-left-radius", "4px");
+    }
+    return row;
+  }
+  /** the line of ring i: its number, which is marked while the ring is in the chart (markShownRings),
+   *  then a slot for the caller's term pill or name */
+  ringLine(i) {
+    const row = this.ringRow(i).attr("class", "sjpp-sunburst-ring").style("display", "flex").style("align-items", "center").style("gap", "4px");
+    row.append("span").attr("class", "sjpp-sunburst-ringnum").style("font-size", ".8em").style("width", "14px").style("flex", "0 0 auto").style("padding-left", "4px").style("border-left", "3px solid transparent").style("border-radius", "2px").text(i + 1);
+    return row;
+  }
+  /** mark the two rings around the current centre: a bar beside the ring number, which is bold */
+  markShownRings() {
+    const first = this.renderer.focus?.depth || 0;
+    const shown = (i) => i == first || i == first + 1;
+    this.dom.rings.body.selectAll(".sjpp-sunburst-ring").attr("title", (_, i) => shown(i) ? "Shown in the chart" : null).select(".sjpp-sunburst-ringnum").style("border-left-color", (_, i) => shown(i) ? LINK : "transparent").style("color", (_, i) => shown(i) ? TEXT_DARK : TEXT_MUTED).style("font-weight", (_, i) => shown(i) ? "bold" : "normal");
+  }
+  /************ selection ************/
+  /** the selected ancestor that already contains a wedge, if any */
+  selectedAncestor(d) {
+    for (let a = d.parent; a?.depth; a = a.parent) if (this.selected.has(a.data.id)) return a;
+  }
+  toggle(d) {
+    if (!d.depth) return;
+    const id = d.data.id;
+    this.createdNote = "";
+    if (this.selected.has(id)) this.selected.delete(id);
+    else {
+      if (this.selectedAncestor(d)) return;
+      for (const [k, n] of this.selected) if (n.ancestors().includes(d)) this.selected.delete(k);
+      this.selected.set(id, d);
+    }
+    this.refreshSelection();
+  }
+  refreshSelection() {
+    this.dataShown = false;
+    this.renderer.refresh();
+    this.renderStats();
+    this.renderSidebar();
+    this.renderSelectFocus();
+  }
+  /** wedge paths from the first ring, in selection order */
+  selectedPaths() {
+    return [...this.selected.values()].map(
+      (d) => d.ancestors().reverse().slice(1).map((a) => a.data)
+    );
+  }
+  selectedCount() {
+    let n = 0;
+    for (const d of this.selected.values()) n += d.value || 0;
+    return n;
+  }
+  renderStats() {
+    const r = this.renderer;
+    r.setStats(
+      /* @__PURE__ */ new Map([
+        [STAT_SAMPLES, r.focus.value || 0],
+        [STAT_SELECTED, this.selectedCount()]
+      ])
+    );
+  }
+  /************ interaction ************/
+  onWedgeClick(d, event) {
+    if (event?.shiftKey || !d.children) this.toggle(d);
+    else this.renderer.zoomTo(d);
+  }
+  tooltip(d, box) {
+    const line = (text, color = "#6b7280") => box.append("div").style("color", color).text(text);
+    line(d.data.level);
+    const total = this.renderer.root.value || 0;
+    const pct = total ? ` (${(100 * (d.value || 0) / total).toFixed(1)}%)` : "";
+    const s = box.append("div").style("color", "#374151");
+    s.append("span").text(`${capitalizeFirstLetter(this.unit.many)}: `);
+    s.append("b").text((d.value || 0).toLocaleString());
+    s.append("span").text(pct);
+    const ended = d.data.value || 0;
+    const next = this.twLst[d.data.ring + 1];
+    if (d.children && ended && next) line(`${ended.toLocaleString()} with ${noValue(next)}`);
+    const note = (text, color) => box.append("div").style("margin-top", "4px").style("color", color).text(text);
+    const anc = this.selectedAncestor(d);
+    if (anc) note(`Included in the selected ${anc.data.name}`, TEXT_MUTED);
+    else if (this.selected.has(d.data.id))
+      note(d.children ? "click to zoom in \xB7 shift-click to deselect" : "click to deselect", LINK);
+    else note(d.children ? "click to zoom in \xB7 shift-click to select" : "click to select", LINK);
+  }
+  /** the selected-wedges card: one line per wedge with its path and count, and the create-group
+   *  action as the footer */
+  renderSidebar() {
+    const sel = this.dom.sel;
+    const { title, headRight, body } = sel;
+    headRight.selectAll("*").remove();
+    body.selectAll("*").remove();
+    headRight.style("margin-bottom", "8px");
+    const n = this.selected.size;
+    title.text(n ? "Selected wedges" : "No wedges selected");
+    if (n) {
+      pill(headRight).text(n);
+      headRight.append("span").style("font-size", "11px").style("color", LINK).style("cursor", "pointer").text("Clear").on("click", () => {
+        this.selected.clear();
+        this.refreshSelection();
+      });
+    }
+    const list = body.append("div").style("max-height", `${SIZE - 200}px`).style("overflow-y", "auto");
+    if (!n) {
+      list.append("div").style("font-size", "0.85em").style("color", TEXT_MUTED).style("padding", "4px 0").text("Shift-click a wedge, click an outermost one, or zoom into one and click SELECT above the chart.");
+    }
+    for (const [id, d] of this.selected) {
+      const path = d.ancestors().reverse().slice(1).map((a) => a.data.name);
+      const row = list.append("div").style("display", "flex").style("align-items", "center").style("gap", "8px").style("padding", "3px 6px").style("margin", "2px 0").style("border-radius", "6px").on("mouseenter", (event) => {
+        select_default(event.currentTarget).style("background", "#f3f4f6").select(".sjpp-sunburst-remove").style("opacity", 1);
+      }).on("mouseleave", (event) => {
+        select_default(event.currentTarget).style("background", "transparent").select(".sjpp-sunburst-remove").style("opacity", 0);
+      });
+      badge(row, d.data.name, this.renderer.color(d), 24);
+      const text = row.append("div").style("flex", "1 1 auto").style("min-width", "0").style("line-height", "1.2");
+      text.append("div").style("font-size", "0.9em").style("color", TEXT_DARK).style("overflow", "hidden").style("text-overflow", "ellipsis").style("white-space", "nowrap").attr("title", path.join(" \u203A ")).text(path.join(" \u203A "));
+      text.append("div").style("font-size", "0.7em").style("color", "#6b7280").text(this.renderer.unitText(d.value || 0));
+      row.append("span").attr("class", "sjpp-sunburst-remove").style("opacity", 0).style("cursor", "pointer").style("color", "#9ca3af").style("font-size", "0.85em").attr("title", "Remove").text("\u2715").on("click", () => {
+        this.selected.delete(id);
+        this.refreshSelection();
+      });
+    }
+    const count = this.selectedCount();
+    if (n) void this.renderData(body, count);
+    const footer = body.append("div").style("margin-top", "10px").style("padding-top", "10px").style("border-top", `1px solid ${RULE}`);
+    pill(footer, { button: true }).attr("data-testid", "sjpp-sunburst-create-group").property("disabled", n === 0).style("opacity", n ? 1 : 0.3).style("cursor", n ? "pointer" : "default").text(n ? `Create group of ${this.renderer.unitText(count)}` : "Create group").on("click", () => this.createGroup());
+    if (this.createdNote) {
+      footer.append("div").style("font-size", "0.8em").style("color", TEXT_MUTED).style("margin-top", "6px").text(this.createdNote);
+    }
+  }
+  /** "Show available data", then how many of the selected samples have each kind of data of the dataset;
+   *  a kind with a plot of the selected samples opens it */
+  async renderData(body, count) {
+    const div = body.append("div").attr("data-testid", "sjpp-sunburst-group-data").style("margin-top", "10px").style("padding-top", "10px").style("border-top", `1px solid ${RULE}`);
+    if (!this.dataShown) {
+      pill(div, { button: true }).attr("data-testid", "sjpp-sunburst-show-data").style("cursor", "pointer").text("Show available data").on("click", () => {
+        this.dataShown = true;
+        this.renderSidebar();
+      });
+      return;
+    }
+    const id = ++this.dataId;
+    const head = div.append("div").style("display", "flex").style("justify-content", "space-between").style("align-items", "center").style("gap", "8px").style("margin-bottom", "6px");
+    head.append("span").attr("data-testid", "sjpp-sunburst-data-title").style("white-space", "nowrap").style("font-size", "0.95em").style("font-weight", 600).style("color", TEXT_DARK).text(capitalizeFirstLetter(this.renderer.unitText(count)));
+    head.append("button").attr("data-testid", "sjpp-sunburst-hide-data").style("flex", "0 0 auto").style("font-size", "11px").style("padding", "1px 10px").style("border", `1px solid ${RULE}`).style("border-radius", "10px").style("background", "white").style("color", LINK).style("cursor", "pointer").text("Hide \u25B4").on("click", () => this.hideData());
+    const list = div.append("div").text("Loading ...").style("font-size", "0.85em").style("color", TEXT_MUTED);
+    try {
+      const appState = this.app.getState();
+      const termfilter = appState.termfilter || {};
+      const filter = filterJoin([this.plotFilter(), termfilter.filter].filter((f) => f?.lst?.length));
+      const groups = [{ name: "selection", filter }];
+      const res = await fetchDataAvailability(
+        this.app.vocabApi,
+        groups,
+        termfilter.filter0,
+        getActiveCohortStr(appState)
+      );
+      if (id != this.dataId) return;
+      list.text("").style("color", null);
+      const sections = availabilitySections(res, ["rnaseqGeneCount"]);
+      if (!sections.length) {
+        list.style("color", TEXT_MUTED).text(`No data for these ${this.unit.many}`);
+        return;
+      }
+      for (const section of sections) {
+        if (section.title) {
+          list.append("div").attr("data-testid", `sjpp-sunburst-section-${section.key}`).style("margin", "8px 0 2px 0").style("padding", "0 6px").style("font-size", "10px").style("font-weight", 600).style("letter-spacing", ".06em").style("text-transform", "uppercase").style("color", TEXT_MUTED).text(section.title);
+        }
+        for (const row of section.rows) {
+          const launch = this.dataPlot(row);
+          this.dataRow(list, row, !!section.title, launch);
+        }
+      }
+    } catch (e) {
+      if (id != this.dataId) return;
+      list.attr("class", "sja_errorbar").text(e?.message || String(e));
+    }
+  }
+  hideData() {
+    this.dataShown = false;
+    this.dataId++;
+    this.renderSidebar();
+  }
+  /** a line of the available data: the kind of data and its count, which opens `launch`, a plot_create config,
+   *  when given; a row of a section is indented under the section's title */
+  dataRow(list, row, inSection, launch) {
+    const n = row.counts[0] || 0;
+    const div = list.append("div").attr("data-testid", `sjpp-sunburst-data-${row.kind == "data" ? "" : row.kind + "-"}${row.key}`).style("display", "flex").style("justify-content", "space-between").style("gap", "8px").style("padding", `3px 6px 3px ${inSection ? 16 : 6}px`).style("margin", "1px 0").style("border-radius", "6px").style("color", TEXT_DARK);
+    div.append("span").text(row.label);
+    div.append("span").style("white-space", "nowrap").style("color", launch ? LINK : null).text(`${n.toLocaleString()}${row.unit ? " " + row.unit : ""}${launch ? " \u203A" : ""}`);
+    if (!launch) return;
+    div.attr("role", "button").attr("tabindex", 0).attr("title", `Open the ${row.label} of these ${this.unit.many}`).style("cursor", "pointer").on("mouseenter", (event) => select_default(event.currentTarget).style("background", "#f3f4f6")).on("mouseleave", (event) => select_default(event.currentTarget).style("background", "transparent")).on("click", () => this.launchPlot(launch)).on("keydown", (event) => {
+      if (event.key == "Enter" || event.key == " ") {
+        event.preventDefault();
+        this.launchPlot(launch);
+      }
+    });
+  }
+  /** the filter of the selected samples: the selection with the plot's own filter. A plot that is given it as
+   *  its own filter joins the global filter to it */
+  plotFilter() {
+    const filters = [selectionFilter(this.selectedPaths(), this.twLst), this.groupFilter];
+    return filterJoin(filters.filter((f) => f?.lst?.length));
+  }
+  /** the plot of the selected samples for a row of the available data, as a plot_create config; undefined
+   *  when the row has no plot of its own */
+  dataPlot(row) {
+    const filter = this.plotFilter();
+    const q = this.app.vocabApi.termdbConfig?.queries || {};
+    if (row.kind == "assay")
+      return q.snvindel || q.svfusion || q.cnv ? {
+        chartType: "genomeBrowser",
+        filter,
+        /* the mutation track shown, which the genome browser hides by default when the dataset also has
+        trackLst. The query is copied as the browser's config replaces it, not merged */
+        ...q.snvindel ? { snvindel: { ...structuredClone(q.snvindel), shown: true } } : {}
+      } : void 0;
+    if (row.kind == "survival") return { chartType: "survival", term: { id: row.key }, filter };
+    if (row.key == "geneExpression")
+      return { chartType: "GeneExpInput", termType: TermTypes.GENE_EXPRESSION, spawnConfig: { filter } };
+    if (row.key == "dnaMethylation") return { chartType: "dictionary", spawnConfig: { filter } };
+    if (row.key == "NIdata") return { chartType: "brainImaging", filter };
+    if (row.key == "longitudinal") return { chartType: "swimmer", filter };
+  }
+  async launchPlot(config) {
+    try {
+      await this.beforeLaunch?.();
+      await this.app.dispatch({ type: "plot_create", config });
+    } catch (e) {
+      this.dom.errdiv.style("display", "").text(e?.message || String(e));
+    }
+  }
+  /** one group of the union of the selected wedges, added to the GROUPS tab; the group also has the
+   *  plot's own filter, which the counts are of. The global filter is joined where the group is used */
+  createGroup() {
+    const paths = this.selectedPaths();
+    if (!paths.length) return;
+    try {
+      const name = selectionName(paths);
+      const groups = this.app.getState().groups || [];
+      const filter = getGroupFilterOfConditions([this.groupFilter, selectionFilter(paths, this.twLst)]);
+      addNewGroup(this.app, filter, groups, name);
+      this.selected.clear();
+      this.createdNote = `Group "${name}" added; find it in the GROUPS tab.`;
+      this.refreshSelection();
+    } catch (e) {
+      this.dom.errdiv.style("display", "").text(e?.message || String(e));
+    }
+  }
+  destroy() {
+    this.renderer?.destroy();
+  }
+};
+function noValue(tw) {
+  const values = tw.term.values || {};
+  const hidden = Object.keys(tw.q?.hiddenValues || {}).some((k) => !values[k]?.uncomputable);
+  return `no ${hidden ? "or a hidden " : ""}${tw.term.name} value`;
+}
+async function fetchSunburst(body) {
+  const res = await dofetch3("termdb/sunburst", { body });
+  if (res?.error) throw res.error;
+  if (!res?.nodes) throw "invalid response from termdb/sunburst";
+  return res;
+}
+
+// plots/sunburst/sunburst.ts
+var Sunburst = class _Sunburst extends PlotBase {
+  constructor(opts, api) {
+    super(opts, api);
+    this.twLst = [];
+    /** the rings the Rings box shows, to rebuild its pills only when they change */
+    this.ringsShown = "";
+    /** the Rings box pills and their main() argument without the filter, which follows the state */
+    this.ringPills = [];
+    this.type = _Sunburst.type;
+    if (this.opts.header)
+      this.opts.header.style("padding-left", "7px").style("color", "rgb(85, 85, 85)").html("Sunburst");
+  }
+  static {
+    this.type = "sunburst";
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) throw `No plot with id='${this.id}' found`;
+    return {
+      config,
+      // global mass filter combined with this plot's local filter
+      termfilter: getCombinedTermFilter(appState, config.filter),
+      genome: appState.vocab.genome,
+      dslabel: appState.vocab.dslabel,
+      sunburst: appState.termdbConfig?.sunburst || {}
+    };
+  }
+  async init() {
+    const holder = this.opts.holder.append("div").attr("data-testid", "sjpp-sunburst-holder").style("white-space", "normal").style("padding", "10px");
+    this.chart = new SunburstChart({ holder, app: this.app });
+    this.chart.dom.rings.box.append("style").text(".sjpp-sunburst-ringpill > div:nth-child(4) { display: none !important; }");
+  }
+  async main() {
+    const config = this.state.config;
+    this.twLst = config.twLst || [];
+    await this.renderRings();
+    await this.chart.update(
+      {
+        genome: this.state.genome,
+        dslabel: this.state.dslabel,
+        twLst: this.twLst,
+        termfilter: this.state.termfilter,
+        groupFilter: config.filter,
+        colors: this.state.sunburst.colors
+      },
+      "Add a ring in the Rings box to draw the sunburst."
+    );
+  }
+  /************ rings box ************/
+  /** one line per ring: its number and a term pill, whose menu switches, edits or removes the
+   *  term; then + Add ring. Rebuilt only when the rings change; otherwise the pills get the current
+   *  filter, which their term pickers use */
+  async renderRings() {
+    const twLst = this.twLst;
+    const filter = this.state.termfilter?.filter;
+    const sig = JSON.stringify(twLst.map((tw) => [tw.$id, tw.q]));
+    if (sig == this.ringsShown) {
+      await Promise.all(this.ringPills.map(({ pill: pill2, arg }) => pill2.main({ ...arg, filter })));
+      return;
+    }
+    this.ringsShown = sig;
+    this.ringPills = [];
+    this.chart.dom.rings.body.selectAll("*").remove();
+    const disable_terms = twLst.map((tw) => tw.term);
+    const sampleTypes = this.app.vocabApi.termdbConfig?.sampleTypes;
+    const edit = (lst) => this.app.dispatch({ type: "plot_edit", id: this.id, config: { twLst: lst } });
+    for (const [i, tw] of twLst.entries()) {
+      const pillDiv = this.chart.ringLine(i).append("div").attr("class", "sjpp-sunburst-ringpill").style("min-width", "0").style("overflow", "hidden").style("white-space", "nowrap").style("font-size", ".9em").style("text-overflow", "ellipsis").attr("title", tw.term.name);
+      const others = twLst.filter((_, j) => j != i);
+      const p = await this.ringPill(
+        pillDiv,
+        (newTw) => {
+          const lst = twLst.slice();
+          if (newTw?.term) lst[i] = newTw;
+          else lst.splice(i, 1);
+          edit(lst);
+        },
+        allowedSampleTypes(others, sampleTypes)
+      );
+      this.ringPills.push({ pill: p, arg: { term: tw.term, q: tw.q, $id: tw.$id, disable_terms } });
+    }
+    const addDiv = this.chart.ringRow(twLst.length).style("margin-top", "6px").append("div").style("margin-left", "21px");
+    const add = await this.ringPill(
+      addDiv,
+      (newTw) => {
+        if (newTw?.term) edit([...twLst, newTw]);
+      },
+      allowedSampleTypes(twLst, sampleTypes),
+      "+ Add ring"
+    );
+    this.ringPills.push({ pill: add, arg: { term: null, q: null, disable_terms } });
+    await Promise.all(this.ringPills.map(({ pill: pill2, arg }) => pill2.main({ ...arg, filter })));
+    this.chart.markShownRings();
+  }
+  /** a ring term pill; `sampleTypes` limits the terms it offers (see allowedSampleTypes) */
+  async ringPill(holder, callback, sampleTypes, placeholder) {
+    return await termsettingInit({
+      holder,
+      vocabApi: this.app.vocabApi,
+      usecase: { target: "sunburst", ...sampleTypes ? { sampleTypes } : {} },
+      // the full term name; a name too long for the box is clipped, with the name as its tooltip
+      abbrCutoff: 1e3,
+      menuOptions: "*",
+      numericEditMenuVersion: ["discrete"],
+      defaultQ4fillTW: { numeric: { mode: "discrete" } },
+      ...placeholder ? { placeholder } : {},
+      debug: this.app.opts.debug,
+      callback
+    });
+  }
+  destroy() {
+    this.chart?.destroy();
+  }
+};
+async function getPlotConfig(opts, app) {
+  const config = {
+    chartType: "sunburst",
+    settings: {}
+  };
+  copyMerge(config, opts);
+  if (!config.twLst) config.twLst = structuredClone(app.vocabApi.termdbConfig?.sunburst?.twLst || []);
+  config.twLst = await Promise.all(
+    config.twLst.map((tw) => fillTermWrapper(tw, app.vocabApi, { numeric: { mode: "discrete" } }))
+  );
+  return config;
+}
+var sunburstInit = getCompInit(Sunburst);
+var componentInit = sunburstInit;
+
+export {
+  SunburstChart,
+  getPlotConfig,
+  sunburstInit,
+  componentInit
+};
+//# sourceMappingURL=chunk-R55JRVX7.js.map