synapse-react-client 4.0.19 → 4.0.20

package/dist/components/utils/VisibilityObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityObserver.js","names":[],"sources":["../../../src/components/utils/VisibilityObserver.tsx"],"sourcesContent":["/** Originally from YamUI.  May need to alter to update to later versions of react-intersection-observer (which does the heavy lifting).\n * This component has the option to provide an outOfView renderer, which might be useful in the future.\n */\nimport { Component, ReactNode, RefObject } from 'react'\nimport { InView } from 'react-intersection-observer'\n\nexport interface BaseComponentProps {\n  /**\n   * One or more class names to be added to the root element of this component, i.e.\n   * `\"class-one class-two\"`.\n   */\n  className?: string\n}\n\nexport interface NestableBaseComponentProps extends BaseComponentProps {\n  /**\n   * Elements to be rendered as children of this component.\n   */\n  children?: ReactNode\n}\n\nexport interface VisibilityObserverProps extends BaseComponentProps {\n  /**\n   * A callback which will be triggered when the component is scrolled into view.\n   */\n  onEnterView?: () => void\n\n  /**\n   * A callback which will be triggered when the component is scrolled out of view.\n   */\n  onLeaveView?: () => void\n\n  /**\n   * Render prop to return child content when the component is visible in the viewport. Once the component\n   * has been in view it will always use this render prop, even when scrolled back out of view.\n   */\n  renderInView?: () => ReactNode\n\n  /**\n   * Render prop to return child content before the component becomes visible in the viewport.\n   */\n  renderOutOfView?: () => ReactNode\n\n  /**\n   * Wrapper element tag name.\n   * @default 'div'\n   */\n  tag?: string\n\n  /**\n   * A CSS margin string which pushes the intersection boundary further in or out of the viewport.\n   * A positive value will expand the viewport threshold so your component is considered \"in view\" while it's\n   * still offscreen, for example you could set thresholdOffset=\"200px\" you want an image to start loading before\n   * it scrolls into view. A negative value will move the boundary into the viewport, triggering \"in view\" after\n   * it's already becoming visible.\n   * \"200px\", \"200px 0 50px 0\", \"-50px\" are all valid values.\n   */\n  rootMargin?: string\n}\n\nexport interface VisibilityObserverState {\n  hasBeenInView: boolean\n}\n\n/**\n * VisibilityObserver uses the IntersectionObserver API to allow conditional child rendering and callbacks based\n * on viewport visibility. It will render the `renderOutOfView` prop until it is scrolled into view, then will\n * always render the `renderInView` prop instead. Callbacks will always be triggered on visibility changes.\n */\nexport default class VisibilityObserver extends Component<\n  VisibilityObserverProps,\n  VisibilityObserverState\n> {\n  constructor(props: VisibilityObserverProps) {\n    super(props)\n    this.state = {\n      hasBeenInView: false,\n    }\n  }\n\n  public render() {\n    const { rootMargin, tag } = this.props\n\n    return (\n      <InView\n        as={(tag as any) || 'div'}\n        rootMargin={rootMargin}\n        onChange={this.onVisibilityChange}\n      >\n        {this.getObserverChildren}\n      </InView>\n    )\n  }\n\n  private getObserverChildren = (renderProps: {\n    inView: boolean\n    entry: IntersectionObserverEntry | undefined\n    ref: RefObject<any> | ((node?: Element | null) => void)\n  }) => {\n    const { renderInView, renderOutOfView } = this.props\n    const shouldRenderAsInView = renderProps.inView || this.state.hasBeenInView\n\n    if (shouldRenderAsInView && renderInView) {\n      return renderInView()\n    }\n\n    if (!renderProps.inView && renderOutOfView) {\n      return renderOutOfView()\n    }\n\n    return null\n  }\n\n  private onVisibilityChange = (isVisible: boolean) => {\n    if (isVisible) {\n      this.setState({ hasBeenInView: true })\n      if (this.props.onEnterView) {\n        this.props.onEnterView()\n      }\n    } else {\n      if (this.props.onLeaveView) {\n        this.props.onLeaveView()\n      }\n    }\n  }\n}\n"],"mappings":";;;;AAqEA,IAAqB,IAArB,cAAgD,EAG9C;CACA,YAAY,GAAgC;AAE1C,EADA,MAAM,EAAM,EACZ,KAAK,QAAQ,EACX,eAAe,IAChB;;CAGH,SAAgB;EACd,IAAM,EAAE,eAAY,WAAQ,KAAK;AAEjC,SACE,kBAAC,GAAD;GACE,IAAK,KAAe;GACR;GACZ,UAAU,KAAK;aAEd,KAAK;GACC,CAAA;;CAIb,uBAA+B,MAIzB;EACJ,IAAM,EAAE,iBAAc,uBAAoB,KAAK;AAW/C,UAV6B,EAAY,UAAU,KAAK,MAAM,kBAElC,IACnB,GAAc,GAGnB,CAAC,EAAY,UAAU,IAClB,GAAiB,GAGnB;;CAGT,sBAA8B,MAAuB;AACnD,EAAI,KACF,KAAK,SAAS,EAAE,eAAe,IAAM,CAAC,EAClC,KAAK,MAAM,eACb,KAAK,MAAM,aAAa,IAGtB,KAAK,MAAM,eACb,KAAK,MAAM,aAAa"}
+{"version":3,"file":"VisibilityObserver.js","names":[],"sources":["../../../src/components/utils/VisibilityObserver.tsx"],"sourcesContent":["/** Originally from YamUI.  May need to alter to update to later versions of react-intersection-observer (which does the heavy lifting).\n * This component has the option to provide an outOfView renderer, which might be useful in the future.\n */\nimport { Component, ReactNode, RefObject } from 'react'\nimport { InView } from 'react-intersection-observer'\n\nexport interface BaseComponentProps {\n  /**\n   * One or more class names to be added to the root element of this component, i.e.\n   * `\"class-one class-two\"`.\n   */\n  className?: string\n}\n\nexport interface NestableBaseComponentProps extends BaseComponentProps {\n  /**\n   * Elements to be rendered as children of this component.\n   */\n  children?: ReactNode\n}\n\nexport interface VisibilityObserverProps extends BaseComponentProps {\n  /**\n   * A callback which will be triggered when the component is scrolled into view.\n   */\n  onEnterView?: () => void\n\n  /**\n   * A callback which will be triggered when the component is scrolled out of view.\n   */\n  onLeaveView?: () => void\n\n  /**\n   * Render prop to return child content when the component is visible in the viewport. Once the component\n   * has been in view it will always use this render prop, even when scrolled back out of view.\n   */\n  renderInView?: () => ReactNode\n\n  /**\n   * Render prop to return child content before the component becomes visible in the viewport.\n   */\n  renderOutOfView?: () => ReactNode\n\n  /**\n   * Wrapper element tag name.\n   * @default 'div'\n   */\n  tag?: string\n\n  /**\n   * A CSS margin string which pushes the intersection boundary further in or out of the viewport.\n   * A positive value will expand the viewport threshold so your component is considered \"in view\" while it's\n   * still offscreen, for example you could set thresholdOffset=\"200px\" you want an image to start loading before\n   * it scrolls into view. A negative value will move the boundary into the viewport, triggering \"in view\" after\n   * it's already becoming visible.\n   * \"200px\", \"200px 0 50px 0\", \"-50px\" are all valid values.\n   */\n  rootMargin?: string\n}\n\nexport interface VisibilityObserverState {\n  hasBeenInView: boolean\n}\n\n/**\n * VisibilityObserver uses the IntersectionObserver API to allow conditional child rendering and callbacks based\n * on viewport visibility. It will render the `renderOutOfView` prop until it is scrolled into view, then will\n * always render the `renderInView` prop instead. Callbacks will always be triggered on visibility changes.\n */\nexport default class VisibilityObserver extends Component<\n  VisibilityObserverProps,\n  VisibilityObserverState\n> {\n  constructor(props: VisibilityObserverProps) {\n    super(props)\n    this.state = {\n      hasBeenInView: false,\n    }\n  }\n\n  public render() {\n    const { rootMargin, tag } = this.props\n\n    return (\n      <InView\n        as={(tag as any) || 'div'}\n        rootMargin={rootMargin}\n        onChange={this.onVisibilityChange}\n      >\n        {this.getObserverChildren}\n      </InView>\n    )\n  }\n\n  private getObserverChildren = (renderProps: {\n    inView: boolean\n    entry: IntersectionObserverEntry | undefined\n    ref: RefObject<any> | ((node?: Element | null) => void)\n  }) => {\n    const { renderInView, renderOutOfView } = this.props\n    const shouldRenderAsInView = renderProps.inView || this.state.hasBeenInView\n\n    if (shouldRenderAsInView && renderInView) {\n      return renderInView()\n    }\n\n    if (!renderProps.inView && renderOutOfView) {\n      return renderOutOfView()\n    }\n\n    return null\n  }\n\n  private onVisibilityChange = (isVisible: boolean) => {\n    if (isVisible) {\n      this.setState({ hasBeenInView: true })\n      if (this.props.onEnterView) {\n        this.props.onEnterView()\n      }\n    } else {\n      if (this.props.onLeaveView) {\n        this.props.onLeaveView()\n      }\n    }\n  }\n}\n"],"mappings":";;;;AAqEA,IAAqB,IAArB,cAAgD,EAG9C;CACA,YAAY,GAAgC;EAE1C,AADA,MAAM,CAAK,GACX,KAAK,QAAQ,EACX,eAAe,GACjB;CACF;CAEA,SAAgB;EACd,IAAM,EAAE,eAAY,WAAQ,KAAK;EAEjC,OACE,kBAAC,GAAD;GACE,IAAK,KAAe;GACR;GACZ,UAAU,KAAK;aAEd,KAAK;EACA,CAAA;CAEZ;CAEA,uBAA+B,MAIzB;EACJ,IAAM,EAAE,iBAAc,uBAAoB,KAAK;EAW/C,QAV6B,EAAY,UAAU,KAAK,MAAM,kBAElC,IACnB,EAAa,IAGlB,CAAC,EAAY,UAAU,IAClB,EAAgB,IAGlB;CACT;CAEA,sBAA8B,MAAuB;EACnD,AAAI,KACF,KAAK,SAAS,EAAE,eAAe,GAAK,CAAC,GACjC,KAAK,MAAM,eACb,KAAK,MAAM,YAAY,KAGrB,KAAK,MAAM,eACb,KAAK,MAAM,YAAY;CAG7B;AACF"}

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,OACR;AAyBD,SAAS,EACP,GACA,GACA,GACA;AAIE,QAHE,YAAY,IACP,EAAM,SAEN,kBAAC,GAAD;EAAS,GAAI;EAAO,IAAI;GAAE,OAAO;GAAY,OAAO;GAAM;EAAI,CAAA;;AAIzE,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,GAAa,CAAA,GAEzB,IAEA,KAAA,OAGA,IACE,EAA0B,GAAO,GAAY,EAAK,GAClD,KAAY,kBAAA,GAAA,EAAK,CAAA,GAEjB,CAAC,GAAU,KAAe,EAA6B,KAAK,EAC5D,IAAO,EAAQ,GACf,KAAe,MAAyC;AAC5D,IAAY,EAAM,cAAc;IAE5B,UAAoB;AACxB,IAAY,KAAK;IAIf;AAyBJ,QAxBA,AACE,IADG,IAqBc,kBAAC,OAAD;EAAK,WAAU;EAAmB;EAAe,CAAA,GAnBhE,kBAAC,UAAD;EACE,UAAU;EACV,WAAW,gEAAgE,EAAU,GACnF,IAAY,eAAe,GAC5B;EACD,UAAS,MAAK;AACZ,GAAI,IACF,GAAY,GAGZ,EAAY,EAAE;;EAGlB,cAAY;YAEX;EACM,CAAA,EAOX,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,OAAO;EACP,gBAAA;EACA,WAAW;EACX,eAAY;YAEX;EACO,CAAA,EACT,KACC,kBAAC,GAAD;EAAgB;EAAgB;EAAM,SAAS;YAC5C;EACI,CAAA,CAER,EAAA,CAAA"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"EntityColumnImage.js","names":[],"sources":["../../../src/components/widgets/EntityColumnImage.tsx"],"sourcesContent":["import React from 'react'\nimport { useGetEntity } from '@/synapse-queries'\nimport { Box } from '@mui/system'\nimport { FileHandleAssociateType } from '@sage-bionetworks/synapse-types'\nimport { useState } from 'react'\nimport { ImageFileHandle } from './ImageFileHandle'\n\ntype EntityColumnImageProps = {\n  entityId: string\n}\n\nexport const EntityColumnImage = (\n  props: EntityColumnImageProps,\n): React.ReactNode => {\n  const { entityId } = props\n  const [isExpanded, setIsExpanded] = useState(false)\n\n  const { data: entity } = useGetEntity(entityId.toString())\n\n  const isFileHandleDefined = entity && 'dataFileHandleId' in entity\n  const fileHandleId = isFileHandleDefined\n    ? (entity.dataFileHandleId as string)\n    : undefined\n\n  if (fileHandleId) {\n    return (\n      <Box\n        sx={{\n          img: {\n            height: isExpanded ? 'auto' : '100px',\n          },\n          display: 'grid',\n          gridTemplateColumns: 'auto 15px',\n        }}\n      >\n        <button onClick={() => setIsExpanded(!isExpanded)}>\n          <ImageFileHandle\n            fileHandleAssociation={{\n              associateObjectId: entityId.toString(),\n              associateObjectType: FileHandleAssociateType.FileEntity,\n              fileHandleId: fileHandleId,\n            }}\n          />\n        </button>\n      </Box>\n    )\n  } else {\n    return <></>\n  }\n}\n"],"mappings":";;;;;;;;AAWA,IAAa,KACX,MACoB;CACpB,IAAM,EAAE,gBAAa,GACf,CAAC,GAAY,KAAiB,EAAS,GAAM,EAE7C,EAAE,MAAM,MAAW,EAAa,EAAS,UAAU,CAAC,EAGpD,IADsB,KAAU,sBAAsB,IAEvD,EAAO,mBACR,KAAA;AAyBF,QAvBE,IAEA,kBAAC,GAAD;EACE,IAAI;GACF,KAAK,EACH,QAAQ,IAAa,SAAS,SAC/B;GACD,SAAS;GACT,qBAAqB;GACtB;YAED,kBAAC,UAAD;GAAQ,eAAe,EAAc,CAAC,EAAW;aAC/C,kBAAC,GAAD,EACE,uBAAuB;IACrB,mBAAmB,EAAS,UAAU;IACtC,qBAAqB,EAAwB;IAC/B;IACf,EACD,CAAA;GACK,CAAA;EACL,CAAA,GAGD,kBAAA,GAAA,EAAK,CAAA"}
+{"version":3,"file":"EntityColumnImage.js","names":[],"sources":["../../../src/components/widgets/EntityColumnImage.tsx"],"sourcesContent":["import React from 'react'\nimport { useGetEntity } from '@/synapse-queries'\nimport { Box } from '@mui/system'\nimport { FileHandleAssociateType } from '@sage-bionetworks/synapse-types'\nimport { useState } from 'react'\nimport { ImageFileHandle } from './ImageFileHandle'\n\ntype EntityColumnImageProps = {\n  entityId: string\n}\n\nexport const EntityColumnImage = (\n  props: EntityColumnImageProps,\n): React.ReactNode => {\n  const { entityId } = props\n  const [isExpanded, setIsExpanded] = useState(false)\n\n  const { data: entity } = useGetEntity(entityId.toString())\n\n  const isFileHandleDefined = entity && 'dataFileHandleId' in entity\n  const fileHandleId = isFileHandleDefined\n    ? (entity.dataFileHandleId as string)\n    : undefined\n\n  if (fileHandleId) {\n    return (\n      <Box\n        sx={{\n          img: {\n            height: isExpanded ? 'auto' : '100px',\n          },\n          display: 'grid',\n          gridTemplateColumns: 'auto 15px',\n        }}\n      >\n        <button onClick={() => setIsExpanded(!isExpanded)}>\n          <ImageFileHandle\n            fileHandleAssociation={{\n              associateObjectId: entityId.toString(),\n              associateObjectType: FileHandleAssociateType.FileEntity,\n              fileHandleId: fileHandleId,\n            }}\n          />\n        </button>\n      </Box>\n    )\n  } else {\n    return <></>\n  }\n}\n"],"mappings":";;;;;;;;AAWA,IAAa,KACX,MACoB;CACpB,IAAM,EAAE,gBAAa,GACf,CAAC,GAAY,KAAiB,EAAS,EAAK,GAE5C,EAAE,MAAM,MAAW,EAAa,EAAS,SAAS,CAAC,GAGnD,IADsB,KAAU,sBAAsB,IAEvD,EAAO,mBACR,KAAA;CAyBF,OAvBE,IAEA,kBAAC,GAAD;EACE,IAAI;GACF,KAAK,EACH,QAAQ,IAAa,SAAS,QAChC;GACA,SAAS;GACT,qBAAqB;EACvB;YAEA,kBAAC,UAAD;GAAQ,eAAe,EAAc,CAAC,CAAU;aAC9C,kBAAC,GAAD,EACE,uBAAuB;IACrB,mBAAmB,EAAS,SAAS;IACrC,qBAAqB,EAAwB;IAC/B;GAChB,EACD,CAAA;EACK,CAAA;CACL,CAAA,IAGA,kBAAA,GAAA,CAAI,CAAA;AAEf"}

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

@@ -1 +1 @@
-{"version":3,"file":"FileHandleLink.js","names":[],"sources":["../../../src/components/widgets/FileHandleLink.tsx"],"sourcesContent":["import React from 'react'\nimport SynapseClient from '@/synapse-client'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  BatchFileRequest,\n  BatchFileResult,\n  FileHandleAssociation,\n} from '@sage-bionetworks/synapse-types'\nimport { useEffect, useState } from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\n\ntype FileHandleLinkProps = {\n  fileHandleAssociation: FileHandleAssociation\n  redirect?: boolean\n  showDownloadIcon: boolean\n  displayValue?: string\n}\nexport const FileHandleLink = (props: FileHandleLinkProps): React.ReactNode => {\n  const {\n    fileHandleAssociation,\n    showDownloadIcon,\n    redirect = false,\n    displayValue,\n  } = props\n  const { accessToken } = useSynapseContext()\n\n  const [batchFileResult, setBatchFileResult] = useState<\n    BatchFileResult | undefined\n  >()\n\n  useEffect(() => {\n    if (displayValue === undefined) {\n      const getFiles = async () => {\n        const batchFileRequest: BatchFileRequest = {\n          requestedFiles: [fileHandleAssociation],\n          includeFileHandles: true,\n          includePreSignedURLs: false,\n          includePreviewPreSignedURLs: false,\n        }\n        setBatchFileResult(\n          await SynapseClient.getFiles(batchFileRequest, accessToken),\n        )\n      }\n      getFiles()\n    }\n  }, [accessToken, displayValue, fileHandleAssociation])\n\n  let fileName: string | undefined = undefined\n  if (batchFileResult) {\n    fileName = batchFileResult.requestedFiles[0].fileHandle?.fileName\n  }\n\n  return (\n    <button\n      onClick={() => {\n        if (accessToken && fileHandleAssociation) {\n          SynapseClient.getActualFileHandleByIdURL(\n            fileHandleAssociation.fileHandleId,\n            accessToken,\n            fileHandleAssociation.associateObjectType,\n            fileHandleAssociation.associateObjectId,\n            redirect,\n          )\n            .then(url => {\n              window.open(url, '_blank')\n            })\n            .catch(err => {\n              console.error('Error on retrieving file handle url ', err)\n            })\n        }\n      }}\n      className={`SRC-primary-text-color ${SynapseConstants.SRC_SIGN_IN_CLASS}`}\n      type=\"button\"\n      style={{ padding: 0 }}\n    >\n      {displayValue ?? fileName ?? fileHandleAssociation.fileHandleId}\n      {showDownloadIcon && <IconSvg icon=\"download\" />}\n    </button>\n  )\n}\n"],"mappings":";;;;;;;;AAkBA,IAAa,KAAkB,MAAgD;CAC7E,IAAM,EACJ,0BACA,qBACA,cAAW,IACX,oBACE,GACE,EAAE,mBAAgB,GAAmB,EAErC,CAAC,GAAiB,KAAsB,GAE3C;AAEH,SAAgB;AACd,EAAI,MAAiB,KAAA,MAYnB,YAX6B;GAC3B,IAAM,IAAqC;IACzC,gBAAgB,CAAC,EAAsB;IACvC,oBAAoB;IACpB,sBAAsB;IACtB,6BAA6B;IAC9B;AACD,KACE,MAAM,EAAc,SAAS,GAAkB,EAAY,CAC5D;MAEO;IAEX;EAAC;EAAa;EAAc;EAAsB,CAAC;CAEtD,IAAI;AAKJ,QAJI,MACF,IAAW,EAAgB,eAAe,GAAG,YAAY,WAIzD,kBAAC,UAAD;EACE,eAAe;AACb,GAAI,KAAe,KACjB,EAAc,2BACZ,EAAsB,cACtB,GACA,EAAsB,qBACtB,EAAsB,mBACtB,EACD,CACE,MAAK,MAAO;AACX,WAAO,KAAK,GAAK,SAAS;KAC1B,CACD,OAAM,MAAO;AACZ,YAAQ,MAAM,wCAAwC,EAAI;KAC1D;;EAGR,WAAW,0BAA0B;EACrC,MAAK;EACL,OAAO,EAAE,SAAS,GAAG;YApBvB,CAsBG,KAAgB,KAAY,EAAsB,cAClD,KAAoB,kBAAC,GAAD,EAAS,MAAK,YAAa,CAAA,CACzC"}
+{"version":3,"file":"FileHandleLink.js","names":[],"sources":["../../../src/components/widgets/FileHandleLink.tsx"],"sourcesContent":["import React from 'react'\nimport SynapseClient from '@/synapse-client'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  BatchFileRequest,\n  BatchFileResult,\n  FileHandleAssociation,\n} from '@sage-bionetworks/synapse-types'\nimport { useEffect, useState } from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\n\ntype FileHandleLinkProps = {\n  fileHandleAssociation: FileHandleAssociation\n  redirect?: boolean\n  showDownloadIcon: boolean\n  displayValue?: string\n}\nexport const FileHandleLink = (props: FileHandleLinkProps): React.ReactNode => {\n  const {\n    fileHandleAssociation,\n    showDownloadIcon,\n    redirect = false,\n    displayValue,\n  } = props\n  const { accessToken } = useSynapseContext()\n\n  const [batchFileResult, setBatchFileResult] = useState<\n    BatchFileResult | undefined\n  >()\n\n  useEffect(() => {\n    if (displayValue === undefined) {\n      const getFiles = async () => {\n        const batchFileRequest: BatchFileRequest = {\n          requestedFiles: [fileHandleAssociation],\n          includeFileHandles: true,\n          includePreSignedURLs: false,\n          includePreviewPreSignedURLs: false,\n        }\n        setBatchFileResult(\n          await SynapseClient.getFiles(batchFileRequest, accessToken),\n        )\n      }\n      getFiles()\n    }\n  }, [accessToken, displayValue, fileHandleAssociation])\n\n  let fileName: string | undefined = undefined\n  if (batchFileResult) {\n    fileName = batchFileResult.requestedFiles[0].fileHandle?.fileName\n  }\n\n  return (\n    <button\n      onClick={() => {\n        if (accessToken && fileHandleAssociation) {\n          SynapseClient.getActualFileHandleByIdURL(\n            fileHandleAssociation.fileHandleId,\n            accessToken,\n            fileHandleAssociation.associateObjectType,\n            fileHandleAssociation.associateObjectId,\n            redirect,\n          )\n            .then(url => {\n              window.open(url, '_blank')\n            })\n            .catch(err => {\n              console.error('Error on retrieving file handle url ', err)\n            })\n        }\n      }}\n      className={`SRC-primary-text-color ${SynapseConstants.SRC_SIGN_IN_CLASS}`}\n      type=\"button\"\n      style={{ padding: 0 }}\n    >\n      {displayValue ?? fileName ?? fileHandleAssociation.fileHandleId}\n      {showDownloadIcon && <IconSvg icon=\"download\" />}\n    </button>\n  )\n}\n"],"mappings":";;;;;;;;AAkBA,IAAa,KAAkB,MAAgD;CAC7E,IAAM,EACJ,0BACA,qBACA,cAAW,IACX,oBACE,GACE,EAAE,mBAAgB,EAAkB,GAEpC,CAAC,GAAiB,KAAsB,EAE5C;CAEF,QAAgB;EACd,AAAI,MAAiB,KAAA,MAYnB,YAX6B;GAC3B,IAAM,IAAqC;IACzC,gBAAgB,CAAC,CAAqB;IACtC,oBAAoB;IACpB,sBAAsB;IACtB,6BAA6B;GAC/B;GACA,EACE,MAAM,EAAc,SAAS,GAAkB,CAAW,CAC5D;EACF,GACS;CAEb,GAAG;EAAC;EAAa;EAAc;CAAqB,CAAC;CAErD,IAAI;CAKJ,OAJI,MACF,IAAW,EAAgB,eAAe,GAAG,YAAY,WAIzD,kBAAC,UAAD;EACE,eAAe;GACb,AAAI,KAAe,KACjB,EAAc,2BACZ,EAAsB,cACtB,GACA,EAAsB,qBACtB,EAAsB,mBACtB,CACF,EACG,MAAK,MAAO;IACX,OAAO,KAAK,GAAK,QAAQ;GAC3B,CAAC,EACA,OAAM,MAAO;IACZ,QAAQ,MAAM,wCAAwC,CAAG;GAC3D,CAAC;EAEP;EACA,WAAW,0BAA0B;EACrC,MAAK;EACL,OAAO,EAAE,SAAS,EAAE;YApBtB,CAsBG,KAAgB,KAAY,EAAsB,cAClD,KAAoB,kBAAC,GAAD,EAAS,MAAK,WAAY,CAAA,CACzC;;AAEZ"}

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

@@ -1 +1 @@
-{"version":3,"file":"ImageFileHandle.js","names":[],"sources":["../../../src/components/widgets/ImageFileHandle.tsx"],"sourcesContent":["import React from 'react'\nimport SynapseClient from '@/synapse-client'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { FileHandleAssociation } from '@sage-bionetworks/synapse-types'\nimport { ComponentProps, useEffect, useState } from 'react'\nimport { useInView } from 'react-intersection-observer'\n\ntype ImageFileHandleProps = {\n  fileHandleAssociation: FileHandleAssociation\n  imgProps?: ComponentProps<'img'>\n}\n\nexport const ImageFileHandle = (\n  props: ImageFileHandleProps,\n): React.ReactNode => {\n  const {\n    fileHandleAssociation: {\n      fileHandleId,\n      associateObjectId,\n      associateObjectType,\n    },\n    imgProps,\n  } = props\n  const { accessToken } = useSynapseContext()\n  const [url, setUrl] = useState<string>()\n  const { ref, inView } = useInView({\n    triggerOnce: true,\n    rootMargin: '500px 0px',\n  })\n\n  // Clear the url if the fileHandleId changes to avoid showing the wrong image while loading the new one\n  useEffect(() => {\n    if (!fileHandleId) {\n      setUrl(undefined)\n    }\n  }, [fileHandleId])\n\n  useEffect(() => {\n    const getData = () => {\n      if (fileHandleId && associateObjectId && associateObjectType && inView) {\n        SynapseClient.getActualFileHandleByIdURL(\n          fileHandleId,\n          accessToken,\n          associateObjectType,\n          associateObjectId,\n          false,\n        )\n          .then(url => {\n            setUrl(url)\n          })\n          .catch(err => {\n            console.error('Error on retrieving file handle url ', err)\n          })\n      }\n    }\n\n    getData()\n  }, [\n    inView,\n    fileHandleId,\n    associateObjectId,\n    accessToken,\n    associateObjectType,\n  ])\n\n  return (\n    <span ref={ref}>\n      {url && (\n        <img\n          className=\"ImageFileHandle\"\n          src={url}\n          alt=\"\"\n          loading=\"lazy\"\n          {...imgProps}\n        ></img>\n      )}\n    </span>\n  )\n}\n"],"mappings":";;;;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,uBAAuB,EACrB,iBACA,sBACA,0BAEF,gBACE,GACE,EAAE,mBAAgB,GAAmB,EACrC,CAAC,GAAK,KAAU,GAAkB,EAClC,EAAE,QAAK,cAAW,EAAU;EAChC,aAAa;EACb,YAAY;EACb,CAAC;AAqCF,QAlCA,QAAgB;AACd,EAAK,KACH,EAAO,KAAA,EAAU;IAElB,CAAC,EAAa,CAAC,EAElB,QAAgB;AAmBd,EAjBM,KAAgB,KAAqB,KAAuB,KAC9D,EAAc,2BACZ,GACA,GACA,GACA,GACA,GACD,CACE,MAAK,MAAO;AACX,KAAO,EAAI;IACX,CACD,OAAM,MAAO;AACZ,WAAQ,MAAM,wCAAwC,EAAI;IAC1D;IAKP;EACD;EACA;EACA;EACA;EACA;EACD,CAAC,EAGA,kBAAC,QAAD;EAAW;YACR,KACC,kBAAC,OAAD;GACE,WAAU;GACV,KAAK;GACL,KAAI;GACJ,SAAQ;GACR,GAAI;GACC,CAAA;EAEJ,CAAA"}
+{"version":3,"file":"ImageFileHandle.js","names":[],"sources":["../../../src/components/widgets/ImageFileHandle.tsx"],"sourcesContent":["import React from 'react'\nimport SynapseClient from '@/synapse-client'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { FileHandleAssociation } from '@sage-bionetworks/synapse-types'\nimport { ComponentProps, useEffect, useState } from 'react'\nimport { useInView } from 'react-intersection-observer'\n\ntype ImageFileHandleProps = {\n  fileHandleAssociation: FileHandleAssociation\n  imgProps?: ComponentProps<'img'>\n}\n\nexport const ImageFileHandle = (\n  props: ImageFileHandleProps,\n): React.ReactNode => {\n  const {\n    fileHandleAssociation: {\n      fileHandleId,\n      associateObjectId,\n      associateObjectType,\n    },\n    imgProps,\n  } = props\n  const { accessToken } = useSynapseContext()\n  const [url, setUrl] = useState<string>()\n  const { ref, inView } = useInView({\n    triggerOnce: true,\n    rootMargin: '500px 0px',\n  })\n\n  // Clear the url if the fileHandleId changes to avoid showing the wrong image while loading the new one\n  useEffect(() => {\n    if (!fileHandleId) {\n      setUrl(undefined)\n    }\n  }, [fileHandleId])\n\n  useEffect(() => {\n    const getData = () => {\n      if (fileHandleId && associateObjectId && associateObjectType && inView) {\n        SynapseClient.getActualFileHandleByIdURL(\n          fileHandleId,\n          accessToken,\n          associateObjectType,\n          associateObjectId,\n          false,\n        )\n          .then(url => {\n            setUrl(url)\n          })\n          .catch(err => {\n            console.error('Error on retrieving file handle url ', err)\n          })\n      }\n    }\n\n    getData()\n  }, [\n    inView,\n    fileHandleId,\n    associateObjectId,\n    accessToken,\n    associateObjectType,\n  ])\n\n  return (\n    <span ref={ref}>\n      {url && (\n        <img\n          className=\"ImageFileHandle\"\n          src={url}\n          alt=\"\"\n          loading=\"lazy\"\n          {...imgProps}\n        ></img>\n      )}\n    </span>\n  )\n}\n"],"mappings":";;;;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,uBAAuB,EACrB,iBACA,sBACA,0BAEF,gBACE,GACE,EAAE,mBAAgB,EAAkB,GACpC,CAAC,GAAK,KAAU,EAAiB,GACjC,EAAE,QAAK,cAAW,EAAU;EAChC,aAAa;EACb,YAAY;CACd,CAAC;CAqCD,OAlCA,QAAgB;EACd,AAAK,KACH,EAAO,KAAA,CAAS;CAEpB,GAAG,CAAC,CAAY,CAAC,GAEjB,QAAgB;EAmBd,AAjBM,KAAgB,KAAqB,KAAuB,KAC9D,EAAc,2BACZ,GACA,GACA,GACA,GACA,EACF,EACG,MAAK,MAAO;GACX,EAAO,CAAG;EACZ,CAAC,EACA,OAAM,MAAO;GACZ,QAAQ,MAAM,wCAAwC,CAAG;EAC3D,CAAC;CAKT,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC,GAGC,kBAAC,QAAD;EAAW;YACR,KACC,kBAAC,OAAD;GACE,WAAU;GACV,KAAK;GACL,KAAI;GACJ,SAAQ;GACR,GAAI;EACA,CAAA;CAEJ,CAAA;AAEV"}

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

@@ -1 +1 @@
-{"version":3,"file":"LoginAwareButton.js","names":[],"sources":["../../../src/components/widgets/LoginAwareButton.tsx"],"sourcesContent":["import { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { SRC_SIGN_IN_CLASS } from '@/utils/SynapseConstants'\nimport { Button, ButtonProps } from '@mui/material'\nimport React from 'react'\nimport { Link, LinkProps } from 'react-router'\n\n/* Allow component to behave as a MUI Button or a React Router Link */\nexport type LoginAwareButtonProps = ButtonProps &\n  Partial<Pick<LinkProps, 'to' | 'replace'>>\n\nexport function LoginAwareButton(\n  props: LoginAwareButtonProps,\n): React.ReactNode {\n  const { isAuthenticated } = useSynapseContext()\n  const mergedProps = { ...props }\n  const linkProps = {\n    to: props.to,\n    replace: props.replace,\n  }\n  delete mergedProps.to\n  delete mergedProps.replace\n  if (!isAuthenticated) {\n    /* If token is missing, add css class to flag button to require login before continuing */\n    delete mergedProps.href\n    mergedProps.className = SRC_SIGN_IN_CLASS\n  }\n  let linkBtn = <Button {...mergedProps}>{mergedProps.children}</Button>\n  if (isAuthenticated && linkProps.to && !mergedProps.href) {\n    linkBtn = (\n      <Link to={linkProps.to} replace={linkProps.replace}>\n        {linkBtn}\n      </Link>\n    )\n  }\n  return linkBtn\n}\n"],"mappings":";;;;;;;AAUA,SAAgB,EACd,GACiB;CACjB,IAAM,EAAE,uBAAoB,GAAmB,EACzC,IAAc,EAAE,GAAG,GAAO,EAC1B,IAAY;EAChB,IAAI,EAAM;EACV,SAAS,EAAM;EAChB;AAGD,CAFA,OAAO,EAAY,IACnB,OAAO,EAAY,SACd,MAEH,OAAO,EAAY,MACnB,EAAY,YAAY;CAE1B,IAAI,IAAU,kBAAC,GAAD;EAAQ,GAAI;YAAc,EAAY;EAAkB,CAAA;AAQtE,QAPI,KAAmB,EAAU,MAAM,CAAC,EAAY,SAClD,IACE,kBAAC,GAAD;EAAM,IAAI,EAAU;EAAI,SAAS,EAAU;YACxC;EACI,CAAA,GAGJ"}
+{"version":3,"file":"LoginAwareButton.js","names":[],"sources":["../../../src/components/widgets/LoginAwareButton.tsx"],"sourcesContent":["import { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { SRC_SIGN_IN_CLASS } from '@/utils/SynapseConstants'\nimport { Button, ButtonProps } from '@mui/material'\nimport React from 'react'\nimport { Link, LinkProps } from 'react-router'\n\n/* Allow component to behave as a MUI Button or a React Router Link */\nexport type LoginAwareButtonProps = ButtonProps &\n  Partial<Pick<LinkProps, 'to' | 'replace'>>\n\nexport function LoginAwareButton(\n  props: LoginAwareButtonProps,\n): React.ReactNode {\n  const { isAuthenticated } = useSynapseContext()\n  const mergedProps = { ...props }\n  const linkProps = {\n    to: props.to,\n    replace: props.replace,\n  }\n  delete mergedProps.to\n  delete mergedProps.replace\n  if (!isAuthenticated) {\n    /* If token is missing, add css class to flag button to require login before continuing */\n    delete mergedProps.href\n    mergedProps.className = SRC_SIGN_IN_CLASS\n  }\n  let linkBtn = <Button {...mergedProps}>{mergedProps.children}</Button>\n  if (isAuthenticated && linkProps.to && !mergedProps.href) {\n    linkBtn = (\n      <Link to={linkProps.to} replace={linkProps.replace}>\n        {linkBtn}\n      </Link>\n    )\n  }\n  return linkBtn\n}\n"],"mappings":";;;;;;;AAUA,SAAgB,EACd,GACiB;CACjB,IAAM,EAAE,uBAAoB,EAAkB,GACxC,IAAc,EAAE,GAAG,EAAM,GACzB,IAAY;EAChB,IAAI,EAAM;EACV,SAAS,EAAM;CACjB;CAGA,AAFA,OAAO,EAAY,IACnB,OAAO,EAAY,SACd,MAEH,OAAO,EAAY,MACnB,EAAY,YAAY;CAE1B,IAAI,IAAU,kBAAC,GAAD;EAAQ,GAAI;YAAc,EAAY;CAAiB,CAAA;CAQrE,OAPI,KAAmB,EAAU,MAAM,CAAC,EAAY,SAClD,IACE,kBAAC,GAAD;EAAM,IAAI,EAAU;EAAI,SAAS,EAAU;YACxC;CACG,CAAA,IAGH;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"Range.js","names":[],"sources":["../../../src/components/widgets/Range.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport dayjs from 'dayjs'\nimport { DatePicker } from '@mui/x-date-pickers'\nimport { Box, Button, TextField } from '@mui/material'\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\nimport isEmpty from 'lodash-es/isEmpty'\n\ntype ControlType = 'number' | 'date'\n\nexport type RangeValues<T = string | number> = {\n  min?: T\n  max?: T\n}\n\nexport type RangeProps = {\n  type: ControlType\n  initialValues?: RangeValues\n  className?: string\n  errorText?: string\n  onApplyClicked: (newValues: RangeValues) => void\n}\n\nexport function Range(props: RangeProps): React.ReactNode {\n  const errorText = 'Min value should be less than max value'\n  const [error, setError] = useState(false)\n  const [values, setValues] = useState(() =>\n    props.type === 'number' && props.initialValues\n      ? props.initialValues\n      : (props.initialValues && {\n          min: props.initialValues.min\n            ? dayjs(props.initialValues.min).format('YYYY-MM-DD')\n            : undefined,\n          max: props.initialValues.max\n            ? dayjs(props.initialValues.max).format('YYYY-MM-DD')\n            : undefined,\n        }) || {\n          min: undefined,\n          max: undefined,\n        },\n  )\n\n  const isValid = (\n    { min, max }: RangeValues,\n\n    type: ControlType = 'number',\n  ) => {\n    // Treat null, undefined, and empty string as \"no value\" — one-sided ranges are always valid\n    if (isEmpty(min) || isEmpty(max)) {\n      setError(false)\n      return true\n    }\n\n    if (type === 'number') {\n      if (Number(min) > Number(max)) {\n        setError(true)\n        return false\n      }\n    } else if (Date.parse(min as string) > Date.parse(max as string)) {\n      setError(true)\n      return false\n    }\n    setError(false)\n    return true\n  }\n\n  const handleAppyChanges = (\n    values: RangeValues,\n    callBackFn: (newValues: RangeValues) => void,\n    type: ControlType = 'number',\n  ) => {\n    if (isValid(values, type)) {\n      // Normalize empty strings to undefined so downstream code receives clean absent values\n      callBackFn({\n        min: values.min === '' ? undefined : values.min,\n        max: values.max === '' ? undefined : values.max,\n      })\n    }\n  }\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexWrap: 'wrap',\n        flex: '1 0',\n        marginRight: '10px',\n        gap: '10px',\n        '& .MuiInputBase-root': {\n          minWidth: '150px',\n        },\n        '& .MuiInputBase-root,.MuiButton-root': {\n          height: '38px',\n        },\n        '& .MuiInputLabel-root': {\n          color: 'grey.700',\n          fontWeight: 400,\n        },\n      }}\n    >\n      {props.type === 'date' ? (\n        <>\n          <Box key=\"range_min\">\n            <LocalizationProvider dateAdapter={AdapterDayjs}>\n              <DatePicker\n                enableAccessibleFieldDOMStructure={false}\n                label=\"From\"\n                slots={{\n                  textField: TextField,\n                }}\n                slotProps={{\n                  textField: {\n                    error: false,\n                    inputProps: {\n                      'aria-label': 'min',\n                    },\n                  },\n                }}\n                value={values.min ? dayjs(values.min) : null}\n                onChange={date =>\n                  setValues({\n                    min: date ? dayjs(date).format('YYYY-MM-DD') : undefined,\n                    max: values.max,\n                  })\n                }\n              />\n            </LocalizationProvider>\n          </Box>\n          <Box key=\"range_max\">\n            <LocalizationProvider dateAdapter={AdapterDayjs}>\n              <DatePicker\n                enableAccessibleFieldDOMStructure={false}\n                label=\"To\"\n                slots={{\n                  textField: TextField,\n                }}\n                slotProps={{\n                  textField: {\n                    error: false,\n                    inputProps: {\n                      'aria-label': 'max',\n                    },\n                  },\n                }}\n                value={values.max ? dayjs(values.max) : null}\n                onChange={date =>\n                  setValues({\n                    max: date ? dayjs(date).format('YYYY-MM-DD') : undefined,\n                    min: values.min,\n                  })\n                }\n              />\n            </LocalizationProvider>\n          </Box>\n        </>\n      ) : (\n        <>\n          <Box key=\"range_min\">\n            <TextField\n              label=\"From\"\n              type=\"number\"\n              value={values.min ?? ''}\n              onChange={e =>\n                setValues({\n                  min: e.target.value,\n                  max: values.max,\n                })\n              }\n              slotProps={{\n                htmlInput: { 'aria-label': 'min' },\n              }}\n            />\n          </Box>\n          <Box key=\"range_max\">\n            <TextField\n              label=\"To\"\n              type=\"number\"\n              value={values.max ?? ''}\n              onChange={e =>\n                setValues({\n                  max: e.target.value,\n                  min: values.min,\n                })\n              }\n              slotProps={{\n                htmlInput: { 'aria-label': 'max' },\n              }}\n            />\n          </Box>\n        </>\n      )}\n      <Button\n        size=\"small\"\n        variant=\"outlined\"\n        onClick={() =>\n          handleAppyChanges(values, props.onApplyClicked, props.type)\n        }\n        sx={{\n          alignSelf: 'flex-end',\n          fontSize: 16,\n        }}\n      >\n        Apply\n      </Button>\n      {error && (\n        <div className=\"SRC-danger-color\">{props.errorText || errorText}</div>\n      )}\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Range.js","names":[],"sources":["../../../src/components/widgets/Range.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport dayjs from 'dayjs'\nimport { DatePicker } from '@mui/x-date-pickers'\nimport { Box, Button, TextField } from '@mui/material'\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\nimport isEmpty from 'lodash-es/isEmpty'\n\ntype ControlType = 'number' | 'date'\n\nexport type RangeValues<T = string | number> = {\n  min?: T\n  max?: T\n}\n\nexport type RangeProps = {\n  type: ControlType\n  initialValues?: RangeValues\n  className?: string\n  errorText?: string\n  onApplyClicked: (newValues: RangeValues) => void\n}\n\nexport function Range(props: RangeProps): React.ReactNode {\n  const errorText = 'Min value should be less than max value'\n  const [error, setError] = useState(false)\n  const [values, setValues] = useState(() =>\n    props.type === 'number' && props.initialValues\n      ? props.initialValues\n      : (props.initialValues && {\n          min: props.initialValues.min\n            ? dayjs(props.initialValues.min).format('YYYY-MM-DD')\n            : undefined,\n          max: props.initialValues.max\n            ? dayjs(props.initialValues.max).format('YYYY-MM-DD')\n            : undefined,\n        }) || {\n          min: undefined,\n          max: undefined,\n        },\n  )\n\n  const isValid = (\n    { min, max }: RangeValues,\n\n    type: ControlType = 'number',\n  ) => {\n    // Treat null, undefined, and empty string as \"no value\" — one-sided ranges are always valid\n    if (isEmpty(min) || isEmpty(max)) {\n      setError(false)\n      return true\n    }\n\n    if (type === 'number') {\n      if (Number(min) > Number(max)) {\n        setError(true)\n        return false\n      }\n    } else if (Date.parse(min as string) > Date.parse(max as string)) {\n      setError(true)\n      return false\n    }\n    setError(false)\n    return true\n  }\n\n  const handleAppyChanges = (\n    values: RangeValues,\n    callBackFn: (newValues: RangeValues) => void,\n    type: ControlType = 'number',\n  ) => {\n    if (isValid(values, type)) {\n      // Normalize empty strings to undefined so downstream code receives clean absent values\n      callBackFn({\n        min: values.min === '' ? undefined : values.min,\n        max: values.max === '' ? undefined : values.max,\n      })\n    }\n  }\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexWrap: 'wrap',\n        flex: '1 0',\n        marginRight: '10px',\n        gap: '10px',\n        '& .MuiInputBase-root': {\n          minWidth: '150px',\n        },\n        '& .MuiInputBase-root,.MuiButton-root': {\n          height: '38px',\n        },\n        '& .MuiInputLabel-root': {\n          color: 'grey.700',\n          fontWeight: 400,\n        },\n      }}\n    >\n      {props.type === 'date' ? (\n        <>\n          <Box key=\"range_min\">\n            <LocalizationProvider dateAdapter={AdapterDayjs}>\n              <DatePicker\n                enableAccessibleFieldDOMStructure={false}\n                label=\"From\"\n                slots={{\n                  textField: TextField,\n                }}\n                slotProps={{\n                  textField: {\n                    error: false,\n                    inputProps: {\n                      'aria-label': 'min',\n                    },\n                  },\n                }}\n                value={values.min ? dayjs(values.min) : null}\n                onChange={date =>\n                  setValues({\n                    min: date ? dayjs(date).format('YYYY-MM-DD') : undefined,\n                    max: values.max,\n                  })\n                }\n              />\n            </LocalizationProvider>\n          </Box>\n          <Box key=\"range_max\">\n            <LocalizationProvider dateAdapter={AdapterDayjs}>\n              <DatePicker\n                enableAccessibleFieldDOMStructure={false}\n                label=\"To\"\n                slots={{\n                  textField: TextField,\n                }}\n                slotProps={{\n                  textField: {\n                    error: false,\n                    inputProps: {\n                      'aria-label': 'max',\n                    },\n                  },\n                }}\n                value={values.max ? dayjs(values.max) : null}\n                onChange={date =>\n                  setValues({\n                    max: date ? dayjs(date).format('YYYY-MM-DD') : undefined,\n                    min: values.min,\n                  })\n                }\n              />\n            </LocalizationProvider>\n          </Box>\n        </>\n      ) : (\n        <>\n          <Box key=\"range_min\">\n            <TextField\n              label=\"From\"\n              type=\"number\"\n              value={values.min ?? ''}\n              onChange={e =>\n                setValues({\n                  min: e.target.value,\n                  max: values.max,\n                })\n              }\n              slotProps={{\n                htmlInput: { 'aria-label': 'min' },\n              }}\n            />\n          </Box>\n          <Box key=\"range_max\">\n            <TextField\n              label=\"To\"\n              type=\"number\"\n              value={values.max ?? ''}\n              onChange={e =>\n                setValues({\n                  max: e.target.value,\n                  min: values.min,\n                })\n              }\n              slotProps={{\n                htmlInput: { 'aria-label': 'max' },\n              }}\n            />\n          </Box>\n        </>\n      )}\n      <Button\n        size=\"small\"\n        variant=\"outlined\"\n        onClick={() =>\n          handleAppyChanges(values, props.onApplyClicked, props.type)\n        }\n        sx={{\n          alignSelf: 'flex-end',\n          fontSize: 16,\n        }}\n      >\n        Apply\n      </Button>\n      {error && (\n        <div className=\"SRC-danger-color\">{props.errorText || errorText}</div>\n      )}\n    </Box>\n  )\n}\n"],"mappings":"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"}

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;AAE5B,QACE,kBAAC,GAAD;EAAS,iBAAiB;EAAG,WAAU;EAAM,OAAO;EACjD;EACO,CAAA;;AAId,SAAS,EAAiB,GAA4B,GAAkB;AAKtE,QAAO,CAHL,EAAc,MAAM,OAAO,EAAc,IAAI,GAAG,OAAO,EAAO,GAAG,EACjE,EAAc,MAAM,OAAO,EAAc,IAAI,GAAG,OAAO,EAAO,GAAG,CAE5D;;AAGT,SAAS,EAAY,GAAyB;CAC5C,IAAM,EAAE,mBAAgB,aAAU,YAAS,GACrC,KAAqB,MACzB,EAAS,KAAI,MAAS,OAAO,EAAM,CAAC,EAEhC,CAAC,GAAQ,KAAa,QAC1B,EAAiB,EAAM,eAAe,EAAM,OAAO,CACpD,EAEK,IAAY,EAAkB,EAAM,OAAO,EAE3C,KAAsB,MAA8B;AAExD,EADA,EAAU,CAAC,GAAG,EAAO,CAAC,EAClB,KACF,EAAS;GAAE,KAAK,EAAO;GAAI,KAAK,EAAO;GAAI,CAAC;;AAIhD,QACE,kBAAC,GAAD;EAAK,IAAI,EAAE,IAAI,GAAG;YAAlB,CACE,kBAAC,GAAD;GAAY,SAAQ;aAApB;IACG,EAAO;IAAG;IAAI,EAAO;IACX;MACb,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,KAAK;IACL,IAAI;IACL;aALH,CAOE,kBAAC,GAAD;IACE,OAAO,CACL;KAAE,OAAO,EAAU;KAAI,OAAO,EAAM,OAAO;KAAI,EAC/C;KAAE,OAAO,EAAU;KAAI,OAAO,EAAM,OAAO;KAAI,CAChD;IACD,KAAK,EAAU;IACf,KAAK,EAAU;IACf,OAAO;IACP,WAAW,GAAG,MAAc,EAAmB,EAAU;IACnD;IACN,mBAAkB;IAClB,OAAO,EACL,YAAY,GACb;IACD,CAAA,EACD,KACC,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,eAAe,EAAe;KAAE,KAAK,EAAO;KAAI,KAAK,EAAO;KAAI,CAAC;IACjE,IAAI,EAAE,UAAU,IAAI;cACrB;IAEQ,CAAA,EACL,CAAA,CAEJ;KACF"}
+{"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"}

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,GAClB,CACF,EAEK,IACJ,QAAc;AACZ,MAAI,KAAa,EACf,QAAO;GACL,mBAAmB;GACnB,qBAAqB,EAAwB;GAC7C,cAAc,EAAW;GAC1B;MACQ,KAAU,KAAY,GAAa;GAC5C,IAAM,EAAE,UAAO,EAAY,QAAO,MAAM,EAAG,aAAa,EAAS,CAAC;AAClE,UAAO;IACL,mBAAmB;IACnB,qBAAqB,EAAwB;IAC7C,cAAc;IACf;;IAGF;EAAC;EAAY;EAAU;EAAa;EAAW;EAAO,CAAC,EAEtD,EAAE,WAAQ,IAAI,aAAU,oBAAoB,GAE9C,IAAQ;AACZ,CAAI,EAAO,SAAS,EAAO,UAAU,UACnC,IAAQ,GAAG,OAAO,EAAO,MAAM,CAAC;CAGlC,IAAM,IAAiB,EAAM,aAAa,EACtC,IAAY;AAOhB,CANI,MAAmB,WACrB,IAAY,cAEV,MAAmB,YACrB,IAAY,eAEV,MAAmB,aACrB,IAAY;CAEd,IAAM,IAAuB;EAC3B,UAAU;EACV,QAAQ;EACT;AAMD,QAJK,IAKH,kBAAC,GAAD;EACyB;EACvB,UAAU;GACR,KAAK;GACL,WAAW,EAAW,aAAa,EAAU;GAC7C;GACD;EACD,CAAA,GAXK,kBAAA,GAAA,EAAK,CAAA"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"SynapseVideo.js","names":[],"sources":["../../../src/components/widgets/SynapseVideo.tsx"],"sourcesContent":["import { getEntity, getFiles } from '@/synapse-client/SynapseClient'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  BatchFileRequest,\n  BatchFileResult,\n  FileEntity,\n  FileHandleAssociateType,\n  FileHandleAssociation,\n} from '@sage-bionetworks/synapse-types'\nimport { useEffect, useState } from 'react'\n\nexport type SynapseVideoProps = {\n  params: {\n    width?: string\n    height?: string\n    videoId?: string\n    vimeoId?: string\n    oggSynapseId?: string\n    mp4SynapseId?: string\n    webmSynapseId?: string\n    vttSynapseId?: string\n  }\n}\n\nexport default function SynapseVideo({ params }: SynapseVideoProps) {\n  const { accessToken, isAuthenticated } = useSynapseContext()\n  const [externalVideoUrl, setExternalVideoUrl] = useState<string>()\n  const [synapseVideoPresignedUrl, setSynapseVideoPresignedUrl] =\n    useState<string>()\n  const [synapseVideoVttPresignedUrl, setSynapseVideoVttPresignedUrl] =\n    useState<string>()\n\n  const videoWidth = params.width ?? ''\n  const videoHeight = params.height ?? ''\n  useEffect(() => {\n    const getVideo = async () => {\n      if (params.videoId)\n        setExternalVideoUrl(`https://www.youtube.com/embed/${params.videoId}`)\n      else if (params.vimeoId)\n        setExternalVideoUrl(`https://player.vimeo.com/video/${params.vimeoId}`)\n      else {\n        const videoKey =\n          params.oggSynapseId || params.mp4SynapseId || params.webmSynapseId\n\n        const videoEntity = await getEntity<FileEntity>(accessToken, videoKey!)\n        const fileHandleAssociationList: FileHandleAssociation[] = [\n          {\n            associateObjectId: videoKey!,\n            associateObjectType: FileHandleAssociateType.FileEntity,\n            fileHandleId: videoEntity.dataFileHandleId,\n          },\n        ]\n\n        let vttFileHandleId: string | undefined\n        if (params.vttSynapseId) {\n          const vttEntity = await getEntity<FileEntity>(\n            accessToken,\n            params.vttSynapseId,\n          )\n          vttFileHandleId = vttEntity.dataFileHandleId\n          fileHandleAssociationList.push({\n            associateObjectId: params.vttSynapseId,\n            associateObjectType: FileHandleAssociateType.FileEntity,\n            fileHandleId: vttEntity.dataFileHandleId,\n          })\n        }\n\n        getSynapseFiles(\n          fileHandleAssociationList,\n          videoEntity.dataFileHandleId,\n          vttFileHandleId,\n        )\n      }\n    }\n\n    const getSynapseFiles = (\n      fileHandleAssociationList: FileHandleAssociation[],\n      videoFileHandleId: string,\n      vttFileHandleId?: string,\n    ) => {\n      const request: BatchFileRequest = {\n        includeFileHandles: false,\n        includePreSignedURLs: true,\n        includePreviewPreSignedURLs: false,\n        requestedFiles: fileHandleAssociationList,\n      }\n\n      getFiles(request, accessToken)\n        .then((data: BatchFileResult) => {\n          const videoFile = data.requestedFiles.find(\n            el => el.fileHandleId === videoFileHandleId,\n          )\n          if (videoFile?.preSignedURL) {\n            setSynapseVideoPresignedUrl(videoFile.preSignedURL)\n          }\n\n          if (vttFileHandleId) {\n            const vttFile = data.requestedFiles.find(\n              el => el.fileHandleId === vttFileHandleId,\n            )\n            if (vttFile?.preSignedURL) {\n              setSynapseVideoVttPresignedUrl(vttFile.preSignedURL)\n            }\n          }\n        })\n        .catch(err => {\n          console.error('Error on getting video ', err)\n        })\n    }\n    getVideo()\n  }, [externalVideoUrl, params, accessToken, videoHeight, videoWidth])\n\n  if (!isAuthenticated && !externalVideoUrl) {\n    // if not logged in, show login button\n    return (\n      <p>\n        You will need to\n        <button\n          data-testid=\"video-login\"\n          className={`${SynapseConstants.SRC_SIGN_IN_CLASS} sign-in-btn default\n              `}\n        >\n          Sign in\n        </button>\n        in for access to that resource.\n      </p>\n    )\n  }\n  if (synapseVideoPresignedUrl) {\n    return (\n      <video\n        controls\n        width={videoWidth}\n        height={videoHeight}\n        data-testid=\"synapse-video-url\"\n        crossOrigin=\"anonymous\"\n      >\n        <source src={synapseVideoPresignedUrl} />\n        {synapseVideoVttPresignedUrl && (\n          <track src={synapseVideoVttPresignedUrl} kind=\"subtitles\" default />\n        )}\n        It does not support the HTML5 Video element.\n      </video>\n    )\n  } else if (externalVideoUrl) {\n    return (\n      <iframe\n        title=\"video frame\"\n        src={externalVideoUrl}\n        width={videoWidth}\n        height={videoHeight}\n      ></iframe>\n    )\n  } else {\n    return <></>\n  }\n}\n"],"mappings":";;;;;;;;AAyBA,SAAwB,EAAa,EAAE,aAA6B;CAClE,IAAM,EAAE,gBAAa,uBAAoB,GAAmB,EACtD,CAAC,GAAkB,KAAuB,GAAkB,EAC5D,CAAC,GAA0B,KAC/B,GAAkB,EACd,CAAC,GAA6B,KAClC,GAAkB,EAEd,IAAa,EAAO,SAAS,IAC7B,IAAc,EAAO,UAAU;AAyHnC,QAxHF,QAAgB;EACd,IAAM,IAAW,YAAY;AAC3B,OAAI,EAAO,QACT,GAAoB,iCAAiC,EAAO,UAAU;YAC/D,EAAO,QACd,GAAoB,kCAAkC,EAAO,UAAU;QACpE;IACH,IAAM,IACJ,EAAO,gBAAgB,EAAO,gBAAgB,EAAO,eAEjD,IAAc,MAAM,EAAsB,GAAa,EAAU,EACjE,IAAqD,CACzD;KACE,mBAAmB;KACnB,qBAAqB,EAAwB;KAC7C,cAAc,EAAY;KAC3B,CACF,EAEG;AACJ,QAAI,EAAO,cAAc;KACvB,IAAM,IAAY,MAAM,EACtB,GACA,EAAO,aACR;AAED,KADA,IAAkB,EAAU,kBAC5B,EAA0B,KAAK;MAC7B,mBAAmB,EAAO;MAC1B,qBAAqB,EAAwB;MAC7C,cAAc,EAAU;MACzB,CAAC;;AAGJ,MACE,GACA,EAAY,kBACZ,EACD;;KAIC,KACJ,GACA,GACA,MACG;AAQH,KAAS;IANP,oBAAoB;IACpB,sBAAsB;IACtB,6BAA6B;IAC7B,gBAAgB;IAGT,EAAS,EAAY,CAC3B,MAAM,MAA0B;IAC/B,IAAM,IAAY,EAAK,eAAe,MACpC,MAAM,EAAG,iBAAiB,EAC3B;AAKD,QAJI,GAAW,gBACb,EAA4B,EAAU,aAAa,EAGjD,GAAiB;KACnB,IAAM,IAAU,EAAK,eAAe,MAClC,MAAM,EAAG,iBAAiB,EAC3B;AACD,KAAI,GAAS,gBACX,EAA+B,EAAQ,aAAa;;KAGxD,CACD,OAAM,MAAO;AACZ,YAAQ,MAAM,2BAA2B,EAAI;KAC7C;;AAEN,KAAU;IACT;EAAC;EAAkB;EAAQ;EAAa;EAAa;EAAW,CAAC,EAEhE,CAAC,KAAmB,CAAC,IAGrB,kBAAC,KAAD,EAAA,UAAA;EAAG;EAED,kBAAC,UAAD;GACE,eAAY;GACZ,WAAW,GAAG,EAAmC;;aAElD;GAEQ,CAAA;;EAEP,EAAA,CAAA,GAGJ,IAEA,kBAAC,SAAD;EACE,UAAA;EACA,OAAO;EACP,QAAQ;EACR,eAAY;EACZ,aAAY;YALd;GAOE,kBAAC,UAAD,EAAQ,KAAK,GAA4B,CAAA;GACxC,KACC,kBAAC,SAAD;IAAO,KAAK;IAA6B,MAAK;IAAY,SAAA;IAAU,CAAA;GACpE;GAEI;MAED,IAEP,kBAAC,UAAD;EACE,OAAM;EACN,KAAK;EACL,OAAO;EACP,QAAQ;EACA,CAAA,GAGL,kBAAA,GAAA,EAAK,CAAA"}
+{"version":3,"file":"SynapseVideo.js","names":[],"sources":["../../../src/components/widgets/SynapseVideo.tsx"],"sourcesContent":["import { getEntity, getFiles } from '@/synapse-client/SynapseClient'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  BatchFileRequest,\n  BatchFileResult,\n  FileEntity,\n  FileHandleAssociateType,\n  FileHandleAssociation,\n} from '@sage-bionetworks/synapse-types'\nimport { useEffect, useState } from 'react'\n\nexport type SynapseVideoProps = {\n  params: {\n    width?: string\n    height?: string\n    videoId?: string\n    vimeoId?: string\n    oggSynapseId?: string\n    mp4SynapseId?: string\n    webmSynapseId?: string\n    vttSynapseId?: string\n  }\n}\n\nexport default function SynapseVideo({ params }: SynapseVideoProps) {\n  const { accessToken, isAuthenticated } = useSynapseContext()\n  const [externalVideoUrl, setExternalVideoUrl] = useState<string>()\n  const [synapseVideoPresignedUrl, setSynapseVideoPresignedUrl] =\n    useState<string>()\n  const [synapseVideoVttPresignedUrl, setSynapseVideoVttPresignedUrl] =\n    useState<string>()\n\n  const videoWidth = params.width ?? ''\n  const videoHeight = params.height ?? ''\n  useEffect(() => {\n    const getVideo = async () => {\n      if (params.videoId)\n        setExternalVideoUrl(`https://www.youtube.com/embed/${params.videoId}`)\n      else if (params.vimeoId)\n        setExternalVideoUrl(`https://player.vimeo.com/video/${params.vimeoId}`)\n      else {\n        const videoKey =\n          params.oggSynapseId || params.mp4SynapseId || params.webmSynapseId\n\n        const videoEntity = await getEntity<FileEntity>(accessToken, videoKey!)\n        const fileHandleAssociationList: FileHandleAssociation[] = [\n          {\n            associateObjectId: videoKey!,\n            associateObjectType: FileHandleAssociateType.FileEntity,\n            fileHandleId: videoEntity.dataFileHandleId,\n          },\n        ]\n\n        let vttFileHandleId: string | undefined\n        if (params.vttSynapseId) {\n          const vttEntity = await getEntity<FileEntity>(\n            accessToken,\n            params.vttSynapseId,\n          )\n          vttFileHandleId = vttEntity.dataFileHandleId\n          fileHandleAssociationList.push({\n            associateObjectId: params.vttSynapseId,\n            associateObjectType: FileHandleAssociateType.FileEntity,\n            fileHandleId: vttEntity.dataFileHandleId,\n          })\n        }\n\n        getSynapseFiles(\n          fileHandleAssociationList,\n          videoEntity.dataFileHandleId,\n          vttFileHandleId,\n        )\n      }\n    }\n\n    const getSynapseFiles = (\n      fileHandleAssociationList: FileHandleAssociation[],\n      videoFileHandleId: string,\n      vttFileHandleId?: string,\n    ) => {\n      const request: BatchFileRequest = {\n        includeFileHandles: false,\n        includePreSignedURLs: true,\n        includePreviewPreSignedURLs: false,\n        requestedFiles: fileHandleAssociationList,\n      }\n\n      getFiles(request, accessToken)\n        .then((data: BatchFileResult) => {\n          const videoFile = data.requestedFiles.find(\n            el => el.fileHandleId === videoFileHandleId,\n          )\n          if (videoFile?.preSignedURL) {\n            setSynapseVideoPresignedUrl(videoFile.preSignedURL)\n          }\n\n          if (vttFileHandleId) {\n            const vttFile = data.requestedFiles.find(\n              el => el.fileHandleId === vttFileHandleId,\n            )\n            if (vttFile?.preSignedURL) {\n              setSynapseVideoVttPresignedUrl(vttFile.preSignedURL)\n            }\n          }\n        })\n        .catch(err => {\n          console.error('Error on getting video ', err)\n        })\n    }\n    getVideo()\n  }, [externalVideoUrl, params, accessToken, videoHeight, videoWidth])\n\n  if (!isAuthenticated && !externalVideoUrl) {\n    // if not logged in, show login button\n    return (\n      <p>\n        You will need to\n        <button\n          data-testid=\"video-login\"\n          className={`${SynapseConstants.SRC_SIGN_IN_CLASS} sign-in-btn default\n              `}\n        >\n          Sign in\n        </button>\n        in for access to that resource.\n      </p>\n    )\n  }\n  if (synapseVideoPresignedUrl) {\n    return (\n      <video\n        controls\n        width={videoWidth}\n        height={videoHeight}\n        data-testid=\"synapse-video-url\"\n        crossOrigin=\"anonymous\"\n      >\n        <source src={synapseVideoPresignedUrl} />\n        {synapseVideoVttPresignedUrl && (\n          <track src={synapseVideoVttPresignedUrl} kind=\"subtitles\" default />\n        )}\n        It does not support the HTML5 Video element.\n      </video>\n    )\n  } else if (externalVideoUrl) {\n    return (\n      <iframe\n        title=\"video frame\"\n        src={externalVideoUrl}\n        width={videoWidth}\n        height={videoHeight}\n      ></iframe>\n    )\n  } else {\n    return <></>\n  }\n}\n"],"mappings":";;;;;;;;AAyBA,SAAwB,EAAa,EAAE,aAA6B;CAClE,IAAM,EAAE,gBAAa,uBAAoB,EAAkB,GACrD,CAAC,GAAkB,KAAuB,EAAiB,GAC3D,CAAC,GAA0B,KAC/B,EAAiB,GACb,CAAC,GAA6B,KAClC,EAAiB,GAEb,IAAa,EAAO,SAAS,IAC7B,IAAc,EAAO,UAAU;CAyHnC,OAxHF,QAAgB;EACd,IAAM,IAAW,YAAY;GAC3B,IAAI,EAAO,SACT,EAAoB,iCAAiC,EAAO,SAAS;QAClE,IAAI,EAAO,SACd,EAAoB,kCAAkC,EAAO,SAAS;QACnE;IACH,IAAM,IACJ,EAAO,gBAAgB,EAAO,gBAAgB,EAAO,eAEjD,IAAc,MAAM,EAAsB,GAAa,CAAS,GAChE,IAAqD,CACzD;KACE,mBAAmB;KACnB,qBAAqB,EAAwB;KAC7C,cAAc,EAAY;IAC5B,CACF,GAEI;IACJ,IAAI,EAAO,cAAc;KACvB,IAAM,IAAY,MAAM,EACtB,GACA,EAAO,YACT;KAEA,AADA,IAAkB,EAAU,kBAC5B,EAA0B,KAAK;MAC7B,mBAAmB,EAAO;MAC1B,qBAAqB,EAAwB;MAC7C,cAAc,EAAU;KAC1B,CAAC;IACH;IAEA,EACE,GACA,EAAY,kBACZ,CACF;GACF;EACF,GAEM,KACJ,GACA,GACA,MACG;GAQH,EAAS;IANP,oBAAoB;IACpB,sBAAsB;IACtB,6BAA6B;IAC7B,gBAAgB;GAGT,GAAS,CAAW,EAC1B,MAAM,MAA0B;IAC/B,IAAM,IAAY,EAAK,eAAe,MACpC,MAAM,EAAG,iBAAiB,CAC5B;IAKA,IAJI,GAAW,gBACb,EAA4B,EAAU,YAAY,GAGhD,GAAiB;KACnB,IAAM,IAAU,EAAK,eAAe,MAClC,MAAM,EAAG,iBAAiB,CAC5B;KACA,AAAI,GAAS,gBACX,EAA+B,EAAQ,YAAY;IAEvD;GACF,CAAC,EACA,OAAM,MAAO;IACZ,QAAQ,MAAM,2BAA2B,CAAG;GAC9C,CAAC;EACL;EACA,EAAS;CACX,GAAG;EAAC;EAAkB;EAAQ;EAAa;EAAa;CAAU,CAAC,GAE/D,CAAC,KAAmB,CAAC,IAGrB,kBAAC,KAAD,EAAA,UAAA;EAAG;EAED,kBAAC,UAAD;GACE,eAAY;GACZ,WAAW,GAAG,EAAmC;;aAElD;EAEO,CAAA;EAAC;CAER,EAAA,CAAA,IAGH,IAEA,kBAAC,SAAD;EACE,UAAA;EACA,OAAO;EACP,QAAQ;EACR,eAAY;EACZ,aAAY;YALd;GAOE,kBAAC,UAAD,EAAQ,KAAK,EAA2B,CAAA;GACvC,KACC,kBAAC,SAAD;IAAO,KAAK;IAA6B,MAAK;IAAY,SAAA;GAAS,CAAA;GACnE;EAEG;MAEA,IAEP,kBAAC,UAAD;EACE,OAAM;EACN,KAAK;EACL,OAAO;EACP,QAAQ;CACD,CAAA,IAGJ,kBAAA,GAAA,CAAI,CAAA;AAEf"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotLegendList.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendList.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport { FacetPlotLegendProps } from './FacetPlotLegendUtils'\n\nexport function FacetPlotLegendList(props: FacetPlotLegendProps) {\n  const { labels, colors = [], isExpanded } = props\n  if (!labels) {\n    return <></>\n  }\n  const numLegendItems = isExpanded\n    ? Math.min(labels.length, 9)\n    : Math.min(labels.length, 4)\n  if (numLegendItems === 0) {\n    return <></>\n  }\n  return (\n    <div\n      className={`FacetNavPanel__body__legend${isExpanded ? '--expanded' : ''}`}\n    >\n      {labels.slice(0, numLegendItems).map((facetValue, index) => {\n        return (\n          <Tooltip\n            title={facetValue.label}\n            placement={'top'}\n            key={facetValue.label}\n          >\n            <Box\n              sx={{\n                display: 'grid',\n                gridTemplateColumns: '20px auto 60px',\n                alignItems: 'center',\n                gap: '10px',\n              }}\n            >\n              <Box\n                sx={{\n                  width: '14px',\n                  height: '14px',\n                  cursor: 'default',\n                  backgroundColor: colors[index],\n                }}\n                key={`legendLabel_${index}`}\n                style={{ cursor: 'default' }}\n              />\n              <Typography\n                variant=\"body2\"\n                sx={{\n                  display: 'block',\n                  width: '100%',\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                  fontSize: '14px',\n                }}\n              >\n                {facetValue.label}\n              </Typography>\n              <Typography\n                variant=\"body2\"\n                sx={{ color: 'grey.600', fontSize: '14px' }}\n              >\n                {facetValue.count.toLocaleString()}\n              </Typography>\n            </Box>\n          </Tooltip>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;AAGA,SAAgB,EAAoB,GAA6B;CAC/D,IAAM,EAAE,WAAQ,YAAS,EAAE,EAAE,kBAAe;AAC5C,KAAI,CAAC,EACH,QAAO,kBAAA,GAAA,EAAK,CAAA;CAEd,IAAM,IAAiB,IACnB,KAAK,IAAI,EAAO,QAAQ,EAAE,GAC1B,KAAK,IAAI,EAAO,QAAQ,EAAE;AAI9B,QAHI,MAAmB,IACd,kBAAA,GAAA,EAAK,CAAA,GAGZ,kBAAC,OAAD;EACE,WAAW,8BAA8B,IAAa,eAAe;YAEpE,EAAO,MAAM,GAAG,EAAe,CAAC,KAAK,GAAY,MAE9C,kBAAC,GAAD;GACE,OAAO,EAAW;GAClB,WAAW;aAGX,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,qBAAqB;KACrB,YAAY;KACZ,KAAK;KACN;cANH;KAQE,kBAAC,GAAD;MACE,IAAI;OACF,OAAO;OACP,QAAQ;OACR,QAAQ;OACR,iBAAiB,EAAO;OACzB;MAED,OAAO,EAAE,QAAQ,WAAW;MAC5B,EAFK,eAAe,IAEpB;KACF,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI;OACF,SAAS;OACT,OAAO;OACP,UAAU;OACV,cAAc;OACd,YAAY;OACZ,UAAU;OACX;gBAEA,EAAW;MACD,CAAA;KACb,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI;OAAE,OAAO;OAAY,UAAU;OAAQ;gBAE1C,EAAW,MAAM,gBAAgB;MACvB,CAAA;KACT;;GACE,EAxCH,EAAW,MAwCR,CAEZ;EACE,CAAA"}
+{"version":3,"file":"FacetPlotLegendList.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendList.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport { FacetPlotLegendProps } from './FacetPlotLegendUtils'\n\nexport function FacetPlotLegendList(props: FacetPlotLegendProps) {\n  const { labels, colors = [], isExpanded } = props\n  if (!labels) {\n    return <></>\n  }\n  const numLegendItems = isExpanded\n    ? Math.min(labels.length, 9)\n    : Math.min(labels.length, 4)\n  if (numLegendItems === 0) {\n    return <></>\n  }\n  return (\n    <div\n      className={`FacetNavPanel__body__legend${isExpanded ? '--expanded' : ''}`}\n    >\n      {labels.slice(0, numLegendItems).map((facetValue, index) => {\n        return (\n          <Tooltip\n            title={facetValue.label}\n            placement={'top'}\n            key={facetValue.label}\n          >\n            <Box\n              sx={{\n                display: 'grid',\n                gridTemplateColumns: '20px auto 60px',\n                alignItems: 'center',\n                gap: '10px',\n              }}\n            >\n              <Box\n                sx={{\n                  width: '14px',\n                  height: '14px',\n                  cursor: 'default',\n                  backgroundColor: colors[index],\n                }}\n                key={`legendLabel_${index}`}\n                style={{ cursor: 'default' }}\n              />\n              <Typography\n                variant=\"body2\"\n                sx={{\n                  display: 'block',\n                  width: '100%',\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                  fontSize: '14px',\n                }}\n              >\n                {facetValue.label}\n              </Typography>\n              <Typography\n                variant=\"body2\"\n                sx={{ color: 'grey.600', fontSize: '14px' }}\n              >\n                {facetValue.count.toLocaleString()}\n              </Typography>\n            </Box>\n          </Tooltip>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;AAGA,SAAgB,EAAoB,GAA6B;CAC/D,IAAM,EAAE,WAAQ,YAAS,CAAC,GAAG,kBAAe;CAC5C,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,IAAiB,IACnB,KAAK,IAAI,EAAO,QAAQ,CAAC,IACzB,KAAK,IAAI,EAAO,QAAQ,CAAC;CAI7B,OAHI,MAAmB,IACd,kBAAA,GAAA,CAAI,CAAA,IAGX,kBAAC,OAAD;EACE,WAAW,8BAA8B,IAAa,eAAe;YAEpE,EAAO,MAAM,GAAG,CAAc,EAAE,KAAK,GAAY,MAE9C,kBAAC,GAAD;GACE,OAAO,EAAW;GAClB,WAAW;aAGX,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,qBAAqB;KACrB,YAAY;KACZ,KAAK;IACP;cANF;KAQE,kBAAC,GAAD;MACE,IAAI;OACF,OAAO;OACP,QAAQ;OACR,QAAQ;OACR,iBAAiB,EAAO;MAC1B;MAEA,OAAO,EAAE,QAAQ,UAAU;KAC5B,GAFM,eAAe,GAErB;KACD,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI;OACF,SAAS;OACT,OAAO;OACP,UAAU;OACV,cAAc;OACd,YAAY;OACZ,UAAU;MACZ;gBAEC,EAAW;KACF,CAAA;KACZ,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI;OAAE,OAAO;OAAY,UAAU;MAAO;gBAEzC,EAAW,MAAM,eAAe;KACvB,CAAA;IACT;;EACE,GAxCF,EAAW,KAwCT,CAEZ;CACE,CAAA;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotLegendTable.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendTable.tsx"],"sourcesContent":["import { Box, Link, Typography } from '@mui/material'\nimport {\n  FacetPlotLegendProps,\n  MAX_LEGEND_LENGTH,\n  truncate,\n} from './FacetPlotLegendUtils'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\n\ntype FacetPlotLegendTableProps = FacetPlotLegendProps & {\n  facetName?: string\n  linkToFullQuery?: string\n}\n\nexport function FacetPlotLegendTable(props: FacetPlotLegendTableProps) {\n  const { facetName, labels, colors = [], isExpanded, linkToFullQuery } = props\n\n  const { unitDescription } = useQueryVisualizationContext()\n\n  if (!labels) {\n    return <></>\n  }\n  const numLegendItems = isExpanded\n    ? Math.min(labels.length, 9)\n    : Math.min(labels.length, 4)\n  if (numLegendItems === 0) {\n    return <></>\n  }\n  return (\n    <>\n      <Box\n        component={'table'}\n        className={`FacetNavPanel__body__legend${\n          isExpanded ? '--expanded' : ''\n        }`}\n        sx={{ width: '100%', color: 'grey.800', 'td,th': { py: 0.5 } }}\n      >\n        <thead>\n          <Box\n            component={'tr'}\n            sx={{ borderBottom: '1px solid', borderBottomColor: 'grey.300' }}\n          >\n            <th>\n              <Typography\n                variant={'body1'}\n                sx={{\n                  fontWeight: 700,\n                  size: '14px',\n                }}\n              >\n                {facetName}\n              </Typography>\n            </th>\n            <th style={{ textAlign: 'right', marginRight: '16px' }}>\n              <Typography\n                variant={'body1'}\n                sx={{\n                  size: '14px',\n                  fontWeight: 700,\n                  textAlign: 'right',\n                }}\n              >\n                {unitDescription}\n              </Typography>\n            </th>\n          </Box>\n        </thead>\n        <tbody>\n          {labels.slice(0, numLegendItems).map((facetValue, index) => {\n            const labelDisplay = truncate(facetValue.label, MAX_LEGEND_LENGTH)\n            return (\n              <tr key={facetValue.label}>\n                <td>\n                  <Box\n                    sx={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 1,\n                    }}\n                  >\n                    <Box\n                      sx={{\n                        width: '14px',\n                        height: '14px',\n                        cursor: 'default',\n                        backgroundColor: colors[index],\n                      }}\n                      key={`legendLabel_${index}`}\n                      style={{ cursor: 'default' }}\n                    />\n                    <Typography variant=\"body1\" sx={{ fontSize: '14px' }}>\n                      {labelDisplay}\n                    </Typography>\n                  </Box>\n                </td>\n                <td>\n                  <Typography\n                    variant=\"body1\"\n                    sx={{\n                      fontSize: '14px',\n                      color: 'grey.600',\n                      textAlign: 'right',\n                    }}\n                  >\n                    {facetValue.count}\n                  </Typography>\n                </td>\n              </tr>\n            )\n          })}\n        </tbody>\n      </Box>\n      {linkToFullQuery && (\n        <Box sx={{ my: 2 }}>\n          <Link href={linkToFullQuery}>\n            View {labels.length} {facetName} options\n          </Link>\n        </Box>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;AAaA,SAAgB,EAAqB,GAAkC;CACrE,IAAM,EAAE,cAAW,WAAQ,YAAS,EAAE,EAAE,eAAY,uBAAoB,GAElE,EAAE,uBAAoB,GAA8B;AAE1D,KAAI,CAAC,EACH,QAAO,kBAAA,GAAA,EAAK,CAAA;CAEd,IAAM,IAAiB,IACnB,KAAK,IAAI,EAAO,QAAQ,EAAE,GAC1B,KAAK,IAAI,EAAO,QAAQ,EAAE;AAI9B,QAHI,MAAmB,IACd,kBAAA,GAAA,EAAK,CAAA,GAGZ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAW;EACX,WAAW,8BACT,IAAa,eAAe;EAE9B,IAAI;GAAE,OAAO;GAAQ,OAAO;GAAY,SAAS,EAAE,IAAI,IAAK;GAAE;YALhE,CAOE,kBAAC,SAAD,EAAA,UACE,kBAAC,GAAD;GACE,WAAW;GACX,IAAI;IAAE,cAAc;IAAa,mBAAmB;IAAY;aAFlE,CAIE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAS;IACT,IAAI;KACF,YAAY;KACZ,MAAM;KACP;cAEA;IACU,CAAA,EACV,CAAA,EACL,kBAAC,MAAD;IAAI,OAAO;KAAE,WAAW;KAAS,aAAa;KAAQ;cACpD,kBAAC,GAAD;KACE,SAAS;KACT,IAAI;MACF,MAAM;MACN,YAAY;MACZ,WAAW;MACZ;eAEA;KACU,CAAA;IACV,CAAA,CACD;MACA,CAAA,EACR,kBAAC,SAAD,EAAA,UACG,EAAO,MAAM,GAAG,EAAe,CAAC,KAAK,GAAY,MAAU;GAC1D,IAAM,IAAe,EAAS,EAAW,OAAA,GAAyB;AAClE,UACE,kBAAC,MAAD,EAAA,UAAA,CACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,KAAK;KACN;cALH,CAOE,kBAAC,GAAD;KACE,IAAI;MACF,OAAO;MACP,QAAQ;MACR,QAAQ;MACR,iBAAiB,EAAO;MACzB;KAED,OAAO,EAAE,QAAQ,WAAW;KAC5B,EAFK,eAAe,IAEpB,EACF,kBAAC,GAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,UAAU,QAAQ;eACjD;KACU,CAAA,CACT;OACH,CAAA,EACL,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;KACZ;cAEA,EAAW;IACD,CAAA,EACV,CAAA,CACF,EAAA,EApCI,EAAW,MAoCf;IAEP,EACI,CAAA,CACJ;KACL,KACC,kBAAC,GAAD;EAAK,IAAI,EAAE,IAAI,GAAG;YAChB,kBAAC,GAAD;GAAM,MAAM;aAAZ;IAA6B;IACrB,EAAO;IAAO;IAAE;IAAU;IAC3B;;EACH,CAAA,CAEP,EAAA,CAAA"}
+{"version":3,"file":"FacetPlotLegendTable.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendTable.tsx"],"sourcesContent":["import { Box, Link, Typography } from '@mui/material'\nimport {\n  FacetPlotLegendProps,\n  MAX_LEGEND_LENGTH,\n  truncate,\n} from './FacetPlotLegendUtils'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\n\ntype FacetPlotLegendTableProps = FacetPlotLegendProps & {\n  facetName?: string\n  linkToFullQuery?: string\n}\n\nexport function FacetPlotLegendTable(props: FacetPlotLegendTableProps) {\n  const { facetName, labels, colors = [], isExpanded, linkToFullQuery } = props\n\n  const { unitDescription } = useQueryVisualizationContext()\n\n  if (!labels) {\n    return <></>\n  }\n  const numLegendItems = isExpanded\n    ? Math.min(labels.length, 9)\n    : Math.min(labels.length, 4)\n  if (numLegendItems === 0) {\n    return <></>\n  }\n  return (\n    <>\n      <Box\n        component={'table'}\n        className={`FacetNavPanel__body__legend${\n          isExpanded ? '--expanded' : ''\n        }`}\n        sx={{ width: '100%', color: 'grey.800', 'td,th': { py: 0.5 } }}\n      >\n        <thead>\n          <Box\n            component={'tr'}\n            sx={{ borderBottom: '1px solid', borderBottomColor: 'grey.300' }}\n          >\n            <th>\n              <Typography\n                variant={'body1'}\n                sx={{\n                  fontWeight: 700,\n                  size: '14px',\n                }}\n              >\n                {facetName}\n              </Typography>\n            </th>\n            <th style={{ textAlign: 'right', marginRight: '16px' }}>\n              <Typography\n                variant={'body1'}\n                sx={{\n                  size: '14px',\n                  fontWeight: 700,\n                  textAlign: 'right',\n                }}\n              >\n                {unitDescription}\n              </Typography>\n            </th>\n          </Box>\n        </thead>\n        <tbody>\n          {labels.slice(0, numLegendItems).map((facetValue, index) => {\n            const labelDisplay = truncate(facetValue.label, MAX_LEGEND_LENGTH)\n            return (\n              <tr key={facetValue.label}>\n                <td>\n                  <Box\n                    sx={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 1,\n                    }}\n                  >\n                    <Box\n                      sx={{\n                        width: '14px',\n                        height: '14px',\n                        cursor: 'default',\n                        backgroundColor: colors[index],\n                      }}\n                      key={`legendLabel_${index}`}\n                      style={{ cursor: 'default' }}\n                    />\n                    <Typography variant=\"body1\" sx={{ fontSize: '14px' }}>\n                      {labelDisplay}\n                    </Typography>\n                  </Box>\n                </td>\n                <td>\n                  <Typography\n                    variant=\"body1\"\n                    sx={{\n                      fontSize: '14px',\n                      color: 'grey.600',\n                      textAlign: 'right',\n                    }}\n                  >\n                    {facetValue.count}\n                  </Typography>\n                </td>\n              </tr>\n            )\n          })}\n        </tbody>\n      </Box>\n      {linkToFullQuery && (\n        <Box sx={{ my: 2 }}>\n          <Link href={linkToFullQuery}>\n            View {labels.length} {facetName} options\n          </Link>\n        </Box>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;AAaA,SAAgB,EAAqB,GAAkC;CACrE,IAAM,EAAE,cAAW,WAAQ,YAAS,CAAC,GAAG,eAAY,uBAAoB,GAElE,EAAE,uBAAoB,EAA6B;CAEzD,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,IAAiB,IACnB,KAAK,IAAI,EAAO,QAAQ,CAAC,IACzB,KAAK,IAAI,EAAO,QAAQ,CAAC;CAI7B,OAHI,MAAmB,IACd,kBAAA,GAAA,CAAI,CAAA,IAGX,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAW;EACX,WAAW,8BACT,IAAa,eAAe;EAE9B,IAAI;GAAE,OAAO;GAAQ,OAAO;GAAY,SAAS,EAAE,IAAI,GAAI;EAAE;YAL/D,CAOE,kBAAC,SAAD,EAAA,UACE,kBAAC,GAAD;GACE,WAAW;GACX,IAAI;IAAE,cAAc;IAAa,mBAAmB;GAAW;aAFjE,CAIE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAS;IACT,IAAI;KACF,YAAY;KACZ,MAAM;IACR;cAEC;GACS,CAAA,EACV,CAAA,GACJ,kBAAC,MAAD;IAAI,OAAO;KAAE,WAAW;KAAS,aAAa;IAAO;cACnD,kBAAC,GAAD;KACE,SAAS;KACT,IAAI;MACF,MAAM;MACN,YAAY;MACZ,WAAW;KACb;eAEC;IACS,CAAA;GACV,CAAA,CACD;KACA,CAAA,GACP,kBAAC,SAAD,EAAA,UACG,EAAO,MAAM,GAAG,CAAc,EAAE,KAAK,GAAY,MAAU;GAC1D,IAAM,IAAe,EAAS,EAAW,OAAA,EAAwB;GACjE,OACE,kBAAC,MAAD,EAAA,UAAA,CACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,KAAK;IACP;cALF,CAOE,kBAAC,GAAD;KACE,IAAI;MACF,OAAO;MACP,QAAQ;MACR,QAAQ;MACR,iBAAiB,EAAO;KAC1B;KAEA,OAAO,EAAE,QAAQ,UAAU;IAC5B,GAFM,eAAe,GAErB,GACD,kBAAC,GAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,UAAU,OAAO;eAChD;IACS,CAAA,CACT;MACH,CAAA,GACJ,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;IACb;cAEC,EAAW;GACF,CAAA,EACV,CAAA,CACF,EAAA,GApCK,EAAW,KAoChB;EAER,CAAC,EACI,CAAA,CACJ;KACJ,KACC,kBAAC,GAAD;EAAK,IAAI,EAAE,IAAI,EAAE;YACf,kBAAC,GAAD;GAAM,MAAM;aAAZ;IAA6B;IACrB,EAAO;IAAO;IAAE;IAAU;GAC5B;;CACH,CAAA,CAEP,EAAA,CAAA;AAEN"}

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

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotLegendUtils.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendUtils.ts"],"sourcesContent":["export const MAX_LEGEND_LENGTH: number = 30\n\nexport function truncate(str: string | undefined, n: number) {\n  if (!str) {\n    return str\n  }\n  const trimmedStr: string = str.trim()\n  return trimmedStr.length > n ? trimmedStr.substring(0, n - 1) + '…' : str\n}\n\nexport type FacetWithLabel = {\n  label: string\n  count: number\n}\n\nexport type FacetPlotLegendProps = {\n  labels?: FacetWithLabel[]\n  colors?: string[]\n  isExpanded: boolean\n}\n"],"mappings":";AAAA,IAAa,IAA4B;AAEzC,SAAgB,EAAS,GAAyB,GAAW;AAC3D,KAAI,CAAC,EACH,QAAO;CAET,IAAM,IAAqB,EAAI,MAAM;AACrC,QAAO,EAAW,SAAS,IAAI,EAAW,UAAU,GAAG,IAAI,EAAE,GAAG,MAAM"}
+{"version":3,"file":"FacetPlotLegendUtils.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendUtils.ts"],"sourcesContent":["export const MAX_LEGEND_LENGTH: number = 30\n\nexport function truncate(str: string | undefined, n: number) {\n  if (!str) {\n    return str\n  }\n  const trimmedStr: string = str.trim()\n  return trimmedStr.length > n ? trimmedStr.substring(0, n - 1) + '…' : str\n}\n\nexport type FacetWithLabel = {\n  label: string\n  count: number\n}\n\nexport type FacetPlotLegendProps = {\n  labels?: FacetWithLabel[]\n  colors?: string[]\n  isExpanded: boolean\n}\n"],"mappings":";AAAA,IAAa,IAA4B;AAEzC,SAAgB,EAAS,GAAyB,GAAW;CAC3D,IAAI,CAAC,GACH,OAAO;CAET,IAAM,IAAqB,EAAI,KAAK;CACpC,OAAO,EAAW,SAAS,IAAI,EAAW,UAAU,GAAG,IAAI,CAAC,IAAI,MAAM;AACxE"}

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

@@ -1 +1 @@
-{"version":3,"file":"PlotsContainer.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"sourcesContent":["import { UniqueFacetIdentifier } from '@/utils'\nimport { facetObjectMatchesDefinition } from '@/utils/functions/queryUtils'\nimport { Box, Button } from '@mui/material'\nimport type { PlotType as PlotlyPlotType } from 'plotly.js-basic-dist'\nimport { Suspense, useEffect, useMemo, useState } from 'react'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport QueryWrapperSynapsePlot, {\n  QueryWrapperSynapsePlotProps,\n} from '../../QueryWrapperPlotNav/QueryWrapperSynapsePlot'\nimport FacetNavPanel, {\n  FacetNavPanelProps,\n  PlotType,\n} from '../facet-nav/FacetNavPanel'\nimport { PlotsContainerSkeleton } from './PlotsContainerSkeleton'\nimport useFacetPlots, { getFacets } from './useFacetPlots'\n\nconst DEFAULT_VISIBLE_PLOTS = 2\ntype ShowMoreState = 'MORE' | 'LESS' | 'NONE'\nexport type PlotsContainerProps = {\n  facetsToPlot?: string[]\n  customPlots?: QueryWrapperSynapsePlotProps[]\n  initialPlotTypeByFacetColumnName?: Record<string, PlotType>\n}\ntype CustomPlotIdentifier = {\n  title: string\n  __custom: true\n}\nexport type PlotIdentifier = UniqueFacetIdentifier | CustomPlotIdentifier\n\nexport type UiPlotState = {\n  plotId: PlotIdentifier\n  isHidden: boolean\n  plotType: PlotType\n  index?: number\n}\nconst plotMatchesDefinition = (\n  definition: PlotIdentifier,\n  plotId: PlotIdentifier,\n) => {\n  if ('__custom' in plotId && '__custom' in definition) {\n    return definition.title == plotId.title\n  } else if (!('__custom' in plotId) && !('__custom' in definition)) {\n    return facetObjectMatchesDefinition(definition, plotId)\n  } else {\n    return false\n  }\n}\n\nfunction convertPlotlyPlotTypeToFacetNavPlotType(\n  plotlyPlotType: PlotlyPlotType,\n): PlotType {\n  if (plotlyPlotType === 'bar') {\n    return 'BAR'\n  } else if (plotlyPlotType === 'pie') {\n    return 'PIE'\n  }\n  return 'PIE'\n}\n\nconst generatePlotKey = (plotUiState: UiPlotState) => {\n  if ('__custom' in plotUiState.plotId) {\n    // For custom plots\n    return `custom-${plotUiState.plotId.title}`\n  } else {\n    // For facet plots\n    return `facet-${plotUiState.plotId.columnName}-${plotUiState.plotId.jsonPath}`\n  }\n}\n\nconst isPlotInState = (\n  plotId: PlotIdentifier,\n  plotUiStateArray: UiPlotState[],\n): boolean => {\n  return !!plotUiStateArray.find(plot => {\n    return plotMatchesDefinition(plot.plotId, plotId)\n  })\n}\n\nconst getCustomPlotIdentifier = (\n  customPlot: QueryWrapperSynapsePlotProps,\n): PlotIdentifier => {\n  return { __custom: true, title: customPlot.title ?? '' }\n}\n\nconst getCombinedNewPlots = (\n  customPlots: QueryWrapperSynapsePlotProps[] = [],\n  facetNavPanelPropsArray: Pick<\n    FacetNavPanelProps,\n    'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n  >[] = [],\n  initialPlotTypeByFacetColumnName?: Record<string, PlotType>,\n): UiPlotState[] => [\n  ...customPlots.map((plotProps, index) => ({\n    plotId: getCustomPlotIdentifier(plotProps),\n    isHidden: index >= DEFAULT_VISIBLE_PLOTS,\n    plotType: convertPlotlyPlotTypeToFacetNavPlotType(plotProps.type),\n  })),\n  ...facetNavPanelPropsArray.map((facetPlotProps, index) => ({\n    plotId: facetPlotProps.facetToPlot,\n    isHidden: index + customPlots.length >= DEFAULT_VISIBLE_PLOTS,\n    plotType:\n      initialPlotTypeByFacetColumnName?.[\n        facetPlotProps.facetToPlot.columnName\n      ] ?? DEFAULT_PLOT_TYPE,\n  })),\n]\n\n// Remove plots that are no longer in props from prevPlots\nconst isPlotStillPresent = (\n  prevPlot: UiPlotState,\n  customPlots: QueryWrapperSynapsePlotProps[],\n  facetNavPanelProps: Pick<\n    FacetNavPanelProps,\n    'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n  >[],\n): boolean => {\n  return (\n    customPlots.some(customPlot =>\n      plotMatchesDefinition(\n        getCustomPlotIdentifier(customPlot),\n        prevPlot.plotId,\n      ),\n    ) ||\n    facetNavPanelProps.some(facetPlot =>\n      plotMatchesDefinition(facetPlot.facetToPlot, prevPlot.plotId),\n    )\n  )\n} // fn returns true iff the plot id is in customPlots or facetNavPanelPropsArray\n\nconst DEFAULT_PLOT_TYPE: PlotType = 'PIE'\n\nconst DEFAULT_FACETS_TO_PLOT: string[] = []\nconst DEFAULT_CUSTOM_PLOTS: QueryWrapperSynapsePlotProps[] = []\n\nfunction PlotsContainer(props: PlotsContainerProps) {\n  const {\n    facetsToPlot = DEFAULT_FACETS_TO_PLOT,\n    customPlots = DEFAULT_CUSTOM_PLOTS,\n    initialPlotTypeByFacetColumnName,\n  } = props\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { showPlots: showPlotVisualization } = useQueryVisualizationContext()\n  const [plotUiStateArray, setPlotUiStateArray] = useState<UiPlotState[]>([])\n  const facetNavPanelPropsArray = useFacetPlots(facetsToPlot)\n\n  const getPlotType = (plotId: PlotIdentifier): PlotType => {\n    const plotType = plotUiStateArray.find(item =>\n      plotMatchesDefinition(plotId, item.plotId),\n    )?.plotType\n    return plotType ?? DEFAULT_PLOT_TYPE\n  }\n\n  useEffect(() => {\n    const combinedNewPlots = getCombinedNewPlots(\n      customPlots,\n      facetNavPanelPropsArray,\n      initialPlotTypeByFacetColumnName,\n    )\n\n    // Update the state with new plots\n    setPlotUiStateArray(prevPlots => {\n      // Filter to only include new plots\n      const newPlots = combinedNewPlots.filter(plot => {\n        const inState = isPlotInState(plot.plotId, prevPlots)\n        return !inState\n      })\n\n      const updatedPlots = prevPlots.filter(prevPlot =>\n        isPlotStillPresent(prevPlot, customPlots, facetNavPanelPropsArray),\n      )\n\n      // Append new plots\n      const combinedPlots = [...updatedPlots, ...newPlots]\n      return combinedPlots\n    })\n  }, [customPlots, facetNavPanelPropsArray, initialPlotTypeByFacetColumnName])\n\n  // when 'show more/less' is clicked\n  const onShowMoreClick = (shouldShowMore: boolean) => {\n    setPlotUiStateArray(plotUiStateArray => {\n      return plotUiStateArray.map((item, index) => {\n        if (shouldShowMore) {\n          // show everything\n          return { ...item, isHidden: false }\n        }\n        // otherwise hide everything except the first few items\n        return { ...item, isHidden: index >= DEFAULT_VISIBLE_PLOTS }\n      })\n    })\n  }\n\n  const isPlotHiddenInGrid = (plotId: PlotIdentifier) => {\n    const itemHidden = plotUiStateArray.find(\n      item =>\n        plotMatchesDefinition(plotId, item.plotId) && item.isHidden === true,\n    )\n    const result = itemHidden !== undefined\n    return result\n  }\n\n  const showMoreButtonState = useMemo<ShowMoreState>(() => {\n    if (\n      // if at least one item is hidden\n      plotUiStateArray.find(item => item.isHidden === true)\n    ) {\n      return 'MORE'\n    } else if (plotUiStateArray.length <= DEFAULT_VISIBLE_PLOTS) {\n      return 'NONE'\n    } else {\n      return 'LESS'\n    }\n  }, [plotUiStateArray])\n\n  // hides plot graph\n  const hidePlotInGrid = (plotId: PlotIdentifier) => {\n    setUiPropertyForPlot(plotId, 'isHidden', true)\n  }\n\n  const setPlotType = (plotId: PlotIdentifier, plotType: PlotType) => {\n    setUiPropertyForPlot(plotId, 'plotType', plotType)\n  }\n\n  const setUiPropertyForPlot = (\n    plotId: PlotIdentifier,\n    propName: keyof UiPlotState,\n    value: boolean | PlotType, // 'the possible values of the above type' (currently can't be specified in TS using symbols)\n  ) => {\n    setPlotUiStateArray(plotUiStateArray =>\n      plotUiStateArray.map(item =>\n        plotMatchesDefinition(plotId, item.plotId)\n          ? { ...item, [propName]: value }\n          : item,\n      ),\n    )\n  }\n\n  const colorTracker: { facet: PlotIdentifier; colorIndex: number }[] =\n    // TODO: customPlots should use the color index\n    // additionally, it is unclear why this object is created\n    // We can probably just pass the index from `plotUiStateArray.map)\n    getFacets(queryMetadata, facetsToPlot).map((el, index) => {\n      return {\n        facet: { columnName: el.columnName, jsonPath: el.jsonPath },\n        colorIndex: index,\n      }\n    })\n\n  return (\n    <>\n      {plotUiStateArray.length > 0 && (\n        <div\n          className={`PlotsContainer ${showPlotVisualization ? '' : 'hidden'} ${\n            showMoreButtonState === 'LESS' ? 'less' : ''\n          }`}\n        >\n          <div className=\"PlotsContainer__row\" role=\"list\">\n            {plotUiStateArray.map(plotUiState => {\n              const isCustomPlot = '__custom' in plotUiState.plotId\n              const customPlotProps = customPlots.find(customPlot =>\n                plotMatchesDefinition(\n                  getCustomPlotIdentifier(customPlot),\n                  plotUiState.plotId,\n                ),\n              )\n              const facetNavPanelProps = facetNavPanelPropsArray.find(props =>\n                plotMatchesDefinition(props.facetToPlot, plotUiState.plotId),\n              )\n\n              return (\n                <div\n                  className={\n                    plotUiState.plotType === 'BAR'\n                      ? 'PlotsContainer__row__item--full-width'\n                      : undefined\n                  }\n                  style={{\n                    minWidth: '435px',\n                    display: isPlotHiddenInGrid(plotUiState.plotId)\n                      ? 'none'\n                      : 'block',\n                  }}\n                  key={generatePlotKey(plotUiState)}\n                >\n                  {isCustomPlot && customPlotProps && (\n                    <QueryWrapperSynapsePlot\n                      {...customPlotProps}\n                      onHide={() => hidePlotInGrid(plotUiState.plotId)}\n                    />\n                  )}\n                  {!isCustomPlot && facetNavPanelProps && (\n                    <FacetNavPanel\n                      index={\n                        colorTracker.find(el =>\n                          plotMatchesDefinition(el.facet, plotUiState.plotId),\n                        )?.colorIndex!\n                      }\n                      onHide={() => hidePlotInGrid(plotUiState.plotId)}\n                      plotType={getPlotType(plotUiState.plotId)}\n                      onSetPlotType={(plotType: PlotType) =>\n                        setPlotType(plotUiState.plotId, plotType)\n                      }\n                      isModalView={false}\n                      {...facetNavPanelProps}\n                    />\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {showMoreButtonState !== 'NONE' && (\n            <Box\n              sx={{\n                display: 'flex',\n                justifyContent: 'center',\n                backgroundColor: 'grey.100',\n                p: 2,\n                mt: 2,\n              }}\n            >\n              <Button\n                variant=\"contained\"\n                color=\"secondary\"\n                onClick={() => onShowMoreClick(showMoreButtonState === 'MORE')}\n                sx={{ width: '150px' }}\n              >\n                {showMoreButtonState === 'LESS'\n                  ? 'Hide Charts'\n                  : 'View All Charts'}\n              </Button>\n            </Box>\n          )}\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default function PlotsContainerWithSuspense(props: PlotsContainerProps) {\n  const { showPlots } = useQueryVisualizationContext()\n  return (\n    <Suspense fallback={showPlots ? <PlotsContainerSkeleton /> : null}>\n      <PlotsContainer {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"PlotsContainer.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"sourcesContent":["import { UniqueFacetIdentifier } from '@/utils'\nimport { facetObjectMatchesDefinition } from '@/utils/functions/queryUtils'\nimport { Box, Button } from '@mui/material'\nimport type { PlotType as PlotlyPlotType } from 'plotly.js-basic-dist'\nimport { Suspense, useEffect, useMemo, useState } from 'react'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport QueryWrapperSynapsePlot, {\n  QueryWrapperSynapsePlotProps,\n} from '../../QueryWrapperPlotNav/QueryWrapperSynapsePlot'\nimport FacetNavPanel, {\n  FacetNavPanelProps,\n  PlotType,\n} from '../facet-nav/FacetNavPanel'\nimport { PlotsContainerSkeleton } from './PlotsContainerSkeleton'\nimport useFacetPlots, { getFacets } from './useFacetPlots'\n\nconst DEFAULT_VISIBLE_PLOTS = 2\ntype ShowMoreState = 'MORE' | 'LESS' | 'NONE'\nexport type PlotsContainerProps = {\n  facetsToPlot?: string[]\n  customPlots?: QueryWrapperSynapsePlotProps[]\n  initialPlotTypeByFacetColumnName?: Record<string, PlotType>\n}\ntype CustomPlotIdentifier = {\n  title: string\n  __custom: true\n}\nexport type PlotIdentifier = UniqueFacetIdentifier | CustomPlotIdentifier\n\nexport type UiPlotState = {\n  plotId: PlotIdentifier\n  isHidden: boolean\n  plotType: PlotType\n  index?: number\n}\nconst plotMatchesDefinition = (\n  definition: PlotIdentifier,\n  plotId: PlotIdentifier,\n) => {\n  if ('__custom' in plotId && '__custom' in definition) {\n    return definition.title == plotId.title\n  } else if (!('__custom' in plotId) && !('__custom' in definition)) {\n    return facetObjectMatchesDefinition(definition, plotId)\n  } else {\n    return false\n  }\n}\n\nfunction convertPlotlyPlotTypeToFacetNavPlotType(\n  plotlyPlotType: PlotlyPlotType,\n): PlotType {\n  if (plotlyPlotType === 'bar') {\n    return 'BAR'\n  } else if (plotlyPlotType === 'pie') {\n    return 'PIE'\n  }\n  return 'PIE'\n}\n\nconst generatePlotKey = (plotUiState: UiPlotState) => {\n  if ('__custom' in plotUiState.plotId) {\n    // For custom plots\n    return `custom-${plotUiState.plotId.title}`\n  } else {\n    // For facet plots\n    return `facet-${plotUiState.plotId.columnName}-${plotUiState.plotId.jsonPath}`\n  }\n}\n\nconst isPlotInState = (\n  plotId: PlotIdentifier,\n  plotUiStateArray: UiPlotState[],\n): boolean => {\n  return !!plotUiStateArray.find(plot => {\n    return plotMatchesDefinition(plot.plotId, plotId)\n  })\n}\n\nconst getCustomPlotIdentifier = (\n  customPlot: QueryWrapperSynapsePlotProps,\n): PlotIdentifier => {\n  return { __custom: true, title: customPlot.title ?? '' }\n}\n\nconst getCombinedNewPlots = (\n  customPlots: QueryWrapperSynapsePlotProps[] = [],\n  facetNavPanelPropsArray: Pick<\n    FacetNavPanelProps,\n    'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n  >[] = [],\n  initialPlotTypeByFacetColumnName?: Record<string, PlotType>,\n): UiPlotState[] => [\n  ...customPlots.map((plotProps, index) => ({\n    plotId: getCustomPlotIdentifier(plotProps),\n    isHidden: index >= DEFAULT_VISIBLE_PLOTS,\n    plotType: convertPlotlyPlotTypeToFacetNavPlotType(plotProps.type),\n  })),\n  ...facetNavPanelPropsArray.map((facetPlotProps, index) => ({\n    plotId: facetPlotProps.facetToPlot,\n    isHidden: index + customPlots.length >= DEFAULT_VISIBLE_PLOTS,\n    plotType:\n      initialPlotTypeByFacetColumnName?.[\n        facetPlotProps.facetToPlot.columnName\n      ] ?? DEFAULT_PLOT_TYPE,\n  })),\n]\n\n// Remove plots that are no longer in props from prevPlots\nconst isPlotStillPresent = (\n  prevPlot: UiPlotState,\n  customPlots: QueryWrapperSynapsePlotProps[],\n  facetNavPanelProps: Pick<\n    FacetNavPanelProps,\n    'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n  >[],\n): boolean => {\n  return (\n    customPlots.some(customPlot =>\n      plotMatchesDefinition(\n        getCustomPlotIdentifier(customPlot),\n        prevPlot.plotId,\n      ),\n    ) ||\n    facetNavPanelProps.some(facetPlot =>\n      plotMatchesDefinition(facetPlot.facetToPlot, prevPlot.plotId),\n    )\n  )\n} // fn returns true iff the plot id is in customPlots or facetNavPanelPropsArray\n\nconst DEFAULT_PLOT_TYPE: PlotType = 'PIE'\n\nconst DEFAULT_FACETS_TO_PLOT: string[] = []\nconst DEFAULT_CUSTOM_PLOTS: QueryWrapperSynapsePlotProps[] = []\n\nfunction PlotsContainer(props: PlotsContainerProps) {\n  const {\n    facetsToPlot = DEFAULT_FACETS_TO_PLOT,\n    customPlots = DEFAULT_CUSTOM_PLOTS,\n    initialPlotTypeByFacetColumnName,\n  } = props\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { showPlots: showPlotVisualization } = useQueryVisualizationContext()\n  const [plotUiStateArray, setPlotUiStateArray] = useState<UiPlotState[]>([])\n  const facetNavPanelPropsArray = useFacetPlots(facetsToPlot)\n\n  const getPlotType = (plotId: PlotIdentifier): PlotType => {\n    const plotType = plotUiStateArray.find(item =>\n      plotMatchesDefinition(plotId, item.plotId),\n    )?.plotType\n    return plotType ?? DEFAULT_PLOT_TYPE\n  }\n\n  useEffect(() => {\n    const combinedNewPlots = getCombinedNewPlots(\n      customPlots,\n      facetNavPanelPropsArray,\n      initialPlotTypeByFacetColumnName,\n    )\n\n    // Update the state with new plots\n    setPlotUiStateArray(prevPlots => {\n      // Filter to only include new plots\n      const newPlots = combinedNewPlots.filter(plot => {\n        const inState = isPlotInState(plot.plotId, prevPlots)\n        return !inState\n      })\n\n      const updatedPlots = prevPlots.filter(prevPlot =>\n        isPlotStillPresent(prevPlot, customPlots, facetNavPanelPropsArray),\n      )\n\n      // Append new plots\n      const combinedPlots = [...updatedPlots, ...newPlots]\n      return combinedPlots\n    })\n  }, [customPlots, facetNavPanelPropsArray, initialPlotTypeByFacetColumnName])\n\n  // when 'show more/less' is clicked\n  const onShowMoreClick = (shouldShowMore: boolean) => {\n    setPlotUiStateArray(plotUiStateArray => {\n      return plotUiStateArray.map((item, index) => {\n        if (shouldShowMore) {\n          // show everything\n          return { ...item, isHidden: false }\n        }\n        // otherwise hide everything except the first few items\n        return { ...item, isHidden: index >= DEFAULT_VISIBLE_PLOTS }\n      })\n    })\n  }\n\n  const isPlotHiddenInGrid = (plotId: PlotIdentifier) => {\n    const itemHidden = plotUiStateArray.find(\n      item =>\n        plotMatchesDefinition(plotId, item.plotId) && item.isHidden === true,\n    )\n    const result = itemHidden !== undefined\n    return result\n  }\n\n  const showMoreButtonState = useMemo<ShowMoreState>(() => {\n    if (\n      // if at least one item is hidden\n      plotUiStateArray.find(item => item.isHidden === true)\n    ) {\n      return 'MORE'\n    } else if (plotUiStateArray.length <= DEFAULT_VISIBLE_PLOTS) {\n      return 'NONE'\n    } else {\n      return 'LESS'\n    }\n  }, [plotUiStateArray])\n\n  // hides plot graph\n  const hidePlotInGrid = (plotId: PlotIdentifier) => {\n    setUiPropertyForPlot(plotId, 'isHidden', true)\n  }\n\n  const setPlotType = (plotId: PlotIdentifier, plotType: PlotType) => {\n    setUiPropertyForPlot(plotId, 'plotType', plotType)\n  }\n\n  const setUiPropertyForPlot = (\n    plotId: PlotIdentifier,\n    propName: keyof UiPlotState,\n    value: boolean | PlotType, // 'the possible values of the above type' (currently can't be specified in TS using symbols)\n  ) => {\n    setPlotUiStateArray(plotUiStateArray =>\n      plotUiStateArray.map(item =>\n        plotMatchesDefinition(plotId, item.plotId)\n          ? { ...item, [propName]: value }\n          : item,\n      ),\n    )\n  }\n\n  const colorTracker: { facet: PlotIdentifier; colorIndex: number }[] =\n    // TODO: customPlots should use the color index\n    // additionally, it is unclear why this object is created\n    // We can probably just pass the index from `plotUiStateArray.map)\n    getFacets(queryMetadata, facetsToPlot).map((el, index) => {\n      return {\n        facet: { columnName: el.columnName, jsonPath: el.jsonPath },\n        colorIndex: index,\n      }\n    })\n\n  return (\n    <>\n      {plotUiStateArray.length > 0 && (\n        <div\n          className={`PlotsContainer ${showPlotVisualization ? '' : 'hidden'} ${\n            showMoreButtonState === 'LESS' ? 'less' : ''\n          }`}\n        >\n          <div className=\"PlotsContainer__row\" role=\"list\">\n            {plotUiStateArray.map(plotUiState => {\n              const isCustomPlot = '__custom' in plotUiState.plotId\n              const customPlotProps = customPlots.find(customPlot =>\n                plotMatchesDefinition(\n                  getCustomPlotIdentifier(customPlot),\n                  plotUiState.plotId,\n                ),\n              )\n              const facetNavPanelProps = facetNavPanelPropsArray.find(props =>\n                plotMatchesDefinition(props.facetToPlot, plotUiState.plotId),\n              )\n\n              return (\n                <div\n                  className={\n                    plotUiState.plotType === 'BAR'\n                      ? 'PlotsContainer__row__item--full-width'\n                      : undefined\n                  }\n                  style={{\n                    minWidth: '435px',\n                    display: isPlotHiddenInGrid(plotUiState.plotId)\n                      ? 'none'\n                      : 'block',\n                  }}\n                  key={generatePlotKey(plotUiState)}\n                >\n                  {isCustomPlot && customPlotProps && (\n                    <QueryWrapperSynapsePlot\n                      {...customPlotProps}\n                      onHide={() => hidePlotInGrid(plotUiState.plotId)}\n                    />\n                  )}\n                  {!isCustomPlot && facetNavPanelProps && (\n                    <FacetNavPanel\n                      index={\n                        colorTracker.find(el =>\n                          plotMatchesDefinition(el.facet, plotUiState.plotId),\n                        )?.colorIndex!\n                      }\n                      onHide={() => hidePlotInGrid(plotUiState.plotId)}\n                      plotType={getPlotType(plotUiState.plotId)}\n                      onSetPlotType={(plotType: PlotType) =>\n                        setPlotType(plotUiState.plotId, plotType)\n                      }\n                      isModalView={false}\n                      {...facetNavPanelProps}\n                    />\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {showMoreButtonState !== 'NONE' && (\n            <Box\n              sx={{\n                display: 'flex',\n                justifyContent: 'center',\n                backgroundColor: 'grey.100',\n                p: 2,\n                mt: 2,\n              }}\n            >\n              <Button\n                variant=\"contained\"\n                color=\"secondary\"\n                onClick={() => onShowMoreClick(showMoreButtonState === 'MORE')}\n                sx={{ width: '150px' }}\n              >\n                {showMoreButtonState === 'LESS'\n                  ? 'Hide Charts'\n                  : 'View All Charts'}\n              </Button>\n            </Box>\n          )}\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default function PlotsContainerWithSuspense(props: PlotsContainerProps) {\n  const { showPlots } = useQueryVisualizationContext()\n  return (\n    <Suspense fallback={showPlots ? <PlotsContainerSkeleton /> : null}>\n      <PlotsContainer {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PlotsContainerSkeleton.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/PlotsContainerSkeleton.tsx"],"sourcesContent":["import { Box, Skeleton, Stack } from '@mui/material'\n\nfunction PiePlotSkeleton() {\n  return (\n    <Box\n      className={'FacetNavPanel'}\n      sx={{\n        flexGrow: 1,\n      }}\n    >\n      <Box className={'FacetNavPanel__title'}>\n        <Skeleton variant={'rectangular'} height={20} width={170} />\n        <div style={{ margin: 'auto' }} />\n        <Skeleton variant={'rectangular'} height={20} width={20} />\n        <Skeleton\n          variant={'rectangular'}\n          height={20}\n          width={20}\n          sx={{ ml: 1 }}\n        />\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          height: 200,\n          px: 2,\n          minWidth: '435px',\n          flexGrow: 1,\n        }}\n      >\n        <Skeleton variant={'circular'} width={140} height={140} />\n        <Stack\n          sx={{\n            gap: 1,\n          }}\n        >\n          <Skeleton variant={'rectangular'} height={15} width={220} />\n          <Skeleton variant={'rectangular'} height={15} width={220} />\n          <Skeleton variant={'rectangular'} height={15} width={220} />\n          <Skeleton variant={'rectangular'} height={15} width={220} />\n        </Stack>\n      </Box>\n    </Box>\n  )\n}\n\nexport function PlotsContainerSkeleton() {\n  return (\n    <Box\n      className={'PlotsContainer'}\n      sx={{\n        display: 'flex',\n        flexWrap: 'wrap',\n        justifyContent: 'space-between',\n        gap: 4,\n      }}\n    >\n      <PiePlotSkeleton />\n      <PiePlotSkeleton />\n    </Box>\n  )\n}\n"],"mappings":";;;AAEA,SAAS,IAAkB;AACzB,QACE,kBAAC,GAAD;EACE,WAAW;EACX,IAAI,EACF,UAAU,GACX;YAJH,CAME,kBAAC,GAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,GAAD;KAAU,SAAS;KAAe,QAAQ;KAAI,OAAO;KAAO,CAAA;IAC5D,kBAAC,OAAD,EAAK,OAAO,EAAE,QAAQ,QAAQ,EAAI,CAAA;IAClC,kBAAC,GAAD;KAAU,SAAS;KAAe,QAAQ;KAAI,OAAO;KAAM,CAAA;IAC3D,kBAAC,GAAD;KACE,SAAS;KACT,QAAQ;KACR,OAAO;KACP,IAAI,EAAE,IAAI,GAAG;KACb,CAAA;IACE;MACN,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,gBAAgB;IAChB,YAAY;IACZ,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,UAAU;IACX;aATH,CAWE,kBAAC,GAAD;IAAU,SAAS;IAAY,OAAO;IAAK,QAAQ;IAAO,CAAA,EAC1D,kBAAC,GAAD;IACE,IAAI,EACF,KAAK,GACN;cAHH;KAKE,kBAAC,GAAD;MAAU,SAAS;MAAe,QAAQ;MAAI,OAAO;MAAO,CAAA;KAC5D,kBAAC,GAAD;MAAU,SAAS;MAAe,QAAQ;MAAI,OAAO;MAAO,CAAA;KAC5D,kBAAC,GAAD;MAAU,SAAS;MAAe,QAAQ;MAAI,OAAO;MAAO,CAAA;KAC5D,kBAAC,GAAD;MAAU,SAAS;MAAe,QAAQ;MAAI,OAAO;MAAO,CAAA;KACtD;MACJ;KACF;;;AAIV,SAAgB,IAAyB;AACvC,QACE,kBAAC,GAAD;EACE,WAAW;EACX,IAAI;GACF,SAAS;GACT,UAAU;GACV,gBAAgB;GAChB,KAAK;GACN;YAPH,CASE,kBAAC,GAAD,EAAmB,CAAA,EACnB,kBAAC,GAAD,EAAmB,CAAA,CACf"}
+{"version":3,"file":"PlotsContainerSkeleton.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/PlotsContainerSkeleton.tsx"],"sourcesContent":["import { Box, Skeleton, Stack } from '@mui/material'\n\nfunction PiePlotSkeleton() {\n  return (\n    <Box\n      className={'FacetNavPanel'}\n      sx={{\n        flexGrow: 1,\n      }}\n    >\n      <Box className={'FacetNavPanel__title'}>\n        <Skeleton variant={'rectangular'} height={20} width={170} />\n        <div style={{ margin: 'auto' }} />\n        <Skeleton variant={'rectangular'} height={20} width={20} />\n        <Skeleton\n          variant={'rectangular'}\n          height={20}\n          width={20}\n          sx={{ ml: 1 }}\n        />\n      </Box>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          height: 200,\n          px: 2,\n          minWidth: '435px',\n          flexGrow: 1,\n        }}\n      >\n        <Skeleton variant={'circular'} width={140} height={140} />\n        <Stack\n          sx={{\n            gap: 1,\n          }}\n        >\n          <Skeleton variant={'rectangular'} height={15} width={220} />\n          <Skeleton variant={'rectangular'} height={15} width={220} />\n          <Skeleton variant={'rectangular'} height={15} width={220} />\n          <Skeleton variant={'rectangular'} height={15} width={220} />\n        </Stack>\n      </Box>\n    </Box>\n  )\n}\n\nexport function PlotsContainerSkeleton() {\n  return (\n    <Box\n      className={'PlotsContainer'}\n      sx={{\n        display: 'flex',\n        flexWrap: 'wrap',\n        justifyContent: 'space-between',\n        gap: 4,\n      }}\n    >\n      <PiePlotSkeleton />\n      <PiePlotSkeleton />\n    </Box>\n  )\n}\n"],"mappings":";;;AAEA,SAAS,IAAkB;CACzB,OACE,kBAAC,GAAD;EACE,WAAW;EACX,IAAI,EACF,UAAU,EACZ;YAJF,CAME,kBAAC,GAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,GAAD;KAAU,SAAS;KAAe,QAAQ;KAAI,OAAO;IAAM,CAAA;IAC3D,kBAAC,OAAD,EAAK,OAAO,EAAE,QAAQ,OAAO,EAAI,CAAA;IACjC,kBAAC,GAAD;KAAU,SAAS;KAAe,QAAQ;KAAI,OAAO;IAAK,CAAA;IAC1D,kBAAC,GAAD;KACE,SAAS;KACT,QAAQ;KACR,OAAO;KACP,IAAI,EAAE,IAAI,EAAE;IACb,CAAA;GACE;MACL,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,gBAAgB;IAChB,YAAY;IACZ,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,UAAU;GACZ;aATF,CAWE,kBAAC,GAAD;IAAU,SAAS;IAAY,OAAO;IAAK,QAAQ;GAAM,CAAA,GACzD,kBAAC,GAAD;IACE,IAAI,EACF,KAAK,EACP;cAHF;KAKE,kBAAC,GAAD;MAAU,SAAS;MAAe,QAAQ;MAAI,OAAO;KAAM,CAAA;KAC3D,kBAAC,GAAD;MAAU,SAAS;MAAe,QAAQ;MAAI,OAAO;KAAM,CAAA;KAC3D,kBAAC,GAAD;MAAU,SAAS;MAAe,QAAQ;MAAI,OAAO;KAAM,CAAA;KAC3D,kBAAC,GAAD;MAAU,SAAS;MAAe,QAAQ;MAAI,OAAO;KAAM,CAAA;IACtD;KACJ;IACF;;AAET;AAEA,SAAgB,IAAyB;CACvC,OACE,kBAAC,GAAD;EACE,WAAW;EACX,IAAI;GACF,SAAS;GACT,UAAU;GACV,gBAAgB;GAChB,KAAK;EACP;YAPF,CASE,kBAAC,GAAD,CAAkB,CAAA,GAClB,kBAAC,GAAD,CAAkB,CAAA,CACf;;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionCriteriaPill.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/SelectionCriteriaPill.tsx"],"sourcesContent":["import { Close } from '@mui/icons-material'\nimport { Tooltip } from '@mui/material'\n\nexport type SelectionCriteriaPillProps = {\n  readonly key: string\n  readonly innerText: string\n  readonly tooltipText: string\n  readonly onRemoveFilter?: () => void\n  /** When true, the pill is shown without a remove button */\n  readonly isLocked?: boolean\n}\n\n/**\n * Renders a pill or chicklet to represent a Synapse Table Query filter/selection criterion.\n * @param props\n * @constructor\n */\nfunction SelectionCriteriaPill(props: SelectionCriteriaPillProps) {\n  const { innerText, tooltipText, onRemoveFilter, isLocked } = props\n\n  return (\n    <Tooltip title={tooltipText} placement={'top'}>\n      <div\n        className={`SelectionCriteriaPill${\n          isLocked ? ' SelectionCriteriaPill--locked' : ''\n        }`}\n      >\n        <span>{innerText}</span>\n        {!isLocked && onRemoveFilter && (\n          <button\n            onClick={onRemoveFilter}\n            className=\"SelectionCriteriaPill__btnRemove\"\n            title=\"deselect\"\n          >\n            <Close />\n          </button>\n        )}\n      </div>\n    </Tooltip>\n  )\n}\n\nexport default SelectionCriteriaPill\n"],"mappings":";;;;AAiBA,SAAS,EAAsB,GAAmC;CAChE,IAAM,EAAE,cAAW,gBAAa,mBAAgB,gBAAa;AAE7D,QACE,kBAAC,GAAD;EAAS,OAAO;EAAa,WAAW;YACtC,kBAAC,OAAD;GACE,WAAW,wBACT,IAAW,mCAAmC;aAFlD,CAKE,kBAAC,QAAD,EAAA,UAAO,GAAiB,CAAA,EACvB,CAAC,KAAY,KACZ,kBAAC,UAAD;IACE,SAAS;IACT,WAAU;IACV,OAAM;cAEN,kBAAC,GAAD,EAAS,CAAA;IACF,CAAA,CAEP;;EACE,CAAA"}
+{"version":3,"file":"SelectionCriteriaPill.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/SelectionCriteriaPill.tsx"],"sourcesContent":["import { Close } from '@mui/icons-material'\nimport { Tooltip } from '@mui/material'\n\nexport type SelectionCriteriaPillProps = {\n  readonly key: string\n  readonly innerText: string\n  readonly tooltipText: string\n  readonly onRemoveFilter?: () => void\n  /** When true, the pill is shown without a remove button */\n  readonly isLocked?: boolean\n}\n\n/**\n * Renders a pill or chicklet to represent a Synapse Table Query filter/selection criterion.\n * @param props\n * @constructor\n */\nfunction SelectionCriteriaPill(props: SelectionCriteriaPillProps) {\n  const { innerText, tooltipText, onRemoveFilter, isLocked } = props\n\n  return (\n    <Tooltip title={tooltipText} placement={'top'}>\n      <div\n        className={`SelectionCriteriaPill${\n          isLocked ? ' SelectionCriteriaPill--locked' : ''\n        }`}\n      >\n        <span>{innerText}</span>\n        {!isLocked && onRemoveFilter && (\n          <button\n            onClick={onRemoveFilter}\n            className=\"SelectionCriteriaPill__btnRemove\"\n            title=\"deselect\"\n          >\n            <Close />\n          </button>\n        )}\n      </div>\n    </Tooltip>\n  )\n}\n\nexport default SelectionCriteriaPill\n"],"mappings":";;;;AAiBA,SAAS,EAAsB,GAAmC;CAChE,IAAM,EAAE,cAAW,gBAAa,mBAAgB,gBAAa;CAE7D,OACE,kBAAC,GAAD;EAAS,OAAO;EAAa,WAAW;YACtC,kBAAC,OAAD;GACE,WAAW,wBACT,IAAW,mCAAmC;aAFlD,CAKE,kBAAC,QAAD,EAAA,UAAO,EAAgB,CAAA,GACtB,CAAC,KAAY,KACZ,kBAAC,UAAD;IACE,SAAS;IACT,WAAU;IACV,OAAM;cAEN,kBAAC,GAAD,CAAQ,CAAA;GACF,CAAA,CAEP;;CACE,CAAA;AAEb"}