Conditionally show left/right and userinfo for active viewport

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js

@@ -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),

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -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)}>
+                <span className={classnames(classes.infoHeader)}>Spacing</span>
-                      Spacing
+                <span className={classnames(classes.infoText)}>{spacing}</span>
-                    </span>
-                    <span className={classnames(classes.infoText)}>
-                      {spacing}
-                    </span>
               </div>
               <div className={classnames(classes.row)}>
-                    <span className={classnames(classes.infoHeader)}>
+                <span className={classnames(classes.infoHeader)}>Scanner</span>
-                      Scanner
+                <span className={classnames(classes.infoText)}>{scanner}</span>
-                    </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;