wip on react transition

Packages/ohif-viewerbase/client/components/viewer/LoadingIndicator/LoadingIndicator.js

@@ -0,0 +1,110 @@
+import { Meteor } from 'meteor/meteor';
+import { $ } from 'meteor/jquery';
+import { OHIF } from 'meteor/ohif:core';
+
+import { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import './LoadingIndicator.styl';
+
+Meteor.startup(() => {
+    // This checking is necessary because cornerstoneTools may not have some tools available.
+    // Example: when an app defines its own cornerstone's lib versions, so it
+    // uses only ohif-viewerbase and not ohif-cornerstone and those libs are added later.
+    if (cornerstoneTools.loadHandlerManager) {
+        cornerstoneTools.loadHandlerManager.setStartLoadHandler(startLoadingHandler);
+        cornerstoneTools.loadHandlerManager.setEndLoadHandler(doneLoadingHandler);
+        cornerstoneTools.loadHandlerManager.setErrorLoadingHandler(errorLoadingHandler);
+    }
+});
+
+let loadHandlerTimeout;
+
+const startLoadingHandler = element => {
+    clearTimeout(loadHandlerTimeout);
+    loadHandlerTimeout = setTimeout(() => {
+        console.log('startLoading');
+        const elem = $(element);
+        elem.siblings('.imageViewerErrorLoadingIndicator').css('display', 'none');
+        elem.find('canvas').not('.magnifyTool').addClass('faded');
+        elem.siblings('.imageViewerLoadingIndicator').css('display', 'block');
+    }, OHIF.viewer.loadIndicatorDelay);
+};
+
+const doneLoadingHandler = element => {
+    clearTimeout(loadHandlerTimeout);
+    const elem = $(element);
+    elem.siblings('.imageViewerErrorLoadingIndicator').css('display', 'none');
+    elem.find('canvas').not('.magnifyTool').removeClass('faded');
+    elem.siblings('.imageViewerLoadingIndicator').css('display', 'none');
+};
+
+const errorLoadingHandler = (element, imageId, error, source) => {
+    clearTimeout(loadHandlerTimeout);
+    const elem = $(element);
+
+    // Could probably chain all of these, but this is more readable
+    elem.find('canvas').not('.magnifyTool').removeClass('faded');
+    elem.siblings('.imageViewerLoadingIndicator').css('display', 'none');
+
+    // Don't display errors from the stackPrefetch tool
+    if (source === 'stackPrefetch') {
+        return;
+    }
+
+    const errorLoadingIndicator = elem.siblings('.imageViewerErrorLoadingIndicator');
+    errorLoadingIndicator.css('display', 'block');
+
+    // This is just used to expand upon some error messages that are sent
+    // when things fail. An example is a network error throwing the error
+    // which is only described as "network".
+    const errorDetails = {
+        network: 'A network error has occurred'
+        // We need to expand this further when we see more obscure error messages
+    };
+
+    if (errorDetails.hasOwnProperty(error)) {
+        error = errorDetails[error];
+    }
+
+    errorLoadingIndicator.find('.description').text(`An error has occurred while loading image: ${imageId}`);
+    if (error) {
+        errorLoadingIndicator.find('.details').text(`Details: ${error}`);
+    }
+};
+
+class LoadingIndicator extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        // TODO[react]: Pass this in as a prop reactively
+        //const percentComplete = Session.get('CornerstoneLoadProgress' + this.viewportIndex);
+        let percComplete;
+        if (this.props.percentComplete && this.props.percentComplete !== 100) {
+            percComplete = `${this.props.percentComplete}%`;
+        }
+
+        return (<>
+        <div className="imageViewerLoadingIndicator loadingIndicator">
+            <div className="indicatorContents">
+            <p>Loading... <i className="fa fa-spin fa-circle-o-notch fa-fw"></i> {{percComplete}}</p>
+           </div>
+        </div>
+        <div className="imageViewerErrorLoadingIndicator loadingIndicator">
+            <div className="indicatorContents">
+                    <h4>Error Loading Image</h4>
+                    <p className='description'>An error has occurred.</p>
+                    <p className='details'></p>
+                </div>
+            </div>
+        </>);
+    }
+}
+
+LoadingIndicator.propTypes = {
+    percentComplete: PropTypes.number.isRequired
+};
+
+export default LoadingIndicator;