chore(release): publish [skip ci]

- @ohif/extension-dicom-html@1.0.1
 - @ohif/viewer@2.2.2

.eslintrc.json

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

.vscode/settings.json

@@ -1,10 +1,11 @@
 {
-  "editor.rulers": [80, 120],
+  "editor.rulers": [
-
+    80,
+    120
+  ],
   // ===
   // Spacing
   // ===
-
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
   "editor.trimAutoWhitespace": true,
@@ -12,17 +13,21 @@
   "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.endOfLine": "lf",

extensions/cornerstone/CHANGELOG.md

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

extensions/cornerstone/package.json

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

extensions/cornerstone/src/toolbarModule.js

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

extensions/dicom-html/CHANGELOG.md

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

extensions/dicom-html/package.json

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

extensions/dicom-html/src/ConnectedDicomHtmlViewport.js

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

extensions/dicom-html/src/DicomHtmlViewport.js

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

extensions/dicom-html/src/OHIFDicomHtmlViewport.js

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

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,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/core": "^1.6.0",
-    "@ohif/ui": "^0.56.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>
   );

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,7 +84,6 @@ export default class CustomDateRangePicker extends React.Component {
     } = this.props;
 
     return (
-      <div>
       <DateRangePicker
         {...dateRangePickerProps}
         startDate={this.state.startDate}
@@ -93,7 +91,6 @@ export default class CustomDateRangePicker extends React.Component {
         renderCalendarInfo={this.renderDatePresets}
         onDatesChange={this.onDatesChange}
       />
-      </div>
     );
   }
 }

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

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

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

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

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

@@ -1,4 +1,5 @@
 .pagination-area
+  display: flex;
   color: var(--text-secondary-color);
   font-size: 13px
   font-weight: normal !important
@@ -11,8 +12,6 @@
     background-color: var(--primary-background-color)
     color: white
 
-  .row
-    display: flex;
 
   .rows-dropdown
     width: 25%;
@@ -27,7 +26,7 @@
   .form-group
     margin-bottom: 15px;
 
-  .rows-per-page label.wrapperLabel
+.rows-per-page label.wrapperLabel
   display: inline-table !important
   margin: 0 4px
 
@@ -35,7 +34,7 @@
     margin: 0px 4px 0px 4px
     width: 42px
 
-  .page-buttons
+.page-buttons
   margin: 0
   text-align: right
   font-weight: normal

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

@@ -1,484 +1,397 @@
 import './StudyList.styl';
 
-import React, { Component } from 'react';
+import React from 'react';
-
+import classNames from 'classnames';
-import CustomDateRangePicker from './CustomDateRangePicker.js';
+import TableSearchFilter from './TableSearchFilter.js';
-import { Icon } from './../../elements/Icon';
+import useMedia from '../../hooks/useMedia.js';
-import { PaginationArea } from './PaginationArea.js';
 import PropTypes from 'prop-types';
+import 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 colorHash = new ColorHash();
-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}
-    />
-  );
-}
 
-function getTableMeta(translate) {
+/**
-  return {
+ *
-    patientName: {
+ *
-      displayText: translate('PatientName'),
+ * @param {*} props
-      sort: 0,
+ * @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'),
+      displayText: t('MRN'),
-      sort: 0,
+      fieldName: 'patientId',
+      inputType: 'text',
+      size: 378,
     },
-    accessionNumber: {
+    {
-      displayText: translate('AccessionNumber'),
+      displayText: t('AccessionNumber'),
-      sort: 0,
+      fieldName: 'accessionNumber',
+      inputType: 'text',
+      size: 180,
     },
-    studyDate: {
+    {
-      displayText: translate('StudyDate'),
+      displayText: t('StudyDate'),
+      fieldName: 'studyDate',
       inputType: 'date-range',
-      sort: 0,
+      size: 300,
-    },
-    modalities: {
-      displayText: translate('Modality'),
-      sort: 0,
-    },
-    studyDescription: {
-      displayText: translate('StudyDescription'),
-      sort: 0,
-    },
-  };
-}
-
-function getNoListFragment(translate, studies, error, loading) {
-  if (loading) {
-    return (
-      <div className="loading">
-        <StudyListLoadingText />
-      </div>
-    );
-  } else if (error) {
-    return (
-      <div className="notFound">
-        {translate('There was an error fetching studies')}
-      </div>
-    );
-  } else if (!studies.length) {
-    return <div className="notFound">{translate('No matching results')}</div>;
-  }
-}
-
-class StudyList extends Component {
-  static propTypes = {
-    studies: PropTypes.array.isRequired,
-    onSelectItem: PropTypes.func.isRequired,
-    onSearch: PropTypes.func.isRequired,
-    currentPage: PropTypes.number,
-    rowsPerPage: PropTypes.number,
-    studyListDateFilterNumDays: PropTypes.number,
-    studyListFunctionsEnabled: PropTypes.bool,
-    defaultSort: PropTypes.shape({
-      field: PropTypes.string.isRequired,
-      order: PropTypes.oneOf(['desc', 'asc']).isRequired,
-    }),
-    onImport: PropTypes.func,
-    pageOptions: PropTypes.array,
-  };
-
-  static defaultProps = {
-    currentPage: 0,
-    rowsPerPage: 25,
-    studyListDateFilterNumDays: 7,
-  };
-
-  static studyDatePresets = [
-    {
-      text: 'Today',
-      start: today,
-      end: today,
     },
     {
-      text: 'Last 7 days',
+      displayText: t('Modality'),
-      start: lastWeek,
+      fieldName: 'modalities',
-      end: today,
+      inputType: 'text',
+      size: 114,
     },
     {
-      text: 'Last 30 days',
+      displayText: t('StudyDescription'),
-      start: lastMonth,
+      fieldName: 'studyDescription',
-      end: today,
+      inputType: 'text',
+      size: 335,
     },
   ];
 
-  constructor(props) {
+  const mediumTableMeta = [
-    super(props);
+    {
-
+      displayText: 'Patient / MRN',
-    const sortData = {
+      fieldName: 'patientNameOrId',
-      field: undefined,
+      inputType: 'text',
-      order: undefined,
+      size: 250,
-    };
-
-    // init from props
-    if (props.defaultSort) {
-      sortData.field = props.defaultSort.field;
-      // todo: -1, 0, 1?
-      sortData.order = props.defaultSort.order; // asc, desc
-    }
-
-    this.defaultStartDate = moment().subtract(
-      this.props.studyListDateFilterNumDays,
-      'days'
-    );
-    this.defaultEndDate = moment();
-
-    this.state = {
-      loading: false,
-      error: false,
-      searchData: {
-        sortData,
-        currentPage: this.props.currentPage,
-        rowsPerPage: this.props.rowsPerPage,
-        studyDateFrom: this.defaultStartDate,
-        studyDateTo: this.defaultEndDate,
     },
-      highlightedItem: '',
+    {
-    };
+      displayText: 'Description',
+      fieldName: 'accessionOrModalityOrDescription',
+      inputType: 'text',
+      size: 350,
+    },
+    {
+      displayText: t('StudyDate'),
+      fieldName: 'studyDate',
+      inputType: 'date-range',
+      size: 300,
+    },
+  ];
 
-    this.getChangeHandler = this.getChangeHandler.bind(this);
+  const smallTableMeta = [
-    this.getBlurHandler = this.getBlurHandler.bind(this);
+    {
-    this.onInputKeydown = this.onInputKeydown.bind(this);
+      displayText: 'Search',
-    this.nextPage = this.nextPage.bind(this);
+      fieldName: 'allFields',
-    this.prevPage = this.prevPage.bind(this);
+      inputType: 'text',
-    this.onRowsPerPageChange = this.onRowsPerPageChange.bind(this);
+      size: 100,
-    this.delayedSearch = debounce(this.search, 250);
+    },
-  }
+  ];
 
-  getChangeHandler(key) {
+  const tableMeta = useMedia(
-    return event => {
+    ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
-      this.delayedSearch.cancel();
+    [largeTableMeta, mediumTableMeta, smallTableMeta],
-      this.setSearchData(key, event.target.value, this.delayedSearch);
+    smallTableMeta
-    };
+  );
-  }
 
-  getBlurHandler(key) {
+  const totalSize = tableMeta
-    return event => {
+    .map(field => field.size)
-      this.delayedSearch.cancel();
+    .reduce((prev, next) => prev + next);
-      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}>
+    <table className="table table--striped table--hoverable">
-          {value}
+      <colgroup>
-        </td>
+        {tableMeta.map((field, i) => {
-      );
+          const size = field.size;
-    };
+          const percentWidth = (size / totalSize) * 100.0;
 
-    return (
+          return <col key={i} style={{ width: `${percentWidth}%` }} />;
-      <tr
-        key={trKey}
-        className={
-          this.state.highlightedItem === study.studyInstanceUid
-            ? 'studylistStudy noselect active'
-            : 'studylistStudy noselect'
-        }
-        onMouseDown={event => {
-          // middle/wheel click
-          if (event.button === 1) {
-            this.props.onSelectItem(study.studyInstanceUid);
-          }
-        }}
-        onClick={() => {
-          this.onHighlightItem(study.studyInstanceUid);
-          this.props.onSelectItem(study.studyInstanceUid);
-        }}
-      >
-        {getTableCell(
-          study,
-          'patientName',
-          `(${this.props.t('Empty')})`,
-          'emptyCell'
-        )}
-        {getTableCell(study, 'patientId')}
-        {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>
-                  );
         })}
+      </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 id="studyListData">{tableBody}</tbody>
+      <tbody className="table-body" data-cy="study-list-results">
-          </table>
+        {/* I'm not in love with this approach, but it's the quickest way for now
-
+         *
-          {noListFragment
+         * - Display different content based on loading, empty, results state
-            ? noListFragment
+         *
-            : getPaginationFragment(
+         * This is not ideal because it create a jump in focus. For loading especially,
-                this.props,
+         * We should keep our current results visible while we load the new ones.
-                this.state.searchData,
+         */}
-                this.nextPage,
+        {/* LOADING */}
-                this.prevPage,
+        {isLoading && (
-                this.onRowsPerPageChange
+          <tr className="no-hover">
+            <td colSpan={tableMeta.length}>
+              <StudyListLoadingText />
+            </td>
+          </tr>
         )}
+        {!isLoading && hasError && (
+          <tr className="no-hover">
+            <td colSpan={tableMeta.length}>
+              <div className="notFound">
+                {t('There was an error fetching studies')}
               </div>
-      </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
+.study-list-header
-  height: 40px
+  .addNewStudy
-  margin: 0 5px 20px 5px
+    margin: 0 10px
-  cursor: pointer
-  border: none
-  position: block
 
-.studyListToolbar
+    label
+      font-weight: 400
+      cursor: pointer
+      display: inline-block;
+      max-width: 100%;
+      margin-bottom: 5px;
+
+    input
+      width: 0.1px;
+      height: 0.1px
+      opacity: 0
+      overflow: hidden
+      position: absolute
+      z-index: -1
+
+    color: var(--text-secondary-color)
+
+    &:hover
+      color: var(--hover-color)
+
+    &:active
+      color: var(--active-color)
+
+.study-list-header
+  display: flex;
+  justify-content: space-between;
   background-color: var(--ui-gray-darker)
   height: $study-list-toolbar-height
   margin-bottom: 2px
   padding: 0 $study-list-padding
-
+  line-height: $study-list-toolbar-height
-  &>div
-    display: inline-block
 
   .header
     font-size: 22px
@@ -42,17 +63,20 @@ placeholder-color(c)
     color: var(--table-text-secondary-color)
     line-height: $study-list-toolbar-height
 
-  .studylistToolbar
+  .actions
-    height: $study-list-toolbar-height
+    display: flex;
-    line-height: $study-list-toolbar-height
 
-  .studyCount
+  .study-count
     color: var(--large-numbers-color)
     font-size: 40px
     font-weight: 100
     line-height: $study-list-toolbar-height
 
-.theadBackground
+/*
+ * Dark gray background with blue border
+ * Spans width of page to create a distinct area for table filters
+ */
+.table-head-background
   height: 121px
   position: absolute
   width: 100%
@@ -76,79 +100,89 @@ placeholder-color(c)
     height: 1px
     z-index: 2
 
-#studyListContainer
+
+.study-list-container
   width: 100%
   padding: 0 $study-list-padding
   position: absolute
   z-index: 2
 
-  .loading
+table.table
-    display: flex;
-    justify-content: center;
-
-    .loading-text
-      color: var(--table-text-secondary-color)
-      font-size: 30px
-      width: fit-content;
-
-  .notFound
-    color: var(--table-text-secondary-color)
-    font-size: 30px
-    font-weight: 200
-    text-align: center
-
-  table#tblStudyList
   width: 100%;
-    max-width: 100%;
   margin-bottom: 20px;
   border-spacing: 0;
   border-collapse: collapse;
+  table-layout: fixed;
 
-    > tr
+  > 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
 
-    > thead
+.study-list-container > table.table > thead
-      white-space: nowrap
+  ::-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
 
-      tr
+.study-list-container > table.table > thead > tr > th
-        th
+  padding: 0;
-          padding: 0
   border-bottom: 1px solid var(--ui-border-color-active);
   width: 100%;
   text-align: left;
   border-top: 0;
 
-          &.studyDate
+.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
 
-          .display-text
+.study-list-container
-            display: inline-block
+  .filters
-            cursor: pointer
+    label
-            width: 100%
+      display: flex;
-            min-width: 95px
+      align-items: center;
-            margin: 0 auto
+      cursor: pointer;
-            color: var(--table-text-primary-color)
+      width: 100%;
-            font-weight: 400
+      min-width: 95px;
-            padding: 20px
+      margin: 0 auto;
-            -webkit-user-select: none
+      color: var(--table-text-primary-color);
-            -moz-user-select: none
+      font-weight: 400;
-            -ms-user-select: none
+      padding: 20px;
-            user-select: none
+      user-select: none;
-
+      font-size: 15px;
-            span
-              font-size: 15px
-              float: left
-
-            i
-              margin: 0 5px
 
       &:hover
-              color: var(--active-color)
+        color: var(--active-color);
 
       &.active, &:active
-              color: var(--active-color)
+        color: var(--active-color);
+    i
+      margin: 0 5px;
 
-          input.studylist-search
+  input
     height: 40px
     margin: 0 5px 20px 5px
     padding: 0 20px
@@ -158,130 +192,41 @@ placeholder-color(c)
     color: var(--input-placeholder-color)
     font-size: 10pt
     font-weight: normal
-            width: calc(100% - 10px)
     border-radius: 4px
-
+    width: calc(100% - 10px); /* Just use padding? */
     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]),
+  .loading-text
-      ::-webkit-datetime-edit-month-field:not([aria-valuenow]),
+    color: var(--table-text-secondary-color)
-      ::-webkit-datetime-edit-day-field:not([aria-valuenow])
+    text-align: center;
-        color: transparent
+    font-size: 30px
 
-    > tbody
+  .notFound
-      tr
+    color: var(--table-text-secondary-color)
-        padding: 5px
+    font-size: 30px
-        background-color: black
+    font-weight: 200
+    text-align: center
 
-        &:nth-child(even)
+@media only screen and (max-width: 768px)
-          background-color: var(--ui-gray-darker)
+  .study-list-header
+    padding: 0 16px;
 
-        td
+  .study-list-container
+    padding: 0;
+
+  .study-list-container > table.table > thead > tr > th
+    padding: 0 13px;
+
+  .study-list-container > table.table > tbody > tr > 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
+  .study-list-container .filters label
-            color: #516873
+    padding: 8px;
 
-          &.emptyValue
+@media only screen and (max-width: 500px)
-            color: var(--ui-gray-light)
+  .hide-xs
-
+    display: none;
-        &:hover, &:active, &.active
-          background-color: var(--table-hover-color)
-          color: var(--text-primary-color)
-
-          td
-            // This selector is necessary to override bootstrap's 'table' class
-            border-top: 1px solid var(--ui-gray-lighter)
-            border-bottom: 1px solid var(--ui-gray-lighter)
-            background-color: var(--table-hover-color)
-
-@media only screen and (max-width: 1362px)
-  #studyListContainer
-    padding: 0 $tablePaddingLargeScreen
-
-    table#tblStudyList
-      thead,
-      tbody
-        tr
-          th,
-          td
-            &:first-child
-              padding-left: $tablePaddingLargeScreen
-
-            &:last-child
-              padding-right: $tablePaddingLargeScreen
-
-@media only screen and (max-width: 1161px)
-  #studyListContainer
-    padding: 0 $tablePaddingBigWidth
-
-    table#tblStudyList
-      thead,
-      tbody
-        tr
-          th,
-          td
-            &:first-child
-              padding-left: $tablePaddingBigScreen
-
-            &:last-child
-              padding-right: $tablePaddingBigScreen
-
-@media only screen and (max-width: 1069px)
-  .theadBackground
-    height: 101px
-
-  .studylist-pagination > .row
-    margin-right: 0;
-
-  .studyListToolbar
-    padding: 0 $tablePaddingMediumScreen
-
-  #studyListContainer
-    padding: 0
-
-    table#tblStudyList
-      thead > tr > th
-
-        &:first-child
-          padding-left: $tablePaddingMediumScreen
-
-        &:last-child
-          padding-right: $tablePaddingMediumScreen
-
-        input.worklist-search
-          padding: 10px
-
-        .display-text
-          padding: 10px 5px
-
-          i
-            width: auto
-
-      tbody > tr > td
-
-        &:first-child
-          padding-left: $tablePaddingMediumScreen
-
-        &:last-child
-          padding-right: $tablePaddingMediumScreen
-
-    .worklistPagination
-      .row
-        margin-left: 0
-        margin-right: 0

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

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

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

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

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

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

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

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

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

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

platform/ui/src/components/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,11 +28,10 @@ class Select extends Component {
 
   render() {
     return (
-      <select
+      <div className="select-ohif-container">
-        className="select-ohif"
+        <label className="select-ohif-label" htmlFor={this.id}>
-        value={this.state.selected}
+          {this.props.label}
-        onChange={this.handleChange}
+          <select className="form-control select-ohif" {...this.props}>
-      >
             {this.props.options.map(({ key, value }) => {
               return (
                 <option key={key} value={value}>
@@ -31,19 +40,10 @@ class Select extends Component {
               );
             })}
           </select>
+        </label>
+      </div>
     );
   }
 }
 
-Select.propTypes = {
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-    })
-  ),
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-};
-
 export { Select };

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

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

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

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

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

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

platform/ui/src/elements/index.js

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

platform/ui/src/hooks/index.js

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

platform/ui/src/hooks/useDebounce.js

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

platform/ui/src/hooks/useMedia.js

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

platform/ui/src/index.js

@@ -1,12 +1,14 @@
 import {
   Checkbox,
   CineDialog,
+  DownloadDialog,
   LayoutButton,
   LayoutChooser,
   MeasurementTable,
   MeasurementTableItem,
   Overlay,
   OverlayTrigger,
+  PageToolbar,
   QuickSwitch,
   RoundedButtonGroup,
   SelectTree,
@@ -15,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/CHANGELOG.md

@@ -3,6 +3,101 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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', () => {
+describe('OHIF Study Viewer Page', function() {
-  before(() => {
+  before(function() {
     cy.openStudy('MISTER^MR');
     cy.waitDicomImage();
     cy.expectMinimumThumbnails(6);
   });
 
-  beforeEach(() => {
+  beforeEach(function() {
     cy.initCommonElementsAliases();
     cy.resetViewport();
   });
 
-  it('checks if series thumbnails are being displayed', () => {
+  it('checks if series thumbnails are being displayed', function() {
     cy.screenshot();
     cy.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();
+    // Wait for start reformatting
-    cy.percyCanvasSnapshot('VTK Extension');
+    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) {
+  cy.document().then(doc => {
+    convertCanvas(doc);
+  });
+
+  // `domTransformation` does not appear to be working
+  // But modifying our immediate DOM does.
+  cy.percySnapshot(name, { ...options }); //, domTransformation: convertCanvas });
+
+  cy.document().then(doc => {
+    unconvertCanvas(doc);
+  });
+});
+
+Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => {
+  cy.get('.toolbar-button-label')
+    .contains('Layout')
+    .click();
+
+  cy.get('.layoutChooser')
+    .find('tr')
+    .eq(rows - 1)
+    .find('td')
+    .eq(columns - 1)
+    .click();
+
+  cy.wait(1000);
+});
+
+function convertCanvas(documentClone) {
   documentClone
     .querySelectorAll('canvas')
     .forEach(selector => canvasToImage(selector));
 
   return documentClone;
-  }
+}
 
-  function canvasToImage(selectorOrEl) {
+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();
+  let canvasImageBase64 = canvas.toDataURL('image/png');
 
+  // Show Image
   image.src = canvasImageBase64;
-    image.style = 'max-width: 100%';
+  image.style = 'width: 100%';
-    canvas.setAttribute('data-percy-modified', true);
+  image.setAttribute('data-percy-image', true);
+  // Hide Canvas
+  canvas.setAttribute('data-percy-canvas', true);
   canvas.parentElement.appendChild(image);
   canvas.style = 'display: none';
-  }
+}
-
-  cy.percySnapshot(name, { ...options, domTransformation: convertCanvas });
-});

platform/viewer/cypress/support/index.js

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

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "1.12.2",
+  "version": "2.2.2",
   "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",

platform/viewer/public/html-templates/script-tag.html

@@ -24,6 +24,7 @@
 
   <div id="root"></div>
 
+  <script type="text/javascript" src="<%= PUBLIC_URL %>app-config.js"></script>
   <script src="/index.umd.js" crossorigin></script>
   <script>
     var containerId = 'root';
@@ -31,25 +32,7 @@
       console.log('OHIF Viewer rendered/updated');
     };
     window.OHIFViewer.installViewer(
-      {
+      window.config, // See `/config/default.js`
-        // routerBasename: '/',
-        servers: {
-          dicomWeb: [
-            {
-              name: 'DCM4CHEE',
-              wadoUriRoot:
-                'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado',
-              qidoRoot:
-                'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
-              wadoRoot:
-                'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
-              qidoSupportsIncludeField: true,
-              imageRendering: 'wadors',
-              thumbnailRendering: 'wadors',
-            },
-          ],
-        },
-      },
       containerId,
       componentRenderedOrUpdatedCallback
     );

platform/viewer/src/App.js

@@ -1,5 +1,6 @@
 import { hot } from 'react-hot-loader/root';
 
+// TODO: This should not be here
 import './config';
 
 import {

platform/viewer/src/appExtensions/MeasurementsPanel/ConnectedMeasurementTable.js

@@ -28,16 +28,12 @@ function getAllTools() {
   return tools;
 }
 
-function getMeasurementText(measurementData) {
+function getMeasurementText(measurementData = {}) {
-  const { location, description } = measurementData;
+  const defaultText = '...';
-  let text = '...';
+  const { location = '', description = '' } = measurementData;
-  if (location) {
+  const result = location + (description ? `(${description})` : '');
-    text = location;
+
-    if (description) {
+  return result || defaultText;
-      text += `(${description})`;
-    }
-  }
-  return text;
 }
 
 function getDataForEachMeasurementNumber(

platform/viewer/src/components/Header/Header.css

@@ -1,11 +1,13 @@
+/* Viewer Route */
 .entry-header {
-  padding: 10px 10px 0;
+  padding: 10px 15px;
   height: var(--top-bar-height);
 }
 
+/* Home Page */
 .entry-header.header-big {
   background: rgba(21, 25, 30, 0.7);
-  padding: 10px var(--study-list-padding);
+  padding: 35px var(--study-list-padding);
   height: auto;
   display: inline-block;
   width: 100%;
@@ -29,7 +31,7 @@
 
 .entry-header.header-big .header-brand {
   height: auto;
-  padding: 25px 0;
+  padding: 0;
 }
 
 .header-logo-image {
@@ -41,7 +43,7 @@
 }
 
 .entry-header.header-big .header-logo-image {
-  margin: 0 20px 0 0;
+  margin-right: 20px;
   width: 50px;
   height: 50px;
 }
@@ -97,26 +99,45 @@
   margin-right: 1rem;
 }
 
-.header-versionInfo {
+.notification-bar {
-  display: inline-block;
+  display: none;
-  color: black;
+  position: absolute;
-  background: #9ccef9;
+  height: 20px;
-  padding: 0px 8px;
+  line-height: 20px;
-  border-radius: 16px;
+  width: 100%;
-  font-size: 12px;
+  background-color: #91b9cd;
-  margin-left: 10px;
+  color: #ffffff;
   font-weight: bold;
+  text-align: center;
 }
 
-.header-versionInfoHome {
+@media only screen and (max-width: 768px) {
+  .entry-header,
+  .entry-header.header-big {
+    padding: 30px 15px 10px 15px;
+  }
+  .entry-header.header-big .header-logo-image {
+    margin: 0 10px 0 0;
+    width: 25px;
+    height: 25px;
+  }
+
+  .entry-header.header-big .header-logo-text {
+    width: 40%;
+  }
+
+  /* Account for notification bar height */
+  .entry-header.header-big .header-brand {
+  }
+
+  .dd-menu {
+  }
+
+  /* Toggle Notification Bar */
+  .notification-bar {
     display: block;
-  color: black;
+  }
-  position: absolute;
+  .header-menu .research-use {
-  bottom: 16px;
+    display: none;
-  right: 0;
+  }
-  background: #9ccef9;
-  padding: 0px 8px;
-  border-radius: 16px;
-  font-size: 12px;
-  font-weight: bold;
 }

platform/viewer/src/components/Header/Header.js

@@ -1,5 +1,4 @@
 import './Header.css';
-import './Header.css';
 
 import { Link, withRouter } from 'react-router-dom';
 import React, { Component } from 'react';
@@ -84,12 +83,15 @@ class Header extends Component {
     // TODO: reset `this.hotKeysData`
   }
 
+  // ANTD -- Hamburger, Drawer, Menu
   render() {
     const { t } = this.props;
     const { appConfig = {} } = this.context;
     const showStudyList =
       appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
     return (
+      <>
+        <div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
         <div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
           <div className="header-left-box">
             {this.props.location && this.props.location.studyLink && (
@@ -101,14 +103,6 @@ class Header extends Component {
               </Link>
             )}
 
-          <span
-            className={`${
-              this.props.home ? 'header-versionInfoHome' : 'header-versionInfo'
-            }`}
-          >
-            v{process.env.VERSION_NUMBER}
-          </span>
-
             {this.props.children}
 
             {showStudyList && !this.props.home && (
@@ -125,8 +119,12 @@ class Header extends Component {
           </div>
 
           <div className="header-menu">
-          <span className="research-use">{t('INVESTIGATIONAL USE ONLY')}</span>
+            <span className="research-use">
+              {t('INVESTIGATIONAL USE ONLY')}
+            </span>
             <Dropdown title={t('Options')} list={this.options} align="right" />
+
+            {/* TODO: We need a Modal service */}
             <AboutModal
               {...this.state}
               onCancel={() =>
@@ -137,6 +135,7 @@ class Header extends Component {
             />
           </div>
         </div>
+      </>
     );
   }
 }

platform/viewer/src/components/OHIFLogo/OHIFLogo.css

@@ -7,7 +7,9 @@
   color: var(--text-primary-color);
 }
 
-.header-brand:hover, .header-brand:active, .header-band:visited {
+.header-brand:hover,
+.header-brand:active,
+.header-band:visited {
   color: var(--text-primary-color);
   text-decoration: none;
 }
@@ -23,3 +25,9 @@
   width: 30px;
   font-size: 30px;
 }
+
+@media only screen and (max-width: 768px) {
+  .header-logo-text {
+    display: none;
+  }
+}

platform/viewer/src/components/OHIFLogo/OHIFLogo.js

@@ -12,6 +12,13 @@ function OHIFLogo() {
       href="http://ohif.org"
     >
       <Icon name="ohif-logo" className="header-logo-image" />
+      {/* Logo text would fit smaller displays at two lines:
+       *
+       * Open Health
+       * Imaging Foundation
+       *
+       * Or as `OHIF` on really small displays
+       */}
       <Icon name="ohif-text-logo" className="header-logo-text" />
     </a>
   );

platform/viewer/src/components/SidePanel.css

@@ -38,3 +38,10 @@
   transition: var(--sidepanel-transition);
   width: 100%;
 }
+
+@media only screen and (max-width: 768px) {
+  /* Account for "Investigational Use" banner height */
+  .FlexboxLayout {
+    height: calc(100% - var(--toolbar-height) - var(--top-bar-height) - 16px);
+  }
+}

platform/viewer/src/components/ViewportGrid/ViewportGrid.js

@@ -91,6 +91,7 @@ const ViewportGrid = function(props) {
 
   return (
     <div
+      data-cy="viewprt-grid"
       style={{
         display: 'grid',
         gridTemplateRows: `repeat(${numRows}, ${rowSize}%)`,

platform/viewer/src/connectedComponents/ConnectedDownloadDialog.js

@@ -0,0 +1,121 @@
+import { connect } from 'react-redux';
+import { DownloadDialog } from '@ohif/ui';
+import { utils } from '@ohif/core';
+import cornerstone from 'cornerstone-core';
+import cornerstoneTools from 'cornerstone-tools';
+
+const MINIMUM_SIZE = 100;
+const DEFAULT_SIZE = 512;
+
+const mapStateToProps = (state, ownProps) => {
+  const { viewportSpecificData, activeViewportIndex } = state.viewports;
+  const { dom: activeEnabledElement } =
+    viewportSpecificData[activeViewportIndex] || {};
+
+  return {
+    minimumSize: MINIMUM_SIZE,
+    defaultSize: DEFAULT_SIZE,
+    canvasClass: 'cornerstone-canvas',
+    onClose: ownProps.toggleDownloadDialog,
+    activeViewport: activeEnabledElement,
+    enableViewport: viewportElement => {
+      if (viewportElement) {
+        cornerstone.enable(viewportElement);
+      }
+    },
+    disableViewport: viewportElement => {
+      if (viewportElement) {
+        cornerstone.disable(viewportElement);
+      }
+    },
+    updateViewportPreview: (viewportElement, downloadCanvas, fileType) =>
+      new Promise(resolve => {
+        cornerstone.fitToWindow(viewportElement);
+
+        viewportElement.addEventListener(
+          'cornerstoneimagerendered',
+          function updateViewport(event) {
+            const enabledElement = cornerstone.getEnabledElement(event.target)
+              .element;
+            const type = 'image/' + fileType;
+            const dataUrl = downloadCanvas.toDataURL(type, 1);
+
+            let newWidth = enabledElement.offsetHeight;
+            let newHeight = enabledElement.offsetWidth;
+
+            if (newWidth > DEFAULT_SIZE || newHeight > DEFAULT_SIZE) {
+              const multiplier = DEFAULT_SIZE / Math.max(newWidth, newHeight);
+              newHeight *= multiplier;
+              newWidth *= multiplier;
+            }
+
+            resolve({ dataUrl, width: newWidth, height: newHeight });
+
+            viewportElement.removeEventListener(
+              'cornerstoneimagerendered',
+              updateViewport
+            );
+          }
+        );
+      }),
+    loadImage: (activeViewport, viewportElement, width, height) =>
+      new Promise(resolve => {
+        if (activeViewport && viewportElement) {
+          const enabledElement = cornerstone.getEnabledElement(activeViewport);
+          const viewport = Object.assign({}, enabledElement.viewport);
+          delete viewport.scale;
+          viewport.translation = {
+            x: 0,
+            y: 0,
+          };
+
+          cornerstone.loadImage(enabledElement.image.imageId).then(image => {
+            cornerstone.displayImage(viewportElement, image);
+            cornerstone.setViewport(viewportElement, viewport);
+            cornerstone.resize(viewportElement, true);
+
+            const MAX_TEXTURE_SIZE = 16384;
+            const newWidth = Math.min(width || image.width, MAX_TEXTURE_SIZE);
+            const newHeight = Math.min(
+              height || image.height,
+              MAX_TEXTURE_SIZE
+            );
+
+            resolve({ image, width: newWidth, height: newHeight });
+          });
+        }
+      }),
+    toggleAnnotations: (toggle, viewportElement) => {
+      cornerstoneTools.store.state.tools.forEach(({ name }) => {
+        if (toggle) {
+          cornerstoneTools.setToolEnabledForElement(viewportElement, name);
+        } else {
+          cornerstoneTools.setToolDisabledForElement(viewportElement, name);
+        }
+      });
+    },
+    downloadBlob: (filename, fileType, viewportElement, downloadCanvas) => {
+      const file = `${filename}.${fileType}`;
+      const mimetype = `image/${fileType}`;
+
+      /* Handles JPEG images for IE11 */
+      if (downloadCanvas.msToBlob && fileType === 'jpeg') {
+        const image = downloadCanvas.toDataURL(mimetype, 1);
+        const blob = utils.b64toBlob(
+          image.replace('data:image/jpeg;base64,', ''),
+          mimetype
+        );
+        return window.navigator.msSaveBlob(blob, file);
+      }
+
+      return cornerstoneTools.SaveAs(viewportElement, file, mimetype);
+    },
+  };
+};
+
+const ConnectedDownloadDialog = connect(
+  mapStateToProps,
+  null
+)(DownloadDialog);
+
+export default ConnectedDownloadDialog;

platform/viewer/src/connectedComponents/ToolbarRow.js

@@ -1,19 +1,21 @@
-import './ToolbarRow.css';
-
 import React, { Component } from 'react';
+import { MODULE_TYPES } from '@ohif/core';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
 import {
   ExpandableToolMenu,
   RoundedButtonGroup,
   ToolbarButton,
 } from '@ohif/ui';
+
+import './ToolbarRow.css';
 import { commandsManager, extensionManager } from './../App.js';
 
 import ConnectedCineDialog from './ConnectedCineDialog';
+import ConnectedDownloadDialog from './ConnectedDownloadDialog';
 import ConnectedLayoutButton from './ConnectedLayoutButton';
 import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
-import { MODULE_TYPES } from '@ohif/core';
+
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
 class ToolbarRow extends Component {
   // TODO: Simplify these? isOpen can be computed if we say "any" value for selected,
@@ -44,10 +46,13 @@ class ToolbarRow extends Component {
       toolbarButtons: toolbarButtonDefinitions,
       activeButtons: [],
       isCineDialogOpen: false,
+      isDownloadScreenShotDialogOpen: false,
     };
 
     this._handleBuiltIn = _handleBuiltIn.bind(this);
 
+    this.toggleDownloadDialog = toggleDownloadDialog.bind(this);
+
     const panelModules = extensionManager.modules[MODULE_TYPES.PANEL];
     this.buttonGroups = {
       left: [
@@ -111,6 +116,13 @@ class ToolbarRow extends Component {
       zIndex: 999,
     };
 
+    const downloadScreenShotContainerStyle = {
+      display: this.state.isDownloadScreenShotDialogOpen ? 'block' : 'none',
+      position: 'absolute',
+      top: '82px',
+      zIndex: 1001,
+    };
+
     const onPress = (side, value) => {
       this.props.handleSidePanelChange(side, value);
     };
@@ -146,6 +158,12 @@ class ToolbarRow extends Component {
         <div className="CineDialogContainer" style={cineDialogContainerStyle}>
           <ConnectedCineDialog />
         </div>
+        <div className="DownloadScreenShotContainer" style={downloadScreenShotContainerStyle}>
+          <ConnectedDownloadDialog
+            isOpen={this.state.isDownloadScreenShotDialogOpen}
+            toggleDownloadDialog={this.toggleDownloadDialog}
+          />
+        </div>
       </>
     );
   }
@@ -277,12 +295,25 @@ function _getVisibleToolbarButtons() {
   return toolbarButtonDefinitions;
 }
 
+/**
+ * Toggles the Download Dialog Modal
+ */
+function toggleDownloadDialog() {
+  this.setState({
+    isDownloadScreenShotDialogOpen: !this.state.isDownloadScreenShotDialogOpen,
+  });
+}
+
 function _handleBuiltIn({ behavior } = {}) {
   if (behavior === 'CINE') {
     this.setState({
       isCineDialogOpen: !this.state.isCineDialogOpen,
     });
   }
+
+  if (behavior === 'DOWNLOAD_SCREEN_SHOT') {
+    this.toggleDownloadDialog();
+  }
 }
 
 export default withTranslation('Common')(ToolbarRow);

platform/viewer/src/connectedComponents/ViewerMain.js

@@ -59,12 +59,7 @@ class ViewerMain extends Component {
     // Get all the display sets for the viewer studies
     if (this.props.studies) {
       const displaySets = this.getDisplaySets(this.props.studies);
-
+      this.setState({ displaySets }, this.fillEmptyViewportPanes);
-      this.setState({
-        displaySets,
-      });
-
-      this.fillEmptyViewportPanes();
     }
   }
 
@@ -78,12 +73,7 @@ class ViewerMain extends Component {
       (viewportAmount !== prevViewportAmount && !isVtk)
     ) {
       const displaySets = this.getDisplaySets(this.props.studies);
-
+      this.setState({ displaySets }, this.fillEmptyViewportPanes);
-      this.setState({
-        displaySets,
-      });
-
-      this.fillEmptyViewportPanes();
     }
   }
 

platform/viewer/src/routes/StandaloneRouting.js

@@ -1,10 +1,10 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
-import { log, metadata, studies, utils } from "@ohif/core";
+import { log, metadata, studies, utils } from '@ohif/core';
 
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import Viewer from "../connectedComponents/Viewer";
+import ConnectedViewer from '../connectedComponents/ConnectedViewer';
-import { extensionManager } from "./../App.js";
+import { extensionManager } from './../App.js';
-import qs from "querystring";
+import qs from 'querystring';
 
 const { OHIFStudyMetadata } = metadata;
 const { retrieveStudiesMetadata } = studies;
@@ -13,12 +13,14 @@ const { studyMetadataManager, updateMetaDataManager } = utils;
 class StandaloneRouting extends Component {
   state = {
     studies: null,
-    error: null
+    error: null,
   };
 
+  studyInstanceUids = [];
+
   static propTypes = {
     location: PropTypes.object,
-    store: PropTypes.object
+    store: PropTypes.object,
   };
 
   static parseQueryAndFetchStudies(query) {
@@ -26,7 +28,7 @@ class StandaloneRouting extends Component {
       const url = query.url;
 
       if (!url) {
-        return reject(new Error("No URL was specified. Use ?url=$yourURL"));
+        return reject(new Error('No URL was specified. Use ?url=$yourURL'));
       }
 
       // Define a request to the server to retrieve the study data
@@ -34,19 +36,19 @@ class StandaloneRouting extends Component {
       const oReq = new XMLHttpRequest();
 
       // Add event listeners for request failure
-      oReq.addEventListener("error", error => {
+      oReq.addEventListener('error', error => {
-        log.warn("An error occurred while retrieving the JSON data");
+        log.warn('An error occurred while retrieving the JSON data');
         reject(error);
       });
 
       // When the JSON has been returned, parse it into a JavaScript Object
       // and render the OHIF Viewer with this data
-      oReq.addEventListener("load", () => {
+      oReq.addEventListener('load', () => {
         // Parse the response content
         // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseText
         if (!oReq.responseText) {
-          log.warn("Response was undefined");
+          log.warn('Response was undefined');
-          reject(new Error("Response was undefined"));
+          reject(new Error('Response was undefined'));
         }
 
         log.info(JSON.stringify(oReq.responseText, null, 2));
@@ -54,9 +56,9 @@ class StandaloneRouting extends Component {
         const data = JSON.parse(oReq.responseText);
         if (data.servers && query.studyInstanceUids) {
           const server = data.servers.dicomWeb[0];
-          server.type = "dicomWeb";
+          server.type = 'dicomWeb';
 
-          const studyInstanceUids = query.studyInstanceUids.split(";");
+          const studyInstanceUids = query.studyInstanceUids.split(';');
           const seriesInstanceUids = [];
 
           retrieveStudiesMetadata(
@@ -80,8 +82,8 @@ class StandaloneRouting extends Component {
       // In this case we have a server-side route called /api/
       // which responds to GET requests with the study data
       log.info(`Sending Request to: ${url}`);
-      oReq.open("GET", url);
+      oReq.open('GET', url);
-      oReq.setRequestHeader("Accept", "application/json");
+      oReq.setRequestHeader('Accept', 'application/json');
 
       // Fire the request to the server
       oReq.send();
@@ -101,13 +103,14 @@ class StandaloneRouting extends Component {
       studyMetadataManager.purge();
 
       // Map studies to new format, update metadata manager?
+      const uniqueStudyUids = new Set();
       const updatedStudies = studies.map(study => {
         const studyMetadata = new OHIFStudyMetadata(
           study,
           study.studyInstanceUid
         );
         const sopClassHandlerModules =
-          extensionManager.modules["sopClassHandlerModule"];
+          extensionManager.modules['sopClassHandlerModule'];
 
         study.displaySets =
           study.displaySets ||
@@ -118,10 +121,12 @@ class StandaloneRouting extends Component {
         updateMetaDataManager(study);
 
         studyMetadataManager.add(studyMetadata);
+        uniqueStudyUids.add(study.studyInstanceUid);
 
         return study;
       });
 
+      this.studyInstanceUids = Array.from(uniqueStudyUids);
       this.setState({ studies: updatedStudies });
     } catch (error) {
       this.setState({ error });
@@ -134,8 +139,12 @@ class StandaloneRouting extends Component {
     } else if (!this.state.studies) {
       return <div>Loading...</div>;
     }
-
+    return (
-    return <Viewer studies={this.state.studies} />;
+      <ConnectedViewer
+        studies={this.state.studies}
+        studyInstanceUids={this.studyInstanceUids}
+      />
+    );
   }
 }
 

platform/viewer/src/studylist/ConnectedStudyList.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 
-import StudyListWithData from './StudyListWithData.js';
+import StudyListRoute from './StudyListRoute.js';
 
 const isActive = a => a.active === true;
 
@@ -16,6 +16,6 @@ const mapStateToProps = state => {
 const ConnectedStudyList = connect(
   mapStateToProps,
   null
-)(StudyListWithData);
+)(StudyListRoute);
 
 export default ConnectedStudyList;

platform/viewer/src/studylist/StudyListRoute.js

@@ -0,0 +1,552 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Dropzone from 'react-dropzone';
+import OHIF from '@ohif/core';
+import { withRouter } from 'react-router-dom';
+import { withTranslation } from 'react-i18next';
+import {
+  StudyList,
+  PageToolbar,
+  TablePagination,
+  useDebounce,
+  useMedia,
+} from '@ohif/ui';
+import ConnectedHeader from '../connectedComponents/ConnectedHeader.js';
+import * as RoutesUtil from '../routes/routesUtil';
+import moment from 'moment';
+import ConnectedDicomFilesUploader from '../googleCloud/ConnectedDicomFilesUploader';
+import ConnectedDicomStorePicker from '../googleCloud/ConnectedDicomStorePicker';
+import filesToStudies from '../lib/filesToStudies.js';
+
+// Contexts
+import UserManagerContext from '../context/UserManagerContext';
+import WhiteLabellingContext from '../context/WhiteLabellingContext';
+import AppContext from '../context/AppContext';
+
+const { urlUtil: UrlUtil } = OHIF.utils;
+
+function StudyListRoute(props) {
+  const { history, server, t, user, studyListFunctionsEnabled } = props;
+  // ~~ STATE
+  const [sort, setSort] = useState({
+    fieldName: 'patientName',
+    direction: 'desc',
+  });
+  const [filterValues, setFilterValues] = useState({
+    studyDateTo: null,
+    studyDateFrom: null,
+    patientName: '',
+    patientId: '',
+    accessionNumber: '',
+    studyDate: '',
+    modalities: '',
+    studyDescription: '',
+    //
+    patientNameOrId: '',
+    accessionOrModalityOrDescription: '',
+    //
+    allFields: '',
+  });
+  const [studies, setStudies] = useState([]);
+  const [searchStatus, setSearchStatus] = useState({
+    isSearchingForStudies: false,
+    error: null,
+  });
+  const [activeModalId, setActiveModalId] = useState(null);
+  const [rowsPerPage, setRowsPerPage] = useState(25);
+  const [pageNumber, setPageNumber] = useState(0);
+  // ~~ RESPONSIVE
+  const displaySize = useMedia(
+    ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
+    ['large', 'medium', 'small'],
+    'small'
+  );
+  // ~~ DEBOUNCED INPUT
+  const debouncedSort = useDebounce(sort, 200);
+  const debouncedFilters = useDebounce(filterValues, 250);
+
+  // Google Cloud Adapter for DICOM Store Picking
+  const { appConfig = {} } = AppContext;
+  const isGoogleCHAIntegrationEnabled =
+    !server && appConfig.enableGoogleCloudAdapter;
+  if (isGoogleCHAIntegrationEnabled) {
+    setActiveModalId('DicomStorePicker');
+  }
+
+  // Called when relevant state/props are updated
+  // Watches filters and sort, debounced
+  useEffect(() => {
+    const fetchStudies = async () => {
+      try {
+        setSearchStatus({ error: null, isSearchingForStudies: true });
+
+        const response = await getStudyList(
+          server,
+          debouncedFilters,
+          debouncedSort,
+          rowsPerPage,
+          pageNumber,
+          displaySize
+        );
+
+        setStudies(response);
+        setSearchStatus({ error: null, isSearchingForStudies: false });
+      } catch (error) {
+        console.warn(error);
+        setSearchStatus({ error: true, isFetching: false });
+      }
+    };
+
+    fetchStudies();
+  }, [debouncedFilters, debouncedSort, rowsPerPage, pageNumber, displaySize]);
+
+  // TODO: Update Server
+  // if (this.props.server !== prevProps.server) {
+  //   this.setState({
+  //     modalComponentId: null,
+  //     searchData: null,
+  //     studies: null,
+  //   });
+  // }
+
+  const onDrop = async acceptedFiles => {
+    try {
+      const studiesFromFiles = await filesToStudies(acceptedFiles);
+      setStudies(studiesFromFiles);
+    } catch (error) {
+      setSearchStatus({ isSearchingForStudies: false, error });
+    }
+  };
+
+  if (searchStatus.error) {
+    return <div>Error: {JSON.stringify(searchStatus.error)}</div>;
+  } else if (studies === [] && !activeModalId) {
+    return <div>Loading...</div>;
+  }
+
+  let healthCareApiButtons = null;
+  let healthCareApiWindows = null;
+
+  if (appConfig.enableGoogleCloudAdapter) {
+    const isModalOpen = activeModalId === 'DicomStorePicker';
+    updateURL(isModalOpen, appConfig, server, history);
+
+    healthCareApiWindows = (
+      <ConnectedDicomStorePicker
+        isOpen={activeModalId === 'DicomStorePicker'}
+        onClose={() => setActiveModalId(null)}
+      />
+    );
+
+    healthCareApiButtons = (
+      <div
+        className="form-inline btn-group pull-right"
+        style={{ padding: '20px' }}
+      >
+        <button
+          className="btn btn-primary"
+          onClick={() => setActiveModalId('DicomStorePicker')}
+        >
+          {t('Change DICOM Store')}
+        </button>
+      </div>
+    );
+  }
+
+  function handleSort(fieldName) {
+    let sortFieldName = fieldName;
+    let sortDirection = 'asc';
+
+    if (fieldName === sort.fieldName) {
+      if (sort.direction === 'asc') {
+        sortDirection = 'desc';
+      } else {
+        sortFieldName = null;
+        sortDirection = null;
+      }
+    }
+
+    setSort({
+      fieldName: sortFieldName,
+      direction: sortDirection,
+    });
+  }
+
+  function handleFilterChange(fieldName, value) {
+    const updatedFilterValues = Object.assign({}, filterValues);
+
+    updatedFilterValues[fieldName] = value;
+    setFilterValues(updatedFilterValues);
+  }
+
+  return (
+    <>
+      <WhiteLabellingContext.Consumer>
+        {whiteLabelling => (
+          <UserManagerContext.Consumer>
+            {userManager => (
+              <ConnectedHeader
+                home={true}
+                user={user}
+                userManager={userManager}
+              >
+                {whiteLabelling.logoComponent}
+              </ConnectedHeader>
+            )}
+          </UserManagerContext.Consumer>
+        )}
+      </WhiteLabellingContext.Consumer>
+      <div className="study-list-header">
+        <div className="header">
+          <h1 style={{ fontWeight: 300, fontSize: '22px' }}>
+            {t('StudyList')}
+          </h1>
+        </div>
+        <div className="actions">
+          {studyListFunctionsEnabled && (
+            <PageToolbar
+              onImport={() => setActiveModalId('DicomFilesUploader')}
+            />
+          )}
+          <span className="study-count">{studies.length}</span>
+        </div>
+      </div>
+
+      <div className="table-head-background" />
+      <div className="study-list-container">
+        {/* STUDY LIST OR DROP ZONE? */}
+        <StudyList
+          isLoading={searchStatus.isSearchingForStudies}
+          hasError={searchStatus.error === true}
+          // Rows
+          studies={studies}
+          onSelectItem={studyInstanceUID => {
+            const viewerPath = RoutesUtil.parseViewerPath(appConfig, server, {
+              studyInstanceUids: studyInstanceUID,
+            });
+            history.push(viewerPath);
+          }}
+          // Table Header
+          sort={sort}
+          onSort={handleSort}
+          filterValues={filterValues}
+          onFilterChange={handleFilterChange}
+          studyListDateFilterNumDays={appConfig.studyListDateFilterNumDays}
+        >
+          {studyListFunctionsEnabled ? (
+            <ConnectedDicomFilesUploader
+              isOpen={activeModalId === 'DicomFilesUploader'}
+              onClose={() => setActiveModalId(null)}
+            />
+          ) : null}
+          {healthCareApiButtons}
+          {healthCareApiWindows}
+        </StudyList>
+        }{/* PAGINATION FOOTER */}
+        <TablePagination
+          currentPage={pageNumber}
+          nextPageFunc={() => setPageNumber(pageNumber + 1)}
+          prevPageFunc={() => setPageNumber(pageNumber - 1)}
+          onRowsPerPageChange={rows => setRowsPerPage(rows)}
+          rowsPerPage={rowsPerPage}
+          recordCount={studies.length}
+        />
+      </div>
+    </>
+  );
+}
+
+StudyListRoute.propTypes = {
+  filters: PropTypes.object,
+  patientId: PropTypes.string,
+  server: PropTypes.object,
+  user: PropTypes.object,
+  history: PropTypes.object,
+  studyListFunctionsEnabled: PropTypes.bool,
+};
+
+StudyListRoute.defaultProps = {
+  studyListFunctionsEnabled: true,
+};
+
+function updateURL(isModalOpen, appConfig, server, history) {
+  if (isModalOpen) {
+    return;
+  }
+
+  const listPath = RoutesUtil.parseStudyListPath(appConfig, server);
+
+  if (UrlUtil.paramString.isValidPath(listPath)) {
+    const { location = {} } = history;
+    if (location.pathname !== listPath) {
+      history.replace(listPath);
+    }
+  }
+}
+
+/**
+ * Not ideal, but we use displaySize to determine how the filters should be used
+ * to build the collection of promises we need to fetch a result set.
+ *
+ * @param {*} server
+ * @param {*} filters
+ * @param {object} sort
+ * @param {string} sort.fieldName - field to sort by
+ * @param {string} sort.direction - direction to sort
+ * @param {number} rowsPerPage - Number of results to return
+ * @param {number} pageNumber - Used to determine results offset
+ * @param {string} displaySize - small, medium, large
+ * @returns
+ */
+async function getStudyList(
+  server,
+  filters,
+  sort,
+  rowsPerPage,
+  pageNumber,
+  displaySize
+) {
+  const {
+    allFields,
+    patientNameOrId,
+    accessionOrModalityOrDescription,
+  } = filters;
+  const sortFieldName = sort.fieldName || 'patientName';
+  const sortDirection = sort.direction || 'desc';
+  const studyDateFrom =
+    filters.studyDateFrom ||
+    moment()
+      .subtract(25000, 'days')
+      .toDate();
+  const studyDateTo = filters.studyDateTo || new Date();
+
+  const mappedFilters = {
+    patientId: filters.patientId,
+    patientName: filters.patientName,
+    accessionNumber: filters.accessionNumber,
+    studyDescription: filters.studyDescription,
+    modalitiesInStudy: filters.modalities,
+    // NEVER CHANGE
+    studyDateFrom,
+    studyDateTo,
+    limit: rowsPerPage,
+    offset: pageNumber * rowsPerPage,
+    fuzzymatching: server.supportsFuzzyMatching === true,
+  };
+
+  const studies = await _fetchStudies(server, mappedFilters, displaySize, {
+    allFields,
+    patientNameOrId,
+    accessionOrModalityOrDescription,
+  });
+
+  // Only the fields we use
+  const mappedStudies = studies.map(study => {
+    return {
+      accessionNumber: study.accessionNumber, // "1"
+      modalities: study.modalities, // "SEG\\MR"  ​​
+      // numberOfStudyRelatedInstances: "3"
+      // numberOfStudyRelatedSeries: "3"
+      // patientBirthdate: undefined
+      patientId: study.patientId, // "NOID"
+      patientName: study.patientName, // "NAME^NONE"
+      // patientSex: "M"
+      // referringPhysicianName: undefined
+      studyDate: study.studyDate, // "Jun 28, 2002"
+      studyDescription: study.studyDescription, // "BRAIN"
+      // studyId: "No Study ID"
+      studyInstanceUid: study.studyInstanceUid, // "1.3.6.1.4.1.5962.99.1.3814087073.479799962.1489872804257.3.0"
+      // studyTime: "160956.0"
+    };
+  });
+
+  // For our smaller displays, map our field name to a single
+  // field we can actually sort by.
+  const sortFieldNameMapping = {
+    allFields: 'patientName',
+    patientNameOrId: 'patientName',
+    accessionOrModalityOrDescription: 'modalities',
+  };
+  const mappedSortFieldName =
+    sortFieldNameMapping[sortFieldName] || sortFieldName;
+
+  const sortedStudies = _sortStudies(
+    mappedStudies,
+    mappedSortFieldName,
+    sortDirection
+  );
+
+  // Because we've merged multiple requests, we may have more than
+  // our rows per page. Let's `take` that number from our sorted array.
+  // This "might" cause paging issues.
+  const numToTake =
+    sortedStudies.length < rowsPerPage ? sortedStudies.length : rowsPerPage;
+  const result = sortedStudies.slice(0, numToTake);
+
+  return result;
+}
+
+/**
+ *
+ *
+ * @param {object[]} studies - Array of studies to sort
+ * @param {string} studies.studyDate - Date in 'MMM DD, YYYY' format
+ * @param {string} field - name of properties on study to sort by
+ * @param {string} order - 'asc' or 'desc'
+ * @returns
+ */
+function _sortStudies(studies, field, order) {
+  // Make sure our studyDate is in a valid format and create copy of studies array
+  const sortedStudies = studies.map(study => {
+    if (!moment(study.studyDate, 'MMM DD, YYYY', true).isValid()) {
+      study.studyDate = moment(study.studyDate, 'YYYYMMDD').format(
+        'MMM DD, YYYY'
+      );
+    }
+    return study;
+  });
+
+  // Sort by field
+  sortedStudies.sort(function (a, b) {
+    let fieldA = a[field];
+    let fieldB = b[field];
+    if (field === 'studyDate') {
+      fieldA = moment(fieldA).toISOString();
+      fieldB = moment(fieldB).toISOString();
+    }
+
+    // Order
+    if (order === 'desc') {
+      if (fieldA < fieldB) {
+        return -1;
+      }
+      if (fieldA > fieldB) {
+        return 1;
+      }
+      return 0;
+    } else {
+      if (fieldA > fieldB) {
+        return -1;
+      }
+      if (fieldA < fieldB) {
+        return 1;
+      }
+      return 0;
+    }
+  });
+
+  return sortedStudies;
+}
+
+/**
+ * We're forced to do this because DICOMWeb does not support "AND|OR" searches
+ * across multiple fields. This allows us to make multiple requests, remove
+ * duplicates, and return the result set as if it were supported
+ *
+ * @param {object} server
+ * @param {Object} filters
+ * @param {string} displaySize - small, medium, or large
+ * @param {string} multi.allFields
+ * @param {string} multi.patientNameOrId
+ * @param {string} multi.accessionOrModalityOrDescription
+ */
+async function _fetchStudies(
+  server,
+  filters,
+  displaySize,
+  { allFields, patientNameOrId, accessionOrModalityOrDescription }
+) {
+  let queryFiltersArray = [filters];
+
+  if (displaySize === 'small') {
+    const firstSet = _getQueryFiltersForValue(
+      filters,
+      [
+        'patientId',
+        'patientName',
+        'accessionNumber',
+        'studyDescription',
+        'modalitiesInStudy',
+      ],
+      allFields
+    );
+
+    if (firstSet.length) {
+      queryFiltersArray = firstSet;
+    }
+  } else if (displaySize === 'medium') {
+    const firstSet = _getQueryFiltersForValue(
+      filters,
+      ['patientId', 'patientName'],
+      patientNameOrId
+    );
+
+    const secondSet = _getQueryFiltersForValue(
+      filters,
+      ['accessionNumber', 'studyDescription', 'modalitiesInStudy'],
+      accessionOrModalityOrDescription
+    );
+
+    if (firstSet.length || secondSet.length) {
+      queryFiltersArray = firstSet.concat(secondSet);
+    }
+  }
+
+  const queryPromises = [];
+
+  queryFiltersArray.forEach(filter => {
+    const searchStudiesPromise = OHIF.studies.searchStudies(server, filter);
+    queryPromises.push(searchStudiesPromise);
+  });
+
+  const lotsOfStudies = await Promise.all(queryPromises);
+  const studies = [];
+
+  // Flatten and dedupe
+  lotsOfStudies.forEach(arrayOfStudies => {
+    if (arrayOfStudies) {
+      arrayOfStudies.forEach(study => {
+        if (!studies.some(s => s.studyInstanceUid === study.studyInstanceUid)) {
+          studies.push(study);
+        }
+      });
+    }
+  });
+
+  return studies;
+}
+
+/**
+ *
+ *
+ * @param {*} filters
+ * @param {*} fields - Array of string fields
+ * @param {*} value
+ */
+function _getQueryFiltersForValue(filters, fields, value) {
+  const queryFilters = [];
+
+  if (value === '' || !value) {
+    return queryFilters;
+  }
+
+  fields.forEach(field => {
+    const filter = Object.assign(
+      {
+        patientId: '',
+        patientName: '',
+        accessionNumber: '',
+        studyDescription: '',
+        modalitiesInStudy: '',
+      },
+      filters
+    );
+
+    filter[field] = value;
+    queryFilters.push(filter);
+  });
+
+  return queryFilters;
+}
+
+export default withRouter(withTranslation('Common')(StudyListRoute));

platform/viewer/src/studylist/StudyListWithData.js

@@ -1,349 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Dropzone from 'react-dropzone';
-import OHIF from '@ohif/core';
-import { withRouter } from 'react-router-dom';
-import { withTranslation } from 'react-i18next';
-import { StudyList } from '@ohif/ui';
-import ConnectedHeader from '../connectedComponents/ConnectedHeader.js';
-import * as RoutesUtil from '../routes/routesUtil';
-import moment from 'moment';
-import isEqual from 'lodash.isequal';
-import ConnectedDicomFilesUploader from '../googleCloud/ConnectedDicomFilesUploader';
-import ConnectedDicomStorePicker from '../googleCloud/ConnectedDicomStorePicker';
-import filesToStudies from '../lib/filesToStudies.js';
-
-const { urlUtil: UrlUtil } = OHIF.utils;
-// Contexts
-import UserManagerContext from '../context/UserManagerContext';
-import WhiteLabellingContext from '../context/WhiteLabellingContext';
-import AppContext from '../context/AppContext';
-
-class StudyListWithData extends Component {
-  static contextType = AppContext;
-  state = {
-    searchOutdated: true,
-    studies: [],
-    searchingStudies: false,
-    error: null,
-    modalComponentId: null,
-  };
-
-  static propTypes = {
-    filters: PropTypes.object,
-    patientId: PropTypes.string,
-    server: PropTypes.object,
-    user: PropTypes.object,
-    history: PropTypes.object,
-    studyListFunctionsEnabled: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    studyListFunctionsEnabled: true,
-  };
-
-  static rowsPerPage = 25;
-  static defaultSort = { field: 'patientName', order: 'desc' };
-
-  static studyListDateFilterNumDays = 25000; // TODO: put this in the settings
-  static defaultStudyDateFrom = moment()
-    .subtract(StudyListWithData.studyListDateFilterNumDays, 'days')
-    .toDate();
-  static defaultStudyDateTo = new Date();
-  static defaultSearchData = {
-    currentPage: 0,
-    rowsPerPage: StudyListWithData.rowsPerPage,
-    studyDateFrom: StudyListWithData.defaultStudyDateFrom,
-    studyDateTo: StudyListWithData.defaultStudyDateTo,
-    sortData: StudyListWithData.defaultSort,
-  };
-
-  componentDidMount() {
-    const { appConfig = {} } = this.context;
-    // TODO: Avoid using timepoints here
-    //const params = { studyInstanceUids, seriesInstanceUids, timepointId, timepointsFilter={} };
-    if (!this.props.server && appConfig.enableGoogleCloudAdapter) {
-      this.setState({
-        modalComponentId: 'DicomStorePicker',
-        searchOutdated: false,
-      });
-    } else {
-      this.searchForStudies({
-        ...StudyListWithData.defaultSearchData,
-        ...(this.props.filters || {}),
-      });
-    }
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const hasNewServer = !isEqual(this.props.server, prevProps.server);
-
-    const { searchOutdated, searchingStudies } = this.state;
-
-    if (!searchingStudies) {
-      if (hasNewServer) {
-        const { appConfig = {} } = this.context;
-
-        const newState = {
-          searchOutdated: true,
-          studies: null,
-        };
-        if (appConfig.enableGoogleCloudAdapter) {
-          newState.modalComponentId = null;
-        }
-        this.setState(newState);
-      }
-
-      if (searchOutdated) {
-        this.searchForStudies();
-      }
-    }
-  }
-
-  searchForStudies = (searchData = StudyListWithData.defaultSearchData) => {
-    const { server = {} } = this.props;
-    const filter = {
-      patientId: searchData.patientId,
-      patientName: searchData.patientName,
-      accessionNumber: searchData.accessionNumber,
-      studyDescription: searchData.studyDescription,
-      modalitiesInStudy: searchData.modalities,
-      studyDateFrom: searchData.studyDateFrom,
-      studyDateTo: searchData.studyDateTo,
-      limit: searchData.rowsPerPage,
-      offset: searchData.currentPage * searchData.rowsPerPage,
-    };
-
-    if (server.supportsFuzzyMatching) {
-      filter.fuzzymatching = true;
-    }
-
-    // TODO: add sorting
-    const promise = OHIF.studies.searchStudies(server, filter);
-
-    this.setState({
-      searchingStudies: true,
-    });
-    promise
-      .then(studies => {
-        if (!studies) {
-          studies = [];
-        }
-
-        const { field, order } = searchData.sortData;
-        let sortedStudies = studies.map(study => {
-          if (!moment(study.studyDate, 'MMM DD, YYYY', true).isValid()) {
-            study.studyDate = moment(study.studyDate, 'YYYYMMDD').format(
-              'MMM DD, YYYY'
-            );
-          }
-          return study;
-        });
-
-        sortedStudies.sort(function(a, b) {
-          let fieldA = a[field];
-          let fieldB = b[field];
-          if (field === 'studyDate') {
-            fieldA = moment(fieldA).toISOString();
-            fieldB = moment(fieldB).toISOString();
-          }
-          if (order === 'desc') {
-            if (fieldA < fieldB) {
-              return -1;
-            }
-            if (fieldA > fieldB) {
-              return 1;
-            }
-            return 0;
-          } else {
-            if (fieldA > fieldB) {
-              return -1;
-            }
-            if (fieldA < fieldB) {
-              return 1;
-            }
-            return 0;
-          }
-        });
-
-        this.setState({
-          studies: sortedStudies,
-          searchingStudies: false,
-          searchOutdated: false,
-        });
-      })
-      .catch(error => {
-        this.setState({
-          error: true,
-          searchingStudies: false,
-          searchOutdated: false,
-        });
-
-        throw new Error(error);
-      });
-  };
-
-  onImport = () => {
-    this.openModal('DicomFilesUploader');
-  };
-
-  openModal = modalComponentId => {
-    this.setState({
-      modalComponentId,
-    });
-  };
-
-  closeModal = () => {
-    this.setState({ modalComponentId: null });
-  };
-
-  onSelectItem = studyInstanceUID => {
-    const { appConfig = {} } = this.context;
-    const { server } = this.props;
-    const viewerPath = RoutesUtil.parseViewerPath(appConfig, server, {
-      studyInstanceUids: studyInstanceUID,
-    });
-
-    if (UrlUtil.paramString.isValidPath(viewerPath)) {
-      this.props.history.push(viewerPath);
-    }
-  };
-
-  updateURL(modalOpened) {
-    if (!modalOpened) {
-      const { appConfig = {} } = this.context;
-      const { server } = this.props;
-      const listPath = RoutesUtil.parseStudyListPath(appConfig, server);
-
-      if (UrlUtil.paramString.isValidPath(listPath)) {
-        const { location = {} } = this.props.history;
-        if (location.pathname !== listPath) {
-          this.props.history.replace(listPath);
-        }
-      }
-    }
-  }
-
-  onSearch = searchData => {
-    this.searchForStudies(searchData);
-  };
-
-  closeModals = () => {
-    this.setState({
-      modalComponentId: null,
-    });
-  };
-
-  render() {
-    const { appConfig = {} } = this.context;
-    const onDrop = async acceptedFiles => {
-      try {
-        const studies = await filesToStudies(acceptedFiles);
-
-        this.setState({ studies });
-      } catch (error) {
-        this.setState({ error });
-      }
-    };
-
-    if (this.state.error) {
-      return <div>Error: {JSON.stringify(this.state.error)}</div>;
-    }
-
-    let healthCareApiButtons = null;
-    let healthCareApiWindows = null;
-
-    if (appConfig.enableGoogleCloudAdapter) {
-      const modalOpened = this.state.modalComponentId === 'DicomStorePicker';
-      this.updateURL(modalOpened);
-
-      healthCareApiWindows = (
-        <ConnectedDicomStorePicker
-          isOpen={modalOpened}
-          onClose={this.closeModals}
-        />
-      );
-
-      healthCareApiButtons = (
-        <div
-          className="form-inline btn-group pull-right"
-          style={{ padding: '20px' }}
-        >
-          <button
-            className="btn btn-primary"
-            onClick={() => this.openModal('DicomStorePicker')}
-          >
-            {this.props.t('Change DICOM Store')}
-          </button>
-        </div>
-      );
-    }
-
-    const studyList = (
-      <div className="paginationArea">
-        {this.state.studies || this.state.searchingStudies ? (
-          <StudyList
-            loading={this.state.searchingStudies}
-            studies={this.state.studies}
-            studyListFunctionsEnabled={this.props.studyListFunctionsEnabled}
-            onImport={this.onImport}
-            onSelectItem={this.onSelectItem}
-            pageSize={this.rowsPerPage}
-            defaultSort={StudyListWithData.defaultSort}
-            studyListDateFilterNumDays={
-              StudyListWithData.studyListDateFilterNumDays
-            }
-            onSearch={this.onSearch}
-          >
-            {this.props.studyListFunctionsEnabled ? (
-              <ConnectedDicomFilesUploader
-                isOpen={this.state.modalComponentId === 'DicomFilesUploader'}
-                onClose={this.closeModals}
-              />
-            ) : null}
-            {healthCareApiButtons}
-            {healthCareApiWindows}
-          </StudyList>
-        ) : (
-          <Dropzone onDrop={onDrop}>
-            {({ getRootProps, getInputProps }) => (
-              <div {...getRootProps()} className={'drag-drop-instructions'}>
-                <h3>
-                  {this.props.t(
-                    'Drag and Drop DICOM files here to load them in the Viewer'
-                  )}
-                </h3>
-                <h4>
-                  {this.props.t("Or click to load the browser's file selector")}
-                </h4>
-                <input {...getInputProps()} style={{ display: 'none' }} />
-              </div>
-            )}
-          </Dropzone>
-        )}
-      </div>
-    );
-    return (
-      <>
-        <WhiteLabellingContext.Consumer>
-          {whiteLabelling => (
-            <UserManagerContext.Consumer>
-              {userManager => (
-                <ConnectedHeader
-                  home={true}
-                  user={this.props.user}
-                  userManager={userManager}
-                >
-                  {whiteLabelling.logoComponent}
-                </ConnectedHeader>
-              )}
-            </UserManagerContext.Consumer>
-          )}
-        </WhiteLabellingContext.Consumer>
-        {studyList}
-      </>
-    );
-  }
-}
-
-export default withRouter(withTranslation('Common')(StudyListWithData));

platform/viewer/src/theme-tide.css

@@ -38,8 +38,10 @@
     --text-disabled-color: #878787;
 
     --input-background-color: #2c363f;
+    --input-placeholder-color--hover: #4d5a63;
     --input-placeholder-color: #d3d3d3;
 
+
     --table-hover-color: #2c363f;
     --table-text-primary-color: #ffffff;
     --table-text-secondary-color: #91b9cd;

yarn.lock

@@ -3164,7 +3164,7 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
-airbnb-prop-types@^2.10.0, airbnb-prop-types@^2.15.0, airbnb-prop-types@^2.8.1:
+airbnb-prop-types@^2.10.0, airbnb-prop-types@^2.14.0, airbnb-prop-types@^2.15.0, airbnb-prop-types@^2.8.1:
   version "2.15.0"
   resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz#5287820043af1eb469f5b0af0d6f70da6c52aaef"
   integrity sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA==
@@ -7164,6 +7164,14 @@ env-variable@0.0.x:
   resolved "https://registry.yarnpkg.com/env-variable/-/env-variable-0.0.5.tgz#913dd830bef11e96a039c038d4130604eba37f88"
   integrity sha512-zoB603vQReOFvTg5xMl9I1P2PnHsHQQKTEowsKKD7nseUfJq6UWzK+4YtlWUO1nhiQUxe6XMkk+JleSZD1NZFA==
 
+enzyme-shallow-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.0.tgz#d8e4603495e6ea279038eef05a4bf4887b55dc69"
+  integrity sha512-VUf+q5o1EIv2ZaloNQQtWCJM9gpeux6vudGVH6vLmfPXFLRuxl5+Aq3U260wof9nn0b0i+P5OEUXm1vnxkRpXQ==
+  dependencies:
+    has "^1.0.3"
+    object-is "^1.0.1"
+
 err-code@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
@@ -7951,7 +7959,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.0, fbjs@^0.8.4:
+fbjs@^0.8.0:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@@ -15053,6 +15061,13 @@ raf-schd@^4.0.2:
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0"
   integrity sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ==
 
+raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 ramda@0.24.1:
   version "0.24.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
@@ -15124,14 +15139,6 @@ re-resizable@^4.11.0:
   resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-4.11.0.tgz#d5df10bda445c4ec0945751a223bf195afb61890"
   integrity sha512-dye+7rERqNf/6mDT1iwps+4Gf42420xuZgygF33uX178DxffqcyeuHbBuJ382FIcB5iP6mMZOhfW7kI0uXwb/Q==
 
-react-addons-shallow-compare@^15.6.2:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.6.2.tgz#198a00b91fc37623db64a28fd17b596ba362702f"
-  integrity sha1-GYoAuR/DdiPbZKKP0XtZa6NicC8=
-  dependencies:
-    fbjs "^0.8.4"
-    object-assign "^4.1.0"
-
 react-bootstrap-modal@4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/react-bootstrap-modal/-/react-bootstrap-modal-4.2.0.tgz#010b3ca9230a3c147fa5fc6aa39b6971e34151bd"
@@ -15168,25 +15175,26 @@ react-cornerstone-viewport@2.x.x:
     prop-types "^15.7.2"
     react-resize-detector "^4.2.1"
 
-react-dates@18.4.1:
+react-dates@21.2.1:
-  version "18.4.1"
+  version "21.2.1"
-  resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-18.4.1.tgz#82aa0bb4faaa9cdb9547d61c791af2180beda20e"
+  resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-21.2.1.tgz#a979ed6876326ccfbf754a019bc95458cc061ad8"
-  integrity sha512-ew6HiORfbJkEGlJ+5SMC5GtgI87zj2BqNv8tRsdnPtgLMt5fY2Z9dUFxc+XATeRHs+wOm4ku0dlKWpuqBzYapQ==
+  integrity sha512-jGZGQjiYur6lTvnhgQvnOLR2ACmV10LDZow3anNSAFAuKsWny3NKrnlXJ+gdRMv3amCF8TrMwsa+3cplv3OWIQ==
   dependencies:
-    airbnb-prop-types "^2.10.0"
+    airbnb-prop-types "^2.15.0"
     consolidated-events "^1.1.1 || ^2.0.0"
+    enzyme-shallow-equal "^1.0.0"
     is-touch-device "^1.0.1"
     lodash "^4.1.1"
     object.assign "^4.1.0"
-    object.values "^1.0.4"
+    object.values "^1.1.0"
-    prop-types "^15.6.1"
+    prop-types "^15.7.2"
-    react-addons-shallow-compare "^15.6.2"
+    raf "^3.4.1"
     react-moment-proptypes "^1.6.0"
-    react-outside-click-handler "^1.2.0"
+    react-outside-click-handler "^1.2.4"
-    react-portal "^4.1.5"
+    react-portal "^4.2.0"
-    react-with-direction "^1.3.0"
+    react-with-direction "^1.3.1"
-    react-with-styles "^3.2.0"
+    react-with-styles "^4.0.1"
-    react-with-styles-interface-css "^4.0.2"
+    react-with-styles-interface-css "^6.0.0"
 
 react-dev-utils@^5.0.2:
   version "5.0.3"
@@ -15422,7 +15430,7 @@ react-moment-proptypes@^1.6.0:
   dependencies:
     moment ">=1.6.0"
 
-react-outside-click-handler@^1.2.0:
+react-outside-click-handler@^1.2.4:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz#3831d541ac059deecd38ec5423f81e80ad60e115"
   integrity sha512-Te/7zFU0oHpAnctl//pP3hEAeobfeHMyygHB8MnjP6sX5OR8KHT1G3jmLsV3U9RnIYo+Yn+peJYWu+D5tUS8qQ==
@@ -15453,7 +15461,7 @@ react-perfect-scrollbar@^1.5.0:
     perfect-scrollbar "^1.4.0"
     prop-types "^15.6.1"
 
-react-portal@^4.1.5:
+react-portal@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.2.0.tgz#5400831cdb0ae64dccb8128121cf076089ab1afd"
   integrity sha512-Zf+vGQ/VEAb5XAy+muKEn48yhdCNYPZaB1BWg1xc8sAZWD8pXTgPtQT4ihBdmWzsfCq8p8/kqf0GWydSBqc+Eg==
@@ -15566,7 +15574,7 @@ react-with-direction@1.3.0:
     object.values "^1.0.4"
     prop-types "^15.6.0"
 
-react-with-direction@^1.3.0:
+react-with-direction@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/react-with-direction/-/react-with-direction-1.3.1.tgz#9fd414564f0ffe6947e5ff176f6132dd83f8b8df"
   integrity sha512-aGcM21ZzhqeXFvDCfPj0rVNYuaVXfTz5D3Rbn0QMz/unZe+CCiLHthrjQWO7s6qdfXORgYFtmS7OVsRgSk5LXQ==
@@ -15580,23 +15588,24 @@ react-with-direction@^1.3.0:
     object.values "^1.0.4"
     prop-types "^15.6.2"
 
-react-with-styles-interface-css@^4.0.2:
+react-with-styles-interface-css@^6.0.0:
-  version "4.0.3"
+  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/react-with-styles-interface-css/-/react-with-styles-interface-css-4.0.3.tgz#c4a61277b2b8e4126b2cd25eca3ac4097bd2af09"
+  resolved "https://registry.yarnpkg.com/react-with-styles-interface-css/-/react-with-styles-interface-css-6.0.0.tgz#b53da7fa8359d452cb934cface8738acaef7b5fe"
-  integrity sha512-wE43PIyjal2dexxyyx4Lhbcb+E42amoYPnkunRZkb9WTA+Z+9LagbyxwsI352NqMdFmghR0opg29dzDO4/YXbw==
+  integrity sha512-6khSG1Trf4L/uXOge/ZAlBnq2O2PEXlQEqAhCRbvzaQU4sksIkdwpCPEl6d+DtP3+IdhyffTWuHDO9lhe1iYvA==
   dependencies:
     array.prototype.flat "^1.2.1"
     global-cache "^1.2.1"
 
-react-with-styles@^3.2.0:
+react-with-styles@^4.0.1:
-  version "3.2.3"
+  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/react-with-styles/-/react-with-styles-3.2.3.tgz#b058584065bb36c0d80ccc911725492692db8a61"
+  resolved "https://registry.yarnpkg.com/react-with-styles/-/react-with-styles-4.0.1.tgz#22b5170d39769b643dd650cc183e9419650af12d"
-  integrity sha512-MTI1UOvMHABRLj5M4WpODfwnveHaip6X7QUMI2x6zovinJiBXxzhA9AJP7MZNaKqg1JRFtHPXZdroUC8KcXwlQ==
+  integrity sha512-J77k4E2Dcm4SpfbQEet2KyRjZJtPCWD1PVkOB5vIOJewg/VEIMkb2MVVxusLTh1nwtfo7cnxY6gHytF6NcBkLQ==
   dependencies:
+    airbnb-prop-types "^2.14.0"
     hoist-non-react-statics "^3.2.1"
     object.assign "^4.1.0"
-    prop-types "^15.6.2"
+    prop-types "^15.7.2"
-    react-with-direction "^1.3.0"
+    react-with-direction "^1.3.1"
 
 react@^16.8.6:
   version "16.11.0"