Creating sidebar templates for studies/timepoints browsers

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

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

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

@@ -2,6 +2,7 @@ import { Template } from 'meteor/templating';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Tracker } from 'meteor/tracker';
 import { $ } from 'meteor/jquery';
+import { _ } from 'meteor/underscore';
 import { OHIF } from 'meteor/ohif:core';
 
 Template.studyBrowserItem.onCreated(() => {
@@ -11,7 +12,7 @@ Template.studyBrowserItem.onCreated(() => {
     instance.loading = new ReactiveVar(false);
 
     const modalities = instance.data.studyInformation.modalities || 'UN';
-    instance.modalities = modalities.replace(/\\/g, ' ');
+    instance.modalities = _.uniq(modalities.split(/[^A-Za-z]+/g)).join(' ');
 });
 
 Template.studyBrowserItem.events({
@@ -27,7 +28,7 @@ Template.studyBrowserItem.events({
             triggerClick();
         } else {
             instance.loading.set(true);
-            OHIF.studies.retrieveStudyMetadata(studyInformation.studyInstanceUid).then(() => {
+            OHIF.studies.loadStudy(studyInformation.studyInstanceUid).then(() => {
                 instance.loaded = true;
                 instance.loading.set(false);
                 $element.trigger('ohif.studies.study.load', studyInformation);
@@ -43,22 +44,19 @@ Template.studyBrowserItem.helpers({
     },
 
     modalityStyle() {
-        // Responsively styles the Modality Acronyms for studies
-        // with more than one modality
+        // Responsively styles the Modality Acronyms for studies with more than one modality
         const instance = Template.instance();
         const numModalities = instance.modalities.split(/\s/g).length;
 
         if (numModalities === 1) {
-            // If we have only one modality, it should take up the whole div.
-            return 'font-size: 1em';
+            // If we have only one modality, it should take up the whole div
+            return 'font-size:1em';
         } else if (numModalities === 2) {
-            // If we have two, let them sit side-by-side
-            return 'font-size: 0.75em';
+            // If we have two modalities, let them sit side-by-side
+            return 'font-size:0.7em';
         } else {
-            // If we have more than two modalities, change the line height to display multiple rows,
-            // depending on the number of modalities we need to display.
-            const lineHeight = Math.ceil(numModalities / 2) * 1.2;
-            return 'line-height: ' + lineHeight + 'em';
+            // If we have more than two modalities, change the line height to display multiple rows
+            return 'font-size:0.7em;line-height:1.4em;padding-top:0.5em';
         }
     }
 });

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

@@ -17,14 +17,16 @@ $spacerY = 12px
   transform(scale(1))
 
   .loadingTextDiv
-    padding: 25px
-    border-radius: 12px
-    position: absolute
-    opacity: 0
-    z-index: 100
+    theme('color', '$textSecondaryColor')
     background-color: $boxHoverBackgroundColor
-    pointer-events: none
+    border-radius: 12px
+    font-size: 32px
+    opacity: 0
     margin: 0
+    padding: 25px
+    position: absolute
+    pointer-events: none
+    z-index: 100
 
   &.loading
     .loadingTextDiv
@@ -111,9 +113,10 @@ $spacerY = 12px
     position: relative
 
     .study-modality-text
+      height: 100%
+      overflow: hidden
       text-align: center
       text-transform: uppercase
-      height: 100%
 
     &
     &:before

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

@@ -0,0 +1,5 @@
+<template name="studyBrowserSidebar">
+    {{#scrollArea class='full-height' scrollableClass='p-a-1'}}
+        {{>studyBrowserList (clone this studyChildTemplate='studyBrowserSeries')}}
+    {{/scrollArea}}
+</template>

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

@@ -0,0 +1,13 @@
+import { Template } from 'meteor/templating';
+
+Template.studyBrowserSidebar.events({
+    'ohif.studies.study.click'(event, instance) {
+        const $element = $(event.currentTarget);
+
+        // Remove active class from sibling studies
+        $element.siblings().removeClass('active');
+
+        // Toggle the active class on clicked study
+        $element.toggleClass('active');
+    }
+});

Packages/ohif-studies/imports/client/lib/index.js

@@ -1,2 +1,4 @@
+import './loadStudy';
 import './retrieveStudiesMetadata';
 import './retrieveStudyMetadata';
+import './searchStudies';

Packages/ohif-studies/imports/client/lib/loadStudy.js

@@ -0,0 +1,20 @@
+import { OHIF } from 'meteor/ohif:core';
+
+/**
+ * Load the study metadata and store its information locally
+ *
+ * @param {String} studyInstanceUid The UID of the Study to be loaded
+ * @returns {Promise} that will be resolved with the study metadata or rejected with an error
+ */
+OHIF.studies.loadStudy = studyInstanceUid => new Promise((resolve, reject) => {
+    OHIF.studies.retrieveStudyMetadata(studyInstanceUid).then(study => {
+        // Double check to make sure this study wasn't already inserted into OHIF.viewer.Studies
+        // so we don't cause duplicate entry errors
+        const loaded = OHIF.viewer.Studies.findBy({ studyInstanceUid: study.studyInstanceUid });
+        if (!loaded) {
+            OHIF.viewer.Studies.insert(study);
+        }
+
+        resolve(study);
+    }).catch(reject);
+});

Packages/ohif-studies/imports/client/lib/searchStudies.js

@@ -0,0 +1,18 @@
+import { Meteor } from 'meteor/meteor';
+import { OHIF } from 'meteor/ohif:core';
+
+/**
+ * Search for studies information by the given filter
+ *
+ * @param {Object} filter Filter that will be used on search
+ * @returns {Promise} resolved with an array of studies information or rejected with an error
+ */
+OHIF.studies.searchStudies = filter => new Promise((resolve, reject) => {
+    Meteor.call('StudyListSearch', filter, (error, studiesData) => {
+        if (error) {
+            reject(error);
+        } else {
+            resolve(studiesData);
+        }
+    });
+});