Creating message and error page to improve error handling

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

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

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

@@ -1,5 +1,6 @@
 import './base';
 import './bootstrap';
+import './pages';
 import './paginationArea';
 import './playground/playground.html';
 import './playground/playground.styl';

Packages/ohif-core/client/components/pages/error/error.html

@@ -0,0 +1,16 @@
+<template name="pageError">
+    {{#section 'pageMessageAfterContent'}}
+        {{#let stack=(choose this.stack this.error.stack)}}
+            {{#if (and shallDisplayErrorStack stack)}}
+                <div class="error-stack">
+                    <p>{{stack}}</p>
+                </div>
+            {{/if}}
+        {{/let}}
+    {{/section}}
+    {{#pageMessage
+        class='page-error'
+        title=(choose this.title this.error.message 'Error')
+        message=(choose this.message this.error.reason getDefaultErrorMessage)
+    }}{{>UI.contentBlock}}{{/pageMessage}}
+</template>

Packages/ohif-core/client/components/pages/error/error.js

@@ -0,0 +1,13 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+
+Template.pageError.helpers({
+    shallDisplayErrorStack() {
+        return Meteor.isDevelopment;
+    },
+
+    getDefaultErrorMessage() {
+        const instance = Template.instance();
+        return instance.view.templateContentBlock ? '' : 'An error has ocurred.';
+    }
+});

Packages/ohif-core/client/components/pages/error/error.styl

@@ -0,0 +1,19 @@
+@require '{ohif:design}/app'
+
+.page-error .error-stack
+  display: table
+  margin-top: 10px
+  table-layout: fixed
+  width: 100%
+
+  p
+    theme('background-color', '$uiGrayDarkest')
+    theme('border', '1px solid $uiGray')
+    border-radius(4px)
+    display: inline-block
+    font-family: monospace
+    margin: 0
+    padding: 10px 20px
+    overflow-x: auto
+    white-space: pre
+    width: 100%

Packages/ohif-core/client/components/pages/error/index.js

@@ -0,0 +1,3 @@
+import './error.html';
+import './error.js';
+import './error.styl';

Packages/ohif-core/client/components/pages/index.js

@@ -0,0 +1,2 @@
+import './error';
+import './message';

Packages/ohif-core/client/components/pages/message/index.js

@@ -0,0 +1,2 @@
+import './message.html';
+import './message.styl';

Packages/ohif-core/client/components/pages/message/message.html

@@ -0,0 +1,9 @@
+<template name="pageMessage">
+    <div class="page-message {{this.class}}">
+        <div class="message-container">
+            <h1 class="message-title">{{choose this.title}}</h1>
+            <p class="message-content">{{choose this.message}}{{>UI.contentBlock}}</p>
+            {{>section 'pageMessageAfterContent'}}
+        </div>
+    </div>
+</template>

Packages/ohif-core/client/components/pages/message/message.styl

@@ -0,0 +1,31 @@
+@require '{ohif:design}/app'
+
+.page-message
+  theme('color', '$textPrimaryColor')
+  font-weight: 300
+  padding: 10px 0 20px
+
+  .message-container
+    display: table
+    margin: 0 auto
+    padding: 0 32px
+
+  .message-title
+    theme('color', '$textSecondaryColor')
+    font-size: 30px
+    font-weight: 300
+
+  .message-content
+    font-size: 18px
+
+  a
+    &, &:hover, &:active, &:focus
+      theme('color', '$activeColor')
+
+.modal .page-message
+
+  .page-message, .message-container
+    padding: 0
+
+  .message-title
+    display: none

Packages/ohif-measurements/client/lib/isNewLesionsMeasurement.js

@@ -11,7 +11,8 @@ OHIF.measurements.isNewLesionsMeasurement = measurementData => {
     if (!measurementData) return;
 
     const { timepointApi, measurementApi } = OHIF.viewer;
-    const { timepointId, toolType } = measurementData;
+    const currentMeasurement = measurementApi.tools.bidirectional.findOne(measurementData._id);
+    const { timepointId, toolType, measurementNumber } = currentMeasurement;
     const toolConfig = OHIF.measurements.getToolConfiguration(toolType);
 
     // Stop here if the needed information is not set
@@ -31,5 +32,5 @@ OHIF.measurements.isNewLesionsMeasurement = measurementData => {
     const numbers = atBaseline.map(m => m.measurementNumber);
 
     // Return true if the measurement number from follow-up is not present at baseline
-    return !_.contains(numbers, measurementData.measurementNumber);
+    return !_.contains(numbers, measurementNumber);
 };

Packages/ohif-studies/imports/client/components/browser/item.js

@@ -101,7 +101,7 @@ Template.studyBrowserItem.helpers({
 
     modalityStyle(modalities) {
         // Responsively styles the Modality Acronyms for studies with more than one modality
-        const numModalities = modalities.split(/\s/g).length;
+        const numModalities = modalities ? modalities.split(/\s/g).length : 1;
 
         if (numModalities === 1) {
             // If we have only one modality, it should take up the whole div