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
feat: 🎸 1729 - error boundary wrapper (#1764 )
2020-06-04 09:54:24 +00:00 · 2020-06-04 11:52:30 +02:00 · 2020-05-15 18:59:23 +00:00 · 2020-05-15 14:55:54 -04:00 · 2020-05-14 14:24:17 +00:00 · 2020-05-14 16:20:23 +02:00
111 changed files with 2582 additions and 816 deletions
@@ -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

@@ -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,80 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [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.0",
  "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.12.3",
    "dicom-parser": "^1.8.3",
    "hammerjs": "^2.0.8",
    "prop-types": "^15.6.2",
@@ -51,6 +51,6 @@
    "classnames": "^2.2.6",
    "lodash.merge": "^4.6.2",
    "lodash.throttle": "^4.1.1",
-    "react-cornerstone-viewport": "^2.3.6"
+    "react-cornerstone-viewport": "2.3.8"
  }
 }
@@ -4,6 +4,7 @@ import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport';
 import OHIF from '@ohif/core';
 import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
+import debounce from 'lodash.debounce';

 const { StackManager } = OHIF.utils;

@@ -179,7 +180,7 @@ class OHIFCornerstoneViewport extends Component {

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

+    const debouncedNewImageHandler = debounce(({ currentImageIdIndex, sopInstanceUid }) => {
+      const { displaySet } = this.props.viewportData;
+      const { StudyInstanceUID } = displaySet;
+      if (currentImageIdIndex > 0) {
+        this.props.onNewImage({
+          StudyInstanceUID,
+          SOPInstanceUID: sopInstanceUid,
+          frameIndex: currentImageIdIndex,
+          activeViewportIndex: viewportIndex,
+        });
+      }
+    }, 700);
+
    return (
      <>
        <ConnectedCornerstoneViewport
          viewportIndex={viewportIndex}
          imageIds={imageIds}
          imageIdIndex={currentImageIdIndex}
+          onNewImage={debouncedNewImageHandler}
          // ~~ Connected (From REDUX)
          // frameRate={frameRate}
          // isPlaying={false}
@@ -267,7 +267,7 @@ const commandsModule = ({ servicesManager }) => {
      const study = studyMetadataManager.get(StudyInstanceUID);

      const displaySet = study.findDisplaySet(ds => {
-        return ds.images.find(i => i.getSOPInstanceUID() === SOPInstanceUID)
+        return ds.images && ds.images.find(i => i.getSOPInstanceUID() === SOPInstanceUID)
      });

      displaySet.SOPInstanceUID = SOPInstanceUID;
@@ -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,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.2.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.2.1...@ohif/extension-dicom-html@1.2.2) (2020-05-04)
+
+
+### Bug Fixes
+
+* 🐛 Proper error handling for derived display sets ([#1708](https://github.com/OHIF/Viewers/issues/1708)) ([5b20d8f](https://github.com/OHIF/Viewers/commit/5b20d8f323e4b3ef9988f2f2ab672d697b6da409))
+
+
+
+
+
+## [1.2.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.2.0...@ohif/extension-dicom-html@1.2.1) (2020-04-28)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
+# [1.2.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.1.2...@ohif/extension-dicom-html@1.2.0) (2020-04-24)
+
+
+### Features
+
+* 🎸 Seg jump to slice + show/hide ([835f64d](https://github.com/OHIF/Viewers/commit/835f64d47a9994f6a25aaf3941a4974e215e7e7f))
+
+
+
+
+
 ## [1.1.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.1.1...@ohif/extension-dicom-html@1.1.2) (2020-04-02)

 **Note:** Version bump only for package @ohif/extension-dicom-html
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-html",
-  "version": "1.1.2",
+  "version": "1.2.2",
  "description": "OHIF extension for rendering structured reports to HTML",
  "author": "OHIF",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "peerDependencies": {
    "@ohif/core": "^0.50.0",
-    "dcmjs": "^0.10.1",
+    "dcmjs": "^0.12.3",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
@@ -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>
    );
  }
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [0.1.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-p10-downloader@0.0.2...@ohif/extension-dicom-p10-downloader@0.1.0) (2020-04-23)
+
+
+### Features
+
+* configuration to hook into XHR Error handling ([e96205d](https://github.com/OHIF/Viewers/commit/e96205de35e5bec14dc8a9a8509db3dd4e6ecdb6))
+
+
+
+
+
 ## 0.0.2 (2020-04-15)

 **Note:** Version bump only for package @ohif/extension-dicom-p10-downloader
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-p10-downloader",
-  "version": "0.0.2",
+  "version": "0.1.0",
  "description": "OHIF extension for downloading DICOM P10 files",
  "author": "OHIF",
  "license": "MIT",
@@ -33,6 +33,7 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.5.5",
+    "dicomweb-client": "^0.6.0",
    "file-saver": "^2.0.2",
    "jszip": "^3.2.2"
  }
@@ -3,6 +3,69 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [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.0",
  "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.12.3",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
@@ -31,7 +31,18 @@ const refreshViewport = () => {
 * @param {number} props.isOpen - isOpen
 * @returns component
 */
-const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }) => {
+const RTPanel = ({
+  studies,
+  viewports,
+  activeIndex,
+  isOpen,
+  onContourItemClick,
+  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 = {
@@ -119,33 +130,35 @@ 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
+            );
+
+            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}
@@ -190,7 +203,7 @@ const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }
        />
      </div>
      {!state.referencedDisplaysets.length && <LoadingIndicator expand height="70px" width="70px" />}
-      {state.referencedDisplaysets.map(displaySet => {
+      {state.sets && state.referencedDisplaysets.map(displaySet => {
        const { SeriesInstanceUID, metadata, isLoaded } = displaySet;

        const module = cornerstoneTools.getModule('rtstruct');
@@ -205,9 +218,14 @@ const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }
            visible={isLoaded && loadedSet.visible}
            hideVisibleButton={!isLoaded}
            expanded={isLoaded && loadedSet.SeriesInstanceUID === state.selectedSet.SeriesInstanceUID}
-            onVisibilityChange={() => {
+            onVisibilityChange={newVisibility => {
              const module = cornerstoneTools.getModule('rtstruct');
-              module.setters.toggleStructureSet(SeriesInstanceUID);
+              loadedSet.ROIContours.forEach(({ ROINumber }) => {
+                module.setters.toggleROIContour(loadedSet.SeriesInstanceUID, ROINumber);
+              });
+              const sets = module.getters.structuresSetsWhichReferenceSeriesInstanceUid(viewports[activeIndex].SeriesInstanceUID);
+              setState(state => ({ ...state, sets }));
+              refreshViewport();
            }}
            onExpandChange={async () => {
              if (!isLoaded) {
@@ -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,10 @@ export default {
  preRegistration({ servicesManager, configuration = {} }) {
    init({ servicesManager, configuration });
  },
-  getPanelModule({ commandsManager }) {
+  getPanelModule({ commandsManager, api }) {
    const ExtendedRTPanel = props => {
+      const { activeContexts } = api.hooks.useAppContext();
+
      const contourItemClickHandler = contourData => {
        commandsManager.runCommand('jumpToImage', contourData);
      };
@@ -30,6 +32,8 @@ export default {
        <RTPanel
          {...props}
          onContourItemClick={contourItemClickHandler}
+          activeContexts={activeContexts}
+          contexts={api.contexts}
        />
      );
    };
@@ -51,8 +55,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';
@@ -3,6 +3,85 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [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.0",
  "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.12.2",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "dependencies": {
    "@babel/runtime": "^7.5.5",
+    "gl-matrix": "^3.3.0",
    "react-select": "^3.0.8"
  }
 }
@@ -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,
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cornerstoneTools from 'cornerstone-tools';
 import cornerstone from 'cornerstone-core';
@@ -28,28 +28,56 @@ const refreshViewport = () => {
 /**
 * SegmentationPanel component
 *
- * @param {Object} props
- * @param {Array} props.studies
- * @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
  });

  useEffect(() => {
@@ -57,10 +85,34 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
      log.warn('Segmentation Panel: labelmap modified', event);
      const module = cornerstoneTools.getModule('segmentation');
      const activeViewport = viewports[activeIndex];
-      const firstImageId = studyMetadata.getFirstImageId(activeViewport.displaySetInstanceUID);
+      const studyMetadata = studyMetadataManager.get(
+        activeViewport.StudyInstanceUID
+      );
+      const firstImageId = studyMetadata.getFirstImageId(
+        activeViewport.displaySetInstanceUID
+      );
      updateState('brushStackState', module.state.series[firstImageId]);
    };

+    /*
+     * TODO: Improve the way we notify parts of the app that depends on segs to be loaded.
+     *
+     * Currently we are using a non-ideal implementation through a custom event to notify the segmentation panel
+     * or other components that could rely on loaded segmentations that
+     * the segments were loaded so that e.g. when the user opens the panel
+     * before the segments are fully loaded, the panel can subscribe to this custom event
+     * and update itself with the new segments.
+     *
+     * This limitation is due to the fact that the cs segmentation module is an object (which will be
+     * updated after the segments are loaded) that React its not aware of its changes
+     * because the module object its not passed in to the panel component as prop but accessed externally.
+     *
+     * Improving this event approach to something reactive that can be tracked inside the react lifecycle,
+     * allows us to easily watch the module or the segmentations loading process in any other component
+     * without subscribing to external events.
+     */
+    document.addEventListener('extensiondicomsegmentationsegloaded', refreshSegmentations);
+
    /*
     * These are specific to each element;
     * Need to iterate cornerstone-tools tracked enabled elements?
@@ -74,6 +126,7 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
    );

    return () => {
+      document.removeEventListener('extensiondicomsegmentationsegloaded', refreshSegmentations);
      cornerstoneTools.store.state.enabledElements.forEach(enabledElement =>
        enabledElement.removeEventListener(
          'cornerstonetoolslabelmapmodified',
@@ -81,25 +134,37 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
        )
      );
    };
-  });
+  }, [activeIndex, viewports]);

-  useEffect(() => {
+  const refreshSegmentations = useCallback(() => {
    const module = cornerstoneTools.getModule('segmentation');
    const activeViewport = viewports[activeIndex];
-    const studyMetadata = studyMetadataManager.get(activeViewport.StudyInstanceUID);
-    const firstImageId = studyMetadata.getFirstImageId(activeViewport.displaySetInstanceUID);
+    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);
+      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
+        segmentList,
      }));
    } else {
      setState(state => ({
@@ -108,127 +173,267 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
        segmentList: [],
      }));
    }
-  }, [studies, viewports, activeIndex]);
+  }, [
+    viewports,
+    activeIndex,
+    state.isLoading
+  ]);
+
+  useEffect(() => {
+    refreshSegmentations();
+  }, [viewports, activeIndex, state.selectedSegmentation, activeContexts, state.isLoading]);

  /* Handle open/closed panel behaviour */
  useEffect(() => {
-    updateState('showSegSettings', state.showSegSettings && !isOpen);
+    setState(state => ({
+      ...state,
+      showSegmentationSettings: state.showSegmentationSettings && !isOpen,
+    }));
  }, [isOpen]);

-  const getLabelmapList = (brushStackState, firstImageId, activeViewport) => {
-    /* 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 +475,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,14 +491,17 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
    configuration.outlineWidth = newConfiguration.outlineWidth;
    configuration.fillAlphaInactive = newConfiguration.fillAlphaInactive;
    configuration.outlineAlphaInactive = newConfiguration.outlineAlphaInactive;
+    onConfigurationChange(newConfiguration);
    refreshViewport();
  };

-  if (state.showSegSettings) {
+  const disabledConfigurationFields = ['outlineAlpha', 'shouldRenderInactiveLabelmaps'];
+  if (state.showSegmentationSettings) {
    return (
      <SegmentationSettings
+        disabledFields={isVTK() ? disabledConfigurationFields : []}
        configuration={configuration}
-        onBack={() => updateState('showSegSettings', false)}
+        onBack={() => updateState('showSegmentationSettings', false)}
        onChange={updateConfiguration}
      />
    );
@@ -307,7 +513,7 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
          name="cog"
          width="25px"
          height="25px"
-          onClick={() => updateState('showSegSettings', true)}
+          onClick={() => updateState('showSegmentationSettings', true)}
        />
        {false && (
          <form className="selector-form">
@@ -328,9 +534,9 @@ const SegmentationPanel = ({ studies, viewports, activeIndex, isOpen }) => {
        <h3>Segmentations</h3>
        <div className="segmentations">
          <SegmentationSelect
-            value={
-              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 +621,9 @@ const _setActiveLabelmap = async (
  studies,
  displaySet,
  firstImageId,
-  activeLabelmapIndex
+  activeLabelmapIndex,
+  callback = () => { },
+  onDisplaySetLoadFailure
 ) => {
  if (displaySet.labelmapIndex === activeLabelmapIndex) {
    log.warn(`${activeLabelmapIndex} is already the active labelmap`);
@@ -425,7 +633,17 @@ const _setActiveLabelmap = async (
  if (!displaySet.isLoaded) {
    // What props does this expect `viewportSpecificData` to have?
    // TODO: Should this return the `labelmapIndex`?
-    await displaySet.load(viewportSpecificData, studies);
+
+    const loadPromise = displaySet.load(viewportSpecificData, studies);
+
+    loadPromise.catch(error => {
+      onDisplaySetLoadFailure(error);
+
+      // Return old index.
+      return activeLabelmapIndex;
+    });
+
+    await loadPromise;
  }

  const { state } = cornerstoneTools.getModule('segmentation');
@@ -434,6 +652,8 @@ const _setActiveLabelmap = async (

  refreshViewport();

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

@@ -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;
+
+    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,58 @@ 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;
+      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 +109,69 @@ function _getNextLabelmapIndex(firstImageId) {
  return labelmapIndex;
 }

+function _makeColorLUTAndGetIndex(segMetadata) {
+  const { setters, state } = cornerstoneTools.getModule('segmentation');
+  const { colorLutTables } = state;
+  const colorLUTIndex = _getNextColorLUTIndex();
+
+  const { data } = segMetadata;
+
+  if (
+    !data.some(
+      segment =>
+        segment &&
+        (segment.ROIDisplayColor || segment.RecommendedDisplayCIELabValue)
+    )
+  ) {
+    // Use default cornerstoneTools colorLUT.
+    return 0;
+  }
+
+  const colorLUT = [];
+
+  for (let i = 0; i < data.length; i++) {
+    const segment = data[i];
+    if (!segment) {
+      continue;
+    }
+
+    const { ROIDisplayColor, RecommendedDisplayCIELabValue } = segment;
+
+    if (RecommendedDisplayCIELabValue) {
+      const rgb = dcmjs.data.Colors.dicomlab2RGB(
+        RecommendedDisplayCIELabValue
+      ).map(x => Math.round(x * 255));
+
+      colorLUT[i] = [...rgb, 255];
+    } else if (ROIDisplayColor) {
+      colorLUT[i] = [...ROIDisplayColor, 255];
+    } else {
+      colorLUT[i] = [...colorLutTables[0][i]];
+    }
+  }
+
+  colorLUT.shift();
+  setters.colorLUT(colorLUTIndex, colorLUT);
+
+  return colorLUTIndex;
+}
+
+function _getNextColorLUTIndex() {
+  const { state } = cornerstoneTools.getModule('segmentation');
+  const { colorLutTables } = state;
+
+  let colorLUTIndex = colorLutTables.length;
+
+  for (let i = 0; i < colorLutTables.length; i++) {
+    if (!colorLutTables[i]) {
+      colorLUTIndex = i;
+      break;
+    }
+  }
+
+  return colorLUTIndex;
+}
+
 function _parseSeg(arrayBuffer, imageIds) {
  return dcmjs.adapters.Cornerstone.Segmentation.generateToolState(
    imageIds,
@@ -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,106 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [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,6 +1,6 @@
 {
  "name": "@ohif/extension-vtk",
-  "version": "1.3.13",
+  "version": "1.6.0",
  "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.12.2",
    "dicom-parser": "^1.8.3",
    "i18next": "^17.0.3",
    "i18next-browser-languagedetector": "^3.0.1",
@@ -50,13 +50,13 @@
  "dependencies": {
    "@babel/runtime": "^7.5.5",
    "lodash.throttle": "^4.1.1",
-    "react-vtkjs-viewport": "^0.8.3"
+    "react-vtkjs-viewport": "^0.9.0"
  },
  "devDependencies": {
-    "@ohif/core": "^2.7.0",
-    "@ohif/ui": "^1.4.3",
-    "cornerstone-tools": "4.12.5",
-    "cornerstone-wado-image-loader": "^3.0.0",
+    "@ohif/core": "^2.9.6",
+    "@ohif/ui": "^1.5.0",
+    "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>
    );
  }
@@ -49,7 +49,7 @@ class OHIFVTKViewport extends Component {
  state = {
    volumes: null,
    paintFilterLabelMapImageData: null,
-    paintFilterBackgroundImageData: null,
+    paintFilterBackgroundImageData: null
  };

  static propTypes = {
@@ -69,7 +69,7 @@ class OHIFVTKViewport extends Component {
  };

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

  static id = 'OHIFVTKViewport';
@@ -156,6 +156,10 @@ class OHIFVTKViewport extends Component {
      const { activeLabelmapIndex } = brushStackState;
      const labelmap3D = brushStackState.labelmaps3D[activeLabelmapIndex];

+      this.segmentsDefaultProperties = labelmap3D.segmentsHidden.map(isHidden => {
+        return { visible: !isHidden };
+      });
+
      const vtkLabelmapID = `${firstImageId}_${activeLabelmapIndex}`;

      if (labelmapCache[vtkLabelmapID]) {
@@ -339,13 +343,13 @@ class OHIFVTKViewport extends Component {
    this.setStateFromProps();
  }

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

    if (
      displaySet.displaySetInstanceUID !==
-        prevDisplaySet.displaySetInstanceUID ||
+      prevDisplaySet.displaySetInstanceUID ||
      displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
      displaySet.frameIndex !== prevDisplaySet.frameIndex
    ) {
@@ -405,10 +409,6 @@ class OHIFVTKViewport extends Component {

    const style = { width: '100%', height: '100%', position: 'relative' };

-    const visible = configuration.renderFill || configuration.renderOutline;
-    const opacity = configuration.fillAlpha;
-    const outlineThickness = configuration.outlineThickness;
-
    return (
      <>
        <div style={style}>
@@ -428,10 +428,14 @@ class OHIFVTKViewport extends Component {
              dataDetails={this.state.dataDetails}
              labelmapRenderingOptions={{
                colorLUT: this.state.labelmapColorLUT,
-                globalOpacity: opacity,
-                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}
            />
@@ -5,10 +5,13 @@ import {
  vtkInteractorStyleMPRRotate,
  vtkSVGCrosshairsWidget,
 } from 'react-vtkjs-viewport';
-
+import { getImageData } from 'react-vtkjs-viewport';
+import { vec3 } from 'gl-matrix';
 import setMPRLayout from './utils/setMPRLayout.js';
 import setViewportToVTK from './utils/setViewportToVTK.js';
 import Constants from 'vtk.js/Sources/Rendering/Core/VolumeMapper/Constants.js';
+import OHIFVTKViewport from './OHIFVTKViewport';
+import vtkCoordinate from 'vtk.js/Sources/Rendering/Core/Coordinate';

 const { BlendMode } = Constants;

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

    const displaySet = viewportSpecificData[activeViewportIndex];
-
    let api;
    if (!api) {
      try {
@@ -99,6 +101,20 @@ const commandsModule = ({ commandsManager }) => {
    });
  }

+  const _convertModelToWorldSpace = (position, vtkImageData) => {
+    const indexToWorld = vtkImageData.getIndexToWorld();
+    const pos = vec3.create();
+
+    position[0] += 0.5; /* Move to the centre of the voxel. */
+    position[1] += 0.5; /* Move to the centre of the voxel. */
+    position[2] += 0.5; /* Move to the centre of the voxel. */
+
+    vec3.set(pos, position[0], position[1], position[2]);
+    vec3.transformMat4(pos, pos, indexToWorld);
+
+    return pos;
+  };
+
  const actions = {
    getVtkApis: ({ index }) => {
      return apis[index];
@@ -124,6 +140,119 @@ const commandsModule = ({ commandsManager }) => {

      _setView(api, [0, 1, 0], [0, 0, 1]);
    },
+    requestNewSegmentation: async ({ viewports }) => {
+      const allViewports = Object.values(viewports.viewportSpecificData);
+      const promises = allViewports.map(async (viewport, viewportIndex) => {
+        let api = apis[viewportIndex];
+
+        if (!api) {
+          api = await _getActiveViewportVTKApi(viewports);
+          apis[viewportIndex] = api;
+        }
+
+        api.requestNewSegmentation();
+        api.updateImage();
+      });
+      await Promise.all(promises);
+    },
+    jumpToSlice: async ({
+      viewports,
+      studies,
+      StudyInstanceUID,
+      displaySetInstanceUID,
+      SOPClassUID,
+      SOPInstanceUID,
+      segmentNumber,
+      frameIndex,
+      frame,
+      done = () => { }
+    }) => {
+      let api = apis[viewports.activeViewportIndex];
+
+      if (!api) {
+        api = await _getActiveViewportVTKApi(viewports);
+        apis[viewports.activeViewportIndex] = api;
+      }
+
+      const stack = OHIFVTKViewport.getCornerstoneStack(
+        studies,
+        StudyInstanceUID,
+        displaySetInstanceUID,
+        SOPClassUID,
+        SOPInstanceUID,
+        frameIndex,
+      );
+
+      const imageDataObject = getImageData(stack.imageIds, displaySetInstanceUID);
+
+      let pixelIndex = 0;
+      let x = 0;
+      let y = 0;
+      let count = 0;
+
+      const rows = imageDataObject.dimensions[1];
+      const cols = imageDataObject.dimensions[0];
+
+      for (let j = 0; j < rows; j++) {
+        for (let i = 0; i < cols; i++) {
+          // [i, j] =
+          const pixel = frame.pixelData[pixelIndex];
+          if (pixel === segmentNumber) {
+            x += i;
+            y += j;
+            count++;
+          }
+          pixelIndex++;
+        }
+      }
+      x /= count;
+      y /= count;
+
+      const position = [x, y, frameIndex];
+      const worldPos = _convertModelToWorldSpace(position, imageDataObject.vtkImageData);
+
+      api.svgWidgets.crosshairsWidget.moveCrosshairs(worldPos, apis);
+      done();
+    },
+    setSegmentationConfiguration: async ({
+      viewports,
+      globalOpacity,
+      visible,
+      renderOutline,
+      outlineThickness,
+    }) => {
+      const allViewports = Object.values(viewports.viewportSpecificData);
+      const promises = allViewports.map(async (viewport, viewportIndex) => {
+        let api = apis[viewportIndex];
+
+        if (!api) {
+          api = await _getActiveViewportVTKApi(viewports);
+          apis[viewportIndex] = api;
+        }
+
+        api.setGlobalOpacity(globalOpacity);
+        api.setVisibility(visible);
+        api.setOutlineThickness(outlineThickness);
+        api.setOutlineRendering(renderOutline);
+        api.updateImage();
+      });
+      await Promise.all(promises);
+    },
+    setSegmentConfiguration: async ({ viewports, visible, segmentNumber }) => {
+      const allViewports = Object.values(viewports.viewportSpecificData);
+      const promises = allViewports.map(async (viewport, viewportIndex) => {
+        let api = apis[viewportIndex];
+
+        if (!api) {
+          api = await _getActiveViewportVTKApi(viewports);
+          apis[viewportIndex] = api;
+        }
+
+        api.setSegmentVisibility(segmentNumber, visible);
+        api.updateImage();
+      });
+      await Promise.all(promises);
+    },
    enableRotateTool: () => {
      apis.forEach(api => {
        const istyle = vtkInteractorStyleMPRRotate.newInstance();
@@ -280,6 +409,26 @@ const commandsModule = ({ commandsManager }) => {
  window.vtkActions = actions;

  const definitions = {
+    requestNewSegmentation: {
+      commandFn: actions.requestNewSegmentation,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    jumpToSlice: {
+      commandFn: actions.jumpToSlice,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    setSegmentationConfiguration: {
+      commandFn: actions.setSegmentationConfiguration,
+      storeContexts: ['viewports'],
+      options: {},
+    },
+    setSegmentConfiguration: {
+      commandFn: actions.setSegmentConfiguration,
+      storeContexts: ['viewports'],
+      options: {},
+    },
    axial: {
      commandFn: actions.axial,
      storeContexts: ['viewports'],
@@ -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;
@@ -3,6 +3,110 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [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)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/core",
-  "version": "2.7.0",
+  "version": "2.9.6",
  "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.12.2",
+    "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';
@@ -1,4 +1,4 @@
-import * as dcmjs from 'dcmjs';
+import dcmjs from 'dcmjs';

 /**
 *  Checks if dcmjs has support to determined tool
@@ -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,
@@ -11,6 +11,7 @@ import { api } from 'dicomweb-client';
 import { isImage } from '../../utils/isImage';
 import isDisplaySetReconstructable from '../../utils/isDisplaySetReconstructable';
 import isLowPriorityModality from '../../utils/isLowPriorityModality';
+import errorHandler from '../../errorHandler';

 export class StudyMetadata extends Metadata {
  constructor(data, uid) {
@@ -78,7 +79,7 @@ export class StudyMetadata extends Metadata {
    Object.defineProperty(this, 'studyInstanceUID', {
      configurable: false,
      enumerable: false,
-      get: function() {
+      get: function () {
        return this.getStudyInstanceUID();
      },
    });
@@ -102,10 +103,7 @@ export class StudyMetadata extends Metadata {
   * @param {SeriesMetadata} series The series metadata object from which the display sets will be created
   * @returns {Array} The list of display sets created for the given series object
   */
-  _createDisplaySetsForSeries(
-    sopClassHandlerModules,
-    series,
-  ) {
+  _createDisplaySetsForSeries(sopClassHandlerModules, series) {
    const study = this;
    const displaySets = [];

@@ -293,14 +291,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 +318,10 @@ export class StudyMetadata extends Metadata {
      return false;
    }

-    const displaySets = this._createDisplaySetsForSeries(sopClassHandlerModules, series)
+    const displaySets = this._createDisplaySetsForSeries(
+      sopClassHandlerModules,
+      series
+    );

    // Note: filtering in place because this._displaySets has writable: false
    for (let i = this._displaySets.length - 1; i >= 0; i--) {
@@ -835,9 +835,11 @@ function _getDisplaySetFromSopClassModule(

  const plugin = handlersForSopClassUID[0];
  const headers = DICOMWeb.getAuthorizationHeader();
+  const errorInterceptor = errorHandler.getHTTPErrorHandler();
  const dicomWebClient = new dwc({
    url: study.getData().wadoRoot,
    headers,
+    errorInterceptor,
  });

  let displaySet = plugin.getDisplaySetFromSeries(
@@ -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',
@@ -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;
@@ -144,7 +144,7 @@ async function makeSOPInstance(server, study, instance) {
    wadorsuri,
    wadoRoot: server.wadoRoot,
    imageRendering: server.imageRendering,
-    thumbnailRendering: server.thumbnailRendering
+    thumbnailRendering: server.thumbnailRendering,
  };

  series.instances.push(sopInstance);
@@ -160,8 +160,10 @@ async function makeSOPInstance(server, study, instance) {

    const wadoRSMetadata = Object.assign(instance);

-    if (sopInstance.NumberOfFrames) {
-      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(
@@ -190,7 +192,7 @@ async function makeSOPInstance(server, study, instance) {
 */
 async function addInstancesToStudy(server, study, sopInstanceList) {
  return Promise.all(
-    sopInstanceList.map(function (sopInstance) {
+    sopInstanceList.map(function(sopInstance) {
      return makeSOPInstance(server, study, sopInstance);
    })
  );
@@ -3,6 +3,8 @@ import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
 import { api } from 'dicomweb-client';
 import DICOMWeb from '../DICOMWeb';

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

@@ -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
@@ -88,7 +90,7 @@ const loadAndCacheDerivedDisplaySets = (referencedDisplaySet, studies) => {

    // find most recent and load it.
    let recentDateTime = 0;
-    let recentDisplaySet;
+    let recentDisplaySet = displaySets[0];

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

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

 export default loadAndCacheDerivedDisplaySets;
@@ -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)
+    );
  }
 }
@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.5.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.4.4...@ohif/ui@1.5.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.4.4](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.4.3...@ohif/ui@1.4.4) (2020-05-04)
+
+
+### Bug Fixes
+
+* 🐛 Proper error handling for derived display sets ([#1708](https://github.com/OHIF/Viewers/issues/1708)) ([5b20d8f](https://github.com/OHIF/Viewers/commit/5b20d8f323e4b3ef9988f2f2ab672d697b6da409))
+
+
+
+
+
 ## [1.4.3](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.4.2...@ohif/ui@1.4.3) (2020-04-09)

 **Note:** Version bump only for package @ohif/ui
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/ui",
-  "version": "1.4.3",
+  "version": "1.5.0",
  "description": "A set of React components for Medical Imaging Viewers",
  "author": "OHIF Contributors",
  "license": "MIT",
@@ -53,6 +53,7 @@
    "react-dnd-html5-backend": "^9.4.0",
    "react-dnd-touch-backend": "^9.4.0",
    "react-draggable": "^4.1.0",
+    "react-error-boundary": "^2.2.1",
    "react-i18next": "^10.11.0",
    "react-modal": "^3.11.1",
    "react-with-direction": "1.3.0"
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundary } from 'react-error-boundary';
+import './ErrorFallback.css';
+
+const ErrorFallback = ({ error, componentStack, resetErrorBoundary }) => {
+  return (
+    <div className="ErrorFallback" role="alert">
+      <p>Something went wrong.</p>
+      <pre>{error.message}</pre>
+      <pre>{componentStack}</pre>
+    </div>
+  );
+};
+
+const OHIFErrorBoundary = ({
+  context = 'OHIF',
+  onReset = () => {},
+  onError = () => {},
+  fallbackComponent,
+  children,
+}) => {
+  const onErrorHandler = (error, componentStack) => {
+    console.error(`${context} Error Boundary`, error, componentStack);
+    onError(error, componentStack);
+  };
+
+  const onResetHandler = () => {
+    onReset();
+  };
+
+  return (
+    <ErrorBoundary
+      FallbackComponent={fallbackComponent || ErrorFallback}
+      onReset={onResetHandler}
+      onError={onErrorHandler}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+OHIFErrorBoundary.propTypes = {
+  context: PropTypes.string,
+  onReset: PropTypes.func,
+  onError: PropTypes.func,
+  children: PropTypes.node.isRequired,
+  fallbackComponent: PropTypes.element,
+};
+
+export default OHIFErrorBoundary;
@@ -0,0 +1,4 @@
+.ErrorFallback {
+  padding: 10px;
+  color: var(--active-color);
+}
@@ -0,0 +1 @@
+export { default as ErrorBoundary } from './ErrorBoundary';
@@ -7,7 +7,6 @@ import { AboutContent } from './content/aboutContent/AboutContent';
 import { TabComponents, TabFooter } from './tabComponents';
 import { HotkeyField } from './customForm';
 import { LanguageSwitcher } from './languageSwitcher';
-
 import { Checkbox } from './checkbox';
 import { CineDialog } from './cineDialog';
 import { ViewportDownloadForm } from './content/viewportDownloadForm';
@@ -25,8 +24,10 @@ import {
 } from './studyList';
 import { ToolbarSection } from './toolbarSection';
 import { Tooltip } from './tooltip';
+import { ErrorBoundary } from './errorBoundary';

 export {
+  ErrorBoundary,
  ContextMenu,
  Checkbox,
  CineDialog,
@@ -127,7 +127,7 @@

 .sb-message {
  font-size: 14px;
-  word-break: break-all;
+  word-break: normal;
 }

 .sb-item {
@@ -29,6 +29,7 @@ import {
  Tooltip,
  AboutContent,
  OHIFModal,
+  ErrorBoundary
 } from './components';
 import { useDebounce, useMedia } from './hooks';

@@ -123,6 +124,7 @@ export {
  DialogProvider,
  withDialog,
  useDialog,
+  ErrorBoundary,
  // Hooks
  useDebounce,
  useMedia,
@@ -3,6 +3,208 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [4.2.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@4.1.0...@ohif/viewer@4.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))
+
+
+
+
+
+# [4.1.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@4.0.0...@ohif/viewer@4.1.0) (2020-05-15)
+
+
+### Features
+
+* expose some app internals as window.app ([#1735](https://github.com/OHIF/Viewers/issues/1735)) ([63fd656](https://github.com/OHIF/Viewers/commit/63fd65690cba450721870a6222e0fb3ad71bb291))
+
+
+
+
+
+# [4.0.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.11...@ohif/viewer@4.0.0) (2020-05-14)
+
+
+### Bug Fixes
+
+* 🐛 Fix race condition when loading derived display sets ([#1718](https://github.com/OHIF/Viewers/issues/1718)) ([b1678ce](https://github.com/OHIF/Viewers/commit/b1678ce6399dde37a9878f45ccc7c63286d93fab)), closes [#1715](https://github.com/OHIF/Viewers/issues/1715)
+
+
+### BREAKING CHANGES
+
+* 🧨 However we start to load once the first set of metadata arrives. We need
+to wait until all series metadata is fetched.
+
+
+
+
+
+## [3.11.11](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.10...@ohif/viewer@3.11.11) (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)
+
+
+
+
+
+## [3.11.10](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.9...@ohif/viewer@3.11.10) (2020-05-13)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.11.9](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.8...@ohif/viewer@3.11.9) (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))
+
+
+
+
+
+## [3.11.8](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.7...@ohif/viewer@3.11.8) (2020-05-06)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.11.7](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.6...@ohif/viewer@3.11.7) (2020-05-04)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.11.6](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.5...@ohif/viewer@3.11.6) (2020-05-04)
+
+
+### Bug Fixes
+
+* 🐛 Proper error handling for derived display sets ([#1708](https://github.com/OHIF/Viewers/issues/1708)) ([5b20d8f](https://github.com/OHIF/Viewers/commit/5b20d8f323e4b3ef9988f2f2ab672d697b6da409))
+
+
+
+
+
+## [3.11.5](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.4...@ohif/viewer@3.11.5) (2020-05-04)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.11.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.3...@ohif/viewer@3.11.4) (2020-05-04)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.11.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.2...@ohif/viewer@3.11.3) (2020-04-29)
+
+
+### Bug Fixes
+
+* Add IHEInvokeImageDisplay routes back into viewer ([#1695](https://github.com/OHIF/Viewers/issues/1695)) ([f7162ce](https://github.com/OHIF/Viewers/commit/f7162ce61708776a6c192732b0904a022bcc6b3a))
+
+
+
+
+
+## [3.11.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.1...@ohif/viewer@3.11.2) (2020-04-28)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.11.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.0...@ohif/viewer@3.11.1) (2020-04-27)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [3.11.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.10.2...@ohif/viewer@3.11.0) (2020-04-24)
+
+
+### Features
+
+* 🎸 Seg jump to slice + show/hide ([835f64d](https://github.com/OHIF/Viewers/commit/835f64d47a9994f6a25aaf3941a4974e215e7e7f))
+
+
+
+
+
+## [3.10.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.10.1...@ohif/viewer@3.10.2) (2020-04-23)
+
+
+### Bug Fixes
+
+* undefined `errorHandler` in cornerstoneWadoImageLoader configuration ([#1664](https://github.com/OHIF/Viewers/issues/1664)) ([709f147](https://github.com/OHIF/Viewers/commit/709f14708e2b0f912b5ea509114acd87af3149cb))
+
+
+
+
+
+## [3.10.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.10.0...@ohif/viewer@3.10.1) (2020-04-23)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [3.10.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.9.2...@ohif/viewer@3.10.0) (2020-04-23)
+
+
+### Features
+
+* configuration to hook into XHR Error handling ([e96205d](https://github.com/OHIF/Viewers/commit/e96205de35e5bec14dc8a9a8509db3dd4e6ecdb6))
+
+
+
+
+
+## [3.9.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.9.1...@ohif/viewer@3.9.2) (2020-04-22)
+
+
+### 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))
+
+
+
+
+
+## [3.9.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.9.0...@ohif/viewer@3.9.1) (2020-04-17)
+
+
+### Bug Fixes
+
+* `showStudyList` config ([#1647](https://github.com/OHIF/Viewers/issues/1647)) ([d9fc7bb](https://github.com/OHIF/Viewers/commit/d9fc7bbb0e6d868f507c515f031aaf88a2353e2f))
+
+
+
+
+
 # [3.9.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.8.21...@ohif/viewer@3.9.0) (2020-04-17)


@@ -22,7 +22,7 @@ describe('OHIF Study List', function() {
      //Wait result list to be displayed
      cy.waitStudyList();
      cy.get('@searchResult').should($list => {
-        expect($list.length).to.be.eq(2);
+        expect($list.length).to.be.eq(3);
        expect($list).to.contain('Juno');
      });
    });
@@ -127,7 +127,7 @@ describe('OHIF Study List', function() {
      //Wait result list to be displayed
      cy.waitStudyList();
      cy.get('@searchResult').should($list => {
-        expect($list.length).to.be.eq(2);
+        expect($list.length).to.be.eq(3);
        expect($list).to.contain('Juno');
      });
    });
@@ -137,7 +137,7 @@ describe('OHIF Study List', function() {
      //Wait result list to be displayed
      cy.waitStudyList();
      cy.get('@searchResult').should($list => {
-        expect($list.length).to.be.eq(2);
+        expect($list.length).to.be.eq(6);
        expect($list).to.contain('ProstateX-0000');
      });
    });
@@ -1,7 +1,7 @@
 describe('OHIF Microscopy Extension', () => {
  before(() => {
    cy.openStudyModality('SM');
-    cy.expectMinimumThumbnails(6);
+    cy.expectMinimumThumbnails(2);
  });

  it('checks if series thumbnails are being displayed', () => {
@@ -21,8 +21,8 @@ describe('OHIF VTK Extension', () => {
    //Select 2D MPR button
    cy.get('[data-cy="2d mpr"]').click();

-    //Wait Reformatting Images
-    cy.waitVTKReformatting();
+    //Wait waitVTKLoading Images
+    cy.waitVTKLoading();
  });

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

-    //Wait Reformatting Images
-    cy.waitVTKReformatting();
+    //Wait waitVTKLoading Images
+    cy.waitVTKwaitVTKLoading();
  });

  beforeEach(() => {
@@ -107,15 +107,15 @@ Cypress.Commands.add('waitStudyList', () => {
  });
 });

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

-  // Wait for finish reformatting
+  // Wait for finish loading
  cy.get('[data-cy="viewprt-grid"]', { timeout: 30000 }).should($grid => {
-    expect($grid).not.to.contain.text('Reform');
+    expect($grid).not.to.contain.text('Loading');
  });
 });

@@ -1,6 +1,6 @@
 {
  "name": "@ohif/viewer",
-  "version": "3.9.0",
+  "version": "4.2.0",
  "description": "OHIF Viewer",
  "author": "OHIF Contributors",
  "license": "MIT",
@@ -48,26 +48,26 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^2.7.0",
-    "@ohif/extension-cornerstone": "^2.5.2",
-    "@ohif/extension-dicom-html": "^1.1.2",
-    "@ohif/extension-dicom-microscopy": "^0.50.9",
-    "@ohif/extension-dicom-p10-downloader": "^0.0.2",
+    "@ohif/core": "^2.9.6",
+    "@ohif/extension-cornerstone": "^2.8.0",
+    "@ohif/extension-dicom-html": "^1.2.2",
+    "@ohif/extension-dicom-microscopy": "^0.51.0",
+    "@ohif/extension-dicom-p10-downloader": "^0.1.0",
    "@ohif/extension-dicom-pdf": "^1.0.3",
-    "@ohif/extension-dicom-rt": "^0.0.2",
-    "@ohif/extension-dicom-segmentation": "^0.1.2",
+    "@ohif/extension-dicom-rt": "^0.2.0",
+    "@ohif/extension-dicom-segmentation": "^0.3.0",
    "@ohif/extension-lesion-tracker": "^0.2.0",
-    "@ohif/extension-vtk": "^1.3.13",
+    "@ohif/extension-vtk": "^1.6.0",
    "@ohif/i18n": "^0.52.8",
-    "@ohif/ui": "^1.4.3",
+    "@ohif/ui": "^1.5.0",
    "@tanem/react-nprogress": "^1.1.25",
    "classnames": "^2.2.6",
    "core-js": "^3.2.1",
    "cornerstone-core": "^2.2.8",
    "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "4.12.5",
-    "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.12.0",
+    "cornerstone-tools": "4.15.1",
+    "cornerstone-wado-image-loader": "^3.1.0",
+    "dcmjs": "^0.12.2",
    "dicom-parser": "^1.8.3",
    "dicomweb-client": "^0.4.4",
    "hammerjs": "^2.0.8",
@@ -1,7 +1,6 @@
 window.config = {
  // default: '/'
  routerBasename: '/',
-  whiteLabelling: {},
  extensions: [],
  showStudyList: true,
  filterQueryParam: false,
@@ -16,6 +15,7 @@ window.config = {
        imageRendering: 'wadors',
        thumbnailRendering: 'wadors',
        enableStudyLazyLoad: true,
+        supportsFuzzyMatching: true,
      },
    ],
  },
@@ -1,6 +1,5 @@
 window.config = {
  routerBasename: '/',
-  whiteLabelling: {},
  extensions: [],
  showStudyList: true,
  servers: {
@@ -1,6 +1,5 @@
 window.config = {
  routerBasename: '/',
-  whiteLabelling: {},
  showStudyList: true,
  servers: {
    dicomWeb: [
@@ -1,6 +1,5 @@
 window.config = {
  routerBasename: '/',
-  whiteLabelling: {},
  showStudyList: true,
  servers: {
    // This is an array, but we'll only use the first entry for now
@@ -1,6 +1,5 @@
 window.config = {
  routerBasename: '/',
-  whiteLabelling: {},
  showStudyList: true,
  servers: {
    // This is an array, but we'll only use the first entry for now
@@ -1,6 +1,5 @@
 window.config = {
  routerBasename: '/',
-  whiteLabelling: {},
  enableGoogleCloudAdapter: true,
  healthcareApiEndpoint: 'https://healthcare.googleapis.com/v1beta1',
  servers: {
@@ -0,0 +1,19 @@
+window.config = function(props) {
+  var servicesManager = props.servicesManager;
+
+  return {
+    routerBasename: '/',
+    enableGoogleCloudAdapter: true,
+    enableGoogleCloudAdapterUI: false,
+    showStudyList: true,
+    httpErrorHandler: error => {
+      // This is 429 when rejected from the public idc sandbox too often.
+      console.warn(error.status);
+
+      // Could use services manager here to bring up a dialog/modal if needed.
+      console.warn('test, navigate to https://ohif.org/');
+      window.location = 'https://ohif.org/';
+    },
+    healthcareApiEndpoint: 'https://idc-sandbox-002.appspot.com/v1beta1',
+  };
+};
@@ -1,7 +1,6 @@
 window.config = {
  // default: '/'
  routerBasename: '/',
-  whiteLabelling: {},
  // default: ''
  showStudyList: true,
  servers: {
@@ -1,6 +1,5 @@
 window.config = {
  routerBasename: '/pwa',
-  whiteLabelling: {},
  showStudyList: true,
  servers: {
    dicomWeb: [
@@ -13,6 +12,7 @@ window.config = {
        imageRendering: 'wadors',
        thumbnailRendering: 'wadors',
        enableStudyLazyLoad: true,
+        supportsFuzzyMatching: true,
      },
    ],
  },
@@ -1,6 +1,5 @@
 window.config = {
  routerBasename: '/',
-  whiteLabelling: {},
  showStudyList: true,
  servers: {
    dicomWeb: [
@@ -12,6 +11,7 @@ window.config = {
        qidoSupportsIncludeField: true,
        imageRendering: 'wadors',
        thumbnailRendering: 'wadors',
+        supportsFuzzyMatching: true,
      },
    ],
  },
@@ -13,6 +13,7 @@ import {
  ModalProvider,
  DialogProvider,
  OHIFModal,
+  ErrorBoundary
 } from '@ohif/ui';

 import {
@@ -31,7 +32,8 @@ import {
 import i18n from '@ohif/i18n';

 // TODO: This should not be here
-import './config';
+//import './config';
+import { setConfiguration } from './config';

 /** Utils */
 import {
@@ -50,9 +52,9 @@ import { getActiveContexts } from './store/layout/selectors.js';
 import store from './store';

 /** Contexts */
-import WhiteLabellingContext from './context/WhiteLabellingContext';
+import WhiteLabelingContext from './context/WhiteLabelingContext';
 import UserManagerContext from './context/UserManagerContext';
-import AppContext from './context/AppContext';
+import { AppProvider, useAppContext, CONTEXTS } from './context/AppContext';

 /** ~~~~~~~~~~~~~ Application Setup */
 const commandsManagerConfig = {
@@ -70,6 +72,14 @@ let extensionManager;
 // TODO[react] Use a provider when the whole tree is React
 window.store = store;

+window.ohif = window.ohif || {};
+window.ohif.app = {
+  commandsManager,
+  hotkeysManager,
+  servicesManager,
+  extensionManager,
+};
+
 class App extends Component {
  static propTypes = {
    config: PropTypes.oneOfType([
@@ -77,7 +87,9 @@ class App extends Component {
      PropTypes.shape({
        routerBasename: PropTypes.string.isRequired,
        oidc: PropTypes.array,
-        whiteLabelling: PropTypes.object,
+        whiteLabeling: PropTypes.shape({
+          createLogoComponentFn: PropTypes.func,
+        }),
        extensions: PropTypes.array,
      }),
    ]).isRequired,
@@ -86,7 +98,7 @@ class App extends Component {

  static defaultProps = {
    config: {
-      whiteLabelling: {},
+      showStudyList: true,
      oidc: [],
      extensions: [],
    },
@@ -102,10 +114,10 @@ class App extends Component {
    const { config, defaultExtensions } = props;

    const appDefaultConfig = {
+      showStudyList: true,
      cornerstoneExtensionConfig: {},
      extensions: [],
      routerBasename: '/',
-      whiteLabelling: {},
    };

    this._appConfig = {
@@ -121,6 +133,8 @@ class App extends Component {
      oidc,
    } = this._appConfig;

+    setConfiguration(this._appConfig);
+
    this.initUserManager(oidc);
    _initServices([
      UINotificationService,
@@ -144,7 +158,7 @@ class App extends Component {
  }

  render() {
-    const { whiteLabelling, routerBasename } = this._appConfig;
+    const { whiteLabeling, routerBasename } = this._appConfig;
    const {
      UINotificationService,
      UIDialogService,
@@ -154,53 +168,57 @@ class App extends Component {

    if (this._userManager) {
      return (
-        <AppContext.Provider value={{ appConfig: this._appConfig }}>
+        <ErrorBoundary context='App'>
          <Provider store={store}>
-            <I18nextProvider i18n={i18n}>
-              <OidcProvider store={store} userManager={this._userManager}>
-                <UserManagerContext.Provider value={this._userManager}>
-                  <Router basename={routerBasename}>
-                    <WhiteLabellingContext.Provider value={whiteLabelling}>
-                      <SnackbarProvider service={UINotificationService}>
-                        <DialogProvider service={UIDialogService}>
-                          <ModalProvider
-                            modal={OHIFModal}
-                            service={UIModalService}
-                          >
-                            <OHIFStandaloneViewer
-                              userManager={this._userManager}
-                            />
-                          </ModalProvider>
-                        </DialogProvider>
-                      </SnackbarProvider>
-                    </WhiteLabellingContext.Provider>
-                  </Router>
-                </UserManagerContext.Provider>
-              </OidcProvider>
-            </I18nextProvider>
+            <AppProvider config={this._appConfig}>
+              <I18nextProvider i18n={i18n}>
+                <OidcProvider store={store} userManager={this._userManager}>
+                  <UserManagerContext.Provider value={this._userManager}>
+                    <Router basename={routerBasename}>
+                      <WhiteLabelingContext.Provider value={whiteLabeling}>
+                        <SnackbarProvider service={UINotificationService}>
+                          <DialogProvider service={UIDialogService}>
+                            <ModalProvider
+                              modal={OHIFModal}
+                              service={UIModalService}
+                            >
+                              <OHIFStandaloneViewer
+                                userManager={this._userManager}
+                              />
+                            </ModalProvider>
+                          </DialogProvider>
+                        </SnackbarProvider>
+                      </WhiteLabelingContext.Provider>
+                    </Router>
+                  </UserManagerContext.Provider>
+                </OidcProvider>
+              </I18nextProvider>
+            </AppProvider>
          </Provider>
-        </AppContext.Provider>
+        </ErrorBoundary>
      );
    }

    return (
-      <AppContext.Provider value={{ appConfig: this._appConfig }}>
+      <ErrorBoundary context='App'>
        <Provider store={store}>
-          <I18nextProvider i18n={i18n}>
-            <Router basename={routerBasename}>
-              <WhiteLabellingContext.Provider value={whiteLabelling}>
-                <SnackbarProvider service={UINotificationService}>
-                  <DialogProvider service={UIDialogService}>
-                    <ModalProvider modal={OHIFModal} service={UIModalService}>
-                      <OHIFStandaloneViewer />
-                    </ModalProvider>
-                  </DialogProvider>
-                </SnackbarProvider>
-              </WhiteLabellingContext.Provider>
-            </Router>
-          </I18nextProvider>
+          <AppProvider config={this._appConfig}>
+            <I18nextProvider i18n={i18n}>
+              <Router basename={routerBasename}>
+                <WhiteLabelingContext.Provider value={whiteLabeling}>
+                  <SnackbarProvider service={UINotificationService}>
+                    <DialogProvider service={UIDialogService}>
+                      <ModalProvider modal={OHIFModal} service={UIModalService}>
+                        <OHIFStandaloneViewer />
+                      </ModalProvider>
+                    </DialogProvider>
+                  </SnackbarProvider>
+                </WhiteLabelingContext.Provider>
+              </Router>
+            </I18nextProvider>
+          </AppProvider>
        </Provider>
-      </AppContext.Provider>
+      </ErrorBoundary>
    );
  }

@@ -250,6 +268,12 @@ function _initExtensions(extensions, cornerstoneExtensionConfig, appConfig) {
    commandsManager,
    servicesManager,
    appConfig,
+    api: {
+      contexts: CONTEXTS,
+      hooks: {
+        useAppContext
+      }
+    }
  });

  const requiredExtensions = [
@@ -5,7 +5,7 @@ import { Route, Switch } from 'react-router-dom';
 import { NProgress } from '@tanem/react-nprogress';
 import { CSSTransition } from 'react-transition-group';
 import { connect } from 'react-redux';
-import { ViewerbaseDragDropContext } from '@ohif/ui';
+import { ViewerbaseDragDropContext, ErrorBoundary } from '@ohif/ui';
 import { SignoutCallbackComponent } from 'redux-oidc';
 import asyncComponent from './components/AsyncComponent.js';
 import * as RoutesUtil from './routes/routesUtil';
@@ -191,8 +191,10 @@ class OHIFStandaloneViewer extends Component {
                  {match === null ? (
                    <></>
                  ) : (
-                    <Component match={match} location={this.props.location} />
-                  )}
+                      <ErrorBoundary context={match.url}>
+                        <Component match={match} location={this.props.location} />
+                      </ErrorBoundary>
+                    )}
                </CSSTransition>
              )}
            </Route>
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundary } from '@ohif/ui';
+import { servicesManager } from './../../App';
+
+const { UIModalService } = servicesManager.services;
+
+const ErrorBoundaryDialog = ({ context, children }) => {
+  const handleOnError = (error, componentStack) => {
+    const ErrorDialog = () => (
+      <div className="ErrorFallback" role="alert">
+        <div>
+          <h3>
+            {context}: <span>{error.message}</span>
+          </h3>
+        </div>
+        <pre>{componentStack}</pre>
+      </div>
+    );
+
+    UIModalService.show({
+      content: ErrorDialog,
+      title: `${context}: ${error.message}`,
+    });
+  };
+
+  const fallbackComponent = () => (
+    <div className="ErrorFallback" role="alert">
+      <p>
+        Error rendering {context}. <br /> Check the browser console for more
+        details.
+      </p>
+    </div>
+  );
+
+  return (
+    <ErrorBoundary
+      fallbackComponent={fallbackComponent}
+      context={context}
+      onError={handleOnError}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+ErrorBoundaryDialog.propTypes = {
+  context: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default ErrorBoundaryDialog;
@@ -0,0 +1,3 @@
+import ErrorBoundaryDialog from './ErrorBoundaryDialog';
+
+export default ErrorBoundaryDialog;
@@ -4,8 +4,16 @@
  height: var(--top-bar-height);
 }

-.dd-item {
-  width: 100%;
+.header-left-box {
+  display: inline-block;
+  position: relative;
+}
+
+.header-brand {
+  text-decoration: none;
+  height: 30px;
+  float: left;
+  clear: both;
 }

 /* Home Page */
@@ -17,35 +25,11 @@
  width: 100%;
 }

-.header-left-box {
-  display: inline-block;
-  position: relative;
-}
-
-.header-viewerLink {
-  float: left;
-}
-
-.header-brand {
-  height: 30px;
-  text-decoration: none;
-  float: left;
-  clear: both;
-}
-
 .entry-header.header-big .header-brand {
-  height: auto;
+  height: 50px;
  padding: 0;
 }

-.header-logo-image {
-  fill: transparent;
-  height: 100%;
-  margin: 0 8px 0 0;
-  width: 30px;
-  float: left;
-}
-
 .entry-header.header-big .header-logo-image {
  margin-right: 20px;
  width: 50px;
@@ -57,6 +41,24 @@
  height: auto;
 }

+/** OTHER STYLES **/
+
+.dd-item {
+  width: 100%;
+}
+
+.header-viewerLink {
+  float: left;
+}
+
+.header-logo-image {
+  fill: transparent;
+  height: 100%;
+  margin: 0 8px 0 0;
+  width: 30px;
+  float: left;
+}
+
 .header-btn {
  color: var(--text-secondary-color);
  cursor: pointer;
@@ -130,13 +132,6 @@
    width: 40%;
  }

-  /* Account for notification bar height */
-  .entry-header.header-big .header-brand {
-  }
-
-  .dd-menu {
-  }
-
  /* Toggle Notification Bar */
  .notification-bar {
    display: block;
@@ -1,30 +1,29 @@
 import React, { useState, useEffect } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import { withTranslation } from 'react-i18next';
-
 import PropTypes from 'prop-types';
-
+import classNames from 'classnames';
 import { Dropdown, AboutContent, withModal } from '@ohif/ui';
-
+//
 import { UserPreferences } from './../UserPreferences';
 import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
 import './Header.css';

-// Context
-import AppContext from './../../context/AppContext';
-
 function Header(props) {
  const {
    t,
    user,
    userManager,
    modal: { show },
-    home,
+    useLargeLogo,
+    linkPath,
+    linkText,
    location,
    children,
  } = props;

  const [options, setOptions] = useState([]);
+  const hasLink = linkText && linkPath;

  useEffect(() => {
    const optionsValue = [
@@ -61,15 +60,12 @@ function Header(props) {
    setOptions(optionsValue);
  }, [setOptions, show, t, user, userManager]);

-  const { appConfig = {} } = AppContext;
-  const showStudyList =
-    appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
-
-  // ANTD -- Hamburger, Drawer, Menu
  return (
    <>
      <div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
-      <div className={`entry-header ${home ? 'header-big' : ''}`}>
+      <div
+        className={classNames('entry-header', { 'header-big': useLargeLogo })}
+      >
        <div className="header-left-box">
          {location && location.studyLink && (
            <Link
@@ -82,15 +78,15 @@ function Header(props) {

          {children}

-          {showStudyList && !home && (
+          {hasLink && (
            <Link
              className="header-btn header-studyListLinkSection"
              to={{
-                pathname: '/',
+                pathname: linkPath,
                state: { studyLink: location.pathname },
              }}
            >
-              {t('Study list')}
+              {t(linkText)}
            </Link>
          )}
        </div>
@@ -105,7 +101,11 @@ function Header(props) {
 }

 Header.propTypes = {
-  home: PropTypes.bool.isRequired,
+  // Study list, /
+  linkText: PropTypes.string,
+  linkPath: PropTypes.string,
+  useLargeLogo: PropTypes.bool,
+  //
  location: PropTypes.object.isRequired,
  children: PropTypes.node,
  t: PropTypes.func.isRequired,
@@ -115,7 +115,7 @@ Header.propTypes = {
 };

 Header.defaultProps = {
-  home: true,
+  useLargeLogo: false,
  children: OHIFLogo(),
 };

@@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { utils } from '@ohif/core';
+import { useSnackbarContext } from '@ohif/ui';
 //
 import ViewportPane from './ViewportPane.js';
 import DefaultViewport from './DefaultViewport.js';
@@ -11,7 +12,7 @@ import EmptyViewport from './EmptyViewport.js';

 const { loadAndCacheDerivedDisplaySets } = utils;

-const ViewportGrid = function (props) {
+const ViewportGrid = function(props) {
  const {
    activeViewportIndex,
    availablePlugins,
@@ -23,6 +24,7 @@ const ViewportGrid = function (props) {
    studies,
    viewportData,
    children,
+    isStudyLoaded,
  } = props;

  const rowSize = 100 / numRows;
@@ -33,11 +35,26 @@ const ViewportGrid = function (props) {
    return null;
  }

+  const snackbar = useSnackbarContext();
+
  useEffect(() => {
-    viewportData.forEach(displaySet => {
-      loadAndCacheDerivedDisplaySets(displaySet, studies);
-    });
-  }, [studies, viewportData]);
+    if (isStudyLoaded) {
+      viewportData.forEach(displaySet => {
+        const promises = loadAndCacheDerivedDisplaySets(displaySet, studies);
+
+        promises.forEach(promise => {
+          promise.catch(error => {
+            snackbar.show({
+              title: 'Error loading derived display set:',
+              message: error.message,
+              type: 'error',
+              autoClose: false,
+            });
+          });
+        });
+      });
+    }
+  }, [studies, viewportData, isStudyLoaded, snackbar]);

  const getViewportPanes = () =>
    layout.viewports.map((layout, viewportIndex) => {
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import './ViewportPane.css';

-const ViewportPane = function(props) {
+const ViewportPane = function (props) {
  const { children, onDrop, viewportIndex, className: propClassName } = props;
  const [{ hovered, highlighted }, drop] = useDrop({
    accept: 'thumbnail',
@@ -3,43 +3,59 @@ import cornerstone from 'cornerstone-core';
 import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
 import dicomParser from 'dicom-parser';
 import version from './version.js';
+import AppContext from './context/AppContext';

-let homepage;
-const { process } = window;
-if (process && process.env && process.env.PUBLIC_URL) {
-  homepage = process.env.PUBLIC_URL;
-}
-
-window.info = {
-  version,
-  homepage,
-};
-
-// For debugging
-//if (process.env.node_env === 'development') {
-window.cornerstone = cornerstone;
-window.cornerstoneWADOImageLoader = cornerstoneWADOImageLoader;
-//}
-
-cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
-cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
-
-OHIF.user.getAccessToken = () => {
-  // TODO: Get the Redux store from somewhere else
-  const state = window.store.getState();
-  if (!state.oidc || !state.oidc.user) {
-    return;
+export function setConfiguration(appConfig) {
+  let homepage;
+  const { process } = window;
+  if (process && process.env && process.env.PUBLIC_URL) {
+    homepage = process.env.PUBLIC_URL;
  }

-  return state.oidc.user.access_token;
-};
+  window.info = {
+    version,
+    homepage,
+  };

-cornerstoneWADOImageLoader.configure({
-  beforeSend: function(xhr) {
-    const headers = OHIF.DICOMWeb.getAuthorizationHeader();
+  // For debugging
+  //if (process.env.node_env === 'development') {
+  window.cornerstone = cornerstone;
+  window.cornerstoneWADOImageLoader = cornerstoneWADOImageLoader;
+  //}

-    if (headers.Authorization) {
-      xhr.setRequestHeader('Authorization', headers.Authorization);
+  cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
+  cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
+
+  OHIF.user.getAccessToken = () => {
+    // TODO: Get the Redux store from somewhere else
+    const state = window.store.getState();
+    if (!state.oidc || !state.oidc.user) {
+      return;
    }
-  },
-});
+
+    return state.oidc.user.access_token;
+  };
+
+  OHIF.errorHandler.getHTTPErrorHandler = () => {
+    // const { appConfig = {} } = AppContext;
+
+    return appConfig.httpErrorHandler;
+  };
+
+  cornerstoneWADOImageLoader.configure({
+    beforeSend: function(xhr) {
+      const headers = OHIF.DICOMWeb.getAuthorizationHeader();
+
+      if (headers.Authorization) {
+        xhr.setRequestHeader('Authorization', headers.Authorization);
+      }
+    },
+    errorInterceptor: error => {
+      // const { appConfig = {} } = AppContext;
+
+      if (typeof appConfig.httpErrorHandler === 'function') {
+        appConfig.httpErrorHandler(error);
+      }
+    },
+  });
+}
@@ -1,15 +0,0 @@
-// TODO: REPLACE THIS WITH A CONTEXT PROVIDER
-// EVERYTHING IN `VIEWER.JS` COULD USE THIS FOR APPROPRIATE CONTEXT
-import ToolbarRow from './ToolbarRow';
-import { connect } from 'react-redux';
-import { getActiveContexts } from './../store/layout/selectors.js';
-
-const mapStateToProps = state => {
-  return {
-    activeContexts: getActiveContexts(state),
-  };
-};
-
-const ConnectedToolbarRow = connect(mapStateToProps)(ToolbarRow);
-
-export default ConnectedToolbarRow;
@@ -16,6 +16,7 @@ import { commandsManager, extensionManager } from './../App.js';

 import ConnectedCineDialog from './ConnectedCineDialog';
 import ConnectedLayoutButton from './ConnectedLayoutButton';
+import { withAppContext } from '../context/AppContext';

 class ToolbarRow extends Component {
  // TODO: Simplify these? isOpen can be computed if we say "any" value for selected,
@@ -381,5 +382,5 @@ function _handleBuiltIn(button) {
 }

 export default withTranslation(['Common', 'ViewportDownloadForm'])(
-  withModal(withDialog(ToolbarRow))
+  withModal(withDialog(withAppContext(ToolbarRow)))
 );
Author	SHA1	Message	Date
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
				`@@ -0,0 +1 @@`
				`export { default as ErrorBoundary } from './ErrorBoundary';`