From a6ef66eaa35844dc4dee6d23aeeadb8c6da9a460 Mon Sep 17 00:00:00 2001
From: Bryan Chu <151689101+bchu1@users.noreply.github.com>
Date: Wed, 4 Sep 2024 10:40:18 -0700
Subject: [PATCH] feat: More updates to tomograms table (#1106)

#1097


![image](https://github.com/user-attachments/assets/913160a8-15b4-4bbb-b6a8-a379d005f67e)
---
 .../app/components/Run/TomogramTable.tsx      | 24 +++++++++++--------
 .../app/components/TablePageLayout.tsx        |  2 +-
 .../data-portal/app/constants/table.ts        | 14 +++++------
 .../app/graphql/getRunById.server.ts          |  3 +++
 .../data-portal/app/utils/tomograms.ts        | 10 ++++++++
 .../public/locales/en/translation.json        |  1 +
 6 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx b/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx
index 84cf71f8d..e16c023d5 100644
--- 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,19 +58,24 @@ 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 />
@@ -77,9 +83,7 @@ export function TomogramsTable() {
           </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
index bec259868..e5ea63d49 100644
--- 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
index c42913454..f508d3f34 100644
--- 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
index d90114b2a..3b54ff591 100644
--- 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
index dd49999c0..d0cfd7ca7 100644
--- 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
index 1cb94919c..246c6698e 100644
--- 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",