chore(release): publish [skip ci]

- @ohif/extension-vtk@0.52.25
 - @ohif/ui@0.58.2
 - @ohif/viewer@2.3.2

.circleci/config.yml

@@ -13,7 +13,7 @@ version: 2.1
 ##
 orbs:
   codecov: codecov/codecov@1.0.5
-  cypress: cypress-io/cypress@1.10.0
+  cypress: cypress-io/cypress@1.11.0
 
 defaults: &defaults
   docker:
@@ -198,7 +198,7 @@ jobs:
       - run: chmod +x ~/repo/.circleci/build-and-publish-docs.sh
       - run: ~/repo/.circleci/build-and-publish-docs.sh
 
-  DOCKER_PUBLISH:
+  DOCKER_MASTER_PUBLISH:
     <<: *defaults
     steps:
       - attach_workspace:
@@ -227,6 +227,43 @@ jobs:
               docker push ohif/$IMAGE_NAME:latest
             fi
 
+  DOCKER_PR_PUBLISH:
+    <<: *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-{{ checksum "yarn.lock" }}
+            - yarn-packages-
+
+      - run:
+          name: Install Dependencies
+          command: yarn install --frozen-lockfile
+
+      - setup_remote_docker:
+          docker_layer_caching: false
+
+      - run:
+          name: Build and push Docker image
+          command: |
+            # Remove npm config
+            rm -f ./.npmrc
+            # Set our version number using vars
+            echo $CIRCLE_BUILD_NUM
+            # Build our image, auth, and push
+            docker build --tag ohif/viewer:PR_BUILD-$CIRCLE_BUILD_NUM .
+            echo $DOCKER_PWD | docker login -u $DOCKER_LOGIN --password-stdin
+            docker push ohif/viewer:PR_BUILD-$CIRCLE_BUILD_NUM
+
   VIEWER_DEMO_BUILD:
     <<: *defaults
     steps:
@@ -288,10 +325,13 @@ workflows:
       # E2E: PWA
       - cypress/run:
           name: 'E2E: PWA'
+          executor: cypress/browsers-chrome76
+          browser: chrome
           pre-steps:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
                 add wait-on' # Use yarn latest
           yarn: true
+          record: false
           store_artifacts: false
           working_directory: platform/viewer
           build: npx cross-env QUICK_BUILD=true yarn run build
@@ -307,14 +347,18 @@ workflows:
       # E2E: script-tag
       - cypress/run:
           name: 'E2E: Script Tag'
+          executor: cypress/browsers-chrome76
+          browser: chrome
           pre-steps:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
                 add wait-on' # Use yarn latest
           yarn: true
+          record: false
           store_artifacts: false
           working_directory: platform/viewer
           build: npx cross-env QUICK_BUILD=true yarn run build:package
           start: yarn run test:e2e:serve
+          spec: 'cypress/integration/common/**/*'
           wait-on: 'http://localhost:3000'
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
           no-workspace: true # Don't persist workspace
@@ -324,6 +368,17 @@ workflows:
           requires:
             - UNIT_TESTS
 
+  PR_OPTIONAL_DOCKER_PUBLISH:
+    jobs:
+      # https://circleci.com/docs/2.0/workflows/#holding-a-workflow-for-a-manual-approval
+      - AWAIT_APPROVAL:
+          type: approval
+      # Update hub.docker.org
+      - DOCKER_PR_PUBLISH:
+          context: Docker Hub
+          requires:
+            - AWAIT_APPROVAL
+
   # MERGE TO MASTER
   RELEASE:
     jobs:
@@ -334,11 +389,13 @@ workflows:
       # E2E: PWA + Persist
       - cypress/run:
           name: 'E2E: PWA'
+          executor: cypress/browsers-chrome76
+          browser: chrome
           pre-steps:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
                 add wait-on' # Use yarn latest
           yarn: true
-          record: true
+          record: false
           store_artifacts: true
           working_directory: platform/viewer
           build: npx cross-env QUICK_BUILD=true yarn run build
@@ -357,14 +414,18 @@ workflows:
       # E2E: script-tag
       - cypress/run:
           name: 'E2E: Script Tag'
+          executor: cypress/browsers-chrome76
+          browser: chrome
           pre-steps:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
                 add wait-on' # Use yarn latest
           yarn: true
+          record: false
           store_artifacts: false
           working_directory: platform/viewer
           build: npx cross-env QUICK_BUILD=true yarn run build:package
           start: yarn run test:e2e:serve
+          spec: 'cypress/integration/common/**/*'
           wait-on: 'http://localhost:3000'
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
           no-workspace: true # Don't persist workspace
@@ -394,6 +455,6 @@ workflows:
           requires:
             - VIEWER_DEMO_BUILD
       # Update hub.docker.org
-      - DOCKER_PUBLISH:
+      - DOCKER_MASTER_PUBLISH:
           requires:
             - NPM_PUBLISH

.eslintrc.json

@@ -16,6 +16,7 @@
   },
   "globals": {
     "cy": true,
+    "before": true,
     "context": true,
     "Cypress": true,
     "assert": true

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md

@@ -0,0 +1,29 @@
+### Request Checklist
+
+- [] Brief description of changes
+- [] Links to any relevant issues
+- [] Required status checks are passing
+- [] `@mention` a maintainer to request a review
+
+#### Special
+
+> If this PR is not on a branch for this repo, it is "untrusted" and does not
+> have access to env vars. Reviewers can kick off a trusted docker deploy by:
+>
+> 1. Verifying there are no malicious changes to CI build
+> 2. Using the [git-push-fork-to-upstream-branch][script] script
+> 3. Executing the manual approval step in the CI workflow
+
+- [] Request docker publish of PR
+
+_Want to improve this process? Consider PR'ing the ability for reviewers to add
+a label to trigger this process._
+
+<!--
+  Links
+  -->
+
+<!-- prettier-ignore-start -->
+[blog]: https://circleci.com/blog/triggering-trusted-ci-jobs-on-untrusted-forks/
+[script]: https://github.com/jklukas/git-push-fork-to-upstream-branch
+<!-- prettier-ignore-end -->

.vscode/settings.json

@@ -1,10 +1,8 @@
 {
   "editor.rulers": [80, 120],
-
   // ===
   // Spacing
   // ===
-
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
   "editor.trimAutoWhitespace": true,
@@ -12,19 +10,23 @@
   "files.eol": "\n",
   "files.insertFinalNewline": true,
   "files.trimFinalNewlines": true,
-
   // ===
   // Event Triggers
   // ===
-
   "editor.formatOnSave": true,
   "eslint.autoFixOnSave": true,
   "eslint.run": "onSave",
   "eslint.validate": [
-    { "language": "javascript", "autoFix": true },
-    { "language": "javascriptreact", "autoFix": true }
+    {
+      "language": "javascript",
+      "autoFix": true
+    },
+    {
+      "language": "javascriptreact",
+      "autoFix": true
+    }
   ],
-  "prettier.disableLanguages": [],
+  "prettier.disableLanguages": ["html"],
   "prettier.endOfLine": "lf",
   "workbench.colorCustomizations": {}
 }

Dockerfile

@@ -44,6 +44,7 @@ RUN yarn config set workspaces-experimental true
 RUN yarn install
 
 ENV PATH /usr/src/app/node_modules/.bin:$PATH
+ENV QUICK_BUILD true
 # ENV GENERATE_SOURCEMAP=false
 # ENV REACT_APP_CONFIG=config/default.js
 

README.md

@@ -26,6 +26,7 @@
 [![Netlify Status][netlify-image]][netlify-url]
 [![CircleCI][circleci-image]][circleci-url]
 [![codecov][codecov-image]][codecov-url]
+[![This project is using Percy.io for visual regression testing.][percy-image]](percy-url)
 [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors)
 <!-- prettier-ignore-end -->
 
@@ -288,6 +289,8 @@ MIT © [OHIF](https://github.com/OHIF)
 [docker-image-url]: https://hub.docker.com/r/ohif/viewer
 [license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
 [license-url]: LICENSE
+[percy-image]: https://percy.io/static/images/percy-badge.svg
+[percy-url]: https://percy.io/Open-Health-Imaging-Foundation/OHIF-Viewer
 <!-- Links -->
 [monorepo]: https://en.wikipedia.org/wiki/Monorepo
 [how-to-fork]: https://help.github.com/en/articles/fork-a-repo

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.4.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.3.1...@ohif/extension-cornerstone@1.4.0) (2019-10-26)
+
+
+### Features
+
+* Snapshot Download Tool ([#840](https://github.com/OHIF/Viewers/issues/840)) ([450e098](https://github.com/OHIF/Viewers/commit/450e0981a5ba054fcfcb85eeaeb18371af9088f8))
+
+
+
+
+
 ## [1.3.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.3.0...@ohif/extension-cornerstone@1.3.1) (2019-10-09)
 
 

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",

extensions/cornerstone/src/toolbarModule.js

@@ -213,6 +213,16 @@ const definitions = [
         commandName: 'setToolActive',
         commandOptions: { toolName: 'Eraser' },
       },
+      {
+        id: 'Download',
+        label: 'Download',
+        icon: 'create-screen-capture',
+        //
+        type: TOOLBAR_BUTTON_TYPES.BUILT_IN,
+        options: {
+          behavior: 'DOWNLOAD_SCREEN_SHOT',
+        },
+      },
     ],
   },
 ];

extensions/dicom-html/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@1.0.0...@ohif/extension-dicom-html@1.0.1) (2019-10-29)
+
+
+### Bug Fixes
+
+* Set SR viewport as active by interaction ([#1118](https://github.com/OHIF/Viewers/issues/1118)) ([5b33417](https://github.com/OHIF/Viewers/commit/5b334175c370afb930b4b6dbd307ddece8f850e3))
+
+
+
+
+
 # [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)
 
 

extensions/dicom-html/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-html",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "OHIF extension for rendering structured reports to HTML",
   "author": "OHIF",
   "license": "MIT",

extensions/dicom-html/src/ConnectedDicomHtmlViewport.js

@@ -0,0 +1,33 @@
+import OHIF from '@ohif/core';
+import { connect } from 'react-redux';
+import DicomHtmlViewport from './DicomHtmlViewport';
+
+const { setViewportActive } = OHIF.redux.actions;
+
+const mapStateToProps = (state, ownProps) => {
+  const { viewportIndex, byteArray } = ownProps;
+  const activeViewportIndex = state.viewports;
+
+  return {
+    viewportIndex,
+    activeViewportIndex,
+    byteArray,
+  };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  const { viewportIndex } = ownProps;
+
+  return {
+    setViewportActive: () => {
+      dispatch(setViewportActive(viewportIndex));
+    },
+  };
+};
+
+const ConnectedDicomHtmlViewport = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DicomHtmlViewport);
+
+export default ConnectedDicomHtmlViewport;

extensions/dicom-html/src/DicomHtmlViewport.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import * as dcmjs from 'dcmjs';
 import TypedArrayProp from './TypedArrayProp';
+
 import './DicomHtmlViewport.css';
 
 function getRelationshipString(data) {
@@ -30,7 +32,7 @@ function getValueString(data) {
       const {
         CodeMeaning,
         CodeValue,
-        CodingSchemeDesignator
+        CodingSchemeDesignator,
       } = data.ConceptNameCodeSequence;
 
       return `${CodeMeaning} (${CodeValue}, ${CodingSchemeDesignator})`;
@@ -75,7 +77,7 @@ function constructContentSequence(data, header) {
   }
 
   const result = {
-    items
+    items,
   };
 
   if (header) {
@@ -106,9 +108,7 @@ const { DicomMetaDictionary, DicomMessage } = dcmjs.data;
 function getMainData(data) {
   const root = [];
 
-  const patientValue = `${data.PatientName} (${data.PatientSex}, #${
-    data.PatientID
-  })`;
+  const patientValue = `${data.PatientName} (${data.PatientSex}, #${data.PatientID})`;
   root.push(getMainDataItem('Patient', patientValue));
 
   const studyValue = data.StudyDescription;
@@ -117,15 +117,13 @@ function getMainData(data) {
   const seriesValue = `${data.SeriesDescription} (#${data.SeriesNumber})`;
   root.push(getMainDataItem('Series', seriesValue));
 
-  const manufacturerValue = `${data.Manufacturer} (${
-    data.ManufacturerModelName
-  }, #${data.DeviceSerialNumber})`;
+  const manufacturerValue = `${data.Manufacturer} (${data.ManufacturerModelName}, #${data.DeviceSerialNumber})`;
 
   root.push(getMainDataItem('Manufacturer', manufacturerValue));
 
   const mainDataObjects = {
     CompletionFlag: 'Completion flag',
-    VerificationFlag: 'Verification flag'
+    VerificationFlag: 'Verification flag',
   };
 
   Object.keys(mainDataObjects).forEach(key => {
@@ -154,7 +152,7 @@ const getContentSequence = (data, level = 1) => {
     const {
       CodeMeaning,
       CodeValue,
-      CodingSchemeDesignator
+      CodingSchemeDesignator,
     } = data.ConceptNameCodeSequence;
 
     header = `${CodeMeaning} (${CodeValue} - ${CodingSchemeDesignator})`;
@@ -198,11 +196,14 @@ function getMainDataItem(key, value) {
 class DicomHtmlViewport extends Component {
   state = {
     content: null,
-    error: null
+    error: null,
   };
 
   static propTypes = {
-    byteArray: TypedArrayProp.uint8
+    byteArray: TypedArrayProp.uint8,
+    setViewportActive: PropTypes.func.isRequired,
+    viewportIndex: PropTypes.number.isRequired,
+    activeViewportIndex: PropTypes.number.isRequired,
   };
 
   componentDidMount() {
@@ -225,15 +226,34 @@ class DicomHtmlViewport extends Component {
     );
 
     this.setState({
-      content
+      content,
     });
   }
 
+  setViewportActiveHandler = () => {
+    const {
+      setViewportActive,
+      viewportIndex,
+      activeViewportIndex,
+    } = this.props;
+
+    if (viewportIndex !== activeViewportIndex) {
+      setViewportActive();
+    }
+  };
+
   render() {
+    const { content, error } = this.state;
+
     return (
-      <div className={'DicomHtmlViewport'}>
-        {this.state.content}
-        {this.state.error && <h2>{JSON.stringify(this.state.error)}</h2>}
+      <div
+        data-cy="dicom-html-viewport"
+        className="DicomHtmlViewport"
+        onClick={this.setViewportActiveHandler}
+        onScroll={this.setViewportActiveHandler}
+      >
+        {content}
+        {error && <h2>{JSON.stringify(error)}</h2>}
       </div>
     );
   }

extensions/dicom-html/src/OHIFDicomHtmlViewport.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import DicomHtmlViewport from './DicomHtmlViewport';
 import OHIF from '@ohif/core';
+import ConnectedDicomHtmlViewport from './ConnectedDicomHtmlViewport';
+
 const { DicomLoaderService } = OHIF.utils;
 
 class OHIFDicomHtmlViewport extends Component {
@@ -9,6 +10,7 @@ class OHIFDicomHtmlViewport extends Component {
     studies: PropTypes.object,
     displaySet: PropTypes.object,
     viewportIndex: PropTypes.number,
+    viewportData: PropTypes.object,
   };
 
   state = {
@@ -40,7 +42,10 @@ class OHIFDicomHtmlViewport extends Component {
     return (
       <>
         {this.state.byteArray && (
-          <DicomHtmlViewport byteArray={this.state.byteArray} />
+          <ConnectedDicomHtmlViewport
+            byteArray={this.state.byteArray}
+            viewportIndex={this.props.viewportIndex}
+          />
         )}
         {this.state.error && <h2>{JSON.stringify(this.state.error)}</h2>}
       </>

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,133 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.52.25](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.24...@ohif/extension-vtk@0.52.25) (2019-10-29)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.24](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.23...@ohif/extension-vtk@0.52.24) (2019-10-29)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.23](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.22...@ohif/extension-vtk@0.52.23) (2019-10-28)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.22](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.21...@ohif/extension-vtk@0.52.22) (2019-10-28)
+
+
+### Bug Fixes
+
+* MIP styling ([#1109](https://github.com/OHIF/Viewers/issues/1109)) ([0d21cc6](https://github.com/OHIF/Viewers/commit/0d21cc6ad0c47706b9e62e05fe2a0f1d86339760))
+
+
+
+
+
+## [0.52.21](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.20...@ohif/extension-vtk@0.52.21) (2019-10-26)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.20](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.19...@ohif/extension-vtk@0.52.20) (2019-10-26)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.19](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.18...@ohif/extension-vtk@0.52.19) (2019-10-25)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.18](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.17...@ohif/extension-vtk@0.52.18) (2019-10-25)
+
+
+### Bug Fixes
+
+* 🐛 Orthographic MPR fix ([#1092](https://github.com/OHIF/Viewers/issues/1092)) ([460e375](https://github.com/OHIF/Viewers/commit/460e375f0aa75d35f7a46b4d48e6cc706019956d))
+
+
+
+
+
+## [0.52.17](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.16...@ohif/extension-vtk@0.52.17) (2019-10-25)
+
+
+### Bug Fixes
+
+* 🐛 Fix crosshairs location when using MIP ([#1080](https://github.com/OHIF/Viewers/issues/1080)) ([b451ce4](https://github.com/OHIF/Viewers/commit/b451ce440796f13b0891739d2130e8ee71993d3d))
+
+
+
+
+
+## [0.52.16](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.15...@ohif/extension-vtk@0.52.16) (2019-10-23)
+
+
+### Bug Fixes
+
+* 🐛 Switch to orhtographic view for 2D MPR ([#1074](https://github.com/OHIF/Viewers/issues/1074)) ([13d337a](https://github.com/OHIF/Viewers/commit/13d337aaabb8dadf6366c6262c5e47e7781edd08))
+
+
+
+
+
+## [0.52.15](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.14...@ohif/extension-vtk@0.52.15) (2019-10-23)
+
+
+### Performance Improvements
+
+* ⚡️ Throttle UI refresh of synced WL value in vtk port ([#1070](https://github.com/OHIF/Viewers/issues/1070)) ([9d08e81](https://github.com/OHIF/Viewers/commit/9d08e81aa5def63a5e34f464aae099f7c29f0ac5))
+
+
+
+
+
+## [0.52.14](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.13...@ohif/extension-vtk@0.52.14) (2019-10-22)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.13](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.12...@ohif/extension-vtk@0.52.13) (2019-10-18)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.12](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.11...@ohif/extension-vtk@0.52.12) (2019-10-18)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [0.52.11](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.10...@ohif/extension-vtk@0.52.11) (2019-10-15)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.52.11",
+  "version": "0.52.25",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -48,11 +48,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "react-vtkjs-viewport": "^0.1.6"
+    "lodash.throttle": "^4.1.1",
+    "react-vtkjs-viewport": "^0.3.7"
   },
   "devDependencies": {
-    "@ohif/core": "^1.4.0",
-    "@ohif/ui": "^0.55.0",
+    "@ohif/core": "^1.6.0",
+    "@ohif/ui": "^0.58.2",
     "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dcmjs": "^0.6.1",

extensions/vtk/src/ConnectedVTKViewport.js

@@ -1,6 +1,6 @@
-import OHIF from "@ohif/core";
-import { View2D } from "react-vtkjs-viewport";
-import { connect } from "react-redux";
+import OHIF from '@ohif/core';
+import { View2D } from 'react-vtkjs-viewport';
+import { connect } from 'react-redux';
 
 const { setViewportActive, setViewportSpecificData } = OHIF.redux.actions;
 
@@ -24,7 +24,7 @@ const mapStateToProps = (state, ownProps) => {
     // Hopefully this doesn't break anything under the hood for this one
     // activeTool: activeButton && activeButton.command,
     ...dataFromStore,
-    enableStackPrefetch: isActive
+    enableStackPrefetch: isActive,
   };
 };
 
@@ -38,7 +38,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
 
     setViewportSpecificData: data => {
       dispatch(setViewportSpecificData(viewportIndex, data));
-    }
+    },
   };
 };
 
@@ -63,10 +63,10 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       // Store the API details for later
       //setViewportSpecificData({ vtkApi: api });
 
-      if (afterCreation && typeof afterCreation === "function") {
+      if (afterCreation && typeof afterCreation === 'function') {
         afterCreation(api);
       }
-    }
+    },
   };
   return props;
 };

extensions/vtk/src/LoadingIndicator.css

@@ -3,15 +3,15 @@
 }
 
 .loadingIndicator {
-  background-color: rgba(0, 0, 0, 0.75);
-  font-size: 18px;
-  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  font-size: 8px;
+  height: 20%;
   overflow: hidden;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 1;
 
-  /* Necessary for click-through to cornerstone element below */
+  /* Necessary for click-through to vtkjs element below */
   pointer-events: none;
 }

extensions/vtk/src/LoadingIndicator.js

@@ -1,7 +1,7 @@
 import './LoadingIndicator.css';
 
 import React, { PureComponent } from 'react';
-
+import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 
 class LoadingIndicator extends PureComponent {
@@ -35,7 +35,8 @@ class LoadingIndicator extends PureComponent {
           <div className="imageViewerLoadingIndicator loadingIndicator">
             <div className="indicatorContents">
               <p>
-                Loading... <i className="fa fa-spin fa-circle-o-notch fa-fw" />{' '}
+                {this.props.t('Reformatting')}...
+                <i className="fa fa-spin fa-circle-o-notch fa-fw" />
                 {percComplete}
               </p>
             </div>
@@ -46,4 +47,4 @@ class LoadingIndicator extends PureComponent {
   }
 }
 
-export default LoadingIndicator;
+export default withTranslation('Common')(LoadingIndicator);

extensions/vtk/src/OHIFVTKViewport.js

@@ -11,7 +11,6 @@ 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;
 
@@ -172,56 +171,58 @@ class OHIFVTKViewport extends Component {
       default:
         imageDataObject = getImageData(stack.imageIds, displaySetInstanceUid);
 
-        const loadImageDataPromise = loadImageData(imageDataObject);
-
-        return loadImageDataPromise.then(() => {
-          return {
-            data: imageDataObject.vtkImageData,
-          };
-        });
+        return imageDataObject;
     }
   };
 
-  getOrCreateVolume(data, displaySetInstanceUid) {
+  getOrCreateVolume(imageDataObject, displaySetInstanceUid) {
     if (volumeCache[displaySetInstanceUid]) {
       return volumeCache[displaySetInstanceUid];
     }
 
+    const { vtkImageData, imageMetaData0 } = imageDataObject;
+    const { windowWidth, windowCenter, modality } = imageMetaData0;
+
+    let lower;
+    let upper;
+
+    if (modality === 'PT') {
+      // For PET just set the range to 0-5 SUV
+      lower = 0;
+      upper = 5;
+    } else {
+      lower = windowCenter - windowWidth / 2.0;
+      upper = windowCenter + windowWidth / 2.0;
+    }
+
     const volumeActor = vtkVolume.newInstance();
     const volumeMapper = vtkVolumeMapper.newInstance();
 
     volumeActor.setMapper(volumeMapper);
-    volumeMapper.setInputData(data);
+    volumeMapper.setInputData(vtkImageData);
 
-    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]);
+      .setRange(lower, upper);
 
-    // TODO: Should look into implementing autoAdjustSampleDistance in vtk
-    const sampleDistance =
-      1.2 *
-      Math.sqrt(
-        data
-          .getSpacing()
-          .map(v => v * v)
-          .reduce((a, b) => a + b, 0)
-      );
+    const spacing = vtkImageData.getSpacing();
+    // Set the sample distance to half the mean length of one side. This is where the divide by 6 comes from.
+    // https://github.com/Kitware/VTK/blob/6b559c65bb90614fb02eb6d1b9e3f0fca3fe4b0b/Rendering/VolumeOpenGL2/vtkSmartVolumeMapper.cxx#L344
+    const sampleDistance = (spacing[0] + spacing[1] + spacing[2]) / 6;
 
     volumeMapper.setSampleDistance(sampleDistance);
 
+    // Be generous to surpress warnings, as the logging really hurts performance.
+    // TODO: maybe we should auto adjust samples to 1000.
+    volumeMapper.setMaximumSamplesPerRay(4000);
+
     volumeCache[displaySetInstanceUid] = volumeActor;
 
     return volumeActor;
   }
 
-  async setStateFromProps() {
+  setStateFromProps() {
     const { studies, displaySet } = this.props.viewportData;
     const {
       studyInstanceUid,
@@ -238,8 +239,7 @@ class OHIFVTKViewport extends Component {
     }
 
     const sopClassUid = sopClassUids[0];
-
-    let { data, labelmap } = await this.getViewportData(
+    const imageDataObject = this.getViewportData(
       studies,
       studyInstanceUid,
       displaySetInstanceUid,
@@ -248,29 +248,51 @@ class OHIFVTKViewport extends Component {
       frameIndex
     );
 
+    this.imageDataObject = imageDataObject;
+
     // 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);
+    const volumeActor = this.getOrCreateVolume(
+      imageDataObject,
+      displaySetInstanceUid
+    );
 
     this.setState({
-      volumes: [volumeActor],
-      paintFilterBackgroundImageData: data,
-      paintFilterLabelMapImageData: labelmap,
+      paintFilterBackgroundImageData: imageDataObject.vtkImageData,
+      paintFilterLabelMapImageData: null, // TODO
+      percentComplete: 0,
     });
+
+    this.setState(
+      {
+        paintFilterBackgroundImageData: imageDataObject.vtkImageData,
+        paintFilterLabelMapImageData: null, // TODO
+        percentComplete: 0,
+      },
+      () => {
+        this.loadProgressively(imageDataObject);
+
+        // TODO: There must be a better way to do this.
+        // We do this so that if all the data is available the react-vtkjs-viewport
+        // Will render _something_ before the volumes are set and the volume
+        // Construction that happens in react-vtkjs-viewport locks up the CPU.
+        setTimeout(() => {
+          this.setState({
+            volumes: [volumeActor],
+          });
+        }, 200);
+      }
+    );
   }
 
   componentDidMount() {
     this.setStateFromProps();
   }
 
-  componentWillUnmount() {
-    vtkViewportSubscriptionManager.unsubscribe(this.props.viewportIndex);
-  }
-
   componentDidUpdate(prevProps) {
     const { studies, displaySet } = this.props.viewportData;
     const prevDisplaySet = prevProps.viewportData.displaySet;
@@ -285,6 +307,37 @@ class OHIFVTKViewport extends Component {
     }
   }
 
+  loadProgressively(imageDataObject) {
+    loadImageData(imageDataObject);
+
+    const { isLoading, insertPixelDataPromises } = imageDataObject;
+
+    const numberOfFrames = insertPixelDataPromises.length;
+
+    if (!isLoading) {
+      this.setState({ isLoaded: true });
+      return;
+    }
+
+    insertPixelDataPromises.forEach(promise => {
+      promise.then(numberProcessed => {
+        const percentComplete = Math.floor(
+          (numberProcessed * 100) / numberOfFrames
+        );
+
+        if (percentComplete !== this.state.percentComplete) {
+          this.setState({
+            percentComplete,
+          });
+        }
+      });
+    });
+
+    Promise.all(insertPixelDataPromises).then(() => {
+      this.setState({ isLoaded: true });
+    });
+  }
+
   render() {
     let childrenWithProps = null;
 
@@ -302,21 +355,23 @@ class OHIFVTKViewport extends Component {
 
     return (
       <>
-        {this.state.volumes ? (
-          <ConnectedVTKViewport
-            volumes={this.state.volumes}
-            paintFilterLabelMapImageData={
-              this.state.paintFilterLabelMapImageData
-            }
-            paintFilterBackgroundImageData={
-              this.state.paintFilterBackgroundImageData
-            }
-            viewportIndex={this.props.viewportIndex}
-          />
-        ) : (
-          <div style={style}>
-            <LoadingIndicator />
-          </div>
+        <div style={style}>
+          {!this.state.isLoaded && (
+            <LoadingIndicator percentComplete={this.state.percentComplete} />
+          )}
+          {this.state.volumes && (
+            <ConnectedVTKViewport
+              volumes={this.state.volumes}
+              paintFilterLabelMapImageData={
+                this.state.paintFilterLabelMapImageData
+              }
+              paintFilterBackgroundImageData={
+                this.state.paintFilterBackgroundImageData
+              }
+              viewportIndex={this.props.viewportIndex}
+            />
+          )}
+        </div>
         )}
         {childrenWithProps}
       </>

extensions/vtk/src/commandsModule.js

@@ -4,66 +4,17 @@ import {
   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';
 import Constants from 'vtk.js/Sources/Rendering/Core/VolumeMapper/Constants.js';
+import throttle from 'lodash.throttle';
 
 const { BlendMode } = Constants;
 
 // TODO: Put this somewhere else
 let apis = {};
-let currentSlabThickness = 0.1;
-let defaultSlabThickness = 0.1;
-
-function getCrosshairCallbackForIndex(index) {
-  return ({ worldPos }) => {
-    // Set camera focal point to world coordinate for linked views
-    apis.forEach((api, viewportIndex) => {
-      if (viewportIndex !== index) {
-        // We are basically doing the same as getSlice but with the world coordinate
-        // that we want to jump to instead of the camera focal point.
-        // I would rather do the camera adjustment directly but I keep
-        // doing it wrong and so this is good enough for now.
-        const renderWindow = api.genericRenderWindow.getRenderWindow();
-
-        const istyle = renderWindow.getInteractor().getInteractorStyle();
-        const sliceNormal = istyle.getSliceNormal();
-        const transform = vtkMatrixBuilder
-          .buildFromDegree()
-          .identity()
-          .rotateFromDirections(sliceNormal, [1, 0, 0]);
-
-        const mutatedWorldPos = worldPos.slice();
-        transform.apply(mutatedWorldPos);
-        const slice = mutatedWorldPos[0];
-
-        istyle.setSlice(slice);
-
-        renderWindow.render();
-      }
-
-      const renderer = api.genericRenderWindow.getRenderer();
-      const wPos = vtkCoordinate.newInstance();
-      wPos.setCoordinateSystemToWorld();
-      wPos.setValue(worldPos);
-
-      const displayPosition = wPos.getComputedDisplayValue(renderer);
-      const { svgWidgetManager } = api;
-      api.svgWidgets.crosshairsWidget.setPoint(
-        displayPosition[0],
-        displayPosition[1]
-      );
-      svgWidgetManager.render();
-    });
-  };
-}
 
 async function _getActiveViewportVTKApi(viewports) {
   const {
@@ -105,8 +56,6 @@ async function _getActiveViewportVTKApi(viewports) {
 
 function _setView(api, sliceNormal, viewUp) {
   const renderWindow = api.genericRenderWindow.getRenderWindow();
-  const renderer = api.genericRenderWindow.getRenderer();
-  const camera = renderer.getActiveCamera();
   const istyle = renderWindow.getInteractor().getInteractorStyle();
   istyle.setSliceNormal(...sliceNormal);
   istyle.setViewUp(...viewUp);
@@ -114,41 +63,6 @@ function _setView(api, sliceNormal, viewUp) {
   renderWindow.render();
 }
 
-function switchMPRInteractors(api, istyle) {
-  const renderWindow = api.genericRenderWindow.getRenderWindow();
-  const renderer = api.genericRenderWindow.getRenderer();
-  const camera = renderer.getActiveCamera();
-  const currentIStyle = renderWindow.getInteractor().getInteractorStyle();
-
-  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);
-
-  // TODO: Not sure why this is required the second time this function is called
-  istyle.setInteractor(renderWindow.getInteractor());
-
-  if (currentViewport) {
-    istyle.setViewport(currentViewport);
-  }
-
-  if (istyle.getVolumeMapper() !== api.volumes[0]) {
-    if (currentSlabThickness) {
-      istyle.setSlabThickness(currentSlabThickness);
-    }
-
-    istyle.setVolumeMapper(api.volumes[0]);
-  }
-}
-
 const actions = {
   axial: async ({ viewports }) => {
     const api = await _getActiveViewportVTKApi(viewports);
@@ -175,52 +89,56 @@ const actions = {
     apis.forEach(api => {
       const istyle = vtkInteractorStyleMPRRotate.newInstance();
 
-      switchMPRInteractors(api, istyle);
+      api.setInteractorStyle({ istyle });
     });
   },
   enableCrosshairsTool: () => {
-    apis.forEach((api, index) => {
+    apis.forEach((api, apiIndex) => {
       const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
 
-      switchMPRInteractors(api, istyle);
-
-      istyle.setCallback(getCrosshairCallbackForIndex(index));
+      api.setInteractorStyle({
+        istyle,
+        configuration: { apis, apiIndex },
+      });
     });
   },
   enableLevelTool: () => {
+    function updateVOI(apis, windowWidth, windowCenter) {
+      apis.forEach(api => {
+        api.updateVOI(windowWidth, windowCenter);
+      });
+    }
+
+    const throttledUpdateVOIs = throttle(updateVOI, 16, { trailing: true }); // ~ 60 fps
+
+    const callbacks = {
+      setOnLevelsChanged: ({ windowCenter, windowWidth }) => {
+        apis.forEach(api => {
+          const renderWindow = api.genericRenderWindow.getRenderWindow();
+
+          renderWindow.render();
+        });
+
+        throttledUpdateVOIs(apis, windowWidth, windowCenter);
+      },
+    };
+
     apis.forEach(api => {
       const istyle = vtkInteractorStyleMPRWindowLevel.newInstance();
 
-      switchMPRInteractors(api, istyle);
+      api.setInteractorStyle({ istyle, callbacks });
     });
   },
   setSlabThickness: ({ slabThickness }) => {
-    currentSlabThickness = slabThickness;
-
     apis.forEach(api => {
-      const renderWindow = api.genericRenderWindow.getRenderWindow();
-      const istyle = renderWindow.getInteractor().getInteractorStyle();
-
-      if (istyle.setSlabThickness) {
-        istyle.setSlabThickness(currentSlabThickness);
-      }
-
-      renderWindow.render();
+      api.setSlabThickness(slabThickness);
     });
   },
   changeSlabThickness: ({ change }) => {
-    currentSlabThickness += change;
-    currentSlabThickness = Math.max(currentSlabThickness, 0.1);
-
     apis.forEach(api => {
-      const renderWindow = api.genericRenderWindow.getRenderWindow();
-      const istyle = renderWindow.getInteractor().getInteractorStyle();
+      const slabThickness = Math.max(api.getSlabThickness() + change, 0.1);
 
-      if (istyle.setSlabThickness) {
-        istyle.setSlabThickness(currentSlabThickness);
-      }
-
-      renderWindow.render();
+      api.setSlabThickness(slabThickness);
     });
   },
   setBlendModeToComposite: () => {
@@ -228,13 +146,15 @@ const actions = {
       const renderWindow = api.genericRenderWindow.getRenderWindow();
       const istyle = renderWindow.getInteractor().getInteractorStyle();
 
+      const slabThickness = api.getSlabThickness();
+
       const mapper = api.volumes[0].getMapper();
       if (mapper.setBlendModeToComposite) {
         mapper.setBlendModeToComposite();
       }
 
       if (istyle.setSlabThickness) {
-        istyle.setSlabThickness(defaultSlabThickness);
+        istyle.setSlabThickness(slabThickness);
       }
       renderWindow.render();
     });
@@ -252,7 +172,6 @@ const actions = {
   setBlendMode: ({ blendMode }) => {
     apis.forEach(api => {
       const renderWindow = api.genericRenderWindow.getRenderWindow();
-      const istyle = renderWindow.getInteractor().getInteractorStyle();
 
       api.volumes[0].getMapper().setBlendMode(blendMode);
 
@@ -260,78 +179,60 @@ const actions = {
     });
   },
   mpr2d: async ({ viewports }) => {
+    // TODO push a lot of this backdoor logic lower down to the library level.
     const displaySet =
       viewports.viewportSpecificData[viewports.activeViewportIndex];
 
-    let apiByViewport;
+    // Get current VOI if cornerstone viewport.
+    const cornerstoneVOI = getVOIFromCornerstoneViewport(displaySet);
+
+    const viewportProps = [
+      {
+        //Axial
+        orientation: {
+          sliceNormal: [0, 0, 1],
+          viewUp: [0, -1, 0],
+        },
+      },
+      {
+        // Sagital
+        orientation: {
+          sliceNormal: [1, 0, 0],
+          viewUp: [0, 0, 1],
+        },
+      },
+      {
+        // Coronal
+        orientation: {
+          sliceNormal: [0, 1, 0],
+          viewUp: [0, 0, 1],
+        },
+      },
+    ];
+
     try {
-      apiByViewport = await setMPRLayout(displaySet);
+      apis = await setMPRLayout(displaySet, viewportProps, 1, 3);
     } catch (error) {
       throw new Error(error);
     }
 
-    apis = apiByViewport;
+    if (cornerstoneVOI) {
+      setVOI(cornerstoneVOI);
+    }
 
-    const rgbTransferFunction = apiByViewport[0].volumes[0]
-      .getProperty()
-      .getRGBTransferFunction(0);
-
-    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();
-      const renderer = api.genericRenderWindow.getRenderer();
-      const camera = renderer.getActiveCamera();
+    // Add widgets and set default interactorStyle of each viewport.
+    apis.forEach((api, apiIndex) => {
+      api.addSVGWidget(
+        vtkSVGCrosshairsWidget.newInstance(),
+        'crosshairsWidget'
+      );
 
       const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
-      renderWindow.getInteractor().setInteractorStyle(istyle);
 
-      istyle.setVolumeMapper(api.volumes[0]);
-      istyle.setCallback(getCrosshairCallbackForIndex(index));
-
-      const svgWidgetManager = vtkSVGWidgetManager.newInstance();
-      svgWidgetManager.setRenderer(renderer);
-      svgWidgetManager.setScale(1);
-
-      const crosshairsWidget = vtkSVGCrosshairsWidget.newInstance();
-
-      svgWidgetManager.addWidget(crosshairsWidget);
-      svgWidgetManager.render();
-
-      api.svgWidgetManager = svgWidgetManager;
-      api.svgWidgets = {
-        crosshairsWidget,
-      };
-
-      switch (index) {
-        default:
-        case 0:
-          //Axial
-          istyle.setSliceNormal(0, 0, 1);
-          istyle.setViewUp(0, -1, 0);
-
-          break;
-        case 1:
-          // sagittal
-          istyle.setSliceNormal(1, 0, 0);
-          istyle.setViewUp(0, 0, 1);
-          break;
-        case 2:
-          // Coronal
-          istyle.setSliceNormal(0, 1, 0);
-          istyle.setViewUp(0, 0, 1);
-          break;
-      }
-
-      renderWindow.render();
+      api.setInteractorStyle({
+        istyle,
+        configuration: { apis, apiIndex },
+      });
     });
   },
 };
@@ -421,3 +322,41 @@ export default {
   definitions,
   defaultContext: 'ACTIVE_VIEWPORT::VTK',
 };
+
+function getVOIFromCornerstoneViewport(displaySet) {
+  const cornerstoneElement = cornerstone.getEnabledElement(displaySet.dom);
+
+  if (cornerstoneElement) {
+    const imageId = cornerstoneElement.image.imageId;
+
+    const { modality } = cornerstone.metaData.get(
+      'generalSeriesModule',
+      imageId
+    );
+
+    if (modality !== 'PT') {
+      const { windowWidth, windowCenter } = cornerstoneElement.viewport.voi;
+
+      return {
+        windowWidth,
+        windowCenter,
+      };
+    }
+  }
+}
+
+function setVOI(voi) {
+  const { windowWidth, windowCenter } = voi;
+  const lower = windowCenter - windowWidth / 2.0;
+  const upper = windowCenter + windowWidth / 2.0;
+
+  const rgbTransferFunction = apis[0].volumes[0]
+    .getProperty()
+    .getRGBTransferFunction(0);
+
+  rgbTransferFunction.setRange(lower, upper);
+
+  apis.forEach(api => {
+    api.updateVOI(windowWidth, windowCenter);
+  });
+}

extensions/vtk/src/toolbarComponents/SlabThicknessToolbarComponent.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Range, Checkbox, Select } from '@ohif/ui';
+import { Range, Checkbox, OldSelect } from '@ohif/ui';
 
 import './slab-thickness-toolbar-button.styl';
 
@@ -16,6 +16,10 @@ const ToolbarLabel = props => {
   return <div className="toolbar-button-label">{label}</div>;
 };
 
+ToolbarLabel.propTypes = {
+  label: PropTypes.string.isRequired,
+};
+
 const ToolbarSlider = props => {
   const { value, min, max, onChange } = props;
   return (
@@ -33,6 +37,13 @@ const ToolbarSlider = props => {
   );
 };
 
+ToolbarSlider.propTypes = {
+  value: PropTypes.number.isRequired,
+  min: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
 const _getSelectOptions = button => {
   return button.operationButtons.map(button => {
     return {
@@ -184,12 +195,12 @@ function SlabThicknessToolbarComponent({
           checked={state.modeChecked}
           onChange={onChangeCheckbox}
         ></Checkbox>
-        <Select
+        <OldSelect
           key="toolbar-select"
           options={selectOptions}
           value={selectOptions[INITIAL_OPTION_INDEX].value}
           onChange={onChangeSelect}
-        ></Select>
+        ></OldSelect>
       </div>
     </div>
   );

extensions/vtk/src/utils/setMPRLayout.js

@@ -1,11 +1,23 @@
 import setLayoutAndViewportData from './setLayoutAndViewportData.js';
 
-export default function setMPRLayout(displaySet) {
+export default function setMPRLayout(
+  displaySet,
+  viewportPropsArray,
+  numRows = 1,
+  numColumns = 1
+) {
   return new Promise((resolve, reject) => {
     const viewports = [];
-    const numRows = 1;
-    const numColumns = 3;
     const numViewports = numRows * numColumns;
+
+    if (viewportPropsArray && viewportPropsArray.length !== numViewports) {
+      reject(
+        new Error(
+          'viewportProps is supplied but its length is not equal to numViewports'
+        )
+      );
+    }
+
     const viewportSpecificData = {};
 
     for (let i = 0; i < numViewports; i++) {
@@ -17,8 +29,8 @@ export default function setMPRLayout(displaySet) {
     const apis = [];
     viewports.forEach((viewport, index) => {
       apis[index] = null;
+      const viewportProps = viewportPropsArray[index];
       viewports[index] = Object.assign({}, viewports[index], {
-        // plugin: 'vtk',
         vtk: {
           mode: 'mpr', // TODO: not used
           afterCreation: api => {
@@ -28,6 +40,7 @@ export default function setMPRLayout(displaySet) {
               resolve(apis);
             }
           },
+          ...viewportProps,
         },
       });
     });

extensions/vtk/src/utils/vtkViewportSubscriptionManager.js

@@ -1,28 +0,0 @@
-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

@@ -38,7 +38,8 @@
 [context.deploy-preview]
   base = ""
   publish = ".netlify/www/"
-  command = "yarn config set workspaces-experimental true && chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"
+  command = "chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"
+  # command = "yarn config set workspaces-experimental true && chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"
 
 [[headers]]
   # Define which paths this specific [[headers]] block will cover.

package.json

@@ -61,15 +61,18 @@
     "css-loader": "^3.2.0",
     "dotenv": "^8.1.0",
     "eslint": "5.16.0",
+    "eslint-config-prettier": "^6.4.0",
     "eslint-config-react-app": "^4.0.1",
     "eslint-plugin-flowtype": "2.x",
     "eslint-plugin-import": "2.x",
     "eslint-plugin-jsx-a11y": "6.x",
     "eslint-plugin-node": "^9.1.0",
+    "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-hooks": "1.5.0",
     "extract-css-chunks-webpack-plugin": "^4.5.4",
+    "favicons-webpack-plugin": "^1.0.2",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^3.0.0",
     "jest": "^24.8.0",
@@ -100,7 +103,7 @@
     "webpack-dev-server": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-merge": "^4.2.1",
-    "workbox-webpack-plugin": "^4.3.1",
+    "workbox-webpack-plugin": "^5.0.0-beta.1",
     "worker-loader": "^2.0.0"
   },
   "husky": {

platform/core/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.6.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.5.2...@ohif/core@1.6.0) (2019-10-26)
+
+
+### Features
+
+* Snapshot Download Tool ([#840](https://github.com/OHIF/Viewers/issues/840)) ([450e098](https://github.com/OHIF/Viewers/commit/450e0981a5ba054fcfcb85eeaeb18371af9088f8))
+
+
+
+
+
+## [1.5.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.5.1...@ohif/core@1.5.2) (2019-10-25)
+
+
+### Bug Fixes
+
+* set SR in ActiveViewport by clicking thumb ([#1091](https://github.com/OHIF/Viewers/issues/1091)) ([986b7ae](https://github.com/OHIF/Viewers/commit/986b7ae2bf4f7d27f326e62f93285ce20eaf0a79))
+
+
+
+
+
+## [1.5.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.5.0...@ohif/core@1.5.1) (2019-10-25)
+
+
+### Bug Fixes
+
+* 🐛 Orthographic MPR fix ([#1092](https://github.com/OHIF/Viewers/issues/1092)) ([460e375](https://github.com/OHIF/Viewers/commit/460e375f0aa75d35f7a46b4d48e6cc706019956d))
+
+
+
+
+
+# [1.5.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.4.0...@ohif/core@1.5.0) (2019-10-25)
+
+
+### Features
+
+* 🎸 Allow routes to load Google Cloud DICOM Stores in the Study List ([#1069](https://github.com/OHIF/Viewers/issues/1069)) ([21b586b](https://github.com/OHIF/Viewers/commit/21b586b08f3dde6613859712a9e0577dece564db))
+
+
+
+
+
 # [1.4.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.3.2...@ohif/core@1.4.0) (2019-10-15)
 
 

platform/core/package.json

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

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

@@ -147,6 +147,7 @@ export class StudyMetadata extends Metadata {
 
       if (isMultiFrame(instance)) {
         displaySet = makeDisplaySet(series, [instance]);
+
         displaySet.setAttributes({
           sopClassUids,
           isClip: true,

platform/core/src/redux/reducers/viewports.js

@@ -34,7 +34,6 @@ const defaultState = {
  * @param {Object} [action.viewportSpecificData]
  */
 const viewports = (state = defaultState, action) => {
-  let currentData;
   let viewportSpecificData;
   let useActiveViewport = false;
   switch (action.type) {
@@ -85,14 +84,24 @@ const viewports = (state = defaultState, action) => {
     // Allow fall-through
     // eslint-disable-next-line
     case SET_SPECIFIC_DATA: {
+      const layout = cloneDeep(state.layout);
+      const hasPlugin = action.data && action.data.plugin;
       const viewportIndex = useActiveViewport
         ? state.activeViewportIndex
         : action.viewportIndex;
-      currentData = cloneDeep(state.viewportSpecificData[viewportIndex]) || {};
-      viewportSpecificData = cloneDeep(state.viewportSpecificData);
-      viewportSpecificData[viewportIndex] = merge({}, currentData, action.data);
+      const { dom } = state.viewportSpecificData[viewportIndex];
 
-      return Object.assign({}, state, { viewportSpecificData });
+      viewportSpecificData = cloneDeep(state.viewportSpecificData);
+      viewportSpecificData[viewportIndex] = {
+        dom,
+        ...action.data,
+      };
+
+      if (hasPlugin) {
+        layout.viewports[viewportIndex].plugin = action.data.plugin;
+      }
+
+      return Object.assign({}, state, { layout, viewportSpecificData });
     }
     case CLEAR_VIEWPORT:
       viewportSpecificData = cloneDeep(state.viewportSpecificData);

platform/core/src/utils/b64toBlob.js

@@ -0,0 +1,22 @@
+/* Enabled JPEG images downloading on IE11. */
+const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
+  const byteCharacters = atob(b64Data);
+  const byteArrays = [];
+
+  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+    const slice = byteCharacters.slice(offset, offset + sliceSize);
+
+    const byteNumbers = new Array(slice.length);
+    for (let i = 0; i < slice.length; i++) {
+      byteNumbers[i] = slice.charCodeAt(i);
+    }
+
+    const byteArray = new Uint8Array(byteNumbers);
+    byteArrays.push(byteArray);
+  }
+
+  const blob = new Blob(byteArrays, { type: contentType });
+  return blob;
+};
+
+export default b64toBlob;

platform/core/src/utils/index.js

@@ -9,6 +9,7 @@ import studyMetadataManager from './studyMetadataManager';
 import updateMetaDataManager from './updateMetaDataManager.js';
 import writeScript from './writeScript.js';
 import DicomLoaderService from './dicomLoaderService.js';
+import b64toBlob from './b64toBlob.js';
 import * as urlUtil from './urlUtil';
 
 const utils = {
@@ -18,6 +19,7 @@ const utils = {
   addServers,
   sortBy,
   writeScript,
+  b64toBlob,
   StackManager,
   studyMetadataManager,
   // Updates WADO-RS metaDataManager
@@ -34,6 +36,7 @@ export {
   addServers,
   sortBy,
   writeScript,
+  b64toBlob,
   StackManager,
   studyMetadataManager,
   // Updates WADO-RS metaDataManager

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

@@ -9,13 +9,14 @@ describe('Top level exports', () => {
       'addServers',
       'sortBy',
       'writeScript',
+      'b64toBlob',
       'StackManager',
       'studyMetadataManager',
       // Updates WADO-RS metaDataManager
       'updateMetaDataManager',
       'DICOMTagDescriptions',
       'DicomLoaderService',
-      'urlUtil'
+      'urlUtil',
     ].sort();
 
     const exports = Object.keys(utils.default).sort();

platform/core/src/utils/urlUtil.js

@@ -6,7 +6,7 @@ const PARAM_PATTERN_IDENTIFIER = ':';
 function toLowerCaseFirstLetter(word) {
   return word[0].toLowerCase() + word.slice(1);
 }
-const getFilters = (location = {}) => {
+const getQueryFilters = (location = {}) => {
   const { search } = location;
 
   if (!search) {
@@ -55,13 +55,19 @@ const replaceParam = (path = '', paramKey, paramValue) => {
   return path;
 };
 
+const isValidPath = path => {
+  const paramPatternPiece = `/${PARAM_PATTERN_IDENTIFIER}`;
+  return path.indexOf(paramPatternPiece) < 0;
+};
+
 const queryString = {
-  getQueryFilters: getFilters,
+  getQueryFilters,
 };
 
 const paramString = {
-  parseParam: parseParam,
-  replaceParam: replaceParam,
+  isValidPath,
+  parseParam,
+  replaceParam,
 };
 
 export { parse, queryString, paramString };

platform/ui/CHANGELOG.md

@@ -3,6 +3,80 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.58.2](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.1...@ohif/ui@0.58.2) (2019-10-29)
+
+
+### Bug Fixes
+
+* 🐛 Limit image download size to avoid browser issues ([#1112](https://github.com/OHIF/Viewers/issues/1112)) ([5716b71](https://github.com/OHIF/Viewers/commit/5716b71d409ee1c6f13393c8cb7f50222415e198)), closes [#1099](https://github.com/OHIF/Viewers/issues/1099)
+
+
+
+
+
+## [0.58.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.0...@ohif/ui@0.58.1) (2019-10-29)
+
+
+### Bug Fixes
+
+* **StudyList:** camel case colSpan ([#1123](https://github.com/OHIF/Viewers/issues/1123)) ([0d498ba](https://github.com/OHIF/Viewers/commit/0d498ba17ddde8d8f0c51d742770e1574041eec0))
+
+
+
+
+
+# [0.58.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.57.1...@ohif/ui@0.58.0) (2019-10-28)
+
+
+### Features
+
+* responsive study list ([#1068](https://github.com/OHIF/Viewers/issues/1068)) ([2cdef4b](https://github.com/OHIF/Viewers/commit/2cdef4b9844cc2ce61e9ce76b5a942ba7051fe16))
+
+
+
+
+
+## [0.57.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.57.0...@ohif/ui@0.57.1) (2019-10-28)
+
+
+### Bug Fixes
+
+* MIP styling ([#1109](https://github.com/OHIF/Viewers/issues/1109)) ([0d21cc6](https://github.com/OHIF/Viewers/commit/0d21cc6ad0c47706b9e62e05fe2a0f1d86339760))
+
+
+
+
+
+# [0.57.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.56.1...@ohif/ui@0.57.0) (2019-10-26)
+
+
+### Features
+
+* Snapshot Download Tool ([#840](https://github.com/OHIF/Viewers/issues/840)) ([450e098](https://github.com/OHIF/Viewers/commit/450e0981a5ba054fcfcb85eeaeb18371af9088f8))
+
+
+
+
+
+## [0.56.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.56.0...@ohif/ui@0.56.1) (2019-10-26)
+
+**Note:** Version bump only for package @ohif/ui
+
+
+
+
+
+# [0.56.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.55.0...@ohif/ui@0.56.0) (2019-10-22)
+
+
+### Features
+
+* 🎸 Load spinner when selecting gcloud store. Add key on td ([#1034](https://github.com/OHIF/Viewers/issues/1034)) ([e62f403](https://github.com/OHIF/Viewers/commit/e62f403fe9e3df56713128e3d59045824b086d8d)), closes [#1057](https://github.com/OHIF/Viewers/issues/1057)
+
+
+
+
+
 # [0.55.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.54.0...@ohif/ui@0.55.0) (2019-10-15)
 
 

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "0.55.0",
+  "version": "0.58.2",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -48,7 +48,7 @@
     "moment": "2.24.0",
     "prop-types": "15.6.2",
     "react-bootstrap-modal": "4.2.0",
-    "react-dates": "18.4.1",
+    "react-dates": "21.2.1",
     "react-dnd": "9.3.4",
     "react-dnd-html5-backend": "^9.3.4",
     "react-dnd-touch-backend": "^9.3.4",

platform/ui/src/components/downloadDialog/DownloadDialog.js

@@ -0,0 +1,341 @@
+import React, { useEffect, useState, createRef } from 'react';
+import Modal from 'react-bootstrap-modal';
+import PropTypes from 'prop-types';
+
+import './DownloadDialog.styl';
+import { TextInput, Select } from '@ohif/ui';
+import { withTranslation } from '../../utils/LanguageProvider';
+
+const FILE_TYPE_OPTIONS = [
+  {
+    key: 'jpg',
+    value: 'jpg',
+  },
+  {
+    key: 'png',
+    value: 'png',
+  },
+];
+
+const DEFAULT_FILENAME = 'image';
+
+const DownloadDialog = ({
+  t,
+  isOpen,
+  activeViewport,
+  onClose,
+  updateViewportPreview,
+  enableViewport,
+  disableViewport,
+  toggleAnnotations,
+  loadImage,
+  downloadBlob,
+  defaultSize,
+  minimumSize,
+  maximumSize,
+  canvasClass,
+}) => {
+  const [filename, setFilename] = useState(DEFAULT_FILENAME);
+  const [fileType, setFileType] = useState('jpg');
+
+  const [height, setHeight] = useState(defaultSize);
+  const [width, setWidth] = useState(defaultSize);
+
+  const [showAnnotations, setShowAnnotations] = useState(true);
+
+  const [keepAspect, setKeepAspect] = useState(true);
+  const [lastImage, setLastImage] = useState();
+
+  const [viewportElement, setViewportElement] = useState();
+  const [viewportElementHeight, setViewportElementHeight] = useState(
+    minimumSize
+  );
+  const [viewportElementWidth, setViewportElementWidth] = useState(minimumSize);
+
+  const [downloadCanvas, setDownloadCanvas] = useState({
+    ref: createRef(),
+    width: minimumSize,
+    height: minimumSize,
+  });
+
+  const [viewportPreview, setViewportPreview] = useState({
+    src: null,
+    width: minimumSize,
+    height: minimumSize,
+  });
+
+  useEffect(() => {
+    enableViewport(viewportElement);
+
+    return () => {
+      disableViewport(viewportElement);
+
+      setHeight(defaultSize);
+      setWidth(defaultSize);
+    };
+  }, [defaultSize, disableViewport, enableViewport, viewportElement]);
+
+  useEffect(() => {
+    const validSize = value => (value >= minimumSize ? value : minimumSize);
+    const loadAndUpdateViewports = async () => {
+      const {
+        image,
+        width: scaledWidth,
+        height: scaledHeight,
+      } = await loadImage(activeViewport, viewportElement, width, height);
+      setLastImage(image);
+
+      toggleAnnotations(showAnnotations, viewportElement);
+
+      setViewportElementHeight(validSize(scaledHeight));
+      setViewportElementWidth(validSize(scaledWidth));
+
+      setDownloadCanvas(state => ({
+        ...state,
+        height: validSize(scaledHeight),
+        width: validSize(scaledWidth),
+      }));
+
+      const {
+        dataUrl,
+        width: viewportElementWidth,
+        height: viewportElementHeight,
+      } = await updateViewportPreview(
+        viewportElement,
+        downloadCanvas.ref.current,
+        fileType
+      );
+
+      setViewportPreview(state => ({
+        ...state,
+        src: dataUrl,
+        width: validSize(viewportElementWidth),
+        height: validSize(viewportElementHeight),
+      }));
+    };
+
+    loadAndUpdateViewports();
+  }, [
+    activeViewport,
+    viewportElement,
+    showAnnotations,
+    height,
+    width,
+    loadImage,
+    toggleAnnotations,
+    updateViewportPreview,
+    fileType,
+    downloadCanvas.ref,
+    minimumSize,
+    maximumSize,
+  ]);
+
+  const onHeightChange = event => {
+    const newHeight = Math.min(event.target.value, maximumSize);
+    setHeight(newHeight);
+
+    setViewportElementHeight(newHeight);
+
+    setDownloadCanvas(state => ({
+      ...state,
+      height: newHeight,
+    }));
+
+    if (keepAspect) {
+      const multiplier = newHeight / lastImage.height;
+      const newWidth = Math.round(lastImage.width * multiplier);
+
+      setWidth(newWidth);
+      setViewportElementWidth(newWidth);
+
+      setDownloadCanvas(state => ({
+        ...state,
+        width: newWidth,
+      }));
+    }
+  };
+
+  const onWidthChange = event => {
+    const newWidth = Math.min(event.target.value, maximumSize);
+    setWidth(newWidth);
+
+    setViewportElementWidth(newWidth);
+
+    setDownloadCanvas(state => ({
+      ...state,
+      width: newWidth,
+    }));
+
+    if (keepAspect) {
+      const multiplier = newWidth / lastImage.width;
+      const newHeight = Math.round(lastImage.height * multiplier);
+
+      setHeight(newHeight);
+      setViewportElementHeight(newHeight);
+
+      setDownloadCanvas(state => ({
+        ...state,
+        height: newHeight,
+      }));
+    }
+  };
+
+  const downloadImage = () => {
+    downloadBlob(
+      filename || DEFAULT_FILENAME,
+      fileType,
+      viewportElement,
+      downloadCanvas.ref.current
+    );
+  };
+
+  return (
+    <Modal
+      show={isOpen}
+      onHide={onClose}
+      aria-labelledby="ModalHeader"
+      className="DownloadDialog modal fade themed in"
+      backdrop={false}
+      large={true}
+      keyboard={true}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>{t('Download High Quality Image')}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <div className="title">
+          {t(
+            'Please specify the dimensions, filename, and desired type for the output image.'
+          )}
+        </div>
+
+        <div className="file-info-container">
+          <div className="col">
+            <div className="width">
+              <TextInput
+                type="number"
+                min={minimumSize}
+                max={maximumSize}
+                value={width}
+                label={t('Image width (px)')}
+                onChange={onWidthChange}
+              />
+            </div>
+            <div className="height">
+              <TextInput
+                type="number"
+                min={minimumSize}
+                max={maximumSize}
+                value={height}
+                label={t('Image height (px)')}
+                onChange={onHeightChange}
+              />
+            </div>
+          </div>
+
+          <div className="col">
+            <div className="file-name">
+              <TextInput
+                type="text"
+                value={filename}
+                onChange={event => setFilename(event.target.value)}
+                label={t('File name')}
+                id="file-name"
+              />
+            </div>
+            <div className="file-type">
+              <Select
+                value={fileType}
+                onChange={event => setFileType(event.target.value)}
+                options={FILE_TYPE_OPTIONS}
+                label={t('File type')}
+              />
+            </div>
+          </div>
+
+          <div className="col">
+            <div className="show-annotations">
+              <label htmlFor="show-annotations" className="form-check-label">
+                <input
+                  id="show-annotations"
+                  type="checkbox"
+                  className="form-check-input"
+                  checked={showAnnotations}
+                  onChange={event => setShowAnnotations(event.target.checked)}
+                />
+                {t('Show Annotations')}
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <div
+          style={{
+            height: viewportElementHeight,
+            width: viewportElementWidth,
+            position: 'absolute',
+            left: '9999px',
+          }}
+          ref={ref => setViewportElement(ref)}
+        >
+          <canvas
+            className={canvasClass}
+            style={{
+              height: downloadCanvas.height,
+              width: downloadCanvas.width,
+              display: 'block',
+            }}
+            width={downloadCanvas.width}
+            height={downloadCanvas.height}
+            ref={downloadCanvas.ref}
+          ></canvas>
+        </div>
+
+        <div className="preview">
+          <h4> {t('Image Preview')}</h4>
+          <img
+            className="viewport-preview"
+            src={viewportPreview.src}
+            alt="Viewport Preview"
+            style={{
+              height: viewportPreview.height,
+              width: viewportPreview.width,
+            }}
+          />
+        </div>
+
+        <div className="actions">
+          <div className="action-cancel">
+            <button type="button" className="btn btn-danger" onClick={onClose}>
+              {t('Cancel')}
+            </button>
+          </div>
+          <div className="action-save">
+            <button onClick={downloadImage} className="btn btn-primary">
+              {t('Download')}
+            </button>
+          </div>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+DownloadDialog.propTypes = {
+  t: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  activeViewport: PropTypes.object,
+  onClose: PropTypes.func.isRequired,
+  updateViewportPreview: PropTypes.func.isRequired,
+  enableViewport: PropTypes.func.isRequired,
+  disableViewport: PropTypes.func.isRequired,
+  toggleAnnotations: PropTypes.func.isRequired,
+  loadImage: PropTypes.func.isRequired,
+  downloadBlob: PropTypes.func.isRequired,
+  defaultSize: PropTypes.number.isRequired,
+  minimumSize: PropTypes.number.isRequired,
+  maximumSize: PropTypes.number.isRequired,
+  canvasClass: PropTypes.string.isRequired,
+};
+
+export default withTranslation('DownloadDialog')(DownloadDialog);

platform/ui/src/components/downloadDialog/DownloadDialog.styl

@@ -0,0 +1,107 @@
+@import './../../design/styles/common/global.styl'
+@import './../../design/styles/common/form.styl'
+@import './../../design/styles/common/button.styl'
+
+.DownloadDialog
+  color: var(--text-secondary-color);
+  filter: drop-shadow(0 0 3px var(--ui-gray-darkest));
+  border: none;
+  border-radius: 8px;
+  width: inherit;
+  padding: 15px;
+  background: transparent;
+  z-index: 1080 !important;
+
+  .title
+    margin: 0;
+    font-weight: bold;
+
+  .file-info-container
+    display: flex;
+    flex-direction: row;
+    margin: 20px 0;
+    border-radius: 5px;
+    padding: 20px 10px 0;
+    background-color: #16202b;
+
+    .form-control.input-ohif
+      padding: 6px 12px;
+
+    @media screen and (max-width: 1023px)
+      flex-direction: column;
+
+    .col
+      flex-grow: 1;
+
+      .input-ohif
+        margin-left: 15px;
+        @media screen and (max-width: 1023px)
+          margin-left: 0;
+          margin-top: 5px;
+          width: 100%;
+
+      .file-type
+        .select-ohif
+          margin-left: 17px;
+          @media screen and (max-width: 1023px)
+            margin-left: 0;
+            width: 100%;
+
+      .show-annotations
+        font-weight: bold;
+        line-height: 30px;
+        input
+          margin-right: 7px;
+          vertical-align: middle;
+        label
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+  .preview
+    display: flex;
+    flex-direction column;
+    height: fit-content;
+    background-color: #16202b;
+    width: fit-content;
+    padding: 10px;
+    border-radius: 5px;
+    align-self: center;
+    @media screen and (max-width: 1023px)
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+
+    .viewport-preview
+      max-height: 512px;
+      max-width: 512px;
+
+    h4
+      width: 100%;
+      text-align center;
+      font-size: 1.3em;
+      margin: 0 0 10px;
+
+    .preview-container
+      width: auto;
+      height: 100%;
+      max-height: 400px;
+      object-fit contain;
+
+  .actions
+    display: flex;
+    height: 60px;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    align-items: center;
+    .action-cancel
+      margin: 0 20px;
+    .actions-save
+      margin: 0 0 0 10px;
+
+.modal-dialog
+  height: 100%;
+
+  .modal-body
+    display: flex;
+    flex-direction: column;

platform/ui/src/components/downloadDialog/__docs__/downloadDialog.mdx

@@ -0,0 +1,39 @@
+---
+name: Download Dialog
+menu: Components
+route: /components/download-dialog
+---
+
+import { Playground, Props } from 'docz'
+import { State } from 'react-powerplug'
+import { DownloadDialog } from './../index'
+import NameSpace from '../../../__docs__/NameSpace'
+
+# Download Dialog
+
+## Basic usage
+
+<Playground>
+  <State
+    initial={{}}
+  >
+    {({ state, setState }) => (
+      <React.Fragment>
+        <div>
+          <pre>{JSON.stringify(state, null, 2)}</pre>
+        </div>
+        <div style={{ maxWidth: '400px', margin: '0 auto' }}>
+          <DownloadDialog />
+        </div>
+      </React.Fragment>
+    )}
+  </State>
+</Playground>
+
+## API
+
+<Props of={DownloadDialog} />
+
+## Translation Namespace
+
+<NameSpace name="DownloadDialog" />

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

@@ -0,0 +1,2 @@
+import DownloadDialog from './DownloadDialog';
+export { DownloadDialog };

platform/ui/src/components/index.js

@@ -11,17 +11,24 @@ import {
 
 import { Checkbox } from './checkbox';
 import { CineDialog } from './cineDialog';
+import { DownloadDialog } from './downloadDialog';
 import { QuickSwitch } from './quickSwitch';
 import { RoundedButtonGroup } from './roundedButtonGroup';
 import { SelectTree } from './selectTree';
 import { SimpleDialog } from './simpleDialog';
-import { StudyList } from './studyList';
+import {
+  PageToolbar,
+  StudyList,
+  TableSearchFilter,
+  TablePagination,
+} from './studyList';
 import { ToolbarSection } from './toolbarSection';
 import { Tooltip } from './tooltip';
 
 export {
   Checkbox,
   CineDialog,
+  DownloadDialog,
   LayoutButton,
   LayoutChooser,
   MeasurementTable,
@@ -30,12 +37,15 @@ export {
   OverlayTrigger,
   QuickSwitch,
   RoundedButtonGroup,
+  PageToolbar,
   SelectTree,
   SimpleDialog,
   StudyBrowser,
   StudyList,
   TableList,
   TableListItem,
+  TableSearchFilter,
+  TablePagination,
   ThumbnailEntry,
   ToolbarSection,
   Tooltip,

platform/ui/src/components/studyList/CustomDateRangePicker.css

@@ -0,0 +1,83 @@
+/* NOTE: the order of these styles DO matter */
+
+/* Will edit everything selected including everything between a range of dates */
+.CalendarDay__selected_span {
+  background: var(--table-text-secondary-color);
+  color: #fff;
+  border-color: #e4e7e7;
+}
+
+/* Will edit selected date or the endpoints of a range of dates */
+.CalendarDay__selected {
+  background: var(--table-text-secondary-color);
+  color: #fff;
+  border-color: #e4e7e7;
+}
+
+/* Will edit when hovered over. _span style also has this property */
+.CalendarDay__selected:hover {
+  background: var(--table-text-secondary-color);
+  color: #fff;
+  border-color: #e4e7e7;
+}
+
+/* Will edit when the second date (end date) in a range of dates
+is not yet selected. Edits the dates between your mouse and said date */
+.CalendarDay__hovered_span:hover,
+.CalendarDay__hovered_span {
+  background: var(--table-text-secondary-color);
+  color: #fff;
+  border-color: #e4e7e7;
+}
+
+/* EXTERIOR INPUT STYLE */
+/* Container - placement */
+.DateRangePicker {
+  height: 40px;
+  margin: 0 5px 20px 5px;
+  cursor: pointer;
+  border: none;
+  width: 100%;
+}
+/* Container - visual */
+.DateRangePickerInput {
+  width: calc(100% - 10px); /* Just use padding? */
+  background-color: var(--input-background-color);
+  border-color: var(--input-background-color);
+  color: var(--input-placeholder-color);
+  height: 40px;
+}
+
+.DateRangePickerInput.DateRangePickerInput__withBorder {
+  border-radius: 4px;
+  background-color: var(--input-background-color);
+}
+
+/* Input Container */
+.DateInput {
+  width: 97px;
+  height: 38px;
+  border-radius: 4px;
+  background-color: var(--input-background-color);
+}
+
+/* Actual Input Element */
+.DateInput > .DateInput_input {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--input-placeholder-color);
+  height: 38px;
+  font-size: 10pt;
+  padding: 0;
+}
+
+/* PRESETS */
+.PresetDateRangePicker_panel {
+  display: flex;
+  justify-content: space-between;
+}
+
+.PresetDateRangePicker_button {
+  margin: 0;
+  padding: 4px 8px;
+}

platform/ui/src/components/studyList/CustomDateRangePicker.js

@@ -2,13 +2,12 @@
 //  https://github.com/airbnb/react-dates#initialize
 import 'react-dates/initialize';
 import 'react-dates/lib/css/_datepicker.css';
+import './CustomDateRangePicker.css';
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import { DateRangePicker } from 'react-dates';
 
-import './CustomDateRangePicker.styl';
-
 export default class CustomDateRangePicker extends React.Component {
   static propTypes = {
     presets: PropTypes.arrayOf(
@@ -85,15 +84,13 @@ export default class CustomDateRangePicker extends React.Component {
     } = this.props;
 
     return (
-      <div>
-        <DateRangePicker
-          {...dateRangePickerProps}
-          startDate={this.state.startDate}
-          endDate={this.state.endDate}
-          renderCalendarInfo={this.renderDatePresets}
-          onDatesChange={this.onDatesChange}
-        />
-      </div>
+      <DateRangePicker
+        {...dateRangePickerProps}
+        startDate={this.state.startDate}
+        endDate={this.state.endDate}
+        renderCalendarInfo={this.renderDatePresets}
+        onDatesChange={this.onDatesChange}
+      />
     );
   }
 }

platform/ui/src/components/studyList/CustomDateRangePicker.styl

@@ -1,84 +0,0 @@
-.CalendarDay__selected_span {
-  background: var(--calendar-main-color); 
-  color: var(--calendar-day-color); 
-  border: 1px solid;
-  border-color: var(--calendar-day-border-color);
-}
-
-.CalendarDay__default:hover {
-  color: var(--calendar-main-color);
-}
-
-.CalendarDay__selected_span:active, .CalendarDay__selected_span:hover {
-  background: var(--calendar-day-active-hover-background-color);
-  border-color: var(--calendar-day-border-color);
-  color: var(--calendar-day-color);
-}
-
-.CalendarDay__selected {
-  background: var(--calendar-main-color);
-  color: var(--calendar-day-color);
-  border-color: var(--calendar-day-border-color);
-}
-
-.CalendarDay__selected:hover {
-  background: var(--calendar-main-color);
-  color: var(--calendar-day-color);
-  border-color: var(--calendar-day-border-color);
-}
-
-.CalendarDay__hovered_span:hover,
-.CalendarDay__hovered_span {
-  background: var(--calendar-main-color);
-  color: var(--calendar-day-color);
-  border-color:var(--calendar-day-color);
-}
-
-.DateInput {
-  width: 97px
-}
-
-.DateInput_input {
-  background-color: var(--input-background-color)
-  border-color: var(--input-background-color)
-  color: var(--input-placeholder-color)
-  height: 38px
-  font-size: 10pt
-}
-
-.DateRangePickerInput {
-  background-color: var(--input-background-color)
-  border-color: var(--input-background-color)
-  color: var(--input-placeholder-color)
-  height: 40px
-}
-
-.PresetDateRangePicker_panel: {
-    padding: 0 22px 11px 22px;
-}
-
-.PresetDateRangePicker_button {
-    position: relative;
-    height: 100%;
-    textAlign: center;
-    background: none;
-    border: 2px solid var(--calendar-main-color);
-    color: var(--calendar-main-color);
-    padding: 4px 12px;
-    marginRight: 8;
-    font: inherit;
-    fontWeight: 700;
-    lineHeight: normal;
-    overflow: visible;
-    boxSizing: border-box;
-    cursor: pointer;
-
-    :active: {
-      outline: 0;
-    }
-}
-
-.PresetDateRangePicker_button__selected: {
-  color: var(--calendar-day-color);
-  background: var(--calendar-main-color);
-};

platform/ui/src/components/studyList/PageToolbar.js

@@ -1,11 +1,9 @@
-import './StudyListToolbar.styl';
-
 import React, { PureComponent } from 'react';
 
 import { Icon } from './../../elements/Icon';
 import PropTypes from 'prop-types';
 
-class StudylistToolbar extends PureComponent {
+class PageToolbar extends PureComponent {
   static propTypes = {
     onImport: PropTypes.func,
   };
@@ -37,4 +35,4 @@ class StudylistToolbar extends PureComponent {
   }
 }
 
-export { StudylistToolbar };
+export { PageToolbar };

platform/ui/src/components/studyList/PaginationArea.styl

@@ -1,64 +1,63 @@
 .pagination-area
-    color: var(--text-secondary-color);
-    font-size: 13px
-    font-weight: normal !important
+  display: flex;
+  color: var(--text-secondary-color);
+  font-size: 13px
+  font-weight: normal !important
 
-    label
-        font-weight: normal
-
-    select
-        margin: 5px
-        background-color: var(--primary-background-color)
-        color: white
-
-  .row
-    display: flex;
-
-    .rows-dropdown
-      width: 25%;
-      padding-right: 15px;
-      padding-left: 15px;
-
-    .pagination-buttons
-      width: 75%;
-      padding-right: 15px;
-      padding-left: 15px;
-
-    .form-group
-      margin-bottom: 15px;
-
-  .rows-per-page label.wrapperLabel
-    display: inline-table !important
-    margin: 0 4px
-
-    select
-      margin: 0px 4px 0px 4px
-      width: 42px
-
-  .page-buttons
-    margin: 0
-    text-align: right
+  label
     font-weight: normal
-    ul.pagination-control
-      margin: 0
 
-      li
-        display: table-cell
-        padding: 5px 2px
+  select
+    margin: 5px
+    background-color: var(--primary-background-color)
+    color: white
 
+
+  .rows-dropdown
+    width: 25%;
+    padding-right: 15px;
+    padding-left: 15px;
+
+  .pagination-buttons
+    width: 75%;
+    padding-right: 15px;
+    padding-left: 15px;
+
+  .form-group
+    margin-bottom: 15px;
+
+.rows-per-page label.wrapperLabel
+  display: inline-table !important
+  margin: 0 4px
+
+  select
+    margin: 0px 4px 0px 4px
+    width: 42px
+
+.page-buttons
+  margin: 0
+  text-align: right
+  font-weight: normal
+  ul.pagination-control
+    margin: 0
+
+    li
+      display: table-cell
+      padding: 5px 2px
+
+      button
+        padding: 4px 8px
+        background-color: var(--primary-background-color)
+        border-color: var(--ui-gray)
+        color: var(--ui-gray-darkest)
+        color: white
+        text-decoration: none
+
+        &:hover:enabled
+          color: var(--active-color)
+
+      .active
         button
-          padding: 4px 8px
-          background-color: var(--primary-background-color)
-          border-color: var(--ui-gray)
-          color: var(--ui-gray-darkest)
+          background-color: var(--ui-gray)
+          border-color: #ddd
           color: white
-          text-decoration: none
-
-          &:hover:enabled
-            color: var(--active-color)
-
-        .active
-          button
-            background-color: var(--ui-gray)
-            border-color: #ddd
-            color: white

platform/ui/src/components/studyList/StudyList.js

@@ -1,428 +1,397 @@
 import './StudyList.styl';
 
-import React, { Component } from 'react';
-
-import CustomDateRangePicker from './CustomDateRangePicker.js';
-import { Icon } from './../../elements/Icon';
-import { PaginationArea } from './PaginationArea.js';
+import React from 'react';
+import classNames from 'classnames';
+import TableSearchFilter from './TableSearchFilter.js';
+import useMedia from '../../hooks/useMedia.js';
 import PropTypes from 'prop-types';
+import ColorHash from './internal/color-hash.js';
 import { StudyListLoadingText } from './StudyListLoadingText.js';
-import { StudylistToolbar } from './StudyListToolbar.js';
-import { isInclusivelyBeforeDay } from 'react-dates';
-import moment from 'moment';
-import debounce from 'lodash.debounce';
 import { withTranslation } from '../../utils/LanguageProvider';
 
-const today = moment();
-const lastWeek = moment().subtract(7, 'day');
-const lastMonth = moment().subtract(1, 'month');
+const colorHash = new ColorHash();
 
-class StudyList extends Component {
-  static propTypes = {
-    studies: PropTypes.array.isRequired,
-    onSelectItem: PropTypes.func.isRequired,
-    onSearch: PropTypes.func.isRequired,
-    currentPage: PropTypes.number,
-    rowsPerPage: PropTypes.number,
-    studyListDateFilterNumDays: PropTypes.number,
-    studyListFunctionsEnabled: PropTypes.bool,
-    defaultSort: PropTypes.shape({
-      field: PropTypes.string.isRequired,
-      order: PropTypes.oneOf(['desc', 'asc']).isRequired,
-    }),
-    onImport: PropTypes.func,
-    pageOptions: PropTypes.array,
-  };
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+function StudyList(props) {
+  const {
+    isLoading,
+    hasError,
+    studies,
+    sort,
+    onSort: handleSort,
+    filterValues,
+    onFilterChange: handleFilterChange,
+    onSelectItem: handleSelectItem,
+    t,
+    //
+    studyListDateFilterNumDays,
+  } = props;
 
-  static defaultProps = {
-    currentPage: 0,
-    rowsPerPage: 25,
-    studyListDateFilterNumDays: 7,
-  };
-
-  static studyDatePresets = [
+  const largeTableMeta = [
     {
-      text: 'Today',
-      start: today,
-      end: today,
+      displayText: t('PatientName'),
+      fieldName: 'patientName',
+      inputType: 'text',
+      size: 330,
     },
     {
-      text: 'Last 7 days',
-      start: lastWeek,
-      end: today,
+      displayText: t('MRN'),
+      fieldName: 'patientId',
+      inputType: 'text',
+      size: 378,
     },
     {
-      text: 'Last 30 days',
-      start: lastMonth,
-      end: today,
+      displayText: t('AccessionNumber'),
+      fieldName: 'accessionNumber',
+      inputType: 'text',
+      size: 180,
+    },
+    {
+      displayText: t('StudyDate'),
+      fieldName: 'studyDate',
+      inputType: 'date-range',
+      size: 300,
+    },
+    {
+      displayText: t('Modality'),
+      fieldName: 'modalities',
+      inputType: 'text',
+      size: 114,
+    },
+    {
+      displayText: t('StudyDescription'),
+      fieldName: 'studyDescription',
+      inputType: 'text',
+      size: 335,
     },
   ];
 
-  constructor(props) {
-    super(props);
+  const mediumTableMeta = [
+    {
+      displayText: 'Patient / MRN',
+      fieldName: 'patientNameOrId',
+      inputType: 'text',
+      size: 250,
+    },
+    {
+      displayText: 'Description',
+      fieldName: 'accessionOrModalityOrDescription',
+      inputType: 'text',
+      size: 350,
+    },
+    {
+      displayText: t('StudyDate'),
+      fieldName: 'studyDate',
+      inputType: 'date-range',
+      size: 300,
+    },
+  ];
 
-    const sortData = {
-      field: undefined,
-      order: undefined,
-    };
+  const smallTableMeta = [
+    {
+      displayText: 'Search',
+      fieldName: 'allFields',
+      inputType: 'text',
+      size: 100,
+    },
+  ];
 
-    // init from props
-    if (props.defaultSort) {
-      sortData.field = props.defaultSort.field;
-      // todo: -1, 0, 1?
-      sortData.order = props.defaultSort.order; // asc, desc
-    }
+  const tableMeta = useMedia(
+    ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
+    [largeTableMeta, mediumTableMeta, smallTableMeta],
+    smallTableMeta
+  );
 
-    this.defaultStartDate = moment().subtract(
-      this.props.studyListDateFilterNumDays,
-      'days'
-    );
-    this.defaultEndDate = moment();
+  const totalSize = tableMeta
+    .map(field => field.size)
+    .reduce((prev, next) => prev + next);
 
-    this.state = {
-      loading: false,
-      error: false,
-      searchData: {
-        sortData,
-        currentPage: this.props.currentPage,
-        rowsPerPage: this.props.rowsPerPage,
-        studyDateFrom: this.defaultStartDate,
-        studyDateTo: this.defaultEndDate,
-      },
-      highlightedItem: '',
-    };
+  return (
+    <table className="table table--striped table--hoverable">
+      <colgroup>
+        {tableMeta.map((field, i) => {
+          const size = field.size;
+          const percentWidth = (size / totalSize) * 100.0;
 
-    this.getChangeHandler = this.getChangeHandler.bind(this);
-    this.getBlurHandler = this.getBlurHandler.bind(this);
-    this.onInputKeydown = this.onInputKeydown.bind(this);
-    this.nextPage = this.nextPage.bind(this);
-    this.prevPage = this.prevPage.bind(this);
-    this.onRowsPerPageChange = this.onRowsPerPageChange.bind(this);
-    this.delayedSearch = debounce(this.search, 250);
-  }
-
-  getChangeHandler(key) {
-    return event => {
-      this.delayedSearch.cancel();
-      this.setSearchData(key, event.target.value, this.delayedSearch);
-    };
-  }
-
-  getBlurHandler(key) {
-    return event => {
-      this.delayedSearch.cancel();
-      this.setSearchData(key, event.target.value, this.search);
-    };
-  }
-
-  setSearchData(key, value, callback) {
-    const searchData = this.state.searchData;
-    searchData[key] = value;
-    this.setState({ searchData }, callback);
-  }
-
-  setSearchDataBatch(keyValues, callback) {
-    const searchData = this.state.searchData;
-
-    Object.keys(keyValues).forEach(key => {
-      searchData[key] = keyValues[key];
-    });
-
-    this.setState({ searchData }, callback);
-  }
-
-  async onInputKeydown(event) {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      event.stopPropagation();
-
-      this.delayedSearch.cancel();
-      // reset the page because user is doing a new search
-      this.setSearchData('currentPage', 0, this.search);
-    }
-  }
-
-  async search() {
-    try {
-      this.setState({ loading: true, error: false });
-      await this.props.onSearch(this.state.searchData);
-    } catch (error) {
-      this.setState({ error: true });
-      throw new Error(error);
-    } finally {
-      this.setState({ loading: false });
-    }
-  }
-
-  renderNoMachingResults() {
-    if (!this.props.studies.length && !this.state.error) {
-      return <div className="notFound">No matching results</div>;
-    }
-  }
-
-  renderHasError() {
-    if (this.state.error) {
-      return (
-        <div className="notFound">There was an error fetching studies</div>
-      );
-    }
-  }
-
-  renderIsLoading() {
-    if (this.state.loading) {
-      return (
-        <div className="loading">
-          <StudyListLoadingText />
-        </div>
-      );
-    }
-  }
-
-  nextPage(currentPage) {
-    currentPage = currentPage + 1;
-    this.delayedSearch.cancel();
-    this.setSearchData('currentPage', currentPage, this.search);
-  }
-
-  prevPage(currentPage) {
-    currentPage = currentPage - 1;
-    this.delayedSearch.cancel();
-    this.setSearchData('currentPage', currentPage, this.search);
-  }
-
-  onRowsPerPageChange(rowsPerPage) {
-    this.delayedSearch.cancel();
-    this.setSearchDataBatch({ rowsPerPage, currentPage: 0 }, this.search);
-  }
-
-  onSortClick(field) {
-    return () => {
-      let order;
-      const sort = this.state.searchData.sortData;
-      const isSortedField = sort.field === field;
-
-      if (isSortedField) {
-        if (sort.order === 'asc') {
-          order = 'desc';
-        } else {
-          order = undefined;
-          field = undefined;
-        }
-      } else {
-        order = 'asc';
-      }
-
-      this.delayedSearch.cancel();
-      this.setSearchData('sortData', { field, order }, this.search);
-    };
-  }
-
-  onHighlightItem(studyItemUid) {
-    this.setState({ highlightedItem: studyItemUid });
-  }
-
-  renderTableRow(study) {
-    return (
-      <tr
-        key={study.studyInstanceUid}
-        className={
-          this.state.highlightedItem === study.studyInstanceUid
-            ? 'studylistStudy noselect active'
-            : 'studylistStudy noselect'
-        }
-        onMouseDown={event => {
-          // middle/wheel click
-          if (event.button === 1) {
-            this.props.onSelectItem(study.studyInstanceUid);
-          }
-        }}
-        onClick={() => {
-          this.onHighlightItem(study.studyInstanceUid);
-          this.props.onSelectItem(study.studyInstanceUid);
-        }}
-      >
-        <td className={study.patientName ? 'patientName' : 'emptyCell'}>
-          {study.patientName || `(${this.props.t('Empty')})`}
-        </td>
-
-        <td className="patientId">{study.patientId}</td>
-        <td className="accessionNumber">{study.accessionNumber}</td>
-        <td className="studyDate">{study.studyDate}</td>
-        <td className="modalities">{study.modalities}</td>
-        <td className="studyDescription">{study.studyDescription}</td>
-      </tr>
-    );
-  }
-
-  render() {
-    const tableMeta = {
-      patientName: {
-        displayText: this.props.t('PatientName'),
-        sort: 0,
-      },
-      patientId: {
-        displayText: this.props.t('MRN'),
-        sort: 0,
-      },
-      accessionNumber: {
-        displayText: this.props.t('AccessionNumber'),
-        sort: 0,
-      },
-      studyDate: {
-        displayText: this.props.t('StudyDate'),
-        inputType: 'date-range',
-        sort: 0,
-      },
-      modalities: {
-        displayText: this.props.t('Modality'),
-        sort: 0,
-      },
-      studyDescription: {
-        displayText: this.props.t('StudyDescription'),
-        sort: 0,
-      },
-    };
-
-    // Apply sort
-    const sortedFieldName = this.state.searchData.sortData.field;
-    const sortedField = tableMeta[sortedFieldName];
-
-    if (sortedField) {
-      const sortOrder = this.state.searchData.sortData.order;
-      sortedField.sort = sortOrder === 'asc' ? 1 : 2;
-    }
-
-    // Sort Icons
-    const sortIcons = ['sort', 'sort-up', 'sort-down'];
-
-    return (
-      <div className="StudyList">
-        <div className="studyListToolbar clearfix">
-          <div className="header pull-left">{this.props.t('StudyList')}</div>
-          <div className="studyCount pull-right">
-            {this.props.studies.length}
-          </div>
-          <div className="pull-right">
-            {this.props.studyListFunctionsEnabled ? (
-              <StudylistToolbar onImport={this.props.onImport} />
-            ) : null}
-          </div>
-          {this.props.children}
-        </div>
-        <div className="theadBackground" />
-        <div id="studyListContainer">
-          <table id="tblStudyList" className="studylistResult table noselect">
-            <thead>
-              <tr>
-                {Object.keys(tableMeta).map((fieldName, i) => {
-                  const field = tableMeta[fieldName];
-
-                  return (
-                    <React.Fragment key={i}>
-                      <th className={fieldName}>
-                        <div
-                          id={`_${fieldName}`}
-                          className="display-text"
-                          onClick={this.onSortClick(fieldName)}
-                        >
-                          <span>{field.displayText}</span>
-                          <Icon
-                            name={sortIcons[field.sort]}
-                            style={{ fontSize: '12px' }}
-                          />
-                        </div>
-                        {!field.inputType && (
-                          <input
-                            type="text"
-                            className="form-control studylist-search"
-                            id={fieldName}
-                            value={this.state[fieldName]}
-                            onKeyDown={this.onInputKeydown}
-                            onChange={this.getChangeHandler(fieldName)}
-                            onBlur={this.getBlurHandler(fieldName)}
-                          />
-                        )}
-                        {field.inputType === 'date-range' && (
-                          <div style={{ display: 'block' }}>
-                            <CustomDateRangePicker
-                              presets={StudyList.studyDatePresets}
-                              showClearDates={true}
-                              startDateId="studyListStartDate"
-                              endDateId="studyListEndDate"
-                              startDate={this.defaultStartDate}
-                              endDate={this.defaultEndDate}
-                              hideKeyboardShortcutsPanel={true}
-                              anchorDirection="left"
-                              isOutsideRange={day =>
-                                !isInclusivelyBeforeDay(day, moment())
-                              }
-                              onDatesChange={({
-                                startDate,
-                                endDate,
-                                preset = false,
-                              }) => {
-                                if (
-                                  startDate &&
-                                  endDate &&
-                                  (this.state.focusedInput === 'endDate' ||
-                                    preset)
-                                ) {
-                                  this.setSearchDataBatch(
-                                    {
-                                      studyDateFrom: startDate.toDate(),
-                                      studyDateTo: endDate.toDate(),
-                                    },
-                                    this.search
-                                  );
-                                  this.setState({ focusedInput: false });
-                                } else if (!startDate && !endDate) {
-                                  this.setSearchDataBatch(
-                                    {
-                                      studyDateFrom: null,
-                                      studyDateTo: null,
-                                    },
-                                    this.search
-                                  );
-                                }
-                              }}
-                              focusedInput={this.state.focusedInput}
-                              onFocusChange={focusedInput => {
-                                this.setState({ focusedInput });
-                              }}
-                            />
-                          </div>
-                        )}
-                      </th>
-                    </React.Fragment>
-                  );
-                })}
-              </tr>
-            </thead>
-            <tbody id="studyListData">
-              {this.props.studies.map(study => {
-                return this.renderTableRow(study);
-              })}
-            </tbody>
-          </table>
-
-          {this.renderIsLoading()}
-          {this.renderHasError()}
-          {this.renderNoMachingResults()}
-
-          <PaginationArea
-            pageOptions={this.props.pageOptions}
-            currentPage={this.state.searchData.currentPage}
-            nextPageFunc={this.nextPage}
-            prevPageFunc={this.prevPage}
-            onRowsPerPageChange={this.onRowsPerPageChange}
-            rowsPerPage={this.state.searchData.rowsPerPage}
-            recordCount={this.props.studies.length}
+          return <col key={i} style={{ width: `${percentWidth}%` }} />;
+        })}
+      </colgroup>
+      <thead className="table-head">
+        <tr className="filters">
+          <TableSearchFilter
+            meta={tableMeta}
+            values={filterValues}
+            onSort={handleSort}
+            onValueChange={handleFilterChange}
+            sortFieldName={sort.fieldName}
+            sortDirection={sort.direction}
+            studyListDateFilterNumDays={studyListDateFilterNumDays}
           />
-        </div>
-      </div>
-    );
-  }
+        </tr>
+      </thead>
+      <tbody className="table-body" data-cy="study-list-results">
+        {/* I'm not in love with this approach, but it's the quickest way for now
+         *
+         * - Display different content based on loading, empty, results state
+         *
+         * This is not ideal because it create a jump in focus. For loading especially,
+         * We should keep our current results visible while we load the new ones.
+         */}
+        {/* LOADING */}
+        {isLoading && (
+          <tr className="no-hover">
+            <td colSpan={tableMeta.length}>
+              <StudyListLoadingText />
+            </td>
+          </tr>
+        )}
+        {!isLoading && hasError && (
+          <tr className="no-hover">
+            <td colSpan={tableMeta.length}>
+              <div className="notFound">
+                {t('There was an error fetching studies')}
+              </div>
+            </td>
+          </tr>
+        )}
+        {/* EMPTY */}
+        {!isLoading && !studies.length && (
+          <tr className="no-hover">
+            <td colSpan={tableMeta.length}>
+              <div className="notFound">{t('No matching results')}</div>
+            </td>
+          </tr>
+        )}
+        {!isLoading &&
+          studies.map((study, index) => (
+            <TableRow
+              key={`${study.studyInstanceUid}-${index}`}
+              onClick={studyInstanceUid => handleSelectItem(studyInstanceUid)}
+              accessionNumber={study.accessionNumber || ''}
+              modalities={study.modalities}
+              patientId={study.patientId || ''}
+              patientName={study.patientName || ''}
+              studyDate={study.studyDate}
+              studyDescription={study.studyDescription || ''}
+              studyInstanceUid={study.studyInstanceUid}
+              t={t}
+            />
+          ))}
+      </tbody>
+    </table>
+  );
 }
 
+StudyList.propTypes = {
+  isLoading: PropTypes.bool.isRequired,
+  hasError: PropTypes.bool.isRequired,
+  studies: PropTypes.array.isRequired,
+  onSelectItem: PropTypes.func.isRequired,
+  // ~~ SORT
+  sort: PropTypes.shape({
+    fieldName: PropTypes.string,
+    direction: PropTypes.oneOf(['desc', 'asc', null]),
+  }).isRequired,
+  onSort: PropTypes.func.isRequired,
+  // ~~ FILTERS
+  filterValues: PropTypes.shape({
+    patientName: PropTypes.string.isRequired,
+    patientId: PropTypes.string.isRequired,
+    accessionNumber: PropTypes.string.isRequired,
+    studyDate: PropTypes.string.isRequired,
+    modalities: PropTypes.string.isRequired,
+    studyDescription: PropTypes.string.isRequired,
+    patientNameOrId: PropTypes.string.isRequired,
+    accessionOrModalityOrDescription: PropTypes.string.isRequired,
+    allFields: PropTypes.string.isRequired,
+  }).isRequired,
+  onFilterChange: PropTypes.func.isRequired,
+  //
+  studyListDateFilterNumDays: PropTypes.number,
+};
+
+StudyList.defaultProps = {};
+
+function TableRow(props) {
+  const {
+    accessionNumber,
+    isHighlighted,
+    modalities,
+    patientId,
+    patientName,
+    studyDate,
+    studyDescription,
+    studyInstanceUid,
+    onClick: handleClick,
+    t,
+  } = props;
+
+  const largeRowTemplate = (
+    <tr
+      onClick={() => handleClick(studyInstanceUid)}
+      className={classNames({ active: isHighlighted })}
+    >
+      <td className={classNames({ emptyCell: !patientName })}>
+        {patientName || `(${t('Empty')})`}
+      </td>
+      <td>{patientId}</td>
+      <td>{accessionNumber}</td>
+      <td>{studyDate}</td>
+      <td>{modalities}</td>
+      <td>{studyDescription}</td>
+    </tr>
+  );
+
+  const mediumRowTemplate = (
+    <tr
+      onClick={() => handleClick(studyInstanceUid)}
+      className={classNames({ active: isHighlighted })}
+    >
+      <td className={classNames({ emptyCell: !patientName })}>
+        {patientName || `(${t('Empty')})`}
+        <div style={{ color: '#60656f' }}>{patientId}</div>
+      </td>
+      <td>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          {/* DESCRIPTION */}
+          <div
+            className="hide-xs"
+            style={{
+              whiteSpace: 'pre-wrap',
+              flexGrow: 1,
+            }}
+          >
+            {studyDescription}
+          </div>
+
+          {/* MODALITY & ACCESSION */}
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              minWidth: '80px',
+              maxWidth: '100px',
+            }}
+          >
+            <div
+              style={{
+                backgroundColor: colorHash.hex(modalities),
+                borderRadius: '16px',
+                padding: '2px 8px 0px 8px',
+                fontWeight: 500,
+                marginBottom: '4px',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+              }}
+              aria-label={modalities}
+              title={modalities}
+            >
+              {modalities}
+            </div>
+            <div
+              style={{
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+              }}
+              aria-label={accessionNumber}
+              title={accessionNumber}
+            >
+              {accessionNumber}
+            </div>
+          </div>
+        </div>
+      </td>
+      {/* DATE */}
+      <td style={{ textAlign: 'center' }}>{studyDate}</td>
+    </tr>
+  );
+
+  const smallRowTemplate = (
+    <tr
+      onClick={() => handleClick(studyInstanceUid)}
+      className={classNames({ active: isHighlighted })}
+    >
+      <td style={{ position: 'relative', overflow: 'hidden' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          {/* NAME AND ID */}
+          <div
+            className={classNames({ emptyCell: !patientName })}
+            style={{ width: '150px', minWidth: '150px' }}
+          >
+            <div style={{ fontWeight: 500, paddingTop: '3px' }}>
+              {patientName || `(${t('Empty')})`}
+            </div>
+            <div style={{ color: '#60656f' }}>{patientId}</div>
+          </div>
+
+          {/* DESCRIPTION */}
+          <div
+            className="hide-xs"
+            style={{
+              whiteSpace: 'pre-wrap',
+              flexGrow: 1,
+              paddingLeft: '35px',
+            }}
+          >
+            {studyDescription}
+          </div>
+
+          {/* MODALITY & DATE */}
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              minWidth: '80px',
+            }}
+          >
+            <div
+              style={{
+                backgroundColor: colorHash.hex(modalities),
+                borderRadius: '16px',
+                padding: '2px 8px 0px 8px',
+                fontWeight: 500,
+                marginBottom: '4px',
+              }}
+            >
+              {modalities}
+            </div>
+            <div>{studyDate}</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  );
+
+  const rowTemplate = useMedia(
+    ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
+    [largeRowTemplate, mediumRowTemplate, smallRowTemplate],
+    smallRowTemplate
+  );
+
+  return rowTemplate;
+}
+
+TableRow.propTypes = {
+  accessionNumber: PropTypes.string.isRequired,
+  isHighlighted: PropTypes.bool,
+  modalities: PropTypes.string.isRequired,
+  patientId: PropTypes.string.isRequired,
+  patientName: PropTypes.string.isRequired,
+  studyDate: PropTypes.string.isRequired,
+  studyDescription: PropTypes.string.isRequired,
+  studyInstanceUid: PropTypes.string.isRequired,
+};
+
+TableRow.defaultProps = {
+  isHighlighted: false,
+};
+
 const connectedComponent = withTranslation('StudyList')(StudyList);
 export { connectedComponent as StudyList };

platform/ui/src/components/studyList/StudyList.styl

@@ -4,6 +4,7 @@
 $study-list-padding = 8%;
 $study-list-toolbar-height = 75px;
 $body-cell-height = 40px;
+$body-cell-top-bottom-padding = 16px;
 
 $tablePaddingMediumScreen = 5px
 $tablePaddingBigScreen = 3%
@@ -20,21 +21,41 @@ placeholder-color(c)
   &:-ms-input-placeholder
     color: c
 
-.DateRangePicker
-  height: 40px
-  margin: 0 5px 20px 5px
-  cursor: pointer
-  border: none
-  position: block
+.study-list-header
+  .addNewStudy
+    margin: 0 10px
 
-.studyListToolbar
+    label
+      font-weight: 400
+      cursor: pointer
+      display: inline-block;
+      max-width: 100%;
+      margin-bottom: 5px;
+
+    input
+      width: 0.1px;
+      height: 0.1px
+      opacity: 0
+      overflow: hidden
+      position: absolute
+      z-index: -1
+
+    color: var(--text-secondary-color)
+
+    &:hover
+      color: var(--hover-color)
+
+    &:active
+      color: var(--active-color)
+
+.study-list-header
+  display: flex;
+  justify-content: space-between;
   background-color: var(--ui-gray-darker)
   height: $study-list-toolbar-height
   margin-bottom: 2px
   padding: 0 $study-list-padding
-
-  &>div
-    display: inline-block
+  line-height: $study-list-toolbar-height
 
   .header
     font-size: 22px
@@ -42,17 +63,20 @@ placeholder-color(c)
     color: var(--table-text-secondary-color)
     line-height: $study-list-toolbar-height
 
-  .studylistToolbar
-    height: $study-list-toolbar-height
-    line-height: $study-list-toolbar-height
+  .actions
+    display: flex;
 
-  .studyCount
+  .study-count
     color: var(--large-numbers-color)
     font-size: 40px
     font-weight: 100
     line-height: $study-list-toolbar-height
 
-.theadBackground
+/*
+ * Dark gray background with blue border
+ * Spans width of page to create a distinct area for table filters
+ */
+.table-head-background
   height: 121px
   position: absolute
   width: 100%
@@ -76,14 +100,109 @@ placeholder-color(c)
     height: 1px
     z-index: 2
 
-#studyListContainer
+
+.study-list-container
   width: 100%
   padding: 0 $study-list-padding
   position: absolute
   z-index: 2
 
+table.table
+  width: 100%;
+  margin-bottom: 20px;
+  border-spacing: 0;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  > tbody tr
+    padding: 5px
+    background-color: black
+
+  /* Striped Variant */
+  &.table--striped > tbody tr:nth-child(even)
+    background-color: var(--ui-gray-darker)
+
+  /* Hover Variant */
+  &.table--hoverable > tbody tr
+    &:hover, &:active, &.active
+      background-color: var(--table-hover-color)
+    &.no-hover
+      &:hover, &:active, &.active
+        background-color: var(--ui-gray-darker)
+
+.study-list-container > table.table > tr
+  height: 20px
+
+.study-list-container > table.table > thead
+  ::-webkit-datetime-edit-year-field:not([aria-valuenow]),
+  ::-webkit-datetime-edit-month-field:not([aria-valuenow]),
+  ::-webkit-datetime-edit-day-field:not([aria-valuenow])
+    color: transparent
+
+.study-list-container > table.table > thead > tr > th
+  padding: 0;
+  border-bottom: 1px solid var(--ui-border-color-active);
+  width: 100%;
+  text-align: left;
+  border-top: 0;
+
+.study-list-container > table.table > tbody > tr > td
+  padding: $body-cell-top-bottom-padding 8px;
+  height: $body-cell-height
+  color: var(--table-text-primary-color)
+  font-weight: 300
+  word-wrap: break-word;
+
+  &.emptyCell
+    color: var(--ui-gray-light)
+
+.study-list-container > table.table > thead > tr > th.studyDate
+  min-width: 230px
+
+.study-list-container
+  .filters
+    label
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      width: 100%;
+      min-width: 95px;
+      margin: 0 auto;
+      color: var(--table-text-primary-color);
+      font-weight: 400;
+      padding: 20px;
+      user-select: none;
+      font-size: 15px;
+
+      &:hover
+        color: var(--active-color);
+
+      &.active, &:active
+        color: var(--active-color);
+    i
+      margin: 0 5px;
+
+  input
+    height: 40px
+    margin: 0 5px 20px 5px
+    padding: 0 20px
+    cursor: pointer
+    border: none
+    background-color: var(--input-background-color)
+    color: var(--input-placeholder-color)
+    font-size: 10pt
+    font-weight: normal
+    border-radius: 4px
+    width: calc(100% - 10px); /* Just use padding? */
+    transition(all 0.15s ease)
+    placeholder-color(var(--input-placeholder-color))
+
+    &:active, &:hover
+      background-color: var(--input-background-color)
+
   .loading-text
     color: var(--table-text-secondary-color)
+    text-align: center;
     font-size: 30px
 
   .notFound
@@ -92,191 +211,22 @@ placeholder-color(c)
     font-weight: 200
     text-align: center
 
-  table#tblStudyList
-    width: 100%;
-    max-width: 100%;
-    margin-bottom: 20px;
-    border-spacing: 0;
-    border-collapse: collapse;
+@media only screen and (max-width: 768px)
+  .study-list-header
+    padding: 0 16px;
 
-    > tr
-      height: 20px
+  .study-list-container
+    padding: 0;
 
-    > thead
-      white-space: nowrap
+  .study-list-container > table.table > thead > tr > th
+    padding: 0 13px;
 
-      tr
-        th
-          padding: 0
-          border-bottom: 1px solid var(--ui-border-color-active);
-          width: 100%;
-          text-align: left;
-          border-top: 0;
+  .study-list-container > table.table > tbody > tr > td
+    padding: 8px;
 
-          &.studyDate
-            min-width: 230px
+  .study-list-container .filters label
+    padding: 8px;
 
-          .display-text
-            display: inline-block
-            cursor: pointer
-            width: 100%
-            min-width: 95px
-            margin: 0 auto
-            color: var(--table-text-primary-color)
-            font-weight: 400
-            padding: 20px
-            -webkit-user-select: none
-            -moz-user-select: none
-            -ms-user-select: none
-            user-select: none
-
-            span
-              font-size: 15px
-              float: left
-
-            i
-              margin: 0 5px
-
-            &:hover
-              color: var(--active-color)
-
-            &.active, &:active
-              color: var(--active-color)
-
-          input.studylist-search
-            height: 40px
-            margin: 0 5px 20px 5px
-            padding: 0 20px
-            cursor: pointer
-            border: none
-            background-color: var(--input-background-color)
-            color: var(--input-placeholder-color)
-            font-size: 10pt
-            font-weight: normal
-            width: calc(100% - 10px)
-            border-radius: 4px
-
-            transition(all 0.15s ease)
-            placeholder-color(var(--input-placeholder-color))
-
-            &.invisible
-              visibility: hidden
-
-            &:active, &:hover
-              background-color: var(--input-background-color)
-
-      ::-webkit-datetime-edit-year-field:not([aria-valuenow]),
-      ::-webkit-datetime-edit-month-field:not([aria-valuenow]),
-      ::-webkit-datetime-edit-day-field:not([aria-valuenow])
-        color: transparent
-
-    > tbody
-      tr
-        padding: 5px
-        background-color: black
-
-        &:nth-child(even)
-          background-color: var(--ui-gray-darker)
-
-        td
-          padding: 8px;
-          height: $body-cell-height
-          line-height: $body-cell-height
-          color: var(--table-text-primary-color)
-          font-weight: 300
-          border-top: 1px solid var(--ui-gray-lighter)
-          border-bottom: 1px solid var(--ui-gray-lighter)
-          white-space: nowrap
-          transition(all 0.1s ease)
-
-          &.emptyCell
-            color: #516873
-
-          &.emptyValue
-            color: var(--ui-gray-light)
-
-        &:hover, &:active, &.active
-          background-color: var(--table-hover-color)
-          color: var(--text-primary-color)
-
-          td
-            // This selector is necessary to override bootstrap's 'table' class
-            border-top: 1px solid var(--ui-gray-lighter)
-            border-bottom: 1px solid var(--ui-gray-lighter)
-            background-color: var(--table-hover-color)
-
-@media only screen and (max-width: 1362px)
-  #studyListContainer
-    padding: 0 $tablePaddingLargeScreen
-
-    table#tblStudyList
-      thead,
-      tbody
-        tr
-          th,
-          td
-            &:first-child
-              padding-left: $tablePaddingLargeScreen
-
-            &:last-child
-              padding-right: $tablePaddingLargeScreen
-
-@media only screen and (max-width: 1161px)
-  #studyListContainer
-    padding: 0 $tablePaddingBigWidth
-
-    table#tblStudyList
-      thead,
-      tbody
-        tr
-          th,
-          td
-            &:first-child
-              padding-left: $tablePaddingBigScreen
-
-            &:last-child
-              padding-right: $tablePaddingBigScreen
-
-@media only screen and (max-width: 1069px)
-  .theadBackground
-    height: 101px
-
-  .studylist-pagination > .row
-    margin-right: 0;
-
-  .studyListToolbar
-    padding: 0 $tablePaddingMediumScreen
-
-  #studyListContainer
-    padding: 0
-
-    table#tblStudyList
-      thead > tr > th
-
-        &:first-child
-          padding-left: $tablePaddingMediumScreen
-
-        &:last-child
-          padding-right: $tablePaddingMediumScreen
-
-        input.worklist-search
-          padding: 10px
-
-        .display-text
-          padding: 10px 5px
-
-          i
-            width: auto
-
-      tbody > tr > td
-
-        &:first-child
-          padding-left: $tablePaddingMediumScreen
-
-        &:last-child
-          padding-right: $tablePaddingMediumScreen
-
-    .worklistPagination
-      .row
-        margin-left: 0
-        margin-right: 0
+@media only screen and (max-width: 500px)
+  .hide-xs
+    display: none;

platform/ui/src/components/studyList/StudyListLoadingText.js

@@ -1,12 +1,18 @@
-import { Icon } from './../../elements/Icon';
 import React from 'react';
+import { Icon } from './../../elements/Icon';
+// TODO: useTranslation
+import { withTranslation } from '../../utils/LanguageProvider';
 
-function StudyListLoadingText() {
+function StudyListLoadingText({ t: translate }) {
   return (
     <div className="loading-text">
-      Loading... <Icon name="circle-notch" animation="pulse" />
+      {translate('Loading')}... <Icon name="circle-notch" animation="pulse" />
     </div>
   );
 }
 
-export { StudyListLoadingText };
+const connectedComponent = withTranslation('StudyListLoadingText')(
+  StudyListLoadingText
+);
+
+export { connectedComponent as StudyListLoadingText };

platform/ui/src/components/studyList/StudyListToolbar.styl

@@ -1,26 +0,0 @@
-.studyListToolbar
-  .addNewStudy
-    margin: 0 10px
-
-    label
-      font-weight: 400
-      cursor: pointer
-      display: inline-block;
-      max-width: 100%;
-      margin-bottom: 5px;
-
-    input
-      width: 0.1px;
-      height: 0.1px
-      opacity: 0
-      overflow: hidden
-      position: absolute
-      z-index: -1
-
-    color: var(--text-secondary-color)
-
-    &:hover
-      color: var(--hover-color)
-
-    &:active
-      color: var(--active-color)

platform/ui/src/components/studyList/TablePagination.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import './PaginationArea.styl';
 import { withTranslation } from '../../utils/LanguageProvider';
 
-class PaginationArea extends PureComponent {
+class TablePagination extends PureComponent {
   static defaultProps = {
     pageOptions: [5, 10, 25, 50, 100],
     rowsPerPage: 25,
@@ -11,7 +11,8 @@ class PaginationArea extends PureComponent {
   };
 
   static propTypes = {
-    pageOptions: PropTypes.array.isRequired,
+    /* Values to show in "rows per page" select dropdown */
+    pageOptions: PropTypes.array,
     rowsPerPage: PropTypes.number.isRequired,
     currentPage: PropTypes.number.isRequired,
     nextPageFunc: PropTypes.func,
@@ -89,17 +90,11 @@ class PaginationArea extends PureComponent {
 
   render() {
     return (
-      <div name="paginationArea">
-        <div className="pagination-area">
-          <div className="row">
-            <div className="rows-dropdown">
-              {this.renderRowsPerPageDropdown()}
-            </div>
-            <div className="pagination-buttons">
-              <div className="form-inline form-group page-number pull-right">
-                {this.renderPaginationButtons()}
-              </div>
-            </div>
+      <div className="pagination-area">
+        <div className="rows-dropdown">{this.renderRowsPerPageDropdown()}</div>
+        <div className="pagination-buttons">
+          <div className="form-inline form-group page-number pull-right">
+            {this.renderPaginationButtons()}
           </div>
         </div>
       </div>
@@ -107,5 +102,5 @@ class PaginationArea extends PureComponent {
   }
 }
 
-const connectedComponent = withTranslation('Common')(PaginationArea);
-export { connectedComponent as PaginationArea };
+const connectedComponent = withTranslation('Common')(TablePagination);
+export { connectedComponent as TablePagination };

platform/ui/src/components/studyList/TableSearchFilter.js

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { isInclusivelyBeforeDay } from 'react-dates';
+import CustomDateRangePicker from './CustomDateRangePicker.js';
+import { Icon } from './../../elements/Icon';
+import { useTranslation } from 'react-i18next';
+
+
+
+function TableSearchFilter(props) {
+  const {
+    meta,
+    values,
+    onSort,
+    onValueChange,
+    sortFieldName,
+    sortDirection,
+    // TODO: Rename
+    studyListDateFilterNumDays
+  } = props;
+  const [focusedInput, setFocusedInput] = useState(null);
+  const [t] = useTranslation(); // 'Common'?
+
+  const sortIcons = ['sort', 'sort-up', 'sort-down'];
+  const sortIconForSortField =
+    sortDirection === 'asc' ? sortIcons[1] : sortIcons[2];
+  //
+  const today = moment();
+  const lastWeek = moment().subtract(7, 'day');
+  const lastMonth = moment().subtract(1, 'month');
+  const defaultStartDate = moment().subtract(studyListDateFilterNumDays, 'days');
+  const defaultEndDate = today;
+  const studyDatePresets = [
+    {
+      text: t('Today'),
+      start: today,
+      end: today,
+    },
+    {
+      text: t('Last 7 days'),
+      start: lastWeek,
+      end: today,
+    },
+    {
+      text: t('Last 30 days'),
+      start: lastMonth,
+      end: today,
+    },
+  ];
+
+  return meta.map((field, i) => {
+    const { displayText, fieldName, inputType } = field;
+    const isSortField = sortFieldName === fieldName;
+    const sortIcon = isSortField ? sortIconForSortField : sortIcons[0];
+
+    return (
+      <th key={`${fieldName}-${i}`}>
+        <label
+          htmlFor={`filter-${fieldName}`}
+          onClick={() => onSort(fieldName)}
+        >
+          {`${displayText} `}
+          <Icon name={sortIcon} style={{ fontSize: '12px' }} />
+        </label>
+        {inputType === 'text' && (
+          <input
+            type="text"
+            id={`filter-${fieldName}`}
+            className="form-control studylist-search"
+            value={values[fieldName]}
+            onChange={e => onValueChange(fieldName, e.target.value)}
+          />
+        )}
+        {inputType === 'date-range' && (
+          // https://github.com/airbnb/react-dates
+          <CustomDateRangePicker
+            // Required
+            startDate={studyListDateFilterNumDays ? defaultStartDate : null}
+            startDateId="start-date"
+            endDate={studyListDateFilterNumDays ? defaultEndDate : null}
+            endDateId="end-date"
+            // TODO: We need a dynamic way to determine which fields values to update
+            onDatesChange={({ startDate, endDate, preset = false }) => {
+              onValueChange('studyDateTo', startDate);
+              onValueChange('studyDateFrom', endDate);
+            }}
+            focusedInput={focusedInput}
+            onFocusChange={updatedVal => setFocusedInput(updatedVal)}
+            // Optional
+            numberOfMonths={1} // For med and small screens? 2 for large?
+            showClearDates={true}
+            anchorDirection="left"
+            presets={studyDatePresets}
+            hideKeyboardShortcutsPanel={true}
+            isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
+          />
+        )}
+      </th>
+    );
+  });
+}
+
+TableSearchFilter.propTypes = {
+  meta: PropTypes.arrayOf(
+    PropTypes.shape({
+      displayText: PropTypes.string.isRequired,
+      fieldName: PropTypes.string.isRequired,
+      inputType: PropTypes.oneOf(['text', 'date-range']).isRequired,
+      size: PropTypes.number.isRequired,
+    })
+  ).isRequired,
+  values: PropTypes.object.isRequired,
+  onSort: PropTypes.func.isRequired,
+  sortFieldName: PropTypes.string,
+  sortDirection: PropTypes.oneOf([null, 'asc', 'desc']),
+};
+
+TableSearchFilter.defaultProps = {};
+
+export { TableSearchFilter };
+export default TableSearchFilter;

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

@@ -1 +1,4 @@
 export { StudyList } from './StudyList.js';
+export { TableSearchFilter } from './TableSearchFilter.js';
+export { TablePagination } from './TablePagination.js';
+export { PageToolbar } from './PageToolbar.js';

platform/ui/src/components/studyList/internal/bkdr-hash.js

@@ -0,0 +1,24 @@
+/**
+ * BKDR Hash (modified version)
+ *
+ * @param {String} str string to hash
+ * @returns {Number}
+ */
+function BKDRHash(str) {
+  const seed = 131;
+  const seed2 = 137;
+  let hash = 0;
+  // make hash more sensitive for short string like 'a', 'b', 'c'
+  str += 'x';
+  // Note: Number.MAX_SAFE_INTEGER equals 9007199254740991
+  var MAX_SAFE_INTEGER = parseInt(9007199254740991 / seed2);
+  for (var i = 0; i < str.length; i++) {
+    if (hash > MAX_SAFE_INTEGER) {
+      hash = parseInt(hash / seed2);
+    }
+    hash = hash * seed + str.charCodeAt(i);
+  }
+  return hash;
+}
+
+export default BKDRHash;

platform/ui/src/components/studyList/internal/color-hash.js

@@ -0,0 +1,145 @@
+import BKDRHash from './bkdr-hash';
+
+/**
+ * Convert RGB Array to HEX
+ *
+ * @param {Array} RGBArray - [R, G, B]
+ * @returns {String} 6 digits hex starting with #
+ */
+function RGB2HEX(RGBArray) {
+  let hex = '#';
+  RGBArray.forEach(function(value) {
+    if (value < 16) {
+      hex += 0;
+    }
+    hex += value.toString(16);
+  });
+  return hex;
+}
+
+/**
+ * Convert HSL to RGB
+ *
+ * @see {@link http://zh.wikipedia.org/wiki/HSL和HSV色彩空间} for further information.
+ * @param {Number} H Hue ∈ [0, 360)
+ * @param {Number} S Saturation ∈ [0, 1]
+ * @param {Number} L Lightness ∈ [0, 1]
+ * @returns {Array} R, G, B ∈ [0, 255]
+ */
+function HSL2RGB(H, S, L) {
+  H /= 360;
+
+  const q = L < 0.5 ? L * (1 + S) : L + S - L * S;
+  const p = 2 * L - q;
+
+  return [H + 1 / 3, H, H - 1 / 3].map(function(color) {
+    if (color < 0) {
+      color++;
+    }
+    if (color > 1) {
+      color--;
+    }
+    if (color < 1 / 6) {
+      color = p + (q - p) * 6 * color;
+    } else if (color < 0.5) {
+      color = q;
+    } else if (color < 2 / 3) {
+      color = p + (q - p) * 6 * (2 / 3 - color);
+    } else {
+      color = p;
+    }
+    return Math.round(color * 255);
+  });
+}
+
+function isArray(o) {
+  return Object.prototype.toString.call(o) === '[object Array]';
+}
+
+/**
+ * Color Hash Class
+ *
+ * @class
+ */
+const ColorHash = function(options = {}) {
+  const LS = [options.lightness, options.saturation].map(function(param) {
+    param = param || [0.35, 0.5, 0.65]; // note that 3 is a prime
+    return isArray(param) ? param.concat() : [param];
+  });
+
+  this.L = LS[0];
+  this.S = LS[1];
+
+  if (typeof options.hue === 'number') {
+    options.hue = { min: options.hue, max: options.hue };
+  }
+  if (typeof options.hue === 'object' && !isArray(options.hue)) {
+    options.hue = [options.hue];
+  }
+  if (typeof options.hue === 'undefined') {
+    options.hue = [];
+  }
+  this.hueRanges = options.hue.map(function(range) {
+    return {
+      min: typeof range.min === 'undefined' ? 0 : range.min,
+      max: typeof range.max === 'undefined' ? 360 : range.max,
+    };
+  });
+
+  this.hash = options.hash || BKDRHash;
+};
+
+/**
+ * Returns the hash in [h, s, l].
+ * Note that H ∈ [0, 360); S ∈ [0, 1]; L ∈ [0, 1];
+ *
+ * @param {String} str string to hash
+ * @returns {Array} [h, s, l]
+ */
+ColorHash.prototype.hsl = function(str) {
+  var H, S, L;
+  var hash = this.hash(str);
+
+  if (this.hueRanges.length) {
+    var range = this.hueRanges[hash % this.hueRanges.length];
+    var hueResolution = 727; // note that 727 is a prime
+    H =
+      (((hash / this.hueRanges.length) % hueResolution) *
+        (range.max - range.min)) /
+        hueResolution +
+      range.min;
+  } else {
+    H = hash % 359; // note that 359 is a prime
+  }
+  hash = parseInt(hash / 360);
+  S = this.S[hash % this.S.length];
+  hash = parseInt(hash / this.S.length);
+  L = this.L[hash % this.L.length];
+
+  return [H, S, L];
+};
+
+/**
+ * Returns the hash in [r, g, b].
+ * Note that R, G, B ∈ [0, 255]
+ *
+ * @param {String} str string to hash
+ * @returns {Array} [r, g, b]
+ */
+ColorHash.prototype.rgb = function(str) {
+  var hsl = this.hsl(str);
+  return HSL2RGB.apply(this, hsl);
+};
+
+/**
+ * Returns the hash in hex
+ *
+ * @param {String} str string to hash
+ * @returns {String} hex with #
+ */
+ColorHash.prototype.hex = function(str) {
+  var rgb = this.rgb(str);
+  return RGB2HEX(rgb);
+};
+
+export default ColorHash;

platform/ui/src/components/userPreferencesModal/AboutModal.js

@@ -62,7 +62,7 @@ class AboutModal extends Component {
 
   renderTableRow(item) {
     return (
-      <tr key={item.name}>
+      <tr key={item.name} style={{ backgroundColor: 'transparent' }}>
         <td>{item.name}</td>
         <td>
           {item.link ? (
@@ -92,7 +92,7 @@ class AboutModal extends Component {
         <Modal.Header closeButton>
           <Modal.Title>{t('OHIF Viewer - About')}</Modal.Title>
         </Modal.Header>
-        <Modal.Body>
+        <Modal.Body data-cy="about-modal">
           <div className="btn-group">
             <a
               className="btn btn-default"

platform/ui/src/design/styles/common/global.styl

@@ -42,19 +42,6 @@ h3, h1
   margin-top: 20px;
   margin-bottom: 10px;
 
-pre
-  display: block;
-  padding: 9.5px;
-  margin: 0 0 10px;
-  font-size: 13px;
-  line-height: 1.42857143;
-  color: #333;
-  word-break: break-all;
-  word-wrap: break-word;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-
 button, input, select, textarea
   font-family: inherit;
   font-size: inherit;

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

@@ -46,6 +46,7 @@ class DropdownMenu extends Component {
           <button
             key={key}
             className="dd-item"
+            data-cy="about-item-menu"
             onClick={() => this.handleOnClick(onClick)}
           >
             {icon && <Icon {...icon} className="dd-item-icon" />}
@@ -119,7 +120,11 @@ class DropdownMenu extends Component {
 
   render() {
     return (
-      <div className="dd-menu" ref={node => (this.node = node)}>
+      <div
+        className="dd-menu"
+        data-cy="options-menu"
+        ref={node => (this.node = node)}
+      >
         <div className="dd-menu-toggle" onClick={this.toggleList}>
           {this.renderTitleElement()}
         </div>

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

@@ -0,0 +1,49 @@
+import './Select.css';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class Select extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: this.props.value,
+    };
+  }
+
+  handleChange = event => {
+    const value = event.target.value;
+    this.setState({ value });
+    if (this.props.onChange) this.props.onChange(value);
+  };
+
+  render() {
+    return (
+      <select
+        className="select-ohif"
+        value={this.state.selected}
+        onChange={this.handleChange}
+      >
+        {this.props.options.map(({ key, value }) => {
+          return (
+            <option key={key} value={value}>
+              {key}
+            </option>
+          );
+        })}
+      </select>
+    );
+  }
+}
+
+Select.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    })
+  ),
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+export default Select;

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

@@ -1,3 +1,41 @@
+.select-ohif-container .select-ohif {
+  display: inline-block;
+  font-size: 10pt;
+  box-sizing: border-box;
+  width: auto;
+  transition: all 0.15s ease;
+  background-color: var(--input-background-color);
+  line-height: 16px;
+  color: var(--input-placeholder-color);
+  height: 40px;
+  margin: 0 5px 20px 5px;
+  padding: 0 20px;
+  placeholder-color: var(--input-placeholder-color);
+  cursor: pointer;
+  border: none;
+  font-weight: normal;
+  border-radius: 4px;
+  background-image: none;
+}
+
+.select-ohif-container .select-ohif::-ms-expand {
+  display: none;
+}
+
+.select-ohif-container .select-ohif-label {
+  padding: 5px;
+}
+
+.select-ohif:focus {
+  outline: none;
+}
+
+.select-ohif-container .select-ohif option {
+  font-weight: normal;
+}
+
+/** Compatibility styles for MIP */
+
 .select-ohif {
   display: block;
   font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
@@ -9,7 +47,6 @@
   padding: 0.6em 1.4em 0.5em 0.8em;
   width: 100%;
   max-width: 100%;
-  box-sizing: border-box;
   margin: 0;
   border: 1px solid #aaa;
   box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
@@ -24,19 +61,3 @@
   background-position: right 0.7em top 50%, 0 0;
   background-size: 0.65em auto, 100%;
 }
-
-.select-ohif::-ms-expand {
-  display: none;
-}
-
-.select-ohif:hover {
-  border-color: #888;
-}
-
-.select-ohif:focus {
-  outline: none;
-}
-
-.select-ohif option {
-  font-weight: normal;
-}

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

@@ -7,9 +7,19 @@ import PropTypes from 'prop-types';
 class Select extends Component {
   constructor(props) {
     super(props);
-    this.state = { value: this.props.value };
   }
 
+  static propTypes = {
+    options: PropTypes.arrayOf(
+      PropTypes.shape({
+        key: PropTypes.string.isRequired,
+        value: PropTypes.string.isRequired,
+      })
+    ),
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+  };
+
   handleChange = event => {
     const value = event.target.value;
     this.setState({ value });
@@ -18,32 +28,22 @@ class Select extends Component {
 
   render() {
     return (
-      <select
-        className="select-ohif"
-        value={this.state.selected}
-        onChange={this.handleChange}
-      >
-        {this.props.options.map(({ key, value }) => {
-          return (
-            <option key={key} value={value}>
-              {key}
-            </option>
-          );
-        })}
-      </select>
+      <div className="select-ohif-container">
+        <label className="select-ohif-label" htmlFor={this.id}>
+          {this.props.label}
+          <select className="form-control select-ohif" {...this.props}>
+            {this.props.options.map(({ key, value }) => {
+              return (
+                <option key={key} value={value}>
+                  {key}
+                </option>
+              );
+            })}
+          </select>
+        </label>
+      </div>
     );
   }
 }
 
-Select.propTypes = {
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-    })
-  ),
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-};
-
 export { Select };

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

@@ -1,7 +1,34 @@
-.input-ohif {
-  background-color: #b6b6b6;
-  border-color: #b6b6b6;
-  font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
-    sans-serif;
+.input-ohif-container {
   font-size: 1em;
+  color: var(--text-primary-color);
+  font-weight: 400;
+}
+
+.input-ohif-container .input-ohif {
+  display: inline-block;
+  height: 40px;
+  margin: 0 10px 20px;
+  padding: 0 20px;
+  cursor: pointer;
+  border: none;
+  background-color: var(--input-background-color);
+  color: var(--input-placeholder-color);
+  font-size: 10pt;
+  font-weight: normal;
+  width: auto;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+}
+
+.input-ohif-container .input-ohif-label {
+  padding: 5px;
+}
+
+.input-ohif-container .input-ohif:active,
+.input-ohif-container .input-ohif:focus {
+  background-color: var(--input-background-color);
+}
+
+.input-ohif-container .input-ohif.invisible {
+  visibility: hidden;
 }

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

@@ -1,36 +1,45 @@
-import './TextInput.css';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import './TextInput.css';
+
 class TextInput extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { value: props.value };
   }
 
-  handleChange = event => {
-    this.setState({ value: event.target.value });
-    if (this.props.onChange) this.props.onChange();
+  static propTypes = {
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]),
+    id: PropTypes.string,
+    label:PropTypes.string,
+    type: PropTypes.string,
+  };
+
+  static defaultProps = {
+    value: '',
+    id: `TextInput-${new Date().toTimeString()}`,
+    label: undefined,
+    type: 'text',
   };
 
   render() {
     return (
-      <input
-        className="input-ohif"
-        type="text"
-        value={this.state.value}
-        onChange={this.handleChange}
-        id={this.props.id}
-      />
+      <div className="input-ohif-container">
+        <label className="input-ohif-label" htmlFor={this.props.id}>
+          {this.props.label}
+          <input
+            type={this.props.type}
+            id={this.props.id}
+            className="form-control input-ohif"
+            {...this.props}
+          />
+        </label>
+      </div>
     );
   }
 }
 
-TextInput.propTypes = {
-  value: PropTypes.string,
-  id: PropTypes.string,
-  onChange: PropTypes.func,
-};
-
 export { TextInput };

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

@@ -1,6 +1,10 @@
+// Temp
+import OldSelect from './OldSelect.js';
+
 export { Select } from './Select.js';
 export { Label } from './Label.js';
 export { Range } from './Range.js';
 export { TextArea } from './TextArea.js';
 export { TextInput } from './TextInput.js';
 export { DropdownMenu } from './DropdownMenu.js';
+export { OldSelect };

platform/ui/src/elements/index.js

@@ -1,3 +1,2 @@
-import { ICONS, Icon } from './Icon';
-
-export { Icon, ICONS };
+export * from './Icon';
+export * from './form';

platform/ui/src/hooks/index.js

@@ -0,0 +1,4 @@
+import useMedia from './useMedia.js';
+import useDebounce from './useDebounce.js';
+
+export { useDebounce, useMedia };

platform/ui/src/hooks/useDebounce.js

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+
+/**
+ * A hook to set a value
+ *
+ * @param {*} value - A value to "set"
+ * @param {number} delay - The debounce delay for setting the value
+ * @returns
+ */
+export default function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(
+    () => {
+      // Set debouncedValue to value (passed in) after the specified delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+
+      // Return a cleanup function that will be called every time useEffect is
+      // re-called. useEffect will only be re-called if value changes (see the
+      // inputs array below).
+      //
+      // This is how we prevent debouncedValue from changing if value is changed
+      // within the delay period. Timeout gets cleared and restarted.
+      //
+      // To put it in context, if the user is typing within our app's search
+      // box, we don't want the debouncedValue to update until they've stopped
+      // typing for more than 500ms.
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    // Only re-call effect if value changes
+    // You could also add the "delay" var to inputs array if you need to be
+    // able to change that dynamically.
+    [value]
+  );
+
+  return debouncedValue;
+}

platform/ui/src/hooks/useMedia.js

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+
+/**
+ *
+ * @example <caption></caption>
+ * const currentViewportSize = useMedia(
+ *  // Media queries
+ *  ['(min-width: 1500px)', '(min-width: 1000px)', '(min-width: 600px)'],
+ *  // Value to return for matched media query
+ *  ['large', 'medium', 'small'],
+ *  // Default value
+ *  'medium'
+ * );
+ * @param {string[]} queries
+ * @param {*} values
+ * @param {*} defaultValue
+ * @returns
+ */
+function useMedia(queries, values, defaultValue) {
+  // Array containing a media query list for each query
+  const mediaQueryLists = queries.map(q => window.matchMedia(q));
+
+  // Function that gets value based on matching media query
+  const getValue = () => {
+    // Get index of first media query that matches
+    const index = mediaQueryLists.findIndex(mql => mql.matches);
+
+    // Return related value or defaultValue if none
+    return typeof values[index] !== 'undefined' ? values[index] : defaultValue;
+  };
+
+  // State and setter for matched value
+  const [value, setValue] = useState(getValue);
+
+  useEffect(
+    () => {
+      // Event listener callback
+      // Note: By defining getValue outside of useEffect we ensure that it has ...
+      // ... current values of hook args (as this hook callback is created once on mount).
+      const handler = () => setValue(getValue);
+
+      // Set a listener for each media query with above handler as callback.
+      mediaQueryLists.forEach(mql => mql.addListener(handler));
+
+      // Remove listeners on cleanup
+      return () => mediaQueryLists.forEach(mql => mql.removeListener(handler));
+    },
+    [] // Empty array ensures effect is only run on mount and unmount
+  );
+
+  return value;
+}
+
+export default useMedia;

platform/ui/src/index.js

@@ -1,12 +1,14 @@
 import {
   Checkbox,
   CineDialog,
+  DownloadDialog,
   LayoutButton,
   LayoutChooser,
   MeasurementTable,
   MeasurementTableItem,
   Overlay,
   OverlayTrigger,
+  PageToolbar,
   QuickSwitch,
   RoundedButtonGroup,
   SelectTree,
@@ -15,6 +17,8 @@ import {
   StudyList,
   TableList,
   TableListItem,
+  TableSearchFilter,
+  TablePagination,
   ThumbnailEntry,
   ToolbarSection,
   Tooltip,
@@ -22,10 +26,22 @@ import {
   UserPreferences,
   UserPreferencesModal,
 } from './components';
-import { ICONS, Icon } from './elements';
+import { useDebounce, useMedia } from './hooks';
+
+// Elements
+import {
+  ICONS,
+  Icon,
+  DropdownMenu as Dropdown,
+  Select,
+  OldSelect,
+  Label,
+  Range,
+  TextArea,
+  TextInput,
+} from './elements';
 
 // Alias this for now as not all dependents are using strict versioning
-import { DropdownMenu as Dropdown, Range, Select } from './elements/form';
 import ExpandableToolMenu from './viewer/ExpandableToolMenu.js';
 import PlayClipButton from './viewer/PlayClipButton.js';
 import { ScrollableArea } from './ScrollableArea/ScrollableArea.js';
@@ -38,11 +54,16 @@ import SnackbarProvider, {
 } from './utils/SnackbarProvider';
 
 export {
+  // Elements
   ICONS,
   //
   Checkbox,
-  CineDialog,
   Dropdown,
+  Label,
+  TextArea,
+  TextInput,
+  CineDialog,
+  DownloadDialog,
   ExpandableToolMenu,
   Icon,
   LayoutButton,
@@ -52,17 +73,21 @@ export {
   Overlay,
   OverlayTrigger,
   PlayClipButton,
+  PageToolbar,
   QuickSwitch,
   Range,
   RoundedButtonGroup,
   ScrollableArea,
   Select,
+  OldSelect,
   SelectTree,
   SimpleDialog,
   StudyBrowser,
   StudyList,
   TableList,
   TableListItem,
+  TableSearchFilter,
+  TablePagination,
   ThumbnailEntry,
   Toolbar,
   ToolbarButton,
@@ -75,4 +100,7 @@ export {
   SnackbarProvider,
   useSnackbarContext,
   withSnackbar,
+  // Hooks
+  useDebounce,
+  useMedia,
 };

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

@@ -4,6 +4,7 @@ const path = require('path');
 const merge = require('webpack-merge');
 const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
 // ~~ Plugins
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const fontsToJavaScriptRule = require('./rules/fontsToJavaScript.js');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -12,7 +13,9 @@ const SRC_DIR = path.join(__dirname, '../src');
 const DIST_DIR = path.join(__dirname, '../dist');
 const PUBLIC_DIR = path.join(__dirname, '../public');
 // ~~ Env Vars
+const APP_CONFIG = process.env.APP_CONFIG || 'config/default.js';
 const HTML_TEMPLATE = process.env.HTML_TEMPLATE || 'script-tag.html';
+const PUBLIC_URL = process.env.PUBLIC_URL || '/';
 
 module.exports = (env, argv) => {
   const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
@@ -33,12 +36,22 @@ module.exports = (env, argv) => {
     plugins: [
       // Clean output.path
       new CleanWebpackPlugin(),
+      new CopyWebpackPlugin([
+        // Copy over and rename our target app config file
+        {
+          from: `${PUBLIC_DIR}/${APP_CONFIG}`,
+          to: `${DIST_DIR}/app-config.js`,
+        },
+      ]),
       // Generate "index.html" w/ correct includes/imports
       // NOTE: We use this for E2E Tests
       new HtmlWebpackPlugin({
         inject: false,
         template: `${PUBLIC_DIR}/html-templates/${HTML_TEMPLATE}`,
         filename: 'index.html',
+        templateParameters: {
+          PUBLIC_URL: PUBLIC_URL,
+        },
       }),
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1,

platform/viewer/.webpack/webpack.pwa.js

@@ -1,3 +1,4 @@
+// https://developers.google.com/web/tools/workbox/guides/codelabs/webpack
 // ~~ WebPack
 const path = require('path');
 const merge = require('webpack-merge');
@@ -9,8 +10,9 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
+// const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const WorkboxPlugin = require('workbox-webpack-plugin');
+const { InjectManifest } = require('workbox-webpack-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 // ~~ Rules
@@ -80,12 +82,14 @@ module.exports = (env, argv) => {
         templateParameters: {
           PUBLIC_URL: PUBLIC_URL,
         },
-        // favicon: `${PUBLIC_DIR}/favicon.ico`,
       }),
-      new WorkboxPlugin.GenerateSW({
+      // No longer maintained; but good for generating icons + manifest
+      // new FaviconsWebpackPlugin( path.join(PUBLIC_DIR, 'assets', 'icons-512.png')),
+      new InjectManifest({
         swDest: 'sw.js',
-        clientsClaim: true,
-        skipWaiting: true,
+        swSrc: path.join(SRC_DIR, 'service-worker.js'),
+        // Increase the limit to 4mb:
+        // maximumFileSizeToCacheInBytes: 4 * 1024 * 1024
       }),
     ],
     // https://webpack.js.org/configuration/dev-server/

platform/viewer/CHANGELOG.md

@@ -3,6 +3,245 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.3.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.1...@ohif/viewer@2.3.2) (2019-10-29)
+
+
+### Bug Fixes
+
+* 🐛 Limit image download size to avoid browser issues ([#1112](https://github.com/OHIF/Viewers/issues/1112)) ([5716b71](https://github.com/OHIF/Viewers/commit/5716b71d409ee1c6f13393c8cb7f50222415e198)), closes [#1099](https://github.com/OHIF/Viewers/issues/1099)
+
+
+
+
+
+## [2.3.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.0...@ohif/viewer@2.3.1) (2019-10-29)
+
+
+### Bug Fixes
+
+* rollbar template needs PUBLIC_URL defined ([#1127](https://github.com/OHIF/Viewers/issues/1127)) ([352407c](https://github.com/OHIF/Viewers/commit/352407c71ae93946e9ebad41446d6086cfbc237b))
+
+
+
+
+
+# [2.3.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.2.2...@ohif/viewer@2.3.0) (2019-10-29)
+
+
+### Features
+
+* service worker ([#1045](https://github.com/OHIF/Viewers/issues/1045)) ([cf51368](https://github.com/OHIF/Viewers/commit/cf5136899eac08300ec4f15474a6440129ef7a9a))
+
+
+
+
+
+## [2.2.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.2.1...@ohif/viewer@2.2.2) (2019-10-29)
+
+
+### Bug Fixes
+
+* Set SR viewport as active by interaction ([#1118](https://github.com/OHIF/Viewers/issues/1118)) ([5b33417](https://github.com/OHIF/Viewers/commit/5b334175c370afb930b4b6dbd307ddece8f850e3))
+
+
+
+
+
+## [2.2.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.2.0...@ohif/viewer@2.2.1) (2019-10-29)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [2.2.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.4...@ohif/viewer@2.2.0) (2019-10-28)
+
+
+### Features
+
+* responsive study list ([#1068](https://github.com/OHIF/Viewers/issues/1068)) ([2cdef4b](https://github.com/OHIF/Viewers/commit/2cdef4b9844cc2ce61e9ce76b5a942ba7051fe16))
+
+
+
+
+
+## [2.1.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.3...@ohif/viewer@2.1.4) (2019-10-28)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.1.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.2...@ohif/viewer@2.1.3) (2019-10-26)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.1.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.1...@ohif/viewer@2.1.2) (2019-10-26)
+
+
+### Bug Fixes
+
+* update script-tag output to include config from default.js ([c522ff3](https://github.com/OHIF/Viewers/commit/c522ff3ddab7ed8e3a128dd6edd2cd6902226e99))
+
+
+
+
+
+## [2.1.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.0...@ohif/viewer@2.1.1) (2019-10-26)
+
+
+### Bug Fixes
+
+* 🐛 JSON launch not working properly ([#1089](https://github.com/OHIF/Viewers/issues/1089)) ([#1093](https://github.com/OHIF/Viewers/issues/1093)) ([2677170](https://github.com/OHIF/Viewers/commit/2677170d67659ee178cf77307414d54cfe9cb563))
+
+
+
+
+
+# [2.1.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.0.0...@ohif/viewer@2.1.0) (2019-10-26)
+
+
+### Features
+
+* Snapshot Download Tool ([#840](https://github.com/OHIF/Viewers/issues/840)) ([450e098](https://github.com/OHIF/Viewers/commit/450e0981a5ba054fcfcb85eeaeb18371af9088f8))
+
+
+
+
+
+# [2.0.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.12.2...@ohif/viewer@2.0.0) (2019-10-26)
+
+
+### Bug Fixes
+
+* 🐛 Desc of meas.table not being updated on properly ([#1094](https://github.com/OHIF/Viewers/issues/1094)) ([85f836c](https://github.com/OHIF/Viewers/commit/85f836cd918614be722fce1bff2373460ec4900b)), closes [#1013](https://github.com/OHIF/Viewers/issues/1013)
+
+
+### BREAKING CHANGES
+
+* 1013
+
+
+
+
+
+## [1.12.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.12.1...@ohif/viewer@1.12.2) (2019-10-25)
+
+
+### Bug Fixes
+
+* set SR in ActiveViewport by clicking thumb ([#1091](https://github.com/OHIF/Viewers/issues/1091)) ([986b7ae](https://github.com/OHIF/Viewers/commit/986b7ae2bf4f7d27f326e62f93285ce20eaf0a79))
+
+
+
+
+
+## [1.12.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.12.0...@ohif/viewer@1.12.1) (2019-10-25)
+
+
+### Bug Fixes
+
+* 🐛 Orthographic MPR fix ([#1092](https://github.com/OHIF/Viewers/issues/1092)) ([460e375](https://github.com/OHIF/Viewers/commit/460e375f0aa75d35f7a46b4d48e6cc706019956d))
+
+
+
+
+
+# [1.12.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.11.5...@ohif/viewer@1.12.0) (2019-10-25)
+
+
+### Features
+
+* 🎸 Allow routes to load Google Cloud DICOM Stores in the Study List ([#1069](https://github.com/OHIF/Viewers/issues/1069)) ([21b586b](https://github.com/OHIF/Viewers/commit/21b586b08f3dde6613859712a9e0577dece564db))
+
+
+
+
+
+## [1.11.5](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.11.4...@ohif/viewer@1.11.5) (2019-10-24)
+
+**Note:** Version bump only for package @ohif/viewer
+
+## [1.11.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.11.3...@ohif/viewer@1.11.4) (2019-10-23)
+
+
+### Bug Fixes
+
+* Revert "Revert "fix: MPR initialization"" ([#1065](https://github.com/OHIF/Viewers/issues/1065)) ([c680720](https://github.com/OHIF/Viewers/commit/c680720ce5ead58fdb399e3a356edac18093f5c0)), closes [#1062](https://github.com/OHIF/Viewers/issues/1062) [#1064](https://github.com/OHIF/Viewers/issues/1064)
+
+## [1.11.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.11.2...@ohif/viewer@1.11.3) (2019-10-23)
+
+
+### Bug Fixes
+
+* 🐛 Switch to orhtographic view for 2D MPR ([#1074](https://github.com/OHIF/Viewers/issues/1074)) ([13d337a](https://github.com/OHIF/Viewers/commit/13d337aaabb8dadf6366c6262c5e47e7781edd08))
+
+
+
+
+
+## [1.11.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.11.1...@ohif/viewer@1.11.2) (2019-10-23)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [1.11.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.11.0...@ohif/viewer@1.11.1) (2019-10-23)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [1.11.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.10.3...@ohif/viewer@1.11.0) (2019-10-22)
+
+
+### Bug Fixes
+
+* MPR initialization ([#1062](https://github.com/OHIF/Viewers/issues/1062)) ([b037394](https://github.com/OHIF/Viewers/commit/b03739428f72bb50bdabdd6f83b7af885057da69))
+
+
+### Features
+
+* 🎸 Load spinner when selecting gcloud store. Add key on td ([#1034](https://github.com/OHIF/Viewers/issues/1034)) ([e62f403](https://github.com/OHIF/Viewers/commit/e62f403fe9e3df56713128e3d59045824b086d8d)), closes [#1057](https://github.com/OHIF/Viewers/issues/1057)
+
+
+
+
+
+## [1.10.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.10.2...@ohif/viewer@1.10.3) (2019-10-18)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [1.10.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.10.1...@ohif/viewer@1.10.2) (2019-10-18)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [1.10.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.10.0...@ohif/viewer@1.10.1) (2019-10-16)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
 # [1.10.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.9.1...@ohif/viewer@1.10.0) (2019-10-15)
 
 

platform/viewer/cypress.json

@@ -2,5 +2,9 @@
   "baseUrl": "http://localhost:3000",
   "video": false,
   "chromeWebSecurity": false,
+  "waitForAnimations": true,
+  "defaultCommandTimeout": 10000,
+  "requestTimeout": 10000,
+  "responseTimeout": 10000,
   "projectId": "4oe38f"
 }

platform/viewer/cypress/integration/common/OHIFCornerstoneHotkeys.spec.js

@@ -0,0 +1,153 @@
+describe('OHIF Cornerstone Hotkeys', () => {
+  before(() => {
+    cy.openStudy('MISTER^MR');
+    cy.waitDicomImage();
+    cy.expectMinimumThumbnails(3);
+  });
+
+  beforeEach(() => {
+    cy.initCornerstoneToolsAliases();
+    cy.initCommonElementsAliases();
+    cy.resetViewport();
+  });
+
+  it('checks if hotkeys "R" and "L" can rotate the image', () => {
+    // Hotkey R
+    cy.get('body').type('R');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'P');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'R');
+    // Hotkey L
+    cy.get('body').type('L');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'R');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+  });
+
+  it('checks if hotkeys "ArrowUp" and "ArrowDown" can navigate in the stack', () => {
+    // Hotkey ArrowDown
+    cy.get('body').type('{downarrow}');
+    cy.get('@viewportInfoBottomLeft').should('contains.text', 'Img: 2 2/26');
+    // Hotkey ArrowUp
+    cy.get('body').type('{uparrow}');
+    cy.get('@viewportInfoBottomLeft').should('contains.text', 'Img: 1 1/26');
+  });
+
+  it('checks if hotkeys "V" and "H" can flip the image', () => {
+    // Hotkey V
+    cy.get('body').type('V');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'L');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+    // Hotkey H
+    cy.get('body').type('H');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'L');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'P');
+  });
+
+  it('checks if hotkey "I" can invert the image', () => {
+    // Hotkey I
+    cy.get('body').type('I');
+    // Visual comparison
+    cy.screenshot();
+    cy.percyCanvasSnapshot('Hotkey I - invert image');
+  });
+
+  it('checks if hotkeys "+", "-" and "=" can zoom in, out and fit to viewport', () => {
+    // Hotkey +
+    cy.get('body').type('+++'); // Press hotkey 3 times
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 256%');
+    // Hotkey -
+    cy.get('body').type('-');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 241%');
+    // Hotkey =
+    cy.get('body').type('=');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 211%');
+  });
+
+  it('checks if hotkey "SPACEBAR" can reset the image', () => {
+    // Press multiples hotkeys
+    cy.get('body').type('V+++I');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'L');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 256%');
+
+    // Hotkey SPACEBAR
+    cy.get('body').type(' ');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'R');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 211%');
+
+    // Visual comparison to make sure the 'inverted' image was reset
+    cy.screenshot();
+    cy.percyCanvasSnapshot('Hotkey SPACEBAR - Reset Image');
+  });
+
+  it('uses hotkeys "RightArrow" and "LeftArrow" to navigate between multiple viewports', () => {
+    //Click on Layout button
+    cy.get('@layoutBtn').click();
+    //Select 3 viewports
+    cy.get('tbody > :nth-child(1) > :nth-child(3)').click();
+
+    // Press multiples hotkeys on viewport #1
+    cy.get('body').type('VL+++I');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'A');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'R');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 134%');
+
+    // Hotkey RightArrow: Move to next viewport
+    cy.get('body').type('{rightarrow}');
+
+    // Get overlay information from viewport #2
+    cy.get(
+      ':nth-child(2) > .viewport-wrapper > .viewport-element > .ViewportOrientationMarkers.noselect > .top-mid.orientation-marker'
+    ).as('viewport2InfoMidTop');
+    cy.get(
+      ':nth-child(2) > .viewport-wrapper > .viewport-element > .ViewportOrientationMarkers.noselect > .left-mid.orientation-marker'
+    ).as('viewport2InfoMidLeft');
+    cy.get(
+      ':nth-child(2) > .viewport-wrapper > .viewport-element > .ViewportOverlay > div.bottom-right.overlay-element > div'
+    ).as('viewport2InfoBottomRight');
+
+    // Press multiples hotkeys on viewport #2
+    cy.get('body').type('RR++H+++I');
+    cy.get('@viewport2InfoMidLeft').should('contains.text', 'P');
+    cy.get('@viewport2InfoMidTop').should('contains.text', 'H');
+    cy.get('@viewport2InfoBottomRight').should('contains.text', 'Zoom: 120%');
+
+    // Hotkey LeftArrow: Move to previous viewport
+    cy.get('body').type('{leftarrow}');
+
+    // Hotkey SPACEBAR: Reset viewport #1
+    cy.get('body').type(' ');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'R');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 89%');
+
+    // Hotkey RightArrow: Move to next viewport
+    cy.get('body').type('{rightarrow}');
+
+    // Hotkey SPACEBAR: Reset viewport #2
+    cy.get('body').type(' ');
+    cy.get('@viewport2InfoMidLeft').should('contains.text', 'A');
+    cy.get('@viewport2InfoMidTop').should('contains.text', 'H');
+    cy.get('@viewport2InfoBottomRight').should('contains.text', 'Zoom: 45%');
+  });
+
+  //TO-DO: This test is blocked by issue #1095 (https://github.com/OHIF/Viewers/issues/1095)
+  //Once issue is fixed, this test can be uncommented
+  // it('checks if hotkey "Z" activates zoom tool', () => {
+  //   // Hotkey Z
+  //   cy.get('body').type('Z');
+  //   // Verify if icon is active on toolbar
+  //   cy.get('@zoomBtn').should('have.class', 'active');
+  // });
+
+  //TO-DO: This test is blocked by issue #1095 (https://github.com/OHIF/Viewers/issues/1095)
+  //Once issue is fixed, this test can be uncommented
+  // it('checks if hotkeys "PageDown" and "PageUp" can navigate in the series thumbnails', () => {
+  //   // Hotkey PageDown
+  //   cy.get('body').type('{pagedown}{pagedown}'); // press hotkey twice
+  //   cy.get('@viewportInfoBottomLeft').should('contains.text', 'Ser: 3');
+  //   // Hotkey PageUp
+  //   cy.get('body').type('{pageup}');
+  //   cy.get('@viewportInfoBottomLeft').should('contains.text', 'Ser: 2');
+  // });
+});

platform/viewer/cypress/integration/common/OHIFCornerstoneToolbar.spec.js

@@ -2,12 +2,12 @@ describe('OHIF Cornerstone Toolbar', () => {
   before(() => {
     cy.openStudy('MISTER^MR');
     cy.waitDicomImage();
+    cy.expectMinimumThumbnails(3);
   });
 
   beforeEach(() => {
     cy.initCornerstoneToolsAliases();
     cy.initCommonElementsAliases();
-    //Following best practices, reset should be done before each test
     cy.resetViewport();
   });
 
@@ -57,17 +57,16 @@ describe('OHIF Cornerstone Toolbar', () => {
 
     //drags the mouse inside the viewport to be able to interact with series
     cy.get('@viewport')
-      .trigger('mousedown', 'top', { which: 1 })
-      .trigger('mousemove', 'center', { which: 1 })
+      .trigger('mousedown', 'center', { which: 1 })
+      .trigger('mousemove', 'top', { which: 1 })
       .trigger('mouseup');
-
     const expectedText =
-      'Ser: 1Img: 14 14/26256 x 256Loc: 0.00 mm Thick: 5.00 mm';
+      'Ser: 1Img: 1 1/26256 x 256Loc: -30.00 mm Thick: 5.00 mm';
     cy.get('@viewportInfoBottomLeft').should('have.text', expectedText);
   });
 
   it('checks if Zoom tool will zoom in/out an image in the viewport', () => {
-    //Click on button and vefiry if icon is active on toolbar
+    //Click on button and verify if icon is active on toolbar
     cy.get('@zoomBtn')
       .click()
       .then($zoomBtn => {
@@ -76,11 +75,11 @@ describe('OHIF Cornerstone Toolbar', () => {
 
     //drags the mouse inside the viewport to be able to interact with series
     cy.get('@viewport')
-      .trigger('mousedown', 'top', { which: 1 })
-      .trigger('mousemove', 'center', { which: 1 })
+      .trigger('mousedown', 'center', { which: 1 })
+      .trigger('mousemove', 'top', { which: 1 })
       .trigger('mouseup');
 
-    const expectedText = 'Zoom: 884%W: 820 L: 410Lossless / Uncompressed';
+    const expectedText = 'Zoom: 50%W: 958 L: 479Lossless / Uncompressed';
     cy.get('@viewportInfoBottomRight').should('have.text', expectedText);
   });
 
@@ -94,14 +93,14 @@ describe('OHIF Cornerstone Toolbar', () => {
 
     //drags the mouse inside the viewport to be able to interact with series
     cy.get('@viewport')
-      .trigger('mousedown', 'top', { which: 1 })
-      .trigger('mousemove', 'center', { which: 1 })
+      .trigger('mousedown', 'center', { which: 1 })
+      .trigger('mousemove', 'top', { which: 1 })
       .trigger('mouseup')
       .trigger('mousedown', 'center', { which: 1 })
       .trigger('mousemove', 'left', { which: 1 })
       .trigger('mouseup');
 
-    const expectedText = 'Zoom: 211%W: 544 L: 626Lossless / Uncompressed';
+    const expectedText = 'Zoom: 211%W: 635 L: 226Lossless / Uncompressed';
     cy.get('@viewportInfoBottomRight').should('have.text', expectedText);
   });
 
@@ -145,7 +144,7 @@ describe('OHIF Cornerstone Toolbar', () => {
     //Add annotation on the viewport
     const firstClick = [150, 100];
     const secondClick = [130, 170];
-    cy.addLine('.cornerstone-canvas', firstClick, secondClick);
+    cy.addLine('@viewport', firstClick, secondClick);
 
     //Verify if measurement annotation was added into the measurements panel
     cy.get('@measurementsBtn')
@@ -173,7 +172,7 @@ describe('OHIF Cornerstone Toolbar', () => {
     const initPos = [180, 390];
     const midPos = [300, 410];
     const finalPos = [180, 450];
-    cy.addAngle('.cornerstone-canvas', initPos, midPos, finalPos);
+    cy.addAngle('@viewport', initPos, midPos, finalPos);
 
     //Verify if measurement annotation was added into the measurements panel
     cy.get('@measurementsBtn')
@@ -197,11 +196,14 @@ describe('OHIF Cornerstone Toolbar', () => {
     //Click on reset button
     cy.get('@resetBtn').click();
 
-    const expectedText = 'Zoom: 211%W: 820 L: 410Lossless / Uncompressed';
+    const expectedText = 'Zoom: 211%W: 958 L: 479Lossless / Uncompressed';
     cy.get('@viewportInfoBottomRight').should('have.text', expectedText);
   });
 
   it('checks if CINE tool will prompt a modal with working controls', () => {
+    cy.server();
+    cy.route('GET', '/**/studies/**/').as('studies');
+
     //Click on button
     cy.get('@cineBtn').click();
     //Vefiry if cine control overlay is being displayed
@@ -216,26 +218,49 @@ describe('OHIF Cornerstone Toolbar', () => {
       .click();
 
     let expectedText = 'Img: 1 1/26';
-    cy.get('@viewportInfoBottomLeft').should('not.have.text', expectedText);
+    cy.get('@viewportInfoBottomLeft', { timeout: 15000 }).should(
+      'not.have.text',
+      expectedText
+    );
 
     //Test SKIP TO FIRST IMAGE button
-    cy.get('[title="Skip to first Image"]').click();
-    cy.get('@viewportInfoBottomLeft').should('contain.text', expectedText);
+    cy.get('[title="Skip to first Image"]')
+      .click()
+      .wait(1000);
+    cy.get('@viewportInfoBottomLeft', { timeout: 15000 }).should(
+      'contain.text',
+      expectedText
+    );
 
     //Test NEXT IMAGE button
-    cy.get('[title="Next Image"]').click();
+    cy.get('[title="Next Image"]')
+      .click()
+      .wait(1000);
     expectedText = 'Img: 2 2/26';
-    cy.get('@viewportInfoBottomLeft').should('contain.text', expectedText);
+    cy.get('@viewportInfoBottomLeft', { timeout: 15000 }).should(
+      'contain.text',
+      expectedText
+    );
 
     //Test SKIP TO LAST IMAGE button
-    cy.get('[title="Skip to last Image"]').click();
+    cy.get('[title="Skip to last Image"]')
+      .click()
+      .wait(2000);
     expectedText = 'Img: 27 26/26';
-    cy.get('@viewportInfoBottomLeft').should('contain.text', expectedText);
+    cy.get('@viewportInfoBottomLeft', { timeout: 15000 }).should(
+      'contain.text',
+      expectedText
+    );
 
     //Test PREVIOUS IMAGE button
-    cy.get('[title="Previous Image"]').click();
+    cy.get('[title="Previous Image"]')
+      .click()
+      .wait(1000);
     expectedText = 'Img: 26 25/26';
-    cy.get('@viewportInfoBottomLeft').should('contain.text', expectedText);
+    cy.get('@viewportInfoBottomLeft', { timeout: 15000 }).should(
+      'contain.text',
+      expectedText
+    );
 
     //Click on Cine button
     cy.get('@cineBtn').click();
@@ -358,33 +383,20 @@ describe('OHIF Cornerstone Toolbar', () => {
         .should('be.eq', 9);
     });
 
-    //Commented this to avoid throwing an wrong exception at the end of "Layout button" test
-    //this commented section should be uncommented once issue #999 is fixed. (https://github.com/OHIF/Viewers/issues/999)
-
     //verify if layout has changed to 1 viewport
-    //  cy.get('@layoutBtn').click();
-    //  cy.get('tbody > :nth-child(1) > :nth-child(1)').click();
-    //  cy.get('.viewport-container').then(($viewport) =>{
-    //    cy.wrap($viewport)
-    //      .its('length')
-    //      .should('be.eq', 1);
-    //  })
-    cy.reload();
-    cy.waitDicomImage();
+    cy.get('@layoutBtn').click();
+    cy.get('tbody > :nth-child(1) > :nth-child(1)').click();
+    cy.get('.viewport-container').then($viewport => {
+      cy.wrap($viewport)
+        .its('length')
+        .should('be.eq', 1);
+    });
   });
 
   it('checks if Clear tool will delete all measurements added in the viewport', () => {
     //Add measurements in the viewport
-    cy.get('@lengthBtn').click();
-    const firstClick = [150, 100];
-    const secondClick = [130, 170];
-    cy.addLine('.cornerstone-canvas', firstClick, secondClick);
-
-    cy.get('@angleBtn').click();
-    const initPos = [180, 390];
-    const midPos = [300, 410];
-    const finalPos = [180, 450];
-    cy.addAngle('.cornerstone-canvas', initPos, midPos, finalPos);
+    cy.addLengthMeasurement();
+    cy.addAngleMeasurement();
 
     //Verify if measurement annotation was added into the measurements panel
     cy.get('@measurementsBtn').click();
@@ -416,23 +428,18 @@ describe('OHIF Cornerstone Toolbar', () => {
 
   it('checks if Eraser tool will remove the measurements added in the viewport', () => {
     //Add measurements in the viewport
-    cy.get('@lengthBtn').click();
-    const firstClick = [150, 100];
-    const secondClick = [130, 170];
-    cy.addLine('.cornerstone-canvas', firstClick, secondClick);
-
-    cy.get('@angleBtn').click();
-    const initPos = [180, 390];
-    const midPos = [300, 410];
-    const finalPos = [180, 450];
-    cy.addAngle('.cornerstone-canvas', initPos, midPos, finalPos);
+    cy.addLengthMeasurement();
+    cy.addAngleMeasurement();
 
     //Verify if measurement annotation was added into the measurements panel
     cy.get('@measurementsBtn').click();
     cy.get('.measurementItem')
       .its('length')
       .should('be.eq', 2);
-    cy.get('@measurementsBtn').click();
+    cy.get('@measurementsBtn')
+      .click()
+      .wait(2000);
+    //cy.isNotInViewport('@measurementsPanel'); //TO DO: check this intermittent behaviour
 
     //Click More button
     cy.get('@moreBtn').click();
@@ -440,14 +447,14 @@ describe('OHIF Cornerstone Toolbar', () => {
     cy.get('.tooltip-inner > :nth-child(12)').click();
 
     //Erase measurement #1 and Verify if it was removed from the measurements panel
-    const [x1, y1] = firstClick;
+    const [x1, y1] = [150, 100];
     cy.get('@viewport').click(x1, y1, { force: true });
     cy.get('.measurementItem')
       .its('length')
       .should('be.eq', 1);
 
     //Erase measurement #2 and Verify if it was removed from the measurements panel
-    const [x2, y2] = initPos;
+    const [x2, y2] = [180, 390];
     cy.get('@viewport').click(x2, y2, { force: true });
     cy.get('.measurementItem').should('not.exist');
   });

platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js

@@ -1,19 +1,14 @@
 describe('OHIFStandaloneViewer', () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.openStudyList();
   });
 
   it('loads route with at least 2 rows', () => {
     cy.screenshot();
-    cy.percySnapshot();
+    cy.percyCanvasSnapshot('Study List');
 
-    cy.get('#studyListData tr')
+    cy.get('[data-cy="study-list-results"] tr')
       .its('length')
       .should('be.gt', 2);
   });
-
-  it('first 2 rows has values', () => {
-    cy.get('#studyListData > :nth-child(1) > .patientId').should('be.visible');
-    cy.get('#studyListData > :nth-child(2) > .patientId').should('be.visible');
-  });
 });

platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js

@@ -1,26 +1,26 @@
-describe('OHIF Study Viewer Page', () => {
-  before(() => {
+describe('OHIF Study Viewer Page', function() {
+  before(function() {
     cy.openStudy('MISTER^MR');
     cy.waitDicomImage();
+    cy.expectMinimumThumbnails(6);
   });
 
-  beforeEach(() => {
+  beforeEach(function() {
     cy.initCommonElementsAliases();
-    //Following best practices, reset should be done before each test
     cy.resetViewport();
   });
 
-  it('checks if series thumbnails are being displayed', () => {
+  it('checks if series thumbnails are being displayed', function() {
     cy.screenshot();
-    cy.percySnapshot();
+    cy.percyCanvasSnapshot('Series Thumbnails');
 
-    cy.get('.ThumbnailEntryContainer')
+    cy.get('[data-cy="thumbnail-list"]')
       .its('length')
       .should('be.gt', 1);
   });
 
-  it('drags and drop a series thumbnail into viewport', () => {
-    cy.get('.ThumbnailEntryContainer:nth-child(2)') //element to be dragged
+  it('drags and drop a series thumbnail into viewport', function() {
+    cy.get('[data-cy="thumbnail-list"]:nth-child(2)') //element to be dragged
       .drag('.cornerstone-canvas'); //dropzone element
 
     const expectedText =
@@ -28,7 +28,7 @@ describe('OHIF Study Viewer Page', () => {
     cy.get('@viewportInfoBottomLeft').should('contain.text', expectedText);
   });
 
-  it('checks if Series left panel can be hidden/displayed', () => {
+  it('checks if Series left panel can be hidden/displayed', function() {
     cy.get('@seriesBtn').click();
     cy.get('@seriesPanel').should('not.be.enabled');
 
@@ -36,7 +36,7 @@ describe('OHIF Study Viewer Page', () => {
     cy.get('@seriesPanel').should('be.visible');
   });
 
-  it('checks if Measurements right panel can be hidden/displayed', () => {
+  it('checks if Measurements right panel can be hidden/displayed', function() {
     cy.get('@measurementsBtn').click();
     cy.get('@measurementsPanel').should('be.visible');
 
@@ -44,7 +44,7 @@ describe('OHIF Study Viewer Page', () => {
     cy.get('@measurementsPanel').should('not.be.enabled');
   });
 
-  it('checks if measurement item can be Relabeled under Measurements panel', () => {
+  it('checks if measurement item can be Relabeled under Measurements panel', function() {
     cy.addLengthMeasurement(); //Adding measurement in the viewport
     cy.get('@measurementsBtn').click();
     cy.get('.measurementItem').click();
@@ -65,8 +65,11 @@ describe('OHIF Study Viewer Page', () => {
     // Confirm Selection
     cy.get('.checkIconWrapper').click();
 
-    //Verify if 'Bone' label was added
+    // Verify if 'Bone' label was added
     cy.get('.measurementLocation').should('contain.text', 'Bone');
+    // Close panel
+    cy.get('@measurementsBtn').click();
+    cy.get('@measurementsPanel').should('not.be.enabled');
   });
 
   //TO-DO: Test case will fail due to issue #1013: https://github.com/OHIF/Viewers/issues/1013
@@ -93,4 +96,205 @@ describe('OHIF Study Viewer Page', () => {
   //   cy.get('.measurementLocation')
   //     .should('contain.text', descriptionText);
   // });
+
+  it('checks if measurement item can be deleted through the context menu on the viewport', function() {
+    cy.addLengthMeasurement([100, 100], [200, 100]); //Adding measurement in the viewport
+
+    //Right click on measurement annotation
+    const [x1, y1] = [150, 100];
+    cy.get('@viewport')
+      .trigger('mousedown', x1, y1, {
+        which: 3,
+      })
+      .trigger('mouseup', x1, y1, {
+        which: 3,
+      });
+
+    //Contextmenu is visible
+    cy.get('.ToolContextMenu').should('be.visible');
+
+    //Click "Delete measurement"
+    cy.get('.form-action')
+      .contains('Delete measurement')
+      .click();
+
+    //Open measurements menu
+    cy.get('@measurementsBtn').click();
+
+    //Verify measurements was removed from panel
+    cy.get('.measurementItem')
+      .should('not.exist')
+      .log('Annotation removed with success');
+
+    //Close panel
+    cy.get('@measurementsBtn').click();
+    cy.get('@measurementsPanel').should('not.be.enabled');
+  });
+
+  it('adds relabel and description to measurement item through the context menu on the viewport', function() {
+    cy.addLengthMeasurement([100, 100], [200, 100]); //Adding measurement in the viewport
+
+    // Relabel
+    // Right click on measurement annotation
+    const [x1, y1] = [150, 100];
+    cy.get('@viewport')
+      .trigger('mousedown', x1, y1, {
+        which: 3,
+      })
+      .trigger('mouseup', x1, y1, {
+        which: 3,
+      });
+
+    // Contextmenu is visible
+    cy.get('.ToolContextMenu').should('be.visible');
+
+    // Click "Relabel"
+    cy.get('.form-action')
+      .contains('Relabel')
+      .click();
+
+    // Search for "Brain"
+    cy.get('.searchInput').type('Brain');
+
+    // Select "Brain" Result
+    cy.get('.treeInputs > .wrapperLabel')
+      .contains('Brain')
+      .click();
+
+    // Confirm Selection
+    cy.get('.checkIconWrapper').click();
+
+    // Description
+    // Right click on measurement annotation
+    cy.get('@viewport')
+      .trigger('mousedown', x1, y1, {
+        which: 3,
+      })
+      .trigger('mouseup', x1, y1, {
+        which: 3,
+      });
+
+    // Contextmenu is visible
+    cy.get('.ToolContextMenu').should('be.visible');
+
+    // Click "Description"
+    cy.get('.form-action')
+      .contains('Add Description')
+      .click();
+
+    // Enter description text
+    const descriptionText = 'Adding text for description test';
+    cy.get('#description').type(descriptionText);
+
+    // Confirm
+    cy.get('.btn-confirm').click();
+
+    //Open measurements menu
+    cy.get('@measurementsBtn').click();
+
+    // Verify if label was added
+    cy.get('.measurementLocation')
+      .should('contain.text', 'Brain')
+      .log('Relabel added with success');
+
+    //Verify if descriptionText was added
+    cy.get('.measurementLocation')
+      .should('contain.text', descriptionText)
+      .log('Description added with success');
+
+    // Close panel
+    cy.get('@measurementsBtn').click();
+    cy.get('@measurementsPanel').should('not.be.enabled');
+  });
+
+  it('scrolls series stack using scrollbar', function() {
+    // Workaround implemented based on Cypress issue:
+    // https://github.com/cypress-io/cypress/issues/1570#issuecomment-450966053
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype,
+      'value'
+    ).set;
+
+    cy.get('input.imageSlider[type=range]').then($range => {
+      // get the DOM node
+      const range = $range[0];
+      // set the value manually
+      nativeInputValueSetter.call(range, 13);
+      // now dispatch the event
+      range.dispatchEvent(new Event('change', { value: 13, bubbles: true }));
+    });
+
+    const expectedText = 'Img: 13 13/13';
+    cy.get('@viewportInfoBottomLeft').should('contains.text', expectedText);
+  });
+
+  //TO-DO: this test is blocked due to issue #1072: https://github.com/OHIF/Viewers/issues/1072
+  // Uncomment this once #1072 is fixed.
+  // it('performs single-click to load thumbnail in active viewport', () => {
+  //   cy.get('[data-cy="thumbnail-list"]:nth-child(3)').click();
+
+  //   const expectedText = 'Ser 3';
+  //   cy.get('@viewportInfoBottomLeft').should('contains.text', expectedText);
+  // });
+
+  it('performs right click to zoom', function() {
+    //Right click on viewport
+    cy.get('@viewport')
+      .trigger('mousedown', 'top', { which: 3 })
+      .trigger('mousemove', 'center', { which: 3 })
+      .trigger('mouseup');
+
+    const expectedText = 'Zoom: 442%';
+    cy.get('@viewportInfoBottomRight').should('contains.text', expectedText);
+  });
+
+  it('performs middle click to pan', function() {
+    //Get image position from cornerstone and check if y axis was modified
+    let cornerstone;
+    let currentPan;
+
+    // TO DO: Replace the cornerstone pan check by Percy snapshop comparison
+    cy.window()
+      .its('cornerstone')
+      .then(c => {
+        cornerstone = c;
+        currentPan = () =>
+          cornerstone.getEnabledElements()[0].viewport.translation;
+      });
+
+    //pan image with middle click
+    cy.get('@viewport')
+      .trigger('mousedown', 'center', { which: 2 })
+      .trigger('mousemove', 'bottom', { which: 2 })
+      .trigger('mouseup', 'bottom')
+      .then(() => {
+        expect(currentPan().y > 0).to.eq(true);
+      });
+  });
+
+  it('opens About modal and verify the displayed information', function() {
+    cy.get('[data-cy="options-menu"]').click();
+    cy.get('[data-cy="about-item-menu"]').click();
+    cy.get('.modal-content')
+      .as('aboutOverlay')
+      .should('be.visible');
+
+    //check buttons and links
+    cy.get('[data-cy="about-modal"]')
+      .should('contains.text', 'Visit the forum')
+      .and('contains.text', 'Report an issue')
+      .and('contains.text', 'https://github.com/OHIF/Viewers/');
+
+    //check version number
+    cy.get('[data-cy="about-modal"]').then($modal => {
+      cy.get('[data-cy="header-version-info"]').should($headerVersionNumber => {
+        $headerVersionNumber = $headerVersionNumber.text().substring(1);
+        expect($modal).to.contain($headerVersionNumber);
+      });
+    });
+
+    //close modal
+    cy.get('.close').click();
+    cy.get('@aboutOverlay').should('not.be.enabled');
+  });
 });

platform/viewer/cypress/integration/common/ViewerRouting.spec.js

@@ -2,7 +2,9 @@ describe('ViewerRouting', () => {
   beforeEach(() => {
     cy.visit('/');
     cy.contains('Study List');
-    cy.get('#studyListData > :nth-child(1) > .patientId').click();
+    cy.get(
+      '[data-cy="study-list-results"]> :nth-child(1) > .patientId'
+    ).click();
   });
 
   // it('thumbnails list has more than 2 items', () => {

platform/viewer/cypress/integration/pwa/OHIFExtensionHTML.spec.js

@@ -0,0 +1,44 @@
+describe('OHIF HTML Extension', () => {
+  before(() => {
+    cy.openStudy('Dummy');
+    cy.expectMinimumThumbnails(5);
+  });
+
+  it('checks if series thumbnails are being displayed', () => {
+    cy.get('[data-cy="thumbnail-list"]')
+      .contains('SR')
+      .its('length')
+      .should('to.be.at.least', 1);
+  });
+
+  it('drags and drop a SR thumbnail into viewport', () => {
+    cy.get('[data-cy="thumbnail-list"]')
+      .contains('SR')
+      .first()
+      .drag('.viewport-drop-target');
+
+    cy.get(':nth-child(2) > h1').should(
+      'contain.text',
+      'Imaging Measurement Report'
+    );
+  });
+
+  it('checks if the HTML viewport has been set to active by interaction', () => {
+    cy.setLayout('3', '3');
+
+    // check if viewport has been set as active by CLICKING
+    cy.get('[data-cy=viewprt-grid] > :nth-child(4)')
+      .click()
+      .then($viewport => {
+        cy.wrap($viewport).should('have.class', 'active');
+      });
+
+    // check if viewport has been set as active by SCROLLING
+    cy.get('[data-cy=viewprt-grid] > :nth-child(7)').then($viewport => {
+      cy.wrap($viewport)
+        .find('[data-cy=dicom-html-viewport]')
+        .scrollTo('bottom');
+      cy.wrap($viewport).should('have.class', 'active');
+    });
+  });
+});

platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js

@@ -0,0 +1,26 @@
+describe('OHIF Microscopy Extension', () => {
+  before(() => {
+    cy.openStudyModality('SM');
+    cy.expectMinimumThumbnails(6);
+  });
+
+  it('checks if series thumbnails are being displayed', () => {
+    cy.get('[data-cy="thumbnail-list"]')
+      .contains('SM')
+      .its('length')
+      .should('to.be.at.least', 1);
+  });
+
+  it('drags and drop a SM thumbnail into viewport', () => {
+    cy.get('[data-cy="thumbnail-list"]')
+      .contains('SM')
+      .drag('.viewport-drop-target');
+
+    cy.get('.DicomMicroscopyViewer')
+      .its('length')
+      .should('be.eq', 1);
+
+    cy.wait(3000); //Waiting for image to render before taking the snapshot
+    cy.percyCanvasSnapshot('Microscopy Extension');
+  });
+});

platform/viewer/cypress/integration/pwa/OHIFExtensionPDF.spec.js

@@ -0,0 +1,27 @@
+describe('OHIF PDF Extension', () => {
+  before(() => {
+    cy.openStudy('Dummy');
+    cy.expectMinimumThumbnails(6);
+  });
+
+  it('checks if series thumbnails are being displayed', () => {
+    cy.get('[data-cy="thumbnail-list"]')
+      .contains('DOC')
+      .its('length')
+      .should('to.be.at.least', 1);
+  });
+
+  it('drags and drop a PDF thumbnail into viewport', () => {
+    cy.get('[data-cy="thumbnail-list"]')
+      .contains('DOC')
+      .drag('.viewport-drop-target');
+
+    cy.get('.DicomPDFViewport')
+      .its('length')
+      .should('be.eq', 1);
+
+    // This won't work unless we switch to an extension that renders using `canvas`
+    // Currently, we rely on the browser's built-in implementation
+    cy.percyCanvasSnapshot('PDF Extension');
+  });
+});

platform/viewer/cypress/integration/pwa/OHIFExtensionVTK.spec.js

@@ -0,0 +1,63 @@
+describe('OHIF VTK Extension', () => {
+  before(() => {
+    cy.openStudy('Juno');
+    cy.waitDicomImage();
+    cy.expectMinimumThumbnails(7);
+  });
+
+  beforeEach(() => {
+    // TODO: We shouldn't have to drag the thumbnail
+    // This is a known bug; 2D MPR button does not show until viewport
+    // has data from a drag-n-drop
+    // Drag and drop first thumbnail into first viewport
+    cy.get('[data-cy="thumbnail-list"]:nth-child(3)').drag(
+      '.viewport-drop-target'
+    );
+
+    cy.get('.PluginSwitch > .toolbar-button')
+      .as('twodmprBtn')
+      .should('be.visible')
+      .then(btn => {
+        if (!btn.text().includes('Exit')) {
+          btn.click();
+        }
+      });
+
+    cy.initVTKToolsAliases();
+  });
+
+  it('checks if VTK buttons are displayed on the toolbar', () => {
+    // Wait for start reformatting
+    cy.get('[data-cy="viewprt-grid"]', { timeout: 10000 }).should($grid => {
+      expect($grid).to.contain.text('Reform');
+    });
+
+    // Wait for finish reformatting
+    cy.get('[data-cy="viewprt-grid"]', { timeout: 30000 }).should($grid => {
+      expect($grid).not.to.contain.text('Reform');
+    });
+
+    cy.get('@crosshairsBtn')
+      .should('be.visible')
+      .contains('Crosshairs');
+    cy.get('@wwwcBtn')
+      .should('be.visible')
+      .contains('WWWC');
+    cy.get('@rotateBtn')
+      .should('be.visible')
+      .contains('Rotate');
+    cy.get('@slabSlider')
+      .should('be.visible')
+      .contains('Slab Thickness');
+    cy.get('@modeDropdown')
+      .should('be.visible')
+      .contains('MIP');
+    cy.get('@modeCheckbox').should('be.visible');
+    cy.get('@layoutBtn')
+      .should('be.visible')
+      .contains('Layout');
+
+    cy.wait(3000);
+    cy.percyCanvasSnapshot('VTK Extension');
+  });
+});

platform/viewer/cypress/plugins/index.js

@@ -23,6 +23,12 @@ module.exports = (on, config) => {
       // whatever you return here becomes the new args
       return args;
     }
+
+    if (browser.name === 'chromium') {
+      const newArgs = args.filter(arg => arg !== '--disable-gpu');
+      newArgs.push('--ignore-gpu-blacklist');
+      return newArgs;
+    }
   });
 
   on('task', percyHealthCheck);

platform/viewer/cypress/support/aliases.js

@@ -30,4 +30,25 @@ export function initCommonElementsAliases() {
   cy.get('div.ViewportOverlay > div.bottom-right.overlay-element > div').as(
     'viewportInfoBottomRight'
   );
+  cy.get('.left-mid.orientation-marker').as('viewportInfoMidLeft');
+  cy.get('.top-mid.orientation-marker').as('viewportInfoMidTop');
+}
+
+//Creating aliases for Routes
+export function initRouteAliases() {
+  cy.server();
+  cy.route('GET', '**/series**').as('getStudySeries');
+  cy.route('GET', '**/studies**').as('getStudies');
+}
+
+//Creating aliases for VTK tools buttons
+export function initVTKToolsAliases() {
+  cy.get('.PluginSwitch > .toolbar-button').as('twodmprBtn');
+  cy.get('.ToolbarRow > :nth-child(2)').as('crosshairsBtn');
+  cy.get('.ToolbarRow > :nth-child(3)').as('wwwcBtn');
+  cy.get('.ToolbarRow > :nth-child(4)').as('rotateBtn');
+  cy.get('.slab-thickness').as('slabSlider');
+  cy.get('.select-ohif').as('modeDropdown');
+  cy.get('.ohif-check-label').as('modeCheckbox');
+  cy.get('.btn-group > .toolbar-button').as('layoutBtn');
 }

platform/viewer/cypress/support/commands.js

@@ -3,6 +3,8 @@ import { DragSimulator } from '../helpers/DragSimulator.js';
 import {
   initCornerstoneToolsAliases,
   initCommonElementsAliases,
+  initRouteAliases,
+  initVTKToolsAliases,
 } from './aliases.js';
 
 // ***********************************************
@@ -37,14 +39,47 @@ import {
  * @param {string} PatientName - Patient name that we would like to search for
  */
 Cypress.Commands.add('openStudy', patientName => {
-  cy.visit('/');
-  cy.get('#patientName').type(patientName);
+  cy.openStudyList();
+  cy.get('#filter-patientNameOrId').type(patientName);
+  cy.wait('@getStudies');
+  cy.get('[data-cy="study-list-results"]', { timeout: 5000 })
+    .contains(patientName)
+    .first()
+    .click({ force: true });
+});
 
-  cy.get('.studylistStudy > .patientName')
-    .as('patientResult')
-    .then({ timeout: 5000 }, $patientResult => {
-      cy.contains(patientName).click();
-    });
+/**
+ * Command to search for a modality and open the study.
+ *
+ * @param {string} modality - Modality type that we would like to search for
+ */
+Cypress.Commands.add('openStudyModality', modality => {
+  cy.initRouteAliases();
+  cy.visit('/');
+
+  cy.get('#filter-accessionOrModalityOrDescription')
+    .type(modality)
+    .wait(2000);
+
+  cy.get('[data-cy="study-list-results"]')
+    .contains(modality)
+    .first()
+    .click();
+});
+
+/**
+ * Command to wait and check if a new page was loaded
+ *
+ * @param {string} url - part of the expected url. Default value is /viewer/
+ */
+Cypress.Commands.add('isPageLoaded', (url = '/viewer/') => {
+  return cy.location('pathname', { timeout: 60000 }).should('include', url);
+});
+
+Cypress.Commands.add('openStudyList', patientName => {
+  cy.initRouteAliases();
+  cy.visit('/');
+  cy.wait('@getStudies');
 });
 
 /**
@@ -104,39 +139,49 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add('expectMinimumThumbnails', (seriesToWait = 1) => {
+  cy.get('[data-cy=thumbnail-list]', { timeout: 10000 }).should($itemList => {
+    expect($itemList.length >= seriesToWait).to.be.true;
+  });
+});
+
 //Command to wait DICOM image to load into the viewport
 Cypress.Commands.add('waitDicomImage', (timeout = 20000) => {
-  cy.window()
-    .its('cornerstone')
-    .then({ timeout }, $cornerstone => {
-      return new Cypress.Promise(resolve => {
-        const onEvent = renderedEvt => {
-          const element = renderedEvt.detail.element;
+  const loaded = cy.isPageLoaded();
 
-          element.removeEventListener('cornerstoneimagerendered', onEvent);
-          $cornerstone.events.removeEventListener(
-            'cornerstoneimagerendered',
-            onEvent
+  if (loaded) {
+    cy.window()
+      .its('cornerstone')
+      .then({ timeout }, $cornerstone => {
+        return new Cypress.Promise(resolve => {
+          const onEvent = renderedEvt => {
+            const element = renderedEvt.detail.element;
+
+            element.removeEventListener('cornerstoneimagerendered', onEvent);
+            $cornerstone.events.removeEventListener(
+              'cornerstoneimagerendered',
+              onEvent
+            );
+            resolve();
+          };
+          const onEnabled = enabledEvt => {
+            const element = enabledEvt.detail.element;
+
+            element.addEventListener('cornerstoneimagerendered', onEvent);
+          };
+          $cornerstone.events.addEventListener(
+            'cornerstoneelementenabled',
+            onEnabled
           );
-          resolve();
-        };
-        const onEnabled = enabledEvt => {
-          const element = enabledEvt.detail.element;
-
-          element.addEventListener('cornerstoneimagerendered', onEvent);
-        };
-        $cornerstone.events.addEventListener(
-          'cornerstoneelementenabled',
-          onEnabled
-        );
+        });
       });
-    });
+  }
 });
 
 //Command to reset and clear all the changes made to the viewport
 Cypress.Commands.add('resetViewport', () => {
   cy.initCornerstoneToolsAliases();
-  cy.get('@resetBtn').click();
+
   //Click on More button
   cy.get('@moreBtn').click();
   //Verify if overlay is displayed
@@ -149,6 +194,8 @@ Cypress.Commands.add('resetViewport', () => {
   cy.get('.tooltip-inner > :nth-child(10)')
     .as('clearBtn')
     .click();
+  //Click on Reset button
+  cy.get('@resetBtn').click();
 });
 
 Cypress.Commands.add('imageZoomIn', () => {
@@ -183,21 +230,153 @@ Cypress.Commands.add('initCommonElementsAliases', () => {
   initCommonElementsAliases();
 });
 
-//Add measurements in the viewport
-Cypress.Commands.add('addLengthMeasurement', () => {
-  cy.initCornerstoneToolsAliases();
-  cy.get('@lengthBtn').click();
-  const firstClick = [150, 100];
-  const secondClick = [130, 170];
-  cy.addLine('.cornerstone-canvas', firstClick, secondClick);
+//Initialize aliases for Routes
+Cypress.Commands.add('initRouteAliases', () => {
+  initRouteAliases();
+});
+
+//Initialize aliases for VTK tools
+Cypress.Commands.add('initVTKToolsAliases', () => {
+  initVTKToolsAliases();
 });
 
 //Add measurements in the viewport
-Cypress.Commands.add('addAngleMeasurement', () => {
-  cy.initCornerstoneToolsAliases();
-  cy.get('@angleBtn').click();
-  const initPos = [180, 390];
-  const midPos = [300, 410];
-  const finalPos = [180, 450];
-  cy.addAngle('.cornerstone-canvas', initPos, midPos, finalPos);
+Cypress.Commands.add(
+  'addLengthMeasurement',
+  (firstClick = [150, 100], secondClick = [130, 170]) => {
+    cy.initCornerstoneToolsAliases();
+    cy.get('@lengthBtn').click();
+    cy.addLine('@viewport', firstClick, secondClick);
+  }
+);
+
+//Add measurements in the viewport
+Cypress.Commands.add(
+  'addAngleMeasurement',
+  (initPos = [180, 390], midPos = [300, 410], finalPos = [180, 450]) => {
+    cy.initCornerstoneToolsAliases();
+    cy.get('@angleBtn').click();
+    cy.addAngle('@viewport', initPos, midPos, finalPos);
+  }
+);
+
+/**
+ * Tests if element is NOT in viewport, or does not exist in DOM
+ *
+ * @param {string} element - element selector string or alias
+ * @returns
+ */
+Cypress.Commands.add('isNotInViewport', element => {
+  cy.get(element, { timeout: 3000 }).should($el => {
+    const bottom = Cypress.$(cy.state('window')).height() - 50;
+    const right = Cypress.$(cy.state('window')).width() - 50;
+
+    // If it's not visible, it's not in the viewport
+    if ($el) {
+      const rect = $el[0].getBoundingClientRect();
+
+      // TODO: support leftOf, above
+      const isBeneath = rect.top >= bottom && rect.bottom >= bottom;
+      const isRightOf = rect.left >= right && rect.right >= right;
+      const isNotInViewport = isBeneath && isRightOf;
+
+      expect(isNotInViewport).to.be.true;
+    }
+  });
 });
+
+/**
+ * Tests if element is in viewport, or it does exist in DOM
+ *
+ * @param {string} element - element selector string or alias
+ * @returns
+ */
+Cypress.Commands.add('isInViewport', element => {
+  cy.get(element, { timeout: 3000 }).should($el => {
+    const bottom = Cypress.$(cy.state('window')).height();
+    const right = Cypress.$(cy.state('window')).width();
+
+    // If it's not visible, it's not in the viewport
+    if ($el) {
+      const rect = $el[0].getBoundingClientRect();
+
+      // TODO: support leftOf, above
+      const isBeneath = rect.top < bottom && rect.bottom < bottom;
+      const isRightOf = rect.left < right && rect.right < right;
+      const isInViewport = isBeneath && isRightOf;
+
+      expect(isInViewport).to.be.true;
+    }
+  });
+});
+
+/**
+ * Percy.io Canvas screenshot workaround
+ *
+ */
+Cypress.Commands.add('percyCanvasSnapshot', (name, options = {}) => {
+  cy.document().then(doc => {
+    convertCanvas(doc);
+  });
+
+  // `domTransformation` does not appear to be working
+  // But modifying our immediate DOM does.
+  cy.percySnapshot(name, { ...options }); //, domTransformation: convertCanvas });
+
+  cy.document().then(doc => {
+    unconvertCanvas(doc);
+  });
+});
+
+Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => {
+  cy.get('.toolbar-button-label')
+    .contains('Layout')
+    .click();
+
+  cy.get('.layoutChooser')
+    .find('tr')
+    .eq(rows - 1)
+    .find('td')
+    .eq(columns - 1)
+    .click();
+
+  cy.wait(1000);
+});
+
+function convertCanvas(documentClone) {
+  documentClone
+    .querySelectorAll('canvas')
+    .forEach(selector => canvasToImage(selector));
+
+  return documentClone;
+}
+
+function unconvertCanvas(documentClone) {
+  // Remove previously generated images
+  documentClone
+    .querySelectorAll('[data-percy-image]')
+    .forEach(selector => selector.remove());
+  // Restore canvas visibility
+  documentClone.querySelectorAll('[data-percy-canvas]').forEach(selector => {
+    selector.removeAttribute('data-percy-canvas');
+    selector.style = '';
+  });
+}
+
+function canvasToImage(selectorOrEl) {
+  let canvas =
+    typeof selectorOrEl === 'object'
+      ? selectorOrEl
+      : document.querySelector(selectorOrEl);
+  let image = document.createElement('img');
+  let canvasImageBase64 = canvas.toDataURL('image/png');
+
+  // Show Image
+  image.src = canvasImageBase64;
+  image.style = 'width: 100%';
+  image.setAttribute('data-percy-image', true);
+  // Hide Canvas
+  canvas.setAttribute('data-percy-canvas', true);
+  canvas.parentElement.appendChild(image);
+  canvas.style = 'display: none';
+}

platform/viewer/cypress/support/index.js

@@ -13,8 +13,23 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.js using ES2015 syntax:
 import './commands';
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+Cypress.on('window:before:load', window => {
+  // Override our `getContext` function so all contexts that are webGl are
+  // Created with `preserveDrawingBuffer = true`; this is required for percy
+  // Snapshot
+  window.HTMLCanvasElement.prototype.getContext = (function(oldGetContextFn) {
+    return function(type, attrs) {
+      attrs = attrs || {};
+      if (
+        type === 'webgl' ||
+        type === 'webgl2' ||
+        type === 'experimental-webgl'
+      ) {
+        attrs.preserveDrawingBuffer = true;
+      }
+      return oldGetContextFn.apply(this, [type, attrs]);
+    };
+  })(HTMLCanvasElement.prototype.getContext);
+});

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "1.10.0",
+  "version": "2.3.2",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "dev:viewer": "yarn run dev",
     "start": "yarn run dev",
     "test:e2e": "cypress open",
-    "test:e2e:ci": "percy exec -- cypress run",
+    "test:e2e:ci": "percy exec -- cypress run --browser chrome",
     "test:e2e:dist": "start-server-and-test test:e2e:serve http://localhost:3000 test:e2e:ci",
     "test:e2e:serve": "serve -n -l 3000 -s dist",
     "test:unit": "jest --watchAll",
@@ -45,14 +45,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^1.4.0",
+    "@ohif/core": "^1.6.0",
     "@ohif/extension-cornerstone": "^2.0.0",
-    "@ohif/extension-dicom-html": "^1.0.0",
+    "@ohif/extension-dicom-html": "^1.0.1",
     "@ohif/extension-dicom-microscopy": "^0.50.6",
     "@ohif/extension-dicom-pdf": "^1.0.0",
-    "@ohif/extension-vtk": "^0.52.11",
+    "@ohif/extension-vtk": "^0.52.25",
     "@ohif/i18n": "^0.51.0",
-    "@ohif/ui": "^0.55.0",
+    "@ohif/ui": "^0.58.2",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",
@@ -82,7 +82,7 @@
     "redux-oidc": "3.1.x",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
-    "vtk.js": "^11.0.1"
+    "vtk.js": "^11.7.2"
   },
   "devDependencies": {
     "cypress": "^3.3.1",