Finishing timepoint browser behavior

LesionTracker/client/components/viewerSection/viewerSection.html

@@ -2,8 +2,8 @@
     <div class="viewerSection">
         <div class="sidebarMenu sidebar-left {{#if leftSidebarOpen}}sidebar-open{{/if}}">
             {{>timepointBrowserList (extend timepointBrowserData scrollableClass='p-a-1')}}
-            <!-- <hr>
-            {{>studyTimepointBrowser (clone this)}} -->
+            <!-- <hr> -->
+            <!-- {{>studyTimepointBrowser (clone this)}} -->
         </div>
         <div class="mainContent {{#if leftSidebarOpen}}sidebar-left-open{{/if}} {{#if rightSidebarOpen}}sidebar-right-open{{/if}}">
             {{>viewerMain (clone this)}}

LesionTracker/client/components/viewerSection/viewerSection.js

@@ -1,3 +1,4 @@
+import { Meteor } from 'meteor/meteor';
 import { Template } from 'meteor/templating';
 
 Template.viewerSection.events({
@@ -7,6 +8,34 @@ Template.viewerSection.events({
         }
 
         window.ResizeViewportManager.handleResize();
+    },
+
+    'ohif.studies.study.click'(event, instance) {
+        const $element = $(event.currentTarget);
+
+        // Defer the active class toggling to wait for child template rendering
+        Meteor.defer(() => {
+            // Remove max height restriction from studies browser
+            const $studiesBrowser = $element.closest('.timepoint-browser-studies');
+            $studiesBrowser.css('max-height', '');
+
+            // Remove active class from sibling studies
+            $element.siblings().removeClass('active');
+
+            // Toggle the active class on clicked study
+            $element.toggleClass('active');
+
+            // Adjust the max height for studiesBrowser when series transition is finished
+            const $seriesBrowser = $element.find('.study-browser-series');
+            $seriesBrowser.one('transitionend', () => $studiesBrowser.adjustMax('height'));
+        });
+    },
+
+    'ohif.lesiontracker.timepoint.click'(event, instance) {
+        const $element = $(event.currentTarget);
+
+        // Defer the active class toggling to wait for child template rendering
+        Meteor.defer(() => $element.toggleClass('active'));
     }
 });
 
@@ -26,15 +55,8 @@ Template.viewerSection.helpers({
         return {
             timepointApi,
             timepoints,
-
             timepointChildTemplate: 'timepointBrowserStudies',
-            studyChildTemplate: 'studyBrowserSeries',
-
-            studyClickCallback(studyInformation, element) {
-                const $element = $(element);
-                $element.siblings().removeClass('active');
-                $element.toggleClass('active');
-            }
+            studyChildTemplate: 'studyBrowserSeries'
         };
     }
 });