synapse-react-client 4.0.38 → 4.0.41

package/dist/components/DataExplorer/DataExplorer.css

@@ -1 +1 @@
-._dataExplorerTitle_1ezpn_1.MuiTypography-root{color:var(--data-explorer-title-color,var(--synapse-primary-action-color));font-size:36px;line-height:40px}._dataExplorerSubtitle_1ezpn_7.MuiTypography-root{line-height:140%}@media (width>=1024px){._dataExplorerButton_1ezpn_12{width:fit-content}}._dataExplorerTextContainer_1ezpn_17{gap:16px}@media (width>=1024px){._dataExplorerTextContainer_1ezpn_17{flex:0 0 30%;max-width:30%}}._dataExplorerContainer_1ezpn_27{flex-direction:column;flex:1 0 0;align-items:flex-start;gap:60px;padding:40px 0;display:flex}@media (width>=1024px){._dataExplorerContainer_1ezpn_27{flex-direction:row}}._dataContainer_1ezpn_41{flex:60%;grid-template-rows:repeat(9,fit-content(100%));grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;display:inline-grid}._dataRowTitle_1ezpn_51{color:var(--synapse-primary-action-color,#4d558d);overflow-wrap:break-word;word-break:break-word;flex:0 auto;min-width:0;font-size:16px;font-weight:400;line-height:26.4px}@media (width>=1024px){._dataRowTitle_1ezpn_51{font-size:19.8px}}._dataRowInner_1ezpn_67{flex:1;justify-content:space-between;align-items:center;min-width:0;display:flex}._dataRow_1ezpn_51{border:1px solid #0000;border-radius:3.3px;justify-content:space-between;justify-self:stretch;align-items:center;gap:17.6px;min-height:66.6px;padding:8.8px 26.4px;transition:background-color .2s,border-color .2s,box-shadow .2s,transform .2s;display:flex;position:relative;text-decoration:none!important}._dataRow_1ezpn_51:hover{z-index:1;background-color:#fff;border-color:#e1e1e1;transform:scale(1.1);box-shadow:0 4px 8px #0000001a}._dataRow_1ezpn_51:hover ._viewCta_1ezpn_96{opacity:1;pointer-events:auto}._dataRowLeft_1ezpn_101{flex:1;align-items:center;gap:16px;min-width:0;display:inline-flex}._iconContainer_1ezpn_109{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:49px;height:49px;display:flex}._dataRowNamePill_1ezpn_119{flex:1 1 0;align-items:center;gap:8px;min-width:0;display:flex}._facetCount_1ezpn_127{color:#787090;border:1px solid #d8d5e0;border-radius:80px;flex-shrink:0;justify-content:center;align-items:center;gap:10px;padding:4px 8px;font-size:14px;font-weight:400;line-height:24px;display:flex}._viewCta_1ezpn_96{opacity:0;white-space:nowrap;color:var(--synapse-primary-action-color,#4d558d);background:linear-gradient(90deg,#0000,#fff 25% 100%);border-radius:0 2px 2px 0;align-items:center;gap:4px;padding-left:40px;padding-right:26.4px;transition:opacity .2s;display:inline-flex;position:absolute;top:0;bottom:0;right:0}._viewCtaText_1ezpn_160{color:var(--synapse-primary-action-color,#4d558d);font-size:16px;font-weight:400;line-height:26.4px}._viewCtaIcon_1ezpn_167.MuiSvgIcon-root{color:var(--synapse-primary-action-color,#5a488f);font-size:24px}
+._dataExplorerTitle_1d57f_1.MuiTypography-root{color:var(--data-explorer-title-color,var(--synapse-primary-action-color));font-size:36px;line-height:40px}._dataExplorerSubtitle_1d57f_7.MuiTypography-root{line-height:140%}@media (width>=1024px){._dataExplorerButton_1d57f_12{width:fit-content}}._dataExplorerTextContainer_1d57f_17{gap:16px}@media (width>=1024px){._dataExplorerTextContainer_1d57f_17{flex:0 0 30%;max-width:30%}}._dataExplorerContainer_1d57f_27{flex-direction:column;flex:1 0 0;align-items:flex-start;gap:20px;padding:40px 0;display:flex}@media (width>=1024px){._dataExplorerContainer_1d57f_27{flex-direction:row;gap:60px}}._dataContainer_1d57f_42{flex:60%;grid-template-rows:repeat(9,fit-content(100%));grid-template-columns:minmax(0,1fr);align-self:stretch;gap:8px;width:100%;min-width:0;display:grid}@media (width>=1024px){._dataContainer_1d57f_42{grid-template-columns:repeat(2,minmax(0,1fr))}}._dataRowTitle_1d57f_59{color:var(--synapse-primary-action-color,#4d558d);overflow-wrap:break-word;word-break:break-word;flex:0 auto;min-width:0;font-size:16px;font-weight:400;line-height:26.4px}@media (width>=1024px){._dataRowTitle_1d57f_59{font-size:19.8px}}._dataRowInner_1d57f_75{flex:1;justify-content:space-between;align-items:center;min-width:0;display:flex}._dataRow_1d57f_59{border:1px solid #0000;border-radius:3.3px;justify-content:space-between;justify-self:stretch;align-items:center;gap:17.6px;min-height:66.6px;padding:6px 12px;transition:background-color .2s,border-color .2s,box-shadow .2s,transform .2s;display:flex;position:relative;text-decoration:none!important}._dataRow_1d57f_59 ._dataRowTitle_1d57f_59{text-decoration:underline}@media (width>=1024px){._dataRow_1d57f_59{padding:8.8px 26.4px}._dataRow_1d57f_59 ._dataRowTitle_1d57f_59{text-decoration:none}}._dataRow_1d57f_59:hover,._dataRow_1d57f_59:active{z-index:1;background-color:#fff;border-color:#e1e1e1;box-shadow:0 4px 8px #0000001a}._dataRow_1d57f_59:hover ._viewCta_1d57f_114,._dataRow_1d57f_59:active ._viewCta_1d57f_114{opacity:1;pointer-events:auto}@media (width>=1024px){._dataRow_1d57f_59{transform:scale(1.1)}}._dataRowLeft_1d57f_124{flex:1;align-items:center;gap:16px;min-width:0;display:inline-flex}._iconContainer_1d57f_132{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:49px;height:49px;display:flex}._dataRowNamePill_1d57f_142{flex:1 1 0;align-items:center;gap:8px;min-width:0;display:flex}._facetCount_1d57f_150{color:#787090;border:1px solid #d8d5e0;border-radius:80px;flex-shrink:0;justify-content:center;align-items:center;gap:10px;padding:4px 8px;font-size:14px;font-weight:400;line-height:24px;display:flex}._viewCta_1d57f_114{opacity:0;white-space:nowrap;color:var(--synapse-primary-action-color,#4d558d);background:linear-gradient(90deg,#0000,#fff 25% 100%);border-radius:0 2px 2px 0;align-items:center;gap:4px;padding-left:40px;padding-right:26.4px;transition:opacity .2s;display:inline-flex;position:absolute;top:0;bottom:0;right:0}._viewCtaText_1d57f_183{color:var(--synapse-primary-action-color,#4d558d);font-size:16px;font-weight:400;line-height:26.4px}._viewCtaIcon_1d57f_190.MuiSvgIcon-root{color:var(--synapse-primary-action-color,#5a488f);font-size:24px}

package/dist/components/DataExplorer/DataExplorer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/DataExplorer/DataExplorer.tsx"],"names":[],"mappings":"AAkBA,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAUD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,GAAG,EACH,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,EACV,WAAW,EACX,eAAe,EACf,QAAQ,GACT,EAAE,iBAAiB,2CAyMnB"}
+{"version":3,"file":"DataExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/DataExplorer/DataExplorer.tsx"],"names":[],"mappings":"AAwBA,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAUD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,GAAG,EACH,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,EACV,WAAW,EACX,eAAe,EACf,QAAQ,GACT,EAAE,iBAAiB,2CA2MnB"}

package/dist/components/DataExplorer/DataExplorer.js

@@ -12,112 +12,112 @@ import o from "../ImageFromSynapseTable.js";
 import s from "./DataExplorer.module.js";
 import { useEffect as c, useMemo as l, useState as u } from "react";
 import { orderBy as d } from "lodash-es";
-import { Button as f, Stack as p, Typography as m } from "@mui/material";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import _ from "@mui/icons-material/ArrowForward";
+import { Button as f, Stack as p, Typography as m, useMediaQuery as h, useTheme as g } from "@mui/material";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import y from "@mui/icons-material/ArrowForward";
 //#region src/components/DataExplorer/DataExplorer.tsx
-function v({ sql: v, title: y, subtitle: b, buttonText: x, buttonLink: S, explorePath: C, exploreQuerySql: w, facetSql: T }) {
-	let E = y || b || x, D = r(S), O = e(v), k = e(T ?? ""), A = {
+function b({ sql: b, title: x, subtitle: S, buttonText: C, buttonLink: w, explorePath: T, exploreQuerySql: E, facetSql: D }) {
+	let O = x || S || C, k = r(w), A = h(g().breakpoints.down("sm")), j = e(b), M = e(D ?? ""), N = {
 		partMask: 5,
 		concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
-		entityId: O,
-		query: { sql: v }
-	}, j = {
+		entityId: j,
+		query: { sql: b }
+	}, P = {
 		partMask: 32,
 		concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
-		entityId: k,
-		query: { sql: T ?? "" }
-	}, { data: M } = n(A), N = l(() => M?.queryResult?.queryResults.rows ?? [], [M]), { data: P } = n(j, { enabled: !!T }), F = t("datatype", M), I = t("icon", M), L = t("hexColor", M), R = t("order", M), z = t("columnName", M), B = (e, t) => t ? `${t}::${e}` : e, [V, H] = u({});
+		entityId: M,
+		query: { sql: D ?? "" }
+	}, { data: F } = n(N), I = l(() => F?.queryResult?.queryResults.rows ?? [], [F]), { data: L } = n(P, { enabled: !!D }), R = t("datatype", F), z = t("icon", F), B = t("hexColor", F), V = t("order", F), H = t("columnName", F), U = (e, t) => t ? `${t}::${e}` : e, [W, G] = u({});
 	c(() => {
-		!C || !w || Promise.all(N.map((e) => {
-			let t = e.values[F]?.trim() ?? "", n = e.values[z]?.trim() ?? "", r = B(t, n);
-			return !t || !n ? Promise.resolve([r, C]) : i(C, w, [{
+		!T || !E || Promise.all(I.map((e) => {
+			let t = e.values[R]?.trim() ?? "", n = e.values[H]?.trim() ?? "", r = U(t, n);
+			return !t || !n ? Promise.resolve([r, T]) : i(T, E, [{
 				facet: n,
 				facetValue: t
 			}]).then((e) => [r, e]);
-		})).then((e) => H(Object.fromEntries(e)));
+		})).then((e) => G(Object.fromEntries(e)));
 	}, [
-		N,
-		F,
-		z,
-		C,
-		w
+		I,
+		R,
+		H,
+		T,
+		E
 	]);
-	let U = l(() => {
-		let e = a(P), t = /* @__PURE__ */ new Map();
+	let K = l(() => {
+		let e = a(L), t = /* @__PURE__ */ new Map();
 		for (let n of e) t.set(n.columnName, new Map(n.facetValues.map((e) => [e.value, e.count])));
 		return t;
-	}, [P]), W = (e, t) => t ? U.get(t)?.get(e) : void 0, G = d(N, [(e) => Number(e.values[R] ?? 2 ** 53 - 1), (e) => W(e.values[F]?.trim() ?? "", e.values[z]?.trim() ?? "") ?? 0], ["asc", "desc"]);
-	return /* @__PURE__ */ g("div", {
+	}, [L]), q = (e, t) => t ? K.get(t)?.get(e) : void 0, J = d(I, [(e) => Number(e.values[V] ?? 2 ** 53 - 1), (e) => q(e.values[R]?.trim() ?? "", e.values[H]?.trim() ?? "") ?? 0], ["asc", "desc"]);
+	return /* @__PURE__ */ v("div", {
 		className: s.dataExplorerContainer,
-		children: [E && /* @__PURE__ */ g(p, {
+		children: [O && /* @__PURE__ */ v(p, {
 			className: s.dataExplorerTextContainer,
 			children: [
-				y && /* @__PURE__ */ h(m, {
+				x && /* @__PURE__ */ _(m, {
 					variant: "headline1",
 					className: s.dataExplorerTitle,
-					children: y
+					children: x
 				}),
-				b && /* @__PURE__ */ h(m, {
+				S && /* @__PURE__ */ _(m, {
 					variant: "body1",
 					component: "div",
 					className: s.dataExplorerSubtitle,
-					children: b
+					children: S
 				}),
-				x && /* @__PURE__ */ h(f, {
+				C && /* @__PURE__ */ _(f, {
 					variant: "contained",
 					className: s.dataExplorerButton,
-					...D,
-					children: x
+					...k,
+					children: C
 				})
 			]
-		}), /* @__PURE__ */ h("div", {
+		}), /* @__PURE__ */ _("div", {
 			className: s.dataContainer,
-			children: G.map((e) => {
-				let t = e.values[F]?.trim() ?? "", n = e.values[L] ?? void 0, r = e.values[z]?.trim() ?? "", i = V[B(t, r)], a = W(t, r);
-				return /* @__PURE__ */ h("a", {
+			children: J.map((e) => {
+				let t = e.values[R]?.trim() ?? "", n = e.values[B] ?? void 0, r = e.values[H]?.trim() ?? "", i = W[U(t, r)], a = q(t, r);
+				return /* @__PURE__ */ _("a", {
 					className: s.dataRow,
 					href: i,
-					children: /* @__PURE__ */ g("div", {
+					children: /* @__PURE__ */ v("div", {
 						className: s.dataRowInner,
-						children: [/* @__PURE__ */ g("div", {
+						children: [/* @__PURE__ */ v("div", {
 							className: s.dataRowLeft,
-							children: [/* @__PURE__ */ h("div", {
+							children: [/* @__PURE__ */ _("div", {
 								className: s.iconContainer,
 								style: n ? { backgroundColor: n } : void 0,
-								children: /* @__PURE__ */ h(o, {
-									tableId: O,
-									fileHandleId: e.values[I],
+								children: /* @__PURE__ */ _(o, {
+									tableId: j,
+									fileHandleId: e.values[z],
 									alt: t,
 									style: {
 										width: 49,
 										height: 49
 									}
 								})
-							}), /* @__PURE__ */ g("div", {
+							}), /* @__PURE__ */ v("div", {
 								className: s.dataRowNamePill,
-								children: [/* @__PURE__ */ h(m, {
+								children: [/* @__PURE__ */ _(m, {
 									className: s.dataRowTitle,
 									children: t
-								}), a && /* @__PURE__ */ h("div", {
+								}), a && /* @__PURE__ */ _("div", {
 									className: s.facetCount,
 									children: a
 								})]
 							})]
-						}), i && /* @__PURE__ */ g("div", {
+						}), i && !A && /* @__PURE__ */ v("div", {
 							className: s.viewCta,
-							children: [/* @__PURE__ */ h("span", {
+							children: [/* @__PURE__ */ _("span", {
 								className: s.viewCtaText,
 								children: "View"
-							}), /* @__PURE__ */ h(_, { className: s.viewCtaIcon })]
+							}), /* @__PURE__ */ _(y, { className: s.viewCtaIcon })]
 						})]
 					})
-				}, B(t, r));
+				}, U(t, r));
 			})
 		})]
 	});
 }
 //#endregion
-export { v as default };
+export { b as default };
 
 //# sourceMappingURL=DataExplorer.js.map

package/dist/components/DataExplorer/DataExplorer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataExplorer.js","names":[],"sources":["../../../src/components/DataExplorer/DataExplorer.tsx"],"sourcesContent":["import { Button, Typography, Stack } from '@mui/material'\nimport { useEffect, useMemo, useState } from 'react'\nimport styles from './DataExplorer.module.scss'\nimport { useSmartLink } from '../SmartLink/useSmartLink'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions'\nimport {\n  QueryBundleRequest,\n  FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { SynapseConstants } from '@/utils'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport { generateEncodedPathAndQueryForSelectedFacetURL } from '../QueryWrapper'\nimport ImageFromSynapseTable from '../ImageFromSynapseTable'\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward'\nimport { getFacets } from '../widgets/facet-nav/useFacetPlots'\nimport { orderBy } from 'lodash-es'\n\ntype DataExplorerProps = {\n  title?: React.ReactNode\n  subtitle?: React.ReactNode\n  buttonText?: string\n  buttonLink?: string\n  sql: string\n  explorePath?: string\n  exploreQuerySql?: string\n  facetSql?: string\n}\n\nenum ExpectedColumns {\n  DATATYPE = 'datatype',\n  ICON = 'icon',\n  HEX_COLOR = 'hexColor',\n  ORDER = 'order',\n  COLUMN_NAME = 'columnName',\n}\n\n/**\n * DataExplorer\n *\n * A reusable component that renders a list of data types/categories with associated icons.\n * It drives navigation by linking each row to a pre-filtered exploration view.\n *\n * How it works:\n * 1. `sql`: Fetches a configuration table defining the display categories,\n *    their display order, hex colors, and icons.\n * 2. `facetSql`: Fetches real-time counts for these categories from the actual\n *    underlying data table.\n * 3. Links are dynamically built to point to a target path (`explorePath`) pre-filtered to the\n *    clicked category.\n */\nexport default function DataExplorer({\n  sql,\n  title,\n  subtitle,\n  buttonText,\n  buttonLink,\n  explorePath,\n  exploreQuerySql,\n  facetSql,\n}: DataExplorerProps) {\n  const hasTextSection = title || subtitle || buttonText\n  const smartLinkProps = useSmartLink(buttonLink)\n\n  const entityId = parseEntityIdFromSqlStatement(sql)\n  const facetEntityId = parseEntityIdFromSqlStatement(facetSql ?? '')\n\n  const queryBundleRequest: QueryBundleRequest = {\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    entityId,\n    query: {\n      sql,\n    },\n  }\n\n  const facetQueryRequest: QueryBundleRequest = {\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_FACETS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    entityId: facetEntityId,\n    query: {\n      sql: facetSql ?? '',\n    },\n  }\n\n  const { data: queryResultBundle } =\n    useGetQueryResultBundle(queryBundleRequest)\n\n  const dataRows = useMemo(\n    () => queryResultBundle?.queryResult?.queryResults.rows ?? [],\n    [queryResultBundle],\n  )\n\n  const { data: facetQueryResultBundle } = useGetQueryResultBundle(\n    facetQueryRequest,\n    { enabled: Boolean(facetSql) },\n  )\n\n  const datatypeColIndex = getFieldIndex(\n    ExpectedColumns.DATATYPE,\n    queryResultBundle,\n  )\n\n  const iconColIndex = getFieldIndex(ExpectedColumns.ICON, queryResultBundle)\n\n  const hexColorColIndex = getFieldIndex(\n    ExpectedColumns.HEX_COLOR,\n    queryResultBundle,\n  )\n\n  const orderColIndex = getFieldIndex(ExpectedColumns.ORDER, queryResultBundle)\n\n  const columnNameColIndex = getFieldIndex(\n    ExpectedColumns.COLUMN_NAME,\n    queryResultBundle,\n  )\n\n  // Key rows by columnName + dataType to prevent collisions when the same dataType appears in multiple columns.\n  const getRowKey = (dataType: string, columnName: string) =>\n    columnName ? `${columnName}::${dataType}` : dataType\n\n  const [rowUrls, setRowUrls] = useState<Record<string, string>>({})\n\n  useEffect(() => {\n    if (!explorePath || !exploreQuerySql) return\n    Promise.all(\n      dataRows.map(row => {\n        const dataType = row.values[datatypeColIndex]?.trim() ?? ''\n        const columnName = row.values[columnNameColIndex]?.trim() ?? ''\n        const rowKey = getRowKey(dataType, columnName)\n        if (!dataType || !columnName)\n          return Promise.resolve([rowKey, explorePath] as const)\n        return generateEncodedPathAndQueryForSelectedFacetURL(\n          explorePath,\n          exploreQuerySql,\n          [{ facet: columnName, facetValue: dataType }],\n        ).then(url => [rowKey, url] as const)\n      }),\n    ).then(entries => setRowUrls(Object.fromEntries(entries)))\n  }, [\n    dataRows,\n    datatypeColIndex,\n    columnNameColIndex,\n    explorePath,\n    exploreQuerySql,\n  ])\n\n  // Create a map of facet counts by column name and data type for quick lookup\n  const facetCountsByColumn = useMemo(() => {\n    const facets = getFacets(\n      facetQueryResultBundle,\n    ) as FacetColumnResultValues[]\n    const map = new Map<string, Map<string, number>>()\n    for (const facet of facets) {\n      map.set(\n        facet.columnName,\n        new Map(facet.facetValues.map(fv => [fv.value, fv.count])),\n      )\n    }\n    return map\n  }, [facetQueryResultBundle])\n\n  const getFacetCount = (dataType: string, columnName?: string) =>\n    columnName ? facetCountsByColumn.get(columnName)?.get(dataType) : undefined\n\n  // Sort by order column ascending, then by facet count descending\n  const sortedRows = orderBy(\n    dataRows,\n    [\n      row => Number(row.values[orderColIndex] ?? Number.MAX_SAFE_INTEGER),\n      row =>\n        getFacetCount(\n          row.values[datatypeColIndex]?.trim() ?? '',\n          row.values[columnNameColIndex]?.trim() ?? '',\n        ) ?? 0,\n    ],\n    ['asc', 'desc'],\n  )\n\n  return (\n    <div className={styles.dataExplorerContainer}>\n      {hasTextSection && (\n        <Stack className={styles.dataExplorerTextContainer}>\n          {title && (\n            <Typography\n              variant=\"headline1\"\n              className={styles.dataExplorerTitle}\n            >\n              {title}\n            </Typography>\n          )}\n          {subtitle && (\n            <Typography\n              variant=\"body1\"\n              component=\"div\"\n              className={styles.dataExplorerSubtitle}\n            >\n              {subtitle}\n            </Typography>\n          )}\n          {buttonText && (\n            <Button\n              variant=\"contained\"\n              className={styles.dataExplorerButton}\n              {...smartLinkProps}\n            >\n              {buttonText}\n            </Button>\n          )}\n        </Stack>\n      )}\n      <div className={styles.dataContainer}>\n        {sortedRows.map(row => {\n          const dataType = row.values[datatypeColIndex]?.trim() ?? ''\n          const hexColor = row.values[hexColorColIndex] ?? undefined\n          const columnName = row.values[columnNameColIndex]?.trim() ?? ''\n          const rowUrl = rowUrls[getRowKey(dataType, columnName)]\n          const facetCount = getFacetCount(dataType, columnName)\n          return (\n            <a\n              key={getRowKey(dataType, columnName)}\n              className={styles.dataRow}\n              href={rowUrl}\n            >\n              <div className={styles.dataRowInner}>\n                <div className={styles.dataRowLeft}>\n                  <div\n                    className={styles.iconContainer}\n                    style={hexColor ? { backgroundColor: hexColor } : undefined}\n                  >\n                    <ImageFromSynapseTable\n                      tableId={entityId}\n                      fileHandleId={row.values[iconColIndex]}\n                      alt={dataType}\n                      style={{ width: 49, height: 49 }}\n                    />\n                  </div>\n                  <div className={styles.dataRowNamePill}>\n                    <Typography className={styles.dataRowTitle}>\n                      {dataType}\n                    </Typography>\n                    {facetCount && (\n                      <div className={styles.facetCount}>{facetCount}</div>\n                    )}\n                  </div>\n                </div>\n                {rowUrl && (\n                  <div className={styles.viewCta}>\n                    <span className={styles.viewCtaText}>View</span>\n                    <ArrowForwardIcon className={styles.viewCtaIcon} />\n                  </div>\n                )}\n              </div>\n            </a>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"DataExplorer.js","names":[],"sources":["../../../src/components/DataExplorer/DataExplorer.tsx"],"sourcesContent":["import {\n  Button,\n  Typography,\n  Stack,\n  useTheme,\n  useMediaQuery,\n} from '@mui/material'\nimport { useEffect, useMemo, useState } from 'react'\nimport styles from './DataExplorer.module.scss'\nimport { useSmartLink } from '../SmartLink/useSmartLink'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions'\nimport {\n  QueryBundleRequest,\n  FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { SynapseConstants } from '@/utils'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport { generateEncodedPathAndQueryForSelectedFacetURL } from '../QueryWrapper'\nimport ImageFromSynapseTable from '../ImageFromSynapseTable'\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward'\nimport { getFacets } from '../widgets/facet-nav/useFacetPlots'\nimport { orderBy } from 'lodash-es'\n\ntype DataExplorerProps = {\n  title?: React.ReactNode\n  subtitle?: React.ReactNode\n  buttonText?: string\n  buttonLink?: string\n  sql: string\n  explorePath?: string\n  exploreQuerySql?: string\n  facetSql?: string\n}\n\nenum ExpectedColumns {\n  DATATYPE = 'datatype',\n  ICON = 'icon',\n  HEX_COLOR = 'hexColor',\n  ORDER = 'order',\n  COLUMN_NAME = 'columnName',\n}\n\n/**\n * DataExplorer\n *\n * A reusable component that renders a list of data types/categories with associated icons.\n * It drives navigation by linking each row to a pre-filtered exploration view.\n *\n * How it works:\n * 1. `sql`: Fetches a configuration table defining the display categories,\n *    their display order, hex colors, and icons.\n * 2. `facetSql`: Fetches real-time counts for these categories from the actual\n *    underlying data table.\n * 3. Links are dynamically built to point to a target path (`explorePath`) pre-filtered to the\n *    clicked category.\n */\nexport default function DataExplorer({\n  sql,\n  title,\n  subtitle,\n  buttonText,\n  buttonLink,\n  explorePath,\n  exploreQuerySql,\n  facetSql,\n}: DataExplorerProps) {\n  const hasTextSection = title || subtitle || buttonText\n  const smartLinkProps = useSmartLink(buttonLink)\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))\n\n  const entityId = parseEntityIdFromSqlStatement(sql)\n  const facetEntityId = parseEntityIdFromSqlStatement(facetSql ?? '')\n\n  const queryBundleRequest: QueryBundleRequest = {\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    entityId,\n    query: {\n      sql,\n    },\n  }\n\n  const facetQueryRequest: QueryBundleRequest = {\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_FACETS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    entityId: facetEntityId,\n    query: {\n      sql: facetSql ?? '',\n    },\n  }\n\n  const { data: queryResultBundle } =\n    useGetQueryResultBundle(queryBundleRequest)\n\n  const dataRows = useMemo(\n    () => queryResultBundle?.queryResult?.queryResults.rows ?? [],\n    [queryResultBundle],\n  )\n\n  const { data: facetQueryResultBundle } = useGetQueryResultBundle(\n    facetQueryRequest,\n    { enabled: Boolean(facetSql) },\n  )\n\n  const datatypeColIndex = getFieldIndex(\n    ExpectedColumns.DATATYPE,\n    queryResultBundle,\n  )\n\n  const iconColIndex = getFieldIndex(ExpectedColumns.ICON, queryResultBundle)\n\n  const hexColorColIndex = getFieldIndex(\n    ExpectedColumns.HEX_COLOR,\n    queryResultBundle,\n  )\n\n  const orderColIndex = getFieldIndex(ExpectedColumns.ORDER, queryResultBundle)\n\n  const columnNameColIndex = getFieldIndex(\n    ExpectedColumns.COLUMN_NAME,\n    queryResultBundle,\n  )\n\n  // Key rows by columnName + dataType to prevent collisions when the same dataType appears in multiple columns.\n  const getRowKey = (dataType: string, columnName: string) =>\n    columnName ? `${columnName}::${dataType}` : dataType\n\n  const [rowUrls, setRowUrls] = useState<Record<string, string>>({})\n\n  useEffect(() => {\n    if (!explorePath || !exploreQuerySql) return\n    Promise.all(\n      dataRows.map(row => {\n        const dataType = row.values[datatypeColIndex]?.trim() ?? ''\n        const columnName = row.values[columnNameColIndex]?.trim() ?? ''\n        const rowKey = getRowKey(dataType, columnName)\n        if (!dataType || !columnName)\n          return Promise.resolve([rowKey, explorePath] as const)\n        return generateEncodedPathAndQueryForSelectedFacetURL(\n          explorePath,\n          exploreQuerySql,\n          [{ facet: columnName, facetValue: dataType }],\n        ).then(url => [rowKey, url] as const)\n      }),\n    ).then(entries => setRowUrls(Object.fromEntries(entries)))\n  }, [\n    dataRows,\n    datatypeColIndex,\n    columnNameColIndex,\n    explorePath,\n    exploreQuerySql,\n  ])\n\n  // Create a map of facet counts by column name and data type for quick lookup\n  const facetCountsByColumn = useMemo(() => {\n    const facets = getFacets(\n      facetQueryResultBundle,\n    ) as FacetColumnResultValues[]\n    const map = new Map<string, Map<string, number>>()\n    for (const facet of facets) {\n      map.set(\n        facet.columnName,\n        new Map(facet.facetValues.map(fv => [fv.value, fv.count])),\n      )\n    }\n    return map\n  }, [facetQueryResultBundle])\n\n  const getFacetCount = (dataType: string, columnName?: string) =>\n    columnName ? facetCountsByColumn.get(columnName)?.get(dataType) : undefined\n\n  // Sort by order column ascending, then by facet count descending\n  const sortedRows = orderBy(\n    dataRows,\n    [\n      row => Number(row.values[orderColIndex] ?? Number.MAX_SAFE_INTEGER),\n      row =>\n        getFacetCount(\n          row.values[datatypeColIndex]?.trim() ?? '',\n          row.values[columnNameColIndex]?.trim() ?? '',\n        ) ?? 0,\n    ],\n    ['asc', 'desc'],\n  )\n\n  return (\n    <div className={styles.dataExplorerContainer}>\n      {hasTextSection && (\n        <Stack className={styles.dataExplorerTextContainer}>\n          {title && (\n            <Typography\n              variant=\"headline1\"\n              className={styles.dataExplorerTitle}\n            >\n              {title}\n            </Typography>\n          )}\n          {subtitle && (\n            <Typography\n              variant=\"body1\"\n              component=\"div\"\n              className={styles.dataExplorerSubtitle}\n            >\n              {subtitle}\n            </Typography>\n          )}\n          {buttonText && (\n            <Button\n              variant=\"contained\"\n              className={styles.dataExplorerButton}\n              {...smartLinkProps}\n            >\n              {buttonText}\n            </Button>\n          )}\n        </Stack>\n      )}\n      <div className={styles.dataContainer}>\n        {sortedRows.map(row => {\n          const dataType = row.values[datatypeColIndex]?.trim() ?? ''\n          const hexColor = row.values[hexColorColIndex] ?? undefined\n          const columnName = row.values[columnNameColIndex]?.trim() ?? ''\n          const rowUrl = rowUrls[getRowKey(dataType, columnName)]\n          const facetCount = getFacetCount(dataType, columnName)\n          return (\n            <a\n              key={getRowKey(dataType, columnName)}\n              className={styles.dataRow}\n              href={rowUrl}\n            >\n              <div className={styles.dataRowInner}>\n                <div className={styles.dataRowLeft}>\n                  <div\n                    className={styles.iconContainer}\n                    style={hexColor ? { backgroundColor: hexColor } : undefined}\n                  >\n                    <ImageFromSynapseTable\n                      tableId={entityId}\n                      fileHandleId={row.values[iconColIndex]}\n                      alt={dataType}\n                      style={{ width: 49, height: 49 }}\n                    />\n                  </div>\n                  <div className={styles.dataRowNamePill}>\n                    <Typography className={styles.dataRowTitle}>\n                      {dataType}\n                    </Typography>\n                    {facetCount && (\n                      <div className={styles.facetCount}>{facetCount}</div>\n                    )}\n                  </div>\n                </div>\n                {rowUrl && !isMobile && (\n                  <div className={styles.viewCta}>\n                    <span className={styles.viewCtaText}>View</span>\n                    <ArrowForwardIcon className={styles.viewCtaIcon} />\n                  </div>\n                )}\n              </div>\n            </a>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/DataExplorer/DataExplorer.module.js

@@ -1,20 +1,20 @@
 import './DataExplorer.css';var e = {
-	dataExplorerTitle: "_dataExplorerTitle_1ezpn_1",
-	dataExplorerSubtitle: "_dataExplorerSubtitle_1ezpn_7",
-	dataExplorerButton: "_dataExplorerButton_1ezpn_12",
-	dataExplorerTextContainer: "_dataExplorerTextContainer_1ezpn_17",
-	dataExplorerContainer: "_dataExplorerContainer_1ezpn_27",
-	dataContainer: "_dataContainer_1ezpn_41",
-	dataRowTitle: "_dataRowTitle_1ezpn_51",
-	dataRowInner: "_dataRowInner_1ezpn_67",
-	dataRow: "_dataRow_1ezpn_51",
-	viewCta: "_viewCta_1ezpn_96",
-	dataRowLeft: "_dataRowLeft_1ezpn_101",
-	iconContainer: "_iconContainer_1ezpn_109",
-	dataRowNamePill: "_dataRowNamePill_1ezpn_119",
-	facetCount: "_facetCount_1ezpn_127",
-	viewCtaText: "_viewCtaText_1ezpn_160",
-	viewCtaIcon: "_viewCtaIcon_1ezpn_167"
+	dataExplorerTitle: "_dataExplorerTitle_1d57f_1",
+	dataExplorerSubtitle: "_dataExplorerSubtitle_1d57f_7",
+	dataExplorerButton: "_dataExplorerButton_1d57f_12",
+	dataExplorerTextContainer: "_dataExplorerTextContainer_1d57f_17",
+	dataExplorerContainer: "_dataExplorerContainer_1d57f_27",
+	dataContainer: "_dataContainer_1d57f_42",
+	dataRowTitle: "_dataRowTitle_1d57f_59",
+	dataRowInner: "_dataRowInner_1d57f_75",
+	dataRow: "_dataRow_1d57f_59",
+	viewCta: "_viewCta_1d57f_114",
+	dataRowLeft: "_dataRowLeft_1d57f_124",
+	iconContainer: "_iconContainer_1d57f_132",
+	dataRowNamePill: "_dataRowNamePill_1d57f_142",
+	facetCount: "_facetCount_1d57f_150",
+	viewCtaText: "_viewCtaText_1d57f_183",
+	viewCtaIcon: "_viewCtaIcon_1d57f_190"
 };
 //#endregion
 export { e as default };

package/dist/components/DataExplorer/DataExplorer.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataExplorer.module.js","names":[],"sources":["../../../src/components/DataExplorer/DataExplorer.module.scss"],"sourcesContent":["@use 'sass:map';\n@use '../../style/abstracts/variables' as SrcVariables;\n\n.dataExplorerTitle:global(.MuiTypography-root) {\n  color: var(--data-explorer-title-color, var(--synapse-primary-action-color));\n  font-size: 36px;\n  line-height: 40px; /* 111.111% */\n}\n\n.dataExplorerSubtitle:global(.MuiTypography-root) {\n  line-height: 140%;\n}\n\n.dataExplorerButton {\n  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {\n    width: fit-content;\n  }\n}\n\n.dataExplorerTextContainer {\n  gap: 16px;\n\n  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {\n    flex: 0 0 30%;\n    max-width: 30%;\n  }\n}\n\n.dataExplorerContainer {\n  display: flex;\n  padding: 40px 0;\n  align-items: flex-start;\n  gap: 60px;\n  flex: 1 0 0;\n  flex-direction: column;\n\n  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {\n    flex-direction: row;\n  }\n}\n\n.dataContainer {\n  display: inline-grid;\n  row-gap: 8px;\n  column-gap: 8px;\n  flex: 1 1 60%;\n  min-width: 0;\n  grid-template-rows: repeat(9, fit-content(100%));\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.dataRowTitle {\n  color: var(--synapse-primary-action-color, #4d558d);\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 26.4px;\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow-wrap: break-word;\n  word-break: break-word;\n\n  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {\n    font-size: 19.8px;\n  }\n}\n\n.dataRowInner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 1;\n  min-width: 0;\n}\n\n.dataRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8.8px 26.4px;\n  min-height: 66.6px;\n  gap: 17.6px;\n  justify-self: stretch;\n  position: relative;\n  border-radius: 3.3px;\n  border: 1px solid transparent;\n  text-decoration: none !important;\n  transition:\n    background-color 200ms ease,\n    border-color 200ms ease,\n    box-shadow 200ms ease,\n    transform 200ms ease;\n\n  &:hover {\n    background-color: #fff;\n    border-color: #e1e1e1;\n    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);\n    transform: scale(1.1);\n    z-index: 1;\n    .viewCta {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n}\n\n.dataRowLeft {\n  display: inline-flex;\n  align-items: center;\n  gap: 16px;\n  min-width: 0;\n  flex: 1;\n}\n\n.iconContainer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 49px;\n  height: 49px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.dataRowNamePill {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n.facetCount {\n  display: flex;\n  padding: 4px 8px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 80px;\n  border: 1px solid #d8d5e0;\n  color: #787090;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 24px; /* 171.429% */\n  flex-shrink: 0;\n}\n\n.viewCta {\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  display: inline-flex;\n  align-items: center;\n  padding-right: 26.4px;\n  padding-left: 40px;\n  gap: 4px;\n  opacity: 0;\n  white-space: nowrap;\n  color: var(--synapse-primary-action-color, #4d558d);\n  background: linear-gradient(to right, transparent, #fff 25%, #fff 100%);\n  border-radius: 0 2px 2px 0;\n  transition: opacity 200ms ease;\n}\n\n.viewCtaText {\n  color: var(--synapse-primary-action-color, #4d558d);\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 26.4px; /* 165% */\n}\n\n.viewCtaIcon:global(.MuiSvgIcon-root) {\n  font-size: 24px;\n  color: var(--synapse-primary-action-color, #5a488f);\n}\n"],"mappings":""}
+{"version":3,"file":"DataExplorer.module.js","names":[],"sources":["../../../src/components/DataExplorer/DataExplorer.module.scss"],"sourcesContent":["@use 'sass:map';\n@use '../../style/abstracts/variables' as SrcVariables;\n\n.dataExplorerTitle:global(.MuiTypography-root) {\n  color: var(--data-explorer-title-color, var(--synapse-primary-action-color));\n  font-size: 36px;\n  line-height: 40px; /* 111.111% */\n}\n\n.dataExplorerSubtitle:global(.MuiTypography-root) {\n  line-height: 140%;\n}\n\n.dataExplorerButton {\n  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {\n    width: fit-content;\n  }\n}\n\n.dataExplorerTextContainer {\n  gap: 16px;\n\n  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {\n    flex: 0 0 30%;\n    max-width: 30%;\n  }\n}\n\n.dataExplorerContainer {\n  display: flex;\n  padding: 40px 0;\n  align-items: flex-start;\n  gap: 20px;\n  flex: 1 0 0;\n  flex-direction: column;\n\n  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {\n    gap: 60px;\n    flex-direction: row;\n  }\n}\n\n.dataContainer {\n  display: grid;\n  width: 100%;\n  align-self: stretch;\n  row-gap: 8px;\n  column-gap: 8px;\n  flex: 1 1 60%;\n  min-width: 0;\n  grid-template-rows: repeat(9, fit-content(100%));\n  grid-template-columns: minmax(0, 1fr);\n\n  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n.dataRowTitle {\n  color: var(--synapse-primary-action-color, #4d558d);\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 26.4px;\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow-wrap: break-word;\n  word-break: break-word;\n\n  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {\n    font-size: 19.8px;\n  }\n}\n\n.dataRowInner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 1;\n  min-width: 0;\n}\n\n.dataRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  min-height: 66.6px;\n  gap: 17.6px;\n  justify-self: stretch;\n  position: relative;\n  border-radius: 3.3px;\n  border: 1px solid transparent;\n  text-decoration: none !important;\n  transition:\n    background-color 200ms ease,\n    border-color 200ms ease,\n    box-shadow 200ms ease,\n    transform 200ms ease;\n\n  .dataRowTitle {\n    text-decoration: underline;\n  }\n\n  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {\n    padding: 8.8px 26.4px;\n\n    .dataRowTitle {\n      text-decoration: none;\n    }\n  }\n\n  &:hover,\n  &:active {\n    background-color: #fff;\n    border-color: #e1e1e1;\n    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);\n    z-index: 1;\n    .viewCta {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n\n  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {\n    transform: scale(1.1);\n  }\n}\n\n.dataRowLeft {\n  display: inline-flex;\n  align-items: center;\n  gap: 16px;\n  min-width: 0;\n  flex: 1;\n}\n\n.iconContainer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 49px;\n  height: 49px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.dataRowNamePill {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n.facetCount {\n  display: flex;\n  padding: 4px 8px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 80px;\n  border: 1px solid #d8d5e0;\n  color: #787090;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 24px; /* 171.429% */\n  flex-shrink: 0;\n}\n\n.viewCta {\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  display: inline-flex;\n  align-items: center;\n  padding-right: 26.4px;\n  padding-left: 40px;\n  gap: 4px;\n  opacity: 0;\n  white-space: nowrap;\n  color: var(--synapse-primary-action-color, #4d558d);\n  background: linear-gradient(to right, transparent, #fff 25%, #fff 100%);\n  border-radius: 0 2px 2px 0;\n  transition: opacity 200ms ease;\n}\n\n.viewCtaText {\n  color: var(--synapse-primary-action-color, #4d558d);\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 26.4px; /* 165% */\n}\n\n.viewCtaIcon:global(.MuiSvgIcon-root) {\n  font-size: 24px;\n  color: var(--synapse-primary-action-color, #5a488f);\n}\n"],"mappings":""}

package/dist/components/DataExplorer/DataExplorer.module.scss

@@ -30,23 +30,30 @@
   display: flex;
   padding: 40px 0;
   align-items: flex-start;
-  gap: 60px;
+  gap: 20px;
   flex: 1 0 0;
   flex-direction: column;
 
   @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {
+    gap: 60px;
     flex-direction: row;
   }
 }
 
 .dataContainer {
-  display: inline-grid;
+  display: grid;
+  width: 100%;
+  align-self: stretch;
   row-gap: 8px;
   column-gap: 8px;
   flex: 1 1 60%;
   min-width: 0;
   grid-template-rows: repeat(9, fit-content(100%));
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1fr);
+
+  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 .dataRowTitle {
@@ -76,7 +83,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8.8px 26.4px;
+  padding: 6px 12px;
   min-height: 66.6px;
   gap: 17.6px;
   justify-self: stretch;
@@ -90,17 +97,33 @@
     box-shadow 200ms ease,
     transform 200ms ease;
 
-  &:hover {
+  .dataRowTitle {
+    text-decoration: underline;
+  }
+
+  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {
+    padding: 8.8px 26.4px;
+
+    .dataRowTitle {
+      text-decoration: none;
+    }
+  }
+
+  &:hover,
+  &:active {
     background-color: #fff;
     border-color: #e1e1e1;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
-    transform: scale(1.1);
     z-index: 1;
     .viewCta {
       opacity: 1;
       pointer-events: auto;
     }
   }
+
+  @media (min-width: map.get(SrcVariables.$breakpoints, 'large')) {
+    transform: scale(1.1);
+  }
 }
 
 .dataRowLeft {

package/dist/components/DataGrid/columns/DateTimeColumn.d.ts

@@ -1,8 +1,15 @@
 import { Dayjs } from 'dayjs';
 import { JSONSchema7Type } from 'json-schema';
 import { CellProps, Column } from '@sage-bionetworks/react-datasheet-grid';
+/** The JSON Schema `date` format: an RFC 3339 full-date, e.g. 2026-12-25. */
+export declare const FULL_DATE_FORMAT_NAME = "date";
 export type DateTimeCellProps = CellProps & {
     colType?: JSONSchema7Type;
+    /**
+     * The column's JSON Schema `format`. `date` collects a calendar date only;
+     * anything else collects a date and time of day.
+     */
+    format?: string;
 };
 export type DateTimeCellValue = {
     kind: 'empty';
@@ -17,15 +24,17 @@ export type DateTimeCellValue = {
  * Classify a stored cell value as empty, a usable date, or something the picker
  * cannot represent.
  *
- * Numeric schema types store epoch milliseconds, but an imported value can
- * arrive as a numeric string, which dayjs would otherwise read as a year
- * ("1705314600000" parses to 1707). Coercion is attempted only when the string
- * is fully numeric, so an ISO string in a numeric column still parses as a date.
+ * Epoch milliseconds stored as a string are read as a timestamp rather than
+ * handed to dayjs, which would take them for a year — see EPOCH_MILLIS_STRING.
+ *
+ * A `date` format column carries no time of day, so its value is reduced to the
+ * calendar date it names — see toCalendarDate.
  */
-export declare function interpretDateTimeCellValue(rowData: unknown, colType?: JSONSchema7Type): DateTimeCellValue;
-export declare function DateTimeCell({ rowData, setRowData, disabled, colType, active, }: DateTimeCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function interpretDateTimeCellValue(rowData: unknown, format?: string): DateTimeCellValue;
+export declare function DateTimeCell({ rowData, setRowData, disabled, colType, format, active, }: DateTimeCellProps): import("react/jsx-runtime").JSX.Element;
 export type DateTimeColumnProps = {
     colType?: JSONSchema7Type;
+    format?: string;
 };
-export declare function dateTimeColumn({ colType, }: DateTimeColumnProps): Partial<Column>;
+export declare function dateTimeColumn({ colType, format, }: DateTimeColumnProps): Partial<Column>;
 //# sourceMappingURL=DateTimeColumn.d.ts.map

package/dist/components/DataGrid/columns/DateTimeColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeColumn.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/columns/DateTimeColumn.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,OAAO,EAEL,SAAS,EACT,MAAM,EACP,MAAM,wCAAwC,CAAA;AAc/C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG;IAC1C,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,iBAAiB,GACzB;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,KAAK,CAAA;CAAE,GAC7B;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAazC;;;;;;;;GAQG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,OAAO,EAChB,OAAO,CAAC,EAAE,eAAe,GACxB,iBAAiB,CA2BnB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,UAAU,EACV,QAAQ,EACR,OAAO,EACP,MAAM,GACP,EAAE,iBAAiB,2CA0CnB;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,GACR,EAAE,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,CAUvC"}
+{"version":3,"file":"DateTimeColumn.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/columns/DateTimeColumn.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAEpC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,OAAO,EAEL,SAAS,EACT,MAAM,EACP,MAAM,wCAAwC,CAAA;AAyB/C,6EAA6E;AAC7E,eAAO,MAAM,qBAAqB,SAAS,CAAA;AAW3C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG;IAC1C,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,iBAAiB,GACzB;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,KAAK,CAAA;CAAE,GAC7B;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAwDzC;;;;;;;;;GASG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,OAAO,EAChB,MAAM,CAAC,EAAE,MAAM,GACd,iBAAiB,CA6BnB;AAsBD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,UAAU,EACV,QAAQ,EACR,OAAO,EACP,MAAM,EACN,MAAM,GACP,EAAE,iBAAiB,2CAuCnB;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,MAAM,GACP,EAAE,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,CAUvC"}

package/dist/components/DataGrid/columns/DateTimeColumn.js

@@ -1,12 +1,15 @@
 import e from "../../DateTimePicker/DateTimePicker.js";
-import { castCellValueToString as t } from "./AutocompleteColumn.js";
-import { Box as n, Tooltip as r } from "@mui/material";
-import { jsx as i } from "react/jsx-runtime";
-import a from "dayjs";
-import { c as o } from "react/compiler-runtime";
-import s from "lodash-es/isNil";
+import t from "../../DatePicker/DatePicker.js";
+import { castCellValueToString as n } from "./AutocompleteColumn.js";
+import { Box as r, Tooltip as i } from "@mui/material";
+import { jsx as a } from "react/jsx-runtime";
+import o from "dayjs";
+import s from "dayjs/plugin/utc";
+import { c } from "react/compiler-runtime";
+import l from "lodash-es/isNil";
 //#region src/components/DataGrid/columns/DateTimeColumn.tsx
-var c = {
+o.extend(s);
+var u = {
 	display: "flex",
 	alignItems: "center",
 	width: "100%",
@@ -15,70 +18,89 @@ var c = {
 	overflow: "hidden",
 	whiteSpace: "nowrap",
 	textOverflow: "ellipsis"
-};
-function l(e) {
-	return typeof e == "string" || typeof e == "number" || e instanceof Date || a.isDayjs(e);
+}, d = {
+	width: "100%",
+	height: "100%",
+	"& .MuiInputBase-root": {
+		height: "100%",
+		backgroundColor: "inherit"
+	}
+}, f = "date", p = "YYYY-MM-DD", m = /^\d{4}-\d{2}-\d{2}/, h = /^-?\d{11,}$/;
+function g(e) {
+	return typeof e == "string" || typeof e == "number" || e instanceof Date || o.isDayjs(e);
+}
+function _(e) {
+	if (typeof e != "string") return null;
+	let t = e.trim();
+	return h.test(t) ? Number(t) : null;
 }
-function u(e, n) {
-	if (s(e) || typeof e == "string" && e.trim() === "") return { kind: "empty" };
+function v(e, t, n) {
+	return t !== null || typeof e == "number" || e instanceof Date ? o(n.utc().format(p)) : typeof e == "string" && m.test(e.trim()) ? o(e.trim().slice(0, 10)) : o(n.format(p));
+}
+function y(e, t) {
+	if (l(e) || typeof e == "string" && e.trim() === "") return { kind: "empty" };
 	let r = {
 		kind: "unparseable",
-		text: t(e)
+		text: n(e)
 	};
-	if (!l(e)) return r;
-	let i = a(((n === "number" || n === "integer") && typeof e == "string" && Number.isFinite(Number(e)) ? Number(e) : null) ?? e);
-	return i.isValid() ? {
+	if (!g(e)) return r;
+	let i = _(e), a = o(i ?? e);
+	return a.isValid() ? {
 		kind: "date",
-		date: i
+		date: t === "date" ? v(e, i, a) : a
 	} : r;
 }
-function d(t) {
-	let s = o(19), { rowData: l, setRowData: d, disabled: f, colType: p, active: m } = t, h;
-	s[0] !== p || s[1] !== l ? (h = u(l, p), s[0] = p, s[1] = l, s[2] = h) : h = s[2];
-	let g = h;
-	if (g.kind === "unparseable" && !m) {
+function b(e, t, n) {
+	let r = t === "number" || t === "integer";
+	if (n === "date") {
+		let t = e.format(p);
+		return r ? o.utc(t).valueOf() : t;
+	}
+	return r ? e.valueOf() : e.toISOString();
+}
+function x(n) {
+	let s = c(22), { rowData: l, setRowData: f, disabled: p, colType: m, format: h, active: g } = n, _;
+	s[0] !== h || s[1] !== l ? (_ = y(l, h), s[0] = h, s[1] = l, s[2] = _) : _ = s[2];
+	let v = _;
+	if (v.kind === "unparseable" && !g) {
 		let e;
-		s[3] === g.text ? e = s[4] : (e = /* @__PURE__ */ i(n, {
-			sx: c,
-			children: g.text
-		}), s[3] = g.text, s[4] = e);
+		s[3] === v.text ? e = s[4] : (e = /* @__PURE__ */ a(r, {
+			sx: u,
+			children: v.text
+		}), s[3] = v.text, s[4] = e);
 		let t;
-		return s[5] !== g.text || s[6] !== e ? (t = /* @__PURE__ */ i(r, {
-			title: g.text,
+		return s[5] !== v.text || s[6] !== e ? (t = /* @__PURE__ */ a(i, {
+			title: v.text,
 			placement: "top-start",
 			arrow: !0,
 			children: e
-		}), s[5] = g.text, s[6] = e, s[7] = t) : t = s[7], t;
+		}), s[5] = v.text, s[6] = e, s[7] = t) : t = s[7], t;
 	}
-	let _ = g.kind === "date" ? g.date : null, v;
-	s[8] !== p || s[9] !== d ? (v = (e) => {
-		d(e == null ? null : p === "number" || p === "integer" ? a(e).valueOf() : a(e).toISOString());
-	}, s[8] = p, s[9] = d, s[10] = v) : v = s[10];
-	let y = f ? "none" : void 0, b;
-	s[11] === Symbol.for("react.memo_cache_sentinel") ? (b = {
-		height: "100%",
-		backgroundColor: "inherit"
-	}, s[11] = b) : b = s[11];
-	let x;
-	s[12] === y ? x = s[13] : (x = {
-		pointerEvents: y,
-		width: "100%",
-		height: "100%",
-		"& .MuiInputBase-root": b
-	}, s[12] = y, s[13] = x);
-	let S;
-	return s[14] !== f || s[15] !== _ || s[16] !== v || s[17] !== x ? (S = /* @__PURE__ */ i(e, {
-		disabled: f,
-		value: _,
-		onChange: v,
-		sx: x
-	}), s[14] = f, s[15] = _, s[16] = v, s[17] = x, s[18] = S) : S = s[18], S;
+	let x = p ? "none" : void 0, S;
+	s[8] === x ? S = s[9] : (S = {
+		...d,
+		pointerEvents: x
+	}, s[8] = x, s[9] = S);
+	let C = S, w = v.kind === "date" ? v.date : null, T;
+	s[10] !== m || s[11] !== h || s[12] !== f ? (T = (e) => {
+		f(e == null ? null : b(o(e), m, h));
+	}, s[10] = m, s[11] = h, s[12] = f, s[13] = T) : T = s[13];
+	let E;
+	s[14] !== p || s[15] !== C || s[16] !== w || s[17] !== T ? (E = {
+		disabled: p,
+		value: w,
+		onChange: T,
+		sx: C
+	}, s[14] = p, s[15] = C, s[16] = w, s[17] = T, s[18] = E) : E = s[18];
+	let D = E, O;
+	return s[19] !== h || s[20] !== D ? (O = a(h === "date" ? t : e, { ...D }), s[19] = h, s[20] = D, s[21] = O) : O = s[21], O;
 }
-function f({ colType: e }) {
+function S({ colType: e, format: t }) {
 	return {
-		component: ((t) => /* @__PURE__ */ i(d, {
-			...t,
-			colType: e
+		component: ((n) => /* @__PURE__ */ a(x, {
+			...n,
+			colType: e,
+			format: t
 		})),
 		copyValue: ({ rowData: e }) => e,
 		pasteValue: ({ value: e }) => e,
@@ -87,6 +109,6 @@ function f({ colType: e }) {
 	};
 }
 //#endregion
-export { d as DateTimeCell, f as dateTimeColumn, u as interpretDateTimeCellValue };
+export { x as DateTimeCell, f as FULL_DATE_FORMAT_NAME, S as dateTimeColumn, y as interpretDateTimeCellValue };
 
 //# sourceMappingURL=DateTimeColumn.js.map