Complete rehydration.

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/TrackedMeasurementsContext.jsx

@@ -6,6 +6,9 @@ import {
   machineConfiguration,
   defaultOptions,
 } from './measurementTrackingMachine';
+import promptBeginTracking from './promptBeginTracking';
+import promptTrackNewSeries from './promptTrackNewSeries';
+import promptTrackNewStudy from './promptTrackNewStudy';
 
 const TrackedMeasurementsContext = React.createContext();
 TrackedMeasurementsContext.displayName = 'TrackedMeasurementsContext';
@@ -19,41 +22,20 @@ function TrackedMeasurementsContextProvider(
   UIViewportDialogService,
   { children }
 ) {
-  function promptUser(message, ctx, evt) {
-    const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
-
-    return new Promise(function(resolve, reject) {
-      /**
-       * TODO: Will have issues if "SeriesInstanceUID" exists in multiple displaySets?
-       *
-       * @param {number} result - -1 | 0 | 1 --> deny | cancel | accept
-       * @return resolve { userResponse: number, StudyInstanceUID: string, SeriesInstanceUID: string }
-       */
-      const handleSubmit = result => {
-        UIViewportDialogService.hide();
-        resolve({ userResponse: result, StudyInstanceUID, SeriesInstanceUID });
-      };
-
-      UIViewportDialogService.show({
-        viewportIndex,
-        type: 'info',
-        message,
-        actions: [
-          { type: 'cancel', text: 'No', value: 0 },
-          { type: 'secondary', text: 'No, do not ask again', value: -1 },
-          { type: 'primary', text: 'Yes', value: 1 },
-        ],
-        onSubmit: handleSubmit,
-      });
-    });
-  }
-
-  // Set StateMachine behavior for prompts (invoked services)
   const machineOptions = Object.assign({}, defaultOptions);
   machineOptions.services = Object.assign({}, machineOptions.services, {
-    promptBeginTracking: promptUser.bind(null, 'Start tracking?'),
-    promptTrackNewStudy: promptUser.bind(null, 'New study?'),
-    promptTrackNewSeries: promptUser.bind(null, 'New series?'),
+    promptBeginTracking: promptBeginTracking.bind(
+      null,
+      UIViewportDialogService
+    ),
+    promptTrackNewSeries: promptTrackNewSeries.bind(
+      null,
+      UIViewportDialogService
+    ),
+    promptTrackNewStudy: promptTrackNewStudy.bind(
+      null,
+      UIViewportDialogService
+    ),
   });
 
 

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/measurementTrackingMachine.js

@@ -1,5 +1,13 @@
 import { assign } from 'xstate';
 
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  CREATE_REPORT: 1,
+  ADD_SERIES: 2,
+  SET_STUDY_AND_SERIES: 3,
+};
+
 const machineConfiguration = {
   id: 'measurementTracking',
   initial: 'idle',
@@ -18,13 +26,7 @@ const machineConfiguration = {
         SET_TRACKED_SERIES: [
           {
             target: 'tracking',
-            actions: ['setTrackedStudyAndSeries'],
-            cond: 'isNewStudy',
-          },
-          {
-            target: 'tracking',
-            actions: ['addTrackedSeries'],
-            cond: 'isNewSeries',
+            actions: ['setTrackedStudyAndMultipleSeries'],
           },
         ],
       },
@@ -36,11 +38,11 @@ const machineConfiguration = {
           {
             target: 'tracking',
             actions: ['setTrackedStudyAndSeries'],
-            cond: 'promptAccepted',
+            cond: 'shouldSetStudyAndSeries',
           },
           {
             target: 'off',
-            cond: 'promptDeclined',
+            cond: 'shouldKillMachine',
           },
           {
             target: 'idle',
@@ -76,15 +78,21 @@ const machineConfiguration = {
         ],
       },
     },
-    promptTrackNewStudy: {
+    promptTrackNewSeries: {
       invoke: {
-        src: 'promptTrackNewStudy',
+        src: 'promptTrackNewSeries',
         onDone: [
           {
             target: 'tracking',
-            actions: ['setTrackedStudyAndSeries'],
-            cond: 'promptAccepted',
+            actions: ['addTrackedSeries'],
+            cond: 'shouldAddSeries',
           },
+          {
+            target: 'tracking',
+            actions: ['setTrackedStudyAndSeries'],
+            cond: 'shouldSetStudyAndSeries',
+          },
+          // CREATE_REPORT && CANCEL
           {
             target: 'tracking',
           },
@@ -94,14 +102,14 @@ const machineConfiguration = {
         },
       },
     },
-    promptTrackNewSeries: {
+    promptTrackNewStudy: {
       invoke: {
-        src: 'promptTrackNewSeries',
+        src: 'promptTrackNewStudy',
         onDone: [
           {
             target: 'tracking',
-            actions: ['addTrackedSeries'],
-            cond: 'promptAccepted',
+            actions: ['setTrackedStudyAndSeries'],
+            cond: 'shouldSetStudyAndSeries',
           },
           {
             target: 'tracking',
@@ -138,6 +146,10 @@ const defaultOptions = {
       trackedStudy: evt.data.StudyInstanceUID,
       trackedSeries: [evt.data.SeriesInstanceUID],
     })),
+    setTrackedStudyAndMultipleSeries: assign((ctx, evt) => ({
+      trackedStudy: evt.StudyInstanceUID,
+      trackedSeries: [...ctx.trackedSeries, ...evt.SeriesInstanceUIDs],
+    })),
     addTrackedSeries: assign((ctx, evt) => ({
       trackedSeries: [...ctx.trackedSeries, evt.data.SeriesInstanceUID],
     })),
@@ -148,9 +160,12 @@ const defaultOptions = {
     })),
   },
   guards: {
-    promptAccepted: (ctx, evt) => evt.data && evt.data.userResponse === 1,
-    promptCanceled: (ctx, evt) => evt.data && evt.data.userResponse === 0,
-    promptDeclined: (ctx, evt) => evt.data && evt.data.userResponse === -1,
+    shouldKillMachine: (ctx, evt) =>
+      evt.data && evt.data.userResponse === RESPONSE.NO_NEVER,
+    shouldAddSeries: (ctx, evt) =>
+      evt.data && evt.data.userResponse === RESPONSE.ADD_SERIES,
+    shouldSetStudyAndSeries: (ctx, evt) =>
+      evt.data && evt.data.userResponse === RESPONSE.SET_STUDY_AND_SERIES,
     // Has more than 1, or SeriesInstanceUID is not in list
     // --> Post removal would have non-empty trackedSeries array
     hasRemainingTrackedSeries: (ctx, evt) =>
@@ -162,13 +177,4 @@ const defaultOptions = {
   },
 };
 
-// const measurementTrackingMachine = Machine(
-//   machineConfiguration,
-//   defaultOptions
-// );
-// .transition(state, eventArgument).value
-// const service = interpret(measurementTrackingMachine).start();
-// .send(event): nextState
-// .state (getter)
-// .onTransition(state => { state.vale })
 export { defaultOptions, machineConfiguration };

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptBeginTracking.js

@@ -0,0 +1,61 @@
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  CREATE_REPORT: 1,
+  ADD_SERIES: 2,
+  SET_STUDY_AND_SERIES: 3,
+};
+
+function promptUser(UIViewportDialogService, ctx, evt) {
+  const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
+
+  return new Promise(async function(resolve, reject) {
+    let promptResult = await _askTrackMeasurements(
+      UIViewportDialogService,
+      viewportIndex
+    );
+
+    resolve({
+      userResponse: promptResult,
+      StudyInstanceUID,
+      SeriesInstanceUID,
+    });
+  });
+}
+
+function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
+  return new Promise(function(resolve, reject) {
+    const message = 'Track measurements for this series?';
+    const actions = [
+      { type: 'cancel', text: 'No', value: RESPONSE.CANCEL },
+      {
+        type: 'secondary',
+        text: 'No, do not ask again',
+        value: RESPONSE.NO_NEVER,
+      },
+      {
+        type: 'primary',
+        text: 'Yes',
+        value: RESPONSE.SET_STUDY_AND_SERIES,
+      },
+    ];
+    const onSubmit = result => {
+      UIViewportDialogService.hide();
+      resolve(result);
+    };
+
+    UIViewportDialogService.show({
+      viewportIndex,
+      type: 'info',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+    });
+  });
+}
+
+export default promptUser;

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewSeries.js

@@ -0,0 +1,110 @@
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  CREATE_REPORT: 1,
+  ADD_SERIES: 2,
+  SET_STUDY_AND_SERIES: 3,
+};
+
+function promptUser(UIViewportDialogService, ctx, evt) {
+  const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
+
+  return new Promise(async function(resolve, reject) {
+    let promptResult = await _askShouldAddMeasurements(
+      UIViewportDialogService,
+      viewportIndex
+    );
+
+    if (promptResult === RESPONSE.CREATE_REPORT) {
+      promptResult = await _askSaveDiscardOrCancel(
+        UIViewportDialogService,
+        viewportIndex
+      );
+    }
+
+    // TODO: Hook into @JamesAPetts createReport
+    if (promptResult === RESPONSE.CREATE_REPORT) {
+      window.alert('CREATE REPORT');
+    }
+
+    resolve({
+      userResponse: promptResult,
+      StudyInstanceUID,
+      SeriesInstanceUID,
+    });
+  });
+}
+
+function _askShouldAddMeasurements(UIViewportDialogService, viewportIndex) {
+  return new Promise(function(resolve, reject) {
+    const message =
+      'Do you want to add this measurement to the existing report?';
+    const actions = [
+      { type: 'cancel', text: 'Cancel', value: RESPONSE.CANCEL },
+      {
+        type: 'secondary',
+        text: 'Create new report',
+        value: RESPONSE.CREATE_REPORT,
+      },
+      {
+        type: 'primary',
+        text: 'Add to existing report',
+        value: RESPONSE.ADD_SERIES,
+      },
+    ];
+    const onSubmit = result => {
+      UIViewportDialogService.hide();
+      resolve(result);
+    };
+
+    UIViewportDialogService.show({
+      viewportIndex,
+      type: 'info',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+    });
+  });
+}
+
+function _askSaveDiscardOrCancel(UIViewportDialogService, viewportIndex) {
+  return new Promise(function(resolve, reject) {
+    const message =
+      'You have existing tracked measurements. What would you like to do with your existing tracked measurements?';
+    const actions = [
+      { type: 'cancel', text: 'Cancel', value: RESPONSE.CANCEL },
+      {
+        type: 'secondary',
+        text: 'Save in report',
+        value: RESPONSE.CREATE_REPORT,
+      },
+      {
+        type: 'primary',
+        text: 'Discard',
+        value: RESPONSE.SET_STUDY_AND_SERIES,
+      },
+    ];
+    const onSubmit = result => {
+      UIViewportDialogService.hide();
+      resolve(result);
+    };
+
+    UIViewportDialogService.show({
+      viewportIndex,
+      type: 'warning',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+    });
+  });
+}
+
+export default promptUser;

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewStudy.js

@@ -0,0 +1,104 @@
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  CREATE_REPORT: 1,
+  ADD_SERIES: 2,
+  SET_STUDY_AND_SERIES: 3,
+};
+
+function promptUser(UIViewportDialogService, ctx, evt) {
+  const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
+
+  return new Promise(async function(resolve, reject) {
+    let promptResult = await _askTrackMeasurements(
+      UIViewportDialogService,
+      viewportIndex
+    );
+
+    if (promptResult === RESPONSE.SET_STUDY_AND_SERIES) {
+      promptResult = await _askSaveDiscardOrCancel(
+        UIViewportDialogService,
+        viewportIndex
+      );
+    }
+
+    // TODO: Hook into @JamesAPetts createReport
+    if (promptResult === RESPONSE.CREATE_REPORT) {
+      window.alert('CREATE REPORT');
+    }
+
+    resolve({
+      userResponse: promptResult,
+      StudyInstanceUID,
+      SeriesInstanceUID,
+    });
+  });
+}
+
+function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
+  return new Promise(function(resolve, reject) {
+    const message = 'Track measurements for this series?';
+    const actions = [
+      { type: 'cancel', text: 'No', value: RESPONSE.CANCEL },
+      {
+        type: 'primary',
+        text: 'Yes',
+        value: RESPONSE.SET_STUDY_AND_SERIES,
+      },
+    ];
+    const onSubmit = result => {
+      UIViewportDialogService.hide();
+      resolve(result);
+    };
+
+    UIViewportDialogService.show({
+      viewportIndex,
+      type: 'info',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+    });
+  });
+}
+
+function _askSaveDiscardOrCancel(UIViewportDialogService, viewportIndex) {
+  return new Promise(function(resolve, reject) {
+    const message =
+      'Measurements cannot span across multiple studies. Do you want to save your tracked measurements?';
+    const actions = [
+      { type: 'cancel', text: 'Cancel', value: RESPONSE.CANCEL },
+      {
+        type: 'secondary',
+        text: 'No, discard previosuly tracked series & measurements',
+        value: RESPONSE.SET_STUDY_AND_SERIES,
+      },
+      {
+        type: 'primary',
+        text: 'Yes',
+        value: RESPONSE.CREATE_REPORT,
+      },
+    ];
+    const onSubmit = result => {
+      UIViewportDialogService.hide();
+      resolve(result);
+    };
+
+    UIViewportDialogService.show({
+      viewportIndex,
+      type: 'warning',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        UIViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      },
+    });
+  });
+}
+
+export default promptUser;

extensions/measurement-tracking/src/getViewportModule.js

@@ -12,8 +12,19 @@ const OHIFCornerstoneViewport = props => {
   );
 };
 
-function getViewportModule({ commandsManager }) {
-  return [{ name: 'cornerstone-tracked', component: OHIFCornerstoneViewport }];
+function getViewportModule({ servicesManager }) {
+  const ExtendedOHIFCornerstoneSRViewport = props => {
+    const { ToolBarService } = servicesManager.services;
+
+    return (
+      <OHIFCornerstoneViewport
+        ToolBarService={ToolBarService}
+        {...props}
+      />
+    );
+  };
+
+  return [{ name: 'cornerstone-tracked', component: ExtendedOHIFCornerstoneSRViewport }];
 }
 
 export default getViewportModule;

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js

@@ -24,7 +24,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     measurementChangeTimestamp,
     200
   );
-  const { MeasurementService } = servicesManager.services;
+  const { MeasurementService, DisplaySetService } = servicesManager.services;
   const [
     trackedMeasurements,
     sendTrackedMeasurementsEvent,
@@ -105,7 +105,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
 
   const activeMeasurementItem = 0;
 
-  const onExportClick = () => {
+  const exportReport = () => {
     const measurements = MeasurementService.getMeasurements();
     const trackedMeasurements = measurements.filter(
       m =>
@@ -117,7 +117,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     DICOMSR.downloadReport(trackedMeasurements, dataSource);
   };
 
-  const onCreateReportClick = () => {
+  const createReport = () => {
     const measurements = MeasurementService.getMeasurements();
     const trackedMeasurements = measurements.filter(
       m =>
@@ -125,13 +125,18 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
         trackedSeries.includes(m.referenceSeriesUID)
     );
 
-
     const dataSources = extensionManager.getDataSources();
     // TODO -> Eventually deal with multiple dataSources.
     // Would need some way of saying which one is the "push" dataSource
     const dataSource = dataSources[0];
 
-    DICOMSR.storeMeasurements(trackedMeasurements, dataSource);
+    DICOMSR.storeMeasurements(
+      trackedMeasurements,
+      dataSource,
+      naturalizedReport => {
+        DisplaySetService.makeDisplaySets([naturalizedReport]);
+      }
+    );
   };
 
   return (
@@ -154,8 +159,8 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
       </div>
       <div className="flex justify-center p-4">
         <ActionButtons
-          onExportClick={onExportClick}
-          onCreateReportClick={onCreateReportClick}
+          onExportClick={exportReport}
+          onCreateReportClick={createReport}
         />
       </div>
     </>

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx

@@ -1,8 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { utils } from '@ohif/core';
 import { StudyBrowser, useImageViewer, useViewportGrid } from '@ohif/ui';
 import { useTrackedMeasurements } from '../../getContextModule';
 
+const { formatDate } = utils;
+
 /**
  *
  * @param {*} param0
@@ -68,7 +71,7 @@ function PanelStudyBrowserTracking({
       const actuallyMappedStudies = mappedStudies.map(qidoStudy => {
         return {
           studyInstanceUid: qidoStudy.StudyInstanceUID,
-          date: qidoStudy.StudyDate,
+          date: formatDate(qidoStudy.StudyDate),
           description: qidoStudy.StudyDescription,
           modalities: qidoStudy.ModalitiesInStudy,
           numInstances: qidoStudy.NumInstances,
@@ -198,10 +201,10 @@ function PanelStudyBrowserTracking({
     );
     const updatedExpandedStudyInstanceUIDs = shouldCollapseStudy
       ? [
-        ...expandedStudyInstanceUIDs.filter(
-          stdyUid => stdyUid !== StudyInstanceUID
-        ),
-      ]
+          ...expandedStudyInstanceUIDs.filter(
+            stdyUid => stdyUid !== StudyInstanceUID
+          ),
+        ]
       : [...expandedStudyInstanceUIDs, StudyInstanceUID];
 
     setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
@@ -288,8 +291,11 @@ function _mapDisplaySets(
     const firstViewportIndexWithMatchingDisplaySetUid = viewports.findIndex(
       vp => vp.displaySetInstanceUID === ds.displaySetInstanceUID
     );
+
     const viewportIdentificator =
-      _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid] || '';
+      viewports.length > 1
+        ? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
+        : '';
 
     const array =
       componentType === 'thumbnailTracked'

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
 import CornerstoneViewport from 'react-cornerstone-viewport';
-import OHIF, { DicomMetadataStore } from '@ohif/core';
+import OHIF, { DicomMetadataStore, utils } from '@ohif/core';
 import {
   Notification,
   ViewportActionBar,
@@ -12,6 +12,10 @@ import {
 } from '@ohif/ui';
 import { useTrackedMeasurements } from './../getContextModule';
 
+import ViewportOverlay from './ViewportOverlay';
+
+const { formatDate } = utils;
+
 // TODO -> Get this list from the list of tracked measurements.
 // TODO -> We can now get a list of tool names from the measurement service.
 // Use the toolnames to check which tools we have instead, using the
@@ -40,6 +44,7 @@ function TrackedCornerstoneViewport({
   dataSource,
   displaySet,
   viewportIndex,
+  ToolBarService,
 }) {
   const [trackedMeasurements] = useTrackedMeasurements();
   const [{ activeViewportIndex, viewports }] = useViewportGrid();
@@ -234,16 +239,21 @@ function TrackedCornerstoneViewport({
     setIsTracked(!isTracked);
   }
 
+  const label =
+    viewports.length > 1
+      ? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
+      : '';
+
   return (
     <>
       <ViewportActionBar
         onSeriesChange={direction => alert(`Series ${direction}`)}
         showNavArrows={viewportIndex === activeViewportIndex}
         studyData={{
-          label: _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid],
+          label,
           isTracked: trackedSeries.includes(SeriesInstanceUID),
           isLocked: false,
-          studyDate: SeriesDate, // TODO: This is series date. Is that ok?
+          studyDate: formatDate(SeriesDate), // TODO: This is series date. Is that ok?
           currentSeries: SeriesNumber,
           seriesDescription: SeriesDescription,
           modality: Modality,
@@ -254,7 +264,7 @@ function TrackedCornerstoneViewport({
             patientSex: PatientSex || '',
             patientAge: PatientAge || '',
             MRN: PatientID || '',
-            thickness: `${SliceThickness}mm`,
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
             spacing:
               PixelSpacing && PixelSpacing.length
                 ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
@@ -277,7 +287,15 @@ function TrackedCornerstoneViewport({
           isStackPrefetchEnabled={true} // todo
           isPlaying={false}
           frameRate={24}
-          isOverlayVisible={false}
+          isOverlayVisible={true}
+          viewportOverlayComponent={props => {
+            return (
+              <ViewportOverlay
+                {...props}
+                activeTools={ToolBarService.getActiveTools()}
+              />
+            );
+          }}
         />
         <div className="absolute w-full">
           {viewportDialogState.viewportIndex === viewportIndex && (
@@ -286,6 +304,7 @@ function TrackedCornerstoneViewport({
               type={viewportDialogState.type}
               actions={viewportDialogState.actions}
               onSubmit={viewportDialogState.onSubmit}
+              onOutsideClick={viewportDialogState.onOutsideClick}
             />
           )}
         </div>

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

@@ -0,0 +1,81 @@
+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');
+
+  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="font-thin ml-1 mr-2">{windowWidth.toFixed(0)}</span>
+            <span className="mr-1">L:</span>
+            <span className="font-thin ml-1">{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}/${stackSize}`}
+            </span>
+          </div>
+        )}
+      </div>
+      <div className={classnames(overlay, bottomRight)}>
+      </div>
+      <div className={classnames(overlay, bottomLeft)}>
+      </div>
+    </div>
+  );
+};
+
+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;