fix: StudyList Fixes
This commit is contained in:
Rodrigo Antinarelli
James A. Petts
parent
11bd7105d6
commit
b39a96cfb2
@ -50,7 +50,7 @@ const variantClasses = {
|
||||
},
|
||||
contained: {
|
||||
default:
|
||||
'bg-custom-aquaBright text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
'bg-custom-aquaBright text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
primary:
|
||||
'bg-custom-blue text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
secondary:
|
||||
|
||||
@ -69,8 +69,13 @@ const StudyList = ({ studies, perPage }) => {
|
||||
'h-screen': isEmptyStudies,
|
||||
})}
|
||||
>
|
||||
<Header />
|
||||
<StudyListFilter numOfStudies={numOfStudies} filtersMeta={filtersMeta} />
|
||||
<div className="sticky top-0 z-10">
|
||||
<Header />
|
||||
<StudyListFilter
|
||||
numOfStudies={numOfStudies}
|
||||
filtersMeta={filtersMeta}
|
||||
/>
|
||||
</div>
|
||||
<StudyListTable
|
||||
studies={studiesData}
|
||||
numOfStudies={numOfStudies}
|
||||
|
||||
@ -124,86 +124,102 @@ const StudyListFilter = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-custom-navyDark border-t-4 border-black">
|
||||
<div className="container m-auto relative flex flex-col pt-5 pb-3">
|
||||
<div className="flex flex-row justify-between mb-5 px-12">
|
||||
<div className="flex flex-row">
|
||||
<Typography variant="h4" className="text-custom-aquaBright mr-6">
|
||||
Study List
|
||||
</Typography>
|
||||
<div className="flex flex-row items-end">
|
||||
<Button
|
||||
variant="text"
|
||||
size="small"
|
||||
color="inherit"
|
||||
className="text-custom-blueBright"
|
||||
startIcon={<Icon name="info-link" className="w-2" />}
|
||||
<div className="border-t-4 border-b-4 border-black">
|
||||
<div className="bg-custom-navyDark">
|
||||
<div className="container m-auto relative flex flex-col pt-5 pb-3">
|
||||
<div className="flex flex-row justify-between mb-5 px-12">
|
||||
<div className="flex flex-row">
|
||||
<Typography variant="h4" className="text-custom-aquaBright mr-6">
|
||||
Study List
|
||||
</Typography>
|
||||
<div className="flex flex-row items-end">
|
||||
<Button
|
||||
variant="text"
|
||||
size="small"
|
||||
color="inherit"
|
||||
className="text-custom-blueBright"
|
||||
startIcon={<Icon name="info-link" className="w-2" />}
|
||||
>
|
||||
<span className="flex flex-col flex-1">
|
||||
<span>Learn more</span>
|
||||
<span className="opacity-50 pt-1 border-b border-custom-blueBright"></span>
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row">
|
||||
{isFiltering() && (
|
||||
<Button
|
||||
rounded="full"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
className="text-custom-blueBright border-custom-blueBright mx-8"
|
||||
startIcon={<Icon name="cancel" />}
|
||||
onClick={clearFilters}
|
||||
>
|
||||
Clear filters
|
||||
</Button>
|
||||
)}
|
||||
<Typography variant="h4" className="mr-2">
|
||||
{numOfStudies > 100 ? '>100' : numOfStudies}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
className="text-custom-grayLight self-end pb-1"
|
||||
>
|
||||
<span className="flex flex-col flex-1">
|
||||
<span>Learn more</span>
|
||||
<span className="opacity-50 pt-1 border-b border-custom-blueBright"></span>
|
||||
</span>
|
||||
</Button>
|
||||
Studies
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row">
|
||||
{isFiltering() && (
|
||||
<Button
|
||||
rounded="full"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
className="text-custom-blueBright border-custom-blueBright mx-8"
|
||||
startIcon={<Icon name="cancel" />}
|
||||
onClick={clearFilters}
|
||||
>
|
||||
Clear filters
|
||||
</Button>
|
||||
<div className="flex flex-row w-full">
|
||||
{filtersMeta.map(
|
||||
({ name, displayName, inputType, isSortable, gridCol }) => {
|
||||
return (
|
||||
<div
|
||||
className={classnames(
|
||||
`w-${gridCol}/24`,
|
||||
'pl-4 first:pl-12'
|
||||
)}
|
||||
>
|
||||
<FilterLabel
|
||||
key={name}
|
||||
label={displayName}
|
||||
isSortable={
|
||||
isSortable && numOfStudies <= 100 && numOfStudies > 0
|
||||
}
|
||||
isBeingSorted={sortBy === name}
|
||||
sortDirection={sortDirection}
|
||||
onLabelClick={() => handleFilterLabelClick(name)}
|
||||
inputType={inputType}
|
||||
>
|
||||
{inputType !== 'none' && (
|
||||
<Input
|
||||
className="border-custom-blue mt-2 bg-black"
|
||||
type="text"
|
||||
containerClassName="mr-2"
|
||||
value={currentFiltersValues[name] || ''}
|
||||
onChange={event =>
|
||||
handleFilterValueChange(event, name)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</FilterLabel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
<Typography variant="h4" className="mr-2">
|
||||
{numOfStudies > 100 ? '>100' : numOfStudies}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
className="text-custom-grayLight self-end pb-1"
|
||||
>
|
||||
Studies
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row w-full">
|
||||
{filtersMeta.map(
|
||||
({ name, displayName, inputType, isSortable, gridCol }) => {
|
||||
return (
|
||||
<div
|
||||
className={classnames(`w-${gridCol}/24`, 'pl-4 first:pl-12')}
|
||||
>
|
||||
<FilterLabel
|
||||
key={name}
|
||||
label={displayName}
|
||||
isSortable={
|
||||
isSortable && numOfStudies <= 100 && numOfStudies > 0
|
||||
}
|
||||
isBeingSorted={sortBy === name}
|
||||
sortDirection={sortDirection}
|
||||
onLabelClick={() => handleFilterLabelClick(name)}
|
||||
inputType={inputType}
|
||||
>
|
||||
{inputType !== 'none' && (
|
||||
<Input
|
||||
className="border-custom-blue mt-2 bg-black"
|
||||
type="text"
|
||||
containerClassName="mr-2"
|
||||
value={currentFiltersValues[name] || ''}
|
||||
onChange={event => handleFilterValueChange(event, name)}
|
||||
/>
|
||||
)}
|
||||
</FilterLabel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{numOfStudies > 100 && (
|
||||
<div className="container m-auto">
|
||||
<div className="bg-custom-blue text-center text-base py-1 rounded-b">
|
||||
<p className="text-white">
|
||||
Filter list to 100 studies or less to enable sorting
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -27,7 +27,7 @@ const TableRow = props => {
|
||||
const toggleRow = () => setIsOpened(!isOpened);
|
||||
const ChevronIconName = isOpened ? 'chevron-down' : 'chevron-right';
|
||||
const tdClasses = [
|
||||
'px-4 py-2',
|
||||
'px-4 py-2 text-base',
|
||||
{ 'border-b border-custom-violetPale': !isOpened },
|
||||
];
|
||||
const seriesWidthClasses = {
|
||||
@ -44,8 +44,8 @@ const TableRow = props => {
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={classnames('w-full', {
|
||||
'border border-custom-aquaBright rounded overflow-hidden mb-2': isOpened,
|
||||
className={classnames('w-full transition duration-300', {
|
||||
'border border-custom-aquaBright rounded overflow-hidden mb-2 hover:border-custom-violetPale': isOpened,
|
||||
})}
|
||||
>
|
||||
<table className={classnames('w-full p-4')}>
|
||||
@ -128,33 +128,46 @@ const TableRow = props => {
|
||||
</td>
|
||||
</tr>
|
||||
{isOpened && (
|
||||
<tr className={classnames('bg-black')}>
|
||||
<tr
|
||||
className={classnames('bg-black max-h-0 overflow-hidden')}
|
||||
>
|
||||
<td colSpan="7" className="py-4 pl-12 pr-2">
|
||||
<div className="flex">
|
||||
<div className="block">
|
||||
<Button
|
||||
rounded="full"
|
||||
variant="outlined"
|
||||
endIcon={<Icon name="launch-info" />}
|
||||
className="mr-4"
|
||||
variant="contained"
|
||||
className="mr-4 font-bold"
|
||||
endIcon={
|
||||
<Icon
|
||||
name="launch-arrow"
|
||||
style={{ color: '#21a7c6' }}
|
||||
/>
|
||||
}
|
||||
>
|
||||
Basic Viewer
|
||||
</Button>
|
||||
<Button
|
||||
rounded="full"
|
||||
variant="outlined"
|
||||
endIcon={<Icon name="launch-info" />}
|
||||
className="mr-4"
|
||||
variant="contained"
|
||||
className="mr-4 font-bold"
|
||||
endIcon={
|
||||
<Icon
|
||||
name="launch-arrow"
|
||||
style={{ color: '#21a7c6' }}
|
||||
/>
|
||||
}
|
||||
>
|
||||
Segmentation
|
||||
Segmentation{' '}
|
||||
</Button>
|
||||
<Button
|
||||
rounded="full"
|
||||
variant="outlined"
|
||||
endIcon={<Icon name="launch-info" />}
|
||||
className="font-bold"
|
||||
>
|
||||
Module 3
|
||||
</Button>
|
||||
<div className="ml-5 text-lg text-custom-grayBright flex items-center">
|
||||
<div className="ml-5 text-lg text-custom-grayBright inline-flex items-center">
|
||||
<Icon
|
||||
name="notificationwarning-diamond"
|
||||
className="mr-2 w-5 h-5"
|
||||
@ -166,27 +179,39 @@ const TableRow = props => {
|
||||
<div className="w-full text-lg">
|
||||
<div className="bg-custom-navy border-b border-custom-violetPale flex">
|
||||
<div
|
||||
className={classnames(seriesWidthClasses.normal)}
|
||||
className={classnames(
|
||||
seriesWidthClasses.normal,
|
||||
'font-bold'
|
||||
)}
|
||||
>
|
||||
Description
|
||||
</div>
|
||||
<div
|
||||
className={classnames(seriesWidthClasses.small)}
|
||||
className={classnames(
|
||||
seriesWidthClasses.small,
|
||||
'font-bold'
|
||||
)}
|
||||
>
|
||||
Series
|
||||
</div>
|
||||
<div
|
||||
className={classnames(seriesWidthClasses.small)}
|
||||
className={classnames(
|
||||
seriesWidthClasses.small,
|
||||
'font-bold'
|
||||
)}
|
||||
>
|
||||
Modality
|
||||
</div>
|
||||
<div
|
||||
className={classnames(seriesWidthClasses.normal)}
|
||||
className={classnames(
|
||||
seriesWidthClasses.normal,
|
||||
'font-bold'
|
||||
)}
|
||||
>
|
||||
Instances
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 h-48 overflow-y-scroll ohif-scrollbar">
|
||||
<div className="mt-2 max-h-48 overflow-y-scroll ohif-scrollbar">
|
||||
{series.map((seriesItem, i) => (
|
||||
<div className="w-full flex" key={i}>
|
||||
<div
|
||||
@ -247,7 +272,7 @@ TableRow.propTypes = {
|
||||
const StudyListTable = ({ studies, numOfStudies, filtersMeta }) => {
|
||||
const renderTable = () => {
|
||||
return (
|
||||
<table className="w-full text-white border-t-4 border-black">
|
||||
<table className="w-full text-white">
|
||||
<tbody>
|
||||
{studies.map((study, i) => (
|
||||
<TableRow
|
||||
@ -283,14 +308,6 @@ const StudyListTable = ({ studies, numOfStudies, filtersMeta }) => {
|
||||
<>
|
||||
<div className="bg-black">
|
||||
<div className="container m-auto relative">
|
||||
{numOfStudies > 100 && (
|
||||
<div className="bg-custom-blue text-center text-base py-1 rounded-b sticky top-0">
|
||||
<p className="text-white">
|
||||
Filter list to 100 studies or less to enable sorting
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{numOfStudies > 0 && renderTable()}
|
||||
{numOfStudies === 0 && renderEmpty()}
|
||||
</div>
|
||||
|
||||
@ -345,10 +345,11 @@ module.exports = {
|
||||
...theme('spacing'),
|
||||
...negative(theme('spacing')),
|
||||
}),
|
||||
maxHeight: {
|
||||
maxHeight: theme => ({
|
||||
full: '100%',
|
||||
screen: '100vh',
|
||||
},
|
||||
...theme('spacing'),
|
||||
}),
|
||||
maxWidth: (theme, { breakpoints }) => ({
|
||||
none: 'none',
|
||||
xs: '20rem',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user