chore(release): publish [skip ci]

- @ohif/extension-dicom-tag-browser@0.1.1
 - @ohif/extension-vtk@1.9.2
 - @ohif/core@2.11.1
 - @ohif/ui@1.7.1
 - @ohif/viewer@4.6.2

.circleci/config.yml

@@ -13,11 +13,23 @@ version: 2.1
 ##
 orbs:
   codecov: codecov/codecov@1.0.5
-  cypress: cypress-io/cypress@1.13.0
+  cypress: cypress-io/cypress@1.26.0
+executors:
+  # Custom executor to override Cypress config
+  deploy-to-prod-executor:
+    docker:
+      - image: 'cypress/browsers:node14.15.0-chrome86-ff82'
+        environment:
+          CYPRESS_BASE_URL: https://ohif-staging.netlify.com/
+  chrome-and-pacs:
+    docker:
+      # Primary container image where all steps run.
+      - image: 'cypress/browsers:node14.15.0-chrome86-ff82'
+      - image: 'ohif/viewer-testdata:0.1-test'
 
 defaults: &defaults
   docker:
-    - image: circleci/node:12.9.1
+    - image: circleci/node:14.15.0
       environment:
         TERM: xterm # Enable colors in term
         QUICK_BUILD: true
@@ -170,7 +182,7 @@ jobs:
 
   DEPLOY_TO_DEV:
     docker:
-      - image: circleci/node:12.9.1
+      - image: circleci/node:14.15.0
         environment:
           TERM: xterm
           NETLIFY_SITE_ID: 32708787-c9b0-4634-b50f-7ca41952da77
@@ -185,7 +197,7 @@ jobs:
 
   DEPLOY_TO_STAGING:
     docker:
-      - image: circleci/node:12.9.1
+      - image: circleci/node:14.15.0
         environment:
           TERM: xterm
           NETLIFY_SITE_ID: c7502ae3-b150-493c-8422-05701e44a969
@@ -200,7 +212,7 @@ jobs:
 
   DEPLOY_TO_PRODUCTION:
     docker:
-      - image: circleci/node:12.9.1
+      - image: circleci/node:14.15.0
         environment:
           TERM: xterm
           NETLIFY_SITE_ID: 79c4a5da-5c95-4dc9-84f7-45fd9dfe21b0
@@ -257,7 +269,12 @@ jobs:
           paths: .
 
   DOCS_PUBLISH:
-    <<: *defaults
+    docker:
+      # Gitbook fails due to graceful-fs updates above this node version :-(
+      - image: circleci/node:12.9.1
+        environment:
+          TERM: xterm # Enable colors in term
+    working_directory: ~/repo
     steps:
       - checkout
       - run:
@@ -317,16 +334,19 @@ workflows:
       # E2E: PWA
       - cypress/run:
           name: 'E2E: PWA'
-          executor: cypress/browsers-chrome76
+          executor: chrome-and-pacs
           browser: chrome
           pre-steps:
-            - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
-                add wait-on' # Use yarn latest
+            - run: |
+                # Clear yarn cache; update to latest
+                rm -rf ~/.yarn
+                npm i -g yarn
+                yarn -v
           yarn: true
-          record: false
-          store_artifacts: false
+          record: true
+          store_artifacts: true
           working_directory: platform/viewer
-          build: npx cross-env QUICK_BUILD=true yarn run build
+          build: npx cross-env QUICK_BUILD=true APP_CONFIG=config/dicomweb-server.js yarn run build
           start: yarn run test:e2e:serve
           spec: 'cypress/integration/common/**/*,cypress/integration/pwa/**/*'
           wait-on: 'http://localhost:3000'
@@ -337,21 +357,22 @@ workflows:
                 path: platform/viewer/cypress/screenshots
             - store_artifacts:
                 path: platform/viewer/cypress/videos
+            - store_test_results:
+                path: platform/viewer/cypress/results
           requires:
             - UNIT_TESTS
       # E2E: script-tag
       - cypress/run:
           name: 'E2E: Script Tag'
-          executor: cypress/browsers-chrome76
+          executor: chrome-and-pacs
           browser: chrome
           pre-steps:
-            - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
-                add wait-on' # Use yarn latest
+            - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v' # Use yarn latest
           yarn: true
-          record: false
-          store_artifacts: false
+          record: true
+          store_artifacts: true
           working_directory: platform/viewer
-          build: npx cross-env QUICK_BUILD=true yarn run build:package
+          build: npx cross-env QUICK_BUILD=true APP_CONFIG=config/dicomweb-server.js yarn run build:package
           start: yarn run test:e2e:serve
           spec: 'cypress/integration/common/**/*,cypress/integration/script-tag/**/*'
           wait-on: 'http://localhost:3000'
@@ -362,6 +383,8 @@ workflows:
                 path: platform/viewer/cypress/screenshots
             - store_artifacts:
                 path: platform/viewer/cypress/videos
+            - store_test_results:
+                path: platform/viewer/cypress/results
           requires:
             - UNIT_TESTS
 
@@ -372,7 +395,7 @@ workflows:
       # Update hub.docker.org
       - cypress/run:
           name: 'Generate Percy Snapshots'
-          executor: cypress/browsers-chrome76
+          executor: chrome-and-pacs
           browser: chrome
           pre-steps:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
@@ -380,7 +403,7 @@ workflows:
           yarn: true
           store_artifacts: false
           working_directory: platform/viewer
-          build: npx cross-env QUICK_BUILD=true yarn run build
+          build: npx cross-env QUICK_BUILD=true APP_CONFIG=config/dicomweb-server.js yarn run build
           # start server --> verify running --> percy + chrome + cypress
           command: yarn run test:e2e:dist
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
@@ -449,7 +472,7 @@ workflows:
       # and record a Cypress dashboard test run
       - cypress/run:
           name: 'Generate Percy Snapshots'
-          executor: cypress/browsers-chrome76
+          executor: chrome-and-pacs
           browser: chrome
           pre-steps:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
@@ -457,7 +480,7 @@ workflows:
           yarn: true
           store_artifacts: false
           working_directory: platform/viewer
-          build: npx cross-env QUICK_BUILD=true yarn run build
+          build: npx cross-env QUICK_BUILD=true APP_CONFIG=config/dicomweb-server.js yarn run build
           # start server --> verify running --> percy + chrome + cypress
           command: yarn run test:e2e:dist
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'

.github/stale.yml

@@ -2,9 +2,9 @@
 # https://github.com/apps/stale
 #
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 21
+daysUntilStale: 180
 # Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
+daysUntilClose: 9000
 # Issues with these labels will never be considered stale
 exemptLabels:
   - 'Story :raised_hands:'

extensions/dicom-tag-browser/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-tag-browser@0.1.0...@ohif/extension-dicom-tag-browser@0.1.1) (2020-12-03)
+
+
+### Bug Fixes
+
+* fallback to original dataset VR for XS ([f57725a](https://github.com/OHIF/Viewers/commit/f57725ac8bfd59ea46ab334a1823882afadefba1))
+
+
+
+
+
+# [0.1.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-tag-browser@0.0.5...@ohif/extension-dicom-tag-browser@0.1.0) (2020-12-03)
+
+
+### Features
+
+* add show scroll option to modal ([be494a7](https://github.com/OHIF/Viewers/commit/be494a7376d15777dbe598289c4ecdb9f48a6a48))
+
+
+
+
+
+## [0.0.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-tag-browser@0.0.4...@ohif/extension-dicom-tag-browser@0.0.5) (2020-12-03)
+
+**Note:** Version bump only for package @ohif/extension-dicom-tag-browser
+
+
+
+
+
 ## [0.0.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-tag-browser@0.0.3...@ohif/extension-dicom-tag-browser@0.0.4) (2020-10-07)
 
 **Note:** Version bump only for package @ohif/extension-dicom-tag-browser

extensions/dicom-tag-browser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-tag-browser",
-  "version": "0.0.4",
+  "version": "0.1.1",
   "description": "OHIF extension for checking DICOM headers.",
   "author": "OHIF",
   "license": "MIT",

extensions/dicom-tag-browser/src/components/DicomTagBrowser.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { classes } from '@ohif/core';
+import { classes, cornerstone as OHIFCornerstone } from '@ohif/core';
 import dcmjs from 'dcmjs';
 import DicomBrowserSelect from './DicomBrowserSelect';
 import moment from 'moment';
@@ -10,6 +10,8 @@ const { ImageSet } = classes;
 const { DicomMetaDictionary } = dcmjs.data;
 const { nameMap } = DicomMetaDictionary;
 
+const { metadataProvider } = OHIFCornerstone;
+
 const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
   const [
     activeDisplaySetInstanceUID,
@@ -17,6 +19,7 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
   ] = useState(displaySetInstanceUID);
   const [activeInstance, setActiveInstance] = useState(0);
   const [tags, setTags] = useState([]);
+  const [meta, setMeta] = useState('');
   const [instanceList, setInstanceList] = useState([]);
   const [displaySetList, setDisplaySetList] = useState([]);
   const [isImageStack, setIsImageStack] = useState(false);
@@ -83,6 +86,7 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
     }
 
     setTags(getSortedTags(metadata));
+    setMeta(metadata);
     setInstanceList(instanceList);
     setDisplaySetList(newDisplaySetList);
     setIsImageStack(isImageStack);
@@ -114,41 +118,43 @@ const DicomTagBrowser = ({ displaySets, displaySetInstanceUID }) => {
         options={displaySetList}
       />
       {instanceSelectList}
-      <DicomTagTable tags={tags}></DicomTagTable>
+      <DicomTagTable tags={tags} meta={meta}></DicomTagTable>
     </div>
   );
 };
 
-function DicomTagTable({ tags }) {
-  const rows = getFormattedRowsFromTags(tags);
+function DicomTagTable({ tags, meta }) {
+  const rows = getFormattedRowsFromTags(tags, meta);
 
   return (
     <div>
       <table className="dicom-tag-browser-table">
-        <tr>
-          <th className="dicom-tag-browser-table-left">Tag</th>
-          <th className="dicom-tag-browser-table-left">Value Representation</th>
-          <th className="dicom-tag-browser-table-left">Keyword</th>
-          <th className="dicom-tag-browser-table-left">Value</th>
-        </tr>
-        {rows.map(row => {
-          const className = row.className ? row.className : null;
+        <tbody>
+          <tr>
+            <th className="dicom-tag-browser-table-left">Tag</th>
+            <th className="dicom-tag-browser-table-left">Value Representation</th>
+            <th className="dicom-tag-browser-table-left">Keyword</th>
+            <th className="dicom-tag-browser-table-left">Value</th>
+          </tr>
+          {rows.map((row, index) => {
+            const className = row.className ? row.className : null;
 
-          return (
-            <tr className={className}>
-              <td>{row[0]}</td>
-              <td className="dicom-tag-browser-table-center">{row[1]}</td>
-              <td>{row[2]}</td>
-              <td>{row[3]}</td>
-            </tr>
-          );
-        })}
+            return (
+              <tr className={className} key={`DICOMTagRow-${index}`}>
+                <td>{row[0]}</td>
+                <td className="dicom-tag-browser-table-center">{row[1]}</td>
+                <td>{row[2]}</td>
+                <td>{row[3]}</td>
+              </tr>
+            );
+          })}
+        </tbody>
       </table>
     </div>
   );
 }
 
-function getFormattedRowsFromTags(tags) {
+function getFormattedRowsFromTags(tags, meta) {
   const rows = [];
 
   tags.forEach(tagInfo => {
@@ -175,6 +181,17 @@ function getFormattedRowsFromTags(tags) {
         rows.push(...formatedRowsFromTags);
       });
     } else {
+      if (tagInfo.vr === 'xs') {
+        try {
+          const dataset = metadataProvider.getStudyDataset(meta.StudyInstanceUID);
+          const tag = dcmjs.data.Tag.fromPString(tagInfo.tag).toCleanString();
+          const originalTagInfo = dataset[tag];
+          tagInfo.vr = originalTagInfo.vr;
+        } catch (error) {
+          console.error(`Failed to parse value representation for tag '${tagInfo.keyword}'`);
+        }
+      }
+
       rows.push([
         `${tagInfo.tagIndent}${tagInfo.tag}`,
         tagInfo.vr,
@@ -247,10 +264,11 @@ function getRows(metadata, depth = 0) {
       sequenceAsArray.forEach(item => {
         const sequenceRows = getRows(item, depth + 1);
 
-        // Sort the sequence group.
-        _sortTagList(sequenceRows);
-
-        sequence.values.push(sequenceRows);
+        if (sequenceRows.length) {
+          // Sort the sequence group.
+          _sortTagList(sequenceRows);
+          sequence.values.push(sequenceRows);
+        }
       });
 
       continue;
@@ -276,13 +294,12 @@ function getRows(metadata, depth = 0) {
           } else if (value.Alphabetic) {
             value = value.Alphabetic;
           } else {
-            console.error('Unrecognised Value for element:');
-            console.error(value);
+            console.warn(`Unrecognised Value: ${value} for ${keyword}:`);
+            console.warn(value);
             value = ' ';
           }
         } else {
-          console.error('Unrecognised Value for element:');
-          console.error(value);
+          console.warn(`Unrecognised Value: ${value} for ${keyword}:`);
           value = ' ';
         }
       }

extensions/dicom-tag-browser/src/getCommandsModule.js

@@ -21,7 +21,7 @@ export default function getCommandsModule(servicesManager) {
 
       const { UIModalService } = servicesManager.services;
 
-      const WrappedDicomTagBrowser = function() {
+      const WrappedDicomTagBrowser = function () {
         return (
           <DicomTagBrowser
             displaySets={displaySets}
@@ -34,6 +34,7 @@ export default function getCommandsModule(servicesManager) {
         content: WrappedDicomTagBrowser,
         title: `DICOM Tag Browser`,
         fullscreen: true,
+        showScrollbar: true
       });
     },
   };

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,92 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.9.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.9.1...@ohif/extension-vtk@1.9.2) (2020-12-03)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.9.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.9.0...@ohif/extension-vtk@1.9.1) (2020-12-03)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+# [1.9.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.8.0...@ohif/extension-vtk@1.9.0) (2020-12-03)
+
+
+### Features
+
+* Add error boundary and retry logic for network failures during dynamic imports ([#2145](https://github.com/OHIF/Viewers/issues/2145)) ([4c07904](https://github.com/OHIF/Viewers/commit/4c079044f6ae2381c6054d8d77414100152d1d19))
+
+
+
+
+
+# [1.8.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.7.16...@ohif/extension-vtk@1.8.0) (2020-11-30)
+
+
+### Features
+
+* **i18n:** Added de (German) translations ([2fff2d5](https://github.com/OHIF/Viewers/commit/2fff2d511fa1d36bdd6476da4ffa5684bf55374f))
+
+
+
+
+
+## [1.7.16](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.7.15...@ohif/extension-vtk@1.7.16) (2020-11-19)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.7.15](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.7.14...@ohif/extension-vtk@1.7.15) (2020-11-02)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.7.14](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.7.13...@ohif/extension-vtk@1.7.14) (2020-10-20)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.7.13](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.7.12...@ohif/extension-vtk@1.7.13) (2020-10-15)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.7.12](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.7.11...@ohif/extension-vtk@1.7.12) (2020-10-13)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.7.11](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.7.10...@ohif/extension-vtk@1.7.11) (2020-10-13)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [1.7.10](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.7.9...@ohif/extension-vtk@1.7.10) (2020-10-07)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "1.7.10",
+  "version": "1.9.2",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -50,11 +50,11 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "lodash.throttle": "^4.1.1",
-    "react-vtkjs-viewport": "^0.10.4"
+    "react-vtkjs-viewport": "^0.14.2"
   },
   "devDependencies": {
-    "@ohif/core": "^2.10.7",
-    "@ohif/ui": "^1.5.6",
+    "@ohif/core": "^2.11.1",
+    "@ohif/ui": "^1.7.1",
     "cornerstone-tools": "^4.20.1",
     "cornerstone-wado-image-loader": "^3.1.0",
     "dicom-parser": "^1.8.3",

extensions/vtk/src/asyncComponent.js

@@ -1,37 +0,0 @@
-/**
- * We use this component to leverage "Code Splitting"
- *
- * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
- */
-
-import React, { Component } from 'react';
-
-export default function asyncComponent(importComponent) {
-  class AsyncComponent extends Component {
-    constructor(props) {
-      super(props);
-
-      this.state = {
-        component: null,
-      };
-    }
-
-    async componentDidMount() {
-      // Add dynamically loaded component to state
-      const { default: component } = await importComponent();
-
-      this.setState({
-        component: component,
-      });
-    }
-
-    render() {
-      const C = this.state.component;
-
-      // Render the loaded component, or null
-      return C ? <C {...this.props} /> : null;
-    }
-  }
-
-  return AsyncComponent;
-}

extensions/vtk/src/commandsModule.js

@@ -1,9 +1,9 @@
 import throttle from 'lodash.throttle';
 import {
-  vtkInteractorStyleMPRCrosshairs,
   vtkInteractorStyleMPRWindowLevel,
+  vtkInteractorStyleRotatableMPRCrosshairs,
+  vtkSVGRotatableCrosshairsWidget,
   vtkInteractorStyleMPRRotate,
-  vtkSVGCrosshairsWidget,
 } from 'react-vtkjs-viewport';
 import { getImageData } from 'react-vtkjs-viewport';
 import { vec3 } from 'gl-matrix';
@@ -11,11 +11,10 @@ import setMPRLayout from './utils/setMPRLayout.js';
 import setViewportToVTK from './utils/setViewportToVTK.js';
 import Constants from 'vtk.js/Sources/Rendering/Core/VolumeMapper/Constants.js';
 import OHIFVTKViewport from './OHIFVTKViewport';
-import vtkCoordinate from 'vtk.js/Sources/Rendering/Core/Coordinate';
 
 const { BlendMode } = Constants;
 
-const commandsModule = ({ commandsManager }) => {
+const commandsModule = ({ commandsManager, UINotificationService }) => {
   // TODO: Put this somewhere else
   let apis = {};
 
@@ -119,6 +118,14 @@ const commandsModule = ({ commandsManager }) => {
     getVtkApis: ({ index }) => {
       return apis[index];
     },
+    resetMPRView() {
+      apis.forEach(api => {
+        api.resetOrientation();
+      });
+
+      // Reset the crosshairs
+      apis[0].svgWidgets.rotatableCrosshairsWidget.resetCrosshairs(apis, 0);
+    },
     axial: async ({ viewports }) => {
       const api = await _getActiveViewportVTKApi(viewports);
 
@@ -165,7 +172,7 @@ const commandsModule = ({ commandsManager }) => {
       segmentNumber,
       frameIndex,
       frame,
-      done = () => { }
+      done = () => {},
     }) => {
       let api = apis[viewports.activeViewportIndex];
 
@@ -180,10 +187,13 @@ const commandsModule = ({ commandsManager }) => {
         displaySetInstanceUID,
         SOPClassUID,
         SOPInstanceUID,
-        frameIndex,
+        frameIndex
       );
 
-      const imageDataObject = getImageData(stack.imageIds, displaySetInstanceUID);
+      const imageDataObject = getImageData(
+        stack.imageIds,
+        displaySetInstanceUID
+      );
 
       let pixelIndex = 0;
       let x = 0;
@@ -209,9 +219,12 @@ const commandsModule = ({ commandsManager }) => {
       y /= count;
 
       const position = [x, y, frameIndex];
-      const worldPos = _convertModelToWorldSpace(position, imageDataObject.vtkImageData);
+      const worldPos = _convertModelToWorldSpace(
+        position,
+        imageDataObject.vtkImageData
+      );
 
-      api.svgWidgets.crosshairsWidget.moveCrosshairs(worldPos, apis);
+      api.svgWidgets.rotatableCrosshairsWidget.moveCrosshairs(worldPos, apis);
       done();
     },
     setSegmentationConfiguration: async ({
@@ -254,21 +267,38 @@ const commandsModule = ({ commandsManager }) => {
       await Promise.all(promises);
     },
     enableRotateTool: () => {
-      apis.forEach(api => {
+      apis.forEach((api, apiIndex) => {
         const istyle = vtkInteractorStyleMPRRotate.newInstance();
 
-        api.setInteractorStyle({ istyle });
+        api.setInteractorStyle({
+          istyle,
+          configuration: { apis, apiIndex, uid: api.uid },
+        });
       });
     },
     enableCrosshairsTool: () => {
       apis.forEach((api, apiIndex) => {
-        const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
+        const istyle = vtkInteractorStyleRotatableMPRCrosshairs.newInstance();
 
         api.setInteractorStyle({
           istyle,
-          configuration: { apis, apiIndex },
+          configuration: {
+            apis,
+            apiIndex,
+            uid: api.uid,
+          },
         });
       });
+
+      const rotatableCrosshairsWidget =
+        apis[0].svgWidgets.rotatableCrosshairsWidget;
+
+      const referenceLines = rotatableCrosshairsWidget.getReferenceLines();
+
+      // Initilise crosshairs if not initialised.
+      if (!referenceLines) {
+        rotatableCrosshairsWidget.resetCrosshairs(apis, 0);
+      }
     },
     enableLevelTool: () => {
       function updateVOI(apis, windowWidth, windowCenter) {
@@ -291,10 +321,14 @@ const commandsModule = ({ commandsManager }) => {
         },
       };
 
-      apis.forEach(api => {
+      apis.forEach((api, apiIndex) => {
         const istyle = vtkInteractorStyleMPRWindowLevel.newInstance();
 
-        api.setInteractorStyle({ istyle, callbacks });
+        api.setInteractorStyle({
+          istyle,
+          callbacks,
+          configuration: { apis, apiIndex, uid: api.uid },
+        });
       });
     },
     setSlabThickness: ({ slabThickness }) => {
@@ -391,18 +425,59 @@ const commandsModule = ({ commandsManager }) => {
       // Add widgets and set default interactorStyle of each viewport.
       apis.forEach((api, apiIndex) => {
         api.addSVGWidget(
-          vtkSVGCrosshairsWidget.newInstance(),
-          'crosshairsWidget'
+          vtkSVGRotatableCrosshairsWidget.newInstance(),
+          'rotatableCrosshairsWidget'
         );
 
         const uid = api.uid;
-        const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
+        const istyle = vtkInteractorStyleRotatableMPRCrosshairs.newInstance();
 
         api.setInteractorStyle({
           istyle,
           configuration: { apis, apiIndex, uid },
         });
+
+        api.svgWidgets.rotatableCrosshairsWidget.setApiIndex(apiIndex);
+        api.svgWidgets.rotatableCrosshairsWidget.setApis(apis);
       });
+
+      const firstApi = apis[0];
+
+      // Initialise crosshairs
+      apis[0].svgWidgets.rotatableCrosshairsWidget.resetCrosshairs(apis, 0);
+
+      // Check if we have full WebGL 2 support
+      const openGLRenderWindow = apis[0].genericRenderWindow.getOpenGLRenderWindow();
+
+      if (!openGLRenderWindow.getWebgl2()) {
+        // Throw a warning if we don't have WebGL 2 support,
+        // And the volume is too big to fit in a 2D texture
+
+        const openGLContext = openGLRenderWindow.getContext();
+        const maxTextureSizeInBytes = openGLContext.getParameter(
+          openGLContext.MAX_TEXTURE_SIZE
+        );
+
+        const maxBufferLengthFloat32 =
+          (maxTextureSizeInBytes * maxTextureSizeInBytes) / 4;
+
+        const dimensions = firstApi.volumes[0]
+          .getMapper()
+          .getInputData()
+          .getDimensions();
+
+        const volumeLength = dimensions[0] * dimensions[1] * dimensions[2];
+
+        if (volumeLength > maxBufferLengthFloat32) {
+          UINotificationService.show({
+            title: 'Browser does not support WebGL 2',
+            message:
+              'This volume is too large to fit in WebGL 1 textures and will display incorrectly. Please use a different browser to view this data',
+            type: 'error',
+            autoClose: false,
+          });
+        }
+      }
     },
   };
 
@@ -456,6 +531,10 @@ const commandsModule = ({ commandsManager }) => {
       commandFn: actions.enableLevelTool,
       options: {},
     },
+    resetMPRView: {
+      commandFn: actions.resetMPRView,
+      options: {},
+    },
     setBlendModeToComposite: {
       commandFn: actions.setBlendModeToComposite,
       options: { blendMode: BlendMode.COMPOSITE_BLEND },

extensions/vtk/src/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import asyncComponent from './asyncComponent.js';
+import { asyncComponent, retryImport } from '@ohif/ui';
+
 import commandsModule from './commandsModule.js';
 import toolbarModule from './toolbarModule.js';
 import withCommandsManager from './withCommandsManager.js';
@@ -8,7 +9,7 @@ import { version } from '../package.json';
 // import loadLocales from './loadLocales';
 
 const OHIFVTKViewport = asyncComponent(() =>
-  import(/* webpackChunkName: "OHIFVTKViewport" */ './OHIFVTKViewport.js')
+  retryImport(() => import(/* webpackChunkName: "OHIFVTKViewport" */ './OHIFVTKViewport.js'))
 );
 
 const vtkExtension = {
@@ -27,8 +28,9 @@ const vtkExtension = {
   getToolbarModule() {
     return toolbarModule;
   },
-  getCommandsModule({ commandsManager }) {
-    return commandsModule({ commandsManager });
+  getCommandsModule({ commandsManager, servicesManager }) {
+    const { UINotificationService } = servicesManager.services;
+    return commandsModule({ commandsManager, UINotificationService });
   },
 };
 

extensions/vtk/src/locales/de/Buttons.json

@@ -0,0 +1,3 @@
+{
+  "Rotate": "Drehen"
+}

extensions/vtk/src/locales/de/index.js

@@ -0,0 +1,7 @@
+import Buttons from './Buttons.json';
+
+export default {
+  de: {
+    Buttons,
+  },
+};

extensions/vtk/src/locales/index.js

@@ -1,7 +1,9 @@
 import en from './en';
 import es from './es';
+import de from './de';
 
 export default {
   ...en,
-  ...es
+  ...es,
+  ...de,
 };

extensions/vtk/src/toolbarModule.js

@@ -25,6 +25,16 @@ const definitions = [
     commandName: 'enableLevelTool',
     commandOptions: {},
   },
+  {
+    id: 'Reset',
+    label: 'Reset',
+    icon: 'reset',
+    //
+    type: TOOLBAR_BUTTON_TYPES.COMMAND,
+    commandName: 'resetMPRView',
+    commandOptions: {},
+  },
+  /*
   {
     id: 'Rotate',
     label: 'Rotate',
@@ -34,6 +44,7 @@ const definitions = [
     commandName: 'enableRotateTool',
     commandOptions: {},
   },
+  */
   /*
   {
     id: 'setBlendModeToComposite',
@@ -131,4 +142,4 @@ const definitions = [
 export default {
   definitions,
   defaultContext: 'ACTIVE_VIEWPORT::VTK',
-}
+};

package.json

@@ -28,6 +28,7 @@
     "test:unit": "jest --collectCoverage",
     "test:unit:ci": "lerna run test:unit:ci --parallel --stream",
     "test:e2e": "lerna run test:e2e --stream",
+    "test:e2e:script-tag": "lerna run test:e2e:script-tag --stream",
     "test:e2e:ci": "lerna run test:e2e:ci --stream",
     "test:e2e:dist": "lerna run test:e2e:dist --stream",
     "test:e2e:serve": "lerna run test:e2e:serve --stream",

platform/core/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.11.0...@ohif/core@2.11.1) (2020-12-03)
+
+
+### Bug Fixes
+
+* fallback to original dataset VR for XS ([f57725a](https://github.com/OHIF/Viewers/commit/f57725ac8bfd59ea46ab334a1823882afadefba1))
+
+
+
+
+
+# [2.11.0](https://github.com/OHIF/Viewers/compare/@ohif/core@2.10.7...@ohif/core@2.11.0) (2020-12-03)
+
+
+### Features
+
+* add show scroll option to modal ([be494a7](https://github.com/OHIF/Viewers/commit/be494a7376d15777dbe598289c4ecdb9f48a6a48))
+
+
+
+
+
 ## [2.10.7](https://github.com/OHIF/Viewers/compare/@ohif/core@2.10.6...@ohif/core@2.10.7) (2020-10-07)
 
 **Note:** Version bump only for package @ohif/core

platform/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/core",
-  "version": "2.10.7",
+  "version": "2.11.1",
   "description": "Generic business logic for web-based medical imaging applications",
   "author": "OHIF Core Team",
   "license": "MIT",

platform/core/src/classes/MetadataProvider.js

@@ -20,6 +20,7 @@ class MetadataProvider {
       writable: false,
       value: new Map(),
     });
+    this.datasets = {};
   }
 
   async addInstance(dicomJSONDatasetOrP10ArrayBuffer, options = {}) {
@@ -52,6 +53,7 @@ class MetadataProvider {
       SOPInstanceUID,
     } = naturalizedDataset;
 
+    this._getAndCacheStudyDataset(StudyInstanceUID, dicomJSONDataset);
     const study = this._getAndCacheStudy(StudyInstanceUID);
     const series = this._getAndCacheSeriesFromStudy(study, SeriesInstanceUID);
     const instance = this._getAndCacheInstanceFromStudy(series, SOPInstanceUID);
@@ -71,6 +73,16 @@ class MetadataProvider {
     this.imageIdToUIDs.set(imageId, uids);
   }
 
+  _getAndCacheStudyDataset(StudyInstanceUID, dataset) {
+    if (!this.datasets[StudyInstanceUID]) {
+      this.datasets[StudyInstanceUID] = dataset;
+    }
+  }
+
+  getStudyDataset(StudyInstanceUID) {
+    return this.datasets[StudyInstanceUID];
+  }
+
   _getAndCacheStudy(StudyInstanceUID) {
     const studies = this.studies;
 
@@ -83,6 +95,7 @@ class MetadataProvider {
 
     return study;
   }
+
   _getAndCacheSeriesFromStudy(study, SeriesInstanceUID) {
     let series = study.series.get(SeriesInstanceUID);
 

platform/core/src/services/UIModalService/index.js

@@ -9,6 +9,7 @@
  * @property {boolean} [closeButton=true] Should the modal body render the close button.
  * @property {string} [title=null] Should the modal render the title independently of the body content.
  * @property {string} [customClassName=null] The custom class to style the modal.
+ * @property {boolean} [showScrollbar=null] Show or hide scrollbar.
  */
 
 const name = 'UIModalService';
@@ -28,7 +29,7 @@ const serviceImplementation = {
 /**
  * Show a new UI modal;
  *
- * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, onClose, closeButton, title, customClassName }
+ * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, onClose, closeButton, title, customClassName, showScrollbar }
  */
 function _show({
   content = null,
@@ -40,6 +41,7 @@ function _show({
   title = null,
   fullscreen = false,
   customClassName = null,
+  showScrollbar = false
 }) {
   return serviceImplementation._show({
     content,
@@ -51,6 +53,7 @@ function _show({
     title,
     fullscreen,
     customClassName,
+    showScrollbar
   });
 }
 

platform/core/src/utils/Queue.test.js

@@ -21,12 +21,12 @@ describe('Queue', () => {
     const mockedTimeout = jest.fn(timeout);
     const timer = queue.bind(mockedTimeout);
     const start = Date.now();
-    timer(120).then(now => {
+    timer(1200).then(now => {
       const elapsed = now - start;
-      expect(elapsed >= 120 && elapsed < 240).toBe(true);
+      expect(elapsed >= 1200 && elapsed < 2400).toBe(true);
     });
-    const end = await timer(120);
-    expect(end - start > 240).toBe(true);
+    const end = await timer(1200);
+    expect(end - start > 2400).toBe(true);
     expect(mockedTimeout).toBeCalledTimes(2);
   });
   it('should prevent task execution when queue limit is reached', async () => {
@@ -34,15 +34,15 @@ describe('Queue', () => {
     const mockedTimeout = jest.fn(timeout);
     const timer = queue.bind(mockedTimeout);
     const start = Date.now();
-    const promise = timer(120).then(time => time - start);
+    const promise = timer(1200).then(time => time - start);
     try {
-      await timer(120);
+      await timer(1200);
     } catch (e) {
-      expect(Date.now() - start < 120).toBe(true);
+      expect(Date.now() - start < 1200).toBe(true);
       expect(e.message).toBe('Queue limit reached');
     }
     const elapsed = await promise;
-    expect(elapsed >= 120 && elapsed < 240).toBe(true);
+    expect(elapsed >= 1200 && elapsed < 2400).toBe(true);
     expect(mockedTimeout).toBeCalledTimes(1);
   });
   it('should safely bind tasks to the queue', async () => {
@@ -51,16 +51,16 @@ describe('Queue', () => {
     const mockedTimeout = jest.fn(timeout);
     const timer = queue.bindSafe(mockedTimeout, mockedErrorHandler);
     const start = Date.now();
-    const promise = timer(120).then(time => time - start);
-    await timer(120);
-    expect(Date.now() - start < 120).toBe(true);
+    const promise = timer(1200).then(time => time - start);
+    await timer(1200);
+    expect(Date.now() - start < 1200).toBe(true);
     expect(mockedErrorHandler).toBeCalledTimes(1);
     expect(mockedErrorHandler).nthCalledWith(
       1,
       expect.objectContaining({ message: 'Queue limit reached' })
     );
     const elapsed = await promise;
-    expect(elapsed >= 120 && elapsed < 240).toBe(true);
+    expect(elapsed >= 1200 && elapsed < 2400).toBe(true);
     expect(mockedTimeout).toBeCalledTimes(1);
   });
 });

platform/i18n/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.53.0](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.52.8...@ohif/i18n@0.53.0) (2020-11-30)
+
+
+### Bug Fixes
+
+* Add syncTranslations script ([b161016](https://github.com/OHIF/Viewers/commit/b161016edb8808ff0d17ea637820837dca1ca3ce))
+
+
+### Features
+
+* **i18n:** Added de (German) translations ([2fff2d5](https://github.com/OHIF/Viewers/commit/2fff2d511fa1d36bdd6476da4ffa5684bf55374f))
+* **i18n:** Added Russian language localization. ([d5b8974](https://github.com/OHIF/Viewers/commit/d5b89748c92c2cf5a88f54ae491adc31a1679705))
+
+
+
+
+
 ## [0.52.8](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.52.7...@ohif/i18n@0.52.8) (2020-04-07)
 
 **Note:** Version bump only for package @ohif/i18n

platform/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/i18n",
-  "version": "0.52.8",
+  "version": "0.53.0",
   "description": "Internationalization library for The OHIF Viewer",
   "author": "OHIF",
   "license": "MIT",

platform/i18n/src/locales/ar/UserPreferencesModal.json

@@ -1,3 +0,0 @@
-{
-  "No hotkeys found": "Nenhuma tecla de atalho está configurada para este aplicativo. As teclas de atalho podem ser configuradas no arquivo app-config.js do aplicativo."
-}

platform/i18n/src/locales/ar/index.js

@@ -1,7 +0,0 @@
-import UserPreferencesModal from './UserPreferencesModal.json';
-
-export default { 
-  'ar': {
-    UserPreferencesModal,
-  }
-};

platform/i18n/src/locales/de/AboutModal.json

@@ -0,0 +1,14 @@
+{
+  "Browser": "Browser",
+  "Build Number": "Build Number",
+  "Latest Master Commits": "Letzter Master Commit",
+  "More details": "Mehr Details",
+  "Name": "Name",
+  "OHIF Viewer - About": "OHIF Viewer",
+  "OS": "OS",
+  "Report an issue": "Problem melden",
+  "Repository URL": "Repository URL",
+  "Value": "Wert",
+  "Version Information": "Versionsinformation",
+  "Visit the forum": "Das Forum besuchen"
+}

platform/i18n/src/locales/de/Buttons.json

@@ -0,0 +1,43 @@
+{
+  "Acquired": "Akquiriert",
+  "Angle": "Winkel",
+  "Axial": "Axial",
+  "Bidirectional": "Bidirektional",
+  "Brush": "Pinsel",
+  "CINE": "CINE",
+  "Cancel": "Abbruch",
+  "Circle": "Kreis",
+  "Clear": "Entfernen",
+  "Coronal": "Coronal",
+  "Crosshairs": "Kreuzlinien",
+  "Download": "Herunterladen",
+  "Ellipse": "Ellipse",
+  "Elliptical": "Elliptisch",
+  "Flip H": "Spiegeln H",
+  "Flip V": "Spiegeln V",
+  "Freehand": "Freihand",
+  "Invert": "Invertieren",
+  "Layout": "$t(Common:Layout)",
+  "Length": "Länge",
+  "Levels": "Levels",
+  "Magnify": "Vergrössern",
+  "Manual": "Manuell",
+  "Measurements": "Messungen",
+  "More": "$t(Common:More)",
+  "Next": "$t(Common:Next)",
+  "Pan": "Verschieben",
+  "Play": "$t(Common:Play)",
+  "Previous": "$t(Common:Previous)",
+  "Probe": "Messung",
+  "ROI Window": "ROI Fenster",
+  "Rectangle": "Rechteck",
+  "Reset": "$t(Common:Reset)",
+  "Reset to Defaults": "Standardwerte",
+  "Rotate Right": "Rechts drehen",
+  "Sagittal": "Sagittal",
+  "Save": "Speichern",
+  "Stack Scroll": "Stapel",
+  "Stop": "$t(Common:Stop)",
+  "Themes": "Themes",
+  "Zoom": "Zoom"
+}

platform/i18n/src/locales/de/CineDialog.json

@@ -0,0 +1,8 @@
+{
+  "Next image": "$t(Common:Next) $t(Common:Image)",
+  "Play / Stop": "$t(Common:Play) / $t(Common:Stop)",
+  "Previous image": "$t(Common:Previous) $t(Common:Image)",
+  "Skip to first image": "Zum ersten $t(Common:Image)",
+  "Skip to last image": "Zum letzten $t(Common:Image)",
+  "fps": "fps"
+}

platform/i18n/src/locales/de/Common.json

@@ -0,0 +1,16 @@
+{
+  "Close": "Schliessen",
+  "Image": "Bild",
+  "Layout": "Layout",
+  "Measurements": "Messungen",
+  "More": "Mehr",
+  "Next": "Nächstes",
+  "Play": "Abspielen",
+  "Previous": "Zurück",
+  "Reset": "Zurücksetzen",
+  "RowsPerPage": "Zeilen pro Seite",
+  "Series": "Serie",
+  "Show": "Zeigen",
+  "Stop": "Stopp",
+  "StudyDate": "Studien Datum"
+}

platform/i18n/src/locales/de/DatePicker.json

@@ -0,0 +1,5 @@
+{
+  "Clear dates": "Zeiträume löschen",
+  "End Date": "Bis",
+  "Start Date": "Ab"
+}

platform/i18n/src/locales/de/Header.json

@@ -0,0 +1,8 @@
+{
+  "About": "Über",
+  "Back to Viewer": "Zurück zum Viewer",
+  "INVESTIGATIONAL USE ONLY": "NICHT ZUR BEFUNDUNG FREIGEGEBEN",
+  "Options": "Optionen",
+  "Preferences": "Einstellungen",
+  "Study list": "Studienliste"
+}

platform/i18n/src/locales/de/MeasurementTable.json

@@ -0,0 +1,9 @@
+{
+  "Criteria nonconformities": "Kriterien für Nichtkonformität",
+  "Delete": "Löschen",
+  "Description": "Beschreibung",
+  "MAX": "MAX",
+  "NonTargets": "NichtZiele",
+  "Relabel": "Umbenennen",
+  "Targets": "Ziele"
+}

platform/i18n/src/locales/de/StudyList.json

@@ -0,0 +1,10 @@
+{
+  "AccessionNumber": "Accession #",
+  "Empty": "Leer",
+  "MRN": "MRN",
+  "Modality": "Modalität",
+  "PatientName": "Patientenname",
+  "StudyDate": "Studiendatum",
+  "StudyDescription": "Beschreibung",
+  "StudyList": "Studienliste"
+}

platform/i18n/src/locales/de/UserPreferencesModal.json

@@ -0,0 +1,9 @@
+{
+  "Cancel": "$t(Buttons:Cancel)",
+  "No hotkeys found": "Keine Tastaturkürzel konfiguriert. Tastaturkürzel können in der app-config.js Datei der Anwendung konfiguriert werden.",
+  "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "ResetDefaultMessage": "Einstellungen erfolgreich zurückgesetzt. <br /> Sie müssen <strong>Speichern</strong> um dieses abzuschliessen.",
+  "Save": "$t(Buttons:Save)",
+  "SaveMessage": "Einstellungen gesichert",
+  "User Preferences": "Benutzereinstellungen"
+}

platform/i18n/src/locales/de/ViewportDownloadForm.json

@@ -0,0 +1,14 @@
+{
+  "emptyFilenameError": "Dateiname kann nicht leer sein.",
+  "fileType": "Dateityp",
+  "filename": "Dateiname",
+  "formTitle": "Bitte geben Sie die Dimensionen, Dateiname und den gewünschten Dateityp an.",
+  "imageHeight": "Bildhöhe (px)",
+  "imagePreview": "Bild Vorschau",
+  "imageWidth": "Bildbreite (px)",
+  "keepAspectRatio": "Seitenverhältnis erbehalten",
+  "loadingPreview": "Bildvorschau laden...",
+  "minHeightError": "Die minimale Höhe beträgt 100 Pixel.",
+  "minWidthError": "Die minimale Breiete beträgt 100 Pixel.",
+  "showAnnotations": "Annotationen anzeigen"
+}

platform/i18n/src/locales/de/index.js

@@ -0,0 +1,25 @@
+import AboutModal from './AboutModal.json';
+import Buttons from './Buttons.json';
+import CineDialog from './CineDialog.json';
+import Common from './Common.json';
+import DatePicker from './DatePicker.json';
+import Header from './Header.json';
+import MeasurementTable from './MeasurementTable.json';
+import StudyList from './StudyList.json';
+import UserPreferencesModal from './UserPreferencesModal.json';
+import ViewportDownloadForm from './ViewportDownloadForm.json';
+
+export default { 
+  'de': {
+    AboutModal,
+    Buttons,
+    CineDialog,
+    Common,
+    DatePicker,
+    Header,
+    MeasurementTable,
+    StudyList,
+    UserPreferencesModal,
+    ViewportDownloadForm,
+  }
+};

platform/i18n/src/locales/es/AboutModal.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/es/DatePicker.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/es/ViewportDownloadForm.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/es/index.js

@@ -1,19 +1,25 @@
+import AboutModal from './AboutModal.json';
 import Buttons from './Buttons.json';
 import CineDialog from './CineDialog.json';
 import Common from './Common.json';
+import DatePicker from './DatePicker.json';
 import Header from './Header.json';
 import MeasurementTable from './MeasurementTable.json';
 import StudyList from './StudyList.json';
 import UserPreferencesModal from './UserPreferencesModal.json';
+import ViewportDownloadForm from './ViewportDownloadForm.json';
 
 export default { 
   'es': {
+    AboutModal,
     Buttons,
     CineDialog,
     Common,
+    DatePicker,
     Header,
     MeasurementTable,
     StudyList,
     UserPreferencesModal,
+    ViewportDownloadForm,
   }
 };

platform/i18n/src/locales/fr/AboutModal.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/fr/DatePicker.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/fr/MeasurementTable.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/fr/StudyList.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/fr/ViewportDownloadForm.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/fr/index.js

@@ -1,15 +1,25 @@
+import AboutModal from './AboutModal.json';
 import Buttons from './Buttons.json';
 import CineDialog from './CineDialog.json';
 import Common from './Common.json';
+import DatePicker from './DatePicker.json';
 import Header from './Header.json';
+import MeasurementTable from './MeasurementTable.json';
+import StudyList from './StudyList.json';
 import UserPreferencesModal from './UserPreferencesModal.json';
+import ViewportDownloadForm from './ViewportDownloadForm.json';
 
 export default { 
   'fr': {
+    AboutModal,
     Buttons,
     CineDialog,
     Common,
+    DatePicker,
     Header,
+    MeasurementTable,
+    StudyList,
     UserPreferencesModal,
+    ViewportDownloadForm,
   }
 };

platform/i18n/src/locales/index.js

@@ -1,21 +1,23 @@
-import ar from './ar/';
+import de from './de/';
 import en_US from './en-US/';
 import es from './es/';
 import fr from './fr/';
 import ja_JP from './ja-JP/';
 import nl from './nl/';
 import pt_BR from './pt-BR/';
+import ru from './ru/';
 import vi from './vi/';
 import zh from './zh/';
 
 export default {
-  ...ar,
+  ...de,
   ...en_US,
   ...es,
   ...fr,
   ...ja_JP,
   ...nl,
   ...pt_BR,
+  ...ru,
   ...vi,
   ...zh,
 };

platform/i18n/src/locales/ja-JP/AboutModal.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/ja-JP/DatePicker.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/ja-JP/MeasurementTable.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/ja-JP/StudyList.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/ja-JP/ViewportDownloadForm.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/ja-JP/index.js

@@ -1,15 +1,25 @@
+import AboutModal from './AboutModal.json';
 import Buttons from './Buttons.json';
 import CineDialog from './CineDialog.json';
 import Common from './Common.json';
+import DatePicker from './DatePicker.json';
 import Header from './Header.json';
+import MeasurementTable from './MeasurementTable.json';
+import StudyList from './StudyList.json';
 import UserPreferencesModal from './UserPreferencesModal.json';
+import ViewportDownloadForm from './ViewportDownloadForm.json';
 
 export default { 
   'ja-JP': {
+    AboutModal,
     Buttons,
     CineDialog,
     Common,
+    DatePicker,
     Header,
+    MeasurementTable,
+    StudyList,
     UserPreferencesModal,
+    ViewportDownloadForm,
   }
 };

platform/i18n/src/locales/nl/AboutModal.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/nl/CineDialog.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/nl/DatePicker.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/nl/MeasurementTable.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/nl/StudyList.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/nl/UserPreferencesModal.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/nl/ViewportDownloadForm.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/nl/index.js

@@ -1,11 +1,25 @@
+import AboutModal from './AboutModal.json';
 import Buttons from './Buttons.json';
+import CineDialog from './CineDialog.json';
 import Common from './Common.json';
+import DatePicker from './DatePicker.json';
 import Header from './Header.json';
+import MeasurementTable from './MeasurementTable.json';
+import StudyList from './StudyList.json';
+import UserPreferencesModal from './UserPreferencesModal.json';
+import ViewportDownloadForm from './ViewportDownloadForm.json';
 
 export default { 
   'nl': {
+    AboutModal,
     Buttons,
+    CineDialog,
     Common,
+    DatePicker,
     Header,
+    MeasurementTable,
+    StudyList,
+    UserPreferencesModal,
+    ViewportDownloadForm,
   }
 };

platform/i18n/src/locales/pt-BR/MeasurementTable.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/pt-BR/StudyList.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/pt-BR/ViewportDownloadForm.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/pt-BR/index.js

@@ -4,7 +4,10 @@ import CineDialog from './CineDialog.json';
 import Common from './Common.json';
 import DatePicker from './DatePicker.json';
 import Header from './Header.json';
+import MeasurementTable from './MeasurementTable.json';
+import StudyList from './StudyList.json';
 import UserPreferencesModal from './UserPreferencesModal.json';
+import ViewportDownloadForm from './ViewportDownloadForm.json';
 
 export default { 
   'pt-BR': {
@@ -14,6 +17,9 @@ export default {
     Common,
     DatePicker,
     Header,
+    MeasurementTable,
+    StudyList,
     UserPreferencesModal,
+    ViewportDownloadForm,
   }
 };

platform/i18n/src/locales/ru/AboutModal.json

@@ -0,0 +1,14 @@
+{
+  "Browser": "Браузер",
+  "Build Number": "Номер сборки",
+  "Latest Master Commits": "Последние коммиты в мастер",
+  "More details": "Больше подробностей",
+  "Name": "Имя",
+  "OHIF Viewer - About": "OHIF Viewer - помощь",
+  "OS": "ОС",
+  "Report an issue": "Сообщить о проблеме",
+  "Repository URL": "Ссылка репозитория",
+  "Value": "Значение",
+  "Version Information": "Информация о версии",
+  "Visit the forum": "Посетить форум"
+}

platform/i18n/src/locales/ru/Buttons.json

@@ -0,0 +1,44 @@
+{
+  "Acquired": "Полученные",
+  "Angle": "Угол",
+  "Annotate": "Примечание",
+  "Axial": "По оси",
+  "Bidirectional": "Двунаправленная",
+  "Brush": "Кисть",
+  "CINE": "Видео",
+  "Cancel": "Отменить",
+  "Circle": "Круг",
+  "Clear": "Очистить",
+  "Coronal": "Корональный",
+  "Crosshairs": "Перекрестие",
+  "Download": "Скачать",
+  "Ellipse": "Эллипс",
+  "Elliptical": "Эллиптический",
+  "Flip H": "Перевернуть ↔",
+  "Flip V": "Перевернуть ↕",
+  "Freehand": "От руки",
+  "Invert": "Инвертировать",
+  "Layout": "$t(Common:Layout)",
+  "Length": "Длина",
+  "Levels": "Уровни",
+  "Magnify": "Увеличить",
+  "Manual": "Ручной",
+  "Measurements": "Измерения",
+  "More": "$t(Common:More)",
+  "Next": "$t(Common:Next)",
+  "Pan": "Переместить",
+  "Play": "$t(Common:Play)",
+  "Previous": "$t(Common:Previous)",
+  "Probe": "Проба",
+  "ROI Window": "Главная область",
+  "Rectangle": "Прямоугольник",
+  "Reset": "$t(Common:Reset)",
+  "Reset to Defaults": "$t(Common:Reset) к настройкам по-умолчанию",
+  "Rotate Right": "Повернуть вправо",
+  "Sagittal": "Сагиттальный",
+  "Save": "Сохранить",
+  "Stack Scroll": "Прокрутка серии",
+  "Stop": "$t(Common:Stop)",
+  "Themes": "Темы",
+  "Zoom": "Лупа"
+}

platform/i18n/src/locales/ru/CineDialog.json

@@ -0,0 +1,8 @@
+{
+  "Next image": "$t(Common:Next) $t(Common:Image)",
+  "Play / Stop": "$t(Common:Play) / $t(Common:Stop)",
+  "Previous image": "$t(Common:Previous) $t(Common:Image)",
+  "Skip to first image": "Пропустить к первому $t(Common:Image)",
+  "Skip to last image": "Пропустить к последнему $t(Common:Image)",
+  "fps": "fps"
+}

platform/i18n/src/locales/ru/Common.json

@@ -0,0 +1,20 @@
+{
+  "Close": "Закрыть",
+  "Image": "Изображение",
+  "Last 30 days": "30 дней",
+  "Last 7 days": "7 дней",
+  "Layout": "Разбивка",
+  "Measurements": "Измерения",
+  "More": "Больше",
+  "Next": "Следующая",
+  "Play": "Проиграть",
+  "Previous": "Предыдущая",
+  "Reset": "Сбросить",
+  "RowsPerPage": "строк на странице",
+  "Series": "Серия",
+  "Show": "Показать",
+  "Stop": "Остановить",
+  "StudyDate": "Дата исследования",
+  "StudyList": "Список исследований",
+  "Today": "Сегодня"
+}

platform/i18n/src/locales/ru/DatePicker.json

@@ -0,0 +1,5 @@
+{
+  "Clear dates": "Очистить даты",
+  "End Date": "Дата конца",
+  "Start Date": "Дата начала"
+}

platform/i18n/src/locales/ru/Header.json

@@ -0,0 +1,8 @@
+{
+  "About": "Справка",
+  "Back to Viewer": "Назад к Просмотрщику",
+  "INVESTIGATIONAL USE ONLY": "ТОЛЬКО ДЛЯ ИССЛЕДОВАНИЙ",
+  "Options": "Опции",
+  "Preferences": "Настройки",
+  "Study List": "Список исследований"
+}

platform/i18n/src/locales/ru/MeasurementTable.json

@@ -0,0 +1,11 @@
+{
+  "Criteria nonconformities": "Критерии несоответствия",
+  "Delete": "Удалить",
+  "Description": "Описание",
+  "MAX": "МАКС",
+  "Measurements": "Измерения",
+  "NonTargets": "Нецелевые",
+  "Relabel": "Переназначить",
+  "StudyDate": "Дата исследования",
+  "Targets": "Цели"
+}

platform/i18n/src/locales/ru/StudyList.json

@@ -0,0 +1,10 @@
+{
+  "AccessionNumber": "Номер доступа",
+  "Description": "Описание",
+  "Empty": "Пусто",
+  "MRN": "MRN",
+  "Modality": "Модальность",
+  "PatientName": "Имя пациента",
+  "StudyDate": "Дата исследования",
+  "StudyDescription": "Описание"
+}

platform/i18n/src/locales/ru/UserPreferencesModal.json

@@ -0,0 +1,9 @@
+{
+  "Cancel": "$t(Buttons:Cancel)",
+  "No hotkeys found": "Не найдено горячих клавиш",
+  "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "ResetDefaultMessage": "Настройки успешно сброшены. <br /> Вы должны <strong>Сохранить</strong> это действие нажав на кнопку.",
+  "Save": "$t(Buttons:Save)",
+  "SaveMessage": "Настройки сохранены",
+  "User Preferences": "Пользовательские настройки"
+}

platform/i18n/src/locales/ru/ViewportDownloadForm.json

@@ -0,0 +1,14 @@
+{
+  "emptyFilenameError": "Имя файла не может быть пустым.",
+  "fileType": "Тип файла",
+  "filename": "Имя файла",
+  "formTitle": "Пожалуйста, укажите разрешение, имя файла и желаемый тип изображения.",
+  "imageHeight": "Высота картинки (px)",
+  "imagePreview": "Предпросмотр",
+  "imageWidth": "Ширина картинки (px)",
+  "keepAspectRatio": "Сохранить соотношение сторон",
+  "loadingPreview": "Загружаю предпросмотр картинки...",
+  "minHeightError": "Минимальная высота - 100px.",
+  "minWidthError": "Минимальная ширина - 100px.",
+  "showAnnotations": "Показать аннотации"
+}

platform/i18n/src/locales/ru/index.js

@@ -0,0 +1,25 @@
+import AboutModal from './AboutModal.json';
+import Buttons from './Buttons.json';
+import CineDialog from './CineDialog.json';
+import Common from './Common.json';
+import DatePicker from './DatePicker.json';
+import Header from './Header.json';
+import MeasurementTable from './MeasurementTable.json';
+import StudyList from './StudyList.json';
+import UserPreferencesModal from './UserPreferencesModal.json';
+import ViewportDownloadForm from './ViewportDownloadForm.json';
+
+export default { 
+  'ru': {
+    AboutModal,
+    Buttons,
+    CineDialog,
+    Common,
+    DatePicker,
+    Header,
+    MeasurementTable,
+    StudyList,
+    UserPreferencesModal,
+    ViewportDownloadForm,
+  }
+};

platform/i18n/src/locales/vi/AboutModal.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/vi/DatePicker.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/vi/MeasurementTable.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/vi/ViewportDownloadForm.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/vi/index.js

@@ -1,17 +1,25 @@
+import AboutModal from './AboutModal.json';
 import Buttons from './Buttons.json';
 import CineDialog from './CineDialog.json';
 import Common from './Common.json';
+import DatePicker from './DatePicker.json';
 import Header from './Header.json';
+import MeasurementTable from './MeasurementTable.json';
 import StudyList from './StudyList.json';
 import UserPreferencesModal from './UserPreferencesModal.json';
+import ViewportDownloadForm from './ViewportDownloadForm.json';
 
 export default { 
   'vi': {
+    AboutModal,
     Buttons,
     CineDialog,
     Common,
+    DatePicker,
     Header,
+    MeasurementTable,
     StudyList,
     UserPreferencesModal,
+    ViewportDownloadForm,
   }
 };

platform/i18n/src/locales/zh/AboutModal.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/zh/DatePicker.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/zh/ViewportDownloadForm.json

@@ -0,0 +1 @@
+{}

platform/i18n/src/locales/zh/index.js

@@ -1,19 +1,25 @@
+import AboutModal from './AboutModal.json';
 import Buttons from './Buttons.json';
 import CineDialog from './CineDialog.json';
 import Common from './Common.json';
+import DatePicker from './DatePicker.json';
 import Header from './Header.json';
 import MeasurementTable from './MeasurementTable.json';
 import StudyList from './StudyList.json';
 import UserPreferencesModal from './UserPreferencesModal.json';
+import ViewportDownloadForm from './ViewportDownloadForm.json';
 
 export default { 
   'zh': {
+    AboutModal,
     Buttons,
     CineDialog,
     Common,
+    DatePicker,
     Header,
     MeasurementTable,
     StudyList,
     UserPreferencesModal,
+    ViewportDownloadForm,
   }
 };

platform/i18n/syncTranslations.sh

@@ -0,0 +1,4 @@
+cd src/locales/
+npx locize --config-path ../../.locize sync --ver latest --update-values true --reference-language-only false
+cd ../../
+node ./writeLocaleIndexFiles.js

platform/ui/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.7.0...@ohif/ui@1.7.1) (2020-12-03)
+
+
+### Bug Fixes
+
+* fallback to original dataset VR for XS ([f57725a](https://github.com/OHIF/Viewers/commit/f57725ac8bfd59ea46ab334a1823882afadefba1))
+
+
+
+
+
+# [1.7.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.6.0...@ohif/ui@1.7.0) (2020-12-03)
+
+
+### Features
+
+* add show scroll option to modal ([be494a7](https://github.com/OHIF/Viewers/commit/be494a7376d15777dbe598289c4ecdb9f48a6a48))
+
+
+
+
+
+# [1.6.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.5.7...@ohif/ui@1.6.0) (2020-12-03)
+
+
+### Features
+
+* Add error boundary and retry logic for network failures during dynamic imports ([#2145](https://github.com/OHIF/Viewers/issues/2145)) ([4c07904](https://github.com/OHIF/Viewers/commit/4c079044f6ae2381c6054d8d77414100152d1d19))
+
+
+
+
+
+## [1.5.7](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.5.6...@ohif/ui@1.5.7) (2020-11-02)
+
+
+### Bug Fixes
+
+* Reordered definitions in providers to prevent uninitialized var access ([#2108](https://github.com/OHIF/Viewers/issues/2108)) ([619f361](https://github.com/OHIF/Viewers/commit/619f3615109d6cc4c69ff2f9fedbf83bd9309719))
+
+
+
+
+
 ## [1.5.6](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.5.5...@ohif/ui@1.5.6) (2020-10-06)
 
 **Note:** Version bump only for package @ohif/ui

platform/ui/package.json

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

platform/ui/src/components/errorBoundary/ErrorBoundary.js

@@ -15,8 +15,8 @@ const ErrorFallback = ({ error, componentStack, resetErrorBoundary }) => {
 
 const OHIFErrorBoundary = ({
   context = 'OHIF',
-  onReset = () => {},
-  onError = () => {},
+  onReset = () => { },
+  onError = () => { },
   fallbackComponent,
   children,
 }) => {
@@ -45,7 +45,7 @@ OHIFErrorBoundary.propTypes = {
   onReset: PropTypes.func,
   onError: PropTypes.func,
   children: PropTypes.node.isRequired,
-  fallbackComponent: PropTypes.element,
+  fallbackComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element]),
 };
 
 export default OHIFErrorBoundary;

platform/ui/src/components/errorPage/ErrorPage.css

@@ -0,0 +1,24 @@
+.ErrorPage {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: var(--active-color);
+}
+
+.ErrorPage .error-container {
+  margin: 10px;
+  width: 50%;
+  height: 25%;
+  overflow: scroll;
+  border-radius: 15px;
+  border-color: var(--active-color);
+  border: 1px solid;
+  padding: 5px;
+}
+
+.ErrorPage .retry-icon {
+  cursor: pointer;
+}

platform/ui/src/components/errorPage/ErrorPage.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '@ohif/ui';
+
+import './ErrorPage.css';
+
+const ErrorPage = ({ error, title, description, onRetry }) => {
+  return (
+    <div className="ErrorPage">
+      {title && <h3>{title}</h3>}
+      <p>{description}</p>
+      <Icon
+        className="retry-icon"
+        name="rotate-right"
+        width="25px"
+        height="25px"
+        onClick={onRetry}
+      />
+      {error && (
+        <div className="error-container">
+          <pre>{error.message}</pre>
+          <pre>{error.stack}</pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+ErrorPage.propTypes = {
+  error: PropTypes.object,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  onRetry: PropTypes.func
+};
+
+ErrorPage.defaultProps = {
+  description: 'Oh snap, something went wrong, please try reloading',
+  onRetry: () => window.location.reload()
+};
+
+export default ErrorPage;

platform/ui/src/components/errorPage/index.js

@@ -0,0 +1,2 @@
+import ErrorPage from './ErrorPage';
+export default ErrorPage;

platform/ui/src/components/index.js

@@ -16,6 +16,7 @@ import { SelectTree } from './selectTree';
 import { SimpleDialog } from './simpleDialog';
 import { OHIFModal } from './ohifModal';
 import { ContextMenu } from './contextMenu';
+import ErrorPage from './errorPage';
 import {
   PageToolbar,
   StudyList,
@@ -58,4 +59,5 @@ export {
   Tooltip,
   AboutContent,
   OHIFModal,
+  ErrorPage
 };

platform/ui/src/components/ohifModal/OHIFModal.styl

@@ -27,13 +27,13 @@
     &.OHIFModal-fullscreen
       width: 95%
 
-
-
   &__content
     padding: 20px
     max-height: 90vh;
-    overflow-x: hidden;
     overflow-y: auto;
+
+  &:not(.visibleScrollbar) &__content
+    overflow-x: hidden;
     scrollbar-width: none;
     -ms-overflow-style: none;
     &::-webkit-scrollbar

platform/ui/src/contextProviders/DialogProvider.js

@@ -45,36 +45,6 @@ const DialogProvider = ({ children, service }) => {
     };
   };
 
-  /**
-   * Sets the implementation of a dialog service that can be used by extensions.
-   *
-   * @returns void
-   */
-  useEffect(() => {
-    if (service) {
-      service.setServiceImplementation({ create, dismiss, dismissAll });
-    }
-  }, [create, dismiss, service]);
-
-  /**
-   * UI Dialog
-   *
-   * @typedef {Object} DialogProps
-   * @property {string} id The dialog id.
-   * @property {DialogContent} content The dialog content.
-   * @property {Object} contentProps The dialog content props.
-   * @property {boolean} isDraggable Controls if dialog content is draggable or not.
-   * @property {boolean} showOverlay Controls dialog overlay.
-   * @property {boolean} centralize Center the dialog on the screen.
-   * @property {boolean} preservePosition Use last position instead of default.
-   * @property {ElementPosition} defaultPosition Specifies the `x` and `y` that the dragged item should start at.
-   * @property {Function} onStart Called when dragging starts. If `false` is returned any handler, the action will cancel.
-   * @property {Function} onStop Called when dragging stops.
-   * @property {Function} onDrag Called while dragging.
-   */
-
-  useEffect(() => _bringToFront(lastDialogId), [_bringToFront, lastDialogId]);
-
   /**
    * Creates a new dialog and return its id.
    *
@@ -109,20 +79,15 @@ const DialogProvider = ({ children, service }) => {
   );
 
   /**
-   * Dismisses all dialogs.
+   * Sets the implementation of a dialog service that can be used by extensions.
    *
    * @returns void
    */
-  const dismissAll = () => {
-    setDialogs([]);
-  };
-
-  /**
-   * Indicate if there are no dialogs present.
-   *
-   * @returns True if no dialogs are present.
-   */
-  const isEmpty = () => dialogs && dialogs.length < 1;
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({ create, dismiss, dismissAll });
+    }
+  }, [create, dismiss, service]);
 
   /**
    * Moves the dialog to the foreground if clicked.
@@ -139,6 +104,41 @@ const DialogProvider = ({ children, service }) => {
     });
   }, []);
 
+  /**
+   * UI Dialog
+   *
+   * @typedef {Object} DialogProps
+   * @property {string} id The dialog id.
+   * @property {DialogContent} content The dialog content.
+   * @property {Object} contentProps The dialog content props.
+   * @property {boolean} isDraggable Controls if dialog content is draggable or not.
+   * @property {boolean} showOverlay Controls dialog overlay.
+   * @property {boolean} centralize Center the dialog on the screen.
+   * @property {boolean} preservePosition Use last position instead of default.
+   * @property {ElementPosition} defaultPosition Specifies the `x` and `y` that the dragged item should start at.
+   * @property {Function} onStart Called when dragging starts. If `false` is returned any handler, the action will cancel.
+   * @property {Function} onStop Called when dragging stops.
+   * @property {Function} onDrag Called while dragging.
+   */
+
+  useEffect(() => _bringToFront(lastDialogId), [_bringToFront, lastDialogId]);
+
+  /**
+   * Dismisses all dialogs.
+   *
+   * @returns void
+   */
+  const dismissAll = () => {
+    setDialogs([]);
+  };
+
+  /**
+   * Indicate if there are no dialogs present.
+   *
+   * @returns True if no dialogs are present.
+   */
+  const isEmpty = () => dialogs && dialogs.length < 1;
+
   const renderDialogs = () =>
     dialogs.map(dialog => {
       const {
@@ -219,14 +219,12 @@ const DialogProvider = ({ children, service }) => {
         </Draggable>
       );
 
-      return (
-        showOverlay ? (
-          <div className="Overlay" key={id}>
-            {dragableItem()}
-          </div>
-        ) : (
-            dragableItem()
-          )
+      return showOverlay ? (
+        <div className="Overlay" key={id}>
+          {dragableItem()}
+        </div>
+      ) : (
+        dragableItem()
       );
     });
 
@@ -249,11 +247,7 @@ const DialogProvider = ({ children, service }) => {
 
   return (
     <DialogContext.Provider value={{ create, dismiss, dismissAll, isEmpty }}>
-      {!isEmpty() &&
-        <div className="DraggableArea">
-          {renderDialogs()}
-        </div>
-      }
+      {!isEmpty() && <div className="DraggableArea">{renderDialogs()}</div>}
       {children}
     </DialogContext.Provider>
   );

platform/ui/src/contextProviders/ModalProvider.js

@@ -34,6 +34,7 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
     isOpen: true,
     onClose: null,
     closeButton: true,
+    showScrollbar: false,
     title: null,
     customClassName: '',
     fullscreen: false,
@@ -41,17 +42,6 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
 
   const [options, setOptions] = useState(DEFAULT_OPTIONS);
 
-  /**
-   * Sets the implementation of a modal service that can be used by extensions.
-   *
-   * @returns void
-   */
-  useEffect(() => {
-    if (service) {
-      service.setServiceImplementation({ hide, show });
-    }
-  }, [hide, service, show]);
-
   /**
    * Show the modal and override its configuration props.
    *
@@ -71,6 +61,17 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
     DEFAULT_OPTIONS,
   ]);
 
+  /**
+   * Sets the implementation of a modal service that can be used by extensions.
+   *
+   * @returns void
+   */
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({ hide, show });
+    }
+  }, [hide, service, show]);
+
   const {
     content: ModalContent,
     contentProps,
@@ -81,13 +82,14 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
     shouldCloseOnEsc,
     fullscreen,
     closeButton,
+    showScrollbar
   } = options;
 
   return (
     <Provider value={{ show, hide }}>
       {ModalContent && (
         <Modal
-          className={classNames(customClassName, ModalContent.className)}
+          className={classNames(customClassName, ModalContent.className, { 'visibleScrollbar': showScrollbar })}
           shouldCloseOnEsc={shouldCloseOnEsc}
           isOpen={isOpen}
           title={title}

platform/ui/src/contextProviders/SnackbarProvider.js

@@ -27,17 +27,6 @@ const SnackbarProvider = ({ children, service }) => {
   const [count, setCount] = useState(1);
   const [snackbarItems, setSnackbarItems] = useState([]);
 
-  /**
-   * Sets the implementation of a notification service that can be used by extensions.
-   *
-   * @returns void
-   */
-  useEffect(() => {
-    if (service) {
-      service.setServiceImplementation({ hide, show });
-    }
-  }, [service, hide, show]);
-
   const show = useCallback(
     options => {
       if (!options || (!options.title && !options.message)) {
@@ -92,6 +81,17 @@ const SnackbarProvider = ({ children, service }) => {
     setSnackbarItems(() => []);
   };
 
+  /**
+   * Sets the implementation of a notification service that can be used by extensions.
+   *
+   * @returns void
+   */
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({ hide, show });
+    }
+  }, [service, hide, show]);
+
   /**
    * expose snackbar methods to window for debug purposes
    * TODO: Check if it's really necessary

platform/ui/src/index.js

@@ -29,7 +29,8 @@ import {
   Tooltip,
   AboutContent,
   OHIFModal,
-  ErrorBoundary
+  ErrorBoundary,
+  ErrorPage
 } from './components';
 import { useDebounce, useMedia } from './hooks';
 
@@ -53,6 +54,7 @@ import { ScrollableArea } from './ScrollableArea/ScrollableArea.js';
 import Toolbar from './viewer/Toolbar.js';
 import ToolbarButton from './viewer/ToolbarButton.js';
 import ViewerbaseDragDropContext from './utils/viewerbaseDragDropContext.js';
+import { asyncComponent, retryImport } from './utils/asyncComponent';
 import {
   SnackbarProvider,
   useSnackbarContext,
@@ -112,7 +114,6 @@ export {
   ToolbarSection,
   Tooltip,
   AboutContent,
-  ViewerbaseDragDropContext,
   SnackbarProvider,
   useSnackbarContext,
   withSnackbar,
@@ -125,7 +126,12 @@ export {
   withDialog,
   useDialog,
   ErrorBoundary,
+  ErrorPage,
   // Hooks
   useDebounce,
   useMedia,
+  // Utils
+  ViewerbaseDragDropContext,
+  asyncComponent,
+  retryImport
 };

platform/ui/src/utils/asyncComponent/asyncComponent.js

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import { ErrorPage } from '@ohif/ui';
+
+export const retryImport = (fn, retriesLeft = 5, interval = 1000) =>
+  new Promise((resolve, reject) => {
+    fn().then(resolve).catch((error) => {
+      setTimeout(() => {
+        if (retriesLeft === 1) {
+          /* reject('maximum retries exceeded'); */
+          reject(error);
+          return;
+        }
+
+        /* Passing on "reject" is the important part */
+        retry(fn, retriesLeft - 1, interval).then(resolve, reject);
+      }, interval);
+    });
+  });
+
+const onError = (error, setState) => setState({ component: ErrorPage });
+
+/**
+ * We use this function to lazy load the import of a component to leverage 'Code Splitting'
+ * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
+ */
+const asyncComponent = (importComponent, options = { onError }) => props => {
+  const [state, setState] = useState({ component: null });
+
+  const isFunction = item => typeof item === 'function';
+  const isChunkError = error => error.toString().indexOf('ChunkLoadError') > -1;
+
+  useEffect(() => {
+    const addDynamicallyLoadedComponentToState = async () => {
+      try {
+        const { default: component } = await importComponent();
+        setState({ component });
+        if (options.onLoaded && isFunction(options.onLoaded)) {
+          options.onLoaded(component);
+        }
+      } catch (error) {
+        console.error('[AsyncComponent] Failed to import chunk:', error);
+
+        if (options.onError && isFunction(options.onError)) {
+          options.onError(error, setState);
+          return;
+        }
+
+        if (isChunkError(error)) {
+          console.error('[AsyncComponent] Reloading due to chunk error');
+          window.location.reload();
+        }
+      }
+    };
+
+    addDynamicallyLoadedComponentToState();
+  }, []);
+
+  const Component = state.component;
+  return Component ? <Component {...props} /> : null;
+};
+
+export default asyncComponent;

platform/ui/src/utils/asyncComponent/index.js

@@ -0,0 +1,2 @@
+export { default as asyncComponent } from './asyncComponent';
+export { retryImport } from './asyncComponent';