From afeb0d82fbb7862af663d7640aa6cffa193d0257 Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Thu, 4 Aug 2016 10:42:34 +0200
Subject: [PATCH] Fix Viewer opening bugs in OHIF Viewer (OHIF-49)

---
 LesionTracker/client/routes.js                | 10 ----------
 .../components/flexboxLayout/flexboxLayout.js |  1 +
 .../components/ohifViewer/ohifViewer.js       |  8 ++++++--
 OHIFViewer/client/components/viewer/viewer.js |  9 ++++++---
 .../client/components/viewer/viewer.styl      |  7 ++++++-
 .../protocolEditor/protocolEditor.js          |  5 +++--
 .../protocolEditor/protocolEditor.styl        |  6 ++++--
 .../stageSortable/stageSortable.styl          |  2 ++
 .../viewer/layoutChooser/layoutChooser.js     |  6 +++---
 .../loadingIndicator/loadingIndicator.html    |  2 +-
 .../loadingIndicator/loadingIndicator.styl    |  3 +++
 .../viewer/viewerMain/viewerMain.js           |  7 +++++--
 .../components/tabContent/tabContent.html     | 10 ----------
 .../components/tabContent/tabContent.styl     | 11 -----------
 .../worklist/client/components/worklist.html  |  8 +++++---
 .../worklist/client/components/worklist.js    | 13 +------------
 .../worklist/client/components/worklist.styl  | 19 +++++++++++++++----
 .../worklistResult/worklistResult.html        |  8 ++++----
 Packages/worklist/client/lib/openNewTab.js    |  8 --------
 Packages/worklist/client/lib/switchToTab.js   | 13 +++++++------
 Packages/worklist/package.js                  |  3 ---
 21 files changed, 72 insertions(+), 87 deletions(-)
 delete mode 100644 Packages/worklist/client/components/tabContent/tabContent.html
 delete mode 100644 Packages/worklist/client/components/tabContent/tabContent.styl

diff --git a/LesionTracker/client/routes.js b/LesionTracker/client/routes.js
index ff9086f20..04516d6d3 100644
--- a/LesionTracker/client/routes.js
+++ b/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'
diff --git a/OHIFViewer/client/components/flexboxLayout/flexboxLayout.js b/OHIFViewer/client/components/flexboxLayout/flexboxLayout.js
index 80fedd635..371141628 100644
--- a/OHIFViewer/client/components/flexboxLayout/flexboxLayout.js
+++ b/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();
diff --git a/OHIFViewer/client/components/ohifViewer/ohifViewer.js b/OHIFViewer/client/components/ohifViewer/ohifViewer.js
index 8519fbea7..bd5af0ac8 100644
--- a/OHIFViewer/client/components/ohifViewer/ohifViewer.js
+++ b/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';
         }
     },
diff --git a/OHIFViewer/client/components/viewer/viewer.js b/OHIFViewer/client/components/viewer/viewer.js
index 1d140ef5d..8af6dccbc 100644
--- a/OHIFViewer/client/components/viewer/viewer.js
+++ b/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({
diff --git a/OHIFViewer/client/components/viewer/viewer.styl b/OHIFViewer/client/components/viewer/viewer.styl
index 412d64074..9b7b84b21 100644
--- a/OHIFViewer/client/components/viewer/viewer.styl
+++ b/OHIFViewer/client/components/viewer/viewer.styl
@@ -8,4 +8,9 @@
   height: 100%
   width: 100%
   margin: 0
-  padding: 0
\ No newline at end of file
+  padding: 0
+
+.loadingTextDiv
+  color: $textSecondaryColor
+  font-size: 30px
+  font-weight: 200
\ No newline at end of file
diff --git a/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.js b/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.js
index 7c79b8809..78523bee7 100644
--- a/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.js
+++ b/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.properties = layoutManager.layoutProps;
+        stage.viewportStructure.layoutTemplateName = ProtocolEngine.layoutManager.layoutTemplateName;
+        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
diff --git a/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl b/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl
index df0d5f262..48d3abd6e 100644
--- a/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl
+++ b/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
 
diff --git a/Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl b/Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl
index e1a3713be..c283529ef 100644
--- a/Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl
+++ b/Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl
@@ -1,6 +1,8 @@
 @import "{design}/app.styl"
 
 #stageSortingContainer
+  padding: 0 20px
+
   #stageSortable
     .sortable-item
       padding: 3px
diff --git a/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.js b/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.js
index 2ac2f6e58..98421c769 100644
--- a/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.js
+++ b/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.js
@@ -45,9 +45,9 @@ Template.layoutChooser.events({
             columns: columnIndex + 1
         };
 
-        layoutManager.layoutTemplateName = 'gridLayout';
-        layoutManager.layoutProps = layoutProps;
-        layoutManager.updateViewports();
+        window.layoutManager.layoutTemplateName = 'gridLayout';
+        window.layoutManager.layoutProps = layoutProps;
+        window.layoutManager.updateViewports();
 
         const $dropdown = $('.layoutChooser');
         toggleDialog($dropdown);
diff --git a/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.html b/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.html
index c6855124e..bf01c5656 100644
--- a/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.html
+++ b/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">
diff --git a/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl b/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl
index a659abb8c..de4682ea9 100644
--- a/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl
+++ b/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
\ No newline at end of file
diff --git a/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.js b/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.js
index afbd2fd48..e0b8cc864 100644
--- a/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.js
+++ b/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();
-});
\ No newline at end of file
+
+    delete window.layoutManager;
+    delete ProtocolEngine;
+});
diff --git a/Packages/worklist/client/components/tabContent/tabContent.html b/Packages/worklist/client/components/tabContent/tabContent.html
deleted file mode 100644
index 5d1eb1246..000000000
--- a/Packages/worklist/client/components/tabContent/tabContent.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/Packages/worklist/client/components/tabContent/tabContent.styl b/Packages/worklist/client/components/tabContent/tabContent.styl
deleted file mode 100644
index 2a1b4fe97..000000000
--- a/Packages/worklist/client/components/tabContent/tabContent.styl
+++ /dev/null
@@ -1,11 +0,0 @@
-@import "{design}/app"
-
-.tab-pane
-  .loadingTextDiv
-    color: $textSecondaryColor
-    font-size: 30px
-    font-weight: 200
-
-  .viewerContainer
-    height: 100%
-    width: 100%
\ No newline at end of file
diff --git a/Packages/worklist/client/components/worklist.html b/Packages/worklist/client/components/worklist.html
index 9615cfafd..f8c6dfdf2 100644
--- a/Packages/worklist/client/components/worklist.html
+++ b/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}}
diff --git a/Packages/worklist/client/components/worklist.js b/Packages/worklist/client/components/worklist.js
index a0080d5ee..39ee7bca2 100644
--- a/Packages/worklist/client/components/worklist.js
+++ b/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
diff --git a/Packages/worklist/client/components/worklist.styl b/Packages/worklist/client/components/worklist.styl
index 34361ff9c..ccd8eb337 100644
--- a/Packages/worklist/client/components/worklist.styl
+++ b/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%
\ No newline at end of file
+    height: 100%
+
+    .viewerContainer
+      height: 100%
+      width: 100%
\ No newline at end of file
diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.html b/Packages/worklist/client/components/worklistResult/worklistResult.html
index 80bd352d7..3fe695877 100644
--- a/Packages/worklist/client/components/worklistResult/worklistResult.html
+++ b/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>
\ No newline at end of file
diff --git a/Packages/worklist/client/lib/openNewTab.js b/Packages/worklist/client/lib/openNewTab.js
index a6847fc01..02f721150 100644
--- a/Packages/worklist/client/lib/openNewTab.js
+++ b/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,
diff --git a/Packages/worklist/client/lib/switchToTab.js b/Packages/worklist/client/lib/switchToTab.js
index 2e6001850..9158c1f32 100644
--- a/Packages/worklist/client/lib/switchToTab.js
+++ b/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');
diff --git a/Packages/worklist/package.js b/Packages/worklist/package.js
index 10a2b62a2..cba14a0f6 100644
--- a/Packages/worklist/package.js
+++ b/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');