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

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 }}
-            {{>tabContent }}
-        {{/each }}
+        <div role="tabpanel" class="tab-pane" id="viewerTab">
+            <div class="viewerContainer">
+            </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);
-    if (!container) {
-        log.warn('No container present with the contentId: ' + contentId);
-        return;
-    }
+    var container = $('.tab-content').find('#viewerTab').get(0);
 
     // 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');