TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[OHIF-192] - Viewport letter only if using multiple viewport layout. (#1822)

Browse Source 
* Viewport letter only in multi-viewport layout.

* If SliceThickness not available print N/A
This commit is contained in:
James Petts 2020-06-30 11:41:50 +01:00 committed by GitHub
parent 050b260a58
commit d266b944c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 101 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js
View File

@ -250,12 +250,19 @@ function OHIFCornerstoneSRViewport({
seriesDescription: SeriesDescription, seriesDescription: SeriesDescription,
modality: Modality, modality: Modality,
patientInformation: { patientInformation: {
patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '', patientName: PatientName
? OHIF.utils.formatPN(PatientName.Alphabetic)
: '',
patientSex: PatientSex || '', patientSex: PatientSex || '',
patientAge: PatientAge || '', patientAge: PatientAge || '',
MRN: PatientID || '', MRN: PatientID || '',
thickness: `${SliceThickness}mm`, thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '', spacing:
PixelSpacing && PixelSpacing.length
? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
2
)}mm`
: '',
scanner: ManufacturerModelName || '', scanner: ManufacturerModelName || '',
}, },
}} }}

5
extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx
View File

@ -291,8 +291,11 @@ function _mapDisplaySets(
const firstViewportIndexWithMatchingDisplaySetUid = viewports.findIndex( const firstViewportIndexWithMatchingDisplaySetUid = viewports.findIndex(
vp => vp.displaySetInstanceUID === ds.displaySetInstanceUID vp => vp.displaySetInstanceUID === ds.displaySetInstanceUID
); );
const viewportIdentificator = const viewportIdentificator =
_viewportLabels[firstViewportIndexWithMatchingDisplaySetUid] || ''; viewports.length > 1
? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
: '';
const array = const array =
componentType === 'thumbnailTracked' componentType === 'thumbnailTracked'

22
extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
View File

@ -225,20 +225,25 @@ function TrackedCornerstoneViewport({
PatientAge, PatientAge,
SliceThickness, SliceThickness,
PixelSpacing, PixelSpacing,
ManufacturerModelName ManufacturerModelName,
} = displaySet.images[0]; } = displaySet.images[0];
if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) { if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
setIsTracked(!isTracked); setIsTracked(!isTracked);
} }
const label =
viewports.length > 1
? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
: '';
return ( return (
<> <>
<ViewportActionBar <ViewportActionBar
onSeriesChange={direction => alert(`Series ${direction}`)} onSeriesChange={direction => alert(`Series ${direction}`)}
showNavArrows={viewportIndex === activeViewportIndex} showNavArrows={viewportIndex === activeViewportIndex}
studyData={{ studyData={{
label: _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid], label,
isTracked: trackedSeries.includes(SeriesInstanceUID), isTracked: trackedSeries.includes(SeriesInstanceUID),
isLocked: false, isLocked: false,
studyDate: formatDate(SeriesDate), // TODO: This is series date. Is that ok? studyDate: formatDate(SeriesDate), // TODO: This is series date. Is that ok?
@ -246,12 +251,19 @@ function TrackedCornerstoneViewport({
seriesDescription: SeriesDescription, seriesDescription: SeriesDescription,
modality: Modality, modality: Modality,
patientInformation: { patientInformation: {
patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '', patientName: PatientName
? OHIF.utils.formatPN(PatientName.Alphabetic)
: '',
patientSex: PatientSex || '', patientSex: PatientSex || '',
patientAge: PatientAge || '', patientAge: PatientAge || '',
MRN: PatientID || '', MRN: PatientID || '',
thickness: `${SliceThickness}mm`, thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '', spacing:
PixelSpacing && PixelSpacing.length
? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
2
)}mm`
: '',
scanner: ManufacturerModelName || '', scanner: ManufacturerModelName || '',
}, },
}} }}

130
platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
View File

@ -39,7 +39,7 @@ const ViewportActionBar = ({
scanner, scanner,
} = patientInformation; } = patientInformation;
const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo) const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo);
const renderIconStatus = () => { const renderIconStatus = () => {
if (modality === 'SR') { if (modality === 'SR') {
@ -64,26 +64,26 @@ const ViewportActionBar = ({
{!isTracked ? ( {!isTracked ? (
<Icon name="dotted-circle" className="w-6 text-primary-light" /> <Icon name="dotted-circle" className="w-6 text-primary-light" />
) : ( ) : (
<Tooltip <Tooltip
position="bottom-left" position="bottom-left"
content={ content={
<div className="flex py-2"> <div className="flex py-2">
<div className="flex pt-1"> <div className="flex pt-1">
<Icon name="info-link" className="w-4 text-primary-main" /> <Icon name="info-link" className="w-4 text-primary-main" />
</div> </div>
<div className="flex ml-4"> <div className="flex ml-4">
<span className="text-base text-common-light"> <span className="text-base text-common-light">
Series is Series is
<span className="font-bold text-white"> tracked</span> and <span className="font-bold text-white"> tracked</span> and
can be viewed <br /> in the measurement panel can be viewed <br /> in the measurement panel
</span> </span>
</div>
</div> </div>
} </div>
> }
<Icon name="tracked" className="w-6 text-primary-light" /> >
</Tooltip> <Icon name="tracked" className="w-6 text-primary-light" />
)} </Tooltip>
)}
</div> </div>
); );
}; };
@ -196,54 +196,64 @@ function PatientInfo({
isSticky isSticky
isDisabled={!isOpen} isDisabled={!isOpen}
position="bottom-right" position="bottom-right"
content={isOpen && ( content={
<div className="flex py-2"> isOpen && (
<div className="flex pt-1"> <div className="flex py-2">
<Icon name="info-link" className="w-4 text-primary-main" /> <div className="flex pt-1">
</div> <Icon name="info-link" className="w-4 text-primary-main" />
<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>
<div className="flex"> <div className="flex flex-col ml-2">
<div className={classnames(classes.firstRow)}> <span className="text-base font-bold text-white">
<span className={classnames(classes.infoHeader)}> {patientName}
Thickness </span>
</span> <div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
<span className={classnames(classes.infoText)}> <div className={classnames(classes.firstRow)}>
{thickness} <span className={classnames(classes.infoHeader)}>Sex</span>
</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>
<div className={classnames(classes.row)}> <div className="flex">
<span className={classnames(classes.infoHeader)}>Spacing</span> <div className={classnames(classes.firstRow)}>
<span className={classnames(classes.infoText)}>{spacing}</span> <span className={classnames(classes.infoHeader)}>
</div> Thickness
<div className={classnames(classes.row)}> </span>
<span className={classnames(classes.infoHeader)}>Scanner</span> <span className={classnames(classes.infoText)}>
<span className={classnames(classes.infoText)}>{scanner}</span> {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> </div>
</div> )
)} }
> >
<div className="relative flex justify-end cursor-pointer"> <div className="relative flex justify-end cursor-pointer">
<div className="relative"> <div className="relative">