synapse-react-client 4.0.19 → 4.0.20

package/dist/components/ExperimentalMode/ExperimentalMode.js

@@ -1,63 +1,57 @@
 import { EXPERIMENTAL_MODE_COOKIE as e } from "../../utils/SynapseConstants.js";
-import { isInSynapseExperimentalMode as t } from "../../synapse-client/SynapseClient.js";
-import { useEffect as n, useState as r } from "react";
-import { Box as i, IconButton as a, Tooltip as o, Typography as s, useTheme as c } from "@mui/material";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import d from "universal-cookie";
-import { InfoOutlined as f } from "@mui/icons-material";
-import p from "react-switch";
+import { Box as t, IconButton as n, Tooltip as r, Typography as i, useTheme as a } from "@mui/material";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useCookieValue as c } from "@react-hookz/web/useCookieValue/index.js";
+import { InfoOutlined as l } from "@mui/icons-material";
+import u from "react-switch";
 //#region src/components/ExperimentalMode/ExperimentalMode.tsx
-var m = "experimental-mode", h = "This mode gives you early access to features that are still in development. Please note that we do not guarantee an absence of errors, and that the data created using these features may be lost during product upgrade.";
-function g({ onExperimentalModeToggle: g }) {
-	let [_, v] = r(!1), y = !0, b = c();
-	n(() => (y && t() && v(!0), () => {
-		y = !1;
-	}), []);
-	let x = () => ({
+var d = "experimental-mode", f = "This mode gives you early access to features that are still in development. Please note that we do not guarantee an absence of errors, and that the data created using these features may be lost during product upgrade.";
+function p({ onExperimentalModeToggle: p }) {
+	let m = a(), [h, g, _] = c(e, {
 		path: "/",
-		domain: window.location.hostname.toLowerCase().endsWith(".synapse.org") ? "synapse.org" : void 0
+		domain: (typeof window < "u" ? window.location.hostname.toLowerCase() : "").endsWith(".synapse.org") ? "synapse.org" : void 0
 	});
-	return /* @__PURE__ */ u(i, {
+	return /* @__PURE__ */ s(t, {
 		sx: {
 			display: "flex",
 			alignItems: "center"
 		},
 		children: [
-			/* @__PURE__ */ l(s, {
+			/* @__PURE__ */ o(i, {
 				component: "label",
 				variant: "body1",
-				htmlFor: m,
+				htmlFor: d,
 				children: "Experimental Mode"
 			}),
-			/* @__PURE__ */ l(o, {
-				title: h,
+			/* @__PURE__ */ o(r, {
+				title: f,
 				arrow: !0,
 				placement: "top",
-				children: /* @__PURE__ */ l(a, {
+				children: /* @__PURE__ */ o(n, {
 					"aria-label": "info",
 					color: "inherit",
 					sx: { "&:hover": { backgroundColor: "transparent" } },
-					children: /* @__PURE__ */ l(f, { sx: { verticalAlign: "middle" } })
+					children: /* @__PURE__ */ o(l, { sx: { verticalAlign: "middle" } })
 				})
 			}),
-			/* @__PURE__ */ l(p, {
-				id: m,
+			/* @__PURE__ */ o(u, {
+				id: d,
 				width: 35,
 				height: 20,
-				onColor: b.palette.secondary.main,
+				onColor: m.palette.secondary.main,
 				checkedIcon: !1,
 				uncheckedIcon: !1,
-				checked: _,
-				onChange: _ ? () => {
-					new d().remove(e, x()), v(!1), g && g(!1);
+				checked: h === "true",
+				onChange: h === "true" ? () => {
+					_(), p && p(!1);
 				} : () => {
-					new d().set(e, "true", x()), v(!0), g && g(!0);
+					g("true"), p && p(!0);
 				}
 			})
 		]
 	});
 }
 //#endregion
-export { g as default };
+export { p as default };
 
 //# sourceMappingURL=ExperimentalMode.js.map

package/dist/components/ExperimentalMode/ExperimentalMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExperimentalMode.js","names":[],"sources":["../../../src/components/ExperimentalMode/ExperimentalMode.tsx"],"sourcesContent":["import { isInSynapseExperimentalMode } from '@/synapse-client/SynapseClient'\nimport { EXPERIMENTAL_MODE_COOKIE } from '@/utils/SynapseConstants'\nimport { InfoOutlined } from '@mui/icons-material'\nimport { Box, IconButton, Tooltip, Typography, useTheme } from '@mui/material'\nimport { useEffect, useState } from 'react'\nimport Switch from 'react-switch'\nimport UniversalCookies from 'universal-cookie'\n\nconst EXPERIMENTAL_MODE_SWITCH_ID = 'experimental-mode'\nconst experimentalModeText =\n  'This mode gives you early access to features that are still in development. Please note that we do not guarantee an absence of errors, and that the data created using these features may be lost during product upgrade.'\n\nexport type ExperimentalModeProps = {\n  onExperimentalModeToggle?: (newValue: boolean) => void\n}\nfunction ExperimentalMode({ onExperimentalModeToggle }: ExperimentalModeProps) {\n  const [isExperimentalModeOn, setIsExperimentalModeOn] =\n    useState<boolean>(false)\n  let mounted = true\n  const theme = useTheme()\n  useEffect(() => {\n    if (mounted) {\n      if (isInSynapseExperimentalMode()) {\n        setIsExperimentalModeOn(true)\n      }\n    }\n    return () => {\n      mounted = false\n    }\n  }, [])\n\n  const getExperimentalModeCookieOptions = () => {\n    const hostname = window.location.hostname.toLowerCase()\n    return {\n      path: '/',\n      domain: hostname.endsWith('.synapse.org') ? 'synapse.org' : undefined,\n    }\n  }\n\n  const createExperimentalModeCookie = () => {\n    const cookies = new UniversalCookies()\n    cookies.set(\n      EXPERIMENTAL_MODE_COOKIE,\n      'true',\n      getExperimentalModeCookieOptions(),\n    )\n    setIsExperimentalModeOn(true)\n    if (onExperimentalModeToggle) {\n      onExperimentalModeToggle(true)\n    }\n  }\n\n  const deleteExperimentalModeCookie = () => {\n    const cookies = new UniversalCookies()\n    cookies.remove(EXPERIMENTAL_MODE_COOKIE, getExperimentalModeCookieOptions())\n    setIsExperimentalModeOn(false)\n    if (onExperimentalModeToggle) {\n      onExperimentalModeToggle(false)\n    }\n  }\n\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center' }}>\n      <Typography\n        component={'label'}\n        variant=\"body1\"\n        htmlFor={EXPERIMENTAL_MODE_SWITCH_ID}\n      >\n        Experimental Mode\n      </Typography>\n      <Tooltip title={experimentalModeText} arrow placement=\"top\">\n        <IconButton\n          aria-label=\"info\"\n          color=\"inherit\"\n          sx={{ '&:hover': { backgroundColor: 'transparent' } }}\n        >\n          <InfoOutlined sx={{ verticalAlign: 'middle' }} />\n        </IconButton>\n      </Tooltip>\n      <Switch\n        id={EXPERIMENTAL_MODE_SWITCH_ID}\n        width={35}\n        height={20}\n        onColor={theme.palette.secondary.main}\n        checkedIcon={false}\n        uncheckedIcon={false}\n        checked={isExperimentalModeOn}\n        onChange={\n          isExperimentalModeOn\n            ? deleteExperimentalModeCookie\n            : createExperimentalModeCookie\n        }\n      />\n    </Box>\n  )\n}\n\nexport default ExperimentalMode\n"],"mappings":";;;;;;;;;AAQA,IAAM,IAA8B,qBAC9B,IACJ;AAKF,SAAS,EAAiB,EAAE,+BAAmD;CAC7E,IAAM,CAAC,GAAsB,KAC3B,EAAkB,GAAM,EACtB,IAAU,IACR,IAAQ,GAAU;AACxB,UACM,KACE,GAA6B,IAC/B,EAAwB,GAAK,QAGpB;AACX,MAAU;KAEX,EAAE,CAAC;CAEN,IAAM,WAEG;EACL,MAAM;EACN,QAHe,OAAO,SAAS,SAAS,aAGhC,CAAS,SAAS,eAAe,GAAG,gBAAgB,KAAA;EAC7D;AAyBH,QACE,kBAAC,GAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,YAAY;GAAU;YAAlD;GACE,kBAAC,GAAD;IACE,WAAW;IACX,SAAQ;IACR,SAAS;cACV;IAEY,CAAA;GACb,kBAAC,GAAD;IAAS,OAAO;IAAsB,OAAA;IAAM,WAAU;cACpD,kBAAC,GAAD;KACE,cAAW;KACX,OAAM;KACN,IAAI,EAAE,WAAW,EAAE,iBAAiB,eAAe,EAAE;eAErD,kBAAC,GAAD,EAAc,IAAI,EAAE,eAAe,UAAU,EAAI,CAAA;KACtC,CAAA;IACL,CAAA;GACV,kBAAC,GAAD;IACE,IAAI;IACJ,OAAO;IACP,QAAQ;IACR,SAAS,EAAM,QAAQ,UAAU;IACjC,aAAa;IACb,eAAe;IACf,SAAS;IACT,UACE,UApCmC;AAIzC,KAFA,IADoB,GACpB,CAAQ,OAAO,GAA0B,GAAkC,CAAC,EAC5E,EAAwB,GAAM,EAC1B,KACF,EAAyB,GAAM;cAlBQ;AAQzC,KANA,IADoB,GACpB,CAAQ,IACN,GACA,QACA,GAAkC,CACnC,EACD,EAAwB,GAAK,EACzB,KACF,EAAyB,GAAK;;IA4C5B,CAAA;GACE"}
+{"version":3,"file":"ExperimentalMode.js","names":[],"sources":["../../../src/components/ExperimentalMode/ExperimentalMode.tsx"],"sourcesContent":["import { EXPERIMENTAL_MODE_COOKIE } from '@/utils/SynapseConstants'\nimport { InfoOutlined } from '@mui/icons-material'\nimport { Box, IconButton, Tooltip, Typography, useTheme } from '@mui/material'\nimport Switch from 'react-switch'\nimport { useCookieValue } from '@react-hookz/web/useCookieValue/index.js'\n\nconst EXPERIMENTAL_MODE_SWITCH_ID = 'experimental-mode'\nconst experimentalModeText =\n  'This mode gives you early access to features that are still in development. Please note that we do not guarantee an absence of errors, and that the data created using these features may be lost during product upgrade.'\n\nexport type ExperimentalModeProps = {\n  onExperimentalModeToggle?: (newValue: boolean) => void\n}\nfunction ExperimentalMode({ onExperimentalModeToggle }: ExperimentalModeProps) {\n  const theme = useTheme()\n\n  const getExperimentalModeCookieOptions = () => {\n    const hostname =\n      typeof window !== 'undefined'\n        ? window.location.hostname.toLowerCase()\n        : ''\n    return {\n      path: '/',\n      domain: hostname.endsWith('.synapse.org') ? 'synapse.org' : undefined,\n    }\n  }\n\n  const [\n    experimentalModeCookie,\n    setExperimentalModeCookie,\n    removeExperimentalModeCookie,\n  ] = useCookieValue(\n    EXPERIMENTAL_MODE_COOKIE,\n    getExperimentalModeCookieOptions(),\n  )\n\n  const createExperimentalModeCookie = () => {\n    setExperimentalModeCookie('true')\n\n    if (onExperimentalModeToggle) {\n      onExperimentalModeToggle(true)\n    }\n  }\n\n  const deleteExperimentalModeCookie = () => {\n    removeExperimentalModeCookie()\n    if (onExperimentalModeToggle) {\n      onExperimentalModeToggle(false)\n    }\n  }\n\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center' }}>\n      <Typography\n        component={'label'}\n        variant=\"body1\"\n        htmlFor={EXPERIMENTAL_MODE_SWITCH_ID}\n      >\n        Experimental Mode\n      </Typography>\n      <Tooltip title={experimentalModeText} arrow placement=\"top\">\n        <IconButton\n          aria-label=\"info\"\n          color=\"inherit\"\n          sx={{ '&:hover': { backgroundColor: 'transparent' } }}\n        >\n          <InfoOutlined sx={{ verticalAlign: 'middle' }} />\n        </IconButton>\n      </Tooltip>\n      <Switch\n        id={EXPERIMENTAL_MODE_SWITCH_ID}\n        width={35}\n        height={20}\n        onColor={theme.palette.secondary.main}\n        checkedIcon={false}\n        uncheckedIcon={false}\n        checked={experimentalModeCookie === 'true'}\n        onChange={\n          experimentalModeCookie === 'true'\n            ? deleteExperimentalModeCookie\n            : createExperimentalModeCookie\n        }\n      />\n    </Box>\n  )\n}\n\nexport default ExperimentalMode\n"],"mappings":";;;;;;;AAMA,IAAM,IAA8B,qBAC9B,IACJ;AAKF,SAAS,EAAiB,EAAE,+BAAmD;CAC7E,IAAM,IAAQ,EAAS,GAajB,CACJ,GACA,GACA,KACE,EACF,GAXO;EACL,MAAM;EACN,SALA,OAAO,SAAW,MACd,OAAO,SAAS,SAAS,YAAY,IACrC,IAGa,SAAS,cAAc,IAAI,gBAAgB,KAAA;CAC9D,CAUF;CAiBA,OACE,kBAAC,GAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,YAAY;EAAS;YAAjD;GACE,kBAAC,GAAD;IACE,WAAW;IACX,SAAQ;IACR,SAAS;cACV;GAEW,CAAA;GACZ,kBAAC,GAAD;IAAS,OAAO;IAAsB,OAAA;IAAM,WAAU;cACpD,kBAAC,GAAD;KACE,cAAW;KACX,OAAM;KACN,IAAI,EAAE,WAAW,EAAE,iBAAiB,cAAc,EAAE;eAEpD,kBAAC,GAAD,EAAc,IAAI,EAAE,eAAe,SAAS,EAAI,CAAA;IACtC,CAAA;GACL,CAAA;GACT,kBAAC,GAAD;IACE,IAAI;IACJ,OAAO;IACP,QAAQ;IACR,SAAS,EAAM,QAAQ,UAAU;IACjC,aAAa;IACb,eAAe;IACf,SAAS,MAA2B;IACpC,UACE,MAA2B,eAlCQ;KAEzC,AADA,EAA6B,GACzB,KACF,EAAyB,EAAK;IAElC,UAb2C;KAGzC,AAFA,EAA0B,MAAM,GAE5B,KACF,EAAyB,EAAI;IAEjC;GAwCK,CAAA;EACE;;AAET"}

package/dist/components/ExternalFileHandleLink/ExternalFileHandleLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalFileHandleLink.js","names":[],"sources":["../../../src/components/ExternalFileHandleLink/ExternalFileHandleLink.tsx"],"sourcesContent":["import React from 'react'\nimport SynapseClient from '@/synapse-client'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { isExternalFileHandle, isFileEntity } from '@/utils/types/IsType'\nimport { OpenInNewTwoTone } from '@mui/icons-material'\nimport {\n  BatchFileRequest,\n  ExternalFileHandle,\n  FileEntity,\n  FileHandleAssociateType,\n} from '@sage-bionetworks/synapse-types'\nimport { useEffect, useState } from 'react'\n\nexport type ExternalFileHandleLinkProps = {\n  synId: string\n  className?: string\n}\n\nexport const ExternalFileHandleLink = (\n  props: ExternalFileHandleLinkProps,\n): React.ReactNode => {\n  const { accessToken } = useSynapseContext()\n  const { synId, className } = props\n  const [data, setData] = useState<\n    | { fileEntity: FileEntity; externalFileHandle: ExternalFileHandle }\n    | undefined\n  >(undefined)\n  useEffect(() => {\n    const getEntity = async () => {\n      try {\n        const fileEntity = await SynapseClient.getEntity<FileEntity>(\n          accessToken,\n          synId,\n        )\n        if (!isFileEntity(fileEntity)) {\n          throw new Error(`File Entity expected but found ${fileEntity}`)\n        }\n        const batchFileRequest: BatchFileRequest = {\n          requestedFiles: [\n            {\n              associateObjectId: synId,\n              associateObjectType: FileHandleAssociateType.FileEntity,\n              fileHandleId: fileEntity.dataFileHandleId,\n            },\n          ],\n          includeFileHandles: true,\n          includePreSignedURLs: false,\n          includePreviewPreSignedURLs: false,\n        }\n        const file = await SynapseClient.getFiles(batchFileRequest, accessToken)\n        const externalFileHandle = file.requestedFiles[0].fileHandle\n        if (externalFileHandle && isExternalFileHandle(externalFileHandle)) {\n          setData({\n            externalFileHandle,\n            fileEntity,\n          })\n        } else {\n          throw new Error(\n            `Not an external file handle: ${externalFileHandle?.id}`,\n          )\n        }\n      } catch (e) {\n        console.error('Error on getting external file handle = ', e)\n      }\n    }\n    getEntity()\n  }, [synId, accessToken])\n\n  const externalFileHandle = data?.externalFileHandle\n  const fileEntity = data?.fileEntity\n\n  return externalFileHandle ? (\n    <a\n      href={externalFileHandle.externalURL}\n      className={className}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n      <span>\n        {fileEntity?.name}\n        <OpenInNewTwoTone style={{ marginLeft: 5 }} />\n      </span>\n    </a>\n  ) : (\n    <></>\n  )\n}\n"],"mappings":";;;;;;;;AAkBA,IAAa,KACX,MACoB;CACpB,IAAM,EAAE,mBAAgB,GAAmB,EACrC,EAAE,UAAO,iBAAc,GACvB,CAAC,GAAM,KAAW,EAGtB,KAAA,EAAU;AACZ,SAAgB;AAsCd,eArC8B;AAC5B,OAAI;IACF,IAAM,IAAa,MAAM,EAAc,UACrC,GACA,EACD;AACD,QAAI,CAAC,EAAa,EAAW,CAC3B,OAAU,MAAM,kCAAkC,IAAa;IAEjE,IAAM,IAAqC;KACzC,gBAAgB,CACd;MACE,mBAAmB;MACnB,qBAAqB,EAAwB;MAC7C,cAAc,EAAW;MAC1B,CACF;KACD,oBAAoB;KACpB,sBAAsB;KACtB,6BAA6B;KAC9B,EAEK,KAAqB,MADR,EAAc,SAAS,GAAkB,EAAY,EACxC,eAAe,GAAG;AAClD,QAAI,KAAsB,EAAqB,EAAmB,CAChE,GAAQ;KACN;KACA;KACD,CAAC;QAEF,OAAU,MACR,gCAAgC,GAAoB,KACrD;YAEI,GAAG;AACV,YAAQ,MAAM,4CAA4C,EAAE;;MAGrD;IACV,CAAC,GAAO,EAAY,CAAC;CAExB,IAAM,IAAqB,GAAM,oBAC3B,IAAa,GAAM;AAEzB,QAAO,IACL,kBAAC,KAAD;EACE,MAAM,EAAmB;EACd;EACX,QAAO;EACP,KAAI;YAEJ,kBAAC,QAAD,EAAA,UAAA,CACG,GAAY,MACb,kBAAC,GAAD,EAAkB,OAAO,EAAE,YAAY,GAAG,EAAI,CAAA,CACzC,EAAA,CAAA;EACL,CAAA,GAEJ,kBAAA,GAAA,EAAK,CAAA"}
+{"version":3,"file":"ExternalFileHandleLink.js","names":[],"sources":["../../../src/components/ExternalFileHandleLink/ExternalFileHandleLink.tsx"],"sourcesContent":["import React from 'react'\nimport SynapseClient from '@/synapse-client'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { isExternalFileHandle, isFileEntity } from '@/utils/types/IsType'\nimport { OpenInNewTwoTone } from '@mui/icons-material'\nimport {\n  BatchFileRequest,\n  ExternalFileHandle,\n  FileEntity,\n  FileHandleAssociateType,\n} from '@sage-bionetworks/synapse-types'\nimport { useEffect, useState } from 'react'\n\nexport type ExternalFileHandleLinkProps = {\n  synId: string\n  className?: string\n}\n\nexport const ExternalFileHandleLink = (\n  props: ExternalFileHandleLinkProps,\n): React.ReactNode => {\n  const { accessToken } = useSynapseContext()\n  const { synId, className } = props\n  const [data, setData] = useState<\n    | { fileEntity: FileEntity; externalFileHandle: ExternalFileHandle }\n    | undefined\n  >(undefined)\n  useEffect(() => {\n    const getEntity = async () => {\n      try {\n        const fileEntity = await SynapseClient.getEntity<FileEntity>(\n          accessToken,\n          synId,\n        )\n        if (!isFileEntity(fileEntity)) {\n          throw new Error(`File Entity expected but found ${fileEntity}`)\n        }\n        const batchFileRequest: BatchFileRequest = {\n          requestedFiles: [\n            {\n              associateObjectId: synId,\n              associateObjectType: FileHandleAssociateType.FileEntity,\n              fileHandleId: fileEntity.dataFileHandleId,\n            },\n          ],\n          includeFileHandles: true,\n          includePreSignedURLs: false,\n          includePreviewPreSignedURLs: false,\n        }\n        const file = await SynapseClient.getFiles(batchFileRequest, accessToken)\n        const externalFileHandle = file.requestedFiles[0].fileHandle\n        if (externalFileHandle && isExternalFileHandle(externalFileHandle)) {\n          setData({\n            externalFileHandle,\n            fileEntity,\n          })\n        } else {\n          throw new Error(\n            `Not an external file handle: ${externalFileHandle?.id}`,\n          )\n        }\n      } catch (e) {\n        console.error('Error on getting external file handle = ', e)\n      }\n    }\n    getEntity()\n  }, [synId, accessToken])\n\n  const externalFileHandle = data?.externalFileHandle\n  const fileEntity = data?.fileEntity\n\n  return externalFileHandle ? (\n    <a\n      href={externalFileHandle.externalURL}\n      className={className}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n      <span>\n        {fileEntity?.name}\n        <OpenInNewTwoTone style={{ marginLeft: 5 }} />\n      </span>\n    </a>\n  ) : (\n    <></>\n  )\n}\n"],"mappings":";;;;;;;;AAkBA,IAAa,KACX,MACoB;CACpB,IAAM,EAAE,mBAAgB,EAAkB,GACpC,EAAE,UAAO,iBAAc,GACvB,CAAC,GAAM,KAAW,EAGtB,KAAA,CAAS;CACX,QAAgB;EAsCd,aArC8B;GAC5B,IAAI;IACF,IAAM,IAAa,MAAM,EAAc,UACrC,GACA,CACF;IACA,IAAI,CAAC,EAAa,CAAU,GAC1B,MAAU,MAAM,kCAAkC,GAAY;IAEhE,IAAM,IAAqC;KACzC,gBAAgB,CACd;MACE,mBAAmB;MACnB,qBAAqB,EAAwB;MAC7C,cAAc,EAAW;KAC3B,CACF;KACA,oBAAoB;KACpB,sBAAsB;KACtB,6BAA6B;IAC/B,GAEM,KAAqB,MADR,EAAc,SAAS,GAAkB,CAAW,GACvC,eAAe,GAAG;IAClD,IAAI,KAAsB,EAAqB,CAAkB,GAC/D,EAAQ;KACN;KACA;IACF,CAAC;SAED,MAAU,MACR,gCAAgC,GAAoB,IACtD;GAEJ,SAAS,GAAG;IACV,QAAQ,MAAM,4CAA4C,CAAC;GAC7D;EACF,GACU;CACZ,GAAG,CAAC,GAAO,CAAW,CAAC;CAEvB,IAAM,IAAqB,GAAM,oBAC3B,IAAa,GAAM;CAEzB,OAAO,IACL,kBAAC,KAAD;EACE,MAAM,EAAmB;EACd;EACX,QAAO;EACP,KAAI;YAEJ,kBAAC,QAAD,EAAA,UAAA,CACG,GAAY,MACb,kBAAC,GAAD,EAAkB,OAAO,EAAE,YAAY,EAAE,EAAI,CAAA,CACzC,EAAA,CAAA;CACL,CAAA,IAEH,kBAAA,GAAA,CAAI,CAAA;AAER"}

package/dist/components/FeaturedDataTabs/FacetPlotsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotsCard.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/FacetPlotsCard.tsx"],"sourcesContent":["import { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  Box,\n  Button,\n  Divider,\n  Paper,\n  Skeleton,\n  Typography,\n} from '@mui/material'\nimport {\n  ColumnTypeEnum,\n  FacetColumnResult,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { useSuspenseQuery } from '@tanstack/react-query'\nimport { times } from 'lodash-es'\nimport Plotly from 'plotly.js-basic-dist'\nimport { Fragment, Suspense, useMemo } from 'react'\nimport Plot from '../Plot/Plot'\nimport { useQueryVisualizationContext } from '../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\nimport { ShowMore } from '../row_renderers/utils'\nimport { SkeletonParagraph, SkeletonTable } from '../Skeleton'\nimport {\n  extractPlotDataArray,\n  getPlotStyle,\n  PlotType,\n} from '../widgets/facet-nav/FacetNavPanel'\nimport { FacetPlotLegendTable } from '../widgets/facet-nav/FacetPlotLegendTable'\nimport { getFacets } from '../widgets/facet-nav/useFacetPlots'\nimport {\n  FACET_PLOTS_CARD_CLASSNAME,\n  FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME,\n  FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME,\n  FacetPlotsCardPlotContainer,\n  FacetPlotsCardTitleContainer,\n} from './FacetPlotsCardGrid'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetPlotsCardProps = {\n  title?: string\n  description?: string\n  facetsToPlot?: string[]\n  detailsPagePath?: string\n  plotType?: PlotType\n}\n\nconst layout: Partial<Plotly.Layout> = {\n  showlegend: false,\n  annotations: [],\n  margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n  yaxis: {\n    visible: false,\n    showgrid: false,\n  },\n  xaxis: {\n    visible: false,\n    showgrid: false,\n  },\n}\n\nfunction LoadingCard(props: { numPlots: number }) {\n  const { numPlots } = props\n  return (\n    <Paper className={FACET_PLOTS_CARD_CLASSNAME}>\n      <FacetPlotsCardTitleContainer\n        className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n      >\n        <Skeleton width={'60%'} height={'24px'} />\n\n        <SkeletonParagraph numRows={5} />\n\n        <Skeleton width={'40%'}>\n          <Button variant={'contained'}>Explore</Button>\n        </Skeleton>\n      </FacetPlotsCardTitleContainer>\n      {times(numPlots).map(index => (\n        <FacetPlotsCardPlotContainer\n          key={index}\n          className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n          sx={{\n            py: 3,\n            gridRow: `plot${index}`,\n          }}\n        >\n          <Skeleton width={'100%'} height={'300px'} />\n          <SkeletonTable numRows={4} numCols={2} />\n        </FacetPlotsCardPlotContainer>\n      ))}\n    </Paper>\n  )\n}\n\nfunction FacetPlotsCard(props: FacetPlotsCardProps) {\n  const {\n    title,\n    description,\n    facetsToPlot,\n    detailsPagePath,\n    plotType = 'PIE',\n  } = props\n  const { accessToken } = useSynapseContext()\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { getColumnDisplayName } = useQueryVisualizationContext()\n  const [plotContainerMeasurements, plotContainerRef] = useMeasure()\n\n  const facetDataArray = useMemo(() => {\n    if (!facetsToPlot) {\n      return []\n    }\n\n    return getFacets(queryMetadata, facetsToPlot)\n  }, [facetsToPlot, queryMetadata])\n\n  const currentLayout: Partial<Plotly.Layout> = useMemo(() => {\n    return {\n      ...layout,\n      barmode: plotType === 'STACKED_HORIZONTAL_BAR' ? 'stack' : undefined,\n    }\n  }, [plotType])\n  const maxPlotHeight = plotType === 'STACKED_HORIZONTAL_BAR' ? 50 : 150\n  const { data: facetPlotDataArray } = useSuspenseQuery({\n    queryKey: ['facetPlotDataArray', facetsToPlot, facetDataArray],\n    queryFn: async () => {\n      if (!facetsToPlot) {\n        return []\n      }\n\n      const getColumnType = (\n        facetToPlot: FacetColumnResult,\n      ): ColumnTypeEnum | undefined =>\n        queryMetadata.columnModels!.find(\n          columnModel => columnModel.name === facetToPlot.columnName,\n        )?.columnType as ColumnTypeEnum\n\n      return Promise.all(\n        facetDataArray.map(async (item, index) => {\n          const plotData = await extractPlotDataArray(\n            item as FacetColumnResultValues,\n            getColumnType(item),\n            index + 1, //individual plot rgbIndex\n            plotType,\n            accessToken,\n          )\n          return plotData\n        }),\n      )\n    },\n  })\n\n  const selectedFacetValue = useMemo(() => {\n    if (!facetsToPlot) {\n      return ''\n    }\n\n    // If we are showing a facet selection based card, then set the selectedFacetValue.  For example, facet column \"study\" with value \"ROSMAP\"\n    const selectedFacet: FacetColumnResultValueCount | undefined = queryMetadata\n      ?.facets!.map(item => {\n        const facetValues: FacetColumnResultValueCount[] = (\n          item as FacetColumnResultValues\n        ).facetValues\n        if (facetValues) {\n          const filteredFacetValues: FacetColumnResultValueCount[] =\n            facetValues.filter(facetValue => {\n              return facetValue.isSelected\n            })\n          return filteredFacetValues.length > 0\n            ? filteredFacetValues[0]\n            : undefined\n        } else {\n          return undefined\n        }\n      })\n      .filter(x => x !== undefined)[0]\n\n    if (selectedFacet && selectedFacet.value) {\n      return selectedFacet?.value\n    }\n    return ''\n  }, [facetsToPlot, queryMetadata?.facets])\n\n  const isShowingMultiplePlots = facetPlotDataArray.length > 1\n  const cardTitle =\n    title ??\n    (isShowingMultiplePlots\n      ? selectedFacetValue\n      : getColumnDisplayName(facetDataArray[0].columnName))\n  return (\n    <Paper className={FACET_PLOTS_CARD_CLASSNAME} sx={{ overflow: 'hidden' }}>\n      <FacetPlotsCardTitleContainer\n        className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n      >\n        <Typography variant={'headline1'}>{cardTitle}</Typography>\n        {description && (\n          <Typography variant={'body1'} sx={{ color: 'grey.700', my: 2 }}>\n            <ShowMore summary={description} maxCharacterCount={200} />\n          </Typography>\n        )}\n\n        {detailsPagePath && selectedFacetValue && (\n          <Box sx={{ my: 2 }}>\n            <Button\n              variant={'contained'}\n              href={detailsPagePath}\n              color={'secondary'}\n              sx={theme => ({\n                [theme.breakpoints.down('sm')]: { width: '100%' },\n              })}\n            >\n              Explore {selectedFacetValue}\n            </Button>\n          </Box>\n        )}\n      </FacetPlotsCardTitleContainer>\n\n      {/* create a plot for every facet to be plotted */}\n      {facetPlotDataArray.map((plotData, index) => {\n        return (\n          <Fragment key={index}>\n            <FacetPlotsCardPlotContainer\n              className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n              sx={{\n                pt: index === 0 ? 5 : 0,\n                gridRow: `plot${index}`,\n              }}\n              key={index}\n            >\n              {index != 0 && <Divider sx={{ mt: 2, mb: 4 }} />}\n              <Box sx={{ minHeight: '130px' }}>\n                <Box\n                  ref={plotContainerRef}\n                  sx={{\n                    display: 'flex',\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                  }}\n                >\n                  <Plot\n                    key={`${facetsToPlot![index]}-${\n                      plotContainerMeasurements?.width\n                    }`}\n                    layout={currentLayout}\n                    data={plotData?.data ?? []}\n                    style={getPlotStyle(\n                      plotContainerMeasurements?.width,\n                      plotType,\n                      maxPlotHeight,\n                    )}\n                    config={{ displayModeBar: false }}\n                  />\n                </Box>\n                <Box sx={{ mt: 4, width: '100%' }}>\n                  <FacetPlotLegendTable\n                    facetName={getColumnDisplayName(\n                      facetDataArray[index].columnName,\n                    )}\n                    labels={plotData?.labels}\n                    colors={plotData?.colors}\n                    isExpanded={false}\n                    linkToFullQuery={detailsPagePath}\n                  />\n                </Box>\n              </Box>\n            </FacetPlotsCardPlotContainer>\n          </Fragment>\n        )\n      })}\n    </Paper>\n  )\n}\n\nexport default function FacetPlotsCardWithSuspense(props: FacetPlotsCardProps) {\n  return (\n    <Suspense\n      fallback={<LoadingCard numPlots={(props.facetsToPlot ?? []).length} />}\n    >\n      <FacetPlotsCard {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"FacetPlotsCard.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/FacetPlotsCard.tsx"],"sourcesContent":["import { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  Box,\n  Button,\n  Divider,\n  Paper,\n  Skeleton,\n  Typography,\n} from '@mui/material'\nimport {\n  ColumnTypeEnum,\n  FacetColumnResult,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { useSuspenseQuery } from '@tanstack/react-query'\nimport { times } from 'lodash-es'\nimport Plotly from 'plotly.js-basic-dist'\nimport { Fragment, Suspense, useMemo } from 'react'\nimport Plot from '../Plot/Plot'\nimport { useQueryVisualizationContext } from '../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\nimport { ShowMore } from '../row_renderers/utils'\nimport { SkeletonParagraph, SkeletonTable } from '../Skeleton'\nimport {\n  extractPlotDataArray,\n  getPlotStyle,\n  PlotType,\n} from '../widgets/facet-nav/FacetNavPanel'\nimport { FacetPlotLegendTable } from '../widgets/facet-nav/FacetPlotLegendTable'\nimport { getFacets } from '../widgets/facet-nav/useFacetPlots'\nimport {\n  FACET_PLOTS_CARD_CLASSNAME,\n  FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME,\n  FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME,\n  FacetPlotsCardPlotContainer,\n  FacetPlotsCardTitleContainer,\n} from './FacetPlotsCardGrid'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetPlotsCardProps = {\n  title?: string\n  description?: string\n  facetsToPlot?: string[]\n  detailsPagePath?: string\n  plotType?: PlotType\n}\n\nconst layout: Partial<Plotly.Layout> = {\n  showlegend: false,\n  annotations: [],\n  margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n  yaxis: {\n    visible: false,\n    showgrid: false,\n  },\n  xaxis: {\n    visible: false,\n    showgrid: false,\n  },\n}\n\nfunction LoadingCard(props: { numPlots: number }) {\n  const { numPlots } = props\n  return (\n    <Paper className={FACET_PLOTS_CARD_CLASSNAME}>\n      <FacetPlotsCardTitleContainer\n        className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n      >\n        <Skeleton width={'60%'} height={'24px'} />\n\n        <SkeletonParagraph numRows={5} />\n\n        <Skeleton width={'40%'}>\n          <Button variant={'contained'}>Explore</Button>\n        </Skeleton>\n      </FacetPlotsCardTitleContainer>\n      {times(numPlots).map(index => (\n        <FacetPlotsCardPlotContainer\n          key={index}\n          className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n          sx={{\n            py: 3,\n            gridRow: `plot${index}`,\n          }}\n        >\n          <Skeleton width={'100%'} height={'300px'} />\n          <SkeletonTable numRows={4} numCols={2} />\n        </FacetPlotsCardPlotContainer>\n      ))}\n    </Paper>\n  )\n}\n\nfunction FacetPlotsCard(props: FacetPlotsCardProps) {\n  const {\n    title,\n    description,\n    facetsToPlot,\n    detailsPagePath,\n    plotType = 'PIE',\n  } = props\n  const { accessToken } = useSynapseContext()\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { getColumnDisplayName } = useQueryVisualizationContext()\n  const [plotContainerMeasurements, plotContainerRef] = useMeasure()\n\n  const facetDataArray = useMemo(() => {\n    if (!facetsToPlot) {\n      return []\n    }\n\n    return getFacets(queryMetadata, facetsToPlot)\n  }, [facetsToPlot, queryMetadata])\n\n  const currentLayout: Partial<Plotly.Layout> = useMemo(() => {\n    return {\n      ...layout,\n      barmode: plotType === 'STACKED_HORIZONTAL_BAR' ? 'stack' : undefined,\n    }\n  }, [plotType])\n  const maxPlotHeight = plotType === 'STACKED_HORIZONTAL_BAR' ? 50 : 150\n  const { data: facetPlotDataArray } = useSuspenseQuery({\n    queryKey: ['facetPlotDataArray', facetsToPlot, facetDataArray],\n    queryFn: async () => {\n      if (!facetsToPlot) {\n        return []\n      }\n\n      const getColumnType = (\n        facetToPlot: FacetColumnResult,\n      ): ColumnTypeEnum | undefined =>\n        queryMetadata.columnModels!.find(\n          columnModel => columnModel.name === facetToPlot.columnName,\n        )?.columnType as ColumnTypeEnum\n\n      return Promise.all(\n        facetDataArray.map(async (item, index) => {\n          const plotData = await extractPlotDataArray(\n            item as FacetColumnResultValues,\n            getColumnType(item),\n            index + 1, //individual plot rgbIndex\n            plotType,\n            accessToken,\n          )\n          return plotData\n        }),\n      )\n    },\n  })\n\n  const selectedFacetValue = useMemo(() => {\n    if (!facetsToPlot) {\n      return ''\n    }\n\n    // If we are showing a facet selection based card, then set the selectedFacetValue.  For example, facet column \"study\" with value \"ROSMAP\"\n    const selectedFacet: FacetColumnResultValueCount | undefined = queryMetadata\n      ?.facets!.map(item => {\n        const facetValues: FacetColumnResultValueCount[] = (\n          item as FacetColumnResultValues\n        ).facetValues\n        if (facetValues) {\n          const filteredFacetValues: FacetColumnResultValueCount[] =\n            facetValues.filter(facetValue => {\n              return facetValue.isSelected\n            })\n          return filteredFacetValues.length > 0\n            ? filteredFacetValues[0]\n            : undefined\n        } else {\n          return undefined\n        }\n      })\n      .filter(x => x !== undefined)[0]\n\n    if (selectedFacet && selectedFacet.value) {\n      return selectedFacet?.value\n    }\n    return ''\n  }, [facetsToPlot, queryMetadata?.facets])\n\n  const isShowingMultiplePlots = facetPlotDataArray.length > 1\n  const cardTitle =\n    title ??\n    (isShowingMultiplePlots\n      ? selectedFacetValue\n      : getColumnDisplayName(facetDataArray[0].columnName))\n  return (\n    <Paper className={FACET_PLOTS_CARD_CLASSNAME} sx={{ overflow: 'hidden' }}>\n      <FacetPlotsCardTitleContainer\n        className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n      >\n        <Typography variant={'headline1'}>{cardTitle}</Typography>\n        {description && (\n          <Typography variant={'body1'} sx={{ color: 'grey.700', my: 2 }}>\n            <ShowMore summary={description} maxCharacterCount={200} />\n          </Typography>\n        )}\n\n        {detailsPagePath && selectedFacetValue && (\n          <Box sx={{ my: 2 }}>\n            <Button\n              variant={'contained'}\n              href={detailsPagePath}\n              color={'secondary'}\n              sx={theme => ({\n                [theme.breakpoints.down('sm')]: { width: '100%' },\n              })}\n            >\n              Explore {selectedFacetValue}\n            </Button>\n          </Box>\n        )}\n      </FacetPlotsCardTitleContainer>\n\n      {/* create a plot for every facet to be plotted */}\n      {facetPlotDataArray.map((plotData, index) => {\n        return (\n          <Fragment key={index}>\n            <FacetPlotsCardPlotContainer\n              className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n              sx={{\n                pt: index === 0 ? 5 : 0,\n                gridRow: `plot${index}`,\n              }}\n              key={index}\n            >\n              {index != 0 && <Divider sx={{ mt: 2, mb: 4 }} />}\n              <Box sx={{ minHeight: '130px' }}>\n                <Box\n                  ref={plotContainerRef}\n                  sx={{\n                    display: 'flex',\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                  }}\n                >\n                  <Plot\n                    key={`${facetsToPlot![index]}-${\n                      plotContainerMeasurements?.width\n                    }`}\n                    layout={currentLayout}\n                    data={plotData?.data ?? []}\n                    style={getPlotStyle(\n                      plotContainerMeasurements?.width,\n                      plotType,\n                      maxPlotHeight,\n                    )}\n                    config={{ displayModeBar: false }}\n                  />\n                </Box>\n                <Box sx={{ mt: 4, width: '100%' }}>\n                  <FacetPlotLegendTable\n                    facetName={getColumnDisplayName(\n                      facetDataArray[index].columnName,\n                    )}\n                    labels={plotData?.labels}\n                    colors={plotData?.colors}\n                    isExpanded={false}\n                    linkToFullQuery={detailsPagePath}\n                  />\n                </Box>\n              </Box>\n            </FacetPlotsCardPlotContainer>\n          </Fragment>\n        )\n      })}\n    </Paper>\n  )\n}\n\nexport default function FacetPlotsCardWithSuspense(props: FacetPlotsCardProps) {\n  return (\n    <Suspense\n      fallback={<LoadingCard numPlots={(props.facetsToPlot ?? []).length} />}\n    >\n      <FacetPlotsCard {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}

package/dist/components/FeaturedDataTabs/FacetPlotsCardGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotsCardGrid.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/FacetPlotsCardGrid.tsx"],"sourcesContent":["import { Box, BoxProps, styled } from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\nexport const FACET_PLOTS_CARD_CLASSNAME = 'FacetPlotsCard'\n\nexport const FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME =\n  'FacetPlotsCardTitleContainer'\n\nexport const FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME =\n  'FacetPlotsCardPlotContainer'\n\nexport const FacetPlotsCardGridContainer: StyledComponent<BoxProps> = styled(\n  Box,\n  {\n    label: 'FacetPlotsCardGridContainer',\n  },\n)(({ theme }) => ({\n  [theme.breakpoints.down('md')]: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(2),\n  },\n  [theme.breakpoints.up('md')]: {\n    /*\n    The grid is broken up into cards which have subcomponents that should be aligned\n    Ideally we could use CSS Subgrid, but it is not widely supported as of the time of writing\n    See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid\n\n    Instead we will use grid with `display: contents`, and style each section to look like a card.\n     */\n    display: 'grid',\n    gridTemplateRows: '[title] auto [plot0] auto',\n    justifyContent: 'center',\n    gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',\n    columnGap: '2%',\n\n    [`.${FACET_PLOTS_CARD_CLASSNAME}`]: {\n      display: 'contents',\n    },\n\n    [`.${FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}, .${FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}`]:\n      {\n        // Since we're using `display:contents`, the card container style will not be displayed.\n        // So add box-shadow to each grid item\n        boxShadow: '0px 3px 10px 0px #5D69AB1A',\n        backgroundColor: theme.palette.background.paper,\n      },\n    [`.${FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}`]: {\n      gridRow: 'title',\n      // For the title portion of the card, use clipPath to hide the box-shadow at the bottom of the section,\n      // since the bottom border is adjacent to the rest of the visual card\n      clipPath: 'inset(-10px -10px 0px -10px)',\n    },\n\n    [`.${FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}`]: {\n      // For the plots section(s), use clipPath to hide the box-shadow at the top and bottom of the section\n      clipPath: 'inset(0px -10px 0px -10px)',\n    },\n    [`.${FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}:last-of-type`]: {\n      // For the last plot section, use clipPath to hide the box-shadow at the top of the section\n      // the bottom box-shadow is shown since this is container marks the bottom of the card (visually)\n      borderBottom: '1px solid #e8e8e8',\n      clipPath: 'inset(0px -10px -10px -10px)',\n    },\n  },\n  [`.${FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}:last-of-type`]: {\n    paddingBottom: theme.spacing(5),\n  },\n}))\n\nexport const FacetPlotsCardTitleContainer: StyledComponent<BoxProps> = styled(\n  Box,\n  {\n    label: 'FacetPlotsCardTitleContainer',\n  },\n)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'start',\n  paddingTop: theme.spacing(5),\n  paddingLeft: theme.spacing(5),\n  paddingRight: theme.spacing(5),\n  minHeight: '64px',\n}))\n\nexport const FacetPlotsCardPlotContainer: StyledComponent<BoxProps> = styled(\n  Box,\n  {\n    label: 'FacetPlotsCardPlotContainer',\n  },\n)(({ theme }) => ({\n  paddingLeft: theme.spacing(5),\n  paddingRight: theme.spacing(5),\n}))\n"],"mappings":";;AAGA,IAAa,IAA6B,kBAE7B,IACX,gCAEW,IACX,+BAEW,IAAyD,EACpE,GACA,EACE,OAAO,+BACR,CACF,EAAE,EAAE,gBAAa;EACf,EAAM,YAAY,KAAK,KAAK,GAAG;EAC9B,SAAS;EACT,eAAe;EACf,KAAK,EAAM,QAAQ,EAAE;EACtB;EACA,EAAM,YAAY,GAAG,KAAK,GAAG;EAQ5B,SAAS;EACT,kBAAkB;EAClB,gBAAgB;EAChB,qBAAqB;EACrB,WAAW;GAEV,IAAI,MAA+B,EAClC,SAAS,YACV;GAEA,IAAI,EAA2C,KAAK,MACnD;GAGE,WAAW;GACX,iBAAiB,EAAM,QAAQ,WAAW;GAC3C;GACF,IAAI,MAA+C;GAClD,SAAS;GAGT,UAAU;GACX;GAEA,IAAI,MAA8C,EAEjD,UAAU,8BACX;GACA,IAAI,EAA0C,iBAAiB;GAG9D,cAAc;GACd,UAAU;GACX;EACF;EACA,IAAI,EAA0C,iBAAiB,EAC9D,eAAe,EAAM,QAAQ,EAAE,EAChC;CACF,EAAE,EAEU,IAA0D,EACrE,GACA,EACE,OAAO,gCACR,CACF,EAAE,EAAE,gBAAa;CAChB,SAAS;CACT,eAAe;CACf,gBAAgB;CAChB,YAAY,EAAM,QAAQ,EAAE;CAC5B,aAAa,EAAM,QAAQ,EAAE;CAC7B,cAAc,EAAM,QAAQ,EAAE;CAC9B,WAAW;CACZ,EAAE,EAEU,IAAyD,EACpE,GACA,EACE,OAAO,+BACR,CACF,EAAE,EAAE,gBAAa;CAChB,aAAa,EAAM,QAAQ,EAAE;CAC7B,cAAc,EAAM,QAAQ,EAAE;CAC/B,EAAE"}
+{"version":3,"file":"FacetPlotsCardGrid.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/FacetPlotsCardGrid.tsx"],"sourcesContent":["import { Box, BoxProps, styled } from '@mui/material'\nimport { StyledComponent } from '@emotion/styled'\n\nexport const FACET_PLOTS_CARD_CLASSNAME = 'FacetPlotsCard'\n\nexport const FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME =\n  'FacetPlotsCardTitleContainer'\n\nexport const FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME =\n  'FacetPlotsCardPlotContainer'\n\nexport const FacetPlotsCardGridContainer: StyledComponent<BoxProps> = styled(\n  Box,\n  {\n    label: 'FacetPlotsCardGridContainer',\n  },\n)(({ theme }) => ({\n  [theme.breakpoints.down('md')]: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(2),\n  },\n  [theme.breakpoints.up('md')]: {\n    /*\n    The grid is broken up into cards which have subcomponents that should be aligned\n    Ideally we could use CSS Subgrid, but it is not widely supported as of the time of writing\n    See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid\n\n    Instead we will use grid with `display: contents`, and style each section to look like a card.\n     */\n    display: 'grid',\n    gridTemplateRows: '[title] auto [plot0] auto',\n    justifyContent: 'center',\n    gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',\n    columnGap: '2%',\n\n    [`.${FACET_PLOTS_CARD_CLASSNAME}`]: {\n      display: 'contents',\n    },\n\n    [`.${FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}, .${FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}`]:\n      {\n        // Since we're using `display:contents`, the card container style will not be displayed.\n        // So add box-shadow to each grid item\n        boxShadow: '0px 3px 10px 0px #5D69AB1A',\n        backgroundColor: theme.palette.background.paper,\n      },\n    [`.${FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}`]: {\n      gridRow: 'title',\n      // For the title portion of the card, use clipPath to hide the box-shadow at the bottom of the section,\n      // since the bottom border is adjacent to the rest of the visual card\n      clipPath: 'inset(-10px -10px 0px -10px)',\n    },\n\n    [`.${FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}`]: {\n      // For the plots section(s), use clipPath to hide the box-shadow at the top and bottom of the section\n      clipPath: 'inset(0px -10px 0px -10px)',\n    },\n    [`.${FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}:last-of-type`]: {\n      // For the last plot section, use clipPath to hide the box-shadow at the top of the section\n      // the bottom box-shadow is shown since this is container marks the bottom of the card (visually)\n      borderBottom: '1px solid #e8e8e8',\n      clipPath: 'inset(0px -10px -10px -10px)',\n    },\n  },\n  [`.${FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}:last-of-type`]: {\n    paddingBottom: theme.spacing(5),\n  },\n}))\n\nexport const FacetPlotsCardTitleContainer: StyledComponent<BoxProps> = styled(\n  Box,\n  {\n    label: 'FacetPlotsCardTitleContainer',\n  },\n)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'start',\n  paddingTop: theme.spacing(5),\n  paddingLeft: theme.spacing(5),\n  paddingRight: theme.spacing(5),\n  minHeight: '64px',\n}))\n\nexport const FacetPlotsCardPlotContainer: StyledComponent<BoxProps> = styled(\n  Box,\n  {\n    label: 'FacetPlotsCardPlotContainer',\n  },\n)(({ theme }) => ({\n  paddingLeft: theme.spacing(5),\n  paddingRight: theme.spacing(5),\n}))\n"],"mappings":";;AAGA,IAAa,IAA6B,kBAE7B,IACX,gCAEW,IACX,+BAEW,IAAyD,EACpE,GACA,EACE,OAAO,8BACT,CACF,GAAG,EAAE,gBAAa;EACf,EAAM,YAAY,KAAK,IAAI,IAAI;EAC9B,SAAS;EACT,eAAe;EACf,KAAK,EAAM,QAAQ,CAAC;CACtB;EACC,EAAM,YAAY,GAAG,IAAI,IAAI;EAQ5B,SAAS;EACT,kBAAkB;EAClB,gBAAgB;EAChB,qBAAqB;EACrB,WAAW;GAEV,IAAI,MAA+B,EAClC,SAAS,WACX;GAEC,IAAI,EAA2C,KAAK,MACnD;GAGE,WAAW;GACX,iBAAiB,EAAM,QAAQ,WAAW;EAC5C;GACD,IAAI,MAA+C;GAClD,SAAS;GAGT,UAAU;EACZ;GAEC,IAAI,MAA8C,EAEjD,UAAU,6BACZ;GACC,IAAI,EAA0C,iBAAiB;GAG9D,cAAc;GACd,UAAU;EACZ;CACF;EACC,IAAI,EAA0C,iBAAiB,EAC9D,eAAe,EAAM,QAAQ,CAAC,EAChC;AACF,EAAE,GAEW,IAA0D,EACrE,GACA,EACE,OAAO,+BACT,CACF,GAAG,EAAE,gBAAa;CAChB,SAAS;CACT,eAAe;CACf,gBAAgB;CAChB,YAAY,EAAM,QAAQ,CAAC;CAC3B,aAAa,EAAM,QAAQ,CAAC;CAC5B,cAAc,EAAM,QAAQ,CAAC;CAC7B,WAAW;AACb,EAAE,GAEW,IAAyD,EACpE,GACA,EACE,OAAO,8BACT,CACF,GAAG,EAAE,gBAAa;CAChB,aAAa,EAAM,QAAQ,CAAC;CAC5B,cAAc,EAAM,QAAQ,CAAC;AAC/B,EAAE"}

package/dist/components/FeaturedDataTabs/FeaturedDataPlots.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeaturedDataPlots.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/FeaturedDataPlots.tsx"],"sourcesContent":["import QueryPerFacetPlotsCard, {\n  QueryPerFacetPlotsCardProps,\n} from './QueryPerFacetPlotsCard'\nimport SingleQueryFacetPlotsCards, {\n  SingleQueryFacetPlotsCardsProps,\n} from './SingleQueryFacetPlotsCards'\nimport { chunk, times } from 'lodash-es'\nimport { FacetPlotsCardGridContainer } from './FacetPlotsCardGrid'\nimport { CARDS_PER_ROW } from './FeaturedDataTabsUtils'\n\nexport type QueryFacetPlotsCardsProps =\n  | QueryPerFacetPlotsCardProps\n  | SingleQueryFacetPlotsCardsProps\n\nexport type FeaturedDataPlotsProps = {\n  configs: QueryFacetPlotsCardsProps[]\n  rgbIndex?: number\n  sql?: string\n  explorePagePath?: string\n}\n\nfunction FeaturedDataPlots(props: FeaturedDataPlotsProps) {\n  const { configs, rgbIndex, sql } = props\n  // What mode are we in?  Either every card has a different selected facet (requiring a different query),\n  // or we're showing the facet counts for a single query.  This controls the layout, and how the cards are populated.\n  const isQueryPerCard = configs && 'selectFacetColumnName' in configs[0]\n  if (!isQueryPerCard) {\n    return (\n      <>\n        {(configs as SingleQueryFacetPlotsCardsProps[]).map((config, idx) => {\n          return (\n            !isQueryPerCard && (\n              <SingleQueryFacetPlotsCards\n                key={idx}\n                {...config}\n                rgbIndex={rgbIndex}\n                sql={sql}\n              />\n            )\n          )\n        })}\n      </>\n    )\n  } else if (isQueryPerCard) {\n    return (\n      <>\n        {chunk(configs as QueryPerFacetPlotsCardProps[], CARDS_PER_ROW).map(\n          (configRow, rowIndex) => {\n            let cssGridTemplateRows = '[title] auto'\n\n            // There may be more than one plot per card, so add a row for each one\n            times(configRow[0].facetsToPlot?.length ?? 1).forEach(\n              (value, index) => {\n                cssGridTemplateRows += ` [plot${index}] auto`\n              },\n            )\n            return (\n              <FacetPlotsCardGridContainer\n                key={rowIndex}\n                sx={{\n                  gridTemplateRows: cssGridTemplateRows,\n                }}\n              >\n                {configRow.map(config => {\n                  return (\n                    <QueryPerFacetPlotsCard\n                      key={config.selectFacetColumnName}\n                      {...config}\n                      rgbIndex={rgbIndex}\n                      sql={sql}\n                    />\n                  )\n                })}\n              </FacetPlotsCardGridContainer>\n            )\n          },\n        )}\n      </>\n    )\n  }\n  return <></>\n}\n\nexport default FeaturedDataPlots\n"],"mappings":";;;;;;;AAqBA,SAAS,EAAkB,GAA+B;CACxD,IAAM,EAAE,YAAS,aAAU,WAAQ,GAG7B,IAAiB,KAAW,2BAA2B,EAAQ;AAuDrE,QAtDK,IAiBM,IAEP,kBAAA,GAAA,EAAA,UACG,EAAM,GAAA,EAAwD,CAAC,KAC7D,GAAW,MAAa;EACvB,IAAI,IAAsB;AAQ1B,SALA,EAAM,EAAU,GAAG,cAAc,UAAU,EAAE,CAAC,SAC3C,GAAO,MAAU;AAChB,QAAuB,SAAS,EAAM;IAEzC,EAEC,kBAAC,GAAD;GAEE,IAAI,EACF,kBAAkB,GACnB;aAEA,EAAU,KAAI,MAEX,kBAAC,GAAD;IAEE,GAAI;IACM;IACL;IACL,EAJK,EAAO,sBAIZ,CAEJ;GAC0B,EAfvB,EAeuB;GAGnC,EACA,CAAA,GAGA,kBAAA,GAAA,EAAK,CAAA,GApDR,kBAAA,GAAA,EAAA,UACI,EAA8C,KAAK,GAAQ,MAEzD,CAAC,KACC,kBAAC,GAAD;EAEE,GAAI;EACM;EACL;EACL,EAJK,EAIL,CAGN,EACD,CAAA"}
+{"version":3,"file":"FeaturedDataPlots.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/FeaturedDataPlots.tsx"],"sourcesContent":["import QueryPerFacetPlotsCard, {\n  QueryPerFacetPlotsCardProps,\n} from './QueryPerFacetPlotsCard'\nimport SingleQueryFacetPlotsCards, {\n  SingleQueryFacetPlotsCardsProps,\n} from './SingleQueryFacetPlotsCards'\nimport { chunk, times } from 'lodash-es'\nimport { FacetPlotsCardGridContainer } from './FacetPlotsCardGrid'\nimport { CARDS_PER_ROW } from './FeaturedDataTabsUtils'\n\nexport type QueryFacetPlotsCardsProps =\n  | QueryPerFacetPlotsCardProps\n  | SingleQueryFacetPlotsCardsProps\n\nexport type FeaturedDataPlotsProps = {\n  configs: QueryFacetPlotsCardsProps[]\n  rgbIndex?: number\n  sql?: string\n  explorePagePath?: string\n}\n\nfunction FeaturedDataPlots(props: FeaturedDataPlotsProps) {\n  const { configs, rgbIndex, sql } = props\n  // What mode are we in?  Either every card has a different selected facet (requiring a different query),\n  // or we're showing the facet counts for a single query.  This controls the layout, and how the cards are populated.\n  const isQueryPerCard = configs && 'selectFacetColumnName' in configs[0]\n  if (!isQueryPerCard) {\n    return (\n      <>\n        {(configs as SingleQueryFacetPlotsCardsProps[]).map((config, idx) => {\n          return (\n            !isQueryPerCard && (\n              <SingleQueryFacetPlotsCards\n                key={idx}\n                {...config}\n                rgbIndex={rgbIndex}\n                sql={sql}\n              />\n            )\n          )\n        })}\n      </>\n    )\n  } else if (isQueryPerCard) {\n    return (\n      <>\n        {chunk(configs as QueryPerFacetPlotsCardProps[], CARDS_PER_ROW).map(\n          (configRow, rowIndex) => {\n            let cssGridTemplateRows = '[title] auto'\n\n            // There may be more than one plot per card, so add a row for each one\n            times(configRow[0].facetsToPlot?.length ?? 1).forEach(\n              (value, index) => {\n                cssGridTemplateRows += ` [plot${index}] auto`\n              },\n            )\n            return (\n              <FacetPlotsCardGridContainer\n                key={rowIndex}\n                sx={{\n                  gridTemplateRows: cssGridTemplateRows,\n                }}\n              >\n                {configRow.map(config => {\n                  return (\n                    <QueryPerFacetPlotsCard\n                      key={config.selectFacetColumnName}\n                      {...config}\n                      rgbIndex={rgbIndex}\n                      sql={sql}\n                    />\n                  )\n                })}\n              </FacetPlotsCardGridContainer>\n            )\n          },\n        )}\n      </>\n    )\n  }\n  return <></>\n}\n\nexport default FeaturedDataPlots\n"],"mappings":";;;;;;;AAqBA,SAAS,EAAkB,GAA+B;CACxD,IAAM,EAAE,YAAS,aAAU,WAAQ,GAG7B,IAAiB,KAAW,2BAA2B,EAAQ;CAuDrE,OAtDK,IAiBM,IAEP,kBAAA,GAAA,EAAA,UACG,EAAM,GAAA,CAAuD,EAAE,KAC7D,GAAW,MAAa;EACvB,IAAI,IAAsB;EAQ1B,OALA,EAAM,EAAU,GAAG,cAAc,UAAU,CAAC,EAAE,SAC3C,GAAO,MAAU;GAChB,KAAuB,SAAS,EAAM;EACxC,CACF,GAEE,kBAAC,GAAD;GAEE,IAAI,EACF,kBAAkB,EACpB;aAEC,EAAU,KAAI,MAEX,kBAAC,GAAD;IAEE,GAAI;IACM;IACL;GACN,GAJM,EAAO,qBAIb,CAEJ;EAC0B,GAftB,CAesB;CAEjC,CACF,EACA,CAAA,IAGC,kBAAA,GAAA,CAAI,CAAA,IApDP,kBAAA,GAAA,EAAA,UACI,EAA8C,KAAK,GAAQ,MAEzD,CAAC,KACC,kBAAC,GAAD;EAEE,GAAI;EACM;EACL;CACN,GAJM,CAIN,CAGN,EACD,CAAA;AAwCR"}

package/dist/components/FeaturedDataTabs/FeaturedDataTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeaturedDataTabs.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/FeaturedDataTabs.tsx"],"sourcesContent":["import { useState } from 'react'\nimport FeaturedDataPlots, { FeaturedDataPlotsProps } from './FeaturedDataPlots'\nimport { Icon } from '../row_renderers/utils'\nimport NoContentAvailable from '../SynapseTable/NoContentAvailable'\nimport { Box, Button } from '@mui/material'\nimport { Paper } from '@mui/material'\n\nexport type FeatureDataTabProps = {\n  title: string // type of data being shown, used for the tab title and explore all button\n  icon?: string\n  exploreObjectType?: string\n  explorePagePath?: string\n  plotsConfig: FeaturedDataPlotsProps\n}\n\nexport type FeaturedDataTabsProps = {\n  configs: FeatureDataTabProps[]\n  rgbIndex: number\n  sql: string\n}\n\nfunction FeaturedDataTabs(props: FeaturedDataTabsProps) {\n  const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0)\n  const { configs, rgbIndex, sql } = props\n  // explore all data button\n  const selectedTabProps: FeatureDataTabProps = configs[selectedTabIndex]\n  return (\n    <Box\n      className=\"FeaturedDataTabs\"\n      sx={{ padding: { xs: '40px', lg: '80px' } }}\n    >\n      {/* tabs */}\n      {configs.length > 1 && (\n        <div className=\"FeaturedDataTabs__tabs\">\n          {configs.map((config, index) => {\n            const isSelectedTabIndex: boolean = index === selectedTabIndex\n            return (\n              <div\n                className={`FeaturedDataTabs__tabs__tab ${\n                  isSelectedTabIndex\n                    ? 'FeaturedDataTabs__tabs__tab__selected'\n                    : ''\n                }`}\n                key={config.title}\n              >\n                <button\n                  className=\"SRC-centerAndJustifyContent\"\n                  onClick={() => setSelectedTabIndex(index)}\n                >\n                  {config.icon && <Icon type={config.icon}></Icon>}\n                  <span>{config.title}</span>\n                </button>\n              </div>\n            )\n          })}\n        </div>\n      )}\n      {/* tab content */}\n      {selectedTabProps && (\n        <>\n          {selectedTabProps.plotsConfig.configs.length > 0 ? (\n            <>\n              <FeaturedDataPlots\n                key={`${sql}-${selectedTabIndex}`}\n                sql={sql}\n                rgbIndex={rgbIndex}\n                explorePagePath={selectedTabProps.explorePagePath}\n                {...selectedTabProps.plotsConfig}\n              />\n              {selectedTabProps.explorePagePath && (\n                <div className=\"FeaturedDataTabs__explore-all\">\n                  <Button\n                    variant=\"contained\"\n                    color=\"secondary\"\n                    href={selectedTabProps.explorePagePath}\n                    sx={theme => ({\n                      mb: '40px',\n                      [theme.breakpoints.down('sm')]: {\n                        width: '100%',\n                      },\n                    })}\n                  >\n                    View All {selectedTabProps.exploreObjectType}\n                  </Button>\n                </div>\n              )}\n            </>\n          ) : (\n            <Paper sx={{ p: 2 }}>\n              <NoContentAvailable />\n            </Paper>\n          )}\n        </>\n      )}\n    </Box>\n  )\n}\n\nexport default FeaturedDataTabs\n"],"mappings":";;;;;;;;AAqBA,SAAS,EAAiB,GAA8B;CACtD,IAAM,CAAC,GAAkB,KAAuB,EAAiB,EAAE,EAC7D,EAAE,YAAS,aAAU,WAAQ,GAE7B,IAAwC,EAAQ;AACtD,QACE,kBAAC,GAAD;EACE,WAAU;EACV,IAAI,EAAE,SAAS;GAAE,IAAI;GAAQ,IAAI;GAAQ,EAAE;YAF7C,CAKG,EAAQ,SAAS,KAChB,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAQ,KAAK,GAAQ,MAGlB,kBAAC,OAAD;IACE,WAAW,+BAHqB,MAAU,IAKpC,0CACA;cAIN,kBAAC,UAAD;KACE,WAAU;KACV,eAAe,EAAoB,EAAM;eAF3C,CAIG,EAAO,QAAQ,kBAAC,GAAD,EAAM,MAAM,EAAO,MAAa,CAAA,EAChD,kBAAC,QAAD,EAAA,UAAO,EAAO,OAAa,CAAA,CACpB;;IACL,EATC,EAAO,MASR,CAER;GACE,CAAA,EAGP,KACC,kBAAA,GAAA,EAAA,UACG,EAAiB,YAAY,QAAQ,SAAS,IAC7C,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAEO;GACK;GACV,iBAAiB,EAAiB;GAClC,GAAI,EAAiB;GACrB,EALK,GAAG,EAAI,GAAG,IAKf,EACD,EAAiB,mBAChB,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAM,EAAiB;IACvB,KAAI,OAAU;KACZ,IAAI;MACH,EAAM,YAAY,KAAK,KAAK,GAAG,EAC9B,OAAO,QACR;KACF;cATH,CAUC,aACW,EAAiB,kBACpB;;GACL,CAAA,CAEP,EAAA,CAAA,GAEH,kBAAC,GAAD;GAAO,IAAI,EAAE,GAAG,GAAG;aACjB,kBAAC,GAAD,EAAsB,CAAA;GAChB,CAAA,EAET,CAAA,CAED"}
+{"version":3,"file":"FeaturedDataTabs.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/FeaturedDataTabs.tsx"],"sourcesContent":["import { useState } from 'react'\nimport FeaturedDataPlots, { FeaturedDataPlotsProps } from './FeaturedDataPlots'\nimport { Icon } from '../row_renderers/utils'\nimport NoContentAvailable from '../SynapseTable/NoContentAvailable'\nimport { Box, Button } from '@mui/material'\nimport { Paper } from '@mui/material'\n\nexport type FeatureDataTabProps = {\n  title: string // type of data being shown, used for the tab title and explore all button\n  icon?: string\n  exploreObjectType?: string\n  explorePagePath?: string\n  plotsConfig: FeaturedDataPlotsProps\n}\n\nexport type FeaturedDataTabsProps = {\n  configs: FeatureDataTabProps[]\n  rgbIndex: number\n  sql: string\n}\n\nfunction FeaturedDataTabs(props: FeaturedDataTabsProps) {\n  const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0)\n  const { configs, rgbIndex, sql } = props\n  // explore all data button\n  const selectedTabProps: FeatureDataTabProps = configs[selectedTabIndex]\n  return (\n    <Box\n      className=\"FeaturedDataTabs\"\n      sx={{ padding: { xs: '40px', lg: '80px' } }}\n    >\n      {/* tabs */}\n      {configs.length > 1 && (\n        <div className=\"FeaturedDataTabs__tabs\">\n          {configs.map((config, index) => {\n            const isSelectedTabIndex: boolean = index === selectedTabIndex\n            return (\n              <div\n                className={`FeaturedDataTabs__tabs__tab ${\n                  isSelectedTabIndex\n                    ? 'FeaturedDataTabs__tabs__tab__selected'\n                    : ''\n                }`}\n                key={config.title}\n              >\n                <button\n                  className=\"SRC-centerAndJustifyContent\"\n                  onClick={() => setSelectedTabIndex(index)}\n                >\n                  {config.icon && <Icon type={config.icon}></Icon>}\n                  <span>{config.title}</span>\n                </button>\n              </div>\n            )\n          })}\n        </div>\n      )}\n      {/* tab content */}\n      {selectedTabProps && (\n        <>\n          {selectedTabProps.plotsConfig.configs.length > 0 ? (\n            <>\n              <FeaturedDataPlots\n                key={`${sql}-${selectedTabIndex}`}\n                sql={sql}\n                rgbIndex={rgbIndex}\n                explorePagePath={selectedTabProps.explorePagePath}\n                {...selectedTabProps.plotsConfig}\n              />\n              {selectedTabProps.explorePagePath && (\n                <div className=\"FeaturedDataTabs__explore-all\">\n                  <Button\n                    variant=\"contained\"\n                    color=\"secondary\"\n                    href={selectedTabProps.explorePagePath}\n                    sx={theme => ({\n                      mb: '40px',\n                      [theme.breakpoints.down('sm')]: {\n                        width: '100%',\n                      },\n                    })}\n                  >\n                    View All {selectedTabProps.exploreObjectType}\n                  </Button>\n                </div>\n              )}\n            </>\n          ) : (\n            <Paper sx={{ p: 2 }}>\n              <NoContentAvailable />\n            </Paper>\n          )}\n        </>\n      )}\n    </Box>\n  )\n}\n\nexport default FeaturedDataTabs\n"],"mappings":";;;;;;;;AAqBA,SAAS,EAAiB,GAA8B;CACtD,IAAM,CAAC,GAAkB,KAAuB,EAAiB,CAAC,GAC5D,EAAE,YAAS,aAAU,WAAQ,GAE7B,IAAwC,EAAQ;CACtD,OACE,kBAAC,GAAD;EACE,WAAU;EACV,IAAI,EAAE,SAAS;GAAE,IAAI;GAAQ,IAAI;EAAO,EAAE;YAF5C,CAKG,EAAQ,SAAS,KAChB,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAQ,KAAK,GAAQ,MAGlB,kBAAC,OAAD;IACE,WAAW,+BAHqB,MAAU,IAKpC,0CACA;cAIN,kBAAC,UAAD;KACE,WAAU;KACV,eAAe,EAAoB,CAAK;eAF1C,CAIG,EAAO,QAAQ,kBAAC,GAAD,EAAM,MAAM,EAAO,KAAY,CAAA,GAC/C,kBAAC,QAAD,EAAA,UAAO,EAAO,MAAY,CAAA,CACpB;;GACL,GATE,EAAO,KAST,CAER;EACE,CAAA,GAGN,KACC,kBAAA,GAAA,EAAA,UACG,EAAiB,YAAY,QAAQ,SAAS,IAC7C,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAEO;GACK;GACV,iBAAiB,EAAiB;GAClC,GAAI,EAAiB;EACtB,GALM,GAAG,EAAI,GAAG,GAKhB,GACA,EAAiB,mBAChB,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAM,EAAiB;IACvB,KAAI,OAAU;KACZ,IAAI;MACH,EAAM,YAAY,KAAK,IAAI,IAAI,EAC9B,OAAO,OACT;IACF;cATF,CAUC,aACW,EAAiB,iBACrB;;EACL,CAAA,CAEP,EAAA,CAAA,IAEF,kBAAC,GAAD;GAAO,IAAI,EAAE,GAAG,EAAE;aAChB,kBAAC,GAAD,CAAqB,CAAA;EAChB,CAAA,EAET,CAAA,CAED;;AAET"}

package/dist/components/FeaturedDataTabs/QueryPerFacetPlotsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryPerFacetPlotsCard.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/QueryPerFacetPlotsCard.tsx"],"sourcesContent":["import { SynapseConstants } from '@/utils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions'\nimport { DEFAULT_PAGE_SIZE } from '@/utils/SynapseConstants'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport {\n  QueryVisualizationContextType,\n  QueryVisualizationWrapper,\n} from '../QueryVisualizationWrapper'\nimport { QueryWrapper } from '../QueryWrapper'\nimport { QueryWrapperErrorBoundary } from '../QueryWrapperErrorBoundary'\nimport FacetPlotsCard, { FacetPlotsCardProps } from './FacetPlotsCard'\n\nexport type QueryPerFacetPlotsCardProps = {\n  title?: string\n  description?: string\n  rgbIndex?: number\n  facetsToPlot?: string[]\n  selectFacetColumnName: string\n  selectFacetColumnValue: string\n  sql?: string\n  detailsPagePath: string\n} & Pick<QueryVisualizationContextType, 'unitDescription'> &\n  Pick<FacetPlotsCardProps, 'plotType'>\n\nfunction getQueryRequest(\n  sql: string,\n  selectFacetColumnName: string,\n  selectFacetColumnValue: string,\n): QueryBundleRequest {\n  const entityId = parseEntityIdFromSqlStatement(sql)\n  return {\n    entityId,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_COLUMN_MODELS |\n      SynapseConstants.BUNDLE_MASK_QUERY_FACETS,\n    query: {\n      sql,\n      offset: 0,\n      limit: DEFAULT_PAGE_SIZE,\n      selectedFacets: [\n        {\n          columnName: selectFacetColumnName,\n          facetValues: [selectFacetColumnValue],\n          concreteType:\n            'org.sagebionetworks.repo.model.table.FacetColumnValuesRequest',\n        },\n      ],\n    },\n  }\n}\nfunction QueryPerFacetPlotsCard(props: QueryPerFacetPlotsCardProps) {\n  const {\n    title,\n    description,\n    sql,\n    facetsToPlot,\n    rgbIndex,\n    selectFacetColumnName,\n    selectFacetColumnValue,\n    detailsPagePath,\n    plotType,\n    ...rest\n  } = props\n  const initQueryRequest: QueryBundleRequest = getQueryRequest(\n    sql!,\n    selectFacetColumnName,\n    selectFacetColumnValue,\n  )\n\n  /**\n   * Fully re-render the uncontrolled QueryWrapper component when the initial query changes. This eliminates a class of\n   * bugs where our 'derived' state (the current query), which should be reset, is out of sync with props.\n   *\n   * See https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key\n   */\n  const queryWrapperKey = JSON.stringify(initQueryRequest)\n  return (\n    <QueryWrapper\n      {...rest}\n      initQueryRequest={initQueryRequest}\n      key={queryWrapperKey}\n    >\n      <QueryVisualizationWrapper rgbIndex={rgbIndex} {...rest}>\n        <QueryWrapperErrorBoundary>\n          <FacetPlotsCard\n            title={title}\n            description={description}\n            facetsToPlot={facetsToPlot}\n            detailsPagePath={detailsPagePath}\n            plotType={plotType}\n          />\n        </QueryWrapperErrorBoundary>\n      </QueryVisualizationWrapper>\n    </QueryWrapper>\n  )\n}\n\nexport default QueryPerFacetPlotsCard\n"],"mappings":";;;;;;;;;;;;;AAwBA,SAAS,EACP,GACA,GACA,GACoB;AAEpB,QAAO;EACL,UAFe,EAA8B,EAE7C;EACA,cAAc;EACd,UACE;EAEF,OAAO;GACL;GACA,QAAQ;GACR,OAAA;GACA,gBAAgB,CACd;IACE,YAAY;IACZ,aAAa,CAAC,EAAuB;IACrC,cACE;IACH,CACF;GACF;EACF;;AAEH,SAAS,EAAuB,GAAoC;CAClE,IAAM,EACJ,UACA,gBACA,QACA,iBACA,aACA,0BACA,2BACA,oBACA,aACA,GAAG,MACD,GACE,IAAuC,EAC3C,GACA,GACA,EACD,EAQK,IAAkB,KAAK,UAAU,EAAiB;AACxD,QACE,kBAAC,GAAD;EACE,GAAI;EACc;EAClB,KAAK;EAaQ,EAXb,kBAAC,GAAD;EAAqC;EAAU,GAAI;YACjD,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GACS;GACM;GACC;GACG;GACP;GACV,CAAA,EACwB,CAAA;EACF,CAAA,CACf"}
+{"version":3,"file":"QueryPerFacetPlotsCard.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/QueryPerFacetPlotsCard.tsx"],"sourcesContent":["import { SynapseConstants } from '@/utils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions'\nimport { DEFAULT_PAGE_SIZE } from '@/utils/SynapseConstants'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport {\n  QueryVisualizationContextType,\n  QueryVisualizationWrapper,\n} from '../QueryVisualizationWrapper'\nimport { QueryWrapper } from '../QueryWrapper'\nimport { QueryWrapperErrorBoundary } from '../QueryWrapperErrorBoundary'\nimport FacetPlotsCard, { FacetPlotsCardProps } from './FacetPlotsCard'\n\nexport type QueryPerFacetPlotsCardProps = {\n  title?: string\n  description?: string\n  rgbIndex?: number\n  facetsToPlot?: string[]\n  selectFacetColumnName: string\n  selectFacetColumnValue: string\n  sql?: string\n  detailsPagePath: string\n} & Pick<QueryVisualizationContextType, 'unitDescription'> &\n  Pick<FacetPlotsCardProps, 'plotType'>\n\nfunction getQueryRequest(\n  sql: string,\n  selectFacetColumnName: string,\n  selectFacetColumnValue: string,\n): QueryBundleRequest {\n  const entityId = parseEntityIdFromSqlStatement(sql)\n  return {\n    entityId,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_COLUMN_MODELS |\n      SynapseConstants.BUNDLE_MASK_QUERY_FACETS,\n    query: {\n      sql,\n      offset: 0,\n      limit: DEFAULT_PAGE_SIZE,\n      selectedFacets: [\n        {\n          columnName: selectFacetColumnName,\n          facetValues: [selectFacetColumnValue],\n          concreteType:\n            'org.sagebionetworks.repo.model.table.FacetColumnValuesRequest',\n        },\n      ],\n    },\n  }\n}\nfunction QueryPerFacetPlotsCard(props: QueryPerFacetPlotsCardProps) {\n  const {\n    title,\n    description,\n    sql,\n    facetsToPlot,\n    rgbIndex,\n    selectFacetColumnName,\n    selectFacetColumnValue,\n    detailsPagePath,\n    plotType,\n    ...rest\n  } = props\n  const initQueryRequest: QueryBundleRequest = getQueryRequest(\n    sql!,\n    selectFacetColumnName,\n    selectFacetColumnValue,\n  )\n\n  /**\n   * Fully re-render the uncontrolled QueryWrapper component when the initial query changes. This eliminates a class of\n   * bugs where our 'derived' state (the current query), which should be reset, is out of sync with props.\n   *\n   * See https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key\n   */\n  const queryWrapperKey = JSON.stringify(initQueryRequest)\n  return (\n    <QueryWrapper\n      {...rest}\n      initQueryRequest={initQueryRequest}\n      key={queryWrapperKey}\n    >\n      <QueryVisualizationWrapper rgbIndex={rgbIndex} {...rest}>\n        <QueryWrapperErrorBoundary>\n          <FacetPlotsCard\n            title={title}\n            description={description}\n            facetsToPlot={facetsToPlot}\n            detailsPagePath={detailsPagePath}\n            plotType={plotType}\n          />\n        </QueryWrapperErrorBoundary>\n      </QueryVisualizationWrapper>\n    </QueryWrapper>\n  )\n}\n\nexport default QueryPerFacetPlotsCard\n"],"mappings":";;;;;;;;;;;;;AAwBA,SAAS,EACP,GACA,GACA,GACoB;CAEpB,OAAO;EACL,UAFe,EAA8B,CAE7C;EACA,cAAc;EACd,UACE;EAEF,OAAO;GACL;GACA,QAAQ;GACR,OAAA;GACA,gBAAgB,CACd;IACE,YAAY;IACZ,aAAa,CAAC,CAAsB;IACpC,cACE;GACJ,CACF;EACF;CACF;AACF;AACA,SAAS,EAAuB,GAAoC;CAClE,IAAM,EACJ,UACA,gBACA,QACA,iBACA,aACA,0BACA,2BACA,oBACA,aACA,GAAG,MACD,GACE,IAAuC,EAC3C,GACA,GACA,CACF,GAQM,IAAkB,KAAK,UAAU,CAAgB;CACvD,OACE,kBAAC,GAAD;EACE,GAAI;EACc;EAClB,KAAK;CAaO,GAXZ,kBAAC,GAAD;EAAqC;EAAU,GAAI;YACjD,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GACS;GACM;GACC;GACG;GACP;EACX,CAAA,EACwB,CAAA;CACF,CAAA,CACf;AAElB"}

package/dist/components/FeaturedDataTabs/SingleQueryFacetPlotsCards.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleQueryFacetPlotsCards.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/SingleQueryFacetPlotsCards.tsx"],"sourcesContent":["import { SynapseConstants } from '@/utils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport { chunk } from 'lodash-es'\nimport {\n  QueryVisualizationContextType,\n  QueryVisualizationWrapper,\n} from '../QueryVisualizationWrapper'\nimport { QueryWrapper } from '../QueryWrapper'\nimport { QueryWrapperErrorBoundary } from '../QueryWrapperErrorBoundary'\nimport FacetPlotsCard, { FacetPlotsCardProps } from './FacetPlotsCard'\nimport { FacetPlotsCardGridContainer } from './FacetPlotsCardGrid'\nimport { CARDS_PER_ROW } from './FeaturedDataTabsUtils'\n\nexport type SingleQueryFacetPlotsCardsProps = {\n  rgbIndex?: number\n  facetsToPlot?: string[]\n  columnAliases?: Record<string, string>\n  sql?: string\n} & Pick<QueryVisualizationContextType, 'unitDescription'> &\n  Pick<FacetPlotsCardProps, 'plotType'>\n\nfunction getQueryRequest(sql: string): QueryBundleRequest {\n  const entityId = parseEntityIdFromSqlStatement(sql)\n  return {\n    entityId,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_COLUMN_MODELS |\n      SynapseConstants.BUNDLE_MASK_QUERY_FACETS,\n    query: {\n      sql,\n      offset: 0,\n      limit: 1,\n    },\n  }\n}\n\nfunction SingleQueryFacetPlotsCards(props: SingleQueryFacetPlotsCardsProps) {\n  const {\n    sql,\n    facetsToPlot,\n    rgbIndex,\n    columnAliases,\n    unitDescription,\n    plotType,\n  } = props\n  const initQueryRequest: QueryBundleRequest = getQueryRequest(sql!)\n\n  /**\n   * Fully re-render the uncontrolled QueryWrapper component when the initial query changes. This eliminates a class of\n   * bugs where our 'derived' state (the current query), which should be reset, is out of sync with props.\n   *\n   * See https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key\n   */\n  const queryWrapperKey = JSON.stringify(initQueryRequest)\n\n  return (\n    <QueryWrapper initQueryRequest={initQueryRequest} key={queryWrapperKey}>\n      <QueryVisualizationWrapper\n        rgbIndex={rgbIndex}\n        columnAliases={columnAliases}\n        unitDescription={unitDescription}\n      >\n        <QueryWrapperErrorBoundary>\n          {chunk(facetsToPlot, CARDS_PER_ROW).map((facets, rowIndex) => {\n            return (\n              <FacetPlotsCardGridContainer\n                key={rowIndex}\n                className={`FeaturedDataPlots__queryPerCard`}\n                sx={{\n                  my: 4,\n                }}\n              >\n                {facets?.map(facetName => {\n                  return (\n                    <FacetPlotsCard\n                      key={facetName}\n                      facetsToPlot={[facetName]}\n                      plotType={plotType}\n                    />\n                  )\n                })}\n              </FacetPlotsCardGridContainer>\n            )\n          })}\n        </QueryWrapperErrorBoundary>\n      </QueryVisualizationWrapper>\n    </QueryWrapper>\n  )\n}\n\nexport default SingleQueryFacetPlotsCards\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,SAAS,EAAgB,GAAiC;AAExD,QAAO;EACL,UAFe,EAA8B,EAE7C;EACA,cAAc;EACd,UACE;EAEF,OAAO;GACL;GACA,QAAQ;GACR,OAAO;GACR;EACF;;AAGH,SAAS,EAA2B,GAAwC;CAC1E,IAAM,EACJ,QACA,iBACA,aACA,kBACA,oBACA,gBACE,GACE,IAAuC,EAAgB,EAAK,EAQ5D,IAAkB,KAAK,UAAU,EAAiB;AAExD,QACE,kBAAC,GAAD;EAAgC;YAC9B,kBAAC,GAAD;GACY;GACK;GACE;aAEjB,kBAAC,GAAD,EAAA,UACG,EAAM,GAAA,EAA4B,CAAC,KAAK,GAAQ,MAE7C,kBAAC,GAAD;IAEE,WAAW;IACX,IAAI,EACF,IAAI,GACL;cAEA,GAAQ,KAAI,MAET,kBAAC,GAAD;KAEE,cAAc,CAAC,EAAU;KACf;KACV,EAHK,EAGL,CAEJ;IAC0B,EAfvB,EAeuB,CAEhC,EACwB,CAAA;GACF,CAAA;EACf,EA9BwC,EA8BxC"}
+{"version":3,"file":"SingleQueryFacetPlotsCards.js","names":[],"sources":["../../../src/components/FeaturedDataTabs/SingleQueryFacetPlotsCards.tsx"],"sourcesContent":["import { SynapseConstants } from '@/utils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport { chunk } from 'lodash-es'\nimport {\n  QueryVisualizationContextType,\n  QueryVisualizationWrapper,\n} from '../QueryVisualizationWrapper'\nimport { QueryWrapper } from '../QueryWrapper'\nimport { QueryWrapperErrorBoundary } from '../QueryWrapperErrorBoundary'\nimport FacetPlotsCard, { FacetPlotsCardProps } from './FacetPlotsCard'\nimport { FacetPlotsCardGridContainer } from './FacetPlotsCardGrid'\nimport { CARDS_PER_ROW } from './FeaturedDataTabsUtils'\n\nexport type SingleQueryFacetPlotsCardsProps = {\n  rgbIndex?: number\n  facetsToPlot?: string[]\n  columnAliases?: Record<string, string>\n  sql?: string\n} & Pick<QueryVisualizationContextType, 'unitDescription'> &\n  Pick<FacetPlotsCardProps, 'plotType'>\n\nfunction getQueryRequest(sql: string): QueryBundleRequest {\n  const entityId = parseEntityIdFromSqlStatement(sql)\n  return {\n    entityId,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_COLUMN_MODELS |\n      SynapseConstants.BUNDLE_MASK_QUERY_FACETS,\n    query: {\n      sql,\n      offset: 0,\n      limit: 1,\n    },\n  }\n}\n\nfunction SingleQueryFacetPlotsCards(props: SingleQueryFacetPlotsCardsProps) {\n  const {\n    sql,\n    facetsToPlot,\n    rgbIndex,\n    columnAliases,\n    unitDescription,\n    plotType,\n  } = props\n  const initQueryRequest: QueryBundleRequest = getQueryRequest(sql!)\n\n  /**\n   * Fully re-render the uncontrolled QueryWrapper component when the initial query changes. This eliminates a class of\n   * bugs where our 'derived' state (the current query), which should be reset, is out of sync with props.\n   *\n   * See https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key\n   */\n  const queryWrapperKey = JSON.stringify(initQueryRequest)\n\n  return (\n    <QueryWrapper initQueryRequest={initQueryRequest} key={queryWrapperKey}>\n      <QueryVisualizationWrapper\n        rgbIndex={rgbIndex}\n        columnAliases={columnAliases}\n        unitDescription={unitDescription}\n      >\n        <QueryWrapperErrorBoundary>\n          {chunk(facetsToPlot, CARDS_PER_ROW).map((facets, rowIndex) => {\n            return (\n              <FacetPlotsCardGridContainer\n                key={rowIndex}\n                className={`FeaturedDataPlots__queryPerCard`}\n                sx={{\n                  my: 4,\n                }}\n              >\n                {facets?.map(facetName => {\n                  return (\n                    <FacetPlotsCard\n                      key={facetName}\n                      facetsToPlot={[facetName]}\n                      plotType={plotType}\n                    />\n                  )\n                })}\n              </FacetPlotsCardGridContainer>\n            )\n          })}\n        </QueryWrapperErrorBoundary>\n      </QueryVisualizationWrapper>\n    </QueryWrapper>\n  )\n}\n\nexport default SingleQueryFacetPlotsCards\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,SAAS,EAAgB,GAAiC;CAExD,OAAO;EACL,UAFe,EAA8B,CAE7C;EACA,cAAc;EACd,UACE;EAEF,OAAO;GACL;GACA,QAAQ;GACR,OAAO;EACT;CACF;AACF;AAEA,SAAS,EAA2B,GAAwC;CAC1E,IAAM,EACJ,QACA,iBACA,aACA,kBACA,oBACA,gBACE,GACE,IAAuC,EAAgB,CAAI,GAQ3D,IAAkB,KAAK,UAAU,CAAgB;CAEvD,OACE,kBAAC,GAAD;EAAgC;YAC9B,kBAAC,GAAD;GACY;GACK;GACE;aAEjB,kBAAC,GAAD,EAAA,UACG,EAAM,GAAA,CAA2B,EAAE,KAAK,GAAQ,MAE7C,kBAAC,GAAD;IAEE,WAAW;IACX,IAAI,EACF,IAAI,EACN;cAEC,GAAQ,KAAI,MAET,kBAAC,GAAD;KAEE,cAAc,CAAC,CAAS;KACd;IACX,GAHM,CAGN,CAEJ;GAC0B,GAftB,CAesB,CAEhC,EACwB,CAAA;EACF,CAAA;CACf,GA9ByC,CA8BzC;AAElB"}

package/dist/components/FeaturedResearch/FeaturedResearch.js

@@ -147,9 +147,7 @@ function b(r) {
 		concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
 		entityId: s,
 		query: { sql: a }
-	}), u = c?.queryResult.queryResults.rows ?? [], f = /* @__PURE__ */ function(e) {
-		return e.TITLE = "title", e.DESCRIPTION = "description", e.PUBLICATION_DATE = "publicationDate", e.IMAGE = "image", e.LINK = "link", e;
-	}({}), h = t(f.TITLE, c), g = t(f.DESCRIPTION, c), _ = t(f.PUBLICATION_DATE, c), b = t(f.IMAGE, c), x = t(f.LINK, c), S = u[0], C = u.slice(1), w = /* @__PURE__ */ p(i, {
+	}), u = c?.queryResult.queryResults.rows ?? [], f = t("title", c), h = t("description", c), g = t("publicationDate", c), _ = t("image", c), b = t("link", c), x = u[0], S = u.slice(1), C = /* @__PURE__ */ p(i, {
 		title: "Featured Research",
 		sx: { h2: {
 			fontSize: "24px",
@@ -176,35 +174,35 @@ function b(r) {
 		children: [
 			/* @__PURE__ */ p(o, {
 				sx: { display: { md: "none" } },
-				children: w
+				children: C
 			}),
-			/* @__PURE__ */ p(o, { children: S && /* @__PURE__ */ p(y, {
+			/* @__PURE__ */ p(o, { children: x && /* @__PURE__ */ p(y, {
 				entityId: s,
-				research: S,
-				titleColIndex: h,
+				research: x,
+				titleColIndex: f,
 				isLoading: l,
-				descriptionColIndex: g,
-				publicationDateColIndex: _,
-				imageColIndex: b,
-				linkColIndex: x
+				descriptionColIndex: h,
+				publicationDateColIndex: g,
+				imageColIndex: _,
+				linkColIndex: b
 			}) }),
 			/* @__PURE__ */ m(d, { children: [/* @__PURE__ */ p(o, {
 				sx: { display: {
 					xs: "none",
 					md: "block"
 				} },
-				children: w
+				children: C
 			}), /* @__PURE__ */ p(d, {
 				sx: { gap: "16px" },
-				children: C.map((e, t) => /* @__PURE__ */ p(v, {
+				children: S.map((e, t) => /* @__PURE__ */ p(v, {
 					entityId: s,
 					research: e,
 					isLoading: l,
-					titleColIndex: h,
-					descriptionColIndex: g,
-					publicationDateColIndex: _,
-					imageColIndex: b,
-					linkColIndex: x
+					titleColIndex: f,
+					descriptionColIndex: h,
+					publicationDateColIndex: g,
+					imageColIndex: _,
+					linkColIndex: b
 				}, t))
 			})] })
 		]

package/dist/components/FeaturedResearch/FeaturedResearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeaturedResearch.js","names":[],"sources":["../../../src/components/FeaturedResearch/FeaturedResearch.tsx"],"sourcesContent":["import React from 'react'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { useImageUrl } from '@/utils/hooks/useImageUrlUtils'\nimport * as SynapseConstants from '@/utils/SynapseConstants'\nimport {\n  Box,\n  CardMedia,\n  Fade,\n  Link,\n  Skeleton,\n  Stack,\n  Typography,\n} from '@mui/material'\nimport { QueryBundleRequest, Row } from '@sage-bionetworks/synapse-types'\nimport dayjs from 'dayjs'\nimport { useInView } from 'react-intersection-observer'\nimport PortalSectionHeader from '../PortalSectionHeader'\n\nconst transitionTimeoutMs = 400\n\nexport type FeaturedResearchProps = {\n  sql: string\n}\n\nexport type FeaturedResearchCardProps = {\n  research: Row\n  entityId: string\n  isLoading: boolean\n  publicationDateColIndex: number\n  titleColIndex: number\n  descriptionColIndex: number\n  linkColIndex: number\n  imageColIndex: number\n}\n\nconst FeaturedResearchCard = ({\n  research,\n  entityId,\n  publicationDateColIndex,\n  titleColIndex,\n  linkColIndex,\n  imageColIndex,\n  isLoading,\n}: FeaturedResearchCardProps): React.ReactNode => {\n  const fileId = research.values[imageColIndex] ?? ''\n  const url = useImageUrl(fileId ?? '', entityId)\n  if (isLoading) {\n    return <Skeleton variant=\"rectangular\" height={142} width=\"100%\" />\n  }\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        gap: '30px',\n        borderBottom: '1px solid',\n        padding: '24px 0',\n        borderColor: 'grey.300',\n        flexDirection: {\n          xs: 'column',\n          sm: 'row',\n        },\n      }}\n    >\n      <Stack\n        useFlexGap\n        sx={{\n          gap: '10px',\n        }}\n      >\n        <Typography\n          variant=\"headline2\"\n          sx={{\n            color: 'gray.1000',\n            fontSize: '21px',\n          }}\n        >\n          <Link\n            href={research.values[linkColIndex] ?? ''}\n            target=\"_blank\"\n            sx={{\n              color: 'grey.1000',\n              textDecoration: 'none',\n              '&:hover': {\n                textDecoration: 'none',\n              },\n            }}\n          >\n            {research.values[titleColIndex]}\n          </Link>\n        </Typography>\n        <Typography\n          sx={{\n            lineHeight: 'normal',\n            color: 'grey.600',\n          }}\n        >\n          {research.values[publicationDateColIndex] &&\n            formatDate(\n              dayjs(Number(research.values[publicationDateColIndex])),\n              'MMMM, YYYY',\n            )}\n        </Typography>\n      </Stack>\n      <CardMedia\n        component=\"img\"\n        image={url}\n        aria-hidden=\"true\"\n        sx={{\n          flexShrink: 0,\n          width: '140px',\n          height: '93.8px',\n          borderRadius: '6px',\n          objectFit: 'cover',\n          marginLeft: { xs: 'initial', sm: 'auto' },\n        }}\n      />\n    </Box>\n  )\n}\n\nconst FeaturedResearchTopCard = ({\n  research,\n  entityId,\n  titleColIndex,\n  descriptionColIndex,\n  linkColIndex,\n  imageColIndex,\n  isLoading,\n}: FeaturedResearchCardProps): React.ReactNode => {\n  const [ref, inView] = useInView({ threshold: 0.3, triggerOnce: true })\n  const fileId = research.values[imageColIndex] ?? ''\n  const url = useImageUrl(fileId || '', entityId)\n  if (isLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width=\"100%\"\n        sx={{\n          height: { xs: '250px', sm: '500px', md: '600px', lg: '800px' },\n        }}\n      />\n    )\n  }\n  return (\n    <Box ref={ref}>\n      <Fade in={inView} timeout={transitionTimeoutMs}>\n        <CardMedia\n          component=\"img\"\n          image={url}\n          aria-hidden=\"true\"\n          sx={{\n            objectFit: 'cover',\n            borderRadius: '10px',\n            marginBottom: '30px',\n          }}\n        />\n      </Fade>\n      <Stack\n        useFlexGap\n        sx={{\n          gap: '16px',\n        }}\n      >\n        <Typography\n          variant=\"headline2\"\n          sx={{ color: 'grey.1000', fontSize: { xs: '24px', md: '36px' } }}\n        >\n          <Link\n            href={research.values[linkColIndex] ?? ''}\n            target=\"_blank\"\n            sx={{\n              color: 'grey.1000',\n              textDecoration: 'none',\n              '&:hover': {\n                textDecoration: 'none',\n              },\n            }}\n          >\n            {research.values[titleColIndex]}\n          </Link>\n        </Typography>\n        <Typography\n          sx={{\n            fontSize: '18px',\n            lineHeight: '22.4px',\n          }}\n        >\n          {research.values[descriptionColIndex] ?? ''}\n        </Typography>\n        <Link href={research.values[linkColIndex] ?? ''} target={'_blank'}>\n          Read more\n        </Link>\n      </Stack>\n    </Box>\n  )\n}\n\nfunction FeaturedResearch(props: FeaturedResearchProps) {\n  const { sql } = props\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    },\n  }\n  const { data: queryResultBundle, isLoading } =\n    useGetQueryResultBundle(queryBundleRequest)\n\n  const dataRows = queryResultBundle?.queryResult!.queryResults.rows ?? []\n\n  enum ExpectedColumns {\n    TITLE = 'title',\n    DESCRIPTION = 'description',\n    PUBLICATION_DATE = 'publicationDate',\n    IMAGE = 'image',\n    LINK = 'link',\n  }\n\n  const titleColIndex = getFieldIndex(ExpectedColumns.TITLE, queryResultBundle)\n  const descriptionColIndex = getFieldIndex(\n    ExpectedColumns.DESCRIPTION,\n    queryResultBundle,\n  )\n  const publicationDateColIndex = getFieldIndex(\n    ExpectedColumns.PUBLICATION_DATE,\n    queryResultBundle,\n  )\n  const imageColIndex = getFieldIndex(ExpectedColumns.IMAGE, queryResultBundle)\n  const linkColIndex = getFieldIndex(ExpectedColumns.LINK, queryResultBundle)\n\n  const topCard = dataRows[0]\n  const remainingCards = dataRows.slice(1)\n\n  const featuredResearchHeader = (\n    <PortalSectionHeader\n      title=\"Featured Research\"\n      sx={{\n        h2: { fontSize: '24px', paddingBottom: 0, width: '100%' },\n      }}\n    />\n  )\n\n  return (\n    <Box\n      sx={{\n        display: 'grid',\n        gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },\n        gap: { xs: '30px', md: '40px' },\n        padding: { xs: '40px', lg: '80px' },\n      }}\n    >\n      <Box sx={{ display: { md: 'none' } }}>{featuredResearchHeader}</Box>\n      <Box>\n        {topCard && (\n          <FeaturedResearchTopCard\n            entityId={entityId}\n            research={topCard}\n            titleColIndex={titleColIndex}\n            isLoading={isLoading}\n            descriptionColIndex={descriptionColIndex}\n            publicationDateColIndex={publicationDateColIndex}\n            imageColIndex={imageColIndex}\n            linkColIndex={linkColIndex}\n          />\n        )}\n      </Box>\n      <Stack>\n        <Box sx={{ display: { xs: 'none', md: 'block' } }}>\n          {featuredResearchHeader}\n        </Box>\n        <Stack\n          sx={{\n            gap: '16px',\n          }}\n        >\n          {remainingCards.map((research, index) => (\n            <FeaturedResearchCard\n              entityId={entityId}\n              research={research}\n              key={index}\n              isLoading={isLoading}\n              titleColIndex={titleColIndex}\n              descriptionColIndex={descriptionColIndex}\n              publicationDateColIndex={publicationDateColIndex}\n              imageColIndex={imageColIndex}\n              linkColIndex={linkColIndex}\n            />\n          ))}\n        </Stack>\n      </Stack>\n    </Box>\n  )\n}\n\nexport default FeaturedResearch\n"],"mappings":"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"}
+{"version":3,"file":"FeaturedResearch.js","names":[],"sources":["../../../src/components/FeaturedResearch/FeaturedResearch.tsx"],"sourcesContent":["import React from 'react'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { useImageUrl } from '@/utils/hooks/useImageUrlUtils'\nimport * as SynapseConstants from '@/utils/SynapseConstants'\nimport {\n  Box,\n  CardMedia,\n  Fade,\n  Link,\n  Skeleton,\n  Stack,\n  Typography,\n} from '@mui/material'\nimport { QueryBundleRequest, Row } from '@sage-bionetworks/synapse-types'\nimport dayjs from 'dayjs'\nimport { useInView } from 'react-intersection-observer'\nimport PortalSectionHeader from '../PortalSectionHeader'\n\nconst transitionTimeoutMs = 400\n\nexport type FeaturedResearchProps = {\n  sql: string\n}\n\nexport type FeaturedResearchCardProps = {\n  research: Row\n  entityId: string\n  isLoading: boolean\n  publicationDateColIndex: number\n  titleColIndex: number\n  descriptionColIndex: number\n  linkColIndex: number\n  imageColIndex: number\n}\n\nconst FeaturedResearchCard = ({\n  research,\n  entityId,\n  publicationDateColIndex,\n  titleColIndex,\n  linkColIndex,\n  imageColIndex,\n  isLoading,\n}: FeaturedResearchCardProps): React.ReactNode => {\n  const fileId = research.values[imageColIndex] ?? ''\n  const url = useImageUrl(fileId ?? '', entityId)\n  if (isLoading) {\n    return <Skeleton variant=\"rectangular\" height={142} width=\"100%\" />\n  }\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        gap: '30px',\n        borderBottom: '1px solid',\n        padding: '24px 0',\n        borderColor: 'grey.300',\n        flexDirection: {\n          xs: 'column',\n          sm: 'row',\n        },\n      }}\n    >\n      <Stack\n        useFlexGap\n        sx={{\n          gap: '10px',\n        }}\n      >\n        <Typography\n          variant=\"headline2\"\n          sx={{\n            color: 'gray.1000',\n            fontSize: '21px',\n          }}\n        >\n          <Link\n            href={research.values[linkColIndex] ?? ''}\n            target=\"_blank\"\n            sx={{\n              color: 'grey.1000',\n              textDecoration: 'none',\n              '&:hover': {\n                textDecoration: 'none',\n              },\n            }}\n          >\n            {research.values[titleColIndex]}\n          </Link>\n        </Typography>\n        <Typography\n          sx={{\n            lineHeight: 'normal',\n            color: 'grey.600',\n          }}\n        >\n          {research.values[publicationDateColIndex] &&\n            formatDate(\n              dayjs(Number(research.values[publicationDateColIndex])),\n              'MMMM, YYYY',\n            )}\n        </Typography>\n      </Stack>\n      <CardMedia\n        component=\"img\"\n        image={url}\n        aria-hidden=\"true\"\n        sx={{\n          flexShrink: 0,\n          width: '140px',\n          height: '93.8px',\n          borderRadius: '6px',\n          objectFit: 'cover',\n          marginLeft: { xs: 'initial', sm: 'auto' },\n        }}\n      />\n    </Box>\n  )\n}\n\nconst FeaturedResearchTopCard = ({\n  research,\n  entityId,\n  titleColIndex,\n  descriptionColIndex,\n  linkColIndex,\n  imageColIndex,\n  isLoading,\n}: FeaturedResearchCardProps): React.ReactNode => {\n  const [ref, inView] = useInView({ threshold: 0.3, triggerOnce: true })\n  const fileId = research.values[imageColIndex] ?? ''\n  const url = useImageUrl(fileId || '', entityId)\n  if (isLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width=\"100%\"\n        sx={{\n          height: { xs: '250px', sm: '500px', md: '600px', lg: '800px' },\n        }}\n      />\n    )\n  }\n  return (\n    <Box ref={ref}>\n      <Fade in={inView} timeout={transitionTimeoutMs}>\n        <CardMedia\n          component=\"img\"\n          image={url}\n          aria-hidden=\"true\"\n          sx={{\n            objectFit: 'cover',\n            borderRadius: '10px',\n            marginBottom: '30px',\n          }}\n        />\n      </Fade>\n      <Stack\n        useFlexGap\n        sx={{\n          gap: '16px',\n        }}\n      >\n        <Typography\n          variant=\"headline2\"\n          sx={{ color: 'grey.1000', fontSize: { xs: '24px', md: '36px' } }}\n        >\n          <Link\n            href={research.values[linkColIndex] ?? ''}\n            target=\"_blank\"\n            sx={{\n              color: 'grey.1000',\n              textDecoration: 'none',\n              '&:hover': {\n                textDecoration: 'none',\n              },\n            }}\n          >\n            {research.values[titleColIndex]}\n          </Link>\n        </Typography>\n        <Typography\n          sx={{\n            fontSize: '18px',\n            lineHeight: '22.4px',\n          }}\n        >\n          {research.values[descriptionColIndex] ?? ''}\n        </Typography>\n        <Link href={research.values[linkColIndex] ?? ''} target={'_blank'}>\n          Read more\n        </Link>\n      </Stack>\n    </Box>\n  )\n}\n\nfunction FeaturedResearch(props: FeaturedResearchProps) {\n  const { sql } = props\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    },\n  }\n  const { data: queryResultBundle, isLoading } =\n    useGetQueryResultBundle(queryBundleRequest)\n\n  const dataRows = queryResultBundle?.queryResult!.queryResults.rows ?? []\n\n  enum ExpectedColumns {\n    TITLE = 'title',\n    DESCRIPTION = 'description',\n    PUBLICATION_DATE = 'publicationDate',\n    IMAGE = 'image',\n    LINK = 'link',\n  }\n\n  const titleColIndex = getFieldIndex(ExpectedColumns.TITLE, queryResultBundle)\n  const descriptionColIndex = getFieldIndex(\n    ExpectedColumns.DESCRIPTION,\n    queryResultBundle,\n  )\n  const publicationDateColIndex = getFieldIndex(\n    ExpectedColumns.PUBLICATION_DATE,\n    queryResultBundle,\n  )\n  const imageColIndex = getFieldIndex(ExpectedColumns.IMAGE, queryResultBundle)\n  const linkColIndex = getFieldIndex(ExpectedColumns.LINK, queryResultBundle)\n\n  const topCard = dataRows[0]\n  const remainingCards = dataRows.slice(1)\n\n  const featuredResearchHeader = (\n    <PortalSectionHeader\n      title=\"Featured Research\"\n      sx={{\n        h2: { fontSize: '24px', paddingBottom: 0, width: '100%' },\n      }}\n    />\n  )\n\n  return (\n    <Box\n      sx={{\n        display: 'grid',\n        gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },\n        gap: { xs: '30px', md: '40px' },\n        padding: { xs: '40px', lg: '80px' },\n      }}\n    >\n      <Box sx={{ display: { md: 'none' } }}>{featuredResearchHeader}</Box>\n      <Box>\n        {topCard && (\n          <FeaturedResearchTopCard\n            entityId={entityId}\n            research={topCard}\n            titleColIndex={titleColIndex}\n            isLoading={isLoading}\n            descriptionColIndex={descriptionColIndex}\n            publicationDateColIndex={publicationDateColIndex}\n            imageColIndex={imageColIndex}\n            linkColIndex={linkColIndex}\n          />\n        )}\n      </Box>\n      <Stack>\n        <Box sx={{ display: { xs: 'none', md: 'block' } }}>\n          {featuredResearchHeader}\n        </Box>\n        <Stack\n          sx={{\n            gap: '16px',\n          }}\n        >\n          {remainingCards.map((research, index) => (\n            <FeaturedResearchCard\n              entityId={entityId}\n              research={research}\n              key={index}\n              isLoading={isLoading}\n              titleColIndex={titleColIndex}\n              descriptionColIndex={descriptionColIndex}\n              publicationDateColIndex={publicationDateColIndex}\n              imageColIndex={imageColIndex}\n              linkColIndex={linkColIndex}\n            />\n          ))}\n        </Stack>\n      </Stack>\n    </Box>\n  )\n}\n\nexport default FeaturedResearch\n"],"mappings":"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"}

package/dist/components/FeaturedToolsList/FeaturedToolCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeaturedToolCard.js","names":[],"sources":["../../../src/components/FeaturedToolsList/FeaturedToolCard.tsx"],"sourcesContent":["import { formatDate } from '@/utils/functions/DateFormatter'\nimport dayjs from 'dayjs'\nimport { HTMLAttributes } from 'react'\nimport ShowMore from '../ShowMore'\n\nexport type FeaturedToolCardProps = {\n  id: string\n  name: string\n  description: string\n  type: string\n  date?: string\n  toolDetailPageURL?: string\n  url?: string\n}\n\nexport function FeaturedToolCard({\n  id,\n  name,\n  description,\n  type,\n  toolDetailPageURL,\n  date,\n  url,\n  ...domProps\n}: FeaturedToolCardProps & HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      {...domProps}\n      className={`cardContainer FeaturedToolCard ${domProps.className ?? ''}`}\n    >\n      <div className=\"FeaturedToolCard__Type\">\n        <span className=\"SRC-tag\">{type}</span>\n      </div>\n      {date && (\n        <div className=\"FeaturedToolCard__Date\">\n          {formatDate(dayjs(parseInt(date)), 'MMMM YYYY')}\n        </div>\n      )}\n      <div className=\"FeaturedToolCard__Name\">{name}</div>\n      <div className=\"FeaturedToolCard__Description\">\n        <ShowMore summary={description} />\n      </div>\n      <a\n        className=\"FeaturedToolCard__Link\"\n        href={toolDetailPageURL ? `${toolDetailPageURL}${id}` : url}\n      >\n        View Tool\n      </a>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAeA,SAAgB,EAAiB,EAC/B,OACA,SACA,gBACA,SACA,sBACA,SACA,QACA,GAAG,KACsD;AACzD,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,kCAAkC,EAAS,aAAa;YAFrE;GAIE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,QAAD;KAAM,WAAU;eAAW;KAAY,CAAA;IACnC,CAAA;GACL,KACC,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAW,EAAM,SAAS,EAAK,CAAC,EAAE,YAAY;IAC3C,CAAA;GAER,kBAAC,OAAD;IAAK,WAAU;cAA0B;IAAW,CAAA;GACpD,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAU,SAAS,GAAe,CAAA;IAC9B,CAAA;GACN,kBAAC,KAAD;IACE,WAAU;IACV,MAAM,IAAoB,GAAG,IAAoB,MAAO;cACzD;IAEG,CAAA;GACA"}
+{"version":3,"file":"FeaturedToolCard.js","names":[],"sources":["../../../src/components/FeaturedToolsList/FeaturedToolCard.tsx"],"sourcesContent":["import { formatDate } from '@/utils/functions/DateFormatter'\nimport dayjs from 'dayjs'\nimport { HTMLAttributes } from 'react'\nimport ShowMore from '../ShowMore'\n\nexport type FeaturedToolCardProps = {\n  id: string\n  name: string\n  description: string\n  type: string\n  date?: string\n  toolDetailPageURL?: string\n  url?: string\n}\n\nexport function FeaturedToolCard({\n  id,\n  name,\n  description,\n  type,\n  toolDetailPageURL,\n  date,\n  url,\n  ...domProps\n}: FeaturedToolCardProps & HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      {...domProps}\n      className={`cardContainer FeaturedToolCard ${domProps.className ?? ''}`}\n    >\n      <div className=\"FeaturedToolCard__Type\">\n        <span className=\"SRC-tag\">{type}</span>\n      </div>\n      {date && (\n        <div className=\"FeaturedToolCard__Date\">\n          {formatDate(dayjs(parseInt(date)), 'MMMM YYYY')}\n        </div>\n      )}\n      <div className=\"FeaturedToolCard__Name\">{name}</div>\n      <div className=\"FeaturedToolCard__Description\">\n        <ShowMore summary={description} />\n      </div>\n      <a\n        className=\"FeaturedToolCard__Link\"\n        href={toolDetailPageURL ? `${toolDetailPageURL}${id}` : url}\n      >\n        View Tool\n      </a>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAeA,SAAgB,EAAiB,EAC/B,OACA,SACA,gBACA,SACA,sBACA,SACA,QACA,GAAG,KACsD;CACzD,OACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,kCAAkC,EAAS,aAAa;YAFrE;GAIE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,QAAD;KAAM,WAAU;eAAW;IAAW,CAAA;GACnC,CAAA;GACJ,KACC,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAW,EAAM,SAAS,CAAI,CAAC,GAAG,WAAW;GAC3C,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;cAA0B;GAAU,CAAA;GACnD,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAU,SAAS,EAAc,CAAA;GAC9B,CAAA;GACL,kBAAC,KAAD;IACE,WAAU;IACV,MAAM,IAAoB,GAAG,IAAoB,MAAO;cACzD;GAEE,CAAA;EACA;;AAET"}

package/dist/components/FeaturedToolsList/FeaturedToolsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeaturedToolsList.js","names":[],"sources":["../../../src/components/FeaturedToolsList/FeaturedToolsList.tsx"],"sourcesContent":["import useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport { useEffect, useState } from 'react'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport { FeaturedToolCard } from './FeaturedToolCard'\n\nexport type FeaturedToolsListProps = {\n  entityId: string\n  idColumnName: string\n  nameColumnName: string\n  descriptionColumnName: string\n  typeColumnName: string\n  dateColumnName?: string\n  filterClause: string\n} & ( // for the link, either the toolDetailPageURL or the toolURLColumnName must be set\n  | {\n      toolDetailPageURL: string\n      toolURLColumnName?: never\n    }\n  | {\n      toolDetailPageURL?: never\n      toolURLColumnName: string\n    }\n)\n\ntype ToolData = {\n  id: string\n  name: string\n  description: string\n  type: string\n  date?: string\n  url?: string //set if URL is in toolURLColumnName, dynamic if pointing to a detail page\n}\n\n/**\n * Display a set of FeaturedToolCards (driven by a Table/View). Driven by the following annotations/column names:\n * 'id', 'name', 'type', and 'description'.\n */\nexport function FeaturedToolsList({\n  entityId,\n  toolDetailPageURL,\n  toolURLColumnName,\n  idColumnName = 'id',\n  nameColumnName = 'name',\n  descriptionColumnName = 'description',\n  typeColumnName = 'type',\n  dateColumnName,\n  filterClause,\n}: FeaturedToolsListProps) {\n  const sql = `SELECT * FROM ${entityId} ${filterClause} LIMIT 3`\n  const queryBundleRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    entityId,\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    query: {\n      sql,\n    },\n  }\n\n  const { accessToken } = useSynapseContext()\n  const [tools, setTools] = useState<ToolData[]>([])\n  const [error, setError] = useState<Error>()\n  const { data: queryResultBundle, error: queryError } =\n    useGetQueryResultBundle(queryBundleRequest)\n\n  useEffect(() => {\n    const getData = () => {\n      try {\n        const idIndex = getFieldIndex(idColumnName, queryResultBundle)\n        const nameColumnIndex = getFieldIndex(nameColumnName, queryResultBundle)\n        const typeColumnIndex = getFieldIndex(typeColumnName, queryResultBundle)\n        const descriptionColumnIndex = getFieldIndex(\n          descriptionColumnName,\n          queryResultBundle,\n        )\n        const dateColumnIndex = getFieldIndex(dateColumnName, queryResultBundle)\n        const toolURLColumnIndex = getFieldIndex(\n          toolURLColumnName,\n          queryResultBundle,\n        )\n        const tools: ToolData[] =\n          queryResultBundle?.queryResult!.queryResults.rows.map(row => {\n            if (row.values.some(value => value === null)) {\n              console.warn('Row has null value(s)')\n            }\n            // Cast to string, assuming there are no null values\n            const values = row.values as string[]\n            return {\n              name: values[nameColumnIndex],\n              description: values[descriptionColumnIndex],\n              type: values[typeColumnIndex],\n              id: values[idIndex],\n              date: dateColumnName ? values[dateColumnIndex] : undefined,\n              url: toolURLColumnName ? values[toolURLColumnIndex] : undefined,\n            }\n          }) ?? []\n        if (queryError) {\n          throw queryError\n        }\n        if (tools.length === 0) {\n          // wait for data to load\n          return\n        }\n\n        setTools(tools)\n      } catch (error) {\n        console.error(error)\n        setError(error)\n      }\n    }\n    getData()\n  }, [\n    entityId,\n    accessToken,\n    queryResultBundle,\n    queryError,\n    idColumnName,\n    nameColumnName,\n    typeColumnName,\n    descriptionColumnName,\n    dateColumnName,\n  ])\n  return error ? (\n    <ErrorBanner error={error}></ErrorBanner>\n  ) : (\n    <div className=\"FeaturedToolList\">\n      {tools.map(tool => {\n        return (\n          <FeaturedToolCard\n            key={tool.id}\n            name={tool.name}\n            type={tool.type}\n            description={tool.description}\n            id={tool.id}\n            date={tool.date}\n            toolDetailPageURL={toolDetailPageURL}\n            url={tool.url}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nexport default FeaturedToolsList\n"],"mappings":";;;;;;;;;;AAyCA,SAAgB,EAAkB,EAChC,aACA,sBACA,sBACA,kBAAe,MACf,oBAAiB,QACjB,2BAAwB,eACxB,oBAAiB,QACjB,mBACA,mBACyB;CAEzB,IAAM,IAAyC;EAC7C,cAAc;EACd;EACA,UACE;EAEF,OAAO,EACL,sBARyB,EAAS,GAAG,EAAa,WASnD;EACF,EAEK,EAAE,mBAAgB,GAAmB,EACrC,CAAC,GAAO,KAAY,EAAqB,EAAE,CAAC,EAC5C,CAAC,GAAO,KAAY,GAAiB,EACrC,EAAE,MAAM,GAAmB,OAAO,MACtC,EAAwB,EAAmB;AA2D7C,QAzDA,QAAgB;AA6Cd,SA5CsB;AACpB,OAAI;IACF,IAAM,IAAU,EAAc,GAAc,EAAkB,EACxD,IAAkB,EAAc,GAAgB,EAAkB,EAClE,IAAkB,EAAc,GAAgB,EAAkB,EAClE,IAAyB,EAC7B,GACA,EACD,EACK,IAAkB,EAAc,GAAgB,EAAkB,EAClE,IAAqB,EACzB,GACA,EACD,EACK,IACJ,GAAmB,YAAa,aAAa,KAAK,KAAI,MAAO;AAC3D,KAAI,EAAI,OAAO,MAAK,MAAS,MAAU,KAAK,IAC1C,QAAQ,KAAK,wBAAwB;KAGvC,IAAM,IAAS,EAAI;AACnB,YAAO;MACL,MAAM,EAAO;MACb,aAAa,EAAO;MACpB,MAAM,EAAO;MACb,IAAI,EAAO;MACX,MAAM,IAAiB,EAAO,KAAmB,KAAA;MACjD,KAAK,IAAoB,EAAO,KAAsB,KAAA;MACvD;MACD,IAAI,EAAE;AACV,QAAI,EACF,OAAM;AAER,QAAI,EAAM,WAAW,EAEnB;AAGF,MAAS,EAAM;YACR,GAAO;AAEd,IADA,QAAQ,MAAM,EAAM,EACpB,EAAS,EAAM;;MAGV;IACR;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EACK,IACL,kBAAC,GAAD,EAAoB,UAAqB,CAAA,GAEzC,kBAAC,OAAD;EAAK,WAAU;YACZ,EAAM,KAAI,MAEP,kBAAC,GAAD;GAEE,MAAM,EAAK;GACX,MAAM,EAAK;GACX,aAAa,EAAK;GAClB,IAAI,EAAK;GACT,MAAM,EAAK;GACQ;GACnB,KAAK,EAAK;GACV,EARK,EAAK,GAQV,CAEJ;EACE,CAAA"}
+{"version":3,"file":"FeaturedToolsList.js","names":[],"sources":["../../../src/components/FeaturedToolsList/FeaturedToolsList.tsx"],"sourcesContent":["import useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport { useEffect, useState } from 'react'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport { FeaturedToolCard } from './FeaturedToolCard'\n\nexport type FeaturedToolsListProps = {\n  entityId: string\n  idColumnName: string\n  nameColumnName: string\n  descriptionColumnName: string\n  typeColumnName: string\n  dateColumnName?: string\n  filterClause: string\n} & ( // for the link, either the toolDetailPageURL or the toolURLColumnName must be set\n  | {\n      toolDetailPageURL: string\n      toolURLColumnName?: never\n    }\n  | {\n      toolDetailPageURL?: never\n      toolURLColumnName: string\n    }\n)\n\ntype ToolData = {\n  id: string\n  name: string\n  description: string\n  type: string\n  date?: string\n  url?: string //set if URL is in toolURLColumnName, dynamic if pointing to a detail page\n}\n\n/**\n * Display a set of FeaturedToolCards (driven by a Table/View). Driven by the following annotations/column names:\n * 'id', 'name', 'type', and 'description'.\n */\nexport function FeaturedToolsList({\n  entityId,\n  toolDetailPageURL,\n  toolURLColumnName,\n  idColumnName = 'id',\n  nameColumnName = 'name',\n  descriptionColumnName = 'description',\n  typeColumnName = 'type',\n  dateColumnName,\n  filterClause,\n}: FeaturedToolsListProps) {\n  const sql = `SELECT * FROM ${entityId} ${filterClause} LIMIT 3`\n  const queryBundleRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    entityId,\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    query: {\n      sql,\n    },\n  }\n\n  const { accessToken } = useSynapseContext()\n  const [tools, setTools] = useState<ToolData[]>([])\n  const [error, setError] = useState<Error>()\n  const { data: queryResultBundle, error: queryError } =\n    useGetQueryResultBundle(queryBundleRequest)\n\n  useEffect(() => {\n    const getData = () => {\n      try {\n        const idIndex = getFieldIndex(idColumnName, queryResultBundle)\n        const nameColumnIndex = getFieldIndex(nameColumnName, queryResultBundle)\n        const typeColumnIndex = getFieldIndex(typeColumnName, queryResultBundle)\n        const descriptionColumnIndex = getFieldIndex(\n          descriptionColumnName,\n          queryResultBundle,\n        )\n        const dateColumnIndex = getFieldIndex(dateColumnName, queryResultBundle)\n        const toolURLColumnIndex = getFieldIndex(\n          toolURLColumnName,\n          queryResultBundle,\n        )\n        const tools: ToolData[] =\n          queryResultBundle?.queryResult!.queryResults.rows.map(row => {\n            if (row.values.some(value => value === null)) {\n              console.warn('Row has null value(s)')\n            }\n            // Cast to string, assuming there are no null values\n            const values = row.values as string[]\n            return {\n              name: values[nameColumnIndex],\n              description: values[descriptionColumnIndex],\n              type: values[typeColumnIndex],\n              id: values[idIndex],\n              date: dateColumnName ? values[dateColumnIndex] : undefined,\n              url: toolURLColumnName ? values[toolURLColumnIndex] : undefined,\n            }\n          }) ?? []\n        if (queryError) {\n          throw queryError\n        }\n        if (tools.length === 0) {\n          // wait for data to load\n          return\n        }\n\n        setTools(tools)\n      } catch (error) {\n        console.error(error)\n        setError(error)\n      }\n    }\n    getData()\n  }, [\n    entityId,\n    accessToken,\n    queryResultBundle,\n    queryError,\n    idColumnName,\n    nameColumnName,\n    typeColumnName,\n    descriptionColumnName,\n    dateColumnName,\n  ])\n  return error ? (\n    <ErrorBanner error={error}></ErrorBanner>\n  ) : (\n    <div className=\"FeaturedToolList\">\n      {tools.map(tool => {\n        return (\n          <FeaturedToolCard\n            key={tool.id}\n            name={tool.name}\n            type={tool.type}\n            description={tool.description}\n            id={tool.id}\n            date={tool.date}\n            toolDetailPageURL={toolDetailPageURL}\n            url={tool.url}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nexport default FeaturedToolsList\n"],"mappings":";;;;;;;;;;AAyCA,SAAgB,EAAkB,EAChC,aACA,sBACA,sBACA,kBAAe,MACf,oBAAiB,QACjB,2BAAwB,eACxB,oBAAiB,QACjB,mBACA,mBACyB;CAEzB,IAAM,IAAyC;EAC7C,cAAc;EACd;EACA,UACE;EAEF,OAAO,EACL,sBARyB,EAAS,GAAG,EAAa,UASpD;CACF,GAEM,EAAE,mBAAgB,EAAkB,GACpC,CAAC,GAAO,KAAY,EAAqB,CAAC,CAAC,GAC3C,CAAC,GAAO,KAAY,EAAgB,GACpC,EAAE,MAAM,GAAmB,OAAO,MACtC,EAAwB,CAAkB;CA2D5C,OAzDA,QAAgB;EA6Cd,OA5CsB;GACpB,IAAI;IACF,IAAM,IAAU,EAAc,GAAc,CAAiB,GACvD,IAAkB,EAAc,GAAgB,CAAiB,GACjE,IAAkB,EAAc,GAAgB,CAAiB,GACjE,IAAyB,EAC7B,GACA,CACF,GACM,IAAkB,EAAc,GAAgB,CAAiB,GACjE,IAAqB,EACzB,GACA,CACF,GACM,IACJ,GAAmB,YAAa,aAAa,KAAK,KAAI,MAAO;KAC3D,AAAI,EAAI,OAAO,MAAK,MAAS,MAAU,IAAI,KACzC,QAAQ,KAAK,uBAAuB;KAGtC,IAAM,IAAS,EAAI;KACnB,OAAO;MACL,MAAM,EAAO;MACb,aAAa,EAAO;MACpB,MAAM,EAAO;MACb,IAAI,EAAO;MACX,MAAM,IAAiB,EAAO,KAAmB,KAAA;MACjD,KAAK,IAAoB,EAAO,KAAsB,KAAA;KACxD;IACF,CAAC,KAAK,CAAC;IACT,IAAI,GACF,MAAM;IAER,IAAI,EAAM,WAAW,GAEnB;IAGF,EAAS,CAAK;GAChB,SAAS,GAAO;IAEd,AADA,QAAQ,MAAM,CAAK,GACnB,EAAS,CAAK;GAChB;EACF,GACQ;CACV,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GACM,IACL,kBAAC,GAAD,EAAoB,SAAoB,CAAA,IAExC,kBAAC,OAAD;EAAK,WAAU;YACZ,EAAM,KAAI,MAEP,kBAAC,GAAD;GAEE,MAAM,EAAK;GACX,MAAM,EAAK;GACX,aAAa,EAAK;GAClB,IAAI,EAAK;GACT,MAAM,EAAK;GACQ;GACnB,KAAK,EAAK;EACX,GARM,EAAK,EAQX,CAEJ;CACE,CAAA;AAET"}

package/dist/components/FilePreview/EntityPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityPreview.js","names":[],"sources":["../../../src/components/FilePreview/EntityPreview.tsx"],"sourcesContent":["import useGetEntityBundle from '@/synapse-queries/entity/useEntityBundle'\nimport { useResolveLinkEntity } from '@/utils/functions/ResolveLinkEntity'\nimport { isFileEntity } from '@/utils/types/IsType'\nimport {\n  ALL_ENTITY_BUNDLE_FIELDS,\n  FileEntity,\n} from '@sage-bionetworks/synapse-types'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport FileEntityPreview from './FileEntityPreview'\n\nexport type EntityPreviewProps = {\n  entityId: string\n  versionNumber?: number\n}\n\n/**\n * Returns a preview of an entity. Currently only works for FileEntities, and Links that resolve to FileEntities.\n * @param props\n * @returns\n */\nexport default function EntityPreview(props: EntityPreviewProps) {\n  const { entityId, versionNumber } = props\n\n  // If the entity is a Link, follow it until we get a non-link\n  const { data: resolvedLink, isLoading: isLoadingLinkResolution } =\n    useResolveLinkEntity(entityId, versionNumber)\n  const isResolvedLinkFileEntity = resolvedLink && isFileEntity(resolvedLink)\n\n  const { data: bundle, isLoading: isLoadingBundle } = useGetEntityBundle(\n    resolvedLink?.id,\n    (resolvedLink as FileEntity | undefined)?.versionNumber,\n    ALL_ENTITY_BUNDLE_FIELDS,\n    {\n      enabled: !!isResolvedLinkFileEntity,\n      throwOnError: true,\n    },\n  )\n\n  const isLoading = isLoadingLinkResolution || isLoadingBundle\n\n  if (isLoading) {\n    return <SynapseSpinner />\n  }\n\n  // If the entity is NOT a FileEntity, throw an error\n  if (!isResolvedLinkFileEntity) {\n    throw new Error(`${entityId} is not a File and cannot be previewed.`)\n  } else {\n    return <FileEntityPreview bundle={bundle!} />\n  }\n}\n"],"mappings":";;;;;;;;AAoBA,SAAwB,EAAc,GAA2B;CAC/D,IAAM,EAAE,aAAU,qBAAkB,GAG9B,EAAE,MAAM,GAAc,WAAW,MACrC,EAAqB,GAAU,EAAc,EACzC,IAA2B,KAAgB,EAAa,EAAa,EAErE,EAAE,MAAM,GAAQ,WAAW,MAAoB,EACnD,GAAc,IACb,GAAyC,eAC1C,GACA;EACE,SAAS,CAAC,CAAC;EACX,cAAc;EACf,CACF;AAID,KAFkB,KAA2B,EAG3C,QAAO,kBAAC,GAAD,EAAkB,CAAA;AAI3B,KAAK,EAGH,QAAO,kBAAC,GAAD,EAA2B,WAAW,CAAA;AAF7C,OAAU,MAAM,GAAG,EAAS,yCAAyC"}
+{"version":3,"file":"EntityPreview.js","names":[],"sources":["../../../src/components/FilePreview/EntityPreview.tsx"],"sourcesContent":["import useGetEntityBundle from '@/synapse-queries/entity/useEntityBundle'\nimport { useResolveLinkEntity } from '@/utils/functions/ResolveLinkEntity'\nimport { isFileEntity } from '@/utils/types/IsType'\nimport {\n  ALL_ENTITY_BUNDLE_FIELDS,\n  FileEntity,\n} from '@sage-bionetworks/synapse-types'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport FileEntityPreview from './FileEntityPreview'\n\nexport type EntityPreviewProps = {\n  entityId: string\n  versionNumber?: number\n}\n\n/**\n * Returns a preview of an entity. Currently only works for FileEntities, and Links that resolve to FileEntities.\n * @param props\n * @returns\n */\nexport default function EntityPreview(props: EntityPreviewProps) {\n  const { entityId, versionNumber } = props\n\n  // If the entity is a Link, follow it until we get a non-link\n  const { data: resolvedLink, isLoading: isLoadingLinkResolution } =\n    useResolveLinkEntity(entityId, versionNumber)\n  const isResolvedLinkFileEntity = resolvedLink && isFileEntity(resolvedLink)\n\n  const { data: bundle, isLoading: isLoadingBundle } = useGetEntityBundle(\n    resolvedLink?.id,\n    (resolvedLink as FileEntity | undefined)?.versionNumber,\n    ALL_ENTITY_BUNDLE_FIELDS,\n    {\n      enabled: !!isResolvedLinkFileEntity,\n      throwOnError: true,\n    },\n  )\n\n  const isLoading = isLoadingLinkResolution || isLoadingBundle\n\n  if (isLoading) {\n    return <SynapseSpinner />\n  }\n\n  // If the entity is NOT a FileEntity, throw an error\n  if (!isResolvedLinkFileEntity) {\n    throw new Error(`${entityId} is not a File and cannot be previewed.`)\n  } else {\n    return <FileEntityPreview bundle={bundle!} />\n  }\n}\n"],"mappings":";;;;;;;;AAoBA,SAAwB,EAAc,GAA2B;CAC/D,IAAM,EAAE,aAAU,qBAAkB,GAG9B,EAAE,MAAM,GAAc,WAAW,MACrC,EAAqB,GAAU,CAAa,GACxC,IAA2B,KAAgB,EAAa,CAAY,GAEpE,EAAE,MAAM,GAAQ,WAAW,MAAoB,EACnD,GAAc,IACb,GAAyC,eAC1C,GACA;EACE,SAAS,CAAC,CAAC;EACX,cAAc;CAChB,CACF;CAIA,IAFkB,KAA2B,GAG3C,OAAO,kBAAC,GAAD,CAAiB,CAAA;CAI1B,IAAK,GAGH,OAAO,kBAAC,GAAD,EAA2B,UAAU,CAAA;CAF5C,MAAU,MAAM,GAAG,EAAS,wCAAwC;AAIxE"}

package/dist/components/FilePreview/FileEntityPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileEntityPreview.js","names":[],"sources":["../../../src/components/FilePreview/FileEntityPreview.tsx"],"sourcesContent":["import { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  implementsCloudProviderFileHandleInterface,\n  isFileEntity,\n} from '@/utils/types/IsType'\nimport { Alert } from '@mui/material'\nimport {\n  EntityBundle,\n  FileHandleAssociateType,\n} from '@sage-bionetworks/synapse-types'\nimport { SignInPrompt } from '../error/ErrorBanner'\nimport FileHandleContentRenderer from './FileHandleContentRenderer'\nimport { PreviewRendererType } from './PreviewRendererType'\nimport {\n  getOriginalFileHandleRenderer,\n  getPreviewFileHandleRenderer,\n} from './PreviewUtils'\n\nexport type FileEntityPreviewProps = {\n  /** An entity bundle containing a FileEntity, and its fileHandles */\n  bundle: EntityBundle\n}\n\n/**\n * Given an entity bundle that contains a FileEntity, render a preview of the file. The rendered preview will be determined based on the\n * content type and file name of the file handle(s) associated with the FileEntity.\n * @param props\n */\nexport default function FileEntityPreview(props: FileEntityPreviewProps) {\n  const { bundle } = props\n  const { isAuthenticated } = useSynapseContext()\n\n  if (!isFileEntity(bundle.entity)) {\n    throw new Error(`Entity ${bundle.entity.id!} is not a FileEntity`)\n  }\n\n  /**\n   * The dataFileHandle and the previewFileHandle may not have the same contentType.\n   *\n   * For example, ZIP files are assigned a CSV preview listing the ZIP file contents.\n   */\n  const dataFileHandleId = bundle.entity.dataFileHandleId\n  const dataFileHandle = bundle.fileHandles.find(\n    fh => fh.id === dataFileHandleId,\n  )\n\n  if (!dataFileHandle && !isAuthenticated) {\n    // We may be previewing a file handle that the anonymous user cannot see. Prompt the user to log in.\n    return (\n      <Alert severity={'error'}>\n        <SignInPrompt />\n      </Alert>\n    )\n  }\n\n  // If we can render the original file, do so:\n  if (dataFileHandle) {\n    const previewType = getOriginalFileHandleRenderer(dataFileHandle)\n    if (previewType !== PreviewRendererType.NONE) {\n      return (\n        <FileHandleContentRenderer\n          fileHandle={dataFileHandle}\n          fileHandleAssociation={{\n            fileHandleId: dataFileHandleId,\n            associateObjectId: bundle.entity.id!,\n            associateObjectType: FileHandleAssociateType.FileEntity,\n          }}\n          previewType={previewType}\n        />\n      )\n    }\n  }\n\n  // Otherwise, see if we can render the preview file handle that Synapse created\n  const previewFileHandle = bundle.fileHandles.find(\n    fh => implementsCloudProviderFileHandleInterface(fh) && fh.isPreview,\n  )\n\n  if (previewFileHandle && dataFileHandle) {\n    const previewType = getPreviewFileHandleRenderer(\n      previewFileHandle,\n      dataFileHandle,\n    )\n    if (previewType !== PreviewRendererType.NONE) {\n      return (\n        <FileHandleContentRenderer\n          fileHandle={previewFileHandle}\n          fileHandleAssociation={{\n            fileHandleId: previewFileHandle.id,\n            associateObjectId: bundle.entity.id!,\n            associateObjectType: FileHandleAssociateType.FileEntity,\n          }}\n          previewType={previewType}\n        />\n      )\n    }\n  }\n\n  // We can't render the file, so throw an Error so the ErrorBoundary will show an alert.\n  throw new Error(`Could not render a preview for entity: ${bundle.entity.id!}`)\n}\n"],"mappings":";;;;;;;;;;AA4BA,SAAwB,EAAkB,GAA+B;CACvE,IAAM,EAAE,cAAW,GACb,EAAE,uBAAoB,GAAmB;AAE/C,KAAI,CAAC,EAAa,EAAO,OAAO,CAC9B,OAAU,MAAM,UAAU,EAAO,OAAO,GAAI,sBAAsB;CAQpE,IAAM,IAAmB,EAAO,OAAO,kBACjC,IAAiB,EAAO,YAAY,MACxC,MAAM,EAAG,OAAO,EACjB;AAED,KAAI,CAAC,KAAkB,CAAC,EAEtB,QACE,kBAAC,GAAD;EAAO,UAAU;YACf,kBAAC,GAAD,EAAgB,CAAA;EACV,CAAA;AAKZ,KAAI,GAAgB;EAClB,IAAM,IAAc,EAA8B,EAAe;AACjE,MAAI,MAAgB,EAAoB,KACtC,QACE,kBAAC,GAAD;GACE,YAAY;GACZ,uBAAuB;IACrB,cAAc;IACd,mBAAmB,EAAO,OAAO;IACjC,qBAAqB,EAAwB;IAC9C;GACY;GACb,CAAA;;CAMR,IAAM,IAAoB,EAAO,YAAY,MAC3C,MAAM,EAA2C,EAAG,IAAI,EAAG,UAC5D;AAED,KAAI,KAAqB,GAAgB;EACvC,IAAM,IAAc,EAClB,GACA,EACD;AACD,MAAI,MAAgB,EAAoB,KACtC,QACE,kBAAC,GAAD;GACE,YAAY;GACZ,uBAAuB;IACrB,cAAc,EAAkB;IAChC,mBAAmB,EAAO,OAAO;IACjC,qBAAqB,EAAwB;IAC9C;GACY;GACb,CAAA;;AAMR,OAAU,MAAM,0CAA0C,EAAO,OAAO,KAAM"}
+{"version":3,"file":"FileEntityPreview.js","names":[],"sources":["../../../src/components/FilePreview/FileEntityPreview.tsx"],"sourcesContent":["import { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  implementsCloudProviderFileHandleInterface,\n  isFileEntity,\n} from '@/utils/types/IsType'\nimport { Alert } from '@mui/material'\nimport {\n  EntityBundle,\n  FileHandleAssociateType,\n} from '@sage-bionetworks/synapse-types'\nimport { SignInPrompt } from '../error/ErrorBanner'\nimport FileHandleContentRenderer from './FileHandleContentRenderer'\nimport { PreviewRendererType } from './PreviewRendererType'\nimport {\n  getOriginalFileHandleRenderer,\n  getPreviewFileHandleRenderer,\n} from './PreviewUtils'\n\nexport type FileEntityPreviewProps = {\n  /** An entity bundle containing a FileEntity, and its fileHandles */\n  bundle: EntityBundle\n}\n\n/**\n * Given an entity bundle that contains a FileEntity, render a preview of the file. The rendered preview will be determined based on the\n * content type and file name of the file handle(s) associated with the FileEntity.\n * @param props\n */\nexport default function FileEntityPreview(props: FileEntityPreviewProps) {\n  const { bundle } = props\n  const { isAuthenticated } = useSynapseContext()\n\n  if (!isFileEntity(bundle.entity)) {\n    throw new Error(`Entity ${bundle.entity.id!} is not a FileEntity`)\n  }\n\n  /**\n   * The dataFileHandle and the previewFileHandle may not have the same contentType.\n   *\n   * For example, ZIP files are assigned a CSV preview listing the ZIP file contents.\n   */\n  const dataFileHandleId = bundle.entity.dataFileHandleId\n  const dataFileHandle = bundle.fileHandles.find(\n    fh => fh.id === dataFileHandleId,\n  )\n\n  if (!dataFileHandle && !isAuthenticated) {\n    // We may be previewing a file handle that the anonymous user cannot see. Prompt the user to log in.\n    return (\n      <Alert severity={'error'}>\n        <SignInPrompt />\n      </Alert>\n    )\n  }\n\n  // If we can render the original file, do so:\n  if (dataFileHandle) {\n    const previewType = getOriginalFileHandleRenderer(dataFileHandle)\n    if (previewType !== PreviewRendererType.NONE) {\n      return (\n        <FileHandleContentRenderer\n          fileHandle={dataFileHandle}\n          fileHandleAssociation={{\n            fileHandleId: dataFileHandleId,\n            associateObjectId: bundle.entity.id!,\n            associateObjectType: FileHandleAssociateType.FileEntity,\n          }}\n          previewType={previewType}\n        />\n      )\n    }\n  }\n\n  // Otherwise, see if we can render the preview file handle that Synapse created\n  const previewFileHandle = bundle.fileHandles.find(\n    fh => implementsCloudProviderFileHandleInterface(fh) && fh.isPreview,\n  )\n\n  if (previewFileHandle && dataFileHandle) {\n    const previewType = getPreviewFileHandleRenderer(\n      previewFileHandle,\n      dataFileHandle,\n    )\n    if (previewType !== PreviewRendererType.NONE) {\n      return (\n        <FileHandleContentRenderer\n          fileHandle={previewFileHandle}\n          fileHandleAssociation={{\n            fileHandleId: previewFileHandle.id,\n            associateObjectId: bundle.entity.id!,\n            associateObjectType: FileHandleAssociateType.FileEntity,\n          }}\n          previewType={previewType}\n        />\n      )\n    }\n  }\n\n  // We can't render the file, so throw an Error so the ErrorBoundary will show an alert.\n  throw new Error(`Could not render a preview for entity: ${bundle.entity.id!}`)\n}\n"],"mappings":";;;;;;;;;;AA4BA,SAAwB,EAAkB,GAA+B;CACvE,IAAM,EAAE,cAAW,GACb,EAAE,uBAAoB,EAAkB;CAE9C,IAAI,CAAC,EAAa,EAAO,MAAM,GAC7B,MAAU,MAAM,UAAU,EAAO,OAAO,GAAI,qBAAqB;CAQnE,IAAM,IAAmB,EAAO,OAAO,kBACjC,IAAiB,EAAO,YAAY,MACxC,MAAM,EAAG,OAAO,CAClB;CAEA,IAAI,CAAC,KAAkB,CAAC,GAEtB,OACE,kBAAC,GAAD;EAAO,UAAU;YACf,kBAAC,GAAD,CAAe,CAAA;CACV,CAAA;CAKX,IAAI,GAAgB;EAClB,IAAM,IAAc,EAA8B,CAAc;EAChE,IAAI,MAAgB,EAAoB,MACtC,OACE,kBAAC,GAAD;GACE,YAAY;GACZ,uBAAuB;IACrB,cAAc;IACd,mBAAmB,EAAO,OAAO;IACjC,qBAAqB,EAAwB;GAC/C;GACa;EACd,CAAA;CAGP;CAGA,IAAM,IAAoB,EAAO,YAAY,MAC3C,MAAM,EAA2C,CAAE,KAAK,EAAG,SAC7D;CAEA,IAAI,KAAqB,GAAgB;EACvC,IAAM,IAAc,EAClB,GACA,CACF;EACA,IAAI,MAAgB,EAAoB,MACtC,OACE,kBAAC,GAAD;GACE,YAAY;GACZ,uBAAuB;IACrB,cAAc,EAAkB;IAChC,mBAAmB,EAAO,OAAO;IACjC,qBAAqB,EAAwB;GAC/C;GACa;EACd,CAAA;CAGP;CAGA,MAAU,MAAM,0CAA0C,EAAO,OAAO,IAAK;AAC/E"}

package/dist/components/FilePreview/FileHandleContentRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileHandleContentRenderer.js","names":[],"sources":["../../../src/components/FilePreview/FileHandleContentRenderer.tsx"],"sourcesContent":["import { useGetPresignedUrlContent } from '@/synapse-queries/file/useFiles'\nimport { MB } from '@/utils/SynapseConstants'\nimport {\n  BatchFileRequest,\n  FileHandle,\n  FileHandleAssociation,\n} from '@sage-bionetworks/synapse-types'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport HtmlPreview from './HtmlPreview/HtmlPreview'\nimport PdfPreview from './PdfPreview'\nimport { PreviewRendererType } from './PreviewRendererType'\n\nconst MAX_FILE_SIZE = 30 * MB\n\nexport type FileHandleContentRendererProps = {\n  /** The file handle whose contents should be downloaded and rendered */\n  fileHandle: FileHandle\n  /** The association between the file handle and an object which will give the user permission to access the file data */\n  fileHandleAssociation: FileHandleAssociation\n  /** Informs how to render the file data */\n  previewType: PreviewRendererType\n}\n\n/**\n * Fetches the content for and renders the contents of a file handle.\n * @param props\n * @returns\n */\nexport default function FileHandleContentRenderer(\n  props: FileHandleContentRendererProps,\n) {\n  const { fileHandle, fileHandleAssociation, previewType } = props\n\n  const batchFileRequest: BatchFileRequest = {\n    requestedFiles: [fileHandleAssociation],\n    includePreSignedURLs: true,\n    includeFileHandles: false,\n    includePreviewPreSignedURLs: false,\n  }\n\n  const { data: content, isLoading } = useGetPresignedUrlContent(\n    fileHandle,\n    batchFileRequest,\n    MAX_FILE_SIZE,\n    { throwOnError: true },\n  )\n\n  if (isLoading) {\n    return <SynapseSpinner />\n  }\n  if (previewType === PreviewRendererType.HTML) {\n    return (\n      <HtmlPreview rawHtml={content!} createdByUserId={fileHandle.createdBy} />\n    )\n  } else if (previewType === PreviewRendererType.PDF) {\n    return (\n      <PdfPreview\n        fileHandle={fileHandle}\n        fileHandleAssociation={fileHandleAssociation}\n      />\n    )\n  } else {\n    if (previewType !== PreviewRendererType.NONE) {\n      console.warn(\n        `Rendering a preview of type ${previewType} is not supported in Portals`,\n      )\n    }\n    return <></>\n  }\n}\n"],"mappings":";;;;;;;;AAYA,IAAM,IAAgB,KAAK;AAgB3B,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,eAAY,0BAAuB,mBAAgB,GASrD,EAAE,MAAM,GAAS,iBAAc,EACnC,GACA;EARA,gBAAgB,CAAC,EAAsB;EACvC,sBAAsB;EACtB,oBAAoB;EACpB,6BAA6B;EAK7B,EACA,GACA,EAAE,cAAc,IAAM,CACvB;AAsBC,QApBE,IACK,kBAAC,GAAD,EAAkB,CAAA,GAEvB,MAAgB,EAAoB,OAEpC,kBAAC,GAAD;EAAa,SAAS;EAAU,iBAAiB,EAAW;EAAa,CAAA,GAElE,MAAgB,EAAoB,MAE3C,kBAAC,GAAD;EACc;EACW;EACvB,CAAA,IAGA,MAAgB,EAAoB,QACtC,QAAQ,KACN,+BAA+B,EAAY,8BAC5C,EAEI,kBAAA,GAAA,EAAK,CAAA"}
+{"version":3,"file":"FileHandleContentRenderer.js","names":[],"sources":["../../../src/components/FilePreview/FileHandleContentRenderer.tsx"],"sourcesContent":["import { useGetPresignedUrlContent } from '@/synapse-queries/file/useFiles'\nimport { MB } from '@/utils/SynapseConstants'\nimport {\n  BatchFileRequest,\n  FileHandle,\n  FileHandleAssociation,\n} from '@sage-bionetworks/synapse-types'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport HtmlPreview from './HtmlPreview/HtmlPreview'\nimport PdfPreview from './PdfPreview'\nimport { PreviewRendererType } from './PreviewRendererType'\n\nconst MAX_FILE_SIZE = 30 * MB\n\nexport type FileHandleContentRendererProps = {\n  /** The file handle whose contents should be downloaded and rendered */\n  fileHandle: FileHandle\n  /** The association between the file handle and an object which will give the user permission to access the file data */\n  fileHandleAssociation: FileHandleAssociation\n  /** Informs how to render the file data */\n  previewType: PreviewRendererType\n}\n\n/**\n * Fetches the content for and renders the contents of a file handle.\n * @param props\n * @returns\n */\nexport default function FileHandleContentRenderer(\n  props: FileHandleContentRendererProps,\n) {\n  const { fileHandle, fileHandleAssociation, previewType } = props\n\n  const batchFileRequest: BatchFileRequest = {\n    requestedFiles: [fileHandleAssociation],\n    includePreSignedURLs: true,\n    includeFileHandles: false,\n    includePreviewPreSignedURLs: false,\n  }\n\n  const { data: content, isLoading } = useGetPresignedUrlContent(\n    fileHandle,\n    batchFileRequest,\n    MAX_FILE_SIZE,\n    { throwOnError: true },\n  )\n\n  if (isLoading) {\n    return <SynapseSpinner />\n  }\n  if (previewType === PreviewRendererType.HTML) {\n    return (\n      <HtmlPreview rawHtml={content!} createdByUserId={fileHandle.createdBy} />\n    )\n  } else if (previewType === PreviewRendererType.PDF) {\n    return (\n      <PdfPreview\n        fileHandle={fileHandle}\n        fileHandleAssociation={fileHandleAssociation}\n      />\n    )\n  } else {\n    if (previewType !== PreviewRendererType.NONE) {\n      console.warn(\n        `Rendering a preview of type ${previewType} is not supported in Portals`,\n      )\n    }\n    return <></>\n  }\n}\n"],"mappings":";;;;;;;;AAYA,IAAM,IAAgB,KAAK;AAgB3B,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,eAAY,0BAAuB,mBAAgB,GASrD,EAAE,MAAM,GAAS,iBAAc,EACnC,GACA;EARA,gBAAgB,CAAC,CAAqB;EACtC,sBAAsB;EACtB,oBAAoB;EACpB,6BAA6B;CAK7B,GACA,GACA,EAAE,cAAc,GAAK,CACvB;CAsBE,OApBE,IACK,kBAAC,GAAD,CAAiB,CAAA,IAEtB,MAAgB,EAAoB,OAEpC,kBAAC,GAAD;EAAa,SAAS;EAAU,iBAAiB,EAAW;CAAY,CAAA,IAEjE,MAAgB,EAAoB,MAE3C,kBAAC,GAAD;EACc;EACW;CACxB,CAAA,KAGC,MAAgB,EAAoB,QACtC,QAAQ,KACN,+BAA+B,EAAY,6BAC7C,GAEK,kBAAA,GAAA,CAAI,CAAA;AAEf"}