Skip to content

Commit

Permalink
fix layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@codemonkey800
codemonkey800 committed Nov 2, 2023
1 parent f9722dd commit c3cea4c
Show file tree
Hide file tree
Showing 6 changed files with 150 additions and 120 deletions.
23 changes: 13 additions & 10 deletions frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,16 +183,19 @@ export function DatasetTable() {
),
}),

columnHelper.accessor('runs_aggregate.aggregate.count', {
header: i18n.runs,
cell: ({ getValue }) => (
<TableCell
primaryText={String(getValue() ?? 0).padStart(4, '0')}
minWidth={70}
maxWidth={100}
/>
),
}),
columnHelper.accessor(
(dataset) => dataset.runs_aggregate.aggregate?.count,
{
header: i18n.runs,
cell: ({ getValue }) => (
<TableCell
primaryText={String(getValue() ?? 0).padStart(4, '0')}
minWidth={70}
maxWidth={100}
/>
),
},
),

columnHelper.display({
id: 'annotated-objects',
Expand Down
180 changes: 96 additions & 84 deletions frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,99 +15,111 @@ export function DatasetHeader() {
const drawer = useDatasetDrawer()

return (
<header className="flex flex-col items-center justify-center w-full min-h-[48px] pb-sds-xxl">
<div className="flex flex-col justify-start gap-sds-xxl">
<div
className={cns(
// create grid with fit content 1st row / 2nd col
'grid grid-cols-[1fr_auto] grid-rows-[1fr_auto]',
'w-full',
'justify-between',
'gap-x-sds-xxl',
)}
>
{/* back button */}
{previousUrl && (
<div className="flex items-center">
<Link className="flex items-center gap-sds-xxs" to={previousUrl}>
<Icon
sdsIcon="chevronLeft"
sdsSize="xs"
sdsType="iconButton"
className="!w-[10px] !h-[10px] !fill-sds-primary-400"
/>
<span className="text-sds-primary-400 font-semibold text-sds-header-s leading-sds-header-s">
Back to Results
</span>
</Link>
<div className="flex flex-auto justify-center px-sds-xl pt-sds-l pb-sds-xxl">
<header
className={cns(
'flex flex-col items-center justify-center',
'w-full min-h-[48px] max-w-content',
)}
>
<div className="flex flex-col justify-start gap-sds-xxl w-full">
<div
className={cns(
// create grid with fit content 1st row / 2nd col
'grid grid-cols-[1fr_auto] grid-rows-[1fr_auto]',
'w-full',
'justify-between',
'gap-x-sds-xxl',
)}
>
{/* back button */}
{previousUrl && (
<div className="flex items-center">
<Link
className="flex items-center gap-sds-xxs"
to={previousUrl}
>
<Icon
sdsIcon="chevronLeft"
sdsSize="xs"
sdsType="iconButton"
className="!w-[10px] !h-[10px] !fill-sds-primary-400"
/>
<span className="text-sds-primary-400 font-semibold text-sds-header-s leading-sds-header-s">
Back to Results
</span>
</Link>
</div>
)}
<div className="col-start-1 row-start-2 flex flex-col gap-sds-xxs">
{/* dataset title */}
<h1
className={cns(
'font-semibold',
'text-sds-header-xxl leading-sds-header-xxl',
'max-w-[1000px]',
)}
>
{dataset.title}
</h1>
{/* portal ID */}
<div className="flex flex-row items-center justify-left gap-sds-xxs text-sds-gray-500">
<p className="font-semibold uppercase text-sds-caps-xxs leading-sds-caps-xxs tracking-sds-caps">
{i18n.portalIdBlank}
</p>
<p className="text-sds-body-s leading-sds-body-s">
{dataset.id}
</p>
</div>
</div>
)}
<div className="col-start-1 row-start-2 flex flex-col gap-sds-xxs">
{/* dataset title */}
<h1

{/* dates */}
<div
className={cns(
'font-semibold',
'text-sds-header-xxl leading-sds-header-xxl',
'max-w-[1000px]',
'row-start-1 col-start-2',
'flex items-center justify-end gap-sds-xs',
'text-xs text-sds-gray-600',
'my-sds-l',
)}
>
{dataset.title}
</h1>
{/* portal ID */}
<div className="flex flex-row items-center justify-left gap-sds-xxs text-sds-gray-500">
<p className="font-semibold uppercase text-sds-caps-xxs leading-sds-caps-xxs tracking-sds-caps">
{i18n.portalIdBlank}
<p>{i18n.releaseDate(dataset.release_date)}</p>
<div className="h-3 w-px bg-sds-gray-400" />
<p>
{i18n.lastModified(
dataset.last_modified_date ?? dataset.deposition_date,
)}
</p>
<p className="text-sds-body-s leading-sds-body-s">{dataset.id}</p>
</div>
</div>

{/* dates */}
<div
className={cns(
'row-start-1 col-start-2',
'flex items-center justify-end gap-sds-xs',
'text-xs text-sds-gray-600',
'my-sds-l',
)}
>
<p>{i18n.releaseDate(dataset.release_date)}</p>
<div className="h-3 w-px bg-sds-gray-400" />
<p>
{i18n.lastModified(
dataset.last_modified_date ?? dataset.deposition_date,
)}
</p>
{/* actions */}
<div className="flex flex-row row-start-2 col-start-2 gap-sds-m justify-between min-w-[315px]">
<Button
startIcon={
<Icon sdsIcon="download" sdsType="button" sdsSize="l" />
}
sdsType="primary"
sdsStyle="rounded"
>
Download Dataset
</Button>
<Button
startIcon={
<Icon sdsIcon="infoCircle" sdsType="button" sdsSize="l" />
}
sdsType="secondary"
sdsStyle="rounded"
onClick={drawer.toggle}
>
More Info
</Button>
</div>
</div>

{/* actions */}
<div className="flex flex-row row-start-2 col-start-2 gap-sds-m justify-between min-w-[315px]">
<Button
startIcon={
<Icon sdsIcon="download" sdsType="button" sdsSize="l" />
}
sdsType="primary"
sdsStyle="rounded"
>
Download Dataset
</Button>
<Button
startIcon={
<Icon sdsIcon="infoCircle" sdsType="button" sdsSize="l" />
}
sdsType="secondary"
sdsStyle="rounded"
onClick={drawer.toggle}
>
More Info
</Button>
<div className="flex flex-row">
<DatasetDescription />
{/* add key photo here */}
</div>
</div>
<div className="flex flex-row">
<DatasetDescription />
{/* add key photo here */}
</div>
</div>
</header>
</header>
</div>
)
}
2 changes: 1 addition & 1 deletion frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export function RunsTable() {
}),

columnHelper.accessor(
(run) => run.tiltseries_aggregate.aggregate?.avg?.tilt_series_quality,
(run) => run.tiltseries_aggregate?.aggregate?.avg?.tilt_series_quality,
{
header: i18n.tiltSeriesQualityScore,
cell: ({ getValue }) => {
Expand Down
2 changes: 1 addition & 1 deletion frontend/packages/data-portal/app/components/FilterPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export function FilterPanel() {
className={cns(
'flex flex-col flex-shrink-0',
'w-[200px] items-center justify-center',
'border-r border-sds-gray-300',
'border-t border-r border-sds-gray-300',
)}
>
<p>Filters</p>
Expand Down
59 changes: 35 additions & 24 deletions frontend/packages/data-portal/app/routes/datasets.$id.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { FilterPanel } from 'app/components/FilterPanel'
import { MAX_PER_PAGE } from 'app/constants/pagination'
import { useDatasetById } from 'app/hooks/useDatasetById'
import { useCloseDatasetDrawerOnUnmount } from 'app/state/drawer'
import { cns } from 'app/utils/cns'

const GET_DATASET_BY_ID = gql(`
query GetDatasetById($id: Int, $run_limit: Int, $run_offset: Int) {
Expand Down Expand Up @@ -148,34 +149,44 @@ export default function DatasetByIdPage() {
}

return (
<>
<div className="mx-sds-xl max-w-content">
<DatasetHeader />

<div className="flex flex-auto">
<FilterPanel />

<div className="flex flex-col flex-auto flex-shrink-0 items-center">
<div className="flex flex-col flex-auto w-full max-w-content p-sds-xl pb-sds-xxl">
<RunCount />
<RunsTable />

<div className="w-full flex justify-center">
<Pagination
currentPage={page}
pageSize={MAX_PER_PAGE}
totalCount={dataset.runs_aggregate.aggregate?.count ?? 0}
onNextPage={() => setPage(page + 1)}
onPreviousPage={() => setPage(page - 1)}
onPageChange={(nextPage) => setPage(nextPage)}
/>
</div>
<div className="flex flex-col flex-auto">
<DatasetHeader />

<div className="flex flex-auto">
<FilterPanel />

<div
className={cns(
'flex flex-col flex-auto flex-shrink-0 screen-2040:items-center',
'p-sds-xl pb-sds-xxl',
'border-t border-sds-gray-300',
)}
>
<div
className={cns(
'flex flex-col flex-auto w-full max-w-content',

// Translate to the left by half the filter panel width to align with the header
'screen-2040:translate-x-[-100px]',
)}
>
<RunCount />
<RunsTable />

<div className="w-full flex justify-center">
<Pagination
currentPage={page}
pageSize={MAX_PER_PAGE}
totalCount={dataset.runs_aggregate.aggregate?.count ?? 0}
onNextPage={() => setPage(page + 1)}
onPreviousPage={() => setPage(page - 1)}
onPageChange={(nextPage) => setPage(nextPage)}
/>
</div>
</div>
</div>
</div>

<DatasetMetadataDrawer />
</>
</div>
)
}
4 changes: 4 additions & 0 deletions frontend/packages/data-portal/tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ export default {
extend: {
...sds,

screens: {
'screen-2040': '2040px',
},

maxWidth: {
content: '1600px',
},
Expand Down

0 comments on commit c3cea4c

Please sign in to comment.