chore(release): publish [skip ci]

- @ohif/extension-vtk@0.52.32
 - @ohif/core@1.7.0
 - @ohif/viewer@2.5.0

.eslintrc.json

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

.vscode/settings.json

@@ -1,8 +1,5 @@
 {
-  "editor.rulers": [
-    80,
-    120
-  ],
+  "editor.rulers": [80, 120],
   // ===
   // Spacing
   // ===
@@ -29,7 +26,7 @@
       "autoFix": true
     }
   ],
-  "prettier.disableLanguages": [],
+  "prettier.disableLanguages": ["html"],
   "prettier.endOfLine": "lf",
   "workbench.colorCustomizations": {}
 }

extensions/dicom-html/CHANGELOG.md

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

extensions/dicom-html/package.json

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

extensions/dicom-html/src/ConnectedDicomHtmlViewport.js

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

extensions/dicom-html/src/DicomHtmlViewport.js

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

extensions/dicom-html/src/OHIFDicomHtmlViewport.js

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

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,100 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.52.32](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.31...@ohif/extension-vtk@0.52.32) (2019-11-05)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.31](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.30...@ohif/extension-vtk@0.52.31) (2019-11-05)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.30](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.29...@ohif/extension-vtk@0.52.30) (2019-11-04)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.29](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.28...@ohif/extension-vtk@0.52.29) (2019-11-04)
+
+
+### Bug Fixes
+
+* 🐛 Upgrade react-vtkjs-viewport to fix volume orientation ([#1143](https://github.com/OHIF/Viewers/issues/1143)) ([1d86b1a](https://github.com/OHIF/Viewers/commit/1d86b1a102fc422053cff103de8c12ca6f437354))
+
+
+
+
+
+## [0.52.28](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.27...@ohif/extension-vtk@0.52.28) (2019-11-04)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.27](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.26...@ohif/extension-vtk@0.52.27) (2019-10-31)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.26](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.25...@ohif/extension-vtk@0.52.26) (2019-10-30)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.25](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.24...@ohif/extension-vtk@0.52.25) (2019-10-29)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.24](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.23...@ohif/extension-vtk@0.52.24) (2019-10-29)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.23](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.22...@ohif/extension-vtk@0.52.23) (2019-10-28)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.22](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.21...@ohif/extension-vtk@0.52.22) (2019-10-28)
+
+
+### Bug Fixes
+
+* MIP styling ([#1109](https://github.com/OHIF/Viewers/issues/1109)) ([0d21cc6](https://github.com/OHIF/Viewers/commit/0d21cc6ad0c47706b9e62e05fe2a0f1d86339760))
+
+
+
+
+
 ## [0.52.21](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.20...@ohif/extension-vtk@0.52.21) (2019-10-26)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.52.21",
+  "version": "0.52.32",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -49,11 +49,11 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "lodash.throttle": "^4.1.1",
-    "react-vtkjs-viewport": "^0.3.7"
+    "react-vtkjs-viewport": "^0.3.9"
   },
   "devDependencies": {
-    "@ohif/core": "^1.6.0",
-    "@ohif/ui": "^0.57.0",
+    "@ohif/core": "^1.7.0",
+    "@ohif/ui": "^0.59.1",
     "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dcmjs": "^0.6.1",

extensions/vtk/src/toolbarComponents/SlabThicknessToolbarComponent.js

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

netlify.toml

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

package.json

@@ -72,6 +72,7 @@
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-hooks": "1.5.0",
     "extract-css-chunks-webpack-plugin": "^4.5.4",
+    "favicons-webpack-plugin": "^1.0.2",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^3.0.0",
     "jest": "^24.8.0",
@@ -102,7 +103,7 @@
     "webpack-dev-server": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-merge": "^4.2.1",
-    "workbox-webpack-plugin": "^4.3.1",
+    "workbox-webpack-plugin": "^5.0.0-beta.1",
     "worker-loader": "^2.0.0"
   },
   "husky": {

platform/core/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.7.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.6.2...@ohif/core@1.7.0) (2019-11-05)
+
+
+### Features
+
+* 🎸 Filter by url query param for seriesInstnaceUID ([#1117](https://github.com/OHIF/Viewers/issues/1117)) ([e208f2e](https://github.com/OHIF/Viewers/commit/e208f2e6a9c49b16dadead0a917f657cf023929a)), closes [#1118](https://github.com/OHIF/Viewers/issues/1118)
+
+
+
+
+
+## [1.6.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.6.1...@ohif/core@1.6.2) (2019-11-05)
+
+
+### Bug Fixes
+
+* [#1075](https://github.com/OHIF/Viewers/issues/1075) Returning to the Study List before all series have finishe… ([#1090](https://github.com/OHIF/Viewers/issues/1090)) ([ecaf578](https://github.com/OHIF/Viewers/commit/ecaf578f92dc40294cec7ff9b272fb432dec4125))
+
+
+
+
+
+## [1.6.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.6.0...@ohif/core@1.6.1) (2019-10-31)
+
+
+### Bug Fixes
+
+* application crash if patientName is an object ([#1138](https://github.com/OHIF/Viewers/issues/1138)) ([64cf3b3](https://github.com/OHIF/Viewers/commit/64cf3b324da2383a927af1df2d46db2fca5318aa))
+
+
+
+
+
 # [1.6.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.5.2...@ohif/core@1.6.0) (2019-10-26)
 
 

platform/core/package.json

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

platform/core/src/DICOMWeb/getModalities.js

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

platform/core/src/studies/getSeriesInfo.js

@@ -0,0 +1,25 @@
+import DICOMWeb from '../DICOMWeb/';
+import isLowPriorityModality from '../utils/isLowPriorityModality';
+
+const INFO = Symbol('INFO');
+
+/**
+ * Creates an object with processed series information and saves its reference
+ * inside the series object itself.
+ * @param {Object} series The raw series object
+ * @returns {Object} object containing some useful info from given series
+ */
+export default function getSeriesInfo(series) {
+  let info = series[INFO];
+  if (!info) {
+    const modality = DICOMWeb.getString(series['00080060'], '').toUpperCase();
+    info = Object.freeze({
+      modality,
+      isLowPriority: isLowPriorityModality(modality),
+      seriesInstanceUid: DICOMWeb.getString(series['0020000E']),
+      seriesNumber: DICOMWeb.getNumber(series['00200011'], 0) || 0,
+    });
+    series[INFO] = info;
+  }
+  return info;
+}

platform/core/src/studies/retrieveStudiesMetadata.js

@@ -7,13 +7,16 @@ import { retrieveStudyMetadata } from './retrieveStudyMetadata';
  * This function calls retrieveStudyMetadata several times, asynchronously,
  * and waits for all of the results to be returned.
  *
- * @param studyInstanceUids The UIDs of the Studies to be retrieved
- * @return Promise
+ * @param {Object} server Object with server configuration parameters
+ * @param {Array} studyInstanceUids The UIDs of the Studies to be retrieved
+ * @param {Object} [filters] - Object containing filters to be applied on retrieve metadata process
+ * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
+ * @returns {Promise} that will be resolved with the metadata or rejected with the error
  */
 export default function retrieveStudiesMetadata(
   server,
   studyInstanceUids,
-  seriesInstanceUids
+  filters
 ) {
   // Create an empty array to store the Promises for each metaData retrieval call
   const promises = [];
@@ -21,11 +24,7 @@ export default function retrieveStudiesMetadata(
   // Loop through the array of studyInstanceUids
   studyInstanceUids.forEach(function(studyInstanceUid) {
     // Send the call and resolve or reject the related promise based on its outcome
-    const promise = retrieveStudyMetadata(
-      server,
-      studyInstanceUid,
-      seriesInstanceUids
-    );
+    const promise = retrieveStudyMetadata(server, studyInstanceUid, filters);
 
     // Add the current promise to the array of promises
     promises.push(promise);

platform/core/src/studies/retrieveStudyMetadata.js

@@ -7,11 +7,13 @@ const StudyMetaDataPromises = new Map();
 /**
  * Retrieves study metadata
  *
- * @param {Object} server
+ * @param {Object} server Object with server configuration parameters
  * @param {string} studyInstanceUid The UID of the Study to be retrieved
+ * @param {Object} [filters] - Object containing filters to be applied on retrieve metadata process
+ * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
  * @returns {Promise} that will be resolved with the metadata or rejected with the error
  */
-export function retrieveStudyMetadata(server, studyInstanceUid) {
+export function retrieveStudyMetadata(server, studyInstanceUid, filters) {
   // @TODO: Whenever a study metadata request has failed, its related promise will be rejected once and for all
   // and further requests for that metadata will always fail. On failure, we probably need to remove the
   // corresponding promise from the "StudyMetaDataPromises" map...
@@ -32,7 +34,7 @@ export function retrieveStudyMetadata(server, studyInstanceUid) {
 
   // Create a promise to handle the data retrieval
   const promise = new Promise((resolve, reject) => {
-    RetrieveMetadata(server, studyInstanceUid).then(function(data) {
+    RetrieveMetadata(server, studyInstanceUid, filters).then(function(data) {
       resolve(data);
     }, reject);
   });

platform/core/src/studies/services/qido/studies.js

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

platform/core/src/studies/services/wado/retrieveMetadata.js

@@ -1,609 +1,30 @@
-import { api } from 'dicomweb-client';
-import DICOMWeb from '../../../DICOMWeb/';
-import isLowPriorityModality from '../../../utils/isLowPriorityModality';
-
-const INFO = Symbol('INFO');
-
-const WADOProxy = {
-  convertURL: (url, server) => {
-    // TODO: Remove all WADOProxy stuff from this file
-    return url;
-  },
-};
-
-function parseFloatArray(obj) {
-  const result = [];
-
-  if (!obj) {
-    return result;
-  }
-
-  const objs = obj.split('\\');
-  for (let i = 0; i < objs.length; i++) {
-    result.push(parseFloat(objs[i]));
-  }
-
-  return result;
-}
-
-/**
- * Simple cache schema for retrieved color palettes.
- */
-const paletteColorCache = {
-  count: 0,
-  maxAge: 24 * 60 * 60 * 1000, // 24h cache?
-  entries: {},
-  isValidUID: function(paletteUID) {
-    return typeof paletteUID === 'string' && paletteUID.length > 0;
-  },
-  get: function(paletteUID) {
-    let entry = null;
-    if (this.entries.hasOwnProperty(paletteUID)) {
-      entry = this.entries[paletteUID];
-      // check how the entry is...
-      if (Date.now() - entry.time > this.maxAge) {
-        // entry is too old... remove entry.
-        delete this.entries[paletteUID];
-        this.count--;
-        entry = null;
-      }
-    }
-    return entry;
-  },
-  add: function(entry) {
-    if (this.isValidUID(entry.uid)) {
-      let paletteUID = entry.uid;
-      if (this.entries.hasOwnProperty(paletteUID) !== true) {
-        this.count++; // increment cache entry count...
-      }
-      entry.time = Date.now();
-      this.entries[paletteUID] = entry;
-      // @TODO: Add logic to get rid of old entries and reduce memory usage...
-    }
-  },
-};
-
-/** Returns a WADO url for an instance
- *
- * @param studyInstanceUid
- * @param seriesInstanceUid
- * @param sopInstanceUid
- * @returns  {string}
- */
-function buildInstanceWadoUrl(
-  server,
-  studyInstanceUid,
-  seriesInstanceUid,
-  sopInstanceUid
-) {
-  // TODO: This can be removed, since DICOMWebClient has the same function. Not urgent, though
-  const params = [];
-
-  params.push('requestType=WADO');
-  params.push(`studyUID=${studyInstanceUid}`);
-  params.push(`seriesUID=${seriesInstanceUid}`);
-  params.push(`objectUID=${sopInstanceUid}`);
-  params.push('contentType=application/dicom');
-  params.push('transferSyntax=*');
-
-  const paramString = params.join('&');
-
-  return `${server.wadoUriRoot}?${paramString}`;
-}
-
-function buildInstanceWadoRsUri(
-  server,
-  studyInstanceUid,
-  seriesInstanceUid,
-  sopInstanceUid
-) {
-  return `${server.wadoRoot}/studies/${studyInstanceUid}/series/${seriesInstanceUid}/instances/${sopInstanceUid}`;
-}
-
-function buildInstanceFrameWadoRsUri(
-  server,
-  studyInstanceUid,
-  seriesInstanceUid,
-  sopInstanceUid,
-  frame
-) {
-  const baseWadoRsUri = buildInstanceWadoRsUri(
-    server,
-    studyInstanceUid,
-    seriesInstanceUid,
-    sopInstanceUid
-  );
-  frame = frame != null || 1;
-
-  return `${baseWadoRsUri}/frames/${frame}`;
-}
-
-/**
- * Parses the SourceImageSequence, if it exists, in order
- * to return a ReferenceSOPInstanceUID. The ReferenceSOPInstanceUID
- * is used to refer to this image in any accompanying DICOM-SR documents.
- *
- * @param instance
- * @returns {String} The ReferenceSOPInstanceUID
- */
-function getSourceImageInstanceUid(instance) {
-  // TODO= Parse the whole Source Image Sequence
-  // This is a really poor workaround for now.
-  // Later we should probably parse the whole sequence.
-  var SourceImageSequence = instance['00082112'];
-  if (
-    SourceImageSequence &&
-    SourceImageSequence.Value &&
-    SourceImageSequence.Value.length &&
-    SourceImageSequence.Value[0]['00081155'].Value
-  ) {
-    return SourceImageSequence.Value[0]['00081155'].Value[0];
-  }
-}
-
-function getPaletteColor(server, instance, tag, lutDescriptor) {
-  const numLutEntries = lutDescriptor[0];
-  const bits = lutDescriptor[2];
-
-  let uri = WADOProxy.convertURL(instance[tag].BulkDataURI, server);
-
-  // TODO: Workaround for dcm4chee behind SSL-terminating proxy returning
-  // incorrect bulk data URIs
-  if (server.wadoRoot.indexOf('https') === 0 && !uri.includes('https')) {
-    uri = uri.replace('http', 'https');
-  }
-
-  const config = {
-    url: server.wadoRoot, //BulkDataURI is absolute, so this isn't used
-    headers: DICOMWeb.getAuthorizationHeader(server),
-  };
-  const dicomWeb = new api.DICOMwebClient(config);
-  const options = {
-    BulkDataURI: uri,
-  };
-
-  const readUInt16 = (byteArray, position) => {
-    return byteArray[position] + byteArray[position + 1] * 256;
-  };
-
-  const arrayBufferToPaletteColorLUT = result => {
-    const arraybuffer = result[0];
-    const byteArray = new Uint8Array(arraybuffer);
-    const lut = [];
-
-    for (let i = 0; i < numLutEntries; i++) {
-      if (bits === 16) {
-        lut[i] = readUInt16(byteArray, i * 2);
-      } else {
-        lut[i] = byteArray[i];
-      }
-    }
-
-    return lut;
-  };
-
-  return dicomWeb.retrieveBulkData(options).then(arrayBufferToPaletteColorLUT);
-}
-
-/**
- * Fetch palette colors for instances with "PALETTE COLOR" photometricInterpretation.
- *
- * @param server {Object} Current server;
- * @param instance {Object} The retrieved instance metadata;
- * @returns {String} The ReferenceSOPInstanceUID
- */
-async function getPaletteColors(server, instance, lutDescriptor) {
-  let paletteUID = DICOMWeb.getString(instance['00281199']);
-
-  return new Promise((resolve, reject) => {
-    let entry;
-    if (paletteColorCache.isValidUID(paletteUID)) {
-      entry = paletteColorCache.get(paletteUID);
-
-      if (entry) {
-        return resolve(entry);
-      }
-    }
-
-    // no entry in cache... Fetch remote data.
-    const r = getPaletteColor(server, instance, '00281201', lutDescriptor);
-    const g = getPaletteColor(server, instance, '00281202', lutDescriptor);
-    const b = getPaletteColor(server, instance, '00281203', lutDescriptor);
-
-    const promises = [r, g, b];
-
-    Promise.all(promises).then(args => {
-      entry = {
-        red: args[0],
-        green: args[1],
-        blue: args[2],
-      };
-
-      // when paletteUID is present, the entry can be cached...
-      entry.uid = paletteUID;
-      paletteColorCache.add(entry);
-
-      resolve(entry);
-    });
-  });
-}
-
-function getFrameIncrementPointer(element) {
-  const frameIncrementPointerNames = {
-    '00181065': 'frameTimeVector',
-    '00181063': 'frameTime',
-  };
-
-  if (!element || !element.Value || !element.Value.length) {
-    return;
-  }
-
-  const value = element.Value[0];
-  return frameIncrementPointerNames[value];
-}
-
-function getRadiopharmaceuticalInfo(instance) {
-  const modality = DICOMWeb.getString(instance['00080060']);
-
-  if (modality !== 'PT') {
-    return;
-  }
-
-  const radiopharmaceuticalInfo = instance['00540016'];
-  if (
-    radiopharmaceuticalInfo === undefined ||
-    !radiopharmaceuticalInfo.Value ||
-    !radiopharmaceuticalInfo.Value.length
-  ) {
-    return;
-  }
-
-  const firstPetRadiopharmaceuticalInfo = radiopharmaceuticalInfo.Value[0];
-  return {
-    radiopharmaceuticalStartTime: DICOMWeb.getString(
-      firstPetRadiopharmaceuticalInfo['00181072']
-    ),
-    radionuclideTotalDose: DICOMWeb.getNumber(
-      firstPetRadiopharmaceuticalInfo['00181074']
-    ),
-    radionuclideHalfLife: DICOMWeb.getNumber(
-      firstPetRadiopharmaceuticalInfo['00181075']
-    ),
-  };
-}
-
-async function makeSOPInstance(server, study, instance) {
-  const { studyInstanceUid } = study;
-  const seriesInstanceUid = DICOMWeb.getString(instance['0020000E']);
-  let series = study.seriesMap[seriesInstanceUid];
-
-  if (!series) {
-    series = {
-      seriesInstanceUid,
-      seriesDescription: DICOMWeb.getString(instance['0008103E']),
-      modality: DICOMWeb.getString(instance['00080060']),
-      seriesNumber: DICOMWeb.getNumber(instance['00200011']),
-      seriesDate: DICOMWeb.getString(instance['00080021']),
-      seriesTime: DICOMWeb.getString(instance['00080031']),
-      instances: [],
-    };
-    study.seriesMap[seriesInstanceUid] = series;
-    study.seriesList.push(series);
-  }
-
-  const sopInstanceUid = DICOMWeb.getString(instance['00080018']);
-  const wadouri = buildInstanceWadoUrl(
-    server,
-    studyInstanceUid,
-    seriesInstanceUid,
-    sopInstanceUid
-  );
-  const baseWadoRsUri = buildInstanceWadoRsUri(
-    server,
-    studyInstanceUid,
-    seriesInstanceUid,
-    sopInstanceUid
-  );
-  const wadorsuri = buildInstanceFrameWadoRsUri(
-    server,
-    studyInstanceUid,
-    seriesInstanceUid,
-    sopInstanceUid
-  );
-
-  const sopInstance = {
-    imageType: DICOMWeb.getString(instance['00080008']),
-    sopClassUid: DICOMWeb.getString(instance['00080016']),
-    modality: DICOMWeb.getString(instance['00080060']),
-    sopInstanceUid,
-    instanceNumber: DICOMWeb.getNumber(instance['00200013']),
-    imagePositionPatient: DICOMWeb.getString(instance['00200032']),
-    imageOrientationPatient: DICOMWeb.getString(instance['00200037']),
-    frameOfReferenceUID: DICOMWeb.getString(instance['00200052']),
-    sliceLocation: DICOMWeb.getNumber(instance['00201041']),
-    samplesPerPixel: DICOMWeb.getNumber(instance['00280002']),
-    photometricInterpretation: DICOMWeb.getString(instance['00280004']),
-    planarConfiguration: DICOMWeb.getNumber(instance['00280006']),
-    rows: DICOMWeb.getNumber(instance['00280010']),
-    columns: DICOMWeb.getNumber(instance['00280011']),
-    pixelSpacing: DICOMWeb.getString(instance['00280030']),
-    pixelAspectRatio: DICOMWeb.getString(instance['00280034']),
-    bitsAllocated: DICOMWeb.getNumber(instance['00280100']),
-    bitsStored: DICOMWeb.getNumber(instance['00280101']),
-    highBit: DICOMWeb.getNumber(instance['00280102']),
-    pixelRepresentation: DICOMWeb.getNumber(instance['00280103']),
-    smallestPixelValue: DICOMWeb.getNumber(instance['00280106']),
-    largestPixelValue: DICOMWeb.getNumber(instance['00280107']),
-    windowCenter: DICOMWeb.getString(instance['00281050']),
-    windowWidth: DICOMWeb.getString(instance['00281051']),
-    rescaleIntercept: DICOMWeb.getNumber(instance['00281052']),
-    rescaleSlope: DICOMWeb.getNumber(instance['00281053']),
-    rescaleType: DICOMWeb.getNumber(instance['00281054']),
-    sourceImageInstanceUid: getSourceImageInstanceUid(instance),
-    laterality: DICOMWeb.getString(instance['00200062']),
-    viewPosition: DICOMWeb.getString(instance['00185101']),
-    acquisitionDateTime: DICOMWeb.getString(instance['0008002A']),
-    numberOfFrames: DICOMWeb.getNumber(instance['00280008']),
-    frameIncrementPointer: getFrameIncrementPointer(instance['00280009']),
-    frameTime: DICOMWeb.getNumber(instance['00181063']),
-    frameTimeVector: parseFloatArray(DICOMWeb.getString(instance['00181065'])),
-    sliceThickness: DICOMWeb.getNumber(instance['00180050']),
-    spacingBetweenSlices: DICOMWeb.getString(instance['00180088']),
-    lossyImageCompression: DICOMWeb.getString(instance['00282110']),
-    derivationDescription: DICOMWeb.getString(instance['00282111']),
-    lossyImageCompressionRatio: DICOMWeb.getString(instance['00282112']),
-    lossyImageCompressionMethod: DICOMWeb.getString(instance['00282114']),
-    echoNumber: DICOMWeb.getString(instance['00180086']),
-    contrastBolusAgent: DICOMWeb.getString(instance['00180010']),
-    radiopharmaceuticalInfo: getRadiopharmaceuticalInfo(instance),
-    baseWadoRsUri: baseWadoRsUri,
-    wadouri: WADOProxy.convertURL(wadouri, server),
-    wadorsuri: WADOProxy.convertURL(wadorsuri, server),
-    wadoRoot: server.wadoRoot,
-    imageRendering: server.imageRendering,
-    thumbnailRendering: server.thumbnailRendering,
-  };
-
-  // Get additional information if the instance uses "PALETTE COLOR" photometric interpretation
-  if (sopInstance.photometricInterpretation === 'PALETTE COLOR') {
-    const redPaletteColorLookupTableDescriptor = parseFloatArray(
-      DICOMWeb.getString(instance['00281101'])
-    );
-    const greenPaletteColorLookupTableDescriptor = parseFloatArray(
-      DICOMWeb.getString(instance['00281102'])
-    );
-    const bluePaletteColorLookupTableDescriptor = parseFloatArray(
-      DICOMWeb.getString(instance['00281103'])
-    );
-    const palettes = await getPaletteColors(
-      server,
-      instance,
-      redPaletteColorLookupTableDescriptor
-    );
-
-    if (palettes) {
-      if (palettes.uid) {
-        sopInstance.paletteColorLookupTableUID = palettes.uid;
-      }
-
-      sopInstance.redPaletteColorLookupTableData = palettes.red;
-      sopInstance.greenPaletteColorLookupTableData = palettes.green;
-      sopInstance.bluePaletteColorLookupTableData = palettes.blue;
-      sopInstance.redPaletteColorLookupTableDescriptor = redPaletteColorLookupTableDescriptor;
-      sopInstance.greenPaletteColorLookupTableDescriptor = greenPaletteColorLookupTableDescriptor;
-      sopInstance.bluePaletteColorLookupTableDescriptor = bluePaletteColorLookupTableDescriptor;
-    }
-  }
-
-  series.instances.push(sopInstance);
-  return sopInstance;
-}
-
-/**
- * Create a plain JS object that describes a study (a study descriptor object)
- * @param {Object} server Object with server configuration paramenters
- * @param {Object} aSopInstance a SOP Instance from which study information will be added
- */
-function createStudy(server, aSopInstance) {
-  // TODO: Pass a reference ID to the server instead of including the URLs here
-  return {
-    seriesList: [],
-    seriesMap: Object.create(null),
-    seriesLoader: null,
-    wadoUriRoot: server.wadoUriRoot,
-    wadoRoot: server.wadoRoot,
-    qidoRoot: server.qidoRoot,
-    patientName: DICOMWeb.getName(aSopInstance['00100010']),
-    patientId: DICOMWeb.getString(aSopInstance['00100020']),
-    patientAge: DICOMWeb.getNumber(aSopInstance['00101010']),
-    patientSize: DICOMWeb.getNumber(aSopInstance['00101020']),
-    patientWeight: DICOMWeb.getNumber(aSopInstance['00101030']),
-    accessionNumber: DICOMWeb.getString(aSopInstance['00080050']),
-    studyDate: DICOMWeb.getString(aSopInstance['00080020']),
-    modalities: DICOMWeb.getString(aSopInstance['00080061']),
-    studyDescription: DICOMWeb.getString(aSopInstance['00081030']),
-    imageCount: DICOMWeb.getString(aSopInstance['00201208']),
-    studyInstanceUid: DICOMWeb.getString(aSopInstance['0020000D']),
-    institutionName: DICOMWeb.getString(aSopInstance['00080080']),
-  };
-}
-
-/**
- * Add a list of SOP Instances to a given study object descriptor
- * @param {Object} server Object with server configuration paramenters
- * @param {Object} study The study descriptor to which the given SOP instances will be added
- * @param {Array} sopInstanceList A list of SOP instance objects
- */
-async function addInstancesToStudy(server, study, sopInstanceList) {
-  return Promise.all(
-    sopInstanceList.map(function(sopInstance) {
-      return makeSOPInstance(server, study, sopInstance);
-    })
-  );
-}
-
-/**
- * Parses result data from a WADO search into Study MetaData
- * Returns an object populated with study metadata, including the
- * series list.
- *
- * @param {Object} server Object with server configuration paramenters
- * @param {Array} sopInstanceList List of SOP Instances that build up to the study
- * @resolves {{seriesList: Array, patientName: *, patientId: *, accessionNumber: *, studyDate: *, modalities: *, studyDescription: *, imageCount: *, studyInstanceUid: *}}
- */
-async function createStudyFromSOPInstanceList(server, sopInstanceList) {
-  if (Array.isArray(sopInstanceList) && sopInstanceList.length > 0) {
-    const firstSopInstance = sopInstanceList[0];
-    const study = createStudy(server, firstSopInstance);
-    await addInstancesToStudy(server, study, sopInstanceList);
-    return study;
-  }
-  throw new Error('Failed to create study out of provided SOP instance list');
-}
+import RetrieveMetadataLoaderSync from './retrieveMetadataLoaderSync';
+import RetrieveMetadataLoaderAsync from './retrieveMetadataLoaderAsync';
 
 /**
  * Retrieve Study metadata from a DICOM server. If the server is configured to use lazy load, only the first series
- * will be loaded and the property "studyLoader" will be set to let consumer load remaining series as needed
- * @param {Object} server Object with server configuration paramenters
+ * will be loaded and the property "studyLoader" will be set to let consumer load remaining series as needed.
+ *
+ * @param {Object} server Object with server configuration parameters
  * @param {string} studyInstanceUid The Study Instance UID of the study which needs to be loaded
+ * @param {Object} [filters] - Object containing filters to be applied on retrieve metadata process
+ * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
  * @returns {Object} A study descriptor object
  */
-async function RetrieveMetadata(server, studyInstanceUid) {
-  return (server.enableStudyLazyLoad !== false
-    ? lazyLoadStudyMetadata
-    : loadStudyMetadata)(server, studyInstanceUid);
-}
+async function RetrieveMetadata(server, studyInstanceUid, filters = {}) {
+  const RetrieveMetadataLoader =
+    server.enableStudyLazyLoad !== false
+      ? RetrieveMetadataLoaderAsync
+      : RetrieveMetadataLoaderSync;
 
-/**
- *
- * @param {*} server
- * @param {*} studyInstanceUID
- */
-async function loadStudyMetadata(server, studyInstanceUID) {
-  const dicomWeb = new api.DICOMwebClient({
-    url: server.wadoRoot,
-    headers: DICOMWeb.getAuthorizationHeader(server),
-  });
-  return dicomWeb
-    .retrieveStudyMetadata({ studyInstanceUID })
-    .then(result => createStudyFromSOPInstanceList(server, result));
-}
-
-async function lazyLoadStudyMetadata(server, studyInstanceUid) {
-  const seriesInstanceUids = await searchStudySeries(server, studyInstanceUid);
-  const dicomWeb = new api.DICOMwebClient({
-    url: server.wadoRoot,
-    headers: DICOMWeb.getAuthorizationHeader(server),
-  });
-  const seriesLoader = makeSeriesLoader(
-    dicomWeb,
-    studyInstanceUid,
-    seriesInstanceUids
-  );
-  const firstSeries = await seriesLoader.next();
-  const study = await createStudyFromSOPInstanceList(
+  const retrieveMetadataLoader = new RetrieveMetadataLoader(
     server,
-    firstSeries.sopInstances
+    studyInstanceUid,
+    filters
   );
-  if (seriesLoader.hasNext()) {
-    attachSeriesLoader(server, study, seriesLoader);
-  }
-  return study;
-}
+  const studyMetadata = retrieveMetadataLoader.execLoad();
 
-function attachSeriesLoader(server, study, seriesLoader) {
-  study.seriesLoader = Object.freeze({
-    hasNext() {
-      return seriesLoader.hasNext();
-    },
-    async next() {
-      const series = await seriesLoader.next();
-      await addInstancesToStudy(server, study, series.sopInstances);
-      return study.seriesMap[series.seriesInstanceUID];
-    },
-  });
-}
-
-/**
- * Creates an immutable series loader object which loads each series sequentially using the iterator interface
- * @param {DICOMWebClient} dicomWebClient The DICOMWebClient instance to be used for series load
- * @param {string} studyInstanceUID The Study Instance UID from which series will be loaded
- * @param {Array} seriesInstanceUIDList A list of Series Instance UIDs
- * @returns {Object} Returns an object which supports loading of instances from each of given Series Instance UID
- */
-function makeSeriesLoader(
-  dicomWebClient,
-  studyInstanceUID,
-  seriesInstanceUIDList
-) {
-  return Object.freeze({
-    hasNext() {
-      return seriesInstanceUIDList.length > 0;
-    },
-    async next() {
-      const seriesInstanceUID = seriesInstanceUIDList.shift();
-      const sopInstances = await dicomWebClient.retrieveSeriesMetadata({
-        studyInstanceUID,
-        seriesInstanceUID,
-      });
-      return { studyInstanceUID, seriesInstanceUID, sopInstances };
-    },
-  });
-}
-
-/**
- * Search series of a given study
- * @param {Object} server Object with server configuration paramenters
- * @param {string} studyInstanceUID The Study Instance UID to search series from;
- * @returns {Arrays} A list of Series Instance UIDs
- */
-async function searchStudySeries(server, studyInstanceUID) {
-  const dicomWeb = new api.DICOMwebClient({
-    url: server.qidoRoot,
-    headers: DICOMWeb.getAuthorizationHeader(server),
-  });
-  const seriesList = await dicomWeb.searchForSeries({ studyInstanceUID });
-  return seriesList
-    .sort(seriesSortingCriteria)
-    .map(series => getSeriesInfo(series).seriesInstanceUid);
-}
-
-/**
- * Series sorting criteria: series considered low priority are moved to the end
- * of the list and series number is used to break ties
- * @param {Object} firstSeries
- * @param {Object} secondSeries
- */
-function seriesSortingCriteria(firstSeries, secondSeries) {
-  const a = getSeriesInfo(firstSeries);
-  const b = getSeriesInfo(secondSeries);
-  if (!a.isLowPriority && b.isLowPriority) {
-    return -1;
-  }
-  if (a.isLowPriority && !b.isLowPriority) {
-    return 1;
-  }
-  return a.seriesNumber - b.seriesNumber;
-}
-
-/**
- * Creates an object with processed series information and saves its reference
- * inside the series object itself to simplify sorting
- * @param {Object} series The raw series object
- */
-function getSeriesInfo(series) {
-  let info = series[INFO];
-  if (!info) {
-    const modality = DICOMWeb.getString(series['00080060'], '').toUpperCase();
-    info = Object.freeze({
-      modality,
-      isLowPriority: isLowPriorityModality(modality),
-      seriesInstanceUid: DICOMWeb.getString(series['0020000E']),
-      seriesNumber: DICOMWeb.getNumber(series['00200011'], 0) || 0,
-    });
-    series[INFO] = info;
-  }
-  return info;
+  return studyMetadata;
 }
 
 export default RetrieveMetadata;

platform/core/src/studies/services/wado/retrieveMetadataLoader.js

@@ -0,0 +1,58 @@
+/**
+ * Class to define inheritance of load retrieve strategy.
+ * The process can be async load (lazy) or sync load
+ *
+ * There are methods that must be implemented at consumer level
+ * To retrieve study call execLoad
+ */
+export default class RetrieveMetadataLoader {
+  /**
+   * @constructor
+   * @param {Object} server Object with server configuration parameters
+   * @param {Array} studyInstanceUID Study instance ui to be retrieved
+   * @param {Object} [filters] - Object containing filters to be applied on retrieve metadata process
+   * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
+   */
+  constructor(server, studyInstanceUID, filters = {}) {
+    this.server = server;
+    this.studyInstanceUID = studyInstanceUID;
+    this.filters = filters;
+  }
+
+  async execLoad() {
+    await this.configLoad();
+    const preLoadData = await this.preLoad();
+    const loadData = await this.load(preLoadData);
+    const postLoadData = await this.posLoad(loadData);
+
+    return postLoadData;
+  }
+
+  /**
+   * It iterates over given loaders running each one. Loaders parameters must be bind when getting it.
+   * @param {Array} loaders - array of loader to retrieve data.
+   */
+  async runLoaders(loaders) {
+    let result;
+    for (const loader of loaders) {
+      try {
+        result = await loader();
+        if (result && result.length) {
+          break; // closes iterator in case data is retrieved successfully
+        }
+      } catch (e) {}
+    }
+
+    if (loaders.next().done && !result) {
+      throw 'cant find data';
+    }
+
+    return result;
+  }
+
+  // Methods to be overwrite
+  async configLoad() {}
+  async preLoad() {}
+  async load(preLoadData) {}
+  async posLoad(loadData) {}
+}

platform/core/src/studies/services/wado/retrieveMetadataLoaderAsync.js

@@ -0,0 +1,145 @@
+import { api } from 'dicomweb-client';
+import DICOMWeb from '../../../DICOMWeb/';
+import RetrieveMetadataLoader from './retrieveMetadataLoader';
+import { sortStudySeries, sortingCriteria } from '../../sortStudy';
+import getSeriesInfo from '../../getSeriesInfo';
+import {
+  createStudyFromSOPInstanceList,
+  addInstancesToStudy,
+} from './studyInstanceHelpers';
+
+/**
+ * Map seriesList to an array of seriesInstanceUid
+ * @param {Arrays} seriesList list of Series Instance UIDs
+ * @returns {Arrays} A list of Series Instance UIDs
+ */
+function mapStudySeries(seriesList) {
+  return seriesList.map(series => getSeriesInfo(series).seriesInstanceUid);
+}
+
+function attachSeriesLoader(server, study, seriesLoader) {
+  study.seriesLoader = Object.freeze({
+    hasNext() {
+      return seriesLoader.hasNext();
+    },
+    async next() {
+      const series = await seriesLoader.next();
+      await addInstancesToStudy(server, study, series.sopInstances);
+      return study.seriesMap[series.seriesInstanceUID];
+    },
+  });
+}
+
+/**
+ * Creates an immutable series loader object which loads each series sequentially using the iterator interface
+ * @param {DICOMWebClient} dicomWebClient The DICOMWebClient instance to be used for series load
+ * @param {string} studyInstanceUID The Study Instance UID from which series will be loaded
+ * @param {Array} seriesInstanceUIDList A list of Series Instance UIDs
+ * @returns {Object} Returns an object which supports loading of instances from each of given Series Instance UID
+ */
+function makeSeriesAsyncLoader(
+  dicomWebClient,
+  studyInstanceUID,
+  seriesInstanceUIDList
+) {
+  return Object.freeze({
+    hasNext() {
+      return seriesInstanceUIDList.length > 0;
+    },
+    async next() {
+      const seriesInstanceUID = seriesInstanceUIDList.shift();
+      const sopInstances = await dicomWebClient.retrieveSeriesMetadata({
+        studyInstanceUID,
+        seriesInstanceUID,
+      });
+      return { studyInstanceUID, seriesInstanceUID, sopInstances };
+    },
+  });
+}
+
+/**
+ * Class for async load of study metadata.
+ * It inherits from RetrieveMetadataLoader
+ *
+ * It loads the one series and then append to seriesLoader the others to be consumed/loaded
+ */
+export default class RetrieveMetadataLoaderAsync extends RetrieveMetadataLoader {
+  configLoad() {
+    const { server } = this;
+
+    const client = new api.DICOMwebClient({
+      url: server.qidoRoot,
+      headers: DICOMWeb.getAuthorizationHeader(server),
+    });
+
+    this.client = client;
+  }
+
+  /**
+   * @returns {Array} Array of preLoaders. To be consumed as queue
+   */
+  *getPreLoaders() {
+    const preLoaders = [];
+    const {
+      studyInstanceUID,
+      filters: { seriesInstanceUID } = {},
+      client,
+    } = this;
+
+    if (seriesInstanceUID) {
+      const options = {
+        studyInstanceUID,
+        queryParams: { SeriesInstanceUID: seriesInstanceUID },
+      };
+      preLoaders.push(client.searchForSeries.bind(client, options));
+    }
+    // Fallback preloader
+    preLoaders.push(client.searchForSeries.bind(client, { studyInstanceUID }));
+
+    yield* preLoaders;
+  }
+
+  async preLoad() {
+    const preLoaders = this.getPreLoaders();
+    const result = await this.runLoaders(preLoaders);
+
+    const seriesSorted = sortStudySeries(
+      result,
+      sortingCriteria.seriesSortCriteria.seriesInfoSortingCriteria
+    );
+    const seriesInstanceUidsMap = mapStudySeries(seriesSorted);
+
+    return seriesInstanceUidsMap;
+  }
+
+  async load(preLoadData) {
+    const { client, studyInstanceUID } = this;
+
+    const seriesAsyncLoader = makeSeriesAsyncLoader(
+      client,
+      studyInstanceUID,
+      preLoadData
+    );
+
+    const firstSeries = await seriesAsyncLoader.next();
+
+    return {
+      sopInstances: firstSeries.sopInstances,
+      asyncLoader: seriesAsyncLoader,
+    };
+  }
+
+  async posLoad(loadData) {
+    const { server } = this;
+
+    const { sopInstances, asyncLoader } = loadData;
+
+    const study = await createStudyFromSOPInstanceList(server, sopInstances);
+
+    if (asyncLoader.hasNext()) {
+      attachSeriesLoader(server, study, asyncLoader);
+    }
+
+    return study;
+  }
+}

platform/core/src/studies/services/wado/retrieveMetadataLoaderSync.js

@@ -0,0 +1,76 @@
+import { api } from 'dicomweb-client';
+import DICOMWeb from '../../../DICOMWeb/';
+import { createStudyFromSOPInstanceList } from './studyInstanceHelpers';
+import RetrieveMetadataLoader from './retrieveMetadataLoader';
+
+/**
+ * Class for sync load of study metadata.
+ * It inherits from RetrieveMetadataLoader
+ *
+ * A list of loaders (getLoaders) can be created so, it will be applied a fallback load strategy.
+ * I.e Retrieve metadata using all loaders possibilities.
+ */
+export default class RetrieveMetadataLoaderSync extends RetrieveMetadataLoader {
+  getOptions() {
+    const { studyInstanceUID, filters } = this;
+
+    const options = {
+      studyInstanceUID,
+    };
+
+    const { seriesInstanceUID } = filters;
+    if (seriesInstanceUID) {
+      options['seriesInstanceUID'] = seriesInstanceUID;
+    }
+
+    return options;
+  }
+
+  /**
+   * @returns {Array} Array of loaders. To be consumed as queue
+   */
+  *getLoaders() {
+    const loaders = [];
+    const {
+      studyInstanceUID,
+      filters: { seriesInstanceUID } = {},
+      client,
+    } = this;
+
+    if (seriesInstanceUID) {
+      loaders.push(
+        client.retrieveSeriesMetadata.bind(client, {
+          studyInstanceUID,
+          seriesInstanceUID,
+        })
+      );
+    }
+
+    loaders.push(
+      client.retrieveStudyMetadata.bind(client, { studyInstanceUID })
+    );
+
+    yield* loaders;
+  }
+
+  configLoad() {
+    const { server } = this;
+    const client = new api.DICOMwebClient({
+      url: server.wadoRoot,
+      headers: DICOMWeb.getAuthorizationHeader(server),
+    });
+
+    this.client = client;
+  }
+
+  async load(preLoadData) {
+    const loaders = this.getLoaders();
+    const result = this.runLoaders(loaders);
+    return result;
+  }
+
+  async posLoad(loadData) {
+    const { server } = this;
+    return createStudyFromSOPInstanceList(server, loadData);
+  }
+}

platform/core/src/studies/services/wado/studyInstanceHelpers.js

@@ -0,0 +1,413 @@
+import DICOMWeb from '../../../DICOMWeb';
+
+const WADOProxy = {
+  convertURL: (url, server) => {
+    // TODO: Remove all WADOProxy stuff from this file
+    return url;
+  },
+};
+function parseFloatArray(obj) {
+  const result = [];
+
+  if (!obj) {
+    return result;
+  }
+
+  const objs = obj.split('\\');
+  for (let i = 0; i < objs.length; i++) {
+    result.push(parseFloat(objs[i]));
+  }
+
+  return result;
+}
+
+/**
+ * Create a plain JS object that describes a study (a study descriptor object)
+ * @param {Object} server Object with server configuration parameters
+ * @param {Object} aSopInstance a SOP Instance from which study information will be added
+ */
+function createStudy(server, aSopInstance) {
+  // TODO: Pass a reference ID to the server instead of including the URLs here
+  return {
+    seriesList: [],
+    seriesMap: Object.create(null),
+    seriesLoader: null,
+    wadoUriRoot: server.wadoUriRoot,
+    wadoRoot: server.wadoRoot,
+    qidoRoot: server.qidoRoot,
+    patientName: DICOMWeb.getName(aSopInstance['00100010']),
+    patientId: DICOMWeb.getString(aSopInstance['00100020']),
+    patientAge: DICOMWeb.getNumber(aSopInstance['00101010']),
+    patientSize: DICOMWeb.getNumber(aSopInstance['00101020']),
+    patientWeight: DICOMWeb.getNumber(aSopInstance['00101030']),
+    accessionNumber: DICOMWeb.getString(aSopInstance['00080050']),
+    studyDate: DICOMWeb.getString(aSopInstance['00080020']),
+    modalities: DICOMWeb.getString(aSopInstance['00080061']),
+    studyDescription: DICOMWeb.getString(aSopInstance['00081030']),
+    imageCount: DICOMWeb.getString(aSopInstance['00201208']),
+    studyInstanceUid: DICOMWeb.getString(aSopInstance['0020000D']),
+    institutionName: DICOMWeb.getString(aSopInstance['00080080']),
+  };
+}
+
+/** Returns a WADO url for an instance
+ *
+ * @param studyInstanceUid
+ * @param seriesInstanceUid
+ * @param sopInstanceUid
+ * @returns  {string}
+ */
+function buildInstanceWadoUrl(
+  server,
+  studyInstanceUid,
+  seriesInstanceUid,
+  sopInstanceUid
+) {
+  // TODO: This can be removed, since DICOMWebClient has the same function. Not urgent, though
+  const params = [];
+
+  params.push('requestType=WADO');
+  params.push(`studyUID=${studyInstanceUid}`);
+  params.push(`seriesUID=${seriesInstanceUid}`);
+  params.push(`objectUID=${sopInstanceUid}`);
+  params.push('contentType=application/dicom');
+  params.push('transferSyntax=*');
+
+  const paramString = params.join('&');
+
+  return `${server.wadoUriRoot}?${paramString}`;
+}
+
+function buildInstanceWadoRsUri(
+  server,
+  studyInstanceUid,
+  seriesInstanceUid,
+  sopInstanceUid
+) {
+  return `${server.wadoRoot}/studies/${studyInstanceUid}/series/${seriesInstanceUid}/instances/${sopInstanceUid}`;
+}
+
+function buildInstanceFrameWadoRsUri(
+  server,
+  studyInstanceUid,
+  seriesInstanceUid,
+  sopInstanceUid,
+  frame
+) {
+  const baseWadoRsUri = buildInstanceWadoRsUri(
+    server,
+    studyInstanceUid,
+    seriesInstanceUid,
+    sopInstanceUid
+  );
+  frame = frame != null || 1;
+
+  return `${baseWadoRsUri}/frames/${frame}`;
+}
+
+function getFrameIncrementPointer(element) {
+  const frameIncrementPointerNames = {
+    '00181065': 'frameTimeVector',
+    '00181063': 'frameTime',
+  };
+
+  if (!element || !element.Value || !element.Value.length) {
+    return;
+  }
+
+  const value = element.Value[0];
+  return frameIncrementPointerNames[value];
+}
+
+function getRadiopharmaceuticalInfo(instance) {
+  const modality = DICOMWeb.getString(instance['00080060']);
+
+  if (modality !== 'PT') {
+    return;
+  }
+
+  const radiopharmaceuticalInfo = instance['00540016'];
+  if (
+    radiopharmaceuticalInfo === undefined ||
+    !radiopharmaceuticalInfo.Value ||
+    !radiopharmaceuticalInfo.Value.length
+  ) {
+    return;
+  }
+
+  const firstPetRadiopharmaceuticalInfo = radiopharmaceuticalInfo.Value[0];
+  return {
+    radiopharmaceuticalStartTime: DICOMWeb.getString(
+      firstPetRadiopharmaceuticalInfo['00181072']
+    ),
+    radionuclideTotalDose: DICOMWeb.getNumber(
+      firstPetRadiopharmaceuticalInfo['00181074']
+    ),
+    radionuclideHalfLife: DICOMWeb.getNumber(
+      firstPetRadiopharmaceuticalInfo['00181075']
+    ),
+  };
+}
+
+/**
+ * Parses the SourceImageSequence, if it exists, in order
+ * to return a ReferenceSOPInstanceUID. The ReferenceSOPInstanceUID
+ * is used to refer to this image in any accompanying DICOM-SR documents.
+ *
+ * @param instance
+ * @returns {String} The ReferenceSOPInstanceUID
+ */
+function getSourceImageInstanceUid(instance) {
+  // TODO= Parse the whole Source Image Sequence
+  // This is a really poor workaround for now.
+  // Later we should probably parse the whole sequence.
+  var SourceImageSequence = instance['00082112'];
+  if (
+    SourceImageSequence &&
+    SourceImageSequence.Value &&
+    SourceImageSequence.Value.length &&
+    SourceImageSequence.Value[0]['00081155'].Value
+  ) {
+    return SourceImageSequence.Value[0]['00081155'].Value[0];
+  }
+}
+
+async function makeSOPInstance(server, study, instance) {
+  const { studyInstanceUid } = study;
+  const seriesInstanceUid = DICOMWeb.getString(instance['0020000E']);
+  let series = study.seriesMap[seriesInstanceUid];
+
+  if (!series) {
+    series = {
+      seriesInstanceUid,
+      seriesDescription: DICOMWeb.getString(instance['0008103E']),
+      modality: DICOMWeb.getString(instance['00080060']),
+      seriesNumber: DICOMWeb.getNumber(instance['00200011']),
+      seriesDate: DICOMWeb.getString(instance['00080021']),
+      seriesTime: DICOMWeb.getString(instance['00080031']),
+      instances: [],
+    };
+    study.seriesMap[seriesInstanceUid] = series;
+    study.seriesList.push(series);
+  }
+
+  const sopInstanceUid = DICOMWeb.getString(instance['00080018']);
+  const wadouri = buildInstanceWadoUrl(
+    server,
+    studyInstanceUid,
+    seriesInstanceUid,
+    sopInstanceUid
+  );
+  const baseWadoRsUri = buildInstanceWadoRsUri(
+    server,
+    studyInstanceUid,
+    seriesInstanceUid,
+    sopInstanceUid
+  );
+  const wadorsuri = buildInstanceFrameWadoRsUri(
+    server,
+    studyInstanceUid,
+    seriesInstanceUid,
+    sopInstanceUid
+  );
+
+  const sopInstance = {
+    imageType: DICOMWeb.getString(instance['00080008']),
+    sopClassUid: DICOMWeb.getString(instance['00080016']),
+    modality: DICOMWeb.getString(instance['00080060']),
+    sopInstanceUid,
+    instanceNumber: DICOMWeb.getNumber(instance['00200013']),
+    imagePositionPatient: DICOMWeb.getString(instance['00200032']),
+    imageOrientationPatient: DICOMWeb.getString(instance['00200037']),
+    frameOfReferenceUID: DICOMWeb.getString(instance['00200052']),
+    sliceLocation: DICOMWeb.getNumber(instance['00201041']),
+    samplesPerPixel: DICOMWeb.getNumber(instance['00280002']),
+    photometricInterpretation: DICOMWeb.getString(instance['00280004']),
+    planarConfiguration: DICOMWeb.getNumber(instance['00280006']),
+    rows: DICOMWeb.getNumber(instance['00280010']),
+    columns: DICOMWeb.getNumber(instance['00280011']),
+    pixelSpacing: DICOMWeb.getString(instance['00280030']),
+    pixelAspectRatio: DICOMWeb.getString(instance['00280034']),
+    bitsAllocated: DICOMWeb.getNumber(instance['00280100']),
+    bitsStored: DICOMWeb.getNumber(instance['00280101']),
+    highBit: DICOMWeb.getNumber(instance['00280102']),
+    pixelRepresentation: DICOMWeb.getNumber(instance['00280103']),
+    smallestPixelValue: DICOMWeb.getNumber(instance['00280106']),
+    largestPixelValue: DICOMWeb.getNumber(instance['00280107']),
+    windowCenter: DICOMWeb.getString(instance['00281050']),
+    windowWidth: DICOMWeb.getString(instance['00281051']),
+    rescaleIntercept: DICOMWeb.getNumber(instance['00281052']),
+    rescaleSlope: DICOMWeb.getNumber(instance['00281053']),
+    rescaleType: DICOMWeb.getNumber(instance['00281054']),
+    sourceImageInstanceUid: getSourceImageInstanceUid(instance),
+    laterality: DICOMWeb.getString(instance['00200062']),
+    viewPosition: DICOMWeb.getString(instance['00185101']),
+    acquisitionDateTime: DICOMWeb.getString(instance['0008002A']),
+    numberOfFrames: DICOMWeb.getNumber(instance['00280008']),
+    frameIncrementPointer: getFrameIncrementPointer(instance['00280009']),
+    frameTime: DICOMWeb.getNumber(instance['00181063']),
+    frameTimeVector: parseFloatArray(DICOMWeb.getString(instance['00181065'])),
+    sliceThickness: DICOMWeb.getNumber(instance['00180050']),
+    spacingBetweenSlices: DICOMWeb.getString(instance['00180088']),
+    lossyImageCompression: DICOMWeb.getString(instance['00282110']),
+    derivationDescription: DICOMWeb.getString(instance['00282111']),
+    lossyImageCompressionRatio: DICOMWeb.getString(instance['00282112']),
+    lossyImageCompressionMethod: DICOMWeb.getString(instance['00282114']),
+    echoNumber: DICOMWeb.getString(instance['00180086']),
+    contrastBolusAgent: DICOMWeb.getString(instance['00180010']),
+    radiopharmaceuticalInfo: getRadiopharmaceuticalInfo(instance),
+    baseWadoRsUri: baseWadoRsUri,
+    wadouri: WADOProxy.convertURL(wadouri, server),
+    wadorsuri: WADOProxy.convertURL(wadorsuri, server),
+    wadoRoot: server.wadoRoot,
+    imageRendering: server.imageRendering,
+    thumbnailRendering: server.thumbnailRendering,
+  };
+
+  // Get additional information if the instance uses "PALETTE COLOR" photometric interpretation
+  if (sopInstance.photometricInterpretation === 'PALETTE COLOR') {
+    const redPaletteColorLookupTableDescriptor = parseFloatArray(
+      DICOMWeb.getString(instance['00281101'])
+    );
+    const greenPaletteColorLookupTableDescriptor = parseFloatArray(
+      DICOMWeb.getString(instance['00281102'])
+    );
+    const bluePaletteColorLookupTableDescriptor = parseFloatArray(
+      DICOMWeb.getString(instance['00281103'])
+    );
+    const palettes = await getPaletteColors(
+      server,
+      instance,
+      redPaletteColorLookupTableDescriptor
+    );
+
+    if (palettes) {
+      if (palettes.uid) {
+        sopInstance.paletteColorLookupTableUID = palettes.uid;
+      }
+
+      sopInstance.redPaletteColorLookupTableData = palettes.red;
+      sopInstance.greenPaletteColorLookupTableData = palettes.green;
+      sopInstance.bluePaletteColorLookupTableData = palettes.blue;
+      sopInstance.redPaletteColorLookupTableDescriptor = redPaletteColorLookupTableDescriptor;
+      sopInstance.greenPaletteColorLookupTableDescriptor = greenPaletteColorLookupTableDescriptor;
+      sopInstance.bluePaletteColorLookupTableDescriptor = bluePaletteColorLookupTableDescriptor;
+    }
+  }
+
+  series.instances.push(sopInstance);
+  return sopInstance;
+}
+
+function getPaletteColor(server, instance, tag, lutDescriptor) {
+  const numLutEntries = lutDescriptor[0];
+  const bits = lutDescriptor[2];
+
+  let uri = WADOProxy.convertURL(instance[tag].BulkDataURI, server);
+
+  // TODO: Workaround for dcm4chee behind SSL-terminating proxy returning
+  // incorrect bulk data URIs
+  if (server.wadoRoot.indexOf('https') === 0 && !uri.includes('https')) {
+    uri = uri.replace('http', 'https');
+  }
+
+  const config = {
+    url: server.wadoRoot, //BulkDataURI is absolute, so this isn't used
+    headers: DICOMWeb.getAuthorizationHeader(server),
+  };
+  const dicomWeb = new api.DICOMwebClient(config);
+  const options = {
+    BulkDataURI: uri,
+  };
+
+  const readUInt16 = (byteArray, position) => {
+    return byteArray[position] + byteArray[position + 1] * 256;
+  };
+
+  const arrayBufferToPaletteColorLUT = result => {
+    const arraybuffer = result[0];
+    const byteArray = new Uint8Array(arraybuffer);
+    const lut = [];
+
+    for (let i = 0; i < numLutEntries; i++) {
+      if (bits === 16) {
+        lut[i] = readUInt16(byteArray, i * 2);
+      } else {
+        lut[i] = byteArray[i];
+      }
+    }
+
+    return lut;
+  };
+
+  return dicomWeb.retrieveBulkData(options).then(arrayBufferToPaletteColorLUT);
+}
+
+/**
+ * Fetch palette colors for instances with "PALETTE COLOR" photometricInterpretation.
+ *
+ * @param server {Object} Current server;
+ * @param instance {Object} The retrieved instance metadata;
+ * @returns {String} The ReferenceSOPInstanceUID
+ */
+async function getPaletteColors(server, instance, lutDescriptor) {
+  let paletteUID = DICOMWeb.getString(instance['00281199']);
+
+  return new Promise((resolve, reject) => {
+    let entry;
+    if (paletteColorCache.isValidUID(paletteUID)) {
+      entry = paletteColorCache.get(paletteUID);
+
+      if (entry) {
+        return resolve(entry);
+      }
+    }
+
+    // no entry in cache... Fetch remote data.
+    const r = getPaletteColor(server, instance, '00281201', lutDescriptor);
+    const g = getPaletteColor(server, instance, '00281202', lutDescriptor);
+    const b = getPaletteColor(server, instance, '00281203', lutDescriptor);
+
+    const promises = [r, g, b];
+
+    Promise.all(promises).then(args => {
+      entry = {
+        red: args[0],
+        green: args[1],
+        blue: args[2],
+      };
+
+      // when paletteUID is present, the entry can be cached...
+      entry.uid = paletteUID;
+      paletteColorCache.add(entry);
+
+      resolve(entry);
+    });
+  });
+}
+
+/**
+ * Add a list of SOP Instances to a given study object descriptor
+ * @param {Object} server Object with server configuration parameters
+ * @param {Object} study The study descriptor to which the given SOP instances will be added
+ * @param {Array} sopInstanceList A list of SOP instance objects
+ */
+async function addInstancesToStudy(server, study, sopInstanceList) {
+  return Promise.all(
+    sopInstanceList.map(function(sopInstance) {
+      return makeSOPInstance(server, study, sopInstance);
+    })
+  );
+}
+
+const createStudyFromSOPInstanceList = async (server, sopInstanceList) => {
+  if (Array.isArray(sopInstanceList) && sopInstanceList.length > 0) {
+    const firstSopInstance = sopInstanceList[0];
+    const study = createStudy(server, firstSopInstance);
+    await addInstancesToStudy(server, study, sopInstanceList);
+    return study;
+  }
+  throw new Error('Failed to create study out of provided SOP instance list');
+};
+
+export { createStudyFromSOPInstanceList, addInstancesToStudy };

platform/core/src/studies/sortStudy.js

@@ -1,17 +1,96 @@
+import getSeriesInfo from './getSeriesInfo';
+
 /**
- * Sorts the series and instances inside a study instance by their series
- * and instance numbers in ascending order.
+ * Series sorting criteria: series considered low priority are moved to the end
+ * of the list and series number is used to break ties
+ * @param {Object} firstSeries
+ * @param {Object} secondSeries
+ */
+function seriesInfoSortingCriteria(firstSeries, secondSeries) {
+  const a = getSeriesInfo(firstSeries);
+  const b = getSeriesInfo(secondSeries);
+  if (!a.isLowPriority && b.isLowPriority) {
+    return -1;
+  }
+  if (a.isLowPriority && !b.isLowPriority) {
+    return 1;
+  }
+  return a.seriesNumber - b.seriesNumber;
+}
+
+const seriesSortCriteria = {
+  default: (a, b) => a.seriesNumber - b.seriesNumber,
+  seriesInfoSortingCriteria,
+};
+
+const instancesSortCriteria = {
+  default: (a, b) => a.instanceNumber - b.instanceNumber,
+};
+
+const sortingCriteria = {
+  seriesSortCriteria,
+  instancesSortCriteria,
+};
+
+/**
+ * Sorts given seriesList (given param is modified)
+ * The default criteria is based on series number in ascending order.
+ *
+ * @param {Array} seriesList List of series
+ * @param {function} seriesSortingCriteria method for sorting
+ * @returns {Array} sorted seriesList object
+ */
+const sortStudySeries = (
+  seriesList,
+  seriesSortingCriteria = seriesSortCriteria.default
+) => {
+  return seriesList.sort(seriesSortingCriteria);
+};
+
+/**
+ * Sorts given instancesList (given param is modified)
+ * The default criteria is based on instance number in ascending order.
+ *
+ * @param {Array} instancesList List of series
+ * @param {function} instancesSortingCriteria method for sorting
+ * @returns {Array} sorted instancesList object
+ */
+const sortStudyInstances = (
+  instancesList,
+  instancesSortingCriteria = instancesSortCriteria.default
+) => {
+  return instancesList.sort(instancesSortingCriteria);
+};
+
+/**
+ * Sorts the series and instances (by default) inside a study instance based on sortingCriteria (given param is modified)
+ * The default criteria is based on series and instance numbers in ascending order.
  *
  * @param {Object} study The study instance
+ * @param {boolean} [deepSort = true] to sort instance also
+ * @param {function} [seriesSortingCriteria = seriesSortCriteria.default] method for sorting series
+ * @param {function} [instancesSortingCriteria = instancesSortCriteria.default] method for sorting instances
+ * @returns {Object} sorted study object
  */
-export default function sortStudy(study) {
+export default function sortStudy(
+  study,
+  deepSort = true,
+  seriesSortingCriteria = seriesSortCriteria.default,
+  instancesSortingCriteria = instancesSortCriteria.default
+) {
   if (!study || !study.seriesList) {
     throw new Error('Insufficient study data was provided to sortStudy');
   }
 
-  study.seriesList.sort((a, b) => a.seriesNumber - b.seriesNumber);
+  sortStudySeries(study.seriesList, seriesSortingCriteria);
 
-  study.seriesList.forEach(series => {
-    series.instances.sort((a, b) => a.instanceNumber - b.instanceNumber);
-  });
+  if (deepSort) {
+    study.seriesList.forEach(series => {
+      sortStudyInstances(series.instances, instancesSortingCriteria);
+    });
+  }
+
+  return study;
 }
+
+export { sortStudySeries, sortStudyInstances, sortingCriteria };

platform/core/src/utils/index.js

@@ -11,6 +11,7 @@ import writeScript from './writeScript.js';
 import DicomLoaderService from './dicomLoaderService.js';
 import b64toBlob from './b64toBlob.js';
 import * as urlUtil from './urlUtil';
+import makeCancelable from './makeCancelable';
 
 const utils = {
   guid,
@@ -27,6 +28,7 @@ const utils = {
   DICOMTagDescriptions,
   DicomLoaderService,
   urlUtil,
+  makeCancelable,
 };
 
 export {
@@ -44,6 +46,7 @@ export {
   DICOMTagDescriptions,
   DicomLoaderService,
   urlUtil,
+  makeCancelable,
 };
 
 export default utils;

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

@@ -17,6 +17,7 @@ describe('Top level exports', () => {
       'DICOMTagDescriptions',
       'DicomLoaderService',
       'urlUtil',
+      'makeCancelable',
     ].sort();
 
     const exports = Object.keys(utils.default).sort();

platform/core/src/utils/makeCancelable.js

@@ -0,0 +1,19 @@
+export default function makeCancelable(thenable) {
+  let isCanceled = false;
+  const promise = Promise.resolve(thenable).then(
+    function(result) {
+      if (isCanceled) throw Object.freeze({ isCanceled });
+      return result;
+    },
+    function(error) {
+      if (isCanceled) throw Object.freeze({ isCanceled, error });
+      throw error;
+    }
+  );
+  return Object.assign(Object.create(promise), {
+    then: promise.then.bind(promise),
+    cancel() {
+      isCanceled = true;
+    },
+  });
+}

platform/ui/CHANGELOG.md

@@ -3,6 +3,105 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.59.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.59.0...@ohif/ui@0.59.1) (2019-11-05)
+
+
+### Bug Fixes
+
+* [#1075](https://github.com/OHIF/Viewers/issues/1075) Returning to the Study List before all series have finishe… ([#1090](https://github.com/OHIF/Viewers/issues/1090)) ([ecaf578](https://github.com/OHIF/Viewers/commit/ecaf578f92dc40294cec7ff9b272fb432dec4125))
+
+
+
+
+
+# [0.59.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.5...@ohif/ui@0.59.0) (2019-11-04)
+
+
+### Features
+
+* 🎸 New modal provider ([#1110](https://github.com/OHIF/Viewers/issues/1110)) ([5ee832b](https://github.com/OHIF/Viewers/commit/5ee832b19505a4e8e5756660ce6ed03a7f18dec3)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116)
+
+
+
+
+
+## [0.58.5](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.4...@ohif/ui@0.58.5) (2019-11-04)
+
+
+### Bug Fixes
+
+* 🐛 Minor issues measurement panel related to description ([#1142](https://github.com/OHIF/Viewers/issues/1142)) ([681384b](https://github.com/OHIF/Viewers/commit/681384b7425c83b02a0ed83371ca92d78ca7838c))
+
+
+
+
+
+## [0.58.4](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.3...@ohif/ui@0.58.4) (2019-10-31)
+
+
+### Bug Fixes
+
+* application crash if patientName is an object ([#1138](https://github.com/OHIF/Viewers/issues/1138)) ([64cf3b3](https://github.com/OHIF/Viewers/commit/64cf3b324da2383a927af1df2d46db2fca5318aa))
+
+
+
+
+
+## [0.58.3](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.2...@ohif/ui@0.58.3) (2019-10-30)
+
+
+### Bug Fixes
+
+* 🐛 Fix ghost shadow on thumb ([#1113](https://github.com/OHIF/Viewers/issues/1113)) ([caaa032](https://github.com/OHIF/Viewers/commit/caaa032c4bc24fd69fdb01a15a8feb2721c321db))
+
+
+
+
+
+## [0.58.2](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.1...@ohif/ui@0.58.2) (2019-10-29)
+
+
+### Bug Fixes
+
+* 🐛 Limit image download size to avoid browser issues ([#1112](https://github.com/OHIF/Viewers/issues/1112)) ([5716b71](https://github.com/OHIF/Viewers/commit/5716b71d409ee1c6f13393c8cb7f50222415e198)), closes [#1099](https://github.com/OHIF/Viewers/issues/1099)
+
+
+
+
+
+## [0.58.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.0...@ohif/ui@0.58.1) (2019-10-29)
+
+
+### Bug Fixes
+
+* **StudyList:** camel case colSpan ([#1123](https://github.com/OHIF/Viewers/issues/1123)) ([0d498ba](https://github.com/OHIF/Viewers/commit/0d498ba17ddde8d8f0c51d742770e1574041eec0))
+
+
+
+
+
+# [0.58.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.57.1...@ohif/ui@0.58.0) (2019-10-28)
+
+
+### Features
+
+* responsive study list ([#1068](https://github.com/OHIF/Viewers/issues/1068)) ([2cdef4b](https://github.com/OHIF/Viewers/commit/2cdef4b9844cc2ce61e9ce76b5a942ba7051fe16))
+
+
+
+
+
+## [0.57.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.57.0...@ohif/ui@0.57.1) (2019-10-28)
+
+
+### Bug Fixes
+
+* MIP styling ([#1109](https://github.com/OHIF/Viewers/issues/1109)) ([0d21cc6](https://github.com/OHIF/Viewers/commit/0d21cc6ad0c47706b9e62e05fe2a0f1d86339760))
+
+
+
+
+
 # [0.57.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.56.1...@ohif/ui@0.57.0) (2019-10-26)
 
 

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "0.57.0",
+  "version": "0.59.1",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -48,10 +48,10 @@
     "moment": "2.24.0",
     "prop-types": "15.6.2",
     "react-bootstrap-modal": "4.2.0",
-    "react-dates": "18.4.1",
-    "react-dnd": "9.3.4",
-    "react-dnd-html5-backend": "^9.3.4",
-    "react-dnd-touch-backend": "^9.3.4",
+    "react-dates": "21.2.1",
+    "react-dnd": "9.4.0",
+    "react-dnd-html5-backend": "^9.4.0",
+    "react-dnd-touch-backend": "^9.4.0",
     "react-i18next": "^10.11.0",
     "react-with-direction": "1.3.0"
   },

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

@@ -32,6 +32,7 @@ const DownloadDialog = ({
   downloadBlob,
   defaultSize,
   minimumSize,
+  maximumSize,
   canvasClass,
 }) => {
   const [filename, setFilename] = useState(DEFAULT_FILENAME);
@@ -75,24 +76,24 @@ const DownloadDialog = ({
   }, [defaultSize, disableViewport, enableViewport, viewportElement]);
 
   useEffect(() => {
+    const validSize = value => (value >= minimumSize ? value : minimumSize);
     const loadAndUpdateViewports = async () => {
       const {
         image,
         width: scaledWidth,
         height: scaledHeight,
       } = await loadImage(activeViewport, viewportElement, width, height);
-
       setLastImage(image);
 
       toggleAnnotations(showAnnotations, viewportElement);
 
-      setViewportElementHeight(scaledHeight);
-      setViewportElementWidth(scaledWidth);
+      setViewportElementHeight(validSize(scaledHeight));
+      setViewportElementWidth(validSize(scaledWidth));
 
       setDownloadCanvas(state => ({
         ...state,
-        height: scaledHeight,
-        width: scaledWidth,
+        height: validSize(scaledHeight),
+        width: validSize(scaledWidth),
       }));
 
       const {
@@ -108,8 +109,8 @@ const DownloadDialog = ({
       setViewportPreview(state => ({
         ...state,
         src: dataUrl,
-        width: viewportElementWidth,
-        height: viewportElementHeight,
+        width: validSize(viewportElementWidth),
+        height: validSize(viewportElementHeight),
       }));
     };
 
@@ -125,10 +126,12 @@ const DownloadDialog = ({
     updateViewportPreview,
     fileType,
     downloadCanvas.ref,
+    minimumSize,
+    maximumSize,
   ]);
 
-  const onHeightChange = () => {
-    const newHeight = event.target.value;
+  const onHeightChange = event => {
+    const newHeight = Math.min(event.target.value, maximumSize);
     setHeight(newHeight);
 
     setViewportElementHeight(newHeight);
@@ -153,7 +156,7 @@ const DownloadDialog = ({
   };
 
   const onWidthChange = event => {
-    const newWidth = event.target.value;
+    const newWidth = Math.min(event.target.value, maximumSize);
     setWidth(newWidth);
 
     setViewportElementWidth(newWidth);
@@ -212,6 +215,7 @@ const DownloadDialog = ({
               <TextInput
                 type="number"
                 min={minimumSize}
+                max={maximumSize}
                 value={width}
                 label={t('Image width (px)')}
                 onChange={onWidthChange}
@@ -221,6 +225,7 @@ const DownloadDialog = ({
               <TextInput
                 type="number"
                 min={minimumSize}
+                max={maximumSize}
                 value={height}
                 label={t('Image height (px)')}
                 onChange={onHeightChange}
@@ -329,6 +334,7 @@ DownloadDialog.propTypes = {
   downloadBlob: PropTypes.func.isRequired,
   defaultSize: PropTypes.number.isRequired,
   minimumSize: PropTypes.number.isRequired,
+  maximumSize: PropTypes.number.isRequired,
   canvasClass: PropTypes.string.isRequired,
 };
 

platform/ui/src/components/index.js

@@ -1,4 +1,4 @@
-import { StudyBrowser, ThumbnailEntry } from './studyBrowser';
+import { StudyBrowser, Thumbnail } from './studyBrowser';
 import { LayoutButton, LayoutChooser } from './layoutButton';
 import { MeasurementTable, MeasurementTableItem } from './measurementTable';
 import { Overlay, OverlayTrigger } from './overlayTrigger';
@@ -16,7 +16,13 @@ import { QuickSwitch } from './quickSwitch';
 import { RoundedButtonGroup } from './roundedButtonGroup';
 import { SelectTree } from './selectTree';
 import { SimpleDialog } from './simpleDialog';
-import { StudyList } from './studyList';
+import { OHIFModal } from './ohifModal';
+import {
+  PageToolbar,
+  StudyList,
+  TableSearchFilter,
+  TablePagination,
+} from './studyList';
 import { ToolbarSection } from './toolbarSection';
 import { Tooltip } from './tooltip';
 
@@ -32,16 +38,20 @@ export {
   OverlayTrigger,
   QuickSwitch,
   RoundedButtonGroup,
+  PageToolbar,
   SelectTree,
   SimpleDialog,
   StudyBrowser,
   StudyList,
   TableList,
   TableListItem,
-  ThumbnailEntry,
+  Thumbnail,
+  TableSearchFilter,
+  TablePagination,
   ToolbarSection,
   Tooltip,
   AboutModal,
   UserPreferences,
   UserPreferencesModal,
+  OHIFModal,
 };

platform/ui/src/components/measurementTable/MeasurementTableItem.styl

@@ -30,6 +30,11 @@
   .measurementLocation
     margin-left: 9px;
     margin-top: 9px;
+    overflow: hidden;
+    max-width: calc(100% - 50px);
+    text-overflow: ellipsis;
+    overflow-wrap: normal;
+    white-space: nowrap;
 
   .measurementDisplayText
     display: inline-block;

platform/ui/src/components/ohifModal/OHIFModal.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactBootstrapModal from 'react-bootstrap-modal';
+import classNames from 'classnames';
+
+const OHIFModal = ({
+  className,
+  closeButton,
+  backdrop,
+  keyboard,
+  show,
+  title,
+  onHide,
+  footer: Footer,
+  header: Header,
+  children: Component,
+}) => (
+  <ReactBootstrapModal
+    className={classNames('modal fade themed in', className)}
+    backdrop={backdrop}
+    keyboard={keyboard}
+    show={show}
+    large={true}
+    title={title}
+    onHide={onHide}
+  >
+    {(Header || title) && (
+      <ReactBootstrapModal.Header closeButton={closeButton}>
+        {title && (
+          <ReactBootstrapModal.Title>{title}</ReactBootstrapModal.Title>
+        )}
+        {Header && <Header hide={onHide} />}
+      </ReactBootstrapModal.Header>
+    )}
+    <ReactBootstrapModal.Body>
+      {Component && <Component hide={onHide} />}
+    </ReactBootstrapModal.Body>
+    {Footer && (
+      <ReactBootstrapModal.Footer>
+        {' '}
+        <Footer hide={onHide} />
+      </ReactBootstrapModal.Footer>
+    )}
+  </ReactBootstrapModal>
+);
+
+OHIFModal.propTypes = {
+  className: PropTypes.string,
+  closeButton: PropTypes.bool,
+  backdrop: PropTypes.bool,
+  keyboard: PropTypes.bool,
+  show: PropTypes.bool,
+  title: PropTypes.string,
+  onHide: PropTypes.func,
+  footer: PropTypes.node,
+  header: PropTypes.node,
+  children: PropTypes.node,
+};
+
+export default OHIFModal;

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

@@ -0,0 +1,39 @@
+---
+name: OHIFModal
+menu: Components
+route: /components/ohif-modal
+---
+
+import { Playground, Props } from 'docz'
+import { State } from 'react-powerplug'
+import { OHIFModal } from './../index'
+import NameSpace from '../../../__docs__/NameSpace'
+
+# OHIF Modal
+
+## 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' }}>
+          <OHIFModal />
+        </div>
+      </React.Fragment>
+    )}
+  </State>
+</Playground>
+
+## API
+
+<Props of={OHIFModal} />
+
+## Translation Namespace
+
+<NameSpace name="OHIFModal" />

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 /* global cornerstone */
 import './ImageThumbnail.styl';
 
+import { utils } from '@ohif/core';
 import React, { PureComponent } from 'react';
 
 import PropTypes from 'prop-types';
@@ -32,7 +33,7 @@ export default class ImageThumbnail extends PureComponent {
 
   constructor(props) {
     super(props);
-
+    this.cancelablePromises = [];
     this.canvas = React.createRef();
     this.state = {
       loading: this.shouldRenderToCanvas(),
@@ -43,10 +44,17 @@ export default class ImageThumbnail extends PureComponent {
     return this.props.imageId && !this.props.imageSrc;
   }
 
+  fetchImage() {
+    const cancelablePromise = utils.makeCancelable(
+      cornerstone.loadAndCacheImage(this.props.imageId)
+    );
+    this.cancelablePromises.push(cancelablePromise);
+    return cancelablePromise;
+  }
+
   componentDidMount() {
     if (this.shouldRenderToCanvas()) {
-      cornerstone
-        .loadAndCacheImage(this.props.imageId)
+      this.fetchImage()
         .then(image => {
           cornerstone.renderToCanvas(this.canvas.current, image);
           this.setState({
@@ -54,6 +62,7 @@ export default class ImageThumbnail extends PureComponent {
           });
         })
         .catch(error => {
+          if (error.isCanceled) return;
           this.setState({
             loading: false,
             error: true,
@@ -63,6 +72,12 @@ export default class ImageThumbnail extends PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    while (this.cancelablePromises.length > 0) {
+      this.cancelablePromises.pop().cancel();
+    }
+  }
+
   render() {
     let loadingOrError;
     if (this.props.error) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

platform/ui/src/components/tableList/TableListItem.styl

@@ -38,6 +38,7 @@
   .itemContent
     flex: 1
     color: var(--text-secondary-color)
+    width: calc(100% - 30px);
     font-weight: 400
     margin-left: 9px;
     margin-top: 9px;

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 ? (

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/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

@@ -15,6 +15,7 @@
   border: none;
   font-weight: normal;
   border-radius: 4px;
+  background-image: none;
 }
 
 .select-ohif-container .select-ohif::-ms-expand {
@@ -32,3 +33,31 @@
 .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',
+    sans-serif;
+  font-size: 0.8em;
+  font-weight: 600;
+  color: #444;
+  line-height: 1.3;
+  padding: 0.6em 1.4em 0.5em 0.8em;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  border: 1px solid #aaa;
+  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
+  border-radius: 0.5em;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
+    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
+  background-repeat: no-repeat, repeat;
+  background-position: right 0.7em top 50%, 0 0;
+  background-size: 0.65em auto, 100%;
+}

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

@@ -31,10 +31,7 @@ class Select extends Component {
       <div className="select-ohif-container">
         <label className="select-ohif-label" htmlFor={this.id}>
           {this.props.label}
-          <select
-            className="form-control select-ohif"
-            {...this.props}
-          >
+          <select className="form-control select-ohif" {...this.props}>
             {this.props.options.map(({ key, value }) => {
               return (
                 <option key={key} value={value}>
@@ -44,9 +41,7 @@ class Select extends Component {
             })}
           </select>
         </label>
-
       </div>
-
     );
   }
 }

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/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

@@ -8,6 +8,7 @@ import {
   MeasurementTableItem,
   Overlay,
   OverlayTrigger,
+  PageToolbar,
   QuickSwitch,
   RoundedButtonGroup,
   SelectTree,
@@ -16,13 +17,17 @@ import {
   StudyList,
   TableList,
   TableListItem,
-  ThumbnailEntry,
+  Thumbnail,
+  TableSearchFilter,
+  TablePagination,
   ToolbarSection,
   Tooltip,
   AboutModal,
   UserPreferences,
   UserPreferencesModal,
+  OHIFModal,
 } from './components';
+import { useDebounce, useMedia } from './hooks';
 
 // Elements
 import {
@@ -30,6 +35,7 @@ import {
   Icon,
   DropdownMenu as Dropdown,
   Select,
+  OldSelect,
   Label,
   Range,
   TextArea,
@@ -47,6 +53,11 @@ import SnackbarProvider, {
   useSnackbarContext,
   withSnackbar,
 } from './utils/SnackbarProvider';
+import ModalProvider, {
+  useModal,
+  withModal,
+  ModalConsumer,
+} from './utils/ModalProvider';
 
 export {
   // Elements
@@ -68,18 +79,22 @@ export {
   Overlay,
   OverlayTrigger,
   PlayClipButton,
+  PageToolbar,
   QuickSwitch,
   Range,
   RoundedButtonGroup,
   ScrollableArea,
   Select,
+  OldSelect,
   SelectTree,
   SimpleDialog,
   StudyBrowser,
   StudyList,
   TableList,
   TableListItem,
-  ThumbnailEntry,
+  Thumbnail,
+  TableSearchFilter,
+  TablePagination,
   Toolbar,
   ToolbarButton,
   ToolbarSection,
@@ -91,4 +106,12 @@ export {
   SnackbarProvider,
   useSnackbarContext,
   withSnackbar,
+  ModalProvider,
+  useModal,
+  ModalConsumer,
+  withModal,
+  OHIFModal,
+  // Hooks
+  useDebounce,
+  useMedia,
 };

platform/ui/src/utils/ModalProvider.js

@@ -0,0 +1,83 @@
+import React, { useState, createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const ModalContext = createContext(null);
+const { Provider, Consumer } = ModalContext;
+
+export const useModal = () => useContext(ModalContext);
+
+const ModalProvider = ({ children, modal: Modal }) => {
+  const DEFAULT_OPTIONS = {
+    component: null /* The component instance inside the modal. */,
+    backdrop: false /* Should the modal render a backdrop overlay. */,
+    keyboard: false /* Modal is dismissible via the esc key. */,
+    show: true /* Make the Modal visible or hidden. */,
+    closeButton: true /* Should the modal body render the close button. */,
+    title: null /* Should the modal render the title independently of the body content. */,
+    customClassName: null /* The custom class to style the modal. */,
+  };
+
+  const [options, setOptions] = useState(DEFAULT_OPTIONS);
+
+  /**
+   * Show the modal and override its configuration props.
+   *
+   * @returns void
+   */
+  const show = (component, props = {}) =>
+    setOptions(Object.assign({}, options, props, { component }));
+
+  /**
+   * Hide the modal and set its properties to default.
+   *
+   * @returns void
+   */
+  const hide = () => setOptions(DEFAULT_OPTIONS);
+
+  return (
+    <Provider value={{ ...options, show, hide }}>
+      <Consumer>
+        {props => {
+          const { component, footer, header, customClassName } = props;
+          return component ? (
+            <Modal
+              className={classNames(customClassName, component.className)}
+              backdrop={options.backdrop}
+              keyboard={options.keyboard}
+              show={options.show}
+              title={options.title}
+              closeButton={options.closeButton}
+              onHide={hide}
+              footer={footer}
+              header={header}
+            >
+              {component}
+            </Modal>
+          ) : null;
+        }}
+      </Consumer>
+      {children}
+    </Provider>
+  );
+};
+
+ModalProvider.propTypes = {
+  children: PropTypes.node,
+  modal: PropTypes.node,
+};
+
+/**
+ * Higher Order Component to use the modal methods through a Class Component.
+ *
+ * @returns
+ */
+export const withModal = Component => {
+  return function WrappedComponent(props) {
+    return <Component {...props} modalContext={{ ...useModal() }} />;
+  };
+};
+
+export default ModalProvider;
+
+export const ModalConsumer = ModalContext.Consumer;

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

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

platform/viewer/CHANGELOG.md

@@ -3,6 +3,178 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.4.1...@ohif/viewer@2.5.0) (2019-11-05)
+
+
+### Features
+
+* 🎸 Filter by url query param for seriesInstnaceUID ([#1117](https://github.com/OHIF/Viewers/issues/1117)) ([e208f2e](https://github.com/OHIF/Viewers/commit/e208f2e6a9c49b16dadead0a917f657cf023929a)), closes [#1118](https://github.com/OHIF/Viewers/issues/1118)
+
+
+
+
+
+## [2.4.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.4.0...@ohif/viewer@2.4.1) (2019-11-05)
+
+
+### Bug Fixes
+
+* [#1075](https://github.com/OHIF/Viewers/issues/1075) Returning to the Study List before all series have finishe… ([#1090](https://github.com/OHIF/Viewers/issues/1090)) ([ecaf578](https://github.com/OHIF/Viewers/commit/ecaf578f92dc40294cec7ff9b272fb432dec4125))
+
+
+
+
+
+# [2.4.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.8...@ohif/viewer@2.4.0) (2019-11-04)
+
+
+### Features
+
+* 🎸 New modal provider ([#1110](https://github.com/OHIF/Viewers/issues/1110)) ([5ee832b](https://github.com/OHIF/Viewers/commit/5ee832b19505a4e8e5756660ce6ed03a7f18dec3)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116)
+
+
+
+
+
+## [2.3.8](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.7...@ohif/viewer@2.3.8) (2019-11-04)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.3.7](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.6...@ohif/viewer@2.3.7) (2019-11-04)
+
+
+### Bug Fixes
+
+* 🐛 Minor issues measurement panel related to description ([#1142](https://github.com/OHIF/Viewers/issues/1142)) ([681384b](https://github.com/OHIF/Viewers/commit/681384b7425c83b02a0ed83371ca92d78ca7838c))
+
+
+
+
+
+## [2.3.6](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.5...@ohif/viewer@2.3.6) (2019-11-02)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.3.5](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.4...@ohif/viewer@2.3.5) (2019-10-31)
+
+
+### Bug Fixes
+
+* application crash if patientName is an object ([#1138](https://github.com/OHIF/Viewers/issues/1138)) ([64cf3b3](https://github.com/OHIF/Viewers/commit/64cf3b324da2383a927af1df2d46db2fca5318aa))
+
+
+
+
+
+## [2.3.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.3...@ohif/viewer@2.3.4) (2019-10-30)
+
+
+### Bug Fixes
+
+* 🐛 Fix ghost shadow on thumb ([#1113](https://github.com/OHIF/Viewers/issues/1113)) ([caaa032](https://github.com/OHIF/Viewers/commit/caaa032c4bc24fd69fdb01a15a8feb2721c321db))
+
+
+
+
+
+## [2.3.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.2...@ohif/viewer@2.3.3) (2019-10-30)
+
+
+### Bug Fixes
+
+* get adapter store picker to show ([#1134](https://github.com/OHIF/Viewers/issues/1134)) ([50ca2bd](https://github.com/OHIF/Viewers/commit/50ca2bde971e1e67b73ece96369052dd1a35ac68))
+
+
+
+
+
+## [2.3.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.1...@ohif/viewer@2.3.2) (2019-10-29)
+
+
+### Bug Fixes
+
+* 🐛 Limit image download size to avoid browser issues ([#1112](https://github.com/OHIF/Viewers/issues/1112)) ([5716b71](https://github.com/OHIF/Viewers/commit/5716b71d409ee1c6f13393c8cb7f50222415e198)), closes [#1099](https://github.com/OHIF/Viewers/issues/1099)
+
+
+
+
+
+## [2.3.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.0...@ohif/viewer@2.3.1) (2019-10-29)
+
+
+### Bug Fixes
+
+* rollbar template needs PUBLIC_URL defined ([#1127](https://github.com/OHIF/Viewers/issues/1127)) ([352407c](https://github.com/OHIF/Viewers/commit/352407c71ae93946e9ebad41446d6086cfbc237b))
+
+
+
+
+
+# [2.3.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.2.2...@ohif/viewer@2.3.0) (2019-10-29)
+
+
+### Features
+
+* service worker ([#1045](https://github.com/OHIF/Viewers/issues/1045)) ([cf51368](https://github.com/OHIF/Viewers/commit/cf5136899eac08300ec4f15474a6440129ef7a9a))
+
+
+
+
+
+## [2.2.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.2.1...@ohif/viewer@2.2.2) (2019-10-29)
+
+
+### Bug Fixes
+
+* Set SR viewport as active by interaction ([#1118](https://github.com/OHIF/Viewers/issues/1118)) ([5b33417](https://github.com/OHIF/Viewers/commit/5b334175c370afb930b4b6dbd307ddece8f850e3))
+
+
+
+
+
+## [2.2.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.2.0...@ohif/viewer@2.2.1) (2019-10-29)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [2.2.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.4...@ohif/viewer@2.2.0) (2019-10-28)
+
+
+### Features
+
+* responsive study list ([#1068](https://github.com/OHIF/Viewers/issues/1068)) ([2cdef4b](https://github.com/OHIF/Viewers/commit/2cdef4b9844cc2ce61e9ce76b5a942ba7051fe16))
+
+
+
+
+
+## [2.1.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.3...@ohif/viewer@2.1.4) (2019-10-28)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.1.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.2...@ohif/viewer@2.1.3) (2019-10-26)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
 ## [2.1.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.1...@ohif/viewer@2.1.2) (2019-10-26)
 
 

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 => {
@@ -393,6 +393,20 @@ describe('OHIF Cornerstone Toolbar', () => {
     });
   });
 
+  it('checks if the available viewport was set to active when layout is decreased', () => {
+    cy.setLayout(3, 3);
+
+    // activate the ninth viewport
+    cy.get('[data-cy=viewport-container-8]')
+      .click()
+      .should('have.class', 'active');
+
+    cy.setLayout(1, 1);
+
+    // first viewport should be active
+    cy.get('[data-cy=viewport-container-0]').should('have.class', 'active');
+  });
+
   it('checks if Clear tool will delete all measurements added in the viewport', () => {
     //Add measurements in the viewport
     cy.addLengthMeasurement();

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/ViewerRouting.spec.js

@@ -2,11 +2,13 @@ describe('ViewerRouting', () => {
   beforeEach(() => {
     cy.visit('/');
     cy.contains('Study List');
-    cy.get('#studyListData > :nth-child(1) > .patientId').click();
+    cy.get(
+      '[data-cy="study-list-results"]> :nth-child(1) > .patientId'
+    ).click();
   });
 
   // it('thumbnails list has more than 2 items', () => {
-  //   cy.get('.scrollable-study-thumbnails div.ThumbnailEntryContainer')
+  //   cy.get('.scrollable-study-thumbnails div.thumbnail-container')
   //     .its('length')
   //     .should('be.gte', 2);
   // });

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

@@ -22,4 +22,23 @@ describe('OHIF HTML Extension', () => {
       'Imaging Measurement Report'
     );
   });
+
+  it('checks if the HTML viewport has been set to active by interaction', () => {
+    cy.setLayout('3', '3');
+
+    // check if viewport has been set as active by CLICKING
+    cy.get('[data-cy=viewprt-grid] > :nth-child(4)')
+      .click()
+      .then($viewport => {
+        cy.wrap($viewport).should('have.class', 'active');
+      });
+
+    // check if viewport has been set as active by SCROLLING
+    cy.get('[data-cy=viewprt-grid] > :nth-child(7)').then($viewport => {
+      cy.wrap($viewport)
+        .find('[data-cy=dicom-html-viewport]')
+        .scrollTo('bottom');
+      cy.wrap($viewport).should('have.class', 'active');
+    });
+  });
 });

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

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

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

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

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

@@ -22,14 +22,20 @@ describe('OHIF VTK Extension', () => {
           btn.click();
         }
       });
-    //wait VTK toolbar and images to be loaded
-    cy.wait(3000);
+
     cy.initVTKToolsAliases();
   });
 
   it('checks if VTK buttons are displayed on the toolbar', () => {
-    cy.screenshot();
-    cy.percyCanvasSnapshot('VTK Extension');
+    // Wait for start reformatting
+    cy.get('[data-cy="viewprt-grid"]', { timeout: 10000 }).should($grid => {
+      expect($grid).to.contain.text('Reform');
+    });
+
+    // Wait for finish reformatting
+    cy.get('[data-cy="viewprt-grid"]', { timeout: 30000 }).should($grid => {
+      expect($grid).not.to.contain.text('Reform');
+    });
 
     cy.get('@crosshairsBtn')
       .should('be.visible')
@@ -50,5 +56,8 @@ describe('OHIF VTK Extension', () => {
     cy.get('@layoutBtn')
       .should('be.visible')
       .contains('Layout');
+
+    cy.wait(3000);
+    cy.percyCanvasSnapshot('VTK Extension');
   });
 });

platform/viewer/cypress/support/aliases.js

@@ -30,6 +30,8 @@ export function initCommonElementsAliases() {
   cy.get('div.ViewportOverlay > div.bottom-right.overlay-element > div').as(
     'viewportInfoBottomRight'
   );
+  cy.get('.left-mid.orientation-marker').as('viewportInfoMidLeft');
+  cy.get('.top-mid.orientation-marker').as('viewportInfoMidTop');
 }
 
 //Creating aliases for Routes

platform/viewer/cypress/support/commands.js

@@ -40,9 +40,9 @@ import {
  */
 Cypress.Commands.add('openStudy', patientName => {
   cy.openStudyList();
-  cy.get('#patientName').type(patientName);
+  cy.get('#filter-patientNameOrId').type(patientName);
   cy.wait('@getStudies');
-  cy.get('#studyListData .studylistStudy', { timeout: 5000 })
+  cy.get('[data-cy="study-list-results"]', { timeout: 5000 })
     .contains(patientName)
     .first()
     .click({ force: true });
@@ -56,11 +56,12 @@ Cypress.Commands.add('openStudy', patientName => {
 Cypress.Commands.add('openStudyModality', modality => {
   cy.initRouteAliases();
   cy.visit('/');
-  cy.get('#modalities')
+
+  cy.get('#filter-accessionOrModalityOrDescription')
     .type(modality)
     .wait(2000);
 
-  cy.get('#studyListData')
+  cy.get('[data-cy="study-list-results"]')
     .contains(modality)
     .first()
     .click();
@@ -314,28 +315,68 @@ Cypress.Commands.add('isInViewport', element => {
  *
  */
 Cypress.Commands.add('percyCanvasSnapshot', (name, options = {}) => {
-  function convertCanvas(documentClone) {
-    documentClone
-      .querySelectorAll('canvas')
-      .forEach(selector => canvasToImage(selector));
+  cy.document().then(doc => {
+    convertCanvas(doc);
+  });
 
-    return documentClone;
-  }
+  // `domTransformation` does not appear to be working
+  // But modifying our immediate DOM does.
+  cy.percySnapshot(name, { ...options }); //, domTransformation: convertCanvas });
 
-  function canvasToImage(selectorOrEl) {
-    let canvas =
-      typeof selectorOrEl === 'object'
-        ? selectorOrEl
-        : document.querySelector(selectorOrEl);
-    let image = document.createElement('img');
-    let canvasImageBase64 = canvas.toDataURL();
-
-    image.src = canvasImageBase64;
-    image.style = 'max-width: 100%';
-    canvas.setAttribute('data-percy-modified', true);
-    canvas.parentElement.appendChild(image);
-    canvas.style = 'display: none';
-  }
-
-  cy.percySnapshot(name, { ...options, domTransformation: convertCanvas });
+  cy.document().then(doc => {
+    unconvertCanvas(doc);
+  });
 });
+
+Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => {
+  cy.get('.toolbar-button-label')
+    .contains('Layout')
+    .click();
+
+  cy.get('.layoutChooser')
+    .find('tr')
+    .eq(rows - 1)
+    .find('td')
+    .eq(columns - 1)
+    .click();
+
+  cy.wait(1000);
+});
+
+function convertCanvas(documentClone) {
+  documentClone
+    .querySelectorAll('canvas')
+    .forEach(selector => canvasToImage(selector));
+
+  return documentClone;
+}
+
+function unconvertCanvas(documentClone) {
+  // Remove previously generated images
+  documentClone
+    .querySelectorAll('[data-percy-image]')
+    .forEach(selector => selector.remove());
+  // Restore canvas visibility
+  documentClone.querySelectorAll('[data-percy-canvas]').forEach(selector => {
+    selector.removeAttribute('data-percy-canvas');
+    selector.style = '';
+  });
+}
+
+function canvasToImage(selectorOrEl) {
+  let canvas =
+    typeof selectorOrEl === 'object'
+      ? selectorOrEl
+      : document.querySelector(selectorOrEl);
+  let image = document.createElement('img');
+  let canvasImageBase64 = canvas.toDataURL('image/png');
+
+  // Show Image
+  image.src = canvasImageBase64;
+  image.style = 'width: 100%';
+  image.setAttribute('data-percy-image', true);
+  // Hide Canvas
+  canvas.setAttribute('data-percy-canvas', true);
+  canvas.parentElement.appendChild(image);
+  canvas.style = 'display: none';
+}

platform/viewer/cypress/support/index.js

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

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "2.1.2",
+  "version": "2.5.0",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -45,14 +45,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^1.6.0",
+    "@ohif/core": "^1.7.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.21",
+    "@ohif/extension-vtk": "^0.52.32",
     "@ohif/i18n": "^0.51.0",
-    "@ohif/ui": "^0.57.0",
+    "@ohif/ui": "^0.59.1",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",