-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
closes #995 Barebones initial table (UX not finalized yet, waiting until then to do fit & finish). Metadata drawer is empty. Download modal does not target the selected tomogram yet. Query changes: - Added an `is_canonical` check to the existing `tomogram_voxel_spacings` field (which we can delete after launch) so that if we need to turn off the flag, the UI will still only display the canonical `tomogram`. - Replaced `tomogram_stats` count with top-level `tomograms_aggregate` count that doesn't require FE summing. BE pieces not supported yet: - Distinguish between Portal Standard and Author Submitted tomograms. - Deposition date. - Alignment ID. ![image](https://github.com/user-attachments/assets/db706cf9-09d7-46bc-ae0a-b0f591c2d529)
- Loading branch information
Showing
15 changed files
with
321 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { useAtom } from 'jotai' | ||
|
||
import { useI18n } from 'app/hooks/useI18n' | ||
import { MetadataDrawerId } from 'app/hooks/useMetadataDrawer' | ||
import { metadataDrawerTomogramAtom } from 'app/state/metadataDrawerTomogram' | ||
|
||
import { MetadataDrawer } from '../MetadataDrawer' | ||
|
||
export function TomogramMetadataDrawer() { | ||
const { t } = useI18n() | ||
const [metadataDrawerTomogram] = useAtom(metadataDrawerTomogramAtom) | ||
|
||
return ( | ||
<MetadataDrawer | ||
title={metadataDrawerTomogram?.id.toString() ?? ''} | ||
label={t('tomogramDetails')} | ||
disabled={metadataDrawerTomogram === undefined} | ||
drawerId={MetadataDrawerId.Tomogram} | ||
> | ||
<></> | ||
</MetadataDrawer> | ||
) | ||
} |
199 changes: 199 additions & 0 deletions
199
frontend/packages/data-portal/app/components/Run/TomogramTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,199 @@ | ||
/* eslint-disable react/no-unstable-nested-components */ | ||
|
||
import { Button, Icon } from '@czi-sds/components' | ||
import { ColumnDef, createColumnHelper } from '@tanstack/react-table' | ||
import { useAtom } from 'jotai' | ||
import { startCase } from 'lodash-es' | ||
import { useCallback, useMemo } from 'react' | ||
|
||
import { CellHeader, PageTable, TableCell } from 'app/components/Table' | ||
import { TomogramTableWidths } from 'app/constants/table' | ||
import { useDownloadModalQueryParamState } from 'app/hooks/useDownloadModalQueryParamState' | ||
import { useI18n } from 'app/hooks/useI18n' | ||
import { | ||
MetadataDrawerId, | ||
useMetadataDrawer, | ||
} from 'app/hooks/useMetadataDrawer' | ||
import { useRunById } from 'app/hooks/useRunById' | ||
import { | ||
metadataDrawerTomogramAtom, | ||
Tomogram, | ||
} from 'app/state/metadataDrawerTomogram' | ||
import { getNeuroglancerUrl } from 'app/utils/url' | ||
|
||
import { AuthorList } from '../AuthorList' | ||
import { KeyPhoto } from '../KeyPhoto' | ||
|
||
export function TomogramsTable() { | ||
const { t } = useI18n() | ||
const { tomograms } = useRunById() | ||
|
||
const { toggleDrawer } = useMetadataDrawer() | ||
const [, setMetadataDrawerTomogram] = useAtom(metadataDrawerTomogramAtom) | ||
|
||
const { openTomogramDownloadModal } = useDownloadModalQueryParamState() | ||
|
||
const openMetadataDrawer = useCallback( | ||
(tomogram: Tomogram) => { | ||
setMetadataDrawerTomogram(tomogram) | ||
toggleDrawer(MetadataDrawerId.Tomogram) | ||
}, | ||
[setMetadataDrawerTomogram, toggleDrawer], | ||
) | ||
|
||
const columns = useMemo(() => { | ||
const columnHelper = createColumnHelper<Tomogram>() | ||
return [ | ||
columnHelper.accessor('key_photo_url', { | ||
header: () => <CellHeader width={TomogramTableWidths.photo} />, | ||
cell: ({ row: { original } }) => ( | ||
<TableCell width={TomogramTableWidths.photo}> | ||
<KeyPhoto | ||
className="max-w-[134px]" | ||
title={original.name} | ||
src={original.key_photo_thumbnail_url ?? undefined} | ||
/> | ||
</TableCell> | ||
), | ||
}), | ||
columnHelper.accessor('id', { | ||
header: () => ( | ||
<CellHeader width={TomogramTableWidths.id}> | ||
{t('tomogramId')} | ||
</CellHeader> | ||
), | ||
cell: ({ row: { original } }) => ( | ||
<TableCell | ||
className="flex flex-col gap-sds-xxxs !items-start" | ||
width={TomogramTableWidths.id} | ||
> | ||
<div className="flex gap-sds-xs items-center"> | ||
<p className="text-sds-body-m leading-sds-body-m font-semibold text-ellipsis line-clamp-1 break-all"> | ||
{original.id} | ||
</p> | ||
</div> | ||
<div className=" text-sds-gray-600 text-sds-body-xxs leading-sds-header-xxs"> | ||
<AuthorList authors={original.authors} compact /> | ||
</div> | ||
</TableCell> | ||
), | ||
}), | ||
// TODO(bchu): Switch to deposition_date when available. | ||
columnHelper.accessor('name', { | ||
id: 'deposition_date', | ||
header: () => ( | ||
<CellHeader | ||
className="whitespace-nowrap text-ellipsis" | ||
width={TomogramTableWidths.depositionDate} | ||
> | ||
{t('depositionDate')} | ||
</CellHeader> | ||
), | ||
cell: ({ getValue }) => ( | ||
<TableCell width={TomogramTableWidths.depositionDate}> | ||
<div>{getValue()}</div> | ||
</TableCell> | ||
), | ||
}), | ||
// TODO(bchu): Switch to alignment_id when available. | ||
columnHelper.accessor('name', { | ||
header: () => ( | ||
<CellHeader width={TomogramTableWidths.alignment}> | ||
{t('alignmentId')} | ||
</CellHeader> | ||
), | ||
cell: ({ getValue }) => ( | ||
<TableCell width={TomogramTableWidths.alignment}> | ||
<div>{getValue()}</div> | ||
</TableCell> | ||
), | ||
}), | ||
columnHelper.accessor('voxel_spacing', { | ||
header: () => ( | ||
<CellHeader width={TomogramTableWidths.voxelSpacing}> | ||
{t('voxelSpacing')} | ||
</CellHeader> | ||
), | ||
cell: ({ getValue, row: { original } }) => ( | ||
<TableCell width={TomogramTableWidths.voxelSpacing}> | ||
{t('unitAngstrom', { value: getValue() })} | ||
<div className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600"> | ||
({original.size_x}, {original.size_y}, {original.size_z})px | ||
</div> | ||
</TableCell> | ||
), | ||
}), | ||
columnHelper.accessor('reconstruction_method', { | ||
header: () => ( | ||
<CellHeader width={TomogramTableWidths.reconstructionMethod}> | ||
{t('reconstructionMethod')} | ||
</CellHeader> | ||
), | ||
cell: ({ getValue }) => ( | ||
<TableCell width={TomogramTableWidths.reconstructionMethod}> | ||
<div>{getValue()}</div> | ||
</TableCell> | ||
), | ||
}), | ||
columnHelper.accessor('processing', { | ||
header: () => ( | ||
<CellHeader width={TomogramTableWidths.postProcessing}> | ||
{t('postProcessing')} | ||
</CellHeader> | ||
), | ||
cell: ({ getValue }) => ( | ||
<TableCell width={TomogramTableWidths.postProcessing}> | ||
<div>{startCase(getValue())}</div> | ||
</TableCell> | ||
), | ||
}), | ||
columnHelper.display({ | ||
id: 'tomogram-actions', | ||
header: () => <CellHeader width={TomogramTableWidths.actions} />, | ||
cell: ({ row: { original } }) => ( | ||
<TableCell width={TomogramTableWidths.actions}> | ||
<div className="flex flex-col gap-sds-xs items-start"> | ||
{original.is_canonical && | ||
original.neuroglancer_config != null && ( | ||
<Button | ||
sdsType="primary" | ||
sdsStyle="rounded" | ||
to={getNeuroglancerUrl(original.neuroglancer_config)} | ||
startIcon={ | ||
<Icon sdsIcon="table" sdsSize="s" sdsType="button" /> | ||
} | ||
> | ||
{t('viewTomogram')} | ||
</Button> | ||
)} | ||
<Button | ||
sdsType="primary" | ||
sdsStyle="minimal" | ||
className="!justify-start !ml-sds-l" | ||
onClick={() => openMetadataDrawer(original)} | ||
startIcon={ | ||
<Icon sdsIcon="infoCircle" sdsSize="s" sdsType="button" /> | ||
} | ||
> | ||
<span>{t('info')}</span> | ||
</Button> | ||
<Button | ||
sdsType="primary" | ||
sdsStyle="minimal" | ||
className="!justify-start !ml-sds-l" | ||
onClick={openTomogramDownloadModal} | ||
startIcon={ | ||
<Icon sdsIcon="download" sdsSize="s" sdsType="button" /> | ||
} | ||
> | ||
{t('download')} | ||
</Button> | ||
</div> | ||
</TableCell> | ||
), | ||
}), | ||
] as ColumnDef<Tomogram>[] // https://github.com/TanStack/table/issues/4382 | ||
}, [openMetadataDrawer, openTomogramDownloadModal, t]) | ||
|
||
return <PageTable data={tomograms} columns={columns} hoverType="none" /> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.