synapse-react-client 4.0.9 → 4.0.11

package/dist/components/entity/page/title_bar/useGetMentions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGetMentions.js","names":[],"sources":["../../../../../src/components/entity/page/title_bar/useGetMentions.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport { skipToken, useQuery, UseQueryOptions } from '@tanstack/react-query'\nimport {\n  COLUMN_SINGLE_VALUE_QUERY_FILTER_CONCRETE_TYPE_VALUE,\n  ColumnSingleValueFilterOperator,\n  Query,\n} from '@sage-bionetworks/synapse-types'\nimport { useGetQueryResultBundleWithAsyncStatus } from '@/synapse-queries'\nimport { BUNDLE_MASK_QUERY_RESULTS } from '@/utils/SynapseConstants'\nimport { CitingWork } from './useDataCiteUsage'\n\nconst MENTIONS_SYNAPSE_TABLE_ID = 'syn66047339'\n\nexport type EuropePMCAuthor = {\n  fullName?: string\n  firstName?: string\n  lastName?: string\n}\n\nexport type EuropePMCAuthorList = {\n  author?: EuropePMCAuthor[]\n}\n\nexport type EuropePMCResult = {\n  id?: string\n  pmid?: string\n  pmcid?: string\n  doi?: string\n  title?: string\n  journalTitle?: string\n  pubYear?: string\n  authorList?: EuropePMCAuthorList\n}\n\nexport type EuropePMCResponse = {\n  resultList: {\n    result: EuropePMCResult[]\n  }\n}\n\nexport const getMentionsQueryKey = (entityId: string) =>\n  ['europepmc', entityId] as const\n\nexport async function fetchMetadataForPMCIDs(\n  signal: AbortSignal,\n  pmcids: string[],\n): Promise<CitingWork[]> {\n  if (pmcids.length === 0) return []\n  const query = pmcids.map(id => `PMCID:${id}`).join(' OR ')\n\n  const url = new URL('https://www.ebi.ac.uk/europepmc/webservices/rest/search')\n  url.searchParams.set('query', query)\n  url.searchParams.set('format', 'json')\n  url.searchParams.set('pageSize', String(pmcids.length))\n\n  const resp = await fetch(url.toString(), {\n    headers: { Accept: 'application/json' },\n    signal,\n  })\n  if (!resp.ok)\n    throw new Error(`Europe PMC error ${resp.status}: ${await resp.text()}`)\n\n  const json = (await resp.json()) as EuropePMCResponse\n  return mapEuropePMCResponseToCitingWorks(json)\n}\n\nexport function mapEuropePMCResponseToCitingWorks(\n  json: EuropePMCResponse,\n): CitingWork[] {\n  return json.resultList.result.map(\n    r =>\n      ({\n        id: r.pmcid,\n        title: r.title ?? '(Untitled)',\n        doi: r.doi,\n        publisher: r.journalTitle,\n        publicationYear: r.pubYear ? Number(r.pubYear) : undefined,\n        // authors: r.authorList?.author?.map((a: EuropePMCAuthor) => a.fullName ?? `${a.firstName ?? \"\"} ${a.lastName ?? \"\"}`.trim()) ?? [],\n      } as CitingWork),\n  )\n}\n\nexport function useGetMentions(\n  entityId: string,\n  options?: Omit<UseQueryOptions<CitingWork[], Error>, 'queryKey' | 'queryFn'>,\n) {\n  const query: Query = {\n    sql: `select pmcid from ${MENTIONS_SYNAPSE_TABLE_ID}`,\n    additionalFilters: [\n      {\n        concreteType: COLUMN_SINGLE_VALUE_QUERY_FILTER_CONCRETE_TYPE_VALUE,\n        columnName: 'synid',\n        operator: ColumnSingleValueFilterOperator.EQUAL,\n        values: [entityId],\n      },\n    ],\n  }\n\n  const { data } = useGetQueryResultBundleWithAsyncStatus({\n    entityId: entityId,\n    query,\n    partMask: BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n  })\n\n  const rows = data?.responseBody?.queryResult?.queryResults?.rows\n  const pcmids = rows\n    ?.map(row => {\n      const pmcid = row.values[0]\n      // remove \"pmc:\" prefix if present\n      return pmcid?.toString().replace(/^pmc:/i, '')\n    })\n    .filter(pmcid => pmcid != null) as string[]\n  const key = useMemo(() => getMentionsQueryKey(entityId), [entityId])\n  return useQuery({\n    ...options,\n    queryKey: key,\n    queryFn: pcmids\n      ? ({ signal }) => {\n          return fetchMetadataForPMCIDs(signal, pcmids)\n        }\n      : skipToken,\n  })\n}\n"],"mappings":";;;;;;;AAWA,IAAM,IAA4B,eA6BrB,KAAuB,MAClC,CAAC,aAAa,EAAS;AAEzB,eAAsB,EACpB,GACA,GACuB;AACvB,KAAI,EAAO,WAAW,EAAG,QAAO,EAAE;CAClC,IAAM,IAAQ,EAAO,KAAI,MAAM,SAAS,IAAK,CAAC,KAAK,OAAO,EAEpD,IAAM,IAAI,IAAI,0DAA0D;AAG9E,CAFA,EAAI,aAAa,IAAI,SAAS,EAAM,EACpC,EAAI,aAAa,IAAI,UAAU,OAAO,EACtC,EAAI,aAAa,IAAI,YAAY,OAAO,EAAO,OAAO,CAAC;CAEvD,IAAM,IAAO,MAAM,MAAM,EAAI,UAAU,EAAE;EACvC,SAAS,EAAE,QAAQ,oBAAoB;EACvC;EACD,CAAC;AACF,KAAI,CAAC,EAAK,GACR,OAAU,MAAM,oBAAoB,EAAK,OAAO,IAAI,MAAM,EAAK,MAAM,GAAG;AAG1E,QAAO,EADO,MAAM,EAAK,MAAM,CACe;;AAGhD,SAAgB,EACd,GACc;AACd,QAAO,EAAK,WAAW,OAAO,KAC5B,OACG;EACC,IAAI,EAAE;EACN,OAAO,EAAE,SAAS;EAClB,KAAK,EAAE;EACP,WAAW,EAAE;EACb,iBAAiB,EAAE,UAAU,OAAO,EAAE,QAAQ,GAAG,KAAA;EAElD,EACJ;;AAGH,SAAgB,EACd,GACA,GACA;CAaA,IAAM,EAAE,YAAS,EAAuC;EAC5C;EACV,OAdmB;GACnB,KAAK,qBAAqB;GAC1B,mBAAmB,CACjB;IACE,cAAc;IACd,YAAY;IACZ,UAAU,EAAgC;IAC1C,QAAQ,CAAC,EAAS;IACnB,CACF;GACF;EAKC,UAAA;EACA,cAAc;EACf,CAAC,EAGI,KADO,GAAM,cAAc,aAAa,cAAc,OAExD,KAAI,MACU,EAAI,OAAO,IAEX,UAAU,CAAC,QAAQ,UAAU,GAAG,CAC9C,CACD,QAAO,MAAS,KAAS,KAAK,EAC3B,IAAM,QAAc,EAAoB,EAAS,EAAE,CAAC,EAAS,CAAC;AACpE,QAAO,EAAS;EACd,GAAG;EACH,UAAU;EACV,SAAS,KACJ,EAAE,gBACM,EAAuB,GAAQ,EAAO,GAE/C;EACL,CAAC"}
+{"version":3,"file":"useGetMentions.js","names":[],"sources":["../../../../../src/components/entity/page/title_bar/useGetMentions.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport { skipToken, useQuery, UseQueryOptions } from '@tanstack/react-query'\nimport {\n  COLUMN_SINGLE_VALUE_QUERY_FILTER_CONCRETE_TYPE_VALUE,\n  ColumnSingleValueFilterOperator,\n  Query,\n} from '@sage-bionetworks/synapse-types'\nimport { useGetQueryResultBundleWithAsyncStatus } from '@/synapse-queries'\nimport { BUNDLE_MASK_QUERY_RESULTS } from '@/utils/SynapseConstants'\nimport { CitingWork } from './useDataCiteUsage'\n\nconst MENTIONS_SYNAPSE_TABLE_ID = 'syn66047339'\n\nexport type EuropePMCAuthor = {\n  fullName?: string\n  firstName?: string\n  lastName?: string\n}\n\nexport type EuropePMCAuthorList = {\n  author?: EuropePMCAuthor[]\n}\n\nexport type EuropePMCResult = {\n  id?: string\n  pmid?: string\n  pmcid?: string\n  doi?: string\n  title?: string\n  journalTitle?: string\n  pubYear?: string\n  authorList?: EuropePMCAuthorList\n}\n\nexport type EuropePMCResponse = {\n  resultList: {\n    result: EuropePMCResult[]\n  }\n}\n\nexport const getMentionsQueryKey = (entityId: string) =>\n  ['europepmc', entityId] as const\n\nexport async function fetchMetadataForPMCIDs(\n  signal: AbortSignal,\n  pmcids: string[],\n): Promise<CitingWork[]> {\n  if (pmcids.length === 0) return []\n  const query = pmcids.map(id => `PMCID:${id}`).join(' OR ')\n\n  const url = new URL('https://www.ebi.ac.uk/europepmc/webservices/rest/search')\n  url.searchParams.set('query', query)\n  url.searchParams.set('format', 'json')\n  url.searchParams.set('pageSize', String(pmcids.length))\n\n  const resp = await fetch(url.toString(), {\n    headers: { Accept: 'application/json' },\n    signal,\n  })\n  if (!resp.ok)\n    throw new Error(`Europe PMC error ${resp.status}: ${await resp.text()}`)\n\n  const json = (await resp.json()) as EuropePMCResponse\n  return mapEuropePMCResponseToCitingWorks(json)\n}\n\nexport function mapEuropePMCResponseToCitingWorks(\n  json: EuropePMCResponse,\n): CitingWork[] {\n  return json.resultList.result.map(\n    r =>\n      ({\n        id: r.pmcid,\n        title: r.title ?? '(Untitled)',\n        doi: r.doi,\n        publisher: r.journalTitle,\n        publicationYear: r.pubYear ? Number(r.pubYear) : undefined,\n        // authors: r.authorList?.author?.map((a: EuropePMCAuthor) => a.fullName ?? `${a.firstName ?? \"\"} ${a.lastName ?? \"\"}`.trim()) ?? [],\n      } as CitingWork),\n  )\n}\n\nexport function useGetMentions(\n  entityId: string,\n  options?: Omit<UseQueryOptions<CitingWork[], Error>, 'queryKey' | 'queryFn'>,\n) {\n  const query: Query = {\n    sql: `select pmcid from ${MENTIONS_SYNAPSE_TABLE_ID}`,\n    additionalFilters: [\n      {\n        concreteType: COLUMN_SINGLE_VALUE_QUERY_FILTER_CONCRETE_TYPE_VALUE,\n        columnName: 'synid',\n        operator: ColumnSingleValueFilterOperator.EQUAL,\n        values: [entityId],\n      },\n    ],\n  }\n\n  const { data } = useGetQueryResultBundleWithAsyncStatus({\n    entityId: entityId,\n    query,\n    partMask: BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n  })\n\n  const rows = data?.responseBody?.queryResult?.queryResults?.rows\n  const pcmids = rows\n    ?.map(row => {\n      const pmcid = row.values[0]\n      // remove \"pmc:\" prefix if present\n      return pmcid?.toString().replace(/^pmc:/i, '')\n    })\n    .filter(pmcid => pmcid != null) as string[]\n  const key = useMemo(() => getMentionsQueryKey(entityId), [entityId])\n  return useQuery({\n    ...options,\n    queryKey: key,\n    queryFn: pcmids\n      ? ({ signal }) => {\n          return fetchMetadataForPMCIDs(signal, pcmids)\n        }\n      : skipToken,\n  })\n}\n"],"mappings":";;;;;;;AAWA,IAAM,IAA4B,eA6BrB,KAAuB,MAClC,CAAC,aAAa,EAAS;AAEzB,eAAsB,EACpB,GACA,GACuB;AACvB,KAAI,EAAO,WAAW,EAAG,QAAO,EAAE;CAClC,IAAM,IAAQ,EAAO,KAAI,MAAM,SAAS,IAAK,CAAC,KAAK,OAAO,EAEpD,IAAM,IAAI,IAAI,0DAA0D;AAG9E,CAFA,EAAI,aAAa,IAAI,SAAS,EAAM,EACpC,EAAI,aAAa,IAAI,UAAU,OAAO,EACtC,EAAI,aAAa,IAAI,YAAY,OAAO,EAAO,OAAO,CAAC;CAEvD,IAAM,IAAO,MAAM,MAAM,EAAI,UAAU,EAAE;EACvC,SAAS,EAAE,QAAQ,oBAAoB;EACvC;EACD,CAAC;AACF,KAAI,CAAC,EAAK,GACR,OAAU,MAAM,oBAAoB,EAAK,OAAO,IAAI,MAAM,EAAK,MAAM,GAAG;AAG1E,QAAO,EAAkC,MADrB,EAAK,MAAM,CACe;;AAGhD,SAAgB,EACd,GACc;AACd,QAAO,EAAK,WAAW,OAAO,KAC5B,OACG;EACC,IAAI,EAAE;EACN,OAAO,EAAE,SAAS;EAClB,KAAK,EAAE;EACP,WAAW,EAAE;EACb,iBAAiB,EAAE,UAAU,OAAO,EAAE,QAAQ,GAAG,KAAA;EAElD,EACJ;;AAGH,SAAgB,EACd,GACA,GACA;CAaA,IAAM,EAAE,YAAS,EAAuC;EAC5C;EACV,OAAA;GAbA,KAAK,qBAAqB;GAC1B,mBAAmB,CACjB;IACE,cAAc;IACd,YAAY;IACZ,UAAU,EAAgC;IAC1C,QAAQ,CAAC,EAAS;IACnB,CACF;GAKD;EACA,UAAA;EACA,cAAc;EACf,CAAC,EAGI,KADO,GAAM,cAAc,aAAa,cAAc,OAExD,KAAI,MACU,EAAI,OAAO,IAEX,UAAU,CAAC,QAAQ,UAAU,GAAG,CAC9C,CACD,QAAO,MAAS,KAAS,KAAK,EAC3B,IAAM,QAAc,EAAoB,EAAS,EAAE,CAAC,EAAS,CAAC;AACpE,QAAO,EAAS;EACd,GAAG;EACH,UAAU;EACV,SAAS,KACJ,EAAE,gBACM,EAAuB,GAAQ,EAAO,GAE/C;EACL,CAAC"}

package/dist/components/error/ErrorPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorPage.js","names":[],"sources":["../../../src/components/error/ErrorPage.tsx"],"sourcesContent":["import { ReactComponent as MaintenanceSvg } from '@/assets/icons/error_page/maintenance.svg'\nimport { ReactComponent as NoAccessSvg } from '@/assets/icons/error_page/no-access.svg'\nimport { ReactComponent as UnavailableSvg } from '@/assets/icons/error_page/unavailable.svg'\nimport { useSynapseContext } from '@/utils'\nimport { Box, Link, Typography } from '@mui/material'\nimport { useCallback, useMemo, useState } from 'react'\nimport SynapseObjectDOIInfo from './SynapseObjectDOIInfo'\nimport SendMessageToEntityOwnerDialog from './SendMessageToEntityOwnerDialog'\nimport { DoiObjectType } from '@sage-bionetworks/synapse-client/generated/models/DoiObjectType'\n\nexport type ErrorPageProps = {\n  type: SynapseErrorType\n  message?: string // custom message to report\n  /** @deprecated use `id` and objectType: DoiObjectType.ENTITY */\n  entityId?: string\n  /** @deprecated use `version` and objectType: DoiObjectType.ENTITY */\n  entityVersion?: number\n\n  /** The ID of the object that was attempted to be retrieved, which may be used to show a 'tombstone' */\n  id?: string\n  /** The version of the object that was attempted to be retrieved, which may be used to show a 'tombstone' */\n  version?: number\n  /** The type of the object that was attempted to be retrieved, which may be used to show a 'tombstone' */\n  objectType?: DoiObjectType\n  /** If on a portal that may mint DOIs, this portal ID may be used to find a DOI to show a 'tombstone' */\n  portalId?: string\n\n  gotoPlace: (href: string) => void\n}\n\nexport const SYNAPSE_DOWN_TITLE = 'Synapse is down for maintenance.'\nexport const ACCESS_DENIED_TITLE = 'You don’t have permission to view this.'\nexport const NOT_FOUND_TITLE = 'This page isn’t available.'\nexport const LOG_IN_LINK_TEXT = 'Log in to Synapse'\nexport const CONTACT_US_LINK_TEXT = 'Contact us for more information'\nexport const CONTACT_ADMIN_LINK_TEXT = 'Contact the Administrator'\nexport const ACCESS_DENIED_ANONYMOUS_MESSAGE =\n  'Try logging in. If you still see this message after logging in, you have not been granted access to view this resource.'\nexport const ACCESS_DENIED_MESSAGE =\n  'This account has not been granted access to view this resource.'\nexport const NOT_FOUND_MESSAGE =\n  'The link you followed may be broken, or the page may have been removed.'\nexport const ACCESS_DENIED_ANONYMOUS_ACTION_DESCRIPTION =\n  'A Synapse account is free, and lets you view public resources.'\nexport const ACCESS_DENIED_CONTACT_ADMIN_ACTION_DESCRIPTION =\n  'Write a message to the owner of the resource asking for permission to view.'\n\nexport enum SynapseErrorType {\n  DOWN = 'DOWN',\n  ACCESS_DENIED = 'ACCESS_DENIED',\n  NOT_FOUND = 'NOT_FOUND',\n}\n\nconst getImage = (type: SynapseErrorType) => {\n  switch (type) {\n    case SynapseErrorType.DOWN:\n      return (\n        <MaintenanceSvg\n          role=\"img\"\n          aria-label=\"Synapse is Down image\"\n          title={SynapseErrorType.DOWN}\n        />\n      )\n    case SynapseErrorType.ACCESS_DENIED:\n      return (\n        <NoAccessSvg\n          role=\"img\"\n          aria-label=\"Access denied image\"\n          title={SynapseErrorType.ACCESS_DENIED}\n        />\n      )\n    case SynapseErrorType.NOT_FOUND:\n      return (\n        <UnavailableSvg\n          role=\"img\"\n          aria-label=\"Resource not found image\"\n          title={SynapseErrorType.NOT_FOUND}\n        />\n      )\n    default:\n      return <></>\n  }\n}\nconst getTitle = (type: SynapseErrorType) => {\n  switch (type) {\n    case SynapseErrorType.DOWN:\n      return SYNAPSE_DOWN_TITLE\n    case SynapseErrorType.ACCESS_DENIED:\n      return ACCESS_DENIED_TITLE\n    case SynapseErrorType.NOT_FOUND:\n      return NOT_FOUND_TITLE\n    default:\n      return ''\n  }\n}\n\ntype ErrorPageAction = {\n  linkText: string\n  onClick: () => void\n  description: string\n}\n\nfunction ErrorPage(props: ErrorPageProps) {\n  const {\n    type,\n    entityId = '',\n    entityVersion,\n    message,\n    gotoPlace,\n    id,\n    version,\n    objectType,\n    portalId,\n  } = props\n  const [isSendMessageToAdminDialogOpen, setSendMessageToAdminDialogOpen] =\n    useState<boolean>(false)\n  const { isAuthenticated } = useSynapseContext()\n  const image = useMemo(() => getImage(type), [type])\n  const title = useMemo(() => getTitle(type), [type])\n\n  const messages = useMemo(() => {\n    const msgs: string[] = []\n    switch (type) {\n      case SynapseErrorType.ACCESS_DENIED:\n        if (!isAuthenticated) {\n          msgs.push(ACCESS_DENIED_ANONYMOUS_MESSAGE)\n        } else {\n          msgs.push(ACCESS_DENIED_MESSAGE)\n        }\n        break\n      case SynapseErrorType.NOT_FOUND:\n        msgs.push(NOT_FOUND_MESSAGE)\n        break\n    }\n    if (message) {\n      msgs.push(message)\n    }\n    return msgs\n  }, [type, isAuthenticated, message])\n\n  const actions = useMemo(() => {\n    const acts: ErrorPageAction[] = []\n    if (type === SynapseErrorType.ACCESS_DENIED) {\n      if (!isAuthenticated) {\n        acts.push({\n          linkText: LOG_IN_LINK_TEXT,\n          onClick: () => gotoPlace('/LoginPlace:0'),\n          description: ACCESS_DENIED_ANONYMOUS_ACTION_DESCRIPTION,\n        })\n      } else if (entityId) {\n        acts.push({\n          linkText: CONTACT_US_LINK_TEXT,\n          onClick: () =>\n            window.open(\n              'https://sagebionetworks.jira.com/servicedesk/customer/portals',\n              '_blank',\n            ),\n          description: '',\n        })\n        // SWC-7073: Remove ability to send a message to the admins until we have a better option for the majority of the cases (service desk, contact emails, ...)\n        // acts.push({\n        //   linkText: CONTACT_ADMIN_LINK_TEXT,\n        //   onClick: () => setSendMessageToAdminDialogOpen(true),\n        //   description: ACCESS_DENIED_CONTACT_ADMIN_ACTION_DESCRIPTION,\n        // })\n      }\n    }\n    return acts\n  }, [type, isAuthenticated, entityId, gotoPlace])\n\n  const handleCloseDialog = useCallback(\n    () => setSendMessageToAdminDialogOpen(false),\n    [],\n  )\n  return (\n    <>\n      <Box\n        sx={{\n          display: { xs: 'flex', lg: 'grid' },\n          columnGap: '80px',\n          flexDirection: { xs: 'column', lg: undefined },\n          gridTemplateColumns: { lg: '40% 60%' },\n        }}\n      >\n        <Box\n          sx={{\n            justifySelf: 'end',\n            alignSelf: 'center',\n            '& svg': {\n              height: '360px',\n              maxWidth: '300px',\n            },\n            pt: '50px',\n            pb: '50px',\n          }}\n        >\n          {image}\n        </Box>\n        <Box\n          sx={{\n            justifySelf: 'start',\n            alignSelf: 'center',\n            display: 'flex',\n            flexDirection: 'column',\n            gap: '20px',\n            m: { xs: '15px', lg: undefined },\n            mr: { lg: '100px' },\n          }}\n        >\n          <Typography\n            sx={{ fontSize: '30px', fontWeight: 700, lineHeight: '36px' }}\n          >\n            {title}\n          </Typography>\n          {messages.map(message => {\n            return (\n              <Typography variant=\"body1\" key={message}>\n                {message}\n              </Typography>\n            )\n          })}\n          {actions.map(action => {\n            const { onClick, linkText, description } = action\n            return (\n              <Box key={linkText}>\n                <Link sx={{ fontSize: '16px' }} onClick={onClick}>\n                  {linkText}\n                </Link>\n                <Typography variant=\"body1\">{description}</Typography>\n              </Box>\n            )\n          })}\n          {entityId && (\n            <SynapseObjectDOIInfo\n              id={entityId}\n              version={entityVersion}\n              type={DoiObjectType.ENTITY}\n            />\n          )}\n          {id && objectType && (\n            <SynapseObjectDOIInfo\n              id={id}\n              version={version}\n              type={objectType}\n              portalId={portalId}\n            />\n          )}\n        </Box>\n      </Box>\n      {entityId && (\n        <SendMessageToEntityOwnerDialog\n          isOpen={isSendMessageToAdminDialogOpen}\n          onHide={handleCloseDialog}\n          entityId={entityId}\n        />\n      )}\n    </>\n  )\n}\n\nexport default ErrorPage\n"],"mappings":"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"}
+{"version":3,"file":"ErrorPage.js","names":[],"sources":["../../../src/components/error/ErrorPage.tsx"],"sourcesContent":["import { ReactComponent as MaintenanceSvg } from '@/assets/icons/error_page/maintenance.svg'\nimport { ReactComponent as NoAccessSvg } from '@/assets/icons/error_page/no-access.svg'\nimport { ReactComponent as UnavailableSvg } from '@/assets/icons/error_page/unavailable.svg'\nimport { useSynapseContext } from '@/utils'\nimport { Box, Link, Typography } from '@mui/material'\nimport { useCallback, useMemo, useState } from 'react'\nimport SynapseObjectDOIInfo from './SynapseObjectDOIInfo'\nimport SendMessageToEntityOwnerDialog from './SendMessageToEntityOwnerDialog'\nimport { DoiObjectType } from '@sage-bionetworks/synapse-client/generated/models/DoiObjectType'\n\nexport type ErrorPageProps = {\n  type: SynapseErrorType\n  message?: string // custom message to report\n  /** @deprecated use `id` and objectType: DoiObjectType.ENTITY */\n  entityId?: string\n  /** @deprecated use `version` and objectType: DoiObjectType.ENTITY */\n  entityVersion?: number\n\n  /** The ID of the object that was attempted to be retrieved, which may be used to show a 'tombstone' */\n  id?: string\n  /** The version of the object that was attempted to be retrieved, which may be used to show a 'tombstone' */\n  version?: number\n  /** The type of the object that was attempted to be retrieved, which may be used to show a 'tombstone' */\n  objectType?: DoiObjectType\n  /** If on a portal that may mint DOIs, this portal ID may be used to find a DOI to show a 'tombstone' */\n  portalId?: string\n\n  gotoPlace: (href: string) => void\n}\n\nexport const SYNAPSE_DOWN_TITLE = 'Synapse is down for maintenance.'\nexport const ACCESS_DENIED_TITLE = 'You don’t have permission to view this.'\nexport const NOT_FOUND_TITLE = 'This page isn’t available.'\nexport const LOG_IN_LINK_TEXT = 'Log in to Synapse'\nexport const CONTACT_US_LINK_TEXT = 'Contact us for more information'\nexport const CONTACT_ADMIN_LINK_TEXT = 'Contact the Administrator'\nexport const ACCESS_DENIED_ANONYMOUS_MESSAGE =\n  'Try logging in. If you still see this message after logging in, you have not been granted access to view this resource.'\nexport const ACCESS_DENIED_MESSAGE =\n  'This account has not been granted access to view this resource.'\nexport const NOT_FOUND_MESSAGE =\n  'The link you followed may be broken, or the page may have been removed.'\nexport const ACCESS_DENIED_ANONYMOUS_ACTION_DESCRIPTION =\n  'A Synapse account is free, and lets you view public resources.'\nexport const ACCESS_DENIED_CONTACT_ADMIN_ACTION_DESCRIPTION =\n  'Write a message to the owner of the resource asking for permission to view.'\n\nexport enum SynapseErrorType {\n  DOWN = 'DOWN',\n  ACCESS_DENIED = 'ACCESS_DENIED',\n  NOT_FOUND = 'NOT_FOUND',\n}\n\nconst getImage = (type: SynapseErrorType) => {\n  switch (type) {\n    case SynapseErrorType.DOWN:\n      return (\n        <MaintenanceSvg\n          role=\"img\"\n          aria-label=\"Synapse is Down image\"\n          title={SynapseErrorType.DOWN}\n        />\n      )\n    case SynapseErrorType.ACCESS_DENIED:\n      return (\n        <NoAccessSvg\n          role=\"img\"\n          aria-label=\"Access denied image\"\n          title={SynapseErrorType.ACCESS_DENIED}\n        />\n      )\n    case SynapseErrorType.NOT_FOUND:\n      return (\n        <UnavailableSvg\n          role=\"img\"\n          aria-label=\"Resource not found image\"\n          title={SynapseErrorType.NOT_FOUND}\n        />\n      )\n    default:\n      return <></>\n  }\n}\nconst getTitle = (type: SynapseErrorType) => {\n  switch (type) {\n    case SynapseErrorType.DOWN:\n      return SYNAPSE_DOWN_TITLE\n    case SynapseErrorType.ACCESS_DENIED:\n      return ACCESS_DENIED_TITLE\n    case SynapseErrorType.NOT_FOUND:\n      return NOT_FOUND_TITLE\n    default:\n      return ''\n  }\n}\n\ntype ErrorPageAction = {\n  linkText: string\n  onClick: () => void\n  description: string\n}\n\nfunction ErrorPage(props: ErrorPageProps) {\n  const {\n    type,\n    entityId = '',\n    entityVersion,\n    message,\n    gotoPlace,\n    id,\n    version,\n    objectType,\n    portalId,\n  } = props\n  const [isSendMessageToAdminDialogOpen, setSendMessageToAdminDialogOpen] =\n    useState<boolean>(false)\n  const { isAuthenticated } = useSynapseContext()\n  const image = useMemo(() => getImage(type), [type])\n  const title = useMemo(() => getTitle(type), [type])\n\n  const messages = useMemo(() => {\n    const msgs: string[] = []\n    switch (type) {\n      case SynapseErrorType.ACCESS_DENIED:\n        if (!isAuthenticated) {\n          msgs.push(ACCESS_DENIED_ANONYMOUS_MESSAGE)\n        } else {\n          msgs.push(ACCESS_DENIED_MESSAGE)\n        }\n        break\n      case SynapseErrorType.NOT_FOUND:\n        msgs.push(NOT_FOUND_MESSAGE)\n        break\n    }\n    if (message) {\n      msgs.push(message)\n    }\n    return msgs\n  }, [type, isAuthenticated, message])\n\n  const actions = useMemo(() => {\n    const acts: ErrorPageAction[] = []\n    if (type === SynapseErrorType.ACCESS_DENIED) {\n      if (!isAuthenticated) {\n        acts.push({\n          linkText: LOG_IN_LINK_TEXT,\n          onClick: () => gotoPlace('/LoginPlace:0'),\n          description: ACCESS_DENIED_ANONYMOUS_ACTION_DESCRIPTION,\n        })\n      } else if (entityId) {\n        acts.push({\n          linkText: CONTACT_US_LINK_TEXT,\n          onClick: () =>\n            window.open(\n              'https://sagebionetworks.jira.com/servicedesk/customer/portals',\n              '_blank',\n            ),\n          description: '',\n        })\n        // SWC-7073: Remove ability to send a message to the admins until we have a better option for the majority of the cases (service desk, contact emails, ...)\n        // acts.push({\n        //   linkText: CONTACT_ADMIN_LINK_TEXT,\n        //   onClick: () => setSendMessageToAdminDialogOpen(true),\n        //   description: ACCESS_DENIED_CONTACT_ADMIN_ACTION_DESCRIPTION,\n        // })\n      }\n    }\n    return acts\n  }, [type, isAuthenticated, entityId, gotoPlace])\n\n  const handleCloseDialog = useCallback(\n    () => setSendMessageToAdminDialogOpen(false),\n    [],\n  )\n  return (\n    <>\n      <Box\n        sx={{\n          display: { xs: 'flex', lg: 'grid' },\n          columnGap: '80px',\n          flexDirection: { xs: 'column', lg: undefined },\n          gridTemplateColumns: { lg: '40% 60%' },\n        }}\n      >\n        <Box\n          sx={{\n            justifySelf: 'end',\n            alignSelf: 'center',\n            '& svg': {\n              height: '360px',\n              maxWidth: '300px',\n            },\n            pt: '50px',\n            pb: '50px',\n          }}\n        >\n          {image}\n        </Box>\n        <Box\n          sx={{\n            justifySelf: 'start',\n            alignSelf: 'center',\n            display: 'flex',\n            flexDirection: 'column',\n            gap: '20px',\n            m: { xs: '15px', lg: undefined },\n            mr: { lg: '100px' },\n          }}\n        >\n          <Typography\n            sx={{ fontSize: '30px', fontWeight: 700, lineHeight: '36px' }}\n          >\n            {title}\n          </Typography>\n          {messages.map(message => {\n            return (\n              <Typography variant=\"body1\" key={message}>\n                {message}\n              </Typography>\n            )\n          })}\n          {actions.map(action => {\n            const { onClick, linkText, description } = action\n            return (\n              <Box key={linkText}>\n                <Link sx={{ fontSize: '16px' }} onClick={onClick}>\n                  {linkText}\n                </Link>\n                <Typography variant=\"body1\">{description}</Typography>\n              </Box>\n            )\n          })}\n          {entityId && (\n            <SynapseObjectDOIInfo\n              id={entityId}\n              version={entityVersion}\n              type={DoiObjectType.ENTITY}\n            />\n          )}\n          {id && objectType && (\n            <SynapseObjectDOIInfo\n              id={id}\n              version={version}\n              type={objectType}\n              portalId={portalId}\n            />\n          )}\n        </Box>\n      </Box>\n      {entityId && (\n        <SendMessageToEntityOwnerDialog\n          isOpen={isSendMessageToAdminDialogOpen}\n          onHide={handleCloseDialog}\n          entityId={entityId}\n        />\n      )}\n    </>\n  )\n}\n\nexport default ErrorPage\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"FavoritesPage.js","names":[],"sources":["../../../src/components/favorites/FavoritesPage.tsx"],"sourcesContent":["import NoSearchResults from '@/assets/icons/NoSearchResults'\nimport { useGetFavorites } from '@/synapse-queries/user/useFavorites'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  convertToEntityType,\n  entityTypeToFriendlyName,\n} from '@/utils/functions/EntityTypeUtils'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { InputAdornment, Stack, TextField } from '@mui/material'\nimport { EntityHeader } from '@sage-bionetworks/synapse-types'\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport { useEffect, useMemo, useState } from 'react'\nimport { EntityTypeIcon } from '../EntityIcon'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport ColumnHeader from '../TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport FavoriteButton from './FavoriteButton'\n\n// Local types used for client-side sorting\nexport type SortField = 'name' | 'type'\nexport type SortDirection = 'ASC' | 'DESC'\nexport type Sort = {\n  field: SortField\n  direction: SortDirection\n}\n\nconst columnHelper = createColumnHelper<EntityHeader>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'removeFavorite',\n    cell: ctx => <FavoriteButton entityId={ctx.row.original.id} />,\n    size: 60,\n    enableResizing: false,\n    meta: {\n      textAlign: 'center',\n    },\n  }),\n  columnHelper.accessor('name', {\n    cell: ctx => (\n      <a\n        rel=\"noopener noreferrer\"\n        href={`${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Synapse:${ctx.row.original.id}`}\n      >\n        {ctx.row.original.name}\n      </a>\n    ),\n    enableGlobalFilter: true,\n    header: props => <ColumnHeader {...props} title={'Name'} />,\n    size: 400,\n    enableColumnFilter: false,\n    sortingFn: 'alphanumeric',\n    enableSorting: true,\n  }),\n  columnHelper.accessor('type', {\n    cell: ctx => {\n      const entityType = convertToEntityType(ctx.row.original.type)\n      return (\n        <>\n          <EntityTypeIcon type={entityType} style={{ marginRight: '5px' }} />\n          {entityTypeToFriendlyName(entityType)}\n        </>\n      )\n    },\n    header: props => <ColumnHeader {...props} title={'Type'} />,\n    size: 160,\n    enableGlobalFilter: false,\n    sortingFn: 'alphanumeric',\n    filterFn: 'arrIncludes',\n    meta: {\n      enableMultipleSelect: true,\n      filterVariant: 'enumeration',\n      getDisplayText: value =>\n        entityTypeToFriendlyName(convertToEntityType(value)),\n    },\n    enableSorting: true,\n  }),\n]\n\nexport default function FavoritesPage() {\n  const { isAuthenticated } = useSynapseContext()\n  const [searchText, setSearchText] = useState<string>('')\n  const [error, setError] = useState<Error>()\n  const { data, isLoading, isError, error: newError } = useGetFavorites()\n\n  const favorites = useMemo(() => data ?? [], [data])\n\n  const favoritesTable = useReactTable<EntityHeader>({\n    data: favorites,\n    columns: columns,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    globalFilterFn: 'includesString',\n    state: {\n      globalFilter: searchText,\n    },\n    columnResizeMode: 'onChange',\n  })\n\n  useEffect(() => {\n    if (isError && newError) {\n      setError(newError)\n    }\n  }, [isError, newError])\n\n  useEffect(() => {\n    if (!isAuthenticated) {\n      setError(new Error('Please sign in to access your favorites.'))\n    } else {\n      setError(undefined)\n    }\n  }, [isAuthenticated])\n\n  if (error) {\n    return <ErrorBanner error={error} />\n  }\n\n  const hasFavoritesMatchingQuery = favoritesTable.getRowModel().rows.length > 0\n\n  return (\n    <div className=\"FavoritesPage\">\n      <TextField\n        type=\"search\"\n        placeholder=\"Favorite Name\"\n        value={searchText}\n        onChange={event => {\n          setSearchText(event.target.value)\n        }}\n        fullWidth\n        sx={{ mb: 4, maxWidth: '800px' }}\n        slotProps={{\n          input: {\n            startAdornment: (\n              <InputAdornment position=\"start\">\n                <IconSvg icon=\"search\" wrap={false} />\n              </InputAdornment>\n            ),\n          },\n        }}\n      />\n      <StyledTanStackTable table={favoritesTable} fullWidth={false} />\n      {!hasFavoritesMatchingQuery && !isLoading && (\n        <Stack\n          sx={{\n            my: 2,\n            gap: 1,\n            textAlign: 'center',\n          }}\n        >\n          <NoSearchResults height={'150px'} />\n          {data?.length == 0 ? (\n            <p>You currently have no favorites</p>\n          ) : (\n            <p>No matching favorites found</p>\n          )}\n        </Stack>\n      )}\n\n      {isLoading && (\n        <div className=\"placeholder\">\n          <SynapseSpinner size={30} />\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"FavoritesPage.js","names":[],"sources":["../../../src/components/favorites/FavoritesPage.tsx"],"sourcesContent":["import NoSearchResults from '@/assets/icons/NoSearchResults'\nimport { useGetFavorites } from '@/synapse-queries/user/useFavorites'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n  convertToEntityType,\n  entityTypeToFriendlyName,\n} from '@/utils/functions/EntityTypeUtils'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { InputAdornment, Stack, TextField } from '@mui/material'\nimport { EntityHeader } from '@sage-bionetworks/synapse-types'\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport { useEffect, useMemo, useState } from 'react'\nimport { EntityTypeIcon } from '../EntityIcon'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport ColumnHeader from '../TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport FavoriteButton from './FavoriteButton'\n\n// Local types used for client-side sorting\nexport type SortField = 'name' | 'type'\nexport type SortDirection = 'ASC' | 'DESC'\nexport type Sort = {\n  field: SortField\n  direction: SortDirection\n}\n\nconst columnHelper = createColumnHelper<EntityHeader>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'removeFavorite',\n    cell: ctx => <FavoriteButton entityId={ctx.row.original.id} />,\n    size: 60,\n    enableResizing: false,\n    meta: {\n      textAlign: 'center',\n    },\n  }),\n  columnHelper.accessor('name', {\n    cell: ctx => (\n      <a\n        rel=\"noopener noreferrer\"\n        href={`${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Synapse:${ctx.row.original.id}`}\n      >\n        {ctx.row.original.name}\n      </a>\n    ),\n    enableGlobalFilter: true,\n    header: props => <ColumnHeader {...props} title={'Name'} />,\n    size: 400,\n    enableColumnFilter: false,\n    sortingFn: 'alphanumeric',\n    enableSorting: true,\n  }),\n  columnHelper.accessor('type', {\n    cell: ctx => {\n      const entityType = convertToEntityType(ctx.row.original.type)\n      return (\n        <>\n          <EntityTypeIcon type={entityType} style={{ marginRight: '5px' }} />\n          {entityTypeToFriendlyName(entityType)}\n        </>\n      )\n    },\n    header: props => <ColumnHeader {...props} title={'Type'} />,\n    size: 160,\n    enableGlobalFilter: false,\n    sortingFn: 'alphanumeric',\n    filterFn: 'arrIncludes',\n    meta: {\n      enableMultipleSelect: true,\n      filterVariant: 'enumeration',\n      getDisplayText: value =>\n        entityTypeToFriendlyName(convertToEntityType(value)),\n    },\n    enableSorting: true,\n  }),\n]\n\nexport default function FavoritesPage() {\n  const { isAuthenticated } = useSynapseContext()\n  const [searchText, setSearchText] = useState<string>('')\n  const [error, setError] = useState<Error>()\n  const { data, isLoading, isError, error: newError } = useGetFavorites()\n\n  const favorites = useMemo(() => data ?? [], [data])\n\n  const favoritesTable = useReactTable<EntityHeader>({\n    data: favorites,\n    columns: columns,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    globalFilterFn: 'includesString',\n    state: {\n      globalFilter: searchText,\n    },\n    columnResizeMode: 'onChange',\n  })\n\n  useEffect(() => {\n    if (isError && newError) {\n      setError(newError)\n    }\n  }, [isError, newError])\n\n  useEffect(() => {\n    if (!isAuthenticated) {\n      setError(new Error('Please sign in to access your favorites.'))\n    } else {\n      setError(undefined)\n    }\n  }, [isAuthenticated])\n\n  if (error) {\n    return <ErrorBanner error={error} />\n  }\n\n  const hasFavoritesMatchingQuery = favoritesTable.getRowModel().rows.length > 0\n\n  return (\n    <div className=\"FavoritesPage\">\n      <TextField\n        type=\"search\"\n        placeholder=\"Favorite Name\"\n        value={searchText}\n        onChange={event => {\n          setSearchText(event.target.value)\n        }}\n        fullWidth\n        sx={{ mb: 4, maxWidth: '800px' }}\n        slotProps={{\n          input: {\n            startAdornment: (\n              <InputAdornment position=\"start\">\n                <IconSvg icon=\"search\" wrap={false} />\n              </InputAdornment>\n            ),\n          },\n        }}\n      />\n      <StyledTanStackTable table={favoritesTable} fullWidth={false} />\n      {!hasFavoritesMatchingQuery && !isLoading && (\n        <Stack\n          sx={{\n            my: 2,\n            gap: 1,\n            textAlign: 'center',\n          }}\n        >\n          <NoSearchResults height={'150px'} />\n          {data?.length == 0 ? (\n            <p>You currently have no favorites</p>\n          ) : (\n            <p>No matching favorites found</p>\n          )}\n        </Stack>\n      )}\n\n      {isLoading && (\n        <div className=\"placeholder\">\n          <SynapseSpinner size={30} />\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/file/upload/BasicFileHandleUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasicFileHandleUpload.js","names":[],"sources":["../../../../src/components/file/upload/BasicFileHandleUpload.tsx"],"sourcesContent":["import MultiFileUploadProgress from '@/components/file/upload/MultiFileUploadProgress'\nimport UploadFilePanel from '@/components/file/upload/UploadFilePanel'\nimport {\n  UploaderState,\n  useUploadFiles,\n} from '@/utils/hooks/useUploadFileEntity/useUploadFiles'\nimport { noop } from 'lodash-es'\nimport { ForwardedRef, forwardRef, useEffect, useImperativeHandle } from 'react'\n\nexport type BasicFileHandleUploadProps = {\n  /**\n   * Whether to allow uploading multiple files.\n   * Currently, only single file upload is supported by this UI component.\n   */\n  allowMultipleUpload: false\n  /**\n   * Whether to disable \"drag-and-drop to upload\" functionality.\n   * Currently, drag-and-drop cannot be enabled.\n   */\n  disableDragAndDrop: true\n  /** Callback that is invoked when the state of the uploader changes */\n  onStateChange?: (state: UploaderState) => void\n  /** Callback that is invoked when component is ready to upload */\n  onUploadReady?: () => void\n  /** Callback that is invoked when an individual upload is complete */\n  onFileUploadComplete?: (fileHandleIds: string) => void\n}\n\nexport type FileUploadHandle = {\n  /** Programmatically add files to the upload (e.g. on drag & drop) */\n  handleUploads: (fileList: ArrayLike<File>) => void\n}\n\n/**\n * BasicFileHandleUpload is a component that supports uploading a file to the default Synapse S3 bucket and creating a\n * file handle, which can only be accessed the system itself and the user uploading the file.\n */\nexport const BasicFileHandleUpload = forwardRef(function FileHandleUpload(\n  props: BasicFileHandleUploadProps,\n  ref: ForwardedRef<FileUploadHandle>,\n) {\n  const {\n    allowMultipleUpload,\n    onStateChange = noop,\n    onUploadReady = noop,\n    onFileUploadComplete = noop,\n  } = props\n\n  const { startUpload, state, uploadProgress } = useUploadFiles({\n    onUploadComplete: (_, fileHandleId) => {\n      onFileUploadComplete(fileHandleId)\n      return Promise.resolve()\n    },\n  })\n\n  useEffect(() => {\n    onStateChange(state)\n  }, [state, onStateChange])\n\n  useEffect(() => {\n    onUploadReady()\n  }, [onUploadReady])\n\n  function uploadFileList(fileList: ArrayLike<File>) {\n    const args = Array.from(fileList).map(file => {\n      return {\n        file,\n      }\n    })\n    startUpload(...args)\n  }\n\n  useImperativeHandle(ref, () => ({\n    handleUploads: uploadFileList,\n  }))\n\n  return (\n    <div>\n      <UploadFilePanel\n        onUploadFileList={uploadFileList}\n        allowMultipleFiles={allowMultipleUpload}\n        disableDragAndDrop={true}\n      />\n      <MultiFileUploadProgress\n        uploaderState={state}\n        uploadProgress={uploadProgress}\n      />\n    </div>\n  )\n})\n"],"mappings":";;;;;;;AAqCA,IAAa,IAAwB,EAAW,SAC9C,GACA,GACA;CACA,IAAM,EACJ,wBACA,mBAAgB,GAChB,mBAAgB,GAChB,0BAAuB,MACrB,GAEE,EAAE,gBAAa,UAAO,sBAAmB,EAAe,EAC5D,mBAAmB,GAAG,OACpB,EAAqB,EAAa,EAC3B,QAAQ,SAAS,GAE3B,CAAC;AAMF,CAJA,QAAgB;AACd,IAAc,EAAM;IACnB,CAAC,GAAO,EAAc,CAAC,EAE1B,QAAgB;AACd,KAAe;IACd,CAAC,EAAc,CAAC;CAEnB,SAAS,EAAe,GAA2B;AAMjD,IAAY,GALC,MAAM,KAAK,EAAS,CAAC,KAAI,OAC7B,EACL,SACD,EACD,CACkB;;AAOtB,QAJA,EAAoB,UAAY,EAC9B,eAAe,GAChB,EAAE,EAGD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,kBAAkB;EAClB,oBAAoB;EACpB,oBAAoB;EACpB,CAAA,EACF,kBAAC,GAAD;EACE,eAAe;EACC;EAChB,CAAA,CACE,EAAA,CAAA;EAER"}
+{"version":3,"file":"BasicFileHandleUpload.js","names":[],"sources":["../../../../src/components/file/upload/BasicFileHandleUpload.tsx"],"sourcesContent":["import MultiFileUploadProgress from '@/components/file/upload/MultiFileUploadProgress'\nimport UploadFilePanel from '@/components/file/upload/UploadFilePanel'\nimport {\n  UploaderState,\n  useUploadFiles,\n} from '@/utils/hooks/useUploadFileEntity/useUploadFiles'\nimport { noop } from 'lodash-es'\nimport { ForwardedRef, forwardRef, useEffect, useImperativeHandle } from 'react'\n\nexport type BasicFileHandleUploadProps = {\n  /**\n   * Whether to allow uploading multiple files.\n   * Currently, only single file upload is supported by this UI component.\n   */\n  allowMultipleUpload: false\n  /**\n   * Whether to disable \"drag-and-drop to upload\" functionality.\n   * Currently, drag-and-drop cannot be enabled.\n   */\n  disableDragAndDrop: true\n  /** Callback that is invoked when the state of the uploader changes */\n  onStateChange?: (state: UploaderState) => void\n  /** Callback that is invoked when component is ready to upload */\n  onUploadReady?: () => void\n  /** Callback that is invoked when an individual upload is complete */\n  onFileUploadComplete?: (fileHandleIds: string) => void\n}\n\nexport type FileUploadHandle = {\n  /** Programmatically add files to the upload (e.g. on drag & drop) */\n  handleUploads: (fileList: ArrayLike<File>) => void\n}\n\n/**\n * BasicFileHandleUpload is a component that supports uploading a file to the default Synapse S3 bucket and creating a\n * file handle, which can only be accessed the system itself and the user uploading the file.\n */\nexport const BasicFileHandleUpload = forwardRef(function FileHandleUpload(\n  props: BasicFileHandleUploadProps,\n  ref: ForwardedRef<FileUploadHandle>,\n) {\n  const {\n    allowMultipleUpload,\n    onStateChange = noop,\n    onUploadReady = noop,\n    onFileUploadComplete = noop,\n  } = props\n\n  const { startUpload, state, uploadProgress } = useUploadFiles({\n    onUploadComplete: (_, fileHandleId) => {\n      onFileUploadComplete(fileHandleId)\n      return Promise.resolve()\n    },\n  })\n\n  useEffect(() => {\n    onStateChange(state)\n  }, [state, onStateChange])\n\n  useEffect(() => {\n    onUploadReady()\n  }, [onUploadReady])\n\n  function uploadFileList(fileList: ArrayLike<File>) {\n    const args = Array.from(fileList).map(file => {\n      return {\n        file,\n      }\n    })\n    startUpload(...args)\n  }\n\n  useImperativeHandle(ref, () => ({\n    handleUploads: uploadFileList,\n  }))\n\n  return (\n    <div>\n      <UploadFilePanel\n        onUploadFileList={uploadFileList}\n        allowMultipleFiles={allowMultipleUpload}\n        disableDragAndDrop={true}\n      />\n      <MultiFileUploadProgress\n        uploaderState={state}\n        uploadProgress={uploadProgress}\n      />\n    </div>\n  )\n})\n"],"mappings":";;;;;;;AAqCA,IAAa,IAAwB,EAAW,SAC9C,GACA,GACA;CACA,IAAM,EACJ,wBACA,mBAAgB,GAChB,mBAAgB,GAChB,0BAAuB,MACrB,GAEE,EAAE,gBAAa,UAAO,sBAAmB,EAAe,EAC5D,mBAAmB,GAAG,OACpB,EAAqB,EAAa,EAC3B,QAAQ,SAAS,GAE3B,CAAC;AAMF,CAJA,QAAgB;AACd,IAAc,EAAM;IACnB,CAAC,GAAO,EAAc,CAAC,EAE1B,QAAgB;AACd,KAAe;IACd,CAAC,EAAc,CAAC;CAEnB,SAAS,EAAe,GAA2B;AAMjD,IAAY,GALC,MAAM,KAAK,EAAS,CAAC,KAAI,OAC7B,EACL,SACD,EAEY,CAAK;;AAOtB,QAJA,EAAoB,UAAY,EAC9B,eAAe,GAChB,EAAE,EAGD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,kBAAkB;EAClB,oBAAoB;EACpB,oBAAoB;EACpB,CAAA,EACF,kBAAC,GAAD;EACE,eAAe;EACC;EAChB,CAAA,CACE,EAAA,CAAA;EAER"}

package/dist/components/layout/SWCHeader.d.ts

@@ -0,0 +1,9 @@
+export type SWCHeaderProps = {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+};
+/**
+ * Header that uses CSS class names defined in SWC to match styling of SWC pages.
+ */
+export default function SWCHeader(props: SWCHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SWCHeader.d.ts.map

package/dist/components/layout/SWCHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SWCHeader.d.ts","sourceRoot":"","sources":["../../../src/components/layout/SWCHeader.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc,2CAQtD"}

package/dist/components/layout/SWCHeader.js

@@ -0,0 +1,19 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/layout/SWCHeader.tsx
+function n(n) {
+	let { title: r, description: i } = n;
+	return /* @__PURE__ */ t("div", {
+		className: "pageHeader",
+		children: [/* @__PURE__ */ e("h3", {
+			className: "pageHeaderTitle",
+			children: r
+		}), i && /* @__PURE__ */ e("div", {
+			className: "description",
+			children: i
+		})]
+	});
+}
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=SWCHeader.js.map

package/dist/components/layout/SWCHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SWCHeader.js","names":[],"sources":["../../../src/components/layout/SWCHeader.tsx"],"sourcesContent":["export type SWCHeaderProps = {\n  title: React.ReactNode\n  description?: React.ReactNode\n}\n\n/**\n * Header that uses CSS class names defined in SWC to match styling of SWC pages.\n */\nexport default function SWCHeader(props: SWCHeaderProps) {\n  const { title, description } = props\n  return (\n    <div className={'pageHeader'}>\n      <h3 className={'pageHeaderTitle'}>{title}</h3>\n      {description && <div className=\"description\">{description}</div>}\n    </div>\n  )\n}\n"],"mappings":";;AAQA,SAAwB,EAAU,GAAuB;CACvD,IAAM,EAAE,UAAO,mBAAgB;AAC/B,QACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,MAAD;GAAI,WAAW;aAAoB;GAAW,CAAA,EAC7C,KAAe,kBAAC,OAAD;GAAK,WAAU;aAAe;GAAkB,CAAA,CAC5D"}

package/dist/components/layout/SWCPageLayout.d.ts

@@ -0,0 +1,9 @@
+import { SWCHeaderProps } from './SWCHeader';
+/**
+ * Page layout that uses CSS class names defined in SWC to match styling of SWC pages. This should not be used outside of SWC.
+ */
+export default function SWCPageLayout(props: {
+    header: SWCHeaderProps;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SWCPageLayout.d.ts.map

package/dist/components/layout/SWCPageLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SWCPageLayout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/SWCPageLayout.tsx"],"names":[],"mappings":"AAAA,OAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEvD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE;IAC3C,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,2CASA"}

package/dist/components/layout/SWCPageLayout.js

@@ -0,0 +1,14 @@
+import e from "./SWCHeader.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/layout/SWCPageLayout.tsx
+function i(i) {
+	let { header: a, children: o } = i;
+	return /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n(e, { ...a }), /* @__PURE__ */ n("div", {
+		className: "pageLayout",
+		children: o
+	})] });
+}
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=SWCPageLayout.js.map

package/dist/components/layout/SWCPageLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SWCPageLayout.js","names":[],"sources":["../../../src/components/layout/SWCPageLayout.tsx"],"sourcesContent":["import SWCHeader, { SWCHeaderProps } from './SWCHeader'\n\n/**\n * Page layout that uses CSS class names defined in SWC to match styling of SWC pages. This should not be used outside of SWC.\n */\nexport default function SWCPageLayout(props: {\n  header: SWCHeaderProps\n  children: React.ReactNode\n}) {\n  const { header, children } = props\n\n  return (\n    <>\n      <SWCHeader {...header} />\n      <div className=\"pageLayout\">{children}</div>\n    </>\n  )\n}\n"],"mappings":";;;AAKA,SAAwB,EAAc,GAGnC;CACD,IAAM,EAAE,WAAQ,gBAAa;AAE7B,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAW,GAAI,GAAU,CAAA,EACzB,kBAAC,OAAD;EAAK,WAAU;EAAc;EAAe,CAAA,CAC3C,EAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ComplexMenu.js","names":[],"sources":["../../../src/components/menu/ComplexMenu.tsx"],"sourcesContent":["import { Box, Button, Typography, useMediaQuery, useTheme } from '@mui/material'\nimport { DropdownMenu, DropdownMenuProps } from './DropdownMenu'\nimport { IconSvgButton, IconSvgButtonProps } from '../IconSvgButton'\nimport IconSvg from '../IconSvg'\n\nexport type ComplexMenuProps = {\n  /*\n   * Configuration for IconButtons. Each entry corresponds to one button.\n   * See the IconButtonConfiguration type for more info.\n   */\n  iconButtons?: IconSvgButtonProps[]\n  /*\n   * Configuration for DropdownMenus. Each entry corresponds to one dropdown menu button, which\n   * itself can contain multiple groups of items.\n   * See the DropdownMenuProps type for more info.\n   */\n  dropdownMenus?: DropdownMenuProps[]\n}\n\n/**\n * The ComplexMenu component allows you to create a generic menu with\n * icon buttons and multiple dropdown menus that contain groups of items.\n */\nexport function ComplexMenu(props: ComplexMenuProps) {\n  const { iconButtons = [], dropdownMenus = [] } = props\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'))\n\n  return (\n    <Box\n      sx={theme => ({\n        display: 'flex',\n        alignItems: 'center',\n        gap: '10px',\n        [theme.breakpoints.down('sm')]: {\n          flexDirection: 'column',\n          paddingTop: '10px',\n        },\n      })}\n    >\n      {iconButtons.map(iconButton =>\n        isSmallScreen && iconButton.tooltipText ? (\n          <Box\n            sx={{\n              width: '100%',\n              textAlign: 'center',\n            }}\n          >\n            <Button\n              variant=\"text\"\n              startIcon={\n                <IconSvg\n                  key={iconButton.tooltipText}\n                  icon={iconButton.icon}\n                  wrap={false}\n                  fontSize={'inherit'}\n                />\n              }\n              onClick={iconButton.onClick}\n              sx={{\n                padding: '6px 12px',\n                minWidth: 'unset',\n              }}\n            >\n              <Typography variant=\"buttonLink\">\n                {iconButton.tooltipText}\n              </Typography>\n            </Button>\n          </Box>\n        ) : (\n          <IconSvgButton key={iconButton.tooltipText} {...iconButton} />\n        ),\n      )}\n      {dropdownMenus.map(\n        (menuProps, index) =>\n          menuProps.items &&\n          menuProps.items.length > 0 && (\n            <Box\n              sx={theme => ({\n                [theme.breakpoints.down('sm')]: {\n                  width: '100%',\n                  '.MuiButton-root': { width: '100%' },\n                },\n              })}\n            >\n              <DropdownMenu key={index} {...menuProps} />\n            </Box>\n          ),\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAuBA,SAAgB,EAAY,GAAyB;CACnD,IAAM,EAAE,iBAAc,EAAE,EAAE,mBAAgB,EAAE,KAAK,GAE3C,IAAgB,EADR,GAAU,CACkB,YAAY,KAAK,KAAK,CAAC;AAEjE,QACE,kBAAC,GAAD;EACE,KAAI,OAAU;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;IACJ,EAAM,YAAY,KAAK,KAAK,GAAG;IAC9B,eAAe;IACf,YAAY;IACb;GACF;YATH,CAWG,EAAY,KAAI,MACf,KAAiB,EAAW,cAC1B,kBAAC,GAAD;GACE,IAAI;IACF,OAAO;IACP,WAAW;IACZ;aAED,kBAAC,GAAD;IACE,SAAQ;IACR,WACE,kBAAC,GAAD;KAEE,MAAM,EAAW;KACjB,MAAM;KACN,UAAU;KACV,EAJK,EAAW,YAIhB;IAEJ,SAAS,EAAW;IACpB,IAAI;KACF,SAAS;KACT,UAAU;KACX;cAED,kBAAC,GAAD;KAAY,SAAQ;eACjB,EAAW;KACD,CAAA;IACN,CAAA;GACL,CAAA,GAEN,kBAAC,GAAD,EAA4C,GAAI,GAAc,EAA1C,EAAW,YAA+B,CAEjE,EACA,EAAc,KACZ,GAAW,MACV,EAAU,SACV,EAAU,MAAM,SAAS,KACvB,kBAAC,GAAD;GACE,KAAI,OAAU,GACX,EAAM,YAAY,KAAK,KAAK,GAAG;IAC9B,OAAO;IACP,mBAAmB,EAAE,OAAO,QAAQ;IACrC,EACF;aAED,kBAAC,GAAD,EAA0B,GAAI,GAAa,EAAxB,EAAwB;GACvC,CAAA,CAEX,CACG"}
+{"version":3,"file":"ComplexMenu.js","names":[],"sources":["../../../src/components/menu/ComplexMenu.tsx"],"sourcesContent":["import { Box, Button, Typography, useMediaQuery, useTheme } from '@mui/material'\nimport { DropdownMenu, DropdownMenuProps } from './DropdownMenu'\nimport { IconSvgButton, IconSvgButtonProps } from '../IconSvgButton'\nimport IconSvg from '../IconSvg'\n\nexport type ComplexMenuProps = {\n  /*\n   * Configuration for IconButtons. Each entry corresponds to one button.\n   * See the IconButtonConfiguration type for more info.\n   */\n  iconButtons?: IconSvgButtonProps[]\n  /*\n   * Configuration for DropdownMenus. Each entry corresponds to one dropdown menu button, which\n   * itself can contain multiple groups of items.\n   * See the DropdownMenuProps type for more info.\n   */\n  dropdownMenus?: DropdownMenuProps[]\n}\n\n/**\n * The ComplexMenu component allows you to create a generic menu with\n * icon buttons and multiple dropdown menus that contain groups of items.\n */\nexport function ComplexMenu(props: ComplexMenuProps) {\n  const { iconButtons = [], dropdownMenus = [] } = props\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'))\n\n  return (\n    <Box\n      sx={theme => ({\n        display: 'flex',\n        alignItems: 'center',\n        gap: '10px',\n        [theme.breakpoints.down('sm')]: {\n          flexDirection: 'column',\n          paddingTop: '10px',\n        },\n      })}\n    >\n      {iconButtons.map(iconButton =>\n        isSmallScreen && iconButton.tooltipText ? (\n          <Box\n            sx={{\n              width: '100%',\n              textAlign: 'center',\n            }}\n          >\n            <Button\n              variant=\"text\"\n              startIcon={\n                <IconSvg\n                  key={iconButton.tooltipText}\n                  icon={iconButton.icon}\n                  wrap={false}\n                  fontSize={'inherit'}\n                />\n              }\n              onClick={iconButton.onClick}\n              sx={{\n                padding: '6px 12px',\n                minWidth: 'unset',\n              }}\n            >\n              <Typography variant=\"buttonLink\">\n                {iconButton.tooltipText}\n              </Typography>\n            </Button>\n          </Box>\n        ) : (\n          <IconSvgButton key={iconButton.tooltipText} {...iconButton} />\n        ),\n      )}\n      {dropdownMenus.map(\n        (menuProps, index) =>\n          menuProps.items &&\n          menuProps.items.length > 0 && (\n            <Box\n              sx={theme => ({\n                [theme.breakpoints.down('sm')]: {\n                  width: '100%',\n                  '.MuiButton-root': { width: '100%' },\n                },\n              })}\n            >\n              <DropdownMenu key={index} {...menuProps} />\n            </Box>\n          ),\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAuBA,SAAgB,EAAY,GAAyB;CACnD,IAAM,EAAE,iBAAc,EAAE,EAAE,mBAAgB,EAAE,KAAK,GAE3C,IAAgB,EADR,GACsB,CAAM,YAAY,KAAK,KAAK,CAAC;AAEjE,QACE,kBAAC,GAAD;EACE,KAAI,OAAU;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;IACJ,EAAM,YAAY,KAAK,KAAK,GAAG;IAC9B,eAAe;IACf,YAAY;IACb;GACF;YATH,CAWG,EAAY,KAAI,MACf,KAAiB,EAAW,cAC1B,kBAAC,GAAD;GACE,IAAI;IACF,OAAO;IACP,WAAW;IACZ;aAED,kBAAC,GAAD;IACE,SAAQ;IACR,WACE,kBAAC,GAAD;KAEE,MAAM,EAAW;KACjB,MAAM;KACN,UAAU;KACV,EAJK,EAAW,YAIhB;IAEJ,SAAS,EAAW;IACpB,IAAI;KACF,SAAS;KACT,UAAU;KACX;cAED,kBAAC,GAAD;KAAY,SAAQ;eACjB,EAAW;KACD,CAAA;IACN,CAAA;GACL,CAAA,GAEN,kBAAC,GAAD,EAA4C,GAAI,GAAc,EAA1C,EAAW,YAA+B,CAEjE,EACA,EAAc,KACZ,GAAW,MACV,EAAU,SACV,EAAU,MAAM,SAAS,KACvB,kBAAC,GAAD;GACE,KAAI,OAAU,GACX,EAAM,YAAY,KAAK,KAAK,GAAG;IAC9B,OAAO;IACP,mBAAmB,EAAE,OAAO,QAAQ;IACrC,EACF;aAED,kBAAC,GAAD,EAA0B,GAAI,GAAa,EAAxB,EAAwB;GACvC,CAAA,CAEX,CACG"}

package/dist/components/row_renderers/utils/ChipContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipContainer.js","names":[],"sources":["../../../../src/components/row_renderers/utils/ChipContainer.tsx"],"sourcesContent":["import React from 'react'\ntype ChipContainerProps = {\n  chips: any[]\n}\n\nconst ChipContainer = ({ chips }: ChipContainerProps): React.ReactNode => {\n  const chipsFormatted = chips.map((el, index) => {\n    if (!el) {\n      return false\n    }\n    return <span key={index}> {el}</span>\n  })\n  return <>{chipsFormatted}</>\n}\nexport default ChipContainer\n"],"mappings":";;;AAKA,IAAM,KAAiB,EAAE,eAOhB,kBAAA,GAAA,EAAA,UANgB,EAAM,KAAK,GAAI,MAC/B,IAGE,kBAAC,QAAD,EAAA,UAAA,CAAkB,KAAE,EAAU,EAAA,EAAnB,EAAmB,GAF5B,GAGT,EAC0B,CAAA"}
+{"version":3,"file":"ChipContainer.js","names":[],"sources":["../../../../src/components/row_renderers/utils/ChipContainer.tsx"],"sourcesContent":["import React from 'react'\ntype ChipContainerProps = {\n  chips: any[]\n}\n\nconst ChipContainer = ({ chips }: ChipContainerProps): React.ReactNode => {\n  const chipsFormatted = chips.map((el, index) => {\n    if (!el) {\n      return false\n    }\n    return <span key={index}> {el}</span>\n  })\n  return <>{chipsFormatted}</>\n}\nexport default ChipContainer\n"],"mappings":";;;AAKA,IAAM,KAAiB,EAAE,eAOhB,kBAAA,GAAA,EAAA,UANgB,EAAM,KAAK,GAAI,MAC/B,IAGE,kBAAC,QAAD,EAAA,UAAA,CAAkB,KAAE,EAAU,EAAA,EAAnB,EAAmB,GAF5B,GAID,EAAkB,CAAA"}

package/dist/components/styled/StyledPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledPopover.js","names":[],"sources":["../../../src/components/styled/StyledPopover.tsx"],"sourcesContent":["import LightTooltip from '@/components/styled/LightTooltip'\nimport { spreadSx } from '@/theme/spreadSx'\nimport {\n  Box,\n  Button,\n  ButtonProps,\n  SxProps,\n  tooltipClasses,\n  TooltipProps,\n} from '@mui/material'\nimport { atom, useAtom } from 'jotai'\nimport { PropsWithChildren, ReactNode, useId } from 'react'\n\nexport type StyledPopoverProps = PropsWithChildren<{\n  popoverContent: React.ReactNode\n  sx?: TooltipProps['sx']\n  placement?: TooltipProps['placement']\n  showCloseButton?: boolean\n  actionButton?: {\n    content: ReactNode\n    color?: ButtonProps['color']\n    variant?: ButtonProps['variant']\n    onClick: () => void\n    closePopoverOnClick?: boolean\n  }\n  maxWidth?: string\n  minWidth?: string\n  containerSx?: SxProps\n}>\n\nconst buttonBoxSx: SxProps = {\n  mt: 2,\n  display: 'flex',\n  justifyContent: 'space-between',\n  flexDirection: 'row-reverse',\n  '> button': {\n    flexGrow: 1,\n    maxWidth: '45%',\n  },\n}\n\n// Register a global atom to track which popover is open, to ensure only one is shown at any given time\nconst openMarkdownPopoverAtom = atom<string | null>(null)\n\nexport function StyledPopover({\n  children,\n  popoverContent,\n  placement = 'bottom-start',\n  showCloseButton = true,\n  actionButton,\n  sx,\n  maxWidth = '500px',\n  minWidth = '300px',\n  containerSx,\n}: StyledPopoverProps) {\n  const id = useId()\n  const [openMarkdownPopoverId, setOpenMarkdownPopoverId] = useAtom(\n    openMarkdownPopoverAtom,\n  )\n\n  const show = openMarkdownPopoverId === id\n\n  const content = (\n    <Box sx={{ padding: '20px' }}>\n      {popoverContent}\n      <Box sx={buttonBoxSx}>\n        {actionButton && (\n          <Button\n            color={actionButton.color || 'primary'}\n            variant={actionButton.variant || 'contained'}\n            onClick={() => {\n              actionButton.onClick()\n              if (actionButton.closePopoverOnClick) {\n                setOpenMarkdownPopoverId(null)\n              }\n            }}\n          >\n            {actionButton.content}\n          </Button>\n        )}\n        {showCloseButton && (\n          <Button\n            variant=\"outlined\"\n            onClick={() => setOpenMarkdownPopoverId(null)}\n          >\n            Close\n          </Button>\n        )}\n      </Box>\n    </Box>\n  )\n\n  return (\n    <LightTooltip\n      title={content}\n      placement={placement}\n      open={show}\n      sx={spreadSx(sx, {\n        [`& .${tooltipClasses.tooltip}`]: {\n          maxWidth: { maxWidth },\n          minWidth: { minWidth },\n        },\n      })}\n    >\n      <Box\n        role=\"button\"\n        className={'PopoverContainer'}\n        onClick={e => {\n          // Prevent the default action of the click event -- for example, if this is in a `label` tag for a checkbox,\n          // prevent the click from toggling the checkbox value\n          e.preventDefault()\n          // Prevent the click from propagating to the parent container\n          e.stopPropagation()\n          setOpenMarkdownPopoverId(currentId => (currentId == id ? null : id))\n        }}\n        sx={{ display: 'inline-block', cursor: 'pointer', ...containerSx }}\n      >\n        {children}\n      </Box>\n    </LightTooltip>\n  )\n}\n"],"mappings":";;;;;;;AA8BA,IAAM,IAAuB;CAC3B,IAAI;CACJ,SAAS;CACT,gBAAgB;CAChB,eAAe;CACf,YAAY;EACV,UAAU;EACV,UAAU;EACX;CACF,EAGK,IAA0B,EAAoB,KAAK;AAEzD,SAAgB,EAAc,EAC5B,aACA,mBACA,eAAY,gBACZ,qBAAkB,IAClB,iBACA,OACA,cAAW,SACX,cAAW,SACX,kBACqB;CACrB,IAAM,IAAK,GAAO,EACZ,CAAC,GAAuB,KAA4B,EACxD,EACD,EAEK,IAAO,MAA0B;AAgCvC,QACE,kBAAC,GAAD;EACE,OA/BF,kBAAC,GAAD;GAAK,IAAI,EAAE,SAAS,QAAQ;aAA5B,CACG,GACD,kBAAC,GAAD;IAAK,IAAI;cAAT,CACG,KACC,kBAAC,GAAD;KACE,OAAO,EAAa,SAAS;KAC7B,SAAS,EAAa,WAAW;KACjC,eAAe;AAEb,MADA,EAAa,SAAS,EAClB,EAAa,uBACf,EAAyB,KAAK;;eAIjC,EAAa;KACP,CAAA,EAEV,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,eAAe,EAAyB,KAAK;eAC9C;KAEQ,CAAA,CAEP;MACF;;EAMO;EACX,MAAM;EACN,IAAI,EAAS,GAAI,GACd,MAAM,EAAe,YAAY;GAChC,UAAU,EAAE,aAAU;GACtB,UAAU,EAAE,aAAU;GACvB,EACF,CAAC;YAEF,kBAAC,GAAD;GACE,MAAK;GACL,WAAW;GACX,UAAS,MAAK;AAMZ,IAHA,EAAE,gBAAgB,EAElB,EAAE,iBAAiB,EACnB,GAAyB,MAAc,KAAa,IAAK,OAAO,EAAI;;GAEtE,IAAI;IAAE,SAAS;IAAgB,QAAQ;IAAW,GAAG;IAAa;GAEjE;GACG,CAAA;EACO,CAAA"}
+{"version":3,"file":"StyledPopover.js","names":[],"sources":["../../../src/components/styled/StyledPopover.tsx"],"sourcesContent":["import LightTooltip from '@/components/styled/LightTooltip'\nimport { spreadSx } from '@/theme/spreadSx'\nimport {\n  Box,\n  Button,\n  ButtonProps,\n  SxProps,\n  tooltipClasses,\n  TooltipProps,\n} from '@mui/material'\nimport { atom, useAtom } from 'jotai'\nimport { PropsWithChildren, ReactNode, useId } from 'react'\n\nexport type StyledPopoverProps = PropsWithChildren<{\n  popoverContent: React.ReactNode\n  sx?: TooltipProps['sx']\n  placement?: TooltipProps['placement']\n  showCloseButton?: boolean\n  actionButton?: {\n    content: ReactNode\n    color?: ButtonProps['color']\n    variant?: ButtonProps['variant']\n    onClick: () => void\n    closePopoverOnClick?: boolean\n  }\n  maxWidth?: string\n  minWidth?: string\n  containerSx?: SxProps\n}>\n\nconst buttonBoxSx: SxProps = {\n  mt: 2,\n  display: 'flex',\n  justifyContent: 'space-between',\n  flexDirection: 'row-reverse',\n  '> button': {\n    flexGrow: 1,\n    maxWidth: '45%',\n  },\n}\n\n// Register a global atom to track which popover is open, to ensure only one is shown at any given time\nconst openMarkdownPopoverAtom = atom<string | null>(null)\n\nexport function StyledPopover({\n  children,\n  popoverContent,\n  placement = 'bottom-start',\n  showCloseButton = true,\n  actionButton,\n  sx,\n  maxWidth = '500px',\n  minWidth = '300px',\n  containerSx,\n}: StyledPopoverProps) {\n  const id = useId()\n  const [openMarkdownPopoverId, setOpenMarkdownPopoverId] = useAtom(\n    openMarkdownPopoverAtom,\n  )\n\n  const show = openMarkdownPopoverId === id\n\n  const content = (\n    <Box sx={{ padding: '20px' }}>\n      {popoverContent}\n      <Box sx={buttonBoxSx}>\n        {actionButton && (\n          <Button\n            color={actionButton.color || 'primary'}\n            variant={actionButton.variant || 'contained'}\n            onClick={() => {\n              actionButton.onClick()\n              if (actionButton.closePopoverOnClick) {\n                setOpenMarkdownPopoverId(null)\n              }\n            }}\n          >\n            {actionButton.content}\n          </Button>\n        )}\n        {showCloseButton && (\n          <Button\n            variant=\"outlined\"\n            onClick={() => setOpenMarkdownPopoverId(null)}\n          >\n            Close\n          </Button>\n        )}\n      </Box>\n    </Box>\n  )\n\n  return (\n    <LightTooltip\n      title={content}\n      placement={placement}\n      open={show}\n      sx={spreadSx(sx, {\n        [`& .${tooltipClasses.tooltip}`]: {\n          maxWidth: { maxWidth },\n          minWidth: { minWidth },\n        },\n      })}\n    >\n      <Box\n        role=\"button\"\n        className={'PopoverContainer'}\n        onClick={e => {\n          // Prevent the default action of the click event -- for example, if this is in a `label` tag for a checkbox,\n          // prevent the click from toggling the checkbox value\n          e.preventDefault()\n          // Prevent the click from propagating to the parent container\n          e.stopPropagation()\n          setOpenMarkdownPopoverId(currentId => (currentId == id ? null : id))\n        }}\n        sx={{ display: 'inline-block', cursor: 'pointer', ...containerSx }}\n      >\n        {children}\n      </Box>\n    </LightTooltip>\n  )\n}\n"],"mappings":";;;;;;;AA8BA,IAAM,IAAuB;CAC3B,IAAI;CACJ,SAAS;CACT,gBAAgB;CAChB,eAAe;CACf,YAAY;EACV,UAAU;EACV,UAAU;EACX;CACF,EAGK,IAA0B,EAAoB,KAAK;AAEzD,SAAgB,EAAc,EAC5B,aACA,mBACA,eAAY,gBACZ,qBAAkB,IAClB,iBACA,OACA,cAAW,SACX,cAAW,SACX,kBACqB;CACrB,IAAM,IAAK,GAAO,EACZ,CAAC,GAAuB,KAA4B,EACxD,EACD,EAEK,IAAO,MAA0B;AAgCvC,QACE,kBAAC,GAAD;EACE,OA/BF,kBAAC,GAAD;GAAK,IAAI,EAAE,SAAS,QAAQ;aAA5B,CACG,GACD,kBAAC,GAAD;IAAK,IAAI;cAAT,CACG,KACC,kBAAC,GAAD;KACE,OAAO,EAAa,SAAS;KAC7B,SAAS,EAAa,WAAW;KACjC,eAAe;AAEb,MADA,EAAa,SAAS,EAClB,EAAa,uBACf,EAAyB,KAAK;;eAIjC,EAAa;KACP,CAAA,EAEV,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,eAAe,EAAyB,KAAK;eAC9C;KAEQ,CAAA,CAEP;MACF;IAKG;EACI;EACX,MAAM;EACN,IAAI,EAAS,GAAI,GACd,MAAM,EAAe,YAAY;GAChC,UAAU,EAAE,aAAU;GACtB,UAAU,EAAE,aAAU;GACvB,EACF,CAAC;YAEF,kBAAC,GAAD;GACE,MAAK;GACL,WAAW;GACX,UAAS,MAAK;AAMZ,IAHA,EAAE,gBAAgB,EAElB,EAAE,iBAAiB,EACnB,GAAyB,MAAc,KAAa,IAAK,OAAO,EAAI;;GAEtE,IAAI;IAAE,SAAS;IAAgB,QAAQ;IAAW,GAAG;IAAa;GAEjE;GACG,CAAA;EACO,CAAA"}

package/dist/components/table/CsvPreview/CsvPreview.js

@@ -40,7 +40,8 @@ function h(e) {
 		id: `column-${r}`,
 		header: (t) => /* @__PURE__ */ s(n, {
 			...t,
-			title: `${e.name} (${e.columnType})`
+			wrap: !0,
+			title: `${e.name}\n(${e.columnType})`
 		}),
 		enableColumnFilter: !1,
 		enableSorting: !1

package/dist/components/table/CsvPreview/CsvPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"CsvPreview.js","names":[],"sources":["../../../../src/components/table/CsvPreview/CsvPreview.tsx"],"sourcesContent":["import { ErrorBanner } from '@/components/index'\nimport ColumnHeader from '@/components/TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '@/components/TanStackTable/StyledTanStackTable'\nimport { useGetCsvPreview } from '@/synapse-queries/table/useGetCsvPreview'\nimport Typography from '@mui/material/Typography'\nimport {\n  ColumnModel,\n  CsvTableDescriptor,\n  TableRow,\n  UploadToTablePreviewResult,\n} from '@sage-bionetworks/synapse-client'\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport noop from 'lodash-es/noop'\nimport { useEffect, useMemo } from 'react'\n\nexport type CsvPreviewProps = {\n  fileHandleId: string\n  csvTableDescriptor: CsvTableDescriptor\n  onCsvPreviewDataChange?: (data: UploadToTablePreviewResult) => void\n  onIsLoadingChange?: (isLoading: boolean) => void\n}\n\n/**\n * Given a file handle ID and CSV Table Descriptor, fetches and displays a preview of the CSV file as it would be parsed into a table.\n */\nexport default function CsvPreview(props: CsvPreviewProps) {\n  const {\n    fileHandleId,\n    csvTableDescriptor,\n    onCsvPreviewDataChange = noop,\n    onIsLoadingChange = noop,\n  } = props\n\n  const {\n    data: csvPreviewData,\n    isLoading,\n    error,\n  } = useGetCsvPreview({\n    concreteType:\n      'org.sagebionetworks.repo.model.table.UploadToTablePreviewRequest',\n    uploadFileHandleId: fileHandleId,\n    csvTableDescriptor,\n  })\n\n  useEffect(() => {\n    if (csvPreviewData) {\n      onCsvPreviewDataChange(csvPreviewData)\n    }\n  }, [csvPreviewData, onCsvPreviewDataChange])\n\n  useEffect(() => {\n    onIsLoadingChange(isLoading)\n  }, [isLoading, onIsLoadingChange])\n\n  const tableData = useMemo(\n    () => csvPreviewData?.sampleRows ?? [],\n    [csvPreviewData?.sampleRows],\n  )\n\n  const columns = useMemo(\n    () => getPreviewColumns(csvPreviewData?.suggestedColumns ?? []),\n    [csvPreviewData?.suggestedColumns],\n  )\n\n  const table = useReactTable({\n    getCoreRowModel: getCoreRowModel(),\n    data: tableData,\n    columns: columns,\n  })\n\n  if (error) {\n    return <ErrorBanner error={error} />\n  }\n\n  return (\n    <>\n      {isLoading && <div>Loading preview...</div>}\n      {!isLoading && csvPreviewData && table && (\n        <>\n          <Typography variant={'body1'}>\n            Scanned {csvPreviewData?.rowsScanned?.toLocaleString()} rows to\n            generate preview:\n          </Typography>\n          <StyledTanStackTable table={table} />\n        </>\n      )}\n    </>\n  )\n}\n\nfunction getPreviewColumns(columnModels: ColumnModel[]) {\n  const columnHelper = createColumnHelper<TableRow>()\n  return columnModels.map((columnModel, index) => {\n    return columnHelper.accessor(tr => tr.values![index], {\n      id: `column-${index}`,\n      header: props => (\n        <ColumnHeader\n          {...props}\n          title={`${columnModel.name} (${columnModel.columnType})`}\n        />\n      ),\n      enableColumnFilter: false,\n      enableSorting: false,\n    })\n  })\n}\n"],"mappings":";;;;;;;;;;;AA6BA,SAAwB,EAAW,GAAwB;CACzD,IAAM,EACJ,iBACA,uBACA,4BAAyB,GACzB,uBAAoB,MAClB,GAEE,EACJ,MAAM,GACN,cACA,aACE,EAAiB;EACnB,cACE;EACF,oBAAoB;EACpB;EACD,CAAC;AAQF,CANA,QAAgB;AACd,EAAI,KACF,EAAuB,EAAe;IAEvC,CAAC,GAAgB,EAAuB,CAAC,EAE5C,QAAgB;AACd,IAAkB,EAAU;IAC3B,CAAC,GAAW,EAAkB,CAAC;CAElC,IAAM,IAAY,QACV,GAAgB,cAAc,EAAE,EACtC,CAAC,GAAgB,WAAW,CAC7B,EAEK,IAAU,QACR,EAAkB,GAAgB,oBAAoB,EAAE,CAAC,EAC/D,CAAC,GAAgB,iBAAiB,CACnC,EAEK,IAAQ,EAAc;EAC1B,iBAAiB,GAAiB;EAClC,MAAM;EACG;EACV,CAAC;AAMF,QAJI,IACK,kBAAC,GAAD,EAAoB,UAAS,CAAA,GAIpC,kBAAA,GAAA,EAAA,UAAA,CACG,KAAa,kBAAC,OAAD,EAAA,UAAK,sBAAwB,CAAA,EAC1C,CAAC,KAAa,KAAkB,KAC/B,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAY,SAAS;YAArB;GAA8B;GACnB,GAAgB,aAAa,gBAAgB;GAAC;GAE5C;KACb,kBAAC,GAAD,EAA4B,UAAS,CAAA,CACpC,EAAA,CAAA,CAEJ,EAAA,CAAA;;AAIP,SAAS,EAAkB,GAA6B;CACtD,IAAM,IAAe,GAA8B;AACnD,QAAO,EAAa,KAAK,GAAa,MAC7B,EAAa,UAAS,MAAM,EAAG,OAAQ,IAAQ;EACpD,IAAI,UAAU;EACd,SAAQ,MACN,kBAAC,GAAD;GACE,GAAI;GACJ,OAAO,GAAG,EAAY,KAAK,IAAI,EAAY,WAAW;GACtD,CAAA;EAEJ,oBAAoB;EACpB,eAAe;EAChB,CAAC,CACF"}
+{"version":3,"file":"CsvPreview.js","names":[],"sources":["../../../../src/components/table/CsvPreview/CsvPreview.tsx"],"sourcesContent":["import { ErrorBanner } from '@/components/index'\nimport ColumnHeader from '@/components/TanStackTable/ColumnHeader'\nimport StyledTanStackTable from '@/components/TanStackTable/StyledTanStackTable'\nimport { useGetCsvPreview } from '@/synapse-queries/table/useGetCsvPreview'\nimport Typography from '@mui/material/Typography'\nimport {\n  ColumnModel,\n  CsvTableDescriptor,\n  TableRow,\n  UploadToTablePreviewResult,\n} from '@sage-bionetworks/synapse-client'\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport noop from 'lodash-es/noop'\nimport { useEffect, useMemo } from 'react'\n\nexport type CsvPreviewProps = {\n  fileHandleId: string\n  csvTableDescriptor: CsvTableDescriptor\n  onCsvPreviewDataChange?: (data: UploadToTablePreviewResult) => void\n  onIsLoadingChange?: (isLoading: boolean) => void\n}\n\n/**\n * Given a file handle ID and CSV Table Descriptor, fetches and displays a preview of the CSV file as it would be parsed into a table.\n */\nexport default function CsvPreview(props: CsvPreviewProps) {\n  const {\n    fileHandleId,\n    csvTableDescriptor,\n    onCsvPreviewDataChange = noop,\n    onIsLoadingChange = noop,\n  } = props\n\n  const {\n    data: csvPreviewData,\n    isLoading,\n    error,\n  } = useGetCsvPreview({\n    concreteType:\n      'org.sagebionetworks.repo.model.table.UploadToTablePreviewRequest',\n    uploadFileHandleId: fileHandleId,\n    csvTableDescriptor,\n  })\n\n  useEffect(() => {\n    if (csvPreviewData) {\n      onCsvPreviewDataChange(csvPreviewData)\n    }\n  }, [csvPreviewData, onCsvPreviewDataChange])\n\n  useEffect(() => {\n    onIsLoadingChange(isLoading)\n  }, [isLoading, onIsLoadingChange])\n\n  const tableData = useMemo(\n    () => csvPreviewData?.sampleRows ?? [],\n    [csvPreviewData?.sampleRows],\n  )\n\n  const columns = useMemo(\n    () => getPreviewColumns(csvPreviewData?.suggestedColumns ?? []),\n    [csvPreviewData?.suggestedColumns],\n  )\n\n  const table = useReactTable({\n    getCoreRowModel: getCoreRowModel(),\n    data: tableData,\n    columns: columns,\n  })\n\n  if (error) {\n    return <ErrorBanner error={error} />\n  }\n\n  return (\n    <>\n      {isLoading && <div>Loading preview...</div>}\n      {!isLoading && csvPreviewData && table && (\n        <>\n          <Typography variant={'body1'}>\n            Scanned {csvPreviewData?.rowsScanned?.toLocaleString()} rows to\n            generate preview:\n          </Typography>\n          <StyledTanStackTable table={table} />\n        </>\n      )}\n    </>\n  )\n}\n\nfunction getPreviewColumns(columnModels: ColumnModel[]) {\n  const columnHelper = createColumnHelper<TableRow>()\n  return columnModels.map((columnModel, index) => {\n    return columnHelper.accessor(tr => tr.values![index], {\n      id: `column-${index}`,\n      header: props => (\n        <ColumnHeader\n          {...props}\n          wrap={true}\n          title={`${columnModel.name}\\n(${columnModel.columnType})`}\n        />\n      ),\n      enableColumnFilter: false,\n      enableSorting: false,\n    })\n  })\n}\n"],"mappings":";;;;;;;;;;;AA6BA,SAAwB,EAAW,GAAwB;CACzD,IAAM,EACJ,iBACA,uBACA,4BAAyB,GACzB,uBAAoB,MAClB,GAEE,EACJ,MAAM,GACN,cACA,aACE,EAAiB;EACnB,cACE;EACF,oBAAoB;EACpB;EACD,CAAC;AAQF,CANA,QAAgB;AACd,EAAI,KACF,EAAuB,EAAe;IAEvC,CAAC,GAAgB,EAAuB,CAAC,EAE5C,QAAgB;AACd,IAAkB,EAAU;IAC3B,CAAC,GAAW,EAAkB,CAAC;CAElC,IAAM,IAAY,QACV,GAAgB,cAAc,EAAE,EACtC,CAAC,GAAgB,WAAW,CAC7B,EAEK,IAAU,QACR,EAAkB,GAAgB,oBAAoB,EAAE,CAAC,EAC/D,CAAC,GAAgB,iBAAiB,CACnC,EAEK,IAAQ,EAAc;EAC1B,iBAAiB,GAAiB;EAClC,MAAM;EACG;EACV,CAAC;AAMF,QAJI,IACK,kBAAC,GAAD,EAAoB,UAAS,CAAA,GAIpC,kBAAA,GAAA,EAAA,UAAA,CACG,KAAa,kBAAC,OAAD,EAAA,UAAK,sBAAwB,CAAA,EAC1C,CAAC,KAAa,KAAkB,KAC/B,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAY,SAAS;YAArB;GAA8B;GACnB,GAAgB,aAAa,gBAAgB;GAAC;GAE5C;KACb,kBAAC,GAAD,EAA4B,UAAS,CAAA,CACpC,EAAA,CAAA,CAEJ,EAAA,CAAA;;AAIP,SAAS,EAAkB,GAA6B;CACtD,IAAM,IAAe,GAA8B;AACnD,QAAO,EAAa,KAAK,GAAa,MAC7B,EAAa,UAAS,MAAM,EAAG,OAAQ,IAAQ;EACpD,IAAI,UAAU;EACd,SAAQ,MACN,kBAAC,GAAD;GACE,GAAI;GACJ,MAAM;GACN,OAAO,GAAG,EAAY,KAAK,KAAK,EAAY,WAAW;GACvD,CAAA;EAEJ,oBAAoB;EACpB,eAAe;EAChB,CAAC,CACF"}

package/dist/components/table/CsvPreview/CsvPreviewDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"CsvPreviewDialog.js","names":[],"sources":["../../../../src/components/table/CsvPreview/CsvPreviewDialog.tsx"],"sourcesContent":["import { DialogBase } from '@/components/DialogBase'\nimport {\n  BasicFileHandleUpload,\n  FileUploadHandle,\n} from '@/components/file/upload/BasicFileHandleUpload'\nimport { ErrorBanner } from '@/components/index'\nimport CsvPreview from '@/components/table/CsvPreview/CsvPreview'\nimport CsvTableDescriptorForm, {\n  CsvTableDescriptorFormHandle,\n} from '@/components/table/CsvTableDescriptorForm/CsvTableDescriptorForm'\nimport { RefreshTwoTone } from '@mui/icons-material'\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore'\nimport Accordion from '@mui/material/Accordion'\nimport AccordionDetails from '@mui/material/AccordionDetails'\nimport AccordionSummary from '@mui/material/AccordionSummary'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport Typography from '@mui/material/Typography'\nimport {\n  ColumnModel,\n  CsvTableDescriptor,\n  UploadToTablePreviewResult,\n} from '@sage-bionetworks/synapse-client'\nimport { useCallback, useRef, useState } from 'react'\n\nenum CsvPreviewDialogStep {\n  UPLOAD_CSV = 0,\n  COLUMN_PREVIEW = 1,\n}\n\nexport type CsvPreviewDialogProps = {\n  /** Whether the dialog is open */\n  open: boolean\n  /** Callback when the dialog is closed */\n  onClose: () => void\n  /** Callback when the user confirms the column models\n   * @param dataFileHandleId - The file handle ID of the uploaded CSV\n   * @param columnModels - The confirmed column models\n   * */\n  onConfirm: (\n    dataFileHandleId: string,\n    columnModels: ColumnModel[],\n    csvTableDescriptor: CsvTableDescriptor,\n  ) => void\n  /** Whether the confirm action is pending */\n  confirmIsPending?: boolean\n  /** An optional error message to display */\n  errorMessage?: string\n}\n\nexport default function CsvPreviewDialog(props: CsvPreviewDialogProps) {\n  const { open, onClose, onConfirm, confirmIsPending, errorMessage } = props\n  const [step, setStep] = useState(CsvPreviewDialogStep.UPLOAD_CSV)\n  const [csvTableDescriptor, setCsvTableDescriptor] =\n    useState<CsvTableDescriptor>({\n      separator: ',',\n      quoteCharacter: '\"',\n      escapeCharacter: '\\\\',\n      lineEnd: '\\n',\n      isFirstLineHeader: true,\n    })\n  const [csvPreviewData, setCsvPreviewData] =\n    useState<UploadToTablePreviewResult | null>(null)\n  const [isLoadingPreview, setIsLoadingPreview] = useState(false)\n\n  const [uploadedFileHandleId, setUploadedFileHandleId] = useState<\n    string | null\n  >(null)\n\n  const onFileUploaded = useCallback((fileHandleId: string) => {\n    setUploadedFileHandleId(fileHandleId)\n    setStep(CsvPreviewDialogStep.COLUMN_PREVIEW)\n  }, [])\n\n  const uploadRef = useRef<FileUploadHandle | null>(null)\n  const csvDescriptorFormRef = useRef<CsvTableDescriptorFormHandle | null>(null)\n\n  const uploadStepContent = (\n    <BasicFileHandleUpload\n      ref={uploadRef}\n      allowMultipleUpload={false}\n      onFileUploadComplete={fileHandleId => {\n        onFileUploaded(fileHandleId)\n      }}\n      disableDragAndDrop={true}\n    />\n  )\n\n  const previewStepContent = (\n    <Stack spacing={2}>\n      {uploadedFileHandleId && (\n        <CsvPreview\n          fileHandleId={uploadedFileHandleId}\n          csvTableDescriptor={csvTableDescriptor}\n          onCsvPreviewDataChange={setCsvPreviewData}\n          onIsLoadingChange={setIsLoadingPreview}\n        />\n      )}\n      <Accordion>\n        <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography variant={'headline3'}>Show Options</Typography>\n        </AccordionSummary>\n        <AccordionDetails>\n          <CsvTableDescriptorForm\n            defaultValue={csvTableDescriptor}\n            ref={csvDescriptorFormRef}\n          />\n          <Button\n            variant={'outlined'}\n            startIcon={<RefreshTwoTone />}\n            sx={{ mt: 2 }}\n            onClick={() => {\n              // Get the state from the form and update local state, which will re-render the preview\n              if (csvDescriptorFormRef.current) {\n                setCsvTableDescriptor(\n                  csvDescriptorFormRef.current.getFormData(),\n                )\n              }\n            }}\n          >\n            Refresh Preview\n          </Button>\n        </AccordionDetails>\n      </Accordion>\n    </Stack>\n  )\n\n  return (\n    <DialogBase\n      maxWidth={'lg'}\n      title={'Upload CSV'}\n      onCancel={onClose}\n      open={open}\n      content={\n        <>\n          {step === CsvPreviewDialogStep.UPLOAD_CSV && uploadStepContent}\n          {step === CsvPreviewDialogStep.COLUMN_PREVIEW && previewStepContent}\n          {errorMessage && <ErrorBanner error={errorMessage} />}\n        </>\n      }\n      actions={\n        <>\n          <Button\n            variant={'outlined'}\n            disabled={isLoadingPreview}\n            onClick={() => {\n              onClose()\n            }}\n          >\n            Cancel\n          </Button>\n          {step === CsvPreviewDialogStep.COLUMN_PREVIEW && (\n            <Button\n              disabled={isLoadingPreview}\n              variant={'contained'}\n              onClick={() => {\n                onConfirm(\n                  uploadedFileHandleId!,\n                  csvPreviewData!.suggestedColumns!,\n                  csvTableDescriptor,\n                )\n              }}\n              loading={confirmIsPending}\n            >\n              Confirm\n            </Button>\n          )}\n        </>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,IAAK,IAAL,yBAAA,GAAA;QACE,EAAA,EAAA,aAAA,KAAA,cACA,EAAA,EAAA,iBAAA,KAAA;EAFG,KAAA,EAAA,CAGJ;AAsBD,SAAwB,EAAiB,GAA8B;CACrE,IAAM,EAAE,SAAM,YAAS,cAAW,qBAAkB,oBAAiB,GAC/D,CAAC,GAAM,KAAW,EAAS,EAAqB,WAAW,EAC3D,CAAC,GAAoB,KACzB,EAA6B;EAC3B,WAAW;EACX,gBAAgB;EAChB,iBAAiB;EACjB,SAAS;EACT,mBAAmB;EACpB,CAAC,EACE,CAAC,GAAgB,KACrB,EAA4C,KAAK,EAC7C,CAAC,GAAkB,KAAuB,EAAS,GAAM,EAEzD,CAAC,GAAsB,KAA2B,EAEtD,KAAK,EAED,IAAiB,GAAa,MAAyB;AAE3D,EADA,EAAwB,EAAa,EACrC,EAAQ,EAAqB,eAAe;IAC3C,EAAE,CAAC,EAEA,IAAY,EAAgC,KAAK,EACjD,IAAuB,EAA4C,KAAK,EAExE,IACJ,kBAAC,GAAD;EACE,KAAK;EACL,qBAAqB;EACrB,uBAAsB,MAAgB;AACpC,KAAe,EAAa;;EAE9B,oBAAoB;EACpB,CAAA,EAGE,IACJ,kBAAC,GAAD;EAAO,SAAS;YAAhB,CACG,KACC,kBAAC,GAAD;GACE,cAAc;GACM;GACpB,wBAAwB;GACxB,mBAAmB;GACnB,CAAA,EAEJ,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAkB,YAAY,kBAAC,GAAD,EAAkB,CAAA;aAC9C,kBAAC,GAAD;IAAY,SAAS;cAAa;IAAyB,CAAA;GAC1C,CAAA,EACnB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,cAAc;GACd,KAAK;GACL,CAAA,EACF,kBAAC,GAAD;GACE,SAAS;GACT,WAAW,kBAAC,GAAD,EAAkB,CAAA;GAC7B,IAAI,EAAE,IAAI,GAAG;GACb,eAAe;AAEb,IAAI,EAAqB,WACvB,EACE,EAAqB,QAAQ,aAAa,CAC3C;;aAGN;GAEQ,CAAA,CACQ,EAAA,CAAA,CACT,EAAA,CAAA,CACN;;AAGV,QACE,kBAAC,GAAD;EACE,UAAU;EACV,OAAO;EACP,UAAU;EACJ;EACN,SACE,kBAAA,GAAA,EAAA,UAAA;GACG,MAAS,EAAqB,cAAc;GAC5C,MAAS,EAAqB,kBAAkB;GAChD,KAAgB,kBAAC,GAAD,EAAa,OAAO,GAAgB,CAAA;GACpD,EAAA,CAAA;EAEL,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,SAAS;GACT,UAAU;GACV,eAAe;AACb,OAAS;;aAEZ;GAEQ,CAAA,EACR,MAAS,EAAqB,kBAC7B,kBAAC,GAAD;GACE,UAAU;GACV,SAAS;GACT,eAAe;AACb,MACE,GACA,EAAgB,kBAChB,EACD;;GAEH,SAAS;aACV;GAEQ,CAAA,CAEV,EAAA,CAAA;EAEL,CAAA"}
+{"version":3,"file":"CsvPreviewDialog.js","names":[],"sources":["../../../../src/components/table/CsvPreview/CsvPreviewDialog.tsx"],"sourcesContent":["import { DialogBase } from '@/components/DialogBase'\nimport {\n  BasicFileHandleUpload,\n  FileUploadHandle,\n} from '@/components/file/upload/BasicFileHandleUpload'\nimport { ErrorBanner } from '@/components/index'\nimport CsvPreview from '@/components/table/CsvPreview/CsvPreview'\nimport CsvTableDescriptorForm, {\n  CsvTableDescriptorFormHandle,\n} from '@/components/table/CsvTableDescriptorForm/CsvTableDescriptorForm'\nimport { RefreshTwoTone } from '@mui/icons-material'\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore'\nimport Accordion from '@mui/material/Accordion'\nimport AccordionDetails from '@mui/material/AccordionDetails'\nimport AccordionSummary from '@mui/material/AccordionSummary'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport Typography from '@mui/material/Typography'\nimport {\n  ColumnModel,\n  CsvTableDescriptor,\n  UploadToTablePreviewResult,\n} from '@sage-bionetworks/synapse-client'\nimport { useCallback, useRef, useState } from 'react'\n\nenum CsvPreviewDialogStep {\n  UPLOAD_CSV = 0,\n  COLUMN_PREVIEW = 1,\n}\n\nexport type CsvPreviewDialogProps = {\n  /** Whether the dialog is open */\n  open: boolean\n  /** Callback when the dialog is closed */\n  onClose: () => void\n  /** Callback when the user confirms the column models\n   * @param dataFileHandleId - The file handle ID of the uploaded CSV\n   * @param columnModels - The confirmed column models\n   * */\n  onConfirm: (\n    dataFileHandleId: string,\n    columnModels: ColumnModel[],\n    csvTableDescriptor: CsvTableDescriptor,\n  ) => void\n  /** Whether the confirm action is pending */\n  confirmIsPending?: boolean\n  /** An optional error message to display */\n  errorMessage?: string\n}\n\nexport default function CsvPreviewDialog(props: CsvPreviewDialogProps) {\n  const { open, onClose, onConfirm, confirmIsPending, errorMessage } = props\n  const [step, setStep] = useState(CsvPreviewDialogStep.UPLOAD_CSV)\n  const [csvTableDescriptor, setCsvTableDescriptor] =\n    useState<CsvTableDescriptor>({\n      separator: ',',\n      quoteCharacter: '\"',\n      escapeCharacter: '\\\\',\n      lineEnd: '\\n',\n      isFirstLineHeader: true,\n    })\n  const [csvPreviewData, setCsvPreviewData] =\n    useState<UploadToTablePreviewResult | null>(null)\n  const [isLoadingPreview, setIsLoadingPreview] = useState(false)\n\n  const [uploadedFileHandleId, setUploadedFileHandleId] = useState<\n    string | null\n  >(null)\n\n  const onFileUploaded = useCallback((fileHandleId: string) => {\n    setUploadedFileHandleId(fileHandleId)\n    setStep(CsvPreviewDialogStep.COLUMN_PREVIEW)\n  }, [])\n\n  const uploadRef = useRef<FileUploadHandle | null>(null)\n  const csvDescriptorFormRef = useRef<CsvTableDescriptorFormHandle | null>(null)\n\n  const uploadStepContent = (\n    <BasicFileHandleUpload\n      ref={uploadRef}\n      allowMultipleUpload={false}\n      onFileUploadComplete={fileHandleId => {\n        onFileUploaded(fileHandleId)\n      }}\n      disableDragAndDrop={true}\n    />\n  )\n\n  const previewStepContent = (\n    <Stack spacing={2}>\n      {uploadedFileHandleId && (\n        <CsvPreview\n          fileHandleId={uploadedFileHandleId}\n          csvTableDescriptor={csvTableDescriptor}\n          onCsvPreviewDataChange={setCsvPreviewData}\n          onIsLoadingChange={setIsLoadingPreview}\n        />\n      )}\n      <Accordion>\n        <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography variant={'headline3'}>Show Options</Typography>\n        </AccordionSummary>\n        <AccordionDetails>\n          <CsvTableDescriptorForm\n            defaultValue={csvTableDescriptor}\n            ref={csvDescriptorFormRef}\n          />\n          <Button\n            variant={'outlined'}\n            startIcon={<RefreshTwoTone />}\n            sx={{ mt: 2 }}\n            onClick={() => {\n              // Get the state from the form and update local state, which will re-render the preview\n              if (csvDescriptorFormRef.current) {\n                setCsvTableDescriptor(\n                  csvDescriptorFormRef.current.getFormData(),\n                )\n              }\n            }}\n          >\n            Refresh Preview\n          </Button>\n        </AccordionDetails>\n      </Accordion>\n    </Stack>\n  )\n\n  return (\n    <DialogBase\n      maxWidth={'lg'}\n      title={'Upload CSV'}\n      onCancel={onClose}\n      open={open}\n      content={\n        <>\n          {step === CsvPreviewDialogStep.UPLOAD_CSV && uploadStepContent}\n          {step === CsvPreviewDialogStep.COLUMN_PREVIEW && previewStepContent}\n          {errorMessage && <ErrorBanner error={errorMessage} />}\n        </>\n      }\n      actions={\n        <>\n          <Button\n            variant={'outlined'}\n            disabled={isLoadingPreview}\n            onClick={() => {\n              onClose()\n            }}\n          >\n            Cancel\n          </Button>\n          {step === CsvPreviewDialogStep.COLUMN_PREVIEW && (\n            <Button\n              disabled={isLoadingPreview}\n              variant={'contained'}\n              onClick={() => {\n                onConfirm(\n                  uploadedFileHandleId!,\n                  csvPreviewData!.suggestedColumns!,\n                  csvTableDescriptor,\n                )\n              }}\n              loading={confirmIsPending}\n            >\n              Confirm\n            </Button>\n          )}\n        </>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,IAAK,IAAL,yBAAA,GAAA;QACE,EAAA,EAAA,aAAa,KAAA,cACb,EAAA,EAAA,iBAAiB,KAAA;EAFd,KAAA,EAAA,CAGJ;AAsBD,SAAwB,EAAiB,GAA8B;CACrE,IAAM,EAAE,SAAM,YAAS,cAAW,qBAAkB,oBAAiB,GAC/D,CAAC,GAAM,KAAW,EAAS,EAAqB,WAAW,EAC3D,CAAC,GAAoB,KACzB,EAA6B;EAC3B,WAAW;EACX,gBAAgB;EAChB,iBAAiB;EACjB,SAAS;EACT,mBAAmB;EACpB,CAAC,EACE,CAAC,GAAgB,KACrB,EAA4C,KAAK,EAC7C,CAAC,GAAkB,KAAuB,EAAS,GAAM,EAEzD,CAAC,GAAsB,KAA2B,EAEtD,KAAK,EAED,IAAiB,GAAa,MAAyB;AAE3D,EADA,EAAwB,EAAa,EACrC,EAAQ,EAAqB,eAAe;IAC3C,EAAE,CAAC,EAEA,IAAY,EAAgC,KAAK,EACjD,IAAuB,EAA4C,KAAK,EAExE,IACJ,kBAAC,GAAD;EACE,KAAK;EACL,qBAAqB;EACrB,uBAAsB,MAAgB;AACpC,KAAe,EAAa;;EAE9B,oBAAoB;EACpB,CAAA,EAGE,IACJ,kBAAC,GAAD;EAAO,SAAS;YAAhB,CACG,KACC,kBAAC,GAAD;GACE,cAAc;GACM;GACpB,wBAAwB;GACxB,mBAAmB;GACnB,CAAA,EAEJ,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAkB,YAAY,kBAAC,GAAD,EAAkB,CAAA;aAC9C,kBAAC,GAAD;IAAY,SAAS;cAAa;IAAyB,CAAA;GAC1C,CAAA,EACnB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,cAAc;GACd,KAAK;GACL,CAAA,EACF,kBAAC,GAAD;GACE,SAAS;GACT,WAAW,kBAAC,GAAD,EAAkB,CAAA;GAC7B,IAAI,EAAE,IAAI,GAAG;GACb,eAAe;AAEb,IAAI,EAAqB,WACvB,EACE,EAAqB,QAAQ,aAAa,CAC3C;;aAGN;GAEQ,CAAA,CACQ,EAAA,CAAA,CACT,EAAA,CAAA,CACN;;AAGV,QACE,kBAAC,GAAD;EACE,UAAU;EACV,OAAO;EACP,UAAU;EACJ;EACN,SACE,kBAAA,GAAA,EAAA,UAAA;GACG,MAAS,EAAqB,cAAc;GAC5C,MAAS,EAAqB,kBAAkB;GAChD,KAAgB,kBAAC,GAAD,EAAa,OAAO,GAAgB,CAAA;GACpD,EAAA,CAAA;EAEL,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,SAAS;GACT,UAAU;GACV,eAAe;AACb,OAAS;;aAEZ;GAEQ,CAAA,EACR,MAAS,EAAqB,kBAC7B,kBAAC,GAAD;GACE,UAAU;GACV,SAAS;GACT,eAAe;AACb,MACE,GACA,EAAgB,kBAChB,EACD;;GAEH,SAAS;aACV;GAEQ,CAAA,CAEV,EAAA,CAAA;EAEL,CAAA"}

package/dist/components/trash/TrashCanList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrashCanList.js","names":[],"sources":["../../../src/components/trash/TrashCanList.tsx"],"sourcesContent":["import {\n  useGetItemsInTrashCanInfinite,\n  usePurgeEntities,\n  useRestoreEntities,\n} from '@/synapse-queries/trash/useTrashCan'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport { entityTypeToFriendlyName } from '@/utils/functions/EntityTypeUtils'\nimport { Alert, Box, Button, Typography } from '@mui/material'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport { TrashedEntity } from '@sage-bionetworks/synapse-types'\nimport {\n  ColumnDef,\n  createColumnHelper,\n  getCoreRowModel,\n  RowSelectionState,\n  Table,\n  useReactTable,\n} from '@tanstack/react-table'\nimport dayjs from 'dayjs'\nimport { useMemo, useState } from 'react'\nimport {\n  CheckBoxCell,\n  CheckBoxHeader,\n} from '../EntityHeaderTable/EntityHeaderTableCellRenderers'\nimport { EntityLink } from '../EntityLink'\nimport { BlockingLoader, SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport WarningDialog from '../SynapseForm/WarningDialog'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\n\n/**\n * Convert an array of Promise results to an array of errors\n */\nfunction toSynapseClientErrorList(\n  results: PromiseSettledResult<void>[],\n): SynapseClientError[] {\n  return results\n    .filter(\n      (result): result is PromiseRejectedResult => result.status === 'rejected',\n    )\n    .map(result => result.reason as SynapseClientError)\n}\n\nconst columnHelper = createColumnHelper<TrashedEntity>()\n\nfunction getTrashCanColumns(\n  onRestore: (entityId: string) => void,\n): ColumnDef<TrashedEntity, any>[] {\n  return [\n    {\n      id: 'select',\n      header: CheckBoxHeader,\n      cell: CheckBoxCell,\n      maxSize: 50,\n    },\n    columnHelper.accessor('entityId', {\n      header: 'ID',\n    }),\n    columnHelper.accessor('entityName', {\n      header: 'Name',\n    }),\n    columnHelper.accessor('entityType', {\n      header: 'Entity Type',\n      cell: info => entityTypeToFriendlyName(info.getValue()),\n    }),\n    columnHelper.accessor('originalParentId', {\n      header: 'Location',\n      cell: info => (\n        <>\n          {info.getValue() && <EntityLink entity={info.getValue()} />} (\n          {info.getValue()})\n        </>\n      ),\n      size: 200,\n    }),\n    columnHelper.accessor('deletedOn', {\n      header: 'Deleted On',\n      cell: info => formatDate(dayjs(info.getValue())),\n    }),\n    {\n      id: 'restoreButton',\n      header: '',\n      cell: ({ row }) => (\n        <Button\n          size=\"small\"\n          variant=\"outlined\"\n          onClick={() => {\n            onRestore(row.original.entityId)\n            row.toggleSelected(false)\n          }}\n        >\n          Restore\n        </Button>\n      ),\n      maxSize: 100,\n    },\n  ]\n}\n\nexport function TrashCanList() {\n  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false)\n  const [errors, setErrors] = useState<SynapseClientError[]>([])\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n\n  /**\n   * When a mutation operation settles, update the list of errors and clear the selected set\n   */\n  function onMutateSettled(\n    results?: PromiseSettledResult<void>[],\n    error?: SynapseClientError | null,\n  ) {\n    if (results) {\n      setErrors(toSynapseClientErrorList(results))\n    } else if (error) {\n      setErrors([error])\n    }\n    setRowSelection({})\n  }\n\n  const { mutate: restore, isPending: isPendingRestore } = useRestoreEntities({\n    onSettled: onMutateSettled,\n  })\n  const { mutate: purge, isPending: isPendingPurge } = usePurgeEntities({\n    onSettled: onMutateSettled,\n  })\n\n  const isMutating = isPendingRestore || isPendingPurge\n\n  const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } =\n    useGetItemsInTrashCanInfinite({\n      throwOnError: true,\n    })\n  const items = useMemo(\n    () => data?.pages.flatMap(page => page.results) ?? [],\n    [data],\n  )\n\n  const columns = useMemo<ColumnDef<TrashedEntity, any>[]>(\n    () =>\n      getTrashCanColumns(entityId => {\n        restore(entityId)\n      }),\n    [restore],\n  )\n\n  const table: Table<TrashedEntity> = useReactTable<TrashedEntity>({\n    data: items,\n    columns,\n    state: {\n      rowSelection: rowSelection,\n    },\n    getRowId: row => row.entityId,\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    columnResizeMode: 'onChange',\n  })\n\n  const selectedEntityIds = table\n    .getSelectedRowModel()\n    .rows.map(row => row.original.entityId)\n\n  return (\n    <div>\n      <BlockingLoader\n        show={isMutating}\n        headlineText={isPendingPurge ? 'Deleting...' : 'Restoring...'}\n      />\n      <Typography variant=\"body1\">\n        The trash can contains items that were recently deleted. You can recover\n        deleted items in the trash can by clicking &quot;Restore&quot;. Items\n        will remain in the trash can for 30 days before being automatically\n        purged.\n      </Typography>\n      <WarningDialog\n        title=\"Delete selected items from your Trash?\"\n        content={\n          <Typography variant=\"body1\">\n            You can&apos;t undo this action.\n          </Typography>\n        }\n        confirmButtonText=\"Delete\"\n        confirmButtonColor=\"error\"\n        onConfirm={() => {\n          purge(selectedEntityIds)\n          setShowDeleteConfirmation(false)\n        }}\n        onCancel={() => {\n          setShowDeleteConfirmation(false)\n        }}\n        open={showDeleteConfirmation}\n      />\n      {isLoading && <SynapseSpinner />}\n      {!isLoading && items.length === 0 && (\n        <Alert severity={'info'} sx={{ my: 2 }}>\n          <Typography variant=\"body1\">\n            Your trash can is currently empty.\n          </Typography>\n        </Alert>\n      )}\n      {!isLoading && items.length > 0 && (\n        <>\n          <StyledTanStackTable\n            table={table}\n            styledTableContainerProps={{ sx: { my: 4 } }}\n          />\n          {errors.length > 0 && (\n            <Alert severity={'error'} sx={{ mb: 1 }}>\n              The following errors were encountered:\n              <ul style={{ marginBottom: 0 }}>\n                {errors.map(error => (\n                  <li key={error.message}>{error.message}</li>\n                ))}\n              </ul>\n            </Alert>\n          )}\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: 'flex-end',\n              gap: 2,\n            }}\n          >\n            {hasNextPage && (\n              <Button\n                variant=\"contained\"\n                disabled={isFetchingNextPage}\n                onClick={() => {\n                  fetchNextPage()\n                }}\n              >\n                Load More\n              </Button>\n            )}\n            <div style={{ margin: 'auto' }} />\n            <Button\n              variant=\"contained\"\n              color=\"error\"\n              disabled={selectedEntityIds.length === 0}\n              onClick={() => {\n                setShowDeleteConfirmation(true)\n              }}\n            >\n              Delete Selected\n            </Button>\n            <Button\n              variant=\"outlined\"\n              disabled={selectedEntityIds.length === 0}\n              onClick={() => {\n                restore(selectedEntityIds)\n              }}\n            >\n              Restore Selected\n            </Button>\n          </Box>\n        </>\n      )}\n    </div>\n  )\n}\n\nexport default TrashCanList\n"],"mappings":"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"}
+{"version":3,"file":"TrashCanList.js","names":[],"sources":["../../../src/components/trash/TrashCanList.tsx"],"sourcesContent":["import {\n  useGetItemsInTrashCanInfinite,\n  usePurgeEntities,\n  useRestoreEntities,\n} from '@/synapse-queries/trash/useTrashCan'\nimport { formatDate } from '@/utils/functions/DateFormatter'\nimport { entityTypeToFriendlyName } from '@/utils/functions/EntityTypeUtils'\nimport { Alert, Box, Button, Typography } from '@mui/material'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport { TrashedEntity } from '@sage-bionetworks/synapse-types'\nimport {\n  ColumnDef,\n  createColumnHelper,\n  getCoreRowModel,\n  RowSelectionState,\n  Table,\n  useReactTable,\n} from '@tanstack/react-table'\nimport dayjs from 'dayjs'\nimport { useMemo, useState } from 'react'\nimport {\n  CheckBoxCell,\n  CheckBoxHeader,\n} from '../EntityHeaderTable/EntityHeaderTableCellRenderers'\nimport { EntityLink } from '../EntityLink'\nimport { BlockingLoader, SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport WarningDialog from '../SynapseForm/WarningDialog'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\n\n/**\n * Convert an array of Promise results to an array of errors\n */\nfunction toSynapseClientErrorList(\n  results: PromiseSettledResult<void>[],\n): SynapseClientError[] {\n  return results\n    .filter(\n      (result): result is PromiseRejectedResult => result.status === 'rejected',\n    )\n    .map(result => result.reason as SynapseClientError)\n}\n\nconst columnHelper = createColumnHelper<TrashedEntity>()\n\nfunction getTrashCanColumns(\n  onRestore: (entityId: string) => void,\n): ColumnDef<TrashedEntity, any>[] {\n  return [\n    {\n      id: 'select',\n      header: CheckBoxHeader,\n      cell: CheckBoxCell,\n      maxSize: 50,\n    },\n    columnHelper.accessor('entityId', {\n      header: 'ID',\n    }),\n    columnHelper.accessor('entityName', {\n      header: 'Name',\n    }),\n    columnHelper.accessor('entityType', {\n      header: 'Entity Type',\n      cell: info => entityTypeToFriendlyName(info.getValue()),\n    }),\n    columnHelper.accessor('originalParentId', {\n      header: 'Location',\n      cell: info => (\n        <>\n          {info.getValue() && <EntityLink entity={info.getValue()} />} (\n          {info.getValue()})\n        </>\n      ),\n      size: 200,\n    }),\n    columnHelper.accessor('deletedOn', {\n      header: 'Deleted On',\n      cell: info => formatDate(dayjs(info.getValue())),\n    }),\n    {\n      id: 'restoreButton',\n      header: '',\n      cell: ({ row }) => (\n        <Button\n          size=\"small\"\n          variant=\"outlined\"\n          onClick={() => {\n            onRestore(row.original.entityId)\n            row.toggleSelected(false)\n          }}\n        >\n          Restore\n        </Button>\n      ),\n      maxSize: 100,\n    },\n  ]\n}\n\nexport function TrashCanList() {\n  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false)\n  const [errors, setErrors] = useState<SynapseClientError[]>([])\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n\n  /**\n   * When a mutation operation settles, update the list of errors and clear the selected set\n   */\n  function onMutateSettled(\n    results?: PromiseSettledResult<void>[],\n    error?: SynapseClientError | null,\n  ) {\n    if (results) {\n      setErrors(toSynapseClientErrorList(results))\n    } else if (error) {\n      setErrors([error])\n    }\n    setRowSelection({})\n  }\n\n  const { mutate: restore, isPending: isPendingRestore } = useRestoreEntities({\n    onSettled: onMutateSettled,\n  })\n  const { mutate: purge, isPending: isPendingPurge } = usePurgeEntities({\n    onSettled: onMutateSettled,\n  })\n\n  const isMutating = isPendingRestore || isPendingPurge\n\n  const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } =\n    useGetItemsInTrashCanInfinite({\n      throwOnError: true,\n    })\n  const items = useMemo(\n    () => data?.pages.flatMap(page => page.results) ?? [],\n    [data],\n  )\n\n  const columns = useMemo<ColumnDef<TrashedEntity, any>[]>(\n    () =>\n      getTrashCanColumns(entityId => {\n        restore(entityId)\n      }),\n    [restore],\n  )\n\n  const table: Table<TrashedEntity> = useReactTable<TrashedEntity>({\n    data: items,\n    columns,\n    state: {\n      rowSelection: rowSelection,\n    },\n    getRowId: row => row.entityId,\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    columnResizeMode: 'onChange',\n  })\n\n  const selectedEntityIds = table\n    .getSelectedRowModel()\n    .rows.map(row => row.original.entityId)\n\n  return (\n    <div>\n      <BlockingLoader\n        show={isMutating}\n        headlineText={isPendingPurge ? 'Deleting...' : 'Restoring...'}\n      />\n      <Typography variant=\"body1\">\n        The trash can contains items that were recently deleted. You can recover\n        deleted items in the trash can by clicking &quot;Restore&quot;. Items\n        will remain in the trash can for 30 days before being automatically\n        purged.\n      </Typography>\n      <WarningDialog\n        title=\"Delete selected items from your Trash?\"\n        content={\n          <Typography variant=\"body1\">\n            You can&apos;t undo this action.\n          </Typography>\n        }\n        confirmButtonText=\"Delete\"\n        confirmButtonColor=\"error\"\n        onConfirm={() => {\n          purge(selectedEntityIds)\n          setShowDeleteConfirmation(false)\n        }}\n        onCancel={() => {\n          setShowDeleteConfirmation(false)\n        }}\n        open={showDeleteConfirmation}\n      />\n      {isLoading && <SynapseSpinner />}\n      {!isLoading && items.length === 0 && (\n        <Alert severity={'info'} sx={{ my: 2 }}>\n          <Typography variant=\"body1\">\n            Your trash can is currently empty.\n          </Typography>\n        </Alert>\n      )}\n      {!isLoading && items.length > 0 && (\n        <>\n          <StyledTanStackTable\n            table={table}\n            styledTableContainerProps={{ sx: { my: 4 } }}\n          />\n          {errors.length > 0 && (\n            <Alert severity={'error'} sx={{ mb: 1 }}>\n              The following errors were encountered:\n              <ul style={{ marginBottom: 0 }}>\n                {errors.map(error => (\n                  <li key={error.message}>{error.message}</li>\n                ))}\n              </ul>\n            </Alert>\n          )}\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: 'flex-end',\n              gap: 2,\n            }}\n          >\n            {hasNextPage && (\n              <Button\n                variant=\"contained\"\n                disabled={isFetchingNextPage}\n                onClick={() => {\n                  fetchNextPage()\n                }}\n              >\n                Load More\n              </Button>\n            )}\n            <div style={{ margin: 'auto' }} />\n            <Button\n              variant=\"contained\"\n              color=\"error\"\n              disabled={selectedEntityIds.length === 0}\n              onClick={() => {\n                setShowDeleteConfirmation(true)\n              }}\n            >\n              Delete Selected\n            </Button>\n            <Button\n              variant=\"outlined\"\n              disabled={selectedEntityIds.length === 0}\n              onClick={() => {\n                restore(selectedEntityIds)\n              }}\n            >\n              Restore Selected\n            </Button>\n          </Box>\n        </>\n      )}\n    </div>\n  )\n}\n\nexport default TrashCanList\n"],"mappings":"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"}

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,MACF,YAAY;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,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"}

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,QAJe,CACb,EAAc,MAAM,OAAO,EAAc,IAAI,GAAG,OAAO,EAAO,GAAG,EACjE,EAAc,MAAM,OAAO,EAAc,IAAI,GAAG,OAAO,EAAO,GAAG,CAClE;;AAIH,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;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"}

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,KAPkC;IAChC,oBAAoB;IACpB,sBAAsB;IACtB,6BAA6B;IAC7B,gBAAgB;IACjB,EAEiB,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,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"}