chore(version): Update package versions [skip ci]

There are a couple of changes here which should improve stability of the tests.  Hopefully that will be sufficient, but it is difficult to tell for sure if it is complete.

.docker/Viewer-v3.x/default.conf.template

@@ -1,5 +1,6 @@
 server {
-  listen ${PORT};
+  listen ${PORT} default_server;
+  listen [::]:${PORT} default_server;
   location / {
     root   /usr/share/nginx/html;
     index  index.html index.htm;

.docker/Viewer-v3.x/default.ssl.conf.template

@@ -0,0 +1,22 @@
+server {
+  listen ${SSL_PORT} ssl http2 default_server;
+  listen [::]:${SSL_PORT} ssl http2 default_server;
+  ssl_certificate /etc/ssl/certs/ssl-certificate.crt;
+  ssl_certificate_key /etc/ssl/private/ssl-private-key.key;
+  location / {
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    try_files $uri $uri/ /index.html;
+    add_header Cross-Origin-Opener-Policy same-origin;
+    add_header Cross-Origin-Embedder-Policy require-corp;
+    add_header Cross-Origin-Resource-Policy same-origin;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
+  }
+  error_page   500 502 503 504  /50x.html;
+  location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+}

.docker/Viewer-v3.x/entrypoint.sh

@@ -1,6 +1,16 @@
 #!/bin/sh
 
-envsubst '${PORT}' < /usr/src/default.conf.template > /etc/nginx/conf.d/default.conf
+if [ -n "$SSL_PORT" ]
+  then
+    envsubst '${SSL_PORT}:${PORT}' < /usr/src/default.ssl.conf.template > /etc/nginx/conf.d/default.conf
+  else
+    envsubst '${PORT}' < /usr/src/default.conf.template > /etc/nginx/conf.d/default.conf
+fi
+
+if [ -n "$APP_CONFIG" ]
+  then
+    echo "$APP_CONFIG" > /usr/share/nginx/html/app-config.js
+fi
 
 if [ -n "$CLIENT_ID" ] || [ -n "$HEALTHCARE_API_ENDPOINT" ]
   then

.eslintrc.json

@@ -21,6 +21,10 @@
       "version": "detect"
     }
   },
+  "rules": {
+    // Enforce consistent brace style for all control statements for readability
+    "curly": "error"
+  },
   "globals": {
     "cy": true,
     "before": true,

.gitmodules

@@ -1,3 +1,4 @@
 [submodule "testdata"]
 	path = testdata
 	url = https://github.com/OHIF/viewer-testdata-dicomweb.git
+	branch = main

.webpack/rules/transpileJavaScript.js

@@ -33,7 +33,11 @@ function transpileJavaScript(mode) {
       rootMode: 'upward',
       envName: mode,
       cacheCompression: false,
-      cacheDirectory: true,
+      // Note: This was causing a lot of issues with yarn link of the cornerstone
+      // only set this to true if you don't have a yarn link to external libs
+      // otherwise expect the lib changes not to be reflected in the dev server
+      // as it will be cached
+      cacheDirectory: false,
     },
   };
 }

.webpack/webpack.base.js

@@ -73,21 +73,17 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
       children: false,
       warnings: true,
     },
-    devServer: {
-      open: true,
-      port: 3000,
-      historyApiFallback: true,
-      headers: {
-        'Cross-Origin-Embedder-Policy': 'require-corp',
-        'Cross-Origin-Opener-Policy': 'same-origin',
-      },
-    },
     cache: {
       type: 'filesystem',
     },
     module: {
       noParse: [/(codec)/, /(dicomicc)/],
       rules: [
+        {
+          test: /\.js$/,
+          enforce: 'pre',
+          use: 'source-map-loader',
+        },
         transpileJavaScriptRule(mode),
         loadWebWorkersRule,
         // loadShadersRule,

Dockerfile

@@ -38,6 +38,7 @@ COPY platform /usr/src/app/platform
 
 # Copy Files
 FROM node:16.15.0-slim as builder
+RUN apt-get update && apt-get install -y build-essential python3
 RUN mkdir /usr/src/app
 WORKDIR /usr/src/app
 
@@ -61,7 +62,7 @@ RUN yarn run build
 
 # Stage 3: Bundle the built application into a Docker container
 # which runs Nginx using Alpine Linux
-FROM nginxinc/nginx-unprivileged:1.23.1-alpine as final
+FROM nginxinc/nginx-unprivileged:1.25-alpine as final
 #RUN apk add --no-cache bash
 ENV PORT=80
 RUN rm /etc/nginx/conf.d/default.conf
@@ -69,5 +70,10 @@ USER nginx
 COPY --chown=nginx:nginx .docker/Viewer-v3.x /usr/src
 RUN chmod 777 /usr/src/entrypoint.sh
 COPY --from=builder /usr/src/app/platform/app/dist /usr/share/nginx/html
+# In entrypoint.sh, app-config.js might be overwritten, so chmod it to be writeable.
+# The nginx user cannot chmod it, so change to root.
+USER root
+RUN chmod 666 /usr/share/nginx/html/app-config.js
+USER nginx
 ENTRYPOINT ["/usr/src/entrypoint.sh"]
 CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -3,7 +3,7 @@
 <div align="center">
   <h1>OHIF Medical Imaging Viewer</h1>
   <p><strong>The OHIF Viewer</strong> is a zero-footprint medical image viewer
-provided by the <a href="https://ohif.org/">Open Health Imaging Foundation (OHIF)</a>. It is a configurable and extensible progressive web application with out-of-the-box support for image archives which support <a href="https://www.dicomstandard.org/dicomweb/">DICOMweb</a>.</p>
+provided by the <a href="https://ohif.org/">Open Health Imaging Foundation (OHIF)</a>. It is a configurable and extensible progressive web application with out-of-the-box support for image archives which support <a href="https://www.dicomstandard.org/using/dicomweb/">DICOMweb</a>.</p>
 </div>
 
 
@@ -34,13 +34,15 @@ provided by the <a href="https://ohif.org/">Open Health Imaging Foundation (OHIF
 <!-- [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors) -->
 <!-- prettier-ignore-end -->
 
-|     |  |
-| :-: | :---  |
-| <img src="platform/docs/docs/assets/img/demo-measurements.jpg" alt="Measurement tracking" width="350"/> | Measurement Tracking |
-| <img src="platform/docs/docs/assets/img/demo-segmentation.png" alt="Segmentations" width="350"/> | Labelmap Segmentations  |
-| <img src="platform/docs/docs/assets/img/demo-ptct.png" alt="Hanging Protocols" width="350"/> | Fusion and Custom Hanging protocols  |
-| <img src="platform/docs/docs/assets/img/demo-microscopy.png" alt="Microscopy" width="350"/> | Slide Microscopy  |
-| <img src="platform/docs/docs/assets/img/demo-volumeRendering.png" alt="Volume Rendering" width="350"/> | Volume Rendering  |
+
+|     |  | |
+| :-: | :---  | :--- |
+| <img src="platform/docs/docs/assets/img/demo-measurements.jpg" alt="Measurement tracking" width="350"/> | Measurement Tracking | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5) |
+| <img src="platform/docs/docs/assets/img/demo-segmentation.png" alt="Segmentations" width="350"/> | Labelmap Segmentations  | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=1.3.12.2.1107.5.2.32.35162.30000015050317233592200000046) |
+| <img src="platform/docs/docs/assets/img/demo-ptct.png" alt="Hanging Protocols" width="350"/> | Fusion and Custom Hanging protocols  | [Demo](https://viewer.ohif.org/tmtv?StudyInstanceUIDs=1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463) |
+| <img src="platform/docs/docs/assets/img/demo-microscopy.png" alt="Microscopy" width="350"/> | Slide Microscopy  | [Demo](https://viewer.ohif.org/microscopy?StudyInstanceUIDs=2.25.275741864483510678566144889372061815320) |
+| <img src="platform/docs/docs/assets/img/demo-volumeRendering.png" alt="Volume Rendering" width="350"/> | Volume Rendering  | [Demo](https://viewer.ohif.org/viewer?StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5&hangingprotocolId=mprAnd3DVolumeViewport) |
+
 
 
 ## About
@@ -161,7 +163,7 @@ yarn install
 
 These commands are available from the root directory. Each project directory
 also supports a number of commands that can be found in their respective
-`README.md` and `project.json` files.
+`README.md` and `package.json` files.
 
 | Yarn Commands                | Description                                                   |
 | ---------------------------- | ------------------------------------------------------------- |

babel.config.js

@@ -13,12 +13,16 @@ module.exports = {
       'inline-react-svg',
       {
         svgo: {
-          plugins: extendDefaultPlugins([
+          plugins: [
             {
-              name: 'removeViewBox',
-              active: false,
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  removeViewBox: false,
+                },
+              },
             },
-          ]),
+          ],
         },
       },
     ],

commit.txt

@@ -1 +1 @@
-14369414cf0193f00243ae5c9f8415cf7079a753
+884577a23d9b44505321fbb09dc5c0a42aaa69a1

extensions/cornerstone-dicom-rt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-rt",
-  "version": "3.7.0-beta.2",
+  "version": "3.7.0-beta.49",
   "description": "DICOM RT read workflow",
   "author": "OHIF",
   "license": "MIT",
@@ -31,10 +31,10 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.7.0-beta.2",
-    "@ohif/extension-cornerstone": "3.7.0-beta.2",
-    "@ohif/extension-default": "3.7.0-beta.2",
-    "@ohif/i18n": "3.7.0-beta.2",
+    "@ohif/core": "3.7.0-beta.49",
+    "@ohif/extension-cornerstone": "3.7.0-beta.49",
+    "@ohif/extension-default": "3.7.0-beta.49",
+    "@ohif/i18n": "3.7.0-beta.49",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

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

@@ -2,6 +2,7 @@ import { id } from './id';
 import React from 'react';
 import { Types } from '@ohif/core';
 import getSopClassHandlerModule from './getSopClassHandlerModule';
+import hydrateRTDisplaySet from './utils/_hydrateRT';
 
 const Component = React.lazy(() => {
   return import(
@@ -36,12 +37,14 @@ const extension: Types.Extensions.Extension = {
   getViewportModule({
     servicesManager,
     extensionManager,
+    commandsManager,
   }: Types.Extensions.ExtensionParams) {
     const ExtendedOHIFCornerstoneRTViewport = props => {
       return (
         <OHIFCornerstoneRTViewport
           servicesManager={servicesManager}
           extensionManager={extensionManager}
+          commandsManager={commandsManager}
           {...props}
         />
       );
@@ -59,3 +62,4 @@ const extension: Types.Extensions.Extension = {
 };
 
 export default extension;
+export { hydrateRTDisplaySet };

extensions/cornerstone-dicom-rt/src/loadRTStruct.js

@@ -181,12 +181,6 @@ export default async function loadRTStruct(
         ContourGeometricType,
       } = ContourSequenceArray[c];
 
-      const sopInstanceUID = ContourImageSequence.ReferencedSOPInstanceUID;
-      const imageId = _getImageId(imageIdSopInstanceUidPairs, sopInstanceUID);
-
-      if (!imageId) {
-        continue;
-      }
       let isSupported = false;
 
       const points = [];

extensions/cornerstone-dicom-rt/src/utils/promptHydrateRT.ts

@@ -1,3 +1,4 @@
+import { ButtonEnums } from '@ohif/ui';
 import hydrateRTDisplaySet from './_hydrateRT';
 
 const RESPONSE = {
@@ -11,6 +12,7 @@ function promptHydrateRT({
   rtDisplaySet,
   viewportIndex,
   toolGroupId = 'default',
+  preHydrateCallbacks,
 }) {
   const { uiViewportDialogService } = servicesManager.services;
 
@@ -21,6 +23,10 @@ function promptHydrateRT({
     );
 
     if (promptResult === RESPONSE.HYDRATE_SEG) {
+      preHydrateCallbacks?.forEach(callback => {
+        callback();
+      });
+
       const isHydrated = await hydrateRTDisplaySet({
         rtDisplaySet,
         viewportIndex,
@@ -38,12 +44,12 @@ function _askHydrate(uiViewportDialogService, viewportIndex) {
     const message = 'Do you want to open this Segmentation?';
     const actions = [
       {
-        type: 'secondary',
+        type: ButtonEnums.type.secondary,
         text: 'No',
         value: RESPONSE.CANCEL,
       },
       {
-        type: 'primary',
+        type: ButtonEnums.type.primary,
         text: 'Yes',
         value: RESPONSE.HYDRATE_SEG,
       },

extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx

@@ -25,6 +25,7 @@ function OHIFCornerstoneRTViewport(props) {
     viewportLabel,
     servicesManager,
     extensionManager,
+    commandsManager,
   } = props;
 
   const {
@@ -91,6 +92,14 @@ function OHIFCornerstoneRTViewport(props) {
     setElement(null);
   };
 
+  const storePresentationState = useCallback(() => {
+    viewportGrid?.viewports.forEach(({ viewportIndex }) => {
+      commandsManager.runCommand('storePresentation', {
+        viewportIndex,
+      });
+    });
+  }, [viewportGrid]);
+
   const getCornerstoneViewport = useCallback(() => {
     const { component: Component } = extensionManager.getModuleEntry(
       '@ohif/extension-cornerstone.viewportModule.cornerstone'
@@ -155,6 +164,7 @@ function OHIFCornerstoneRTViewport(props) {
       servicesManager,
       viewportIndex,
       rtDisplaySet,
+      preHydrateCallbacks: [storePresentationState],
     }).then(isHydrated => {
       if (isHydrated) {
         setIsHydrated(true);
@@ -303,6 +313,13 @@ function OHIFCornerstoneRTViewport(props) {
   } = referencedDisplaySetRef.current.metadata;
 
   const onStatusClick = async () => {
+    // Before hydrating a RT and make it added to all viewports in the grid
+    // that share the same frameOfReferenceUID, we need to store the viewport grid
+    // presentation state, so that we can restore it after hydrating the RT. This is
+    // required if the user has changed the viewport (other viewport than RT viewport)
+    // presentation state (w/l and invert) and then opens the RT. If we don't store
+    // the presentation state, the viewport will be reset to the default presentation
+    storePresentationState();
     const isHydrated = await _hydrateRTDisplaySet({
       rtDisplaySet,
       viewportIndex,

extensions/cornerstone-dicom-seg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-seg",
-  "version": "3.7.0-beta.2",
+  "version": "3.7.0-beta.49",
   "description": "DICOM SEG read workflow",
   "author": "OHIF",
   "license": "MIT",
@@ -31,10 +31,10 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.7.0-beta.2",
-    "@ohif/extension-cornerstone": "3.7.0-beta.2",
-    "@ohif/extension-default": "3.7.0-beta.2",
-    "@ohif/i18n": "3.7.0-beta.2",
+    "@ohif/core": "3.7.0-beta.49",
+    "@ohif/extension-cornerstone": "3.7.0-beta.49",
+    "@ohif/extension-default": "3.7.0-beta.49",
+    "@ohif/i18n": "3.7.0-beta.49",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

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

@@ -1,11 +1,14 @@
-import vtkMath from '@kitware/vtk.js/Common/Core/Math';
-
 import { utils } from '@ohif/core';
+import {
+  metaData,
+  cache,
+  triggerEvent,
+  eventTarget,
+} from '@cornerstonejs/core';
+import { adaptersSEG, Enums } from '@cornerstonejs/adapters';
 
 import { SOPClassHandlerId } from './id';
-import dcmjs from 'dcmjs';
-
-const { DicomMessage, DicomMetaDictionary } = dcmjs.data;
+import { dicomlabToRGB } from './utils/dicomlabToRGB';
 
 const sopClassUids = ['1.2.840.10008.5.1.4.1.1.66.4'];
 
@@ -122,13 +125,12 @@ function _load(segDisplaySet, servicesManager, extensionManager, headers) {
       !segDisplaySet.segments ||
       Object.keys(segDisplaySet.segments).length === 0
     ) {
-      const segments = await _loadSegments(
+      await _loadSegments({
         extensionManager,
+        servicesManager,
         segDisplaySet,
-        headers
-      );
-
-      segDisplaySet.segments = segments;
+        headers,
+      });
     }
 
     const suppressEvents = true;
@@ -147,28 +149,65 @@ function _load(segDisplaySet, servicesManager, extensionManager, headers) {
   return loadPromises[SOPInstanceUID];
 }
 
-async function _loadSegments(extensionManager, segDisplaySet, headers) {
+async function _loadSegments({
+  extensionManager,
+  servicesManager,
+  segDisplaySet,
+  headers,
+}) {
   const utilityModule = extensionManager.getModuleEntry(
     '@ohif/extension-cornerstone.utilityModule.common'
   );
 
+  const { segmentationService } = servicesManager.services;
+
   const { dicomLoaderService } = utilityModule.exports;
-  const segArrayBuffer = await dicomLoaderService.findDicomDataPromise(
+  const arrayBuffer = await dicomLoaderService.findDicomDataPromise(
     segDisplaySet,
     null,
     headers
   );
 
-  const dicomData = DicomMessage.readFile(segArrayBuffer);
-  const dataset = DicomMetaDictionary.naturalizeDataset(dicomData.dict);
-  dataset._meta = DicomMetaDictionary.namifyDataset(dicomData.meta);
+  const cachedReferencedVolume = cache.getVolume(
+    segDisplaySet.referencedVolumeId
+  );
 
-  if (!Array.isArray(dataset.SegmentSequence)) {
-    dataset.SegmentSequence = [dataset.SegmentSequence];
+  if (!cachedReferencedVolume) {
+    throw new Error(
+      'Referenced Volume is missing for the SEG, and stack viewport SEG is not supported yet'
+    );
   }
 
-  const segments = _getSegments(dataset);
-  return segments;
+  const { imageIds } = cachedReferencedVolume;
+
+  // Todo: what should be defaults here
+  const tolerance = 0.001;
+  const skipOverlapping = true;
+
+  eventTarget.addEventListener(Enums.Events.SEGMENTATION_LOAD_PROGRESS, evt => {
+    const { percentComplete } = evt.detail;
+    segmentationService._broadcastEvent(
+      segmentationService.EVENTS.SEGMENT_LOADING_COMPLETE,
+      {
+        percentComplete,
+      }
+    );
+  });
+
+  const results = await adaptersSEG.Cornerstone3D.Segmentation.generateToolState(
+    imageIds,
+    arrayBuffer,
+    metaData,
+    { skipOverlapping, tolerance, eventTarget, triggerEvent }
+  );
+
+  results.segMetadata.data.forEach((data, i) => {
+    if (i > 0) {
+      data.rgba = dicomlabToRGB(data.RecommendedDisplayCIELabValue);
+    }
+  });
+
+  Object.assign(segDisplaySet, results);
 }
 
 function _segmentationExists(segDisplaySet, segmentationService) {
@@ -178,114 +217,6 @@ function _segmentationExists(segDisplaySet, segmentationService) {
   );
 }
 
-function _getPixelData(dataset, segments) {
-  let frameSize = Math.ceil((dataset.Rows * dataset.Columns) / 8);
-  let nextOffset = 0;
-
-  Object.keys(segments).forEach(segmentKey => {
-    const segment = segments[segmentKey];
-    segment.numberOfFrames = segment.functionalGroups.length;
-    segment.size = segment.numberOfFrames * frameSize;
-    segment.offset = nextOffset;
-    nextOffset = segment.offset + segment.size;
-    const packedSegment = dataset.PixelData[0].slice(
-      segment.offset,
-      nextOffset
-    );
-
-    segment.pixelData = dcmjs.data.BitArray.unpack(packedSegment);
-    segment.geometry = geometryFromFunctionalGroups(
-      dataset,
-      segment.functionalGroups
-    );
-  });
-
-  return segments;
-}
-
-function geometryFromFunctionalGroups(dataset, perFrame) {
-  let pixelMeasures =
-    dataset.SharedFunctionalGroupsSequence.PixelMeasuresSequence;
-  let planeOrientation =
-    dataset.SharedFunctionalGroupsSequence.PlaneOrientationSequence;
-  let planePosition = perFrame[0].PlanePositionSequence; // TODO: assume sorted frames!
-
-  const geometry = {};
-
-  // NB: DICOM PixelSpacing is defined as Row then Column,
-  // unlike ImageOrientationPatient
-  let spacingBetweenSlices = pixelMeasures.SpacingBetweenSlices;
-  if (!spacingBetweenSlices) {
-    if (pixelMeasures.SliceThickness) {
-      console.log('Using SliceThickness as SpacingBetweenSlices');
-      spacingBetweenSlices = pixelMeasures.SliceThickness;
-    }
-  }
-  geometry.spacing = [
-    pixelMeasures.PixelSpacing[1],
-    pixelMeasures.PixelSpacing[0],
-    spacingBetweenSlices,
-  ].map(Number);
-
-  geometry.dimensions = [dataset.Columns, dataset.Rows, perFrame.length].map(
-    Number
-  );
-
-  let orientation = planeOrientation.ImageOrientationPatient.map(Number);
-  const columnStepToPatient = orientation.slice(0, 3);
-  const rowStepToPatient = orientation.slice(3, 6);
-  geometry.planeNormal = [];
-  vtkMath.cross(columnStepToPatient, rowStepToPatient, geometry.planeNormal);
-
-  let firstPosition = perFrame[0].PlanePositionSequence.ImagePositionPatient.map(
-    Number
-  );
-  let lastPosition = perFrame[
-    perFrame.length - 1
-  ].PlanePositionSequence.ImagePositionPatient.map(Number);
-  geometry.sliceStep = [];
-  vtkMath.subtract(lastPosition, firstPosition, geometry.sliceStep);
-  vtkMath.normalize(geometry.sliceStep);
-  geometry.direction = columnStepToPatient
-    .concat(rowStepToPatient)
-    .concat(geometry.sliceStep);
-  geometry.origin = planePosition.ImagePositionPatient.map(Number);
-
-  return geometry;
-}
-
-function _getSegments(dataset) {
-  const segments = {};
-
-  dataset.SegmentSequence.forEach(segment => {
-    const cielab = segment.RecommendedDisplayCIELabValue;
-    const rgba = dcmjs.data.Colors.dicomlab2RGB(cielab).map(x =>
-      Math.round(x * 255)
-    );
-
-    rgba.push(255);
-    const segmentNumber = segment.SegmentNumber;
-
-    segments[segmentNumber] = {
-      color: rgba,
-      functionalGroups: [],
-      offset: null,
-      size: null,
-      pixelData: null,
-      label: segment.SegmentLabel,
-    };
-  });
-
-  // make a list of functional groups per segment
-  dataset.PerFrameFunctionalGroupsSequence.forEach(functionalGroup => {
-    const segmentNumber =
-      functionalGroup.SegmentIdentificationSequence.ReferencedSegmentNumber;
-    segments[segmentNumber].functionalGroups.push(functionalGroup);
-  });
-
-  return _getPixelData(dataset, segments);
-}
-
 function getSopClassHandlerModule({ servicesManager, extensionManager }) {
   const getDisplaySetsFromSeries = instances => {
     return _getDisplaySetsFromSeries(

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

@@ -6,6 +6,7 @@ import { Types } from '@ohif/core';
 import getSopClassHandlerModule from './getSopClassHandlerModule';
 import PanelSegmentation from './panels/PanelSegmentation';
 import getHangingProtocolModule from './getHangingProtocolModule';
+import hydrateSEGDisplaySet from './utils/_hydrateSEG';
 
 const Component = React.lazy(() => {
   return import(
@@ -69,6 +70,7 @@ const extension = {
         <OHIFCornerstoneSEGViewport
           servicesManager={servicesManager}
           extensionManager={extensionManager}
+          commandsManager={commandsManager}
           {...props}
         />
       );
@@ -88,4 +90,5 @@ const extension = {
   getHangingProtocolModule,
 };
 
-export default extension;
+export default extension;
+export { hydrateSEGDisplaySet };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Dialog } from '@ohif/ui';
+import { Input, Dialog, ButtonEnums } from '@ohif/ui';
 
 function callInputDialog(uiDialogService, label, callback) {
   const dialogId = 'enter-segment-label';
@@ -29,8 +29,8 @@ function callInputDialog(uiDialogService, label, callback) {
         noCloseButton: true,
         onClose: () => uiDialogService.dismiss({ id: dialogId }),
         actions: [
-          { id: 'cancel', text: 'Cancel', type: 'primary' },
-          { id: 'save', text: 'Confirm', type: 'secondary' },
+          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+          { id: 'save', text: 'Confirm', type: ButtonEnums.type.primary },
         ],
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {

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

@@ -0,0 +1,16 @@
+import dcmjs from 'dcmjs';
+
+/**
+ * Converts a CIELAB color to an RGB color using the dcmjs library.
+ * @param cielab - The CIELAB color to convert.
+ * @returns The RGB color as an array of three integers between 0 and 255.
+ */
+function dicomlabToRGB(cielab: number[]): number[] {
+  const rgb = dcmjs.data.Colors.dicomlab2RGB(cielab).map(x =>
+    Math.round(x * 255)
+  );
+
+  return rgb;
+}
+
+export { dicomlabToRGB };

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

@@ -1,3 +1,4 @@
+import { ButtonEnums } from '@ohif/ui';
 import hydrateSEGDisplaySet from './_hydrateSEG';
 
 const RESPONSE = {
@@ -10,6 +11,7 @@ function promptHydrateSEG({
   servicesManager,
   segDisplaySet,
   viewportIndex,
+  preHydrateCallbacks,
 }) {
   const { uiViewportDialogService } = servicesManager.services;
 
@@ -20,6 +22,10 @@ function promptHydrateSEG({
     );
 
     if (promptResult === RESPONSE.HYDRATE_SEG) {
+      preHydrateCallbacks?.forEach(callback => {
+        callback();
+      });
+
       const isHydrated = await hydrateSEGDisplaySet({
         segDisplaySet,
         viewportIndex,
@@ -36,12 +42,12 @@ function _askHydrate(uiViewportDialogService, viewportIndex) {
     const message = 'Do you want to open this Segmentation?';
     const actions = [
       {
-        type: 'secondary',
+        type: ButtonEnums.type.secondary,
         text: 'No',
         value: RESPONSE.CANCEL,
       },
       {
-        type: 'primary',
+        type: ButtonEnums.type.primary,
         text: 'Yes',
         value: RESPONSE.HYDRATE_SEG,
       },

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

@@ -24,6 +24,7 @@ function OHIFCornerstoneSEGViewport(props) {
     viewportLabel,
     servicesManager,
     extensionManager,
+    commandsManager,
   } = props;
 
   const { t } = useTranslation('SEGViewport');
@@ -48,7 +49,6 @@ function OHIFCornerstoneSEGViewport(props) {
   const [viewportGrid, viewportGridService] = useViewportGrid();
 
   // States
-  const [isToolGroupCreated, setToolGroupCreated] = useState(false);
   const [selectedSegment, setSelectedSegment] = useState(1);
 
   // Hydration means that the SEG is opened and segments are loaded into the
@@ -71,7 +71,8 @@ function OHIFCornerstoneSEGViewport(props) {
 
   const referencedDisplaySet = segDisplaySet.getReferenceDisplaySet();
   const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(
-    referencedDisplaySet
+    referencedDisplaySet,
+    segDisplaySet
   );
 
   referencedDisplaySetRef.current = {
@@ -92,6 +93,14 @@ function OHIFCornerstoneSEGViewport(props) {
     setElement(null);
   };
 
+  const storePresentationState = useCallback(() => {
+    viewportGrid?.viewports.forEach(({ viewportIndex }) => {
+      commandsManager.runCommand('storePresentation', {
+        viewportIndex,
+      });
+    });
+  }, [viewportGrid]);
+
   const getCornerstoneViewport = useCallback(() => {
     const { component: Component } = extensionManager.getModuleEntry(
       '@ohif/extension-cornerstone.viewportModule.cornerstone'
@@ -158,6 +167,7 @@ function OHIFCornerstoneSEGViewport(props) {
       servicesManager,
       viewportIndex,
       segDisplaySet,
+      preHydrateCallbacks: [storePresentationState],
     }).then(isHydrated => {
       if (isHydrated) {
         setIsHydrated(true);
@@ -247,8 +257,6 @@ function OHIFCornerstoneSEGViewport(props) {
       toolGroupId
     );
 
-    setToolGroupCreated(true);
-
     return () => {
       // remove the segmentation representations if seg displayset changed
       segmentationService.removeSegmentationRepresentationFromToolGroup(
@@ -308,6 +316,13 @@ function OHIFCornerstoneSEGViewport(props) {
   } = referencedDisplaySetRef.current.metadata;
 
   const onStatusClick = async () => {
+    // Before hydrating a SEG and make it added to all viewports in the grid
+    // that share the same frameOfReferenceUID, we need to store the viewport grid
+    // presentation state, so that we can restore it after hydrating the SEG. This is
+    // required if the user has changed the viewport (other viewport than SEG viewport)
+    // presentation state (w/l and invert) and then opens the SEG. If we don't store
+    // the presentation state, the viewport will be reset to the default presentation
+    storePresentationState();
     const isHydrated = await hydrateSEGDisplaySet({
       segDisplaySet,
       viewportIndex,
@@ -316,7 +331,6 @@ function OHIFCornerstoneSEGViewport(props) {
 
     setIsHydrated(isHydrated);
   };
-
   return (
     <>
       <ViewportActionBar
@@ -343,10 +357,13 @@ function OHIFCornerstoneSEGViewport(props) {
             patientSex: PatientSex || '',
             patientAge: PatientAge || '',
             MRN: PatientID || '',
-            thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
+            thickness: SliceThickness
+              ? utils.roundNumber(SliceThickness, 2)
+              : '',
+            thicknessUnits: SliceThickness !== undefined ? 'mm' : '',
             spacing:
               SpacingBetweenSlices !== undefined
-                ? `${SpacingBetweenSlices.toFixed(2)}mm`
+                ? utils.roundNumber(SpacingBetweenSlices, 2)
                 : '',
             scanner: ManufacturerModelName || '',
           },
@@ -381,20 +398,28 @@ OHIFCornerstoneSEGViewport.defaultProps = {
   customProps: {},
 };
 
-function _getReferencedDisplaySetMetadata(referencedDisplaySet) {
+function _getReferencedDisplaySetMetadata(referencedDisplaySet, segDisplaySet) {
+  const {
+    SharedFunctionalGroupsSequence: [SharedFunctionalGroup],
+  } = segDisplaySet.instance;
+  const {
+    PixelMeasuresSequence: [PixelMeasures],
+  } = SharedFunctionalGroup;
+  const { SpacingBetweenSlices, SliceThickness } = PixelMeasures;
+
   const image0 = referencedDisplaySet.images[0];
   const referencedDisplaySetMetadata = {
     PatientID: image0.PatientID,
     PatientName: image0.PatientName,
     PatientSex: image0.PatientSex,
     PatientAge: image0.PatientAge,
-    SliceThickness: image0.SliceThickness,
+    SliceThickness: image0.SliceThickness || SliceThickness,
     StudyDate: image0.StudyDate,
     SeriesDescription: image0.SeriesDescription,
     SeriesInstanceUID: image0.SeriesInstanceUID,
     SeriesNumber: image0.SeriesNumber,
     ManufacturerModelName: image0.ManufacturerModelName,
-    SpacingBetweenSlices: image0.SpacingBetweenSlices,
+    SpacingBetweenSlices: image0.SpacingBetweenSlices || SpacingBetweenSlices,
   };
 
   return referencedDisplaySetMetadata;

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

@@ -2,13 +2,12 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon, Tooltip } from '@ohif/ui';
 
-
 export default function _getStatusComponent({ isHydrated, onStatusClick }) {
   let ToolTipMessage = null;
   let StatusIcon = null;
 
-  const {t} = useTranslation("Common");
-  const loadStr = t("LOAD");
+  const { t } = useTranslation('Common');
+  const loadStr = t('LOAD');
 
   switch (isHydrated) {
     case true:
@@ -18,7 +17,7 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
         <div>This Segmentation is loaded in the segmentation panel</div>
       );
       break;
-  case false:
+    case false:
       StatusIcon = () => <Icon name="status-untracked" />;
 
       ToolTipMessage = () => <div>Click LOAD to load segmentation.</div>;
@@ -42,7 +41,6 @@ export default function _getStatusComponent({ isHydrated, onStatusClick }) {
     </div>
   );
 
-
   return (
     <>
       {ToolTipMessage && (

extensions/cornerstone-dicom-sr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.7.0-beta.2",
+  "version": "3.7.0-beta.49",
   "description": "OHIF extension for an SR Cornerstone Viewport",
   "author": "OHIF",
   "license": "MIT",
@@ -32,10 +32,10 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.7.0-beta.2",
-    "@ohif/extension-cornerstone": "3.7.0-beta.2",
-    "@ohif/extension-measurement-tracking": "3.7.0-beta.2",
-    "@ohif/ui": "3.7.0-beta.2",
+    "@ohif/core": "3.7.0-beta.49",
+    "@ohif/extension-cornerstone": "3.7.0-beta.49",
+    "@ohif/extension-measurement-tracking": "3.7.0-beta.49",
+    "@ohif/ui": "3.7.0-beta.49",
     "dcmjs": "^0.29.5",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
@@ -44,9 +44,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.1.8",
-    "@cornerstonejs/core": "^1.1.8",
-    "@cornerstonejs/tools": "^1.1.8",
+    "@cornerstonejs/adapters": "^1.9.3",
+    "@cornerstonejs/core": "^1.9.3",
+    "@cornerstonejs/tools": "^1.9.3",
     "classnames": "^2.3.2"
   }
 }

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

@@ -308,8 +308,9 @@ function _measurementReferencesSOPInstanceUID(
       measurement.coords[0].ReferencedSOPSequence[0]?.ReferencedFrameNumber) ||
     1;
 
-  if (frameNumber && Number(frameNumber) !== Number(ReferencedFrameNumber))
+  if (frameNumber && Number(frameNumber) !== Number(ReferencedFrameNumber)) {
     return false;
+  }
 
   for (let j = 0; j < coords.length; j++) {
     const coord = coords[j];
@@ -670,7 +671,9 @@ function _getReferencedImagesList(ImagingMeasurementReportContentSequence) {
 
   _getSequenceAsArray(ImageLibraryGroup.ContentSequence).forEach(item => {
     const { ReferencedSOPSequence } = item;
-    if (!ReferencedSOPSequence) return;
+    if (!ReferencedSOPSequence) {
+      return;
+    }
     for (const ref of _getSequenceAsArray(ReferencedSOPSequence)) {
       if (ref.ReferencedSOPClassUID) {
         const { ReferencedSOPClassUID, ReferencedSOPInstanceUID } = ref;
@@ -687,7 +690,9 @@ function _getReferencedImagesList(ImagingMeasurementReportContentSequence) {
 }
 
 function _getSequenceAsArray(sequence) {
-  if (!sequence) return [];
+  if (!sequence) {
+    return [];
+  }
   return Array.isArray(sequence) ? sequence : [sequence];
 }
 

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

@@ -314,18 +314,16 @@ export default class DICOMSRDisplayTool extends AnnotationTool {
       );
       let canvasCorners;
       if (rotation == 90 || rotation == 270) {
-        canvasCorners = <Array<Types.Point2>>(
-          utilities.math.ellipse.getCanvasEllipseCorners([
-            canvasCoordinates[2],
-            canvasCoordinates[3],
-            canvasCoordinates[0],
-            canvasCoordinates[1],
-          ])
-        );
+        canvasCorners = utilities.math.ellipse.getCanvasEllipseCorners([
+          canvasCoordinates[2],
+          canvasCoordinates[3],
+          canvasCoordinates[0],
+          canvasCoordinates[1],
+        ]) as Array<Types.Point2>;
       } else {
-        canvasCorners = <Array<Types.Point2>>(
-          utilities.math.ellipse.getCanvasEllipseCorners(canvasCoordinates)
-        );
+        canvasCorners = utilities.math.ellipse.getCanvasEllipseCorners(
+          canvasCoordinates
+        ) as Array<Types.Point2>;
       }
 
       const lineUID = `${index}`;

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

@@ -3,12 +3,16 @@ import { DisplaySetService, classes } from '@ohif/core';
 const ImageSet = classes.ImageSet;
 
 const findInstance = (measurement, displaySetService: DisplaySetService) => {
-  const { displaySetInstanceUID, ReferencedSOPInstanceUID: sopUid } =
-    measurement;
+  const {
+    displaySetInstanceUID,
+    ReferencedSOPInstanceUID: sopUid,
+  } = measurement;
   const referencedDisplaySet = displaySetService.getDisplaySetByUID(
     displaySetInstanceUID
   );
-  if (!referencedDisplaySet.images) return;
+  if (!referencedDisplaySet.images) {
+    return;
+  }
   return referencedDisplaySet.images.find(it => it.SOPInstanceUID === sopUid);
 };
 
@@ -24,8 +28,12 @@ const findReferencedInstances = (
   const instanceById = {};
   for (const measurement of displaySet.measurements) {
     const { imageId } = measurement;
-    if (!imageId) continue;
-    if (instanceById[imageId]) continue;
+    if (!imageId) {
+      continue;
+    }
+    if (instanceById[imageId]) {
+      continue;
+    }
 
     const instance = findInstance(measurement, displaySetService);
     if (!instance) {

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

@@ -9,7 +9,9 @@ const findInstanceMetadataBySopInstanceUID = (displaySets, SOPInstanceUID) => {
   let instanceFound;
 
   displaySets.find(displaySet => {
-    if (!displaySet.images) return false;
+    if (!displaySet.images) {
+      return false;
+    }
 
     instanceFound = displaySet.images.find(
       instanceMetadata =>

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

@@ -12,20 +12,26 @@ const CORNERSTONE_3D_TOOLS_SOURCE_VERSION = '0.1';
 const supportedLegacyCornerstoneTags = ['cornerstoneTools@^4.0.0'];
 
 const convertCode = (codingValues, code) => {
-  if (!code || code.CodingSchemeDesignator === 'CORNERSTONEJS') return;
+  if (!code || code.CodingSchemeDesignator === 'CORNERSTONEJS') {
+    return;
+  }
   const ref = `${code.CodingSchemeDesignator}:${code.CodeValue}`;
   const ret = { ...codingValues[ref], ref, ...code, text: code.CodeMeaning };
   return ret;
 };
 
 const convertSites = (codingValues, sites) => {
-  if (!sites || !sites.length) return;
+  if (!sites || !sites.length) {
+    return;
+  }
   const ret = [];
   // Do as a loop to convert away from Proxy instances
   for (let i = 0; i < sites.length; i++) {
     // Deal with irregular conversion from dcmjs
     const site = convertCode(codingValues, sites[i][0] || sites[i]);
-    if (site) ret.push(site);
+    if (site) {
+      ret.push(site);
+    }
   }
   return (ret.length && ret) || undefined;
 };
@@ -287,7 +293,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/viewports/OHIFCornerstoneSRViewport.tsx

@@ -225,6 +225,7 @@ function OHIFCornerstoneSRViewport(props) {
         }}
         onElementEnabled={onElementEnabled}
         initialImageIndex={initialImageIndex}
+        isJumpToMeasurementDisabled={true}
       ></Component>
     );
   }, [activeImageDisplaySetData, viewportIndex, measurementSelected]);

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "3.7.0-beta.2",
+  "version": "3.7.0-beta.49",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -36,9 +36,9 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.1.8",
-    "@ohif/core": "3.7.0-beta.2",
-    "@ohif/ui": "3.7.0-beta.2",
+    "@cornerstonejs/dicom-image-loader": "^1.9.3",
+    "@ohif/core": "3.7.0-beta.49",
+    "@ohif/ui": "3.7.0-beta.49",
     "dcmjs": "^0.29.6",
     "dicom-parser": "^1.8.21",
     "hammerjs": "^2.0.8",
@@ -52,10 +52,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.1.8",
-    "@cornerstonejs/core": "^1.1.8",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.1.8",
-    "@cornerstonejs/tools": "^1.1.8",
+    "@cornerstonejs/adapters": "^1.9.3",
+    "@cornerstonejs/core": "^1.9.3",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.9.3",
+    "@cornerstonejs/tools": "^1.9.3",
     "@kitware/vtk.js": "27.3.1",
     "html2canvas": "^1.4.1",
     "lodash.debounce": "4.0.8",

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -10,13 +10,7 @@ import {
   utilities as csUtils,
 } from '@cornerstonejs/core';
 import { MeasurementService } from '@ohif/core';
-import {
-  CinePlayer,
-  useCine,
-  useViewportGrid,
-  Notification,
-  useViewportDialog,
-} from '@ohif/ui';
+import { Notification, useViewportDialog } from '@ohif/ui';
 import {
   IStackViewport,
   IVolumeViewport,
@@ -28,6 +22,7 @@ import './OHIFCornerstoneViewport.css';
 import CornerstoneOverlays from './Overlays/CornerstoneOverlays';
 import getSOPInstanceAttributes from '../utils/measurementServiceMappings/utils/getSOPInstanceAttributes';
 import CornerstoneServices from '../types/CornerstoneServices';
+import CinePlayer from '../components/CinePlayer';
 
 const STACK = 'stack';
 
@@ -117,8 +112,10 @@ const OHIFCornerstoneViewport = React.memo(props => {
     viewportOptions,
     displaySetOptions,
     servicesManager,
+    commandsManager,
     onElementEnabled,
     onElementDisabled,
+    isJumpToMeasurementDisabled,
     // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation
     // of the imageData in the OHIFCornerstoneViewport. This prop is used
     // to set the initial state of the viewport's first image to render
@@ -126,10 +123,7 @@ 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 {
@@ -145,74 +139,6 @@ const OHIFCornerstoneViewport = React.memo(props => {
   } = servicesManager.services as CornerstoneServices;
 
   const [viewportDialogState] = useViewportDialog();
-
-  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`;
@@ -227,33 +153,6 @@ const OHIFCornerstoneViewport = React.memo(props => {
     }
   }, [elementRef]);
 
-  const storePresentation = () => {
-    const currentPresentation = cornerstoneViewportService.getPresentation(
-      viewportIndex
-    );
-    if (!currentPresentation || !currentPresentation.presentationIds) return;
-    const {
-      lutPresentationStore,
-      positionPresentationStore,
-    } = stateSyncService.getState();
-    const { presentationIds } = currentPresentation;
-    const { lutPresentationId, positionPresentationId } = presentationIds || {};
-    const storeState = {};
-    if (lutPresentationId) {
-      storeState.lutPresentationStore = {
-        ...lutPresentationStore,
-        [lutPresentationId]: currentPresentation,
-      };
-    }
-    if (positionPresentationId) {
-      storeState.positionPresentationStore = {
-        ...positionPresentationStore,
-        [positionPresentationId]: currentPresentation,
-      };
-    }
-    stateSyncService.store(storeState);
-  };
-
   const cleanUpServices = useCallback(() => {
     const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
       viewportIndex
@@ -331,7 +230,9 @@ const OHIFCornerstoneViewport = React.memo(props => {
     setImageScrollBarHeight();
 
     return () => {
-      storePresentation();
+      commandsManager.runCommand('storePresentation', {
+        viewportIndex,
+      });
 
       cleanUpServices();
 
@@ -434,7 +335,6 @@ const OHIFCornerstoneViewport = React.memo(props => {
         displaySetOptions,
         presentations
       );
-
       if (measurement) {
         cs3DTools.annotation.selection.setAnnotationSelected(measurement.uid);
       }
@@ -454,6 +354,10 @@ const OHIFCornerstoneViewport = React.memo(props => {
    * the cache for jumping to see if there is any jump queued, then we jump to the correct slice.
    */
   useEffect(() => {
+    if (isJumpToMeasurementDisabled) {
+      return;
+    }
+
     const unsubscribeFromJumpToMeasurementEvents = _subscribeToJumpToMeasurementEvents(
       measurementService,
       displaySetService,
@@ -483,11 +387,8 @@ const OHIFCornerstoneViewport = React.memo(props => {
     <React.Fragment>
       <div className="viewport-wrapper">
         <ReactResizeDetector
-          handleWidth
-          handleHeight
-          skipOnMount={true} // Todo: make these configurable
-          refreshMode={'debounce'}
-          refreshRate={200} // transition amount in side panel
+          refreshMode="debounce"
+          refreshRate={50} // Wait 50 ms after last move to render
           onResize={onResize}
           targetRef={elementRef.current}
         />
@@ -505,25 +406,11 @@ const OHIFCornerstoneViewport = React.memo(props => {
           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,
-              })
-            }
-          />
-        )}
+        <CinePlayer
+          enabledVPElement={enabledVPElement}
+          viewportIndex={viewportIndex}
+          servicesManager={servicesManager}
+        />
       </div>
       <div className="absolute w-full">
         {viewportDialogState.viewportIndex === viewportIndex && (
@@ -558,7 +445,9 @@ function _subscribeToJumpToMeasurementEvents(
     props => {
       cacheJumpToMeasurementEvent = props;
       const { viewportIndex: jumpIndex, measurement, isConsumed } = props;
-      if (!measurement || isConsumed) return;
+      if (!measurement || isConsumed) {
+        return;
+      }
       if (cacheJumpToMeasurementEvent.cornerstoneViewport === undefined) {
         // Decide on which viewport should handle this
         cacheJumpToMeasurementEvent.cornerstoneViewport = cornerstoneViewportService.getViewportIndexToJump(
@@ -595,7 +484,9 @@ function _checkForCachedJumpToMeasurementEvents(
   viewportGridService,
   cornerstoneViewportService
 ) {
-  if (!cacheJumpToMeasurementEvent) return;
+  if (!cacheJumpToMeasurementEvent) {
+    return;
+  }
   if (cacheJumpToMeasurementEvent.isConsumed) {
     cacheJumpToMeasurementEvent = null;
     return;
@@ -603,7 +494,9 @@ function _checkForCachedJumpToMeasurementEvents(
   const displaysUIDs = displaySets.map(
     displaySet => displaySet.displaySetInstanceUID
   );
-  if (!displaysUIDs?.length) return;
+  if (!displaysUIDs?.length) {
+    return;
+  }
 
   // Jump to measurement if the measurement exists
   const { measurement } = cacheJumpToMeasurementEvent;
@@ -654,7 +547,6 @@ function _jumpToMeasurement(
   const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
     viewportIndex
   );
-
   if (enabledElement) {
     // See how the jumpToSlice() of Cornerstone3D deals with imageIdx param.
     const viewport = enabledElement.viewport as
@@ -716,6 +608,10 @@ function _jumpToMeasurement(
 // Component displayName
 OHIFCornerstoneViewport.displayName = 'OHIFCornerstoneViewport';
 
+OHIFCornerstoneViewport.defaultProps = {
+  isJumpToMeasurementDisabled: false,
+};
+
 OHIFCornerstoneViewport.propTypes = {
   viewportIndex: PropTypes.number.isRequired,
   displaySets: PropTypes.array.isRequired,
@@ -724,6 +620,7 @@ OHIFCornerstoneViewport.propTypes = {
   displaySetOptions: PropTypes.arrayOf(PropTypes.any),
   servicesManager: PropTypes.object.isRequired,
   onElementEnabled: PropTypes.func,
+  isJumpToMeasurementDisabled: PropTypes.bool,
   // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation
   // of the imageData in the OHIFCornerstoneViewport. This prop is used
   // to set the initial state of the viewport's first image to render

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

@@ -36,8 +36,9 @@ function CornerstoneOverlays(props) {
   }
 
   if (viewportData) {
-    const viewportInfo =
-      cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
+    const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
+      viewportIndex
+    );
 
     if (viewportInfo?.viewportOptions?.customViewportProps?.hideOverlays) {
       return null;

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

@@ -379,7 +379,7 @@ function _getViewportInstance(viewportData, imageIndex) {
   if (viewportData.viewportType === Enums.ViewportType.STACK) {
     imageId = viewportData.data.imageIds[imageIndex];
   } else if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC) {
-    const volumes = viewportData.volumes;
+    const volumes = viewportData.data;
     if (volumes && volumes.length == 1) {
       const volume = volumes[0];
       imageId = volume.imageIds[imageIndex];

extensions/cornerstone/src/commandsModule.ts

@@ -28,6 +28,7 @@ function commandsModule({
     toolGroupService,
     cineService,
     toolbarService,
+    stateSyncService,
     uiDialogService,
     cornerstoneViewportService,
     uiNotificationService,
@@ -457,11 +458,9 @@ function commandsModule({
 
       const { viewport } = enabledElement;
 
-      if (viewport instanceof StackViewport) {
-        const { invert } = viewport.getProperties();
-        viewport.setProperties({ invert: !invert });
-        viewport.render();
-      }
+      const { invert } = viewport.getProperties();
+      viewport.setProperties({ invert: !invert });
+      viewport.render();
     },
     resetViewport: () => {
       const enabledElement = _getActiveViewportEnabledElement();
@@ -618,6 +617,35 @@ function commandsModule({
       );
       toolGroup.setToolEnabled(ReferenceLinesTool.toolName);
     },
+    storePresentation: ({ viewportIndex }) => {
+      const presentation = cornerstoneViewportService.getPresentation(
+        viewportIndex
+      );
+      if (!presentation || !presentation.presentationIds) {
+        return;
+      }
+      const {
+        lutPresentationStore,
+        positionPresentationStore,
+      } = stateSyncService.getState();
+      const { presentationIds } = presentation;
+      const { lutPresentationId, positionPresentationId } =
+        presentationIds || {};
+      const storeState = {};
+      if (lutPresentationId) {
+        storeState.lutPresentationStore = {
+          ...lutPresentationStore,
+          [lutPresentationId]: presentation,
+        };
+      }
+      if (positionPresentationId) {
+        storeState.positionPresentationStore = {
+          ...positionPresentationStore,
+          [positionPresentationId]: presentation,
+        };
+      }
+      stateSyncService.store(storeState);
+    },
   };
 
   const definitions = {
@@ -742,6 +770,11 @@ function commandsModule({
     toggleReferenceLines: {
       commandFn: actions.toggleReferenceLines,
     },
+    storePresentation: {
+      commandFn: actions.storePresentation,
+      storeContexts: [],
+      options: {},
+    },
   };
 
   return {

extensions/cornerstone/src/components/CinePlayer/CinePlayer.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect } from 'react';
+import { CinePlayer, useCine, useViewportGrid } from '@ohif/ui';
+import { Enums, eventTarget } from '@cornerstonejs/core';
+
+function WrappedCinePlayer({
+  enabledVPElement,
+  viewportIndex,
+  servicesManager,
+}) {
+  const { toolbarService, customizationService } = servicesManager.services;
+  const [{ isCineEnabled, cines }, cineService] = useCine();
+  const [{ activeViewportIndex }] = useViewportGrid();
+
+  const { component: CinePlayerComponent = CinePlayer } =
+    customizationService.get('cinePlayer') ?? {};
+
+  const handleCineClose = () => {
+    toolbarService.recordInteraction({
+      groupId: 'MoreTools',
+      itemId: 'cine',
+      interactionType: 'toggle',
+      commands: [
+        {
+          commandName: 'toggleCine',
+          commandOptions: {},
+          context: 'CORNERSTONE',
+        },
+      ],
+    });
+  };
+
+  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;
+
+  return (
+    isCineEnabled && (
+      <CinePlayerComponent
+        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,
+          })
+        }
+      />
+    )
+  );
+}
+
+export default WrappedCinePlayer;

extensions/cornerstone/src/components/CinePlayer/index.ts

@@ -0,0 +1,3 @@
+import CinePlayer from './CinePlayer';
+
+export default CinePlayer;

extensions/cornerstone/src/components/DicomUpload/DicomUpload.tsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import DicomFileUploader from '../../utils/DicomFileUploader';
 import DicomUploadProgress from './DicomUploadProgress';
-import { Button } from '@ohif/ui';
+import { Button, ButtonEnums } from '@ohif/ui';
 import './DicomUpload.css';
 
 type DicomUploadProps = {
@@ -46,12 +46,7 @@ function DicomUpload({
               <Dropzone onDrop={onDrop} noDrag>
                 {({ getRootProps, getInputProps }) => (
                   <div {...getRootProps()}>
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      disabled={false}
-                      onClick={() => {}}
-                    >
+                    <Button disabled={false} onClick={() => {}}>
                       {'Add files'}
                       <input {...getInputProps()} />
                     </Button>
@@ -62,9 +57,7 @@ function DicomUpload({
                 {({ getRootProps, getInputProps }) => (
                   <div {...getRootProps()}>
                     <Button
-                      variant="contained"
-                      color="primaryDark"
-                      border="primaryActive"
+                      type={ButtonEnums.type.secondary}
                       disabled={false}
                       onClick={() => {}}
                     >

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx

@@ -308,13 +308,7 @@ function DicomUploadProgress({
             } ${
               dicomFileUploaderArr.length > 1 ? 'files' : 'file'
             } completed.`}</span>
-            <Button
-              variant="contained"
-              color="primary"
-              disabled={false}
-              className="ml-auto"
-              onClick={onComplete}
-            >
+            <Button disabled={false} className="ml-auto" onClick={onComplete}>
               {'Close'}
             </Button>
           </>

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx

@@ -27,7 +27,6 @@ const DicomUploadProgressItem = memo(
     const [failedReason, setFailedReason] = useState('');
     const [status, setStatus] = useState(dicomFileUploader.getStatus());
 
-    console.info(`${dicomFileUploader.getFileId()}`);
     const isComplete = useCallback(() => {
       return (
         status === UploadStatus.Failed ||

extensions/cornerstone/src/index.tsx

@@ -24,7 +24,6 @@ import { toolNames } from './initCornerstoneTools';
 import { getEnabledElement, reset as enabledElementReset } from './state';
 import dicomLoaderService from './utils/dicomLoaderService';
 import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
-import { registerColormap } from './utils/colormap/transferFunctionHelpers';
 
 import { id } from './id';
 import * as csWADOImageLoader from './initWADOImageLoader.js';

extensions/cornerstone/src/init.tsx

@@ -26,6 +26,7 @@ import nthLoader from './utils/nthLoader';
 import interleaveTopToBottom from './utils/interleaveTopToBottom';
 import initContextMenu from './initContextMenu';
 import initDoubleClick from './initDoubleClick';
+import { CornerstoneServices } from './types';
 
 // TODO: Cypress tests are currently grabbing this from the window?
 window.cornerstone = cornerstone;
@@ -53,12 +54,11 @@ export default async function init({
     },
   });
 
-  // For debugging large datasets
-  const MAX_CACHE_SIZE_1GB = 1073741824;
-  const maxCacheSize = appConfig.maxCacheSize;
-  cornerstone.cache.setMaxCacheSize(
-    maxCacheSize ? maxCacheSize : MAX_CACHE_SIZE_1GB
-  );
+  // For debugging large datasets, otherwise prefer the defaults
+  const { maxCacheSize } = appConfig;
+  if (maxCacheSize) {
+    cornerstone.cache.setMaxCacheSize(maxCacheSize);
+  }
 
   initCornerstoneTools();
 
@@ -69,10 +69,7 @@ export default async function init({
 
   const {
     userAuthenticationService,
-    measurementService,
     customizationService,
-    displaySetService,
-    uiDialogService,
     uiModalService,
     uiNotificationService,
     cineService,
@@ -81,7 +78,7 @@ export default async function init({
     toolGroupService,
     viewportGridService,
     stateSyncService,
-  } = servicesManager.services;
+  } = servicesManager.services as CornerstoneServices;
 
   window.services = servicesManager.services;
   window.extensionManager = extensionManager;
@@ -166,7 +163,7 @@ export default async function init({
     prefetch: appConfig?.maxNumRequests?.prefetch || 10,
   };
 
-  initWADOImageLoader(userAuthenticationService, appConfig);
+  initWADOImageLoader(userAuthenticationService, appConfig, extensionManager);
 
   /* Measurement Service */
   this.measurementServiceSource = connectToolsToMeasurementService(

extensions/cornerstone/src/initContextMenu.ts

@@ -35,9 +35,15 @@ const DEFAULT_CONTEXT_MENU_CLICKS = {
 function getEventName(evt) {
   const button = evt.detail.event.which;
   const nameArr = [];
-  if (evt.detail.event.altKey) nameArr.push('alt');
-  if (evt.detail.event.ctrlKey) nameArr.push('ctrl');
-  if (evt.detail.event.shiftKey) nameArr.push('shift');
+  if (evt.detail.event.altKey) {
+    nameArr.push('alt');
+  }
+  if (evt.detail.event.ctrlKey) {
+    nameArr.push('ctrl');
+  }
+  if (evt.detail.event.shiftKey) {
+    nameArr.push('shift');
+  }
   nameArr.push('button');
   nameArr.push(button);
   return nameArr.join('');
@@ -73,7 +79,9 @@ function initContextMenu({
   function elementEnabledHandler(evt) {
     const { viewportId, element } = evt.detail;
     const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-    if (!viewportInfo) return;
+    if (!viewportInfo) {
+      return;
+    }
     const viewportIndex = viewportInfo.getViewportIndex();
     // TODO check update upstream
     setEnabledElement(viewportIndex, element);

extensions/cornerstone/src/initDoubleClick.ts

@@ -21,9 +21,15 @@ const DEFAULT_DOUBLE_CLICK = {
  */
 function getDoubleClickEventName(evt: CustomEvent) {
   const nameArr = [];
-  if (evt.detail.event.altKey) nameArr.push('alt');
-  if (evt.detail.event.ctrlKey) nameArr.push('ctrl');
-  if (evt.detail.event.shiftKey) nameArr.push('shift');
+  if (evt.detail.event.altKey) {
+    nameArr.push('alt');
+  }
+  if (evt.detail.event.ctrlKey) {
+    nameArr.push('ctrl');
+  }
+  if (evt.detail.event.shiftKey) {
+    nameArr.push('shift');
+  }
   nameArr.push('doubleClick');
   return nameArr.join('');
 }

extensions/cornerstone/src/initWADOImageLoader.js

@@ -5,7 +5,7 @@ import dicomImageLoader, {
   webWorkerManager,
 } from '@cornerstonejs/dicom-image-loader';
 import dicomParser from 'dicom-parser';
-import { errorHandler } from '@ohif/core';
+import { errorHandler, utils } from '@ohif/core';
 
 const { registerVolumeLoader } = volumeLoader;
 
@@ -35,7 +35,8 @@ function initWebWorkers(appConfig) {
 
 export default function initWADOImageLoader(
   userAuthenticationService,
-  appConfig
+  appConfig,
+  extensionManager
 ) {
   dicomImageLoader.external.cornerstone = cornerstone;
   dicomImageLoader.external.dicomParser = dicomParser;
@@ -55,18 +56,18 @@ export default function initWADOImageLoader(
       convertFloatPixelDataToInt: false,
     },
     beforeSend: function(xhr) {
+      //TODO should be removed in the future and request emitted by DicomWebDataSource
+      const sourceConfig =
+        extensionManager.getActiveDataSource()?.[0].getConfig() ?? {};
       const headers = userAuthenticationService.getAuthorizationHeader();
+      const acceptHeader = utils.generateAcceptHeader(
+        sourceConfig.acceptHeader,
+        sourceConfig.requestTransferSyntaxUID,
+        sourceConfig.omitQuotationForMultipartRequest
+      );
 
-      // Request:
-      // JPEG-LS Lossless (1.2.840.10008.1.2.4.80) if available, otherwise accept
-      // whatever transfer-syntax the origin server provides.
-      // For now we use image/jls and image/x-jls because some servers still use the old type
-      // http://dicom.nema.org/medical/dicom/current/output/html/part18.html
       const xhrRequestHeaders = {
-        Accept: appConfig.omitQuotationForMultipartRequest
-          ? 'multipart/related; type=application/octet-stream'
-          : 'multipart/related; type="application/octet-stream"',
-        // 'multipart/related; type="image/x-jls", multipart/related; type="image/jls"; transfer-syntax="1.2.840.10008.1.2.4.80", multipart/related; type="image/x-jls", multipart/related; type="application/octet-stream"; transfer-syntax=*',
+        Accept: acceptHeader,
       };
 
       if (headers) {

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

@@ -542,6 +542,7 @@ class SegmentationService extends PubSubService {
       id: segmentationId,
       displaySetInstanceUID: segDisplaySet.displaySetInstanceUID,
       type: representationType,
+      label: segDisplaySet.SeriesDescription,
       representationData: {
         [LABELMAP]: {
           volumeId: segmentationId,
@@ -562,11 +563,11 @@ class SegmentationService extends PubSubService {
       );
     }
 
-    const { segments, referencedVolumeId } = segDisplaySet;
+    const { labelmapBufferArray, referencedVolumeId } = segDisplaySet;
 
-    if (!segments || !referencedVolumeId) {
+    if (!labelmapBufferArray || !referencedVolumeId) {
       throw new Error(
-        'To create the segmentation from SEG displaySet, the displaySet should be loaded first, you can perform segDisplaySet.load() before calling this method.'
+        'No labelmapBufferArray or referencedVolumeId found for the SEG displaySet'
       );
     }
 
@@ -592,88 +593,27 @@ class SegmentationService extends PubSubService {
         },
       }
     );
-    const [rows, columns] = derivedVolume.dimensions;
     const derivedVolumeScalarData = derivedVolume.getScalarData();
 
-    const { imageIds } = referencedVolume;
-    const sopUIDImageIdIndexMap = imageIds.reduce((acc, imageId, index) => {
-      const { sopInstanceUid } = metaData.get('generalImageModule', imageId);
-      acc[sopInstanceUid] = index;
-      return acc;
-    }, {} as { [sopUID: string]: number });
+    const segmentsInfo = segDisplaySet.segMetadata.data;
+    derivedVolumeScalarData.set(new Uint8Array(labelmapBufferArray[0]));
 
-    const numSegments = Object.keys(segments).length;
-    // Note: ideally we could use the TypedArray set method, but since each
-    // slice can have multiple segments, we need to loop over each slice and
-    // set the segment value for each segment.
-    let overlappingSegments = false;
-
-    const _segmentInfoUpdate = (segmentInfo, segmentIndex) => {
-      const { pixelData: segPixelData } = segmentInfo;
-
-      let segmentX = 0;
-      let segmentY = 0;
-      let segmentZ = 0;
-      let count = 0;
-
-      for (const [
-        functionalGroupIndex,
-        functionalGroup,
-      ] of segmentInfo.functionalGroups.entries()) {
-        const {
-          ReferencedSOPInstanceUID,
-        } = functionalGroup.DerivationImageSequence.SourceImageSequence;
-
-        const imageIdIndex = sopUIDImageIdIndexMap[ReferencedSOPInstanceUID];
-
-        if (imageIdIndex === -1) {
-          return;
-        }
-
-        const step = rows * columns;
-
-        // we need a faster way to get the pixel data for the current
-        // functional group, which we use typed array view
-
-        const functionGroupPixelData = new Uint8Array(
-          segPixelData.buffer,
-          functionalGroupIndex * step,
-          step
-        );
-
-        const functionalGroupStartIndex = imageIdIndex * step;
-        const functionalGroupEndIndex = (imageIdIndex + 1) * step;
-
-        // Note: this for loop is not optimized, since DICOM SEG stores
-        // each segment as a separate labelmap so if there is a slice
-        // that has multiple segments, we will have to loop over each
-        // segment and we cannot use the TypedArray set method.
-        for (
-          let i = functionalGroupStartIndex, j = 0;
-          i < functionalGroupEndIndex;
-          i++, j++
-        ) {
-          if (functionGroupPixelData[j] !== 0) {
-            if (derivedVolumeScalarData[i] !== 0) {
-              overlappingSegments = true;
-            }
-
-            derivedVolumeScalarData[i] = segmentIndex;
-
-            // centroid calculations
-            segmentX += i % columns;
-            segmentY += Math.floor(i / columns) % rows;
-            segmentZ += Math.floor(i / (columns * rows));
-            count++;
-          }
-        }
+    segmentation.segments = segmentsInfo.map((segmentInfo, segmentIndex) => {
+      if (segmentIndex === 0) {
+        return;
       }
 
-      // centroid calculations
-      const x = Math.floor(segmentX / count);
-      const y = Math.floor(segmentY / count);
-      const z = Math.floor(segmentZ / count);
+      const {
+        SegmentedPropertyCategoryCodeSequence,
+        SegmentNumber,
+        SegmentLabel,
+        SegmentAlgorithmType,
+        SegmentAlgorithmName,
+        SegmentedPropertyTypeCodeSequence,
+        rgba,
+      } = segmentInfo;
 
+      const { x, y, z } = segDisplaySet.centroids.get(segmentIndex);
       const centerWorld = derivedVolume.imageData.indexToWorld([x, y, z]);
 
       segmentation.cachedStats = {
@@ -690,65 +630,31 @@ class SegmentationService extends PubSubService {
         },
       };
 
-      const numInitialized = Object.keys(segmentation.cachedStats.segmentCenter)
-        .length;
-
-      // Calculate percentage completed
-      const percentComplete = Math.round((numInitialized / numSegments) * 100);
-
-      this._broadcastEvent(EVENTS.SEGMENT_LOADING_COMPLETE, {
-        percentComplete,
-        numSegments: numSegments,
-      });
-    };
-
-    const promiseArray = [];
-
-    for (const segmentIndex in segments) {
-      const segmentInfo = segments[segmentIndex];
-
-      // Important: we need a non-blocking way to update the segmentation
-      // state, otherwise the UI will freeze and the user will not be able
-      // to interact with the app or progress bars will not be updated.
-      const promise = new Promise<void>((resolve, reject) => {
-        setTimeout(() => {
-          _segmentInfoUpdate(segmentInfo, segmentIndex);
-          resolve();
-        }, 0);
-      });
-
-      promiseArray.push(promise);
-    }
-
-    await Promise.all(promiseArray);
-
-    segmentation.segmentCount = Object.keys(segments).length;
-    segmentation.segments = [null]; // segment 0
-
-    Object.keys(segments).forEach(segmentIndex => {
-      const segmentInfo = segments[segmentIndex];
-      const segIndex = Number(segmentIndex);
-
-      segmentation.segments[segIndex] = {
-        label: segmentInfo.label || `Segment ${segIndex}`,
-        segmentIndex: Number(segmentIndex),
-        color: [
-          segmentInfo.color[0],
-          segmentInfo.color[1],
-          segmentInfo.color[2],
-        ],
-        opacity: segmentInfo.color[3],
+      return {
+        label: SegmentLabel || `Segment ${SegmentNumber}`,
+        segmentIndex: Number(SegmentNumber),
+        category: SegmentedPropertyCategoryCodeSequence
+          ? SegmentedPropertyCategoryCodeSequence.CodeMeaning
+          : '',
+        type: SegmentedPropertyTypeCodeSequence
+          ? SegmentedPropertyTypeCodeSequence.CodeMeaning
+          : '',
+        algorithmType: SegmentAlgorithmType,
+        algorithmName: SegmentAlgorithmName,
+        color: rgba,
+        opacity: 255,
         isVisible: true,
         isLocked: false,
       };
     });
 
+    segmentation.segmentCount = segmentsInfo.length - 1;
+
     segDisplaySet.isLoaded = true;
 
     this._broadcastEvent(EVENTS.SEGMENTATION_LOADING_COMPLETE, {
       segmentationId,
       segDisplaySet,
-      overlappingSegments,
     });
 
     return this.addOrUpdateSegmentation(segmentation, suppressEvents);
@@ -789,6 +695,7 @@ class SegmentationService extends PubSubService {
       id: segmentationId,
       displaySetInstanceUID: rtDisplaySetUID,
       type: representationType,
+      label: rtDisplaySet.SeriesDescription,
       representationData: {
         [CONTOUR]: {
           geometryIds,
@@ -816,45 +723,54 @@ class SegmentationService extends PubSubService {
     const segmentsCachedStats = {};
     const initializeContour = async rtStructData => {
       const { data, id, color, segmentIndex, geometryId } = rtStructData;
-      const geometry = await geometryLoader.createAndCacheGeometry(geometryId, {
-        geometryData: {
-          data,
-          id,
-          color,
-          frameOfReferenceUID: structureSet.frameOfReferenceUID,
+
+      // catch error instead of failing to allow loading to continue
+      try {
+        const geometry = await geometryLoader.createAndCacheGeometry(
+          geometryId,
+          {
+            geometryData: {
+              data,
+              id,
+              color,
+              frameOfReferenceUID: structureSet.frameOfReferenceUID,
+              segmentIndex,
+            },
+            type: csEnums.GeometryType.CONTOUR,
+          }
+        );
+
+        const contourSet = geometry.data;
+        const centroid = contourSet.getCentroid();
+
+        segmentsCachedStats[segmentIndex] = {
+          center: { world: centroid },
+          modifiedTime: rtDisplaySet.SeriesDate, // we use the SeriesDate as the modifiedTime since this is the first time we are creating the segmentation
+        };
+
+        segmentation.segments[segmentIndex] = {
+          label: id,
           segmentIndex,
-        },
-        type: csEnums.GeometryType.CONTOUR,
-      });
+          color,
+          ...SEGMENT_CONSTANT,
+        };
 
-      const contourSet = geometry.data;
-      const centroid = contourSet.getCentroid();
+        const numInitialized = Object.keys(segmentsCachedStats).length;
 
-      segmentsCachedStats[segmentIndex] = {
-        center: { world: centroid },
-        modifiedTime: rtDisplaySet.SeriesDate, // we use the SeriesDate as the modifiedTime since this is the first time we are creating the segmentation
-      };
+        // Calculate percentage completed
+        const percentComplete = Math.round(
+          (numInitialized / allRTStructData.length) * 100
+        );
 
-      segmentation.segments[segmentIndex] = {
-        label: id,
-        segmentIndex,
-        color,
-        ...SEGMENT_CONSTANT,
-      };
-
-      const numInitialized = Object.keys(segmentsCachedStats).length;
-
-      // Calculate percentage completed
-      const percentComplete = Math.round(
-        (numInitialized / allRTStructData.length) * 100
-      );
-
-      this._broadcastEvent(EVENTS.SEGMENT_LOADING_COMPLETE, {
-        percentComplete,
-        // Note: this is not the geometryIds length since there might be
-        // some missing ROINumbers
-        numSegments: allRTStructData.length,
-      });
+        this._broadcastEvent(EVENTS.SEGMENT_LOADING_COMPLETE, {
+          percentComplete,
+          // Note: this is not the geometryIds length since there might be
+          // some missing ROINumbers
+          numSegments: allRTStructData.length,
+        });
+      } catch (e) {
+        console.warn(e);
+      }
     };
 
     const promiseArray = [];

extensions/cornerstone/src/services/SyncGroupService/SyncGroupService.ts

@@ -15,7 +15,7 @@ const EVENTS = {
  * sync group declared.
  */
 export type SyncCreator = (
-  type: string,
+  id: string,
   options?: Record<string, unknown>
 ) => Synchronizer;
 
@@ -83,7 +83,7 @@ export default class SyncGroupService {
    * @param type is the type of the synchronizer to create
    * @param creator
    */
-  public setSynchronizer(type: string, creator: SyncCreator): void {
+  public addSynchronizerType(type: string, creator: SyncCreator): void {
     this.synchronizerCreators[type.toLowerCase()] = creator;
   }
 

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

@@ -190,18 +190,26 @@ class CornerstoneViewportService extends PubSubService
 
   public setPresentations(viewport, presentations?: Presentations): void {
     const properties = presentations?.lutPresentation?.properties;
-    if (properties) viewport.setProperties(properties);
+    if (properties) {
+      viewport.setProperties(properties);
+    }
     const camera = presentations?.positionPresentation?.camera;
-    if (camera) viewport.setCamera(camera);
+    if (camera) {
+      viewport.setCamera(camera);
+    }
   }
 
   public getPresentation(viewportIndex: number): Presentation {
     const viewportInfo = this.viewportsInfo.get(viewportIndex);
-    if (!viewportInfo) return;
+    if (!viewportInfo) {
+      return;
+    }
     const { viewportType, presentationIds } = viewportInfo.getViewportOptions();
 
     const csViewport = this.getCornerstoneViewportByIndex(viewportIndex);
-    if (!csViewport) return;
+    if (!csViewport) {
+      return;
+    }
 
     const properties = csViewport.getProperties();
     if (properties.isComputedVOI) {
@@ -408,7 +416,9 @@ class CornerstoneViewportService extends PubSubService
     viewport.setStack(imageIds, initialImageIndexToUse).then(() => {
       viewport.setProperties(properties);
       const camera = presentations.positionPresentation?.camera;
-      if (camera) viewport.setCamera(camera);
+      if (camera) {
+        viewport.setCamera(camera);
+      }
     });
   }
 
@@ -745,7 +755,10 @@ class CornerstoneViewportService extends PubSubService
     const viewport = this.getCornerstoneViewport(viewportId);
     const viewportCamera = viewport.getCamera();
 
-    if (viewport instanceof VolumeViewport) {
+    if (
+      viewport instanceof VolumeViewport ||
+      viewport instanceof VolumeViewport3D
+    ) {
       this._setVolumeViewport(viewport, viewportData, viewportInfo).then(() => {
         if (keepCamera) {
           viewport.setCamera(viewportCamera);

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

@@ -95,7 +95,9 @@ const dataContains = (
   displaySetUID: string,
   imageId?: string
 ): boolean => {
-  if (data.displaySetInstanceUID === displaySetUID) return true;
+  if (data.displaySetInstanceUID === displaySetUID) {
+    return true;
+  }
   if (imageId && data.isCompositeStack && data.imageIds) {
     return !!data.imageIds.find(dataId => dataId === imageId);
   }
@@ -123,7 +125,9 @@ class ViewportInfo {
    * OR if it is a composite stack and contains the given imageId
    */
   public contains(displaySetUID: string, imageId: string): boolean {
-    if (!this.viewportData?.data) return false;
+    if (!this.viewportData?.data) {
+      return false;
+    }
 
     if (this.viewportData.data.length) {
       return !!this.viewportData.data.find(data =>
@@ -198,7 +202,9 @@ class ViewportInfo {
     // via cornerstoneViewportService
     let viewportData = this.getViewportData();
 
-    if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC) {
+    if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC ||
+        viewportData.viewportType === Enums.ViewportType.VOLUME_3D
+    ) {
       viewportData = viewportData as VolumeViewportData;
       return viewportData.data.some(
         ({ displaySetInstanceUID: dsUID }) => dsUID === displaySetInstanceUID

extensions/cornerstone/src/types/CornerstoneServices.ts

@@ -1,9 +1,9 @@
 import { Types } from '@ohif/core';
-import ToolGroupService from './services/ToolGroupService';
-import SyncGroupService from './services/SyncGroupService';
-import SegmentationService from './services/SegmentationService';
-import CornerstoneCacheService from './services/CornerstoneCacheService';
-import CornerstoneViewportService from './services/ViewportService/CornerstoneViewportService';
+import ToolGroupService from '../services/ToolGroupService';
+import SyncGroupService from '../services/SyncGroupService';
+import SegmentationService from '../services/SegmentationService';
+import CornerstoneCacheService from '../services/CornerstoneCacheService';
+import CornerstoneViewportService from '../services/ViewportService/CornerstoneViewportService';
 
 interface CornerstoneServices extends Types.Services {
   cornerstoneViewportService: CornerstoneViewportService;

extensions/cornerstone/src/utils/DicomFileUploader.ts

@@ -212,7 +212,9 @@ export default class DicomFileUploader extends PubSubService {
   }
 
   private _checkDicomFile(arrayBuffer: ArrayBuffer) {
-    if (arrayBuffer.length <= 132) return false;
+    if (arrayBuffer.length <= 132) {
+      return false;
+    }
     const arr = new Uint8Array(arrayBuffer.slice(128, 132));
     // bytes from 128 to 132 must be "DICM"
     return Array.from('DICM').every((char, i) => char.charCodeAt(0) === arr[i]);

extensions/cornerstone/src/utils/callInputDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Dialog } from '@ohif/ui';
+import { Input, Dialog, ButtonEnums } from '@ohif/ui';
 
 /**
  *
@@ -35,8 +35,9 @@ function callInputDialog(
   const onSubmitHandler = ({ action, value }) => {
     switch (action.id) {
       case 'save':
-        if (typeof validateFunc === 'function' && !validateFunc(value.label))
+        if (typeof validateFunc === 'function' && !validateFunc(value.label)) {
           return;
+        }
 
         callback(value.label, action.id);
         break;
@@ -60,8 +61,8 @@ function callInputDialog(
         noCloseButton: true,
         onClose: () => uiDialogService.dismiss({ id: dialogId }),
         actions: [
-          { id: 'cancel', text: 'Cancel', type: 'primary' },
-          { id: 'save', text: 'Save', type: 'secondary' },
+          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+          { id: 'save', text: 'Save', type: ButtonEnums.type.primary },
         ],
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {

extensions/cornerstone/src/utils/interleave.js

@@ -7,8 +7,12 @@
  * @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];
+  if (!lists || !lists.length) {
+    return [];
+  }
+  if (lists.length === 1) {
+    return lists[0];
+  }
   console.time('interleave');
   const useLists = [...lists];
   const ret = [];

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

@@ -3,7 +3,7 @@ import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
 import { utils } from '@ohif/core';
 
 const Angle = {
-  toAnnotation: measurement => { },
+  toAnnotation: measurement => {},
 
   /**
    * Maps cornerstone annotation event data to measurement service format.
@@ -198,7 +198,9 @@ function getDisplayText(mappedAnnotations, displaySet) {
 
   const instanceText = InstanceNumber ? ` I: ${InstanceNumber}` : '';
   const frameText = displaySet.isMultiFrame ? ` F: ${frameNumber}` : '';
-  if (angle === undefined) return displayText;
+  if (angle === undefined) {
+    return displayText;
+  }
   const roundedAngle = utils.roundNumber(angle, 2);
   displayText.push(
     `${roundedAngle} ${unit} (S: ${SeriesNumber}${instanceText}${frameText})`

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

@@ -1,6 +1,5 @@
 import SUPPORTED_TOOLS from './constants/supportedTools';
 import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
-import getModalityUnit from './utils/getModalityUnit';
 import { utils } from '@ohif/core';
 
 const CircleROI = {
@@ -112,8 +111,7 @@ function getMappedAnnotations(annotation, DisplaySetService) {
     );
 
     const { SeriesNumber } = displaySet;
-    const { mean, stdDev, max, area, Modality } = targetStats;
-    const unit = getModalityUnit(Modality);
+    const { mean, stdDev, max, area, Modality, modalityUnit } = targetStats;
 
     annotations.push({
       SeriesInstanceUID,
@@ -121,7 +119,7 @@ function getMappedAnnotations(annotation, DisplaySetService) {
       SeriesNumber,
       frameNumber,
       Modality,
-      unit,
+      unit: modalityUnit,
       mean,
       stdDev,
       max,

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

@@ -3,7 +3,7 @@ import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
 import { utils } from '@ohif/core';
 
 const CobbAngle = {
-  toAnnotation: measurement => { },
+  toAnnotation: measurement => {},
 
   /**
    * Maps cornerstone annotation event data to measurement service format.
@@ -198,7 +198,9 @@ function getDisplayText(mappedAnnotations, displaySet) {
 
   const instanceText = InstanceNumber ? ` I: ${InstanceNumber}` : '';
   const frameText = displaySet.isMultiFrame ? ` F: ${frameNumber}` : '';
-  if (angle === undefined) return displayText;
+  if (angle === undefined) {
+    return displayText;
+  }
   const roundedAngle = utils.roundNumber(angle, 2);
   displayText.push(
     `${roundedAngle} ${unit} (S: ${SeriesNumber}${instanceText}${frameText})`

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

@@ -1,6 +1,5 @@
 import SUPPORTED_TOOLS from './constants/supportedTools';
 import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
-import getModalityUnit from './utils/getModalityUnit';
 import { utils } from '@ohif/core';
 
 const EllipticalROI = {
@@ -112,8 +111,7 @@ function getMappedAnnotations(annotation, displaySetService) {
     );
 
     const { SeriesNumber } = displaySet;
-    const { mean, stdDev, max, area, Modality } = targetStats;
-    const unit = getModalityUnit(Modality);
+    const { mean, stdDev, max, area, Modality, modalityUnit } = targetStats;
 
     annotations.push({
       SeriesInstanceUID,
@@ -121,7 +119,7 @@ function getMappedAnnotations(annotation, displaySetService) {
       SeriesNumber,
       frameNumber,
       Modality,
-      unit,
+      unit: modalityUnit,
       mean,
       stdDev,
       max,

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

@@ -32,12 +32,15 @@ const Length = {
       throw new Error('Tool not supported');
     }
 
-    const { SOPInstanceUID, SeriesInstanceUID, StudyInstanceUID } =
-      getSOPInstanceAttributes(
-        referencedImageId,
-        cornerstoneViewportService,
-        viewportId
-      );
+    const {
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      StudyInstanceUID,
+    } = getSOPInstanceAttributes(
+      referencedImageId,
+      cornerstoneViewportService,
+      viewportId
+    );
 
     let displaySet;
 
@@ -101,8 +104,11 @@ function getMappedAnnotations(annotation, displaySetService) {
       );
     }
 
-    const { SOPInstanceUID, SeriesInstanceUID, frameNumber } =
-      getSOPInstanceAttributes(referencedImageId);
+    const {
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      frameNumber,
+    } = getSOPInstanceAttributes(referencedImageId);
 
     const displaySet = displaySetService.getDisplaySetForSOPInstanceUID(
       SOPInstanceUID,
@@ -173,8 +179,12 @@ function getDisplayText(mappedAnnotations, displaySet) {
   const displayText = [];
 
   // Area is the same for all series
-  const { length, SeriesNumber, SOPInstanceUID, frameNumber } =
-    mappedAnnotations[0];
+  const {
+    length,
+    SeriesNumber,
+    SOPInstanceUID,
+    frameNumber,
+  } = mappedAnnotations[0];
 
   const instance = displaySet.images.find(
     image => image.SOPInstanceUID === SOPInstanceUID
@@ -188,7 +198,9 @@ function getDisplayText(mappedAnnotations, displaySet) {
   const instanceText = InstanceNumber ? ` I: ${InstanceNumber}` : '';
   const frameText = displaySet.isMultiFrame ? ` F: ${frameNumber}` : '';
 
-  if (length === null || length === undefined) return displayText;
+  if (length === null || length === undefined) {
+    return displayText;
+  }
   const roundedLength = utils.roundNumber(length, 2);
   displayText.push(
     `${roundedLength} mm (S: ${SeriesNumber}${instanceText}${frameText})`

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

@@ -2,7 +2,7 @@ import SUPPORTED_TOOLS from './constants/supportedTools';
 import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
 
 const PlanarFreehandROI = {
-  toAnnotation: measurement => { },
+  toAnnotation: measurement => {},
 
   /**
    * Maps cornerstone annotation event data to measurement service format.

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

@@ -1,6 +1,5 @@
 import SUPPORTED_TOOLS from './constants/supportedTools';
 import getSOPInstanceAttributes from './utils/getSOPInstanceAttributes';
-import getModalityUnit from './utils/getModalityUnit';
 import { utils } from '@ohif/core';
 
 const RectangleROI = {
@@ -26,12 +25,15 @@ const RectangleROI = {
       throw new Error('Tool not supported');
     }
 
-    const { SOPInstanceUID, SeriesInstanceUID, StudyInstanceUID } =
-      getSOPInstanceAttributes(
-        referencedImageId,
-        CornerstoneViewportService,
-        viewportId
-      );
+    const {
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      StudyInstanceUID,
+    } = getSOPInstanceAttributes(
+      referencedImageId,
+      CornerstoneViewportService,
+      viewportId
+    );
 
     let displaySet;
 
@@ -96,8 +98,11 @@ function getMappedAnnotations(annotation, DisplaySetService) {
       );
     }
 
-    const { SOPInstanceUID, SeriesInstanceUID, frameNumber } =
-      getSOPInstanceAttributes(referencedImageId);
+    const {
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      frameNumber,
+    } = getSOPInstanceAttributes(referencedImageId);
 
     const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
       SOPInstanceUID,
@@ -106,8 +111,7 @@ function getMappedAnnotations(annotation, DisplaySetService) {
     );
 
     const { SeriesNumber } = displaySet;
-    const { mean, stdDev, max, area, Modality } = targetStats;
-    const unit = getModalityUnit(Modality);
+    const { mean, stdDev, max, area, Modality, modalityUnit } = targetStats;
 
     annotations.push({
       SeriesInstanceUID,
@@ -115,7 +119,7 @@ function getMappedAnnotations(annotation, DisplaySetService) {
       SeriesNumber,
       frameNumber,
       Modality,
-      unit,
+      unit: modalityUnit,
       mean,
       stdDev,
       max,

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

@@ -1,11 +0,0 @@
-function getModalityUnit(modality) {
-  if (modality === 'CT') {
-    return 'HU';
-  } else if (modality === 'PT') {
-    return 'SUV';
-  } else {
-    return '';
-  }
-}
-
-export default getModalityUnit;

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

@@ -4,11 +4,9 @@ import {
   setAnnotationSelected,
   getFirstAnnotationSelected,
 } from './selection';
-import getModalityUnit from './getModalityUnit';
 import getSOPInstanceAttributes from './getSOPInstanceAttributes';
 
 export {
-  getModalityUnit,
   getHandlesFromPoints,
   getSOPInstanceAttributes,
   isAnnotationSelected,

extensions/default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-default",
-  "version": "3.7.0-beta.2",
+  "version": "3.7.0-beta.49",
   "description": "Common/default features and functionality for basic image viewing",
   "author": "OHIF Core Team",
   "license": "MIT",
@@ -30,8 +30,8 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.7.0-beta.2",
-    "@ohif/i18n": "3.7.0-beta.2",
+    "@ohif/core": "3.7.0-beta.49",
+    "@ohif/i18n": "3.7.0-beta.49",
     "dcmjs": "^0.29.5",
     "dicomweb-client": "^0.10.2",
     "prop-types": "^15.6.2",

extensions/default/src/DicomJSONDataSource/index.js

@@ -13,6 +13,7 @@ const mappings = {
 
 let _store = {
   urls: [],
+  studyInstanceUIDMap: new Map(), // map of urls to array of study instance UIDs
   // {
   //   url: url1
   //   studies: [Study1, Study2], // if multiple studies
@@ -41,11 +42,13 @@ const findStudies = (key, value) => {
 };
 
 function createDicomJSONApi(dicomJsonConfig) {
-  const { name, wadoRoot } = dicomJsonConfig;
+  const { wadoRoot } = dicomJsonConfig;
 
   const implementation = {
-    initialize: async ({ params, query, url }) => {
-      if (!url) url = query.get('url');
+    initialize: async ({ query, url }) => {
+      if (!url) {
+        url = query.get('url');
+      }
       let metaData = getMetaDataByURL(url);
 
       // if we have already cached the data from this specific url
@@ -58,11 +61,7 @@ function createDicomJSONApi(dicomJsonConfig) {
       }
 
       const response = await fetch(url);
-      let data = await response.json();
-
-      const studyInstanceUIDs = data.studies.map(
-        study => study.StudyInstanceUID
-      );
+      const data = await response.json();
 
       let StudyInstanceUID;
       let SeriesInstanceUID;
@@ -89,12 +88,14 @@ function createDicomJSONApi(dicomJsonConfig) {
         url,
         studies: [...data.studies],
       });
-
-      return studyInstanceUIDs;
+      _store.studyInstanceUIDMap.set(
+        url,
+        data.studies.map(study => study.StudyInstanceUID)
+      );
     },
     query: {
       studies: {
-        mapParams: () => { },
+        mapParams: () => {},
         search: async param => {
           const [key, value] = Object.entries(param)[0];
           const mappedParam = mappings[key];
@@ -213,7 +214,9 @@ function createDicomJSONApi(dicomJsonConfig) {
               return obj;
             });
             storeInstances(instances);
-            if (index === numberOfSeries - 1) setSuccessFlag();
+            if (index === numberOfSeries - 1) {
+              setSuccessFlag();
+            }
           });
         },
       },
@@ -252,12 +255,13 @@ function createDicomJSONApi(dicomJsonConfig) {
       return imageIds;
     },
     getImageIdsForInstance({ instance, frame }) {
-      const imageIds = getImageId({
-        instance,
-        frame,
-      });
+      const imageIds = getImageId({ instance, frame });
       return imageIds;
     },
+    getStudyInstanceUIDs: ({ params, query }) => {
+      const url = query.get('url');
+      return _store.studyInstanceUIDMap.get(url);
+    },
   };
   return IWebApiDataSource.create(implementation);
 }

extensions/default/src/DicomLocalDataSource/index.js

@@ -12,8 +12,12 @@ const END_MODALITIES = {
 };
 
 const compareValue = (v1, v2, def = 0) => {
-  if (v1 === v2) return def;
-  if (v1 < v2) return -1;
+  if (v1 === v2) {
+    return def;
+  }
+  if (v1 < v2) {
+    return -1;
+  }
   return 1;
 };
 
@@ -41,25 +45,7 @@ function createDicomLocalApi(dicomLocalConfig) {
   const { name } = dicomLocalConfig;
 
   const implementation = {
-    initialize: ({ params, query }) => {
-      const { StudyInstanceUIDs: paramsStudyInstanceUIDs } = params;
-      const queryStudyInstanceUIDs = query.getAll('StudyInstanceUIDs');
-
-      const StudyInstanceUIDs =
-        queryStudyInstanceUIDs || paramsStudyInstanceUIDs;
-      const StudyInstanceUIDsAsArray =
-        StudyInstanceUIDs && Array.isArray(StudyInstanceUIDs)
-          ? StudyInstanceUIDs
-          : [StudyInstanceUIDs];
-
-      // Put SRs at the end of series list to make sure images are loaded first
-      StudyInstanceUIDsAsArray.forEach(StudyInstanceUID => {
-        const study = DicomMetadataStore.getStudy(StudyInstanceUID);
-        study.series = study.series.sort(customSort);
-      });
-
-      return StudyInstanceUIDsAsArray;
-    },
+    initialize: ({ params, query }) => {},
     query: {
       studies: {
         mapParams: () => {},
@@ -246,6 +232,29 @@ function createDicomLocalApi(dicomLocalConfig) {
     deleteStudyMetadataPromise() {
       console.log('deleteStudyMetadataPromise not implemented');
     },
+    getStudyInstanceUIDs: ({ params, query }) => {
+      const { StudyInstanceUIDs: paramsStudyInstanceUIDs } = params;
+      const queryStudyInstanceUIDs = query.getAll('StudyInstanceUIDs');
+
+      const StudyInstanceUIDs =
+        queryStudyInstanceUIDs || paramsStudyInstanceUIDs;
+      const StudyInstanceUIDsAsArray =
+        StudyInstanceUIDs && Array.isArray(StudyInstanceUIDs)
+          ? StudyInstanceUIDs
+          : [StudyInstanceUIDs];
+
+      // Put SRs at the end of series list to make sure images are loaded first
+      let isStudyInCache = false;
+      StudyInstanceUIDsAsArray.forEach(StudyInstanceUID => {
+        const study = DicomMetadataStore.getStudy(StudyInstanceUID);
+        if (study) {
+          study.series = study.series.sort(customSort);
+          isStudyInCache = true;
+        }
+      });
+
+      return isStudyInCache ? StudyInstanceUIDsAsArray : [];
+    },
   };
   return IWebApiDataSource.create(implementation);
 }

extensions/default/src/DicomWebDataSource/dcm4cheeReject.js

@@ -1,4 +1,4 @@
-export default function (wadoRoot) {
+export default function(wadoRoot) {
   return {
     series: (StudyInstanceUID, SeriesInstanceUID) => {
       return new Promise((resolve, reject) => {
@@ -15,7 +15,7 @@ export default function (wadoRoot) {
 
         console.log(xhr);
 
-        xhr.onreadystatechange = function () {
+        xhr.onreadystatechange = function() {
           //Call a function when the state changes.
           if (xhr.readyState == 4) {
             switch (xhr.status) {

extensions/default/src/DicomWebDataSource/index.js

@@ -51,74 +51,87 @@ const metadataProvider = classes.MetadataProvider;
  * @param {string|bool} singlepart - indicates of the retrieves can fetch singlepart.  Options are bulkdata, video, image or boolean true
  */
 function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
-  const {
-    qidoRoot,
-    wadoRoot,
-    enableStudyLazyLoad,
-    supportsFuzzyMatching,
-    supportsWildcard,
-    supportsReject,
-    staticWado,
-    singlepart,
-  } = dicomWebConfig;
-
-  const dicomWebConfigCopy = JSON.parse(JSON.stringify(dicomWebConfig));
-
-  const qidoConfig = {
-    url: qidoRoot,
-    staticWado,
-    singlepart,
-    headers: userAuthenticationService.getAuthorizationHeader(),
-    errorInterceptor: errorHandler.getHTTPErrorHandler(),
-  };
-
-  const wadoConfig = {
-    url: wadoRoot,
-    staticWado,
-    singlepart,
-    headers: userAuthenticationService.getAuthorizationHeader(),
-    errorInterceptor: errorHandler.getHTTPErrorHandler(),
-  };
-
-  // TODO -> Two clients sucks, but its better than 1000.
-  // TODO -> We'll need to merge auth later.
-  const qidoDicomWebClient = staticWado
-    ? new StaticWadoClient(qidoConfig)
-    : new api.DICOMwebClient(qidoConfig);
-
-  const wadoDicomWebClient = staticWado
-    ? new StaticWadoClient(wadoConfig)
-    : new api.DICOMwebClient(wadoConfig);
+  let dicomWebConfigCopy,
+    qidoConfig,
+    wadoConfig,
+    qidoDicomWebClient,
+    wadoDicomWebClient,
+    getAuthrorizationHeader,
+    generateWadoHeader;
 
   const implementation = {
     initialize: ({ params, query }) => {
-      const { StudyInstanceUIDs: paramsStudyInstanceUIDs } = params;
-      const queryStudyInstanceUIDs = utils.splitComma(
-        query.getAll('StudyInstanceUIDs')
-      );
+      if (
+        dicomWebConfig.onConfiguration &&
+        typeof dicomWebConfig.onConfiguration === 'function'
+      ) {
+        dicomWebConfig = dicomWebConfig.onConfiguration(dicomWebConfig, {
+          params,
+          query,
+        });
+      }
 
-      const StudyInstanceUIDs =
-        (queryStudyInstanceUIDs.length && queryStudyInstanceUIDs) ||
-        paramsStudyInstanceUIDs;
-      const StudyInstanceUIDsAsArray =
-        StudyInstanceUIDs && Array.isArray(StudyInstanceUIDs)
-          ? StudyInstanceUIDs
-          : [StudyInstanceUIDs];
-      return StudyInstanceUIDsAsArray;
+      dicomWebConfigCopy = JSON.parse(JSON.stringify(dicomWebConfig));
+
+      getAuthrorizationHeader = () => {
+        const xhrRequestHeaders = {};
+        const authHeaders = userAuthenticationService.getAuthorizationHeader();
+        if (authHeaders && authHeaders.Authorization) {
+          xhrRequestHeaders.Authorization = authHeaders.Authorization;
+        }
+        return xhrRequestHeaders;
+      };
+
+      generateWadoHeader = () => {
+        let authorizationHeader = getAuthrorizationHeader();
+        //Generate accept header depending on config params
+        let formattedAcceptHeader = utils.generateAcceptHeader(
+          dicomWebConfig.acceptHeader,
+          dicomWebConfig.requestTransferSyntaxUID,
+          dicomWebConfig.omitQuotationForMultipartRequest
+        );
+
+        return {
+          ...authorizationHeader,
+          Accept: formattedAcceptHeader,
+        };
+      };
+
+      qidoConfig = {
+        url: dicomWebConfig.qidoRoot,
+        staticWado: dicomWebConfig.staticWado,
+        singlepart: dicomWebConfig.singlepart,
+        headers: userAuthenticationService.getAuthorizationHeader(),
+        errorInterceptor: errorHandler.getHTTPErrorHandler(),
+      };
+
+      wadoConfig = {
+        url: dicomWebConfig.wadoRoot,
+        staticWado: dicomWebConfig.staticWado,
+        singlepart: dicomWebConfig.singlepart,
+        headers: userAuthenticationService.getAuthorizationHeader(),
+        errorInterceptor: errorHandler.getHTTPErrorHandler(),
+      };
+
+      // TODO -> Two clients sucks, but its better than 1000.
+      // TODO -> We'll need to merge auth later.
+      qidoDicomWebClient = dicomWebConfig.staticWado
+        ? new StaticWadoClient(qidoConfig)
+        : new api.DICOMwebClient(qidoConfig);
+
+      wadoDicomWebClient = dicomWebConfig.staticWado
+        ? new StaticWadoClient(wadoConfig)
+        : new api.DICOMwebClient(wadoConfig);
     },
     query: {
       studies: {
         mapParams: mapParams.bind(),
         search: async function(origParams) {
-          const headers = userAuthenticationService.getAuthorizationHeader();
-          if (headers) {
-            qidoDicomWebClient.headers = headers;
-          }
-
+          qidoDicomWebClient.headers = getAuthrorizationHeader();
           const { studyInstanceUid, seriesInstanceUid, ...mappedParams } =
             mapParams(origParams, {
-              supportsFuzzyMatching,
-              supportsWildcard,
+              supportsFuzzyMatching: dicomWebConfig.supportsFuzzyMatching,
+              supportsWildcard: dicomWebConfig.supportsWildcard,
             }) || {};
 
           const results = await qidoSearch(
@@ -135,11 +148,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
       series: {
         // mapParams: mapParams.bind(),
         search: async function(studyInstanceUid) {
-          const headers = userAuthenticationService.getAuthorizationHeader();
-          if (headers) {
-            qidoDicomWebClient.headers = headers;
-          }
-
+          qidoDicomWebClient.headers = getAuthrorizationHeader();
           const results = await seriesInStudy(
             qidoDicomWebClient,
             studyInstanceUid
@@ -151,11 +160,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
       },
       instances: {
         search: (studyInstanceUid, queryParameters) => {
-          const headers = userAuthenticationService.getAuthorizationHeader();
-          if (headers) {
-            qidoDicomWebClient.headers = headers;
-          }
-
+          qidoDicomWebClient.headers = getAuthrorizationHeader();
           qidoSearch.call(
             undefined,
             qidoDicomWebClient,
@@ -179,9 +184,16 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
        *    or is already retrieved, or a promise to a URL for such use if a BulkDataURI
        */
       directURL: params => {
-        return getDirectURL({ wadoRoot, singlepart }, params);
+        return getDirectURL(
+          {
+            wadoRoot: dicomWebConfig.wadoRoot,
+            singlepart: dicomWebConfig.singlepart,
+          },
+          params
+        );
       },
       bulkDataURI: async ({ StudyInstanceUID, BulkDataURI }) => {
+        qidoDicomWebClient.headers = getAuthrorizationHeader();
         const options = {
           multipart: false,
           BulkDataURI,
@@ -200,18 +212,13 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
           sortFunction,
           madeInClient = false,
         } = {}) => {
-          const headers = userAuthenticationService.getAuthorizationHeader();
-          if (headers) {
-            wadoDicomWebClient.headers = headers;
-          }
-
           if (!StudyInstanceUID) {
             throw new Error(
               'Unable to query for SeriesMetadata without StudyInstanceUID'
             );
           }
 
-          if (enableStudyLazyLoad) {
+          if (dicomWebConfig.enableStudyLazyLoad) {
             return implementation._retrieveSeriesMetadataAsync(
               StudyInstanceUID,
               filters,
@@ -234,17 +241,12 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
 
     store: {
       dicom: async (dataset, request) => {
-        const headers = userAuthenticationService.getAuthorizationHeader();
-        if (headers) {
-          wadoDicomWebClient.headers = headers;
-        }
-
+        wadoDicomWebClient.headers = getAuthrorizationHeader();
         if (dataset instanceof ArrayBuffer) {
           const options = {
             datasets: [dataset],
             request,
           };
-
           await wadoDicomWebClient.storeInstances(options);
         } else {
           const meta = {
@@ -282,7 +284,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
       madeInClient
     ) => {
       const enableStudyLazyLoad = false;
-
+      wadoDicomWebClient.headers = generateWadoHeader();
       // data is all SOPInstanceUIDs
       const data = await retrieveStudyMetadata(
         wadoDicomWebClient,
@@ -353,6 +355,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
       madeInClient = false
     ) => {
       const enableStudyLazyLoad = true;
+      wadoDicomWebClient.headers = generateWadoHeader();
       // Get Series
       const {
         preLoadData: seriesSummaryMetadata,
@@ -515,10 +518,26 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
     getConfig() {
       return dicomWebConfigCopy;
     },
+    getStudyInstanceUIDs({ params, query }) {
+      const { StudyInstanceUIDs: paramsStudyInstanceUIDs } = params;
+      const queryStudyInstanceUIDs = utils.splitComma(
+        query.getAll('StudyInstanceUIDs')
+      );
+
+      const StudyInstanceUIDs =
+        (queryStudyInstanceUIDs.length && queryStudyInstanceUIDs) ||
+        paramsStudyInstanceUIDs;
+      const StudyInstanceUIDsAsArray =
+        StudyInstanceUIDs && Array.isArray(StudyInstanceUIDs)
+          ? StudyInstanceUIDs
+          : [StudyInstanceUIDs];
+
+      return StudyInstanceUIDsAsArray;
+    },
   };
 
-  if (supportsReject) {
-    implementation.reject = dcm4cheeReject(wadoRoot);
+  if (dicomWebConfig.supportsReject) {
+    implementation.reject = dcm4cheeReject(dicomWebConfig.wadoRoot);
   }
 
   return IWebApiDataSource.create(implementation);

extensions/default/src/DicomWebDataSource/utils/StaticWadoClient.ts

@@ -36,12 +36,16 @@ export default class StaticWadoClient extends api.DICOMwebClient {
    * @returns
    */
   async searchForStudies(options) {
-    if (!this.staticWado) return super.searchForStudies(options);
+    if (!this.staticWado) {
+      return super.searchForStudies(options);
+    }
 
     const searchResult = await super.searchForStudies(options);
     const { queryParams } = options;
 
-    if (!queryParams) return searchResult;
+    if (!queryParams) {
+      return searchResult;
+    }
 
     const lowerParams = this.toLowerParams(queryParams);
     const filtered = searchResult.filter(study => {
@@ -63,11 +67,15 @@ export default class StaticWadoClient extends api.DICOMwebClient {
   }
 
   async searchForSeries(options) {
-    if (!this.staticWado) return super.searchForSeries(options);
+    if (!this.staticWado) {
+      return super.searchForSeries(options);
+    }
 
     const searchResult = await super.searchForSeries(options);
     const { queryParams } = options;
-    if (!queryParams) return searchResult;
+    if (!queryParams) {
+      return searchResult;
+    }
     const lowerParams = this.toLowerParams(queryParams);
 
     const filtered = searchResult.filter(series => {
@@ -112,8 +120,12 @@ export default class StaticWadoClient extends api.DICOMwebClient {
       actual = actual.Alphabetic;
     }
     if (typeof actual == 'string') {
-      if (actual.length === 0) return true;
-      if (desired.length === 0 || desired === '*') return true;
+      if (actual.length === 0) {
+        return true;
+      }
+      if (desired.length === 0 || desired === '*') {
+        return true;
+      }
       if (desired[0] === '*' && desired[desired.length - 1] === '*') {
         // console.log(`Comparing ${actual} to ${desired.substring(1, desired.length - 1)}`)
         return actual.indexOf(desired.substring(1, desired.length - 1)) != -1;
@@ -131,9 +143,13 @@ export default class StaticWadoClient extends api.DICOMwebClient {
 
   /** Compares a pair of dates to see if the value is within the range */
   compareDateRange(range, value) {
-    if (!value) return true;
+    if (!value) {
+      return true;
+    }
     const dash = range.indexOf('-');
-    if (dash === -1) return this.compareValues(range, value);
+    if (dash === -1) {
+      return this.compareValues(range, value);
+    }
     const start = range.substring(0, dash);
     const end = range.substring(dash + 1);
     return (!start || value >= start) && (!end || value <= end);
@@ -150,11 +166,17 @@ export default class StaticWadoClient extends api.DICOMwebClient {
    */
   filterItem(key: string, queryParams, study, sourceFilterMap) {
     const altKey = sourceFilterMap[key] || key;
-    if (!queryParams) return true;
+    if (!queryParams) {
+      return true;
+    }
     const testValue = queryParams[key] || queryParams[altKey];
-    if (!testValue) return true;
+    if (!testValue) {
+      return true;
+    }
     const valueElem = study[key] || study[altKey];
-    if (!valueElem) return false;
+    if (!valueElem) {
+      return false;
+    }
     if (valueElem.vr == 'DA') {
       return this.compareDateRange(testValue, valueElem.Value[0]);
     }

extensions/default/src/DicomWebProxyDataSource/index.js

@@ -18,15 +18,6 @@ function createDicomWebProxyApi(
 
   const implementation = {
     initialize: async ({ params, query }) => {
-      let studyInstanceUIDs = [];
-
-      // there seem to be a couple of variations of the case for this parameter
-      const queryStudyInstanceUIDs =
-        query.get('studyInstanceUIDs') || query.get('studyInstanceUids');
-      if (!queryStudyInstanceUIDs) {
-        throw new Error(`No studyInstanceUids in request for '${name}'`);
-      }
-
       const url = query.get('url');
 
       if (!url) {
@@ -39,12 +30,11 @@ function createDicomWebProxyApi(
         }
 
         dicomWebDelegate = createDicomWebApi(
-          data.servers.dicomWeb[0],
+          data.servers.dicomWeb[0].configuration,
           UserAuthenticationService
         );
-        studyInstanceUIDs = queryStudyInstanceUIDs.split(';');
+        dicomWebDelegate.initialize({ params, query });
       }
-      return studyInstanceUIDs;
     },
     query: {
       studies: {
@@ -77,6 +67,18 @@ function createDicomWebProxyApi(
       dicomWebDelegate.getImageIdsForDisplaySet(...args),
     getImageIdsForInstance: (...args) =>
       dicomWebDelegate.getImageIdsForInstance(...args),
+    getStudyInstanceUIDs({ params, query }) {
+      let studyInstanceUIDs = [];
+
+      // there seem to be a couple of variations of the case for this parameter
+      const queryStudyInstanceUIDs =
+        query.get('studyInstanceUIDs') || query.get('studyInstanceUids');
+      if (!queryStudyInstanceUIDs) {
+        throw new Error(`No studyInstanceUids in request for '${name}'`);
+      }
+      studyInstanceUIDs = queryStudyInstanceUIDs.split(';');
+      return studyInstanceUIDs;
+    },
   };
   return IWebApiDataSource.create(implementation);
 }

extensions/default/src/Panels/ActionButtons.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-import { Button, ButtonGroup } from '@ohif/ui';
+import { LegacyButton, ButtonGroup } from '@ohif/ui';
 
 function ActionButtons({ onExportClick, onCreateReportClick }) {
   const { t } = useTranslation('MeasurementTable');
@@ -10,12 +10,16 @@ function ActionButtons({ onExportClick, onCreateReportClick }) {
   return (
     <React.Fragment>
       <ButtonGroup color="black" size="inherit">
-        <Button className="px-2 py-2 text-base" onClick={onExportClick}>
+        {/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
+        <LegacyButton className="px-2 py-2 text-base" onClick={onExportClick}>
           {t('Export CSV')}
-        </Button>
-        <Button className="px-2 py-2 text-base" onClick={onCreateReportClick}>
+        </LegacyButton>
+        <LegacyButton
+          className="px-2 py-2 text-base"
+          onClick={onCreateReportClick}
+        >
           {t('Create Report')}
-        </Button>
+        </LegacyButton>
       </ButtonGroup>
     </React.Fragment>
   );

extensions/default/src/Panels/DataSourceSelector.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { useNavigate } from 'react-router-dom';
 import { useAppConfig } from '@state';
 
-import { Button } from '@ohif/ui';
+import { Button, ButtonEnums } from '@ohif/ui';
 
 function DataSourceSelector() {
   const [appConfig] = useAppConfig();
@@ -31,9 +31,12 @@ function DataSourceSelector() {
               )
               .map(ds => (
                 <div key={ds.sourceName}>
-                  <h1 className="text-white">{ds.friendlyName}</h1>
+                  <h1 className="text-white">
+                    {ds.configuration?.friendlyName || ds.friendlyName}
+                  </h1>
                   <Button
-                    className={classnames('font-bold', 'ml-2')}
+                    type={ButtonEnums.type.primary}
+                    className={classnames('ml-2')}
                     onClick={() => {
                       navigate({
                         pathname: '/',

extensions/default/src/Panels/PanelMeasurementTable.tsx

@@ -1,7 +1,13 @@
 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 {
+  MeasurementTable,
+  Dialog,
+  Input,
+  useViewportGrid,
+  ButtonEnums,
+} from '@ohif/ui';
 import ActionButtons from './ActionButtons';
 import debounce from 'lodash.debounce';
 
@@ -189,9 +195,8 @@ export default function PanelMeasurementTable({
           );
         },
         actions: [
-          // temp: swap button types until colors are updated
-          { id: 'cancel', text: 'Cancel', type: 'primary' },
-          { id: 'save', text: 'Save', type: 'secondary' },
+          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+          { id: 'save', text: 'Save', type: ButtonEnums.type.primary },
         ],
         onSubmit: onSubmitHandler,
       },
@@ -271,7 +276,9 @@ function _mapMeasurementToDisplay(measurement, index, types) {
   if (findingSites) {
     const siteText = [];
     findingSites.forEach(site => {
-      if (site?.text !== label) siteText.push(site.text);
+      if (site?.text !== label) {
+        siteText.push(site.text);
+      }
     });
     displayText = [...siteText, ...displayText];
   }

extensions/default/src/Panels/PanelStudyBrowser.tsx

@@ -317,6 +317,7 @@ function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
         numInstances: ds.numImageFrames,
         countIcon: ds.countIcon,
         StudyInstanceUID: ds.StudyInstanceUID,
+        messages: ds.messages,
         componentType,
         imageSrc,
         dragData: {

extensions/default/src/Panels/createReportDialogPrompt.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import React from 'react';
-import { Dialog, Input, Select } from '@ohif/ui';
+import { ButtonEnums, Dialog, Input, Select } from '@ohif/ui';
 
 export const CREATE_REPORT_DIALOG_RESPONSE = {
   CANCEL: 0,
@@ -81,8 +81,8 @@ export default function createReportDialogPrompt(
         noCloseButton: true,
         onClose: _handleClose,
         actions: [
-          { id: 'cancel', text: 'Cancel', type: 'primary' },
-          { id: 'save', text: 'Save', type: 'secondary' },
+          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+          { id: 'save', text: 'Save', type: ButtonEnums.type.primary },
         ],
         // TODO: Should be on button press...
         onSubmit: _handleFormSubmit,

extensions/default/src/Panels/debounce.js

@@ -9,12 +9,16 @@ function debounce(func, wait, immediate) {
       args = arguments;
     var later = function() {
       timeout = null;
-      if (!immediate) func.apply(context, args);
+      if (!immediate) {
+        func.apply(context, args);
+      }
     };
     var callNow = immediate && !timeout;
     clearTimeout(timeout);
     timeout = setTimeout(later, wait);
-    if (callNow) func.apply(context, args);
+    if (callNow) {
+      func.apply(context, args);
+    }
   };
 }
 

extensions/default/src/Toolbar/Toolbar.tsx

@@ -29,7 +29,7 @@ export default function Toolbar({ servicesManager }) {
 
   return (
     <>
-      {toolbarButtons.map((toolDef, index) => {
+      {toolbarButtons.map(toolDef => {
         const { id, Component, componentProps } = toolDef;
         // TODO: ...
 

extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.tsx

@@ -40,8 +40,8 @@ NestedMenu.propTypes = {
 };
 
 NestedMenu.defaultProps = {
-  icon: "tool-more-menu",
-  label: "More",
+  icon: 'tool-more-menu',
+  label: 'More',
 };
 
 export default NestedMenu;

extensions/default/src/ViewerLayout/index.tsx

@@ -55,8 +55,11 @@ function ViewerLayout({
     const query = new URLSearchParams(window.location.search);
     const configUrl = query.get('configUrl');
 
+    const dataSourceName = pathname.substring(dataSourceIdx + 1);
+    const existingDataSource = extensionManager.getDataSources(dataSourceName);
+
     const searchQuery = new URLSearchParams();
-    if (dataSourceIdx !== -1) {
+    if (dataSourceIdx !== -1 && existingDataSource) {
       searchQuery.append('datasources', pathname.substring(dataSourceIdx + 1));
     }
 

extensions/default/src/commandsModule.ts

@@ -129,13 +129,17 @@ const commandsModule = ({
         stage,
       } = hangingProtocolService.getActiveProtocol();
       const enableListener = button => {
-        if (!button.id) return;
+        if (!button.id) {
+          return;
+        }
         const { commands, items } = button.props || button;
         if (items) {
           items.forEach(enableListener);
         }
         const hpCommand = commands?.find?.(isHangingProtocolCommand);
-        if (!hpCommand) return;
+        if (!hpCommand) {
+          return;
+        }
         const { protocolId, stageIndex, stageId } = hpCommand.commandOptions;
         const isActive =
           (!protocolId || protocolId === protocol.id) &&

extensions/default/src/findViewportsByPosition.ts

@@ -22,7 +22,9 @@ export const findOrCreateViewport = (
   options: Record<string, unknown>
 ) => {
   const byPositionViewport = viewportsByPosition?.[positionId];
-  if (byPositionViewport) return { ...byPositionViewport };
+  if (byPositionViewport) {
+    return { ...byPositionViewport };
+  }
   const { protocolId, stageIndex } = hangingProtocolService.getState();
 
   // Setup the initial in display correctly for initial view/select

extensions/default/src/getCustomizationModule.tsx

@@ -83,17 +83,21 @@ export default function getCustomizationModule() {
          */
         {
           id: 'ohif.overlayItem',
-          content: function (props) {
-            if (this.condition && !this.condition(props)) return null;
+          content: function(props) {
+            if (this.condition && !this.condition(props)) {
+              return null;
+            }
 
             const { instance } = props;
             const value =
               instance && this.attribute
                 ? instance[this.attribute]
                 : this.contentF && typeof this.contentF === 'function'
-                  ? this.contentF(props)
-                  : null;
-            if (!value) return null;
+                ? this.contentF(props)
+                : null;
+            if (!value) {
+              return null;
+            }
 
             return (
               <span
@@ -117,7 +121,7 @@ export default function getCustomizationModule() {
            * This function clones the object and child objects to prevent
            * changes to the original customization object.
            */
-          transform: function (customizationService: CustomizationService) {
+          transform: function(customizationService: CustomizationService) {
             // Don't modify the children, as those are copied by reference
             const clonedObject = { ...this };
             clonedObject.menus = this.menus.map(menu => ({ ...menu }));

extensions/default/src/getDisplaySetMessages.ts

@@ -0,0 +1,50 @@
+import sortInstancesByPosition from '@ohif/core/src/utils/sortInstancesByPosition';
+import { constructableModalities } from '@ohif/core/src/utils/isDisplaySetReconstructable';
+import { DisplaySetMessage, DisplaySetMessageList } from '@ohif/core';
+import checkMultiFrame from './utils/validations/checkMultiframe';
+import checkSingleFrames from './utils/validations/checkSingleFrames';
+/**
+ * Checks if a series is reconstructable to a 3D volume.
+ *
+ * @param {Object[]} instances An array of `OHIFInstanceMetadata` objects.
+ */
+export default function getDisplaySetMessages(
+  instances: Array<any>,
+  isReconstructable: boolean
+): DisplaySetMessageList {
+  const messages = new DisplaySetMessageList();
+  if (!instances.length) {
+    messages.addMessage(DisplaySetMessage.CODES.NO_VALID_INSTANCES);
+  }
+
+  const firstInstance = instances[0];
+  // Due to current requirements, LOCALIZER series doesn't have any messages
+  if (firstInstance.ImageType.includes('LOCALIZER')) {
+    return messages;
+  }
+
+  const Modality = firstInstance.Modality;
+  if (!constructableModalities.includes(Modality)) {
+    return messages;
+  }
+
+  const isMultiframe = firstInstance.NumberOfFrames > 1;
+  // Can't reconstruct if all instances don't have the ImagePositionPatient.
+  if (
+    !isMultiframe &&
+    !instances.every(instance => instance.ImagePositionPatient)
+  ) {
+    messages.addMessage(DisplaySetMessage.CODES.NO_POSITION_INFORMATION);
+  }
+
+  const sortedInstances = sortInstancesByPosition(instances);
+
+  isMultiframe
+    ? checkMultiFrame(sortedInstances[0], messages)
+    : checkSingleFrames(sortedInstances, messages);
+
+  if (!isReconstructable) {
+    messages.addMessage(DisplaySetMessage.CODES.NOT_RECONSTRUCTABLE);
+  }
+  return messages;
+}

extensions/default/src/getSopClassHandlerModule.js

@@ -3,6 +3,7 @@ import sopClassDictionary from '@ohif/core/src/utils/sopClassDictionary';
 import ImageSet from '@ohif/core/src/classes/ImageSet';
 import isDisplaySetReconstructable from '@ohif/core/src/utils/isDisplaySetReconstructable';
 import { id } from './id';
+import getDisplaySetMessages from './getDisplaySetMessages';
 
 const sopClassHandlerName = 'stack';
 
@@ -18,8 +19,9 @@ const makeDisplaySet = instances => {
     value: isReconstructable,
     averageSpacingBetweenFrames,
   } = isDisplaySetReconstructable(instances);
-
   // set appropriate attributes to image set...
+  const messages = getDisplaySetMessages(instances, isReconstructable);
+
   imageSet.setAttributes({
     displaySetInstanceUID: imageSet.uid, // create a local alias for the imageSet UID
     SeriesDate: instance.SeriesDate,
@@ -36,6 +38,7 @@ const makeDisplaySet = instances => {
     numImageFrames: instances.length,
     SOPClassHandlerId: `${id}.sopClassHandlerModule.${sopClassHandlerName}`,
     isReconstructable,
+    messages,
     averageSpacingBetweenFrames: averageSpacingBetweenFrames || null,
   });
 

extensions/default/src/utils/calculateScanAxisNormal.ts

@@ -0,0 +1,20 @@
+import { vec3 } from 'gl-matrix';
+
+/**
+ * Calculates the scanAxisNormal based on a image orientation vector extract from a frame
+ * @param {*} imageOrientation
+ * @returns
+ */
+export default function calculateScanAxisNormal(imageOrientation) {
+  const rowCosineVec = vec3.fromValues(
+    imageOrientation[0],
+    imageOrientation[1],
+    imageOrientation[2]
+  );
+  const colCosineVec = vec3.fromValues(
+    imageOrientation[3],
+    imageOrientation[4],
+    imageOrientation[5]
+  );
+  return vec3.cross(vec3.create(), rowCosineVec, colCosineVec);
+}

extensions/default/src/utils/getDirectURL.js

@@ -23,9 +23,13 @@ const getDirectURL = (config, params) => {
     singlepart: fetchPart = 'video',
   } = params;
   const value = instance[tag];
-  if (!value) return undefined;
+  if (!value) {
+    return undefined;
+  }
 
-  if (value.DirectRetrieveURL) return value.DirectRetrieveURL;
+  if (value.DirectRetrieveURL) {
+    return value.DirectRetrieveURL;
+  }
   if (value.InlineBinary) {
     const blob = utils.b64toBlob(value.InlineBinary, defaultType);
     value.DirectRetrieveURL = URL.createObjectURL(blob);

extensions/default/src/utils/reuseCachedLayouts.ts

@@ -47,10 +47,14 @@ const reuseCachedLayout = (
   for (let idx = 0; idx < state.viewports.length; idx++) {
     const viewport = state.viewports[idx];
     const { displaySetOptions, displaySetInstanceUIDs } = viewport;
-    if (!displaySetOptions) continue;
+    if (!displaySetOptions) {
+      continue;
+    }
     for (let i = 0; i < displaySetOptions.length; i++) {
       const displaySetUID = displaySetInstanceUIDs[i];
-      if (!displaySetUID) continue;
+      if (!displaySetUID) {
+        continue;
+      }
       if (idx === activeViewportIndex && i === 0) {
         displaySetSelectorMap[
           `${activeStudyUID}:activeDisplaySet:0`

extensions/default/src/utils/validations/areAllImageComponentsEqual.ts

@@ -0,0 +1,26 @@
+import toNumber from '@ohif/core/src/utils/toNumber';
+
+/**
+ * Check if all voxels in series images has same number of components (samplesPerPixel)
+ * @param {*} instances
+ * @returns
+ */
+export default function areAllImageComponentsEqual(
+  instances: Array<any>
+): boolean {
+  if (!instances?.length) {
+    return false;
+  }
+  const firstImage = instances[0];
+  const firstImageSamplesPerPixel = toNumber(firstImage.SamplesPerPixel);
+
+  for (let i = 1; i < instances.length; i++) {
+    const instance = instances[i];
+    const { SamplesPerPixel } = instance;
+
+    if (SamplesPerPixel !== firstImageSamplesPerPixel) {
+      return false;
+    }
+  }
+  return true;
+}

extensions/default/src/utils/validations/areAllImageDimensionsEqual.ts

@@ -0,0 +1,27 @@
+import toNumber from '@ohif/core/src/utils/toNumber';
+
+/**
+ * Check if the frames in a series has different dimensions
+ * @param {*} instances
+ * @returns
+ */
+export default function areAllImageDimensionsEqual(
+  instances: Array<any>
+): boolean {
+  if (!instances?.length) {
+    return false;
+  }
+  const firstImage = instances[0];
+  const firstImageRows = toNumber(firstImage.Rows);
+  const firstImageColumns = toNumber(firstImage.Columns);
+
+  for (let i = 1; i < instances.length; i++) {
+    const instance = instances[i];
+    const { Rows, Columns } = instance;
+
+    if (Rows !== firstImageRows || Columns !== firstImageColumns) {
+      return false;
+    }
+  }
+  return true;
+}

extensions/default/src/utils/validations/areAllImageOrientationsEqual.ts

@@ -0,0 +1,31 @@
+import toNumber from '@ohif/core/src/utils/toNumber';
+import { _isSameOrientation } from '@ohif/core/src/utils/isDisplaySetReconstructable';
+
+/**
+ * Check is the series has frames with different orientations
+ * @param {*} instances
+ * @returns
+ */
+export default function areAllImageOrientationsEqual(
+  instances: Array<any>
+): boolean {
+  if (!instances?.length) {
+    return false;
+  }
+  const firstImage = instances[0];
+  const firstImageOrientationPatient = toNumber(
+    firstImage.ImageOrientationPatient
+  );
+
+  for (let i = 1; i < instances.length; i++) {
+    const instance = instances[i];
+    const imageOrientationPatient = toNumber(instance.ImageOrientationPatient);
+
+    if (
+      !_isSameOrientation(imageOrientationPatient, firstImageOrientationPatient)
+    ) {
+      return false;
+    }
+  }
+  return true;
+}

extensions/default/src/utils/validations/areAllImagePositionsEqual.ts

@@ -0,0 +1,76 @@
+import { vec3 } from 'gl-matrix';
+import toNumber from '@ohif/core/src/utils/toNumber';
+import { _getPerpendicularDistance } from '@ohif/core/src/utils/isDisplaySetReconstructable';
+import calculateScanAxisNormal from '../calculateScanAxisNormal';
+
+/**
+ * Checks if there is a position shift between consecutive frames
+ * @param {*} previousPosition
+ * @param {*} actualPosition
+ * @param {*} scanAxisNormal
+ * @param {*} averageSpacingBetweenFrames
+ * @returns
+ */
+function _checkSeriesPositionShift(
+  previousPosition,
+  actualPosition,
+  scanAxisNormal,
+  averageSpacingBetweenFrames
+) {
+  // predicted position should be the previous position added by the multiplication
+  // of the scanAxisNormal and the average spacing between frames
+  const predictedPosition = vec3.scaleAndAdd(
+    vec3.create(),
+    previousPosition,
+    scanAxisNormal,
+    averageSpacingBetweenFrames
+  );
+  return (
+    vec3.distance(actualPosition, predictedPosition) >
+    averageSpacingBetweenFrames
+  );
+}
+
+/**
+ * Checks if a series has position shifts between consecutive frames
+ * @param {*} instances
+ * @returns
+ */
+export default function areAllImagePositionsEqual(
+  instances: Array<any>
+): boolean {
+  if (!instances?.length) {
+    return false;
+  }
+  const firstImageOrientationPatient = toNumber(
+    instances[0].ImageOrientationPatient
+  );
+  const scanAxisNormal = calculateScanAxisNormal(firstImageOrientationPatient);
+  const firstImagePositionPatient = toNumber(instances[0].ImagePositionPatient);
+  const lastIpp = toNumber(
+    instances[instances.length - 1].ImagePositionPatient
+  );
+
+  const averageSpacingBetweenFrames =
+    _getPerpendicularDistance(firstImagePositionPatient, lastIpp) /
+    (instances.length - 1);
+
+  let previousImagePositionPatient = firstImagePositionPatient;
+  for (let i = 1; i < instances.length; i++) {
+    const instance = instances[i];
+    const imagePositionPatient = toNumber(instance.ImagePositionPatient);
+
+    if (
+      _checkSeriesPositionShift(
+        previousImagePositionPatient,
+        imagePositionPatient,
+        scanAxisNormal,
+        averageSpacingBetweenFrames
+      )
+    ) {
+      return false;
+    }
+    previousImagePositionPatient = imagePositionPatient;
+  }
+  return true;
+}

extensions/default/src/utils/validations/areAllImageSpacingEqual.ts

@@ -0,0 +1,67 @@
+import {
+  _getPerpendicularDistance,
+  _getSpacingIssue,
+  reconstructionIssues,
+} from '@ohif/core/src/utils/isDisplaySetReconstructable';
+import { DisplaySetMessage } from '@ohif/core';
+import toNumber from '@ohif/core/src/utils/toNumber';
+import { DisplaySetMessageList } from '@ohif/core';
+
+/**
+ * Checks if series has spacing issues
+ * @param {*} instances
+ * @param {*} warnings
+ */
+export default function areAllImageSpacingEqual(
+  instances: Array<any>,
+  messages: DisplaySetMessageList
+): void {
+  if (!instances?.length) {
+    return;
+  }
+  const firstImagePositionPatient = toNumber(instances[0].ImagePositionPatient);
+  const lastIpp = toNumber(
+    instances[instances.length - 1].ImagePositionPatient
+  );
+
+  const averageSpacingBetweenFrames =
+    _getPerpendicularDistance(firstImagePositionPatient, lastIpp) /
+    (instances.length - 1);
+
+  let previousImagePositionPatient = firstImagePositionPatient;
+
+  const issuesFound = [];
+  for (let i = 1; i < instances.length; i++) {
+    const instance = instances[i];
+    const imagePositionPatient = toNumber(instance.ImagePositionPatient);
+
+    const spacingBetweenFrames = _getPerpendicularDistance(
+      imagePositionPatient,
+      previousImagePositionPatient
+    );
+
+    const spacingIssue = _getSpacingIssue(
+      spacingBetweenFrames,
+      averageSpacingBetweenFrames
+    );
+
+    if (spacingIssue) {
+      const issue = spacingIssue.issue;
+
+      // avoid multiple warning of the same thing
+      if (!issuesFound.includes(issue)) {
+        issuesFound.push(issue);
+        if (issue === reconstructionIssues.MISSING_FRAMES) {
+          messages.addMessage(DisplaySetMessage.CODES.MISSING_FRAMES);
+        } else if (issue === reconstructionIssues.IRREGULAR_SPACING) {
+          messages.addMessage(DisplaySetMessage.CODES.IRREGULAR_SPACING);
+        }
+      }
+      // we just want to find issues not how many
+      if (issuesFound.length > 1) {
+        break;
+      }
+    }
+    previousImagePositionPatient = imagePositionPatient;
+  }
+}

extensions/default/src/utils/validations/checkMultiframe.ts

@@ -0,0 +1,32 @@
+import {
+  hasPixelMeasurements,
+  hasOrientation,
+  hasPosition,
+} from '@ohif/core/src/utils/isDisplaySetReconstructable';
+import { DisplaySetMessage, DisplaySetMessageList } from '@ohif/core';
+
+/**
+ * Check various multi frame issues. It calls OHIF core functions
+ * @param {*} multiFrameInstance
+ * @param {*} warnings
+ */
+export default function checkMultiFrame(
+  multiFrameInstance,
+  messages: DisplaySetMessageList
+): void {
+  if (!hasPixelMeasurements(multiFrameInstance)) {
+    messages.addMessage(
+      DisplaySetMessage.CODES.MULTIFRAME_NO_PIXEL_MEASUREMENTS
+    );
+  }
+
+  if (!hasOrientation(multiFrameInstance)) {
+    messages.addMessage(DisplaySetMessage.CODES.MULTIFRAME_NO_ORIENTATION);
+  }
+
+  if (!hasPosition(multiFrameInstance)) {
+    messages.addMessage(
+      DisplaySetMessage.CODES.MULTIFRAME_NO_POSITION_INFORMATION
+    );
+  }
+}

extensions/default/src/utils/validations/checkSingleFrames.ts

@@ -0,0 +1,37 @@
+import areAllImageDimensionsEqual from './areAllImageDimensionsEqual';
+import areAllImageComponentsEqual from './areAllImageComponentsEqual';
+import areAllImageOrientationsEqual from './areAllImageOrientationsEqual';
+import areAllImagePositionsEqual from './areAllImagePositionsEqual';
+import areAllImageSpacingEqual from './areAllImageSpacingEqual';
+import { DisplaySetMessage, DisplaySetMessageList } from '@ohif/core';
+
+/**
+ * Runs various checks in a single frame series
+ * @param {*} instances
+ * @param {*} warnings
+ */
+export default function checkSingleFrames(
+  instances: Array<any>,
+  messages: DisplaySetMessageList
+): void {
+  if (instances.length > 2) {
+    if (!areAllImageDimensionsEqual(instances)) {
+      messages.addMessage(DisplaySetMessage.CODES.INCONSISTENT_DIMENSIONS);
+    }
+
+    if (!areAllImageComponentsEqual(instances)) {
+      messages.addMessage(DisplaySetMessage.CODES.INCONSISTENT_COMPONENTS);
+    }
+
+    if (!areAllImageOrientationsEqual(instances)) {
+      messages.addMessage(DisplaySetMessage.CODES.INCONSISTENT_ORIENTATIONS);
+    }
+
+    if (!areAllImagePositionsEqual(instances)) {
+      messages.addMessage(
+        DisplaySetMessage.CODES.INCONSISTENT_POSITION_INFORMATION
+      );
+    }
+    areAllImageSpacingEqual(instances, messages);
+  }
+}

extensions/dicom-microscopy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-microscopy",
-  "version": "3.7.0-beta.2",
+  "version": "3.7.0-beta.49",
   "description": "OHIF extension for DICOM microscopy",
   "author": "Bill Wallace, md-prog",
   "license": "MIT",
@@ -28,10 +28,10 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.7.0-beta.2",
-    "@ohif/extension-default": "3.7.0-beta.2",
-    "@ohif/i18n": "3.7.0-beta.2",
-    "@ohif/ui": "3.7.0-beta.2",
+    "@ohif/core": "3.7.0-beta.49",
+    "@ohif/extension-default": "3.7.0-beta.49",
+    "@ohif/i18n": "3.7.0-beta.49",
+    "@ohif/ui": "3.7.0-beta.49",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx

@@ -41,7 +41,9 @@ class DicomMicroscopyViewport extends Component {
     const { microscopyService } = this.props.servicesManager.services;
     this.microscopyService = microscopyService;
     this.debouncedResize = debounce(() => {
-      if (this.viewer) this.viewer.resize();
+      if (this.viewer) {
+        this.viewer.resize();
+      }
     }, 100);
   }
 

extensions/dicom-microscopy/src/components/ViewportOverlay/index.tsx

@@ -107,8 +107,12 @@ const itemGenerator = (props: any) => {
   props.formatTime = formatDICOMTime;
   props.formatPN = formatPN;
   props.formatNumberPrecision = formatNumberPrecision;
-  if (condition && !condition(props)) return null;
-  if (!contents && !valueFunc) return null;
+  if (condition && !condition(props)) {
+    return null;
+  }
+  if (!contents && !valueFunc) {
+    return null;
+  }
   const value = valueFunc && valueFunc(props);
   const contentsValue = (contents && contents(props)) || [
     { className: 'mr-1', value: title },

extensions/dicom-microscopy/src/components/ViewportOverlay/listComponentGenerator.tsx

@@ -1,10 +1,16 @@
 const listComponentGenerator = props => {
   const { list, itemGenerator } = props;
-  if (!list) return;
+  if (!list) {
+    return;
+  }
   return list.map(item => {
-    if (!item) return;
+    if (!item) {
+      return;
+    }
     const generator = item.generator || itemGenerator;
-    if (!generator) throw new Error(`No generator for ${item}`);
+    if (!generator) {
+      throw new Error(`No generator for ${item}`);
+    }
     return generator({ ...props, item });
   });
 };

extensions/dicom-microscopy/src/getCommandsModule.ts

@@ -22,7 +22,9 @@ export default function getCommandsModule({
     deleteMeasurement: ({ uid }) => {
       if (uid) {
         const roiAnnotation = microscopyService.getAnnotation(uid);
-        if (roiAnnotation) microscopyService.removeAnnotation(roiAnnotation);
+        if (roiAnnotation) {
+          microscopyService.removeAnnotation(roiAnnotation);
+        }
       }
     },
 
@@ -72,7 +74,7 @@ export default function getCommandsModule({
         ].indexOf(toolName) >= 0
       ) {
         // TODO: read from configuration
-        let options = {
+        const options = {
           geometryType: toolName,
           vertexEnabled: true,
           styleOptions: styles.default,
@@ -140,7 +142,9 @@ export default function getCommandsModule({
       );
       let onoff = false; // true if this will toggle on
       for (let i = 0; i < overlays.length; i++) {
-        if (i === 0) onoff = overlays.item(0).classList.contains('hidden');
+        if (i === 0) {
+          onoff = overlays.item(0).classList.contains('hidden');
+        }
         overlays.item(i).classList.toggle('hidden');
       }
 

extensions/dicom-microscopy/src/helpers/formatDICOMPatientName.js

@@ -5,7 +5,9 @@
  * @returns {string} formatted name
  */
 export default function formatDICOMPatientName(name) {
-  if (typeof name !== 'string') return;
+  if (typeof name !== 'string') {
+    return;
+  }
 
   /**
    * Convert the first ^ to a ', '. String.replace() only affects