Improving new study browser and moving studies services to ohif:studies

Packages/ohif-studies/imports/client/components/browser/index.js

@@ -1,5 +1,6 @@
 import './list.html';
-import './list.js';
 import './item.html';
 import './item.js';
 import './item.styl';
+import './series.html';
+import './series.js';

Packages/ohif-studies/imports/client/components/browser/item.html

@@ -1,5 +1,5 @@
 <template name="studyBrowserItem">
-    <div class="study-browser-item {{this.settings.studyItemClass}} {{#if isActive}}active{{/if}} {{#if isLoading}}loading{{/if}}" data-uid="{{this.studyInformation.studyInstanceUid}}">
+    <div class="study-browser-item {{this.studyItemClass}} {{#if isActive}}active{{/if}} {{#if isLoading}}loading{{/if}}" data-uid="{{this.studyInformation.studyInstanceUid}}">
         <div class="study-item">
             {{#if isLoading}}
                 {{>loadingText}}
@@ -14,8 +14,8 @@
                 </div>
             </div>
         </div>
-        {{#if this.settings.studyTemplate}}
-            {{>Template.dynamic template=this.settings.studyTemplate data=(clone this)}}
+        {{#if this.studyChildTemplate}}
+            {{>Template.dynamic template=this.studyChildTemplate data=(clone this)}}
         {{/if}}
     </div>
 </template>

Packages/ohif-studies/imports/client/components/browser/item.js

@@ -1,26 +1,52 @@
 import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
 import { $ } from 'meteor/jquery';
+import { OHIF } from 'meteor/ohif:core';
 
 Template.studyBrowserItem.onCreated(() => {
     const instance = Template.instance();
 
+    instance.loaded = false;
+    instance.loading = new ReactiveVar(false);
+
     const modality = instance.data.studyInformation.modality || 'UN';
     instance.modalities = modality.replace(/\\/g, ' ');
 });
 
 Template.studyBrowserItem.events({
-    'click .study-browser-item'(event, instance) {
-        const element = event.currentTarget;
+    'click .study-item'(event, instance) {
+        if (instance.loading.get()) return;
+
+        const { studyClickCallback, studyInformation } = instance.data;
+        const element = event.currentTarget.parentElement;
         const $element = $(element);
-        $element.trigger('ohif.studies.study.click', instance.data.studyInformation);
-        const { settings, studyInformation } = instance.data;
-        if (settings && typeof settings.studyClickCallback) {
-            settings.studyClickCallback(studyInformation, element);
+        $element.trigger('ohif.studies.study.click', studyInformation);
+
+        const triggerClickCallback = () => {
+            if (typeof studyClickCallback === 'function') {
+                studyClickCallback(studyInformation, element);
+            }
+        };
+
+        if (instance.loaded) {
+            triggerClickCallback();
+        } else {
+            instance.loading.set(true);
+            OHIF.studies.retrieveStudyMetadata(studyInformation.studyInstanceUid).then(() => {
+                instance.loaded = true;
+                instance.loading.set(false);
+                $element.trigger('ohif.studies.study.load', studyInformation);
+                triggerClickCallback();
+            });
         }
     }
 });
 
 Template.studyBrowserItem.helpers({
+    isLoading() {
+        return Template.instance().loading.get();
+    },
+
     modalityStyle() {
         // Responsively styles the Modality Acronyms for studies
         // with more than one modality

Packages/ohif-studies/imports/client/components/browser/item.styl

@@ -46,13 +46,25 @@ $spacerY = 12px
           theme('background-color', '$activeColor')
           border-color: $boxActiveBorderColor
 
-  &:not(.active) .studyTimepointThumbnails
+  &:not(.active) .study-browser-series
     max-height: 0 !important
 
-  .studyTimepointThumbnails
+    .study-series-container
+      opacity: 0
+      transform(translateY(-100%))
+
+  .study-browser-series
     overflow: hidden
+    transform(translateY(0))
+    transform-origin(50% 0%)
     transition($sidebarTransition)
 
+    .study-series-container
+      opacity: 1
+      transition($sidebarTransition)
+      transform(translateY(0))
+      transform-origin(50% 0%)
+
 .study-item-box
   border: 1px solid $boxBorderColor
   border-radius: 12px

Packages/ohif-studies/imports/client/components/browser/list.html

@@ -1,5 +1,5 @@
 <template name="studyBrowserList">
-    <div class="study-browser-list {{this.settings.studyListClass}}">
+    <div class="study-browser-list {{this.class}}">
         {{#each studyInformation in studiesInformation}}
             {{>studyBrowserItem (clone this studyInformation=studyInformation)}}
         {{/each}}

Packages/ohif-studies/imports/client/components/browser/series.html

@@ -0,0 +1,9 @@
+<template name="studyBrowserSeries">
+    <div class="study-browser-series">
+        <div class="study-series-container">
+            {{#each thumbnail in instance.thumbnails.get}}
+                {{>thumbnailEntry (clone '' thumbnail=thumbnail)}}
+            {{/each}}
+        </div>
+    </div>
+</template>

Packages/ohif-studies/imports/client/components/browser/series.js

@@ -0,0 +1,40 @@
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Tracker } from 'meteor/tracker';
+import { OHIF } from 'meteor/ohif:core';
+
+Template.studyBrowserSeries.onCreated(() => {
+    const instance = Template.instance();
+    const { studyInformation } = instance.data;
+    const { studyInstanceUid } = studyInformation;
+
+    instance.thumbnails = new ReactiveVar([]);
+
+    // Get the study metadata and update the study thumbnails
+    instance.autorun(() => {
+        const studyMetadata = OHIF.viewer.Studies.findBy({ studyInstanceUid });
+
+        // Defines the resulting thumbnails list
+        const thumbnails = [];
+        studyMetadata.displaySets.forEach((stack, thumbnailIndex) => {
+            thumbnails.push({
+                thumbnailIndex,
+                stack
+            });
+        });
+
+        instance.thumbnails.set(thumbnails);
+    });
+});
+
+Template.studyBrowserSeries.onRendered(() => {
+    const instance = Template.instance();
+
+    // Run this computation every time the thumbnails are changed
+    instance.autorun(() => {
+        instance.thumbnails.get();
+        Tracker.afterFlush(() => {
+            instance.$('.study-browser-series').adjustMax('height');
+        });
+    });
+});