Merge branch 'feat/v2-main' of https://github.com/OHIF/Viewers into fix/OHIF-37-thumbnailDoubleClick

extensions/default/src/ActionButtons.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, ButtonGroup, Icon, IconButton } from '@ohif/ui';
-
-function ActionButtons() {
-  return (
-    <React.Fragment>
-      <ButtonGroup onClick={() => alert('Export')}>
-        <Button
-          className="px-2 py-2 text-base text-white bg-black border-primary-main"
-          size="initial"
-          color="inherit"
-        >
-          Export
-        </Button>
-        <IconButton
-          className="px-2 text-white bg-black border-primary-main"
-          color="inherit"
-          size="initial"
-        >
-          <Icon name="arrow-down" />
-        </IconButton>
-      </ButtonGroup>
-      <Button
-        className="px-2 py-2 ml-2 text-base text-white bg-black border border-primary-main"
-        variant="outlined"
-        size="initial"
-        color="inherit"
-        onClick={() => alert('Create Report')}
-      >
-        Create Report
-      </Button>
-    </React.Fragment>
-  );
-}
-
-export default ActionButtons;

extensions/default/src/DicomWebDataSource/index.js

@@ -10,7 +10,10 @@ import { DicomMetadataStore, IWebApiDataSource, utils } from '@ohif/core';
 
 import getImageId from './utils/getImageId';
 import * as dcmjs from 'dcmjs';
-import { retrieveStudyMetadata } from './retrieveStudyMetadata.js';
+import {
+  retrieveStudyMetadata,
+  deleteStudyMetadataPromise,
+} from './retrieveStudyMetadata.js';
 
 const { DicomMetaDictionary, DicomDict } = dcmjs.data;
 
@@ -187,6 +190,7 @@ function createDicomWebApi(dicomWebConfig) {
         storeInstances(instances);
       });
     },
+    deleteStudyMetadataPromise,
     getImageIdsForDisplaySet(displaySet) {
       const images = displaySet.images;
       const imageIds = [];

extensions/default/src/PanelMeasurementTable.js

@@ -1,55 +1,170 @@
-import React from 'react';
-import { StudySummary, MeasurementTable } from '@ohif/ui';
-import ActionButtons from './ActionButtons.jsx';
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { MeasurementTable } from '@ohif/ui';
+import { DicomMetadataStore } from '@ohif/core';
+import debounce from './debounce.js';
 
 export default function PanelMeasurementTable({
   servicesManager,
-  commandsManager,
+  // commandsManager,
 }) {
   const { MeasurementService } = servicesManager.services;
+  const [displayMeasurements, setDisplayMeasurements] = useState([]);
 
-  console.log('MeasurementTable rendering!!!!!!!!!!!!!');
+  useEffect(() => {
+    const debouncedSetDisplayMeasurements = debounce(
+      setDisplayMeasurements,
+      100
+    );
+    // ~~ Initial
+    setDisplayMeasurements(_getMappedMeasurements(MeasurementService));
 
-  const descriptionData = {
-    date: '07-Sep-2010',
-    modality: 'CT',
-    description: 'CHEST/ABD/PELVIS W CONTRAST',
-  };
+    // ~~ Subscription
+    const added = MeasurementService.EVENTS.MEASUREMENT_ADDED;
+    const updated = MeasurementService.EVENTS.MEASUREMENT_UPDATED;
+    const removed = MeasurementService.EVENTS.MEASUREMENT_REMOVED;
+    const subscriptions = [];
 
-  const activeMeasurementItem = 0;
+    [added, updated, removed].forEach(evt => {
+      subscriptions.push(
+        MeasurementService.subscribe(evt, () => {
+          debouncedSetDisplayMeasurements(
+            _getMappedMeasurements(MeasurementService)
+          );
+        }).unsubscribe
+      );
+    });
 
-  const measurementTableData = {
-    title: 'Measurements',
-    amount: 10,
-    data: new Array(10).fill({}).map((el, i) => ({
-      id: i + 1,
-      label: 'Label short description',
-      displayText: '24.0 x 24.0 mm (S:4, I:22)',
-      isActive: activeMeasurementItem === i + 1,
-    })),
-    onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)),
-    onEdit: id => alert(`Edit: ${id}`),
-  };
+    return () => {
+      subscriptions.forEach(unsub => {
+        unsub();
+      });
+    };
+  }, [MeasurementService]);
+
+  // const activeMeasurementItem = 0;
 
   return (
     <>
       <div className="overflow-x-hidden overflow-y-auto invisible-scrollbar">
-        <StudySummary
-          date={descriptionData.date}
-          modality={descriptionData.modality}
-          description={descriptionData.description}
-        />
         <MeasurementTable
           title="Measurements"
-          amount={measurementTableData.data.length}
-          data={measurementTableData.data}
+          amount={displayMeasurements.length}
+          data={displayMeasurements}
           onClick={() => {}}
           onEdit={id => alert(`Edit: ${id}`)}
         />
       </div>
-      <div className="flex justify-center p-4">
-        <ActionButtons />
-      </div>
     </>
   );
 }
+
+PanelMeasurementTable.propTypes = {
+  servicesManager: PropTypes.shape({
+    services: PropTypes.shape({
+      MeasurementService: PropTypes.shape({
+        getMeasurements: PropTypes.func.isRequired,
+        subscribe: PropTypes.func.isRequired,
+        EVENTS: PropTypes.object.isRequired,
+        VALUE_TYPES: PropTypes.object.isRequired,
+      }).isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+function _getMappedMeasurements(MeasurementService) {
+  const measurements = MeasurementService.getMeasurements();
+  const mappedMeasurements = measurements.map((m, index) =>
+    _mapMeasurementToDisplay(m, index, MeasurementService.VALUE_TYPES)
+  );
+
+  return mappedMeasurements;
+}
+
+function _mapMeasurementToDisplay(measurement, index, types) {
+  const {
+    id,
+    label,
+    description,
+    // Reference IDs
+    referenceStudyUID,
+    referenceSeriesUID,
+    SOPInstanceUID,
+  } = measurement;
+  const instance = DicomMetadataStore.getInstance(
+    referenceStudyUID,
+    referenceSeriesUID,
+    SOPInstanceUID
+  );
+  const { PixelSpacing, SeriesNumber, InstanceNumber } = instance;
+
+  return {
+    id: index + 1,
+    label: '(empty)', // 'Label short description',
+    displayText:
+      _getDisplayText(
+        measurement,
+        PixelSpacing,
+        SeriesNumber,
+        InstanceNumber,
+        types
+      ) || [],
+    // TODO: handle one layer down
+    isActive: false, // activeMeasurementItem === i + 1,
+  };
+}
+
+function _getDisplayText(
+  measurement,
+  pixelSpacing,
+  seriesNumber,
+  instanceNumber,
+  types
+) {
+  const { type, points } = measurement;
+  const hasPixelSpacing =
+    pixelSpacing !== undefined &&
+    Array.isArray(pixelSpacing) &&
+    pixelSpacing.length === 2;
+  const [rowPixelSpacing, colPixelSpacing] = hasPixelSpacing
+    ? pixelSpacing
+    : [1, 1];
+  const unit = hasPixelSpacing ? 'mm' : 'px';
+
+  switch (type) {
+    case types.POLYLINE: {
+      const { length } = measurement;
+      const roundedLength = _round(length, 1);
+
+      return [
+        `${roundedLength} ${unit} (S:${seriesNumber}, I:${instanceNumber})`,
+      ];
+    }
+    case types.BIDIRECTIONAL: {
+      const { shortestDiameter, longestDiameter } = measurement;
+      const roundedShortestDiameter = _round(shortestDiameter, 1);
+      const roundedLongestDiameter = _round(longestDiameter, 1);
+
+      return [
+        `l: ${roundedLongestDiameter} ${unit} (S:${seriesNumber}, I:${instanceNumber})`,
+        `s: ${roundedShortestDiameter} ${unit}`,
+      ];
+    }
+    case types.ELLIPSE: {
+      const { area } = measurement;
+      const roundedArea = _round(area, 1);
+
+      return [
+        `${roundedArea} ${unit}2 (S:${seriesNumber}, I:${instanceNumber})`,
+      ];
+    }
+    case types.POINT: {
+      const { text } = measurement;
+      return [`${text} (S:${seriesNumber}, I:${instanceNumber})`];
+    }
+  }
+}
+
+function _round(value, decimals) {
+  return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
+}

extensions/default/src/Panels/PanelStudyBrowser.jsx

@@ -28,6 +28,8 @@ function PanelStudyBrowser({
   const [displaySets, setDisplaySets] = useState([]);
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
 
+  console.log(DisplaySetService);
+
   // ~~ studyDisplayList
   useEffect(() => {
     // Fetch all studies for the patient in each primary study
@@ -98,8 +100,9 @@ function PanelStudyBrowser({
     // DISPLAY_SETS_ADDED returns an array of DisplaySets that were added
     const SubscriptionDisplaySetsAdded = DisplaySetService.subscribe(
       DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
-      newDisplaySets => {
-        newDisplaySets.forEach(async dSet => {
+      data => {
+        const { displaySetsAdded } = data;
+        displaySetsAdded.forEach(async dSet => {
           const newImageSrcEntry = {};
           const displaySet = DisplaySetService.getDisplaySetByUID(
             dSet.displaySetInstanceUID

extensions/default/src/debounce.js

@@ -0,0 +1,21 @@
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
+function debounce(func, wait, immediate) {
+  var timeout;
+  return function() {
+    var context = this,
+      args = arguments;
+    var later = function() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
+
+export default debounce;

extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js

@@ -250,12 +250,19 @@ function OHIFCornerstoneSRViewport({
           seriesDescription: SeriesDescription,
           modality: Modality,
           patientInformation: {
-            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
+            patientName: PatientName
+              ? OHIF.utils.formatPN(PatientName.Alphabetic)
+              : '',
             patientSex: PatientSex || '',
             patientAge: PatientAge || '',
             MRN: PatientID || '',
-            thickness: `${SliceThickness}mm`,
-            spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
+            spacing:
+              PixelSpacing && PixelSpacing.length
+                ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
+                    2
+                  )}mm`
+                : '',
             scanner: ManufacturerModelName || '',
           },
         }}

extensions/dicom-sr/src/getSopClassHandlerModule.js

@@ -103,10 +103,11 @@ function _getDisplaySetsFromSeries(
   // Subscribe to new displaySets as the source may come in after.
   DisplaySetService.subscribe(
     DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
-    newDisplaySets => {
+    data => {
+      const { displaySetsAdded } = data;
       // If there are still some measurements that have not yet been loaded into cornerstone,
       // See if we can load them onto any of the new displaySets.
-      newDisplaySets.forEach(newDisplaySet => {
+      displaySetsAdded.forEach(newDisplaySet => {
         _checkIfCanAddMeasurementsToDisplaySet(
           displaySet,
           newDisplaySet,

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',
@@ -24,11 +32,11 @@ const machineConfiguration = {
           {
             target: 'tracking',
             actions: ['setTrackedStudyAndSeries'],
-            cond: 'promptAccepted',
+            cond: 'shouldSetStudyAndSeries',
           },
           {
             target: 'off',
-            cond: 'promptDeclined',
+            cond: 'shouldKillMachine',
           },
           {
             target: 'idle',
@@ -63,15 +71,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',
           },
@@ -81,14 +95,14 @@ const machineConfiguration = {
         },
       },
     },
-    promptTrackNewSeries: {
+    promptTrackNewStudy: {
       invoke: {
-        src: 'promptTrackNewSeries',
+        src: 'promptTrackNewStudy',
         onDone: [
           {
             target: 'tracking',
-            actions: ['addTrackedSeries'],
-            cond: 'promptAccepted',
+            actions: ['setTrackedStudyAndSeries'],
+            cond: 'shouldSetStudyAndSeries',
           },
           {
             target: 'tracking',
@@ -135,9 +149,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) =>
@@ -149,13 +166,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

@@ -5,9 +5,6 @@ import { DicomMetadataStore, DICOMSR } from '@ohif/core';
 import { useDebounce } from '@hooks';
 import ActionButtons from './ActionButtons';
 import { useTrackedMeasurements } from '../../getContextModule';
-import cornerstoneTools from 'cornerstone-tools';
-import cornerstone from 'cornerstone-core';
-import dcmjs from 'dcmjs';
 
 const DISPLAY_STUDY_SUMMARY_INITIAL_VALUE = {
   key: undefined, //
@@ -24,7 +21,12 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     measurementChangeTimestamp,
     200
   );
-  const { MeasurementService } = servicesManager.services;
+  const {
+    MeasurementService,
+    UINotificationService,
+    UIDialogService,
+    DisplaySetService,
+  } = servicesManager.services;
   const [
     trackedMeasurements,
     sendTrackedMeasurementsEvent,
@@ -34,9 +36,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     DISPLAY_STUDY_SUMMARY_INITIAL_VALUE
   );
   const [displayMeasurements, setDisplayMeasurements] = useState([]);
-  // TODO: measurements subscribtion
 
-  // Initial?
   useEffect(() => {
     const measurements = MeasurementService.getMeasurements();
     const filteredMeasurements = measurements.filter(
@@ -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,21 +117,50 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     DICOMSR.downloadReport(trackedMeasurements, dataSource);
   };
 
-  const onCreateReportClick = () => {
-    const measurements = MeasurementService.getMeasurements();
-    const trackedMeasurements = measurements.filter(
-      m =>
-        trackedStudy === m.referenceStudyUID &&
-        trackedSeries.includes(m.referenceSeriesUID)
-    );
+  const createReport = async () => {
+    const loadingDialogId = UIDialogService.create({
+      showOverlay: true,
+      isDraggable: false,
+      centralize: true,
+      // TODO: Create a loading indicator component + zeplin design?
+      content: () => <div className="text-primary-active">Loading...</div>,
+    });
 
+    try {
+      const measurements = MeasurementService.getMeasurements();
+      const trackedMeasurements = measurements.filter(
+        m =>
+          trackedStudy === m.referenceStudyUID &&
+          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];
+      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);
+      const naturalizedReport = await DICOMSR.storeMeasurements(
+        trackedMeasurements,
+        dataSource
+      );
+
+      DisplaySetService.makeDisplaySets([naturalizedReport], {
+        madeInClient: true,
+      });
+      UINotificationService.show({
+        title: 'STOW SR',
+        message: 'Measurements saved successfully',
+        type: 'success',
+      });
+    } catch (error) {
+      UINotificationService.show({
+        title: 'STOW SR',
+        message: error.message || 'Failed to store measurements',
+        type: 'error',
+      });
+    } finally {
+      UIDialogService.dismiss({ id: loadingDialogId });
+    }
   };
 
   return (
@@ -154,15 +183,24 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
       </div>
       <div className="flex justify-center p-4">
         <ActionButtons
-          onExportClick={onExportClick}
-          onCreateReportClick={onCreateReportClick}
+          onExportClick={exportReport}
+          onCreateReportClick={createReport}
         />
       </div>
     </>
   );
 }
 
-PanelMeasurementTableTracking.propTypes = {};
+PanelMeasurementTableTracking.propTypes = {
+  servicesManager: PropTypes.shape({
+    services: PropTypes.shape({
+      MeasurementService: PropTypes.shape({
+        getMeasurements: PropTypes.func.isRequired,
+        VALUE_TYPES: PropTypes.object.isRequired,
+      }).isRequired,
+    }).isRequired,
+  }).isRequired,
+};
 
 // TODO: This could be a MeasurementService mapper
 function _mapMeasurementToDisplay(measurement, index, types) {
@@ -182,9 +220,6 @@ function _mapMeasurementToDisplay(measurement, index, types) {
   );
   const { PixelSpacing, SeriesNumber, InstanceNumber } = instance;
 
-  console.log('mapping....', measurement);
-  console.log(instance);
-
   return {
     id: index + 1,
     label: '(empty)', // 'Label short description',
@@ -213,15 +248,7 @@ function _getDisplayText(
   instanceNumber,
   types
 ) {
-  // TODO: determination of shape influences text
-  // Length:  'xx.x unit (S:x, I:x)'
-  // Rectangle: 'xx.x x xx.x unit (S:x, I:x)',
-  // Ellipse?
-  // Bidirectional?
-  // Freehand?
-
   const { type, points } = measurement;
-
   const hasPixelSpacing =
     pixelSpacing !== undefined &&
     Array.isArray(pixelSpacing) &&
@@ -232,18 +259,16 @@ function _getDisplayText(
   const unit = hasPixelSpacing ? 'mm' : 'px';
 
   switch (type) {
-    case types.POLYLINE:
+    case types.POLYLINE: {
       const { length } = measurement;
-
       const roundedLength = _round(length, 1);
 
       return [
         `${roundedLength} ${unit} (S:${seriesNumber}, I:${instanceNumber})`,
       ];
-
-    case types.BIDIRECTIONAL:
+    }
+    case types.BIDIRECTIONAL: {
       const { shortestDiameter, longestDiameter } = measurement;
-
       const roundedShortestDiameter = _round(shortestDiameter, 1);
       const roundedLongestDiameter = _round(longestDiameter, 1);
 
@@ -251,16 +276,19 @@ function _getDisplayText(
         `l: ${roundedLongestDiameter} ${unit} (S:${seriesNumber}, I:${instanceNumber})`,
         `s: ${roundedShortestDiameter} ${unit}`,
       ];
-    case types.ELLIPSE:
+    }
+    case types.ELLIPSE: {
       const { area } = measurement;
-
       const roundedArea = _round(area, 1);
+
       return [
         `${roundedArea} ${unit}2 (S:${seriesNumber}, I:${instanceNumber})`,
       ];
-    case types.POINT:
+    }
+    case types.POINT: {
       const { text } = measurement;
       return [`${text} (S:${seriesNumber}, I:${instanceNumber})`];
+    }
   }
 }
 

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

@@ -37,6 +37,7 @@ function PanelStudyBrowserTracking({
   const [studyDisplayList, setStudyDisplayList] = useState([]);
   const [displaySets, setDisplaySets] = useState([]);
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
+  const [jumpToDisplaySet, setJumpToDisplaySet] = useState(null);
 
   const onClickThumbnailHandler = displaySetInstanceUID => {
     viewportGridService.setDisplaysetForViewport({
@@ -149,18 +150,26 @@ function PanelStudyBrowserTracking({
     // DISPLAY_SETS_ADDED returns an array of DisplaySets that were added
     const SubscriptionDisplaySetsAdded = DisplaySetService.subscribe(
       DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
-      newDisplaySets => {
-        newDisplaySets.forEach(async dSet => {
+      data => {
+        const { displaySetsAdded, options } = data;
+        displaySetsAdded.forEach(async dSet => {
+          const displaySetInstanceUID = dSet.displaySetInstanceUID;
+
           const newImageSrcEntry = {};
           const displaySet = DisplaySetService.getDisplaySetByUID(
-            dSet.displaySetInstanceUID
+            displaySetInstanceUID
           );
+
+          if (options.madeInClient) {
+            setJumpToDisplaySet(displaySetInstanceUID);
+          }
+
           const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
           const imageId = imageIds[Math.floor(imageIds.length / 2)];
           // TODO: Is it okay that imageIds are not returned here for SR displaysets?
           if (imageId) {
             // When the image arrives, render it and store the result in the thumbnailImgSrcMap
-            newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(
+            newImageSrcEntry[displaySetInstanceUID] = await getImageSrc(
               imageId
             );
             setThumbnailImageSrcMap(prevState => {
@@ -227,6 +236,51 @@ function PanelStudyBrowserTracking({
     }
   }
 
+  useEffect(() => {
+    if (jumpToDisplaySet) {
+      // Get element by displaySetInstanceUID
+      const displaySetInstanceUID = jumpToDisplaySet;
+      const element = document.getElementById(
+        `thumbnail-${displaySetInstanceUID}`
+      );
+
+      if (element && typeof element.scrollIntoView === 'function') {
+        // TODO: Any way to support IE here?
+        element.scrollIntoView({ behavior: 'smooth' });
+
+        setJumpToDisplaySet(null);
+      }
+    }
+  }, [jumpToDisplaySet, expandedStudyInstanceUIDs, activeTabName]);
+
+  useEffect(() => {
+    if (!jumpToDisplaySet) {
+      return;
+    }
+
+    const displaySetInstanceUID = jumpToDisplaySet;
+    // Set the activeTabName and expand the study
+    const thumbnailLocation = _findTabAndStudyOfDisplaySet(
+      displaySetInstanceUID,
+      tabs
+    );
+    if (!thumbnailLocation) {
+      console.warn('jumpToThumbnail: displaySet thumbnail not found.');
+
+      return;
+    }
+    const { tabName, StudyInstanceUID } = thumbnailLocation;
+    setActiveTabName(tabName);
+    const studyExpanded = expandedStudyInstanceUIDs.includes(StudyInstanceUID);
+    if (!studyExpanded) {
+      const updatedExpandedStudyInstanceUIDs = [
+        ...expandedStudyInstanceUIDs,
+        StudyInstanceUID,
+      ];
+      setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
+    }
+  }, [jumpToDisplaySet]);
+
   return (
     <StudyBrowser
       tabs={tabs}
@@ -306,8 +360,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'
@@ -413,3 +470,24 @@ function _createStudyBrowserTabs(
 
   return tabs;
 }
+
+function _findTabAndStudyOfDisplaySet(displaySetInstanceUID, tabs) {
+  for (let t = 0; t < tabs.length; t++) {
+    const { studies } = tabs[t];
+
+    for (let s = 0; s < studies.length; s++) {
+      const { displaySets } = studies[s];
+
+      for (let d = 0; d < displaySets.length; d++) {
+        const displaySet = displaySets[d];
+
+        if (displaySet.displaySetInstanceUID === displaySetInstanceUID) {
+          return {
+            tabName: tabs[t].name,
+            StudyInstanceUID: studies[s].studyInstanceUid,
+          };
+        }
+      }
+    }
+  }
+}

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

@@ -12,6 +12,8 @@ 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.
@@ -38,6 +40,7 @@ function TrackedCornerstoneViewport({
   dataSource,
   displaySet,
   viewportIndex,
+  ToolBarService
 }) {
   const [trackedMeasurements] = useTrackedMeasurements();
   const [{ activeViewportIndex, viewports }] = useViewportGrid();
@@ -225,20 +228,25 @@ function TrackedCornerstoneViewport({
     PatientAge,
     SliceThickness,
     PixelSpacing,
-    ManufacturerModelName
+    ManufacturerModelName,
   } = displaySet.images[0];
 
   if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
     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: formatDate(SeriesDate), // TODO: This is series date. Is that ok?
@@ -246,12 +254,19 @@ function TrackedCornerstoneViewport({
           seriesDescription: SeriesDescription,
           modality: Modality,
           patientInformation: {
-            patientName: PatientName ? OHIF.utils.formatPN(PatientName.Alphabetic) : '',
+            patientName: PatientName
+              ? OHIF.utils.formatPN(PatientName.Alphabetic)
+              : '',
             patientSex: PatientSex || '',
             patientAge: PatientAge || '',
             MRN: PatientID || '',
-            thickness: `${SliceThickness}mm`,
-            spacing: PixelSpacing && PixelSpacing.length ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(2)}mm` : '',
+            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
+            spacing:
+              PixelSpacing && PixelSpacing.length
+                ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
+                    2
+                  )}mm`
+                : '',
             scanner: ManufacturerModelName || '',
           },
         }}
@@ -268,7 +283,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 && (
@@ -277,6 +300,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;