Merge remote-tracking branch 'upstream/v3-stable' into v3-stable

.docker/Nginx-Orthanc/docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.5'
 
 services:
   orthanc:
-    image: jodogne/orthanc-plugins:1.5.6
+    image: jodogne/orthanc-plugins:1.5.7
     hostname: orthanc
     volumes:
       # Config
@@ -13,3 +13,11 @@ services:
       - '4242:4242' # DICOM
       - '8042:8042' # Web
     restart: unless-stopped
+  nginx:
+    image: nginx:latest
+    volumes:
+      - ./config/nginx.conf:/etc/nginx/nginx.conf
+    ports:
+      - '80:80' #ngnix proxy
+    depends_on:
+      - orthanc

.webpack/webpack.base.js

@@ -39,7 +39,7 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
 
   const config = {
     mode: isProdBuild ? 'production' : 'development',
-    devtool: isProdBuild ? 'source-map' : 'eval-source-map',
+    devtool: isProdBuild ? 'source-map' : 'cheap-module-source-map',
     entry: {
       app: `${SRC_DIR}/index.js`,
     },

README.md

@@ -227,7 +227,7 @@ These projects comprise the
 
 ### Extensions
 
-This is a list of Extensions maintained by the OHIF Core team. It's possible to
+This is a list of Extensions maintained by the OHIF Core team. It is possible to
 customize and configure these extensions, and you can even create your own. You
 can [read more about extensions here][ohif-extensions].
 
@@ -271,6 +271,8 @@ Cancer Institute, Informatics Technology for Cancer Research (ITCR) program,
 under a
 [grant to Dr. Gordon Harris at Massachusetts General Hospital (U24 CA199460)](https://projectreporter.nih.gov/project_info_description.cfm?aid=8971104).
 
+This project is tested with BrowserStack. Thank you for supporting open source
+
 ## License
 
 MIT © [OHIF](https://github.com/OHIF)

extensions/cornerstone-dicom-seg/package.json

@@ -36,13 +36,13 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^10.11.0",
-    "react-router": "^6.3.0",
+    "react-router": "^6.8.1",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.8.1",
     "webpack": "^5.50.0",
     "webpack-merge": "^5.7.3"
   },
   "dependencies": {
-    "@babel/runtime": "7.7.6",
+    "@babel/runtime": "^7.20.13",
     "react-color": "^2.19.3"
   },
   "devDependencies": {
@@ -59,7 +59,7 @@
     "babel-eslint": "^8.0.3",
     "babel-loader": "^8.0.0-beta.4",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^10.2.0",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "dotenv": "^14.1.0",
     "eslint": "^5.0.1",

extensions/cornerstone-dicom-seg/src/getSopClassHandlerModule.js

@@ -71,8 +71,8 @@ function _getDisplaySetsFromSeries(
   displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;
 
   displaySet.getReferenceDisplaySet = () => {
-    const { DisplaySetService } = servicesManager.services;
+    const { displaySetService } = servicesManager.services;
-    const referencedDisplaySets = DisplaySetService.getDisplaySetsForSeries(
+    const referencedDisplaySets = displaySetService.getDisplaySetsForSeries(
       displaySet.referencedSeriesInstanceUID
     );
 
@@ -113,9 +113,9 @@ function _load(segDisplaySet, servicesManager, extensionManager, headers) {
   // We don't want to fire multiple loads, so we'll wait for the first to finish
   // and also return the same promise to any other callers.
   loadPromises[SOPInstanceUID] = new Promise(async (resolve, reject) => {
-    const { SegmentationService } = servicesManager.services;
+    const { segmentationService } = servicesManager.services;
 
-    if (_segmentationExistsInCache(segDisplaySet, SegmentationService)) {
+    if (_segmentationExistsInCache(segDisplaySet, segmentationService)) {
       return;
     }
 
@@ -133,7 +133,7 @@ function _load(segDisplaySet, servicesManager, extensionManager, headers) {
     }
 
     const suppressEvents = true;
-    SegmentationService.createSegmentationForSEGDisplaySet(
+    segmentationService.createSegmentationForSEGDisplaySet(
       segDisplaySet,
       null,
       suppressEvents
@@ -175,10 +175,10 @@ async function _loadSegments(extensionManager, segDisplaySet, headers) {
   return segments;
 }
 
-function _segmentationExistsInCache(segDisplaySet, SegmentationService) {
+function _segmentationExistsInCache(segDisplaySet, segmentationService) {
   // This should be abstracted with the CornerstoneCacheService
   const labelmapVolumeId = segDisplaySet.displaySetInstanceUID;
-  const segVolume = SegmentationService.getLabelmapVolume(labelmapVolumeId);
+  const segVolume = segmentationService.getLabelmapVolume(labelmapVolumeId);
 
   return segVolume !== undefined;
 }

extensions/cornerstone-dicom-seg/src/index.tsx

@@ -1,6 +1,8 @@
 import { id } from './id';
 import React from 'react';
 
+import { Types } from '@ohif/core';
+
 import getSopClassHandlerModule from './getSopClassHandlerModule';
 import PanelSegmentation from './panels/PanelSegmentation';
 
@@ -39,13 +41,13 @@ const extension = {
     commandsManager,
     configuration = {},
   }) => {},
-  /**
+ /**
    * PanelModule should provide a list of panels that will be available in OHIF
    * for Modes to consume and render. Each panel is defined by a {name,
    * iconName, iconLabel, label, component} object. Example of a panel module
    * is the StudyBrowserPanel that is provided by the default extension in OHIF.
    */
-  getPanelModule: ({ servicesManager, commandsManager, extensionManager }) => {
+  getPanelModule: ({ servicesManager, commandsManager, extensionManager }): Types.Panel[] => {
     const wrappedPanelSegmentation = () => {
       return (
         <PanelSegmentation

extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx

@@ -4,18 +4,17 @@ import { SegmentationGroupTable } from '@ohif/ui';
 import callInputDialog from './callInputDialog';
 
 import { useTranslation } from 'react-i18next';
-import callColorPickerDialog from './callColorPickerDialog';
 
 export default function PanelSegmentation({
   servicesManager,
   commandsManager,
 }) {
   const {
-    SegmentationService,
+    segmentationService,
-    UIDialogService,
+    uiDialogService,
-    ViewportGridService,
+    viewportGridService,
-    ToolGroupService,
+    toolGroupService,
-    CornerstoneViewportService,
+    cornerstoneViewportService,
   } = servicesManager.services;
 
   const { t } = useTranslation('PanelSegmentation');
@@ -23,10 +22,10 @@ export default function PanelSegmentation({
   const [
     initialSegmentationConfigurations,
     setInitialSegmentationConfigurations,
-  ] = useState(SegmentationService.getConfiguration());
+  ] = useState(segmentationService.getConfiguration());
 
   const [segmentations, setSegmentations] = useState(() =>
-    SegmentationService.getSegmentations()
+    segmentationService.getSegmentations()
   );
 
   const [isMinimized, setIsMinimized] = useState({});
@@ -54,14 +53,14 @@ export default function PanelSegmentation({
 
   useEffect(() => {
     // ~~ Subscription
-    const added = SegmentationService.EVENTS.SEGMENTATION_ADDED;
+    const added = segmentationService.EVENTS.SEGMENTATION_ADDED;
-    const updated = SegmentationService.EVENTS.SEGMENTATION_UPDATED;
+    const updated = segmentationService.EVENTS.SEGMENTATION_UPDATED;
-    const removed = SegmentationService.EVENTS.SEGMENTATION_REMOVED;
+    const removed = segmentationService.EVENTS.SEGMENTATION_REMOVED;
     const subscriptions = [];
 
     [added, updated, removed].forEach(evt => {
-      const { unsubscribe } = SegmentationService.subscribe(evt, () => {
+      const { unsubscribe } = segmentationService.subscribe(evt, () => {
-        const segmentations = SegmentationService.getSegmentations();
+        const segmentations = segmentationService.getSegmentations();
         setSegmentations(segmentations);
       });
       subscriptions.push(unsubscribe);
@@ -75,15 +74,15 @@ export default function PanelSegmentation({
   }, []);
 
   const onSegmentationClick = (segmentationId: string) => {
-    SegmentationService.setActiveSegmentationForToolGroup(segmentationId);
+    segmentationService.setActiveSegmentationForToolGroup(segmentationId);
   };
 
   const onSegmentationDelete = (segmentationId: string) => {
-    SegmentationService.remove(segmentationId);
+    segmentationService.remove(segmentationId);
   };
 
   const getToolGroupIds = segmentationId => {
-    const toolGroupIds = SegmentationService.getToolGroupIdsWithSegmentation(
+    const toolGroupIds = segmentationService.getToolGroupIdsWithSegmentation(
       segmentationId
     );
 
@@ -91,7 +90,7 @@ export default function PanelSegmentation({
   };
 
   const onSegmentClick = (segmentationId, segmentIndex) => {
-    SegmentationService.setActiveSegmentForSegmentation(
+    segmentationService.setActiveSegmentForSegmentation(
       segmentationId,
       segmentIndex
     );
@@ -100,11 +99,11 @@ export default function PanelSegmentation({
 
     toolGroupIds.forEach(toolGroupId => {
       // const toolGroupId =
-      SegmentationService.setActiveSegmentationForToolGroup(
+      segmentationService.setActiveSegmentationForToolGroup(
         segmentationId,
         toolGroupId
       );
-      SegmentationService.jumpToSegmentCenter(
+      segmentationService.jumpToSegmentCenter(
         segmentationId,
         segmentIndex,
         toolGroupId
@@ -113,17 +112,17 @@ export default function PanelSegmentation({
   };
 
   const onSegmentEdit = (segmentationId, segmentIndex) => {
-    const segmentation = SegmentationService.getSegmentation(segmentationId);
+    const segmentation = segmentationService.getSegmentation(segmentationId);
 
     const segment = segmentation.segments[segmentIndex];
     const { label } = segment;
 
-    callInputDialog(UIDialogService, label, (label, actionId) => {
+    callInputDialog(uiDialogService, label, (label, actionId) => {
       if (label === '') {
         return;
       }
 
-      SegmentationService.setSegmentLabelForSegmentation(
+      segmentationService.setSegmentLabelForSegmentation(
         segmentationId,
         segmentIndex,
         label
@@ -132,15 +131,15 @@ export default function PanelSegmentation({
   };
 
   const onSegmentationEdit = segmentationId => {
-    const segmentation = SegmentationService.getSegmentation(segmentationId);
+    const segmentation = segmentationService.getSegmentation(segmentationId);
     const { label } = segmentation;
 
-    callInputDialog(UIDialogService, label, (label, actionId) => {
+    callInputDialog(uiDialogService, label, (label, actionId) => {
       if (label === '') {
         return;
       }
 
-      SegmentationService.addOrUpdateSegmentation(
+      segmentationService.addOrUpdateSegmentation(
         {
           id: segmentationId,
           label,
@@ -157,7 +156,7 @@ export default function PanelSegmentation({
   };
 
   const onSegmentDelete = (segmentationId, segmentIndex) => {
-    // SegmentationService.removeSegmentFromSegmentation(
+    // segmentationService.removeSegmentFromSegmentation(
     //   segmentationId,
     //   segmentIndex
     // );
@@ -165,14 +164,14 @@ export default function PanelSegmentation({
   };
 
   const onToggleSegmentVisibility = (segmentationId, segmentIndex) => {
-    const segmentation = SegmentationService.getSegmentation(segmentationId);
+    const segmentation = segmentationService.getSegmentation(segmentationId);
     const segmentInfo = segmentation.segments[segmentIndex];
     const isVisible = !segmentInfo.isVisible;
     const toolGroupIds = getToolGroupIds(segmentationId);
 
     // Todo: right now we apply the visibility to all tool groups
     toolGroupIds.forEach(toolGroupId => {
-      SegmentationService.setSegmentVisibility(
+      segmentationService.setSegmentVisibility(
         segmentationId,
         segmentIndex,
         isVisible,
@@ -182,21 +181,21 @@ export default function PanelSegmentation({
   };
 
   const onToggleSegmentationVisibility = segmentationId => {
-    SegmentationService.toggleSegmentationVisibility(segmentationId);
+    segmentationService.toggleSegmentationVisibility(segmentationId);
   };
 
   const setSegmentationConfiguration = useCallback(
     (segmentationId, key, value) => {
-      SegmentationService.setConfiguration({
+      segmentationService.setConfiguration({
         segmentationId,
         [key]: value,
       });
     },
-    [SegmentationService]
+    [segmentationService]
   );
 
   return (
-    <div className="flex flex-col justify-between mt-1">
+    <div className="flex flex-col flex-auto min-h-0 justify-between mt-1">
       {/* show segmentation table */}
       {segmentations?.length ? (
         <SegmentationGroupTable
@@ -204,7 +203,7 @@ export default function PanelSegmentation({
           showAddSegmentation={false}
           segmentations={segmentations}
           isMinimized={isMinimized}
-          activeSegmentationId={selectedSegmentationId}
+          activeSegmentationId={selectedSegmentationId || ''}
           onSegmentationClick={onSegmentationClick}
           onSegmentationDelete={onSegmentationDelete}
           onSegmentationEdit={onSegmentationEdit}
@@ -280,7 +279,7 @@ PanelSegmentation.propTypes = {
   }),
   servicesManager: PropTypes.shape({
     services: PropTypes.shape({
-      SegmentationService: PropTypes.shape({
+      segmentationService: PropTypes.shape({
         getSegmentation: PropTypes.func.isRequired,
         getSegmentations: PropTypes.func.isRequired,
         toggleSegmentationVisibility: PropTypes.func.isRequired,

extensions/cornerstone-dicom-seg/src/panels/callInputDialog.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Input, Dialog } from '@ohif/ui';
 
-function callInputDialog(UIDialogService, label, callback) {
+function callInputDialog(uiDialogService, label, callback) {
   const dialogId = 'enter-segment-label';
 
   const onSubmitHandler = ({ action, value }) => {
@@ -13,11 +13,11 @@ function callInputDialog(UIDialogService, label, callback) {
         callback('', action.id);
         break;
     }
-    UIDialogService.dismiss({ id: dialogId });
+    uiDialogService.dismiss({ id: dialogId });
   };
 
-  if (UIDialogService) {
+  if (uiDialogService) {
-    UIDialogService.create({
+    uiDialogService.create({
       id: dialogId,
       centralize: true,
       isDraggable: false,
@@ -27,7 +27,7 @@ function callInputDialog(UIDialogService, label, callback) {
         title: 'Enter Segment Label',
         value: { label },
         noCloseButton: true,
-        onClose: () => UIDialogService.dismiss({ id: dialogId }),
+        onClose: () => uiDialogService.dismiss({ id: dialogId }),
         actions: [
           { id: 'cancel', text: 'Cancel', type: 'primary' },
           { id: 'save', text: 'Confirm', type: 'secondary' },

extensions/cornerstone-dicom-seg/src/utils/_hydrateSEG.ts

@@ -1,13 +1,12 @@
 async function _hydrateSEGDisplaySet({
   segDisplaySet,
   viewportIndex,
-  toolGroupId,
   servicesManager,
 }) {
   const {
-    SegmentationService,
+    segmentationService,
-    HangingProtocolService,
+    hangingProtocolService,
-    ViewportGridService,
+    viewportGridService,
   } = servicesManager.services;
 
   const displaySetInstanceUID = segDisplaySet.referencedDisplaySetInstanceUID;
@@ -17,22 +16,22 @@ async function _hydrateSEGDisplaySet({
   // We need the hydration to notify panels about the new segmentation added
   const suppressEvents = false;
 
-  segmentationId = await SegmentationService.createSegmentationForSEGDisplaySet(
+  segmentationId = await segmentationService.createSegmentationForSEGDisplaySet(
     segDisplaySet,
     segmentationId,
     suppressEvents
   );
 
-  SegmentationService.hydrateSegmentation(segDisplaySet.displaySetInstanceUID);
+  segmentationService.hydrateSegmentation(segDisplaySet.displaySetInstanceUID);
 
-  const { viewports } = ViewportGridService.getState();
+  const { viewports } = viewportGridService.getState();
 
-  const updatedViewports = HangingProtocolService.getViewportsRequireUpdate(
+  const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
     viewportIndex,
     displaySetInstanceUID
   );
 
-  ViewportGridService.setDisplaySetsForViewports(updatedViewports);
+  viewportGridService.setDisplaySetsForViewports(updatedViewports);
 
   // Todo: fix this after we have a better way for stack viewport segmentations
 
@@ -45,18 +44,16 @@ async function _hydrateSEGDisplaySet({
       return;
     }
 
-    const shouldDisplaySeg = SegmentationService.shouldRenderSegmentation(
+    const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(
       viewport.displaySetInstanceUIDs,
       segDisplaySet.displaySetInstanceUID
     );
 
     if (shouldDisplaySeg) {
-      ViewportGridService.setDisplaySetsForViewport({
+      viewportGridService.setDisplaySetsForViewport({
         viewportIndex: index,
         displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
         viewportOptions: {
-          viewportType: 'volume',
-          toolGroupId,
           initialImageOptions: {
             preset: 'middle',
           },

extensions/cornerstone-dicom-seg/src/utils/initSEGToolGroup.ts

@@ -1,5 +1,5 @@
 function createSEGToolGroupAndAddTools(
-  ToolGroupService,
+  toolGroupService,
   toolGroupId,
   extensionManager
 ) {
@@ -28,7 +28,7 @@ function createSEGToolGroupAndAddTools(
     enabled: [{ toolName: toolNames.SegmentationDisplay }],
   };
 
-  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools, {});
+  return toolGroupService.createToolGroupAndAddTools(toolGroupId, tools, {});
 }
 
 export default createSEGToolGroupAndAddTools;

extensions/cornerstone-dicom-seg/src/utils/promptHydrateSEG.ts

@@ -10,13 +10,12 @@ function promptHydrateSEG({
   servicesManager,
   segDisplaySet,
   viewportIndex,
-  toolGroupId = 'default',
 }) {
-  const { UIViewportDialogService } = servicesManager.services;
+  const { uiViewportDialogService } = servicesManager.services;
 
   return new Promise(async function(resolve, reject) {
     const promptResult = await _askHydrate(
-      UIViewportDialogService,
+      uiViewportDialogService,
       viewportIndex
     );
 
@@ -24,7 +23,6 @@ function promptHydrateSEG({
       const isHydrated = await hydrateSEGDisplaySet({
         segDisplaySet,
         viewportIndex,
-        toolGroupId,
         servicesManager,
       });
 
@@ -33,7 +31,7 @@ function promptHydrateSEG({
   });
 }
 
-function _askHydrate(UIViewportDialogService, viewportIndex) {
+function _askHydrate(uiViewportDialogService, viewportIndex) {
   return new Promise(function(resolve, reject) {
     const message = 'Do you want to open this Segmentation?';
     const actions = [
@@ -49,18 +47,18 @@ function _askHydrate(UIViewportDialogService, viewportIndex) {
       },
     ];
     const onSubmit = result => {
-      UIViewportDialogService.hide();
+      uiViewportDialogService.hide();
       resolve(result);
     };
 
-    UIViewportDialogService.show({
+    uiViewportDialogService.show({
       viewportIndex,
       type: 'info',
       message,
       actions,
       onSubmit,
       onOutsideClick: () => {
-        UIViewportDialogService.hide();
+        uiViewportDialogService.hide();
         resolve(RESPONSE.CANCEL);
       },
     });

extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx

@@ -1,19 +1,13 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import OHIF, { utils } from '@ohif/core';
 import {
-  Notification,
+  LoadingIndicatorProgress, Notification, useViewportDialog, useViewportGrid, ViewportActionBar
-  ViewportActionBar,
-  useViewportGrid,
-  useViewportDialog,
-  LoadingIndicatorProgress,
 } from '@ohif/ui';
-
-import { useTranslation } from 'react-i18next';
-
 import createSEGToolGroupAndAddTools from '../utils/initSEGToolGroup';
-import _hydrateSEGDisplaySet from '../utils/_hydrateSEG';
 import promptHydrateSEG from '../utils/promptHydrateSEG';
+import hydrateSEGDisplaySet from '../utils/_hydrateSEG';
 import _getStatusComponent from './_getStatusComponent';
 
 const { formatDate } = utils;
@@ -33,10 +27,10 @@ function OHIFCornerstoneSEGViewport(props) {
   const { t } = useTranslation('SEGViewport');
 
   const {
-    DisplaySetService,
+    displaySetService,
-    ToolGroupService,
+    toolGroupService,
-    SegmentationService,
+    segmentationService,
-    UINotificationService,
+    uiNotificationService,
   } = servicesManager.services;
 
   const toolGroupId = `${SEG_TOOLGROUP_BASE_NAME}-${viewportIndex}`;
@@ -127,7 +121,7 @@ function OHIFCornerstoneSEGViewport(props) {
     direction => {
       direction = direction === 'left' ? -1 : 1;
       const segmentationId = segDisplaySet.displaySetInstanceUID;
-      const segmentation = SegmentationService.getSegmentation(segmentationId);
+      const segmentation = segmentationService.getSegmentation(segmentationId);
 
       const { segments } = segmentation;
 
@@ -141,7 +135,7 @@ function OHIFCornerstoneSEGViewport(props) {
         newSelectedSegmentIndex = numberOfSegments - 1;
       }
 
-      SegmentationService.jumpToSegmentCenter(
+      segmentationService.jumpToSegmentCenter(
         segmentationId,
         newSelectedSegmentIndex,
         toolGroupId
@@ -168,8 +162,8 @@ function OHIFCornerstoneSEGViewport(props) {
   }, [servicesManager, viewportIndex, segDisplaySet, segIsLoading]);
 
   useEffect(() => {
-    const { unsubscribe } = SegmentationService.subscribe(
+    const { unsubscribe } = segmentationService.subscribe(
-      SegmentationService.EVENTS.SEGMENTATION_PIXEL_DATA_CREATED,
+      segmentationService.EVENTS.SEGMENTATION_PIXEL_DATA_CREATED,
       evt => {
         if (
           evt.segDisplaySet.displaySetInstanceUID ===
@@ -179,7 +173,7 @@ function OHIFCornerstoneSEGViewport(props) {
         }
 
         if (evt.overlappingSegments) {
-          UINotificationService.show({
+          uiNotificationService.show({
             title: 'Overlapping Segments',
             message:
               'Overlapping segments detected which is not currently supported',
@@ -195,8 +189,8 @@ function OHIFCornerstoneSEGViewport(props) {
   }, [segDisplaySet]);
 
   useEffect(() => {
-    const { unsubscribe } = SegmentationService.subscribe(
+    const { unsubscribe } = segmentationService.subscribe(
-      SegmentationService.EVENTS.SEGMENT_PIXEL_DATA_CREATED,
+      segmentationService.EVENTS.SEGMENT_PIXEL_DATA_CREATED,
       ({ segmentIndex, numSegments }) => {
         setProcessingProgress({
           segmentIndex,
@@ -214,8 +208,8 @@ function OHIFCornerstoneSEGViewport(props) {
    Cleanup the SEG viewport when the viewport is destroyed
    */
   useEffect(() => {
-    const onDisplaySetsRemovedSubscription = DisplaySetService.subscribe(
+    const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
-      DisplaySetService.EVENTS.DISPLAY_SETS_REMOVED,
+      displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
       ({ displaySetInstanceUIDs }) => {
         const activeViewport = viewports[activeViewportIndex];
         if (
@@ -235,14 +229,16 @@ function OHIFCornerstoneSEGViewport(props) {
   }, []);
 
   useEffect(() => {
-    let toolGroup = ToolGroupService.getToolGroup(toolGroupId);
+    let toolGroup = toolGroupService.getToolGroup(toolGroupId);
 
     if (toolGroup) {
       return;
     }
 
+    // This creates a custom tool group which has the lifetime of this view
+    // only, and does NOT interfere with currently displayed segmentations.
     toolGroup = createSEGToolGroupAndAddTools(
-      ToolGroupService,
+      toolGroupService,
       toolGroupId,
       extensionManager
     );
@@ -251,11 +247,12 @@ function OHIFCornerstoneSEGViewport(props) {
 
     return () => {
       // remove the segmentation representations if seg displayset changed
-      SegmentationService.removeSegmentationRepresentationFromToolGroup(
+      segmentationService.removeSegmentationRepresentationFromToolGroup(
         toolGroupId
       );
 
-      ToolGroupService.destroyToolGroup(toolGroupId);
+      // Only destroy the viewport specific implementation
+      toolGroupService.destroyToolGroup(toolGroupId);
     };
   }, []);
 
@@ -264,7 +261,7 @@ function OHIFCornerstoneSEGViewport(props) {
 
     return () => {
       // remove the segmentation representations if seg displayset changed
-      SegmentationService.removeSegmentationRepresentationFromToolGroup(
+      segmentationService.removeSegmentationRepresentationFromToolGroup(
         toolGroupId
       );
       referencedDisplaySetRef.current = null;
@@ -304,19 +301,16 @@ function OHIFCornerstoneSEGViewport(props) {
     StudyDate,
     SeriesDescription,
     SpacingBetweenSlices,
-    SeriesNumber,
   } = referencedDisplaySetRef.current.metadata;
 
-  const onPillClick = () => {
+  const onStatusClick = async () => {
-    promptHydrateSEG({
+    const isHydrated = await hydrateSEGDisplaySet({
-      servicesManager,
-      viewportIndex,
       segDisplaySet,
-    }).then(isHydrated => {
+      viewportIndex,
-      if (isHydrated) {
+      servicesManager,
-        setIsHydrated(true);
-      }
     });
+
+    setIsHydrated(isHydrated);
   };
 
   return (
@@ -330,14 +324,13 @@ function OHIFCornerstoneSEGViewport(props) {
         getStatusComponent={() => {
           return _getStatusComponent({
             isHydrated,
-            onPillClick,
+            onStatusClick,
           });
         }}
         studyData={{
           label: viewportLabel,
           useAltStyling: true,
           studyDate: formatDate(StudyDate),
-          currentSeries: SeriesNumber,
           seriesDescription: `SEG Viewport ${SeriesDescription}`,
           patientInformation: {
             patientName: PatientName

extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx

@@ -1,92 +1,56 @@
 import React from 'react';
-import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 import { Icon, Tooltip } from '@ohif/ui';
 
-import _hydrateSEGDisplaySet from '../utils/_hydrateSEG';
 
-export default function _getStatusComponent({ isHydrated, onPillClick }) {
+export default function _getStatusComponent({ isHydrated, onStatusClick }) {
   let ToolTipMessage = null;
   let StatusIcon = null;
 
+  const {t} = useTranslation("Common");
+  const loadStr = t("LOAD");
+
   switch (isHydrated) {
     case true:
-      StatusIcon = () => (
+      StatusIcon = () => <Icon name="status-alert" />;
-        <div
-          className="flex items-center justify-center -mr-1 rounded-full"
-          style={{
-            width: '18px',
-            height: '18px',
-            backgroundColor: '#98e5c1',
-            border: 'solid 1.5px #000000',
-          }}
-        >
-          <Icon
-            name="exclamation"
-            style={{ color: '#000', width: '12px', height: '12px' }}
-          />
-        </div>
-      );
 
       ToolTipMessage = () => (
         <div>This Segmentation is loaded in the segmentation panel</div>
       );
       break;
-    case false:
+  case false:
-      StatusIcon = () => (
+      StatusIcon = () => <Icon name="status-untracked" />;
-        <div
-          className="flex items-center justify-center -mr-1 bg-white rounded-full group-hover:bg-customblue-200"
-          style={{
-            width: '18px',
-            height: '18px',
-            border: 'solid 1.5px #000000',
-          }}
-        >
-          <Icon
-            name="arrow-left"
-            style={{ color: '#000', width: '14px', height: '14px' }}
-          />
-        </div>
-      );
 
-      ToolTipMessage = () => <div>Click to load segmentation.</div>;
+      ToolTipMessage = () => <div>Click LOAD to load segmentation.</div>;
   }
 
-  const StatusPill = () => (
+  const StatusArea = () => (
-    <div
+    <div className="flex h-6 leading-6 cursor-default text-sm text-white">
-      className={classNames(
+      <div className="min-w-[45px] flex items-center p-1 rounded-l-xl rounded-r bg-customgray-100">
-        'group relative flex items-center justify-center px-8 rounded-full cursor-default bg-customgreen-100',
+        <StatusIcon />
-        {
+        <span className="ml-1">SEG</span>
-          'hover:bg-customblue-100': !isHydrated,
-          'cursor-pointer': !isHydrated,
-        }
-      )}
-      style={{
-        height: '24px',
-        width: '55px',
-      }}
-      onClick={() => {
-        if (!isHydrated) {
-          if (onPillClick) {
-            onPillClick();
-          }
-        }
-      }}
-    >
-      <div className="pr-1 text-base font-medium leading-none text-black">
-        SEG
       </div>
-      <StatusIcon />
+      {!isHydrated && (
+        <div
+          className="ml-1 px-1.5 rounded cursor-pointer hover:text-black bg-primary-main hover:bg-primary-light"
+          // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
+          onMouseUp={onStatusClick}
+        >
+          {loadStr}
+        </div>
+      )}
     </div>
   );
 
+
   return (
     <>
       {ToolTipMessage && (
         <Tooltip content={<ToolTipMessage />} position="bottom-left">
-          <StatusPill />
+          <StatusArea />
         </Tooltip>
       )}
-      {!ToolTipMessage && <StatusPill />}
+      {!ToolTipMessage && <StatusArea />}
     </>
   );
 }

extensions/cornerstone-dicom-sr/package.json

@@ -36,16 +36,17 @@
     "@ohif/extension-cornerstone": "^3.0.0",
     "@ohif/extension-measurement-tracking": "^3.0.0",
     "@ohif/ui": "^2.0.0",
-    "dcmjs": "^0.28.3",
+    "dcmjs": "^0.29.4",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
     "react": "^17.0.2"
   },
   "dependencies": {
-    "@babel/runtime": "7.16.3",
+    "@babel/runtime": "^7.20.13",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.2",
-    "@cornerstonejs/core": "^0.22.3",
+    "@cornerstonejs/adapters": "^0.4.1",
-    "@cornerstonejs/tools": "^0.30.6"
+    "@cornerstonejs/core": "^0.33.2",
+    "@cornerstonejs/tools": "^0.50.2"
   }
 }

extensions/cornerstone-dicom-sr/src/commandsModule.js

@@ -2,10 +2,11 @@ import { metaData, utilities } from '@cornerstonejs/core';
 
 import OHIF from '@ohif/core';
 import dcmjs from 'dcmjs';
+import { adaptersSR } from '@cornerstonejs/adapters';
 
 import getFilteredCornerstoneToolState from './utils/getFilteredCornerstoneToolState';
 
-const { MeasurementReport } = dcmjs.adapters.Cornerstone3D;
+const { MeasurementReport } = adaptersSR.Cornerstone3D;
 const { log } = OHIF;
 
 /**
@@ -29,13 +30,17 @@ const _generateReport = (
   const report = MeasurementReport.generateReport(
     filteredToolState,
     metaData,
-    utilities.worldToImageCoords
+    utilities.worldToImageCoords,
+    options
   );
 
   const { dataset } = report;
 
-  // Add in top level series options
+  // Set the default character set as UTF-8
-  Object.assign(dataset, options);
+  // https://dicom.innolitics.com/ciods/nm-image/sop-common/00080005
+  if (typeof dataset.SpecificCharacterSet === 'undefined') {
+    dataset.SpecificCharacterSet = 'ISO_IR 192';
+  }
 
   return dataset;
 };
@@ -82,7 +87,7 @@ const commandsModule = ({}) => {
       additionalFindingTypes,
       options = {},
     }) => {
-      // TODO -> Eventually use the measurements directly and not the dcmjs adapter,
+      // Use the @cornerstonejs adapter for converting to/from DICOM
       // But it is good enough for now whilst we only have cornerstone as a datasource.
       log.info('[DICOMSR] storeMeasurements');
 

extensions/cornerstone-dicom-sr/src/getSopClassHandlerModule.ts

@@ -2,9 +2,9 @@ import { SOPClassHandlerName, SOPClassHandlerId } from './id';
 import { utils, classes } from '@ohif/core';
 import addMeasurement from './utils/addMeasurement';
 import isRehydratable from './utils/isRehydratable';
-import { adapters } from 'dcmjs';
+import { adaptersSR } from '@cornerstonejs/adapters';
 
-const { CodeScheme: Cornerstone3DCodeScheme } = adapters.Cornerstone3D;
+const { CodeScheme: Cornerstone3DCodeScheme } = adaptersSR.Cornerstone3D;
 
 const { ImageSet, MetadataProvider: metadataProvider } = classes;
 // TODO ->
@@ -51,13 +51,17 @@ const RELATIONSHIP_TYPE = {
 const CORNERSTONE_FREETEXT_CODE_VALUE = 'CORNERSTONEFREETEXT';
 
 /**
- * Basic SOPClassHandler:
+ * DICOM SR SOP Class Handler
- * - For all Image types that are stackable, create
+ * For all referenced images in the TID 1500/300 sections, add an image to the
- *   a displaySet with a stack of images
+ * display (this is TODO - it is not the actual behaviour below unfortunately)
  *
- * @param {Array} sopClassHandlerModules List of SOP Class Modules
+ * This will only display and rehydrate the latest DICOM SR in the given series
- * @param {SeriesMetadata} series The series metadata object from which the display sets will be created
+ * It would be possible to add the ability to view older series rehydrations
- * @returns {Array} The list of display sets created for the given series object
+ * in the future.
+ *
+ * @param instances is a set of instances all from the same series
+ * @param servicesManager is the services that can be used for creating
+ * @returns The list of display sets created for the given instances object
  */
 function _getDisplaySetsFromSeries(
   instances,
@@ -69,7 +73,8 @@ function _getDisplaySetsFromSeries(
     throw new Error('No instances were provided');
   }
 
-  const instance = instances[0];
+  utils.sortStudyInstances(instances);
+  const instance = instances[instances.length - 1];
 
   const {
     StudyInstanceUID,
@@ -85,10 +90,10 @@ function _getDisplaySetsFromSeries(
   if (
     !ConceptNameCodeSequence ||
     ConceptNameCodeSequence.CodeValue !==
-      CodeNameCodeSequenceValues.ImagingMeasurementReport
+    CodeNameCodeSequenceValues.ImagingMeasurementReport
   ) {
-    console.warn(
+    console.log(
-      'Only support Imaging Measurement Report SRs (TID1500) for now'
+      'Only support Imaging Measurement Report SRs (TID1500) for this renderer.'
     );
     return [];
   }
@@ -105,6 +110,9 @@ function _getDisplaySetsFromSeries(
     StudyInstanceUID,
     SOPClassHandlerId,
     SOPClassUID,
+    instances,
+    // Others is a historical value used for instances which is deprecated and will be removed
+    others: instances,
     referencedImages: null,
     measurements: null,
     isDerivedDisplaySet: true,
@@ -119,7 +127,7 @@ function _getDisplaySetsFromSeries(
 }
 
 function _load(displaySet, servicesManager, extensionManager) {
-  const { DisplaySetService, MeasurementService } = servicesManager.services;
+  const { displaySetService, measurementService } = servicesManager.services;
   const dataSources = extensionManager.getDataSources();
   const dataSource = dataSources[0];
 
@@ -128,7 +136,7 @@ function _load(displaySet, servicesManager, extensionManager) {
   displaySet.referencedImages = _getReferencedImagesList(ContentSequence);
   displaySet.measurements = _getMeasurements(ContentSequence);
 
-  const mappings = MeasurementService.getSourceMappings(
+  const mappings = measurementService.getSourceMappings(
     CORNERSTONE_3D_TOOLS_SOURCE_NAME,
     CORNERSTONE_3D_TOOLS_SOURCE_VERSION
   );
@@ -138,7 +146,7 @@ function _load(displaySet, servicesManager, extensionManager) {
   displaySet.isLoaded = true;
 
   // Check currently added displaySets and add measurements if the sources exist.
-  DisplaySetService.activeDisplaySets.forEach(activeDisplaySet => {
+  displaySetService.activeDisplaySets.forEach(activeDisplaySet => {
     _checkIfCanAddMeasurementsToDisplaySet(
       displaySet,
       activeDisplaySet,
@@ -147,8 +155,8 @@ function _load(displaySet, servicesManager, extensionManager) {
   });
 
   // Subscribe to new displaySets as the source may come in after.
-  DisplaySetService.subscribe(
+  displaySetService.subscribe(
-    DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
+    displaySetService.EVENTS.DISPLAY_SETS_ADDED,
     data => {
       const { displaySetsAdded } = data;
       // If there are still some measurements that have not yet been loaded into cornerstone,
@@ -313,13 +321,13 @@ function _getMeasurements(ImagingMeasurementReportContentSequence) {
     MeasurementGroups
   );
 
-  let measurements = [];
+  const measurements = [];
 
   Object.keys(mergedContentSequencesByTrackingUniqueIdentifiers).forEach(
     trackingUniqueIdentifier => {
       const mergedContentSequence =
         mergedContentSequencesByTrackingUniqueIdentifiers[
-          trackingUniqueIdentifier
+        trackingUniqueIdentifier
         ];
 
       const measurement = _processMeasurement(mergedContentSequence);
@@ -359,7 +367,7 @@ function _getMergedContentSequencesByTrackingUniqueIdentifiers(
 
     if (
       mergedContentSequencesByTrackingUniqueIdentifiers[
-        trackingUniqueIdentifier
+      trackingUniqueIdentifier
       ] === undefined
     ) {
       // Add the full ContentSequence
@@ -474,9 +482,9 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
   const FindingSites = mergedContentSequence.filter(
     item =>
       item.ConceptNameCodeSequence.CodingSchemeDesignator ===
-        CodingSchemeDesignators.SRT &&
+      CodingSchemeDesignators.SRT &&
       item.ConceptNameCodeSequence.CodeValue ===
-        CodeNameCodeSequenceValues.FindingSite
+      CodeNameCodeSequenceValues.FindingSite
   );
 
   const measurement = {
@@ -493,7 +501,7 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
       Finding.ConceptCodeSequence.CodingSchemeDesignator
     ) &&
     Finding.ConceptCodeSequence.CodeValue ===
-      CodeNameCodeSequenceValues.CornerstoneFreeText
+    CodeNameCodeSequenceValues.CornerstoneFreeText
   ) {
     measurement.labels.push({
       label: CORNERSTONE_FREETEXT_CODE_VALUE,
@@ -509,7 +517,7 @@ function _processNonGeometricallyDefinedMeasurement(mergedContentSequence) {
           FindingSite.ConceptCodeSequence.CodingSchemeDesignator
         ) &&
         FindingSite.ConceptCodeSequence.CodeValue ===
-          CodeNameCodeSequenceValues.CornerstoneFreeText
+        CodeNameCodeSequenceValues.CornerstoneFreeText
     );
 
     if (cornerstoneFreeTextFindingSite) {
@@ -597,7 +605,7 @@ function _getLabelFromMeasuredValueSequence(
   const { CodeValue } = MeasurementUnitsCodeSequence;
 
   const formatedNumericValue = NumericValue
-    ? Number(NumericValue).toFixed(1)
+    ? Number(NumericValue).toFixed(2)
     : '';
 
   return {

extensions/cornerstone-dicom-sr/src/index.tsx

@@ -5,6 +5,7 @@ import commandsModule from './commandsModule';
 import init from './init';
 import { id } from './id.js';
 import toolNames from './tools/toolNames';
+import hydrateStructuredReport from './utils/hydrateStructuredReport';
 
 const Component = React.lazy(() => {
   return import(
@@ -74,3 +75,4 @@ const dicomSRExtension = {
 };
 
 export default dicomSRExtension;
+export { hydrateStructuredReport };

extensions/cornerstone-dicom-sr/src/init.js

@@ -1,29 +0,0 @@
-import { addTool, annotation } from '@cornerstonejs/tools';
-import DICOMSRDisplayTool from './tools/DICOMSRDisplayTool';
-import SRLengthTool from './tools/tools/SRLength';
-import SRBidirectionalTool from './tools/tools/SRBidirectional';
-import SREllipticalROITool from './tools/tools/SREllipticalROI';
-import SRArrowAnnotateTool from './tools/tools/SRArrowAnnotate';
-
-/**
- * @param {object} configuration
- */
-export default function init({ configuration = {} }) {
-  addTool(DICOMSRDisplayTool);
-  addTool(SRLengthTool);
-  addTool(SRBidirectionalTool);
-  addTool(SREllipticalROITool);
-  addTool(SRArrowAnnotateTool);
-
-  // Modify annotation tools to use dashed lines on SR
-  const dashedLine = {
-    lineDash: '4,4',
-  };
-  annotation.config.style.setToolGroupToolStyles('SRToolGroup', {
-    [SRLengthTool.toolName]: dashedLine,
-    [SRBidirectionalTool.toolName]: dashedLine,
-    [SREllipticalROITool.toolName]: dashedLine,
-    [SRArrowAnnotateTool.toolName]: dashedLine,
-    global: {},
-  });
-}

extensions/cornerstone-dicom-sr/src/init.ts

@@ -0,0 +1,49 @@
+import {
+  addTool,
+  AngleTool,
+  annotation,
+  ArrowAnnotateTool,
+  BidirectionalTool,
+  CobbAngleTool,
+  EllipticalROITool,
+  LengthTool,
+  PlanarFreehandROITool,
+} from '@cornerstonejs/tools';
+import DICOMSRDisplayTool from './tools/DICOMSRDisplayTool';
+import addToolInstance from './utils/addToolInstance';
+import { Types } from '@ohif/core';
+import toolNames from './tools/toolNames';
+
+/**
+ * @param {object} configuration
+ */
+export default function init({
+  configuration = {},
+}: Types.Extensions.ExtensionParams): void {
+  addTool(DICOMSRDisplayTool);
+  addToolInstance(toolNames.SRLength, LengthTool, {});
+  addToolInstance(toolNames.SRBidirectional, BidirectionalTool);
+  addToolInstance(toolNames.SREllipticalROI, EllipticalROITool);
+  addToolInstance(toolNames.SRArrowAnnotate, ArrowAnnotateTool);
+  addToolInstance(toolNames.SRAngle, AngleTool);
+  // TODO - fix the SR display of Cobb Angle, as it joins the two lines
+  addToolInstance(toolNames.SRCobbAngle, CobbAngleTool);
+  // TODO - fix the rehydration of Freehand, as it throws an exception
+  // on a missing polyline. The fix is probably in CS3D
+  addToolInstance(toolNames.SRPlanarFreehandROI, PlanarFreehandROITool);
+
+  // Modify annotation tools to use dashed lines on SR
+  const dashedLine = {
+    lineDash: '4,4',
+  };
+  annotation.config.style.setToolGroupToolStyles('SRToolGroup', {
+    SRLength: dashedLine,
+    SRBidirectional: dashedLine,
+    SREllipticalROI: dashedLine,
+    SRArrowAnnotate: dashedLine,
+    SRCobbAngle: dashedLine,
+    SRAngle: dashedLine,
+    SRPlanarFreehandROI: dashedLine,
+    global: {},
+  });
+}

extensions/cornerstone-dicom-sr/src/onModeEnter.js

@@ -1,8 +1,8 @@
 import { SOPClassHandlerId } from './id';
 
 export default function onModeEnter({ servicesManager }) {
-  const { DisplaySetService } = servicesManager.services;
+  const { displaySetService } = servicesManager.services;
-  const displaySetCache = DisplaySetService.getDisplaySetCache();
+  const displaySetCache = displaySetService.getDisplaySetCache();
 
   const srDisplaySets = displaySetCache.filter(
     ds => ds.SOPClassHandlerId === SOPClassHandlerId

extensions/cornerstone-dicom-sr/src/tools/DICOMSRDisplayTool.ts

@@ -48,8 +48,8 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
     const { element } = viewport;
 
     let annotations = annotation.state.getAnnotations(
-      element,
+      this.getToolName(),
-      this.getToolName()
+      element
     );
 
     // Todo: We don't need this anymore, filtering happens in triggerAnnotationRender
@@ -121,28 +121,23 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
         const renderableDataForGraphicType = renderableData[GraphicType];
 
         let renderMethod;
-        let renderTextBox;
         let canvasCoordinatesAdapter;
 
         switch (GraphicType) {
           case SCOORD_TYPES.POINT:
             renderMethod = this.renderPoint;
-            renderTextBox = this.renderTextBox;
             break;
           case SCOORD_TYPES.MULTIPOINT:
             renderMethod = this.renderMultipoint;
-            renderTextBox = this.renderTextBox;
             break;
           case SCOORD_TYPES.POLYLINE:
             renderMethod = this.renderPolyLine;
             break;
           case SCOORD_TYPES.CIRCLE:
             renderMethod = this.renderEllipse;
-            renderTextBox = this.renderTextBox;
             break;
           case SCOORD_TYPES.ELLIPSE:
             renderMethod = this.renderEllipse;
-            renderTextBox = this.renderTextBox;
             canvasCoordinatesAdapter =
               utilities.math.ellipse.getCanvasEllipseCorners;
             break;
@@ -159,18 +154,15 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
           options
         );
 
-        if (typeof renderTextBox === 'function') {
+        this.renderTextBox(
-          renderTextBox.call(
+          svgDrawingHelper,
-            this,
+          viewport,
-            svgDrawingHelper,
+          canvasCoordinates,
-            viewport,
+          canvasCoordinatesAdapter,
-            canvasCoordinates,
+          annotation,
-            canvasCoordinatesAdapter,
+          styleSpecifier,
-            annotation,
+          options
-            styleSpecifier,
+        );
-            options
-          );
-        }
       });
     }
   };
@@ -187,11 +179,11 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
       color: options.color,
       width: options.lineWidth,
     };
-    let canvasCoordinates;
+    let allCanvasCoordinates = [];
     renderableData.map((data, index) => {
-      canvasCoordinates = data.map(p => viewport.worldToCanvas(p));
+      const canvasCoordinates = data.map(p => viewport.worldToCanvas(p));
-
       const lineUID = `${index}`;
+
       if (canvasCoordinates.length === 2) {
         drawing.drawLine(
           svgDrawingHelper,
@@ -210,9 +202,11 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
           drawingOptions
         );
       }
+
+      allCanvasCoordinates = allCanvasCoordinates.concat(canvasCoordinates);
     });
 
-    return canvasCoordinates; // used for drawing textBox
+    return allCanvasCoordinates; // used for drawing textBox
   }
 
   renderMultipoint(
@@ -405,9 +399,9 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
 }
 
 const SHORT_HAND_MAP = {
-  'Short Axis': 'W ',
+  'Short Axis': 'W: ',
-  'Long Axis': 'L ',
+  'Long Axis': 'L: ',
-  AREA: 'Area ',
+  AREA: 'Area: ',
   Length: '',
   CORNERSTONEFREETEXT: '',
 };

extensions/cornerstone-dicom-sr/src/tools/toolNames.ts

@@ -1,15 +1,15 @@
 import DICOMSRDisplayTool from './DICOMSRDisplayTool';
-import SRLengthTool from './tools/SRLength';
-import SRBidirectional from './tools/SRBidirectional';
-import SREllipticalROI from './tools/SREllipticalROI';
-import SRArrowAnnotate from './tools/SRArrowAnnotate';
 
 const toolNames = {
   DICOMSRDisplay: DICOMSRDisplayTool.toolName,
-  SRLength: SRLengthTool.toolName,
+  SRLength: 'SRLength',
-  SRBidirectional: SRBidirectional.toolName,
+  SRBidirectional: 'SRBidirectional',
-  SREllipticalROI: SREllipticalROI.toolName,
+  SREllipticalROI: 'SREllipticalROI',
-  SRArrowAnnotate: SRArrowAnnotate.toolName,
+  SRArrowAnnotate: 'SRArrowAnnotate',
+  SRAngle: 'SRAngle',
+  SRCobbAngle: 'SRCobbAngle',
+  SRRectangleROI: 'SRRectangleROI',
+  SRPlanarFreehandROI: 'SRPlanarFreehandROI',
 };
 
 export default toolNames;

extensions/cornerstone-dicom-sr/src/tools/tools/SRArrowAnnotate.ts

@@ -1,16 +0,0 @@
-import { ArrowAnnotateTool } from '@cornerstonejs/tools';
-
-/**
- * The reason we are extending ArrowAnnotateTool is to create a new tool for SR
- * viewport which basically has a different name. This is done since Cornerstone
- * has shifted from creating tool instances for each annotation, and we have ArrowAnnotate
- * mappers at the MeasurementService, so if we didn't do this, we would be mapping
- * the SR annotation to the MeasurementService (since there is a ArrowAnnotateTool mapper),
- * but with extending and renaming it, there is not mapper for SRArrowAnnotateTool; hence
- * no mapping; hence no new measurement, just temporary ones for the SR viewport.
- */
-class SRArrowAnnotateTool extends ArrowAnnotateTool {
-  static toolName = 'SRArrowAnnotate';
-}
-
-export default SRArrowAnnotateTool;

extensions/cornerstone-dicom-sr/src/tools/tools/SRBidirectional.ts

@@ -1,16 +0,0 @@
-import { BidirectionalTool } from '@cornerstonejs/tools';
-
-/**
- * The reason we are extending BidirectionalTool is to create a new tool for SR
- * viewport which basically has a different name. This is done since Cornerstone
- * has shifted from creating tool instances for each annotation, and we have Bidirectional
- * mappers at the MeasurementService, so if we didn't do this, we would be mapping
- * the SR annotation to the MeasurementService (since there is a BidirectionalTool mapper),
- * but with extending and renaming it, there is not mapper for SRBidirectionalTool; hence
- * no mapping; hence no new measurement, just temporary ones for the SR viewport.
- */
-class SRBidirectional extends BidirectionalTool {
-  static toolName = 'SRBidirectional';
-}
-
-export default SRBidirectional;

extensions/cornerstone-dicom-sr/src/tools/tools/SREllipticalROI.ts

@@ -1,16 +0,0 @@
-import { EllipticalROITool } from '@cornerstonejs/tools';
-
-/**
- * The reason we are extending EllipticalROITool is to create a new tool for SR
- * viewport which basically has a different name. This is done since Cornerstone
- * has shifted from creating tool instances for each annotation, and we have EllipticalROI
- * mappers at the MeasurementService, so if we didn't do this, we would be mapping
- * the SR annotation to the MeasurementService (since there is a EllipticalROITool mapper),
- * but with extending and renaming it, there is not mapper for SREllipticalROITool; hence
- * no mapping; hence no new measurement, just temporary ones for the SR viewport.
- */
-class SREllipticalROI extends EllipticalROITool {
-  static toolName = 'SREllipticalROI';
-}
-
-export default SREllipticalROI;

extensions/cornerstone-dicom-sr/src/tools/tools/SRLength.ts

@@ -1,16 +0,0 @@
-import { LengthTool } from '@cornerstonejs/tools';
-
-/**
- * The reason we are extending LengthTool is to create a new tool for SR
- * viewport which basically has a different name. This is done since Cornerstone
- * has shifted from creating tool instances for each annotation, and we have Length
- * mappers at the MeasurementService, so if we didn't do this, we would be mapping
- * the SR annotation to the MeasurementService (since there is a LengthTool mapper),
- * but with extending and renaming it, there is not mapper for SRLengthTool; hence
- * no mapping; hence no new measurement, just temporary ones for the SR viewport.
- */
-class SRLengthTool extends LengthTool {
-  static toolName = 'SRLength';
-}
-
-export default SRLengthTool;

extensions/cornerstone-dicom-sr/src/utils/addMeasurement.ts

@@ -43,7 +43,7 @@ export default function addMeasurement(
   // Use the metadata provider to grab its imagePlaneModule metadata
   const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
 
-  const annotationManager = annotation.state.getDefaultAnnotationManager();
+  const annotationManager = annotation.state.getAnnotationManager();
 
   // Create Cornerstone3D Annotation from measurement
   const frameNumber =

extensions/cornerstone-dicom-sr/src/utils/addToolInstance.ts

@@ -0,0 +1,12 @@
+import { addTool } from '@cornerstonejs/tools';
+
+export default function addToolInstance(
+  name: string,
+  toolClass,
+  configuration?
+): void {
+  class InstanceClass extends toolClass {
+    static toolName = name;
+  }
+  addTool(InstanceClass);
+}

extensions/cornerstone-dicom-sr/src/utils/getFilteredCornerstoneToolState.ts

@@ -39,7 +39,7 @@ function getFilteredCornerstoneToolState(
     const findingSites = [];
 
     // NOTE -> We use the CORNERSTONEJS coding schemeDesignator which we have
-    // defined in the dcmjs adapters
+    // defined in the @cornerstonejs/adapters
     if (measurementDataI.label) {
       if (additionalFindingTypes.includes(toolType)) {
         finding = {
@@ -67,7 +67,7 @@ function getFilteredCornerstoneToolState(
   const uidFilter = measurementData.map(md => md.uid);
   const uids = uidFilter.slice();
 
-  const annotationManager = annotation.state.getDefaultAnnotationManager();
+  const annotationManager = annotation.state.getAnnotationManager();
   const framesOfReference = annotationManager.getFramesOfReference();
 
   for (let i = 0; i < framesOfReference.length; i++) {

extensions/cornerstone-dicom-sr/src/utils/getLabelFromDCMJSImportedToolData.js

@@ -1,6 +1,6 @@
 /**
  * Extracts the label from the toolData imported from dcmjs. We need to do this
- * as dcmjs does not depeend on OHIF/the MeasurementService, it just produces data for cornestoneTools.
+ * as dcmjs does not depeend on OHIF/the measurementService, it just produces data for cornestoneTools.
  * This optional data is available for the consumer to process if they wish to.
  * @param {object} toolData The tooldata relating to the
  *

extensions/cornerstone-dicom-sr/src/utils/hydrateStructuredReport.js

@@ -1,10 +1,10 @@
 import { utilities, metaData } from '@cornerstonejs/core';
 import OHIF, { DicomMetadataStore } from '@ohif/core';
-import getLabelFromDCMJSImportedToolData from './utils/getLabelFromDCMJSImportedToolData';
+import getLabelFromDCMJSImportedToolData from './getLabelFromDCMJSImportedToolData';
-import { adapters } from 'dcmjs';
+import { adaptersSR } from '@cornerstonejs/adapters';
 
 const { guid } = OHIF.utils;
-const { MeasurementReport, CORNERSTONE_3D_TAG } = adapters.Cornerstone3D;
+const { MeasurementReport, CORNERSTONE_3D_TAG } = adaptersSR.Cornerstone3D;
 
 const CORNERSTONE_3D_TOOLS_SOURCE_NAME = 'Cornerstone3DTools';
 const CORNERSTONE_3D_TOOLS_SOURCE_VERSION = '0.1';
@@ -12,21 +12,22 @@ const CORNERSTONE_3D_TOOLS_SOURCE_VERSION = '0.1';
 const supportedLegacyCornerstoneTags = ['cornerstoneTools@^4.0.0'];
 
 /**
+ * Hydrates a structured report, for default viewports.
  *
  */
-export default function _hydrateStructuredReport(
+export default function hydrateStructuredReport(
   { servicesManager, extensionManager },
   displaySetInstanceUID
 ) {
   const dataSource = extensionManager.getActiveDataSource()[0];
-  const { MeasurementService, DisplaySetService } = servicesManager.services;
+  const { measurementService, displaySetService } = servicesManager.services;
 
-  const displaySet = DisplaySetService.getDisplaySetByUID(
+  const displaySet = displaySetService.getDisplaySetByUID(
     displaySetInstanceUID
   );
 
   // TODO -> We should define a strict versioning somewhere.
-  const mappings = MeasurementService.getSourceMappings(
+  const mappings = measurementService.getSourceMappings(
     CORNERSTONE_3D_TOOLS_SOURCE_NAME,
     CORNERSTONE_3D_TOOLS_SOURCE_VERSION
   );
@@ -165,7 +166,7 @@ export default function _hydrateStructuredReport(
         },
       };
 
-      const source = MeasurementService.getSource(
+      const source = measurementService.getSource(
         CORNERSTONE_3D_TOOLS_SOURCE_NAME,
         CORNERSTONE_3D_TOOLS_SOURCE_VERSION
       );
@@ -175,7 +176,7 @@ export default function _hydrateStructuredReport(
         m => m.annotationType === annotationType
       );
 
-      MeasurementService.addRawMeasurement(
+      measurementService.addRawMeasurement(
         source,
         annotationType,
         { annotation },
@@ -250,7 +251,7 @@ function _mapLegacyDataSet(dataset) {
   return dataset;
 }
 
-const toArray = function(x) {
+const toArray = function (x) {
   return Array.isArray(x) ? x : [x];
 };
 

extensions/cornerstone-dicom-sr/src/utils/isRehydratable.js

@@ -1,16 +1,18 @@
-import { adapters } from 'dcmjs';
+import { adaptersSR } from '@cornerstonejs/adapters';
 
-const cornerstoneAdapters = adapters.Cornerstone3D;
+const cornerstoneAdapters =
+  adaptersSR.Cornerstone3D.MeasurementReport
+    .CORNERSTONE_TOOL_CLASSES_BY_UTILITY_TYPE;
 
 const supportedLegacyCornerstoneTags = ['cornerstoneTools@^4.0.0'];
 const CORNERSTONE_3D_TAG = cornerstoneAdapters.CORNERSTONE_3D_TAG;
 
 /**
- * Checks if the given `displaySet`can be rehydrated into the `MeasurementService`.
+ * Checks if the given `displaySet`can be rehydrated into the `measurementService`.
  *
  * @param {object} displaySet The SR `displaySet` to check.
- * @param {object[]} mappings The CornerstoneTools 4 mappings to the `MeasurementService`.
+ * @param {object[]} mappings The CornerstoneTools 4 mappings to the `measurementService`.
- * @returns {boolean} True if the SR can be rehydrated into the `MeasurementService`.
+ * @returns {boolean} True if the SR can be rehydrated into the `measurementService`.
  */
 export default function isRehydratable(displaySet, mappings) {
   if (!mappings || !mappings.length) {
@@ -30,14 +32,14 @@ export default function isRehydratable(displaySet, mappings) {
 
   adapterKeys.forEach(key => {
     if (mappingDefinitions.includes(key)) {
-      // Must have both a dcmjs adapter and a MeasurementService
+      // Must have both a dcmjs adapter and a measurementService
       // Definition in order to be a candidate for import.
       adapters.push(cornerstoneAdapters[key]);
     }
   });
 
   for (let i = 0; i < measurements.length; i++) {
-    const TrackingIdentifier = measurements[i].TrackingIdentifier;
+    const { TrackingIdentifier } = measurements[i] || {};
     const hydratable = adapters.some(adapter => {
       let [cornerstoneTag, toolName] = TrackingIdentifier.split(':');
       if (supportedLegacyCornerstoneTags.includes(cornerstoneTag)) {
@@ -54,7 +56,13 @@ export default function isRehydratable(displaySet, mappings) {
     if (hydratable) {
       return true;
     }
+    console.log(
+      'Measurement is not rehydratable',
+      TrackingIdentifier,
+      measurements[i]
+    );
   }
 
+  console.log('No measurements found which were rehydratable');
   return false;
 }

extensions/cornerstone-dicom-sr/src/utils/isToolSupported.js

@@ -1,4 +1,4 @@
-import dcmjs from 'dcmjs';
+import { adaptersSR } from '@cornerstonejs/adapters';
 
 /**
  *  Checks if dcmjs has support to determined tool
@@ -7,7 +7,7 @@ import dcmjs from 'dcmjs';
  * @returns {boolean}
  */
 const isToolSupported = toolName => {
-  const adapter = dcmjs.adapters.Cornerstone3D;
+  const adapter = adaptersSR.Cornerstone3D;
   return !!adapter[toolName];
 };
 

extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx

@@ -1,18 +1,18 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import OHIF, { utils } from '@ohif/core';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import OHIF, { utils } from '@ohif/core';
 import { setTrackingUniqueIdentifiersForElement } from '../tools/modules/dicomSRModule';
 
 import {
-  Notification,
-  ViewportActionBar,
-  useViewportGrid,
-  useViewportDialog,
-  Tooltip,
   Icon,
+  Notification,
+  Tooltip,
+  useViewportDialog,
+  useViewportGrid,
+  ViewportActionBar,
 } from '@ohif/ui';
-import classNames from 'classnames';
+import hydrateStructuredReport from '../utils/hydrateStructuredReport';
 
 const { formatDate } = utils;
 
@@ -32,11 +32,10 @@ function OHIFCornerstoneSRViewport(props) {
     extensionManager,
   } = props;
 
-  const { t } = useTranslation('SRViewport');
-
   const {
-    DisplaySetService,
+    displaySetService,
-    CornerstoneViewportService,
+    cornerstoneViewportService,
+    measurementService,
   } = servicesManager.services;
 
   // SR viewport will always have a single display set
@@ -69,18 +68,34 @@ function OHIFCornerstoneSRViewport(props) {
     MEASUREMENT_TRACKING_EXTENSION_ID
   );
 
-  // TODO: this is a hook that fails if we register/de-register
   if (hasMeasurementTrackingExtension) {
     const contextModule = extensionManager.getModuleEntry(
       '@ohif/extension-measurement-tracking.contextModule.TrackedMeasurementsContext'
     );
 
-    const useTrackedMeasurements = () => useContext(contextModule.context);
+    const tracked = useContext(contextModule.context);
-
+    trackedMeasurements = tracked?.[0];
-    [
+    sendTrackedMeasurementsEvent = tracked?.[1];
-      trackedMeasurements,
+  }
-      sendTrackedMeasurementsEvent,
+  if (!sendTrackedMeasurementsEvent) {
-    ] = useTrackedMeasurements();
+    // if no panels from measurement-tracking extension is used, this code will run
+    trackedMeasurements = null;
+    sendTrackedMeasurementsEvent = (eventName, { displaySetInstanceUID }) => {
+      measurementService.clearMeasurements();
+      const { SeriesInstanceUIDs } = hydrateStructuredReport(
+        { servicesManager, extensionManager },
+        displaySetInstanceUID
+      );
+      const displaySets = displaySetService.getDisplaySetsForSeries(
+        SeriesInstanceUIDs[0]
+      );
+      if (displaySets.length) {
+        viewportGridService.setDisplaySetsForViewport({
+          viewportIndex: activeViewportIndex,
+          displaySetInstanceUIDs: [displaySets[0].displaySetInstanceUID],
+        });
+      }
+    };
   }
 
   /**
@@ -134,7 +149,7 @@ function OHIFCornerstoneSRViewport(props) {
       _getViewportReferencedDisplaySetData(
         srDisplaySet,
         newMeasurementSelected,
-        DisplaySetService
+        displaySetService
       ).then(({ referencedDisplaySet, referencedDisplaySetMetadata }) => {
         setMeasurementSelected(newMeasurementSelected);
         setActiveImageDisplaySetData(referencedDisplaySet);
@@ -148,13 +163,13 @@ function OHIFCornerstoneSRViewport(props) {
 
           // it means that we have a new referenced display set, and the
           // imageIdIndex will handle it by updating the viewport, but if they
-          // are the same we just need to use MeasurementService to jump to the
+          // are the same we just need to use measurementService to jump to the
           // new measurement
-          const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex(
+          const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
             viewportIndex
           );
 
-          const csViewport = CornerstoneViewportService.getCornerstoneViewport(
+          const csViewport = cornerstoneViewportService.getCornerstoneViewport(
             viewportInfo.getViewportId()
           );
 
@@ -241,8 +256,8 @@ function OHIFCornerstoneSRViewport(props) {
    Cleanup the SR viewport when the viewport is destroyed
    */
   useEffect(() => {
-    const onDisplaySetsRemovedSubscription = DisplaySetService.subscribe(
+    const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
-      DisplaySetService.EVENTS.DISPLAY_SETS_REMOVED,
+      displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
       ({ displaySetInstanceUIDs }) => {
         const activeViewport = viewports[activeViewportIndex];
         if (
@@ -266,7 +281,7 @@ function OHIFCornerstoneSRViewport(props) {
    * isHydratable check, the outcome for the isHydrated state here is always FALSE
    * since we don't do the hydration here. Todo: can't we just set it as false? why
    * we are changing the state here? isHydrated is always false at this stage, and
-   * if it is hydrated we don't event use the SR viewport.
+   * if it is hydrated we don't even use the SR viewport.
    */
   useEffect(() => {
     if (!srDisplaySet.isLoaded) {
@@ -361,8 +376,7 @@ function OHIFCornerstoneSRViewport(props) {
           label: viewportLabel,
           useAltStyling: true,
           studyDate: formatDate(StudyDate),
-          currentSeries: SeriesNumber,
+          seriesDescription: SeriesDescription || '',
-          seriesDescription: SeriesDescription,
           patientInformation: {
             patientName: PatientName
               ? OHIF.utils.formatPN(PatientName.Alphabetic)
@@ -414,14 +428,14 @@ OHIFCornerstoneSRViewport.defaultProps = {
 async function _getViewportReferencedDisplaySetData(
   displaySet,
   measurementSelected,
-  DisplaySetService
+  displaySetService
 ) {
   const { measurements } = displaySet;
   const measurement = measurements[measurementSelected];
 
   const { displaySetInstanceUID } = measurement;
 
-  const referencedDisplaySet = DisplaySetService.getDisplaySetByUID(
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
     displaySetInstanceUID
   );
 
@@ -450,13 +464,16 @@ function _getStatusComponent({
   isLocked,
   sendTrackedMeasurementsEvent,
 }) {
-  const onPillClick = () => {
+  const handleMouseUp = () => {
-    sendTrackedMeasurementsEvent('RESTORE_PROMPT_HYDRATE_SR', {
+    sendTrackedMeasurementsEvent('HYDRATE_SR', {
       displaySetInstanceUID: srDisplaySet.displaySetInstanceUID,
       viewportIndex,
     });
   };
 
+  const { t } = useTranslation('Common');
+  const loadStr = t('LOAD');
+
   // 1 - Incompatible
   // 2 - Locked
   // 3 - Rehydratable / Open
@@ -467,22 +484,7 @@ function _getStatusComponent({
 
   switch (state) {
     case 1:
-      StatusIcon = () => (
+      StatusIcon = () => <Icon name="status-alert" />;
-        <div
-          className="flex items-center justify-center -mr-1 rounded-full"
-          style={{
-            width: '18px',
-            height: '18px',
-            backgroundColor: '#98e5c1',
-            border: 'solid 1.5px #000000',
-          }}
-        >
-          <Icon
-            name="exclamation"
-            style={{ color: '#000', width: '12px', height: '12px' }}
-          />
-        </div>
-      );
 
       ToolTipMessage = () => (
         <div>
@@ -493,20 +495,7 @@ function _getStatusComponent({
       );
       break;
     case 2:
-      StatusIcon = () => (
+      StatusIcon = () => <Icon name="status-locked" />;
-        <div
-          className="flex items-center justify-center -mr-1 bg-black rounded-full"
-          style={{
-            width: '18px',
-            height: '18px',
-          }}
-        >
-          <Icon
-            name="lock"
-            style={{ color: '#05D97C', width: '8px', height: '11px' }}
-          />
-        </div>
-      );
 
       ToolTipMessage = () => (
         <div>
@@ -519,48 +508,28 @@ function _getStatusComponent({
       );
       break;
     case 3:
-      StatusIcon = () => (
+      StatusIcon = () => <Icon name="status-untracked" />;
-        <div
-          className="flex items-center justify-center -mr-1 bg-white rounded-full group-hover:bg-customblue-200"
-          style={{
-            width: '18px',
-            height: '18px',
-            border: 'solid 1.5px #000000',
-          }}
-        >
-          <Icon
-            name="arrow-left"
-            style={{ color: '#000', width: '14px', height: '14px' }}
-          />
-        </div>
-      );
 
-      ToolTipMessage = () => <div>Click to restore measurements.</div>;
+      ToolTipMessage = () => (
+        <div>{`Click ${loadStr} to restore measurements.`}</div>
+      );
   }
 
-  const StatusPill = () => (
+  const StatusArea = () => (
-    <div
+    <div className="flex h-6 leading-6 cursor-default text-sm text-white">
-      className={classNames(
+      <div className="min-w-[45px] flex items-center p-1 rounded-l-xl rounded-r bg-customgray-100">
-        'group relative flex items-center justify-center px-2 rounded-full cursor-default bg-customgreen-100',
+        <StatusIcon />
-        {
+        <span className="ml-1">SR</span>
-          'hover:bg-customblue-100': state === 3,
+      </div>
-          'cursor-pointer': state === 3,
+      {state === 3 && (
-        }
+        <div
+          className="ml-1 px-1.5 rounded cursor-pointer hover:text-black bg-primary-main hover:bg-primary-light"
+          // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
+          onMouseUp={handleMouseUp}
+        >
+          {loadStr}
+        </div>
       )}
-      style={{
-        height: '24px',
-        width: '55px',
-      }}
-      onClick={() => {
-        if (state === 3) {
-          if (onPillClick) {
-            onPillClick();
-          }
-        }
-      }}
-    >
-      <span className="pr-1 text-lg font-bold leading-none text-black">SR</span>
-      <StatusIcon />
     </div>
   );
 
@@ -568,22 +537,12 @@ function _getStatusComponent({
     <>
       {ToolTipMessage && (
         <Tooltip content={<ToolTipMessage />} position="bottom-left">
-          <StatusPill />
+          <StatusArea />
         </Tooltip>
       )}
-      {!ToolTipMessage && <StatusPill />}
+      {!ToolTipMessage && <StatusArea />}
     </>
   );
 }
 
-// function _onDoubleClick() {
-//   const cancelActiveManipulatorsForElement = cornerstoneTools.getModule(
-//     'manipulatorState'
-//   ).setters.cancelActiveManipulatorsForElement;
-//   const enabledElements = cornerstoneTools.store.state.enabledElements;
-//   enabledElements.forEach(element => {
-//     cancelActiveManipulatorsForElement(element);
-//   });
-// }
-
 export default OHIFCornerstoneSRViewport;

extensions/cornerstone/package.json

@@ -30,7 +30,7 @@
     "@ohif/core": "^3.0.0",
     "@ohif/ui": "^2.0.0",
     "cornerstone-wado-image-loader": "^4.2.1",
-    "dcmjs": "^0.28.3",
+    "dcmjs": "^0.29.4",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
@@ -39,14 +39,15 @@
     "react-resize-detector": "^6.7.6"
   },
   "devDependencies": {
-    "lodash": "4.17.21"
+    "lodash": "^4.17.21"
   },
   "dependencies": {
-    "@babel/runtime": "7.17.9",
+    "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/core": "^0.22.3",
+    "@cornerstonejs/adapters": "^0.4.1",
-    "@cornerstonejs/streaming-image-volume-loader": "^0.6.11",
+    "@cornerstonejs/core": "^0.33.2",
-    "@cornerstonejs/tools": "^0.30.6",
+    "@cornerstonejs/streaming-image-volume-loader": "^0.14.1",
-    "@kitware/vtk.js": "25.9.0",
+    "@cornerstonejs/tools": "^0.50.2",
+    "@kitware/vtk.js": "26.5.6",
     "html2canvas": "^1.4.1",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "^4.6.2",

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -20,6 +20,7 @@ import {
   IVolumeViewport,
 } from '@cornerstonejs/core/dist/esm/types';
 import getSOPInstanceAttributes from '../utils/measurementServiceMappings/utils/getSOPInstanceAttributes';
+import { CinePlayer, useCine, useViewportGrid } from '@ohif/ui';
 
 const STACK = 'stack';
 
@@ -112,20 +113,90 @@ const OHIFCornerstoneViewport = React.memo(props => {
   } = props;
 
   const [scrollbarHeight, setScrollbarHeight] = useState('100px');
+  const [{ isCineEnabled, cines }, cineService] = useCine();
+  const [{ activeViewportIndex }] = useViewportGrid();
+  const [enabledVPElement, setEnabledVPElement] = useState(null);
 
   const elementRef = useRef();
 
   const {
-    MeasurementService,
+    measurementService,
-    DisplaySetService,
+    displaySetService,
-    ToolBarService,
+    toolbarService,
-    ToolGroupService,
+    toolGroupService,
-    SyncGroupService,
+    syncGroupService,
-    CornerstoneViewportService,
+    cornerstoneViewportService,
-    CornerstoneCacheService,
+    cornerstoneCacheService,
-    ViewportGridService,
+    viewportGridService,
   } = servicesManager.services;
 
+  const cineHandler = () => {
+    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
+      return;
+    }
+
+    const cine = cines[viewportIndex];
+    const isPlaying = cine.isPlaying || false;
+    const frameRate = cine.frameRate || 24;
+
+    const validFrameRate = Math.max(frameRate, 1);
+
+    if (isPlaying) {
+      cineService.playClip(enabledVPElement, {
+        framesPerSecond: validFrameRate,
+      });
+    } else {
+      cineService.stopClip(enabledVPElement);
+    }
+  };
+
+  useEffect(() => {
+    eventTarget.addEventListener(
+      Enums.Events.STACK_VIEWPORT_NEW_STACK,
+      cineHandler
+    );
+
+    return () => {
+      cineService.setCine({ id: viewportIndex, isPlaying: false });
+      eventTarget.removeEventListener(
+        Enums.Events.STACK_VIEWPORT_NEW_STACK,
+        cineHandler
+      );
+    };
+  }, [enabledVPElement]);
+
+  useEffect(() => {
+    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
+      return;
+    }
+
+    cineHandler();
+
+    return () => {
+      if (enabledVPElement && cines?.[viewportIndex]?.isPlaying) {
+        cineService.stopClip(enabledVPElement);
+      }
+    };
+  }, [cines, viewportIndex, cineService, enabledVPElement, cineHandler]);
+
+  const cine = cines[viewportIndex];
+  const isPlaying = (cine && cine.isPlaying) || false;
+
+  const handleCineClose = () => {
+    toolbarService.recordInteraction({
+      groupId: 'MoreTools',
+      itemId: 'cine',
+      interactionType: 'toggle',
+      commands: [
+        {
+          commandName: 'toggleCine',
+          commandOptions: {},
+          context: 'CORNERSTONE',
+        },
+      ],
+    });
+  };
+
   // useCallback for scroll bar height calculation
   const setImageScrollBarHeight = useCallback(() => {
     const scrollbarHeight = `${elementRef.current.clientHeight - 20}px`;
@@ -135,13 +206,13 @@ const OHIFCornerstoneViewport = React.memo(props => {
   // useCallback for onResize
   const onResize = useCallback(() => {
     if (elementRef.current) {
-      CornerstoneViewportService.resize();
+      cornerstoneViewportService.resize();
       setImageScrollBarHeight();
     }
   }, [elementRef]);
 
   const cleanUpServices = useCallback(() => {
-    const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex(
+    const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
       viewportIndex
     );
 
@@ -153,9 +224,9 @@ const OHIFCornerstoneViewport = React.memo(props => {
     const renderingEngineId = viewportInfo.getRenderingEngineId();
     const syncGroups = viewportInfo.getSyncGroups();
 
-    ToolGroupService.removeViewportFromToolGroup(viewportId, renderingEngineId);
+    toolGroupService.removeViewportFromToolGroup(viewportId, renderingEngineId);
 
-    SyncGroupService.removeViewportFromSyncGroup(
+    syncGroupService.removeViewportFromSyncGroup(
       viewportId,
       renderingEngineId,
       syncGroups
@@ -170,24 +241,25 @@ const OHIFCornerstoneViewport = React.memo(props => {
       }
 
       const { viewportId, element } = evt.detail;
-      const viewportInfo = CornerstoneViewportService.getViewportInfo(
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(
         viewportId
       );
       const viewportIndex = viewportInfo.getViewportIndex();
 
       setEnabledElement(viewportIndex, element);
+      setEnabledVPElement(element);
 
       const renderingEngineId = viewportInfo.getRenderingEngineId();
       const toolGroupId = viewportInfo.getToolGroupId();
       const syncGroups = viewportInfo.getSyncGroups();
 
-      ToolGroupService.addViewportToToolGroup(
+      toolGroupService.addViewportToToolGroup(
         viewportId,
         renderingEngineId,
         toolGroupId
       );
 
-      SyncGroupService.addViewportToSyncGroup(
+      syncGroupService.addViewportToSyncGroup(
         viewportId,
         renderingEngineId,
         syncGroups
@@ -197,12 +269,12 @@ const OHIFCornerstoneViewport = React.memo(props => {
         onElementEnabled(evt);
       }
     },
-    [viewportIndex, onElementEnabled, ToolGroupService]
+    [viewportIndex, onElementEnabled, toolGroupService]
   );
 
   // disable the element upon unmounting
   useEffect(() => {
-    CornerstoneViewportService.enableViewport(
+    cornerstoneViewportService.enableViewport(
       viewportIndex,
       viewportOptions,
       elementRef.current
@@ -218,10 +290,10 @@ const OHIFCornerstoneViewport = React.memo(props => {
     return () => {
       cleanUpServices();
 
-      CornerstoneViewportService.disableElement(viewportIndex);
+      cornerstoneViewportService.disableElement(viewportIndex);
 
       if (onElementDisabled) {
-        const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex(
+        const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
           viewportIndex
         );
 
@@ -244,24 +316,24 @@ const OHIFCornerstoneViewport = React.memo(props => {
   // Note: this approach does not actually end of sending network requests
   // and it uses the network cache
   useEffect(() => {
-    const { unsubscribe } = DisplaySetService.subscribe(
+    const { unsubscribe } = displaySetService.subscribe(
-      DisplaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED,
+      displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED,
       async invalidatedDisplaySetInstanceUID => {
-        const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex(
+        const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
           viewportIndex
         );
 
         if (viewportInfo.hasDisplaySet(invalidatedDisplaySetInstanceUID)) {
           const viewportData = viewportInfo.getViewportData();
-          const newViewportData = await CornerstoneCacheService.invalidateViewportData(
+          const newViewportData = await cornerstoneCacheService.invalidateViewportData(
             viewportData,
             invalidatedDisplaySetInstanceUID,
             dataSource,
-            DisplaySetService
+            displaySetService
           );
 
           const keepCamera = true;
-          CornerstoneViewportService.updateViewport(
+          cornerstoneViewportService.updateViewport(
             viewportIndex,
             newViewportData,
             keepCamera
@@ -281,14 +353,14 @@ const OHIFCornerstoneViewport = React.memo(props => {
     }
 
     const loadViewportData = async () => {
-      const viewportData = await CornerstoneCacheService.createViewportData(
+      const viewportData = await cornerstoneCacheService.createViewportData(
         displaySets,
         viewportOptions,
         dataSource,
         initialImageIndex
       );
 
-      CornerstoneViewportService.setViewportData(
+      cornerstoneViewportService.setViewportData(
         viewportIndex,
         viewportData,
         viewportOptions,
@@ -311,23 +383,23 @@ const OHIFCornerstoneViewport = React.memo(props => {
    */
   useEffect(() => {
     const unsubscribeFromJumpToMeasurementEvents = _subscribeToJumpToMeasurementEvents(
-      MeasurementService,
+      measurementService,
-      DisplaySetService,
+      displaySetService,
       elementRef,
       viewportIndex,
       displaySets,
-      ViewportGridService,
+      viewportGridService,
-      CornerstoneViewportService
+      cornerstoneViewportService
     );
 
     _checkForCachedJumpToMeasurementEvents(
-      MeasurementService,
+      measurementService,
-      DisplaySetService,
+      displaySetService,
       elementRef,
       viewportIndex,
       displaySets,
-      ViewportGridService,
+      viewportGridService,
-      CornerstoneViewportService
+      cornerstoneViewportService
     );
 
     return () => {
@@ -355,29 +427,48 @@ const OHIFCornerstoneViewport = React.memo(props => {
       ></div>
       <CornerstoneOverlays
         viewportIndex={viewportIndex}
-        ToolBarService={ToolBarService}
+        toolbarService={toolbarService}
         element={elementRef.current}
         scrollbarHeight={scrollbarHeight}
         servicesManager={servicesManager}
       />
+      {isCineEnabled && (
+        <CinePlayer
+          className="absolute left-1/2 -translate-x-1/2 bottom-3"
+          isPlaying={isPlaying}
+          onClose={handleCineClose}
+          onPlayPauseChange={isPlaying =>
+            cineService.setCine({
+              id: activeViewportIndex,
+              isPlaying,
+            })
+          }
+          onFrameRateChange={frameRate =>
+            cineService.setCine({
+              id: activeViewportIndex,
+              frameRate,
+            })
+          }
+        />
+      )}
     </div>
   );
 }, areEqual);
 
 function _subscribeToJumpToMeasurementEvents(
-  MeasurementService,
+  measurementService,
-  DisplaySetService,
+  displaySetService,
   elementRef,
   viewportIndex,
   displaySets,
-  ViewportGridService,
+  viewportGridService,
-  CornerstoneViewportService
+  cornerstoneViewportService
 ) {
   const displaysUIDs = displaySets.map(
     displaySet => displaySet.displaySetInstanceUID
   );
-  const { unsubscribe } = MeasurementService.subscribe(
+  const { unsubscribe } = measurementService.subscribe(
-    MeasurementService.EVENTS.JUMP_TO_MEASUREMENT,
+    measurementService.EVENTS.JUMP_TO_MEASUREMENT,
     ({ measurement }) => {
       if (!measurement) return;
 
@@ -387,10 +478,10 @@ function _subscribeToJumpToMeasurementEvents(
           measurement,
           elementRef,
           viewportIndex,
-          MeasurementService,
+          measurementService,
-          DisplaySetService,
+          displaySetService,
-          ViewportGridService,
+          viewportGridService,
-          CornerstoneViewportService
+          cornerstoneViewportService
         );
       }
     }
@@ -401,25 +492,25 @@ function _subscribeToJumpToMeasurementEvents(
 
 // Check if there is a queued jumpToMeasurement event
 function _checkForCachedJumpToMeasurementEvents(
-  MeasurementService,
+  measurementService,
-  DisplaySetService,
+  displaySetService,
   elementRef,
   viewportIndex,
   displaySets,
-  ViewportGridService,
+  viewportGridService,
-  CornerstoneViewportService
+  cornerstoneViewportService
 ) {
   const displaysUIDs = displaySets.map(
     displaySet => displaySet.displaySetInstanceUID
   );
 
-  const measurementIdToJumpTo = MeasurementService.getJumpToMeasurement(
+  const measurementIdToJumpTo = measurementService.getJumpToMeasurement(
     viewportIndex
   );
 
   if (measurementIdToJumpTo && elementRef) {
     // Jump to measurement if the measurement exists
-    const measurement = MeasurementService.getMeasurement(
+    const measurement = measurementService.getMeasurement(
       measurementIdToJumpTo
     );
 
@@ -428,10 +519,10 @@ function _checkForCachedJumpToMeasurementEvents(
         measurement,
         elementRef,
         viewportIndex,
-        MeasurementService,
+        measurementService,
-        DisplaySetService,
+        displaySetService,
-        ViewportGridService,
+        viewportGridService,
-        CornerstoneViewportService
+        cornerstoneViewportService
       );
     }
   }
@@ -441,10 +532,10 @@ function _jumpToMeasurement(
   measurement,
   targetElementRef,
   viewportIndex,
-  MeasurementService,
+  measurementService,
-  DisplaySetService,
+  displaySetService,
-  ViewportGridService,
+  viewportGridService,
-  CornerstoneViewportService
+  cornerstoneViewportService
 ) {
   const targetElement = targetElementRef.current;
   const { displaySetInstanceUID, SOPInstanceUID, frameNumber } = measurement;
@@ -453,7 +544,7 @@ function _jumpToMeasurement(
     console.warn('cannot jump in a non-acquisition plane measurements yet');
   }
 
-  const referencedDisplaySet = DisplaySetService.getDisplaySetByUID(
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(
     displaySetInstanceUID
   );
 
@@ -461,11 +552,11 @@ function _jumpToMeasurement(
   //  to set it properly
   // setCornerstoneMeasurementActive(measurement);
 
-  ViewportGridService.setActiveViewportIndex(viewportIndex);
+  viewportGridService.setActiveViewportIndex(viewportIndex);
 
   const enableElement = getEnabledElement(targetElement);
 
-  const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex(
+  const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
     viewportIndex
   );
 
@@ -520,7 +611,7 @@ function _jumpToMeasurement(
 
     cs3DTools.annotation.selection.setAnnotationSelected(measurement.uid);
     // Jump to measurement consumed, remove.
-    MeasurementService.removeJumpToMeasurement(viewportIndex);
+    measurementService.removeJumpToMeasurement(viewportIndex);
   }
 }
 

extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react';
 
 import ViewportImageScrollbar from './ViewportImageScrollbar';
-import ViewportOverlay from './ViewportOverlay';
+import CustomizableViewportOverlay from './CustomizableViewportOverlay';
 import ViewportOrientationMarkers from './ViewportOrientationMarkers';
 import ViewportImageSliceLoadingIndicator from './ViewportImageSliceLoadingIndicator';
 
 function CornerstoneOverlays(props) {
   const { viewportIndex, element, scrollbarHeight, servicesManager } = props;
-  const { CornerstoneViewportService } = servicesManager.services;
+  const { cornerstoneViewportService } = servicesManager.services;
   const [imageSliceData, setImageSliceData] = useState({
     imageIndex: 0,
     numberOfSlices: 0,
@@ -15,8 +15,8 @@ function CornerstoneOverlays(props) {
   const [viewportData, setViewportData] = useState(null);
 
   useEffect(() => {
-    const { unsubscribe } = CornerstoneViewportService.subscribe(
+    const { unsubscribe } = cornerstoneViewportService.subscribe(
-      CornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED,
+      cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED,
       props => {
         if (props.viewportIndex !== viewportIndex) {
           return;
@@ -36,9 +36,8 @@ function CornerstoneOverlays(props) {
   }
 
   if (viewportData) {
-    const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex(
+    const viewportInfo =
-      viewportIndex
+      cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
-    );
 
     if (viewportInfo?.viewportOptions?.customViewportProps?.hideOverlays) {
       return null;
@@ -56,17 +55,20 @@ function CornerstoneOverlays(props) {
         scrollbarHeight={scrollbarHeight}
         servicesManager={servicesManager}
       />
-      <ViewportOverlay
+
+      <CustomizableViewportOverlay
         imageSliceData={imageSliceData}
         viewportData={viewportData}
         viewportIndex={viewportIndex}
         servicesManager={servicesManager}
         element={element}
       />
+
       <ViewportImageSliceLoadingIndicator
         viewportData={viewportData}
         element={element}
       />
+
       <ViewportOrientationMarkers
         imageSliceData={imageSliceData}
         element={element}

extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.css

@@ -0,0 +1,25 @@
+/*
+custom overlay panels: top-left, top-right, bottom-left and bottom-right
+If any text to be displayed on the overlay is too long to hold on a single
+line, it will be truncated with ellipsis in the end.
+*/
+.viewport-overlay {
+  max-width: 40%;
+}
+.viewport-overlay span {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.viewport-overlay.left-viewport {
+  text-align: left;
+}
+
+.viewport-overlay.right-viewport-scrollbar {
+  text-align: right;
+}
+.viewport-overlay.right-viewport-scrollbar .flex.flex-row {
+  justify-content: flex-end;
+}

extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx

@@ -0,0 +1,489 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { vec3 } from 'gl-matrix';
+import PropTypes from 'prop-types';
+import { metaData, Enums, utilities } from '@cornerstonejs/core';
+import { ViewportOverlay } from '@ohif/ui';
+import {
+  formatPN,
+  formatDICOMDate,
+  formatDICOMTime,
+  formatNumberPrecision,
+} from './utils';
+import { InstanceMetadata } from 'platform/core/src/types';
+import { ServicesManager } from '@ohif/core';
+import { ImageSliceData } from '@cornerstonejs/core/dist/esm/types';
+
+import './CustomizableViewportOverlay.css';
+
+const EPSILON = 1e-4;
+
+interface OverlayItemProps {
+  element: any;
+  viewportData: any;
+  imageSliceData: ImageSliceData;
+  viewportIndex: number | null;
+  servicesManager: ServicesManager;
+  instance: InstanceMetadata;
+  customization: any;
+  formatters: {
+    formatPN: (val) => string;
+    formatDate: (val) => string;
+    formatTime: (val) => string;
+    formatNumberPrecision: (val, number) => string;
+  };
+
+  // calculated values
+  voi: {
+    windowWidth: number;
+    windowCenter: number;
+  };
+  instanceNumber?: number;
+  scale?: number;
+}
+
+/**
+ * Window Level / Center Overlay item
+ */
+function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
+  const { windowWidth, windowCenter } = voi;
+  if (typeof windowCenter !== 'number' || typeof windowWidth !== 'number') {
+    return null;
+  }
+
+  return (
+    <div
+      className="overlay-item flex flex-row"
+      style={{ color: (customization && customization.color) || undefined }}
+    >
+      <span className="mr-1 shrink-0">W:</span>
+      <span className="ml-1 mr-2 font-light shrink-0">
+        {windowWidth.toFixed(0)}
+      </span>
+      <span className="mr-1 shrink-0">L:</span>
+      <span className="ml-1 font-light shrink-0">
+        {windowCenter.toFixed(0)}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Zoom Level Overlay item
+ */
+function ZoomOverlayItem({ scale, customization }: OverlayItemProps) {
+  return (
+    <div
+      className="overlay-item flex flex-row"
+      style={{ color: (customization && customization.color) || undefined }}
+    >
+      <span className="mr-1 shrink-0">Zoom:</span>
+      <span className="font-light">{scale.toFixed(2)}x</span>
+    </div>
+  );
+}
+
+/**
+ * Instance Number Overlay Item
+ */
+function InstanceNumberOverlayItem({
+  instanceNumber,
+  imageSliceData,
+  customization,
+}: OverlayItemProps) {
+  const { imageIndex, numberOfSlices } = imageSliceData;
+
+  return (
+    <div
+      className="overlay-item flex flex-row"
+      style={{ color: (customization && customization.color) || undefined }}
+    >
+      <span className="mr-1 shrink-0">I:</span>
+      <span className="font-light">
+        {instanceNumber !== undefined && instanceNumber !== null
+          ? `${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`
+          : `${imageIndex + 1}/${numberOfSlices}`}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Customizable Viewport Overlay
+ */
+function CustomizableViewportOverlay({
+  element,
+  viewportData,
+  imageSliceData,
+  viewportIndex,
+  servicesManager,
+}) {
+  const { toolbarService, cornerstoneViewportService, customizationService } =
+    servicesManager.services;
+  const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
+  const [scale, setScale] = useState(1);
+  const [activeTools, setActiveTools] = useState([]);
+  const { imageIndex } = imageSliceData;
+
+  const topLeftCustomization = customizationService.getModeCustomization(
+    'cornerstoneOverlayTopLeft'
+  );
+  const topRightCustomization = customizationService.getModeCustomization(
+    'cornerstoneOverlayTopRight'
+  );
+  const bottomLeftCustomization = customizationService.getModeCustomization(
+    'cornerstoneOverlayBottomLeft'
+  );
+  const bottomRightCustomization = customizationService.getModeCustomization(
+    'cornerstoneOverlayBottomRight'
+  );
+
+  const instance = useMemo(() => {
+    if (viewportData != null) {
+      return _getViewportInstance(viewportData, imageIndex);
+    } else {
+      return null;
+    }
+  }, [viewportData, imageIndex]);
+
+  const instanceNumber = useMemo(() => {
+    if (viewportData != null) {
+      return _getInstanceNumber(
+        viewportData,
+        viewportIndex,
+        imageIndex,
+        cornerstoneViewportService
+      );
+    }
+    return null;
+  }, [viewportData, viewportIndex, imageIndex, cornerstoneViewportService]);
+
+  /**
+   * Initial toolbar state
+   */
+  useEffect(() => {
+    setActiveTools(toolbarService.getActiveTools());
+  }, []);
+
+  /**
+   * Updating the VOI when the viewport changes its voi
+   */
+  useEffect(() => {
+    const updateVOI = eventDetail => {
+      const { range } = eventDetail.detail;
+
+      if (!range) {
+        return;
+      }
+
+      const { lower, upper } = range;
+      const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(
+        lower,
+        upper
+      );
+
+      setVOI({ windowCenter, windowWidth });
+    };
+
+    element.addEventListener(Enums.Events.VOI_MODIFIED, updateVOI);
+
+    return () => {
+      element.removeEventListener(Enums.Events.VOI_MODIFIED, updateVOI);
+    };
+  }, [viewportIndex, viewportData, voi, element]);
+
+  /**
+   * Updating the scale when the viewport changes its zoom
+   */
+  useEffect(() => {
+    const updateScale = eventDetail => {
+      const { previousCamera, camera } = eventDetail.detail;
+
+      if (
+        previousCamera.parallelScale !== camera.parallelScale ||
+        previousCamera.scale !== camera.scale
+      ) {
+        const viewport =
+          cornerstoneViewportService.getCornerstoneViewportByIndex(
+            viewportIndex
+          );
+
+        if (!viewport) {
+          return;
+        }
+
+        const imageData = viewport.getImageData();
+
+        if (!imageData) {
+          return;
+        }
+
+        if (camera.scale) {
+          setScale(camera.scale);
+          return;
+        }
+
+        const { spacing } = imageData;
+        // convert parallel scale to scale
+        const scale =
+          (element.clientHeight * spacing[0] * 0.5) / camera.parallelScale;
+        setScale(scale);
+      }
+    };
+
+    element.addEventListener(Enums.Events.CAMERA_MODIFIED, updateScale);
+
+    return () => {
+      element.removeEventListener(Enums.Events.CAMERA_MODIFIED, updateScale);
+    };
+  }, [viewportIndex, viewportData, cornerstoneViewportService, element]);
+
+  /**
+   * Updating the active tools when the toolbar changes
+   */
+  // Todo: this should act on the toolGroups instead of the toolbar state
+  useEffect(() => {
+    const { unsubscribe } = toolbarService.subscribe(
+      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
+      () => {
+        setActiveTools(toolbarService.getActiveTools());
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [toolbarService]);
+
+  const _renderOverlayItem = useCallback(
+    item => {
+      const overlayItemProps: OverlayItemProps = {
+        element,
+        viewportData,
+        imageSliceData,
+        viewportIndex,
+        servicesManager,
+        customization: item,
+        formatters: {
+          formatPN: formatPN,
+          formatDate: formatDICOMDate,
+          formatTime: formatDICOMTime,
+          formatNumberPrecision: formatNumberPrecision,
+        },
+        instance,
+        // calculated
+        voi,
+        scale,
+        instanceNumber,
+      };
+
+      if (item.customizationType === 'ohif.overlayItem.windowLevel') {
+        return <VOIOverlayItem {...overlayItemProps} />;
+      } else if (item.customizationType === 'ohif.overlayItem.zoomLevel') {
+        return <ZoomOverlayItem {...overlayItemProps} />;
+      } else if (item.customizationType === 'ohif.overlayItem.instanceNumber') {
+        return <InstanceNumberOverlayItem {...overlayItemProps} />;
+      } else {
+        const renderItem = customizationService.applyType(item);
+
+        if (typeof renderItem.content === 'function') {
+          return renderItem.content(overlayItemProps);
+        }
+      }
+    },
+    [
+      element,
+      viewportData,
+      imageSliceData,
+      viewportIndex,
+      servicesManager,
+      customizationService,
+      instance,
+      voi,
+      scale,
+      instanceNumber,
+    ]
+  );
+
+  const getTopLeftContent = useCallback(() => {
+    const items = topLeftCustomization?.items || [
+      {
+        id: 'WindowLevel',
+        customizationType: 'ohif.overlayItem.windowLevel',
+      },
+    ];
+    return (
+      <>
+        {items.map((item, i) => (
+          <div key={`topLeftOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
+        ))}
+      </>
+    );
+  }, [topLeftCustomization, _renderOverlayItem]);
+
+  const getTopRightContent = useCallback(() => {
+    const items = topRightCustomization?.items || [
+      {
+        id: 'InstanceNmber',
+        customizationType: 'ohif.overlayItem.instanceNumber',
+      },
+    ];
+    return (
+      <>
+        {items.map((item, i) => (
+          <div key={`topRightOverlayItem_${i}`}>{_renderOverlayItem(item)}</div>
+        ))}
+      </>
+    );
+  }, [topRightCustomization, _renderOverlayItem]);
+
+  const getBottomLeftContent = useCallback(() => {
+    const items = bottomLeftCustomization?.items || [];
+    return (
+      <>
+        {items.map((item, i) => (
+          <div key={`bottomLeftOverlayItem_${i}`}>
+            {_renderOverlayItem(item)}
+          </div>
+        ))}
+      </>
+    );
+  }, [bottomLeftCustomization, _renderOverlayItem]);
+
+  const getBottomRightContent = useCallback(() => {
+    const items = bottomRightCustomization?.items || [];
+    return (
+      <>
+        {items.map((item, i) => (
+          <div key={`bottomRightOverlayItem_${i}`}>
+            {_renderOverlayItem(item)}
+          </div>
+        ))}
+      </>
+    );
+  }, [bottomRightCustomization, _renderOverlayItem]);
+
+  return (
+    <ViewportOverlay
+      topLeft={getTopLeftContent()}
+      topRight={getTopRightContent()}
+      bottomLeft={getBottomLeftContent()}
+      bottomRight={getBottomRightContent()}
+    />
+  );
+}
+
+function _getViewportInstance(viewportData, imageIndex) {
+  let imageId = null;
+  if (viewportData.viewportType === Enums.ViewportType.STACK) {
+    imageId = viewportData.data.imageIds[imageIndex];
+  } else if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC) {
+    const volumes = viewportData.volumes;
+    if (volumes && volumes.length == 1) {
+      const volume = volumes[0];
+      imageId = volume.imageIds[imageIndex];
+    }
+  }
+  return imageId ? metaData.get('instance', imageId) || {} : {};
+}
+
+function _getInstanceNumber(
+  viewportData,
+  viewportIndex,
+  imageIndex,
+  cornerstoneViewportService
+) {
+  let instanceNumber;
+
+  if (viewportData.viewportType === Enums.ViewportType.STACK) {
+    instanceNumber = _getInstanceNumberFromStack(viewportData, imageIndex);
+
+    if (!instanceNumber && instanceNumber !== 0) {
+      return null;
+    }
+  } else if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC) {
+    instanceNumber = _getInstanceNumberFromVolume(
+      viewportData,
+      imageIndex,
+      viewportIndex,
+      cornerstoneViewportService
+    );
+  }
+  return instanceNumber;
+}
+
+function _getInstanceNumberFromStack(viewportData, imageIndex) {
+  const imageIds = viewportData.data.imageIds;
+  const imageId = imageIds[imageIndex];
+
+  if (!imageId) {
+    return;
+  }
+
+  const generalImageModule = metaData.get('generalImageModule', imageId) || {};
+  const { instanceNumber } = generalImageModule;
+
+  const stackSize = imageIds.length;
+
+  if (stackSize <= 1) {
+    return;
+  }
+
+  return parseInt(instanceNumber);
+}
+
+// Since volume viewports can be in any view direction, they can render
+// a reconstructed image which don't have imageIds; therefore, no instance and instanceNumber
+// Here we check if viewport is in the acquisition direction and if so, we get the instanceNumber
+function _getInstanceNumberFromVolume(
+  viewportData,
+  imageIndex,
+  viewportIndex,
+  cornerstoneViewportService
+) {
+  const volumes = viewportData.volumes;
+
+  // Todo: support fusion of acquisition plane which has instanceNumber
+  if (!volumes || volumes.length > 1) {
+    return;
+  }
+
+  const volume = volumes[0];
+  const { direction, imageIds } = volume;
+
+  const cornerstoneViewport =
+    cornerstoneViewportService.getCornerstoneViewportByIndex(viewportIndex);
+
+  if (!cornerstoneViewport) {
+    return;
+  }
+
+  const camera = cornerstoneViewport.getCamera();
+  const { viewPlaneNormal } = camera;
+  // checking if camera is looking at the acquisition plane (defined by the direction on the volume)
+
+  const scanAxisNormal = direction.slice(6, 9);
+
+  // check if viewPlaneNormal is parallel to scanAxisNormal
+  const cross = vec3.cross(vec3.create(), viewPlaneNormal, scanAxisNormal);
+  const isAcquisitionPlane = vec3.length(cross) < EPSILON;
+
+  if (isAcquisitionPlane) {
+    const imageId = imageIds[imageIndex];
+
+    if (!imageId) {
+      return {};
+    }
+
+    const { instanceNumber } =
+      metaData.get('generalImageModule', imageId) || {};
+    return parseInt(instanceNumber);
+  }
+}
+
+CustomizableViewportOverlay.propTypes = {
+  viewportData: PropTypes.object,
+  imageIndex: PropTypes.number,
+  viewportIndex: PropTypes.number,
+};
+
+export default CustomizableViewportOverlay;

extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Enums, Types, utilities } from '@cornerstonejs/core';
 import { utilities as csToolsUtils } from '@cornerstonejs/tools';
 import { ImageScrollbar } from '@ohif/ui';
+import { ServicesManger } from '@ohif/core';
 
 function CornerstoneImageScrollbar({
   viewportData,
@@ -13,24 +14,27 @@ function CornerstoneImageScrollbar({
   scrollbarHeight,
   servicesManager,
 }) {
-  const { CineService, CornerstoneViewportService } = servicesManager.services;
+  const {
+    cineService,
+    cornerstoneViewportService,
+  } = (servicesManager as ServicesManger).services;
 
   const onImageScrollbarChange = (imageIndex, viewportIndex) => {
-    const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex(
+    const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
       viewportIndex
     );
 
     const viewportId = viewportInfo.getViewportId();
-    const viewport = CornerstoneViewportService.getCornerstoneViewport(
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(
       viewportId
     );
 
-    const { isCineEnabled } = CineService.getState();
+    const { isCineEnabled } = cineService.getState();
 
     if (isCineEnabled) {
       // on image scrollbar change, stop the CINE if it is playing
-      CineService.stopClip(element);
+      cineService.stopClip(element);
-      CineService.setCine({ id: viewportIndex, isPlaying: false });
+      cineService.setCine({ id: viewportIndex, isPlaying: false });
     }
 
     csToolsUtils.jumpToSlice(viewport.element, {
@@ -44,7 +48,7 @@ function CornerstoneImageScrollbar({
       return;
     }
 
-    const viewport = CornerstoneViewportService.getCornerstoneViewportByIndex(
+    const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
       viewportIndex
     );
 
@@ -144,6 +148,7 @@ CornerstoneImageScrollbar.propTypes = {
   scrollbarHeight: PropTypes.string,
   imageSliceData: PropTypes.object.isRequired,
   setImageSliceData: PropTypes.func.isRequired,
+  servicesManager: PropTypes.object.isRequired,
 };
 
 export default CornerstoneImageScrollbar;

extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.tsx

@@ -30,7 +30,7 @@ function ViewportOrientationMarkers({
   const [rotation, setRotation] = useState(0);
   const [flipHorizontal, setFlipHorizontal] = useState(false);
   const [flipVertical, setFlipVertical] = useState(false);
-  const { CornerstoneViewportService } = servicesManager.services;
+  const { cornerstoneViewportService } = servicesManager.services;
 
   useEffect(() => {
     const cameraModifiedListener = (
@@ -114,7 +114,7 @@ function ViewportOrientationMarkers({
       flipHorizontal
     );
 
-    const ohifViewport = CornerstoneViewportService.getViewportInfoByIndex(
+    const ohifViewport = cornerstoneViewportService.getViewportInfoByIndex(
       viewportIndex
     );
 

extensions/cornerstone/src/Viewport/Overlays/ViewportOverlay.tsx

@@ -3,6 +3,7 @@ import { vec3 } from 'gl-matrix';
 import PropTypes from 'prop-types';
 import { metaData, Enums, utilities } from '@cornerstonejs/core';
 import { ViewportOverlay } from '@ohif/ui';
+import { ServicesManager } from '@ohif/core';
 
 const EPSILON = 1e-4;
 
@@ -14,8 +15,8 @@ function CornerstoneViewportOverlay({
   servicesManager,
 }) {
   const {
-    CornerstoneViewportService,
+    cornerstoneViewportService,
-    ToolBarService,
+    toolbarService,
   } = servicesManager.services;
   const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
   const [scale, setScale] = useState(1);
@@ -25,19 +26,19 @@ function CornerstoneViewportOverlay({
    * Initial toolbar state
    */
   useEffect(() => {
-    setActiveTools(ToolBarService.getActiveTools());
+    setActiveTools(toolbarService.getActiveTools());
   }, []);
 
   useEffect(() => {
     let isMounted = true;
-    const { unsubscribe } = ToolBarService.subscribe(
+    const { unsubscribe } = toolbarService.subscribe(
-      ToolBarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
+      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
       () => {
         if (!isMounted) {
           return;
         }
 
-        setActiveTools(ToolBarService.getActiveTools());
+        setActiveTools(toolbarService.getActiveTools());
       }
     );
 
@@ -85,7 +86,7 @@ function CornerstoneViewportOverlay({
         previousCamera.parallelScale !== camera.parallelScale ||
         previousCamera.scale !== camera.scale
       ) {
-        const viewport = CornerstoneViewportService.getCornerstoneViewportByIndex(
+        const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
           viewportIndex
         );
 
@@ -128,7 +129,7 @@ function CornerstoneViewportOverlay({
       }
 
       return (
-        <div className="flex flex-row">
+        <div className="flex flex-row text-base">
           <span className="mr-1">W:</span>
           <span className="ml-1 mr-2 font-light">{windowWidth.toFixed(0)}</span>
           <span className="mr-1">L:</span>
@@ -139,7 +140,7 @@ function CornerstoneViewportOverlay({
 
     if (activeTools.includes('Zoom')) {
       return (
-        <div className="flex flex-row">
+        <div className="flex flex-row text-base">
           <span className="mr-1">Zoom:</span>
           <span className="font-light">{scale.toFixed(2)}x</span>
         </div>
@@ -168,12 +169,12 @@ function CornerstoneViewportOverlay({
         viewportData,
         imageIndex,
         viewportIndex,
-        CornerstoneViewportService
+        cornerstoneViewportService
       );
     }
 
     return (
-      <div className="flex flex-row">
+      <div className="flex flex-row text-base">
         <span className="mr-1">I:</span>
         <span className="font-light">
           {instanceNumber !== undefined
@@ -188,7 +189,7 @@ function CornerstoneViewportOverlay({
     return null;
   }
 
-  const ohifViewport = CornerstoneViewportService.getViewportInfoByIndex(
+  const ohifViewport = cornerstoneViewportService.getViewportInfoByIndex(
     viewportIndex
   );
 
@@ -240,7 +241,7 @@ function _getInstanceNumberFromVolume(
   viewportData,
   imageIndex,
   viewportIndex,
-  CornerstoneViewportService
+  cornerstoneViewportService
 ) {
   const volumes = viewportData.volumes;
 
@@ -252,7 +253,7 @@ function _getInstanceNumberFromVolume(
   const volume = volumes[0];
   const { direction, imageIds } = volume;
 
-  const cornerstoneViewport = CornerstoneViewportService.getCornerstoneViewportByIndex(
+  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
     viewportIndex
   );
 
@@ -287,6 +288,7 @@ CornerstoneViewportOverlay.propTypes = {
   viewportData: PropTypes.object,
   imageIndex: PropTypes.number,
   viewportIndex: PropTypes.number,
+  servicesManager: PropTypes.instanceOf(ServicesManager),
 };
 
 export default CornerstoneViewportOverlay;

extensions/cornerstone/src/Viewport/Overlays/utils.ts

@@ -0,0 +1,98 @@
+import moment from 'moment';
+import { metaData } from '@cornerstonejs/core';
+
+/**
+ * Checks if value is valid.
+ *
+ * @param {number} value
+ * @returns {boolean} is valid.
+ */
+export function isValidNumber(value) {
+  return typeof value === 'number' && !isNaN(value);
+}
+
+/**
+ * Formats number precision.
+ *
+ * @param {number} number
+ * @param {number} precision
+ * @returns {number} formatted number.
+ */
+export function formatNumberPrecision(number, precision = 0) {
+  if (number !== null) {
+    return parseFloat(number).toFixed(precision);
+  }
+}
+
+/**
+ * Formats DICOM date.
+ *
+ * @param {string} date
+ * @param {string} strFormat
+ * @returns {string} formatted date.
+ */
+export function formatDICOMDate(date, strFormat = 'MMM D, YYYY') {
+  return moment(date, 'YYYYMMDD').format(strFormat);
+}
+
+/**
+ *    DICOM Time is stored as HHmmss.SSS, where:
+ *      HH 24 hour time:
+ *        m mm        0..59   Minutes
+ *        s ss        0..59   Seconds
+ *        S SS SSS    0..999  Fractional seconds
+ *
+ *        Goal: '24:12:12'
+ *
+ * @param {*} time
+ * @param {string} strFormat
+ * @returns {string} formatted name.
+ */
+export function formatDICOMTime(time, strFormat = 'HH:mm:ss') {
+  return moment(time, 'HH:mm:ss').format(strFormat);
+}
+
+/**
+ * Formats a patient name for display purposes
+ *
+ * @param {string} name
+ * @returns {string} formatted name.
+ */
+export function formatPN(name) {
+  if (!name) {
+    return '';
+  }
+
+  const cleaned = name
+    .split('^')
+    .filter(s => !!s)
+    .join(', ')
+    .trim();
+  return cleaned === ',' || cleaned === '' ? '' : cleaned;
+}
+
+/**
+ * Gets compression type
+ *
+ * @param {number} imageId
+ * @returns {string} comrpession type.
+ */
+export function getCompression(imageId) {
+  const generalImageModule = metaData.get('generalImageModule', imageId) || {};
+  const {
+    lossyImageCompression,
+    lossyImageCompressionRatio,
+    lossyImageCompressionMethod,
+  } = generalImageModule;
+
+  if (lossyImageCompression === '01' && lossyImageCompressionRatio !== '') {
+    const compressionMethod = lossyImageCompressionMethod || 'Lossy: ';
+    const compressionRatio = formatNumberPrecision(
+      lossyImageCompressionRatio,
+      2
+    );
+    return compressionMethod + compressionRatio + ' : 1';
+  }
+
+  return 'Lossless / Uncompressed';
+}

extensions/cornerstone/src/commandsModule.ts

@@ -1,6 +1,7 @@
 import {
   getEnabledElement,
   StackViewport,
+  VolumeViewport,
   utilities as csUtils,
 } from '@cornerstonejs/core';
 import {
@@ -9,31 +10,29 @@ import {
   utilities as cstUtils,
   ReferenceLinesTool,
 } from '@cornerstonejs/tools';
+import { ServicesManager } from '@ohif/core';
 
-import { getEnabledElement as OHIFgetEnabledElement } from './state';
 import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownloadForm';
 import callInputDialog from './utils/callInputDialog';
 import { setColormap } from './utils/colormap/transferFunctionHelpers';
 import toggleMPRHangingProtocol from './utils/mpr/toggleMPRHangingProtocol';
 import toggleStackImageSync from './utils/stackSync/toggleStackImageSync';
+import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
 
 const commandsModule = ({ servicesManager }) => {
   const {
-    ViewportGridService,
+    viewportGridService,
-    ToolGroupService,
+    toolGroupService,
-    CineService,
+    cineService,
-    ToolBarService,
+    toolbarService,
-    UIDialogService,
+    uiDialogService,
-    CornerstoneViewportService,
+    cornerstoneViewportService,
-    HangingProtocolService,
+    hangingProtocolService,
-    UINotificationService,
+    uiNotificationService,
-  } = servicesManager.services;
+  } = (servicesManager as ServicesManager).services;
 
   function _getActiveViewportEnabledElement() {
-    const { activeViewportIndex } = ViewportGridService.getState();
+    return getActiveViewportEnabledElement(viewportGridService);
-    const { element } = OHIFgetEnabledElement(activeViewportIndex) || {};
-    const enabledElement = getEnabledElement(element);
-    return enabledElement;
   }
 
   function _getToolGroup(toolGroupId) {
@@ -66,7 +65,7 @@ const commandsModule = ({ servicesManager }) => {
       toolGroupIdToUse = toolGroup.id;
     }
 
-    const toolGroup = ToolGroupService.getToolGroup(toolGroupIdToUse);
+    const toolGroup = toolGroupService.getToolGroup(toolGroupIdToUse);
     return toolGroup;
   }
 
@@ -75,7 +74,7 @@ const commandsModule = ({ servicesManager }) => {
       return _getActiveViewportEnabledElement();
     },
     setViewportActive: ({ viewportId }) => {
-      const viewportInfo = CornerstoneViewportService.getViewportInfo(
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(
         viewportId
       );
       if (!viewportInfo) {
@@ -84,18 +83,18 @@ const commandsModule = ({ servicesManager }) => {
       }
 
       const viewportIndex = viewportInfo.getViewportIndex();
-      ViewportGridService.setActiveViewportIndex(viewportIndex);
+      viewportGridService.setActiveViewportIndex(viewportIndex);
     },
     arrowTextCallback: ({ callback, data }) => {
-      callInputDialog(UIDialogService, data, callback);
+      callInputDialog(uiDialogService, data, callback);
     },
     toggleCine: () => {
-      const { viewports } = ViewportGridService.getState();
+      const { viewports } = viewportGridService.getState();
-      const { isCineEnabled } = CineService.getState();
+      const { isCineEnabled } = cineService.getState();
-      CineService.setIsCineEnabled(!isCineEnabled);
+      cineService.setIsCineEnabled(!isCineEnabled);
-      ToolBarService.setButton('Cine', { props: { isActive: !isCineEnabled } });
+      toolbarService.setButton('Cine', { props: { isActive: !isCineEnabled } });
       viewports.forEach((_, index) =>
-        CineService.setCine({ id: index, isPlaying: false })
+        cineService.setCine({ id: index, isPlaying: false })
       );
     },
     setWindowLevel({ window, level, toolGroupId }) {
@@ -104,7 +103,7 @@ const commandsModule = ({ servicesManager }) => {
       const windowCenterNum = Number(level);
 
       const { viewportId } = _getActiveViewportEnabledElement();
-      const viewportToolGroupId = ToolGroupService.getToolGroupForViewport(
+      const viewportToolGroupId = toolGroupService.getToolGroupForViewport(
         viewportId
       );
 
@@ -113,7 +112,7 @@ const commandsModule = ({ servicesManager }) => {
       }
 
       // get actor from the viewport
-      const renderingEngine = CornerstoneViewportService.getRenderingEngine();
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
       const viewport = renderingEngine.getViewport(viewportId);
 
       const { lower, upper } = csUtils.windowLevel.toLowHighRange(
@@ -134,7 +133,7 @@ const commandsModule = ({ servicesManager }) => {
         const activeViewportToolGroup = _getToolGroup(null);
 
         if (!activeViewportToolGroup._toolInstances.Crosshairs) {
-          UINotificationService.show({
+          uiNotificationService.show({
             title: 'Crosshairs',
             message:
               'You need to be in a MPR view to use Crosshairs. Click on MPR button in the toolbar to activate it.',
@@ -146,7 +145,7 @@ const commandsModule = ({ servicesManager }) => {
         }
       }
 
-      const { viewports } = ViewportGridService.getState() || {
+      const { viewports } = viewportGridService.getState() || {
         viewports: [],
       };
 
@@ -193,17 +192,17 @@ const commandsModule = ({ servicesManager }) => {
       });
     },
     showDownloadViewportModal: () => {
-      const { activeViewportIndex } = ViewportGridService.getState();
+      const { activeViewportIndex } = viewportGridService.getState();
-      const { UIModalService } = servicesManager.services;
+      const { uiModalService } = servicesManager.services;
 
-      if (UIModalService) {
+      if (uiModalService) {
-        UIModalService.show({
+        uiModalService.show({
           content: CornerstoneViewportDownloadForm,
           title: 'Download High Quality Image',
           contentProps: {
             activeViewportIndex,
-            onClose: UIModalService.hide,
+            onClose: uiModalService.hide,
-            CornerstoneViewportService,
+            cornerstoneViewportService,
           },
         });
       }
@@ -313,6 +312,51 @@ const commandsModule = ({ servicesManager }) => {
         }
       }
     },
+    firstImage: () => {
+      // Get current active viewport (return if none active)
+      const enabledElement = _getActiveViewportEnabledElement();
+      if (!enabledElement) {
+        return;
+      }
+      const { viewport } = enabledElement;
+
+      // Check viewport is supported
+      if (
+        viewport! instanceof StackViewport &&
+        viewport! instanceof VolumeViewport
+      ) {
+        throw new Error('Unsupported viewport type');
+      }
+
+      // Set slice to first slice
+      const options = { imageIndex: 0 };
+      cstUtils.jumpToSlice(viewport.element, options);
+    },
+    lastImage: () => {
+      // Get current active viewport (return if none active)
+      const enabledElement = _getActiveViewportEnabledElement();
+      if (!enabledElement) {
+        return;
+      }
+      const { viewport } = enabledElement;
+
+      // Get number of slices
+      // -> Copied from cornerstone3D jumpToSlice\_getImageSliceData()
+      let numberOfSlices = 0;
+
+      if (viewport instanceof StackViewport) {
+        numberOfSlices = viewport.getImageIds().length;
+      } else if (viewport instanceof VolumeViewport) {
+        numberOfSlices = csUtils.getImageSliceDataForVolumeViewport(viewport)
+          .numberOfSlices;
+      } else {
+        throw new Error('Unsupported viewport type');
+      }
+
+      // Set slice to last slice
+      const options = { imageIndex: numberOfSlices - 1 };
+      cstUtils.jumpToSlice(viewport.element, options);
+    },
     scroll: ({ direction }) => {
       const enabledElement = _getActiveViewportEnabledElement();
 
@@ -331,7 +375,7 @@ const commandsModule = ({ servicesManager }) => {
       colormap,
       immediate = false,
     }) => {
-      const viewport = CornerstoneViewportService.getCornerstoneViewportByIndex(
+      const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
         viewportIndex
       );
 
@@ -350,18 +394,18 @@ const commandsModule = ({ servicesManager }) => {
       }
     },
     incrementActiveViewport: () => {
-      const { activeViewportIndex, viewports } = ViewportGridService.getState();
+      const { activeViewportIndex, viewports } = viewportGridService.getState();
       const nextViewportIndex = (activeViewportIndex + 1) % viewports.length;
-      ViewportGridService.setActiveViewportIndex(nextViewportIndex);
+      viewportGridService.setActiveViewportIndex(nextViewportIndex);
     },
     decrementActiveViewport: () => {
-      const { activeViewportIndex, viewports } = ViewportGridService.getState();
+      const { activeViewportIndex, viewports } = viewportGridService.getState();
       const nextViewportIndex =
         (activeViewportIndex - 1 + viewports.length) % viewports.length;
-      ViewportGridService.setActiveViewportIndex(nextViewportIndex);
+      viewportGridService.setActiveViewportIndex(nextViewportIndex);
     },
     setHangingProtocol: ({ protocolId }) => {
-      HangingProtocolService.setProtocol(protocolId);
+      hangingProtocolService.setProtocol(protocolId);
     },
     toggleMPR: ({ toggledState }) => {
       toggleMPRHangingProtocol({
@@ -378,13 +422,13 @@ const commandsModule = ({ servicesManager }) => {
       });
     },
     toggleReferenceLines: ({ toggledState }) => {
-      const { activeViewportIndex } = ViewportGridService.getState();
+      const { activeViewportIndex } = viewportGridService.getState();
-      const viewportInfo = CornerstoneViewportService.getViewportInfoByIndex(
+      const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
         activeViewportIndex
       );
 
       const viewportId = viewportInfo.getViewportId();
-      const toolGroup = ToolGroupService.getToolGroupForViewport(viewportId);
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
 
       if (!toggledState) {
         toolGroup.setToolDisabled(ReferenceLinesTool.toolName);
@@ -475,6 +519,16 @@ const commandsModule = ({ servicesManager }) => {
       storeContexts: [],
       options: { direction: -1 },
     },
+    firstImage: {
+      commandFn: actions.firstImage,
+      storeContexts: [],
+      options: {},
+    },
+    lastImage: {
+      commandFn: actions.lastImage,
+      storeContexts: [],
+      options: {},
+    },
     showDownloadViewportModal: {
       commandFn: actions.showDownloadViewportModal,
       storeContexts: [],

extensions/cornerstone/src/getHangingProtocolModule.ts

@@ -8,6 +8,7 @@ const mpr = {
   availableTo: {},
   editableBy: {},
   protocolMatchingRules: [],
+  imageLoadStrategy: 'nth',
   displaySetSelectors: {
     mprDisplaySet: {
       seriesMatchingRules: [

extensions/cornerstone/src/index.tsx

@@ -7,6 +7,8 @@ import {
   imageRetrievalPoolManager,
 } from '@cornerstonejs/core';
 import { Enums as cs3DToolsEnums } from '@cornerstonejs/tools';
+import { Types } from '@ohif/core';
+
 import init from './init';
 import commandsModule from './commandsModule';
 import getHangingProtocolModule from './getHangingProtocolModule';
@@ -23,6 +25,7 @@ import { registerColormap } from './utils/colormap/transferFunctionHelpers';
 
 import { id } from './id';
 import * as csWADOImageLoader from './initWADOImageLoader.js';
+import { measurementMappingUtils } from './utils/measurementServiceMappings';
 
 const Component = React.lazy(() => {
   return import(
@@ -41,7 +44,7 @@ const OHIFCornerstoneViewport = props => {
 /**
  *
  */
-const cornerstoneExtension = {
+const cornerstoneExtension: Types.Extensions.Extension = {
   /**
    * Only required property. Should be a unique value across all extensions.
    */
@@ -60,10 +63,9 @@ const cornerstoneExtension = {
   },
 
   /**
+   * Register the Cornerstone 3D services and set them up for use.
    *
-   *
+   * @param configuration.csToolsConfig - Passed directly to `initCornerstoneTools`
-   * @param {object} [configuration={}]
-   * @param {object|array} [configuration.csToolsConfig] - Passed directly to `initCornerstoneTools`
    */
   async preRegistration({
     servicesManager,
@@ -71,13 +73,18 @@ const cornerstoneExtension = {
     configuration = {},
     appConfig,
   }) {
+    // Todo: we should be consistent with how services get registered. Use REGISTRATION static method for all
     servicesManager.registerService(
       CornerstoneViewportService(servicesManager)
     );
-    servicesManager.registerService(ToolGroupService(servicesManager));
+    servicesManager.registerService(
+      ToolGroupService.REGISTRATION(servicesManager)
+    );
     servicesManager.registerService(SyncGroupService(servicesManager));
     servicesManager.registerService(SegmentationService(servicesManager));
-    servicesManager.registerService(CornerstoneCacheService(servicesManager));
+    servicesManager.registerService(
+      CornerstoneCacheService.REGISTRATION(servicesManager)
+    );
 
     await init({ servicesManager, commandsManager, configuration, appConfig });
   },
@@ -87,12 +94,12 @@ const cornerstoneExtension = {
       // const onNewImageHandler = jumpData => {
       //   commandsManager.runCommand('jumpToImage', jumpData);
       // };
-      const { ToolBarService } = servicesManager.services;
+      const { ToolbarService } = servicesManager.services;
 
       return (
         <OHIFCornerstoneViewport
           {...props}
-          ToolBarService={ToolBarService}
+          ToolbarService={ToolbarService}
           servicesManager={servicesManager}
           commandsManager={commandsManager}
         />
@@ -144,3 +151,4 @@ const cornerstoneExtension = {
 };
 
 export default cornerstoneExtension;
+export { measurementMappingUtils };

extensions/cornerstone/src/init.tsx

@@ -10,15 +10,12 @@ import {
   EVENTS,
   metaData,
   volumeLoader,
-  imageLoader,
   imageLoadPoolManager,
   Settings,
+  utilities as csUtilities,
 } from '@cornerstonejs/core';
 import { Enums, utilities, ReferenceLinesTool } from '@cornerstonejs/tools';
-import {
+import { cornerstoneStreamingImageVolumeLoader } from '@cornerstonejs/streaming-image-volume-loader';
-  cornerstoneStreamingImageVolumeLoader,
-  sharedArrayBufferImageLoader,
-} from '@cornerstonejs/streaming-image-volume-loader';
 
 import initWADOImageLoader from './initWADOImageLoader';
 import initCornerstoneTools from './initCornerstoneTools';
@@ -27,6 +24,7 @@ import { connectToolsToMeasurementService } from './initMeasurementService';
 import callInputDialog from './utils/callInputDialog';
 import initCineService from './initCineService';
 import interleaveCenterLoader from './utils/interleaveCenterLoader';
+import nthLoader from './utils/nthLoader';
 import interleaveTopToBottom from './utils/interleaveTopToBottom';
 
 const cs3DToolsEvents = Enums.Events;
@@ -65,23 +63,26 @@ export default async function init({
   );
 
   const {
-    UserAuthenticationService,
+    userAuthenticationService,
-    MeasurementService,
+    measurementService,
-    DisplaySetService,
+    displaySetService,
-    UIDialogService,
+    uiDialogService,
-    UIModalService,
+    uiModalService,
-    UINotificationService,
+    uiNotificationService,
-    CineService,
+    cineService,
-    CornerstoneViewportService,
+    cornerstoneViewportService,
-    HangingProtocolService,
+    hangingProtocolService,
-    ToolGroupService,
+    toolGroupService,
-    ViewportGridService,
+    viewportGridService,
   } = servicesManager.services;
 
   window.services = servicesManager.services;
 
-  if (!window.crossOriginIsolated) {
+  if (
-    UINotificationService.show({
+    appConfig.showWarningMessageForCrossOrigin &&
+    !window.crossOriginIsolated
+  ) {
+    uiNotificationService.show({
       title: 'Cross Origin Isolation',
       message:
         'Cross Origin Isolation is not enabled, volume rendering will not work (e.g., MPR)',
@@ -89,8 +90,11 @@ export default async function init({
     });
   }
 
-  if (cornerstone.getShouldUseCPURendering()) {
+  if (
-    _showCPURenderingModal(UIModalService, HangingProtocolService);
+    appConfig.showCPUFallbackMessage &&
+    cornerstone.getShouldUseCPURendering()
+  ) {
+    _showCPURenderingModal(uiModalService, hangingProtocolService);
   }
 
   const labelmapRepresentation =
@@ -113,20 +117,22 @@ export default async function init({
     cornerstoneStreamingImageVolumeLoader
   );
 
-  HangingProtocolService.registerImageLoadStrategy(
+  hangingProtocolService.registerImageLoadStrategy(
     'interleaveCenter',
     interleaveCenterLoader
   );
-  HangingProtocolService.registerImageLoadStrategy(
+  hangingProtocolService.registerImageLoadStrategy(
     'interleaveTopToBottom',
     interleaveTopToBottom
   );
+  hangingProtocolService.registerImageLoadStrategy('nth', nthLoader);
 
-  imageLoader.registerImageLoader(
+  // add metadata providers
-    'streaming-wadors',
+  metaData.addProvider(
-    sharedArrayBufferImageLoader
+    csUtilities.calibratedPixelSpacingMetadataProvider.get.bind(
-  );
+      csUtilities.calibratedPixelSpacingMetadataProvider
-
+    )
+  ); // this provider is required for Calibration tool
   metaData.addProvider(metadataProvider.get.bind(metadataProvider), 9999);
 
   imageLoadPoolManager.maxNumRequests = {
@@ -135,16 +141,14 @@ export default async function init({
     prefetch: appConfig?.maxNumRequests?.prefetch || 10,
   };
 
-  initWADOImageLoader(UserAuthenticationService, appConfig);
+  initWADOImageLoader(userAuthenticationService, appConfig);
 
   /* Measurement Service */
   const measurementServiceSource = connectToolsToMeasurementService(
-    MeasurementService,
+    servicesManager
-    DisplaySetService,
-    CornerstoneViewportService
   );
 
-  initCineService(CineService);
+  initCineService(cineService);
 
   const _getDefaultPosition = event => ({
     x: (event && event.currentPoints.client[0]) || 0,
@@ -152,7 +156,7 @@ export default async function init({
   });
 
   const onRightClick = event => {
-    if (!UIDialogService) {
+    if (!uiDialogService) {
       console.warn('Unable to show dialog; no UI Dialog Service available.');
       return;
     }
@@ -179,15 +183,15 @@ export default async function init({
 
     CONTEXT_MENU_OPEN = true;
 
-    UIDialogService.dismiss({ id: 'context-menu' });
+    uiDialogService.dismiss({ id: 'context-menu' });
-    UIDialogService.create({
+    uiDialogService.create({
       id: 'context-menu',
       isDraggable: false,
       preservePosition: false,
       defaultPosition: _getDefaultPosition(event.detail),
       content: ContextMenuMeasurements,
       onClickOutside: () => {
-        UIDialogService.dismiss({ id: 'context-menu' });
+        uiDialogService.dismiss({ id: 'context-menu' });
         CONTEXT_MENU_OPEN = false;
       },
       contentProps: {
@@ -207,15 +211,15 @@ export default async function init({
         },
         onClose: () => {
           CONTEXT_MENU_OPEN = false;
-          UIDialogService.dismiss({ id: 'context-menu' });
+          uiDialogService.dismiss({ id: 'context-menu' });
         },
         onSetLabel: item => {
           const { annotationUID } = item.value;
 
-          const measurement = MeasurementService.getMeasurement(annotationUID);
+          const measurement = measurementService.getMeasurement(annotationUID);
 
           callInputDialog(
-            UIDialogService,
+            uiDialogService,
             measurement,
             (label, actionId) => {
               if (actionId === 'cancel') {
@@ -226,7 +230,7 @@ export default async function init({
                 label,
               });
 
-              MeasurementService.update(
+              measurementService.update(
                 updatedMeasurement.uid,
                 updatedMeasurement,
                 true
@@ -242,27 +246,27 @@ export default async function init({
   };
 
   const resetContextMenu = () => {
-    if (!UIDialogService) {
+    if (!uiDialogService) {
       console.warn('Unable to show dialog; no UI Dialog Service available.');
       return;
     }
 
     CONTEXT_MENU_OPEN = false;
 
-    UIDialogService.dismiss({ id: 'context-menu' });
+    uiDialogService.dismiss({ id: 'context-menu' });
   };
 
   // When a custom image load is performed, update the relevant viewports
-  HangingProtocolService.subscribe(
+  hangingProtocolService.subscribe(
-    HangingProtocolService.EVENTS.CUSTOM_IMAGE_LOAD_PERFORMED,
+    hangingProtocolService.EVENTS.CUSTOM_IMAGE_LOAD_PERFORMED,
     volumeInputArrayMap => {
       for (const entry of volumeInputArrayMap.entries()) {
         const [viewportId, volumeInputArray] = entry;
-        const viewport = CornerstoneViewportService.getCornerstoneViewport(
+        const viewport = cornerstoneViewportService.getCornerstoneViewport(
           viewportId
         );
 
-        CornerstoneViewportService.setVolumesForViewport(
+        cornerstoneViewportService.setVolumesForViewport(
           viewport,
           volumeInputArray
         );
@@ -363,11 +367,11 @@ export default async function init({
     elementDisabledHandler.bind(null)
   );
 
-  ViewportGridService.subscribe(
+  viewportGridService.subscribe(
-    ViewportGridService.EVENTS.ACTIVE_VIEWPORT_INDEX_CHANGED,
+    viewportGridService.EVENTS.ACTIVE_VIEWPORT_INDEX_CHANGED,
     ({ viewportIndex }) => {
       const viewportId = `viewport-${viewportIndex}`;
-      const toolGroup = ToolGroupService.getToolGroupForViewport(viewportId);
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
 
       if (!toolGroup || !toolGroup._toolInstances?.['ReferenceLines']) {
         return;
@@ -410,10 +414,10 @@ function CPUModal() {
   );
 }
 
-function _showCPURenderingModal(UIModalService, HangingProtocolService) {
+function _showCPURenderingModal(uiModalService, hangingProtocolService) {
   const callback = progress => {
     if (progress === 100) {
-      UIModalService.show({
+      uiModalService.show({
         content: CPUModal,
         title: 'OHIF Fell Back to CPU Rendering',
       });
@@ -422,8 +426,8 @@ function _showCPURenderingModal(UIModalService, HangingProtocolService) {
     }
   };
 
-  const { unsubscribe } = HangingProtocolService.subscribe(
+  const { unsubscribe } = hangingProtocolService.subscribe(
-    HangingProtocolService.EVENTS.HANGING_PROTOCOL_APPLIED_FOR_VIEWPORT,
+    hangingProtocolService.EVENTS.HANGING_PROTOCOL_APPLIED_FOR_VIEWPORT,
     ({ progress }) => {
       const done = callback(progress);
 

extensions/cornerstone/src/initCineService.ts

@@ -1,6 +1,6 @@
 import { utilities } from '@cornerstonejs/tools';
 
-function initCineService(CineService) {
+function initCineService(cineService) {
   const playClip = (element, playClipOptions) => {
     return utilities.cine.playClip(element, playClipOptions);
   };
@@ -9,7 +9,7 @@ function initCineService(CineService) {
     return utilities.cine.stopClip(element);
   };
 
-  CineService.setServiceImplementation({ playClip, stopClip });
+  cineService.setServiceImplementation({ playClip, stopClip });
 }
 
 export default initCineService;

extensions/cornerstone/src/initCornerstoneTools.js

@@ -14,6 +14,8 @@ import {
   DragProbeTool,
   ProbeTool,
   AngleTool,
+  CobbAngleTool,
+  PlanarFreehandROITool,
   MagnifyTool,
   CrosshairsTool,
   SegmentationDisplayTool,
@@ -23,6 +25,8 @@ import {
   ReferenceLinesTool,
 } from '@cornerstonejs/tools';
 
+import CalibrationLineTool from './tools/CalibrationLineTool';
+
 export default function initCornerstoneTools(configuration = {}) {
   init(configuration);
   addTool(PanTool);
@@ -40,10 +44,13 @@ export default function initCornerstoneTools(configuration = {}) {
   addTool(ArrowAnnotateTool);
   addTool(DragProbeTool);
   addTool(AngleTool);
+  addTool(CobbAngleTool);
+  addTool(PlanarFreehandROITool);
   addTool(MagnifyTool);
   addTool(CrosshairsTool);
   addTool(SegmentationDisplayTool);
   addTool(ReferenceLinesTool);
+  addTool(CalibrationLineTool);
 
   // Modify annotation tools to use dashed lines on SR
   const annotationStyle = {
@@ -76,10 +83,13 @@ const toolNames = {
   EllipticalROI: EllipticalROITool.toolName,
   Bidirectional: BidirectionalTool.toolName,
   Angle: AngleTool.toolName,
+  CobbAngle: CobbAngleTool.toolName,
+  PlanarFreehandROI: PlanarFreehandROITool.toolName,
   Magnify: MagnifyTool.toolName,
   Crosshairs: CrosshairsTool.toolName,
   SegmentationDisplay: SegmentationDisplayTool.toolName,
   ReferenceLines: ReferenceLinesTool.toolName,
+  CalibrationLine: CalibrationLineTool.toolName,
 };
 
 export { toolNames };

extensions/cornerstone/src/initMeasurementService.js

@@ -1,6 +1,8 @@
 import { eventTarget } from '@cornerstonejs/core';
 import { Enums, annotation } from '@cornerstonejs/tools';
 import { DicomMetadataStore } from '@ohif/core';
+import { toolNames } from './initCornerstoneTools';
+import { onCompletedCalibrationLine } from './tools/CalibrationLineTool';
 
 import measurementServiceMappingsFactory from './utils/measurementServiceMappings/measurementServiceMappingsFactory';
 import getSOPInstanceAttributes from './utils/measurementServiceMappings/utils/getSOPInstanceAttributes';
@@ -13,9 +15,9 @@ const CORNERSTONE_3D_TOOLS_SOURCE_NAME = 'Cornerstone3DTools';
 const CORNERSTONE_3D_TOOLS_SOURCE_VERSION = '0.1';
 
 const initMeasurementService = (
-  MeasurementService,
+  measurementService,
-  DisplaySetService,
+  displaySetService,
-  CornerstoneViewportService
+  cornerstoneViewportService
 ) => {
   /* Initialization */
   const {
@@ -23,18 +25,22 @@ const initMeasurementService = (
     Bidirectional,
     EllipticalROI,
     ArrowAnnotate,
+    Angle,
+    CobbAngle,
+    RectangleROI,
+    PlanarFreehandROI,
   } = measurementServiceMappingsFactory(
-    MeasurementService,
+    measurementService,
-    DisplaySetService,
+    displaySetService,
-    CornerstoneViewportService
+    cornerstoneViewportService
   );
-  const csTools3DVer1MeasurementSource = MeasurementService.createSource(
+  const csTools3DVer1MeasurementSource = measurementService.createSource(
     CORNERSTONE_3D_TOOLS_SOURCE_NAME,
     CORNERSTONE_3D_TOOLS_SOURCE_VERSION
   );
 
   /* Mappings */
-  MeasurementService.addMapping(
+  measurementService.addMapping(
     csTools3DVer1MeasurementSource,
     'Length',
     Length.matchingCriteria,
@@ -42,7 +48,7 @@ const initMeasurementService = (
     Length.toMeasurement
   );
 
-  MeasurementService.addMapping(
+  measurementService.addMapping(
     csTools3DVer1MeasurementSource,
     'Bidirectional',
     Bidirectional.matchingCriteria,
@@ -50,7 +56,7 @@ const initMeasurementService = (
     Bidirectional.toMeasurement
   );
 
-  MeasurementService.addMapping(
+  measurementService.addMapping(
     csTools3DVer1MeasurementSource,
     'EllipticalROI',
     EllipticalROI.matchingCriteria,
@@ -58,7 +64,7 @@ const initMeasurementService = (
     EllipticalROI.toMeasurement
   );
 
-  MeasurementService.addMapping(
+  measurementService.addMapping(
     csTools3DVer1MeasurementSource,
     'ArrowAnnotate',
     ArrowAnnotate.matchingCriteria,
@@ -66,22 +72,65 @@ const initMeasurementService = (
     ArrowAnnotate.toMeasurement
   );
 
+  measurementService.addMapping(
+    csTools3DVer1MeasurementSource,
+    'CobbAngle',
+    CobbAngle.matchingCriteria,
+    CobbAngle.toAnnotation,
+    CobbAngle.toMeasurement
+  );
+
+  measurementService.addMapping(
+    csTools3DVer1MeasurementSource,
+    'Angle',
+    Angle.matchingCriteria,
+    Angle.toAnnotation,
+    Angle.toMeasurement
+  );
+
+  measurementService.addMapping(
+    csTools3DVer1MeasurementSource,
+    'RectangleROI',
+    RectangleROI.matchingCriteria,
+    RectangleROI.toAnnotation,
+    RectangleROI.toMeasurement
+  );
+
+  measurementService.addMapping(
+    csTools3DVer1MeasurementSource,
+    'PlanarFreehandROI',
+    PlanarFreehandROI.matchingCriteria,
+    PlanarFreehandROI.toAnnotation,
+    PlanarFreehandROI.toMeasurement
+  );
+
+  // On the UI side, the Calibration Line tool will work almost the same as the
+  // Length tool
+  measurementService.addMapping(
+    csTools3DVer1MeasurementSource,
+    'CalibrationLine',
+    Length.matchingCriteria,
+    Length.toAnnotation,
+    Length.toMeasurement
+  );
+
   return csTools3DVer1MeasurementSource;
 };
 
-const connectToolsToMeasurementService = (
+const connectToolsToMeasurementService = servicesManager => {
-  MeasurementService,
+  const {
-  DisplaySetService,
+    measurementService,
-  CornerstoneViewportService
+    displaySetService,
-) => {
+    cornerstoneViewportService,
+  } = servicesManager.services;
   const csTools3DVer1MeasurementSource = initMeasurementService(
-    MeasurementService,
+    measurementService,
-    DisplaySetService,
+    displaySetService,
-    CornerstoneViewportService
+    cornerstoneViewportService
   );
   connectMeasurementServiceToTools(
-    MeasurementService,
+    measurementService,
-    CornerstoneViewportService,
+    cornerstoneViewportService,
     csTools3DVer1MeasurementSource
   );
   const { annotationToMeasurement, remove } = csTools3DVer1MeasurementSource;
@@ -95,15 +144,38 @@ const connectToolsToMeasurementService = (
       } = annotationAddedEventDetail;
       const { toolName } = metadata;
 
-      // To force the measurementUID be the same as the annotationUID
+      if (
-      // Todo: this should be changed when a measurement can include multiple annotations
+        csToolsEvent.type === completedEvt &&
-      // in the future
+        toolName === toolNames.CalibrationLine
-      annotationAddedEventDetail.uid = annotationUID;
+      ) {
-      annotationToMeasurement(toolName, annotationAddedEventDetail);
+        // show modal to input the measurement (mm)
+        onCompletedCalibrationLine(servicesManager, csToolsEvent)
+          .then(
+            () => {
+              console.log('calibration applied');
+            },
+            () => true
+          )
+          .finally(() => {
+            // we don't need the calibration line lingering around, remove the
+            // annotation from the display
+            removeAnnotation(annotationUID);
+            removeMeasurement(csToolsEvent);
+            // this will ensure redrawing of annotations
+            cornerstoneViewportService.resize();
+          });
+      } else {
+        // To force the measurementUID be the same as the annotationUID
+        // Todo: this should be changed when a measurement can include multiple annotations
+        // in the future
+        annotationAddedEventDetail.uid = annotationUID;
+        annotationToMeasurement(toolName, annotationAddedEventDetail);
+      }
     } catch (error) {
       console.warn('Failed to update measurement:', error);
     }
   }
+
   function updateMeasurement(csToolsEvent) {
     try {
       const annotationModifiedEventDetail = csToolsEvent.detail;
@@ -113,7 +185,7 @@ const connectToolsToMeasurementService = (
       } = annotationModifiedEventDetail;
 
       // If the measurement hasn't been added, don't modify it
-      const measurement = MeasurementService.getMeasurement(annotationUID);
+      const measurement = measurementService.getMeasurement(annotationUID);
 
       if (!measurement) {
         return;
@@ -121,11 +193,36 @@ const connectToolsToMeasurementService = (
       const { toolName } = metadata;
 
       annotationModifiedEventDetail.uid = annotationUID;
-      annotationToMeasurement(toolName, annotationModifiedEventDetail);
+      // Passing true to indicate this is an update and NOT a annotation (start) completion.
+      annotationToMeasurement(toolName, annotationModifiedEventDetail, true);
     } catch (error) {
       console.warn('Failed to update measurement:', error);
     }
   }
+  function selectMeasurement(csToolsEvent) {
+    try {
+      const annotationSelectionEventDetail = csToolsEvent.detail;
+
+      const {
+        added: addedSelectedAnnotationUIDs,
+        removed: removedSelectedAnnotationUIDs,
+      } = annotationSelectionEventDetail;
+
+      if (removedSelectedAnnotationUIDs) {
+        removedSelectedAnnotationUIDs.forEach(annotationUID =>
+          measurementService.setMeasurementSelected(annotationUID, false)
+        );
+      }
+
+      if (addedSelectedAnnotationUIDs) {
+        addedSelectedAnnotationUIDs.forEach(annotationUID =>
+          measurementService.setMeasurementSelected(annotationUID, true)
+        );
+      }
+    } catch (error) {
+      console.warn('Failed to select and unselect measurements:', error);
+    }
+  }
 
   /**
    * When csTools fires a removed event, remove the same measurement
@@ -141,7 +238,7 @@ const connectToolsToMeasurementService = (
           annotation: { annotationUID },
         } = annotationRemovedEventDetail;
 
-        const measurement = MeasurementService.getMeasurement(annotationUID);
+        const measurement = measurementService.getMeasurement(annotationUID);
 
         if (measurement) {
           console.log('~~ removeEvt', csToolsEvent);
@@ -157,20 +254,24 @@ const connectToolsToMeasurementService = (
 
   // on display sets added, check if there are any measurements in measurement service that need to be
   // put into cornerstone tools
+  const addedEvt = csToolsEvents.ANNOTATION_ADDED;
   const completedEvt = csToolsEvents.ANNOTATION_COMPLETED;
   const updatedEvt = csToolsEvents.ANNOTATION_MODIFIED;
   const removedEvt = csToolsEvents.ANNOTATION_REMOVED;
+  const selectionEvt = csToolsEvents.ANNOTATION_SELECTION_CHANGE;
 
+  eventTarget.addEventListener(addedEvt, addMeasurement);
   eventTarget.addEventListener(completedEvt, addMeasurement);
   eventTarget.addEventListener(updatedEvt, updateMeasurement);
   eventTarget.addEventListener(removedEvt, removeMeasurement);
+  eventTarget.addEventListener(selectionEvt, selectMeasurement);
 
   return csTools3DVer1MeasurementSource;
 };
 
 const connectMeasurementServiceToTools = (
-  MeasurementService,
+  measurementService,
-  CornerstoneViewportService,
+  cornerstoneViewportService,
   measurementSource
 ) => {
   const {
@@ -178,14 +279,14 @@ const connectMeasurementServiceToTools = (
     MEASUREMENTS_CLEARED,
     MEASUREMENT_UPDATED,
     RAW_MEASUREMENT_ADDED,
-  } = MeasurementService.EVENTS;
+  } = measurementService.EVENTS;
 
-  const csTools3DVer1MeasurementSource = MeasurementService.getSource(
+  const csTools3DVer1MeasurementSource = measurementService.getSource(
     CORNERSTONE_3D_TOOLS_SOURCE_NAME,
     CORNERSTONE_3D_TOOLS_SOURCE_VERSION
   );
 
-  MeasurementService.subscribe(MEASUREMENTS_CLEARED, ({ measurements }) => {
+  measurementService.subscribe(MEASUREMENTS_CLEARED, ({ measurements }) => {
     if (!Object.keys(measurements).length) {
       return;
     }
@@ -200,7 +301,7 @@ const connectMeasurementServiceToTools = (
     }
   });
 
-  MeasurementService.subscribe(
+  measurementService.subscribe(
     MEASUREMENT_UPDATED,
     ({ source, measurement, notYetUpdatedAtSource }) => {
       if (source.name !== CORNERSTONE_3D_TOOLS_SOURCE_NAME) {
@@ -234,7 +335,7 @@ const connectMeasurementServiceToTools = (
     }
   );
 
-  MeasurementService.subscribe(
+  measurementService.subscribe(
     RAW_MEASUREMENT_ADDED,
     ({ source, measurement, data, dataSource }) => {
       if (source.name !== CORNERSTONE_3D_TOOLS_SOURCE_NAME) {
@@ -265,7 +366,7 @@ const connectMeasurementServiceToTools = (
         imageId = dataSource.getImageIdsForInstance({ instance });
       }
 
-      const annotationManager = annotation.state.getDefaultAnnotationManager();
+      const annotationManager = annotation.state.getAnnotationManager();
       annotationManager.addAnnotation({
         annotationUID: measurement.uid,
         highlighted: false,
@@ -287,14 +388,14 @@ const connectMeasurementServiceToTools = (
     }
   );
 
-  MeasurementService.subscribe(
+  measurementService.subscribe(
     MEASUREMENT_REMOVED,
     ({ source, measurement: removedMeasurementId }) => {
       if (source?.name && source.name !== CORNERSTONE_3D_TOOLS_SOURCE_NAME) {
         return;
       }
       removeAnnotation(removedMeasurementId);
-      const renderingEngine = CornerstoneViewportService.getRenderingEngine();
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
       // Note: We could do a better job by triggering the render on the
       // viewport itself, but the removeAnnotation does not include that info...
       renderingEngine.render();

extensions/cornerstone/src/initWADOImageLoader.js

@@ -34,7 +34,7 @@ function initWebWorkers(appConfig) {
 }
 
 export default function initWADOImageLoader(
-  UserAuthenticationService,
+  userAuthenticationService,
   appConfig
 ) {
   cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
@@ -55,7 +55,7 @@ export default function initWADOImageLoader(
       convertFloatPixelDataToInt: false,
     },
     beforeSend: function(xhr) {
-      const headers = UserAuthenticationService.getAuthorizationHeader();
+      const headers = userAuthenticationService.getAuthorizationHeader();
 
       // Request:
       // JPEG-LS Lossless (1.2.840.10008.1.2.4.80) if available, otherwise accept

extensions/cornerstone/src/services/CornerstoneCacheService/CornerstoneCacheService.ts

@@ -1,5 +1,5 @@
+import { ServicesManager } from '@ohif/core';
 import { cache as cs3DCache, Enums, volumeLoader } from '@cornerstonejs/core';
-import { utils } from '@ohif/core';
 
 import getCornerstoneViewportType from '../../utils/getCornerstoneViewportType';
 import {
@@ -7,10 +7,19 @@ import {
   VolumeViewportData,
 } from '../../types/CornerstoneCacheService';
 
-const VOLUME_IMAGE_LOADER_SCHEME = 'streaming-wadors';
 const VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
 
 class CornerstoneCacheService {
+  static REGISTRATION = (serviceManager: ServicesManager) => {
+    return {
+      name: 'cornerstoneCacheService',
+      altName: 'CornerstoneCacheService',
+      create: ({ configuration = {} }) => {
+        return new CornerstoneCacheService(serviceManager);
+      },
+    };
+  };
+
   stackImageIds: Map<string, string[]> = new Map();
   volumeImageIds: Map<string, string[]> = new Map();
 
@@ -70,7 +79,7 @@ class CornerstoneCacheService {
     viewportData: VolumeViewportData,
     invalidatedDisplaySetInstanceUID: string,
     dataSource,
-    DisplaySetService
+    displaySetService
   ) {
     if (viewportData.viewportType === Enums.ViewportType.STACK) {
       throw new Error('Invalidation of StackViewport is not supported yet');
@@ -86,7 +95,7 @@ class CornerstoneCacheService {
     }
 
     const displaySets = viewportData.data.map(({ displaySetInstanceUID }) =>
-      DisplaySetService.getDisplaySetByUID(displaySetInstanceUID)
+      displaySetService.getDisplaySetByUID(displaySetInstanceUID)
     );
 
     const newViewportData = await this._getVolumeViewportData(
@@ -148,8 +157,8 @@ class CornerstoneCacheService {
       // getSOPClassHandler method
 
       if (displaySet.load && displaySet.load instanceof Function) {
-        const { UserAuthenticationService } = this.servicesManager.services;
+        const { userAuthenticationService } = this.servicesManager.services;
-        const headers = UserAuthenticationService.getAuthorizationHeader();
+        const headers = userAuthenticationService.getAuthorizationHeader();
         await displaySet.load({ headers });
 
         volumeData.push({
@@ -204,7 +213,7 @@ class CornerstoneCacheService {
   }
 
   private _shouldRenderSegmentation(displaySets) {
-    const { SegmentationService } = this.servicesManager.services;
+    const { segmentationService } = this.servicesManager.services;
 
     const viewportDisplaySetInstanceUIDs = displaySets.map(
       ({ displaySetInstanceUID }) => displaySetInstanceUID
@@ -212,12 +221,12 @@ class CornerstoneCacheService {
 
     // check inside segmentations if any of them are referencing the displaySets
     // that are about to be displayed
-    const segmentations = SegmentationService.getSegmentations();
+    const segmentations = segmentationService.getSegmentations();
 
     for (const segmentation of segmentations) {
       const segDisplaySetInstanceUID = segmentation.displaySetInstanceUID;
 
-      const shouldDisplaySeg = SegmentationService.shouldRenderSegmentation(
+      const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(
         viewportDisplaySetInstanceUIDs,
         segDisplaySetInstanceUID
       );
@@ -238,14 +247,7 @@ class CornerstoneCacheService {
       dataSource
     );
 
-    if (stackImageIds[0].startsWith('dicomfile')) {
+    return stackImageIds;
-      return stackImageIds;
-    }
-
-    return stackImageIds.map(imageId => {
-      const imageURI = utils.imageIdToURI(imageId);
-      return `${VOLUME_IMAGE_LOADER_SCHEME}:${imageURI}`;
-    });
   }
 }
 

extensions/cornerstone/src/services/CornerstoneCacheService/index.js

@@ -1,10 +1,3 @@
 import CornerstoneCacheService from './CornerstoneCacheService';
 
-export default function ExtendedCornerstoneCacheService(serviceManager) {
+export default CornerstoneCacheService;
-  return {
-    name: 'CornerstoneCacheService',
-    create: ({ configuration = {} }) => {
-      return new CornerstoneCacheService(serviceManager);
-    },
-  };
-}

extensions/cornerstone/src/services/SegmentationService/SegmentationService.ts

@@ -738,7 +738,7 @@ class SegmentationService {
     highlightHideOthers = false,
     highlightFunctionType: 'ease-in-out' // todo: make animation functions configurable from outside
   ): void {
-    const { ToolGroupService } = this.servicesManager.services;
+    const { toolGroupService } = this.servicesManager.services;
     const center = this._getSegmentCenter(segmentationId, segmentIndex);
 
     const { world } = center;
@@ -751,10 +751,10 @@ class SegmentationService {
 
     if (Array.isArray(toolGroupId)) {
       toolGroupId.forEach(toolGroup => {
-        toolGroups.push(ToolGroupService.getToolGroup(toolGroup));
+        toolGroups.push(toolGroupService.getToolGroup(toolGroup));
       });
     } else {
-      toolGroups.push(ToolGroupService.getToolGroup(toolGroupId));
+      toolGroups.push(toolGroupService.getToolGroup(toolGroupId));
     }
 
     toolGroups.forEach(toolGroup => {
@@ -1240,9 +1240,9 @@ class SegmentationService {
     }
 
     // if (brushSize !== undefined) {
-    //   const { ToolGroupService } = this.servicesManager.services;
+    //   const { toolGroupService } = this.servicesManager.services;
 
-    //   const toolGroupIds = ToolGroupService.getToolGroupIds();
+    //   const toolGroupIds = toolGroupService.getToolGroupIds();
 
     //   toolGroupIds.forEach(toolGroupId => {
     //     cstUtils.segmentation.setBrushSizeForToolGroup(toolGroupId, brushSize);
@@ -1250,9 +1250,9 @@ class SegmentationService {
     // }
 
     // if (brushThresholdGate !== undefined) {
-    //   const { ToolGroupService } = this.servicesManager.services;
+    //   const { toolGroupService } = this.servicesManager.services;
 
-    //   const toolGroupIds = ToolGroupService.getFirstToolGroupIds();
+    //   const toolGroupIds = toolGroupService.getFirstToolGroupIds();
 
     //   toolGroupIds.forEach(toolGroupId => {
     //     cstUtils.segmentation.setBrushThresholdForToolGroup(
@@ -1324,11 +1324,11 @@ class SegmentationService {
       return false;
     }
 
-    const { DisplaySetService } = this.servicesManager.services;
+    const { displaySetService } = this.servicesManager.services;
 
     let shouldDisplaySeg = false;
 
-    const segDisplaySet = DisplaySetService.getDisplaySetByUID(
+    const segDisplaySet = displaySetService.getDisplaySetByUID(
       segDisplaySetInstanceUID
     );
 
@@ -1337,7 +1337,7 @@ class SegmentationService {
     viewportDisplaySetInstanceUIDs.forEach(displaySetInstanceUID => {
       // check if the displaySet is sharing the same frameOfReferenceUID
       // with the new segmentation
-      const displaySet = DisplaySetService.getDisplaySetByUID(
+      const displaySet = displaySetService.getDisplaySetByUID(
         displaySetInstanceUID
       );
 
@@ -1710,7 +1710,7 @@ class SegmentationService {
   }
 
   private _setLabelmapConfigValue = (property, value) => {
-    const { CornerstoneViewportService } = this.servicesManager.services;
+    const { cornerstoneViewportService } = this.servicesManager.services;
 
     const config = cstSegmentation.config.getGlobalConfig();
 
@@ -1719,8 +1719,8 @@ class SegmentationService {
     // Todo: add non global (representation specific config as well)
     cstSegmentation.config.setGlobalConfig(config);
 
-    const renderingEngine = CornerstoneViewportService.getRenderingEngine();
+    const renderingEngine = cornerstoneViewportService.getRenderingEngine();
-    const viewportIds = CornerstoneViewportService.getViewportIds();
+    const viewportIds = cornerstoneViewportService.getViewportIds();
 
     renderingEngine.renderViewports(viewportIds);
   };
@@ -1953,8 +1953,8 @@ class SegmentationService {
   }
 
   private _getFirstToolGroupId = () => {
-    const { ToolGroupService } = this.servicesManager.services;
+    const { toolGroupService } = this.servicesManager.services;
-    const toolGroupIds = ToolGroupService.getToolGroupIds();
+    const toolGroupIds = toolGroupService.getToolGroupIds();
 
     return toolGroupIds[0];
   };

extensions/cornerstone/src/services/SegmentationService/index.js

@@ -2,7 +2,8 @@ import SegmentationService from './SegmentationService';
 
 export default function ExtendedSegmentationService(servicesManager) {
   return {
-    name: 'SegmentationService',
+    name: 'segmentationService',
+    altName: 'SegmentationService',
     create: ({ configuration = {} }) => {
       return new SegmentationService({ servicesManager });
     },

extensions/cornerstone/src/services/SyncGroupService/index.js

@@ -2,7 +2,8 @@ import SyncGroupService from './SyncGroupService';
 
 export default function ExtendedSyncGroupService(serviceManager) {
   return {
-    name: 'SyncGroupService',
+    altName: 'SyncGroupService',
+    name: 'syncGroupService',
     create: ({ configuration = {} }) => {
       return new SyncGroupService(serviceManager);
     },

extensions/cornerstone/src/services/ToolGroupService/ToolGroupService.ts

@@ -20,6 +20,16 @@ type Tools = {
 };
 
 export default class ToolGroupService {
+  public static REGISTRATION = serviceManager => {
+    return {
+      name: 'toolGroupService',
+      altName: 'ToolGroupService',
+      create: ({ configuration = {} }) => {
+        return new ToolGroupService(serviceManager);
+      },
+    };
+  };
+
   serviceManager: any;
   private toolGroupIds: Set<string> = new Set();
   /**
@@ -29,8 +39,8 @@ export default class ToolGroupService {
   EVENTS: { [key: string]: string };
 
   constructor(serviceManager) {
-    const { CornerstoneViewportService } = serviceManager.services;
+    const { cornerstoneViewportService } = serviceManager.services;
-    this.CornerstoneViewportService = CornerstoneViewportService;
+    this.cornerstoneViewportService = cornerstoneViewportService;
     this.listeners = {};
     this.EVENTS = EVENTS;
     Object.assign(this, pubSubServiceInterface);
@@ -51,7 +61,7 @@ export default class ToolGroupService {
   }
 
   public getToolGroupForViewport(viewportId: string): Types.IToolGroup | void {
-    const renderingEngine = this.CornerstoneViewportService.getRenderingEngine();
+    const renderingEngine = this.cornerstoneViewportService.getRenderingEngine();
     return ToolGroupManager.getToolGroupForViewport(
       viewportId,
       renderingEngine.id

extensions/cornerstone/src/services/ToolGroupService/index.js

@@ -1,10 +1,3 @@
 import ToolGroupService from './ToolGroupService';
 
-export default function ExtendedToolGroupService(serviceManager) {
+export default ToolGroupService;
-  return {
-    name: 'ToolGroupService',
-    create: ({ configuration = {} }) => {
-      return new ToolGroupService(serviceManager);
-    },
-  };
-}

extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts

@@ -136,7 +136,11 @@ class CornerstoneViewportService implements IViewportService {
   public destroy() {
     this._removeResizeObserver();
     this.viewportGridResizeObserver = null;
-    this.renderingEngine?.destroy?.();
+    try {
+      this.renderingEngine?.destroy?.();
+    } catch (e) {
+      console.warn('Rendering engine not destroyed', e);
+    }
     this.viewportsDisplaySets.clear();
     this.renderingEngine = null;
     cache.purgeCache();
@@ -408,7 +412,7 @@ class CornerstoneViewportService implements IViewportService {
     // (This call may or may not create sub-requests for series metadata)
     const volumeInputArray = [];
     const displaySetOptionsArray = viewportInfo.getDisplaySetOptions();
-    const { HangingProtocolService } = this.servicesManager.services;
+    const { hangingProtocolService } = this.servicesManager.services;
 
     const volumeToLoad = [];
     const displaySetInstanceUIDs = [];
@@ -445,11 +449,11 @@ class CornerstoneViewportService implements IViewportService {
     this.viewportsDisplaySets.set(viewport.id, displaySetInstanceUIDs);
 
     if (
-      HangingProtocolService.hasCustomImageLoadStrategy() &&
+      hangingProtocolService.hasCustomImageLoadStrategy() &&
-      !HangingProtocolService.customImageLoadPerformed
+      !hangingProtocolService.customImageLoadPerformed
     ) {
       // delegate the volume loading to the hanging protocol service if it has a custom image load strategy
-      return HangingProtocolService.runImageLoadStrategy({
+      return hangingProtocolService.runImageLoadStrategy({
         viewportId: viewport.id,
         volumeInputArray,
       });
@@ -465,9 +469,9 @@ class CornerstoneViewportService implements IViewportService {
 
   public async setVolumesForViewport(viewport, volumeInputArray) {
     const {
-      DisplaySetService,
+      displaySetService,
-      SegmentationService,
+      segmentationService,
-      ToolGroupService,
+      toolGroupService,
     } = this.servicesManager.services;
 
     await viewport.setVolumes(volumeInputArray);
@@ -476,7 +480,7 @@ class CornerstoneViewportService implements IViewportService {
     const displaySetInstanceUIDs = this.viewportsDisplaySets.get(viewport.id);
 
     const segDisplaySet = displaySetInstanceUIDs
-      .map(DisplaySetService.getDisplaySetByUID)
+      .map(displaySetService.getDisplaySetByUID)
       .find(displaySet => displaySet && displaySet.Modality === 'SEG');
 
     if (segDisplaySet) {
@@ -484,18 +488,18 @@ class CornerstoneViewportService implements IViewportService {
       const referencedVolume = cache.getVolume(referencedVolumeId);
       const segmentationId = segDisplaySet.displaySetInstanceUID;
 
-      const toolGroup = ToolGroupService.getToolGroupForViewport(viewport.id);
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewport.id);
 
       if (referencedVolume) {
-        SegmentationService.addSegmentationRepresentationToToolGroup(
+        segmentationService.addSegmentationRepresentationToToolGroup(
           toolGroup.id,
           segmentationId
         );
       }
     } else {
-      const toolGroup = ToolGroupService.getToolGroupForViewport(viewport.id);
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewport.id);
       const toolGroupSegmentationRepresentations =
-        SegmentationService.getSegmentationRepresentationsForToolGroup(
+        segmentationService.getSegmentationRepresentationsForToolGroup(
           toolGroup.id
         ) || [];
 
@@ -504,7 +508,7 @@ class CornerstoneViewportService implements IViewportService {
       // and we can look into hydrated segmentations to check if any of them are
       // associated with the primary displaySet
       // get segmentations only returns the hydrated segmentations
-      const segmentations = SegmentationService.getSegmentations();
+      const segmentations = segmentationService.getSegmentations();
 
       for (const segmentation of segmentations) {
         // if there is already a segmentation representation for this segmentation
@@ -539,11 +543,11 @@ class CornerstoneViewportService implements IViewportService {
         }
 
         if (shouldDisplaySeg) {
-          const toolGroup = ToolGroupService.getToolGroupForViewport(
+          const toolGroup = toolGroupService.getToolGroupForViewport(
             viewport.id
           );
 
-          SegmentationService.addSegmentationRepresentationToToolGroup(
+          segmentationService.addSegmentationRepresentationToToolGroup(
             toolGroup.id,
             segmentation.id
           );
@@ -553,7 +557,7 @@ class CornerstoneViewportService implements IViewportService {
 
     const viewportInfo = this.getViewportInfo(viewport.id);
 
-    const toolGroup = ToolGroupService.getToolGroupForViewport(viewport.id);
+    const toolGroup = toolGroupService.getToolGroupForViewport(viewport.id);
     csToolsUtils.segmentation.triggerSegmentationRender(toolGroup.id);
 
     const initialImageOptions = viewportInfo.getInitialImageOptions();
@@ -729,8 +733,8 @@ class CornerstoneViewportService implements IViewportService {
   }
 
   _getFrameOfReferenceUID(displaySetInstanceUID) {
-    const { DisplaySetService } = this.servicesManager.services;
+    const { displaySetService } = this.servicesManager.services;
-    const displaySet = DisplaySetService.getDisplaySetByUID(
+    const displaySet = displaySetService.getDisplaySetByUID(
       displaySetInstanceUID
     );
 
@@ -756,7 +760,8 @@ class CornerstoneViewportService implements IViewportService {
 
 export default function ExtendedCornerstoneViewportService(serviceManager) {
   return {
-    name: 'CornerstoneViewportService',
+    name: 'cornerstoneViewportService',
+    altName: 'CornerstoneViewportService',
     create: ({ configuration = {} }) => {
       return new CornerstoneViewportService(serviceManager);
     },

extensions/cornerstone/src/services/ViewportService/IViewportService.ts

@@ -12,7 +12,7 @@ import {
  */
 export interface IViewportService {
   servicesManager: unknown;
-  HangingProtocolService: unknown;
+  hangingProtocolService: unknown;
   renderingEngine: unknown;
   viewportGridResizeObserver: unknown;
   viewportsInfo: unknown;

extensions/cornerstone/src/services/ViewportService/Viewport.ts

@@ -7,7 +7,7 @@ import { SyncGroup } from '../SyncGroupService/SyncGroupService';
 import {
   StackViewportData,
   VolumeViewportData,
-} from './CornerstoneCacheService';
+} from '../../types/CornerstoneCacheService';
 
 export type InitialImageOptions = {
   index?: number;
@@ -23,6 +23,11 @@ export type ViewportOptions = {
   syncGroups?: SyncGroup[];
   initialImageOptions?: InitialImageOptions;
   customViewportProps?: Record<string, unknown>;
+  /*
+   * Allows drag and drop of display sets not matching viewport options, but
+   * doesn't show them initially.  Displays initially blank if no required match
+   */
+  allowUnmatchedView?: boolean;
 };
 
 export type PublicViewportOptions = {
@@ -34,6 +39,7 @@ export type PublicViewportOptions = {
   syncGroups?: SyncGroup[];
   initialImageOptions?: InitialImageOptions;
   customViewportProps?: Record<string, unknown>;
+  allowUnmatchedView?: boolean;
 };
 
 export type PublicDisplaySetOptions = {

extensions/cornerstone/src/tools/CalibrationLineTool.ts

@@ -0,0 +1,134 @@
+import { metaData } from '@cornerstonejs/core';
+import { LengthTool } from '@cornerstonejs/tools';
+import { calibrateImageSpacing } from '@cornerstonejs/tools/dist/esm/utilities';
+import callInputDialog from '../utils/callInputDialog';
+import getActiveViewportEnabledElement from '../utils/getActiveViewportEnabledElement';
+
+/**
+ * Calibration Line tool works almost the same as the
+ */
+class CalibrationLineTool extends LengthTool {
+  static toolName = 'CalibrationLine';
+
+  _renderingViewport: any;
+  _lengthToolRenderAnnotation = this.renderAnnotation;
+
+  renderAnnotation = (enabledElement, svgDrawingHelper) => {
+    const { viewport } = enabledElement;
+    this._renderingViewport = viewport;
+    return this._lengthToolRenderAnnotation(enabledElement, svgDrawingHelper);
+  };
+
+  _getTextLines(data, targetId) {
+    const [canvasPoint1, canvasPoint2] = data.handles.points.map(p =>
+      this._renderingViewport.worldToCanvas(p)
+    );
+    // for display, round to 2 decimal points
+    const lengthPx =
+      Math.round(calculateLength2(canvasPoint1, canvasPoint2) * 100) / 100;
+
+    const textLines = [`${lengthPx}px`];
+
+    return textLines;
+  }
+}
+
+function calculateLength2(point1, point2) {
+  const dx = point1[0] - point2[0];
+  const dy = point1[1] - point2[1];
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+function calculateLength3(pos1, pos2) {
+  const dx = pos1[0] - pos2[0];
+  const dy = pos1[1] - pos2[1];
+  const dz = pos1[2] - pos2[2];
+
+  return Math.sqrt(dx * dx + dy * dy + dz * dz);
+}
+
+export default CalibrationLineTool;
+
+export function onCompletedCalibrationLine(servicesManager, csToolsEvent) {
+  const { uiDialogService, viewportGridService } = servicesManager.services;
+
+  // calculate length (mm) with the current Pixel Spacing
+  const annotationAddedEventDetail = csToolsEvent.detail;
+  const {
+    annotation: { metadata, data: annotationData },
+  } = annotationAddedEventDetail;
+  const { referencedImageId: imageId } = metadata;
+  const enabledElement = getActiveViewportEnabledElement(viewportGridService);
+  const { viewport } = enabledElement;
+
+  const length =
+    Math.round(
+      calculateLength3(
+        annotationData.handles.points[0],
+        annotationData.handles.points[1]
+      ) * 100
+    ) / 100;
+
+  // calculate the currently applied pixel spacing on the viewport
+  const calibratedPixelSpacing = metaData.get(
+    'calibratedPixelSpacing',
+    imageId
+  );
+  const imagePlaneModule = metaData.get('imagePlaneModule', imageId);
+  const currentRowPixelSpacing =
+    calibratedPixelSpacing?.[0] || imagePlaneModule?.rowPixelSpacing || 1;
+  const currentColumnPixelSpacing =
+    calibratedPixelSpacing?.[1] || imagePlaneModule?.columnPixelSpacing || 1;
+
+  const adjustCalibration = newLength => {
+    const spacingScale = newLength / length;
+    const rowSpacing = spacingScale * currentRowPixelSpacing;
+    const colSpacing = spacingScale * currentColumnPixelSpacing;
+
+    // trigger resize of the viewport to adjust the world/pixel mapping
+    calibrateImageSpacing(
+      imageId,
+      viewport.getRenderingEngine(),
+      rowSpacing,
+      colSpacing
+    );
+  };
+
+  return new Promise((resolve, reject) => {
+    if (!uiDialogService) {
+      reject('UIDialogService is not initiated');
+      return;
+    }
+
+    callInputDialog(
+      uiDialogService,
+      {
+        text: '',
+        label: `${length}`,
+      },
+      (value, id) => {
+        if (id === 'save') {
+          adjustCalibration(Number.parseFloat(value));
+          resolve(true);
+        } else {
+          reject('cancel');
+        }
+      },
+      false,
+      {
+        dialogTitle: 'Calibration',
+        inputLabel: 'Actual Physical distance (mm)',
+
+        // the input value must be a number
+        validateFunc: val => {
+          try {
+            const v = Number.parseFloat(val);
+            return !isNaN(v) && v !== 0.0;
+          } catch {
+            return false;
+          }
+        },
+      }
+    );
+  });
+}

extensions/cornerstone/src/utils/CornerstoneViewportDownloadForm.tsx

@@ -21,7 +21,7 @@ const VIEWPORT_ID = 'cornerstone-viewport-download-form';
 const CornerstoneViewportDownloadForm = ({
   onClose,
   activeViewportIndex,
-  CornerstoneViewportService,
+  cornerstoneViewportService,
 }) => {
   const enabledElement = OHIFgetEnabledElement(activeViewportIndex);
   const activeViewportElement = enabledElement?.element;
@@ -154,7 +154,7 @@ const CornerstoneViewportDownloadForm = ({
 
         const { viewport } = activeViewportEnabledElement;
 
-        const renderingEngine = CornerstoneViewportService.getRenderingEngine();
+        const renderingEngine = cornerstoneViewportService.getRenderingEngine();
         const downloadViewport = renderingEngine.getViewport(VIEWPORT_ID);
 
         if (downloadViewport instanceof StackViewport) {

extensions/cornerstone/src/utils/callInputDialog.tsx

@@ -9,44 +9,56 @@ import { Input, Dialog } from '@ohif/ui';
  * @param {*} event
  * @param {*} callback
  * @param {*} isArrowAnnotateInputDialog
+ * @param {*} dialogConfig
+ * @param {string?} dialogConfig.dialogTitle - title of the input dialog
+ * @param {string?} dialogConfig.inputLabel - show label above the input
  */
 function callInputDialog(
-  UIDialogService,
+  uiDialogService,
   data,
   callback,
-  isArrowAnnotateInputDialog = true
+  isArrowAnnotateInputDialog = true,
+  dialogConfig: any = {}
 ) {
-  const dialogId = 'enter-annotation';
+  const dialogId = 'dialog-enter-annotation';
   const label = data
     ? isArrowAnnotateInputDialog
       ? data.text
       : data.label
     : '';
+  const {
+    dialogTitle = 'Enter your annotation',
+    inputLabel = '',
+    validateFunc = value => true,
+  } = dialogConfig;
 
   const onSubmitHandler = ({ action, value }) => {
     switch (action.id) {
       case 'save':
+        if (typeof validateFunc === 'function' && !validateFunc(value.label))
+          return;
+
         callback(value.label, action.id);
         break;
       case 'cancel':
         callback('', action.id);
         break;
     }
-    UIDialogService.dismiss({ id: dialogId });
+    uiDialogService.dismiss({ id: dialogId });
   };
 
-  if (UIDialogService) {
+  if (uiDialogService) {
-    UIDialogService.create({
+    uiDialogService.create({
       id: dialogId,
       centralize: true,
       isDraggable: false,
       showOverlay: true,
       content: Dialog,
       contentProps: {
-        title: 'Enter your annotation',
+        title: dialogTitle,
         value: { label },
         noCloseButton: true,
-        onClose: () => UIDialogService.dismiss({ id: dialogId }),
+        onClose: () => uiDialogService.dismiss({ id: dialogId }),
         actions: [
           { id: 'cancel', text: 'Cancel', type: 'primary' },
           { id: 'save', text: 'Save', type: 'secondary' },
@@ -59,7 +71,10 @@ function callInputDialog(
                 autoFocus
                 className="mt-2 bg-black border-primary-main"
                 type="text"
+                id="annotation"
                 containerClassName="mr-2"
+                label={inputLabel}
+                labelClassName="text-primary-light"
                 value={value.label}
                 onChange={event => {
                   event.persist();

extensions/cornerstone/src/utils/getActiveViewportEnabledElement.ts

@@ -0,0 +1,13 @@
+import { getEnabledElement } from '@cornerstonejs/core';
+import { IEnabledElement } from '@cornerstonejs/core/dist/esm/types';
+
+import { getEnabledElement as OHIFgetEnabledElement } from '../state';
+
+export default function getActiveViewportEnabledElement(
+  viewportGridService
+): IEnabledElement {
+  const { activeViewportIndex } = viewportGridService.getState();
+  const { element } = OHIFgetEnabledElement(activeViewportIndex) || {};
+  const enabledElement = getEnabledElement(element);
+  return enabledElement;
+}

extensions/cornerstone/src/utils/getCornerstoneOrientation.ts

@@ -17,7 +17,6 @@ export default function getCornerstoneOrientation(
       case CORONAL:
         return Enums.OrientationAxis.CORONAL;
       default:
-        log.wanr('Choosing acquisition plane orientation');
         return Enums.OrientationAxis.ACQUISITION;
     }
   }

extensions/cornerstone/src/utils/getNthFrames.js

@@ -0,0 +1,44 @@
+/**
+ * Returns a re-ordered array consisting of, in order:
+ *    1. First few objects
+ *    2. Center objects
+ *    3. Last few objects
+ *    4. nth Objects (n=7), set 2
+ *    5. nth Objects set 5,
+ *    6. Remaining objects
+ * What this does is return the first/center/start objects, as those
+ * are often used first, then a selection of objects scattered over the
+ * instances in order to allow making requests over a set of image instances.
+ *
+ * @param {[]} imageIds
+ * @returns [] reordered to be an nth selection
+ */
+export default function getNthFrames(imageIds) {
+  const frames = [[], [], [], [], []];
+  const centerStart = imageIds.length / 2 - 3;
+  const centerEnd = centerStart + 6;
+
+  for (let i = 0; i < imageIds.length; i++) {
+    if (
+      i < 2 ||
+      i > imageIds.length - 4 ||
+      (i > centerStart && i < centerEnd)
+    ) {
+      frames[0].push(imageIds[i]);
+    } else if (i % 7 === 2) {
+      frames[1].push(imageIds[i]);
+    } else if (i % 7 === 5) {
+      frames[2].push(imageIds[i]);
+    } else {
+      frames[(i % 2) + 3].push(imageIds[i]);
+    }
+  }
+  const ret = [
+    ...frames[0],
+    ...frames[1],
+    ...frames[2],
+    ...frames[3],
+    ...frames[4],
+  ];
+  return ret;
+}

extensions/cornerstone/src/utils/interleave.js

@@ -0,0 +1,26 @@
+/**
+ * Interleave the items from all the lists so that the first items are first
+ * in the returned list, the second items are next etc.
+ * Does this in a O(n) fashion, and return lists[0] if there is only one list.
+ *
+ * @param {[]} lists
+ * @returns [] reordered to be breadth first traversal of lists
+ */
+export default function interleave(lists) {
+  if (!lists || !lists.length) return [];
+  if (lists.length === 1) return lists[0];
+  console.time('interleave');
+  const useLists = [...lists];
+  const ret = [];
+  for (let i = 0; useLists.length > 0; i++) {
+    for (const list of useLists) {
+      if (i >= list.length) {
+        useLists.splice(useLists.indexOf(list), 1);
+        continue;
+      }
+      ret.push(list[i]);
+    }
+  }
+  console.timeEnd('interleave');
+  return ret;
+}

extensions/cornerstone/src/utils/measurementServiceMappings/Angle.ts

@@ -0,0 +1,210 @@
+import SUPPORTED_TOOLS from './constants/supportedTools';
+import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
+import { utils } from '@ohif/core';
+
+const Angle = {
+  toAnnotation: measurement => { },
+
+  /**
+   * Maps cornerstone annotation event data to measurement service format.
+   *
+   * @param {Object} cornerstone Cornerstone event data
+   * @return {Measurement} Measurement instance
+   */
+  toMeasurement: (
+    csToolsEventDetail,
+    displaySetService,
+    CornerstoneViewportService,
+    getValueTypeFromToolType
+  ) => {
+    const { annotation, viewportId } = csToolsEventDetail;
+    const { metadata, data, annotationUID } = annotation;
+
+    if (!metadata || !data) {
+      console.warn('Length tool: Missing metadata or data');
+      return null;
+    }
+
+    const { toolName, referencedImageId, FrameOfReferenceUID } = metadata;
+    const validToolType = SUPPORTED_TOOLS.includes(toolName);
+
+    if (!validToolType) {
+      throw new Error('Tool not supported');
+    }
+
+    const {
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      StudyInstanceUID,
+    } = getSOPInstanceAttributes(
+      referencedImageId,
+      CornerstoneViewportService,
+      viewportId
+    );
+
+    let displaySet;
+
+    if (SOPInstanceUID) {
+      displaySet = displaySetService.getDisplaySetForSOPInstanceUID(
+        SOPInstanceUID,
+        SeriesInstanceUID
+      );
+    } else {
+      displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
+    }
+
+    const { points } = data.handles;
+
+    const mappedAnnotations = getMappedAnnotations(
+      annotation,
+      displaySetService
+    );
+
+    const displayText = getDisplayText(mappedAnnotations, displaySet);
+    const getReport = () =>
+      _getReport(mappedAnnotations, points, FrameOfReferenceUID);
+
+    return {
+      uid: annotationUID,
+      SOPInstanceUID,
+      FrameOfReferenceUID,
+      points,
+      metadata,
+      referenceSeriesUID: SeriesInstanceUID,
+      referenceStudyUID: StudyInstanceUID,
+      frameNumber: mappedAnnotations?.[0]?.frameNumber || 1,
+      toolName: metadata.toolName,
+      displaySetInstanceUID: displaySet.displaySetInstanceUID,
+      label: data.label,
+      displayText: displayText,
+      data: data.cachedStats,
+      type: getValueTypeFromToolType(toolName),
+      getReport,
+    };
+  },
+};
+
+function getMappedAnnotations(annotation, DisplaySetService) {
+  const { metadata, data } = annotation;
+  const { cachedStats } = data;
+  const { referencedImageId } = metadata;
+  const targets = Object.keys(cachedStats);
+
+  if (!targets.length) {
+    return;
+  }
+
+  const annotations = [];
+  Object.keys(cachedStats).forEach(targetId => {
+    const targetStats = cachedStats[targetId];
+
+    if (!referencedImageId) {
+      throw new Error(
+        'Non-acquisition plane measurement mapping not supported'
+      );
+    }
+
+    const {
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      frameNumber,
+    } = getSOPInstanceAttributes(referencedImageId);
+
+    const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      frameNumber
+    );
+
+    const { SeriesNumber } = displaySet;
+    const { angle } = targetStats;
+    const unit = '\u00B0';
+
+    annotations.push({
+      SeriesInstanceUID,
+      SOPInstanceUID,
+      SeriesNumber,
+      frameNumber,
+      unit,
+      angle,
+    });
+  });
+
+  return annotations;
+}
+
+/*
+This function is used to convert the measurement data to a format that is
+suitable for the report generation (e.g. for the csv report). The report
+returns a list of columns and corresponding values.
+*/
+function _getReport(mappedAnnotations, points, FrameOfReferenceUID) {
+  const columns = [];
+  const values = [];
+
+  // Add Type
+  columns.push('AnnotationType');
+  values.push('Cornerstone:Angle');
+
+  mappedAnnotations.forEach(annotation => {
+    const { angle, unit } = annotation;
+    columns.push(`Angle (${unit})`);
+    values.push(angle);
+  });
+
+  if (FrameOfReferenceUID) {
+    columns.push('FrameOfReferenceUID');
+    values.push(FrameOfReferenceUID);
+  }
+
+  if (points) {
+    columns.push('points');
+    // points has the form of [[x1, y1, z1], [x2, y2, z2], ...]
+    // convert it to string of [[x1 y1 z1];[x2 y2 z2];...]
+    // so that it can be used in the csv report
+    values.push(points.map(p => p.join(' ')).join(';'));
+  }
+
+  return {
+    columns,
+    values,
+  };
+}
+
+function getDisplayText(mappedAnnotations, displaySet) {
+  if (!mappedAnnotations || !mappedAnnotations.length) {
+    return '';
+  }
+
+  const displayText = [];
+
+  // Area is the same for all series
+  const {
+    angle,
+    unit,
+    SeriesNumber,
+    SOPInstanceUID,
+    frameNumber,
+  } = mappedAnnotations[0];
+
+  const instance = displaySet.images.find(
+    image => image.SOPInstanceUID === SOPInstanceUID
+  );
+
+  let InstanceNumber;
+  if (instance) {
+    InstanceNumber = instance.InstanceNumber;
+  }
+
+  const instanceText = InstanceNumber ? ` I: ${InstanceNumber}` : '';
+  const frameText = displaySet.isMultiFrame ? ` F: ${frameNumber}` : '';
+  if (angle === undefined) return displayText;
+  const roundedAngle = utils.roundNumber(angle, 2);
+  displayText.push(
+    `${roundedAngle} ${unit} (S: ${SeriesNumber}${instanceText}${frameText})`
+  );
+
+  return displayText;
+}
+
+export default Angle;

extensions/cornerstone/src/utils/measurementServiceMappings/ArrowAnnotate.js

@@ -12,8 +12,8 @@ const Length = {
    */
   toMeasurement: (
     csToolsEventDetail,
-    DisplaySetService,
+    displaySetService,
-    CornerstoneViewportService,
+    cornerstoneViewportService,
     getValueTypeFromToolType
   ) => {
     const { annotation, viewportId } = csToolsEventDetail;
@@ -37,26 +37,26 @@ const Length = {
       StudyInstanceUID,
     } = getSOPInstanceAttributes(
       referencedImageId,
-      CornerstoneViewportService,
+      cornerstoneViewportService,
       viewportId
     );
 
     let displaySet;
 
     if (SOPInstanceUID) {
-      displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+      displaySet = displaySetService.getDisplaySetForSOPInstanceUID(
         SOPInstanceUID,
         SeriesInstanceUID
       );
     } else {
-      displaySet = DisplaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
+      displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
 
     const { points } = data.handles;
 
     const mappedAnnotations = getMappedAnnotations(
       annotation,
-      DisplaySetService
+      displaySetService
     );
 
     const displayText = getDisplayText(mappedAnnotations, displaySet);
@@ -84,7 +84,7 @@ const Length = {
   },
 };
 
-function getMappedAnnotations(annotation, DisplaySetService) {
+function getMappedAnnotations(annotation, displaySetService) {
   const { metadata, data } = annotation;
   const { text } = data;
   const { referencedImageId } = metadata;
@@ -97,7 +97,7 @@ function getMappedAnnotations(annotation, DisplaySetService) {
     frameNumber,
   } = getSOPInstanceAttributes(referencedImageId);
 
-  const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+  const displaySet = displaySetService.getDisplaySetForSOPInstanceUID(
     SOPInstanceUID,
     SeriesInstanceUID,
     frameNumber

extensions/cornerstone/src/utils/measurementServiceMappings/Bidirectional.js

@@ -8,8 +8,8 @@ const Bidirectional = {
   toAnnotation: measurement => {},
   toMeasurement: (
     csToolsEventDetail,
-    DisplaySetService,
+    displaySetService,
-    CornerstoneViewportService,
+    cornerstoneViewportService,
     getValueTypeFromToolType
   ) => {
     const { annotation, viewportId } = csToolsEventDetail;
@@ -33,26 +33,26 @@ const Bidirectional = {
       StudyInstanceUID,
     } = getSOPInstanceAttributes(
       referencedImageId,
-      CornerstoneViewportService,
+      cornerstoneViewportService,
       viewportId
     );
 
     let displaySet;
 
     if (SOPInstanceUID) {
-      displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+      displaySet = displaySetService.getDisplaySetForSOPInstanceUID(
         SOPInstanceUID,
         SeriesInstanceUID
       );
     } else {
-      displaySet = DisplaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
+      displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
 
     const { points } = data.handles;
 
     const mappedAnnotations = getMappedAnnotations(
       annotation,
-      DisplaySetService
+      displaySetService
     );
 
     const displayText = getDisplayText(mappedAnnotations, displaySet);
@@ -79,14 +79,14 @@ const Bidirectional = {
   },
 };
 
-function getMappedAnnotations(annotation, DisplaySetService) {
+function getMappedAnnotations(annotation, displaySetService) {
   const { metadata, data } = annotation;
   const { cachedStats } = data;
   const { referencedImageId, referencedSeriesInstanceUID } = metadata;
   const targets = Object.keys(cachedStats);
 
   if (!targets.length) {
-    return;
+    return [];
   }
 
   const annotations = [];
@@ -105,7 +105,7 @@ function getMappedAnnotations(annotation, DisplaySetService) {
       frameNumber,
     } = getSOPInstanceAttributes(referencedImageId);
 
-    const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+    const displaySet = displaySetService.getDisplaySetForSOPInstanceUID(
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber

extensions/cornerstone/src/utils/measurementServiceMappings/CobbAngle.ts

@@ -0,0 +1,210 @@
+import SUPPORTED_TOOLS from './constants/supportedTools';
+import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
+import { utils } from '@ohif/core';
+
+const CobbAngle = {
+  toAnnotation: measurement => { },
+
+  /**
+   * Maps cornerstone annotation event data to measurement service format.
+   *
+   * @param {Object} cornerstone Cornerstone event data
+   * @return {Measurement} Measurement instance
+   */
+  toMeasurement: (
+    csToolsEventDetail,
+    displaySetService,
+    CornerstoneViewportService,
+    getValueTypeFromToolType
+  ) => {
+    const { annotation, viewportId } = csToolsEventDetail;
+    const { metadata, data, annotationUID } = annotation;
+
+    if (!metadata || !data) {
+      console.warn('Cobb Angle tool: Missing metadata or data');
+      return null;
+    }
+
+    const { toolName, referencedImageId, FrameOfReferenceUID } = metadata;
+    const validToolType = SUPPORTED_TOOLS.includes(toolName);
+
+    if (!validToolType) {
+      throw new Error('Tool not supported');
+    }
+
+    const {
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      StudyInstanceUID,
+    } = getSOPInstanceAttributes(
+      referencedImageId,
+      CornerstoneViewportService,
+      viewportId
+    );
+
+    let displaySet;
+
+    if (SOPInstanceUID) {
+      displaySet = displaySetService.getDisplaySetForSOPInstanceUID(
+        SOPInstanceUID,
+        SeriesInstanceUID
+      );
+    } else {
+      displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
+    }
+
+    const { points } = data.handles;
+
+    const mappedAnnotations = getMappedAnnotations(
+      annotation,
+      displaySetService
+    );
+
+    const displayText = getDisplayText(mappedAnnotations, displaySet);
+    const getReport = () =>
+      _getReport(mappedAnnotations, points, FrameOfReferenceUID);
+
+    return {
+      uid: annotationUID,
+      SOPInstanceUID,
+      FrameOfReferenceUID,
+      points,
+      metadata,
+      referenceSeriesUID: SeriesInstanceUID,
+      referenceStudyUID: StudyInstanceUID,
+      frameNumber: mappedAnnotations?.[0]?.frameNumber || 1,
+      toolName: metadata.toolName,
+      displaySetInstanceUID: displaySet.displaySetInstanceUID,
+      label: data.label,
+      displayText: displayText,
+      data: data.cachedStats,
+      type: getValueTypeFromToolType(toolName),
+      getReport,
+    };
+  },
+};
+
+function getMappedAnnotations(annotation, DisplaySetService) {
+  const { metadata, data } = annotation;
+  const { cachedStats } = data;
+  const { referencedImageId } = metadata;
+  const targets = Object.keys(cachedStats);
+
+  if (!targets.length) {
+    return;
+  }
+
+  const annotations = [];
+  Object.keys(cachedStats).forEach(targetId => {
+    const targetStats = cachedStats[targetId];
+
+    if (!referencedImageId) {
+      throw new Error(
+        'Non-acquisition plane measurement mapping not supported'
+      );
+    }
+
+    const {
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      frameNumber,
+    } = getSOPInstanceAttributes(referencedImageId);
+
+    const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      frameNumber
+    );
+
+    const { SeriesNumber } = displaySet;
+    const { angle } = targetStats;
+    const unit = '\u00B0';
+
+    annotations.push({
+      SeriesInstanceUID,
+      SOPInstanceUID,
+      SeriesNumber,
+      frameNumber,
+      unit,
+      angle,
+    });
+  });
+
+  return annotations;
+}
+
+/*
+This function is used to convert the measurement data to a format that is
+suitable for the report generation (e.g. for the csv report). The report
+returns a list of columns and corresponding values.
+*/
+function _getReport(mappedAnnotations, points, FrameOfReferenceUID) {
+  const columns = [];
+  const values = [];
+
+  // Add Type
+  columns.push('AnnotationType');
+  values.push('Cornerstone:CobbAngle');
+
+  mappedAnnotations.forEach(annotation => {
+    const { angle, unit } = annotation;
+    columns.push(`Angle (${unit})`);
+    values.push(angle);
+  });
+
+  if (FrameOfReferenceUID) {
+    columns.push('FrameOfReferenceUID');
+    values.push(FrameOfReferenceUID);
+  }
+
+  if (points) {
+    columns.push('points');
+    // points has the form of [[x1, y1, z1], [x2, y2, z2], ...]
+    // convert it to string of [[x1 y1 z1];[x2 y2 z2];...]
+    // so that it can be used in the csv report
+    values.push(points.map(p => p.join(' ')).join(';'));
+  }
+
+  return {
+    columns,
+    values,
+  };
+}
+
+function getDisplayText(mappedAnnotations, displaySet) {
+  if (!mappedAnnotations || !mappedAnnotations.length) {
+    return '';
+  }
+
+  const displayText = [];
+
+  // Area is the same for all series
+  const {
+    angle,
+    unit,
+    SeriesNumber,
+    SOPInstanceUID,
+    frameNumber,
+  } = mappedAnnotations[0];
+
+  const instance = displaySet.images.find(
+    image => image.SOPInstanceUID === SOPInstanceUID
+  );
+
+  let InstanceNumber;
+  if (instance) {
+    InstanceNumber = instance.InstanceNumber;
+  }
+
+  const instanceText = InstanceNumber ? ` I: ${InstanceNumber}` : '';
+  const frameText = displaySet.isMultiFrame ? ` F: ${frameNumber}` : '';
+  if (angle === undefined) return displayText;
+  const roundedAngle = utils.roundNumber(angle, 2);
+  displayText.push(
+    `${roundedAngle} ${unit} (S: ${SeriesNumber}${instanceText}${frameText})`
+  );
+
+  return displayText;
+}
+
+export default CobbAngle;

extensions/cornerstone/src/utils/measurementServiceMappings/EllipticalROI.js

@@ -7,8 +7,8 @@ const EllipticalROI = {
   toAnnotation: measurement => {},
   toMeasurement: (
     csToolsEventDetail,
-    DisplaySetService,
+    displaySetService,
-    CornerstoneViewportService,
+    cornerstoneViewportService,
     getValueTypeFromToolType
   ) => {
     const { annotation, viewportId } = csToolsEventDetail;
@@ -32,26 +32,26 @@ const EllipticalROI = {
       StudyInstanceUID,
     } = getSOPInstanceAttributes(
       referencedImageId,
-      CornerstoneViewportService,
+      cornerstoneViewportService,
       viewportId
     );
 
     let displaySet;
 
     if (SOPInstanceUID) {
-      displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+      displaySet = displaySetService.getDisplaySetForSOPInstanceUID(
         SOPInstanceUID,
         SeriesInstanceUID
       );
     } else {
-      displaySet = DisplaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
+      displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
 
     const { points } = data.handles;
 
     const mappedAnnotations = getMappedAnnotations(
       annotation,
-      DisplaySetService
+      displaySetService
     );
 
     const displayText = getDisplayText(mappedAnnotations, displaySet);
@@ -78,14 +78,14 @@ const EllipticalROI = {
   },
 };
 
-function getMappedAnnotations(annotation, DisplaySetService) {
+function getMappedAnnotations(annotation, displaySetService) {
   const { metadata, data } = annotation;
   const { cachedStats } = data;
   const { referencedImageId } = metadata;
   const targets = Object.keys(cachedStats);
 
   if (!targets.length) {
-    return;
+    return [];
   }
 
   const annotations = [];
@@ -105,7 +105,7 @@ function getMappedAnnotations(annotation, DisplaySetService) {
       frameNumber,
     } = getSOPInstanceAttributes(referencedImageId);
 
-    const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+    const displaySet = displaySetService.getDisplaySetForSOPInstanceUID(
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber

extensions/cornerstone/src/utils/measurementServiceMappings/Length.js

@@ -1,6 +1,6 @@
 import SUPPORTED_TOOLS from './constants/supportedTools';
 import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
-import { DisplaySetService, utils } from '@ohif/core';
+import { displaySetService, utils } from '@ohif/core';
 
 const Length = {
   toAnnotation: measurement => {},
@@ -13,8 +13,8 @@ const Length = {
    */
   toMeasurement: (
     csToolsEventDetail,
-    DisplaySetService,
+    displaySetService,
-    CornerstoneViewportService,
+    cornerstoneViewportService,
     getValueTypeFromToolType
   ) => {
     const { annotation, viewportId } = csToolsEventDetail;
@@ -38,26 +38,26 @@ const Length = {
       StudyInstanceUID,
     } = getSOPInstanceAttributes(
       referencedImageId,
-      CornerstoneViewportService,
+      cornerstoneViewportService,
       viewportId
     );
 
     let displaySet;
 
     if (SOPInstanceUID) {
-      displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+      displaySet = displaySetService.getDisplaySetForSOPInstanceUID(
         SOPInstanceUID,
         SeriesInstanceUID
       );
     } else {
-      displaySet = DisplaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
+      displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
 
     const { points } = data.handles;
 
     const mappedAnnotations = getMappedAnnotations(
       annotation,
-      DisplaySetService
+      displaySetService
     );
 
     const displayText = getDisplayText(mappedAnnotations, displaySet);
@@ -84,14 +84,14 @@ const Length = {
   },
 };
 
-function getMappedAnnotations(annotation, DisplaySetService) {
+function getMappedAnnotations(annotation, displaySetService) {
   const { metadata, data } = annotation;
   const { cachedStats } = data;
   const { referencedImageId } = metadata;
   const targets = Object.keys(cachedStats);
 
   if (!targets.length) {
-    return;
+    return [];
   }
 
   const annotations = [];
@@ -110,7 +110,7 @@ function getMappedAnnotations(annotation, DisplaySetService) {
       frameNumber,
     } = getSOPInstanceAttributes(referencedImageId);
 
-    const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+    const displaySet = displaySetService.getDisplaySetForSOPInstanceUID(
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber

extensions/cornerstone/src/utils/measurementServiceMappings/PlanarFreehandROI.ts

@@ -0,0 +1,148 @@
+import SUPPORTED_TOOLS from './constants/supportedTools';
+import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
+
+const PlanarFreehandROI = {
+  toAnnotation: measurement => { },
+
+  /**
+   * Maps cornerstone annotation event data to measurement service format.
+   *
+   * @param {Object} cornerstone Cornerstone event data
+   * @return {Measurement} Measurement instance
+   */
+  toMeasurement: (
+    csToolsEventDetail,
+    DisplaySetService,
+    CornerstoneViewportService,
+    getValueTypeFromToolType
+  ) => {
+    const { annotation, viewportId } = csToolsEventDetail;
+    const { metadata, data, annotationUID } = annotation;
+
+    if (!metadata || !data) {
+      console.warn('PlanarFreehandROI tool: Missing metadata or data');
+      return null;
+    }
+
+    const { toolName, referencedImageId, FrameOfReferenceUID } = metadata;
+    const validToolType = SUPPORTED_TOOLS.includes(toolName);
+
+    if (!validToolType) {
+      throw new Error('Tool not supported');
+    }
+
+    const {
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      StudyInstanceUID,
+    } = getSOPInstanceAttributes(
+      referencedImageId,
+      CornerstoneViewportService,
+      viewportId
+    );
+
+    let displaySet;
+
+    if (SOPInstanceUID) {
+      displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+        SOPInstanceUID,
+        SeriesInstanceUID
+      );
+    } else {
+      displaySet = DisplaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
+    }
+
+    const { points } = data.handles;
+
+    const mappedAnnotations = getMappedAnnotations(
+      annotation,
+      DisplaySetService
+    );
+
+    const displayText = getDisplayText(mappedAnnotations);
+    const getReport = () =>
+      _getReport(mappedAnnotations, points, FrameOfReferenceUID);
+
+    return {
+      uid: annotationUID,
+      SOPInstanceUID,
+      FrameOfReferenceUID,
+      points,
+      metadata,
+      referenceSeriesUID: SeriesInstanceUID,
+      referenceStudyUID: StudyInstanceUID,
+      toolName: metadata.toolName,
+      displaySetInstanceUID: displaySet.displaySetInstanceUID,
+      label: data.label,
+      displayText: displayText,
+      data: { ...data, ...data.cachedStats },
+      type: getValueTypeFromToolType(toolName),
+      getReport,
+    };
+  },
+};
+
+/**
+ * It maps an imaging library annotation to a list of simplified annotation properties.
+ *
+ * @param {Object} annotationData
+ * @param {Object} DisplaySetService
+ * @returns
+ */
+function getMappedAnnotations(annotationData, DisplaySetService) {
+  const { metadata, data } = annotationData;
+  const { label } = data;
+  const { referencedImageId } = metadata;
+
+  const annotations = [];
+
+  const {
+    SOPInstanceUID: _SOPInstanceUID,
+    SeriesInstanceUID: _SeriesInstanceUID,
+  } = getSOPInstanceAttributes(referencedImageId) || {};
+
+  if (!_SOPInstanceUID || !_SeriesInstanceUID) {
+    return annotations;
+  }
+
+  const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+    _SOPInstanceUID,
+    _SeriesInstanceUID
+  );
+
+  const { SeriesNumber, SeriesInstanceUID } = displaySet;
+
+  annotations.push({
+    SeriesInstanceUID,
+    SeriesNumber,
+    label,
+    data,
+  });
+
+  return annotations;
+}
+
+/**
+ * TBD
+ * This function is used to convert the measurement data to a format that is suitable for the report generation (e.g. for the csv report).
+ * The report returns a list of columns and corresponding values.
+ * @param {*} mappedAnnotations
+ * @param {*} points
+ * @param {*} FrameOfReferenceUID
+ * @returns Object representing the report's content for this tool.
+ */
+function _getReport(mappedAnnotations, points, FrameOfReferenceUID) {
+  const columns = [];
+  const values = [];
+
+  return {
+    columns,
+    values,
+  };
+}
+
+function getDisplayText(mappedAnnotations) {
+  return '';
+}
+
+export default PlanarFreehandROI;

extensions/cornerstone/src/utils/measurementServiceMappings/RectangleROI.ts

@@ -0,0 +1,228 @@
+import SUPPORTED_TOOLS from './constants/supportedTools';
+import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
+import getModalityUnit from './utils/getModalityUnit';
+import { utils } from '@ohif/core';
+
+const RectangleROI = {
+  toAnnotation: measurement => { },
+  toMeasurement: (
+    csToolsEventDetail,
+    DisplaySetService,
+    CornerstoneViewportService,
+    getValueTypeFromToolType
+  ) => {
+    const { annotation, viewportId } = csToolsEventDetail;
+    const { metadata, data, annotationUID } = annotation;
+
+    if (!metadata || !data) {
+      console.warn('Rectangle ROI tool: Missing metadata or data');
+      return null;
+    }
+
+    const { toolName, referencedImageId, FrameOfReferenceUID } = metadata;
+    const validToolType = SUPPORTED_TOOLS.includes(toolName);
+
+    if (!validToolType) {
+      throw new Error('Tool not supported');
+    }
+
+    const {
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      StudyInstanceUID,
+    } = getSOPInstanceAttributes(
+      referencedImageId,
+      CornerstoneViewportService,
+      viewportId
+    );
+
+    let displaySet;
+
+    if (SOPInstanceUID) {
+      displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+        SOPInstanceUID,
+        SeriesInstanceUID
+      );
+    } else {
+      displaySet = DisplaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
+    }
+
+    const { points } = data.handles;
+
+    const mappedAnnotations = getMappedAnnotations(
+      annotation,
+      DisplaySetService
+    );
+
+    const displayText = getDisplayText(mappedAnnotations, displaySet);
+    const getReport = () =>
+      _getReport(mappedAnnotations, points, FrameOfReferenceUID);
+
+    return {
+      uid: annotationUID,
+      SOPInstanceUID,
+      FrameOfReferenceUID,
+      points,
+      metadata,
+      referenceSeriesUID: SeriesInstanceUID,
+      referenceStudyUID: StudyInstanceUID,
+      frameNumber: mappedAnnotations[0]?.frameNumber || 1,
+      toolName: metadata.toolName,
+      displaySetInstanceUID: displaySet.displaySetInstanceUID,
+      label: data.label,
+      displayText: displayText,
+      data: data.cachedStats,
+      type: getValueTypeFromToolType(toolName),
+      getReport,
+    };
+  },
+};
+
+function getMappedAnnotations(annotation, DisplaySetService) {
+  const { metadata, data } = annotation;
+  const { cachedStats } = data;
+  const { referencedImageId } = metadata;
+  const targets = Object.keys(cachedStats);
+
+  if (!targets.length) {
+    return [];
+  }
+
+  const annotations = [];
+  Object.keys(cachedStats).forEach(targetId => {
+    const targetStats = cachedStats[targetId];
+
+    if (!referencedImageId) {
+      // Todo: Non-acquisition plane measurement mapping not supported yet
+      throw new Error(
+        'Non-acquisition plane measurement mapping not supported'
+      );
+    }
+
+    const {
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      frameNumber,
+    } = getSOPInstanceAttributes(referencedImageId);
+
+    const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      frameNumber
+    );
+
+    const { SeriesNumber } = displaySet;
+    const { mean, stdDev, max, area, Modality } = targetStats;
+    const unit = getModalityUnit(Modality);
+
+    annotations.push({
+      SeriesInstanceUID,
+      SOPInstanceUID,
+      SeriesNumber,
+      frameNumber,
+      Modality,
+      unit,
+      mean,
+      stdDev,
+      max,
+      area,
+    });
+  });
+
+  return annotations;
+}
+
+/*
+This function is used to convert the measurement data to a format that is
+suitable for the report generation (e.g. for the csv report). The report
+returns a list of columns and corresponding values.
+*/
+function _getReport(mappedAnnotations, points, FrameOfReferenceUID) {
+  const columns = [];
+  const values = [];
+
+  // Add Type
+  columns.push('AnnotationType');
+  values.push('Cornerstone:EllipticalROI');
+
+  mappedAnnotations.forEach(annotation => {
+    const { mean, stdDev, max, area, unit } = annotation;
+
+    if (!mean || !unit || !max || !area) {
+      return;
+    }
+
+    columns.push(
+      `max (${unit})`,
+      `mean (${unit})`,
+      `std (${unit})`,
+      `area (mm2)`
+    );
+    values.push(max, mean, stdDev, area);
+  });
+
+  if (FrameOfReferenceUID) {
+    columns.push('FrameOfReferenceUID');
+    values.push(FrameOfReferenceUID);
+  }
+
+  if (points) {
+    columns.push('points');
+    // points has the form of [[x1, y1, z1], [x2, y2, z2], ...]
+    // convert it to string of [[x1 y1 z1];[x2 y2 z2];...]
+    // so that it can be used in the csv report
+    values.push(points.map(p => p.join(' ')).join(';'));
+  }
+
+  return {
+    columns,
+    values,
+  };
+}
+
+function getDisplayText(mappedAnnotations, displaySet) {
+  if (!mappedAnnotations || !mappedAnnotations.length) {
+    return '';
+  }
+
+  const displayText = [];
+
+  // Area is the same for all series
+  const { area, SOPInstanceUID, frameNumber } = mappedAnnotations[0];
+
+  const instance = displaySet.images.find(
+    image => image.SOPInstanceUID === SOPInstanceUID
+  );
+
+  let InstanceNumber;
+  if (instance) {
+    InstanceNumber = instance.InstanceNumber;
+  }
+
+  const instanceText = InstanceNumber ? ` I: ${InstanceNumber}` : '';
+  const frameText = displaySet.isMultiFrame ? ` F: ${frameNumber}` : '';
+
+  // Area sometimes becomes undefined if `preventHandleOutsideImage` is off.
+  const roundedArea = utils.roundNumber(area || 0, 2);
+  displayText.push(`${roundedArea} mm<sup>2</sup>`);
+
+  // Todo: we need a better UI for displaying all these information
+  mappedAnnotations.forEach(mappedAnnotation => {
+    const { unit, max, SeriesNumber } = mappedAnnotation;
+
+    let maxStr = '';
+    if (max) {
+      const roundedMax = utils.roundNumber(max, 2);
+      maxStr = `Max: ${roundedMax} <small>${unit}</small> `;
+    }
+
+    const str = `${maxStr}(S:${SeriesNumber}${instanceText}${frameText})`;
+    if (!displayText.includes(str)) {
+      displayText.push(str);
+    }
+  });
+
+  return displayText;
+}
+
+export default RectangleROI;

extensions/cornerstone/src/utils/measurementServiceMappings/constants/supportedTools.js

@@ -1 +1,11 @@
-export default ['Length', 'EllipticalROI', 'Bidirectional', 'ArrowAnnotate'];
+export default [
+  'Length',
+  'EllipticalROI',
+  'Bidirectional',
+  'ArrowAnnotate',
+  'Angle',
+  'CobbAngle',
+  'Probe',
+  'RectangleROI',
+  'PlanarFreehandROI',
+];

extensions/cornerstone/src/utils/measurementServiceMappings/index.ts

@@ -0,0 +1,3 @@
+import * as measurementMappingUtils from './utils';
+
+export { measurementMappingUtils };

extensions/cornerstone/src/utils/measurementServiceMappings/measurementServiceMappingsFactory.ts

@@ -1,19 +1,24 @@
+import { MeasurementService } from '@ohif/core';
 import Length from './Length';
 import Bidirectional from './Bidirectional';
 import EllipticalROI from './EllipticalROI';
 import ArrowAnnotate from './ArrowAnnotate';
+import CobbAngle from './CobbAngle';
+import Angle from './Angle';
+import PlanarFreehandROI from './PlanarFreehandROI';
+import RectangleROI from './RectangleROI';
 
 const measurementServiceMappingsFactory = (
-  MeasurementService,
+  measurementService: MeasurementService,
-  DisplaySetService,
+  displaySetService,
-  CornerstoneViewportService
+  cornerstoneViewportService
 ) => {
   /**
    * Maps measurement service format object to cornerstone annotation object.
    *
-   * @param {Measurement} measurement The measurement instance
+   * @param measurement The measurement instance
-   * @param {string} definition The source definition
+   * @param definition The source definition
-   * @return {Object} Cornerstone annotation data
+   * @return Cornerstone annotation data
    */
 
   const _getValueTypeFromToolType = toolType => {
@@ -23,6 +28,7 @@ const measurementServiceMappingsFactory = (
       RECTANGLE,
       BIDIRECTIONAL,
       POINT,
+      ANGLE,
     } = MeasurementService.VALUE_TYPES;
 
     // TODO -> I get why this was attempted, but its not nearly flexible enough.
@@ -32,21 +38,24 @@ const measurementServiceMappingsFactory = (
       Length: POLYLINE,
       EllipticalROI: ELLIPSE,
       RectangleROI: RECTANGLE,
+      PlanarFreehandROI: POLYLINE,
       Bidirectional: BIDIRECTIONAL,
       ArrowAnnotate: POINT,
+      CobbAngle: ANGLE,
+      Angle: ANGLE,
     };
 
     return TOOL_TYPE_TO_VALUE_TYPE[toolType];
   };
 
-  return {
+  const factories = {
     Length: {
       toAnnotation: Length.toAnnotation,
       toMeasurement: csToolsAnnotation =>
         Length.toMeasurement(
           csToolsAnnotation,
-          DisplaySetService,
+          displaySetService,
-          CornerstoneViewportService,
+          cornerstoneViewportService,
           _getValueTypeFromToolType
         ),
       matchingCriteria: [
@@ -61,8 +70,8 @@ const measurementServiceMappingsFactory = (
       toMeasurement: csToolsAnnotation =>
         Bidirectional.toMeasurement(
           csToolsAnnotation,
-          DisplaySetService,
+          displaySetService,
-          CornerstoneViewportService,
+          cornerstoneViewportService,
           _getValueTypeFromToolType
         ),
       matchingCriteria: [
@@ -78,13 +87,14 @@ const measurementServiceMappingsFactory = (
         },
       ],
     },
+
     EllipticalROI: {
       toAnnotation: EllipticalROI.toAnnotation,
       toMeasurement: csToolsAnnotation =>
         EllipticalROI.toMeasurement(
           csToolsAnnotation,
-          DisplaySetService,
+          displaySetService,
-          CornerstoneViewportService,
+          cornerstoneViewportService,
           _getValueTypeFromToolType
         ),
       matchingCriteria: [
@@ -93,13 +103,46 @@ const measurementServiceMappingsFactory = (
         },
       ],
     },
+
+    RectangleROI: {
+      toAnnotation: RectangleROI.toAnnotation,
+      toMeasurement: csToolsAnnotation =>
+        RectangleROI.toMeasurement(
+          csToolsAnnotation,
+          displaySetService,
+          cornerstoneViewportService,
+          _getValueTypeFromToolType
+        ),
+      matchingCriteria: [
+        {
+          valueType: MeasurementService.VALUE_TYPES.POLYLINE,
+        },
+      ],
+    },
+
+    PlanarFreehandROI: {
+      toAnnotation: PlanarFreehandROI.toAnnotation,
+      toMeasurement: csToolsAnnotation =>
+        PlanarFreehandROI.toMeasurement(
+          csToolsAnnotation,
+          displaySetService,
+          cornerstoneViewportService,
+          _getValueTypeFromToolType
+        ),
+      matchingCriteria: [
+        {
+          valueType: MeasurementService.VALUE_TYPES.POLYLINE,
+        },
+      ],
+    },
+
     ArrowAnnotate: {
       toAnnotation: ArrowAnnotate.toAnnotation,
       toMeasurement: csToolsAnnotation =>
         ArrowAnnotate.toMeasurement(
           csToolsAnnotation,
-          DisplaySetService,
+          displaySetService,
-          CornerstoneViewportService,
+          cornerstoneViewportService,
           _getValueTypeFromToolType
         ),
       matchingCriteria: [
@@ -109,7 +152,41 @@ const measurementServiceMappingsFactory = (
         },
       ],
     },
+
+    CobbAngle: {
+      toAnnotation: CobbAngle.toAnnotation,
+      toMeasurement: csToolsAnnotation =>
+        CobbAngle.toMeasurement(
+          csToolsAnnotation,
+          displaySetService,
+          cornerstoneViewportService,
+          _getValueTypeFromToolType
+        ),
+      matchingCriteria: [
+        {
+          valueType: MeasurementService.VALUE_TYPES.ANGLE,
+        },
+      ],
+    },
+
+    Angle: {
+      toAnnotation: Angle.toAnnotation,
+      toMeasurement: csToolsAnnotation =>
+        Angle.toMeasurement(
+          csToolsAnnotation,
+          displaySetService,
+          cornerstoneViewportService,
+          _getValueTypeFromToolType
+        ),
+      matchingCriteria: [
+        {
+          valueType: MeasurementService.VALUE_TYPES.ANGLE,
+        },
+      ],
+    },
   };
+
+  return factories;
 };
 
 export default measurementServiceMappingsFactory;

extensions/cornerstone/src/utils/measurementServiceMappings/utils/getSOPInstanceAttributes.js

@@ -13,7 +13,7 @@ import * as cornerstone from '@cornerstonejs/core';
  */
 export default function getSOPInstanceAttributes(
   imageId,
-  CornerstoneViewportService,
+  cornerstoneViewportService,
   viewportId
 ) {
   if (imageId) {
@@ -23,7 +23,7 @@ export default function getSOPInstanceAttributes(
   // Todo: implement for volume viewports and use the referencedSeriesInstanceUID
 
   // if no imageId => measurement is not in the acquisition plane
-  // const metadata = getUIDFromScene(CornerstoneViewportService, viewportId);
+  // const metadata = getUIDFromScene(cornerstoneViewportService, viewportId);
 
   // if (!metadata) {
   //   throw new Error('Not viewport with imageId found');
@@ -49,8 +49,8 @@ function _getUIDFromImageID(imageId) {
   };
 }
 
-// function getUIDFromScene(CornerstoneViewportService) {
+// function getUIDFromScene(cornerstoneViewportService) {
-//   const renderingEngine = CornerstoneViewportService.getRenderingEngine();
+//   const renderingEngine = cornerstoneViewportService.getRenderingEngine();
 //   const scene = renderingEngine.getScene(sceneUID);
 
 //   const viewportUIDs = scene.getViewportIds();

extensions/cornerstone/src/utils/measurementServiceMappings/utils/index.ts

@@ -0,0 +1,17 @@
+import getHandlesFromPoints from './getHandlesFromPoints';
+import {
+  isAnnotationSelected,
+  setAnnotationSelected,
+  getFirstAnnotationSelected,
+} from './selection';
+import getModalityUnit from './getModalityUnit';
+import getSOPInstanceAttributes from './getSOPInstanceAttributes';
+
+export {
+  getModalityUnit,
+  getHandlesFromPoints,
+  getSOPInstanceAttributes,
+  isAnnotationSelected,
+  setAnnotationSelected,
+  getFirstAnnotationSelected,
+};

extensions/cornerstone/src/utils/measurementServiceMappings/utils/selection.ts

@@ -0,0 +1,41 @@
+import { annotation as cs3dToolAnnotationUtils } from '@cornerstonejs/tools';
+
+/**
+ * Check whether an annotation from imaging library is selected or not.
+ * @param {string} annotationUID uid of imaging library annotation
+ * @returns boolean
+ */
+function isAnnotationSelected(annotationUID: string): boolean {
+  return cs3dToolAnnotationUtils.selection.isAnnotationSelected(annotationUID);
+}
+
+/**
+ * Change an annotation from imaging library's selected property.
+ * @param annotationUID - uid of imaging library annotation
+ * @param selected - new value for selected
+ */
+function setAnnotationSelected(annotationUID: string, selected: boolean): void {
+  const isCurrentSelected = isAnnotationSelected(annotationUID);
+  // branch cut, avoid invoking imaging library unnecessarily.
+  if (isCurrentSelected !== selected) {
+    cs3dToolAnnotationUtils.selection.setAnnotationSelected(
+      annotationUID,
+      selected
+    );
+  }
+}
+
+function getFirstAnnotationSelected(element) {
+  const [selectedAnnotationUID] =
+    cs3dToolAnnotationUtils.selection.getAnnotationsSelected() || [];
+
+  if (selectedAnnotationUID) {
+    return cs3dToolAnnotationUtils.state.getAnnotation(selectedAnnotationUID);
+  }
+}
+
+export {
+  isAnnotationSelected,
+  setAnnotationSelected,
+  getFirstAnnotationSelected,
+};

extensions/cornerstone/src/utils/mpr/toggleMPRHangingProtocol.ts

@@ -39,34 +39,39 @@ export default function toggleMPRHangingProtocol({
   getToolGroup,
 }) {
   const {
-    UINotificationService,
+    uiNotificationService,
-    HangingProtocolService,
+    hangingProtocolService,
-    ViewportGridService,
+    viewportGridService,
-    ToolBarService,
+    toolbarService,
   } = servicesManager.services;
 
+  // TODO Introduce a service to persist the state of the current hanging protocol/app.
+  // So all of the code to persist the state here will no longer be needed. Perhaps
+  // just the id of the current hanging protocol to toggle MPR off is needed.
+
   const {
     activeViewportIndex,
     viewports,
     numRows,
     numCols,
-  } = ViewportGridService.getState();
+  } = viewportGridService.getState();
   const viewportDisplaySetInstanceUIDs =
     viewports[activeViewportIndex].displaySetInstanceUIDs;
 
-  const errorCallback = error => {
+  // What is the current active protocol and stage number to restore later
-    UINotificationService.show({
+  const { protocol, stage } = hangingProtocolService.getActiveProtocol();
+
+  const restoreErrorCallback = error => {
+    console.error(error);
+    uiNotificationService.show({
       title: 'Multiplanar reconstruction (MPR) ',
       message:
-        'Cannot create MPR for this DisplaySet since it is not reconstructable.',
+        'Something went wrong while trying to restore the previous layout.',
       type: 'info',
       duration: 3000,
     });
   };
 
-  // What is the current active protocol and stage number to restore later
-  const { protocol, stage } = HangingProtocolService.getActiveProtocol();
-
   if (toggledState) {
     resetCachedState();
 
@@ -98,7 +103,24 @@ export default function toggleMPRHangingProtocol({
       getToolGroup
     );
 
-    HangingProtocolService.setProtocol(
+    const errorCallback = error => {
+      // Unable to create MPR, so be sure to return to the cached/original protocol.
+      hangingProtocolService.setProtocol(
+        cachedState.protocol.id,
+        viewportMatchDetails,
+        restoreErrorCallback
+      );
+
+      uiNotificationService.show({
+        title: 'Multiplanar reconstruction (MPR) ',
+        message:
+          'Cannot create MPR for this DisplaySet since it is not reconstructable.',
+        type: 'info',
+        duration: 3000,
+      });
+    };
+
+    hangingProtocolService.setProtocol(
       MPR_TOOLGROUP_ID,
       matchDetails,
       errorCallback
@@ -106,16 +128,6 @@ export default function toggleMPRHangingProtocol({
     return;
   }
 
-  const restoreErrorCallback = error => {
-    UINotificationService.show({
-      title: 'Multiplanar reconstruction (MPR) ',
-      message:
-        'Something went wrong while trying to restore the previous layout.',
-      type: 'info',
-      duration: 3000,
-    });
-  };
-
   _disableCrosshairs([MPR_TOOLGROUP_ID], getToolGroup);
 
   const { layoutType, properties } = cachedState.viewportStructure;
@@ -126,7 +138,7 @@ export default function toggleMPRHangingProtocol({
   // cached protocol and stage. However, for the default protocol, we need
   // to also apply the layout type and properties.
   if (cachedState.protocol.id !== 'default') {
-    HangingProtocolService.setProtocol(
+    hangingProtocolService.setProtocol(
       cachedState.protocol.id,
       viewportMatchDetails,
       restoreErrorCallback
@@ -135,14 +147,14 @@ export default function toggleMPRHangingProtocol({
     return;
   }
 
-  HangingProtocolService.setProtocol(
+  hangingProtocolService.setProtocol(
     'default',
     viewportMatchDetails,
     restoreErrorCallback
   );
 
   if (numRows !== properties.rows || numCols !== properties.columns) {
-    ViewportGridService.setLayout({
+    viewportGridService.setLayout({
       numRows: properties.rows,
       numCols: properties.columns,
       layoutType,
@@ -165,7 +177,7 @@ export default function toggleMPRHangingProtocol({
         viewportOptions,
         displaySetsInfo,
       } = viewportMatchDetailsForViewport;
-      ViewportGridService.setDisplaySetsForViewport({
+      viewportGridService.setDisplaySetsForViewport({
         viewportIndex,
         displaySetInstanceUIDs: displaySetsInfo.map(
           displaySetInfo => displaySetInfo.displaySetInstanceUID
@@ -173,7 +185,7 @@ export default function toggleMPRHangingProtocol({
         viewportOptions,
       });
     } else {
-      ViewportGridService.setDisplaySetsForViewport({
+      viewportGridService.setDisplaySetsForViewport({
         viewportIndex,
         displaySetInstanceUIDs: [],
         viewportOptions: {},
@@ -181,7 +193,7 @@ export default function toggleMPRHangingProtocol({
     }
   });
 
-  ToolBarService.recordInteraction({
+  toolbarService.recordInteraction({
     groupId: 'WindowLevel',
     itemId: 'WindowLevel',
     interactionType: 'tool',
@@ -213,15 +225,15 @@ function _disableCrosshairs(toolGroupIds, getToolGroup) {
 
 function _getViewportsInfo({ protocol, stage, viewports, servicesManager }) {
   // here we need to use the viewports and try to map it into the
-  // viewportMatchDetails and displaySetMatch that HangingProtocolService
+  // viewportMatchDetails and displaySetMatch that hangingProtocolService
   // expects
   const {
-    ViewportGridService,
+    viewportGridService,
-    HangingProtocolService,
+    hangingProtocolService,
-    ToolGroupService,
+    toolGroupService,
   } = servicesManager.services;
 
-  const { numRows, numCols } = ViewportGridService.getState();
+  const { numRows, numCols } = viewportGridService.getState();
 
   let viewportMatchDetails = new Map();
 
@@ -257,7 +269,7 @@ function _getViewportsInfo({ protocol, stage, viewports, servicesManager }) {
       }
     });
   } else {
-    ({ viewportMatchDetails } = HangingProtocolService.getMatchDetails());
+    ({ viewportMatchDetails } = hangingProtocolService.getMatchDetails());
   }
 
   // get the toolGroup state for viewports
@@ -272,13 +284,17 @@ function _getViewportsInfo({ protocol, stage, viewports, servicesManager }) {
     .filter(Boolean);
 
   if (viewportIds.length) {
-    toolOptions = viewportIds.map(viewportId => {
+    toolOptions = viewportIds
-      const toolGroup = ToolGroupService.getToolGroupForViewport(viewportId);
+      .map(viewportId => {
-      return {
+        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
-        toolGroupId: toolGroup.id,
+        return toolGroup
-        toolOptions: toolGroup.toolOptions,
+          ? {
-      };
+              toolGroupId: toolGroup.id,
-    });
+              toolOptions: toolGroup.toolOptions,
+            }
+          : null;
+      })
+      .filter(Boolean);
   }
 
   return { viewportMatchDetails, viewportStructure, toolOptions };

extensions/cornerstone/src/utils/nthLoader.ts

@@ -0,0 +1,121 @@
+import { cache, imageLoadPoolManager, Enums } from '@cornerstonejs/core';
+import getNthFrames from './getNthFrames';
+import interleave from './interleave';
+
+// Map of volumeId and SeriesInstanceId
+const volumeIdMapsToLoad = new Map<string, string>();
+const viewportIdVolumeInputArrayMap = new Map<string, unknown[]>();
+
+/**
+ * This function caches the volumeUIDs until all the volumes inside the
+ * hanging protocol are initialized. Then it goes through the requests and
+ * chooses a sub-selection starting the the first few objects, center objects
+ * and last objects, and then the remaining nth images until all instances are
+ * retrieved.  This causes the image to have a progressive load order and looks
+ * visually much better.
+ * @param {Object} props image loading properties from Cornerstone ViewportService
+ */
+export default function interleaveNthLoader({
+  data: { viewportId, volumeInputArray },
+  displaySetsMatchDetails,
+  viewportMatchDetails: matchDetails,
+}) {
+  viewportIdVolumeInputArrayMap.set(viewportId, volumeInputArray);
+
+  // Based on the volumeInputs store the volumeIds and SeriesInstanceIds
+  // to keep track of the volumes being loaded
+  for (const volumeInput of volumeInputArray) {
+    const { volumeId } = volumeInput;
+    const volume = cache.getVolume(volumeId);
+
+    if (!volume) {
+      return;
+    }
+
+    // if the volumeUID is not in the volumeUIDs array, add it
+    if (!volumeIdMapsToLoad.has(volumeId)) {
+      const { metadata } = volume;
+      volumeIdMapsToLoad.set(volumeId, metadata.SeriesInstanceUID);
+    }
+  }
+
+  /**
+   * The following is checking if all the viewports that were matched in the HP has been
+   * successfully created their cornerstone viewport or not. Todo: This can be
+   * improved by not checking it, and as soon as the matched DisplaySets have their
+   * volume loaded, we start the loading, but that comes at the cost of viewports
+   * not being created yet (e.g., in a 10 viewport ptCT fusion, when one ct viewport and one
+   * pt viewport are created we have a guarantee that the volumes are created in the cache
+   * but the rest of the viewports (fusion, mip etc.) are not created yet. So
+   * we can't initiate setting the volumes for those viewports. One solution can be
+   * to add an event when a viewport is created (not enabled element event) and then
+   * listen to it and as the other viewports are created we can set the volumes for them
+   * since volumes are already started loading.
+   */
+  if (matchDetails.size !== viewportIdVolumeInputArrayMap.size) {
+    return;
+  }
+
+  // Check if all the matched volumes are loaded
+  for (const [_, details] of displaySetsMatchDetails.entries()) {
+    const { SeriesInstanceUID } = details;
+
+    // HangingProtocol has matched, but don't have all the volumes created yet, so return
+    if (!Array.from(volumeIdMapsToLoad.values()).includes(SeriesInstanceUID)) {
+      return;
+    }
+  }
+
+  const volumeIds = Array.from(volumeIdMapsToLoad.keys()).slice();
+  // get volumes from cache
+  const volumes = volumeIds.map(volumeId => {
+    return cache.getVolume(volumeId);
+  });
+
+  // iterate over all volumes, and get their imageIds, and interleave
+  // the imageIds and save them in AllRequests for later use
+  const originalRequests = volumes
+    .map(volume => volume.getImageLoadRequests())
+    .filter(requests => requests?.[0]?.imageId);
+
+  const orderedRequests = originalRequests.map(request =>
+    getNthFrames(request)
+  );
+
+  // set the finalRequests to the imageLoadPoolManager
+  const finalRequests = interleave(orderedRequests);
+
+  const requestType = Enums.RequestType.Prefetch;
+  const priority = 0;
+
+  finalRequests.forEach(
+    ({ callLoadImage, additionalDetails, imageId, imageIdIndex, options }) => {
+      const callLoadImageBound = callLoadImage.bind(
+        null,
+        imageId,
+        imageIdIndex,
+        options
+      );
+
+      imageLoadPoolManager.addRequest(
+        callLoadImageBound,
+        requestType,
+        additionalDetails,
+        priority
+      );
+    }
+  );
+
+  // clear the volumeIdMapsToLoad
+  volumeIdMapsToLoad.clear();
+
+  // copy the viewportIdVolumeInputArrayMap
+  const viewportIdVolumeInputArrayMapCopy = new Map(
+    viewportIdVolumeInputArrayMap
+  );
+
+  // reset the viewportIdVolumeInputArrayMap
+  viewportIdVolumeInputArrayMap.clear();
+
+  return viewportIdVolumeInputArrayMapCopy;
+}

extensions/cornerstone/src/utils/stackSync/toggleStackImageSync.ts

@@ -12,10 +12,10 @@ export default function toggleStackImageSync({
   getEnabledElement,
 }) {
   const {
-    SyncGroupService,
+    syncGroupService,
-    ViewportGridService,
+    viewportGridService,
-    DisplaySetService,
+    displaySetService,
-    CornerstoneViewportService,
+    cornerstoneViewportService,
   } = servicesManager.services;
 
   if (!toggledState) {
@@ -23,7 +23,7 @@ export default function toggleStackImageSync({
       const { viewports, synchronizerId } = syncGroupInfo;
 
       viewports.forEach(({ viewportId, renderingEngineId }) => {
-        SyncGroupService.removeViewportFromSyncGroup(
+        syncGroupService.removeViewportFromSyncGroup(
           viewportId,
           renderingEngineId,
           synchronizerId
@@ -37,7 +37,7 @@ export default function toggleStackImageSync({
   STACK_IMAGE_SYNC_GROUPS_INFO = [];
 
   // create synchronization groups and add viewports
-  let { viewports } = ViewportGridService.getState();
+  let { viewports } = viewportGridService.getState();
 
   // filter empty viewports
   viewports = viewports.filter(
@@ -50,7 +50,7 @@ export default function toggleStackImageSync({
     const { displaySetInstanceUIDs } = viewport;
 
     for (const displaySetInstanceUID of displaySetInstanceUIDs) {
-      const displaySet = DisplaySetService.getDisplaySetByUID(
+      const displaySet = displaySetService.getDisplaySetByUID(
         displaySetInstanceUID
       );
 
@@ -70,7 +70,7 @@ export default function toggleStackImageSync({
       return acc;
     }
 
-    const { element } = CornerstoneViewportService.getViewportInfo(viewportId);
+    const { element } = cornerstoneViewportService.getViewportInfo(viewportId);
     const { viewport: csViewport, renderingEngineId } = getEnabledElement(
       element
     );
@@ -99,7 +99,7 @@ export default function toggleStackImageSync({
     calculateViewportRegistrations(viewports);
 
     viewports.forEach(({ viewportId, renderingEngineId }) => {
-      SyncGroupService.addViewportToSyncGroup(viewportId, renderingEngineId, {
+      syncGroupService.addViewportToSyncGroup(viewportId, renderingEngineId, {
         type: 'stackimage',
         id: synchronizerId,
         source: true,

extensions/default/package.json

@@ -32,8 +32,8 @@
   "peerDependencies": {
     "@ohif/core": "^3.0.0",
     "@ohif/i18n": "^1.0.0",
-    "dcmjs": "^0.28.3",
+    "dcmjs": "^0.29.4",
-    "dicomweb-client": "^0.6.0",
+    "dicomweb-client": "^0.8.4",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -42,7 +42,7 @@
     "webpack-merge": "^5.7.3"
   },
   "dependencies": {
-    "@babel/runtime": "7.16.3",
+    "@babel/runtime": "^7.20.13",
     "@cornerstonejs/calculate-suv": "^1.0.3"
   }
 }

extensions/default/src/Actions/createReportAsync.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { DicomMetadataStore } from '@ohif/core';
+
+/**
+ *
+ * @param {*} servicesManager
+ * @param {*} dataSource
+ * @param {*} measurements
+ * @param {*} options
+ * @returns {string[]} displaySetInstanceUIDs
+ */
+async function createReportAsync(
+  servicesManager,
+  commandsManager,
+  dataSource,
+  measurements,
+  options
+) {
+  const {
+    displaySetService,
+    uiNotificationService,
+    uiDialogService,
+  } = servicesManager.services;
+  const loadingDialogId = uiDialogService.create({
+    showOverlay: true,
+    isDraggable: false,
+    centralize: true,
+    // TODO: Create a loading indicator component + zeplin design?
+    content: Loading,
+  });
+
+  try {
+    const naturalizedReport = await commandsManager.runCommand(
+      'storeMeasurements',
+      {
+        measurementData: measurements,
+        dataSource,
+        additionalFindingTypes: ['ArrowAnnotate'],
+        options,
+      },
+      'CORNERSTONE_STRUCTURED_REPORT'
+    );
+
+    // The "Mode" route listens for DicomMetadataStore changes
+    // When a new instance is added, it listens and
+    // automatically calls makeDisplaySets
+    DicomMetadataStore.addInstances([naturalizedReport], true);
+
+    const displaySetInstanceUID = displaySetService.getMostRecentDisplaySet();
+
+    uiNotificationService.show({
+      title: 'Create Report',
+      message: 'Measurements saved successfully',
+      type: 'success',
+    });
+
+    return [displaySetInstanceUID];
+  } catch (error) {
+    uiNotificationService.show({
+      title: 'Create Report',
+      message: error.message || 'Failed to store measurements',
+      type: 'error',
+    });
+  } finally {
+    uiDialogService.dismiss({ id: loadingDialogId });
+  }
+}
+
+function Loading() {
+  return <div className="text-primary-active">Loading...</div>;
+}
+
+export default createReportAsync;

extensions/default/src/DicomJSONDataSource/index.js

@@ -206,8 +206,10 @@ function createDicomJSONApi(dicomJsonConfig) {
                 url: instance.url,
                 imageId: instance.url,
                 ...series,
+                ...study,
               };
               delete obj.instances;
+              delete obj.series;
               return obj;
             });
             storeInstances(instances);

extensions/default/src/DicomLocalDataSource/index.js

@@ -5,19 +5,37 @@ import dcmjs from 'dcmjs';
 const metadataProvider = OHIF.classes.MetadataProvider;
 const { EVENTS } = DicomMetadataStore;
 
-// Sorting SR modalities to be at the end of series list
+const END_MODALITIES = {
-function customSort(seriesA, seriesB) {
+  SR: true,
-  const modalityA = seriesA.instances[0].Modality;
+  SEG: true,
-  const modalityB = seriesB.instances[0].Modality;
+  DOC: true,
+};
 
-  if (modalityA === 'SR') {
+const compareValue = (v1, v2, def = 0) => {
-    return +1;
+  if (v1 === v2) return def;
+  if (v1 < v2) return -1;
+  return 1;
+};
+
+// Sorting SR modalities to be at the end of series list
+const customSort = (seriesA, seriesB) => {
+  const instanceA = seriesA.instances[0];
+  const instanceB = seriesB.instances[0];
+  const modalityA = instanceA.Modality;
+  const modalityB = instanceB.Modality;
+
+  const isEndA = END_MODALITIES[modalityA];
+  const isEndB = END_MODALITIES[modalityB];
+
+  if (isEndA && isEndB) {
+    // Compare by series date
+    return compareValue(instanceA.SeriesNumber, instanceB.SeriesNumber);
   }
-  if (modalityB === 'SR') {
+  if (!isEndA && !isEndB) {
-    return -1;
+    return compareValue(instanceB.SeriesNumber, instanceA.SeriesNumber);
   }
-  return 0;
+  return isEndA ? -1 : 1;
-}
+};
 
 function createDicomLocalApi(dicomLocalConfig) {
   const { name } = dicomLocalConfig;

extensions/default/src/DicomWebDataSource/index.js

@@ -49,7 +49,7 @@ const metadataProvider = classes.MetadataProvider;
  * @param {bool} lazyLoadStudy - "enableStudyLazyLoad"; Request series meta async instead of blocking
  * @param {string|bool} singlepart - indicates of the retrieves can fetch singlepart.  Options are bulkdata, video, image or boolean true
  */
-function createDicomWebApi(dicomWebConfig, UserAuthenticationService) {
+function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
   const {
     qidoRoot,
     wadoRoot,
@@ -65,7 +65,7 @@ function createDicomWebApi(dicomWebConfig, UserAuthenticationService) {
     url: qidoRoot,
     staticWado,
     singlepart,
-    headers: UserAuthenticationService.getAuthorizationHeader(),
+    headers: userAuthenticationService.getAuthorizationHeader(),
     errorInterceptor: errorHandler.getHTTPErrorHandler(),
   };
 
@@ -73,7 +73,7 @@ function createDicomWebApi(dicomWebConfig, UserAuthenticationService) {
     url: wadoRoot,
     staticWado,
     singlepart,
-    headers: UserAuthenticationService.getAuthorizationHeader(),
+    headers: userAuthenticationService.getAuthorizationHeader(),
     errorInterceptor: errorHandler.getHTTPErrorHandler(),
   };
 
@@ -105,7 +105,7 @@ function createDicomWebApi(dicomWebConfig, UserAuthenticationService) {
       studies: {
         mapParams: mapParams.bind(),
         search: async function (origParams) {
-          const headers = UserAuthenticationService.getAuthorizationHeader();
+          const headers = userAuthenticationService.getAuthorizationHeader();
           if (headers) {
             qidoDicomWebClient.headers = headers;
           }
@@ -130,7 +130,7 @@ function createDicomWebApi(dicomWebConfig, UserAuthenticationService) {
       series: {
         // mapParams: mapParams.bind(),
         search: async function (studyInstanceUid) {
-          const headers = UserAuthenticationService.getAuthorizationHeader();
+          const headers = userAuthenticationService.getAuthorizationHeader();
           if (headers) {
             qidoDicomWebClient.headers = headers;
           }
@@ -146,7 +146,7 @@ function createDicomWebApi(dicomWebConfig, UserAuthenticationService) {
       },
       instances: {
         search: (studyInstanceUid, queryParameters) => {
-          const headers = UserAuthenticationService.getAuthorizationHeader();
+          const headers = userAuthenticationService.getAuthorizationHeader();
           if (headers) {
             qidoDicomWebClient.headers = headers;
           }
@@ -184,7 +184,7 @@ function createDicomWebApi(dicomWebConfig, UserAuthenticationService) {
           sortFunction,
           madeInClient = false,
         } = {}) => {
-          const headers = UserAuthenticationService.getAuthorizationHeader();
+          const headers = userAuthenticationService.getAuthorizationHeader();
           if (headers) {
             wadoDicomWebClient.headers = headers;
           }
@@ -218,7 +218,7 @@ function createDicomWebApi(dicomWebConfig, UserAuthenticationService) {
 
     store: {
       dicom: async dataset => {
-        const headers = UserAuthenticationService.getAuthorizationHeader();
+        const headers = userAuthenticationService.getAuthorizationHeader();
         if (headers) {
           wadoDicomWebClient.headers = headers;
         }

extensions/default/src/DicomWebDataSource/qido.js

@@ -23,6 +23,7 @@
  * | offset           | {number}           |
  */
 import { DICOMWeb, utils } from '@ohif/core';
+import { sortStudySeries } from '@ohif/core/src/utils/sortStudy';
 
 const { getString, getName, getModalities } = DICOMWeb;
 
@@ -90,6 +91,8 @@ export function processSeriesResults(qidoSeries) {
     );
   }
 
+  sortStudySeries(series);
+
   return series;
 }
 

extensions/default/src/DicomWebDataSource/wado/retrieveMetadataLoaderAsync.js

@@ -1,5 +1,8 @@
 import dcmjs from 'dcmjs';
-import { sortStudySeries, sortingCriteria } from '../utils/sortStudy';
+import {
+  sortStudySeries,
+  sortingCriteria,
+} from '@ohif/core/src/utils/sortStudy';
 import RetrieveMetadataLoader from './retrieveMetadataLoader';
 
 /**

extensions/default/src/Panels/ActionButtons.tsx

@@ -13,16 +13,10 @@ function ActionButtons({ onExportClick, onCreateReportClick }) {
         <Button className="px-2 py-2 text-base" onClick={onExportClick}>
           {t('Export CSV')}
         </Button>
+        <Button className="px-2 py-2 text-base" onClick={onCreateReportClick}>
+          {t('Create Report')}
+        </Button>
       </ButtonGroup>
-      {/* <Button
-        className="ml-2 text-base"
-        variant="outlined"
-        size="small"
-        color="black"
-        onClick={onCreateReportClick}
-      >
-        {t('Create Report')}
-      </Button> */}
     </React.Fragment>
   );
 }

extensions/default/src/Panels/DataSourceSelector.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useNavigate } from 'react-router-dom';
+import { useAppConfig } from '@state';
+
+import { Button } from '@ohif/ui';
+
+function DataSourceSelector() {
+  const [appConfig] = useAppConfig();
+  const navigate = useNavigate();
+
+  // This is frowned upon, but the raw config is needed here to provide
+  // the selector
+  const dsConfigs = appConfig.dataSources;
+
+  return (
+    <div style={{ width: '100%', height: '100%' }}>
+      <div className="h-screen w-screen flex justify-center items-center ">
+        <div className="py-8 px-8 mx-auto bg-secondary-dark drop-shadow-md space-y-2 rounded-lg">
+          <img
+            className="block mx-auto h-14"
+            src="./ohif-logo.svg"
+            alt="OHIF"
+          />
+          <div className="text-center space-y-2 pt-4">
+            {dsConfigs
+              .filter(
+                it =>
+                  it.sourceName !== 'dicomjson' &&
+                  it.sourceName !== 'dicomlocal'
+              )
+              .map(ds => (
+                <div key={ds.sourceName}>
+                  <h1 className="text-white">{ds.friendlyName}</h1>
+                  <Button
+                    className={classnames('font-bold', 'ml-2')}
+                    onClick={() => {
+                      navigate({
+                        pathname: '/',
+                        search: `datasources=${ds.sourceName}`,
+                      });
+                    }}
+                  >
+                    {ds.sourceName}
+                  </Button>
+                  <br />
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DataSourceSelector;

extensions/default/src/Panels/PanelMeasurementTable.tsx

@@ -1,19 +1,31 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import { utils, ServicesManager } from '@ohif/core';
 import { MeasurementTable, Dialog, Input, useViewportGrid } from '@ohif/ui';
 import ActionButtons from './ActionButtons';
 import debounce from 'lodash.debounce';
 
-import { utils } from '@ohif/core';
+import createReportDialogPrompt, {
+  CREATE_REPORT_DIALOG_RESPONSE,
+} from './createReportDialogPrompt';
+import createReportAsync from '../Actions/createReportAsync';
+import findSRWithSameSeriesDescription from '../utils/findSRWithSameSeriesDescription';
 
 const { downloadCSVReport } = utils;
 
 export default function PanelMeasurementTable({
   servicesManager,
   commandsManager,
-}) {
+  extensionManager,
+}): React.FunctionComponent {
   const [viewportGrid, viewportGridService] = useViewportGrid();
-  const { MeasurementService, UIDialogService } = servicesManager.services;
+  const { activeViewportIndex, viewports } = viewportGrid;
+  const {
+    measurementService,
+    uiDialogService,
+    uiNotificationService,
+    displaySetService,
+  } = (servicesManager as ServicesManager).services;
   const [displayMeasurements, setDisplayMeasurements] = useState([]);
 
   useEffect(() => {
@@ -22,21 +34,21 @@ export default function PanelMeasurementTable({
       100
     );
     // ~~ Initial
-    setDisplayMeasurements(_getMappedMeasurements(MeasurementService));
+    setDisplayMeasurements(_getMappedMeasurements(measurementService));
 
     // ~~ Subscription
-    const added = MeasurementService.EVENTS.MEASUREMENT_ADDED;
+    const added = measurementService.EVENTS.MEASUREMENT_ADDED;
-    const addedRaw = MeasurementService.EVENTS.RAW_MEASUREMENT_ADDED;
+    const addedRaw = measurementService.EVENTS.RAW_MEASUREMENT_ADDED;
-    const updated = MeasurementService.EVENTS.MEASUREMENT_UPDATED;
+    const updated = measurementService.EVENTS.MEASUREMENT_UPDATED;
-    const removed = MeasurementService.EVENTS.MEASUREMENT_REMOVED;
+    const removed = measurementService.EVENTS.MEASUREMENT_REMOVED;
-    const cleared = MeasurementService.EVENTS.MEASUREMENTS_CLEARED;
+    const cleared = measurementService.EVENTS.MEASUREMENTS_CLEARED;
     const subscriptions = [];
 
     [added, addedRaw, updated, removed, cleared].forEach(evt => {
       subscriptions.push(
-        MeasurementService.subscribe(evt, () => {
+        measurementService.subscribe(evt, () => {
           debouncedSetDisplayMeasurements(
-            _getMappedMeasurements(MeasurementService)
+            _getMappedMeasurements(measurementService)
           );
         }).unsubscribe
       );
@@ -51,26 +63,84 @@ export default function PanelMeasurementTable({
   }, []);
 
   async function exportReport() {
-    const measurements = MeasurementService.getMeasurements();
+    const measurements = measurementService.getMeasurements();
 
-    downloadCSVReport(measurements, MeasurementService);
+    downloadCSVReport(measurements, measurementService);
+  }
+
+  async function clearMeasurements() {
+    measurementService.clearMeasurements();
+  }
+
+  async function createReport(): Promise<any> {
+    // filter measurements that are added to the active study
+    const activeViewport = viewports[activeViewportIndex];
+    const measurements = measurementService.getMeasurements();
+    const displaySet = displaySetService.getDisplaySetByUID(
+      activeViewport.displaySetInstanceUIDs[0]
+    );
+    const trackedMeasurements = measurements.filter(
+      m => displaySet.StudyInstanceUID === m.referenceStudyUID
+    );
+
+    if (trackedMeasurements.length <= 0) {
+      uiNotificationService.show({
+        title: 'No Measurements',
+        message: 'No Measurements are added to the current Study.',
+        type: 'info',
+        duration: 3000,
+      });
+      return;
+    }
+
+    const promptResult = await createReportDialogPrompt(uiDialogService, {
+      extensionManager,
+    });
+
+    if (promptResult.action === CREATE_REPORT_DIALOG_RESPONSE.CREATE_REPORT) {
+      const dataSources = extensionManager.getDataSources(
+        promptResult.dataSourceName
+      );
+      const dataSource = dataSources[0];
+
+      const SeriesDescription =
+        // isUndefinedOrEmpty
+        promptResult.value === undefined || promptResult.value === ''
+          ? 'Research Derived Series' // default
+          : promptResult.value; // provided value
+
+      // Re-use an existing series having the same series description to avoid
+      // creating too many series instances.
+      const options = findSRWithSameSeriesDescription(
+        SeriesDescription,
+        displaySetService
+      );
+
+      return createReportAsync(
+        servicesManager,
+        commandsManager,
+        dataSource,
+        trackedMeasurements,
+        options
+      );
+    }
   }
 
   const jumpToImage = ({ uid, isActive }) => {
-    MeasurementService.jumpToMeasurement(viewportGrid.activeViewportIndex, uid);
+    measurementService.jumpToMeasurement(viewportGrid.activeViewportIndex, uid);
 
     onMeasurementItemClickHandler({ uid, isActive });
   };
 
   const onMeasurementItemEditHandler = ({ uid, isActive }) => {
-    const measurement = MeasurementService.getMeasurement(uid);
+    const measurement = measurementService.getMeasurement(uid);
     //Todo: why we are jumping to image?
     // jumpToImage({ id, isActive });
 
     const onSubmitHandler = ({ action, value }) => {
       switch (action.id) {
         case 'save': {
-          MeasurementService.update(
+          measurementService.update(
             uid,
             {
               ...measurement,
@@ -80,10 +150,10 @@ export default function PanelMeasurementTable({
           );
         }
       }
-      UIDialogService.dismiss({ id: 'enter-annotation' });
+      uiDialogService.dismiss({ id: 'enter-annotation' });
     };
 
-    UIDialogService.create({
+    uiDialogService.create({
       id: 'enter-annotation',
       centralize: true,
       isDraggable: false,
@@ -108,6 +178,7 @@ export default function PanelMeasurementTable({
             <div className="p-4 bg-primary-dark">
               <Input
                 autoFocus
+                id="annotation"
                 className="mt-2 bg-black border-primary-main"
                 type="text"
                 containerClassName="mr-2"
@@ -142,7 +213,7 @@ export default function PanelMeasurementTable({
   return (
     <>
       <div
-        className="overflow-x-hidden overflow-y-auto invisible-scrollbar"
+        className="overflow-x-hidden overflow-y-auto ohif-scrollbar"
         data-cy={'measurements-panel'}
       >
         <MeasurementTable
@@ -155,7 +226,8 @@ export default function PanelMeasurementTable({
       <div className="flex justify-center p-4">
         <ActionButtons
           onExportClick={exportReport}
-          onCreateReportClick={() => {}}
+          onClearMeasurementsClick={clearMeasurements}
+          onCreateReportClick={createReport}
         />
       </div>
     </>
@@ -163,37 +235,27 @@ export default function PanelMeasurementTable({
 }
 
 PanelMeasurementTable.propTypes = {
-  servicesManager: PropTypes.shape({
+  servicesManager: PropTypes.instanceOf(ServicesManager).isRequired,
-    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) {
+function _getMappedMeasurements(measurementService) {
-  const measurements = MeasurementService.getMeasurements();
+  const measurements = measurementService.getMeasurements();
 
   const mappedMeasurements = measurements.map((m, index) =>
-    _mapMeasurementToDisplay(m, index, MeasurementService.VALUE_TYPES)
+    _mapMeasurementToDisplay(m, index, measurementService.VALUE_TYPES)
   );
 
   return mappedMeasurements;
 }
 
 function _mapMeasurementToDisplay(measurement, index, types) {
-  const { displayText, uid, label, type } = measurement;
+  const { displayText, uid, label, type, selected } = measurement;
 
   return {
     uid,
     label: label || '(empty)',
     measurementType: type,
     displayText: displayText || [],
-    // TODO: handle one layer down
+    isActive: selected,
-    isActive: false, // activeMeasurementItem === i + 1,
   };
 }

extensions/default/src/Panels/PanelStudyBrowser.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { StudyBrowser, useImageViewer, useViewportGrid } from '@ohif/ui';
 import { utils } from '@ohif/core';
 
-const { formatDate } = utils;
+const { sortStudyInstances, formatDate } = utils;
 
 /**
  *
@@ -17,9 +17,9 @@ function PanelStudyBrowser({
   dataSource,
 }) {
   const {
-    HangingProtocolService,
+    hangingProtocolService,
-    DisplaySetService,
+    displaySetService,
-    UINotificationService,
+    uiNotificationService,
   } = servicesManager.services;
   // Normally you nest the components so the tree isn't so deep, and the data
   // doesn't have to have such an intense shape. This works well enough for now.
@@ -42,13 +42,13 @@ function PanelStudyBrowser({
     let updatedViewports = [];
     const viewportIndex = activeViewportIndex;
     try {
-      updatedViewports = HangingProtocolService.getViewportsRequireUpdate(
+      updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
         viewportIndex,
         displaySetInstanceUID
       );
     } catch (error) {
       console.warn(error);
-      UINotificationService.show({
+      uiNotificationService.show({
         title: 'Thumbnail Double Click',
         message:
           'The selected display sets could not be added to the viewport due to a mismatch in the Hanging Protocol rules.',
@@ -103,10 +103,10 @@ function PanelStudyBrowser({
 
   // // ~~ Initial Thumbnails
   useEffect(() => {
-    const currentDisplaySets = DisplaySetService.activeDisplaySets;
+    const currentDisplaySets = displaySetService.activeDisplaySets;
     currentDisplaySets.forEach(async dSet => {
       const newImageSrcEntry = {};
-      const displaySet = DisplaySetService.getDisplaySetByUID(
+      const displaySet = displaySetService.getDisplaySetByUID(
         dSet.displaySetInstanceUID
       );
       const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
@@ -134,11 +134,12 @@ function PanelStudyBrowser({
   // ~~ displaySets
   useEffect(() => {
     // TODO: Are we sure `activeDisplaySets` will always be accurate?
-    const currentDisplaySets = DisplaySetService.activeDisplaySets;
+    const currentDisplaySets = displaySetService.activeDisplaySets;
     const mappedDisplaySets = _mapDisplaySets(
       currentDisplaySets,
       thumbnailImageSrcMap
     );
+    sortStudyInstances(mappedDisplaySets);
 
     setDisplaySets(mappedDisplaySets);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -147,13 +148,13 @@ function PanelStudyBrowser({
   // ~~ subscriptions --> displaySets
   useEffect(() => {
     // DISPLAY_SETS_ADDED returns an array of DisplaySets that were added
-    const SubscriptionDisplaySetsAdded = DisplaySetService.subscribe(
+    const SubscriptionDisplaySetsAdded = displaySetService.subscribe(
-      DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
+      displaySetService.EVENTS.DISPLAY_SETS_ADDED,
       data => {
         const { displaySetsAdded } = data;
         displaySetsAdded.forEach(async dSet => {
           const newImageSrcEntry = {};
-          const displaySet = DisplaySetService.getDisplaySetByUID(
+          const displaySet = displaySetService.getDisplaySetByUID(
             dSet.displaySetInstanceUID
           );
           const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
@@ -178,8 +179,8 @@ function PanelStudyBrowser({
 
     // TODO: Will this always hold _all_ the displaySets we care about?
     // DISPLAY_SETS_CHANGED returns `DisplaySerService.activeDisplaySets`
-    const SubscriptionDisplaySetsChanged = DisplaySetService.subscribe(
+    const SubscriptionDisplaySetsChanged = displaySetService.subscribe(
-      DisplaySetService.EVENTS.DISPLAY_SETS_CHANGED,
+      displaySetService.EVENTS.DISPLAY_SETS_CHANGED,
       changedDisplaySets => {
         const mappedDisplaySets = _mapDisplaySets(
           changedDisplaySets,
@@ -221,7 +222,7 @@ function PanelStudyBrowser({
     if (!shouldCollapseStudy) {
       const madeInClient = true;
       requestDisplaySetCreationForStudy(
-        DisplaySetService,
+        displaySetService,
         StudyInstanceUID,
         madeInClient
       );
@@ -300,6 +301,7 @@ function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
       seriesNumber: ds.SeriesNumber,
       modality: ds.Modality,
       seriesDate: ds.SeriesDate,
+      seriesTime: ds.SeriesTime,
       numInstances: ds.numImageFrames,
       StudyInstanceUID: ds.StudyInstanceUID,
       componentType,

extensions/default/src/Panels/createReportDialogPrompt.tsx

@@ -0,0 +1,143 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { Dialog, Input, Select } from '@ohif/ui';
+
+export const CREATE_REPORT_DIALOG_RESPONSE = {
+  CANCEL: 0,
+  CREATE_REPORT: 1,
+};
+
+export default function createReportDialogPrompt(
+  uiDialogService,
+  { extensionManager }
+) {
+  return new Promise(function (resolve, reject) {
+    let dialogId = undefined;
+
+    const _handleClose = () => {
+      // Dismiss dialog
+      uiDialogService.dismiss({ id: dialogId });
+      // Notify of cancel action
+      resolve({
+        action: CREATE_REPORT_DIALOG_RESPONSE.CANCEL,
+        value: undefined,
+        dataSourceName: undefined,
+      });
+    };
+
+    /**
+     *
+     * @param {string} param0.action - value of action performed
+     * @param {string} param0.value - value from input field
+     */
+    const _handleFormSubmit = ({ action, value }) => {
+      uiDialogService.dismiss({ id: dialogId });
+      switch (action.id) {
+        case 'save':
+          resolve({
+            action: CREATE_REPORT_DIALOG_RESPONSE.CREATE_REPORT,
+            value: value.label,
+            dataSourceName: value.dataSourceName,
+          });
+          break;
+        case 'cancel':
+          resolve({
+            action: CREATE_REPORT_DIALOG_RESPONSE.CANCEL,
+            value: undefined,
+            dataSourceName: undefined,
+          });
+          break;
+      }
+    };
+
+    const dataSourcesOpts = Object.keys(extensionManager.dataSourceMap)
+      .filter(ds => {
+        const configuration =
+          extensionManager.dataSourceDefs[ds]?.configuration;
+        const supportsStow =
+          configuration?.supportsStow ?? configuration?.wadoRoot;
+        return supportsStow;
+      })
+      .map(ds => {
+        return {
+          value: ds,
+          label: ds,
+          placeHolder: ds,
+        };
+      });
+
+    dialogId = uiDialogService.create({
+      centralize: true,
+      isDraggable: false,
+      content: Dialog,
+      useLastPosition: false,
+      showOverlay: true,
+      contentProps: {
+        title: 'Provide a name for your report',
+        value: {
+          label: '',
+          dataSourceName: extensionManager.activeDataSource,
+        },
+        noCloseButton: true,
+        onClose: _handleClose,
+        actions: [
+          { id: 'cancel', text: 'Cancel', type: 'primary' },
+          { id: 'save', text: 'Save', type: 'secondary' },
+        ],
+        // TODO: Should be on button press...
+        onSubmit: _handleFormSubmit,
+        body: ({ value, setValue }) => {
+          const onChangeHandler = event => {
+            event.persist();
+            setValue(value => ({ ...value, label: event.target.value }));
+          };
+          const onKeyPressHandler = event => {
+            if (event.key === 'Enter') {
+              uiDialogService.dismiss({ id: dialogId });
+              resolve({
+                action: CREATE_REPORT_DIALOG_RESPONSE.CREATE_REPORT,
+                value: value.label,
+              });
+            }
+          };
+          return (
+            <>
+              <div className="p-4 bg-primary-dark">
+                {dataSourcesOpts.length > 1 && (
+                  <Select
+                    closeMenuOnSelect={true}
+                    className="mr-2 bg-black border-primary-main"
+                    options={dataSourcesOpts}
+                    placeholder={
+                      dataSourcesOpts.find(
+                        option => option.value === value.dataSourceName
+                      ).placeHolder
+                    }
+                    value={value.dataSourceName}
+                    onChange={evt => {
+                      setValue(v => ({ ...v, dataSourceName: evt.value }));
+                    }}
+                    isClearable={false}
+                  />
+                )}
+              </div>
+              <div className="p-4 bg-primary-dark">
+                <Input
+                  autoFocus
+                  className="mt-2 bg-black border-primary-main"
+                  type="text"
+                  placeholder="Enter Report Name"
+                  containerClassName="mr-2"
+                  value={value.label}
+                  onChange={onChangeHandler}
+                  onKeyPress={onKeyPressHandler}
+                  required
+                />
+              </div>
+            </>
+          );
+        },
+      },
+    });
+  });
+}

extensions/default/src/Panels/requestDisplaySetCreationForStudy.js

@@ -1,12 +1,12 @@
 function requestDisplaySetCreationForStudy(
   dataSource,
-  DisplaySetService,
+  displaySetService,
   StudyInstanceUID,
   madeInClient
 ) {
   // TODO: is this already short-circuited by the map of Retrieve promises?
   if (
-    DisplaySetService.activeDisplaySets.some(
+    displaySetService.activeDisplaySets.some(
       displaySet => displaySet.StudyInstanceUID === StudyInstanceUID
     )
   ) {

extensions/default/src/Toolbar/Toolbar.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
+import classnames from 'classnames';
 
 export default function Toolbar({ servicesManager }) {
-  const { ToolBarService } = servicesManager.services;
+  const { toolbarService } = servicesManager.services;
   const [toolbarButtons, setToolbarButtons] = useState([]);
   const [buttonState, setButtonState] = useState({
     primaryToolId: '',
@@ -11,20 +12,20 @@ export default function Toolbar({ servicesManager }) {
 
   // Could track buttons and state separately...?
   useEffect(() => {
-    const { unsubscribe: unsub1 } = ToolBarService.subscribe(
+    const { unsubscribe: unsub1 } = toolbarService.subscribe(
-      ToolBarService.EVENTS.TOOL_BAR_MODIFIED,
+      toolbarService.EVENTS.TOOL_BAR_MODIFIED,
-      () => setToolbarButtons(ToolBarService.getButtonSection('primary'))
+      () => setToolbarButtons(toolbarService.getButtonSection('primary'))
     );
-    const { unsubscribe: unsub2 } = ToolBarService.subscribe(
+    const { unsubscribe: unsub2 } = toolbarService.subscribe(
-      ToolBarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
+      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
-      () => setButtonState({ ...ToolBarService.state })
+      () => setButtonState({ ...toolbarService.state })
     );
 
     return () => {
       unsub1();
       unsub2();
     };
-  }, [ToolBarService]);
+  }, [toolbarService]);
 
   return (
     <>
@@ -46,15 +47,18 @@ export default function Toolbar({ servicesManager }) {
         // These can... Trigger toolbar events based on updates?
         // Then sync using useEffect, or simply modify the state here?
         return (
-          <Component
+          // The margin for separating the tools on the toolbar should go here and NOT in each individual component (button) item.
-            key={id}
+          // This allows for the individual items to be included in other UI components where perhaps alternative margins are desired.
-            id={id}
+          <div key={id} className={classnames('mr-1')}>
-            {...componentProps}
+            <Component
-            bState={buttonState}
+              id={id}
-            isActive={isActive}
+              {...componentProps}
-            onInteraction={args => ToolBarService.recordInteraction(args)}
+              bState={buttonState}
-            servicesManager={servicesManager}
+              isActive={isActive}
-          />
+              onInteraction={args => toolbarService.recordInteraction(args)}
+              servicesManager={servicesManager}
+            />
+          </div>
         );
       })}
     </>

extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx

@@ -6,12 +6,23 @@ import {
   useViewportGrid,
 } from '@ohif/ui';
 
-function LayoutSelector({ rows, columns, servicesManager }) {
+import { ServicesManager } from '@ohif/core';
+
+function LayoutSelector({
+  rows,
+  columns,
+  className,
+  servicesManager,
+  ...rest
+}) {
   const [isOpen, setIsOpen] = useState(false);
   const [disableSelector, setDisableSelector] = useState(false);
   const [viewportGridState, viewportGridService] = useViewportGrid();
 
-  const { HangingProtocolService } = servicesManager.services;
+  const {
+    hangingProtocolService,
+    toolbarService,
+  } = (servicesManager as ServicesManager).services;
 
   const closeOnOutsideClick = () => {
     if (isOpen) {
@@ -20,23 +31,17 @@ function LayoutSelector({ rows, columns, servicesManager }) {
   };
 
   useEffect(() => {
-    const { unsubscribe } = HangingProtocolService.subscribe(
+    const { unsubscribe } = hangingProtocolService.subscribe(
-      HangingProtocolService.EVENTS.PROTOCOL_CHANGED,
+      hangingProtocolService.EVENTS.PROTOCOL_CHANGED,
       evt => {
         const { protocol } = evt;
-
-        if (protocol.id === 'mpr') {
-          setDisableSelector(true);
-        } else {
-          setDisableSelector(false);
-        }
       }
     );
 
     return () => {
       unsubscribe();
     };
-  }, [HangingProtocolService]);
+  }, [hangingProtocolService]);
 
   useEffect(() => {
     window.addEventListener('click', closeOnOutsideClick);
@@ -55,20 +60,50 @@ function LayoutSelector({ rows, columns, servicesManager }) {
   const onInteractionHandler = () => setIsOpen(!isOpen);
   const DropdownContent = isOpen ? OHIFLayoutSelector : null;
 
+  const onSelectionHandler = ({ numRows, numCols }) => {
+    // TODO Introduce a service to persist the state of the current hanging protocol/app.
+
+    // TODO Here the layout change will amount to a change of hanging protocol as specified by the extension for this layout selector tool
+    // followed by the change of the grid itself.
+    if (hangingProtocolService.getActiveProtocol().protocol.id === 'mpr') {
+      toolbarService.recordInteraction({
+        groupId: 'MPR',
+        itemId: 'MPR',
+        interactionType: 'toggle',
+        commands: [
+          {
+            commandName: 'toggleMPR',
+            commandOptions: {},
+            context: 'CORNERSTONE',
+          },
+        ],
+      });
+    }
+
+    // When a new layout is selected, keep any extra/offscreen viewports
+    // so that if any of those viewports were populated via the UI then they
+    // will be maintained in case those viewports are redisplayed later.
+    viewportGridService.setLayout({
+      numRows,
+      numCols,
+      keepExtraViewports: true,
+    });
+  };
+
   return (
     <ToolbarButton
       id="Layout"
       label="Grid Layout"
       icon="tool-layout"
       onInteraction={onInteractionHandler}
+      className={className}
+      rounded={rest.rounded}
       dropdownContent={
         DropdownContent !== null && (
           <DropdownContent
             rows={rows}
             columns={columns}
-            onSelection={({ numRows, numCols }) => {
+            onSelection={onSelectionHandler}
-              viewportGridService.setLayout({ numRows, numCols });
-            }}
           />
         )
       }
@@ -82,6 +117,7 @@ LayoutSelector.propTypes = {
   rows: PropTypes.number,
   columns: PropTypes.number,
   onLayoutChange: PropTypes.func,
+  servicesManager: PropTypes.instanceOf(ServicesManager),
 };
 
 LayoutSelector.defaultProps = {