chore(release): publish [skip ci]

- @ohif/viewer@2.3.1

.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}, #${
-    data.PatientID
-  })`;
+  const patientValue = `${data.PatientName} (${data.PatientSex}, #${data.PatientID})`;
   root.push(getMainDataItem('Patient', patientValue));
 
   const studyValue = data.StudyDescription;
@@ -117,15 +117,13 @@ function getMainData(data) {
   const seriesValue = `${data.SeriesDescription} (#${data.SeriesNumber})`;
   root.push(getMainDataItem('Series', seriesValue));
 
-  const manufacturerValue = `${data.Manufacturer} (${
-    data.ManufacturerModelName
-  }, #${data.DeviceSerialNumber})`;
+  const manufacturerValue = `${data.Manufacturer} (${data.ManufacturerModelName}, #${data.DeviceSerialNumber})`;
 
   root.push(getMainDataItem('Manufacturer', manufacturerValue));
 
   const mainDataObjects = {
     CompletionFlag: 'Completion flag',
-    VerificationFlag: 'Verification flag'
+    VerificationFlag: 'Verification flag',
   };
 
   Object.keys(mainDataObjects).forEach(key => {
@@ -154,7 +152,7 @@ const getContentSequence = (data, level = 1) => {
     const {
       CodeMeaning,
       CodeValue,
-      CodingSchemeDesignator
+      CodingSchemeDesignator,
     } = data.ConceptNameCodeSequence;
 
     header = `${CodeMeaning} (${CodeValue} - ${CodingSchemeDesignator})`;
@@ -198,11 +196,14 @@ function getMainDataItem(key, value) {
 class DicomHtmlViewport extends Component {
   state = {
     content: null,
-    error: null
+    error: null,
   };
 
   static propTypes = {
-    byteArray: TypedArrayProp.uint8
+    byteArray: TypedArrayProp.uint8,
+    setViewportActive: PropTypes.func.isRequired,
+    viewportIndex: PropTypes.number.isRequired,
+    activeViewportIndex: PropTypes.number.isRequired,
   };
 
   componentDidMount() {
@@ -225,15 +226,34 @@ class DicomHtmlViewport extends Component {
     );
 
     this.setState({
-      content
+      content,
     });
   }
 
+  setViewportActiveHandler = () => {
+    const {
+      setViewportActive,
+      viewportIndex,
+      activeViewportIndex,
+    } = this.props;
+
+    if (viewportIndex !== activeViewportIndex) {
+      setViewportActive();
+    }
+  };
+
   render() {
+    const { content, error } = this.state;
+
     return (
-      <div className={'DicomHtmlViewport'}>
-        {this.state.content}
-        {this.state.error && <h2>{JSON.stringify(this.state.error)}</h2>}
+      <div
+        data-cy="dicom-html-viewport"
+        className="DicomHtmlViewport"
+        onClick={this.setViewportActiveHandler}
+        onScroll={this.setViewportActiveHandler}
+      >
+        {content}
+        {error && <h2>{JSON.stringify(error)}</h2>}
       </div>
     );
   }

extensions/dicom-html/src/OHIFDicomHtmlViewport.js

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

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.52.19",
+  "version": "0.52.24",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -52,8 +52,8 @@
     "react-vtkjs-viewport": "^0.3.7"
   },
   "devDependencies": {
-    "@ohif/core": "^1.5.2",
-    "@ohif/ui": "^0.56.0",
+    "@ohif/core": "^1.6.0",
+    "@ohif/ui": "^0.58.1",
     "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dcmjs": "^0.6.1",

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

@@ -72,6 +72,7 @@
     "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",
@@ -102,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,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.6.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.5.2...@ohif/core@1.6.0) (2019-10-26)
+
+
+### Features
+
+* Snapshot Download Tool ([#840](https://github.com/OHIF/Viewers/issues/840)) ([450e098](https://github.com/OHIF/Viewers/commit/450e0981a5ba054fcfcb85eeaeb18371af9088f8))
+
+
+
+
+
 ## [1.5.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.5.1...@ohif/core@1.5.2) (2019-10-25)
 
 

platform/core/package.json

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

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/ui/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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.1",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -48,7 +48,7 @@
     "moment": "2.24.0",
     "prop-types": "15.6.2",
     "react-bootstrap-modal": "4.2.0",
-    "react-dates": "18.4.1",
+    "react-dates": "21.2.1",
     "react-dnd": "9.3.4",
     "react-dnd-html5-backend": "^9.3.4",
     "react-dnd-touch-backend": "^9.3.4",

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

@@ -0,0 +1,335 @@
+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,
+  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 loadAndUpdateViewports = async () => {
+      const {
+        image,
+        width: scaledWidth,
+        height: scaledHeight,
+      } = await loadImage(activeViewport, viewportElement, width, height);
+
+      setLastImage(image);
+
+      toggleAnnotations(showAnnotations, viewportElement);
+
+      setViewportElementHeight(scaledHeight);
+      setViewportElementWidth(scaledWidth);
+
+      setDownloadCanvas(state => ({
+        ...state,
+        height: scaledHeight,
+        width: scaledWidth,
+      }));
+
+      const {
+        dataUrl,
+        width: viewportElementWidth,
+        height: viewportElementHeight,
+      } = await updateViewportPreview(
+        viewportElement,
+        downloadCanvas.ref.current,
+        fileType
+      );
+
+      setViewportPreview(state => ({
+        ...state,
+        src: dataUrl,
+        width: viewportElementWidth,
+        height: viewportElementHeight,
+      }));
+    };
+
+    loadAndUpdateViewports();
+  }, [
+    activeViewport,
+    viewportElement,
+    showAnnotations,
+    height,
+    width,
+    loadImage,
+    toggleAnnotations,
+    updateViewportPreview,
+    fileType,
+    downloadCanvas.ref,
+  ]);
+
+  const onHeightChange = () => {
+    const newHeight = event.target.value;
+    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 = event.target.value;
+    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}
+                value={width}
+                label={t('Image width (px)')}
+                onChange={onWidthChange}
+              />
+            </div>
+            <div className="height">
+              <TextInput
+                type="number"
+                min={minimumSize}
+                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,
+  canvasClass: PropTypes.string.isRequired,
+};
+
+export default withTranslation('DownloadDialog')(DownloadDialog);

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

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

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

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

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

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

platform/ui/src/components/index.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,484 +1,397 @@
 import './StudyList.styl';
 
-import React, { Component } from 'react';
-
-import CustomDateRangePicker from './CustomDateRangePicker.js';
-import { Icon } from './../../elements/Icon';
-import { PaginationArea } from './PaginationArea.js';
+import React from 'react';
+import classNames from 'classnames';
+import TableSearchFilter from './TableSearchFilter.js';
+import useMedia from '../../hooks/useMedia.js';
 import PropTypes from 'prop-types';
+import ColorHash from './internal/color-hash.js';
 import { StudyListLoadingText } from './StudyListLoadingText.js';
-import { StudylistToolbar } from './StudyListToolbar.js';
-import { isInclusivelyBeforeDay } from 'react-dates';
-import moment from 'moment';
-import debounce from 'lodash.debounce';
-import 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(
-  props,
-  searchData,
-  nextPageCb,
-  prevPageCb,
-  changeRowsPerPageCb
-) {
-  return (
-    <PaginationArea
-      pageOptions={props.pageOptions}
-      currentPage={searchData.currentPage}
-      nextPageFunc={nextPageCb}
-      prevPageFunc={prevPageCb}
-      onRowsPerPageChange={changeRowsPerPageCb}
-      rowsPerPage={searchData.rowsPerPage}
-      recordCount={props.studies.length}
-    />
-  );
-}
+const colorHash = new ColorHash();
 
-function getTableMeta(translate) {
-  return {
-    patientName: {
-      displayText: translate('PatientName'),
-      sort: 0,
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+function StudyList(props) {
+  const {
+    isLoading,
+    hasError,
+    studies,
+    sort,
+    onSort: handleSort,
+    filterValues,
+    onFilterChange: handleFilterChange,
+    onSelectItem: handleSelectItem,
+    t,
+    //
+    studyListDateFilterNumDays,
+  } = props;
+
+  const largeTableMeta = [
+    {
+      displayText: t('PatientName'),
+      fieldName: 'patientName',
+      inputType: 'text',
+      size: 330,
     },
-    patientId: {
-      displayText: translate('MRN'),
-      sort: 0,
+    {
+      displayText: t('MRN'),
+      fieldName: 'patientId',
+      inputType: 'text',
+      size: 378,
     },
-    accessionNumber: {
-      displayText: translate('AccessionNumber'),
-      sort: 0,
+    {
+      displayText: t('AccessionNumber'),
+      fieldName: 'accessionNumber',
+      inputType: 'text',
+      size: 180,
     },
-    studyDate: {
-      displayText: translate('StudyDate'),
+    {
+      displayText: t('StudyDate'),
+      fieldName: 'studyDate',
       inputType: 'date-range',
-      sort: 0,
-    },
-    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,
+      size: 300,
     },
     {
-      text: 'Last 7 days',
-      start: lastWeek,
-      end: today,
+      displayText: t('Modality'),
+      fieldName: 'modalities',
+      inputType: 'text',
+      size: 114,
     },
     {
-      text: 'Last 30 days',
-      start: lastMonth,
-      end: today,
+      displayText: t('StudyDescription'),
+      fieldName: 'studyDescription',
+      inputType: 'text',
+      size: 335,
     },
   ];
 
-  constructor(props) {
-    super(props);
+  const mediumTableMeta = [
+    {
+      displayText: 'Patient / MRN',
+      fieldName: 'patientNameOrId',
+      inputType: 'text',
+      size: 250,
+    },
+    {
+      displayText: 'Description',
+      fieldName: 'accessionOrModalityOrDescription',
+      inputType: 'text',
+      size: 350,
+    },
+    {
+      displayText: t('StudyDate'),
+      fieldName: 'studyDate',
+      inputType: 'date-range',
+      size: 300,
+    },
+  ];
 
-    const sortData = {
-      field: undefined,
-      order: undefined,
-    };
+  const smallTableMeta = [
+    {
+      displayText: 'Search',
+      fieldName: 'allFields',
+      inputType: 'text',
+      size: 100,
+    },
+  ];
 
-    // init from props
-    if (props.defaultSort) {
-      sortData.field = props.defaultSort.field;
-      // todo: -1, 0, 1?
-      sortData.order = props.defaultSort.order; // asc, desc
-    }
+  const tableMeta = useMedia(
+    ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
+    [largeTableMeta, mediumTableMeta, smallTableMeta],
+    smallTableMeta
+  );
 
-    this.defaultStartDate = moment().subtract(
-      this.props.studyListDateFilterNumDays,
-      'days'
-    );
-    this.defaultEndDate = moment();
+  const totalSize = tableMeta
+    .map(field => field.size)
+    .reduce((prev, next) => prev + next);
 
-    this.state = {
-      loading: false,
-      error: false,
-      searchData: {
-        sortData,
-        currentPage: this.props.currentPage,
-        rowsPerPage: this.props.rowsPerPage,
-        studyDateFrom: this.defaultStartDate,
-        studyDateTo: this.defaultEndDate,
-      },
-      highlightedItem: '',
-    };
+  return (
+    <table className="table table--striped table--hoverable">
+      <colgroup>
+        {tableMeta.map((field, i) => {
+          const size = field.size;
+          const percentWidth = (size / totalSize) * 100.0;
 
-    this.getChangeHandler = this.getChangeHandler.bind(this);
-    this.getBlurHandler = this.getBlurHandler.bind(this);
-    this.onInputKeydown = this.onInputKeydown.bind(this);
-    this.nextPage = this.nextPage.bind(this);
-    this.prevPage = this.prevPage.bind(this);
-    this.onRowsPerPageChange = this.onRowsPerPageChange.bind(this);
-    this.delayedSearch = debounce(this.search, 250);
-  }
-
-  getChangeHandler(key) {
-    return event => {
-      this.delayedSearch.cancel();
-      this.setSearchData(key, event.target.value, this.delayedSearch);
-    };
-  }
-
-  getBlurHandler(key) {
-    return event => {
-      this.delayedSearch.cancel();
-      this.setSearchData(key, event.target.value);
-    };
-  }
-
-  setSearchData(key, value) {
-    const searchData = { ...this.state.searchData };
-    searchData[key] = value;
-
-    if (!isEqual(searchData[key], this.state.searchData[key])) {
-      this.setState({ ...this.state, searchData });
-    }
-  }
-
-  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'
+          return <col key={i} style={{ width: `${percentWidth}%` }} />;
+        })}
+      </colgroup>
+      <thead className="table-head">
+        <tr className="filters">
+          <TableSearchFilter
+            meta={tableMeta}
+            values={filterValues}
+            onSort={handleSort}
+            onValueChange={handleFilterChange}
+            sortFieldName={sort.fieldName}
+            sortDirection={sort.direction}
+            studyListDateFilterNumDays={studyListDateFilterNumDays}
+          />
+        </tr>
+      </thead>
+      <tbody className="table-body" data-cy="study-list-results">
+        {/* I'm not in love with this approach, but it's the quickest way for now
+         *
+         * - Display different content based on loading, empty, results state
+         *
+         * This is not ideal because it create a jump in focus. For loading especially,
+         * We should keep our current results visible while we load the new ones.
+         */}
+        {/* LOADING */}
+        {isLoading && (
+          <tr className="no-hover">
+            <td colSpan={tableMeta.length}>
+              <StudyListLoadingText />
+            </td>
+          </tr>
         )}
-        {getTableCell(study, 'patientId')}
-        {getTableCell(study, 'accessionNumber')}
-        {getTableCell(study, 'studyDate')}
-        {getTableCell(study, 'modalities')}
-        {getTableCell(study, 'studyDescription')}
-      </tr>
-    );
-  }
-
-  componentDidUpdate(previousProps, previousState) {
-    if (!isEqual(previousState.searchData, this.state.searchData)) {
-      this.search();
-    }
-  }
-
-  renderTableBody(noListFragment) {
-    return !noListFragment && this.props.studies
-      ? this.props.studies.map(this.getTableRow.bind(this))
-      : null;
-  }
-
-  render() {
-    const tableMeta = getTableMeta(this.props.t);
-
-    // Apply sort
-    const sortedFieldName = this.state.searchData.sortData.field;
-    const sortedField = tableMeta[sortedFieldName];
-
-    if (sortedField) {
-      const sortOrder = this.state.searchData.sortData.order;
-      sortedField.sort = sortOrder === 'asc' ? 1 : 2;
-    }
-
-    // Sort Icons
-    const sortIcons = ['sort', 'sort-up', 'sort-down'];
-    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>
-    );
-  }
+        {!isLoading && hasError && (
+          <tr className="no-hover">
+            <td colSpan={tableMeta.length}>
+              <div className="notFound">
+                {t('There was an error fetching studies')}
+              </div>
+            </td>
+          </tr>
+        )}
+        {/* EMPTY */}
+        {!isLoading && !studies.length && (
+          <tr className="no-hover">
+            <td colSpan={tableMeta.length}>
+              <div className="notFound">{t('No matching results')}</div>
+            </td>
+          </tr>
+        )}
+        {!isLoading &&
+          studies.map((study, index) => (
+            <TableRow
+              key={`${study.studyInstanceUid}-${index}`}
+              onClick={studyInstanceUid => handleSelectItem(studyInstanceUid)}
+              accessionNumber={study.accessionNumber || ''}
+              modalities={study.modalities}
+              patientId={study.patientId || ''}
+              patientName={study.patientName || ''}
+              studyDate={study.studyDate}
+              studyDescription={study.studyDescription || ''}
+              studyInstanceUid={study.studyInstanceUid}
+              t={t}
+            />
+          ))}
+      </tbody>
+    </table>
+  );
 }
 
+StudyList.propTypes = {
+  isLoading: PropTypes.bool.isRequired,
+  hasError: PropTypes.bool.isRequired,
+  studies: PropTypes.array.isRequired,
+  onSelectItem: PropTypes.func.isRequired,
+  // ~~ SORT
+  sort: PropTypes.shape({
+    fieldName: PropTypes.string,
+    direction: PropTypes.oneOf(['desc', 'asc', null]),
+  }).isRequired,
+  onSort: PropTypes.func.isRequired,
+  // ~~ FILTERS
+  filterValues: PropTypes.shape({
+    patientName: PropTypes.string.isRequired,
+    patientId: PropTypes.string.isRequired,
+    accessionNumber: PropTypes.string.isRequired,
+    studyDate: PropTypes.string.isRequired,
+    modalities: PropTypes.string.isRequired,
+    studyDescription: PropTypes.string.isRequired,
+    patientNameOrId: PropTypes.string.isRequired,
+    accessionOrModalityOrDescription: PropTypes.string.isRequired,
+    allFields: PropTypes.string.isRequired,
+  }).isRequired,
+  onFilterChange: PropTypes.func.isRequired,
+  //
+  studyListDateFilterNumDays: PropTypes.number,
+};
+
+StudyList.defaultProps = {};
+
+function TableRow(props) {
+  const {
+    accessionNumber,
+    isHighlighted,
+    modalities,
+    patientId,
+    patientName,
+    studyDate,
+    studyDescription,
+    studyInstanceUid,
+    onClick: handleClick,
+    t,
+  } = props;
+
+  const largeRowTemplate = (
+    <tr
+      onClick={() => handleClick(studyInstanceUid)}
+      className={classNames({ active: isHighlighted })}
+    >
+      <td className={classNames({ emptyCell: !patientName })}>
+        {patientName || `(${t('Empty')})`}
+      </td>
+      <td>{patientId}</td>
+      <td>{accessionNumber}</td>
+      <td>{studyDate}</td>
+      <td>{modalities}</td>
+      <td>{studyDescription}</td>
+    </tr>
+  );
+
+  const mediumRowTemplate = (
+    <tr
+      onClick={() => handleClick(studyInstanceUid)}
+      className={classNames({ active: isHighlighted })}
+    >
+      <td className={classNames({ emptyCell: !patientName })}>
+        {patientName || `(${t('Empty')})`}
+        <div style={{ color: '#60656f' }}>{patientId}</div>
+      </td>
+      <td>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          {/* DESCRIPTION */}
+          <div
+            className="hide-xs"
+            style={{
+              whiteSpace: 'pre-wrap',
+              flexGrow: 1,
+            }}
+          >
+            {studyDescription}
+          </div>
+
+          {/* MODALITY & ACCESSION */}
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              minWidth: '80px',
+              maxWidth: '100px',
+            }}
+          >
+            <div
+              style={{
+                backgroundColor: colorHash.hex(modalities),
+                borderRadius: '16px',
+                padding: '2px 8px 0px 8px',
+                fontWeight: 500,
+                marginBottom: '4px',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+              }}
+              aria-label={modalities}
+              title={modalities}
+            >
+              {modalities}
+            </div>
+            <div
+              style={{
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+              }}
+              aria-label={accessionNumber}
+              title={accessionNumber}
+            >
+              {accessionNumber}
+            </div>
+          </div>
+        </div>
+      </td>
+      {/* DATE */}
+      <td style={{ textAlign: 'center' }}>{studyDate}</td>
+    </tr>
+  );
+
+  const smallRowTemplate = (
+    <tr
+      onClick={() => handleClick(studyInstanceUid)}
+      className={classNames({ active: isHighlighted })}
+    >
+      <td style={{ position: 'relative', overflow: 'hidden' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          {/* NAME AND ID */}
+          <div
+            className={classNames({ emptyCell: !patientName })}
+            style={{ width: '150px', minWidth: '150px' }}
+          >
+            <div style={{ fontWeight: 500, paddingTop: '3px' }}>
+              {patientName || `(${t('Empty')})`}
+            </div>
+            <div style={{ color: '#60656f' }}>{patientId}</div>
+          </div>
+
+          {/* DESCRIPTION */}
+          <div
+            className="hide-xs"
+            style={{
+              whiteSpace: 'pre-wrap',
+              flexGrow: 1,
+              paddingLeft: '35px',
+            }}
+          >
+            {studyDescription}
+          </div>
+
+          {/* MODALITY & DATE */}
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              minWidth: '80px',
+            }}
+          >
+            <div
+              style={{
+                backgroundColor: colorHash.hex(modalities),
+                borderRadius: '16px',
+                padding: '2px 8px 0px 8px',
+                fontWeight: 500,
+                marginBottom: '4px',
+              }}
+            >
+              {modalities}
+            </div>
+            <div>{studyDate}</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  );
+
+  const rowTemplate = useMedia(
+    ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
+    [largeRowTemplate, mediumRowTemplate, smallRowTemplate],
+    smallRowTemplate
+  );
+
+  return rowTemplate;
+}
+
+TableRow.propTypes = {
+  accessionNumber: PropTypes.string.isRequired,
+  isHighlighted: PropTypes.bool,
+  modalities: PropTypes.string.isRequired,
+  patientId: PropTypes.string.isRequired,
+  patientName: PropTypes.string.isRequired,
+  studyDate: PropTypes.string.isRequired,
+  studyDescription: PropTypes.string.isRequired,
+  studyInstanceUid: PropTypes.string.isRequired,
+};
+
+TableRow.defaultProps = {
+  isHighlighted: false,
+};
+
 const connectedComponent = withTranslation('StudyList')(StudyList);
 export { connectedComponent as StudyList };

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

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

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

@@ -1,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="row">
-            <div className="rows-dropdown">
-              {this.renderRowsPerPageDropdown()}
-            </div>
-            <div className="pagination-buttons">
-              <div className="form-inline form-group page-number pull-right">
-                {this.renderPaginationButtons()}
-              </div>
-            </div>
+      <div className="pagination-area">
+        <div className="rows-dropdown">{this.renderRowsPerPageDropdown()}</div>
+        <div className="pagination-buttons">
+          <div className="form-inline form-group page-number pull-right">
+            {this.renderPaginationButtons()}
           </div>
         </div>
       </div>
@@ -107,5 +102,5 @@ class PaginationArea extends PureComponent {
   }
 }
 
-const connectedComponent = withTranslation('Common')(PaginationArea);
-export { connectedComponent as PaginationArea };
+const connectedComponent = withTranslation('Common')(TablePagination);
+export { connectedComponent as TablePagination };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

platform/ui/src/elements/index.js

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

platform/ui/src/hooks/index.js

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

platform/ui/src/hooks/useDebounce.js

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

platform/ui/src/hooks/useMedia.js

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

platform/ui/src/index.js

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

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

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

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

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

platform/viewer/CHANGELOG.md

@@ -3,6 +3,123 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 

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

@@ -66,7 +66,7 @@ describe('OHIF Cornerstone Toolbar', () => {
   });
 
   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 => {

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

@@ -7,17 +7,8 @@ describe('OHIFStandaloneViewer', () => {
     cy.screenshot();
     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,16 +1,16 @@
-describe('OHIF Study Viewer Page', () => {
-  before(() => {
+describe('OHIF Study Viewer Page', function() {
+  before(function() {
     cy.openStudy('MISTER^MR');
     cy.waitDicomImage();
     cy.expectMinimumThumbnails(6);
   });
 
-  beforeEach(() => {
+  beforeEach(function() {
     cy.initCommonElementsAliases();
     cy.resetViewport();
   });
 
-  it('checks if series thumbnails are being displayed', () => {
+  it('checks if series thumbnails are being displayed', function() {
     cy.screenshot();
     cy.percyCanvasSnapshot('Series Thumbnails');
 
@@ -19,7 +19,7 @@ describe('OHIF Study Viewer Page', () => {
       .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,7 +2,9 @@ describe('ViewerRouting', () => {
   beforeEach(() => {
     cy.visit('/');
     cy.contains('Study List');
-    cy.get('#studyListData > :nth-child(1) > .patientId').click();
+    cy.get(
+      '[data-cy="study-list-results"]> :nth-child(1) > .patientId'
+    ).click();
   });
 
   // it('thumbnails list has more than 2 items', () => {

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

@@ -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');
   });
 });

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`
+    // 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();
-    cy.percyCanvasSnapshot('VTK Extension');
+    // Wait for start reformatting
+    cy.get('[data-cy="viewprt-grid"]', { timeout: 10000 }).should($grid => {
+      expect($grid).to.contain.text('Reform');
+    });
+
+    // Wait for finish reformatting
+    cy.get('[data-cy="viewprt-grid"]', { timeout: 30000 }).should($grid => {
+      expect($grid).not.to.contain.text('Reform');
+    });
 
     cy.get('@crosshairsBtn')
       .should('be.visible')
@@ -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,9 +40,9 @@ 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({ force: true });
@@ -56,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();
@@ -180,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
@@ -193,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', () => {
@@ -312,28 +315,68 @@ Cypress.Commands.add('isInViewport', element => {
  *
  */
 Cypress.Commands.add('percyCanvasSnapshot', (name, options = {}) => {
-  function convertCanvas(documentClone) {
-    documentClone
-      .querySelectorAll('canvas')
-      .forEach(selector => canvasToImage(selector));
+  cy.document().then(doc => {
+    convertCanvas(doc);
+  });
 
-    return documentClone;
-  }
+  // `domTransformation` does not appear to be working
+  // But modifying our immediate DOM does.
+  cy.percySnapshot(name, { ...options }); //, domTransformation: convertCanvas });
 
-  function canvasToImage(selectorOrEl) {
-    let canvas =
-      typeof selectorOrEl === 'object'
-        ? selectorOrEl
-        : document.querySelector(selectorOrEl);
-    let image = document.createElement('img');
-    let canvasImageBase64 = canvas.toDataURL();
-
-    image.src = canvasImageBase64;
-    image.style = 'max-width: 100%';
-    canvas.setAttribute('data-percy-modified', true);
-    canvas.parentElement.appendChild(image);
-    canvas.style = 'display: none';
-  }
-
-  cy.percySnapshot(name, { ...options, domTransformation: convertCanvas });
+  cy.document().then(doc => {
+    unconvertCanvas(doc);
+  });
 });
+
+Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => {
+  cy.get('.toolbar-button-label')
+    .contains('Layout')
+    .click();
+
+  cy.get('.layoutChooser')
+    .find('tr')
+    .eq(rows - 1)
+    .find('td')
+    .eq(columns - 1)
+    .click();
+
+  cy.wait(1000);
+});
+
+function convertCanvas(documentClone) {
+  documentClone
+    .querySelectorAll('canvas')
+    .forEach(selector => canvasToImage(selector));
+
+  return documentClone;
+}
+
+function unconvertCanvas(documentClone) {
+  // Remove previously generated images
+  documentClone
+    .querySelectorAll('[data-percy-image]')
+    .forEach(selector => selector.remove());
+  // Restore canvas visibility
+  documentClone.querySelectorAll('[data-percy-canvas]').forEach(selector => {
+    selector.removeAttribute('data-percy-canvas');
+    selector.style = '';
+  });
+}
+
+function canvasToImage(selectorOrEl) {
+  let canvas =
+    typeof selectorOrEl === 'object'
+      ? selectorOrEl
+      : document.querySelector(selectorOrEl);
+  let image = document.createElement('img');
+  let canvasImageBase64 = canvas.toDataURL('image/png');
+
+  // Show Image
+  image.src = canvasImageBase64;
+  image.style = 'width: 100%';
+  image.setAttribute('data-percy-image', true);
+  // Hide Canvas
+  canvas.setAttribute('data-percy-canvas', true);
+  canvas.parentElement.appendChild(image);
+  canvas.style = 'display: none';
+}

platform/viewer/cypress/support/index.js

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

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "1.12.2",
+  "version": "2.3.1",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -45,14 +45,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^1.5.2",
+    "@ohif/core": "^1.6.0",
     "@ohif/extension-cornerstone": "^2.0.0",
-    "@ohif/extension-dicom-html": "^1.0.0",
+    "@ohif/extension-dicom-html": "^1.0.1",
     "@ohif/extension-dicom-microscopy": "^0.50.6",
     "@ohif/extension-dicom-pdf": "^1.0.0",
-    "@ohif/extension-vtk": "^0.52.19",
+    "@ohif/extension-vtk": "^0.52.24",
     "@ohif/i18n": "^0.51.0",
-    "@ohif/ui": "^0.56.0",
+    "@ohif/ui": "^0.58.1",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",