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
-    instance.getCurrentStudy = () => {
-        const viewportIndex = instance.data.viewportIndex;
+    // Gets the current viewport data
+    const viewportIndex = instance.data.viewportIndex;
+    const viewportData = instance.getViewportData(viewportIndex);
+    if (!viewportData) {
+        return;
+    }
 
-        // Runs this computation everytime the current viewport is changed
-        Session.get('CornerstoneNewImage' + viewportIndex);
+    // Fins the current study and return it
+    const study = ViewerStudies.findOne({
+        studyInstanceUid: viewportData.studyInstanceUid
+    });
 
-        // Gets the current viewport data
-        const viewportData = instance.getViewportData(viewportIndex);
-        if (!viewportData) {
-            return;
-        }
-
-        // Fins the current study and return it
-        return ViewerStudies.findOne({
-            studyInstanceUid: viewportData.studyInstanceUid
-        });
-    };
+    // Change the current study to update the thumbnails
+    instance.data.currentStudy.set(study);
 });
 
 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();
-        const currentStudy = instance.getCurrentStudy();
-        instance.data.currentStudy.set(currentStudy);
-        return currentStudy;
+        return Template.instance().data.currentStudy.get();
     }
 });

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%)