fix(SR): KO series being displayed in browser list (#3382)

* fix: KO series being displayed in browser list

* fix sr for volume viewports

* move highlight labelmap to RAF

* remove commented code

* fix the hydration bug for the SR

* apply review comments

* revert the key images for sr

* Remove some obsolete changes

* set initial image for sr instead of jump

* Remove viewportType stack

---------

Co-authored-by: Alireza <ar.sedghi@gmail.com>

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -567,8 +567,9 @@ function _subscribeToJumpToMeasurementEvents(
           { referencedImageId: measurement.referencedImageId }
         );
       }
-      if (cacheJumpToMeasurementEvent.cornerstoneViewport !== viewportIndex)
+      if (cacheJumpToMeasurementEvent.cornerstoneViewport !== viewportIndex) {
         return;
+      }
       _jumpToMeasurement(
         measurement,
         elementRef,

extensions/cornerstone/src/services/SegmentationService/SegmentationService.ts

@@ -1247,37 +1247,39 @@ class SegmentationService extends PubSubService {
 
     const { fillAlpha } = this.getConfiguration(toolGroupId);
 
-    let count = 0;
-    const intervalTime = 16;
-    const numberOfFrames = Math.ceil(animationLength / intervalTime);
+    let startTime: number = null;
+    const animation = (timestamp: number) => {
+      if (startTime === null) {
+        startTime = timestamp;
+      }
+
+      const elapsed = timestamp - startTime;
+      const progress = Math.min(elapsed / animationLength, 1);
 
-    this.highlightIntervalId = setInterval(() => {
-      const x = (count * intervalTime) / animationLength;
       cstSegmentation.config.setSegmentSpecificConfig(
         toolGroupId,
         segmentationRepresentation.segmentationRepresentationUID,
         {
           [segmentIndex]: {
             LABELMAP: {
-              fillAlpha: easeInOutBell(x, fillAlpha),
+              fillAlpha: easeInOutBell(progress, fillAlpha),
             },
           },
         }
       );
 
-      count++;
-
-      if (count === numberOfFrames) {
-        clearInterval(this.highlightIntervalId);
+      if (progress < 1) {
+        requestAnimationFrame(animation);
+      } else {
         cstSegmentation.config.setSegmentSpecificConfig(
           toolGroupId,
           segmentationRepresentation.segmentationRepresentationUID,
           {}
         );
-
-        this.highlightIntervalId = null;
       }
-    }, intervalTime);
+    };
+
+    requestAnimationFrame(animation);
   }
 
   private _highlightContour(