synapse-react-client 4.0.46 → 4.0.47

package/dist/components/widgets/ElementWithTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementWithTooltip.js","names":[],"sources":["../../../src/components/widgets/ElementWithTooltip.tsx"],"sourcesContent":["import React from 'react'\nimport { Menu, Tooltip } from '@mui/material'\nimport {\n  ComponentElement,\n  CSSProperties,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n} from 'react'\nimport IconSvg, { IconSvgProps } from '../IconSvg/IconSvg'\nimport { Icon } from '../row_renderers/utils'\nimport { TOOLTIP_DELAY_SHOW } from '../SynapseTable/SynapseTableConstants'\n\ntype CustomImageProps = {\n  svgImg: ComponentElement<any, any>\n  altText: string\n}\n\nexport type TooltipVisualProps = {\n  delayShow: number\n  place: 'top' | 'right' | 'bottom' | 'left'\n  type: 'dark' | 'success' | 'warning' | 'error' | 'info' | 'light'\n  effect: 'float' | 'solid'\n  border?: boolean\n}\n\nconst DEFAULT_TOOLTIP_VISUAL_PROPS: Partial<TooltipVisualProps> = {\n  place: 'top',\n}\n\n/*****************************************\n *  The control needs to either have a child element or needs to have an image supplied\n *  If the child element is supplied the control renders the child applying additional properties\n *  If the image is supplied the control renders a clickable image\n *  If there are no children and callback Fn is not supplied it is assumed to be a a dropdown trigger\n */\n\ntype ElementWithTooltipProps = PropsWithChildren<{\n  image?: IconSvgProps | CustomImageProps\n  imageColor?: string\n  tooltipText: string\n  callbackFn?: () => void\n  className?: string\n  tooltipVisualProps?: Partial<TooltipVisualProps>\n  darkTheme?: boolean\n  size?: string\n  icon?: ReactNode\n  /** The items to show in the menu -- NOTE: this cannot be a Fragment!\n   * @see https://stackoverflow.com/questions/75083605/mui-the-menu-component-doesnt-accept-a-fragment-as-a-child-consider-providing\n   */\n  menuItems?: React.ReactNode\n}>\n\nfunction getTooltipTriggerContents(\n  image: IconSvgProps | CustomImageProps,\n  imageColor: string | undefined,\n  size: CSSProperties['width'] | undefined,\n) {\n  if ('svgImg' in image) {\n    return image.svgImg\n  } else {\n    return <IconSvg {...image} sx={{ color: imageColor, width: size }} />\n  }\n}\n\nexport const ElementWithTooltip = ({\n  image,\n  callbackFn,\n  tooltipText,\n  className = '',\n  imageColor,\n  tooltipVisualProps = DEFAULT_TOOLTIP_VISUAL_PROPS,\n  children,\n  darkTheme,\n  size,\n  icon,\n  menuItems,\n}: ElementWithTooltipProps): React.ReactNode => {\n  const { place } = tooltipVisualProps\n  const iconComponent = icon ? (\n    typeof icon === 'string' ? (\n      <Icon type={icon}></Icon>\n    ) : (\n      icon\n    )\n  ) : undefined\n  const tooltipTriggerContents = iconComponent\n    ? iconComponent\n    : image\n      ? getTooltipTriggerContents(image, imageColor, size)\n      : children || <></>\n\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = Boolean(anchorEl)\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n  //if there is no callbackFn - assume it's a toggle\n\n  let tooltipTrigger: ReactNode\n  if (!children) {\n    tooltipTrigger = (\n      <button\n        tabIndex={0}\n        className={`ElementWithTooltip SRC-hand-cursor SRC-grey-background-hover ${className} ${\n          darkTheme ? 'dark-theme' : ''\n        } `}\n        onClick={e => {\n          if (callbackFn) {\n            callbackFn()\n          } else {\n            // open dropdown menu\n            handleClick(e)\n          }\n        }}\n        aria-label={tooltipText}\n      >\n        {tooltipTriggerContents}\n      </button>\n    )\n  } else {\n    tooltipTrigger = <div className=\"SRC-hand-cursor\">{children}</div>\n  }\n\n  return (\n    <>\n      <Tooltip\n        title={tooltipText}\n        enterNextDelay={TOOLTIP_DELAY_SHOW}\n        placement={place}\n        data-testid=\"ElementTooltip\"\n      >\n        {tooltipTrigger}\n      </Tooltip>\n      {menuItems && (\n        <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n          {menuItems}\n        </Menu>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AA2BA,IAAM,IAA4D,EAChE,OAAO,MACT;AAyBA,SAAS,EACP,GACA,GACA,GACA;CAIE,OAHE,YAAY,IACP,EAAM,SAEN,kBAAC,GAAD;EAAS,GAAI;EAAO,IAAI;GAAE,OAAO;GAAY,OAAO;EAAK;CAAI,CAAA;AAExE;AAEA,IAAa,KAAsB,EACjC,UACA,eACA,gBACA,eAAY,IACZ,eACA,wBAAqB,GACrB,aACA,cACA,SACA,SACA,mBAC8C;CAC9C,IAAM,EAAE,aAAU,GAQZ,KAPgB,IACpB,OAAO,KAAS,WACd,kBAAC,GAAD,EAAM,MAAM,EAAY,CAAA,IAExB,IAEA,KAAA,OAGA,IACE,EAA0B,GAAO,GAAY,CAAI,IACjD,KAAY,kBAAA,GAAA,CAAI,CAAA,IAEhB,CAAC,GAAU,KAAe,EAA6B,IAAI,GAC3D,IAAO,EAAQ,GACf,KAAe,MAAyC;EAC5D,EAAY,EAAM,aAAa;CACjC,GACM,UAAoB;EACxB,EAAY,IAAI;CAClB,GAGI;CAyBJ,OAxBA,AACE,IADG,IAqBc,kBAAC,OAAD;EAAK,WAAU;EAAmB;CAAc,CAAA,IAnB/D,kBAAC,UAAD;EACE,UAAU;EACV,WAAW,gEAAgE,EAAU,GACnF,IAAY,eAAe,GAC5B;EACD,UAAS,MAAK;GACZ,AAAI,IACF,EAAW,IAGX,EAAY,CAAC;EAEjB;EACA,cAAY;YAEX;CACK,CAAA,GAOV,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,OAAO;EACP,gBAAA;EACA,WAAW;EACX,eAAY;YAEX;CACM,CAAA,GACR,KACC,kBAAC,GAAD;EAAgB;EAAgB;EAAM,SAAS;YAC5C;CACG,CAAA,CAER,EAAA,CAAA;AAEN"}
+{"version":3,"file":"ElementWithTooltip.js","names":[],"sources":["../../../src/components/widgets/ElementWithTooltip.tsx"],"sourcesContent":["import React from 'react'\nimport { Menu, Tooltip } from '@mui/material'\nimport {\n  ComponentElement,\n  CSSProperties,\n  KeyboardEvent,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n} from 'react'\nimport IconSvg, { IconSvgProps } from '../IconSvg/IconSvg'\nimport { Icon } from '../row_renderers/utils'\nimport { TOOLTIP_DELAY_SHOW } from '../SynapseTable/SynapseTableConstants'\n\ntype CustomImageProps = {\n  svgImg: ComponentElement<any, any>\n  altText: string\n}\n\nexport type TooltipVisualProps = {\n  delayShow: number\n  place: 'top' | 'right' | 'bottom' | 'left'\n  type: 'dark' | 'success' | 'warning' | 'error' | 'info' | 'light'\n  effect: 'float' | 'solid'\n  border?: boolean\n}\n\nconst DEFAULT_TOOLTIP_VISUAL_PROPS: Partial<TooltipVisualProps> = {\n  place: 'top',\n}\n\n/*****************************************\n *  The control needs to either have a child element or needs to have an image supplied\n *  If the child element is supplied the control renders the child applying additional properties\n *  If the image is supplied the control renders a clickable image\n *  If there are no children and callback Fn is not supplied it is assumed to be a a dropdown trigger\n */\n\ntype ElementWithTooltipProps = PropsWithChildren<{\n  image?: IconSvgProps | CustomImageProps\n  imageColor?: string\n  tooltipText: string\n  callbackFn?: () => void\n  className?: string\n  tooltipVisualProps?: Partial<TooltipVisualProps>\n  darkTheme?: boolean\n  size?: string\n  icon?: ReactNode\n  /** The items to show in the menu -- NOTE: this cannot be a Fragment!\n   * @see https://stackoverflow.com/questions/75083605/mui-the-menu-component-doesnt-accept-a-fragment-as-a-child-consider-providing\n   */\n  menuItems?: React.ReactNode\n  /**\n   * When true, choosing a menu item closes the menu. Leave unset for menus whose items toggle state in place, so\n   * several can be toggled in a row.\n   */\n  closeMenuOnClick?: boolean\n}>\n\nfunction getTooltipTriggerContents(\n  image: IconSvgProps | CustomImageProps,\n  imageColor: string | undefined,\n  size: CSSProperties['width'] | undefined,\n) {\n  if ('svgImg' in image) {\n    return image.svgImg\n  } else {\n    return <IconSvg {...image} sx={{ color: imageColor, width: size }} />\n  }\n}\n\nexport const ElementWithTooltip = ({\n  image,\n  callbackFn,\n  tooltipText,\n  className = '',\n  imageColor,\n  tooltipVisualProps = DEFAULT_TOOLTIP_VISUAL_PROPS,\n  children,\n  darkTheme,\n  size,\n  icon,\n  menuItems,\n  closeMenuOnClick = false,\n}: ElementWithTooltipProps): React.ReactNode => {\n  const { place } = tooltipVisualProps\n  const iconComponent = icon ? (\n    typeof icon === 'string' ? (\n      <Icon type={icon}></Icon>\n    ) : (\n      icon\n    )\n  ) : undefined\n  const tooltipTriggerContents = iconComponent\n    ? iconComponent\n    : image\n      ? getTooltipTriggerContents(image, imageColor, size)\n      : children || <></>\n\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = Boolean(anchorEl)\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n  const closeAfterKeyboardChoice = (\n    event: KeyboardEvent<HTMLUListElement>,\n    key: string,\n  ) => {\n    const target = event.target as HTMLElement\n    if (\n      event.key === key &&\n      target.closest('[role=\"menuitem\"]:not([aria-disabled=\"true\"])')\n    ) {\n      handleClose()\n    }\n  }\n  //if there is no callbackFn - assume it's a toggle\n\n  let tooltipTrigger: ReactNode\n  if (!children) {\n    tooltipTrigger = (\n      <button\n        tabIndex={0}\n        className={`ElementWithTooltip SRC-hand-cursor SRC-grey-background-hover ${className} ${\n          darkTheme ? 'dark-theme' : ''\n        } `}\n        onClick={e => {\n          if (callbackFn) {\n            callbackFn()\n          } else {\n            // open dropdown menu\n            handleClick(e)\n          }\n        }}\n        aria-label={tooltipText}\n      >\n        {tooltipTriggerContents}\n      </button>\n    )\n  } else {\n    tooltipTrigger = <div className=\"SRC-hand-cursor\">{children}</div>\n  }\n\n  return (\n    <>\n      <Tooltip\n        title={tooltipText}\n        enterNextDelay={TOOLTIP_DELAY_SHOW}\n        placement={place}\n        data-testid=\"ElementTooltip\"\n      >\n        {tooltipTrigger}\n      </Tooltip>\n      {menuItems && (\n        <Menu\n          anchorEl={anchorEl}\n          open={open}\n          onClose={handleClose}\n          slotProps={{\n            list: closeMenuOnClick\n              ? {\n                  onClick: handleClose,\n                  // A menu item runs its action on Enter (key down) or Space (key up) without a click reaching the list.\n                  onKeyDown: (event: KeyboardEvent<HTMLUListElement>) =>\n                    closeAfterKeyboardChoice(event, 'Enter'),\n                  onKeyUp: (event: KeyboardEvent<HTMLUListElement>) =>\n                    closeAfterKeyboardChoice(event, ' '),\n                }\n              : undefined,\n          }}\n        >\n          {menuItems}\n        </Menu>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AA4BA,IAAM,IAA4D,EAChE,OAAO,MACT;AA8BA,SAAS,EACP,GACA,GACA,GACA;CAIE,OAHE,YAAY,IACP,EAAM,SAEN,kBAAC,GAAD;EAAS,GAAI;EAAO,IAAI;GAAE,OAAO;GAAY,OAAO;EAAK;CAAI,CAAA;AAExE;AAEA,IAAa,KAAsB,EACjC,UACA,eACA,gBACA,eAAY,IACZ,eACA,wBAAqB,GACrB,aACA,cACA,SACA,SACA,cACA,sBAAmB,SAC2B;CAC9C,IAAM,EAAE,aAAU,GAQZ,KAPgB,IACpB,OAAO,KAAS,WACd,kBAAC,GAAD,EAAM,MAAM,EAAY,CAAA,IAExB,IAEA,KAAA,OAGA,IACE,EAA0B,GAAO,GAAY,CAAI,IACjD,KAAY,kBAAA,GAAA,CAAI,CAAA,IAEhB,CAAC,GAAU,KAAe,EAA6B,IAAI,GAC3D,IAAO,EAAQ,GACf,KAAe,MAAyC;EAC5D,EAAY,EAAM,aAAa;CACjC,GACM,UAAoB;EACxB,EAAY,IAAI;CAClB,GACM,KACJ,GACA,MACG;EACH,IAAM,IAAS,EAAM;EACrB,AACE,EAAM,QAAQ,KACd,EAAO,QAAQ,mDAA+C,KAE9D,EAAY;CAEhB,GAGI;CAyBJ,OAxBA,AACE,IADG,IAqBc,kBAAC,OAAD;EAAK,WAAU;EAAmB;CAAc,CAAA,IAnB/D,kBAAC,UAAD;EACE,UAAU;EACV,WAAW,gEAAgE,EAAU,GACnF,IAAY,eAAe,GAC5B;EACD,UAAS,MAAK;GACZ,AAAI,IACF,EAAW,IAGX,EAAY,CAAC;EAEjB;EACA,cAAY;YAEX;CACK,CAAA,GAOV,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,OAAO;EACP,gBAAA;EACA,WAAW;EACX,eAAY;YAEX;CACM,CAAA,GACR,KACC,kBAAC,GAAD;EACY;EACJ;EACN,SAAS;EACT,WAAW,EACT,MAAM,IACF;GACE,SAAS;GAET,YAAY,MACV,EAAyB,GAAO,OAAO;GACzC,UAAU,MACR,EAAyB,GAAO,GAAG;EACvC,IACA,KAAA,EACN;YAEC;CACG,CAAA,CAER,EAAA,CAAA;AAEN"}

package/dist/components/widgets/RangeSlider/RangeSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAA;AAUnD,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,EAAE,WAAW,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;CAC/C,CAAC,CAAA;AAoBF,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA4D3C;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/RangeSlider/RangeSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAA;AAUnD,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,EAAE,WAAW,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;CAC/C,CAAC,CAAA;AAoBF,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA2D3C;AAED,eAAe,WAAW,CAAA"}

package/dist/components/widgets/RangeSlider/RangeSlider.js

@@ -15,7 +15,7 @@ function l(e, t) {
 	return [e.min ? Number(e.min) : Number(t[0]), e.max ? Number(e.max) : Number(t[1])];
 }
 function u(i) {
-	let { onApplyClicked: u, onChange: d, step: f } = i, p = (e) => e.map((e) => Number(e)), [m, h] = e(() => l(i.initialValues, i.domain)), g = p(i.domain), _ = (e) => {
+	let { onApplyClicked: u, onChange: d, step: f } = i, p = (e) => e.map(Number), [m, h] = e(() => l(i.initialValues, i.domain)), g = p(i.domain), _ = (e) => {
 		h([...e]), d && d({
 			min: e[0],
 			max: e[1]

package/dist/components/widgets/RangeSlider/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","names":[],"sources":["../../../../src/components/widgets/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import { RangeValues } from '../Range'\nimport { PropsWithChildren, useState } from 'react'\nimport {\n  Box,\n  Button,\n  Slider,\n  SliderValueLabelProps,\n  Tooltip,\n  Typography,\n} from '@mui/material'\n\nexport type RangeSliderProps = PropsWithChildren<{\n  domain: string[]\n  initialValues: RangeValues\n  step: number\n  onChange?: (values: RangeValues) => void\n  onApplyClicked?: (values: RangeValues) => void\n}>\n\nfunction ValueLabelComponent(props: SliderValueLabelProps) {\n  const { children, value } = props\n\n  return (\n    <Tooltip enterTouchDelay={0} placement=\"top\" title={value}>\n      {children}\n    </Tooltip>\n  )\n}\n\nfunction getInitialValues(initialValues: RangeValues, domain: string[]) {\n  const result = [\n    initialValues.min ? Number(initialValues.min) : Number(domain[0]),\n    initialValues.max ? Number(initialValues.max) : Number(domain[1]),\n  ]\n  return result\n}\n\nfunction RangeSlider(props: RangeSliderProps) {\n  const { onApplyClicked, onChange, step } = props\n  const stringArrToNumArr = (inputArr: string[]) =>\n    inputArr.map(value => Number(value))\n\n  const [values, setValues] = useState<number[]>(() =>\n    getInitialValues(props.initialValues, props.domain),\n  )\n\n  const numDomain = stringArrToNumArr(props.domain)\n\n  const handleSliderChange = (values: readonly number[]) => {\n    setValues([...values])\n    if (onChange) {\n      onChange({ min: values[0], max: values[1] })\n    }\n  }\n\n  return (\n    <Box sx={{ ml: 1 }}>\n      <Typography variant=\"smallText1\">\n        {values[0]} - {values[1]}\n      </Typography>\n      <Box\n        sx={{\n          display: 'flex',\n          gap: 3,\n          ml: 1,\n        }}\n      >\n        <Slider\n          marks={[\n            { value: numDomain[0], label: props.domain[0] },\n            { value: numDomain[1], label: props.domain[1] },\n          ]}\n          min={numDomain[0]}\n          max={numDomain[1]}\n          value={values}\n          onChange={(_, newValues) => handleSliderChange(newValues)}\n          step={step}\n          valueLabelDisplay=\"auto\"\n          slots={{\n            valueLabel: ValueLabelComponent,\n          }}\n        />\n        {onApplyClicked && (\n          <Box>\n            <Button\n              size=\"small\"\n              variant=\"outlined\"\n              onClick={() => onApplyClicked({ min: values[0], max: values[1] })}\n              sx={{ fontSize: 16 }}\n            >\n              Apply\n            </Button>\n          </Box>\n        )}\n      </Box>\n    </Box>\n  )\n}\n\nexport default RangeSlider\n"],"mappings":";;;;AAmBA,SAAS,EAAoB,GAA8B;CACzD,IAAM,EAAE,aAAU,aAAU;CAE5B,OACE,kBAAC,GAAD;EAAS,iBAAiB;EAAG,WAAU;EAAM,OAAO;EACjD;CACM,CAAA;AAEb;AAEA,SAAS,EAAiB,GAA4B,GAAkB;CAKtE,OAAO,CAHL,EAAc,MAAM,OAAO,EAAc,GAAG,IAAI,OAAO,EAAO,EAAE,GAChE,EAAc,MAAM,OAAO,EAAc,GAAG,IAAI,OAAO,EAAO,EAAE,CAE3D;AACT;AAEA,SAAS,EAAY,GAAyB;CAC5C,IAAM,EAAE,mBAAgB,aAAU,YAAS,GACrC,KAAqB,MACzB,EAAS,KAAI,MAAS,OAAO,CAAK,CAAC,GAE/B,CAAC,GAAQ,KAAa,QAC1B,EAAiB,EAAM,eAAe,EAAM,MAAM,CACpD,GAEM,IAAY,EAAkB,EAAM,MAAM,GAE1C,KAAsB,MAA8B;EAExD,AADA,EAAU,CAAC,GAAG,CAAM,CAAC,GACjB,KACF,EAAS;GAAE,KAAK,EAAO;GAAI,KAAK,EAAO;EAAG,CAAC;CAE/C;CAEA,OACE,kBAAC,GAAD;EAAK,IAAI,EAAE,IAAI,EAAE;YAAjB,CACE,kBAAC,GAAD;GAAY,SAAQ;aAApB;IACG,EAAO;IAAG;IAAI,EAAO;GACZ;MACZ,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,KAAK;IACL,IAAI;GACN;aALF,CAOE,kBAAC,GAAD;IACE,OAAO,CACL;KAAE,OAAO,EAAU;KAAI,OAAO,EAAM,OAAO;IAAG,GAC9C;KAAE,OAAO,EAAU;KAAI,OAAO,EAAM,OAAO;IAAG,CAChD;IACA,KAAK,EAAU;IACf,KAAK,EAAU;IACf,OAAO;IACP,WAAW,GAAG,MAAc,EAAmB,CAAS;IAClD;IACN,mBAAkB;IAClB,OAAO,EACL,YAAY,EACd;GACD,CAAA,GACA,KACC,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,eAAe,EAAe;KAAE,KAAK,EAAO;KAAI,KAAK,EAAO;IAAG,CAAC;IAChE,IAAI,EAAE,UAAU,GAAG;cACpB;GAEO,CAAA,EACL,CAAA,CAEJ;IACF;;AAET"}
+{"version":3,"file":"RangeSlider.js","names":[],"sources":["../../../../src/components/widgets/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import { RangeValues } from '../Range'\nimport { PropsWithChildren, useState } from 'react'\nimport {\n  Box,\n  Button,\n  Slider,\n  SliderValueLabelProps,\n  Tooltip,\n  Typography,\n} from '@mui/material'\n\nexport type RangeSliderProps = PropsWithChildren<{\n  domain: string[]\n  initialValues: RangeValues\n  step: number\n  onChange?: (values: RangeValues) => void\n  onApplyClicked?: (values: RangeValues) => void\n}>\n\nfunction ValueLabelComponent(props: SliderValueLabelProps) {\n  const { children, value } = props\n\n  return (\n    <Tooltip enterTouchDelay={0} placement=\"top\" title={value}>\n      {children}\n    </Tooltip>\n  )\n}\n\nfunction getInitialValues(initialValues: RangeValues, domain: string[]) {\n  const result = [\n    initialValues.min ? Number(initialValues.min) : Number(domain[0]),\n    initialValues.max ? Number(initialValues.max) : Number(domain[1]),\n  ]\n  return result\n}\n\nfunction RangeSlider(props: RangeSliderProps) {\n  const { onApplyClicked, onChange, step } = props\n  const stringArrToNumArr = (inputArr: string[]) => inputArr.map(Number)\n\n  const [values, setValues] = useState<number[]>(() =>\n    getInitialValues(props.initialValues, props.domain),\n  )\n\n  const numDomain = stringArrToNumArr(props.domain)\n\n  const handleSliderChange = (values: readonly number[]) => {\n    setValues([...values])\n    if (onChange) {\n      onChange({ min: values[0], max: values[1] })\n    }\n  }\n\n  return (\n    <Box sx={{ ml: 1 }}>\n      <Typography variant=\"smallText1\">\n        {values[0]} - {values[1]}\n      </Typography>\n      <Box\n        sx={{\n          display: 'flex',\n          gap: 3,\n          ml: 1,\n        }}\n      >\n        <Slider\n          marks={[\n            { value: numDomain[0], label: props.domain[0] },\n            { value: numDomain[1], label: props.domain[1] },\n          ]}\n          min={numDomain[0]}\n          max={numDomain[1]}\n          value={values}\n          onChange={(_, newValues) => handleSliderChange(newValues)}\n          step={step}\n          valueLabelDisplay=\"auto\"\n          slots={{\n            valueLabel: ValueLabelComponent,\n          }}\n        />\n        {onApplyClicked && (\n          <Box>\n            <Button\n              size=\"small\"\n              variant=\"outlined\"\n              onClick={() => onApplyClicked({ min: values[0], max: values[1] })}\n              sx={{ fontSize: 16 }}\n            >\n              Apply\n            </Button>\n          </Box>\n        )}\n      </Box>\n    </Box>\n  )\n}\n\nexport default RangeSlider\n"],"mappings":";;;;AAmBA,SAAS,EAAoB,GAA8B;CACzD,IAAM,EAAE,aAAU,aAAU;CAE5B,OACE,kBAAC,GAAD;EAAS,iBAAiB;EAAG,WAAU;EAAM,OAAO;EACjD;CACM,CAAA;AAEb;AAEA,SAAS,EAAiB,GAA4B,GAAkB;CAKtE,OAAO,CAHL,EAAc,MAAM,OAAO,EAAc,GAAG,IAAI,OAAO,EAAO,EAAE,GAChE,EAAc,MAAM,OAAO,EAAc,GAAG,IAAI,OAAO,EAAO,EAAE,CAE3D;AACT;AAEA,SAAS,EAAY,GAAyB;CAC5C,IAAM,EAAE,mBAAgB,aAAU,YAAS,GACrC,KAAqB,MAAuB,EAAS,IAAI,MAAM,GAE/D,CAAC,GAAQ,KAAa,QAC1B,EAAiB,EAAM,eAAe,EAAM,MAAM,CACpD,GAEM,IAAY,EAAkB,EAAM,MAAM,GAE1C,KAAsB,MAA8B;EAExD,AADA,EAAU,CAAC,GAAG,CAAM,CAAC,GACjB,KACF,EAAS;GAAE,KAAK,EAAO;GAAI,KAAK,EAAO;EAAG,CAAC;CAE/C;CAEA,OACE,kBAAC,GAAD;EAAK,IAAI,EAAE,IAAI,EAAE;YAAjB,CACE,kBAAC,GAAD;GAAY,SAAQ;aAApB;IACG,EAAO;IAAG;IAAI,EAAO;GACZ;MACZ,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,KAAK;IACL,IAAI;GACN;aALF,CAOE,kBAAC,GAAD;IACE,OAAO,CACL;KAAE,OAAO,EAAU;KAAI,OAAO,EAAM,OAAO;IAAG,GAC9C;KAAE,OAAO,EAAU;KAAI,OAAO,EAAM,OAAO;IAAG,CAChD;IACA,KAAK,EAAU;IACf,KAAK,EAAU;IACf,OAAO;IACP,WAAW,GAAG,MAAc,EAAmB,CAAS;IAClD;IACN,mBAAkB;IAClB,OAAO,EACL,YAAY,EACd;GACD,CAAA,GACA,KACC,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,eAAe,EAAe;KAAE,KAAK,EAAO;KAAI,KAAK,EAAO;IAAG,CAAC;IAChE,IAAI,EAAE,UAAU,GAAG;cACpB;GAEO,CAAA,EACL,CAAA,CAEJ;IACF;;AAET"}

package/dist/components/widgets/SynapseImage.js

@@ -14,7 +14,7 @@ function s(s) {
 			fileHandleId: m.dataFileHandleId
 		};
 		if (u && f && d) {
-			let { id: e } = d.filter((e) => e.fileName === f)[0];
+			let { id: e } = d.find((e) => e.fileName === f);
 			return {
 				associateObjectId: u,
 				associateObjectType: a.WikiAttachment,

package/dist/components/widgets/SynapseImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SynapseImage.js","names":[],"sources":["../../../src/components/widgets/SynapseImage.tsx"],"sourcesContent":["import { ImageFileHandle } from '@/components/widgets/ImageFileHandle'\nimport { useGetEntity } from '@/synapse-queries/index'\nimport {\n  FileEntity,\n  FileHandle,\n  FileHandleAssociateType,\n  FileHandleAssociation,\n} from '@sage-bionetworks/synapse-types'\nimport classNames from 'classnames'\nimport { CSSProperties, useMemo } from 'react'\n\nexport type SynapseImageProps = {\n  wikiId?: string\n  synapseId?: string\n  version?: number\n  fileName?: string\n  fileResults?: FileHandle[]\n  params: {\n    align: string\n    scale: string\n    // this should be treated as a boolean, but the actual type that will come through\n    // is a string which I don't want to mis-represent\n    responsive: string\n    altText: string\n  }\n}\n\nfunction SynapseImage(props: SynapseImageProps) {\n  const { synapseId, version, wikiId, fileResults, fileName, params } = props\n\n  const { data: fileEntity } = useGetEntity<FileEntity>(\n    synapseId || '',\n    version,\n    {\n      enabled: Boolean(synapseId),\n    },\n  )\n\n  const fileHandleAssociation: FileHandleAssociation | undefined =\n    useMemo(() => {\n      if (synapseId && fileEntity) {\n        return {\n          associateObjectId: synapseId,\n          associateObjectType: FileHandleAssociateType.FileEntity,\n          fileHandleId: fileEntity.dataFileHandleId,\n        }\n      } else if (wikiId && fileName && fileResults) {\n        const { id } = fileResults.filter(el => el.fileName === fileName)[0]\n        return {\n          associateObjectId: wikiId,\n          associateObjectType: FileHandleAssociateType.WikiAttachment,\n          fileHandleId: id,\n        }\n      }\n      return undefined\n    }, [fileEntity, fileName, fileResults, synapseId, wikiId])\n\n  const { align = '', altText = 'synapse image' } = params\n\n  let scale = 'auto'\n  if (params.scale && params.scale !== '100') {\n    scale = `${Number(params.scale)}%`\n  }\n\n  const alignLowerCase = align.toLowerCase()\n  let className = ''\n  if (alignLowerCase === 'left') {\n    className = 'floatLeft'\n  }\n  if (alignLowerCase === 'right') {\n    className = 'floatright'\n  }\n  if (alignLowerCase === 'center') {\n    className = 'align-center'\n  }\n  const style: CSSProperties = {\n    maxWidth: scale,\n    height: 'auto',\n  }\n\n  if (!fileHandleAssociation) {\n    return <></>\n  }\n\n  return (\n    <ImageFileHandle\n      fileHandleAssociation={fileHandleAssociation}\n      imgProps={{\n        alt: altText,\n        className: classNames('img-fluid', className),\n        style,\n      }}\n    />\n  )\n}\nexport default SynapseImage\n"],"mappings":";;;;;;;;AA2BA,SAAS,EAAa,GAA0B;CAC9C,IAAM,EAAE,cAAW,YAAS,WAAQ,gBAAa,aAAU,cAAW,GAEhE,EAAE,MAAM,MAAe,EAC3B,KAAa,IACb,GACA,EACE,SAAS,EAAQ,EACnB,CACF,GAEM,IACJ,QAAc;EACZ,IAAI,KAAa,GACf,OAAO;GACL,mBAAmB;GACnB,qBAAqB,EAAwB;GAC7C,cAAc,EAAW;EAC3B;EACK,IAAI,KAAU,KAAY,GAAa;GAC5C,IAAM,EAAE,UAAO,EAAY,QAAO,MAAM,EAAG,aAAa,CAAQ,EAAE;GAClE,OAAO;IACL,mBAAmB;IACnB,qBAAqB,EAAwB;IAC7C,cAAc;GAChB;EACF;CAEF,GAAG;EAAC;EAAY;EAAU;EAAa;EAAW;CAAM,CAAC,GAErD,EAAE,WAAQ,IAAI,aAAU,oBAAoB,GAE9C,IAAQ;CACZ,AAAI,EAAO,SAAS,EAAO,UAAU,UACnC,IAAQ,GAAG,OAAO,EAAO,KAAK,EAAE;CAGlC,IAAM,IAAiB,EAAM,YAAY,GACrC,IAAY;CAOhB,AANI,MAAmB,WACrB,IAAY,cAEV,MAAmB,YACrB,IAAY,eAEV,MAAmB,aACrB,IAAY;CAEd,IAAM,IAAuB;EAC3B,UAAU;EACV,QAAQ;CACV;CAMA,OAJK,IAKH,kBAAC,GAAD;EACyB;EACvB,UAAU;GACR,KAAK;GACL,WAAW,EAAW,aAAa,CAAS;GAC5C;EACF;CACD,CAAA,IAXM,kBAAA,GAAA,CAAI,CAAA;AAaf"}
+{"version":3,"file":"SynapseImage.js","names":[],"sources":["../../../src/components/widgets/SynapseImage.tsx"],"sourcesContent":["import { ImageFileHandle } from '@/components/widgets/ImageFileHandle'\nimport { useGetEntity } from '@/synapse-queries/index'\nimport {\n  FileEntity,\n  FileHandle,\n  FileHandleAssociateType,\n  FileHandleAssociation,\n} from '@sage-bionetworks/synapse-types'\nimport classNames from 'classnames'\nimport { CSSProperties, useMemo } from 'react'\n\nexport type SynapseImageProps = {\n  wikiId?: string\n  synapseId?: string\n  version?: number\n  fileName?: string\n  fileResults?: FileHandle[]\n  params: {\n    align: string\n    scale: string\n    // this should be treated as a boolean, but the actual type that will come through\n    // is a string which I don't want to mis-represent\n    responsive: string\n    altText: string\n  }\n}\n\nfunction SynapseImage(props: SynapseImageProps) {\n  const { synapseId, version, wikiId, fileResults, fileName, params } = props\n\n  const { data: fileEntity } = useGetEntity<FileEntity>(\n    synapseId || '',\n    version,\n    {\n      enabled: Boolean(synapseId),\n    },\n  )\n\n  const fileHandleAssociation: FileHandleAssociation | undefined =\n    useMemo(() => {\n      if (synapseId && fileEntity) {\n        return {\n          associateObjectId: synapseId,\n          associateObjectType: FileHandleAssociateType.FileEntity,\n          fileHandleId: fileEntity.dataFileHandleId,\n        }\n      } else if (wikiId && fileName && fileResults) {\n        const { id } = fileResults.find(el => el.fileName === fileName)!\n        return {\n          associateObjectId: wikiId,\n          associateObjectType: FileHandleAssociateType.WikiAttachment,\n          fileHandleId: id,\n        }\n      }\n      return undefined\n    }, [fileEntity, fileName, fileResults, synapseId, wikiId])\n\n  const { align = '', altText = 'synapse image' } = params\n\n  let scale = 'auto'\n  if (params.scale && params.scale !== '100') {\n    scale = `${Number(params.scale)}%`\n  }\n\n  const alignLowerCase = align.toLowerCase()\n  let className = ''\n  if (alignLowerCase === 'left') {\n    className = 'floatLeft'\n  }\n  if (alignLowerCase === 'right') {\n    className = 'floatright'\n  }\n  if (alignLowerCase === 'center') {\n    className = 'align-center'\n  }\n  const style: CSSProperties = {\n    maxWidth: scale,\n    height: 'auto',\n  }\n\n  if (!fileHandleAssociation) {\n    return <></>\n  }\n\n  return (\n    <ImageFileHandle\n      fileHandleAssociation={fileHandleAssociation}\n      imgProps={{\n        alt: altText,\n        className: classNames('img-fluid', className),\n        style,\n      }}\n    />\n  )\n}\nexport default SynapseImage\n"],"mappings":";;;;;;;;AA2BA,SAAS,EAAa,GAA0B;CAC9C,IAAM,EAAE,cAAW,YAAS,WAAQ,gBAAa,aAAU,cAAW,GAEhE,EAAE,MAAM,MAAe,EAC3B,KAAa,IACb,GACA,EACE,SAAS,EAAQ,EACnB,CACF,GAEM,IACJ,QAAc;EACZ,IAAI,KAAa,GACf,OAAO;GACL,mBAAmB;GACnB,qBAAqB,EAAwB;GAC7C,cAAc,EAAW;EAC3B;EACK,IAAI,KAAU,KAAY,GAAa;GAC5C,IAAM,EAAE,UAAO,EAAY,MAAK,MAAM,EAAG,aAAa,CAAQ;GAC9D,OAAO;IACL,mBAAmB;IACnB,qBAAqB,EAAwB;IAC7C,cAAc;GAChB;EACF;CAEF,GAAG;EAAC;EAAY;EAAU;EAAa;EAAW;CAAM,CAAC,GAErD,EAAE,WAAQ,IAAI,aAAU,oBAAoB,GAE9C,IAAQ;CACZ,AAAI,EAAO,SAAS,EAAO,UAAU,UACnC,IAAQ,GAAG,OAAO,EAAO,KAAK,EAAE;CAGlC,IAAM,IAAiB,EAAM,YAAY,GACrC,IAAY;CAOhB,AANI,MAAmB,WACrB,IAAY,cAEV,MAAmB,YACrB,IAAY,eAEV,MAAmB,aACrB,IAAY;CAEd,IAAM,IAAuB;EAC3B,UAAU;EACV,QAAQ;CACV;CAMA,OAJK,IAKH,kBAAC,GAAD;EACyB;EACvB,UAAU;GACR,KAAK;GACL,WAAW,EAAW,aAAa,CAAS;GAC5C;EACF;CACD,CAAA,IAXM,kBAAA,GAAA,CAAI,CAAA;AAaf"}

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

@@ -1,32 +1,43 @@
-import { ColumnTypeEnum, FacetColumnRequest, FacetColumnResultValueCount, FacetColumnResultValues } from '@sage-bionetworks/synapse-types';
+import { EnumerationFacet } from '@/utils/functions/enumerationFacet';
+import { ColumnTypeEnum, FacetColumnRequest, FacetColumnResultValueCount } from '@sage-bionetworks/synapse-types';
 import type Plotly from 'plotly.js-basic-dist';
 import { FacetWithLabel } from './FacetPlotLegendUtils';
 export type FacetNavPanelProps = {
-    applyChangesToGraphSlice: (facet: FacetColumnResultValues, value: FacetColumnResultValueCount | undefined, isSelected: boolean) => void;
+    applyChangesToGraphSlice: (facet: EnumerationFacet, value: FacetColumnResultValueCount | undefined, isSelected: boolean) => void;
     applyChangesToFacetFilter: (facets: FacetColumnRequest[]) => void;
     index: number;
-    facetToPlot: FacetColumnResultValues;
+    facetToPlot: EnumerationFacet;
     plotType: PlotType;
     onSetPlotType: (plotType: PlotType) => void;
     onHide: () => void;
     isModalView: boolean;
     onCloseModal?: () => void;
+    /**
+     * When true, the plot cannot change the query: clicking a slice or bar does nothing, and the
+     * filter dropdowns are hidden. Presentation controls (expand, chart type, hide) still work.
+     */
+    disableFiltering?: boolean;
 };
 export declare const MAX_PLOT_HEIGHT_PX = 150;
 export declare const MAX_EXPANDED_PLOT_HEIGHT_PX = 300;
-export type PlotType = 'PIE' | 'BAR' | 'STACKED_HORIZONTAL_BAR';
+export type PlotType = 'PIE' | 'BAR' | 'HORIZONTAL_BAR' | 'STACKED_HORIZONTAL_BAR';
 export type GraphData = {
     data: Plotly.Data[];
     labels: FacetWithLabel[];
     colors: string[];
 };
-export declare function extractPlotDataArray(facetToPlot: FacetColumnResultValues, columnType: ColumnTypeEnum | undefined, index: number, plotType: PlotType, accessToken?: string): Promise<{
+/**
+ * @param facetPostProcessingApplied the QueryResultBundle's `facetPostProcessingApplied`. When set, counts are shown as
+ * approximate (see `formatFacetValueCount`) and pie percentages are omitted.
+ */
+export declare function extractPlotDataArray(facetToPlot: EnumerationFacet, columnType: ColumnTypeEnum | undefined, index: number, plotType: PlotType, accessToken?: string, facetPostProcessingApplied?: boolean): Promise<{
     data: Plotly.Data[];
     labels: {
         facet: FacetColumnResultValueCount;
         label: string;
         truncatedLabel: string;
         count: number;
+        countText: string;
     }[];
     colors: string[];
 }>;

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;AAGD,eAAO,MAAM,kBAAkB,MAAM,CAAA;AACrC,eAAO,MAAM,2BAA2B,MAAM,CAAA;AAG9C,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,2CAqN/C;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"FacetNavPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetNavPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAA;AACrE,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,2BAA2B,EAC5B,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,gBAAgB,EACvB,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,gBAAgB,CAAA;IAC7B,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;IACzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAGD,eAAO,MAAM,kBAAkB,MAAM,CAAA;AACrC,eAAO,MAAM,2BAA2B,MAAM,CAAA;AAI9C,MAAM,MAAM,QAAQ,GAChB,KAAK,GACL,KAAK,GACL,gBAAgB,GAChB,wBAAwB,CAAA;AAE5B,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;;;GAGG;AACH,wBAAsB,oBAAoB,CACxC,WAAW,EAAE,gBAAgB,EAC7B,UAAU,EAAE,cAAc,GAAG,SAAS,EACtC,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,CAAC,EAAE,MAAM,EACpB,0BAA0B,CAAC,EAAE,OAAO;;;;;;;;;;GA4KrC;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,CA+BnC;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAwO/C;AAED,eAAe,aAAa,CAAA"}

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

@@ -1,80 +1,83 @@
 import { FRIENDLY_VALUE_NOT_SET as e, VALUE_NOT_SET as t } from "../../../utils/SynapseConstants.js";
 import n from "../../../synapse-client/index.js";
-import { useSynapseContext as r } from "../../../utils/context/SynapseContext.js";
-import i from "../../LoadingScreen/LoadingScreen.js";
+import { useQueryVisualizationContext as r } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { useSynapseContext as i } from "../../../utils/context/SynapseContext.js";
+import a from "../../LoadingScreen/LoadingScreen.js";
 import "../../../utils/index.js";
-import { getCorrespondingColumnForFacet as a } from "../../../utils/functions/queryUtils.js";
-import { ConfirmationDialog as o } from "../../ConfirmationDialog/ConfirmationDialog.js";
-import { StyledFormControl as s } from "../../styled/StyledFormControl.js";
-import { useGetQueryMetadata as c } from "../../QueryWrapper/useGetQueryMetadata.js";
-import { useQueryVisualizationContext as l } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { getCorrespondingColumnForFacet as o } from "../../../utils/functions/queryUtils.js";
+import { ConfirmationDialog as s } from "../../ConfirmationDialog/ConfirmationDialog.js";
+import { StyledFormControl as c } from "../../styled/StyledFormControl.js";
+import { useGetQueryMetadata as l } from "../../QueryWrapper/useGetQueryMetadata.js";
 import "../../QueryVisualizationWrapper/index.js";
-import { EnumFacetFilter as u } from "../query-filter/EnumFacetFilter/EnumFacetFilter.js";
-import { Plot as d } from "../../Plot/Plot.js";
-import { getContrastColorPalette as f } from "../../ColorGradient/ColorGradient.js";
-import p from "../../Plot/PlotPanelHeader.js";
-import { FacetPlotLegendList as m } from "./FacetPlotLegendList.js";
-import { truncate as h } from "./FacetPlotLegendUtils.js";
-import { useId as g, useMemo as _, useState as v } from "react";
-import { Box as y, InputLabel as b, MenuItem as x, Select as S, Stack as C, Tooltip as w } from "@mui/material";
-import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
-import { ColumnTypeEnum as O } from "@sage-bionetworks/synapse-types";
-import { useQuery as k } from "@tanstack/react-query";
-import A from "@mui/icons-material/InfoOutlined";
-import { useMeasure as j } from "@react-hookz/web";
+import { formatFacetValueCount as u } from "../../../utils/functions/facetCountUtils.js";
+import { EnumFacetFilter as d } from "../query-filter/EnumFacetFilter/EnumFacetFilter.js";
+import { Plot as f } from "../../Plot/Plot.js";
+import { getContrastColorPalette as p } from "../../ColorGradient/ColorGradient.js";
+import m from "../../Plot/PlotPanelHeader.js";
+import { FacetPlotLegendList as h } from "./FacetPlotLegendList.js";
+import { truncate as g } from "./FacetPlotLegendUtils.js";
+import { useId as _, useMemo as v, useState as y } from "react";
+import { Box as b, InputLabel as x, MenuItem as S, Select as C, Stack as w, Tooltip as T } from "@mui/material";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { ColumnTypeEnum as k } from "@sage-bionetworks/synapse-types";
+import { useQuery as A } from "@tanstack/react-query";
+import j from "@mui/icons-material/InfoOutlined";
+import { useMeasure as ee } from "@react-hookz/web";
 //#region src/components/widgets/facet-nav/FacetNavPanel.tsx
 var M = 19, N = 150, P = 300;
-async function F(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);
-		let s = r.map((e) => e.value).filter((e) => e !== t);
-		if (i === O.ENTITYID || i === O.ENTITYID_LIST) {
-			let e = await n.getEntityHeadersByIds(s, a);
-			for (let t of e.results) o.set(t.id, t.name);
-		} else if (i === O.USERID || i === O.USERID_LIST) {
-			let e = await n.getGroupHeadersBatch(s, a);
-			for (let t of e.children) o.set(t.ownerId, t.userName);
+async function F(r, i, a, o, s, c) {
+	let l = p("odd", 0, r.facetValues.length), d = async (i, a, o) => {
+		let s = /* @__PURE__ */ new Map();
+		s.set(t, e);
+		let l = i.map((e) => e.value).filter((e) => e !== t);
+		if (a === k.ENTITYID || a === k.ENTITYID_LIST) {
+			let e = await n.getEntityHeadersByIds(l, o);
+			for (let t of e.results) s.set(t.id, t.name);
+		} else if (a === k.USERID || a === k.USERID_LIST) {
+			let e = await n.getGroupHeadersBatch(l, o);
+			for (let t of e.children) s.set(t.ownerId, t.userName);
 		}
-		return r.map((e) => ({
+		return i.map((e) => ({
 			facet: e,
-			label: u(e, !1, o),
-			truncatedLabel: u(e, !0, o),
-			count: e.count
+			label: f(e, !1, s),
+			truncatedLabel: f(e, !0, s),
+			count: e.count,
+			countText: u(e.count, r, c)
 		}));
-	}, u = (e, t, n) => {
+	}, f = (e, t, n) => {
 		let r = n.get(e.value) ?? e.value;
-		return t && (r = h(r, M)), r;
-	}, d = await l(r.facetValues, i, s), p = d.map((e) => e.truncatedLabel), m = r.facetValues.some((e) => e.isSelected), g = m ? r.facetValues.map((e, t) => e.isSelected ? c[t] : c[t].replace("rgb(", "rgba(").replace(")", ", 0.25)")) : c, _ = r.facetValues.map((e) => e.count), v;
-	o === "BAR" ? v = r.facetValues.map((e) => d.find((t) => t.facet === e)?.label ?? e.value) : o === "STACKED_HORIZONTAL_BAR" && (v = _);
-	let y;
-	o === "BAR" ? y = r.facetValues.map((e) => e.count) : o === "STACKED_HORIZONTAL_BAR" && (y = Array(v?.length).fill("Proportional"));
-	let b = {
-		values: o === "PIE" ? _ : void 0,
-		labels: d.map((e) => e.label),
-		text: p,
-		x: v,
-		y,
-		orientation: o === "STACKED_HORIZONTAL_BAR" ? "h" : "v",
+		return t && (r = g(r, M)), r;
+	}, m = await d(r.facetValues, i, s), h = m.map((e) => e.truncatedLabel), _ = r.facetValues.some((e) => e.isSelected), v = _ ? r.facetValues.map((e, t) => e.isSelected ? l[t] : l[t].replace("rgb(", "rgba(").replace(")", ", 0.25)")) : l, y = r.facetValues.map((e) => e.count), b = r.facetValues.map((e) => m.find((t) => t.facet === e)?.label ?? e.value), x, S;
+	o === "BAR" ? (x = b, S = y) : o === "HORIZONTAL_BAR" ? (x = y, S = b) : o === "STACKED_HORIZONTAL_BAR" && (x = y, S = Array(x.length).fill("Proportional"));
+	let C = "%{value}";
+	o === "PIE" ? C = "%{value} (%{percent})" : o === "HORIZONTAL_BAR" && (C = "%{x}");
+	let w = c ? "%{customdata}" : C, T = {
+		values: o === "PIE" ? y : void 0,
+		labels: m.map((e) => e.label),
+		text: h,
+		customdata: c ? m.map((e) => e.countText) : void 0,
+		x,
+		y: S,
+		orientation: o === "STACKED_HORIZONTAL_BAR" || o === "HORIZONTAL_BAR" ? "h" : "v",
 		facetEnumerationValues: r.facetValues.map((e) => e.value),
 		name: r.columnName,
-		textposition: o === "STACKED_HORIZONTAL_BAR" || o === "BAR" ? "none" : "inside",
-		hovertemplate: o === "PIE" ? "<b>%{text}</b><br>%{value} (%{percent})<br><extra></extra>" : "<b>%{text}: </b><br>%{value} <br><extra></extra>",
+		textposition: o === "PIE" ? "inside" : "none",
+		hovertemplate: `<b>%{text}: </b><br>${w} <br><extra></extra>`,
 		textinfo: "none",
 		type: o === "PIE" ? "pie" : "bar",
 		pull: o === "PIE" ? r.facetValues.map((e) => e.isSelected ? .1 : 0) : void 0,
-		selectedpoints: m ? r.facetValues.map((e, t) => e.isSelected ? t : -1).filter((e) => e !== -1) : void 0,
+		selectedpoints: _ ? r.facetValues.map((e, t) => e.isSelected ? t : -1).filter((e) => e !== -1) : void 0,
 		selected: { marker: { opacity: 1 } },
 		unselected: { marker: { opacity: .25 } },
 		marker: {
-			colors: o === "PIE" ? g : void 0,
-			color: o === "PIE" ? void 0 : g
+			colors: o === "PIE" ? v : void 0,
+			color: o === "PIE" ? void 0 : v
 		}
 	};
 	return {
-		data: [b],
-		labels: d,
-		colors: o === "PIE" ? b.marker?.colors : b.marker?.color
+		data: [T],
+		labels: m,
+		colors: o === "PIE" ? T.marker?.colors : T.marker?.color
 	};
 }
 var I = (e, t, n) => {
@@ -88,6 +91,7 @@ function L(e, t, n) {
 		let r = 1;
 		switch (t) {
 			case "BAR":
+			case "HORIZONTAL_BAR":
 				r = .8;
 				break;
 			case "PIE":
@@ -109,7 +113,7 @@ function L(e, t, n) {
 	};
 }
 function R(e) {
-	let { onHide: t, isModalView: n, applyChangesToGraphSlice: f, index: h, facetToPlot: O, plotType: M, onSetPlotType: N } = e, { accessToken: P } = r(), { data: z, isLoading: B } = c(), [V, H] = j(), { getColumnDisplayName: U } = l(), W = V?.width ? Math.round(V.width) : void 0, [G, K] = v(!1), q = U(O.columnName, O.jsonPath), J = _(() => a(O, z?.columnModels ?? []), [z?.columnModels, O]), Y = J?.columnType, X = _(() => ({
+	let { onHide: t, isModalView: n, applyChangesToGraphSlice: u, index: p, facetToPlot: g, plotType: k, onSetPlotType: M, disableFiltering: N = !1 } = e, { accessToken: P } = i(), { data: z, isLoading: B } = l(), [V, H] = ee(), { getColumnDisplayName: U } = r(), W = V?.width ? Math.round(V.width) : void 0, [G, K] = y(!1), q = U(g.columnName, g.jsonPath), J = v(() => o(g, z?.columnModels ?? []), [z?.columnModels, g]), Y = J?.columnType, X = v(() => ({
 		showlegend: !1,
 		annotations: [],
 		margin: {
@@ -120,114 +124,123 @@ function R(e) {
 			pad: 0
 		},
 		yaxis: {
-			visible: M === "BAR",
+			visible: k === "BAR" || n && k === "HORIZONTAL_BAR",
+			autorange: k === "HORIZONTAL_BAR" ? "reversed" : void 0,
 			showgrid: !1,
 			automargin: !0
 		},
 		xaxis: {
-			visible: n && M === "BAR",
+			visible: n && k === "BAR" || k === "HORIZONTAL_BAR",
 			showgrid: !1,
 			automargin: !0
 		}
-	}), [n, M]), { data: Z } = k({
+	}), [n, k]), { data: Z } = A({
 		queryKey: [
 			"extractPlotDataArray",
-			O,
+			g,
 			Y,
-			h,
-			M,
-			P
+			p,
+			k,
+			P,
+			z?.facetPostProcessingApplied
 		],
-		queryFn: () => F(O, Y, h, M, P),
-		enabled: !!O
-	}), Q = g(), $ = g(), ee = /* @__PURE__ */ D(s, {
+		queryFn: () => F(g, Y, p, k, P, z?.facetPostProcessingApplied),
+		enabled: !!g
+	}), Q = _(), $ = _(), te = /* @__PURE__ */ O(c, {
 		fullWidth: !0,
-		children: [/* @__PURE__ */ E(b, {
+		children: [/* @__PURE__ */ D(x, {
 			id: Q,
 			children: "Chart Type"
-		}), /* @__PURE__ */ D(S, {
+		}), /* @__PURE__ */ O(C, {
 			labelId: Q,
 			label: "Chart Type",
-			value: M,
+			value: k,
 			onChange: (e) => {
-				N(e.target.value);
+				M(e.target.value);
 			},
-			children: [/* @__PURE__ */ E(x, {
-				value: "BAR",
-				children: "Bar Chart"
-			}), /* @__PURE__ */ E(x, {
-				value: "PIE",
-				children: "Pie Chart"
-			})]
+			children: [
+				/* @__PURE__ */ D(S, {
+					value: "BAR",
+					children: "Bar Chart"
+				}),
+				/* @__PURE__ */ D(S, {
+					value: "HORIZONTAL_BAR",
+					children: "Horizontal Bar Chart"
+				}),
+				/* @__PURE__ */ D(S, {
+					value: "PIE",
+					children: "Pie Chart"
+				})
+			]
 		})]
 	});
-	return !z && B || !O || !J ? /* @__PURE__ */ E("div", {
+	return !z && B || !g || !J ? /* @__PURE__ */ D("div", {
 		className: "SRC-loadingContainer SRC-centerContentColumn",
-		children: i
-	}) : /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(o, {
+		children: a
+	}) : /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(s, {
 		open: G,
 		onCancel: () => K(!1),
 		title: q ?? "",
-		content: /* @__PURE__ */ E(R, {
+		content: /* @__PURE__ */ D(R, {
 			...e,
 			isModalView: !0
 		}),
 		hasCancelButton: !1,
-		confirmButtonProps: { children: "Apply Filters" },
+		confirmButtonProps: { children: N ? "Close" : "Apply Filters" },
 		onConfirm: () => K(!1),
 		maxWidth: "md"
-	}), /* @__PURE__ */ D("div", {
+	}), /* @__PURE__ */ O("div", {
 		role: "figure",
 		className: `FacetNavPanel${n ? "--expanded" : ""}`,
 		children: [
-			!n && /* @__PURE__ */ E(p, {
+			!n && /* @__PURE__ */ D(m, {
 				data: z,
 				isLoading: B,
 				title: q,
-				facetToPlot: O,
+				facetToPlot: N ? void 0 : g,
 				onHide: t,
 				setShowModal: K
 			}),
-			n && /* @__PURE__ */ D(C, {
+			n && /* @__PURE__ */ O(w, {
 				sx: { gap: 2 },
-				children: [/* @__PURE__ */ D(s, { children: [/* @__PURE__ */ D(b, {
+				children: [!N && /* @__PURE__ */ O(c, { children: [/* @__PURE__ */ O(x, {
 					id: $,
 					sx: {
 						display: "flex",
 						alignItems: "center",
 						gap: .5
 					},
-					children: [/* @__PURE__ */ E("span", { children: "Filter All Data By" }), /* @__PURE__ */ E(w, {
+					children: [/* @__PURE__ */ D("span", { children: "Filter All Data By" }), /* @__PURE__ */ D(T, {
 						title: "Selecting items in this dropdown will affect all facets on the Explore page.",
-						children: /* @__PURE__ */ E(A, { className: "SRC-hand-cursor SRC-secondary-text-color" })
+						children: /* @__PURE__ */ D(j, { className: "SRC-hand-cursor SRC-secondary-text-color" })
 					})]
-				}), /* @__PURE__ */ E(u, {
+				}), /* @__PURE__ */ D(d, {
 					labelId: $,
-					facet: O,
+					facet: g,
 					containerAs: "Dropdown",
 					dropdownType: "SelectBox"
-				})] }), ee]
+				})] }), te]
 			}),
-			/* @__PURE__ */ D(y, {
+			/* @__PURE__ */ O(b, {
 				sx: {
 					display: "grid",
 					gridTemplateColumns: "50% 50%",
 					alignItems: "center"
 				},
 				role: "graphics-object",
-				className: "FacetNavPanel__body",
-				children: [/* @__PURE__ */ E("div", {
+				className: `FacetNavPanel__body${N ? " FacetNavPanel__body--filteringDisabled" : ""}`,
+				children: [/* @__PURE__ */ D("div", {
 					ref: H,
-					children: W !== void 0 && /* @__PURE__ */ E(d, {
+					children: W !== void 0 && /* @__PURE__ */ D(f, {
 						layout: X,
 						data: Z?.data ?? [],
-						style: L(W, M, n ? 300 : 150),
+						style: L(W, k, n ? 300 : 150),
 						config: { displayModeBar: !1 },
-						onClick: (e) => I(e, O, f)
-					}, `${O.columnName}-${O.jsonPath}-${M}-${W}`)
-				}), /* @__PURE__ */ E(y, {
+						onClick: N ? void 0 : (e) => I(e, g, u)
+					}, `${g.columnName}-${g.jsonPath}-${k}-${W}`)
+				}), /* @__PURE__ */ D(b, {
 					sx: { alignSelf: "center" },
-					children: /* @__PURE__ */ E(m, {
+					children: /* @__PURE__ */ D(h, {
 						labels: Z?.labels,
 						colors: Z?.colors,
 						isExpanded: n

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/InfoOutlined'\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\nexport const MAX_PLOT_HEIGHT_PX = 150\nexport const MAX_EXPANDED_PLOT_HEIGHT_PX = 300\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?.[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  // Wait for a non-zero measured width before rendering the plot.\n  // Round width to avoid rebuilds from small pixel fluctuations.\n  const plotWidth = plotContainerMeasurements?.width\n    ? Math.round(plotContainerMeasurements.width)\n    : undefined\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: 'center',\n            }}\n            role=\"graphics-object\"\n            className=\"FacetNavPanel__body\"\n          >\n            <div ref={plotContainerRef}>\n              {plotWidth !== undefined && (\n                <Plot\n                  key={`${facetToPlot.columnName}-${facetToPlot.jsonPath}-${plotType}-${plotWidth}`}\n                  layout={plotLayout}\n                  data={plotData?.data ?? []}\n                  style={getPlotStyle(\n                    plotWidth,\n                    plotType,\n                    isModalView\n                      ? MAX_EXPANDED_PLOT_HEIGHT_PX\n                      : MAX_PLOT_HEIGHT_PX,\n                  )}\n                  config={{ displayModeBar: false }}\n                  onClick={evt =>\n                    applyFacetFilter(evt, facetToPlot, applyChangesToGraphSlice)\n                  }\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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"}
+{"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 { formatFacetValueCount } from '@/utils/functions/facetCountUtils'\nimport { getCorrespondingColumnForFacet } from '@/utils/functions/queryUtils'\nimport InfoOutlined from '@mui/icons-material/InfoOutlined'\nimport {\n  Box,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n  Tooltip,\n} from '@mui/material'\nimport { EnumerationFacet } from '@/utils/functions/enumerationFacet'\nimport {\n  ColumnTypeEnum,\n  FacetColumnRequest,\n  FacetColumnResultValueCount,\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: EnumerationFacet,\n    value: FacetColumnResultValueCount | undefined,\n    isSelected: boolean,\n  ) => void\n  applyChangesToFacetFilter: (facets: FacetColumnRequest[]) => void\n  index: number\n  facetToPlot: EnumerationFacet\n  plotType: PlotType\n  onSetPlotType: (plotType: PlotType) => void\n  onHide: () => void\n  isModalView: boolean\n  onCloseModal?: () => void\n  /**\n   * When true, the plot cannot change the query: clicking a slice or bar does nothing, and the\n   * filter dropdowns are hidden. Presentation controls (expand, chart type, hide) still work.\n   */\n  disableFiltering?: boolean\n}\n\nconst maxLabelLength: number = 19\nexport const MAX_PLOT_HEIGHT_PX = 150\nexport const MAX_EXPANDED_PLOT_HEIGHT_PX = 300\n\n// STACKED_HORIZONTAL_BAR corresponds to a bar chart where we just want to show the proportion (like a pie chart)\n// HORIZONTAL_BAR has one horizontal bar per value, with the first value at the top\nexport type PlotType =\n  | 'PIE'\n  | 'BAR'\n  | 'HORIZONTAL_BAR'\n  | 'STACKED_HORIZONTAL_BAR'\n\nexport type GraphData = {\n  data: Plotly.Data[]\n  labels: FacetWithLabel[]\n  colors: string[]\n}\n\n/**\n * @param facetPostProcessingApplied the QueryResultBundle's `facetPostProcessingApplied`. When set, counts are shown as\n * approximate (see `formatFacetValueCount`) and pie percentages are omitted.\n */\nexport async function extractPlotDataArray(\n  facetToPlot: EnumerationFacet,\n  columnType: ColumnTypeEnum | undefined,\n  index: number,\n  plotType: PlotType,\n  accessToken?: string,\n  facetPostProcessingApplied?: boolean,\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      countText: formatFacetValueCount(\n        facetValue.count,\n        facetToPlot,\n        facetPostProcessingApplied,\n      ),\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  const valueLabels = facetToPlot.facetValues.map(\n    facet => labels.find(label => label.facet === facet)?.label ?? facet.value,\n  )\n  let x: Plotly.Datum[] | Plotly.Datum[][] | Plotly.TypedArray | undefined\n  let y: Plotly.Datum[] | Plotly.Datum[][] | Plotly.TypedArray | undefined\n  if (plotType === 'BAR') {\n    x = valueLabels\n    y = counts\n  } else if (plotType === 'HORIZONTAL_BAR') {\n    x = counts\n    y = valueLabels\n  } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n    x = counts\n    y = new Array(x.length).fill('Proportional') // single value for every x value\n  }\n\n  // Approximate counts are hovered as their display text, without a misleading exact value or percentage.\n  let exactHoverCount = '%{value}'\n  if (plotType === 'PIE') {\n    exactHoverCount = '%{value} (%{percent})'\n  } else if (plotType === 'HORIZONTAL_BAR') {\n    exactHoverCount = '%{x}'\n  }\n  const hoverCount = facetPostProcessingApplied\n    ? '%{customdata}'\n    : exactHoverCount\n  const singleChartData: Plotly.Data = {\n    values: plotType === 'PIE' ? counts : undefined,\n    labels: labels.map(el => el.label),\n    text,\n    customdata: facetPostProcessingApplied\n      ? labels.map(el => el.countText)\n      : undefined,\n    x,\n    y,\n    orientation:\n      plotType === 'STACKED_HORIZONTAL_BAR' || plotType === 'HORIZONTAL_BAR'\n        ? 'h'\n        : 'v',\n    // @ts-expect-error\n    facetEnumerationValues: facetToPlot.facetValues.map(\n      facetValue => facetValue.value,\n    ),\n    name: facetToPlot.columnName,\n    textposition: plotType === 'PIE' ? 'inside' : 'none',\n    hovertemplate: `<b>%{text}: </b><br>${hoverCount} <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: EnumerationFacet,\n  callbackApplyFn: FacetNavPanelProps['applyChangesToGraphSlice'],\n) => {\n  if (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      case 'HORIZONTAL_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    disableFiltering = false,\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  // Wait for a non-zero measured width before rendering the plot.\n  // Round width to avoid rebuilds from small pixel fluctuations.\n  const plotWidth = plotContainerMeasurements?.width\n    ? Math.round(plotContainerMeasurements.width)\n    : undefined\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        // Show category labels on the y-axis for horizontal bar charts in modal view\n        visible:\n          plotType === 'BAR' || (isModalView && plotType === 'HORIZONTAL_BAR'),\n        autorange: plotType === 'HORIZONTAL_BAR' ? 'reversed' : undefined,\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:\n          (isModalView && plotType === 'BAR') || plotType === 'HORIZONTAL_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      queryMetadata?.facetPostProcessingApplied,\n    ],\n\n    queryFn: () =>\n      extractPlotDataArray(\n        facetToPlot,\n        columnType,\n        index,\n        plotType,\n        accessToken,\n        queryMetadata?.facetPostProcessingApplied,\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={'HORIZONTAL_BAR'}>Horizontal 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={{\n            children: disableFiltering ? 'Close' : 'Apply Filters',\n          }}\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={disableFiltering ? undefined : facetToPlot}\n              onHide={onHide}\n              setShowModal={setShowModal}\n            />\n          )}\n          {isModalView && (\n            <Stack\n              sx={{\n                gap: 2,\n              }}\n            >\n              {!disableFiltering && (\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              )}\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${disableFiltering ? ' FacetNavPanel__body--filteringDisabled' : ''}`}\n          >\n            <div ref={plotContainerRef}>\n              {plotWidth !== undefined && (\n                <Plot\n                  key={`${facetToPlot.columnName}-${facetToPlot.jsonPath}-${plotType}-${plotWidth}`}\n                  layout={plotLayout}\n                  data={plotData?.data ?? []}\n                  style={getPlotStyle(\n                    plotWidth,\n                    plotType,\n                    isModalView\n                      ? MAX_EXPANDED_PLOT_HEIGHT_PX\n                      : MAX_PLOT_HEIGHT_PX,\n                  )}\n                  config={{ displayModeBar: false }}\n                  onClick={\n                    disableFiltering\n                      ? undefined\n                      : evt =>\n                          applyFacetFilter(\n                            evt,\n                            facetToPlot,\n                            applyChangesToGraphSlice,\n                          )\n                  }\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/FacetPlotLegendList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotLegendList.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAE7D,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,oBAAoB,2CAiE9D"}
+{"version":3,"file":"FacetPlotLegendList.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAE7D,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,oBAAoB,2CAsE9D"}