Adding series and scrolling to quickSwitch

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

@@ -4,17 +4,15 @@
             <div class="series-switch rp-t-1 rp-x-1">
                 <div class="title-label">Series</div>
                 <div class="series-box r-font">
-                    <div class="series-item"></div>
-                    <div class="series-item"></div>
-                    <div class="series-item"></div>
-                    <div class="series-item"></div>
-                    <div class="series-item"></div>
-                    <div class="series-item"></div>
-                    <div class="series-item"></div>
-                    <div class="series-item"></div>
-                    <div class="series-item count">37</div>
-                    {{#scrollArea class='series-browser'}}
-                        <div>BBBBB</div>
+                    {{#each seriesItem in seriesItems}}
+                        <div class="series-item {{seriesItem.class}}">{{seriesItem.value}}</div>
+                    {{/each}}
+                    {{#scrollArea class='series-browser' scrollStep=201}}
+                        <div class="clearfix thumbnails-wrapper">
+                            {{#each thumbnail in (studyThumbnails instance.currentStudy.get)}}
+                                {{>thumbnailEntry (clone this thumbnail=thumbnail)}}
+                            {{/each}}
+                        </div>
                     {{/scrollArea}}
                 </div>
             </div>

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');
     }
 });

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

@@ -42,7 +42,13 @@
       right: auto
       transform-origin(1em calc(1em + 15px))
 
-    .series-box .series-item
+      .thumbnails-wrapper
+        transform-origin(0% 0%)
+
+      .thumbnailEntry
+        float: left
+
+    .series-item
       float: left
 
   .title-label
@@ -50,8 +56,10 @@
     font-size: 12px
     font-weight: 500
     line-height:  12px
+    opacity: 1
     padding-bottom: 3px
     text-align: center
+    transition(opacity 0.3s ease)
 
   .series-switch,
   .study-switch
@@ -65,51 +73,114 @@
     width: 285px
 
   .series-browser
-    background: blue
     max-width: 711px
     right: 0
     transform-origin(calc(100% - 1em) calc(1em + 15px))
 
+    .thumbnails-wrapper
+      transition(transform 0.3s ease)
+      transform-origin(100% 0%)
+
+    .thumbnailEntry
+      float: right
+
+      .seriesDetails
+        opacity: 0
+        transform(translateY(-100%))
+        transition(transform 0.3s ease\, opacity 0.3s ease)
+
+    .scrollable
+      padding-top: 15px
+      transition(padding-bottom 0.3s ease)
+
   .series-browser,
   .study-browser
     max-height: 100vh
     min-height: 120px
+    opacity: 0
     position: absolute
     top: 0
     transform(scale(0))
-    transition(transform 0.3s ease)
+    transition(transform 0.3s ease\, opacity 0.3s ease)
+    z-index: 3
 
-  .series-box
+  .series-box,
+  .study-box
     height: 57px
     width: 57px
 
-    .series-item
-      theme('background-color', '$boxBackgroundColor')
-      border-radius(3px)
-      float: right
-      height: 15px
-      margin: 2px
-      width: 15px
-
-      &.count
-        theme('color', '$textPrimaryColor')
-        background-color: transparent
-        font-size: 12px
-        font-weight: 500
-        line-height: 17px
-        text-align: center
-
-      &.active
-        theme('background-color', '$activeColor')
-
-
   .study-box
     theme('background-color', '$uiGrayDark')
     theme('border', 'solid 2px $uiBorderColorDark')
-    border-radius: 11px
-    height: 57px
-    width: 57px
+    border-radius(11px)
 
+  .series-item
+    theme('background-color', '$boxBackgroundColor')
+    border-radius(3px)
+    float: right
+    height: 15px
+    margin: 2px
+    transition(opacity 0.3s ease)
+    width: 15px
+
+    &.count
+      theme('color', '$textPrimaryColor')
+      background-color: transparent
+      font-size: 12px
+      font-weight: 500
+      line-height: 17px
+      text-align: center
+
+    &.active
+      theme('background-color', '$activeColor')
+
+  &.series-triggered .series-browser,
   .series-switch:hover .series-browser,
   .study-switch:hover .study-browser
+    opacity: 1
     transform(scale(1))
+
+  &.series-triggered .series-item,
+  .series-switch:hover .title-label
+    opacity: 0
+
+  &.series-triggered
+    .thumbnails-wrapper
+      transform(scale(0.9) translateY(80px))
+
+    .series-browser:not(:hover)
+      &>.scrollable
+        padding-bottom: 80px
+
+      &>.scroll-nav
+        opacity: 0
+
+  .series-switch:hover .series-browser
+    .thumbnails-wrapper
+      transform(scale(1) translateY(0))
+
+    .thumbnailEntry .seriesDetails
+      opacity: 1
+      transform(translateY(0))
+      transition-delay(0.3s)
+
+@media screen and (max-width: 1599px)
+  .series-quick-switch
+
+    .series-box,
+    .study-box
+      width: 36px
+      height: 36px
+
+    .study-box
+      border-radius(7px)
+
+    .series-item
+      height: 10px
+      margin: 1px
+      width: 10px
+
+      &.count
+        font-size: 10px
+        font-weight: 300
+        line-height: 10px