Re-rendering the thumbnail when external data is changed

Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js

@@ -1,11 +1,7 @@
 import { Template } from 'meteor/templating';
 import { Tracker } from 'meteor/tracker';
 import { Session } from 'meteor/session';
-// OHIF Modules
 import { OHIF } from 'meteor/ohif:core';
-// Local Modules
-import { getImageId } from '../../../lib/getImageId.js';
-import { getWADORSImageId } from '../../../lib/getWADORSImageId.js';
 
 Template.imageThumbnail.onCreated(() => {
     const instance = Template.instance();
@@ -17,7 +13,7 @@ Template.imageThumbnail.onCreated(() => {
         let imageIndex = Math.floor(lastIndex / 2);
         let imageInstance;
 
-        if(stack.isMultiFrame) {
+        if (stack.isMultiFrame) {
             imageInstance = stack.images[0];
         } else {
             imageInstance = stack.images[imageIndex];
@@ -79,6 +75,9 @@ Template.imageThumbnail.onRendered(() => {
             instance.data.currentStudy.dep.depend();
         }
 
+        // Depend on external data and re-run this computation when it changes
+        Template.currentData();
+
         // Wait for the new data and refresh the image thumbnail
         Tracker.afterFlush(() => instance.refreshImage());
     });

Packages/ohif-viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.js

@@ -8,40 +8,44 @@ import { thumbnailDragHandlers } from '../../../lib/thumbnailDragHandlers';
 Template.thumbnailEntry.onCreated(() => {
     const instance = Template.instance();
 
-// Check if the thumbnails will be draggable or clickable
+    // Check if the thumbnails will be draggable or clickable
-instance.isDragAndDrop = _.isUndefined(instance.data.viewportIndex);
+    instance.isDragAndDrop = _.isUndefined(instance.data.viewportIndex);
 });
 
 Template.thumbnailEntry.events({
     // Event handlers for drag and drop
     'touchstart .thumbnailEntry, mousedown .thumbnailEntry'(event, instance) {
         const data = instance.data.thumbnail.stack;
-        instance.isDragAndDrop && thumbnailDragHandlers.thumbnailDragStartHandler(event, data);
+        if (!instance.isDragAndDrop) return;
+        thumbnailDragHandlers.thumbnailDragStartHandler(event, data);
     },
 
     'touchmove .thumbnailEntry'(event, instance) {
-        instance.isDragAndDrop && thumbnailDragHandlers.thumbnailDragHandler(event);
+        if (!instance.isDragAndDrop) return;
+        thumbnailDragHandlers.thumbnailDragHandler(event);
     },
 
     'touchend .thumbnailEntry'(event, instance) {
         const data = instance.data.thumbnail.stack;
-        instance.isDragAndDrop && thumbnailDragHandlers.thumbnailDragEndHandler(event, data);
+        if (!instance.isDragAndDrop) return;
+        thumbnailDragHandlers.thumbnailDragEndHandler(event, data);
     },
 
     // Event handlers for click (quick switch)
     'click .thumbnailEntry'(event, instance) {
-        if (!instance.isDragAndDrop) {
+        if (instance.isDragAndDrop) return;
+
         // Get the thumbnail stack data
         const data = instance.data.thumbnail.stack;
 
         // Rerender the viewport using the clicked thumbnail data
         OHIF.viewerbase.layoutManager.rerenderViewportWithNewDisplaySet(instance.data.viewportIndex, data);
-        }
     },
 
     // Event handlers for double click
     'dblclick .thumbnailEntry'(event, instance) {
-        if (instance.isDragAndDrop) {
+        if (!instance.isDragAndDrop) return;
+
         // Get the active viewport index and total number of viewports...
         const viewportCount = OHIF.viewerbase.layoutManager.getNumberOfViewports();
         let viewportIndex = Session.get('activeViewport') || 0;
@@ -55,13 +59,13 @@ Template.thumbnailEntry.events({
         // Rerender the viewport using the clicked thumbnail data
         OHIF.viewerbase.layoutManager.rerenderViewportWithNewDisplaySet(viewportIndex, data);
     }
-    }
 });
 
 Template.thumbnailEntry.helpers({
     draggableClass() {
         return Template.instance().isDragAndDrop ? 'draggable' : '';
     },
+
     instanceNumber() {
         const thumbnail = Template.instance().data.thumbnail;
         if (!thumbnail) {

Packages/ohif-viewerbase/client/lib/helpers/studyThumbnails.js

@@ -16,10 +16,10 @@ Template.registerHelper('studyThumbnails', study => {
     const thumbnails = [];
 
     // Iterate over the stacks and add one by one with its index
-    _.each(stacks, (stack, index) => {
+    _.each(stacks, (stack, thumbnailIndex) => {
         thumbnails.push({
-            thumbnailIndex: index,
+            thumbnailIndex,
-            stack: stack
+            stack
         });
     });