basic sorting
This commit is contained in:
dannyrb
James A. Petts
parent
1ec580be5d
commit
86eef997e4
@ -31,8 +31,8 @@ function StudyListContainer({ history, data: studies }) {
|
|||||||
const [filterValues, setFilterValues] = useState(
|
const [filterValues, setFilterValues] = useState(
|
||||||
Object.assign({}, defaultFilterValues, queryFilterValues)
|
Object.assign({}, defaultFilterValues, queryFilterValues)
|
||||||
);
|
);
|
||||||
const debouncedFilterValues = useDebounce(filterValues, 500);
|
const debouncedFilterValues = useDebounce(filterValues, 200);
|
||||||
const { resultsPerPage, pageNumber } = filterValues;
|
const { resultsPerPage, pageNumber, sortBy, sortDirection } = filterValues;
|
||||||
// ~ Rows & Studies
|
// ~ Rows & Studies
|
||||||
const [expandedRows, setExpandedRows] = useState([]);
|
const [expandedRows, setExpandedRows] = useState([]);
|
||||||
const numOfStudies = studies.length;
|
const numOfStudies = studies.length;
|
||||||
@ -54,12 +54,12 @@ function StudyListContainer({ history, data: studies }) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Set body style
|
// Set body style
|
||||||
useEffect(()=> {
|
useEffect(() => {
|
||||||
document.body.classList.add('bg-black');
|
document.body.classList.add('bg-black');
|
||||||
return () => {
|
return () => {
|
||||||
document.body.classList.remove('bg-black');
|
document.body.classList.remove('bg-black');
|
||||||
}
|
};
|
||||||
}, [])
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!debouncedFilterValues) {
|
if (!debouncedFilterValues) {
|
||||||
@ -162,144 +162,180 @@ function StudyListContainer({ history, data: studies }) {
|
|||||||
return filterValues[name] !== defaultFilterValues[name];
|
return filterValues[name] !== defaultFilterValues[name];
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const tableDataSource = studies.map((study, key) => {
|
const tableDataSource = studies
|
||||||
const rowKey = key + 1;
|
.sort((s1, s2) => {
|
||||||
const isExpanded = expandedRows.some(k => k === rowKey);
|
const noSortApplied = sortBy === '' || !sortBy;
|
||||||
const {
|
const sortModifier = sortDirection === 'descending' ? 1 : -1;
|
||||||
accessionNumber,
|
if (noSortApplied) {
|
||||||
modalities,
|
return 0;
|
||||||
instances,
|
}
|
||||||
studyDescription,
|
|
||||||
mrn,
|
const s1Prop = s1[sortBy];
|
||||||
patientName,
|
const s2Prop = s2[sortBy];
|
||||||
studyDate,
|
|
||||||
studyTime,
|
if (typeof s1Prop === 'string' && typeof s2Prop === 'string') {
|
||||||
// ??
|
return s1Prop.localeCompare(s2Prop) * sortModifier;
|
||||||
// TODO: won't have until expanded
|
} else if (typeof s1Prop === 'number' && typeof s2Prop === 'number') {
|
||||||
series = [],
|
return (s1Prop > s2Prop) * sortModifier;
|
||||||
} = study;
|
} else if (!s1Prop && s2Prop) {
|
||||||
const seriesTableColumns = {
|
return -1 * sortModifier;
|
||||||
description: 'Description',
|
} else if (!s2Prop && s1Prop) {
|
||||||
seriesNumber: 'Series',
|
return 1 * sortModifier;
|
||||||
modality: 'Modality',
|
}
|
||||||
Instances: 'Instances',
|
|
||||||
};
|
return 0;
|
||||||
const seriesTableDataSource = series.map(seriesItem => {
|
})
|
||||||
const { SeriesNumber, Modality, instances } = seriesItem;
|
.map((study, key) => {
|
||||||
|
const rowKey = key + 1;
|
||||||
|
const isExpanded = expandedRows.some(k => k === rowKey);
|
||||||
|
const {
|
||||||
|
accessionNumber,
|
||||||
|
modalities,
|
||||||
|
instances,
|
||||||
|
studyDescription,
|
||||||
|
mrn,
|
||||||
|
patientName,
|
||||||
|
studyDate,
|
||||||
|
studyTime,
|
||||||
|
// ??
|
||||||
|
// TODO: won't have until expanded
|
||||||
|
series = [],
|
||||||
|
} = study;
|
||||||
|
const seriesTableColumns = {
|
||||||
|
description: 'Description',
|
||||||
|
seriesNumber: 'Series',
|
||||||
|
modality: 'Modality',
|
||||||
|
Instances: 'Instances',
|
||||||
|
};
|
||||||
|
const seriesTableDataSource = series.map(seriesItem => {
|
||||||
|
const { SeriesNumber, Modality, instances } = seriesItem;
|
||||||
|
return {
|
||||||
|
description: 'Patient Protocol',
|
||||||
|
seriesNumber: SeriesNumber,
|
||||||
|
modality: Modality,
|
||||||
|
Instances: instances.length,
|
||||||
|
};
|
||||||
|
});
|
||||||
return {
|
return {
|
||||||
description: 'Patient Protocol',
|
row: [
|
||||||
seriesNumber: SeriesNumber,
|
{
|
||||||
modality: Modality,
|
key: 'patientName',
|
||||||
Instances: instances.length,
|
content: patientName ? (
|
||||||
|
patientName
|
||||||
|
) : (
|
||||||
|
<span className="text-gray-700">(Empty)</span>
|
||||||
|
),
|
||||||
|
title: patientName,
|
||||||
|
gridCol: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'mrn',
|
||||||
|
content: mrn,
|
||||||
|
title: mrn,
|
||||||
|
gridCol: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'studyDate',
|
||||||
|
content: (
|
||||||
|
<div>
|
||||||
|
<span className="mr-4">
|
||||||
|
{moment(studyDate).format('MMM-DD-YYYY')}
|
||||||
|
</span>
|
||||||
|
{studyTime && (
|
||||||
|
<span>
|
||||||
|
{moment(studyTime, 'HHmmss.SSS').format('hh:mm A')}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
title: 'time',
|
||||||
|
gridCol: 5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'description',
|
||||||
|
content: studyDescription,
|
||||||
|
title: studyDescription,
|
||||||
|
gridCol: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'modality',
|
||||||
|
content: modalities,
|
||||||
|
title: modalities,
|
||||||
|
gridCol: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'accession',
|
||||||
|
content: accessionNumber,
|
||||||
|
title: accessionNumber,
|
||||||
|
gridCol: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'instances',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
<Icon
|
||||||
|
name="group-layers"
|
||||||
|
className={classnames('inline-flex mr-2 w-4', {
|
||||||
|
'text-primary-active': isExpanded,
|
||||||
|
'text-secondary-light': !isExpanded,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
{instances}
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
title: instances,
|
||||||
|
gridCol: 4,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
expandedContent: (
|
||||||
|
<StudyListExpandedRow
|
||||||
|
seriesTableColumns={seriesTableColumns}
|
||||||
|
seriesTableDataSource={seriesTableDataSource}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
rounded="full"
|
||||||
|
variant="contained"
|
||||||
|
className="mr-4 font-bold"
|
||||||
|
endIcon={
|
||||||
|
<Icon name="launch-arrow" style={{ color: '#21a7c6' }} />
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Link to="/viewer/123">Basic Viewer</Link>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
rounded="full"
|
||||||
|
variant="contained"
|
||||||
|
className="mr-4 font-bold"
|
||||||
|
endIcon={
|
||||||
|
<Icon name="launch-arrow" style={{ color: '#21a7c6' }} />
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Link to="/viewer/123">Segmentation</Link>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
rounded="full"
|
||||||
|
variant="outlined"
|
||||||
|
endIcon={<Icon name="launch-info" />}
|
||||||
|
className="font-bold"
|
||||||
|
>
|
||||||
|
Module 3
|
||||||
|
</Button>
|
||||||
|
<div className="ml-5 text-lg text-common-bright inline-flex items-center">
|
||||||
|
<Icon
|
||||||
|
name="notificationwarning-diamond"
|
||||||
|
className="mr-2 w-5 h-5"
|
||||||
|
/>
|
||||||
|
Feedback text lorem ipsum dolor sit amet
|
||||||
|
</div>
|
||||||
|
</StudyListExpandedRow>
|
||||||
|
),
|
||||||
|
onClickRow: () =>
|
||||||
|
setExpandedRows(s =>
|
||||||
|
isExpanded ? s.filter(n => rowKey !== n) : [...s, rowKey]
|
||||||
|
),
|
||||||
|
isExpanded,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
return {
|
|
||||||
row: [
|
|
||||||
{
|
|
||||||
key: 'patientName',
|
|
||||||
content: patientName
|
|
||||||
? patientName
|
|
||||||
: (<span className="text-gray-700">(Empty)</span>),
|
|
||||||
title: patientName,
|
|
||||||
gridCol: 4,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'mrn',
|
|
||||||
content: mrn,
|
|
||||||
title: mrn,
|
|
||||||
gridCol: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'studyDate',
|
|
||||||
content: (
|
|
||||||
<div>
|
|
||||||
<span className="mr-4">
|
|
||||||
{moment(studyDate).format('MMM-DD-YYYY')}
|
|
||||||
</span>
|
|
||||||
{studyTime && (<span>{moment(studyTime, 'HHmmss.SSS').format('hh:mm A')}</span>)}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
title: 'time',
|
|
||||||
gridCol: 5,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'description',
|
|
||||||
content: studyDescription,
|
|
||||||
title: studyDescription,
|
|
||||||
gridCol: 4,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'modality',
|
|
||||||
content: modalities,
|
|
||||||
title: modalities,
|
|
||||||
gridCol: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'accession',
|
|
||||||
content: accessionNumber,
|
|
||||||
title: accessionNumber,
|
|
||||||
gridCol: 4,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'instances',
|
|
||||||
content: (
|
|
||||||
<>
|
|
||||||
<Icon
|
|
||||||
name="group-layers"
|
|
||||||
className={classnames('inline-flex mr-2 w-4', {
|
|
||||||
'text-primary-active': isExpanded,
|
|
||||||
'text-secondary-light': !isExpanded,
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
{instances}
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
title: instances,
|
|
||||||
gridCol: 4,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
expandedContent: (
|
|
||||||
<StudyListExpandedRow
|
|
||||||
seriesTableColumns={seriesTableColumns}
|
|
||||||
seriesTableDataSource={seriesTableDataSource}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
rounded="full"
|
|
||||||
variant="contained"
|
|
||||||
className="mr-4 font-bold"
|
|
||||||
endIcon={<Icon name="launch-arrow" style={{ color: '#21a7c6' }} />}
|
|
||||||
>
|
|
||||||
<Link to="/viewer/123">Basic Viewer</Link>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
rounded="full"
|
|
||||||
variant="contained"
|
|
||||||
className="mr-4 font-bold"
|
|
||||||
endIcon={<Icon name="launch-arrow" style={{ color: '#21a7c6' }} />}
|
|
||||||
>
|
|
||||||
<Link to="/viewer/123">Segmentation</Link>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
rounded="full"
|
|
||||||
variant="outlined"
|
|
||||||
endIcon={<Icon name="launch-info" />}
|
|
||||||
className="font-bold"
|
|
||||||
>
|
|
||||||
Module 3
|
|
||||||
</Button>
|
|
||||||
<div className="ml-5 text-lg text-common-bright inline-flex items-center">
|
|
||||||
<Icon name="notificationwarning-diamond" className="mr-2 w-5 h-5" />
|
|
||||||
Feedback text lorem ipsum dolor sit amet
|
|
||||||
</div>
|
|
||||||
</StudyListExpandedRow>
|
|
||||||
),
|
|
||||||
onClickRow: () =>
|
|
||||||
setExpandedRows(s =>
|
|
||||||
isExpanded ? s.filter(n => rowKey !== n) : [...s, rowKey]
|
|
||||||
),
|
|
||||||
isExpanded,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
const hasStudies = numOfStudies > 0;
|
const hasStudies = numOfStudies > 0;
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user