chore(release): publish [skip ci]

- @ohif/viewer@2.6.1

extensions/vtk/CHANGELOG.md

@@ -3,7 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.52.31](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.30...@ohif/extension-vtk@0.52.31) (2019-11-05)
+# [0.53.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.32...@ohif/extension-vtk@0.53.0) (2019-11-06)
+
+
+### Features
+
+* modal provider ([#1151](https://github.com/OHIF/Viewers/issues/1151)) ([75d88bc](https://github.com/OHIF/Viewers/commit/75d88bc454710d2dcdbc7d68c4d9df041159c840)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1146](https://github.com/OHIF/Viewers/issues/1146) [#1142](https://github.com/OHIF/Viewers/issues/1142) [#1143](https://github.com/OHIF/Viewers/issues/1143) [#1110](https://github.com/OHIF/Viewers/issues/1110) [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1119](https://github.com/OHIF/Viewers/issues/1119)
+
+
+
+
+
+## [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
 
@@ -11,6 +22,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+## [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

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.52.31",
+  "version": "0.53.0",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -52,8 +52,8 @@
     "react-vtkjs-viewport": "^0.3.9"
   },
   "devDependencies": {
-    "@ohif/core": "^1.6.2",
+    "@ohif/core": "^1.7.0",
-    "@ohif/ui": "^0.59.1",
+    "@ohif/ui": "^0.60.0",
     "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dcmjs": "^0.6.1",

platform/core/CHANGELOG.md

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

platform/core/package.json

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

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
+ * @param {Object} server Object with server configuration parameters
- * @return Promise
+ * @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(
+    const promise = retrieveStudyMetadata(server, studyInstanceUid, filters);
-      server,
-      studyInstanceUid,
-      seriesInstanceUids
-    );
 
     // 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/wado/retrieveMetadata.js

@@ -1,609 +1,30 @@
-import { api } from 'dicomweb-client';
+import RetrieveMetadataLoaderSync from './retrieveMetadataLoaderSync';
-import DICOMWeb from '../../../DICOMWeb/';
+import RetrieveMetadataLoaderAsync from './retrieveMetadataLoaderAsync';
-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');
-}
 
 /**
  * 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
+ * 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
+ *
+ * @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) {
+async function RetrieveMetadata(server, studyInstanceUid, filters = {}) {
-  return (server.enableStudyLazyLoad !== false
+  const RetrieveMetadataLoader =
-    ? lazyLoadStudyMetadata
+    server.enableStudyLazyLoad !== false
-    : loadStudyMetadata)(server, studyInstanceUid);
+      ? RetrieveMetadataLoaderAsync
-}
+      : RetrieveMetadataLoaderSync;
 
-/**
+  const retrieveMetadataLoader = new RetrieveMetadataLoader(
- *
- * @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(
     server,
-    firstSeries.sopInstances
+    studyInstanceUid,
+    filters
   );
-  if (seriesLoader.hasNext()) {
+  const studyMetadata = retrieveMetadataLoader.execLoad();
-    attachSeriesLoader(server, study, seriesLoader);
-  }
-  return study;
-}
 
-function attachSeriesLoader(server, study, seriesLoader) {
+  return studyMetadata;
-  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;
 }
 
 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
+ * Series sorting criteria: series considered low priority are moved to the end
- * and instance numbers in ascending order.
+ * 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 => {
+  if (deepSort) {
-    series.instances.sort((a, b) => a.instanceNumber - b.instanceNumber);
+    study.seriesList.forEach(series => {
-  });
+      sortStudyInstances(series.instances, instancesSortingCriteria);
+    });
+  }
+
+  return study;
 }
+
+export { sortStudySeries, sortStudyInstances, sortingCriteria };

platform/i18n/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.
 
+# [0.52.0](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.51.0...@ohif/i18n@0.52.0) (2019-11-06)
+
+
+### Features
+
+* modal provider ([#1151](https://github.com/OHIF/Viewers/issues/1151)) ([75d88bc](https://github.com/OHIF/Viewers/commit/75d88bc454710d2dcdbc7d68c4d9df041159c840)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1146](https://github.com/OHIF/Viewers/issues/1146) [#1142](https://github.com/OHIF/Viewers/issues/1142) [#1143](https://github.com/OHIF/Viewers/issues/1143) [#1110](https://github.com/OHIF/Viewers/issues/1110) [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1119](https://github.com/OHIF/Viewers/issues/1119)
+
+
+
+
+
 # [0.51.0](https://github.com/OHIF/Viewers/compare/@ohif/i18n@0.50.5...@ohif/i18n@0.51.0) (2019-10-15)
 
 

platform/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/i18n",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "description": "Internationalization library for The OHIF Viewer",
   "author": "OHIF",
   "license": "MIT",

platform/i18n/src/locales/en-US/index.js

@@ -1,13 +1,13 @@
-import AboutModal from "./AboutModal.json";
+import AboutModal from './AboutModal.json';
-import Buttons from "./Buttons.json";
+import Buttons from './Buttons.json';
-import CineDialog from "./CineDialog.json";
+import CineDialog from './CineDialog.json';
-import Common from "./Common.json";
+import Common from './Common.json';
-import Header from "./Header.json";
+import Header from './Header.json';
-import MeasurementTable from "./MeasurementTable.json";
+import MeasurementTable from './MeasurementTable.json';
-import StudyList from "./StudyList.json";
+import StudyList from './StudyList.json';
-import UserPreferencesModal from "./UserPreferencesModal.json";
+import UserPreferencesModal from './UserPreferencesModal.json';
 
-export default { 
+export default {
   'en-US': {
     AboutModal,
     Buttons,
@@ -17,5 +17,5 @@ export default {
     MeasurementTable,
     StudyList,
     UserPreferencesModal,
-  }
+  },
-};
+};

platform/i18n/src/locales/pt-BR/index.js

@@ -1,11 +1,11 @@
-import AboutModal from "./AboutModal.json";
+import AboutModal from './AboutModal.json';
-import Buttons from "./Buttons.json";
+import Buttons from './Buttons.json';
-import CineDialog from "./CineDialog.json";
+import CineDialog from './CineDialog.json';
-import Common from "./Common.json";
+import Common from './Common.json';
-import Header from "./Header.json";
+import Header from './Header.json';
-import UserPreferencesModal from "./UserPreferencesModal.json";
+import UserPreferencesModal from './UserPreferencesModal.json';
 
-export default { 
+export default {
   'pt-BR': {
     AboutModal,
     Buttons,
@@ -13,5 +13,5 @@ export default {
     Common,
     Header,
     UserPreferencesModal,
-  }
+  },
-};
+};

platform/ui/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.60.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.59.1...@ohif/ui@0.60.0) (2019-11-06)
+
+
+### Features
+
+* modal provider ([#1151](https://github.com/OHIF/Viewers/issues/1151)) ([75d88bc](https://github.com/OHIF/Viewers/commit/75d88bc454710d2dcdbc7d68c4d9df041159c840)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1146](https://github.com/OHIF/Viewers/issues/1146) [#1142](https://github.com/OHIF/Viewers/issues/1142) [#1143](https://github.com/OHIF/Viewers/issues/1143) [#1110](https://github.com/OHIF/Viewers/issues/1110) [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1119](https://github.com/OHIF/Viewers/issues/1119)
+
+
+
+
+
+
 ## [0.59.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.59.0...@ohif/ui@0.59.1) (2019-11-05)
 
 
@@ -13,7 +25,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-
 # [0.59.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.5...@ohif/ui@0.59.0) (2019-11-04)
 
 

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "0.59.1",
+  "version": "0.60.0",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",

platform/ui/src/components/content/aboutContent/AboutContent.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import detect from 'browser-detect';
+import { useTranslation } from 'react-i18next';
+
+import './AboutContent.styl';
+
+const AboutContent = () => {
+  const { t } = useTranslation('AboutContent');
+
+  const { os, version, name } = detect();
+  const capitalize = s =>
+    s.substr(0, 1).toUpperCase() + s.substr(1).toLowerCase();
+
+  const itemsPreset = () => {
+    return [
+      {
+        name: t('Repository URL'),
+        value: 'https://github.com/OHIF/Viewers/',
+        link: 'https://github.com/OHIF/Viewers/',
+      },
+      {
+        name: t('Latest Master Commits'),
+        value: 'https://github.com/OHIF/Viewers/commits/master',
+        link: 'https://github.com/OHIF/Viewers/commits/master',
+      },
+      {
+        name: 'Version Number',
+        value: process.env.VERSION_NUMBER,
+      },
+      {
+        name: t('Build Number'),
+        value: process.env.BUILD_NUM,
+      },
+      {
+        name: t('Browser'),
+        value: `${capitalize(name)} ${version}`,
+      },
+      {
+        name: t('OS'),
+        value: os,
+      },
+    ];
+  };
+
+  const renderTableRow = ({ name, value, link }) => (
+    <tr key={name} style={{ backgroundColor: 'transparent' }}>
+      <td>{name}</td>
+      <td>
+        {link ? (
+          <a target="_blank" rel="noopener noreferrer" href={link}>
+            {value}
+          </a>
+        ) : (
+          value
+        )}
+      </td>
+    </tr>
+  );
+
+  return (
+    <div data-cy="about-modal">
+      <div className="btn-group">
+        <a
+          className="btn btn-default"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://groups.google.com/forum/#!forum/cornerstone-platform"
+        >
+          {t('Visit the forum')}
+        </a>
+        {` `}
+        <a
+          className="btn btn-default"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://github.com/OHIF/Viewers/issues/new/choose"
+        >
+          {t('Report an issue')}
+        </a>
+        {` `}
+        <a
+          className="btn btn-default"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="http://ohif.org"
+        >
+          {t('More details')}
+        </a>
+      </div>
+      <div>
+        <h3>{t('Version Information')}</h3>
+        <table className="table table-responsive">
+          <thead>
+            <tr>
+              <th>{t('Name')}</th>
+              <th>{t('Value')}</th>
+            </tr>
+          </thead>
+          <tbody>{itemsPreset().map(item => renderTableRow(item))}</tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export { AboutContent };
+export default AboutContent;

platform/ui/src/components/content/aboutContent/AboutContent.styl

@@ -1,7 +1,7 @@
-@import './../../design/styles/common/button.styl'
+@import '../../../design/styles/common/button.styl'
-@import './../../design/styles/common/table.styl'
+@import '../../../design/styles/common/table.styl'
 
-.AboutModal
+.AboutContent
   .btn
     border-color: #ccc;
 

platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.js

@@ -1,10 +1,9 @@
 import React, { useEffect, useState, createRef } from 'react';
-import Modal from 'react-bootstrap-modal';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 
-import './DownloadDialog.styl';
+import './ViewportDownloadForm.styl';
 import { TextInput, Select } from '@ohif/ui';
-import { withTranslation } from '../../utils/LanguageProvider';
 
 const FILE_TYPE_OPTIONS = [
   {
@@ -19,9 +18,7 @@ const FILE_TYPE_OPTIONS = [
 
 const DEFAULT_FILENAME = 'image';
 
-const DownloadDialog = ({
+const ViewportDownloadForm = ({
-  t,
-  isOpen,
   activeViewport,
   onClose,
   updateViewportPreview,
@@ -35,6 +32,8 @@ const DownloadDialog = ({
   maximumSize,
   canvasClass,
 }) => {
+  const [t] = useTranslation('ViewportDownloadForm');
+
   const [filename, setFilename] = useState(DEFAULT_FILENAME);
   const [fileType, setFileType] = useState('jpg');
 
@@ -190,142 +189,127 @@ const DownloadDialog = ({
   };
 
   return (
-    <Modal
+    <>
-      show={isOpen}
+      <div className="title">
-      onHide={onClose}
+        {t(
-      aria-labelledby="ModalHeader"
+          'Please specify the dimensions, filename, and desired type for the output image.'
-      className="DownloadDialog modal fade themed in"
+        )}
-      backdrop={false}
+      </div>
-      large={true}
-      keyboard={true}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title>{t('Download High Quality Image')}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <div className="title">
-          {t(
-            'Please specify the dimensions, filename, and desired type for the output image.'
-          )}
-        </div>
 
-        <div className="file-info-container">
+      <div className="file-info-container">
-          <div className="col">
+        <div className="col">
-            <div className="width">
+          <div className="width">
-              <TextInput
+            <TextInput
-                type="number"
+              type="number"
-                min={minimumSize}
+              min={minimumSize}
-                max={maximumSize}
+              max={maximumSize}
-                value={width}
+              value={width}
-                label={t('Image width (px)')}
+              label={t('Image width (px)')}
-                onChange={onWidthChange}
+              onChange={onWidthChange}
-              />
+            />
-            </div>
-            <div className="height">
-              <TextInput
-                type="number"
-                min={minimumSize}
-                max={maximumSize}
-                value={height}
-                label={t('Image height (px)')}
-                onChange={onHeightChange}
-              />
-            </div>
           </div>
-
+          <div className="height">
-          <div className="col">
+            <TextInput
-            <div className="file-name">
+              type="number"
-              <TextInput
+              min={minimumSize}
-                type="text"
+              max={maximumSize}
-                value={filename}
+              value={height}
-                onChange={event => setFilename(event.target.value)}
+              label={t('Image height (px)')}
-                label={t('File name')}
+              onChange={onHeightChange}
-                id="file-name"
+            />
-              />
-            </div>
-            <div className="file-type">
-              <Select
-                value={fileType}
-                onChange={event => setFileType(event.target.value)}
-                options={FILE_TYPE_OPTIONS}
-                label={t('File type')}
-              />
-            </div>
-          </div>
-
-          <div className="col">
-            <div className="show-annotations">
-              <label htmlFor="show-annotations" className="form-check-label">
-                <input
-                  id="show-annotations"
-                  type="checkbox"
-                  className="form-check-input"
-                  checked={showAnnotations}
-                  onChange={event => setShowAnnotations(event.target.checked)}
-                />
-                {t('Show Annotations')}
-              </label>
-            </div>
           </div>
         </div>
 
-        <div
+        <div className="col">
+          <div className="file-name">
+            <TextInput
+              type="text"
+              value={filename}
+              onChange={event => setFilename(event.target.value)}
+              label={t('File name')}
+              id="file-name"
+            />
+          </div>
+          <div className="file-type">
+            <Select
+              value={fileType}
+              onChange={event => setFileType(event.target.value)}
+              options={FILE_TYPE_OPTIONS}
+              label={t('File type')}
+            />
+          </div>
+        </div>
+
+        <div className="col">
+          <div className="show-annotations">
+            <label htmlFor="show-annotations" className="form-check-label">
+              <input
+                id="show-annotations"
+                type="checkbox"
+                className="form-check-input"
+                checked={showAnnotations}
+                onChange={event => setShowAnnotations(event.target.checked)}
+              />
+              {t('Show Annotations')}
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div
+        style={{
+          height: viewportElementHeight,
+          width: viewportElementWidth,
+          position: 'absolute',
+          left: '9999px',
+        }}
+        ref={ref => setViewportElement(ref)}
+      >
+        <canvas
+          className={canvasClass}
           style={{
-            height: viewportElementHeight,
+            height: downloadCanvas.height,
-            width: viewportElementWidth,
+            width: downloadCanvas.width,
-            position: 'absolute',
+            display: 'block',
-            left: '9999px',
           }}
-          ref={ref => setViewportElement(ref)}
+          width={downloadCanvas.width}
-        >
+          height={downloadCanvas.height}
-          <canvas
+          ref={downloadCanvas.ref}
-            className={canvasClass}
+        ></canvas>
-            style={{
+      </div>
-              height: downloadCanvas.height,
-              width: downloadCanvas.width,
-              display: 'block',
-            }}
-            width={downloadCanvas.width}
-            height={downloadCanvas.height}
-            ref={downloadCanvas.ref}
-          ></canvas>
-        </div>
 
-        <div className="preview">
+      <div className="preview">
-          <h4> {t('Image Preview')}</h4>
+        <h4> {t('Image Preview')}</h4>
-          <img
+        <img
-            className="viewport-preview"
+          className="viewport-preview"
-            src={viewportPreview.src}
+          src={viewportPreview.src}
-            alt="Viewport Preview"
+          alt="Viewport Preview"
-            style={{
+          style={{
-              height: viewportPreview.height,
+            height: viewportPreview.height,
-              width: viewportPreview.width,
+            width: viewportPreview.width,
-            }}
+          }}
-          />
+        />
-        </div>
+      </div>
 
-        <div className="actions">
+      <div className="actions">
-          <div className="action-cancel">
+        <div className="action-cancel">
-            <button type="button" className="btn btn-danger" onClick={onClose}>
+          <button type="button" className="btn btn-danger" onClick={onClose}>
-              {t('Cancel')}
+            {t('Cancel')}
-            </button>
+          </button>
-          </div>
-          <div className="action-save">
-            <button onClick={downloadImage} className="btn btn-primary">
-              {t('Download')}
-            </button>
-          </div>
         </div>
-      </Modal.Body>
+        <div className="action-save">
-    </Modal>
+          <button onClick={downloadImage} className="btn btn-primary">
+            {t('Download')}
+          </button>
+        </div>
+      </div>
+    </>
   );
 };
 
-DownloadDialog.propTypes = {
+ViewportDownloadForm.propTypes = {
-  t: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  activeViewport: PropTypes.object,
   onClose: PropTypes.func.isRequired,
+  activeViewport: PropTypes.object,
   updateViewportPreview: PropTypes.func.isRequired,
   enableViewport: PropTypes.func.isRequired,
   disableViewport: PropTypes.func.isRequired,
@@ -338,4 +322,4 @@ DownloadDialog.propTypes = {
   canvasClass: PropTypes.string.isRequired,
 };
 
-export default withTranslation('DownloadDialog')(DownloadDialog);
+export default ViewportDownloadForm;

platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.styl

@@ -1,8 +1,8 @@
-@import './../../design/styles/common/global.styl'
+@import '../../../design/styles/common/global.styl'
-@import './../../design/styles/common/form.styl'
+@import '../../../design/styles/common/form.styl'
-@import './../../design/styles/common/button.styl'
+@import '../../../design/styles/common/button.styl'
 
-.DownloadDialog
+.ViewportDownloadForm
   color: var(--text-secondary-color);
   filter: drop-shadow(0 0 3px var(--ui-gray-darkest));
   border: none;

platform/ui/src/components/content/viewportDownloadForm/__docs__/viewportDownloadForm.mdx

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

platform/ui/src/components/content/viewportDownloadForm/index.js

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

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

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

platform/ui/src/components/index.js

@@ -4,14 +4,14 @@ import { MeasurementTable, MeasurementTableItem } from './measurementTable';
 import { Overlay, OverlayTrigger } from './overlayTrigger';
 import { TableList, TableListItem } from './tableList';
 import {
-  AboutModal,
+  AboutContent,
   UserPreferences,
   UserPreferencesModal,
 } from './userPreferencesModal';
 
 import { Checkbox } from './checkbox';
 import { CineDialog } from './cineDialog';
-import { DownloadDialog } from './downloadDialog';
+import { ViewportDownloadForm } from './content/viewportDownloadForm';
 import { QuickSwitch } from './quickSwitch';
 import { RoundedButtonGroup } from './roundedButtonGroup';
 import { SelectTree } from './selectTree';
@@ -29,7 +29,7 @@ import { Tooltip } from './tooltip';
 export {
   Checkbox,
   CineDialog,
-  DownloadDialog,
+  ViewportDownloadForm,
   LayoutButton,
   LayoutChooser,
   MeasurementTable,
@@ -50,7 +50,7 @@ export {
   TablePagination,
   ToolbarSection,
   Tooltip,
-  AboutModal,
+  AboutContent,
   UserPreferences,
   UserPreferencesModal,
   OHIFModal,

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

@@ -1,143 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Modal from 'react-bootstrap-modal';
-import detect from 'browser-detect';
-import './AboutModal.styl';
-import { withTranslation } from '../../utils/LanguageProvider';
-
-import 'react-bootstrap-modal/lib/css/rbm-patch.css';
-
-// TODO: Is this the only component importing these?
-import './../../design/styles/common/modal.styl';
-
-class AboutModal extends Component {
-  constructor(props) {
-    super(props);
-  }
-  // TODO: Make this component more generic to allow things other than W/L and hotkeys...
-  static propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    onCancel: PropTypes.func,
-  };
-
-  itemsPreset() {
-    const { t } = this.props;
-    const browser = detect();
-    const capitalize = s =>
-      s.substr(0, 1).toUpperCase() + s.substr(1).toLowerCase();
-
-    return [
-      {
-        name: t('Repository URL'),
-        value: 'https://github.com/OHIF/Viewers/',
-        link: 'https://github.com/OHIF/Viewers/',
-      },
-      {
-        name: t('Latest Master Commits'),
-        value: 'https://github.com/OHIF/Viewers/commits/master',
-        link: 'https://github.com/OHIF/Viewers/commits/master',
-      },
-      {
-        name: 'Version Number',
-        value: process.env.VERSION_NUMBER,
-      },
-      {
-        name: t('Build Number'),
-        value: process.env.BUILD_NUM,
-      },
-      {
-        name: t('Browser'),
-        value: `${capitalize(browser.name)} ${browser.version}`,
-      },
-      {
-        name: t('OS'),
-        value: browser.os,
-      },
-    ];
-  }
-
-  static defaultProps = {
-    isOpen: false,
-  };
-
-  renderTableRow(item) {
-    return (
-      <tr key={item.name} style={{ backgroundColor: 'transparent' }}>
-        <td>{item.name}</td>
-        <td>
-          {item.link ? (
-            <a target="_blank" href={item.link}>
-              {item.value}
-            </a>
-          ) : (
-            item.value
-          )}
-        </td>
-      </tr>
-    );
-  }
-
-  render() {
-    const { t } = this.props;
-    return (
-      <Modal
-        show={this.props.isOpen}
-        onHide={this.props.onCancel}
-        aria-labelledby="ModalHeader"
-        className="AboutModal modal fade themed in"
-        backdrop={false}
-        large={true}
-        keyboard={false}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>{t('OHIF Viewer - About')}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body data-cy="about-modal">
-          <div className="btn-group">
-            <a
-              className="btn btn-default"
-              target="_blank"
-              href="https://groups.google.com/forum/#!forum/cornerstone-platform"
-            >
-              {t('Visit the forum')}
-            </a>
-            {` `}
-            <a
-              className="btn btn-default"
-              target="_blank"
-              href="https://github.com/OHIF/Viewers/issues/new/choose"
-            >
-              {t('Report an issue')}
-            </a>
-            {` `}
-            <a
-              className="btn btn-default"
-              target="_blank"
-              href="http://ohif.org"
-            >
-              {t('More details')}
-            </a>
-          </div>
-          <div>
-            <h3>{t('Version Information')}</h3>
-            <table className="table table-responsive">
-              <thead>
-                <tr>
-                  <th>{t('Name')}</th>
-                  <th>{t('Value')}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {this.itemsPreset().map(item => this.renderTableRow(item))}
-              </tbody>
-            </table>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-const connectedComponent = withTranslation('AboutModal')(AboutModal);
-export { connectedComponent as AboutModal };
-export default connectedComponent;

platform/ui/src/components/userPreferencesModal/__docs__/about.mdx

@@ -6,7 +6,7 @@ route: /components/about-modal
 
 import { Playground, Props } from 'docz'
 import { State } from 'react-powerplug'
-import { AboutModal } from './../index.js'
+import { AboutContent } from './../index.js'
 
 # About  Modal
 
@@ -26,7 +26,7 @@ import { AboutModal } from './../index.js'
                 >
                     Open about modal
                 </button>
-                <AboutModal
+                <AboutContent
                     {...state}
                     onCancel={() => setState({ isOpen: false })}
                 />
@@ -39,4 +39,4 @@ import { AboutModal } from './../index.js'
 
 ## API
 
-<Props of={AboutModal} />
+<Props of={AboutContent} />

platform/ui/src/components/userPreferencesModal/__docs__/hotkeyDefaults.js

@@ -60,11 +60,6 @@ export default {
     keys: [''],
     column: 1,
   },
-  toggleDownloadDialog: {
-    label: 'Show/Hide Download Dialog',
-    keys: [''],
-    column: 1,
-  },
 
   // Preset hotkeys
   WLPreset0: { label: 'W/L Preset 0  (Soft Tissue)', keys: ['1'], column: 1 },

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

@@ -1,4 +1,4 @@
 export { UserPreferences } from './UserPreferences.js';
-export { AboutModal } from './AboutModal.js';
+export { AboutContent } from '../content/aboutContent/AboutContent.js';
 export { UserPreferencesModal } from './UserPreferencesModal.js';
 export { GeneralPreferences } from './GeneralPreferences.js';

platform/ui/src/index.js

@@ -1,7 +1,7 @@
 import {
   Checkbox,
   CineDialog,
-  DownloadDialog,
+  ViewportDownloadForm,
   LayoutButton,
   LayoutChooser,
   MeasurementTable,
@@ -22,7 +22,7 @@ import {
   TablePagination,
   ToolbarSection,
   Tooltip,
-  AboutModal,
+  AboutContent,
   UserPreferences,
   UserPreferencesModal,
   OHIFModal,
@@ -69,7 +69,7 @@ export {
   TextArea,
   TextInput,
   CineDialog,
-  DownloadDialog,
+  ViewportDownloadForm,
   ExpandableToolMenu,
   Icon,
   LayoutButton,
@@ -99,7 +99,7 @@ export {
   ToolbarButton,
   ToolbarSection,
   Tooltip,
-  AboutModal,
+  AboutContent,
   UserPreferences,
   UserPreferencesModal,
   ViewerbaseDragDropContext,

platform/viewer/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.6.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.6.0...@ohif/viewer@2.6.1) (2019-11-06)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [2.6.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.5.0...@ohif/viewer@2.6.0) (2019-11-06)
+
+
+### Features
+
+* modal provider ([#1151](https://github.com/OHIF/Viewers/issues/1151)) ([75d88bc](https://github.com/OHIF/Viewers/commit/75d88bc454710d2dcdbc7d68c4d9df041159c840)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1146](https://github.com/OHIF/Viewers/issues/1146) [#1142](https://github.com/OHIF/Viewers/issues/1142) [#1143](https://github.com/OHIF/Viewers/issues/1143) [#1110](https://github.com/OHIF/Viewers/issues/1110) [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116) [#1119](https://github.com/OHIF/Viewers/issues/1119)
+
+
+
+
+
+
+# [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)
 
 

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

@@ -0,0 +1,199 @@
+describe('OHIF Study List', function() {
+  context('Desktop resolution', function() {
+    beforeEach(function() {
+      cy.viewport(1750, 720);
+      cy.openStudyList();
+      cy.initStudyListAliasesOnDesktop();
+    });
+
+    it('searches Patient Name with exact string', function() {
+      cy.get('@patientName').type('Juno');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(2);
+        expect($list).to.contain('Juno');
+      });
+    });
+
+    it('searches MRN with exact string', function() {
+      cy.get('@MRN').type('ProstateX-0000');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(2);
+        expect($list).to.contain('ProstateX-0000');
+      });
+    });
+
+    it('searches Accession with exact string', function() {
+      cy.get('@accessionNumber').type('fpcben98890');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(1);
+        expect($list).to.contain('fpcben98890');
+      });
+    });
+
+    it('searches Modality with camel case', function() {
+      cy.get('@modalities').type('Mr');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(17);
+        expect($list).to.contain('MR');
+      });
+    });
+
+    it('searches Description with exact string', function() {
+      cy.get('@studyDescription').type('CHEST');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(2);
+        expect($list).to.contain('CHEST');
+      });
+    });
+
+    it('changes rows per page and checks the study count', function() {
+      //Show rows per page options
+      const pageRows = [25, 50, 100];
+
+      //Check all options of rows
+      pageRows.forEach(numRows => {
+        cy.get('select').select(numRows.toString()); //Select rows per page option
+        //Wait result list to be displayed
+        cy.waitStudyList().then(() => {
+          //Compare the search result with the Study Count on the table header
+          cy.get('@studyCount')
+            .should($studyCount => {
+              expect(parseInt($studyCount.text())).to.be.at.most(numRows); //less than or equals to
+            })
+            .then($studyCount => {
+              //Compare to the number of rows in the search result
+              cy.get('@searchResult').then($searchResult => {
+                let countResults = $searchResult.length;
+                expect($studyCount.text()).to.be.eq(countResults.toString());
+              });
+            });
+        });
+      });
+    });
+
+    //TO-TO: This test should be uncommented once issue #1120 is fixed:
+    //https://github.com/OHIF/Viewers/issues/1120
+    // it('filter study list by Study Date', function() {
+    //   //Type Start and End dates
+    //   cy.get('@studyListStartDate').type('01/01/2000');
+    //   cy.get('@studyListEndDate').type('01/01/2019');
+    //   //Display all results into one page
+    //   cy.get('select').select('100');
+    //   //Checks if all expected results are displayed
+    //   //Wait result list to be displayed
+    //   cy.waitStudyList();
+    //   cy.get('@searchResult').should($list => {
+    //     expect($list.length).to.be.eq(42);
+    //   });
+    // });
+  });
+
+  context('Tablet resolution', function() {
+    beforeEach(function() {
+      cy.viewport(1000, 660);
+      cy.openStudyList();
+      cy.initStudyListAliasesOnTablet();
+    });
+
+    it('searches Patient Name with exact string', function() {
+      cy.get('@patientNameOrMRN').type('Juno');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(2);
+        expect($list).to.contain('Juno');
+      });
+    });
+
+    it('searches MRN with with exact string', function() {
+      cy.get('@patientNameOrMRN').type('ProstateX-0000');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(2);
+        expect($list).to.contain('ProstateX-0000');
+      });
+    });
+
+    it('searches Modality with exact string', function() {
+      cy.get('@accessionModalityDescription').type('MR');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(17);
+        expect($list).to.contain('MR');
+      });
+    });
+
+    it('searches Accession with exact string', function() {
+      cy.get('@accessionModalityDescription').type('fpcben98890');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(1);
+        expect($list).to.contain('fpcben98890');
+      });
+    });
+
+    it('searches Description with exact string', function() {
+      cy.get('@accessionModalityDescription').type('CHEST');
+      //Wait result list to be displayed
+      cy.waitStudyList();
+      cy.get('@searchResult').should($list => {
+        expect($list.length).to.be.eq(2);
+        expect($list).to.contain('CHEST');
+      });
+    });
+
+    it('changes rows per page and checks the study count', function() {
+      //Show rows per page options
+      const pageRows = [25, 50, 100];
+
+      //Check all options of rows
+      pageRows.forEach(numRows => {
+        cy.get('select').select(numRows.toString()); //Select rows per page option
+        //Wait result list to be displayed
+        cy.waitStudyList().then(() => {
+          //Compare the search result with the Study Count on the table header
+          cy.get('@studyCount')
+            .should($studyCount => {
+              expect(parseInt($studyCount.text())).to.be.at.most(numRows); //less than or equals to
+            })
+            .then($studyCount => {
+              //Compare to the number of rows in the search result
+              cy.get('@searchResult').then($searchResult => {
+                let countResults = $searchResult.length;
+                expect($studyCount.text()).to.be.eq(countResults.toString());
+              });
+            });
+        });
+      });
+    });
+
+    //TO-TO: This test should be uncommented once issue #1120 is fixed:
+    //https://github.com/OHIF/Viewers/issues/1120
+    // it('filter study list by Study Date', function() {
+    //   //Type Start and End dates
+    //   cy.get('@studyListStartDate').type('01/01/2000');
+    //   cy.get('@studyListEndDate').type('01/01/2019');
+    //   //Display all results into one page
+    //   cy.get('select').select('100');
+    //   //Checks if all expected results are displayed
+    //   //Wait result list to be displayed
+    //   cy.waitStudyList();
+    //   cy.get('@searchResult').should($list => {
+    //     expect($list.length).to.be.eq(42);
+    //   });
+    // });
+  });
+});

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

@@ -72,30 +72,26 @@ describe('OHIF Study Viewer Page', function() {
     cy.get('@measurementsPanel').should('not.be.enabled');
   });
 
-  //TO-DO: Test case will fail due to issue #1013: https://github.com/OHIF/Viewers/issues/1013
+  it('checks if Description can be added to measurement item under Measurements panel', () => {
+    cy.addLengthMeasurement(); //Adding measurement in the viewport
+    cy.get('@measurementsBtn').click();
+    cy.get('.measurementItem').click();
 
-  // it('checks if Description can be added to measurement item under Measurements panel', () => {
+    // Click "Description"
-  //   cy.addLengthMeasurement(); //Adding measurement in the viewport
+    cy.get('.btnAction')
-  //   cy.get('@measurementsBtn').click();
+      .contains('Description')
-  //   cy.get('.measurementItem').click();
+      .click();
-  //
+
-  //   // Click "Description"
+    // Enter description text
-  //   cy.get('.btnAction')
+    const descriptionText = 'Adding text for description test';
-  //     .contains('Description')
+    cy.get('#description').type(descriptionText);
-  //     .click();
+
-  //
+    // Confirm
-  //   // Enter description text
+    cy.get('.btn-confirm').click();
-  //   const descriptionText = 'Adding text for description test';
+
-  //   cy.get('#description')
+    //Verify if descriptionText was added
-  //     .type(descriptionText);
+    cy.get('.measurementLocation').should('contain.text', descriptionText);
-  //
+  });
-  //   // Confirm
-  //   cy.get('.btn-confirm').click();
-  //
-  //   //Verify if descriptionText was added
-  //   cy.get('.measurementLocation')
-  //     .should('contain.text', descriptionText);
-  // });
 
   it('checks if measurement item can be deleted through the context menu on the viewport', function() {
     cy.addLengthMeasurement([100, 100], [200, 100]); //Adding measurement in the viewport
@@ -228,14 +224,12 @@ describe('OHIF Study Viewer Page', function() {
     cy.get('@viewportInfoBottomLeft').should('contains.text', expectedText);
   });
 
-  //TO-DO: this test is blocked due to issue #1072: https://github.com/OHIF/Viewers/issues/1072
+  it('performs single-click to load thumbnail in active viewport', () => {
-  // Uncomment this once #1072 is fixed.
+    cy.get('[data-cy="thumbnail-list"]:nth-child(3)').click();
-  // it('performs single-click to load thumbnail in active viewport', () => {
-  //   cy.get('[data-cy="thumbnail-list"]:nth-child(3)').click();
 
-  //   const expectedText = 'Ser 3';
+    const expectedText = 'Ser: 3';
-  //   cy.get('@viewportInfoBottomLeft').should('contains.text', expectedText);
+    cy.get('@viewportInfoBottomLeft').should('contains.text', expectedText);
-  // });
+  });
 
   it('performs right click to zoom', function() {
     //Right click on viewport
@@ -244,7 +238,7 @@ describe('OHIF Study Viewer Page', function() {
       .trigger('mousemove', 'center', { which: 3 })
       .trigger('mouseup');
 
-    const expectedText = 'Zoom: 442%';
+    const expectedText = 'Zoom: 301%';
     cy.get('@viewportInfoBottomRight').should('contains.text', expectedText);
   });
 

platform/viewer/cypress/support/aliases.js

@@ -52,3 +52,28 @@ export function initVTKToolsAliases() {
   cy.get('.ohif-check-label').as('modeCheckbox');
   cy.get('.btn-group > .toolbar-button').as('layoutBtn');
 }
+
+//Creating aliases for Study List page elements on Desktop experience
+export function initStudyListAliasesOnDesktop() {
+  cy.get('.study-count').as('studyCount');
+  cy.get('#filter-patientName').as('patientName');
+  cy.get('#filter-patientId').as('MRN');
+  cy.get('#filter-accessionNumber').as('accessionNumber');
+  cy.get('#start-date').as('studyListStartDate');
+  cy.get('#end-date').as('studyListEndDate');
+  cy.get('#filter-modalities').as('modalities');
+  cy.get('#filter-studyDescription').as('studyDescription');
+  cy.get('[data-cy="study-list-results"] > tr').as('searchResult');
+}
+
+//Creating aliases for Study List page elements on Tablet experience
+export function initStudyListAliasesOnTablet() {
+  cy.get('.study-count').as('studyCount');
+  cy.get('#filter-patientNameOrId').as('patientNameOrMRN');
+  cy.get('#filter-accessionOrModalityOrDescription').as(
+    'accessionModalityDescription'
+  );
+  cy.get('#start-date').as('studyListStartDate');
+  cy.get('#end-date').as('studyListEndDate');
+  cy.get('[data-cy="study-list-results"] > tr').as('searchResult');
+}

platform/viewer/cypress/support/commands.js

@@ -5,6 +5,8 @@ import {
   initCommonElementsAliases,
   initRouteAliases,
   initVTKToolsAliases,
+  initStudyListAliasesOnDesktop,
+  initStudyListAliasesOnTablet,
 } from './aliases.js';
 
 // ***********************************************
@@ -76,12 +78,18 @@ Cypress.Commands.add('isPageLoaded', (url = '/viewer/') => {
   return cy.location('pathname', { timeout: 60000 }).should('include', url);
 });
 
-Cypress.Commands.add('openStudyList', patientName => {
+Cypress.Commands.add('openStudyList', () => {
   cy.initRouteAliases();
   cy.visit('/');
   cy.wait('@getStudies');
 });
 
+Cypress.Commands.add('waitStudyList', () => {
+  cy.get('@searchResult').should($list => {
+    expect($list).to.not.have.class('no-hover');
+  });
+});
+
 /**
  * Command to perform a drag and drop action. Before using this command, we must get the element that should be dragged first.
  * Example of usage: cy.get(element-to-be-dragged).drag(dropzone-element)
@@ -240,6 +248,16 @@ Cypress.Commands.add('initVTKToolsAliases', () => {
   initVTKToolsAliases();
 });
 
+//Initialize aliases for Study List page elements
+Cypress.Commands.add('initStudyListAliasesOnDesktop', () => {
+  initStudyListAliasesOnDesktop();
+});
+
+//Initialize aliases for Study List page elements
+Cypress.Commands.add('initStudyListAliasesOnTablet', () => {
+  initStudyListAliasesOnTablet();
+});
+
 //Add measurements in the viewport
 Cypress.Commands.add(
   'addLengthMeasurement',

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "2.4.1",
+  "version": "2.6.1",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -45,14 +45,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^1.6.2",
+    "@ohif/core": "^1.7.0",
     "@ohif/extension-cornerstone": "^2.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.31",
+    "@ohif/extension-vtk": "^0.53.0",
-    "@ohif/i18n": "^0.51.0",
+    "@ohif/i18n": "^0.52.0",
-    "@ohif/ui": "^0.59.1",
+    "@ohif/ui": "^0.60.0",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",

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

@@ -1,15 +1,15 @@
-import './Header.css';
-
-import { Link, withRouter } from 'react-router-dom';
 import React, { Component } from 'react';
+import { Link, withRouter } from 'react-router-dom';
+import { withTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
 
 import { Dropdown } from '@ohif/ui';
-import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
+import { AboutContent } from '@ohif/ui';
-import PropTypes from 'prop-types';
+import { withModal } from '@ohif/ui';
-import { AboutModal } from '@ohif/ui';
-import { hotkeysManager } from './../../App.js';
-import { withTranslation } from 'react-i18next';
 
+import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
+import { hotkeysManager } from './../../App.js';
+import './Header.css';
 // Context
 import AppContext from './../../context/AppContext';
 
@@ -21,6 +21,8 @@ class Header extends Component {
     children: PropTypes.node,
     t: PropTypes.func.isRequired,
     userManager: PropTypes.object,
+    user: PropTypes.object,
+    modalContext: PropTypes.object,
   };
 
   static defaultProps = {
@@ -50,26 +52,29 @@ class Header extends Component {
   }
 
   loadOptions() {
-    const { t } = this.props;
+    const {
+      t,
+      user,
+      userManager,
+      modalContext: { show },
+    } = this.props;
     this.options = [
       {
         title: t('About'),
         icon: { name: 'info' },
-        onClick: () => {
+        onClick: () =>
-          this.setState({
+          show(AboutContent, {
-            isOpen: true,
+            title: t('OHIF Viewer - About'),
-          });
+            customClassName: 'AboutContent',
-        },
+          }),
       },
     ];
 
-    if (this.props.user && this.props.userManager) {
+    if (user && userManager) {
       this.options.push({
         title: t('Logout'),
         icon: { name: 'power-off' },
-        onClick: () => {
+        onClick: () => userManager.signoutRedirect(),
-          this.props.userManager.signoutRedirect();
-        },
       });
     }
 
@@ -85,32 +90,32 @@ class Header extends Component {
 
   // ANTD -- Hamburger, Drawer, Menu
   render() {
-    const { t } = this.props;
+    const { t, home, location, children } = this.props;
     const { appConfig = {} } = this.context;
     const showStudyList =
       appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
     return (
       <>
         <div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
-        <div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
+        <div className={`entry-header ${home ? 'header-big' : ''}`}>
           <div className="header-left-box">
-            {this.props.location && this.props.location.studyLink && (
+            {location && location.studyLink && (
               <Link
-                to={this.props.location.studyLink}
+                to={location.studyLink}
                 className="header-btn header-viewerLink"
               >
                 {t('Back to Viewer')}
               </Link>
             )}
 
-            {this.props.children}
+            {children}
 
-            {showStudyList && !this.props.home && (
+            {showStudyList && !home && (
               <Link
                 className="header-btn header-studyListLinkSection"
                 to={{
                   pathname: '/',
-                  state: { studyLink: this.props.location.pathname },
+                  state: { studyLink: location.pathname },
                 }}
               >
                 {t('Study list')}
@@ -123,16 +128,6 @@ class Header extends Component {
               {t('INVESTIGATIONAL USE ONLY')}
             </span>
             <Dropdown title={t('Options')} list={this.options} align="right" />
-
-            {/* TODO: We need a Modal service */}
-            <AboutModal
-              {...this.state}
-              onCancel={() =>
-                this.setState({
-                  isOpen: false,
-                })
-              }
-            />
           </div>
         </div>
       </>
@@ -140,4 +135,6 @@ class Header extends Component {
   }
 }
 
-export default withTranslation('Header')(withRouter(Header));
+export default withTranslation(['Header', 'AboutModal'])(
+  withRouter(withModal(Header))
+);

platform/viewer/src/connectedComponents/ConnectedViewportDownloadForm.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { DownloadDialog } from '@ohif/ui';
+import { ViewportDownloadForm } from '@ohif/ui';
 import { utils } from '@ohif/core';
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
@@ -14,11 +14,11 @@ const mapStateToProps = (state, ownProps) => {
     viewportSpecificData[activeViewportIndex] || {};
 
   return {
+    onClose: ownProps.hide,
     minimumSize: MINIMUM_SIZE,
     maximumSize: MAX_TEXTURE_SIZE,
     defaultSize: DEFAULT_SIZE,
     canvasClass: 'cornerstone-canvas',
-    onClose: ownProps.toggleDownloadDialog,
     activeViewport: activeEnabledElement,
     enableViewport: viewportElement => {
       if (viewportElement) {
@@ -122,9 +122,9 @@ const mapStateToProps = (state, ownProps) => {
   };
 };
 
-const ConnectedDownloadDialog = connect(
+const ConnectedViewportDownloadForm = connect(
   mapStateToProps,
   null
-)(DownloadDialog);
+)(ViewportDownloadForm);
 
-export default ConnectedDownloadDialog;
+export default ConnectedViewportDownloadForm;

platform/viewer/src/connectedComponents/ToolbarRow.js

@@ -6,17 +6,17 @@ import {
   ExpandableToolMenu,
   RoundedButtonGroup,
   ToolbarButton,
+  withModal,
 } from '@ohif/ui';
 
 import './ToolbarRow.css';
 import { commandsManager, extensionManager } from './../App.js';
 
 import ConnectedCineDialog from './ConnectedCineDialog';
-import ConnectedDownloadDialog from './ConnectedDownloadDialog';
+import ConnectedViewportDownloadForm from './ConnectedViewportDownloadForm';
 import ConnectedLayoutButton from './ConnectedLayoutButton';
 import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
 
-
 class ToolbarRow extends Component {
   // TODO: Simplify these? isOpen can be computed if we say "any" value for selected,
   // closed if selected is null/undefined
@@ -46,13 +46,10 @@ class ToolbarRow extends Component {
       toolbarButtons: toolbarButtonDefinitions,
       activeButtons: [],
       isCineDialogOpen: false,
-      isDownloadScreenShotDialogOpen: false,
     };
 
     this._handleBuiltIn = _handleBuiltIn.bind(this);
 
-    this.toggleDownloadDialog = toggleDownloadDialog.bind(this);
-
     const panelModules = extensionManager.modules[MODULE_TYPES.PANEL];
     this.buttonGroups = {
       left: [
@@ -116,13 +113,6 @@ class ToolbarRow extends Component {
       zIndex: 999,
     };
 
-    const downloadScreenShotContainerStyle = {
-      display: this.state.isDownloadScreenShotDialogOpen ? 'block' : 'none',
-      position: 'absolute',
-      top: '82px',
-      zIndex: 1001,
-    };
-
     const onPress = (side, value) => {
       this.props.handleSidePanelChange(side, value);
     };
@@ -158,12 +148,6 @@ class ToolbarRow extends Component {
         <div className="CineDialogContainer" style={cineDialogContainerStyle}>
           <ConnectedCineDialog />
         </div>
-        <div className="DownloadScreenShotContainer" style={downloadScreenShotContainerStyle}>
-          <ConnectedDownloadDialog
-            isOpen={this.state.isDownloadScreenShotDialogOpen}
-            toggleDownloadDialog={this.toggleDownloadDialog}
-          />
-        </div>
       </>
     );
   }
@@ -295,15 +279,6 @@ function _getVisibleToolbarButtons() {
   return toolbarButtonDefinitions;
 }
 
-/**
- * Toggles the Download Dialog Modal
- */
-function toggleDownloadDialog() {
-  this.setState({
-    isDownloadScreenShotDialogOpen: !this.state.isDownloadScreenShotDialogOpen,
-  });
-}
-
 function _handleBuiltIn({ behavior } = {}) {
   if (behavior === 'CINE') {
     this.setState({
@@ -312,8 +287,13 @@ function _handleBuiltIn({ behavior } = {}) {
   }
 
   if (behavior === 'DOWNLOAD_SCREEN_SHOT') {
-    this.toggleDownloadDialog();
+    this.props.modalContext.show(ConnectedViewportDownloadForm, {
+      title: this.props.t('Download High Quality Image'),
+      customClassName: 'ViewportDownloadForm',
+    });
   }
 }
 
-export default withTranslation('Common')(ToolbarRow);
+export default withTranslation(['Common', 'ViewportDownloadForm'])(
+  withModal(ToolbarRow)
+);

platform/viewer/src/connectedComponents/ViewerRetrieveStudyData.js

@@ -4,6 +4,7 @@ import { metadata, studies, utils, log } from '@ohif/core';
 import ConnectedViewer from './ConnectedViewer.js';
 import PropTypes from 'prop-types';
 import { extensionManager } from './../App.js';
+import { withSnackbar } from '@ohif/ui';
 
 const { OHIFStudyMetadata, OHIFSeriesMetadata } = metadata;
 const { retrieveStudiesMetadata, deleteStudyMetadataPromise } = studies;
@@ -29,11 +30,21 @@ class ViewerRetrieveStudyData extends Component {
   async loadStudies() {
     try {
       const { server, studyInstanceUids, seriesInstanceUids } = this.props;
+      const filters = {};
+
+      // Use the first, discard others
+      const seriesInstanceUID = seriesInstanceUids && seriesInstanceUids[0];
+
+      if (seriesInstanceUID) {
+        filters.seriesInstanceUID = seriesInstanceUID;
+      }
+
       const studies = await retrieveStudiesMetadata(
         server,
         studyInstanceUids,
-        seriesInstanceUids
+        filters
       );
+      this.validateFilters(studies, filters);
       this.setStudies(studies);
     } catch (e) {
       this.setState({ error: true });
@@ -41,6 +52,32 @@ class ViewerRetrieveStudyData extends Component {
     }
   }
 
+  /**
+   * Validate filters and promp user a message in case filter is unsuccessfully applied.
+   * In case of success, studies array contains, as the first element, the queried content (from filter)
+   * @param {Array} studies array of studies to be evaluated
+   * @param {Object} filters filters to test against
+   */
+  validateFilters(studies = [], filters = {}) {
+    const { seriesInstanceUID } = filters;
+
+    const { snackbarContext } = this.props;
+    // skip in case no filter or no toast manager
+    if (!seriesInstanceUID || !snackbarContext) {
+      return;
+    }
+
+    const firstStudy = studies[0] || {};
+    const { seriesList = [] } = firstStudy;
+    const firstSeries = seriesList[0];
+
+    if (!firstSeries || firstSeries.seriesInstanceUid !== seriesInstanceUID) {
+      snackbarContext.show({
+        message: 'No series for given filter: ' + seriesInstanceUID,
+      });
+    }
+  }
+
   setStudies(givenStudies) {
     if (Array.isArray(givenStudies) && givenStudies.length > 0) {
       const sopClassHandlerModules =
@@ -151,4 +188,4 @@ class ViewerRetrieveStudyData extends Component {
   }
 }
 
-export default ViewerRetrieveStudyData;
+export default withSnackbar(ViewerRetrieveStudyData);

platform/viewer/src/routes/ViewerRouting.js

@@ -7,15 +7,15 @@ const { urlUtil: UrlUtil } = OHIF.utils;
 
 /**
  * Get array of seriesUIDs from param or from queryString
- * @param {*} seriesInstanceUIDs
+ * @param {*} seriesInstanceUids
  * @param {*} location
  */
-const getSeriesInstanceUIDs = (seriesInstanceUIDs, routeLocation) => {
+const getSeriesInstanceUIDs = (seriesInstanceUids, routeLocation) => {
   const queryFilters = UrlUtil.queryString.getQueryFilters(routeLocation);
-  const querySeriesUIDs = queryFilters && queryFilters['SeriesInstanceUID'];
+  const querySeriesUIDs = queryFilters && queryFilters['seriesInstanceUID'];
-  const _seriesInstanceUIDs = seriesInstanceUIDs || querySeriesUIDs;
+  const _seriesInstanceUids = seriesInstanceUids || querySeriesUIDs;
 
-  return UrlUtil.paramString.parseParam(_seriesInstanceUIDs);
+  return UrlUtil.paramString.parseParam(_seriesInstanceUids);
 };
 
 function ViewerRouting({ match: routeMatch, location: routeLocation }) {
@@ -29,14 +29,14 @@ function ViewerRouting({ match: routeMatch, location: routeLocation }) {
   } = routeMatch.params;
   const server = useServer({ project, location, dataset, dicomStore });
 
-  const studyUIDs = UrlUtil.paramString.parseParam(studyInstanceUids);
+  const studyUids = UrlUtil.paramString.parseParam(studyInstanceUids);
-  const seriesUIDs = getSeriesInstanceUIDs(seriesInstanceUids, routeLocation);
+  const seriesUids = getSeriesInstanceUIDs(seriesInstanceUids, routeLocation);
 
-  if (server && studyUIDs) {
+  if (server && studyUids) {
     return (
       <ConnectedViewerRetrieveStudyData
-        studyInstanceUids={studyUIDs}
+        studyInstanceUids={studyUids}
-        seriesInstanceUids={seriesUIDs}
+        seriesInstanceUids={seriesUids}
       />
     );
   }