LT-399: Load measurements and sync viewports when clicking on measurement number

Packages/ohif-measurements/client/components/measurementTable/measurementTableRow/measurementTableRow.js

@@ -25,8 +25,13 @@ const keys = {
 Template.measurementTableRow.events({
     'click .measurementRowSidebar'(event, instance) {
         const $row = instance.$('.measurementTableRow');
+        const rowItem = instance.data.rowItem;
+        const timepoints = instance.data.timepoints.get();
+
         $row.closest('.measurementTableView').find('.measurementTableRow').not($row).removeClass('active');
         $row.toggleClass('active');
+
+        OHIF.measurements.jumpToRowItem(rowItem, timepoints);
     },
 
     'click .js-rename'(event, instance) {

Packages/ohif-measurements/client/lib/jumpToRowItem.js

@@ -58,6 +58,10 @@ function renderIntoViewport(viewportIndex, studyInstanceUid, seriesInstanceUid,
     }
 }
 
+function syncViewports(viewportsIndexes) {
+    OHIF.viewer.stackImagePositionOffsetSynchronizer.activateByViewportIndexes(viewportsIndexes);
+}
+
 /**
  * Activates a set of lesions when lesion table row is clicked
  *
@@ -67,6 +71,14 @@ OHIF.measurements.jumpToRowItem = (rowItem, timepoints) => {
     OHIF.measurements.deactivateAllToolData();
 
     const activateMeasurements = OHIF.measurements.activateMeasurements;
+    const activatedViewportIndexes = [];
+    const syncViewportsByIndexesOnce = _.once(syncViewports);
+    let syncViewportsCaller = syncViewports;
+    let renderCount = 0;
+
+    // Deactivate stack synchronizer because it will be re-activated later
+    OHIF.viewer.stackImagePositionOffsetSynchronizer.deactivate();
+
     console.log('jumpToRowItem');
 
     // Retrieve the timepoints that are currently being displayed in the
@@ -101,6 +113,8 @@ OHIF.measurements.jumpToRowItem = (rowItem, timepoints) => {
         // Check if the study / series we need is already the one in the viewport
         const element = $viewports.get(i);
 
+        activatedViewportIndexes.push(i);
+
         // TODO: Implement isEnabledElement in Cornerstone
         // or maybe just remove the 'error' this throws?
         let enabledElement;
@@ -124,10 +138,13 @@ OHIF.measurements.jumpToRowItem = (rowItem, timepoints) => {
             }
         }
 
+        syncViewportsCaller = _.after(++renderCount, syncViewportsCaller);
+
         // Otherwise, re-render the viewport with the required study/series, then
         // add an onRendered callback to activate the measurements
         const renderedCallback = element => {
             activateMeasurements(element, measurementData);
+            syncViewportsCaller(activatedViewportIndexes);
         };
 
         // TODO: Support frames? e.g. for measurements on multi-frame instances
@@ -137,4 +154,8 @@ OHIF.measurements.jumpToRowItem = (rowItem, timepoints) => {
                            measurementData.sopInstanceUid,
                            renderedCallback);
     }
+
+    if(!renderCount) {
+        syncViewportsCaller(activatedViewportIndexes);
+    }
 };

Packages/ohif-viewerbase/client/lib/stackImagePositionOffsetSynchronizer.js

@@ -18,28 +18,13 @@ class StackImagePositionOffsetSynchronizer {
   }
 
   activate() {
-    if(this.isActive()) {
-      return;
-    }
-
     const viewports = this.getLinkableViewports();
-    const viewportIndexes = [];
+    this.syncViewports(viewports);
+  }
 
-    if(viewports.length <= 1) {
-      return;
-    }
-
-    viewports.forEach((viewport, index) => {
-      this.synchronizer.add(viewport.element);
-      this.syncedViewports.push(viewport);
-      viewportIndexes.push(viewport.index)
-      
-      $(viewport.element).on(StackImagePositionOffsetSynchronizer.ELEMENT_DISABLED_EVENT, this.elementDisabledHandler(this));
-    });
-
-    this.active = true;
-    toolManager.activateCommandButton('link');
-    Session.set('StackImagePositionOffsetSynchronizerLinkedViewports', viewportIndexes);
+  activateByViewportIndexes(viewportIndexes) {
+    const viewports = this.getViewportByIndexes(viewportIndexes);
+    this.syncViewports(viewports);
   }
 
   deactivate() {
@@ -71,6 +56,27 @@ class StackImagePositionOffsetSynchronizer {
     this.activate();
   }
 
+  syncViewports(viewports) {
+    const viewportIndexes = [];
+
+    if(this.isActive() || (viewports.length <= 1)) {
+      return;
+    }
+
+    viewports.forEach((viewport, index) => {
+      this.synchronizer.add(viewport.element);
+      this.syncedViewports.push(viewport);
+      viewportIndexes.push(viewport.index)
+      
+      $(viewport.element).on(StackImagePositionOffsetSynchronizer.ELEMENT_DISABLED_EVENT, this.elementDisabledHandler(this));
+    });
+
+    this.active = true;
+    toolManager.activateCommandButton('link');
+    Session.set('StackImagePositionOffsetSynchronizerLinkedViewports', viewportIndexes);
+
+  }
+
   isViewportSynced(viewportElement) {
     return !!this.getViewportByElement(viewportElement);
   }
@@ -129,6 +135,26 @@ class StackImagePositionOffsetSynchronizer {
     }
   }
 
+  getViewportByIndexes(viewportIndexes) {
+      const viewports = [];
+      const viewportElements = $('.imageViewerViewport');
+
+      viewportIndexes.forEach(index => {
+          const element = viewportElements.get(index);
+
+          if(!element) {
+            return;
+          }
+
+          viewports.push({
+            index,
+            element
+          });
+      });
+
+      return viewports;
+  }
+
   getLinkableViewports() {
     const activeViewportElement = this.getActiveViewportElement();
     const activeViewportImageNormal = this.getViewportImageNormal(activeViewportElement);