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

Conditionally show left/right and userinfo for active viewport

Browse Source
This commit is contained in:
dannyrb 2020-06-16 00:56:54 -04:00
parent 27e62949ce
commit 6e65e7eaf5
2 changed files with 127 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,7 +27,10 @@ function TrackedCornerstoneViewport({
viewportIndex,
}) {
const [trackedMeasurements] = useTrackedMeasurements();
const [{ viewports }, dispatchViewportGrid] = useViewportGrid();
const [
{ activeViewportIndex, viewports },
dispatchViewportGrid,
] = useViewportGrid();
// viewportIndex, onSubmit
const [viewportDialogState, viewportDialogApi] = useViewportDialog();
const [viewportData, setViewportData] = useState(null);
@ -132,6 +135,8 @@ function TrackedCornerstoneViewport({
<>
<ViewportActionBar
onSeriesChange={direction => alert(`Series ${direction}`)}
showPatientInfo={viewportIndex === activeViewportIndex}
showNavArrows={viewportIndex === activeViewportIndex}
studyData={{
label: _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid],
isTracked: trackedSeries.includes(SeriesInstanceUID),

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

@ -10,7 +10,12 @@ const classes = {
row: 'flex flex-col ml-4',
};
const ViewportActionBar = ({ studyData, onSeriesChange }) => {
const ViewportActionBar = ({
studyData,
showNavArrows,
showPatientInfo,
onSeriesChange,
}) => {
const {
label,
isTracked,
@ -106,6 +111,7 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
</div>
</div>
</div>
{showNavArrows && (
<div className="ml-2">
<ButtonGroup>
<Button
@ -124,7 +130,63 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
</Button>
</ButtonGroup>
</div>
)}
{showPatientInfo && (
<div className="flex ml-4 mr-2">
<PatientInfo
patientName={patientName}
patientSex={patientSex}
patientAge={patientAge}
MRN={MRN}
thickness={thickness}
spacing={spacing}
scanner={scanner}
/>
</div>
)}
</div>
);
};
ViewportActionBar.propTypes = {
onSeriesChange: PropTypes.func.isRequired,
showNavArrows: PropTypes.bool,
showPatientInfo: PropTypes.bool,
studyData: PropTypes.shape({
label: PropTypes.string.isRequired,
isTracked: PropTypes.bool.isRequired,
isLocked: PropTypes.bool.isRequired,
studyDate: PropTypes.string.isRequired,
currentSeries: PropTypes.number.isRequired,
seriesDescription: PropTypes.string.isRequired,
modality: PropTypes.string.isRequired,
patientInformation: PropTypes.shape({
patientName: PropTypes.string.isRequired,
patientSex: PropTypes.string.isRequired,
patientAge: PropTypes.string.isRequired,
MRN: PropTypes.string.isRequired,
thickness: PropTypes.string.isRequired,
spacing: PropTypes.string.isRequired,
scanner: PropTypes.string.isRequired,
}),
}).isRequired,
};
ViewportActionBar.defaultProps = {
showNavArrows: true,
showPatientInfo: true,
};
function PatientInfo({
patientName,
patientSex,
patientAge,
MRN,
thickness,
spacing,
scanner,
}) {
return (
<Tooltip
position="bottom-right"
content={
@ -164,20 +226,12 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
</span>
</div>
<div className={classnames(classes.row)}>
<span className={classnames(classes.infoHeader)}>
Spacing
</span>
<span className={classnames(classes.infoText)}>
{spacing}
</span>
<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>
<span className={classnames(classes.infoHeader)}>Scanner</span>
<span className={classnames(classes.infoText)}>{scanner}</span>
</div>
</div>
</div>
@ -195,31 +249,7 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
</div>
</div>
</Tooltip>
</div>
</div>
);
};
ViewportActionBar.propTypes = {
onSeriesChange: PropTypes.func.isRequired,
studyData: PropTypes.shape({
label: PropTypes.string.isRequired,
isTracked: PropTypes.bool.isRequired,
isLocked: PropTypes.bool.isRequired,
studyDate: PropTypes.string.isRequired,
currentSeries: PropTypes.number.isRequired,
seriesDescription: PropTypes.string.isRequired,
modality: PropTypes.string.isRequired,
patientInformation: PropTypes.shape({
patientName: PropTypes.string.isRequired,
patientSex: PropTypes.string.isRequired,
patientAge: PropTypes.string.isRequired,
MRN: PropTypes.string.isRequired,
thickness: PropTypes.string.isRequired,
spacing: PropTypes.string.isRequired,
scanner: PropTypes.string.isRequired,
}),
}).isRequired,
};
}
export default ViewportActionBar;