synapse-react-client 4.0.38 → 4.0.41

package/dist/components/PortalHomePageHeader/PortalHomePageHeader.js

@@ -2,7 +2,7 @@ import "react";
 import { Box as e, Button as t, Stack as n, Typography as r } from "@mui/material";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/PortalHomePageHeader/PortalHomePageHeader.tsx
-var o = ({ backgroundCss: o, buttonLink: s, title: c, subTitle: l, description: u, backgroundMp4: d, backgroundMp4Css: f, textAreaWidth: p = "746px" }) => /* @__PURE__ */ a(e, {
+var o = ({ backgroundCss: o, buttonLink: s, title: c, subTitle: l, description: u, backgroundMp4: d, backgroundMp4Css: f, textAreaWidth: p = "746px", children: m }) => /* @__PURE__ */ a(e, {
 	"data-testid": "HeaderContainer",
 	sx: {
 		background: o,
@@ -33,67 +33,95 @@ var o = ({ backgroundCss: o, buttonLink: s, title: c, subTitle: l, description:
 			type: "video/mp4"
 		}), "Your browser does not support the video tag."]
 	}), /* @__PURE__ */ a(n, {
+		direction: {
+			xs: "column",
+			lg: "row"
+		},
 		sx: {
-			alignItems: "flex-start",
+			alignItems: {
+				xs: "flex-start",
+				lg: m ? "center" : "flex-start"
+			},
+			justifyContent: "space-between",
 			padding: {
 				xs: "40px",
 				md: "40px 0"
 			},
-			gap: "24px",
-			width: {
-				sm: "100%",
-				md: p
+			gap: {
+				xs: "40px",
+				lg: "80px"
 			}
 		},
-		children: [
-			/* @__PURE__ */ i(r, {
-				variant: "headline2",
-				sx: {
-					fontWeight: 300,
-					lineHeight: "130%",
-					fontSize: {
-						xs: "36px",
-						md: "42px"
-					},
-					color: "grey.1000"
+		children: [/* @__PURE__ */ a(n, {
+			sx: {
+				alignItems: "flex-start",
+				gap: "24px",
+				minWidth: 0,
+				flex: m ? { lg: "1 1 0" } : void 0,
+				width: m ? "100%" : {
+					sm: "100%",
+					md: p
 				},
-				children: c
-			}),
-			l && /* @__PURE__ */ i(r, {
-				variant: "headline3",
-				sx: {
-					fontSize: "24px",
-					fontWeight: "400",
-					lineHeight: "160%",
-					color: "grey.1000"
-				},
-				children: l
-			}),
-			/* @__PURE__ */ i(r, {
-				sx: {
-					fontSize: "18px",
-					lineHeight: "140%",
-					color: "grey.900"
-				},
-				children: u
-			}),
-			s && /* @__PURE__ */ i(t, {
-				href: s,
-				target: "_blank",
-				variant: "contained",
-				role: "button",
-				sx: (e) => ({
-					whiteSpace: "nowrap",
-					alignSelf: "flex-start",
-					padding: "6px 24px",
-					fontWeight: 600,
-					boxShadow: "0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)",
-					"&:hover": { boxShadow: "0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)" },
-					[e.breakpoints.down("sm")]: { width: "100%" }
+				maxWidth: m ? { md: p } : void 0
+			},
+			children: [
+				/* @__PURE__ */ i(r, {
+					variant: "headline2",
+					sx: {
+						fontWeight: 300,
+						lineHeight: "130%",
+						fontSize: {
+							xs: "36px",
+							md: "42px"
+						},
+						color: "grey.1000"
+					},
+					children: c
+				}),
+				l && /* @__PURE__ */ i(r, {
+					variant: "headline3",
+					sx: {
+						fontSize: "24px",
+						fontWeight: "400",
+						lineHeight: "160%",
+						color: "grey.1000"
+					},
+					children: l
 				}),
-				children: "Learn more"
-			})
-		]
+				/* @__PURE__ */ i(r, {
+					sx: {
+						fontSize: "18px",
+						lineHeight: "140%",
+						color: "grey.900"
+					},
+					children: u
+				}),
+				s && /* @__PURE__ */ i(t, {
+					href: s,
+					target: "_blank",
+					variant: "contained",
+					role: "button",
+					sx: (e) => ({
+						whiteSpace: "nowrap",
+						alignSelf: "flex-start",
+						padding: "6px 24px",
+						fontWeight: 600,
+						boxShadow: "0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)",
+						"&:hover": { boxShadow: "0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)" },
+						[e.breakpoints.down("sm")]: { width: "100%" }
+					}),
+					children: "Learn more"
+				})
+			]
+		}), m && /* @__PURE__ */ i(e, {
+			sx: {
+				flex: { lg: "1 1 0" },
+				minWidth: 0,
+				width: "100%",
+				maxWidth: { lg: "600px" }
+			},
+			children: m
+		})]
 	})]
 });
 //#endregion

package/dist/components/PortalHomePageHeader/PortalHomePageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PortalHomePageHeader.js","names":[],"sources":["../../../src/components/PortalHomePageHeader/PortalHomePageHeader.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Stack, Typography, Button } from '@mui/material'\n\nexport type PortalHomePageHeaderProps = {\n  backgroundCss: string // background of entire header\n  buttonLink?: string\n  title: React.ReactNode\n  subTitle?: React.ReactNode\n  description: React.ReactNode\n  backgroundMp4?: string\n  backgroundMp4Css?: string // while video is loading, what should the background color be?\n  textAreaWidth?: string // default is 746px.  used for md and up screen sizes\n}\n\nconst PortalHomePageHeader = ({\n  backgroundCss,\n  buttonLink,\n  title,\n  subTitle,\n  description,\n  backgroundMp4,\n  backgroundMp4Css,\n  textAreaWidth = '746px',\n}: PortalHomePageHeaderProps): React.ReactNode => {\n  return (\n    <Box\n      data-testid=\"HeaderContainer\"\n      sx={{\n        background: backgroundCss,\n        padding: { xs: 0, md: '50px 80px' },\n        position: 'relative',\n      }}\n    >\n      {backgroundMp4 && (\n        <Box\n          component=\"video\"\n          autoPlay\n          loop\n          muted\n          playsInline\n          sx={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            width: '100%',\n            height: '100%',\n            objectFit: 'fill',\n            zIndex: -1,\n            background: backgroundMp4Css,\n          }}\n        >\n          <source src={backgroundMp4} type=\"video/mp4\" />\n          Your browser does not support the video tag.\n        </Box>\n      )}\n      <Stack\n        sx={{\n          alignItems: 'flex-start',\n          padding: { xs: '40px', md: '40px 0' },\n          gap: '24px',\n          width: { sm: '100%', md: textAreaWidth },\n        }}\n      >\n        <Typography\n          variant=\"headline2\"\n          sx={{\n            fontWeight: 300,\n            lineHeight: '130%',\n            fontSize: { xs: '36px', md: '42px' },\n            color: 'grey.1000',\n          }}\n        >\n          {title}\n        </Typography>\n        {subTitle && (\n          <Typography\n            variant=\"headline3\"\n            sx={{\n              fontSize: '24px',\n              fontWeight: '400',\n              lineHeight: '160%',\n              color: 'grey.1000',\n            }}\n          >\n            {subTitle}\n          </Typography>\n        )}\n        <Typography\n          sx={{ fontSize: '18px', lineHeight: '140%', color: 'grey.900' }}\n        >\n          {description}\n        </Typography>\n        {buttonLink && (\n          <Button\n            href={buttonLink}\n            target=\"_blank\"\n            variant=\"contained\"\n            role=\"button\"\n            sx={theme => ({\n              whiteSpace: 'nowrap',\n              alignSelf: 'flex-start',\n              padding: '6px 24px',\n              fontWeight: 600,\n              boxShadow:\n                '0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)',\n              '&:hover': {\n                boxShadow:\n                  '0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)',\n              },\n              [theme.breakpoints.down('sm')]: {\n                width: '100%',\n              },\n            })}\n          >\n            Learn more\n          </Button>\n        )}\n      </Stack>\n    </Box>\n  )\n}\n\nexport default PortalHomePageHeader\n"],"mappings":";;;;AAcA,IAAM,KAAwB,EAC5B,kBACA,eACA,UACA,aACA,gBACA,kBACA,qBACA,mBAAgB,cAGd,kBAAC,GAAD;CACE,eAAY;CACZ,IAAI;EACF,YAAY;EACZ,SAAS;GAAE,IAAI;GAAG,IAAI;EAAY;EAClC,UAAU;CACZ;WANF,CAQG,KACC,kBAAC,GAAD;EACE,WAAU;EACV,UAAA;EACA,MAAA;EACA,OAAA;EACA,aAAA;EACA,IAAI;GACF,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,WAAW;GACX,QAAQ;GACR,YAAY;EACd;YAfF,CAiBE,kBAAC,UAAD;GAAQ,KAAK;GAAe,MAAK;EAAa,CAAA,GAAC,8CAE5C;KAEP,kBAAC,GAAD;EACE,IAAI;GACF,YAAY;GACZ,SAAS;IAAE,IAAI;IAAQ,IAAI;GAAS;GACpC,KAAK;GACL,OAAO;IAAE,IAAI;IAAQ,IAAI;GAAc;EACzC;YANF;GAQE,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,YAAY;KACZ,YAAY;KACZ,UAAU;MAAE,IAAI;MAAQ,IAAI;KAAO;KACnC,OAAO;IACT;cAEC;GACS,CAAA;GACX,KACC,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,UAAU;KACV,YAAY;KACZ,YAAY;KACZ,OAAO;IACT;cAEC;GACS,CAAA;GAEd,kBAAC,GAAD;IACE,IAAI;KAAE,UAAU;KAAQ,YAAY;KAAQ,OAAO;IAAW;cAE7D;GACS,CAAA;GACX,KACC,kBAAC,GAAD;IACE,MAAM;IACN,QAAO;IACP,SAAQ;IACR,MAAK;IACL,KAAI,OAAU;KACZ,YAAY;KACZ,WAAW;KACX,SAAS;KACT,YAAY;KACZ,WACE;KACF,WAAW,EACT,WACE,kHACJ;MACC,EAAM,YAAY,KAAK,IAAI,IAAI,EAC9B,OAAO,OACT;IACF;cACD;GAEO,CAAA;EAEL;GACJ"}
+{"version":3,"file":"PortalHomePageHeader.js","names":[],"sources":["../../../src/components/PortalHomePageHeader/PortalHomePageHeader.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Stack, Typography, Button } from '@mui/material'\n\nexport type PortalHomePageHeaderProps = {\n  backgroundCss: string // background of entire header\n  buttonLink?: string\n  title: React.ReactNode\n  subTitle?: React.ReactNode\n  description: React.ReactNode\n  backgroundMp4?: string\n  backgroundMp4Css?: string // while video is loading, what should the background color be?\n  textAreaWidth?: string // default is 746px.  used for md and up screen sizes\n  children?: React.ReactNode // rendered at the bottom of the header text area, e.g. a search box\n}\n\nconst PortalHomePageHeader = ({\n  backgroundCss,\n  buttonLink,\n  title,\n  subTitle,\n  description,\n  backgroundMp4,\n  backgroundMp4Css,\n  textAreaWidth = '746px',\n  children,\n}: PortalHomePageHeaderProps): React.ReactNode => {\n  return (\n    <Box\n      data-testid=\"HeaderContainer\"\n      sx={{\n        background: backgroundCss,\n        padding: { xs: 0, md: '50px 80px' },\n        position: 'relative',\n      }}\n    >\n      {backgroundMp4 && (\n        <Box\n          component=\"video\"\n          autoPlay\n          loop\n          muted\n          playsInline\n          sx={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            width: '100%',\n            height: '100%',\n            objectFit: 'fill',\n            zIndex: -1,\n            background: backgroundMp4Css,\n          }}\n        >\n          <source src={backgroundMp4} type=\"video/mp4\" />\n          Your browser does not support the video tag.\n        </Box>\n      )}\n      <Stack\n        direction={{ xs: 'column', lg: 'row' }}\n        sx={{\n          alignItems: {\n            xs: 'flex-start',\n            lg: children ? 'center' : 'flex-start',\n          },\n          justifyContent: 'space-between',\n          padding: { xs: '40px', md: '40px 0' },\n          gap: { xs: '40px', lg: '80px' },\n        }}\n      >\n        <Stack\n          sx={{\n            alignItems: 'flex-start',\n            gap: '24px',\n            minWidth: 0,\n            flex: children ? { lg: '1 1 0' } : undefined,\n            width: children ? '100%' : { sm: '100%', md: textAreaWidth },\n            maxWidth: children ? { md: textAreaWidth } : undefined,\n          }}\n        >\n          <Typography\n            variant=\"headline2\"\n            sx={{\n              fontWeight: 300,\n              lineHeight: '130%',\n              fontSize: { xs: '36px', md: '42px' },\n              color: 'grey.1000',\n            }}\n          >\n            {title}\n          </Typography>\n          {subTitle && (\n            <Typography\n              variant=\"headline3\"\n              sx={{\n                fontSize: '24px',\n                fontWeight: '400',\n                lineHeight: '160%',\n                color: 'grey.1000',\n              }}\n            >\n              {subTitle}\n            </Typography>\n          )}\n          <Typography\n            sx={{ fontSize: '18px', lineHeight: '140%', color: 'grey.900' }}\n          >\n            {description}\n          </Typography>\n          {buttonLink && (\n            <Button\n              href={buttonLink}\n              target=\"_blank\"\n              variant=\"contained\"\n              role=\"button\"\n              sx={theme => ({\n                whiteSpace: 'nowrap',\n                alignSelf: 'flex-start',\n                padding: '6px 24px',\n                fontWeight: 600,\n                boxShadow:\n                  '0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)',\n                '&:hover': {\n                  boxShadow:\n                    '0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)',\n                },\n                [theme.breakpoints.down('sm')]: {\n                  width: '100%',\n                },\n              })}\n            >\n              Learn more\n            </Button>\n          )}\n        </Stack>\n        {children && (\n          <Box\n            sx={{\n              flex: { lg: '1 1 0' },\n              minWidth: 0,\n              width: '100%',\n              maxWidth: { lg: '600px' },\n            }}\n          >\n            {children}\n          </Box>\n        )}\n      </Stack>\n    </Box>\n  )\n}\n\nexport default PortalHomePageHeader\n"],"mappings":";;;;AAeA,IAAM,KAAwB,EAC5B,kBACA,eACA,UACA,aACA,gBACA,kBACA,qBACA,mBAAgB,SAChB,kBAGE,kBAAC,GAAD;CACE,eAAY;CACZ,IAAI;EACF,YAAY;EACZ,SAAS;GAAE,IAAI;GAAG,IAAI;EAAY;EAClC,UAAU;CACZ;WANF,CAQG,KACC,kBAAC,GAAD;EACE,WAAU;EACV,UAAA;EACA,MAAA;EACA,OAAA;EACA,aAAA;EACA,IAAI;GACF,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,WAAW;GACX,QAAQ;GACR,YAAY;EACd;YAfF,CAiBE,kBAAC,UAAD;GAAQ,KAAK;GAAe,MAAK;EAAa,CAAA,GAAC,8CAE5C;KAEP,kBAAC,GAAD;EACE,WAAW;GAAE,IAAI;GAAU,IAAI;EAAM;EACrC,IAAI;GACF,YAAY;IACV,IAAI;IACJ,IAAI,IAAW,WAAW;GAC5B;GACA,gBAAgB;GAChB,SAAS;IAAE,IAAI;IAAQ,IAAI;GAAS;GACpC,KAAK;IAAE,IAAI;IAAQ,IAAI;GAAO;EAChC;YAVF,CAYE,kBAAC,GAAD;GACE,IAAI;IACF,YAAY;IACZ,KAAK;IACL,UAAU;IACV,MAAM,IAAW,EAAE,IAAI,QAAQ,IAAI,KAAA;IACnC,OAAO,IAAW,SAAS;KAAE,IAAI;KAAQ,IAAI;IAAc;IAC3D,UAAU,IAAW,EAAE,IAAI,EAAc,IAAI,KAAA;GAC/C;aARF;IAUE,kBAAC,GAAD;KACE,SAAQ;KACR,IAAI;MACF,YAAY;MACZ,YAAY;MACZ,UAAU;OAAE,IAAI;OAAQ,IAAI;MAAO;MACnC,OAAO;KACT;eAEC;IACS,CAAA;IACX,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,IAAI;MACF,UAAU;MACV,YAAY;MACZ,YAAY;MACZ,OAAO;KACT;eAEC;IACS,CAAA;IAEd,kBAAC,GAAD;KACE,IAAI;MAAE,UAAU;MAAQ,YAAY;MAAQ,OAAO;KAAW;eAE7D;IACS,CAAA;IACX,KACC,kBAAC,GAAD;KACE,MAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,KAAI,OAAU;MACZ,YAAY;MACZ,WAAW;MACX,SAAS;MACT,YAAY;MACZ,WACE;MACF,WAAW,EACT,WACE,kHACJ;OACC,EAAM,YAAY,KAAK,IAAI,IAAI,EAC9B,OAAO,OACT;KACF;eACD;IAEO,CAAA;GAEL;MACN,KACC,kBAAC,GAAD;GACE,IAAI;IACF,MAAM,EAAE,IAAI,QAAQ;IACpB,UAAU;IACV,OAAO;IACP,UAAU,EAAE,IAAI,QAAQ;GAC1B;GAEC;EACE,CAAA,CAEF;GACJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"ProjectInfo.d.ts","sourceRoot":"","sources":["../../../src/components/ProjectInfo/ProjectInfo.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA8D1D"}
+{"version":3,"file":"ProjectInfo.d.ts","sourceRoot":"","sources":["../../../src/components/ProjectInfo/ProjectInfo.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA+D1D"}

package/dist/components/ProjectInfo/ProjectInfo.js

@@ -7,7 +7,7 @@ import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 import { DoiObjectType as c } from "@sage-bionetworks/synapse-client";
 import l from "@mui/icons-material/ArticleOutlined";
 //#region src/components/ProjectInfo/ProjectInfo.tsx
-var u = "10px 12px";
+var u = "8px";
 function d(d) {
 	let [f, p] = r(null), { projectId: m } = d, { data: h, isLoading: g } = e({
 		id: m,
@@ -38,7 +38,8 @@ function d(d) {
 			},
 			borderRadius: "6px",
 			fontWeight: 540,
-			padding: u
+			padding: u,
+			height: "28px"
 		},
 		variant: "outlined",
 		children: "Project Info"

package/dist/components/ProjectInfo/ProjectInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectInfo.js","names":[],"sources":["../../../src/components/ProjectInfo/ProjectInfo.tsx"],"sourcesContent":["import { Button } from '@mui/material'\nimport { useState } from 'react'\nimport ProjectInfoPopover from './ProjectInfoPopover'\nimport { useGetDOIAssociation } from '@/synapse-queries/doi/useDOI'\nimport { DoiObjectType } from '@sage-bionetworks/synapse-client'\nimport useGetEntityMetadata from '@/utils/hooks/useGetEntityMetadata'\nimport ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined'\n\nconst PROJECT_INFO_BUTTON_PADDING = '10px 12px'\n\nexport type ProjectInfoProps = {\n  projectId: string\n}\n\nexport default function ProjectInfo(props: ProjectInfoProps) {\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)\n\n  const { projectId } = props\n\n  const {\n    data: projectDoiAssociation,\n    isLoading: projectDoiAssociationIsLoading,\n  } = useGetDOIAssociation({\n    id: projectId,\n    version: undefined,\n    type: DoiObjectType.ENTITY,\n  })\n\n  const { uploadDestinationString, isLoading: entityMetadataIsLoading } =\n    useGetEntityMetadata(projectId)\n\n  const isLoading = projectDoiAssociationIsLoading || entityMetadataIsLoading\n\n  const open = Boolean(anchorEl)\n  const id = open ? 'project-info-popover' : undefined\n\n  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  const popover = (\n    <ProjectInfoPopover\n      id={id}\n      projectId={projectId}\n      open={open}\n      anchorEl={anchorEl}\n      onClose={handleClose}\n      doi={projectDoiAssociation?.doiUri}\n      projectStorageLocation={uploadDestinationString}\n      isLoading={isLoading}\n    />\n  )\n\n  return (\n    <>\n      <Button\n        aria-describedby={id}\n        onClick={handleButtonClick}\n        startIcon={<ArticleOutlinedIcon />}\n        sx={{\n          width: { xs: '100%', sm: 'initial' },\n          borderRadius: '6px',\n          fontWeight: 540,\n          padding: PROJECT_INFO_BUTTON_PADDING,\n        }}\n        variant=\"outlined\"\n      >\n        Project Info\n      </Button>\n      {popover}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAQA,IAAM,IAA8B;AAMpC,SAAwB,EAAY,GAAyB;CAC3D,IAAM,CAAC,GAAU,KAAe,EAAmC,IAAI,GAEjE,EAAE,iBAAc,GAEhB,EACJ,MAAM,GACN,WAAW,MACT,EAAqB;EACvB,IAAI;EACJ,SAAS,KAAA;EACT,MAAM,EAAc;CACtB,CAAC,GAEK,EAAE,4BAAyB,WAAW,MAC1C,EAAqB,CAAS,GAE1B,IAAY,KAAkC,GAE9C,IAAO,EAAQ,GACf,IAAK,IAAO,yBAAyB,KAAA,GAErC,KAAqB,MAA+C;EACxE,EAAY,EAAM,aAAa;CACjC,GAMM,IACJ,kBAAC,GAAD;EACM;EACO;EACL;EACI;EACV,eAVsB;GACxB,EAAY,IAAI;EAClB;EASI,KAAK,GAAuB;EAC5B,wBAAwB;EACb;CACZ,CAAA;CAGH,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,oBAAkB;EAClB,SAAS;EACT,WAAW,kBAAC,GAAD,CAAsB,CAAA;EACjC,IAAI;GACF,OAAO;IAAE,IAAI;IAAQ,IAAI;GAAU;GACnC,cAAc;GACd,YAAY;GACZ,SAAS;EACX;EACA,SAAQ;YACT;CAEO,CAAA,GACP,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"ProjectInfo.js","names":[],"sources":["../../../src/components/ProjectInfo/ProjectInfo.tsx"],"sourcesContent":["import { Button } from '@mui/material'\nimport { useState } from 'react'\nimport ProjectInfoPopover from './ProjectInfoPopover'\nimport { useGetDOIAssociation } from '@/synapse-queries/doi/useDOI'\nimport { DoiObjectType } from '@sage-bionetworks/synapse-client'\nimport useGetEntityMetadata from '@/utils/hooks/useGetEntityMetadata'\nimport ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined'\n\nconst PROJECT_INFO_BUTTON_PADDING = '8px'\n\nexport type ProjectInfoProps = {\n  projectId: string\n}\n\nexport default function ProjectInfo(props: ProjectInfoProps) {\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)\n\n  const { projectId } = props\n\n  const {\n    data: projectDoiAssociation,\n    isLoading: projectDoiAssociationIsLoading,\n  } = useGetDOIAssociation({\n    id: projectId,\n    version: undefined,\n    type: DoiObjectType.ENTITY,\n  })\n\n  const { uploadDestinationString, isLoading: entityMetadataIsLoading } =\n    useGetEntityMetadata(projectId)\n\n  const isLoading = projectDoiAssociationIsLoading || entityMetadataIsLoading\n\n  const open = Boolean(anchorEl)\n  const id = open ? 'project-info-popover' : undefined\n\n  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  const popover = (\n    <ProjectInfoPopover\n      id={id}\n      projectId={projectId}\n      open={open}\n      anchorEl={anchorEl}\n      onClose={handleClose}\n      doi={projectDoiAssociation?.doiUri}\n      projectStorageLocation={uploadDestinationString}\n      isLoading={isLoading}\n    />\n  )\n\n  return (\n    <>\n      <Button\n        aria-describedby={id}\n        onClick={handleButtonClick}\n        startIcon={<ArticleOutlinedIcon />}\n        sx={{\n          width: { xs: '100%', sm: 'initial' },\n          borderRadius: '6px',\n          fontWeight: 540,\n          padding: PROJECT_INFO_BUTTON_PADDING,\n          height: '28px',\n        }}\n        variant=\"outlined\"\n      >\n        Project Info\n      </Button>\n      {popover}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAQA,IAAM,IAA8B;AAMpC,SAAwB,EAAY,GAAyB;CAC3D,IAAM,CAAC,GAAU,KAAe,EAAmC,IAAI,GAEjE,EAAE,iBAAc,GAEhB,EACJ,MAAM,GACN,WAAW,MACT,EAAqB;EACvB,IAAI;EACJ,SAAS,KAAA;EACT,MAAM,EAAc;CACtB,CAAC,GAEK,EAAE,4BAAyB,WAAW,MAC1C,EAAqB,CAAS,GAE1B,IAAY,KAAkC,GAE9C,IAAO,EAAQ,GACf,IAAK,IAAO,yBAAyB,KAAA,GAErC,KAAqB,MAA+C;EACxE,EAAY,EAAM,aAAa;CACjC,GAMM,IACJ,kBAAC,GAAD;EACM;EACO;EACL;EACI;EACV,eAVsB;GACxB,EAAY,IAAI;EAClB;EASI,KAAK,GAAuB;EAC5B,wBAAwB;EACb;CACZ,CAAA;CAGH,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,oBAAkB;EAClB,SAAS;EACT,WAAW,kBAAC,GAAD,CAAsB,CAAA;EACjC,IAAI;GACF,OAAO;IAAE,IAAI;IAAQ,IAAI;GAAU;GACnC,cAAc;GACd,YAAY;GACZ,SAAS;GACT,QAAQ;EACV;EACA,SAAQ;YACT;CAEO,CAAA,GACP,CACD,EAAA,CAAA;AAEN"}

package/dist/components/QueryBuilder/FilterConditionRow.css

@@ -0,0 +1 @@
+._row_bmqgz_1{--qb-pill-color:var(--synapse-primary-action-color);align-items:center;gap:8px;min-height:30px;padding:4px 0;display:flex}._remove_bmqgz_10{border:1px solid var(--synapse-border-color-gray);color:var(--synapse-gray-600)!important;border-radius:4px!important;padding:4px!important}._remove_bmqgz_10:hover{color:var(--synapse-error);border-color:var(--synapse-error);background-color:#0000!important}._propertyPicker_bmqgz_22 .MuiOutlinedInput-root,._operatorPicker_bmqgz_23 .MuiOutlinedInput-root,._rangeInput_bmqgz_24 .MuiOutlinedInput-root,._textInput_bmqgz_25 .MuiOutlinedInput-root{height:36px;font-size:14px}._propertyPicker_bmqgz_22{min-width:200px}._operatorPicker_bmqgz_23{min-width:120px}._rangeInput_bmqgz_24{width:120px}._textInput_bmqgz_25{min-width:200px}._pillGroupContainer_bmqgz_46{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}._pillFilter_bmqgz_54{max-width:260px}._pillGroupScroll_bmqgz_58{max-height:120px;overflow-y:auto}._pillGroup_bmqgz_46{flex-wrap:wrap;gap:6px;display:flex}._pillGroup_bmqgz_46 .MuiToggleButton-root,._pillGroup_bmqgz_46 .MuiToggleButtonGroup-grouped{text-transform:none;padding:2px 12px;font-size:13px;line-height:1.4;border:1px solid var(--synapse-gray-dark)!important;border-radius:999px!important;margin:0!important}._pillGroup_bmqgz_46 .MuiToggleButton-root.Mui-selected{background-color:var(--qb-pill-color);color:#fff;border-color:var(--qb-pill-color)}._pillGroup_bmqgz_46 .MuiToggleButton-root.Mui-selected:hover{background-color:var(--qb-pill-color)}

package/dist/components/QueryBuilder/FilterConditionRow.d.ts

@@ -0,0 +1,8 @@
+import { QBCondition } from './QueryBuilderTypes';
+export type FilterConditionRowProps = {
+    condition: QBCondition;
+    parentGroupId: string;
+    index: number;
+};
+export declare function FilterConditionRow(props: FilterConditionRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FilterConditionRow.d.ts.map

package/dist/components/QueryBuilder/FilterConditionRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterConditionRow.d.ts","sourceRoot":"","sources":["../../../src/components/QueryBuilder/FilterConditionRow.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,WAAW,EAAiB,MAAM,qBAAqB,CAAA;AAEhE,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,EAAE,WAAW,CAAA;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CA0KhE"}

package/dist/components/QueryBuilder/FilterConditionRow.js

@@ -0,0 +1,260 @@
+import { splitAndTrim as e } from "../../utils/functions/StringUtils.js";
+import { defaultOpForColumnType as t } from "./queryBuilderOperations.js";
+import { availableOpsForKind as n, classifyColumn as r, labelForFacetValue as i, labelForOp as a } from "./queryBuilderMetadata.js";
+import { useQueryBuilderInternalContext as o } from "./QueryBuilderInternalContext.js";
+import s from "./FilterConditionRow.module.js";
+import c from "./queryBuilderDrag.module.js";
+import { QBDragHandle as l } from "./QBDragHandle.js";
+import { useMemo as u, useState as d } from "react";
+import { Autocomplete as f, IconButton as p, InputLabel as m, MenuItem as h, Select as g, TextField as _, ToggleButton as v, ToggleButtonGroup as y, Tooltip as b } from "@mui/material";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import w from "@mui/icons-material/DeleteOutline";
+import { useSortable as T } from "@dnd-kit/react/sortable";
+//#region src/components/QueryBuilder/FilterConditionRow.tsx
+function E(e) {
+	let { condition: i, parentGroupId: d, index: v } = e, { columnModels: y, facetResults: E, onlyFacetedColumns: O, getColumnDisplayName: k, updateConditionAt: M, removeConditionAt: N } = o(), { ref: P, handleRef: F, isDragSource: I } = T({
+		id: i.id,
+		index: v,
+		group: d,
+		disabled: { droppable: !0 }
+	}), L = u(() => new Set(E.filter((e) => e.concreteType === "org.sagebionetworks.repo.model.table.FacetColumnResultValues").map((e) => e.columnName)), [E]), R = u(() => (O ? y.filter((e) => L.has(e.name)) : y).map((e) => ({
+		name: e.name,
+		columnType: e.columnType,
+		label: k(e.name)
+	})), [
+		y,
+		L,
+		O,
+		k
+	]), z = R.find((e) => e.name === i.columnName) ?? null, B = i.columnName != null && L.has(i.columnName), V = r(i.columnType, B), H = n(V), U = `qb-op-label-${i.id}`;
+	return /* @__PURE__ */ C("div", {
+		ref: P,
+		className: `${s.row}${I ? ` ${c.dragSource}` : ""}`,
+		role: "group",
+		"aria-label": `Filter condition${i.columnName ? ` on ${i.columnName}` : ""}`,
+		"data-qb-node-id": i.id,
+		children: [
+			/* @__PURE__ */ S(l, {
+				handleRef: F,
+				label: "Drag condition into a condition group"
+			}),
+			/* @__PURE__ */ S(b, {
+				title: "Remove condition",
+				children: /* @__PURE__ */ S(p, {
+					size: "small",
+					className: s.remove,
+					"aria-label": "Remove condition",
+					onClick: () => N(i.id),
+					children: /* @__PURE__ */ S(w, { fontSize: "small" })
+				})
+			}),
+			/* @__PURE__ */ S(f, {
+				className: s.propertyPicker,
+				size: "small",
+				options: R,
+				getOptionLabel: (e) => e.label,
+				isOptionEqualToValue: (e, t) => e.name === t.name,
+				value: z,
+				renderInput: (e) => /* @__PURE__ */ S(_, {
+					...e,
+					variant: "outlined",
+					placeholder: "Select property…",
+					inputProps: {
+						...e.inputProps,
+						"aria-label": "Property"
+					}
+				}),
+				onChange: (e, a) => {
+					if (a == null) return;
+					let o = n(r(a.columnType, j(E, a.name))), s = o.length > 0 ? o[0] : t(a.columnType);
+					M(i.id, {
+						columnName: a.name,
+						columnType: a.columnType,
+						op: s,
+						values: [],
+						rangeMin: null,
+						rangeMax: null,
+						text: null
+					});
+				}
+			}),
+			H.length > 0 && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(m, {
+				id: U,
+				sx: { display: "none" },
+				children: "Operator"
+			}), /* @__PURE__ */ S(g, {
+				className: s.operatorPicker,
+				size: "small",
+				labelId: U,
+				variant: "outlined",
+				value: H.includes(i.op) ? i.op : H[0],
+				onChange: (e) => {
+					let t = e.target.value;
+					M(i.id, { op: t });
+				},
+				"aria-label": "Operator",
+				children: H.map((e) => /* @__PURE__ */ S(h, {
+					value: e,
+					children: a(e)
+				}, e))
+			})] }),
+			/* @__PURE__ */ S(D, {
+				condition: i,
+				columnKind: V,
+				hasFacet: B,
+				columnModels: y,
+				facetValues: B && i.columnName != null ? A(E, i.columnName) : [],
+				onChange: (e) => M(i.id, e)
+			})
+		]
+	});
+}
+function D(t) {
+	let { condition: n, columnKind: r, hasFacet: i, facetValues: a, onChange: o } = t, { op: c } = n;
+	if (c === "has_value" || c === "no_value") return null;
+	switch (c) {
+		case "is_any_of":
+		case "is_all_of": return (r === "enum" || r === "list") && i ? /* @__PURE__ */ S(k, {
+			facetValues: a,
+			selectedValues: n.values,
+			onChange: (e) => o({ values: e })
+		}) : /* @__PURE__ */ S(_, {
+			className: s.textInput,
+			size: "small",
+			variant: "outlined",
+			placeholder: "Comma-separated values",
+			value: n.values.join(", "),
+			slotProps: { htmlInput: { "aria-label": "Values" } },
+			onChange: (t) => o({ values: e(t.target.value) })
+		});
+		case "between": return /* @__PURE__ */ C(x, { children: [
+			/* @__PURE__ */ S(_, {
+				className: s.rangeInput,
+				size: "small",
+				variant: "outlined",
+				type: "text",
+				placeholder: "Min",
+				value: n.rangeMin ?? "",
+				slotProps: { htmlInput: { "aria-label": "Minimum" } },
+				onChange: (e) => o({ rangeMin: e.target.value })
+			}),
+			/* @__PURE__ */ S("span", {
+				"aria-hidden": "true",
+				children: "to"
+			}),
+			/* @__PURE__ */ S(_, {
+				className: s.rangeInput,
+				size: "small",
+				variant: "outlined",
+				type: "text",
+				placeholder: "Max",
+				value: n.rangeMax ?? "",
+				slotProps: { htmlInput: { "aria-label": "Maximum" } },
+				onChange: (e) => o({ rangeMax: e.target.value })
+			})
+		] });
+		case "gt":
+		case "gte": return /* @__PURE__ */ S(_, {
+			className: s.rangeInput,
+			size: "small",
+			variant: "outlined",
+			type: "text",
+			value: n.rangeMin ?? "",
+			slotProps: { htmlInput: { "aria-label": "Value" } },
+			onChange: (e) => o({ rangeMin: e.target.value })
+		});
+		case "lt":
+		case "lte": return /* @__PURE__ */ S(_, {
+			className: s.rangeInput,
+			size: "small",
+			variant: "outlined",
+			type: "text",
+			value: n.rangeMax ?? "",
+			slotProps: { htmlInput: { "aria-label": "Value" } },
+			onChange: (e) => o({ rangeMax: e.target.value })
+		});
+		case "equal":
+		case "not_equal": return r === "boolean" ? /* @__PURE__ */ C(y, {
+			className: s.pillGroup,
+			exclusive: !0,
+			value: n.values[0] ?? null,
+			onChange: (e, t) => {
+				o({ values: t == null ? [] : [t] });
+			},
+			"aria-label": "Boolean value",
+			children: [/* @__PURE__ */ S(v, {
+				value: "true",
+				children: "Yes"
+			}), /* @__PURE__ */ S(v, {
+				value: "false",
+				children: "No"
+			})]
+		}) : /* @__PURE__ */ S(_, {
+			className: s.textInput,
+			size: "small",
+			variant: "outlined",
+			value: n.values[0] ?? "",
+			slotProps: { htmlInput: { "aria-label": "Value" } },
+			onChange: (e) => o({ values: [e.target.value] })
+		});
+		case "contains":
+		case "starts_with":
+		case "ends_with":
+		case "is_exactly": return /* @__PURE__ */ S(_, {
+			className: s.textInput,
+			size: "small",
+			variant: "outlined",
+			value: n.text ?? "",
+			slotProps: { htmlInput: { "aria-label": "Value" } },
+			onChange: (e) => o({ text: e.target.value })
+		});
+		default: return null;
+	}
+}
+var O = 40;
+function k(e) {
+	let { facetValues: t, selectedValues: n, onChange: r } = e, [a, o] = d(""), c = t.length > O, l = u(() => [...t].sort((e, t) => i(e).localeCompare(i(t), void 0, { sensitivity: "base" })), [t]), f = u(() => {
+		if (!c || a.trim() === "") return l;
+		let e = a.trim().toLowerCase();
+		return l.filter((t) => i(t).toLowerCase().includes(e));
+	}, [
+		l,
+		a,
+		c
+	]);
+	return /* @__PURE__ */ C("div", {
+		className: s.pillGroupContainer,
+		children: [c && /* @__PURE__ */ S(_, {
+			className: s.pillFilter,
+			size: "small",
+			variant: "outlined",
+			placeholder: `Filter ${t.length} values…`,
+			value: a,
+			onChange: (e) => o(e.target.value),
+			slotProps: { htmlInput: { "aria-label": "Filter values" } }
+		}), /* @__PURE__ */ S("div", {
+			className: s.pillGroupScroll,
+			children: /* @__PURE__ */ S(y, {
+				className: s.pillGroup,
+				value: n,
+				onChange: (e, t) => r(t),
+				"aria-label": "Selected values",
+				children: f.map((e) => /* @__PURE__ */ S(v, {
+					value: e,
+					children: i(e)
+				}, e))
+			})
+		})]
+	});
+}
+function A(e, t) {
+	let n = e.find((e) => e.columnName === t);
+	return n == null ? [] : n.concreteType === "org.sagebionetworks.repo.model.table.FacetColumnResultValues" ? n.facetValues.map((e) => e.value) : [];
+}
+function j(e, t) {
+	return e.some((e) => e.columnName === t && e.concreteType === "org.sagebionetworks.repo.model.table.FacetColumnResultValues");
+}
+//#endregion
+export { E as FilterConditionRow };
+
+//# sourceMappingURL=FilterConditionRow.js.map

package/dist/components/QueryBuilder/FilterConditionRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterConditionRow.js","names":[],"sources":["../../../src/components/QueryBuilder/FilterConditionRow.tsx"],"sourcesContent":["import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'\nimport { useSortable } from '@dnd-kit/react/sortable'\nimport {\n  Autocomplete,\n  IconButton,\n  InputLabel,\n  MenuItem,\n  Select,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Tooltip,\n} from '@mui/material'\nimport { ColumnModel } from '@sage-bionetworks/synapse-types'\nimport { useMemo, useState } from 'react'\nimport { splitAndTrim } from '../../utils/functions/StringUtils'\nimport { useQueryBuilderInternalContext } from './QueryBuilderInternalContext'\nimport {\n  availableOpsForKind,\n  classifyColumn,\n  labelForFacetValue,\n  labelForOp,\n  QBColumnKind,\n} from './queryBuilderMetadata'\nimport styles from './FilterConditionRow.module.scss'\nimport { QBDragHandle } from './QBDragHandle'\nimport dragStyles from './queryBuilderDrag.module.scss'\nimport { defaultOpForColumnType } from './queryBuilderOperations'\nimport { QBCondition, QBConditionOp } from './QueryBuilderTypes'\n\nexport type FilterConditionRowProps = {\n  condition: QBCondition\n  parentGroupId: string\n  index: number\n}\n\nexport function FilterConditionRow(props: FilterConditionRowProps) {\n  const { condition, parentGroupId, index } = props\n  const {\n    columnModels,\n    facetResults,\n    onlyFacetedColumns,\n    getColumnDisplayName,\n    updateConditionAt,\n    removeConditionAt,\n  } = useQueryBuilderInternalContext()\n\n  // A condition is a drag source only. Dropping onto a condition has no\n  // meaning in a boolean tree — a node joins a group, not another leaf — so\n  // groups own every drop zone and this row never becomes a target.\n  const {\n    ref: sortableRef,\n    handleRef,\n    isDragSource,\n  } = useSortable({\n    id: condition.id,\n    index,\n    group: parentGroupId,\n    disabled: { droppable: true },\n  })\n\n  const facetColumnNames = useMemo(\n    () =>\n      new Set(\n        facetResults\n          .filter(\n            f =>\n              f.concreteType ===\n              'org.sagebionetworks.repo.model.table.FacetColumnResultValues',\n          )\n          .map(f => f.columnName),\n      ),\n    [facetResults],\n  )\n\n  const propertyOptions = useMemo(() => {\n    const source = onlyFacetedColumns\n      ? columnModels.filter(cm => facetColumnNames.has(cm.name))\n      : columnModels\n    return source.map(cm => ({\n      name: cm.name,\n      columnType: cm.columnType as string,\n      label: getColumnDisplayName(cm.name),\n    }))\n  }, [columnModels, facetColumnNames, onlyFacetedColumns, getColumnDisplayName])\n\n  const selectedOption =\n    propertyOptions.find(opt => opt.name === condition.columnName) ?? null\n\n  const hasFacet =\n    condition.columnName != null && facetColumnNames.has(condition.columnName)\n  const columnKind = classifyColumn(condition.columnType, hasFacet)\n  const availableOps = availableOpsForKind(columnKind)\n\n  const operatorLabelId = `qb-op-label-${condition.id}`\n\n  return (\n    <div\n      ref={sortableRef}\n      className={`${styles.row}${isDragSource ? ` ${dragStyles.dragSource}` : ''}`}\n      role=\"group\"\n      aria-label={`Filter condition${condition.columnName ? ` on ${condition.columnName}` : ''}`}\n      data-qb-node-id={condition.id}\n    >\n      <QBDragHandle\n        handleRef={handleRef}\n        label=\"Drag condition into a condition group\"\n      />\n\n      <Tooltip title=\"Remove condition\">\n        <IconButton\n          size=\"small\"\n          className={styles.remove}\n          aria-label=\"Remove condition\"\n          onClick={() => removeConditionAt(condition.id)}\n        >\n          <DeleteOutlineIcon fontSize=\"small\" />\n        </IconButton>\n      </Tooltip>\n\n      <Autocomplete\n        className={styles.propertyPicker}\n        size=\"small\"\n        options={propertyOptions}\n        getOptionLabel={opt => opt.label}\n        isOptionEqualToValue={(a, b) => a.name === b.name}\n        value={selectedOption}\n        renderInput={params => (\n          <TextField\n            {...params}\n            variant=\"outlined\"\n            placeholder=\"Select property…\"\n            inputProps={{ ...params.inputProps, 'aria-label': 'Property' }}\n          />\n        )}\n        onChange={(_event, value) => {\n          if (value == null) return\n          // Pick a default op that matches the new column's kind (so a\n          // faceted column shifts the row into pill-picker mode, a numeric\n          // column into range mode, etc.). Fall back to the raw columnType\n          // default if the kind has no ops.\n          const nextKind = classifyColumn(\n            value.columnType,\n            hasFacetForColumnName(facetResults, value.name),\n          )\n          const opsForKind = availableOpsForKind(nextKind)\n          const nextOp =\n            opsForKind.length > 0\n              ? opsForKind[0]\n              : defaultOpForColumnType(value.columnType)\n          updateConditionAt(condition.id, {\n            columnName: value.name,\n            columnType: value.columnType,\n            op: nextOp,\n            values: [],\n            rangeMin: null,\n            rangeMax: null,\n            text: null,\n          })\n        }}\n      />\n\n      {availableOps.length > 0 && (\n        <>\n          <InputLabel id={operatorLabelId} sx={{ display: 'none' }}>\n            Operator\n          </InputLabel>\n          <Select\n            className={styles.operatorPicker}\n            size=\"small\"\n            labelId={operatorLabelId}\n            variant=\"outlined\"\n            value={\n              availableOps.includes(condition.op)\n                ? condition.op\n                : availableOps[0]\n            }\n            onChange={event => {\n              const nextOp = event.target.value as QBConditionOp\n              updateConditionAt(condition.id, { op: nextOp })\n            }}\n            aria-label=\"Operator\"\n          >\n            {availableOps.map(op => (\n              <MenuItem key={op} value={op}>\n                {labelForOp(op)}\n              </MenuItem>\n            ))}\n          </Select>\n        </>\n      )}\n\n      <ValueInput\n        condition={condition}\n        columnKind={columnKind}\n        hasFacet={hasFacet}\n        columnModels={columnModels}\n        facetValues={\n          hasFacet && condition.columnName != null\n            ? findFacetValues(facetResults, condition.columnName)\n            : []\n        }\n        onChange={patch => updateConditionAt(condition.id, patch)}\n      />\n    </div>\n  )\n}\n\ntype ValueInputProps = {\n  condition: QBCondition\n  columnKind: QBColumnKind\n  hasFacet: boolean\n  columnModels: ColumnModel[]\n  facetValues: string[]\n  onChange: (patch: Partial<Omit<QBCondition, 'kind' | 'id'>>) => void\n}\n\nfunction ValueInput(props: ValueInputProps) {\n  const { condition, columnKind, hasFacet, facetValues, onChange } = props\n  const { op } = condition\n\n  // Presence operators have no input at all.\n  if (op === 'has_value' || op === 'no_value') return null\n\n  switch (op) {\n    case 'is_any_of':\n    case 'is_all_of':\n      if ((columnKind === 'enum' || columnKind === 'list') && hasFacet) {\n        return (\n          <FacetPillGroup\n            facetValues={facetValues}\n            selectedValues={condition.values}\n            onChange={next => onChange({ values: next })}\n          />\n        )\n      }\n      return (\n        <TextField\n          className={styles.textInput}\n          size=\"small\"\n          variant=\"outlined\"\n          placeholder=\"Comma-separated values\"\n          value={condition.values.join(', ')}\n          slotProps={{ htmlInput: { 'aria-label': 'Values' } }}\n          onChange={event =>\n            onChange({ values: splitAndTrim(event.target.value) })\n          }\n        />\n      )\n    case 'between':\n      return (\n        <>\n          <TextField\n            className={styles.rangeInput}\n            size=\"small\"\n            variant=\"outlined\"\n            type=\"text\"\n            placeholder=\"Min\"\n            value={condition.rangeMin ?? ''}\n            slotProps={{ htmlInput: { 'aria-label': 'Minimum' } }}\n            onChange={event => onChange({ rangeMin: event.target.value })}\n          />\n          <span aria-hidden=\"true\">to</span>\n          <TextField\n            className={styles.rangeInput}\n            size=\"small\"\n            variant=\"outlined\"\n            type=\"text\"\n            placeholder=\"Max\"\n            value={condition.rangeMax ?? ''}\n            slotProps={{ htmlInput: { 'aria-label': 'Maximum' } }}\n            onChange={event => onChange({ rangeMax: event.target.value })}\n          />\n        </>\n      )\n    case 'gt':\n    case 'gte':\n      return (\n        <TextField\n          className={styles.rangeInput}\n          size=\"small\"\n          variant=\"outlined\"\n          type=\"text\"\n          value={condition.rangeMin ?? ''}\n          slotProps={{ htmlInput: { 'aria-label': 'Value' } }}\n          onChange={event => onChange({ rangeMin: event.target.value })}\n        />\n      )\n    case 'lt':\n    case 'lte':\n      return (\n        <TextField\n          className={styles.rangeInput}\n          size=\"small\"\n          variant=\"outlined\"\n          type=\"text\"\n          value={condition.rangeMax ?? ''}\n          slotProps={{ htmlInput: { 'aria-label': 'Value' } }}\n          onChange={event => onChange({ rangeMax: event.target.value })}\n        />\n      )\n    case 'equal':\n    case 'not_equal':\n      if (columnKind === 'boolean') {\n        return (\n          <ToggleButtonGroup\n            className={styles.pillGroup}\n            exclusive\n            value={condition.values[0] ?? null}\n            onChange={(_event, next: string | null) => {\n              onChange({ values: next == null ? [] : [next] })\n            }}\n            aria-label=\"Boolean value\"\n          >\n            <ToggleButton value=\"true\">Yes</ToggleButton>\n            <ToggleButton value=\"false\">No</ToggleButton>\n          </ToggleButtonGroup>\n        )\n      }\n      return (\n        <TextField\n          className={styles.textInput}\n          size=\"small\"\n          variant=\"outlined\"\n          value={condition.values[0] ?? ''}\n          slotProps={{ htmlInput: { 'aria-label': 'Value' } }}\n          onChange={event => onChange({ values: [event.target.value] })}\n        />\n      )\n    case 'contains':\n    case 'starts_with':\n    case 'ends_with':\n    case 'is_exactly':\n      return (\n        <TextField\n          className={styles.textInput}\n          size=\"small\"\n          variant=\"outlined\"\n          value={condition.text ?? ''}\n          slotProps={{ htmlInput: { 'aria-label': 'Value' } }}\n          onChange={event => onChange({ text: event.target.value })}\n        />\n      )\n    default:\n      op satisfies never\n      return null\n  }\n}\n\ntype FacetPillGroupProps = {\n  facetValues: string[]\n  selectedValues: string[]\n  onChange: (next: string[]) => void\n}\n\n// Above this many pills we show a text filter above the group.\nconst PILL_FILTER_THRESHOLD = 40\n\nfunction FacetPillGroup(props: FacetPillGroupProps) {\n  const { facetValues, selectedValues, onChange } = props\n  const [filter, setFilter] = useState('')\n  const showFilter = facetValues.length > PILL_FILTER_THRESHOLD\n\n  // Sort alphabetically by the user-facing label so the pill order is\n  // predictable regardless of the backend's facet-result ordering.\n  const sortedValues = useMemo(() => {\n    return [...facetValues].sort((a, b) =>\n      labelForFacetValue(a).localeCompare(labelForFacetValue(b), undefined, {\n        sensitivity: 'base',\n      }),\n    )\n  }, [facetValues])\n\n  const visibleValues = useMemo(() => {\n    if (!showFilter || filter.trim() === '') return sortedValues\n    const q = filter.trim().toLowerCase()\n    return sortedValues.filter(v =>\n      labelForFacetValue(v).toLowerCase().includes(q),\n    )\n  }, [sortedValues, filter, showFilter])\n\n  return (\n    <div className={styles.pillGroupContainer}>\n      {showFilter && (\n        <TextField\n          className={styles.pillFilter}\n          size=\"small\"\n          variant=\"outlined\"\n          placeholder={`Filter ${facetValues.length} values…`}\n          value={filter}\n          onChange={event => setFilter(event.target.value)}\n          slotProps={{ htmlInput: { 'aria-label': 'Filter values' } }}\n        />\n      )}\n      <div className={styles.pillGroupScroll}>\n        <ToggleButtonGroup\n          className={styles.pillGroup}\n          value={selectedValues}\n          onChange={(_event, next: string[]) => onChange(next)}\n          aria-label=\"Selected values\"\n        >\n          {visibleValues.map(value => (\n            <ToggleButton key={value} value={value}>\n              {labelForFacetValue(value)}\n            </ToggleButton>\n          ))}\n        </ToggleButtonGroup>\n      </div>\n    </div>\n  )\n}\n\nfunction findFacetValues(\n  facetResults: readonly ReturnType<\n    typeof useQueryBuilderInternalContext\n  >['facetResults'][number][],\n  columnName: string,\n): string[] {\n  const match = facetResults.find(f => f.columnName === columnName)\n  if (match == null) return []\n  if (\n    match.concreteType ===\n    'org.sagebionetworks.repo.model.table.FacetColumnResultValues'\n  ) {\n    return match.facetValues.map(v => v.value)\n  }\n  return []\n}\n\nfunction hasFacetForColumnName(\n  facetResults: readonly ReturnType<\n    typeof useQueryBuilderInternalContext\n  >['facetResults'][number][],\n  columnName: string,\n): boolean {\n  return facetResults.some(\n    f =>\n      f.columnName === columnName &&\n      f.concreteType ===\n        'org.sagebionetworks.repo.model.table.FacetColumnResultValues',\n  )\n}\n"],"mappings":"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"}

package/dist/components/QueryBuilder/FilterConditionRow.module.js

@@ -0,0 +1,16 @@
+import './FilterConditionRow.css';var e = {
+	row: "_row_bmqgz_1",
+	remove: "_remove_bmqgz_10",
+	propertyPicker: "_propertyPicker_bmqgz_22",
+	operatorPicker: "_operatorPicker_bmqgz_23",
+	rangeInput: "_rangeInput_bmqgz_24",
+	textInput: "_textInput_bmqgz_25",
+	pillGroupContainer: "_pillGroupContainer_bmqgz_46",
+	pillFilter: "_pillFilter_bmqgz_54",
+	pillGroupScroll: "_pillGroupScroll_bmqgz_58",
+	pillGroup: "_pillGroup_bmqgz_46"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=FilterConditionRow.module.js.map

package/dist/components/QueryBuilder/FilterConditionRow.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterConditionRow.module.js","names":[],"sources":["../../../src/components/QueryBuilder/FilterConditionRow.module.scss"],"sourcesContent":[".row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 0;\n  min-height: 30px;\n\n  // Value pills adopt the parent group's accent — parent sets `--qb-pill-color`\n  // as inline style on its wrapper (see FilterGroupNode).\n  --qb-pill-color: var(--synapse-primary-action-color);\n}\n\n.remove {\n  color: var(--synapse-gray-600) !important;\n  border: 1px solid var(--synapse-border-color-gray);\n  border-radius: 4px !important;\n  padding: 4px !important;\n\n  &:hover {\n    color: var(--synapse-error);\n    border-color: var(--synapse-error);\n    background-color: transparent !important;\n  }\n}\n\n// Match the field heights across the row so Property, Operator, and value\n// inputs all sit on the same baseline. Outlined inputs get consistent\n// padding via MUI defaults; we just fix the height and widths.\n.propertyPicker,\n.operatorPicker,\n.rangeInput,\n.textInput {\n  :global(.MuiOutlinedInput-root) {\n    height: 36px;\n    font-size: 14px;\n  }\n}\n\n.propertyPicker {\n  min-width: 200px;\n}\n\n.operatorPicker {\n  min-width: 120px;\n}\n\n.rangeInput {\n  width: 120px;\n}\n\n.textInput {\n  min-width: 200px;\n}\n\n.pillGroupContainer {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n  min-width: 0;\n}\n\n.pillFilter {\n  max-width: 260px;\n}\n\n.pillGroupScroll {\n  max-height: 120px;\n  overflow-y: auto;\n}\n\n.pillGroup {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n\n  // MUI's ToggleButtonGroup uses `:not(:first-of-type)` rules to collapse\n  // grouped buttons into an attached pill bar. `!important` is the pragmatic\n  // way to undo that; otherwise our pills have flat left edges and negative\n  // margins.\n  :global(.MuiToggleButton-root),\n  :global(.MuiToggleButtonGroup-grouped) {\n    text-transform: none;\n    padding: 2px 12px;\n    border-radius: 999px !important;\n    border: 1px solid var(--synapse-gray-dark) !important;\n    margin: 0 !important;\n    font-size: 13px;\n    line-height: 1.4;\n  }\n\n  :global(.MuiToggleButton-root.Mui-selected) {\n    background-color: var(--qb-pill-color);\n    color: white;\n    border-color: var(--qb-pill-color);\n  }\n\n  :global(.MuiToggleButton-root.Mui-selected:hover) {\n    background-color: var(--qb-pill-color);\n  }\n}\n"],"mappings":""}