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,102 +111,47 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
           </div>
         </div>
       </div>
-      <div className="ml-2">
+      {showNavArrows && (
-        <ButtonGroup>
+        <div className="ml-2">
-          <Button
+          <ButtonGroup>
-            size="initial"
+            <Button
-            className="px-2 py-1"
+              size="initial"
-            onClick={() => onSeriesChange('left')}
+              className="px-2 py-1"
-          >
+              onClick={() => onSeriesChange('left')}
-            <Icon name="chevron-left" className="w-4 text-white" />
+            >
-          </Button>
+              <Icon name="chevron-left" className="w-4 text-white" />
-          <Button
+            </Button>
-            size="initial"
+            <Button
-            className="px-2 py-1"
+              size="initial"
-            onClick={() => onSeriesChange('right')}
+              className="px-2 py-1"
-          >
+              onClick={() => onSeriesChange('right')}
-            <Icon name="chevron-right" className="w-4 text-white" />
+            >
-          </Button>
+              <Icon name="chevron-right" className="w-4 text-white" />
-        </ButtonGroup>
+            </Button>
-      </div>
+          </ButtonGroup>
-      <div className="flex ml-4 mr-2">
+        </div>
-        <Tooltip
+      )}
-          position="bottom-right"
+      {showPatientInfo && (
-          content={
+        <div className="flex ml-4 mr-2">
-            <div className="flex py-2">
+          <PatientInfo
-              <div className="flex pt-1">
+            patientName={patientName}
-                <Icon name="info-link" className="w-4 text-primary-main" />
+            patientSex={patientSex}
-              </div>
+            patientAge={patientAge}
-              <div className="flex flex-col ml-2">
+            MRN={MRN}
-                <span className="text-base font-bold text-white">
+            thickness={thickness}
-                  {patientName}
+            spacing={spacing}
-                </span>
+            scanner={scanner}
-                <div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
+          />
-                  <div className={classnames(classes.firstRow)}>
+        </div>
-                    <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="flex">
-                  <div className={classnames(classes.firstRow)}>
-                    <span className={classnames(classes.infoHeader)}>
-                      Thickness
-                    </span>
-                    <span className={classnames(classes.infoText)}>
-                      {thickness}
-                    </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 className="relative flex justify-end">
-            <div className="relative">
-              <Icon name="profile" className="w-5 text-white" />
-              <Icon
-                name="info-link"
-                className="absolute w-5 text-white bg-black"
-                style={{ right: -7, bottom: -10 }}
-              />
-            </div>
-          </div>
-        </Tooltip>
-      </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,
@@ -222,4 +172,84 @@ ViewportActionBar.propTypes = {
   }).isRequired,
 };
 
+ViewportActionBar.defaultProps = {
+  showNavArrows: true,
+  showPatientInfo: true,
+};
+
+function PatientInfo({
+  patientName,
+  patientSex,
+  patientAge,
+  MRN,
+  thickness,
+  spacing,
+  scanner,
+}) {
+  return (
+    <Tooltip
+      position="bottom-right"
+      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 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="flex">
+              <div className={classnames(classes.firstRow)}>
+                <span className={classnames(classes.infoHeader)}>
+                  Thickness
+                </span>
+                <span className={classnames(classes.infoText)}>
+                  {thickness}
+                </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 className="relative flex justify-end">
+        <div className="relative">
+          <Icon name="profile" className="w-5 text-white" />
+          <Icon
+            name="info-link"
+            className="absolute w-5 text-white bg-black"
+            style={{ right: -7, bottom: -10 }}
+          />
+        </div>
+      </div>
+    </Tooltip>
+  );
+}
+
 export default ViewportActionBar;