update annotation row name

chanzuckerberg · Sep 19, 2024 · 4b446e1 · 4b446e1
1 parent 1227fbb
commit 4b446e1
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 29 deletions.
diff --git a/frontend/packages/data-portal/app/components/Download/ConfigureDownloadContent.tsx b/frontend/packages/data-portal/app/components/Download/ConfigureDownloadContent.tsx
@@ -9,12 +9,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')} value={annotationId} />
       )}

diff --git a/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx b/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx
@@ -37,6 +37,7 @@ export function DownloadOptionsContent() {
     annotationId,
     fileFormat,
     objectShapeType,
+    annotationName,
   } = useDownloadModalQueryParamState()
   const { activeTomogram } = useDownloadModalContext()
 
@@ -95,6 +96,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,
@@ -55,6 +56,7 @@ const LOADING_ANNOTATIONS = range(0, MAX_PER_PAGE).map<AnnotationRow>(() => ({
   https_path: '',
   s3_path: '',
   shape_type: '',
+  fileId: 0,
 }))
 
 function ConfidenceValue({ value }: { value: number }) {
@@ -138,44 +140,59 @@ 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>Annotation ID: AN-</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">
@@ -324,6 +341,7 @@ export function AnnotationTable() {
                     annotationId: annotation.id,
                     objectShapeType: annotation.shape_type,
                     fileFormat: annotation.format,
+                    annotationName: `${annotation.fileId} ${annotation.object_name}`,
                   })
                 }
                 startIcon={
@@ -353,8 +371,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
@@ -38,6 +38,10 @@ export function useDownloadModalQueryParamState() {
     QueryParams.AnnotationId,
   )
 
+  const [annotationName, setAnnotationName] = useQueryParam<string>(
+    QueryParams.AnnotationName,
+  )
+
   const [tomogramId, setTomogramId] = useQueryParam<string>(
     QueryParams.DownloadTomogramId,
   )
@@ -147,6 +151,7 @@ export function useDownloadModalQueryParamState() {
         [QueryParams.AnnotationId]: String(payload.annotationId),
         [QueryParams.ObjectShapeType]: payload.objectShapeType,
         [QueryParams.FileFormat]: payload.fileFormat,
+        [QueryParams.AnnotationName]: payload.annotationName,
       })
     },
     [getPlausiblePayload, plausible, setDownloadParams],
@@ -286,5 +291,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
   config?: DownloadConfig
   datasetId?: number

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
@@ -33,6 +33,7 @@
   "annotationMetadata": "Annotation Metadata",
   "annotationMethod": "Annotation Method",
   "annotationMethodsSummary": "Annotation Methods Summary",
+  "annotationName": "Annotation Name",
   "annotationObject": "Annotation Object",
   "annotationOverview": "Annotation Overview",
   "annotationSoftware": "Annotation Software",
@@ -102,7 +103,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",
@@ -111,18 +111,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",
@@ -235,10 +236,10 @@
   "ndJsonLink": "https://zarr.readthedocs.io/en/stable/",
   "next": "Next",
   "no": "No",
-  "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",
-Original file line number
+Diff line change
@@ Expand Up / @@ -186,6 +186,7 @@ const GET_RUN_BY_ID_QUERY = gql(` @@
           limit: $limit
           offset: $annotationsOffset
         ) {
+          id
           shape_type
           format
@@ Expand Down @@