Creating sidebar templates for studies/timepoints browsers

LesionTracker/client/components/viewerSection/viewerSection.html

@@ -1,9 +1,15 @@
 <template name="viewerSection">
     <div class="viewerSection">
         <div class="sidebarMenu sidebar-left {{#if leftSidebarOpen}}sidebar-open{{/if}}">
-            {{>timepointBrowserList (extend timepointBrowserData scrollableClass='p-a-1')}}
-            <!-- <hr> -->
-            <!-- {{>studyTimepointBrowser (clone this)}} -->
+            {{#if isTimepointBrowser}}
+                {{>timepointBrowserSidebar (clone this)}}
+            {{else}}
+                {{#if instance.loading.get}}
+                    {{>loadingText}}
+                {{else}}
+                    {{>studyBrowserSidebar (clone this studiesInformation=instance.studiesInformation.get)}}
+                {{/if}}
+            {{/if}}
         </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,41 +1,33 @@
-import { Meteor } from 'meteor/meteor';
 import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { OHIF } from 'meteor/ohif:core';
+
+Template.viewerSection.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.isTimepointBrowser = () => !!OHIF.viewer.data.currentTimepointId;
+
+    if (!instance.isTimepointBrowser()) {
+        instance.loading = new ReactiveVar(true);
+        instance.studiesInformation = new ReactiveVar([]);
+        const filter = { studyInstanceUid: OHIF.viewer.data.studyInstanceUids };
+        OHIF.studies.searchStudies(filter).then(studiesData => {
+            instance.loading.set(false);
+            instance.studiesInformation.set(studiesData);
+        }).catch(error => {
+            instance.loading.set(false);
+            const text = 'An error has occurred while retrieving studies information';
+            OHIF.ui.notifications.danger({ text });
+            OHIF.log.error(error);
+        });
+    }
+});
 
 Template.viewerSection.events({
     'transitionend .sidebarMenu'(event) {
-        if (!event.target.classList.contains('sidebarMenu')) {
-            return;
-        }
+        if (!event.target.classList.contains('sidebarMenu')) return;
 
         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'));
     }
 });
 
@@ -48,15 +40,11 @@ Template.viewerSection.helpers({
         return Template.instance().data.state.get('rightSidebar');
     },
 
-    timepointBrowserData() {
-        const instance = Template.instance();
-        const { timepointApi } = instance.data;
-        const timepoints = timepointApi.all();
-        return {
-            timepointApi,
-            timepoints,
-            timepointChildTemplate: 'timepointBrowserStudies',
-            studyChildTemplate: 'studyBrowserSeries'
-        };
+    isTimepointBrowser() {
+        return Template.instance().isTimepointBrowser();
+    },
+
+    studiesInformation() {
+        return Template.instance().studiesInformation.get();
     }
 });

LesionTracker/client/components/viewerSection/viewerSection.styl

@@ -37,6 +37,10 @@
       margin-left: 0
       visibility: visible
 
+  .loadingTextDiv
+    theme('color', '$textSecondaryColor')
+    font-size: 32px
+
   .mainContent
     flex: 1
     height: 100%