LT-251: Hiding series from sutdy quick switch

Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl

@@ -38,6 +38,8 @@ $seriesSpacing = 2px
       position: relative
 
     .studySwitch
+      .studyTimepointStudy.active .studyModality
+        box-shadow: inset 0 0 0 3px $activeColor
       .studyBox
         background-color: $darkUiColor
         border: solid 1px $activeColor

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepoint.js

@@ -1,4 +1,8 @@
-var isActive = {};
+Template.studyTimepoint.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.isActive = {};
+});
 
 // Initialize the timepoint wrapper max-height to enable CSS transition
 Template.studyTimepoint.onRendered(() => {
@@ -25,23 +29,34 @@ Template.studyTimepoint.events({
     // Changes the selected study
     'selectionChanged .studyTimepoint'(event, instance, changed) {
         const $selection = $(changed.selection);
-        const $thumbnails = $selection.find('.studyTimepointThumbnails');
-        const $timepoint = instance.$('.studyTimepoint');
-        const studyInstanceUid = changed.studyInstanceUid;
 
-        // Set the max-height to inherit to be able to expand the wrapper on its full height
+        let $studiesTarget = instance.$('.studyTimepoint');
-        instance.$('.studyTimepointWrapper').css('max-height', 'inherit');
+        if (changed.isQuickSwitch) {
+            $studiesTarget = $studiesTarget.closest('.studyTimepointBrowser');
+        }
 
         // Removes selected state from all studies but the triggered study
-        instance.$('.studyTimepointStudy').not($selection).removeClass('active');
+        $studiesTarget.find('.studyTimepointStudy').not($selection).removeClass('active');
 
+        if (changed.isQuickSwitch) {
+            // Reset active studies map to allow only one active study
+            instance.isActive = {};
+            // Add selected state for the triggered study
+            $selection.addClass('active');
+        } else {
+            const $timepoint = instance.$('.studyTimepoint');
+            // Set the max-height to inherit to be able to expand the wrapper on its full height
+            instance.$('.studyTimepointWrapper').css('max-height', 'inherit');
             // Toggle selected state for the triggered study
             $selection.removeClass('loading');
             $selection.toggleClass('active');
-        isActive[studyInstanceUid] = $selection.hasClass('active');
-
             // Recalculates the timepoint height to make CSS transition smoother
+            const $thumbnails = $selection.find('.studyTimepointThumbnails');
             $thumbnails.one('transitionend', () => $timepoint.trigger('displayStateChanged'));
+        }
+
+        // Set the current study as active
+        instance.isActive[changed.studyInstanceUid] = $selection.hasClass('active');
     },
     // It should be triggered when the timepoint height is changed
     'displayStateChanged .studyTimepoint'(event, instance) {
@@ -55,10 +70,12 @@ Template.studyTimepoint.events({
 
 Template.studyTimepoint.helpers({
     isActive(study) {
+        const instance = Template.instance();
+
         if (!study.studyInstanceUid) {
             return;
         }
 
-        return isActive[study.studyInstanceUid];
+        return instance.isActive[study.studyInstanceUid];
     }
-})
+});

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html

@@ -1,6 +1,7 @@
 <template name="studyTimepointStudy">
-    <div class="studyTimepointStudy {{#if this.active}}active{{/if}}">
+    {{#let isSidebar=(not (isDefined viewportIndex))}}
-        {{ >loadingText }}
+        <div class="studyTimepointStudy {{#if isSidebar}}studySidebarTimepoint{{else}}studyQuickSwitchTimepoint{{/if}} {{#if this.active}}active{{/if}}">
+            {{>loadingText}}
             <div class="studyModality">
                 <div class="studyModalityBox">
                     {{#if this.study.modalities}}
@@ -14,10 +15,13 @@
                     <div class="studyModalityDescription">{{this.study.studyDescription}}</div>
                 </div>
             </div>
+            {{#if isSidebar}}
                 <div class="studyTimepointThumbnails">
                     {{#each thumbnail in (studyThumbnails this.study)}}
                         {{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
                     {{/each}}
                 </div>
+            {{/if}}
         </div>
+    {{/let}}
 </template>

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js

@@ -1,3 +1,21 @@
+Template.studyTimepointStudy.onCreated(() => {
+    const instance = Template.instance();
+
+    // Set the current study as selected in the studies list
+    instance.select = (isQuickSwitch=false) => {
+        const $study = instance.$('.studyTimepointStudy');
+        const $timepoint = $study.closest('.studyTimepoint');
+
+        const selectionChanged = {
+            selection: [$study[0]],
+            studyInstanceUid: instance.data.study.studyInstanceUid,
+            isQuickSwitch
+        };
+
+        $timepoint.trigger('selectionChanged', selectionChanged);
+    };
+});
+
 // Initialize the study wrapper max-height to enable CSS transition
 Template.studyTimepointStudy.onRendered(() => {
     const instance = Template.instance();
@@ -23,36 +41,37 @@ Template.studyTimepointStudy.events({
             $(event.currentTarget).closest('.studyTimepoint').trigger('displayStateChanged');
         }
     },
-    // Changes the current study selection for the clicked study
-    'click .studyModality'(event, instance) {
-        const $study = $(event.currentTarget).closest('.studyTimepointStudy');
-        const $timepoint = $study.closest('.studyTimepoint');
-        const study = $study[0];
 
-        const studyInstanceUid = this.study.studyInstanceUid;
+    // Transfers the active state to the current study
-        const selectionChanged = {
+    'click .studyQuickSwitchTimepoint .studyModality'(event, instance) {
-            selection: [study],
+        instance.select(true);
-            studyInstanceUid: studyInstanceUid
+    },
-        };
+
+    // Changes the current study selection for the clicked study
+    'click .studySidebarTimepoint .studyModality'(event, instance) {
+        const $study = $(event.currentTarget).closest('.studyTimepointStudy');
+
+        const studyData = instance.data.study;
+        const studyInstanceUid = studyData.studyInstanceUid;
 
         // Check if the study already has series data,
         // and if not, retrieve it.
-        if (!this.study.seriesList) {
+        if (!studyData.seriesList) {
-            var alreadyLoaded = ViewerStudies.findOne({
+            const alreadyLoaded = ViewerStudies.findOne({
-                studyInstanceUid: studyInstanceUid
+                studyInstanceUid
             });
 
             if (!alreadyLoaded) {
-                study.classList.add('loading');
+                $study.addClass('loading');
-                getStudyMetadata(studyInstanceUid, (studyData) => {
+                getStudyMetadata(studyInstanceUid, studyData => {
                     ViewerStudies.insert(studyData);
-                    $timepoint.trigger('selectionChanged', selectionChanged);
+                    instance.select();
                 });
             } else {
-                this.study.seriesList = alreadyLoaded.seriesList;
+                studyData.seriesList = alreadyLoaded.seriesList;
             }
         } else {
-            $timepoint.trigger('selectionChanged', selectionChanged);
+            instance.select();
         }
     }
 });

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl

@@ -37,7 +37,6 @@ $spacerY = 12px
 
   &.active
     .studyModality
-      box-shadow: inset 0 0 0 3px $activeColor
       .studyModalityBox
         color: $boxActiveTextColor
         &

Packages/viewerbase/lib/helpers/logical.js

@@ -62,3 +62,8 @@ Template.registerHelper('choose', (...values) => {
     _.each(_.initial(values, 1), value => value && (result = value));
     return result;
 });
+
+// Check if the value is different from undefined
+Template.registerHelper('isDefined', value => {
+    return typeof value !== 'undefined';
+});