synapse-react-client 4.0.25 → 4.0.26

package/dist/SWC.index.js

@@ -114,7 +114,7 @@ var x = { BackendDestinationEnum: r }, S = {
 	sendSearchResultsReturnedEvent: y,
 	sendSearchResultReturnedEvent: v,
 	sendSearchResultClickedEvent: _
-}, T = "4.0.25";
+}, T = "4.0.26";
 //#endregion
 export { w as Analytics, a as HttpClient, d as Palettes, o as SynapseClient, C as SynapseComponents, n as SynapseConstants, S as SynapseContext, x as SynapseEnums, m as SynapseQueries, T as SynapseReactClientVersion, p as SynapseSessionManager, i as xssOptions };
 

package/dist/components/DataExplorer/DataExplorer.css

@@ -1 +1 @@
-._dataExplorerTitle_pjkyv_1.MuiTypography-root{color:var(--data-explorer-title-color,var(--synapse-primary-action-color));font-size:36px;line-height:40px}._dataExplorerSubtitle_pjkyv_7.MuiTypography-root{line-height:140%}@media (width>=1024px){._dataExplorerButton_pjkyv_12{width:fit-content}}._dataExplorerTextContainer_pjkyv_17{gap:16px}@media (width>=1024px){._dataExplorerTextContainer_pjkyv_17{flex:0 0 30%;max-width:30%}}._dataExplorerContainer_pjkyv_27{flex-direction:column;flex:1 0 0;align-items:flex-start;gap:60px;padding:40px 0;display:flex}@media (width>=1024px){._dataExplorerContainer_pjkyv_27{flex-direction:row}}._dataContainer_pjkyv_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_pjkyv_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_pjkyv_51{font-size:19.8px}}._dataRowInner_pjkyv_67{flex:1;justify-content:space-between;align-items:center;min-width:0;display:flex}._dataRow_pjkyv_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_pjkyv_51:hover{z-index:1;background-color:#fff;border-color:#e1e1e1;transform:scale(1.1);box-shadow:0 4px 8px #0000001a}._dataRow_pjkyv_51:hover ._viewCta_pjkyv_96{opacity:1;pointer-events:auto}._dataRowLeft_pjkyv_101{flex:1;align-items:center;gap:16px;min-width:0;display:inline-flex}._iconContainer_pjkyv_109{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:49px;height:49px;display:flex}._dataRowNamePill_pjkyv_119{flex:1 1 0;align-items:center;gap:8px;min-width:0;display:flex}._fileCount_pjkyv_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_pjkyv_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_pjkyv_160{color:var(--synapse-primary-action-color,#4d558d);font-size:16px;font-weight:400;line-height:26.4px}._viewCtaIcon_pjkyv_167.MuiSvgIcon-root{color:var(--synapse-primary-action-color,#5a488f);font-size:24px}
+._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}

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

@@ -6,8 +6,22 @@ type DataExplorerProps = {
     sql: string;
     explorePath?: string;
     exploreQuerySql?: string;
-    filterColumnName?: string;
+    facetSql?: string;
 };
-export default function DataExplorer({ sql, title, subtitle, buttonText, buttonLink, explorePath, exploreQuerySql, filterColumnName, }: DataExplorerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DataExplorer
+ *
+ * A reusable component that renders a list of data types/categories with associated icons.
+ * It drives navigation by linking each row to a pre-filtered exploration view.
+ *
+ * How it works:
+ * 1. `sql`: Fetches a configuration table defining the display categories,
+ *    their display order, hex colors, and icons.
+ * 2. `facetSql`: Fetches real-time counts for these categories from the actual
+ *    underlying data table.
+ * 3. Links are dynamically built to point to a target path (`explorePath`) pre-filtered to the
+ *    clicked category.
+ */
+export default function DataExplorer({ sql, title, subtitle, buttonText, buttonLink, explorePath, exploreQuerySql, facetSql, }: DataExplorerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DataExplorer.d.ts.map

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":"AAaA,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,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AASD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,GAAG,EACH,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,EACV,WAAW,EACX,eAAe,EACf,gBAAgB,GACjB,EAAE,iBAAiB,2CA8InB"}
+{"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"}

package/dist/components/DataExplorer/DataExplorer.js

@@ -7,110 +7,117 @@ import n from "../../synapse-queries/entity/useGetQueryResultBundle.js";
 import { useSmartLink as r } from "../SmartLink/useSmartLink.js";
 import { generateEncodedPathAndQueryForSelectedFacetURL as i } from "../QueryWrapper/generateEncodedPathAndQueryForSelectedFacetURL.js";
 import "../QueryWrapper/index.js";
-import a from "../ImageFromSynapseTable.js";
-import o from "./DataExplorer.module.js";
-import { useEffect as s, useMemo as c, useState as l } from "react";
-import { Button as u, Stack as d, Typography as f } from "@mui/material";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import h from "@mui/icons-material/ArrowForward";
+import { getFacets as a } from "../widgets/facet-nav/useFacetPlots.js";
+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";
 //#region src/components/DataExplorer/DataExplorer.tsx
-function g({ sql: g, title: _, subtitle: v, buttonText: y, buttonLink: b, explorePath: x, exploreQuerySql: S, filterColumnName: C }) {
-	let w = _ || v || y, T = r(b), E = e(g), { data: D } = n({
+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 = {
 		partMask: 5,
 		concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
-		entityId: E,
-		query: {
-			sql: g,
-			sort: [{
-				column: "order",
-				direction: "ASC"
-			}]
-		}
-	}), O = c(() => D?.queryResult?.queryResults.rows ?? [], [D]), k = t("datatype", D), A = t("icon", D), j = t("hexColor", D), M = t("fileCount", D), [N, P] = l([]);
-	return s(() => {
-		!x || !C || !S || Promise.all(O.map((e) => {
-			let t = e.values[k]?.trim();
-			return t ? i(x, S, [{
-				facet: C,
+		entityId: O,
+		query: { sql: v }
+	}, j = {
+		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({});
+	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, [{
+				facet: n,
 				facetValue: t
-			}]) : Promise.resolve(x);
-		})).then(P);
+			}]).then((e) => [r, e]);
+		})).then((e) => H(Object.fromEntries(e)));
 	}, [
-		O,
-		k,
-		x,
-		S,
-		C
-	]), /* @__PURE__ */ m("div", {
-		className: o.dataExplorerContainer,
-		children: [w && /* @__PURE__ */ m(d, {
-			className: o.dataExplorerTextContainer,
+		N,
+		F,
+		z,
+		C,
+		w
+	]);
+	let U = l(() => {
+		let e = a(P), 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", {
+		className: s.dataExplorerContainer,
+		children: [E && /* @__PURE__ */ g(p, {
+			className: s.dataExplorerTextContainer,
 			children: [
-				_ && /* @__PURE__ */ p(f, {
+				y && /* @__PURE__ */ h(m, {
 					variant: "headline1",
-					className: o.dataExplorerTitle,
-					children: _
+					className: s.dataExplorerTitle,
+					children: y
 				}),
-				v && /* @__PURE__ */ p(f, {
+				b && /* @__PURE__ */ h(m, {
 					variant: "body1",
 					component: "div",
-					className: o.dataExplorerSubtitle,
-					children: v
+					className: s.dataExplorerSubtitle,
+					children: b
 				}),
-				y && /* @__PURE__ */ p(u, {
+				x && /* @__PURE__ */ h(f, {
 					variant: "contained",
-					className: o.dataExplorerButton,
-					...T,
-					children: y
+					className: s.dataExplorerButton,
+					...D,
+					children: x
 				})
 			]
-		}), /* @__PURE__ */ p("div", {
-			className: o.dataContainer,
-			children: O.map((e, t) => {
-				let n = e.values[k] ?? "", r = e.values[j] ?? void 0, i = N[t], s = e.values[M] ?? "";
-				return /* @__PURE__ */ p("a", {
-					className: o.dataRow,
+		}), /* @__PURE__ */ h("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", {
+					className: s.dataRow,
 					href: i,
-					children: /* @__PURE__ */ m("div", {
-						className: o.dataRowInner,
-						children: [/* @__PURE__ */ m("div", {
-							className: o.dataRowLeft,
-							children: [/* @__PURE__ */ p("div", {
-								className: o.iconContainer,
-								style: r ? { backgroundColor: r } : void 0,
-								children: /* @__PURE__ */ p(a, {
-									tableId: E,
-									fileHandleId: e.values[A],
-									alt: e.values[k] ?? "",
+					children: /* @__PURE__ */ g("div", {
+						className: s.dataRowInner,
+						children: [/* @__PURE__ */ g("div", {
+							className: s.dataRowLeft,
+							children: [/* @__PURE__ */ h("div", {
+								className: s.iconContainer,
+								style: n ? { backgroundColor: n } : void 0,
+								children: /* @__PURE__ */ h(o, {
+									tableId: O,
+									fileHandleId: e.values[I],
+									alt: t,
 									style: {
 										width: 49,
 										height: 49
 									}
 								})
-							}), /* @__PURE__ */ m("div", {
-								className: o.dataRowNamePill,
-								children: [/* @__PURE__ */ p(f, {
-									className: o.dataRowTitle,
-									children: n
-								}), s && /* @__PURE__ */ p("div", {
-									className: o.fileCount,
-									children: s
+							}), /* @__PURE__ */ g("div", {
+								className: s.dataRowNamePill,
+								children: [/* @__PURE__ */ h(m, {
+									className: s.dataRowTitle,
+									children: t
+								}), a && /* @__PURE__ */ h("div", {
+									className: s.facetCount,
+									children: a
 								})]
 							})]
-						}), i && /* @__PURE__ */ m("div", {
-							className: o.viewCta,
-							children: [/* @__PURE__ */ p("span", {
-								className: o.viewCtaText,
+						}), i && /* @__PURE__ */ g("div", {
+							className: s.viewCta,
+							children: [/* @__PURE__ */ h("span", {
+								className: s.viewCtaText,
 								children: "View"
-							}), /* @__PURE__ */ p(h, { className: o.viewCtaIcon })]
+							}), /* @__PURE__ */ h(_, { className: s.viewCtaIcon })]
 						})]
 					})
-				}, e.rowId);
+				}, B(t, r));
 			})
 		})]
 	});
 }
 //#endregion
-export { g as default };
+export { v 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 { QueryBundleRequest } 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'\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  filterColumnName?: string\n}\n\nenum ExpectedColumns {\n  DATATYPE = 'datatype',\n  ICON = 'icon',\n  HEX_COLOR = 'hexColor',\n  FILE_COUNT = 'fileCount',\n}\n\nexport default function DataExplorer({\n  sql,\n  title,\n  subtitle,\n  buttonText,\n  buttonLink,\n  explorePath,\n  exploreQuerySql,\n  filterColumnName,\n}: DataExplorerProps) {\n  const hasTextSection = title || subtitle || buttonText\n  const smartLinkProps = useSmartLink(buttonLink)\n\n  const entityId = parseEntityIdFromSqlStatement(sql)\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      sort: [{ column: 'order', direction: 'ASC' }],\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 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 fileCountColIndex = getFieldIndex(\n    ExpectedColumns.FILE_COUNT,\n    queryResultBundle,\n  )\n\n  const [rowUrls, setRowUrls] = useState<string[]>([])\n\n  useEffect(() => {\n    if (!explorePath || !filterColumnName || !exploreQuerySql) return\n\n    Promise.all(\n      dataRows.map(row => {\n        const dataType = row.values[datatypeColIndex]?.trim()\n        if (!dataType) return Promise.resolve(explorePath)\n        return generateEncodedPathAndQueryForSelectedFacetURL(\n          explorePath,\n          exploreQuerySql,\n          [{ facet: filterColumnName, facetValue: dataType }],\n        )\n      }),\n    ).then(setRowUrls)\n  }, [\n    dataRows,\n    datatypeColIndex,\n    explorePath,\n    exploreQuerySql,\n    filterColumnName,\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        {dataRows.map((row, index) => {\n          const dataType = row.values[datatypeColIndex] ?? ''\n          const hexColor = row.values[hexColorColIndex] ?? undefined\n          const rowUrl = rowUrls[index]\n          const fileCount = row.values[fileCountColIndex] ?? ''\n          return (\n            <a key={row.rowId} className={styles.dataRow} href={rowUrl}>\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={row.values[datatypeColIndex] ?? ''}\n                      style={{ width: 49, height: 49 }}\n                    />\n                  </div>\n                  <div className={styles.dataRowNamePill}>\n                    <Typography className={styles.dataRowTitle}>\n                      {dataType}\n                    </Typography>\n                    {fileCount && (\n                      <div className={styles.fileCount}>{fileCount}</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":";;;;;;;;;;;;;;;;AA+BA,SAAwB,EAAa,EACnC,QACA,UACA,aACA,eACA,eACA,gBACA,oBACA,uBACoB;CACpB,IAAM,IAAiB,KAAS,KAAY,GACtC,IAAiB,EAAa,CAAU,GAExC,IAAW,EAA8B,CAAG,GAc5C,EAAE,MAAM,MACZ,EAAwB;EAZxB,UACE;EAEF,cAAc;EACd;EACA,OAAO;GACL;GACA,MAAM,CAAC;IAAE,QAAQ;IAAS,WAAW;GAAM,CAAC;EAC9C;CAIwB,CAAkB,GAEtC,IAAW,QACT,GAAmB,aAAa,aAAa,QAAQ,CAAC,GAC5D,CAAC,CAAiB,CACpB,GAEM,IAAmB,EAAA,YAEvB,CACF,GAEM,IAAe,EAAA,QAAoC,CAAiB,GAEpE,IAAmB,EAAA,YAEvB,CACF,GAEM,IAAoB,EAAA,aAExB,CACF,GAEM,CAAC,GAAS,KAAc,EAAmB,CAAC,CAAC;CAwBnD,OAtBA,QAAgB;EACV,CAAC,KAAe,CAAC,KAAoB,CAAC,KAE1C,QAAQ,IACN,EAAS,KAAI,MAAO;GAClB,IAAM,IAAW,EAAI,OAAO,IAAmB,KAAK;GAEpD,OADK,IACE,EACL,GACA,GACA,CAAC;IAAE,OAAO;IAAkB,YAAY;GAAS,CAAC,CACpD,IALsB,QAAQ,QAAQ,CAAW;EAMnD,CAAC,CACH,EAAE,KAAK,CAAU;CACnB,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC,GAGC,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACG,KACC,kBAAC,GAAD;GAAO,WAAW,EAAO;aAAzB;IACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,WAAW,EAAO;eAEjB;IACS,CAAA;IAEb,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,WAAU;KACV,WAAW,EAAO;eAEjB;IACS,CAAA;IAEb,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,WAAW,EAAO;KAClB,GAAI;eAEH;IACK,CAAA;GAEL;MAET,kBAAC,OAAD;GAAK,WAAW,EAAO;aACpB,EAAS,KAAK,GAAK,MAAU;IAC5B,IAAM,IAAW,EAAI,OAAO,MAAqB,IAC3C,IAAW,EAAI,OAAO,MAAqB,KAAA,GAC3C,IAAS,EAAQ,IACjB,IAAY,EAAI,OAAO,MAAsB;IACnD,OACE,kBAAC,KAAD;KAAmB,WAAW,EAAO;KAAS,MAAM;eAClD,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACE,kBAAC,OAAD;OAAK,WAAW,EAAO;iBAAvB,CACE,kBAAC,OAAD;QACE,WAAW,EAAO;QAClB,OAAO,IAAW,EAAE,iBAAiB,EAAS,IAAI,KAAA;kBAElD,kBAAC,GAAD;SACE,SAAS;SACT,cAAc,EAAI,OAAO;SACzB,KAAK,EAAI,OAAO,MAAqB;SACrC,OAAO;UAAE,OAAO;UAAI,QAAQ;SAAG;QAChC,CAAA;OACE,CAAA,GACL,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAY,WAAW,EAAO;mBAC3B;QACS,CAAA,GACX,KACC,kBAAC,OAAD;SAAK,WAAW,EAAO;mBAAY;QAAe,CAAA,CAEjD;SACF;UACJ,KACC,kBAAC,OAAD;OAAK,WAAW,EAAO;iBAAvB,CACE,kBAAC,QAAD;QAAM,WAAW,EAAO;kBAAa;OAAU,CAAA,GAC/C,kBAAC,GAAD,EAAkB,WAAW,EAAO,YAAc,CAAA,CAC/C;QAEJ;;IACJ,GA9BK,EAAI,KA8BT;GAEP,CAAC;EACE,CAAA,CACF;;AAET"}
+{"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":";;;;;;;;;;;;;;;;;;AAmDA,SAAwB,EAAa,EACnC,QACA,UACA,aACA,eACA,eACA,gBACA,oBACA,eACoB;CACpB,IAAM,IAAiB,KAAS,KAAY,GACtC,IAAiB,EAAa,CAAU,GAExC,IAAW,EAA8B,CAAG,GAC5C,IAAgB,EAA8B,KAAY,EAAE,GAE5D,IAAyC;EAC7C,UACE;EAEF,cAAc;EACd;EACA,OAAO,EACL,OACF;CACF,GAEM,IAAwC;EAC5C,UAAU;EACV,cAAc;EACd,UAAU;EACV,OAAO,EACL,KAAK,KAAY,GACnB;CACF,GAEM,EAAE,MAAM,MACZ,EAAwB,CAAkB,GAEtC,IAAW,QACT,GAAmB,aAAa,aAAa,QAAQ,CAAC,GAC5D,CAAC,CAAiB,CACpB,GAEM,EAAE,MAAM,MAA2B,EACvC,GACA,EAAE,SAAS,EAAQ,EAAU,CAC/B,GAEM,IAAmB,EAAA,YAEvB,CACF,GAEM,IAAe,EAAA,QAAoC,CAAiB,GAEpE,IAAmB,EAAA,YAEvB,CACF,GAEM,IAAgB,EAAA,SAAqC,CAAiB,GAEtE,IAAqB,EAAA,cAEzB,CACF,GAGM,KAAa,GAAkB,MACnC,IAAa,GAAG,EAAW,IAAI,MAAa,GAExC,CAAC,GAAS,KAAc,EAAiC,CAAC,CAAC;CAEjE,QAAgB;EACV,CAAC,KAAe,CAAC,KACrB,QAAQ,IACN,EAAS,KAAI,MAAO;GAClB,IAAM,IAAW,EAAI,OAAO,IAAmB,KAAK,KAAK,IACnD,IAAa,EAAI,OAAO,IAAqB,KAAK,KAAK,IACvD,IAAS,EAAU,GAAU,CAAU;GAG7C,OAFI,CAAC,KAAY,CAAC,IACT,QAAQ,QAAQ,CAAC,GAAQ,CAAW,CAAU,IAChD,EACL,GACA,GACA,CAAC;IAAE,OAAO;IAAY,YAAY;GAAS,CAAC,CAC9C,EAAE,MAAK,MAAO,CAAC,GAAQ,CAAG,CAAU;EACtC,CAAC,CACH,EAAE,MAAK,MAAW,EAAW,OAAO,YAAY,CAAO,CAAC,CAAC;CAC3D,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC;CAGD,IAAM,IAAsB,QAAc;EACxC,IAAM,IAAS,EACb,CACF,GACM,oBAAM,IAAI,IAAiC;EACjD,KAAK,IAAM,KAAS,GAClB,EAAI,IACF,EAAM,YACN,IAAI,IAAI,EAAM,YAAY,KAAI,MAAM,CAAC,EAAG,OAAO,EAAG,KAAK,CAAC,CAAC,CAC3D;EAEF,OAAO;CACT,GAAG,CAAC,CAAsB,CAAC,GAErB,KAAiB,GAAkB,MACvC,IAAa,EAAoB,IAAI,CAAU,GAAG,IAAI,CAAQ,IAAI,KAAA,GAG9D,IAAa,EACjB,GACA,EACE,MAAO,OAAO,EAAI,OAAO,iBAAyC,IAClE,MACE,EACE,EAAI,OAAO,IAAmB,KAAK,KAAK,IACxC,EAAI,OAAO,IAAqB,KAAK,KAAK,EAC5C,KAAK,CACT,GACA,CAAC,OAAO,MAAM,CAChB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACG,KACC,kBAAC,GAAD;GAAO,WAAW,EAAO;aAAzB;IACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,WAAW,EAAO;eAEjB;IACS,CAAA;IAEb,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,WAAU;KACV,WAAW,EAAO;eAEjB;IACS,CAAA;IAEb,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,WAAW,EAAO;KAClB,GAAI;eAEH;IACK,CAAA;GAEL;MAET,kBAAC,OAAD;GAAK,WAAW,EAAO;aACpB,EAAW,KAAI,MAAO;IACrB,IAAM,IAAW,EAAI,OAAO,IAAmB,KAAK,KAAK,IACnD,IAAW,EAAI,OAAO,MAAqB,KAAA,GAC3C,IAAa,EAAI,OAAO,IAAqB,KAAK,KAAK,IACvD,IAAS,EAAQ,EAAU,GAAU,CAAU,IAC/C,IAAa,EAAc,GAAU,CAAU;IACrD,OACE,kBAAC,KAAD;KAEE,WAAW,EAAO;KAClB,MAAM;eAEN,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACE,kBAAC,OAAD;OAAK,WAAW,EAAO;iBAAvB,CACE,kBAAC,OAAD;QACE,WAAW,EAAO;QAClB,OAAO,IAAW,EAAE,iBAAiB,EAAS,IAAI,KAAA;kBAElD,kBAAC,GAAD;SACE,SAAS;SACT,cAAc,EAAI,OAAO;SACzB,KAAK;SACL,OAAO;UAAE,OAAO;UAAI,QAAQ;SAAG;QAChC,CAAA;OACE,CAAA,GACL,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAAvB,CACE,kBAAC,GAAD;SAAY,WAAW,EAAO;mBAC3B;QACS,CAAA,GACX,KACC,kBAAC,OAAD;SAAK,WAAW,EAAO;mBAAa;QAAgB,CAAA,CAEnD;SACF;UACJ,KACC,kBAAC,OAAD;OAAK,WAAW,EAAO;iBAAvB,CACE,kBAAC,QAAD;QAAM,WAAW,EAAO;kBAAa;OAAU,CAAA,GAC/C,kBAAC,GAAD,EAAkB,WAAW,EAAO,YAAc,CAAA,CAC/C;QAEJ;;IACJ,GAjCI,EAAU,GAAU,CAAU,CAiClC;GAEP,CAAC;EACE,CAAA,CACF;;AAET"}

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

@@ -1,20 +1,20 @@
 import './DataExplorer.css';var e = {
-	dataExplorerTitle: "_dataExplorerTitle_pjkyv_1",
-	dataExplorerSubtitle: "_dataExplorerSubtitle_pjkyv_7",
-	dataExplorerButton: "_dataExplorerButton_pjkyv_12",
-	dataExplorerTextContainer: "_dataExplorerTextContainer_pjkyv_17",
-	dataExplorerContainer: "_dataExplorerContainer_pjkyv_27",
-	dataContainer: "_dataContainer_pjkyv_41",
-	dataRowTitle: "_dataRowTitle_pjkyv_51",
-	dataRowInner: "_dataRowInner_pjkyv_67",
-	dataRow: "_dataRow_pjkyv_51",
-	viewCta: "_viewCta_pjkyv_96",
-	dataRowLeft: "_dataRowLeft_pjkyv_101",
-	iconContainer: "_iconContainer_pjkyv_109",
-	dataRowNamePill: "_dataRowNamePill_pjkyv_119",
-	fileCount: "_fileCount_pjkyv_127",
-	viewCtaText: "_viewCtaText_pjkyv_160",
-	viewCtaIcon: "_viewCtaIcon_pjkyv_167"
+	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"
 };
 //#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.fileCount {\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: 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":""}

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

@@ -129,7 +129,7 @@
   min-width: 0;
 }
 
-.fileCount {
+.facetCount {
   display: flex;
   padding: 4px 8px;
   justify-content: center;

package/dist/components/DataGrid/components/ColumnHeaderWithTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeaderWithTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/components/ColumnHeaderWithTooltip.tsx"],"names":[],"mappings":"AAIA,KAAK,4BAA4B,GAAG;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAKD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,WAAW,EACX,UAAkB,EAClB,WAAmB,EACnB,WAAmB,EACnB,QAAgB,EAChB,WAAW,GACZ,EAAE,4BAA4B,2CAgF9B"}
+{"version":3,"file":"ColumnHeaderWithTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/components/ColumnHeaderWithTooltip.tsx"],"names":[],"mappings":"AAIA,KAAK,4BAA4B,GAAG;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAKD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,WAAW,EACX,UAAkB,EAClB,WAAmB,EACnB,WAAmB,EACnB,QAAgB,EAChB,WAAW,GACZ,EAAE,4BAA4B,2CA8F9B"}

package/dist/components/DataGrid/components/ColumnHeaderWithTooltip.js

@@ -50,7 +50,20 @@ function u(u) {
 		title: l,
 		placement: "top",
 		enterNextDelay: 500,
-		children: /* @__PURE__ */ r(a, { sx: { fontSize: "1em" } })
+		children: /* @__PURE__ */ r(e, {
+			component: "span",
+			sx: {
+				display: "inline-flex",
+				alignItems: "center",
+				justifyContent: "center",
+				backgroundColor: "primary.main",
+				color: "primary.contrastText",
+				borderRadius: "50%",
+				width: "1.25em",
+				height: "1.25em"
+			},
+			children: /* @__PURE__ */ r(a, { sx: { fontSize: "1em" } })
+		})
 	}), d[9] = b, d[10] = k);
 	let A;
 	d[11] !== S || d[12] !== v || d[13] !== x ? (A = x && v && /* @__PURE__ */ r(n, {

package/dist/components/DataGrid/components/ColumnHeaderWithTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeaderWithTooltip.js","names":["Box","IconButton","Tooltip","Key","PushPin","PushPinOutlined","TOOLTIP_DELAY_SHOW","ColumnHeaderWithTooltipProps","name","description","isRequired","isUpsertKey","showPinIcon","isPinned","onTogglePin","UPSERT_KEY_TOOLTIP_TEXT","ColumnHeaderWithTooltip","t0","$","_c","t1","t2","t3","t4","undefined","t5","Symbol","for","display","gridTemplateColumns","gap","width","alignItems","minWidth","t6","overflow","textOverflow","whiteSpace","t7","t8","color","ml","t9","t10","flexShrink","t11","fontSize","t12","e","stopPropagation","opacity","t13","t14"],"sources":["../../../../src/components/DataGrid/components/ColumnHeaderWithTooltip.tsx"],"sourcesContent":["import { Box, IconButton, Tooltip } from '@mui/material'\nimport { Key, PushPin, PushPinOutlined } from '@mui/icons-material'\nimport { TOOLTIP_DELAY_SHOW } from '@/components/SynapseTable/SynapseTableConstants'\n\ntype ColumnHeaderWithTooltipProps = {\n  name: string\n  description?: string\n  isRequired?: boolean\n  isUpsertKey?: boolean\n  showPinIcon?: boolean\n  isPinned?: boolean\n  onTogglePin?: () => void\n}\n\nconst UPSERT_KEY_TOOLTIP_TEXT =\n  'This property field is the primary key. It is used to match the existing rows when applying updates. If a value already exists the row is updated; if not, a new row is added. If multiple primary keys are defined, all primary key values must match for an existing row to be updated.'\n\n/**\n * Renders a column header. When a description is provided, hovering the column\n * name shows it as a native tooltip; otherwise the column name is shown (useful\n * for truncated headers). An optional pin icon is shown on the right.\n */\nexport function ColumnHeaderWithTooltip({\n  name,\n  description,\n  isRequired = false,\n  isUpsertKey = false,\n  showPinIcon = false,\n  isPinned = false,\n  onTogglePin,\n}: ColumnHeaderWithTooltipProps) {\n  return (\n    <Box\n      data-column-id={name}\n      sx={{\n        display: 'grid',\n        gridTemplateColumns: 'minmax(0, 1fr) auto',\n        gap: 0.5,\n        width: '100%',\n        alignItems: 'center',\n        minWidth: 0,\n      }}\n    >\n      {/* Text area - shrinks first */}\n      <Box\n        component=\"span\"\n        sx={{\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: 'nowrap',\n          minWidth: 0,\n        }}\n        title={description || name}\n      >\n        {name}\n        {isRequired && (\n          <Box component=\"span\" sx={{ color: 'error.main', ml: 0.25 }}>\n            *\n          </Box>\n        )}\n      </Box>\n\n      {/* Icons area - fixed size, never shrinks */}\n      <Box\n        sx={{ display: 'flex', gap: 0.5, flexShrink: 0, alignItems: 'center' }}\n      >\n        {isUpsertKey && (\n          <Tooltip\n            title={UPSERT_KEY_TOOLTIP_TEXT}\n            placement=\"top\"\n            enterNextDelay={TOOLTIP_DELAY_SHOW}\n          >\n            <Key sx={{ fontSize: '1em' }} />\n          </Tooltip>\n        )}\n        {showPinIcon && onTogglePin && (\n          <Tooltip\n            title={isPinned ? 'Unpin column' : 'Pin column'}\n            placement=\"top\"\n            enterNextDelay={TOOLTIP_DELAY_SHOW}\n          >\n            <IconButton\n              size=\"small\"\n              color=\"inherit\"\n              aria-label={isPinned ? 'Unpin column' : 'Pin column'}\n              // Use onMouseDown instead of onClick to prevent column selection\n              // when clicking the pin icon. stopPropagation prevents event bubbling.\n              onMouseDown={e => {\n                e.stopPropagation()\n                onTogglePin()\n              }}\n              sx={{\n                color: 'inherit',\n                opacity: isPinned ? 1 : 0.7,\n                '&:hover': {\n                  opacity: 1,\n                },\n              }}\n            >\n              {isPinned ? (\n                <PushPin fontSize=\"inherit\" />\n              ) : (\n                <PushPinOutlined fontSize=\"inherit\" />\n              )}\n            </IconButton>\n          </Tooltip>\n        )}\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColumnHeaderWithTooltip.js","names":["Box","IconButton","Tooltip","Key","PushPin","PushPinOutlined","TOOLTIP_DELAY_SHOW","ColumnHeaderWithTooltipProps","name","description","isRequired","isUpsertKey","showPinIcon","isPinned","onTogglePin","UPSERT_KEY_TOOLTIP_TEXT","ColumnHeaderWithTooltip","t0","$","_c","t1","t2","t3","t4","undefined","t5","Symbol","for","display","gridTemplateColumns","gap","width","alignItems","minWidth","t6","overflow","textOverflow","whiteSpace","t7","t8","color","ml","t9","t10","flexShrink","t11","justifyContent","backgroundColor","borderRadius","height","fontSize","t12","e","stopPropagation","opacity","t13","t14"],"sources":["../../../../src/components/DataGrid/components/ColumnHeaderWithTooltip.tsx"],"sourcesContent":["import { Box, IconButton, Tooltip } from '@mui/material'\nimport { Key, PushPin, PushPinOutlined } from '@mui/icons-material'\nimport { TOOLTIP_DELAY_SHOW } from '@/components/SynapseTable/SynapseTableConstants'\n\ntype ColumnHeaderWithTooltipProps = {\n  name: string\n  description?: string\n  isRequired?: boolean\n  isUpsertKey?: boolean\n  showPinIcon?: boolean\n  isPinned?: boolean\n  onTogglePin?: () => void\n}\n\nconst UPSERT_KEY_TOOLTIP_TEXT =\n  'This property field is the primary key. It is used to match the existing rows when applying updates. If a value already exists the row is updated; if not, a new row is added. If multiple primary keys are defined, all primary key values must match for an existing row to be updated.'\n\n/**\n * Renders a column header. When a description is provided, hovering the column\n * name shows it as a native tooltip; otherwise the column name is shown (useful\n * for truncated headers). An optional pin icon is shown on the right.\n */\nexport function ColumnHeaderWithTooltip({\n  name,\n  description,\n  isRequired = false,\n  isUpsertKey = false,\n  showPinIcon = false,\n  isPinned = false,\n  onTogglePin,\n}: ColumnHeaderWithTooltipProps) {\n  return (\n    <Box\n      data-column-id={name}\n      sx={{\n        display: 'grid',\n        gridTemplateColumns: 'minmax(0, 1fr) auto',\n        gap: 0.5,\n        width: '100%',\n        alignItems: 'center',\n        minWidth: 0,\n      }}\n    >\n      {/* Text area - shrinks first */}\n      <Box\n        component=\"span\"\n        sx={{\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: 'nowrap',\n          minWidth: 0,\n        }}\n        title={description || name}\n      >\n        {name}\n        {isRequired && (\n          <Box component=\"span\" sx={{ color: 'error.main', ml: 0.25 }}>\n            *\n          </Box>\n        )}\n      </Box>\n\n      {/* Icons area - fixed size, never shrinks */}\n      <Box\n        sx={{ display: 'flex', gap: 0.5, flexShrink: 0, alignItems: 'center' }}\n      >\n        {isUpsertKey && (\n          <Tooltip\n            title={UPSERT_KEY_TOOLTIP_TEXT}\n            placement=\"top\"\n            enterNextDelay={TOOLTIP_DELAY_SHOW}\n          >\n            <Box\n              component=\"span\"\n              sx={{\n                display: 'inline-flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                backgroundColor: 'primary.main',\n                color: 'primary.contrastText',\n                borderRadius: '50%',\n                width: '1.25em',\n                height: '1.25em',\n              }}\n            >\n              <Key sx={{ fontSize: '1em' }} />\n            </Box>\n          </Tooltip>\n        )}\n        {showPinIcon && onTogglePin && (\n          <Tooltip\n            title={isPinned ? 'Unpin column' : 'Pin column'}\n            placement=\"top\"\n            enterNextDelay={TOOLTIP_DELAY_SHOW}\n          >\n            <IconButton\n              size=\"small\"\n              color=\"inherit\"\n              aria-label={isPinned ? 'Unpin column' : 'Pin column'}\n              // Use onMouseDown instead of onClick to prevent column selection\n              // when clicking the pin icon. stopPropagation prevents event bubbling.\n              onMouseDown={e => {\n                e.stopPropagation()\n                onTogglePin()\n              }}\n              sx={{\n                color: 'inherit',\n                opacity: isPinned ? 1 : 0.7,\n                '&:hover': {\n                  opacity: 1,\n                },\n              }}\n            >\n              {isPinned ? (\n                <PushPin fontSize=\"inherit\" />\n              ) : (\n                <PushPinOutlined fontSize=\"inherit\" />\n              )}\n            </IconButton>\n          </Tooltip>\n        )}\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/components/DataGrid/utils/columnFactory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"columnFactory.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/utils/columnFactory.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAA;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAA;AAC7E,OAAO,EAGL,MAAM,EAIP,MAAM,wCAAwC,CAAA;AAuE/C,KAAK,YAAY,GAAG;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAA;IAC7B,gBAAgB,EAAE,eAAe,EAAE,GAAG,MAAM,EAAE,GAAG,IAAI,CAAA;IACrD,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;CACxC,CAAA;AAgMD,wBAAgB,YAAY,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAGzD"}
+{"version":3,"file":"columnFactory.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/utils/columnFactory.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAA;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAA;AAC7E,OAAO,EAGL,MAAM,EAIP,MAAM,wCAAwC,CAAA;AAuE/C,KAAK,YAAY,GAAG;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAA;IAC7B,gBAAgB,EAAE,eAAe,EAAE,GAAG,MAAM,EAAE,GAAG,IAAI,CAAA;IACrD,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;CACxC,CAAA;AAoLD,wBAAgB,YAAY,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAGzD"}

package/dist/components/DataGrid/utils/columnFactory.js

@@ -54,21 +54,18 @@ function g(e, t) {
 	return n.displayName = `CellWithTooltip(${t})`, n;
 }
 function _(e, t) {
-	return t ? "header-upsert-key" : e ? "header-cell-required" : "header-cell";
-}
-function v(e, t) {
 	return ({ rowData: n }) => ({
 		...n,
 		[e]: a(t)
 	});
 }
-function y(e) {
+function v(e) {
 	return (t) => {
 		let n = t.trim();
 		return n === "" ? a(e) : n;
 	};
 }
-function b(e, t) {
+function y(e, t) {
 	let n = {
 		showPinIcon: e.showPinIcon,
 		hasDescription: !!e.description
@@ -85,31 +82,30 @@ function b(e, t) {
 			isPinned: e.isPinned,
 			onTogglePin: e.onTogglePin
 		}),
-		headerClassName: _(e.isRequired, !!e.isUpsertKey),
 		minWidth: a,
 		basis: a,
 		grow: 0,
 		shrink: 0,
 		disabled: e.disabled,
-		deleteValue: v(e.columnName, e.isRequired),
+		deleteValue: _(e.columnName, e.isRequired),
 		pasteValue: o(s.pasteValue, e.columnName, e.schemaPropertyInfo),
 		stickyLeft: e.isPinned
 	};
 }
-var x = {
-	multipleEnum: (e) => b(e, n({
+var b = {
+	multipleEnum: (e) => y(e, n({
 		choices: e.enumeratedValues ?? [],
 		colType: e.typeInfo?.type || null,
 		limitTags: 3,
 		clearValue: a(e.isRequired)
 	})),
-	boolean: (e) => b(e, t({
+	boolean: (e) => y(e, t({
 		choices: [!0, !1],
 		colType: "boolean",
 		clearValue: a(e.isRequired)
 	})),
-	number: (e) => b(e, m),
-	enumerated: (e) => b(e, t({
+	number: (e) => y(e, m),
+	enumerated: (e) => y(e, t({
 		choices: e.enumeratedValues ?? [],
 		colType: e.typeInfo?.type || null,
 		clearValue: a(e.isRequired)
@@ -124,27 +120,27 @@ var x = {
 			enumeratedValues: null
 		}, i);
 		return {
-			...b(t, n),
+			...y(t, n),
 			minWidth: a,
 			basis: a
 		};
 	},
 	text: (e) => ({
-		...b(e, p({
+		...y(e, p({
 			continuousUpdates: !1,
 			deletedValue: void 0,
-			parseUserInput: y(e.isRequired)
+			parseUserInput: v(e.isRequired)
 		})),
 		cellClassName: "MuiInputBase-input"
 	})
 };
-function S(e, t) {
+function x(e, t) {
 	return e ? e.format === "date-time" ? "date-time" : e.isArray ? "multipleEnum" : e.type === "boolean" ? "boolean" : e.type === "number" || e.type === "integer" ? "number" : t && t.length > 0 ? "enumerated" : "text" : t && t.length > 0 ? "enumerated" : "text";
 }
-function C(e) {
-	return x[S(e.typeInfo, e.enumeratedValues)](e);
+function S(e) {
+	return b[x(e.typeInfo, e.enumeratedValues)](e);
 }
 //#endregion
-export { C as createColumn };
+export { S as createColumn };
 
 //# sourceMappingURL=columnFactory.js.map