LT-251: Making studies clickable to trigger series state

Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.js

@@ -13,24 +13,20 @@ Template.studySeriesQuickSwitch.onCreated(() => {
         return layoutManager && layoutManager.viewportData && layoutManager.viewportData[viewportIndex];
     };
 
-    // Get the current study being shown in the current viewport
+    // Gets the current viewport data
-    instance.getCurrentStudy = () => {
+    const viewportIndex = instance.data.viewportIndex;
-        const viewportIndex = instance.data.viewportIndex;
+    const viewportData = instance.getViewportData(viewportIndex);
+    if (!viewportData) {
+        return;
+    }
 
-        // Runs this computation everytime the current viewport is changed
+    // Fins the current study and return it
-        Session.get('CornerstoneNewImage' + viewportIndex);
+    const study = ViewerStudies.findOne({
+        studyInstanceUid: viewportData.studyInstanceUid
+    });
 
-        // Gets the current viewport data
+    // Change the current study to update the thumbnails
-        const viewportData = instance.getViewportData(viewportIndex);
+    instance.data.currentStudy.set(study);
-        if (!viewportData) {
-            return;
-        }
-
-        // Fins the current study and return it
-        return ViewerStudies.findOne({
-            studyInstanceUid: viewportData.studyInstanceUid
-        });
-    };
 });
 
 Template.studySeriesQuickSwitch.events({
@@ -45,11 +41,8 @@ Template.studySeriesQuickSwitch.events({
 });
 
 Template.studySeriesQuickSwitch.helpers({
-    // Get the current study and change the reactive variable
+    // Get the current study
     currentStudy() {
-        const instance = Template.instance();
+        return Template.instance().data.currentStudy.get();
-        const currentStudy = instance.getCurrentStudy();
-        instance.data.currentStudy.set(currentStudy);
-        return currentStudy;
     }
 });

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

@@ -49,18 +49,21 @@ $seriesSpacing = 2px
     position: relative
 
     &.switchSectionSeries.hover, &.switchSectionStudy:hover
-      .studySwitch .studyBox, .seriesSwitch .seriesItem
+      .seriesSwitch .seriesItem
         opacity: 0
       .switchHover
         opacity: 1
       .studyHover
-        transform(scale(1))
+        height: auto
+        padding-top: $switchSize
+        transition(padding-top 0.3s ease\, visibility 0s linear 0s)
+        visibility: visible
 
     &.switchSectionSeries.hover
       .seriesHover
         .thumbnailsWrapper
+          transform(scale(0.9) translateY($switchSize))
           transition(all 0.3s ease)
-          transform(scale(0.9) translateY($switchSize*1.5))
         .thumbnailEntry .seriesDetails
           opacity: 0
           visibility: hidden
@@ -79,7 +82,7 @@ $seriesSpacing = 2px
       opacity: 0
       transform(translateY(-36px))
 
-    .studySwitch .studyBox, .seriesSwitch .seriesItem
+    .seriesSwitch .seriesItem
       transition(opacity 0.3s ease)
 
     .studySwitch, .seriesSwitch
@@ -139,8 +142,6 @@ $seriesSpacing = 2px
   overflow: hidden
   position: absolute
   top: 0
-  transform(scale(0))
-  transition(all 0.3s ease)
   z-index: 10000
 
   .scrollArea
@@ -151,9 +152,18 @@ $seriesSpacing = 2px
     width: calc(100% + 20px)
 
 .studyHover
+  height: 0
+  padding-top: 0
+  transition(padding-top 0.3s ease\, visibility 0s linear 0.3s)
+  visibility: hidden
   width: 320px
 
+  .scrollArea
+    height: 500px
+
 .seriesHover
+  transform(scale(0))
+  transition(all 0.3s ease)
   width: 731px
 
   .thumbnailEntry
@@ -164,7 +174,6 @@ $seriesSpacing = 2px
     float: right
   .studyHover
     left: 0
-    transform-origin(0% 0%)
   .seriesHover, .thumbnailsWrapper
     right: 0
     transform-origin(100% 0%)
@@ -174,7 +183,6 @@ $seriesSpacing = 2px
     float: left
   .studyHover
     right: 0
-    transform-origin(100% 0%)
   .seriesHover, .thumbnailsWrapper
     left: 0
     transform-origin(0% 0%)

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

@@ -2,7 +2,7 @@
     <div class="studyTimepointWrapper">
         <div class="studyTimepoint">
             {{#each study in studies}}
-                {{>studyTimepointStudy study=study active=(isActive study) viewportIndex=viewportIndex}}
+                {{>studyTimepointStudy study=study active=(isActive study) viewportIndex=this.viewportIndex}}
             {{/each}}
         </div>
     </div>

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

@@ -30,8 +30,17 @@ Template.studyTimepoint.events({
     'selectionChanged .studyTimepoint'(event, instance, changed) {
         const $selection = $(changed.selection);
 
+        // Defines where will be the studies searched
         let $studiesTarget = instance.$('.studyTimepoint');
+
         if (changed.isQuickSwitch) {
+            // Changes the current quick switch study
+            const study = ViewerStudies.findOne({
+                studyInstanceUid: changed.studyInstanceUid
+            });
+            instance.data.currentStudy.set(study);
+
+            // Changes the target to toggle the selection in all the studies
             $studiesTarget = $studiesTarget.closest('.studyTimepointBrowser');
         }
 

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

@@ -17,7 +17,7 @@
                                 </div>
                                 <div class="timepointModalities">{{modalitiesSummary timepoint}}</div>
                             </div>
-                            {{>studyTimepoint studies=(studies timepoint) index=@index viewportIndex=viewportIndex}}
+                            {{>studyTimepoint studies=(studies timepoint) index=@index viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
                         </div>
                         <hr class="m-y-1">
                     {{/if}}

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

@@ -48,12 +48,14 @@ Template.studyTimepointStudy.events({
     },
 
     // Changes the current study selection for the clicked study
-    'click .studySidebarTimepoint .studyModality'(event, instance) {
+    'click .studyModality'(event, instance) {
         const $study = $(event.currentTarget).closest('.studyTimepointStudy');
 
         const studyData = instance.data.study;
         const studyInstanceUid = studyData.studyInstanceUid;
 
+        const isQuickSwitch = !_.isUndefined(instance.data.viewportIndex);
+
         // Check if the study already has series data,
         // and if not, retrieve it.
         if (!studyData.seriesList) {
@@ -65,13 +67,13 @@ Template.studyTimepointStudy.events({
                 $study.addClass('loading');
                 getStudyMetadata(studyInstanceUid, studyData => {
                     ViewerStudies.insert(studyData);
-                    instance.select();
+                    instance.select(isQuickSwitch);
                 });
             } else {
                 studyData.seriesList = alreadyLoaded.seriesList;
             }
         } else {
-            instance.select();
+            instance.select(isQuickSwitch);
         }
     }
 });