Creating a generic UI error handling mechanism

Packages/ohif-core/client/components/base/section/section.js

@@ -55,3 +55,7 @@ Template.section.onCreated(() => {
         });
     }
 });
+
+Template.registerHelper('hasSection', sectionName => {
+    return !!OHIF.blaze.getSectionContent(Template.instance().view, sectionName);
+});

Packages/ohif-core/client/components/bootstrap/dialog/form.html

@@ -4,9 +4,23 @@
             {{#form class=(concat 'modal-content ' this.formClass) hideValidationBox=true
                 api=(extend instance.api instance.data.api) schema=this.schema
             }}
+                {{#if or this.title (hasSection 'dialogHeader')}}
                     {{>dialogHeader this}}
+                {{/if}}
                 <div class="modal-body">
-                    {{this.bodyText}}
+                    <div class="messages">
+                        {{#each message in this.messages}}
+                            <div class="message">{{{message}}}</div>
+                        {{else}}
+                            {{#if isError}}
+                                {{>pageError (extend this error=this.details)}}
+                            {{else}}
+                                {{#let message=(choose this.bodyText this.reason this.message 'An error has ocurred.')}}
+                                    <div class="message">{{message}}</div>
+                                {{/let}}
+                            {{/if}}
+                        {{/each}}
+                    </div>
                     {{>UI.contentBlock}}
                 </div>
                 <div class="modal-footer">

Packages/ohif-core/client/components/bootstrap/dialog/form.js

@@ -105,3 +105,10 @@ Template.dialogForm.events({
         }
     }
 });
+
+Template.dialogForm.helpers({
+    isError() {
+        const data = Template.instance().data;
+        return data instanceof Error || (data && data.error instanceof Error);
+    }
+});

Packages/ohif-core/client/components/bootstrap/dialog/header.html

@@ -1,7 +1,7 @@
 <template name="dialogHeader">
     <div class="modal-header">
         {{>section 'dialogHeader'}}
-        {{#if this.title}}
+        {{#if or this.title (hasSection 'dialogHeader')}}
             {{#button class='close' action='cancel'
                 tagAttributes=(extend this.tagAttributes
                     data-dismiss='modal' aria-label='Close'

Packages/ohif-core/client/components/bootstrap/dialog/info.html

@@ -6,7 +6,7 @@
       {{#each message in this.messages}}
         <div class="message">{{{message}}}</div>
       {{else}}
-        {{#if eq this.errorType 'Meteor.Error'}}
+        {{#if isError}}
             {{>pageError (extend this error=this.details)}}
         {{else}}
           {{#let message=(choose this.reason this.message 'An error has ocurred.')}}

Packages/ohif-core/client/components/bootstrap/dialog/info.js

@@ -7,3 +7,10 @@ Template.dialogInfo.onRendered(() => {
 
     $modal.one('hidden.bs.modal', () => instance.data.promiseResolve());
 });
+
+Template.dialogInfo.helpers({
+    isError() {
+        const data = Template.instance().data;
+        return data instanceof Error || (data && data.error instanceof Error);
+    }
+});

Packages/ohif-core/client/ui/handleError.js

@@ -0,0 +1,33 @@
+import { Meteor } from 'meteor/meteor';
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.ui.handleError = error => {
+    let { title, message } = error;
+
+    if (!title) {
+        if (error instanceof Meteor.Error) {
+            title = error.error;
+        } else if (error instanceof Error) {
+            title = error.name;
+        }
+    }
+
+    if (!message) {
+        if (error instanceof Meteor.Error) {
+            message = error.reason;
+        } else if (error instanceof Error) {
+            message = error.message;
+        }
+    }
+
+    const data = Object.assign({
+        title,
+        message,
+        class: 'themed',
+        hideConfirm: true,
+        cancelLabel: 'Dismiss',
+        cancelClass: 'btn-secondary'
+    }, error || {});
+
+    OHIF.ui.showDialog('dialogForm', data);
+};

Packages/ohif-core/client/ui/index.js

@@ -10,4 +10,5 @@ import './notifications/notifications.js';
 import './popover/display.js';
 import './resizable/resizable.js';
 import './unsavedChanges/unsavedChanges.js';
+import './handleError.js';
 import './styleProperty.js';

Packages/ohif-hotkeys/client/classes/HotkeysManager.js

@@ -81,7 +81,7 @@ export class HotkeysManager {
     load(contextName) {
         return new Promise((resolve, reject) => {
             const context = this.getContext(contextName);
-            if (!context) return;
+            if (!context) return reject();
             this.retrieve(contextName).then(defs => {
                 const definitions = defs || this.defaults[contextName];
                 if (!definitions) {
@@ -151,6 +151,6 @@ export class HotkeysManager {
 
         this.currentContextName = contextName;
         newContext.initialize();
-        this.load(contextName);
+        this.load(contextName).catch(() => {});
     }
 }

Packages/ohif-measurements/client/components/caseProgress/radialProgressBar/radialProgressBar.styl

@@ -5,7 +5,8 @@ $circleSize = 26px
 .radialProgress
   border-radius: 100%
   height: $circleSize
-  margin-top: 8px
+  margin-top: 3px
+  margin-right: 4px
   position: relative
   vendorize(box-shadow, 0 0 1em black)
   width: $circleSize

Packages/ohif-measurements/client/components/longitudinal/index.js

@@ -6,5 +6,6 @@ import './longitudinalStudyListStudy/longitudinalStudyListStudy.js';
 import './longitudinalViewportOverlay/imageViewportIcons.html';
 import './longitudinalViewportOverlay/longitudinalViewportOverlay.html';
 import './longitudinalViewportOverlay/longitudinalViewportOverlay.js';
+import './longitudinalViewportOverlay/longitudinalViewportOverlay.styl';
 
 import './dropdown.js';

Packages/ohif-measurements/client/components/longitudinal/longitudinalViewportOverlay/longitudinalViewportOverlay.html

@@ -7,7 +7,7 @@
                 <div>{{getGenderAndAge}}</div>
                 <div class="icons-section">
                     {{#if linked}}
-                        <svg>
+                        <svg class="icon-link">
                             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-viewport-link"}}></use>
                         </svg>
                     {{/if}}
@@ -18,7 +18,7 @@
                 <div>{{seriesDescription}}</div>
                 <div>{{studyInfo 'AccessionNumber'}}</div>
                 <div>{{formatDA (studyInfo 'AcquisitionDate')}} {{formatTM (studyInfo 'AcquisitionTime')}}</div>
-                <div>{{#if seriesNumber}}S: {{seriesNumber}}{{#if gt numImages 1}},{{/if}} {{/if}}{{#if gt instanceNumber 0}}I: {{instanceNumber}} {{/if}}{{#if gt numImages 1}}({{imageIndex}}/{{numImages}}){{/if}}</div>
+                <div>{{#if seriesNumber}}S: {{seriesNumber}}{{#if gt numImages 1}},{{/if}} {{/if}}{{#if gt numImages 1}}I: {{imageIndex}}/{{numImages}}{{/if}}</div>
                 <div class='timepointName'>{{timepointName}}</div>
             </div>
             <div class="bottomright dicomTag">

Packages/ohif-measurements/client/components/longitudinal/longitudinalViewportOverlay/longitudinalViewportOverlay.styl

@@ -0,0 +1,4 @@
+@require '{ohif:design}/app'
+
+.imageViewerViewportOverlay .icons-section .icon-link
+  transform(translateY(3px))