fix: display instance num sr viewport (#2045)

* fix: duplicate and use TrackingViewport's overlay w/ SR Viewport

* chore: correct component naming for OHIFTrackingViewport

extensions/dicom-sr/src/index.js

@@ -5,7 +5,7 @@ import id from './id.js';
 import init from './init';
 
 const Component = React.lazy(() => {
-  return import('./OHIFCornerstoneSRViewport');
+  return import('./viewports/OHIFCornerstoneSRViewport');
 });
 
 const OHIFCornerstoneSRViewport = props => {

extensions/dicom-sr/src/viewports/OHIFCornerstoneSRViewport.js

@@ -4,17 +4,18 @@ import cornerstoneTools from 'cornerstone-tools';
 import cornerstone from 'cornerstone-core';
 import CornerstoneViewport from 'react-cornerstone-viewport';
 import OHIF, { DicomMetadataStore, utils } from '@ohif/core';
-import DICOMSRDisplayTool from './tools/DICOMSRDisplayTool';
+import DICOMSRDisplayTool from './../tools/DICOMSRDisplayTool';
+import ViewportOverlay from './ViewportOverlay';
 import {
   Notification,
   ViewportActionBar,
   useViewportGrid,
   useViewportDialog,
 } from '@ohif/ui';
-import TOOL_NAMES from './constants/toolNames';
+import TOOL_NAMES from './../constants/toolNames';
 import { adapters } from 'dcmjs';
 // import getToolStateToCornerstoneMeasurementSchema from './utils/getToolStateToCornerstoneMeasurementSchema';
-import id from './id';
+import id from './../id';
 
 const { formatDate } = utils;
 const scrollToIndex = cornerstoneTools.importInternal('util/scrollToIndex');
@@ -368,7 +369,6 @@ function OHIFCornerstoneSRViewport({
   const label = viewports.length > 1 ? _viewportLabels[viewportIndex] : '';
 
   // TODO -> disabled double click for now: onDoubleClick={_onDoubleClick}
-
   return (
     <>
       <ViewportActionBar
@@ -422,10 +422,18 @@ function OHIFCornerstoneSRViewport({
           isStackPrefetchEnabled={true} // todo
           isPlaying={false}
           frameRate={24}
-          isOverlayVisible={false}
+          isOverlayVisible={true}
           // Sync resize throttle w/ sidepanel animation duration to prevent
           // seizure inducing strobe blinking effect
           resizeRefreshRateMs={150}
+          viewportOverlayComponent={props => {
+            return (
+              <ViewportOverlay
+                {...props}
+                activeTools={ToolBarService.getActiveTools()}
+              />
+            );
+          }}
         />
         <div className="absolute w-full">
           {viewportDialogState.viewportIndex === viewportIndex && (

extensions/dicom-sr/src/viewports/ViewportOverlay.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cornerstone from 'cornerstone-core';
+import classnames from 'classnames';
+
+const ViewportOverlay = ({
+  imageId,
+  scale,
+  windowWidth,
+  windowCenter,
+  imageIndex,
+  stackSize,
+  activeTools,
+}) => {
+  const topLeft = 'top-viewport left-viewport';
+  const topRight = 'top-viewport right-viewport-scrollbar';
+  const bottomRight = 'bottom-viewport right-viewport-scrollbar';
+  const bottomLeft = 'bottom-viewport left-viewport';
+  const overlay = 'absolute pointer-events-none';
+
+  const isZoomActive = activeTools.includes('Zoom');
+  const isWwwcActive = activeTools.includes('Wwwc');
+
+  debugger;
+
+  if (!imageId) {
+    return null;
+  }
+
+  const generalImageModule =
+    cornerstone.metaData.get('generalImageModule', imageId) || {};
+  const { instanceNumber } = generalImageModule;
+
+  return (
+    <div className="text-primary-light">
+      <div className={classnames(overlay, topLeft)}>
+        {isZoomActive && (
+          <div className="flex flex-row">
+            <span className="mr-1">Zoom:</span>
+            <span className="font-thin">{scale.toFixed(2)}x</span>
+          </div>
+        )}
+        {isWwwcActive && (
+          <div className="flex flex-row">
+            <span className="mr-1">W:</span>
+            <span className="ml-1 mr-2 font-thin">
+              {windowWidth.toFixed(0)}
+            </span>
+            <span className="mr-1">L:</span>
+            <span className="ml-1 font-thin">{windowCenter.toFixed(0)}</span>
+          </div>
+        )}
+      </div>
+      <div className={classnames(overlay, topRight)}>
+        {stackSize > 1 && (
+          <div className="flex flex-row">
+            <span className="mr-1">I:</span>
+            <span className="font-thin">
+              {`${instanceNumber} (${imageIndex}/${stackSize})`}
+            </span>
+          </div>
+        )}
+      </div>
+      <div className={classnames(overlay, bottomRight)}></div>
+      <div className={classnames(overlay, bottomLeft)}></div>
+    </div>
+  );
+};
+
+ViewportOverlay.defaultProps = {
+  stackSize: 99999,
+};
+
+ViewportOverlay.propTypes = {
+  scale: PropTypes.number.isRequired,
+  windowWidth: PropTypes.number.isRequired,
+  windowCenter: PropTypes.number.isRequired,
+  imageId: PropTypes.string.isRequired,
+  imageIndex: PropTypes.number.isRequired,
+  stackSize: PropTypes.number.isRequired,
+  activeTools: PropTypes.arrayOf(PropTypes.string),
+};
+
+ViewportOverlay.defaultProps = {
+  activeTools: [],
+};
+
+export default ViewportOverlay;

extensions/measurement-tracking/src/getViewportModule.js

@@ -13,16 +13,20 @@ const OHIFCornerstoneViewport = props => {
 };
 
 function getViewportModule({ servicesManager, commandsManager }) {
-  const ExtendedOHIFCornerstoneSRViewport = props => {
+  const ExtendedOHIFCornerstoneTrackingViewport = props => {
     return (
-      <OHIFCornerstoneViewport servicesManager={servicesManager} commandsManager={commandsManager} {...props} />
+      <OHIFCornerstoneViewport
+        servicesManager={servicesManager}
+        commandsManager={commandsManager}
+        {...props}
+      />
     );
   };
 
   return [
     {
       name: 'cornerstone-tracked',
-      component: ExtendedOHIFCornerstoneSRViewport,
+      component: ExtendedOHIFCornerstoneTrackingViewport,
     },
   ];
 }