chore(release): publish [skip ci]

- @ohif/extension-cornerstone@1.3.1
 - @ohif/extension-vtk@0.52.3
 - @ohif/ui@0.53.2
 - @ohif/viewer@1.5.1

.circleci/config.yml

@@ -9,9 +9,11 @@ version: 2.1
 # create pull request previews and to update `https://docs.ohif.org`
 ###
 
+## https://github.com/cypress-io/circleci-orb
+##
 orbs:
   codecov: codecov/codecov@1.0.5
-  cypress: cypress-io/cypress@1.8.0
+  cypress: cypress-io/cypress@1.10.0
 
 defaults: &defaults
   docker:
@@ -21,13 +23,11 @@ defaults: &defaults
   working_directory: ~/repo
 
 jobs:
-  PR_UNIT_TESTS:
+  CHECKOUT:
     <<: *defaults
-
     steps:
       # Enable yarn workspaces
       - run: yarn config set workspaces-experimental true
-
       # Checkout code and ALL Git Tags
       - checkout:
           post:
@@ -47,6 +47,16 @@ jobs:
           paths:
             - ~/.cache ## Cache yarn and Cypress
           key: yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      # Persist :+1:
+      - persist_to_workspace:
+          root: ~/repo
+          paths: .
+
+  UNIT_TESTS:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/repo
 
       # RUN TESTS
       - run:
@@ -86,72 +96,7 @@ jobs:
           root: ~/repo
           paths: .
 
-  MERGE_UNIT_TESTS:
-    <<: *defaults
-
-    steps:
-      # Enable yarn workspaces
-      - run: yarn config set workspaces-experimental true
-
-      # Checkout code and ALL Git Tags
-      - checkout:
-          post:
-            - git fetch --all
-      - restore_cache:
-          name: Restore Yarn and Cypress Package Cache
-          keys:
-            # when lock file changes, use increasingly general patterns to restore cache
-            - yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
-            - yarn-packages-v1-{{ .Branch }}-
-            - yarn-packages-v1-
-      - run:
-          name: Install Dependencies
-          command: yarn install --frozen-lockfile
-      - save_cache:
-          name: Save Yarn Package Cache
-          paths:
-            - ~/.cache ## Cache yarn and Cypress
-          key: yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
-
-      # RUN TESTS
-      - run:
-          name: 'JavaScript Test Suite'
-          command: yarn run test:unit:ci
-
-      # PLATFORM/VIEWER
-      - run:
-          name: 'VIEWER: Combine report output'
-          command: |
-            viewerCov="/home/circleci/repo/platform/viewer/coverage"
-            touch "${viewerCov}/reports"
-            cat "${viewerCov}/clover.xml" >> "${viewerCov}/reports"
-            echo "\<<\<<\<< EOF" >> "${viewerCov}/reports"
-            cat "${viewerCov}/lcov.info" >>"${viewerCov}/reports"
-            echo "\<<\<<\<< EOF" >> "${viewerCov}/reports"
-      - codecov/upload:
-          file: '/home/circleci/repo/platform/viewer/coverage/reports'
-          flags: 'viewer'
-
-      # PLATFORM/CORE
-      - run:
-          name: 'CORE: Combine report output'
-          command: |
-            coreCov="/home/circleci/repo/platform/core/coverage"
-            touch "${coreCov}/reports"
-            cat "${coreCov}/clover.xml" >> "${coreCov}/reports"
-            echo "\<<\<<\<< EOF" >> "${coreCov}/reports"
-            cat "${coreCov}/lcov.info" >> "${coreCov}/reports"
-            echo "\<<\<<\<< EOF" >> "${coreCov}/reports"
-      - codecov/upload:
-          file: '/home/circleci/repo/platform/core/coverage/reports'
-          flags: 'core'
-
-      # Persist :+1:
-      - persist_to_workspace:
-          root: ~/repo
-          paths: .
-
-  npm_publish:
+  NPM_PUBLISH:
     <<: *defaults
     steps:
       - attach_workspace:
@@ -175,7 +120,7 @@ jobs:
           root: ~/repo
           paths: .
 
-  docs_publish:
+  DOCS_PUBLISH:
     <<: *defaults
     steps:
       - attach_workspace:
@@ -192,25 +137,25 @@ jobs:
       - run: chmod +x ~/repo/.circleci/build-and-publish-docs.sh
       - run: ~/repo/.circleci/build-and-publish-docs.sh
 
-  docker_publish:
+  DOCKER_PUBLISH:
     <<: *defaults
     steps:
       - attach_workspace:
           at: ~/repo
-      - setup_remote_docker:
-          docker_layer_caching: true
+#     - setup_remote_docker:
+#         docker_layer_caching: true
       - 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
@@ -221,7 +166,7 @@ jobs:
               docker push ohif/$IMAGE_NAME:latest
             fi
 
-  viewer_demo_build:
+  VIEWER_DEMO_BUILD:
     <<: *defaults
     steps:
       - attach_workspace:
@@ -230,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: |
@@ -246,15 +191,15 @@ jobs:
           root: ~/repo
           paths: .
 
-  viewer_demo_publish:
+  VIEWER_DEMO_PUBLISH:
     working_directory: ~/repo
     docker:
       - image: google/cloud-sdk
     steps:
       - attach_workspace:
           at: ~/repo
-      - setup_remote_docker:
-          docker_layer_caching: true
+#     - setup_remote_docker:
+#         docker_layer_caching: true
       - run:
           name: Deploy latest version to viewer.ohif.org
           command: |
@@ -272,71 +217,127 @@ workflows:
   # PULL REQUESTS
   PR_CHECKS:
     jobs:
-      - PR_UNIT_TESTS:
+      - CHECKOUT:
           filters:
             branches:
               ignore:
                 - master
                 - feature/*
                 - hotfix/*
-      # Cypress job added by `cypress-io` orb
+      - UNIT_TESTS:
+          requires:
+            - CHECKOUT
+      # E2E: PWA
       - cypress/run:
+          name: 'E2E: PWA'
           pre-steps:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
                 add wait-on' # Use yarn latest
           yarn: true
-          store_artifacts: true
-          start: yarn run dev
-          wait-on: 'http://localhost:3000'
-          no-workspace: true # Don't persist workspace
+          store_artifacts: false
           working_directory: platform/viewer
+          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_test_results:
-                path: cypress/results
+            - store_artifacts:
+                path: platform/viewer/cypress/screenshots
           requires:
-            - PR_UNIT_TESTS
+            - UNIT_TESTS
+      # E2E: script-tag
+      - cypress/run:
+          name: 'E2E: Script Tag'
+          pre-steps:
+            - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
+                add wait-on' # Use yarn latest
+          yarn: 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
 
   # MERGE TO MASTER
   RELEASE:
     jobs:
-      - MERGE_UNIT_TESTS:
+      - CHECKOUT:
           filters:
             branches:
               only: master
-      # Cypress job added by `cypress-io` orb
+      - UNIT_TESTS:
+          requires:
+            - CHECKOUT
+      # E2E: PWA + Persist
       - cypress/run:
+          name: 'E2E: PWA'
           pre-steps:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
                 add wait-on' # Use yarn latest
           yarn: true
           record: true
           store_artifacts: true
-          start: yarn run dev
-          wait-on: 'http://localhost:3000'
           working_directory: platform/viewer
+          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:
-            - MERGE_UNIT_TESTS
+            - UNIT_TESTS
+      # E2E: script-tag
+      - cypress/run:
+          name: 'E2E: Script Tag'
+          pre-steps:
+            - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
+                add wait-on' # Use yarn latest
+          yarn: 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
+            - store_test_results:
+                path: cypress/results
+          requires:
+            - UNIT_TESTS
       # Update NPM
-      - npm_publish:
+      - NPM_PUBLISH:
           requires:
-            - cypress/run
+            - 'E2E: Script Tag'
+            - 'E2E: PWA'
       # Update docs.ohif.org
-      - docs_publish:
+      - DOCS_PUBLISH:
           requires:
-            - cypress/run
-      # Update hub.docker.org
-      # - docker_publish:
-      #     requires:
-      #       - npm_publish
+            - 'E2E: Script Tag'
+            - 'E2E: PWA'
+      - VIEWER_DEMO_BUILD:
+          requires:
+            - 'E2E: Script Tag'
+            - 'E2E: PWA'
       # Update viewer.ohif.org
-      - viewer_demo_build:
+      - VIEWER_DEMO_PUBLISH:
           requires:
-            - cypress/run
-      - viewer_demo_publish:
+            - VIEWER_DEMO_BUILD
+      # Update hub.docker.org
+      - DOCKER_PUBLISH:
           requires:
-            - viewer_demo_build
+            - 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 🎉'

.gitignore

@@ -28,7 +28,7 @@ example/deps/
 docker/dcm4che/dcm4che-arc
 
 # Cypress test results
-cypress/videos/
+videos/
 
 # Locize settings
-.locize
+.locize

.netlify/www/_redirects

@@ -0,0 +1,6 @@
+# Specific to our deploy-preview
+# Our docs are published using CircleCI + GitBook
+# Confgure redirects using netlify.toml
+
+# PWA Demo
+/pwa/* /pwa/index.html 200

.webpack/webpack.commonjs.js

@@ -1,3 +1,4 @@
+const merge = require('webpack-merge');
 const webpackBase = require('./webpack.base.js');
 const cssToJavaScriptRule = require('./rules/cssToJavaScript.js');
 const stylusToJavaScriptRule = require('./rules/stylusToJavaScript.js');

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`
 
@@ -273,7 +272,6 @@ MIT © [OHIF](https://github.com/OHIF)
 [netlify-image]: https://api.netlify.com/api/v1/badges/a5d369ab-18a6-41c3-bcde-83805205ac7f/deploy-status
 [netlify-url]: https://app.netlify.com/sites/ohif/deploys
 [all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
-[contributing-url]: https://github.com/OHIF/Viewers/blob/master/CONTRIBUTING.md
 [circleci-image]: https://circleci.com/gh/OHIF/Viewers.svg?style=svg
 [circleci-url]: https://circleci.com/gh/OHIF/Viewers
 [codecov-image]: https://codecov.io/gh/OHIF/Viewers/branch/master/graph/badge.svg

docs/_redirects

@@ -0,0 +1,3 @@
+# Netlify redirects
+# SPA rules for our docs
+/*    /index.html   200

docs/latest/README.md

@@ -40,7 +40,7 @@ Check out these helpful links:
 - Ready to dive into some code? Check out our
   [Getting Started Guide](./essentials/getting-started.md).
 - We're an active, vibrant community.
-  [Learn how you can be more involved.](./contributing.md)
+  [Learn how you can be more involved.](./contributing/index.md)
 - Feeling lost? Read our [help page](./help.md).
 
 <!--

docs/latest/SUMMARY.md

@@ -46,6 +46,6 @@
 ---
 
 - [FAQ](frequently-asked-questions.md)
-- [Contributing](contributing.md)
+- [Contributing](contributing/index.md)
 - [Browser Support](browser-support.md)
 - [Help](help.md)

docs/latest/advanced/architecture.md

@@ -12,28 +12,48 @@ architected, and the role each of it's dependent libraries plays.
 
 ## Overview
 
-The [`OHIF/Viewers`][viewers-project] project contains the source code for the
-OHIF Medical Imaging Viewer. It is effectively a React [progressive web
-app][pwa] (PWA) that combines the business logic housed in
-[`OHIF/ohif-core`][core] and the components in our React Component library
-[`OHIF/react-viewerbase`][component-library]. It provides customization for
-common use cases through [configuration][configuration] and for adding
-functionality via [extensions][extensions].
+The [OHIF Medical Image Viewing Platform][viewers-project] is maintained as a
+[`monorepo`][monorepo]. This means that this repository, instead of containing a
+single project, contains many projects. If you explore our project structure,
+you'll see the following:
+
+```bash
+.
+├── extensions
+│   ├── _example            # Skeleton of example extension
+│   ├── cornerstone         # 2D images w/ Cornerstone.js
+│   ├── dicom-html          # Structured Reports as HTML in viewport
+│   ├── dicom-microscopy    # Whole slide microscopy viewing
+│   ├── dicom-pdf           # View DICOM wrapped PDFs in viewport
+│   └── vtk                 # MPR and Volume support w/ VTK.js
+│
+├── platform
+│   ├── core                # Business Logic
+│   ├── i18n                # Internationalization Support
+│   ├── ui                  # React component library
+│   └── viewer              # Connects platform and extension projects
+│
+├── ...                     # misc. shared configuration
+├── lerna.json              # MonoRepo (Lerna) settings
+├── package.json            # Shared devDependencies and commands
+└── README.md
+```
+
+Continue reading to see how these libraries work together to create the OHIF
+Viewer.
 
 ### Business Logic
 
-Our goal is to maintain the majority of our business logic in
-[`OHIF/ohif-core`](https://github.com/OHIF/ohif-core). `ohif-core` offers
-pre-packaged solutions for features common to Web-based medical imaging viewers.
-For example:
+The [`@ohif/core`][core-github] project offers pre-packaged solutions for
+features common to Web-based medical imaging viewers. For example:
 
 - Hotkeys
-- DICOM Web
+- DICOM Web requests
 - Hanging Protocols
 - Managing a study's measurements
 - Managing a study's DICOM metadata
 - A flexible pattern for extensions
-- [And many others](https://github.com/OHIF/ohif-core/blob/master/src/index.js#L49-L69)
+- And many others
 
 It does this while remaining decoupled from any particular view library or
 rendering logic. While we use it to power our React Viewer, it can be used with
@@ -41,20 +61,42 @@ Vue, React, Vanilla JS, or any number of other frameworks.
 
 ### React Component Library
 
-[`OHIF/react-viewerbase`](https://github.com/OHIF/react-viewerbase) is a React
-Component library that contains the reusable components that power the OHIF
-Viewer. It allows us to build, compose, and test components in isolation; easing
-the development process by reducing the need to stand-up a local PACS with test
-case data.
+[`@ohif/ui`][ui-github] is a React Component library that contains the reusable
+components that power the OHIF Viewer. It allows us to build, compose, and test
+components in isolation; easing the development process by reducing the need to
+stand-up a local PACS with test case data.
+
+Extension authors can also use these same components when building their
+extension's UI; allowing for a consistent look and feel with the rest of the
+application.
 
 [Check out our component library!](https://react.ohif.org/)
 
-### Misc. Extensions
+### Internationalization (i18n)
 
-Want to add custom logic or UI Components to the OHIF Viewer, but don't want to
-maintain a fork? We expose common integration points via
-[extensions](./extensions.md) to make that possible. For a list of extensions
-maintained by OHIF,
+...
+
+### The Viewer
+
+...
+
+### Extensions & Configuration
+
+While OHIF maintains several high value and commonly requested features in its
+own extensions, there are many instances where one may wish to further extend
+the viewer. Some common use cases include:
+
+- Adding AI/ML tools and insights
+- Custom workflows for guided diagnosis
+- Collecting specific annotations for training data or reports
+- Authentication and granular permissions
+- Teleconsultation workflow, image comments, and tracking
+- Adding surgical templating tools and reports
+- and many others
+
+We expose common integration points via [extensions](./extensions.md) to make
+this possible. The viewer and many of our own extensions also offer
+[configuration][configuration]. For a list of extensions maintained by OHIF,
 [check out this helpful table](./extensions.html#ohif-maintained-extensions).
 
 If you find yourself thinking "I wish the Viewer could do X", and you can't
@@ -67,15 +109,14 @@ looking for ways to improve our extensibility ^\_^
 
 This diagram is a conceptual illustration of how the Viewer is architected.
 
-1. (optional) `extensions` can be registered with `ohif-core`'s extension
+1. (optional) `extensions` can be registered with `@ohif/core`'s extension
    manager
-2. `ohif-core` provides bussiness logic and a way for `viewer` to access
+2. `@ohif/core` provides bussiness logic and a way for `@ohif/viewer` to access
    registered extensions
-3. The `viewer` composes and provides data to components from our component
-   library (`react-viewerbase`)
-4. The `viewer` can be built and served as a stand-alone PWA, or as an
-   embeddable package
-   ([`ohif-viewer`](https://www.npmjs.com/package/ohif-viewer))
+3. The `@ohif/viewer` composes and provides data to components from our
+   component library (`@ohif/ui`)
+4. The `@ohif/viewer` can be built and served as a stand-alone PWA, or as an
+   embeddable package ([`@ohif/viewer`][viewer-npm])
 
 ![Architecture Diagram](../assets/img/architecture-diagram.png)
 
@@ -83,17 +124,17 @@ This diagram is a conceptual illustration of how the Viewer is architected.
 
 ## Common Questions
 
-> When should I use the packaged source `ohif-viewer` versus building a PWA from
-> the source?
+> When should I use the packaged source `@ohif/viewer` versus building a PWA
+> from the source?
 
 ...
 
 > Can I create my own Viewer using Vue.js or Angular.js?
 
 You can, but you will not be able to leverage as much of the existing code and
-components. `ohif-core` could still be used for business logic, and to provide a
-model for extensions. `react-viewerbase` would then become a guide for the
-components you would need to recreate.
+components. `@ohif/core` could still be used for business logic, and to provide
+a model for extensions. `@ohif/ui` would then become a guide for the components
+you would need to recreate.
 
 <!--
   Links
@@ -101,9 +142,10 @@ components you would need to recreate.
 
 <!-- prettier-ignore-start -->
 [viewers-project]: https://github.com/OHIF/Viewers
+[viewer-npm]: https://www.npmjs.com/package/@ohif/viewer
 [pwa]: https://developers.google.com/web/progressive-web-apps/
-[core]: https://github.com/OHIF/ohif-core
-[component-library]: https://github.com/OHIF/react-viewerbase
 [configuration]: ../essentials/configuration.md
-[extensions]: ./extensions.m
+[extensions]: ./extensions.md
+[core-github]: https://github.com/OHIF/viewers/platform/core
+[ui-github]: https://github.com/OHIF/Viewers/platform/ui
 <!-- prettier-ignore-end -->

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/contributing.md

@@ -1,103 +0,0 @@
-# Contributing
-
-## I would like to contribute code - how do I do this?
-
-Fork the repository, make your change and submit a pull request.
-
-- The OHIF Viewer consists of code from three different repositories. Make sure
-  your change is modifying the appropriate one:
-  - `ohif-core`: Business Logic
-  - `react-viewerbase`: Reusable React Component Library
-  - `Viewers`: The glue, PWA, and primary extension point
-- At a minimum, you may want to read the following documentation:
-  - [Essentials: Getting Started](./essentials/getting-started.md)
-  - [Advanced: Architecture](./advanced/architecture.md)
-
-### When changes impact multiple repositories
-
-This is a particularly tricky scenario. We don't want to publish code in one
-repository, just so we can test and complete the other half of its requirements
-in another. Thankfully, there are a couple of ways you can test unpublished
-dependent changes locally before publishing:
-
-- [Use `yarn link`](https://yarnpkg.com/en/docs/cli/link)
-
-For example if you are working on `ohif-core` and would like to use your local
-version to debug a problem in `Viewers`, simply run yarn link inside of the
-`ohif-core` project.
-
-- If you're experiencing issues with `yarn link`,
-  [try `yalc`](https://github.com/whitecolor/yalc)
-
-Yalc provides an improved workflow as we add more and more dependent packages
-that are "in-progress". This comes into play as we begin working on extensions
-and their dependencies.
-
-```js
-// Install yalc for the first time
-yarn global add yalc
-
-// EXAMPLE: using an in-development version of ohif-core w/ Viewers locally
-// 1. Navigate to ohif-core's project root
-yarn install
-yalc publish
-
-// 2. Run the following after each change to ohif-core
-yarn build
-yalc push .
-
-// 3. Use the local package in our Viewers project. Navigate to the Viewers
-//    Project root.
-yarn install
-yalc add ohif-core
-yarn run dev
-```
-
-## Any guidance on submitting changes?
-
-While we do appreciate code contributions, triaging and integrating contributed
-code changes can be very time consuming. Please consider the following tips when
-working on your pull requests:
-
-- Functionality is appropriate for the repository. Consider creating a GitHub
-  issue to discuss your suggested changes.
-- The scope of the pull request is not too large. Please consider separate pull
-  requests for each feature as big pull requests are very time consuming to
-  understand.
-
-We will provide feedback on your pull requests as soon as possible. Following
-the tips above will help ensure your changes are reviewed.
-
-## Testing contribution pull requests
-
-OHIF uses [netlify](netlify.com) so that pull requests are autogenerated and
-available for testing.
-
-For example, [this url][example-url] allows you to test [pull request 237, the
-request that created this FAQ entry,][pr-237] using data pulled from Amazon S3.
-
-Replacing the number 237 in the link below with your pull request number should
-let you test it as well and you can use this link for discussions on github
-without requiring reviewers to download and build your branch.
-
-```bash
-https://deploy-preview-237--ohif.netlify.com/viewer/?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/sampleDICOM.json
-```
-
-If you have made a documentation change, a link like this will let you preview
-the gitbook generated by the pull request:
-
-```bash
-https://deploy-preview-237--ohif.netlify.com/contributing.html
-```
-
-<!--
-  Links
-  -->
-
-<!-- prettier-ignore-start -->
-
-[example-url]: https://deploy-preview-237--ohif.netlify.com/viewer/?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/sampleDICOM.json
-[pr-237]: https://github.com/OHIF/Viewers/pull/237
-
-<!-- prettier-ignore-end -->

docs/latest/contributing/index.md

@@ -0,0 +1,146 @@
+# Contributing
+
+## How can I help?
+
+Fork the repository, make your change and submit a pull request. If you would
+like to discuss the changes you intend to make to clarify where or how they
+should be implemented, please don't hesitate to create a new issue. At a
+minimum, you may want to read the following documentation:
+
+- [Essentials: Getting Started](./essentials/getting-started.md)
+- [Advanced: Architecture](./advanced/architecture.md)
+
+Pull requests that are:
+
+- Small
+- [Well tested](./testing.md)
+- Decoupled
+
+Are much more likely to get reviewed and merged in a timely manner.
+
+## When changes impact multiple repositories
+
+While this can be tricky, we've tried to reduce how often this situation crops
+up this with our [recent switch to a monorepo][monorepo]. Our maintained
+extensions, ui components, internationalization library, and business logic can
+all be developed by simply running `yarn run dev` from the repository root.
+
+Testing the viewer with locally developed, unpublished package changes from a
+package outside of the monorepo is most common with extension development. Let's
+demonstrate how to accomplish this with two commonly forked extension
+dependencies:
+
+### `cornerstone-tools`
+
+On your local file system:
+
+```bash
+# code/my-projects/
+.
+├── cornerstonejs/cornerstone-tools
+└── ohif/viewers
+```
+
+- Open a terminal/shell
+- Navigate to `cornerstonejs/cornerstone-tools`
+  - `npm install`
+  - [`yarn link`](https://yarnpkg.com/en/docs/cli/link)
+  - `npm run dev`
+- Open a new terminal/shell
+- Navigate to `ohif/viewers`.
+  - `yarn install`
+  - [`yarn link cornerstone-tools`](https://yarnpkg.com/en/docs/cli/link)
+  - `yarn run dev`
+
+As you make changed to `cornerstone-tools`, and it's output is rebuilt, you
+should see the following behavior:
+
+<div style="text-align: center;">
+  <a href="/assets/img/cornerstone-tools-link.gif">
+    <img src="/assets/img/cornerstone-tools-link.gif" alt="Example of linked cornerstone-tools package" style="margin: 0 auto; max-width: 500px;" />
+  </a>
+  <div><i>example of linked cornerstone-tools package</i></div>
+</div>
+
+If you wish to stop using your local package, run the following commands in the
+`ohif/viewers` repository root:
+
+- `yarn unlink cornerstone-tools`
+- `yarn install --force`
+
+### `react-vtkjs-viewport`
+
+On your local file system:
+
+```bash
+# code/my-projects/
+.
+├── ohif/react-vtkjs-viewport
+└── ohif/viewers
+```
+
+- Open a terminal/shell
+- Navigate to `ohif/react-vtkjs-viewport`
+  - `yarn install`
+  - [`yarn link`](https://yarnpkg.com/en/docs/cli/link)
+  - `yarn run start`
+- Open a new terminal/shell
+- Navigate to `ohif/viewers`.
+  - `yarn install`
+  - [`yarn link react-vtkjs-viewport`](https://yarnpkg.com/en/docs/cli/link)
+  - `yarn run dev`
+
+#### Other linkage notes
+
+We're still working out some of the kinks with local package development as
+there are a lot of factors that can influence the behavior of our development
+server and bundler. If you encounter issues not addressed here, please don't
+hesitate to reach out on GitHub.
+
+## Any guidance on submitting changes?
+
+While we do appreciate code contributions, triaging and integrating contributed
+code changes can be very time consuming. Please consider the following tips when
+working on your pull requests:
+
+- Functionality is appropriate for the repository. Consider creating a GitHub
+  issue to discuss your suggested changes.
+- The scope of the pull request is not too large. Please consider separate pull
+  requests for each feature as big pull requests are very time consuming to
+  understand.
+
+We will provide feedback on your pull requests as soon as possible. Following
+the tips above will help ensure your changes are reviewed.
+
+## Testing contribution pull requests
+
+OHIF uses [netlify](netlify.com) so that pull requests are autogenerated and
+available for testing.
+
+For example, [this url][example-url] allows you to test [pull request 237, the
+request that created this FAQ entry,][pr-237] using data pulled from Amazon S3.
+
+Replacing the number 237 in the link below with your pull request number should
+let you test it as well and you can use this link for discussions on github
+without requiring reviewers to download and build your branch.
+
+```bash
+https://deploy-preview-237--ohif.netlify.com/viewer/?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/sampleDICOM.json
+```
+
+If you have made a documentation change, a link like this will let you preview
+the gitbook generated by the pull request:
+
+```bash
+https://deploy-preview-237--ohif.netlify.com/contributing.html
+```
+
+<!--
+  Links
+  -->
+
+<!-- prettier-ignore-start -->
+[example-url]: https://deploy-preview-237--ohif.netlify.com/viewer/?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/sampleDICOM.json
+[pr-237]: https://github.com/OHIF/Viewers/pull/237
+[monorepo]: https://github.com/OHIF/Viewers/issues/768
+<!-- prettier-ignore-end -->

docs/latest/deployment/index.md

@@ -1,11 +1,11 @@
 # Deployment
 
 The OHIF Viewer can be embedded in other web applications via it's [packaged
-script source][ohif-viewer-npm], or served up as a stand-alone PWA ([progressive
-web application][pwa-url]) by building and hosting a collection of static
-assets. In either case, you will need to configure your instance of the Viewer
-so that it can connect to your data source (the database or PACS that provides
-the data your Viewer will display).
+script source][viewer-npm], or served up as a stand-alone PWA ([progressive web
+application][pwa-url]) by building and hosting a collection of static assets. In
+either case, you will need to configure your instance of the Viewer so that it
+can connect to your data source (the database or PACS that provides the data
+your Viewer will display).
 
 ## Overview
 
@@ -196,8 +196,7 @@ Please feel free to suggest or contribute your own recipes.
   -->
 
 <!-- prettier-ignore-start -->
-
-[ohif-viewer-npm]: https://www.npmjs.com/package/ohif-viewer
+[viewer-npm]: https://www.npmjs.com/package/@ohif/viewer
 [pwa-url]: https://developers.google.com/web/progressive-web-apps/
 [static-assets-url]: https://www.maxcdn.com/one/visual-glossary/static-content/
 [app-store]: https://medium.freecodecamp.org/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b
@@ -206,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/build-for-production.md

@@ -19,9 +19,6 @@ _With Git:_
 ```bash
 # Clone the remote repository to your local machine
 git clone https://github.com/OHIF/Viewers.git
-
-# Make sure the local code reflects the `react` version of the OHIF Viewer
-git checkout react
 ```
 
 More on: _[`git clone`](https://git-scm.com/docs/git-clone),
@@ -29,7 +26,7 @@ More on: _[`git clone`](https://git-scm.com/docs/git-clone),
 
 _From .zip:_
 
-[OHIF/Viewers: react.zip](https://github.com/OHIF/Viewers/archive/react.zip)
+[OHIF/Viewers: react.zip](https://github.com/OHIF/Viewers/archive/master.zip)
 
 ### Restore Dependencies & Build
 
@@ -37,20 +34,24 @@ Open your terminal, and navigate to the directory containing the source files.
 Next run these commands:
 
 ```js
+// If you haven't already, enable yarn workspaces
+yarn config set workspaces-experimental true
+
 // Restore dependencies
 yarn install
 
 // Build source code for production
-yarn run build:web
+yarn run build
 ```
 
-If everything worked as expected, you should have a new `build/` directory in
-the project's folder. It should roughly resemble the following:
+If everything worked as expected, you should have a new `dist/` directory in the
+project's folder. It should roughly resemble the following:
 
 ```bash
-build
-├── config/
-├── static/
+dist/
+├── app-config.js
+├── app.bundle.js
+├── app.css
 ├── index.html
 ├── manifest.json
 ├── service-worker.js
@@ -64,60 +65,15 @@ how to configure the project for your own imaging archive below.
 
 ### Configuration
 
-> This step assumes you have an imaging archive. If you need assistance setting
-> one up, check out the [`Data Source` Guide](./../../essentials/data-source.md)
-> or a deployment recipe that contains an open source Image Archive
+The configuration for our viewer is in the `<root>platform/viewer/public/config`
+directory. Our build process knows which configuration file to use based on the
+`APP_CONFIG` environment variable. By default, its value is
+[`config/default.js`][default-config]. The majority of the viewer's features,
+and registered extension's features, are configured using this file.
 
-#### How it Works
-
-The configuration for our project is in the `/public/config` directory. Our
-build process knows which configuration file to use based on the `APP_CONFIG`
-environment variable. By default, its value is
-[`default.js`](https://github.com/OHIF/Viewers/blob/master/platform/viewer/public/config/default.js).
-When we build, the `%APP_CONFIG%` value in
-our[`/public/index.html`](https://github.com/OHIF/Viewers/blob/master/platform/viewer/public/index.html)
-file is substituted for the correct configuration file's name. This sets
-the`window.config` equal to our configuration file's value.
-
-#### How do I configure my project?
-
-The simplest way is to update the existing default config:
-
-_/public/config/default.js_
-
-```js
-window.config = {
-  routerBasename: '/',
-  servers: {
-    dicomWeb: [
-      {
-        name: 'DCM4CHEE',
-        wadoUriRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado',
-        qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
-        wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
-        qidoSupportsIncludeField: true,
-        imageRendering: 'wadors',
-        thumbnailRendering: 'wadors',
-        requestOptions: {
-          requestFromBrowser: true,
-        },
-      },
-    ],
-  },
-};
-```
-
-You can also create a new config file and specify its path relative to the build
-output's root by setting the `APP_CONFIG` environment variable. You can set the
-value of this environment variable a few different ways:
-
-- [Add a temporary environment variable in your shell](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-temporary-environment-variables-in-your-shell)
-- [Add environment specific variables in `.env` file(s)](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env)
-- Using the `cross-env` package in an npm script:
-  - `"build": "cross-env APP_CONFIG=config/my-config.js react-scripts build"`
-
-After updating the configuration, `yarn run build:web` to generate updated build
-output.
+The easiest way to apply your own configuration is to modify the `default.js`
+file. For more advanced cofiguration options, check out our
+[configuration essentials guide](/essentials/configuration.md).
 
 ## Next Steps
 
@@ -141,7 +97,7 @@ _Advanced_
 ### Testing Build Output Locally
 
 A quick way to test your build output locally is to spin up a small webserver.
-You can do this by running the following commands in the `build/` output
+You can do this by running the following commands in the `dist/` output
 directory:
 
 ```js
@@ -162,8 +118,7 @@ web application. For a starting point, check out this repository's own use of:
 
 - [CircleCI][circleci]: [config.yaml][circleci-config]
 - [Netlify][netlify]: [netlify.toml][netlify.toml] |
-  [generateStaticSite.sh][generatestaticsite.sh]
-- [Semantic-Release][semantic-release]: [.releaserc][releaserc]
+  [build-deploy-preview.sh][build-deploy-preview.sh]
 
 ## Troubleshooting
 
@@ -173,10 +128,8 @@ web application. For a starting point, check out this repository's own use of:
 
 <!-- prettier-ignore-start -->
 [circleci]: https://circleci.com/gh/OHIF/Viewers
-[circleci-config]: https://github.com/OHIF/Viewers/blob/react/.circleci/config.yml
+[circleci-config]: https://github.com/OHIF/Viewers/blob/master/.circleci/config.yml
 [netlify]: https://app.netlify.com/sites/ohif/deploys
-[netlify.toml]: https://github.com/OHIF/Viewers/blob/react/netlify.toml
-[generateStaticSite.sh]: https://github.com/OHIF/Viewers/blob/react/generateStaticSite.sh
-[semantic-release]: https://semantic-release.gitbook.io/semantic-release/
-[releaserc]: https://github.com/OHIF/Viewers/blob/react/.releaserc
+[netlify.toml]: https://github.com/OHIF/Viewers/blob/master/netlify.toml
+[build-deploy-preview.sh]: https://github.com/OHIF/Viewers/blob/master/.netlify/build-deploy-preview.sh
 <!-- prettier-ignore-end -->

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

@@ -12,35 +12,18 @@ include tags. Here's how it works:
 
 <ul>
   <li>
-    <a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-      <code>bootstrap@3.3.7</code>
+    <a href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap">
+      <code>Google Font: Roboto</code>
     </a>
   </li>
   <li>
-    <a href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap">
-      <code>Google Fonts, Sanchez & Roboto</code>
-    </a>
-  </li>
-  <li>
-    <a href="https://unpkg.com/react@16/umd/react.production.min.js">
-      <code>react@16.8.6</code>
-    </a>
-  </li>
-  <li>
-    <a href="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js">
-      <code>react-dom@16.8.6</code>
-    </a>
-  </li>
-  <li>
-    <a href="https://unpkg.com/ohif-viewer/dist/index.umd.js">
-      <code>ohif-viewer@latest</code>
+    <a href="https://unpkg.com/@ohif/viewer">
+      <code>@ohif/viewer@latest</code>
     </a>
   </li>
 </ul>
 
 <ol start="2">
-  <li>The <a href="">WADO Image Loader Codecs and Web Worker source code</a>
-  should be accessible from your server's root</li>
   <li>Create a JS Object to hold the OHIF Viewer's configuration. Here are some
    example values that would allow the viewer to hit our public PACS:</li>
 </ol>
@@ -60,28 +43,64 @@ window.config = {
         qidoSupportsIncludeField: true,
         imageRendering: 'wadors',
         thumbnailRendering: 'wadors',
-        requestOptions: {
-          requestFromBrowser: true,
-        },
       },
     ],
   },
 };
 ```
 
-<ol start="5"><li>
+<ol start="3"><li>
   Render the viewer in the web page's target <code>div</code>
 </li></ol>
 
 ```js
-// Made available by the `ohif-viewer` script included in step 1
-var Viewer = window.OHIFStandaloneViewer.App;
-var app = React.createElement(Viewer, window.config, null);
-
-ReactDOM.render(app, document.getElementById('ohif-viewer-target'));
+// Made available by the `@ohif/viewer` script included in step 1
+var containerId = 'id-of-div-to-render-component-to';
+var componentRenderedOrUpdatedCallback = function() {
+  console.log('OHIF Viewer rendered/updated');
+};
+window.OHIFViewer.installViewer(
+  window.config,
+  containerId,
+  componentRenderedOrUpdatedCallback
+);
 ```
 
-#### 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?
 
@@ -89,16 +108,34 @@ First, check out this fully functional [CodeSandbox][code-sandbox] example. If
 you're still having trouble, feel free to search or GitHub issues. Can't find
 anything related your problem? Create a new one.
 
-> When I include bootstrap, other styles on my page no longer work correctly.
-> What can I do?
+> My application's styles are impacting the OHIF Viewer's look and feel. What
+> can I do?
 
-When we include `bootsrap` (and the other dependencies), they are added
-globally. This has the potential of causing conflicts with other scripts and
-styles on the page. To prevent this, `embed` the viewer in a new/empty web page.
-Have that working? Good. Now `embed` that new page using an
+When you include stylesheets and scripts, they are added globally. This has the
+potential of causing conflicts with other scripts and styles on the page. To
+prevent this, `embed` the viewer in a new/empty web page. Have that working?
+Good. Now `embed` that new page using an
 [`<iframe>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
 
 This should produce the expected result while also protecting your page from any
 globally defined styles/scripts.
 
-[code-sandbox]: https://codesandbox.io/s/ohif-viewer-script-tag-usage-b3st9
+> We're trying to embed the OHIF Viewer into an existing React App, but seeing
+> react-dom and react conflicts. What can we do?
+
+`installViewer` is a convenience method that pulls in some dependencies that may
+not be compatible with existing `react` apps. `@ohif/viewer` also exports `App`
+which is a react component that takes the `configuration` outlined above as
+props. You can use it as a reusable component, and to avoid `react` version
+conflict issues.
+
+<!--
+  LINKS
+  -->
+
+<!-- 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 -->

docs/latest/deployment/recipes/nginx--image-archive.md

@@ -121,11 +121,7 @@ likely want to update:
 
 #### OHIF Viewer
 
-The OHIF Viewer's configuration is imported from a static `.js` file and made
-available globally at `window.config`. The configuration we use is set to a
-specific file when we build the viewer, and determined by the env variable:
-`APP_CONFIG`. You can see where we set its value in the `dockerfile` for this
-solution:
+The OHIF Viewer's configuration is imported from a static `.js` file. The configuration we use is set to a specific file when we build the viewer, and determined by the env variable: `APP_CONFIG`. You can see where we set its value in the `dockerfile` for this solution:
 
 `ENV APP_CONFIG=config/docker_openresty-orthanc.js`
 

docs/latest/deployment/recipes/user-account-control.md

@@ -122,11 +122,7 @@ likely want to update:
 
 #### OHIF Viewer
 
-The OHIF Viewer's configuration is imported from a static `.js` file and made
-available globally at `window.config`. The configuration we use is set to a
-specific file when we build the viewer, and determined by the env variable:
-`APP_CONFIG`. You can see where we set its value in the `dockerfile` for this
-solution:
+The OHIF Viewer's configuration is imported from a static `.js` file. The configuration we use is set to a specific file when we build the viewer, and determined by the env variable: `APP_CONFIG`. You can see where we set its value in the `dockerfile` for this solution:
 
 `ENV APP_CONFIG=config/docker_openresty-orthanc-keycloak.js`
 

docs/latest/essentials/configuration.md

@@ -4,22 +4,47 @@
 > one up, check out the [`Data Source` Guide](./data-source.md) or a deployment
 > recipe that contains an open source Image Archive
 
-## How it Works
+## Overview
 
-The configuration for our project is in the `/public/config` directory. Our
-build process knows which configuration file to use based on the `APP_CONFIG`
-environment variable. By default, its value is
-[`default.js`](https://github.com/OHIF/Viewers/blob/master/platform/viewer/public/config/default.js).
-When we build, the `%APP_CONFIG%` value in
-our[`/public/index.html`](https://github.com/OHIF/Viewers/blob/master/platform/viewer/public/index.html)
-file is substituted for the correct configuration file's name. This sets the
-`window.config` equal to our configuration file's value.
+### Configuration Files
+
+The configuration for our viewer is in the `<root>platform/viewer/public/config`
+directory. Our build process knows which configuration file to use based on the
+`APP_CONFIG` environment variable. By default, its value is
+[`config/default.js`][default-config]. The majority of the viewer's features,
+and registered extension's features, are configured using this file.
+
+**Embedded Use Note:**
+
+Alternatively, when using the `commonjs` bundle for embedded use cases, these
+same values are what you'll pass to `installViewer` method:
+
+`OHIFStandaloneViewer.installViewer(window.config)`
+
+### Environment Variables
+
+We use environment variables at build and dev time to change the Viewer's
+behavior. We can update the `HTML_TEMPLATE` to easily change which extensions
+are registered, and specify a different `APP_CONFIG` to connect to an
+alternative data source (or even specify different default hotkeys).
+
+| Environment Variable | Description                                                                                        | Default             |
+| -------------------- | -------------------------------------------------------------------------------------------------- | ------------------- |
+| `HTML_TEMPLATE`      | Which [HTML template][html-templates] to use as our web app's entry point. Specific to PWA builds. | `index.html`        |
+| `PUBLIC_URL`         | The route relative to the host that the app will be served from. Specific to PWA builds.           | `/`                 |
+| `APP_CONFIG`         | Which [configuration file][config-file] to copy to output as `app-config.js`                       | `config/default.js` |
+| `PROXY_TARGET`       | When developing, proxy requests that match this pattern to `PROXY_DOMAIN`                          | `undefined`         |
+| `PROXY_DOMAIN`       | When developing, proxy requests from `PROXY_TARGET` to `PROXY_DOMAIN`                              | `undefined`         |
+
+### Registering Extensions
+
+> :warn: Instructions coming soon
 
 ## How do I configure my project?
 
 The simplest way is to update the existing default config:
 
-_/public/config/default.js_
+_/platform/viewer/public/config/default.js_
 
 ```js
 window.config = {
@@ -34,9 +59,6 @@ window.config = {
         qidoSupportsIncludeField: true,
         imageRendering: 'wadors',
         thumbnailRendering: 'wadors',
-        requestOptions: {
-          requestFromBrowser: true,
-        },
       },
     ],
   },
@@ -47,10 +69,24 @@ You can also create a new config file and specify its path relative to the build
 output's root by setting the `APP_CONFIG` environment variable. You can set the
 value of this environment variable a few different ways:
 
-- [Add a temporary environment variable in your shell](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-temporary-environment-variables-in-your-shell)
-- [Add environment specific variables in `.env` file(s)](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env)
+- ~[Add a temporary environment variable in your shell](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-temporary-environment-variables-in-your-shell)~
+  - Previous `react-scripts` functionality that we need to duplicate with
+    `dotenv-webpack`
+- ~[Add environment specific variables in `.env` file(s)](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env)~
+  - Previous `react-scripts` functionality that we need to duplicate with
+    `dotenv-webpack`
 - Using the `cross-env` package in an npm script:
   - `"build": "cross-env APP_CONFIG=config/my-config.js react-scripts build"`
 
-After updating the configuration, `yarn run build:web` to generate updated build
+After updating the configuration, `yarn run build` to generate updated build
 output.
+
+<!--
+  Links
+  -->
+
+<!-- prettier-ignore-start -->
+[default-config]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/public/config/default.js
+[html-templates]: https://github.com/OHIF/Viewers/tree/master/platform/viewer/public/html-templates
+[config-files]: https://github.com/OHIF/Viewers/tree/master/platform/viewer/public/config
+<!-- prettier-ignore-end -->

docs/latest/essentials/themeing.md

@@ -4,7 +4,7 @@ Themeing is currently accomplished with color variables that are defined within
 the [`:root`](https://css-tricks.com/almanac/selectors/r/root/) selector
 (allowing them to cascade across all elements). This repository's components,
 and the ones we consume from our
-[React Viewerbase component library](https://react.ohif.org/styling-and-theming)
+[`@ohif/ui` component library](https://react.ohif.org/styling-and-theming)
 utilize them. We are interested in pursuing more robust themeing options, and
 open to pull requests and discussion issues.
 
@@ -80,12 +80,12 @@ function RadicalImagingLogo() {
       href: 'http://radicalimaging.com',
     },
     React.createElement('h5', {}, 'RADICAL IMAGING')
-  )
+  );
 }
 
 props.whiteLabelling = {
   logoComponent: RadicalImagingLogo(),
-}
+};
 ```
 
 <!--

docs/latest/essentials/translating.md

@@ -145,8 +145,8 @@ becomes a new namespace automatically.
 - CineDialog: Translations for the toll tips inside the Cine Player Dialog
 - Common: all common jargons that can be reused like `t('$t(common:image)')`
 - Header: translations related to OHIF's Header Top Bar
-- MeasurementTable - Translations for the react-viewerbase Measurement Table
-- UserPreferencesModal - Translations for the react-viewerbase Preferences Modal
+- MeasurementTable - Translations for the `@ohif/ui` Measurement Table
+- UserPreferencesModal - Translations for the `@ohif/ui` Preferences Modal
 
 ### How to use another NameSpace inside the current NameSpace?
 

docs/latest/frequently-asked-questions.md

@@ -19,8 +19,8 @@ Follow the steps outlined in the [Bug Report Template][bug-report-template].
 At the moment we are in the process of defining our roadmap and will do our best
 to communicate this to the community. If your requested feature is on the
 roadmap, then it will most likely be built at some point. If it is not, you are
-welcome to build it yourself and [contribute it](contributing.md). If you have
-resources and would like to fund the development of a feature, please
+welcome to build it yourself and [contribute it](contributing/index.md). If you
+have resources and would like to fund the development of a feature, please
 [contact us](http://www.ohif.org) or work with community members that offer
 [consulting services][commercial-support].
 
@@ -54,7 +54,7 @@ for a product built using the platform.
 If you have gone this route (or are going there), please let us know because we
 would be interested to hear about your experience.
 
-### Is The OHIF Viewer [HIPAA][hipaa] Compliant?
+### Is The OHIF Viewer [HIPAA][hipaa-def] Compliant?
 
 **NO.** The OHIF Viewer **DOES NOT** fulfill all of the criteria to become HIPAA
 Compliant. It is the users responsibility to ensure compliance with applicable
@@ -75,7 +75,7 @@ rules and regulations.
 <!-- OTHER -->
 [501k-clearance]: https://www.fda.gov/MedicalDevices/DeviceRegulationandGuidance/HowtoMarketYourDevice/PremarketSubmissions/PremarketNotification510k/
 [ce-marking]: https://ec.europa.eu/growth/single-market/ce-marking_en
-[hipaa]: https://en.wikipedia.org/wiki/Health_Insurance_Portability_and_Accountability_Act
+[hipaa-def]: https://en.wikipedia.org/wiki/Health_Insurance_Portability_and_Accountability_Act
 [new-issue]: https://github.com/OHIF/Viewers/issues/new/choose
 [bug-report-template]: https://github.com/OHIF/Viewers/issues/new?assignees=&labels=Bug+Report+%3Abug%3A&template=---bug-report.md&title=
 <!-- prettier-ignore-end -->

docs/latest/help.md

@@ -3,7 +3,7 @@
 We all need a little help sometimes. Don't let a few roadblocks stand in the way
 of you building something awesome.
 
-## Free
+## Community Support
 
 If you're a developer looking to contribute code, documentation, or discussion;
 we are more than happy to help provide clarification and answer questions via
@@ -21,7 +21,7 @@ resources and must be judicious with how we allocate them. If you find yourself
 in this situation and in need of assistance, it may be in your best interest to
 persue paid support.
 
-## Paid / Commercial
+## Commercial Support
 
 The Open Health Imaging Foundation does not offer commercial support, however,
 some community members do offer consulting services:

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,160 @@
 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)
+
+
+### Features
+
+* 🎸 Upgraded to cornerstoneTools 4.0 ([86adb51](https://github.com/OHIF/Viewers/commit/86adb51))
+
+
+### BREAKING CHANGES
+
+* n
+
+
+
+
+
+## [0.50.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@0.50.4...@ohif/extension-cornerstone@0.50.5) (2019-09-06)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
 ## [0.50.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@0.50.3...@ohif/extension-cornerstone@0.50.4) (2019-09-04)
 
 **Note:** Version bump only for package @ohif/extension-cornerstone

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "0.50.4",
+  "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": "^3.1.0",
+    "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.3.8",
+    "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

@@ -1,10 +1,10 @@
-import * as dcmjs from "dcmjs";
+import * as dcmjs from 'dcmjs';
 
-import OHIF from "@ohif/core";
-import cornerstone from "cornerstone-core";
-import cornerstoneTools from "cornerstone-tools";
+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
@@ -91,7 +86,7 @@ async function handleSegmentationStorage(
 
   if (displaySets.length > 1) {
     console.warn(
-      "More than one display set with the same seriesInstanceUid. This is not supported yet..."
+      'More than one display set with the same seriesInstanceUid. This is not supported yet...'
     );
   }
 
@@ -100,17 +95,19 @@ async function handleSegmentationStorage(
   const results = parseSeg(arrayBuffer, imageIds);
 
   if (!results) {
-    throw new Error("Fractional segmentations are not supported");
+    throw new Error('Fractional segmentations are not supported');
   }
 
-  const { segMetadata, toolState } = results;
+  const { labelmapBuffer, segMetadata, segmentsOnFrame } = results;
+  const { setters } = cornerstoneTools.getModule('segmentation');
 
-  segMetadata.seriesInstanceUid = seriesInstanceUid;
-
-  addSegMetadataToCornerstoneToolState(
+  setters.labelmap3DByFirstImageId(
+    imageIds[0],
+    labelmapBuffer,
+    0, // TODO -> Can define a color LUT based on colors in the SEG later.
     segMetadata,
-    toolState,
-    displaySetInstanceUid
+    imageIds.length,
+    segmentsOnFrame
   );
 
   const cachedStack = StackManager.findOrCreateStack(
@@ -118,12 +115,13 @@ async function handleSegmentationStorage(
     referenceDisplaySet
   );
   const stack = Object.assign({}, cachedStack);
+
   stack.currentImageIdIndex = 0;
 
   return {
     studyInstanceUid,
     displaySetInstanceUid,
-    stack
+    stack,
   };
 }
 

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

@@ -3,8 +3,6 @@
 // - Include SVG Source/Inline?
 // - By URL, or own component?
 
-// TODO: `ohif-core` toolbar builder?
-
 // What KINDS of toolbar buttons do we have...
 // - One's that dispatch commands
 // - One's that set tool's active
@@ -71,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',
@@ -188,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,71 @@
 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
+
+
+
+
+
+## [0.50.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.50.3...@ohif/extension-dicom-html@0.50.4) (2019-09-06)
+
+
+### Bug Fixes
+
+* set NODE_ENV for production build ([9120db4](https://github.com/OHIF/Viewers/commit/9120db4))
+
+
+
+
+
 ## [0.50.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.50.2...@ohif/extension-dicom-html@0.50.3) (2019-09-04)
 
 **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.3",
+  "version": "1.0.0",
   "description": "OHIF extension for rendering structured reports to HTML",
   "author": "OHIF",
   "license": "MIT",
@@ -20,19 +20,19 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "cross-env NODE_ENV=production webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
+    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
     "dev:dicom-html": "yarn run dev",
-    "build": "webpack --config .webpack/webpack.prod.js",
+    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
     "build:package": "yarn run build",
     "prepublishOnly": "yarn run build",
     "start": "yarn run dev"
   },
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
-    "dcmjs": "^0.3.3",
+    "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,234 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
+
+
+
+
+## [0.50.9](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.8...@ohif/extension-vtk@0.50.9) (2019-09-10)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.50.8](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.7...@ohif/extension-vtk@0.50.8) (2019-09-09)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.50.7](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.6...@ohif/extension-vtk@0.50.7) (2019-09-06)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [0.50.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.50.5...@ohif/extension-vtk@0.50.6) (2019-09-04)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.50.6",
+  "version": "0.52.3",
   "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.4.7",
+    "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.4"
   },
   "devDependencies": {
-    "@ohif/core": "^0.50.5",
-    "@ohif/ui": "^0.50.3",
-    "cornerstone-tools": "^3.13.0",
+    "@ohif/core": "^1.2.0",
+    "@ohif/ui": "^0.53.2",
+    "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
-    "dcmjs": "^0.5.1",
+    "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,7 +152,7 @@ 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,
@@ -164,7 +165,7 @@ class OHIFVTKViewport extends Component {
         return loadImageData(imageDataObject).then(() => {
           return {
             data: imageDataObject.vtkImageData,
-            labelmap: labelmapDataObject
+            labelmap: labelmapDataObject,
           };
         });
       default:
@@ -172,7 +173,7 @@ class OHIFVTKViewport extends Component {
 
         return loadImageData(imageDataObject).then(() => {
           return {
-            data: imageDataObject.vtkImageData
+            data: imageDataObject.vtkImageData,
           };
         });
     }
@@ -189,13 +190,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 +225,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 +245,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 +264,11 @@ class OHIFVTKViewport extends Component {
     this.setStateFromProps();
   }
 
+  componentWillUnmount() {
+    console.log(this.props.viewportIndex);
+    vtkViewportSubscriptionManager.unsubscribe(this.props.viewportIndex);
+  }
+
   componentDidUpdate(prevProps) {
     const { studies, displaySet } = this.props.viewportData;
     const prevDisplaySet = prevProps.viewportData.displaySet;
@@ -272,12 +291,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;

netlify.toml

@@ -3,7 +3,7 @@
 # TOML Reference:
 # https://www.netlify.com/docs/netlify-toml-reference/
 #
-# We use Netlify for deploy previews and deploy previews only.
+# We use Netlify for deploy previews and for publishing docs (gh-pages branch).
 # https://viewer.ohif.org is created using a different process that is
 # managed by CircleCI and deployed to our Google Hosting
 #
@@ -40,25 +40,6 @@
   publish = ".netlify/www/"
   command = "yarn config set workspaces-experimental true && chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"
 
-# Redirects and headers are GLOBAL for all builds – they do not get scoped to
-# contexts no matter where you define them in the file.
-# For context-specific rules, use _headers or _redirects files, which are
-# PER-DEPLOY.
-# The following redirect is intended for use with most SPAs that handle
-# routing internally.
-# By default, redirects won't be applied if there's a file with the same
-# path as the one defined in the `from` property. Setting `force` to `true`
-# will make the redirect rule take precedence over any existing files.
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200
-
-[[redirects]]
-  from = "/pwa/*"
-  to = "/pwa/index.html"
-  status = 200
-
 [[headers]]
   # Define which paths this specific [[headers]] block will cover.
   for = "/*"

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,14 +22,18 @@
     "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",
+    "test:e2e": "lerna run test:e2e --stream",
+    "test:e2e:dist": "lerna run test:e2e:dist --stream",
     "see-changed": "lerna changed",
     "docs:publish": "chmod +x ./build-and-publish-docs.sh && ./build-and-publish-docs.sh",
     "release": "yarn run lerna:version && yarn run lerna:publish",
     "lerna:version": "npx lerna version prerelease --force-publish",
-    "lerna:publish": "lerna publish from-package --canary --dist-tag canary"
+    "lerna:publish": "lerna publish from-package --canary --dist-tag canary",
+    "link-list": "npm ls --depth=0 --link=true"
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
@@ -78,13 +83,15 @@
     "react-dom": "^16.8.6",
     "react-hot-loader": "^4.12.11",
     "redux-testkit": "^1.0.6",
+    "serve": "^11.1.0",
     "shader-loader": "^1.3.1",
+    "start-server-and-test": "^1.10.0",
     "style-loader": "^1.0.0",
     "stylelint": "^10.1.0",
     "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",
@@ -93,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,120 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
+## [0.50.7](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.6...@ohif/core@0.50.7) (2019-09-10)
+
+
+### Bug Fixes
+
+* remove requestOptions when key is not needed ([32bc47d](https://github.com/OHIF/Viewers/commit/32bc47d))
+
+
+
+
+
+## [0.50.6](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.5...@ohif/core@0.50.6) (2019-09-09)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
 ## [0.50.5](https://github.com/OHIF/Viewers/compare/@ohif/core@0.50.4...@ohif/core@0.50.5) (2019-09-04)
 
 **Note:** Version bump only for package @ohif/core

platform/core/README.md

@@ -35,7 +35,7 @@ can be used with Vue, React, Vanilla JS, or any number of other frameworks.
 
 The documentation for this library is sparse. The best way to get started is to
 look at its
-[top level exports](https://github.com/OHIF/ohif-core/blob/master/src/index.js),
+[top level exports](https://github.com/OHIF/Viewers/blob/master/platform/core/src/index.js),
 and explore the source code of features that interest you. If you want to see
 how we use this library, you can check out [our viewer
 implementation][react-viewer].
@@ -57,12 +57,12 @@ yarn add @ohif/core --exact
 ### Usage
 
 Usage is dependent on the feature(s) you want to leverage. The bulk of
-`ohif-core`'s features are "pure" and can be imported and used in place.
+`@ohif/core`'s features are "pure" and can be imported and used in place.
 
 _Example: retrieving study metadata from a server_
 
 ```js
-import { studies } from "@ohif/core";
+import { studies } from '@ohif/core';
 
 const studiesMetadata = await studies.retrieveStudiesMetadata(
   server, // Object
@@ -125,11 +125,10 @@ Links:
 
 <!-- prettier-ignore-start -->
 <!-- ROW -->
-[npm-url]: https://npmjs.org/package/ohif-core
-[npm-downloads-image]: https://img.shields.io/npm/dm/ohif-core.svg?style=flat-square
-[npm-version-image]: https://img.shields.io/npm/v/ohif-core.svg?style=flat-square
+[npm-url]: https://npmjs.org/package/@ohif/core
+[npm-downloads-image]: https://img.shields.io/npm/dm/@ohif/core.svg?style=flat-square
+[npm-version-image]: https://img.shields.io/npm/v/@ohif/core.svg?style=flat-square
 [all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
-[contributing-url]: https://github.com/OHIF/ohif-core/blob/master/CONTRIBUTING.md
 [license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
 [license-url]: LICENSE
 <!-- Misc. -->

platform/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/core",
-  "version": "0.50.5",
+  "version": "1.2.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": "^3.9.0",
+    "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dicom-parser": "^1.8.3"
   },

platform/core/src/DICOMWeb/getAuthorizationHeader.js

@@ -6,17 +6,26 @@ import user from '../user';
 /**
  * Returns the Authorization header as part of an Object.
  *
- * @returns {Object}
+ * @export
+ * @param {Object} [server={}]
+ * @param {Object} [server.requestOptions]
+ * @param {string|function} [server.requestOptions.auth]
+ * @returns {Object} { Authorization }
  */
-export default function getAuthorizationHeader(server) {
+export default function getAuthorizationHeader({ requestOptions } = {}) {
   const headers = {};
 
   // Check for OHIF.user since this can also be run on the server
   const accessToken = user && user.getAccessToken && user.getAccessToken();
 
-  if (server && server.requestOptions && server.requestOptions.auth) {
-    // HTTP Basic Auth (user:password)
-    headers.Authorization = `Basic ${btoa(server.requestOptions.auth)}`;
+  if (requestOptions && 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/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/addServer.test.js

@@ -11,9 +11,6 @@ describe('addServers', () => {
         qidoSupportsIncludeField: true,
         imageRendering: 'wadors',
         thumbnailRendering: 'wadors',
-        requestOptions: {
-          requestFromBrowser: true,
-        },
       },
     ],
     oidc: [
@@ -52,7 +49,6 @@ describe('addServers', () => {
         name: 'DCM4CHEE',
         qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
         qidoSupportsIncludeField: true,
-        requestOptions: { requestFromBrowser: true },
         thumbnailRendering: 'wadors',
         type: 'dicomWeb',
         wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',

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,7 @@ import sortBy from './sortBy.js';
 import studyMetadataManager from './studyMetadataManager';
 import updateMetaDataManager from './updateMetaDataManager.js';
 import writeScript from './writeScript.js';
+import DicomLoaderService from './dicomLoaderService.js';
 
 const utils = {
   guid,
@@ -21,6 +22,7 @@ const utils = {
   // Updates WADO-RS metaDataManager
   updateMetaDataManager,
   DICOMTagDescriptions,
+  DicomLoaderService,
 };
 
 export {
@@ -35,6 +37,7 @@ export {
   // Updates WADO-RS metaDataManager
   updateMetaDataManager,
   DICOMTagDescriptions,
+  DicomLoaderService,
 };
 
 export default utils;

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

@@ -14,6 +14,7 @@ describe('Top level exports', () => {
       // Updates WADO-RS metaDataManager
       'updateMetaDataManager',
       'DICOMTagDescriptions',
+      'DicomLoaderService',
     ].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/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,99 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
+
+
+
+
 ## [0.50.3](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.50.2...@ohif/ui@0.50.3) (2019-09-04)
 
 **Note:** Version bump only for package @ohif/ui

platform/ui/README.md

@@ -49,8 +49,8 @@ yarn add @ohif/ui --exact
 ## Usage
 
 ```jsx
-import React, { Component } from "react";
-import { LayoutButton } from "@ohif/ui";
+import React, { Component } from 'react';
+import { LayoutButton } from '@ohif/ui';
 
 class Example extends Component {
   constructor(props) {
@@ -58,10 +58,10 @@ class Example extends Component {
 
     this.state = {
       selectedCell: {
-        className: "hover",
+        className: 'hover',
         col: 1,
-        row: 1
-      }
+        row: 1,
+      },
     };
   }
 
@@ -117,10 +117,9 @@ Links:
 
 <!-- prettier-ignore-start -->
 [all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
-[contributing-url]: https://github.com/OHIF/react-viewerbase/blob/master/CONTRIBUTING.md
-[npm-url]: https://npmjs.org/package/react-viewerbase
-[npm-downloads-image]: https://img.shields.io/npm/dm/react-viewerbase.svg?style=flat-square
-[npm-version-image]: https://img.shields.io/npm/v/react-viewerbase.svg?style=flat-square
+[npm-url]: https://npmjs.org/package/@ohif/ui
+[npm-downloads-image]: https://img.shields.io/npm/dm/@ohif/ui.svg?style=flat-square
+[npm-version-image]: https://img.shields.io/npm/v/@ohif/ui.svg?style=flat-square
 [license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
 [license-url]: LICENSE
 <!-- prettier-ignore-end -->

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "0.50.3",
+  "version": "0.53.2",
   "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__/compatibility.mdx

@@ -7,7 +7,7 @@ route: /compatibility
 
 ## Browser Support
 
-React Viewerbase relies on
+`@ohif/ui` relies on
 [browsers supported by Styled Components](https://www.styled-components.com/docs/faqs#which-browsers-are-supported)
 or browsers supported by emotion.
 

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

@@ -11,20 +11,20 @@ route: /getting-started
 > possibility of introducing breaking changes. Please depend on an "exact"
 > version in your projects to prevent issues caused by loose versioning.
 
-Install `react-viewerbase` from npm:
+Install `@ohif/ui` from npm:
 
 ```shell
 // with npm
-npm i react-viewerbase --save-exact
+npm i @ohif/ui --save-exact
 
 // with yarn
-yarn add react-viewerbase --exact
+yarn add @ohif/ui --exact
 ```
 
 ## Usage
 
-There is some setup required for `react-viewerbase`. We are working to eliminate
-these requirements with the goal of providing ready to use components.
+There is some setup required for `@ohif/ui`. We are working to eliminate these
+requirements with the goal of providing ready to use components.
 
 ### External Dependencies
 
@@ -37,8 +37,8 @@ or the font you set for your theme:
 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap';
 ```
 
-React Viewerbase also looks for theme CSS variabled defined on `:root`. You can
-find a list of variables [on the theming page](/styling-and-theming)
+`@ohif/ui` also looks for theme CSS variabled defined on `:root`. You can find a
+list of variables [on the theming page](/styling-and-theming)
 
 ### Import & Use
 
@@ -46,7 +46,7 @@ You can use components in your React app:
 
 ```js
 import React, { Component } from 'react';
-import { LayoutButton } from 'react-viewerbase';
+import { LayoutButton } from '@ohif/ui';
 
 class Example extends Component {
   constructor(props) {

platform/ui/src/__docs__/introduction.mdx

@@ -3,14 +3,14 @@ name: Introduction
 route: /
 ---
 
-import { Playground, Props } from 'docz'
-import { State } from 'react-powerplug'
-import { TableList, TableListItem } from './../index.js'
+import { Playground, Props } from 'docz';
+import { State } from 'react-powerplug';
+import { TableList, TableListItem } from './../index.js';
 
 # Introduction
 
-**React Viewerbase is a collection of components and utilities** that power
-OHIF's [zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
+**@ohif/ui is a collection of components and utilities** that power OHIF's
+[zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
 ([demo][demo-url]). We maintain them as a separate component library to:
 
 - Decouple presentation from business logic
@@ -25,11 +25,11 @@ OHIF's [zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
 > version in your projects to prevent issues caused by loose versioning.
 
 ```js
-// Add 'react-viewerbase' as a dependency
-yarn add react-viewerbase
+// Add '@ohif/ui' as a dependency
+yarn add @ohif/ui
 
 // Import and use components
-import { TableList } from 'react-viewerbase'
+import { TableList } from '@ohif/ui'
 ```
 
 <Playground>
@@ -56,7 +56,7 @@ import { TableList } from 'react-viewerbase'
             >
               <label>{item.label}</label>
             </TableListItem>
-          )
+          );
         })}
       </TableList>
     )}

platform/ui/src/__docs__/translating.mdx

@@ -36,9 +36,9 @@ export default withTranslation('MyNameSpace')(MyComponent);
 For further information about namespaces and how they work, please visit
 [OHIF Namespaces docs](https://docs.ohif.org/essentials/translating.html#namespaces).
 
-### How to get right the Name Space of a react-viewerbase component?
+### How to get right the Namespace of a `@ohif/ui` component?
 
-Check the component's page in this site, the NameSpace information should be on
+Check the component's page in this site, the Namespace information should be on
 the bottom line.
 
 Also, a nameSpace is defined when exporting a component, this information can be
@@ -50,10 +50,10 @@ E.g.
 export default withTranslation('TheNamespaceYouAreLookingFor')(TheComponentYouWantToUse);
 ```
 
-### How to use another NameSpace inside the current NameSpace?
+### How to use another Namespace inside the current Namespace?
 
 i18next provides a parsing feature able to get translations strings from any
-NameSpace, like this following example getting data from `InnerSpace` NameSpace:
+Namespace, like this following example getting data from `InnerSpace` Namespace:
 
 ```
 $t(InnerSpace:Reset)
@@ -64,8 +64,8 @@ export default withTranslation('OuterSpace')(TheComponent);
 
 ## I18next Provider
 
-**React Viewerbase** pass down the `t` function trough the custom
-[withTranslation HOC](https://github.com/OHIF/react-viewerbase/blob/master/src/utils/LanguageProvider.js).
+**@ohif/ui** pass down the `t` function trough the custom
+[withTranslation HOC](https://github.com/OHIF/Viewers/blob/master/platform/ui/src/utils/LanguageProvider.js).
 
 ---
 

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}