more misc fixes (#216)

WIP - collection point for multiple flixes - fix responsive design for table page layouts - add view tomogram button - fix runs table sizings - add text overflow to runs table names - make "Browse Data" in the navbar highlight on hover
chanzuckerberg · Dec 6, 2023 · 9d186bd · 9d186bd
1 parent eeccfb9
commit 9d186bd
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 40 deletions.
diff --git a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
@@ -9,7 +9,7 @@ import { useMemo } from 'react'
 
 import { KeyPhoto } from 'app/components/KeyPhoto'
 import { Link } from 'app/components/Link'
-import { Table, TableCell } from 'app/components/Table'
+import { PageTable, TableCell } from 'app/components/Table'
 import { EMPIAR_ID, EMPIAR_URL } from 'app/constants/external-dbs'
 import { ANNOTATED_OBJECTS_MAX, MAX_PER_PAGE } from 'app/constants/pagination'
 import { Dataset, useDatasets } from 'app/hooks/useDatasets'
@@ -248,7 +248,7 @@ export function DatasetTable() {
   ])
 
   return (
-    <Table
+    <PageTable
       data={isLoadingDebounced ? LOADING_DATASETS : datasets}
       columns={columns}
     />

diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 
+import { Button } from '@czi-sds/components'
 import Skeleton from '@mui/material/Skeleton'
 import { useLocation } from '@remix-run/react'
 import { ColumnDef, createColumnHelper } from '@tanstack/react-table'
@@ -9,7 +10,7 @@ import { useMemo } from 'react'
 import { GetDatasetByIdQuery } from 'app/__generated__/graphql'
 import { KeyPhoto } from 'app/components/KeyPhoto'
 import { Link } from 'app/components/Link'
-import { Table, TableCell } from 'app/components/Table'
+import { PageTable, TableCell } from 'app/components/Table'
 import { MAX_PER_PAGE } from 'app/constants/pagination'
 import { TiltSeriesScore } from 'app/constants/tiltSeries'
 import { useDatasetById } from 'app/hooks/useDatasetById'
@@ -45,7 +46,7 @@ export function RunsTable() {
 
           return (
             <TableCell
-              className="flex flex-auto gap-4"
+              className="flex flex-grow gap-4 overflow-ellipsis"
               minWidth={250}
               maxWidth={300}
               renderLoadingSkeleton={false}
@@ -59,16 +60,11 @@ export function RunsTable() {
                 loading={isLoadingDebounced}
               />
 
-              <div className="flex flex-col flex-auto min-h-[100px]">
+              <div className="min-h-[100px] overflow-ellipsis overflow-hidden text-sds-primary-500 font-semibold">
                 {isLoadingDebounced ? (
                   <Skeleton className="max-w-[150px]" variant="text" />
                 ) : (
-                  <Link
-                    className="text-sds-primary-500 font-semibold"
-                    to={runUrl}
-                  >
-                    {run.name}
-                  </Link>
+                  <Link to={runUrl}>{run.name}</Link>
                 )}
               </div>
             </TableCell>
@@ -84,7 +80,7 @@ export function RunsTable() {
             const score = getValue() as TiltSeriesScore | null | undefined
 
             return (
-              <TableCell>
+              <TableCell minWidth={100} maxWidth={210} className="flex-grow">
                 {typeof score === 'number' && inQualityScoreRange(score) ? (
                   <TiltSeriesQualityScoreBadge score={score} />
                 ) : (
@@ -112,9 +108,10 @@ export function RunsTable() {
 
           return (
             <TableCell
-              minWidth={120}
-              maxWidth={400}
+              minWidth={250}
+              maxWidth={500}
               renderLoadingSkeleton={false}
+              className="flex-grow-[2]"
             >
               {annotatedObjects.length === 0 ? (
                 '--'
@@ -128,10 +125,45 @@ export function RunsTable() {
           )
         },
       }),
+
+      columnHelper.accessor(
+        (run) =>
+          run.tomogram_voxel_spacings[0]?.tomograms[0]?.neuroglancer_config,
+        {
+          id: 'viewTomogram',
+          header: '',
+          cell({ getValue }) {
+            const neuroglancerConfig = getValue()
+            return (
+              <TableCell
+                className="flex-grow-[2]"
+                horizontalAlign="right"
+                minWidth={150}
+              >
+                {neuroglancerConfig && (
+                  <Button
+                    to={`https://neuroglancer-demo.appspot.com/#!${encodeURIComponent(
+                      neuroglancerConfig,
+                    )}`}
+                    sdsType="secondary"
+                    sdsStyle="square"
+                    component={Link}
+                  >
+                    {t('viewTomogram')}
+                  </Button>
+                )}
+              </TableCell>
+            )
+          },
+        },
+      ),
     ] as ColumnDef<Run>[]
   }, [isLoadingDebounced, location.pathname, location.search, t])
 
   return (
-    <Table data={isLoadingDebounced ? LOADING_RUNS : runs} columns={columns} />
+    <PageTable
+      data={isLoadingDebounced ? LOADING_RUNS : runs}
+      columns={columns}
+    />
   )
 }
diff --git a/frontend/packages/data-portal/app/components/Layout/TopNavigation.tsx b/frontend/packages/data-portal/app/components/Layout/TopNavigation.tsx
@@ -30,7 +30,7 @@ export function TopNavigation() {
 
           pathname.startsWith('/datasets')
             ? 'text-sds-gray-white'
-            : 'text-sds-gray-400',
+            : 'text-sds-gray-400 hover:text-sds-gray-white',
         )}
         to="/browse-data/datasets"
       >

diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx
@@ -14,7 +14,7 @@ import { useDrawer } from 'app/state/drawer'
 import { getAnnotationTitle } from 'app/utils/annotation'
 import { cnsNoMerge } from 'app/utils/cns'
 
-import { Table, TableCell } from '../Table'
+import { PageTable, TableCell } from '../Table'
 
 const LOADING_ANNOTATIONS = range(0, MAX_PER_PAGE).map(() => ({}) as Annotation)
 
@@ -53,7 +53,11 @@ export function AnnotationTable() {
 
     function getConfidenceCell(key: keyof Annotation, header: string) {
       return columnHelper.accessor(key, {
-        header: () => <CellHeader horizontalAlign="right">{header}</CellHeader>,
+        header: () => (
+          <CellHeader horizontalAlign="right" hideSortIcon>
+            {header}
+          </CellHeader>
+        ),
         cell: ({ getValue }) => {
           const value = getValue() as number | null
 
@@ -143,7 +147,7 @@ export function AnnotationTable() {
 
       columnHelper.accessor('shape_type', {
         header: () => (
-          <CellHeader horizontalAlign="right">
+          <CellHeader horizontalAlign="right" hideSortIcon>
             {t('objectShapeType')}
           </CellHeader>
         ),
@@ -156,7 +160,9 @@ export function AnnotationTable() {
 
       columnHelper.accessor('object_count', {
         header: () => (
-          <CellHeader horizontalAlign="right">{t('objectCount')}</CellHeader>
+          <CellHeader horizontalAlign="right" hideSortIcon>
+            {t('objectCount')}
+          </CellHeader>
         ),
         cell: ({ getValue }) => (
           <TableCell horizontalAlign="right" minWidth={85} maxWidth={120}>
@@ -171,7 +177,7 @@ export function AnnotationTable() {
       columnHelper.display({
         id: 'annotation-actions',
         // Render empty cell header so that it doesn't break the table layout
-        header: () => <CellHeader>{null}</CellHeader>,
+        header: () => <CellHeader hideSortIcon>{null}</CellHeader>,
         cell: ({ row: { original: annotation } }) => (
           <TableCell minWidth={85} maxWidth={100}>
             <Button
@@ -201,7 +207,7 @@ export function AnnotationTable() {
   )
 
   return (
-    <Table
+    <PageTable
       data={isLoadingDebounced ? LOADING_ANNOTATIONS : annotations}
       columns={columns}
     />

diff --git a/frontend/packages/data-portal/app/components/Table/PageTable.tsx b/frontend/packages/data-portal/app/components/Table/PageTable.tsx
@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react'
+
+import { Table } from './Table'
+
+// FIXME: refactor this to be useMemo-based instead?
+export function PageTable<T>(
+  props: Pick<ComponentProps<typeof Table<T>>, 'data' | 'columns'>,
+) {
+  return (
+    <Table
+      {...props}
+      classes={{ container: '!min-w-fit !overflow-x-visible px-sds-xl' }}
+    />
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/Table/TableCell.tsx b/frontend/packages/data-portal/app/components/Table/TableCell.tsx
@@ -30,14 +30,15 @@ export function TableCell({
       match(horizontalAlign)
         .with('left', () => '!text-left')
         .with('center', () => '!text-center')
-        .with('right', () => '!text-right !pr-8')
+        .with('right', () => '!text-right')
         .otherwise(() => ''),
 
       className,
     ),
     style: {
       maxWidth,
       minWidth,
+      width: maxWidth,
     },
   }
 

diff --git a/frontend/packages/data-portal/app/components/Table/index.ts b/frontend/packages/data-portal/app/components/Table/index.ts
@@ -1,4 +1,5 @@
 export * from './MetadataTable'
+export * from './PageTable'
 export * from './Table'
 export * from './TableCell'
 export * from './TableCount'
diff --git a/frontend/packages/data-portal/app/components/TablePageLayout.tsx b/frontend/packages/data-portal/app/components/TablePageLayout.tsx
@@ -68,8 +68,9 @@ export function TablePageLayout({
           <div
             className={cns(
               'flex flex-col flex-auto flex-shrink-0 screen-2040:items-center',
-              'p-sds-xl pb-sds-xxl',
+              'pt-sds-xl pb-sds-xxl',
               'border-t border-sds-gray-300',
+              'overflow-x-scroll max-w-full',
             )}
           >
             <div
@@ -82,25 +83,29 @@ export function TablePageLayout({
                 filterPanel && 'max-w-content',
               )}
             >
-              <TableCount
-                filteredCount={filteredCount}
-                totalCount={totalCount}
-                type={type}
-              />
+              <div className="px-sds-xl">
+                <TableCount
+                  filteredCount={filteredCount}
+                  totalCount={totalCount}
+                  type={type}
+                />
+              </div>
 
-              {table}
+              <div className="overflow-x-scroll">{table}</div>
 
-              {filteredCount === 0 && noResults}
+              <div className="px-sds-xl">
+                {filteredCount === 0 && noResults}
 
-              <div className="w-full flex justify-center">
-                <Pagination
-                  currentPage={page}
-                  pageSize={MAX_PER_PAGE}
-                  totalCount={totalCount}
-                  onNextPage={() => setPage(page + 1)}
-                  onPreviousPage={() => setPage(page - 1)}
-                  onPageChange={(nextPage) => setPage(nextPage)}
-                />
+                <div className="w-full flex justify-center">
+                  <Pagination
+                    currentPage={page}
+                    pageSize={MAX_PER_PAGE}
+                    totalCount={totalCount}
+                    onNextPage={() => setPage(page + 1)}
+                    onPreviousPage={() => setPage(page - 1)}
+                    onPageChange={(nextPage) => setPage(nextPage)}
+                  />
+                </div>
               </div>
             </div>
           </div>

diff --git a/frontend/packages/data-portal/app/routes/datasets.$id.tsx b/frontend/packages/data-portal/app/routes/datasets.$id.tsx
@@ -100,6 +100,7 @@ const GET_DATASET_BY_ID = gql(`
           }
           tomograms(limit: 1) {
             key_photo_thumbnail_url
+            neuroglancer_config
           }
         }
       }