feat: Add Tomograms tab to Run page (#983)

#624 Adds basic tabs functionality (UX not final). Currently the Tomograms tab just shows the Annotations table with no filters. Next: Add initial Tomograms table. https://github.com/user-attachments/assets/cb54c5b1-e4a3-40a4-a4ac-40f072a06e11
chanzuckerberg · Aug 2, 2024 · c357e6e · c357e6e
1 parent f21d83b
commit c357e6e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/frontend/packages/data-portal/app/components/TablePageLayout.tsx b/frontend/packages/data-portal/app/components/TablePageLayout.tsx
@@ -58,8 +58,12 @@ export function TablePageLayout({
         {header}
 
         {tabs.length > 1 && (
-          <>
-            {tabsTitle && <div className="text-sds-header-l">{tabsTitle}</div>}
+          <div className="max-w-content w-full self-center px-sds-xl">
+            {tabsTitle && (
+              <div className="text-sds-header-l leading-sds-header-l font-semibold mb-sds-s">
+                {tabsTitle}
+              </div>
+            )}
             <Tabs
               value={activeTab.title}
               onChange={(tabTitle: string) => {
@@ -70,18 +74,19 @@ export function TablePageLayout({
               }}
               tabs={tabs.map((tab) => ({
                 label: (
-                  <>
+                  <div>
                     <span>{tab.title}</span>
-                    <span className="text-sds-gray-500 ml-[24px]">
+                    <span className="text-sds-gray-500 ml-[16px]">
                       {tab.filteredCount}
                     </span>
-                  </>
+                  </div>
                 ),
                 value: tab.title,
               }))}
             />
-          </>
+          </div>
         )}
+
         <TablePageTabContent {...activeTab} />
 
         {drawers}

diff --git a/frontend/packages/data-portal/app/constants/query.ts b/frontend/packages/data-portal/app/constants/query.ts
@@ -32,4 +32,5 @@ export enum QueryParams {
   TiltRangeMin = 'tilt_min',
   TomogramProcessing = 'tomogram-processing',
   TomogramSampling = 'tomogram-sampling',
+  TomogramsPage = 'tomograms-page',
 }
diff --git a/frontend/packages/data-portal/app/routes/runs.$id.tsx b/frontend/packages/data-portal/app/routes/runs.$id.tsx
@@ -20,9 +20,9 @@ import { useDownloadModalQueryParamState } from 'app/hooks/useDownloadModalQuery
 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 { useFeatureFlag } from 'app/utils/featureFlags'
 import { shouldRevalidatePage } from 'app/utils/revalidate'
 
 export async function loader({ request, params }: LoaderFunctionArgs) {
@@ -74,6 +74,8 @@ export function shouldRevalidate(args: ShouldRevalidateFunctionArgs) {
 }
 
 export default function RunByIdPage() {
+  const multipleTomogramsEnabled = useFeatureFlag('multipleTomograms')
+
   const { run, annotationFilesAggregates } = useRunById()
 
   const allTomogramResolutions = run.tomogram_stats.flatMap((stats) =>
@@ -166,6 +168,7 @@ export default function RunByIdPage() {
   return (
     <TablePageLayout
       header={<RunHeader />}
+      tabsTitle={multipleTomogramsEnabled ? t('browseRunData') : undefined}
       tabs={[
         {
           title: t('annotations'),
@@ -174,8 +177,20 @@ export default function RunByIdPage() {
           pageQueryParamKey: QueryParams.AnnotationsPage,
           filteredCount: annotationFilesAggregates.filteredCount,
           totalCount: annotationFilesAggregates.totalCount,
-          countLabel: i18n.annotations,
+          countLabel: t('annotations'),
         },
+        ...(multipleTomogramsEnabled
+          ? [
+              {
+                title: t('tomograms'),
+                table: <AnnotationTable />,
+                pageQueryParamKey: QueryParams.TomogramsPage,
+                filteredCount: annotationFilesAggregates.filteredCount,
+                totalCount: annotationFilesAggregates.totalCount,
+                countLabel: t('tomograms'),
+              },
+            ]
+          : []),
       ]}
       downloadModal={
         <DownloadModal

diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json
@@ -54,6 +54,7 @@
   "boldedText": "Bolded text",
   "browse": "Browse",
   "browseData": "Browse Data",
+  "browseRunData": "Browse Run Data",
   "cameraManufacturer": "Camera Manufacturer",
   "cameraModel": "Camera Model",
   "cancel": "Cancel",