chanzuckerberg · kne42 · Sep 30, 2024 · Sep 25, 2024 · Sep 25, 2024 · Sep 30, 2024
diff --git a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
@@ -15,6 +15,7 @@ import { Link } from 'app/components/Link'
 import { CellHeader, PageTable, TableCell } from 'app/components/Table'
 import { EMPIAR_ID, EMPIAR_URL } from 'app/constants/external-dbs'
 import { DATASET_FILTERS } from 'app/constants/filterQueryParams'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import { ANNOTATED_OBJECTS_MAX, MAX_PER_PAGE } from 'app/constants/pagination'
 import { QueryParams } from 'app/constants/query'
 import { DatasetTableWidths } from 'app/constants/table'
@@ -151,11 +152,11 @@ export function DatasetTable() {
                     )}
                   </p>
 
-                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-semantic-text-base-primary">
                     {isLoadingDebounced ? (
                       <Skeleton className="max-w-[120px]" variant="text" />
                     ) : (
-                      `${t('datasetId')}: ${dataset.id}`
+                      `${t('datasetId')}: ${IdPrefix.Dataset}-${dataset.id}`
                     )}
                   </p>
 

diff --git a/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx
@@ -110,7 +110,7 @@ export function DepositionTable() {
                     )}
                   </p>
 
-                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-semantic-text-base-primary">
                     {isLoadingDebounced ? (
                       <Skeleton className="max-w-[120px]" variant="text" />
                     ) : (

diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx
@@ -3,6 +3,7 @@ import { Button, Icon } from '@czi-sds/components'
 import { Breadcrumbs } from 'app/components/Breadcrumbs'
 import { DatasetOverview } from 'app/components/Dataset/DatasetOverview'
 import { PageHeader } from 'app/components/PageHeader'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import { useDatasetById } from 'app/hooks/useDatasetById'
 import { useDownloadModalQueryParamState } from 'app/hooks/useDownloadModalQueryParamState'
 import { useI18n } from 'app/hooks/useI18n'
@@ -38,7 +39,7 @@ export function DatasetHeader() {
       metadata={[
         {
           key: t('datasetId'),
-          value: String(dataset.id),
+          value: `${IdPrefix.Dataset}-${dataset.id}`,
         },
       ]}
       onMoreInfoClick={() => toggleDrawer(MetadataDrawerId.Dataset)}

diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataDrawer.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataDrawer.tsx
@@ -1,4 +1,5 @@
 import { MetadataDrawer } from 'app/components/MetadataDrawer'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import { useDatasetById } from 'app/hooks/useDatasetById'
 import { useI18n } from 'app/hooks/useI18n'
 import { MetadataDrawerId } from 'app/hooks/useMetadataDrawer'
@@ -16,6 +17,7 @@ export function DatasetMetadataDrawer() {
       drawerId={MetadataDrawerId.Dataset}
       title={dataset.title}
       label={t('datasetDetails')}
+      idInfo={{ label: 'datasetId', text: `${IdPrefix.Dataset}-${dataset.id}` }}
     >
       <DatasetMetadataTable dataset={dataset} />
       <SampleAndExperimentConditionsTable dataset={dataset} />

diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
@@ -7,6 +7,7 @@ import { AuthorInfo } from 'app/components/AuthorLink'
 import { AuthorList } from 'app/components/AuthorList'
 import { DatabaseEntryList } from 'app/components/DatabaseEntry'
 import { Link } from 'app/components/Link'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import { useI18n } from 'app/hooks/useI18n'
 import { getTableData } from 'app/utils/table'
 
@@ -48,7 +49,7 @@ export function DatasetMetadataTable({
 
     !!showAllFields && {
       label: t('datasetId'),
-      values: [`${dataset.id ?? ''}`],
+      values: [dataset.id ? `${IdPrefix.Dataset}-${dataset.id}` : '--'],
     },
 
     !!showAllFields && {

diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
@@ -16,6 +16,7 @@ import { CellHeader, PageTable, TableCell } from 'app/components/Table'
 import { TiltSeriesQualityScoreBadge } from 'app/components/TiltSeriesQualityScoreBadge'
 import { ViewTomogramButton } from 'app/components/ViewTomogramButton'
 import { RUN_FILTERS } from 'app/constants/filterQueryParams'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import { MAX_PER_PAGE } from 'app/constants/pagination'
 import { QueryParams } from 'app/constants/query'
 import { RunTableWidths } from 'app/constants/table'
@@ -134,11 +135,11 @@ export function RunsTable() {
                   </Link>
                 )}
 
-                <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
+                <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-semantic-text-base-primary">
                   {isLoadingDebounced ? (
                     <Skeleton className="max-w-[120px]" variant="text" />
                   ) : (
-                    `${t('runId')}: ${run.id}`
+                    `${t('runId')}: ${IdPrefix.Run}-${run.id}`
                   )}
                 </p>
               </div>

diff --git a/frontend/packages/data-portal/app/components/Deposition/DatasetsTable.tsx b/frontend/packages/data-portal/app/components/Deposition/DatasetsTable.tsx
@@ -14,6 +14,7 @@ import { KeyPhoto } from 'app/components/KeyPhoto'
 import { Link } from 'app/components/Link'
 import { CellHeader, PageTable, TableCell } from 'app/components/Table'
 import { RUN_FILTERS } from 'app/constants/filterQueryParams'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import { ANNOTATED_OBJECTS_MAX, MAX_PER_PAGE } from 'app/constants/pagination'
 import { QueryParams } from 'app/constants/query'
 import { DepositionPageDatasetTableWidths } from 'app/constants/table'
@@ -146,11 +147,11 @@ export function DatasetsTable() {
                     )}
                   </p>
 
-                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-semantic-text-base-primary">
                     {isLoadingDebounced ? (
                       <Skeleton className="max-w-[120px]" variant="text" />
                     ) : (
-                      `${t('datasetId')}: ${dataset.id}`
+                      `${t('datasetId')}: ${IdPrefix.Dataset}-${dataset.id}`
                     )}
                   </p>
 

diff --git a/frontend/packages/data-portal/app/components/Deposition/DepositionMetadataDrawer.tsx b/frontend/packages/data-portal/app/components/Deposition/DepositionMetadataDrawer.tsx
@@ -1,4 +1,5 @@
 import { MetadataDrawer } from 'app/components/MetadataDrawer'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import { useDepositionById } from 'app/hooks/useDepositionById'
 import { useI18n } from 'app/hooks/useI18n'
 import { MetadataDrawerId } from 'app/hooks/useMetadataDrawer'
@@ -16,6 +17,10 @@ export function DepositionMetadataDrawer() {
       drawerId={MetadataDrawerId.Deposition}
       title={deposition?.title ?? ''}
       label={t('depositionDetails')}
+      idInfo={{
+        label: 'depositionId',
+        text: `${IdPrefix.Deposition}-${deposition?.id}`,
+      }}
     >
       <DepositionMetadataTable deposition={deposition} />
       <AnnotationsSummaryMetadataTable />

diff --git a/frontend/packages/data-portal/app/components/Deposition/DepositionMetadataTable.tsx b/frontend/packages/data-portal/app/components/Deposition/DepositionMetadataTable.tsx
@@ -6,7 +6,6 @@ import { AuthorLegend } from 'app/components/AuthorLegend'
 import { AuthorInfo } from 'app/components/AuthorLink'
 import { AuthorList } from 'app/components/AuthorList'
 import { DatabaseEntryList } from 'app/components/DatabaseEntry'
-import { IdPrefix } from 'app/constants/idPrefixes'
 import { Deposition } from 'app/hooks/useDepositionById'
 import { useI18n } from 'app/hooks/useI18n'
 import { getTableData } from 'app/utils/table'
@@ -47,11 +46,6 @@ export function DepositionMetadataTable({
   const { t } = useI18n()
 
   const depositionMetadata = getTableData(
-    {
-      label: t('depositionId'),
-      values: [`${IdPrefix.Deposition}-${deposition.id}`],
-    },
-
     {
       label:
         deposition.authors && deposition.authors.length === 1

diff --git a/frontend/packages/data-portal/app/components/Download/ConfigureDownloadContent.tsx b/frontend/packages/data-portal/app/components/Download/ConfigureDownloadContent.tsx
@@ -1,4 +1,5 @@
 import { ModalSubtitle } from 'app/components/ModalSubtitle'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import { useDownloadModalContext } from 'app/context/DownloadModal.context'
 import { useDownloadModalQueryParamState } from 'app/hooks/useDownloadModalQueryParamState'
 import { useI18n } from 'app/hooks/useI18n'
@@ -16,7 +17,10 @@ export function ConfigureDownloadContent() {
       <ModalSubtitle label={t('datasetName')} value={datasetTitle} />
       {runName && <ModalSubtitle label={t('runName')} value={runName} />}
       {annotationId && (
-        <ModalSubtitle label={t('annotationId')} value={annotationId} />
+        <ModalSubtitle
+          label={t('annotationId')}
+          value={`${IdPrefix.Annotation}-${annotationId}`}
+        />
       )}
       {objectName && (
         <ModalSubtitle label={t('objectName')} value={objectName} />

diff --git a/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx b/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx
@@ -6,6 +6,7 @@ import { ComponentType } from 'react'
 
 import { ModalSubtitle } from 'app/components/ModalSubtitle'
 import { TabData, Tabs } from 'app/components/Tabs'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import {
   DownloadModalType,
   useDownloadModalContext,
@@ -83,7 +84,7 @@ export function DownloadOptionsContent() {
           />
           <ModalSubtitle
             label={t('tomogramId')}
-            value={tomogramToDownload.id}
+            value={`${IdPrefix.Tomogram}-${tomogramToDownload.id}`}
           />
           <ModalSubtitle
             label={t('tomogramSampling')}

diff --git a/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorOption.tsx b/frontend/packages/data-portal/app/components/Download/Tomogram/TomogramSelectorOption.tsx
@@ -1,3 +1,4 @@
+import { IdPrefix } from 'app/constants/idPrefixes'
 import { useI18n } from 'app/hooks/useI18n'
 import { TomogramV2 } from 'app/types/gqlResponseTypes'
 import { getTomogramName } from 'app/utils/tomograms'
@@ -15,7 +16,7 @@ export function TomogramSelectorOption({
     <div>
       <div className="font-semibold">{getTomogramName(tomogram)}</div>
       <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
-        {t('tomogramId')}: {tomogram.id}
+        {`${t('tomogramId')}: ${IdPrefix.Tomogram}-${tomogram.id}`}
       </div>
       <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
         {t('tomogramSampling')}:{' '}

diff --git a/frontend/packages/data-portal/app/components/MetadataDrawer.tsx b/frontend/packages/data-portal/app/components/MetadataDrawer.tsx
@@ -6,13 +6,15 @@ import { Demo } from 'app/components/Demo'
 import { Drawer } from 'app/components/Drawer'
 import { TabData, Tabs } from 'app/components/Tabs'
 import { TestIds } from 'app/constants/testIds'
+import { useI18n } from 'app/hooks/useI18n'
 import {
   MetadataDrawerId,
   MetadataTab,
   useMetadataDrawer,
 } from 'app/hooks/useMetadataDrawer'
 import { Events, usePlausible } from 'app/hooks/usePlausible'
 import { i18n } from 'app/i18n'
+import { I18nKeys } from 'app/types/i18n'
 import { cns } from 'app/utils/cns'
 
 const TAB_OPTIONS: TabData<MetadataTab>[] = [
@@ -30,6 +32,7 @@ interface MetaDataDrawerProps {
   children: ReactNode
   disabled?: boolean
   drawerId: MetadataDrawerId
+  idInfo?: { label: I18nKeys; text: string }
   label: string
   onClose?(): void
   title: string
@@ -39,12 +42,15 @@ export function MetadataDrawer({
   children,
   disabled,
   drawerId,
+  idInfo,
   label,
   onClose,
   title,
 }: MetaDataDrawerProps) {
   const drawer = useMetadataDrawer()
 
+  const { t } = useI18n()
+
   const handleClose = useCallback(() => {
     drawer.closeDrawer()
     onClose?.()
@@ -67,14 +73,25 @@ export function MetadataDrawer({
         data-testid={TestIds.MetadataDrawer}
       >
         <header className="flex items-start justify-between px-sds-xl pt-sds-xl pb-sds-xxl">
-          <div className="flex flex-col gap-sds-s">
-            <p className="text-xs text-sds-color-primitive-gray-600 font-semibold uppercase">
+          <div className="flex flex-col">
+            <p className="text-xs text-sds-color-semantic-text-base-secondary font-semibold uppercase mb-sds-s">
               {label}
             </p>
 
             <p className="text-sds-header-xl font-semibold text-black leading-sds-header-xl line-clamp-3">
               {title}
             </p>
+
+            {idInfo && (
+              <p className="flex flex-row gap-sds-xs items-baseline text-sds-color-primitive-gray-500 mt-sds-xxs">
+                <span className="text-sds-header-xxs leading-sds-header-xxs font-semibold">
+                  {t(idInfo.label)}:
+                </span>
+                <span className="text-sds-body-s leading-sds-body-s">
+                  {idInfo.text}
+                </span>
+              </p>
+            )}
           </div>
 
           <Button

diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationDrawer.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationDrawer.tsx
@@ -1,4 +1,5 @@
 import { MetadataDrawer } from 'app/components/MetadataDrawer'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import { MetadataDrawerId } from 'app/hooks/useMetadataDrawer'
 import { i18n } from 'app/i18n'
 import { useAnnotation } from 'app/state/annotation'
@@ -17,6 +18,10 @@ export function AnnotationDrawer() {
       drawerId={MetadataDrawerId.Annotation}
       label={i18n.annotationDetails}
       title={getAnnotationTitle(activeAnnotation)}
+      idInfo={{
+        label: 'annotationId',
+        text: `${IdPrefix.Annotation}-${activeAnnotation?.id}`,
+      }}
       onClose={() => setActiveAnnotation(null)}
     >
       <AnnotationOverviewTable />

diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx
@@ -39,10 +39,6 @@ export function AnnotationOverviewTable() {
       id="annotation-overview"
       header={t('annotationOverview')}
       data={[
-        {
-          label: t('annotationId'),
-          values: [annotation.id],
-        },
         {
           label:
             annotation.authors.length === 1

diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
@@ -1,13 +1,16 @@
 import { Button, Icon } from '@czi-sds/components'
 
 import { Breadcrumbs } from 'app/components/Breadcrumbs'
+import { CollapsibleList } from 'app/components/CollapsibleList'
+import { HeaderKeyPhoto } from 'app/components/HeaderKeyPhoto'
 import { I18n } from 'app/components/I18n'
 import { InlineMetadata } from 'app/components/InlineMetadata'
 import { PageHeader } from 'app/components/PageHeader'
 import { PageHeaderSubtitle } from 'app/components/PageHeaderSubtitle'
 import { MetadataTable } from 'app/components/Table'
 import { TiltSeriesQualityScoreBadge } from 'app/components/TiltSeriesQualityScoreBadge'
 import { ViewTomogramButton } from 'app/components/ViewTomogramButton'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import { useDownloadModalQueryParamState } from 'app/hooks/useDownloadModalQueryParamState'
 import { useI18n } from 'app/hooks/useI18n'
 import {
@@ -20,9 +23,6 @@ import { TableDataValue } from 'app/types/table'
 import { useFeatureFlag } from 'app/utils/featureFlags'
 import { getTiltRangeLabel } from 'app/utils/tiltSeries'
 
-import { CollapsibleList } from '../CollapsibleList'
-import { HeaderKeyPhoto } from '../HeaderKeyPhoto'
-
 interface FileSummaryData {
   key: string
   value: number
@@ -109,7 +109,7 @@ export function RunHeader() {
         run.dataset.last_modified_date ?? run.dataset.deposition_date
       }
       breadcrumbs={<Breadcrumbs variant="run" data={run.dataset} />}
-      metadata={[{ key: t('runId'), value: `${run.id}` }]}
+      metadata={[{ key: t('runId'), value: `${IdPrefix.Run}-${run.id}` }]}
       onMoreInfoClick={() => toggleDrawer(MetadataDrawerId.Run)}
       title={run.name}
       renderHeader={({ moreInfo }) => (

diff --git a/frontend/packages/data-portal/app/components/Run/RunMetadataDrawer.tsx b/frontend/packages/data-portal/app/components/Run/RunMetadataDrawer.tsx
@@ -1,6 +1,7 @@
 import { DatasetMetadataTable } from 'app/components/Dataset/DatasetMetadataTable'
 import { SampleAndExperimentConditionsTable } from 'app/components/Dataset/SampleAndExperimentConditionsTable'
 import { MetadataDrawer } from 'app/components/MetadataDrawer'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import { MetadataDrawerId } from 'app/hooks/useMetadataDrawer'
 import { useRunById } from 'app/hooks/useRunById'
 import { i18n } from 'app/i18n'
@@ -19,6 +20,7 @@ export function RunMetadataDrawer() {
       drawerId={MetadataDrawerId.Run}
       title={run.name}
       label={i18n.runDetails}
+      idInfo={{ label: 'runId', text: `${IdPrefix.Run}-${run.id}` }}
     >
       <DatasetMetadataTable
         showAllFields

diff --git a/frontend/packages/data-portal/app/components/Run/RunTiltSeriesTable.tsx b/frontend/packages/data-portal/app/components/Run/RunTiltSeriesTable.tsx
@@ -2,6 +2,7 @@ import { TiltSeriesKeys, TiltSeriesTable } from 'app/components/TiltSeriesTable'
 import { useRunById } from 'app/hooks/useRunById'
 
 const SELECT_FIELDS = [
+  TiltSeriesKeys.Id,
   TiltSeriesKeys.MicroscopeManufacturer,
   TiltSeriesKeys.MicroscopeModel,
   TiltSeriesKeys.PhasePlate,

diff --git a/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx b/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx
@@ -29,6 +29,10 @@ export function TomogramMetadataDrawer() {
     <MetadataDrawer
       title={getTomogramName(tomogram)}
       label={t('tomogramDetails')}
+      idInfo={{
+        label: 'tomogramId',
+        text: `${IdPrefix.Tomogram}-${tomogram.id}`,
+      }}
       disabled={tomogram === undefined}
       drawerId={MetadataDrawerId.Tomogram}
     >

diff --git a/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx b/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx
@@ -71,7 +71,7 @@ export function TomogramsTable() {
               {getTomogramName(original)}
             </div>
             <div className="flex items-center flex-wrap gap-sds-xs text-sds-body-xxs">
-              {t('tomogramId')}: {original.id}
+              {`${t('tomogramId')}: ${IdPrefix.Tomogram}-${original.id}`}
               {original.isStandardized && (
                 <TomogramTypeBadge type="standard" showTooltip />
               )}

diff --git a/frontend/packages/data-portal/app/components/TiltSeriesTable/constants.tsx b/frontend/packages/data-portal/app/components/TiltSeriesTable/constants.tsx
@@ -7,6 +7,7 @@ export const enum TiltSeriesKeys {
   CameraModel,
   DataAcquisitionSoftware,
   EnergyFilter,
+  Id,
   ImageCorrector,
   MicroscopeManufacturer,
   MicroscopeModel,