synapse-react-client 4.0.9 → 4.0.10

package/dist/components/GoalsV3/GoalsV3.js.map

@@ -1 +1 @@
-{"version":3,"file":"GoalsV3.js","names":[],"sources":["../../../src/components/GoalsV3/GoalsV3.tsx"],"sourcesContent":["import React from 'react'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { SynapseConstants } from '@/utils'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport useGetGoalData from '@/utils/hooks/useGetGoalData'\nimport useShowDesktop from '@/utils/hooks/useShowDesktop'\nimport { Box } from '@mui/material'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport { ErrorBanner } from '../error'\nimport GoalsV3Desktop from './GoalsV3.Desktop'\nimport GoalsV3Mobile from './GoalsV3.Mobile'\n\nexport type GoalsV3Props = {\n  entityId: string\n  svgComponentMap: Record<string, React.FC<React.SVGProps<SVGSVGElement>>>\n}\n\nexport type GoalsV3CardProps = {\n  countSql?: string\n  title: string\n  summary: string\n  link: string\n  svgIconComponent?: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nenum ExpectedColumns {\n  TABLEID = 'TableId',\n  COUNT_SQL = 'CountSql',\n  TITLE = 'Title',\n  SUMMARY = 'Summary',\n  LINK = 'Link',\n  ICON_KEY = 'iconKey',\n}\n\n// PORTALS-2367\nconst GOALSV2_DESKTOP_MIN_BREAKPOINT = 1200\n\nconst GoalsV3 = ({\n  entityId,\n  svgComponentMap,\n}: GoalsV3Props): React.ReactNode => {\n  const showDesktop = useShowDesktop(GOALSV2_DESKTOP_MIN_BREAKPOINT)\n  const queryBundleRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    entityId,\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    query: {\n      sql: `select *\n                from ${entityId}\n                order by ItemOrder`,\n    },\n  }\n  const { data: queryResultBundle } =\n    useGetQueryResultBundle(queryBundleRequest)\n\n  const { error } = useGetGoalData(entityId, queryResultBundle)\n\n  const tableIdColumnIndex = getFieldIndex(\n    ExpectedColumns.TABLEID,\n    queryResultBundle,\n  )\n  const countSqlColumnIndex = getFieldIndex(\n    ExpectedColumns.COUNT_SQL,\n    queryResultBundle,\n  )\n\n  const titleColumnIndex = getFieldIndex(\n    ExpectedColumns.TITLE,\n    queryResultBundle,\n  )\n  const summaryColumnIndex = getFieldIndex(\n    ExpectedColumns.SUMMARY,\n    queryResultBundle,\n  )\n  const linkColumnIndex = getFieldIndex(ExpectedColumns.LINK, queryResultBundle)\n\n  const iconKeyColumnIndex = getFieldIndex(\n    ExpectedColumns.ICON_KEY,\n    queryResultBundle,\n  )\n\n  const goalsDataArray: GoalsV3CardProps[] =\n    queryResultBundle?.queryResult!.queryResults.rows.map(el => {\n      const values = el.values as string[]\n      if (values.some(value => value === null)) {\n        console.warn('Row has null value(s) when no nulls expected')\n      }\n      const tableId =\n        tableIdColumnIndex > -1 ? values[tableIdColumnIndex] : undefined\n      let countSql\n      if (countSqlColumnIndex > -1 && values[countSqlColumnIndex] !== null) {\n        countSql = values[countSqlColumnIndex]\n      } else if (tableId) {\n        countSql = `SELECT * FROM ${tableId}`\n      }\n      const title = values[titleColumnIndex]\n      const summary = values[summaryColumnIndex]\n      const link = values[linkColumnIndex]\n      const iconKey = values[iconKeyColumnIndex]\n\n      const svgIconComponent = iconKey\n        ? svgComponentMap?.[iconKey.toLowerCase().replace(/\\s+/g, '_')]\n        : undefined\n\n      return {\n        countSql,\n        title,\n        summary,\n        link,\n        svgIconComponent,\n      }\n    }) ?? []\n\n  const ContentComponent = showDesktop ? GoalsV3Desktop : GoalsV3Mobile\n\n  return (\n    <Box>\n      {error && <ErrorBanner error={error} />}\n      <div className={`Goals`}>\n        <Box\n          sx={{\n            display: 'flex',\n            gap: showDesktop ? '10px' : '0',\n            flexDirection: showDesktop ? 'row' : 'column',\n            justifyContent: 'center',\n          }}\n        >\n          {goalsDataArray.map((row, index) => (\n            <ContentComponent key={index} {...row} />\n          ))}\n        </Box>\n      </div>\n    </Box>\n  )\n}\n\nexport default GoalsV3\n"],"mappings":";;;;;;;;;;;;;;AAyBA,IAAK,IAAL,yBAAA,GAAA;QACE,EAAA,UAAA,WACA,EAAA,YAAA,YACA,EAAA,QAAA,SACA,EAAA,UAAA,WACA,EAAA,OAAA,QACA,EAAA,WAAA;EANG,KAAA,EAAA,CAOJ,EAGK,IAAiC,MAEjC,KAAW,EACf,aACA,yBACmC;CACnC,IAAM,IAAc,EAAe,EAA+B,EAa5D,EAAE,MAAM,MACZ,EAb6C;EAC7C,cAAc;EACd;EACA,UACE;EAEF,OAAO,EACL,KAAK;uBACY,EAAS;qCAE3B;EACF,CAE4C,EAEvC,EAAE,aAAU,EAAe,GAAU,EAAkB,EAEvD,IAAqB,EACzB,EAAgB,SAChB,EACD,EACK,IAAsB,EAC1B,EAAgB,WAChB,EACD,EAEK,IAAmB,EACvB,EAAgB,OAChB,EACD,EACK,IAAqB,EACzB,EAAgB,SAChB,EACD,EACK,IAAkB,EAAc,EAAgB,MAAM,EAAkB,EAExE,IAAqB,EACzB,EAAgB,UAChB,EACD,EAEK,IACJ,GAAmB,YAAa,aAAa,KAAK,KAAI,MAAM;EAC1D,IAAM,IAAS,EAAG;AAClB,EAAI,EAAO,MAAK,MAAS,MAAU,KAAK,IACtC,QAAQ,KAAK,+CAA+C;EAE9D,IAAM,IACJ,IAAqB,KAAK,EAAO,KAAsB,KAAA,GACrD;AACJ,EAAI,IAAsB,MAAM,EAAO,OAAyB,OAC9D,IAAW,EAAO,KACT,MACT,IAAW,iBAAiB;EAE9B,IAAM,IAAQ,EAAO,IACf,IAAU,EAAO,IACjB,IAAO,EAAO,IACd,IAAU,EAAO,IAEjB,IAAmB,IACrB,IAAkB,EAAQ,aAAa,CAAC,QAAQ,QAAQ,IAAI,IAC5D,KAAA;AAEJ,SAAO;GACL;GACA;GACA;GACA;GACA;GACD;GACD,IAAI,EAAE,EAEJ,IAAmB,IAAc,IAAiB;AAExD,QACE,kBAAC,GAAD,EAAA,UAAA,CACG,KAAS,kBAAC,GAAD,EAAoB,UAAS,CAAA,EACvC,kBAAC,OAAD;EAAK,WAAW;YACd,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,KAAK,IAAc,SAAS;IAC5B,eAAe,IAAc,QAAQ;IACrC,gBAAgB;IACjB;aAEA,EAAe,KAAK,GAAK,MACxB,kBAAC,GAAD,EAA8B,GAAI,GAAO,EAAlB,EAAkB,CACzC;GACE,CAAA;EACF,CAAA,CACF,EAAA,CAAA"}
+{"version":3,"file":"GoalsV3.js","names":[],"sources":["../../../src/components/GoalsV3/GoalsV3.tsx"],"sourcesContent":["import React from 'react'\nimport useGetQueryResultBundle from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { SynapseConstants } from '@/utils'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport useGetGoalData from '@/utils/hooks/useGetGoalData'\nimport useShowDesktop from '@/utils/hooks/useShowDesktop'\nimport { Box } from '@mui/material'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport { ErrorBanner } from '../error'\nimport GoalsV3Desktop from './GoalsV3.Desktop'\nimport GoalsV3Mobile from './GoalsV3.Mobile'\n\nexport type GoalsV3Props = {\n  entityId: string\n  svgComponentMap: Record<string, React.FC<React.SVGProps<SVGSVGElement>>>\n}\n\nexport type GoalsV3CardProps = {\n  countSql?: string\n  title: string\n  summary: string\n  link: string\n  svgIconComponent?: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nenum ExpectedColumns {\n  TABLEID = 'TableId',\n  COUNT_SQL = 'CountSql',\n  TITLE = 'Title',\n  SUMMARY = 'Summary',\n  LINK = 'Link',\n  ICON_KEY = 'iconKey',\n}\n\n// PORTALS-2367\nconst GOALSV2_DESKTOP_MIN_BREAKPOINT = 1200\n\nconst GoalsV3 = ({\n  entityId,\n  svgComponentMap,\n}: GoalsV3Props): React.ReactNode => {\n  const showDesktop = useShowDesktop(GOALSV2_DESKTOP_MIN_BREAKPOINT)\n  const queryBundleRequest: QueryBundleRequest = {\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    entityId,\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    query: {\n      sql: `select *\n                from ${entityId}\n                order by ItemOrder`,\n    },\n  }\n  const { data: queryResultBundle } =\n    useGetQueryResultBundle(queryBundleRequest)\n\n  const { error } = useGetGoalData(entityId, queryResultBundle)\n\n  const tableIdColumnIndex = getFieldIndex(\n    ExpectedColumns.TABLEID,\n    queryResultBundle,\n  )\n  const countSqlColumnIndex = getFieldIndex(\n    ExpectedColumns.COUNT_SQL,\n    queryResultBundle,\n  )\n\n  const titleColumnIndex = getFieldIndex(\n    ExpectedColumns.TITLE,\n    queryResultBundle,\n  )\n  const summaryColumnIndex = getFieldIndex(\n    ExpectedColumns.SUMMARY,\n    queryResultBundle,\n  )\n  const linkColumnIndex = getFieldIndex(ExpectedColumns.LINK, queryResultBundle)\n\n  const iconKeyColumnIndex = getFieldIndex(\n    ExpectedColumns.ICON_KEY,\n    queryResultBundle,\n  )\n\n  const goalsDataArray: GoalsV3CardProps[] =\n    queryResultBundle?.queryResult!.queryResults.rows.map(el => {\n      const values = el.values as string[]\n      if (values.some(value => value === null)) {\n        console.warn('Row has null value(s) when no nulls expected')\n      }\n      const tableId =\n        tableIdColumnIndex > -1 ? values[tableIdColumnIndex] : undefined\n      let countSql\n      if (countSqlColumnIndex > -1 && values[countSqlColumnIndex] !== null) {\n        countSql = values[countSqlColumnIndex]\n      } else if (tableId) {\n        countSql = `SELECT * FROM ${tableId}`\n      }\n      const title = values[titleColumnIndex]\n      const summary = values[summaryColumnIndex]\n      const link = values[linkColumnIndex]\n      const iconKey = values[iconKeyColumnIndex]\n\n      const svgIconComponent = iconKey\n        ? svgComponentMap?.[iconKey.toLowerCase().replace(/\\s+/g, '_')]\n        : undefined\n\n      return {\n        countSql,\n        title,\n        summary,\n        link,\n        svgIconComponent,\n      }\n    }) ?? []\n\n  const ContentComponent = showDesktop ? GoalsV3Desktop : GoalsV3Mobile\n\n  return (\n    <Box>\n      {error && <ErrorBanner error={error} />}\n      <div className={`Goals`}>\n        <Box\n          sx={{\n            display: 'flex',\n            gap: showDesktop ? '10px' : '0',\n            flexDirection: showDesktop ? 'row' : 'column',\n            justifyContent: 'center',\n          }}\n        >\n          {goalsDataArray.map((row, index) => (\n            <ContentComponent key={index} {...row} />\n          ))}\n        </Box>\n      </div>\n    </Box>\n  )\n}\n\nexport default GoalsV3\n"],"mappings":";;;;;;;;;;;;;;AAyBA,IAAK,IAAL,yBAAA,GAAA;QACE,EAAA,UAAU,WACV,EAAA,YAAY,YACZ,EAAA,QAAQ,SACR,EAAA,UAAU,WACV,EAAA,OAAO,QACP,EAAA,WAAW;EANR,KAAA,EAAA,CAOJ,EAGK,IAAiC,MAEjC,KAAW,EACf,aACA,yBACmC;CACnC,IAAM,IAAc,EAAe,EAA+B,EAa5D,EAAE,MAAM,MACZ,EAAwB;EAZxB,cAAc;EACd;EACA,UACE;EAEF,OAAO,EACL,KAAK;uBACY,EAAS;qCAE3B;EAGuB,CAAmB,EAEvC,EAAE,aAAU,EAAe,GAAU,EAAkB,EAEvD,IAAqB,EACzB,EAAgB,SAChB,EACD,EACK,IAAsB,EAC1B,EAAgB,WAChB,EACD,EAEK,IAAmB,EACvB,EAAgB,OAChB,EACD,EACK,IAAqB,EACzB,EAAgB,SAChB,EACD,EACK,IAAkB,EAAc,EAAgB,MAAM,EAAkB,EAExE,IAAqB,EACzB,EAAgB,UAChB,EACD,EAEK,IACJ,GAAmB,YAAa,aAAa,KAAK,KAAI,MAAM;EAC1D,IAAM,IAAS,EAAG;AAClB,EAAI,EAAO,MAAK,MAAS,MAAU,KAAK,IACtC,QAAQ,KAAK,+CAA+C;EAE9D,IAAM,IACJ,IAAqB,KAAK,EAAO,KAAsB,KAAA,GACrD;AACJ,EAAI,IAAsB,MAAM,EAAO,OAAyB,OAC9D,IAAW,EAAO,KACT,MACT,IAAW,iBAAiB;EAE9B,IAAM,IAAQ,EAAO,IACf,IAAU,EAAO,IACjB,IAAO,EAAO,IACd,IAAU,EAAO,IAEjB,IAAmB,IACrB,IAAkB,EAAQ,aAAa,CAAC,QAAQ,QAAQ,IAAI,IAC5D,KAAA;AAEJ,SAAO;GACL;GACA;GACA;GACA;GACA;GACD;GACD,IAAI,EAAE,EAEJ,IAAmB,IAAc,IAAiB;AAExD,QACE,kBAAC,GAAD,EAAA,UAAA,CACG,KAAS,kBAAC,GAAD,EAAoB,UAAS,CAAA,EACvC,kBAAC,OAAD;EAAK,WAAW;YACd,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,KAAK,IAAc,SAAS;IAC5B,eAAe,IAAc,QAAQ;IACrC,gBAAgB;IACjB;aAEA,EAAe,KAAK,GAAK,MACxB,kBAAC,GAAD,EAA8B,GAAI,GAAO,EAAlB,EAAkB,CACzC;GACE,CAAA;EACF,CAAA,CACF,EAAA,CAAA"}

package/dist/components/GoogleMap/SynapseUserMarker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SynapseUserMarker.js","names":[],"sources":["../../../src/components/GoogleMap/SynapseUserMarker.tsx"],"sourcesContent":["import { GeoData } from '@/synapse-client'\nimport { Divider, Typography } from '@mui/material'\nimport { InfoWindow, Marker } from '@react-google-maps/api'\nimport { Fragment, useMemo } from 'react'\nimport { UserBadge } from '../UserCard/UserBadge'\n\nconst MAP_MARKER_IMAGE_URL =\n  'https://s3.amazonaws.com/static.synapse.org/images/synapse-map-marker.png'\n\ntype SynapseUserMarkerProps = {\n  /** The location and users that this point represents */\n  geoData: GeoData\n  /** Whether to show the list of users in a pop-up modal */\n  showInfoWindow: boolean\n  /** Invoked when the marker is clicked */\n  onClick: () => void\n  /** Invoked when the InfoWindow close button is clicked */\n  onInfoWindowCloseClick: () => void\n}\n\n/**\n * A Google Maps marker that represents a particular location for one or more Synapse users.\n * @param props\n * @returns\n */\nexport function SynapseUserMarker(props: SynapseUserMarkerProps) {\n  const { geoData, showInfoWindow, onClick, onInfoWindowCloseClick } = props\n  const position = useMemo(\n    () => ({\n      lat: geoData.latLng[0],\n      lng: geoData.latLng[1],\n    }),\n    [geoData.latLng],\n  )\n\n  const options = useMemo(\n    () => ({\n      icon: {\n        url: MAP_MARKER_IMAGE_URL,\n        size: new google.maps.Size(20, 32),\n        origin: new google.maps.Point(0, 0),\n        anchor: new google.maps.Point(0, 32),\n      },\n    }),\n    [],\n  )\n  return (\n    <Marker onClick={onClick} position={position} options={options}>\n      {showInfoWindow && (\n        <InfoWindow onCloseClick={onInfoWindowCloseClick}>\n          <>\n            <Typography variant=\"body1\" component={'span'}>\n              {geoData.location}\n            </Typography>\n            <Divider />\n            {geoData.userIds.map(id => (\n              <Fragment key={id}>\n                <br />\n                <UserBadge userId={id} openLinkInNewTab={true} />\n              </Fragment>\n            ))}\n          </>\n        </InfoWindow>\n      )}\n    </Marker>\n  )\n}\n\nexport default SynapseUserMarker\n"],"mappings":";;;;;;AAMA,IAAM,IACJ;AAkBF,SAAgB,EAAkB,GAA+B;CAC/D,IAAM,EAAE,YAAS,mBAAgB,YAAS,8BAA2B;AAoBrE,QACE,kBAAC,GAAD;EAAiB;EAAmB,UApBrB,SACR;GACL,KAAK,EAAQ,OAAO;GACpB,KAAK,EAAQ,OAAO;GACrB,GACD,CAAC,EAAQ,OAAO,CACjB;EAcwD,SAZzC,SACP,EACL,MAAM;GACJ,KAAK;GACL,MAAM,IAAI,OAAO,KAAK,KAAK,IAAI,GAAG;GAClC,QAAQ,IAAI,OAAO,KAAK,MAAM,GAAG,EAAE;GACnC,QAAQ,IAAI,OAAO,KAAK,MAAM,GAAG,GAAG;GACrC,EACF,GACD,EAAE,CACH;YAGI,KACC,kBAAC,GAAD;GAAY,cAAc;aACxB,kBAAA,GAAA,EAAA,UAAA;IACE,kBAAC,GAAD;KAAY,SAAQ;KAAQ,WAAW;eACpC,EAAQ;KACE,CAAA;IACb,kBAAC,GAAD,EAAW,CAAA;IACV,EAAQ,QAAQ,KAAI,MACnB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,MAAD,EAAM,CAAA,EACN,kBAAC,GAAD;KAAW,QAAQ;KAAI,kBAAkB;KAAQ,CAAA,CACxC,EAAA,EAHI,EAGJ,CACX;IACD,EAAA,CAAA;GACQ,CAAA;EAER,CAAA"}
+{"version":3,"file":"SynapseUserMarker.js","names":[],"sources":["../../../src/components/GoogleMap/SynapseUserMarker.tsx"],"sourcesContent":["import { GeoData } from '@/synapse-client'\nimport { Divider, Typography } from '@mui/material'\nimport { InfoWindow, Marker } from '@react-google-maps/api'\nimport { Fragment, useMemo } from 'react'\nimport { UserBadge } from '../UserCard/UserBadge'\n\nconst MAP_MARKER_IMAGE_URL =\n  'https://s3.amazonaws.com/static.synapse.org/images/synapse-map-marker.png'\n\ntype SynapseUserMarkerProps = {\n  /** The location and users that this point represents */\n  geoData: GeoData\n  /** Whether to show the list of users in a pop-up modal */\n  showInfoWindow: boolean\n  /** Invoked when the marker is clicked */\n  onClick: () => void\n  /** Invoked when the InfoWindow close button is clicked */\n  onInfoWindowCloseClick: () => void\n}\n\n/**\n * A Google Maps marker that represents a particular location for one or more Synapse users.\n * @param props\n * @returns\n */\nexport function SynapseUserMarker(props: SynapseUserMarkerProps) {\n  const { geoData, showInfoWindow, onClick, onInfoWindowCloseClick } = props\n  const position = useMemo(\n    () => ({\n      lat: geoData.latLng[0],\n      lng: geoData.latLng[1],\n    }),\n    [geoData.latLng],\n  )\n\n  const options = useMemo(\n    () => ({\n      icon: {\n        url: MAP_MARKER_IMAGE_URL,\n        size: new google.maps.Size(20, 32),\n        origin: new google.maps.Point(0, 0),\n        anchor: new google.maps.Point(0, 32),\n      },\n    }),\n    [],\n  )\n  return (\n    <Marker onClick={onClick} position={position} options={options}>\n      {showInfoWindow && (\n        <InfoWindow onCloseClick={onInfoWindowCloseClick}>\n          <>\n            <Typography variant=\"body1\" component={'span'}>\n              {geoData.location}\n            </Typography>\n            <Divider />\n            {geoData.userIds.map(id => (\n              <Fragment key={id}>\n                <br />\n                <UserBadge userId={id} openLinkInNewTab={true} />\n              </Fragment>\n            ))}\n          </>\n        </InfoWindow>\n      )}\n    </Marker>\n  )\n}\n\nexport default SynapseUserMarker\n"],"mappings":";;;;;;AAMA,IAAM,IACJ;AAkBF,SAAgB,EAAkB,GAA+B;CAC/D,IAAM,EAAE,YAAS,mBAAgB,YAAS,8BAA2B;AAoBrE,QACE,kBAAC,GAAD;EAAiB;EAAmB,UApBrB,SACR;GACL,KAAK,EAAQ,OAAO;GACpB,KAAK,EAAQ,OAAO;GACrB,GACD,CAAC,EAAQ,OAAO,CAeoB;EAAmB,SAZzC,SACP,EACL,MAAM;GACJ,KAAK;GACL,MAAM,IAAI,OAAO,KAAK,KAAK,IAAI,GAAG;GAClC,QAAQ,IAAI,OAAO,KAAK,MAAM,GAAG,EAAE;GACnC,QAAQ,IAAI,OAAO,KAAK,MAAM,GAAG,GAAG;GACrC,EACF,GACD,EAAE,CAGqD;YACpD,KACC,kBAAC,GAAD;GAAY,cAAc;aACxB,kBAAA,GAAA,EAAA,UAAA;IACE,kBAAC,GAAD;KAAY,SAAQ;KAAQ,WAAW;eACpC,EAAQ;KACE,CAAA;IACb,kBAAC,GAAD,EAAW,CAAA;IACV,EAAQ,QAAQ,KAAI,MACnB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,MAAD,EAAM,CAAA,EACN,kBAAC,GAAD;KAAW,QAAQ;KAAI,kBAAkB;KAAQ,CAAA,CACxC,EAAA,EAHI,EAGJ,CACX;IACD,EAAA,CAAA;GACQ,CAAA;EAER,CAAA"}

package/dist/components/HasAccess/AccessIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessIcon.js","names":[],"sources":["../../../src/components/HasAccess/AccessIcon.tsx"],"sourcesContent":["import { SxProps, Theme, useTheme } from '@mui/material'\nimport IconSvg, { IconName } from '../IconSvg/IconSvg'\n\nexport enum RestrictionUiType {\n  Accessible = 'Accessible',\n  AccessibleWithTerms = 'AccessibleWithTerms',\n  AccessBlockedByRestriction = 'AccessBlockedByRestriction',\n  AccessBlockedByRestrictionWithPendingRequest = 'AccessBlockedByRestrictionWithPendingRequest',\n  AccessBlockedByRestrictionWithPendingExternalRequest = 'AccessBlockedByRestrictionWithPendingExternalRequest',\n  AccessBlockedByRestrictionWithPendingRDCADAPRequest = 'AccessBlockedByRestrictionWithPendingRDCADAPRequest',\n  AccessBlockedByRestrictionWithRejectedRDCADAPRequest = 'AccessBlockedByRestrictionWithRejectedRDCADAPRequest',\n  AccessBlockedByACL = 'AccessBlockedByACL',\n  AccessBlockedToAnonymous = 'AccessBlockedToAnonymous',\n  AccessibleExternalFileHandle = 'AccessibleExternalFileHandle',\n}\n\nconst iconConfiguration: Record<\n  RestrictionUiType,\n  { icon: IconName; color: (theme: Theme) => string; tooltipText: string }\n> = {\n  [RestrictionUiType.AccessBlockedToAnonymous]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'You must sign in to access this item.',\n  },\n  [RestrictionUiType.AccessBlockedByRestriction]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'You must request access to this restricted item.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithPendingRequest]: {\n    icon: 'accessPending',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'Your access request is pending approval.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithPendingExternalRequest]: {\n    icon: 'accessPendingCloud',\n    color: theme => theme.palette.warning.main,\n    tooltipText:\n      'Your access request is pending approval from an external system.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithPendingRDCADAPRequest]: {\n    icon: 'accessPendingCloud',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'Your access request is pending approval by RDCA-DAP.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithRejectedRDCADAPRequest]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'Your access request has been denied by RDCA-DAP.',\n  },\n  [RestrictionUiType.AccessBlockedByACL]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'You do not have download access for this item.',\n  },\n  [RestrictionUiType.AccessibleWithTerms]: {\n    icon: 'accessOpen',\n    color: theme => theme.palette.success.main,\n    tooltipText: 'View Terms',\n  },\n  [RestrictionUiType.Accessible]: {\n    icon: 'accessOpen',\n    color: theme => theme.palette.success.main,\n    tooltipText: 'You have access to this item.',\n  },\n  [RestrictionUiType.AccessibleExternalFileHandle]: {\n    icon: 'linkOff',\n    color: theme => theme.palette.grey[700],\n    tooltipText: 'Access may be controlled by an external system.',\n  },\n}\n\nfunction AccessIcon(props: {\n  restrictionUiType: RestrictionUiType\n  wrap?: boolean\n  sx?: SxProps<Theme>\n}) {\n  const { restrictionUiType, wrap = true, sx } = props\n  const theme = useTheme()\n  if (restrictionUiType) {\n    const configuration = iconConfiguration[restrictionUiType]\n    return (\n      <IconSvg\n        icon={configuration.icon}\n        label={configuration.tooltipText}\n        wrap={wrap}\n        sx={{\n          color: configuration.color(theme),\n          height: '16px',\n          verticalAlign: 'text-top',\n          ...sx,\n        }}\n      />\n    )\n  }\n  // nothing is rendered until downloadType is determined\n  return <></>\n}\n\nexport default AccessIcon\n"],"mappings":";;;;AAGA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,aAAA,cACA,EAAA,sBAAA,uBACA,EAAA,6BAAA,8BACA,EAAA,+CAAA,gDACA,EAAA,uDAAA,wDACA,EAAA,sDAAA,uDACA,EAAA,uDAAA,wDACA,EAAA,qBAAA,sBACA,EAAA,2BAAA,4BACA,EAAA,+BAAA;KACD,EAEK,IAGF;EACD,EAAkB,2BAA2B;EAC5C,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,6BAA6B;EAC9C,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,+CAA+C;EAChE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,uDAAuD;EACxE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aACE;EACH;EACA,EAAkB,sDAAsD;EACvE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,uDAAuD;EACxE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,qBAAqB;EACtC,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,sBAAsB;EACvC,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,aAAa;EAC9B,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,+BAA+B;EAChD,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,KAAK;EACnC,aAAa;EACd;CACF;AAED,SAAS,EAAW,GAIjB;CACD,IAAM,EAAE,sBAAmB,UAAO,IAAM,UAAO,GACzC,IAAQ,GAAU;AACxB,KAAI,GAAmB;EACrB,IAAM,IAAgB,EAAkB;AACxC,SACE,kBAAC,GAAD;GACE,MAAM,EAAc;GACpB,OAAO,EAAc;GACf;GACN,IAAI;IACF,OAAO,EAAc,MAAM,EAAM;IACjC,QAAQ;IACR,eAAe;IACf,GAAG;IACJ;GACD,CAAA;;AAIN,QAAO,kBAAA,GAAA,EAAK,CAAA"}
+{"version":3,"file":"AccessIcon.js","names":[],"sources":["../../../src/components/HasAccess/AccessIcon.tsx"],"sourcesContent":["import { SxProps, Theme, useTheme } from '@mui/material'\nimport IconSvg, { IconName } from '../IconSvg/IconSvg'\n\nexport enum RestrictionUiType {\n  Accessible = 'Accessible',\n  AccessibleWithTerms = 'AccessibleWithTerms',\n  AccessBlockedByRestriction = 'AccessBlockedByRestriction',\n  AccessBlockedByRestrictionWithPendingRequest = 'AccessBlockedByRestrictionWithPendingRequest',\n  AccessBlockedByRestrictionWithPendingExternalRequest = 'AccessBlockedByRestrictionWithPendingExternalRequest',\n  AccessBlockedByRestrictionWithPendingRDCADAPRequest = 'AccessBlockedByRestrictionWithPendingRDCADAPRequest',\n  AccessBlockedByRestrictionWithRejectedRDCADAPRequest = 'AccessBlockedByRestrictionWithRejectedRDCADAPRequest',\n  AccessBlockedByACL = 'AccessBlockedByACL',\n  AccessBlockedToAnonymous = 'AccessBlockedToAnonymous',\n  AccessibleExternalFileHandle = 'AccessibleExternalFileHandle',\n}\n\nconst iconConfiguration: Record<\n  RestrictionUiType,\n  { icon: IconName; color: (theme: Theme) => string; tooltipText: string }\n> = {\n  [RestrictionUiType.AccessBlockedToAnonymous]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'You must sign in to access this item.',\n  },\n  [RestrictionUiType.AccessBlockedByRestriction]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'You must request access to this restricted item.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithPendingRequest]: {\n    icon: 'accessPending',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'Your access request is pending approval.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithPendingExternalRequest]: {\n    icon: 'accessPendingCloud',\n    color: theme => theme.palette.warning.main,\n    tooltipText:\n      'Your access request is pending approval from an external system.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithPendingRDCADAPRequest]: {\n    icon: 'accessPendingCloud',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'Your access request is pending approval by RDCA-DAP.',\n  },\n  [RestrictionUiType.AccessBlockedByRestrictionWithRejectedRDCADAPRequest]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'Your access request has been denied by RDCA-DAP.',\n  },\n  [RestrictionUiType.AccessBlockedByACL]: {\n    icon: 'accessClosed',\n    color: theme => theme.palette.warning.main,\n    tooltipText: 'You do not have download access for this item.',\n  },\n  [RestrictionUiType.AccessibleWithTerms]: {\n    icon: 'accessOpen',\n    color: theme => theme.palette.success.main,\n    tooltipText: 'View Terms',\n  },\n  [RestrictionUiType.Accessible]: {\n    icon: 'accessOpen',\n    color: theme => theme.palette.success.main,\n    tooltipText: 'You have access to this item.',\n  },\n  [RestrictionUiType.AccessibleExternalFileHandle]: {\n    icon: 'linkOff',\n    color: theme => theme.palette.grey[700],\n    tooltipText: 'Access may be controlled by an external system.',\n  },\n}\n\nfunction AccessIcon(props: {\n  restrictionUiType: RestrictionUiType\n  wrap?: boolean\n  sx?: SxProps<Theme>\n}) {\n  const { restrictionUiType, wrap = true, sx } = props\n  const theme = useTheme()\n  if (restrictionUiType) {\n    const configuration = iconConfiguration[restrictionUiType]\n    return (\n      <IconSvg\n        icon={configuration.icon}\n        label={configuration.tooltipText}\n        wrap={wrap}\n        sx={{\n          color: configuration.color(theme),\n          height: '16px',\n          verticalAlign: 'text-top',\n          ...sx,\n        }}\n      />\n    )\n  }\n  // nothing is rendered until downloadType is determined\n  return <></>\n}\n\nexport default AccessIcon\n"],"mappings":";;;;AAGA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,aAAa,cACb,EAAA,sBAAsB,uBACtB,EAAA,6BAA6B,8BAC7B,EAAA,+CAA+C,gDAC/C,EAAA,uDAAuD,wDACvD,EAAA,sDAAsD,uDACtD,EAAA,uDAAuD,wDACvD,EAAA,qBAAqB,sBACrB,EAAA,2BAA2B,4BAC3B,EAAA,+BAA+B;KAChC,EAEK,IAGF;EACD,EAAkB,2BAA2B;EAC5C,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,6BAA6B;EAC9C,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,+CAA+C;EAChE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,uDAAuD;EACxE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aACE;EACH;EACA,EAAkB,sDAAsD;EACvE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,uDAAuD;EACxE,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,qBAAqB;EACtC,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,sBAAsB;EACvC,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,aAAa;EAC9B,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,QAAQ;EACtC,aAAa;EACd;EACA,EAAkB,+BAA+B;EAChD,MAAM;EACN,QAAO,MAAS,EAAM,QAAQ,KAAK;EACnC,aAAa;EACd;CACF;AAED,SAAS,EAAW,GAIjB;CACD,IAAM,EAAE,sBAAmB,UAAO,IAAM,UAAO,GACzC,IAAQ,GAAU;AACxB,KAAI,GAAmB;EACrB,IAAM,IAAgB,EAAkB;AACxC,SACE,kBAAC,GAAD;GACE,MAAM,EAAc;GACpB,OAAO,EAAc;GACf;GACN,IAAI;IACF,OAAO,EAAc,MAAM,EAAM;IACjC,QAAQ;IACR,eAAe;IACf,GAAG;IACJ;GACD,CAAA;;AAIN,QAAO,kBAAA,GAAA,EAAK,CAAA"}

package/dist/components/HasAccess/useHasAccess.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHasAccess.js","names":[],"sources":["../../../src/components/HasAccess/useHasAccess.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\nimport AccessIcon, { RestrictionUiType } from './AccessIcon'\nimport {\n  AccessRequirement,\n  EntityBundle,\n  FileHandle,\n  RestrictableObjectType,\n  RestrictionLevel,\n} from '@sage-bionetworks/synapse-types'\nimport {\n  implementsExternalFileHandleInterface,\n  isFileEntity,\n  SynapseClientError,\n  useSynapseContext,\n} from '@/utils'\nimport {\n  useGetEntityBundle,\n  useGetRestrictionInformation,\n} from '@/synapse-queries'\nimport SynapseClient from '@/synapse-client'\nimport AccessRequirementList, {\n  checkHasUnsupportedRequirement,\n} from '../AccessRequirementList/AccessRequirementList'\nimport { BackendDestinationEnum, getEndpoint } from '@/utils/functions'\nimport { UseQueryOptions } from '@tanstack/react-query'\nimport { SxProps, Theme } from '@mui/material'\n\n/**\n * This hook determines if\n * - the entity is a FileEntity, AND\n * - the caller has permission to fetch the dataFileHandle, AND\n * - the dataFileHandle is an instance of ExternalFileHandleInterface (i.e. the file is not controlled by Synapse)\n * Note that this requires an additional API call that cannot be batched, so it should be avoided in bulk contexts if possible.\n */\nfunction useGetIsExternalFileHandle(\n  entityId: string,\n  options: Partial<UseQueryOptions<EntityBundle, SynapseClientError, boolean>>,\n) {\n  return useGetEntityBundle(entityId, undefined, undefined, {\n    ...options,\n    select: bundle => {\n      if (!isFileEntity(bundle.entity)) {\n        return false\n      }\n      const fileEntity = bundle.entity\n      const fileHandles = bundle.fileHandles\n      const fileHandle: FileHandle | undefined = fileHandles?.find(\n        fileHandle => fileHandle.id === fileEntity.dataFileHandleId,\n      )\n      return fileHandle && implementsExternalFileHandleInterface(fileHandle)\n    },\n  })\n}\n\n/**\n * Determines whether an Entity is accessible for download, or if it is blocked by the ACL or unmet Access Requirements.\n *\n * To make download available, and determine if the file is downloadable via the web, see {@link DirectDownload.tsx}\n * @param entityId\n * @returns\n */\nexport function useGetRestrictionUiType(\n  entityId: string,\n  useGetIsExternalFileHandleOptions: Partial<\n    UseQueryOptions<EntityBundle, SynapseClientError, boolean>\n  >,\n): RestrictionUiType | undefined {\n  const { isAuthenticated } = useSynapseContext()\n\n  const { data: restrictionInformation } = useGetRestrictionInformation({\n    restrictableObjectType: RestrictableObjectType.ENTITY,\n    objectId: entityId,\n  })\n\n  const { data: isExternalFileHandle, isLoading: isLoadingExternalFile } =\n    useGetIsExternalFileHandle(entityId, {\n      enabled: useGetIsExternalFileHandleOptions.enabled,\n    })\n\n  if (!restrictionInformation) {\n    return undefined\n  }\n\n  // Only check for external file handle if the feature is enabled\n  if (useGetIsExternalFileHandleOptions.enabled) {\n    if (isLoadingExternalFile) {\n      return undefined\n    }\n    if (isExternalFileHandle) {\n      return RestrictionUiType.AccessibleExternalFileHandle\n    }\n  }\n\n  if (restrictionInformation.hasUnmetAccessRequirement) {\n    return RestrictionUiType.AccessBlockedByRestriction\n  }\n  if (restrictionInformation.userEntityPermissions!.canDownload) {\n    if (restrictionInformation.restrictionLevel !== RestrictionLevel.OPEN) {\n      // Indicate that there are requirements, but they have been met\n      return RestrictionUiType.AccessibleWithTerms\n    } else {\n      return RestrictionUiType.Accessible\n    }\n  }\n\n  if (isAuthenticated) {\n    return RestrictionUiType.AccessBlockedByACL\n  }\n  return RestrictionUiType.AccessBlockedToAnonymous\n}\n\n//* Get the access level text */\nfunction getAccessText(props: RestrictionUiType | undefined) {\n  switch (props) {\n    case RestrictionUiType.Accessible:\n      return 'Open Access'\n    case RestrictionUiType.AccessibleWithTerms:\n      return 'View Terms'\n    case RestrictionUiType.AccessBlockedByRestriction:\n      return 'Request Access'\n    case RestrictionUiType.AccessBlockedByACL:\n      return 'Access Denied'\n    case RestrictionUiType.AccessBlockedToAnonymous:\n      return 'Sign In Required'\n    case RestrictionUiType.AccessibleExternalFileHandle:\n      return 'External Access'\n    case undefined:\n      return 'Loading...'\n    default:\n      return ''\n  }\n}\n\n// A hook that handles the logic for computing the correct access level, getting the text, and the icon\nexport function useHasAccess(\n  entityId: string,\n  iconWrap: boolean = false,\n  iconSx?: SxProps<Theme>,\n  options: { showExternalAccessIcon?: boolean } = {},\n) {\n  const [displayAccessRequirement, setDisplayAccessRequirement] =\n    useState(false)\n  const [accessRequirements, setAccessRequirements] = useState<\n    AccessRequirement[]\n  >([])\n\n  const { accessToken } = useSynapseContext()\n  const { showExternalAccessIcon = false } = options\n\n  // get access level\n  const restrictionUiType = useGetRestrictionUiType(entityId, {\n    enabled: showExternalAccessIcon,\n  })\n\n  const { data: restrictionInformation } = useGetRestrictionInformation({\n    restrictableObjectType: RestrictableObjectType.ENTITY,\n    objectId: entityId,\n  })\n\n  // get access level text\n  const accessText = getAccessText(restrictionUiType)\n\n  // get access level icon\n  const icon = (\n    <AccessIcon\n      restrictionUiType={restrictionUiType!}\n      wrap={iconWrap}\n      sx={{ ...iconSx }}\n    />\n  )\n\n  const handleGetAccess = useCallback(() => {\n    // TODO: The fetch should really happen in the AR List component.\n    // If we need to open the AR page in synapse, the logic should be in the modal and it should just close itself right away\n    SynapseClient.getAllAccessRequirements(accessToken, entityId).then(\n      requirements => {\n        if (checkHasUnsupportedRequirement(requirements)) {\n          window.open(\n            `${getEndpoint(\n              BackendDestinationEnum.PORTAL_ENDPOINT,\n            )}AccessRequirements:ID=${entityId}&TYPE=ENTITY`,\n            '_blank',\n          )\n        } else {\n          setAccessRequirements(requirements)\n          setDisplayAccessRequirement(true)\n        }\n      },\n    )\n  }, [accessToken, entityId])\n\n  // Determine if this access type should show a clickable button\n  const isClickable = useMemo(() => {\n    if (!restrictionInformation || !restrictionUiType) {\n      return false\n    }\n\n    const hasUnmetAccessRequirement =\n      restrictionInformation.hasUnmetAccessRequirement\n    const restrictionLevel = restrictionInformation.restrictionLevel\n\n    // Clickable if there are unmet requirements or if there are terms to view\n    return (\n      hasUnmetAccessRequirement ||\n      restrictionLevel !== RestrictionLevel.OPEN ||\n      restrictionUiType === RestrictionUiType.AccessBlockedToAnonymous\n    )\n  }, [restrictionInformation, restrictionUiType])\n\n  const accessRequirementDialog = displayAccessRequirement ? (\n    <AccessRequirementList\n      subjectId={entityId}\n      subjectType={RestrictableObjectType.ENTITY}\n      accessRequirementFromProps={accessRequirements}\n      renderAsModal={true}\n      onHide={() => {\n        setDisplayAccessRequirement(false)\n      }}\n    />\n  ) : null\n\n  return {\n    restrictionUiType,\n    accessText,\n    icon,\n    handleGetAccess,\n    isClickable,\n    accessRequirementDialog,\n    setDisplayAccessRequirement,\n  }\n}\n\nexport default useHasAccess\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,SAAS,EACP,GACA,GACA;AACA,QAAO,EAAmB,GAAU,KAAA,GAAW,KAAA,GAAW;EACxD,GAAG;EACH,SAAQ,MAAU;AAChB,OAAI,CAAC,EAAa,EAAO,OAAO,CAC9B,QAAO;GAET,IAAM,IAAa,EAAO,QAEpB,IADc,EAAO,aAC6B,MACtD,MAAc,EAAW,OAAO,EAAW,iBAC5C;AACD,UAAO,KAAc,EAAsC,EAAW;;EAEzE,CAAC;;AAUJ,SAAgB,EACd,GACA,GAG+B;CAC/B,IAAM,EAAE,uBAAoB,GAAmB,EAEzC,EAAE,MAAM,MAA2B,EAA6B;EACpE,wBAAwB,EAAuB;EAC/C,UAAU;EACX,CAAC,EAEI,EAAE,MAAM,GAAsB,WAAW,MAC7C,EAA2B,GAAU,EACnC,SAAS,EAAkC,SAC5C,CAAC;AAEC,QAKL;MAAI,EAAkC,SAAS;AAC7C,OAAI,EACF;AAEF,OAAI,EACF,QAAO,EAAkB;;AAmB7B,SAfI,EAAuB,4BAClB,EAAkB,6BAEvB,EAAuB,sBAAuB,cAC5C,EAAuB,qBAAqB,EAAiB,OAIxD,EAAkB,aAFlB,EAAkB,sBAMzB,IACK,EAAkB,qBAEpB,EAAkB;;;AAI3B,SAAS,EAAc,GAAsC;AAC3D,SAAQ,GAAR;EACE,KAAK,EAAkB,WACrB,QAAO;EACT,KAAK,EAAkB,oBACrB,QAAO;EACT,KAAK,EAAkB,2BACrB,QAAO;EACT,KAAK,EAAkB,mBACrB,QAAO;EACT,KAAK,EAAkB,yBACrB,QAAO;EACT,KAAK,EAAkB,6BACrB,QAAO;EACT,KAAK,KAAA,EACH,QAAO;EACT,QACE,QAAO;;;AAKb,SAAgB,EACd,GACA,IAAoB,IACpB,GACA,IAAgD,EAAE,EAClD;CACA,IAAM,CAAC,GAA0B,KAC/B,EAAS,GAAM,EACX,CAAC,GAAoB,KAAyB,EAElD,EAAE,CAAC,EAEC,EAAE,mBAAgB,GAAmB,EACrC,EAAE,4BAAyB,OAAU,GAGrC,IAAoB,EAAwB,GAAU,EAC1D,SAAS,GACV,CAAC,EAEI,EAAE,MAAM,MAA2B,EAA6B;EACpE,wBAAwB,EAAuB;EAC/C,UAAU;EACX,CAAC;AAgEF,QAAO;EACL;EACA,YA/DiB,EAAc,EAAkB;EAgEjD,MA5DA,kBAAC,GAAD;GACqB;GACnB,MAAM;GACN,IAAI,EAAE,GAAG,GAAQ;GACjB,CAAA;EAyDF,iBAtDsB,QAAkB;AAGxC,KAAc,yBAAyB,GAAa,EAAS,CAAC,MAC5D,MAAgB;AACd,IAAI,EAA+B,EAAa,GAC9C,OAAO,KACL,GAAG,EACD,EAAuB,gBACxB,CAAC,wBAAwB,EAAS,eACnC,SACD,IAED,EAAsB,EAAa,EACnC,EAA4B,GAAK;KAGtC;KACA,CAAC,GAAa,EAAS,CAAC;EAqCzB,aAlCkB,QAAc;AAChC,OAAI,CAAC,KAA0B,CAAC,EAC9B,QAAO;GAGT,IAAM,IACJ,EAAuB,2BACnB,IAAmB,EAAuB;AAGhD,UACE,KACA,MAAqB,EAAiB,QACtC,MAAsB,EAAkB;KAEzC,CAAC,GAAwB,EAAkB,CAAC;EAoB7C,yBAlB8B,IAC9B,kBAAC,GAAD;GACE,WAAW;GACX,aAAa,EAAuB;GACpC,4BAA4B;GAC5B,eAAe;GACf,cAAc;AACZ,MAA4B,GAAM;;GAEpC,CAAA,GACA;EASF;EACD"}
+{"version":3,"file":"useHasAccess.js","names":[],"sources":["../../../src/components/HasAccess/useHasAccess.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\nimport AccessIcon, { RestrictionUiType } from './AccessIcon'\nimport {\n  AccessRequirement,\n  EntityBundle,\n  FileHandle,\n  RestrictableObjectType,\n  RestrictionLevel,\n} from '@sage-bionetworks/synapse-types'\nimport {\n  implementsExternalFileHandleInterface,\n  isFileEntity,\n  SynapseClientError,\n  useSynapseContext,\n} from '@/utils'\nimport {\n  useGetEntityBundle,\n  useGetRestrictionInformation,\n} from '@/synapse-queries'\nimport SynapseClient from '@/synapse-client'\nimport AccessRequirementList, {\n  checkHasUnsupportedRequirement,\n} from '../AccessRequirementList/AccessRequirementList'\nimport { BackendDestinationEnum, getEndpoint } from '@/utils/functions'\nimport { UseQueryOptions } from '@tanstack/react-query'\nimport { SxProps, Theme } from '@mui/material'\n\n/**\n * This hook determines if\n * - the entity is a FileEntity, AND\n * - the caller has permission to fetch the dataFileHandle, AND\n * - the dataFileHandle is an instance of ExternalFileHandleInterface (i.e. the file is not controlled by Synapse)\n * Note that this requires an additional API call that cannot be batched, so it should be avoided in bulk contexts if possible.\n */\nfunction useGetIsExternalFileHandle(\n  entityId: string,\n  options: Partial<UseQueryOptions<EntityBundle, SynapseClientError, boolean>>,\n) {\n  return useGetEntityBundle(entityId, undefined, undefined, {\n    ...options,\n    select: bundle => {\n      if (!isFileEntity(bundle.entity)) {\n        return false\n      }\n      const fileEntity = bundle.entity\n      const fileHandles = bundle.fileHandles\n      const fileHandle: FileHandle | undefined = fileHandles?.find(\n        fileHandle => fileHandle.id === fileEntity.dataFileHandleId,\n      )\n      return fileHandle && implementsExternalFileHandleInterface(fileHandle)\n    },\n  })\n}\n\n/**\n * Determines whether an Entity is accessible for download, or if it is blocked by the ACL or unmet Access Requirements.\n *\n * To make download available, and determine if the file is downloadable via the web, see {@link DirectDownload.tsx}\n * @param entityId\n * @returns\n */\nexport function useGetRestrictionUiType(\n  entityId: string,\n  useGetIsExternalFileHandleOptions: Partial<\n    UseQueryOptions<EntityBundle, SynapseClientError, boolean>\n  >,\n): RestrictionUiType | undefined {\n  const { isAuthenticated } = useSynapseContext()\n\n  const { data: restrictionInformation } = useGetRestrictionInformation({\n    restrictableObjectType: RestrictableObjectType.ENTITY,\n    objectId: entityId,\n  })\n\n  const { data: isExternalFileHandle, isLoading: isLoadingExternalFile } =\n    useGetIsExternalFileHandle(entityId, {\n      enabled: useGetIsExternalFileHandleOptions.enabled,\n    })\n\n  if (!restrictionInformation) {\n    return undefined\n  }\n\n  // Only check for external file handle if the feature is enabled\n  if (useGetIsExternalFileHandleOptions.enabled) {\n    if (isLoadingExternalFile) {\n      return undefined\n    }\n    if (isExternalFileHandle) {\n      return RestrictionUiType.AccessibleExternalFileHandle\n    }\n  }\n\n  if (restrictionInformation.hasUnmetAccessRequirement) {\n    return RestrictionUiType.AccessBlockedByRestriction\n  }\n  if (restrictionInformation.userEntityPermissions!.canDownload) {\n    if (restrictionInformation.restrictionLevel !== RestrictionLevel.OPEN) {\n      // Indicate that there are requirements, but they have been met\n      return RestrictionUiType.AccessibleWithTerms\n    } else {\n      return RestrictionUiType.Accessible\n    }\n  }\n\n  if (isAuthenticated) {\n    return RestrictionUiType.AccessBlockedByACL\n  }\n  return RestrictionUiType.AccessBlockedToAnonymous\n}\n\n//* Get the access level text */\nfunction getAccessText(props: RestrictionUiType | undefined) {\n  switch (props) {\n    case RestrictionUiType.Accessible:\n      return 'Open Access'\n    case RestrictionUiType.AccessibleWithTerms:\n      return 'View Terms'\n    case RestrictionUiType.AccessBlockedByRestriction:\n      return 'Request Access'\n    case RestrictionUiType.AccessBlockedByACL:\n      return 'Access Denied'\n    case RestrictionUiType.AccessBlockedToAnonymous:\n      return 'Sign In Required'\n    case RestrictionUiType.AccessibleExternalFileHandle:\n      return 'External Access'\n    case undefined:\n      return 'Loading...'\n    default:\n      return ''\n  }\n}\n\n// A hook that handles the logic for computing the correct access level, getting the text, and the icon\nexport function useHasAccess(\n  entityId: string,\n  iconWrap: boolean = false,\n  iconSx?: SxProps<Theme>,\n  options: { showExternalAccessIcon?: boolean } = {},\n) {\n  const [displayAccessRequirement, setDisplayAccessRequirement] =\n    useState(false)\n  const [accessRequirements, setAccessRequirements] = useState<\n    AccessRequirement[]\n  >([])\n\n  const { accessToken } = useSynapseContext()\n  const { showExternalAccessIcon = false } = options\n\n  // get access level\n  const restrictionUiType = useGetRestrictionUiType(entityId, {\n    enabled: showExternalAccessIcon,\n  })\n\n  const { data: restrictionInformation } = useGetRestrictionInformation({\n    restrictableObjectType: RestrictableObjectType.ENTITY,\n    objectId: entityId,\n  })\n\n  // get access level text\n  const accessText = getAccessText(restrictionUiType)\n\n  // get access level icon\n  const icon = (\n    <AccessIcon\n      restrictionUiType={restrictionUiType!}\n      wrap={iconWrap}\n      sx={{ ...iconSx }}\n    />\n  )\n\n  const handleGetAccess = useCallback(() => {\n    // TODO: The fetch should really happen in the AR List component.\n    // If we need to open the AR page in synapse, the logic should be in the modal and it should just close itself right away\n    SynapseClient.getAllAccessRequirements(accessToken, entityId).then(\n      requirements => {\n        if (checkHasUnsupportedRequirement(requirements)) {\n          window.open(\n            `${getEndpoint(\n              BackendDestinationEnum.PORTAL_ENDPOINT,\n            )}AccessRequirements:ID=${entityId}&TYPE=ENTITY`,\n            '_blank',\n          )\n        } else {\n          setAccessRequirements(requirements)\n          setDisplayAccessRequirement(true)\n        }\n      },\n    )\n  }, [accessToken, entityId])\n\n  // Determine if this access type should show a clickable button\n  const isClickable = useMemo(() => {\n    if (!restrictionInformation || !restrictionUiType) {\n      return false\n    }\n\n    const hasUnmetAccessRequirement =\n      restrictionInformation.hasUnmetAccessRequirement\n    const restrictionLevel = restrictionInformation.restrictionLevel\n\n    // Clickable if there are unmet requirements or if there are terms to view\n    return (\n      hasUnmetAccessRequirement ||\n      restrictionLevel !== RestrictionLevel.OPEN ||\n      restrictionUiType === RestrictionUiType.AccessBlockedToAnonymous\n    )\n  }, [restrictionInformation, restrictionUiType])\n\n  const accessRequirementDialog = displayAccessRequirement ? (\n    <AccessRequirementList\n      subjectId={entityId}\n      subjectType={RestrictableObjectType.ENTITY}\n      accessRequirementFromProps={accessRequirements}\n      renderAsModal={true}\n      onHide={() => {\n        setDisplayAccessRequirement(false)\n      }}\n    />\n  ) : null\n\n  return {\n    restrictionUiType,\n    accessText,\n    icon,\n    handleGetAccess,\n    isClickable,\n    accessRequirementDialog,\n    setDisplayAccessRequirement,\n  }\n}\n\nexport default useHasAccess\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,SAAS,EACP,GACA,GACA;AACA,QAAO,EAAmB,GAAU,KAAA,GAAW,KAAA,GAAW;EACxD,GAAG;EACH,SAAQ,MAAU;AAChB,OAAI,CAAC,EAAa,EAAO,OAAO,CAC9B,QAAO;GAET,IAAM,IAAa,EAAO,QAEpB,IADc,EAAO,aAC6B,MACtD,MAAc,EAAW,OAAO,EAAW,iBAC5C;AACD,UAAO,KAAc,EAAsC,EAAW;;EAEzE,CAAC;;AAUJ,SAAgB,EACd,GACA,GAG+B;CAC/B,IAAM,EAAE,uBAAoB,GAAmB,EAEzC,EAAE,MAAM,MAA2B,EAA6B;EACpE,wBAAwB,EAAuB;EAC/C,UAAU;EACX,CAAC,EAEI,EAAE,MAAM,GAAsB,WAAW,MAC7C,EAA2B,GAAU,EACnC,SAAS,EAAkC,SAC5C,CAAC;AAEC,QAKL;MAAI,EAAkC,SAAS;AAC7C,OAAI,EACF;AAEF,OAAI,EACF,QAAO,EAAkB;;AAmB7B,SAfI,EAAuB,4BAClB,EAAkB,6BAEvB,EAAuB,sBAAuB,cAC5C,EAAuB,qBAAqB,EAAiB,OAIxD,EAAkB,aAFlB,EAAkB,sBAMzB,IACK,EAAkB,qBAEpB,EAAkB;;;AAI3B,SAAS,EAAc,GAAsC;AAC3D,SAAQ,GAAR;EACE,KAAK,EAAkB,WACrB,QAAO;EACT,KAAK,EAAkB,oBACrB,QAAO;EACT,KAAK,EAAkB,2BACrB,QAAO;EACT,KAAK,EAAkB,mBACrB,QAAO;EACT,KAAK,EAAkB,yBACrB,QAAO;EACT,KAAK,EAAkB,6BACrB,QAAO;EACT,KAAK,KAAA,EACH,QAAO;EACT,QACE,QAAO;;;AAKb,SAAgB,EACd,GACA,IAAoB,IACpB,GACA,IAAgD,EAAE,EAClD;CACA,IAAM,CAAC,GAA0B,KAC/B,EAAS,GAAM,EACX,CAAC,GAAoB,KAAyB,EAElD,EAAE,CAAC,EAEC,EAAE,mBAAgB,GAAmB,EACrC,EAAE,4BAAyB,OAAU,GAGrC,IAAoB,EAAwB,GAAU,EAC1D,SAAS,GACV,CAAC,EAEI,EAAE,MAAM,MAA2B,EAA6B;EACpE,wBAAwB,EAAuB;EAC/C,UAAU;EACX,CAAC;AAgEF,QAAO;EACL;EACA,YA/DiB,EAAc,EA+D/B;EACA,MA5DA,kBAAC,GAAD;GACqB;GACnB,MAAM;GACN,IAAI,EAAE,GAAG,GAAQ;GACjB,CAwDF;EACA,iBAtDsB,QAAkB;AAGxC,KAAc,yBAAyB,GAAa,EAAS,CAAC,MAC5D,MAAgB;AACd,IAAI,EAA+B,EAAa,GAC9C,OAAO,KACL,GAAG,EACD,EAAuB,gBACxB,CAAC,wBAAwB,EAAS,eACnC,SACD,IAED,EAAsB,EAAa,EACnC,EAA4B,GAAK;KAGtC;KACA,CAAC,GAAa,EAAS,CAoCxB;EACA,aAlCkB,QAAc;AAChC,OAAI,CAAC,KAA0B,CAAC,EAC9B,QAAO;GAGT,IAAM,IACJ,EAAuB,2BACnB,IAAmB,EAAuB;AAGhD,UACE,KACA,MAAqB,EAAiB,QACtC,MAAsB,EAAkB;KAEzC,CAAC,GAAwB,EAAkB,CAmB5C;EACA,yBAlB8B,IAC9B,kBAAC,GAAD;GACE,WAAW;GACX,aAAa,EAAuB;GACpC,4BAA4B;GAC5B,eAAe;GACf,cAAc;AACZ,MAA4B,GAAM;;GAEpC,CAAA,GACA;EASF;EACD"}

package/dist/components/HeaderCard/HeaderCardV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCardV2.js","names":[],"sources":["../../../src/components/HeaderCard/HeaderCardV2.tsx"],"sourcesContent":["import { CardLabel } from '@/components/row_renderers/utils/CardFooter'\nimport React, { forwardRef, ForwardedRef } from 'react'\nimport {\n  Box,\n  Card,\n  Typography,\n  // Stack,\n  // ButtonProps,\n  useTheme,\n  useMediaQuery,\n} from '@mui/material'\nimport { DescriptionConfig } from '../CardContainerLogic'\nimport { CollapsibleDescription } from '../GenericCard/CollapsibleDescription'\nimport { GenericCardProps } from '@/components/GenericCard/GenericCard'\nimport { useDocumentMetadata } from '@/utils/context/DocumentMetadataContext'\nimport { SmartButton } from '../SmartLink/SmartButton'\nimport { SmartLink } from '../SmartLink/SmartLink'\n\nexport type HeaderCardV2Props = {\n  /** Type label displayed at the top of the card */\n  type: string\n  /** Main title of the card */\n  title: string\n  /** Optional subtitle, often used for author or additional context */\n  subTitle?: string\n  /** Main description text */\n  description: string\n  /** Maximum number of secondary labels to show before \"Show More\" */\n  secondaryLabelLimit?: number\n  /** Array of label-value pairs to display in the card footer */\n  values?: CardLabel[]\n  /** Whether to align the card to the left navigation */\n  isAlignToLeftNav?: boolean\n  /** Configuration for the collapsible description */\n  descriptionConfig?: DescriptionConfig\n  /** Character count threshold for truncating description (default 400) */\n  charCountCutoff?: number\n  /** Optional URL for making the title clickable */\n  href?: string\n  /** Target attribute for the title link */\n  target?: string\n  /** Icon element to display */\n  icon: React.ReactNode\n  /** Optional background image URL */\n  backgroundImage?: string\n  /** Force values section to appear below main content */\n  forceStackedLayout?: boolean\n  /** Optional CTA link(s) to display below description. Accepts a single config or an array. */\n  ctaLinkConfig?: GenericCardProps['ctaLinkConfig']\n}\n\n/**\n * HeaderCardV2 Component   OUT OF DATE COMMENTS\n *\n * A material-UI based card component for displaying detailed information with metadata.\n * This component supports responsive layouts, background images, and dynamic content\n * organization.\n *\n * Layout Structure:\n\n  ```\n┌───────────────────────────────────────────────────────────────┐\n│ ┌─────┐  Type Label                                           │\n│ │Icon │  Title                                                │\n│ │     │  Subtitle                                             │\n│ └─────┘                                                       │\n│         Description                     Metadata              │\n│         [Show More/Less]                --------              │\n│                                         Label 1    Value 1    │\n│         [External Site Button]          Label 2    Value 2    │\n└───────────────────────────────────────────────────────────────┘\n ```\n *\n * Features:\n * - Responsive layout with configurable breakpoints\n * - Optional background image with overlay\n * - Collapsible description text\n * - Right-aligned or stacked metadata section\n * - Call-to-action buttons\n * - SEO-friendly meta tags management\n *\n * Meta Tags Handling:\n * - Updates document title with card title\n * - Sets meta description from card description/subtitle\n * - Restores original meta data on component cleanup\n *\n * Layout Modes:\n * - Default: Icon + Content | Metadata (on desktop)\n * - Stacked: Full width content with metadata below\n * - Mobile: All sections stack vertically\n *\n * @component\n * @example\n * ```tsx\n * <HeaderCardV2\n *   type=\"Study\"\n *   title=\"Example Study\"\n *   description=\"Study description\"\n *   values={[['Status', 'Active'], ['Access', 'Public']]}\n *   icon={<StudyIcon />}\n *   ctaLinkConfig={{text: \"View Standard on External Website\", link: \"url\"}}\n * />\n * ```\n\n * Core component logic:\n * 1. Responsive Layout:\n *    - Uses MUI Grid for flexible layouts\n *    - Switches to stacked layout on mobile, when forceStackedLayout is true,\n *\n * 2. Meta Tags:\n *    - Manages document title and meta description\n *    - Preserves original values for cleanup\n *\n * 3. Content Sections:\n *    - Icon: Optional, maintains aspect ratio\n *    - Main Content: Type, title, subtitle, description\n *    - Metadata: Right-aligned or stacked key-value pairs\n *    - CTA Button: Optional button link to external site\n *\n * 4. Styling:\n *    - Background image support with overlay\n *    - Consistent spacing using MUI theme\n *    - Responsive typography\n *    - Optional left-nav alignment\n */\nconst HeaderCardV2 = forwardRef(function HeaderCardV2(\n  props: HeaderCardV2Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    // type,\n    title,\n    subTitle = '',\n    description,\n    values,\n    // secondaryLabelLimit,\n    isAlignToLeftNav,\n    descriptionConfig,\n    charCountCutoff,\n    href,\n    target,\n    icon,\n    backgroundImage,\n    forceStackedLayout = false,\n    ctaLinkConfig,\n  } = props\n\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  let useStackedLayout = false\n  if (forceStackedLayout || isMobile) {\n    useStackedLayout = true\n  } else {\n    // useStackedLayout = metadataHeight > descriptionHeight\n    // as per https://github.com/bridge2ai/b2ai-standards-registry/issues/210#issuecomment-2773706202,\n    // constrain metadata to 5-line expandable block\n  }\n\n  const descriptionConfiguration: DescriptionConfig = {\n    ...descriptionConfig,\n    showFullDescriptionByDefault:\n      descriptionConfig?.showFullDescriptionByDefault ?? false,\n  }\n  const metadataDescription = description || subTitle || undefined\n  useDocumentMetadata({\n    title,\n    description: metadataDescription,\n    priority: 100,\n  })\n\n  // ctaLink stuff - normalize to array\n  const ctaLinkConfigs = ctaLinkConfig\n    ? Array.isArray(ctaLinkConfig)\n      ? ctaLinkConfig\n      : [ctaLinkConfig]\n    : []\n  const ctaLinkBox =\n    ctaLinkConfigs.length > 0 ? (\n      <Box\n        sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', marginTop: '22px' }}\n      >\n        {ctaLinkConfigs.map((config, index) => (\n          <SmartButton\n            key={index}\n            variant=\"outlined\"\n            href={config?.href}\n            target={config?.target}\n            size=\"large\"\n            sx={{\n              color: '#FFF',\n              '&:hover': {\n                color: '#FFF',\n                textDecorationColor: '#FFF',\n                border: '2px solid white',\n              },\n              '&:focus': { color: '#FFF' },\n              textDecorationColor: '#FFF',\n              padding: '6px 24px',\n              border: '1px solid white',\n            }}\n          >\n            {config?.text}\n          </SmartButton>\n        ))}\n      </Box>\n    ) : null\n\n  return (\n    <Card\n      component={'div'}\n      ref={ref}\n      sx={{\n        borderRadius: 0,\n        boxShadow: 'none',\n        position: 'relative',\n        ...(backgroundImage && {\n          '&::before': {\n            content: '\"\"',\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            backgroundImage: `url(${backgroundImage})`,\n            backgroundSize: 'cover',\n            backgroundPosition: 'center',\n            opacity: 0.1,\n            zIndex: 0,\n          },\n        }),\n        ...(isAlignToLeftNav &&\n          {\n            // Add any special styles for aligned cards\n          }),\n      }}\n      className={`SRC-portalCard SRC-portalCardHeader ${\n        isAlignToLeftNav ? 'isAlignToLeftNav' : ''\n      }`}\n    >\n      <Box\n        sx={{\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '1400px',\n          display: 'grid',\n          gridTemplateColumns: '1fr 12fr 1fr',\n          '& > *': {\n            gridColumn: 2,\n          },\n          paddingBottom: '25px',\n        }}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'row',\n            alignItems: 'center',\n            minHeight: '64px', // Set minimum height to ensure proper centering space\n            gap: 1,\n          }}\n        >\n          {icon && (\n            <Box\n              sx={{\n                height: '120px',\n              }}\n            >\n              {icon}\n            </Box>\n          )}\n\n          <Box sx={{}}>\n            {/* Title */}\n            <Typography\n              sx={{\n                mb: 1,\n                fontSize: '2.5rem',\n                letterSpacing: '0.1em', // Add letter spacing\n                marginBottom: '0.6em',\n              }}\n            >\n              {href ? (\n                <SmartLink\n                  href={href}\n                  target={target}\n                  underline=\"hover\"\n                  color=\"inherit\"\n                >\n                  {title}\n                </SmartLink>\n              ) : (\n                title\n              )}\n            </Typography>\n            {/* Subtitle */}\n            {subTitle && (\n              <Typography\n                variant=\"body1\"\n                color=\"inherit\"\n                sx={{\n                  fontStyle: 'italic',\n                  fontSize: '1.5rem',\n                }}\n              >\n                {subTitle}\n              </Typography>\n            )}\n          </Box>\n        </Box>\n\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: useStackedLayout ? 'column' : 'row',\n            flexWrap: useStackedLayout ? 'nowrap' : 'wrap',\n            justifyContent: 'space-between',\n            alignItems: 'flex-start',\n            gap: 2,\n          }}\n        >\n          <Box\n            style={{\n              flexBasis: useStackedLayout ? '100%' : 'min(65ch, 100%)',\n              width: useStackedLayout ? '100%' : 'auto',\n            }}\n          >\n            <CollapsibleDescription\n              description={description}\n              descriptionSubTitle=\"\"\n              descriptionConfig={descriptionConfiguration}\n              charCountCutoff={charCountCutoff}\n            />\n            {ctaLinkBox}\n          </Box>\n          {values && (\n            <Box\n              sx={{\n                width: useStackedLayout ? '100%' : '30%',\n                marginTop: useStackedLayout ? 2 : 0,\n                alignItems: 'flex-start',\n              }}\n            >\n              <MetadataTable data={values} />\n            </Box>\n          )}\n        </Box>\n      </Box>\n    </Card>\n  )\n})\n\ntype MetadataTableProps = {\n  data: CardLabel[]\n}\n\nfunction MetadataTable({ data }: MetadataTableProps) {\n  return (\n    <table\n      style={{\n        width: '100%',\n        borderCollapse: 'collapse',\n      }}\n    >\n      <tbody>\n        {data.map((item, index) => (\n          <tr key={item.columnName || index}>\n            <td\n              style={{\n                width: '1%',\n                whiteSpace: 'nowrap',\n                padding: '0px 16px 8px 0',\n                verticalAlign: 'top',\n                fontWeight: 'bold',\n              }}\n            >\n              {item.columnDisplayName}\n            </td>\n            <td\n              style={{\n                width: 'auto',\n                paddingBottom: '12px',\n                verticalAlign: 'top',\n                wordBreak: 'break-word',\n              }}\n            >\n              {item.value}\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  )\n}\n\nexport default HeaderCardV2\n"],"mappings":"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"}
+{"version":3,"file":"HeaderCardV2.js","names":[],"sources":["../../../src/components/HeaderCard/HeaderCardV2.tsx"],"sourcesContent":["import { CardLabel } from '@/components/row_renderers/utils/CardFooter'\nimport React, { forwardRef, ForwardedRef } from 'react'\nimport {\n  Box,\n  Card,\n  Typography,\n  // Stack,\n  // ButtonProps,\n  useTheme,\n  useMediaQuery,\n} from '@mui/material'\nimport { DescriptionConfig } from '../CardContainerLogic'\nimport { CollapsibleDescription } from '../GenericCard/CollapsibleDescription'\nimport { GenericCardProps } from '@/components/GenericCard/GenericCard'\nimport { useDocumentMetadata } from '@/utils/context/DocumentMetadataContext'\nimport { SmartButton } from '../SmartLink/SmartButton'\nimport { SmartLink } from '../SmartLink/SmartLink'\n\nexport type HeaderCardV2Props = {\n  /** Type label displayed at the top of the card */\n  type: string\n  /** Main title of the card */\n  title: string\n  /** Optional subtitle, often used for author or additional context */\n  subTitle?: string\n  /** Main description text */\n  description: string\n  /** Maximum number of secondary labels to show before \"Show More\" */\n  secondaryLabelLimit?: number\n  /** Array of label-value pairs to display in the card footer */\n  values?: CardLabel[]\n  /** Whether to align the card to the left navigation */\n  isAlignToLeftNav?: boolean\n  /** Configuration for the collapsible description */\n  descriptionConfig?: DescriptionConfig\n  /** Character count threshold for truncating description (default 400) */\n  charCountCutoff?: number\n  /** Optional URL for making the title clickable */\n  href?: string\n  /** Target attribute for the title link */\n  target?: string\n  /** Icon element to display */\n  icon: React.ReactNode\n  /** Optional background image URL */\n  backgroundImage?: string\n  /** Force values section to appear below main content */\n  forceStackedLayout?: boolean\n  /** Optional CTA link(s) to display below description. Accepts a single config or an array. */\n  ctaLinkConfig?: GenericCardProps['ctaLinkConfig']\n}\n\n/**\n * HeaderCardV2 Component   OUT OF DATE COMMENTS\n *\n * A material-UI based card component for displaying detailed information with metadata.\n * This component supports responsive layouts, background images, and dynamic content\n * organization.\n *\n * Layout Structure:\n\n  ```\n┌───────────────────────────────────────────────────────────────┐\n│ ┌─────┐  Type Label                                           │\n│ │Icon │  Title                                                │\n│ │     │  Subtitle                                             │\n│ └─────┘                                                       │\n│         Description                     Metadata              │\n│         [Show More/Less]                --------              │\n│                                         Label 1    Value 1    │\n│         [External Site Button]          Label 2    Value 2    │\n└───────────────────────────────────────────────────────────────┘\n ```\n *\n * Features:\n * - Responsive layout with configurable breakpoints\n * - Optional background image with overlay\n * - Collapsible description text\n * - Right-aligned or stacked metadata section\n * - Call-to-action buttons\n * - SEO-friendly meta tags management\n *\n * Meta Tags Handling:\n * - Updates document title with card title\n * - Sets meta description from card description/subtitle\n * - Restores original meta data on component cleanup\n *\n * Layout Modes:\n * - Default: Icon + Content | Metadata (on desktop)\n * - Stacked: Full width content with metadata below\n * - Mobile: All sections stack vertically\n *\n * @component\n * @example\n * ```tsx\n * <HeaderCardV2\n *   type=\"Study\"\n *   title=\"Example Study\"\n *   description=\"Study description\"\n *   values={[['Status', 'Active'], ['Access', 'Public']]}\n *   icon={<StudyIcon />}\n *   ctaLinkConfig={{text: \"View Standard on External Website\", link: \"url\"}}\n * />\n * ```\n\n * Core component logic:\n * 1. Responsive Layout:\n *    - Uses MUI Grid for flexible layouts\n *    - Switches to stacked layout on mobile, when forceStackedLayout is true,\n *\n * 2. Meta Tags:\n *    - Manages document title and meta description\n *    - Preserves original values for cleanup\n *\n * 3. Content Sections:\n *    - Icon: Optional, maintains aspect ratio\n *    - Main Content: Type, title, subtitle, description\n *    - Metadata: Right-aligned or stacked key-value pairs\n *    - CTA Button: Optional button link to external site\n *\n * 4. Styling:\n *    - Background image support with overlay\n *    - Consistent spacing using MUI theme\n *    - Responsive typography\n *    - Optional left-nav alignment\n */\nconst HeaderCardV2 = forwardRef(function HeaderCardV2(\n  props: HeaderCardV2Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    // type,\n    title,\n    subTitle = '',\n    description,\n    values,\n    // secondaryLabelLimit,\n    isAlignToLeftNav,\n    descriptionConfig,\n    charCountCutoff,\n    href,\n    target,\n    icon,\n    backgroundImage,\n    forceStackedLayout = false,\n    ctaLinkConfig,\n  } = props\n\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  let useStackedLayout = false\n  if (forceStackedLayout || isMobile) {\n    useStackedLayout = true\n  } else {\n    // useStackedLayout = metadataHeight > descriptionHeight\n    // as per https://github.com/bridge2ai/b2ai-standards-registry/issues/210#issuecomment-2773706202,\n    // constrain metadata to 5-line expandable block\n  }\n\n  const descriptionConfiguration: DescriptionConfig = {\n    ...descriptionConfig,\n    showFullDescriptionByDefault:\n      descriptionConfig?.showFullDescriptionByDefault ?? false,\n  }\n  const metadataDescription = description || subTitle || undefined\n  useDocumentMetadata({\n    title,\n    description: metadataDescription,\n    priority: 100,\n  })\n\n  // ctaLink stuff - normalize to array\n  const ctaLinkConfigs = ctaLinkConfig\n    ? Array.isArray(ctaLinkConfig)\n      ? ctaLinkConfig\n      : [ctaLinkConfig]\n    : []\n  const ctaLinkBox =\n    ctaLinkConfigs.length > 0 ? (\n      <Box\n        sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', marginTop: '22px' }}\n      >\n        {ctaLinkConfigs.map((config, index) => (\n          <SmartButton\n            key={index}\n            variant=\"outlined\"\n            href={config?.href}\n            target={config?.target}\n            size=\"large\"\n            sx={{\n              color: '#FFF',\n              '&:hover': {\n                color: '#FFF',\n                textDecorationColor: '#FFF',\n                border: '2px solid white',\n              },\n              '&:focus': { color: '#FFF' },\n              textDecorationColor: '#FFF',\n              padding: '6px 24px',\n              border: '1px solid white',\n            }}\n          >\n            {config?.text}\n          </SmartButton>\n        ))}\n      </Box>\n    ) : null\n\n  return (\n    <Card\n      component={'div'}\n      ref={ref}\n      sx={{\n        borderRadius: 0,\n        boxShadow: 'none',\n        position: 'relative',\n        ...(backgroundImage && {\n          '&::before': {\n            content: '\"\"',\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            backgroundImage: `url(${backgroundImage})`,\n            backgroundSize: 'cover',\n            backgroundPosition: 'center',\n            opacity: 0.1,\n            zIndex: 0,\n          },\n        }),\n        ...(isAlignToLeftNav &&\n          {\n            // Add any special styles for aligned cards\n          }),\n      }}\n      className={`SRC-portalCard SRC-portalCardHeader ${\n        isAlignToLeftNav ? 'isAlignToLeftNav' : ''\n      }`}\n    >\n      <Box\n        sx={{\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '1400px',\n          display: 'grid',\n          gridTemplateColumns: '1fr 12fr 1fr',\n          '& > *': {\n            gridColumn: 2,\n          },\n          paddingBottom: '25px',\n        }}\n      >\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'row',\n            alignItems: 'center',\n            minHeight: '64px', // Set minimum height to ensure proper centering space\n            gap: 1,\n          }}\n        >\n          {icon && (\n            <Box\n              sx={{\n                height: '120px',\n              }}\n            >\n              {icon}\n            </Box>\n          )}\n\n          <Box sx={{}}>\n            {/* Title */}\n            <Typography\n              sx={{\n                mb: 1,\n                fontSize: '2.5rem',\n                letterSpacing: '0.1em', // Add letter spacing\n                marginBottom: '0.6em',\n              }}\n            >\n              {href ? (\n                <SmartLink\n                  href={href}\n                  target={target}\n                  underline=\"hover\"\n                  color=\"inherit\"\n                >\n                  {title}\n                </SmartLink>\n              ) : (\n                title\n              )}\n            </Typography>\n            {/* Subtitle */}\n            {subTitle && (\n              <Typography\n                variant=\"body1\"\n                color=\"inherit\"\n                sx={{\n                  fontStyle: 'italic',\n                  fontSize: '1.5rem',\n                }}\n              >\n                {subTitle}\n              </Typography>\n            )}\n          </Box>\n        </Box>\n\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: useStackedLayout ? 'column' : 'row',\n            flexWrap: useStackedLayout ? 'nowrap' : 'wrap',\n            justifyContent: 'space-between',\n            alignItems: 'flex-start',\n            gap: 2,\n          }}\n        >\n          <Box\n            style={{\n              flexBasis: useStackedLayout ? '100%' : 'min(65ch, 100%)',\n              width: useStackedLayout ? '100%' : 'auto',\n            }}\n          >\n            <CollapsibleDescription\n              description={description}\n              descriptionSubTitle=\"\"\n              descriptionConfig={descriptionConfiguration}\n              charCountCutoff={charCountCutoff}\n            />\n            {ctaLinkBox}\n          </Box>\n          {values && (\n            <Box\n              sx={{\n                width: useStackedLayout ? '100%' : '30%',\n                marginTop: useStackedLayout ? 2 : 0,\n                alignItems: 'flex-start',\n              }}\n            >\n              <MetadataTable data={values} />\n            </Box>\n          )}\n        </Box>\n      </Box>\n    </Card>\n  )\n})\n\ntype MetadataTableProps = {\n  data: CardLabel[]\n}\n\nfunction MetadataTable({ data }: MetadataTableProps) {\n  return (\n    <table\n      style={{\n        width: '100%',\n        borderCollapse: 'collapse',\n      }}\n    >\n      <tbody>\n        {data.map((item, index) => (\n          <tr key={item.columnName || index}>\n            <td\n              style={{\n                width: '1%',\n                whiteSpace: 'nowrap',\n                padding: '0px 16px 8px 0',\n                verticalAlign: 'top',\n                fontWeight: 'bold',\n              }}\n            >\n              {item.columnDisplayName}\n            </td>\n            <td\n              style={{\n                width: 'auto',\n                paddingBottom: '12px',\n                verticalAlign: 'top',\n                wordBreak: 'break-word',\n              }}\n            >\n              {item.value}\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  )\n}\n\nexport default HeaderCardV2\n"],"mappings":"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"}

package/dist/components/HeaderCard.d.ts

@@ -1,7 +1,7 @@
 import { CardLabel } from '@/components/row_renderers/utils/CardFooter';
 import { SxProps } from '@mui/material';
-import { DescriptionConfig } from './CardContainerLogic';
 import { GenericCardProps } from '@/components/GenericCard/GenericCard';
+import { DescriptionConfig } from './CardContainerLogic';
 import { SustainabilityScorecardProps } from './SustainabilityScorecard/SustainabilityScorecard';
 export type HeaderCardVariant = 'HeaderCard' | 'HeaderCardV2';
 export type HeaderCardProps = {
@@ -16,12 +16,17 @@ export type HeaderCardProps = {
     charCountCutoff?: number;
     href?: string;
     target?: string;
+    titleAsFileHandleLinkConfiguration?: GenericCardProps['titleAsFileHandleLinkConfiguration'];
+    titleAreaRightContent?: React.ReactNode;
+    descriptionSubTitle?: string;
     icon: React.ReactNode;
     headerCardVariant?: HeaderCardVariant;
     cardTopContent?: React.ReactNode;
     ctaLinkConfig?: GenericCardProps['ctaLinkConfig'];
     cardTopButtons?: React.ReactNode;
     sustainabilityScorecard?: SustainabilityScorecardProps;
+    renderedIconList?: React.ReactNode;
+    cardTypeAdornment?: React.ReactNode;
     doiUri?: string;
     sx?: SxProps;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderCard.d.ts","sourceRoot":"","sources":["../../src/components/HeaderCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAA;AACvE,OAAO,EAAO,OAAO,EAAE,MAAM,eAAe,CAAA;AAI5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAA;AAEvE,OAAgC,EAC9B,4BAA4B,EAC7B,MAAM,mDAAmD,CAAA;AAG1D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,cAAc,CAAA;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,MAAM,CAAC,EAAE,SAAS,EAAE,CAAA;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IACjD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,uBAAuB,CAAC,EAAE,4BAA4B,CAAA;IACtD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,OAAO,CAAA;CACb,CAAA;AA6ID,QAAA,MAAM,UAAU,4GASd,CAAA;AAEF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"HeaderCard.d.ts","sourceRoot":"","sources":["../../src/components/HeaderCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAA;AACvE,OAAO,EAAO,OAAO,EAAE,MAAM,eAAe,CAAA;AAI5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAA;AAEvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAGxD,OAAgC,EAC9B,4BAA4B,EAC7B,MAAM,mDAAmD,CAAA;AAG1D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,cAAc,CAAA;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,MAAM,CAAC,EAAE,SAAS,EAAE,CAAA;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kCAAkC,CAAC,EAAE,gBAAgB,CAAC,oCAAoC,CAAC,CAAA;IAC3F,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvC,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IACjD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,uBAAuB,CAAC,EAAE,4BAA4B,CAAA;IACtD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,OAAO,CAAA;CACb,CAAA;AA4LD,QAAA,MAAM,UAAU,4GASd,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/components/HeaderCard.js

@@ -2,45 +2,46 @@ import { useDocumentMetadata as e } from "../utils/context/DocumentMetadataConte
 import t from "./row_renderers/utils/CardFooter.js";
 import "./row_renderers/utils/index.js";
 import { SmartLink as n } from "./SmartLink/SmartLink.js";
-import { CollapsibleDescription as r } from "./GenericCard/CollapsibleDescription.js";
-import i from "./HeaderCard/HeaderCardV2.js";
-import a from "./SustainabilityScorecard/SustainabilityScorecard.js";
-import { forwardRef as o } from "react";
-import { Box as s } from "@mui/material";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { FileHandleLink as r } from "./widgets/FileHandleLink.js";
+import { CollapsibleDescription as i } from "./GenericCard/CollapsibleDescription.js";
+import a from "./HeaderCard/HeaderCardV2.js";
+import o from "./SustainabilityScorecard/SustainabilityScorecard.js";
+import { forwardRef as s } from "react";
+import { Box as c } from "@mui/material";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/HeaderCard.tsx
-var d = o(function(i, o) {
-	let { type: d, title: f, subTitle: p = "", description: m, values: h, secondaryLabelLimit: g, isAlignToLeftNav: _, descriptionConfig: v, href: y, target: b, icon: x, cardTopContent: S, cardTopButtons: C, sustainabilityScorecard: w, sx: T } = i, E = !!w, D = {
-		...v,
-		showFullDescriptionByDefault: v?.showFullDescriptionByDefault ?? !0
+var f = s(function(a, s) {
+	let { type: f, title: p, subTitle: m = "", description: h, values: g, secondaryLabelLimit: _, isAlignToLeftNav: v, descriptionConfig: y, href: b, target: x, titleAsFileHandleLinkConfiguration: S, titleAreaRightContent: C, descriptionSubTitle: w = "", icon: T, cardTopContent: E, cardTopButtons: D, sustainabilityScorecard: O, renderedIconList: k, cardTypeAdornment: A, sx: j } = a, M = !!O, N = {
+		...y,
+		showFullDescriptionByDefault: y?.showFullDescriptionByDefault ?? !0
 	};
 	return e({
-		title: f,
-		description: m || p || void 0,
+		title: p,
+		description: h || m || void 0,
 		priority: 100
-	}), /* @__PURE__ */ l(s, {
-		ref: o,
-		className: `SRC-portalCard SRC-portalCardHeader ${_ ? "isAlignToLeftNav" : ""}`,
-		sx: T,
-		children: /* @__PURE__ */ u("div", {
+	}), /* @__PURE__ */ u(c, {
+		ref: s,
+		className: `SRC-portalCard SRC-portalCardHeader ${v ? "isAlignToLeftNav" : ""}`,
+		sx: j,
+		children: /* @__PURE__ */ d("div", {
 			className: "container-fluid container-full-width",
-			children: [/* @__PURE__ */ l(s, {
+			children: [/* @__PURE__ */ u(c, {
 				sx: {
 					display: "flex",
 					gap: "10px",
 					float: "right"
 				},
-				children: C
-			}), /* @__PURE__ */ l("div", {
+				children: D
+			}), /* @__PURE__ */ u("div", {
 				className: "row",
-				children: /* @__PURE__ */ l("div", {
+				children: /* @__PURE__ */ u("div", {
 					className: "col-md-offset-1 col-md-10",
-					children: /* @__PURE__ */ u("div", {
+					children: /* @__PURE__ */ d("div", {
 						className: "SRC-portalCardMain",
-						children: [!E && x, /* @__PURE__ */ u(s, {
+						children: [!M && T, /* @__PURE__ */ d(c, {
 							sx: {
 								width: "100%",
-								...E && {
+								...M && {
 									display: "flex",
 									flexDirection: {
 										xs: "column",
@@ -48,60 +49,90 @@ var d = o(function(i, o) {
 									}
 								}
 							},
-							children: [/* @__PURE__ */ u("div", {
-								className: "SRC-cardContent",
-								style: { marginLeft: "15px" },
-								children: [
-									/* @__PURE__ */ l("div", {
-										className: "SRC-type",
-										children: d
-									}),
-									/* @__PURE__ */ l("div", { children: /* @__PURE__ */ l("h3", {
-										className: "SRC-boldText",
-										style: { margin: "none" },
-										children: y ? /* @__PURE__ */ l(n, {
-											href: y ?? "",
-											className: "highlight-link",
-											target: b,
-											children: f
-										}) : /* @__PURE__ */ l("span", { children: f })
-									}) }),
-									p && /* @__PURE__ */ u("div", {
-										className: "SRC-author",
-										children: [
-											" ",
-											p,
-											" "
-										]
-									}),
-									/* @__PURE__ */ l(r, {
-										description: m,
-										descriptionSubTitle: "",
-										descriptionConfig: D
-									}),
-									w && /* @__PURE__ */ l(a, {
-										metricsConfig: w.metricsConfig,
-										searchParamKey: w.searchParamKey,
-										filterColumn: w.filterColumn,
-										scoreDescriptorColumnName: w.scoreDescriptorColumnName,
-										queryRequest: w.queryRequest,
-										sustainabilityReportLink: w.sustainabilityReportLink,
-										sx: {
-											background: "rgba(0, 0, 0, 0.10)",
-											marginTop: "30px"
-										}
-									})
-								]
-							}), (h || S) && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", { style: {
+							children: [/* @__PURE__ */ d(c, {
+								sx: {
+									display: "flex",
+									flexDirection: "row",
+									width: "100%"
+								},
+								children: [/* @__PURE__ */ d("div", {
+									className: "SRC-cardContent",
+									style: {
+										marginLeft: "15px",
+										flex: 1,
+										minWidth: 0
+									},
+									children: [
+										/* @__PURE__ */ d(c, {
+											sx: {
+												display: "flex",
+												flexDirection: "row",
+												alignItems: "center",
+												gap: "10px"
+											},
+											children: [/* @__PURE__ */ u("div", {
+												className: "SRC-type",
+												children: f
+											}), A]
+										}),
+										/* @__PURE__ */ u(c, {
+											sx: { "& .icon-list.themed path, & .icon-list.themed circle": { fill: "white" } },
+											children: k
+										}),
+										/* @__PURE__ */ u("div", { children: /* @__PURE__ */ u("h3", {
+											className: "SRC-boldText",
+											style: { margin: "none" },
+											children: S ? /* @__PURE__ */ u(r, {
+												fileHandleAssociation: S.fileHandleAssociation,
+												showDownloadIcon: S.showDownloadIcon,
+												displayValue: p
+											}) : b ? /* @__PURE__ */ u(n, {
+												href: b ?? "",
+												className: "highlight-link",
+												target: x,
+												children: p
+											}) : /* @__PURE__ */ u("span", { children: p })
+										}) }),
+										m && /* @__PURE__ */ d("div", {
+											className: "SRC-author",
+											children: [
+												" ",
+												m,
+												" "
+											]
+										}),
+										/* @__PURE__ */ u(i, {
+											description: h,
+											descriptionSubTitle: w,
+											descriptionConfig: N
+										}),
+										O && /* @__PURE__ */ u(o, {
+											metricsConfig: O.metricsConfig,
+											searchParamKey: O.searchParamKey,
+											filterColumn: O.filterColumn,
+											scoreDescriptorColumnName: O.scoreDescriptorColumnName,
+											queryRequest: O.queryRequest,
+											sustainabilityReportLink: O.sustainabilityReportLink,
+											sx: {
+												background: "rgba(0, 0, 0, 0.10)",
+												marginTop: "30px"
+											}
+										})
+									]
+								}), C && /* @__PURE__ */ u("div", {
+									className: "SRC-cardTitleAreaDetails",
+									children: C
+								})]
+							}), (g || E) && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", { style: {
 								borderTop: "1px solid rgba(26, 28, 41, 0.2)",
 								marginTop: "15px",
 								paddingTop: "5px"
-							} }), /* @__PURE__ */ u("div", {
+							} }), /* @__PURE__ */ d("div", {
 								className: "SRC-cardContent",
-								children: [S, h && /* @__PURE__ */ l(t, {
+								children: [E, g && /* @__PURE__ */ u(t, {
 									isHeader: !0,
-									secondaryLabelLimit: g,
-									values: h
+									secondaryLabelLimit: _,
+									values: g
 								})]
 							})] })]
 						})]
@@ -110,14 +141,14 @@ var d = o(function(i, o) {
 			})]
 		})
 	});
-}), f = o(function(e, t) {
+}), p = s(function(e, t) {
 	let { headerCardVariant: n = "HeaderCard" } = e;
-	return l(n === "HeaderCardV2" ? i : d, {
+	return u(n === "HeaderCardV2" ? a : f, {
 		...e,
 		ref: t
 	});
 });
 //#endregion
-export { f as default };
+export { p as default };
 
 //# sourceMappingURL=HeaderCard.js.map

package/dist/components/HeaderCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCard.js","names":[],"sources":["../../src/components/HeaderCard.tsx"],"sourcesContent":["import { CardLabel } from '@/components/row_renderers/utils/CardFooter'\nimport { Box, SxProps } from '@mui/material'\nimport { SmartLink } from './SmartLink/SmartLink'\nimport { ForwardedRef, forwardRef } from 'react'\nimport { CardFooter } from './row_renderers/utils'\nimport { DescriptionConfig } from './CardContainerLogic'\nimport { CollapsibleDescription } from './GenericCard/CollapsibleDescription'\nimport { GenericCardProps } from '@/components/GenericCard/GenericCard'\nimport HeaderCardV2 from './HeaderCard/HeaderCardV2'\nimport SustainabilityScorecard, {\n  SustainabilityScorecardProps,\n} from './SustainabilityScorecard/SustainabilityScorecard'\nimport { useDocumentMetadata } from '@/utils/context/DocumentMetadataContext'\n\nexport type HeaderCardVariant = 'HeaderCard' | 'HeaderCardV2'\n\nexport type HeaderCardProps = {\n  type: string\n  title: string\n  subTitle?: string\n  description: string\n  secondaryLabelLimit?: number\n  values?: CardLabel[]\n  isAlignToLeftNav?: boolean\n  descriptionConfig?: DescriptionConfig\n  charCountCutoff?: number\n  href?: string\n  target?: string\n  icon: React.ReactNode\n  headerCardVariant?: HeaderCardVariant\n  cardTopContent?: React.ReactNode\n  ctaLinkConfig?: GenericCardProps['ctaLinkConfig']\n  cardTopButtons?: React.ReactNode\n  sustainabilityScorecard?: SustainabilityScorecardProps\n  doiUri?: string\n  sx?: SxProps\n}\n\nconst HeaderCardClassic = forwardRef(function HeaderCardClassic(\n  props: HeaderCardProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    type,\n    title,\n    subTitle = '',\n    description,\n    values,\n    secondaryLabelLimit,\n    isAlignToLeftNav,\n    descriptionConfig,\n    href,\n    target,\n    icon,\n    cardTopContent,\n    cardTopButtons,\n    sustainabilityScorecard,\n    sx,\n  } = props\n\n  const hideIcon = Boolean(sustainabilityScorecard)\n  const descriptionConfiguration: DescriptionConfig = {\n    ...descriptionConfig,\n    showFullDescriptionByDefault:\n      descriptionConfig?.showFullDescriptionByDefault ?? true,\n  }\n\n  const metadataDescription = description || subTitle || undefined\n  useDocumentMetadata({\n    title,\n    description: metadataDescription,\n    priority: 100,\n  })\n\n  return (\n    <Box\n      ref={ref}\n      className={`SRC-portalCard SRC-portalCardHeader ${\n        isAlignToLeftNav ? 'isAlignToLeftNav' : ''\n      }`}\n      sx={sx}\n    >\n      <div className=\"container-fluid container-full-width\">\n        <Box\n          sx={{\n            display: 'flex',\n            gap: '10px',\n            float: 'right',\n          }}\n        >\n          {cardTopButtons}\n        </Box>\n        <div className=\"row\">\n          <div className=\"col-md-offset-1 col-md-10\">\n            <div className=\"SRC-portalCardMain\">\n              {!hideIcon && icon}\n              <Box\n                sx={{\n                  width: '100%',\n                  ...(hideIcon && {\n                    display: 'flex',\n                    flexDirection: { xs: 'column', sm: 'row' },\n                  }),\n                }}\n              >\n                <div className=\"SRC-cardContent\" style={{ marginLeft: '15px' }}>\n                  <div className=\"SRC-type\">{type}</div>\n                  <div>\n                    <h3 className=\"SRC-boldText\" style={{ margin: 'none' }}>\n                      {href ? (\n                        <SmartLink\n                          href={href ?? ''}\n                          className=\"highlight-link\"\n                          target={target}\n                        >\n                          {title}\n                        </SmartLink>\n                      ) : (\n                        <span>{title}</span>\n                      )}\n                    </h3>\n                  </div>\n                  {subTitle && <div className=\"SRC-author\"> {subTitle} </div>}\n                  <CollapsibleDescription\n                    description={description}\n                    descriptionSubTitle=\"\"\n                    descriptionConfig={descriptionConfiguration}\n                  />\n                  {sustainabilityScorecard && (\n                    <SustainabilityScorecard\n                      metricsConfig={sustainabilityScorecard.metricsConfig}\n                      searchParamKey={sustainabilityScorecard.searchParamKey}\n                      filterColumn={sustainabilityScorecard.filterColumn}\n                      scoreDescriptorColumnName={\n                        sustainabilityScorecard.scoreDescriptorColumnName\n                      }\n                      queryRequest={sustainabilityScorecard.queryRequest}\n                      sustainabilityReportLink={\n                        sustainabilityScorecard.sustainabilityReportLink\n                      }\n                      sx={{\n                        background: 'rgba(0, 0, 0, 0.10)',\n                        marginTop: '30px',\n                      }}\n                    />\n                  )}\n                </div>\n                {(values || cardTopContent) && (\n                  <>\n                    <div\n                      style={{\n                        borderTop: '1px solid rgba(26, 28, 41, 0.2)',\n                        marginTop: '15px',\n                        paddingTop: '5px',\n                      }}\n                    />\n                    <div className=\"SRC-cardContent\">\n                      {cardTopContent}\n                      {values && (\n                        <CardFooter\n                          isHeader={true}\n                          secondaryLabelLimit={secondaryLabelLimit}\n                          values={values}\n                        />\n                      )}\n                    </div>\n                  </>\n                )}\n              </Box>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Box>\n  )\n})\n\nconst HeaderCard = forwardRef(function HeaderCard(\n  props: HeaderCardProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { headerCardVariant = 'HeaderCard' } = props\n  if (headerCardVariant === 'HeaderCardV2') {\n    return <HeaderCardV2 {...props} ref={ref} />\n  }\n  return <HeaderCardClassic {...props} ref={ref} />\n})\n\nexport default HeaderCard\n"],"mappings":";;;;;;;;;;;AAsCA,IAAM,IAAoB,EAAW,SACnC,GACA,GACA;CACA,IAAM,EACJ,SACA,UACA,cAAW,IACX,gBACA,WACA,wBACA,qBACA,sBACA,SACA,WACA,SACA,mBACA,mBACA,4BACA,UACE,GAEE,IAAW,EAAQ,GACnB,IAA8C;EAClD,GAAG;EACH,8BACE,GAAmB,gCAAgC;EACtD;AASD,QANA,EAAoB;EAClB;EACA,aAH0B,KAAe,KAAY,KAAA;EAIrD,UAAU;EACX,CAAC,EAGA,kBAAC,GAAD;EACO;EACL,WAAW,uCACT,IAAmB,qBAAqB;EAEtC;YAEJ,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,KAAK;KACL,OAAO;KACR;cAEA;IACG,CAAA,EACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,CAAC,KAAY,GACd,kBAAC,GAAD;OACE,IAAI;QACF,OAAO;QACP,GAAI,KAAY;SACd,SAAS;SACT,eAAe;UAAE,IAAI;UAAU,IAAI;UAAO;SAC3C;QACF;iBAPH,CASE,kBAAC,OAAD;QAAK,WAAU;QAAkB,OAAO,EAAE,YAAY,QAAQ;kBAA9D;SACE,kBAAC,OAAD;UAAK,WAAU;oBAAY;UAAW,CAAA;SACtC,kBAAC,OAAD,EAAA,UACE,kBAAC,MAAD;UAAI,WAAU;UAAe,OAAO,EAAE,QAAQ,QAAQ;oBACnD,IACC,kBAAC,GAAD;WACE,MAAM,KAAQ;WACd,WAAU;WACF;qBAEP;WACS,CAAA,GAEZ,kBAAC,QAAD,EAAA,UAAO,GAAa,CAAA;UAEnB,CAAA,EACD,CAAA;SACL,KAAY,kBAAC,OAAD;UAAK,WAAU;oBAAf;WAA4B;WAAE;WAAS;WAAO;;SAC3D,kBAAC,GAAD;UACe;UACb,qBAAoB;UACpB,mBAAmB;UACnB,CAAA;SACD,KACC,kBAAC,GAAD;UACE,eAAe,EAAwB;UACvC,gBAAgB,EAAwB;UACxC,cAAc,EAAwB;UACtC,2BACE,EAAwB;UAE1B,cAAc,EAAwB;UACtC,0BACE,EAAwB;UAE1B,IAAI;WACF,YAAY;WACZ,WAAW;WACZ;UACD,CAAA;SAEA;YACJ,KAAU,MACV,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD,EACE,OAAO;QACL,WAAW;QACX,WAAW;QACX,YAAY;QACb,EACD,CAAA,EACF,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACG,GACA,KACC,kBAAC,GAAD;SACE,UAAU;SACW;SACb;SACR,CAAA,CAEA;UACL,EAAA,CAAA,CAED;SACF;;KACF,CAAA;IACF,CAAA,CACF;;EACF,CAAA;EAER,EAEI,IAAa,EAAW,SAC5B,GACA,GACA;CACA,IAAM,EAAE,uBAAoB,iBAAiB;AAI7C,QAFS,EADL,MAAsB,iBAChB,IAEF,GAFC;EAAc,GAAI;EAAY;EAAO,CAAA;EAG9C"}
+{"version":3,"file":"HeaderCard.js","names":[],"sources":["../../src/components/HeaderCard.tsx"],"sourcesContent":["import { CardLabel } from '@/components/row_renderers/utils/CardFooter'\nimport { Box, SxProps } from '@mui/material'\nimport { SmartLink } from './SmartLink/SmartLink'\nimport { ForwardedRef, forwardRef } from 'react'\nimport { FileHandleLink } from './widgets/FileHandleLink'\nimport { GenericCardProps } from '@/components/GenericCard/GenericCard'\nimport { CardFooter } from './row_renderers/utils'\nimport { DescriptionConfig } from './CardContainerLogic'\nimport { CollapsibleDescription } from './GenericCard/CollapsibleDescription'\nimport HeaderCardV2 from './HeaderCard/HeaderCardV2'\nimport SustainabilityScorecard, {\n  SustainabilityScorecardProps,\n} from './SustainabilityScorecard/SustainabilityScorecard'\nimport { useDocumentMetadata } from '@/utils/context/DocumentMetadataContext'\n\nexport type HeaderCardVariant = 'HeaderCard' | 'HeaderCardV2'\n\nexport type HeaderCardProps = {\n  type: string\n  title: string\n  subTitle?: string\n  description: string\n  secondaryLabelLimit?: number\n  values?: CardLabel[]\n  isAlignToLeftNav?: boolean\n  descriptionConfig?: DescriptionConfig\n  charCountCutoff?: number\n  href?: string\n  target?: string\n  titleAsFileHandleLinkConfiguration?: GenericCardProps['titleAsFileHandleLinkConfiguration']\n  titleAreaRightContent?: React.ReactNode\n  descriptionSubTitle?: string\n  icon: React.ReactNode\n  headerCardVariant?: HeaderCardVariant\n  cardTopContent?: React.ReactNode\n  ctaLinkConfig?: GenericCardProps['ctaLinkConfig']\n  cardTopButtons?: React.ReactNode\n  sustainabilityScorecard?: SustainabilityScorecardProps\n  renderedIconList?: React.ReactNode\n  cardTypeAdornment?: React.ReactNode\n  doiUri?: string\n  sx?: SxProps\n}\n\nconst HeaderCardClassic = forwardRef(function HeaderCardClassic(\n  props: HeaderCardProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    type,\n    title,\n    subTitle = '',\n    description,\n    values,\n    secondaryLabelLimit,\n    isAlignToLeftNav,\n    descriptionConfig,\n    href,\n    target,\n    titleAsFileHandleLinkConfiguration,\n    titleAreaRightContent,\n    descriptionSubTitle = '',\n    icon,\n    cardTopContent,\n    cardTopButtons,\n    sustainabilityScorecard,\n    renderedIconList,\n    cardTypeAdornment,\n    sx,\n  } = props\n\n  const hideIcon = Boolean(sustainabilityScorecard)\n  const descriptionConfiguration: DescriptionConfig = {\n    ...descriptionConfig,\n    showFullDescriptionByDefault:\n      descriptionConfig?.showFullDescriptionByDefault ?? true,\n  }\n\n  const metadataDescription = description || subTitle || undefined\n  useDocumentMetadata({\n    title,\n    description: metadataDescription,\n    priority: 100,\n  })\n\n  return (\n    <Box\n      ref={ref}\n      className={`SRC-portalCard SRC-portalCardHeader ${\n        isAlignToLeftNav ? 'isAlignToLeftNav' : ''\n      }`}\n      sx={sx}\n    >\n      <div className=\"container-fluid container-full-width\">\n        <Box\n          sx={{\n            display: 'flex',\n            gap: '10px',\n            float: 'right',\n          }}\n        >\n          {cardTopButtons}\n        </Box>\n        <div className=\"row\">\n          <div className=\"col-md-offset-1 col-md-10\">\n            <div className=\"SRC-portalCardMain\">\n              {!hideIcon && icon}\n              <Box\n                sx={{\n                  width: '100%',\n                  ...(hideIcon && {\n                    display: 'flex',\n                    flexDirection: { xs: 'column', sm: 'row' },\n                  }),\n                }}\n              >\n                <Box\n                  sx={{ display: 'flex', flexDirection: 'row', width: '100%' }}\n                >\n                  <div\n                    className=\"SRC-cardContent\"\n                    style={{ marginLeft: '15px', flex: 1, minWidth: 0 }}\n                  >\n                    <Box\n                      sx={{\n                        display: 'flex',\n                        flexDirection: 'row',\n                        alignItems: 'center',\n                        gap: '10px',\n                      }}\n                    >\n                      <div className=\"SRC-type\">{type}</div>\n                      {cardTypeAdornment}\n                    </Box>\n                    <Box\n                      sx={{\n                        '& .icon-list.themed path, & .icon-list.themed circle':\n                          {\n                            fill: 'white',\n                          },\n                      }}\n                    >\n                      {renderedIconList}\n                    </Box>\n                    <div>\n                      <h3 className=\"SRC-boldText\" style={{ margin: 'none' }}>\n                        {titleAsFileHandleLinkConfiguration ? (\n                          <FileHandleLink\n                            fileHandleAssociation={\n                              titleAsFileHandleLinkConfiguration.fileHandleAssociation\n                            }\n                            showDownloadIcon={\n                              titleAsFileHandleLinkConfiguration.showDownloadIcon\n                            }\n                            displayValue={title}\n                          />\n                        ) : href ? (\n                          <SmartLink\n                            href={href ?? ''}\n                            className=\"highlight-link\"\n                            target={target}\n                          >\n                            {title}\n                          </SmartLink>\n                        ) : (\n                          <span>{title}</span>\n                        )}\n                      </h3>\n                    </div>\n                    {subTitle && <div className=\"SRC-author\"> {subTitle} </div>}\n                    <CollapsibleDescription\n                      description={description}\n                      descriptionSubTitle={descriptionSubTitle}\n                      descriptionConfig={descriptionConfiguration}\n                    />\n                    {sustainabilityScorecard && (\n                      <SustainabilityScorecard\n                        metricsConfig={sustainabilityScorecard.metricsConfig}\n                        searchParamKey={sustainabilityScorecard.searchParamKey}\n                        filterColumn={sustainabilityScorecard.filterColumn}\n                        scoreDescriptorColumnName={\n                          sustainabilityScorecard.scoreDescriptorColumnName\n                        }\n                        queryRequest={sustainabilityScorecard.queryRequest}\n                        sustainabilityReportLink={\n                          sustainabilityScorecard.sustainabilityReportLink\n                        }\n                        sx={{\n                          background: 'rgba(0, 0, 0, 0.10)',\n                          marginTop: '30px',\n                        }}\n                      />\n                    )}\n                  </div>\n                  {titleAreaRightContent && (\n                    <div className=\"SRC-cardTitleAreaDetails\">\n                      {titleAreaRightContent}\n                    </div>\n                  )}\n                </Box>\n                {(values || cardTopContent) && (\n                  <>\n                    <div\n                      style={{\n                        borderTop: '1px solid rgba(26, 28, 41, 0.2)',\n                        marginTop: '15px',\n                        paddingTop: '5px',\n                      }}\n                    />\n                    <div className=\"SRC-cardContent\">\n                      {cardTopContent}\n                      {values && (\n                        <CardFooter\n                          isHeader={true}\n                          secondaryLabelLimit={secondaryLabelLimit}\n                          values={values}\n                        />\n                      )}\n                    </div>\n                  </>\n                )}\n              </Box>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Box>\n  )\n})\n\nconst HeaderCard = forwardRef(function HeaderCard(\n  props: HeaderCardProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { headerCardVariant = 'HeaderCard' } = props\n  if (headerCardVariant === 'HeaderCardV2') {\n    return <HeaderCardV2 {...props} ref={ref} />\n  }\n  return <HeaderCardClassic {...props} ref={ref} />\n})\n\nexport default HeaderCard\n"],"mappings":"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"}

package/dist/components/HexGrid/HexGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"HexGrid.js","names":[],"sources":["../../../src/components/HexGrid/HexGrid.tsx"],"sourcesContent":["import styles from './HexGrid.module.scss'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport {\n  FileHandleAssociateType,\n  QueryBundleRequest,\n} from '@sage-bionetworks/synapse-types'\nimport { SynapseConstants } from '@/utils'\nimport { useGetFullTableQueryResults } from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { ImageFileHandle } from '@/components/widgets/ImageFileHandle'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport { ButtonBase, Typography } from '@mui/material'\n\n// Column values resolved by name so consumers don't need the indices that are only known inside HexGrid.\nexport type HexRowData = {\n  title: string\n  imageFileHandleId: string | null\n  description: string | null\n  entityId: string\n}\n\ntype HexGridProps = {\n  sql: string\n  titleColName: string\n  imageColName: string\n  descriptionColName: string\n  onRowClick?: (rowData: HexRowData) => void\n}\n\nfunction HexGrid({\n  sql,\n  titleColName,\n  imageColName,\n  descriptionColName,\n  onRowClick,\n}: HexGridProps) {\n  const entityId = parseEntityIdFromSqlStatement(sql)\n  const queryBundleRequest: QueryBundleRequest = {\n    entityId,\n    query: { sql },\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n  }\n\n  const { data: queryResultBundle } =\n    useGetFullTableQueryResults(queryBundleRequest)\n\n  const dataRows = queryResultBundle?.queryResult?.queryResults.rows ?? []\n\n  const titleColIndex = getFieldIndex(titleColName, queryResultBundle)\n\n  const imageColIndex = getFieldIndex(imageColName, queryResultBundle)\n\n  const descColIndex = getFieldIndex(descriptionColName, queryResultBundle)\n\n  return (\n    <div className={styles.hexSlat}>\n      <div className={styles.gridWrapper}>\n        <ul className={styles.hexGrid}>\n          {dataRows.map(row => (\n            <ButtonBase\n              component=\"li\"\n              key={row.rowId}\n              className={styles.hex}\n              onClick={() =>\n                onRowClick?.({\n                  title: row.values[titleColIndex] ?? '',\n                  imageFileHandleId: row.values[imageColIndex] ?? null,\n                  description: row.values[descColIndex] ?? null,\n                  entityId,\n                })\n              }\n            >\n              <div className={styles.hexIn}>\n                <Typography variant=\"headline3\" className={styles.hexTitle}>\n                  {row.values[titleColIndex]}\n                </Typography>\n                <ImageFileHandle\n                  fileHandleAssociation={{\n                    fileHandleId: row.values[imageColIndex] ?? '',\n                    associateObjectId: entityId,\n                    associateObjectType: FileHandleAssociateType.TableEntity,\n                  }}\n                  imgProps={{ className: styles.hexIcon }}\n                />\n              </div>\n            </ButtonBase>\n          ))}\n        </ul>\n      </div>\n    </div>\n  )\n}\n\nexport default HexGrid\n"],"mappings":";;;;;;;;;;;AA4BA,SAAS,EAAQ,EACf,QACA,iBACA,iBACA,uBACA,iBACe;CACf,IAAM,IAAW,EAA8B,EAAI,EAU7C,EAAE,MAAM,MACZ,EAV6C;EAC7C;EACA,OAAO,EAAE,QAAK;EACd,UACE;EAEF,cAAc;EACf,CAGgD,EAE3C,IAAW,GAAmB,aAAa,aAAa,QAAQ,EAAE,EAElE,IAAgB,EAAc,GAAc,EAAkB,EAE9D,IAAgB,EAAc,GAAc,EAAkB,EAE9D,IAAe,EAAc,GAAoB,EAAkB;AAEzE,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,MAAD;IAAI,WAAW,EAAO;cACnB,EAAS,KAAI,MACZ,kBAAC,GAAD;KACE,WAAU;KAEV,WAAW,EAAO;KAClB,eACE,IAAa;MACX,OAAO,EAAI,OAAO,MAAkB;MACpC,mBAAmB,EAAI,OAAO,MAAkB;MAChD,aAAa,EAAI,OAAO,MAAiB;MACzC;MACD,CAAC;eAGJ,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACE,kBAAC,GAAD;OAAY,SAAQ;OAAY,WAAW,EAAO;iBAC/C,EAAI,OAAO;OACD,CAAA,EACb,kBAAC,GAAD;OACE,uBAAuB;QACrB,cAAc,EAAI,OAAO,MAAkB;QAC3C,mBAAmB;QACnB,qBAAqB,EAAwB;QAC9C;OACD,UAAU,EAAE,WAAW,EAAO,SAAS;OACvC,CAAA,CACE;;KACK,EAxBN,EAAI,MAwBE,CACb;IACC,CAAA;GACD,CAAA;EACF,CAAA"}
+{"version":3,"file":"HexGrid.js","names":[],"sources":["../../../src/components/HexGrid/HexGrid.tsx"],"sourcesContent":["import styles from './HexGrid.module.scss'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport {\n  FileHandleAssociateType,\n  QueryBundleRequest,\n} from '@sage-bionetworks/synapse-types'\nimport { SynapseConstants } from '@/utils'\nimport { useGetFullTableQueryResults } from '@/synapse-queries/entity/useGetQueryResultBundle'\nimport { ImageFileHandle } from '@/components/widgets/ImageFileHandle'\nimport { getFieldIndex } from '@/utils/functions/queryUtils'\nimport { ButtonBase, Typography } from '@mui/material'\n\n// Column values resolved by name so consumers don't need the indices that are only known inside HexGrid.\nexport type HexRowData = {\n  title: string\n  imageFileHandleId: string | null\n  description: string | null\n  entityId: string\n}\n\ntype HexGridProps = {\n  sql: string\n  titleColName: string\n  imageColName: string\n  descriptionColName: string\n  onRowClick?: (rowData: HexRowData) => void\n}\n\nfunction HexGrid({\n  sql,\n  titleColName,\n  imageColName,\n  descriptionColName,\n  onRowClick,\n}: HexGridProps) {\n  const entityId = parseEntityIdFromSqlStatement(sql)\n  const queryBundleRequest: QueryBundleRequest = {\n    entityId,\n    query: { sql },\n    partMask:\n      SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |\n      SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,\n    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n  }\n\n  const { data: queryResultBundle } =\n    useGetFullTableQueryResults(queryBundleRequest)\n\n  const dataRows = queryResultBundle?.queryResult?.queryResults.rows ?? []\n\n  const titleColIndex = getFieldIndex(titleColName, queryResultBundle)\n\n  const imageColIndex = getFieldIndex(imageColName, queryResultBundle)\n\n  const descColIndex = getFieldIndex(descriptionColName, queryResultBundle)\n\n  return (\n    <div className={styles.hexSlat}>\n      <div className={styles.gridWrapper}>\n        <ul className={styles.hexGrid}>\n          {dataRows.map(row => (\n            <ButtonBase\n              component=\"li\"\n              key={row.rowId}\n              className={styles.hex}\n              onClick={() =>\n                onRowClick?.({\n                  title: row.values[titleColIndex] ?? '',\n                  imageFileHandleId: row.values[imageColIndex] ?? null,\n                  description: row.values[descColIndex] ?? null,\n                  entityId,\n                })\n              }\n            >\n              <div className={styles.hexIn}>\n                <Typography variant=\"headline3\" className={styles.hexTitle}>\n                  {row.values[titleColIndex]}\n                </Typography>\n                <ImageFileHandle\n                  fileHandleAssociation={{\n                    fileHandleId: row.values[imageColIndex] ?? '',\n                    associateObjectId: entityId,\n                    associateObjectType: FileHandleAssociateType.TableEntity,\n                  }}\n                  imgProps={{ className: styles.hexIcon }}\n                />\n              </div>\n            </ButtonBase>\n          ))}\n        </ul>\n      </div>\n    </div>\n  )\n}\n\nexport default HexGrid\n"],"mappings":";;;;;;;;;;;AA4BA,SAAS,EAAQ,EACf,QACA,iBACA,iBACA,uBACA,iBACe;CACf,IAAM,IAAW,EAA8B,EAAI,EAU7C,EAAE,MAAM,MACZ,EAA4B;EAT5B;EACA,OAAO,EAAE,QAAK;EACd,UACE;EAEF,cAAc;EAIc,CAAmB,EAE3C,IAAW,GAAmB,aAAa,aAAa,QAAQ,EAAE,EAElE,IAAgB,EAAc,GAAc,EAAkB,EAE9D,IAAgB,EAAc,GAAc,EAAkB,EAE9D,IAAe,EAAc,GAAoB,EAAkB;AAEzE,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,MAAD;IAAI,WAAW,EAAO;cACnB,EAAS,KAAI,MACZ,kBAAC,GAAD;KACE,WAAU;KAEV,WAAW,EAAO;KAClB,eACE,IAAa;MACX,OAAO,EAAI,OAAO,MAAkB;MACpC,mBAAmB,EAAI,OAAO,MAAkB;MAChD,aAAa,EAAI,OAAO,MAAiB;MACzC;MACD,CAAC;eAGJ,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACE,kBAAC,GAAD;OAAY,SAAQ;OAAY,WAAW,EAAO;iBAC/C,EAAI,OAAO;OACD,CAAA,EACb,kBAAC,GAAD;OACE,uBAAuB;QACrB,cAAc,EAAI,OAAO,MAAkB;QAC3C,mBAAmB;QACnB,qBAAqB,EAAwB;QAC9C;OACD,UAAU,EAAE,WAAW,EAAO,SAAS;OACvC,CAAA,CACE;;KACK,EAxBN,EAAI,MAwBE,CACb;IACC,CAAA;GACD,CAAA;EACF,CAAA"}

package/dist/components/IconList.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconList.js","names":[],"sources":["../../src/components/IconList.tsx"],"sourcesContent":["import { UniqueFacetIdentifier } from '@/utils'\nimport { merge } from 'lodash-es'\nimport { useCallback, useMemo } from 'react'\nimport IconSvg, { IconSvgProps } from './IconSvg/IconSvg'\nimport { useQueryContext } from './QueryContext'\n\ntype IconConfigs = {\n  [index: string]: IconSvgProps // if the icon option has the \"label\" set, it will show tooltip in IconSvg\n}\n\nexport type IconListProps = {\n  iconConfigs: IconConfigs\n  iconNames: string[]\n  commonIconProps?: Omit<IconSvgProps, 'icon'>\n  useTheme?: boolean\n  useBackground?: boolean\n}\n\nconst defaultCommonIconProps: IconListProps['commonIconProps'] = {\n  sx: { fontSize: '24px' },\n}\n\nfunction IconList(props: IconListProps) {\n  const {\n    iconConfigs,\n    iconNames,\n    commonIconProps = defaultCommonIconProps,\n    useTheme,\n    useBackground,\n  } = props\n  let noMatch: boolean = false\n  const css = useTheme ? 'icon-list themed' : 'icon-list'\n  const componentCss = useBackground ? `${css} bg-circle` : css\n  const queryContext = useQueryContext()\n  const { addValueToSelectedFacet } = queryContext\n\n  const handleIconClick = useCallback(\n    (dataType: 'string') => {\n      const facet: UniqueFacetIdentifier = {\n        columnName: 'dataType',\n      }\n      addValueToSelectedFacet(facet, dataType)\n    },\n    [addValueToSelectedFacet],\n  )\n\n  const mergedIconConfigs: IconConfigs = useMemo(() => {\n    const mergedIconConfigs: IconConfigs = {}\n    for (const [key, iconProps] of Object.entries(iconConfigs)) {\n      mergedIconConfigs[key] = merge({}, commonIconProps, iconProps)\n    }\n    return mergedIconConfigs\n  }, [iconConfigs, commonIconProps])\n\n  const buildIconList = () => {\n    const unique = Array.from(new Set(iconNames))\n    return unique.map((el: any) => {\n      const iconConfig = mergedIconConfigs[el]\n      // if this data type value doesn't have a matching icon, we use the \"other\" icon\n      if (!iconConfig) {\n        noMatch = true\n        return\n      } else {\n        return (\n          <IconSvg\n            key={el}\n            {...iconConfig}\n            onClick={() => handleIconClick(el)}\n          />\n        )\n      }\n    })\n  }\n\n  return (\n    <span className={componentCss}>\n      {buildIconList()}\n      {noMatch && mergedIconConfigs['other'] ? (\n        <IconSvg {...mergedIconConfigs['other']} />\n      ) : (\n        <></>\n      )}\n    </span>\n  )\n}\n\nexport default IconList\n"],"mappings":";;;;;;;AAkBA,IAAM,IAA2D,EAC/D,IAAI,EAAE,UAAU,QAAQ,EACzB;AAED,SAAS,EAAS,GAAsB;CACtC,IAAM,EACJ,gBACA,cACA,qBAAkB,GAClB,aACA,qBACE,GACA,IAAmB,IACjB,IAAM,IAAW,qBAAqB,aACtC,IAAe,IAAgB,GAAG,EAAI,cAAc,GAEpD,EAAE,+BADa,GAAiB,EAGhC,IAAkB,GACrB,MAAuB;AAItB,IAHqC,EACnC,YAAY,YACb,EAC8B,EAAS;IAE1C,CAAC,EAAwB,CAC1B,EAEK,IAAiC,QAAc;EACnD,IAAM,IAAiC,EAAE;AACzC,OAAK,IAAM,CAAC,GAAK,MAAc,OAAO,QAAQ,EAAY,CACxD,GAAkB,KAAO,EAAM,EAAE,EAAE,GAAiB,EAAU;AAEhE,SAAO;IACN,CAAC,GAAa,EAAgB,CAAC;AAsBlC,QACE,kBAAC,QAAD;EAAM,WAAW;YAAjB,CApBe,MAAM,KAAK,IAAI,IAAI,EAAU,CAAC,CAC/B,KAAK,MAAY;GAC7B,IAAM,IAAa,EAAkB;AAErC,OAAK,EAIH,QACE,kBAAC,GAAD;IAEE,GAAI;IACJ,eAAe,EAAgB,EAAG;IAClC,EAHK,EAGL;AARJ,OAAU;IAWZ,EAMC,KAAW,EAAkB,QAC5B,kBAAC,GAAD,EAAS,GAAI,EAAkB,OAAY,CAAA,GAE3C,kBAAA,GAAA,EAAK,CAAA,CAEF"}
+{"version":3,"file":"IconList.js","names":[],"sources":["../../src/components/IconList.tsx"],"sourcesContent":["import { UniqueFacetIdentifier } from '@/utils'\nimport { merge } from 'lodash-es'\nimport { useCallback, useMemo } from 'react'\nimport IconSvg, { IconSvgProps } from './IconSvg/IconSvg'\nimport { useQueryContext } from './QueryContext'\n\ntype IconConfigs = {\n  [index: string]: IconSvgProps // if the icon option has the \"label\" set, it will show tooltip in IconSvg\n}\n\nexport type IconListProps = {\n  iconConfigs: IconConfigs\n  iconNames: string[]\n  commonIconProps?: Omit<IconSvgProps, 'icon'>\n  useTheme?: boolean\n  useBackground?: boolean\n}\n\nconst defaultCommonIconProps: IconListProps['commonIconProps'] = {\n  sx: { fontSize: '24px' },\n}\n\nfunction IconList(props: IconListProps) {\n  const {\n    iconConfigs,\n    iconNames,\n    commonIconProps = defaultCommonIconProps,\n    useTheme,\n    useBackground,\n  } = props\n  let noMatch: boolean = false\n  const css = useTheme ? 'icon-list themed' : 'icon-list'\n  const componentCss = useBackground ? `${css} bg-circle` : css\n  const queryContext = useQueryContext()\n  const { addValueToSelectedFacet } = queryContext\n\n  const handleIconClick = useCallback(\n    (dataType: 'string') => {\n      const facet: UniqueFacetIdentifier = {\n        columnName: 'dataType',\n      }\n      addValueToSelectedFacet(facet, dataType)\n    },\n    [addValueToSelectedFacet],\n  )\n\n  const mergedIconConfigs: IconConfigs = useMemo(() => {\n    const mergedIconConfigs: IconConfigs = {}\n    for (const [key, iconProps] of Object.entries(iconConfigs)) {\n      mergedIconConfigs[key] = merge({}, commonIconProps, iconProps)\n    }\n    return mergedIconConfigs\n  }, [iconConfigs, commonIconProps])\n\n  const buildIconList = () => {\n    const unique = Array.from(new Set(iconNames))\n    return unique.map((el: any) => {\n      const iconConfig = mergedIconConfigs[el]\n      // if this data type value doesn't have a matching icon, we use the \"other\" icon\n      if (!iconConfig) {\n        noMatch = true\n        return\n      } else {\n        return (\n          <IconSvg\n            key={el}\n            {...iconConfig}\n            onClick={() => handleIconClick(el)}\n          />\n        )\n      }\n    })\n  }\n\n  return (\n    <span className={componentCss}>\n      {buildIconList()}\n      {noMatch && mergedIconConfigs['other'] ? (\n        <IconSvg {...mergedIconConfigs['other']} />\n      ) : (\n        <></>\n      )}\n    </span>\n  )\n}\n\nexport default IconList\n"],"mappings":";;;;;;;AAkBA,IAAM,IAA2D,EAC/D,IAAI,EAAE,UAAU,QAAQ,EACzB;AAED,SAAS,EAAS,GAAsB;CACtC,IAAM,EACJ,gBACA,cACA,qBAAkB,GAClB,aACA,qBACE,GACA,IAAmB,IACjB,IAAM,IAAW,qBAAqB,aACtC,IAAe,IAAgB,GAAG,EAAI,cAAc,GAEpD,EAAE,+BADa,GACe,EAE9B,IAAkB,GACrB,MAAuB;AAItB,IAAwB,EAFtB,YAAY,YAEU,EAAO,EAAS;IAE1C,CAAC,EAAwB,CAC1B,EAEK,IAAiC,QAAc;EACnD,IAAM,IAAiC,EAAE;AACzC,OAAK,IAAM,CAAC,GAAK,MAAc,OAAO,QAAQ,EAAY,CACxD,GAAkB,KAAO,EAAM,EAAE,EAAE,GAAiB,EAAU;AAEhE,SAAO;IACN,CAAC,GAAa,EAAgB,CAAC;AAsBlC,QACE,kBAAC,QAAD;EAAM,WAAW;YAAjB,CApBe,MAAM,KAAK,IAAI,IAAI,EAAU,CACrC,CAAO,KAAK,MAAY;GAC7B,IAAM,IAAa,EAAkB;AAErC,OAAK,EAIH,QACE,kBAAC,GAAD;IAEE,GAAI;IACJ,eAAe,EAAgB,EAAG;IAClC,EAHK,EAGL;AARJ,OAAU;IAWZ,EAMC,KAAW,EAAkB,QAC5B,kBAAC,GAAD,EAAS,GAAI,EAAkB,OAAY,CAAA,GAE3C,kBAAA,GAAA,EAAK,CAAA,CAEF"}