Merge branch 'master' of github.com:OHIF/Viewers

# Conflicts:
#	extensions/ohif-cornerstone-extension/package.json
#	package.json
#	src/components/Header/Header.js
#	src/components/Labelling/LabellingFlow.js
#	src/components/OHIFLogo/OHIFLogo.js
#	src/connectedComponents/ConnectedPluginSwitch.js
#	src/connectedComponents/ToolbarRow.js
#	src/utils/getDefaultToolbarButtons.js
#	src/utils/getDefaultToolbarButtons.test.js
#	yarn.lock

src/components/AsyncComponent.js

@@ -4,34 +4,34 @@
  * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
  */
 
-import React, { Component } from 'react'
+import React, { Component } from 'react';
 
 export default function asyncComponent(importComponent) {
   class AsyncComponent extends Component {
     constructor(props) {
-      super(props)
+      super(props);
 
       this.state = {
         component: null,
-      }
+      };
     }
 
     async componentDidMount() {
       // Add dynamically loaded component to state
-      const { default: component } = await importComponent()
+      const { default: component } = await importComponent();
 
       this.setState({
         component: component,
-      })
+      });
     }
 
     render() {
-      const C = this.state.component
+      const C = this.state.component;
 
       // Render the loaded component, or null
-      return C ? <C {...this.props} /> : null
+      return C ? <C {...this.props} /> : null;
     }
   }
 
-  return AsyncComponent
+  return AsyncComponent;
 }

src/components/EditDescriptionDialog/EditDescriptionDialog.js

@@ -1,18 +1,18 @@
-import { Component } from 'react'
-import React from 'react'
-import PropTypes from 'prop-types'
-import SimpleDialog from '../SimpleDialog/SimpleDialog.js'
+import { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import SimpleDialog from '../SimpleDialog/SimpleDialog.js';
 
-import bounding from '../../lib/utils/bounding.js'
-import { getDialogStyle } from './../Labelling/labellingPositionUtils.js'
+import bounding from '../../lib/utils/bounding.js';
+import { getDialogStyle } from './../Labelling/labellingPositionUtils.js';
 
-import './EditDescriptionDialog.css'
+import './EditDescriptionDialog.css';
 
 export default class EditDescriptionDialog extends Component {
   static defaultProps = {
     componentRef: React.createRef(),
     componentStyle: {},
-  }
+  };
 
   static propTypes = {
     measurementData: PropTypes.object.isRequired,
@@ -20,32 +20,32 @@ export default class EditDescriptionDialog extends Component {
     componentRef: PropTypes.object,
     componentStyle: PropTypes.object,
     onUpdate: PropTypes.func.isRequired,
-  }
+  };
 
   constructor(props) {
-    super(props)
+    super(props);
 
     this.state = {
       description: props.measurementData.description || '',
-    }
+    };
 
-    this.mainElement = React.createRef()
+    this.mainElement = React.createRef();
   }
 
   componentDidMount = () => {
-    bounding(this.mainElement)
-  }
+    bounding(this.mainElement);
+  };
 
   componentDidUpdate(prevProps) {
     if (this.props.description !== prevProps.description) {
       this.setState({
         description: this.props.description,
-      })
+      });
     }
   }
 
   render() {
-    const style = getDialogStyle(this.props.componentStyle)
+    const style = getDialogStyle(this.props.componentStyle);
 
     return (
       <SimpleDialog
@@ -65,18 +65,18 @@ export default class EditDescriptionDialog extends Component {
           onChange={this.handleChange}
         />
       </SimpleDialog>
-    )
+    );
   }
 
   onClose = () => {
-    this.props.onCancel()
-  }
+    this.props.onCancel();
+  };
 
   onConfirm = () => {
-    this.props.onUpdate(this.state.description)
-  }
+    this.props.onUpdate(this.state.description);
+  };
 
   handleChange = event => {
-    this.setState({ description: event.target.value })
-  }
+    this.setState({ description: event.target.value });
+  };
 }

src/components/Header/index.js

@@ -1,3 +1,3 @@
-import Header from './Header'
+import Header from './Header';
 
-export default Header
+export default Header;

src/components/Labelling/LabellingManager.js

@@ -1,12 +1,12 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
-import cloneDeep from 'lodash.clonedeep'
+import cloneDeep from 'lodash.clonedeep';
 
-import EditDescriptionDialog from './../EditDescriptionDialog/EditDescriptionDialog.js'
-import LabellingFlow from './LabellingFlow.js'
+import EditDescriptionDialog from './../EditDescriptionDialog/EditDescriptionDialog.js';
+import LabellingFlow from './LabellingFlow.js';
 
-import './LabellingManager.css'
+import './LabellingManager.css';
 
 export default class LabellingManager extends Component {
   static propTypes = {
@@ -20,24 +20,24 @@ export default class LabellingManager extends Component {
     editLocation: PropTypes.bool,
     editDescription: PropTypes.bool,
     editDescriptionOnDialog: PropTypes.bool,
-  }
+  };
 
   static defaultProps = {
     skipAddLabelButton: false,
     editLocation: false,
     editDescription: false,
     editDescriptionOnDialog: false,
-  }
+  };
 
   constructor(props) {
-    super(props)
+    super(props);
 
-    const measurementData = cloneDeep(props.measurementData)
-    this.treatMeasurementData(measurementData)
+    const measurementData = cloneDeep(props.measurementData);
+    this.treatMeasurementData(measurementData);
 
-    let editLocation = props.editLocation
+    let editLocation = props.editLocation;
     if (!props.editDescription && !props.editLocation) {
-      editLocation = true
+      editLocation = true;
     }
 
     this.state = {
@@ -47,19 +47,19 @@ export default class LabellingManager extends Component {
       editDescription: props.editDescription,
       editDescriptionOnDialog: props.editDescriptionOnDialog,
       measurementData: measurementData,
-    }
+    };
   }
 
   componentDidMount = () => {
-    document.addEventListener('touchstart', this.onTouchStart)
-  }
+    document.addEventListener('touchstart', this.onTouchStart);
+  };
 
   componentWillUnmount = () => {
-    document.removeEventListener('touchstart', this.onTouchStart)
-  }
+    document.removeEventListener('touchstart', this.onTouchStart);
+  };
 
   render() {
-    return this.getRenderComponent()
+    return this.getRenderComponent();
   }
 
   getRenderComponent = () => {
@@ -68,7 +68,7 @@ export default class LabellingManager extends Component {
       editDescription,
       editDescriptionOnDialog,
       measurementData,
-    } = this.state
+    } = this.state;
 
     if (editDescriptionOnDialog) {
       return (
@@ -79,7 +79,7 @@ export default class LabellingManager extends Component {
           componentStyle={this.state.componentStyle}
           measurementData={measurementData}
         />
-      )
+      );
     }
 
     if (editLocation || editDescription) {
@@ -88,43 +88,43 @@ export default class LabellingManager extends Component {
           {...this.props}
           componentStyle={this.state.componentStyle}
         />
-      )
+      );
     }
-  }
+  };
 
   treatMeasurementData = measurementData => {
-    const { editDescription, editLocation } = this.props
+    const { editDescription, editLocation } = this.props;
 
     if (editDescription) {
-      measurementData.description = undefined
+      measurementData.description = undefined;
     }
     if (editLocation) {
-      measurementData.location = undefined
+      measurementData.location = undefined;
     }
-  }
+  };
 
   responseDialogUpdate = response => {
     this.props.updateLabelling({
       response,
-    })
-    this.props.labellingDoneCallback()
-  }
+    });
+    this.props.labellingDoneCallback();
+  };
 
   descriptionDialogUpdate = description => {
     this.props.updateLabelling({
       description,
-    })
-    this.props.labellingDoneCallback()
-  }
+    });
+    this.props.labellingDoneCallback();
+  };
 }
 
 function getComponentPosition(eventData) {
   const {
     event: { clientX: left, clientY: top },
-  } = eventData
+  } = eventData;
 
   return {
     left,
     top,
-  }
+  };
 }

src/components/Labelling/LabellingTransition.js

@@ -1,20 +1,20 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { CSSTransition } from 'react-transition-group'
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { CSSTransition } from 'react-transition-group';
 
-import './LabellingTransition.css'
+import './LabellingTransition.css';
 
 // If these variables changes, CSS must be updated
-const transitionDuration = 500
-const transitionClassName = 'labelling'
-const transitionOnAppear = true
+const transitionDuration = 500;
+const transitionClassName = 'labelling';
+const transitionOnAppear = true;
 
 export default class LabellingTransition extends Component {
   static propTypes = {
     children: PropTypes.node.isRequired,
     displayComponent: PropTypes.bool.isRequired,
     onTransitionExit: PropTypes.func.isRequired,
-  }
+  };
   render() {
     return (
       <CSSTransition
@@ -26,6 +26,6 @@ export default class LabellingTransition extends Component {
       >
         {this.props.children}
       </CSSTransition>
-    )
+    );
   }
 }

src/components/Labelling/OHIFLabellingData.js

@@ -27,13 +27,13 @@ const items = [
   'Spleen',
   'Stomach',
   'Subcutaneous',
-]
+];
 
 const OHIFLabellingData = items.map(item => {
   return {
     label: item,
     value: item,
-  }
-})
+  };
+});
 
-export default OHIFLabellingData
+export default OHIFLabellingData;

src/components/Labelling/labellingPositionUtils.js

@@ -1,53 +1,53 @@
-import cornerstone from 'cornerstone-core'
+import cornerstone from 'cornerstone-core';
 
 const buttonSize = {
   width: 96,
   height: 28,
-}
+};
 
 export function getAddLabelButtonStyle(measurementData, eventData) {
-  const { start, end } = measurementData.handles
-  const { client } = eventData.currentPoints
-  const clientStart = cornerstone.pixelToCanvas(eventData.element, start)
-  const clientEnd = cornerstone.pixelToCanvas(eventData.element, end)
-  const canvasOffSetLeft = client.x - clientStart.x
-  const canvasOffSetTop = client.y - clientStart.y
+  const { start, end } = measurementData.handles;
+  const { client } = eventData.currentPoints;
+  const clientStart = cornerstone.pixelToCanvas(eventData.element, start);
+  const clientEnd = cornerstone.pixelToCanvas(eventData.element, end);
+  const canvasOffSetLeft = client.x - clientStart.x;
+  const canvasOffSetTop = client.y - clientStart.y;
   const position = {
     left: clientEnd.x + canvasOffSetLeft,
     top: clientEnd.y + canvasOffSetTop,
-  }
+  };
 
   if (start.y > end.y) {
-    position.top -= buttonSize.height
+    position.top -= buttonSize.height;
   }
   if (start.x > end.x) {
-    position.left -= buttonSize.width
+    position.left -= buttonSize.width;
   }
 
-  return position
+  return position;
 }
 
 export function getDialogStyle(componentStyle) {
-  const style = Object.assign({}, componentStyle)
+  const style = Object.assign({}, componentStyle);
   const dialogProps = {
     width: 320,
     height: 230,
-  }
+  };
 
   // Get max values to avoid position out of the screen
-  const maxLeft = window.innerWidth - dialogProps.width
-  const maxTop = window.innerHeight - dialogProps.height
+  const maxLeft = window.innerWidth - dialogProps.width;
+  const maxTop = window.innerHeight - dialogProps.height;
 
   // Positioning the dialog with its center on the click event
-  style.left -= dialogProps.width / 2
-  style.top -= dialogProps.height / 2
+  style.left -= dialogProps.width / 2;
+  style.top -= dialogProps.height / 2;
 
   if (style.left > maxLeft) {
-    style.left = maxLeft
+    style.left = maxLeft;
   }
   if (style.top > maxTop) {
-    style.top = maxTop
+    style.top = maxTop;
   }
 
-  return style
+  return style;
 }

src/components/SimpleDialog/SimpleDialog.js

@@ -1,14 +1,14 @@
-import { Component } from 'react'
-import React from 'react'
-import PropTypes from 'prop-types'
+import { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-import './SimpleDialog.css'
+import './SimpleDialog.css';
 
 class SimpleDialog extends Component {
   static defaultProps = {
     componentStyle: {},
     rootClass: '',
-  }
+  };
 
   render() {
     return (
@@ -43,7 +43,7 @@ class SimpleDialog extends Component {
           </div>
         </form>
       </div>
-    )
+    );
   }
 }
 
@@ -51,6 +51,6 @@ SimpleDialog.propTypes = {
   headerTitle: PropTypes.string.isRequired,
   onClose: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
-}
+};
 
-export default SimpleDialog
+export default SimpleDialog;

src/components/StudyLoadingMonitor.js

@@ -1,43 +1,42 @@
-import { Component } from "react";
-import PropTypes from "prop-types";
+import { Component } from 'react';
+import PropTypes from 'prop-types';
 import OHIF from 'ohif-core';
 
 class StudyLoadingMonitor extends Component {
-    static propTypes = {
-        studies: PropTypes.array.isRequired,
-        setStudyLoadingProgress: PropTypes.func.isRequired,
-        clearStudyLoadingProgress: PropTypes.func.isRequired,
+  static propTypes = {
+    studies: PropTypes.array.isRequired,
+    setStudyLoadingProgress: PropTypes.func.isRequired,
+    clearStudyLoadingProgress: PropTypes.func.isRequired,
+  };
+
+  componentDidMount() {
+    // TODO: This is pretty ugly. The thing is that the StudyLoadingListener
+    // needs to update the Redux store, but shouldn't know that it exists.
+    // I am therefore passing in some functions to update the store instead,
+    // but this should definitely be cleaned up somehow.
+    const options = {
+      _setProgressData: (progressId, progressData) => {
+        this.props.setStudyLoadingProgress(progressId, progressData);
+      },
+      _clearProgressById: progressId => {
+        this.props.clearStudyLoadingProgress(progressId);
+      },
     };
 
-    componentDidMount() {
-        // TODO: This is pretty ugly. The thing is that the StudyLoadingListener
-        // needs to update the Redux store, but shouldn't know that it exists.
-        // I am therefore passing in some functions to update the store instead,
-        // but this should definitely be cleaned up somehow.
-        const options = {
-            _setProgressData: (progressId, progressData) => {
-                this.props.setStudyLoadingProgress(progressId, progressData)
-            },
-            _clearProgressById: (progressId) => {
-                this.props.clearStudyLoadingProgress(progressId)
-            }
-        }
+    const { StudyLoadingListener } = OHIF.classes;
+    this.studyLoadingListener = StudyLoadingListener.getInstance(options);
+    this.studyLoadingListener.clear();
+    this.studyLoadingListener.addStudies(this.props.studies);
+  }
 
-        const { StudyLoadingListener } = OHIF.classes;
-        this.studyLoadingListener = StudyLoadingListener.getInstance(options);
-        this.studyLoadingListener.clear();
-        this.studyLoadingListener.addStudies(this.props.studies);
-    }
+  render() {
+    return null;
+  }
 
-    render() {
-        return null;
-    }
-
-    componentWillUnmount() {
-        // Destroy stack loading listeners when we close the viewer
-        this.studyLoadingListener.clear();
-    }
+  componentWillUnmount() {
+    // Destroy stack loading listeners when we close the viewer
+    this.studyLoadingListener.clear();
+  }
 }
 
-
 export default StudyLoadingMonitor;

src/components/StudyPrefetcher.js

@@ -1,30 +1,29 @@
-import { Component } from "react";
-import PropTypes from "prop-types";
+import { Component } from 'react';
+import PropTypes from 'prop-types';
 import OHIF from 'ohif-core';
 
 const { StudyPrefetcher } = OHIF.classes;
 
 class StudyPrefetcherComponent extends Component {
-    static propTypes = {
-        studies: PropTypes.array,
-    };
+  static propTypes = {
+    studies: PropTypes.array,
+  };
 
-    componentDidMount() {
-        const { studies } = this.props;
+  componentDidMount() {
+    const { studies } = this.props;
 
-        this.studyPrefetcher = StudyPrefetcher.getInstance();
-        this.studyPrefetcher.setStudies(studies);
-    }
+    this.studyPrefetcher = StudyPrefetcher.getInstance();
+    this.studyPrefetcher.setStudies(studies);
+  }
 
-    render() {
-        return null;
-    }
+  render() {
+    return null;
+  }
 
-    componentWillUnmount() {
-        // Stop prefetching when we close the viewer
-        this.studyPrefetcher.destroy();
-    }
+  componentWillUnmount() {
+    // Stop prefetching when we close the viewer
+    this.studyPrefetcher.destroy();
+  }
 }
 
-
 export default StudyPrefetcherComponent;