feat: update annotation row name (#1163)

#1050 - Updates the annotation row name to be in the format `{file_id} - {object_name}` - Add annotation ID + move ground truth badge - Adds new annotation name to download modal ## Demo https://dev-annotation-row-name.cryoet.dev.si.czi.technology/ <img width="730" alt="image" src="https://github.com/user-attachments/assets/de772dbd-d44b-4e30-adad-9ba4135c7a2a"> <img width="620" alt="image" src="https://github.com/user-attachments/assets/ef8d50b9-6678-42c1-a686-1d0e41e360fd"> <img width="631" alt="image" src="https://github.com/user-attachments/assets/af278f22-ef2e-4b57-b395-ffbf32be49c2">
chanzuckerberg · Oct 2, 2024 · 6164201 · 6164201
1 parent dc642e5
commit 6164201
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 33 deletions.
diff --git a/frontend/packages/data-portal/app/components/Download/ConfigureDownloadContent.tsx b/frontend/packages/data-portal/app/components/Download/ConfigureDownloadContent.tsx
@@ -10,12 +10,16 @@ import { ConfigureTomogramDownloadContent } from './ConfigureTomogramDownloadCon
 export function ConfigureDownloadContent() {
   const { t } = useI18n()
   const { datasetTitle, runName, objectName } = useDownloadModalContext()
-  const { annotationId, objectShapeType } = useDownloadModalQueryParamState()
+  const { annotationName, annotationId, objectShapeType } =
+    useDownloadModalQueryParamState()
 
   return (
     <>
       <ModalSubtitle label={t('datasetName')} value={datasetTitle} />
       {runName && <ModalSubtitle label={t('runName')} value={runName} />}
+      {annotationName && (
+        <ModalSubtitle label={t('annotationName')} value={annotationName} />
+      )}
       {annotationId && (
         <ModalSubtitle
           label={t('annotationId')}

diff --git a/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx b/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx
@@ -46,6 +46,7 @@ export function DownloadOptionsContent() {
     referenceTomogramId,
     fileFormat,
     objectShapeType,
+    annotationName,
   } = useDownloadModalQueryParamState()
   const {
     allTomograms,
@@ -98,6 +99,9 @@ export function DownloadOptionsContent() {
           />
         </>
       )}
+      {annotationName && (
+        <ModalSubtitle label={t('annotationName')} value={annotationName} />
+      )}
       {annotationId && (
         <ModalSubtitle label={t('annotationId')} value={annotationId} />
       )}

diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 
 import { Button, Icon } from '@czi-sds/components'
+import Skeleton from '@mui/material/Skeleton'
 import { useSearchParams } from '@remix-run/react'
 import {
   ColumnDef,
@@ -15,6 +16,7 @@ import { AuthorList } from 'app/components/AuthorList'
 import { I18n } from 'app/components/I18n'
 import { CellHeader, PageTable, TableCell } from 'app/components/Table'
 import { Tooltip } from 'app/components/Tooltip'
+import { IdPrefix } from 'app/constants/idPrefixes'
 import {
   methodLabels,
   methodTooltipLabels,
@@ -55,6 +57,7 @@ const LOADING_ANNOTATIONS = range(0, MAX_PER_PAGE).map<AnnotationRow>(() => ({
   https_path: '',
   s3_path: '',
   shape_type: '',
+  fileId: 0,
 }))
 
 function ConfidenceValue({ value }: { value: number }) {
@@ -139,47 +142,64 @@ export function AnnotationTable() {
       columnHelper.accessor('id', {
         header: () => (
           <CellHeader width={AnnotationTableWidths.id}>
-            {t('annotationId')}
+            {t('annotationName')}
           </CellHeader>
         ),
 
         cell: ({ row: { original: annotation } }) => (
           <TableCell
             className="flex flex-col gap-sds-xxxs !items-start"
-            renderLoadingSkeleton={false}
+            renderLoadingSkeleton={() => (
+              <div>
+                <Skeleton className="w-[200px]" variant="text" />
+                <Skeleton className="w-[200px]" variant="text" />
+                <Skeleton className="w-[100px]" variant="text" />
+              </div>
+            )}
             width={AnnotationTableWidths.id}
           >
-            <div className="flex gap-sds-xs items-center">
+            <div>
               <p
                 className={cns(
                   'text-sds-body-m leading-sds-body-m font-semibold',
-                  'text-ellipsis line-clamp-1 break-all',
+                  'text-ellipsis line-clamp-2 break-all',
                 )}
-                data-testid={TestIds.AnnotationId}
               >
-                {annotation.id}
+                <span>{annotation.fileId} </span>
+                <span>{annotation.object_name}</span>
               </p>
 
-              {annotation.ground_truth_status && (
-                <Tooltip
-                  tooltip={<I18n i18nKey="groundTruthTooltip" />}
-                  placement="top"
-                >
-                  <div
-                    className={cnsNoMerge(
-                      'px-sds-xs py-sds-xxxs',
-                      'flex items-center justify-center',
-                      'rounded-sds-m bg-sds-color-primitive-blue-200',
-                      'text-sds-body-xxxs leading-sds-body-xxxs text-sds-color-primitive-blue-600 whitespace-nowrap',
-                    )}
+              <div className="flex items-center gap-sds-xxs">
+                <p className="text-sds-body-xxs leading-sds-body-xxs">
+                  <span>
+                    {t('annotationId')}: {IdPrefix.Annotation}-
+                  </span>
+                  <span data-testid={TestIds.AnnotationId}>
+                    {annotation.id}
+                  </span>
+                </p>
+
+                {annotation.ground_truth_status && (
+                  <Tooltip
+                    tooltip={<I18n i18nKey="groundTruthTooltip" />}
+                    placement="top"
                   >
-                    {t('groundTruth')}
-                  </div>
-                </Tooltip>
-              )}
+                    <div
+                      className={cnsNoMerge(
+                        'px-sds-xs py-sds-xxxs',
+                        'flex items-center justify-center',
+                        'rounded-sds-m bg-sds-color-primitive-blue-200',
+                        'text-sds-body-xxxs leading-sds-body-xxxs text-sds-color-primitive-blue-600 whitespace-nowrap',
+                      )}
+                    >
+                      {t('groundTruth')}
+                    </div>
+                  </Tooltip>
+                )}
+              </div>
             </div>
 
-            <div className=" text-sds-color-primitive-gray-600 text-sds-body-xxs leading-sds-header-xxs">
+            <div className="text-sds-color-semantic-text-base-secondary text-sds-body-xxs leading-sds-header-xxs mt-sds-s">
               <AuthorList authors={annotation.authors} compact />
             </div>
           </TableCell>
@@ -326,6 +346,7 @@ export function AnnotationTable() {
                     referenceTomogramId: tomograms[0]?.id, // TODO(bchu): is_portal_standard
                     objectShapeType: annotation.shape_type,
                     fileFormat: annotation.format,
+                    annotationName: `${annotation.fileId} ${annotation.object_name}`,
                   })
                 }
                 startIcon={
@@ -356,8 +377,13 @@ export function AnnotationTable() {
   const annotations = useMemo(
     () =>
       annotationFiles.map((annotationFile) => {
-        const { annotation: _, ...restAnnotationFileFields } = annotationFile
+        const {
+          annotation: _,
+          id,
+          ...restAnnotationFileFields
+        } = annotationFile
         return {
+          fileId: id,
           ...restAnnotationFileFields,
           ...annotationFile.annotation,
         } as AnnotationRow

diff --git a/frontend/packages/data-portal/app/constants/query.ts b/frontend/packages/data-portal/app/constants/query.ts
@@ -1,5 +1,6 @@
 export enum QueryParams {
   AnnotationId = 'annotation_id',
+  AnnotationName = 'annotation_name',
   AnnotationSoftware = 'annotation-software',
   AnnotationsPage = 'annotations-page',
   AuthorName = 'author',

diff --git a/frontend/packages/data-portal/app/graphql/getRunById.server.ts b/frontend/packages/data-portal/app/graphql/getRunById.server.ts
@@ -186,6 +186,7 @@ const GET_RUN_BY_ID_QUERY = gql(`
       limit: $limit
       offset: $annotationsOffset
     ) {
+      id
       shape_type
       format
 

diff --git a/frontend/packages/data-portal/app/hooks/useDownloadModalQueryParamState.ts b/frontend/packages/data-portal/app/hooks/useDownloadModalQueryParamState.ts
@@ -37,6 +37,10 @@ export function useDownloadModalQueryParamState() {
     QueryParams.AnnotationId,
   )
 
+  const [annotationName, setAnnotationName] = useQueryParam<string>(
+    QueryParams.AnnotationName,
+  )
+
   const [tomogramId, setTomogramId] = useQueryParam<string>(
     QueryParams.DownloadTomogramId,
   )
@@ -64,6 +68,7 @@ export function useDownloadModalQueryParamState() {
     [QueryParams.ReferenceTomogramId]: stringParam(),
     [QueryParams.ObjectShapeType]: stringParam(),
     [QueryParams.FileFormat]: stringParam(),
+    [QueryParams.AnnotationName]: stringParam(),
   })
 
   const getPlausiblePayload = useCallback(
@@ -152,6 +157,7 @@ export function useDownloadModalQueryParamState() {
         [QueryParams.ReferenceTomogramId]: String(payload.referenceTomogramId),
         [QueryParams.ObjectShapeType]: payload.objectShapeType,
         [QueryParams.FileFormat]: payload.fileFormat,
+        [QueryParams.AnnotationName]: payload.annotationName,
       })
     },
     [getPlausiblePayload, plausible, setDownloadParams],
@@ -283,5 +289,7 @@ export function useDownloadModalQueryParamState() {
     setTomogramSampling,
     tomogramProcessing,
     tomogramSampling,
+    annotationName,
+    setAnnotationName,
   }
 }
diff --git a/frontend/packages/data-portal/app/hooks/usePlausible.ts b/frontend/packages/data-portal/app/hooks/usePlausible.ts
@@ -28,6 +28,7 @@ export enum Events {
 
 export type PlausibleDownloadModalPayload<T = object> = T & {
   annotationId?: number
+  annotationName?: string
   tomogramId?: number
   referenceTomogramId?: number
   config?: DownloadConfig

diff --git a/frontend/packages/data-portal/app/state/annotation.ts b/frontend/packages/data-portal/app/state/annotation.ts
@@ -8,7 +8,10 @@ export type BaseAnnotation =
 
 export type AnnotationFile = GetRunByIdQuery['annotation_files'][number]
 
-export type AnnotationRow = BaseAnnotation & Omit<AnnotationFile, 'annotation'>
+export type AnnotationRow = BaseAnnotation &
+  Omit<AnnotationFile, 'annotation'> & {
+    fileId: number
+  }
 
 const activeAnnotationAtom = atom<AnnotationRow | null>(null)
 

diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json
@@ -30,14 +30,15 @@
   "annotationConfidence": "Annotation Confidence",
   "annotationDetails": "Annotation Details",
   "annotationId": "Annotation ID",
-  "annotationsMayRequireTransformation": "Annotations may require transformation if the desired tomogram has a different Alignment ID.",
   "annotationMetadata": "Annotation Metadata",
   "annotationMethod": "Annotation Method",
   "annotationMethodsSummary": "Annotation Methods Summary",
+  "annotationName": "Annotation Name",
   "annotationObject": "Annotation Object",
   "annotationOverview": "Annotation Overview",
   "annotationSoftware": "Annotation Software",
   "annotations": "Annotations",
+  "annotationsMayRequireTransformation": "Annotations may require transformation if the desired tomogram has a different Alignment ID.",
   "annotationsSummary": "Annotations Summary",
   "annotationsTotal": "Annotations (Total)",
   "api": "API",
@@ -48,10 +49,10 @@
   "authorName": "Author Name",
   "authorNameLegend": "Author Name Legend",
   "authorOrcid": "Author ORCID",
-  "authors": "Authors",
-  "authorsMaybePlural": "Author(s)",
   "authorSubmitted": "Author Submitted",
   "authorSubmittedTooltip": "<semibold>Author Submitted:</semibold> Tomogram contributed by the dataset author.",
+  "authors": "Authors",
+  "authorsMaybePlural": "Author(s)",
   "automated": "Automated",
   "available": "Available",
   "availableFiles": "Available Files",
@@ -105,7 +106,6 @@
   "dataSummary": "Data Summary",
   "dataset": "Dataset",
   "datasetAuthor": "Dataset Author",
-  "datasetsDescription": "Datasets are contributed sets of files associated with imaging one sample type with the same experimental conditions.",
   "datasetDetails": "Dataset Details",
   "datasetId": "Dataset ID",
   "datasetIds": "Dataset IDs",
@@ -114,18 +114,19 @@
   "datasetOverview": "Dataset Overview",
   "datasetTitle": "Dataset Title",
   "datasets": "Datasets",
+  "datasetsDescription": "Datasets are contributed sets of files associated with imaging one sample type with the same experimental conditions.",
   "datasetsTab": "Datasets {{count}}",
   "deposition": "Deposition",
   "depositionAnnotationsOnly": "Deposition annotations only",
   "depositionData": "Datasets with Deposition Data",
   "depositionDate": "Deposition Date",
-  "depositionsDescription": "Depositions are collections of datasets, annotations, and/or (in the future) tomograms contributed by the same author(s). The website currently shows only depositions that include annotations.",
   "depositionDetails": "Deposition Details",
   "depositionId": "Deposition ID",
   "depositionName": "Deposition Name",
   "depositionOnly": "Deposition only",
   "depositionOverview": "Deposition Overview",
   "depositions": "Depositions",
+  "depositionsDescription": "Depositions are collections of datasets, annotations, and/or (in the future) tomograms contributed by the same author(s). The website currently shows only depositions that include annotations.",
   "depositionsTab": "Depositions {{count}}",
   "description": "Description",
   "developAMLModel": "Develop a ML model for annotating subcellular structures and proteins in CryoET data",
@@ -244,10 +245,10 @@
   "next": "Next",
   "no": "No",
   "noAnnotationsAvailable": "No Annotations Available",
-  "normalText": "Normal text",
-  "notApplicable": "Not Applicable",
   "noTomogramAvailable": "No tomogram available",
   "noTomogramsAvailable": "No tomograms available",
+  "normalText": "Normal text",
+  "notApplicable": "Not Applicable",
   "notSubmitted": "Not Submitted",
   "numberOfAnnotations": "Number of Annotations",
   "numberOfRuns": "Number of Runs",