Creating timepoint browser

LesionTracker/client/components/viewerSection/viewerSection.html

@@ -1,6 +1,8 @@
 <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)}}
         </div>
         <div class="mainContent {{#if leftSidebarOpen}}sidebar-left-open{{/if}} {{#if rightSidebarOpen}}sidebar-right-open{{/if}}">

LesionTracker/client/components/viewerSection/viewerSection.js

@@ -1,19 +1,31 @@
+import { Template } from 'meteor/templating';
+
 Template.viewerSection.events({
-     'transitionend .sidebarMenu'(event) {
-         if (!event.target.classList.contains('sidebarMenu')) {
-             return;
-         }
- 
-         window.ResizeViewportManager.handleResize();
-     }
- });
+    'transitionend .sidebarMenu'(event) {
+        if (!event.target.classList.contains('sidebarMenu')) {
+            return;
+        }
+
+        window.ResizeViewportManager.handleResize();
+    }
+});
 
 Template.viewerSection.helpers({
     leftSidebarOpen() {
-       return Template.instance().data.state.get('leftSidebar');
+        return Template.instance().data.state.get('leftSidebar');
     },
 
     rightSidebarOpen() {
-       return Template.instance().data.state.get('rightSidebar');
+        return Template.instance().data.state.get('rightSidebar');
+    },
+
+    timepointBrowserData() {
+        const instance = Template.instance();
+        const { timepointApi } = instance.data;
+        const timepoints = timepointApi.all();
+        return {
+            timepointApi,
+            timepoints
+        };
     }
-});
+});