LT-306: Fixing defaulted study on quick switch

Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.js

@@ -47,6 +47,7 @@ Template.studyTimepointBrowser.onCreated(() => {
 Template.studyTimepointBrowser.onRendered(() => {
     const instance = Template.instance();
 
+    // Collapse all timepoints but first when timepoint view type changes
     instance.autorun(() => {
         // Runs this computation every time the timepointViewType is changed
         const type = instance.timepointViewType.get();
@@ -59,22 +60,36 @@ Template.studyTimepointBrowser.onRendered(() => {
         }
     });
 
+    // Expand only the timepoints with loaded studies in viewports
     let lastStudy;
+    let activeStudiesUids = [];
+
+    // Wait for rerendering and set the timepoint as active
+    instance.refreshActiveStudies = () => Tracker.afterFlush(() => {
+        _.each(activeStudiesUids, studyInstanceUid => {
+            instance.$(`.studyTimepointStudy[data-uid='${studyInstanceUid}']`).addClass('active');
+        });
+        // Show only first timepoint expanded for key timepoints
+        instance.$('.timepointEntry:first').addClass('active');
+    });
+
     instance.autorun(() => {
         // Runs this computation every time the curenty study is changed
         const currentStudy = instance.data.currentStudy && instance.data.currentStudy.get();
 
+        // Stop here if there's no current study set
+        if (!currentStudy) {
+            return;
+        }
+
         // Check if the study really changed and update the last study
         if (currentStudy !== lastStudy) {
             instance.showAdditionalTimepoints.set(false);
             lastStudy = currentStudy;
+            activeStudiesUids = [currentStudy.studyInstanceUid];
         }
 
-        // Wait for rerendering and set the timepoint as active
+        instance.refreshActiveStudies();
-        Tracker.afterFlush(() => {
-            // Show only first timepoint expanded for key timepoints
-            instance.$('.timepointEntry:first').addClass('active');
-        });
     });
 });
 

Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointStudy.html

@@ -1,6 +1,6 @@
 <template name="studyTimepointStudy">
     {{#let isSidebar=(isUndefined viewportIndex)}}
-        <div class="studyTimepointStudy {{#if isSidebar}}studySidebarTimepoint{{else}}studyQuickSwitchTimepoint{{/if}} {{#if this.active}}active{{/if}}">
+        <div class="studyTimepointStudy {{#if isSidebar}}studySidebarTimepoint{{else}}studyQuickSwitchTimepoint{{/if}} {{#if this.active}}active{{/if}}" data-uid="{{this.study.studyInstanceUid}}">
             <div class="studyItem">
                 {{>loadingText}}
                 <div class="studyModality">

Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointStudy.js

@@ -1,3 +1,7 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import { _ } from 'meteor/underscore';
+
 Template.studyTimepointStudy.onCreated(() => {
     const instance = Template.instance();
 
@@ -17,10 +21,15 @@ Template.studyTimepointStudy.onCreated(() => {
 });
 
 const initializeStudyWrapper = instance => {
+    // Stop here if it's a quick switch
+    if (instance.data.currentStudy) {
+        return;
+    }
+
     const $study = instance.$('.studyTimepointStudy');
     const $thumbnails = instance.$('.studyTimepointThumbnails');
     $study.addClass('active');
-    // If element already has max-height property set, .height() 
+    // If element already has max-height property set, .height()
     // will return that value, so remove it to recalculate
     $thumbnails.css('max-height', '');
     $thumbnails.css('max-height', $thumbnails.height());
@@ -33,7 +42,6 @@ const initializeStudyWrapper = instance => {
             $study.addClass('active');
         }, 1);
     }
-
 };
 
 // Initialize the study wrapper max-height to enable CSS transition