@sjcrh/proteinpaint-client 2.220.0 → 2.221.0

package/dist/swimmer-Z6FUH4CD.js

@@ -1,993 +0,0 @@
-import {
-  getTermValue
-} from "./chunk-67MD4UES.js";
-import {
-  DataPointInteractions,
-  DownloadMenu,
-  PlotBase,
-  axisstyle,
-  controlsInit,
-  fillTermWrapper,
-  getCombinedTermFilter,
-  getT0T2defaultQ,
-  make_radios,
-  shapeSelector,
-  shapes,
-  termsettingInit
-} from "./chunk-PEKCVKJK.js";
-import "./chunk-HJ6L54YS.js";
-import "./chunk-YR6EXI2K.js";
-import {
-  Menu
-} from "./chunk-CNFTQSNE.js";
-import "./chunk-RIHO7ZD5.js";
-import "./chunk-TVJOSRCH.js";
-import "./chunk-3CIL7KH7.js";
-import "./chunk-T4XPCSLP.js";
-import {
-  dofetch3
-} from "./chunk-4TJO2DGU.js";
-import "./chunk-W5J3LTYS.js";
-import "./chunk-MHWYRNGA.js";
-import "./chunk-JHLF2ZC2.js";
-import {
-  axisBottom,
-  getColors
-} from "./chunk-WJLRU5OF.js";
-import {
-  copyMerge,
-  getCompInit
-} from "./chunk-HBNB5TRH.js";
-import "./chunk-PF4DSFDR.js";
-import {
-  linear
-} from "./chunk-4OLM3KSB.js";
-import "./chunk-6XKAOSQE.js";
-import "./chunk-TLT4YIG3.js";
-import "./chunk-5R63Q5KH.js";
-import {
-  create_default,
-  pointer_default
-} from "./chunk-I6Y4O3RR.js";
-import {
-  rgb
-} from "./chunk-Q5RDQNIT.js";
-import "./chunk-HS5PO5ZQ.js";
-
-// plots/swimmer.ts
-var noValueCategory = "No value";
-var labelGap = 14;
-var legendWidth = 190;
-var shapeBBox = /* @__PURE__ */ new Map();
-function getMarkerGeometry(shapeKey, height) {
-  const key = shapes[shapeKey] ? shapeKey : "filledCircle";
-  const shape = shapes[key];
-  const bb = shapeBBox.get(key) || { x: 0, y: 0, width: 16, height: 16 };
-  const strokePx = shape.isFilled ? Math.min(1, height * 0.1) : Math.max(1, height * 0.08);
-  const scale = Math.max(0.1, height - strokePx) / bb.height;
-  return {
-    shape,
-    strokePx,
-    scale,
-    transform: `scale(${scale}) translate(${-(bb.x + bb.width / 2)},${-(bb.y + bb.height / 2)})`,
-    halfWidth: (bb.width * scale + strokePx) / 2
-  };
-}
-function drawMarker(holder, shapeKey, cx, cy, height, color) {
-  const key = shapes[shapeKey] ? shapeKey : "filledCircle";
-  const g = holder.append("g").attr("transform", `translate(${cx},${cy})`);
-  const path = g.append("path").attr("d", shapes[key].path).attr("fill", color);
-  if (!shapeBBox.has(key)) {
-    const b = path.node().getBBox();
-    if (b.width && b.height) shapeBBox.set(key, { x: b.x, y: b.y, width: b.width, height: b.height });
-  }
-  const m = getMarkerGeometry(key, height);
-  path.attr("transform", m.transform).attr("stroke", m.shape.isFilled ? "white" : color).attr("stroke-width", m.strokePx / m.scale).attr("stroke-linejoin", "round");
-  return g;
-}
-function getMarkerIconHtml(shapeKey, color) {
-  const svg = create_default("svg").attr("width", 14).attr("height", 14).style("vertical-align", "middle");
-  drawMarker(svg, shapeKey, 7, 7, 12, color);
-  return svg.node().outerHTML;
-}
-var Swimmer = class _Swimmer extends PlotBase {
-  static {
-    this.type = "swimmer";
-  }
-  constructor(opts, api) {
-    super(opts, api);
-    this.type = _Swimmer.type;
-    this.components = { controls: {} };
-    if (this.opts.header) {
-      this.opts.header.style("padding-left", "7px").style("color", "rgb(85, 85, 85)").html("Swimmer Plot");
-    }
-  }
-  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 (config.filter, set by the plot wrapper's filter UI)
-      termfilter: getCombinedTermFilter(appState, config.filter),
-      genome: appState.vocab.genome,
-      dslabel: appState.vocab.dslabel,
-      swimmer: appState.termdbConfig?.queries?.swimmer || {}
-    };
-  }
-  async init() {
-    const holder = this.opts.holder.append("div").attr("data-testid", "sjpp-swimmer-holder");
-    const controlsHolder = holder.append("div").style("display", "inline-block").style("vertical-align", "top");
-    const rightDiv = holder.append("div").style("display", "inline-block").style("vertical-align", "top");
-    this.dom = {
-      holder,
-      controlsHolder,
-      errdiv: rightDiv.append("div").attr("class", "sja_errorbar").style("display", "none"),
-      loadingDiv: rightDiv.append("div").style("display", "none").style("padding", "24px").text("Loading ..."),
-      plotDiv: rightDiv.append("div").attr("data-testid", "sjpp-swimmer-plot").style("padding", "10px"),
-      noteDiv: rightDiv.append("div").style("padding", "0 10px 10px 10px").style("font-size", ".9em").style("opacity", 0.7),
-      tip: new Menu({ padding: "5px" })
-    };
-    this.renderer = new SwimmerRenderer(
-      this.app,
-      this.dom,
-      (settings) => this.app.dispatch({ type: "plot_edit", id: this.id, config: { settings: { swimmer: settings } } }),
-      (pointTerm) => this.app.dispatch({ type: "plot_edit", id: this.id, config: { pointTerm } })
-    );
-    const laneName = this.renderer.laneType?.name || "sample";
-    this.components = {
-      controls: await controlsInit({
-        app: this.app,
-        id: this.id,
-        holder: controlsHolder,
-        inputs: [
-          {
-            type: "term",
-            configKey: "term0",
-            chartType: "swimmer",
-            usecase: { target: "swimmer", detail: "term0" },
-            label: "Divide by",
-            title: "Split lanes into one panel per category",
-            vocabApi: this.app.vocabApi,
-            numericEditMenuVersion: ["discrete"],
-            defaultQ4fillTW: getT0T2defaultQ()
-          },
-          ...this.getPointTermInputs(),
-          {
-            label: "Sort lanes by",
-            type: "radio",
-            chartType: "swimmer",
-            settingsKey: "sortBy",
-            options: [
-              { label: "Lane length", value: "end" },
-              { label: `${laneName[0].toUpperCase()}${laneName.slice(1)} name`, value: "sample" }
-            ]
-          },
-          {
-            label: `Show ${laneName} names`,
-            type: "checkbox",
-            chartType: "swimmer",
-            settingsKey: "showSampleNames",
-            boxLabel: "Yes"
-          },
-          {
-            label: "Row height",
-            type: "number",
-            chartType: "swimmer",
-            settingsKey: "rowHeight",
-            min: 6,
-            max: 50
-          },
-          {
-            label: "Plot width",
-            type: "number",
-            chartType: "swimmer",
-            settingsKey: "plotWidth",
-            min: 200,
-            max: 3e3
-          }
-        ]
-      })
-    };
-    this.components.controls.on("downloadClick.swimmer", (event) => {
-      const svg = this.renderer.dom.svg;
-      if (!svg) return;
-      new DownloadMenu([{ name: "Swimmer plot", svg }], "swimmer_plot").show(event.clientX, event.clientY, event.target);
-    });
-  }
-  /** "Mark <event> by" term input, only when the ds has points linked to samples (e.g. CSF dots). the
-  term picker lists only terms of those samples' types */
-  getPointTermInputs() {
-    const sw = this.app.vocabApi.termdbConfig?.queries?.swimmer;
-    if (!sw?.pointSampleTypes?.length) return [];
-    const events = (sw.pointSampleEvents || []).map((k) => sw.events?.[k]?.label || k);
-    const what = [...new Set(events)].join(" / ") || "linked samples";
-    return [
-      {
-        type: "term",
-        configKey: "pointTerm",
-        chartType: "swimmer",
-        usecase: { target: "swimmer", detail: "pointTerm", sampleTypes: sw.pointSampleTypes },
-        label: `Mark ${what} by`,
-        title: `Color the ${what} markers by a variable of their own samples`,
-        vocabApi: this.app.vocabApi,
-        numericEditMenuVersion: ["discrete"],
-        defaultQ4fillTW: getT0T2defaultQ()
-      }
-    ];
-  }
-  async main() {
-    try {
-      this.toggleLoadingDiv();
-      this.dom.errdiv.style("display", "none");
-      const result = await this.fetchLanes();
-      this.toggleLoadingDiv("none");
-      this.renderer.update({
-        swimmer: this.state.swimmer,
-        settings: this.state.config.settings.swimmer,
-        lanes: result.lanes,
-        divideByOrder: result.divideByOrder,
-        term0: this.state.config.term0,
-        pointTerm: this.state.config.pointTerm,
-        pointCategoryOrder: result.pointCategoryOrder,
-        timeReference: result.timeReference
-      });
-    } catch (e) {
-      this.toggleLoadingDiv("none");
-      this.printError(e);
-    }
-  }
-  destroy() {
-    this.renderer?.destroy();
-  }
-  async fetchLanes() {
-    const body = {
-      genome: this.state.genome,
-      dslabel: this.state.dslabel,
-      filter: this.state.termfilter?.filter
-    };
-    if (this.state.config.term0) body.term0 = this.state.config.term0;
-    if (this.state.config.pointTerm) body.pointTerm = this.state.config.pointTerm;
-    const timeReference = this.state.config.settings.swimmer.timeReference;
-    if (timeReference) body.timeReference = timeReference;
-    return await fetchSwimmerLanes(body);
-  }
-};
-var SwimmerRenderer = class {
-  constructor(app, dom, onSettingsChange, onPointTermChange) {
-    /** client copy of ds.queries.swimmer: timeLabel, timeReferences, categories, events, terminalEvent,
-    pointSampleTypes, pointSampleEvents */
-    this.swimmer = {};
-    this.lanes = [];
-    /** divide-by category order from the server, only with term0 */
-    this.divideByOrder = [];
-    /** point category order from the server, only with pointTerm */
-    this.pointCategoryOrder = [];
-    /** annotations of point samples (e.g. CSF) shown on hover, fetched once per sample id */
-    this.pointSampleAnno = /* @__PURE__ */ new Map();
-    /** hover and click handling of each divide-by panel, replaced on every render */
-    this.interactions = [];
-    this.app = app;
-    this.dom = dom;
-    this.onSettingsChange = onSettingsChange;
-    this.onPointTermChange = onPointTermChange;
-    const roots = Object.values(app.vocabApi?.termdbConfig?.sampleTypes || {}).filter((t) => t.parent_id == null);
-    if (roots.length == 1) this.laneType = roots[0];
-  }
-  update(d) {
-    this.swimmer = d.swimmer || {};
-    this.settings = d.settings;
-    this.lanes = d.lanes;
-    this.divideByOrder = d.divideByOrder || [];
-    this.term0 = d.term0;
-    this.pointTerm = d.pointTerm;
-    this.pointCategoryOrder = d.pointCategoryOrder || [];
-    this.timeReference = d.timeReference;
-    this.render();
-  }
-  /** whether a point is colored by the "mark by" term: a linked point of a markBy event */
-  isMarkedPoint(p) {
-    return !!this.pointTerm && p.sampleId !== void 0 && !!this.swimmer.pointSampleEvents?.includes(p.event);
-  }
-  /** with pointTerm: legend of the marked points' categories, in server order, then "No value" when some
-  marked point lacks a value. colors come from term.values when set there, else a default palette; the shape
-  is that of the point's event. user overrides apply as for the other legend sections */
-  getPointLegend(events) {
-    if (!this.pointTerm) return { byKey: /* @__PURE__ */ new Map(), entries: [] };
-    let hasNoValue = false;
-    let shape;
-    for (const lane of this.lanes) {
-      for (const p of lane.points) {
-        if (!this.isMarkedPoint(p)) continue;
-        shape ||= events.byKey.get(p.event)?.shape;
-        if (!p.category) hasNoValue = true;
-      }
-    }
-    const termColors = /* @__PURE__ */ new Map();
-    for (const [k, v] of Object.entries(this.pointTerm.term?.values || {}))
-      if (v.color) termColors.set(v.label || k, v.color);
-    const labels = [...this.pointCategoryOrder, ...hasNoValue ? [noValueCategory] : []];
-    const palette = getColors(Math.max(labels.length, 1));
-    const configured = {};
-    for (const label of labels)
-      configured[label] = {
-        label,
-        color: label == noValueCategory ? "#aaa" : termColors.get(label) || palette(label),
-        shape
-      };
-    return this.getLegend(configured, new Set(labels), this.settings.legend?.pointCategories);
-  }
-  /** lanes split by divide-by category, in server order. without term0 there is one unlabeled group.
-  a patient with several categories (a multivalue term, or samples in different categories) is in each
-  of its groups; lanes without a value are left out and counted in the note below the plot */
-  getGroups(lanes) {
-    if (!this.term0) return [{ lanes }];
-    const byLabel = new Map(this.divideByOrder.map((c) => [c, []]));
-    let noValue = 0;
-    for (const l of lanes) {
-      if (!l.lane.divideBy?.length) {
-        noValue++;
-        continue;
-      }
-      for (const c of l.lane.divideBy) {
-        if (!byLabel.has(c)) byLabel.set(c, []);
-        byLabel.get(c).push(l);
-      }
-    }
-    if (noValue) {
-      const name = this.term0.term?.name || "the divide-by variable";
-      const noun = noValue > 1 ? this.laneType?.plural_name || "samples" : this.laneType?.name || "sample";
-      this.dom.noteDiv.append("div").attr("data-testid", "sjpp-swimmer-novalue-note").text(`${noValue} ${noun} without a value for ${name} not shown`);
-    }
-    return [...byLabel].filter(([, l]) => l.length).map(([label, l]) => ({ label, lanes: l }));
-  }
-  /** lane end: the terminal event time when present, else the latest event or interval time */
-  getLaneEnd(lane) {
-    const terminal = this.swimmer.terminalEvent;
-    if (terminal) {
-      const t = lane.points.find((p) => p.event == terminal);
-      if (t) return t.time;
-    }
-    let end = 0;
-    for (const p of lane.points) end = Math.max(end, p.time);
-    for (const r of lane.ranges) end = Math.max(end, r.start, r.end ?? 0);
-    return end;
-  }
-  /** legend entries for interval categories or events: configured items first (in config order,
-  merged by label), then any key found in the data that the ds did not configure, with a default color. a
-  clipBeforeOrigin event with no drawn marker (e.g. birth in a treatment-referenced view) is left out. user
-  overrides (by label) take precedence over the ds config */
-  getLegend(configured, dataKeys, overrides = {}) {
-    const byKey = /* @__PURE__ */ new Map();
-    const entries = [];
-    const seenLabels = /* @__PURE__ */ new Set();
-    const unconfigured = [...dataKeys].filter((k) => !configured?.[k]);
-    const fallback = getColors(Math.max(unconfigured.length, 1));
-    const add = (key, item) => {
-      const label = item.label || key;
-      const o = overrides[label] || {};
-      const e = {
-        key,
-        label,
-        color: o.color || item.color || fallback(key),
-        shape: o.shape || item.shape || "filledCircle",
-        size: item.size || 1,
-        sampleTerms: item.sampleTerms,
-        hidden: !!o.hidden
-      };
-      byKey.set(key, e);
-      if (!seenLabels.has(e.label)) {
-        seenLabels.add(e.label);
-        entries.push(e);
-      }
-    };
-    for (const [key, item] of Object.entries(configured || {})) {
-      if (item.clipBeforeOrigin && !dataKeys.has(key)) continue;
-      add(key, item);
-    }
-    for (const key of unconfigured) add(key, {});
-    return { byKey, entries };
-  }
-  render() {
-    const s = this.settings;
-    const plotDiv = this.dom.plotDiv;
-    plotDiv.selectAll("*").remove();
-    this.dom.noteDiv.selectAll("*").remove();
-    delete this.dom.svg;
-    for (const i of this.interactions) i.destroy();
-    this.interactions = [];
-    const ref = this.swimmer.timeReferences?.find(
-      (r) => r.key == this.timeReference
-    );
-    this.renderTimeReferences();
-    if (!this.lanes.length) {
-      plotDiv.append("div").style("opacity", 0.6).text(`No ${this.laneType?.plural_name || "samples"} with timeline data match the current filter`);
-      return;
-    }
-    const lanes = this.lanes.map((lane) => ({ lane, end: this.getLaneEnd(lane) }));
-    if (s.sortBy == "sample") lanes.sort((a, b) => a.lane.sample.localeCompare(b.lane.sample));
-    else lanes.sort((a, b) => b.end - a.end);
-    const categoryKeys = /* @__PURE__ */ new Set();
-    const eventKeys = /* @__PURE__ */ new Set();
-    for (const { lane } of lanes) {
-      for (const r of lane.ranges) categoryKeys.add(r.category);
-      for (const p of lane.points) if (!this.isClipped(p)) eventKeys.add(p.event);
-    }
-    const categories = this.getLegend(this.swimmer.categories, categoryKeys, s.legend?.categories);
-    const events = this.getLegend(this.swimmer.events, eventKeys, s.legend?.events);
-    const pointCategories = this.getPointLegend(events);
-    const fontSize = Math.min(12, Math.max(7, s.rowHeight - 3));
-    const axisHeight = 45;
-    const topPad = 10;
-    const rightPad = 20;
-    const laneGap = Math.max(1, Math.round(s.rowHeight * 0.1));
-    const barH = Math.max(2, s.rowHeight - laneGap);
-    const segH = Math.max(1, barH * 0.6);
-    const baseH = Math.max(1, barH * 0.25);
-    const markerH = Math.max(4, barH * 0.7);
-    const svg = plotDiv.append("svg").attr("data-testid", "sjpp-swimmer-svg");
-    this.dom.svg = svg;
-    const names = lanes.map((l) => l.lane.sample);
-    const labelWidth = s.showSampleNames ? getMaxTextWidth(svg, names, fontSize) + labelGap + 6 : 10;
-    const maxEnd = Math.max(...lanes.map((l) => l.end), 1);
-    let minTime = 0;
-    for (const { lane } of lanes) {
-      for (const p of lane.points) {
-        if (!this.isClipped(p)) minTime = Math.min(minTime, p.time);
-      }
-      for (const r of lane.ranges) minTime = Math.min(minTime, r.start);
-    }
-    const x = linear().domain([minTime < 0 ? minTime - (maxEnd - minTime) * 0.01 : 0, maxEnd * 1.02]).range([0, s.plotWidth]);
-    const ticks = x.ticks(Math.max(2, Math.floor(s.plotWidth / 90)));
-    const tip = this.dom.tip;
-    const timeLabel = ref?.timeLabel || this.swimmer.timeLabel || "Time";
-    const fmt = (d) => Number.isInteger(d) ? String(d) : d.toFixed(1);
-    const groups = this.getGroups(lanes);
-    if (!groups.length) {
-      svg.remove();
-      delete this.dom.svg;
-      plotDiv.append("div").style("opacity", 0.6).text(`No ${this.laneType?.plural_name || "samples"} have a value for the divide-by variable`);
-      return;
-    }
-    const titleH = groups[0].label !== void 0 ? 24 : 0;
-    const groupGap = 16;
-    let yOffset = topPad;
-    for (const group of groups) {
-      if (group.label !== void 0) {
-        svg.append("text").attr("data-testid", "sjpp-swimmer-group-title").attr("x", labelWidth).attr("y", yOffset + 15).attr("font-size", 14).attr("font-weight", 600).attr("fill", "#333").text(`${group.label} (n=${group.lanes.length})`);
-        yOffset += titleH;
-      }
-      const plotHeight = group.lanes.length * s.rowHeight;
-      const mainG = svg.append("g").attr("transform", `translate(${labelWidth},${yOffset})`);
-      const markers = [];
-      const rows = [];
-      mainG.append("g").selectAll("line").data(ticks).enter().append("line").attr("x1", (d) => x(d)).attr("x2", (d) => x(d)).attr("y1", 0).attr("y2", plotHeight).attr("stroke", "#e6e6e6").attr("shape-rendering", "crispEdges");
-      for (const [i, { lane, end }] of group.lanes.entries()) {
-        const y = i * s.rowHeight;
-        const g = mainG.append("g").attr("transform", `translate(0,${y})`);
-        const row = { lane, end, segments: [] };
-        rows.push(row);
-        g.append("rect").attr("x", x(0)).attr("y", (s.rowHeight - baseH) / 2).attr("width", Math.max(0, x(end) - x(0))).attr("height", baseH).attr("fill", "#999").attr("fill-opacity", 0.5).attr("shape-rendering", "crispEdges");
-        for (const r of lane.ranges) {
-          const entry = categories.byKey.get(r.category);
-          if (entry.hidden) continue;
-          const segEnd = r.end ?? Math.max(end, r.start);
-          const segTop = (s.rowHeight - segH) / 2;
-          const seg = g.append("g");
-          seg.attr("fill-opacity", 0.75);
-          seg.append("rect").attr("x", x(r.start)).attr("y", segTop).attr("width", Math.max(1, x(segEnd) - x(r.start))).attr("height", segH).attr("fill", entry.color).attr("shape-rendering", "crispEdges");
-          const xe = x(r.start) + Math.max(1, x(segEnd) - x(r.start));
-          row.segments.push({ r, entry, x0: x(r.start), x1: r.end == null ? xe + segH * 0.8 : xe });
-          if (r.end == null) {
-            seg.append("path").attr(
-              "d",
-              `M${xe},${segTop - segH / 3}L${xe + segH * 0.8},${s.rowHeight / 2}L${xe},${segTop + segH * 1.33}Z`
-            ).attr("fill", entry.color);
-          }
-        }
-        for (const p of lane.points) {
-          if (this.isClipped(p)) continue;
-          const entry = events.byKey.get(p.event);
-          if (entry.hidden) continue;
-          const mark = this.isMarkedPoint(p) ? pointCategories.byKey.get(p.category || noValueCategory) : void 0;
-          if (mark?.hidden) continue;
-          const shape = mark?.shape || entry.shape;
-          const color = mark?.color || entry.color;
-          const height = markerH * entry.size;
-          const cx = x(p.time);
-          const dot = drawMarker(g, shape, cx, s.rowHeight / 2, height, color).attr("data-event", p.event);
-          const { halfWidth } = getMarkerGeometry(shape, height);
-          markers.push({ p, lane, entry, mark, shape, color, x: cx, y: y + s.rowHeight / 2, height, halfWidth });
-          if (p.sample && p.sampleId !== void 0) {
-            const sample = { sampleId: p.sampleId, sampleName: p.sample };
-            dot.attr("data-testid", "sjpp-swimmer-linked-point").attr("role", "button").attr("tabindex", 0).attr("aria-label", `Open sample view of ${p.sample}`).on("keydown", (event) => {
-              if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                this.openSampleView(sample);
-              }
-            });
-          }
-        }
-        if (s.showSampleNames) {
-          g.append("text").attr("x", -labelGap).attr("y", s.rowHeight / 2).attr("text-anchor", "end").attr("dominant-baseline", "central").attr("font-size", fontSize).attr("fill", "#333").attr("role", "button").attr("tabindex", 0).attr("aria-label", `Open sample view of ${lane.sample}`).style("cursor", "pointer").text(lane.sample).on("click", () => this.openSampleView({ sampleId: lane.sampleId, sampleName: lane.sample }, true)).on("keydown", (event) => {
-            if (event.key === "Enter" || event.key === " ") {
-              event.preventDefault();
-              this.openSampleView({ sampleId: lane.sampleId, sampleName: lane.sample }, true);
-            }
-          }).on("mouseover", (event) => {
-            tip.clear().show(event.clientX, event.clientY);
-            tip.d.append("div").text("Click to open sample view");
-          }).on("mouseout", () => tip.hide());
-        }
-      }
-      this.attachInteractions(mainG, markers, rows, {
-        plotWidth: s.plotWidth,
-        rowHeight: s.rowHeight,
-        segH,
-        barH,
-        x,
-        timeLabel,
-        fmt
-      });
-      const axisG = mainG.append("g").attr("transform", `translate(0,${plotHeight + 2})`);
-      axisG.call(axisBottom(x).tickValues(ticks));
-      axisstyle({ axis: axisG, showline: true, fontsize: 11 });
-      axisG.append("text").attr("x", s.plotWidth / 2).attr("y", 34).attr("text-anchor", "middle").attr("font-size", 12).attr("fill", "#333").text(timeLabel);
-      yOffset += plotHeight + axisHeight + groupGap;
-    }
-    const legendHeight = this.renderLegend(
-      svg.append("g").attr("transform", `translate(${labelWidth + s.plotWidth + rightPad},${topPad})`),
-      categories.entries,
-      events.entries,
-      pointCategories.entries
-    );
-    svg.attr("width", labelWidth + s.plotWidth + rightPad + legendWidth).attr("height", Math.max(yOffset - groupGap, topPad + legendHeight));
-  }
-  /** returns the legend height. events linked to samples (e.g. "CSF sample") are listed last. with a "mark
-  by" term their markers take the term's category colors and shapes, so the event row has no icon and is
-  followed by the term as a pill, as in the controls, then the term's categories, indented:
-    Events
-      Follow-up
-      Mark CSF sample by
-        [term name]
-        category1
-        category2 */
-  renderLegend(g, categories, events, pointCategories = []) {
-    const lineH = 18;
-    const indent = 20;
-    let y = 0;
-    const fit = (text, max) => text.length > max ? text.slice(0, max - 1) + "\u2026" : text;
-    const title = (text) => {
-      g.append("text").attr("y", y + 10).attr("font-size", 12).attr("font-weight", "bold").text(text);
-      y += lineH;
-    };
-    const item = (type, e, entries, drawIcon, opts = {}) => {
-      const x = opts.x || 0;
-      const max = Math.floor(26 * (legendWidth - x) / legendWidth);
-      const row = g.append("g").attr("transform", `translate(${x},${y})`).attr("data-testid", "sjpp-swimmer-legend-item").attr("data-legend-type", type).attr("role", "button").attr("tabindex", 0).attr("aria-label", `Edit legend item ${opts.label || e.label}`).style("cursor", "pointer").style("opacity", e.hidden ? 0.4 : 1);
-      const showMenu = (event) => this.showLegendMenu(event, type, e, entries, {
-        allowColor: opts.allowColor !== false,
-        allowShape: type != "categories" && opts.allowShape !== false
-      });
-      row.on("click", showMenu).on("keydown", (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          showMenu(event);
-        }
-      });
-      row.append("rect").attr("width", legendWidth - 20 - x).attr("height", lineH).attr("fill", "transparent");
-      drawIcon(row, e);
-      row.append("text").attr("x", 20).attr("y", 10).attr("font-size", 12).attr("fill", "#333").style("text-decoration", e.hidden ? "line-through" : "none").text(fit(opts.label || e.label, max));
-      if ((opts.label || e.label).length > max) row.append("title").text(opts.label || e.label);
-      y += lineH;
-    };
-    const rect = (row, e) => row.append("rect").attr("x", 0).attr("y", 3).attr("width", 14).attr("height", 8).attr("fill", e.color);
-    const marker = (row, e) => drawMarker(row, e.shape, 7, 7, Math.max(6, 12 * e.size), e.color);
-    if (categories.length) {
-      title("Intervals");
-      for (const e of categories) item("categories", e, categories, rect);
-      y += 8;
-    }
-    if (events.length) {
-      const linkedKeys = new Set(this.swimmer.pointSampleEvents || []);
-      const linked = events.filter((e) => linkedKeys.has(e.key));
-      const ordered = [...events.filter((e) => !linkedKeys.has(e.key)), ...linked];
-      const marked = this.pointTerm && pointCategories.length > 0;
-      title("Events");
-      for (const e of ordered) {
-        if (!marked || !linkedKeys.has(e.key)) {
-          item("events", e, ordered, marker);
-          continue;
-        }
-        g.append("text").attr("x", 20).attr("y", y + 10).attr("font-size", 12).attr("fill", "#333").style("opacity", e.hidden ? 0.4 : 1).style("text-decoration", e.hidden ? "line-through" : "none").text(`Mark ${e.label} by`);
-        y += lineH;
-        const name = this.pointTerm.term?.name || "";
-        const pill = g.append("g").attr("transform", `translate(${indent},${y})`).attr("data-testid", "sjpp-swimmer-legend-pointterm").attr("role", "button").attr("tabindex", 0).attr("aria-label", `Edit ${name}`).style("cursor", "pointer");
-        const pillRect = pill.append("rect").attr("rx", 6).attr("height", 20).attr("fill", "#cfe2f3");
-        const max = Math.floor(26 * (legendWidth - indent - 12) / legendWidth);
-        const pillText = pill.append("text").attr("x", 6).attr("y", 14).attr("font-size", 12).text(fit(name, max));
-        if (name.length > max) pill.append("title").text(name);
-        pillRect.attr("width", (pillText.node().getComputedTextLength() || name.length * 7) + 12);
-        const showMenu = () => this.showPointTermMenu(pill.node(), e, ordered);
-        pill.on("click", showMenu).on("keydown", (event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            showMenu();
-          }
-        });
-        y += 24;
-      }
-      if (marked) {
-        for (const e of pointCategories) item("pointCategories", e, pointCategories, marker, { x: indent });
-      }
-      y += 8;
-    }
-    return y;
-  }
-  /** a clipBeforeOrigin event before time 0 (e.g. birth in a treatment-referenced view), not drawn */
-  isClipped(p) {
-    return p.time < 0 && !!this.swimmer.events?.[p.event]?.clipBeforeOrigin;
-  }
-  /** radio buttons to switch the time reference (e.g. birth, diagnosis, treatment start), above the plot. only
-  with two or more ds time references and onSettingsChange, which refetches the lanes */
-  renderTimeReferences() {
-    const refs = this.swimmer.timeReferences || [];
-    if (refs.length < 2 || !this.onSettingsChange) return;
-    const current = this.timeReference;
-    const holder = this.dom.plotDiv.append("div").attr("data-testid", "sjpp-swimmer-time-references").attr("role", "radiogroup").attr("aria-label", "Time from").style("margin-bottom", "8px");
-    holder.append("span").style("margin-right", "8px").style("opacity", 0.8).text("Time from:");
-    make_radios({
-      holder: holder.append("div").style("display", "inline-block"),
-      options: refs.map((r) => ({
-        label: r.label || r.key,
-        value: r.key,
-        checked: r.key == current,
-        testid: `sjpp-swimmer-time-reference-${r.key}`
-      })),
-      styles: { display: "inline-block", padding: "3px 10px 3px 0" },
-      // the lanes are refetched and the plot redrawn, these radios included
-      callback: (key) => this.onSettingsChange({ timeReference: key })
-    });
-  }
-  /** legend item menu, as in the scatter plot legend: hide/show, show only, show all, color, and shape for
-  events. "show only" and "show all" act within the item's own section (intervals, events or mark-by
-  categories). color and shape options are left out for an event whose markers are drawn by the mark-by term */
-  showLegendMenu(event, type, e, entries, opts) {
-    this.dom.tip.hide();
-    if (!this.legendMenu) this.legendMenu = new Menu({ padding: "0px" });
-    const menu = this.legendMenu;
-    this.addLegendOptions(menu, menu.clear().d.append("div"), type, e, entries, opts);
-    menu.showunder(event.target);
-  }
-  /** menu of the "mark by" term pill in the legend: the edit, replace and remove options of the controls'
-  "Mark ... by" pill, then the legend options of the marked event (e), without color or shape */
-  async showPointTermMenu(node, e, entries) {
-    this.dom.tip.hide();
-    this.legendMenu?.hide();
-    if (!this.pointTermMenu) this.pointTermMenu = new Menu({ padding: "0px" });
-    const menu = this.pointTermMenu;
-    if (!this.pointTermPill)
-      this.pointTermPill = termsettingInit({
-        vocabApi: this.app.vocabApi,
-        renderAs: "none",
-        tip: menu,
-        menuOptions: "*",
-        usecase: { target: "swimmer", detail: "pointTerm", sampleTypes: this.swimmer.pointSampleTypes },
-        numericEditMenuVersion: ["discrete"],
-        defaultQ4fillTW: getT0T2defaultQ(),
-        callback: (tw) => {
-          menu.hide();
-          this.onPointTermChange?.(tw);
-        }
-      });
-    const pointTerm = structuredClone(this.pointTerm);
-    delete pointTerm.tw;
-    await this.pointTermPill.main(pointTerm);
-    this.pointTermPill.showMenu(null, node);
-    this.addLegendOptions(menu, menu.d.append("div"), "events", e, entries, { allowColor: false, allowShape: false });
-  }
-  /** legend options of entry e, appended to div inside menu */
-  addLegendOptions(menu, div, type, e, entries, opts) {
-    const option = (text, edit) => div.append("div").attr("class", "sja_menuoption sja_sharp_border").text(text).on("click", () => {
-      menu.hide();
-      this.editLegend(type, edit());
-    });
-    option(e.hidden ? "Show" : "Hide", () => ({ [e.label]: { hidden: !e.hidden } }));
-    if (entries.length > 1)
-      option("Show only", () => Object.fromEntries(entries.map((x) => [x.label, { hidden: x.label != e.label }])));
-    if (entries.some((x) => x.hidden))
-      option("Show all", () => Object.fromEntries(entries.map((x) => [x.label, { hidden: false }])));
-    if (opts.allowColor)
-      div.append("div").attr("class", "sja_sharp_border").style("padding", "0px 10px").text("Color:").append("input").attr("type", "color").attr("value", rgb(e.color).formatHex()).on("change", (ev) => {
-        menu.hide();
-        this.editLegend(type, { [e.label]: { color: ev.target.value } });
-      });
-    if (opts.allowShape) {
-      div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Change shape").on("click", () => {
-        div.selectAll("*").remove();
-        shapeSelector(div, (index) => {
-          menu.hide();
-          this.editLegend(type, { [e.label]: { shape: Object.keys(shapes)[index] } });
-        });
-      });
-    }
-  }
-  /** remove the body-mounted menus and their body listeners */
-  destroy() {
-    for (const i of this.interactions) i.destroy();
-    this.dom.tip.destroy();
-    this.legendMenu?.destroy();
-    this.pointTermPill?.destroy();
-  }
-  /** merge changes into the legend overrides, then save them through onSettingsChange or redraw locally */
-  editLegend(type, changes) {
-    const legend = structuredClone(
-      this.settings.legend || { categories: {}, events: {}, pointCategories: {} }
-    );
-    if (!legend[type]) legend[type] = {};
-    for (const [label, o] of Object.entries(changes)) legend[type][label] = { ...legend[type][label], ...o };
-    if (this.onSettingsChange) this.onSettingsChange({ legend });
-    else {
-      this.settings = { ...this.settings, legend };
-      this.render();
-    }
-  }
-  /** whether a marker opens a sample view on click: a point linked to its own sample (e.g. a CSF dot) */
-  isLinked(d) {
-    return !!d.p.sample && d.p.sampleId !== void 0;
-  }
-  /** hover and click of a panel, through a transparent cover over its lanes. the shared DataPointInteractions
-  hit-tests the markers; when none is under the cursor, a hover shows the interval segments or the base bar
-  under it. a marker is hit when the cursor is within its drawn left and right edges, anywhere in its lane's
-  row, so only markers whose shapes overlap at the cursor are listed together. a click on several
-  linked markers opens a menu to pick the sample to view */
-  attachInteractions(mainG, markers, rows, o) {
-    const tip = this.dom.tip;
-    const time = `(${o.timeLabel.toLowerCase()})`;
-    const hoverLayer = mainG.append("g").style("pointer-events", "none");
-    const minX = markers.reduce((v, d) => Math.min(v, d.x - d.halfWidth), 0);
-    const maxX = rows.reduce(
-      (right, row) => row.segments.reduce((v, segment) => Math.max(v, segment.x1), right),
-      markers.reduce((v, d) => Math.max(v, d.x + d.halfWidth), o.plotWidth)
-    );
-    const cover = mainG.append("rect").attr("data-testid", "sjpp-swimmer-cover").attr("x", minX).attr("width", maxX - minX).attr("height", rows.length * o.rowHeight).attr("fill", "transparent").style("pointer-events", "all");
-    const getCursor = (event) => {
-      const [mx, my] = pointer_default(event, mainG.node());
-      const i = Math.floor(my / o.rowHeight);
-      return { mx, my, i, cy: (i + 0.5) * o.rowHeight };
-    };
-    let hovered = [];
-    let cursorRow = -1;
-    const dpi = new DataPointInteractions({
-      cover,
-      hoverLayer,
-      hoverTip: tip,
-      points: markers,
-      getX: (d) => d.x,
-      getY: (d) => d.y,
-      toLocalCoords: (event) => {
-        const { mx, cy, i } = getCursor(event);
-        cursorRow = i;
-        return [mx, cy];
-      },
-      hitRadius: Math.max(0, ...markers.map((d) => d.halfWidth)),
-      perDotRadius: (d) => d.halfWidth,
-      // only markers of the cursor's row: a large marker (event size of about 3 or more) would otherwise be
-      // within reach from the neighboring lanes. so the hit distance is the horizontal one
-      isHidden: (d) => Math.floor(d.y / o.rowHeight) !== cursorRow,
-      // outline of the marker's shape, 2px larger on each side
-      toHoverSpec: (d) => {
-        const m = getMarkerGeometry(d.shape, d.height + 4);
-        return {
-          path: m.shape.path,
-          transform: `translate(${d.x},${d.y}) ${m.transform}`,
-          stroke: "black",
-          fill: "none"
-        };
-      },
-      itemNoun: "event",
-      renderSingleHoverTooltip: (d, container) => this.renderMarkerTip(d, container, time, o.fmt),
-      buildMultiHitTableData: (dots) => this.buildMarkersTable(dots, o.timeLabel, o.fmt),
-      onHover: (dots) => {
-        hovered = dots;
-        cover.style("cursor", dots.some((d) => this.isLinked(d)) ? "pointer" : "default");
-      },
-      onSingleClick: (d, event, ctx) => this.openMarkerSamples([d], event, ctx, time, o.fmt),
-      onMultiClick: (dots, event, ctx) => this.openMarkerSamples(dots, event, ctx, time, o.fmt)
-    });
-    dpi.attach();
-    this.interactions.push(dpi);
-    cover.on("mousemove.lane", (event) => {
-      if (hovered.length || dpi.clickMenu.d.style("display") != "none") return;
-      const { mx, my, i, cy } = getCursor(event);
-      const row = rows[i];
-      if (!row) return tip.hide();
-      const dy = Math.abs(my - cy);
-      const segments = row.segments.filter((sg) => {
-        if (mx < sg.x0 || mx > sg.x1) return false;
-        if (sg.r.end != null) return dy <= o.segH / 2;
-        const arrowStart = sg.x1 - o.segH * 0.8;
-        if (mx < arrowStart) return dy <= o.segH / 2;
-        const fraction = (sg.x1 - mx) / (o.segH * 0.8);
-        return my >= cy - (o.segH / 2 + o.segH / 3) * fraction && my <= cy + (o.segH * 1.33 - o.segH / 2) * fraction;
-      });
-      const onBase = dy <= o.barH / 2 && mx >= o.x(0) && mx <= o.x(row.end);
-      if (!segments.length && !onBase) return tip.hide();
-      tip.clear();
-      tip.d.append("div").style("font-weight", "bold").text(row.lane.sample);
-      for (const { r, entry } of segments) {
-        const div = tip.d.append("div").attr("data-testid", "sjpp-swimmer-tip-interval");
-        div.append("svg").attr("width", 14).attr("height", 10).style("margin-right", "5px").append("rect").attr("y", 1).attr("width", 14).attr("height", 8).attr("fill", entry.color);
-        div.append("span").text(`${entry.label}${entry.label != r.category ? ` (${r.category})` : ""}`);
-        tip.d.append("div").style("margin-left", "19px").text(
-          r.end == null ? `From ${o.fmt(r.start)}, ongoing ${time}` : `${o.fmt(r.start)} to ${o.fmt(r.end)} ${time}`
-        );
-      }
-      if (!segments.length) tip.d.append("div").text(`Lane end: ${o.fmt(row.end)} ${time}`);
-      tip.show(event.clientX, event.clientY);
-    });
-  }
-  /** hover tooltip of one marker: the lane name, the event with its legend icon, and a linked point's sample
-  with its annotations */
-  renderMarkerTip(d, container, time, fmt) {
-    const { p, lane, entry, mark } = d;
-    container.append("div").style("font-weight", "bold").text(lane.sample);
-    const row = container.append("div").attr("data-testid", "sjpp-swimmer-tip-event");
-    row.append("span").style("margin-right", "5px").html(getMarkerIconHtml(d.shape, d.color));
-    row.append("span").text(`${entry.label}: ${fmt(p.time)} ${time}`);
-    if (mark) container.append("div").text(`${this.pointTerm.term?.name}: ${mark.label}`);
-    if (!p.sample) return;
-    container.append("div").text(`Sample: ${p.sample}`);
-    if (p.sampleId === void 0) return;
-    if (entry.sampleTerms?.length) this.showPointSampleAnno(container, p.sampleId, entry.sampleTerms);
-    container.append("div").style("font-size", "0.8em").style("opacity", 0.7).text("Click to open sample view");
-  }
-  /** multi-hit hover table of overlapping markers, one row per marker with its legend icon */
-  buildMarkersTable(dots, timeLabel, fmt) {
-    const hasSample = dots.some((d) => d.p.sample);
-    const hasMark = dots.some((d) => d.mark);
-    const columns = [
-      { label: "" },
-      { label: "Event" },
-      { label: timeLabel, sortable: true },
-      ...hasMark ? [{ label: this.pointTerm.term?.name || "" }] : [],
-      ...hasSample ? [{ label: "Sample" }] : []
-    ];
-    const rows = dots.map((d) => [
-      { html: getMarkerIconHtml(d.shape, d.color) },
-      { value: d.entry.label },
-      { value: fmt(d.p.time) },
-      ...hasMark ? [{ value: d.mark?.label || "" }] : [],
-      ...hasSample ? [{ value: d.p.sample || "" }] : []
-    ]);
-    return { columns, rows };
-  }
-  /** click on markers: opens the sample view of the one linked marker, or a menu to pick one of several */
-  openMarkerSamples(dots, event, ctx, time, fmt) {
-    const linked = dots.filter((d) => this.isLinked(d));
-    if (linked.length < 2) {
-      ctx.dismiss();
-      if (linked.length) this.openSampleView({ sampleId: linked[0].p.sampleId, sampleName: linked[0].p.sample });
-      return;
-    }
-    const menu = ctx.clickMenu;
-    menu.clear();
-    menu.d.append("div").style("padding", "5px 10px").style("opacity", 0.7).text("Open sample view of");
-    for (const d of linked) {
-      const sample = { sampleId: d.p.sampleId, sampleName: d.p.sample };
-      const option = menu.d.append("div").attr("class", "sja_menuoption sja_sharp_border").attr("data-testid", "sjpp-swimmer-sample-choice").attr("role", "button").attr("tabindex", 0).on("click", () => {
-        menu.hide();
-        this.openSampleView(sample);
-      }).on("keydown", (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          menu.hide();
-          this.openSampleView(sample);
-        }
-      });
-      option.append("span").style("margin-right", "5px").html(getMarkerIconHtml(d.shape, d.color));
-      option.append("span").text(`${d.p.sample} (${d.entry.label}: ${fmt(d.p.time)} ${time})`);
-    }
-    menu.show(event.clientX, event.clientY);
-  }
-  /** list annotations of a point's own sample (e.g. a CSF sample) in container of the open tooltip, using the
-  same single-sample query and value formatting as sample view. termIds comes from the event's sampleTerms in
-  the dataset config and sets which terms are shown and in what order. the table fills in only if the
-  tooltip still shows this point */
-  async showPointSampleAnno(container, sampleId, termIds) {
-    const holder = container.append("div").attr("data-sampleid", sampleId).style("margin", "4px 0");
-    holder.append("div").style("opacity", 0.6).text("Loading annotations ...");
-    let rows;
-    try {
-      rows = await this.getPointSampleAnno(sampleId, termIds);
-    } catch (e) {
-      rows = [];
-      console.warn("swimmer: cannot load sample annotations", e);
-    }
-    if (!holder.node()?.isConnected) return;
-    holder.selectAll("*").remove();
-    if (!rows.length) return;
-    const table = holder.append("table").style("border-spacing", "0 1px").style("font-size", "0.9em");
-    for (const r of rows) {
-      const tr = table.append("tr");
-      tr.append("td").style("padding-right", "8px").style("opacity", 0.7).text(r.label);
-      tr.append("td").text(r.value);
-    }
-  }
-  getPointSampleAnno(sampleId, termIds) {
-    const cacheKey = `${sampleId}	${termIds.join("	")}`;
-    let pr = this.pointSampleAnno.get(cacheKey);
-    if (!pr) {
-      pr = (async () => {
-        const data = await this.app.vocabApi.getSingleSampleData({ sampleId, term_ids: termIds });
-        if ("error" in data) throw data.error;
-        const rows = [];
-        for (const id of termIds.filter((id2) => data[id2])) {
-          const term = data[id].term;
-          const value = getTermValue(term, data);
-          if (value != null) rows.push({ label: term.name, value });
-        }
-        return rows;
-      })();
-      pr.catch(() => this.pointSampleAnno.delete(cacheKey));
-      this.pointSampleAnno.set(cacheKey, pr);
-    }
-    return pr;
-  }
-  /** withRelated: open the sample with its related samples (e.g. a patient lane shows the patient and
-  its primary/PDX/CSF samples as columns), as when the sample is picked in the sample view search box;
-  otherwise only this sample (e.g. a CSF dot). the sample view's swimmer lane uses the same time reference */
-  openSampleView(sample, withRelated = false) {
-    const config = { chartType: "sampleView", ...withRelated ? { sample } : { samples: [sample] } };
-    if (this.timeReference) config.swimmerTimeReference = this.timeReference;
-    this.app.dispatch({ type: "plot_create", config });
-  }
-};
-async function fetchSwimmerLanes(body) {
-  const result = await dofetch3("termdb/swimmer", { body });
-  if (typeof result == "string") throw result;
-  if (!result?.lanes) throw "invalid response from termdb/swimmer";
-  return result;
-}
-function getDefaultSwimmerSettings() {
-  return {
-    rowHeight: 20,
-    plotWidth: 800,
-    sortBy: "end",
-    showSampleNames: true,
-    legend: { categories: {}, events: {}, pointCategories: {} }
-  };
-}
-function getMaxTextWidth(svg, labels, fontSize) {
-  let max = 0;
-  for (const label of labels) {
-    const t = svg.append("text").attr("font-size", fontSize).text(label);
-    max = Math.max(max, t.node().getBBox().width);
-    t.remove();
-  }
-  return max;
-}
-async function getPlotConfig(opts, app) {
-  const settings = getDefaultSwimmerSettings();
-  const config = {
-    chartType: "swimmer",
-    settings: {
-      controls: { isOpen: false },
-      swimmer: settings
-    }
-  };
-  copyMerge(config, opts);
-  if (config.term0) config.term0 = await fillTermWrapper(config.term0, app.vocabApi);
-  if (config.pointTerm) config.pointTerm = await fillTermWrapper(config.pointTerm, app.vocabApi);
-  return config;
-}
-var swimmerInit = getCompInit(Swimmer);
-var componentInit = swimmerInit;
-export {
-  SwimmerRenderer,
-  componentInit,
-  fetchSwimmerLanes,
-  getDefaultSwimmerSettings,
-  getPlotConfig,
-  swimmerInit
-};
-//# sourceMappingURL=swimmer-Z6FUH4CD.js.map