chore(release): publish [skip ci]

- @ohif/extension-cornerstone@2.12.1 - @ohif/extension-dicom-html@1.3.11 - @ohif/extension-dicom-rt@0.7.1 - @ohif/extension-dicom-segmentation@0.7.1 - @ohif/extension-dicom-tag-browser@0.2.12 - @ohif/extension-vtk@1.12.2 - @ohif/core@2.15.1 - @ohif/viewer@4.11.2
fix regression not showing warnings list on thumbnail for segmentations (#2563 )
2021-09-28 12:14:17 +00:00 · 2021-09-28 14:07:29 +02:00 · 2021-09-27 14:23:37 +02:00 · 2021-09-27 14:20:38 +02:00 · 2021-09-24 11:04:33 +00:00 · 2021-09-24 12:58:30 +02:00
72 changed files with 1887 additions and 557 deletions
@@ -0,0 +1 @@
+custom: https://giving.massgeneral.org/ohif
@@ -1,18 +0,0 @@
---
-name: "\U0001F917 Support Question"
-about: "I have a question \U0001F4AC"
-title: ''
-labels: 'Community: Question :question:, Triage :white_flag:'
-assignees: ''
---
-
-> :hand: We are a small team with limited resources. Your question is much more
-> likely to be answered if it is
-> [a good question](https://stackoverflow.com/help/how-to-ask)
-
-**Description**
-
-Questions can often be answered by our documentation. Unable to find an answer
-in our docs? We'll try to help. In the meantime, if you answer your own
-question, please respond with the answer here so that others may benefit as
-well. Better yet, open a PR to expand our docs ^\_^
@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: 🤗 Support Question
+    url: https://community.ohif.org/
+    about: Please use our forum if you have questions or need help.
@@ -10,6 +10,9 @@ junit.xml
 coverage/
 .docz/
 *.js.map
+.yarn
+platform/docs/.docusaurus
+platform/ui/storybook-static

 # YALC (for Erik)
 .yalc
@@ -67,6 +67,33 @@ window.config = {
  extensions: [],
  showStudyList: true,
  filterQueryParam: false,
+  /**
+   * Disable caching of servers configuration.
+   *
+   * There will be no effect if you update the servers property of this config
+   * while your application is running because this property is cached in local storage.
+   */
+  disableServersCache: false,
+  /**
+   * OHIF's study prefetcher configuration.
+   *
+   * @param {boolean} enabled Whether to enable/disable OHIF's study prefetcher
+   * @param {('all'|'closest'|'downward'|'upward'|'topdown')} order Fetching order: all display sets, the closest ones, downward or top down fashion based on the currently selected display set
+   * @param {number} displaySetCount How much display sets should be prefetched at once (note: this attribute is ignored if order was set to 'all')
+   * @param {boolean} preventCache Prevent images to be cached in Cornerstone Tools's request pool manager
+   * @param {number} prefetchDisplaySetsTimeout Prefetch timeout
+   * @param {boolean} displayProgress Whether to display or not the progress bar in the display set
+   * @param {boolean} includeActiveDisplaySet Include or not the active display set while prefetching
+   */
+  studyPrefetcher: {
+    enabled: true,
+    order: 'all',
+    displaySetCount: 1,
+    preventCache: false,
+    prefetchDisplaySetsTimeout: 300,
+    displayProgress: false,
+    includeActiveDisplaySet: true,
+  },
  servers: {
    dicomWeb: [
      {
@@ -81,7 +108,14 @@ window.config = {
      },
    ],
  },
-  // Supported Keys: https://craig.is/killing/mice
+  /**
+   * Hotkey definitions.
+   * Supported Keys: https://craig.is/killing/mice
+   *
+   * @param {string} commandName
+   * @param {string} label
+   * @param {array} keys
+   */
  hotkeys: [
    { commandName: 'rotateViewportCW', label: 'Rotate Right', keys: ['r'] },
    { commandName: 'rotateViewportCCW', label: 'Rotate Left', keys: ['l'] },
@@ -97,14 +131,16 @@ window.config = {
      keys: ['v'],
    },
  ],
-  /* Configuration passed to the bundled cornerstone extension
+  /**
+   * Configuration passed to the bundled cornerstone extension
   *
   * The cornerstone extension is currently tightly coupled to the platform.
   * Until we're able to decouple it, this key will serve as a workaround to
   * pass it configuration.
+   *
+   * @param {boolean} hideHandles Whether to show/hide annotation "handles"
   */
  cornerstoneExtensionConfig: {
-    /* Whether to show/hide annotation "handles" */
    hideHandles: true,
  },
 };
@@ -0,0 +1,37 @@
+# Viewer: Study Prefetcher & Stack Prefetch
+
+Prefetching the stack of images of the active viewport is enabled by default for
+cornerstone viewports via cornerstone tools's stack prefetch functionality.
+
+In order to have a more customizable alternative for prefetching, OHIF provides
+a built-in study prefetcher functionality which allows the user to set the order
+in which the display sets are prefetched, the granularity, the timeout and
+whether or not display a progress bar in the display set (close to the thumbnail
+image) in the study browser.
+
+You can customize these options via the viewer's configuration:
+
+```js
+window.config = {
+  /**
+   * OHIF's study prefetcher configuration.
+   *
+   * @param {boolean} enabled Whether to enable/disable OHIF's study prefetcher
+   * @param {('all'|'closest'|'downward'|'upward'|'topdown')} order Fetching order: all display sets, the closest ones, downward or top down fashion based on the currently selected display set
+   * @param {number} displaySetCount How much display sets should be prefetched at once (note: this attribute is ignored if order was set to 'all')
+   * @param {boolean} preventCache Prevent images to be cached in Cornerstone Tools's request pool manager
+   * @param {number} prefetchDisplaySetsTimeout Prefetch timeout
+   * @param {boolean} displayProgress Whether to display or not the progress bar in the display set
+   * @param {boolean} includeActiveDisplaySet Include or not the active display set while prefetching
+   */
+  studyPrefetcher: {
+    enabled: true,
+    order: 'all',
+    displaySetCount: 1,
+    preventCache: false,
+    prefetchDisplaySetsTimeout: 300,
+    displayProgress: false,
+    includeActiveDisplaySet: true,
+  },
+};
+```
@@ -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.

+## [2.12.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.12.0...@ohif/extension-cornerstone@2.12.1) (2021-09-28)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [2.12.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.11.0...@ohif/extension-cornerstone@2.12.0) (2021-09-23)
+
+
+### Features
+
+* Update to WADO Image Loader 4.0.3 to add dynamically imported WebAssembly codec support 🚀 ([#2537](https://github.com/OHIF/Viewers/issues/2537)) ([489d4b0](https://github.com/OHIF/Viewers/commit/489d4b0584f4657ceda1c5b9b68d5e9733827e47))
+
+
+
+
+
+# [2.11.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.10.10...@ohif/extension-cornerstone@2.11.0) (2021-09-09)
+
+
+### Features
+
+* OHIF-1000: Study prefetcher ([#2466](https://github.com/OHIF/Viewers/issues/2466)) ([8f26045](https://github.com/OHIF/Viewers/commit/8f2604509d24092b721f1333289d838820d68cac))
+
+
+
+
+
 ## [2.10.10](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.10.9...@ohif/extension-cornerstone@2.10.10) (2021-07-26)


@@ -85,12 +85,32 @@ Tools can be configured through extension configuration using the tools key:
  ...
 ```

+## Stack prefetch configuration
+
+Stack prefetch can be configured through extension configuration using the
+stackPrefetch key:
+
+```js
+  ...
+  cornerstoneExtensionConfig: {
+    stackPrefetch: {
+      enabled: true,
+      maxImagesToPrefetch: Infinity,
+      preserveExistingPool: false,
+      maxSimultaneousRequests: 20,
+    },
+  },
+  ...
+```
+
 ## Annotate Tools Configuration

-*We currently support one property for annotation tools.*
+_We currently support one property for annotation tools._

 ### Hide handles
-This extension configuration allows you to toggle on/off handle rendering for all annotate tools:
+
+This extension configuration allows you to toggle on/off handle rendering for
+all annotate tools:

 ```js
  ...
@@ -119,3 +139,4 @@ This extension configuration allows you to toggle on/off handle rendering for al
 [cornerstone-tools]: https://github.com/cornerstonejs/cornerstoneTools
 [cornerstone]: https://github.com/cornerstonejs/cornerstone
 <!-- prettier-ignore-end -->
+```
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone",
-  "version": "2.10.10",
+  "version": "2.12.1",
  "description": "OHIF extension for Cornerstone",
  "author": "OHIF",
  "license": "MIT",
@@ -32,12 +32,12 @@
  "peerDependencies": {
    "@ohif/core": "^0.50.0",
    "@ohif/ui": "^0.50.0",
-    "cornerstone-core": "^2.2.8",
-    "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "^4.20.1",
-    "cornerstone-wado-image-loader": "^3.1.0",
-    "dcmjs": "0.18.8",
-    "dicom-parser": "^1.8.3",
+    "cornerstone-core": "^2.5.0",
+    "cornerstone-math": "^0.1.9",
+    "cornerstone-tools": "^6.0.0",
+    "cornerstone-wado-image-loader": "^4.0.3",
+    "dcmjs": "0.18.9",
+    "dicom-parser": "^1.8.9",
    "hammerjs": "^2.0.8",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
@@ -51,6 +51,6 @@
    "classnames": "^2.2.6",
    "lodash.merge": "^4.6.2",
    "lodash.throttle": "^4.1.1",
-    "react-cornerstone-viewport": "4.0.5"
+    "react-cornerstone-viewport": "4.1.1"
  }
 }
@@ -53,7 +53,11 @@ const mapStateToProps = (state, ownProps) => {
    // Currently justing using escape hatch + commands
    // activeTool: activeButton && activeButton.command,
    ...dataFromStore,
-    isStackPrefetchEnabled: isActive,
+    isStackPrefetchEnabled: ownProps.hasOwnProperty('isStackPrefetchEnabled')
+      ? ownProps.isStackPrefetchEnabled
+      : ownProps.stackPrefetch
+      ? ownProps.stackPrefetch.enabled
+      : isActive,
    isPlaying,
    frameRate,
    //stack: viewportSpecificData.stack,
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';

-import OHIFCornerstoneViewportOverlay from './components/OHIFCornerstoneViewportOverlay'
+import OHIFCornerstoneViewportOverlay from './components/OHIFCornerstoneViewportOverlay';
 import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport';
 import OHIF from '@ohif/core';
 import PropTypes from 'prop-types';
@@ -15,6 +15,7 @@ class OHIFCornerstoneViewport extends Component {

  static defaultProps = {
    customProps: {},
+    isStackPrefetchEnabled: true,
  };

  static propTypes = {
@@ -23,6 +24,8 @@ class OHIFCornerstoneViewport extends Component {
    viewportIndex: PropTypes.number,
    children: PropTypes.node,
    customProps: PropTypes.object,
+    stackPrefetch: PropTypes.object,
+    isStackPrefetchEnabled: PropTypes.bool,
  };

  static id = 'OHIFCornerstoneViewport';
@@ -180,7 +183,7 @@ class OHIFCornerstoneViewport extends Component {

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

    const warningsOverlay = props => {
-      return <OHIFCornerstoneViewportOverlay {...props} inconsistencyWarnings={inconsistencyWarnings} />
+      return (
+        <OHIFCornerstoneViewportOverlay
+          {...props}
+          inconsistencyWarnings={inconsistencyWarnings}
+        />
+      );
    };

    return (
@@ -244,10 +252,11 @@ class OHIFCornerstoneViewport extends Component {
          onNewImageDebounced={newImageHandler}
          onNewImageDebounceTime={300}
          viewportOverlayComponent={warningsOverlay}
+          stackPrefetch={this.props.stackPrefetch}
+          isStackPrefetchEnabled={this.props.isStackPrefetchEnabled}
          // ~~ Connected (From REDUX)
          // frameRate={frameRate}
          // isPlaying={false}
-          // isStackPrefetchEnabled={true}
          // onElementEnabled={() => {}}
          // setViewportActive{() => {}}
          {...this.props.customProps}
@@ -36,7 +36,7 @@ export default {
  preRegistration({ servicesManager, configuration = {} }) {
    init({ servicesManager, configuration });
  },
-  getViewportModule({ commandsManager }) {
+  getViewportModule({ commandsManager, appConfig }) {
    const ExtendedOHIFCornerstoneViewport = props => {
      /**
       * TODO: This appears to be used to set the redux parameters for
@@ -48,8 +48,17 @@ export default {
        jumpData.refreshViewports = false;
        commandsManager.runCommand('jumpToImage', jumpData);
      };
+
+      const { studyPrefetcher } = appConfig;
+      const isStackPrefetchEnabled =
+        studyPrefetcher && !studyPrefetcher.enabled;
+
      return (
-        <OHIFCornerstoneViewport {...props} onNewImage={onNewImageHandler} />
+        <OHIFCornerstoneViewport
+          {...props}
+          onNewImage={onNewImageHandler}
+          isStackPrefetchEnabled={isStackPrefetchEnabled}
+        />
      );
    };

@@ -37,7 +37,14 @@ export default function init({ servicesManager, configuration }) {
    }
  };

-  const { csToolsConfig } = configuration;
+  const {
+    csToolsConfig,
+    stackPrefetch = {
+      maxImagesToPrefetch: Infinity,
+      preserveExistingPool: false,
+      maxSimultaneousRequests: 20,
+    },
+  } = configuration;
  const metadataProvider = OHIF.cornerstone.metadataProvider;

  cornerstone.metaData.addProvider(
@@ -52,7 +59,7 @@ export default function init({ servicesManager, configuration }) {
    autoResizeViewports: false,
  };

-  initCornerstoneTools(defaultCsToolsConfig);
+  initCornerstoneTools({ ...defaultCsToolsConfig, ...stackPrefetch });

  const toolsGroupedByType = {
    touch: [csTools.PanMultiTouchTool, csTools.ZoomTouchPinchTool],
@@ -37,8 +37,8 @@ export default function(configuration = {}) {

  // Configure stack prefetch
  cornerstoneTools.stackPrefetch.setConfiguration({
-    maxImagesToPrefetch: Infinity,
-    preserveExistingPool: false,
-    maxSimultaneousRequests: 20,
+    maxImagesToPrefetch: configuration.maxImagesToPrefetch,
+    preserveExistingPool: configuration.preserveExistingPool,
+    maxSimultaneousRequests: configuration.maxSimultaneousRequests,
  });
 }
@@ -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.3.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-debugging@0.2.2...@ohif/extension-debugging@0.3.0) (2021-09-23)
+
+
+### Features
+
+* Update to WADO Image Loader 4.0.3 to add dynamically imported WebAssembly codec support 🚀 ([#2537](https://github.com/OHIF/Viewers/issues/2537)) ([489d4b0](https://github.com/OHIF/Viewers/commit/489d4b0584f4657ceda1c5b9b68d5e9733827e47))
+
+
+
+
+
 ## [0.2.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-debugging@0.2.1...@ohif/extension-debugging@0.2.2) (2021-06-03)

 **Note:** Version bump only for package @ohif/extension-debugging
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-debugging",
-  "version": "0.2.2",
+  "version": "0.3.0",
  "description": "OHIF extension for debugging.",
  "author": "OHIF",
  "license": "MIT",
@@ -28,7 +28,7 @@
  },
  "peerDependencies": {
    "@ohif/core": "^2.6.0",
-    "dicom-parser": "^1.8.3"
+    "dicom-parser": "^1.8.9"
  },
  "dependencies": {
    "@babel/runtime": "^7.5.5",
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.3.11](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.3.10...@ohif/extension-dicom-html@1.3.11) (2021-09-28)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
 ## [1.3.10](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.3.9...@ohif/extension-dicom-html@1.3.10) (2021-06-02)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-html",
-  "version": "1.3.10",
+  "version": "1.3.11",
  "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.18.8",
+    "dcmjs": "0.18.9",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.1.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@1.0.6...@ohif/extension-dicom-pdf@1.1.0) (2021-09-23)
+
+
+### Features
+
+* Update to WADO Image Loader 4.0.3 to add dynamically imported WebAssembly codec support 🚀 ([#2537](https://github.com/OHIF/Viewers/issues/2537)) ([489d4b0](https://github.com/OHIF/Viewers/commit/489d4b0584f4657ceda1c5b9b68d5e9733827e47))
+
+
+
+
+
 ## [1.0.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@1.0.5...@ohif/extension-dicom-pdf@1.0.6) (2020-09-10)

 **Note:** Version bump only for package @ohif/extension-dicom-pdf
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-pdf",
-  "version": "1.0.6",
+  "version": "1.1.0",
  "description": "OHIF extension for Dicom PDF",
  "author": "OHIF",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "peerDependencies": {
    "@ohif/core": "^0.50.0",
-    "dicom-parser": "^1.8.3",
+    "dicom-parser": "^1.8.9",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.7.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.7.0...@ohif/extension-dicom-rt@0.7.1) (2021-09-28)
+
+**Note:** Version bump only for package @ohif/extension-dicom-rt
+
+
+
+
+
+# [0.7.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.6.14...@ohif/extension-dicom-rt@0.7.0) (2021-09-23)
+
+
+### Features
+
+* Update to WADO Image Loader 4.0.3 to add dynamically imported WebAssembly codec support 🚀 ([#2537](https://github.com/OHIF/Viewers/issues/2537)) ([489d4b0](https://github.com/OHIF/Viewers/commit/489d4b0584f4657ceda1c5b9b68d5e9733827e47))
+
+
+
+
+
+## [0.6.14](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.6.13...@ohif/extension-dicom-rt@0.6.14) (2021-09-03)
+
+**Note:** Version bump only for package @ohif/extension-dicom-rt
+
+
+
+
+
 ## [0.6.13](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.6.12...@ohif/extension-dicom-rt@0.6.13) (2021-06-02)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-rt",
-  "version": "0.6.13",
+  "version": "0.7.1",
  "description": "OHIF extension for rendering DICOM RTSTRUCTs on top of cornerstone images.",
  "author": "OHIF",
  "license": "MIT",
@@ -29,9 +29,9 @@
  },
  "peerDependencies": {
    "@ohif/core": "^0.50.0",
-    "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "^4.20.1",
-    "dcmjs": "0.18.8",
+    "cornerstone-core": "^2.5.0",
+    "cornerstone-tools": "^6.0.0",
+    "dcmjs": "0.18.9",
    "gl-matrix": "^3.3.0",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
@@ -1,11 +1,12 @@
 import React from 'react';
+import { utils } from '@ohif/core';
+
 import init from './init.js';
 import sopClassHandlerModule from './OHIFDicomRTStructSopClassHandler';
 import id from './id.js';
 import RTPanel from './components/RTPanel/RTPanel';
 import { version } from '../package.json';

-import { utils } from '@ohif/core';
 const { studyMetadataManager } = utils;

 export default {
@@ -42,12 +43,48 @@ export default {
      );
    };

+    const RTPanelTabChangedEvent = 'rt-panel-tab-updated';
+
+    /**
+     * Trigger's an event to update the state of the panel's RoundedButtonGroup.
+     *
+     * This is required to avoid extension state
+     * coupling with the viewer's ToolbarRow component.
+     *
+     * @param {object} data
+     */
+    const triggerRTPanelUpdatedEvent = data => {
+      const event = new CustomEvent(RTPanelTabChangedEvent, {
+        detail: data,
+      });
+      document.dispatchEvent(event);
+    };
+
+    const onRTStructsLoaded = ({ detail }) => {
+      const { rtStructDisplaySet, referencedDisplaySet } = detail;
+
+      const studyMetadata = studyMetadataManager.get(
+        rtStructDisplaySet.StudyInstanceUID
+      );
+      const referencedDisplaysets = studyMetadata.getDerivedDatasets({
+        referencedSeriesInstanceUID: referencedDisplaySet.SeriesInstanceUID,
+        Modality: 'RTSTRUCT',
+      });
+      triggerRTPanelUpdatedEvent({
+        badgeNumber: referencedDisplaysets.length,
+        target: 'rt-panel',
+      });
+    };
+
+    document.addEventListener('extensiondicomrtrtloaded', onRTStructsLoaded);
+
    return {
      menuOptions: [
        {
          icon: 'list',
          label: 'RTSTRUCT',
          target: 'rt-panel',
+          stateEvent: RTPanelTabChangedEvent,
          isDisabled: (studies, activeViewport) => {
            if (!studies) {
              return true;
@@ -90,11 +90,11 @@ export default async function loadRTStruct(
      const sopInstanceUID = ContourImageSequence
        ? ContourImageSequence.ReferencedSOPInstanceUID
        : _getClosestSOPInstanceUID(
-          ContourData,
-          ContourGeometricType,
-          NumberOfContourPoints,
-          imageIdSopInstanceUidPairs
-        );
+            ContourData,
+            ContourGeometricType,
+            NumberOfContourPoints,
+            imageIdSopInstanceUidPairs
+          );
      const imageId = _getImageId(imageIdSopInstanceUidPairs, sopInstanceUID);

      if (!imageId) {
@@ -171,7 +171,13 @@ export default async function loadRTStruct(
   * allows us to easily watch the module or the rtstruct loading process in any other component
   * without subscribing to external events.
   */
-  const event = new CustomEvent('extensiondicomrtrtloaded');
+  const event = new CustomEvent('extensiondicomrtrtloaded', {
+    detail: {
+      rtStructDisplaySet,
+      referencedDisplaySet,
+      studies,
+    },
+  });
  document.dispatchEvent(event);
 }

@@ -299,7 +305,9 @@ const _getImageId = (imageIdSopInstanceUidPairs, sopInstanceUID) => {
      imageIdSopInstanceUidPairsEntry.sopInstanceUID === sopInstanceUID
  );

-  return imageIdSopInstanceUidPairsEntry ? imageIdSopInstanceUidPairsEntry.imageId : null;
+  return imageIdSopInstanceUidPairsEntry
+    ? imageIdSopInstanceUidPairsEntry.imageId
+    : null;
 };

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

+## [0.7.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.7.0...@ohif/extension-dicom-segmentation@0.7.1) (2021-09-28)
+
+**Note:** Version bump only for package @ohif/extension-dicom-segmentation
+
+
+
+
+
+# [0.7.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.6.11...@ohif/extension-dicom-segmentation@0.7.0) (2021-09-23)
+
+
+### Features
+
+* Update to WADO Image Loader 4.0.3 to add dynamically imported WebAssembly codec support 🚀 ([#2537](https://github.com/OHIF/Viewers/issues/2537)) ([489d4b0](https://github.com/OHIF/Viewers/commit/489d4b0584f4657ceda1c5b9b68d5e9733827e47))
+
+
+
+
+
+## [0.6.11](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.6.10...@ohif/extension-dicom-segmentation@0.6.11) (2021-09-03)
+
+**Note:** Version bump only for package @ohif/extension-dicom-segmentation
+
+
+
+
+
 ## [0.6.10](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.6.9...@ohif/extension-dicom-segmentation@0.6.10) (2021-06-02)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-segmentation",
-  "version": "0.6.10",
+  "version": "0.7.1",
  "description": "OHIF extension for viewing segmentations in the 2D MPR view",
  "author": "OHIF",
  "license": "MIT",
@@ -29,9 +29,9 @@
  },
  "peerDependencies": {
    "@ohif/core": "^0.50.0",
-    "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "^4.20.1",
-    "dcmjs": "0.18.8",
+    "cornerstone-core": "^2.5.0",
+    "cornerstone-tools": "^6.0.0",
+    "dcmjs": "0.18.9",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
@@ -224,16 +224,20 @@ const SegmentationPanel = ({
        )
      );
    };
-  }, [activeIndex, viewports]);
+  }, [
+    activeIndex,
+    updateSegmentationComboBox,
+    viewports,
+  ]);

-  const updateSegmentationComboBox = (e) => {
+  const updateSegmentationComboBox = e => {
    const index = e.detail.activatedLabelmapIndex;
    if (index !== -1) {
      setState(state => ({ ...state, selectedSegmentation: index }));
    } else {
      cleanSegmentationComboBox();
    }
-  }
+  };

  const cleanSegmentationComboBox = () => {
    setState(state => ({
@@ -245,7 +249,7 @@ const SegmentationPanel = ({
      isDisabled: true,
      selectedSegmentation: -1,
    }));
-  }
+  };

  const refreshSegmentations = () => {
    const activeViewport = getActiveViewport();
@@ -309,7 +313,8 @@ const SegmentationPanel = ({
    );

    const filteredReferencedSegDisplaysets = referencedSegDisplaysets.filter(
-      (segDisplay => segDisplay.loadError !== true));
+      segDisplay => segDisplay.loadError !== true
+    );

    return filteredReferencedSegDisplaysets.map((displaySet, index) => {
      const {
@@ -1,9 +1,12 @@
 import React from 'react';
+import OHIF from '@ohif/core';
+
 import init from './init.js';
 import toolbarModule from './toolbarModule.js';
 import getSopClassHandlerModule from './getOHIFDicomSegSopClassHandler.js';
 import SegmentationPanel from './components/SegmentationPanel/SegmentationPanel.js';
 import { version } from '../package.json';
+const { studyMetadataManager } = OHIF.utils;

 export default {
  /**
@@ -79,12 +82,50 @@ export default {
      );
    };

+    const SegmentationPanelTabUpdatedEvent = 'segmentation-panel-tab-updated';
+
+    /**
+     * Trigger's an event to update the state of the panel's RoundedButtonGroup.
+     *
+     * This is required to avoid extension state
+     * coupling with the viewer's ToolbarRow component.
+     *
+     * @param {object} data
+     */
+    const triggerSegmentationPanelTabUpdatedEvent = data => {
+      const event = new CustomEvent(SegmentationPanelTabUpdatedEvent, {
+        detail: data,
+      });
+      document.dispatchEvent(event);
+    };
+
+    const onSegmentationsLoaded = ({ detail }) => {
+      const { segDisplaySet, segMetadata } = detail;
+      const studyMetadata = studyMetadataManager.get(
+        segDisplaySet.StudyInstanceUID
+      );
+      const referencedDisplaysets = studyMetadata.getDerivedDatasets({
+        referencedSeriesInstanceUID: segMetadata.seriesInstanceUid,
+        Modality: 'SEG',
+      });
+      triggerSegmentationPanelTabUpdatedEvent({
+        badgeNumber: referencedDisplaysets.length,
+        target: 'segmentation-panel',
+      });
+    };
+
+    document.addEventListener(
+      'extensiondicomsegmentationsegloaded',
+      onSegmentationsLoaded
+    );
+
    return {
      menuOptions: [
        {
          icon: 'list',
          label: 'Segmentations',
          target: 'segmentation-panel',
+          stateEvent: SegmentationPanelTabUpdatedEvent,
          isDisabled: studies => {
            if (!studies) {
              return true;
@@ -59,7 +59,16 @@ export default async function loadSegmentation(
   * without subscribing to external events.
   */
  console.log('Segmentation loaded.');
-  const event = new CustomEvent('extensiondicomsegmentationsegloaded');
+  const event = new CustomEvent('extensiondicomsegmentationsegloaded', {
+    detail: {
+      imageIds,
+      segDisplaySet,
+      labelmapBuffer,
+      segMetadata,
+      segmentsOnFrame,
+      labelmapSegments,
+    },
+  });
  document.dispatchEvent(event);

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

+## [0.2.12](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-tag-browser@0.2.11...@ohif/extension-dicom-tag-browser@0.2.12) (2021-09-28)
+
+**Note:** Version bump only for package @ohif/extension-dicom-tag-browser
+
+
+
+
+
 ## [0.2.11](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-tag-browser@0.2.10...@ohif/extension-dicom-tag-browser@0.2.11) (2021-06-03)

 **Note:** Version bump only for package @ohif/extension-dicom-tag-browser
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-dicom-tag-browser",
-  "version": "0.2.11",
+  "version": "0.2.12",
  "description": "OHIF extension for checking DICOM headers.",
  "author": "OHIF",
  "license": "MIT",
@@ -28,7 +28,7 @@
  },
  "peerDependencies": {
    "@ohif/core": "^2.6.0",
-    "dcmjs": "0.18.8",
+    "dcmjs": "0.18.9",
    "react": "^16.8.6"
  },
  "dependencies": {
@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.12.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.1...@ohif/extension-vtk@1.12.2) (2021-09-28)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.12.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.12.0...@ohif/extension-vtk@1.12.1) (2021-09-24)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+# [1.12.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.11.18...@ohif/extension-vtk@1.12.0) (2021-09-23)
+
+
+### Features
+
+* Update to WADO Image Loader 4.0.3 to add dynamically imported WebAssembly codec support 🚀 ([#2537](https://github.com/OHIF/Viewers/issues/2537)) ([489d4b0](https://github.com/OHIF/Viewers/commit/489d4b0584f4657ceda1c5b9b68d5e9733827e47))
+
+
+
+
+
+## [1.11.18](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.11.17...@ohif/extension-vtk@1.11.18) (2021-09-13)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.11.17](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.11.16...@ohif/extension-vtk@1.11.17) (2021-09-09)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.11.16](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.11.15...@ohif/extension-vtk@1.11.16) (2021-09-03)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.11.15](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.11.14...@ohif/extension-vtk@1.11.15) (2021-08-30)
+
+
+### Bug Fixes
+
+* MPR metadata parsing for spacings ([#2517](https://github.com/OHIF/Viewers/issues/2517)) ([715dfc5](https://github.com/OHIF/Viewers/commit/715dfc556a3883de31d74012dcc99e431d91f57d))
+
+
+
+
+
 ## [1.11.14](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.11.13...@ohif/extension-vtk@1.11.14) (2021-06-03)

 **Note:** Version bump only for package @ohif/extension-vtk
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-vtk",
-  "version": "1.11.14",
+  "version": "1.12.2",
  "description": "OHIF extension for VTK.js",
  "author": "OHIF",
  "license": "MIT",
@@ -32,11 +32,11 @@
    "@ohif/core": "^0.50.0",
    "@ohif/i18n": "^0.50.0",
    "@ohif/ui": "^0.50.0",
-    "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "^4.20.1",
-    "cornerstone-wado-image-loader": "^3.1.0",
-    "dcmjs": "0.18.8",
-    "dicom-parser": "^1.8.3",
+    "cornerstone-core": "^2.5.0",
+    "cornerstone-tools": "^6.0.0",
+    "cornerstone-wado-image-loader": "^4.0.3",
+    "dcmjs": "0.18.9",
+    "dicom-parser": "^1.8.9",
    "i18next": "^17.0.3",
    "i18next-browser-languagedetector": "^3.0.1",
    "prop-types": "^15.7.2",
@@ -50,14 +50,14 @@
  "dependencies": {
    "@babel/runtime": "^7.5.5",
    "lodash.throttle": "^4.1.1",
-    "react-vtkjs-viewport": "^0.14.2"
+    "react-vtkjs-viewport": "^0.14.4"
  },
  "devDependencies": {
-    "@ohif/core": "^2.13.13",
-    "@ohif/ui": "^1.9.2",
-    "cornerstone-tools": "^4.20.1",
-    "cornerstone-wado-image-loader": "^3.1.0",
-    "dicom-parser": "^1.8.3",
+    "@ohif/core": "^2.15.1",
+    "@ohif/ui": "^1.10.2",
+    "cornerstone-tools": "^6.0.0",
+    "cornerstone-wado-image-loader": "^4.0.3",
+    "dicom-parser": "^1.8.9",
    "gh-pages": "^2.0.1",
    "i18next": "^17.0.3",
    "i18next-browser-languagedetector": "^3.0.1",
@@ -72,7 +72,7 @@ class OHIFVTKViewport extends Component {
  };

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

  static id = 'OHIFVTKViewport';
@@ -271,7 +271,7 @@ class OHIFVTKViewport extends Component {

    volumeMapper.setSampleDistance(sampleDistance);

-    // Be generous to surpress warnings, as the logging really hurts performance.
+    // Be generous to suppress warnings, as the logging really hurts performance.
    // TODO: maybe we should auto adjust samples to 1000.
    volumeMapper.setMaximumSamplesPerRay(4000);

@@ -398,7 +398,7 @@ class OHIFVTKViewport extends Component {

    if (
      displaySet.displaySetInstanceUID !==
-        prevDisplaySet.displaySetInstanceUID ||
+      prevDisplaySet.displaySetInstanceUID ||
      displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
      displaySet.frameIndex !== prevDisplaySet.frameIndex
    ) {
@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [2.15.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.15.0...@ohif/core@2.15.1) (2021-09-28)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+# [2.15.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.14.1...@ohif/core@2.15.0) (2021-09-23)
+
+
+### Features
+
+* Update to WADO Image Loader 4.0.3 to add dynamically imported WebAssembly codec support 🚀 ([#2537](https://github.com/OHIF/Viewers/issues/2537)) ([489d4b0](https://github.com/OHIF/Viewers/commit/489d4b0584f4657ceda1c5b9b68d5e9733827e47))
+
+
+
+
+
+## [2.14.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.14.0...@ohif/core@2.14.1) (2021-09-13)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+# [2.14.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.13.15...@ohif/core@2.14.0) (2021-09-09)
+
+
+### Features
+
+* OHIF-1000: Study prefetcher ([#2466](https://github.com/OHIF/Viewers/issues/2466)) ([8f26045](https://github.com/OHIF/Viewers/commit/8f2604509d24092b721f1333289d838820d68cac))
+
+
+
+
+
+## [2.13.15](https://github.com/OHIF/Viewers/compare/@ohif/core@2.13.14...@ohif/core@2.13.15) (2021-09-03)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.13.14](https://github.com/OHIF/Viewers/compare/@ohif/core@2.13.13...@ohif/core@2.13.14) (2021-08-30)
+
+
+### Bug Fixes
+
+* MPR metadata parsing for spacings ([#2517](https://github.com/OHIF/Viewers/issues/2517)) ([715dfc5](https://github.com/OHIF/Viewers/commit/715dfc556a3883de31d74012dcc99e431d91f57d))
+
+
+
+
+
 ## [2.13.13](https://github.com/OHIF/Viewers/compare/@ohif/core@2.13.12...@ohif/core@2.13.13) (2021-06-03)

 **Note:** Version bump only for package @ohif/core
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/core",
-  "version": "2.13.13",
+  "version": "2.15.1",
  "description": "Generic business logic for web-based medical imaging applications",
  "author": "OHIF Core Team",
  "license": "MIT",
@@ -31,15 +31,15 @@
    "test:unit:ci": "jest --ci --runInBand --collectCoverage"
  },
  "peerDependencies": {
-    "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "^4.20.1",
-    "cornerstone-wado-image-loader": "^3.1.0",
-    "dicom-parser": "^1.8.3"
+    "cornerstone-core": "^2.5.0",
+    "cornerstone-tools": "^6.0.0",
+    "cornerstone-wado-image-loader": "^4.0.3",
+    "dicom-parser": "^1.8.9"
  },
  "dependencies": {
    "@babel/runtime": "^7.5.5",
    "ajv": "^6.10.0",
-    "dcmjs": "0.18.8",
+    "dcmjs": "0.18.9",
    "dicomweb-client": "^0.8.1",
    "immer": "6.0.2",
    "isomorphic-base64": "^1.0.2",
@@ -1,7 +1,10 @@
 import dcmjs from 'dcmjs';
+import classes from '../classes';

 import findInstanceMetadataBySopInstanceUID from './utils/findInstanceMetadataBySopInstanceUid';

+const { LogManager } = classes;
+
 /**
 * Function to parse the part10 array buffer that comes from a DICOM Structured report into measurementData
 * measurementData format is a viewer specific format to be stored into the redux and consumed by other components
@@ -20,9 +23,21 @@ const parseDicomStructuredReport = (part10SRArrayBuffer, displaySets) => {
  );

  const { MeasurementReport } = dcmjs.adapters.Cornerstone;
-  const storedMeasurementByToolType = MeasurementReport.generateToolState(
-    dataset
-  );
+
+  let storedMeasurementByToolType;
+  try {
+    storedMeasurementByToolType = MeasurementReport.generateToolState(dataset);
+  } catch (error) {
+    const seriesDescription = dataset.SeriesDescription || '';
+    LogManager.publish(LogManager.EVENTS.OnLog, {
+      title: `Failed to parse ${seriesDescription} measurement report`,
+      type: 'warning',
+      message: error.message || '',
+      notify: true,
+    });
+    return;
+  }
+
  const measurementData = {};
  let measurementNumber = 0;

@@ -0,0 +1,18 @@
+import PubSub from './PubSub';
+
+/** Log Events */
+export const LogEvents = Object.freeze({
+  OnLog: 'onLog',
+});
+
+/**
+ * Log manager that implements pub/sub.
+ * This manager can be used to send logs across different packages
+ * using previously registered events.
+ */
+class LogManager extends PubSub {
+  EVENTS = LogEvents;
+}
+
+/** Singleton */
+export default new LogManager();
@@ -231,26 +231,26 @@ class MetadataProvider {
        let columnCosines;

        if (PixelSpacing) {
-          rowPixelSpacing = PixelSpacing[0];
-          columnPixelSpacing = PixelSpacing[1];
+          rowPixelSpacing = validNumber(PixelSpacing[0]);
+          columnPixelSpacing = validNumber(PixelSpacing[1]);
        }

        if (ImageOrientationPatient) {
-          rowCosines = ImageOrientationPatient.slice(0, 3);
-          columnCosines = ImageOrientationPatient.slice(3, 6);
+          rowCosines = validNumber(ImageOrientationPatient.slice(0, 3));
+          columnCosines = validNumber(ImageOrientationPatient.slice(3, 6));
        }

        metadata = {
          frameOfReferenceUID: instance.FrameOfReferenceUID,
          rows: instance.Rows,
          columns: instance.Columns,
-          imageOrientationPatient: ImageOrientationPatient,
+          imageOrientationPatient: validNumber(ImageOrientationPatient),
          rowCosines,
          columnCosines,
-          imagePositionPatient: instance.ImagePositionPatient,
-          sliceThickness: instance.SliceThickness,
-          sliceLocation: instance.SliceLocation,
-          pixelSpacing: PixelSpacing,
+          imagePositionPatient: validNumber(instance.ImagePositionPatient),
+          sliceThickness: validNumber(instance.SliceThickness),
+          sliceLocation: validNumber(instance.SliceLocation),
+          pixelSpacing: validNumber(PixelSpacing),
          rowPixelSpacing,
          columnPixelSpacing,
        };
@@ -0,0 +1,75 @@
+const _subscriptions = Symbol('subscriptions');
+const _lastSubscriptionId = Symbol('lastSubscriptionId');
+
+/**
+ * Class to implement publish/subscribe pattern
+ *
+ * @class
+ * @classdesc Pub/sub mechanism
+ */
+export default class PubSub {
+  constructor() {
+    this[_subscriptions] = {};
+    this[_lastSubscriptionId] = 0;
+  }
+
+  /**
+   * Subscribe to event
+   *
+   * @param {string} eventName Event name
+   * @param {Function} callback Callback function
+   * @returns {void}
+   */
+  subscribe(eventName, callback) {
+    if (eventName === undefined) {
+      throw new Error('Event name is required');
+    }
+
+    if (typeof callback !== 'function') {
+      throw new Error('Callback must be a function');
+    }
+
+    if (!this[_subscriptions].hasOwnProperty(eventName)) {
+      this[_subscriptions][eventName] = {};
+    }
+
+    const subscriptionId = `sub${this[_lastSubscriptionId]++}`;
+    this[_subscriptions][eventName][subscriptionId] = callback;
+  }
+
+  /**
+   * Removes a subscription
+   *
+   * @param {string} eventName Event name
+   * @param {Function} [callback] Callback function
+   * @returns {void}
+   */
+  unsubscribe(eventName, callback) {
+    const callbacks = this[_subscriptions][eventName] || {};
+    for (let subscriptionId in callbacks) {
+      if (!callback) {
+        delete callbacks[subscriptionId];
+      } else if (callbacks[subscriptionId] === callback) {
+        delete callbacks[subscriptionId];
+      }
+    }
+  }
+
+  /**
+   * Publish event to all subscriptions
+   *
+   * @param {String} eventName Event name
+   * @param {any} [payload] Data that will be published
+   * @returns {void}
+   */
+  publish(eventName, ...payload) {
+    if (eventName === undefined) {
+      throw new Error('Event name is required');
+    }
+
+    const callbacks = this[_subscriptions][eventName] || {};
+    for (let subscriptionId in callbacks) {
+      callbacks[subscriptionId](...payload);
+    }
+  }
+}
@@ -1,16 +1,14 @@
 import cornerstone from 'cornerstone-core';
 import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
-import {
-  clearStudyLoadingProgress,
-  setStudyLoadingProgress,
-} from '../redux/actions';
+import debounce from 'lodash.debounce';
+
 import StackManager from '../utils/StackManager';
+import { StudyPrefetcher } from './StudyPrefetcher';

 class BaseLoadingListener {
  constructor(stack, options = {}) {
    this.id = BaseLoadingListener.getNewId();
    this.stack = stack;
-    this.startListening();
    this.statsItemsLimit = options.statsItemsLimit || 2;
    this.stats = {
      items: [],
@@ -60,6 +58,9 @@ class BaseLoadingListener {
  }

  _getProgressId() {
+    /**
+     * TODO: The id key should be configurable.
+     */
    const displaySetInstanceUID = this.stack.displaySetInstanceUID;
    return 'StackProgress:' + displaySetInstanceUID;
  }
@@ -96,11 +97,18 @@ class BaseLoadingListener {
 class DICOMFileLoadingListener extends BaseLoadingListener {
  constructor(stack, options) {
    super(stack, options);
+
+    this.imageLoadProgressEventHandler = this._imageLoadProgressEventHandle.bind(
+      this
+    );
+
    this._dataSetUrl = this._getDataSetUrl(stack);
    this._lastLoaded = 0;

    // Check how many instances has already been download (cached)
    this._checkCachedData();
+
+    this.startListening();
  }

  _checkCachedData() {
@@ -127,10 +135,6 @@ class DICOMFileLoadingListener extends BaseLoadingListener {
  startListening() {
    const imageLoadProgressEventName = this._getImageLoadProgressEventName();

-    this.imageLoadProgressEventHandler = this._imageLoadProgressEventHandle.bind(
-      this
-    );
-
    this.stopListening();

    cornerstone.events.addEventListener(
@@ -200,17 +204,57 @@ class DICOMFileLoadingListener extends BaseLoadingListener {
  }
 }

+const StudyLoadingListenerEvents = {
+  OnProgress: 'StudyLoadingListenerEvents.OnProgress',
+};
+
+function promiseState(promise, callback) {
+  // Symbols and RegExps are never content-equal
+  var uniqueValue = window['Symbol'] ? Symbol('unique') : /unique/;
+
+  function notifyPendingOrResolved(value) {
+    if (value === uniqueValue) {
+      return callback('pending');
+    } else {
+      return callback('fulfilled');
+    }
+  }
+
+  function notifyRejected(reason) {
+    return callback('rejected');
+  }
+
+  var race = [promise, Promise.resolve(uniqueValue)];
+  Promise.race(race).then(notifyPendingOrResolved, notifyRejected);
+}
+
 class StackLoadingListener extends BaseLoadingListener {
  constructor(stack, options = {}) {
    options.statsItemsLimit = 20;
+
    super(stack, options);

+    this.imageLoadedEventHandler = this._imageLoadedEventHandler.bind(this);
+    this.imageCachePromiseRemovedEventHandler = this._imageCachePromiseRemovedEventHandler.bind(
+      this
+    );
+
    this.imageDataMap = this._convertImageIdsArrayToMap(stack.imageIds);
    this.framesStatus = this._createArray(stack.imageIds.length, false);
    this.loadedCount = 0;

    // Check how many instances has already been download (cached)
-    this._checkCachedData();
+    this._debouncedSetProgressData = debounce((...args) => {
+      this._setProgressData(...args);
+
+      /** After checking cache, continue prefetch */
+      const studyPrefetcher = StudyPrefetcher.getInstance();
+      studyPrefetcher.prefetch(studyPrefetcher.getElement());
+    }, 300);
+    const debounced = true;
+    this._checkCachedData(debounced);
+
+    this.startListening();
  }

  _convertImageIdsArrayToMap(imageIds) {
@@ -238,18 +282,37 @@ class StackLoadingListener extends BaseLoadingListener {
    return array;
  }

-  _checkCachedData() {
-    // const imageIds = this.stack.imageIds;
-    // TODO: No way to check status of Promise.
-    /*for(let i = 0; i < imageIds.length; i++) {
-            const imageId = imageIds[i];
+  /**
+   * Check if image id is cached in cornerstone.
+   *
+   * @param {string} imageId
+   * @returns
+   */
+  isImageCached(imageId) {
+    const image = cornerstone.imageCache.imageCache[imageId];
+    return image && image.sizeInBytes;
+  }

-            const imagePromise = cornerstone.imageCache.getImageLoadObject(imageId).promise;
+  _checkCachedData(debounced = false) {
+    const imageIds = this.stack.imageIds;

-            if (imagePromise && (imagePromise.state() === 'resolved')) {
-                this._updateFrameStatus(imageId, true);
-            }
-        }*/
+    for (let i = 0; i < imageIds.length; i++) {
+      const imageId = imageIds[i];
+
+      const imageObject = cornerstone.imageCache.getImageLoadObject(imageId);
+
+      if (this.isImageCached(imageId)) {
+        this._updateFrameStatus(imageId, true, debounced);
+      }
+
+      if (imageObject && imageObject.promise) {
+        promiseState(imageObject.promise, state => {
+          if (state === 'fulfilled') {
+            this._updateFrameStatus(imageId, true, debounced);
+          }
+        });
+      }
+    }
  }

  _getImageLoadedEventName() {
@@ -272,11 +335,6 @@ class StackLoadingListener extends BaseLoadingListener {
    const imageLoadedEventName = this._getImageLoadedEventName();
    const imageCachePromiseRemovedEventName = this._getImageCachePromiseRemoveEventName();

-    this.imageLoadedEventHandler = this._imageLoadedEventHandler.bind(this);
-    this.imageCachePromiseRemovedEventHandler = this._imageCachePromiseRemovedEventHandler.bind(
-      this
-    );
-
    this.stopListening();

    cornerstone.events.addEventListener(
@@ -303,7 +361,7 @@ class StackLoadingListener extends BaseLoadingListener {
    );
  }

-  _updateFrameStatus(imageId, loaded) {
+  _updateFrameStatus(imageId, loaded, debounced) {
    const imageData = this.imageDataMap.get(imageId);

    if (!imageData || imageData.loaded === loaded) {
@@ -318,7 +376,7 @@ class StackLoadingListener extends BaseLoadingListener {
    imageData.loaded = loaded;
    this.framesStatus[imageData.index] = loaded;
    this.loadedCount += loaded ? 1 : -1;
-    this._updateProgress();
+    this._updateProgress(debounced);
  }

  _setProgressData(progressId, progressData) {
@@ -339,7 +397,7 @@ class StackLoadingListener extends BaseLoadingListener {
    );
  }

-  _updateProgress() {
+  _updateProgress(debounced) {
    const totalFramesCount = this.stack.imageIds.length;
    const loadedFramesCount = this.loadedCount;
    const loadingFramesCount = totalFramesCount - loadedFramesCount;
@@ -357,6 +415,11 @@ class StackLoadingListener extends BaseLoadingListener {
      framesStatus: this.framesStatus,
    };

+    if (debounced) {
+      this._debouncedSetProgressData(progressId, progressData);
+      return;
+    }
+
    this._setProgressData(progressId, progressData);
  }

@@ -371,11 +434,13 @@ class StackLoadingListener extends BaseLoadingListener {
    }

    progressBar += ']';
-    log.info(`${displaySetInstanceUID}: ${progressBar}`);
+    console.info(`${displaySetInstanceUID}: ${progressBar}`);
  }
 }

 class StudyLoadingListener {
+  static events = StudyLoadingListenerEvents;
+
  constructor(options) {
    this.listeners = {};
    this.options = options;
@@ -454,14 +519,36 @@ class StudyLoadingListener {

  _getSchema(stack) {
    const imageId = stack.imageIds[0];
+    if (!imageId) {
+      return;
+    }
    const colonIndex = imageId.indexOf(':');
    return imageId.substring(0, colonIndex);
  }

-  // Singleton
  static getInstance(options) {
+    /**
+     * TODO: Use a different alternative without the use of events.
+     */
+    const DEFAULT_OPTIONS = {
+      _setProgressData: (progressId, progressData) => {
+        const event = new CustomEvent(StudyLoadingListenerEvents.OnProgress, {
+          detail: { progressId, progressData },
+        });
+        document.dispatchEvent(event);
+      },
+      _clearProgressById: progressId => {
+        const event = new CustomEvent(StudyLoadingListenerEvents.OnProgress, {
+          detail: { progressId, percentComplete: 0 },
+        });
+        document.dispatchEvent(event);
+      },
+    };
+
    if (!StudyLoadingListener._instance) {
-      StudyLoadingListener._instance = new StudyLoadingListener(options);
+      StudyLoadingListener._instance = new StudyLoadingListener(
+        options || DEFAULT_OPTIONS
+      );
    }

    return StudyLoadingListener._instance;
@@ -1,14 +1,28 @@
-import log from '../log.js';
-import OHIFError from './OHIFError';
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
+
 import getImageId from '../utils/getImageId.js';

+const noop = () => {};
+
 export class StudyPrefetcher {
-  constructor(studies) {
+  options = {
+    order: 'closest',
+    displaySetCount: 1,
+    onImageCached: noop,
+    requestType: 'prefetch',
+    preventCache: false,
+    prefetchDisplaySetsTimeout: 300,
+    includeActiveDisplaySet: false,
+  };
+
+  constructor(studies, options) {
    this.studies = studies || [];
-    this.prefetchDisplaySetsTimeout = 300;
-    this.lastActiveViewportElement = null;
+
+    if (options) {
+      this.options = { ...this.options, ...options };
+      this.options.requestType = 'prefetch';
+    }

    cornerstone.events.addEventListener(
      'cornerstoneimagecachefull.StudyPrefetcher',
@@ -16,6 +30,9 @@ export class StudyPrefetcher {
    );
  }

+  /**
+   * Remove previously set event listeners and stop prefetching.
+   */
  destroy() {
    this.stopPrefetching();
    cornerstone.events.removeEventListener(
@@ -24,95 +41,167 @@ export class StudyPrefetcher {
    );
  }

-  static getInstance() {
+  /**
+   * Get StudyPrefetcher singleton instance.
+   *
+   * @param {array} studies
+   * @param {object} options
+   * @returns
+   */
+  static getInstance(studies = [], options) {
    if (!StudyPrefetcher.instance) {
-      StudyPrefetcher.instance = new StudyPrefetcher([]);
+      StudyPrefetcher.instance = new StudyPrefetcher(studies, options);
+    }
+
+    if (options) {
+      this.options = { ...this.options, ...options };
+      this.options.requestType = 'prefetch';
    }

    return StudyPrefetcher.instance;
  }

+  /**
+   * OHIF study metadata instances.
+   *
+   * @param {array} studies
+   */
  setStudies(studies) {
    this.stopPrefetching();
    this.studies = studies;
  }

-  prefetch() {
+  /**
+   * Get previously prefetched element.
+   *
+   * @returns {HTMLElement} Previously prefetched element.
+   */
+  getElement() {
+    return this.element;
+  }
+
+  /**
+   * Prefetch related display sets based on cornerstone viewport element
+   * with previously set options.
+   *
+   * @param {*} element
+   * @param {string} displaySetInstanceUID the display set instance uid
+   * @returns
+   */
+  prefetch(element, displaySetInstanceUID) {
    if (!this.studies || !this.studies.length) {
      return;
    }

+    this.element = element;
+    this.enabledElement = cornerstone.getEnabledElement(element);
+
    this.stopPrefetching();
-    this.prefetchDisplaySets();
+    this.prefetchDisplaySets(displaySetInstanceUID);
  }

+  /**
+   * Stop prefetching images.
+   */
  stopPrefetching() {
-    cornerstoneTools.requestPoolManager.clearRequestStack('prefetch');
+    cornerstone.imageLoadPoolManager.clearRequestStack('prefetch');
  }

-  prefetchDisplaySetsAsync(timeout) {
-    timeout = timeout || this.prefetchDisplaySetsTimeout;
-
+  /**
+   * Prefetch display sets async.
+   *
+   * @param {HTMLElement} element cornerstone viewport element
+   * @param {number} timeout
+   */
+  prefetchDisplaySetsAsync(element, timeout) {
+    this.enabledElement = cornerstone.getEnabledElement(element);
+    timeout = timeout || this.options.prefetchDisplaySetsTimeout;
    clearTimeout(this.prefetchDisplaySetsHandler);
    this.prefetchDisplaySetsHandler = setTimeout(() => {
-      this.prefetchDisplaySets();
+      this.prefetchDisplaySets(element);
    }, timeout);
  }

-  prefetchDisplaySets() {
-    // TODO: Allow passing in config
-    let config = {
-      order: 'closest',
-      displaySetCount: 1,
-    };
-
-    const displaySetsToPrefetch = this.getDisplaySetsToPrefetch(config);
+  /**
+   * Extract all image ids from all display sets to be fetched and
+   * call method to add images to request pool manager.
+   *
+   * @param {string} displaySetInstanceUID the display set instance uid
+   */
+  prefetchDisplaySets(displaySetInstanceUID) {
+    const displaySetsToPrefetch = this.getDisplaySetsToPrefetch(
+      displaySetInstanceUID
+    );
    const imageIds = this.getImageIdsFromDisplaySets(displaySetsToPrefetch);
-
    this.prefetchImageIds(imageIds);
  }

+  /**
+   * Add image ids to request pool manager.
+   *
+   * @param {array} imageIds
+   */
  prefetchImageIds(imageIds) {
    const nonCachedImageIds = this.filterCachedImageIds(imageIds);
-    const requestPoolManager = cornerstoneTools.requestPoolManager;
-    const requestType = 'prefetch';
-    const preventCache = false;
-    const noop = () => {};
+    const imageLoadPoolManager = cornerstone.imageLoadPoolManager;
+
+    let requestFn;
+    if (this.options.preventCache) {
+      requestFn = id => cornerstone.loadImage(id);
+    } else {
+      requestFn = id => cornerstone.loadAndCacheImage(id);
+    }

    nonCachedImageIds.forEach(imageId => {
-      requestPoolManager.addRequest(
-        {},
-        imageId,
-        requestType,
-        preventCache,
-        noop,
-        noop
+      imageLoadPoolManager.addRequest(
+        requestFn.bind(this, imageId),
+        this.options.requestType,
+        {
+          imageId,
+        }
      );
    });
-
-    requestPoolManager.startGrabbing();
  }

+  /**
+   * Get study by cornerstone image instance.
+   *
+   * @param {object} image
+   * @returns
+   */
  getStudy(image) {
    const StudyInstanceUID = cornerstone.metaData.get(
      'StudyInstanceUID',
      image.imageId
    );
-    return OHIF.viewer.Studies.find(
-      study => study.StudyInstanceUID === StudyInstanceUID
+    const studies = this.studies;
+    return studies.find(
+      study => study.getData().StudyInstanceUID === StudyInstanceUID
    );
  }

+  /**
+   * Get study series by cornerstone image instance.
+   *
+   * @param {object} study OHIF study instance
+   * @param {object} image cornerstone image instance object
+   * @returns
+   */
  getSeries(study, image) {
    const SeriesInstanceUID = cornerstone.metaData.get(
      'SeriesInstanceUID',
      image.imageId
    );
-    const studyMetadata = OHIF.viewerbase.getStudyMetadata(study);
-
-    return studyMetadata.getSeriesByUID(SeriesInstanceUID);
+    return study.getSeriesByUID(SeriesInstanceUID);
  }

+  /**
+   * Get sop instance by cornerstone image instance.
+   *
+   * @param {array} series
+   * @param {object} image
+   * @returns
+   */
  getInstance(series, image) {
    const instanceMetadata = cornerstone.metaData.get(
      'instance',
@@ -121,7 +210,33 @@ export class StudyPrefetcher {
    return series.getInstanceByUID(instanceMetadata.SOPInstanceUID);
  }

-  getActiveDisplaySet(displaySets, instance) {
+  /**
+   * Returns the display set with given uid.
+   *
+   * @param {string} displaySetInstanceUID the display set instance uid
+   * @returns {object} displaySet
+   */
+  getDisplaySetByUID(displaySetInstanceUID) {
+    let displaySet;
+    this.studies.forEach(study => {
+      const ds = study.displaySets.find(
+        ds => ds.displaySetInstanceUID === displaySetInstanceUID
+      );
+      if (ds) {
+        displaySet = ds;
+      }
+    });
+    return displaySet;
+  }
+
+  /**
+   * Get display set by SOPInstanceUID.
+   *
+   * @param {array} displaySets
+   * @param {object} instance
+   * @returns
+   */
+  getDisplaySetBySOPInstanceUID(displaySets, instance) {
    return displaySets.find(displaySet => {
      return displaySet.images.some(displaySetImage => {
        return displaySetImage.SOPInstanceUID === instance.SOPInstanceUID;
@@ -129,25 +244,48 @@ export class StudyPrefetcher {
    });
  }

-  getDisplaySetsToPrefetch(config) {
+  /**
+   * Get active viewport image based on cornerstone viewport element.
+   * @returns
+   */
+  getActiveViewportImage() {
+    if (!this.enabledElement) {
+      return;
+    }
+
+    return this.enabledElement.image;
+  }
+
+  /**
+   * Prefetch display sets based on cornerstone viewport element image.
+   *
+   * @param {string} displaySetInstanceUID the display set instance uid
+   * @returns {array} displaySets
+   */
+  getDisplaySetsToPrefetch(displaySetInstanceUID) {
    const image = this.getActiveViewportImage();

-    if (!image || !config || !config.displaySetCount) {
+    if (!image) {
      return [];
    }

-    /*const study = this.getStudy(image);
+    const study = this.getStudy(image);
    const series = this.getSeries(study, image);
-    const instance = this.getInstance(series, image);*/
+    const instance = this.getInstance(series, image);
    const displaySets = study.displaySets;
-    const activeDisplaySet = null; //this.getActiveDisplaySet(displaySets, instance);
+    const activeDisplaySet = displaySetInstanceUID
+      ? this.getDisplaySetByUID(displaySetInstanceUID)
+      : this.getDisplaySetBySOPInstanceUID(displaySets, instance);
+
    const prefetchMethodMap = {
      topdown: 'getFirstDisplaySets',
      downward: 'getNextDisplaySets',
+      upward: 'getPreviousDisplaySets',
      closest: 'getClosestDisplaySets',
+      all: 'getAllDisplaySets',
    };

-    const prefetchOrder = config.order;
+    const prefetchOrder = this.options.order;
    const methodName = prefetchMethodMap[prefetchOrder];
    const getDisplaySets = this[methodName];

@@ -163,18 +301,59 @@ export class StudyPrefetcher {
      this,
      displaySets,
      activeDisplaySet,
-      config.displaySetCount
+      this.options.displaySetCount,
+      this.options.includeActiveDisplaySet
    );
  }

-  getFirstDisplaySets(displaySets, activeDisplaySet, displaySetCount) {
+  /**
+   * Get all display sets.
+   *
+   * @param {array} displaySets
+   * @param {object} activeDisplaySet
+   * @param {number} displaySetCount
+   * @param {boolean} includeActiveDisplaySet
+   * @returns
+   */
+  getAllDisplaySets(
+    displaySets,
+    activeDisplaySet,
+    displaySetCount,
+    includeActiveDisplaySet
+  ) {
+    const length = displaySets.length;
+    const selectedDisplaySets = [];
+
+    for (let i = 0; i < length; i++) {
+      const displaySet = displaySets[i];
+      selectedDisplaySets.push(displaySet);
+    }
+
+    return selectedDisplaySets;
+  }
+
+  /**
+   * Get all display sets in order after the active display set.
+   *
+   * @param {array} displaySets
+   * @param {object} activeDisplaySet
+   * @param {number} displaySetCount
+   * @param {boolean} includeActiveDisplaySet
+   * @returns
+   */
+  getFirstDisplaySets(
+    displaySets,
+    activeDisplaySet,
+    displaySetCount,
+    includeActiveDisplaySet
+  ) {
    const length = displaySets.length;
    const selectedDisplaySets = [];

    for (let i = 0; i < length && displaySetCount; i++) {
      const displaySet = displaySets[i];

-      if (displaySet !== activeDisplaySet) {
+      if (includeActiveDisplaySet || displaySet !== activeDisplaySet) {
        selectedDisplaySets.push(displaySet);
        displaySetCount--;
      }
@@ -183,21 +362,78 @@ export class StudyPrefetcher {
    return selectedDisplaySets;
  }

-  getNextDisplaySets(displaySets, activeDisplaySet, displaySetCount) {
+  /**
+   * Get all display sets before the active display set.
+   *
+   * @param {array} displaySets
+   * @param {object} activeDisplaySet
+   * @param {number} displaySetCount
+   * @param {boolean} includeActiveDisplaySet
+   * @returns
+   */
+  getPreviousDisplaySets(
+    displaySets,
+    activeDisplaySet,
+    displaySetCount,
+    includeActiveDisplaySet
+  ) {
    const activeDisplaySetIndex = displaySets.indexOf(activeDisplaySet);
-    const begin = activeDisplaySetIndex + 1;
-    const end = Math.min(begin + displaySetCount, displaySets.length);
+    const end = includeActiveDisplaySet
+      ? activeDisplaySetIndex + 1
+      : activeDisplaySetIndex;
+    const previousDisplaySets = displaySets.slice(0, end);
+    return previousDisplaySets.reverse().slice(0, displaySetCount);
+  }

+  /**
+   * Get all display sets after the active display set.
+   *
+   * @param {array} displaySets
+   * @param {object} activeDisplaySet
+   * @param {number} displaySetCount
+   * @param {boolean} includeActiveDisplaySet
+   * @returns
+   */
+  getNextDisplaySets(
+    displaySets,
+    activeDisplaySet,
+    displaySetCount,
+    includeActiveDisplaySet
+  ) {
+    const activeDisplaySetIndex = displaySets.indexOf(activeDisplaySet);
+    const begin = includeActiveDisplaySet
+      ? activeDisplaySetIndex
+      : activeDisplaySetIndex + 1;
+    const end = Math.min(begin + displaySetCount, displaySets.length);
    return displaySets.slice(begin, end);
  }

-  getClosestDisplaySets(displaySets, activeDisplaySet, displaySetCount) {
+  /**
+   * Get all display set closest to the active display set.
+   *
+   * @param {array} displaySets
+   * @param {object} activeDisplaySet
+   * @param {number} displaySetCount
+   * @param {boolean} includeActiveDisplaySet
+   * @returns
+   */
+  getClosestDisplaySets(
+    displaySets,
+    activeDisplaySet,
+    displaySetCount,
+    includeActiveDisplaySet
+  ) {
    const activeDisplaySetIndex = displaySets.indexOf(activeDisplaySet);
    const length = displaySets.length;
    const selectedDisplaySets = [];
    let left = activeDisplaySetIndex - 1;
    let right = activeDisplaySetIndex + 1;

+    if (includeActiveDisplaySet) {
+      selectedDisplaySets.push(displaySets[activeDisplaySetIndex]);
+      displaySetCount--;
+    }
+
    while ((left >= 0 || right < length) && displaySetCount) {
      if (left >= 0) {
        selectedDisplaySets.push(displaySets[left]);
@@ -215,6 +451,12 @@ export class StudyPrefetcher {
    return selectedDisplaySets;
  }

+  /**
+   * Get all image ids from display sets.
+   *
+   * @param {array} displaySets
+   * @returns {array} image ids
+   */
  getImageIdsFromDisplaySets(displaySets) {
    let imageIds = [];

@@ -225,9 +467,19 @@ export class StudyPrefetcher {
    return imageIds;
  }

+  /**
+   * Get all image ids from a given display set.
+   *
+   * @param {array} displaySet
+   * @returns
+   */
  getImageIdsFromDisplaySet(displaySet) {
    const imageIds = [];

+    if (!displaySet.images || displaySet.images.length < 1) {
+      return [];
+    }
+
    // TODO: This duplicates work done by the stack manager
    displaySet.images.forEach(image => {
      const numFrames = image.numFrames;
@@ -245,15 +497,30 @@ export class StudyPrefetcher {
    return imageIds;
  }

+  /**
+   * Filter cached image ids from a set of image ids.
+   *
+   * @param {array} imageIds
+   * @returns {array} images not cached
+   */
  filterCachedImageIds(imageIds) {
    return imageIds.filter(imageId => !this.isImageCached(imageId));
  }

+  /**
+   * Check if image id is cached in cornerstone.
+   *
+   * @param {string} imageId
+   * @returns
+   */
  isImageCached(imageId) {
    const image = cornerstone.imageCache.imageCache[imageId];
    return image && image.sizeInBytes;
  }

+  /**
+   * Warns that cache is full and stops prefetching.
+   */
  cacheFullHandler = () => {
    log.warn('Cache full');
    this.stopPrefetching();
@@ -4,6 +4,8 @@ import CommandsManager from './CommandsManager.js';
 import { DICOMFileLoadingListener } from './StudyLoadingListener';
 import HotkeysManager from './HotkeysManager.js';
 import ImageSet from './ImageSet';
+import LogManager from './LogManager';
+import PubSub from './PubSub';
 import MetadataProvider from './MetadataProvider';
 import OHIFError from './OHIFError.js';
 import { OHIFStudyMetadataSource } from './OHIFStudyMetadataSource';
@@ -36,7 +38,9 @@ const classes = {
  MetadataProvider,
  CommandsManager,
  HotkeysManager,
+  LogManager,
  ImageSet,
+  PubSub,
  StudyPrefetcher,
  StudyLoadingListener,
  StackLoadingListener,
@@ -497,6 +497,12 @@ class StudyMetadata extends Metadata {
      }
    }

+    if (this._displaySets.some(ds => 
+        ds.displaySetInstanceUID === displaySet.displaySetInstanceUID)
+    ) {
+      return;
+    }
+
    this._displaySets.splice(insertIndex, 0, displaySet);
    this.displaySets = this._displaySets;
  }
@@ -78,17 +78,6 @@ export const setActiveViewportSpecificData = viewportSpecificData => ({
 /**
 * NOT-VIEWPORT
 */
-export const setStudyLoadingProgress = (progressId, progressData) => ({
-  type: 'SET_STUDY_LOADING_PROGRESS',
-  progressId,
-  progressData,
-});
-
-export const clearStudyLoadingProgress = progressId => ({
-  type: 'CLEAR_STUDY_LOADING_PROGRESS',
-  progressId,
-});
-
 export const setUserPreferences = state => ({
  type: SET_USER_PREFERENCES,
  state,
@@ -134,8 +123,6 @@ const actions = {
  /**
   * NOT-VIEWPORT
   */
-  setStudyLoadingProgress,
-  clearStudyLoadingProgress,
  setUserPreferences,
  setExtensionData,
  setTimepoints,
@@ -11,8 +11,6 @@ describe('actions', () => {
      'setLayout',
      'clearViewportSpecificData',
      'setActiveViewportSpecificData',
-      'setStudyLoadingProgress',
-      'clearStudyLoadingProgress',
      'setUserPreferences',
      'setExtensionData',
      'setTimepoints',
@@ -1,5 +1,4 @@
 import extensions from './extensions';
-import loading from './loading';
 import preferences from './preferences';
 import servers from './servers';
 import studies from './studies';
@@ -8,7 +7,6 @@ import viewports from './viewports';

 const reducers = {
  extensions,
-  loading,
  preferences,
  servers,
  studies,
@@ -1,33 +0,0 @@
-import cloneDeep from 'lodash.clonedeep';
-
-const defaultState = {
-  progress: {},
-  lastUpdated: null,
-};
-
-const loading = (state = defaultState, action) => {
-  let progress;
-  let lastUpdated;
-  switch (action.type) {
-    case 'SET_STUDY_LOADING_PROGRESS':
-      progress = cloneDeep(state).progress;
-      progress[action.progressId] = action.progressData;
-
-      // This is a workaround so we can easily identify changes
-      // to the progress object without doing deep comparison.
-      lastUpdated = new Date().getTime();
-
-      return Object.assign({}, state, { progress, lastUpdated });
-    case 'CLEAR_STUDY_LOADING_PROGRESS':
-      progress = cloneDeep(state).progress;
-      delete progress[action.progressId];
-
-      lastUpdated = new Date().getTime();
-
-      return Object.assign({}, state, { progress, lastUpdated });
-    default:
-      return state;
-  }
-};
-
-export default loading;
@@ -260,7 +260,6 @@ class MeasurementService {
    const sourceInfo = this._getSourceInfo(source);

    if (!definition) {
-      console.log('TEST');
      log.warn('No source definition provided. Exiting early.');
      return;
    }
@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [1.10.2](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.10.1...@ohif/ui@1.10.2) (2021-09-24)
+
+
+### Bug Fixes
+
+* throttle thumbnail progress updates ([#2557](https://github.com/OHIF/Viewers/issues/2557)) ([66c587b](https://github.com/OHIF/Viewers/commit/66c587b139835201331a64bc24a17901e7583649))
+
+
+
+
+
+## [1.10.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.10.0...@ohif/ui@1.10.1) (2021-09-13)
+
+**Note:** Version bump only for package @ohif/ui
+
+
+
+
+
+# [1.10.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.9.3...@ohif/ui@1.10.0) (2021-09-09)
+
+
+### Features
+
+* OHIF-1000: Study prefetcher ([#2466](https://github.com/OHIF/Viewers/issues/2466)) ([8f26045](https://github.com/OHIF/Viewers/commit/8f2604509d24092b721f1333289d838820d68cac))
+
+
+
+
+
+## [1.9.3](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.9.2...@ohif/ui@1.9.3) (2021-09-03)
+
+**Note:** Version bump only for package @ohif/ui
+
+
+
+
+
 ## [1.9.2](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.9.1...@ohif/ui@1.9.2) (2021-05-17)

 **Note:** Version bump only for package @ohif/ui
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/ui",
-  "version": "1.9.2",
+  "version": "1.10.2",
  "description": "A set of React components for Medical Imaging Viewers",
  "author": "OHIF Contributors",
  "license": "MIT",
@@ -4,6 +4,29 @@
  z-index: 0;
 }

+.RoundedButtonGroup .badgeNumber-container {
+  background-color: var(--ui-border-color-dark);
+  width: 21px;
+  height: 21px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: bold;
+  bottom: 10px;
+  left: 5px;
+  color: white;
+  position: absolute;
+}
+
+.RoundedButtonGroup .badgeNumber {
+  font-size: 10px;
+  font-weight: bold;
+  display: block;
+  width: 25px;
+}
+
 .roundedButtonWrapper {
  cursor: pointer;
  display: inline-block;
@@ -36,7 +59,12 @@
  z-index: 1;
 }

-.roundedButtonWrapper .roundedButton svg .roundedButtonWrapper .roundedButton span {
+.roundedButtonWrapper
+  .roundedButton
+  svg
+  .roundedButtonWrapper
+  .roundedButton
+  span {
  margin: 0 2px;
 }

@@ -13,6 +13,7 @@ class RoundedButtonGroup extends Component {
      PropTypes.shape({
        value: PropTypes.any,
        label: PropTypes.string,
+        stateEvent: PropTypes.string,
        icon: PropTypes.oneOfType([
          PropTypes.string,
          PropTypes.shape({
@@ -30,6 +31,15 @@ class RoundedButtonGroup extends Component {
    value: null,
  };

+  state = {
+    badgeNumbers: [],
+  };
+
+  constructor() {
+    super();
+    this.onStateEvent = this.onStateEvent.bind(this);
+  }
+
  onClickOption = value => {
    let newValue = value;
    if (this.props.value === value) {
@@ -41,6 +51,48 @@ class RoundedButtonGroup extends Component {
    }
  };

+  onStateEvent(event) {
+    const optionIndex = this.props.options.findIndex(
+      o => o.value === event.detail.target
+    );
+    if (optionIndex > -1) {
+      const badgeNumbers = this.state.badgeNumbers;
+      badgeNumbers[optionIndex] = event.detail.badgeNumber;
+      this.setState({ badgeNumbers });
+    }
+  }
+
+  componentDidMount() {
+    this.props.options.forEach(option => {
+      if (option.stateEvent) {
+        document.addEventListener(option.stateEvent, this.onStateEvent);
+      }
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    this.props.options.forEach((option, index) => {
+      if (
+        option.stateEvent &&
+        option.stateEvent !==
+          (prevProps.options[index]
+            ? prevProps.options[index].stateEvent
+            : null)
+      ) {
+        document.removeEventListener(option.stateEvent, this.onStateEvent);
+        document.addEventListener(option.stateEvent, this.onStateEvent);
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.props.options.forEach(option => {
+      if (option.stateEvent) {
+        document.removeEventListener(option.stateEvent, this.onStateEvent);
+      }
+    });
+  }
+
  render() {
    let className = classnames(
      RoundedButtonGroup.className,
@@ -62,6 +114,14 @@ class RoundedButtonGroup extends Component {
        <div className="bottomLabel">{option.bottomLabel}</div>
      );

+      let badgeNumber = this.state.badgeNumbers[index];
+      const badgeNumberOverflow = String(badgeNumber).length > 2;
+      badgeNumber = badgeNumber
+        ? badgeNumberOverflow
+          ? 99
+          : badgeNumber
+        : null;
+
      return (
        <div
          key={index}
@@ -70,6 +130,14 @@ class RoundedButtonGroup extends Component {
        >
          <div className="roundedButton">
            {optionText}
+            {badgeNumber && (
+              <div className="badgeNumber-container">
+                <span className="badgeNumber">
+                  {badgeNumber}
+                  {badgeNumberOverflow && '+'}
+                </span>
+              </div>
+            )}
            {iconProps && <Icon {...iconProps} />}
          </div>
          {bottomLabel}
@@ -2,7 +2,7 @@
 import './ImageThumbnail.styl';

 import { utils } from '@ohif/core';
-import React, { useState, useEffect, createRef } from 'react';
+import React, { useState, useEffect, createRef, useCallback } from 'react';
 import classNames from 'classnames';

 import PropTypes from 'prop-types';
@@ -23,6 +23,7 @@ function ImageThumbnail(props) {
    imageId,
    stackPercentComplete,
    error: propsError,
+    showProgressBar,
  } = props;

  const [isLoading, setLoading] = useState(false);
@@ -39,7 +40,8 @@ function ImageThumbnail(props) {
    loadingOrError = <ViewportLoadingIndicator />;
  }

-  const showStackLoadingProgressBar = stackPercentComplete !== undefined;
+  const showStackLoadingProgressBar =
+    showProgressBar && stackPercentComplete !== undefined;

  const shouldRenderToCanvas = () => {
    return imageId && !imageSrc;
@@ -71,11 +73,11 @@ function ImageThumbnail(props) {
    }
  };

-  const purgeCancelablePromise = () => {
+  const purgeCancelablePromise = useCallback(() => {
    if (cancelablePromise) {
      cancelablePromise.cancel();
    }
-  };
+  });

  useEffect(() => {
    return () => {
@@ -96,7 +98,13 @@ function ImageThumbnail(props) {
      setImagePromise();
      fetchImagePromise();
    }
-  }, [fetchImagePromise, image.imageId, imageId, purgeCancelablePromise, setImagePromise]);
+  }, [
+    fetchImagePromise,
+    image.imageId,
+    imageId,
+    purgeCancelablePromise,
+    setImagePromise,
+  ]);

  return (
    <div className={classNames('ImageThumbnail', { active: active })}>
@@ -104,14 +112,14 @@ function ImageThumbnail(props) {
        {shouldRenderToCanvas() ? (
          <canvas ref={canvasRef} width={width} height={height} />
        ) : (
-            <img
-              className="static-image"
-              src={imageSrc}
-              //width={this.props.width}
-              height={height}
-              alt={''}
-            />
-          )}
+          <img
+            className="static-image"
+            src={imageSrc}
+            //width={this.props.width}
+            height={height}
+            alt={''}
+          />
+        )}
      </div>
      {loadingOrError}
      {showStackLoadingProgressBar && (
@@ -135,6 +143,7 @@ ImageThumbnail.propTypes = {
  width: PropTypes.number,
  height: PropTypes.number,
  stackPercentComplete: PropTypes.number.isRequired,
+  showProgressBar: PropTypes.bool,
 };

 ImageThumbnail.defaultProps = {
@@ -143,6 +152,7 @@ ImageThumbnail.defaultProps = {
  stackPercentComplete: 0,
  width: 217,
  height: 123,
+  showProgressBar: true,
 };

 export default ImageThumbnail;
@@ -9,6 +9,7 @@ function StudyBrowser(props) {
    onThumbnailClick,
    onThumbnailDoubleClick,
    supportsDrag,
+    showThumbnailProgressBar,
  } = props;

  return (
@@ -28,7 +29,6 @@ function StudyBrowser(props) {
                numImageFrames,
                SeriesDescription,
                SeriesNumber,
-                stackPercentComplete,
                hasWarnings,
              } = thumb;

@@ -54,13 +54,13 @@ function StudyBrowser(props) {
                    SeriesDescription={SeriesDescription}
                    SeriesNumber={SeriesNumber}
                    hasWarnings={hasWarnings}
-                    stackPercentComplete={stackPercentComplete}
                    // Events
                    onClick={onThumbnailClick.bind(
                      undefined,
                      displaySetInstanceUID
                    )}
                    onDoubleClick={onThumbnailDoubleClick}
+                    showProgressBar={showThumbnailProgressBar}
                  />
                </div>
              );
@@ -95,6 +95,7 @@ StudyBrowser.propTypes = {
  supportsDrag: PropTypes.bool,
  onThumbnailClick: PropTypes.func,
  onThumbnailDoubleClick: PropTypes.func,
+  showThumbnailProgressBar: PropTypes.bool,
 };

 StudyBrowser.defaultProps = {
@@ -102,6 +103,7 @@ StudyBrowser.defaultProps = {
  supportsDrag: true,
  onThumbnailClick: noop,
  onThumbnailDoubleClick: noop,
+  showThumbnailProgressBar: true,
 };

 export { StudyBrowser };
@@ -1,34 +1,37 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import throttle from 'lodash.throttle';
 import { useDrag } from 'react-dnd';
+import { classes } from '@ohif/core';
 import ImageThumbnail from './ImageThumbnail';
 import classNames from 'classnames';
 import { Icon } from './../../elements/Icon';
 import { Tooltip } from './../tooltip';
 import { OverlayTrigger } from './../overlayTrigger';
-
 import './Thumbnail.styl';

+const StudyLoadingListener = classes.StudyLoadingListener;
+
 function ThumbnailFooter({
  SeriesDescription,
  SeriesNumber,
  InstanceNumber,
  numImageFrames,
-  hasWarnings
+  hasWarnings,
 }) {
  const [inconsistencyWarnings, inconsistencyWarningsSet] = useState([]);

  useEffect(() => {
-    let unmounted = false
+    let unmounted = false;
    hasWarnings.then(response => {
      if (!unmounted) {
-        inconsistencyWarningsSet(response)
+        inconsistencyWarningsSet(response);
      }
-    })
+    });
    return () => {
-      unmounted = true
-    }
-  }, [])
+      unmounted = true;
+    };
+  }, [hasWarnings]);

  const infoOnly = !SeriesDescription;

@@ -41,7 +44,7 @@ function ThumbnailFooter({
    );
  };

-  const getWarningContent = (inconsistencyWarnings) => {
+  const getWarningContent = inconsistencyWarnings => {
    if (Array.isArray(inconsistencyWarnings)) {
      const listedWarnings = inconsistencyWarnings.map((warn, index) => {
        return <li key={index}>{warn}</li>;
@@ -54,8 +57,8 @@ function ThumbnailFooter({
  };

  const getWarningInfo = (SeriesNumber, inconsistencyWarnings) => {
-      return(
-        <React.Fragment>
+    return (
+      <React.Fragment>
        {inconsistencyWarnings && inconsistencyWarnings.length != 0 ? (
          <OverlayTrigger
            key={SeriesNumber}
@@ -67,7 +70,9 @@ function ThumbnailFooter({
                id="tooltip-left"
              >
                <div className="warningTitle">Series Inconsistencies</div>
-                <div className="warningContent">{getWarningContent(inconsistencyWarnings)}</div>
+                <div className="warningContent">
+                  {getWarningContent(inconsistencyWarnings)}
+                </div>
              </Tooltip>
            }
          >
@@ -79,9 +84,9 @@ function ThumbnailFooter({
          </OverlayTrigger>
        ) : (
          <React.Fragment></React.Fragment>
-          )}
+        )}
      </React.Fragment>
-      );
+    );
  };
  const getSeriesInformation = (
    SeriesNumber,
@@ -92,21 +97,27 @@ function ThumbnailFooter({
    if (!SeriesNumber && !InstanceNumber && !numImageFrames) {
      return;
    }
-    const seriesInformation =
+    const seriesInformation = (
      <div className="series-information">
        {getInfo(SeriesNumber, 'S:')}
        {getInfo(InstanceNumber, 'I:')}
        {getInfo(numImageFrames, '', 'image-frames')}
        {getWarningInfo(SeriesNumber, inconsistencyWarnings)}
      </div>
+    );

-    return (seriesInformation);
+    return seriesInformation;
  };

  return (
    <div className={classNames('series-details', { 'info-only': infoOnly })}>
      <div className="series-description">{SeriesDescription}</div>
-      {getSeriesInformation(SeriesNumber, InstanceNumber, numImageFrames, inconsistencyWarnings)}
+      {getSeriesInformation(
+        SeriesNumber,
+        InstanceNumber,
+        numImageFrames,
+        inconsistencyWarnings
+      )}
    </div>
  );
 }
@@ -124,14 +135,37 @@ function Thumbnail(props) {
    SeriesDescription,
    SeriesNumber,
    hasWarnings,
-    stackPercentComplete,
    StudyInstanceUID,
    onClick,
    onDoubleClick,
    onMouseDown,
    supportsDrag,
+    showProgressBar,
  } = props;

+  const [stackPercentComplete, setStackPercentComplete] = useState(0);
+  useEffect(() => {
+    const onProgressChange = throttle(({ detail }) => {
+      const { progressId, progressData } = detail;
+      if (`StackProgress:${displaySetInstanceUID}` === progressId) {
+        const percent = progressData ? progressData.percentComplete : 0;
+        setStackPercentComplete(percent);
+      }
+    }, 100);
+
+    document.addEventListener(
+      StudyLoadingListener.events.OnProgress,
+      onProgressChange
+    );
+
+    return () => {
+      document.removeEventListener(
+        StudyLoadingListener.events.OnProgress,
+        onProgressChange
+      );
+    };
+  }, [displaySetInstanceUID]);
+
  const [collectedProps, drag, dragPreview] = useDrag({
    // `droppedItem` in `dropTarget`
    // The only data it will have access to
@@ -164,6 +198,7 @@ function Thumbnail(props) {
          imageId={imageId}
          error={error}
          stackPercentComplete={stackPercentComplete}
+          showProgressBar={showProgressBar}
        />
      )}
      {/* SHOW TEXT ALTERNATIVE */}
@@ -203,6 +238,7 @@ Thumbnail.propTypes = {
  onDoubleClick: PropTypes.func,
  onClick: PropTypes.func,
  onMouseDown: PropTypes.func,
+  showProgressBar: PropTypes.bool,
 };

 Thumbnail.defaultProps = {
@@ -6,10 +6,13 @@ import React, {
  useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
+import { classes } from '@ohif/core';

 import SnackbarContainer from '../components/snackbar/SnackbarContainer';
 import SnackbarTypes from '../components/snackbar/SnackbarTypes';

+const { LogManager } = classes;
+
 const SnackbarContext = createContext(null);

 export const useSnackbarContext = () => useContext(SnackbarContext);
@@ -28,6 +31,20 @@ const SnackbarProvider = ({ children, service }) => {
  const [count, setCount] = useState(1);
  const [snackbarItems, setSnackbarItems] = useState([]);

+  useEffect(() => {
+    const onLogHandler = ({ type, notify, title, message }) => {
+      if (notify) {
+        show({ type, title, message });
+      }
+    };
+
+    LogManager.subscribe(LogManager.EVENTS.OnLog, onLogHandler);
+
+    return () => {
+      LogManager.subscribe(LogManager.EVENTS.OnLog, onLogHandler);
+    };
+  }, [show]);
+
  const show = useCallback(
    options => {
      if (!options || (!options.title && !options.message)) {
@@ -12,8 +12,6 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { InjectManifest } = require('workbox-webpack-plugin');
-const TerserJSPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 // ~~ Rules
 const extractStyleChunksRule = require('./rules/extractStyleChunks.js');
 // ~~ Directories
@@ -49,6 +47,16 @@ module.exports = (env, argv) => {
        }
      },
    },
+    resolve: {
+      // We use this alias and the CopyPlugin below to support using the dynamic-import version
+      // of WADO Image Loader, but only when building a PWA. When we build a package, we must use the
+      // bundled version of WADO Image Loader so we can produce a single file for the viewer.
+      // (Note: script-tag version of the viewer will no longer be supported in OHIF v3)
+      alias: {
+        'cornerstone-wado-image-loader':
+          'cornerstone-wado-image-loader/dist/dynamic-import/cornerstoneWADOImageLoader.min.js',
+      },
+    },
    module: {
      rules: [...extractStyleChunksRule(isProdBuild)],
    },
@@ -78,6 +86,11 @@ module.exports = (env, argv) => {
          from: `${PUBLIC_DIR}/${APP_CONFIG}`,
          to: `${DIST_DIR}/app-config.js`,
        },
+        {
+          from:
+            '../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import',
+          to: DIST_DIR,
+        },
      ]),
      // https://github.com/faceyspacey/extract-css-chunks-webpack-plugin#webpack-4-standalone-installation
      new ExtractCssChunksPlugin({
@@ -102,6 +115,15 @@ module.exports = (env, argv) => {
        // maximumFileSizeToCacheInBytes: 4 * 1024 * 1024
      }),
    ],
+    optimization: {
+      splitChunks: {
+        // include all types of chunks
+        chunks: 'all',
+      },
+      //runtimeChunk: 'single',
+      minimize: isProdBuild,
+      sideEffects: true,
+    },
    // https://webpack.js.org/configuration/dev-server/
    devServer: {
      // gzip compression of everything served
@@ -3,6 +3,71 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [4.11.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@4.11.1...@ohif/viewer@4.11.2) (2021-09-28)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [4.11.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@4.11.0...@ohif/viewer@4.11.1) (2021-09-24)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [4.11.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@4.10.1...@ohif/viewer@4.11.0) (2021-09-23)
+
+
+### Features
+
+* Update to WADO Image Loader 4.0.3 to add dynamically imported WebAssembly codec support 🚀 ([#2537](https://github.com/OHIF/Viewers/issues/2537)) ([489d4b0](https://github.com/OHIF/Viewers/commit/489d4b0584f4657ceda1c5b9b68d5e9733827e47))
+
+
+
+
+
+## [4.10.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@4.10.0...@ohif/viewer@4.10.1) (2021-09-13)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [4.10.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@4.9.24...@ohif/viewer@4.10.0) (2021-09-09)
+
+
+### Features
+
+* OHIF-1000: Study prefetcher ([#2466](https://github.com/OHIF/Viewers/issues/2466)) ([8f26045](https://github.com/OHIF/Viewers/commit/8f2604509d24092b721f1333289d838820d68cac))
+
+
+
+
+
+## [4.9.24](https://github.com/OHIF/Viewers/compare/@ohif/viewer@4.9.23...@ohif/viewer@4.9.24) (2021-09-03)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [4.9.23](https://github.com/OHIF/Viewers/compare/@ohif/viewer@4.9.22...@ohif/viewer@4.9.23) (2021-08-30)
+
+
+### Bug Fixes
+
+* MPR metadata parsing for spacings ([#2517](https://github.com/OHIF/Viewers/issues/2517)) ([715dfc5](https://github.com/OHIF/Viewers/commit/715dfc556a3883de31d74012dcc99e431d91f57d))
+
+
+
+
+
 ## [4.9.22](https://github.com/OHIF/Viewers/compare/@ohif/viewer@4.9.21...@ohif/viewer@4.9.22) (2021-08-19)


@@ -333,6 +333,7 @@ describe('OHIF User Preferences', () => {
        .scrollIntoView()
        .click();

+
      // Header should be in "English (USA)""
      cy.get('.research-use')
        .scrollIntoView()
@@ -560,6 +561,13 @@ describe('OHIF User Preferences', () => {
        .scrollIntoView()
        .click();

+      // Close Success Message overlay (if displayed)
+      cy.get('body').then(body => {
+        if (body.find('.sb-closeIcon').length > 0) {
+          cy.get('.sb-closeIcon').click({ force: true });
+        }
+      });
+
      // Open User Preferences modal again
      cy.openPreferences();

@@ -668,6 +676,13 @@ describe('OHIF User Preferences', () => {

      // Save changes
      cy.get('@saveBtn').click();
+      // Close Success Message overlay (if displayed)
+      cy.get('body').then(body => {
+        if (body.find('.sb-closeIcon').length > 0) {
+          cy.get('.sb-closeIcon').click({ force: true });
+        }
+      });
+
      // Open User Preferences modal
      cy.openPreferences();
      // Navigate to Window Level tab
@@ -504,6 +504,9 @@ Cypress.Commands.add('resetUserHotkeyPreferences', () => {
    cy.get('@restoreBtn').click();
  });

+  // Click on Save Button
+  cy.get('@saveBtn').click();
+
  // Close Success Message overlay (if displayed)
  cy.get('body').then(body => {
    if (body.find('.sb-closeIcon').length > 0) {
@@ -511,8 +514,6 @@ Cypress.Commands.add('resetUserHotkeyPreferences', () => {
        .first()
        .click({ force: true });
    }
-    // Click on Save Button
-    cy.get('@saveBtn').click();
  });
 });

@@ -525,6 +526,9 @@ Cypress.Commands.add('resetUserGeneralPreferences', () => {
    cy.get('@restoreBtn').click();
  });

+  // Click on Save Button
+  cy.get('@saveBtn').click();
+
  // Close Success Message overlay (if displayed)
  cy.get('body').then(body => {
    if (body.find('.sb-closeIcon').length > 0) {
@@ -532,8 +536,6 @@ Cypress.Commands.add('resetUserGeneralPreferences', () => {
        .first()
        .click({ force: true });
    }
-    // Click on Save Button
-    cy.get('@saveBtn').click();
  });
 });

@@ -1,6 +1,6 @@
 {
  "name": "@ohif/viewer",
-  "version": "4.9.22",
+  "version": "4.11.2",
  "description": "OHIF Viewer",
  "author": "OHIF Contributors",
  "license": "MIT",
@@ -19,14 +19,12 @@
  "scripts": {
    "build:package": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.commonjs.js --progress",
    "build:viewer": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js --progress",
-    "build:viewer:lesion-tracker": "cross-env ENTRY_TARGET=index-lesion-tracker.js NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js --progress",
    "build:viewer:ci": "cross-env NODE_ENV=production PUBLIC_URL=/pwa/ APP_CONFIG=config/netlify.js QUICK_BUILD=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js",
    "build:viewer:demo": "cross-env NODE_ENV=production APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html QUICK_BUILD=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --progress --config .webpack/webpack.pwa.js",
    "build:viewer:package": "yarn run build:package",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config .webpack/webpack.pwa.js --watch",
    "dev:orthanc": "cross-env NODE_ENV=development PROXY_TARGET=/dicom-web PROXY_DOMAIN=http://localhost:8042 APP_CONFIG=config/docker_nginx-orthanc.js webpack-dev-server --config .webpack/webpack.pwa.js --watch",
    "dev:viewer": "yarn run dev",
-    "dev:viewer:lesion-tracker": "cross-env ENTRY_TARGET=index-lesion-tracker.js NODE_ENV=development webpack-dev-server --config .webpack/webpack.pwa.js --watch",
    "start": "yarn run dev",
    "test:e2e": "cypress open",
    "test:e2e:ci": "percy exec -- cypress run --config video=false --record --browser chrome --spec 'cypress/integration/visual-regression/**/*'",
@@ -49,27 +47,27 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^2.13.13",
-    "@ohif/extension-cornerstone": "^2.10.10",
-    "@ohif/extension-debugging": "^0.2.2",
-    "@ohif/extension-dicom-html": "^1.3.10",
+    "@ohif/core": "^2.15.1",
+    "@ohif/extension-cornerstone": "^2.12.1",
+    "@ohif/extension-debugging": "^0.3.0",
+    "@ohif/extension-dicom-html": "^1.3.11",
    "@ohif/extension-dicom-microscopy": "^0.52.0",
-    "@ohif/extension-dicom-pdf": "^1.0.6",
-    "@ohif/extension-dicom-rt": "^0.6.13",
-    "@ohif/extension-dicom-segmentation": "^0.6.10",
+    "@ohif/extension-dicom-pdf": "^1.1.0",
+    "@ohif/extension-dicom-rt": "^0.7.1",
+    "@ohif/extension-dicom-segmentation": "^0.7.1",
    "@ohif/extension-lesion-tracker": "^0.2.1",
-    "@ohif/extension-vtk": "^1.11.14",
+    "@ohif/extension-vtk": "^1.12.2",
    "@ohif/i18n": "^0.53.0",
-    "@ohif/ui": "^1.9.2",
+    "@ohif/ui": "^1.10.2",
    "@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.20.1",
-    "cornerstone-wado-image-loader": "^3.1.0",
-    "dcmjs": "0.18.8",
-    "dicom-parser": "^1.8.3",
+    "cornerstone-core": "^2.5.0",
+    "cornerstone-math": "^0.1.9",
+    "cornerstone-tools": "^6.0.0",
+    "cornerstone-wado-image-loader": "^4.0.3",
+    "dcmjs": "0.18.9",
+    "dicom-parser": "^1.8.9",
    "dicomweb-client": "^0.8.1",
    "hammerjs": "^2.0.8",
    "i18next": "^17.0.3",
@@ -5,6 +5,15 @@ window.config = {
  showStudyList: true,
  filterQueryParam: false,
  disableServersCache: false,
+  studyPrefetcher: {
+    enabled: true,
+    order: 'closest',
+    displaySetCount: 3,
+    preventCache: false,
+    prefetchDisplaySetsTimeout: 300,
+    displayProgress: true,
+    includeActiveDisplaySet: true,
+  },
  servers: {
    dicomWeb: [
      {
@@ -124,6 +133,6 @@ window.config = {
  // If the server is particularly slow to respond to series metadata
  //  requests as it extracts the metadata from raw files everytime,
  //  try setting this to even lower value
-  // Leave it undefined for no limit, sutiable for HTTP/2 enabled servers
+  // Leave it undefined for no limit, suitable for HTTP/2 enabled servers
  // maxConcurrentMetadataRequests: 5,
 };
@@ -1,6 +1,15 @@
 window.config = {
  routerBasename: '/pwa',
  showStudyList: true,
+  studyPrefetcher: {
+    enabled: true,
+    order: 'closest',
+    displaySetCount: 3,
+    preventCache: false,
+    prefetchDisplaySetsTimeout: 300,
+    displayProgress: true,
+    includeActiveDisplaySet: true,
+  },
  servers: {
    dicomWeb: [
      {
@@ -1,42 +1,23 @@
-import { Component } from "react";
-import PropTypes from "prop-types";
-import OHIF from "@ohif/core";
+import { useEffect } from 'react';
+import OHIF from '@ohif/core';

-class StudyLoadingMonitor extends Component {
-  static propTypes = {
-    studies: PropTypes.array.isRequired,
-    setStudyLoadingProgress: PropTypes.func.isRequired,
-    clearStudyLoadingProgress: PropTypes.func.isRequired
-  };
+const { StudyLoadingListener } = OHIF.classes;

-  componentDidMount() {
-    // TODO: This is pretty ugly. The thing is that the StudyLoadingListener
-    // needs to update the Redux store, but shouldn't know that it exists.
-    // I am therefore passing in some functions to update the store instead,
-    // but this should definitely be cleaned up somehow.
-    const options = {
-      _setProgressData: (progressId, progressData) => {
-        this.props.setStudyLoadingProgress(progressId, progressData);
-      },
-      _clearProgressById: progressId => {
-        this.props.clearStudyLoadingProgress(progressId);
-      }
+const StudyLoadingMonitor = ({ studies }) => {
+  useEffect(() => {
+    const studyLoadingListener = StudyLoadingListener.getInstance();
+
+    if (studies && studies.length > 0) {
+      studyLoadingListener.clear();
+      studyLoadingListener.addStudies(studies);
+    }
+
+    return () => {
+      studyLoadingListener.clear();
    };
+  }, [studies]);

-    const { StudyLoadingListener } = OHIF.classes;
-    this.studyLoadingListener = StudyLoadingListener.getInstance(options);
-    this.studyLoadingListener.clear();
-    this.studyLoadingListener.addStudies(this.props.studies);
-  }
-
-  render() {
-    return null;
-  }
-
-  componentWillUnmount() {
-    // Destroy stack loading listeners when we close the viewer
-    this.studyLoadingListener.clear();
-  }
-}
+  return null;
+};

 export default StudyLoadingMonitor;
@@ -0,0 +1,15 @@
+.StudyPrefetcher {
+  height: 5px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  background-color: var(--default-color);
+}
+
+.StudyPrefetcher .item {
+  height: 5px;
+}
+
+.StudyPrefetcher .item.cached {
+  background-color: black;
+}
@@ -1,29 +1,93 @@
-import { Component } from "react";
-import PropTypes from "prop-types";
-import OHIF from "@ohif/core";
+import React, { useEffect } from 'react';
+import { classes, utils } from '@ohif/core';
+import PropTypes from 'prop-types';
+import cs from 'cornerstone-core';

-const { StudyPrefetcher } = OHIF.classes;
+import './StudyPrefetcher.css';

-class StudyPrefetcherComponent extends Component {
-  static propTypes = {
-    studies: PropTypes.array
-  };
+const StudyPrefetcher = ({ studies, options }) => {
+  useEffect(() => {
+    const studyPrefetcher = classes.StudyPrefetcher.getInstance(
+      studies,
+      options
+    );
+    const studiesMetadata = studies.map(s =>
+      utils.studyMetadataManager.get(s.StudyInstanceUID)
+    );
+    studyPrefetcher.setStudies(studiesMetadata);

-  componentDidMount() {
-    const { studies } = this.props;
+    const onNewImage = ({ detail }) => {
+      /**
+       * When images are cached the viewport will load instantly and
+       * the display sets will not be available at this point in time.
+       *
+       * This code add display sets and updates the study prefetcher metadata.
+       */
+      const studiesMetadata = studies.map(s => {
+        const studyMetadata = utils.studyMetadataManager.get(
+          s.StudyInstanceUID
+        );
+        const displaySets = studyMetadata.getDisplaySets();
+        if (!displaySets || displaySets.length < 1) {
+          s.displaySets.forEach(ds => studyMetadata.addDisplaySet(ds));
+        }
+        return studyMetadata;
+      });
+      studyPrefetcher.setStudies(studiesMetadata);

-    this.studyPrefetcher = StudyPrefetcher.getInstance();
-    this.studyPrefetcher.setStudies(studies);
-  }
+      const study = studyPrefetcher.getStudy(detail.image);
+      const series = studyPrefetcher.getSeries(study, detail.image);
+      const instance = studyPrefetcher.getInstance(series, detail.image);

-  render() {
-    return null;
-  }
+      if (study.displaySets && study.displaySets.length > 0) {
+        const {
+          displaySetInstanceUID,
+        } = studyPrefetcher.getDisplaySetBySOPInstanceUID(
+          study.displaySets,
+          instance
+        );
+        studyPrefetcher.prefetch(detail.element, displaySetInstanceUID);
+      }
+    };

-  componentWillUnmount() {
-    // Stop prefetching when we close the viewer
-    this.studyPrefetcher.destroy();
-  }
-}
+    const onElementEnabled = ({ detail }) => {
+      detail.element.addEventListener(cs.EVENTS.NEW_IMAGE, onNewImage);
+    };

-export default StudyPrefetcherComponent;
+    cs.events.addEventListener(cs.EVENTS.ELEMENT_ENABLED, onElementEnabled);
+
+    return () => {
+      cs.events.removeEventListener(
+        cs.EVENTS.ELEMENT_ENABLED,
+        onElementEnabled
+      );
+      studyPrefetcher.destroy();
+    };
+  }, [options, studies]);
+
+  return null;
+};
+
+StudyPrefetcher.propTypes = {
+  studies: PropTypes.array.isRequired,
+  options: PropTypes.shape({
+    enabled: PropTypes.bool,
+    order: PropTypes.string,
+    displaySetCount: PropTypes.number,
+    preventCache: PropTypes.bool,
+    prefetchDisplaySetsTimeout: PropTypes.number,
+    includeActiveDisplaySet: PropTypes.bool,
+  }),
+};
+
+StudyPrefetcher.defaultProps = {
+  options: {
+    order: 'closest',
+    displaySetCount: 1,
+    preventCache: false,
+    prefetchDisplaySetsTimeout: 300,
+    includeActiveDisplaySet: false,
+  },
+};
+
+export default StudyPrefetcher;
@@ -1,44 +1,11 @@
 import OHIF from '@ohif/core';
 import { connect } from 'react-redux';
-import { StudyBrowser } from '@ohif/ui';
-import cloneDeep from 'lodash.clonedeep';
 import findDisplaySetByUID from './findDisplaySetByUID';
 import { servicesManager } from './../App.js';
-
-const { studyMetadataManager } = OHIF.utils;
+import { StudyBrowser } from '../../../ui/src/components/studyBrowser/StudyBrowser';

 const { setActiveViewportSpecificData } = OHIF.redux.actions;

-// TODO
-// - Determine in which display set is active from Redux (activeViewportIndex and layout viewportData)
-// - Pass in errors and stack loading progress from Redux
-const mapStateToProps = (state, ownProps) => {
-  // If we know that the stack loading progress details have changed,
-  // we can try to update the component state so that the thumbnail
-  // progress bar is updated
-  const stackLoadingProgressMap = state.loading.progress;
-  const studiesWithLoadingData = cloneDeep(ownProps.studies);
-
-  studiesWithLoadingData.forEach(study => {
-    study.thumbnails.forEach(data => {
-      const { displaySetInstanceUID } = data;
-      const stackId = `StackProgress:${displaySetInstanceUID}`;
-      const stackProgressData = stackLoadingProgressMap[stackId];
-
-      let stackPercentComplete = 0;
-      if (stackProgressData) {
-        stackPercentComplete = stackProgressData.percentComplete;
-      }
-
-      data.stackPercentComplete = stackPercentComplete;
-    });
-  });
-
-  return {
-    studies: studiesWithLoadingData,
-  };
-};
-
 const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onThumbnailClick: displaySetInstanceUID => {
@@ -50,7 +17,10 @@ const mapDispatchToProps = (dispatch, ownProps) => {
      if (displaySet.isDerived) {
        const { Modality } = displaySet;
        if (Modality === 'SEG' && servicesManager) {
-          const {LoggerService, UINotificationService} = servicesManager.services;
+          const {
+            LoggerService,
+            UINotificationService,
+          } = servicesManager.services;
          const onDisplaySetLoadFailureHandler = error => {
            LoggerService.error({ error, message: error.message });
            UINotificationService.show({
@@ -61,20 +31,25 @@ const mapDispatchToProps = (dispatch, ownProps) => {
            });
          };

-          const {referencedDisplaySet, activatedLabelmapPromise} = displaySet.getSourceDisplaySet(
+          const {
+            referencedDisplaySet,
+            activatedLabelmapPromise,
+          } = displaySet.getSourceDisplaySet(
            ownProps.studyMetadata,
            true,
            onDisplaySetLoadFailureHandler
          );
          displaySet = referencedDisplaySet;

-          activatedLabelmapPromise.then((activatedLabelmapIndex) => {
-            const selectionFired = new CustomEvent("extensiondicomsegmentationsegselected", {
-              "detail": {"activatedLabelmapIndex":activatedLabelmapIndex}
-            });
+          activatedLabelmapPromise.then(activatedLabelmapIndex => {
+            const selectionFired = new CustomEvent(
+              'extensiondicomsegmentationsegselected',
+              {
+                detail: { activatedLabelmapIndex: activatedLabelmapIndex },
+              }
+            );
            document.dispatchEvent(selectionFired);
          });
-
        } else {
          displaySet = displaySet.getSourceDisplaySet(ownProps.studyMetadata);
        }
@@ -96,7 +71,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
 };

 const ConnectedStudyBrowser = connect(
-  mapStateToProps,
+  null,
  mapDispatchToProps
 )(StudyBrowser);

@@ -1,26 +0,0 @@
-import { connect } from "react-redux";
-import StudyLoadingMonitor from "../components/StudyLoadingMonitor.js";
-import OHIF from "@ohif/core";
-
-const {
-  setStudyLoadingProgress,
-  clearStudyLoadingProgress
-} = OHIF.redux.actions;
-
-const mapDispatchToProps = dispatch => {
-  return {
-    setStudyLoadingProgress: (progressId, progressData) => {
-      dispatch(setStudyLoadingProgress(progressId, progressData));
-    },
-    clearStudyLoadingProgress: progressId => {
-      dispatch(clearStudyLoadingProgress(progressId));
-    }
-  };
-};
-
-const ConnectedStudyLoadingMonitor = connect(
-  null,
-  mapDispatchToProps
-)(StudyLoadingMonitor);
-
-export default ConnectedStudyLoadingMonitor;
@@ -96,6 +96,8 @@ class ToolbarRow extends Component {
            value: menuOption.target,
            icon: menuOption.icon,
            bottomLabel: menuOption.label,
+            badgeNumber: menuOption.badgeNumber,
+            stateEvent: menuOption.stateEvent,
          };
          const from = menuOption.from || 'right';

@@ -1,11 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { useLogger } from '@ohif/ui';
-
 import OHIF, { MODULE_TYPES, DICOMSR } from '@ohif/core';
 import { withDialog } from '@ohif/ui';
 import moment from 'moment';
+
 import ConnectedHeader from './ConnectedHeader.js';
 import ToolbarRow from './ToolbarRow.js';
 import ConnectedStudyBrowser from './ConnectedStudyBrowser.js';
@@ -14,7 +13,6 @@ import SidePanel from './../components/SidePanel.js';
 import ErrorBoundaryDialog from './../components/ErrorBoundaryDialog';
 import { extensionManager } from './../App.js';
 import { ReconstructionIssues } from './../../../core/src/enums.js';
-import dcmjs from 'dcmjs';

 // Contexts
 import WhiteLabelingContext from '../context/WhiteLabelingContext.js';
@@ -22,8 +20,8 @@ import UserManagerContext from '../context/UserManagerContext';
 import AppContext from '../context/AppContext';

 import './Viewer.css';
-import { finished } from 'stream';
-import { cornerstoneWADOImageLoader } from 'cornerstone-wado-image-loader';
+import StudyPrefetcher from '../components/StudyPrefetcher.js';
+import StudyLoadingMonitor from '../components/StudyLoadingMonitor';

 class Viewer extends Component {
  static propTypes = {
@@ -197,11 +195,17 @@ class Viewer extends Component {
        ]);
      }

-      const activeViewport = this.props.viewports[this.props.activeViewportIndex];
-      const activeDisplaySetInstanceUID =
-        activeViewport ? activeViewport.displaySetInstanceUID : undefined;
+      const activeViewport = this.props.viewports[
+        this.props.activeViewportIndex
+      ];
+      const activeDisplaySetInstanceUID = activeViewport
+        ? activeViewport.displaySetInstanceUID
+        : undefined;
      this.setState({
-        thumbnails: _mapStudiesToThumbnails(studies, activeDisplaySetInstanceUID),
+        thumbnails: _mapStudiesToThumbnails(
+          studies,
+          activeDisplaySetInstanceUID
+        ),
      });
    }
  }
@@ -211,24 +215,31 @@ class Viewer extends Component {
      studies,
      isStudyLoaded,
      activeViewportIndex,
-      viewports
+      viewports,
    } = this.props;

    const activeViewport = viewports[activeViewportIndex];
-    const activeDisplaySetInstanceUID =
-      activeViewport ? activeViewport.displaySetInstanceUID : undefined;
+    const activeDisplaySetInstanceUID = activeViewport
+      ? activeViewport.displaySetInstanceUID
+      : undefined;

-    const prevActiveViewport = prevProps.viewports[prevProps.activeViewportIndex];
-    const prevActiveDisplaySetInstanceUID =
-      prevActiveViewport ? prevActiveViewport.displaySetInstanceUID : undefined;
+    const prevActiveViewport =
+      prevProps.viewports[prevProps.activeViewportIndex];
+    const prevActiveDisplaySetInstanceUID = prevActiveViewport
+      ? prevActiveViewport.displaySetInstanceUID
+      : undefined;

-    if (studies !== prevProps.studies ||
+    if (
+      studies !== prevProps.studies ||
      activeViewportIndex !== prevProps.activeViewportIndex ||
      activeDisplaySetInstanceUID !== prevActiveDisplaySetInstanceUID
-      ) {
-
+    ) {
      this.setState({
-        thumbnails: _mapStudiesToThumbnails(studies, activeDisplaySetInstanceUID),
+        thumbnails: _mapStudiesToThumbnails(
+          studies,
+          activeDisplaySetInstanceUID
+        ),
+        activeDisplaySetInstanceUID,
      });
    }
    if (isStudyLoaded && isStudyLoaded !== prevProps.isStudyLoaded) {
@@ -288,14 +299,12 @@ class Viewer extends Component {
            </UserManagerContext.Consumer>
          )}
        </WhiteLabelingContext.Consumer>
-
        {/* TOOLBAR */}
        <ErrorBoundaryDialog context="ToolbarRow">
          <ToolbarRow
            activeViewport={
              this.props.viewports[this.props.activeViewportIndex]
            }
-            isDerivedDisplaySetsLoaded={this.props.isDerivedDisplaySetsLoaded}
            isLeftSidePanelOpen={this.state.isLeftSidePanelOpen}
            isRightSidePanelOpen={this.state.isRightSidePanelOpen}
            selectedLeftSidePanel={
@@ -332,10 +341,9 @@ class Viewer extends Component {
            studies={this.props.studies}
          />
        </ErrorBoundaryDialog>
-
-        {/*<ConnectedStudyLoadingMonitor studies={this.props.studies} />*/}
-        {/*<StudyPrefetcher studies={this.props.studies} />*/}
-
+        <AppContext.Consumer>
+          {appContext => <StudyLoadingMonitor studies={this.props.studies} />}
+        </AppContext.Consumer>
        {/* VIEWPORTS + SIDEPANELS */}
        <div className="FlexboxLayout">
          {/* LEFT */}
@@ -348,10 +356,24 @@ class Viewer extends Component {
                  activeIndex={this.props.activeViewportIndex}
                />
              ) : (
-                <ConnectedStudyBrowser
-                  studies={this.state.thumbnails}
-                  studyMetadata={this.props.studies}
-                />
+                <AppContext.Consumer>
+                  {appContext => {
+                    const { appConfig } = appContext;
+                    const { studyPrefetcher } = appConfig;
+                    const { thumbnails } = this.state;
+                    return (
+                      <ConnectedStudyBrowser
+                        studies={thumbnails}
+                        studyMetadata={this.props.studies}
+                        showThumbnailProgressBar={
+                          studyPrefetcher &&
+                          studyPrefetcher.enabled &&
+                          studyPrefetcher.displayProgress
+                        }
+                      />
+                    );
+                  }}
+                </AppContext.Consumer>
              )}
            </SidePanel>
          </ErrorBoundaryDialog>
@@ -359,6 +381,22 @@ class Viewer extends Component {
          {/* MAIN */}
          <div className={classNames('main-content')}>
            <ErrorBoundaryDialog context="ViewerMain">
+              <AppContext.Consumer>
+                {appContext => {
+                  const { appConfig } = appContext;
+                  const { studyPrefetcher } = appConfig;
+                  const { studies } = this.props;
+                  return (
+                    studyPrefetcher &&
+                    studyPrefetcher.enabled && (
+                      <StudyPrefetcher
+                        studies={studies}
+                        options={studyPrefetcher}
+                      />
+                    )
+                  );
+                }}
+              </AppContext.Consumer>
              <ConnectedViewerMain
                studies={this.props.studies}
                isStudyLoaded={this.props.isStudyLoaded}
@@ -410,31 +448,46 @@ export default withDialog(Viewer);
 * @param {*object} displaySet
 * @returns {[string]} an array of strings containing the warnings
 */
-const _checkForSeriesInconsistencesWarnings = async function (displaySet, studies) {
+const _checkForSeriesInconsistencesWarnings = async function(
+  displaySet,
+  studies
+) {
  if (displaySet.inconsistencyWarnings) {
    // warnings already checked and cached in displaySet
    return displaySet.inconsistencyWarnings;
  }
+
  const inconsistencyWarnings = [];

  if (displaySet.Modality !== 'SEG') {
-    if (displaySet.reconstructionIssues && displaySet.reconstructionIssues.length !== 0) {
+    if (
+      displaySet.reconstructionIssues &&
+      displaySet.reconstructionIssues.length !== 0
+    ) {
      displaySet.reconstructionIssues.forEach(warning => {
        switch (warning) {
          case ReconstructionIssues.DATASET_4D:
            inconsistencyWarnings.push('The dataset is 4D.');
            break;
          case ReconstructionIssues.VARYING_IMAGESDIMENSIONS:
-            inconsistencyWarnings.push('The dataset frames have different dimensions (rows, columns).');
+            inconsistencyWarnings.push(
+              'The dataset frames have different dimensions (rows, columns).'
+            );
            break;
          case ReconstructionIssues.VARYING_IMAGESCOMPONENTS:
-            inconsistencyWarnings.push('The dataset frames have different components (Sample per pixel).');
+            inconsistencyWarnings.push(
+              'The dataset frames have different components (Sample per pixel).'
+            );
            break;
          case ReconstructionIssues.VARYING_IMAGESORIENTATION:
-            inconsistencyWarnings.push('The dataset frames have different orientation.');
+            inconsistencyWarnings.push(
+              'The dataset frames have different orientation.'
+            );
            break;
          case ReconstructionIssues.IRREGULAR_SPACING:
-            inconsistencyWarnings.push('The dataset frames have different pixel spacing.');
+            inconsistencyWarnings.push(
+              'The dataset frames have different pixel spacing.'
+            );
            break;
          case ReconstructionIssues.MULTIFFRAMES:
            inconsistencyWarnings.push('The dataset is a multiframes.');
@@ -443,39 +496,52 @@ const _checkForSeriesInconsistencesWarnings = async function (displaySet, studie
            break;
        }
      });
-      inconsistencyWarnings.push('The datasets is not a reconstructable 3D volume. MPR mode is not available.');
+      inconsistencyWarnings.push(
+        'The datasets is not a reconstructable 3D volume. MPR mode is not available.'
+      );
    }

-    if (displaySet.missingFrames &&
+    if (
+      displaySet.missingFrames &&
      (!displaySet.reconstructionIssues ||
-        (displaySet.reconstructionIssues && !displaySet.reconstructionIssues.find(warn => warn === ReconstructionIssues.DATASET_4D)))) {
-          inconsistencyWarnings.push('The datasets is missing frames: ' + displaySet.missingFrames + '.');
+        (displaySet.reconstructionIssues &&
+          !displaySet.reconstructionIssues.find(
+            warn => warn === ReconstructionIssues.DATASET_4D
+          )))
+    ) {
+      inconsistencyWarnings.push(
+        'The datasets is missing frames: ' + displaySet.missingFrames + '.'
+      );
    }
  } else {
    const segMetadata = displaySet.metadata;
    if (!segMetadata) {
-      displaySet.inconsistencyWarnings = inconsistencyWarnings;
      return inconsistencyWarnings;
    }

-    const { referencedDisplaySet } = displaySet.getSourceDisplaySet(studies, false);
+    const { referencedDisplaySet } = displaySet.getSourceDisplaySet(
+      studies,
+      false
+    );
    if (!referencedDisplaySet) {
-      displaySet.inconsistencyWarnings = inconsistencyWarnings;
      return inconsistencyWarnings;
    }

-    const imageIds = referencedDisplaySet.images.map(image => image.getImageId());
+    const imageIds = referencedDisplaySet.images.map(image =>
+      image.getImageId()
+    );
    if (!imageIds || imageIds.length === 0) {
-      displaySet.inconsistencyWarnings = inconsistencyWarnings;
      return inconsistencyWarnings;
    }

    for (
-      let i = 0, groupsLen = segMetadata.PerFrameFunctionalGroupsSequence.length;
+      let i = 0,
+        groupsLen = segMetadata.PerFrameFunctionalGroupsSequence.length;
      i < groupsLen;
      ++i
    ) {
-      const PerFrameFunctionalGroups = segMetadata.PerFrameFunctionalGroupsSequence[i];
+      const PerFrameFunctionalGroups =
+        segMetadata.PerFrameFunctionalGroupsSequence[i];
      if (!PerFrameFunctionalGroups) {
        continue;
      }
@@ -485,29 +551,27 @@ const _checkForSeriesInconsistencesWarnings = async function (displaySet, studie
        SourceImageSequence = segMetadata.SourceImageSequence[i];
      } else if (PerFrameFunctionalGroups.DerivationImageSequence) {
        SourceImageSequence =
-          PerFrameFunctionalGroups.DerivationImageSequence
-            .SourceImageSequence;
+          PerFrameFunctionalGroups.DerivationImageSequence.SourceImageSequence;
      }
      if (!SourceImageSequence) {
        if (inconsistencyWarnings.length === 0) {
-          const warningMessage = 'The segmentation ' +
+          const warningMessage =
+            'The segmentation ' +
            'has frames out of plane respect to the source images.';
-            inconsistencyWarnings.push(warningMessage);
+          inconsistencyWarnings.push(warningMessage);
        }
        continue;
      }

-      const {
-        ReferencedSOPInstanceUID,
-      } = SourceImageSequence;
+      const { ReferencedSOPInstanceUID } = SourceImageSequence;

      const imageId = imageIds.find(imageId => {
        const sopCommonModule = cornerstone.metaData.get(
-            "sopCommonModule",
-            imageId
+          'sopCommonModule',
+          imageId
        );
        if (!sopCommonModule) {
-            return;
+          return;
        }

        return sopCommonModule.sopInstanceUID === ReferencedSOPInstanceUID;
@@ -517,33 +581,32 @@ const _checkForSeriesInconsistencesWarnings = async function (displaySet, studie
        continue;
      }

-      const sourceImageMetadata = cornerstone.metaData.get(
-        "instance",
-        imageId
-      );
+      const sourceImageMetadata = cornerstone.metaData.get('instance', imageId);
      if (
        segMetadata.Rows !== sourceImageMetadata.Rows ||
        segMetadata.Columns !== sourceImageMetadata.Columns
      ) {
-        const warningMessage = 'The segmentation ' +
+        const warningMessage =
+          'The segmentation ' +
          'has frames with different geometry ' +
          'dimensions (Rows and Columns) respect to the source images.';
-          inconsistencyWarnings.push(warningMessage);
+        inconsistencyWarnings.push(warningMessage);
        break;
      }
    }

    if (inconsistencyWarnings.length !== 0) {
-      const warningMessage = 'The segmentation format is not supported yet. ' +
+      const warningMessage =
+        'The segmentation format is not supported yet. ' +
        'The segmentation data (segments) could not be loaded.';
-        inconsistencyWarnings.push(warningMessage);
+      inconsistencyWarnings.push(warningMessage);
    }
  }

  // cache the warnings
  displaySet.inconsistencyWarnings = inconsistencyWarnings;
  return inconsistencyWarnings;
-}
+};

 /**
 * Checks if display set is active, i.e. if the series is currently shown
@@ -562,30 +625,42 @@ const _checkForSeriesInconsistencesWarnings = async function (displaySet, studie
 * @param {string} activeDisplaySetInstanceUID
 * @returns {boolean} is active.
 */
- const _isDisplaySetActive = function(displaySet, studies, activeDisplaySetInstanceUID) {
+const _isDisplaySetActive = function(
+  displaySet,
+  studies,
+  activeDisplaySetInstanceUID
+) {
  let active = false;

-  const {
-    displaySetInstanceUID,
-  } = displaySet;
+  const { displaySetInstanceUID } = displaySet;

  // TO DO: in the future, we could possibly support new modalities
  // we should have a list of all modalities here, instead of having hard coded checks
-  if (displaySet.Modality !== 'SEG' &&
+  if (
+    displaySet.Modality !== 'SEG' &&
    displaySet.Modality !== 'RTSTRUCT' &&
-    displaySet.Modality !== 'RTDOSE') {
+    displaySet.Modality !== 'RTDOSE'
+  ) {
    active = activeDisplaySetInstanceUID === displaySetInstanceUID;
-  } else if (displaySet.getSourceDisplaySet){
+  } else if (displaySet.getSourceDisplaySet) {
    if (displaySet.Modality === 'SEG') {
-      const { referencedDisplaySet } = displaySet.getSourceDisplaySet(studies, false);
-      active = referencedDisplaySet ?
-        activeDisplaySetInstanceUID === referencedDisplaySet.displaySetInstanceUID :
-          false;
+      const { referencedDisplaySet } = displaySet.getSourceDisplaySet(
+        studies,
+        false
+      );
+      active = referencedDisplaySet
+        ? activeDisplaySetInstanceUID ===
+          referencedDisplaySet.displaySetInstanceUID
+        : false;
    } else {
-      const referencedDisplaySet = displaySet.getSourceDisplaySet(studies, false);
-      active = referencedDisplaySet ?
-        activeDisplaySetInstanceUID === referencedDisplaySet.displaySetInstanceUID :
-          false;
+      const referencedDisplaySet = displaySet.getSourceDisplaySet(
+        studies,
+        false
+      );
+      active = referencedDisplaySet
+        ? activeDisplaySetInstanceUID ===
+          referencedDisplaySet.displaySetInstanceUID
+        : false;
    }
  }

@@ -629,11 +704,17 @@ const _mapStudiesToThumbnails = function(studies, activeDisplaySetInstanceUID) {
        altImageText = displaySet.Modality ? displaySet.Modality : 'UN';
      }

-      const hasWarnings = _checkForSeriesInconsistencesWarnings(displaySet, studies);
-      const active = _isDisplaySetActive(displaySet, studies, activeDisplaySetInstanceUID)
+      const hasWarnings = _checkForSeriesInconsistencesWarnings(
+        displaySet,
+        studies
+      );

      return {
-        active,
+        active: _isDisplaySetActive(
+          displaySet,
+          studies,
+          activeDisplaySetInstanceUID
+        ),
        imageId,
        altImageText,
        displaySetInstanceUID,
@@ -1337,6 +1337,21 @@
    exec-sh "^0.3.2"
    minimist "^1.2.0"

+"@cornerstonejs/codec-charls@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@cornerstonejs/codec-charls/-/codec-charls-0.1.1.tgz#e55d4aa908732d0cc902888b7f3856c5a996df7f"
+  integrity sha512-Y250DGVzmownJ7WgpHxNqWvfTnv4/malaKm/tWm0xE1FxhQE8iErMWFpKxpNDk3MdfXO4/98piVsUwmJMiWoDQ==
+
+"@cornerstonejs/codec-libjpeg-turbo-8bit@^0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@cornerstonejs/codec-libjpeg-turbo-8bit/-/codec-libjpeg-turbo-8bit-0.0.7.tgz#2ea9b575eed19e6e7e3701b7a50a4ae0ffbef0c4"
+  integrity sha512-qgm6BuVAy5mNP8SJ+A6+VbmPnqgj8jPvJrw4HbUoAzndmf9/VHjTYwawn3kmZWya5ErFAsXQ6c0U0noB1LKAiA==
+
+"@cornerstonejs/codec-openjpeg@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@cornerstonejs/codec-openjpeg/-/codec-openjpeg-0.1.0.tgz#5bca10ae2980ff681ebcdace2074a0adaf12ad86"
+  integrity sha512-9mwseBidYPQ1rGPcUU8JriQnzUi5Bgtontqca7gw47uzxC4Zamoc1Kuho5LUpbS1LSnOLePOkDrg/LCYhJIq8g==
+
 "@csstools/convert-colors@^1.4.0":
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
@@ -3085,6 +3100,11 @@
    "@types/prop-types" "*"
    csstype "^2.2.0"

+"@types/resize-observer-browser@^0.1.6":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.6.tgz#d8e6c2f830e2650dc06fe74464472ff64b54a302"
+  integrity sha512-61IfTac0s9jvNtBCpyo86QeaN8qqpMGHdK0uGKCCIy2dt5/Yk84VduHIdWAcmkC5QvdkPL0p5eWYgUZtHKKUVg==
+
 "@types/resolve@0.0.8":
  version "0.0.8"
  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -5265,6 +5285,11 @@ classnames@2.2.6, classnames@^2.2.5, classnames@^2.2.6:
  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==

+classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@4.2.x, clean-css@^4.2.1:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -6009,36 +6034,34 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=

-cornerstone-core@^2.2.8:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/cornerstone-core/-/cornerstone-core-2.3.0.tgz#b16430b0dc3883c795fbbd5f64d0f6357f91c889"
-  integrity sha512-1LiCfRIlQvR1j8OhF7/3pvvQvvnTYZUywEkuoEo5K5mMrlKdrQMS75uW1uXb/nXShQDJyyjtTCQSVGgv2yHA+w==
+cornerstone-core@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/cornerstone-core/-/cornerstone-core-2.5.0.tgz#1051ffc34420ad7484e61d2f3bdbc41a5ebc1956"
+  integrity sha512-mJzvRJh8J7d5FJutjaL9cT8ZNnmj6l5PHROsyktZq1ojh4vkXfHECQ2izIQu8nmtJ9A6SyQRj4v5Uxn7hijzKw==

-cornerstone-math@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/cornerstone-math/-/cornerstone-math-0.1.7.tgz#7c55536f02e7221b05fc49a4c780bb82c234ce39"
-  integrity sha512-svsDSoqLNFM9niCV2AtV2DNmRkYztT1v80lVdbA5hkgdGdpWg5/h2On794zbqBK+aI3hNOHufERDsI4wdXGknA==
+cornerstone-math@0.1.9, cornerstone-math@^0.1.9:
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/cornerstone-math/-/cornerstone-math-0.1.9.tgz#7ce5509e8b9f465b01f7c548470725e7569859fc"
+  integrity sha512-NxdooV73asEQgav1S+0e+a4K+W3CXJdLXyFkVN24qqCtmIpzZzwtw3F9KWPCekzSAJmbhtQ3HicOQj3d4vRtuw==

-cornerstone-math@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/cornerstone-math/-/cornerstone-math-0.1.8.tgz#68ab1f9e4fdcd7c5cb23a0d2eb4263f9f894f1c5"
-  integrity sha512-x7NEQHBtVG7j1yeyj/aRoKTpXv1Vh2/H9zNLMyqYJDtJkNng8C4Q8M3CgZ1qer0Yr7eVq2x+Ynmj6kfOm5jXKw==
-
-cornerstone-tools@^4.20.1:
-  version "4.20.1"
-  resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-4.20.1.tgz#90f6c28356622eac037683b19f9175f85d33dff7"
-  integrity sha512-SyQsrg3bnGHUvWGZpUq7ia7/gj12S9zQFK2VMhpyAYxK9pWz+PRv8HBi0eEe/fWGAo/Vc62IRkdP3uF9MJlqiQ==
+cornerstone-tools@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-6.0.0.tgz#6840658f4508e60cd206b17d6e56160367f616f1"
+  integrity sha512-VU4MrsO2NcQK6CUxuYFdiNvdWjF/NV/fs8jCePazYCoFDDKIYcUM9UmoYXAapFE2mon65p4u9wUAvuIuLeBQwA==
  dependencies:
    "@babel/runtime" "7.1.2"
-    cornerstone-math "0.1.7"
+    cornerstone-math "0.1.9"

-cornerstone-wado-image-loader@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cornerstone-wado-image-loader/-/cornerstone-wado-image-loader-3.1.0.tgz#6007470be896678636da3188f194f5e66ed07858"
-  integrity sha512-n2yadbwK7rCHqJyh5AUmYVPUY5m7boKpheK60sXV41Z0eSZLin9Ja+P9yeAvkg0VGV+/zaBZGPUGY3YyjdWBgg==
+cornerstone-wado-image-loader@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/cornerstone-wado-image-loader/-/cornerstone-wado-image-loader-4.0.3.tgz#4848a238af9b10742af6d08e204527acf5260c25"
+  integrity sha512-0KuMC6+hEFsCwVOBH4idKwPpbLdccPzP7i5Ja4q7E/kfwCE71uL8AzHhx96XcLeFN8oR8T+nzv8X6j0lyY32SA==
  dependencies:
-    dicom-parser "^1.8.3"
-    pako "^1.0.10"
+    "@cornerstonejs/codec-charls" "^0.1.1"
+    "@cornerstonejs/codec-libjpeg-turbo-8bit" "^0.0.7"
+    "@cornerstonejs/codec-openjpeg" "^0.1.0"
+    dicom-parser "^1.8.9"
+    pako "^2.0.4"

 cors@^2.8.4:
  version "2.8.5"
@@ -6609,6 +6632,11 @@ date-fns@^2.2.1:
  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.6.0.tgz#a5bc82e6a4c3995ae124b0ba1a71aec7b8cbd666"
  integrity sha512-F55YxqRdEfP/eYQmQjLN798v0AwLjmZ8nMBjdQvNwEE3N/zWVrlkkqT+9seBlPlsbkybG4JmWg3Ee3dIV9BcGQ==

+date-fns@^2.23.0:
+  version "2.23.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.23.0.tgz#4e886c941659af0cf7b30fafdd1eaa37e88788a9"
+  integrity sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==
+
 date-now@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@@ -6619,10 +6647,10 @@ dateformat@^3.0.0:
  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
  integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==

-dcmjs@0.18.8:
-  version "0.18.8"
-  resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.18.8.tgz#fc8e6af03ace9050da49f4108334aa3d0a3bdf3d"
-  integrity sha512-Z3nNEmzkWdpHQPgjozGqk8XcuhP/hXP1C64Wtg9V+VO9eEc8eNFJFJ6If62f1cuOh0FaRwHqxBT7OzhOAUpFTA==
+dcmjs@0.18.9:
+  version "0.18.9"
+  resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.18.9.tgz#0e18fcff975aaae8ca01a96e781fa75c29ec97f3"
+  integrity sha512-aTu4fUo3TSgohJC+U509qdXL1per09XvlYdQva0BGtIZMr/iR5n8h/ojpcDTRJoVtSuaj331KJj1yCj8FMMK4Q==
  dependencies:
    "@babel/polyfill" "^7.8.3"
    "@babel/runtime" "^7.8.4"
@@ -6935,10 +6963,10 @@ dicom-microscopy-viewer@^0.6.1:
    dicomweb-client "^0.5.2"
    ol "^5.3.0"

-dicom-parser@^1.8.3:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/dicom-parser/-/dicom-parser-1.8.3.tgz#6e4b862898112304db30143147562011c1ce6a4d"
-  integrity sha512-CMeUr+jea7Ml70N+/Z5Pd2MYtvLp6IU+TnvdLe6VRVKzZuTeYLYyuAQa9R+sFK4v4N39hig+hKHN+Wfi9sQ6GA==
+dicom-parser@^1.8.9:
+  version "1.8.9"
+  resolved "https://registry.yarnpkg.com/dicom-parser/-/dicom-parser-1.8.9.tgz#c69b036b8234df1cfad9978d0d6f0caad1582e74"
+  integrity sha512-OdLBIh460sy0aVeBZ/XSjbzEvXDS18XWxTdTinYmIHNi2jZfo6UuxscX4/VuYslduQ9LaeY6sdEXe9P9e6qlvA==

 dicomweb-client@^0.5.2:
  version "0.5.2"
@@ -14060,7 +14088,12 @@ pako@1.0.6:
  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
  integrity sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg==

-pako@^1.0.10, pako@~1.0.2, pako@~1.0.5:
+pako@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.4.tgz#6cebc4bbb0b6c73b0d5b8d7e8476e2b2fbea576d"
+  integrity sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==
+
+pako@~1.0.2, pako@~1.0.5:
  version "1.0.10"
  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
  integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
@@ -15693,16 +15726,16 @@ react-codemirror2@^6.0.0:
  resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-6.0.0.tgz#180065df57a64026026cde569a9708fdf7656525"
  integrity sha512-D7y9qZ05FbUh9blqECaJMdDwKluQiO3A9xB+fssd5jKM7YAXucRuEOlX32mJQumUvHUkHRHqXIPBjm6g0FW0Ag==

-react-cornerstone-viewport@4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-4.0.5.tgz#3de83cdd3643980e0330f3743f631dbbb24d98a7"
-  integrity sha512-uamDtFljWWEHe26kOBJJ1Bu//6hAgEra7BDVykOvtMC/W7kW34Q2fFX3ZwkL6TDdCQ94O6K98IXPS9HbrEJWYg==
+react-cornerstone-viewport@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-4.1.1.tgz#713536c031b1e1d0d9f58ad80ee34f15998e5759"
+  integrity sha512-cJ3D7WglieGxcR49hivORk1YnSCQFbj8HVNj7JFaddix8jMqIkBpmbN5En5+8yM3ujgdj1n66uaLWNoP7JE9Qw==
  dependencies:
-    classnames "^2.2.6"
-    date-fns "^2.2.1"
+    classnames "^2.3.1"
+    date-fns "^2.23.0"
    lodash.debounce "^4.0.8"
    prop-types "^15.7.2"
-    react-resize-detector "^4.2.1"
+    react-resize-detector "^6.7.6"

 react-dates@21.2.1:
  version "21.2.1"
@@ -16053,7 +16086,7 @@ react-redux@^7.1.0:
    prop-types "^15.7.2"
    react-is "^16.9.0"

-react-resize-detector@^4.2.0, react-resize-detector@^4.2.1:
+react-resize-detector@^4.2.0:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-4.2.1.tgz#8982b74c3e1cf949afaa3c41050458c87b033982"
  integrity sha512-ZfPMBPxXi0o3xox42MIEtz84tPSVMW9GgwLHYvjVXlFM+OkNzbeEtpVSV+mSTJmk4Znwomolzt35zHN9LNBQMQ==
@@ -16064,6 +16097,16 @@ react-resize-detector@^4.2.0, react-resize-detector@^4.2.1:
    raf-schd "^4.0.2"
    resize-observer-polyfill "^1.5.1"

+react-resize-detector@^6.7.6:
+  version "6.7.6"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-6.7.6.tgz#4416994e5ead7eba76606e3a248a1dfca49b67a3"
+  integrity sha512-/6RZlul1yePSoYJxWxmmgjO320moeLC/khrwpEVIL+D2EjLKhqOwzFv+H8laMbImVj7Zu4FlMa0oA7au3/ChjQ==
+  dependencies:
+    "@types/resize-observer-browser" "^0.1.6"
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+    resize-observer-polyfill "^1.5.1"
+
 react-router-dom@^5.0.1:
  version "5.1.2"
  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
@@ -16152,10 +16195,10 @@ react-transition-group@^4.1.1:
    loose-envify "^1.4.0"
    prop-types "^15.6.2"

-react-vtkjs-viewport@^0.14.2:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/react-vtkjs-viewport/-/react-vtkjs-viewport-0.14.2.tgz#8b3363e4fc0b2084e72d59b3bb6246c27b08b6a4"
-  integrity sha512-sIUU2Om0O4mby9tubjeVRPCNDGSKh2OM7tgpd+wxxjvAqOGRIab51jL+mZTP4ijTMRzZ8Gvl6c4ywOuXnH4RJA==
+react-vtkjs-viewport@^0.14.4:
+  version "0.14.4"
+  resolved "https://registry.yarnpkg.com/react-vtkjs-viewport/-/react-vtkjs-viewport-0.14.4.tgz#8cc5a49738fff3fee75ead61c98307bc24710151"
+  integrity sha512-WKU87iqH6AQ1R8zp1hUXU4hsGwfbkkoUhzSCjbBGZ9Di0ELYNx/xY9DtdmgsKOU5Y5Arp5+VQW/ziFsq2KTcTA==
  dependencies:
    date-fns "^2.2.1"
    gl-matrix "^3.1.0"
Author	SHA1	Message	Date
ohif-bot	252536a1e6	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.12.1 - @ohif/extension-dicom-html@1.3.11 - @ohif/extension-dicom-rt@0.7.1 - @ohif/extension-dicom-segmentation@0.7.1 - @ohif/extension-dicom-tag-browser@0.2.12 - @ohif/extension-vtk@1.12.2 - @ohif/core@2.15.1 - @ohif/viewer@4.11.2	2021-09-28 12:14:17 +00:00
Davide Punzo	53b1d71d56	fix regression not showing warnings list on thumbnail for segmentations (#2563 ) * fix regression not showing warnings list on thumbnail for segmentations * update dcmjs version	2021-09-28 14:07:29 +02:00
Erik Ziegler	702d99cb93	Add FUNDING.yml	2021-09-27 14:23:37 +02:00
Alireza	bb7b78bf33	chore(github): Create config.yml for issues (#2561 ) * chore(github): Create config.yml for issues * Delete ---support-question.md	2021-09-27 14:20:38 +02:00
ohif-bot	b796fc9c62	chore(release): publish [skip ci] - @ohif/extension-vtk@1.12.1 - @ohif/ui@1.10.2 - @ohif/viewer@4.11.1	2021-09-24 11:04:33 +00:00
Erik Ziegler	66c587b139	fix: throttle thumbnail progress updates (#2557 )	2021-09-24 12:58:30 +02:00
ohif-bot	f6e2e58aad	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.12.0 - @ohif/extension-debugging@0.3.0 - @ohif/extension-dicom-pdf@1.1.0 - @ohif/extension-dicom-rt@0.7.0 - @ohif/extension-dicom-segmentation@0.7.0 - @ohif/extension-vtk@1.12.0 - @ohif/core@2.15.0 - @ohif/viewer@4.11.0	2021-09-23 16:42:56 +00:00
Erik ZieglerandAlireza	489d4b0584	feat: Update to WADO Image Loader 4.0.3 to add dynamically imported WebAssembly codec support 🚀 (#2537 ) * feat: bump to prerelease of WADO Image Loader for testing * switch to released versions * update react-vtkjs-viewport and fix requestpool usage in StudyPrefetcher * attempt to fix e2e tests for script-tag usage * fix e2e test error * switch to using webpack alias in PWA to use dynamic import version of OHIF * fix copy plugin usage * try to fix publicpath issue * bump to 4.0.3 Co-authored-by: Alireza <ar.sedghi@gmail.com>	2021-09-23 18:37:29 +02:00
ohif-bot	36019156da	chore(release): publish [skip ci] - @ohif/extension-vtk@1.11.18 - @ohif/core@2.14.1 - @ohif/ui@1.10.1 - @ohif/viewer@4.10.1	2021-09-13 13:10:07 +00:00
Igor Octaviano	f2a371fc2d	Display warning messages if fails to parse sr report (#2543 )	2021-09-13 15:06:30 +02:00
ohif-bot	ad2f038817	chore(release): publish [skip ci] - @ohif/extension-cornerstone@2.11.0 - @ohif/extension-vtk@1.11.17 - @ohif/core@2.14.0 - @ohif/ui@1.10.0 - @ohif/viewer@4.10.0	2021-09-09 08:02:24 +00:00
Igor OctavianoandAlireza	8f2604509d	feat: OHIF-1000: Study prefetcher (#2466 ) * Enable study prefetcher and expose configs * Fix progress for all images * Enable study loading listener * Add new default for displaying progress bar for series * Use events instead of redux to improve performance * Add documentation, resolve issues with different datasets * CR Updates * CR Updates * CR Updates & Resolve issue when activating both stack and study prefetch * Add upward and update display set logic * Add new behavior to prefetching orders * Rollback display set check and activate cache check * Remove prefetch check * Check if displayset has images * Debounce check cache events * Remove usued debounce flags * Ignore prefetching same image * Use new image instead of image rendered * Continue prefetch after cache check * Update prefetch logic after checking cache * Remove log * Update displayset count default to 3 * Update netlify config Co-authored-by: Alireza <ar.sedghi@gmail.com>	2021-09-09 09:58:24 +02:00
ohif-bot	ea0963d75f	chore(release): publish [skip ci] - @ohif/extension-dicom-rt@0.6.14 - @ohif/extension-dicom-segmentation@0.6.11 - @ohif/extension-vtk@1.11.16 - @ohif/core@2.13.15 - @ohif/ui@1.9.3 - @ohif/viewer@4.9.24	2021-09-03 21:01:01 +00:00
Igor Octaviano	46d5718011	Merge pull request #2491 from OHIF/feat/ohif-2482 OHIF-2482: Add badge numbers for seg and rtstruct	2021-09-03 17:57:42 -03:00
Davide Punzo	f8740e04f3	Merge branch 'master' into feat/ohif-2482	2021-09-02 16:08:37 +02:00
ohif-bot	669717d27b	chore(release): publish [skip ci] - @ohif/extension-vtk@1.11.15 - @ohif/core@2.13.14 - @ohif/viewer@4.9.23	2021-08-30 13:04:58 +00:00
Alireza	715dfc556a	fix: MPR metadata parsing for spacings (#2517 ) * fix: MPR metadata parsing for spacings * fix: OHIF Metadata provider for validNumbers for imagePlaneModule	2021-08-30 09:01:46 -04:00
igoroctaviano	f6a0db753a	Merge branch 'master' of github.com:OHIF/Viewers into feat/ohif-2482	2021-07-29 09:19:42 -03:00
igoroctaviano	8518e179ee	Extract event	2021-07-29 09:18:31 -03:00
igoroctaviano	3f40cdced7	Add badge numbers for seg and rtstruct	2021-07-28 22:15:05 -03:00
				`@@ -0,0 +1 @@`
				`custom: https://giving.massgeneral.org/ohif`