feat: navigation styling updates (#614)

#596 Implements navigation style updates for the the dataset and run pages ## Demos https://dev-nav-changes.cryoet.dev.si.czi.technology/ <img width="536" alt="image" src="https://github.com/chanzuckerberg/cryoet-data-portal/assets/2176050/f2d6f921-0687-48aa-89a6-33949ab760cc"> <img width="320" alt="image" src="https://github.com/chanzuckerberg/cryoet-data-portal/assets/2176050/fbab2fc3-2c04-448a-9b3c-bde34bc98b1e"> <img width="932" alt="image" src="https://github.com/chanzuckerberg/cryoet-data-portal/assets/2176050/74c4fed4-8b53-41f3-9d57-e8449e466ba5"> <img width="481" alt="image" src="https://github.com/chanzuckerberg/cryoet-data-portal/assets/2176050/2c1a2a01-1536-4f85-90a6-0ccb911b2ba9">
chanzuckerberg · Apr 25, 2024 · fb63462 · fb63462
1 parent 42cc41e
commit fb63462
Show file tree

Hide file tree

Showing 20 changed files with 153 additions and 116 deletions.
diff --git a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
@@ -56,6 +56,33 @@ export function DatasetTable() {
 
     try {
       return [
+        columnHelper.accessor('key_photo_thumbnail_url', {
+          header: () => <p />,
+
+          cell({ row: { original: dataset } }) {
+            const previousUrl = `${location.pathname}${location.search}`
+            const datasetUrl = `/datasets/${
+              dataset.id
+            }?prev=${encodeURIComponent(previousUrl)}`
+
+            return (
+              <TableCell
+                renderLoadingSkeleton={false}
+                width={DatasetTableWidths.photo}
+              >
+                <Link to={datasetUrl} className="max-w-[134px]">
+                  <KeyPhoto
+                    className="max-w-[134px]"
+                    title={dataset.title}
+                    src={dataset.key_photo_thumbnail_url ?? undefined}
+                    loading={isLoadingDebounced}
+                  />
+                </Link>
+              </TableCell>
+            )
+          },
+        }),
+
         columnHelper.accessor('id', {
           header: () => (
             <CellHeader
@@ -79,7 +106,7 @@ export function DatasetTable() {
               }}
               width={DatasetTableWidths.id}
             >
-              {t('dataset')}
+              {t('datasetName')}
             </CellHeader>
           ),
 
@@ -95,14 +122,6 @@ export function DatasetTable() {
                 renderLoadingSkeleton={false}
                 width={DatasetTableWidths.id}
               >
-                <Link to={datasetUrl} className="flex-shrink-0 w-[134px]">
-                  <KeyPhoto
-                    title={dataset.title}
-                    src={dataset.key_photo_thumbnail_url ?? undefined}
-                    loading={isLoadingDebounced}
-                  />
-                </Link>
-
                 <div className="flex flex-col flex-auto gap-sds-xxxs min-h-[100px]">
                   <p className="text-sm font-semibold text-sds-primary-400">
                     {isLoadingDebounced ? (
@@ -116,7 +135,7 @@ export function DatasetTable() {
                     {isLoadingDebounced ? (
                       <Skeleton className="max-w-[120px]" variant="text" />
                     ) : (
-                      `${t('portalId')}: ${dataset.id}`
+                      `${t('datasetId')}: ${dataset.id}`
                     )}
                   </p>
 

diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx
@@ -33,9 +33,8 @@ export function DatasetHeader() {
       lastModifiedDate={dataset.last_modified_date ?? dataset.deposition_date}
       metadata={[
         {
-          key: t('portalId'),
+          key: t('datasetId'),
           value: String(dataset.id),
-          uppercase: true,
         },
       ]}
       onMoreInfoClick={() => toggleDrawer(MetadataDrawerId.Dataset)}

diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
@@ -62,7 +62,7 @@ export function DatasetMetadataTable({
     },
 
     !!allFields && {
-      label: t('portalId'),
+      label: t('datasetId'),
       values: [`${dataset.id!}`],
     },
 

diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
@@ -43,14 +43,41 @@ export function RunsTable() {
     const columnHelper = createColumnHelper<Run>()
 
     return [
+      columnHelper.accessor(
+        (run) =>
+          run.tomogram_voxel_spacings.at(0)?.tomograms.at(0)
+            ?.key_photo_thumbnail_url,
+        {
+          id: 'key-photo',
+          header: () => <p />,
+
+          cell: ({ row: { original: run } }) => (
+            <TableCell
+              width={RunTableWidths.photo}
+              renderLoadingSkeleton={false}
+            >
+              <KeyPhoto
+                className="max-w-[134px]"
+                title={run.name}
+                src={
+                  run.tomogram_voxel_spacings?.[0]?.tomograms?.[0]
+                    ?.key_photo_thumbnail_url ?? undefined
+                }
+                loading={isLoadingDebounced}
+              />
+            </TableCell>
+          ),
+        },
+      ),
+
       columnHelper.accessor('name', {
         header: () => (
           <CellHeader
             tooltip={<I18n i18nKey="runsTooltip" />}
             arrowPadding={{ right: 260 }}
             width={RunTableWidths.name}
           >
-            {t('runs')}
+            {t('runName')}
           </CellHeader>
         ),
         cell({ row: { original: run } }) {
@@ -61,25 +88,29 @@ export function RunsTable() {
 
           return (
             <TableCell
-              className="flex w-full gap-4 overflow-ellipsis"
+              className="w-full gap-4 overflow-ellipsis"
               width={RunTableWidths.name}
               renderLoadingSkeleton={false}
             >
-              <KeyPhoto
-                title={run.name}
-                src={
-                  run.tomogram_voxel_spacings?.[0]?.tomograms?.[0]
-                    ?.key_photo_thumbnail_url ?? undefined
-                }
-                loading={isLoadingDebounced}
-              />
-
-              <div className="min-h-[100px] overflow-ellipsis overflow-hidden text-sds-primary-500 font-semibold">
+              <div className="min-h-[100px] overflow-ellipsis overflow-hidden">
                 {isLoadingDebounced ? (
                   <Skeleton className="max-w-[150px]" variant="text" />
                 ) : (
-                  <Link to={runUrl}>{run.name}</Link>
+                  <Link
+                    className="text-sds-primary-500 font-semibold"
+                    to={runUrl}
+                  >
+                    {run.name}
+                  </Link>
                 )}
+
+                <p className="text-xs text-sds-gray-600">
+                  {isLoadingDebounced ? (
+                    <Skeleton className="max-w-[120px]" variant="text" />
+                  ) : (
+                    `${t('runId')}: ${run.id}`
+                  )}
+                </p>
               </div>
             </TableCell>
           )

diff --git a/frontend/packages/data-portal/app/components/DatasetFilter/NameOrIdFilterSection.tsx b/frontend/packages/data-portal/app/components/DatasetFilter/NameOrIdFilterSection.tsx
@@ -1,47 +1,57 @@
+import { useMemo } from 'react'
+
 import {
   FilterSection,
   InputFilterData,
   MultiInputFilter,
 } from 'app/components/Filters'
 import { QueryParams } from 'app/constants/query'
-import { i18n } from 'app/i18n'
+import { useI18n } from 'app/hooks/useI18n'
+
+export function NameOrIdFilterSection() {
+  const { t } = useI18n()
 
-const DATASET_ID_FILTERS: InputFilterData[] = [
-  {
-    id: 'portal-id-input',
-    label: `${i18n.portalIdBlank}:`,
-    queryParam: QueryParams.PortalId,
-  },
-  {
-    id: 'empiar-id-input',
-    label: `${i18n.empiarID}:`,
-    queryParam: QueryParams.EmpiarId,
-  },
-  {
-    id: 'emdb-id-input',
-    label: `${i18n.emdb}:`,
-    queryParam: QueryParams.EmdbId,
-  },
-]
+  const datasetIdFilters = useMemo<InputFilterData[]>(
+    () => [
+      {
+        id: 'portal-id-input',
+        label: `${t('datasetId')}:`,
+        queryParam: QueryParams.DatasetId,
+      },
+      {
+        id: 'empiar-id-input',
+        label: `${t('empiarID')}:`,
+        queryParam: QueryParams.EmpiarId,
+      },
+      {
+        id: 'emdb-id-input',
+        label: `${t('emdb')}:`,
+        queryParam: QueryParams.EmdbId,
+      },
+    ],
+    [t],
+  )
 
-const AUTHOR_FILTERS: InputFilterData[] = [
-  {
-    id: 'author-name-input',
-    label: `${i18n.authorName}:`,
-    queryParam: QueryParams.AuthorName,
-  },
-  {
-    id: 'author-orcid-input',
-    label: `${i18n.authorOrcid}:`,
-    queryParam: QueryParams.AuthorOrcid,
-  },
-]
+  const authorFilters = useMemo<InputFilterData[]>(
+    () => [
+      {
+        id: 'author-name-input',
+        label: `${t('authorName')}:`,
+        queryParam: QueryParams.AuthorName,
+      },
+      {
+        id: 'author-orcid-input',
+        label: `${t('authorOrcid')}:`,
+        queryParam: QueryParams.AuthorOrcid,
+      },
+    ],
+    [t],
+  )
 
-export function NameOrIdFilterSection() {
   return (
-    <FilterSection title={i18n.nameOrId}>
-      <MultiInputFilter label={i18n.datasetIds} filters={DATASET_ID_FILTERS} />
-      <MultiInputFilter label={i18n.author} filters={AUTHOR_FILTERS} />
+    <FilterSection title={t('nameOrId')}>
+      <MultiInputFilter label={t('datasetIds')} filters={datasetIdFilters} />
+      <MultiInputFilter label={t('author')} filters={authorFilters} />
     </FilterSection>
   )
 }
diff --git a/frontend/packages/data-portal/app/components/KeyPhoto.tsx b/frontend/packages/data-portal/app/components/KeyPhoto.tsx
@@ -5,23 +5,27 @@ import { KeyPhotoFallbackIcon } from 'app/components/icons'
 import { cns } from 'app/utils/cns'
 
 export function KeyPhoto({
+  className,
   loading = false,
   src,
   title,
 }: {
+  className?: string
   loading?: boolean
   src?: string
   title: string
 }) {
   return (
     <div
       className={cns(
-        'flex-shrink-0 basis-[134px] aspect-[4/3]',
+        'flex-shrink-0 basis-[134px] aspect-[4/3] min-w-[134px]',
         'flex items-center justify-center bg-sds-gray-100',
         'rounded-sds-m',
 
         // crop image to container dimensions
         'overflow-hidden object-cover',
+
+        className,
       )}
     >
       {match([src, loading])

diff --git a/frontend/packages/data-portal/app/components/PageHeader.tsx b/frontend/packages/data-portal/app/components/PageHeader.tsx
@@ -96,7 +96,7 @@ export function PageHeader({
                       >
                         <span
                           className={cns(
-                            'font-semibold text-sds-caps-xxs leading-sds-caps-xxs tracking-sds-caps',
+                            'font-semibold text-sds-caps-xxs leading-sds-caps-xxs tracking-[0.3px]',
                             uppercase && 'uppercase',
                           )}
                         >

diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
@@ -1,5 +1,4 @@
 import { Button, Icon } from '@czi-sds/components'
-import { sum } from 'lodash-es'
 
 import { I18n } from 'app/components/I18n'
 import { KeyPhoto } from 'app/components/KeyPhoto'
@@ -69,37 +68,7 @@ export function RunHeader() {
       }
       backToResultsLabel={run.dataset.title}
       lastModifiedDate="2023-12-16"
-      metadata={[
-        // TODO fetch frames from API
-        { key: i18n.frames, value: i18n.nFiles(0) },
-
-        {
-          key: i18n.tiltSeries,
-          value: i18n.nFiles(run.tiltseries_aggregate.aggregate?.count ?? 0),
-        },
-
-        {
-          key: i18n.tomograms,
-          value: i18n.nFiles(
-            sum(
-              run.tomogram_stats.flatMap(
-                (stats) => stats.tomograms_aggregate.aggregate?.count ?? 0,
-              ),
-            ),
-          ),
-        },
-
-        {
-          key: i18n.annotations,
-          value: i18n.nFiles(
-            sum(
-              run.tomogram_stats.flatMap(
-                (stats) => stats.annotations_aggregate.aggregate?.count ?? 0,
-              ),
-            ),
-          ),
-        },
-      ]}
+      metadata={[{ key: t('runId'), value: `${run.id}` }]}
       onMoreInfoClick={() => toggleDrawer(MetadataDrawerId.Run)}
       title={run.name}
       renderHeader={({ moreInfo }) => (

diff --git a/frontend/packages/data-portal/app/components/Table/CellHeader.tsx b/frontend/packages/data-portal/app/components/Table/CellHeader.tsx
@@ -47,6 +47,7 @@ export function CellHeader({
       style={{
         maxWidth: columnWidth?.max,
         minWidth: columnWidth?.min,
+        width: columnWidth?.width,
       }}
       hideSortIcon={!showSort}
     >

diff --git a/frontend/packages/data-portal/app/components/Table/TableCell.tsx b/frontend/packages/data-portal/app/components/Table/TableCell.tsx
@@ -42,6 +42,7 @@ export function TableCell({
     style: {
       maxWidth: width?.max,
       minWidth: width?.min,
+      width: width?.width,
     },
   }
 

diff --git a/frontend/packages/data-portal/app/constants/query.ts b/frontend/packages/data-portal/app/constants/query.ts
@@ -4,6 +4,7 @@ export enum QueryParams {
   AuthorOrcid = 'author_orcid',
   AvailableFiles = 'files',
   CameraManufacturer = 'camera_manufacturer',
+  DatasetId = 'dataset_id',
   DownloadConfig = 'download-config',
   DownloadStep = 'download-step',
   DownloadTab = 'download-tab',
@@ -18,7 +19,6 @@ export enum QueryParams {
   ObjectShapeType = 'object_shape',
   Organism = 'organism',
   Page = 'page',
-  PortalId = 'portal_id',
   QualityScore = 'quality_score',
   ReconstructionMethod = 'reconstruction_method',
   ReconstructionSoftware = 'reconstruction_software',