synapse-react-client 4.0.19 → 4.0.21

package/dist/components/Plot/SynapseSankeyPlot.js

@@ -0,0 +1,359 @@
+import "../../utils/SynapseConstants.js";
+import { parseEntityIdFromSqlStatement as e } from "../../utils/functions/SqlFunctions.js";
+import "../../utils/index.js";
+import { useGetFullTableQueryResults as t } from "../../synapse-queries/entity/useGetQueryResultBundle.js";
+import "../../synapse-queries/index.js";
+import n from "./SynapseSankeyPlot.module.js";
+import { useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
+import { Skeleton as c, useTheme as l } from "@mui/material";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import p from "tinycolor2";
+import { sankey as m, sankeyLinkHorizontal as h } from "d3-sankey";
+import g from "classnames";
+//#region src/components/Plot/SynapseSankeyPlot.tsx
+var _ = 920, ee = 124, te = 286, v = 22, ne = 13, re = 34, ie = 46, y = 14, b = 70, x = 64, S = 4.5, ae = 64, oe = 56, se = 44, C = 160, w = (e) => ((e.y0 ?? 0) + (e.y1 ?? 0)) / 2, T = (e) => ((e.x0 ?? 0) + (e.x1 ?? 0)) / 2;
+function E(e) {
+	let { node: t, total: r, unitLabel: i, align: a, onMouseEnter: o, interactiveProps: s } = e, c = l(), u = w(t), p = a === "left" ? (t.x0 ?? 0) - y : (t.x1 ?? 0) + y, m = a === "left" ? "end" : "start";
+	return /* @__PURE__ */ f("g", {
+		onMouseEnter: o,
+		...s,
+		children: [
+			/* @__PURE__ */ d("text", {
+				x: p,
+				y: u - 22,
+				textAnchor: m,
+				fontSize: 10,
+				fontWeight: 600,
+				letterSpacing: 1.2,
+				fill: c.palette.grey[700],
+				children: t.name.toUpperCase()
+			}),
+			/* @__PURE__ */ d("text", {
+				x: p,
+				y: u + 6,
+				textAnchor: m,
+				fontSize: 26,
+				fontWeight: 600,
+				fill: c.palette.primary.dark,
+				className: n.tabularNums,
+				children: r.toLocaleString()
+			}),
+			/* @__PURE__ */ d("text", {
+				x: p,
+				y: u + 23,
+				textAnchor: m,
+				fontSize: 11,
+				fontWeight: 500,
+				fill: c.palette.text.secondary,
+				children: `${i} total`
+			})
+		]
+	});
+}
+function ce(e) {
+	let { node: t, total: r, opacity: i, onMouseEnter: a, interactiveProps: o } = e, s = l(), c = w(t), u = (t.x1 ?? 0) + y, p = t.value ?? 0, m = r > 0 ? p / r : 0, h = u + b, g = c + 6;
+	return /* @__PURE__ */ f("g", {
+		opacity: i,
+		className: n.categoryLabel,
+		onMouseEnter: a,
+		...o,
+		children: [
+			/* @__PURE__ */ d("text", {
+				x: u,
+				y: c - 4,
+				fontSize: 13,
+				fontWeight: 600,
+				fill: s.palette.text.primary,
+				children: t.name
+			}),
+			/* @__PURE__ */ d("text", {
+				x: u,
+				y: c + 14,
+				fontSize: 13,
+				fontWeight: 600,
+				fill: t.color,
+				className: n.tabularNums,
+				children: p.toLocaleString()
+			}),
+			/* @__PURE__ */ d("rect", {
+				x: h,
+				y: g,
+				width: x,
+				height: S,
+				rx: S / 2,
+				fill: s.palette.grey[300]
+			}),
+			/* @__PURE__ */ d("rect", {
+				x: h,
+				y: g,
+				width: x * m,
+				height: S,
+				rx: S / 2,
+				fill: t.color
+			}),
+			/* @__PURE__ */ f("text", {
+				x: h + x + 7,
+				y: c + 13,
+				fontSize: 11,
+				fontWeight: 500,
+				fill: s.palette.grey[700],
+				className: n.tabularNums,
+				children: [(m * 100).toFixed(1), "%"]
+			})
+		]
+	});
+}
+function le(e) {
+	let { node: t, leftValue: r, rightValue: i, unitLabel: a, rightUnitLabel: o, opacity: s, onMouseEnter: c, interactiveProps: u } = e, p = l(), m = T(t), h = t.y0 ?? 0;
+	return /* @__PURE__ */ f("g", {
+		opacity: s,
+		className: n.categoryLabel,
+		onMouseEnter: c,
+		...u,
+		children: [/* @__PURE__ */ d("text", {
+			x: m,
+			y: h - 20,
+			textAnchor: "middle",
+			fontSize: 13,
+			fontWeight: 600,
+			fill: p.palette.text.primary,
+			stroke: p.palette.background.paper,
+			className: n.haloText,
+			children: t.name
+		}), /* @__PURE__ */ d("text", {
+			x: m,
+			y: h - 6,
+			textAnchor: "middle",
+			fontSize: 11,
+			fontWeight: 600,
+			fill: p.palette.text.secondary,
+			stroke: p.palette.background.paper,
+			className: g(n.tabularNums, n.haloText),
+			children: `${r.toLocaleString()} ${a} · ${i.toLocaleString()} ${o}`
+		})]
+	});
+}
+var D = (y) => {
+	let { sql: b, rootLabel: x, title: S, labelColumn: w, valueColumn: T, unitLabel: D = "items", breakdownLabel: O, onCategoryClick: k, onRootClick: A, rightValueColumn: j, rightLabel: ue = "Files", rightUnitLabel: de = "items", onRightCategoryClick: fe, onRightEndClick: M } = y, N = l(), P = i(), F = j !== void 0, [pe, I] = s(null), [L, R] = s(null), [me, he] = s(!1);
+	r(() => {
+		let e = requestAnimationFrame(() => he(!0));
+		return () => cancelAnimationFrame(e);
+	}, []);
+	let z = o(void 0);
+	r(() => () => {
+		z.current !== void 0 && window.clearTimeout(z.current);
+	}, []);
+	let { data: B, isLoading: ge } = t({
+		concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
+		partMask: 1,
+		entityId: e(b),
+		query: { sql: b }
+	}), V = a(() => B?.queryResult?.queryResults.rows ?? [], [B]), { labelIndex: H, valueIndex: U, rightValueIndex: W } = a(() => {
+		let e = B?.queryResult?.queryResults.headers ?? [], t = (t, n) => {
+			if (typeof t == "number") return t;
+			if (typeof t == "string") {
+				let r = e.findIndex((e) => e.name === t);
+				return r >= 0 ? r : n;
+			}
+			return n;
+		};
+		return {
+			labelIndex: t(w, 0),
+			valueIndex: t(T, 1),
+			rightValueIndex: F ? t(j, 2) : -1
+		};
+	}, [
+		B,
+		w,
+		T,
+		j,
+		F
+	]), G = N.typography.fontFamily ?? "inherit", K = N.palette.primary.dark, _e = N.palette.text.primary, q = F ? se : v, ve = F ? ae : ie, J = Math.max(320, q + v + V.length * ve), ye = a(() => {
+		if (V.length === 0) return null;
+		let e = p(N.palette.primary.main).lighten(18), t = p(N.palette.primary.main).darken(12), n = (n) => V.length <= 1 ? N.palette.primary.main : p.mix(e, t, n / (V.length - 1) * 100).toHexString(), r = V.map((e, t) => ({
+			name: String(e.values[H] ?? ""),
+			leftValue: Number(e.values[U] ?? 0),
+			rightValue: F ? Number(e.values[W] ?? 0) : 0,
+			color: n(t)
+		})), i = r.reduce((e, t) => e + t.leftValue, 0), a = r.reduce((e, t) => e + t.rightValue, 0), o = r.length + 1, s = F && i > 0 && a > 0 ? a / i : 1, c = (e, t) => t === "left" ? e * s : e, l = [
+			{
+				name: x,
+				value: i,
+				color: K,
+				kind: "leftEnd"
+			},
+			...r.map((e) => ({
+				name: e.name,
+				value: e.leftValue,
+				color: e.color,
+				kind: "source",
+				leftValue: e.leftValue,
+				rightValue: e.rightValue
+			})),
+			...F ? [{
+				name: ue,
+				value: a,
+				color: K,
+				kind: "rightEnd"
+			}] : []
+		], u = [...r.map((e, t) => ({
+			source: 0,
+			target: t + 1,
+			value: c(e.leftValue, "left"),
+			sourceIndex: t,
+			side: "left"
+		})), ...F ? r.map((e, t) => ({
+			source: t + 1,
+			target: o,
+			value: c(e.rightValue, "right"),
+			sourceIndex: t,
+			side: "right"
+		})) : []], d = F ? oe : re, f = F ? C : ee, h = F ? C : te;
+		return {
+			graph: m().nodeWidth(ne).nodePadding(d).nodeSort(null).extent([[f, q], [_ - h, J - v]])({
+				nodes: l.map((e) => ({ ...e })),
+				links: u.map((e) => ({ ...e }))
+			}),
+			totalLeft: i,
+			totalRight: a
+		};
+	}, [
+		V,
+		H,
+		U,
+		W,
+		F,
+		x,
+		ue,
+		K,
+		N.palette.primary.main,
+		J,
+		q
+	]);
+	if (ge) return /* @__PURE__ */ d(c, {
+		width: "100%",
+		height: "500px"
+	});
+	if (!ye) return /* @__PURE__ */ d(u, {});
+	let { graph: Y, totalLeft: be, totalRight: xe } = ye, Se = h(), X = L ?? pe, Ce = L === null ? .07 : .05, we = L === null ? .16 : .1, Te = L === null ? .32 : .15, Ee = (e) => X === null ? .6 : e === X ? L === null ? .95 : 1 : Ce, De = (e) => X === null || e.kind !== "source" || (e.index ?? 1) - 1 === X ? 1 : we, Oe = (e) => X === null || X === e ? 1 : Te, ke = (e, t) => {
+		z.current !== void 0 && window.clearTimeout(z.current), R(e), z.current = window.setTimeout(() => {
+			z.current = void 0, R(null), t();
+		}, 320);
+	}, Z = (e, t) => t ? {
+		cursor: "pointer",
+		onClick: () => ke(e, t)
+	} : {}, Q = (e) => e ? {
+		cursor: "pointer",
+		onClick: e
+	} : {}, $ = (e) => k ? () => k(e) : void 0;
+	return /* @__PURE__ */ f("div", {
+		className: g(n.root, { [n.rootVisible]: me }),
+		children: [S && /* @__PURE__ */ d("div", {
+			className: n.title,
+			style: {
+				fontFamily: G,
+				color: _e
+			},
+			children: S
+		}), /* @__PURE__ */ f("svg", {
+			viewBox: `0 0 ${_} ${J}`,
+			role: "img",
+			"aria-label": O ? `${x} broken down ${O}` : `${x} breakdown`,
+			className: n.svg,
+			style: {
+				fontFamily: G,
+				maxWidth: _
+			},
+			onMouseLeave: () => I(null),
+			children: [
+				/* @__PURE__ */ d("defs", { children: Y.links.map((e, t) => {
+					let n = e.source, r = e.target;
+					return /* @__PURE__ */ f("linearGradient", {
+						id: `${P}-grad-${t}`,
+						gradientUnits: "userSpaceOnUse",
+						x1: n.x1,
+						x2: r.x0,
+						children: [/* @__PURE__ */ d("stop", {
+							offset: "0%",
+							stopColor: n.color
+						}), /* @__PURE__ */ d("stop", {
+							offset: "100%",
+							stopColor: r.color
+						})]
+					}, t);
+				}) }),
+				/* @__PURE__ */ d("g", {
+					fill: "none",
+					children: Y.links.map((e, t) => {
+						let r = e.side === "left" ? e.target : e.source, i = Math.max(1, e.width ?? 1), a = e.side === "left" ? k : fe, o = a ? () => a(r.name) : void 0;
+						return /* @__PURE__ */ d("path", {
+							d: Se(e) ?? void 0,
+							stroke: `url(#${P}-grad-${t})`,
+							strokeWidth: L === e.sourceIndex ? i * 1.25 : i,
+							strokeOpacity: Ee(e.sourceIndex),
+							className: n.ribbon,
+							onMouseEnter: () => I(e.sourceIndex),
+							...Z(e.sourceIndex, o)
+						}, t);
+					})
+				}),
+				/* @__PURE__ */ d("g", { children: Y.nodes.map((e, t) => {
+					let r = (e.index ?? 1) - 1, i = e.kind === "leftEnd" ? Q(A) : e.kind === "rightEnd" ? Q(M) : Z(r, $(e.name));
+					return /* @__PURE__ */ d("rect", {
+						x: e.x0,
+						y: e.y0,
+						width: (e.x1 ?? 0) - (e.x0 ?? 0),
+						height: Math.max(1, (e.y1 ?? 0) - (e.y0 ?? 0)),
+						rx: 4,
+						fill: e.color,
+						fillOpacity: De(e),
+						stroke: N.palette.background.paper,
+						strokeWidth: 1,
+						className: n.node,
+						onMouseEnter: () => I(e.kind === "source" ? r : null),
+						...i
+					}, t);
+				}) }),
+				Y.nodes.map((e, t) => {
+					if (e.kind === "leftEnd") return /* @__PURE__ */ d(E, {
+						node: e,
+						total: be,
+						unitLabel: D,
+						align: "left",
+						onMouseEnter: () => I(null),
+						interactiveProps: Q(A)
+					}, `lab-${t}`);
+					if (e.kind === "rightEnd") return /* @__PURE__ */ d(E, {
+						node: e,
+						total: xe,
+						unitLabel: de,
+						align: "right",
+						onMouseEnter: () => I(null),
+						interactiveProps: Q(M)
+					}, `lab-${t}`);
+					let n = (e.index ?? 1) - 1, r = $(e.name);
+					return F ? /* @__PURE__ */ d(le, {
+						node: e,
+						leftValue: e.leftValue ?? 0,
+						rightValue: e.rightValue ?? 0,
+						unitLabel: D,
+						rightUnitLabel: de,
+						opacity: Oe(n),
+						onMouseEnter: () => I(n),
+						interactiveProps: Z(n, r)
+					}, `lab-${t}`) : /* @__PURE__ */ d(ce, {
+						node: e,
+						total: be,
+						opacity: Oe(n),
+						onMouseEnter: () => I(n),
+						interactiveProps: Z(n, r)
+					}, `lab-${t}`);
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { D as SynapseSankeyPlot, D as default };
+
+//# sourceMappingURL=SynapseSankeyPlot.js.map

package/dist/components/Plot/SynapseSankeyPlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SynapseSankeyPlot.js","names":[],"sources":["../../../src/components/Plot/SynapseSankeyPlot.tsx"],"sourcesContent":["import React, { useEffect, useId, useMemo, useRef, useState } from 'react'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport { SynapseConstants } from '@/utils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { Skeleton, useTheme } from '@mui/material'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport {\n  sankey as d3Sankey,\n  sankeyLinkHorizontal,\n  type SankeyNode as D3SankeyNode,\n} from 'd3-sankey'\nimport tinycolor from 'tinycolor2'\nimport classNames from 'classnames'\nimport styles from './SynapseSankeyPlot.module.scss'\n\nexport type SynapseSankeyPlotProps = {\n  /** SQL query providing the node labels and link values (see labelColumn/valueColumn) */\n  sql: string\n  /** Label for the left end node that links to every row returned by the query */\n  rootLabel: string\n  /** Optional plot title */\n  title?: string\n  /**\n   * Column supplying each category's label. Either a column name (matched\n   * against the query result headers) or a zero-based index. Defaults to the\n   * first column.\n   */\n  labelColumn?: string | number\n  /**\n   * Column supplying each link's value. Either a column name or a zero-based\n   * index. Defaults to the second column.\n   */\n  valueColumn?: string | number\n  /**\n   * Noun for the left end total caption, e.g. \"datasets\" renders\n   * \"datasets total\". Defaults to \"items\".\n   */\n  unitLabel?: string\n  /**\n   * Phrase describing the breakdown, used in the chart's accessible label,\n   * e.g. \"by source\" renders \"All Datasets broken down by source\".\n   */\n  breakdownLabel?: string\n  /**\n   * Invoked with a category's label when its left flow, center node, or label\n   * is clicked. When provided, those become interactive (pointer cursor).\n   */\n  onCategoryClick?: (categoryLabel: string) => void\n  /** Invoked when the left end node (rootLabel) is clicked. */\n  onRootClick?: () => void\n  /**\n   * Enables \"butterfly\" mode: a second value per category drawn as a mirrored\n   * flow from each center node to a right end node. Either a column name or a\n   * zero-based index (defaults to the third column when a right end is shown).\n   */\n  rightValueColumn?: string | number\n  /** Label for the right end node (butterfly mode). Defaults to \"Files\". */\n  rightLabel?: string\n  /** Noun for the right end total caption, e.g. \"files\". Defaults to \"items\". */\n  rightUnitLabel?: string\n  /** Invoked with a category's label when its right flow is clicked. */\n  onRightCategoryClick?: (categoryLabel: string) => void\n  /** Invoked when the right end node (rightLabel) is clicked. */\n  onRightEndClick?: () => void\n}\n\n// Datum shapes for the d3-sankey graph.\ntype NodeKind = 'leftEnd' | 'source' | 'rightEnd'\ntype NodeDatum = {\n  name: string\n  value: number\n  color: string\n  kind: NodeKind\n  // Raw per-source counts, used by the butterfly center labels.\n  leftValue?: number\n  rightValue?: number\n}\ntype LinkDatum = {\n  value: number\n  // Zero-based index of the center (source) node this link belongs to.\n  sourceIndex: number\n  side: 'left' | 'right'\n}\ntype LaidOutNode = D3SankeyNode<NodeDatum, LinkDatum>\ntype InteractiveProps = { cursor?: 'pointer'; onClick?: () => void }\n\n// Coordinate space of the SVG. The rendered width is capped at VIEW_W (see the\n// wrapper's maxWidth) so one viewBox unit ≈ one CSS pixel and text renders at\n// its intended size instead of being magnified on wide containers. Generous\n// gutters leave unclipped room for the end figures and labels. The height grows\n// with the number of categories so rows stay legible.\nconst VIEW_W = 920\nconst GUTTER_LEFT = 124\nconst GUTTER_RIGHT = 286\nconst GUTTER_Y = 22\nconst NODE_WIDTH = 13\nconst NODE_PADDING = 34\nconst ROW_HEIGHT = 46\n// Horizontal gap between a node and its adjacent label/figure.\nconst LABEL_GAP = 14\n// Category row: a fixed-width column reserved for the count, so the share\n// micro-bar always starts at the same x regardless of the number's length.\nconst COUNT_COLUMN_W = 70\nconst BAR_TRACK_W = 64\nconst BAR_HEIGHT = 4.5\n// Butterfly mode needs more vertical room per row for the center labels, which\n// sit in the padding gap above each node. The left/right gutters are equal so\n// the center column lands at the SVG's horizontal center (aligning the center\n// labels with the centered title), with room for an end figure on each side.\nconst BUTTERFLY_ROW_HEIGHT = 64\nconst BUTTERFLY_NODE_PADDING = 56\nconst BUTTERFLY_GUTTER_TOP = 44\nconst BUTTERFLY_GUTTER_X = 160\n\nconst midY = (node: LaidOutNode) => ((node.y0 ?? 0) + (node.y1 ?? 0)) / 2\nconst midX = (node: LaidOutNode) => ((node.x0 ?? 0) + (node.x1 ?? 0)) / 2\n\n// The editorial figure beside an end node: an eyebrow label, the total, and a\n// caption (e.g. \"datasets total\"). Mirrored for the right end.\nfunction SankeyEndFigure(props: {\n  node: LaidOutNode\n  total: number\n  unitLabel: string\n  align: 'left' | 'right'\n  onMouseEnter: () => void\n  interactiveProps: InteractiveProps\n}): React.ReactNode {\n  const { node, total, unitLabel, align, onMouseEnter, interactiveProps } =\n    props\n  const theme = useTheme()\n  const cy = midY(node)\n  const x =\n    align === 'left' ? (node.x0 ?? 0) - LABEL_GAP : (node.x1 ?? 0) + LABEL_GAP\n  const textAnchor = align === 'left' ? 'end' : 'start'\n  return (\n    <g onMouseEnter={onMouseEnter} {...interactiveProps}>\n      <text\n        x={x}\n        y={cy - 22}\n        textAnchor={textAnchor}\n        fontSize={10}\n        fontWeight={600}\n        letterSpacing={1.2}\n        fill={theme.palette.grey[700]}\n      >\n        {node.name.toUpperCase()}\n      </text>\n      <text\n        x={x}\n        y={cy + 6}\n        textAnchor={textAnchor}\n        fontSize={26}\n        fontWeight={600}\n        fill={theme.palette.primary.dark}\n        className={styles.tabularNums}\n      >\n        {total.toLocaleString()}\n      </text>\n      <text\n        x={x}\n        y={cy + 23}\n        textAnchor={textAnchor}\n        fontSize={11}\n        fontWeight={500}\n        fill={theme.palette.text.secondary}\n      >\n        {`${unitLabel} total`}\n      </text>\n    </g>\n  )\n}\n\n// Hub-and-spoke category label (single value): name, count, share bar, percent,\n// placed to the right of the center node.\nfunction SankeyCategoryLabel(props: {\n  node: LaidOutNode\n  total: number\n  opacity: number\n  onMouseEnter: () => void\n  interactiveProps: InteractiveProps\n}): React.ReactNode {\n  const { node, total, opacity, onMouseEnter, interactiveProps } = props\n  const theme = useTheme()\n  const cy = midY(node)\n  const x = (node.x1 ?? 0) + LABEL_GAP\n  const value = node.value ?? 0\n  const pct = total > 0 ? value / total : 0\n  const barX = x + COUNT_COLUMN_W\n  const barY = cy + 6\n  return (\n    <g\n      opacity={opacity}\n      className={styles.categoryLabel}\n      onMouseEnter={onMouseEnter}\n      {...interactiveProps}\n    >\n      <text\n        x={x}\n        y={cy - 4}\n        fontSize={13}\n        fontWeight={600}\n        fill={theme.palette.text.primary}\n      >\n        {node.name}\n      </text>\n      <text\n        x={x}\n        y={cy + 14}\n        fontSize={13}\n        fontWeight={600}\n        fill={node.color}\n        className={styles.tabularNums}\n      >\n        {value.toLocaleString()}\n      </text>\n      <rect\n        x={barX}\n        y={barY}\n        width={BAR_TRACK_W}\n        height={BAR_HEIGHT}\n        rx={BAR_HEIGHT / 2}\n        fill={theme.palette.grey[300]}\n      />\n      <rect\n        x={barX}\n        y={barY}\n        width={BAR_TRACK_W * pct}\n        height={BAR_HEIGHT}\n        rx={BAR_HEIGHT / 2}\n        fill={node.color}\n      />\n      <text\n        x={barX + BAR_TRACK_W + 7}\n        y={cy + 13}\n        fontSize={11}\n        fontWeight={500}\n        fill={theme.palette.grey[700]}\n        className={styles.tabularNums}\n      >\n        {(pct * 100).toFixed(1)}%\n      </text>\n    </g>\n  )\n}\n\n// Butterfly center label: the source name and both counts, centered above the\n// node (the only clear space between the left and right flows).\nfunction SankeyCenterLabel(props: {\n  node: LaidOutNode\n  leftValue: number\n  rightValue: number\n  unitLabel: string\n  rightUnitLabel: string\n  opacity: number\n  onMouseEnter: () => void\n  interactiveProps: InteractiveProps\n}): React.ReactNode {\n  const {\n    node,\n    leftValue,\n    rightValue,\n    unitLabel,\n    rightUnitLabel,\n    opacity,\n    onMouseEnter,\n    interactiveProps,\n  } = props\n  const theme = useTheme()\n  const cx = midX(node)\n  const topY = node.y0 ?? 0\n  return (\n    <g\n      opacity={opacity}\n      className={styles.categoryLabel}\n      onMouseEnter={onMouseEnter}\n      {...interactiveProps}\n    >\n      <text\n        x={cx}\n        y={topY - 20}\n        textAnchor=\"middle\"\n        fontSize={13}\n        fontWeight={600}\n        fill={theme.palette.text.primary}\n        stroke={theme.palette.background.paper}\n        className={styles.haloText}\n      >\n        {node.name}\n      </text>\n      <text\n        x={cx}\n        y={topY - 6}\n        textAnchor=\"middle\"\n        fontSize={11}\n        fontWeight={600}\n        fill={theme.palette.text.secondary}\n        stroke={theme.palette.background.paper}\n        className={classNames(styles.tabularNums, styles.haloText)}\n      >\n        {`${leftValue.toLocaleString()} ${unitLabel} · ${rightValue.toLocaleString()} ${rightUnitLabel}`}\n      </text>\n    </g>\n  )\n}\n\nexport const SynapseSankeyPlot = (\n  props: SynapseSankeyPlotProps,\n): React.ReactNode => {\n  const {\n    sql,\n    rootLabel,\n    title,\n    labelColumn,\n    valueColumn,\n    unitLabel = 'items',\n    breakdownLabel,\n    onCategoryClick,\n    onRootClick,\n    rightValueColumn,\n    rightLabel = 'Files',\n    rightUnitLabel = 'items',\n    onRightCategoryClick,\n    onRightEndClick,\n  } = props\n  const theme = useTheme()\n  const gradientPrefix = useId()\n\n  const hasRightFlow = rightValueColumn !== undefined\n\n  // Index of the center node currently focused (null = nothing focused). Drives\n  // the focus/dim hover interaction; shared by both flows of a source.\n  const [hovered, setHovered] = useState<number | null>(null)\n  // Index of the center node that was clicked; briefly emphasized before the\n  // handler fires.\n  const [clicked, setClicked] = useState<number | null>(null)\n  // One-time gentle fade-in on mount.\n  const [visible, setVisible] = useState(false)\n  useEffect(() => {\n    const id = requestAnimationFrame(() => setVisible(true))\n    return () => cancelAnimationFrame(id)\n  }, [])\n  // Timer that briefly emphasizes a clicked flow before invoking the handler.\n  // Held in a ref so it can be cleared on unmount and replaced on rapid clicks.\n  const clickTimer = useRef<number | undefined>(undefined)\n  useEffect(() => {\n    return () => {\n      if (clickTimer.current !== undefined) {\n        window.clearTimeout(clickTimer.current)\n      }\n    }\n  }, [])\n\n  const queryRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    entityId: parseEntityIdFromSqlStatement(sql),\n    query: {\n      sql,\n    },\n  }\n\n  const { data: queryData, isLoading } =\n    useGetFullTableQueryResults(queryRequest)\n\n  const rows = useMemo(\n    () => queryData?.queryResult?.queryResults.rows ?? [],\n    [queryData],\n  )\n\n  // Resolve the label/value columns (by name or index) against the result\n  // headers, falling back to the first columns.\n  const { labelIndex, valueIndex, rightValueIndex } = useMemo(() => {\n    const headers = queryData?.queryResult?.queryResults.headers ?? []\n    const resolve = (col: string | number | undefined, fallback: number) => {\n      if (typeof col === 'number') {\n        return col\n      }\n      if (typeof col === 'string') {\n        const idx = headers.findIndex(h => h.name === col)\n        return idx >= 0 ? idx : fallback\n      }\n      return fallback\n    }\n    return {\n      labelIndex: resolve(labelColumn, 0),\n      valueIndex: resolve(valueColumn, 1),\n      rightValueIndex: hasRightFlow ? resolve(rightValueColumn, 2) : -1,\n    }\n  }, [queryData, labelColumn, valueColumn, rightValueColumn, hasRightFlow])\n\n  // Theme-derived palette: end nodes use the dark primary color; category nodes\n  // step through a light-to-dark sweep of the primary color so they stay\n  // on-brand while remaining distinguishable (even when a portal's primary and\n  // secondary colors are identical).\n  const fontFamily = theme.typography.fontFamily ?? 'inherit'\n  const endColor = theme.palette.primary.dark\n  const textColor = theme.palette.text.primary\n\n  // viewH feeds the SVG viewBox, so it lives at component scope; the remaining\n  // spacing is derived inside the layout memo below.\n  const gutterTop = hasRightFlow ? BUTTERFLY_GUTTER_TOP : GUTTER_Y\n  const rowHeight = hasRightFlow ? BUTTERFLY_ROW_HEIGHT : ROW_HEIGHT\n  const viewH = Math.max(320, gutterTop + GUTTER_Y + rows.length * rowHeight)\n\n  // Build and lay out the graph. Memoized so hovering (which only changes\n  // opacity) doesn't recompute the layout.\n  const graphResult = useMemo(() => {\n    if (rows.length === 0) {\n      return null\n    }\n    const gradientStart = tinycolor(theme.palette.primary.main).lighten(18)\n    const gradientEnd = tinycolor(theme.palette.primary.main).darken(12)\n    const categoryColor = (index: number) =>\n      rows.length <= 1\n        ? theme.palette.primary.main\n        : tinycolor\n            .mix(gradientStart, gradientEnd, (index / (rows.length - 1)) * 100)\n            .toHexString()\n\n    const sources = rows.map((row, index) => ({\n      name: String(row.values[labelIndex] ?? ''),\n      leftValue: Number(row.values[valueIndex] ?? 0),\n      rightValue: hasRightFlow ? Number(row.values[rightValueIndex] ?? 0) : 0,\n      color: categoryColor(index),\n    }))\n    const totalLeft = sources.reduce((sum, s) => sum + s.leftValue, 0)\n    const totalRight = sources.reduce((sum, s) => sum + s.rightValue, 0)\n    const rightEndIndex = sources.length + 1\n\n    // d3-sankey scales every ribbon by a single value→thickness factor. When the\n    // two flows differ in magnitude (e.g. ~25 datasets vs thousands of files),\n    // the smaller side collapses to hairlines. Scale the left flow so both\n    // halves sum to the same total — ribbon widths then read as each side's\n    // share. The real counts are preserved on the node data for the labels.\n    const leftScale =\n      hasRightFlow && totalLeft > 0 && totalRight > 0\n        ? totalRight / totalLeft\n        : 1\n    const linkValue = (value: number, side: 'left' | 'right') =>\n      side === 'left' ? value * leftScale : value\n\n    const nodes: NodeDatum[] = [\n      { name: rootLabel, value: totalLeft, color: endColor, kind: 'leftEnd' },\n      ...sources.map(s => ({\n        name: s.name,\n        value: s.leftValue,\n        color: s.color,\n        kind: 'source' as const,\n        leftValue: s.leftValue,\n        rightValue: s.rightValue,\n      })),\n      ...(hasRightFlow\n        ? [\n            {\n              name: rightLabel,\n              value: totalRight,\n              color: endColor,\n              kind: 'rightEnd' as const,\n            },\n          ]\n        : []),\n    ]\n    const links: ({ source: number; target: number } & LinkDatum)[] = [\n      ...sources.map((s, index) => ({\n        source: 0,\n        target: index + 1,\n        value: linkValue(s.leftValue, 'left'),\n        sourceIndex: index,\n        side: 'left' as const,\n      })),\n      ...(hasRightFlow\n        ? sources.map((s, index) => ({\n            source: index + 1,\n            target: rightEndIndex,\n            value: linkValue(s.rightValue, 'right'),\n            sourceIndex: index,\n            side: 'right' as const,\n          }))\n        : []),\n    ]\n\n    const nodePadding = hasRightFlow ? BUTTERFLY_NODE_PADDING : NODE_PADDING\n    // Symmetric gutters in butterfly mode center the column layout.\n    const gutterLeft = hasRightFlow ? BUTTERFLY_GUTTER_X : GUTTER_LEFT\n    const gutterRight = hasRightFlow ? BUTTERFLY_GUTTER_X : GUTTER_RIGHT\n    const layout = d3Sankey<NodeDatum, LinkDatum>()\n      .nodeWidth(NODE_WIDTH)\n      .nodePadding(nodePadding)\n      .nodeSort(null) // preserve query order top-to-bottom\n      .extent([\n        [gutterLeft, gutterTop],\n        [VIEW_W - gutterRight, viewH - GUTTER_Y],\n      ])\n\n    return {\n      graph: layout({\n        nodes: nodes.map(d => ({ ...d })),\n        links: links.map(d => ({ ...d })),\n      }),\n      // Real (unscaled) totals for the end-node figures.\n      totalLeft,\n      totalRight,\n    }\n  }, [\n    rows,\n    labelIndex,\n    valueIndex,\n    rightValueIndex,\n    hasRightFlow,\n    rootLabel,\n    rightLabel,\n    endColor,\n    theme.palette.primary.main,\n    viewH,\n    gutterTop,\n  ])\n\n  if (isLoading) {\n    return <Skeleton width={'100%'} height={'500px'} />\n  }\n  if (!graphResult) {\n    return <></>\n  }\n\n  const { graph, totalLeft, totalRight } = graphResult\n  const linkPath = sankeyLinkHorizontal<NodeDatum, LinkDatum>()\n\n  // The clicked flow takes precedence over the hovered one for emphasis.\n  const focusIndex = clicked ?? hovered\n  // Dim the rest harder once a selection has been committed.\n  const dimLink = clicked !== null ? 0.05 : 0.07\n  const dimNode = clicked !== null ? 0.1 : 0.16\n  const dimLabel = clicked !== null ? 0.15 : 0.32\n\n  // Opacity helpers for the focus/dim interaction. Both flows of a focused\n  // source share its center-node index.\n  const linkOpacity = (sourceIndex: number) =>\n    focusIndex === null\n      ? 0.6\n      : sourceIndex === focusIndex\n        ? clicked !== null\n          ? 1\n          : 0.95\n        : dimLink\n  const nodeOpacity = (node: LaidOutNode) =>\n    focusIndex === null ||\n    node.kind !== 'source' ||\n    (node.index ?? 1) - 1 === focusIndex\n      ? 1\n      : dimNode\n  const labelOpacity = (sourceIndex: number) =>\n    focusIndex === null || focusIndex === sourceIndex ? 1 : dimLabel\n\n  // Clicking a center flow briefly emphasizes it (a quick \"swell\") and then\n  // fires the handler, so the navigation feels intentional. No tabIndex/role:\n  // those make the browser draw a focus outline box around the SVG shape.\n  const activate = (sourceIndex: number, fire: () => void) => {\n    if (clickTimer.current !== undefined) {\n      window.clearTimeout(clickTimer.current)\n    }\n    setClicked(sourceIndex)\n    clickTimer.current = window.setTimeout(() => {\n      clickTimer.current = undefined\n      // Clear the transient emphasis before invoking the handler so the chart\n      // returns to its resting state for consumers whose handler doesn't\n      // navigate away (and unmount) the component.\n      setClicked(null)\n      fire()\n    }, 320)\n  }\n  // Center flows swell on click; end nodes navigate immediately.\n  const flowProps = (\n    sourceIndex: number,\n    fire: (() => void) | undefined,\n  ): InteractiveProps =>\n    fire\n      ? { cursor: 'pointer', onClick: () => activate(sourceIndex, fire) }\n      : {}\n  const endProps = (fire: (() => void) | undefined): InteractiveProps =>\n    fire ? { cursor: 'pointer', onClick: fire } : {}\n  // The \"datasets\" (left) handler fires for a center node and its left flow.\n  const categoryFire = (name: string) =>\n    onCategoryClick ? () => onCategoryClick(name) : undefined\n\n  return (\n    <div className={classNames(styles.root, { [styles.rootVisible]: visible })}>\n      {title && (\n        <div className={styles.title} style={{ fontFamily, color: textColor }}>\n          {title}\n        </div>\n      )}\n      <svg\n        viewBox={`0 0 ${VIEW_W} ${viewH}`}\n        role=\"img\"\n        aria-label={\n          breakdownLabel\n            ? `${rootLabel} broken down ${breakdownLabel}`\n            : `${rootLabel} breakdown`\n        }\n        className={styles.svg}\n        style={{ fontFamily, maxWidth: VIEW_W }}\n        onMouseLeave={() => setHovered(null)}\n      >\n        <defs>\n          {graph.links.map((link, i) => {\n            const source = link.source as LaidOutNode\n            const target = link.target as LaidOutNode\n            return (\n              <linearGradient\n                key={i}\n                id={`${gradientPrefix}-grad-${i}`}\n                gradientUnits=\"userSpaceOnUse\"\n                x1={source.x1}\n                x2={target.x0}\n              >\n                <stop offset=\"0%\" stopColor={source.color} />\n                <stop offset=\"100%\" stopColor={target.color} />\n              </linearGradient>\n            )\n          })}\n        </defs>\n\n        {/* Ribbons */}\n        <g fill=\"none\">\n          {graph.links.map((link, i) => {\n            const sourceNode = (\n              link.side === 'left' ? link.target : link.source\n            ) as LaidOutNode\n            const baseWidth = Math.max(1, link.width ?? 1)\n            const handler =\n              link.side === 'left' ? onCategoryClick : onRightCategoryClick\n            const fire = handler ? () => handler(sourceNode.name) : undefined\n            return (\n              <path\n                key={i}\n                d={linkPath(link) ?? undefined}\n                stroke={`url(#${gradientPrefix}-grad-${i})`}\n                strokeWidth={\n                  clicked === link.sourceIndex ? baseWidth * 1.25 : baseWidth\n                }\n                strokeOpacity={linkOpacity(link.sourceIndex)}\n                className={styles.ribbon}\n                onMouseEnter={() => setHovered(link.sourceIndex)}\n                {...flowProps(link.sourceIndex, fire)}\n              />\n            )\n          })}\n        </g>\n\n        {/* Nodes */}\n        <g>\n          {graph.nodes.map((node, i) => {\n            const sourceIndex = (node.index ?? 1) - 1\n            const clickProps =\n              node.kind === 'leftEnd'\n                ? endProps(onRootClick)\n                : node.kind === 'rightEnd'\n                  ? endProps(onRightEndClick)\n                  : flowProps(sourceIndex, categoryFire(node.name))\n            return (\n              <rect\n                key={i}\n                x={node.x0}\n                y={node.y0}\n                width={(node.x1 ?? 0) - (node.x0 ?? 0)}\n                height={Math.max(1, (node.y1 ?? 0) - (node.y0 ?? 0))}\n                rx={4}\n                fill={node.color}\n                fillOpacity={nodeOpacity(node)}\n                stroke={theme.palette.background.paper}\n                strokeWidth={1}\n                className={styles.node}\n                onMouseEnter={() =>\n                  setHovered(node.kind === 'source' ? sourceIndex : null)\n                }\n                {...clickProps}\n              />\n            )\n          })}\n        </g>\n\n        {/* Labels */}\n        {graph.nodes.map((node, i) => {\n          if (node.kind === 'leftEnd') {\n            return (\n              <SankeyEndFigure\n                key={`lab-${i}`}\n                node={node}\n                total={totalLeft}\n                unitLabel={unitLabel}\n                align=\"left\"\n                onMouseEnter={() => setHovered(null)}\n                interactiveProps={endProps(onRootClick)}\n              />\n            )\n          }\n          if (node.kind === 'rightEnd') {\n            return (\n              <SankeyEndFigure\n                key={`lab-${i}`}\n                node={node}\n                total={totalRight}\n                unitLabel={rightUnitLabel}\n                align=\"right\"\n                onMouseEnter={() => setHovered(null)}\n                interactiveProps={endProps(onRightEndClick)}\n              />\n            )\n          }\n          const sourceIndex = (node.index ?? 1) - 1\n          const fire = categoryFire(node.name)\n          if (hasRightFlow) {\n            return (\n              <SankeyCenterLabel\n                key={`lab-${i}`}\n                node={node}\n                leftValue={node.leftValue ?? 0}\n                rightValue={node.rightValue ?? 0}\n                unitLabel={unitLabel}\n                rightUnitLabel={rightUnitLabel}\n                opacity={labelOpacity(sourceIndex)}\n                onMouseEnter={() => setHovered(sourceIndex)}\n                interactiveProps={flowProps(sourceIndex, fire)}\n              />\n            )\n          }\n          return (\n            <SankeyCategoryLabel\n              key={`lab-${i}`}\n              node={node}\n              total={totalLeft}\n              opacity={labelOpacity(sourceIndex)}\n              onMouseEnter={() => setHovered(sourceIndex)}\n              interactiveProps={flowProps(sourceIndex, fire)}\n            />\n          )\n        })}\n      </svg>\n    </div>\n  )\n}\n\nexport default SynapseSankeyPlot\n"],"mappings":"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"}

package/dist/components/Plot/SynapseSankeyPlot.module.js

@@ -0,0 +1,15 @@
+import './SynapseSankeyPlot.css';var e = {
+	root: "_root_244go_1",
+	rootVisible: "_rootVisible_244go_8",
+	title: "_title_244go_12",
+	svg: "_svg_244go_19",
+	ribbon: "_ribbon_244go_28",
+	node: "_node_244go_32",
+	categoryLabel: "_categoryLabel_244go_36",
+	tabularNums: "_tabularNums_244go_40",
+	haloText: "_haloText_244go_44"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=SynapseSankeyPlot.module.js.map

package/dist/components/Plot/SynapseSankeyPlot.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SynapseSankeyPlot.module.js","names":[],"sources":["../../../src/components/Plot/SynapseSankeyPlot.module.scss"],"sourcesContent":["// Layout/chrome for SynapseSankeyPlot. Theme-derived values (font family,\n// colors) stay inline in the component so the chart adopts each portal's MUI\n// palette; only the static structure and transitions live here.\n\n.root {\n  width: 100%;\n  margin-top: 48px;\n  opacity: 0;\n  transition: opacity 0.6s ease;\n}\n\n.rootVisible {\n  opacity: 1;\n}\n\n.title {\n  font-weight: 600;\n  font-size: 20px;\n  text-align: center;\n  margin-bottom: 12px;\n}\n\n.svg {\n  display: block;\n  overflow: visible;\n  width: 100%;\n  height: auto;\n  margin: 0 auto;\n  outline: none;\n}\n\n.ribbon {\n  transition:\n    stroke-opacity 0.25s ease,\n    stroke-width 0.25s ease;\n}\n\n.node {\n  transition: fill-opacity 0.25s ease;\n}\n\n.categoryLabel {\n  transition: opacity 0.2s ease;\n}\n\n.tabularNums {\n  font-variant-numeric: tabular-nums;\n}\n\n// White halo behind label text so it stays legible where it crosses a ribbon.\n// The stroke color is set inline from the theme background; paint-order draws\n// the stroke first (behind the fill).\n.haloText {\n  paint-order: stroke;\n  stroke-width: 3px;\n  stroke-linejoin: round;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .root {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/Plot/SynapseSankeyPlot.module.scss

@@ -0,0 +1,63 @@
+// Layout/chrome for SynapseSankeyPlot. Theme-derived values (font family,
+// colors) stay inline in the component so the chart adopts each portal's MUI
+// palette; only the static structure and transitions live here.
+
+.root {
+  width: 100%;
+  margin-top: 48px;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+}
+
+.rootVisible {
+  opacity: 1;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 20px;
+  text-align: center;
+  margin-bottom: 12px;
+}
+
+.svg {
+  display: block;
+  overflow: visible;
+  width: 100%;
+  height: auto;
+  margin: 0 auto;
+  outline: none;
+}
+
+.ribbon {
+  transition:
+    stroke-opacity 0.25s ease,
+    stroke-width 0.25s ease;
+}
+
+.node {
+  transition: fill-opacity 0.25s ease;
+}
+
+.categoryLabel {
+  transition: opacity 0.2s ease;
+}
+
+.tabularNums {
+  font-variant-numeric: tabular-nums;
+}
+
+// White halo behind label text so it stays legible where it crosses a ribbon.
+// The stroke color is set inline from the theme background; paint-order draws
+// the stroke first (behind the fill).
+.haloText {
+  paint-order: stroke;
+  stroke-width: 3px;
+  stroke-linejoin: round;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .root {
+    transition: none;
+  }
+}

package/dist/components/Plot/ThemesPlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemesPlot.js","names":[],"sources":["../../../src/components/Plot/ThemesPlot.tsx"],"sourcesContent":["import { getFullQueryTableResults } from '@/synapse-client'\nimport { SynapseConstants, useSynapseContext } from '@/utils'\nimport { resultToJson } from '@/utils/functions'\nimport { unCamelCase } from '@/utils/functions/unCamelCase'\nimport { Tooltip } from '@mui/material'\nimport {\n  QueryBundleRequest,\n  QueryResultBundle,\n  RowSet,\n} from '@sage-bionetworks/synapse-types'\nimport Plotly from 'plotly.js-basic-dist'\nimport { useEffect, useState } from 'react'\nimport { RequiredKeysOf } from 'type-fest'\nimport loadingScreen from '../LoadingScreen/LoadingScreen'\nimport BarPlot from './BarPlot'\nimport DotPlot from './DotPlot'\nimport {\n  BarPlotColors,\n  ClickCallbackParams,\n  GraphItem,\n  PlotProps,\n} from './types'\nimport first from 'lodash-es/first'\nimport orderBy from 'lodash-es/orderBy'\nimport cloneDeep from 'lodash-es/cloneDeep'\n\nexport type ThemesPlotProps = {\n  onPointClick: ({ facetValue, type, event }: ClickCallbackParams) => void\n  onIndividualThemeBarPlotPointClick?: ({\n    facetValue,\n    type,\n    event,\n  }: ClickCallbackParams) => void\n  dotPlot: PlotProps\n  topBarPlot: PlotProps\n  sideBarPlot: PlotProps\n  dotPlotYAxisLabel?: string\n}\n\ntype TotalsGroupByY = { y: string; count: number }\ntype TotalsGroupByGroup = { group: string; count: number }\n\nconst optionsConfig: Partial<Plotly.Config> = {\n  displayModeBar: false,\n  responsive: true,\n  scrollZoom: false,\n  editable: false,\n  autosizable: true,\n}\n\nconst dotPlotLayoutConfig: Partial<Plotly.Layout> = {\n  showlegend: true,\n  dragmode: false,\n  legend: {\n    font: {\n      size: 11,\n    },\n\n    y: 1.1,\n    xanchor: 'right',\n    x: 1,\n\n    orientation: 'h',\n  },\n  xaxis: {\n    visible: true,\n    fixedrange: true,\n    zeroline: false,\n    showgrid: false,\n    showline: true,\n    linecolor: '#ddd', //bottom line\n    autotick: true,\n    ticks: 'outside',\n    tickcolor: '#ddd',\n    type: 'log',\n  },\n\n  yaxis: {\n    fixedrange: true,\n    zeroline: false,\n    gridcolor: '#ddd', //horizontal lines\n    automargin: true,\n  },\n\n  margin: {\n    pad: 20,\n  },\n  hovermode: 'closest',\n}\n\nconst barLayoutConfig: Partial<Plotly.Layout> = {\n  barmode: 'stack',\n  showlegend: false,\n  dragmode: false,\n  hovermode: 'closest',\n  yaxis: { visible: false, fixedrange: true },\n  margin: {\n    l: 0,\n    r: 0,\n    b: 0,\n    t: 0,\n    pad: 0,\n  },\n}\n\nfunction fetchData(\n  token: string,\n  { xField, yField, groupField, entityId, whereClause, infoField }: PlotProps,\n): Promise<RowSet> {\n  const sql = `SELECT ${xField} as \"x\", ${yField} as \"y\", ${\n    infoField ? infoField + ' as \"info\", ' : ''\n  } ${groupField} as \"group\"\n                 FROM ${entityId} ${whereClause ? ' WHERE ' + whereClause : ''}`\n\n  const queryRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    entityId: entityId,\n    query: {\n      sql: sql,\n    },\n  }\n\n  return getFullQueryTableResults(queryRequest, token).then(\n    (data: QueryResultBundle) => {\n      return data.queryResult!.queryResults\n    },\n  )\n}\n\nfunction getTotalsByProp<T>(\n  data: GraphItem[],\n  prop: RequiredKeysOf<GraphItem>,\n): T[] {\n  const resultObject = data.reduce((res: Record<string, number>, obj) => {\n    res[obj[prop]] =\n      (obj[prop] in res ? Number(res[obj[prop]]) : 0) + Number(obj.x)\n    return res\n  }, {})\n  const result: T[] = []\n  for (const property in resultObject) {\n    result.push({\n      [prop]: property,\n      count: resultObject[property],\n    } as unknown as T)\n  }\n  return result\n}\n\nconst getClickTargetData = (\n  e: Plotly.PlotMouseEvent,\n  swap: boolean,\n): ClickCallbackParams => {\n  const pointData = e.points[0].data\n\n  let facetValue = pointData.y[0] as string\n  let type = pointData.name\n\n  if (swap) {\n    ;[facetValue, type] = [type, facetValue]\n  }\n  return { facetValue, type, event: e.event }\n}\n\nconst renderTopBarLegend = (\n  colors: BarPlotColors | undefined,\n  xLabels: string[],\n) => (\n  <div className=\"ThemesPlot__barPlotLegend\">\n    {xLabels.map((item, i) => (\n      <div style={{ float: 'left' }} key={`topBar_${i}`}>\n        <div\n          className=\"ThemesPlot__barPlotLegend__label\"\n          key=\"topBar_label\"\n          style={{\n            backgroundColor: `${colors ? colors[item] : 'transparent'}`,\n          }}\n        ></div>\n        <div className=\"ThemesPlot__barPlotLegend__graph\" key=\"topBar_graph\">\n          {item}\n        </div>{' '}\n      </div>\n    ))}\n  </div>\n)\n\nconst fadeColors = (colors: { [key: string]: string }, opacity: string) => {\n  for (const key in colors) {\n    colors[key] = colors[key]\n      .replace(',1)', `, ${opacity})`)\n      .replace(',1.0)', `, ${opacity})`)\n  }\n  return colors\n}\n\nconst getTooltip = (data: GraphItem[], filter: string) => {\n  return first(data.filter(item => item.y === filter).map(item => item.info))\n}\n\nexport function ThemesPlot({\n  dotPlot,\n  topBarPlot,\n  sideBarPlot,\n  onPointClick,\n  onIndividualThemeBarPlotPointClick,\n  dotPlotYAxisLabel = 'Research Themes',\n}: ThemesPlotProps) {\n  const { accessToken } = useSynapseContext()\n  const [isLoaded, setIsLoaded] = useState(false)\n  const [dotPlotQueryData, setDotPlotQueryData] = useState<GraphItem[]>([])\n  const [topBarPlotData, setTopBarQueryData] = useState<GraphItem[]>([])\n  const [sideBarPlotData, setSideBarQueryData] = useState<GraphItem[]>([])\n\n  useEffect(() => {\n    const dotPlotData = fetchData(accessToken!, dotPlot)\n    const topBarPlotData = fetchData(accessToken!, topBarPlot)\n    const sideBarPlotData = fetchData(accessToken!, sideBarPlot)\n    Promise.all([dotPlotData, topBarPlotData, sideBarPlotData])\n      .then(result => {\n        setDotPlotQueryData(\n          resultToJson(\n            result[0].headers,\n            result[0].rows,\n          ) as unknown as GraphItem[],\n        )\n        setTopBarQueryData(\n          resultToJson(\n            result[1].headers,\n            result[1].rows,\n          ) as unknown as GraphItem[],\n        )\n        setSideBarQueryData(\n          resultToJson(\n            result[2].headers,\n            result[2].rows,\n          ) as unknown as GraphItem[],\n        )\n        setIsLoaded(true)\n      })\n      .catch(err => {\n        throw err\n      })\n    return () => {}\n  }, [accessToken, dotPlot, topBarPlot, sideBarPlot])\n  let yLabelsForDotPlot: string[] = []\n  let xLabelsForTopBarPlot: string[] = []\n  let xMaxForDotPlot = 0\n  let topBarPlotDataSorted: TotalsGroupByY[] = []\n  let totalsByDotPlotY: TotalsGroupByY[] = []\n  if (isLoaded) {\n    totalsByDotPlotY = getTotalsByProp(sideBarPlotData, 'y')\n    yLabelsForDotPlot = totalsByDotPlotY\n      .sort((a, b) => b.count - a.count)\n      .map(item => item.y)\n    xMaxForDotPlot = Math.max(...dotPlotQueryData.map(item => Number(item.x)))\n    topBarPlotDataSorted = orderBy(getTotalsByProp(topBarPlotData, 'y'), ['y'])\n    xLabelsForTopBarPlot = orderBy(\n      getTotalsByProp<TotalsGroupByGroup>(topBarPlotData, 'group'),\n      ['group'],\n    ).map(item => item.group)\n  }\n\n  return (\n    <>\n      {!isLoaded && loadingScreen}\n\n      {isLoaded && (\n        <div className=\"ThemesPlot\">\n          <div className=\"ThemesPlot__dotPlotLegend\">\n            <DotPlot\n              id=\"head\"\n              plotData={dotPlotQueryData}\n              isLegend={true}\n              markerSymbols={dotPlot.markerSymbols}\n              style={{ width: '100%', height: '100%' }}\n              layoutConfig={dotPlotLayoutConfig}\n              optionsConfig={{\n                ...optionsConfig,\n                responsive: true,\n                staticPlot: true,\n              }}\n              plotStyle={{\n                ...dotPlot.plotStyle!,\n                backgroundColor: 'transparent',\n              }}\n            ></DotPlot>\n          </div>\n          {topBarPlot.colors &&\n            renderTopBarLegend(topBarPlot.colors, xLabelsForTopBarPlot)}\n          {topBarPlotDataSorted.map((item, i) => (\n            <div className=\"ThemesPlot__topBarPlot\" key={`topBarDiv_${i}`}>\n              <div className=\"ThemesPlot__topBarPlot__label\">\n                {item.count}&nbsp;{unCamelCase(item.y)}\n              </div>\n              <div className=\"ThemesPlot__topBarPlot__plot\">\n                <BarPlot\n                  style={{ width: '100%', height: '100%' }}\n                  layoutConfig={cloneDeep(barLayoutConfig)}\n                  optionsConfig={{ ...optionsConfig }}\n                  plotData={topBarPlotData}\n                  isTop={true}\n                  label={item.y}\n                  xMax={item.count}\n                  onClick={(e: any) =>\n                    onPointClick(getClickTargetData(e, true))\n                  }\n                  colors={\n                    // we are not actually fading colors for now. But keeping implemenation in case it changes\n                    i % 2 === 0\n                      ? topBarPlot.colors\n                      : fadeColors({ ...topBarPlot.colors }, '1')\n                  }\n                />\n              </div>\n            </div>\n          ))}\n          <div style={{ display: 'flex', position: 'relative' }}>\n            <div className=\"ThemesPlot__dotPlotYLabel\">{dotPlotYAxisLabel}</div>\n            <div className=\"ThemesPlot__dotPlot\">\n              {yLabelsForDotPlot.map((label, i) => (\n                <div\n                  key={`plotDiv_${+i}`}\n                  className=\"ThemesPlot__dotPlot__row\"\n                  style={{\n                    backgroundColor: dotPlot.plotStyle?.backgroundColor,\n                  }}\n                >\n                  <div className=\"ThemesPlot__dotPlot__barColumn\">\n                    <Tooltip\n                      title={`${getTooltip(dotPlotQueryData, label)} `}\n                      placement={'right'}\n                    >\n                      <div>\n                        <span className=\"ThemesPlot__dotPlot__themeLabel\">\n                          {label}\n                        </span>\n                        <br />\n                        <span className=\"ThemesPlot__dotPlot__countLabel\">\n                          {totalsByDotPlotY[i].count} {sideBarPlot.countLabel}\n                        </span>\n                        <br />\n                        <BarPlot\n                          style={{ width: '100%' }}\n                          layoutConfig={barLayoutConfig}\n                          optionsConfig={optionsConfig}\n                          plotData={sideBarPlotData}\n                          isTop={false}\n                          // PORTALS-3061: No longer use a global x max for the side bar (where the bar size of 1 grant is consistent),\n                          //    Instead, each bar chart is independent (the size of 1 grant differs across bar charts).\n                          xMax={totalsByDotPlotY[i].count}\n                          label={label}\n                          colors={fadeColors({ ...topBarPlot.colors }, '1')}\n                          onClick={(e: any) => {\n                            if (onIndividualThemeBarPlotPointClick) {\n                              onIndividualThemeBarPlotPointClick(\n                                getClickTargetData(e, false),\n                              )\n                            }\n                          }}\n                        />\n                      </div>\n                    </Tooltip>\n                  </div>\n                  <div className=\"ThemesPlot__dotPlot__dotPlotColumn\">\n                    <div\n                      style={{\n                        width: '100%',\n                        backgroundColor: dotPlot.plotStyle?.backgroundColor,\n                      }}\n                    >\n                      <DotPlot\n                        id={`${i}`}\n                        onClick={(e: any) => {\n                          const { type, event } = getClickTargetData(e, false)\n                          onPointClick({ facetValue: label, type, event })\n                        }}\n                        plotData={dotPlotQueryData}\n                        plotStyle={dotPlot.plotStyle}\n                        markerSymbols={dotPlot.markerSymbols}\n                        xMax={xMaxForDotPlot}\n                        label={label}\n                        layoutConfig={dotPlotLayoutConfig}\n                        optionsConfig={{\n                          ...optionsConfig,\n                          responsive: false,\n                        }}\n                      ></DotPlot>\n                    </div>\n                  </div>\n                </div>\n              ))}\n              <div className=\"ThemesPlot__dotPlot__row\">\n                <div\n                  className=\"ThemesPlot__dotPlot__barColumn\"\n                  style={{ textAlign: 'right' }}\n                >\n                  VOLUME:\n                </div>\n                <div\n                  className=\"ThemesPlot__dotPlot__dotPlotColumn\"\n                  style={{ marginTop: '0px' }}\n                >\n                  <DotPlot\n                    id={'footer'}\n                    plotData={dotPlotQueryData}\n                    isXAxis={true}\n                    xMax={xMaxForDotPlot}\n                    layoutConfig={dotPlotLayoutConfig}\n                    optionsConfig={{ ...optionsConfig, responsive: false }}\n                  ></DotPlot>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div></div>\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default ThemesPlot\n"],"mappings":"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"}
+{"version":3,"file":"ThemesPlot.js","names":[],"sources":["../../../src/components/Plot/ThemesPlot.tsx"],"sourcesContent":["import { getFullQueryTableResults } from '@/synapse-client'\nimport { SynapseConstants, useSynapseContext } from '@/utils'\nimport { resultToJson } from '@/utils/functions'\nimport { unCamelCase } from '@/utils/functions/unCamelCase'\nimport { Tooltip } from '@mui/material'\nimport {\n  QueryBundleRequest,\n  QueryResultBundle,\n  RowSet,\n} from '@sage-bionetworks/synapse-types'\nimport Plotly from 'plotly.js-basic-dist'\nimport { useEffect, useState } from 'react'\nimport { RequiredKeysOf } from 'type-fest'\nimport loadingScreen from '../LoadingScreen/LoadingScreen'\nimport BarPlot from './BarPlot'\nimport DotPlot from './DotPlot'\nimport {\n  BarPlotColors,\n  ClickCallbackParams,\n  GraphItem,\n  PlotProps,\n} from './types'\nimport first from 'lodash-es/first'\nimport orderBy from 'lodash-es/orderBy'\nimport cloneDeep from 'lodash-es/cloneDeep'\n\nexport type ThemesPlotProps = {\n  onPointClick: ({ facetValue, type, event }: ClickCallbackParams) => void\n  onIndividualThemeBarPlotPointClick?: ({\n    facetValue,\n    type,\n    event,\n  }: ClickCallbackParams) => void\n  dotPlot: PlotProps\n  topBarPlot: PlotProps\n  sideBarPlot: PlotProps\n  dotPlotYAxisLabel?: string\n}\n\ntype TotalsGroupByY = { y: string; count: number }\ntype TotalsGroupByGroup = { group: string; count: number }\n\nconst optionsConfig: Partial<Plotly.Config> = {\n  displayModeBar: false,\n  responsive: true,\n  scrollZoom: false,\n  editable: false,\n  autosizable: true,\n}\n\nconst dotPlotLayoutConfig: Partial<Plotly.Layout> = {\n  showlegend: true,\n  dragmode: false,\n  legend: {\n    font: {\n      size: 11,\n    },\n\n    y: 1.1,\n    xanchor: 'right',\n    x: 1,\n\n    orientation: 'h',\n  },\n  xaxis: {\n    visible: true,\n    fixedrange: true,\n    zeroline: false,\n    showgrid: false,\n    showline: true,\n    linecolor: '#ddd', //bottom line\n    autotick: true,\n    ticks: 'outside',\n    tickcolor: '#ddd',\n    type: 'log',\n  },\n\n  yaxis: {\n    fixedrange: true,\n    zeroline: false,\n    gridcolor: '#ddd', //horizontal lines\n    automargin: true,\n  },\n\n  margin: {\n    pad: 20,\n  },\n  hovermode: 'closest',\n}\n\nconst barLayoutConfig: Partial<Plotly.Layout> = {\n  barmode: 'stack',\n  showlegend: false,\n  dragmode: false,\n  hovermode: 'closest',\n  yaxis: { visible: false, fixedrange: true },\n  margin: {\n    l: 0,\n    r: 0,\n    b: 0,\n    t: 0,\n    pad: 0,\n  },\n}\n\nfunction fetchData(\n  token: string,\n  { xField, yField, groupField, entityId, whereClause, infoField }: PlotProps,\n): Promise<RowSet> {\n  const sql = `SELECT ${xField} as \"x\", ${yField} as \"y\", ${\n    infoField ? infoField + ' as \"info\", ' : ''\n  } ${groupField} as \"group\"\n                 FROM ${entityId} ${whereClause ? ' WHERE ' + whereClause : ''}`\n\n  const queryRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    entityId: entityId,\n    query: {\n      sql: sql,\n    },\n  }\n\n  return getFullQueryTableResults(queryRequest, token).then(\n    (data: QueryResultBundle) => {\n      return data.queryResult!.queryResults\n    },\n  )\n}\n\nfunction getTotalsByProp<T>(\n  data: GraphItem[],\n  prop: RequiredKeysOf<GraphItem>,\n): T[] {\n  const resultObject = data.reduce((res: Record<string, number>, obj) => {\n    res[obj[prop]] =\n      (obj[prop] in res ? Number(res[obj[prop]]) : 0) + Number(obj.x)\n    return res\n  }, {})\n  const result: T[] = []\n  for (const property in resultObject) {\n    result.push({\n      [prop]: property,\n      count: resultObject[property],\n    } as unknown as T)\n  }\n  return result\n}\n\nconst getClickTargetData = (\n  e: Plotly.PlotMouseEvent,\n  swap: boolean,\n): ClickCallbackParams => {\n  const pointData = e.points[0].data\n\n  let facetValue = pointData.y[0] as string\n  let type = pointData.name\n\n  if (swap) {\n    ;[facetValue, type] = [type, facetValue]\n  }\n  return { facetValue, type, event: e.event }\n}\n\nconst renderTopBarLegend = (\n  colors: BarPlotColors | undefined,\n  xLabels: string[],\n) => (\n  <div className=\"ThemesPlot__barPlotLegend\">\n    {xLabels.map((item, i) => (\n      <div style={{ float: 'left' }} key={`topBar_${i}`}>\n        <div\n          className=\"ThemesPlot__barPlotLegend__label\"\n          key=\"topBar_label\"\n          style={{\n            backgroundColor: `${colors ? colors[item] : 'transparent'}`,\n          }}\n        ></div>\n        <div className=\"ThemesPlot__barPlotLegend__graph\" key=\"topBar_graph\">\n          {item}\n        </div>{' '}\n      </div>\n    ))}\n  </div>\n)\n\nconst fadeColors = (colors: { [key: string]: string }, opacity: string) => {\n  for (const key in colors) {\n    colors[key] = colors[key]\n      .replace(',1)', `, ${opacity})`)\n      .replace(',1.0)', `, ${opacity})`)\n  }\n  return colors\n}\n\nconst getTooltip = (data: GraphItem[], filter: string) => {\n  return first(data.filter(item => item.y === filter).map(item => item.info))\n}\n\nexport function ThemesPlot({\n  dotPlot,\n  topBarPlot,\n  sideBarPlot,\n  onPointClick,\n  onIndividualThemeBarPlotPointClick,\n  dotPlotYAxisLabel = 'Research Themes',\n}: ThemesPlotProps) {\n  const { accessToken } = useSynapseContext()\n  const [isLoaded, setIsLoaded] = useState(false)\n  const [dotPlotQueryData, setDotPlotQueryData] = useState<GraphItem[]>([])\n  const [topBarPlotData, setTopBarQueryData] = useState<GraphItem[]>([])\n  const [sideBarPlotData, setSideBarQueryData] = useState<GraphItem[]>([])\n\n  useEffect(() => {\n    const dotPlotData = fetchData(accessToken!, dotPlot)\n    const topBarPlotData = fetchData(accessToken!, topBarPlot)\n    const sideBarPlotData = fetchData(accessToken!, sideBarPlot)\n    Promise.all([dotPlotData, topBarPlotData, sideBarPlotData])\n      .then(result => {\n        setDotPlotQueryData(\n          resultToJson(\n            result[0].headers,\n            result[0].rows,\n          ) as unknown as GraphItem[],\n        )\n        setTopBarQueryData(\n          resultToJson(\n            result[1].headers,\n            result[1].rows,\n          ) as unknown as GraphItem[],\n        )\n        setSideBarQueryData(\n          resultToJson(\n            result[2].headers,\n            result[2].rows,\n          ) as unknown as GraphItem[],\n        )\n        setIsLoaded(true)\n      })\n      .catch(err => {\n        throw err\n      })\n    return () => {}\n  }, [accessToken, dotPlot, topBarPlot, sideBarPlot])\n  let yLabelsForDotPlot: string[] = []\n  let xLabelsForTopBarPlot: string[] = []\n  let xMaxForDotPlot = 0\n  let topBarPlotDataSorted: TotalsGroupByY[] = []\n  let totalsByDotPlotY: TotalsGroupByY[] = []\n  if (isLoaded) {\n    totalsByDotPlotY = getTotalsByProp(sideBarPlotData, 'y')\n    yLabelsForDotPlot = totalsByDotPlotY\n      .sort((a, b) => b.count - a.count)\n      .map(item => item.y)\n    xMaxForDotPlot = Math.max(...dotPlotQueryData.map(item => Number(item.x)))\n    topBarPlotDataSorted = orderBy(getTotalsByProp(topBarPlotData, 'y'), ['y'])\n    xLabelsForTopBarPlot = orderBy(\n      getTotalsByProp<TotalsGroupByGroup>(topBarPlotData, 'group'),\n      ['group'],\n    ).map(item => item.group)\n  }\n\n  return (\n    <>\n      {!isLoaded && loadingScreen}\n\n      {isLoaded && (\n        <div className=\"ThemesPlot\">\n          <div className=\"ThemesPlot__dotPlotLegend\">\n            <DotPlot\n              id=\"head\"\n              plotData={dotPlotQueryData}\n              isLegend={true}\n              markerSymbols={dotPlot.markerSymbols}\n              style={{ width: '100%', height: '100%' }}\n              layoutConfig={dotPlotLayoutConfig}\n              optionsConfig={{\n                ...optionsConfig,\n                responsive: true,\n                staticPlot: true,\n              }}\n              plotStyle={{\n                ...dotPlot.plotStyle!,\n                backgroundColor: 'transparent',\n              }}\n            ></DotPlot>\n          </div>\n          {topBarPlot.colors &&\n            renderTopBarLegend(topBarPlot.colors, xLabelsForTopBarPlot)}\n          {topBarPlotDataSorted.map((item, i) => (\n            <div className=\"ThemesPlot__topBarPlot\" key={`topBarDiv_${i}`}>\n              <div className=\"ThemesPlot__topBarPlot__label\">\n                {item.count}&nbsp;{unCamelCase(item.y)}\n              </div>\n              <div className=\"ThemesPlot__topBarPlot__plot\">\n                <BarPlot\n                  style={{ width: '100%', height: '100%' }}\n                  layoutConfig={cloneDeep(barLayoutConfig)}\n                  optionsConfig={{ ...optionsConfig }}\n                  plotData={topBarPlotData}\n                  isTop={true}\n                  label={item.y}\n                  xMax={item.count}\n                  onClick={(e: any) =>\n                    onPointClick(getClickTargetData(e, true))\n                  }\n                  colors={\n                    // we are not actually fading colors for now. But keeping implemenation in case it changes\n                    i % 2 === 0\n                      ? topBarPlot.colors\n                      : fadeColors({ ...topBarPlot.colors }, '1')\n                  }\n                />\n              </div>\n            </div>\n          ))}\n          <div style={{ display: 'flex', position: 'relative' }}>\n            <div className=\"ThemesPlot__dotPlotYLabel\">{dotPlotYAxisLabel}</div>\n            <div className=\"ThemesPlot__dotPlot\">\n              {yLabelsForDotPlot.map((label, i) => (\n                <div\n                  key={`plotDiv_${+i}`}\n                  className=\"ThemesPlot__dotPlot__row\"\n                  style={{\n                    backgroundColor: dotPlot.plotStyle?.backgroundColor,\n                  }}\n                >\n                  <div className=\"ThemesPlot__dotPlot__barColumn\">\n                    <Tooltip\n                      title={`${getTooltip(dotPlotQueryData, label)} `}\n                      placement={'right'}\n                    >\n                      <div>\n                        <span className=\"ThemesPlot__dotPlot__themeLabel\">\n                          {label}\n                        </span>\n                        <br />\n                        <span className=\"ThemesPlot__dotPlot__countLabel\">\n                          {totalsByDotPlotY[i].count} {sideBarPlot.countLabel}\n                        </span>\n                        <br />\n                        <BarPlot\n                          style={{ width: '100%' }}\n                          layoutConfig={barLayoutConfig}\n                          optionsConfig={optionsConfig}\n                          plotData={sideBarPlotData}\n                          isTop={false}\n                          // PORTALS-3061: No longer use a global x max for the side bar (where the bar size of 1 grant is consistent),\n                          //    Instead, each bar chart is independent (the size of 1 grant differs across bar charts).\n                          xMax={totalsByDotPlotY[i].count}\n                          label={label}\n                          colors={fadeColors({ ...topBarPlot.colors }, '1')}\n                          onClick={(e: any) => {\n                            if (onIndividualThemeBarPlotPointClick) {\n                              onIndividualThemeBarPlotPointClick(\n                                getClickTargetData(e, false),\n                              )\n                            }\n                          }}\n                        />\n                      </div>\n                    </Tooltip>\n                  </div>\n                  <div className=\"ThemesPlot__dotPlot__dotPlotColumn\">\n                    <div\n                      style={{\n                        width: '100%',\n                        backgroundColor: dotPlot.plotStyle?.backgroundColor,\n                      }}\n                    >\n                      <DotPlot\n                        id={`${i}`}\n                        onClick={(e: any) => {\n                          const { type, event } = getClickTargetData(e, false)\n                          onPointClick({ facetValue: label, type, event })\n                        }}\n                        plotData={dotPlotQueryData}\n                        plotStyle={dotPlot.plotStyle}\n                        markerSymbols={dotPlot.markerSymbols}\n                        xMax={xMaxForDotPlot}\n                        label={label}\n                        layoutConfig={dotPlotLayoutConfig}\n                        optionsConfig={{\n                          ...optionsConfig,\n                          responsive: false,\n                        }}\n                      ></DotPlot>\n                    </div>\n                  </div>\n                </div>\n              ))}\n              <div className=\"ThemesPlot__dotPlot__row\">\n                <div\n                  className=\"ThemesPlot__dotPlot__barColumn\"\n                  style={{ textAlign: 'right' }}\n                >\n                  VOLUME:\n                </div>\n                <div\n                  className=\"ThemesPlot__dotPlot__dotPlotColumn\"\n                  style={{ marginTop: '0px' }}\n                >\n                  <DotPlot\n                    id={'footer'}\n                    plotData={dotPlotQueryData}\n                    isXAxis={true}\n                    xMax={xMaxForDotPlot}\n                    layoutConfig={dotPlotLayoutConfig}\n                    optionsConfig={{ ...optionsConfig, responsive: false }}\n                  ></DotPlot>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div></div>\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default ThemesPlot\n"],"mappings":"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"}