Adding series and scrolling to quickSwitch

Packages/ohif-viewerbase/client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.js

@@ -1,9 +1,57 @@
 import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
 import { $ } from 'meteor/jquery';
 import { OHIF } from 'meteor/ohif:core';
 
 // FIXME >>>> REMOVE
 $(document.body).on('keydown', e => (e.keyCode === 69 && $('.quickSwitchWrapper').toggle()) || 1);
+OHIF.cornerstone.renderer = '';
+
+Template.seriesQuickSwitch.onCreated(() => {
+    const instance = Template.instance();
+
+    // Defines the study being shown in the current viewport
+    instance.currentStudy = new ReactiveVar();
+
+    // Gets the viewport data for the given viewport index
+    instance.getViewportData = viewportIndex => {
+        const layoutManager = OHIF.viewerbase.layoutManager;
+        return layoutManager && layoutManager.viewportData && layoutManager.viewportData[viewportIndex];
+    };
+
+    // Gets the current viewport data
+    const viewportIndex = instance.data.viewportIndex;
+
+    instance.study = {};
+    instance.lastStudy = {};
+
+    instance.autorun(() => {
+        OHIF.viewerbase.layoutManager.observer.depend();
+
+        const viewportData = instance.getViewportData(viewportIndex);
+
+        // @TypeSafeStudies
+        if (viewportData) {
+            // Finds the current study and return it
+            instance.study = OHIF.viewer.Studies.findBy({
+                studyInstanceUid: viewportData.studyInstanceUid
+            });
+        } else {
+            instance.study = OHIF.viewer.Studies.getElementByIndex(0);
+        }
+
+        if (!instance.study) {
+            return;
+        }
+
+        if (instance.study.studyInstanceUid !== instance.lastStudy.studyInstanceUid) {
+            // Change the current study to update the thumbnails
+            instance.currentStudy.set(instance.study);
+
+            instance.lastStudy = instance.study;
+        }
+    });
+});
 
 Template.seriesQuickSwitch.helpers({
     shallDisplay() {
@@ -17,13 +65,54 @@ Template.seriesQuickSwitch.helpers({
         const { columns, viewportIndex } = instance.data;
         if (columns === 1) return '';
         return viewportIndex === 0 ? 'left' : 'right';
+    },
+
+    seriesItems() {
+        const instance = Template.instance();
+
+        OHIF.viewerbase.layoutManager.observer.depend();
+        const { viewportIndex } = instance.data;
+        const viewportData = OHIF.viewerbase.layoutManager.viewportData[viewportIndex];
+        const study = instance.currentStudy.get();
+
+        const seriesItems = [];
+
+        const items = study.displaySets.length;
+        for (let i = 0; i < items; i++) {
+            const displaySet = study.displaySets[i];
+            const item = { class: '' };
+            seriesItems.push(item);
+            if (i === 8 && items !== 9) {
+                item.class += ' count';
+                item.value = items;
+                break;
+            }
+
+            if (displaySet.displaySetInstanceUid === viewportData.displaySetInstanceUid) {
+                item.class += ' active';
+            }
+        }
+
+        return seriesItems;
     }
 });
 
 Template.seriesQuickSwitch.events({
     'mouseenter .series-switch'(event, instance) {
+        // Control the width of the series browser
         const $switch = $(event.currentTarget);
         const browserWidth = $switch.offset().left + $switch.outerWidth();
-        $switch.find('.series-browser').width(browserWidth);
+        const $seriesBrowser = $switch.find('.series-browser');
+        $seriesBrowser.width(browserWidth);
+
+        instance.$('.series-quick-switch').addClass('series-triggered');
+    },
+
+    'mouseleave .series-browser'(event, instance) {
+        $(event.currentTarget).children('.scrollable').stop().animate({ scrollTop: 0 }, 300, 'swing');
+    },
+
+    'mouseleave .series-quick-switch'(event, instance) {
+        $(event.currentTarget).removeClass('series-triggered');
     }
 });