diff --git a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx index 7d36e2b6f..ebc76a2b4 100644 --- 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 ( - diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx index 2216f5d76..6669fa467 100644 --- 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 ( -
+
{isLoadingDebounced ? ( ) : ( - - {run.name} - + {run.name} )}
@@ -84,7 +80,7 @@ export function RunsTable() { const score = getValue() as TiltSeriesScore | null | undefined return ( - + {typeof score === 'number' && inQualityScoreRange(score) ? ( ) : ( @@ -112,9 +108,10 @@ export function RunsTable() { return ( {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 ( + + {neuroglancerConfig && ( + + )} + + ) + }, + }, + ), ] as ColumnDef[] }, [isLoadingDebounced, location.pathname, location.search, t]) return ( -
+ ) } diff --git a/frontend/packages/data-portal/app/components/Layout/TopNavigation.tsx b/frontend/packages/data-portal/app/components/Layout/TopNavigation.tsx index 485e6fcdd..c5a504d9f 100644 --- 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 index ba5080994..2de54b468 100644 --- 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: () => {header}, + header: () => ( + + {header} + + ), cell: ({ getValue }) => { const value = getValue() as number | null @@ -143,7 +147,7 @@ export function AnnotationTable() { columnHelper.accessor('shape_type', { header: () => ( - + {t('objectShapeType')} ), @@ -156,7 +160,9 @@ export function AnnotationTable() { columnHelper.accessor('object_count', { header: () => ( - {t('objectCount')} + + {t('objectCount')} + ), cell: ({ getValue }) => ( @@ -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: () => {null}, + header: () => {null}, cell: ({ row: { original: annotation } }) => (
+ ) +} diff --git a/frontend/packages/data-portal/app/components/Table/TableCell.tsx b/frontend/packages/data-portal/app/components/Table/TableCell.tsx index e2d27f3ba..faca5bbd5 100644 --- a/frontend/packages/data-portal/app/components/Table/TableCell.tsx +++ b/frontend/packages/data-portal/app/components/Table/TableCell.tsx @@ -30,7 +30,7 @@ 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, @@ -38,6 +38,7 @@ export function TableCell({ 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 index f887fe56b..ba371224b 100644 --- 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 index 369437d9a..5561811cb 100644 --- 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({
- +
+ +
- {table} +
{table}
- {filteredCount === 0 && noResults} +
+ {filteredCount === 0 && noResults} -
- setPage(page + 1)} - onPreviousPage={() => setPage(page - 1)} - onPageChange={(nextPage) => setPage(nextPage)} - /> +
+ setPage(page + 1)} + onPreviousPage={() => setPage(page - 1)} + onPageChange={(nextPage) => setPage(nextPage)} + /> +
diff --git a/frontend/packages/data-portal/app/routes/datasets.$id.tsx b/frontend/packages/data-portal/app/routes/datasets.$id.tsx index 1141dcf49..cb54e3ec4 100644 --- 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 } } }