@sjcrh/proteinpaint-client 2.220.0 → 2.222.0

package/dist/chunk-LOX5GAVG.js

@@ -1,103 +0,0 @@
-import {
-  SearchHandler,
-  fillTermWrapper,
-  table2col,
-  termsettingInit
-} from "./chunk-PEKCVKJK.js";
-
-// plots/summarizeMutationDiagnosis.ts
-async function makeChartBtnMenu(holder, chartsInstance) {
-  let dictTw;
-  {
-    const t = chartsInstance.app.vocabApi.termdbConfig.defaultTw4correlationPlot?.disease;
-    if (!t) throw "defaultTw4correlationPlot missing";
-    dictTw = structuredClone(t);
-    await fillTermWrapper(dictTw, chartsInstance.app.vocabApi);
-  }
-  const table = table2col({
-    holder: holder.append("div"),
-    margin: "0px 10px 10px 10px",
-    cellPadding: "10px"
-  });
-  {
-    const [td1, td2] = table.addRow();
-    td1.text("Mutation Variable");
-    const searchDiv = td2.append("div");
-    const geneSearchInst = new SearchHandler();
-    geneSearchInst.init({
-      holder: searchDiv,
-      app: chartsInstance.app,
-      // required to supply "opts.app.vocabApi" for the search ui
-      genomeObj: chartsInstance.app.opts.genome,
-      msg: "Hit ENTER to launch plot.",
-      /* the geneTw below is used as it comes, so a grouping the user built for this gene
-      elsewhere can be offered here, see keepsQ in client/termdb/TermTypeSearch.ts */
-      keepsQ: true,
-      callback: async (geneTw) => {
-        await fillTermWrapper(geneTw, chartsInstance.app.vocabApi);
-        launchPlot({
-          tw1: dictTw,
-          tw2: geneTw,
-          chartsInstance,
-          holder
-        });
-      }
-    });
-    searchDiv.style("padding", "0px 0px 5px 0px");
-  }
-  {
-    const [td1, td2] = table.addRow();
-    td1.text("Compare Mutations Against");
-    const pillDiv = td2.append("div"), waitDiv = td2.append("div").style("font-size", ".7em").text("LOADING ...");
-    const pill = await termsettingInit({
-      menuOptions: "{edit,replace}",
-      /** presumably this usecase let it restrict to dictionary term ui, and hide genomic queries
-      target="filter" works for gdc since in gdc ds it is overriding filter to dict
-      but is not a general fix for non-gdc ds, which Replace menu will launch genomic+dict options
-      maybe this is okay for non-gdc ds as the default dictTw is meaningful
-      */
-      usecase: { target: "filter" },
-      vocabApi: chartsInstance.app.vocabApi,
-      holder: pillDiv,
-      callback: async (tw) => {
-        waitDiv.text("LOADING ...");
-        try {
-          await pill.main(tw);
-          dictTw = tw;
-          waitDiv.text("Click to edit/replace the variable before searching gene.");
-        } catch (e) {
-          waitDiv.text("Error: " + (e.message || e));
-        }
-      }
-    });
-    try {
-      await fillTermWrapper(dictTw, chartsInstance.app.vocabApi);
-      await pill.main(dictTw);
-      waitDiv.text("Click to edit/replace the variable before searching gene.");
-    } catch (e) {
-      waitDiv.text("Error: " + (e.message || e));
-    }
-  }
-}
-function launchPlot({ tw1, tw2, chartsInstance, holder }) {
-  const chart = {
-    config: {
-      chartType: tw1?.term?.type == "survival" ? "survival" : "summary",
-      // TODO define sandbox header with gene+term name
-      term: tw1,
-      term2: tw2
-    }
-  };
-  chartsInstance.plotCreate(chart);
-  holder.selectAll("*").remove();
-  holder.append("div").style("margin", "20px").text("LOADING CHART ...");
-  setTimeout(() => {
-    holder.style("display", "none");
-  }, 1e3);
-}
-
-export {
-  makeChartBtnMenu,
-  launchPlot
-};
-//# sourceMappingURL=chunk-LOX5GAVG.js.map

package/dist/chunk-M6OSJMVD.js

@@ -1,536 +0,0 @@
-import {
-  LINK,
-  RULE,
-  SELECT_STROKE,
-  SIZE,
-  SunburstRenderer,
-  TEXT_DARK,
-  TEXT_MUTED,
-  badge,
-  card,
-  icon,
-  pill
-} from "./chunk-7SFK32JP.js";
-import {
-  PlotBase,
-  addNewGroup,
-  capitalizeFirstLetter,
-  escapeHtml,
-  fillTermWrapper,
-  getCombinedTermFilter,
-  getGroupFilterOfConditions,
-  getNormalRoot,
-  termsettingInit
-} from "./chunk-PEKCVKJK.js";
-import {
-  dofetch3
-} from "./chunk-4TJO2DGU.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;
-    this.app = opts.app;
-    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.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 footer = body.append("div").style("margin-top", "10px").style("padding-top", "10px").style("border-top", `1px solid ${RULE}`);
-    const count = this.selectedCount();
-    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);
-    }
-  }
-  /** 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-M6OSJMVD.js.map