chore(release): publish [skip ci]

- @ohif/extension-vtk@0.52.27
 - @ohif/core@1.6.1
 - @ohif/ui@0.58.4
 - @ohif/viewer@2.3.5

.eslintrc.json

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

.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": {}
 }

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}, #${
+  const patientValue = `${data.PatientName} (${data.PatientSex}, #${data.PatientID})`;
-    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} (${
+  const manufacturerValue = `${data.Manufacturer} (${data.ManufacturerModelName}, #${data.DeviceSerialNumber})`;
-    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'}>
+      <div
-        {this.state.content}
+        data-cy="dicom-html-viewport"
-        {this.state.error && <h2>{JSON.stringify(this.state.error)}</h2>}
+        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,125 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.52.27](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.26...@ohif/extension-vtk@0.52.27) (2019-10-31)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.26](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.25...@ohif/extension-vtk@0.52.26) (2019-10-30)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [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

extensions/vtk/package.json

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

extensions/vtk/src/OHIFVTKViewport.js

@@ -213,6 +213,10 @@ class OHIFVTKViewport extends Component {
 
     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;

extensions/vtk/src/commandsModule.js

@@ -9,6 +9,7 @@ import {
 import setMPRLayout from './utils/setMPRLayout.js';
 import setViewportToVTK from './utils/setViewportToVTK.js';
 import Constants from 'vtk.js/Sources/Rendering/Core/VolumeMapper/Constants.js';
+import throttle from 'lodash.throttle';
 
 const { BlendMode } = Constants;
 
@@ -102,15 +103,23 @@ const actions = {
     });
   },
   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();
-
-          api.updateVOI(windowWidth, windowCenter);
         });
+
+        throttledUpdateVOIs(apis, 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>
   );

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,61 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.6.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.6.0...@ohif/core@1.6.1) (2019-10-31)
+
+
+### Bug Fixes
+
+* application crash if patientName is an object ([#1138](https://github.com/OHIF/Viewers/issues/1138)) ([64cf3b3](https://github.com/OHIF/Viewers/commit/64cf3b324da2383a927af1df2d46db2fca5318aa))
+
+
+
+
+
+# [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.1",
   "description": "Generic business logic for web-based medical imaging applications",
   "author": "OHIF Core Team",
   "license": "MIT",

platform/core/src/DICOMWeb/getModalities.js

@@ -1,11 +1,14 @@
 export default function getModalities(modality, modalitiesInStudy) {
-  let modalities = {};
+  if (!modality && !modalitiesInStudy) {
-  if (modality) {
+    return {};
-    modalities = modality;
   }
 
+  const modalities = modality || {
+    vr: 'CS',
+    Value: [],
+  };
+
   if (modalitiesInStudy) {
-    // Find vr in modalities
     if (modalities.vr && modalities.vr === modalitiesInStudy.vr) {
       for (let i = 0; i < modalitiesInStudy.Value.length; i++) {
         const value = modalitiesInStudy.Value[i];
@@ -14,8 +17,9 @@ export default function getModalities(modality, modalitiesInStudy) {
         }
       }
     } else {
-      modalities = modalitiesInStudy;
+      return modalitiesInStudy;
     }
   }
+
   return modalities;
 }

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]) || {};
+      const { dom } = state.viewportSpecificData[viewportIndex];
-      viewportSpecificData = cloneDeep(state.viewportSpecificData);
-      viewportSpecificData[viewportIndex] = merge({}, currentData, action.data);
 
-      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/studies/services/qido/studies.js

@@ -30,7 +30,7 @@ function dateToString(date) {
 function getQIDOQueryParams(filter, serverSupportsQIDOIncludeField) {
   const commaSeparatedFields = [
     '00081030', // Study Description
-    '00080060', //Modality
+    '00080060', // Modality
     // Add more fields here if you want them in the result
   ].join(',');
 

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,
+  isValidPath,
-  replaceParam: replaceParam,
+  parseParam,
+  replaceParam,
 };
 
 export { parse, queryString, paramString };

platform/ui/CHANGELOG.md

@@ -3,6 +3,91 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.58.4](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.3...@ohif/ui@0.58.4) (2019-10-31)
+
+
+### Bug Fixes
+
+* application crash if patientName is an object ([#1138](https://github.com/OHIF/Viewers/issues/1138)) ([64cf3b3](https://github.com/OHIF/Viewers/commit/64cf3b324da2383a927af1df2d46db2fca5318aa))
+
+
+
+
+
+## [0.58.3](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.2...@ohif/ui@0.58.3) (2019-10-30)
+
+
+### Bug Fixes
+
+* 🐛 Fix ghost shadow on thumb ([#1113](https://github.com/OHIF/Viewers/issues/1113)) ([caaa032](https://github.com/OHIF/Viewers/commit/caaa032c4bc24fd69fdb01a15a8feb2721c321db))
+
+
+
+
+
+## [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)
 
 

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "0.56.0",
+  "version": "0.58.4",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -48,10 +48,10 @@
     "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": "9.4.0",
-    "react-dnd-html5-backend": "^9.3.4",
+    "react-dnd-html5-backend": "^9.4.0",
-    "react-dnd-touch-backend": "^9.3.4",
+    "react-dnd-touch-backend": "^9.4.0",
     "react-i18next": "^10.11.0",
     "react-with-direction": "1.3.0"
   },

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

@@ -1,4 +1,4 @@
-import { StudyBrowser, ThumbnailEntry } from './studyBrowser';
+import { StudyBrowser, Thumbnail } from './studyBrowser';
 import { LayoutButton, LayoutChooser } from './layoutButton';
 import { MeasurementTable, MeasurementTableItem } from './measurementTable';
 import { Overlay, OverlayTrigger } from './overlayTrigger';
@@ -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,13 +37,16 @@ export {
   OverlayTrigger,
   QuickSwitch,
   RoundedButtonGroup,
+  PageToolbar,
   SelectTree,
   SimpleDialog,
   StudyBrowser,
   StudyList,
   TableList,
   TableListItem,
-  ThumbnailEntry,
+  Thumbnail,
+  TableSearchFilter,
+  TablePagination,
   ToolbarSection,
   Tooltip,
   AboutModal,

platform/ui/src/components/quickSwitch/QuickSwitch.styl

@@ -45,7 +45,7 @@
       .thumbnails-wrapper
         transform-origin: 0% 0%
 
-      .ThumbnailEntry
+      .thumbnail
         float: left
 
     .series-item
@@ -98,7 +98,7 @@
       transition: transform 0.3s ease
       transform-origin: 100% 0%
 
-    .ThumbnailEntry
+    .thumbnail
       float: right
 
       .series-details
@@ -179,7 +179,7 @@
     .thumbnails-wrapper
       transform: scale(1) translateY(0)
 
-    .ThumbnailEntry .series-details
+    .thumbnail .series-details
       opacity: 1
       transform: translateY(0)
       transition-delay: 0.3s

platform/ui/src/components/quickSwitch/SeriesList.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import { ThumbnailEntry } from './../studyBrowser';
+import { Thumbnail } from './../studyBrowser';
 import './SeriesList.styl';
 
 export class SeriesList extends Component {
@@ -24,7 +24,7 @@ export class SeriesList extends Component {
   getSeriesItems = () => {
     return this.props.seriesItems.map((seriesData, index) => {
       return (
-        <ThumbnailEntry
+        <Thumbnail
           key={seriesData.displaySetInstanceUid}
           id={`series_thumb_${index}`}
           {...seriesData}

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

@@ -1,85 +0,0 @@
-import React, { PureComponent, memo } from 'react';
-import { DragLayer } from 'react-dnd';
-import PropTypes from 'prop-types';
-import { ThumbnailEntry } from './ThumbnailEntry';
-import './DragPreview.styl';
-
-let subscribedToOffsetChange = false;
-let dragPreviewRef = null;
-
-const collector = monitor => {
-  if (!subscribedToOffsetChange) {
-    monitor.subscribeToOffsetChange(onOffsetChange(monitor));
-    subscribedToOffsetChange = true;
-  }
-
-  if (dragPreviewRef) {
-    const offset =
-      monitor.getSourceClientOffset() || monitor.getInitialSourceClientOffset();
-
-    if (offset) {
-      const transform = `translate(${offset.x}px, ${offset.y}px)`;
-      dragPreviewRef.style['transform'] = transform;
-      dragPreviewRef.style['-webkit-transform'] = transform;
-    }
-  }
-
-  const item = monitor.getItem();
-  let newItem = {};
-  if (item) {
-    newItem = {
-      active: item.active,
-      altImageText: item.altImageText,
-      id: item.id,
-      imageSrc: item.imageSrc,
-      imageId: item.imageId,
-      instanceNumber: item.instanceNumber,
-      error: item.error,
-      numImageFrames: item.numImageFrames,
-      seriesDescription: item.seriesDescription,
-      seriesNumber: item.seriesNumber,
-      stackPercentComplete: item.stackPercentComplete,
-    };
-  }
-
-  return {
-    ...newItem,
-    isDragging: monitor.isDragging(),
-  };
-};
-
-const onOffsetChange = monitor => () => {
-  if (!dragPreviewRef) return;
-
-  const offset =
-    monitor.getSourceClientOffset() || monitor.getInitialSourceClientOffset();
-  if (!offset) return;
-
-  const transform = `translate(${offset.x}px, ${offset.y}px)`;
-  dragPreviewRef.style['transform'] = transform;
-  dragPreviewRef.style['-webkit-transform'] = transform;
-};
-
-const updateRef = ref => {
-  dragPreviewRef = ref;
-};
-
-class DragPreview extends PureComponent {
-  render() {
-    const { isDragging } = this.props;
-    if (!isDragging) return null;
-    return (
-      <div className="DragPreview">
-        <div className="source-preview" ref={updateRef}>
-          <ThumbnailEntry {...this.props} />
-        </div>
-      </div>
-    );
-  }
-}
-
-DragPreview.propTypes = {
-  isDragging: PropTypes.bool,
-};
-
-export default DragLayer(collector)(memo(DragPreview));

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

@@ -1,14 +0,0 @@
-.DragPreview
-
-  .source-preview {
-    border-radius: 5px;
-    background-color: rgba(0, 0, 0, 0.5);
-    position: fixed;
-    opacity: 0.5;
-    z-index: 9999;
-    left: 0;
-    top: 0;
-    transition: none;
-    pointer-events: none;
-    -webkit-touch-callout: none;
-  }

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

@@ -1,62 +1,103 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { ThumbnailEntry } from './ThumbnailEntry';
+import { Thumbnail } from './Thumbnail.js';
-import ThumbnailEntryDragSource from './ThumbnailEntryDragSource.js';
 import './StudyBrowser.styl';
 
-class StudyBrowser extends Component {
+function StudyBrowser(props) {
-  static defaultProps = {
+  const {
-    studies: [],
+    studies,
-    supportsDragAndDrop: true,
+    onThumbnailClick,
-  };
+    onThumbnailDoubleClick,
+    supportsDrag,
+  } = props;
 
-  static propTypes = {
+  return (
-    studies: PropTypes.array.isRequired,
+    <div className="study-browser">
-    supportsDragAndDrop: PropTypes.bool.isRequired,
+      <div className="scrollable-study-thumbnails">
-    onThumbnailClick: PropTypes.func,
+        {studies
-    onThumbnailDoubleClick: PropTypes.func,
+          .map((study, studyIndex) => {
-  };
+            const { studyInstanceUid } = study;
+            return study.thumbnails.map((thumb, thumbIndex) => {
+              // TODO: Thumb has more props than we care about?
+              const {
+                altImageText,
+                displaySetInstanceUid,
+                imageId,
+                instanceNumber,
+                numImageFrames,
+                seriesDescription,
+                seriesNumber,
+                stackPercentComplete,
+              } = thumb;
 
-  render() {
+              return (
-    const studies = this.props.studies;
+                <div
-
+                  key={`container_${studyIndex}_${thumbIndex}`}
-    const thumbnails = studies.map((study, studyIndex) => {
+                  className="thumbnail-container"
-      return study.thumbnails.map((thumb, thumbIndex) => {
+                  data-cy="thumbnail-list"
-        if (this.props.supportsDragAndDrop) {
+                >
-          return (
+                  <Thumbnail
-            <ThumbnailEntryDragSource
+                    supportsDrag={supportsDrag}
-              key={thumb.displaySetInstanceUid}
+                    key={`${studyIndex}_${thumbIndex}`}
-              {...study}
+                    id={`${studyIndex}_${thumbIndex}`} // Unused?
-              {...thumb}
+                    // Study
-              id={`${studyIndex}_${thumbIndex}`}
+                    studyInstanceUid={studyInstanceUid} // used by drop
-              onClick={this.props.onThumbnailClick}
+                    // Thumb
-              onDoubleClick={this.props.onThumbnailDoubleClick}
+                    altImageText={altImageText}
-            />
+                    imageId={imageId}
-          );
+                    instanceNumber={instanceNumber}
-        } else {
+                    displaySetInstanceUid={displaySetInstanceUid} // used by drop
-          return (
+                    numImageFrames={numImageFrames}
-            <div className="ThumbnailEntryContainer" data-cy="thumbnail-list">
+                    seriesDescription={seriesDescription}
-              <ThumbnailEntry
+                    seriesNumber={seriesNumber}
-                key={thumb.displaySetInstanceUid}
+                    stackPercentComplete={stackPercentComplete}
-                {...study}
+                    // Events
-                {...thumb}
+                    onClick={onThumbnailClick.bind(
-                id={`${studyIndex}_${thumbIndex}`}
+                      undefined,
-                onClick={this.props.onThumbnailClick}
+                      displaySetInstanceUid
-                onDoubleClick={this.props.onThumbnailDoubleClick}
+                    )}
-              />
+                    onDoubleClick={onThumbnailDoubleClick}
-            </div>
+                  />
-          );
+                </div>
-        }
+              );
-      });
+            });
-    });
+          })
-
+          .flat()}
-    const components = thumbnails.flat();
-    return (
-      <div className="StudyBrowser">
-        <div className="scrollable-study-thumbnails">{components}</div>
       </div>
-    );
+    </div>
-  }
+  );
 }
 
+const noop = () => {};
+
+StudyBrowser.propTypes = {
+  studies: PropTypes.arrayOf(
+    PropTypes.shape({
+      studyInstanceUid: PropTypes.string.isRequired,
+      thumbnails: PropTypes.arrayOf(
+        PropTypes.shape({
+          altImageText: PropTypes.string,
+          displaySetInstanceUid: PropTypes.string.isRequired,
+          imageId: PropTypes.string,
+          instanceNumber: PropTypes.number,
+          numImageFrames: PropTypes.number,
+          seriesDescription: PropTypes.string,
+          seriesNumber: PropTypes.number,
+          stackPercentComplete: PropTypes.number,
+        })
+      ),
+    })
+  ).isRequired,
+  supportsDrag: PropTypes.bool,
+  onThumbnailClick: PropTypes.func,
+  onThumbnailDoubleClick: PropTypes.func,
+};
+
+StudyBrowser.defaultProps = {
+  studies: [],
+  supportsDrag: true,
+  onThumbnailClick: noop,
+  onThumbnailDoubleClick: noop,
+};
+
 export { StudyBrowser };

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

@@ -1,4 +1,4 @@
-.StudyBrowser
+.study-browser
   float: left
   height: 100%
   width: 100%
@@ -22,7 +22,7 @@
     &::-webkit-scrollbar
       display: none
 
-    .ThumbnailEntryContainer
+    .thumbnail-container
       margin: 0 auto;
       padding-bottom: 1.5rem;
 

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

@@ -0,0 +1,152 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useDrag } from 'react-dnd';
+import ImageThumbnail from './ImageThumbnail';
+import classNames from 'classnames';
+
+import './Thumbnail.styl';
+
+function ThumbnailFooter({
+  seriesDescription,
+  seriesNumber,
+  instanceNumber,
+  numImageFrames,
+}) {
+  const infoOnly = !seriesDescription;
+
+  const getInfo = (value, icon, className = '') => {
+    return (
+      <div className={classNames('item item-series', className)}>
+        <div className="icon">{icon}</div>
+        <div className="value">{value}</div>
+      </div>
+    );
+  };
+  const getSeriesInformation = (
+    seriesNumber,
+    instanceNumber,
+    numImageFrames
+  ) => {
+    if (!seriesNumber && !instanceNumber && !numImageFrames) {
+      return;
+    }
+
+    return (
+      <div className="series-information">
+        {getInfo(seriesNumber, 'S:')}
+        {getInfo(instanceNumber, 'I:')}
+        {getInfo(numImageFrames, '', 'image-frames')}
+      </div>
+    );
+  };
+
+  return (
+    <div className={classNames('series-details', { 'info-only': infoOnly })}>
+      <div className="series-description">{seriesDescription}</div>
+      {getSeriesInformation(seriesNumber, instanceNumber, numImageFrames)}
+    </div>
+  );
+}
+
+function Thumbnail(props) {
+  const {
+    active,
+    altImageText,
+    error,
+    displaySetInstanceUid,
+    imageId,
+    imageSrc,
+    instanceNumber,
+    numImageFrames,
+    seriesDescription,
+    seriesNumber,
+    stackPercentComplete,
+    studyInstanceUid,
+    onClick,
+    onDoubleClick,
+    onMouseDown,
+    supportsDrag,
+  } = props;
+
+  const [collectedProps, drag, dragPreview] = useDrag({
+    // `droppedItem` in `dropTarget`
+    // The only data it will have access to
+    item: {
+      studyInstanceUid,
+      displaySetInstanceUid,
+      type: 'thumbnail', // Has to match `dropTarget`'s type
+    },
+    canDrag: function(monitor) {
+      return supportsDrag;
+    },
+  });
+
+  const hasImage = imageSrc || imageId;
+  const hasAltText = altImageText !== undefined;
+
+  return (
+    <div
+      ref={drag}
+      className={classNames('thumbnail', { active: active })}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onMouseDown={onMouseDown}
+    >
+      {/* SHOW IMAGE */}
+      {hasImage && (
+        <ImageThumbnail
+          imageSrc={imageSrc}
+          imageId={imageId}
+          error={error}
+          stackPercentComplete={stackPercentComplete}
+        />
+      )}
+      {/* SHOW TEXT ALTERNATIVE */}
+      {!hasImage && hasAltText && (
+        <div className={'alt-image-text p-x-1'}>
+          <h1>{altImageText}</h1>
+        </div>
+      )}
+      {ThumbnailFooter(props)}
+    </div>
+  );
+}
+
+const noop = () => {};
+
+Thumbnail.propTypes = {
+  supportsDrag: PropTypes.bool,
+  id: PropTypes.string.isRequired,
+  displaySetInstanceUid: PropTypes.string.isRequired,
+  studyInstanceUid: PropTypes.string.isRequired,
+  imageSrc: PropTypes.string,
+  imageId: PropTypes.string,
+  error: PropTypes.bool,
+  active: PropTypes.bool,
+  stackPercentComplete: PropTypes.number,
+  /**
+  altImageText will be used when no imageId or imageSrc is provided.
+It will be displayed inside the <div>. This is useful when it is difficult
+  to make a preview for a type of DICOM series (e.g. DICOM-SR)
+  */
+  altImageText: PropTypes.string,
+  seriesDescription: PropTypes.string,
+  seriesNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  instanceNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  numImageFrames: PropTypes.number,
+  onDoubleClick: PropTypes.func,
+  onClick: PropTypes.func,
+  onMouseDown: PropTypes.func,
+};
+
+Thumbnail.defaultProps = {
+  supportsDrag: false,
+  active: false,
+  error: false,
+  stackPercentComplete: 0,
+  onDoubleClick: noop,
+  onClick: noop,
+  onMouseDown: noop,
+};
+
+export { Thumbnail };

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

@@ -4,12 +4,12 @@
   --series-count-background-color: #678696;
 }
 
-.ThumbnailEntry
+.thumbnail
   cursor: pointer
   display: table
-
+  margin: 0 auto;
-  .p-x-1
+  min-width: 90%;
-    padding: 0 1rem
+  padding-bottom: 1.5rem;
 
   .alt-image-text
     align-items: center;
@@ -31,6 +31,8 @@
       color: var(--text-primary-color);
 
   .series-details
+    display: flex;
+    flex-direction: column
     color: var(--text-primary-color);
     font-size: 14px
     line-height: 1.3em
@@ -38,64 +40,30 @@
     margin-left: 1rem
     margin-right: 0.5rem
     max-width: 217px
-    min-height: 36px
     position: relative
     word-wrap: break-word
 
-    &.info-only
+    .series-description
-      .series-description
+      flex-grow: 1
-        display: none
-
-      .series-information
-        display: flex
-        flex-grow: 1
-        float: none
-        max-width: none
-        padding-right: 0
-
-        .item
-          flex: 1
-          text-align: center
-
-          .icon, .value
-            display: inline
-            float: none
-            line-height: 25px
 
+    &.info-only .series-description
+      display: none
 
   .series-information
     display: flex
     flex-direction: row
-    align-items: center
+    justify-content: space-between
-
-    .item
-      flex: 1
-      text-align: center
 
     .item-frames .icon
       height: 18px
 
-    .value
+    .item-series.image-frames .icon
-      color: var(--text-secondary-color);
-      display: inline
-      font-size: 12px
-      margin-left: 4px
-      text-overflow: ellipsis
-      white-space: nowrap
-
-    .icon
-      color: var(--active-color);
-      display: inline
-      font-size: 10px
-      font-weight: 900
-      text-align: right
-
-      div
         background-color: var(--series-count-background-color);
         margin-top: 6px
         position: relative
 
         &:after
+          content: ''
           background-color: var(--active-color);
           box-shadow: 1px 1px rgba(0, 0, 0, .115)
           left: -4px
@@ -104,16 +72,27 @@
 
         &
         &:after
-          border: 0px solid var(--series-count-background-color)
           content: ''
+          border: 0px solid var(--series-count-background-color)
           display: inline-block
           height: 11px
           width: 11px
 
-.image-thumbnail-clone
+    .value
-  z-index: 100000
+      color: var(--text-secondary-color);
-  pointer-events: none
+      display: inline-block
+      font-size: 12px
+      margin-left: 4px
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+      width: calc(100% - 15px)
+      vertical-align: middle
 
-  &:hover
+    .icon
-    border-color: var(--hover-color);
+      color: var(--active-color);
-    box-shadow: none
+      display: inline-block
+      font-size: 10px
+      font-weight: 900
+      text-align: right
+      width: 11px

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

@@ -1,114 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ImageThumbnail from './ImageThumbnail';
-import './ThumbnailEntry.styl';
-import classnames from 'classnames';
-
-class ThumbnailEntry extends Component {
-  static defaultProps = {
-    active: false,
-    error: false,
-    stackPercentComplete: 0,
-  };
-
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    imageSrc: PropTypes.string,
-    imageId: PropTypes.string,
-    error: PropTypes.bool.isRequired,
-    active: PropTypes.bool.isRequired,
-    stackPercentComplete: PropTypes.number,
-    /**
-    altImageText will be used when no imageId or imageSrc is provided.
-    It will be displayed inside the <div>. This is useful when it is difficult
-    to make a preview for a type of DICOM series (e.g. DICOM-SR)
-    */
-    altImageText: PropTypes.string,
-    seriesDescription: PropTypes.string,
-    seriesNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    instanceNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    numImageFrames: PropTypes.number,
-    onDoubleClick: PropTypes.func,
-    onClick: PropTypes.func,
-  };
-
-  render() {
-    const hasInstanceNumber = this.props.instanceNumber !== undefined;
-
-    let className = classnames('ThumbnailEntry noselect', {
-      active: this.props.active,
-    });
-
-    let contents = null;
-    if (this.props.imageSrc || this.props.imageId) {
-      contents = (
-        <div className="p-x-1">
-          <ImageThumbnail
-            imageSrc={this.props.imageSrc}
-            imageId={this.props.imageId}
-            error={this.props.error}
-            stackPercentComplete={this.props.stackPercentComplete}
-          />
-        </div>
-      );
-    } else if (this.props.altImageText) {
-      contents = (
-        <div className="p-x-1">
-          <div className="alt-image-text">
-            <h1>{this.props.altImageText}</h1>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div
-        className={className}
-        onClick={this.onClick}
-        onDoubleClick={this.onDoubleClick}
-        onMouseDown={this.onMouseDown}
-      >
-        {contents}
-        <div
-          className="series-details"
-        >
-          <div className="series-description">
-            {this.props.seriesDescription}
-          </div>
-          <div className="series-information">
-            <div className="item item-series">
-              <div className="icon">S:</div>
-              <div className="value">{this.props.seriesNumber}</div>
-            </div>
-            {hasInstanceNumber && (
-              <div className="item item-series">
-                <div className="icon">I:</div>
-                <div className="value">{this.props.instanceNumber}</div>
-              </div>
-            )}
-            <div className="item item-frames">
-              <div className="icon">
-                <div />
-              </div>
-              <div className="value">{this.props.numImageFrames}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  onClick = () => {
-    if (this.props.onClick) {
-      this.props.onClick(this.props.displaySetInstanceUid);
-    }
-  };
-
-  onDoubleClick = () => {
-    if (this.props.onDoubleClick) {
-      this.props.onDoubleClick(this.props.displaySetInstanceUid);
-    }
-  };
-}
-
-export { ThumbnailEntry };

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

@@ -1,64 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DragSource } from 'react-dnd';
-import DragPreview from './DragPreview';
-import { ThumbnailEntry } from './ThumbnailEntry.js';
-
-// Drag sources and drop targets only interact
-// if they have the same string type.
-const Types = {
-  THUMBNAIL: 'thumbnail',
-};
-
-const thumbnailSource = {
-  /*canDrag(props) {
-    return props.error === false;
-  },*/
-
-  beginDrag(props) {
-    return props;
-  },
-
-  endDrag(props, monitor) {
-    //const item = monitor.getItem();
-    const dropResult = monitor.getDropResult();
-
-    if (dropResult) {
-      //console.log(`You dropped ${item.id} into ${dropResult.id}!`);
-      //console.log(item);
-    }
-  },
-};
-
-class ThumbnailEntryDragSource extends Component {
-  static propTypes = {
-    connectDragSource: PropTypes.func.isRequired,
-    isDragging: PropTypes.bool.isRequired,
-  };
-
-  static defaultProps = {
-    isDragging: false,
-  };
-
-  render() {
-    const { connectDragSource } = this.props;
-    const dropEffect = 'copy';
-
-    return connectDragSource(
-      <div className="ThumbnailEntryContainer" data-cy="thumbnail-list">
-        <DragPreview {...this.props} />
-        <ThumbnailEntry {...this.props} />
-      </div>,
-      { dropEffect }
-    );
-  }
-}
-
-const collect = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-export default DragSource(Types.THUMBNAIL, thumbnailSource, collect)(
-  ThumbnailEntryDragSource
-);

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

@@ -1,2 +1,2 @@
 export { StudyBrowser } from './StudyBrowser.js';
-export { ThumbnailEntry } from './ThumbnailEntry.js';
+export { Thumbnail } from './Thumbnail.js';

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
-        <DateRangePicker
+        {...dateRangePickerProps}
-          {...dateRangePickerProps}
+        startDate={this.state.startDate}
-          startDate={this.state.startDate}
+        endDate={this.state.endDate}
-          endDate={this.state.endDate}
+        renderCalendarInfo={this.renderDatePresets}
-          renderCalendarInfo={this.renderDatePresets}
+        onDatesChange={this.onDatesChange}
-          onDatesChange={this.onDatesChange}
+      />
-        />
-      </div>
     );
   }
 }

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);
+  display: flex;
-    font-size: 13px
+  color: var(--text-secondary-color);
-    font-weight: normal !important
+  font-size: 13px
+  font-weight: normal !important
 
-    label
+  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
     font-weight: normal
-    ul.pagination-control
-      margin: 0
 
-      li
+  select
-        display: table-cell
+    margin: 5px
-        padding: 5px 2px
+    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(--ui-gray)
-          background-color: var(--primary-background-color)
+          border-color: #ddd
-          border-color: var(--ui-gray)
-          color: var(--ui-gray-darkest)
           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,484 +1,390 @@
 import './StudyList.styl';
 
-import React, { Component } from 'react';
+import React from 'react';
-
+import classNames from 'classnames';
-import CustomDateRangePicker from './CustomDateRangePicker.js';
+import TableSearchFilter from './TableSearchFilter.js';
-import { Icon } from './../../elements/Icon';
+import useMedia from '../../hooks/useMedia.js';
-import { PaginationArea } from './PaginationArea.js';
 import PropTypes from 'prop-types';
 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 isEqual from 'lodash.isequal';
 import { withTranslation } from '../../utils/LanguageProvider';
 
-const today = moment();
+/**
-const lastWeek = moment().subtract(7, 'day');
+ *
-const lastMonth = moment().subtract(1, 'month');
+ *
-function getPaginationFragment(
+ * @param {*} props
-  props,
+ * @returns
-  searchData,
+ */
-  nextPageCb,
+function StudyList(props) {
-  prevPageCb,
+  const {
-  changeRowsPerPageCb
+    isLoading,
-) {
+    hasError,
-  return (
+    studies,
-    <PaginationArea
+    sort,
-      pageOptions={props.pageOptions}
+    onSort: handleSort,
-      currentPage={searchData.currentPage}
+    filterValues,
-      nextPageFunc={nextPageCb}
+    onFilterChange: handleFilterChange,
-      prevPageFunc={prevPageCb}
+    onSelectItem: handleSelectItem,
-      onRowsPerPageChange={changeRowsPerPageCb}
+    t,
-      rowsPerPage={searchData.rowsPerPage}
+    //
-      recordCount={props.studies.length}
+    studyListDateFilterNumDays,
-    />
+  } = props;
-  );
-}
 
-function getTableMeta(translate) {
+  const largeTableMeta = [
-  return {
+    {
-    patientName: {
+      displayText: t('PatientName'),
-      displayText: translate('PatientName'),
+      fieldName: 'patientName',
-      sort: 0,
+      inputType: 'text',
+      size: 330,
     },
-    patientId: {
+    {
-      displayText: translate('MRN'),
+      displayText: t('MRN'),
-      sort: 0,
+      fieldName: 'patientId',
+      inputType: 'text',
+      size: 378,
     },
-    accessionNumber: {
+    {
-      displayText: translate('AccessionNumber'),
+      displayText: t('AccessionNumber'),
-      sort: 0,
+      fieldName: 'accessionNumber',
+      inputType: 'text',
+      size: 180,
     },
-    studyDate: {
+    {
-      displayText: translate('StudyDate'),
+      displayText: t('StudyDate'),
+      fieldName: 'studyDate',
       inputType: 'date-range',
-      sort: 0,
+      size: 300,
-    },
-    modalities: {
-      displayText: translate('Modality'),
-      sort: 0,
-    },
-    studyDescription: {
-      displayText: translate('StudyDescription'),
-      sort: 0,
-    },
-  };
-}
-
-function getNoListFragment(translate, studies, error, loading) {
-  if (loading) {
-    return (
-      <div className="loading">
-        <StudyListLoadingText />
-      </div>
-    );
-  } else if (error) {
-    return (
-      <div className="notFound">
-        {translate('There was an error fetching studies')}
-      </div>
-    );
-  } else if (!studies.length) {
-    return <div className="notFound">{translate('No matching results')}</div>;
-  }
-}
-
-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,
-  };
-
-  static defaultProps = {
-    currentPage: 0,
-    rowsPerPage: 25,
-    studyListDateFilterNumDays: 7,
-  };
-
-  static studyDatePresets = [
-    {
-      text: 'Today',
-      start: today,
-      end: today,
     },
     {
-      text: 'Last 7 days',
+      displayText: t('Modality'),
-      start: lastWeek,
+      fieldName: 'modalities',
-      end: today,
+      inputType: 'text',
+      size: 114,
     },
     {
-      text: 'Last 30 days',
+      displayText: t('StudyDescription'),
-      start: lastMonth,
+      fieldName: 'studyDescription',
-      end: today,
+      inputType: 'text',
+      size: 335,
     },
   ];
 
-  constructor(props) {
+  const mediumTableMeta = [
-    super(props);
+    {
+      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 = {
+  const smallTableMeta = [
-      field: undefined,
+    {
-      order: undefined,
+      displayText: 'Search',
-    };
+      fieldName: 'allFields',
+      inputType: 'text',
+      size: 100,
+    },
+  ];
 
-    // init from props
+  const tableMeta = useMedia(
-    if (props.defaultSort) {
+    ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
-      sortData.field = props.defaultSort.field;
+    [largeTableMeta, mediumTableMeta, smallTableMeta],
-      // todo: -1, 0, 1?
+    smallTableMeta
-      sortData.order = props.defaultSort.order; // asc, desc
+  );
-    }
 
-    this.defaultStartDate = moment().subtract(
+  const totalSize = tableMeta
-      this.props.studyListDateFilterNumDays,
+    .map(field => field.size)
-      'days'
+    .reduce((prev, next) => prev + next);
-    );
-    this.defaultEndDate = moment();
 
-    this.state = {
+  return (
-      loading: false,
+    <table className="table table--striped table--hoverable">
-      error: false,
+      <colgroup>
-      searchData: {
+        {tableMeta.map((field, i) => {
-        sortData,
+          const size = field.size;
-        currentPage: this.props.currentPage,
+          const percentWidth = (size / totalSize) * 100.0;
-        rowsPerPage: this.props.rowsPerPage,
-        studyDateFrom: this.defaultStartDate,
-        studyDateTo: this.defaultEndDate,
-      },
-      highlightedItem: '',
-    };
 
-    this.getChangeHandler = this.getChangeHandler.bind(this);
+          return <col key={i} style={{ width: `${percentWidth}%` }} />;
-    this.getBlurHandler = this.getBlurHandler.bind(this);
+        })}
-    this.onInputKeydown = this.onInputKeydown.bind(this);
+      </colgroup>
-    this.nextPage = this.nextPage.bind(this);
+      <thead className="table-head">
-    this.prevPage = this.prevPage.bind(this);
+        <tr className="filters">
-    this.onRowsPerPageChange = this.onRowsPerPageChange.bind(this);
+          <TableSearchFilter
-    this.delayedSearch = debounce(this.search, 250);
+            meta={tableMeta}
-  }
+            values={filterValues}
-
+            onSort={handleSort}
-  getChangeHandler(key) {
+            onValueChange={handleFilterChange}
-    return event => {
+            sortFieldName={sort.fieldName}
-      this.delayedSearch.cancel();
+            sortDirection={sort.direction}
-      this.setSearchData(key, event.target.value, this.delayedSearch);
+            studyListDateFilterNumDays={studyListDateFilterNumDays}
-    };
+          />
-  }
+        </tr>
-
+      </thead>
-  getBlurHandler(key) {
+      <tbody className="table-body" data-cy="study-list-results">
-    return event => {
+        {/* I'm not in love with this approach, but it's the quickest way for now
-      this.delayedSearch.cancel();
+         *
-      this.setSearchData(key, event.target.value);
+         * - 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.
-  setSearchData(key, value) {
+         */}
-    const searchData = { ...this.state.searchData };
+        {/* LOADING */}
-    searchData[key] = value;
+        {isLoading && (
-
+          <tr className="no-hover">
-    if (!isEqual(searchData[key], this.state.searchData[key])) {
+            <td colSpan={tableMeta.length}>
-      this.setState({ ...this.state, searchData });
+              <StudyListLoadingText />
-    }
+            </td>
-  }
+          </tr>
-
-  setSearchDataBatch(keyValues) {
-    const searchData = { ...this.state.searchData };
-
-    Object.keys(keyValues).forEach(key => {
-      searchData[key] = keyValues[key];
-    });
-
-    this.setState({ searchData });
-  }
-
-  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);
-    }
-  }
-
-  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 });
-    }
-  }
-
-  nextPage(currentPage) {
-    currentPage = currentPage + 1;
-    this.delayedSearch.cancel();
-    this.setSearchData('currentPage', currentPage);
-  }
-
-  prevPage(currentPage) {
-    currentPage = currentPage - 1;
-    this.delayedSearch.cancel();
-    this.setSearchData('currentPage', currentPage);
-  }
-
-  onRowsPerPageChange(rowsPerPage) {
-    this.delayedSearch.cancel();
-    this.setSearchDataBatch({ rowsPerPage, currentPage: 0 });
-  }
-
-  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 });
-    };
-  }
-
-  onHighlightItem(studyItemUid) {
-    this.setState({ highlightedItem: studyItemUid });
-  }
-
-  getTableRow(study, index) {
-    const trKey = `trStudy${index}${study.studyInstanceUid}`;
-
-    if (!study) {
-      return;
-    }
-
-    const getTableCell = (
-      study,
-      studyKey,
-      emptyValue = '',
-      emptyClass = ''
-    ) => {
-      const componentKey = `td${studyKey}`;
-      const isValidValue = study && typeof study[studyKey] === 'string';
-      let className = emptyClass;
-      let value = emptyValue;
-
-      if (isValidValue) {
-        className = studyKey;
-        value = study[studyKey];
-      }
-
-      return (
-        <td key={componentKey} className={className}>
-          {value}
-        </td>
-      );
-    };
-
-    return (
-      <tr
-        key={trKey}
-        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);
-        }}
-      >
-        {getTableCell(
-          study,
-          'patientName',
-          `(${this.props.t('Empty')})`,
-          'emptyCell'
         )}
-        {getTableCell(study, 'patientId')}
+        {!isLoading && hasError && (
-        {getTableCell(study, 'accessionNumber')}
+          <tr className="no-hover">
-        {getTableCell(study, 'studyDate')}
+            <td colSpan={tableMeta.length}>
-        {getTableCell(study, 'modalities')}
+              <div className="notFound">
-        {getTableCell(study, 'studyDescription')}
+                {t('There was an error fetching studies')}
-      </tr>
+              </div>
-    );
+            </td>
-  }
+          </tr>
-
+        )}
-  componentDidUpdate(previousProps, previousState) {
+        {/* EMPTY */}
-    if (!isEqual(previousState.searchData, this.state.searchData)) {
+        {!isLoading && !studies.length && (
-      this.search();
+          <tr className="no-hover">
-    }
+            <td colSpan={tableMeta.length}>
-  }
+              <div className="notFound">{t('No matching results')}</div>
-
+            </td>
-  renderTableBody(noListFragment) {
+          </tr>
-    return !noListFragment && this.props.studies
+        )}
-      ? this.props.studies.map(this.getTableRow.bind(this))
+        {!isLoading &&
-      : null;
+          studies.map((study, index) => (
-  }
+            <TableRow
-
+              key={`${study.studyInstanceUid}-${index}`}
-  render() {
+              onClick={studyInstanceUid => handleSelectItem(studyInstanceUid)}
-    const tableMeta = getTableMeta(this.props.t);
+              accessionNumber={study.accessionNumber || ''}
-
+              modalities={study.modalities}
-    // Apply sort
+              patientId={study.patientId || ''}
-    const sortedFieldName = this.state.searchData.sortData.field;
+              patientName={study.patientName || ''}
-    const sortedField = tableMeta[sortedFieldName];
+              studyDate={study.studyDate}
-
+              studyDescription={study.studyDescription || ''}
-    if (sortedField) {
+              studyInstanceUid={study.studyInstanceUid}
-      const sortOrder = this.state.searchData.sortData.order;
+              t={t}
-      sortedField.sort = sortOrder === 'asc' ? 1 : 2;
+            />
-    }
+          ))}
-
+      </tbody>
-    // Sort Icons
+    </table>
-    const sortIcons = ['sort', 'sort-up', 'sort-down'];
+  );
-    const noListFragment = getNoListFragment(
-      this.props.t,
-      this.props.studies,
-      this.state.error,
-      this.props.loading || this.state.loading
-    );
-    const tableBody = this.renderTableBody(noListFragment);
-    const studiesNum = (this.props.studies && this.props.studies.length) || 0;
-
-    return (
-      <div className="StudyList">
-        <div className="studyListToolbar clearfix">
-          <div className="header pull-left">{this.props.t('StudyList')}</div>
-          <div className="studyCount pull-right">{studiesNum}</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.setState({ focusedInput: false });
-                                } else if (!startDate && !endDate) {
-                                  this.setSearchDataBatch({
-                                    studyDateFrom: null,
-                                    studyDateTo: null,
-                                  });
-                                }
-                              }}
-                              focusedInput={this.state.focusedInput}
-                              onFocusChange={focusedInput => {
-                                this.setState({ focusedInput });
-                              }}
-                            />
-                          </div>
-                        )}
-                      </th>
-                    </React.Fragment>
-                  );
-                })}
-              </tr>
-            </thead>
-            <tbody id="studyListData">{tableBody}</tbody>
-          </table>
-
-          {noListFragment
-            ? noListFragment
-            : getPaginationFragment(
-                this.props,
-                this.state.searchData,
-                this.nextPage,
-                this.prevPage,
-                this.onRowsPerPageChange
-              )}
-        </div>
-      </div>
-    );
-  }
 }
 
+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({ 'empty-value': !patientName })}>
+        {patientName || `(${t('Empty')})`}
+      </td>
+      <td>{patientId}</td>
+      <td>{accessionNumber}</td>
+      <td>{studyDate}</td>
+      <td className={classNames({ 'empty-value': !modalities })}>
+        {modalities || `(${t('Empty')})`}
+      </td>
+      <td>{studyDescription}</td>
+    </tr>
+  );
+
+  const mediumRowTemplate = (
+    <tr
+      onClick={() => handleClick(studyInstanceUid)}
+      className={classNames({ active: isHighlighted })}
+    >
+      <td className={classNames({ 'empty-value': !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',
+              maxWidth: '80px',
+              width: '80px',
+            }}
+          >
+            <div
+              className={classNames({
+                modalities: modalities,
+                'empty-value': !modalities,
+              })}
+              aria-label={modalities}
+              title={modalities}
+            >
+              {modalities || `(${t('Empty')})`}
+            </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({ 'empty-value': !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',
+              maxWidth: '80px',
+              width: '80px',
+            }}
+          >
+            <div
+              className={classNames({
+                modalities: modalities,
+                'empty-value': !modalities,
+              })}
+              aria-label={modalities}
+              title={modalities}
+            >
+              {modalities || `(${t('Empty')})`}
+            </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,
+  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
+.study-list-header
-  height: 40px
+  .addNewStudy
-  margin: 0 5px 20px 5px
+    margin: 0 10px
-  cursor: pointer
-  border: none
-  position: block
 
-.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
-
+  line-height: $study-list-toolbar-height
-  &>div
-    display: inline-block
 
   .header
     font-size: 22px
@@ -42,17 +63,20 @@ placeholder-color(c)
     color: var(--table-text-secondary-color)
     line-height: $study-list-toolbar-height
 
-  .studylistToolbar
+  .actions
-    height: $study-list-toolbar-height
+    display: flex;
-    line-height: $study-list-toolbar-height
 
-  .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,20 +100,116 @@ placeholder-color(c)
     height: 1px
     z-index: 2
 
-#studyListContainer
+
+.study-list-container
   width: 100%
   padding: 0 $study-list-padding
   position: absolute
   z-index: 2
 
-  .loading
+table.table
-    display: flex;
+  width: 100%;
-    justify-content: center;
+  margin-bottom: 20px;
+  border-spacing: 0;
+  border-collapse: collapse;
+  table-layout: fixed;
+  color: var(--table-text-primary-color)
+  font-weight: 300
 
-    .loading-text
+  > tbody tr
-      color: var(--table-text-secondary-color)
+    padding: 5px
-      font-size: 30px
+    background-color: black
-      width: fit-content;
+
+  > tbody td
+    padding: $body-cell-top-bottom-padding 8px;
+    height: $body-cell-height
+    word-wrap: break-word;
+
+  /* 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)
+
+  .empty-value
+    color: var(--ui-gray-light)
+
+.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 > thead > tr > th.studyDate
+  min-width: 230px
+.study-list-container > table.table .modalities
+  font-weight: 500;
+  min-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+.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
     color: var(--table-text-secondary-color)
@@ -97,191 +217,22 @@ placeholder-color(c)
     font-weight: 200
     text-align: center
 
-  table#tblStudyList
+@media only screen and (max-width: 768px)
-    width: 100%;
+  .study-list-header
-    max-width: 100%;
+    padding: 0 16px;
-    margin-bottom: 20px;
-    border-spacing: 0;
-    border-collapse: collapse;
 
-    > tr
+  .study-list-container
-      height: 20px
+    padding: 0;
 
-    > thead
+  .study-list-container > table.table > thead > tr > th
-      white-space: nowrap
+    padding: 0 13px;
 
-      tr
+  .study-list-container > table.table > tbody > tr > td
-        th
+    padding: 8px;
-          padding: 0
-          border-bottom: 1px solid var(--ui-border-color-active);
-          width: 100%;
-          text-align: left;
-          border-top: 0;
 
-          &.studyDate
+  .study-list-container .filters label
-            min-width: 230px
+    padding: 8px;
 
-          .display-text
+@media only screen and (max-width: 500px)
-            display: inline-block
+  .hide-xs
-            cursor: pointer
+    display: none;
-            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

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

@@ -1,5 +1,6 @@
-import { Icon } from './../../elements/Icon';
 import React from 'react';
+import { Icon } from './../../elements/Icon';
+// TODO: useTranslation
 import { withTranslation } from '../../utils/LanguageProvider';
 
 function StudyListLoadingText({ t: translate }) {

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="pagination-area">
+        <div className="rows-dropdown">{this.renderRowsPerPageDropdown()}</div>
-          <div className="row">
+        <div className="pagination-buttons">
-            <div className="rows-dropdown">
+          <div className="form-inline form-group page-number pull-right">
-              {this.renderRowsPerPageDropdown()}
+            {this.renderPaginationButtons()}
-            </div>
-            <div className="pagination-buttons">
-              <div className="form-inline form-group page-number pull-right">
-                {this.renderPaginationButtons()}
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -107,5 +102,5 @@ class PaginationArea extends PureComponent {
   }
 }
 
-const connectedComponent = withTranslation('Common')(PaginationArea);
+const connectedComponent = withTranslation('Common')(TablePagination);
-export { connectedComponent as PaginationArea };
+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/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
+      <div className="select-ohif-container">
-        className="select-ohif"
+        <label className="select-ohif-label" htmlFor={this.id}>
-        value={this.state.selected}
+          {this.props.label}
-        onChange={this.handleChange}
+          <select className="form-control select-ohif" {...this.props}>
-      >
+            {this.props.options.map(({ key, value }) => {
-        {this.props.options.map(({ key, value }) => {
+              return (
-          return (
+                <option key={key} value={value}>
-            <option key={key} value={value}>
+                  {key}
-              {key}
+                </option>
-            </option>
+              );
-          );
+            })}
-        })}
+          </select>
-      </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 {
+.input-ohif-container {
-  background-color: #b6b6b6;
-  border-color: #b6b6b6;
-  font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
-    sans-serif;
   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 => {
+  static propTypes = {
-    this.setState({ value: event.target.value });
+    value: PropTypes.oneOfType([
-    if (this.props.onChange) this.props.onChange();
+      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
+      <div className="input-ohif-container">
-        className="input-ohif"
+        <label className="input-ohif-label" htmlFor={this.props.id}>
-        type="text"
+          {this.props.label}
-        value={this.state.value}
+          <input
-        onChange={this.handleChange}
+            type={this.props.type}
-        id={this.props.id}
+            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 * from './Icon';
-
+export * from './form';
-export { Icon, ICONS };

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,17 +17,31 @@ import {
   StudyList,
   TableList,
   TableListItem,
-  ThumbnailEntry,
+  Thumbnail,
+  TableSearchFilter,
+  TablePagination,
   ToolbarSection,
   Tooltip,
   AboutModal,
   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,18 +73,22 @@ export {
   Overlay,
   OverlayTrigger,
   PlayClipButton,
+  PageToolbar,
   QuickSwitch,
   Range,
   RoundedButtonGroup,
   ScrollableArea,
   Select,
+  OldSelect,
   SelectTree,
   SimpleDialog,
   StudyBrowser,
   StudyList,
   TableList,
   TableListItem,
-  ThumbnailEntry,
+  Thumbnail,
+  TableSearchFilter,
+  TablePagination,
   Toolbar,
   ToolbarButton,
   ToolbarSection,
@@ -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,
+        swSrc: path.join(SRC_DIR, 'service-worker.js'),
-        skipWaiting: true,
+        // Increase the limit to 4mb:
+        // maximumFileSizeToCacheInBytes: 4 * 1024 * 1024
       }),
     ],
     // https://webpack.js.org/configuration/dev-server/

platform/viewer/CHANGELOG.md

@@ -3,6 +3,238 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.3.5](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.4...@ohif/viewer@2.3.5) (2019-10-31)
+
+
+### Bug Fixes
+
+* application crash if patientName is an object ([#1138](https://github.com/OHIF/Viewers/issues/1138)) ([64cf3b3](https://github.com/OHIF/Viewers/commit/64cf3b324da2383a927af1df2d46db2fca5318aa))
+
+
+
+
+
+## [2.3.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.3...@ohif/viewer@2.3.4) (2019-10-30)
+
+
+### Bug Fixes
+
+* 🐛 Fix ghost shadow on thumb ([#1113](https://github.com/OHIF/Viewers/issues/1113)) ([caaa032](https://github.com/OHIF/Viewers/commit/caaa032c4bc24fd69fdb01a15a8feb2721c321db))
+
+
+
+
+
+## [2.3.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.2...@ohif/viewer@2.3.3) (2019-10-30)
+
+
+### Bug Fixes
+
+* get adapter store picker to show ([#1134](https://github.com/OHIF/Viewers/issues/1134)) ([50ca2bd](https://github.com/OHIF/Viewers/commit/50ca2bde971e1e67b73ece96369052dd1a35ac68))
+
+
+
+
+
+## [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)
 
 

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

@@ -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('mousedown', 'center', { which: 1 })
-      .trigger('mousemove', '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('mousedown', 'center', { which: 1 })
-      .trigger('mousemove', '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('mousedown', 'center', { which: 1 })
-      .trigger('mousemove', '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);
   });
 
@@ -197,7 +196,7 @@ 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);
   });
 

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

@@ -5,19 +5,10 @@ describe('OHIFStandaloneViewer', () => {
 
   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', {
-      timeout: 15000,
-    }).should('be.visible');
-    cy.get('#studyListData > :nth-child(2) > .patientId', {
-      timeout: 15000,
-    }).should('be.visible');
-  });
 });

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

@@ -1,25 +1,25 @@
-describe('OHIF Study Viewer Page', () => {
+describe('OHIF Study Viewer Page', function() {
-  before(() => {
+  before(function() {
     cy.openStudy('MISTER^MR');
     cy.waitDicomImage();
     cy.expectMinimumThumbnails(6);
   });
 
-  beforeEach(() => {
+  beforeEach(function() {
     cy.initCommonElementsAliases();
     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('[data-cy="thumbnail-list"]')
       .its('length')
       .should('be.gt', 1);
   });
 
-  it('drags and drop a series thumbnail into viewport', () => {
+  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
 
@@ -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();
@@ -97,7 +97,7 @@ describe('OHIF Study Viewer Page', () => {
   //     .should('contain.text', descriptionText);
   // });
 
-  it('checks if measurement item can be deleted through the context menu on the viewport', () => {
+  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
@@ -131,7 +131,7 @@ describe('OHIF Study Viewer Page', () => {
     cy.get('@measurementsPanel').should('not.be.enabled');
   });
 
-  it('adds relabel and description to measurement item through the context menu on the viewport', () => {
+  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
@@ -206,4 +206,95 @@ describe('OHIF Study Viewer Page', () => {
     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,11 +2,13 @@ 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', () => {
-  //   cy.get('.scrollable-study-thumbnails div.ThumbnailEntryContainer')
+  //   cy.get('.scrollable-study-thumbnails div.thumbnail-container')
   //     .its('length')
   //     .should('be.gte', 2);
   // });

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

@@ -22,4 +22,23 @@ describe('OHIF HTML Extension', () => {
       '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

@@ -21,7 +21,6 @@ describe('OHIF Microscopy Extension', () => {
       .should('be.eq', 1);
 
     cy.wait(3000); //Waiting for image to render before taking the snapshot
-    cy.screenshot();
+    cy.percyCanvasSnapshot('Microscopy Extension');
-    cy.percySnapshot();
   });
 });

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

@@ -20,7 +20,8 @@ describe('OHIF PDF Extension', () => {
       .its('length')
       .should('be.eq', 1);
 
-    cy.screenshot();
+    // This won't work unless we switch to an extension that renders using `canvas`
-    cy.percySnapshot();
+    // Currently, we rely on the browser's built-in implementation
+    cy.percyCanvasSnapshot('PDF Extension');
   });
 });

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

@@ -22,14 +22,20 @@ describe('OHIF VTK Extension', () => {
           btn.click();
         }
       });
-    //wait VTK toolbar and images to be loaded
+
-    cy.wait(3000);
     cy.initVTKToolsAliases();
   });
 
   it('checks if VTK buttons are displayed on the toolbar', () => {
-    cy.screenshot();
+    // Wait for start reformatting
-    cy.percySnapshot();
+    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')
@@ -50,5 +56,8 @@ describe('OHIF VTK Extension', () => {
     cy.get('@layoutBtn')
       .should('be.visible')
       .contains('Layout');
+
+    cy.wait(3000);
+    cy.percyCanvasSnapshot('VTK Extension');
   });
 });

platform/viewer/cypress/support/aliases.js

@@ -30,6 +30,8 @@ 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

platform/viewer/cypress/support/commands.js

@@ -40,11 +40,12 @@ import {
  */
 Cypress.Commands.add('openStudy', patientName => {
   cy.openStudyList();
-  cy.get('#patientName').type(patientName);
+  cy.get('#filter-patientNameOrId').type(patientName);
   cy.wait('@getStudies');
-  cy.get('#studyListData .studylistStudy', { timeout: 5000 })
+  cy.get('[data-cy="study-list-results"]', { timeout: 5000 })
     .contains(patientName)
-    .first().click();
+    .first()
+    .click({ force: true });
 });
 
 /**
@@ -55,11 +56,12 @@ Cypress.Commands.add('openStudy', patientName => {
 Cypress.Commands.add('openStudyModality', modality => {
   cy.initRouteAliases();
   cy.visit('/');
-  cy.get('#modalities')
+
+  cy.get('#filter-accessionOrModalityOrDescription')
     .type(modality)
     .wait(2000);
 
-  cy.get('#studyListData')
+  cy.get('[data-cy="study-list-results"]')
     .contains(modality)
     .first()
     .click();
@@ -179,7 +181,7 @@ Cypress.Commands.add('waitDicomImage', (timeout = 20000) => {
 //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
@@ -192,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', () => {
@@ -305,3 +309,74 @@ Cypress.Commands.add('isInViewport', element => {
     }
   });
 });
+
+/**
+ * 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:
+Cypress.on('window:before:load', window => {
-// require('./commands')
+  // 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.11.0",
+  "version": "2.3.5",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -45,14 +45,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^1.4.0",
+    "@ohif/core": "^1.6.1",
     "@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.14",
+    "@ohif/extension-vtk": "^0.52.27",
     "@ohif/i18n": "^0.51.0",
-    "@ohif/ui": "^0.56.0",
+    "@ohif/ui": "^0.58.4",
     "@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.6.0"
+    "vtk.js": "^11.7.2"
   },
   "devDependencies": {
     "cypress": "^3.3.1",