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/PageTable.tsx b/frontend/packages/data-portal/app/components/Table/PageTable.tsx
new file mode 100644
index 000000000..69c3d904b
--- /dev/null
+++ 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(
+ props: Pick>, 'data' | 'columns'>,
+) {
+ return (
+
+ )
+}
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
}
}
}