ohif-core --> @ohif/core

platform/viewer/src/connectedComponents/ConnectedCineDialog.js

@@ -1,13 +1,13 @@
-import { connect } from 'react-redux';
-import { CineDialog } from 'react-viewerbase';
-import OHIF from 'ohif-core';
-import csTools from 'cornerstone-tools';
+import { connect } from "react-redux";
+import { CineDialog } from "react-viewerbase";
+import OHIF from "@ohif/core";
+import csTools from "cornerstone-tools";
 // Our target output kills the `as` and "import" throws a keyword error
 // import { import as toolImport, getToolState } from 'cornerstone-tools';
-import cloneDeep from 'lodash.clonedeep';
+import cloneDeep from "lodash.clonedeep";
 
 const toolImport = csTools.import;
-const scrollToIndex = toolImport('util/scrollToIndex');
+const scrollToIndex = toolImport("util/scrollToIndex");
 const { setViewportSpecificData } = OHIF.redux.actions;
 
 // Why do I need or care about any of this info?
@@ -20,14 +20,14 @@ const mapStateToProps = state => {
 
   const cineData = cine || {
     isPlaying: false,
-    cineFrameRate: 24,
+    cineFrameRate: 24
   };
 
   // New props we're creating?
   return {
     activeEnabledElement: dom,
     activeViewportCineData: cineData,
-    activeViewportIndex: state.viewports.activeViewportIndex,
+    activeViewportIndex: state.viewports.activeViewportIndex
   };
 };
 
@@ -35,7 +35,7 @@ const mapDispatchToProps = dispatch => {
   return {
     dispatchSetViewportSpecificData: (viewportIndex, data) => {
       dispatch(setViewportSpecificData(viewportIndex, data));
-    },
+    }
   };
 };
 
@@ -43,7 +43,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
   const {
     activeEnabledElement,
     activeViewportCineData,
-    activeViewportIndex,
+    activeViewportIndex
   } = propsFromState;
 
   return {
@@ -54,7 +54,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       cine.isPlaying = !cine.isPlaying;
 
       propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
-        cine,
+        cine
       });
     },
     onFrameRateChanged: frameRate => {
@@ -62,34 +62,34 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       cine.cineFrameRate = frameRate;
 
       propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
-        cine,
+        cine
       });
     },
     onClickNextButton: () => {
-      const stackData = csTools.getToolState(activeEnabledElement, 'stack');
+      const stackData = csTools.getToolState(activeEnabledElement, "stack");
       if (!stackData || !stackData.data || !stackData.data.length) return;
       const { currentImageIdIndex, imageIds } = stackData.data[0];
       if (currentImageIdIndex >= imageIds.length - 1) return;
       scrollToIndex(activeEnabledElement, currentImageIdIndex + 1);
     },
     onClickBackButton: () => {
-      const stackData = csTools.getToolState(activeEnabledElement, 'stack');
+      const stackData = csTools.getToolState(activeEnabledElement, "stack");
       if (!stackData || !stackData.data || !stackData.data.length) return;
       const { currentImageIdIndex } = stackData.data[0];
       if (currentImageIdIndex === 0) return;
       scrollToIndex(activeEnabledElement, currentImageIdIndex - 1);
     },
     onClickSkipToStart: () => {
-      const stackData = csTools.getToolState(activeEnabledElement, 'stack');
+      const stackData = csTools.getToolState(activeEnabledElement, "stack");
       if (!stackData || !stackData.data || !stackData.data.length) return;
       scrollToIndex(activeEnabledElement, 0);
     },
     onClickSkipToEnd: () => {
-      const stackData = csTools.getToolState(activeEnabledElement, 'stack');
+      const stackData = csTools.getToolState(activeEnabledElement, "stack");
       if (!stackData || !stackData.data || !stackData.data.length) return;
       const lastIndex = stackData.data[0].imageIds.length - 1;
       scrollToIndex(activeEnabledElement, lastIndex);
-    },
+    }
   };
 };
 

platform/viewer/src/connectedComponents/ConnectedLayoutButton.js

@@ -1,12 +1,12 @@
-import { LayoutButton } from 'react-viewerbase';
-import OHIF from 'ohif-core';
-import { connect } from 'react-redux';
+import { LayoutButton } from "react-viewerbase";
+import OHIF from "@ohif/core";
+import { connect } from "react-redux";
 
 const { setLayout } = OHIF.redux.actions;
 
 const mapStateToProps = state => {
   return {
-    currentLayout: state.viewports.layout,
+    currentLayout: state.viewports.layout
   };
 };
 
@@ -21,15 +21,15 @@ const mapDispatchToProps = dispatch => {
       for (let i = 0; i < numViewports; i++) {
         viewports.push({
           height: `${100 / rows}%`,
-          width: `${100 / columns}%`,
+          width: `${100 / columns}%`
         });
       }
       const layout = {
-        viewports,
+        viewports
       };
 
       dispatch(setLayout(layout));
-    },
+    }
   };
 };
 

platform/viewer/src/connectedComponents/ConnectedLayoutManager.js

@@ -1,7 +1,7 @@
-import { LayoutManager } from 'react-viewerbase';
-import { MODULE_TYPES } from 'ohif-core';
-import { connect } from 'react-redux';
-import { extensionManager } from './../App.js';
+import { LayoutManager } from "react-viewerbase";
+import { MODULE_TYPES } from "@ohif/core";
+import { connect } from "react-redux";
+import { extensionManager } from "./../App.js";
 
 const mapStateToProps = state => {
   const availableViewportModules = {};
@@ -24,7 +24,7 @@ const mapStateToProps = state => {
     // TODO: rename `availableViewportModules`
     availablePlugins: availableViewportModules,
     // TODO: rename `defaultViewportModule`
-    defaultPlugin,
+    defaultPlugin
   };
 };
 

platform/viewer/src/connectedComponents/ConnectedPluginSwitch.js

@@ -1,7 +1,7 @@
-import OHIF from 'ohif-core';
-import PluginSwitch from './PluginSwitch.js';
-import { commandsManager } from './../App.js';
-import { connect } from 'react-redux';
+import OHIF from "@ohif/core";
+import PluginSwitch from "./PluginSwitch.js";
+import { commandsManager } from "./../App.js";
+import { connect } from "react-redux";
 
 const { setLayout } = OHIF.redux.actions;
 
@@ -11,7 +11,7 @@ const mapStateToProps = state => {
   return {
     activeViewportIndex,
     viewportSpecificData,
-    layout,
+    layout
   };
 };
 
@@ -19,7 +19,7 @@ const mapDispatchToProps = dispatch => {
   return {
     setLayout: data => {
       dispatch(setLayout(data));
-    },
+    }
   };
 };
 
@@ -81,16 +81,16 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       },
     },*/
     {
-      label: '2D MPR',
-      icon: 'cube',
+      label: "2D MPR",
+      icon: "cube",
       onClick: () => {
-        commandsManager.runCommand('mpr2d');
-      },
-    },
+        commandsManager.runCommand("mpr2d");
+      }
+    }
   ];
 
   return {
-    buttons,
+    buttons
   };
 };
 

platform/viewer/src/connectedComponents/ConnectedStudyLoadingMonitor.js

@@ -1,10 +1,10 @@
-import { connect } from 'react-redux';
-import StudyLoadingMonitor from '../components/StudyLoadingMonitor.js';
-import OHIF from 'ohif-core';
+import { connect } from "react-redux";
+import StudyLoadingMonitor from "../components/StudyLoadingMonitor.js";
+import OHIF from "@ohif/core";
 
 const {
   setStudyLoadingProgress,
-  clearStudyLoadingProgress,
+  clearStudyLoadingProgress
 } = OHIF.redux.actions;
 
 const mapDispatchToProps = dispatch => {
@@ -14,7 +14,7 @@ const mapDispatchToProps = dispatch => {
     },
     clearStudyLoadingProgress: progressId => {
       dispatch(clearStudyLoadingProgress(progressId));
-    },
+    }
   };
 };
 

platform/viewer/src/connectedComponents/ConnectedViewer.js

@@ -1,13 +1,13 @@
-import { connect } from 'react-redux';
-import Viewer from './Viewer.js';
-import OHIF from 'ohif-core';
+import { connect } from "react-redux";
+import Viewer from "./Viewer.js";
+import OHIF from "@ohif/core";
 
 const { setTimepoints, setMeasurements } = OHIF.redux.actions;
 
 const mapStateToProps = (state, ownProps) => {
   return {
     viewports: state.viewports.viewportSpecificData,
-    activeViewportIndex: state.viewports.activeViewportIndex,
+    activeViewportIndex: state.viewports.activeViewportIndex
   };
 };
 
@@ -18,7 +18,7 @@ const mapDispatchToProps = dispatch => {
     },
     onMeasurementsUpdated: measurements => {
       dispatch(setMeasurements(measurements));
-    },
+    }
   };
 };
 

platform/viewer/src/connectedComponents/ConnectedViewerMain.js

@@ -1,10 +1,10 @@
-import OHIF from 'ohif-core';
-import ViewerMain from './ViewerMain';
-import { connect } from 'react-redux';
+import OHIF from "@ohif/core";
+import ViewerMain from "./ViewerMain";
+import { connect } from "react-redux";
 
 const {
   setViewportSpecificData,
-  clearViewportSpecificData,
+  clearViewportSpecificData
 } = OHIF.redux.actions;
 
 const mapStateToProps = state => {
@@ -14,7 +14,7 @@ const mapStateToProps = state => {
     activeViewportIndex,
     layout,
     viewportSpecificData,
-    viewports: state.viewports,
+    viewports: state.viewports
   };
 };
 
@@ -25,7 +25,7 @@ const mapDispatchToProps = dispatch => {
     },
     clearViewportSpecificData: () => {
       dispatch(clearViewportSpecificData());
-    },
+    }
   };
 };
 

platform/viewer/src/connectedComponents/ToolbarRow.js

@@ -1,18 +1,18 @@
-import './ToolbarRow.css';
+import "./ToolbarRow.css";
 
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
   RoundedButtonGroup,
   ToolbarButton,
-  ExpandableToolMenu,
-} from 'react-viewerbase';
-import { commandsManager, extensionManager } from './../App.js';
+  ExpandableToolMenu
+} from "react-viewerbase";
+import { commandsManager, extensionManager } from "./../App.js";
 
-import ConnectedCineDialog from './ConnectedCineDialog';
-import ConnectedLayoutButton from './ConnectedLayoutButton';
-import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
-import { MODULE_TYPES } from 'ohif-core';
-import PropTypes from 'prop-types';
+import ConnectedCineDialog from "./ConnectedCineDialog";
+import ConnectedLayoutButton from "./ConnectedLayoutButton";
+import ConnectedPluginSwitch from "./ConnectedPluginSwitch.js";
+import { MODULE_TYPES } from "@ohif/core";
+import PropTypes from "prop-types";
 
 class ToolbarRow extends Component {
   // TODO: Simplify these? isOpen can be computed if we say "any" value for selected,
@@ -23,7 +23,7 @@ class ToolbarRow extends Component {
     selectedLeftSidePanel: PropTypes.string.isRequired,
     selectedRightSidePanel: PropTypes.string.isRequired,
     handleSidePanelChange: PropTypes.func,
-    activeContexts: PropTypes.arrayOf(PropTypes.string).isRequired,
+    activeContexts: PropTypes.arrayOf(PropTypes.string).isRequired
   };
 
   constructor(props) {
@@ -41,7 +41,7 @@ class ToolbarRow extends Component {
     this.state = {
       toolbarButtons: toolbarButtonDefinitions,
       activeButtons: [],
-      isCineDialogOpen: false,
+      isCineDialogOpen: false
     };
 
     this._handleBuiltIn = _handleBuiltIn.bind(this);
@@ -51,12 +51,12 @@ class ToolbarRow extends Component {
       left: [
         // TODO: This should come from extensions, instead of being baked in
         {
-          value: 'studies',
-          icon: 'th-large',
-          bottomLabel: 'Series',
-        },
+          value: "studies",
+          icon: "th-large",
+          bottomLabel: "Series"
+        }
       ],
-      right: [],
+      right: []
     };
 
     panelModules.forEach(panelExtension => {
@@ -74,9 +74,9 @@ class ToolbarRow extends Component {
           const menuOptionEntry = {
             value: menuOption.target,
             icon: menuOption.icon,
-            bottomLabel: menuOption.label,
+            bottomLabel: menuOption.label
           };
-          const from = menuOption.from || 'right';
+          const from = menuOption.from || "right";
 
           this.buttonGroups[from].push(menuOptionEntry);
         }
@@ -90,7 +90,7 @@ class ToolbarRow extends Component {
 
     if (activeContextsChanged) {
       this.setState({
-        toolbarButtons: _getVisibleToolbarButtons.call(this),
+        toolbarButtons: _getVisibleToolbarButtons.call(this)
       });
     }
   }
@@ -103,25 +103,25 @@ class ToolbarRow extends Component {
     );
 
     const cineDialogContainerStyle = {
-      display: this.state.isCineDialogOpen ? 'block' : 'none',
-      position: 'absolute',
-      top: '82px',
-      zIndex: 999,
+      display: this.state.isCineDialogOpen ? "block" : "none",
+      position: "absolute",
+      top: "82px",
+      zIndex: 999
     };
 
     const onPress = (side, value) => {
       this.props.handleSidePanelChange(side, value);
     };
-    const onPressLeft = onPress.bind(this, 'left');
-    const onPressRight = onPress.bind(this, 'right');
+    const onPressLeft = onPress.bind(this, "left");
+    const onPressRight = onPress.bind(this, "right");
 
     return (
       <>
         <div className="ToolbarRow">
-          <div className="pull-left m-t-1 p-y-1" style={{ padding: '10px' }}>
+          <div className="pull-left m-t-1 p-y-1" style={{ padding: "10px" }}>
             <RoundedButtonGroup
               options={this.buttonGroups.left}
-              value={this.props.selectedLeftSidePanel || ''}
+              value={this.props.selectedLeftSidePanel || ""}
               onValueChanged={onPressLeft}
             />
           </div>
@@ -130,12 +130,12 @@ class ToolbarRow extends Component {
           <ConnectedPluginSwitch />
           <div
             className="pull-right m-t-1 rm-x-1"
-            style={{ marginLeft: 'auto' }}
+            style={{ marginLeft: "auto" }}
           >
             {this.buttonGroups.right.length && (
               <RoundedButtonGroup
                 options={this.buttonGroups.right}
-                value={this.props.selectedRightSidePanel || ''}
+                value={this.props.selectedRightSidePanel || ""}
                 onValueChanged={onPressRight}
               />
             )}
@@ -201,11 +201,11 @@ function _handleToolbarButtonClick(button, evt, props) {
   // TODO: Use Types ENUM
   // TODO: We can update this to be a `getter` on the extension to query
   //       For the active tools after we apply our updates?
-  if (button.type === 'setToolActive') {
+  if (button.type === "setToolActive") {
     this.setState({
-      activeButtons: [button.id],
+      activeButtons: [button.id]
     });
-  } else if (button.type === 'builtIn') {
+  } else if (button.type === "builtIn") {
     this._handleBuiltIn(button.options);
   }
 }
@@ -232,9 +232,9 @@ function _getVisibleToolbarButtons() {
 }
 
 function _handleBuiltIn({ behavior } = {}) {
-  if (behavior === 'CINE') {
+  if (behavior === "CINE") {
     this.setState({
-      isCineDialogOpen: !this.state.isCineDialogOpen,
+      isCineDialogOpen: !this.state.isCineDialogOpen
     });
   }
 }

platform/viewer/src/connectedComponents/Viewer.js

@@ -1,19 +1,19 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
 
-import { MODULE_TYPES } from 'ohif-core';
-import OHIF from 'ohif-core';
-import moment from 'moment';
-import WhiteLabellingContext from '../WhiteLabellingContext.js';
-import ConnectedHeader from './ConnectedHeader.js';
-import ConnectedToolbarRow from './ConnectedToolbarRow.js';
-import ConnectedLabellingOverlay from './ConnectedLabellingOverlay';
-import ConnectedStudyBrowser from './ConnectedStudyBrowser.js';
-import ConnectedViewerMain from './ConnectedViewerMain.js';
-import SidePanel from './../components/SidePanel.js';
-import { extensionManager } from './../App.js';
-import './Viewer.css';
+import { MODULE_TYPES } from "@ohif/core";
+import OHIF from "@ohif/core";
+import moment from "moment";
+import WhiteLabellingContext from "../WhiteLabellingContext.js";
+import ConnectedHeader from "./ConnectedHeader.js";
+import ConnectedToolbarRow from "./ConnectedToolbarRow.js";
+import ConnectedLabellingOverlay from "./ConnectedLabellingOverlay";
+import ConnectedStudyBrowser from "./ConnectedStudyBrowser.js";
+import ConnectedViewerMain from "./ConnectedViewerMain.js";
+import SidePanel from "./../components/SidePanel.js";
+import { extensionManager } from "./../App.js";
+import "./Viewer.css";
 /**
  * Inits OHIF Hanging Protocol's onReady.
  * It waits for OHIF Hanging Protocol to be ready to instantiate the ProtocolEngine
@@ -59,7 +59,7 @@ class Viewer extends Component {
     // window.store.getState().viewports.viewportSpecificData
     viewports: PropTypes.object.isRequired,
     // window.store.getState().viewports.activeViewportIndex
-    activeViewportIndex: PropTypes.number.isRequired,
+    activeViewportIndex: PropTypes.number.isRequired
   };
 
   constructor(props) {
@@ -67,8 +67,8 @@ class Viewer extends Component {
     OHIF.measurements.MeasurementApi.setConfiguration({
       dataExchange: {
         retrieve: this.retrieveMeasurements,
-        store: this.storeMeasurements,
-      },
+        store: this.storeMeasurements
+      }
     });
 
     OHIF.measurements.TimepointApi.setConfiguration({
@@ -77,41 +77,41 @@ class Viewer extends Component {
         store: this.storeTimepoints,
         remove: this.removeTimepoint,
         update: this.updateTimepoint,
-        disassociate: this.disassociateStudy,
-      },
+        disassociate: this.disassociateStudy
+      }
     });
   }
 
   state = {
     isLeftSidePanelOpen: true,
     isRightSidePanelOpen: false,
-    selectedRightSidePanel: '',
-    selectedLeftSidePanel: 'studies', // TODO: Don't hardcode this
-    thumbnails: [],
+    selectedRightSidePanel: "",
+    selectedLeftSidePanel: "studies", // TODO: Don't hardcode this
+    thumbnails: []
   };
 
   retrieveMeasurements = (patientId, timepointIds) => {
-    OHIF.log.info('retrieveMeasurements');
+    OHIF.log.info("retrieveMeasurements");
     // TODO: Retrieve the measurements from the latest available SR
     return Promise.resolve();
   };
 
   storeMeasurements = (measurementData, timepointIds) => {
-    OHIF.log.info('storeMeasurements');
+    OHIF.log.info("storeMeasurements");
     // TODO: Store the measurements into a new SR sent to the active server
     return Promise.resolve();
   };
 
   retrieveTimepoints = filter => {
-    OHIF.log.info('retrieveTimepoints');
+    OHIF.log.info("retrieveTimepoints");
 
     // Get the earliest and latest study date
     let earliestDate = new Date().toISOString();
     let latestDate = new Date().toISOString();
     if (this.props.studies) {
-      latestDate = new Date('1000-01-01').toISOString();
+      latestDate = new Date("1000-01-01").toISOString();
       this.props.studies.forEach(study => {
-        const studyDate = moment(study.studyDate, 'YYYYMMDD').toISOString();
+        const studyDate = moment(study.studyDate, "YYYYMMDD").toISOString();
         if (studyDate < earliestDate) {
           earliestDate = studyDate;
         }
@@ -124,34 +124,34 @@ class Viewer extends Component {
     // Return a generic timepoint
     return Promise.resolve([
       {
-        timepointType: 'baseline',
-        timepointId: 'TimepointId',
+        timepointType: "baseline",
+        timepointId: "TimepointId",
         studyInstanceUids: this.props.studyInstanceUids,
         patientId: filter.patientId,
         earliestDate,
         latestDate,
-        isLocked: false,
-      },
+        isLocked: false
+      }
     ]);
   };
 
   storeTimepoints = timepointData => {
-    OHIF.log.info('storeTimepoints');
+    OHIF.log.info("storeTimepoints");
     return Promise.resolve();
   };
 
   updateTimepoint = (timepointData, query) => {
-    OHIF.log.info('updateTimepoint');
+    OHIF.log.info("updateTimepoint");
     return Promise.resolve();
   };
 
   removeTimepoint = timepointId => {
-    OHIF.log.info('removeTimepoint');
+    OHIF.log.info("removeTimepoint");
     return Promise.resolve();
   };
 
   disassociateStudy = (timepointIds, studyInstanceUid) => {
-    OHIF.log.info('disassociateStudy');
+    OHIF.log.info("disassociateStudy");
     return Promise.resolve();
   };
 
@@ -170,14 +170,14 @@ class Viewer extends Component {
   componentDidMount() {
     const { studies } = this.props;
     const { TimepointApi, MeasurementApi } = OHIF.measurements;
-    const currentTimepointId = 'TimepointId';
+    const currentTimepointId = "TimepointId";
 
     const timepointApi = new TimepointApi(currentTimepointId, {
-      onTimepointsUpdated: this.onTimepointsUpdated,
+      onTimepointsUpdated: this.onTimepointsUpdated
     });
 
     const measurementApi = new MeasurementApi(timepointApi, {
-      onMeasurementsUpdated: this.onMeasurementsUpdated,
+      onMeasurementsUpdated: this.onMeasurementsUpdated
     });
 
     this.currentTimepointId = currentTimepointId;
@@ -191,7 +191,7 @@ class Viewer extends Component {
       measurementApi.retrieveMeasurements(patientId, [currentTimepointId]);
 
       this.setState({
-        thumbnails: _mapStudiesToThumbnails(studies),
+        thumbnails: _mapStudiesToThumbnails(studies)
       });
     }
   }
@@ -206,7 +206,7 @@ class Viewer extends Component {
       this.measurementApi.retrieveMeasurements(patientId, [currentTimepointId]);
 
       this.setState({
-        thumbnails: _mapStudiesToThumbnails(studies),
+        thumbnails: _mapStudiesToThumbnails(studies)
       });
     }
   }
@@ -243,12 +243,12 @@ class Viewer extends Component {
           selectedLeftSidePanel={
             this.state.isLeftSidePanelOpen
               ? this.state.selectedLeftSidePanel
-              : ''
+              : ""
           }
           selectedRightSidePanel={
             this.state.isRightSidePanelOpen
               ? this.state.selectedRightSidePanel
-              : ''
+              : ""
           }
           handleSidePanelChange={(side, selectedPanel) => {
             const sideClicked = side && side[0].toUpperCase() + side.slice(1);
@@ -291,7 +291,7 @@ class Viewer extends Component {
           </SidePanel>
 
           {/* MAIN */}
-          <div className={classNames('main-content')}>
+          <div className={classNames("main-content")}>
             <ConnectedViewerMain studies={this.props.studies} />
           </div>
 
@@ -335,16 +335,16 @@ const _mapStudiesToThumbnails = function(studies) {
         seriesDescription,
         seriesNumber,
         instanceNumber,
-        numImageFrames,
+        numImageFrames
       } = displaySet;
 
       let imageId;
-      let altImageText = ' '; // modality
+      let altImageText = " "; // modality
 
       if (displaySet.images && displaySet.images.length) {
         imageId = displaySet.images[0].getImageId();
       } else {
-        altImageText = 'SR';
+        altImageText = "SR";
       }
 
       return {
@@ -354,13 +354,13 @@ const _mapStudiesToThumbnails = function(studies) {
         seriesDescription,
         seriesNumber,
         instanceNumber,
-        numImageFrames,
+        numImageFrames
       };
     });
 
     return {
       studyInstanceUid,
-      thumbnails,
+      thumbnails
     };
   });
 };

platform/viewer/src/connectedComponents/ViewerRetrieveStudyData.js

@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
-import { metadata, studies, utils } from 'ohif-core';
+import React, { Component } from "react";
+import { metadata, studies, utils } from "@ohif/core";
 
-import ConnectedViewer from './ConnectedViewer.js';
-import PropTypes from 'prop-types';
-import { extensionManager } from './../App.js';
+import ConnectedViewer from "./ConnectedViewer.js";
+import PropTypes from "prop-types";
+import { extensionManager } from "./../App.js";
 
 const { OHIFStudyMetadata } = metadata;
 const { retrieveStudiesMetadata } = studies;
@@ -13,12 +13,12 @@ class ViewerRetrieveStudyData extends Component {
   static propTypes = {
     studyInstanceUids: PropTypes.array.isRequired,
     seriesInstanceUids: PropTypes.array,
-    server: PropTypes.object,
+    server: PropTypes.object
   };
 
   state = {
     studies: null,
-    error: null,
+    error: null
   };
 
   async componentDidMount() {
@@ -44,7 +44,7 @@ class ViewerRetrieveStudyData extends Component {
           study.studyInstanceUid
         );
         const sopClassHandlerModules =
-          extensionManager.modules['sopClassHandlerModule'];
+          extensionManager.modules["sopClassHandlerModule"];
 
         study.displaySets =
           study.displaySets ||
@@ -60,11 +60,11 @@ class ViewerRetrieveStudyData extends Component {
       });
 
       this.setState({
-        studies: updatedStudies,
+        studies: updatedStudies
       });
     } catch (err) {
       this.setState({
-        error: true,
+        error: true
       });
 
       // TODO: Handle gracefully instead of throwing?