synapse-react-client 4.0.20 → 4.0.22

package/dist/components/Goals/Goals.js

@@ -1,53 +1,59 @@
 import "../../utils/SynapseConstants.js";
-import { ErrorBanner as e } from "../error/ErrorBanner.js";
-import t from "../../utils/hooks/useShowDesktop.js";
+import e from "../../synapse-client/index.js";
+import { ErrorBanner as t } from "../error/ErrorBanner.js";
+import { KeyFactory as n } from "../../synapse-queries/KeyFactory.js";
+import r from "../../utils/hooks/useShowDesktop.js";
 import "../../utils/index.js";
-import { getFieldIndex as n } from "../../utils/functions/queryUtils.js";
-import r from "../../synapse-queries/entity/useGetQueryResultBundle.js";
-import i from "../../utils/hooks/useGetGoalData.js";
-import a from "./Goals.Desktop.js";
-import o from "./Goals.Mobile.js";
-import { useMemo as s } from "react";
-import { Box as c } from "@mui/material";
-import { Fragment as l, jsx as u } from "react/jsx-runtime";
+import { getFieldIndex as i } from "../../utils/functions/queryUtils.js";
+import a, { tableQueryUseQueryDefaults as o } from "../../synapse-queries/entity/useGetQueryResultBundle.js";
+import s from "../../utils/hooks/useGetGoalData.js";
+import c from "./Goals.Desktop.js";
+import l from "./Goals.Mobile.js";
+import { useMemo as u } from "react";
+import { Box as d } from "@mui/material";
+import { Fragment as f, jsx as p } from "react/jsx-runtime";
 //#region src/components/Goals/Goals.tsx
-var d = 1200;
-function f(f) {
-	let { entityId: p, isAssetIcon: m = !1, linkText: h, itemsPerRow: g = 3 } = f, _ = t(d), { data: v } = r({
+var m = 1200;
+function h(e) {
+	return {
 		concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
-		entityId: p,
+		entityId: e,
 		partMask: 5,
 		query: { sql: `select *
-            from ${p}
+            from ${e}
             order by ItemOrder` }
-	}), { assets: y, error: b } = i(p, v), x = n("TableId", v), S = n("CountSql", v), C = n("Title", v), w = n("Summary", v), T = n("Link", v), E = s(() => v?.queryResult.queryResults.rows.map((e, t) => {
+	};
+}
+function g(e) {
+	let { entityId: n, isAssetIcon: o = !1, linkText: g, itemsPerRow: _ = 3 } = e, v = r(m), { data: y } = a(h(n)), { assets: b, error: x } = s(n, y), S = i("TableId", y), C = i("CountSql", y), w = i("Title", y), T = i("Summary", y), E = i("Link", y), D = u(() => y?.queryResult.queryResults.rows.map((e, t) => {
 		let n = e.values;
 		n.some((e) => e === null) && console.warn("Row has null value(s) when no nulls expected");
-		let r = x > -1 ? n[x] : void 0, i;
-		S > -1 && n[S] ? i = n[S] : r && (i = `SELECT * FROM ${r}`);
-		let a = n[C], o = n[w], s = n[T], c = y?.[t] ?? "";
+		let r = S > -1 ? n[S] : void 0, i;
+		C > -1 && n[C] ? i = n[C] : r && (i = `SELECT * FROM ${r}`);
+		let a = n[w], s = n[T], c = n[E], l = b?.[t] ?? "";
 		return {
 			countSql: i,
 			title: a,
-			summary: o,
-			link: s,
-			asset: c,
-			isAssetIcon: m
+			summary: s,
+			link: c,
+			asset: l,
+			isAssetIcon: o
 		};
 	}), [
-		S,
-		y,
+		C,
+		b,
+		o,
+		E,
+		y?.queryResult,
 		T,
-		v?.queryResult,
-		w,
-		x,
-		C
+		S,
+		w
 	]);
-	if (b) return /* @__PURE__ */ u(e, { error: b });
-	if (!E) return /* @__PURE__ */ u(l, {});
-	if (_) {
-		let e = `calc((100% - ${g * 20 + (g - 1) * 7}px) / ${g} - 0.5px)`;
-		return /* @__PURE__ */ u(c, {
+	if (x) return /* @__PURE__ */ p(t, { error: x });
+	if (!D) return /* @__PURE__ */ p(f, {});
+	if (v) {
+		let e = `calc((100% - ${_ * 20 + (_ - 1) * 7}px) / ${_} - 0.5px)`;
+		return /* @__PURE__ */ p(d, {
 			className: "Goals",
 			sx: {
 				display: "flex",
@@ -56,21 +62,29 @@ function f(f) {
 				justifyContent: "center",
 				alignItems: "stretch"
 			},
-			children: E.map((t, n) => /* @__PURE__ */ u(a, {
+			children: D.map((t, n) => /* @__PURE__ */ p(c, {
 				...t,
-				linkText: h,
+				linkText: g,
 				cardWidth: e
 			}, n))
 		});
-	} else return /* @__PURE__ */ u("div", {
+	} else return /* @__PURE__ */ p("div", {
 		className: "Goals",
-		children: E.map((e, t) => /* @__PURE__ */ u(o, {
+		children: D.map((e, t) => /* @__PURE__ */ p(l, {
 			...e,
-			linkText: h
+			linkText: g
 		}, t))
 	});
 }
+async function _(t, r) {
+	let i = new n(void 0), a = h(r);
+	await t.prefetchQuery({
+		...o,
+		queryKey: i.getEntityTableQueryResultQueryKey(a, !1),
+		queryFn: () => e.getQueryTableResults(a, void 0)
+	});
+}
 //#endregion
-export { f as Goals, f as default };
+export { g as Goals, g as default, h as buildGoalsQueryBundleRequest, _ as prefetchGoals };
 
 //# sourceMappingURL=Goals.js.map

package/dist/components/Goals/Goals.js.map

@@ -1 +1 @@
-{"version":3,"file":"Goals.js","names":[],"sources":["../../../src/components/Goals/Goals.tsx"],"sourcesContent":["import useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { SynapseConstants } from '@/utils'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport useGetGoalData from '@/utils/hooks/useGetGoalData'\nimport useShowDesktop from '@/utils/hooks/useShowDesktop'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport { useMemo } from 'react'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport GoalsDesktop from './Goals.Desktop'\nimport GoalsMobile from './Goals.Mobile'\nimport { Box } from '@mui/material'\n\nexport type GoalsProps = {\n  entityId: string\n  isAssetIcon?: boolean // If true, the asset will be used as an icon instead of a background image.\n  linkText?: string\n  itemsPerRow?: number\n}\n\nexport type GoalsDataProps = {\n  countSql?: string\n  title: string\n  summary: string\n  link: string\n  asset: string\n  isAssetIcon: boolean\n  linkText?: string\n}\n\nenum ExpectedColumns {\n  TABLEID = 'TableId', // Both TableId or CountSql are used to indicate what Table rows to count.\n  COUNT_SQL = 'CountSql', // Code uses CountSql over TableId if defined (if the CountSql column is in the schema and filled in).\n  TITLE = 'Title',\n  SUMMARY = 'Summary',\n  LINK = 'Link',\n  ASSET = 'Asset',\n}\n\n// PORTALS-2367\nconst GOALS_DESKTOP_MIN_BREAKPOINT = 1200\n\nexport function Goals(props: GoalsProps) {\n  const { entityId, isAssetIcon = false, linkText, itemsPerRow = 3 } = props\n  const showDesktop = useShowDesktop(GOALS_DESKTOP_MIN_BREAKPOINT)\n  const queryBundleRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    entityId,\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    query: {\n      sql: `select *\n            from ${entityId}\n            order by ItemOrder`,\n    },\n  }\n  const { data: queryResultBundle } =\n    useGetQueryResultBundle(queryBundleRequest)\n\n  const { assets: goalAssets, error: goalError } = useGetGoalData(\n    entityId,\n    queryResultBundle,\n  )\n\n  const tableIdColumnIndex = getFieldIndex(\n    ExpectedColumns.TABLEID,\n    queryResultBundle,\n  )\n  const countSqlColumnIndex = getFieldIndex(\n    ExpectedColumns.COUNT_SQL,\n    queryResultBundle,\n  )\n\n  const titleColumnIndex = getFieldIndex(\n    ExpectedColumns.TITLE,\n    queryResultBundle,\n  )\n  const summaryColumnIndex = getFieldIndex(\n    ExpectedColumns.SUMMARY,\n    queryResultBundle,\n  )\n  const linkColumnIndex = getFieldIndex(ExpectedColumns.LINK, queryResultBundle)\n\n  const goalsDataProps = useMemo(() => {\n    return queryResultBundle?.queryResult!.queryResults.rows.map(\n      (el, index): GoalsDataProps => {\n        const values = el.values as string[]\n        if (values.some(value => value === null)) {\n          // We cast values above assuming there are no null values, emit a warning just in case.\n          console.warn('Row has null value(s) when no nulls expected')\n        }\n        const tableId =\n          tableIdColumnIndex > -1 ? values[tableIdColumnIndex] : undefined\n        let countSql\n        if (countSqlColumnIndex > -1 && values[countSqlColumnIndex]) {\n          countSql = values[countSqlColumnIndex]\n        } else if (tableId) {\n          countSql = `SELECT * FROM ${tableId}`\n        }\n        const title = values[titleColumnIndex]\n        const summary = values[summaryColumnIndex]\n        const link = values[linkColumnIndex]\n        // assume that we recieve assets in order of rows and there is an asset for each item\n        // can revisit if this isn't the case.\n        const asset = goalAssets?.[index] ?? ''\n        return {\n          countSql,\n          title,\n          summary,\n          link,\n          asset,\n          isAssetIcon,\n        }\n      },\n    )\n  }, [\n    countSqlColumnIndex,\n    goalAssets,\n    linkColumnIndex,\n    queryResultBundle?.queryResult,\n    summaryColumnIndex,\n    tableIdColumnIndex,\n    titleColumnIndex,\n  ])\n\n  if (goalError) {\n    return <ErrorBanner error={goalError} />\n  }\n\n  if (!goalsDataProps) {\n    return <></>\n  }\n\n  if (showDesktop) {\n    // Each card has margin:10px (20px horizontal) from .Goals__Card CSS.\n    // flex-basis must be the content width only; total row = N*(flex-basis+20) + (N-1)*gap.\n    // Subtract 0.5px epsilon to absorb sub-pixel rounding and prevent wrapping.\n    const horizontalMarginPerCard = 20\n    const cardWidth = `calc((100% - ${\n      itemsPerRow * horizontalMarginPerCard + (itemsPerRow - 1) * 7\n    }px) / ${itemsPerRow} - 0.5px)`\n    return (\n      <Box\n        className={`Goals`}\n        sx={{\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: '7px',\n          justifyContent: 'center',\n          alignItems: 'stretch',\n        }}\n      >\n        {goalsDataProps.map((props, index) => (\n          <GoalsDesktop\n            key={index}\n            {...props}\n            linkText={linkText}\n            cardWidth={cardWidth}\n          />\n        ))}\n      </Box>\n    )\n  } else {\n    return (\n      <div className={`Goals`}>\n        {goalsDataProps.map((props, index) => (\n          <GoalsMobile key={index} {...props} linkText={linkText} />\n        ))}\n      </div>\n    )\n  }\n}\nexport default Goals\n"],"mappings":";;;;;;;;;;;;;AAuCA,IAAM,IAA+B;AAErC,SAAgB,EAAM,GAAmB;CACvC,IAAM,EAAE,aAAU,iBAAc,IAAO,aAAU,iBAAc,MAAM,GAC/D,IAAc,EAAe,CAA4B,GAazD,EAAE,MAAM,MACZ,EAAwB;EAZxB,cAAc;EACd;EACA,UACE;EAEF,OAAO,EACL,KAAK;mBACQ,EAAS;gCAExB;CAGwB,CAAkB,GAEtC,EAAE,QAAQ,GAAY,OAAO,MAAc,EAC/C,GACA,CACF,GAEM,IAAqB,EAAA,WAEzB,CACF,GACM,IAAsB,EAAA,YAE1B,CACF,GAEM,IAAmB,EAAA,SAEvB,CACF,GACM,IAAqB,EAAA,WAEzB,CACF,GACM,IAAkB,EAAA,QAAoC,CAAiB,GAEvE,IAAiB,QACd,GAAmB,YAAa,aAAa,KAAK,KACtD,GAAI,MAA0B;EAC7B,IAAM,IAAS,EAAG;EAClB,AAAI,EAAO,MAAK,MAAS,MAAU,IAAI,KAErC,QAAQ,KAAK,8CAA8C;EAE7D,IAAM,IACJ,IAAqB,KAAK,EAAO,KAAsB,KAAA,GACrD;EACJ,AAAI,IAAsB,MAAM,EAAO,KACrC,IAAW,EAAO,KACT,MACT,IAAW,iBAAiB;EAE9B,IAAM,IAAQ,EAAO,IACf,IAAU,EAAO,IACjB,IAAO,EAAO,IAGd,IAAQ,IAAa,MAAU;EACrC,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF;CACF,CACF,GACC;EACD;EACA;EACA;EACA,GAAmB;EACnB;EACA;EACA;CACF,CAAC;CAED,IAAI,GACF,OAAO,kBAAC,GAAD,EAAa,OAAO,EAAY,CAAA;CAGzC,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAGb,IAAI,GAAa;EAKf,IAAM,IAAY,gBAChB,IAAc,MAA2B,IAAc,KAAK,EAC7D,QAAQ,EAAY;EACrB,OACE,kBAAC,GAAD;GACE,WAAW;GACX,IAAI;IACF,SAAS;IACT,UAAU;IACV,KAAK;IACL,gBAAgB;IAChB,YAAY;GACd;aAEC,EAAe,KAAK,GAAO,MAC1B,kBAAC,GAAD;IAEE,GAAI;IACM;IACC;GACZ,GAJM,CAIN,CACF;EACE,CAAA;CAET,OACE,OACE,kBAAC,OAAD;EAAK,WAAW;YACb,EAAe,KAAK,GAAO,MAC1B,kBAAC,GAAD;GAAyB,GAAI;GAAiB;EAAW,GAAvC,CAAuC,CAC1D;CACE,CAAA;AAGX"}
+{"version":3,"file":"Goals.js","names":[],"sources":["../../../src/components/Goals/Goals.tsx"],"sourcesContent":["import SynapseClient from '@/synapse-client'\nimport useGetQueryResultBundle, {\n  tableQueryUseQueryDefaults,\n} from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { KeyFactory } from '@/synapse-queries/KeyFactory'\nimport { SynapseConstants } from '@/utils'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport useGetGoalData from '@/utils/hooks/useGetGoalData'\nimport useShowDesktop from '@/utils/hooks/useShowDesktop'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport { QueryClient } from '@tanstack/react-query'\nimport { useMemo } from 'react'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport GoalsDesktop from './Goals.Desktop'\nimport GoalsMobile from './Goals.Mobile'\nimport { Box } from '@mui/material'\n\nexport type GoalsProps = {\n  entityId: string\n  isAssetIcon?: boolean // If true, the asset will be used as an icon instead of a background image.\n  linkText?: string\n  itemsPerRow?: number\n}\n\nexport type GoalsDataProps = {\n  countSql?: string\n  title: string\n  summary: string\n  link: string\n  asset: string\n  isAssetIcon: boolean\n  linkText?: string\n}\n\nenum ExpectedColumns {\n  TABLEID = 'TableId', // Both TableId or CountSql are used to indicate what Table rows to count.\n  COUNT_SQL = 'CountSql', // Code uses CountSql over TableId if defined (if the CountSql column is in the schema and filled in).\n  TITLE = 'Title',\n  SUMMARY = 'Summary',\n  LINK = 'Link',\n  ASSET = 'Asset',\n}\n\n// PORTALS-2367\nconst GOALS_DESKTOP_MIN_BREAKPOINT = 1200\n\nexport function buildGoalsQueryBundleRequest(\n  entityId: string,\n): QueryBundleRequest {\n  return {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    entityId,\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    query: {\n      sql: `select *\n            from ${entityId}\n            order by ItemOrder`,\n    },\n  }\n}\n\nexport function Goals(props: GoalsProps) {\n  const { entityId, isAssetIcon = false, linkText, itemsPerRow = 3 } = props\n  const showDesktop = useShowDesktop(GOALS_DESKTOP_MIN_BREAKPOINT)\n  const queryBundleRequest = buildGoalsQueryBundleRequest(entityId)\n  const { data: queryResultBundle } =\n    useGetQueryResultBundle(queryBundleRequest)\n\n  const { assets: goalAssets, error: goalError } = useGetGoalData(\n    entityId,\n    queryResultBundle,\n  )\n\n  const tableIdColumnIndex = getFieldIndex(\n    ExpectedColumns.TABLEID,\n    queryResultBundle,\n  )\n  const countSqlColumnIndex = getFieldIndex(\n    ExpectedColumns.COUNT_SQL,\n    queryResultBundle,\n  )\n\n  const titleColumnIndex = getFieldIndex(\n    ExpectedColumns.TITLE,\n    queryResultBundle,\n  )\n  const summaryColumnIndex = getFieldIndex(\n    ExpectedColumns.SUMMARY,\n    queryResultBundle,\n  )\n  const linkColumnIndex = getFieldIndex(ExpectedColumns.LINK, queryResultBundle)\n\n  const goalsDataProps = useMemo(() => {\n    return queryResultBundle?.queryResult!.queryResults.rows.map(\n      (el, index): GoalsDataProps => {\n        const values = el.values as string[]\n        if (values.some(value => value === null)) {\n          // We cast values above assuming there are no null values, emit a warning just in case.\n          console.warn('Row has null value(s) when no nulls expected')\n        }\n        const tableId =\n          tableIdColumnIndex > -1 ? values[tableIdColumnIndex] : undefined\n        let countSql\n        if (countSqlColumnIndex > -1 && values[countSqlColumnIndex]) {\n          countSql = values[countSqlColumnIndex]\n        } else if (tableId) {\n          countSql = `SELECT * FROM ${tableId}`\n        }\n        const title = values[titleColumnIndex]\n        const summary = values[summaryColumnIndex]\n        const link = values[linkColumnIndex]\n        // assume that we recieve assets in order of rows and there is an asset for each item\n        // can revisit if this isn't the case.\n        const asset = goalAssets?.[index] ?? ''\n        return {\n          countSql,\n          title,\n          summary,\n          link,\n          asset,\n          isAssetIcon,\n        }\n      },\n    )\n  }, [\n    countSqlColumnIndex,\n    goalAssets,\n    isAssetIcon,\n    linkColumnIndex,\n    queryResultBundle?.queryResult,\n    summaryColumnIndex,\n    tableIdColumnIndex,\n    titleColumnIndex,\n  ])\n\n  if (goalError) {\n    return <ErrorBanner error={goalError} />\n  }\n\n  if (!goalsDataProps) {\n    return <></>\n  }\n\n  if (showDesktop) {\n    // Each card has margin:10px (20px horizontal) from .Goals__Card CSS.\n    // flex-basis must be the content width only; total row = N*(flex-basis+20) + (N-1)*gap.\n    // Subtract 0.5px epsilon to absorb sub-pixel rounding and prevent wrapping.\n    const horizontalMarginPerCard = 20\n    const cardWidth = `calc((100% - ${\n      itemsPerRow * horizontalMarginPerCard + (itemsPerRow - 1) * 7\n    }px) / ${itemsPerRow} - 0.5px)`\n    return (\n      <Box\n        className={`Goals`}\n        sx={{\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: '7px',\n          justifyContent: 'center',\n          alignItems: 'stretch',\n        }}\n      >\n        {goalsDataProps.map((props, index) => (\n          <GoalsDesktop\n            key={index}\n            {...props}\n            linkText={linkText}\n            cardWidth={cardWidth}\n          />\n        ))}\n      </Box>\n    )\n  } else {\n    return (\n      <div className={`Goals`}>\n        {goalsDataProps.map((props, index) => (\n          <GoalsMobile key={index} {...props} linkText={linkText} />\n        ))}\n      </div>\n    )\n  }\n}\nexport default Goals\n\n/**\n * Prefetches the Goals table query into a QueryClient for use with HydrationBoundary.\n * Uses anonymous access; warm-caches for unauthenticated users.\n */\nexport async function prefetchGoals(\n  queryClient: QueryClient,\n  entityId: string,\n): Promise<void> {\n  const keyFactory = new KeyFactory(undefined)\n  const queryBundleRequest = buildGoalsQueryBundleRequest(entityId)\n  await queryClient.prefetchQuery({\n    ...tableQueryUseQueryDefaults,\n    queryKey: keyFactory.getEntityTableQueryResultQueryKey(\n      queryBundleRequest,\n      false,\n    ),\n    queryFn: () =>\n      SynapseClient.getQueryTableResults(queryBundleRequest, undefined),\n  })\n}\n"],"mappings":";;;;;;;;;;;;;;;AA4CA,IAAM,IAA+B;AAErC,SAAgB,EACd,GACoB;CACpB,OAAO;EACL,cAAc;EACd;EACA,UACE;EAEF,OAAO,EACL,KAAK;mBACQ,EAAS;gCAExB;CACF;AACF;AAEA,SAAgB,EAAM,GAAmB;CACvC,IAAM,EAAE,aAAU,iBAAc,IAAO,aAAU,iBAAc,MAAM,GAC/D,IAAc,EAAe,CAA4B,GAEzD,EAAE,MAAM,MACZ,EAFyB,EAA6B,CAE9B,CAAkB,GAEtC,EAAE,QAAQ,GAAY,OAAO,MAAc,EAC/C,GACA,CACF,GAEM,IAAqB,EAAA,WAEzB,CACF,GACM,IAAsB,EAAA,YAE1B,CACF,GAEM,IAAmB,EAAA,SAEvB,CACF,GACM,IAAqB,EAAA,WAEzB,CACF,GACM,IAAkB,EAAA,QAAoC,CAAiB,GAEvE,IAAiB,QACd,GAAmB,YAAa,aAAa,KAAK,KACtD,GAAI,MAA0B;EAC7B,IAAM,IAAS,EAAG;EAClB,AAAI,EAAO,MAAK,MAAS,MAAU,IAAI,KAErC,QAAQ,KAAK,8CAA8C;EAE7D,IAAM,IACJ,IAAqB,KAAK,EAAO,KAAsB,KAAA,GACrD;EACJ,AAAI,IAAsB,MAAM,EAAO,KACrC,IAAW,EAAO,KACT,MACT,IAAW,iBAAiB;EAE9B,IAAM,IAAQ,EAAO,IACf,IAAU,EAAO,IACjB,IAAO,EAAO,IAGd,IAAQ,IAAa,MAAU;EACrC,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF;CACF,CACF,GACC;EACD;EACA;EACA;EACA;EACA,GAAmB;EACnB;EACA;EACA;CACF,CAAC;CAED,IAAI,GACF,OAAO,kBAAC,GAAD,EAAa,OAAO,EAAY,CAAA;CAGzC,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAGb,IAAI,GAAa;EAKf,IAAM,IAAY,gBAChB,IAAc,MAA2B,IAAc,KAAK,EAC7D,QAAQ,EAAY;EACrB,OACE,kBAAC,GAAD;GACE,WAAW;GACX,IAAI;IACF,SAAS;IACT,UAAU;IACV,KAAK;IACL,gBAAgB;IAChB,YAAY;GACd;aAEC,EAAe,KAAK,GAAO,MAC1B,kBAAC,GAAD;IAEE,GAAI;IACM;IACC;GACZ,GAJM,CAIN,CACF;EACE,CAAA;CAET,OACE,OACE,kBAAC,OAAD;EAAK,WAAW;YACb,EAAe,KAAK,GAAO,MAC1B,kBAAC,GAAD;GAAyB,GAAI;GAAiB;EAAW,GAAvC,CAAuC,CAC1D;CACE,CAAA;AAGX;AAOA,eAAsB,EACpB,GACA,GACe;CACf,IAAM,IAAa,IAAI,EAAW,KAAA,CAAS,GACrC,IAAqB,EAA6B,CAAQ;CAChE,MAAM,EAAY,cAAc;EAC9B,GAAG;EACH,UAAU,EAAW,kCACnB,GACA,EACF;EACA,eACE,EAAc,qBAAqB,GAAoB,KAAA,CAAS;CACpE,CAAC;AACH"}

package/dist/components/Plot/SynapseSankeyPlot.css

@@ -0,0 +1 @@
+._root_244go_1{opacity:0;width:100%;margin-top:48px;transition:opacity .6s}._rootVisible_244go_8{opacity:1}._title_244go_12{text-align:center;margin-bottom:12px;font-size:20px;font-weight:600}._svg_244go_19{outline:none;width:100%;height:auto;margin:0 auto;display:block;overflow:visible}._ribbon_244go_28{transition:stroke-opacity .25s,stroke-width .25s}._node_244go_32{transition:fill-opacity .25s}._categoryLabel_244go_36{transition:opacity .2s}._tabularNums_244go_40{font-variant-numeric:tabular-nums}._haloText_244go_44{paint-order:stroke;stroke-width:3px;stroke-linejoin:round}@media (prefers-reduced-motion:reduce){._root_244go_1{transition:none}}

package/dist/components/Plot/SynapseSankeyPlot.d.ts

@@ -1,11 +1,53 @@
 import React from 'react';
 export type SynapseSankeyPlotProps = {
-    /** SQL query whose first column provides node labels and second column provides link values */
+    /** SQL query providing the node labels and link values (see labelColumn/valueColumn) */
     sql: string;
-    /** Label for the root node that links to every row returned by the query */
+    /** Label for the left end node that links to every row returned by the query */
     rootLabel: string;
     /** Optional plot title */
     title?: string;
+    /**
+     * Column supplying each category's label. Either a column name (matched
+     * against the query result headers) or a zero-based index. Defaults to the
+     * first column.
+     */
+    labelColumn?: string | number;
+    /**
+     * Column supplying each link's value. Either a column name or a zero-based
+     * index. Defaults to the second column.
+     */
+    valueColumn?: string | number;
+    /**
+     * Noun for the left end total caption, e.g. "datasets" renders
+     * "datasets total". Defaults to "items".
+     */
+    unitLabel?: string;
+    /**
+     * Phrase describing the breakdown, used in the chart's accessible label,
+     * e.g. "by source" renders "All Datasets broken down by source".
+     */
+    breakdownLabel?: string;
+    /**
+     * Invoked with a category's label when its left flow, center node, or label
+     * is clicked. When provided, those become interactive (pointer cursor).
+     */
+    onCategoryClick?: (categoryLabel: string) => void;
+    /** Invoked when the left end node (rootLabel) is clicked. */
+    onRootClick?: () => void;
+    /**
+     * Enables "butterfly" mode: a second value per category drawn as a mirrored
+     * flow from each center node to a right end node. Either a column name or a
+     * zero-based index (defaults to the third column when a right end is shown).
+     */
+    rightValueColumn?: string | number;
+    /** Label for the right end node (butterfly mode). Defaults to "Files". */
+    rightLabel?: string;
+    /** Noun for the right end total caption, e.g. "files". Defaults to "items". */
+    rightUnitLabel?: string;
+    /** Invoked with a category's label when its right flow is clicked. */
+    onRightCategoryClick?: (categoryLabel: string) => void;
+    /** Invoked when the right end node (rightLabel) is clicked. */
+    onRightEndClick?: () => void;
 };
 export declare const SynapseSankeyPlot: (props: SynapseSankeyPlotProps) => React.ReactNode;
 export default SynapseSankeyPlot;

package/dist/components/Plot/SynapseSankeyPlot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SynapseSankeyPlot.d.ts","sourceRoot":"","sources":["../../../src/components/Plot/SynapseSankeyPlot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,MAAM,sBAAsB,GAAG;IACnC,+FAA+F;IAC/F,GAAG,EAAE,MAAM,CAAA;IACX,4EAA4E;IAC5E,SAAS,EAAE,MAAM,CAAA;IACjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,iBAAiB,GAC5B,OAAO,sBAAsB,KAC5B,KAAK,CAAC,SA4ER,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"SynapseSankeyPlot.d.ts","sourceRoot":"","sources":["../../../src/components/Plot/SynapseSankeyPlot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAA;AAe1E,MAAM,MAAM,sBAAsB,GAAG;IACnC,wFAAwF;IACxF,GAAG,EAAE,MAAM,CAAA;IACX,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAA;IACjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAClC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sEAAsE;IACtE,oBAAoB,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,+DAA+D;IAC/D,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CAC7B,CAAA;AAiPD,eAAO,MAAM,iBAAiB,GAC5B,OAAO,sBAAsB,KAC5B,KAAK,CAAC,SAibR,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/components/Plot/SynapseSankeyPlot.js

@@ -3,52 +3,357 @@ import { parseEntityIdFromSqlStatement as e } from "../../utils/functions/SqlFun
 import "../../utils/index.js";
 import { useGetFullTableQueryResults as t } from "../../synapse-queries/entity/useGetQueryResultBundle.js";
 import "../../synapse-queries/index.js";
-import { PlotFullBundle as n } from "./Plot.js";
-import "react";
-import { Skeleton as r } from "@mui/material";
-import { Fragment as i, jsx as a } from "react/jsx-runtime";
+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 o = (o) => {
-	let { sql: s, rootLabel: c, title: l } = o, { data: u, isLoading: d } = t({
+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(s),
-		query: { sql: s }
-	});
-	if (d) return /* @__PURE__ */ a(r, {
+		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 (!u) return /* @__PURE__ */ a(i, {});
-	let f = u.queryResult?.queryResults.rows ?? [];
-	if (f.length === 0) return /* @__PURE__ */ a(i, {});
-	let p = [], m = [], h = [];
-	f.forEach((e, t) => {
-		h.push(Number(e.values[1] ?? 0)), p.push(0), m.push(t + 1);
-	});
-	let g = [`${c}<br>n=${h.reduce((e, t) => e + t, 0)}`];
-	return f.forEach((e) => {
-		let t = e.values[0] ?? "", n = Number(e.values[1] ?? 0);
-		g.push(`${t}<br>n=${n}`);
-	}), /* @__PURE__ */ a(n, {
-		style: {
-			width: "100%",
-			height: "450px"
-		},
-		layout: { title: l },
-		data: [{
-			type: "sankey",
-			node: { label: g },
-			link: {
-				source: p,
-				target: m,
-				value: h
-			}
-		}],
-		config: { displayModeBar: !1 }
+	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 { o as SynapseSankeyPlot, o as default };
+export { D as SynapseSankeyPlot, D as default };
 
 //# sourceMappingURL=SynapseSankeyPlot.js.map