chore(release): publish [skip ci]

- @ohif/extension-cornerstone@1.4.0
 - @ohif/extension-vtk@0.52.21
 - @ohif/core@1.6.0
 - @ohif/ui@0.57.0
 - @ohif/viewer@2.1.0

.vscode/settings.json

@@ -1,10 +1,11 @@
 {
-  "editor.rulers": [80, 120],
-
+  "editor.rulers": [
+    80,
+    120
+  ],
   // ===
   // Spacing
   // ===
-
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
   "editor.trimAutoWhitespace": true,
@@ -12,17 +13,21 @@
   "files.eol": "\n",
   "files.insertFinalNewline": true,
   "files.trimFinalNewlines": true,
-
   // ===
   // Event Triggers
   // ===
-
   "editor.formatOnSave": true,
   "eslint.autoFixOnSave": true,
   "eslint.run": "onSave",
   "eslint.validate": [
-    { "language": "javascript", "autoFix": true },
-    { "language": "javascriptreact", "autoFix": true }
+    {
+      "language": "javascript",
+      "autoFix": true
+    },
+    {
+      "language": "javascriptreact",
+      "autoFix": true
+    }
   ],
   "prettier.disableLanguages": [],
   "prettier.endOfLine": "lf",

extensions/cornerstone/CHANGELOG.md

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

extensions/cornerstone/package.json

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

extensions/cornerstone/src/toolbarModule.js

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

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.52.21](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.20...@ohif/extension-vtk@0.52.21) (2019-10-26)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.20](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.19...@ohif/extension-vtk@0.52.20) (2019-10-26)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.19](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.18...@ohif/extension-vtk@0.52.19) (2019-10-25)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [0.52.18](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.17...@ohif/extension-vtk@0.52.18) (2019-10-25)
 
 

extensions/vtk/package.json

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

platform/core/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.6.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.5.2...@ohif/core@1.6.0) (2019-10-26)
+
+
+### Features
+
+* Snapshot Download Tool ([#840](https://github.com/OHIF/Viewers/issues/840)) ([450e098](https://github.com/OHIF/Viewers/commit/450e0981a5ba054fcfcb85eeaeb18371af9088f8))
+
+
+
+
+
+## [1.5.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.5.1...@ohif/core@1.5.2) (2019-10-25)
+
+
+### Bug Fixes
+
+* set SR in ActiveViewport by clicking thumb ([#1091](https://github.com/OHIF/Viewers/issues/1091)) ([986b7ae](https://github.com/OHIF/Viewers/commit/986b7ae2bf4f7d27f326e62f93285ce20eaf0a79))
+
+
+
+
+
 ## [1.5.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.5.0...@ohif/core@1.5.1) (2019-10-25)
 
 

platform/core/package.json

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

platform/core/src/redux/reducers/viewports.js

@@ -34,7 +34,6 @@ const defaultState = {
  * @param {Object} [action.viewportSpecificData]
  */
 const viewports = (state = defaultState, action) => {
-  let currentData;
   let viewportSpecificData;
   let useActiveViewport = false;
   switch (action.type) {
@@ -85,14 +84,24 @@ const viewports = (state = defaultState, action) => {
     // Allow fall-through
     // eslint-disable-next-line
     case SET_SPECIFIC_DATA: {
+      const layout = cloneDeep(state.layout);
+      const hasPlugin = action.data && action.data.plugin;
       const viewportIndex = useActiveViewport
         ? state.activeViewportIndex
         : action.viewportIndex;
-      currentData = cloneDeep(state.viewportSpecificData[viewportIndex]) || {};
-      viewportSpecificData = cloneDeep(state.viewportSpecificData);
-      viewportSpecificData[viewportIndex] = merge({}, currentData, action.data);
+      const { dom } = state.viewportSpecificData[viewportIndex];
 
-      return Object.assign({}, state, { viewportSpecificData });
+      viewportSpecificData = cloneDeep(state.viewportSpecificData);
+      viewportSpecificData[viewportIndex] = {
+        dom,
+        ...action.data,
+      };
+
+      if (hasPlugin) {
+        layout.viewports[viewportIndex].plugin = action.data.plugin;
+      }
+
+      return Object.assign({}, state, { layout, viewportSpecificData });
     }
     case CLEAR_VIEWPORT:
       viewportSpecificData = cloneDeep(state.viewportSpecificData);

platform/core/src/utils/b64toBlob.js

@@ -0,0 +1,22 @@
+/* Enabled JPEG images downloading on IE11. */
+const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
+  const byteCharacters = atob(b64Data);
+  const byteArrays = [];
+
+  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+    const slice = byteCharacters.slice(offset, offset + sliceSize);
+
+    const byteNumbers = new Array(slice.length);
+    for (let i = 0; i < slice.length; i++) {
+      byteNumbers[i] = slice.charCodeAt(i);
+    }
+
+    const byteArray = new Uint8Array(byteNumbers);
+    byteArrays.push(byteArray);
+  }
+
+  const blob = new Blob(byteArrays, { type: contentType });
+  return blob;
+};
+
+export default b64toBlob;

platform/core/src/utils/index.js

@@ -9,6 +9,7 @@ import studyMetadataManager from './studyMetadataManager';
 import updateMetaDataManager from './updateMetaDataManager.js';
 import writeScript from './writeScript.js';
 import DicomLoaderService from './dicomLoaderService.js';
+import b64toBlob from './b64toBlob.js';
 import * as urlUtil from './urlUtil';
 
 const utils = {
@@ -18,6 +19,7 @@ const utils = {
   addServers,
   sortBy,
   writeScript,
+  b64toBlob,
   StackManager,
   studyMetadataManager,
   // Updates WADO-RS metaDataManager
@@ -34,6 +36,7 @@ export {
   addServers,
   sortBy,
   writeScript,
+  b64toBlob,
   StackManager,
   studyMetadataManager,
   // Updates WADO-RS metaDataManager

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

@@ -9,13 +9,14 @@ describe('Top level exports', () => {
       'addServers',
       'sortBy',
       'writeScript',
+      'b64toBlob',
       'StackManager',
       'studyMetadataManager',
       // Updates WADO-RS metaDataManager
       'updateMetaDataManager',
       'DICOMTagDescriptions',
       'DicomLoaderService',
-      'urlUtil'
+      'urlUtil',
     ].sort();
 
     const exports = Object.keys(utils.default).sort();

platform/ui/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.57.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.56.1...@ohif/ui@0.57.0) (2019-10-26)
+
+
+### Features
+
+* Snapshot Download Tool ([#840](https://github.com/OHIF/Viewers/issues/840)) ([450e098](https://github.com/OHIF/Viewers/commit/450e0981a5ba054fcfcb85eeaeb18371af9088f8))
+
+
+
+
+
+## [0.56.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.56.0...@ohif/ui@0.56.1) (2019-10-26)
+
+**Note:** Version bump only for package @ohif/ui
+
+
+
+
+
 # [0.56.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.55.0...@ohif/ui@0.56.0) (2019-10-22)
 
 

platform/ui/package.json

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

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

@@ -0,0 +1,335 @@
+import React, { useEffect, useState, createRef } from 'react';
+import Modal from 'react-bootstrap-modal';
+import PropTypes from 'prop-types';
+
+import './DownloadDialog.styl';
+import { TextInput, Select } from '@ohif/ui';
+import { withTranslation } from '../../utils/LanguageProvider';
+
+const FILE_TYPE_OPTIONS = [
+  {
+    key: 'jpg',
+    value: 'jpg',
+  },
+  {
+    key: 'png',
+    value: 'png',
+  },
+];
+
+const DEFAULT_FILENAME = 'image';
+
+const DownloadDialog = ({
+  t,
+  isOpen,
+  activeViewport,
+  onClose,
+  updateViewportPreview,
+  enableViewport,
+  disableViewport,
+  toggleAnnotations,
+  loadImage,
+  downloadBlob,
+  defaultSize,
+  minimumSize,
+  canvasClass,
+}) => {
+  const [filename, setFilename] = useState(DEFAULT_FILENAME);
+  const [fileType, setFileType] = useState('jpg');
+
+  const [height, setHeight] = useState(defaultSize);
+  const [width, setWidth] = useState(defaultSize);
+
+  const [showAnnotations, setShowAnnotations] = useState(true);
+
+  const [keepAspect, setKeepAspect] = useState(true);
+  const [lastImage, setLastImage] = useState();
+
+  const [viewportElement, setViewportElement] = useState();
+  const [viewportElementHeight, setViewportElementHeight] = useState(
+    minimumSize
+  );
+  const [viewportElementWidth, setViewportElementWidth] = useState(minimumSize);
+
+  const [downloadCanvas, setDownloadCanvas] = useState({
+    ref: createRef(),
+    width: minimumSize,
+    height: minimumSize,
+  });
+
+  const [viewportPreview, setViewportPreview] = useState({
+    src: null,
+    width: minimumSize,
+    height: minimumSize,
+  });
+
+  useEffect(() => {
+    enableViewport(viewportElement);
+
+    return () => {
+      disableViewport(viewportElement);
+
+      setHeight(defaultSize);
+      setWidth(defaultSize);
+    };
+  }, [defaultSize, disableViewport, enableViewport, viewportElement]);
+
+  useEffect(() => {
+    const loadAndUpdateViewports = async () => {
+      const {
+        image,
+        width: scaledWidth,
+        height: scaledHeight,
+      } = await loadImage(activeViewport, viewportElement, width, height);
+
+      setLastImage(image);
+
+      toggleAnnotations(showAnnotations, viewportElement);
+
+      setViewportElementHeight(scaledHeight);
+      setViewportElementWidth(scaledWidth);
+
+      setDownloadCanvas(state => ({
+        ...state,
+        height: scaledHeight,
+        width: scaledWidth,
+      }));
+
+      const {
+        dataUrl,
+        width: viewportElementWidth,
+        height: viewportElementHeight,
+      } = await updateViewportPreview(
+        viewportElement,
+        downloadCanvas.ref.current,
+        fileType
+      );
+
+      setViewportPreview(state => ({
+        ...state,
+        src: dataUrl,
+        width: viewportElementWidth,
+        height: viewportElementHeight,
+      }));
+    };
+
+    loadAndUpdateViewports();
+  }, [
+    activeViewport,
+    viewportElement,
+    showAnnotations,
+    height,
+    width,
+    loadImage,
+    toggleAnnotations,
+    updateViewportPreview,
+    fileType,
+    downloadCanvas.ref,
+  ]);
+
+  const onHeightChange = () => {
+    const newHeight = event.target.value;
+    setHeight(newHeight);
+
+    setViewportElementHeight(newHeight);
+
+    setDownloadCanvas(state => ({
+      ...state,
+      height: newHeight,
+    }));
+
+    if (keepAspect) {
+      const multiplier = newHeight / lastImage.height;
+      const newWidth = Math.round(lastImage.width * multiplier);
+
+      setWidth(newWidth);
+      setViewportElementWidth(newWidth);
+
+      setDownloadCanvas(state => ({
+        ...state,
+        width: newWidth,
+      }));
+    }
+  };
+
+  const onWidthChange = event => {
+    const newWidth = event.target.value;
+    setWidth(newWidth);
+
+    setViewportElementWidth(newWidth);
+
+    setDownloadCanvas(state => ({
+      ...state,
+      width: newWidth,
+    }));
+
+    if (keepAspect) {
+      const multiplier = newWidth / lastImage.width;
+      const newHeight = Math.round(lastImage.height * multiplier);
+
+      setHeight(newHeight);
+      setViewportElementHeight(newHeight);
+
+      setDownloadCanvas(state => ({
+        ...state,
+        height: newHeight,
+      }));
+    }
+  };
+
+  const downloadImage = () => {
+    downloadBlob(
+      filename || DEFAULT_FILENAME,
+      fileType,
+      viewportElement,
+      downloadCanvas.ref.current
+    );
+  };
+
+  return (
+    <Modal
+      show={isOpen}
+      onHide={onClose}
+      aria-labelledby="ModalHeader"
+      className="DownloadDialog modal fade themed in"
+      backdrop={false}
+      large={true}
+      keyboard={true}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>{t('Download High Quality Image')}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <div className="title">
+          {t(
+            'Please specify the dimensions, filename, and desired type for the output image.'
+          )}
+        </div>
+
+        <div className="file-info-container">
+          <div className="col">
+            <div className="width">
+              <TextInput
+                type="number"
+                min={minimumSize}
+                value={width}
+                label={t('Image width (px)')}
+                onChange={onWidthChange}
+              />
+            </div>
+            <div className="height">
+              <TextInput
+                type="number"
+                min={minimumSize}
+                value={height}
+                label={t('Image height (px)')}
+                onChange={onHeightChange}
+              />
+            </div>
+          </div>
+
+          <div className="col">
+            <div className="file-name">
+              <TextInput
+                type="text"
+                value={filename}
+                onChange={event => setFilename(event.target.value)}
+                label={t('File name')}
+                id="file-name"
+              />
+            </div>
+            <div className="file-type">
+              <Select
+                value={fileType}
+                onChange={event => setFileType(event.target.value)}
+                options={FILE_TYPE_OPTIONS}
+                label={t('File type')}
+              />
+            </div>
+          </div>
+
+          <div className="col">
+            <div className="show-annotations">
+              <label htmlFor="show-annotations" className="form-check-label">
+                <input
+                  id="show-annotations"
+                  type="checkbox"
+                  className="form-check-input"
+                  checked={showAnnotations}
+                  onChange={event => setShowAnnotations(event.target.checked)}
+                />
+                {t('Show Annotations')}
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <div
+          style={{
+            height: viewportElementHeight,
+            width: viewportElementWidth,
+            position: 'absolute',
+            left: '9999px',
+          }}
+          ref={ref => setViewportElement(ref)}
+        >
+          <canvas
+            className={canvasClass}
+            style={{
+              height: downloadCanvas.height,
+              width: downloadCanvas.width,
+              display: 'block',
+            }}
+            width={downloadCanvas.width}
+            height={downloadCanvas.height}
+            ref={downloadCanvas.ref}
+          ></canvas>
+        </div>
+
+        <div className="preview">
+          <h4> {t('Image Preview')}</h4>
+          <img
+            className="viewport-preview"
+            src={viewportPreview.src}
+            alt="Viewport Preview"
+            style={{
+              height: viewportPreview.height,
+              width: viewportPreview.width,
+            }}
+          />
+        </div>
+
+        <div className="actions">
+          <div className="action-cancel">
+            <button type="button" className="btn btn-danger" onClick={onClose}>
+              {t('Cancel')}
+            </button>
+          </div>
+          <div className="action-save">
+            <button onClick={downloadImage} className="btn btn-primary">
+              {t('Download')}
+            </button>
+          </div>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+DownloadDialog.propTypes = {
+  t: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  activeViewport: PropTypes.object,
+  onClose: PropTypes.func.isRequired,
+  updateViewportPreview: PropTypes.func.isRequired,
+  enableViewport: PropTypes.func.isRequired,
+  disableViewport: PropTypes.func.isRequired,
+  toggleAnnotations: PropTypes.func.isRequired,
+  loadImage: PropTypes.func.isRequired,
+  downloadBlob: PropTypes.func.isRequired,
+  defaultSize: PropTypes.number.isRequired,
+  minimumSize: PropTypes.number.isRequired,
+  canvasClass: PropTypes.string.isRequired,
+};
+
+export default withTranslation('DownloadDialog')(DownloadDialog);

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

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

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

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

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

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

platform/ui/src/components/index.js

@@ -11,6 +11,7 @@ import {
 
 import { Checkbox } from './checkbox';
 import { CineDialog } from './cineDialog';
+import { DownloadDialog } from './downloadDialog';
 import { QuickSwitch } from './quickSwitch';
 import { RoundedButtonGroup } from './roundedButtonGroup';
 import { SelectTree } from './selectTree';
@@ -22,6 +23,7 @@ import { Tooltip } from './tooltip';
 export {
   Checkbox,
   CineDialog,
+  DownloadDialog,
   LayoutButton,
   LayoutChooser,
   MeasurementTable,

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

@@ -92,7 +92,7 @@ class AboutModal extends Component {
         <Modal.Header closeButton>
           <Modal.Title>{t('OHIF Viewer - About')}</Modal.Title>
         </Modal.Header>
-        <Modal.Body>
+        <Modal.Body data-cy="about-modal">
           <div className="btn-group">
             <a
               className="btn btn-default"

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

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

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

@@ -1,42 +1,34 @@
-.select-ohif {
-  display: block;
-  font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
-    sans-serif;
-  font-size: 0.8em;
-  font-weight: 600;
-  color: #444;
-  line-height: 1.3;
-  padding: 0.6em 1.4em 0.5em 0.8em;
-  width: 100%;
-  max-width: 100%;
+.select-ohif-container .select-ohif {
+  display: inline-block;
+  font-size: 10pt;
   box-sizing: border-box;
-  margin: 0;
-  border: 1px solid #aaa;
-  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
-  border-radius: 0.5em;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: #fff;
-  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
-    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
-  background-repeat: no-repeat, repeat;
-  background-position: right 0.7em top 50%, 0 0;
-  background-size: 0.65em auto, 100%;
+  width: auto;
+  transition: all 0.15s ease;
+  background-color: var(--input-background-color);
+  line-height: 16px;
+  color: var(--input-placeholder-color);
+  height: 40px;
+  margin: 0 5px 20px 5px;
+  padding: 0 20px;
+  placeholder-color: var(--input-placeholder-color);
+  cursor: pointer;
+  border: none;
+  font-weight: normal;
+  border-radius: 4px;
 }
 
-.select-ohif::-ms-expand {
+.select-ohif-container .select-ohif::-ms-expand {
   display: none;
 }
 
-.select-ohif:hover {
-  border-color: #888;
+.select-ohif-container .select-ohif-label {
+  padding: 5px;
 }
 
 .select-ohif:focus {
   outline: none;
 }
 
-.select-ohif option {
+.select-ohif-container .select-ohif option {
   font-weight: normal;
 }

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

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

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

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

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

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

platform/ui/src/elements/index.js

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

platform/ui/src/index.js

@@ -1,6 +1,7 @@
 import {
   Checkbox,
   CineDialog,
+  DownloadDialog,
   LayoutButton,
   LayoutChooser,
   MeasurementTable,
@@ -22,10 +23,20 @@ import {
   UserPreferences,
   UserPreferencesModal,
 } from './components';
-import { ICONS, Icon } from './elements';
+
+// Elements
+import {
+  ICONS,
+  Icon,
+  DropdownMenu as Dropdown,
+  Select,
+  Label,
+  Range,
+  TextArea,
+  TextInput,
+} from './elements';
 
 // Alias this for now as not all dependents are using strict versioning
-import { DropdownMenu as Dropdown, Range, Select } from './elements/form';
 import ExpandableToolMenu from './viewer/ExpandableToolMenu.js';
 import PlayClipButton from './viewer/PlayClipButton.js';
 import { ScrollableArea } from './ScrollableArea/ScrollableArea.js';
@@ -38,11 +49,16 @@ import SnackbarProvider, {
 } from './utils/SnackbarProvider';
 
 export {
+  // Elements
   ICONS,
   //
   Checkbox,
-  CineDialog,
   Dropdown,
+  Label,
+  TextArea,
+  TextInput,
+  CineDialog,
+  DownloadDialog,
   ExpandableToolMenu,
   Icon,
   LayoutButton,

platform/viewer/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.1.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.0.0...@ohif/viewer@2.1.0) (2019-10-26)
+
+
+### Features
+
+* Snapshot Download Tool ([#840](https://github.com/OHIF/Viewers/issues/840)) ([450e098](https://github.com/OHIF/Viewers/commit/450e0981a5ba054fcfcb85eeaeb18371af9088f8))
+
+
+
+
+
+# [2.0.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.12.2...@ohif/viewer@2.0.0) (2019-10-26)
+
+
+### Bug Fixes
+
+* 🐛 Desc of meas.table not being updated on properly ([#1094](https://github.com/OHIF/Viewers/issues/1094)) ([85f836c](https://github.com/OHIF/Viewers/commit/85f836cd918614be722fce1bff2373460ec4900b)), closes [#1013](https://github.com/OHIF/Viewers/issues/1013)
+
+
+### BREAKING CHANGES
+
+* 1013
+
+
+
+
+
+## [1.12.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.12.1...@ohif/viewer@1.12.2) (2019-10-25)
+
+
+### Bug Fixes
+
+* set SR in ActiveViewport by clicking thumb ([#1091](https://github.com/OHIF/Viewers/issues/1091)) ([986b7ae](https://github.com/OHIF/Viewers/commit/986b7ae2bf4f7d27f326e62f93285ce20eaf0a79))
+
+
+
+
+
 ## [1.12.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.12.0...@ohif/viewer@1.12.1) (2019-10-25)
 
 

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

@@ -1,16 +1,16 @@
-describe('OHIF Study Viewer Page', () => {
-  before(() => {
+describe('OHIF Study Viewer Page', function() {
+  before(function() {
     cy.openStudy('MISTER^MR');
     cy.waitDicomImage();
     cy.expectMinimumThumbnails(6);
   });
 
-  beforeEach(() => {
+  beforeEach(function() {
     cy.initCommonElementsAliases();
     cy.resetViewport();
   });
 
-  it('checks if series thumbnails are being displayed', () => {
+  it('checks if series thumbnails are being displayed', function() {
     cy.screenshot();
     cy.percyCanvasSnapshot('Series Thumbnails');
 
@@ -19,7 +19,7 @@ describe('OHIF Study Viewer Page', () => {
       .should('be.gt', 1);
   });
 
-  it('drags and drop a series thumbnail into viewport', () => {
+  it('drags and drop a series thumbnail into viewport', function() {
     cy.get('[data-cy="thumbnail-list"]:nth-child(2)') //element to be dragged
       .drag('.cornerstone-canvas'); //dropzone element
 
@@ -28,7 +28,7 @@ describe('OHIF Study Viewer Page', () => {
     cy.get('@viewportInfoBottomLeft').should('contain.text', expectedText);
   });
 
-  it('checks if Series left panel can be hidden/displayed', () => {
+  it('checks if Series left panel can be hidden/displayed', function() {
     cy.get('@seriesBtn').click();
     cy.get('@seriesPanel').should('not.be.enabled');
 
@@ -36,7 +36,7 @@ describe('OHIF Study Viewer Page', () => {
     cy.get('@seriesPanel').should('be.visible');
   });
 
-  it('checks if Measurements right panel can be hidden/displayed', () => {
+  it('checks if Measurements right panel can be hidden/displayed', function() {
     cy.get('@measurementsBtn').click();
     cy.get('@measurementsPanel').should('be.visible');
 
@@ -44,7 +44,7 @@ describe('OHIF Study Viewer Page', () => {
     cy.get('@measurementsPanel').should('not.be.enabled');
   });
 
-  it('checks if measurement item can be Relabeled under Measurements panel', () => {
+  it('checks if measurement item can be Relabeled under Measurements panel', function() {
     cy.addLengthMeasurement(); //Adding measurement in the viewport
     cy.get('@measurementsBtn').click();
     cy.get('.measurementItem').click();
@@ -97,7 +97,7 @@ describe('OHIF Study Viewer Page', () => {
   //     .should('contain.text', descriptionText);
   // });
 
-  it('checks if measurement item can be deleted through the context menu on the viewport', () => {
+  it('checks if measurement item can be deleted through the context menu on the viewport', function() {
     cy.addLengthMeasurement([100, 100], [200, 100]); //Adding measurement in the viewport
 
     //Right click on measurement annotation
@@ -131,7 +131,7 @@ describe('OHIF Study Viewer Page', () => {
     cy.get('@measurementsPanel').should('not.be.enabled');
   });
 
-  it('adds relabel and description to measurement item through the context menu on the viewport', () => {
+  it('adds relabel and description to measurement item through the context menu on the viewport', function() {
     cy.addLengthMeasurement([100, 100], [200, 100]); //Adding measurement in the viewport
 
     // Relabel
@@ -206,4 +206,95 @@ describe('OHIF Study Viewer Page', () => {
     cy.get('@measurementsBtn').click();
     cy.get('@measurementsPanel').should('not.be.enabled');
   });
+
+  it('scrolls series stack using scrollbar', function() {
+    // Workaround implemented based on Cypress issue:
+    // https://github.com/cypress-io/cypress/issues/1570#issuecomment-450966053
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype,
+      'value'
+    ).set;
+
+    cy.get('input.imageSlider[type=range]').then($range => {
+      // get the DOM node
+      const range = $range[0];
+      // set the value manually
+      nativeInputValueSetter.call(range, 13);
+      // now dispatch the event
+      range.dispatchEvent(new Event('change', { value: 13, bubbles: true }));
+    });
+
+    const expectedText = 'Img: 13 13/13';
+    cy.get('@viewportInfoBottomLeft').should('contains.text', expectedText);
+  });
+
+  //TO-DO: this test is blocked due to issue #1072: https://github.com/OHIF/Viewers/issues/1072
+  // Uncomment this once #1072 is fixed.
+  // it('performs single-click to load thumbnail in active viewport', () => {
+  //   cy.get('[data-cy="thumbnail-list"]:nth-child(3)').click();
+
+  //   const expectedText = 'Ser 3';
+  //   cy.get('@viewportInfoBottomLeft').should('contains.text', expectedText);
+  // });
+
+  it('performs right click to zoom', function() {
+    //Right click on viewport
+    cy.get('@viewport')
+      .trigger('mousedown', 'top', { which: 3 })
+      .trigger('mousemove', 'center', { which: 3 })
+      .trigger('mouseup');
+
+    const expectedText = 'Zoom: 442%';
+    cy.get('@viewportInfoBottomRight').should('contains.text', expectedText);
+  });
+
+  it('performs middle click to pan', function() {
+    //Get image position from cornerstone and check if y axis was modified
+    let cornerstone;
+    let currentPan;
+
+    // TO DO: Replace the cornerstone pan check by Percy snapshop comparison
+    cy.window()
+      .its('cornerstone')
+      .then(c => {
+        cornerstone = c;
+        currentPan = () =>
+          cornerstone.getEnabledElements()[0].viewport.translation;
+      });
+
+    //pan image with middle click
+    cy.get('@viewport')
+      .trigger('mousedown', 'center', { which: 2 })
+      .trigger('mousemove', 'bottom', { which: 2 })
+      .trigger('mouseup', 'bottom')
+      .then(() => {
+        expect(currentPan().y > 0).to.eq(true);
+      });
+  });
+
+  it('opens About modal and verify the displayed information', function() {
+    cy.get('[data-cy="options-menu"]').click();
+    cy.get('[data-cy="about-item-menu"]').click();
+    cy.get('.modal-content')
+      .as('aboutOverlay')
+      .should('be.visible');
+
+    //check buttons and links
+    cy.get('[data-cy="about-modal"]')
+      .should('contains.text', 'Visit the forum')
+      .and('contains.text', 'Report an issue')
+      .and('contains.text', 'https://github.com/OHIF/Viewers/');
+
+    //check version number
+    cy.get('[data-cy="about-modal"]').then($modal => {
+      cy.get('[data-cy="header-version-info"]').should($headerVersionNumber => {
+        $headerVersionNumber = $headerVersionNumber.text().substring(1);
+        expect($modal).to.contain($headerVersionNumber);
+      });
+    });
+
+    //close modal
+    cy.get('.close').click();
+    cy.get('@aboutOverlay').should('not.be.enabled');
+  });
 });

platform/viewer/cypress/support/commands.js

@@ -180,7 +180,7 @@ Cypress.Commands.add('waitDicomImage', (timeout = 20000) => {
 //Command to reset and clear all the changes made to the viewport
 Cypress.Commands.add('resetViewport', () => {
   cy.initCornerstoneToolsAliases();
-  cy.get('@resetBtn').click();
+
   //Click on More button
   cy.get('@moreBtn').click();
   //Verify if overlay is displayed
@@ -193,6 +193,8 @@ Cypress.Commands.add('resetViewport', () => {
   cy.get('.tooltip-inner > :nth-child(10)')
     .as('clearBtn')
     .click();
+  //Click on Reset button
+  cy.get('@resetBtn').click();
 });
 
 Cypress.Commands.add('imageZoomIn', () => {

platform/viewer/package.json

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

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

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

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

@@ -105,6 +105,7 @@ class Header extends Component {
             className={`${
               this.props.home ? 'header-versionInfoHome' : 'header-versionInfo'
             }`}
+            data-cy="header-version-info"
           >
             v{process.env.VERSION_NUMBER}
           </span>

platform/viewer/src/connectedComponents/ConnectedDownloadDialog.js

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

platform/viewer/src/connectedComponents/ConnectedStudyBrowser.js

@@ -35,14 +35,14 @@ const mapStateToProps = (state, ownProps) => {
   };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch, ownProps) => {
   return {
     onThumbnailClick: displaySetInstanceUid => {
-      dispatch(
-        setActiveViewportSpecificData({
-          displaySetInstanceUid,
-        })
+      const displaySet = ownProps.studyMetadata[0].displaySets.find(
+        ds => ds.displaySetInstanceUid === displaySetInstanceUid
       );
+
+      dispatch(setActiveViewportSpecificData(displaySet));
     },
   };
 };

platform/viewer/src/connectedComponents/ToolbarRow.js

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

platform/viewer/src/connectedComponents/Viewer.js

@@ -295,7 +295,10 @@ class Viewer extends Component {
                 activeIndex={this.props.activeViewportIndex}
               />
             ) : (
-              <ConnectedStudyBrowser studies={this.state.thumbnails} />
+              <ConnectedStudyBrowser
+                studies={this.state.thumbnails}
+                studyMetadata={this.props.studies}
+              />
             )}
           </SidePanel>
 

platform/viewer/src/theme-tide.css

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