PWV-73 Determine missing timepoint studies

- Display timepoint availability based on its studies' availability
- Display study availability in study level when timepoint is loaded

Packages/ohif-lesiontracker/client/components/timepointBrowser/item.html

@@ -2,6 +2,9 @@
     <div class="timepoint-browser-item" data-id="{{this.timepoint.timepointId}}">
         <div class="timepoint-item p-y-2">
             <div class="timepoint-details clearfix">
+                <div class="timepoint-study-availability pull-left m-r-1" >
+                    <i class="fa fa-circle {{studyAvailability}}"></i>
+                </div>
                 <div class="timepoint-title pull-left">
                     {{this.timepointApi.title timepoint}}
                 </div>

Packages/ohif-lesiontracker/client/components/timepointBrowser/item.js

@@ -13,6 +13,7 @@ Template.timepointBrowserItem.onCreated(() => {
     const hasStudiesData = !!(timepoint.studiesData && timepoint.studiesData.length);
     instance.summary = new ReactiveVar('');
     instance.studiesData = new ReactiveVar(hasStudiesData ? timepoint.studiesData : null);
+    instance.missingStudyUids = new ReactiveVar(null);
 
     const updateStudiesData = newDocument => {
         const newTimepoint = newDocument || timepointApi.timepoints.findOne({ timepointId });
@@ -57,10 +58,45 @@ Template.timepointBrowserItem.onCreated(() => {
         const studiesData = instance.studiesData.get();
         if (studiesData) {
             instance.setModalitiesSummary();
+
+            //  Determine missing timepoint studies
+            const missingStudyUids = [];
+            timepoint.studyInstanceUids.forEach((timepointStudyUid) => {
+                if (!studiesData.find(studyData => studyData.available && studyData.studyInstanceUid === timepointStudyUid)) {
+                    missingStudyUids.push(timepointStudyUid);
+                }
+            });
+            instance.missingStudyUids.set(missingStudyUids);
         }
     });
 });
 
+Template.timepointBrowserItem.helpers({
+    studyAvailability: () => {
+        const instance = Template.instance();
+        const { timepoint } = instance.data;
+        const missingStudyUids = instance.missingStudyUids && instance.missingStudyUids.get();
+
+        if (!missingStudyUids || !timepoint) {
+            //  Timepoint studies are not loaded/checked yet (may be indicated as disabled circle)
+            return "studies-not-ready";
+        }
+
+        if (missingStudyUids.length >= timepoint.studyInstanceUids.length) {
+            //  All timepoint studies are not available (may be indicated as empty circle)
+            return "studies-not-available";
+        }
+
+        if (missingStudyUids.length > 0) {
+            //  Timepoint studies are partially available (may be indicated as half-filled circle)
+            return "studies-partially-available";
+        }
+
+        //  All timepoint studies are available (may be indicated as filled circle)
+        return "studies-fully-available";
+    }
+});
+
 Template.timepointBrowserItem.events({
     'ohif.lesiontracker.timepoint.load .timepoint-item'(event, instance) {
         instance.loadStudies();

Packages/ohif-lesiontracker/client/components/timepointBrowser/list.styl

@@ -78,6 +78,16 @@
     theme('color', '$textPrimaryColor')
     padding-top: 2px
 
+  .timepoint-study-availability
+    .studies-not-ready
+      color: gray
+    .studies-not-available
+      color: red
+    .studies-partially-available
+      color: yellow
+    .studies-fully-available
+      color: green
+
 .series-quick-switch .timepoint-browser-list
   padding: 0 10px
 

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

@@ -10,8 +10,12 @@
                         <div class="study-modality-text" style="{{modalityStyle studyData.modalities}}">{{studyData.modalities}}</div>
                     </div>
                     <div class="study-text">
-                        <div class="study-date">{{formatDA studyData.studyDate 'D-MMM-YYYY'}}</div>
-                        <div class="study-description">{{studyData.studyDescription}}</div>
+                        {{#if isLoaded}}
+                            <div class="study-date">{{formatDA studyData.studyDate 'D-MMM-YYYY'}}</div>
+                            <div class="study-description">{{studyData.studyDescription}}</div>
+                        {{else}}
+                            <div class="study-availability">{{#if studyData.available}}Click to load{{else}}N/A{{/if}}</div>
+                        {{/if}}
                     </div>
                 </div>
             {{/let}}

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

@@ -10,7 +10,7 @@ Template.studyBrowserItem.onCreated(() => {
     const { studyInformation } = instance.data;
     const { studyInstanceUid } = studyInformation;
 
-    instance.loaded = false;
+    instance.loaded = new ReactiveVar(false);
     instance.loading = new ReactiveVar(false);
 
     instance.studyData = new ReactiveVar(studyInformation);
@@ -44,7 +44,7 @@ Template.studyBrowserItem.onCreated(() => {
                 modalities: firstInstance.getRawValue('x00080060') || '',
             });
 
-            instance.loaded = true;
+            instance.loaded.set(true);
             instance.loading.set(false);
         }
     });
@@ -55,6 +55,12 @@ Template.studyBrowserItem.events({
         if (instance.loading.get()) return;
 
         const { studyInformation } = instance.data;
+
+        //  Skip if study is not available
+        if (!studyInformation.available) {
+            return;
+        }
+
         const element = event.currentTarget.parentElement;
         const $element = $(element);
         const triggerClick = () => {
@@ -65,12 +71,12 @@ Template.studyBrowserItem.events({
             $element.trigger(newEvent, studyInformation);
         };
 
-        if (instance.loaded) {
+        if (instance.loaded.get()) {
             triggerClick();
         } else {
             instance.loading.set(true);
             OHIF.studies.loadStudy(studyInformation.studyInstanceUid).then(() => {
-                instance.loaded = true;
+                instance.loaded.set(true);
                 instance.loading.set(false);
                 $element.trigger('ohif.studies.study.load', studyInformation);
                 Tracker.afterFlush(triggerClick);
@@ -80,6 +86,10 @@ Template.studyBrowserItem.events({
 });
 
 Template.studyBrowserItem.helpers({
+    isLoaded() {
+        return Template.instance().loaded.get();
+    },
+
     isLoading() {
         return Template.instance().loading.get();
     },

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

@@ -104,6 +104,9 @@ $spacerY = 12px
     .study-description
       margin-top: 8px
       theme('color', '$textPrimaryColor')
+    .study-availability
+      margin-top: 24px
+      theme('color', '$textPrimaryColor')
 
   .study-modality
     theme('color', '$textSecondaryColor')