chore(release): publish [skip ci]

- @ohif/extension-vtk@0.52.22
 - @ohif/ui@0.57.1
 - @ohif/viewer@2.1.4

extensions/vtk/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.22](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.21...@ohif/extension-vtk@0.52.22) (2019-10-28)
+
+
+### Bug Fixes
+
+* MIP styling ([#1109](https://github.com/OHIF/Viewers/issues/1109)) ([0d21cc6](https://github.com/OHIF/Viewers/commit/0d21cc6ad0c47706b9e62e05fe2a0f1d86339760))
+
+
+
+
+
 ## [0.52.21](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.20...@ohif/extension-vtk@0.52.21) (2019-10-26)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.52.21",
+  "version": "0.52.22",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -53,7 +53,7 @@
   },
   "devDependencies": {
     "@ohif/core": "^1.6.0",
-    "@ohif/ui": "^0.57.0",
+    "@ohif/ui": "^0.57.1",
     "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dcmjs": "^0.6.1",

extensions/vtk/src/toolbarComponents/SlabThicknessToolbarComponent.js

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

platform/ui/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.57.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.57.0...@ohif/ui@0.57.1) (2019-10-28)
+
+
+### Bug Fixes
+
+* MIP styling ([#1109](https://github.com/OHIF/Viewers/issues/1109)) ([0d21cc6](https://github.com/OHIF/Viewers/commit/0d21cc6ad0c47706b9e62e05fe2a0f1d86339760))
+
+
+
+
+
 # [0.57.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.56.1...@ohif/ui@0.57.0) (2019-10-26)
 
 

platform/ui/package.json

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

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

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

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

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

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

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

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

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

platform/ui/src/index.js

@@ -30,6 +30,7 @@ import {
   Icon,
   DropdownMenu as Dropdown,
   Select,
+  OldSelect,
   Label,
   Range,
   TextArea,
@@ -73,6 +74,7 @@ export {
   RoundedButtonGroup,
   ScrollableArea,
   Select,
+  OldSelect,
   SelectTree,
   SimpleDialog,
   StudyBrowser,

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

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

platform/viewer/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.3...@ohif/viewer@2.1.4) (2019-10-28)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.1.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.2...@ohif/viewer@2.1.3) (2019-10-26)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.1.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.1...@ohif/viewer@2.1.2) (2019-10-26)
+
+
+### Bug Fixes
+
+* update script-tag output to include config from default.js ([c522ff3](https://github.com/OHIF/Viewers/commit/c522ff3ddab7ed8e3a128dd6edd2cd6902226e99))
+
+
+
+
+
+## [2.1.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.1.0...@ohif/viewer@2.1.1) (2019-10-26)
+
+
+### Bug Fixes
+
+* 🐛 JSON launch not working properly ([#1089](https://github.com/OHIF/Viewers/issues/1089)) ([#1093](https://github.com/OHIF/Viewers/issues/1093)) ([2677170](https://github.com/OHIF/Viewers/commit/2677170d67659ee178cf77307414d54cfe9cb563))
+
+
+
+
+
 # [2.1.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.0.0...@ohif/viewer@2.1.0) (2019-10-26)
 
 

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

@@ -0,0 +1,153 @@
+describe('OHIF Cornerstone Hotkeys', () => {
+  before(() => {
+    cy.openStudy('MISTER^MR');
+    cy.waitDicomImage();
+    cy.expectMinimumThumbnails(3);
+  });
+
+  beforeEach(() => {
+    cy.initCornerstoneToolsAliases();
+    cy.initCommonElementsAliases();
+    cy.resetViewport();
+  });
+
+  it('checks if hotkeys "R" and "L" can rotate the image', () => {
+    // Hotkey R
+    cy.get('body').type('R');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'P');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'R');
+    // Hotkey L
+    cy.get('body').type('L');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'R');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+  });
+
+  it('checks if hotkeys "ArrowUp" and "ArrowDown" can navigate in the stack', () => {
+    // Hotkey ArrowDown
+    cy.get('body').type('{downarrow}');
+    cy.get('@viewportInfoBottomLeft').should('contains.text', 'Img: 2 2/26');
+    // Hotkey ArrowUp
+    cy.get('body').type('{uparrow}');
+    cy.get('@viewportInfoBottomLeft').should('contains.text', 'Img: 1 1/26');
+  });
+
+  it('checks if hotkeys "V" and "H" can flip the image', () => {
+    // Hotkey V
+    cy.get('body').type('V');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'L');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+    // Hotkey H
+    cy.get('body').type('H');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'L');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'P');
+  });
+
+  it('checks if hotkey "I" can invert the image', () => {
+    // Hotkey I
+    cy.get('body').type('I');
+    // Visual comparison
+    cy.screenshot();
+    cy.percyCanvasSnapshot('Hotkey I - invert image');
+  });
+
+  it('checks if hotkeys "+", "-" and "=" can zoom in, out and fit to viewport', () => {
+    // Hotkey +
+    cy.get('body').type('+++'); // Press hotkey 3 times
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 256%');
+    // Hotkey -
+    cy.get('body').type('-');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 241%');
+    // Hotkey =
+    cy.get('body').type('=');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 211%');
+  });
+
+  it('checks if hotkey "SPACEBAR" can reset the image', () => {
+    // Press multiples hotkeys
+    cy.get('body').type('V+++I');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'L');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 256%');
+
+    // Hotkey SPACEBAR
+    cy.get('body').type(' ');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'R');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 211%');
+
+    // Visual comparison to make sure the 'inverted' image was reset
+    cy.screenshot();
+    cy.percyCanvasSnapshot('Hotkey SPACEBAR - Reset Image');
+  });
+
+  it('uses hotkeys "RightArrow" and "LeftArrow" to navigate between multiple viewports', () => {
+    //Click on Layout button
+    cy.get('@layoutBtn').click();
+    //Select 3 viewports
+    cy.get('tbody > :nth-child(1) > :nth-child(3)').click();
+
+    // Press multiples hotkeys on viewport #1
+    cy.get('body').type('VL+++I');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'A');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'R');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 134%');
+
+    // Hotkey RightArrow: Move to next viewport
+    cy.get('body').type('{rightarrow}');
+
+    // Get overlay information from viewport #2
+    cy.get(
+      ':nth-child(2) > .viewport-wrapper > .viewport-element > .ViewportOrientationMarkers.noselect > .top-mid.orientation-marker'
+    ).as('viewport2InfoMidTop');
+    cy.get(
+      ':nth-child(2) > .viewport-wrapper > .viewport-element > .ViewportOrientationMarkers.noselect > .left-mid.orientation-marker'
+    ).as('viewport2InfoMidLeft');
+    cy.get(
+      ':nth-child(2) > .viewport-wrapper > .viewport-element > .ViewportOverlay > div.bottom-right.overlay-element > div'
+    ).as('viewport2InfoBottomRight');
+
+    // Press multiples hotkeys on viewport #2
+    cy.get('body').type('RR++H+++I');
+    cy.get('@viewport2InfoMidLeft').should('contains.text', 'P');
+    cy.get('@viewport2InfoMidTop').should('contains.text', 'H');
+    cy.get('@viewport2InfoBottomRight').should('contains.text', 'Zoom: 120%');
+
+    // Hotkey LeftArrow: Move to previous viewport
+    cy.get('body').type('{leftarrow}');
+
+    // Hotkey SPACEBAR: Reset viewport #1
+    cy.get('body').type(' ');
+    cy.get('@viewportInfoMidLeft').should('contains.text', 'R');
+    cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+    cy.get('@viewportInfoBottomRight').should('contains.text', 'Zoom: 89%');
+
+    // Hotkey RightArrow: Move to next viewport
+    cy.get('body').type('{rightarrow}');
+
+    // Hotkey SPACEBAR: Reset viewport #2
+    cy.get('body').type(' ');
+    cy.get('@viewport2InfoMidLeft').should('contains.text', 'A');
+    cy.get('@viewport2InfoMidTop').should('contains.text', 'H');
+    cy.get('@viewport2InfoBottomRight').should('contains.text', 'Zoom: 45%');
+  });
+
+  //TO-DO: This test is blocked by issue #1095 (https://github.com/OHIF/Viewers/issues/1095)
+  //Once issue is fixed, this test can be uncommented
+  // it('checks if hotkey "Z" activates zoom tool', () => {
+  //   // Hotkey Z
+  //   cy.get('body').type('Z');
+  //   // Verify if icon is active on toolbar
+  //   cy.get('@zoomBtn').should('have.class', 'active');
+  // });
+
+  //TO-DO: This test is blocked by issue #1095 (https://github.com/OHIF/Viewers/issues/1095)
+  //Once issue is fixed, this test can be uncommented
+  // it('checks if hotkeys "PageDown" and "PageUp" can navigate in the series thumbnails', () => {
+  //   // Hotkey PageDown
+  //   cy.get('body').type('{pagedown}{pagedown}'); // press hotkey twice
+  //   cy.get('@viewportInfoBottomLeft').should('contains.text', 'Ser: 3');
+  //   // Hotkey PageUp
+  //   cy.get('body').type('{pageup}');
+  //   cy.get('@viewportInfoBottomLeft').should('contains.text', 'Ser: 2');
+  // });
+});

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

@@ -66,7 +66,7 @@ describe('OHIF Cornerstone Toolbar', () => {
   });
 
   it('checks if Zoom tool will zoom in/out an image in the viewport', () => {
-    //Click on button and vefiry if icon is active on toolbar
+    //Click on button and verify if icon is active on toolbar
     cy.get('@zoomBtn')
       .click()
       .then($zoomBtn => {

platform/viewer/cypress/support/aliases.js

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

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "2.1.0",
+  "version": "2.1.4",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -50,9 +50,9 @@
     "@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.21",
+    "@ohif/extension-vtk": "^0.52.22",
     "@ohif/i18n": "^0.51.0",
-    "@ohif/ui": "^0.57.0",
+    "@ohif/ui": "^0.57.1",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",

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

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

platform/viewer/src/connectedComponents/ViewerMain.js

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

platform/viewer/src/routes/StandaloneRouting.js

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