@sjcrh/proteinpaint-client 2.217.0 → 2.218.0

package/dist/polar2-4YHPENAV.js

@@ -0,0 +1,228 @@
+import {
+  getDefaultProfilePlotSettings,
+  getProfilePlotConfig,
+  profilePlot
+} from "./chunk-REIPTX7J.js";
+import {
+  fillTwLst,
+  renderTable
+} from "./chunk-YS7Y257H.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-PITPUAWX.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-K6CZAEBF.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import {
+  dofetch3
+} from "./chunk-XJYVMXMZ.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-ZSNZPH6G.js";
+import "./chunk-ET2KFCXK.js";
+import {
+  arc_default
+} from "./chunk-LMG7Y5IN.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-6XKAOSQE.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-HS5PO5ZQ.js";
+
+// plots/profile/polar2.ts
+var ProfilePolar2 = class extends profilePlot {
+  constructor(opts) {
+    super(opts, "profilePolar2");
+    this.radius = 250;
+    this.arcGenerator = arc_default().innerRadius(0);
+  }
+  static {
+    this.type = "profilePolar2";
+  }
+  async init(appState) {
+    await super.init(appState);
+    const config = appState.plots.find((p) => p.id === this.id);
+    this.scoreTerms = config.terms;
+    this.angle = Math.PI * 2 / config.terms.length;
+  }
+  async main() {
+    this.dom.loadingDiv.style("display", "");
+    try {
+      await super.main();
+      await this.setControls();
+      this.plot();
+    } finally {
+      this.dom.loadingDiv.style("display", "none");
+    }
+  }
+  /**
+   * Fetches aggregated module scores from termdb/profilePolar2Scores after
+   * super.setControls() builds the filter UI and sets this.filter. The server
+   * derives the facility term from the request term IDs and returns the median
+   * percentage across all eligible sites.
+   */
+  async setControls(additionalInputs = []) {
+    await super.setControls(additionalInputs);
+    this.data = await this.fetchAggregatedScores();
+    if (this.data && "error" in this.data) throw this.data.error;
+  }
+  async fetchAggregatedScores() {
+    return dofetch3("termdb/profilePolar2Scores", {
+      body: {
+        genome: this.state.vocab.genome,
+        dslabel: this.state.vocab.dslabel,
+        scoreTerms: this.scoreTerms.map((t) => ({
+          score: { term: { id: t.score.term.id }, q: t.score.q },
+          maxScore: typeof t.maxScore === "number" ? t.maxScore : { term: { id: t.maxScore.term.id }, q: t.maxScore.q }
+        })),
+        filterByUserSites: this.settings?.filterByUserSites,
+        filter: this.filter
+      }
+    });
+  }
+  onMouseOut(event) {
+    const target = event.target;
+    if (target.tagName === "path") {
+      target.setAttribute("stroke", "white");
+      if (target.getAttribute("stroke-opacity") === "0") {
+        target.setAttribute("stroke-opacity", "1");
+      }
+    }
+    this.tip.hide();
+  }
+  onMouseOver(event) {
+    const target = event.target;
+    if (target.tagName === "path") {
+      target.setAttribute("stroke-opacity", "0");
+      const d = target.__data__;
+      const menu = this.tip.clear();
+      const percentage = this.getPercentage(d);
+      const label = percentage == null ? "N/A" : `${percentage}%`;
+      menu.d.text(`${d.module} ${label}`);
+      menu.show(event.clientX, event.clientY, true, true);
+    } else {
+      this.onMouseOut(event);
+    }
+  }
+  plot() {
+    this.createSvg();
+    const rows = this.drawArcs();
+    this.drawGrid();
+    this.drawTable(rows);
+    this.drawLegend();
+  }
+  /*
+  Two layouts. Normally the legend column sits to the right of the polar inside the svg and
+  the score table sits to its right again. In comparison mode two charts share the row, so
+  the legend column and the table stack under the polar and the svg narrows to suit. The
+  filter legend grows a row per active filter, hence the derived height.
+  */
+  createSvg() {
+    const isComparison = this.isComparison;
+    const x = 280, y = 330;
+    const legendY = 620, filterY = legendY + 90;
+    const width = isComparison ? 600 : 1e3;
+    const height = isComparison ? filterY + this.getFilterLegendRowCount() * 22 + 20 : 600;
+    this.dom.svg = this.dom.plotDiv.append("div").style("display", "inline-block").append("svg").attr("width", width).attr("height", height);
+    this.dom.tableDiv = this.dom.plotDiv.append("div").attr("data-testid", "sjpp-profilePolar2-data-table").style("display", isComparison ? "block" : "inline-block").style("vertical-align", "top").style("margin", isComparison ? "0 20px 20px" : "45px 20px");
+    this.dom.svg.append("text").attr("transform", `translate(130, 40)`).attr("font-weight", "bold").text(this.config.title);
+    this.polarG = this.dom.svg.append("g").attr("transform", `translate(${x},${y})`);
+    this.legendG = this.dom.svg.append("g").attr("data-testid", "sjpp-profilePolar2-legend").attr("transform", isComparison ? `translate(20, ${legendY})` : `translate(${x + 280}, ${y - 200})`);
+    this.filterG = this.dom.svg.append("g").attr("transform", isComparison ? `translate(20, ${filterY})` : `translate(${x + 280},${y})`);
+  }
+  drawGrid() {
+    for (let i = 0; i <= 10; i++) this.drawGridCircle(i * 10);
+    this.drawGradeCircle(50, "C");
+    this.drawGradeCircle(75, "B");
+    this.drawGradeCircle(100, "A");
+    for (let i = 0; i <= 10; i++) {
+      const percent = i * 10;
+      this.polarG.append("text").attr("transform", `translate(-10, ${-percent / 100 * this.radius + 5})`).attr("text-anchor", "end").style("font-size", "0.8rem").text(`${percent}%`).attr("pointer-events", "none");
+    }
+  }
+  drawGridCircle(percent) {
+    const circle = this.polarG.append("circle").attr("r", percent / 100 * this.radius).style("fill", "none").style("opacity", "0.5");
+    if (percent != 50) circle.style("stroke", "#aaa");
+  }
+  drawGradeCircle(percent, label) {
+    const circle = this.polarG.append("circle").attr("r", percent / 100 * this.radius).style("fill", "none").style("opacity", "0.5");
+    if (percent != 100) circle.style("stroke-dasharray", "5, 5").style("stroke-width", "2").style("stroke", "black");
+    this.polarG.append("text").attr("transform", `translate(15, ${-(percent / 100 - 0.125) * this.radius + 10})`).attr("text-anchor", "middle").text(label).style("font-weight", "bold").style("font-size", "24px").attr("pointer-events", "none");
+  }
+  /** Draws the arc slices and returns table rows for drawTable(). */
+  drawArcs() {
+    const rows = [];
+    let i = 0;
+    for (const d of this.config.terms) {
+      d.i = i;
+      const color = d.score.term.color;
+      const percentage = this.getPercentage(d);
+      rows.push([{ color, disabled: true }, { value: d.module }, { value: percentage ?? "N/A" }]);
+      this.polarG.append("g").append("path").datum(d).attr("fill", color).attr("stroke", "white").attr(
+        "d",
+        this.arcGenerator({
+          outerRadius: percentage / 100 * this.radius,
+          startAngle: i * this.angle,
+          endAngle: (i + 1) * this.angle
+        })
+      ).on("click", (event) => this.onMouseOver(event));
+      i++;
+    }
+    return rows;
+  }
+  drawTable(rows) {
+    const columns = [{ label: "Color" }, { label: "Module" }, { label: "Score", align: "center" }];
+    this.dom.tableDiv.selectAll("*").remove();
+    renderTable({
+      rows,
+      columns,
+      div: this.dom.tableDiv,
+      showLines: true,
+      resize: true,
+      maxHeight: "50vh"
+    });
+  }
+  drawLegend() {
+    this.legendG.append("text").attr("text-anchor", "left").style("font-weight", "bold").text("Overall Score").attr("transform", `translate(0, -5)`);
+    this.addLegendItem("A", "More than 75% of possible scorable items", 1);
+    this.addLegendItem("B", "50-75% of possible scorable items", 2);
+    this.addLegendItem("C", "Less than 50% of possible scorable items", 3);
+    this.addFilterLegend();
+  }
+};
+async function getPlotConfig(opts, app, _activeCohort) {
+  try {
+    const activeCohort = _activeCohort === void 0 ? app.getState().activeCohort : _activeCohort;
+    const defaults = await getProfilePlotConfig(activeCohort, app, opts);
+    if (!defaults) throw "default config not found in termdbConfig.plotConfigByCohort.profilePolar2";
+    const settings = getDefaultProfilePlotSettings();
+    defaults.settings = { profilePolar2: settings };
+    const config = copyMerge(structuredClone(defaults), opts);
+    config.settings.controls = { isOpen: false };
+    const twlst = [];
+    for (const data of config.terms) {
+      data.score.q = { mode: "continuous" };
+      data.maxScore.q = { mode: "continuous" };
+      twlst.push(data.score, data.maxScore);
+    }
+    await fillTwLst(twlst, app.vocabApi);
+    return config;
+  } catch (e) {
+    throw `${e} [profilePolar2 getPlotConfig()]`;
+  }
+}
+var profilePolar2Init = getCompInit(ProfilePolar2);
+var componentInit = profilePolar2Init;
+export {
+  componentInit,
+  getPlotConfig,
+  profilePolar2Init
+};
+//# sourceMappingURL=polar2-4YHPENAV.js.map