feat: More updates to tomograms table (#1106)

#1097 ![image](https://github.com/user-attachments/assets/913160a8-15b4-4bbb-b6a8-a379d005f67e)
chanzuckerberg · Sep 4, 2024 · a6ef66e · a6ef66e
1 parent 01a8b67
commit a6ef66e
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 18 deletions.
diff --git a/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx b/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx
@@ -18,6 +18,7 @@ import {
   metadataDrawerTomogramAtom,
   Tomogram,
 } from 'app/state/metadataDrawerTomogram'
+import { getTomogramName } from 'app/utils/tomograms'
 
 import { AuthorList } from '../AuthorList'
 import { KeyPhoto } from '../KeyPhoto'
@@ -57,29 +58,32 @@ export function TomogramsTable() {
       }),
       columnHelper.accessor('id', {
         header: () => (
-          <CellHeader width={TomogramTableWidths.id}>
-            {t('tomogramId')}
+          <CellHeader width={TomogramTableWidths.name}>
+            {t('tomogramName')}
           </CellHeader>
         ),
         cell: ({ row: { original } }) => (
           <TableCell
             className="flex flex-col gap-sds-xxxs !items-start"
-            width={TomogramTableWidths.id}
+            width={TomogramTableWidths.name}
           >
-            <div className="flex gap-sds-xs items-center">
-              <p className="text-sds-body-m leading-sds-body-m font-semibold text-ellipsis line-clamp-1 break-all">
-                {original.id}
-              </p>
+            <div className="text-sds-body-m leading-sds-body-m font-semibold text-ellipsis line-clamp-1 break-all">
+              {getTomogramName(
+                original.id,
+                original.reconstruction_method,
+                original.processing,
+              )}
+            </div>
+            <div className="text-sds-body-xxs">
+              {t('tomogramId')}: {original.id}
             </div>
             <div className=" text-sds-gray-600 text-sds-body-xxs leading-sds-header-xxs">
               <AuthorList authors={original.authors} compact />
             </div>
           </TableCell>
         ),
       }),
-      // TODO(bchu): Switch to deposition_date when available.
-      columnHelper.accessor('name', {
-        id: 'deposition_date',
+      columnHelper.accessor('deposition.deposition_date', {
         header: () => (
           <CellHeader
             className="whitespace-nowrap text-ellipsis"

diff --git a/frontend/packages/data-portal/app/components/TablePageLayout.tsx b/frontend/packages/data-portal/app/components/TablePageLayout.tsx
@@ -156,7 +156,7 @@ function TablePageTabContent({
         <div
           className={cns(
             'flex flex-col flex-auto screen-2040:items-center',
-            'pt-sds-xl pb-sds-xxl',
+            'pb-sds-xxl',
             'border-t border-sds-gray-300',
             'overflow-x-scroll max-w-full',
           )}

diff --git a/frontend/packages/data-portal/app/constants/table.ts b/frontend/packages/data-portal/app/constants/table.ts
@@ -34,13 +34,13 @@ export const AnnotationTableWidths = {
 // TODO(bchu): Finalize these numbers.
 export const TomogramTableWidths = {
   photo: PHOTO_COLUMN_WIDTH,
-  id: { min: 250 },
-  depositionDate: { min: 91, max: 120 },
-  alignment: { min: 120, max: 130 },
-  voxelSpacing: { min: 120, max: 400 },
-  reconstructionMethod: { min: 120, max: 400 },
-  postProcessing: { min: 81, max: 120 },
-  actions: { min: 175, max: 120 },
+  name: { min: 250 },
+  depositionDate: { max: 155 },
+  alignment: { max: 120 },
+  voxelSpacing: { max: 200 },
+  reconstructionMethod: { max: 200 },
+  postProcessing: { max: 200 },
+  actions: { width: 164 },
 }
 
 export const RunTableWidths = {

diff --git a/frontend/packages/data-portal/app/graphql/getRunById.server.ts b/frontend/packages/data-portal/app/graphql/getRunById.server.ts
@@ -256,6 +256,9 @@ const GET_RUN_BY_ID_QUERY = gql(`
       size_y
       size_z
       voxel_spacing
+      deposition {
+        deposition_date
+      }
       tomogram_voxel_spacing {
         id
         s3_prefix

diff --git a/frontend/packages/data-portal/app/utils/tomograms.ts b/frontend/packages/data-portal/app/utils/tomograms.ts
@@ -1,3 +1,13 @@
+import { startCase } from 'lodash-es'
+
 export function isFiducial(status: string | null | undefined) {
   return status === 'FIDUCIAL'
 }
+
+export function getTomogramName(
+  id: number,
+  reconstructionMethod: string,
+  postProcessing: string,
+): string {
+  return startCase(`${id} ${reconstructionMethod} ${postProcessing}`)
+}
diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json
@@ -354,6 +354,7 @@
   "tomogramDetails": "Tomogram Details",
   "tomogramId": "Tomogram ID",
   "tomogramMetadata": "Tomogram Metadata",
+  "tomogramName": "Tomogram Name",
   "tomogramProcessing": "Tomogram Processing",
   "tomogramSampling": "Tomogram Sampling",
   "tomograms": "Tomograms",