synapse-react-client 4.0.45 → 4.0.47

package/dist/components/widgets/ElementWithTooltip.js

@@ -16,33 +16,41 @@ function l(t, n, r) {
 		}
 	});
 }
-var u = ({ image: e, callbackFn: u, tooltipText: d, className: f = "", imageColor: p, tooltipVisualProps: m = c, children: h, darkTheme: g, size: _, icon: v, menuItems: y }) => {
-	let { place: b } = m, x = (v ? typeof v == "string" ? /* @__PURE__ */ o(t, { type: v }) : v : void 0) || (e ? l(e, p, _) : h || /* @__PURE__ */ o(a, {})), [S, C] = n(null), w = !!S, T = (e) => {
-		C(e.currentTarget);
-	}, E = () => {
-		C(null);
-	}, D;
-	return D = h ? /* @__PURE__ */ o("div", {
+var u = ({ image: e, callbackFn: u, tooltipText: d, className: f = "", imageColor: p, tooltipVisualProps: m = c, children: h, darkTheme: g, size: _, icon: v, menuItems: y, closeMenuOnClick: b = !1 }) => {
+	let { place: x } = m, S = (v ? typeof v == "string" ? /* @__PURE__ */ o(t, { type: v }) : v : void 0) || (e ? l(e, p, _) : h || /* @__PURE__ */ o(a, {})), [C, w] = n(null), T = !!C, E = (e) => {
+		w(e.currentTarget);
+	}, D = () => {
+		w(null);
+	}, O = (e, t) => {
+		let n = e.target;
+		e.key === t && n.closest("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") && D();
+	}, k;
+	return k = h ? /* @__PURE__ */ o("div", {
 		className: "SRC-hand-cursor",
 		children: h
 	}) : /* @__PURE__ */ o("button", {
 		tabIndex: 0,
 		className: `ElementWithTooltip SRC-hand-cursor SRC-grey-background-hover ${f} ${g ? "dark-theme" : ""} `,
 		onClick: (e) => {
-			u ? u() : T(e);
+			u ? u() : E(e);
 		},
 		"aria-label": d,
-		children: x
+		children: S
 	}), /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(i, {
 		title: d,
 		enterNextDelay: 500,
-		placement: b,
+		placement: x,
 		"data-testid": "ElementTooltip",
-		children: D
+		children: k
 	}), y && /* @__PURE__ */ o(r, {
-		anchorEl: S,
-		open: w,
-		onClose: E,
+		anchorEl: C,
+		open: T,
+		onClose: D,
+		slotProps: { list: b ? {
+			onClick: D,
+			onKeyDown: (e) => O(e, "Enter"),
+			onKeyUp: (e) => O(e, " ")
+		} : void 0 },
 		children: y
 	})] });
 };

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 { InfoOutlined as A } from "@mui/icons-material";
-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