chore(release): publish [skip ci]

- @ohif/extension-cornerstone@2.8.4 - @ohif/extension-dicom-rt@0.2.5 - @ohif/extension-vtk@1.6.7 - @ohif/core@2.9.12 - @ohif/viewer@4.2.11
fix: 🐛 - Put guards in all places that a cornerstone re-render (#1899 )
2020-07-13 16:03:44 +00:00 · 2020-07-13 18:02:23 +02:00 · 2020-07-13 15:37:54 +00:00 · 2020-07-13 17:35:55 +02:00 · 2020-07-13 14:30:47 +00:00 · 2020-07-13 16:29:29 +02:00
169 changed files with 5538 additions and 1158 deletions
@@ -122,7 +122,7 @@ window.config = {
 ```

 - Install the viewer:
-  `window.OHIFStandaloneViewer.installViewer(window.config);`
+  `window.OHIFViewer.installViewer(window.config);`

 This exact setup is demonstrated in this
 [CodeSandbox](https://codesandbox.io/s/viewer-script-tag-tprch) and in our
@@ -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
-> out for documentation on this subject in the near future.
+It's possible to supply all Study data via JSON format, in the event you do not have a DicomWeb endpoint.
+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

@@ -126,12 +126,39 @@ globally defined styles/scripts.
 > We're trying to embed the OHIF Viewer into an existing React App, but seeing
 > react-dom and react conflicts. What can we do?

+If you are installing OHIF viewer inside another react app, you may use `installViewer` as follows:
+```
+import { installViewer } from '@ohif/viewer'
+
+const ohifViewerConfig = window.config // or set it here
+const containerId = 'ohif'
+const componentRenderedOrUpdatedCallback = function() {
+    console.log('OHIF Viewer rendered/updated');
+};
+
+componentDidMount() {
+   installViewer(
+      ohifViewerConfig,
+      containerId,
+      componentRenderedOrUpdatedCallback
+    );
+}
+
+render () {
+   ...
+   //you can render in any element you wish
+   <AnyTag id={containerId}/>
+}
+
+```
+
 `installViewer` is a convenience method that pulls in some dependencies that may
 not be compatible with existing `react` apps. `@ohif/viewer` also exports `App`
 which is a react component that takes the `configuration` outlined above as
 props. You can use it as a reusable component, and to avoid `react` version
 conflict issues.

+
 <!--
  LINKS
  -->
@@ -11,7 +11,59 @@ are:
 ```js
 window.config = {
  routerBasename: '/',
-  whiteLabelling: {},
+  /**
+   * "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) {
+      return React.createElement('a', {
+        target: '_self',
+        rel: 'noopener noreferrer',
+        className: 'header-brand',
+        href: '/',
+        style: {
+          display: 'block',
+          textIndent: '-9999px',
+          background: 'url(/svg-file-hosted-at-domain-root.svg)',
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat',
+          width: '200px',
+        },
+      });
+    },
+  },
+  /**
+   * 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,
@@ -66,11 +66,11 @@ open to pull requests and discussion issues.

 Current white-labeling options are limited. We expose the ability to replace the
 "Logo" section of the application with a custom "Logo" component. You can do
-this by adding a `whiteLabelling` key to your
+this by adding a `whiteLabeling` key to your
 [configuration file](./configuration.md).

 ```js
-function RadicalImagingLogo() {
+function RadicalImagingLogo(React) {
  return React.createElement(
    'a',
    {
@@ -83,8 +83,8 @@ function RadicalImagingLogo() {
  );
 }

-props.whiteLabelling = {
-  logoComponent: RadicalImagingLogo(),
+props.whiteLabeling = {
+  createLogoComponentFn: RadicalImagingLogo,
 };
 ```

@@ -20,10 +20,10 @@ abbrev@~1.0.9:
  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
  integrity sha1-kbR5JYinc4wl813W9jdSovh3YTU=

-agent-base@4, agent-base@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
-  integrity sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==
+agent-base@4, agent-base@^4.1.0, agent-base@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
+  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
  dependencies:
    es6-promisify "^5.0.0"

@@ -773,9 +773,9 @@ err-code@^1.0.0:
    prr "~1.0.1"

 es6-promise@^4.0.3:
-  version "4.2.6"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.6.tgz#b685edd8258886365ea62b57d30de28fadcd974f"
-  integrity sha512-aRVgGdnmW2OiySVPUC9e6m+plolMAJKjZnQlCwNSuK5yQ0JN61DZSO1X1Ufd1foqWRAlig0rhduTCHe7sVtK5Q==
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==

 es6-promisify@^5.0.0:
  version "5.0.0"
@@ -1289,11 +1289,11 @@ http-signature@~1.2.0:
    sshpk "^1.7.0"

 https-proxy-agent@^2.1.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz#51552970fa04d723e04c56d04178c3f92592bbc0"
-  integrity sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
+  integrity sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==
  dependencies:
-    agent-base "^4.1.0"
+    agent-base "^4.3.0"
    debug "^3.1.0"

 humanize-ms@^1.2.1:
@@ -1807,11 +1807,16 @@ ms@2.0.0:
  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=

-ms@^2.0.0, ms@^2.1.1:
+ms@^2.0.0:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==

+ms@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
 mute-stream@~0.0.4:
  version "0.0.8"
  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
@@ -3,6 +3,121 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [2.8.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.8.3...@ohif/extension-cornerstone@2.8.4) (2020-07-13)
+
+
+### Bug Fixes
+
+* 🐛 - Put guards in all places that a cornerstone re-render ([#1899](https://github.com/OHIF/Viewers/issues/1899)) ([451f7ea](https://github.com/OHIF/Viewers/commit/451f7eab9258e7a193eb362e0926b13aedc4b3c9))
+
+
+
+
+
+## [2.8.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.8.2...@ohif/extension-cornerstone@2.8.3) (2020-07-13)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+## [2.8.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.8.1...@ohif/extension-cornerstone@2.8.2) (2020-06-15)
+
+
+### Bug Fixes
+
+* 🐛 Disable seg panel when data for seg unavailable ([#1732](https://github.com/OHIF/Viewers/issues/1732)) ([698e900](https://github.com/OHIF/Viewers/commit/698e900b85121d3c2a46747c443ef69fb7a8c95b)), closes [#1728](https://github.com/OHIF/Viewers/issues/1728)
+
+
+
+
+
+## [2.8.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.8.0...@ohif/extension-cornerstone@2.8.1) (2020-06-04)
+
+
+### Bug Fixes
+
+* 🐛 Infinite frame index change when quickly jumping between ([#1734](https://github.com/OHIF/Viewers/issues/1734)) ([a830577](https://github.com/OHIF/Viewers/commit/a8305772d0fbec506549ad7ea08504a8bc3a4f39)), closes [#1733](https://github.com/OHIF/Viewers/issues/1733)
+
+
+
+
+
+# [2.8.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.7.3...@ohif/extension-cornerstone@2.8.0) (2020-06-04)
+
+
+### Features
+
+* 🎸 1729 - error boundary wrapper ([#1764](https://github.com/OHIF/Viewers/issues/1764)) ([c02b232](https://github.com/OHIF/Viewers/commit/c02b232b0cc24f38af5d5e3831d987d048e60ada))
+
+
+
+
+
+## [2.7.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.7.2...@ohif/extension-cornerstone@2.7.3) (2020-05-12)
+
+
+### Bug Fixes
+
+* 🐛 Fix seg color load ([#1724](https://github.com/OHIF/Viewers/issues/1724)) ([c4f84b1](https://github.com/OHIF/Viewers/commit/c4f84b1174d04ba84d37ed89b6d7ab541be28181))
+
+
+
+
+
+## [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
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone",
-  "version": "2.5.2",
+  "version": "2.8.4",
  "description": "OHIF extension for Cornerstone",
  "author": "OHIF",
  "license": "MIT",
@@ -34,9 +34,9 @@
    "@ohif/ui": "^0.50.0",
    "cornerstone-core": "^2.2.8",
    "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "4.12.5",
-    "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.10.1",
+    "cornerstone-tools": "4.15.1",
+    "cornerstone-wado-image-loader": "^3.1.0",
+    "dcmjs": "0.16.0",
    "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.9"
  }
 }
@@ -179,7 +179,7 @@ class OHIFCornerstoneViewport extends Component {

    if (
      displaySet.displaySetInstanceUID !==
-        prevDisplaySet.displaySetInstanceUID ||
+      prevDisplaySet.displaySetInstanceUID ||
      displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
      displaySet.frameIndex !== prevDisplaySet.frameIndex
    ) {
@@ -215,12 +215,28 @@ class OHIFCornerstoneViewport extends Component {
      });
    }

+    const newImageHandler = ({ currentImageIdIndex, sopInstanceUid }) => {
+      const { displaySet } = this.props.viewportData;
+      const { StudyInstanceUID } = displaySet;
+
+      if (currentImageIdIndex > 0) {
+        this.props.onNewImage({
+          StudyInstanceUID,
+          SOPInstanceUID: sopInstanceUid,
+          frameIndex: currentImageIdIndex,
+          activeViewportIndex: viewportIndex,
+        });
+      }
+    };
+
    return (
      <>
        <ConnectedCornerstoneViewport
          viewportIndex={viewportIndex}
          imageIds={imageIds}
          imageIdIndex={currentImageIdIndex}
+          onNewImage={newImageHandler}
+          onNewImageDebounceTime={700}
          // ~~ Connected (From REDUX)
          // frameRate={frameRate}
          // isPlaying={false}
@@ -10,6 +10,14 @@ const scroll = cornerstoneTools.import('util/scroll');
 const { studyMetadataManager } = OHIF.utils;
 const { setViewportSpecificData } = OHIF.redux.actions;

+const refreshCornerstoneViewports = () => {
+  cornerstone.getEnabledElements().forEach(enabledElement => {
+    if (enabledElement.image) {
+      cornerstone.updateImage(enabledElement.element);
+    }
+  });
+};
+
 const commandsModule = ({ servicesManager }) => {
  const actions = {
    rotateViewport: ({ viewports, rotation }) => {
@@ -180,10 +188,7 @@ const commandsModule = ({ servicesManager }) => {

      measurementApi.syncMeasurementsAndToolData();

-      // Update images in all active viewports
-      cornerstone.getEnabledElements().forEach(enabledElement => {
-        cornerstone.updateImage(enabledElement.element);
-      });
+      refreshCornerstoneViewports();
    },
    getNearbyToolData({ element, canvasCoordinates, availableToolTypes }) {
      const nearbyTool = {};
@@ -262,23 +267,26 @@ const commandsModule = ({ servicesManager }) => {
      StudyInstanceUID,
      SOPInstanceUID,
      frameIndex,
-      activeViewportIndex
+      activeViewportIndex,
    }) => {
      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;
      displaySet.frameIndex = frameIndex;

-      window.store.dispatch(setViewportSpecificData(activeViewportIndex, displaySet));
+      window.store.dispatch(
+        setViewportSpecificData(activeViewportIndex, displaySet)
+      );

-      cornerstone.getEnabledElements().forEach(enabledElement => {
-        cornerstone.updateImage(enabledElement.element);
-      });
-    }
+      refreshCornerstoneViewports();
+    },
  };

  const definitions = {
@@ -34,8 +34,17 @@ export default {
  preRegistration({ servicesManager, configuration = {} }) {
    init({ servicesManager, configuration });
  },
-  getViewportModule() {
-    return OHIFCornerstoneViewport;
+  getViewportModule({ commandsManager }) {
+    const ExtendedOHIFCornerstoneViewport = props => {
+      const onNewImageHandler = jumpData => {
+        commandsManager.runCommand('jumpToImage', jumpData);
+      };
+      return (
+        <OHIFCornerstoneViewport {...props} onNewImage={onNewImageHandler} />
+      );
+    };
+
+    return ExtendedOHIFCornerstoneViewport;
  },
  getToolbarModule() {
    return toolbarModule;
@@ -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 =
@@ -3,6 +3,55 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.2.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.2.3...@ohif/extension-dicom-html@1.2.4) (2020-07-13)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
+## [1.2.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.2.2...@ohif/extension-dicom-html@1.2.3) (2020-06-15)
+
+
+### Bug Fixes
+
+* 🐛 Disable seg panel when data for seg unavailable ([#1732](https://github.com/OHIF/Viewers/issues/1732)) ([698e900](https://github.com/OHIF/Viewers/commit/698e900b85121d3c2a46747c443ef69fb7a8c95b)), closes [#1728](https://github.com/OHIF/Viewers/issues/1728)
+
+
+
+
+
+## [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
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-html",
-  "version": "1.1.2",
+  "version": "1.2.4",
  "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.16.0",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
@@ -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';
@@ -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.51.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.9...@ohif/extension-dicom-microscopy@0.51.0) (2020-06-04)
+
+
+### Features
+
+* 🎸 1729 - error boundary wrapper ([#1764](https://github.com/OHIF/Viewers/issues/1764)) ([c02b232](https://github.com/OHIF/Viewers/commit/c02b232b0cc24f38af5d5e3831d987d048e60ada))
+
+
+
+
+
 ## [0.50.9](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.8...@ohif/extension-dicom-microscopy@0.50.9) (2020-04-02)

 **Note:** Version bump only for package @ohif/extension-dicom-microscopy
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-microscopy",
-  "version": "0.50.9",
+  "version": "0.51.0",
  "description": "OHIF extension for Dicom Microscopy",
  "author": "OHIF",
  "license": "MIT",
@@ -92,8 +92,8 @@ class DicomMicroscopyViewport extends Component {
        {this.state.error ? (
          <h2>{JSON.stringify(this.state.error)}</h2>
        ) : (
-          <div style={style} ref={this.container} />
-        )}
+            <div style={style} ref={this.container} />
+          )}
      </div>
    );
  }
@@ -0,0 +1,8 @@
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+module.exports = (env, argv) => {
+  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
+};
@@ -0,0 +1,38 @@
+const merge = require('webpack-merge');
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
+const pkg = require('./../package.json');
+
+const ROOT_DIR = path.join(__dirname, './..');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+module.exports = (env, argv) => {
+  const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
+
+  return merge(commonConfig, {
+    devtool: 'source-map',
+    stats: {
+      colors: true,
+      hash: true,
+      timings: true,
+      assets: true,
+      chunks: false,
+      chunkModules: false,
+      modules: false,
+      children: false,
+      warnings: true,
+    },
+    optimization: {
+      minimize: true,
+      sideEffects: true,
+    },
+    output: {
+      path: ROOT_DIR,
+      library: 'OHIFExtDicomP10Downloader',
+      libraryTarget: 'umd',
+      libraryExport: 'default',
+      filename: pkg.main,
+    },
+  });
+};
@@ -0,0 +1,44 @@
+# Change Log
+
+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-p10-downloader@0.1.1...@ohif/extension-dicom-p10-downloader@0.1.2) (2020-06-18)
+
+**Note:** Version bump only for package @ohif/extension-dicom-p10-downloader
+
+
+
+
+
+## [0.1.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-p10-downloader@0.1.0...@ohif/extension-dicom-p10-downloader@0.1.1) (2020-06-04)
+
+**Note:** Version bump only for package @ohif/extension-dicom-p10-downloader
+
+
+
+
+
+# [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
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Open Health Imaging Foundation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1 @@
+# @ohif/extension-dicom-p10-downloader
@@ -0,0 +1,40 @@
+{
+  "name": "@ohif/extension-dicom-p10-downloader",
+  "version": "0.1.2",
+  "description": "OHIF extension for downloading DICOM P10 files",
+  "author": "OHIF",
+  "license": "MIT",
+  "repository": "OHIF/Viewers",
+  "main": "dist/index.umd.js",
+  "module": "src/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=10",
+    "npm": ">=6",
+    "yarn": ">=1.16.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
+    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
+    "build:package": "yarn run build",
+    "prepublishOnly": "yarn run build",
+    "start": "yarn run dev"
+  },
+  "peerDependencies": {
+    "@ohif/core": "^2.6.0",
+    "dicom-parser": "^1.8.3",
+    "dicomweb-client": "^0.5.2"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.5.5",
+    "dicomweb-client": "^0.6.0",
+    "file-saver": "^2.0.2",
+    "jszip": "^3.2.2"
+  }
+}
@@ -0,0 +1,145 @@
+import OHIF from '@ohif/core';
+import {
+  save,
+  upload,
+  getDicomWebClientFromContext,
+  getStudyInstanceUIDFromStudies,
+  getSOPInstanceReferenceFromActiveViewport,
+  getSOPInstanceReferencesFromViewports,
+} from './utils';
+import _downloadAndZip, { downloadInstances } from './downloadAndZip';
+
+const {
+  utils: { Queue },
+} = OHIF;
+
+export function getCommands(context) {
+  const queue = new Queue(1);
+  const actions = {
+    /**
+     * @example Running this command using Commands Manager
+     * commandsManager.runCommand(
+     *   'downloadAndZip',
+     *   {
+     *     listOfUIDs: [...],
+     *     options: {
+     *       progress(status) {
+     *         console.info('Progress:', (status.progress * 100).toFixed(2) + '%');
+     *       }
+     *     }
+     *   },
+     *   'VIEWER'
+     * );
+     */
+    downloadAndZip({ servers, dicomWebClient, listOfUIDs, options }) {
+      return save(
+        _downloadAndZip(
+          dicomWebClient || getDicomWebClientFromContext(context, servers),
+          listOfUIDs,
+          options
+        ),
+        listOfUIDs
+      );
+    },
+    downloadAndZipStudy({ servers, studies, progress }) {
+      const dicomWebClient = getDicomWebClientFromContext(context, servers);
+      const listOfUIDs = getStudyInstanceUIDFromStudies(studies);
+      return save(
+        _downloadAndZip(dicomWebClient, listOfUIDs, { progress }),
+        listOfUIDs
+      );
+    },
+    downloadAndZipSeriesOnViewports({ servers, viewports, progress }) {
+      const dicomWebClient = getDicomWebClientFromContext(context, servers);
+      const listOfUIDs = getSOPInstanceReferencesFromViewports(viewports);
+      return save(
+        _downloadAndZip(dicomWebClient, listOfUIDs, { progress }),
+        listOfUIDs
+      );
+    },
+    downloadAndZipSeriesOnActiveViewport({ servers, viewports, progress }) {
+      const dicomWebClient = getDicomWebClientFromContext(context, servers);
+      const listOfUIDs = getSOPInstanceReferenceFromActiveViewport(viewports);
+      return save(
+        _downloadAndZip(dicomWebClient, listOfUIDs, { progress }),
+        listOfUIDs
+      );
+    },
+    downloadAndUploadStudy({ servers, studies, progress, serverConfig }) {
+      const dicomWebClient = getDicomWebClientFromContext(context, servers);
+      const listOfUIDs = getStudyInstanceUIDFromStudies(studies);
+      return upload(
+        downloadInstances(dicomWebClient, listOfUIDs, { progress }),
+        /**
+         * serverConfig is an object with the values used to create a new
+         * instance of DICOMwebClient.
+         *
+         * Basic Structure:
+         *
+         * const config = {
+         *    url,
+         *    headers,
+         *    errorInterceptor
+         * }
+         *
+         * const dicomWeb = new api.DICOMwebClient(config);
+         */
+        serverConfig
+      );
+    },
+  };
+
+  const definitions = {
+    downloadAndZip: {
+      commandFn: queue.bindSafe(actions.downloadAndZip, error),
+      storeContexts: ['servers'],
+    },
+    downloadAndZipStudy: {
+      commandFn: queue.bindSafe(actions.downloadAndZipStudy, error),
+      storeContexts: ['servers', 'studies'],
+      options: { progress },
+    },
+    downloadAndZipSeriesOnViewports: {
+      commandFn: queue.bindSafe(actions.downloadAndZipSeriesOnViewports, error),
+      storeContexts: ['servers', 'viewports'],
+      options: { progress },
+    },
+    downloadAndZipSeriesOnActiveViewport: {
+      commandFn: queue.bindSafe(
+        actions.downloadAndZipSeriesOnActiveViewport,
+        error
+      ),
+      storeContexts: ['servers', 'viewports'],
+      options: { progress },
+    },
+    downloadAndUploadStudy: {
+      commandFn: queue.bindSafe(actions.downloadAndUploadStudy, error),
+      storeContexts: ['servers', 'studies'],
+      options: { progress },
+    },
+  };
+
+  return {
+    actions,
+    definitions,
+  };
+}
+
+/**
+ * Utils
+ */
+
+function progress(status) {
+  OHIF.log.info(
+    'Download and Zip Progress:',
+    (status.progress * 100.0).toFixed(2) + '%'
+  );
+}
+
+function error(e) {
+  if (e.message === 'Queue limit reached') {
+    OHIF.log.warn('A download is already in progress, please wait.');
+  } else {
+    OHIF.log.error(e);
+  }
+}
@@ -0,0 +1,259 @@
+import OHIF from '@ohif/core';
+import { api } from 'dicomweb-client';
+import dicomParser from 'dicom-parser';
+import JSZip from 'jszip';
+
+/**
+ * Constants
+ */
+
+const {
+  utils: {
+    isDicomUid,
+    hierarchicalListUtils,
+    progressTrackingUtils: progressUtils,
+  },
+} = OHIF;
+
+/**
+ * Public Methods
+ */
+
+/**
+ * Download and Zip all DICOM P10 instances from specified DICOM Web Client
+ * based on an hierarchical list of UIDs;
+ *
+ * @param {DICOMwebClient} dicomWebClient A DICOMwebClient instance through
+ *  which the referenced instances will be retrieved;
+ * @param {Array} listOfUIDs The hierarchical list of UIDs from the instances
+ *  that should be retrieved:
+ *  A hierarchical list of UIDs is a regular JS Array where the type of the UID
+ *  (study, series, instance) is determined by its nasting lavel. For example:
+ *    @ The following list instructs the library to download all the instances
+ *      from both studies "A" and "B":
+ *
+ *    ['studyUIDFromA', 'studyUIDFromB']
+ *
+ *    @ In the previous example both UIDs are treated as STUDY UIDs because both
+ *      of them are listed in the same (top) level of the list. If, on the other
+ *      hand, only instances from series "I" and "J" from the study "B"
+ *      are to be downloaded, the expected hierarchical list would be:
+ *
+ *    ['studyUIDFromA', ['studyUIDFromB', ['seriesUIDFromI', 'seriesUIDFromJ']]]
+ *
+ *    @ Which, when prettified, reads like this:
+ *
+ *    [
+ *      'studyUIDFromA',
+ *      ['studyUIDFromB', [
+ *        'seriesUIDFromI',
+ *        'seriesUIDFromJ'
+ *      ]]
+ *    ]
+ *
+ *    @ Furthermore, if only instances "X", "Y" and "Z" from series "J" need to
+ *      be downloaded (instead of all the instances from that series), the list
+ *      could be changed to:
+ *
+ *    [
+ *      'studyUIDFromA',
+ *      ['studyUIDFromB', [
+ *        'seriesUIDFromI',
+ *        ['seriesUIDFromJ', [
+ *          'instanceUIDFromX',
+ *          'instanceUIDFromY',
+ *          'instanceUIDFromZ'
+ *        ]]
+ *      ]]
+ *    ]
+ *
+ * Please refer to hierarchicalListUtils.js for more information and utilities;
+ *
+ * @param {Object} options A plain object with options;
+ * @param {function} options.progress A callback to retrieve notifications
+ * @returns {Promise} A promise that resolves to an URL from which the ZIP file
+ *  can be downloaded;
+ */
+
+async function downloadAndZip(dicomWebClient, listOfUIDs, options) {
+  if (dicomWebClient instanceof api.DICOMwebClient) {
+    const settings = buildSettings(listOfUIDs, options);
+    const { compression } = settings.tasks;
+    const buffers = await downloadBuffers(settings, dicomWebClient);
+    compression.deferred.resolve(zipAll(buffers, settings));
+    const url = await compression.deferred.promise;
+    return url;
+  }
+  throw new Error('A valid DICOM Web Client instance is expected');
+}
+
+async function downloadInstances(dicomWebClient, listOfUIDs, options) {
+  if (dicomWebClient instanceof api.DICOMwebClient) {
+    const settings = buildSettings(listOfUIDs, options);
+    const buffers = await downloadBuffers(settings, dicomWebClient);
+    return buffers;
+  }
+  throw new Error('A valid DICOM Web Client instance is expected');
+}
+
+async function downloadBuffers(settings, dicomWebClient) {
+  const { compression } = settings.tasks;
+  // Register user-provided progress handler as a task list observer
+  progressUtils.addObserver(settings.taskList, settings.options.progress);
+  const buffers = await downloadAll(dicomWebClient, settings).catch(error => {
+    // Reject promise from compression task on download failure
+    compression.deferred.reject(error);
+    throw error;
+  });
+  return buffers;
+}
+
+/**
+ * Utils
+ */
+
+async function zipAll(buffers, settings) {
+  const zip = new JSZip();
+  OHIF.log.info('Adding DICOM P10 files to archive:', buffers.length);
+  buffers.forEach((buffer, i) => {
+    const path = buildPath(buffer) || `${i}.dcm`;
+    zip.file(path, buffer);
+  });
+  // Set compression task progress to 50%
+  progressUtils.update(settings.tasks.compression.task, 0.5);
+  const blob = await zip.generateAsync({ type: 'blob' });
+  return URL.createObjectURL(blob);
+}
+
+function buildSettings(listOfUIDs, options) {
+  const taskList = progressUtils.createList();
+  const compression = progressUtils.addDeferred(taskList);
+  const downloads = [];
+
+  // Build downloads list
+  hierarchicalListUtils.forEach(
+    listOfUIDs,
+    (StudyInstanceUID, SeriesInstanceUID, SOPInstanceUID) => {
+      if (isDicomUid(StudyInstanceUID)) {
+        downloads.push({
+          tracking: progressUtils.addDeferred(taskList),
+          parameters: [StudyInstanceUID, SeriesInstanceUID, SOPInstanceUID],
+        });
+      }
+    }
+  );
+
+  // Print tree of hierarchical references
+  OHIF.log.info('Downloading DICOM P10 files for references:');
+  OHIF.log.info(hierarchicalListUtils.print(listOfUIDs));
+
+  return {
+    options: Object(options),
+    taskList,
+    tasks: {
+      downloads,
+      compression,
+    },
+  };
+}
+
+function buildPath(buffer) {
+  let path;
+  try {
+    const byteArray = new Uint8Array(buffer);
+    const dataSet = dicomParser.parseDicom(byteArray, {
+      // Stop parsing after SeriesInstanceUID is found
+      untilTag: 'x0020000e',
+    });
+    const StudyInstanceUID = dataSet.string('x0020000d');
+    const SeriesInstanceUID = dataSet.string('x0020000e');
+    const SOPInstanceUID = dataSet.string('x00080018');
+    if (StudyInstanceUID && SeriesInstanceUID && SOPInstanceUID) {
+      path = `${StudyInstanceUID}/${SeriesInstanceUID}/${SOPInstanceUID}.dcm`;
+    }
+  } catch (e) {
+    OHIF.log.error('Error parsing downloaded DICOM P10 file...', e);
+  }
+  return path;
+}
+
+async function downloadAll(dicomWebClient, settings) {
+  const { downloads } = settings.tasks;
+
+  // Make sure at least one download was initiated
+  if (downloads.length < 1) {
+    throw new Error('No valid reference to be downloaded');
+  }
+
+  const promises = downloads.map(item => {
+    const {
+      parameters,
+      tracking: { deferred, task },
+    } = item;
+    deferred.resolve(download(task, dicomWebClient, ...parameters));
+    return deferred.promise;
+  });
+
+  // Wait on created download promises
+  return Promise.all(promises).then(results => {
+    const buffers = [];
+    // The "results" array may directly contain buffers (ArrayBuffer instances)
+    // or arrays of buffers, depending on the type of downloads initiated on the
+    // previous step (retrieveStudy, retrieveSeries or retrieveinstance). Ex:
+    // results = [buf1, [buf2, buf3], buf4, [buf5], ...];
+    results.forEach(
+      function select(nesting, result) {
+        if (result instanceof ArrayBuffer) {
+          buffers.push(result);
+        } else if (nesting && Array.isArray(result)) {
+          // "nesting" argument is important to make sure only two levels
+          // of arrays are visited. For example, "bufX" should not be visited:
+          // [buf1, [buf2, buf3, [bufX]], buf4, [buf5], ...];
+          result.forEach(select.bind(null, false));
+        }
+      }.bind(null, true)
+    );
+    return buffers;
+  });
+}
+
+async function download(
+  task,
+  dicomWebClient,
+  studyInstanceUID,
+  seriesInstanceUID,
+  sopInstanceUID
+) {
+  // Strict DICOM-formatted variable names COULDN'T be used here because the
+  // DICOM Web client interface expects them in this specific format.
+  // @TODO: Add support for download progress handler which will use the
+  // currently not use "task" param
+  if (!isDicomUid(studyInstanceUID)) {
+    throw new Error('Download requires at least a "StudyInstanceUID" property');
+  }
+  if (!isDicomUid(seriesInstanceUID)) {
+    // Download entire study
+    return dicomWebClient.retrieveStudy({
+      studyInstanceUID,
+    });
+  }
+  if (!isDicomUid(sopInstanceUID)) {
+    // Download entire series
+    return dicomWebClient.retrieveSeries({
+      studyInstanceUID,
+      seriesInstanceUID,
+    });
+  }
+  // Download specific instance
+  return dicomWebClient.retrieveInstance({
+    studyInstanceUID,
+    seriesInstanceUID,
+    sopInstanceUID,
+  });
+}
+
+/**
+ * Exports
+ */
+
+export { downloadAndZip as default, downloadAndZip, downloadInstances };
@@ -0,0 +1,43 @@
+import { getDicomWebClientFromConfig } from './utils';
+import { getCommands } from './commandsModule';
+
+/**
+ * Constants
+ */
+
+/**
+ * Globals
+ */
+
+const sharedContext = {
+  dicomWebClient: null,
+};
+
+/**
+ * Extension
+ */
+export default {
+  /**
+   * Only required property. Should be a unique value across all extensions.
+   */
+  id: 'dicom-p10-downloader',
+
+  /**
+   * LIFECYCLE HOOKS
+   */
+
+  preRegistration({ appConfig }) {
+    const dicomWebClient = getDicomWebClientFromConfig(appConfig);
+    if (dicomWebClient) {
+      sharedContext.dicomWebClient = dicomWebClient;
+    }
+  },
+
+  /**
+   * MODULE GETTERS
+   */
+
+  getCommandsModule() {
+    return getCommands(sharedContext);
+  },
+};
@@ -0,0 +1,158 @@
+import OHIF from '@ohif/core';
+import { api } from 'dicomweb-client';
+import { saveAs } from 'file-saver';
+
+const {
+  utils: { isDicomUid, resolveObjectPath, hierarchicalListUtils },
+  DICOMWeb,
+} = OHIF;
+
+function validDicomUid(subject) {
+  if (isDicomUid(subject)) {
+    return subject;
+  }
+}
+
+function getActiveServerFromServersStore(store) {
+  const servers = resolveObjectPath(store, 'servers');
+  if (Array.isArray(servers) && servers.length > 0) {
+    return servers.find(server => resolveObjectPath(server, 'active') === true);
+  }
+}
+
+function getDicomWebClientFromConfig(config) {
+  const servers = resolveObjectPath(config, 'servers.dicomWeb');
+  if (Array.isArray(servers) && servers.length > 0) {
+    const server = servers[0];
+    return new api.DICOMwebClient({
+      url: server.wadoRoot,
+      headers: DICOMWeb.getAuthorizationHeader(server),
+    });
+  }
+}
+
+function getDicomWebClientFromContext(context, store) {
+  const activeServer = getActiveServerFromServersStore(store);
+  if (activeServer) {
+    return new api.DICOMwebClient({
+      url: activeServer.wadoRoot,
+      headers: DICOMWeb.getAuthorizationHeader(activeServer),
+    });
+  } else if (context.dicomWebClient instanceof api.DICOMwebClient) {
+    return context.dicomWebClient;
+  }
+}
+
+function getSOPInstanceReference(viewports, index) {
+  if (index >= 0) {
+    const { StudyInstanceUID, SeriesInstanceUID, SOPInstanceUID } = Object(
+      resolveObjectPath(viewports, `viewportSpecificData.${index}`)
+    );
+    return Object.freeze(
+      hierarchicalListUtils.addToList(
+        [],
+        validDicomUid(StudyInstanceUID),
+        validDicomUid(SeriesInstanceUID),
+        validDicomUid(SOPInstanceUID)
+      )
+    );
+  }
+}
+
+function getSOPInstanceReferenceFromActiveViewport(viewports) {
+  return getSOPInstanceReference(
+    viewports,
+    resolveObjectPath(viewports, 'activeViewportIndex')
+  );
+}
+
+function getSOPInstanceReferencesFromViewports(viewports) {
+  const list = [];
+  const viewportSpecificData = resolveObjectPath(
+    viewports,
+    'viewportSpecificData'
+  );
+  Object.keys(viewportSpecificData).forEach(index => {
+    const { StudyInstanceUID, SeriesInstanceUID, SOPInstanceUID } = Object(
+      viewportSpecificData[index]
+    );
+    hierarchicalListUtils.addToList(
+      list,
+      validDicomUid(StudyInstanceUID),
+      validDicomUid(SeriesInstanceUID),
+      validDicomUid(SOPInstanceUID)
+    );
+  });
+  return list;
+}
+
+function save(promise, listOfUIDs) {
+  return Promise.resolve(promise)
+    .then(url => {
+      OHIF.log.info('Files successfully compressed:', url);
+      const StudyInstanceUID = hierarchicalListUtils.getItem(listOfUIDs, 0);
+      saveAs(url, `${StudyInstanceUID}.zip`);
+      return url;
+    })
+    .catch(error => {
+      OHIF.log.error('Failed to create Zip file...', error);
+      return null;
+    });
+}
+
+function upload(promise, serverConfig) {
+  return Promise.resolve(promise)
+    .then(async instances => {
+      const instancesAmount = instances.length;
+      OHIF.log.info(`Uploading study to ${serverConfig.url}`);
+      OHIF.log.info(
+        `${instancesAmount} instances are being uploaded. Don't close your browser.`
+      );
+
+      try {
+        const dicomWeb = new api.DICOMwebClient(serverConfig);
+        let progress = 0;
+
+        const getProgress = () => {
+          return ((progress * 100) / instancesAmount).toFixed();
+        };
+
+        for (const instance of instances) {
+          const options = {
+            datasets: [instance],
+          };
+
+          await dicomWeb.storeInstances(options);
+
+          progress++;
+
+          OHIF.log.info(`Progress: ${getProgress()}%`);
+        }
+
+        OHIF.log.info('Successfully uploaded!');
+      } catch (error) {
+        OHIF.log.error(`Failed to upload: ${error}`);
+      }
+
+      return instances;
+    })
+    .catch(error => {
+      OHIF.log.error(`Failed to upload: ${error}`);
+      return null;
+    });
+}
+
+function getStudyInstanceUIDFromStudies(studies) {
+  return Object.keys(Object(Object(studies).studyData)).slice(0, 1);
+}
+
+export {
+  save,
+  upload,
+  validDicomUid,
+  getDicomWebClientFromConfig,
+  getDicomWebClientFromContext,
+  getStudyInstanceUIDFromStudies,
+  getSOPInstanceReferenceFromActiveViewport,
+  getSOPInstanceReferencesFromViewports,
+};
@@ -3,6 +3,118 @@
 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-rt@0.2.4...@ohif/extension-dicom-rt@0.2.5) (2020-07-13)
+
+
+### Bug Fixes
+
+* 🐛 - Put guards in all places that a cornerstone re-render ([#1899](https://github.com/OHIF/Viewers/issues/1899)) ([451f7ea](https://github.com/OHIF/Viewers/commit/451f7eab9258e7a193eb362e0926b13aedc4b3c9))
+
+
+
+
+
+## [0.2.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.2.3...@ohif/extension-dicom-rt@0.2.4) (2020-07-13)
+
+**Note:** Version bump only for package @ohif/extension-dicom-rt
+
+
+
+
+
+## [0.2.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.2.2...@ohif/extension-dicom-rt@0.2.3) (2020-07-13)
+
+**Note:** Version bump only for package @ohif/extension-dicom-rt
+
+
+
+
+
+## [0.2.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.2.1...@ohif/extension-dicom-rt@0.2.2) (2020-07-13)
+
+
+### Bug Fixes
+
+* 🐛 Fix RT Panel hide/show and Fix looping load errors ([#1877](https://github.com/OHIF/Viewers/issues/1877)) ([e7cc735](https://github.com/OHIF/Viewers/commit/e7cc735c03d02eeb0d3af4ba02c15ed4f81bbec2))
+
+
+
+
+
+## [0.2.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.2.0...@ohif/extension-dicom-rt@0.2.1) (2020-06-15)
+
+
+### Bug Fixes
+
+* 🐛 Disable seg panel when data for seg unavailable ([#1732](https://github.com/OHIF/Viewers/issues/1732)) ([698e900](https://github.com/OHIF/Viewers/commit/698e900b85121d3c2a46747c443ef69fb7a8c95b)), closes [#1728](https://github.com/OHIF/Viewers/issues/1728)
+
+
+
+
+
+# [0.2.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.1.4...@ohif/extension-dicom-rt@0.2.0) (2020-06-04)
+
+
+### Features
+
+* 🎸 1729 - error boundary wrapper ([#1764](https://github.com/OHIF/Viewers/issues/1764)) ([c02b232](https://github.com/OHIF/Viewers/commit/c02b232b0cc24f38af5d5e3831d987d048e60ada))
+
+
+
+
+
+## [0.1.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.1.3...@ohif/extension-dicom-rt@0.1.4) (2020-05-14)
+
+
+### Bug Fixes
+
+* 🐛 Load default display set when no time metadata ([#1684](https://github.com/OHIF/Viewers/issues/1684)) ([f7b8b6a](https://github.com/OHIF/Viewers/commit/f7b8b6a41c4626084ef56b0fdf7363e914b143c4)), closes [#1683](https://github.com/OHIF/Viewers/issues/1683)
+
+
+
+
+
+## [0.1.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.1.2...@ohif/extension-dicom-rt@0.1.3) (2020-05-12)
+
+
+### Bug Fixes
+
+* 🐛 Fix seg color load ([#1724](https://github.com/OHIF/Viewers/issues/1724)) ([c4f84b1](https://github.com/OHIF/Viewers/commit/c4f84b1174d04ba84d37ed89b6d7ab541be28181))
+
+
+
+
+
+## [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
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-rt",
-  "version": "0.0.2",
+  "version": "0.2.5",
  "description": "OHIF extension for rendering DICOM RTSTRUCTs on top of cornerstone images.",
  "author": "OHIF",
  "license": "MIT",
@@ -30,8 +30,8 @@
  "peerDependencies": {
    "@ohif/core": "^0.50.0",
    "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "^4.0.9",
-    "dcmjs": "^0.8.3",
+    "cornerstone-tools": "4.15.1",
+    "dcmjs": "0.16.0",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
@@ -14,7 +14,7 @@ const OHIFDicomRTStructSopClassHandler = {
  id: 'OHIFDicomRTStructSopClassHandler',
  type: MODULE_TYPES.SOP_CLASS_HANDLER,
  sopClassUIDs,
-  getDisplaySetFromSeries: function (
+  getDisplaySetFromSeries: function(
    series,
    study,
    dicomWebClient,
@@ -67,13 +67,14 @@ const OHIFDicomRTStructSopClassHandler = {
      }
    }

-    rtStructDisplaySet.load = function (referencedDisplaySet, studies) {
+    rtStructDisplaySet.load = function(referencedDisplaySet, studies) {
      return loadRTStruct(
        rtStructDisplaySet,
        referencedDisplaySet,
        studies
      ).catch(error => {
        rtStructDisplaySet.isLoaded = false;
+        rtStructDisplaySet.loadError = true;
        throw new Error(error);
      });
    };
@@ -17,7 +17,10 @@ const { studyMetadataManager } = utils;

 const refreshViewport = () => {
  cornerstone.getEnabledElements().forEach(enabledElement => {
-    cornerstone.updateImage(enabledElement.element);
+    debugger;
+    if (enabledElement.image) {
+      cornerstone.updateImage(enabledElement.element);
+    }
  });
 };

@@ -31,7 +34,19 @@ const refreshViewport = () => {
 * @param {number} props.isOpen - isOpen
 * @returns component
 */
-const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }) => {
+const RTPanel = ({
+  studies,
+  viewports,
+  activeIndex,
+  isOpen,
+  onContourItemClick,
+  noContoursNotification,
+  activeContexts = [],
+  contexts = {},
+}) => {
+  const isVTK = () => activeContexts.includes(contexts.VTK);
+  const isCornerstone = () => activeContexts.includes(contexts.CORNERSTONE);
+
  const [selectedContour, setSelectedContour] = useState();
  const DEFAULT_SET_INDEX = 0;
  const DEFAULT_STATE = {
@@ -65,7 +80,10 @@ const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }
    document.addEventListener('extensiondicomrtrtloaded', updateStructureSets);

    return () => {
-      document.removeEventListener('extensiondicomrtrtloaded', updateStructureSets);
+      document.removeEventListener(
+        'extensiondicomrtrtloaded',
+        updateStructureSets
+      );
    };
  }, []);

@@ -78,7 +96,9 @@ const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }
        activeViewport.SeriesInstanceUID
      );

-      const studyMetadata = studyMetadataManager.get(activeViewport.StudyInstanceUID);
+      const studyMetadata = studyMetadataManager.get(
+        activeViewport.StudyInstanceUID
+      );
      const referencedDisplaysets = studyMetadata.getDerivedDatasets({
        referencedSeriesInstanceUID: activeViewport.SeriesInstanceUID,
        Modality: 'RTSTRUCT',
@@ -89,7 +109,7 @@ const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }
        setState({
          referencedDisplaysets,
          selectedSet: defaultSet,
-          sets: viewportSets
+          sets: viewportSets,
        });
      } else {
        setState(DEFAULT_STATE);
@@ -105,7 +125,10 @@ const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }
    setShowSettings(showSettings && !isOpen);
  }, [isOpen]);

-  const toContourItem = ({ ROINumber, ROIName, RTROIObservations, colorArray, visible }, loadedSet) => {
+  const toContourItem = (
+    { ROINumber, ROIName, RTROIObservations, colorArray, visible },
+    loadedSet
+  ) => {
    let interpretedType = '';
    if (RTROIObservations && RTROIObservations.RTROIInterpretedType) {
      interpretedType = `(${RTROIObservations.RTROIInterpretedType})`;
@@ -119,33 +142,47 @@ const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }
        onClick={() => {
          setSelectedContour(isSameContour ? null : ROINumber);

-          const enabledElements = cornerstone.getEnabledElements();
-          const element = enabledElements[activeIndex].element;
-          const toolState = cornerstoneTools.getToolState(element, 'stack');
+          if (isCornerstone()) {
+            const enabledElements = cornerstone.getEnabledElements();
+            const element = enabledElements[activeIndex].element;
+            const toolState = cornerstoneTools.getToolState(element, 'stack');

-          if (!toolState) {
-            return;
+            if (!toolState) {
+              return;
+            }
+
+            const imageIds = toolState.data[0].imageIds;
+
+            const module = cornerstoneTools.getModule('rtstruct');
+            const imageId = module.getters.imageIdOfCenterFrameOfROIContour(
+              state.selectedSet.SeriesInstanceUID,
+              ROINumber,
+              imageIds
+            );
+
+            if (!imageId) {
+              noContoursNotification();
+
+              return;
+            }
+
+            const frameIndex = imageIds.indexOf(imageId);
+            const SOPInstanceUID = cornerstone.metaData.get(
+              'SOPInstanceUID',
+              imageId
+            );
+            const StudyInstanceUID = cornerstone.metaData.get(
+              'StudyInstanceUID',
+              imageId
+            );
+
+            onContourItemClick({
+              StudyInstanceUID,
+              SOPInstanceUID,
+              frameIndex,
+              activeViewportIndex: activeIndex,
+            });
          }
-
-          const imageIds = toolState.data[0].imageIds;
-
-          const module = cornerstoneTools.getModule('rtstruct');
-          const imageId = module.getters.imageIdOfCenterFrameOfROIContour(
-            state.selectedSet.SeriesInstanceUID,
-            ROINumber,
-            imageIds
-          );
-
-          const frameIndex = imageIds.indexOf(imageId);
-          const SOPInstanceUID = cornerstone.metaData.get('SOPInstanceUID', imageId);
-          const StudyInstanceUID = cornerstone.metaData.get('StudyInstanceUID', imageId);
-
-          onContourItemClick({
-            StudyInstanceUID,
-            SOPInstanceUID,
-            frameIndex,
-            activeViewportIndex: activeIndex
-          });
        }}
        label={`${ROIName} ${interpretedType}`}
        index={ROINumber}
@@ -153,7 +190,10 @@ const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }
        visible={visible}
        onVisibilityChange={() => {
          const module = cornerstoneTools.getModule('rtstruct');
-          module.setters.toggleROIContour(state.selectedSet.SeriesInstanceUID, ROINumber);
+          module.setters.toggleROIContour(
+            state.selectedSet.SeriesInstanceUID,
+            ROINumber
+          );
        }}
      />
    );
@@ -189,44 +229,70 @@ const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }
          onClick={() => setShowSettings(true)}
        />
      </div>
-      {!state.referencedDisplaysets.length && <LoadingIndicator expand height="70px" width="70px" />}
-      {state.referencedDisplaysets.map(displaySet => {
-        const { SeriesInstanceUID, metadata, isLoaded } = displaySet;
+      {!state.referencedDisplaysets.length && (
+        <LoadingIndicator expand height="70px" width="70px" />
+      )}
+      {state.sets &&
+        state.referencedDisplaysets.map(displaySet => {
+          const { SeriesInstanceUID, metadata, isLoaded } = displaySet;

-        const module = cornerstoneTools.getModule('rtstruct');
-        const sets = module.getters.structuresSetsWhichReferenceSeriesInstanceUid(viewports[activeIndex].SeriesInstanceUID);
+          const module = cornerstoneTools.getModule('rtstruct');
+          const sets = module.getters.structuresSetsWhichReferenceSeriesInstanceUid(
+            viewports[activeIndex].SeriesInstanceUID
+          );

-        const loadedSet = sets.find(set => set.SeriesInstanceUID === SeriesInstanceUID);
-        return (
-          <PanelSection
-            key={SeriesInstanceUID}
-            title={metadata.StructureSetLabel}
-            loading={!isLoaded || !loadedSet}
-            visible={isLoaded && loadedSet.visible}
-            hideVisibleButton={!isLoaded}
-            expanded={isLoaded && loadedSet.SeriesInstanceUID === state.selectedSet.SeriesInstanceUID}
-            onVisibilityChange={() => {
-              const module = cornerstoneTools.getModule('rtstruct');
-              module.setters.toggleStructureSet(SeriesInstanceUID);
-            }}
-            onExpandChange={async () => {
-              if (!isLoaded) {
-                await displaySet.load(viewports[activeIndex], studies);
-                const module = cornerstoneTools.getModule('rtstruct');
-                const sets = module.getters.structuresSetsWhichReferenceSeriesInstanceUid(viewports[activeIndex].SeriesInstanceUID);
-                const selectedSet = sets.find(set => set.SeriesInstanceUID === SeriesInstanceUID);
-                setState(state => ({ ...state, selectedSet, sets }));
+          const loadedSet = sets.find(
+            set => set.SeriesInstanceUID === SeriesInstanceUID
+          );
+          return (
+            <PanelSection
+              key={SeriesInstanceUID}
+              title={metadata.StructureSetLabel}
+              loading={!isLoaded || !loadedSet}
+              visible={isLoaded && loadedSet.visible}
+              hideVisibleButton={!isLoaded}
+              expanded={
+                isLoaded &&
+                loadedSet.SeriesInstanceUID ===
+                  state.selectedSet.SeriesInstanceUID
              }
-            }}
-          >
-            <ScrollableArea>
-              <TableList headless>
-                {isLoaded && loadedSet.ROIContours.map(c => toContourItem(c, loadedSet))}
-              </TableList>
-            </ScrollableArea>
-          </PanelSection>
-        );
-      })}
+              onVisibilityChange={newVisibility => {
+                const module = cornerstoneTools.getModule('rtstruct');
+
+                if (newVisibility) {
+                  module.setters.showStructureSet(loadedSet.SeriesInstanceUID);
+                } else {
+                  module.setters.hideStructureSet(loadedSet.SeriesInstanceUID);
+                }
+                const sets = module.getters.structuresSetsWhichReferenceSeriesInstanceUid(
+                  viewports[activeIndex].SeriesInstanceUID
+                );
+                setState(state => ({ ...state, sets }));
+                refreshViewport();
+              }}
+              onExpandChange={async () => {
+                if (!isLoaded) {
+                  await displaySet.load(viewports[activeIndex], studies);
+                  const module = cornerstoneTools.getModule('rtstruct');
+                  const sets = module.getters.structuresSetsWhichReferenceSeriesInstanceUid(
+                    viewports[activeIndex].SeriesInstanceUID
+                  );
+                  const selectedSet = sets.find(
+                    set => set.SeriesInstanceUID === SeriesInstanceUID
+                  );
+                  setState(state => ({ ...state, selectedSet, sets }));
+                }
+              }}
+            >
+              <ScrollableArea>
+                <TableList headless>
+                  {isLoaded &&
+                    loadedSet.ROIContours.map(c => toContourItem(c, loadedSet))}
+                </TableList>
+              </ScrollableArea>
+            </PanelSection>
+          );
+        })}
    </div>
  );
 };
@@ -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 {
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { TableListItem, Icon } from '@ohif/ui';

@@ -28,6 +28,11 @@ const StructureSetItem = ({
  selected = false,
 }) => {
  const [isVisible, setIsVisible] = useState(visible);
+
+  useEffect(() => {
+    setIsVisible(visible);
+  }, [visible])
+
  return (
    <div className={`dcmrt-structure-set-item ${selected && 'selected'}`}>
      <TableListItem
@@ -41,7 +46,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'}
@@ -20,8 +20,21 @@ export default {
  preRegistration({ servicesManager, configuration = {} }) {
    init({ servicesManager, configuration });
  },
-  getPanelModule({ commandsManager }) {
+  getPanelModule({ commandsManager, servicesManager, api }) {
+    const { UINotificationService } = servicesManager.services;
+
    const ExtendedRTPanel = props => {
+      const { activeContexts } = api.hooks.useAppContext();
+
+      const noContoursNotificationHandler = () => {
+        UINotificationService.show({
+          title: 'ROI Contour empty',
+          message: 'The ROI contour has no structure set data.',
+          type: 'error',
+          autoClose: false,
+        });
+      };
+
      const contourItemClickHandler = contourData => {
        commandsManager.runCommand('jumpToImage', contourData);
      };
@@ -30,6 +43,9 @@ export default {
        <RTPanel
          {...props}
          onContourItemClick={contourItemClickHandler}
+          activeContexts={activeContexts}
+          contexts={api.contexts}
+          noContoursNotification={noContoursNotificationHandler}
        />
      );
    };
@@ -51,8 +67,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 (['RTSTRUCT', 'RTPLAN', 'RTDOSE'].includes(series.Modality)) {
+                  if (
+                    /* Could be expanded to contain RTPLAN and RTDOSE information in the future */
+                    ['RTSTRUCT'].includes(series.Modality)
+                  ) {
                    return false;
                  }
                }
@@ -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';
@@ -16,7 +16,6 @@ export default async function loadRTStruct(
  studies
 ) {
  const rtStructModule = cornerstoneTools.getModule('rtstruct');
-
  // Set here is loading is asynchronous.
  // If this function throws its set back to false.
  rtStructDisplaySet.isLoaded = true;
@@ -68,7 +67,6 @@ export default async function loadRTStruct(
  const rtStructDisplayToolName = TOOL_NAMES.RTSTRUCT_DISPLAY_TOOL;

  for (let i = 0; i < ROIContourSequence.length; i++) {
-
    const ROIContour = ROIContourSequence[i];
    const { ReferencedROINumber, ContourSequence } = ROIContour;

@@ -238,7 +236,7 @@ function _setROIContourRTROIObservations(

 function _setToolEnabledIfNotEnabled(toolName) {
  cornerstone.getEnabledElements().forEach(enabledElement => {
-    const { element } = enabledElement;
+    const { element, image } = enabledElement;
    const tool = cornerstoneTools.getToolForElement(element, toolName);

    if (tool.mode !== 'enabled') {
@@ -246,7 +244,9 @@ function _setToolEnabledIfNotEnabled(toolName) {
      cornerstoneTools.setToolEnabled(toolName);
    }

-    cornerstone.updateImage(element);
+    if (image) {
+      cornerstone.updateImage(element);
+    }
  });
 }

@@ -5,7 +5,9 @@ import structureSetReferencesSeriesInstanceUid from './lib/structureSetReference
 // We should put this as a helper somewhere as we are using it in mutliple places.
 function refreshViewport() {
  cornerstone.getEnabledElements().forEach(enabledElement => {
-    cornerstone.updateImage(enabledElement.element);
+    if (enabledElement.image) {
+      cornerstone.updateImage(enabledElement.element);
+    }
  });
 }

@@ -81,7 +83,9 @@ function _setStructureSetVisible(SeriesInstanceUID, visible = true) {
  const StructureSet = getStructureSet(SeriesInstanceUID);

  if (StructureSet) {
-    StructureSet.visible = visible;
+    StructureSet.ROIContours.forEach(ROIContour => {
+      ROIContour.visible = visible;
+    });

    refreshViewport();
  }
@@ -154,15 +158,10 @@ function setToggleROIContour(SeriesInstanceUID, ROINumber) {
 * Returns an array of StructureSets which reference the given SeriesInstanceUID.
 * @param {string} SeriesInstanceUID The SeriesInstanceUID to check.
 */
-function getStructuresSetsWhichReferenceSeriesInstanceUid(
-  SeriesInstanceUID
-) {
+function getStructuresSetsWhichReferenceSeriesInstanceUid(SeriesInstanceUID) {
  const { StructureSets } = state;
  return StructureSets.filter(StructureSet =>
-    structureSetReferencesSeriesInstanceUid(
-      StructureSet,
-      SeriesInstanceUID
-    )
+    structureSetReferencesSeriesInstanceUid(StructureSet, SeriesInstanceUID)
  );
 }

@@ -3,6 +3,115 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.3.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.3.2...@ohif/extension-dicom-segmentation@0.3.3) (2020-07-13)
+
+**Note:** Version bump only for package @ohif/extension-dicom-segmentation
+
+
+
+
+
+## [0.3.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.3.1...@ohif/extension-dicom-segmentation@0.3.2) (2020-07-13)
+
+
+### Bug Fixes
+
+* 🐛 Fix RT Panel hide/show and Fix looping load errors ([#1877](https://github.com/OHIF/Viewers/issues/1877)) ([e7cc735](https://github.com/OHIF/Viewers/commit/e7cc735c03d02eeb0d3af4ba02c15ed4f81bbec2))
+
+
+
+
+
+## [0.3.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.3.0...@ohif/extension-dicom-segmentation@0.3.1) (2020-06-15)
+
+
+### Bug Fixes
+
+* 🐛 Disable seg panel when data for seg unavailable ([#1732](https://github.com/OHIF/Viewers/issues/1732)) ([698e900](https://github.com/OHIF/Viewers/commit/698e900b85121d3c2a46747c443ef69fb7a8c95b)), closes [#1728](https://github.com/OHIF/Viewers/issues/1728)
+
+
+
+
+
+# [0.3.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.2.6...@ohif/extension-dicom-segmentation@0.3.0) (2020-06-04)
+
+
+### Features
+
+* 🎸 1729 - error boundary wrapper ([#1764](https://github.com/OHIF/Viewers/issues/1764)) ([c02b232](https://github.com/OHIF/Viewers/commit/c02b232b0cc24f38af5d5e3831d987d048e60ada))
+
+
+
+
+
+## [0.2.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.2.5...@ohif/extension-dicom-segmentation@0.2.6) (2020-05-12)
+
+
+### Bug Fixes
+
+* 🐛 Fix seg color load ([#1724](https://github.com/OHIF/Viewers/issues/1724)) ([c4f84b1](https://github.com/OHIF/Viewers/commit/c4f84b1174d04ba84d37ed89b6d7ab541be28181))
+
+
+
+
+
+## [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
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-segmentation",
-  "version": "0.1.2",
+  "version": "0.3.3",
  "description": "OHIF extension for viewing segmentations in the 2D MPR view",
  "author": "OHIF",
  "license": "MIT",
@@ -30,14 +30,15 @@
  "peerDependencies": {
    "@ohif/core": "^0.50.0",
    "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "4.12.5",
-    "dcmjs": "^0.6.1",
+    "cornerstone-tools": "4.15.1",
+    "dcmjs": "0.16.0",
    "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"
  }
 }
@@ -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;
@@ -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);
+}
@@ -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 }) => (
-  <div className="dcmseg-segment-item">
-    <TableListItem
-      key={index}
-      itemKey={index}
-      itemIndex={index}
-      itemClass={itemClass}
-      itemMeta={<ColoredCircle color={color} />}
-      itemMetaClass="segment-color-section"
-      onItemClick={onClick}
-    >
-      <div>
-        <div className="segment-label" style={{ marginBottom: 4 }}>
-          {label}
-        </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>
+const SegmentItem = ({ index, label, onClick, itemClass, color, visible = true, onVisibilityChange }) => {
+  const [isVisible, setIsVisible] = useState(visible);
+
+  useEffect(() => {
+    setIsVisible(visible);
+  }, [visible]);
+
+  return (
+    <div className="dcmseg-segment-item">
+      <TableListItem
+        key={index}
+        itemKey={index}
+        itemIndex={index}
+        itemClass={itemClass}
+        itemMeta={<ColoredCircle color={color} />}
+        itemMetaClass="segment-color-section"
+        onItemClick={onClick}
+      >
+        <div>
+          <div className="segment-label" style={{ marginBottom: 4 }}>
+            <span>{label}</span>
+            <Icon
+              className={`eye-icon ${isVisible && '--visible'}`}
+              name={isVisible ? 'eye' : 'eye-closed'}
+              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
-              className="btnAction"
-              onClick={() => console.log('Editing description...')}
-            >
-              <span style={{ marginRight: '4px' }}>
-                <Icon name="edit" width="14px" height="14px" />
-              </span>
+              <button
+                className="btnAction"
+                onClick={() => console.log('Editing description...')}
+              >
+                <span style={{ marginRight: '4px' }}>
+                  <Icon name="edit" width="14px" height="14px" />
+                </span>
              Description
              </button>
-          </div>
-        )}
-      </div>
-    </TableListItem>
-  </div>
-);
+            </div>
+          )}
+        </div>
+      </TableListItem>
+    </div>
+  );
+};

 SegmentItem.propTypes = {
  index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
@@ -8,6 +8,11 @@
  flex-direction: column;
 }

+.dcmseg-segmentation-panel.disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
 .dcmseg-segmentation-panel h3 {
  padding-left: 20px;
  margin-top: 0;
@@ -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,57 @@ const refreshViewport = () => {
 /**
 * SegmentationPanel component
 *
- * @param {Object} props
- * @param {Array} props.studies
- * @param {Array} props.viewports - viewportSpecificData
- * @param {number} props.activeIndex - activeViewportIndex
+ * @param {Array} props.studies - Studies data
+ * @param {Array} props.viewports - Viewports data (viewportSpecificData)
+ * @param {number} props.activeIndex - Active viewport index
+ * @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,
+    isDisabled: true
  });

  useEffect(() => {
@@ -57,10 +86,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 +127,7 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
    );

    return () => {
+      document.removeEventListener('extensiondicomsegmentationsegloaded', refreshSegmentations);
      cornerstoneTools.store.state.enabledElements.forEach(enabledElement =>
        enabledElement.removeEventListener(
          'cornerstonetoolslabelmapmodified',
@@ -81,154 +135,312 @@ 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 firstImageId = studyMetadata.getFirstImageId(activeViewport.displaySetInstanceUID);
-    const brushStackState = module.state.series[firstImageId];

-    if (brushStackState) {
-      const labelmap3D = brushStackState.labelmaps3D[brushStackState.activeLabelmapIndex];
-      const labelmapList = getLabelmapList(brushStackState, firstImageId, activeViewport);
-      const segmentList = getSegmentList(labelmap3D, firstImageId);
-      setState(state => ({
-        ...state,
-        brushStackState,
-        selectedSegmentation: brushStackState.activeLabelmapIndex,
-        labelmapList,
-        segmentList
-      }));
-    } else {
-      setState(state => ({
-        ...state,
-        labelmapList: [],
-        segmentList: [],
-      }));
+    const isDisabled = !activeViewport || !activeViewport.StudyInstanceUID;
+    if (!isDisabled) {
+      const studyMetadata = studyMetadataManager.get(
+        activeViewport.StudyInstanceUID
+      );
+      const firstImageId = studyMetadata.getFirstImageId(
+        activeViewport.displaySetInstanceUID
+      );
+      const brushStackState = module.state.series[firstImageId];
+      if (brushStackState) {
+        const labelmap3D =
+          brushStackState.labelmaps3D[brushStackState.activeLabelmapIndex];
+        const labelmapList = getLabelmapList(
+          brushStackState,
+          firstImageId,
+          activeViewport
+        );
+        const segmentList = getSegmentList(
+          labelmap3D,
+          firstImageId,
+          brushStackState
+        );
+        setState(state => ({
+          ...state,
+          brushStackState,
+          selectedSegmentation: brushStackState.activeLabelmapIndex,
+          labelmapList,
+          segmentList,
+          isDisabled
+        }));
+      } else {
+        setState(state => ({
+          ...state,
+          labelmapList: [],
+          segmentList: [],
+          isDisabled
+        }));
+      }
    }
-  }, [studies, viewports, activeIndex]);
+  }, [
+    viewports,
+    activeIndex,
+    state.isLoading
+  ]);
+
+  useEffect(() => {
+    refreshSegmentations();
+  }, [viewports, activeIndex, isOpen, 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) => {
-    /* Get list of SEG labelmaps specific to active viewport (reference series) */
-    const referencedSegDisplaysets = _getReferencedSegDisplaysets(
-      activeViewport.StudyInstanceUID,
-      activeViewport.SeriesInstanceUID
-    );
+  const getLabelmapList = useCallback(
+    (brushStackState, firstImageId, activeViewport) => {
+      /* Get list of SEG labelmaps specific to active viewport (reference series) */
+      const referencedSegDisplaysets = _getReferencedSegDisplaysets(
+        activeViewport.StudyInstanceUID,
+        activeViewport.SeriesInstanceUID
+      );

-    return referencedSegDisplaysets.map((displaySet, index) => {
-      const { labelmapIndex, SeriesDate, SeriesTime } = displaySet;
+      return referencedSegDisplaysets.map((displaySet, index) => {
+        const { labelmapIndex, SeriesDate, SeriesTime } = displaySet;

-      /* Map to display representation */
-      const dateStr = `${SeriesDate}:${SeriesTime}`.split('.')[0];
-      const date = moment(dateStr, 'YYYYMMDD:HHmmss');
-      const isActiveLabelmap =
-        labelmapIndex === brushStackState.activeLabelmapIndex;
-      const displayDate = date.format('ddd, MMM Do YYYY');
-      const displayTime = date.format('h:mm:ss a');
-      const displayDescription = displaySet.SeriesDescription;
+        /* Map to display representation */
+        const dateStr = `${SeriesDate}:${SeriesTime}`.split('.')[0];
+        const date = moment(dateStr, 'YYYYMMDD:HHmmss');
+        const isActiveLabelmap =
+          labelmapIndex === brushStackState.activeLabelmapIndex;
+        const displayDate = date.format('ddd, MMM Do YYYY');
+        const displayTime = date.format('h:mm:ss a');
+        const displayDescription = displaySet.SeriesDescription;

-      return {
-        value: labelmapIndex,
-        title: displayDescription,
-        description: displayDate,
-        onClick: async () => {
-          const activatedLabelmapIndex = await _setActiveLabelmap(
-            activeViewport,
-            studies,
-            displaySet,
-            firstImageId,
-            brushStackState.activeLabelmapIndex
-          );
-          updateState('selectedSegmentation', activatedLabelmapIndex);
-        },
-      };
-    });
-  };
+        return {
+          value: labelmapIndex,
+          title: displayDescription,
+          description: displayDate,
+          onClick: async () => {
+            const activatedLabelmapIndex = await _setActiveLabelmap(
+              activeViewport,
+              studies,
+              displaySet,
+              firstImageId,
+              brushStackState.activeLabelmapIndex,
+              () => onSelectedSegmentationChange(),
+              onDisplaySetLoadFailure
+            );
+            updateState('selectedSegmentation', activatedLabelmapIndex);
+          },
+        };
+      });
+    },
+    [studies]
+  );

-  const getSegmentList = (labelmap3D, firstImageId) => {
-    /*
-     * Newly created segments have no `meta`
-     * So we instead build a list of all segment indexes in use
-     * Then find any associated metadata
-     */
-    const uniqueSegmentIndexes = labelmap3D.labelmaps2D
-      .reduce((acc, labelmap2D) => {
-        if (labelmap2D) {
-          const segmentIndexes = labelmap2D.segmentsOnLabelmap;
+  const getSegmentList = useCallback(
+    (labelmap3D, firstImageId, brushStackState) => {
+      /*
+       * Newly created segments have no `meta`
+       * So we instead build a list of all segment indexes in use
+       * Then find any associated metadata
+       */
+      const uniqueSegmentIndexes = labelmap3D.labelmaps2D
+        .reduce((acc, labelmap2D) => {
+          if (labelmap2D) {
+            const segmentIndexes = labelmap2D.segmentsOnLabelmap;

-          for (let i = 0; i < segmentIndexes.length; i++) {
-            if (!acc.includes(segmentIndexes[i]) && segmentIndexes[i] !== 0) {
-              acc.push(segmentIndexes[i]);
+            for (let i = 0; i < segmentIndexes.length; i++) {
+              if (!acc.includes(segmentIndexes[i]) && segmentIndexes[i] !== 0) {
+                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;
-      }, [])
-      .sort((a, b) => a - b);
+        const sameSegment = state.selectedSegment === segmentNumber;
+        const setCurrentSelectedSegment = () => {
+          _setActiveSegment(
+            firstImageId,
+            segmentNumber,
+            labelmap3D.activeSegmentIndex
+          );
+          updateState('selectedSegment', sameSegment ? null : segmentNumber);

-    const module = cornerstoneTools.getModule('segmentation');
-    const colorLutTable =
-      module.state.colorLutTables[labelmap3D.colorLUTIndex];
-    const hasLabelmapMeta = labelmap3D.metadata && labelmap3D.metadata.data;
+          const validIndexList = [];
+          labelmap3D.labelmaps2D.forEach((labelMap2D, index) => {
+            if (labelMap2D.segmentsOnLabelmap.includes(segmentNumber)) {
+              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 = [];
-    for (let i = 0; i < uniqueSegmentIndexes.length; i++) {
-      const segmentIndex = uniqueSegmentIndexes[i];
+          if (isCornerstone()) {
+            const enabledElements = cornerstone.getEnabledElements();
+            const element = enabledElements[activeIndex].element;
+            const toolState = cornerstoneTools.getToolState(element, 'stack');

-      const color = colorLutTable[segmentIndex];
-      let segmentLabel = '(unlabeled)';
-      let segmentNumber = segmentIndex;
+            if (!toolState) {
+              return;
+            }

-      /* Meta */
-      if (hasLabelmapMeta) {
-        const segmentMeta = labelmap3D.metadata.data[segmentIndex];
+            const imageIds = toolState.data[0].imageIds;
+            const imageId = imageIds[closest];
+            const frameIndex = imageIds.indexOf(imageId);

-        if (segmentMeta) {
-          segmentNumber = segmentMeta.SegmentNumber;
-          segmentLabel = segmentMeta.SegmentLabel;
+            const SOPInstanceUID = cornerstone.metaData.get(
+              'SOPInstanceUID',
+              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;
-      const setCurrentSelectedSegment = () => {
-        _setActiveSegment(
-          firstImageId,
-          segmentNumber,
-          labelmap3D.activeSegmentIndex
-        );
-        updateState('selectedSegment', sameSegment ? null : segmentNumber);
-      };
+      return segmentList;

-      segmentList.push(
-        <SegmentItem
-          key={segmentNumber}
-          itemClass={`segment-item ${sameSegment && 'selected'}`}
-          onClick={setCurrentSelectedSegment}
-          label={segmentLabel}
-          index={segmentNumber}
-          color={color}
-        />
-      );
-    }
+      /*
+       * Let's iterate over segmentIndexes ^ above
+       * If meta has a match, use it to show info
+       * If now, add "no-meta" class
+       * Show default name
+       */
+    },
+    [activeIndex, onSegmentItemClick, state.selectedSegment, state.isLoading]
+  );

-    return segmentList;
+  const updateCachedSegmentsProperties = (segmentNumber, properties) => {
+    const segmentsProperties = state.cachedSegmentsProperties;
+    const segmentProperties = state.cachedSegmentsProperties[segmentNumber];

-    /*
-     * Let's iterate over segmentIndexes ^ above
-     * If meta has a match, use it to show info
-     * If now, add "no-meta" class
-     * Show default name
-     */
+    segmentsProperties[segmentNumber] =
+      segmentProperties ?
+        { ...segmentProperties, ...properties } :
+        properties;
+
+    updateState('cachedSegmentsProperties', segmentsProperties);
  };

+  useEffect(() => {
+    updateState('cachedSegmentsProperties', []);
+  }, [activeContexts]);
+
  const updateState = (field, value) => {
    setState(state => ({ ...state, [field]: value }));
  };
@@ -270,15 +482,13 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
    }

    const module = cornerstoneTools.getModule('segmentation');
-    const colorLutTable =
-      module.state.colorLutTables[labelmap3D.colorLUTIndex];
+    const colorLutTable = 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,26 +498,29 @@ 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}
      />
    );
  } else {
    return (
-      <div className="dcmseg-segmentation-panel">
+      <div className={`dcmseg-segmentation-panel ${state.isDisabled && 'disabled'}`}>
        <Icon
          className="cog-icon"
          name="cog"
          width="25px"
          height="25px"
-          onClick={() => updateState('showSegSettings', true)}
+          onClick={() => updateState('showSegmentationSettings', true)}
        />
        {false && (
          <form className="selector-form">
@@ -328,9 +541,9 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
        <h3>Segmentations</h3>
        <div className="segmentations">
          <SegmentationSelect
-            value={
-              state.labelmapList.find(i => i.value === state.selectedSegmentation) || null
-            }
+            value={state.labelmapList.find(
+              i => i.value === state.selectedSegmentation
+            )}
            formatOptionLabel={SegmentationItem}
            options={state.labelmapList}
          />
@@ -415,7 +628,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 +640,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 +659,8 @@ const _setActiveLabelmap = async (

  refreshViewport();

+  callback();
+
  return displaySet.labelmapIndex;
 };

@@ -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',
@@ -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
-              value={state.outlineAlpha * 100}
-              label="Opacity"
-              showPercentage
-              step={1}
-              min={0}
-              max={100}
-              onChange={event => save('outlineAlpha', toFloat(event.target.value))}
-            />
-            <CustomRange
-              value={state.outlineWidth}
-              label="Width"
-              showValue
-              step={1}
-              min={0}
-              max={5}
-              onChange={event => save('outlineWidth', parseInt(event.target.value))}
-            />
+            {!disabledFields.includes('outlineAlpha') && (
+              <CustomRange
+                value={state.outlineAlpha * 100}
+                label="Opacity"
+                showPercentage
+                step={1}
+                min={0}
+                max={100}
+                onChange={event => save('outlineAlpha', toFloat(event.target.value))}
+              />
+            )}
+            {!disabledFields.includes('outlineWidth') && (
+              <CustomRange
+                value={state.outlineWidth}
+                label="Width"
+                showValue
+                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
@@ -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;
+    },
+  };
+}
@@ -1,7 +1,9 @@
+import React from 'react';
+
 import init from './init.js';
 import toolbarModule from './toolbarModule.js';
-import panelModule from './panelModule.js';
-import sopClassHandlerModule from './OHIFDicomSegSopClassHandler.js';
+import getSopClassHandlerModule from './getOHIFDicomSegSopClassHandler.js';
+import SegmentationPanel from './components/SegmentationPanel/SegmentationPanel.js';

 export default {
  /**
@@ -21,10 +23,97 @@ export default {
  getToolbarModule({ servicesManager }) {
    return toolbarModule;
  },
-  getPanelModule({ servicesManager }) {
-    return panelModule;
-  },
-  getSopClassHandlerModule({ servicesManager }) {
-    return sopClassHandlerModule;
+  getPanelModule({ commandsManager, api, servicesManager }) {
+    const { UINotificationService } = servicesManager.services;
+
+    const ExtendedSegmentationPanel = props => {
+      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,
 };
@@ -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,59 @@ export default async function loadSegmentation(
    referencedDisplaySet.SeriesInstanceUID
  );

-  const results = _parseSeg(segArrayBuffer, imageIds);
+  return new Promise((resolve, reject) => {
+    let results;

-  if (!results) {
-    throw new Error('Fractional segmentations are not yet supported');
-  }
+    try {
+      results = _parseSeg(segArrayBuffer, imageIds);
+    } catch (error) {
+      segDisplaySet.isLoaded = false;
+      segDisplaySet.loadError = true;
+      reject(error);
+    }

-  const { labelmapBuffer, segMetadata, segmentsOnFrame } = results;
-  const { setters } = cornerstoneTools.getModule('segmentation');
+    const { labelmapBuffer, segMetadata, segmentsOnFrame } = results;
+    const { setters } = cornerstoneTools.getModule('segmentation');

-  // TODO: Could define a color LUT based on colors in the SEG.
-  const labelmapIndex = _getNextLabelmapIndex(imageIds[0]);
+    // TODO: Could define a color LUT based on colors in the SEG.
+    const labelmapIndex = _getNextLabelmapIndex(imageIds[0]);
+    const colorLUTIndex = _makeColorLUTAndGetIndex(segMetadata);

-  setters.labelmap3DByFirstImageId(
-    imageIds[0],
-    labelmapBuffer,
-    labelmapIndex,
-    segMetadata,
-    imageIds.length,
-    segmentsOnFrame
-  );
+    setters.labelmap3DByFirstImageId(
+      imageIds[0],
+      labelmapBuffer,
+      labelmapIndex,
+      segMetadata,
+      imageIds.length,
+      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 +110,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,
@@ -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'],
-};
@@ -3,6 +3,192 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.6.7](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.6.6...@ohif/extension-vtk@1.6.7) (2020-07-13)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.6.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.6.5...@ohif/extension-vtk@1.6.6) (2020-07-13)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.6.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.6.4...@ohif/extension-vtk@1.6.5) (2020-07-13)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.6.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.6.3...@ohif/extension-vtk@1.6.4) (2020-06-18)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.6.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.6.2...@ohif/extension-vtk@1.6.3) (2020-06-15)
+
+
+### Bug Fixes
+
+* 🐛 Disable seg panel when data for seg unavailable ([#1732](https://github.com/OHIF/Viewers/issues/1732)) ([698e900](https://github.com/OHIF/Viewers/commit/698e900b85121d3c2a46747c443ef69fb7a8c95b)), closes [#1728](https://github.com/OHIF/Viewers/issues/1728)
+
+
+
+
+
+## [1.6.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.6.1...@ohif/extension-vtk@1.6.2) (2020-06-05)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.6.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.6.0...@ohif/extension-vtk@1.6.1) (2020-06-04)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+# [1.6.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.5.6...@ohif/extension-vtk@1.6.0) (2020-06-04)
+
+
+### Features
+
+* 🎸 1729 - error boundary wrapper ([#1764](https://github.com/OHIF/Viewers/issues/1764)) ([c02b232](https://github.com/OHIF/Viewers/commit/c02b232b0cc24f38af5d5e3831d987d048e60ada))
+
+
+
+
+
+## [1.5.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.5.5...@ohif/extension-vtk@1.5.6) (2020-05-14)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.5.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.5.4...@ohif/extension-vtk@1.5.5) (2020-05-12)
+
+
+### Bug Fixes
+
+* 🐛 Fix seg color load ([#1724](https://github.com/OHIF/Viewers/issues/1724)) ([c4f84b1](https://github.com/OHIF/Viewers/commit/c4f84b1174d04ba84d37ed89b6d7ab541be28181))
+
+
+
+
+
+## [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
+
+
+
+
+
+## [1.3.13](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.3.12...@ohif/extension-vtk@1.3.13) (2020-04-17)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.3.12](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.3.11...@ohif/extension-vtk@1.3.12) (2020-04-15)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.3.11](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.3.10...@ohif/extension-vtk@1.3.11) (2020-04-09)
+
+
+### Bug Fixes
+
+* Revert "refactor: Reduce bundle size ([#1575](https://github.com/OHIF/Viewers/issues/1575))" ([#1622](https://github.com/OHIF/Viewers/issues/1622)) ([d21af3f](https://github.com/OHIF/Viewers/commit/d21af3f133492fa31492413b8782936c9ff18b44))
+
+
+
+
+
 ## [1.3.10](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.3.9...@ohif/extension-vtk@1.3.10) (2020-04-09)

 **Note:** Version bump only for package @ohif/extension-vtk
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-vtk",
-  "version": "1.3.10",
+  "version": "1.6.7",
  "description": "OHIF extension for VTK.js",
  "author": "OHIF",
  "license": "MIT",
@@ -33,9 +33,9 @@
    "@ohif/i18n": "^0.50.0",
    "@ohif/ui": "^0.50.0",
    "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "4.12.5",
-    "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.10.1",
+    "cornerstone-tools": "4.15.1",
+    "cornerstone-wado-image-loader": "^3.1.0",
+    "dcmjs": "0.16.0",
    "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.6.9",
-    "@ohif/ui": "^1.4.3",
-    "cornerstone-tools": "4.12.5",
-    "cornerstone-wado-image-loader": "^3.0.0",
+    "@ohif/core": "^2.9.12",
+    "@ohif/ui": "^1.5.1",
+    "cornerstone-tools": "4.15.1",
+    "cornerstone-wado-image-loader": "^3.1.0",
    "dicom-parser": "^1.8.3",
    "gh-pages": "^2.0.1",
    "i18next": "^17.0.3",
@@ -32,16 +32,16 @@ class LoadingIndicator extends PureComponent {
            </div>
          </div>
        ) : (
-          <div className="imageViewerLoadingIndicator loadingIndicator">
-            <div className="indicatorContents">
-              <p>
-                {this.props.t('Reformatting')}...
-                <i className="fa fa-spin fa-circle-o-notch fa-fw" />
-                {percComplete}
-              </p>
+            <div className="imageViewerLoadingIndicator loadingIndicator">
+              <div className="indicatorContents">
+                <p>
+                  {this.props.t('Loading...')}
+                  <i className="fa fa-spin fa-circle-o-notch fa-fw" />
+                  {percComplete}
+                </p>
+              </div>
            </div>
-          </div>
-        )}
+          )}
      </React.Fragment>
    );
  }
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { getReactVtkjsViewport } from './utils/getReactVtkjsViewport';
+import { getImageData, loadImageData } from 'react-vtkjs-viewport';
 import ConnectedVTKViewport from './ConnectedVTKViewport';
 import LoadingIndicator from './LoadingIndicator.js';
 import OHIF from '@ohif/core';
@@ -49,7 +49,7 @@ class OHIFVTKViewport extends Component {
  state = {
    volumes: null,
    paintFilterLabelMapImageData: null,
-    paintFilterBackgroundImageData: null,
+    paintFilterBackgroundImageData: null
  };

  static propTypes = {
@@ -133,8 +133,7 @@ class OHIFVTKViewport extends Component {
    displaySetInstanceUID,
    SOPClassUID,
    SOPInstanceUID,
-    frameIndex,
-    reactVtkjsViewport
+    frameIndex
  ) => {
    const stack = OHIFVTKViewport.getCornerstoneStack(
      studies,
@@ -145,10 +144,7 @@ class OHIFVTKViewport extends Component {
      frameIndex
    );

-    const imageDataObject = reactVtkjsViewport.getImageData(
-      stack.imageIds,
-      displaySetInstanceUID
-    );
+    const imageDataObject = getImageData(stack.imageIds, displaySetInstanceUID);
    let labelmapDataObject;
    let labelmapColorLUT;

@@ -160,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]) {
@@ -261,9 +261,7 @@ class OHIFVTKViewport extends Component {
    return volumeActor;
  }

-  async setStateFromProps() {
-    const reactVtkjsViewport = await getReactVtkjsViewport();
-
+  setStateFromProps() {
    const { studies, displaySet } = this.props.viewportData;
    const {
      StudyInstanceUID,
@@ -301,10 +299,8 @@ class OHIFVTKViewport extends Component {
      studies,
      StudyInstanceUID,
      displaySetInstanceUID,
-      sopClassUIDs[0],
      SOPInstanceUID,
-      frameIndex,
-      reactVtkjsViewport
+      frameIndex
    );

    this.imageDataObject = imageDataObject;
@@ -325,7 +321,7 @@ class OHIFVTKViewport extends Component {
        dataDetails,
      },
      () => {
-        this.loadProgressively(imageDataObject, reactVtkjsViewport);
+        this.loadProgressively(imageDataObject);

        // TODO: There must be a better way to do this.
        // We do this so that if all the data is available the react-vtkjs-viewport
@@ -343,11 +339,11 @@ class OHIFVTKViewport extends Component {
    );
  }

-  async componentDidMount() {
-    await this.setStateFromProps();
+  componentDidMount() {
+    this.setStateFromProps();
  }

-  async componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
    const { displaySet } = this.props.viewportData;
    const prevDisplaySet = prevProps.viewportData.displaySet;

@@ -357,12 +353,12 @@ class OHIFVTKViewport extends Component {
      displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
      displaySet.frameIndex !== prevDisplaySet.frameIndex
    ) {
-      await this.setStateFromProps();
+      this.setStateFromProps();
    }
  }

-  loadProgressively(imageDataObject, reactVtkjsViewport) {
-    reactVtkjsViewport.loadImageData(imageDataObject);
+  loadProgressively(imageDataObject) {
+    loadImageData(imageDataObject);

    const { isLoading, insertPixelDataPromises } = imageDataObject;

@@ -413,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}>
@@ -436,10 +428,14 @@ class OHIFVTKViewport extends Component {
              dataDetails={this.state.dataDetails}
              labelmapRenderingOptions={{
                colorLUT: this.state.labelmapColorLUT,
-                globalOpacity: opacity,
-                visible,
-                outlineThickness,
-                renderOutline: true,
+                globalOpacity: configuration.fillAlpha,
+                visible: configuration.renderFill,
+                outlineThickness: configuration.outlineWidth,
+                renderOutline: configuration.renderOutline,
+                segmentsDefaultProperties: this.segmentsDefaultProperties,
+                onNewSegmentationRequested: () => {
+                  this.setStateFromProps();
+                }
              }}
              onScroll={this.props.onScroll}
            />
@@ -1,16 +1,9 @@
 import React, { useEffect, useCallback } from 'react';
-// import { View2D } from 'react-vtkjs-viewport';
+import { View2D } from 'react-vtkjs-viewport';
 import PropTypes from 'prop-types';
-import asyncComponent from './asyncComponent.js';
-import { getReactVtkjsViewport } from './utils/getReactVtkjsViewport';

 import './VTKViewport.css';

-const View2D = asyncComponent(async () => {
-  const reactVtkjsViewport = await getReactVtkjsViewport();
-  return { default: reactVtkjsViewport.View2D };
-});
-
 const VTKViewport = props => {
  const style = { width: '100%', height: '100%', position: 'relative' };

@@ -59,7 +52,7 @@ VTKViewport.propTypes = {
 };

 VTKViewport.defaultProps = {
-  onScroll: () => { },
+  onScroll: () => {},
 };

 export default VTKViewport;
@@ -1,9 +1,17 @@
 import throttle from 'lodash.throttle';
-import { getReactVtkjsViewport } from './utils/getReactVtkjsViewport';
-
+import {
+  vtkInteractorStyleMPRCrosshairs,
+  vtkInteractorStyleMPRWindowLevel,
+  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;

@@ -29,7 +37,6 @@ const commandsModule = ({ commandsManager }) => {
    }

    const displaySet = viewportSpecificData[activeViewportIndex];
-
    let api;
    if (!api) {
      try {
@@ -94,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];
@@ -119,18 +140,129 @@ const commandsModule = ({ commandsManager }) => {

      _setView(api, [0, 1, 0], [0, 0, 1]);
    },
-    enableRotateTool: async () => {
-      const reactVtkjsViewport = await getReactVtkjsViewport();
+    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 = reactVtkjsViewport.vtkInteractorStyleMPRRotate.newInstance();
+        const istyle = vtkInteractorStyleMPRRotate.newInstance();

        api.setInteractorStyle({ istyle });
      });
    },
-    enableCrosshairsTool: async () => {
-      const reactVtkjsViewport = await getReactVtkjsViewport();
+    enableCrosshairsTool: () => {
      apis.forEach((api, apiIndex) => {
-        const istyle = reactVtkjsViewport.vtkInteractorStyleMPRCrosshairs.newInstance();
+        const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();

        api.setInteractorStyle({
          istyle,
@@ -138,7 +270,7 @@ const commandsModule = ({ commandsManager }) => {
        });
      });
    },
-    enableLevelTool: async () => {
+    enableLevelTool: () => {
      function updateVOI(apis, windowWidth, windowCenter) {
        apis.forEach(api => {
          api.updateVOI(windowWidth, windowCenter);
@@ -159,9 +291,8 @@ const commandsModule = ({ commandsManager }) => {
        },
      };

-      const reactVtkjsViewport = await getReactVtkjsViewport();
      apis.forEach(api => {
-        const istyle = reactVtkjsViewport.vtkInteractorStyleMPRWindowLevel.newInstance();
+        const istyle = vtkInteractorStyleMPRWindowLevel.newInstance();

        api.setInteractorStyle({ istyle, callbacks });
      });
@@ -258,15 +389,14 @@ const commandsModule = ({ commandsManager }) => {
      }

      // Add widgets and set default interactorStyle of each viewport.
-      const reactVtkjsViewport = await getReactVtkjsViewport();
      apis.forEach((api, apiIndex) => {
        api.addSVGWidget(
-          reactVtkjsViewport.vtkSVGCrosshairsWidget.newInstance(),
+          vtkSVGCrosshairsWidget.newInstance(),
          'crosshairsWidget'
        );

        const uid = api.uid;
-        const istyle = reactVtkjsViewport.vtkInteractorStyleMPRCrosshairs.newInstance();
+        const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();

        api.setInteractorStyle({
          istyle,
@@ -279,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'],
@@ -1,3 +1,4 @@
+import React from 'react';
 import asyncComponent from './asyncComponent.js';
 import commandsModule from './commandsModule.js';
 import toolbarModule from './toolbarModule.js';
@@ -16,7 +17,8 @@ const vtkExtension = {
  id: 'vtk',

  getViewportModule({ commandsManager }) {
-    return withCommandsManager(OHIFVTKViewport, commandsManager);
+    const ExtendedVTKViewport = props => <OHIFVTKViewport {...props} />;
+    return withCommandsManager(ExtendedVTKViewport, commandsManager);
  },
  getToolbarModule() {
    return toolbarModule;
@@ -1,5 +0,0 @@
-export function getReactVtkjsViewport() {
-  return import(
-    /* webpackChunkName: "ReactVtkjsViewport" */ 'react-vtkjs-viewport'
-  );
-}
@@ -3,6 +3,197 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [2.9.12](https://github.com/OHIF/Viewers/compare/@ohif/core@2.9.11...@ohif/core@2.9.12) (2020-07-13)
+
+
+### Bug Fixes
+
+* 🐛 - Put guards in all places that a cornerstone re-render ([#1899](https://github.com/OHIF/Viewers/issues/1899)) ([451f7ea](https://github.com/OHIF/Viewers/commit/451f7eab9258e7a193eb362e0926b13aedc4b3c9))
+
+
+
+
+
+## [2.9.11](https://github.com/OHIF/Viewers/compare/@ohif/core@2.9.10...@ohif/core@2.9.11) (2020-07-13)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.9.10](https://github.com/OHIF/Viewers/compare/@ohif/core@2.9.9...@ohif/core@2.9.10) (2020-07-13)
+
+
+### Bug Fixes
+
+* 🐛 Fix RT Panel hide/show and Fix looping load errors ([#1877](https://github.com/OHIF/Viewers/issues/1877)) ([e7cc735](https://github.com/OHIF/Viewers/commit/e7cc735c03d02eeb0d3af4ba02c15ed4f81bbec2))
+
+
+
+
+
+## [2.9.9](https://github.com/OHIF/Viewers/compare/@ohif/core@2.9.8...@ohif/core@2.9.9) (2020-06-18)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.9.8](https://github.com/OHIF/Viewers/compare/@ohif/core@2.9.7...@ohif/core@2.9.8) (2020-06-15)
+
+
+### Bug Fixes
+
+* 🐛 Disable seg panel when data for seg unavailable ([#1732](https://github.com/OHIF/Viewers/issues/1732)) ([698e900](https://github.com/OHIF/Viewers/commit/698e900b85121d3c2a46747c443ef69fb7a8c95b)), closes [#1728](https://github.com/OHIF/Viewers/issues/1728)
+
+
+
+
+
+## [2.9.7](https://github.com/OHIF/Viewers/compare/@ohif/core@2.9.6...@ohif/core@2.9.7) (2020-06-04)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.9.6](https://github.com/OHIF/Viewers/compare/@ohif/core@2.9.5...@ohif/core@2.9.6) (2020-05-14)
+
+
+### Bug Fixes
+
+* 🐛 Load default display set when no time metadata ([#1684](https://github.com/OHIF/Viewers/issues/1684)) ([f7b8b6a](https://github.com/OHIF/Viewers/commit/f7b8b6a41c4626084ef56b0fdf7363e914b143c4)), closes [#1683](https://github.com/OHIF/Viewers/issues/1683)
+
+
+
+
+
+## [2.9.5](https://github.com/OHIF/Viewers/compare/@ohif/core@2.9.4...@ohif/core@2.9.5) (2020-05-12)
+
+
+### Bug Fixes
+
+* 🐛 Fix seg color load ([#1724](https://github.com/OHIF/Viewers/issues/1724)) ([c4f84b1](https://github.com/OHIF/Viewers/commit/c4f84b1174d04ba84d37ed89b6d7ab541be28181))
+
+
+
+
+
+## [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)
+
+
+### Bug Fixes
+
+* whiteLabeling should support component creation by passing React to defined fn ([#1659](https://github.com/OHIF/Viewers/issues/1659)) ([2093a00](https://github.com/OHIF/Viewers/commit/2093a0036584b2cc698c8f06fe62b334523b1029))
+
+
+
+
+
+# [2.7.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.6.11...@ohif/core@2.7.0) (2020-04-17)
+
+
+### Features
+
+* set the authorization header for DICOMWeb requests if provided in query string ([#1646](https://github.com/OHIF/Viewers/issues/1646)) ([450c80b](https://github.com/OHIF/Viewers/commit/450c80b9d5f172be8b5713b422370360325a0afc))
+
+
+
+
+
+## [2.6.11](https://github.com/OHIF/Viewers/compare/@ohif/core@2.6.10...@ohif/core@2.6.11) (2020-04-15)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.6.10](https://github.com/OHIF/Viewers/compare/@ohif/core@2.6.9...@ohif/core@2.6.10) (2020-04-09)
+
+
+### Bug Fixes
+
+* Revert "refactor: Reduce bundle size ([#1575](https://github.com/OHIF/Viewers/issues/1575))" ([#1622](https://github.com/OHIF/Viewers/issues/1622)) ([d21af3f](https://github.com/OHIF/Viewers/commit/d21af3f133492fa31492413b8782936c9ff18b44))
+
+
+
+
+
 ## [2.6.9](https://github.com/OHIF/Viewers/compare/@ohif/core@2.6.8...@ohif/core@2.6.9) (2020-04-09)

 **Note:** Version bump only for package @ohif/core
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/core",
-  "version": "2.6.9",
+  "version": "2.9.12",
  "description": "Generic business logic for web-based medical imaging applications",
  "author": "OHIF Core Team",
  "license": "MIT",
@@ -32,15 +32,15 @@
  },
  "peerDependencies": {
    "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "4.12.5",
-    "cornerstone-wado-image-loader": "^3.0.0",
+    "cornerstone-tools": "4.15.1",
+    "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",
-    "dicomweb-client": "^0.5.2",
+    "dcmjs": "0.16.0",
+    "dicomweb-client": "^0.6.0",
    "immer": "6.0.2",
    "isomorphic-base64": "^1.0.2",
    "lodash.clonedeep": "^4.5.0",
@@ -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);
@@ -1,4 +1,4 @@
-import * as dcmjs from 'dcmjs';
+import dcmjs from 'dcmjs';

 import findInstanceMetadataBySopInstanceUID from './utils/findInstanceMetadataBySopInstanceUid';

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

 import log from '../log';
@@ -13,7 +13,7 @@ const findMostRecentStructuredReport = studies => {
      // Skip series that may not have instances yet
      // This can happen if we have retrieved just the initial
      // details about the series via QIDO-RS, but not the full metadata
-      if (!series.instances.length) {
+      if (!series.instances || !series.instances.length) {
        return;
      }

@@ -1,4 +1,4 @@
-import * as dcmjs from 'dcmjs';
+import dcmjs from 'dcmjs';

 /**
 *  Checks if dcmjs has support to determined tool
@@ -1,6 +1,3 @@
-// Commenting this out for now since it looks like Rollup is pulling in the
-// Node.js version instead of the Browser version of this package
-//import { btoa } from 'isomorphic-base64';
 import user from '../user';

 /**
@@ -18,6 +15,7 @@ export default function getAuthorizationHeader({ requestOptions } = {}) {
  // Check for OHIF.user since this can also be run on the server
  const accessToken = user && user.getAccessToken && user.getAccessToken();

+  // Auth for a specific server
  if (requestOptions && requestOptions.auth) {
    if (typeof requestOptions.auth === 'function') {
      // Custom Auth Header
@@ -26,7 +24,9 @@ export default function getAuthorizationHeader({ requestOptions } = {}) {
      // HTTP Basic Auth (user:password)
      headers.Authorization = `Basic ${btoa(requestOptions.auth)}`;
    }
-  } else if (accessToken) {
+  }
+  // Auth for the user's default
+  else if (accessToken) {
    headers.Authorization = `Bearer ${accessToken}`;
  }

@@ -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';
@@ -378,7 +378,7 @@ class MetadataProvider {
        }

        metadata = {
-          overlays
+          overlays,
        };

        break;
@@ -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,
@@ -1,10 +1,10 @@
 import cornerstone from 'cornerstone-core';
+import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
 import {
  clearStudyLoadingProgress,
  setStudyLoadingProgress,
 } from '../redux/actions';
 import StackManager from '../utils/StackManager';
-import { getCornerstoneWADOImageLoader } from '../utils/cornerstoneWADOImageLoader';

 class BaseLoadingListener {
  constructor(stack, options = {}) {
@@ -103,8 +103,7 @@ class DICOMFileLoadingListener extends BaseLoadingListener {
    this._checkCachedData();
  }

-  async _checkCachedData() {
-    const cornerstoneWADOImageLoader = await getCornerstoneWADOImageLoader();
+  _checkCachedData() {
    const dataSet = cornerstoneWADOImageLoader.wadouri.dataSetCacheManager.get(
      this._dataSetUrl
    );
@@ -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) {
@@ -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(
-    sopClassHandlerModules,
-    series,
-  ) {
+  _createDisplaySetsForSeries(sopClassHandlerModules, series) {
    const study = this;
    const displaySets = [];

@@ -137,6 +135,7 @@ export class StudyMetadata extends Metadata {
        study,
        sopClassUIDs
      );
+
      if (displaySet) {
        displaySet.sopClassModule = true;

@@ -217,6 +216,14 @@ export class StudyMetadata extends Metadata {
    // TODO -> Get x Modality by referencedSeriesInstanceUid, FoR, etc.
  }

+  /**
+   * Adds the displaySets to the studies list of derived displaySets.
+   * @param {array} displaySets The displaySets array to append to the derived displaysets list.
+   */
+  _addDerivedDisplaySets(displaySets) {
+    displaySets.map(displaySet => this._derivedDisplaySets.push(displaySet));
+  }
+
  /**
   * Returns a list of derived datasets in the study, filtered by the given filter.
   * @param {object} filter An object containing search filters
@@ -265,7 +272,7 @@ export class StudyMetadata extends Metadata {
      filteredDerivedDisplaySets = filteredDerivedDisplaySets.filter(
        displaySet =>
          displaySet.ReferencedFrameOfReferenceUID ===
-          ReferencedFrameOfReferenceUID
+          referencedFrameOfReferenceUID
      );
    }

@@ -293,14 +300,13 @@ export class StudyMetadata extends Metadata {
    }

    // Loop through the series (SeriesMetadata)
-    this.forEachSeries(
-      series => {
-         const displaySetsForSeries = this._createDisplaySetsForSeries(
-           sopClassHandlerModules,
-           series,
-         );
+    this.forEachSeries(series => {
+      const displaySetsForSeries = this._createDisplaySetsForSeries(
+        sopClassHandlerModules,
+        series
+      );

-         displaySets.push(...displaySetsForSeries);
+      displaySets.push(...displaySetsForSeries);
    });

    return sortDisplaySetList(displaySets);
@@ -321,7 +327,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 +844,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(
@@ -0,0 +1,6 @@
+// These should be overridden by the implementation
+const errorHandler = {
+  getHTTPErrorHandler: () => null,
+};
+
+export default errorHandler;
@@ -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) {
@@ -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,
@@ -24,6 +24,7 @@ describe('Top level exports', () => {
      'header',
      'cornerstone',
      'default', //
+      'errorHandler',
      'string',
      'ui',
      'user',
@@ -251,7 +251,9 @@ export default class MeasurementApi {
        this.syncMeasurementsAndToolData();

        cornerstone.getEnabledElements().forEach(enabledElement => {
-          cornerstone.updateImage(enabledElement.element);
+          if (enabledElement.image) {
+            cornerstone.updateImage(enabledElement.element);
+          }
        });

        // Let others know that the measurements are updated
@@ -0,0 +1,9 @@
+import cornerstone from 'cornerstone-core';
+
+export default function refreshCornerstoneViewports() {
+  cornerstone.getEnabledElements().forEach(enabledElement => {
+    if (enabledElement.image) {
+      cornerstone.updateImage(enabledElement.element);
+    }
+  });
+}
@@ -4,6 +4,7 @@ import log from '../../log';
 import user from '../../user';
 import getImageAttributes from '../lib/getImageAttributes';
 import getLabel from '../lib/getLabel';
+import refreshCornerstoneViewports from '../lib/refreshCornerstoneViewports';

 export default function({ eventData, tool, toolGroupId, toolGroup }) {
  const measurementApi = MeasurementApi.Instance;
@@ -86,9 +87,7 @@ export default function({ eventData, tool, toolGroupId, toolGroup }) {
  }

  // TODO: This is very hacky, but will work for now
-  cornerstone.getEnabledElements().forEach(enabledElement => {
-    cornerstone.updateImage(enabledElement.element);
-  });
+  refreshCornerstoneViewports();

  // TODO: Notify about the last activated measurement

@@ -1,6 +1,7 @@
 import cornerstone from 'cornerstone-core';
 import { MeasurementApi } from '../classes';
 import log from '../../log';
+import refreshCornerstoneViewports from '../lib/refreshCornerstoneViewports';

 export default function({ eventData, tool, toolGroupId, toolGroup }) {
  log.info('CornerstoneToolsMeasurementRemoved');
@@ -37,9 +38,7 @@ export default function({ eventData, tool, toolGroupId, toolGroup }) {
  }

  // TODO: This is very hacky, but will work for now
-  cornerstone.getEnabledElements().forEach(enabledElement => {
-    cornerstone.updateImage(enabledElement.element);
-  });
+  refreshCornerstoneViewports();

  if (MeasurementApi.isToolIncluded(tool)) {
    // TODO: Notify that viewer suffered changes
@@ -4,6 +4,7 @@ import log from '../../log';
 import user from '../../user';
 import getImageAttributes from '../lib/getImageAttributes';
 import getLabel from '../lib/getLabel';
+import refreshCornerstoneViewports from '../lib/refreshCornerstoneViewports';

 export default function handleSingleMeasurementAdded({ eventData, tool }) {
  const measurementApi = MeasurementApi.Instance;
@@ -39,9 +40,7 @@ export default function handleSingleMeasurementAdded({ eventData, tool }) {
  }

  // TODO: This is very hacky, but will work for now
-  cornerstone.getEnabledElements().forEach(enabledElement => {
-    cornerstone.updateImage(enabledElement.element);
-  });
+  refreshCornerstoneViewports();

  // TODO: Notify about the last activated measurement

@@ -1,6 +1,7 @@
 import cornerstone from 'cornerstone-core';
 import { MeasurementApi } from '../classes';
 import log from '../../log';
+import refreshCornerstoneViewports from '../lib/refreshCornerstoneViewports';

 export default function handleSingleMeasurementRemoved({
  eventData,
@@ -35,9 +36,7 @@ export default function handleSingleMeasurementRemoved({
  });

  // TODO: This is very hacky, but will work for now
-  cornerstone.getEnabledElements().forEach(enabledElement => {
-    cornerstone.updateImage(enabledElement.element);
-  });
+  refreshCornerstoneViewports();

  if (MeasurementApi.isToolIncluded(tool)) {
    // TODO: Notify that viewer suffered changes
@@ -6,11 +6,12 @@ const defaultState = {

 const servers = (state = defaultState, action) => {
  switch (action.type) {
-    case 'SET_STUDY_DATA':
-      const updatedStudyData = cloneDeep(state).studyData;
-      updatedStudyData[action.StudyInstanceUID] = action.data;
+    case 'SET_STUDY_DATA': {
+      const updatedStudyData = cloneDeep(state.studyData);
+      updatedStudyData[action.StudyInstanceUID] = cloneDeep(action.data);

      return Object.assign({}, state, { studyData: updatedStudyData });
+    }
    default:
      return state;
  }
@@ -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(
@@ -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);
@@ -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;
      }
@@ -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;
@@ -1,8 +1,8 @@
 import DICOMWeb from '../../../DICOMWeb';
 import metadataProvider from '../../../classes/MetadataProvider';
 import getWADORSImageId from '../../../utils/getWADORSImageId';
+import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
 import getReferencedSeriesSequence from './getReferencedSeriesSequence';
-import { getCornerstoneWADOImageLoader } from '../../../utils/cornerstoneWADOImageLoader';

 /**
 * Create a plain JS object that describes a study (a study descriptor object)
@@ -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,9 +160,10 @@ async function makeSOPInstance(server, study, instance) {

    const wadoRSMetadata = Object.assign(instance);

-    const cornerstoneWADOImageLoader = await getCornerstoneWADOImageLoader();
-    if (sopInstance.NumberOfFrames) {
-      for (let i = 0; i < sopInstance.NumberOfFrames; i++) {
+    const { NumberOfFrames } = sopInstance.metadata;
+
+    if (NumberOfFrames) {
+      for (let i = 0; i < NumberOfFrames; i++) {
        const wadorsImageId = getWADORSImageId(sopInstance, i);

        cornerstoneWADOImageLoader.wadors.metaDataManager.add(
@@ -191,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);
    })
  );
@@ -0,0 +1,66 @@
+
+export default class Queue {
+
+  constructor(limit) {
+    this.limit = limit;
+    this.size = 0;
+    this.awaiting = null;
+  }
+
+  /**
+   * Creates a new "proxy" function associated with the current execution queue
+   * instance. When the returned function is invoked, the queue limit is checked
+   * to make sure the limit of scheduled tasks is repected (throwing an
+   * exception when the limit has been reached and before calling the original
+   * function). The original function is only invoked after all the previously
+   * scheduled tasks have finished executing (their returned promises have
+   * resolved/rejected);
+   *
+   * @param {function} task The function whose execution will be associated
+   * with the current Queue instance;
+   * @returns {function} The "proxy" function bound to the current Queue
+   * instance;
+   */
+  bind(task) {
+    return bind(this, task);
+  }
+
+  bindSafe(task, onError) {
+    const boundTask = bind(this, task);
+    return async function safeTask(...args) {
+      try {
+        return await boundTask(...args);
+      } catch (e) {
+        onError(e);
+      }
+    };
+  }
+}
+
+/**
+ * Utils
+ */
+
+function bind(queue, task) {
+  const cleaner = clean.bind(null, queue);
+  return async function boundTask(...args) {
+    if (queue.size >= queue.limit) {
+      throw new Error('Queue limit reached');
+    }
+    const promise = chain(queue.awaiting, task, args);
+    queue.awaiting = promise.then(cleaner, cleaner);
+    queue.size++;
+    return promise;
+  };
+}
+
+function clean(queue) {
+  if (queue.size > 0 && --queue.size === 0) {
+    queue.awaiting = null;
+  }
+}
+
+async function chain(prev, task, args) {
+  await prev;
+  return task(...args);
+}
@@ -0,0 +1,66 @@
+import makeDeferred from './makeDeferred';
+import Queue from './Queue';
+
+/**
+ * Utils
+ */
+
+function timeout(delay) {
+  const { resolve, promise } = makeDeferred();
+  setTimeout(() => void resolve(Date.now()), delay);
+  return promise;
+}
+
+/**
+ * Tests
+ */
+
+describe('Queue', () => {
+  it('should bind functions to the queue', async () => {
+    const queue = new Queue(2);
+    const mockedTimeout = jest.fn(timeout);
+    const timer = queue.bind(mockedTimeout);
+    const start = Date.now();
+    timer(120).then(now => {
+      const elapsed = now - start;
+      expect(elapsed >= 120 && elapsed < 240).toBe(true);
+    });
+    const end = await timer(120);
+    expect(end - start > 240).toBe(true);
+    expect(mockedTimeout).toBeCalledTimes(2);
+  });
+  it('should prevent task execution when queue limit is reached', async () => {
+    const queue = new Queue(1);
+    const mockedTimeout = jest.fn(timeout);
+    const timer = queue.bind(mockedTimeout);
+    const start = Date.now();
+    const promise = timer(120).then(time => time - start);
+    try {
+      await timer(120);
+    } catch (e) {
+      expect(Date.now() - start < 120).toBe(true);
+      expect(e.message).toBe('Queue limit reached');
+    }
+    const elapsed = await promise;
+    expect(elapsed >= 120 && elapsed < 240).toBe(true);
+    expect(mockedTimeout).toBeCalledTimes(1);
+  });
+  it('should safely bind tasks to the queue', async () => {
+    const queue = new Queue(1);
+    const mockedErrorHandler = jest.fn();
+    const mockedTimeout = jest.fn(timeout);
+    const timer = queue.bindSafe(mockedTimeout, mockedErrorHandler);
+    const start = Date.now();
+    const promise = timer(120).then(time => time - start);
+    await timer(120);
+    expect(Date.now() - start < 120).toBe(true);
+    expect(mockedErrorHandler).toBeCalledTimes(1);
+    expect(mockedErrorHandler).nthCalledWith(
+      1,
+      expect.objectContaining({ message: 'Queue limit reached' })
+    );
+    const elapsed = await promise;
+    expect(elapsed >= 120 && elapsed < 240).toBe(true);
+    expect(mockedTimeout).toBeCalledTimes(1);
+  });
+});
@@ -1,5 +0,0 @@
-export function getCornerstoneWADOImageLoader() {
-  return import(
-    /* webpackChunkName: "CornerstoneWADOImageLoader" */ 'cornerstone-wado-image-loader'
-  );
-}
@@ -1,7 +1,9 @@
 import cornerstone from 'cornerstone-core';
+import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
 import { api } from 'dicomweb-client';
 import DICOMWeb from '../DICOMWeb';
-import { getCornerstoneWADOImageLoader } from './cornerstoneWADOImageLoader';
+
+import errorHandler from '../errorHandler';

 const getImageId = imageObj => {
  if (!imageObj) {
@@ -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);

@@ -86,7 +90,7 @@ const getImageLoaderType = imageId => {
 };

 class DicomLoaderService {
-  async getLocalData(dataset, studies) {
+  getLocalData(dataset, studies) {
    if (dataset && dataset.localFile) {
      // Use referenced imageInstance
      const imageInstance = getImageInstance(dataset);
@@ -98,7 +102,6 @@ class DicomLoaderService {
      }

      if (!someInvalidStrings(imageId)) {
-        const cornerstoneWADOImageLoader = await getCornerstoneWADOImageLoader();
        return cornerstoneWADOImageLoader.wadouri.loadFileRequest(imageId);
      }
    }
@@ -177,16 +180,16 @@ class DicomLoaderService {
    }
  }

-  async *getLoaderIterator(dataset, studies) {
-    yield await this.getLocalData(dataset, studies);
+  *getLoaderIterator(dataset, studies) {
+    yield this.getLocalData(dataset, studies);
    yield this.getDataByImageType(dataset);
    yield this.getDataByDatasetType(dataset);
  }

-  async findDicomDataPromise(dataset, studies) {
+  findDicomDataPromise(dataset, studies) {
    const loaderIterator = this.getLoaderIterator(dataset, studies);
    // it returns first valid retriever method.
-    for await (const loader of loaderIterator) {
+    for (const loader of loaderIterator) {
      if (loader) {
        return loader;
      }
@@ -0,0 +1,193 @@
+/**
+ * Constants
+ */
+
+const SEPARATOR = '/';
+
+/**
+ * API
+ */
+
+/**
+ * Add values to a list hierarchically.
+ *  @ For example:
+ *    addToList([], 'a', 'b', 'c');
+ *  will add the following hierarchy to the list:
+ *    a > b > c
+ *  resulting in the following array:
+ *    [['a', [['b', ['c']]]]]
+ * @param {Array} list The target list;
+ * @param  {...string} values The values to be hierarchically added to the list;
+ * @returns {Array} Returns the provided list possibly updated with the given
+ *  values or null when a bad list (not an actual array) is provided
+ */
+function addToList(list, ...values) {
+  if (Array.isArray(list)) {
+    if (values.length > 0) {
+      addValuesToList(list, values);
+    }
+    return list;
+  }
+  return null;
+}
+
+/**
+ * Iterates through the provided hierarchical list executing the callback
+ * once for each leaf-node of the tree. The ancestors of the leaf-node being
+ * visited are passed to the callback function along with the leaf-node in
+ * the exact same order they appear on the tree (from root to leaf);
+ *  @ For example, if the hierachy `a > b > c` appears on the tree ("a" being
+ *    the root and "c" being the leaf) the callback function will be called as:
+ *  callback('a', 'b', 'c');
+ * @param {Array} list The hierarchical list to be iterated
+ * @param {function} callback The callback which will be exected once for
+ *  each leaf-node of the hierarchical list;
+ * @returns {Array} Returns the provided list or null for bad arguments;
+ */
+function forEach(list, callback) {
+  if (Array.isArray(list)) {
+    if (typeof callback === 'function') {
+      forEachValue(list, callback);
+    }
+    return list;
+  }
+  return null;
+}
+
+/**
+ * Retrieves an item from the given hierarchical list based on an index (number)
+ * or a path (string).
+ *  @ For example:
+ *    getItem(list, '1/0/4')
+ *  will retrieve the fourth grandchild, from the first child of the second
+ *  element of the list;
+ * @param {Array} list The source list;
+ * @param {string|number} indexOrPath The index of the element inside list
+ *  (number) or the path to reach the desired element (string). The slash "/"
+ *  character is cosidered the path separator;
+ */
+function getItem(list, indexOrPath) {
+  if (Array.isArray(list)) {
+    let subpath = null;
+    let index = typeof indexOrPath === 'number' ? indexOrPath : -1;
+    if (typeof indexOrPath === 'string') {
+      const separator = indexOrPath.indexOf(SEPARATOR);
+      if (separator > 0) {
+        index = parseInt(indexOrPath.slice(0, separator), 10);
+        if (separator + 1 < indexOrPath.length) {
+          subpath = indexOrPath.slice(separator + 1, indexOrPath.length);
+        }
+      } else {
+        index = parseInt(indexOrPath, 10);
+      }
+    }
+    if (index >= 0 && index < list.length) {
+      const item = list[index];
+      if (isSublist(item)) {
+        if (subpath !== null) {
+          return getItem(item[1], subpath);
+        }
+        return item[0];
+      }
+      return item;
+    }
+  }
+}
+
+/**
+ * Pretty-print the provided hierarchical list;
+ * @param {Array} list The source list;
+ * @returns {string} The textual representation of the hierarchical list;
+ */
+function print(list) {
+  let text = '';
+  if (Array.isArray(list)) {
+    let prev = [];
+    forEachValue(list, function(...args) {
+      let prevLen = prev.length;
+      for (let i = 0, l = args.length; i < l; ++i) {
+        if (i < prevLen && args[i] === prev[i]) {
+          continue;
+        }
+        text += '  '.repeat(i) + args[i] + '\n';
+      }
+      prev = args;
+    });
+  }
+  return text;
+}
+
+/**
+ * Utils
+ */
+
+function forEachValue(list, callback) {
+  for (let i = 0, l = list.length; i < l; ++i) {
+    let item = list[i];
+    if (isSublist(item)) {
+      if (item[1].length > 0) {
+        forEachValue(item[1], callback.bind(null, item[0]));
+        continue;
+      }
+      item = item[0];
+    }
+    callback(item);
+  }
+}
+
+function addValuesToList(list, values) {
+  let value = values.shift();
+  let index = add(list, value);
+  if (index >= 0) {
+    if (values.length > 0) {
+      let sublist = list[index];
+      if (!isSublist(sublist)) {
+        sublist = toSublist(value);
+        list[index] = sublist;
+      }
+      return addValuesToList(sublist[1], values);
+    }
+    return true;
+  }
+  return false;
+}
+
+function add(list, value) {
+  let index = find(list, value);
+  if (index === -2) {
+    index = list.push(value) - 1;
+  }
+  return index;
+}
+
+function find(list, value) {
+  if (typeof value === 'string') {
+    for (let i = 0, l = list.length; i < l; ++i) {
+      let item = list[i];
+      if (item === value || (isSublist(item) && item[0] === value)) {
+        return i;
+      }
+    }
+    return -2;
+  }
+  return -1;
+}
+
+function isSublist(subject) {
+  return (
+    Array.isArray(subject) &&
+    subject.length === 2 &&
+    typeof subject[0] === 'string' &&
+    Array.isArray(subject[1])
+  );
+}
+
+function toSublist(value) {
+  return [value + '', []];
+}
+
+/**
+ * Exports
+ */
+
+export { addToList, getItem, forEach, print };
@@ -0,0 +1,96 @@
+import { addToList, forEach, getItem, print } from './hierarchicalListUtils';
+
+describe('hierarchicalListUtils', function() {
+  let sharedList;
+
+  beforeEach(function() {
+    sharedList = [
+      ['1.2.3.1', ['1.2.3.1.1', '1.2.3.1.2']],
+      '1.2.3.2',
+      ['1.2.3.3', ['1.2.3.3.1', ['1.2.3.3.2', ['1.2.3.3.2.1', '1.2.3.3.2.2']]]],
+    ];
+  });
+
+  describe('getItem', function() {
+    it('should retrieve elements from a list by index', function() {
+      expect(getItem(sharedList, 0)).toBe('1.2.3.1');
+      expect(getItem(sharedList, 1)).toBe('1.2.3.2');
+      expect(getItem(sharedList, 2)).toBe('1.2.3.3');
+      expect(getItem(sharedList, 3)).toBeUndefined();
+    });
+    it('should retrieve elements from a list by path', function() {
+      expect(getItem(sharedList, '0')).toBe('1.2.3.1');
+      expect(getItem(sharedList, '0/0')).toBe('1.2.3.1.1');
+      expect(getItem(sharedList, '0/1')).toBe('1.2.3.1.2');
+      expect(getItem(sharedList, '0/2')).toBeUndefined();
+      expect(getItem(sharedList, '1')).toBe('1.2.3.2');
+      expect(getItem(sharedList, '2')).toBe('1.2.3.3');
+      expect(getItem(sharedList, '2/0')).toBe('1.2.3.3.1');
+      expect(getItem(sharedList, '2/1')).toBe('1.2.3.3.2');
+      expect(getItem(sharedList, '2/2')).toBeUndefined();
+      expect(getItem(sharedList, '2/1/0')).toBe('1.2.3.3.2.1');
+      expect(getItem(sharedList, '2/1/1')).toBe('1.2.3.3.2.2');
+      expect(getItem(sharedList, '2/1/2')).toBeUndefined();
+      expect(getItem(sharedList, '3')).toBeUndefined();
+    });
+  });
+
+  describe('addToList', function() {
+    it('should support adding elements to a list hierarchically', function() {
+      const list = [];
+      addToList(list, '1.2.3.1', '1.2.3.1.1');
+      addToList(list, '1.2.3.1', '1.2.3.1.2');
+      addToList(list, '1.2.3.2');
+      addToList(list, '1.2.3.3', '1.2.3.3.1');
+      addToList(list, '1.2.3.3', '1.2.3.3.2', '1.2.3.3.2.1');
+      addToList(list, '1.2.3.3', '1.2.3.3.2', '1.2.3.3.2.2');
+      expect(list).toStrictEqual(sharedList);
+    });
+    it('should change leaf nodes into non-leaf nodes', function() {
+      const listw = [];
+      const listx = [['x.1', ['x.1.1', 'x.1.2']], 'x.2'];
+      const listy = [
+        ['x.1', [['x.1.1', ['x.1.1.1']], 'x.1.2']],
+        ['x.2', ['x.2.1']],
+      ];
+      addToList(listw, 'x.1');
+      addToList(listw, 'x.1', 'x.1.1');
+      addToList(listw, 'x.1', 'x.1.2');
+      addToList(listw, 'x.2');
+      expect(listw).toStrictEqual(listx);
+      addToList(listw, 'x.2', 'x.2.1');
+      addToList(listw, 'x.1', 'x.1.1', 'x.1.1.1');
+      expect(listw).toStrictEqual(listy);
+    });
+  });
+
+  describe('forEach', function() {
+    it('should iterate through all leaf nodes of the tree', function() {
+      const fn = jest.fn();
+      forEach(sharedList, fn);
+      expect(fn).toHaveBeenCalledTimes(6);
+      expect(fn).nthCalledWith(1, '1.2.3.1', '1.2.3.1.1');
+      expect(fn).nthCalledWith(2, '1.2.3.1', '1.2.3.1.2');
+      expect(fn).nthCalledWith(3, '1.2.3.2');
+      expect(fn).nthCalledWith(4, '1.2.3.3', '1.2.3.3.1');
+      expect(fn).nthCalledWith(5, '1.2.3.3', '1.2.3.3.2', '1.2.3.3.2.1');
+      expect(fn).nthCalledWith(6, '1.2.3.3', '1.2.3.3.2', '1.2.3.3.2.2');
+    });
+  });
+
+  describe('print', function() {
+    it('should pretty-print the hierarchical list', function() {
+      expect(print(sharedList)).toBe(
+        '1.2.3.1\n' +
+          '  1.2.3.1.1\n' +
+          '  1.2.3.1.2\n' +
+          '1.2.3.2\n' +
+          '1.2.3.3\n' +
+          '  1.2.3.3.1\n' +
+          '  1.2.3.3.2\n' +
+          '    1.2.3.3.2.1\n' +
+          '    1.2.3.3.2.2\n'
+      );
+    });
+  });
+});
@@ -10,8 +10,14 @@ import DicomLoaderService from './dicomLoaderService.js';
 import b64toBlob from './b64toBlob.js';
 import loadAndCacheDerivedDisplaySets from './loadAndCacheDerivedDisplaySets.js';
 import * as urlUtil from './urlUtil';
+import makeDeferred from './makeDeferred';
 import makeCancelable from './makeCancelable';
 import hotkeys from './hotkeys';
+import Queue from './Queue';
+import isDicomUid from './isDicomUid';
+import resolveObjectPath from './resolveObjectPath';
+import * as hierarchicalListUtils from './hierarchicalListUtils';
+import * as progressTrackingUtils from './progressTrackingUtils';

 const utils = {
  guid,
@@ -26,8 +32,14 @@ const utils = {
  DicomLoaderService,
  urlUtil,
  loadAndCacheDerivedDisplaySets,
+  makeDeferred,
  makeCancelable,
  hotkeys,
+  Queue,
+  isDicomUid,
+  resolveObjectPath,
+  hierarchicalListUtils,
+  progressTrackingUtils,
 };

 export {
@@ -43,8 +55,14 @@ export {
  DicomLoaderService,
  urlUtil,
  loadAndCacheDerivedDisplaySets,
+  makeDeferred,
  makeCancelable,
  hotkeys,
+  Queue,
+  isDicomUid,
+  resolveObjectPath,
+  hierarchicalListUtils,
+  progressTrackingUtils,
 };

 export default utils;
@@ -15,8 +15,14 @@ describe('Top level exports', () => {
      'loadAndCacheDerivedDisplaySets',
      'DicomLoaderService',
      'urlUtil',
+      'makeDeferred',
      'makeCancelable',
      'hotkeys',
+      'Queue',
+      'isDicomUid',
+      'resolveObjectPath',
+      'hierarchicalListUtils',
+      'progressTrackingUtils',
    ].sort();

    const exports = Object.keys(utils.default).sort();
@@ -0,0 +1,4 @@
+export default function isDicomUid(subject) {
+  const regex = /^\d+(?:\.\d+)*$/;
+  return typeof subject === 'string' && regex.test(subject.trim());
+}
@@ -0,0 +1,16 @@
+import isDicomUid from './isDicomUid';
+
+describe('isDicomUid', function() {
+  it('should return true for valid DICOM UIDs', function() {
+    expect(isDicomUid('1')).toBe(true);
+    expect(isDicomUid('1.2')).toBe(true);
+    expect(isDicomUid('1.2.3')).toBe(true);
+    expect(isDicomUid('1.2.3.4')).toBe(true);
+  });
+  it('should return false for invalid DICOM UIDs', function() {
+    expect(isDicomUid('x')).toBe(false);
+    expect(isDicomUid('1.')).toBe(false);
+    expect(isDicomUid('1. 2')).toBe(false);
+    expect(isDicomUid('1.2.n.4')).toBe(false);
+  });
+});
@@ -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
@@ -80,15 +82,20 @@ const loadAndCacheDerivedDisplaySets = (referencedDisplaySet, studies) => {
  // For each type, see if any are loaded, if not load the most recent.
  Object.keys(displaySetsPerModality).forEach(key => {
    const displaySets = displaySetsPerModality[key];
+
    const isLoaded = displaySets.some(displaySet => displaySet.isLoaded);

    if (isLoaded) {
      return;
    }

+    if (displaySets.some(displaySet => displaySet.loadError)) {
+      return;
+    }
+
    // find most recent and load it.
    let recentDateTime = 0;
-    let recentDisplaySet;
+    let recentDisplaySet = displaySets[0];

    displaySets.forEach(displaySet => {
      const dateTime = Number(
@@ -100,8 +107,12 @@ const loadAndCacheDerivedDisplaySets = (referencedDisplaySet, studies) => {
      }
    });

-    recentDisplaySet.load(referencedDisplaySet, studies);
+    recentDisplaySet.isLoading = true;
+
+    promises.push(recentDisplaySet.load(referencedDisplaySet, studies));
  });
+
+  return promises;
 };

 export default loadAndCacheDerivedDisplaySets;
@@ -0,0 +1,7 @@
+export default function makeDeferred() {
+  let reject, resolve, promise = new Promise(function (res, rej) {
+    resolve = res;
+    reject = rej;
+  });
+  return Object.freeze({ promise, resolve, reject });
+}
@@ -0,0 +1,14 @@
+import makeDeferred from './makeDeferred';
+
+describe('makeDeferred', () => {
+  it('should provide a promise to be resolved externally', () => {
+    const deferred = makeDeferred();
+    setTimeout(() => void deferred.resolve('Yay!'));
+    return deferred.promise.then(result => void expect(result).toBe('Yay!'));
+  });
+  it('should provide a promise to be rejected externally', () => {
+    const deferred = makeDeferred();
+    setTimeout(() => void deferred.reject('Oops...'));
+    return deferred.promise.catch(error => void expect(error).toBe('Oops...'));
+  });
+});
@@ -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)
-      } else if (instance[OverlayDataTag] && instance[OverlayDataTag].BulkDataURI) {
+        instance[OverlayDataTag] = unpackOverlay(arraybuffer);
+      } else if (
+        instance[OverlayDataTag] &&
+        instance[OverlayDataTag].BulkDataURI
+      ) {
        OverlayDataPromises.push(
          _getOverlayData(instance[OverlayDataTag], server)
        );
        OverlayDataTags.push(OverlayDataTag);
-      } else if (instance[OverlayDataTag] && instance[OverlayDataTag] instanceof ArrayBuffer) {
-        instance[OverlayDataTag] = unpackOverlay(instance[OverlayDataTag])
+      } else if (
+        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);
 }
-
-
@@ -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++) {
-        lut[i] = readUInt16(byteArray, i * 2);
-      }
-    } else {
-      for (let i = 0; i < numLutEntries; i++) {
-        lut[i] = byteArray[i];
-      }
+    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)
+    );
  }
 }
Author	SHA1	Message	Date
ohif-bot	d870ac914a	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.8.4 - @ohif/extension-dicom-rt@0.2.5 - @ohif/extension-vtk@1.6.7 - @ohif/core@2.9.12 - @ohif/viewer@4.2.11	2020-07-13 16:03:44 +00:00
James Petts	451f7eab92	fix: 🐛 - Put guards in all places that a cornerstone re-render (#1899 ) * fix: 🐛 - Put guards in all places that a cornerstone re-render	2020-07-13 18:02:23 +02:00
ohif-bot	029f8af4c7	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.8.3 - @ohif/extension-dicom-html@1.2.4 - @ohif/extension-dicom-rt@0.2.4 - @ohif/extension-dicom-segmentation@0.3.3 - @ohif/extension-vtk@1.6.6 - @ohif/core@2.9.11 - @ohif/viewer@4.2.10	2020-07-13 15:37:54 +00:00
James Petts	b1b4c8c861	IDC 1856 - Update dcmjs version to prevent failed naturalization of some DICOM instances. (#1898 ) * fix: 🐛 Fix RT Panel hide/show * Prevent infinite loop by persisting load errors on displaySet. * fix: 🐛 Fix infinite error messages * Fix unit tests. * WIP * fix: 🐛 If no contours for structure, cleanly exit and notify ✅ Closes: #1892 * Update dcmjs to solve issue. * fix: 🐛 Update dcmjs to solve end of file issue	2020-07-13 17:35:55 +02:00
ohif-bot	cdde2af224	chore(release): publish [skip ci] - @ohif/extension-dicom-rt@0.2.3 - @ohif/viewer@4.2.9	2020-07-13 14:30:47 +00:00
James Petts	4a2922dda0	Idc 1892 (#1896 ) * fix: 🐛 Fix RT Panel hide/show * Prevent infinite loop by persisting load errors on displaySet. * fix: 🐛 Fix infinite error messages * Fix unit tests. * WIP * fix: 🐛 If no contours for structure, cleanly exit and notify ✅ Closes: #1892	2020-07-13 16:29:29 +02:00
ohif-bot	b6b5a8414f	chore(release): publish [skip ci] - @ohif/extension-dicom-rt@0.2.2 - @ohif/extension-dicom-segmentation@0.3.2 - @ohif/extension-vtk@1.6.5 - @ohif/core@2.9.10 - @ohif/viewer@4.2.8	2020-07-13 12:53:22 +00:00
James Petts	e7cc735c03	fix: 🐛 Fix RT Panel hide/show and Fix looping load errors (#1877 ) * fix: 🐛 Fix RT Panel hide/show * Prevent infinite loop by persisting load errors on displaySet. * fix: 🐛 Fix infinite error messages * Fix unit tests. * comment out reamining MRSTUDY line	2020-07-13 14:51:33 +02:00
Danny Brown	6121bdcf63	Merge pull request #1828 from Aurelius333/patch-1 Fix README.md Quick Start Deployment instructions	2020-06-30 10:59:20 -04:00
Aurelius333	da70079675	Fix README.md Quick Start Deployment instructions Change `window.OHIFStandaloneViewer` to `window.OHIFViewer`, since the former is undefined	2020-06-29 00:31:45 -04:00
ohif-bot	9089875ca7	chore(release): publish [skip ci] - @ohif/extension-dicom-p10-downloader@0.1.2 - @ohif/viewer@4.2.7	2020-06-18 09:01:18 +00:00
Rodrigo AntinarelliandJames Petts	b4627ecfa3	Feat/1746 idc dev tool (#1778 ) * feat: Create downloadAndUploadStudy method * create upload handler to store instances in another server * refactor and create reusable method to download buffers * fix: e2e studies amount searching by Modality * fix destructuring * fix dataset and log info * split instances to send multiple storeInstances calls * minor refactor progress * fix e2e * replace error message for upload Co-authored-by: James Petts <jamesapetts@gmail.com>	2020-06-18 10:59:07 +02:00
ohif-bot	4ede8a525a	chore(release): publish [skip ci] - @ohif/extension-vtk@1.6.4 - @ohif/core@2.9.9 - @ohif/viewer@4.2.6	2020-06-18 07:28:48 +00:00
Rodrigo Antinarelli	2c23818c86	Fix: #1776 - Segmentations not loading (#1795 ) * temp comments analyze * fix: cache derivedDisplaySets * replace const * minor refactor * fix e2e inconsistent value * increase e2e timeout	2020-06-18 09:24:39 +02:00
ohif-bot	fa4b03d62d	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.8.2 - @ohif/extension-dicom-html@1.2.3 - @ohif/extension-dicom-rt@0.2.1 - @ohif/extension-dicom-segmentation@0.3.1 - @ohif/extension-vtk@1.6.3 - @ohif/core@2.9.8 - @ohif/viewer@4.2.5	2020-06-15 15:44:36 +00:00
Igor OctavianoandJames Petts	698e900b85	fix: 🐛 Disable seg panel when data for seg unavailable (#1732 ) * Add disable state for invalid data * fix: 🐛 Disable seg panel when data for seg unavailable We need to gracefully handle errors if data for segmentation is unavailable and disable the segmentation panel ✅ Closes: #1728 * Bump dcmjs version dcmjs * @ohif/core: ^0.12.2 → ^0.13.0 * @ohif/extension-cornerstone: ^0.12.3 → ^0.13.0 * @ohif/extension-dicom-html: ^0.12.3 → ^0.13.0 * @ohif/extension-dicom-rt: ^0.12.3 → ^0.13.0 * @ohif/extension-dicom-segmentation: ^0.12.2 → ^0.13.0 * @ohif/extension-vtk: ^0.12.2 → ^0.13.0 * @ohif/viewer: ^0.12.2 → ^0.13.0 * Remove error barrier * Fix e2e Co-authored-by: James Petts <jamesapetts@gmail.com>	2020-06-15 17:41:36 +02:00
ohif-bot	b7d47383c5	chore(release): publish [skip ci] - @ohif/viewer@4.2.4	2020-06-15 12:47:19 +00:00
Rodrigo AntinarelliandJames Petts	6123741765	fix: OIDC Redirect erases query parameters (#1773 ) * fix: OIDC Redirect erases query parameters * prevent issues Co-authored-by: James Petts <jamesapetts@gmail.com>	2020-06-15 14:43:10 +02:00
ohif-bot	ab25be3520	chore(release): publish [skip ci] - @ohif/extension-vtk@1.6.2 - @ohif/ui@1.5.1 - @ohif/viewer@4.2.3	2020-06-05 16:03:56 +00:00
Rodrigo AntinarelliandJames Petts	950a54c704	Feat/1767 error boundary stack trace (#1772 ) * feat: ErrorBoundary collapsed stack trace * button styles * Change "Toggle stack trace" to "Stack Trace" Co-authored-by: James Petts <jamesapetts@gmail.com>	2020-06-05 18:00:36 +02:00
ohif-bot	4293c073f0	chore(release): publish [skip ci] - @ohif/extension-dicom-p10-downloader@0.1.1 - @ohif/extension-vtk@1.6.1 - @ohif/core@2.9.7 - @ohif/viewer@4.2.2	2020-06-04 11:02:53 +00:00
Emanuel Fiuza de OliveiraandJames Petts	62a2cd5ff3	Fix: #1130 Fixing support for download of an entire study (#1753 ) Co-authored-by: James Petts <jamesapetts@gmail.com>	2020-06-04 13:01:05 +02:00
ohif-bot	2d827c2a49	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.8.1 - @ohif/viewer@4.2.1	2020-06-04 10:27:47 +00:00
Igor OctavianoandJames Petts	a8305772d0	fix: 🐛 Infinite frame index change when quickly jumping between (#1734 ) * Remove debounce and use react-cornerstone-viewport native debounce time * fix: 🐛 Infinite frame index change when quickly jumping between This change removes the debounced callback function from the app and instead uses the native debounce time from react-cornerstone-viewport. This change allows the application to set its state in a more controled way. ✅ Closes: #1733 * Bump rcv version Co-authored-by: James Petts <jamesapetts@gmail.com>	2020-06-04 12:25:19 +02:00
ohif-bot	eab115e70c	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.8.0 - @ohif/extension-dicom-microscopy@0.51.0 - @ohif/extension-dicom-rt@0.2.0 - @ohif/extension-dicom-segmentation@0.3.0 - @ohif/extension-vtk@1.6.0 - @ohif/ui@1.5.0 - @ohif/viewer@4.2.0	2020-06-04 09:54:24 +00:00
Rodrigo Antinarelli igoroctaviano James A. Petts	c02b232b0c	feat: 🎸 1729 - error boundary wrapper (#1764 ) * Add error boundaries * Fix PWA e2e. * feat: ErrorBoundaryDialog * replace component to use ErrorBoundaryDialog * add proptypes * fix context * remove ErrorBoundary from extensions Co-authored-by: igoroctaviano <igoroctaviano@gmail.com> Co-authored-by: James A. Petts <jamesapetts@gmail.com>	2020-06-04 11:52:30 +02:00
ohif-bot	f01640d009	chore(release): publish [skip ci] - @ohif/viewer@4.1.0	2020-05-15 18:59:23 +00:00
Steve Pieperanddannyrb	63fd65690c	feat: expose some app internals as window.app (#1735 ) * feat: expose some app internals as window.app This can help developers explore and access some internal functionaltiy for debugging in the console. For example, this command can download the currently viewed study: ohif.app.commandsManager.runCommand("downloadAndZip", {listOfUIDs: [window.location.href.split("/").pop()]}) TODO: collect this example and other handy functions on a wiki page Co-authored-by: dannyrb <danny.ri.brown@gmail.com> * fix: typo in window.ohif.app assignment Co-authored-by: dannyrb <danny.ri.brown@gmail.com>	2020-05-15 14:55:54 -04:00
ohif-bot	944afe4a3e	chore(release): publish [skip ci] - @ohif/viewer@4.0.0	2020-05-14 14:24:17 +00:00
Igor OctavianoandJames Petts	b1678ce639	fix: 🐛 Fix race condition when loading derived display sets (#1718 ) When we have multiple SEGs/RTSTRUCTs we intend to load the most recent by default. BREAKING CHANGE: 🧨 However we start to load once the first set of metadata arrives. We need to wait until all series metadata is fetched. ✅ Closes: #1715 Co-authored-by: James Petts <jamesapetts@gmail.com>	2020-05-14 16:20:23 +02:00
ohif-bot	39937cca08	chore(release): publish [skip ci] - @ohif/extension-dicom-rt@0.1.4 - @ohif/extension-vtk@1.5.6 - @ohif/core@2.9.6 - @ohif/viewer@3.11.11	2020-05-14 11:53:42 +00:00
Igor OctavianoandJames Petts	f7b8b6a41c	fix: 🐛 Load default display set when no time metadata (#1684 ) * fix: 🐛 Load default display set when no time metadata Load default displayset (first item in the array) when no series date or series time availalbe ✅ Closes: #1683 * Add batch update * Fix tests. Co-authored-by: James Petts <jamesapetts@gmail.com>	2020-05-14 13:51:57 +02:00
ohif-bot	79fe442293	chore(release): publish [skip ci] - @ohif/viewer@3.11.10	2020-05-13 14:03:09 +00:00
Danny Brown	875238e5b0	chore: add fuzzymatching to default server configs Add fuzzymatching to default server configs	2020-05-13 10:00:55 -04:00
Erik Ziegler	d2d3ca2828	Add fuzzymatching to default server configs	2020-05-13 15:58:29 +02:00
ohif-bot	cebea832a3	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.7.3 - @ohif/extension-dicom-rt@0.1.3 - @ohif/extension-dicom-segmentation@0.2.6 - @ohif/extension-vtk@1.5.5 - @ohif/core@2.9.5 - @ohif/viewer@3.11.9	2020-05-12 14:49:58 +00:00
James Petts	c4f84b1174	fix: 🐛 Fix seg color load (#1724 )	2020-05-12 16:47:35 +02:00
ohif-bot	f9fe4232e7	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	2020-05-06 17:20:22 +00:00
Igor Octaviano	42c22df1b6	Segmentation UI for VTKjs (#1685 ) * Add single viewport configuration * Multiple viewport configuration * Improve performance by using independent set methods * Add jump to slice command * Add context configuration * Cache panel visibility * Fix sync between vtk and cornerstone * Remove apis index * Add approach * Add loading to update volumes * Fix broken configuration * Bump vtk version * Use loading label * Update cy tests after vtk loading label changed * Remove loading for segs	2020-05-06 19:17:44 +02:00
ohif-bot	19a8e71317	chore(release): publish [skip ci] - @ohif/extension-dicom-segmentation@0.2.4 - @ohif/viewer@3.11.7	2020-05-04 14:46:58 +00:00
James Petts	fa95bae6ef	Support initialization of segment color from RecommendedDisplayCIELabValue (#1709 ) * fix: 🐛 Proper error handling for derived display sets * Revert idc.js change * Load correct Segment colors.	2020-05-04 16:43:09 +02:00
ohif-bot	8a20a0526e	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.7.2 - @ohif/extension-dicom-html@1.2.2 - @ohif/extension-dicom-rt@0.1.2 - @ohif/extension-dicom-segmentation@0.2.3 - @ohif/extension-vtk@1.5.3 - @ohif/core@2.9.3 - @ohif/ui@1.4.4 - @ohif/viewer@3.11.6	2020-05-04 14:15:22 +00:00
James Petts	5b20d8f323	fix: 🐛 Proper error handling for derived display sets (#1708 ) * fix: 🐛 Proper error handling for derived display sets * Revert idc.js change	2020-05-04 16:10:39 +02:00
ohif-bot	9ea37a2201	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.7.1 - @ohif/viewer@3.11.5	2020-05-04 12:37:30 +00:00
Igor OctavianoandJames Petts	2a66e175df	Update viewport state after moving the stack (#1645 ) * Update viewport state after moving the stack * Only trigger new imagecallback if index bigger than 0 * Fix cornerstone viewport version Co-authored-by: James Petts <jamesapetts@gmail.com>	2020-05-04 14:30:51 +02:00
ohif-bot	77a421cdc0	chore(release): publish [skip ci] - @ohif/extension-vtk@1.5.2 - @ohif/core@2.9.2 - @ohif/viewer@3.11.4	2020-05-04 08:15:19 +00:00
Sanders DeNardiandSanders DeNardi	7033886697	fix: use bit-appropriate array for palette lookup tables (#1698 ) Co-authored-by: Sanders DeNardi <sdenardi@summusglobal.com>	2020-05-04 10:13:04 +02:00
ohif-bot	256563d7ee	chore(release): publish [skip ci] - @ohif/viewer@3.11.3	2020-04-29 12:56:38 +00:00
Erik Ziegler	f7162ce617	fix: Add IHEInvokeImageDisplay routes back into viewer (#1695 )	2020-04-29 08:54:40 -04:00
ohif-bot	027ef4f93c	chore(release): publish [skip ci] - @ohif/extension-dicom-html@1.2.1 - @ohif/extension-dicom-rt@0.1.1 - @ohif/extension-dicom-segmentation@0.2.2 - @ohif/extension-vtk@1.5.1 - @ohif/core@2.9.1 - @ohif/viewer@3.11.2	2020-04-28 10:52:19 +00:00
Khalid Williams	f09ebbe2e8	chore: cleanup dcmjs imports * Update imports in /platform * Update dcmjs imports in /extentions	2020-04-28 06:49:57 -04:00
David Connaughtonandeolasd	51b4e60161	docs: updated deployment section with info for using JSON (#1676 ) * update deploy section with non-dicomweb info * fix typo and add info re. case sensitive json * Add CORS info and reformat inline links Co-authored-by: eolasd <pacsradwp@gmail.com>	2020-04-27 16:11:35 -04:00
ohif-bot	08de987711	chore(release): publish [skip ci] - @ohif/extension-dicom-segmentation@0.2.1 - @ohif/viewer@3.11.1	2020-04-27 08:41:40 +00:00
Igor Octaviano	20e366ffbd	fix: 🐛 Dropdown not updating when selecting segment (#1675 ) Observe selectedSegmentation changes to refresh segment list ✅ Closes: #1669	2020-04-27 10:39:11 +02:00
ohif-bot	561911056a	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.7.0 - @ohif/extension-dicom-html@1.2.0 - @ohif/extension-dicom-rt@0.1.0 - @ohif/extension-dicom-segmentation@0.2.0 - @ohif/extension-vtk@1.5.0 - @ohif/core@2.9.0 - @ohif/viewer@3.11.0	2020-04-24 10:29:19 +00:00
Igor OctavianoandJames Petts	835f64d47a	feat: 🎸 Seg jump to slice + show/hide * Add segment part 2 (jump to frame and visibility toggle) * Cr updates * Filter displaysets with images * feat: 🎸 Seg jump to slice + show/hide Co-authored-by: James Petts <jamesapetts@gmail.com>	2020-04-24 12:25:05 +02:00
ohif-bot	fc40d84092	chore(release): publish [skip ci] - @ohif/viewer@3.10.2	2020-04-23 16:20:51 +00:00
Danny Brown	709f14708e	fix: undefined `errorHandler` in cornerstoneWadoImageLoader configuration (#1664 )	2020-04-23 12:17:49 -04:00
ohif-bot	5f4c4ab5e7	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.6.1 - @ohif/extension-vtk@1.4.1 - @ohif/core@2.8.1 - @ohif/viewer@3.10.1	2020-04-23 10:04:47 +00:00
James Petts	71205618ec	fix: 🐛 Multiframe fix (#1661 )	2020-04-23 12:02:51 +02:00
ohif-bot	5014ba864b	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.6.0 - @ohif/extension-dicom-p10-downloader@0.1.0 - @ohif/extension-vtk@1.4.0 - @ohif/core@2.8.0 - @ohif/viewer@3.10.0	2020-04-23 02:06:44 +00:00
James Pettsanddannyrb	e96205de35	feat: configuration to hook into XHR Error handling * Error handling. * Fix error handling, add redirect example. * remove debugger * docs: whitelabeling and httpErrorHandler * bump dicomweb-client version * bump cornerstone-wado-image-loader version * Add more documentation around httpErrorHandler callback * test: add errorHandler as an expected top level export Co-authored-by: dannyrb <danny.ri.brown@gmail.com>	2020-04-22 22:01:34 -04:00
ohif-bot	273f31ad56	chore(release): publish [skip ci] - @ohif/extension-vtk@1.3.14 - @ohif/core@2.7.1 - @ohif/viewer@3.9.2	2020-04-22 20:19:12 +00:00
Danny Brown	2093a00365	fix: whiteLabeling should support component creation by passing React to defined fn (#1659 )	2020-04-22 16:16:53 -04:00
dependabot[bot]	b1dad6b61b	chore(deps): bump https-proxy-agent from 2.2.1 to 2.2.4 in /docs/latest (#1641 ) Bumps [https-proxy-agent](https://github.com/TooTallNate/node-https-proxy-agent) from 2.2.1 to 2.2.4. - [Release notes](https://github.com/TooTallNate/node-https-proxy-agent/releases) - [Commits](https://github.com/TooTallNate/node-https-proxy-agent/compare/2.2.1...2.2.4) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2020-04-18 22:05:44 -04:00
ohif-bot	3a587f4e4b	chore(release): publish [skip ci] - @ohif/viewer@3.9.1	2020-04-17 16:28:57 +00:00
Danny Brown	d9fc7bbb0e	fix: `showStudyList` config (#1647 ) * fix: `showStudyList` config * showStudyList should default to true if not defined	2020-04-17 12:26:09 -04:00
ohif-bot	b0cfc45f83	chore(release): publish [skip ci] - @ohif/extension-vtk@1.3.13 - @ohif/core@2.7.0 - @ohif/viewer@3.9.0	2020-04-17 14:16:04 +00:00
Danny Brown	450c80b9d5	feat: set the authorization header for DICOMWeb requests if provided in query string (#1646 )	2020-04-17 10:14:13 -04:00
ohif-bot	d3eefb50f5	chore(release): publish [skip ci] - @ohif/extension-dicom-p10-downloader@0.0.2 - @ohif/extension-vtk@1.3.12 - @ohif/core@2.6.11 - @ohif/viewer@3.8.21	2020-04-15 17:00:38 +00:00
Emanuel Fiuza de OliveiraandJames Petts	29d4955980	Feat #1130 [WIP] Adding support for downloading and zipping files (#1501 ) * Feat #1130 Adding support for downloading and zipping files @ This is a combination of 12 commits. - Feat #1130 Initial Commit - Feat #1130 Adding support for hierachical lists - Feat #1130 [WIP] Adding support for downloading and zipping files - Feat #1130 Adding support for hierarchical folder structure study, series, instances on generated zip file - Feat #1130 Adding unit tests and addressing code review feedbacks - Feat #1130 POC (adding module to support on progress handling) - Feat #1130 Improving logic from progress tracking utils - Feat #1130 Renaming module with progress tracking utils - Feat #1130 Beta version of Progress Tracking utils - Feat #1130 Adding unit tests for Progress Tracking Utils - Feat #1130 Documenting public methods from progress tracking utils module - Feat #1130 Adding support for download and zip progress reporting * Feat #1130 Addressing code review feedback * Feat #1130 Preventing multiple downloads from executing at once * Feat #1130 Improving error message for concurrent downloads * Remove downloadAndZipSeriesOnViewports Co-authored-by: James Petts <jamesapetts@gmail.com>	2020-04-15 18:57:57 +02:00
Nisal Upendra	2412c08595	docs: Embedding in existing react App (#1626 ) Added how to embed OHIF viewer in an existing React application	2020-04-10 08:28:37 -04:00
ohif-bot	d769e5c296	chore(release): publish [skip ci] - @ohif/extension-vtk@1.3.11 - @ohif/core@2.6.10 - @ohif/viewer@3.8.20	2020-04-09 11:08:07 +00:00
Danny Brown	d21af3f133	fix: Revert "refactor: Reduce bundle size (#1575 )" (#1622 ) This reverts commit `81dcbe294d`.	2020-04-09 07:06:41 -04:00