synapse-react-client 4.0.19 → 4.0.21

package/dist/components/OAuthClientManagement/OAuthManagement.js.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthManagement.js","names":[],"sources":["../../../src/components/OAuthClientManagement/OAuthManagement.tsx"],"sourcesContent":["import InfiniteTableLayout from '@/components/layout/InfiniteTableLayout'\nimport SynapseClient from '@/synapse-client'\nimport { useGetOAuthClientInfinite } from '@/synapse-queries'\nimport { MoreVert } from '@mui/icons-material'\nimport { useSynapseContext } from '@/utils'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport { AddCircleTwoTone } from '@mui/icons-material'\nimport { Box, Button, Link, IconButton, Menu, MenuItem } from '@mui/material'\nimport { OAuthClient } from '@sage-bionetworks/synapse-client/generated/models/OAuthClient'\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  Row,\n  Table,\n  useReactTable,\n} from '@tanstack/react-table'\nimport dayjs from 'dayjs'\nimport { useMemo, useState } from 'react'\nimport CopyToClipboardInput from '../CopyToClipboardInput/CopyToClipboardInput'\nimport { DialogBase } from '../DialogBase'\nimport WarningDialog from '../SynapseForm/WarningDialog'\nimport ColumnHeader from '../TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport { displayToast } from '../ToastMessage'\nimport { CreateOAuthModal } from './CreateOAuthClient'\nimport OAuthAclEditorModal from '../OAuthClientAclEditor/OAuthAclEditorModal'\n\nconst columnHelper = createColumnHelper<OAuthClient>()\nfunction getColumns(columnOptions: {\n  setIsShowingVerification: (value: boolean) => void\n  setSelectedClient: (value: OAuthClient) => void\n  setIsShowingSecretWarning: (value: boolean) => void\n  setIsEdit: (value: boolean) => void\n  setIsShowingCreateClientModal: (value: boolean) => void\n  setIsShowingSharingSettings: (value: boolean) => void\n}) {\n  const {\n    setIsShowingVerification,\n    setSelectedClient,\n    setIsShowingSecretWarning,\n    setIsEdit,\n    setIsShowingCreateClientModal,\n    setIsShowingSharingSettings,\n  } = columnOptions\n  return [\n    columnHelper.accessor('createdOn', {\n      header: props => <ColumnHeader {...props} title={'Created'} />,\n      cell: info => formatDate(dayjs(info.getValue())),\n    }),\n    columnHelper.accessor('modifiedOn', {\n      header: props => <ColumnHeader {...props} title={'Modified'} />,\n      cell: info => formatDate(dayjs(info.getValue())),\n    }),\n    columnHelper.accessor('client_id', {\n      header: props => <ColumnHeader {...props} title={'ID'} />,\n    }),\n    columnHelper.accessor('client_name', {\n      header: props => <ColumnHeader {...props} title={'Client'} />,\n    }),\n    columnHelper.accessor('verified', {\n      header: props => <ColumnHeader {...props} title={'Verified'} />,\n      cell: ({ getValue }) =>\n        getValue() ? (\n          'Yes'\n        ) : (\n          <Button\n            variant=\"outlined\"\n            size=\"small\"\n            onClick={() => setIsShowingVerification(true)}\n          >\n            Submit Verification\n          </Button>\n        ),\n    }),\n    columnHelper.display({\n      id: 'actions',\n      header: props => <ColumnHeader {...props} title={'Actions'} />,\n      cell: ({ row }) => (\n        <ActionsMenuCell\n          row={row}\n          setSelectedClient={setSelectedClient}\n          setIsEdit={setIsEdit}\n          setIsShowingCreateClientModal={setIsShowingCreateClientModal}\n          setIsShowingSecretWarning={setIsShowingSecretWarning}\n          setIsShowingSharingSettings={setIsShowingSharingSettings}\n        />\n      ),\n    }),\n  ]\n}\n\nfunction ActionsMenuCell({\n  row,\n  setSelectedClient,\n  setIsEdit,\n  setIsShowingCreateClientModal,\n  setIsShowingSecretWarning,\n  setIsShowingSharingSettings,\n}: {\n  row: Row<OAuthClient>\n  setSelectedClient: (value: OAuthClient) => void\n  setIsEdit: (value: boolean) => void\n  setIsShowingCreateClientModal: (value: boolean) => void\n  setIsShowingSecretWarning: (value: boolean) => void\n  setIsShowingSharingSettings: (value: boolean) => void\n}) {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = Boolean(anchorEl)\n  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleMenuClose = () => {\n    setAnchorEl(null)\n  }\n  return (\n    <>\n      <IconButton\n        aria-label=\"more\"\n        aria-controls={`actions-menu-${row.id}`}\n        aria-haspopup=\"true\"\n        onClick={handleMenuOpen}\n        size=\"small\"\n      >\n        <MoreVert />\n      </IconButton>\n      <Menu\n        id={`actions-menu-${row.id}`}\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleMenuClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'right',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <MenuItem\n          onClick={() => {\n            setSelectedClient(row.original)\n            setIsEdit(true)\n            setIsShowingCreateClientModal(true)\n            handleMenuClose()\n          }}\n        >\n          Edit\n        </MenuItem>\n        <MenuItem\n          onClick={() => {\n            setSelectedClient(row.original)\n            setIsShowingSecretWarning(true)\n            handleMenuClose()\n          }}\n        >\n          Generate Secret\n        </MenuItem>\n        <MenuItem\n          onClick={() => {\n            setSelectedClient(row.original)\n            setIsShowingSharingSettings(true)\n            handleMenuClose()\n          }}\n        >\n          Sharing Settings\n        </MenuItem>\n      </Menu>\n    </>\n  )\n}\n\nexport function OAuthManagement() {\n  const { accessToken } = useSynapseContext()\n  const [isShowingSharingSettings, setIsShowingSharingSettings] =\n    useState(false)\n  const [isShowingCreateClientModal, setIsShowingCreateClientModal] =\n    useState(false)\n  const [isEdit, setIsEdit] = useState<boolean>(false)\n  const [selectedClient, setSelectedClient] = useState<OAuthClient>()\n  const [isShowingConfirmModal, setIsShowingConfirmModal] = useState(false)\n  const [isShowingSecretWarning, setIsShowingSecretWarning] = useState(false)\n  const [isShowingSecret, setIsShowingSecret] = useState(false)\n  const [secret, setSecret] = useState<string>()\n  const [isShowingVerification, setIsShowingVerification] = useState(false)\n\n  const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } =\n    useGetOAuthClientInfinite()\n  const oAuthClientList = useMemo(\n    () => data?.pages.flatMap(page => page.results || []) || [],\n    [data],\n  )\n\n  const warningHeader = 'Are you absolutely sure?'\n  const warningBody =\n    'If you have an existing secret, generating a new secret will make your application invalid after generation. This action cannot be undone.'\n\n  const onShowSecret = async () => {\n    setIsShowingSecretWarning(false)\n    try {\n      const secret = await SynapseClient.createOAuthClientSecret(\n        accessToken!,\n        selectedClient?.client_id!,\n      )\n      setSelectedClient(undefined)\n      setIsShowingSecret(true)\n      setSecret(secret.client_secret)\n    } catch (err: any) {\n      displayToast(err.reason as string, 'danger')\n    }\n  }\n\n  const columns = useMemo(\n    () =>\n      getColumns({\n        setIsShowingVerification,\n        setSelectedClient,\n        setIsShowingSecretWarning,\n        setIsEdit,\n        setIsShowingCreateClientModal,\n        setIsShowingSharingSettings,\n      }),\n    [],\n  )\n\n  const table: Table<OAuthClient> = useReactTable<OAuthClient>({\n    data: oAuthClientList,\n    columns,\n    getRowId: row => row.client_id!,\n    enableRowSelection: true,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    columnResizeMode: 'onChange',\n  })\n\n  const isEmpty = !isLoading && table.getRowModel().rows.length === 0\n\n  return (\n    <div>\n      <Box\n        sx={{\n          display: 'flex',\n          width: '100%',\n          justifyContent: 'flex-end',\n          mb: 2,\n        }}\n      >\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          onClick={() => {\n            setIsShowingCreateClientModal(true)\n            setIsEdit(false)\n          }}\n          sx={{ float: 'right' }}\n          startIcon={<AddCircleTwoTone />}\n        >\n          Create New Client\n        </Button>\n      </Box>\n      <InfiniteTableLayout\n        table={<StyledTanStackTable table={table} />}\n        isLoading={isLoading}\n        isEmpty={isEmpty}\n        hasNextPage={hasNextPage}\n        onFetchNextPageClicked={() => {\n          void fetchNextPage()\n        }}\n        isFetchingNextPage={isFetchingNextPage}\n      />\n      <CreateOAuthModal\n        onClose={() => {\n          setIsShowingCreateClientModal(false)\n        }}\n        isShowingModal={isShowingCreateClientModal}\n        client={isEdit ? selectedClient : undefined}\n        isEdit={isEdit}\n        setIsShowingConfirmModal={setIsShowingConfirmModal}\n        isShowingConfirmModal={isShowingConfirmModal}\n        setIsShowingModal={setIsShowingCreateClientModal}\n      />\n      <DialogBase\n        open={isShowingVerification}\n        onCancel={() => setIsShowingVerification(false)}\n        title=\"Submit Verification\"\n        content={\n          <>\n            <p>\n              In order to verify an OAuth client please submit a request to the{' '}\n              <Link\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                href=\"https://sagebionetworks.jira.com/servicedesk/customer/portal/9\"\n              >\n                Synapse Service Desk.\n              </Link>\n            </p>\n            <b>Please list the following items in your request:</b>\n            <ul>\n              <li>Your name</li>\n              <li>\n                The ID of the client to be verified <br />\n              </li>\n              <li>A description of your application</li>\n            </ul>\n            {/* <p>\n            Verification can take up to X weeks and we will notify you via X.\n          </p> */}\n          </>\n        }\n      />\n      <OAuthAclEditorModal\n        clientId={selectedClient?.client_id!}\n        open={isShowingSharingSettings}\n        onClose={() => setIsShowingSharingSettings(false)}\n      />\n      <WarningDialog\n        open={isShowingSecretWarning}\n        title={warningHeader}\n        content={warningBody}\n        onCancel={() => {\n          setIsShowingSecretWarning(false)\n          setSelectedClient(undefined)\n        }}\n        onConfirm={onShowSecret}\n        confirmButtonColor=\"error\"\n        confirmButtonText=\"Yes, Continue\"\n      />\n      {secret && (\n        <DialogBase\n          open={isShowingSecret}\n          title=\"App Secret\"\n          onCancel={() => {\n            setIsShowingSecret(false)\n            setSecret(undefined)\n          }}\n          content={\n            <>\n              <p>\n                <b>This secret will not be able to be retrieved again.</b> If\n                needed, in order to generate a new secret select Generate from\n                the Client List.\n              </p>\n              <CopyToClipboardInput value={secret} inputWidth={'400px'} />\n            </>\n          }\n        />\n      )}\n    </div>\n  )\n}\n\nexport default OAuthManagement\n"],"mappings":"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"}
+{"version":3,"file":"OAuthManagement.js","names":[],"sources":["../../../src/components/OAuthClientManagement/OAuthManagement.tsx"],"sourcesContent":["import InfiniteTableLayout from '@/components/layout/InfiniteTableLayout'\nimport SynapseClient from '@/synapse-client'\nimport { useGetOAuthClientInfinite } from '@/synapse-queries'\nimport { MoreVert } from '@mui/icons-material'\nimport { useSynapseContext } from '@/utils'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport { AddCircleTwoTone } from '@mui/icons-material'\nimport { Box, Button, Link, IconButton, Menu, MenuItem } from '@mui/material'\nimport { OAuthClient } from '@sage-bionetworks/synapse-client/generated/models/OAuthClient'\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  Row,\n  Table,\n  useReactTable,\n} from '@tanstack/react-table'\nimport dayjs from 'dayjs'\nimport { useMemo, useState } from 'react'\nimport CopyToClipboardInput from '../CopyToClipboardInput/CopyToClipboardInput'\nimport { DialogBase } from '../DialogBase'\nimport WarningDialog from '../SynapseForm/WarningDialog'\nimport ColumnHeader from '../TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport { displayToast } from '../ToastMessage'\nimport { CreateOAuthModal } from './CreateOAuthClient'\nimport OAuthAclEditorModal from '../OAuthClientAclEditor/OAuthAclEditorModal'\n\nconst columnHelper = createColumnHelper<OAuthClient>()\nfunction getColumns(columnOptions: {\n  setIsShowingVerification: (value: boolean) => void\n  setSelectedClient: (value: OAuthClient) => void\n  setIsShowingSecretWarning: (value: boolean) => void\n  setIsEdit: (value: boolean) => void\n  setIsShowingCreateClientModal: (value: boolean) => void\n  setIsShowingSharingSettings: (value: boolean) => void\n}) {\n  const {\n    setIsShowingVerification,\n    setSelectedClient,\n    setIsShowingSecretWarning,\n    setIsEdit,\n    setIsShowingCreateClientModal,\n    setIsShowingSharingSettings,\n  } = columnOptions\n  return [\n    columnHelper.accessor('createdOn', {\n      header: props => <ColumnHeader {...props} title={'Created'} />,\n      cell: info => formatDate(dayjs(info.getValue())),\n    }),\n    columnHelper.accessor('modifiedOn', {\n      header: props => <ColumnHeader {...props} title={'Modified'} />,\n      cell: info => formatDate(dayjs(info.getValue())),\n    }),\n    columnHelper.accessor('client_id', {\n      header: props => <ColumnHeader {...props} title={'ID'} />,\n    }),\n    columnHelper.accessor('client_name', {\n      header: props => <ColumnHeader {...props} title={'Client'} />,\n    }),\n    columnHelper.accessor('verified', {\n      header: props => <ColumnHeader {...props} title={'Verified'} />,\n      cell: ({ getValue }) =>\n        getValue() ? (\n          'Yes'\n        ) : (\n          <Button\n            variant=\"outlined\"\n            size=\"small\"\n            onClick={() => setIsShowingVerification(true)}\n          >\n            Submit Verification\n          </Button>\n        ),\n    }),\n    columnHelper.display({\n      id: 'actions',\n      header: props => <ColumnHeader {...props} title={'Actions'} />,\n      cell: ({ row }) => (\n        <ActionsMenuCell\n          row={row}\n          setSelectedClient={setSelectedClient}\n          setIsEdit={setIsEdit}\n          setIsShowingCreateClientModal={setIsShowingCreateClientModal}\n          setIsShowingSecretWarning={setIsShowingSecretWarning}\n          setIsShowingSharingSettings={setIsShowingSharingSettings}\n        />\n      ),\n    }),\n  ]\n}\n\nfunction ActionsMenuCell({\n  row,\n  setSelectedClient,\n  setIsEdit,\n  setIsShowingCreateClientModal,\n  setIsShowingSecretWarning,\n  setIsShowingSharingSettings,\n}: {\n  row: Row<OAuthClient>\n  setSelectedClient: (value: OAuthClient) => void\n  setIsEdit: (value: boolean) => void\n  setIsShowingCreateClientModal: (value: boolean) => void\n  setIsShowingSecretWarning: (value: boolean) => void\n  setIsShowingSharingSettings: (value: boolean) => void\n}) {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = Boolean(anchorEl)\n  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleMenuClose = () => {\n    setAnchorEl(null)\n  }\n  return (\n    <>\n      <IconButton\n        aria-label=\"more\"\n        aria-controls={`actions-menu-${row.id}`}\n        aria-haspopup=\"true\"\n        onClick={handleMenuOpen}\n        size=\"small\"\n      >\n        <MoreVert />\n      </IconButton>\n      <Menu\n        id={`actions-menu-${row.id}`}\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleMenuClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'right',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <MenuItem\n          onClick={() => {\n            setSelectedClient(row.original)\n            setIsEdit(true)\n            setIsShowingCreateClientModal(true)\n            handleMenuClose()\n          }}\n        >\n          Edit\n        </MenuItem>\n        <MenuItem\n          onClick={() => {\n            setSelectedClient(row.original)\n            setIsShowingSecretWarning(true)\n            handleMenuClose()\n          }}\n        >\n          Generate Secret\n        </MenuItem>\n        <MenuItem\n          onClick={() => {\n            setSelectedClient(row.original)\n            setIsShowingSharingSettings(true)\n            handleMenuClose()\n          }}\n        >\n          Sharing Settings\n        </MenuItem>\n      </Menu>\n    </>\n  )\n}\n\nexport function OAuthManagement() {\n  const { accessToken } = useSynapseContext()\n  const [isShowingSharingSettings, setIsShowingSharingSettings] =\n    useState(false)\n  const [isShowingCreateClientModal, setIsShowingCreateClientModal] =\n    useState(false)\n  const [isEdit, setIsEdit] = useState<boolean>(false)\n  const [selectedClient, setSelectedClient] = useState<OAuthClient>()\n  const [isShowingConfirmModal, setIsShowingConfirmModal] = useState(false)\n  const [isShowingSecretWarning, setIsShowingSecretWarning] = useState(false)\n  const [isShowingSecret, setIsShowingSecret] = useState(false)\n  const [secret, setSecret] = useState<string>()\n  const [isShowingVerification, setIsShowingVerification] = useState(false)\n\n  const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } =\n    useGetOAuthClientInfinite()\n  const oAuthClientList = useMemo(\n    () => data?.pages.flatMap(page => page.results || []) || [],\n    [data],\n  )\n\n  const warningHeader = 'Are you absolutely sure?'\n  const warningBody =\n    'If you have an existing secret, generating a new secret will make your application invalid after generation. This action cannot be undone.'\n\n  const onShowSecret = async () => {\n    setIsShowingSecretWarning(false)\n    try {\n      const secret = await SynapseClient.createOAuthClientSecret(\n        accessToken!,\n        selectedClient?.client_id!,\n      )\n      setSelectedClient(undefined)\n      setIsShowingSecret(true)\n      setSecret(secret.client_secret)\n    } catch (err: any) {\n      displayToast(err.reason as string, 'danger')\n    }\n  }\n\n  const columns = useMemo(\n    () =>\n      getColumns({\n        setIsShowingVerification,\n        setSelectedClient,\n        setIsShowingSecretWarning,\n        setIsEdit,\n        setIsShowingCreateClientModal,\n        setIsShowingSharingSettings,\n      }),\n    [],\n  )\n\n  const table: Table<OAuthClient> = useReactTable<OAuthClient>({\n    data: oAuthClientList,\n    columns,\n    getRowId: row => row.client_id!,\n    enableRowSelection: true,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    columnResizeMode: 'onChange',\n  })\n\n  const isEmpty = !isLoading && table.getRowModel().rows.length === 0\n\n  return (\n    <div>\n      <Box\n        sx={{\n          display: 'flex',\n          width: '100%',\n          justifyContent: 'flex-end',\n          mb: 2,\n        }}\n      >\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          onClick={() => {\n            setIsShowingCreateClientModal(true)\n            setIsEdit(false)\n          }}\n          sx={{ float: 'right' }}\n          startIcon={<AddCircleTwoTone />}\n        >\n          Create New Client\n        </Button>\n      </Box>\n      <InfiniteTableLayout\n        table={<StyledTanStackTable table={table} />}\n        isLoading={isLoading}\n        isEmpty={isEmpty}\n        hasNextPage={hasNextPage}\n        onFetchNextPageClicked={() => {\n          void fetchNextPage()\n        }}\n        isFetchingNextPage={isFetchingNextPage}\n      />\n      <CreateOAuthModal\n        onClose={() => {\n          setIsShowingCreateClientModal(false)\n        }}\n        isShowingModal={isShowingCreateClientModal}\n        client={isEdit ? selectedClient : undefined}\n        isEdit={isEdit}\n        setIsShowingConfirmModal={setIsShowingConfirmModal}\n        isShowingConfirmModal={isShowingConfirmModal}\n        setIsShowingModal={setIsShowingCreateClientModal}\n      />\n      <DialogBase\n        open={isShowingVerification}\n        onCancel={() => setIsShowingVerification(false)}\n        title=\"Submit Verification\"\n        content={\n          <>\n            <p>\n              In order to verify an OAuth client please submit a request to the{' '}\n              <Link\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                href=\"https://sagebionetworks.jira.com/servicedesk/customer/portal/9\"\n              >\n                Synapse Service Desk.\n              </Link>\n            </p>\n            <b>Please list the following items in your request:</b>\n            <ul>\n              <li>Your name</li>\n              <li>\n                The ID of the client to be verified <br />\n              </li>\n              <li>A description of your application</li>\n            </ul>\n            {/* <p>\n            Verification can take up to X weeks and we will notify you via X.\n          </p> */}\n          </>\n        }\n      />\n      <OAuthAclEditorModal\n        clientId={selectedClient?.client_id!}\n        open={isShowingSharingSettings}\n        onClose={() => setIsShowingSharingSettings(false)}\n      />\n      <WarningDialog\n        open={isShowingSecretWarning}\n        title={warningHeader}\n        content={warningBody}\n        onCancel={() => {\n          setIsShowingSecretWarning(false)\n          setSelectedClient(undefined)\n        }}\n        onConfirm={onShowSecret}\n        confirmButtonColor=\"error\"\n        confirmButtonText=\"Yes, Continue\"\n      />\n      {secret && (\n        <DialogBase\n          open={isShowingSecret}\n          title=\"App Secret\"\n          onCancel={() => {\n            setIsShowingSecret(false)\n            setSecret(undefined)\n          }}\n          content={\n            <>\n              <p>\n                <b>This secret will not be able to be retrieved again.</b> If\n                needed, in order to generate a new secret select Generate from\n                the Client List.\n              </p>\n              <CopyToClipboardInput value={secret} inputWidth={'400px'} />\n            </>\n          }\n        />\n      )}\n    </div>\n  )\n}\n\nexport default OAuthManagement\n"],"mappings":"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"}

package/dist/components/OrientationBanner/OrientationBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrientationBanner.js","names":[],"sources":["../../../src/components/OrientationBanner/OrientationBanner.tsx"],"sourcesContent":["import Illustrations from '@/assets/illustrations'\nimport { spreadSx } from '@/theme/spreadSx'\nimport { useCookiePreferences } from '@/utils/hooks/useCookiePreferences'\nimport { Theme } from '@mui/material'\nimport { SxProps } from '@mui/system'\nimport React, { ReactNode, useState } from 'react'\nimport FullWidthAlert, {\n  AlertButtonConfig,\n  FullWidthAlertProps,\n} from '../FullWidthAlert/FullWidthAlert'\nimport {\n  getOrientationBannerKey,\n  OrientationBannerName,\n} from '@/utils/OrientationBannerConstants'\n\nexport interface OrientationBannerProps {\n  name: OrientationBannerName\n  title: string\n  text: ReactNode\n  primaryButtonConfig?: AlertButtonConfig\n  secondaryButtonConfig?: AlertButtonConfig\n  sx?: FullWidthAlertProps['sx']\n}\n\nfunction OrientationBanner(props: OrientationBannerProps): React.ReactNode {\n  const { name, title, text, primaryButtonConfig, secondaryButtonConfig, sx } =\n    props\n  const [cookiePreferences] = useCookiePreferences()\n\n  const storageBannerId = getOrientationBannerKey(name)\n  const [showBanner, setShowBanner] = useState(\n    localStorage.getItem(storageBannerId) === null,\n  )\n\n  const defaultSx: SxProps<Theme> = theme => ({\n    [theme.breakpoints.down('md')]: {\n      display: 'none',\n    },\n    backgroundColor: '#F9FAFB',\n    border: 'none',\n    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.05)',\n    minHeight: '152px',\n    mt: 0,\n    paddingLeft: 4,\n    '.MuiAlert-icon': { mr: 5 },\n    '.MuiAlertTitle-root': { color: theme.palette.grey[1000] },\n  })\n  const BannerIllustration = Illustrations[name]\n\n  return (\n    <FullWidthAlert\n      show={showBanner}\n      isGlobal={false}\n      title={title}\n      description={text}\n      primaryButtonConfig={primaryButtonConfig}\n      secondaryButtonConfig={secondaryButtonConfig}\n      icon={<BannerIllustration />}\n      onClose={() => {\n        if (cookiePreferences.functionalAllowed) {\n          localStorage.setItem(storageBannerId, 'true')\n        }\n        setShowBanner(false)\n      }}\n      sx={spreadSx(defaultSx, sx)}\n    />\n  )\n}\n\nexport default OrientationBanner\n"],"mappings":";;;;;;;;AAwBA,SAAS,EAAkB,GAAgD;CACzE,IAAM,EAAE,SAAM,UAAO,SAAM,wBAAqB,0BAAuB,UACrE,GACI,CAAC,KAAqB,GAAsB,EAE5C,IAAkB,EAAwB,EAAK,EAC/C,CAAC,GAAY,KAAiB,EAClC,aAAa,QAAQ,EAAgB,KAAK,KAC3C,EAEK,KAA4B,OAAU;GACzC,EAAM,YAAY,KAAK,KAAK,GAAG,EAC9B,SAAS,QACV;EACD,iBAAiB;EACjB,QAAQ;EACR,WAAW;EACX,WAAW;EACX,IAAI;EACJ,aAAa;EACb,kBAAkB,EAAE,IAAI,GAAG;EAC3B,uBAAuB,EAAE,OAAO,EAAM,QAAQ,KAAK,MAAO;EAC3D,GACK,IAAqB,EAAc;AAEzC,QACE,kBAAC,GAAD;EACE,MAAM;EACN,UAAU;EACH;EACP,aAAa;EACQ;EACE;EACvB,MAAM,kBAAC,GAAD,EAAsB,CAAA;EAC5B,eAAe;AAIb,GAHI,EAAkB,qBACpB,aAAa,QAAQ,GAAiB,OAAO,EAE/C,EAAc,GAAM;;EAEtB,IAAI,EAAS,GAAW,EAAG;EAC3B,CAAA"}
+{"version":3,"file":"OrientationBanner.js","names":[],"sources":["../../../src/components/OrientationBanner/OrientationBanner.tsx"],"sourcesContent":["import Illustrations from '@/assets/illustrations'\nimport { spreadSx } from '@/theme/spreadSx'\nimport { useCookiePreferences } from '@/utils/hooks/useCookiePreferences'\nimport { Theme } from '@mui/material'\nimport { SxProps } from '@mui/system'\nimport React, { ReactNode, useState } from 'react'\nimport FullWidthAlert, {\n  AlertButtonConfig,\n  FullWidthAlertProps,\n} from '../FullWidthAlert/FullWidthAlert'\nimport {\n  getOrientationBannerKey,\n  OrientationBannerName,\n} from '@/utils/OrientationBannerConstants'\n\nexport interface OrientationBannerProps {\n  name: OrientationBannerName\n  title: string\n  text: ReactNode\n  primaryButtonConfig?: AlertButtonConfig\n  secondaryButtonConfig?: AlertButtonConfig\n  sx?: FullWidthAlertProps['sx']\n}\n\nfunction OrientationBanner(props: OrientationBannerProps): React.ReactNode {\n  const { name, title, text, primaryButtonConfig, secondaryButtonConfig, sx } =\n    props\n  const [cookiePreferences] = useCookiePreferences()\n\n  const storageBannerId = getOrientationBannerKey(name)\n  const [showBanner, setShowBanner] = useState(\n    localStorage.getItem(storageBannerId) === null,\n  )\n\n  const defaultSx: SxProps<Theme> = theme => ({\n    [theme.breakpoints.down('md')]: {\n      display: 'none',\n    },\n    backgroundColor: '#F9FAFB',\n    border: 'none',\n    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.05)',\n    minHeight: '152px',\n    mt: 0,\n    paddingLeft: 4,\n    '.MuiAlert-icon': { mr: 5 },\n    '.MuiAlertTitle-root': { color: theme.palette.grey[1000] },\n  })\n  const BannerIllustration = Illustrations[name]\n\n  return (\n    <FullWidthAlert\n      show={showBanner}\n      isGlobal={false}\n      title={title}\n      description={text}\n      primaryButtonConfig={primaryButtonConfig}\n      secondaryButtonConfig={secondaryButtonConfig}\n      icon={<BannerIllustration />}\n      onClose={() => {\n        if (cookiePreferences.functionalAllowed) {\n          localStorage.setItem(storageBannerId, 'true')\n        }\n        setShowBanner(false)\n      }}\n      sx={spreadSx(defaultSx, sx)}\n    />\n  )\n}\n\nexport default OrientationBanner\n"],"mappings":";;;;;;;;AAwBA,SAAS,EAAkB,GAAgD;CACzE,IAAM,EAAE,SAAM,UAAO,SAAM,wBAAqB,0BAAuB,UACrE,GACI,CAAC,KAAqB,EAAqB,GAE3C,IAAkB,EAAwB,CAAI,GAC9C,CAAC,GAAY,KAAiB,EAClC,aAAa,QAAQ,CAAe,MAAM,IAC5C,GAEM,KAA4B,OAAU;GACzC,EAAM,YAAY,KAAK,IAAI,IAAI,EAC9B,SAAS,OACX;EACA,iBAAiB;EACjB,QAAQ;EACR,WAAW;EACX,WAAW;EACX,IAAI;EACJ,aAAa;EACb,kBAAkB,EAAE,IAAI,EAAE;EAC1B,uBAAuB,EAAE,OAAO,EAAM,QAAQ,KAAK,KAAM;CAC3D,IACM,IAAqB,EAAc;CAEzC,OACE,kBAAC,GAAD;EACE,MAAM;EACN,UAAU;EACH;EACP,aAAa;EACQ;EACE;EACvB,MAAM,kBAAC,GAAD,CAAqB,CAAA;EAC3B,eAAe;GAIb,AAHI,EAAkB,qBACpB,aAAa,QAAQ,GAAiB,MAAM,GAE9C,EAAc,EAAK;EACrB;EACA,IAAI,EAAS,GAAW,CAAE;CAC3B,CAAA;AAEL"}

package/dist/components/PageProgress/PageProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageProgress.js","names":[],"sources":["../../../src/components/PageProgress/PageProgress.tsx"],"sourcesContent":["import { useEffect, useState, MouseEvent } from 'react'\nimport { Box, Button, LinearProgress } from '@mui/material'\n\nexport type PageProgressProps = {\n  barColor: string\n  barPercent: number\n  backBtnLabel: string\n  backBtnCallback?: () => void\n  forwardBtnLabel: string\n  forwardBtnCallback?: () => void\n  forwardBtnActive: boolean\n}\n\nexport function PageProgress(props: PageProgressProps) {\n  const {\n    barColor,\n    barPercent,\n    backBtnLabel,\n    forwardBtnLabel,\n    forwardBtnActive,\n    backBtnCallback,\n    forwardBtnCallback,\n  } = props\n  const [progressPercent, setProgressPercent] = useState<number>(0)\n  let mounted = true\n\n  useEffect(() => {\n    if (mounted) {\n      setProgressPercent(barPercent)\n    }\n    return () => {\n      mounted = false\n    }\n  }, [barPercent])\n\n  const handleBackButtonClick = (e: MouseEvent) => {\n    if (backBtnCallback) {\n      backBtnCallback()\n    }\n  }\n\n  const handleNextButtonClick = (e: MouseEvent) => {\n    if (forwardBtnCallback && forwardBtnActive) {\n      forwardBtnCallback()\n    }\n  }\n\n  const buttonSx = {\n    padding: '10px 120px',\n    marginRight: '30px',\n  }\n  const progressSx = {\n    backgroundColor: 'transparent',\n    '& .MuiLinearProgress-bar': {\n      backgroundColor: barColor,\n    },\n    height: '10px',\n  }\n\n  return (\n    <section>\n      <LinearProgress\n        value={progressPercent}\n        variant=\"determinate\"\n        sx={progressSx}\n      />\n      <Box\n        sx={{\n          padding: '30px 0',\n          textAlign: 'center',\n        }}\n      >\n        <Button\n          onClick={handleBackButtonClick}\n          sx={buttonSx}\n          variant=\"outlined\"\n          color=\"primary\"\n        >\n          {backBtnLabel}\n        </Button>\n        <Button\n          onClick={handleNextButtonClick}\n          disabled={!forwardBtnActive}\n          sx={buttonSx}\n          variant=\"contained\"\n          color=\"primary\"\n        >\n          {forwardBtnLabel}\n        </Button>\n      </Box>\n    </section>\n  )\n}\n\nexport default PageProgress\n"],"mappings":";;;;AAaA,SAAgB,EAAa,GAA0B;CACrD,IAAM,EACJ,aACA,eACA,iBACA,oBACA,qBACA,oBACA,0BACE,GACE,CAAC,GAAiB,KAAsB,EAAiB,EAAE,EAC7D,IAAU;AAEd,UACM,KACF,EAAmB,EAAW,QAEnB;AACX,MAAU;KAEX,CAAC,EAAW,CAAC;CAEhB,IAAM,KAAyB,MAAkB;AAC/C,EAAI,KACF,GAAiB;IAIf,KAAyB,MAAkB;AAC/C,EAAI,KAAsB,KACxB,GAAoB;IAIlB,IAAW;EACf,SAAS;EACT,aAAa;EACd;AASD,QACE,kBAAC,WAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,OAAO;EACP,SAAQ;EACR,IAAI;GAZR,iBAAiB;GACjB,4BAA4B,EAC1B,iBAAiB,GAClB;GACD,QAAQ;GAQA;EACJ,CAAA,EACF,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,WAAW;GACZ;YAJH,CAME,kBAAC,GAAD;GACE,SAAS;GACT,IAAI;GACJ,SAAQ;GACR,OAAM;aAEL;GACM,CAAA,EACT,kBAAC,GAAD;GACE,SAAS;GACT,UAAU,CAAC;GACX,IAAI;GACJ,SAAQ;GACR,OAAM;aAEL;GACM,CAAA,CACL;IACE,EAAA,CAAA"}
+{"version":3,"file":"PageProgress.js","names":[],"sources":["../../../src/components/PageProgress/PageProgress.tsx"],"sourcesContent":["import { useEffect, useState, MouseEvent } from 'react'\nimport { Box, Button, LinearProgress } from '@mui/material'\n\nexport type PageProgressProps = {\n  barColor: string\n  barPercent: number\n  backBtnLabel: string\n  backBtnCallback?: () => void\n  forwardBtnLabel: string\n  forwardBtnCallback?: () => void\n  forwardBtnActive: boolean\n}\n\nexport function PageProgress(props: PageProgressProps) {\n  const {\n    barColor,\n    barPercent,\n    backBtnLabel,\n    forwardBtnLabel,\n    forwardBtnActive,\n    backBtnCallback,\n    forwardBtnCallback,\n  } = props\n  const [progressPercent, setProgressPercent] = useState<number>(0)\n  let mounted = true\n\n  useEffect(() => {\n    if (mounted) {\n      setProgressPercent(barPercent)\n    }\n    return () => {\n      mounted = false\n    }\n  }, [barPercent])\n\n  const handleBackButtonClick = (e: MouseEvent) => {\n    if (backBtnCallback) {\n      backBtnCallback()\n    }\n  }\n\n  const handleNextButtonClick = (e: MouseEvent) => {\n    if (forwardBtnCallback && forwardBtnActive) {\n      forwardBtnCallback()\n    }\n  }\n\n  const buttonSx = {\n    padding: '10px 120px',\n    marginRight: '30px',\n  }\n  const progressSx = {\n    backgroundColor: 'transparent',\n    '& .MuiLinearProgress-bar': {\n      backgroundColor: barColor,\n    },\n    height: '10px',\n  }\n\n  return (\n    <section>\n      <LinearProgress\n        value={progressPercent}\n        variant=\"determinate\"\n        sx={progressSx}\n      />\n      <Box\n        sx={{\n          padding: '30px 0',\n          textAlign: 'center',\n        }}\n      >\n        <Button\n          onClick={handleBackButtonClick}\n          sx={buttonSx}\n          variant=\"outlined\"\n          color=\"primary\"\n        >\n          {backBtnLabel}\n        </Button>\n        <Button\n          onClick={handleNextButtonClick}\n          disabled={!forwardBtnActive}\n          sx={buttonSx}\n          variant=\"contained\"\n          color=\"primary\"\n        >\n          {forwardBtnLabel}\n        </Button>\n      </Box>\n    </section>\n  )\n}\n\nexport default PageProgress\n"],"mappings":";;;;AAaA,SAAgB,EAAa,GAA0B;CACrD,IAAM,EACJ,aACA,eACA,iBACA,oBACA,qBACA,oBACA,0BACE,GACE,CAAC,GAAiB,KAAsB,EAAiB,CAAC,GAC5D,IAAU;CAEd,SACM,KACF,EAAmB,CAAU,SAElB;EACX,IAAU;CACZ,IACC,CAAC,CAAU,CAAC;CAEf,IAAM,KAAyB,MAAkB;EAC/C,AAAI,KACF,EAAgB;CAEpB,GAEM,KAAyB,MAAkB;EAC/C,AAAI,KAAsB,KACxB,EAAmB;CAEvB,GAEM,IAAW;EACf,SAAS;EACT,aAAa;CACf;CASA,OACE,kBAAC,WAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,OAAO;EACP,SAAQ;EACR,IAAI;GAZR,iBAAiB;GACjB,4BAA4B,EAC1B,iBAAiB,EACnB;GACA,QAAQ;EAQA;CACL,CAAA,GACD,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,WAAW;EACb;YAJF,CAME,kBAAC,GAAD;GACE,SAAS;GACT,IAAI;GACJ,SAAQ;GACR,OAAM;aAEL;EACK,CAAA,GACR,kBAAC,GAAD;GACE,SAAS;GACT,UAAU,CAAC;GACX,IAAI;GACJ,SAAQ;GACR,OAAM;aAEL;EACK,CAAA,CACL;GACE,EAAA,CAAA;AAEb"}

package/dist/components/Plot/BarPlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarPlot.js","names":[],"sources":["../../../src/components/Plot/BarPlot.tsx"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep'\nimport noop from 'lodash-es/noop'\nimport uniq from 'lodash-es/uniq'\nimport Plotly from 'plotly.js-basic-dist'\nimport { CSSProperties } from 'react'\nimport Plot from './Plot'\nimport { BarPlotColors, GraphItem, PlotStyle } from './types'\n\nexport type BarPlotProps = {\n  isTop: boolean\n  style?: CSSProperties\n  plotData: GraphItem[]\n  layoutConfig: Partial<Plotly.Layout>\n  optionsConfig: Partial<Plotly.Config>\n  label: string\n  xMax: number\n  colors?: BarPlotColors\n  plotStyle?: PlotStyle\n  onClick?: (event: Readonly<Plotly.PlotMouseEvent>) => void\n}\n\ntype LayoutOptions = {\n  isTop: boolean\n  maxValue: number\n  isLegend?: boolean\n  backgroundColor?: string\n}\n\nfunction getBarPlotDataPoints(\n  data: any[],\n  filter?: string,\n  colors?: BarPlotColors,\n): any[] {\n  if (filter) {\n    data = data.filter(item => item.y === filter)\n  }\n  const groups = uniq(data.map(item => item['group'])).sort()\n  const result: any[] = []\n  const defaultColors = [`(28,118,175,1)`, `rgba(91,176,181,1)`]\n\n  groups.forEach((group, i) => {\n    const items = data.filter(item => item.group === group)\n    result.push({\n      x: items.map(item => item.x),\n      y: items.map(item => item.y),\n      name: group,\n      orientation: 'h',\n      marker: {\n        color: colors ? colors[group] : defaultColors[i],\n        width: 1,\n      },\n      text: [group],\n      hovertemplate: `%{x} %{text}<extra></extra>`,\n      textposition: 'none',\n      type: 'bar',\n    })\n  })\n\n  return result\n}\n\nfunction getLayout(\n  layoutConfig: Partial<Plotly.Layout>,\n  { isTop, maxValue, backgroundColor }: LayoutOptions,\n): Partial<Plotly.Layout> {\n  const layout = cloneDeep(layoutConfig)\n  layout.xaxis = {\n    visible: false,\n    range: [0, maxValue],\n  }\n  if (backgroundColor) {\n    layout.plot_bgcolor = backgroundColor\n    layout.paper_bgcolor = backgroundColor\n  }\n  if (!isTop) {\n    layout.hoverlabel = {\n      font: {\n        size: 10,\n      },\n    }\n  }\n  layout.showlegend = false\n  layout.height = isTop ? 40 : 20\n  return layout\n}\n\nconst DEFAULT_BARPLOT_PLOTSTYLE: PlotStyle = { backgroundColor: 'transparent' }\nconst DEFAULT_BARPLOT_STYLE: CSSProperties = {\n  width: '100%',\n  height: '100%',\n}\n\nfunction BarPlot({\n  plotData,\n  optionsConfig,\n  isTop,\n  layoutConfig,\n  label,\n  xMax,\n  colors,\n  plotStyle = DEFAULT_BARPLOT_PLOTSTYLE,\n  style = DEFAULT_BARPLOT_STYLE,\n  onClick,\n}: BarPlotProps) {\n  return (\n    <Plot\n      style={style}\n      layout={getLayout(layoutConfig, {\n        isTop,\n        maxValue: xMax,\n        backgroundColor: plotStyle.backgroundColor,\n      })}\n      config={optionsConfig}\n      data={getBarPlotDataPoints(plotData, label, colors)}\n      onClick={e => (onClick ? onClick(e) : noop)}\n    />\n  )\n}\n\nexport default BarPlot\n"],"mappings":";;;;;;AA4BA,SAAS,EACP,GACA,GACA,GACO;AACP,CAAI,MACF,IAAO,EAAK,QAAO,MAAQ,EAAK,MAAM,EAAO;CAE/C,IAAM,IAAS,EAAK,EAAK,KAAI,MAAQ,EAAK,MAAS,CAAC,CAAC,MAAM,EACrD,IAAgB,EAAE,EAClB,IAAgB,CAAC,kBAAkB,qBAAqB;AAoB9D,QAlBA,EAAO,SAAS,GAAO,MAAM;EAC3B,IAAM,IAAQ,EAAK,QAAO,MAAQ,EAAK,UAAU,EAAM;AACvD,IAAO,KAAK;GACV,GAAG,EAAM,KAAI,MAAQ,EAAK,EAAE;GAC5B,GAAG,EAAM,KAAI,MAAQ,EAAK,EAAE;GAC5B,MAAM;GACN,aAAa;GACb,QAAQ;IACN,OAAO,IAAS,EAAO,KAAS,EAAc;IAC9C,OAAO;IACR;GACD,MAAM,CAAC,EAAM;GACb,eAAe;GACf,cAAc;GACd,MAAM;GACP,CAAC;GACF,EAEK;;AAGT,SAAS,EACP,GACA,EAAE,UAAO,aAAU,sBACK;CACxB,IAAM,IAAS,EAAU,EAAa;AAkBtC,QAjBA,EAAO,QAAQ;EACb,SAAS;EACT,OAAO,CAAC,GAAG,EAAS;EACrB,EACG,MACF,EAAO,eAAe,GACtB,EAAO,gBAAgB,IAEpB,MACH,EAAO,aAAa,EAClB,MAAM,EACJ,MAAM,IACP,EACF,GAEH,EAAO,aAAa,IACpB,EAAO,SAAS,IAAQ,KAAK,IACtB;;AAGT,IAAM,IAAuC,EAAE,iBAAiB,eAAe,EACzE,IAAuC;CAC3C,OAAO;CACP,QAAQ;CACT;AAED,SAAS,EAAQ,EACf,aACA,kBACA,UACA,iBACA,UACA,SACA,WACA,eAAY,GACZ,WAAQ,GACR,cACe;AACf,QACE,kBAAC,GAAD;EACS;EACP,QAAQ,EAAU,GAAc;GAC9B;GACA,UAAU;GACV,iBAAiB,EAAU;GAC5B,CAAC;EACF,QAAQ;EACR,MAAM,EAAqB,GAAU,GAAO,EAAO;EACnD,UAAS,MAAM,IAAU,EAAQ,EAAE,GAAG;EACtC,CAAA"}
+{"version":3,"file":"BarPlot.js","names":[],"sources":["../../../src/components/Plot/BarPlot.tsx"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep'\nimport noop from 'lodash-es/noop'\nimport uniq from 'lodash-es/uniq'\nimport Plotly from 'plotly.js-basic-dist'\nimport { CSSProperties } from 'react'\nimport Plot from './Plot'\nimport { BarPlotColors, GraphItem, PlotStyle } from './types'\n\nexport type BarPlotProps = {\n  isTop: boolean\n  style?: CSSProperties\n  plotData: GraphItem[]\n  layoutConfig: Partial<Plotly.Layout>\n  optionsConfig: Partial<Plotly.Config>\n  label: string\n  xMax: number\n  colors?: BarPlotColors\n  plotStyle?: PlotStyle\n  onClick?: (event: Readonly<Plotly.PlotMouseEvent>) => void\n}\n\ntype LayoutOptions = {\n  isTop: boolean\n  maxValue: number\n  isLegend?: boolean\n  backgroundColor?: string\n}\n\nfunction getBarPlotDataPoints(\n  data: any[],\n  filter?: string,\n  colors?: BarPlotColors,\n): any[] {\n  if (filter) {\n    data = data.filter(item => item.y === filter)\n  }\n  const groups = uniq(data.map(item => item['group'])).sort()\n  const result: any[] = []\n  const defaultColors = [`(28,118,175,1)`, `rgba(91,176,181,1)`]\n\n  groups.forEach((group, i) => {\n    const items = data.filter(item => item.group === group)\n    result.push({\n      x: items.map(item => item.x),\n      y: items.map(item => item.y),\n      name: group,\n      orientation: 'h',\n      marker: {\n        color: colors ? colors[group] : defaultColors[i],\n        width: 1,\n      },\n      text: [group],\n      hovertemplate: `%{x} %{text}<extra></extra>`,\n      textposition: 'none',\n      type: 'bar',\n    })\n  })\n\n  return result\n}\n\nfunction getLayout(\n  layoutConfig: Partial<Plotly.Layout>,\n  { isTop, maxValue, backgroundColor }: LayoutOptions,\n): Partial<Plotly.Layout> {\n  const layout = cloneDeep(layoutConfig)\n  layout.xaxis = {\n    visible: false,\n    range: [0, maxValue],\n  }\n  if (backgroundColor) {\n    layout.plot_bgcolor = backgroundColor\n    layout.paper_bgcolor = backgroundColor\n  }\n  if (!isTop) {\n    layout.hoverlabel = {\n      font: {\n        size: 10,\n      },\n    }\n  }\n  layout.showlegend = false\n  layout.height = isTop ? 40 : 20\n  return layout\n}\n\nconst DEFAULT_BARPLOT_PLOTSTYLE: PlotStyle = { backgroundColor: 'transparent' }\nconst DEFAULT_BARPLOT_STYLE: CSSProperties = {\n  width: '100%',\n  height: '100%',\n}\n\nfunction BarPlot({\n  plotData,\n  optionsConfig,\n  isTop,\n  layoutConfig,\n  label,\n  xMax,\n  colors,\n  plotStyle = DEFAULT_BARPLOT_PLOTSTYLE,\n  style = DEFAULT_BARPLOT_STYLE,\n  onClick,\n}: BarPlotProps) {\n  return (\n    <Plot\n      style={style}\n      layout={getLayout(layoutConfig, {\n        isTop,\n        maxValue: xMax,\n        backgroundColor: plotStyle.backgroundColor,\n      })}\n      config={optionsConfig}\n      data={getBarPlotDataPoints(plotData, label, colors)}\n      onClick={e => (onClick ? onClick(e) : noop)}\n    />\n  )\n}\n\nexport default BarPlot\n"],"mappings":";;;;;;AA4BA,SAAS,EACP,GACA,GACA,GACO;CACP,AAAI,MACF,IAAO,EAAK,QAAO,MAAQ,EAAK,MAAM,CAAM;CAE9C,IAAM,IAAS,EAAK,EAAK,KAAI,MAAQ,EAAK,KAAQ,CAAC,EAAE,KAAK,GACpD,IAAgB,CAAC,GACjB,IAAgB,CAAC,kBAAkB,oBAAoB;CAoB7D,OAlBA,EAAO,SAAS,GAAO,MAAM;EAC3B,IAAM,IAAQ,EAAK,QAAO,MAAQ,EAAK,UAAU,CAAK;EACtD,EAAO,KAAK;GACV,GAAG,EAAM,KAAI,MAAQ,EAAK,CAAC;GAC3B,GAAG,EAAM,KAAI,MAAQ,EAAK,CAAC;GAC3B,MAAM;GACN,aAAa;GACb,QAAQ;IACN,OAAO,IAAS,EAAO,KAAS,EAAc;IAC9C,OAAO;GACT;GACA,MAAM,CAAC,CAAK;GACZ,eAAe;GACf,cAAc;GACd,MAAM;EACR,CAAC;CACH,CAAC,GAEM;AACT;AAEA,SAAS,EACP,GACA,EAAE,UAAO,aAAU,sBACK;CACxB,IAAM,IAAS,EAAU,CAAY;CAkBrC,OAjBA,EAAO,QAAQ;EACb,SAAS;EACT,OAAO,CAAC,GAAG,CAAQ;CACrB,GACI,MACF,EAAO,eAAe,GACtB,EAAO,gBAAgB,IAEpB,MACH,EAAO,aAAa,EAClB,MAAM,EACJ,MAAM,GACR,EACF,IAEF,EAAO,aAAa,IACpB,EAAO,SAAS,IAAQ,KAAK,IACtB;AACT;AAEA,IAAM,IAAuC,EAAE,iBAAiB,cAAc,GACxE,IAAuC;CAC3C,OAAO;CACP,QAAQ;AACV;AAEA,SAAS,EAAQ,EACf,aACA,kBACA,UACA,iBACA,UACA,SACA,WACA,eAAY,GACZ,WAAQ,GACR,cACe;CACf,OACE,kBAAC,GAAD;EACS;EACP,QAAQ,EAAU,GAAc;GAC9B;GACA,UAAU;GACV,iBAAiB,EAAU;EAC7B,CAAC;EACD,QAAQ;EACR,MAAM,EAAqB,GAAU,GAAO,CAAM;EAClD,UAAS,MAAM,IAAU,EAAQ,CAAC,IAAI;CACvC,CAAA;AAEL"}

package/dist/components/Plot/DotPlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"DotPlot.js","names":[],"sources":["../../../src/components/Plot/DotPlot.tsx"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep'\nimport countBy from 'lodash-es/countBy'\nimport noop from 'lodash-es/noop'\nimport uniq from 'lodash-es/uniq'\nimport Plotly from 'plotly.js-basic-dist'\nimport { CSSProperties } from 'react'\nimport Plot from './Plot'\nimport { Dictionary, GraphItem, PlotStyle } from './types'\n\nexport type DotPlotProps = {\n  plotData: GraphItem[]\n  layoutConfig: Partial<Plotly.Layout>\n  optionsConfig: Partial<Plotly.Config>\n  label?: string\n  style?: CSSProperties\n  id: string\n  isLegend?: boolean\n  isXAxis?: boolean\n  xMax?: number\n  plotStyle?: PlotStyle\n  markerSymbols?: Dictionary\n  onClick?: (e: Readonly<Plotly.PlotMouseEvent>) => void\n}\n\ntype LayoutOptions = {\n  isLegend: boolean\n  isXAxis: boolean\n  maxValue?: number\n  backgroundColor?: string\n}\n\nfunction getLayout(\n  dotPlotLayoutConfig: Partial<Plotly.Layout>,\n  layoutOptions?: LayoutOptions,\n): Partial<Plotly.Layout> {\n  const result = cloneDeep(dotPlotLayoutConfig)\n  if (!layoutOptions) {\n    return result\n  }\n  if (layoutOptions.backgroundColor) {\n    result.plot_bgcolor = layoutOptions.backgroundColor\n  }\n  result.yaxis!.showgrid = false\n  result.yaxis!.zeroline = true\n  result.yaxis!.zerolinecolor = '#aeb5bc'\n  result.yaxis!.showticklabels = false\n  if (result.xaxis!.type === 'log') {\n    result.xaxis!.tickformat = 'f'\n    result.xaxis!.range = [-0.1, Math.log10(layoutOptions.maxValue!) + 0.1]\n  } else {\n    result.xaxis!.range = [\n      (layoutOptions.maxValue! / 50) * -1,\n      layoutOptions.maxValue! + 30,\n    ]\n  }\n  result.xaxis!.visible = layoutOptions.isXAxis\n  result.showlegend = layoutOptions.isLegend\n  result.margin = {\n    t: 0,\n    b: layoutOptions.isXAxis ? 50 : 0,\n    l: 0,\n    r: 0,\n    pad: 15,\n  }\n  let height = 40\n  if (layoutOptions.isLegend) {\n    height = 35\n    result.margin.pad = 0\n    result.xaxis = {\n      visible: false,\n      zeroline: false,\n      showgrid: false,\n      showline: false,\n      range: [0, 1],\n    }\n\n    result.yaxis = {\n      visible: false,\n      showline: false,\n    }\n  }\n  if (layoutOptions.isXAxis) {\n    result.yaxis = {\n      visible: false,\n      showgrid: false,\n      showline: false,\n    }\n    height = 50\n  }\n\n  result.height = height\n\n  return result\n}\n\nfunction createArrayOfGroupValues(\n  headers: string[],\n  items: GraphItem[],\n): number[] {\n  const result: number[] = new Array(headers.length)\n  items.forEach(item => {\n    const index = headers.indexOf(item.y)\n    if (index !== -1) {\n      result[index] = item.x\n    }\n  })\n  return result\n}\n\n/**\n * Generates a sequence of n numbers centered around 0\n *\n * Examples:\n * if n is 4, the result would be [-1.5, -0.5, 0.5, 1.5]\n * if n is 5 the result would be [-2, -1, 0, 1, 2]\n * @param n\n */\nexport function generateCenteredSequence(n: number): number[] {\n  const sequence: number[] = []\n  const half = (n - 1) / 2\n  for (let i = 0; i < n; i++) {\n    sequence.push(i - half)\n  }\n  return sequence\n}\n\n/**\n * Returns a set of y values where\n *  - if an x value is unique, the y value is 0\n *  - if an x value is repeated, the y value is an offset from 0\n *\n * This has the effect of preventing overlapping points in a dot plot\n * @param xDataByGroup\n */\nexport function getYDataForDotPlotOffset(\n  xDataByGroup: Record<string, number[]>,\n): Record<string, number[]> {\n  const counts = countBy(xDataByGroup, val => val[0])\n\n  const yDataByGroup: Record<string, number[]> = {}\n  // keep track of how many times we have seen each duplicate value\n  const seen: Record<number, number> = {}\n  Object.keys(xDataByGroup).forEach(group => {\n    const value = xDataByGroup[group][0]\n    if (counts[value] === 1) {\n      // The value is not duplicated by another group, so the y-value (vertical offset) is 0\n      yDataByGroup[group] = [0]\n    } else {\n      // The value is duplicated by another group, so get an offset value that will be\n      //   - centered around 0\n      //   - unique for this item among all items with the same value\n      if (seen[value] == undefined) {\n        seen[value] = 0\n      }\n      const offsets = generateCenteredSequence(counts[value])\n      const offset = offsets[seen[value]]\n\n      yDataByGroup[group] = [offset]\n      seen[value] = seen[value] + 1\n    }\n  })\n  return yDataByGroup\n}\n\nfunction getPlotDataPoints(\n  graphItems: GraphItem[],\n  plotStyle: PlotStyle,\n  ySorted?: string[],\n  markerSymbols?: Dictionary,\n): Plotly.Data[] {\n  const isFakeData = ySorted === undefined\n  const groups = uniq(graphItems.map(item => item.group))\n  const defaultSymbols = [\n    'y-down',\n    'triangle-up',\n    'cross-thin-open',\n    'triangle-up-open-dot',\n    'star-square-open',\n    'diamond-x',\n  ]\n\n  const xDataByGroup: Record<string, number[]> = groups.reduce(\n    (prev, group) => {\n      const xDataForGroup = isFakeData\n        ? [-100] // fake datavalue outside of the bounds\n        : createArrayOfGroupValues(\n            ySorted,\n            graphItems.filter(row => row.group === group),\n          )\n      return { ...prev, [group]: xDataForGroup }\n    },\n    {},\n  )\n  const yDataByGroup: Record<string, number[]> =\n    getYDataForDotPlotOffset(xDataByGroup)\n\n  const data: Plotly.Data[] = groups.map((group, i) => {\n    const xData: number[] = xDataByGroup[group]\n    const yData: number[] = yDataByGroup[group]\n    return {\n      type: 'scatter',\n      x: xData,\n      y: yData,\n      text: [group],\n      hovertemplate: `%{x} %{text}<extra></extra>`,\n      mode: 'markers',\n      name: group,\n      marker: {\n        color: plotStyle.markerFill,\n        line: {\n          color: plotStyle.markerLine,\n          width: 1,\n        },\n\n        symbol: markerSymbols ? markerSymbols[group] : defaultSymbols[i],\n        size: plotStyle.markerSize,\n      },\n    }\n  })\n\n  return data\n}\n\nconst DEFAULT_DOTPLOT_PLOTSTYLE: PlotStyle = {\n  markerFill: '#515359',\n  markerLine: '#515359',\n  markerSize: 9,\n  backgroundColor: 'transparent',\n}\nconst DEFAULT_DOTPLOT_STYLE: CSSProperties = {\n  width: '100%',\n  height: '100%',\n}\n\nfunction DotPlot({\n  plotData,\n  optionsConfig,\n  layoutConfig,\n  label,\n  id,\n  xMax,\n  style = DEFAULT_DOTPLOT_STYLE,\n  markerSymbols,\n  plotStyle = DEFAULT_DOTPLOT_PLOTSTYLE,\n  onClick,\n  isLegend = false,\n  isXAxis = false,\n}: DotPlotProps) {\n  const pointsTypes = label ? [label] : undefined\n\n  return (\n    <Plot\n      key={`dotPlot_${id}`}\n      layout={getLayout(layoutConfig, {\n        isLegend: isLegend,\n        isXAxis: isXAxis,\n        maxValue: xMax,\n        backgroundColor: plotStyle.backgroundColor,\n      })}\n      style={style}\n      data={getPlotDataPoints(plotData, plotStyle, pointsTypes, markerSymbols)}\n      config={optionsConfig}\n      onClick={e => (onClick ? onClick(e) : noop)}\n    />\n  )\n}\n\nexport default DotPlot\n"],"mappings":";;;;;;;AA+BA,SAAS,EACP,GACA,GACwB;CACxB,IAAM,IAAS,EAAU,EAAoB;AAC7C,KAAI,CAAC,EACH,QAAO;AAoBT,CAlBI,EAAc,oBAChB,EAAO,eAAe,EAAc,kBAEtC,EAAO,MAAO,WAAW,IACzB,EAAO,MAAO,WAAW,IACzB,EAAO,MAAO,gBAAgB,WAC9B,EAAO,MAAO,iBAAiB,IAC3B,EAAO,MAAO,SAAS,SACzB,EAAO,MAAO,aAAa,KAC3B,EAAO,MAAO,QAAQ,CAAC,KAAM,KAAK,MAAM,EAAc,SAAU,GAAG,GAAI,IAEvE,EAAO,MAAO,QAAQ,CACnB,EAAc,WAAY,KAAM,IACjC,EAAc,WAAY,GAC3B,EAEH,EAAO,MAAO,UAAU,EAAc,SACtC,EAAO,aAAa,EAAc,UAClC,EAAO,SAAS;EACd,GAAG;EACH,GAAG,EAAc,UAAU,KAAK;EAChC,GAAG;EACH,GAAG;EACH,KAAK;EACN;CACD,IAAI,IAAS;AA4Bb,QA3BI,EAAc,aAChB,IAAS,IACT,EAAO,OAAO,MAAM,GACpB,EAAO,QAAQ;EACb,SAAS;EACT,UAAU;EACV,UAAU;EACV,UAAU;EACV,OAAO,CAAC,GAAG,EAAE;EACd,EAED,EAAO,QAAQ;EACb,SAAS;EACT,UAAU;EACX,GAEC,EAAc,YAChB,EAAO,QAAQ;EACb,SAAS;EACT,UAAU;EACV,UAAU;EACX,EACD,IAAS,KAGX,EAAO,SAAS,GAET;;AAGT,SAAS,EACP,GACA,GACU;CACV,IAAM,IAAuB,MAAM,EAAQ,OAAO;AAOlD,QANA,EAAM,SAAQ,MAAQ;EACpB,IAAM,IAAQ,EAAQ,QAAQ,EAAK,EAAE;AACrC,EAAI,MAAU,OACZ,EAAO,KAAS,EAAK;GAEvB,EACK;;AAWT,SAAgB,EAAyB,GAAqB;CAC5D,IAAM,IAAqB,EAAE,EACvB,KAAQ,IAAI,KAAK;AACvB,MAAK,IAAI,IAAI,GAAG,IAAI,GAAG,IACrB,GAAS,KAAK,IAAI,EAAK;AAEzB,QAAO;;AAWT,SAAgB,EACd,GAC0B;CAC1B,IAAM,IAAS,EAAQ,IAAc,MAAO,EAAI,GAAG,EAE7C,IAAyC,EAAE,EAE3C,IAA+B,EAAE;AAoBvC,QAnBA,OAAO,KAAK,EAAa,CAAC,SAAQ,MAAS;EACzC,IAAM,IAAQ,EAAa,GAAO;AAClC,EAAI,EAAO,OAAW,IAEpB,EAAa,KAAS,CAAC,EAAE,IAKrB,EAAK,OACP,EAAK,KAAS,IAKhB,EAAa,KAAS,CAHN,EAAyB,EAAO,GACjC,CAAQ,EAAK,IAEE,EAC9B,EAAK,KAAS,EAAK,KAAS;GAE9B,EACK;;AAGT,SAAS,EACP,GACA,GACA,GACA,GACe;CACf,IAAM,IAAa,MAAY,KAAA,GACzB,IAAS,EAAK,EAAW,KAAI,MAAQ,EAAK,MAAM,CAAC,EACjD,IAAiB;EACrB;EACA;EACA;EACA;EACA;EACA;EACD,EAEK,IAAyC,EAAO,QACnD,GAAM,MAAU;EACf,IAAM,IAAgB,IAClB,CAAC,KAAK,GACN,EACE,GACA,EAAW,QAAO,MAAO,EAAI,UAAU,EAAM,CAC9C;AACL,SAAO;GAAE,GAAG;IAAO,IAAQ;GAAe;IAE5C,EAAE,CACH,EACK,IACJ,EAAyB,EAAa;AA0BxC,QAxB4B,EAAO,KAAK,GAAO,OAGtC;EACL,MAAM;EACN,GAJsB,EAAa;EAKnC,GAJsB,EAAa;EAKnC,MAAM,CAAC,EAAM;EACb,eAAe;EACf,MAAM;EACN,MAAM;EACN,QAAQ;GACN,OAAO,EAAU;GACjB,MAAM;IACJ,OAAO,EAAU;IACjB,OAAO;IACR;GAED,QAAQ,IAAgB,EAAc,KAAS,EAAe;GAC9D,MAAM,EAAU;GACjB;EACF,EAGI;;AAGT,IAAM,IAAuC;CAC3C,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,iBAAiB;CAClB,EACK,IAAuC;CAC3C,OAAO;CACP,QAAQ;CACT;AAED,SAAS,EAAQ,EACf,aACA,kBACA,iBACA,UACA,OACA,SACA,WAAQ,GACR,kBACA,eAAY,GACZ,YACA,cAAW,IACX,aAAU,MACK;CACf,IAAM,IAAc,IAAQ,CAAC,EAAM,GAAG,KAAA;AAEtC,QACE,kBAAC,GAAD;EAEE,QAAQ,EAAU,GAAc;GACpB;GACD;GACT,UAAU;GACV,iBAAiB,EAAU;GAC5B,CAAC;EACK;EACP,MAAM,EAAkB,GAAU,GAAW,GAAa,EAAc;EACxE,QAAQ;EACR,UAAS,MAAM,IAAU,EAAQ,EAAE,GAAG;EACtC,EAXK,WAAW,IAWhB"}
+{"version":3,"file":"DotPlot.js","names":[],"sources":["../../../src/components/Plot/DotPlot.tsx"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep'\nimport countBy from 'lodash-es/countBy'\nimport noop from 'lodash-es/noop'\nimport uniq from 'lodash-es/uniq'\nimport Plotly from 'plotly.js-basic-dist'\nimport { CSSProperties } from 'react'\nimport Plot from './Plot'\nimport { Dictionary, GraphItem, PlotStyle } from './types'\n\nexport type DotPlotProps = {\n  plotData: GraphItem[]\n  layoutConfig: Partial<Plotly.Layout>\n  optionsConfig: Partial<Plotly.Config>\n  label?: string\n  style?: CSSProperties\n  id: string\n  isLegend?: boolean\n  isXAxis?: boolean\n  xMax?: number\n  plotStyle?: PlotStyle\n  markerSymbols?: Dictionary\n  onClick?: (e: Readonly<Plotly.PlotMouseEvent>) => void\n}\n\ntype LayoutOptions = {\n  isLegend: boolean\n  isXAxis: boolean\n  maxValue?: number\n  backgroundColor?: string\n}\n\nfunction getLayout(\n  dotPlotLayoutConfig: Partial<Plotly.Layout>,\n  layoutOptions?: LayoutOptions,\n): Partial<Plotly.Layout> {\n  const result = cloneDeep(dotPlotLayoutConfig)\n  if (!layoutOptions) {\n    return result\n  }\n  if (layoutOptions.backgroundColor) {\n    result.plot_bgcolor = layoutOptions.backgroundColor\n  }\n  result.yaxis!.showgrid = false\n  result.yaxis!.zeroline = true\n  result.yaxis!.zerolinecolor = '#aeb5bc'\n  result.yaxis!.showticklabels = false\n  if (result.xaxis!.type === 'log') {\n    result.xaxis!.tickformat = 'f'\n    result.xaxis!.range = [-0.1, Math.log10(layoutOptions.maxValue!) + 0.1]\n  } else {\n    result.xaxis!.range = [\n      (layoutOptions.maxValue! / 50) * -1,\n      layoutOptions.maxValue! + 30,\n    ]\n  }\n  result.xaxis!.visible = layoutOptions.isXAxis\n  result.showlegend = layoutOptions.isLegend\n  result.margin = {\n    t: 0,\n    b: layoutOptions.isXAxis ? 50 : 0,\n    l: 0,\n    r: 0,\n    pad: 15,\n  }\n  let height = 40\n  if (layoutOptions.isLegend) {\n    height = 35\n    result.margin.pad = 0\n    result.xaxis = {\n      visible: false,\n      zeroline: false,\n      showgrid: false,\n      showline: false,\n      range: [0, 1],\n    }\n\n    result.yaxis = {\n      visible: false,\n      showline: false,\n    }\n  }\n  if (layoutOptions.isXAxis) {\n    result.yaxis = {\n      visible: false,\n      showgrid: false,\n      showline: false,\n    }\n    height = 50\n  }\n\n  result.height = height\n\n  return result\n}\n\nfunction createArrayOfGroupValues(\n  headers: string[],\n  items: GraphItem[],\n): number[] {\n  const result: number[] = new Array(headers.length)\n  items.forEach(item => {\n    const index = headers.indexOf(item.y)\n    if (index !== -1) {\n      result[index] = item.x\n    }\n  })\n  return result\n}\n\n/**\n * Generates a sequence of n numbers centered around 0\n *\n * Examples:\n * if n is 4, the result would be [-1.5, -0.5, 0.5, 1.5]\n * if n is 5 the result would be [-2, -1, 0, 1, 2]\n * @param n\n */\nexport function generateCenteredSequence(n: number): number[] {\n  const sequence: number[] = []\n  const half = (n - 1) / 2\n  for (let i = 0; i < n; i++) {\n    sequence.push(i - half)\n  }\n  return sequence\n}\n\n/**\n * Returns a set of y values where\n *  - if an x value is unique, the y value is 0\n *  - if an x value is repeated, the y value is an offset from 0\n *\n * This has the effect of preventing overlapping points in a dot plot\n * @param xDataByGroup\n */\nexport function getYDataForDotPlotOffset(\n  xDataByGroup: Record<string, number[]>,\n): Record<string, number[]> {\n  const counts = countBy(xDataByGroup, val => val[0])\n\n  const yDataByGroup: Record<string, number[]> = {}\n  // keep track of how many times we have seen each duplicate value\n  const seen: Record<number, number> = {}\n  Object.keys(xDataByGroup).forEach(group => {\n    const value = xDataByGroup[group][0]\n    if (counts[value] === 1) {\n      // The value is not duplicated by another group, so the y-value (vertical offset) is 0\n      yDataByGroup[group] = [0]\n    } else {\n      // The value is duplicated by another group, so get an offset value that will be\n      //   - centered around 0\n      //   - unique for this item among all items with the same value\n      if (seen[value] == undefined) {\n        seen[value] = 0\n      }\n      const offsets = generateCenteredSequence(counts[value])\n      const offset = offsets[seen[value]]\n\n      yDataByGroup[group] = [offset]\n      seen[value] = seen[value] + 1\n    }\n  })\n  return yDataByGroup\n}\n\nfunction getPlotDataPoints(\n  graphItems: GraphItem[],\n  plotStyle: PlotStyle,\n  ySorted?: string[],\n  markerSymbols?: Dictionary,\n): Plotly.Data[] {\n  const isFakeData = ySorted === undefined\n  const groups = uniq(graphItems.map(item => item.group))\n  const defaultSymbols = [\n    'y-down',\n    'triangle-up',\n    'cross-thin-open',\n    'triangle-up-open-dot',\n    'star-square-open',\n    'diamond-x',\n  ]\n\n  const xDataByGroup: Record<string, number[]> = groups.reduce(\n    (prev, group) => {\n      const xDataForGroup = isFakeData\n        ? [-100] // fake datavalue outside of the bounds\n        : createArrayOfGroupValues(\n            ySorted,\n            graphItems.filter(row => row.group === group),\n          )\n      return { ...prev, [group]: xDataForGroup }\n    },\n    {},\n  )\n  const yDataByGroup: Record<string, number[]> =\n    getYDataForDotPlotOffset(xDataByGroup)\n\n  const data: Plotly.Data[] = groups.map((group, i) => {\n    const xData: number[] = xDataByGroup[group]\n    const yData: number[] = yDataByGroup[group]\n    return {\n      type: 'scatter',\n      x: xData,\n      y: yData,\n      text: [group],\n      hovertemplate: `%{x} %{text}<extra></extra>`,\n      mode: 'markers',\n      name: group,\n      marker: {\n        color: plotStyle.markerFill,\n        line: {\n          color: plotStyle.markerLine,\n          width: 1,\n        },\n\n        symbol: markerSymbols ? markerSymbols[group] : defaultSymbols[i],\n        size: plotStyle.markerSize,\n      },\n    }\n  })\n\n  return data\n}\n\nconst DEFAULT_DOTPLOT_PLOTSTYLE: PlotStyle = {\n  markerFill: '#515359',\n  markerLine: '#515359',\n  markerSize: 9,\n  backgroundColor: 'transparent',\n}\nconst DEFAULT_DOTPLOT_STYLE: CSSProperties = {\n  width: '100%',\n  height: '100%',\n}\n\nfunction DotPlot({\n  plotData,\n  optionsConfig,\n  layoutConfig,\n  label,\n  id,\n  xMax,\n  style = DEFAULT_DOTPLOT_STYLE,\n  markerSymbols,\n  plotStyle = DEFAULT_DOTPLOT_PLOTSTYLE,\n  onClick,\n  isLegend = false,\n  isXAxis = false,\n}: DotPlotProps) {\n  const pointsTypes = label ? [label] : undefined\n\n  return (\n    <Plot\n      key={`dotPlot_${id}`}\n      layout={getLayout(layoutConfig, {\n        isLegend: isLegend,\n        isXAxis: isXAxis,\n        maxValue: xMax,\n        backgroundColor: plotStyle.backgroundColor,\n      })}\n      style={style}\n      data={getPlotDataPoints(plotData, plotStyle, pointsTypes, markerSymbols)}\n      config={optionsConfig}\n      onClick={e => (onClick ? onClick(e) : noop)}\n    />\n  )\n}\n\nexport default DotPlot\n"],"mappings":"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"}

package/dist/components/Plot/Plot.d.ts

@@ -1,9 +1,20 @@
 import { PlotParams } from 'react-plotly.js';
+export declare const safeESModule: <T>(a: T | {
+    default: T;
+}) => T;
 /**
- * Wrapper around react-plotly.js, lazy loads the plotly.js library.
+ * Wrapper around react-plotly.js, lazy loads plotly.js-basic-dist.
+ * Use this for standard chart types (bar, scatter, pie).
  * @param props
  * @constructor
  */
 export declare function Plot(props: PlotParams): import("react/jsx-runtime").JSX.Element;
+/**
+ * Wrapper around react-plotly.js, lazy loads the full plotly.js bundle.
+ * Use this for trace types not available in plotly.js-basic-dist, such as Sankey.
+ * @param props
+ * @constructor
+ */
+export declare function PlotFullBundle(props: PlotParams): import("react/jsx-runtime").JSX.Element;
 export default Plot;
 //# sourceMappingURL=Plot.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Plot.d.ts","sourceRoot":"","sources":["../../../src/components/Plot/Plot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAgB5C;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,UAAU,2CAMrC;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Plot.d.ts","sourceRoot":"","sources":["../../../src/components/Plot/Plot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAK5C,eAAO,MAAM,YAAY,GAAI,CAAC,EAAG,GAAG,CAAC,GAAG;IAAE,OAAO,EAAE,CAAC,CAAA;CAAE,KAAG,CAGxD,CAAA;AASD;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,UAAU,2CAMrC;AASD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,2CAM/C;AAED,eAAe,IAAI,CAAA"}

package/dist/components/Plot/Plot.js

@@ -9,7 +9,11 @@ var i = (e) => {
 function o(e) {
 	return /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(a, { ...e }) });
 }
+var s = n(async () => ({ default: e(i(await import("plotly.js"))) }));
+function c(e) {
+	return /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(s, { ...e }) });
+}
 //#endregion
-export { o as Plot, o as default };
+export { o as Plot, o as default, c as PlotFullBundle, i as safeESModule };
 
 //# sourceMappingURL=Plot.js.map

package/dist/components/Plot/Plot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Plot.js","names":[],"sources":["../../../src/components/Plot/Plot.tsx"],"sourcesContent":["import { PlotParams } from 'react-plotly.js'\nimport createPlotlyComponent from './safe-react-plotly-factory'\nimport { lazy, Suspense } from 'react'\n\n// Lazy-load plotly.js since it is very large!\nconst safeESModule = <T,>(a: T | { default: T }): T => {\n  const b = a as any\n  return b.__esModule || b[Symbol.toStringTag] === 'Module' ? b.default : b\n}\n\nconst LazyLoadedPlot = lazy(async () => {\n  const Plotly = await import('plotly.js-basic-dist')\n  const plotly = safeESModule(Plotly)\n  return { default: createPlotlyComponent(plotly) }\n})\n\n/**\n * Wrapper around react-plotly.js, lazy loads the plotly.js library.\n * @param props\n * @constructor\n */\nexport function Plot(props: PlotParams) {\n  return (\n    <Suspense>\n      <LazyLoadedPlot {...props} />\n    </Suspense>\n  )\n}\n\nexport default Plot\n"],"mappings":";;;;AAKA,IAAM,KAAoB,MAA6B;CACrD,IAAM,IAAI;AACV,QAAO,EAAE,cAAc,EAAE,OAAO,iBAAiB,WAAW,EAAE,UAAU;GAGpE,IAAiB,EAAK,aAGnB,EAAE,SAAS,EADH,EAAa,MADP,OAAO,wBAEY,CAAO,EAAE,EACjD;AAOF,SAAgB,EAAK,GAAmB;AACtC,QACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAgB,GAAI,GAAS,CAAA,EACpB,CAAA"}
+{"version":3,"file":"Plot.js","names":[],"sources":["../../../src/components/Plot/Plot.tsx"],"sourcesContent":["import { PlotParams } from 'react-plotly.js'\nimport createPlotlyComponent from './safe-react-plotly-factory'\nimport { lazy, Suspense } from 'react'\n\n// Lazy-load plotly.js since it is very large!\nexport const safeESModule = <T,>(a: T | { default: T }): T => {\n  const b = a as any\n  return b.__esModule || b[Symbol.toStringTag] === 'Module' ? b.default : b\n}\n\n// Lazy-load plotly.js-basic-dist (scatter, bar, pie, scattergl traces).\nconst LazyLoadedPlot = lazy(async () => {\n  const Plotly = await import('plotly.js-basic-dist')\n  const plotly = safeESModule(Plotly)\n  return { default: createPlotlyComponent(plotly) }\n})\n\n/**\n * Wrapper around react-plotly.js, lazy loads plotly.js-basic-dist.\n * Use this for standard chart types (bar, scatter, pie).\n * @param props\n * @constructor\n */\nexport function Plot(props: PlotParams) {\n  return (\n    <Suspense>\n      <LazyLoadedPlot {...props} />\n    </Suspense>\n  )\n}\n\n// Lazy-load the full plotly.js bundle which includes all trace types (e.g. Sankey).\nconst LazyLoadedFullBundlePlot = lazy(async () => {\n  const Plotly = await import('plotly.js')\n  const plotly = safeESModule(Plotly)\n  return { default: createPlotlyComponent(plotly) }\n})\n\n/**\n * Wrapper around react-plotly.js, lazy loads the full plotly.js bundle.\n * Use this for trace types not available in plotly.js-basic-dist, such as Sankey.\n * @param props\n * @constructor\n */\nexport function PlotFullBundle(props: PlotParams) {\n  return (\n    <Suspense>\n      <LazyLoadedFullBundlePlot {...props} />\n    </Suspense>\n  )\n}\n\nexport default Plot\n"],"mappings":";;;;AAKA,IAAa,KAAoB,MAA6B;CAC5D,IAAM,IAAI;CACV,OAAO,EAAE,cAAc,EAAE,OAAO,iBAAiB,WAAW,EAAE,UAAU;AAC1E,GAGM,IAAiB,EAAK,aAGnB,EAAE,SAAS,EADH,EAAa,MADP,OAAO,uBAEY,CAAM,EAAE,EACjD;AAQD,SAAgB,EAAK,GAAmB;CACtC,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAgB,GAAI,EAAQ,CAAA,EACpB,CAAA;AAEd;AAGA,IAAM,IAA2B,EAAK,aAG7B,EAAE,SAAS,EADH,EAAa,MADP,OAAO,YAEY,CAAM,EAAE,EACjD;AAQD,SAAgB,EAAe,GAAmB;CAChD,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAA0B,GAAI,EAAQ,CAAA,EAC9B,CAAA;AAEd"}

package/dist/components/Plot/PlotPanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlotPanelHeader.js","names":[],"sources":["../../../src/components/Plot/PlotPanelHeader.tsx"],"sourcesContent":["import {\n  FacetColumnResultValues,\n  QueryResultBundle,\n} from '@sage-bionetworks/synapse-types'\nimport { SkeletonInlineBlock } from '../Skeleton/SkeletonInlineBlock'\nimport { EnumFacetFilter } from '../widgets/query-filter/EnumFacetFilter/EnumFacetFilter'\nimport { IconSvgButton } from '../IconSvgButton'\n\nexport type PlotPanelHeaderProps = {\n  data?: QueryResultBundle\n  isLoading?: boolean\n  title: string\n  facetToPlot?: FacetColumnResultValues\n  onHide: () => void\n  setShowModal?: (show: boolean) => void\n}\n\nexport default function PlotPanelHeader(props: PlotPanelHeaderProps) {\n  const { data, isLoading, title, facetToPlot, onHide, setShowModal } = props\n  return (\n    <div className=\"FacetNavPanel__title\">\n      {!data && isLoading ? (\n        <SkeletonInlineBlock width={100} />\n      ) : (\n        <span className=\"FacetNavPanel__title__name\">{title}</span>\n      )}\n      <div role=\"toolbar\" className=\"FacetNavPanel__title__tools\">\n        {facetToPlot && (\n          <EnumFacetFilter facet={facetToPlot} containerAs=\"Dropdown\" />\n        )}\n        {setShowModal && (\n          <IconSvgButton\n            tooltipText=\"Expand to large graph\"\n            tooltipPlacement=\"bottom\"\n            onClick={() => setShowModal(true)}\n            size=\"small\"\n            icon=\"openInFull\"\n          />\n        )}\n        <IconSvgButton\n          tooltipText=\"Hide graph under Show More\"\n          tooltipPlacement=\"bottom\"\n          onClick={() => onHide()}\n          size=\"small\"\n          icon=\"close\"\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAiBA,SAAwB,EAAgB,GAA6B;CACnE,IAAM,EAAE,SAAM,cAAW,UAAO,gBAAa,WAAQ,oBAAiB;AACtE,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,CAAC,KAAQ,IACR,kBAAC,GAAD,EAAqB,OAAO,KAAO,CAAA,GAEnC,kBAAC,QAAD;GAAM,WAAU;aAA8B;GAAa,CAAA,EAE7D,kBAAC,OAAD;GAAK,MAAK;GAAU,WAAU;aAA9B;IACG,KACC,kBAAC,GAAD;KAAiB,OAAO;KAAa,aAAY;KAAa,CAAA;IAE/D,KACC,kBAAC,GAAD;KACE,aAAY;KACZ,kBAAiB;KACjB,eAAe,EAAa,GAAK;KACjC,MAAK;KACL,MAAK;KACL,CAAA;IAEJ,kBAAC,GAAD;KACE,aAAY;KACZ,kBAAiB;KACjB,eAAe,GAAQ;KACvB,MAAK;KACL,MAAK;KACL,CAAA;IACE;KACF"}
+{"version":3,"file":"PlotPanelHeader.js","names":[],"sources":["../../../src/components/Plot/PlotPanelHeader.tsx"],"sourcesContent":["import {\n  FacetColumnResultValues,\n  QueryResultBundle,\n} from '@sage-bionetworks/synapse-types'\nimport { SkeletonInlineBlock } from '../Skeleton/SkeletonInlineBlock'\nimport { EnumFacetFilter } from '../widgets/query-filter/EnumFacetFilter/EnumFacetFilter'\nimport { IconSvgButton } from '../IconSvgButton'\n\nexport type PlotPanelHeaderProps = {\n  data?: QueryResultBundle\n  isLoading?: boolean\n  title: string\n  facetToPlot?: FacetColumnResultValues\n  onHide: () => void\n  setShowModal?: (show: boolean) => void\n}\n\nexport default function PlotPanelHeader(props: PlotPanelHeaderProps) {\n  const { data, isLoading, title, facetToPlot, onHide, setShowModal } = props\n  return (\n    <div className=\"FacetNavPanel__title\">\n      {!data && isLoading ? (\n        <SkeletonInlineBlock width={100} />\n      ) : (\n        <span className=\"FacetNavPanel__title__name\">{title}</span>\n      )}\n      <div role=\"toolbar\" className=\"FacetNavPanel__title__tools\">\n        {facetToPlot && (\n          <EnumFacetFilter facet={facetToPlot} containerAs=\"Dropdown\" />\n        )}\n        {setShowModal && (\n          <IconSvgButton\n            tooltipText=\"Expand to large graph\"\n            tooltipPlacement=\"bottom\"\n            onClick={() => setShowModal(true)}\n            size=\"small\"\n            icon=\"openInFull\"\n          />\n        )}\n        <IconSvgButton\n          tooltipText=\"Hide graph under Show More\"\n          tooltipPlacement=\"bottom\"\n          onClick={() => onHide()}\n          size=\"small\"\n          icon=\"close\"\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAiBA,SAAwB,EAAgB,GAA6B;CACnE,IAAM,EAAE,SAAM,cAAW,UAAO,gBAAa,WAAQ,oBAAiB;CACtE,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,CAAC,KAAQ,IACR,kBAAC,GAAD,EAAqB,OAAO,IAAM,CAAA,IAElC,kBAAC,QAAD;GAAM,WAAU;aAA8B;EAAY,CAAA,GAE5D,kBAAC,OAAD;GAAK,MAAK;GAAU,WAAU;aAA9B;IACG,KACC,kBAAC,GAAD;KAAiB,OAAO;KAAa,aAAY;IAAY,CAAA;IAE9D,KACC,kBAAC,GAAD;KACE,aAAY;KACZ,kBAAiB;KACjB,eAAe,EAAa,EAAI;KAChC,MAAK;KACL,MAAK;IACN,CAAA;IAEH,kBAAC,GAAD;KACE,aAAY;KACZ,kBAAiB;KACjB,eAAe,EAAO;KACtB,MAAK;KACL,MAAK;IACN,CAAA;GACE;IACF;;AAET"}

package/dist/components/Plot/SynapsePlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SynapsePlot.js","names":[],"sources":["../../../src/components/Plot/SynapsePlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport { SynapseConstants } from '@/utils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { Skeleton } from '@mui/material'\nimport {\n  FacetColumnRequest,\n  QueryBundleRequest,\n  QueryFilter,\n  Row,\n} from '@sage-bionetworks/synapse-types'\nimport Plotly, { AxisType, PlotType } from 'plotly.js-basic-dist'\nimport { QueryContextType } from '../QueryContext'\nimport { QueryWrapperSynapsePlotRowClickEvent } from '../QueryWrapperPlotNav/QueryWrapperSynapsePlot'\nimport Plot from './Plot'\nimport './SynapsePlot.scss'\n\nexport type SynapsePlotWidgetParams = {\n  query: string //sql string\n  title?: string //plot title\n  xtitle?: Plotly.LayoutAxis['title'] // x-axis title\n  ytitle?: Plotly.LayoutAxis['title'] // y-axis title\n  type: PlotType\n  xaxistype?: AxisType\n  showlegend?: Plotly.Layout['showlegend'] // sets the legend visibility\n  horizontal?: boolean // sets the if a bar chart should be horizontal or vertical\n  barmode?: Plotly.Layout['barmode'] // Plotly barmode\n  displayModeBar?: Plotly.Config['displayModeBar'] // sets the modebar visibility\n  hoverinfo?: Plotly.PlotData['hoverinfo'] // sets the hover info\n}\n\n// QueryWrapperPlotNav customPlot parameters, undefined otherwise\nexport type QueryWrapperPlotNavCustomPlotParams = {\n  selectedFacets: FacetColumnRequest[]\n  additionalFilters: QueryFilter[]\n  onCustomPlotClick?: (event: QueryWrapperSynapsePlotRowClickEvent) => void\n  queryContext?: QueryContextType\n}\nexport type SynapsePlotProps = {\n  synapsePlotWidgetParams: SynapsePlotWidgetParams\n  customPlotParams?: QueryWrapperPlotNavCustomPlotParams\n}\n\nexport const SynapsePlot = (props: SynapsePlotProps): React.ReactNode => {\n  const { query } = props.synapsePlotWidgetParams\n  const { selectedFacets, additionalFilters, onCustomPlotClick, queryContext } =\n    props.customPlotParams ?? {}\n  const queryRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    entityId: parseEntityIdFromSqlStatement(query),\n    query: {\n      sql: query,\n      selectedFacets,\n      additionalFilters,\n    },\n  }\n  const { data: queryData, isLoading } =\n    useGetFullTableQueryResults(queryRequest)\n  if (isLoading) {\n    return <Skeleton width={'100%'} height={'200px'} />\n  }\n  if (!queryData) {\n    return <></>\n  }\n\n  const {\n    title,\n    xtitle,\n    ytitle,\n    type,\n    xaxistype,\n    showlegend,\n    barmode,\n    horizontal,\n    displayModeBar,\n    hoverinfo,\n  } = props.synapsePlotWidgetParams\n\n  const config: Partial<Plotly.Config> = {\n    displayModeBar,\n  }\n  const layout: Partial<Plotly.Layout> = {\n    showlegend: showlegend,\n    title,\n    barmode: barmode,\n  }\n  if (xtitle) {\n    layout.xaxis = {\n      title: xtitle,\n    }\n  }\n  if (xaxistype) {\n    layout.xaxis = {\n      ...layout.xaxis,\n      type: xaxistype,\n    }\n  }\n  if (ytitle) {\n    layout.yaxis = {\n      title: ytitle,\n    }\n  }\n  // init plot_data\n  const plotData: Partial<Plotly.PlotData>[] = []\n  const orientation = horizontal ? 'h' : 'v'\n  const headers = queryData.queryResult?.queryResults.headers ?? []\n  const rows = queryData.queryResult?.queryResults.rows ?? []\n  if (headers.length == 0 || rows.length == 0) {\n    return <></>\n  }\n  for (let i = 0; i < headers.length - 1; i += 1) {\n    // make an entry for each set of data points\n    plotData[i] = {\n      orientation,\n      name: headers[i + 1].name,\n      type: type,\n      x: [],\n      y: [],\n      customdata: [],\n      ...(hoverinfo !== undefined && { hoverinfo }),\n    }\n  }\n  // grab all the data\n  for (const row of rows) {\n    for (let j = 1; j < row.values.length; j += 1) {\n      // create pairs of data\n      const rowValues = row.values\n      const xArray = plotData[j - 1].x as Plotly.Datum[]\n      const yArray = plotData[j - 1].y as Plotly.Datum[]\n      const customdata = plotData[j - 1].customdata as Plotly.Datum[]\n\n      xArray.push(horizontal ? rowValues[j] : rowValues[0])\n      yArray.push(horizontal ? rowValues[0] : rowValues[j])\n      customdata.push(JSON.stringify(row))\n    }\n  }\n  let onPlotClick:\n    | ((event: Readonly<Plotly.PlotMouseEvent>) => void)\n    | undefined\n  if (onCustomPlotClick) {\n    onPlotClick = eventData => {\n      const selectedRow = JSON.parse(\n        eventData.points[0].customdata as string,\n      ) as Row\n      onCustomPlotClick({\n        row: selectedRow,\n        queryContext,\n      })\n    }\n  }\n\n  return (\n    <Plot\n      style={{ width: '100%', height: '450px' }}\n      className={onPlotClick ? 'SynapsePlot--clickable' : undefined}\n      layout={layout}\n      data={plotData}\n      config={config}\n      onClick={onPlotClick}\n    />\n  )\n}\n\nexport default SynapsePlot\n"],"mappings":";;;;;;;;;;;AA2CA,IAAa,KAAe,MAA6C;CACvE,IAAM,EAAE,aAAU,EAAM,yBAClB,EAAE,mBAAgB,sBAAmB,sBAAmB,oBAC5D,EAAM,oBAAoB,EAAE,EAWxB,EAAE,MAAM,GAAW,iBACvB,EAA4B;EAV5B,cAAc;EACd,UAAU;EACV,UAAU,EAA8B,EAAM;EAC9C,OAAO;GACL,KAAK;GACL;GACA;GACD;EAG2B,CAAa;AAC3C,KAAI,EACF,QAAO,kBAAC,GAAD;EAAU,OAAO;EAAQ,QAAQ;EAAW,CAAA;AAErD,KAAI,CAAC,EACH,QAAO,kBAAA,GAAA,EAAK,CAAA;CAGd,IAAM,EACJ,UACA,WACA,WACA,SACA,cACA,eACA,YACA,eACA,mBACA,iBACE,EAAM,yBAEJ,IAAiC,EACrC,mBACD,EACK,IAAiC;EACzB;EACZ;EACS;EACV;AAYD,CAXI,MACF,EAAO,QAAQ,EACb,OAAO,GACR,GAEC,MACF,EAAO,QAAQ;EACb,GAAG,EAAO;EACV,MAAM;EACP,GAEC,MACF,EAAO,QAAQ,EACb,OAAO,GACR;CAGH,IAAM,IAAuC,EAAE,EACzC,IAAc,IAAa,MAAM,KACjC,IAAU,EAAU,aAAa,aAAa,WAAW,EAAE,EAC3D,IAAO,EAAU,aAAa,aAAa,QAAQ,EAAE;AAC3D,KAAI,EAAQ,UAAU,KAAK,EAAK,UAAU,EACxC,QAAO,kBAAA,GAAA,EAAK,CAAA;AAEd,MAAK,IAAI,IAAI,GAAG,IAAI,EAAQ,SAAS,GAAG,KAAK,EAE3C,GAAS,KAAK;EACZ;EACA,MAAM,EAAQ,IAAI,GAAG;EACf;EACN,GAAG,EAAE;EACL,GAAG,EAAE;EACL,YAAY,EAAE;EACd,GAAI,MAAc,KAAA,KAAa,EAAE,cAAW;EAC7C;AAGH,MAAK,IAAM,KAAO,EAChB,MAAK,IAAI,IAAI,GAAG,IAAI,EAAI,OAAO,QAAQ,KAAK,GAAG;EAE7C,IAAM,IAAY,EAAI,QAChB,IAAS,EAAS,IAAI,GAAG,GACzB,IAAS,EAAS,IAAI,GAAG,GACzB,IAAa,EAAS,IAAI,GAAG;AAInC,EAFA,EAAO,KAAK,IAAa,EAAU,KAAK,EAAU,GAAG,EACrD,EAAO,KAAK,IAAa,EAAU,KAAK,EAAU,GAAG,EACrD,EAAW,KAAK,KAAK,UAAU,EAAI,CAAC;;CAGxC,IAAI;AAeJ,QAZI,MACF,KAAc,MAAa;AAIzB,IAAkB;GAChB,KAJkB,KAAK,MACvB,EAAU,OAAO,GAAG,WAGf;GACL;GACD,CAAC;KAKJ,kBAAC,GAAD;EACE,OAAO;GAAE,OAAO;GAAQ,QAAQ;GAAS;EACzC,WAAW,IAAc,2BAA2B,KAAA;EAC5C;EACR,MAAM;EACE;EACR,SAAS;EACT,CAAA"}
+{"version":3,"file":"SynapsePlot.js","names":[],"sources":["../../../src/components/Plot/SynapsePlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport { SynapseConstants } from '@/utils'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { Skeleton } from '@mui/material'\nimport {\n  FacetColumnRequest,\n  QueryBundleRequest,\n  QueryFilter,\n  Row,\n} from '@sage-bionetworks/synapse-types'\nimport Plotly, { AxisType, PlotType } from 'plotly.js-basic-dist'\nimport { QueryContextType } from '../QueryContext'\nimport { QueryWrapperSynapsePlotRowClickEvent } from '../QueryWrapperPlotNav/QueryWrapperSynapsePlot'\nimport Plot from './Plot'\nimport './SynapsePlot.scss'\n\nexport type SynapsePlotWidgetParams = {\n  query: string //sql string\n  title?: string //plot title\n  xtitle?: Plotly.LayoutAxis['title'] // x-axis title\n  ytitle?: Plotly.LayoutAxis['title'] // y-axis title\n  type: PlotType\n  xaxistype?: AxisType\n  showlegend?: Plotly.Layout['showlegend'] // sets the legend visibility\n  horizontal?: boolean // sets the if a bar chart should be horizontal or vertical\n  barmode?: Plotly.Layout['barmode'] // Plotly barmode\n  displayModeBar?: Plotly.Config['displayModeBar'] // sets the modebar visibility\n  hoverinfo?: Plotly.PlotData['hoverinfo'] // sets the hover info\n}\n\n// QueryWrapperPlotNav customPlot parameters, undefined otherwise\nexport type QueryWrapperPlotNavCustomPlotParams = {\n  selectedFacets: FacetColumnRequest[]\n  additionalFilters: QueryFilter[]\n  onCustomPlotClick?: (event: QueryWrapperSynapsePlotRowClickEvent) => void\n  queryContext?: QueryContextType\n}\nexport type SynapsePlotProps = {\n  synapsePlotWidgetParams: SynapsePlotWidgetParams\n  customPlotParams?: QueryWrapperPlotNavCustomPlotParams\n}\n\nexport const SynapsePlot = (props: SynapsePlotProps): React.ReactNode => {\n  const { query } = props.synapsePlotWidgetParams\n  const { selectedFacets, additionalFilters, onCustomPlotClick, queryContext } =\n    props.customPlotParams ?? {}\n  const queryRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    partMask: SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    entityId: parseEntityIdFromSqlStatement(query),\n    query: {\n      sql: query,\n      selectedFacets,\n      additionalFilters,\n    },\n  }\n  const { data: queryData, isLoading } =\n    useGetFullTableQueryResults(queryRequest)\n  if (isLoading) {\n    return <Skeleton width={'100%'} height={'200px'} />\n  }\n  if (!queryData) {\n    return <></>\n  }\n\n  const {\n    title,\n    xtitle,\n    ytitle,\n    type,\n    xaxistype,\n    showlegend,\n    barmode,\n    horizontal,\n    displayModeBar,\n    hoverinfo,\n  } = props.synapsePlotWidgetParams\n\n  const config: Partial<Plotly.Config> = {\n    displayModeBar,\n  }\n  const layout: Partial<Plotly.Layout> = {\n    showlegend: showlegend,\n    title,\n    barmode: barmode,\n  }\n  if (xtitle) {\n    layout.xaxis = {\n      title: xtitle,\n    }\n  }\n  if (xaxistype) {\n    layout.xaxis = {\n      ...layout.xaxis,\n      type: xaxistype,\n    }\n  }\n  if (ytitle) {\n    layout.yaxis = {\n      title: ytitle,\n    }\n  }\n  // init plot_data\n  const plotData: Partial<Plotly.PlotData>[] = []\n  const orientation = horizontal ? 'h' : 'v'\n  const headers = queryData.queryResult?.queryResults.headers ?? []\n  const rows = queryData.queryResult?.queryResults.rows ?? []\n  if (headers.length == 0 || rows.length == 0) {\n    return <></>\n  }\n  for (let i = 0; i < headers.length - 1; i += 1) {\n    // make an entry for each set of data points\n    plotData[i] = {\n      orientation,\n      name: headers[i + 1].name,\n      type: type,\n      x: [],\n      y: [],\n      customdata: [],\n      ...(hoverinfo !== undefined && { hoverinfo }),\n    }\n  }\n  // grab all the data\n  for (const row of rows) {\n    for (let j = 1; j < row.values.length; j += 1) {\n      // create pairs of data\n      const rowValues = row.values\n      const xArray = plotData[j - 1].x as Plotly.Datum[]\n      const yArray = plotData[j - 1].y as Plotly.Datum[]\n      const customdata = plotData[j - 1].customdata as Plotly.Datum[]\n\n      xArray.push(horizontal ? rowValues[j] : rowValues[0])\n      yArray.push(horizontal ? rowValues[0] : rowValues[j])\n      customdata.push(JSON.stringify(row))\n    }\n  }\n  let onPlotClick:\n    | ((event: Readonly<Plotly.PlotMouseEvent>) => void)\n    | undefined\n  if (onCustomPlotClick) {\n    onPlotClick = eventData => {\n      const selectedRow = JSON.parse(\n        eventData.points[0].customdata as string,\n      ) as Row\n      onCustomPlotClick({\n        row: selectedRow,\n        queryContext,\n      })\n    }\n  }\n\n  return (\n    <Plot\n      style={{ width: '100%', height: '450px' }}\n      className={onPlotClick ? 'SynapsePlot--clickable' : undefined}\n      layout={layout}\n      data={plotData}\n      config={config}\n      onClick={onPlotClick}\n    />\n  )\n}\n\nexport default SynapsePlot\n"],"mappings":";;;;;;;;;;;AA2CA,IAAa,KAAe,MAA6C;CACvE,IAAM,EAAE,aAAU,EAAM,yBAClB,EAAE,mBAAgB,sBAAmB,sBAAmB,oBAC5D,EAAM,oBAAoB,CAAC,GAWvB,EAAE,MAAM,GAAW,iBACvB,EAA4B;EAV5B,cAAc;EACd,UAAU;EACV,UAAU,EAA8B,CAAK;EAC7C,OAAO;GACL,KAAK;GACL;GACA;EACF;CAG4B,CAAY;CAC1C,IAAI,GACF,OAAO,kBAAC,GAAD;EAAU,OAAO;EAAQ,QAAQ;CAAU,CAAA;CAEpD,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAGb,IAAM,EACJ,UACA,WACA,WACA,SACA,cACA,eACA,YACA,eACA,mBACA,iBACE,EAAM,yBAEJ,IAAiC,EACrC,kBACF,GACM,IAAiC;EACzB;EACZ;EACS;CACX;CAYA,AAXI,MACF,EAAO,QAAQ,EACb,OAAO,EACT,IAEE,MACF,EAAO,QAAQ;EACb,GAAG,EAAO;EACV,MAAM;CACR,IAEE,MACF,EAAO,QAAQ,EACb,OAAO,EACT;CAGF,IAAM,IAAuC,CAAC,GACxC,IAAc,IAAa,MAAM,KACjC,IAAU,EAAU,aAAa,aAAa,WAAW,CAAC,GAC1D,IAAO,EAAU,aAAa,aAAa,QAAQ,CAAC;CAC1D,IAAI,EAAQ,UAAU,KAAK,EAAK,UAAU,GACxC,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,KAAK,IAAI,IAAI,GAAG,IAAI,EAAQ,SAAS,GAAG,KAAK,GAE3C,EAAS,KAAK;EACZ;EACA,MAAM,EAAQ,IAAI,GAAG;EACf;EACN,GAAG,CAAC;EACJ,GAAG,CAAC;EACJ,YAAY,CAAC;EACb,GAAI,MAAc,KAAA,KAAa,EAAE,aAAU;CAC7C;CAGF,KAAK,IAAM,KAAO,GAChB,KAAK,IAAI,IAAI,GAAG,IAAI,EAAI,OAAO,QAAQ,KAAK,GAAG;EAE7C,IAAM,IAAY,EAAI,QAChB,IAAS,EAAS,IAAI,GAAG,GACzB,IAAS,EAAS,IAAI,GAAG,GACzB,IAAa,EAAS,IAAI,GAAG;EAInC,AAFA,EAAO,KAAK,IAAa,EAAU,KAAK,EAAU,EAAE,GACpD,EAAO,KAAK,IAAa,EAAU,KAAK,EAAU,EAAE,GACpD,EAAW,KAAK,KAAK,UAAU,CAAG,CAAC;CACrC;CAEF,IAAI;CAeJ,OAZI,MACF,KAAc,MAAa;EAIzB,EAAkB;GAChB,KAJkB,KAAK,MACvB,EAAU,OAAO,GAAG,UAGf;GACL;EACF,CAAC;CACH,IAIA,kBAAC,GAAD;EACE,OAAO;GAAE,OAAO;GAAQ,QAAQ;EAAQ;EACxC,WAAW,IAAc,2BAA2B,KAAA;EAC5C;EACR,MAAM;EACE;EACR,SAAS;CACV,CAAA;AAEL"}

package/dist/components/Plot/SynapseSankeyPlot.css

@@ -0,0 +1 @@
+._root_244go_1{opacity:0;width:100%;margin-top:48px;transition:opacity .6s}._rootVisible_244go_8{opacity:1}._title_244go_12{text-align:center;margin-bottom:12px;font-size:20px;font-weight:600}._svg_244go_19{outline:none;width:100%;height:auto;margin:0 auto;display:block;overflow:visible}._ribbon_244go_28{transition:stroke-opacity .25s,stroke-width .25s}._node_244go_32{transition:fill-opacity .25s}._categoryLabel_244go_36{transition:opacity .2s}._tabularNums_244go_40{font-variant-numeric:tabular-nums}._haloText_244go_44{paint-order:stroke;stroke-width:3px;stroke-linejoin:round}@media (prefers-reduced-motion:reduce){._root_244go_1{transition:none}}

package/dist/components/Plot/SynapseSankeyPlot.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+export type SynapseSankeyPlotProps = {
+    /** SQL query providing the node labels and link values (see labelColumn/valueColumn) */
+    sql: string;
+    /** Label for the left end node that links to every row returned by the query */
+    rootLabel: string;
+    /** Optional plot title */
+    title?: string;
+    /**
+     * Column supplying each category's label. Either a column name (matched
+     * against the query result headers) or a zero-based index. Defaults to the
+     * first column.
+     */
+    labelColumn?: string | number;
+    /**
+     * Column supplying each link's value. Either a column name or a zero-based
+     * index. Defaults to the second column.
+     */
+    valueColumn?: string | number;
+    /**
+     * Noun for the left end total caption, e.g. "datasets" renders
+     * "datasets total". Defaults to "items".
+     */
+    unitLabel?: string;
+    /**
+     * Phrase describing the breakdown, used in the chart's accessible label,
+     * e.g. "by source" renders "All Datasets broken down by source".
+     */
+    breakdownLabel?: string;
+    /**
+     * Invoked with a category's label when its left flow, center node, or label
+     * is clicked. When provided, those become interactive (pointer cursor).
+     */
+    onCategoryClick?: (categoryLabel: string) => void;
+    /** Invoked when the left end node (rootLabel) is clicked. */
+    onRootClick?: () => void;
+    /**
+     * Enables "butterfly" mode: a second value per category drawn as a mirrored
+     * flow from each center node to a right end node. Either a column name or a
+     * zero-based index (defaults to the third column when a right end is shown).
+     */
+    rightValueColumn?: string | number;
+    /** Label for the right end node (butterfly mode). Defaults to "Files". */
+    rightLabel?: string;
+    /** Noun for the right end total caption, e.g. "files". Defaults to "items". */
+    rightUnitLabel?: string;
+    /** Invoked with a category's label when its right flow is clicked. */
+    onRightCategoryClick?: (categoryLabel: string) => void;
+    /** Invoked when the right end node (rightLabel) is clicked. */
+    onRightEndClick?: () => void;
+};
+export declare const SynapseSankeyPlot: (props: SynapseSankeyPlotProps) => React.ReactNode;
+export default SynapseSankeyPlot;
+//# sourceMappingURL=SynapseSankeyPlot.d.ts.map

package/dist/components/Plot/SynapseSankeyPlot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SynapseSankeyPlot.d.ts","sourceRoot":"","sources":["../../../src/components/Plot/SynapseSankeyPlot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAA;AAe1E,MAAM,MAAM,sBAAsB,GAAG;IACnC,wFAAwF;IACxF,GAAG,EAAE,MAAM,CAAA;IACX,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAA;IACjB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAClC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sEAAsE;IACtE,oBAAoB,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,+DAA+D;IAC/D,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CAC7B,CAAA;AAiPD,eAAO,MAAM,iBAAiB,GAC5B,OAAO,sBAAsB,KAC5B,KAAK,CAAC,SAibR,CAAA;AAED,eAAe,iBAAiB,CAAA"}