chore(release): publish [skip ci]

- @ohif/extension-dicom-segmentation@0.2.5
 - @ohif/extension-vtk@1.5.4
 - @ohif/core@2.9.4
 - @ohif/viewer@3.11.8

docs/latest/deployment/index.md

@@ -127,10 +127,107 @@ appropriate headers. You can find an example of this setup in our
 
 #### What if my archive doesn't support DicomWeb?
 
-> This is possible to do with the OHIF Viewer, but not as straightforward. Look
+It's possible to supply all Study data via JSON format, in the event you do not have a DicomWeb endpoint.
-> out for documentation on this subject in the near future.
+You can host all of the relevant files on any web accessible server (Amazon S3, Azure Blob Storage, Local file server etc.)
+
+This JSON is supplied via the '?url=' query parameter.
+It should reference an endpoint that returns **application/json** formatted text.
+
+If you do not have an API, you can simply return a text file containing the JSON from any web server.
+
+
+You tell the OHIF viewer to use JSON by appending the `'?url='` query to the `/Viewer` route:
+
+eg. `https://my-test-ohif-server/viewer?url=https://my-json-server/study-uid.json`
+
+The returned JSON object must contain a single root object with a 'studies' array.
+
+
+*Sample JSON format:*
+```JSON
+{
+    "studies": [
+      {
+        "StudyInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.78",
+        "StudyDescription": "BRAIN SELLA",
+        "StudyDate": "20010108",
+        "StudyTime": "120022",
+        "PatientName": "MISTER^MR",
+        "PatientId": "832040",
+        "series": [
+          {
+            "SeriesDescription": "SAG T-1",
+            "SeriesInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.121",
+            "SeriesNumber": 2,
+            "SeriesDate": "20010108",
+            "SeriesTime": "120318",
+            "Modality": "MR",
+            "instances": [
+              {
+                "metadata": {
+                    "Columns": 512,
+                    "Rows": 512,
+                    "InstanceNumber": 3,
+                    "AcquisitionNumber": 0,
+                    "PhotometricInterpretation": "MONOCHROME2",
+                    "BitsAllocated": 16,
+                    "BitsStored": 16,
+                    "PixelRepresentation": 1,
+                    "SamplesPerPixel": 1,
+                    "PixelSpacing": [0.390625, 0.390625],
+                    "HighBit": 15,
+                    "ImageOrientationPatient": [0,1,0,0,0,-1],
+                    "ImagePositionPatient": [11.600000,-92.500000, 98.099998],
+                    "FrameOfReferenceUID": "1.2.840.113619.2.5.1762583153.223134.978956938.470",
+                    "ImageType": ["ORIGINAL","PRIMARY","OTHER"],
+                    "Modality": "MR",
+                    "SOPInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.124",
+                    "SeriesInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.121",
+                    "StudyInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.78"
+                },
+                "url": "dicomweb://s3.amazonaws.com/lury/MRStudy/1.2.840.113619.2.5.1762583153.215519.978957063.124.dcm"
+             }
+           ]
+         }
+       ]
+     }
+   ]
+}
+```
+More info on this JSON format can be found here [Issue #1500](https://github.com/OHIF/Viewers/issues/1500)
+
+
+**Implementation Notes:**
+
+1. When hosting the viewer, you will also need to host a /viewer route on the server - or the browser may not be able to find the route.
+2. For each instance url (dicom object) in the returned JSON, you must prefix the `url` with `dicomweb:` in order for the cornerstone image loader to retrieve it correctly.
+ eg. `https://image-server/my-image.dcm` ---> `dicomweb:https://image-server/my-image.dcm`
+3. The JSON format above is compatible with >= v3.7.8 of the application. Older versions of the viewer used a different JSON format. As of 20/04/20 the public [https://viewer.ohif.org/] is a pre 3.0 version that does not support this format yet.
+4. The JSON format is case-sensitive. Please ensure you have matched casing with the naturalised Dicom format referenced in [Issue #1500](https://github.com/OHIF/Viewers/issues/1500).
+
+*CORS Issues (Cross-Origin Resource Sharing)*
+
+If you host a JSON API or Images on a different domain from the the app itself, you will likely have CORS issues. This will also happen when testing from Localhost and reaching out to remote servers.
+Even if the domain is the same, different ports, subdomains or protocols (https vs http) will also cause CORS errors.
+You will to need add a configuration on each server hosting these assets to allow your App server origin.
+
+For example:
+
+Lets assume your application is hosted on `https://my-ohif-server.com`.
+
+Your JSON API is hosted on `https://my-json-api.aws.com`
+
+And your images are stored on Amazon S3 at `https://my-s3-bucket.aws.com`
+
+When you first start your application, browsing to `https://my-ohif-server.com/viewer?url=https://my-json-api.aws.com/api/my-json-study-info.json`, you will likely get a CORS error in the browser console as it tries to connect to `https://my-json-api.aws.com`.
+
+Adding a setting on the JSON server to allow the CORS origin = `https://my-ohif-server.com` should solve this.
+
+Next, you will likely get a similar CORS error, as the browser tries to go to `https://my-s3-bucket.aws.com`.
+You will need to go to the S3 bucket configuration, and add a CORS setting to allow origin = `https://my-ohif-server.com`.
+
+Essentially, whenever the application connects to a remote resource, you will need to add the applications url to the allowed CORS Origins on that resource. Adding an origin similar to https://localhost:3000 will also allow for local testing.
 
-...
 
 ### Securing Your Data
 

docs/latest/viewer/configuration.md

@@ -11,6 +11,14 @@ are:
 ```js
 window.config = {
   routerBasename: '/',
+  /**
+   * "White Labeling" is used to change the branding, look, and feel of the OHIF
+   * Viewer. These settings, and the color variables that are used by our components,
+   * are the easiest way to rebrand the application.
+   *
+   * More extensive changes are made possible through swapping out the UI library,
+   * Viewer project, or extensions.
+   */
   whiteLabeling: {
     /* Optional: Should return a React component to be rendered in the "Logo" section of the application's Top Navigation bar */
     createLogoComponentFn: function(React) {
@@ -30,6 +38,32 @@ window.config = {
       });
     },
   },
+  /**
+   * Internally, the OHIF Viewer fetches data primarily with the
+   * `cornerstoneWADOImageLoader` and the `DICOMWebClient`. If either of these
+   * receive a non-200 response, this method allows you to handle that error.
+   *
+   * Common use cases include:
+   * - Showing a notification with the UINotificationService
+   * - Redirecting the user
+   * - Refreshing an auth token
+   *
+   * @param {Object} error - JS new Error()
+   * @param {XMLHttpRequest} error.request - The XHR request that's onreadystate change triggered this callback
+   * @param {string} error.response - The XHR's response property
+   * @param {number} error.status - The XHR's status property
+   */
+  httpErrorHandler: error => {
+    const { request: xhr, response, status } = err;
+    const { responseType, statusText } = xhr;
+
+    // In local files, status is 0 upon success in Firefox
+    if (xhr.readyState === XMLHttpRequest.DONE) {
+      console.log(statusText, response, responseType);
+    } else {
+      console.warn('Likely CORS error');
+    }
+  },
   extensions: [],
   showStudyList: true,
   filterQueryParam: false,

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.7.1...@ohif/extension-cornerstone@2.7.2) (2020-05-04)
+
+
+### Bug Fixes
+
+* 🐛 Proper error handling for derived display sets ([#1708](https://github.com/OHIF/Viewers/issues/1708)) ([5b20d8f](https://github.com/OHIF/Viewers/commit/5b20d8f323e4b3ef9988f2f2ab672d697b6da409))
+
+
+
+
+
+## [2.7.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.7.0...@ohif/extension-cornerstone@2.7.1) (2020-05-04)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [2.7.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.6.1...@ohif/extension-cornerstone@2.7.0) (2020-04-24)
+
+
+### Features
+
+* 🎸 Seg jump to slice + show/hide ([835f64d](https://github.com/OHIF/Viewers/commit/835f64d47a9994f6a25aaf3941a4974e215e7e7f))
+
+
+
+
+
+## [2.6.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.6.0...@ohif/extension-cornerstone@2.6.1) (2020-04-23)
+
+
+### Bug Fixes
+
+* 🐛 Multiframe fix ([#1661](https://github.com/OHIF/Viewers/issues/1661)) ([7120561](https://github.com/OHIF/Viewers/commit/71205618ecb8b592247c5acb32284bfe7e18fce5))
+
+
+
+
+
+# [2.6.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.5.2...@ohif/extension-cornerstone@2.6.0) (2020-04-23)
+
+
+### Features
+
+* configuration to hook into XHR Error handling ([e96205d](https://github.com/OHIF/Viewers/commit/e96205de35e5bec14dc8a9a8509db3dd4e6ecdb6))
+
+
+
+
+
 ## [2.5.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.5.1...@ohif/extension-cornerstone@2.5.2) (2020-04-09)
 
 **Note:** Version bump only for package @ohif/extension-cornerstone

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "2.5.2",
+  "version": "2.7.2",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "cornerstone-core": "^2.2.8",
     "cornerstone-math": "^0.1.8",
     "cornerstone-tools": "4.12.5",
-    "cornerstone-wado-image-loader": "^3.0.0",
+    "cornerstone-wado-image-loader": "^3.1.0",
-    "dcmjs": "^0.10.1",
+    "dcmjs": "^0.12.3",
     "dicom-parser": "^1.8.3",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
@@ -51,6 +51,6 @@
     "classnames": "^2.2.6",
     "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
-    "react-cornerstone-viewport": "^2.3.6"
+    "react-cornerstone-viewport": "2.3.8"
   }
 }

extensions/cornerstone/src/OHIFCornerstoneViewport.js

@@ -4,6 +4,7 @@ import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport';
 import OHIF from '@ohif/core';
 import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
+import debounce from 'lodash.debounce';
 
 const { StackManager } = OHIF.utils;
 
@@ -179,7 +180,7 @@ class OHIFCornerstoneViewport extends Component {
 
     if (
       displaySet.displaySetInstanceUID !==
-        prevDisplaySet.displaySetInstanceUID ||
+      prevDisplaySet.displaySetInstanceUID ||
       displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
       displaySet.frameIndex !== prevDisplaySet.frameIndex
     ) {
@@ -215,12 +216,26 @@ class OHIFCornerstoneViewport extends Component {
       });
     }
 
+    const debouncedNewImageHandler = debounce(({ currentImageIdIndex, sopInstanceUid }) => {
+      const { displaySet } = this.props.viewportData;
+      const { StudyInstanceUID } = displaySet;
+      if (currentImageIdIndex > 0) {
+        this.props.onNewImage({
+          StudyInstanceUID,
+          SOPInstanceUID: sopInstanceUid,
+          frameIndex: currentImageIdIndex,
+          activeViewportIndex: viewportIndex,
+        });
+      }
+    }, 700);
+
     return (
       <>
         <ConnectedCornerstoneViewport
           viewportIndex={viewportIndex}
           imageIds={imageIds}
           imageIdIndex={currentImageIdIndex}
+          onNewImage={debouncedNewImageHandler}
           // ~~ Connected (From REDUX)
           // frameRate={frameRate}
           // isPlaying={false}

extensions/cornerstone/src/commandsModule.js

@@ -267,7 +267,7 @@ const commandsModule = ({ servicesManager }) => {
       const study = studyMetadataManager.get(StudyInstanceUID);
 
       const displaySet = study.findDisplaySet(ds => {
-        return ds.images.find(i => i.getSOPInstanceUID() === SOPInstanceUID)
+        return ds.images && ds.images.find(i => i.getSOPInstanceUID() === SOPInstanceUID)
       });
 
       displaySet.SOPInstanceUID = SOPInstanceUID;

extensions/cornerstone/src/index.js

@@ -34,8 +34,15 @@ export default {
   preRegistration({ servicesManager, configuration = {} }) {
     init({ servicesManager, configuration });
   },
-  getViewportModule() {
+  getViewportModule({ commandsManager }) {
-    return OHIFCornerstoneViewport;
+    const ExtendedOHIFCornerstoneViewport = props => {
+      const onNewImageHandler = jumpData => {
+        commandsManager.runCommand('jumpToImage', jumpData);
+      };
+      return <OHIFCornerstoneViewport {...props} onNewImage={onNewImageHandler} />;
+    };
+
+    return ExtendedOHIFCornerstoneViewport;
   },
   getToolbarModule() {
     return toolbarModule;

extensions/cornerstone/src/initCornerstoneTools.js

@@ -2,6 +2,9 @@ import Hammer from 'hammerjs';
 import cornerstone from 'cornerstone-core';
 import cornerstoneMath from 'cornerstone-math';
 import cornerstoneTools from 'cornerstone-tools';
+import OHIF from '@ohif/core';
+
+const { log } = OHIF;
 
 export default function(configuration = {}) {
   // For debugging
@@ -12,6 +15,13 @@ export default function(configuration = {}) {
   cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
   cornerstoneTools.init(configuration);
 
+  cornerstoneTools.loadHandlerManager.setErrorLoadingHandler(
+    (element, imageId, error) => {
+      log.error(imageId);
+      throw error;
+    }
+  );
+
   // Set the tool font and font size
   // context.font = "[style] [variant] [weight] [size]/[line height] [font family]";
   const fontFamily =

extensions/dicom-html/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.2.1...@ohif/extension-dicom-html@1.2.2) (2020-05-04)
+
+
+### Bug Fixes
+
+* 🐛 Proper error handling for derived display sets ([#1708](https://github.com/OHIF/Viewers/issues/1708)) ([5b20d8f](https://github.com/OHIF/Viewers/commit/5b20d8f323e4b3ef9988f2f2ab672d697b6da409))
+
+
+
+
+
+## [1.2.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.2.0...@ohif/extension-dicom-html@1.2.1) (2020-04-28)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
+# [1.2.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.1.2...@ohif/extension-dicom-html@1.2.0) (2020-04-24)
+
+
+### Features
+
+* 🎸 Seg jump to slice + show/hide ([835f64d](https://github.com/OHIF/Viewers/commit/835f64d47a9994f6a25aaf3941a4974e215e7e7f))
+
+
+
+
+
 ## [1.1.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.1.1...@ohif/extension-dicom-html@1.1.2) (2020-04-02)
 
 **Note:** Version bump only for package @ohif/extension-dicom-html

extensions/dicom-html/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-html",
-  "version": "1.1.2",
+  "version": "1.2.2",
   "description": "OHIF extension for rendering structured reports to HTML",
   "author": "OHIF",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
-    "dcmjs": "^0.10.1",
+    "dcmjs": "^0.12.3",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

extensions/dicom-html/src/DicomHtmlViewport.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import * as dcmjs from 'dcmjs';
+import dcmjs from 'dcmjs';
 import TypedArrayProp from './TypedArrayProp';
 
 import './DicomHtmlViewport.css';

extensions/dicom-p10-downloader/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.1.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-p10-downloader@0.0.2...@ohif/extension-dicom-p10-downloader@0.1.0) (2020-04-23)
+
+
+### Features
+
+* configuration to hook into XHR Error handling ([e96205d](https://github.com/OHIF/Viewers/commit/e96205de35e5bec14dc8a9a8509db3dd4e6ecdb6))
+
+
+
+
+
 ## 0.0.2 (2020-04-15)
 
 **Note:** Version bump only for package @ohif/extension-dicom-p10-downloader

extensions/dicom-p10-downloader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-p10-downloader",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "OHIF extension for downloading DICOM P10 files",
   "author": "OHIF",
   "license": "MIT",
@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
+    "dicomweb-client": "^0.6.0",
     "file-saver": "^2.0.2",
     "jszip": "^3.2.2"
   }

extensions/dicom-rt/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.1.1...@ohif/extension-dicom-rt@0.1.2) (2020-05-04)
+
+
+### Bug Fixes
+
+* 🐛 Proper error handling for derived display sets ([#1708](https://github.com/OHIF/Viewers/issues/1708)) ([5b20d8f](https://github.com/OHIF/Viewers/commit/5b20d8f323e4b3ef9988f2f2ab672d697b6da409))
+
+
+
+
+
+## [0.1.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.1.0...@ohif/extension-dicom-rt@0.1.1) (2020-04-28)
+
+**Note:** Version bump only for package @ohif/extension-dicom-rt
+
+
+
+
+
+# [0.1.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.0.2...@ohif/extension-dicom-rt@0.1.0) (2020-04-24)
+
+
+### Features
+
+* 🎸 Seg jump to slice + show/hide ([835f64d](https://github.com/OHIF/Viewers/commit/835f64d47a9994f6a25aaf3941a4974e215e7e7f))
+
+
+
+
+
 ## 0.0.2 (2020-04-09)
 
 **Note:** Version bump only for package @ohif/extension-dicom-rt

extensions/dicom-rt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-rt",
-  "version": "0.0.2",
+  "version": "0.1.2",
   "description": "OHIF extension for rendering DICOM RTSTRUCTs on top of cornerstone images.",
   "author": "OHIF",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@ohif/core": "^0.50.0",
     "cornerstone-core": "^2.2.8",
     "cornerstone-tools": "^4.0.9",
-    "dcmjs": "^0.8.3",
+    "dcmjs": "^0.12.3",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

extensions/dicom-rt/src/components/StructureSetItem/StructureSetItem.css

@@ -61,14 +61,17 @@
 }
 
 .dcmrt-structure-set-item .item-label {
-  overflow: hidden;
-  max-width: calc(100% - 15px); /* calc(100% - 50px); 20px = eye icon */
-  text-overflow: ellipsis;
-  overflow-wrap: normal;
-  white-space: nowrap;
-
   display: flex;
   justify-content: space-between;
+  padding-right: 10px;
+}
+
+.dcmrt-structure-set-item .item-label span {
+  overflow-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: calc(100% - 40px); /* calc(100% - 50px); 20px = eye icon */
+  text-overflow: ellipsis;
 }
 
 .dcmrt-structure-set-item .item-label .eye-icon {

extensions/dicom-rt/src/components/StructureSetItem/StructureSetItem.js

@@ -41,7 +41,7 @@ const StructureSetItem = ({
       >
         <div>
           <div className="item-label" style={{ marginBottom: 4 }}>
-            {label}
+            <span>{label}</span>
             <Icon
               className={`eye-icon ${isVisible && '--visible'}`}
               name={isVisible ? 'eye' : 'eye-closed'}

extensions/dicom-rt/src/index.js

@@ -27,10 +27,7 @@ export default {
       };
 
       return (
-        <RTPanel
+        <RTPanel {...props} onContourItemClick={contourItemClickHandler} />
-          {...props}
-          onContourItemClick={contourItemClickHandler}
-        />
       );
     };
 
@@ -51,8 +48,10 @@ export default {
               if (study && study.series) {
                 for (let j = 0; j < study.series.length; j++) {
                   const series = study.series[j];
-                  console.log(studies);
+                  if (
-                  if (['RTSTRUCT', 'RTPLAN', 'RTDOSE'].includes(series.Modality)) {
+                    /* Could be expanded to contain RTPLAN and RTDOSE information in the future */
+                    ['RTSTRUCT'].includes(series.Modality)
+                  ) {
                     return false;
                   }
                 }

extensions/dicom-rt/src/loadRTStruct.js

@@ -1,5 +1,5 @@
 import OHIF from '@ohif/core';
-import * as dcmjs from 'dcmjs';
+import dcmjs from 'dcmjs';
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
 import transformPointsToImagePlane from './utils/transformPointsToImagePlane';

extensions/dicom-segmentation/CHANGELOG.md

@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.2.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.2.4...@ohif/extension-dicom-segmentation@0.2.5) (2020-05-06)
+
+**Note:** Version bump only for package @ohif/extension-dicom-segmentation
+
+
+
+
+
+## [0.2.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.2.3...@ohif/extension-dicom-segmentation@0.2.4) (2020-05-04)
+
+**Note:** Version bump only for package @ohif/extension-dicom-segmentation
+
+
+
+
+
+## [0.2.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.2.2...@ohif/extension-dicom-segmentation@0.2.3) (2020-05-04)
+
+
+### Bug Fixes
+
+* 🐛 Proper error handling for derived display sets ([#1708](https://github.com/OHIF/Viewers/issues/1708)) ([5b20d8f](https://github.com/OHIF/Viewers/commit/5b20d8f323e4b3ef9988f2f2ab672d697b6da409))
+
+
+
+
+
+## [0.2.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.2.1...@ohif/extension-dicom-segmentation@0.2.2) (2020-04-28)
+
+**Note:** Version bump only for package @ohif/extension-dicom-segmentation
+
+
+
+
+
+## [0.2.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.2.0...@ohif/extension-dicom-segmentation@0.2.1) (2020-04-27)
+
+
+### Bug Fixes
+
+* 🐛 Dropdown not updating when selecting segment ([#1675](https://github.com/OHIF/Viewers/issues/1675)) ([20e366f](https://github.com/OHIF/Viewers/commit/20e366ffbd76781f48dc99c9f59e24b255b5e5df)), closes [#1669](https://github.com/OHIF/Viewers/issues/1669)
+
+
+
+
+
+# [0.2.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.1.2...@ohif/extension-dicom-segmentation@0.2.0) (2020-04-24)
+
+
+### Features
+
+* 🎸 Seg jump to slice + show/hide ([835f64d](https://github.com/OHIF/Viewers/commit/835f64d47a9994f6a25aaf3941a4974e215e7e7f))
+
+
+
+
+
 ## [0.1.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.1.1...@ohif/extension-dicom-segmentation@0.1.2) (2020-04-09)
 
 **Note:** Version bump only for package @ohif/extension-dicom-segmentation

extensions/dicom-segmentation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-segmentation",
-  "version": "0.1.2",
+  "version": "0.2.5",
   "description": "OHIF extension for viewing segmentations in the 2D MPR view",
   "author": "OHIF",
   "license": "MIT",
@@ -31,13 +31,14 @@
     "@ohif/core": "^0.50.0",
     "cornerstone-core": "^2.2.8",
     "cornerstone-tools": "4.12.5",
-    "dcmjs": "^0.6.1",
+    "dcmjs": "^0.12.2",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
+    "gl-matrix": "^3.3.0",
     "react-select": "^3.0.8"
   }
 }

extensions/dicom-segmentation/src/OHIFDicomSegSopClassHandler.js

@@ -1,71 +0,0 @@
-import { MODULE_TYPES, utils } from '@ohif/core';
-import loadSegmentation from './loadSegmentation';
-
-// TODO: Should probably use dcmjs for this
-const SOP_CLASS_UIDS = {
-  DICOM_SEG: '1.2.840.10008.5.1.4.1.1.66.4',
-};
-
-const sopClassUIDs = Object.values(SOP_CLASS_UIDS);
-
-// TODO: Handle the case where there is more than one SOP Class Handler for the
-// same SOP Class.
-const OHIFDicomSegSopClassHandler = {
-  id: 'OHIFDicomSegSopClassHandler',
-  type: MODULE_TYPES.SOP_CLASS_HANDLER,
-  sopClassUIDs,
-  getDisplaySetFromSeries: function (
-    series,
-    study,
-    dicomWebClient,
-    authorizationHeaders
-  ) {
-    const instance = series.getFirstInstance();
-    const metadata = instance.getData().metadata;
-
-    const {
-      SeriesDate,
-      SeriesTime,
-      SeriesDescription,
-      FrameOfReferenceUID,
-      SOPInstanceUID,
-      SeriesInstanceUID,
-      StudyInstanceUID,
-    } = metadata;
-
-    const segDisplaySet = {
-      Modality: 'SEG',
-      displaySetInstanceUID: utils.guid(),
-      wadoRoot: study.getData().wadoRoot,
-      wadoUri: instance.getData().wadouri,
-      SOPInstanceUID,
-      SeriesInstanceUID,
-      StudyInstanceUID,
-      FrameOfReferenceUID,
-      authorizationHeaders,
-      metadata,
-      isDerived: true,
-      referencedDisplaySetUID: null, // Assigned when loaded.
-      labelmapIndex: null, // Assigned when loaded.
-      isLoaded: false,
-      SeriesDate,
-      SeriesTime,
-      SeriesDescription,
-    };
-
-    segDisplaySet.load = function (referencedDisplaySet, studies) {
-      return loadSegmentation(
-        segDisplaySet,
-        referencedDisplaySet,
-        studies
-      ).catch(error => {
-        segDisplaySet.isLoaded = false;
-        throw new Error(error);
-      });
-    };
-
-    return segDisplaySet;
-  },
-};
-
-export default OHIFDicomSegSopClassHandler;

extensions/dicom-segmentation/src/components/SegmentItem/SegmentItem.css

@@ -12,14 +12,6 @@
   height: 20px;
 }
 
-.dcmseg-segment-item .segment-label {
-  overflow: hidden;
-  max-width: calc(100% - 50px);
-  text-overflow: ellipsis;
-  overflow-wrap: normal;
-  white-space: nowrap;
-}
-
 .dcmseg-segment-item .segment-info {
   display: inline-block;
   margin-top: 9px;
@@ -62,3 +54,30 @@
 .dcmseg-segment-item .segment-actions .btnAction i {
   margin-right: 4px;
 }
+
+.dcmseg-segment-item .segment-label {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 20px;
+}
+
+.dcmseg-segment-item .segment-label span {
+  overflow-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: calc(100% - 40px); /* calc(100% - 50px); 20px = eye icon */
+  text-overflow: ellipsis;
+}
+
+.dcmseg-segment-item .segment-label .eye-icon {
+  cursor: pointer;
+  color: var(--active-color);
+}
+
+.dcmseg-segment-item .segment-label .eye-icon:hover {
+  color: var(--hover-color);
+}
+
+.dcmseg-segment-item .segment-label .eye-icon.--visible {
+  color: var(--default-color);
+}

extensions/dicom-segmentation/src/components/SegmentItem/SegmentItem.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { TableListItem, Icon } from '@ohif/ui';
 
@@ -17,48 +17,68 @@ ColoredCircle.propTypes = {
   color: PropTypes.array.isRequired,
 };
 
-const SegmentItem = ({ index, label, onClick, itemClass, color }) => (
+const SegmentItem = ({ index, label, onClick, itemClass, color, visible = true, onVisibilityChange }) => {
-  <div className="dcmseg-segment-item">
+  const [isVisible, setIsVisible] = useState(visible);
-    <TableListItem
+
-      key={index}
+  useEffect(() => {
-      itemKey={index}
+    setIsVisible(visible);
-      itemIndex={index}
+  }, [visible]);
-      itemClass={itemClass}
+
-      itemMeta={<ColoredCircle color={color} />}
+  return (
-      itemMetaClass="segment-color-section"
+    <div className="dcmseg-segment-item">
-      onItemClick={onClick}
+      <TableListItem
-    >
+        key={index}
-      <div>
+        itemKey={index}
-        <div className="segment-label" style={{ marginBottom: 4 }}>
+        itemIndex={index}
-          {label}
+        itemClass={itemClass}
-        </div>
+        itemMeta={<ColoredCircle color={color} />}
-        {false && <div className="segment-info">{'...'}</div>}
+        itemMetaClass="segment-color-section"
-        {false && (
+        onItemClick={onClick}
-          <div className="segment-actions">
+      >
-            <button
+        <div>
-              className="btnAction"
+          <div className="segment-label" style={{ marginBottom: 4 }}>
-              onClick={() => console.log('Relabelling...')}
+            <span>{label}</span>
-            >
+            <Icon
-              <span style={{ marginRight: '4px' }}>
+              className={`eye-icon ${isVisible && '--visible'}`}
-                <Icon name="edit" width="14px" height="14px" />
+              name={isVisible ? 'eye' : 'eye-closed'}
-              </span>
+              width="20px"
+              height="20px"
+              onClick={event => {
+                event.stopPropagation();
+                const newVisibility = !isVisible;
+                setIsVisible(newVisibility);
+                onVisibilityChange(newVisibility);
+              }}
+            />
+          </div>
+          {false && <div className="segment-info">{'...'}</div>}
+          {false && (
+            <div className="segment-actions">
+              <button
+                className="btnAction"
+                onClick={() => console.log('Relabelling...')}
+              >
+                <span style={{ marginRight: '4px' }}>
+                  <Icon name="edit" width="14px" height="14px" />
+                </span>
               Relabel
               </button>
-            <button
+              <button
-              className="btnAction"
+                className="btnAction"
-              onClick={() => console.log('Editing description...')}
+                onClick={() => console.log('Editing description...')}
-            >
+              >
-              <span style={{ marginRight: '4px' }}>
+                <span style={{ marginRight: '4px' }}>
-                <Icon name="edit" width="14px" height="14px" />
+                  <Icon name="edit" width="14px" height="14px" />
-              </span>
+                </span>
               Description
               </button>
-          </div>
+            </div>
-        )}
+          )}
-      </div>
+        </div>
-    </TableListItem>
+      </TableListItem>
-  </div>
+    </div>
-);
+  );
+};
 
 SegmentItem.propTypes = {
   index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,

extensions/dicom-segmentation/src/components/SegmentationPanel/SegmentationPanel.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cornerstoneTools from 'cornerstone-tools';
 import cornerstone from 'cornerstone-core';
@@ -28,28 +28,56 @@ const refreshViewport = () => {
 /**
  * SegmentationPanel component
  *
- * @param {Object} props
+ * @param {Array} props.studies - Studies data
- * @param {Array} props.studies
+ * @param {Array} props.viewports - Viewports data (viewportSpecificData)
- * @param {Array} props.viewports - viewportSpecificData
+ * @param {number} props.activeIndex - Active viewport index
- * @param {number} props.activeIndex - activeViewportIndex
+ * @param {boolean} props.isOpen - Boolean that indicates if the panel is expanded
+ * @param {Function} props.onSegmentItemClick - Segment click handler
+ * @param {Function} props.onSegmentVisibilityChange - Segment visibiliy change handler
+ * @param {Function} props.onConfigurationChange - Configuration change handler
+ * @param {Function} props.activeContexts - List of active application contexts
+ * @param {Function} props.contexts - List of available application contexts
  * @returns component
  */
-const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
+const SegmentationPanel = ({
+  studies,
+  viewports,
+  activeIndex,
+  isOpen,
+  onSegmentItemClick,
+  onSegmentVisibilityChange,
+  onConfigurationChange,
+  onDisplaySetLoadFailure,
+  onSelectedSegmentationChange,
+  activeContexts,
+  contexts,
+}) => {
+  const isVTK = () => activeContexts.includes(contexts.VTK);
+  const isCornerstone = () => activeContexts.includes(contexts.CORNERSTONE);
+
   /*
    * TODO: wrap get/set interactions with the cornerstoneTools
    * store with context to make these kind of things less blurry.
    */
   const { configuration } = cornerstoneTools.getModule('segmentation');
   const DEFAULT_BRUSH_RADIUS = configuration.radius || 10;
+
+  /*
+   * TODO: We shouldn't hardcode brushColor color, in the future
+   * the SEG may set the colorLUT to whatever it wants.
+   */
   const [state, setState] = useState({
     brushRadius: DEFAULT_BRUSH_RADIUS,
-    brushColor: 'rgba(221, 85, 85, 1)', /* TODO: We shouldn't hardcode this color, in the future the SEG may set the colorLUT to whatever it wants. */
+    brushColor:
+      'rgba(221, 85, 85, 1)',
     selectedSegment: null,
     selectedSegmentation: null,
-    showSegSettings: false,
+    showSegmentationSettings: false,
     brushStackState: null,
     labelmapList: [],
-    segmentList: []
+    segmentList: [],
+    cachedSegmentsProperties: [],
+    isLoading: false
   });
 
   useEffect(() => {
@@ -57,10 +85,34 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
       log.warn('Segmentation Panel: labelmap modified', event);
       const module = cornerstoneTools.getModule('segmentation');
       const activeViewport = viewports[activeIndex];
-      const firstImageId = studyMetadata.getFirstImageId(activeViewport.displaySetInstanceUID);
+      const studyMetadata = studyMetadataManager.get(
+        activeViewport.StudyInstanceUID
+      );
+      const firstImageId = studyMetadata.getFirstImageId(
+        activeViewport.displaySetInstanceUID
+      );
       updateState('brushStackState', module.state.series[firstImageId]);
     };
 
+    /*
+     * TODO: Improve the way we notify parts of the app that depends on segs to be loaded.
+     *
+     * Currently we are using a non-ideal implementation through a custom event to notify the segmentation panel
+     * or other components that could rely on loaded segmentations that
+     * the segments were loaded so that e.g. when the user opens the panel
+     * before the segments are fully loaded, the panel can subscribe to this custom event
+     * and update itself with the new segments.
+     *
+     * This limitation is due to the fact that the cs segmentation module is an object (which will be
+     * updated after the segments are loaded) that React its not aware of its changes
+     * because the module object its not passed in to the panel component as prop but accessed externally.
+     *
+     * Improving this event approach to something reactive that can be tracked inside the react lifecycle,
+     * allows us to easily watch the module or the segmentations loading process in any other component
+     * without subscribing to external events.
+     */
+    document.addEventListener('extensiondicomsegmentationsegloaded', refreshSegmentations);
+
     /*
      * These are specific to each element;
      * Need to iterate cornerstone-tools tracked enabled elements?
@@ -74,6 +126,7 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
     );
 
     return () => {
+      document.removeEventListener('extensiondicomsegmentationsegloaded', refreshSegmentations);
       cornerstoneTools.store.state.enabledElements.forEach(enabledElement =>
         enabledElement.removeEventListener(
           'cornerstonetoolslabelmapmodified',
@@ -81,25 +134,37 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
         )
       );
     };
-  });
+  }, [activeIndex, viewports]);
 
-  useEffect(() => {
+  const refreshSegmentations = useCallback(() => {
     const module = cornerstoneTools.getModule('segmentation');
     const activeViewport = viewports[activeIndex];
-    const studyMetadata = studyMetadataManager.get(activeViewport.StudyInstanceUID);
+    const studyMetadata = studyMetadataManager.get(
-    const firstImageId = studyMetadata.getFirstImageId(activeViewport.displaySetInstanceUID);
+      activeViewport.StudyInstanceUID
+    );
+    const firstImageId = studyMetadata.getFirstImageId(
+      activeViewport.displaySetInstanceUID
+    );
     const brushStackState = module.state.series[firstImageId];
-
     if (brushStackState) {
-      const labelmap3D = brushStackState.labelmaps3D[brushStackState.activeLabelmapIndex];
+      const labelmap3D =
-      const labelmapList = getLabelmapList(brushStackState, firstImageId, activeViewport);
+        brushStackState.labelmaps3D[brushStackState.activeLabelmapIndex];
-      const segmentList = getSegmentList(labelmap3D, firstImageId);
+      const labelmapList = getLabelmapList(
+        brushStackState,
+        firstImageId,
+        activeViewport
+      );
+      const segmentList = getSegmentList(
+        labelmap3D,
+        firstImageId,
+        brushStackState
+      );
       setState(state => ({
         ...state,
         brushStackState,
         selectedSegmentation: brushStackState.activeLabelmapIndex,
         labelmapList,
-        segmentList
+        segmentList,
       }));
     } else {
       setState(state => ({
@@ -108,127 +173,267 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
         segmentList: [],
       }));
     }
-  }, [studies, viewports, activeIndex]);
+  }, [
+    viewports,
+    activeIndex,
+    state.isLoading
+  ]);
+
+  useEffect(() => {
+    refreshSegmentations();
+  }, [viewports, activeIndex, state.selectedSegmentation, activeContexts, state.isLoading]);
 
   /* Handle open/closed panel behaviour */
   useEffect(() => {
-    updateState('showSegSettings', state.showSegSettings && !isOpen);
+    setState(state => ({
+      ...state,
+      showSegmentationSettings: state.showSegmentationSettings && !isOpen,
+    }));
   }, [isOpen]);
 
-  const getLabelmapList = (brushStackState, firstImageId, activeViewport) => {
+  const getLabelmapList = useCallback(
-    /* Get list of SEG labelmaps specific to active viewport (reference series) */
+    (brushStackState, firstImageId, activeViewport) => {
-    const referencedSegDisplaysets = _getReferencedSegDisplaysets(
+      /* Get list of SEG labelmaps specific to active viewport (reference series) */
-      activeViewport.StudyInstanceUID,
+      const referencedSegDisplaysets = _getReferencedSegDisplaysets(
-      activeViewport.SeriesInstanceUID
+        activeViewport.StudyInstanceUID,
-    );
+        activeViewport.SeriesInstanceUID
+      );
 
-    return referencedSegDisplaysets.map((displaySet, index) => {
+      return referencedSegDisplaysets.map((displaySet, index) => {
-      const { labelmapIndex, SeriesDate, SeriesTime } = displaySet;
+        const { labelmapIndex, SeriesDate, SeriesTime } = displaySet;
 
-      /* Map to display representation */
+        /* Map to display representation */
-      const dateStr = `${SeriesDate}:${SeriesTime}`.split('.')[0];
+        const dateStr = `${SeriesDate}:${SeriesTime}`.split('.')[0];
-      const date = moment(dateStr, 'YYYYMMDD:HHmmss');
+        const date = moment(dateStr, 'YYYYMMDD:HHmmss');
-      const isActiveLabelmap =
+        const isActiveLabelmap =
-        labelmapIndex === brushStackState.activeLabelmapIndex;
+          labelmapIndex === brushStackState.activeLabelmapIndex;
-      const displayDate = date.format('ddd, MMM Do YYYY');
+        const displayDate = date.format('ddd, MMM Do YYYY');
-      const displayTime = date.format('h:mm:ss a');
+        const displayTime = date.format('h:mm:ss a');
-      const displayDescription = displaySet.SeriesDescription;
+        const displayDescription = displaySet.SeriesDescription;
 
-      return {
+        return {
-        value: labelmapIndex,
+          value: labelmapIndex,
-        title: displayDescription,
+          title: displayDescription,
-        description: displayDate,
+          description: displayDate,
-        onClick: async () => {
+          onClick: async () => {
-          const activatedLabelmapIndex = await _setActiveLabelmap(
+            const activatedLabelmapIndex = await _setActiveLabelmap(
-            activeViewport,
+              activeViewport,
-            studies,
+              studies,
-            displaySet,
+              displaySet,
-            firstImageId,
+              firstImageId,
-            brushStackState.activeLabelmapIndex
+              brushStackState.activeLabelmapIndex,
-          );
+              () => onSelectedSegmentationChange(),
-          updateState('selectedSegmentation', activatedLabelmapIndex);
+              onDisplaySetLoadFailure
-        },
+            );
-      };
+            updateState('selectedSegmentation', activatedLabelmapIndex);
-    });
+          },
-  };
+        };
+      });
+    },
+    [studies]
+  );
 
-  const getSegmentList = (labelmap3D, firstImageId) => {
+  const getSegmentList = useCallback(
-    /*
+    (labelmap3D, firstImageId, brushStackState) => {
-     * Newly created segments have no `meta`
+      /*
-     * So we instead build a list of all segment indexes in use
+       * Newly created segments have no `meta`
-     * Then find any associated metadata
+       * So we instead build a list of all segment indexes in use
-     */
+       * Then find any associated metadata
-    const uniqueSegmentIndexes = labelmap3D.labelmaps2D
+       */
-      .reduce((acc, labelmap2D) => {
+      const uniqueSegmentIndexes = labelmap3D.labelmaps2D
-        if (labelmap2D) {
+        .reduce((acc, labelmap2D) => {
-          const segmentIndexes = labelmap2D.segmentsOnLabelmap;
+          if (labelmap2D) {
+            const segmentIndexes = labelmap2D.segmentsOnLabelmap;
 
-          for (let i = 0; i < segmentIndexes.length; i++) {
+            for (let i = 0; i < segmentIndexes.length; i++) {
-            if (!acc.includes(segmentIndexes[i]) && segmentIndexes[i] !== 0) {
+              if (!acc.includes(segmentIndexes[i]) && segmentIndexes[i] !== 0) {
-              acc.push(segmentIndexes[i]);
+                acc.push(segmentIndexes[i]);
+              }
             }
           }
+
+          return acc;
+        }, [])
+        .sort((a, b) => a - b);
+
+      const module = cornerstoneTools.getModule('segmentation');
+      const colorLutTable =
+        module.state.colorLutTables[labelmap3D.colorLUTIndex];
+      const hasLabelmapMeta = labelmap3D.metadata && labelmap3D.metadata.data;
+
+      const segmentList = [];
+      for (let i = 0; i < uniqueSegmentIndexes.length; i++) {
+        const segmentIndex = uniqueSegmentIndexes[i];
+
+        const color = colorLutTable[segmentIndex];
+        let segmentLabel = '(unlabeled)';
+        let segmentNumber = segmentIndex;
+
+        /* Meta */
+        if (hasLabelmapMeta) {
+          const segmentMeta = labelmap3D.metadata.data[segmentIndex];
+
+          if (segmentMeta) {
+            segmentNumber = segmentMeta.SegmentNumber;
+            segmentLabel = segmentMeta.SegmentLabel;
+          }
         }
 
-        return acc;
+        const sameSegment = state.selectedSegment === segmentNumber;
-      }, [])
+        const setCurrentSelectedSegment = () => {
-      .sort((a, b) => a - b);
+          _setActiveSegment(
+            firstImageId,
+            segmentNumber,
+            labelmap3D.activeSegmentIndex
+          );
+          updateState('selectedSegment', sameSegment ? null : segmentNumber);
 
-    const module = cornerstoneTools.getModule('segmentation');
+          const validIndexList = [];
-    const colorLutTable =
+          labelmap3D.labelmaps2D.forEach((labelMap2D, index) => {
-      module.state.colorLutTables[labelmap3D.colorLUTIndex];
+            if (labelMap2D.segmentsOnLabelmap.includes(segmentNumber)) {
-    const hasLabelmapMeta = labelmap3D.metadata && labelmap3D.metadata.data;
+              validIndexList.push(index);
+            }
+          });
+          const avg = array => array.reduce((a, b) => a + b) / array.length;
+          const average = avg(validIndexList);
+          const closest = validIndexList.reduce((prev, curr) => {
+            return Math.abs(curr - average) < Math.abs(prev - average)
+              ? curr
+              : prev;
+          });
 
-    const segmentList = [];
+          if (isCornerstone()) {
-    for (let i = 0; i < uniqueSegmentIndexes.length; i++) {
+            const enabledElements = cornerstone.getEnabledElements();
-      const segmentIndex = uniqueSegmentIndexes[i];
+            const element = enabledElements[activeIndex].element;
+            const toolState = cornerstoneTools.getToolState(element, 'stack');
 
-      const color = colorLutTable[segmentIndex];
+            if (!toolState) {
-      let segmentLabel = '(unlabeled)';
+              return;
-      let segmentNumber = segmentIndex;
+            }
 
-      /* Meta */
+            const imageIds = toolState.data[0].imageIds;
-      if (hasLabelmapMeta) {
+            const imageId = imageIds[closest];
-        const segmentMeta = labelmap3D.metadata.data[segmentIndex];
+            const frameIndex = imageIds.indexOf(imageId);
 
-        if (segmentMeta) {
+            const SOPInstanceUID = cornerstone.metaData.get(
-          segmentNumber = segmentMeta.SegmentNumber;
+              'SOPInstanceUID',
-          segmentLabel = segmentMeta.SegmentLabel;
+              imageId
+            );
+            const StudyInstanceUID = cornerstone.metaData.get(
+              'StudyInstanceUID',
+              imageId
+            );
+
+            onSegmentItemClick({
+              StudyInstanceUID,
+              SOPInstanceUID,
+              frameIndex,
+              activeViewportIndex: activeIndex,
+            });
+          }
+
+          if (isVTK()) {
+            const activeViewport = viewports[activeIndex];
+            const studyMetadata = studyMetadataManager.get(
+              activeViewport.StudyInstanceUID
+            );
+            const allDisplaySets = studyMetadata.getDisplaySets();
+            const currentDisplaySet = allDisplaySets.find(
+              displaySet =>
+                displaySet.displaySetInstanceUID ===
+                activeViewport.displaySetInstanceUID
+            );
+
+            const frame = labelmap3D.labelmaps2D[closest];
+
+            onSegmentItemClick({
+              studies,
+              StudyInstanceUID: currentDisplaySet.StudyInstanceUID,
+              displaySetInstanceUID: currentDisplaySet.displaySetInstanceUID,
+              SOPClassUID: viewports[activeIndex].sopClassUIDs[0],
+              SOPInstanceUID: currentDisplaySet.SOPInstanceUID,
+              segmentNumber,
+              frameIndex: closest,
+              frame,
+            });
+          }
+        };
+
+        const isSegmentVisible = () => {
+          return !labelmap3D.segmentsHidden[segmentIndex];
+        };
+
+        const toggleSegmentVisibility = () => {
+          const segmentsHidden = labelmap3D.segmentsHidden;
+          segmentsHidden[segmentIndex] = !segmentsHidden[segmentIndex];
+          return !segmentsHidden[segmentIndex];
+        };
+
+        const cachedSegmentProperties = state.cachedSegmentsProperties[segmentNumber];
+        let visible = isSegmentVisible();
+        if (cachedSegmentProperties && cachedSegmentProperties.visible !== visible) {
+          toggleSegmentVisibility();
         }
+
+        segmentList.push(
+          <SegmentItem
+            key={segmentNumber}
+            itemClass={`segment-item ${sameSegment && 'selected'}`}
+            onClick={() => setCurrentSelectedSegment()}
+            label={segmentLabel}
+            index={segmentNumber}
+            color={color}
+            visible={visible}
+            onVisibilityChange={newVisibility => {
+              if (isCornerstone()) {
+                const enabledElements = cornerstone.getEnabledElements();
+                const element = enabledElements[activeIndex].element;
+                module.setters.toggleSegmentVisibility(
+                  element,
+                  segmentNumber,
+                  brushStackState.activeLabelmapIndex
+                );
+              }
+
+              if (isVTK()) {
+                onSegmentVisibilityChange(segmentNumber, newVisibility);
+              }
+
+              updateCachedSegmentsProperties(segmentNumber, { visible: newVisibility });
+              refreshViewport();
+            }}
+          />
+        );
       }
 
-      const sameSegment = state.selectedSegment === segmentNumber;
+      return segmentList;
-      const setCurrentSelectedSegment = () => {
-        _setActiveSegment(
-          firstImageId,
-          segmentNumber,
-          labelmap3D.activeSegmentIndex
-        );
-        updateState('selectedSegment', sameSegment ? null : segmentNumber);
-      };
 
-      segmentList.push(
+      /*
-        <SegmentItem
+       * Let's iterate over segmentIndexes ^ above
-          key={segmentNumber}
+       * If meta has a match, use it to show info
-          itemClass={`segment-item ${sameSegment && 'selected'}`}
+       * If now, add "no-meta" class
-          onClick={setCurrentSelectedSegment}
+       * Show default name
-          label={segmentLabel}
+       */
-          index={segmentNumber}
+    },
-          color={color}
+    [activeIndex, onSegmentItemClick, state.selectedSegment, state.isLoading]
-        />
+  );
-      );
-    }
 
-    return segmentList;
+  const updateCachedSegmentsProperties = (segmentNumber, properties) => {
+    const segmentsProperties = state.cachedSegmentsProperties;
+    const segmentProperties = state.cachedSegmentsProperties[segmentNumber];
 
-    /*
+    segmentsProperties[segmentNumber] =
-     * Let's iterate over segmentIndexes ^ above
+      segmentProperties ?
-     * If meta has a match, use it to show info
+        { ...segmentProperties, ...properties } :
-     * If now, add "no-meta" class
+        properties;
-     * Show default name
+
-     */
+    updateState('cachedSegmentsProperties', segmentsProperties);
   };
 
+  useEffect(() => {
+    updateState('cachedSegmentsProperties', []);
+  }, [activeContexts]);
+
   const updateState = (field, value) => {
     setState(state => ({ ...state, [field]: value }));
   };
@@ -270,15 +475,13 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
     }
 
     const module = cornerstoneTools.getModule('segmentation');
-    const colorLutTable =
+    const colorLutTable = module.state.colorLutTables[labelmap3D.colorLUTIndex];
-      module.state.colorLutTables[labelmap3D.colorLUTIndex];
     const color = colorLutTable[labelmap3D.activeSegmentIndex];
 
     return `rgba(${color.join(',')})`;
   };
 
   const updateConfiguration = newConfiguration => {
-    /* Supported configuration */
     configuration.renderFill = newConfiguration.renderFill;
     configuration.renderOutline = newConfiguration.renderOutline;
     configuration.shouldRenderInactiveLabelmaps =
@@ -288,14 +491,17 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
     configuration.outlineWidth = newConfiguration.outlineWidth;
     configuration.fillAlphaInactive = newConfiguration.fillAlphaInactive;
     configuration.outlineAlphaInactive = newConfiguration.outlineAlphaInactive;
+    onConfigurationChange(newConfiguration);
     refreshViewport();
   };
 
-  if (state.showSegSettings) {
+  const disabledConfigurationFields = ['outlineAlpha', 'shouldRenderInactiveLabelmaps'];
+  if (state.showSegmentationSettings) {
     return (
       <SegmentationSettings
+        disabledFields={isVTK() ? disabledConfigurationFields : []}
         configuration={configuration}
-        onBack={() => updateState('showSegSettings', false)}
+        onBack={() => updateState('showSegmentationSettings', false)}
         onChange={updateConfiguration}
       />
     );
@@ -307,7 +513,7 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
           name="cog"
           width="25px"
           height="25px"
-          onClick={() => updateState('showSegSettings', true)}
+          onClick={() => updateState('showSegmentationSettings', true)}
         />
         {false && (
           <form className="selector-form">
@@ -328,9 +534,9 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
         <h3>Segmentations</h3>
         <div className="segmentations">
           <SegmentationSelect
-            value={
+            value={state.labelmapList.find(
-              state.labelmapList.find(i => i.value === state.selectedSegmentation) || null
+              i => i.value === state.selectedSegmentation
-            }
+            )}
             formatOptionLabel={SegmentationItem}
             options={state.labelmapList}
           />
@@ -415,7 +621,9 @@ const _setActiveLabelmap = async (
   studies,
   displaySet,
   firstImageId,
-  activeLabelmapIndex
+  activeLabelmapIndex,
+  callback = () => { },
+  onDisplaySetLoadFailure
 ) => {
   if (displaySet.labelmapIndex === activeLabelmapIndex) {
     log.warn(`${activeLabelmapIndex} is already the active labelmap`);
@@ -425,7 +633,17 @@ const _setActiveLabelmap = async (
   if (!displaySet.isLoaded) {
     // What props does this expect `viewportSpecificData` to have?
     // TODO: Should this return the `labelmapIndex`?
-    await displaySet.load(viewportSpecificData, studies);
+
+    const loadPromise = displaySet.load(viewportSpecificData, studies);
+
+    loadPromise.catch(error => {
+      onDisplaySetLoadFailure(error);
+
+      // Return old index.
+      return activeLabelmapIndex;
+    });
+
+    await loadPromise;
   }
 
   const { state } = cornerstoneTools.getModule('segmentation');
@@ -434,6 +652,8 @@ const _setActiveLabelmap = async (
 
   refreshViewport();
 
+  callback();
+
   return displaySet.labelmapIndex;
 };
 

extensions/dicom-segmentation/src/components/SegmentationSelect.js

@@ -17,6 +17,10 @@ const defaultColor = computedstyle.getPropertyValue('--default-color');
 const uiGrayDark = computedstyle.getPropertyValue('--ui-gray-dark');
 
 const segmentationSelectStyles = {
+  singleValue: (base, state) => ({
+    ...base,
+    width: '100%'
+  }),
   control: (base, state) => ({
     ...base,
     cursor: 'pointer',

extensions/dicom-segmentation/src/components/SegmentationSettings/SegmentationSettings.js

@@ -4,7 +4,7 @@ import { Range } from '@ohif/ui';
 
 import './SegmentationSettings.css';
 
-const SegmentationSettings = ({ configuration, onBack, onChange }) => {
+const SegmentationSettings = ({ configuration, onBack, onChange, disabledFields = [] }) => {
   const [state, setState] = useState({
     renderFill: configuration.renderFill,
     renderOutline: configuration.renderOutline,
@@ -70,28 +70,32 @@ const SegmentationSettings = ({ configuration, onBack, onChange }) => {
         />
         {state.renderOutline && (
           <>
-            <CustomRange
+            {!disabledFields.includes('outlineAlpha') && (
-              value={state.outlineAlpha * 100}
+              <CustomRange
-              label="Opacity"
+                value={state.outlineAlpha * 100}
-              showPercentage
+                label="Opacity"
-              step={1}
+                showPercentage
-              min={0}
+                step={1}
-              max={100}
+                min={0}
-              onChange={event => save('outlineAlpha', toFloat(event.target.value))}
+                max={100}
-            />
+                onChange={event => save('outlineAlpha', toFloat(event.target.value))}
-            <CustomRange
+              />
-              value={state.outlineWidth}
+            )}
-              label="Width"
+            {!disabledFields.includes('outlineWidth') && (
-              showValue
+              <CustomRange
-              step={1}
+                value={state.outlineWidth}
-              min={0}
+                label="Width"
-              max={5}
+                showValue
-              onChange={event => save('outlineWidth', parseInt(event.target.value))}
+                step={1}
-            />
+                min={0}
+                max={5}
+                onChange={event => save('outlineWidth', parseInt(event.target.value))}
+              />
+            )}
           </>
         )}
       </div>
-      {(state.renderFill || state.renderOutline) && (
+      {(state.renderFill || state.renderOutline) && !disabledFields.includes('shouldRenderInactiveLabelmaps') && (
         <div
           className="settings-group"
           style={{ marginBottom: state.shouldRenderInactiveLabelmaps ? 15 : 0 }}
@@ -103,7 +107,7 @@ const SegmentationSettings = ({ configuration, onBack, onChange }) => {
           />
           {state.shouldRenderInactiveLabelmaps && (
             <>
-              {state.renderFill && (
+              {state.renderFill && !disabledFields.includes('fillAlphaInactive') && (
                 <CustomRange
                   label="Fill Opacity"
                   showPercentage
@@ -114,7 +118,7 @@ const SegmentationSettings = ({ configuration, onBack, onChange }) => {
                   onChange={event => save('fillAlphaInactive', toFloat(event.target.value))}
                 />
               )}
-              {state.renderOutline && (
+              {state.renderOutline && !disabledFields.includes('outlineAlphaInactive') && (
                 <CustomRange
                   label="Outline Opacity"
                   showPercentage

extensions/dicom-segmentation/src/getOHIFDicomSegSopClassHandler.js

@@ -0,0 +1,64 @@
+import { MODULE_TYPES, utils } from '@ohif/core';
+import loadSegmentation from './loadSegmentation';
+
+// TODO: Should probably use dcmjs for this
+const SOP_CLASS_UIDS = {
+  DICOM_SEG: '1.2.840.10008.5.1.4.1.1.66.4',
+};
+
+const sopClassUIDs = Object.values(SOP_CLASS_UIDS);
+
+export default function getSopClassHandlerModule({ servicesManager }) {
+  // TODO: Handle the case where there is more than one SOP Class Handler for the
+  // same SOP Class.
+  return {
+    id: 'OHIFDicomSegSopClassHandler',
+    type: MODULE_TYPES.SOP_CLASS_HANDLER,
+    sopClassUIDs,
+    getDisplaySetFromSeries: function(
+      series,
+      study,
+      dicomWebClient,
+      authorizationHeaders
+    ) {
+      const instance = series.getFirstInstance();
+      const metadata = instance.getData().metadata;
+
+      const {
+        SeriesDate,
+        SeriesTime,
+        SeriesDescription,
+        FrameOfReferenceUID,
+        SOPInstanceUID,
+        SeriesInstanceUID,
+        StudyInstanceUID,
+      } = metadata;
+
+      const segDisplaySet = {
+        Modality: 'SEG',
+        displaySetInstanceUID: utils.guid(),
+        wadoRoot: study.getData().wadoRoot,
+        wadoUri: instance.getData().wadouri,
+        SOPInstanceUID,
+        SeriesInstanceUID,
+        StudyInstanceUID,
+        FrameOfReferenceUID,
+        authorizationHeaders,
+        metadata,
+        isDerived: true,
+        referencedDisplaySetUID: null, // Assigned when loaded.
+        labelmapIndex: null, // Assigned when loaded.
+        isLoaded: false,
+        SeriesDate,
+        SeriesTime,
+        SeriesDescription,
+      };
+
+      segDisplaySet.load = function(referencedDisplaySet, studies) {
+        return loadSegmentation(segDisplaySet, referencedDisplaySet, studies);
+      };
+
+      return segDisplaySet;
+    },
+  };
+}

extensions/dicom-segmentation/src/index.js

@@ -1,7 +1,9 @@
+import React from 'react';
+
 import init from './init.js';
 import toolbarModule from './toolbarModule.js';
-import panelModule from './panelModule.js';
+import getSopClassHandlerModule from './getOHIFDicomSegSopClassHandler.js';
-import sopClassHandlerModule from './OHIFDicomSegSopClassHandler.js';
+import SegmentationPanel from './components/SegmentationPanel/SegmentationPanel.js';
 
 export default {
   /**
@@ -21,10 +23,97 @@ export default {
   getToolbarModule({ servicesManager }) {
     return toolbarModule;
   },
-  getPanelModule({ servicesManager }) {
+  getPanelModule({ commandsManager, api, servicesManager }) {
-    return panelModule;
+    const { UINotificationService } = servicesManager;
-  },
+
-  getSopClassHandlerModule({ servicesManager }) {
+    const ExtendedSegmentationPanel = props => {
-    return sopClassHandlerModule;
+      const { activeContexts } = api.hooks.useAppContext();
+
+      const onDisplaySetLoadFailureHandler = error => {
+        UINotificationService.show({
+          title: 'DICOM Segmentation Loader',
+          message: error.message,
+          type: 'error',
+          autoClose: false,
+        });
+      };
+
+      const segmentItemClickHandler = data => {
+        commandsManager.runCommand('jumpToImage', data);
+        commandsManager.runCommand('jumpToSlice', data);
+      };
+
+      const onSegmentVisibilityChangeHandler = (segmentNumber, visible) => {
+        commandsManager.runCommand('setSegmentConfiguration', {
+          segmentNumber,
+          visible
+        });
+      };
+
+      const onConfigurationChangeHandler = configuration => {
+        commandsManager.runCommand('setSegmentationConfiguration', {
+          globalOpacity: configuration.fillAlpha,
+          outlineThickness: configuration.outlineWidth,
+          renderOutline: configuration.renderOutline,
+          visible: configuration.renderFill
+        });
+      };
+
+      const onSelectedSegmentationChangeHandler = () => {
+        commandsManager.runCommand('requestNewSegmentation');
+      };
+
+      return (
+        <SegmentationPanel
+          {...props}
+          activeContexts={activeContexts}
+          contexts={api.contexts}
+          onSegmentItemClick={segmentItemClickHandler}
+          onSegmentVisibilityChange={onSegmentVisibilityChangeHandler}
+          onConfigurationChange={onConfigurationChangeHandler}
+          onSelectedSegmentationChange={onSelectedSegmentationChangeHandler}
+          onDisplaySetLoadFailure={onDisplaySetLoadFailureHandler}
+        />
+      );
+    };
+
+    return {
+      menuOptions: [
+        {
+          icon: 'list',
+          label: 'Segmentations',
+          target: 'segmentation-panel',
+          isDisabled: studies => {
+            if (!studies) {
+              return true;
+            }
+
+            for (let i = 0; i < studies.length; i++) {
+              const study = studies[i];
+
+              if (study && study.series) {
+                for (let j = 0; j < study.series.length; j++) {
+                  const series = study.series[j];
+
+                  if (series.Modality === 'SEG') {
+                    return false;
+                  }
+                }
+              }
+            }
+
+            return true;
+          },
+        },
+      ],
+      components: [
+        {
+          id: 'segmentation-panel',
+          component: ExtendedSegmentationPanel,
+        },
+      ],
+      defaultContext: ['VIEWER'],
+    };
   },
+  getSopClassHandlerModule,
 };

extensions/dicom-segmentation/src/loadSegmentation.js

@@ -1,5 +1,5 @@
 import OHIF from '@ohif/core';
-import * as dcmjs from 'dcmjs';
+import dcmjs from 'dcmjs';
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
 
@@ -34,28 +34,58 @@ export default async function loadSegmentation(
     referencedDisplaySet.SeriesInstanceUID
   );
 
-  const results = _parseSeg(segArrayBuffer, imageIds);
+  return new Promise((resolve, reject) => {
+    let results;
 
-  if (!results) {
+    try {
-    throw new Error('Fractional segmentations are not yet supported');
+      results = _parseSeg(segArrayBuffer, imageIds);
-  }
+    } catch (error) {
+      segDisplaySet.isLoaded = false;
+      reject(error);
+    }
 
-  const { labelmapBuffer, segMetadata, segmentsOnFrame } = results;
+    const { labelmapBuffer, segMetadata, segmentsOnFrame } = results;
-  const { setters } = cornerstoneTools.getModule('segmentation');
+    const { setters } = cornerstoneTools.getModule('segmentation');
 
-  // TODO: Could define a color LUT based on colors in the SEG.
+    // TODO: Could define a color LUT based on colors in the SEG.
-  const labelmapIndex = _getNextLabelmapIndex(imageIds[0]);
+    const labelmapIndex = _getNextLabelmapIndex(imageIds[0]);
+    const colorLUTIndex = _makeColorLUTAndGetIndex(segMetadata);
 
-  setters.labelmap3DByFirstImageId(
+    setters.labelmap3DByFirstImageId(
-    imageIds[0],
+      imageIds[0],
-    labelmapBuffer,
+      labelmapBuffer,
-    labelmapIndex,
+      labelmapIndex,
-    segMetadata,
+      segMetadata,
-    imageIds.length,
+      imageIds.length,
-    segmentsOnFrame
+      segmentsOnFrame,
-  );
+      colorLUTIndex
+    );
 
-  segDisplaySet.labelmapIndex = labelmapIndex;
+    segDisplaySet.labelmapIndex = labelmapIndex;
+
+    /*
+     * TODO: Improve the way we notify parts of the app that depends on segs to be loaded.
+     *
+     * Currently we are using a non-ideal implementation through a custom event to notify the segmentation panel
+     * or other components that could rely on loaded segmentations that
+     * the segments were loaded so that e.g. when the user opens the panel
+     * before the segments are fully loaded, the panel can subscribe to this custom event
+     * and update itself with the new segments.
+     *
+     * This limitation is due to the fact that the cs segmentation module is an object (which will be
+     * updated after the segments are loaded) that React its not aware of its changes
+     * because the module object its not passed in to the panel component as prop but accessed externally.
+     *
+     * Improving this event approach to something reactive that can be tracked inside the react lifecycle,
+     * allows us to easily watch the module or the segmentations loading process in any other component
+     * without subscribing to external events.
+     */
+    console.log('Segmentation loaded.');
+    const event = new CustomEvent('extensiondicomsegmentationsegloaded');
+    document.dispatchEvent(event);
+
+    resolve(labelmapIndex);
+  });
 }
 
 function _getNextLabelmapIndex(firstImageId) {
@@ -79,6 +109,69 @@ function _getNextLabelmapIndex(firstImageId) {
   return labelmapIndex;
 }
 
+function _makeColorLUTAndGetIndex(segMetadata) {
+  const { setters, state } = cornerstoneTools.getModule('segmentation');
+  const { colorLutTables } = state;
+  const colorLUTIndex = _getNextColorLUTIndex();
+
+  const { data } = segMetadata;
+
+  if (
+    !data.some(
+      segment =>
+        segment &&
+        (segment.ROIDisplayColor || segment.RecommendedDisplayCIELabValue)
+    )
+  ) {
+    // Use default cornerstoneTools colorLUT.
+    return 0;
+  }
+
+  const colorLUT = [];
+
+  for (let i = 0; i < data.length; i++) {
+    const segment = data[i];
+    if (!segment) {
+      continue;
+    }
+
+    const { ROIDisplayColor, RecommendedDisplayCIELabValue } = segment;
+
+    if (RecommendedDisplayCIELabValue) {
+      const rgb = dcmjs.data.Colors.dicomlab2RGB(
+        RecommendedDisplayCIELabValue
+      ).map(x => Math.round(x * 255));
+
+      colorLUT[i] = [...rgb, 255];
+    } else if (ROIDisplayColor) {
+      colorLUT[i] = [...ROIDisplayColor, 255];
+    } else {
+      colorLUT[i] = [...colorLutTables[0][i]];
+    }
+  }
+
+  colorLUT.shift();
+  setters.colorLUT(colorLUTIndex, colorLUT);
+
+  return colorLUTIndex;
+}
+
+function _getNextColorLUTIndex() {
+  const { state } = cornerstoneTools.getModule('segmentation');
+  const { colorLutTables } = state;
+
+  let colorLUTIndex = colorLutTables.length;
+
+  for (let i = 0; i < colorLutTables.length; i++) {
+    if (!colorLutTables[i]) {
+      colorLUTIndex = i;
+      break;
+    }
+  }
+
+  return colorLUTIndex;
+}
+
 function _parseSeg(arrayBuffer, imageIds) {
   return dcmjs.adapters.Cornerstone.Segmentation.generateToolState(
     imageIds,

extensions/dicom-segmentation/src/panelModule.js

@@ -1,39 +0,0 @@
-import SegmentationPanel from './components/SegmentationPanel/SegmentationPanel.js';
-
-export default {
-  menuOptions: [
-    {
-      icon: 'list',
-      label: 'Segmentations',
-      target: 'segmentation-panel',
-      isDisabled: studies => {
-        if (!studies) {
-          return true;
-        }
-
-        for (let i = 0; i < studies.length; i++) {
-          const study = studies[i];
-
-          if (study && study.series) {
-            for (let j = 0; j < study.series.length; j++) {
-              const series = study.series[j];
-
-              if (series.Modality === 'SEG') {
-                return false;
-              }
-            }
-          }
-        }
-
-        return true;
-      },
-    },
-  ],
-  components: [
-    {
-      id: 'segmentation-panel',
-      component: SegmentationPanel,
-    },
-  ],
-  defaultContext: ['VIEWER'],
-};

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.5.3...@ohif/extension-vtk@1.5.4) (2020-05-06)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.5.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.5.2...@ohif/extension-vtk@1.5.3) (2020-05-04)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.5.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.5.1...@ohif/extension-vtk@1.5.2) (2020-05-04)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.5.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.5.0...@ohif/extension-vtk@1.5.1) (2020-04-28)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+# [1.5.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.4.1...@ohif/extension-vtk@1.5.0) (2020-04-24)
+
+
+### Features
+
+* 🎸 Seg jump to slice + show/hide ([835f64d](https://github.com/OHIF/Viewers/commit/835f64d47a9994f6a25aaf3941a4974e215e7e7f))
+
+
+
+
+
+## [1.4.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.4.0...@ohif/extension-vtk@1.4.1) (2020-04-23)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+# [1.4.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.3.14...@ohif/extension-vtk@1.4.0) (2020-04-23)
+
+
+### Features
+
+* configuration to hook into XHR Error handling ([e96205d](https://github.com/OHIF/Viewers/commit/e96205de35e5bec14dc8a9a8509db3dd4e6ecdb6))
+
+
+
+
+
 ## [1.3.14](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.3.13...@ohif/extension-vtk@1.3.14) (2020-04-22)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "1.3.14",
+  "version": "1.5.4",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -34,8 +34,8 @@
     "@ohif/ui": "^0.50.0",
     "cornerstone-core": "^2.2.8",
     "cornerstone-tools": "4.12.5",
-    "cornerstone-wado-image-loader": "^3.0.0",
+    "cornerstone-wado-image-loader": "^3.1.0",
-    "dcmjs": "^0.10.1",
+    "dcmjs": "^0.12.2",
     "dicom-parser": "^1.8.3",
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",
@@ -50,13 +50,13 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "lodash.throttle": "^4.1.1",
-    "react-vtkjs-viewport": "^0.8.3"
+    "react-vtkjs-viewport": "^0.9.0"
   },
   "devDependencies": {
-    "@ohif/core": "^2.7.1",
+    "@ohif/core": "^2.9.4",
-    "@ohif/ui": "^1.4.3",
+    "@ohif/ui": "^1.4.4",
     "cornerstone-tools": "4.12.5",
-    "cornerstone-wado-image-loader": "^3.0.0",
+    "cornerstone-wado-image-loader": "^3.1.0",
     "dicom-parser": "^1.8.3",
     "gh-pages": "^2.0.1",
     "i18next": "^17.0.3",

extensions/vtk/src/LoadingIndicator.js

@@ -32,16 +32,16 @@ class LoadingIndicator extends PureComponent {
             </div>
           </div>
         ) : (
-          <div className="imageViewerLoadingIndicator loadingIndicator">
+            <div className="imageViewerLoadingIndicator loadingIndicator">
-            <div className="indicatorContents">
+              <div className="indicatorContents">
-              <p>
+                <p>
-                {this.props.t('Reformatting')}...
+                  {this.props.t('Loading...')}
-                <i className="fa fa-spin fa-circle-o-notch fa-fw" />
+                  <i className="fa fa-spin fa-circle-o-notch fa-fw" />
-                {percComplete}
+                  {percComplete}
-              </p>
+                </p>
+              </div>
             </div>
-          </div>
+          )}
-        )}
       </React.Fragment>
     );
   }

extensions/vtk/src/OHIFVTKViewport.js

@@ -49,7 +49,7 @@ class OHIFVTKViewport extends Component {
   state = {
     volumes: null,
     paintFilterLabelMapImageData: null,
-    paintFilterBackgroundImageData: null,
+    paintFilterBackgroundImageData: null
   };
 
   static propTypes = {
@@ -69,7 +69,7 @@ class OHIFVTKViewport extends Component {
   };
 
   static defaultProps = {
-    onScroll: () => {},
+    onScroll: () => { },
   };
 
   static id = 'OHIFVTKViewport';
@@ -156,6 +156,10 @@ class OHIFVTKViewport extends Component {
       const { activeLabelmapIndex } = brushStackState;
       const labelmap3D = brushStackState.labelmaps3D[activeLabelmapIndex];
 
+      this.segmentsDefaultProperties = labelmap3D.segmentsHidden.map(isHidden => {
+        return { visible: !isHidden };
+      });
+
       const vtkLabelmapID = `${firstImageId}_${activeLabelmapIndex}`;
 
       if (labelmapCache[vtkLabelmapID]) {
@@ -339,13 +343,13 @@ class OHIFVTKViewport extends Component {
     this.setStateFromProps();
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     const { displaySet } = this.props.viewportData;
     const prevDisplaySet = prevProps.viewportData.displaySet;
 
     if (
       displaySet.displaySetInstanceUID !==
-        prevDisplaySet.displaySetInstanceUID ||
+      prevDisplaySet.displaySetInstanceUID ||
       displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
       displaySet.frameIndex !== prevDisplaySet.frameIndex
     ) {
@@ -405,10 +409,6 @@ class OHIFVTKViewport extends Component {
 
     const style = { width: '100%', height: '100%', position: 'relative' };
 
-    const visible = configuration.renderFill || configuration.renderOutline;
-    const opacity = configuration.fillAlpha;
-    const outlineThickness = configuration.outlineThickness;
-
     return (
       <>
         <div style={style}>
@@ -428,10 +428,14 @@ class OHIFVTKViewport extends Component {
               dataDetails={this.state.dataDetails}
               labelmapRenderingOptions={{
                 colorLUT: this.state.labelmapColorLUT,
-                globalOpacity: opacity,
+                globalOpacity: configuration.fillAlpha,
-                visible,
+                visible: configuration.renderFill,
-                outlineThickness,
+                outlineThickness: configuration.outlineWidth,
-                renderOutline: true,
+                renderOutline: configuration.renderOutline,
+                segmentsDefaultProperties: this.segmentsDefaultProperties,
+                onNewSegmentationRequested: () => {
+                  this.setStateFromProps();
+                }
               }}
               onScroll={this.props.onScroll}
             />

extensions/vtk/src/commandsModule.js

@@ -5,10 +5,13 @@ import {
   vtkInteractorStyleMPRRotate,
   vtkSVGCrosshairsWidget,
 } from 'react-vtkjs-viewport';
-
+import { getImageData } from 'react-vtkjs-viewport';
+import { vec3 } from 'gl-matrix';
 import setMPRLayout from './utils/setMPRLayout.js';
 import setViewportToVTK from './utils/setViewportToVTK.js';
 import Constants from 'vtk.js/Sources/Rendering/Core/VolumeMapper/Constants.js';
+import OHIFVTKViewport from './OHIFVTKViewport';
+import vtkCoordinate from 'vtk.js/Sources/Rendering/Core/Coordinate';
 
 const { BlendMode } = Constants;
 
@@ -34,7 +37,6 @@ const commandsModule = ({ commandsManager }) => {
     }
 
     const displaySet = viewportSpecificData[activeViewportIndex];
-
     let api;
     if (!api) {
       try {
@@ -99,6 +101,20 @@ const commandsModule = ({ commandsManager }) => {
     });
   }
 
+  const _convertModelToWorldSpace = (position, vtkImageData) => {
+    const indexToWorld = vtkImageData.getIndexToWorld();
+    const pos = vec3.create();
+
+    position[0] += 0.5; /* Move to the centre of the voxel. */
+    position[1] += 0.5; /* Move to the centre of the voxel. */
+    position[2] += 0.5; /* Move to the centre of the voxel. */
+
+    vec3.set(pos, position[0], position[1], position[2]);
+    vec3.transformMat4(pos, pos, indexToWorld);
+
+    return pos;
+  };
+
   const actions = {
     getVtkApis: ({ index }) => {
       return apis[index];
@@ -124,6 +140,119 @@ const commandsModule = ({ commandsManager }) => {
 
       _setView(api, [0, 1, 0], [0, 0, 1]);
     },
+    requestNewSegmentation: async ({ viewports }) => {
+      const allViewports = Object.values(viewports.viewportSpecificData);
+      const promises = allViewports.map(async (viewport, viewportIndex) => {
+        let api = apis[viewportIndex];
+
+        if (!api) {
+          api = await _getActiveViewportVTKApi(viewports);
+          apis[viewportIndex] = api;
+        }
+
+        api.requestNewSegmentation();
+        api.updateImage();
+      });
+      await Promise.all(promises);
+    },
+    jumpToSlice: async ({
+      viewports,
+      studies,
+      StudyInstanceUID,
+      displaySetInstanceUID,
+      SOPClassUID,
+      SOPInstanceUID,
+      segmentNumber,
+      frameIndex,
+      frame,
+      done = () => { }
+    }) => {
+      let api = apis[viewports.activeViewportIndex];
+
+      if (!api) {
+        api = await _getActiveViewportVTKApi(viewports);
+        apis[viewports.activeViewportIndex] = api;
+      }
+
+      const stack = OHIFVTKViewport.getCornerstoneStack(
+        studies,
+        StudyInstanceUID,
+        displaySetInstanceUID,
+        SOPClassUID,
+        SOPInstanceUID,
+        frameIndex,
+      );
+
+      const imageDataObject = getImageData(stack.imageIds, displaySetInstanceUID);
+
+      let pixelIndex = 0;
+      let x = 0;
+      let y = 0;
+      let count = 0;
+
+      const rows = imageDataObject.dimensions[1];
+      const cols = imageDataObject.dimensions[0];
+
+      for (let j = 0; j < rows; j++) {
+        for (let i = 0; i < cols; i++) {
+          // [i, j] =
+          const pixel = frame.pixelData[pixelIndex];
+          if (pixel === segmentNumber) {
+            x += i;
+            y += j;
+            count++;
+          }
+          pixelIndex++;
+        }
+      }
+      x /= count;
+      y /= count;
+
+      const position = [x, y, frameIndex];
+      const worldPos = _convertModelToWorldSpace(position, imageDataObject.vtkImageData);
+
+      api.svgWidgets.crosshairsWidget.moveCrosshairs(worldPos, apis);
+      done();
+    },
+    setSegmentationConfiguration: async ({
+      viewports,
+      globalOpacity,
+      visible,
+      renderOutline,
+      outlineThickness,
+    }) => {
+      const allViewports = Object.values(viewports.viewportSpecificData);
+      const promises = allViewports.map(async (viewport, viewportIndex) => {
+        let api = apis[viewportIndex];
+
+        if (!api) {
+          api = await _getActiveViewportVTKApi(viewports);
+          apis[viewportIndex] = api;
+        }
+
+        api.setGlobalOpacity(globalOpacity);
+        api.setVisibility(visible);
+        api.setOutlineThickness(outlineThickness);
+        api.setOutlineRendering(renderOutline);
+        api.updateImage();
+      });
+      await Promise.all(promises);
+    },
+    setSegmentConfiguration: async ({ viewports, visible, segmentNumber }) => {
+      const allViewports = Object.values(viewports.viewportSpecificData);
+      const promises = allViewports.map(async (viewport, viewportIndex) => {
+        let api = apis[viewportIndex];
+
+        if (!api) {
+          api = await _getActiveViewportVTKApi(viewports);
+          apis[viewportIndex] = api;
+        }
+
+        api.setSegmentVisibility(segmentNumber, visible);
+        api.updateImage();
+      });
+      await Promise.all(promises);
+    },
     enableRotateTool: () => {
       apis.forEach(api => {
         const istyle = vtkInteractorStyleMPRRotate.newInstance();
@@ -280,6 +409,26 @@ const commandsModule = ({ commandsManager }) => {
   window.vtkActions = actions;
 
   const definitions = {
+    requestNewSegmentation: {
+      commandFn: actions.requestNewSegmentation,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    jumpToSlice: {
+      commandFn: actions.jumpToSlice,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    setSegmentationConfiguration: {
+      commandFn: actions.setSegmentationConfiguration,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    setSegmentConfiguration: {
+      commandFn: actions.setSegmentConfiguration,
+      storeContexts: ['viewports'],
+      options: {},
+    },
     axial: {
       commandFn: actions.axial,
       storeContexts: ['viewports'],

platform/core/CHANGELOG.md

@@ -3,6 +3,77 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.9.4](https://github.com/OHIF/Viewers/compare/@ohif/core@2.9.3...@ohif/core@2.9.4) (2020-05-06)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.9.3](https://github.com/OHIF/Viewers/compare/@ohif/core@2.9.2...@ohif/core@2.9.3) (2020-05-04)
+
+
+### Bug Fixes
+
+* 🐛 Proper error handling for derived display sets ([#1708](https://github.com/OHIF/Viewers/issues/1708)) ([5b20d8f](https://github.com/OHIF/Viewers/commit/5b20d8f323e4b3ef9988f2f2ab672d697b6da409))
+
+
+
+
+
+## [2.9.2](https://github.com/OHIF/Viewers/compare/@ohif/core@2.9.1...@ohif/core@2.9.2) (2020-05-04)
+
+
+### Bug Fixes
+
+* use bit-appropriate array for palette lookup tables ([#1698](https://github.com/OHIF/Viewers/issues/1698)) ([7033886](https://github.com/OHIF/Viewers/commit/70338866978a76fa026c18d7c3c05257c5ece762))
+
+
+
+
+
+## [2.9.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.9.0...@ohif/core@2.9.1) (2020-04-28)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+# [2.9.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.8.1...@ohif/core@2.9.0) (2020-04-24)
+
+
+### Features
+
+* 🎸 Seg jump to slice + show/hide ([835f64d](https://github.com/OHIF/Viewers/commit/835f64d47a9994f6a25aaf3941a4974e215e7e7f))
+
+
+
+
+
+## [2.8.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.8.0...@ohif/core@2.8.1) (2020-04-23)
+
+
+### Bug Fixes
+
+* 🐛 Multiframe fix ([#1661](https://github.com/OHIF/Viewers/issues/1661)) ([7120561](https://github.com/OHIF/Viewers/commit/71205618ecb8b592247c5acb32284bfe7e18fce5))
+
+
+
+
+
+# [2.8.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.7.1...@ohif/core@2.8.0) (2020-04-23)
+
+
+### Features
+
+* configuration to hook into XHR Error handling ([e96205d](https://github.com/OHIF/Viewers/commit/e96205de35e5bec14dc8a9a8509db3dd4e6ecdb6))
+
+
+
+
+
 ## [2.7.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.7.0...@ohif/core@2.7.1) (2020-04-22)
 
 

platform/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/core",
-  "version": "2.7.1",
+  "version": "2.9.4",
   "description": "Generic business logic for web-based medical imaging applications",
   "author": "OHIF Core Team",
   "license": "MIT",
@@ -33,14 +33,14 @@
   "peerDependencies": {
     "cornerstone-core": "^2.2.8",
     "cornerstone-tools": "4.12.5",
-    "cornerstone-wado-image-loader": "^3.0.0",
+    "cornerstone-wado-image-loader": "^3.1.0",
     "dicom-parser": "^1.8.3"
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "ajv": "^6.10.0",
-    "dcmjs": "^0.12.0",
+    "dcmjs": "^0.12.2",
-    "dicomweb-client": "^0.5.2",
+    "dicomweb-client": "^0.6.0",
     "immer": "6.0.2",
     "isomorphic-base64": "^1.0.2",
     "lodash.clonedeep": "^4.5.0",

platform/core/src/DICOMSR/handleStructuredReport.js

@@ -1,10 +1,11 @@
-import * as dcmjs from 'dcmjs';
+import dcmjs from 'dcmjs';
 import { api } from 'dicomweb-client';
 
 import DICOMWeb from '../DICOMWeb';
 import parseDicomStructuredReport from './parseDicomStructuredReport';
 import parseMeasurementsData from './parseMeasurementsData';
 import getAllDisplaySets from './utils/getAllDisplaySets';
+import errorHandler from '../errorHandler';
 
 const VERSION_NAME = 'dcmjs-0.0';
 const TRANSFER_SYNTAX_UID = '1.2.840.10008.1.2.1';
@@ -21,6 +22,7 @@ const retrieveMeasurementFromSR = async (series, studies, serverUrl) => {
   const config = {
     url: serverUrl,
     headers: DICOMWeb.getAuthorizationHeader(),
+    errorInterceptor: errorHandler.getHTTPErrorHandler(),
   };
 
   const dicomWeb = new api.DICOMwebClient(config);
@@ -71,6 +73,7 @@ const stowSRFromMeasurements = async (measurements, serverUrl) => {
   const config = {
     url: serverUrl,
     headers: DICOMWeb.getAuthorizationHeader(),
+    errorInterceptor: errorHandler.getHTTPErrorHandler(),
   };
 
   const dicomWeb = new api.DICOMwebClient(config);

platform/core/src/DICOMSR/parseDicomStructuredReport.js

@@ -1,4 +1,4 @@
-import * as dcmjs from 'dcmjs';
+import dcmjs from 'dcmjs';
 
 import findInstanceMetadataBySopInstanceUID from './utils/findInstanceMetadataBySopInstanceUid';
 

platform/core/src/DICOMSR/parseMeasurementsData.js

@@ -1,4 +1,4 @@
-import * as dcmjs from 'dcmjs';
+import dcmjs from 'dcmjs';
 import cornerstone from 'cornerstone-core';
 
 import log from '../log';

platform/core/src/DICOMSR/utils/isToolSupported.js

@@ -1,4 +1,4 @@
-import * as dcmjs from 'dcmjs';
+import dcmjs from 'dcmjs';
 
 /**
  *  Checks if dcmjs has support to determined tool

platform/core/src/classes/MetadataProvider.js

@@ -1,4 +1,4 @@
-import * as dcmjs from 'dcmjs';
+import dcmjs from 'dcmjs';
 import queryString from 'query-string';
 import dicomParser from 'dicom-parser';
 import getPixelSpacingInformation from '../utils/metadataProvider/getPixelSpacingInformation';
@@ -400,6 +400,7 @@ class MetadataProvider {
 
       case WADO_IMAGE_LOADER_TAGS.GENERAL_IMAGE_MODULE:
         metadata = {
+          sopInstanceUid: instance.SOPInstanceUID,
           instanceNumber: instance.InstanceNumber,
           lossyImageCompression: instance.LossyImageCompression,
           lossyImageCompressionRatio: instance.LossyImageCompressionRatio,

platform/core/src/classes/metadata/StudyMetadata.js

@@ -11,6 +11,7 @@ import { api } from 'dicomweb-client';
 import { isImage } from '../../utils/isImage';
 import isDisplaySetReconstructable from '../../utils/isDisplaySetReconstructable';
 import isLowPriorityModality from '../../utils/isLowPriorityModality';
+import errorHandler from '../../errorHandler';
 
 export class StudyMetadata extends Metadata {
   constructor(data, uid) {
@@ -78,7 +79,7 @@ export class StudyMetadata extends Metadata {
     Object.defineProperty(this, 'studyInstanceUID', {
       configurable: false,
       enumerable: false,
-      get: function() {
+      get: function () {
         return this.getStudyInstanceUID();
       },
     });
@@ -102,10 +103,7 @@ export class StudyMetadata extends Metadata {
    * @param {SeriesMetadata} series The series metadata object from which the display sets will be created
    * @returns {Array} The list of display sets created for the given series object
    */
-  _createDisplaySetsForSeries(
+  _createDisplaySetsForSeries(sopClassHandlerModules, series) {
-    sopClassHandlerModules,
-    series,
-  ) {
     const study = this;
     const displaySets = [];
 
@@ -293,14 +291,13 @@ export class StudyMetadata extends Metadata {
     }
 
     // Loop through the series (SeriesMetadata)
-    this.forEachSeries(
+    this.forEachSeries(series => {
-      series => {
+      const displaySetsForSeries = this._createDisplaySetsForSeries(
-         const displaySetsForSeries = this._createDisplaySetsForSeries(
+        sopClassHandlerModules,
-           sopClassHandlerModules,
+        series
-           series,
+      );
-         );
 
-         displaySets.push(...displaySetsForSeries);
+      displaySets.push(...displaySetsForSeries);
     });
 
     return sortDisplaySetList(displaySets);
@@ -321,7 +318,10 @@ export class StudyMetadata extends Metadata {
       return false;
     }
 
-    const displaySets = this._createDisplaySetsForSeries(sopClassHandlerModules, series)
+    const displaySets = this._createDisplaySetsForSeries(
+      sopClassHandlerModules,
+      series
+    );
 
     // Note: filtering in place because this._displaySets has writable: false
     for (let i = this._displaySets.length - 1; i >= 0; i--) {
@@ -835,9 +835,11 @@ function _getDisplaySetFromSopClassModule(
 
   const plugin = handlersForSopClassUID[0];
   const headers = DICOMWeb.getAuthorizationHeader();
+  const errorInterceptor = errorHandler.getHTTPErrorHandler();
   const dicomWebClient = new dwc({
     url: study.getData().wadoRoot,
     headers,
+    errorInterceptor,
   });
 
   let displaySet = plugin.getDisplaySetFromSeries(

platform/core/src/errorHandler.js

@@ -0,0 +1,6 @@
+// These should be overridden by the implementation
+const errorHandler = {
+  getHTTPErrorHandler: () => null,
+};
+
+export default errorHandler;

platform/core/src/extensions/ExtensionManager.js

@@ -2,7 +2,7 @@ import MODULE_TYPES from './MODULE_TYPES.js';
 import log from './../log.js';
 
 export default class ExtensionManager {
-  constructor({ commandsManager, servicesManager, appConfig = {} }) {
+  constructor({ commandsManager, servicesManager, api, appConfig = {} }) {
     this.modules = {};
     this.registeredExtensionIds = [];
     this.moduleTypeNames = Object.values(MODULE_TYPES);
@@ -10,6 +10,7 @@ export default class ExtensionManager {
     this._commandsManager = commandsManager;
     this._servicesManager = servicesManager;
     this._appConfig = appConfig;
+    this._api = api;
 
     this.moduleTypeNames.forEach(moduleType => {
       this.modules[moduleType] = [];
@@ -119,6 +120,7 @@ export default class ExtensionManager {
         commandsManager: this._commandsManager,
         appConfig: this._appConfig,
         configuration,
+        api: this._api
       });
 
       if (!extensionModule) {

platform/core/src/index.js

@@ -18,6 +18,7 @@ import string from './string.js';
 import studies from './studies/';
 import ui from './ui';
 import user from './user.js';
+import errorHandler from './errorHandler.js';
 import utils, { hotkeys } from './utils/';
 
 import {
@@ -46,6 +47,7 @@ const OHIF = {
   string,
   ui,
   user,
+  errorHandler,
   object,
   log,
   DICOMWeb,
@@ -79,6 +81,7 @@ export {
   string,
   ui,
   user,
+  errorHandler,
   object,
   log,
   DICOMWeb,

platform/core/src/index.test.js

@@ -24,6 +24,7 @@ describe('Top level exports', () => {
       'header',
       'cornerstone',
       'default', //
+      'errorHandler',
       'string',
       'ui',
       'user',

platform/core/src/studies/services/qido/instances.js

@@ -1,6 +1,8 @@
 import DICOMWeb from '../../../DICOMWeb/';
 import { api } from 'dicomweb-client';
 
+import errorHandler from '../../../errorHandler';
+
 /**
  * Parses data returned from a QIDO search and transforms it into
  * an array of series that are present in the study
@@ -79,6 +81,7 @@ export default function Instances(server, StudyInstanceUID) {
   const config = {
     url: server.qidoRoot,
     headers: DICOMWeb.getAuthorizationHeader(server),
+    errorInterceptor: errorHandler.getHTTPErrorHandler(),
   };
   const dicomWeb = new api.DICOMwebClient(config);
   const queryParams = getQIDOQueryParams(

platform/core/src/studies/services/qido/studies.js

@@ -1,6 +1,8 @@
 import { api } from 'dicomweb-client';
 import DICOMWeb from '../../../DICOMWeb/';
 
+import errorHandler from '../../../errorHandler';
+
 /**
  * Creates a QIDO date string for a date range query
  * Assumes the year is positive, at most 4 digits long.
@@ -115,6 +117,7 @@ export default function Studies(server, filter) {
   const config = {
     url: server.qidoRoot,
     headers: DICOMWeb.getAuthorizationHeader(server),
+    errorInterceptor: errorHandler.getHTTPErrorHandler(),
   };
 
   const dicomWeb = new api.DICOMwebClient(config);

platform/core/src/studies/services/wado/retrieveMetadataLoaderAsync.js

@@ -9,6 +9,8 @@ import {
   addInstancesToStudy,
 } from './studyInstanceHelpers';
 
+import errorHandler from '../../../errorHandler';
+
 const { naturalizeDataset } = dcmjs.data.DicomMetaDictionary;
 
 /**
@@ -73,6 +75,7 @@ export default class RetrieveMetadataLoaderAsync extends RetrieveMetadataLoader
     const client = new api.DICOMwebClient({
       url: server.qidoRoot,
       headers: DICOMWeb.getAuthorizationHeader(server),
+      errorInterceptor: errorHandler.getHTTPErrorHandler(),
     });
 
     this.client = client;
@@ -117,7 +120,7 @@ export default class RetrieveMetadataLoaderAsync extends RetrieveMetadataLoader
 
     return {
       seriesInstanceUIDsMap,
-      seriesData
+      seriesData,
     };
   }
 
@@ -155,11 +158,14 @@ export default class RetrieveMetadataLoaderAsync extends RetrieveMetadataLoader
         SeriesDescription: series.SeriesDescription,
         SeriesNumber: series.SeriesNumber,
         Modality: series.Modality,
-        instances: []
+        instances: [],
       };
 
       if (study.series[idx]) {
-        study.series[idx] = Object.assign(seriesDataFromQIDO, study.series[idx]);
+        study.series[idx] = Object.assign(
+          seriesDataFromQIDO,
+          study.series[idx]
+        );
       } else {
         study.series[idx] = seriesDataFromQIDO;
       }

platform/core/src/studies/services/wado/retrieveMetadataLoaderSync.js

@@ -3,6 +3,8 @@ import DICOMWeb from '../../../DICOMWeb/';
 import { createStudyFromSOPInstanceList } from './studyInstanceHelpers';
 import RetrieveMetadataLoader from './retrieveMetadataLoader';
 
+import errorHandler from '../../../errorHandler';
+
 /**
  * Class for sync load of study metadata.
  * It inherits from RetrieveMetadataLoader
@@ -58,6 +60,7 @@ export default class RetrieveMetadataLoaderSync extends RetrieveMetadataLoader {
     const client = new api.DICOMwebClient({
       url: server.wadoRoot,
       headers: DICOMWeb.getAuthorizationHeader(server),
+      errorInterceptor: errorHandler.getHTTPErrorHandler(),
     });
 
     this.client = client;

platform/core/src/studies/services/wado/studyInstanceHelpers.js

@@ -144,7 +144,7 @@ async function makeSOPInstance(server, study, instance) {
     wadorsuri,
     wadoRoot: server.wadoRoot,
     imageRendering: server.imageRendering,
-    thumbnailRendering: server.thumbnailRendering
+    thumbnailRendering: server.thumbnailRendering,
   };
 
   series.instances.push(sopInstance);
@@ -160,8 +160,10 @@ async function makeSOPInstance(server, study, instance) {
 
     const wadoRSMetadata = Object.assign(instance);
 
-    if (sopInstance.NumberOfFrames) {
+    const { NumberOfFrames } = sopInstance.metadata;
-      for (let i = 0; i < sopInstance.NumberOfFrames; i++) {
+
+    if (NumberOfFrames) {
+      for (let i = 0; i < NumberOfFrames; i++) {
         const wadorsImageId = getWADORSImageId(sopInstance, i);
 
         cornerstoneWADOImageLoader.wadors.metaDataManager.add(
@@ -190,7 +192,7 @@ async function makeSOPInstance(server, study, instance) {
  */
 async function addInstancesToStudy(server, study, sopInstanceList) {
   return Promise.all(
-    sopInstanceList.map(function (sopInstance) {
+    sopInstanceList.map(function(sopInstance) {
       return makeSOPInstance(server, study, sopInstance);
     })
   );

platform/core/src/utils/dicomLoaderService.js

@@ -3,6 +3,8 @@ import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
 import { api } from 'dicomweb-client';
 import DICOMWeb from '../DICOMWeb';
 
+import errorHandler from '../errorHandler';
+
 const getImageId = imageObj => {
   if (!imageObj) {
     return;
@@ -57,11 +59,13 @@ const wadorsRetriever = (
   studyInstanceUID,
   seriesInstanceUID,
   sopInstanceUID,
-  headers = DICOMWeb.getAuthorizationHeader()
+  headers = DICOMWeb.getAuthorizationHeader(),
+  errorInterceptor = errorHandler.getHTTPErrorHandler()
 ) => {
   const config = {
     url,
     headers,
+    errorInterceptor,
   };
   const dicomWeb = new api.DICOMwebClient(config);
 

platform/core/src/utils/loadAndCacheDerivedDisplaySets.js

@@ -50,10 +50,12 @@ import studyMetadataManager from './studyMetadataManager';
 const loadAndCacheDerivedDisplaySets = (referencedDisplaySet, studies) => {
   const { StudyInstanceUID, SeriesInstanceUID } = referencedDisplaySet;
 
+  const promises = [];
+
   const studyMetadata = studyMetadataManager.get(StudyInstanceUID);
 
   if (!studyMetadata) {
-    return;
+    return promises;
   }
 
   const derivedDisplaySets = studyMetadata.getDerivedDatasets({
@@ -61,7 +63,7 @@ const loadAndCacheDerivedDisplaySets = (referencedDisplaySet, studies) => {
   });
 
   if (!derivedDisplaySets.length) {
-    return;
+    return promises;
   }
 
   // Filter by type
@@ -100,8 +102,10 @@ const loadAndCacheDerivedDisplaySets = (referencedDisplaySet, studies) => {
       }
     });
 
-    recentDisplaySet.load(referencedDisplaySet, studies);
+    promises.push(recentDisplaySet.load(referencedDisplaySet, studies));
   });
+
+  return promises;
 };
 
 export default loadAndCacheDerivedDisplaySets;

platform/core/src/utils/metadataProvider/fetchOverlayData.js

@@ -3,6 +3,8 @@ import DICOMWeb from '../../DICOMWeb';
 import str2ab from '../str2ab';
 import unpackOverlay from './unpackOverlay';
 
+import errorHandler from '../../errorHandler';
+
 export default async function fetchOverlayData(instance, server) {
   const OverlayDataPromises = [];
   const OverlayDataTags = [];
@@ -21,14 +23,20 @@ export default async function fetchOverlayData(instance, server) {
         const inlineBinaryData = atob(instance[OverlayDataTag].InlineBinary);
         const arraybuffer = str2ab(inlineBinaryData);
 
-        instance[OverlayDataTag] = unpackOverlay(arraybuffer)
+        instance[OverlayDataTag] = unpackOverlay(arraybuffer);
-      } else if (instance[OverlayDataTag] && instance[OverlayDataTag].BulkDataURI) {
+      } else if (
+        instance[OverlayDataTag] &&
+        instance[OverlayDataTag].BulkDataURI
+      ) {
         OverlayDataPromises.push(
           _getOverlayData(instance[OverlayDataTag], server)
         );
         OverlayDataTags.push(OverlayDataTag);
-      } else if (instance[OverlayDataTag] && instance[OverlayDataTag] instanceof ArrayBuffer) {
+      } else if (
-        instance[OverlayDataTag] = unpackOverlay(instance[OverlayDataTag])
+        instance[OverlayDataTag] &&
+        instance[OverlayDataTag] instanceof ArrayBuffer
+      ) {
+        instance[OverlayDataTag] = unpackOverlay(instance[OverlayDataTag]);
       }
     }
 
@@ -60,6 +68,7 @@ async function _getOverlayData(tag, server) {
   const config = {
     url: server.wadoRoot, //BulkDataURI is absolute, so this isn't used
     headers: DICOMWeb.getAuthorizationHeader(server),
+    errorInterceptor: errorHandler.getHTTPErrorHandler(),
   };
   const dicomWeb = new api.DICOMwebClient(config);
   const options = {
@@ -71,5 +80,3 @@ async function _getOverlayData(tag, server) {
     .then(result => result[0])
     .then(unpackOverlay);
 }
-
-

platform/core/src/utils/metadataProvider/fetchPaletteColorLookupTableData.js

@@ -2,6 +2,8 @@ import { api } from 'dicomweb-client';
 import DICOMWeb from '../../DICOMWeb';
 import str2ab from '../str2ab';
 
+import errorHandler from '../../errorHandler';
+
 export default async function fetchPaletteColorLookupTableData(
   instance,
   server
@@ -113,22 +115,14 @@ function _getPaletteColor(server, paletteColorLookupTableData, lutDescriptor) {
   const numLutEntries = lutDescriptor[0];
   const bits = lutDescriptor[2];
 
-  const readUInt16 = (byteArray, position) => {
-    return byteArray[position] + byteArray[position + 1] * 256;
-  };
-
   const arrayBufferToPaletteColorLUT = arraybuffer => {
-    const byteArray = new Uint8Array(arraybuffer);
+    const byteArray = bits === 16 ?
+      new Uint16Array(arraybuffer) :
+      new Uint8Array(arraybuffer);
     const lut = [];
 
-    if (bits === 16) {
+    for (let i = 0; i < numLutEntries; i++) {
-      for (let i = 0; i < numLutEntries; i++) {
+      lut[i] = byteArray[i];
-        lut[i] = readUInt16(byteArray, i * 2);
-      }
-    } else {
-      for (let i = 0; i < numLutEntries; i++) {
-        lut[i] = byteArray[i];
-      }
     }
 
     return lut;
@@ -146,6 +140,7 @@ function _getPaletteColor(server, paletteColorLookupTableData, lutDescriptor) {
     const config = {
       url: server.wadoRoot, //BulkDataURI is absolute, so this isn't used
       headers: DICOMWeb.getAuthorizationHeader(server),
+      errorInterceptor: errorHandler.getHTTPErrorHandler(),
     };
     const dicomWeb = new api.DICOMwebClient(config);
     const options = {
@@ -164,6 +159,8 @@ function _getPaletteColor(server, paletteColorLookupTableData, lutDescriptor) {
       resolve(arrayBufferToPaletteColorLUT(arraybuffer));
     });
   } else {
-    return Promise.resolve(arrayBufferToPaletteColorLUT(paletteColorLookupTableData));
+    return Promise.resolve(
+      arrayBufferToPaletteColorLUT(paletteColorLookupTableData)
+    );
   }
 }

platform/ui/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.4](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.4.3...@ohif/ui@1.4.4) (2020-05-04)
+
+
+### Bug Fixes
+
+* 🐛 Proper error handling for derived display sets ([#1708](https://github.com/OHIF/Viewers/issues/1708)) ([5b20d8f](https://github.com/OHIF/Viewers/commit/5b20d8f323e4b3ef9988f2f2ab672d697b6da409))
+
+
+
+
+
 ## [1.4.3](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.4.2...@ohif/ui@1.4.3) (2020-04-09)
 
 **Note:** Version bump only for package @ohif/ui

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",

platform/ui/src/components/snackbar/Snackbar.css

@@ -127,7 +127,7 @@
 
 .sb-message {
   font-size: 14px;
-  word-break: break-all;
+  word-break: normal;
 }
 
 .sb-item {

platform/viewer/CHANGELOG.md

@@ -3,6 +3,117 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.11.8](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.7...@ohif/viewer@3.11.8) (2020-05-06)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.11.7](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.6...@ohif/viewer@3.11.7) (2020-05-04)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.11.6](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.5...@ohif/viewer@3.11.6) (2020-05-04)
+
+
+### Bug Fixes
+
+* 🐛 Proper error handling for derived display sets ([#1708](https://github.com/OHIF/Viewers/issues/1708)) ([5b20d8f](https://github.com/OHIF/Viewers/commit/5b20d8f323e4b3ef9988f2f2ab672d697b6da409))
+
+
+
+
+
+## [3.11.5](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.4...@ohif/viewer@3.11.5) (2020-05-04)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.11.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.3...@ohif/viewer@3.11.4) (2020-05-04)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.11.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.2...@ohif/viewer@3.11.3) (2020-04-29)
+
+
+### Bug Fixes
+
+* Add IHEInvokeImageDisplay routes back into viewer ([#1695](https://github.com/OHIF/Viewers/issues/1695)) ([f7162ce](https://github.com/OHIF/Viewers/commit/f7162ce61708776a6c192732b0904a022bcc6b3a))
+
+
+
+
+
+## [3.11.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.1...@ohif/viewer@3.11.2) (2020-04-28)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.11.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.0...@ohif/viewer@3.11.1) (2020-04-27)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [3.11.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.10.2...@ohif/viewer@3.11.0) (2020-04-24)
+
+
+### Features
+
+* 🎸 Seg jump to slice + show/hide ([835f64d](https://github.com/OHIF/Viewers/commit/835f64d47a9994f6a25aaf3941a4974e215e7e7f))
+
+
+
+
+
+## [3.10.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.10.1...@ohif/viewer@3.10.2) (2020-04-23)
+
+
+### Bug Fixes
+
+* undefined `errorHandler` in cornerstoneWadoImageLoader configuration ([#1664](https://github.com/OHIF/Viewers/issues/1664)) ([709f147](https://github.com/OHIF/Viewers/commit/709f14708e2b0f912b5ea509114acd87af3149cb))
+
+
+
+
+
+## [3.10.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.10.0...@ohif/viewer@3.10.1) (2020-04-23)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [3.10.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.9.2...@ohif/viewer@3.10.0) (2020-04-23)
+
+
+### Features
+
+* configuration to hook into XHR Error handling ([e96205d](https://github.com/OHIF/Viewers/commit/e96205de35e5bec14dc8a9a8509db3dd4e6ecdb6))
+
+
+
+
+
 ## [3.9.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.9.1...@ohif/viewer@3.9.2) (2020-04-22)
 
 

platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js

@@ -21,8 +21,8 @@ describe('OHIF VTK Extension', () => {
     //Select 2D MPR button
     cy.get('[data-cy="2d mpr"]').click();
 
-    //Wait Reformatting Images
+    //Wait waitVTKLoading Images
-    cy.waitVTKReformatting();
+    cy.waitVTKLoading();
   });
 
   beforeEach(() => {

platform/viewer/cypress/integration/visual-regression/PercyCheckOHIFExtensionVTK.spec.js

@@ -18,8 +18,8 @@ describe('Visual Regression - OHIF VTK Extension', () => {
     //Select 2D MPR button
     cy.get('[data-cy="2d mpr"]').click();
 
-    //Wait Reformatting Images
+    //Wait waitVTKLoading Images
-    cy.waitVTKReformatting();
+    cy.waitVTKwaitVTKLoading();
   });
 
   beforeEach(() => {

platform/viewer/cypress/support/commands.js

@@ -107,15 +107,15 @@ Cypress.Commands.add('waitStudyList', () => {
   });
 });
 
-Cypress.Commands.add('waitVTKReformatting', () => {
+Cypress.Commands.add('waitVTKLoading', () => {
-  // Wait for start reformatting
+  // Wait for start loading
   cy.get('[data-cy="viewprt-grid"]', { timeout: 10000 }).should($grid => {
-    expect($grid).to.contain.text('Reform');
+    expect($grid).to.contain.text('Loading');
   });
 
-  // Wait for finish reformatting
+  // Wait for finish loading
   cy.get('[data-cy="viewprt-grid"]', { timeout: 30000 }).should($grid => {
-    expect($grid).not.to.contain.text('Reform');
+    expect($grid).not.to.contain.text('Loading');
   });
 });
 

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "3.9.2",
+  "version": "3.11.8",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -48,26 +48,26 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^2.7.1",
+    "@ohif/core": "^2.9.4",
-    "@ohif/extension-cornerstone": "^2.5.2",
+    "@ohif/extension-cornerstone": "^2.7.2",
-    "@ohif/extension-dicom-html": "^1.1.2",
+    "@ohif/extension-dicom-html": "^1.2.2",
     "@ohif/extension-dicom-microscopy": "^0.50.9",
-    "@ohif/extension-dicom-p10-downloader": "^0.0.2",
+    "@ohif/extension-dicom-p10-downloader": "^0.1.0",
     "@ohif/extension-dicom-pdf": "^1.0.3",
-    "@ohif/extension-dicom-rt": "^0.0.2",
+    "@ohif/extension-dicom-rt": "^0.1.2",
-    "@ohif/extension-dicom-segmentation": "^0.1.2",
+    "@ohif/extension-dicom-segmentation": "^0.2.5",
     "@ohif/extension-lesion-tracker": "^0.2.0",
-    "@ohif/extension-vtk": "^1.3.14",
+    "@ohif/extension-vtk": "^1.5.4",
     "@ohif/i18n": "^0.52.8",
-    "@ohif/ui": "^1.4.3",
+    "@ohif/ui": "^1.4.4",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",
     "cornerstone-core": "^2.2.8",
     "cornerstone-math": "^0.1.8",
     "cornerstone-tools": "4.12.5",
-    "cornerstone-wado-image-loader": "^3.0.0",
+    "cornerstone-wado-image-loader": "^3.1.0",
-    "dcmjs": "^0.12.0",
+    "dcmjs": "^0.12.2",
     "dicom-parser": "^1.8.3",
     "dicomweb-client": "^0.4.4",
     "hammerjs": "^2.0.8",

platform/viewer/public/config/idc.js

@@ -0,0 +1,19 @@
+window.config = function(props) {
+  var servicesManager = props.servicesManager;
+
+  return {
+    routerBasename: '/',
+    enableGoogleCloudAdapter: true,
+    enableGoogleCloudAdapterUI: false,
+    showStudyList: true,
+    httpErrorHandler: error => {
+      // This is 429 when rejected from the public idc sandbox too often.
+      console.warn(error.status);
+
+      // Could use services manager here to bring up a dialog/modal if needed.
+      console.warn('test, navigate to https://ohif.org/');
+      window.location = 'https://ohif.org/';
+    },
+    healthcareApiEndpoint: 'https://idc-sandbox-002.appspot.com/v1beta1',
+  };
+};

platform/viewer/src/App.js

@@ -31,7 +31,8 @@ import {
 import i18n from '@ohif/i18n';
 
 // TODO: This should not be here
-import './config';
+//import './config';
+import { setConfiguration } from './config';
 
 /** Utils */
 import {
@@ -52,7 +53,7 @@ import store from './store';
 /** Contexts */
 import WhiteLabelingContext from './context/WhiteLabelingContext';
 import UserManagerContext from './context/UserManagerContext';
-import AppContext from './context/AppContext';
+import { AppProvider, useAppContext, CONTEXTS } from './context/AppContext';
 
 /** ~~~~~~~~~~~~~ Application Setup */
 const commandsManagerConfig = {
@@ -123,6 +124,8 @@ class App extends Component {
       oidc,
     } = this._appConfig;
 
+    setConfiguration(this._appConfig);
+
     this.initUserManager(oidc);
     _initServices([
       UINotificationService,
@@ -156,8 +159,8 @@ class App extends Component {
 
     if (this._userManager) {
       return (
-        <AppContext.Provider value={{ appConfig: this._appConfig }}>
+        <Provider store={store}>
-          <Provider store={store}>
+          <AppProvider config={this._appConfig}>
             <I18nextProvider i18n={i18n}>
               <OidcProvider store={store} userManager={this._userManager}>
                 <UserManagerContext.Provider value={this._userManager}>
@@ -180,14 +183,14 @@ class App extends Component {
                 </UserManagerContext.Provider>
               </OidcProvider>
             </I18nextProvider>
-          </Provider>
+          </AppProvider>
-        </AppContext.Provider>
+        </Provider>
       );
     }
 
     return (
-      <AppContext.Provider value={{ appConfig: this._appConfig }}>
+      <Provider store={store}>
-        <Provider store={store}>
+        <AppProvider config={this._appConfig}>
           <I18nextProvider i18n={i18n}>
             <Router basename={routerBasename}>
               <WhiteLabelingContext.Provider value={whiteLabeling}>
@@ -201,8 +204,8 @@ class App extends Component {
               </WhiteLabelingContext.Provider>
             </Router>
           </I18nextProvider>
-        </Provider>
+        </AppProvider>
-      </AppContext.Provider>
+      </Provider>
     );
   }
 
@@ -252,6 +255,12 @@ function _initExtensions(extensions, cornerstoneExtensionConfig, appConfig) {
     commandsManager,
     servicesManager,
     appConfig,
+    api: {
+      contexts: CONTEXTS,
+      hooks: {
+        useAppContext
+      }
+    }
   });
 
   const requiredExtensions = [

platform/viewer/src/OHIFStandaloneViewer.js

@@ -191,8 +191,8 @@ class OHIFStandaloneViewer extends Component {
                   {match === null ? (
                     <></>
                   ) : (
-                    <Component match={match} location={this.props.location} />
+                      <Component match={match} location={this.props.location} />
-                  )}
+                    )}
                 </CSSTransition>
               )}
             </Route>

platform/viewer/src/components/ViewportGrid/ViewportGrid.js

@@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { utils } from '@ohif/core';
+import { useSnackbarContext } from '@ohif/ui';
 //
 import ViewportPane from './ViewportPane.js';
 import DefaultViewport from './DefaultViewport.js';
@@ -11,7 +12,7 @@ import EmptyViewport from './EmptyViewport.js';
 
 const { loadAndCacheDerivedDisplaySets } = utils;
 
-const ViewportGrid = function (props) {
+const ViewportGrid = function(props) {
   const {
     activeViewportIndex,
     availablePlugins,
@@ -33,9 +34,22 @@ const ViewportGrid = function (props) {
     return null;
   }
 
+  const snackbar = useSnackbarContext();
+
   useEffect(() => {
     viewportData.forEach(displaySet => {
-      loadAndCacheDerivedDisplaySets(displaySet, studies);
+      const promises = loadAndCacheDerivedDisplaySets(displaySet, studies);
+
+      promises.forEach(promise => {
+        promise.catch(error => {
+          snackbar.show({
+            title: 'Error loading derived display set:',
+            message: error.message,
+            type: 'error',
+            autoClose: false,
+          });
+        });
+      });
     });
   }, [studies, viewportData]);
 

platform/viewer/src/config.js

@@ -3,43 +3,59 @@ import cornerstone from 'cornerstone-core';
 import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
 import dicomParser from 'dicom-parser';
 import version from './version.js';
+import AppContext from './context/AppContext';
 
-let homepage;
+export function setConfiguration(appConfig) {
-const { process } = window;
+  let homepage;
-if (process && process.env && process.env.PUBLIC_URL) {
+  const { process } = window;
-  homepage = process.env.PUBLIC_URL;
+  if (process && process.env && process.env.PUBLIC_URL) {
-}
+    homepage = process.env.PUBLIC_URL;
-
-window.info = {
-  version,
-  homepage,
-};
-
-// For debugging
-//if (process.env.node_env === 'development') {
-window.cornerstone = cornerstone;
-window.cornerstoneWADOImageLoader = cornerstoneWADOImageLoader;
-//}
-
-cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
-cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
-
-OHIF.user.getAccessToken = () => {
-  // TODO: Get the Redux store from somewhere else
-  const state = window.store.getState();
-  if (!state.oidc || !state.oidc.user) {
-    return;
   }
 
-  return state.oidc.user.access_token;
+  window.info = {
-};
+    version,
+    homepage,
+  };
 
-cornerstoneWADOImageLoader.configure({
+  // For debugging
-  beforeSend: function(xhr) {
+  //if (process.env.node_env === 'development') {
-    const headers = OHIF.DICOMWeb.getAuthorizationHeader();
+  window.cornerstone = cornerstone;
+  window.cornerstoneWADOImageLoader = cornerstoneWADOImageLoader;
+  //}
 
-    if (headers.Authorization) {
+  cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
-      xhr.setRequestHeader('Authorization', headers.Authorization);
+  cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
+
+  OHIF.user.getAccessToken = () => {
+    // TODO: Get the Redux store from somewhere else
+    const state = window.store.getState();
+    if (!state.oidc || !state.oidc.user) {
+      return;
     }
-  },
+
-});
+    return state.oidc.user.access_token;
+  };
+
+  OHIF.errorHandler.getHTTPErrorHandler = () => {
+    // const { appConfig = {} } = AppContext;
+
+    return appConfig.httpErrorHandler;
+  };
+
+  cornerstoneWADOImageLoader.configure({
+    beforeSend: function(xhr) {
+      const headers = OHIF.DICOMWeb.getAuthorizationHeader();
+
+      if (headers.Authorization) {
+        xhr.setRequestHeader('Authorization', headers.Authorization);
+      }
+    },
+    errorInterceptor: error => {
+      // const { appConfig = {} } = AppContext;
+
+      if (typeof appConfig.httpErrorHandler === 'function') {
+        appConfig.httpErrorHandler(error);
+      }
+    },
+  });
+}

platform/viewer/src/connectedComponents/ConnectedToolbarRow.js

@@ -1,15 +0,0 @@
-// TODO: REPLACE THIS WITH A CONTEXT PROVIDER
-// EVERYTHING IN `VIEWER.JS` COULD USE THIS FOR APPROPRIATE CONTEXT
-import ToolbarRow from './ToolbarRow';
-import { connect } from 'react-redux';
-import { getActiveContexts } from './../store/layout/selectors.js';
-
-const mapStateToProps = state => {
-  return {
-    activeContexts: getActiveContexts(state),
-  };
-};
-
-const ConnectedToolbarRow = connect(mapStateToProps)(ToolbarRow);
-
-export default ConnectedToolbarRow;

platform/viewer/src/connectedComponents/ToolbarRow.js

@@ -16,6 +16,7 @@ import { commandsManager, extensionManager } from './../App.js';
 
 import ConnectedCineDialog from './ConnectedCineDialog';
 import ConnectedLayoutButton from './ConnectedLayoutButton';
+import { withAppContext } from '../context/AppContext';
 
 class ToolbarRow extends Component {
   // TODO: Simplify these? isOpen can be computed if we say "any" value for selected,
@@ -381,5 +382,5 @@ function _handleBuiltIn(button) {
 }
 
 export default withTranslation(['Common', 'ViewportDownloadForm'])(
-  withModal(withDialog(ToolbarRow))
+  withModal(withDialog(withAppContext(ToolbarRow)))
 );

platform/viewer/src/connectedComponents/Viewer.js

@@ -7,7 +7,7 @@ import OHIF, { DICOMSR } from '@ohif/core';
 import { withDialog } from '@ohif/ui';
 import moment from 'moment';
 import ConnectedHeader from './ConnectedHeader.js';
-import ConnectedToolbarRow from './ConnectedToolbarRow.js';
+import ToolbarRow from './ToolbarRow.js';
 import ConnectedStudyBrowser from './ConnectedStudyBrowser.js';
 import ConnectedViewerMain from './ConnectedViewerMain.js';
 import SidePanel from './../components/SidePanel.js';
@@ -256,7 +256,7 @@ class Viewer extends Component {
         </WhiteLabelingContext.Consumer>
 
         {/* TOOLBAR */}
-        <ConnectedToolbarRow
+        <ToolbarRow
           isLeftSidePanelOpen={this.state.isLeftSidePanelOpen}
           isRightSidePanelOpen={this.state.isRightSidePanelOpen}
           selectedLeftSidePanel={
@@ -307,11 +307,11 @@ class Viewer extends Component {
                 activeIndex={this.props.activeViewportIndex}
               />
             ) : (
-              <ConnectedStudyBrowser
+                <ConnectedStudyBrowser
-                studies={this.state.thumbnails}
+                  studies={this.state.thumbnails}
-                studyMetadata={this.props.studies}
+                  studyMetadata={this.props.studies}
-              />
+                />
-            )}
+              )}
           </SidePanel>
 
           {/* MAIN */}
@@ -349,7 +349,7 @@ export default withDialog(Viewer);
  * @param {Study[]} studies
  * @param {DisplaySet[]} studies[].displaySets
  */
-const _mapStudiesToThumbnails = function(studies) {
+const _mapStudiesToThumbnails = function (studies) {
   return studies.map(study => {
     const { StudyInstanceUID } = study;
 

platform/viewer/src/context/AppContext.js

@@ -1,5 +1,33 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { useSelector } from 'react-redux';
+import { getActiveContexts } from '../store/layout/selectors.js';
 
 let AppContext = React.createContext({});
 
+export const CONTEXTS = {
+  CORNERSTONE: 'ACTIVE_VIEWPORT::CORNERSTONE',
+  VTK: 'ACTIVE_VIEWPORT::VTK'
+};
+
+export const useAppContext = () => useContext(AppContext);
+
+export const AppProvider = ({ children, config }) => {
+  const activeContexts = useSelector(state => getActiveContexts(state));
+
+  return (
+    <AppContext.Provider value={{ appConfig: config, activeContexts }}>
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+export const withAppContext = Component => {
+  return function WrappedComponent(props) {
+    const { appConfig, activeContexts } = useAppContext();
+    return (
+      <Component {...props} appConfig={appConfig} activeContexts={activeContexts} />
+    );
+  };
+};
+
 export default AppContext;

platform/viewer/src/googleCloud/api/DicomUploadService.js

@@ -1,5 +1,6 @@
 import { httpErrorToStr, checkDicomFile } from '../utils/helpers';
 import { api } from 'dicomweb-client';
+import { errorHandler } from '@ohif/core';
 
 class DicomUploadService {
   async smartUpload(files, url, uploadCallback, cancellationToken) {
@@ -22,8 +23,7 @@ class DicomUploadService {
         let error = null;
         try {
           if (chunk.length > 1) throw new Error('Not implemented');
-          if (chunk.length === 1)
+          if (chunk.length === 1) await this.simpleUpload(chunk[0], url);
-            await this.simpleUpload(chunk[0], url);
         } catch (err) {
           // It looks like a stupid bug of Babel that err is not an actual Exception object
           error = httpErrorToStr(err);
@@ -76,11 +76,12 @@ class DicomUploadService {
 
   getClient(url) {
     const headers = this.retrieveAuthHeaderFunc();
+    const errorInterceptor = errorHandler.getHTTPErrorHandler();
 
     // TODO: a bit weird we are creating a new dicomweb client instance for every upload
     return new api.DICOMwebClient({
       url,
-      headers
+      headers,
     });
   }
 }

platform/viewer/src/lib/localFileLoaders/dicomFileLoader.js

@@ -1,4 +1,4 @@
-import * as dcmjs from 'dcmjs';
+import dcmjs from 'dcmjs';
 import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
 import FileLoader from './fileLoader';
 import OHIF from '@ohif/core';

platform/viewer/src/routes/routesUtil.js

@@ -54,6 +54,7 @@ const ROUTES_DEF = {
     },
     IHEInvokeImageDisplay: {
       path: '/IHEInvokeImageDisplay',
+      component: IHEInvokeImageDisplay
     },
   },
   gcloud: {

yarn.lock

@@ -5953,10 +5953,10 @@ cornerstone-tools@4.12.5:
     "@babel/runtime" "7.1.2"
     cornerstone-math "0.1.7"
 
-cornerstone-wado-image-loader@^3.0.0:
+cornerstone-wado-image-loader@^3.1.0:
-  version "3.0.6"
+  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cornerstone-wado-image-loader/-/cornerstone-wado-image-loader-3.0.6.tgz#7b2be91f8f658de3a7474e029aa8314a35725132"
+  resolved "https://registry.yarnpkg.com/cornerstone-wado-image-loader/-/cornerstone-wado-image-loader-3.1.0.tgz#6007470be896678636da3188f194f5e66ed07858"
-  integrity sha512-1luWOh1GzkboZ3uxfu4T8vh7K9nlDiiEbQ4dYIY9oobRZVZQbQiLT8wEZPbb4JTUe7UWJISHPCNgtAU8UE9DNw==
+  integrity sha512-n2yadbwK7rCHqJyh5AUmYVPUY5m7boKpheK60sXV41Z0eSZLin9Ja+P9yeAvkg0VGV+/zaBZGPUGY3YyjdWBgg==
   dependencies:
     dicom-parser "^1.8.3"
     pako "^1.0.10"
@@ -6534,10 +6534,10 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-dcmjs@^0.12.0:
+dcmjs@^0.12.2:
-  version "0.12.0"
+  version "0.12.2"
-  resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.12.0.tgz#8b1634f9b66e452075295f5d1f2c5bf3dabdf03e"
+  resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.12.2.tgz#1c16e19c27ff43202abc7cd25c5ecd6d8bf7672e"
-  integrity sha512-AZAnFMvzAxUv5+KWoZcxnTYflLKk0rNPeeFt2KrVAgaExFBFfDgJQh1lEgqdNlIP+XQDFrEEUmp726SQhgmVCg==
+  integrity sha512-B7cEVCfDi3mOLKoBYUMYy+6COjLZhtKaesNpq5XNA4IbEH4EJYVweJfiI9gsR5hypv9LAPg72xG/xrbqjy8TgQ==
   dependencies:
     "@babel/polyfill" "^7.8.3"
     "@babel/runtime" "^7.8.4"
@@ -6858,6 +6858,11 @@ dicomweb-client@^0.5.2:
   resolved "https://registry.yarnpkg.com/dicomweb-client/-/dicomweb-client-0.5.2.tgz#aa5a4a6a5044b0702bb0a8a2662c86cd16901951"
   integrity sha512-e11n2+g7HfBuMyopWq76W11eSZJ707g4U1XiO8URA+23aoe0g1kGAtlPB29NKXl7zX7RznTJ7wfRBxFkW6EJDA==
 
+dicomweb-client@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/dicomweb-client/-/dicomweb-client-0.6.0.tgz#5e35ada52fe0155af1cc1f0e84f9c7f76477f92d"
+  integrity sha512-VAkBg4W6odIo2XsFxqjN/rptd7bQ8oHpRuKH5d46E9BUIPzRschazE8Dx1xg7/l3N3f1M70jB7yJ339arAXiDQ==
+
 diff-sequences@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
@@ -9105,6 +9110,11 @@ gl-matrix@^3.1.0:
   resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.1.0.tgz#f5b2de17d8fed95a79e5025b10cded0ab9ccbed0"
   integrity sha512-526NA+3EA+ztAQi0IZpSWiM0fyQXIp7IbRvfJ4wS/TjjQD0uv0fVybXwwqqSOlq33UckivI0yMDlVtboWm3k7A==
 
+gl-matrix@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.3.0.tgz#232eef60b1c8b30a28cbbe75b2caf6c48fd6358b"
+  integrity sha512-COb7LDz+SXaHtl/h4LeaFcNdJdAQSDeVqjiIihSXNrkWObZLhDI4hIkZC11Aeqp7bcE72clzB0BnDXr2SmslRA==
+
 gl-preserve-state@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gl-preserve-state/-/gl-preserve-state-1.0.0.tgz#4ef710d62873f1470ed015c6546c37dacddd4198"
@@ -11428,9 +11438,9 @@ jszip@3.2.2:
     set-immediate-shim "~1.0.1"
 
 jszip@^3.2.2:
-  version "3.3.0"
+  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.3.0.tgz#29d72c21a54990fa885b11fc843db320640d5271"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.4.0.tgz#1a69421fa5f0bb9bc222a46bca88182fba075350"
-  integrity sha512-EJ9k766htB1ZWnsV5ZMDkKLgA+201r/ouFF8R2OigVjVdcm2rurcBrrdXaeqBJbqnUVMko512PYmlncBKE1Huw==
+  integrity sha512-gZAOYuPl4EhPTXT0GjhI3o+ZAz3su6EhLrKUoAivcKqyqC7laS5JEv4XWZND9BgcDcF83vI85yGbDmDR6UhrIg==
   dependencies:
     lie "~3.3.0"
     pako "~1.0.2"
@@ -15593,10 +15603,10 @@ react-codemirror2@^6.0.0:
   resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-6.0.0.tgz#180065df57a64026026cde569a9708fdf7656525"
   integrity sha512-D7y9qZ05FbUh9blqECaJMdDwKluQiO3A9xB+fssd5jKM7YAXucRuEOlX32mJQumUvHUkHRHqXIPBjm6g0FW0Ag==
 
-react-cornerstone-viewport@^2.3.6:
+react-cornerstone-viewport@2.3.8:
-  version "2.3.6"
+  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-2.3.6.tgz#1c76bd37c95284254767296952845bacd3b810a4"
+  resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-2.3.8.tgz#7af8360f29bca986ae4e36b4e503269b88ddc52f"
-  integrity sha512-MBs1Mgl0g0YswkhgoaYlaPoPDVs/HZQ3Z89thHxVytvJsgnQvhc3YrR48iRaUfQj0eYoazh7AL/lLCfd8veFKA==
+  integrity sha512-aiG2uVNrDY6SQx4t/HBxIA3zsMsCwT+6TpcXK9qSSoXhs+X6OTmYEKncWUqL0jtxU1yfh6JTUz8ARTg03gtF+A==
   dependencies:
     classnames "^2.2.6"
     date-fns "^2.2.1"
@@ -16019,10 +16029,10 @@ react-transition-group@^4.1.1:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-vtkjs-viewport@^0.8.3:
+react-vtkjs-viewport@^0.9.0:
-  version "0.8.4"
+  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/react-vtkjs-viewport/-/react-vtkjs-viewport-0.8.4.tgz#6bd9837d7762b845e77f053fb8fbf4469428d594"
+  resolved "https://registry.yarnpkg.com/react-vtkjs-viewport/-/react-vtkjs-viewport-0.9.0.tgz#5a7890643e511946f960db6b05142318be2dfe80"
-  integrity sha512-b90ENJzmStiahxVox+7mMwZij3NVUu//jE07PV2Qtp6E7q/eLXn6ZUwcEt9w5YHN36xLZVcx9b53ztLcXVgh/Q==
+  integrity sha512-kjpNr1n+eW0nU736HH07IsSYQXphxfn/RBvKtpBer9tNsl+FyLH8h+uY8KWdv8kVBHkEoaH6/srxB0JBa8l+jA==
   dependencies:
     date-fns "^2.2.1"
     gl-matrix "^3.1.0"
@@ -16385,7 +16395,7 @@ regenerator-runtime@^0.11.0, regenerator-runtime@^0.11.1:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.1, regenerator-runtime@^0.13.2:
+regenerator-runtime@^0.13.1, regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.4:
   version "0.13.5"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
   integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==