fix: show all annotation shape types (#679)

#638

Fixes issue with the annotation table now showing each shape type on a
separate row

## Demo

<img width="1726" alt="image"
src="https://github.com/chanzuckerberg/cryoet-data-portal/assets/2176050/4e1b59f7-a3aa-4b8a-85a5-0a5cd2ed9a93">

frontend/packages/data-portal/app/components/Run/AnnotationObjectTable.tsx

@@ -35,7 +35,7 @@ export function AnnotationObjectTable() {
         },
         {
           label: t('objectShapeType'),
-          values: [annotation.files[0].shape_type],
+          values: [annotation.shape_type],
         },
         {
           label: t('objectState'),

frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx

@@ -38,6 +38,10 @@ const LOADING_ANNOTATIONS = range(0, MAX_PER_PAGE).map<Annotation>(() => ({
   object_id: '',
   object_name: '',
   release_date: '',
+  format: '',
+  https_path: '',
+  s3_path: '',
+  shape_type: '',
 }))
 
 function ConfidenceValue({ value }: { value: number }) {
@@ -226,9 +230,7 @@ export function AnnotationTable() {
         ),
       }),
 
-      columnHelper.accessor('files', {
-        id: 'shape-type',
-
+      columnHelper.accessor('shape_type', {
         header: () => (
           <CellHeader width={AnnotationTableWidths.files}>
             {t('objectShapeType')}
@@ -237,7 +239,7 @@ export function AnnotationTable() {
 
         cell: ({ getValue }) => (
           <TableCell width={AnnotationTableWidths.files}>
-            {getValue().at(0)?.shape_type ?? '--'}
+            {getValue()}
           </TableCell>
         ),
       }),
@@ -333,8 +335,7 @@ export function AnnotationTable() {
                       datasetId: run.dataset.id,
                       runId: run.id,
                       annotationId: annotation.id,
-                      // FIXME: are we supposed to only access the 1st option? (this is how it is done elsewhere)
-                      objectShapeType: annotation.files[0].shape_type,
+                      objectShapeType: annotation.shape_type,
                     })
                   }
                   startIcon={
@@ -359,8 +360,27 @@ export function AnnotationTable() {
     run.id,
   ])
 
-  const annotations = useMemo<Annotation[]>(
-    () => run.annotation_table.flatMap((data) => data.annotations),
+  const annotations = useMemo(
+    () =>
+      run.annotation_table.flatMap((data) =>
+        data.annotations.flatMap((annotation) => {
+          const shapeTypeSet = new Set<string>()
+
+          const files = annotation.files.filter((file) => {
+            if (shapeTypeSet.has(file.shape_type)) {
+              return false
+            }
+
+            shapeTypeSet.add(file.shape_type)
+            return true
+          })
+
+          return files.flatMap((file) => ({
+            ...annotation,
+            ...file,
+          }))
+        }),
+      ) as Annotation[],
     [run.annotation_table],
   )
 

frontend/packages/data-portal/app/routes/runs.$id.tsx

@@ -20,6 +20,7 @@ import { useFileSize } from 'app/hooks/useFileSize'
 import { useI18n } from 'app/hooks/useI18n'
 import { useRunById } from 'app/hooks/useRunById'
 import { i18n } from 'app/i18n'
+import { Annotation } from 'app/state/annotation'
 import { DownloadConfig } from 'app/types/download'
 import { shouldRevalidatePage } from 'app/utils/revalidate'
 
@@ -73,12 +74,6 @@ export default function RunByIdPage() {
     stats.tomogram_processing.map((tomogram) => tomogram.processing),
   )
 
-  const allAnnotations = new Map(
-    run.annotation_table
-      .flatMap((table) => table.annotations.map((annotation) => annotation))
-      .map((annotation) => [annotation.id, annotation]),
-  )
-
   const {
     downloadConfig,
     tomogramProcessing,
@@ -100,9 +95,33 @@ export default function RunByIdPage() {
   const tomogram = run.tomogram_voxel_spacings.at(0)
   const { t } = useI18n()
 
-  const activeAnnotation = annotationId
-    ? allAnnotations.get(+annotationId)
-    : null
+  const activeAnnotation = useMemo(() => {
+    const allAnnotations = new Map(
+      run.annotation_table
+        .flatMap((table) => table.annotations.map((annotation) => annotation))
+        .map((annotation) => [annotation.id, annotation]),
+    )
+
+    const activeBaseAnnotation = annotationId
+      ? allAnnotations.get(+annotationId)
+      : null
+
+    const activeAnnotationFile = objectShapeType
+      ? activeBaseAnnotation?.files.find(
+          (file) => file.shape_type === objectShapeType,
+        )
+      : null
+
+    const result =
+      activeBaseAnnotation && activeAnnotationFile
+        ? {
+            ...activeBaseAnnotation,
+            ...activeAnnotationFile,
+          }
+        : null
+
+    return result as Annotation | null
+  }, [annotationId, objectShapeType, run.annotation_table])
 
   const httpsPath = useMemo(() => {
     if (activeAnnotation) {

frontend/packages/data-portal/app/state/annotation.ts

@@ -3,9 +3,14 @@ import { useMemo } from 'react'
 
 import { GetRunByIdQuery } from 'app/__generated__/graphql'
 
-export type Annotation =
+export type BaseAnnotation =
   GetRunByIdQuery['runs'][number]['annotation_table'][number]['annotations'][number]
 
+export type AnnotationFile =
+  GetRunByIdQuery['runs'][number]['annotation_table'][number]['annotations'][number]['files'][number]
+
+export type Annotation = BaseAnnotation & AnnotationFile
+
 const activeAnnotationAtom = atom<Annotation | null>(null)
 
 export function useAnnotation() {