[OHIF-192] - Viewport letter only if using multiple viewport layout. (#1822)
* Viewport letter only in multi-viewport layout. * If SliceThickness not available print N/A
This commit is contained in:
James Petts
GitHub
parent
050b260a58
commit
d266b944c2
@ -250,12 +250,19 @@ function OHIFCornerstoneSRViewport({
|
||||
seriesDescription: SeriesDescription,
|
||||
modality: Modality,
|
||||
patientInformation: {
|
||||
patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
|
||||
patientName: PatientName
|
||||
? OHIF.utils.formatPN(PatientName.Alphabetic)
|
||||
: '',
|
||||
patientSex: PatientSex || '',
|
||||
patientAge: PatientAge || '',
|
||||
MRN: PatientID || '',
|
||||
thickness: `${SliceThickness}mm`,
|
||||
spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
|
||||
thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
|
||||
spacing:
|
||||
PixelSpacing && PixelSpacing.length
|
||||
? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
|
||||
2
|
||||
)}mm`
|
||||
: '',
|
||||
scanner: ManufacturerModelName || '',
|
||||
},
|
||||
}}
|
||||
|
||||
@ -291,8 +291,11 @@ function _mapDisplaySets(
|
||||
const firstViewportIndexWithMatchingDisplaySetUid = viewports.findIndex(
|
||||
vp => vp.displaySetInstanceUID === ds.displaySetInstanceUID
|
||||
);
|
||||
|
||||
const viewportIdentificator =
|
||||
_viewportLabels[firstViewportIndexWithMatchingDisplaySetUid] || '';
|
||||
viewports.length > 1
|
||||
? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
|
||||
: '';
|
||||
|
||||
const array =
|
||||
componentType === 'thumbnailTracked'
|
||||
|
||||
@ -225,20 +225,25 @@ function TrackedCornerstoneViewport({
|
||||
PatientAge,
|
||||
SliceThickness,
|
||||
PixelSpacing,
|
||||
ManufacturerModelName
|
||||
ManufacturerModelName,
|
||||
} = displaySet.images[0];
|
||||
|
||||
if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
|
||||
setIsTracked(!isTracked);
|
||||
}
|
||||
|
||||
const label =
|
||||
viewports.length > 1
|
||||
? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
|
||||
: '';
|
||||
|
||||
return (
|
||||
<>
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
showNavArrows={viewportIndex === activeViewportIndex}
|
||||
studyData={{
|
||||
label: _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid],
|
||||
label,
|
||||
isTracked: trackedSeries.includes(SeriesInstanceUID),
|
||||
isLocked: false,
|
||||
studyDate: formatDate(SeriesDate), // TODO: This is series date. Is that ok?
|
||||
@ -246,12 +251,19 @@ function TrackedCornerstoneViewport({
|
||||
seriesDescription: SeriesDescription,
|
||||
modality: Modality,
|
||||
patientInformation: {
|
||||
patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
|
||||
patientName: PatientName
|
||||
? OHIF.utils.formatPN(PatientName.Alphabetic)
|
||||
: '',
|
||||
patientSex: PatientSex || '',
|
||||
patientAge: PatientAge || '',
|
||||
MRN: PatientID || '',
|
||||
thickness: `${SliceThickness}mm`,
|
||||
spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
|
||||
thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
|
||||
spacing:
|
||||
PixelSpacing && PixelSpacing.length
|
||||
? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
|
||||
2
|
||||
)}mm`
|
||||
: '',
|
||||
scanner: ManufacturerModelName || '',
|
||||
},
|
||||
}}
|
||||
|
||||
@ -39,7 +39,7 @@ const ViewportActionBar = ({
|
||||
scanner,
|
||||
} = patientInformation;
|
||||
|
||||
const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo)
|
||||
const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo);
|
||||
|
||||
const renderIconStatus = () => {
|
||||
if (modality === 'SR') {
|
||||
@ -64,26 +64,26 @@ const ViewportActionBar = ({
|
||||
{!isTracked ? (
|
||||
<Icon name="dotted-circle" className="w-6 text-primary-light" />
|
||||
) : (
|
||||
<Tooltip
|
||||
position="bottom-left"
|
||||
content={
|
||||
<div className="flex py-2">
|
||||
<div className="flex pt-1">
|
||||
<Icon name="info-link" className="w-4 text-primary-main" />
|
||||
</div>
|
||||
<div className="flex ml-4">
|
||||
<span className="text-base text-common-light">
|
||||
Series is
|
||||
<Tooltip
|
||||
position="bottom-left"
|
||||
content={
|
||||
<div className="flex py-2">
|
||||
<div className="flex pt-1">
|
||||
<Icon name="info-link" className="w-4 text-primary-main" />
|
||||
</div>
|
||||
<div className="flex ml-4">
|
||||
<span className="text-base text-common-light">
|
||||
Series is
|
||||
<span className="font-bold text-white"> tracked</span> and
|
||||
can be viewed <br /> in the measurement panel
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon name="tracked" className="w-6 text-primary-light" />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon name="tracked" className="w-6 text-primary-light" />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -196,54 +196,64 @@ function PatientInfo({
|
||||
isSticky
|
||||
isDisabled={!isOpen}
|
||||
position="bottom-right"
|
||||
content={isOpen && (
|
||||
<div className="flex py-2">
|
||||
<div className="flex pt-1">
|
||||
<Icon name="info-link" className="w-4 text-primary-main" />
|
||||
</div>
|
||||
<div className="flex flex-col ml-2">
|
||||
<span className="text-base font-bold text-white">
|
||||
{patientName}
|
||||
</span>
|
||||
<div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
|
||||
<div className={classnames(classes.firstRow)}>
|
||||
<span className={classnames(classes.infoHeader)}>Sex</span>
|
||||
<span className={classnames(classes.infoText)}>
|
||||
{patientSex}
|
||||
</span>
|
||||
</div>
|
||||
<div className={classnames(classes.row)}>
|
||||
<span className={classnames(classes.infoHeader)}>Age</span>
|
||||
<span className={classnames(classes.infoText)}>
|
||||
{patientAge}
|
||||
</span>
|
||||
</div>
|
||||
<div className={classnames(classes.row)}>
|
||||
<span className={classnames(classes.infoHeader)}>MRN</span>
|
||||
<span className={classnames(classes.infoText)}>{MRN}</span>
|
||||
</div>
|
||||
content={
|
||||
isOpen && (
|
||||
<div className="flex py-2">
|
||||
<div className="flex pt-1">
|
||||
<Icon name="info-link" className="w-4 text-primary-main" />
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className={classnames(classes.firstRow)}>
|
||||
<span className={classnames(classes.infoHeader)}>
|
||||
Thickness
|
||||
</span>
|
||||
<span className={classnames(classes.infoText)}>
|
||||
{thickness}
|
||||
</span>
|
||||
<div className="flex flex-col ml-2">
|
||||
<span className="text-base font-bold text-white">
|
||||
{patientName}
|
||||
</span>
|
||||
<div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
|
||||
<div className={classnames(classes.firstRow)}>
|
||||
<span className={classnames(classes.infoHeader)}>Sex</span>
|
||||
<span className={classnames(classes.infoText)}>
|
||||
{patientSex}
|
||||
</span>
|
||||
</div>
|
||||
<div className={classnames(classes.row)}>
|
||||
<span className={classnames(classes.infoHeader)}>Age</span>
|
||||
<span className={classnames(classes.infoText)}>
|
||||
{patientAge}
|
||||
</span>
|
||||
</div>
|
||||
<div className={classnames(classes.row)}>
|
||||
<span className={classnames(classes.infoHeader)}>MRN</span>
|
||||
<span className={classnames(classes.infoText)}>{MRN}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classnames(classes.row)}>
|
||||
<span className={classnames(classes.infoHeader)}>Spacing</span>
|
||||
<span className={classnames(classes.infoText)}>{spacing}</span>
|
||||
</div>
|
||||
<div className={classnames(classes.row)}>
|
||||
<span className={classnames(classes.infoHeader)}>Scanner</span>
|
||||
<span className={classnames(classes.infoText)}>{scanner}</span>
|
||||
<div className="flex">
|
||||
<div className={classnames(classes.firstRow)}>
|
||||
<span className={classnames(classes.infoHeader)}>
|
||||
Thickness
|
||||
</span>
|
||||
<span className={classnames(classes.infoText)}>
|
||||
{thickness ? thickness : 'N/A'}
|
||||
</span>
|
||||
</div>
|
||||
<div className={classnames(classes.row)}>
|
||||
<span className={classnames(classes.infoHeader)}>
|
||||
Spacing
|
||||
</span>
|
||||
<span className={classnames(classes.infoText)}>
|
||||
{spacing}
|
||||
</span>
|
||||
</div>
|
||||
<div className={classnames(classes.row)}>
|
||||
<span className={classnames(classes.infoHeader)}>
|
||||
Scanner
|
||||
</span>
|
||||
<span className={classnames(classes.infoText)}>
|
||||
{scanner}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className="relative flex justify-end cursor-pointer">
|
||||
<div className="relative">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user