fix(viewport): Reset viewport state and fix CINE looping, thumbnail resolution, and dynamic tool settings (#4037)

platform/core/package.json

@@ -37,7 +37,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.70.5",
+    "@cornerstonejs/dicom-image-loader": "^1.70.6",
     "@ohif/ui": "3.8.0-beta.80",
     "cornerstone-math": "0.1.9",
     "dicom-parser": "^1.8.21"

platform/core/src/services/CineService/CineService.ts

@@ -14,6 +14,7 @@ class CineService extends PubSubService {
   };
 
   serviceImplementation = {};
+  startedClips = new Map();
 
   constructor() {
     super(CineService.EVENTS);
@@ -41,21 +42,26 @@ class CineService extends PubSubService {
   public playClip(element, playClipOptions) {
     const res = this.serviceImplementation._playClip(element, playClipOptions);
 
+    this.startedClips.set(element, playClipOptions);
+
     this._broadcastEvent(this.EVENTS.CINE_STATE_CHANGED, { isPlaying: true });
 
     return res;
   }
 
-  public stopClip(element) {
-    const res = this.serviceImplementation._stopClip(element);
+  public stopClip(element, stopClipOptions) {
+    const res = this.serviceImplementation._stopClip(element, stopClipOptions);
 
     this._broadcastEvent(this.EVENTS.CINE_STATE_CHANGED, { isPlaying: false });
 
     return res;
   }
 
-  public _onModeExit() {
+  public onModeExit() {
     this.setIsCineEnabled(false);
+    this.startedClips.forEach((value, key) => {
+      this.stopClip(key, value);
+    });
   }
 
   public getSyncedViewports(viewportId) {

platform/core/src/services/HangingProtocolService/HangingProtocolService.ts

@@ -1388,6 +1388,22 @@ export default class HangingProtocolService extends PubSubService {
     });
   }
 
+  public areRequiredSelectorsValid(
+    displaySetSelectors: HangingProtocol.DisplaySetSelector,
+    displaySet: any
+  ): boolean {
+    let pass = true;
+    for (const displaySetSelector of displaySetSelectors) {
+      try {
+        this._validateRequiredSelectors(displaySetSelector, displaySet);
+      } catch (error) {
+        pass = false;
+        break;
+      }
+    }
+    return pass;
+  }
+
   private _validateRequiredSelectors(
     displaySetSelector: HangingProtocol.DisplaySetSelector,
     displaySet: any

platform/core/src/services/PanelService/PanelService.tsx

@@ -49,9 +49,19 @@ export default class PanelService extends PubSubService {
     const entry = this._extensionManager.getModuleEntry(panelId);
 
     if (!entry) {
-      throw new Error(
-        `${panelId} is not a valid entry for an extension module, please check your configuration or make sure the extension is registered.`
-      );
+      // Check for similar panel names
+      const similarPanels = this._getSimilarPanels(panelId);
+
+      if (similarPanels.length > 0) {
+        const suggestion = `Did you mean: ${similarPanels.join(', ')}?`;
+        throw new Error(
+          `${panelId} is not a valid entry for an extension module. ${suggestion} Please check your configuration or make sure the extension is registered.`
+        );
+      } else {
+        throw new Error(
+          `${panelId} is not a valid entry for an extension module, please check your configuration or make sure the extension is registered.`
+        );
+      }
     }
 
     if (!entry?.component) {
@@ -65,6 +75,27 @@ export default class PanelService extends PubSubService {
     return { entry, content };
   }
 
+  private _getSimilarPanels(panelId: string, threshold = 0.8): string[] {
+    const registeredPanels = Object.keys(this._extensionManager.modulesMap).filter(name =>
+      name.includes('panelModule')
+    );
+
+    const similarPanels = registeredPanels.filter(registeredPanelId => {
+      const similarity = this._calculateSimilarity(panelId, registeredPanelId);
+      return similarity >= threshold;
+    });
+
+    return similarPanels;
+  }
+
+  private _calculateSimilarity(str1: string, str2: string): number {
+    const set1 = new Set(str1.toLowerCase().split(''));
+    const set2 = new Set(str2.toLowerCase().split(''));
+    const intersection = new Set([...set1].filter(x => set2.has(x)));
+    const union = new Set([...set1, ...set2]);
+    return intersection.size / union.size;
+  }
+
   public getPanelData(panelId): PanelData {
     let content, entry;
     if (Array.isArray(panelId)) {

platform/core/src/services/ViewportGridService/ViewportGridService.ts

@@ -150,6 +150,7 @@ class ViewportGridService extends PubSubService {
     layoutType = 'grid',
     activeViewportId = undefined,
     findOrCreateViewport = undefined,
+    isHangingProtocolLayout = false,
   }) {
     this.serviceImplementation._setLayout({
       numCols,
@@ -158,6 +159,7 @@ class ViewportGridService extends PubSubService {
       layoutType,
       activeViewportId,
       findOrCreateViewport,
+      isHangingProtocolLayout,
     });
     this._broadcastEvent(this.EVENTS.LAYOUT_CHANGED, {
       numCols,

platform/core/src/services/ViewportGridService/getPresentationIds.ts

@@ -116,6 +116,10 @@ const getPresentationIds = (viewport, viewports): PresentationIds => {
     positionPresentationArr.push(id);
   }
 
+  if (displaySetOptions.some(ds => ds.options?.blendMode || ds.options?.displayPreset)) {
+    positionPresentationArr.push(`custom`);
+  }
+
   for (const uid of displaySetInstanceUIDs) {
     positionPresentationArr.push(uid);
     lutPresentationArr.push(uid);
@@ -124,7 +128,7 @@ const getPresentationIds = (viewport, viewports): PresentationIds => {
   // only add unique index if the viewport is getting inserted and not updated
   const isUpdatingSameViewport = Array.from(viewports.values()).some(v => {
     return (
-      v.displaySetInstanceUIDs.toString() === viewport.displaySetInstanceUIDs.toString() &&
+      v.displaySetInstanceUIDs?.toString() === viewport.displaySetInstanceUIDs?.toString() &&
       v.viewportId === viewport.viewportId
     );
   });