Fix Viewer opening bugs in OHIF Viewer (OHIF-49)

LesionTracker/client/routes.js

@@ -3,16 +3,6 @@ Session.setDefault('ViewerData', {});
 // verifyEmail controls whether emailVerification template will be rendered or not
 var verifyEmail = Meteor.settings && Meteor.settings.public && Meteor.settings.public.verifyEmail || false;
 
-// Re-add any tab data saved in the Session
-Object.keys(ViewerData).forEach(function(contentId) {
-    var tabData = ViewerData[contentId];
-    var data = {
-        title: tabData.title,
-        contentid: tabData.contentid
-    };
-    WorklistTabs.insert(data);
-});
-
 Router.configure({
     layoutTemplate: 'layout',
     loadingTemplate: 'layout'

OHIFViewer/client/components/flexboxLayout/flexboxLayout.js

@@ -2,6 +2,7 @@ Template.flexboxLayout.events({
     'transitionend .sidebarMenu'() {
         handleResize();
     },
+
     'transitionend .sidebar-option'(event) {
         // Prevent this event from bubbling
         event.stopPropagation();

OHIFViewer/client/components/ohifViewer/ohifViewer.js

@@ -1,5 +1,7 @@
 const worklistContentId = 'worklistTab';
-const viewerContentId = 'viewerTab';
+let lastContentId;
+
+// Test
 
 // Define the ViewerData global object
 // If there is currently any Session data for this object,
@@ -15,7 +17,7 @@ Template.ohifViewer.events({
         if (contentId !== worklistContentId) {
             switchToTab(worklistContentId);
         } else {
-            switchToTab(viewerContentId);
+            switchToTab(lastContentId);
         }
     }
 });
@@ -23,6 +25,7 @@ Template.ohifViewer.events({
 Template.ohifViewer.helpers({
     studyListToggleText() {
         const contentId = Session.get('activeContentId');
+        Session.get('ViewerData');
 
         // If the Viewer has not been opened yet, 'Back to viewer' should
         // not be displayed
@@ -34,6 +37,7 @@ Template.ohifViewer.helpers({
         if (contentId === worklistContentId) {
             return 'Back to viewer';
         } else {
+            lastContentId = contentId;
             return 'Study list';
         }
     },

OHIFViewer/client/components/viewer/viewer.js

@@ -1,5 +1,7 @@
 import { OHIF } from 'meteor/ohif:core';
 
+//test2
+
 OHIF.viewer = OHIF.viewer || {};
 OHIF.viewer.loadIndicatorDelay = 500;
 OHIF.viewer.defaultTool = 'wwwc';
@@ -35,9 +37,7 @@ Template.viewer.onCreated(() => {
 
     if (ViewerData[contentId] && ViewerData[contentId].loadedSeriesData) {
         log.info('Reloading previous loadedSeriesData');
-
         OHIF.viewer.loadedSeriesData = ViewerData[contentId].loadedSeriesData;
-
     } else {
         log.info('Setting default ViewerData');
         OHIF.viewer.loadedSeriesData = {};
@@ -48,7 +48,6 @@ Template.viewer.onCreated(() => {
         ViewerData[contentId].viewportColumns = 1;
         ViewerData[contentId].viewportRows = 1;
         ViewerData[contentId].activeViewport = 0;
-        Session.set('ViewerData', ViewerData);
     }
 
     Session.set('activeViewport', ViewerData[contentId].activeViewport || 0);
@@ -56,10 +55,14 @@ Template.viewer.onCreated(() => {
     // Update the ViewerStudies collection with the loaded studies
     ViewerStudies.remove({});
 
+    ViewerData[contentId].studyInstanceUids = [];
     instance.data.studies.forEach(study => {
         study.selected = true;
         ViewerStudies.insert(study);
+        ViewerData[contentId].studyInstanceUids.push(study.studyInstanceUid);
     });
+
+    Session.set('ViewerData', ViewerData);
 });
 
 Template.viewer.events({

OHIFViewer/client/components/viewer/viewer.styl

@@ -8,4 +8,9 @@
   height: 100%
   width: 100%
   margin: 0
-  padding: 0
+  padding: 0
+
+.loadingTextDiv
+  color: $textSecondaryColor
+  font-size: 30px
+  font-weight: 200

Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.js

@@ -92,6 +92,7 @@ Template.protocolEditor.helpers({
         // If no ProtocolEngine, protocol, or stage is defined, stop here
         if (!ProtocolEngine ||
             !ProtocolEngine.protocol ||
+            !ProtocolEngine.layoutManager ||
             ProtocolEngine.stage === undefined) {
             return;
         }
@@ -105,8 +106,8 @@ Template.protocolEditor.helpers({
         // Update active Stage's layout template and properties based on the displayed
         // layout properties. This is used to update the Stage Model when the user modifies
         // the layout in the viewer
-        stage.viewportStructure.layoutTemplateName = layoutManager.layoutTemplateName;
+        stage.viewportStructure.layoutTemplateName = ProtocolEngine.layoutManager.layoutTemplateName;
-        stage.viewportStructure.properties = layoutManager.layoutProps;
+        stage.viewportStructure.properties = ProtocolEngine.layoutManager.layoutProps;
 
         // If there is a discrepancy between the Stage's number of viewports and the
         // the number of required viewports given the properties above, rectify it

Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl

@@ -5,7 +5,7 @@ $height = 20px
 #protocolEditor
   height: 100%
   width: 450px
-  padding: 10px
+  padding: 10px 0
   position: absolute
   top: 0
   background: $primaryBackgroundColor
@@ -84,6 +84,8 @@ $height = 20px
     position: absolute
     bottom: 0
     width: 100%
+    margin-bottom: 0
+    background: $uiGrayDarker
 
     p
       font-size: 8pt
@@ -98,7 +100,7 @@ $height = 20px
     padding-left: 20px
     margin-right: -16px
     width: 100%
-    height: calc(100% - 120px)
+    height: calc(100% - 50px)
     &::-webkit-scrollbar
       display: none
 

Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl

@@ -1,6 +1,8 @@
 @import "{design}/app.styl"
 
 #stageSortingContainer
+  padding: 0 20px
+
   #stageSortable
     .sortable-item
       padding: 3px

Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.js

@@ -45,9 +45,9 @@ Template.layoutChooser.events({
             columns: columnIndex + 1
         };
 
-        layoutManager.layoutTemplateName = 'gridLayout';
+        window.layoutManager.layoutTemplateName = 'gridLayout';
-        layoutManager.layoutProps = layoutProps;
+        window.layoutManager.layoutProps = layoutProps;
-        layoutManager.updateViewports();
+        window.layoutManager.updateViewports();
 
         const $dropdown = $('.layoutChooser');
         toggleDialog($dropdown);

Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.html

@@ -1,7 +1,7 @@
 <template name="loadingIndicator">
     <div class="imageViewerLoadingIndicator loadingIndicator">
         <div class="indicatorContents">
-            <p>Loading... {{percentComplete}}</p>
+            <p>Loading... <i class="fa fa-spin fa-circle-o-notch fa-fw"></i> {{percentComplete}}</p>
         </div>
     </div>
     <div class="imageViewerErrorLoadingIndicator loadingIndicator">

Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl

@@ -30,4 +30,7 @@
     position: absolute
     top: 40%
     width: 100%
+    color: $textSecondaryColor
+    font-size: 30px
+    font-weight: 200
     text-align: center

Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.js

@@ -10,7 +10,7 @@ Template.viewerMain.onRendered(() => {
     const instance = Template.instance();
 
     const studies = instance.data.studies;
-    const parentElement = instance.$("#layoutManagerTarget").get(0);
+    const parentElement = instance.$('#layoutManagerTarget').get(0);
     window.layoutManager = new LayoutManager(parentElement, studies);
 
     ProtocolEngine = new HP.ProtocolEngine(window.layoutManager, studies);
@@ -26,4 +26,7 @@ Template.viewerMain.onDestroyed(() => {
 
     // Destroy the synchronizer used to update reference lines
     OHIF.viewer.updateImageSynchronizer.destroy();
-});
+
+    delete window.layoutManager;
+    delete ProtocolEngine;
+});

Packages/worklist/client/components/tabContent/tabContent.html

@@ -1,10 +0,0 @@
-<template name="tabContent">
-    <div role="tabpanel" class="tab-pane {{active}}" id="{{contentid}}">
-        {{>loadingText}}
-        <div class="viewerContainer">
-            <!-- This extra viewerContainer div only exists to be destroyed when switching tabs.
-            It is a workaround because Meteor's onDestroyed and destruction handlers don't fire
-            when removing the actual template from the DOM.-->
-        </div>
-    </div>
-</template>

Packages/worklist/client/components/tabContent/tabContent.styl

@@ -1,11 +0,0 @@
-@import "{design}/app"
-
-.tab-pane
-  .loadingTextDiv
-    color: $textSecondaryColor
-    font-size: 30px
-    font-weight: 200
-
-  .viewerContainer
-    height: 100%
-    width: 100%

Packages/worklist/client/components/worklist.html

@@ -5,9 +5,11 @@
                 {{> worklistResult }}
             </div>
         </div>
-        {{#each worklistTabs }}
+        <div role="tabpanel" class="tab-pane" id="viewerTab">
-            {{>tabContent }}
+            <div class="viewerContainer">
-        {{/each }}
+            </div>
+        </div>
+        {{>loadingText}}
     </div>
     {{#each additionalTemplates}}
         {{> UI.dynamic template=this}}

Packages/worklist/client/components/worklist.js

@@ -19,7 +19,6 @@ WorklistTabs._debugName = 'WorklistTabs';
 WorklistStudies = new Meteor.Collection(null);
 WorklistStudies._debugName = 'WorklistStudies';
 
-
 Session.setDefault('activeContentId', 'worklistTab');
 
 Template.worklist.onRendered(() => {
@@ -32,7 +31,7 @@ Template.worklist.onRendered(() => {
         // switch to that now.
         console.log('worklist onRendered');
         const contentId = Session.get('activeContentId');
-        if (contentId !== 'worklistTab') {
+        if (contentId !== 'worklistTab' && ViewerData && ViewerData[contentId]) {
             switchToTab(contentId);
         }
     }
@@ -40,16 +39,6 @@ Template.worklist.onRendered(() => {
     Meteor.subscribe('hangingprotocols');
 });
 
-Template.worklist.helpers({
-    /**
-     * Returns the current set of Worklist Tabs
-     * @returns Meteor.Collection The current state of the WorklistTabs Collection
-     */
-    worklistTabs() {
-        return WorklistTabs.find();
-    }
-});
-
 Template.worklist.events({
     'click #tablist a[data-toggle="tab"]': function(e) {
         // If this tab is already active, do nothing

Packages/worklist/client/components/worklist.styl

@@ -1,15 +1,17 @@
+@import "{design}/app"
+
 body
-  background-color: black
+  background-color: $primaryBackgroundColor
 
 #tblStudyList
   tr
     height: 20px
 
 #worklistTab
-  background-color: black
+  background-color: $primaryBackgroundColor
 
 .worklistContainer
-  background-color: black
+  background-color: $primaryBackgroundColor
   margin: 0 auto
   color: white
         
@@ -17,6 +19,15 @@ body
   width: 100%
   height: calc(100% - 91px)
 
+  .loadingTextDiv
+    color: $textSecondaryColor
+    font-size: 30px
+    font-weight: 200
+
   .tab-pane
     width: 100%
-    height: 100%
+    height: 100%
+
+    .viewerContainer
+      height: 100%
+      width: 100%

Packages/worklist/client/components/worklistResult/worklistResult.html

@@ -94,10 +94,10 @@
         </table>
         {{#if session "showLoadingText"}}
             {{>loadingText}}
+        {{ else }}
+            {{#unless numberOfStudies}}
+                <div class="notFound">No matching results</div>
+            {{/unless}}
         {{/if}}
-
-        {{#unless numberOfStudies}}
-            <div class="notFound">No matching results</div>
-        {{/unless}}
     </div>
 </template>

Packages/worklist/client/lib/openNewTab.js

@@ -13,14 +13,6 @@ openNewTab = function(studyInstanceUid, title) {
     // then it will change after hot-reloading.
     var contentid = uuid.new();
 
-    // Create a new entry in the WorklistTabs Collection
-    WorklistTabs.insert({
-        title: title,
-        contentid: contentid,
-        studyInstanceUid: studyInstanceUid,
-        active: false
-    });
-
     // Update the ViewerData global object
     ViewerData[contentid] = {
         title: title,

Packages/worklist/client/lib/switchToTab.js

@@ -15,7 +15,12 @@ switchToTab = function(contentId) {
     $('.tabTitle a[data-target="#' + contentId + '"]').addClass('active');
 
     $('.tab-content .tab-pane').removeClass('active');
-    $('.tab-content .tab-pane#' + contentId).addClass('active');
+    if (contentId !== 'worklistTab') {
+        $('.tab-content .tab-pane#viewerTab').addClass('active');
+    } else {
+        $('.tab-content .tab-pane#' + contentId).addClass('active');
+    }
+    
 
     // Remove any previous Viewers from the DOM
     $('.viewerContainer').remove();
@@ -97,11 +102,7 @@ function viewStudiesInTab(contentId, studies) {
 
     // Get tab content container given the contentId string
     // If no such container exists, stop here because something is wrong
-    var container = $('.tab-content').find('#' + contentId).get(0);
+    var container = $('.tab-content').find('#viewerTab').get(0);
-    if (!container) {
-        log.warn('No container present with the contentId: ' + contentId);
-        return;
-    }
 
     // Remove the loading text template that is inside the tab container by default
     var viewerContainer = document.createElement('div');

Packages/worklist/package.js

@@ -46,9 +46,6 @@ Package.onUse(function (api) {
     api.addFiles('client/components/tabTitle/tabTitle.js', 'client');
     api.addFiles('client/components/tabTitle/tabTitle.styl', 'client');
 
-    api.addFiles('client/components/tabContent/tabContent.html', 'client');
-    api.addFiles('client/components/tabContent/tabContent.styl', 'client');
-
     api.addFiles('client/components/worklistStudy/worklistStudy.html', 'client');
     api.addFiles('client/components/worklistStudy/worklistStudy.js', 'client');
     api.addFiles('client/components/worklistStudy/worklistStudy.styl', 'client');