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

2016-08-04 10:42:34 +02:00
1 parent 1a264f81e5
commit afeb0d82fb
@@ -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
@@ -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

@@ -1,6 +1,8 @@
@import "{design}/app.styl"

 #stageSortingContainer
+  padding: 0 20px
+
  #stageSortable
    .sortable-item
      padding: 3px
@@ -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);
@@ -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">
@@ -30,4 +30,7 @@
    position: absolute
    top: 40%
    width: 100%
+    color: $textSecondaryColor
+    font-size: 30px
+    font-weight: 200
    text-align: center
@@ -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;
+});
@@ -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>
@@ -1,11 +0,0 @@
-@import "{design}/app"
-
-.tab-pane
-  .loadingTextDiv
-    color: $textSecondaryColor
-    font-size: 30px
-    font-weight: 200
-
-  .viewerContainer
-    height: 100%
-    width: 100%
@@ -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}}
@@ -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
@@ -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%
@@ -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>
@@ -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,
@@ -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');
@@ -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');