From bde625a961bff240c7c8325bed85cf2e4a726ca6 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Tue, 24 Oct 2017 14:20:57 -0200
Subject: [PATCH] Allowing lazy-loading on viewer

---
 .../client/components/viewer/viewer.js        |  2 +-
 .../timepointBrowser/quickSwitch.html         |  2 +-
 .../timepointBrowser/quickSwitch.js           | 12 ++++-
 .../client/components/browser/index.js        |  1 +
 .../client/components/browser/item.html       | 20 +++++----
 .../imports/client/components/browser/item.js | 44 ++++++++++++++++---
 .../client/components/browser/list.html       |  2 +-
 .../imports/client/components/browser/list.js | 11 +++++
 .../client/components/browser/list.styl       |  5 ++-
 .../client/components/browser/series.html     |  2 +-
 .../client/components/browser/series.js       | 33 ++++++++++++--
 .../imports/client/lib/loadStudy.js           | 17 +++++++
 .../imageViewerViewport.js                    | 24 ++++++++--
 .../seriesQuickSwitch/seriesQuickSwitch.html  |  4 +-
 .../seriesQuickSwitch/seriesQuickSwitch.js    | 24 ++++++++--
 15 files changed, 167 insertions(+), 36 deletions(-)
 create mode 100644 Packages/ohif-studies/imports/client/components/browser/list.js

diff --git a/LesionTracker/client/components/viewer/viewer.js b/LesionTracker/client/components/viewer/viewer.js
index 2aa93c919..ed93d67e8 100644
--- a/LesionTracker/client/components/viewer/viewer.js
+++ b/LesionTracker/client/components/viewer/viewer.js
@@ -111,7 +111,7 @@ Template.viewer.onCreated(() => {
         const studyMetadata = new OHIF.metadata.StudyMetadata(study, study.studyInstanceUid);
         let displaySets = study.displaySets;
 
-        if(!study.displaySets) {
+        if (!study.displaySets) {
             displaySets = OHIF.viewerbase.sortingManager.getDisplaySets(studyMetadata);
             study.displaySets = displaySets;
         }
diff --git a/Packages/ohif-lesiontracker/client/components/timepointBrowser/quickSwitch.html b/Packages/ohif-lesiontracker/client/components/timepointBrowser/quickSwitch.html
index 99e11f257..4432f66e0 100644
--- a/Packages/ohif-lesiontracker/client/components/timepointBrowser/quickSwitch.html
+++ b/Packages/ohif-lesiontracker/client/components/timepointBrowser/quickSwitch.html
@@ -1,6 +1,6 @@
 <template name="timepointBrowserQuickSwitch">
     {{>timepointBrowserList (extend timepointBrowserData)}}
     {{#if instance.hasAdditional.get}}
-        <div class='study-item-box additional'>Show additional timepoints</div>
+        <div class="study-item-box additional">Show additional timepoints</div>
     {{/if}}
 </template>
diff --git a/Packages/ohif-lesiontracker/client/components/timepointBrowser/quickSwitch.js b/Packages/ohif-lesiontracker/client/components/timepointBrowser/quickSwitch.js
index 52949ed90..1a67c39ec 100644
--- a/Packages/ohif-lesiontracker/client/components/timepointBrowser/quickSwitch.js
+++ b/Packages/ohif-lesiontracker/client/components/timepointBrowser/quickSwitch.js
@@ -27,7 +27,17 @@ Template.timepointBrowserQuickSwitch.onCreated(() => {
     instance.autorun(() => {
         OHIF.viewerbase.layoutManager.observer.depend();
         const viewportData = OHIF.viewerbase.layoutManager.viewportData[viewportIndex];
-        instance.updateSelectedTimepoint(viewportData.studyInstanceUid);
+        let { studyInstanceUid } = viewportData;
+        if (!studyInstanceUid) {
+            Tracker.nonreactive(() => {
+                const currentStudy = instance.data.currentStudy.get();
+                if (currentStudy) {
+                    studyInstanceUid = currentStudy.studyInstanceUid;
+                }
+            });
+        }
+
+        instance.updateSelectedTimepoint(studyInstanceUid);
     });
 
     instance.autorun(() => {
diff --git a/Packages/ohif-studies/imports/client/components/browser/index.js b/Packages/ohif-studies/imports/client/components/browser/index.js
index 5474d5ef4..2a30567a8 100644
--- a/Packages/ohif-studies/imports/client/components/browser/index.js
+++ b/Packages/ohif-studies/imports/client/components/browser/index.js
@@ -1,6 +1,7 @@
 import './item.html';
 import './item.js';
 import './list.html';
+import './list.js';
 import './list.styl';
 import './quickSwitch.html';
 import './quickSwitch.js';
diff --git a/Packages/ohif-studies/imports/client/components/browser/item.html b/Packages/ohif-studies/imports/client/components/browser/item.html
index 8eff95a84..03bb520c6 100644
--- a/Packages/ohif-studies/imports/client/components/browser/item.html
+++ b/Packages/ohif-studies/imports/client/components/browser/item.html
@@ -4,18 +4,20 @@
             {{#if isLoading}}
                 {{>loadingText}}
             {{/if}}
-            <div class="study-item-box">
-                <div class="study-modality">
-                    <div class="study-modality-text" style="{{modalityStyle}}">{{instance.modalities}}</div>
+            {{#let studyData=instance.studyData.get}}
+                <div class="study-item-box">
+                    <div class="study-modality">
+                        <div class="study-modality-text" style="{{modalityStyle studyData.modalities}}">{{studyData.modalities}}</div>
+                    </div>
+                    <div class="study-text">
+                        <div class="study-date">{{formatDA studyData.studyDate 'D-MMM-YYYY'}}</div>
+                        <div class="study-description">{{studyData.studyDescription}}</div>
+                    </div>
                 </div>
-                <div class="study-text">
-                    <div class="study-date">{{formatDA this.studyInformation.studyDate 'D-MMM-YYYY'}}</div>
-                    <div class="study-description">{{this.studyInformation.studyDescription}}</div>
-                </div>
-            </div>
+            {{/let}}
         </div>
         {{#if this.studyChildTemplate}}
-            {{#if and (not isLoading) instance.loaded}}
+            {{#if and (not isLoading) instance.studyData.get instance.loaded}}
                 {{>Template.dynamic template=this.studyChildTemplate data=(clone this)}}
             {{/if}}
         {{/if}}
diff --git a/Packages/ohif-studies/imports/client/components/browser/item.js b/Packages/ohif-studies/imports/client/components/browser/item.js
index 6d8cc0d46..275777809 100644
--- a/Packages/ohif-studies/imports/client/components/browser/item.js
+++ b/Packages/ohif-studies/imports/client/components/browser/item.js
@@ -7,12 +7,42 @@ import { OHIF } from 'meteor/ohif:core';
 
 Template.studyBrowserItem.onCreated(() => {
     const instance = Template.instance();
+    const { studyInformation } = instance.data;
+    const { studyInstanceUid } = studyInformation;
 
     instance.loaded = false;
     instance.loading = new ReactiveVar(false);
 
-    const modalities = instance.data.studyInformation.modalities || 'UN';
-    instance.modalities = _.uniq(modalities.split(/[^A-Za-z]+/g)).join(' ');
+    instance.studyData = new ReactiveVar(studyInformation);
+
+    instance.studyMetadata = null;
+    instance.getStudyMetadata = () => {
+        instance.loading.dep.depend();
+
+        if (!instance.studyMetadata) {
+            instance.studyMetadata = OHIF.viewer.Studies.findBy({ studyInstanceUid }) || null;
+        }
+
+        return instance.studyMetadata;
+    };
+
+    instance.autorun(() => {
+        const instance = Template.instance();
+
+        OHIF.studies.loadedDict.get(studyInstanceUid);
+        const studyMetadata = instance.getStudyMetadata();
+        if (studyMetadata) {
+            const firstInstance = studyMetadata.getFirstInstance();
+            instance.studyData.set({
+                studyDate: firstInstance.getRawValue('x00080020') || '',
+                studyDescription: firstInstance.getRawValue('x00081030') || '',
+                modalities: firstInstance.getRawValue('x00080060') || '',
+            });
+
+            instance.loaded = true;
+            instance.loading.set(false);
+        }
+    });
 });
 
 Template.studyBrowserItem.events({
@@ -49,10 +79,14 @@ Template.studyBrowserItem.helpers({
         return Template.instance().loading.get();
     },
 
-    modalityStyle() {
+    modalitiesText(modalities) {
+        const text = modalities || 'UN';
+        return _.uniq(text.split(/[^A-Za-z]+/g)).join(' ');
+    },
+
+    modalityStyle(modalities) {
         // Responsively styles the Modality Acronyms for studies with more than one modality
-        const instance = Template.instance();
-        const numModalities = instance.modalities.split(/\s/g).length;
+        const numModalities = modalities.split(/\s/g).length;
 
         if (numModalities === 1) {
             // If we have only one modality, it should take up the whole div
diff --git a/Packages/ohif-studies/imports/client/components/browser/list.html b/Packages/ohif-studies/imports/client/components/browser/list.html
index 0afac4dda..d17bfaa44 100644
--- a/Packages/ohif-studies/imports/client/components/browser/list.html
+++ b/Packages/ohif-studies/imports/client/components/browser/list.html
@@ -1,6 +1,6 @@
 <template name="studyBrowserList">
     <div class="study-browser-list {{this.class}}">
-        {{#each studyInformation in studiesInformation}}
+        {{#each studyInformation in getStudiesInformation}}
             {{>studyBrowserItem (clone this studyInformation=studyInformation)}}
         {{/each}}
     </div>
diff --git a/Packages/ohif-studies/imports/client/components/browser/list.js b/Packages/ohif-studies/imports/client/components/browser/list.js
new file mode 100644
index 000000000..d7e91a835
--- /dev/null
+++ b/Packages/ohif-studies/imports/client/components/browser/list.js
@@ -0,0 +1,11 @@
+import { Template } from 'meteor/templating';
+
+Template.studyBrowserList.helpers({
+    getStudiesInformation() {
+        const instance = Template.instance();
+        const { studiesInformation } = instance.data;
+        const result = new Map();
+        studiesInformation.forEach(item => result.set(item.studyInstanceUid, item));
+        return Array.from(result.values());
+    }
+});
diff --git a/Packages/ohif-studies/imports/client/components/browser/list.styl b/Packages/ohif-studies/imports/client/components/browser/list.styl
index 700f45ec6..7e2011cf5 100644
--- a/Packages/ohif-studies/imports/client/components/browser/list.styl
+++ b/Packages/ohif-studies/imports/client/components/browser/list.styl
@@ -33,7 +33,8 @@ $spacerY = 12px
       height: 100%
       left: 0
       opacity: 0.75
-      right: 16px
+      top: 0
+      width: 100%
 
     .study-item-box
       opacity: 0.2
@@ -72,7 +73,7 @@ $spacerY = 12px
   padding: $spacerY $spacerX ($spacerY - 1)
   position: relative
   transition($sidebarTransition)
-  z-index: 1
+  z-index: 0
 
   &:hover
     background-color: $boxHoverBackgroundColor
diff --git a/Packages/ohif-studies/imports/client/components/browser/series.html b/Packages/ohif-studies/imports/client/components/browser/series.html
index 8bd48c8bf..b685acb52 100644
--- a/Packages/ohif-studies/imports/client/components/browser/series.html
+++ b/Packages/ohif-studies/imports/client/components/browser/series.html
@@ -2,7 +2,7 @@
     <div class="study-browser-series">
         <div class="study-series-container">
             {{#each thumbnail in instance.thumbnails.get}}
-                {{>thumbnailEntry (clone '' thumbnail=thumbnail)}}
+                {{>thumbnailEntry (clone this thumbnail=thumbnail)}}
             {{/each}}
         </div>
     </div>
diff --git a/Packages/ohif-studies/imports/client/components/browser/series.js b/Packages/ohif-studies/imports/client/components/browser/series.js
index aa9149cb2..fa2fd0073 100644
--- a/Packages/ohif-studies/imports/client/components/browser/series.js
+++ b/Packages/ohif-studies/imports/client/components/browser/series.js
@@ -5,18 +5,43 @@ import { OHIF } from 'meteor/ohif:core';
 
 Template.studyBrowserSeries.onCreated(() => {
     const instance = Template.instance();
-    const { studyInformation } = instance.data;
-    const { studyInstanceUid } = studyInformation;
+    const { studyInformation, studyMetadata } = instance.data;
+    const studyInstanceUid = (studyMetadata && studyMetadata.studyInstanceUid) || (studyInformation && studyInformation.studyInstanceUid);
 
     instance.thumbnails = new ReactiveVar([]);
 
     // Get the study metadata and update the study thumbnails
     instance.autorun(() => {
-        const studyMetadata = OHIF.viewer.Studies.findBy({ studyInstanceUid });
+        let metadata = studyMetadata;
+
+        // Check for reactivity
+        if (metadata instanceof ReactiveVar) {
+            metadata = metadata.get();
+        }
+
+        // Retrieve the study metadata
+        if (!metadata) {
+            metadata = OHIF.viewer.Studies.findBy({ studyInstanceUid });
+        }
+
+        // Stop here if there's no study metadata
+        if (!metadata) return;
+
+        // Get the study display sets
+        let displaySets = metadata.getDisplaySets();
+        if (!displaySets.length) {
+            displaySets = OHIF.viewerbase.sortingManager.getDisplaySets(metadata);
+            metadata.displaySets = displaySets;
+            metadata.setDisplaySets(displaySets);
+
+            metadata.forEachDisplaySet(displaySet => {
+                OHIF.viewerbase.stackManager.makeAndAddStack(metadata, displaySet);
+            });
+        }
 
         // Defines the resulting thumbnails list
         const thumbnails = [];
-        studyMetadata.displaySets.forEach((stack, thumbnailIndex) => {
+        displaySets.forEach((stack, thumbnailIndex) => {
             thumbnails.push({
                 thumbnailIndex,
                 stack
diff --git a/Packages/ohif-studies/imports/client/lib/loadStudy.js b/Packages/ohif-studies/imports/client/lib/loadStudy.js
index 739ef2c16..c20c99cdf 100644
--- a/Packages/ohif-studies/imports/client/lib/loadStudy.js
+++ b/Packages/ohif-studies/imports/client/lib/loadStudy.js
@@ -1,5 +1,9 @@
+import { ReactiveDict } from 'meteor/reactive-dict';
 import { OHIF } from 'meteor/ohif:core';
 
+// Create a studies loaded state dictionary to enable reactivity
+OHIF.studies.loadedDict = new ReactiveDict();
+
 /**
  * Load the study metadata and store its information locally
  *
@@ -8,6 +12,16 @@ import { OHIF } from 'meteor/ohif:core';
  */
 OHIF.studies.loadStudy = studyInstanceUid => new Promise((resolve, reject) => {
     OHIF.studies.retrieveStudyMetadata(studyInstanceUid).then(study => {
+        // Add the display sets to the study if not present
+        if (!study.displaySets) {
+            const displaySets = OHIF.viewerbase.sortingManager.getDisplaySets(study);
+            study.displaySets = displaySets;
+            study.setDisplaySets(displaySets);
+            study.forEachDisplaySet(displaySet => {
+                OHIF.viewerbase.stackManager.makeAndAddStack(study, displaySet);
+            });
+        }
+
         // Double check to make sure this study wasn't already inserted into OHIF.viewer.Studies
         // so we don't cause duplicate entry errors
         const loaded = OHIF.viewer.Studies.findBy({ studyInstanceUid: study.studyInstanceUid });
@@ -15,6 +29,9 @@ OHIF.studies.loadStudy = studyInstanceUid => new Promise((resolve, reject) => {
             OHIF.viewer.Studies.insert(study);
         }
 
+        // Add the studyInstanceUid to the loaded state dictionary
+        OHIF.studies.loadedDict.set(study.studyInstanceUid, true);
+
         resolve(study);
     }).catch(reject);
 });
diff --git a/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js b/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
index 13b97b8ce..93618d683 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
@@ -463,11 +463,27 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
  */
 const setDisplaySet = (data, displaySetInstanceUid, templateData) => {
     const study = data.study;
-    if (!study || !study.displaySets) {
-        throw new OHIFError('Study does not exist or has no display sets');
+
+    if (!study) {
+        throw new OHIFError('Study does not exist');
     }
 
-    study.displaySets.every(displaySet => {
+    let displaySets = study.getDisplaySets();
+    if (!displaySets.length) {
+        displaySets = OHIF.viewerbase.sortingManager.getDisplaySets(study);
+        study.displaySets = displaySets;
+        study.setDisplaySets(displaySets);
+
+        study.forEachDisplaySet(displaySet => {
+            OHIF.viewerbase.stackManager.makeAndAddStack(study, displaySet);
+        });
+    }
+
+    if (!displaySets) {
+        throw new OHIFError('Study has no display sets');
+    }
+
+    displaySets.every(displaySet => {
         if (displaySet.displaySetInstanceUid === displaySetInstanceUid) {
             data.displaySet = displaySet;
             return false;
@@ -478,7 +494,7 @@ const setDisplaySet = (data, displaySetInstanceUid, templateData) => {
 
     // If we didn't find anything, stop here
     if (!data.displaySet) {
-        data.displaySet = study.displaySets[0];
+        data.displaySet = displaySets[0];
         // throw new OHIFError('Display set not found in specified study!');
     }
 
diff --git a/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.html b/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.html
index 9af5499f7..1b71a61db 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.html
+++ b/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.html
@@ -9,9 +9,7 @@
                     {{/each}}
                     {{#scrollArea class='series-browser' scrollStep=201}}
                         <div class="clearfix thumbnails-wrapper">
-                            {{#each thumbnail in (studyThumbnails instance.currentStudy.get)}}
-                                {{>thumbnailEntry (clone this thumbnail=thumbnail)}}
-                            {{/each}}
+                            {{>studyBrowserSeries (clone this studyMetadata=instance.currentStudy)}}
                         </div>
                     {{/scrollArea}}
                 </div>
diff --git a/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.js b/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.js
index a13ba7a97..42d214367 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.js
@@ -32,7 +32,9 @@ Template.seriesQuickSwitch.onCreated(() => {
             instance.study = OHIF.viewer.Studies.findBy({
                 studyInstanceUid: viewportData.studyInstanceUid
             });
-        } else {
+        }
+
+        if (!instance.study) {
             instance.study = OHIF.viewer.Studies.getElementByIndex(0);
         }
 
@@ -73,9 +75,20 @@ Template.seriesQuickSwitch.helpers({
 
         const seriesItems = [];
 
-        const items = study.displaySets.length;
+        let displaySets = study.getDisplaySets();
+        if (!displaySets.length) {
+            displaySets = OHIF.viewerbase.sortingManager.getDisplaySets(study);
+            study.displaySets = displaySets;
+            study.setDisplaySets(displaySets);
+
+            study.forEachDisplaySet(displaySet => {
+                OHIF.viewerbase.stackManager.makeAndAddStack(study, displaySet);
+            });
+        }
+
+        const items = displaySets.length;
         for (let i = 0; i < items; i++) {
-            const displaySet = study.displaySets[i];
+            const displaySet = displaySets[i];
             const item = { class: '' };
             seriesItems.push(item);
             if (i === 8 && items !== 9) {
@@ -105,7 +118,10 @@ Template.seriesQuickSwitch.events({
         const $seriesBrowser = $switch.find('.series-browser');
         $seriesBrowser.width(browserWidth - (browserWidth % 237));
 
-        instance.$('.series-quick-switch').addClass('series-triggered');
+        const $quickSwitch = instance.$('.series-quick-switch');
+        if ($quickSwitch.is(':hover')) {
+            $quickSwitch.addClass('series-triggered');
+        }
     },
 
     'mouseleave .series-browser'(event, instance) {