chore(release): publish [skip ci]

- @ohif/extension-vtk@0.52.6
 - @ohif/core@1.3.0
 - @ohif/viewer@1.6.0

.circleci/config.yml

@@ -143,19 +143,19 @@ jobs:
       - attach_workspace:
           at: ~/repo
       - setup_remote_docker:
-          docker_layer_caching: true
+         docker_layer_caching: false
       - run:
           name: Build and push Docker image
           command: |
             # This file will exist if a new version was published by
             # our `semantic-release` command in the previous job
-            if [[ ! -e tmp/updated-version.txt ]]; then
+            if [[ ! -e platform/viewer/success_version.txt ]]; then
               exit 0
             else
               # Remove npm config
               rm -f ./.npmrc
               # Set our version number using vars
-              export IMAGE_VERSION=$(cat tmp/updated-version.txt)
+              export IMAGE_VERSION=$(cat platform/viewer/success_version.txt)
               export IMAGE_VERSION_FULL=v$IMAGE_VERSION.${CIRCLE_BUILD_NUM}
               echo $IMAGE_VERSION
               echo $IMAGE_VERSION_FULL
@@ -175,7 +175,7 @@ jobs:
       - run:
           name: 'Build Demo Site'
           command: yarn run build:demo
-          no_output_timeout: 30m
+          no_output_timeout: 45m
       - run:
           name: 'Upload SourceMaps, Send Deploy Notification'
           command: |
@@ -199,7 +199,7 @@ jobs:
       - attach_workspace:
           at: ~/repo
       - setup_remote_docker:
-          docker_layer_caching: true
+          docker_layer_caching: false
       - run:
           name: Deploy latest version to viewer.ohif.org
           command: |
@@ -234,13 +234,16 @@ workflows:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
                 add wait-on' # Use yarn latest
           yarn: true
-          store_artifacts: true
+          store_artifacts: false
           working_directory: platform/viewer
-          build: yarn run build
+          build: yarn run build:e2e
           start: yarn run test:e2e:dist
           wait-on: 'http://localhost:3000'
           cache-key: 'yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}'
           no-workspace: true # Don't persist workspace
+          post-steps:
+            - store_artifacts:
+                path: platform/viewer/cypress/screenshots
           requires:
             - UNIT_TESTS
       # E2E: script-tag
@@ -250,13 +253,16 @@ workflows:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
                 add wait-on' # Use yarn latest
           yarn: true
-          store_artifacts: true
+          store_artifacts: false
           working_directory: platform/viewer
           build: yarn run build:package
           start: yarn run test:e2e:dist
           wait-on: 'http://localhost:3000'
           cache-key: 'yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}'
           no-workspace: true # Don't persist workspace
+          post-steps:
+            - store_artifacts:
+                path: platform/viewer/cypress/screenshots
           requires:
             - UNIT_TESTS
 
@@ -280,12 +286,14 @@ workflows:
           record: true
           store_artifacts: true
           working_directory: platform/viewer
-          build: yarn run build
+          build: yarn run build:e2e
           start: yarn run test:e2e:dist
           wait-on: 'http://localhost:3000'
           cache-key: 'yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}'
           no-workspace: true # Don't persist workspace
           post-steps:
+            - store_artifacts:
+                path: platform/viewer/cypress/screenshots
             - store_test_results:
                 path: cypress/results
           requires:
@@ -297,7 +305,7 @@ workflows:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
                 add wait-on' # Use yarn latest
           yarn: true
-          store_artifacts: true
+          store_artifacts: false
           working_directory: platform/viewer
           build: yarn run build:package
           start: yarn run test:e2e:dist
@@ -305,6 +313,8 @@ workflows:
           cache-key: 'yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}'
           no-workspace: true # Don't persist workspace
           post-steps:
+            - store_artifacts:
+                path: platform/viewer/cypress/screenshots
             - store_test_results:
                 path: cypress/results
           requires:
@@ -314,6 +324,7 @@ workflows:
           requires:
             - 'E2E: Script Tag'
             - 'E2E: PWA'
+      # Update docs.ohif.org
       - DOCS_PUBLISH:
           requires:
             - 'E2E: Script Tag'
@@ -322,12 +333,11 @@ workflows:
           requires:
             - 'E2E: Script Tag'
             - 'E2E: PWA'
+      # Update viewer.ohif.org
       - VIEWER_DEMO_PUBLISH:
           requires:
             - VIEWER_DEMO_BUILD
       # Update hub.docker.org
-      # - DOCKER_PUBLISH:
-      #     requires:
-      #       - NPM_PUBLISH
-      # Update viewer.ohif.org
-      # Update docs.ohif.org
+      - DOCKER_PUBLISH:
+          requires:
+            - NPM_PUBLISH

.codecov.yml

@@ -8,11 +8,13 @@ coverage:
   status:
     project:
       default:
-        threshold: 0.10%
+        threshold: 0.5%
       core:
         flags: core
+        threshold: 0.5%
       viewer:
         flags: viewer
+        threshold: 0.5%
     patch: off
 flags:
   core:

.docker/Viewer-v2.x/default.conf

@@ -0,0 +1,12 @@
+server {
+  listen 80;
+  location / {
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    try_files $uri $uri/ /index.html;
+  }
+  error_page   500 502 503 504  /50x.html;
+  location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+}

.docker/Viewer-v2.x/entrypoint.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+# If CLIENT_ID is specified, use the google.js configuration with the modified ID
+if [ ! -z "$CLIENT_ID" ]
+  then
+  	echo "Google Cloud Healthcare $CLIENT_ID has been provided: "
+  	echo $CLIENT_ID
+  	echo "Updating config..."
+
+  	# - Use SED to replace the CLIENT_ID that is currently in google.js
+	sed -i -e "s/YOURCLIENTID.apps.googleusercontent.com/$CLIENT_ID/g" /usr/share/nginx/html/google.js
+
+	# - Copy google.js to overwrite app-config.js
+	cp /usr/share/nginx/html/google.js /usr/share/nginx/html/app-config.js
+fi
+
+echo "Starting Nginx to serve the OHIF Viewer..."
+
+exec "$@"

.dockerignore

@@ -0,0 +1,30 @@
+# Reduces size of context and hides
+# files from Docker (can't COPY or ADD these)
+
+# Output
+dist/
+build/
+
+# Dependencies
+node_modules/
+
+# Root
+README.md
+Dockerfile
+dockerfile
+
+# Misc. Config
+.git
+.DS_Store
+.gitignore
+.vscode
+.circleci
+
+# Unnecessary things to pull into container
+.circleci/
+.github/
+.netlify/
+.scripts/
+.vscode/
+coverage/
+docs/

.github/stale.yml

@@ -7,13 +7,13 @@ daysUntilStale: 21
 daysUntilClose: 7
 # Issues with these labels will never be considered stale
 exemptLabels:
-  - 'Story 🙌'
-  - 'Bug: Verified 🐛'
+  - 'Story :raised_hands:'
+  - 'Bug: Verified :bug:'
   - 'Task: CI/Tooling 🤖'
   - 'Task: Docs 📖'
   - 'Task: Docs :book:'
   - 'Task: Refactor 🛠'
-  - 'Task: Tests 🔬'
+  - 'Task: Tests :microscope:'
   - 'PR: Awaiting Review 👀'
   - 'Triage 🏳️'
   - 'Announcement 🎉'

Dockerfile

@@ -0,0 +1,64 @@
+# This dockerfile is used to publish the `ohif/viewer` image on dockerhub.
+#
+# It's a good example of how to build our static application and package it
+# with a web server capable of hosting it as static content.
+#
+# docker build
+# --------------
+# If you would like to use this dockerfile to build and tag an image, make sure
+# you set the context to the project's root directory:
+# https://docs.docker.com/engine/reference/commandline/build/
+#
+#
+# SUMMARY
+# --------------
+# This dockerfile has two stages:
+#
+# 1. Building the React application for production
+# 2. Setting up our Nginx (Alpine Linux) image w/ step one's output
+#
+
+
+# Stage 1: Build the application
+# docker build -t ohif/viewer:latest .
+FROM node:10.16.3-slim as builder
+
+RUN mkdir /usr/src/app
+WORKDIR /usr/src/app
+
+# Copy Files
+COPY .docker /usr/src/app/.docker
+COPY .webpack /usr/src/app/.webpack
+COPY extensions /usr/src/app/extensions
+COPY platform /usr/src/app/platform
+COPY .browserslistrc /usr/src/app/.browserslistrc
+COPY aliases.config.js /usr/src/app/aliases.config.js
+COPY babel.config.js /usr/src/app/babel.config.js
+COPY lerna.json /usr/src/app/lerna.json
+COPY package.json /usr/src/app/package.json
+COPY postcss.config.js /usr/src/app/postcss.config.js
+COPY yarn.lock /usr/src/app/yarn.lock
+
+# Run the install before copying the rest of the files
+RUN yarn config set workspaces-experimental true
+RUN yarn install
+
+ENV PATH /usr/src/app/node_modules/.bin:$PATH
+# ENV GENERATE_SOURCEMAP=false
+# ENV REACT_APP_CONFIG=config/default.js
+
+RUN yarn run build
+
+# Stage 2: Bundle the built application into a Docker container
+# which runs Nginx using Alpine Linux
+FROM nginx:1.15.5-alpine
+RUN apk add --no-cache bash
+RUN rm -rf /etc/nginx/conf.d
+COPY .docker/Viewer-v2.x /etc/nginx/conf.d
+COPY .docker/Viewer-v2.x/entrypoint.sh /usr/src/
+RUN chmod 777 /usr/src/entrypoint.sh
+COPY --from=builder /usr/src/app/platform/viewer/dist /usr/share/nginx/html
+EXPOSE 80
+EXPOSE 443
+ENTRYPOINT ["/usr/src/entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -123,8 +123,7 @@ window.config = {
   `window.OHIFStandaloneViewer.installViewer(window.config);`
 
 This exact setup is demonstrated in this
-[CodeSandbox](https://codesandbox.io/s/ohif-viewer-script-tag-usage-c4u4t) and
-in our
+[CodeSandbox](https://codesandbox.io/s/viewer-script-tag-tprch) and in our
 [Embedding The Viewer](https://docs.ohif.org/deployment/recipes/embedded-viewer.html)
 deployment recipe.
 
@@ -133,7 +132,7 @@ deployment recipe.
 ### Requirements
 
 - [Yarn 1.17.3+](https://yarnpkg.com/en/docs/install)
-- [Node 8+](https://nodejs.org/en/)
+- [Node 10+](https://nodejs.org/en/)
 - Yarn Workspaces should be enabled on your machine:
   - `yarn config set workspaces-experimental true`
 

docs/latest/advanced/extensions.md

@@ -160,6 +160,7 @@ An extension can register a Toolbar Module by providing a `getToolbarModule()`
 method that returns a React Component. The component does not receive any props.
 If you want to modify or react to state, you will need to connect to the redux
 store.
+The given toolbar must determine its set of elements and the context of them. The set of elements will be listed on toolbar `definitions`.
 
 ![Toolbar Extension](../assets/img/extensions-toolbar.gif)
 
@@ -170,6 +171,31 @@ Toolbar components are rendered in the `ToolbarRow` component.
 For a complete example implementation,
 [check out the OHIFCornerstoneViewport's Toolbar Module](https://github.com/OHIF/Viewers/blob/master/extensions/cornerstone/src/toolbarModule.js).
 
+##### Toolbar Custom Component
+
+Toolbar elements can define its own custom react component to be consumed when rendering it. So far, it accepts `Functional` and `Class` Components. For that, you just need to expose your `CustomToolbarComponent` as the value of key `CustomComponent`. In case the property `CustomComponent` is not present, a default toolbar component will be used to render it. See bellow
+
+```js
+definitions: [
+...
+    {
+        id: 'Custom',
+        label: 'Custom',
+        icon: 'custom-icon',
+        CustomComponent: CustomToolbarComponent,
+    }
+...
+]
+
+```
+`CustomComponent` components will receive the following props:
+- parentContext: parent context. (In most of the cases it will be a ToolbarRow instance)
+- toolbarClickCallback: callback method when clicking on toolbar
+- button: its own definition object
+- key: react key prop
+- activeButtons: list of active elements
+- isActive: if current
+
 #### SopClassHandler
 
 ...

docs/latest/deployment/index.md

@@ -205,5 +205,5 @@ Please feel free to suggest or contribute your own recipes.
 [host-static-assets]: https://www.netlify.com/blog/2016/05/18/9-reasons-your-site-should-be-static/
 [cors]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
 [code-flows]: https://medium.com/@darutk/diagrams-of-all-the-openid-connect-flows-6968e3990660
-[code-sandbox]: https://codesandbox.io/s/ohif-viewer-script-tag-usage-b3st9
+[code-sandbox]: https://codesandbox.io/s/viewer-script-tag-tprch
 <!-- prettier-ignore-end -->

docs/latest/deployment/recipes/embedded-viewer.md

@@ -49,7 +49,7 @@ window.config = {
 };
 ```
 
-<ol start="5"><li>
+<ol start="3"><li>
   Render the viewer in the web page's target <code>div</code>
 </li></ol>
 
@@ -66,7 +66,41 @@ window.OHIFViewer.installViewer(
 );
 ```
 
-#### Tips & Tricks
+You can see a live example of this recipe in [this CodeSandbox][code-sandbox].
+
+## Add Extensions
+
+The UMD build of the OHIF Viewer is a "light weight" build that only contains
+the core extensions required for basic 2D image viewing. It's possible to add
+other extensions at runtime.
+
+This only requires us to include a single script tag, and add it using the
+`extensions` key to our config. In this practical example, we register our
+popular whole slide microscopy extension:
+
+```html
+<script
+  src="https://unpkg.com/@ohif/extension-dicom-microscopy@0.50.5/dist/index.umd.js"
+  crossorigin
+></script>
+
+<!-- --->
+<script>
+  window.config = {
+    // ...
+    extensions: [OHIFExtDicomMicroscopy],
+  };
+</script>
+```
+
+You can see an example of a slide microscopy study in the viewer [with the
+extension enabled here][whole-slide-ext-demo] ([source code][ext-code-sandbox])
+and [without it here][whole-slide-base-demo] ([source code][code-sandbox]).
+
+You can read more about extensions and how to create your own in our
+[extensions guide](/advanced/extensions.md).
+
+#### FAQ
 
 > I'm having trouble getting this to work. Where can I go for help?
 
@@ -99,4 +133,9 @@ conflict issues.
   LINKS
   -->
 
-[code-sandbox]: https://codesandbox.io/s/ohif-script-tag-v103-iniiu
+<!-- prettier-ignore-start -->
+[code-sandbox]: https://codesandbox.io/s/viewer-script-tag-tprch
+[whole-slide-base-demo]: https://tprch.csb.app/viewer/1.2.392.200140.2.1.1.1.2.799008771.2020.1519719354.757
+[ext-code-sandbox]: https://codesandbox.io/s/viewer-script-tag-microscopy-extension-44unk
+[whole-slide-ext-demo]: https://44unk.csb.app/viewer/1.2.392.200140.2.1.1.1.2.799008771.2448.1519719572.518
+<!-- prettier-ignore-end -->

extensions/cornerstone/.webpack/webpack.prod.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const merge = require('webpack-merge');
 const path = require('path');
 const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
@@ -29,9 +30,15 @@ module.exports = (env, argv) => {
     },
     output: {
       path: ROOT_DIR,
-      library: 'ohifExtensionCornerstone',
+      library: 'OHIFExtCornerstone',
       libraryTarget: 'umd',
+      libraryExport: 'default',
       filename: pkg.main,
     },
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    ],
   });
 };

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,136 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.3.0...@ohif/extension-cornerstone@1.3.1) (2019-10-09)
+
+
+### Bug Fixes
+
+* 🐛 set tools bidirectional, eraser and annotate command ([#1020](https://github.com/OHIF/Viewers/issues/1020)) ([a28984e](https://github.com/OHIF/Viewers/commit/a28984e))
+
+
+
+
+
+# [1.3.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.2.5...@ohif/extension-cornerstone@1.3.0) (2019-10-09)
+
+
+### Features
+
+* Multiple fixes and implementation changes to react-cornerstone-viewport ([1cc94f3](https://github.com/OHIF/Viewers/commit/1cc94f3))
+
+
+
+
+
+## [1.2.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.2.4...@ohif/extension-cornerstone@1.2.5) (2019-09-27)
+
+
+### Bug Fixes
+
+* version bump issue ([#963](https://github.com/OHIF/Viewers/issues/963)) ([e607ed2](https://github.com/OHIF/Viewers/commit/e607ed2)), closes [#962](https://github.com/OHIF/Viewers/issues/962)
+
+
+
+
+
+# [2.0.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.2.2...@ohif/extension-cornerstone@2.0.0) (2019-09-27)
+
+
+### Bug Fixes
+
+* 🐛 Add DicomLoaderService & FileLoaderService to fix SR, PDF, and SEG support in local file and WADO-RS-only use cases ([#862](https://github.com/OHIF/Viewers/issues/862)) ([e7e1a8a](https://github.com/OHIF/Viewers/commit/e7e1a8a)), closes [#838](https://github.com/OHIF/Viewers/issues/838)
+* version bump issue ([#962](https://github.com/OHIF/Viewers/issues/962)) ([c80ea17](https://github.com/OHIF/Viewers/commit/c80ea17))
+
+
+### BREAKING CHANGES
+
+* DICOM Seg
+
+
+
+
+
+# [2.0.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.2.2...@ohif/extension-cornerstone@2.0.0) (2019-09-27)
+
+
+### Bug Fixes
+
+* 🐛 Add DicomLoaderService & FileLoaderService to fix SR, PDF, and SEG support in local file and WADO-RS-only use cases ([#862](https://github.com/OHIF/Viewers/issues/862)) ([e7e1a8a](https://github.com/OHIF/Viewers/commit/e7e1a8a)), closes [#838](https://github.com/OHIF/Viewers/issues/838)
+
+
+### BREAKING CHANGES
+
+* DICOM Seg
+
+
+
+
+
+## [1.2.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.2.1...@ohif/extension-cornerstone@1.2.2) (2019-09-26)
+
+
+### Bug Fixes
+
+* Add some code splitting for PWA build ([#937](https://github.com/OHIF/Viewers/issues/937)) ([8938035](https://github.com/OHIF/Viewers/commit/8938035))
+
+
+
+
+
+## [1.2.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.2.0...@ohif/extension-cornerstone@1.2.1) (2019-09-17)
+
+
+### Bug Fixes
+
+* bump cornerstone-tools version in peerDeps ([4afc88c](https://github.com/OHIF/Viewers/commit/4afc88c))
+
+
+
+
+
+# [1.2.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.1.1...@ohif/extension-cornerstone@1.2.0) (2019-09-12)
+
+
+### Features
+
+* **Annotate:** Add annotate tool back to toolbar ([26be967](https://github.com/OHIF/Viewers/commit/26be967))
+
+
+
+
+
+## [1.1.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.1.0...@ohif/extension-cornerstone@1.1.1) (2019-09-12)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+# [1.1.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.0.1...@ohif/extension-cornerstone@1.1.0) (2019-09-12)
+
+
+### Features
+
+* **BidirectionalTool:** Add BidrectionalTool to "more" menu ([#911](https://github.com/OHIF/Viewers/issues/911)) ([e40cbae](https://github.com/OHIF/Viewers/commit/e40cbae))
+* **EraserTool:** add eraserTool to @ohif/extension-cornerstone ([#912](https://github.com/OHIF/Viewers/issues/912)) ([698d274](https://github.com/OHIF/Viewers/commit/698d274))
+
+
+
+
+
+## [1.0.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.0.0...@ohif/extension-cornerstone@1.0.1) (2019-09-10)
+
+
+### Bug Fixes
+
+* simplify runtime-extension usage ([ac5dbda](https://github.com/OHIF/Viewers/commit/ac5dbda))
+
+
+
+
+
 # [1.0.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@0.50.5...@ohif/extension-cornerstone@1.0.0) (2019-09-09)
 
 

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "1.0.0",
+  "version": "1.3.1",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -32,14 +32,14 @@
     "@ohif/ui": "^0.50.0",
     "cornerstone-core": "^2.2.8",
     "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "^4.0.1",
+    "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.6.0",
+    "dcmjs": "^0.6.1",
     "dicom-parser": "^1.8.3",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-redux": "^6.0.0",
     "react-resize-detector": "^3.4.0",
     "redux": "^4.0.1"
@@ -48,6 +48,6 @@
     "@babel/runtime": "^7.5.5",
     "classnames": "^2.2.6",
     "lodash.throttle": "^4.1.1",
-    "react-cornerstone-viewport": "0.1.30"
+    "react-cornerstone-viewport": "2.x.x"
   }
 }

extensions/cornerstone/src/ConnectedCornerstoneViewport.js

@@ -23,36 +23,40 @@ const MEASUREMENT_ACTION_MAP = {
 const mapStateToProps = (state, ownProps) => {
   let dataFromStore;
 
+  // TODO: This may not be updated anymore :thinking:
   if (state.extensions && state.extensions.cornerstone) {
     dataFromStore = state.extensions.cornerstone;
   }
 
-  // TODO: This should be extension configuration
-  // ...dataFromStore -->
-  // availableTools,
-  // onNewImage,
-  // onRightClick,
-  // onTouchPress,
-  // onTouchStart,
-  // onMouseClick,
-
   // If this is the active viewport, enable prefetching.
   const { viewportIndex } = ownProps; //.viewportData;
   const isActive = viewportIndex === state.viewports.activeViewportIndex;
   const viewportSpecificData =
     state.viewports.viewportSpecificData[viewportIndex] || {};
 
+  // CINE
+  let isPlaying = false;
+  let frameRate = 24;
+
+  if (viewportSpecificData && viewportSpecificData.cine) {
+    const cine = viewportSpecificData.cine;
+
+    isPlaying = cine.isPlaying === true;
+    frameRate = cine.cineFrameRate || frameRate;
+  }
+
   return {
-    layout: state.viewports.layout,
+    // layout: state.viewports.layout,
     isActive,
     // TODO: Need a cleaner and more versatile way.
     // Currently justing using escape hatch + commands
     // activeTool: activeButton && activeButton.command,
     ...dataFromStore,
-    enableStackPrefetch: isActive,
+    isStackPrefetchEnabled: isActive,
+    isPlaying,
+    frameRate,
     //stack: viewportSpecificData.stack,
-    cineToolData: viewportSpecificData.cine,
-    viewport: viewportSpecificData.viewport,
+    // viewport: viewportSpecificData.viewport,
   };
 };
 

extensions/cornerstone/src/OHIFCornerstoneViewport.js

@@ -1,10 +1,10 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
 
-import ConnectedCornerstoneViewport from "./ConnectedCornerstoneViewport";
-import OHIF from "@ohif/core";
-import PropTypes from "prop-types";
-import cornerstone from "cornerstone-core";
-import handleSegmentationStorage from "./handleSegmentationStorage.js";
+import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport';
+import OHIF from '@ohif/core';
+import PropTypes from 'prop-types';
+import cornerstone from 'cornerstone-core';
+import handleSegmentationStorage from './handleSegmentationStorage.js';
 
 const { StackManager } = OHIF.utils;
 
@@ -18,7 +18,7 @@ cornerstone.metaData.addProvider(
 StackManager.setMetadataProvider(metadataProvider);
 
 const SOP_CLASSES = {
-  SEGMENTATION_STORAGE: "1.2.840.10008.5.1.4.1.1.66.4"
+  SEGMENTATION_STORAGE: '1.2.840.10008.5.1.4.1.1.66.4',
 };
 
 const specialCaseHandlers = {};
@@ -28,11 +28,11 @@ specialCaseHandlers[
 
 class OHIFCornerstoneViewport extends Component {
   state = {
-    viewportData: null
+    viewportData: null,
   };
 
   static defaultProps = {
-    customProps: {}
+    customProps: {},
   };
 
   static propTypes = {
@@ -40,17 +40,17 @@ class OHIFCornerstoneViewport extends Component {
     displaySet: PropTypes.object,
     viewportIndex: PropTypes.number,
     children: PropTypes.node,
-    customProps: PropTypes.object
+    customProps: PropTypes.object,
   };
 
-  static id = "OHIFCornerstoneViewport";
+  static id = 'OHIFCornerstoneViewport';
 
   static init() {
-    console.log("OHIFCornerstoneViewport init()");
+    console.log('OHIFCornerstoneViewport init()');
   }
 
   static destroy() {
-    console.log("OHIFCornerstoneViewport destroy()");
+    console.log('OHIFCornerstoneViewport destroy()');
     StackManager.clearStacks();
   }
 
@@ -72,15 +72,15 @@ class OHIFCornerstoneViewport extends Component {
     frameIndex = 0
   ) {
     if (!studies || !studies.length) {
-      throw new Error("Studies not provided.");
+      throw new Error('Studies not provided.');
     }
 
     if (!studyInstanceUid) {
-      throw new Error("StudyInstanceUID not provided.");
+      throw new Error('StudyInstanceUID not provided.');
     }
 
     if (!displaySetInstanceUid) {
-      throw new Error("StudyInstanceUID not provided.");
+      throw new Error('StudyInstanceUID not provided.');
     }
 
     // Create shortcut to displaySet
@@ -89,7 +89,7 @@ class OHIFCornerstoneViewport extends Component {
     );
 
     if (!study) {
-      throw new Error("Study not found.");
+      throw new Error('Study not found.');
     }
 
     const displaySet = study.displaySets.find(set => {
@@ -97,7 +97,7 @@ class OHIFCornerstoneViewport extends Component {
     });
 
     if (!displaySet) {
-      throw new Error("Display Set not found.");
+      throw new Error('Display Set not found.');
     }
 
     // Get stack from Stack Manager
@@ -110,7 +110,7 @@ class OHIFCornerstoneViewport extends Component {
     if (sopInstanceUid) {
       const index = stack.imageIds.findIndex(imageId => {
         const sopCommonModule = cornerstone.metaData.get(
-          "sopCommonModule",
+          'sopCommonModule',
           imageId
         );
         if (!sopCommonModule) {
@@ -124,7 +124,7 @@ class OHIFCornerstoneViewport extends Component {
         stack.currentImageIdIndex = index;
       } else {
         console.warn(
-          "SOPInstanceUID provided was not found in specified DisplaySet"
+          'SOPInstanceUID provided was not found in specified DisplaySet'
         );
       }
     }
@@ -132,22 +132,6 @@ class OHIFCornerstoneViewport extends Component {
     return stack;
   }
 
-  static getViewportData = (
-    studies,
-    studyInstanceUid,
-    displaySetInstanceUid,
-    sopInstanceUid,
-    frameIndex
-  ) => {
-    return OHIFCornerstoneViewport.getCornerstoneStack(
-      studies,
-      studyInstanceUid,
-      displaySetInstanceUid,
-      sopInstanceUid,
-      frameIndex
-    );
-  };
-
   getViewportData = async (
     studies,
     studyInstanceUid,
@@ -172,7 +156,7 @@ class OHIFCornerstoneViewport extends Component {
         );
         break;
       default:
-        const stack = OHIFCornerstoneViewport.getViewportData(
+        const stack = OHIFCornerstoneViewport.getCornerstoneStack(
           studies,
           studyInstanceUid,
           displaySetInstanceUid,
@@ -183,7 +167,7 @@ class OHIFCornerstoneViewport extends Component {
         viewportData = {
           studyInstanceUid,
           displaySetInstanceUid,
-          stack
+          stack,
         };
 
         break;
@@ -199,7 +183,7 @@ class OHIFCornerstoneViewport extends Component {
       displaySetInstanceUid,
       sopClassUids,
       sopInstanceUid,
-      frameIndex
+      frameIndex,
     } = displaySet;
 
     if (!studyInstanceUid || !displaySetInstanceUid) {
@@ -208,7 +192,7 @@ class OHIFCornerstoneViewport extends Component {
 
     if (sopClassUids && sopClassUids.length > 1) {
       console.warn(
-        "More than one SOPClassUid in the same series is not yet supported."
+        'More than one SOPClassUid in the same series is not yet supported.'
       );
     }
 
@@ -223,7 +207,7 @@ class OHIFCornerstoneViewport extends Component {
       frameIndex
     ).then(viewportData => {
       this.setState({
-        viewportData
+        viewportData,
       });
     });
   }
@@ -249,25 +233,42 @@ class OHIFCornerstoneViewport extends Component {
   render() {
     let childrenWithProps = null;
 
+    if (!this.state.viewportData) {
+      return null;
+    }
+    const { viewportIndex } = this.props;
+    const {
+      imageIds,
+      currentImageIdIndex,
+      // If this comes from the instance, would be a better default
+      // `FrameTime` in the instance
+      // frameRate = 0,
+    } = this.state.viewportData.stack;
+
     // TODO: Does it make more sense to use Context?
     if (this.props.children && this.props.children.length) {
       childrenWithProps = this.props.children.map((child, index) => {
         return React.cloneElement(child, {
           viewportIndex: this.props.viewportIndex,
-          key: index
+          key: index,
         });
       });
     }
 
     return (
       <>
-        {this.state.viewportData && (
-          <ConnectedCornerstoneViewport
-            viewportData={this.state.viewportData}
-            viewportIndex={this.props.viewportIndex}
-            {...this.props.customProps}
-          />
-        )}
+        <ConnectedCornerstoneViewport
+          viewportIndex={viewportIndex}
+          imageIds={imageIds}
+          imageIdIndex={currentImageIdIndex}
+          // ~~ Connected (From REDUX)
+          // frameRate={frameRate}
+          // isPlaying={false}
+          // isStackPrefetchEnabled={true}
+          // onElementEnabled={() => {}}
+          // setViewportActive{() => {}}
+          {...this.props.customProps}
+        />
         {childrenWithProps}
       </>
     );

extensions/cornerstone/src/asyncComponent.js

@@ -0,0 +1,37 @@
+/**
+ * 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/cornerstone/src/handleSegmentationStorage.js

@@ -4,7 +4,7 @@ import OHIF from '@ohif/core';
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
 
-const { StackManager } = OHIF.utils;
+const { StackManager, DicomLoaderService } = OHIF.utils;
 
 function getDisplaySet(studies, studyInstanceUid, displaySetInstanceUid) {
   const study = studies.find(
@@ -52,14 +52,6 @@ function addSegMetadataToCornerstoneToolState(
   }
 }
 
-function retrieveDicomData(wadoUri) {
-  // TODO: Authorization header depends on the server. If we ever have multiple servers
-  // we will need to figure out how / when to pass this information in.
-  return fetch(wadoUri, {
-    headers: OHIF.DICOMWeb.getAuthorizationHeader(),
-  }).then(response => response.arrayBuffer());
-}
-
 async function handleSegmentationStorage(
   studies,
   studyInstanceUid,
@@ -73,8 +65,11 @@ async function handleSegmentationStorage(
     studyInstanceUid,
     displaySetInstanceUid
   );
-  const segWadoUri = displaySet.images[0].getData().wadouri;
-  const arrayBuffer = await retrieveDicomData(segWadoUri);
+
+  const arrayBuffer = await DicomLoaderService.findDicomDataPromise(
+    displaySet,
+    studies
+  );
   const dicomData = dcmjs.data.DicomMessage.readFile(arrayBuffer);
   const dataset = dcmjs.data.DicomMetaDictionary.naturalizeDataset(
     dicomData.dict
@@ -120,6 +115,7 @@ async function handleSegmentationStorage(
     referenceDisplaySet
   );
   const stack = Object.assign({}, cachedStack);
+
   stack.currentImageIdIndex = 0;
 
   return {

extensions/cornerstone/src/index.js

@@ -1,7 +1,14 @@
-import OHIFCornerstoneViewport from './OHIFCornerstoneViewport.js';
+import init from './init.js';
+import asyncComponent from './asyncComponent.js';
 import commandsModule from './commandsModule.js';
 import toolbarModule from './toolbarModule.js';
 
+const OHIFCornerstoneViewport = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "OHIFCornerstoneViewport" */ './OHIFCornerstoneViewport.js'
+  )
+);
+
 /**
  *
  */
@@ -11,6 +18,15 @@ export default {
    */
   id: 'cornerstone',
 
+  /**
+   *
+   *
+   * @param {object} [configuration={}]
+   * @param {object|array} [configuration.csToolsConfig] - Passed directly to `initCornerstoneTools`
+   */
+  preRegistration(configuration = {}) {
+    init(configuration);
+  },
   getViewportModule() {
     return OHIFCornerstoneViewport;
   },

extensions/cornerstone/src/init.js

@@ -0,0 +1,87 @@
+import OHIF from '@ohif/core';
+import cornerstone from 'cornerstone-core';
+import csTools from 'cornerstone-tools';
+import initCornerstoneTools from './initCornerstoneTools.js';
+
+/**
+ *
+ * @param {object} configuration
+ * @param {Object|Array} configuration.csToolsConfig
+ */
+export default function init(configuration = {}) {
+  const { csToolsConfig } = configuration;
+  const { StackManager } = OHIF.utils;
+  const metadataProvider = new OHIF.cornerstone.MetadataProvider();
+
+  // ~~ Set our MetadataProvider
+  cornerstone.metaData.addProvider(
+    metadataProvider.provider.bind(metadataProvider)
+  );
+
+  StackManager.setMetadataProvider(metadataProvider);
+
+  // ~~
+  const defaultCsToolsConfig = csToolsConfig || {
+    globalToolSyncEnabled: true,
+    showSVGCursors: true,
+    autoResizeViewports: false,
+  };
+
+  initCornerstoneTools(defaultCsToolsConfig);
+
+  // ~~ Toooools 🙌
+  const {
+    PanTool,
+    ZoomTool,
+    WwwcTool,
+    MagnifyTool,
+    StackScrollTool,
+    StackScrollMouseWheelTool,
+    // Touch
+    PanMultiTouchTool,
+    ZoomTouchPinchTool,
+    // Annotations
+    EraserTool,
+    ArrowAnnotateTool,
+    BidirectionalTool,
+    LengthTool,
+    AngleTool,
+    FreehandRoiTool,
+    EllipticalRoiTool,
+    DragProbeTool,
+    RectangleRoiTool,
+    // Segmentation
+    BrushTool,
+  } = csTools;
+  const tools = [
+    PanTool,
+    ZoomTool,
+    WwwcTool,
+    MagnifyTool,
+    StackScrollTool,
+    StackScrollMouseWheelTool,
+    // Touch
+    PanMultiTouchTool,
+    ZoomTouchPinchTool,
+    // Annotations
+    EraserTool,
+    ArrowAnnotateTool,
+    BidirectionalTool,
+    LengthTool,
+    AngleTool,
+    FreehandRoiTool,
+    EllipticalRoiTool,
+    DragProbeTool,
+    RectangleRoiTool,
+    // Segmentation
+    BrushTool,
+  ];
+
+  tools.forEach(tool => csTools.addTool(tool));
+  csTools.setToolActive('Pan', { mouseButtonMask: 4 });
+  csTools.setToolActive('Zoom', { mouseButtonMask: 2 });
+  csTools.setToolActive('Wwwc', { mouseButtonMask: 1 });
+  csTools.setToolActive('StackScrollMouseWheel', {}); // TODO: Empty options should not be required
+  csTools.setToolActive('PanMultiTouch', { pointers: 2 }); // TODO: Better error if no options
+  csTools.setToolActive('ZoomTouchPinch', {});
+}

extensions/cornerstone/src/toolbarModule.js

@@ -69,6 +69,15 @@ const definitions = [
     commandName: 'setToolActive',
     commandOptions: { toolName: 'Length' },
   },
+  {
+    id: 'ArrowAnnotate',
+    label: 'Annotate',
+    icon: 'measure-non-target',
+    //
+    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    commandName: 'setToolActive',
+    commandOptions: { toolName: 'ArrowAnnotate' },
+  },
   {
     id: 'Angle',
     label: 'Angle',
@@ -186,6 +195,24 @@ const definitions = [
         type: TOOLBAR_BUTTON_TYPES.COMMAND,
         commandName: 'clearAnnotations',
       },
+      {
+        id: 'Bidirectional',
+        label: 'Bidirectional',
+        icon: 'measure-target',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Bidirectional' },
+      },
+      {
+        id: 'Eraser',
+        label: 'Eraser',
+        icon: 'eraser',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Eraser' },
+      },
     ],
   },
 ];

extensions/dicom-html/.webpack/webpack.prod.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const merge = require('webpack-merge');
 const path = require('path');
 const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
@@ -29,9 +30,15 @@ module.exports = (env, argv) => {
     },
     output: {
       path: ROOT_DIR,
-      library: 'ohifExtensionDicomHtml',
+      library: 'OHIFExtDicomHtml',
       libraryTarget: 'umd',
+      libraryExport: 'default',
       filename: pkg.main,
     },
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    ],
   });
 };

extensions/dicom-html/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.50.8...@ohif/extension-dicom-html@1.0.0) (2019-09-27)
+
+
+### Bug Fixes
+
+* 🐛 Add DicomLoaderService & FileLoaderService to fix SR, PDF, and SEG support in local file and WADO-RS-only use cases ([#862](https://github.com/OHIF/Viewers/issues/862)) ([e7e1a8a](https://github.com/OHIF/Viewers/commit/e7e1a8a)), closes [#838](https://github.com/OHIF/Viewers/issues/838)
+
+
+### BREAKING CHANGES
+
+* DICOM Seg
+
+
+
+
+
+## [0.50.8](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.50.7...@ohif/extension-dicom-html@0.50.8) (2019-09-26)
+
+
+### Bug Fixes
+
+* Add some code splitting for PWA build ([#937](https://github.com/OHIF/Viewers/issues/937)) ([8938035](https://github.com/OHIF/Viewers/commit/8938035))
+
+
+
+
+
+## [0.50.7](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.50.6...@ohif/extension-dicom-html@0.50.7) (2019-09-12)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+
+
+
+
+## [0.50.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.50.5...@ohif/extension-dicom-html@0.50.6) (2019-09-10)
+
+
+### Bug Fixes
+
+* simplify runtime-extension usage ([ac5dbda](https://github.com/OHIF/Viewers/commit/ac5dbda))
+
+
+
+
+
 ## [0.50.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.50.4...@ohif/extension-dicom-html@0.50.5) (2019-09-09)
 
 **Note:** Version bump only for package @ohif/extension-dicom-html

extensions/dicom-html/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-html",
-  "version": "0.50.5",
+  "version": "1.0.0",
   "description": "OHIF extension for rendering structured reports to HTML",
   "author": "OHIF",
   "license": "MIT",
@@ -29,10 +29,10 @@
   },
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
-    "dcmjs": "^0.6.0",
+    "dcmjs": "^0.6.1",
     "prop-types": "^15.6.2",
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5"

extensions/dicom-html/src/OHIFDicomHtmlViewport.js

@@ -1,46 +1,34 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import DicomHtmlViewport from './DicomHtmlViewport';
+import OHIF from '@ohif/core';
+const { DicomLoaderService } = OHIF.utils;
 
 class OHIFDicomHtmlViewport extends Component {
   static propTypes = {
     studies: PropTypes.object,
     displaySet: PropTypes.object,
-    viewportIndex: PropTypes.number
+    viewportIndex: PropTypes.number,
   };
 
   state = {
     byteArray: null,
-    error: null
+    error: null,
   };
 
   componentDidMount() {
-    const { displaySet } = this.props.viewportData;
-    const {
-      studyInstanceUid,
-      seriesInstanceUid,
-      sopInstanceUid,
-      wadoRoot,
-      wadoUri,
-      authorizationHeaders
-    } = displaySet;
+    const { displaySet, studies } = this.props.viewportData;
 
-    this.retrieveDicomData(
-      studyInstanceUid,
-      seriesInstanceUid,
-      sopInstanceUid,
-      wadoRoot,
-      wadoUri,
-      authorizationHeaders
-    ).then(
-      byteArray => {
+    DicomLoaderService.findDicomDataPromise(displaySet, studies).then(
+      data => {
+        const byteArray = new Uint8Array(data);
         this.setState({
-          byteArray
+          byteArray: byteArray,
         });
       },
       error => {
         this.setState({
-          error
+          error,
         });
 
         throw new Error(error);
@@ -48,27 +36,6 @@ class OHIFDicomHtmlViewport extends Component {
     );
   }
 
-  retrieveDicomData(
-    studyInstanceUid,
-    seriesInstanceUid,
-    sopInstanceUid,
-    wadoRoot,
-    wadoUri,
-    authorizationHeaders
-  ) {
-    // TODO: Passing in a lot of data we aren't using
-
-    // TODO: Authorization header depends on the server. If we ever have multiple servers
-    // we will need to figure out how / when to pass this information in.
-    return fetch(wadoUri, {
-      headers: authorizationHeaders
-    })
-      .then(response => response.arrayBuffer())
-      .then(arraybuffer => {
-        return new Uint8Array(arraybuffer);
-      });
-  }
-
   render() {
     return (
       <>

extensions/dicom-html/src/asyncComponent.js

@@ -0,0 +1,37 @@
+/**
+ * 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/dicom-html/src/index.js

@@ -1,5 +1,11 @@
+import asyncComponent from './asyncComponent.js';
 import OHIFDicomHtmlSopClassHandler from './OHIFDicomHtmlSopClassHandler.js';
-import OHIFDicomHtmlViewport from './OHIFDicomHtmlViewport.js';
+
+const OHIFDicomHtmlViewport = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "OHIFDicomHtmlViewport" */ './OHIFDicomHtmlViewport.js'
+  )
+);
 
 export default {
   /**
@@ -12,5 +18,5 @@ export default {
   },
   getSopClassHandlerModule() {
     return OHIFDicomHtmlSopClassHandler;
-  }
+  },
 };

extensions/dicom-microscopy/.webpack/webpack.prod.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const merge = require('webpack-merge');
 const path = require('path');
 const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
@@ -29,9 +30,15 @@ module.exports = (env, argv) => {
     },
     output: {
       path: ROOT_DIR,
-      library: 'ohifExtensionDicomMicroscopy',
+      library: 'OHIFExtDicomMicroscopy',
       libraryTarget: 'umd',
+      libraryExport: 'default',
       filename: pkg.main,
     },
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+           maxChunks: 1
+       })
+    ]
   });
 };

extensions/dicom-microscopy/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.
 
+## [0.50.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.5...@ohif/extension-dicom-microscopy@0.50.6) (2019-09-26)
+
+
+### Bug Fixes
+
+* Add some code splitting for PWA build ([#937](https://github.com/OHIF/Viewers/issues/937)) ([8938035](https://github.com/OHIF/Viewers/commit/8938035))
+
+
+
+
+
+## [0.50.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.4...@ohif/extension-dicom-microscopy@0.50.5) (2019-09-10)
+
+
+### Bug Fixes
+
+* simplify runtime-extension usage ([ac5dbda](https://github.com/OHIF/Viewers/commit/ac5dbda))
+
+
+
+
+
 ## [0.50.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.3...@ohif/extension-dicom-microscopy@0.50.4) (2019-09-04)
 
 **Note:** Version bump only for package @ohif/extension-dicom-microscopy

extensions/dicom-microscopy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-microscopy",
-  "version": "0.50.4",
+  "version": "0.50.6",
   "description": "OHIF extension for Dicom Microscopy",
   "author": "OHIF",
   "license": "MIT",
@@ -29,8 +29,8 @@
   },
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",

extensions/dicom-microscopy/src/DicomMicroscopyViewport.js

@@ -1,10 +1,7 @@
 import React, { Component } from 'react';
 import ReactResizeDetector from 'react-resize-detector';
-import { api } from 'dicom-microscopy-viewer';
 import debounce from 'lodash.debounce';
 
-const microscopyViewer = api.VLWholeSlideMicroscopyImageViewer;
-
 class DicomMicroscopyViewport extends Component {
   state = {
     error: null,
@@ -56,9 +53,12 @@ class DicomMicroscopyViewport extends Component {
         }
         return Promise.all(promises);
       })
-      .then(metadata => {
+      .then(async metadata => {
         metadata = metadata.filter(m => m);
 
+        const { api } = await import(/* webpackChunkName: "dicom-microscopy-viewer" */ 'dicom-microscopy-viewer');
+        const microscopyViewer = api.VLWholeSlideMicroscopyImageViewer;
+
         this.viewer = new microscopyViewer({
           client: dicomWebClient,
           metadata,

extensions/dicom-microscopy/src/asyncComponent.js

@@ -0,0 +1,37 @@
+/**
+ * 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/dicom-microscopy/src/index.js

@@ -1,5 +1,11 @@
+import asyncComponent from './asyncComponent.js';
 import DicomMicroscopySopClassHandler from './DicomMicroscopySopClassHandler.js';
-import DicomMicroscopyViewport from './DicomMicroscopyViewport.js';
+
+const DicomMicroscopyViewport = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "DicomMicroscopyViewport" */ './DicomMicroscopyViewport.js'
+  )
+);
 
 export default {
   /**

extensions/dicom-pdf/.webpack/webpack.prod.js

@@ -29,8 +29,9 @@ module.exports = (env, argv) => {
     },
     output: {
       path: ROOT_DIR,
-      library: 'ohifExtensionDicomPdf',
+      library: 'OHIFExtDicomPdf',
       libraryTarget: 'umd',
+      libraryExport: 'default',
       filename: pkg.main,
     },
   });

extensions/dicom-pdf/CHANGELOG.md

@@ -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.
 
+# [1.0.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@0.50.4...@ohif/extension-dicom-pdf@1.0.0) (2019-09-27)
+
+
+### Bug Fixes
+
+* 🐛 Add DicomLoaderService & FileLoaderService to fix SR, PDF, and SEG support in local file and WADO-RS-only use cases ([#862](https://github.com/OHIF/Viewers/issues/862)) ([e7e1a8a](https://github.com/OHIF/Viewers/commit/e7e1a8a)), closes [#838](https://github.com/OHIF/Viewers/issues/838)
+
+
+### BREAKING CHANGES
+
+* DICOM Seg
+
+
+
+
+
+## [0.50.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@0.50.3...@ohif/extension-dicom-pdf@0.50.4) (2019-09-10)
+
+
+### Bug Fixes
+
+* simplify runtime-extension usage ([ac5dbda](https://github.com/OHIF/Viewers/commit/ac5dbda))
+
+
+
+
+
 ## [0.50.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-pdf@0.50.2...@ohif/extension-dicom-pdf@0.50.3) (2019-09-04)
 
 **Note:** Version bump only for package @ohif/extension-dicom-pdf

extensions/dicom-pdf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-pdf",
-  "version": "0.50.3",
+  "version": "1.0.0",
   "description": "OHIF extension for Dicom PDF",
   "author": "OHIF",
   "license": "MIT",
@@ -31,8 +31,8 @@
     "@ohif/core": "^0.50.0",
     "dicom-parser": "^1.8.3",
     "prop-types": "^15.6.2",
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",

extensions/dicom-pdf/src/DicomPDFViewport.js

@@ -4,41 +4,46 @@ import TypedArrayProp from './TypedArrayProp';
 
 // TODO: Should probably use dcmjs for this
 const SOP_CLASS_UIDS = {
-  ENCAPSULATED_PDF: '1.2.840.10008.5.1.4.1.1.104.1'
+  ENCAPSULATED_PDF: '1.2.840.10008.5.1.4.1.1.104.1',
 };
 
 class DicomPDFViewport extends Component {
   state = {
     fileURL: null,
-    error: null
+    error: null,
   };
 
   static propTypes = {
-    byteArray: TypedArrayProp.uint8
+    byteArray: TypedArrayProp.uint8,
   };
 
-  renderPDF = dataSet => {
-    const sopClassUid = dataSet.string('x00080016');
+  renderPDF = (dataSet, byteArray) => {
+    let pdfByteArray = byteArray;
 
-    if (sopClassUid !== SOP_CLASS_UIDS.ENCAPSULATED_PDF) {
-      throw new Error('This is not a DICOM-encapsulated PDF');
+    if (dataSet) {
+      const sopClassUid = dataSet.string('x00080016');
+
+      if (sopClassUid !== SOP_CLASS_UIDS.ENCAPSULATED_PDF) {
+        throw new Error('This is not a DICOM-encapsulated PDF');
+      }
+
+      const fileTag = dataSet.elements.x00420011;
+      const offset = fileTag.dataOffset;
+      const remainder = offset + fileTag.length;
+      pdfByteArray = dataSet.byteArray.slice(offset, remainder);
     }
 
-    const fileTag = dataSet.elements.x00420011;
-    const offset = fileTag.dataOffset;
-    const remainder = offset + fileTag.length;
-    const pdfByteArray = dataSet.byteArray.slice(offset, remainder);
     const PDF = new Blob([pdfByteArray], { type: 'application/pdf' });
     const fileURL = URL.createObjectURL(PDF);
 
     this.setState({
-      fileURL
+      fileURL,
     });
   };
 
   parseByteArray = byteArray => {
     const options = {
-      untilTag: ''
+      untilTag: '',
     };
 
     let dataSet;
@@ -47,7 +52,7 @@ class DicomPDFViewport extends Component {
       dataSet = dicomParser.parseDicom(byteArray, options);
     } catch (error) {
       this.setState({
-        error
+        error,
       });
     }
 
@@ -57,7 +62,7 @@ class DicomPDFViewport extends Component {
   componentDidMount() {
     const dataSet = this.parseByteArray(this.props.byteArray);
 
-    this.renderPDF(dataSet);
+    this.renderPDF(dataSet, this.props.byteArray);
   }
 
   render() {

extensions/dicom-pdf/src/OHIFDicomPDFViewport.js

@@ -1,60 +1,54 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import OHIF from "@ohif/core";
-import OHIFComponentPlugin from "./OHIFComponentPlugin.js";
-import DicomPDFViewport from "./DicomPDFViewport";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import OHIF from '@ohif/core';
+import OHIFComponentPlugin from './OHIFComponentPlugin.js';
+import DicomPDFViewport from './DicomPDFViewport';
 
-const { DICOMWeb } = OHIF;
+const { DicomLoaderService } = OHIF.utils;
 
 class OHIFDicomPDFViewport extends Component {
   static propTypes = {
     studies: PropTypes.object,
     displaySet: PropTypes.object,
-    viewportIndex: PropTypes.number
+    viewportIndex: PropTypes.number,
   };
 
   state = {
     byteArray: null,
-    error: null
+    error: null,
   };
 
-  static id = "DicomPDFViewportPDF";
+  static id = 'DicomPDFViewportPDF';
 
   static init() {
-    console.log("DicomPDFViewport init()");
+    console.log('DicomPDFViewport init()');
   }
 
   static destroy() {
-    console.log("DicomPDFViewport destroy()");
+    console.log('DicomPDFViewport destroy()');
   }
 
   componentDidMount() {
-    const { displaySet } = this.props.viewportData;
+    const { displaySet, studies } = this.props.viewportData;
     const {
       studyInstanceUid,
       seriesInstanceUid,
       sopInstanceUid,
       wadoRoot,
       wadoUri,
-      authorizationHeaders
+      authorizationHeaders,
     } = displaySet;
 
-    this.retrieveDicomData(
-      studyInstanceUid,
-      seriesInstanceUid,
-      sopInstanceUid,
-      wadoRoot,
-      wadoUri,
-      authorizationHeaders
-    ).then(
-      byteArray => {
+    DicomLoaderService.findDicomDataPromise(displaySet, studies).then(
+      data => {
+        const byteArray = new Uint8Array(data);
         this.setState({
-          byteArray
+          byteArray: byteArray,
         });
       },
       error => {
         this.setState({
-          error
+          error,
         });
 
         throw new Error(error);
@@ -62,27 +56,6 @@ class OHIFDicomPDFViewport extends Component {
     );
   }
 
-  retrieveDicomData(
-    studyInstanceUid,
-    seriesInstanceUid,
-    sopInstanceUid,
-    wadoRoot,
-    wadoUri,
-    authorizationHeaders
-  ) {
-    // TODO: Passing in a lot of data we aren't using
-
-    // TODO: Authorization header depends on the server. If we ever have multiple servers
-    // we will need to figure out how / when to pass this information in.
-    return fetch(wadoUri, {
-      headers: authorizationHeaders
-    })
-      .then(response => response.arrayBuffer())
-      .then(arraybuffer => {
-        return new Uint8Array(arraybuffer);
-      });
-  }
-
   render() {
     const { id, init, destroy } = OHIFDicomPDFViewport;
     const pluginProps = { id, init, destroy };

extensions/vtk/.webpack/webpack.prod.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const merge = require('webpack-merge');
 const path = require('path');
 const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
@@ -29,9 +30,15 @@ module.exports = (env, argv) => {
     },
     output: {
       path: ROOT_DIR,
-      library: 'ohifExtensionVtk',
+      library: 'OHIFExtVtk',
       libraryTarget: 'umd',
+      libraryExport: 'default',
       filename: pkg.main,
     },
+    plugins: [
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    ],
   });
 };

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,229 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.52.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.5...@ohif/extension-vtk@0.52.6) (2019-10-11)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.4...@ohif/extension-vtk@0.52.5) (2019-10-10)
+
+
+### Performance Improvements
+
+* ⚡️ Update react-vtkjs-viewport for performance improvement ([6ee5094](https://github.com/OHIF/Viewers/commit/6ee5094))
+
+
+
+
+
+## [0.52.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.3...@ohif/extension-vtk@0.52.4) (2019-10-10)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.2...@ohif/extension-vtk@0.52.3) (2019-10-09)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.1...@ohif/extension-vtk@0.52.2) (2019-10-09)
+
+
+### Performance Improvements
+
+* 🎸 Update vtk viewport for faster image reconstruction ([#1016](https://github.com/OHIF/Viewers/issues/1016)) ([8513ad9](https://github.com/OHIF/Viewers/commit/8513ad9))
+
+
+
+
+
+## [0.52.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.0...@ohif/extension-vtk@0.52.1) (2019-10-04)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+# [0.52.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.51.3...@ohif/extension-vtk@0.52.0) (2019-10-03)
+
+
+### Features
+
+* 🎸 Synced Window Leveling ([559b637](https://github.com/OHIF/Viewers/commit/559b637)), closes [#558](https://github.com/OHIF/Viewers/issues/558)
+
+
+
+
+
+## [0.51.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.51.2...@ohif/extension-vtk@0.51.3) (2019-10-03)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.51.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.51.1...@ohif/extension-vtk@0.51.2) (2019-10-02)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.51.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.51.0...@ohif/extension-vtk@0.51.1) (2019-10-01)
+
+
+### Bug Fixes
+
+* **rotate:** Use new MPR rotate in react-vtkjs-viewport 0.1.2 ([#964](https://github.com/OHIF/Viewers/issues/964)) ([8503cbc](https://github.com/OHIF/Viewers/commit/8503cbc))
+
+
+
+
+
+# [0.51.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.23...@ohif/extension-vtk@0.51.0) (2019-10-01)
+
+
+### Features
+
+* 🎸 MPR UI improvements. Added MinIP, AvgIP, slab thickness slider and mode toggle ([#947](https://github.com/OHIF/Viewers/issues/947)) ([c79c0c3](https://github.com/OHIF/Viewers/commit/c79c0c3))
+
+
+
+
+
+## [0.50.23](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.22...@ohif/extension-vtk@0.50.23) (2019-10-01)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.50.22](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.21...@ohif/extension-vtk@0.50.22) (2019-09-27)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.50.21](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.20...@ohif/extension-vtk@0.50.21) (2019-09-27)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.50.20](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.19...@ohif/extension-vtk@0.50.20) (2019-09-26)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.50.19](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.18...@ohif/extension-vtk@0.50.19) (2019-09-26)
+
+
+### Bug Fixes
+
+* Add some code splitting for PWA build ([#937](https://github.com/OHIF/Viewers/issues/937)) ([8938035](https://github.com/OHIF/Viewers/commit/8938035))
+
+
+
+
+
+## [0.50.18](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.17...@ohif/extension-vtk@0.50.18) (2019-09-23)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.50.17](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.16...@ohif/extension-vtk@0.50.17) (2019-09-19)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.50.16](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.15...@ohif/extension-vtk@0.50.16) (2019-09-19)
+
+
+### Bug Fixes
+
+* Set transfer function range to data range when loading volumes in VTK ([#930](https://github.com/OHIF/Viewers/issues/930)) ([2341b32](https://github.com/OHIF/Viewers/commit/2341b32))
+
+
+
+
+
+## [0.50.15](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.14...@ohif/extension-vtk@0.50.15) (2019-09-19)
+
+
+### Bug Fixes
+
+* Bump VTK viewport dependency ([#929](https://github.com/OHIF/Viewers/issues/929)) ([66a0aad](https://github.com/OHIF/Viewers/commit/66a0aad))
+* Stop adding empty labelmap to VTK Viewports for now. Wait until paint tools are implemented ([#926](https://github.com/OHIF/Viewers/issues/926)) ([7f642a0](https://github.com/OHIF/Viewers/commit/7f642a0))
+
+
+
+
+
+## [0.50.14](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.13...@ohif/extension-vtk@0.50.14) (2019-09-17)
+
+
+### Bug Fixes
+
+* bump cornerstone-tools version in peerDeps ([4afc88c](https://github.com/OHIF/Viewers/commit/4afc88c))
+
+
+
+
+
+## [0.50.13](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.12...@ohif/extension-vtk@0.50.13) (2019-09-12)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.50.12](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.11...@ohif/extension-vtk@0.50.12) (2019-09-12)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.50.11](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.10...@ohif/extension-vtk@0.50.11) (2019-09-10)
+
+
+### Bug Fixes
+
+* simplify runtime-extension usage ([ac5dbda](https://github.com/OHIF/Viewers/commit/ac5dbda))
+
+
+
+
+
 ## [0.50.10](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.9...@ohif/extension-vtk@0.50.10) (2019-09-10)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.50.10",
+  "version": "0.52.6",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "@ohif/ui": "^0.50.0",
     "cornerstone-core": "^2.2.8",
     "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.6.0",
+    "dcmjs": "^0.6.1",
     "dicom-parser": "^1.8.3",
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",
@@ -48,14 +48,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "react-vtkjs-viewport": "0.0.11"
+    "react-vtkjs-viewport": "^0.1.6"
   },
   "devDependencies": {
-    "@ohif/core": "^0.50.8",
-    "@ohif/ui": "^0.50.4",
-    "cornerstone-tools": "^4.0.0",
+    "@ohif/core": "^1.3.0",
+    "@ohif/ui": "^0.53.3",
+    "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.6.0",
+    "dcmjs": "^0.6.1",
     "dicom-parser": "^1.8.3",
     "gh-pages": "^2.0.1",
     "i18next": "^17.0.3",

extensions/vtk/src/OHIFVTKViewport.js

@@ -1,16 +1,17 @@
-import React, { Component } from "react";
-import { getImageData, loadImageData } from "react-vtkjs-viewport";
+import React, { Component } from 'react';
+import { getImageData, loadImageData } from 'react-vtkjs-viewport';
 
-import ConnectedVTKViewport from "./ConnectedVTKViewport";
-import LoadingIndicator from "./LoadingIndicator.js";
-import OHIF from "@ohif/core";
-import PropTypes from "prop-types";
-import cornerstone from "cornerstone-core";
-import handleSegmentationStorage from "./handleSegmentationStorage.js";
-import vtkDataArray from "vtk.js/Sources/Common/Core/DataArray";
-import vtkImageData from "vtk.js/Sources/Common/DataModel/ImageData";
-import vtkVolume from "vtk.js/Sources/Rendering/Core/Volume";
-import vtkVolumeMapper from "vtk.js/Sources/Rendering/Core/VolumeMapper";
+import ConnectedVTKViewport from './ConnectedVTKViewport';
+import LoadingIndicator from './LoadingIndicator.js';
+import OHIF from '@ohif/core';
+import PropTypes from 'prop-types';
+import cornerstone from 'cornerstone-core';
+import handleSegmentationStorage from './handleSegmentationStorage.js';
+import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';
+import vtkImageData from 'vtk.js/Sources/Common/DataModel/ImageData';
+import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
+import vtkVolumeMapper from 'vtk.js/Sources/Rendering/Core/VolumeMapper';
+import vtkViewportSubscriptionManager from './utils/vtkViewportSubscriptionManager.js';
 
 const { StackManager } = OHIF.utils;
 
@@ -24,7 +25,7 @@ cornerstone.metaData.addProvider(
 StackManager.setMetadataProvider(metadataProvider);
 
 const SOP_CLASSES = {
-  SEGMENTATION_STORAGE: "1.2.840.10008.5.1.4.1.1.66.4"
+  SEGMENTATION_STORAGE: '1.2.840.10008.5.1.4.1.1.66.4',
 };
 
 const specialCaseHandlers = {};
@@ -42,7 +43,7 @@ const volumeCache = {};
  */
 function createLabelMapImageData(backgroundImageData) {
   const labelMapData = vtkImageData.newInstance(
-    backgroundImageData.get("spacing", "origin", "direction")
+    backgroundImageData.get('spacing', 'origin', 'direction')
   );
   labelMapData.setDimensions(backgroundImageData.getDimensions());
   labelMapData.computeTransforms();
@@ -50,7 +51,7 @@ function createLabelMapImageData(backgroundImageData) {
   const values = new Uint8Array(backgroundImageData.getNumberOfPoints());
   const dataArray = vtkDataArray.newInstance({
     numberOfComponents: 1, // labelmap with single component
-    values
+    values,
   });
   labelMapData.getPointData().setScalars(dataArray);
 
@@ -61,24 +62,24 @@ class OHIFVTKViewport extends Component {
   state = {
     volumes: null,
     paintFilterLabelMapImageData: null,
-    paintFilterBackgroundImageData: null
+    paintFilterBackgroundImageData: null,
   };
 
   static propTypes = {
     studies: PropTypes.object,
     displaySet: PropTypes.object,
     viewportIndex: PropTypes.number,
-    children: PropTypes.node
+    children: PropTypes.node,
   };
 
-  static id = "OHIFVTKViewport";
+  static id = 'OHIFVTKViewport';
 
   static init() {
-    console.log("OHIFVTKViewport init()");
+    console.log('OHIFVTKViewport init()');
   }
 
   static destroy() {
-    console.log("OHIFVTKViewport destroy()");
+    console.log('OHIFVTKViewport destroy()');
     StackManager.clearStacks();
   }
 
@@ -109,7 +110,7 @@ class OHIFVTKViewport extends Component {
     } else if (sopInstanceUid) {
       const index = stack.imageIds.findIndex(imageId => {
         const sopCommonModule = cornerstone.metaData.get(
-          "sopCommonModule",
+          'sopCommonModule',
           imageId
         );
         if (!sopCommonModule) {
@@ -151,8 +152,8 @@ class OHIFVTKViewport extends Component {
 
     switch (sopClassUid) {
       case SOP_CLASSES.SEGMENTATION_STORAGE:
-        throw new Error("Not yet implemented");
-
+        throw new Error('Not yet implemented');
+      /*
         const data = handleSegmentationStorage(
           stack.imageIds,
           displaySetInstanceUid
@@ -164,15 +165,18 @@ class OHIFVTKViewport extends Component {
         return loadImageData(imageDataObject).then(() => {
           return {
             data: imageDataObject.vtkImageData,
-            labelmap: labelmapDataObject
+            labelmap: labelmapDataObject,
           };
         });
+        */
       default:
         imageDataObject = getImageData(stack.imageIds, displaySetInstanceUid);
 
-        return loadImageData(imageDataObject).then(() => {
+        const loadImageDataPromise = loadImageData(imageDataObject);
+
+        return loadImageDataPromise.then(() => {
           return {
-            data: imageDataObject.vtkImageData
+            data: imageDataObject.vtkImageData,
           };
         });
     }
@@ -189,13 +193,24 @@ class OHIFVTKViewport extends Component {
     volumeActor.setMapper(volumeMapper);
     volumeMapper.setInputData(data);
 
+    const range = data
+      .getPointData()
+      .getScalars()
+      .getRange();
+
+    // TODO: For PET we might want to just set this to 0-5 SUV
+    volumeActor
+      .getProperty()
+      .getRGBTransferFunction(0)
+      .setRange(range[0], range[1]);
+
     // TODO: Should look into implementing autoAdjustSampleDistance in vtk
     const sampleDistance =
       1.2 *
       Math.sqrt(
         data
           .getSpacing()
-          .map((v) => v * v)
+          .map(v => v * v)
           .reduce((a, b) => a + b, 0)
       );
 
@@ -213,12 +228,12 @@ class OHIFVTKViewport extends Component {
       displaySetInstanceUid,
       sopClassUids,
       sopInstanceUid,
-      frameIndex
+      frameIndex,
     } = displaySet;
 
     if (sopClassUids.length > 1) {
       console.warn(
-        "More than one SOPClassUid in the same series is not yet supported."
+        'More than one SOPClassUid in the same series is not yet supported.'
       );
     }
 
@@ -233,16 +248,18 @@ class OHIFVTKViewport extends Component {
       frameIndex
     );
 
-    if (!labelmap) {
+    // TODO: Temporarily disabling this since it is not yet
+    // being used and hurts performance significantly.
+    /*if (!labelmap) {
       labelmap = createLabelMapImageData(data);
-    }
+    }*/
 
     const volumeActor = this.getOrCreateVolume(data, displaySetInstanceUid);
 
     this.setState({
       volumes: [volumeActor],
       paintFilterBackgroundImageData: data,
-      paintFilterLabelMapImageData: labelmap
+      paintFilterLabelMapImageData: labelmap,
     });
   }
 
@@ -250,6 +267,10 @@ class OHIFVTKViewport extends Component {
     this.setStateFromProps();
   }
 
+  componentWillUnmount() {
+    vtkViewportSubscriptionManager.unsubscribe(this.props.viewportIndex);
+  }
+
   componentDidUpdate(prevProps) {
     const { studies, displaySet } = this.props.viewportData;
     const prevDisplaySet = prevProps.viewportData.displaySet;
@@ -272,12 +293,12 @@ class OHIFVTKViewport extends Component {
       childrenWithProps = this.props.children.map((child, index) => {
         return React.cloneElement(child, {
           viewportIndex: this.props.viewportIndex,
-          key: index
+          key: index,
         });
       });
     }
 
-    const style = { width: "100%", height: "100%", position: "relative" };
+    const style = { width: '100%', height: '100%', position: 'relative' };
 
     return (
       <>

extensions/vtk/src/asyncComponent.js

@@ -0,0 +1,37 @@
+/**
+ * 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

@@ -2,12 +2,14 @@ import {
   vtkInteractorStyleMPRCrosshairs,
   vtkInteractorStyleMPRWindowLevel,
   vtkInteractorStyleMPRSlice,
+  vtkInteractorStyleMPRRotate,
   vtkSVGCrosshairsWidget,
   vtkSVGWidgetManager,
 } from 'react-vtkjs-viewport';
 
 import setMPRLayout from './utils/setMPRLayout.js';
 import setViewportToVTK from './utils/setViewportToVTK.js';
+import vtkViewportSubscriptionManager from './utils/vtkViewportSubscriptionManager.js';
 import vtkCoordinate from 'vtk.js/Sources/Rendering/Core/Coordinate';
 import vtkMath from 'vtk.js/Sources/Common/Core/Math';
 import vtkMatrixBuilder from 'vtk.js/Sources/Common/Core/MatrixBuilder';
@@ -18,6 +20,7 @@ const { BlendMode } = Constants;
 // TODO: Put this somewhere else
 let apis = {};
 let currentSlabThickness = 0.1;
+let defaultSlabThickness = 0.1;
 
 function getCrosshairCallbackForIndex(index) {
   return ({ worldPos }) => {
@@ -98,7 +101,7 @@ function _setView(api, sliceNormal, viewUp) {
   const camera = renderer.getActiveCamera();
   const istyle = renderWindow.getInteractor().getInteractorStyle();
   istyle.setSliceNormal(...sliceNormal);
-  camera.setViewUp(...viewUp);
+  istyle.setViewUp(...viewUp);
 
   renderWindow.render();
 }
@@ -109,14 +112,15 @@ function switchMPRInteractors(api, istyle) {
   const camera = renderer.getActiveCamera();
   const currentIStyle = renderWindow.getInteractor().getInteractorStyle();
 
-  let currentNormal;
-  if (currentIStyle.getSliceNormal && istyle.getSliceNormal) {
-    currentNormal = currentIStyle.getSliceNormal();
+  let currentViewport;
+  if (currentIStyle.getViewport && istyle.getViewport) {
+    currentViewport = currentIStyle.getViewport();
   }
 
   let currentSlabThickness;
   if (currentIStyle.getSlabThickness && istyle.getSlabThickness) {
     currentSlabThickness = currentIStyle.getSlabThickness();
+    defaultSlabThickness = currentSlabThickness;
   }
 
   renderWindow.getInteractor().setInteractorStyle(istyle);
@@ -124,11 +128,11 @@ function switchMPRInteractors(api, istyle) {
   // TODO: Not sure why this is required the second time this function is called
   istyle.setInteractor(renderWindow.getInteractor());
 
-  if (istyle.getVolumeMapper() !== api.volumes[0]) {
-    if (currentNormal) {
-      istyle.setSliceNormal(currentNormal);
-    }
+  if (currentViewport) {
+    istyle.setViewport(currentViewport);
+  }
 
+  if (istyle.getVolumeMapper() !== api.volumes[0]) {
     if (currentSlabThickness) {
       istyle.setSlabThickness(currentSlabThickness);
     }
@@ -161,7 +165,7 @@ const actions = {
   },
   enableRotateTool: () => {
     apis.forEach(api => {
-      const istyle = vtkInteractorStyleMPRSlice.newInstance();
+      const istyle = vtkInteractorStyleMPRRotate.newInstance();
 
       switchMPRInteractors(api, istyle);
     });
@@ -182,7 +186,7 @@ const actions = {
       switchMPRInteractors(api, istyle);
     });
   },
-  setSlabThickness: slabThickness => {
+  setSlabThickness: ({ slabThickness }) => {
     currentSlabThickness = slabThickness;
 
     apis.forEach(api => {
@@ -191,15 +195,6 @@ const actions = {
 
       if (istyle.setSlabThickness) {
         istyle.setSlabThickness(currentSlabThickness);
-
-        // TODO: Do this inside the interactors in a setSlabThickness function instead
-        const renderer = api.genericRenderWindow.getRenderer();
-        const camera = renderer.getActiveCamera();
-        const dist = camera.getDistance();
-        const near = dist - currentSlabThickness / 2;
-        const far = dist + currentSlabThickness / 2;
-
-        camera.setClippingRange(near, far);
       }
 
       renderWindow.render();
@@ -220,6 +215,32 @@ const actions = {
       renderWindow.render();
     });
   },
+  setBlendModeToComposite: () => {
+    apis.forEach(api => {
+      const renderWindow = api.genericRenderWindow.getRenderWindow();
+      const istyle = renderWindow.getInteractor().getInteractorStyle();
+
+      const mapper = api.volumes[0].getMapper();
+      if (mapper.setBlendModeToComposite) {
+        mapper.setBlendModeToComposite();
+      }
+
+      if (istyle.setSlabThickness) {
+        istyle.setSlabThickness(defaultSlabThickness);
+      }
+      renderWindow.render();
+    });
+  },
+  setBlendModeToMaximumIntensity: () => {
+    apis.forEach(api => {
+      const renderWindow = api.genericRenderWindow.getRenderWindow();
+      const mapper = api.volumes[0].getMapper();
+      if (mapper.setBlendModeToMaximumIntensity) {
+        mapper.setBlendModeToMaximumIntensity();
+      }
+      renderWindow.render();
+    });
+  },
   setBlendMode: ({ blendMode }) => {
     apis.forEach(api => {
       const renderWindow = api.genericRenderWindow.getRenderWindow();
@@ -243,16 +264,19 @@ const actions = {
 
     apis = apiByViewport;
 
-    /*const rgbTransferFunction = apiByViewport[0].volumes[0]
+    const rgbTransferFunction = apiByViewport[0].volumes[0]
       .getProperty()
       .getRGBTransferFunction(0);
-    rgbTransferFunction.onModified(() => {
+
+    const onModifiedSubscription = rgbTransferFunction.onModified(() => {
       apiByViewport.forEach(a => {
         const renderWindow = a.genericRenderWindow.getRenderWindow();
 
         renderWindow.render();
       });
-    });*/
+    });
+
+    vtkViewportSubscriptionManager.pushSubscription(0, onModifiedSubscription);
 
     apiByViewport.forEach((api, index) => {
       const renderWindow = api.genericRenderWindow.getRenderWindow();
@@ -284,18 +308,18 @@ const actions = {
         case 0:
           //Axial
           istyle.setSliceNormal(0, 0, 1);
-          camera.setViewUp(0, -1, 0);
+          istyle.setViewUp(0, -1, 0);
 
           break;
         case 1:
           // sagittal
           istyle.setSliceNormal(1, 0, 0);
-          camera.setViewUp(0, 0, 1);
+          istyle.setViewUp(0, 0, 1);
           break;
         case 2:
           // Coronal
           istyle.setSliceNormal(0, 1, 0);
-          camera.setViewUp(0, 0, 1);
+          istyle.setViewUp(0, 0, 1);
           break;
       }
 
@@ -338,12 +362,12 @@ const definitions = {
     options: {},
   },
   setBlendModeToComposite: {
-    commandFn: actions.setBlendMode,
+    commandFn: actions.setBlendModeToComposite,
     storeContexts: [],
     options: { blendMode: BlendMode.COMPOSITE_BLEND },
   },
   setBlendModeToMaximumIntensity: {
-    commandFn: actions.setBlendMode,
+    commandFn: actions.setBlendModeToMaximumIntensity,
     storeContexts: [],
     options: { blendMode: BlendMode.MAXIMUM_INTENSITY_BLEND },
   },

extensions/vtk/src/index.js

@@ -1,9 +1,13 @@
-import OHIFVTKViewport from './OHIFVTKViewport.js';
+import asyncComponent from './asyncComponent.js';
 import commandsModule from './commandsModule.js';
 import toolbarModule from './toolbarModule.js';
 // This feels weird
 // import loadLocales from './loadLocales';
 
+const OHIFVTKViewport = asyncComponent(() =>
+  import(/* webpackChunkName: "OHIFVTKViewport" */ './OHIFVTKViewport.js')
+);
+
 const vtkExtension = {
   /**
    * Only required property. Should be a unique value across all extensions.

extensions/vtk/src/toolbarComponents/SlabThicknessToolbarComponent.js

@@ -0,0 +1,207 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Range, Checkbox, Select } from '@ohif/ui';
+
+import './slab-thickness-toolbar-button.styl';
+
+const SLIDER = {
+  MIN: 0.1,
+  MAX: 1000,
+  STEP: 0.1,
+};
+
+const ToolbarLabel = props => {
+  const { label } = props;
+  return <div className="toolbar-button-label">{label}</div>;
+};
+
+const ToolbarSlider = props => {
+  const { value, min, max, onChange } = props;
+  return (
+    <div className="toolbar-slider-container">
+      <label htmlFor="toolbar-slider">{value}mm</label>
+      <Range
+        value={value}
+        min={min}
+        max={max}
+        step={SLIDER.STEP}
+        onChange={onChange}
+        id="toolbar-slider"
+      />
+    </div>
+  );
+};
+
+const _getSelectOptions = button => {
+  return button.operationButtons.map(button => {
+    return {
+      key: button.label,
+      value: button.id,
+    };
+  });
+};
+
+const _getClassNames = (isActive, className) => {
+  return classnames('toolbar-button', 'slab-thickness', className, {
+    active: isActive,
+  });
+};
+
+const _applySlabThickness = (
+  value,
+  modeChecked,
+  toolbarClickCallback,
+  button
+) => {
+  if (!modeChecked || !toolbarClickCallback) {
+    return;
+  }
+
+  const { actionButton } = button;
+
+  const generateOperation = (operation, value) => {
+    // Combine slider value into slider operation
+    const generatedOperation = { ...operation };
+    generatedOperation.commandOptions = {
+      ...operation.commandOptions,
+      slabThickness: value,
+    };
+
+    return generatedOperation;
+  };
+
+  const operation = generateOperation(actionButton, value);
+  toolbarClickCallback(operation, event);
+};
+
+const _applyModeOperation = (
+  operation,
+  modeChecked,
+  toolbarClickCallback,
+  button
+) => {
+  // in case modeChecked has not being triggered by user yet
+  if (typeof modeChecked !== 'boolean') {
+    return;
+  }
+
+  const { deactivateButton } = button;
+
+  const _operation = modeChecked ? operation : deactivateButton;
+  if (toolbarClickCallback && _operation) {
+    toolbarClickCallback(_operation);
+  }
+};
+
+const _getInitialState = currentSelectedOption => {
+  return {
+    value: SLIDER.MIN,
+    sliderMin: SLIDER.MIN,
+    sliderMax: SLIDER.MAX,
+    modeChecked: undefined,
+    operation: currentSelectedOption,
+  };
+};
+
+const INITIAL_OPTION_INDEX = 0;
+const _getInitialtSelectedOption = (button = {}) => {
+  return (
+    button.operationButtons && button.operationButtons[INITIAL_OPTION_INDEX]
+  );
+};
+
+function SlabThicknessToolbarComponent({
+  parentContext,
+  toolbarClickCallback,
+  button,
+  activeButtons,
+  isActive,
+  className,
+}) {
+  const currentSelectedOption = _getInitialtSelectedOption(button);
+  const [state, setState] = useState(_getInitialState(currentSelectedOption));
+  const { label, operationButtons } = button;
+  const _className = _getClassNames(isActive, className);
+  const selectOptions = _getSelectOptions(button);
+  function onChangeSelect(selectedValue) {
+    // find select value
+    const operation = operationButtons.find(
+      button => button.id === selectedValue
+    );
+
+    if (operation === state.operation) {
+      return;
+    }
+
+    setState({ ...state, operation });
+  }
+
+  function onChangeCheckbox(checked) {
+    setState({ ...state, modeChecked: checked });
+  }
+
+  function onChangeSlider(event) {
+    const value = Number(event.target.value);
+
+    if (value !== state.value) {
+      setState({ ...state, value, modeChecked: true });
+    }
+  }
+
+  useEffect(() => {
+    _applyModeOperation(
+      state.operation,
+      state.modeChecked,
+      toolbarClickCallback,
+      button
+    );
+  }, [state.modeChecked, state.operation]);
+
+  useEffect(() => {
+    _applySlabThickness(
+      state.value,
+      state.modeChecked,
+      toolbarClickCallback,
+      button
+    );
+  }, [state.operation, state.modeChecked, state.value]);
+
+  return (
+    <div className={_className}>
+      <div className="container">
+        <ToolbarSlider
+          value={state.value}
+          min={state.sliderMin}
+          max={state.sliderMax}
+          onChange={onChangeSlider}
+        />
+        <ToolbarLabel key="toolbar-label" label={label} />
+      </div>
+      <div className="controller">
+        <Checkbox
+          label="mode"
+          checked={state.modeChecked}
+          onChange={onChangeCheckbox}
+        ></Checkbox>
+        <Select
+          key="toolbar-select"
+          options={selectOptions}
+          value={selectOptions[INITIAL_OPTION_INDEX].value}
+          onChange={onChangeSelect}
+        ></Select>
+      </div>
+    </div>
+  );
+}
+
+SlabThicknessToolbarComponent.propTypes = {
+  parentContext: PropTypes.object.isRequired,
+  toolbarClickCallback: PropTypes.func.isRequired,
+  button: PropTypes.object.isRequired,
+  activeButtons: PropTypes.array.isRequired,
+  isActive: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default SlabThicknessToolbarComponent;

extensions/vtk/src/toolbarComponents/slab-thickness-toolbar-button.styl

@@ -0,0 +1,55 @@
+.slab-thickness
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  height: 60px;
+  margin-top: -12px;
+  &:hover
+    color: var(--default-color);
+  .container
+    padding-right: 10px;
+    height: inherit;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .toolbar-slider-container
+      width: 80px;
+      margin: 0px 2px 2px 2px;
+      font-size: 12px;
+      &:hover
+        color: var(--hover-color);
+      input
+        height: 20px;
+        padding-top: 6px;
+        &::-moz-range-thumb
+          height: 16px;
+          margin-top: -7px;
+        &::-webkit-slider-thumb
+          height: 16px;
+          margin-top: -7px;
+  .controller
+    width: 62px;
+    .ohif-check-container
+      margin-bottom: 5px;
+      padding-left: 18px;
+      .ohif-check-label
+        text-transform: capitalize;
+        &:hover
+          color: var(--hover-color);
+        .ohif-checkbox
+          border-radius: 3px;
+          background-color: white;
+          width: 12px;
+          height: 12px;
+          top: 22%;
+          &.ohif-checked:after
+            background-color: var(--active-color);
+            top: 17%;
+            left: 17%;
+    .select-ohif
+      color: var(--default-color);
+      border-color: var(--default-color);
+      background-color: black;
+      background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
+      &:hover
+        color: var(--hover-color);

extensions/vtk/src/toolbarModule.js

@@ -1,3 +1,5 @@
+import SlabThicknessToolbarComponent from './toolbarComponents/SlabThicknessToolbarComponent';
+
 const TOOLBAR_BUTTON_TYPES = {
   COMMAND: 'command',
   SET_TOOL_ACTIVE: 'setToolActive',
@@ -31,6 +33,7 @@ const definitions = [
     commandName: 'enableRotateTool',
     commandOptions: {},
   },
+  /*
   {
     id: 'setBlendModeToComposite',
     label: 'Disable MIP',
@@ -68,6 +71,50 @@ const definitions = [
     commandName: 'decreaseSlabThickness',
     commandOptions: {},
   },
+  */
+  {
+    id: 'changeSlabThickness',
+    label: 'Slab Thickness',
+    icon: 'soft-tissue',
+    CustomComponent: SlabThicknessToolbarComponent,
+    commandName: 'setSlabThickness',
+    actionButton: {
+      id: 'setSlabThickness',
+      label: 'slider',
+      type: TOOLBAR_BUTTON_TYPES.COMMAND,
+      commandName: 'setSlabThickness',
+      commandOptions: {},
+    },
+    deactivateButton: {
+      id: 'setBlendModeToComposite',
+      type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+      commandName: 'setBlendModeToComposite',
+      commandOptions: {},
+    },
+    operationButtons: [
+      {
+        id: 'setBlendModeToMaximumIntensity',
+        label: 'MIP',
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setBlendModeToMaximumIntensity',
+        commandOptions: {},
+      },
+      {
+        id: 'setBlendModeToMinimumIntensity',
+        label: 'MinIP',
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setBlendModeToMinimumIntensity',
+        commandOptions: {},
+      },
+      {
+        id: 'setBlendModeToAverageIntensity',
+        label: 'AvgIP',
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setBlendModeToAverageIntensity',
+        commandOptions: {},
+      },
+    ],
+  },
 ];
 
 export default {

extensions/vtk/src/utils/vtkViewportSubscriptionManager.js

@@ -0,0 +1,28 @@
+const subscriptions = [];
+
+// This is pretty hacky right now, but it makes sure we don't keep adding subscriptions.
+// TODO -> Nuke this and move it up a layer once we have more vigorous layout support.
+
+const vtkViewportSubscriptionManager = {
+  subscriptions,
+  pushSubscription(viewportIndex, subscription) {
+    if (!Array.isArray(subscriptions[viewportIndex])) {
+      subscriptions[viewportIndex] = [];
+    }
+
+    subscriptions[viewportIndex].push(subscription);
+  },
+  unsubscribe(viewportIndex) {
+    if (!subscriptions[viewportIndex]) {
+      return;
+    }
+
+    while (subscriptions[viewportIndex].length) {
+      subscriptions[viewportIndex].pop().unsubscribe();
+    }
+
+    subscriptions[viewportIndex] = null;
+  },
+};
+
+export default vtkViewportSubscriptionManager;

package.json

@@ -13,6 +13,7 @@
   "scripts": {
     "cm": "npx git-cz",
     "build": "lerna run build:viewer --stream",
+    "build:e2e": "lerna run build:viewer:e2e --stream",
     "build:ci": "lerna run build:viewer:ci --stream",
     "build:demo": "lerna run build:viewer:demo --stream",
     "build:package": "lerna run build:viewer:package --stream",
@@ -21,6 +22,7 @@
     "dev:project": ".scripts/dev.sh",
     "dev:orthanc": "lerna run dev:orthanc --stream",
     "orthanc:up": "docker-compose -f .docker/Nginx-Orthanc/docker-compose.yml up",
+    "start": "yarn run dev",
     "test": "yarn run test:unit",
     "test:unit": "jest --collectCoverage",
     "test:unit:ci": "lerna run test:unit:ci --parallel --stream",
@@ -89,7 +91,7 @@
     "stylelint-config-recommended": "^2.2.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
-    "terser-webpack-plugin": "^1.4.1",
+    "terser-webpack-plugin": "^2.1.0",
     "webpack": "^4.35.2",
     "webpack-cli": "^3.3.5",
     "webpack-dev-server": "^3.7.2",
@@ -98,6 +100,17 @@
     "workbox-webpack-plugin": "^4.3.1",
     "worker-loader": "^2.0.0"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,json,css}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
   "resolutions": {
     "**/@babel/runtime": "7.5.5"
   }

platform/core/CHANGELOG.md

@@ -3,6 +3,104 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.3.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.2.0...@ohif/core@1.3.0) (2019-10-11)
+
+
+### Features
+
+* 🎸 Improve usability of Google Cloud adapter, including direct routes to studies ([#989](https://github.com/OHIF/Viewers/issues/989)) ([2bc361c](https://github.com/OHIF/Viewers/commit/2bc361c))
+
+
+
+
+
+# [1.2.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.1.0...@ohif/core@1.2.0) (2019-10-09)
+
+
+### Bug Fixes
+
+* OHIF-1002 Study lazy load should be true by default ([#1004](https://github.com/OHIF/Viewers/issues/1004)) ([66d8bc6](https://github.com/OHIF/Viewers/commit/66d8bc6))
+
+
+### Features
+
+* Allow a server requestOptions.auth to be a function that returns the Authorization header. ([#928](https://github.com/OHIF/Viewers/issues/928)) ([0064a4b](https://github.com/OHIF/Viewers/commit/0064a4b))
+
+
+
+
+
+# [1.1.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.0.2...@ohif/core@1.1.0) (2019-10-03)
+
+
+### Features
+
+* Use QIDO + WADO to load series metadata individually rather than the entire study metadata at once ([#953](https://github.com/OHIF/Viewers/issues/953)) ([9e10c2b](https://github.com/OHIF/Viewers/commit/9e10c2b))
+
+
+
+
+
+## [1.0.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.0.1...@ohif/core@1.0.2) (2019-10-02)
+
+
+### Bug Fixes
+
+* Temporarily sort SEG files to the end of the display set list as a workaround for several metadata issues ([#987](https://github.com/OHIF/Viewers/issues/987)) ([b3b4c10](https://github.com/OHIF/Viewers/commit/b3b4c10))
+
+
+
+
+
+## [1.0.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.0.0...@ohif/core@1.0.1) (2019-09-27)
+
+
+### Bug Fixes
+
+* Check for Value in 00081155 sequence (Few patient protocol images doesn't have this value) and removed a duplicate declaration ([#921](https://github.com/OHIF/Viewers/issues/921)) ([d0ec9cf](https://github.com/OHIF/Viewers/commit/d0ec9cf))
+
+
+
+
+
+# [1.0.0](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.10...@ohif/core@1.0.0) (2019-09-27)
+
+
+### Bug Fixes
+
+* 🐛 Add DicomLoaderService & FileLoaderService to fix SR, PDF, and SEG support in local file and WADO-RS-only use cases ([#862](https://github.com/OHIF/Viewers/issues/862)) ([e7e1a8a](https://github.com/OHIF/Viewers/commit/e7e1a8a)), closes [#838](https://github.com/OHIF/Viewers/issues/838)
+
+
+### BREAKING CHANGES
+
+* DICOM Seg
+
+
+
+
+
+## [0.50.10](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.9...@ohif/core@0.50.10) (2019-09-23)
+
+
+### Bug Fixes
+
+* Avoid using variable name "module" ([#942](https://github.com/OHIF/Viewers/issues/942)) ([72427fe](https://github.com/OHIF/Viewers/commit/72427fe)), closes [#940](https://github.com/OHIF/Viewers/issues/940)
+
+
+
+
+
+## [0.50.9](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.8...@ohif/core@0.50.9) (2019-09-17)
+
+
+### Bug Fixes
+
+* bump cornerstone-tools version in peerDeps ([4afc88c](https://github.com/OHIF/Viewers/commit/4afc88c))
+
+
+
+
+
 ## [0.50.8](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.7...@ohif/core@0.50.8) (2019-09-10)
 
 **Note:** Version bump only for package @ohif/core

platform/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/core",
-  "version": "0.50.8",
+  "version": "1.3.0",
   "description": "Generic business logic for web-based medical imaging applications",
   "author": "OHIF Core Team",
   "license": "MIT",
@@ -32,7 +32,7 @@
   },
   "peerDependencies": {
     "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "^4.0.0",
+    "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dicom-parser": "^1.8.3"
   },

platform/core/src/DICOMWeb/getAuthorizationHeader.js

@@ -9,7 +9,7 @@ import user from '../user';
  * @export
  * @param {Object} [server={}]
  * @param {Object} [server.requestOptions]
- * @param {string} [server.requestOptions.auth]
+ * @param {string|function} [server.requestOptions.auth]
  * @returns {Object} { Authorization }
  */
 export default function getAuthorizationHeader({ requestOptions } = {}) {
@@ -19,8 +19,13 @@ export default function getAuthorizationHeader({ requestOptions } = {}) {
   const accessToken = user && user.getAccessToken && user.getAccessToken();
 
   if (requestOptions && requestOptions.auth) {
-    // HTTP Basic Auth (user:password)
-    headers.Authorization = `Basic ${btoa(requestOptions.auth)}`;
+    if (typeof requestOptions.auth === 'function') {
+      // Custom Auth Header
+      headers.Authorization = requestOptions.auth(requestOptions);
+    } else {
+      // HTTP Basic Auth (user:password)
+      headers.Authorization = `Basic ${btoa(requestOptions.auth)}`;
+    }
   } else if (accessToken) {
     headers.Authorization = `Bearer ${accessToken}`;
   }

platform/core/src/DICOMWeb/getAuthorizationHeader.test.js

@@ -7,10 +7,7 @@ describe('getAuthorizationHeader', () => {
   it('should return a HTTP Basic Auth when server contains requestOptions.auth', () => {
     const validServer = {
       requestOptions: {
-        auth: {
-          user: 'dummy_user',
-          password: 'dummy_password',
-        },
+        auth: 'dummy_user:dummy_password',
       },
     };
 
@@ -26,9 +23,7 @@ describe('getAuthorizationHeader', () => {
   it('should return a HTTP Basic Auth when server contains requestOptions.auth even though there is no password', () => {
     const validServerWithoutPassword = {
       requestOptions: {
-        auth: {
-          user: 'dummy_user',
-        },
+        auth: 'dummy_user',
       },
     };
 
@@ -43,22 +38,19 @@ describe('getAuthorizationHeader', () => {
     expect(authentication).toEqual(expectedAuthorizationHeader);
   });
 
-  it('should return a HTTP Basic Auth when server contains requestOptions.auth even though there is no username', () => {
-    const validServerWithoutPassword = {
+  it('should return a HTTP Basic Auth when server contains requestOptions.auth custom function', () => {
+    const validServerCustomAuth = {
       requestOptions: {
-        auth: {
-          user: 'dummy_user',
-        },
+        auth: options => `Basic ${options.token}`,
+        token: 'ZHVtbXlfdXNlcjpkdW1teV9wYXNzd29yZA==',
       },
     };
 
     const expectedAuthorizationHeader = {
-      Authorization: `Basic ${btoa(
-        validServerWithoutPassword.requestOptions.auth
-      )}`,
+      Authorization: `Basic ${validServerCustomAuth.requestOptions.token}`,
     };
 
-    const authentication = getAuthorizationHeader(validServerWithoutPassword);
+    const authentication = getAuthorizationHeader(validServerCustomAuth);
 
     expect(authentication).toEqual(expectedAuthorizationHeader);
   });

platform/core/src/__mocks__/dicomweb-client.js

@@ -1,10 +1,12 @@
 // import { api } from 'dicomweb-client'
 
 const api = {
-  DICOMwebClient: jest.fn().mockImplementation(() => {
-    return {
-      retrieveStudyMetadata: jest.fn().mockResolvedValue([]),
-    };
+  DICOMwebClient: jest.fn().mockImplementation(function() {
+    this.retrieveStudyMetadata = jest.fn().mockResolvedValue([]);
+    this.retrieveSeriesMetadata = jest.fn(function(options) {
+      const { studyInstanceUID, seriesInstanceUID } = options;
+      return Promise.resolve([{ studyInstanceUID, seriesInstanceUID }]);
+    });
   }),
 };
 

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

@@ -8,7 +8,8 @@ import { SeriesMetadata } from './SeriesMetadata';
 // - createStacks
 import { api } from 'dicomweb-client';
 // - createStacks
-import { isImage } from './../../utils/isImage';
+import { isImage } from '../../utils/isImage';
+import isLowPriorityModality from '../../utils/isLowPriorityModality';
 
 export class StudyMetadata extends Metadata {
   constructor(data, uid) {
@@ -88,6 +89,100 @@ export class StudyMetadata extends Metadata {
     return this._displaySets.slice();
   }
 
+  /**
+   * Split a series metadata object into display sets
+   * @param {Array} sopClassHandlerModules List of SOP Class Modules
+   * @param {SeriesMetadata} series The series metadata object from which the display sets will be created
+   * @param {Array} [givenDisplaySets] An optional list to which the display sets will be appended
+   * @returns {Array} The list of display sets created for the given series object
+   */
+  _createDisplaySetsForSeries(
+    sopClassHandlerModules,
+    series,
+    givenDisplaySets
+  ) {
+    const study = this;
+    const displaySets = Array.isArray(givenDisplaySets) ? givenDisplaySets : [];
+    const anyInstances = series.getInstanceCount() > 0;
+
+    if (!anyInstances) {
+      return;
+    }
+
+    const sopClassUids = getSopClassUids(series);
+
+    if (sopClassHandlerModules && sopClassHandlerModules.length > 0) {
+      const displaySet = _getDisplaySetFromSopClassModule(
+        sopClassHandlerModules,
+        series,
+        study,
+        sopClassUids
+      );
+      if (displaySet) {
+        displaySet.sopClassModule = true;
+        displaySets.push(displaySet);
+        return;
+      }
+    }
+
+    // WE NEED A BETTER WAY TO NOTE THAT THIS IS THE DEFAULT BEHAVIOR FOR LOADING
+    // A DISPLAY SET IF THERE IS NO MATCHING SOP CLASS PLUGIN
+
+    // Search through the instances (InstanceMetadata object) of this series
+    // Split Multi-frame instances and Single-image modalities
+    // into their own specific display sets. Place the rest of each
+    // series into another display set.
+    const stackableInstances = [];
+    series.forEachInstance(instance => {
+      // All imaging modalities must have a valid value for sopClassUid (x00080016) or rows (x00280010)
+      if (
+        !isImage(instance.getRawValue('x00080016')) &&
+        !instance.getRawValue('x00280010')
+      ) {
+        return;
+      }
+
+      let displaySet;
+
+      if (isMultiFrame(instance)) {
+        displaySet = makeDisplaySet(series, [instance]);
+        displaySet.setAttributes({
+          sopClassUids,
+          isClip: true,
+          seriesInstanceUid: series.getSeriesInstanceUID(),
+          studyInstanceUid: study.getStudyInstanceUID(), // Include the study instance Uid for drag/drop purposes
+          numImageFrames: instance.getRawValue('x00280008'), // Override the default value of instances.length
+          instanceNumber: instance.getRawValue('x00200013'), // Include the instance number
+          acquisitionDatetime: instance.getRawValue('x0008002a'), // Include the acquisition datetime
+        });
+        displaySets.push(displaySet);
+      } else if (isSingleImageModality(instance.modality)) {
+        displaySet = makeDisplaySet(series, [instance]);
+        displaySet.setAttributes({
+          sopClassUids,
+          studyInstanceUid: study.getStudyInstanceUID(), // Include the study instance Uid
+          seriesInstanceUid: series.getSeriesInstanceUID(),
+          instanceNumber: instance.getRawValue('x00200013'), // Include the instance number
+          acquisitionDatetime: instance.getRawValue('x0008002a'), // Include the acquisition datetime
+        });
+        displaySets.push(displaySet);
+      } else {
+        stackableInstances.push(instance);
+      }
+    });
+
+    if (stackableInstances.length) {
+      const displaySet = makeDisplaySet(series, stackableInstances);
+      displaySet.setAttribute('studyInstanceUid', study.getStudyInstanceUID());
+      displaySet.setAttributes({
+        sopClassUids,
+      });
+      displaySets.push(displaySet);
+    }
+
+    return displaySets;
+  }
+
   /**
    * Creates a set of series to be placed in the Study Metadata
    * The series that appear in the Study Metadata must represent
@@ -101,103 +196,44 @@ export class StudyMetadata extends Metadata {
    * @returns {Array} An array of series to be placed in the Study Metadata
    */
   createDisplaySets(sopClassHandlerModules) {
-    const study = this;
     const displaySets = [];
-    const anyDisplaySets = study.getSeriesCount();
-    const anySopClassHandlerModules =
-      sopClassHandlerModules && sopClassHandlerModules.length > 0;
+    const anyDisplaySets = this.getSeriesCount();
 
     if (!anyDisplaySets) {
       return displaySets;
     }
 
     // Loop through the series (SeriesMetadata)
-    this.forEachSeries(series => {
-      const anyInstances = series.getInstanceCount() > 0;
-      if (!anyInstances) {
-        return;
-      }
-
-      const sopClassUids = getSopClassUids(series);
-
-      if (anySopClassHandlerModules) {
-        const displaySet = _getDisplaySetFromSopClassModule(
+    this.forEachSeries(
+      series =>
+        void this._createDisplaySetsForSeries(
           sopClassHandlerModules,
           series,
-          study,
-          sopClassUids
-        );
+          displaySets
+        )
+    );
 
-        if (displaySet) {
-          displaySets.push(displaySet);
+    return sortDisplaySetList(displaySets);
+  }
 
-          return;
-        }
-      }
+  sortDisplaySets() {
+    sortDisplaySetList(this._displaySets);
+  }
 
-      // WE NEED A BETTER WAY TO NOTE THAT THIS IS THE DEFAULT BEHAVIOR FOR LOADING
-      // A DISPLAY SET IF THERE IS NO MATCHING SOP CLASS PLUGIN
-
-      // Search through the instances (InstanceMetadata object) of this series
-      // Split Multi-frame instances and Single-image modalities
-      // into their own specific display sets. Place the rest of each
-      // series into another display set.
-      const stackableInstances = [];
-      series.forEachInstance(instance => {
-        // All imaging modalities must have a valid value for sopClassUid (x00080016) or rows (x00280010)
-        if (
-          !isImage(instance.getRawValue('x00080016')) &&
-          !instance.getRawValue('x00280010')
-        ) {
-          return;
-        }
-
-        let displaySet;
-
-        if (isMultiFrame(instance)) {
-          displaySet = makeDisplaySet(series, [instance]);
-          displaySet.setAttributes({
-            sopClassUids,
-            isClip: true,
-            seriesInstanceUid: series.getSeriesInstanceUID(),
-            studyInstanceUid: study.getStudyInstanceUID(), // Include the study instance Uid for drag/drop purposes
-            numImageFrames: instance.getRawValue('x00280008'), // Override the default value of instances.length
-            instanceNumber: instance.getRawValue('x00200013'), // Include the instance number
-            acquisitionDatetime: instance.getRawValue('x0008002a'), // Include the acquisition datetime
-          });
-          displaySets.push(displaySet);
-        } else if (isSingleImageModality(instance.modality)) {
-          displaySet = makeDisplaySet(series, [instance]);
-          displaySet.setAttributes({
-            sopClassUids,
-            studyInstanceUid: study.getStudyInstanceUID(), // Include the study instance Uid
-            seriesInstanceUid: series.getSeriesInstanceUID(),
-            instanceNumber: instance.getRawValue('x00200013'), // Include the instance number
-            acquisitionDatetime: instance.getRawValue('x0008002a'), // Include the acquisition datetime
-          });
-          displaySets.push(displaySet);
-        } else {
-          stackableInstances.push(instance);
-        }
-      });
-
-      if (stackableInstances.length) {
-        const displaySet = makeDisplaySet(series, stackableInstances);
-        displaySet.setAttribute(
-          'studyInstanceUid',
-          study.getStudyInstanceUID()
-        );
-        displaySet.setAttributes({
-          sopClassUids,
-        });
-        displaySets.push(displaySet);
-      }
-    });
-
-    // TODO
-    displaySets.sort(_sortBySeriesNumber);
-
-    return displaySets;
+  /**
+   * Method to append display sets from a given series to the internal list of display sets
+   * @param {Array} sopClassHandlerModules A list of SOP Class Handler Modules
+   * @param {SeriesMetadata} series The series metadata object from which the display sets will be created
+   * @returns {boolean} Returns true on success or false on failure (e.g., the series does not belong to this study)
+   */
+  createAndAddDisplaySetsForSeries(sopClassHandlerModules, series) {
+    if (this.containsSeries(series)) {
+      this.setDisplaySets(
+        this._createDisplaySetsForSeries(sopClassHandlerModules, series)
+      );
+      return true;
+    }
+    return false;
   }
 
   /**
@@ -205,7 +241,10 @@ export class StudyMetadata extends Metadata {
    * @param {Array} displaySets Array of display sets (ImageSet[])
    */
   setDisplaySets(displaySets) {
-    displaySets.forEach(displaySet => this.addDisplaySet(displaySet));
+    if (Array.isArray(displaySets) && displaySets.length > 0) {
+      displaySets.forEach(displaySet => this.addDisplaySet(displaySet));
+      this.sortDisplaySets();
+    }
   }
 
   /**
@@ -214,7 +253,7 @@ export class StudyMetadata extends Metadata {
    * @returns {boolean} True on success, false on failure.
    */
   addDisplaySet(displaySet) {
-    if (displaySet instanceof ImageSet) {
+    if (displaySet instanceof ImageSet || displaySet.sopClassModule) {
       this._displaySets.push(displaySet);
       return true;
     }
@@ -319,6 +358,12 @@ export class StudyMetadata extends Metadata {
     return found;
   }
 
+  containsSeries(series) {
+    return (
+      series instanceof SeriesMetadata && this._series.indexOf(series) >= 0
+    );
+  }
+
   /**
    * Retrieve the number of series within the current study.
    * @returns {number} The number of series in the current study.
@@ -649,13 +694,51 @@ function _getDisplaySetFromSopClassModule(
 }
 
 /**
+ * Sort series primarily by modality (i.e., series with references to other
+ * series like SEG, KO or PR are grouped in the end of the list) and then by
+ * series number:
+ *
+ *  --------
+ * | CT #3  |
+ * | CT #4  |
+ * | CT #5  |
+ *  --------
+ * | SEG #1 |
+ * | SEG #2 |
+ *  --------
  *
  * @param {*} a - DisplaySet
  * @param {*} b - DisplaySet
  */
-function _sortBySeriesNumber(a, b) {
+
+function seriesSortingCriteria(a, b) {
+  const isLowPriorityA = isLowPriorityModality(a.modality);
+  const isLowPriorityB = isLowPriorityModality(b.modality);
+  if (!isLowPriorityA && isLowPriorityB) {
+    return -1;
+  }
+  if (isLowPriorityA && !isLowPriorityB) {
+    return 1;
+  }
+  return sortBySeriesNumber(a, b);
+}
+
+/**
+ * Sort series by series number. Series with low
+ * @param {*} a - DisplaySet
+ * @param {*} b - DisplaySet
+ */
+function sortBySeriesNumber(a, b) {
   const seriesNumberAIsGreaterOrUndefined =
     a.seriesNumber > b.seriesNumber || (!a.seriesNumber && b.seriesNumber);
 
   return seriesNumberAIsGreaterOrUndefined ? 1 : -1;
 }
+
+/**
+ * Sorts a list of display set objects
+ * @param {Array} list A list of display sets to be sorted
+ */
+function sortDisplaySetList(list) {
+  return list.sort(seriesSortingCriteria);
+}

platform/core/src/redux/index.js

@@ -1,11 +1,13 @@
 import actions from './actions.js';
 import reducers from './reducers';
 import localStorage from './localStorage.js';
+import sessionStorage from './sessionStorage.js';
 
 const redux = {
   reducers,
   actions,
   localStorage,
+  sessionStorage,
 };
 
 export default redux;

platform/core/src/redux/index.test.js

@@ -2,7 +2,7 @@ import redux from './index.js';
 
 describe('redux exports', () => {
   test('have not changed', () => {
-    const expectedExports = ['actions', 'reducers', 'localStorage'].sort();
+    const expectedExports = ['actions', 'reducers', 'localStorage', 'sessionStorage'].sort();
 
     const exports = Object.keys(redux).sort();
 

platform/core/src/redux/localStorage.js

@@ -1,6 +1,8 @@
+const LocalStorageApi = window.localStorage;
+const localStorageKey = 'state';
 export const loadState = () => {
   try {
-    const serializedState = window.localStorage.getItem('state');
+    const serializedState = LocalStorageApi.getItem(localStorageKey);
     if (!serializedState) {
       return undefined;
     }
@@ -14,7 +16,7 @@ export const loadState = () => {
 export const saveState = state => {
   try {
     const serializedState = JSON.stringify(state);
-    localStorage.setItem('state', serializedState);
+    LocalStorageApi.setItem(localStorageKey, serializedState);
   } catch (e) {}
 };
 

platform/core/src/redux/sessionStorage.js

@@ -0,0 +1,28 @@
+const SessionStorageApi = window.sessionStorage;
+const sessionStorageKey = 'state';
+export const loadState = () => {
+  try {
+    const serializedState = SessionStorageApi.getItem(sessionStorageKey);
+    if (!serializedState) {
+      return undefined;
+    }
+
+    return JSON.parse(serializedState);
+  } catch (e) {
+    return undefined;
+  }
+};
+
+export const saveState = state => {
+  try {
+    const serializedState = JSON.stringify(state);
+    SessionStorageApi.setItem(sessionStorageKey, serializedState);
+  } catch (e) {}
+};
+
+const sessionStorage = {
+  saveState,
+  loadState,
+};
+
+export default sessionStorage;

platform/core/src/studies/retrieveStudyMetadata.js

@@ -1,6 +1,6 @@
 import RetrieveMetadata from './services/wado/retrieveMetadata.js';
 
-const module = 'RetrieveStudyMetadata';
+const moduleName = 'RetrieveStudyMetadata';
 // Cache for promises. Prevents unnecessary subsequent calls to the server
 const StudyMetaDataPromises = new Map();
 
@@ -17,11 +17,11 @@ export function retrieveStudyMetadata(server, studyInstanceUid) {
   // corresponding promise from the "StudyMetaDataPromises" map...
 
   if (!server) {
-    throw new Error(`${module}: Required 'server' parameter not provided.`);
+    throw new Error(`${moduleName}: Required 'server' parameter not provided.`);
   }
   if (!studyInstanceUid) {
     throw new Error(
-      `${module}: Required 'studyInstanceUid' parameter not provided.`
+      `${moduleName}: Required 'studyInstanceUid' parameter not provided.`
     );
   }
 

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

@@ -1,5 +1,8 @@
 import { api } from 'dicomweb-client';
 import DICOMWeb from '../../../DICOMWeb/';
+import isLowPriorityModality from '../../../utils/isLowPriorityModality';
+
+const INFO = Symbol('INFO');
 
 const WADOProxy = {
   convertURL: (url, server) => {
@@ -94,9 +97,7 @@ function buildInstanceWadoRsUri(
   seriesInstanceUid,
   sopInstanceUid
 ) {
-  return `${
-    server.wadoRoot
-  }/studies/${studyInstanceUid}/series/${seriesInstanceUid}/instances/${sopInstanceUid}`;
+  return `${server.wadoRoot}/studies/${studyInstanceUid}/series/${seriesInstanceUid}/instances/${sopInstanceUid}`;
 }
 
 function buildInstanceFrameWadoRsUri(
@@ -133,7 +134,8 @@ function getSourceImageInstanceUid(instance) {
   if (
     SourceImageSequence &&
     SourceImageSequence.Value &&
-    SourceImageSequence.Value.length
+    SourceImageSequence.Value.length &&
+    SourceImageSequence.Value[0]['00081155'].Value
   ) {
     return SourceImageSequence.Value[0]['00081155'].Value[0];
   }
@@ -165,9 +167,9 @@ function getPaletteColor(server, instance, tag, lutDescriptor) {
   };
 
   const arrayBufferToPaletteColorLUT = result => {
-    const arraybuffer = result[0]
-    const byteArray = new Uint8Array(arraybuffer)
-    const lut = []
+    const arraybuffer = result[0];
+    const byteArray = new Uint8Array(arraybuffer);
+    const lut = [];
 
     for (let i = 0; i < numLutEntries; i++) {
       if (bits === 16) {
@@ -270,200 +272,338 @@ function getRadiopharmaceuticalInfo(instance) {
   };
 }
 
+async function makeSOPInstance(server, study, instance) {
+  const { studyInstanceUid } = study;
+  const seriesInstanceUid = DICOMWeb.getString(instance['0020000E']);
+  let series = study.seriesMap[seriesInstanceUid];
+
+  if (!series) {
+    series = {
+      seriesInstanceUid,
+      seriesDescription: DICOMWeb.getString(instance['0008103E']),
+      modality: DICOMWeb.getString(instance['00080060']),
+      seriesNumber: DICOMWeb.getNumber(instance['00200011']),
+      seriesDate: DICOMWeb.getString(instance['00080021']),
+      seriesTime: DICOMWeb.getString(instance['00080031']),
+      instances: [],
+    };
+    study.seriesMap[seriesInstanceUid] = series;
+    study.seriesList.push(series);
+  }
+
+  const sopInstanceUid = DICOMWeb.getString(instance['00080018']);
+  const wadouri = buildInstanceWadoUrl(
+    server,
+    studyInstanceUid,
+    seriesInstanceUid,
+    sopInstanceUid
+  );
+  const baseWadoRsUri = buildInstanceWadoRsUri(
+    server,
+    studyInstanceUid,
+    seriesInstanceUid,
+    sopInstanceUid
+  );
+  const wadorsuri = buildInstanceFrameWadoRsUri(
+    server,
+    studyInstanceUid,
+    seriesInstanceUid,
+    sopInstanceUid
+  );
+
+  const sopInstance = {
+    imageType: DICOMWeb.getString(instance['00080008']),
+    sopClassUid: DICOMWeb.getString(instance['00080016']),
+    modality: DICOMWeb.getString(instance['00080060']),
+    sopInstanceUid,
+    instanceNumber: DICOMWeb.getNumber(instance['00200013']),
+    imagePositionPatient: DICOMWeb.getString(instance['00200032']),
+    imageOrientationPatient: DICOMWeb.getString(instance['00200037']),
+    frameOfReferenceUID: DICOMWeb.getString(instance['00200052']),
+    sliceLocation: DICOMWeb.getNumber(instance['00201041']),
+    samplesPerPixel: DICOMWeb.getNumber(instance['00280002']),
+    photometricInterpretation: DICOMWeb.getString(instance['00280004']),
+    planarConfiguration: DICOMWeb.getNumber(instance['00280006']),
+    rows: DICOMWeb.getNumber(instance['00280010']),
+    columns: DICOMWeb.getNumber(instance['00280011']),
+    pixelSpacing: DICOMWeb.getString(instance['00280030']),
+    pixelAspectRatio: DICOMWeb.getString(instance['00280034']),
+    bitsAllocated: DICOMWeb.getNumber(instance['00280100']),
+    bitsStored: DICOMWeb.getNumber(instance['00280101']),
+    highBit: DICOMWeb.getNumber(instance['00280102']),
+    pixelRepresentation: DICOMWeb.getNumber(instance['00280103']),
+    smallestPixelValue: DICOMWeb.getNumber(instance['00280106']),
+    largestPixelValue: DICOMWeb.getNumber(instance['00280107']),
+    windowCenter: DICOMWeb.getString(instance['00281050']),
+    windowWidth: DICOMWeb.getString(instance['00281051']),
+    rescaleIntercept: DICOMWeb.getNumber(instance['00281052']),
+    rescaleSlope: DICOMWeb.getNumber(instance['00281053']),
+    rescaleType: DICOMWeb.getNumber(instance['00281054']),
+    sourceImageInstanceUid: getSourceImageInstanceUid(instance),
+    laterality: DICOMWeb.getString(instance['00200062']),
+    viewPosition: DICOMWeb.getString(instance['00185101']),
+    acquisitionDateTime: DICOMWeb.getString(instance['0008002A']),
+    numberOfFrames: DICOMWeb.getNumber(instance['00280008']),
+    frameIncrementPointer: getFrameIncrementPointer(instance['00280009']),
+    frameTime: DICOMWeb.getNumber(instance['00181063']),
+    frameTimeVector: parseFloatArray(DICOMWeb.getString(instance['00181065'])),
+    sliceThickness: DICOMWeb.getNumber(instance['00180050']),
+    spacingBetweenSlices: DICOMWeb.getString(instance['00180088']),
+    lossyImageCompression: DICOMWeb.getString(instance['00282110']),
+    derivationDescription: DICOMWeb.getString(instance['00282111']),
+    lossyImageCompressionRatio: DICOMWeb.getString(instance['00282112']),
+    lossyImageCompressionMethod: DICOMWeb.getString(instance['00282114']),
+    echoNumber: DICOMWeb.getString(instance['00180086']),
+    contrastBolusAgent: DICOMWeb.getString(instance['00180010']),
+    radiopharmaceuticalInfo: getRadiopharmaceuticalInfo(instance),
+    baseWadoRsUri: baseWadoRsUri,
+    wadouri: WADOProxy.convertURL(wadouri, server),
+    wadorsuri: WADOProxy.convertURL(wadorsuri, server),
+    wadoRoot: server.wadoRoot,
+    imageRendering: server.imageRendering,
+    thumbnailRendering: server.thumbnailRendering,
+  };
+
+  // Get additional information if the instance uses "PALETTE COLOR" photometric interpretation
+  if (sopInstance.photometricInterpretation === 'PALETTE COLOR') {
+    const redPaletteColorLookupTableDescriptor = parseFloatArray(
+      DICOMWeb.getString(instance['00281101'])
+    );
+    const greenPaletteColorLookupTableDescriptor = parseFloatArray(
+      DICOMWeb.getString(instance['00281102'])
+    );
+    const bluePaletteColorLookupTableDescriptor = parseFloatArray(
+      DICOMWeb.getString(instance['00281103'])
+    );
+    const palettes = await getPaletteColors(
+      server,
+      instance,
+      redPaletteColorLookupTableDescriptor
+    );
+
+    if (palettes) {
+      if (palettes.uid) {
+        sopInstance.paletteColorLookupTableUID = palettes.uid;
+      }
+
+      sopInstance.redPaletteColorLookupTableData = palettes.red;
+      sopInstance.greenPaletteColorLookupTableData = palettes.green;
+      sopInstance.bluePaletteColorLookupTableData = palettes.blue;
+      sopInstance.redPaletteColorLookupTableDescriptor = redPaletteColorLookupTableDescriptor;
+      sopInstance.greenPaletteColorLookupTableDescriptor = greenPaletteColorLookupTableDescriptor;
+      sopInstance.bluePaletteColorLookupTableDescriptor = bluePaletteColorLookupTableDescriptor;
+    }
+  }
+
+  series.instances.push(sopInstance);
+  return sopInstance;
+}
+
+/**
+ * Create a plain JS object that describes a study (a study descriptor object)
+ * @param {Object} server Object with server configuration paramenters
+ * @param {Object} aSopInstance a SOP Instance from which study information will be added
+ */
+function createStudy(server, aSopInstance) {
+  // TODO: Pass a reference ID to the server instead of including the URLs here
+  return {
+    seriesList: [],
+    seriesMap: Object.create(null),
+    seriesLoader: null,
+    wadoUriRoot: server.wadoUriRoot,
+    wadoRoot: server.wadoRoot,
+    qidoRoot: server.qidoRoot,
+    patientName: DICOMWeb.getName(aSopInstance['00100010']),
+    patientId: DICOMWeb.getString(aSopInstance['00100020']),
+    patientAge: DICOMWeb.getNumber(aSopInstance['00101010']),
+    patientSize: DICOMWeb.getNumber(aSopInstance['00101020']),
+    patientWeight: DICOMWeb.getNumber(aSopInstance['00101030']),
+    accessionNumber: DICOMWeb.getString(aSopInstance['00080050']),
+    studyDate: DICOMWeb.getString(aSopInstance['00080020']),
+    modalities: DICOMWeb.getString(aSopInstance['00080061']),
+    studyDescription: DICOMWeb.getString(aSopInstance['00081030']),
+    imageCount: DICOMWeb.getString(aSopInstance['00201208']),
+    studyInstanceUid: DICOMWeb.getString(aSopInstance['0020000D']),
+    institutionName: DICOMWeb.getString(aSopInstance['00080080']),
+  };
+}
+
+/**
+ * Add a list of SOP Instances to a given study object descriptor
+ * @param {Object} server Object with server configuration paramenters
+ * @param {Object} study The study descriptor to which the given SOP instances will be added
+ * @param {Array} sopInstanceList A list of SOP instance objects
+ */
+async function addInstancesToStudy(server, study, sopInstanceList) {
+  return Promise.all(
+    sopInstanceList.map(function(sopInstance) {
+      return makeSOPInstance(server, study, sopInstance);
+    })
+  );
+}
+
 /**
  * Parses result data from a WADO search into Study MetaData
  * Returns an object populated with study metadata, including the
  * series list.
  *
- * @param server
- * @param studyInstanceUid
- * @param resultData
- * @returns {{seriesList: Array, patientName: *, patientId: *, accessionNumber: *, studyDate: *, modalities: *, studyDescription: *, imageCount: *, studyInstanceUid: *}}
+ * @param {Object} server Object with server configuration paramenters
+ * @param {Array} sopInstanceList List of SOP Instances that build up to the study
+ * @resolves {{seriesList: Array, patientName: *, patientId: *, accessionNumber: *, studyDate: *, modalities: *, studyDescription: *, imageCount: *, studyInstanceUid: *}}
  */
-async function resultDataToStudyMetadata(server, studyInstanceUid, resultData) {
-  if (!resultData.length) {
-    return;
+async function createStudyFromSOPInstanceList(server, sopInstanceList) {
+  if (Array.isArray(sopInstanceList) && sopInstanceList.length > 0) {
+    const firstSopInstance = sopInstanceList[0];
+    const study = createStudy(server, firstSopInstance);
+    await addInstancesToStudy(server, study, sopInstanceList);
+    return study;
   }
-
-  const anInstance = resultData[0];
-  if (!anInstance) {
-    return;
-  }
-
-  // TODO: Pass a reference ID to the server instead of including the URLs here
-  const studyData = {
-    seriesList: [],
-    studyInstanceUid,
-    wadoUriRoot: server.wadoUriRoot,
-    wadoRoot: server.wadoRoot,
-    qidoRoot: server.qidoRoot,
-    patientName: DICOMWeb.getName(anInstance['00100010']),
-    patientId: DICOMWeb.getString(anInstance['00100020']),
-    patientAge: DICOMWeb.getNumber(anInstance['00101010']),
-    patientSize: DICOMWeb.getNumber(anInstance['00101020']),
-    patientWeight: DICOMWeb.getNumber(anInstance['00101030']),
-    accessionNumber: DICOMWeb.getString(anInstance['00080050']),
-    studyDate: DICOMWeb.getString(anInstance['00080020']),
-    modalities: DICOMWeb.getString(anInstance['00080061']),
-    studyDescription: DICOMWeb.getString(anInstance['00081030']),
-    imageCount: DICOMWeb.getString(anInstance['00201208']),
-    studyInstanceUid: DICOMWeb.getString(anInstance['0020000D']),
-    institutionName: DICOMWeb.getString(anInstance['00080080']),
-  };
-
-  const seriesMap = {};
-
-  await Promise.all(
-    resultData.map(async function(instance) {
-      const seriesInstanceUid = DICOMWeb.getString(instance['0020000E']);
-      let series = seriesMap[seriesInstanceUid];
-
-      if (!series) {
-        series = {
-          seriesDescription: DICOMWeb.getString(instance['0008103E']),
-          modality: DICOMWeb.getString(instance['00080060']),
-          seriesInstanceUid: seriesInstanceUid,
-          seriesNumber: DICOMWeb.getNumber(instance['00200011']),
-          seriesDate: DICOMWeb.getString(instance['00080021']),
-          seriesTime: DICOMWeb.getString(instance['00080031']),
-          instances: [],
-        };
-        seriesMap[seriesInstanceUid] = series;
-        studyData.seriesList.push(series);
-      }
-
-      const sopInstanceUid = DICOMWeb.getString(instance['00080018']);
-      const wadouri = buildInstanceWadoUrl(
-        server,
-        studyInstanceUid,
-        seriesInstanceUid,
-        sopInstanceUid
-      );
-      const baseWadoRsUri = buildInstanceWadoRsUri(
-        server,
-        studyInstanceUid,
-        seriesInstanceUid,
-        sopInstanceUid
-      );
-      const wadorsuri = buildInstanceFrameWadoRsUri(
-        server,
-        studyInstanceUid,
-        seriesInstanceUid,
-        sopInstanceUid
-      );
-
-      const instanceSummary = {
-        imageType: DICOMWeb.getString(instance['00080008']),
-        sopClassUid: DICOMWeb.getString(instance['00080016']),
-        modality: DICOMWeb.getString(instance['00080060']),
-        sopInstanceUid,
-        instanceNumber: DICOMWeb.getNumber(instance['00200013']),
-        imagePositionPatient: DICOMWeb.getString(instance['00200032']),
-        imageOrientationPatient: DICOMWeb.getString(instance['00200037']),
-        frameOfReferenceUID: DICOMWeb.getString(instance['00200052']),
-        sliceLocation: DICOMWeb.getNumber(instance['00201041']),
-        samplesPerPixel: DICOMWeb.getNumber(instance['00280002']),
-        photometricInterpretation: DICOMWeb.getString(instance['00280004']),
-        planarConfiguration: DICOMWeb.getNumber(instance['00280006']),
-        rows: DICOMWeb.getNumber(instance['00280010']),
-        columns: DICOMWeb.getNumber(instance['00280011']),
-        pixelSpacing: DICOMWeb.getString(instance['00280030']),
-        pixelAspectRatio: DICOMWeb.getString(instance['00280034']),
-        bitsAllocated: DICOMWeb.getNumber(instance['00280100']),
-        bitsStored: DICOMWeb.getNumber(instance['00280101']),
-        highBit: DICOMWeb.getNumber(instance['00280102']),
-        pixelRepresentation: DICOMWeb.getNumber(instance['00280103']),
-        smallestPixelValue: DICOMWeb.getNumber(instance['00280106']),
-        largestPixelValue: DICOMWeb.getNumber(instance['00280107']),
-        windowCenter: DICOMWeb.getString(instance['00281050']),
-        windowWidth: DICOMWeb.getString(instance['00281051']),
-        rescaleIntercept: DICOMWeb.getNumber(instance['00281052']),
-        rescaleSlope: DICOMWeb.getNumber(instance['00281053']),
-        rescaleType: DICOMWeb.getNumber(instance['00281054']),
-        sourceImageInstanceUid: getSourceImageInstanceUid(instance),
-        laterality: DICOMWeb.getString(instance['00200062']),
-        viewPosition: DICOMWeb.getString(instance['00185101']),
-        acquisitionDateTime: DICOMWeb.getString(instance['0008002A']),
-        numberOfFrames: DICOMWeb.getNumber(instance['00280008']),
-        frameIncrementPointer: getFrameIncrementPointer(instance['00280009']),
-        frameTime: DICOMWeb.getNumber(instance['00181063']),
-        frameTimeVector: parseFloatArray(
-          DICOMWeb.getString(instance['00181065'])
-        ),
-        sliceThickness: DICOMWeb.getNumber(instance['00180050']),
-        spacingBetweenSlices: DICOMWeb.getString(instance['00180088']),
-        lossyImageCompression: DICOMWeb.getString(instance['00282110']),
-        derivationDescription: DICOMWeb.getString(instance['00282111']),
-        lossyImageCompressionRatio: DICOMWeb.getString(instance['00282112']),
-        lossyImageCompressionMethod: DICOMWeb.getString(instance['00282114']),
-        echoNumber: DICOMWeb.getString(instance['00180086']),
-        contrastBolusAgent: DICOMWeb.getString(instance['00180010']),
-        radiopharmaceuticalInfo: getRadiopharmaceuticalInfo(instance),
-        baseWadoRsUri: baseWadoRsUri,
-        wadouri: WADOProxy.convertURL(wadouri, server),
-        wadorsuri: WADOProxy.convertURL(wadorsuri, server),
-        imageRendering: server.imageRendering,
-        thumbnailRendering: server.thumbnailRendering,
-      };
-
-      // Get additional information if the instance uses "PALETTE COLOR" photometric interpretation
-      if (instanceSummary.photometricInterpretation === 'PALETTE COLOR') {
-        const redPaletteColorLookupTableDescriptor = parseFloatArray(
-          DICOMWeb.getString(instance['00281101'])
-        );
-        const greenPaletteColorLookupTableDescriptor = parseFloatArray(
-          DICOMWeb.getString(instance['00281102'])
-        );
-        const bluePaletteColorLookupTableDescriptor = parseFloatArray(
-          DICOMWeb.getString(instance['00281103'])
-        );
-        const palettes = await getPaletteColors(
-          server,
-          instance,
-          redPaletteColorLookupTableDescriptor
-        );
-
-        if (palettes) {
-          if (palettes.uid) {
-            instanceSummary.paletteColorLookupTableUID = palettes.uid;
-          }
-
-          instanceSummary.redPaletteColorLookupTableData = palettes.red;
-          instanceSummary.greenPaletteColorLookupTableData = palettes.green;
-          instanceSummary.bluePaletteColorLookupTableData = palettes.blue;
-          instanceSummary.redPaletteColorLookupTableDescriptor = redPaletteColorLookupTableDescriptor;
-          instanceSummary.greenPaletteColorLookupTableDescriptor = greenPaletteColorLookupTableDescriptor;
-          instanceSummary.bluePaletteColorLookupTableDescriptor = bluePaletteColorLookupTableDescriptor;
-        }
-      }
-
-      series.instances.push(instanceSummary);
-    })
-  );
-
-  return studyData;
+  throw new Error('Failed to create study out of provided SOP instance list');
 }
 
 /**
- * Retrieve Study MetaData from a DICOM server using a WADO call
- *
- * @param server
- * @param studyInstanceUid
- * @returns {Promise}
+ * Retrieve Study metadata from a DICOM server. If the server is configured to use lazy load, only the first series
+ * will be loaded and the property "studyLoader" will be set to let consumer load remaining series as needed
+ * @param {Object} server Object with server configuration paramenters
+ * @param {string} studyInstanceUid The Study Instance UID of the study which needs to be loaded
+ * @returns {Object} A study descriptor object
  */
 async function RetrieveMetadata(server, studyInstanceUid) {
-  const config = {
+  return (server.enableStudyLazyLoad !== false
+    ? lazyLoadStudyMetadata
+    : loadStudyMetadata)(server, studyInstanceUid);
+}
+
+/**
+ *
+ * @param {*} server
+ * @param {*} studyInstanceUID
+ */
+async function loadStudyMetadata(server, studyInstanceUID) {
+  const dicomWeb = new api.DICOMwebClient({
     url: server.wadoRoot,
     headers: DICOMWeb.getAuthorizationHeader(server),
-  };
-  const dicomWeb = new api.DICOMwebClient(config);
-  const options = {
-    studyInstanceUID: studyInstanceUid,
-  };
+  });
+  return dicomWeb
+    .retrieveStudyMetadata({ studyInstanceUID })
+    .then(result => createStudyFromSOPInstanceList(server, result));
+}
 
-  return dicomWeb.retrieveStudyMetadata(options).then(result => {
-    return resultDataToStudyMetadata(server, studyInstanceUid, result);
+async function lazyLoadStudyMetadata(server, studyInstanceUid) {
+  const seriesInstanceUids = await searchStudySeries(server, studyInstanceUid);
+  const dicomWeb = new api.DICOMwebClient({
+    url: server.wadoRoot,
+    headers: DICOMWeb.getAuthorizationHeader(server),
+  });
+  const seriesLoader = makeSeriesLoader(
+    dicomWeb,
+    studyInstanceUid,
+    seriesInstanceUids
+  );
+  const firstSeries = await seriesLoader.next();
+  const study = await createStudyFromSOPInstanceList(
+    server,
+    firstSeries.sopInstances
+  );
+  if (seriesLoader.hasNext()) {
+    attachSeriesLoader(server, study, seriesLoader);
+  }
+  return study;
+}
+
+function attachSeriesLoader(server, study, seriesLoader) {
+  study.seriesLoader = Object.freeze({
+    hasNext() {
+      return seriesLoader.hasNext();
+    },
+    async next() {
+      const series = await seriesLoader.next();
+      await addInstancesToStudy(server, study, series.sopInstances);
+      return study.seriesMap[series.seriesInstanceUID];
+    },
   });
 }
 
+/**
+ * Creates an immutable series loader object which loads each series sequentially using the iterator interface
+ * @param {DICOMWebClient} dicomWebClient The DICOMWebClient instance to be used for series load
+ * @param {string} studyInstanceUID The Study Instance UID from which series will be loaded
+ * @param {Array} seriesInstanceUIDList A list of Series Instance UIDs
+ * @returns {Object} Returns an object which supports loading of instances from each of given Series Instance UID
+ */
+function makeSeriesLoader(
+  dicomWebClient,
+  studyInstanceUID,
+  seriesInstanceUIDList
+) {
+  return Object.freeze({
+    hasNext() {
+      return seriesInstanceUIDList.length > 0;
+    },
+    async next() {
+      const seriesInstanceUID = seriesInstanceUIDList.shift();
+      const sopInstances = await dicomWebClient.retrieveSeriesMetadata({
+        studyInstanceUID,
+        seriesInstanceUID,
+      });
+      return { studyInstanceUID, seriesInstanceUID, sopInstances };
+    },
+  });
+}
+
+/**
+ * Search series of a given study
+ * @param {Object} server Object with server configuration paramenters
+ * @param {string} studyInstanceUID The Study Instance UID to search series from;
+ * @returns {Arrays} A list of Series Instance UIDs
+ */
+async function searchStudySeries(server, studyInstanceUID) {
+  const dicomWeb = new api.DICOMwebClient({
+    url: server.qidoRoot,
+    headers: DICOMWeb.getAuthorizationHeader(server),
+  });
+  const seriesList = await dicomWeb.searchForSeries({ studyInstanceUID });
+  return seriesList
+    .sort(seriesSortingCriteria)
+    .map(series => getSeriesInfo(series).seriesInstanceUid);
+}
+
+/**
+ * Series sorting criteria: series considered low priority are moved to the end
+ * of the list and series number is used to break ties
+ * @param {Object} firstSeries
+ * @param {Object} secondSeries
+ */
+function seriesSortingCriteria(firstSeries, secondSeries) {
+  const a = getSeriesInfo(firstSeries);
+  const b = getSeriesInfo(secondSeries);
+  if (!a.isLowPriority && b.isLowPriority) {
+    return -1;
+  }
+  if (a.isLowPriority && !b.isLowPriority) {
+    return 1;
+  }
+  return a.seriesNumber - b.seriesNumber;
+}
+
+/**
+ * Creates an object with processed series information and saves its reference
+ * inside the series object itself to simplify sorting
+ * @param {Object} series The raw series object
+ */
+function getSeriesInfo(series) {
+  let info = series[INFO];
+  if (!info) {
+    const modality = DICOMWeb.getString(series['00080060'], '').toUpperCase();
+    info = Object.freeze({
+      modality,
+      isLowPriority: isLowPriorityModality(modality),
+      seriesInstanceUid: DICOMWeb.getString(series['0020000E']),
+      seriesNumber: DICOMWeb.getNumber(series['00200011'], 0) || 0,
+    });
+    series[INFO] = info;
+  }
+  return info;
+}
+
 export default RetrieveMetadata;

platform/core/src/utils/dicomLoaderService.js

@@ -0,0 +1,199 @@
+import cornerstone from 'cornerstone-core';
+import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
+import { api } from 'dicomweb-client';
+import DICOMWeb from '../DICOMWeb';
+
+const getImageId = imageObj => {
+  if (!imageObj) {
+    return;
+  }
+
+  return typeof imageObj.getImageId === 'function'
+    ? imageObj.getImageId()
+    : imageObj.url;
+};
+
+const findImageIdOnStudies = (studies, displaySetInstanceUid) => {
+  const study = studies.find(study => {
+    const displaySet = study.displaySets.some(
+      displaySet => displaySet.displaySetInstanceUid === displaySetInstanceUid
+    );
+    return displaySet;
+  });
+  const { seriesList = [] } = study;
+  const { instances = [] } = seriesList[0] || {};
+  const instance = instances[0];
+
+  return getImageId(instance);
+};
+
+const someInvalidStrings = strings => {
+  const stringsArray = Array.isArray(strings) ? strings : [strings];
+  const emptyString = string => !string;
+  let invalid = stringsArray.some(emptyString);
+  return invalid;
+};
+
+const getImageInstance = dataset => {
+  return dataset && dataset.images && dataset.images[0];
+};
+
+const getImageInstanceId = imageInstance => {
+  return getImageId(imageInstance);
+};
+
+const fetchIt = (url, headers = DICOMWeb.getAuthorizationHeader()) => {
+  return fetch(url, headers).then(response => response.arrayBuffer());
+};
+
+const cornerstoneRetriever = imageId => {
+  return cornerstone.loadAndCacheImage(imageId).then(image => {
+    return image && image.data && image.data.byteArray.buffer;
+  });
+};
+
+const wadorsRetriever = (
+  url,
+  studyInstanceUID,
+  seriesInstanceUID,
+  sopInstanceUID,
+  headers = DICOMWeb.getAuthorizationHeader()
+) => {
+  const config = {
+    url,
+    headers,
+  };
+  const dicomWeb = new api.DICOMwebClient(config);
+
+  return dicomWeb.retrieveInstance({
+    studyInstanceUID,
+    seriesInstanceUID,
+    sopInstanceUID,
+  });
+};
+
+const getImageLoaderType = imageId => {
+  const loaderRegExp = /^\w+\:/;
+  const loaderType = loaderRegExp.exec(imageId);
+
+  return (
+    (loaderRegExp.lastIndex === 0 &&
+      loaderType &&
+      loaderType[0] &&
+      loaderType[0].replace(':', '')) ||
+    ''
+  );
+};
+
+const DicomLoaderService = new (class {
+  getLocalData(dataset, studies) {
+    if (dataset && dataset.localFile) {
+      // Use referenced imageInstance
+      const imageInstance = getImageInstance(dataset);
+      let imageId = getImageInstanceId(imageInstance);
+
+      // or Try to get it from studies
+      if (someInvalidStrings(imageId)) {
+        imageId = findImageIdOnStudies(studies, dataset.displaySetInstanceUid);
+      }
+
+      if (!someInvalidStrings(imageId)) {
+        return cornerstoneWADOImageLoader.wadouri.loadFileRequest(imageId);
+      }
+    }
+  }
+
+  getDataByImageType(dataset) {
+    const imageInstance = getImageInstance(dataset);
+
+    if (imageInstance) {
+      const imageId = getImageInstanceId(imageInstance);
+      let getDicomDataMethod = fetchIt;
+      const loaderType = getImageLoaderType(imageId);
+
+      switch (loaderType) {
+        case 'dicomfile':
+          getDicomDataMethod = cornerstoneRetriever.bind(this, imageId);
+          break;
+        case 'wadors':
+          const url = imageInstance.getData().wadoRoot;
+          const studyInstanceUID = imageInstance.getStudyInstanceUID();
+          const seriesInstanceUID = imageInstance.getSeriesInstanceUID();
+          const sopInstanceUID = imageInstance.getSOPInstanceUID();
+          const invalidParams = someInvalidStrings([
+            url,
+            studyInstanceUID,
+            seriesInstanceUID,
+            sopInstanceUID,
+          ]);
+          if (invalidParams) {
+            return;
+          }
+
+          getDicomDataMethod = wadorsRetriever.bind(
+            this,
+            url,
+            studyInstanceUID,
+            seriesInstanceUID,
+            sopInstanceUID
+          );
+          break;
+        case 'wadouri':
+          // Strip out the image loader specifier
+          imageId = imageId.substring(imageId.indexOf(':') + 1);
+
+          if (someInvalidStrings(imageId)) {
+            return;
+          }
+          getDicomDataMethod = fetchIt.bind(this, imageId);
+          break;
+      }
+
+      return getDicomDataMethod();
+    }
+  }
+
+  getDataByDatasetType(dataset) {
+    const {
+      studyInstanceUid,
+      seriesInstanceUid,
+      sopInstanceUid,
+      authorizationHeaders,
+      wadoRoot,
+      wadoUri,
+    } = dataset;
+    // Retrieve wadors or just try to fetch wadouri
+    if (!someInvalidStrings(wadoRoot)) {
+      return wadorsRetriever(
+        wadoRoot,
+        studyInstanceUid,
+        seriesInstanceUid,
+        sopInstanceUid,
+        authorizationHeaders
+      );
+    } else if (!someInvalidStrings(wadoUri)) {
+      return fetchIt(wadoUri, { headers: authorizationHeaders });
+    }
+  }
+
+  *getLoaderIterator(dataset, studies) {
+    yield this.getLocalData(dataset, studies);
+    yield this.getDataByImageType(dataset);
+    yield this.getDataByDatasetType(dataset);
+  }
+
+  findDicomDataPromise(dataset, studies) {
+    const loaderIterator = this.getLoaderIterator(dataset, studies);
+    // it returns first valid retriever method.
+    for (const loader of loaderIterator) {
+      if (loader) {
+        return loader;
+      }
+    }
+
+    // in case of no valid loader
+    throw new Error('Invalid dicom data loader');
+  }
+})();
+
+export default DicomLoaderService;

platform/core/src/utils/getWADORSImageId.js

@@ -5,11 +5,16 @@ function getWADORSImageUrl(instance, frame) {
     return;
   }
 
-  // We need to sum 1 because WADO-RS frame number is 1-based
-  frame = frame ? parseInt(frame) + 1 : 1;
+  // Use null to obtain an imageId which represents the instance
+  if (frame === null) {
+    wadorsuri = wadorsuri.replace(/frames\/(\d+)/, '');
+  } else {
+    // We need to sum 1 because WADO-RS frame number is 1-based
+    frame = frame ? parseInt(frame) + 1 : 1;
 
-  // Replaces /frame/1 by /frame/{frame}
-  wadorsuri = wadorsuri.replace(/frames\/(\d+)/, `frames/${frame}`);
+    // Replaces /frame/1 by /frame/{frame}
+    wadorsuri = wadorsuri.replace(/frames\/(\d+)/, `frames/${frame}`);
+  }
 
   return wadorsuri;
 }

platform/core/src/utils/index.js

@@ -8,6 +8,8 @@ import sortBy from './sortBy.js';
 import studyMetadataManager from './studyMetadataManager';
 import updateMetaDataManager from './updateMetaDataManager.js';
 import writeScript from './writeScript.js';
+import DicomLoaderService from './dicomLoaderService.js';
+import * as urlUtil from './urlUtil';
 
 const utils = {
   guid,
@@ -21,6 +23,8 @@ const utils = {
   // Updates WADO-RS metaDataManager
   updateMetaDataManager,
   DICOMTagDescriptions,
+  DicomLoaderService,
+  urlUtil,
 };
 
 export {
@@ -35,6 +39,8 @@ export {
   // Updates WADO-RS metaDataManager
   updateMetaDataManager,
   DICOMTagDescriptions,
+  DicomLoaderService,
+  urlUtil,
 };
 
 export default utils;

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

@@ -14,6 +14,8 @@ describe('Top level exports', () => {
       // Updates WADO-RS metaDataManager
       'updateMetaDataManager',
       'DICOMTagDescriptions',
+      'DicomLoaderService',
+      'urlUtil'
     ].sort();
 
     const exports = Object.keys(utils.default).sort();

platform/core/src/utils/isLowPriorityModality.js

@@ -0,0 +1,5 @@
+const LOW_PRIORITY_MODALITIES = Object.freeze(['SEG', 'KO', 'PR']);
+
+export default function isLowPriorityModality(modality) {
+  return LOW_PRIORITY_MODALITIES.includes(modality);
+}

platform/core/src/utils/updateMetaDataManager.js

@@ -70,32 +70,48 @@ const getWadoRsInstanceMetaData = (study, series, instance) => {
     .toJSON();
 };
 
-export default function updateMetaDataManager(study) {
-  study.seriesList.forEach(series => {
-    series.instances.forEach(instance => {
-      // Cache just images that are going to be loaded via WADO-RS
-      if (
-        instance.imageRendering !== 'wadors' &&
-        instance.thumbnailRendering !== 'wadors'
-      ) {
-        return;
-      }
+/**
+ * Update metadata manager with instances of a specifc series
+ * @param {Object} study A plain study descriptor object
+ * @param {Object} series A Series descriptor object contaning the instances to be added to the manager
+ */
+function updateMetaDataManagerForSeries(study, series) {
+  series.instances.forEach(instance => {
+    // Cache just images that are going to be loaded via WADO-RS
+    if (
+      instance.imageRendering !== 'wadors' &&
+      instance.thumbnailRendering !== 'wadors'
+    ) {
+      return;
+    }
 
-      const metaData = getWadoRsInstanceMetaData(study, series, instance);
-      const numberOfFrames = instance.numberOfFrames || 1;
+    const metaData = getWadoRsInstanceMetaData(study, series, instance);
+    const numberOfFrames = instance.numberOfFrames || 1;
 
-      // We can share the same metaData with all frames because it doesn't have
-      // any frame specific data, such as frameNumber, pixelData, offset, etc.
-      // WADO-RS frame number is 1-based
-      for (let frameNumber = 0; frameNumber < numberOfFrames; frameNumber++) {
-        const imageId = getWADORSImageId(instance, frameNumber);
+    // We can share the same metaData with all frames because it doesn't have
+    // any frame specific data, such as frameNumber, pixelData, offset, etc.
+    // WADO-RS frame number is 1-based
+    for (let frameNumber = 0; frameNumber < numberOfFrames; frameNumber++) {
+      const imageId = getWADORSImageId(instance, frameNumber);
 
-        // TODO Drop dependency on this
-        cornerstoneWADOImageLoader.wadors.metaDataManager.add(
-          imageId,
-          metaData
-        );
-      }
-    });
+      // TODO Drop dependency on this
+      cornerstoneWADOImageLoader.wadors.metaDataManager.add(imageId, metaData);
+    }
   });
 }
+
+/**
+ * Update metadata manager
+ * @param {Object} study A plain study descriptor object
+ * @param {string} [seriesInstanceUid] The Series Instance UID of the series to be added (Optional)
+ */
+export default function updateMetaDataManager(study, seriesInstanceUid) {
+  if (seriesInstanceUid) {
+    const series = study.seriesMap[seriesInstanceUid];
+    updateMetaDataManagerForSeries(study, series);
+  } else {
+    study.seriesList.forEach(series => {
+      updateMetaDataManagerForSeries(study, series);
+    });
+  }
+}

platform/core/src/utils/urlUtil.js

@@ -0,0 +1,67 @@
+import lib from 'query-string';
+
+const PARAM_SEPARATOR = ';';
+const PARAM_PATTERN_IDENTIFIER = ':';
+
+function toLowerCaseFirstLetter(word) {
+  return word[0].toLowerCase() + word.slice(1);
+}
+const getFilters = (location = {}) => {
+  const { search } = location;
+
+  if (!search) {
+    return;
+  }
+
+  const searchParameters = parse(search);
+  const filters = {};
+
+  Object.entries(searchParameters).forEach(([key, value]) => {
+    filters[toLowerCaseFirstLetter(key)] = value;
+  });
+
+  return filters;
+};
+
+const decode = (strToDecode = '') => {
+  try {
+    const decoded = window.atob(strToDecode);
+    return decoded;
+  } catch (e) {
+    return strToDecode;
+  }
+};
+
+const parse = toParse => {
+  if (toParse) {
+    return lib.parse(toParse);
+  }
+
+  return {};
+};
+const parseParam = paramStr => {
+  const _paramDecoded = decode(paramStr);
+  if (_paramDecoded && typeof _paramDecoded === 'string') {
+    return _paramDecoded.split(PARAM_SEPARATOR);
+  }
+};
+
+const replaceParam = (path = '', paramKey, paramValue) => {
+  const paramPattern = `${PARAM_PATTERN_IDENTIFIER}${paramKey}`;
+  if (paramValue) {
+    return path.replace(paramPattern, paramValue);
+  }
+
+  return path;
+};
+
+const queryString = {
+  getQueryFilters: getFilters,
+};
+
+const paramString = {
+  parseParam: parseParam,
+  replaceParam: replaceParam,
+};
+
+export { parse, queryString, paramString };

platform/i18n/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.50.5](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.50.4...@ohif/i18n@0.50.5) (2019-10-04)
+
+
+### Bug Fixes
+
+* CineDialog buttons label ([#998](https://github.com/OHIF/Viewers/issues/998)) ([4df624b](https://github.com/OHIF/Viewers/commit/4df624b))
+
+
+
+
+
+## [0.50.4](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.50.3...@ohif/i18n@0.50.4) (2019-09-10)
+
+**Note:** Version bump only for package @ohif/i18n
+
+
+
+
+
 ## [0.50.3](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.50.2...@ohif/i18n@0.50.3) (2019-09-04)
 
 **Note:** Version bump only for package @ohif/i18n

platform/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/i18n",
-  "version": "0.50.3",
+  "version": "0.50.5",
   "description": "Internationalization library for The OHIF Viewer",
   "author": "OHIF",
   "license": "MIT",
@@ -32,8 +32,8 @@
   "peerDependencies": {
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-i18next": "^10.11.0"
   },
   "dependencies": {

platform/i18n/src/locales/en-US/CineDialog.json

@@ -1,8 +1,8 @@
 {
-  "Next image": "$t(Common:Play) $t(Common:Image)",
+  "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": "Skip to first $t(Common:Image)",
-  "Skip to last image": "Skip, to last $t(Common:Image)",
+  "Skip to last image": "Skip to last $t(Common:Image)",
   "fps": "fps"
 }

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

@@ -1,5 +1,5 @@
 {
-  "Next image": " $t(Common:Image) $t(Common:Next)",
+  "Next image": "$t(Common:Image) $t(Common:Next)",
   "Play / Stop": "$t(Common:Play) / Stop",
   "Previous image": "$t(Common:Image) $t(Common:Previous)",
   "Skip to first image": "Ir a la primera $t(Common:Image)",

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

@@ -1,5 +1,5 @@
 {
-  "Next image": "$t(Common:Play) $t(Common:Image)",
+  "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)最初にスキップ",

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

@@ -1,5 +1,5 @@
 {
-  "Next image": "$t(Common:Play) $t(Common:Image)",
+  "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": "Bỏ qua đến đầu $t(Common:Image)",

platform/ui/CHANGELOG.md

@@ -3,6 +3,102 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.53.3](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.53.2...@ohif/ui@0.53.3) (2019-10-10)
+
+
+### Bug Fixes
+
+* 🎸 switch ohif logo from text + font to SVG ([#1021](https://github.com/OHIF/Viewers/issues/1021)) ([e7de8be](https://github.com/OHIF/Viewers/commit/e7de8be))
+
+
+
+
+
+## [0.53.2](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.53.1...@ohif/ui@0.53.2) (2019-10-09)
+
+**Note:** Version bump only for package @ohif/ui
+
+
+
+
+
+## [0.53.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.53.0...@ohif/ui@0.53.1) (2019-10-04)
+
+
+### Bug Fixes
+
+* Move Series Information to Separate Row ([#990](https://github.com/OHIF/Viewers/issues/990)) ([458d310](https://github.com/OHIF/Viewers/commit/458d310))
+
+
+
+
+
+# [0.53.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.52.0...@ohif/ui@0.53.0) (2019-10-03)
+
+
+### Features
+
+* Use QIDO + WADO to load series metadata individually rather than the entire study metadata at once ([#953](https://github.com/OHIF/Viewers/issues/953)) ([9e10c2b](https://github.com/OHIF/Viewers/commit/9e10c2b))
+
+
+
+
+
+# [0.52.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.51.3...@ohif/ui@0.52.0) (2019-10-01)
+
+
+### Features
+
+* 🎸 MPR UI improvements. Added MinIP, AvgIP, slab thickness slider and mode toggle ([#947](https://github.com/OHIF/Viewers/issues/947)) ([c79c0c3](https://github.com/OHIF/Viewers/commit/c79c0c3))
+
+
+
+
+
+## [0.51.3](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.51.2...@ohif/ui@0.51.3) (2019-10-01)
+
+
+### Bug Fixes
+
+* Address issues with touch devices and drag/drop causing crashes ([#982](https://github.com/OHIF/Viewers/issues/982)) ([cf40a83](https://github.com/OHIF/Viewers/commit/cf40a83))
+
+
+
+
+
+## [0.51.2](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.51.1...@ohif/ui@0.51.2) (2019-09-26)
+
+
+### Bug Fixes
+
+* 🐛 Set series into active viewport by clicking on thumbnail ([#945](https://github.com/OHIF/Viewers/issues/945)) ([5551f81](https://github.com/OHIF/Viewers/commit/5551f81)), closes [#895](https://github.com/OHIF/Viewers/issues/895) [#895](https://github.com/OHIF/Viewers/issues/895)
+
+
+
+
+
+## [0.51.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.51.0...@ohif/ui@0.51.1) (2019-09-19)
+
+
+### Bug Fixes
+
+* Use HTML5Backend for drag-drop if the device does not support touch ([#927](https://github.com/OHIF/Viewers/issues/927)) ([6fdac4d](https://github.com/OHIF/Viewers/commit/6fdac4d))
+
+
+
+
+
+# [0.51.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.50.4...@ohif/ui@0.51.0) (2019-09-12)
+
+
+### Features
+
+* **EraserTool:** add eraserTool to @ohif/extension-cornerstone ([#912](https://github.com/OHIF/Viewers/issues/912)) ([698d274](https://github.com/OHIF/Viewers/commit/698d274))
+
+
+
+
+
 ## [0.50.4](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.50.3...@ohif/ui@0.50.4) (2019-09-06)
 
 **Note:** Version bump only for package @ohif/ui

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "0.50.4",
+  "version": "0.53.3",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -48,8 +48,9 @@
     "prop-types": "15.6.2",
     "react-bootstrap-modal": "4.2.0",
     "react-dates": "18.4.1",
-    "react-dnd": "8.0.3",
-    "react-dnd-touch-backend": "^0.8.3",
+    "react-dnd": "9.3.4",
+    "react-dnd-html5-backend": "^9.3.4",
+    "react-dnd-touch-backend": "^9.3.4",
     "react-i18next": "^10.11.0",
     "react-with-direction": "1.3.0"
   },

platform/ui/src/__docs__/getting-started.mdx

@@ -33,8 +33,8 @@ as easy as possible. You will, however, need to include either the default font
 or the font you set for your theme:
 
 ```js
-// Google Fonts, Sanchez & Roboto
-'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap';
+// Google Fonts, Roboto
+'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap';
 ```
 
 `@ohif/ui` also looks for theme CSS variabled defined on `:root`. You can find a

platform/ui/src/__docs__/index.html

@@ -1,18 +1,19 @@
 <!DOCTYPE html>
 <html lang="{{ lang }}">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="description" content="{{ description }}">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-    <title>{{ title }}</title>
+<head>
+  <meta charset="UTF-8">
+  <meta name="description" content="{{ description }}">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-   <!-- Latest compiled and minified CSS -->
-   <link rel="stylesheet" href="/public/docz.css">
-   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap">
+  <title>{{ title }}</title>
 
-    <style>
+  <!-- Latest compiled and minified CSS -->
+  <link rel="stylesheet" href="/public/docz.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap">
+
+  <style>
     /* "Tide" theme */
     /* TODO:
     - Convert the other themes to CSS Variables
@@ -40,7 +41,7 @@
       --table-text-primary-color: #ffffff;
       --table-text-secondary-color: #91b9cd;
 
-      --large-numbers-color:#6FBDE2;
+      --large-numbers-color: #6FBDE2;
 
       --state-error: #FFCCCC;
       --state-error-border: #FFCCCC;
@@ -70,11 +71,13 @@
     body {
       font-family: 'Roboto', sans-serif !important;
     }
-    </style>
-    {{ head }}
-  </head>
-  <body>
-    <div id="root" />
-    {{ footer }}
-  </body>
+  </style>
+  {{ head }}
+</head>
+
+<body>
+  <div id="root" />
+  {{ footer }}
+</body>
+
 </html>

platform/ui/src/components/checkbox/checkbox.js

@@ -6,15 +6,29 @@ export class Checkbox extends Component {
   static propTypes = {
     label: PropTypes.string.isRequired,
     checked: PropTypes.bool,
+    onChange: PropTypes.func,
   };
 
   constructor(props) {
     super(props);
-    this.state = { checked: props.checked, label: props.label };
+    this.state = { checked: !!props.checked, label: props.label };
   }
 
   handleChange(e) {
-    this.setState({ checked: e.target.checked });
+    const checked = e.target.checked;
+    this.setState({ checked });
+    if (this.props.onChange) this.props.onChange(checked);
+  }
+
+  componentDidUpdate(props) {
+    const { checked = false, label } = props;
+
+    if (this.state.checked !== checked || this.state.label !== label) {
+      this.setState({
+        checked,
+        label,
+      });
+    }
   }
 
   render() {
@@ -32,9 +46,7 @@ export class Checkbox extends Component {
             <input
               type="checkbox"
               checked={this.state.checked}
-              onChange={e => {
-                this.handleChange(e);
-              }}
+              onChange={this.handleChange.bind(this)}
             />
             {checkbox}
             {this.state.label}

platform/ui/src/components/index.js

@@ -13,6 +13,7 @@ import {
   UserPreferencesModal,
 } from './userPreferencesModal';
 
+import { Checkbox } from './checkbox';
 import { CineDialog } from './cineDialog';
 import { QuickSwitch } from './quickSwitch';
 import { RoundedButtonGroup } from './roundedButtonGroup';
@@ -23,6 +24,7 @@ import { ToolbarSection } from './toolbarSection';
 import { Tooltip } from './tooltip';
 
 export {
+  Checkbox,
   CineDialog,
   ExampleDropTarget,
   LayoutButton,

platform/ui/src/components/studyBrowser/ImageThumbnail.js

@@ -1,3 +1,4 @@
+/* global cornerstone */
 import './ImageThumbnail.styl';
 
 import React, { PureComponent } from 'react';
@@ -12,25 +13,6 @@ import ViewportLoadingIndicator from '../../viewer/ViewportLoadingIndicator';
 // - Pass in the entire load and render function as a prop?
 //import cornerstone from 'cornerstone-core';
 
-/**
- * Asynchronous wrapper around Cornerstone's renderToCanvas method.
- *
- * @param {HTMLElement} canvasElement An HTML <canvas> element
- * @param {Image} image A Cornerstone Image
- *
- * @return {Promise} A promise tracking the progress of the rendering. Resolves empty.
- */
-function renderAsync(canvasElement, image) {
-  return new Promise((resolve, reject) => {
-    try {
-      cornerstone.renderToCanvas(canvasElement, image);
-      resolve();
-    } catch (error) {
-      reject(error);
-    }
-  });
-}
-
 export default class ImageThumbnail extends PureComponent {
   static propTypes = {
     imageSrc: PropTypes.string,
@@ -52,40 +34,32 @@ export default class ImageThumbnail extends PureComponent {
     super(props);
 
     this.canvas = React.createRef();
-
-    const renderIntoCanvas = this.props.imageId && !this.props.imageSrc;
-
     this.state = {
-      loading: renderIntoCanvas,
+      loading: this.shouldRenderToCanvas(),
     };
   }
 
+  shouldRenderToCanvas() {
+    return this.props.imageId && !this.props.imageSrc;
+  }
+
   componentDidMount() {
-    const renderIntoCanvas = this.props.imageId && !this.props.imageSrc;
-
-    if (renderIntoCanvas) {
-      const { imageId } = this.props;
-      const canvas = this.canvas.current;
-
-      cornerstone.loadAndCacheImage(imageId).then(
-        image => {
-          renderAsync(canvas, image).then(
-            () => {
-              this.setState({
-                loading: false,
-              });
-            },
-            error => {
-              // TODO: Set state?
-              throw new Error(error);
-            }
-          );
-        },
-        error => {
-          // TODO: Set state?
+    if (this.shouldRenderToCanvas()) {
+      cornerstone
+        .loadAndCacheImage(this.props.imageId)
+        .then(image => {
+          cornerstone.renderToCanvas(this.canvas.current, image);
+          this.setState({
+            loading: false,
+          });
+        })
+        .catch(error => {
+          this.setState({
+            loading: false,
+            error: true,
+          });
           throw new Error(error);
-        }
-      );
+        });
     }
   }
 
@@ -100,12 +74,10 @@ export default class ImageThumbnail extends PureComponent {
     const showStackLoadingProgressBar =
       this.props.stackPercentComplete !== undefined;
 
-    const renderIntoCanvas = this.props.imageId && !this.props.imageSrc;
-
     return (
       <div className="ImageThumbnail">
         <div className="image-thumbnail-canvas">
-          {renderIntoCanvas ? (
+          {this.shouldRenderToCanvas() ? (
             <canvas
               ref={this.canvas}
               width={this.props.width}
@@ -130,6 +102,9 @@ export default class ImageThumbnail extends PureComponent {
             />
           </div>
         )}
+        {this.state.loading && (
+          <div className="image-thumbnail-loading-indicator"></div>
+        )}
       </div>
     );
   }

platform/ui/src/components/studyBrowser/ImageThumbnail.styl

@@ -26,6 +26,36 @@
   -webkit-background-clip: padding
   background-clip: padding-box
 
+  // Thumbnail Loading Indicator
+
+  .image-thumbnail-loading-indicator
+    position: absolute
+    left: 50%
+    top: 50%
+    margin: -22px 0 0 -22px
+    display: block
+    width: 44px
+    height: 44px
+
+    &:after
+      content: " "
+      display: block
+      width: 32px
+      height: 32px
+      margin: 1px
+      border-radius: 50%
+      border: 5px solid var(--ui-border-color-dark)
+      border-color: var(--ui-border-color-dark) transparent var(--ui-border-color-dark) transparent
+      animation: image-thumbnail-loading-indicator 1.2s linear infinite
+
+    @keyframes image-thumbnail-loading-indicator
+      0%
+        transform: rotate(0deg)
+      100%
+        transform: rotate(360deg)
+
+  // The End...
+
 .image-thumbnail-canvas
   height: 100%
   overflow: hidden
@@ -36,7 +66,6 @@
     -webkit-user-drag: none
     pointer-events: none
 
-
 .thumbnailLoadingIndicator
   display: none
   pointer-events: none

platform/ui/src/components/studyBrowser/StudyBrowser.js

@@ -25,7 +25,7 @@ class StudyBrowser extends Component {
         if (this.props.supportsDragAndDrop) {
           return (
             <ThumbnailEntryDragSource
-              key={`${studyIndex}_${thumbIndex}`}
+              key={thumb.displaySetInstanceUid}
               {...study}
               {...thumb}
               id={`${studyIndex}_${thumbIndex}`}
@@ -35,9 +35,9 @@ class StudyBrowser extends Component {
           );
         } else {
           return (
-            <div className="ThumbnailEntryContainer">
+            <div className="ThumbnailEntryContainer" data-cy="thumbnail-list">
               <ThumbnailEntry
-                key={`${studyIndex}_${thumbIndex}`}
+                key={thumb.displaySetInstanceUid}
                 {...study}
                 {...thumb}
                 id={`${studyIndex}_${thumbIndex}`}

platform/ui/src/components/studyBrowser/ThumbnailEntry.js

@@ -38,7 +38,6 @@ class ThumbnailEntry extends Component {
     let className = classnames('ThumbnailEntry noselect', {
       active: this.props.active,
     });
-    const infoOnly = false;
 
     let contents = null;
     if (this.props.imageSrc || this.props.imageId) {
@@ -54,8 +53,10 @@ class ThumbnailEntry extends Component {
       );
     } else if (this.props.altImageText) {
       contents = (
-        <div className={'alt-image-text p-x-1'}>
-          <h1>{this.props.altImageText}</h1>
+        <div className="p-x-1">
+          <div className="alt-image-text">
+            <h1>{this.props.altImageText}</h1>
+          </div>
         </div>
       );
     }
@@ -69,23 +70,23 @@ class ThumbnailEntry extends Component {
       >
         {contents}
         <div
-          className={infoOnly ? 'series-details info-only' : 'series-details'}
+          className="series-details"
         >
           <div className="series-description">
             {this.props.seriesDescription}
           </div>
           <div className="series-information">
-            <div className="item item-series clearfix">
+            <div className="item item-series">
               <div className="icon">S:</div>
               <div className="value">{this.props.seriesNumber}</div>
             </div>
             {hasInstanceNumber && (
-              <div className="item item-series clearfix">
+              <div className="item item-series">
                 <div className="icon">I:</div>
                 <div className="value">{this.props.instanceNumber}</div>
               </div>
             )}
-            <div className="item item-frames clearfix">
+            <div className="item item-frames">
               <div className="icon">
                 <div />
               </div>
@@ -99,13 +100,13 @@ class ThumbnailEntry extends Component {
 
   onClick = () => {
     if (this.props.onClick) {
-      this.props.onClick();
+      this.props.onClick(this.props.displaySetInstanceUid);
     }
   };
 
   onDoubleClick = () => {
     if (this.props.onDoubleClick) {
-      this.props.onDoubleClick();
+      this.props.onDoubleClick(this.props.displaySetInstanceUid);
     }
   };
 }

platform/ui/src/components/studyBrowser/ThumbnailEntry.styl

@@ -31,8 +31,6 @@
       color: var(--text-primary-color);
 
   .series-details
-    display: flex;
-    flex-direction: row;
     color: var(--text-primary-color);
     font-size: 14px
     line-height: 1.3em
@@ -44,9 +42,6 @@
     position: relative
     word-wrap: break-word
 
-    .series-description
-        flex-grow: 1
-
     &.info-only
       .series-description
         display: none
@@ -67,36 +62,33 @@
             float: none
             line-height: 25px
 
-          .value
-            margin-left: 0
-            width: auto
 
   .series-information
-    padding-right: 4px
-    max-width: 50px
+    display: flex
+    flex-direction: row
+    align-items: center
+
+    .item
+      flex: 1
+      text-align: center
 
     .item-frames .icon
       height: 18px
 
     .value
       color: var(--text-secondary-color);
-      display: inline-block
-      float: right
+      display: inline
       font-size: 12px
       margin-left: 4px
-      overflow: hidden
       text-overflow: ellipsis
       white-space: nowrap
-      width: calc(100% - 15px)
 
     .icon
       color: var(--active-color);
-      display: inline-block
-      float: left
+      display: inline
       font-size: 10px
       font-weight: 900
       text-align: right
-      width: 11px
 
       div
         background-color: var(--series-count-background-color);

platform/ui/src/components/studyBrowser/ThumbnailEntryDragSource.js

@@ -45,7 +45,7 @@ class ThumbnailEntryDragSource extends Component {
     const dropEffect = 'copy';
 
     return connectDragSource(
-      <div className="ThumbnailEntryContainer">
+      <div className="ThumbnailEntryContainer" data-cy="thumbnail-list">
         <DragPreview {...this.props} />
         <ThumbnailEntry {...this.props} />
       </div>,

platform/ui/src/elements/Icon/getIcon.js

@@ -30,6 +30,7 @@ import edit from './icons/edit.svg';
 import ellipseCircle from './icons/ellipse-circle.svg';
 import ellipseH from './icons/ellipse-h.svg';
 import ellipseV from './icons/ellipse-v.svg';
+import eraser from './icons/eraser.svg';
 import exclamationCircle from './icons/exclamation-circle.svg';
 import exclamationTriangle from './icons/exclamation-triangle.svg';
 import fastBackward from './icons/fast-backward.svg';
@@ -52,6 +53,7 @@ import measureTargetUn from './icons/measure-target-un.svg';
 import measureTemp from './icons/measure-temp.svg';
 import objectGroup from './icons/object-group.svg';
 import ohifLogo from './icons/ohif-logo.svg';
+import ohifTextLogo from './icons/ohif-text-logo.svg';
 import oval from './icons/oval.svg';
 import palette from './icons/palette.svg';
 import play from './icons/play.svg';
@@ -110,6 +112,7 @@ const ICONS = {
   'create-comment': createComment,
   'create-screen-capture': createScreenCapture,
   edit,
+  eraser,
   'fast-backward': fastBackward,
   'fast-forward': fastForward,
   'object-group': objectGroup,
@@ -118,6 +121,7 @@ const ICONS = {
   'inline-edit': inlineEdit,
   list,
   'ohif-logo': ohifLogo,
+  'ohif-text-logo': ohifTextLogo,
   lock,
   play,
   database,

platform/ui/src/elements/Icon/icons/eraser.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 2048 1792"
+  aria-labelledby="eraser"
+  width="1em"
+  height="1em"
+  fill="currentColor"
+>
+  <title id="title">Eraser</title>
+  <path transform="translate(0,1792) scale(1,-1)" fill="ACTIVE_COLOR" d="M960 1408l336-384h-768l-336 384h768zm1013-1077q15
+      34 9.5 71.5t-30.5 65.5l-896 1024q-38 44-96 44h-768q-38
+      0-69.5-20.5t-47.5-54.5q-15-34-9.5-71.5t30.5-65.5l896-1024q38-44 96-44h768q38
+      0 69.5 20.5t47.5 54.5z"
+  />
+</svg>

platform/ui/src/elements/Icon/icons/ohif-text-logo.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 224 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.416 5.932C10.416 7.46267 9.954 8.70867 9.03 9.67C8.11533 10.622 6.958 11.098 5.558 11.098C4.16733 11.098 3.00533 10.6173 2.072 9.656C1.13867 8.68533 0.672 7.43933 0.672 5.918C0.672 4.38733 1.15267 3.16467 2.114 2.25C3.07533 1.326 4.22333 0.863999 5.558 0.863999C6.89267 0.863999 8.036 1.326 8.988 2.25C9.94 3.16467 10.416 4.392 10.416 5.932ZM3.052 8.9C3.77067 9.60933 4.606 9.964 5.558 9.964C6.51 9.964 7.34067 9.60933 8.05 8.9C8.75933 8.18133 9.114 7.20133 9.114 5.96C9.114 4.70933 8.75 3.734 8.022 3.034C7.30333 2.32467 6.482 1.97 5.558 1.97C4.634 1.97 3.808 2.32467 3.08 3.034C2.352 3.734 1.988 4.70933 1.988 5.96C1.988 7.20133 2.34267 8.18133 3.052 8.9ZM14.6296 14.15H11.8156C11.6942 14.15 11.6336 14.094 11.6336 13.982V13.38C11.6336 13.268 11.6942 13.212 11.8156 13.212H12.5996V5.05H11.8436C11.7222 5.05 11.6616 4.994 11.6616 4.882V4.28C11.6616 4.168 11.7222 4.112 11.8436 4.112H13.4816C13.6029 4.112 13.6636 4.168 13.6636 4.28L13.6496 5.386H13.6636C13.8409 5.00333 14.1256 4.68133 14.5176 4.42C14.9189 4.14933 15.4089 4.014 15.9876 4.014C16.9302 4.014 17.6909 4.336 18.2696 4.98C18.8482 5.61467 19.1376 6.464 19.1376 7.528C19.1376 8.58267 18.8529 9.44133 18.2836 10.104C17.7142 10.7667 16.9536 11.098 16.0016 11.098C15.4229 11.098 14.9376 10.9673 14.5456 10.706C14.1629 10.4353 13.8876 10.1087 13.7196 9.726H13.6776C13.7056 10.0247 13.7196 10.2393 13.7196 10.37V13.212H14.6296C14.7509 13.212 14.8116 13.268 14.8116 13.38V13.982C14.8116 14.094 14.7509 14.15 14.6296 14.15ZM13.6916 7.584C13.6916 8.396 13.9016 9.02133 14.3216 9.46C14.7509 9.89867 15.2642 10.118 15.8616 10.118C16.4682 10.118 16.9722 9.88467 17.3736 9.418C17.7842 8.942 17.9896 8.32133 17.9896 7.556C17.9896 6.78133 17.7842 6.16067 17.3736 5.694C16.9722 5.22733 16.4682 4.994 15.8616 4.994C15.2549 4.994 14.7416 5.22267 14.3216 5.68C13.9016 6.13733 13.6916 6.772 13.6916 7.584ZM26.3811 7.696H21.3411C21.3785 8.47067 21.6211 9.068 22.0691 9.488C22.5265 9.908 23.0398 10.118 23.6091 10.118C24.1785 10.118 24.6638 9.99667 25.0651 9.754C25.4758 9.51133 25.7511 9.27333 25.8911 9.04C25.9658 8.94667 26.0498 8.93267 26.1431 8.998L26.5211 9.376C26.5771 9.432 26.6051 9.48333 26.6051 9.53C26.6051 9.56733 26.5818 9.61867 26.5351 9.684C26.4978 9.74933 26.4138 9.852 26.2831 9.992C26.1525 10.132 25.9658 10.2907 25.7231 10.468C25.4898 10.6453 25.1818 10.7947 24.7991 10.916C24.4258 11.0373 24.0245 11.098 23.5951 11.098C22.6151 11.098 21.7938 10.776 21.1311 10.132C20.4778 9.488 20.1511 8.62467 20.1511 7.542C20.1511 6.45 20.4778 5.59133 21.1311 4.966C21.7845 4.33133 22.5825 4.014 23.5251 4.014C24.4771 4.014 25.2238 4.322 25.7651 4.938C26.3065 5.54467 26.5771 6.366 26.5771 7.402C26.5771 7.43933 26.5771 7.47667 26.5771 7.514C26.5771 7.63533 26.5118 7.696 26.3811 7.696ZM25.4151 6.842C25.3871 6.26333 25.2051 5.80133 24.8691 5.456C24.5331 5.11067 24.0851 4.938 23.5251 4.938C22.9651 4.938 22.4845 5.09667 22.0831 5.414C21.6818 5.73133 21.4438 6.20733 21.3691 6.842H25.4151ZM35.1323 11H33.8023C33.401 11 33.2003 10.804 33.2003 10.412V6.73C33.2003 6.18867 33.0697 5.76867 32.8083 5.47C32.547 5.17133 32.1643 5.022 31.6603 5.022C30.9417 5.022 30.3817 5.316 29.9803 5.904C29.9337 5.96 29.873 6.06267 29.7983 6.212V10.062H30.5403C30.6617 10.062 30.7223 10.118 30.7223 10.23V10.832C30.7223 10.944 30.6617 11 30.5403 11H27.8663C27.745 11 27.6843 10.944 27.6843 10.832V10.23C27.6843 10.118 27.745 10.062 27.8663 10.062H28.6363V5.05H27.8663C27.745 5.05 27.6843 4.994 27.6843 4.882V4.28C27.6843 4.168 27.745 4.112 27.8663 4.112H29.5043C29.6257 4.112 29.6863 4.168 29.6863 4.28L29.6583 5.232H29.7003C30.1857 4.42 30.937 4.014 31.9543 4.014C32.701 4.014 33.2843 4.23333 33.7043 4.672C34.1243 5.11067 34.339 5.70333 34.3483 6.45V10.062H35.1323C35.2537 10.062 35.3143 10.118 35.3143 10.23V10.832C35.3143 10.944 35.2537 11 35.1323 11ZM50.8763 11H47.5023C47.3903 11 47.3343 10.944 47.3343 10.832V10.118C47.3343 10.006 47.3903 9.95 47.5023 9.95H48.5803V6.52H43.3723V9.95H44.4503C44.5717 9.95 44.6323 10.006 44.6323 10.118V10.832C44.6323 10.944 44.5717 11 44.4503 11H41.0903C40.969 11 40.9083 10.944 40.9083 10.832V10.118C40.9083 10.006 40.969 9.95 41.0903 9.95H42.1543V1.998H41.0903C40.969 1.998 40.9083 1.942 40.9083 1.83V1.116C40.9083 1.004 40.969 0.947999 41.0903 0.947999H44.4503C44.5717 0.947999 44.6323 1.004 44.6323 1.116V1.83C44.6323 1.942 44.5717 1.998 44.4503 1.998H43.3723V5.498H48.5803V1.998H47.5023C47.3903 1.998 47.3343 1.942 47.3343 1.83V1.116C47.3343 1.004 47.3903 0.947999 47.5023 0.947999H50.8763C50.9883 0.947999 51.0443 1.004 51.0443 1.116V1.83C51.0443 1.942 50.9883 1.998 50.8763 1.998H49.7983V9.95H50.8763C50.9883 9.95 51.0443 10.006 51.0443 10.118V10.832C51.0443 10.944 50.9883 11 50.8763 11ZM58.0452 7.696H53.0052C53.0425 8.47067 53.2852 9.068 53.7332 9.488C54.1905 9.908 54.7039 10.118 55.2732 10.118C55.8425 10.118 56.3279 9.99667 56.7292 9.754C57.1399 9.51133 57.4152 9.27333 57.5552 9.04C57.6299 8.94667 57.7139 8.93267 57.8072 8.998L58.1852 9.376C58.2412 9.432 58.2692 9.48333 58.2692 9.53C58.2692 9.56733 58.245Line truncated
+</svg>

platform/ui/src/elements/Svg/svgs/ohif-logo-text.svg

@@ -1,3 +1,3 @@
-<svg width="3.73em" height=".25em" viewBox="0 0 224 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 224 15" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.416 5.932C10.416 7.46267 9.954 8.70867 9.03 9.67C8.11533 10.622 6.958 11.098 5.558 11.098C4.16733 11.098 3.00533 10.6173 2.072 9.656C1.13867 8.68533 0.672 7.43933 0.672 5.918C0.672 4.38733 1.15267 3.16467 2.114 2.25C3.07533 1.326 4.22333 0.863999 5.558 0.863999C6.89267 0.863999 8.036 1.326 8.988 2.25C9.94 3.16467 10.416 4.392 10.416 5.932ZM3.052 8.9C3.77067 9.60933 4.606 9.964 5.558 9.964C6.51 9.964 7.34067 9.60933 8.05 8.9C8.75933 8.18133 9.114 7.20133 9.114 5.96C9.114 4.70933 8.75 3.734 8.022 3.034C7.30333 2.32467 6.482 1.97 5.558 1.97C4.634 1.97 3.808 2.32467 3.08 3.034C2.352 3.734 1.988 4.70933 1.988 5.96C1.988 7.20133 2.34267 8.18133 3.052 8.9ZM14.6296 14.15H11.8156C11.6942 14.15 11.6336 14.094 11.6336 13.982V13.38C11.6336 13.268 11.6942 13.212 11.8156 13.212H12.5996V5.05H11.8436C11.7222 5.05 11.6616 4.994 11.6616 4.882V4.28C11.6616 4.168 11.7222 4.112 11.8436 4.112H13.4816C13.6029 4.112 13.6636 4.168 13.6636 4.28L13.6496 5.386H13.6636C13.8409 5.00333 14.1256 4.68133 14.5176 4.42C14.9189 4.14933 15.4089 4.014 15.9876 4.014C16.9302 4.014 17.6909 4.336 18.2696 4.98C18.8482 5.61467 19.1376 6.464 19.1376 7.528C19.1376 8.58267 18.8529 9.44133 18.2836 10.104C17.7142 10.7667 16.9536 11.098 16.0016 11.098C15.4229 11.098 14.9376 10.9673 14.5456 10.706C14.1629 10.4353 13.8876 10.1087 13.7196 9.726H13.6776C13.7056 10.0247 13.7196 10.2393 13.7196 10.37V13.212H14.6296C14.7509 13.212 14.8116 13.268 14.8116 13.38V13.982C14.8116 14.094 14.7509 14.15 14.6296 14.15ZM13.6916 7.584C13.6916 8.396 13.9016 9.02133 14.3216 9.46C14.7509 9.89867 15.2642 10.118 15.8616 10.118C16.4682 10.118 16.9722 9.88467 17.3736 9.418C17.7842 8.942 17.9896 8.32133 17.9896 7.556C17.9896 6.78133 17.7842 6.16067 17.3736 5.694C16.9722 5.22733 16.4682 4.994 15.8616 4.994C15.2549 4.994 14.7416 5.22267 14.3216 5.68C13.9016 6.13733 13.6916 6.772 13.6916 7.584ZM26.3811 7.696H21.3411C21.3785 8.47067 21.6211 9.068 22.0691 9.488C22.5265 9.908 23.0398 10.118 23.6091 10.118C24.1785 10.118 24.6638 9.99667 25.0651 9.754C25.4758 9.51133 25.7511 9.27333 25.8911 9.04C25.9658 8.94667 26.0498 8.93267 26.1431 8.998L26.5211 9.376C26.5771 9.432 26.6051 9.48333 26.6051 9.53C26.6051 9.56733 26.5818 9.61867 26.5351 9.684C26.4978 9.74933 26.4138 9.852 26.2831 9.992C26.1525 10.132 25.9658 10.2907 25.7231 10.468C25.4898 10.6453 25.1818 10.7947 24.7991 10.916C24.4258 11.0373 24.0245 11.098 23.5951 11.098C22.6151 11.098 21.7938 10.776 21.1311 10.132C20.4778 9.488 20.1511 8.62467 20.1511 7.542C20.1511 6.45 20.4778 5.59133 21.1311 4.966C21.7845 4.33133 22.5825 4.014 23.5251 4.014C24.4771 4.014 25.2238 4.322 25.7651 4.938C26.3065 5.54467 26.5771 6.366 26.5771 7.402C26.5771 7.43933 26.5771 7.47667 26.5771 7.514C26.5771 7.63533 26.5118 7.696 26.3811 7.696ZM25.4151 6.842C25.3871 6.26333 25.2051 5.80133 24.8691 5.456C24.5331 5.11067 24.0851 4.938 23.5251 4.938C22.9651 4.938 22.4845 5.09667 22.0831 5.414C21.6818 5.73133 21.4438 6.20733 21.3691 6.842H25.4151ZM35.1323 11H33.8023C33.401 11 33.2003 10.804 33.2003 10.412V6.73C33.2003 6.18867 33.0697 5.76867 32.8083 5.47C32.547 5.17133 32.1643 5.022 31.6603 5.022C30.9417 5.022 30.3817 5.316 29.9803 5.904C29.9337 5.96 29.873 6.06267 29.7983 6.212V10.062H30.5403C30.6617 10.062 30.7223 10.118 30.7223 10.23V10.832C30.7223 10.944 30.6617 11 30.5403 11H27.8663C27.745 11 27.6843 10.944 27.6843 10.832V10.23C27.6843 10.118 27.745 10.062 27.8663 10.062H28.6363V5.05H27.8663C27.745 5.05 27.6843 4.994 27.6843 4.882V4.28C27.6843 4.168 27.745 4.112 27.8663 4.112H29.5043C29.6257 4.112 29.6863 4.168 29.6863 4.28L29.6583 5.232H29.7003C30.1857 4.42 30.937 4.014 31.9543 4.014C32.701 4.014 33.2843 4.23333 33.7043 4.672C34.1243 5.11067 34.339 5.70333 34.3483 6.45V10.062H35.1323C35.2537 10.062 35.3143 10.118 35.3143 10.23V10.832C35.3143 10.944 35.2537 11 35.1323 11ZM50.8763 11H47.5023C47.3903 11 47.3343 10.944 47.3343 10.832V10.118C47.3343 10.006 47.3903 9.95 47.5023 9.95H48.5803V6.52H43.3723V9.95H44.4503C44.5717 9.95 44.6323 10.006 44.6323 10.118V10.832C44.6323 10.944 44.5717 11 44.4503 11H41.0903C40.969 11 40.9083 10.944 40.9083 10.832V10.118C40.9083 10.006 40.969 9.95 41.0903 9.95H42.1543V1.998H41.0903C40.969 1.998 40.9083 1.942 40.9083 1.83V1.116C40.9083 1.004 40.969 0.947999 41.0903 0.947999H44.4503C44.5717 0.947999 44.6323 1.004 44.6323 1.116V1.83C44.6323 1.942 44.5717 1.998 44.4503 1.998H43.3723V5.498H48.5803V1.998H47.5023C47.3903 1.998 47.3343 1.942 47.3343 1.83V1.116C47.3343 1.004 47.3903 0.947999 47.5023 0.947999H50.8763C50.9883 0.947999 51.0443 1.004 51.0443 1.116V1.83C51.0443 1.942 50.9883 1.998 50.8763 1.998H49.7983V9.95H50.8763C50.9883 9.95 51.0443 10.006 51.0443 10.118V10.832C51.0443 10.944 50.9883 11 50.8763 11ZM58.0452 7.696H53.0052C53.0425 8.47067 53.2852 9.068 53.7332 9.488C54.1905 9.908 54.7039 10.118 55.2732 10.118C55.8425 10.118 56.3279 9.99667 56.7292 9.754C57.1399 9.51133 57.4152 9.27333 57.5552 9.04C57.6299 8.94667 57.7139 8.93267 57.8072 8.998L58.1852 9.376C58.2412 9.432 58.2692 9.48333 58.2692 9.53C58.2692 9.56733 58.245Line truncated
 </svg>

platform/ui/src/elements/form/Range.css

@@ -2,6 +2,7 @@
   margin: 0;
   width: 100%;
   -webkit-appearance: none;
+  background-color: transparent;
 }
 
 .range:focus {

platform/ui/src/elements/form/Range.js

@@ -11,7 +11,7 @@ class Range extends React.Component {
 
   handleChange = event => {
     this.setState({ value: event.target.value });
-    if (this.props.onChange) this.props.onChange();
+    if (this.props.onChange) this.props.onChange(event);
   };
 
   render() {
@@ -21,6 +21,7 @@ class Range extends React.Component {
         value={this.state.value}
         min={this.props.min}
         max={this.props.max}
+        step={this.props.step || 1}
         onChange={this.handleChange}
         id={this.props.id}
         className="range"

platform/ui/src/elements/form/Select.css

@@ -34,10 +34,6 @@
 }
 
 .select-ohif:focus {
-  border-color: #aaa;
-  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
-  box-shadow: 0 0 0 3px -moz-mac-focusring;
-  color: #222;
   outline: none;
 }
 

platform/ui/src/elements/form/Select.js

@@ -11,8 +11,9 @@ class Select extends Component {
   }
 
   handleChange = event => {
-    this.setState({ value: event.target.value });
-    if (this.props.onChange) this.props.onChange();
+    const value = event.target.value;
+    this.setState({ value });
+    if (this.props.onChange) this.props.onChange(value);
   };
 
   render() {

platform/ui/src/index.js

@@ -1,4 +1,5 @@
 import {
+  Checkbox,
   CineDialog,
   ExampleDropTarget,
   LayoutButton,
@@ -25,7 +26,7 @@ import {
 import { ICONS, Icon } from './elements';
 
 // Alias this for now as not all dependents are using strict versioning
-import { DropdownMenu as Dropdown } from './elements/form';
+import { DropdownMenu as Dropdown, Range, Select } from './elements/form';
 import ExpandableToolMenu from './viewer/ExpandableToolMenu.js';
 import LayoutManager from './LayoutChooser/LayoutManager.js';
 import LayoutPanelDropTarget from './LayoutChooser/LayoutPanelDropTarget.js';
@@ -38,6 +39,7 @@ import ViewerbaseDragDropContext from './utils/viewerbaseDragDropContext.js';
 export {
   ICONS,
   //
+  Checkbox,
   CineDialog,
   Dropdown,
   ExpandableToolMenu,
@@ -53,8 +55,10 @@ export {
   OverlayTrigger,
   PlayClipButton,
   QuickSwitch,
+  Range,
   RoundedButtonGroup,
   ScrollableArea,
+  Select,
   SelectTree,
   SimpleDialog,
   StudyBrowser,

platform/ui/src/utils/viewerbaseDragDropContext.js

@@ -1,13 +1,21 @@
-import { DragDropContext } from 'react-dnd';
+import React from 'react';
+import { DndProvider } from "react-dnd";
+import HTML5Backend from 'react-dnd-html5-backend';
 import TouchBackend from 'react-dnd-touch-backend';
 
+const isTouchDevice = !!('ontouchstart' in window || navigator.maxTouchPoints);
+
 // See https://github.com/react-dnd/react-dnd/issues/186#issuecomment-335429067
 // https://github.com/react-dnd/react-dnd/issues/186#issuecomment-282789420
-// TODO: Find a way for this context to be used in the parent application as well.
-
+//
 // http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context
 export default function viewerbaseDragDropContext(DecoratedClass) {
-  return DragDropContext(TouchBackend({ enableMouseEvents: true }), null, true)(
-    DecoratedClass
+  const backend = isTouchDevice ? TouchBackend : HTML5Backend;
+  const opts = isTouchDevice ? { enableMouseEvents: true } : {};
+
+  return (props) => (
+    <DndProvider backend={backend} opts={opts}>
+      <DecoratedClass {...props}/>
+    </DndProvider>
   );
 }

platform/ui/src/viewer/ExpandableToolMenu.js

@@ -108,16 +108,8 @@ class ExpandableToolMenu extends React.Component {
   };
 
   render() {
-    return (
-      <OverlayTrigger
-        key="menu-button"
-        trigger="click"
-        placement="bottom"
-        rootClose={true}
-        handleHide={this.onOverlayHide}
-        onClick={this.onExpandableToolClick}
-        overlay={this.toolbarMenuOverlay()}
-      >
+    const getToolBarButtonComponent = () => {
+      return (
         <ToolbarButton
           key="menu-button"
           type="tool"
@@ -128,6 +120,22 @@ class ExpandableToolMenu extends React.Component {
           isExpandable={true}
           isExpanded={this.state.isExpanded}
         />
+      );
+    };
+
+    const toolbarComponent = getToolBarButtonComponent();
+
+    return (
+      <OverlayTrigger
+        key="menu-button"
+        trigger="click"
+        placement="bottom"
+        rootClose={true}
+        handleHide={this.onOverlayHide}
+        onClick={this.onExpandableToolClick}
+        overlay={this.toolbarMenuOverlay()}
+      >
+        {toolbarComponent}
       </OverlayTrigger>
     );
   }

platform/viewer/.webpack/webpack.commonjs.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const path = require('path');
 const merge = require('webpack-merge');
 const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
@@ -54,6 +55,9 @@ module.exports = (env, argv) => {
         template: `${PUBLIC_DIR}/html-templates/${HTML_TEMPLATE}`,
         filename: 'index.html',
       }),
+      new webpack.optimize.LimitChunkCountPlugin({
+           maxChunks: 1
+       })
     ],
   });
 };