npm - synapse-react-client - Versions diffs - 4.0.25 → 4.0.26 - Mend

synapse-react-client 4.0.25 → 4.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/dist/SWC.index.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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}
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}

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

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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"}

package/dist/components/DataExplorer/DataExplorer.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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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"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
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":""}

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

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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,2CA8F9B"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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":";;;;;;AAcA,IAAMe,IACJ;AAOF,SAAOC,EAAAC,GAAA;CAAA,IAAAC,IAAAC,EAAA,EAAA,GAAiC,EAAAX,SAAAC,gBAAAC,YAAAU,GAAAT,aAAAU,GAAAT,aAAAU,GAAAT,UAAAU,GAAAT,mBAAAG,GAGtCP,IAAAU,MAAAI,KAAAA,IAAA,KAAAJ,GACAT,IAAAU,MAAAG,KAAAA,IAAA,KAAAH,GACAT,IAAAU,MAAAE,KAAAA,IAAA,KAAAF,GACAT,IAAAU,MAAAC,KAAAA,IAAA,KAAAD,GAAgBE;CAAA,AAAAP,EAAA,OAAAQ,OAAAC,IAAA,2BAAA,KAMRF,IAAA;EAAAG,SACO;EAAMC,qBACM;EAAqBC,KACrC;EAAGC,OACD;EAAMC,YACD;EAAQC,UACV;CACZ,GAACf,EAAA,KAAAO,KAAAA,IAAAP,EAAA;CAAA,IAAAgB;CAAA,AAAAhB,EAAA,OAAAQ,OAAAC,IAAA,2BAAA,KAKKO,IAAA;EAAAC,UACQ;EAAQC,cACJ;EAAUC,YACZ;EAAQJ,UACV;CACZ,GAACf,EAAA,KAAAgB,KAAAA,IAAAhB,EAAA;CACM,IAAAoB,IAAA7B,KAAAD,GAAmB+B;CAAA,AAAArB,EAAA,OAAAR,IAOzB6B,IAAArB,EAAA,MAJAqB,IAAA7B,KACC,kBAAC,GAAD;EAAe,WAAA;EAAW,IAAA;GAAA8B,OAAS;GAAYC,IAAM;EAAK;YAAG;CAAzD,CAAA,GAGLvB,EAAA,KAAAR,GAAAQ,EAAA,KAAAqB;CAAA,IAAAG;CAAA,AAAAxB,EAAA,OAAAV,KAAAU,EAAA,OAAAoB,KAAApB,EAAA,OAAAqB,KAfHG,IAAA,kBAAC,GAAD;EACY,WAAA;EACN,IAAAR;EAMG,OAAAI;YART,CAUG9B,GACA+B,CAXC;KAgBErB,EAAA,KAAAV,GAAAU,EAAA,KAAAoB,GAAApB,EAAA,KAAAqB,GAAArB,EAAA,KAAAwB,KAAAA,IAAAxB,EAAA;CAAA,IAAAyB;CAAA,AAAAzB,EAAA,OAAAQ,OAAAC,IAAA,2BAAA,KAIAgB,IAAA;EAAAf,SAAW;EAAME,KAAO;EAAGc,YAAc;EAACZ,YAAc;CAAS,GAACd,EAAA,KAAAyB,KAAAA,IAAAzB,EAAA;CAAA,IAAA2B;CAAA,AAAA3B,EAAA,OAAAP,~~IAUrEkC~~,IAAA3B,EAAA,~~OARA2B~~,IAAAlC,KACC,kBAAC,GAAD;EACSI,OAAAA;EACG,WAAA;EACMT,gBAAAA;YAEhB,kBAAC,GAAD,EAAS,IAAA,~~EAAAwC~~,UAAY,MAAM,EAAC,CAAA;~~CALtB~~,CAAA,~~GAOT5B~~,EAAA,KAAAP,GAAAO,EAAA,MAAA2B;CAAA,~~IAAAE~~;CAAA,~~AAAA7B~~,EAAA,QAAAL,KAAAK,EAAA,QAAAJ,KAAAI,EAAA,QAAAN,~~KACAmC~~,~~IAAAnC~~,KAAAE,KACC,kBAAC,GAAD;EACS,OAAAD,IAAA,iBAAA;EACG,WAAA;EACMP,gBAAAA;YAEhB,kBAAC,GAAD;GACO,MAAA;GACC,OAAA;GACM,cAAAO,IAAA,iBAAA;GAGC,~~cAAAmC~~,MAAA;~~IAEXlC~~,~~AADAkC~~,EAACC,gBAAiB,~~GAClBnC~~,EAAY;GAAC;GAEX,IAAA;IAAA0B,OACK;~~IAASU~~,~~SACPrC~~,IAAA,IAAA;IAAkB,WAChB,~~EAAAqC~~,SACA,EACX;GACF;aAGE,~~EADDrC~~,IACE,IAEA,GAFD,EAAkB,UAAA,UAAS,CAEQ;EArB5B,CAAA;CALL,CAAA,GA8BTK,EAAA,MAAAL,GAAAK,EAAA,MAAAJ,GAAAI,EAAA,MAAAN,GAAAM,EAAA,~~MAAA6B~~,KAAAA,~~IAAA7B~~,EAAA;CAAA,~~IAAAiC~~;CAAA,~~AAAAjC~~,EAAA,QAAA2B,KAAA3B,EAAA,~~QAAA6B~~,~~KA3CHI~~,IAAA,kBAAC,GAAD;EACM,~~IAAAR~~;YADN,CAGGE,~~GASAE~~,~~CAZC~~;~~KA4CE7B~~,EAAA,MAAA2B,GAAA3B,EAAA,~~MAAA6B~~,~~GAAA7B~~,EAAA,~~MAAAiC~~,KAAAA,~~IAAAjC~~,EAAA;CAAA,~~IAAAkC~~;CACF,~~OADElC~~,EAAA,QAAAV,KAAAU,EAAA,~~QAAAiC~~,~~KAAAjC~~,EAAA,QAAAwB,~~KA3ERU~~,IAAA,kBAAC,GAAD;~~EACkB5C~~,kBAAAA;EACZ,IAAAiB;YAFN,CAYEiB,~~GAmBAS~~,CA/BE;~~KA4EEjC~~,EAAA,MAAAV,GAAAU,EAAA,~~MAAAiC~~,~~GAAAjC~~,EAAA,MAAAwB,GAAAxB,EAAA,~~MAAAkC~~,KAAAA,~~IAAAlC~~,EAAA,~~KA5ENkC~~;~~AA4EM~~"}
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","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 CHANGED Viewed

	@@ -1 +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"}
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;AAoLD,wBAAgB,YAAY,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAGzD"}

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

@@ -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