synapse-react-client 4.0.23 → 4.0.25

package/dist/components/favorites/FavoriteButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FavoriteButton.js","names":[],"sources":["../../../src/components/favorites/FavoriteButton.tsx"],"sourcesContent":["import ConditionalWrapper from '@/components/utils/ConditionalWrapper'\nimport {\n  useAddFavorite,\n  useIsFavorite,\n  useRemoveFavorite,\n} from '@/synapse-queries'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { IconButton, Skeleton, Tooltip } from '@mui/material'\nimport IconSvg from '../IconSvg/IconSvg'\n\nexport type FavoriteButtonProps = {\n  /* The entity for which to show a favorite button */\n  entityId: string\n}\n\n/**\n * Renders a button that indicates if an entity is favorited by the logged-in user. When clicked, the entity is\n * added to/removed from their favorites\n */\nexport default function FavoriteButton(props: FavoriteButtonProps) {\n  const { entityId } = props\n  const { isAuthenticated } = useSynapseContext()\n  const { isFavorite, isLoading } = useIsFavorite(entityId)\n  const { mutate: onAddFavorite, isPending: isAddingFavorite } =\n    useAddFavorite()\n  const { mutate: onRemoveFavorite, isPending: isRemovingFavorite } =\n    useRemoveFavorite()\n\n  const disableButton =\n    isLoading || isAddingFavorite || isRemovingFavorite || !isAuthenticated\n\n  let tooltipText = 'Add to Favorites'\n  if (!isAuthenticated) {\n    tooltipText = 'Sign in to add this to your favorites'\n  } else if (isFavorite) {\n    tooltipText = 'Remove from Favorites'\n  }\n  return (\n    <ConditionalWrapper condition={isLoading} wrapper={Skeleton}>\n      <Tooltip title={tooltipText} placement={'top'}>\n        <span>\n          <IconButton\n            size={'small'}\n            disabled={disableButton}\n            onClick={() => {\n              if (isFavorite) {\n                onRemoveFavorite(entityId)\n              } else {\n                onAddFavorite(entityId)\n              }\n            }}\n            sx={{ padding: '2px' }}\n          >\n            <IconSvg\n              icon={isFavorite ? 'fav' : 'favOutline'}\n              sx={{\n                color: 'tertiary.main',\n                width: '21px',\n                height: '21px',\n              }}\n              wrap={false}\n            />\n          </IconButton>\n        </span>\n      </Tooltip>\n    </ConditionalWrapper>\n  )\n}\n"],"mappings":";;;;;;;;AAmBA,SAAwB,EAAe,GAA4B;CACjE,IAAM,EAAE,gBAAa,GACf,EAAE,uBAAoB,EAAkB,GACxC,EAAE,eAAY,iBAAc,EAAc,CAAQ,GAClD,EAAE,QAAQ,GAAe,WAAW,MACxC,EAAe,GACX,EAAE,QAAQ,GAAkB,WAAW,MAC3C,EAAkB,GAEd,IACJ,KAAa,KAAoB,KAAsB,CAAC,GAEtD,IAAc;CAMlB,OALK,IAEM,MACT,IAAc,2BAFd,IAAc,yCAKd,kBAAC,GAAD;EAAoB,WAAW;EAAW,SAAS;YACjD,kBAAC,GAAD;GAAS,OAAO;GAAa,WAAW;aACtC,kBAAC,QAAD,EAAA,UACE,kBAAC,GAAD;IACE,MAAM;IACN,UAAU;IACV,eAAe;KACb,AAAI,IACF,EAAiB,CAAQ,IAEzB,EAAc,CAAQ;IAE1B;IACA,IAAI,EAAE,SAAS,MAAM;cAErB,kBAAC,GAAD;KACE,MAAM,IAAa,QAAQ;KAC3B,IAAI;MACF,OAAO;MACP,OAAO;MACP,QAAQ;KACV;KACA,MAAM;IACP,CAAA;GACS,CAAA,EACR,CAAA;EACC,CAAA;CACS,CAAA;AAExB"}
+{"version":3,"file":"FavoriteButton.js","names":[],"sources":["../../../src/components/favorites/FavoriteButton.tsx"],"sourcesContent":["import ConditionalWrapper from '@/components/utils/ConditionalWrapper'\nimport {\n  useAddFavorite,\n  useIsFavorite,\n  useRemoveFavorite,\n} from '@/synapse-queries'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { IconButton, Skeleton, Tooltip } from '@mui/material'\nimport IconSvg from '../IconSvg/IconSvg'\n\nexport type FavoriteButtonProps = {\n  /* The entity for which to show a favorite button */\n  entityId: string\n  iconColor?: string\n}\n\n/**\n * Renders a button that indicates if an entity is favorited by the logged-in user. When clicked, the entity is\n * added to/removed from their favorites\n */\nexport default function FavoriteButton(props: FavoriteButtonProps) {\n  const { entityId, iconColor } = props\n  const { isAuthenticated } = useSynapseContext()\n  const { isFavorite, isLoading } = useIsFavorite(entityId)\n  const { mutate: onAddFavorite, isPending: isAddingFavorite } =\n    useAddFavorite()\n  const { mutate: onRemoveFavorite, isPending: isRemovingFavorite } =\n    useRemoveFavorite()\n\n  const disableButton =\n    isLoading || isAddingFavorite || isRemovingFavorite || !isAuthenticated\n\n  let tooltipText = 'Add to Favorites'\n  if (!isAuthenticated) {\n    tooltipText = 'Sign in to add this to your favorites'\n  } else if (isFavorite) {\n    tooltipText = 'Remove from Favorites'\n  }\n  return (\n    <ConditionalWrapper condition={isLoading} wrapper={Skeleton}>\n      <Tooltip title={tooltipText} placement={'top'}>\n        <span>\n          <IconButton\n            size={'small'}\n            disabled={disableButton}\n            onClick={() => {\n              if (isFavorite) {\n                onRemoveFavorite(entityId)\n              } else {\n                onAddFavorite(entityId)\n              }\n            }}\n            sx={{ padding: '2px' }}\n          >\n            <IconSvg\n              icon={isFavorite ? 'fav' : 'favOutline'}\n              sx={{\n                color: isFavorite\n                  ? 'tertiary.main'\n                  : (iconColor ?? 'tertiary.main'),\n                width: '21px',\n                height: '21px',\n              }}\n              wrap={false}\n            />\n          </IconButton>\n        </span>\n      </Tooltip>\n    </ConditionalWrapper>\n  )\n}\n"],"mappings":";;;;;;;;AAoBA,SAAwB,EAAe,GAA4B;CACjE,IAAM,EAAE,aAAU,iBAAc,GAC1B,EAAE,uBAAoB,EAAkB,GACxC,EAAE,eAAY,iBAAc,EAAc,CAAQ,GAClD,EAAE,QAAQ,GAAe,WAAW,MACxC,EAAe,GACX,EAAE,QAAQ,GAAkB,WAAW,MAC3C,EAAkB,GAEd,IACJ,KAAa,KAAoB,KAAsB,CAAC,GAEtD,IAAc;CAMlB,OALK,IAEM,MACT,IAAc,2BAFd,IAAc,yCAKd,kBAAC,GAAD;EAAoB,WAAW;EAAW,SAAS;YACjD,kBAAC,GAAD;GAAS,OAAO;GAAa,WAAW;aACtC,kBAAC,QAAD,EAAA,UACE,kBAAC,GAAD;IACE,MAAM;IACN,UAAU;IACV,eAAe;KACb,AAAI,IACF,EAAiB,CAAQ,IAEzB,EAAc,CAAQ;IAE1B;IACA,IAAI,EAAE,SAAS,MAAM;cAErB,kBAAC,GAAD;KACE,MAAM,IAAa,QAAQ;KAC3B,IAAI;MACF,OAAO,IACH,kBACC,KAAa;MAClB,OAAO;MACP,QAAQ;KACV;KACA,MAAM;IACP,CAAA;GACS,CAAA,EACR,CAAA;EACC,CAAA;CACS,CAAA;AAExB"}

package/dist/components/menu/ComplexMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComplexMenu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/ComplexMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EACX,OAAO,EAIR,MAAM,eAAe,CAAA;AACtB,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAChE,OAAO,EAAiB,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAGpE,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,GAAG;IACtE,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAA;IACjC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAK7B,WAAW,CAAC,EAAE,sBAAsB,EAAE,CAAA;IAMtC,aAAa,CAAC,EAAE,iBAAiB,EAAE,CAAA;CACpC,CAAA;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAyGlD"}
+{"version":3,"file":"ComplexMenu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/ComplexMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EACX,OAAO,EAIR,MAAM,eAAe,CAAA;AACtB,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAChE,OAAO,EAAiB,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAGpE,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,GAAG;IACtE,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAA;IACjC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAK7B,WAAW,CAAC,EAAE,sBAAsB,EAAE,CAAA;IAMtC,aAAa,CAAC,EAAE,iBAAiB,EAAE,CAAA;CACpC,CAAA;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA2GlD"}

package/dist/components/menu/ComplexMenu.js

@@ -11,7 +11,9 @@ function u(u) {
 			display: "flex",
 			alignItems: "center",
 			gap: "10px",
-			[e.breakpoints.down("sm")]: {
+			flexWrap: "wrap",
+			justifyContent: "flex-end",
+			[e.breakpoints.down("md")]: {
 				flexDirection: "column",
 				paddingTop: "10px"
 			}
@@ -20,7 +22,7 @@ function u(u) {
 			if (n.variant != null) {
 				let t = n.text ?? n.tooltipText;
 				return /* @__PURE__ */ c(r, {
-					sx: (e) => ({ [e.breakpoints.down("sm")]: {
+					sx: (e) => ({ [e.breakpoints.down("md")]: {
 						width: "100%",
 						".MuiButton-root": { width: "100%" }
 					} }),
@@ -69,7 +71,7 @@ function u(u) {
 				icon: n.icon
 			}, n.tooltipText);
 		}), f.map((e, t) => e.items && e.items.length > 0 && /* @__PURE__ */ c(r, {
-			sx: (e) => ({ [e.breakpoints.down("sm")]: {
+			sx: (e) => ({ [e.breakpoints.down("md")]: {
 				width: "100%",
 				".MuiButton-root": { width: "100%" }
 			} }),

package/dist/components/menu/ComplexMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComplexMenu.js","names":[],"sources":["../../../src/components/menu/ComplexMenu.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  ButtonProps,\n  SxProps,\n  Typography,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material'\nimport { DropdownMenu, DropdownMenuProps } from './DropdownMenu'\nimport { IconSvgButton, IconSvgButtonProps } from '../IconSvgButton'\nimport IconSvg from '../IconSvg'\n\nexport type ComplexMenuButtonProps = Omit<IconSvgButtonProps, 'icon'> & {\n  icon?: IconSvgButtonProps['icon']\n  variant?: ButtonProps['variant']\n  text?: string\n  iconSx?: SxProps\n}\n\nexport type ComplexMenuProps = {\n  /*\n   * Configuration for buttons. Each entry corresponds to one button.\n   * See the ComplexMenuButtonProps type for more info.\n   */\n  iconButtons?: ComplexMenuButtonProps[]\n  /*\n   * Configuration for DropdownMenus. Each entry corresponds to one dropdown menu button, which\n   * itself can contain multiple groups of items.\n   * See the DropdownMenuProps type for more info.\n   */\n  dropdownMenus?: DropdownMenuProps[]\n}\n\n/**\n * The ComplexMenu component allows you to create a generic menu with\n * icon buttons and multiple dropdown menus that contain groups of items.\n */\nexport function ComplexMenu(props: ComplexMenuProps) {\n  const { iconButtons = [], dropdownMenus = [] } = props\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'))\n\n  return (\n    <Box\n      sx={theme => ({\n        display: 'flex',\n        alignItems: 'center',\n        gap: '10px',\n        [theme.breakpoints.down('sm')]: {\n          flexDirection: 'column',\n          paddingTop: '10px',\n        },\n      })}\n    >\n      {iconButtons.map(iconButton => {\n        if (iconButton.variant != null) {\n          const label = iconButton.text ?? iconButton.tooltipText\n          return (\n            <Box\n              key={label}\n              sx={theme => ({\n                [theme.breakpoints.down('sm')]: {\n                  width: '100%',\n                  '.MuiButton-root': { width: '100%' },\n                },\n              })}\n            >\n              <Button\n                variant={iconButton.variant}\n                startIcon={\n                  iconButton.icon ? (\n                    <IconSvg\n                      icon={iconButton.icon}\n                      wrap={false}\n                      fontSize={'inherit'}\n                      sx={iconButton.iconSx}\n                    />\n                  ) : undefined\n                }\n                onClick={iconButton.onClick}\n                href={iconButton.href}\n                disabled={iconButton.disabled}\n              >\n                <Typography variant=\"buttonLink\">{label}</Typography>\n              </Button>\n            </Box>\n          )\n        }\n        return isSmallScreen && iconButton.tooltipText ? (\n          <Box\n            sx={{\n              width: '100%',\n              textAlign: 'center',\n            }}\n          >\n            <Button\n              variant=\"text\"\n              startIcon={\n                <IconSvg\n                  key={iconButton.tooltipText}\n                  icon={iconButton.icon!}\n                  wrap={false}\n                  fontSize={'inherit'}\n                />\n              }\n              onClick={iconButton.onClick}\n              sx={{\n                padding: '6px 12px',\n                minWidth: 'unset',\n              }}\n            >\n              <Typography variant=\"buttonLink\">\n                {iconButton.tooltipText}\n              </Typography>\n            </Button>\n          </Box>\n        ) : (\n          <IconSvgButton\n            key={iconButton.tooltipText}\n            {...iconButton}\n            icon={iconButton.icon!}\n          />\n        )\n      })}\n      {dropdownMenus.map(\n        (menuProps, index) =>\n          menuProps.items &&\n          menuProps.items.length > 0 && (\n            <Box\n              sx={theme => ({\n                [theme.breakpoints.down('sm')]: {\n                  width: '100%',\n                  '.MuiButton-root': { width: '100%' },\n                },\n              })}\n            >\n              <DropdownMenu key={index} {...menuProps} />\n            </Box>\n          ),\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAsCA,SAAgB,EAAY,GAAyB;CACnD,IAAM,EAAE,iBAAc,CAAC,GAAG,mBAAgB,CAAC,MAAM,GAE3C,IAAgB,EADR,EACsB,EAAM,YAAY,KAAK,IAAI,CAAC;CAEhE,OACE,kBAAC,GAAD;EACE,KAAI,OAAU;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;IACJ,EAAM,YAAY,KAAK,IAAI,IAAI;IAC9B,eAAe;IACf,YAAY;GACd;EACF;YATF,CAWG,EAAY,KAAI,MAAc;GAC7B,IAAI,EAAW,WAAW,MAAM;IAC9B,IAAM,IAAQ,EAAW,QAAQ,EAAW;IAC5C,OACE,kBAAC,GAAD;KAEE,KAAI,OAAU,GACX,EAAM,YAAY,KAAK,IAAI,IAAI;MAC9B,OAAO;MACP,mBAAmB,EAAE,OAAO,OAAO;KACrC,EACF;eAEA,kBAAC,GAAD;MACE,SAAS,EAAW;MACpB,WACE,EAAW,OACT,kBAAC,GAAD;OACE,MAAM,EAAW;OACjB,MAAM;OACN,UAAU;OACV,IAAI,EAAW;MAChB,CAAA,IACC,KAAA;MAEN,SAAS,EAAW;MACpB,MAAM,EAAW;MACjB,UAAU,EAAW;gBAErB,kBAAC,GAAD;OAAY,SAAQ;iBAAc;MAAkB,CAAA;KAC9C,CAAA;IACL,GA1BE,CA0BF;GAET;GACA,OAAO,KAAiB,EAAW,cACjC,kBAAC,GAAD;IACE,IAAI;KACF,OAAO;KACP,WAAW;IACb;cAEA,kBAAC,GAAD;KACE,SAAQ;KACR,WACE,kBAAC,GAAD;MAEE,MAAM,EAAW;MACjB,MAAM;MACN,UAAU;KACX,GAJM,EAAW,WAIjB;KAEH,SAAS,EAAW;KACpB,IAAI;MACF,SAAS;MACT,UAAU;KACZ;eAEA,kBAAC,GAAD;MAAY,SAAQ;gBACjB,EAAW;KACF,CAAA;IACN,CAAA;GACL,CAAA,IAEL,kBAAC,GAAD;IAEE,GAAI;IACJ,MAAM,EAAW;GAClB,GAHM,EAAW,WAGjB;EAEL,CAAC,GACA,EAAc,KACZ,GAAW,MACV,EAAU,SACV,EAAU,MAAM,SAAS,KACvB,kBAAC,GAAD;GACE,KAAI,OAAU,GACX,EAAM,YAAY,KAAK,IAAI,IAAI;IAC9B,OAAO;IACP,mBAAmB,EAAE,OAAO,OAAO;GACrC,EACF;aAEA,kBAAC,GAAD,EAA0B,GAAI,EAAY,GAAvB,CAAuB;EACvC,CAAA,CAEX,CACG;;AAET"}
+{"version":3,"file":"ComplexMenu.js","names":[],"sources":["../../../src/components/menu/ComplexMenu.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  ButtonProps,\n  SxProps,\n  Typography,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material'\nimport { DropdownMenu, DropdownMenuProps } from './DropdownMenu'\nimport { IconSvgButton, IconSvgButtonProps } from '../IconSvgButton'\nimport IconSvg from '../IconSvg'\n\nexport type ComplexMenuButtonProps = Omit<IconSvgButtonProps, 'icon'> & {\n  icon?: IconSvgButtonProps['icon']\n  variant?: ButtonProps['variant']\n  text?: string\n  iconSx?: SxProps\n}\n\nexport type ComplexMenuProps = {\n  /*\n   * Configuration for buttons. Each entry corresponds to one button.\n   * See the ComplexMenuButtonProps type for more info.\n   */\n  iconButtons?: ComplexMenuButtonProps[]\n  /*\n   * Configuration for DropdownMenus. Each entry corresponds to one dropdown menu button, which\n   * itself can contain multiple groups of items.\n   * See the DropdownMenuProps type for more info.\n   */\n  dropdownMenus?: DropdownMenuProps[]\n}\n\n/**\n * The ComplexMenu component allows you to create a generic menu with\n * icon buttons and multiple dropdown menus that contain groups of items.\n */\nexport function ComplexMenu(props: ComplexMenuProps) {\n  const { iconButtons = [], dropdownMenus = [] } = props\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'))\n\n  return (\n    <Box\n      sx={theme => ({\n        display: 'flex',\n        alignItems: 'center',\n        gap: '10px',\n        flexWrap: 'wrap',\n        justifyContent: 'flex-end',\n        [theme.breakpoints.down('md')]: {\n          flexDirection: 'column',\n          paddingTop: '10px',\n        },\n      })}\n    >\n      {iconButtons.map(iconButton => {\n        if (iconButton.variant != null) {\n          const label = iconButton.text ?? iconButton.tooltipText\n          return (\n            <Box\n              key={label}\n              sx={theme => ({\n                [theme.breakpoints.down('md')]: {\n                  width: '100%',\n                  '.MuiButton-root': { width: '100%' },\n                },\n              })}\n            >\n              <Button\n                variant={iconButton.variant}\n                startIcon={\n                  iconButton.icon ? (\n                    <IconSvg\n                      icon={iconButton.icon}\n                      wrap={false}\n                      fontSize={'inherit'}\n                      sx={iconButton.iconSx}\n                    />\n                  ) : undefined\n                }\n                onClick={iconButton.onClick}\n                href={iconButton.href}\n                disabled={iconButton.disabled}\n              >\n                <Typography variant=\"buttonLink\">{label}</Typography>\n              </Button>\n            </Box>\n          )\n        }\n        return isSmallScreen && iconButton.tooltipText ? (\n          <Box\n            sx={{\n              width: '100%',\n              textAlign: 'center',\n            }}\n          >\n            <Button\n              variant=\"text\"\n              startIcon={\n                <IconSvg\n                  key={iconButton.tooltipText}\n                  icon={iconButton.icon!}\n                  wrap={false}\n                  fontSize={'inherit'}\n                />\n              }\n              onClick={iconButton.onClick}\n              sx={{\n                padding: '6px 12px',\n                minWidth: 'unset',\n              }}\n            >\n              <Typography variant=\"buttonLink\">\n                {iconButton.tooltipText}\n              </Typography>\n            </Button>\n          </Box>\n        ) : (\n          <IconSvgButton\n            key={iconButton.tooltipText}\n            {...iconButton}\n            icon={iconButton.icon!}\n          />\n        )\n      })}\n      {dropdownMenus.map(\n        (menuProps, index) =>\n          menuProps.items &&\n          menuProps.items.length > 0 && (\n            <Box\n              sx={theme => ({\n                [theme.breakpoints.down('md')]: {\n                  width: '100%',\n                  '.MuiButton-root': { width: '100%' },\n                },\n              })}\n            >\n              <DropdownMenu key={index} {...menuProps} />\n            </Box>\n          ),\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAsCA,SAAgB,EAAY,GAAyB;CACnD,IAAM,EAAE,iBAAc,CAAC,GAAG,mBAAgB,CAAC,MAAM,GAE3C,IAAgB,EADR,EACsB,EAAM,YAAY,KAAK,IAAI,CAAC;CAEhE,OACE,kBAAC,GAAD;EACE,KAAI,OAAU;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;GACL,UAAU;GACV,gBAAgB;IACf,EAAM,YAAY,KAAK,IAAI,IAAI;IAC9B,eAAe;IACf,YAAY;GACd;EACF;YAXF,CAaG,EAAY,KAAI,MAAc;GAC7B,IAAI,EAAW,WAAW,MAAM;IAC9B,IAAM,IAAQ,EAAW,QAAQ,EAAW;IAC5C,OACE,kBAAC,GAAD;KAEE,KAAI,OAAU,GACX,EAAM,YAAY,KAAK,IAAI,IAAI;MAC9B,OAAO;MACP,mBAAmB,EAAE,OAAO,OAAO;KACrC,EACF;eAEA,kBAAC,GAAD;MACE,SAAS,EAAW;MACpB,WACE,EAAW,OACT,kBAAC,GAAD;OACE,MAAM,EAAW;OACjB,MAAM;OACN,UAAU;OACV,IAAI,EAAW;MAChB,CAAA,IACC,KAAA;MAEN,SAAS,EAAW;MACpB,MAAM,EAAW;MACjB,UAAU,EAAW;gBAErB,kBAAC,GAAD;OAAY,SAAQ;iBAAc;MAAkB,CAAA;KAC9C,CAAA;IACL,GA1BE,CA0BF;GAET;GACA,OAAO,KAAiB,EAAW,cACjC,kBAAC,GAAD;IACE,IAAI;KACF,OAAO;KACP,WAAW;IACb;cAEA,kBAAC,GAAD;KACE,SAAQ;KACR,WACE,kBAAC,GAAD;MAEE,MAAM,EAAW;MACjB,MAAM;MACN,UAAU;KACX,GAJM,EAAW,WAIjB;KAEH,SAAS,EAAW;KACpB,IAAI;MACF,SAAS;MACT,UAAU;KACZ;eAEA,kBAAC,GAAD;MAAY,SAAQ;gBACjB,EAAW;KACF,CAAA;IACN,CAAA;GACL,CAAA,IAEL,kBAAC,GAAD;IAEE,GAAI;IACJ,MAAM,EAAW;GAClB,GAHM,EAAW,WAGjB;EAEL,CAAC,GACA,EAAc,KACZ,GAAW,MACV,EAAU,SACV,EAAU,MAAM,SAAS,KACvB,kBAAC,GAAD;GACE,KAAI,OAAU,GACX,EAAM,YAAY,KAAK,IAAI,IAAI;IAC9B,OAAO;IACP,mBAAmB,EAAE,OAAO,OAAO;GACrC,EACF;aAEA,kBAAC,GAAD,EAA0B,GAAI,EAAY,GAAvB,CAAuB;EACvC,CAAA,CAEX,CACG;;AAET"}

package/dist/components/menu/DropdownMenu.d.ts

@@ -19,6 +19,7 @@ export type DropdownMenuProps = {
     dropdownButtonText: string;
     buttonTooltip?: string;
     buttonProps?: ButtonProps;
+    variant?: ButtonProps['variant'];
     convertSingleItemToButton?: boolean;
     renderMenuIfNoItems?: boolean;
 };

package/dist/components/menu/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EAUX,OAAO,EAGR,MAAM,eAAe,CAAA;AACtB,OAAO,EAEL,UAAU,EAKX,MAAM,OAAO,CAAA;AACd,OAAgB,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAEtD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAE7B,IAAI,EAAE,MAAM,CAAA;IAEZ,IAAI,CAAC,EAAE,QAAQ,CAAA;IAEf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IAEjC,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAE9B,KAAK,EAAE,gBAAgB,EAAE,EAAE,CAAA;IAE3B,kBAAkB,EAAE,MAAM,CAAA;IAE1B,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB,WAAW,CAAC,EAAE,WAAW,CAAA;IAEzB,yBAAyB,CAAC,EAAE,OAAO,CAAA;IAEnC,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAA;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kDA2MpD"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EAUX,OAAO,EAGR,MAAM,eAAe,CAAA;AACtB,OAAO,EAEL,UAAU,EAKX,MAAM,OAAO,CAAA;AACd,OAAgB,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAEtD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAE7B,IAAI,EAAE,MAAM,CAAA;IAEZ,IAAI,CAAC,EAAE,QAAQ,CAAA;IAEf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IAEjC,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAE9B,KAAK,EAAE,gBAAgB,EAAE,EAAE,CAAA;IAE3B,kBAAkB,EAAE,MAAM,CAAA;IAE1B,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB,WAAW,CAAC,EAAE,WAAW,CAAA;IAEzB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAEhC,yBAAyB,CAAC,EAAE,OAAO,CAAA;IAEnC,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAA;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kDA4MpD"}

package/dist/components/menu/DropdownMenu.js

@@ -4,14 +4,14 @@ import { Button as i, ClickAwayListener as a, Divider as o, Fade as s, ListItemI
 import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/menu/DropdownMenu.tsx
 function y(y) {
-	let { buttonTooltip: b, dropdownButtonText: x, items: S = [], convertSingleItemToButton: C = !0, renderMenuIfNoItems: w = !1, buttonProps: T = {} } = y, E = t(), [D, O] = r(!1), k = n(null), A = S.flat().length;
-	if (!w && A === 0) return null;
-	if (C && A === 1) {
+	let { buttonTooltip: b, dropdownButtonText: x, items: S = [], convertSingleItemToButton: C = !0, renderMenuIfNoItems: w = !1, buttonProps: T = {}, variant: E = "outlined" } = y, D = t(), [O, k] = r(!1), A = n(null), j = S.flat().length;
+	if (!w && j === 0) return null;
+	if (C && j === 1) {
 		let t = S.flat()[0];
 		return /* @__PURE__ */ _(i, {
 			component: "href" in t ? "a" : "button",
 			title: t.tooltipText,
-			variant: "outlined",
+			variant: E,
 			href: "href" in t ? t.href : void 0,
 			rel: "href" in t ? "noopener noreferrer" : void 0,
 			onClick: "onClick" in t ? t.onClick : void 0,
@@ -26,13 +26,13 @@ function y(y) {
 			})
 		});
 	}
-	let j = () => {
-		O((e) => !e);
-	}, M = (e) => {
-		k.current && k.current.contains(e.target) || O(!1);
+	let M = () => {
+		k((e) => !e);
+	}, N = (e) => {
+		A.current && A.current.contains(e.target) || k(!1);
 	};
-	function N(e) {
-		e.key === "Tab" ? (e.preventDefault(), O(!1)) : e.key === "Escape" && O(!1);
+	function P(e) {
+		e.key === "Tab" ? (e.preventDefault(), k(!1)) : e.key === "Escape" && k(!1);
 	}
 	return /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(m, {
 		title: b ? /* @__PURE__ */ _("div", {
@@ -41,13 +41,13 @@ function y(y) {
 		}) : void 0,
 		placement: "top",
 		children: /* @__PURE__ */ _("span", { children: /* @__PURE__ */ _(i, {
-			variant: "outlined",
-			ref: k,
-			id: `composition-button-${E}`,
-			"aria-controls": D ? `composition-menu-${E}` : void 0,
-			"aria-expanded": D ? "true" : void 0,
+			variant: E,
+			ref: A,
+			id: `composition-button-${D}`,
+			"aria-controls": O ? `composition-menu-${D}` : void 0,
+			"aria-expanded": O ? "true" : void 0,
 			"aria-haspopup": "true",
-			onClick: j,
+			onClick: M,
 			...T,
 			children: /* @__PURE__ */ _(h, {
 				variant: "buttonLink",
@@ -55,8 +55,8 @@ function y(y) {
 			})
 		}) })
 	}), /* @__PURE__ */ _(p, {
-		open: D,
-		anchorEl: k.current,
+		open: O,
+		anchorEl: A.current,
 		role: void 0,
 		placement: "bottom-end",
 		transition: !0,
@@ -64,12 +64,12 @@ function y(y) {
 		children: ({ TransitionProps: t }) => /* @__PURE__ */ _(s, {
 			...t,
 			children: /* @__PURE__ */ _(f, { children: /* @__PURE__ */ _(a, {
-				onClickAway: M,
+				onClickAway: N,
 				children: /* @__PURE__ */ _(d, {
-					autoFocusItem: D,
-					id: `composition-menu-${E}`,
-					"aria-labelledby": `composition-button-${E}`,
-					onKeyDown: N,
+					autoFocusItem: O,
+					id: `composition-menu-${D}`,
+					"aria-labelledby": `composition-button-${D}`,
+					onKeyDown: P,
 					children: S.map((t, n, r) => [t.map((t) => /* @__PURE__ */ _(m, {
 						title: t.tooltipText,
 						placement: "left",
@@ -87,7 +87,7 @@ function y(y) {
 							rel: "href" in t ? "noopener noreferrer" : void 0,
 							style: { pointerEvents: "auto" },
 							onClick: (e) => {
-								!t.disabled && "onClick" in t && t.onClick && (O(!1), t.onClick(e));
+								!t.disabled && "onClick" in t && t.onClick && (k(!1), t.onClick(e));
 							},
 							children: [/* @__PURE__ */ _(c, {
 								style: { minWidth: "30px" },

package/dist/components/menu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../../src/components/menu/DropdownMenu.tsx"],"sourcesContent":["import {\n  Button,\n  ButtonProps,\n  ClickAwayListener,\n  Divider,\n  Fade,\n  ListItemIcon,\n  ListItemText,\n  MenuItem,\n  MenuList,\n  Paper,\n  Popper,\n  SxProps,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport {\n  KeyboardEvent,\n  MouseEvent,\n  SyntheticEvent,\n  useId,\n  useRef,\n  useState,\n} from 'react'\nimport IconSvg, { IconName } from '../IconSvg/IconSvg'\n\n/**\n * Defines a configuration for a particular dropdown menu item\n */\nexport type DropdownMenuItem = {\n  /* The text to show on the menu item. */\n  text: string\n  /* The icon to show for this item in the menu. */\n  icon?: IconName\n  /* A function invoked upon clicking the item, assuming `disabled` is falsy */\n  onClick?: (e: MouseEvent) => void\n  /* A link that the item should point to. */\n  href?: string\n  /* The optional tooltipText to show for this item. Compatible with the `disabled` prop. */\n  tooltipText?: string\n  /* Whether the item should be disabled from selection. */\n  disabled?: boolean\n  /* Additional MUI SxProps to pass to the text component */\n  textSx?: SxProps\n  /* Additional MUI SxProps to pass to the icon component */\n  iconSx?: SxProps\n}\n\nexport type DropdownMenuProps = {\n  /* Groups of menu items. Each group will be split with a divider. See DropdownMenuItem for per-item configuration */\n  items: DropdownMenuItem[][]\n  /* The text to show on the dropdown menu button. */\n  dropdownButtonText: string\n  /* The optional tooltip text for the dropdown menu button. */\n  buttonTooltip?: string\n  /* Any additional props to pass to the dropdown menu button. */\n  buttonProps?: ButtonProps\n  /* If true, will render a single action as a standalone button. Default true. */\n  convertSingleItemToButton?: boolean\n  /* If true, nothing will be rendered if no actions are passed. Default false. */\n  renderMenuIfNoItems?: boolean\n}\n\n/**\n * The DropdownMenu component provides a generic way to compose a MUI dropdown menu.\n */\nexport function DropdownMenu(props: DropdownMenuProps) {\n  const {\n    buttonTooltip,\n    dropdownButtonText,\n    items = [] as DropdownMenuItem[][],\n    convertSingleItemToButton = true,\n    renderMenuIfNoItems = false,\n    buttonProps = {},\n  } = props\n\n  const dropdownMenuId = useId()\n  const [open, setOpen] = useState(false)\n  const anchorRef = useRef<HTMLButtonElement>(null)\n\n  const numberOfMenuItems = items.flat().length\n\n  if (!renderMenuIfNoItems && numberOfMenuItems === 0) {\n    // Hide menu if no actions will be in the menu\n    return null\n  }\n\n  if (convertSingleItemToButton && numberOfMenuItems === 1) {\n    // If one action is in the menu, show it as a button\n    const menuItem = items.flat()[0]\n    return (\n      <Button\n        component={'href' in menuItem ? 'a' : 'button'}\n        title={menuItem.tooltipText}\n        variant=\"outlined\"\n        href={'href' in menuItem ? menuItem.href : undefined}\n        rel={'href' in menuItem ? 'noopener noreferrer' : undefined}\n        onClick={'onClick' in menuItem ? menuItem.onClick : undefined}\n        disabled={menuItem.disabled}\n        endIcon={menuItem.icon && <IconSvg icon={menuItem.icon} wrap={false} />}\n      >\n        <Typography variant={'buttonLink'}>{menuItem.text}</Typography>\n      </Button>\n    )\n  }\n\n  const handleToggle = () => {\n    setOpen(prevOpen => !prevOpen)\n  }\n\n  const handleClose = (event: Event | SyntheticEvent) => {\n    if (\n      anchorRef.current &&\n      anchorRef.current.contains(event.target as HTMLElement)\n    ) {\n      return\n    }\n\n    setOpen(false)\n  }\n\n  function handleListKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Tab') {\n      event.preventDefault()\n      setOpen(false)\n    } else if (event.key === 'Escape') {\n      setOpen(false)\n    }\n  }\n\n  return (\n    <>\n      <Tooltip\n        title={\n          buttonTooltip ? (\n            <div style={{ whiteSpace: 'pre-line' }}>{buttonTooltip}</div>\n          ) : undefined\n        }\n        placement={'top'}\n      >\n        <span>\n          <Button\n            variant=\"outlined\"\n            ref={anchorRef}\n            id={`composition-button-${dropdownMenuId}`}\n            aria-controls={\n              open ? `composition-menu-${dropdownMenuId}` : undefined\n            }\n            aria-expanded={open ? 'true' : undefined}\n            aria-haspopup=\"true\"\n            onClick={handleToggle}\n            {...buttonProps}\n          >\n            <Typography variant={'buttonLink'}>{dropdownButtonText}</Typography>\n          </Button>\n        </span>\n      </Tooltip>\n      <Popper\n        open={open}\n        anchorEl={anchorRef.current}\n        role={undefined}\n        placement=\"bottom-end\"\n        transition\n        style={{\n          // Fixes issue where react-flow (provenance) would appear above the menu\n          zIndex: 10,\n        }}\n      >\n        {({ TransitionProps }) => (\n          <Fade {...TransitionProps}>\n            <Paper>\n              <ClickAwayListener onClickAway={handleClose}>\n                <MenuList\n                  autoFocusItem={open}\n                  id={`composition-menu-${dropdownMenuId}`}\n                  aria-labelledby={`composition-button-${dropdownMenuId}`}\n                  onKeyDown={handleListKeyDown}\n                >\n                  {items.map((itemGroup, index, array) => {\n                    return [\n                      itemGroup.map(item => {\n                        return (\n                          <Tooltip\n                            key={item.text}\n                            title={item.tooltipText}\n                            placement={'left'}\n                          >\n                            <MenuItem\n                              // Always make the component an anchor in case href is defined.\n                              component=\"a\"\n                              sx={{\n                                // Override the anchor-specific state styles, we don't want it to look like an anchor\n                                '&:hover': {\n                                  color: 'unset',\n                                },\n                                '&:focus': {\n                                  color: 'unset',\n                                  textDecoration: 'unset',\n                                },\n                              }}\n                              disabled={item.disabled}\n                              href={'href' in item ? item.href : undefined}\n                              rel={\n                                'href' in item\n                                  ? 'noopener noreferrer'\n                                  : undefined\n                              }\n                              // Allow pointer events on disabled item so tooltip works.\n                              style={{ pointerEvents: 'auto' }}\n                              onClick={(e: MouseEvent) => {\n                                /*\n                                 * Must check if the item is disabled because we set\n                                 * `pointer-events: 'auto'`\n                                 */\n                                if (\n                                  !item.disabled &&\n                                  'onClick' in item &&\n                                  item.onClick\n                                ) {\n                                  setOpen(false)\n                                  item.onClick(e)\n                                }\n                              }}\n                            >\n                              <ListItemIcon\n                                style={{\n                                  // MUI has specified a more specific minWidth for ListItemIcon inside a MenuList than\n                                  // we can create with sx, so apply an inline style for this property only.\n                                  minWidth: '30px',\n                                }}\n                              >\n                                {item.icon && (\n                                  <IconSvg\n                                    icon={item.icon}\n                                    sx={{\n                                      width: '17px',\n                                      height: '17px',\n                                      ...item.iconSx,\n                                    }}\n                                    wrap={false}\n                                  />\n                                )}\n                              </ListItemIcon>\n                              <ListItemText\n                                sx={{ marginTop: 0 }}\n                                slotProps={{\n                                  primary: {\n                                    variant: 'smallText1',\n                                    sx: item.textSx,\n                                  },\n                                }}\n                              >\n                                {item.text}\n                              </ListItemText>\n                            </MenuItem>\n                          </Tooltip>\n                        )\n                      }),\n                      index < array.length - 1 && <Divider />,\n                    ]\n                  })}\n                </MenuList>\n              </ClickAwayListener>\n            </Paper>\n          </Fade>\n        )}\n      </Popper>\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../../src/components/menu/DropdownMenu.tsx"],"sourcesContent":["import {\n  Button,\n  ButtonProps,\n  ClickAwayListener,\n  Divider,\n  Fade,\n  ListItemIcon,\n  ListItemText,\n  MenuItem,\n  MenuList,\n  Paper,\n  Popper,\n  SxProps,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport {\n  KeyboardEvent,\n  MouseEvent,\n  SyntheticEvent,\n  useId,\n  useRef,\n  useState,\n} from 'react'\nimport IconSvg, { IconName } from '../IconSvg/IconSvg'\n\n/**\n * Defines a configuration for a particular dropdown menu item\n */\nexport type DropdownMenuItem = {\n  /* The text to show on the menu item. */\n  text: string\n  /* The icon to show for this item in the menu. */\n  icon?: IconName\n  /* A function invoked upon clicking the item, assuming `disabled` is falsy */\n  onClick?: (e: MouseEvent) => void\n  /* A link that the item should point to. */\n  href?: string\n  /* The optional tooltipText to show for this item. Compatible with the `disabled` prop. */\n  tooltipText?: string\n  /* Whether the item should be disabled from selection. */\n  disabled?: boolean\n  /* Additional MUI SxProps to pass to the text component */\n  textSx?: SxProps\n  /* Additional MUI SxProps to pass to the icon component */\n  iconSx?: SxProps\n}\n\nexport type DropdownMenuProps = {\n  /* Groups of menu items. Each group will be split with a divider. See DropdownMenuItem for per-item configuration */\n  items: DropdownMenuItem[][]\n  /* The text to show on the dropdown menu button. */\n  dropdownButtonText: string\n  /* The optional tooltip text for the dropdown menu button. */\n  buttonTooltip?: string\n  /* Any additional props to pass to the dropdown menu button. */\n  buttonProps?: ButtonProps\n  /* Optional MUI button variant for the dropdown button (and the single-item button). Default 'outlined'. */\n  variant?: ButtonProps['variant']\n  /* If true, will render a single action as a standalone button. Default true. */\n  convertSingleItemToButton?: boolean\n  /* If true, nothing will be rendered if no actions are passed. Default false. */\n  renderMenuIfNoItems?: boolean\n}\n\n/**\n * The DropdownMenu component provides a generic way to compose a MUI dropdown menu.\n */\nexport function DropdownMenu(props: DropdownMenuProps) {\n  const {\n    buttonTooltip,\n    dropdownButtonText,\n    items = [] as DropdownMenuItem[][],\n    convertSingleItemToButton = true,\n    renderMenuIfNoItems = false,\n    buttonProps = {},\n    variant = 'outlined',\n  } = props\n\n  const dropdownMenuId = useId()\n  const [open, setOpen] = useState(false)\n  const anchorRef = useRef<HTMLButtonElement>(null)\n\n  const numberOfMenuItems = items.flat().length\n\n  if (!renderMenuIfNoItems && numberOfMenuItems === 0) {\n    // Hide menu if no actions will be in the menu\n    return null\n  }\n\n  if (convertSingleItemToButton && numberOfMenuItems === 1) {\n    // If one action is in the menu, show it as a button\n    const menuItem = items.flat()[0]\n    return (\n      <Button\n        component={'href' in menuItem ? 'a' : 'button'}\n        title={menuItem.tooltipText}\n        variant={variant}\n        href={'href' in menuItem ? menuItem.href : undefined}\n        rel={'href' in menuItem ? 'noopener noreferrer' : undefined}\n        onClick={'onClick' in menuItem ? menuItem.onClick : undefined}\n        disabled={menuItem.disabled}\n        endIcon={menuItem.icon && <IconSvg icon={menuItem.icon} wrap={false} />}\n      >\n        <Typography variant={'buttonLink'}>{menuItem.text}</Typography>\n      </Button>\n    )\n  }\n\n  const handleToggle = () => {\n    setOpen(prevOpen => !prevOpen)\n  }\n\n  const handleClose = (event: Event | SyntheticEvent) => {\n    if (\n      anchorRef.current &&\n      anchorRef.current.contains(event.target as HTMLElement)\n    ) {\n      return\n    }\n\n    setOpen(false)\n  }\n\n  function handleListKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Tab') {\n      event.preventDefault()\n      setOpen(false)\n    } else if (event.key === 'Escape') {\n      setOpen(false)\n    }\n  }\n\n  return (\n    <>\n      <Tooltip\n        title={\n          buttonTooltip ? (\n            <div style={{ whiteSpace: 'pre-line' }}>{buttonTooltip}</div>\n          ) : undefined\n        }\n        placement={'top'}\n      >\n        <span>\n          <Button\n            variant={variant}\n            ref={anchorRef}\n            id={`composition-button-${dropdownMenuId}`}\n            aria-controls={\n              open ? `composition-menu-${dropdownMenuId}` : undefined\n            }\n            aria-expanded={open ? 'true' : undefined}\n            aria-haspopup=\"true\"\n            onClick={handleToggle}\n            {...buttonProps}\n          >\n            <Typography variant={'buttonLink'}>{dropdownButtonText}</Typography>\n          </Button>\n        </span>\n      </Tooltip>\n      <Popper\n        open={open}\n        anchorEl={anchorRef.current}\n        role={undefined}\n        placement=\"bottom-end\"\n        transition\n        style={{\n          // Fixes issue where react-flow (provenance) would appear above the menu\n          zIndex: 10,\n        }}\n      >\n        {({ TransitionProps }) => (\n          <Fade {...TransitionProps}>\n            <Paper>\n              <ClickAwayListener onClickAway={handleClose}>\n                <MenuList\n                  autoFocusItem={open}\n                  id={`composition-menu-${dropdownMenuId}`}\n                  aria-labelledby={`composition-button-${dropdownMenuId}`}\n                  onKeyDown={handleListKeyDown}\n                >\n                  {items.map((itemGroup, index, array) => {\n                    return [\n                      itemGroup.map(item => {\n                        return (\n                          <Tooltip\n                            key={item.text}\n                            title={item.tooltipText}\n                            placement={'left'}\n                          >\n                            <MenuItem\n                              // Always make the component an anchor in case href is defined.\n                              component=\"a\"\n                              sx={{\n                                // Override the anchor-specific state styles, we don't want it to look like an anchor\n                                '&:hover': {\n                                  color: 'unset',\n                                },\n                                '&:focus': {\n                                  color: 'unset',\n                                  textDecoration: 'unset',\n                                },\n                              }}\n                              disabled={item.disabled}\n                              href={'href' in item ? item.href : undefined}\n                              rel={\n                                'href' in item\n                                  ? 'noopener noreferrer'\n                                  : undefined\n                              }\n                              // Allow pointer events on disabled item so tooltip works.\n                              style={{ pointerEvents: 'auto' }}\n                              onClick={(e: MouseEvent) => {\n                                /*\n                                 * Must check if the item is disabled because we set\n                                 * `pointer-events: 'auto'`\n                                 */\n                                if (\n                                  !item.disabled &&\n                                  'onClick' in item &&\n                                  item.onClick\n                                ) {\n                                  setOpen(false)\n                                  item.onClick(e)\n                                }\n                              }}\n                            >\n                              <ListItemIcon\n                                style={{\n                                  // MUI has specified a more specific minWidth for ListItemIcon inside a MenuList than\n                                  // we can create with sx, so apply an inline style for this property only.\n                                  minWidth: '30px',\n                                }}\n                              >\n                                {item.icon && (\n                                  <IconSvg\n                                    icon={item.icon}\n                                    sx={{\n                                      width: '17px',\n                                      height: '17px',\n                                      ...item.iconSx,\n                                    }}\n                                    wrap={false}\n                                  />\n                                )}\n                              </ListItemIcon>\n                              <ListItemText\n                                sx={{ marginTop: 0 }}\n                                slotProps={{\n                                  primary: {\n                                    variant: 'smallText1',\n                                    sx: item.textSx,\n                                  },\n                                }}\n                              >\n                                {item.text}\n                              </ListItemText>\n                            </MenuItem>\n                          </Tooltip>\n                        )\n                      }),\n                      index < array.length - 1 && <Divider />,\n                    ]\n                  })}\n                </MenuList>\n              </ClickAwayListener>\n            </Paper>\n          </Fade>\n        )}\n      </Popper>\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/components/widgets/facet-nav/FacetNavPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetNavPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetNavPanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,2BAA2B,EAC3B,uBAAuB,EACxB,MAAM,iCAAiC,CAAA;AAExC,OAAO,KAAK,MAAM,MAAM,sBAAsB,CAAA;AAW9C,OAAO,EAAE,cAAc,EAAY,MAAM,wBAAwB,CAAA;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,wBAAwB,EAAE,CACxB,KAAK,EAAE,uBAAuB,EAC9B,KAAK,EAAE,2BAA2B,GAAG,SAAS,EAC9C,UAAU,EAAE,OAAO,KAChB,IAAI,CAAA;IACT,yBAAyB,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAA;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,uBAAuB,CAAA;IACpC,QAAQ,EAAE,QAAQ,CAAA;IAClB,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC3C,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAKD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,wBAAwB,CAAA;AAgB/D,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,CAAA;IACnB,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAED,wBAAsB,oBAAoB,CACxC,WAAW,EAAE,uBAAuB,EACpC,UAAU,EAAE,cAAc,GAAG,SAAS,EACtC,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,CAAC,EAAE,MAAM;;;;;;;;;GA+JrB;AAsBD,wBAAgB,YAAY,CAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACtC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,MAAM,GAChB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CA8BnC;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAgL/C;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"FacetNavPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetNavPanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,2BAA2B,EAC3B,uBAAuB,EACxB,MAAM,iCAAiC,CAAA;AAExC,OAAO,KAAK,MAAM,MAAM,sBAAsB,CAAA;AAW9C,OAAO,EAAE,cAAc,EAAY,MAAM,wBAAwB,CAAA;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,wBAAwB,EAAE,CACxB,KAAK,EAAE,uBAAuB,EAC9B,KAAK,EAAE,2BAA2B,GAAG,SAAS,EAC9C,UAAU,EAAE,OAAO,KAChB,IAAI,CAAA;IACT,yBAAyB,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAA;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,uBAAuB,CAAA;IACpC,QAAQ,EAAE,QAAQ,CAAA;IAClB,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC3C,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAKD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,wBAAwB,CAAA;AAE/D,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,CAAA;IACnB,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAED,wBAAsB,oBAAoB,CACxC,WAAW,EAAE,uBAAuB,EACpC,UAAU,EAAE,cAAc,GAAG,SAAS,EACtC,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,CAAC,EAAE,MAAM;;;;;;;;;GA+JrB;AAsBD,wBAAgB,YAAY,CAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACtC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,MAAM,GAChB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CA8BnC;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAoN/C;AAED,eAAe,aAAa,CAAA"}

package/dist/components/widgets/facet-nav/FacetNavPanel.js

@@ -23,26 +23,8 @@ import { useQuery as k } from "@tanstack/react-query";
 import { InfoOutlined as A } from "@mui/icons-material";
 import { useMeasure as j } from "@react-hookz/web";
 //#region src/components/widgets/facet-nav/FacetNavPanel.tsx
-var M = 19, N = {
-	showlegend: !1,
-	annotations: [],
-	margin: {
-		l: 0,
-		r: 0,
-		b: 0,
-		t: 0,
-		pad: 0
-	},
-	yaxis: {
-		visible: !1,
-		showgrid: !1
-	},
-	xaxis: {
-		visible: !1,
-		showgrid: !1
-	}
-};
-async function P(r, i, a, o, s) {
+var M = 19;
+async function N(r, i, a, o, s) {
 	let c = f("odd", 0, r.facetValues.length), l = async (r, i, a) => {
 		let o = /* @__PURE__ */ new Map();
 		o.set(t, e);
@@ -95,13 +77,13 @@ async function P(r, i, a, o, s) {
 		colors: o === "PIE" ? b.marker?.colors : b.marker?.color
 	};
 }
-var F = (e, t, n) => {
+var P = (e, t, n) => {
 	if (e.points && e.points[0]) {
 		let r = e.points[0], i = r.data.facetEnumerationValues[r.pointNumber], a = t.facetValues.find((e) => e.value === i);
 		n(t, a, !a.isSelected);
 	}
 };
-function I(e, t, n) {
+function F(e, t, n) {
 	if (e != null) {
 		let r = 1;
 		switch (t) {
@@ -126,17 +108,37 @@ function I(e, t, n) {
 		height: `${n}px`
 	};
 }
-function L(e) {
-	let { onHide: t, isModalView: n, applyChangesToGraphSlice: f, index: h, facetToPlot: O, plotType: M, onSetPlotType: R } = e, { accessToken: z } = r(), { data: B, isLoading: V } = c(), [H, U] = j(), { getColumnDisplayName: W } = l(), [G, K] = v(!1), q = W(O.columnName, O.jsonPath), J = _(() => a(O, B?.columnModels ?? []), [B?.columnModels, O]), Y = J?.columnType, { data: X } = k({
+function I(e) {
+	let { onHide: t, isModalView: n, applyChangesToGraphSlice: f, index: h, facetToPlot: O, plotType: M, onSetPlotType: L } = e, { accessToken: R } = r(), { data: z, isLoading: B } = c(), [V, H] = j(), { getColumnDisplayName: U } = l(), [W, G] = v(!1), K = U(O.columnName, O.jsonPath), q = _(() => a(O, z?.columnModels ?? []), [z?.columnModels, O]), J = q?.columnType, Y = _(() => ({
+		showlegend: !1,
+		annotations: [],
+		margin: {
+			l: 0,
+			r: 0,
+			b: 0,
+			t: 0,
+			pad: 0
+		},
+		yaxis: {
+			visible: M === "BAR",
+			showgrid: !1,
+			automargin: !0
+		},
+		xaxis: {
+			visible: n && M === "BAR",
+			showgrid: !1,
+			automargin: !0
+		}
+	}), [n, M]), { data: X } = k({
 		queryKey: [
 			"extractPlotDataArray",
 			O,
-			Y,
+			J,
 			h,
 			M,
-			z
+			R
 		],
-		queryFn: () => P(O, Y, h, M, z),
+		queryFn: () => N(O, J, h, M, R),
 		enabled: !!O
 	}), Z = g(), Q = g(), $ = /* @__PURE__ */ D(s, {
 		fullWidth: !0,
@@ -148,7 +150,7 @@ function L(e) {
 			label: "Chart Type",
 			value: M,
 			onChange: (e) => {
-				R(e.target.value);
+				L(e.target.value);
 			},
 			children: [/* @__PURE__ */ E(x, {
 				value: "BAR",
@@ -159,32 +161,32 @@ function L(e) {
 			})]
 		})]
 	});
-	return !B && V || !O || !J ? /* @__PURE__ */ E("div", {
+	return !z && B || !O || !q ? /* @__PURE__ */ E("div", {
 		className: "SRC-loadingContainer SRC-centerContentColumn",
 		children: i
 	}) : /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(o, {
-		open: G,
-		onCancel: () => K(!1),
-		title: q ?? "",
-		content: /* @__PURE__ */ E(L, {
+		open: W,
+		onCancel: () => G(!1),
+		title: K ?? "",
+		content: /* @__PURE__ */ E(I, {
 			...e,
 			isModalView: !0
 		}),
 		hasCancelButton: !1,
 		confirmButtonProps: { children: "Apply Filters" },
-		onConfirm: () => K(!1),
+		onConfirm: () => G(!1),
 		maxWidth: "md"
 	}), /* @__PURE__ */ D("div", {
 		role: "figure",
 		className: `FacetNavPanel${n ? "--expanded" : ""}`,
 		children: [
 			!n && /* @__PURE__ */ E(p, {
-				data: B,
-				isLoading: V,
-				title: q,
+				data: z,
+				isLoading: B,
+				title: K,
 				facetToPlot: O,
 				onHide: t,
-				setShowModal: K
+				setShowModal: G
 			}),
 			n && /* @__PURE__ */ D(C, {
 				sx: { gap: 2 },
@@ -210,29 +212,37 @@ function L(e) {
 				sx: {
 					display: "grid",
 					gridTemplateColumns: "50% 50%",
-					alignItems: "center"
+					alignItems: "stretch",
+					height: "100%"
 				},
 				role: "graphics-object",
 				className: "FacetNavPanel__body",
 				children: [/* @__PURE__ */ E("div", {
-					ref: U,
+					ref: H,
+					style: { height: "100%" },
 					children: /* @__PURE__ */ E(d, {
-						layout: N,
+						layout: Y,
 						data: X?.data ?? [],
-						style: I(H?.width, M, n ? 300 : 150),
+						style: {
+							...F(V?.width, M, n ? 300 : 150),
+							...V?.height ? { height: `${V.height}px` } : {}
+						},
 						config: { displayModeBar: !1 },
-						onClick: (e) => F(e, O, f)
-					}, `${O.columnName}-${O.jsonPath}-${M}-${H?.width}`)
-				}), /* @__PURE__ */ E(m, {
-					labels: X?.labels,
-					colors: X?.colors,
-					isExpanded: n
+						onClick: (e) => P(e, O, f)
+					}, `${O.columnName}-${O.jsonPath}-${M}-${V?.width}-${V?.height}`)
+				}), /* @__PURE__ */ E(y, {
+					sx: { alignSelf: "center" },
+					children: /* @__PURE__ */ E(m, {
+						labels: X?.labels,
+						colors: X?.colors,
+						isExpanded: n
+					})
 				})]
 			})
 		]
 	})] });
 }
 //#endregion
-export { L as default, P as extractPlotDataArray, I as getPlotStyle };
+export { I as default, N as extractPlotDataArray, F as getPlotStyle };
 
 //# sourceMappingURL=FacetNavPanel.js.map

package/dist/components/widgets/facet-nav/FacetNavPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FacetNavPanel.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetNavPanel.tsx"],"sourcesContent":["import StyledFormControl from '@/components/styled/StyledFormControl'\nimport SynapseClient from '@/synapse-client'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { getCorrespondingColumnForFacet } from '@/utils/functions/queryUtils'\nimport { InfoOutlined } from '@mui/icons-material'\nimport {\n  Box,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n  Tooltip,\n} from '@mui/material'\nimport {\n  ColumnTypeEnum,\n  FacetColumnRequest,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { useQuery } from '@tanstack/react-query'\nimport type Plotly from 'plotly.js-basic-dist'\nimport { useId, useMemo, useState } from 'react'\nimport { getContrastColorPalette } from '../../ColorGradient/ColorGradient'\nimport { ConfirmationDialog } from '../../ConfirmationDialog/ConfirmationDialog'\nimport loadingScreen from '../../LoadingScreen/LoadingScreen'\nimport Plot from '../../Plot/Plot'\nimport PlotPanelHeader from '../../Plot/PlotPanelHeader'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport { EnumFacetFilter } from '../query-filter/EnumFacetFilter/EnumFacetFilter'\nimport { FacetPlotLegendList } from './FacetPlotLegendList'\nimport { FacetWithLabel, truncate } from './FacetPlotLegendUtils'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetNavPanelProps = {\n  applyChangesToGraphSlice: (\n    facet: FacetColumnResultValues,\n    value: FacetColumnResultValueCount | undefined,\n    isSelected: boolean,\n  ) => void\n  applyChangesToFacetFilter: (facets: FacetColumnRequest[]) => void\n  index: number\n  facetToPlot: FacetColumnResultValues\n  plotType: PlotType\n  onSetPlotType: (plotType: PlotType) => void\n  onHide: () => void\n  isModalView: boolean\n  onCloseModal?: () => void\n}\n\nconst maxLabelLength: number = 19\n\n// STACKED_HORIZONTAL_BAR corresponds to a bar chart where we just want to show the proportion (like a pie chart)\nexport type PlotType = 'PIE' | 'BAR' | 'STACKED_HORIZONTAL_BAR'\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\nexport type GraphData = {\n  data: Plotly.Data[]\n  labels: FacetWithLabel[]\n  colors: string[]\n}\n\nexport async function extractPlotDataArray(\n  facetToPlot: FacetColumnResultValues,\n  columnType: ColumnTypeEnum | undefined,\n  index: number,\n  plotType: PlotType,\n  accessToken?: string,\n) {\n  const colorPalette = getContrastColorPalette(\n    // Use only the odd palette, using the same offset for all plots until palettes are improved.\n    // See PORTALS-2916\n    'odd', // index % 2 === 0 ? 'even' : 'odd',\n    0, // Math.floor(index / 2),\n    facetToPlot.facetValues.length,\n  )\n\n  const getLabels = async (\n    facetValues: FacetColumnResultValueCount[],\n    columnType?: ColumnTypeEnum,\n    accessToken?: string,\n  ) => {\n    const map = new Map<string, string>()\n    map.set(\n      SynapseConstants.VALUE_NOT_SET,\n      SynapseConstants.FRIENDLY_VALUE_NOT_SET,\n    )\n    // Filter out empties\n    const filteredValues = facetValues\n      .map(value => value.value)\n      .filter(val => val !== SynapseConstants.VALUE_NOT_SET)\n    if (\n      columnType === ColumnTypeEnum.ENTITYID ||\n      columnType === ColumnTypeEnum.ENTITYID_LIST\n    ) {\n      // TODO: Pagination\n      const response = await SynapseClient.getEntityHeadersByIds(\n        filteredValues,\n        accessToken,\n      )\n      for (const header of response.results) {\n        map.set(header.id, header.name)\n      }\n    } else if (\n      columnType === ColumnTypeEnum.USERID ||\n      columnType === ColumnTypeEnum.USERID_LIST\n    ) {\n      const response = await SynapseClient.getGroupHeadersBatch(\n        filteredValues,\n        accessToken,\n      )\n      for (const header of response.children) {\n        map.set(header.ownerId, header.userName)\n      }\n    }\n\n    return facetValues.map(facetValue => ({\n      facet: facetValue,\n      label: getLabel(facetValue, false, map),\n      truncatedLabel: getLabel(facetValue, true, map),\n      count: facetValue.count,\n    }))\n  }\n\n  const getLabel = (\n    facetValue: FacetColumnResultValueCount,\n    truncateFlag: boolean,\n    labelMap: Map<string, string>,\n  ): string => {\n    let label = labelMap.get(facetValue.value) ?? facetValue.value\n    if (truncateFlag) {\n      label = truncate(label, maxLabelLength)!\n    }\n    return label\n  }\n\n  const labels = await getLabels(\n    facetToPlot.facetValues,\n    columnType,\n    accessToken,\n  )\n  const text = labels.map(el => el.truncatedLabel)\n\n  const anyFacetsSelected = facetToPlot.facetValues.some(\n    value => value.isSelected,\n  )\n  const selectionAwareColorPalette = anyFacetsSelected\n    ? facetToPlot.facetValues.map((facetValue, index) =>\n        facetValue.isSelected\n          ? colorPalette[index]\n          : colorPalette[index]\n              .replace('rgb(', 'rgba(')\n              .replace(')', ', 0.25)'),\n      )\n    : colorPalette\n  const counts: Plotly.Datum[] = facetToPlot.facetValues.map(\n    facet => facet.count,\n  )\n  let x: Plotly.Datum[] | Plotly.Datum[][] | Plotly.TypedArray | undefined\n\n  if (plotType === 'BAR') {\n    x = facetToPlot.facetValues.map(\n      facet =>\n        labels.find(label => label.facet === facet)?.label ?? facet.value,\n    )\n  } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n    x = counts\n  }\n\n  let y: Plotly.Datum[] | Plotly.Datum[][] | Plotly.TypedArray | undefined\n  if (plotType === 'BAR') {\n    y = facetToPlot.facetValues.map(facet => facet.count)\n  } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n    y = Array(x?.length).fill('Proportional') // single value for every x value\n  }\n\n  const singleChartData: Plotly.Data = {\n    values: plotType === 'PIE' ? counts : undefined,\n    labels: labels.map(el => el.label),\n    text,\n    x,\n    y,\n    orientation: plotType === 'STACKED_HORIZONTAL_BAR' ? 'h' : 'v',\n    // @ts-expect-error\n    facetEnumerationValues: facetToPlot.facetValues.map(\n      facetValue => facetValue.value,\n    ),\n    name: facetToPlot.columnName,\n    textposition:\n      plotType === 'STACKED_HORIZONTAL_BAR' || plotType === 'BAR'\n        ? 'none'\n        : 'inside',\n    hovertemplate:\n      plotType === 'PIE'\n        ? '<b>%{text}</b><br>%{value} (%{percent})<br><extra></extra>'\n        : '<b>%{text}: </b><br>%{value} <br><extra></extra>',\n    textinfo: 'none',\n    type: plotType === 'PIE' ? 'pie' : 'bar',\n    pull:\n      plotType === 'PIE'\n        ? facetToPlot.facetValues.map(facetValue =>\n            facetValue.isSelected ? 0.1 : 0,\n          )\n        : undefined,\n    selectedpoints: anyFacetsSelected\n      ? facetToPlot.facetValues\n          .map((facetValue, index) => (facetValue.isSelected ? index : -1))\n          .filter(index => index !== -1)\n      : undefined,\n    selected: { marker: { opacity: 1 } },\n    unselected: { marker: { opacity: 0.25 } },\n\n    marker: {\n      colors: plotType === 'PIE' ? selectionAwareColorPalette : undefined,\n      color: plotType === 'PIE' ? undefined : selectionAwareColorPalette,\n    },\n  }\n  const result = {\n    data: [singleChartData],\n    labels,\n    colors:\n      plotType === 'PIE'\n        ? ((singleChartData as any).marker?.colors as string[])\n        : ((singleChartData as any).marker?.color as string[]),\n  }\n  return result\n}\n\nconst applyFacetFilter = (\n  event: Plotly.PlotMouseEvent,\n  allFacetValues: FacetColumnResultValues,\n  callbackApplyFn: FacetNavPanelProps['applyChangesToGraphSlice'],\n) => {\n  if (event.points && event.points[0]) {\n    const plotPointData: any = event.points[0]\n    const facetValueClickedValue =\n      plotPointData.data.facetEnumerationValues[plotPointData.pointNumber]\n    const facetValueClicked = allFacetValues.facetValues.find(\n      facet => facet.value === facetValueClickedValue,\n    )\n    callbackApplyFn(\n      allFacetValues,\n      facetValueClicked,\n      !facetValueClicked!.isSelected,\n    )\n  }\n}\n\nexport function getPlotStyle(\n  parentWidth: number | null | undefined,\n  plotType: PlotType,\n  maxHeight: number,\n): { width: string; height: string } {\n  if (parentWidth != undefined) {\n    let quotient = 1\n    switch (plotType) {\n      case 'BAR':\n        quotient = 0.8\n        break\n      case 'PIE':\n        quotient = 0.6\n        break\n      case 'STACKED_HORIZONTAL_BAR':\n        quotient = 1\n        break\n    }\n    const width = parentWidth ? parentWidth * quotient : 200\n    let height = plotType === 'PIE' ? width : width / 3\n    // max height of .PlotsContainer row col* is 200px, so the effective plot height max is around 150 unless it's expanded\n    if (height > maxHeight) {\n      height = maxHeight\n    }\n    return {\n      width: `${width}px`,\n      height: `${height}px`,\n    }\n  }\n  //else parent width is undefined\n  return {\n    width: '100%',\n    height: `${maxHeight}px`,\n  }\n}\n\nfunction FacetNavPanel(props: FacetNavPanelProps) {\n  const {\n    onHide,\n    isModalView,\n    applyChangesToGraphSlice,\n    index,\n    facetToPlot,\n    plotType,\n    onSetPlotType,\n  } = props\n  const { accessToken } = useSynapseContext()\n  const { data: queryMetadata, isLoading: isLoadingQueryMetadata } =\n    useGetQueryMetadata()\n\n  const [plotContainerMeasurements, plotContainerRef] =\n    useMeasure<HTMLDivElement>()\n  const { getColumnDisplayName } = useQueryVisualizationContext()\n\n  const [showModal, setShowModal] = useState(false)\n\n  const plotTitle = getColumnDisplayName(\n    facetToPlot.columnName,\n    facetToPlot.jsonPath,\n  )\n\n  const columnModel = useMemo(\n    () =>\n      getCorrespondingColumnForFacet(\n        facetToPlot,\n        queryMetadata?.columnModels ?? [],\n      ),\n    [queryMetadata?.columnModels, facetToPlot],\n  )\n  const columnType = columnModel?.columnType as ColumnTypeEnum\n\n  const { data: plotData } = useQuery({\n    queryKey: [\n      'extractPlotDataArray',\n      facetToPlot,\n      columnType,\n      index,\n      plotType,\n      accessToken,\n    ],\n\n    queryFn: () =>\n      extractPlotDataArray(\n        facetToPlot,\n        columnType,\n        index,\n        plotType,\n        accessToken,\n      ),\n\n    enabled: !!facetToPlot,\n  })\n\n  const chartSelectionInputLabelId = useId()\n  const filterByInputLabelId = useId()\n\n  /* rendering functions */\n  const chartSelectionToggle = (\n    <StyledFormControl fullWidth>\n      <InputLabel id={chartSelectionInputLabelId}>Chart Type</InputLabel>\n      <Select\n        labelId={chartSelectionInputLabelId}\n        label=\"Chart Type\"\n        value={plotType}\n        onChange={e => {\n          onSetPlotType(e.target.value as PlotType)\n        }}\n      >\n        <MenuItem value={'BAR'}>Bar Chart</MenuItem>\n        <MenuItem value={'PIE'}>Pie Chart</MenuItem>\n      </Select>\n    </StyledFormControl>\n  )\n\n  if (\n    (!queryMetadata && isLoadingQueryMetadata) ||\n    !facetToPlot ||\n    !columnModel\n  ) {\n    return (\n      <div className=\"SRC-loadingContainer SRC-centerContentColumn\">\n        {loadingScreen}\n      </div>\n    )\n  } else {\n    return (\n      <>\n        <ConfirmationDialog\n          open={showModal}\n          onCancel={() => setShowModal(false)}\n          title={plotTitle ?? ''}\n          content={<FacetNavPanel {...props} isModalView={true} />}\n          hasCancelButton={false}\n          confirmButtonProps={{ children: 'Apply Filters' }}\n          onConfirm={() => setShowModal(false)}\n          maxWidth={'md'}\n        />\n        <div\n          role=\"figure\"\n          className={`FacetNavPanel${isModalView ? '--expanded' : ''}`}\n        >\n          {!isModalView && (\n            <PlotPanelHeader\n              data={queryMetadata}\n              isLoading={isLoadingQueryMetadata}\n              title={plotTitle}\n              facetToPlot={facetToPlot}\n              onHide={onHide}\n              setShowModal={setShowModal}\n            />\n          )}\n          {isModalView && (\n            <Stack\n              sx={{\n                gap: 2,\n              }}\n            >\n              <StyledFormControl>\n                <InputLabel\n                  id={filterByInputLabelId}\n                  sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}\n                >\n                  <span>Filter All Data By</span>\n                  <Tooltip title=\"Selecting items in this dropdown will affect all facets on the Explore page.\">\n                    <InfoOutlined className=\"SRC-hand-cursor SRC-secondary-text-color\" />\n                  </Tooltip>\n                </InputLabel>\n                <EnumFacetFilter\n                  labelId={filterByInputLabelId}\n                  facet={facetToPlot}\n                  containerAs=\"Dropdown\"\n                  dropdownType=\"SelectBox\"\n                />\n              </StyledFormControl>\n              {chartSelectionToggle}\n            </Stack>\n          )}\n          <Box\n            sx={{\n              display: 'grid',\n              gridTemplateColumns: '50% 50%',\n              alignItems: 'center',\n            }}\n            role=\"graphics-object\"\n            className=\"FacetNavPanel__body\"\n          >\n            <div ref={plotContainerRef}>\n              <Plot\n                key={`${facetToPlot.columnName}-${facetToPlot.jsonPath}-${plotType}-${plotContainerMeasurements?.width}`}\n                layout={layout}\n                data={plotData?.data ?? []}\n                style={getPlotStyle(\n                  plotContainerMeasurements?.width,\n                  plotType,\n                  isModalView ? 300 : 150,\n                )}\n                config={{ displayModeBar: false }}\n                onClick={evt =>\n                  applyFacetFilter(evt, facetToPlot, applyChangesToGraphSlice)\n                }\n              />\n            </div>\n            <FacetPlotLegendList\n              labels={plotData?.labels}\n              colors={plotData?.colors}\n              isExpanded={isModalView}\n            />\n          </Box>\n        </div>\n      </>\n    )\n  }\n}\n\nexport default FacetNavPanel\n"],"mappings":"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"}
+{"version":3,"file":"FacetNavPanel.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetNavPanel.tsx"],"sourcesContent":["import StyledFormControl from '@/components/styled/StyledFormControl'\nimport SynapseClient from '@/synapse-client'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { getCorrespondingColumnForFacet } from '@/utils/functions/queryUtils'\nimport { InfoOutlined } from '@mui/icons-material'\nimport {\n  Box,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n  Tooltip,\n} from '@mui/material'\nimport {\n  ColumnTypeEnum,\n  FacetColumnRequest,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { useQuery } from '@tanstack/react-query'\nimport type Plotly from 'plotly.js-basic-dist'\nimport { useId, useMemo, useState } from 'react'\nimport { getContrastColorPalette } from '../../ColorGradient/ColorGradient'\nimport { ConfirmationDialog } from '../../ConfirmationDialog/ConfirmationDialog'\nimport loadingScreen from '../../LoadingScreen/LoadingScreen'\nimport Plot from '../../Plot/Plot'\nimport PlotPanelHeader from '../../Plot/PlotPanelHeader'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport { EnumFacetFilter } from '../query-filter/EnumFacetFilter/EnumFacetFilter'\nimport { FacetPlotLegendList } from './FacetPlotLegendList'\nimport { FacetWithLabel, truncate } from './FacetPlotLegendUtils'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetNavPanelProps = {\n  applyChangesToGraphSlice: (\n    facet: FacetColumnResultValues,\n    value: FacetColumnResultValueCount | undefined,\n    isSelected: boolean,\n  ) => void\n  applyChangesToFacetFilter: (facets: FacetColumnRequest[]) => void\n  index: number\n  facetToPlot: FacetColumnResultValues\n  plotType: PlotType\n  onSetPlotType: (plotType: PlotType) => void\n  onHide: () => void\n  isModalView: boolean\n  onCloseModal?: () => void\n}\n\nconst maxLabelLength: number = 19\n\n// STACKED_HORIZONTAL_BAR corresponds to a bar chart where we just want to show the proportion (like a pie chart)\nexport type PlotType = 'PIE' | 'BAR' | 'STACKED_HORIZONTAL_BAR'\n\nexport type GraphData = {\n  data: Plotly.Data[]\n  labels: FacetWithLabel[]\n  colors: string[]\n}\n\nexport async function extractPlotDataArray(\n  facetToPlot: FacetColumnResultValues,\n  columnType: ColumnTypeEnum | undefined,\n  index: number,\n  plotType: PlotType,\n  accessToken?: string,\n) {\n  const colorPalette = getContrastColorPalette(\n    // Use only the odd palette, using the same offset for all plots until palettes are improved.\n    // See PORTALS-2916\n    'odd', // index % 2 === 0 ? 'even' : 'odd',\n    0, // Math.floor(index / 2),\n    facetToPlot.facetValues.length,\n  )\n\n  const getLabels = async (\n    facetValues: FacetColumnResultValueCount[],\n    columnType?: ColumnTypeEnum,\n    accessToken?: string,\n  ) => {\n    const map = new Map<string, string>()\n    map.set(\n      SynapseConstants.VALUE_NOT_SET,\n      SynapseConstants.FRIENDLY_VALUE_NOT_SET,\n    )\n    // Filter out empties\n    const filteredValues = facetValues\n      .map(value => value.value)\n      .filter(val => val !== SynapseConstants.VALUE_NOT_SET)\n    if (\n      columnType === ColumnTypeEnum.ENTITYID ||\n      columnType === ColumnTypeEnum.ENTITYID_LIST\n    ) {\n      // TODO: Pagination\n      const response = await SynapseClient.getEntityHeadersByIds(\n        filteredValues,\n        accessToken,\n      )\n      for (const header of response.results) {\n        map.set(header.id, header.name)\n      }\n    } else if (\n      columnType === ColumnTypeEnum.USERID ||\n      columnType === ColumnTypeEnum.USERID_LIST\n    ) {\n      const response = await SynapseClient.getGroupHeadersBatch(\n        filteredValues,\n        accessToken,\n      )\n      for (const header of response.children) {\n        map.set(header.ownerId, header.userName)\n      }\n    }\n\n    return facetValues.map(facetValue => ({\n      facet: facetValue,\n      label: getLabel(facetValue, false, map),\n      truncatedLabel: getLabel(facetValue, true, map),\n      count: facetValue.count,\n    }))\n  }\n\n  const getLabel = (\n    facetValue: FacetColumnResultValueCount,\n    truncateFlag: boolean,\n    labelMap: Map<string, string>,\n  ): string => {\n    let label = labelMap.get(facetValue.value) ?? facetValue.value\n    if (truncateFlag) {\n      label = truncate(label, maxLabelLength)!\n    }\n    return label\n  }\n\n  const labels = await getLabels(\n    facetToPlot.facetValues,\n    columnType,\n    accessToken,\n  )\n  const text = labels.map(el => el.truncatedLabel)\n\n  const anyFacetsSelected = facetToPlot.facetValues.some(\n    value => value.isSelected,\n  )\n  const selectionAwareColorPalette = anyFacetsSelected\n    ? facetToPlot.facetValues.map((facetValue, index) =>\n        facetValue.isSelected\n          ? colorPalette[index]\n          : colorPalette[index]\n              .replace('rgb(', 'rgba(')\n              .replace(')', ', 0.25)'),\n      )\n    : colorPalette\n  const counts: Plotly.Datum[] = facetToPlot.facetValues.map(\n    facet => facet.count,\n  )\n  let x: Plotly.Datum[] | Plotly.Datum[][] | Plotly.TypedArray | undefined\n\n  if (plotType === 'BAR') {\n    x = facetToPlot.facetValues.map(\n      facet =>\n        labels.find(label => label.facet === facet)?.label ?? facet.value,\n    )\n  } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n    x = counts\n  }\n\n  let y: Plotly.Datum[] | Plotly.Datum[][] | Plotly.TypedArray | undefined\n  if (plotType === 'BAR') {\n    y = facetToPlot.facetValues.map(facet => facet.count)\n  } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n    y = Array(x?.length).fill('Proportional') // single value for every x value\n  }\n\n  const singleChartData: Plotly.Data = {\n    values: plotType === 'PIE' ? counts : undefined,\n    labels: labels.map(el => el.label),\n    text,\n    x,\n    y,\n    orientation: plotType === 'STACKED_HORIZONTAL_BAR' ? 'h' : 'v',\n    // @ts-expect-error\n    facetEnumerationValues: facetToPlot.facetValues.map(\n      facetValue => facetValue.value,\n    ),\n    name: facetToPlot.columnName,\n    textposition:\n      plotType === 'STACKED_HORIZONTAL_BAR' || plotType === 'BAR'\n        ? 'none'\n        : 'inside',\n    hovertemplate:\n      plotType === 'PIE'\n        ? '<b>%{text}</b><br>%{value} (%{percent})<br><extra></extra>'\n        : '<b>%{text}: </b><br>%{value} <br><extra></extra>',\n    textinfo: 'none',\n    type: plotType === 'PIE' ? 'pie' : 'bar',\n    pull:\n      plotType === 'PIE'\n        ? facetToPlot.facetValues.map(facetValue =>\n            facetValue.isSelected ? 0.1 : 0,\n          )\n        : undefined,\n    selectedpoints: anyFacetsSelected\n      ? facetToPlot.facetValues\n          .map((facetValue, index) => (facetValue.isSelected ? index : -1))\n          .filter(index => index !== -1)\n      : undefined,\n    selected: { marker: { opacity: 1 } },\n    unselected: { marker: { opacity: 0.25 } },\n\n    marker: {\n      colors: plotType === 'PIE' ? selectionAwareColorPalette : undefined,\n      color: plotType === 'PIE' ? undefined : selectionAwareColorPalette,\n    },\n  }\n  const result = {\n    data: [singleChartData],\n    labels,\n    colors:\n      plotType === 'PIE'\n        ? ((singleChartData as any).marker?.colors as string[])\n        : ((singleChartData as any).marker?.color as string[]),\n  }\n  return result\n}\n\nconst applyFacetFilter = (\n  event: Plotly.PlotMouseEvent,\n  allFacetValues: FacetColumnResultValues,\n  callbackApplyFn: FacetNavPanelProps['applyChangesToGraphSlice'],\n) => {\n  if (event.points && event.points[0]) {\n    const plotPointData: any = event.points[0]\n    const facetValueClickedValue =\n      plotPointData.data.facetEnumerationValues[plotPointData.pointNumber]\n    const facetValueClicked = allFacetValues.facetValues.find(\n      facet => facet.value === facetValueClickedValue,\n    )\n    callbackApplyFn(\n      allFacetValues,\n      facetValueClicked,\n      !facetValueClicked!.isSelected,\n    )\n  }\n}\n\nexport function getPlotStyle(\n  parentWidth: number | null | undefined,\n  plotType: PlotType,\n  maxHeight: number,\n): { width: string; height: string } {\n  if (parentWidth != undefined) {\n    let quotient = 1\n    switch (plotType) {\n      case 'BAR':\n        quotient = 0.8\n        break\n      case 'PIE':\n        quotient = 0.6\n        break\n      case 'STACKED_HORIZONTAL_BAR':\n        quotient = 1\n        break\n    }\n    const width = parentWidth ? parentWidth * quotient : 200\n    let height = plotType === 'PIE' ? width : width / 3\n    // max height of .PlotsContainer row col* is 200px, so the effective plot height max is around 150 unless it's expanded\n    if (height > maxHeight) {\n      height = maxHeight\n    }\n    return {\n      width: `${width}px`,\n      height: `${height}px`,\n    }\n  }\n  //else parent width is undefined\n  return {\n    width: '100%',\n    height: `${maxHeight}px`,\n  }\n}\n\nfunction FacetNavPanel(props: FacetNavPanelProps) {\n  const {\n    onHide,\n    isModalView,\n    applyChangesToGraphSlice,\n    index,\n    facetToPlot,\n    plotType,\n    onSetPlotType,\n  } = props\n  const { accessToken } = useSynapseContext()\n  const { data: queryMetadata, isLoading: isLoadingQueryMetadata } =\n    useGetQueryMetadata()\n\n  const [plotContainerMeasurements, plotContainerRef] =\n    useMeasure<HTMLDivElement>()\n  const { getColumnDisplayName } = useQueryVisualizationContext()\n\n  const [showModal, setShowModal] = useState(false)\n\n  const plotTitle = getColumnDisplayName(\n    facetToPlot.columnName,\n    facetToPlot.jsonPath,\n  )\n\n  const columnModel = useMemo(\n    () =>\n      getCorrespondingColumnForFacet(\n        facetToPlot,\n        queryMetadata?.columnModels ?? [],\n      ),\n    [queryMetadata?.columnModels, facetToPlot],\n  )\n  const columnType = columnModel?.columnType as ColumnTypeEnum\n\n  // Plotly.js mutates the layout object it receives, so each component instance\n  // must have its own layout object. Sharing a single object across instances\n  // (e.g. when the expand modal mounts a second FacetNavPanel) causes Plotly's\n  // mutations on one chart to silently corrupt the other. Use useMemo to\n  // produce a fresh layout object per instance — do NOT hoist this to module scope.\n  const plotLayout = useMemo<Partial<Plotly.Layout>>(\n    () => ({\n      showlegend: false,\n      annotations: [],\n      margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n      yaxis: {\n        visible: plotType === 'BAR',\n        showgrid: false,\n        automargin: true,\n      },\n      xaxis: {\n        // Show category labels on the x-axis for vertical bar charts in modal view\n        visible: isModalView && plotType === 'BAR',\n        showgrid: false,\n        automargin: true,\n      },\n    }),\n    [isModalView, plotType],\n  )\n\n  const { data: plotData } = useQuery({\n    queryKey: [\n      'extractPlotDataArray',\n      facetToPlot,\n      columnType,\n      index,\n      plotType,\n      accessToken,\n    ],\n\n    queryFn: () =>\n      extractPlotDataArray(\n        facetToPlot,\n        columnType,\n        index,\n        plotType,\n        accessToken,\n      ),\n\n    enabled: !!facetToPlot,\n  })\n\n  const chartSelectionInputLabelId = useId()\n  const filterByInputLabelId = useId()\n\n  /* rendering functions */\n  const chartSelectionToggle = (\n    <StyledFormControl fullWidth>\n      <InputLabel id={chartSelectionInputLabelId}>Chart Type</InputLabel>\n      <Select\n        labelId={chartSelectionInputLabelId}\n        label=\"Chart Type\"\n        value={plotType}\n        onChange={e => {\n          onSetPlotType(e.target.value as PlotType)\n        }}\n      >\n        <MenuItem value={'BAR'}>Bar Chart</MenuItem>\n        <MenuItem value={'PIE'}>Pie Chart</MenuItem>\n      </Select>\n    </StyledFormControl>\n  )\n\n  if (\n    (!queryMetadata && isLoadingQueryMetadata) ||\n    !facetToPlot ||\n    !columnModel\n  ) {\n    return (\n      <div className=\"SRC-loadingContainer SRC-centerContentColumn\">\n        {loadingScreen}\n      </div>\n    )\n  } else {\n    return (\n      <>\n        <ConfirmationDialog\n          open={showModal}\n          onCancel={() => setShowModal(false)}\n          title={plotTitle ?? ''}\n          content={<FacetNavPanel {...props} isModalView={true} />}\n          hasCancelButton={false}\n          confirmButtonProps={{ children: 'Apply Filters' }}\n          onConfirm={() => setShowModal(false)}\n          maxWidth={'md'}\n        />\n        <div\n          role=\"figure\"\n          className={`FacetNavPanel${isModalView ? '--expanded' : ''}`}\n        >\n          {!isModalView && (\n            <PlotPanelHeader\n              data={queryMetadata}\n              isLoading={isLoadingQueryMetadata}\n              title={plotTitle}\n              facetToPlot={facetToPlot}\n              onHide={onHide}\n              setShowModal={setShowModal}\n            />\n          )}\n          {isModalView && (\n            <Stack\n              sx={{\n                gap: 2,\n              }}\n            >\n              <StyledFormControl>\n                <InputLabel\n                  id={filterByInputLabelId}\n                  sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}\n                >\n                  <span>Filter All Data By</span>\n                  <Tooltip title=\"Selecting items in this dropdown will affect all facets on the Explore page.\">\n                    <InfoOutlined className=\"SRC-hand-cursor SRC-secondary-text-color\" />\n                  </Tooltip>\n                </InputLabel>\n                <EnumFacetFilter\n                  labelId={filterByInputLabelId}\n                  facet={facetToPlot}\n                  containerAs=\"Dropdown\"\n                  dropdownType=\"SelectBox\"\n                />\n              </StyledFormControl>\n              {chartSelectionToggle}\n            </Stack>\n          )}\n          <Box\n            sx={{\n              display: 'grid',\n              gridTemplateColumns: '50% 50%',\n              // alignItems:stretch + height:100% propagate the body's flex:1\n              // height (set in SCSS) down into the plot container so useMeasure\n              // can read it and size the Plotly chart to fill available space.\n              alignItems: 'stretch',\n              height: '100%',\n            }}\n            role=\"graphics-object\"\n            className=\"FacetNavPanel__body\"\n          >\n            <div ref={plotContainerRef} style={{ height: '100%' }}>\n              <Plot\n                key={`${facetToPlot.columnName}-${facetToPlot.jsonPath}-${plotType}-${plotContainerMeasurements?.width}-${plotContainerMeasurements?.height}`}\n                layout={plotLayout}\n                data={plotData?.data ?? []}\n                style={{\n                  ...getPlotStyle(\n                    plotContainerMeasurements?.width,\n                    plotType,\n                    isModalView ? 300 : 150,\n                  ),\n                  ...(plotContainerMeasurements?.height\n                    ? { height: `${plotContainerMeasurements.height}px` }\n                    : {}),\n                }}\n                config={{ displayModeBar: false }}\n                onClick={evt =>\n                  applyFacetFilter(evt, facetToPlot, applyChangesToGraphSlice)\n                }\n              />\n            </div>\n            <Box sx={{ alignSelf: 'center' }}>\n              <FacetPlotLegendList\n                labels={plotData?.labels}\n                colors={plotData?.colors}\n                isExpanded={isModalView}\n              />\n            </Box>\n          </Box>\n        </div>\n      </>\n    )\n  }\n}\n\nexport default FacetNavPanel\n"],"mappings":"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"}

package/dist/components/widgets/facet-nav/PlotsContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlotsContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAO/C,OAAgC,EAC9B,4BAA4B,EAC7B,MAAM,mDAAmD,CAAA;AAC1D,OAAsB,EAEpB,QAAQ,EACT,MAAM,4BAA4B,CAAA;AAMnC,MAAM,MAAM,mBAAmB,GAAG;IAChC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,WAAW,CAAC,EAAE,4BAA4B,EAAE,CAAA;IAC5C,gCAAgC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;CAC5D,CAAA;AACD,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,IAAI,CAAA;CACf,CAAA;AACD,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAAG,oBAAoB,CAAA;AAEzE,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,QAAQ,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AA+SD,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,2CAO5E"}
+{"version":3,"file":"PlotsContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAO/C,OAAgC,EAC9B,4BAA4B,EAC7B,MAAM,mDAAmD,CAAA;AAC1D,OAAsB,EAEpB,QAAQ,EACT,MAAM,4BAA4B,CAAA;AAMnC,MAAM,MAAM,mBAAmB,GAAG;IAChC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,WAAW,CAAC,EAAE,4BAA4B,EAAE,CAAA;IAC5C,gCAAgC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;CAC5D,CAAA;AACD,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,IAAI,CAAA;CACf,CAAA;AACD,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAAG,oBAAoB,CAAA;AAEzE,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,QAAQ,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAgUD,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,2CAO5E"}

package/dist/components/widgets/facet-nav/PlotsContainer.js

@@ -47,7 +47,13 @@ function O(e) {
 			...t,
 			isHidden: n >= _
 		}));
-	}, F = (e) => A.find((t) => v(e, t.plotId) && t.isHidden === !0) !== void 0, I = u(() => A.find((e) => e.isHidden === !0) ? "MORE" : A.length <= _ ? "NONE" : "LESS", [A]), L = (e) => {
+	}, F = (e) => A.find((t) => v(e, t.plotId) && t.isHidden === !0) !== void 0, I = u(() => A.find((e) => e.isHidden === !0) ? "MORE" : A.length <= _ ? "NONE" : "LESS", [A]);
+	l(() => {
+		I === "LESS" && requestAnimationFrame(() => {
+			window.dispatchEvent(new Event("resize"));
+		});
+	}, [I]);
+	let L = (e) => {
 		z(e, "isHidden", !0);
 	}, R = (e, t) => {
 		z(e, "plotType", t);
@@ -71,7 +77,7 @@ function O(e) {
 			children: A.map((e) => {
 				let t = "__custom" in e.plotId, n = c.find((t) => v(S(t), e.plotId)), i = M.find((t) => v(t.facetToPlot, e.plotId));
 				return /* @__PURE__ */ g("div", {
-					className: e.plotType === "BAR" ? "PlotsContainer__row__item--full-width" : void 0,
+					className: [t ? "PlotsContainer__row__item--custom" : void 0, t && n?.fullWidth ? "PlotsContainer__row__item--full-width" : void 0].filter(Boolean).join(" ") || void 0,
 					style: {
 						minWidth: "435px",
 						display: F(e.plotId) ? "none" : "block"