fix: remaining bugs for MPR and toolbar icon colors (#3026)

* feat: warn for overlapping segments

* fix: typo

* refactor mpr toggle and stack sync

* fix: wip for more general mpr

* fix: tool groups for mpr

* fix: changing of viewport id

* fix: viewport Id for the seg viewports

* fix

* update cornerstone version

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

@@ -590,6 +590,8 @@ class SegmentationService {
     // Note: ideally we could use the TypedArray set method, but since each
     // slice can have multiple segments, we need to loop over each slice and
     // set the segment value for each segment.
+    let overlappingSegments = false;
+
     const _segmentInfoUpdate = (segmentInfo, segmentIndex) => {
       const { pixelData: segPixelData } = segmentInfo;
 
@@ -636,6 +638,10 @@ class SegmentationService {
           i++, j++
         ) {
           if (functionGroupPixelData[j] !== 0) {
+            if (derivedVolumeScalarData[i] !== 0) {
+              overlappingSegments = true;
+            }
+
             derivedVolumeScalarData[i] = segmentIndex;
 
             // centroid calculations
@@ -716,6 +722,7 @@ class SegmentationService {
     this._broadcastEvent(EVENTS.SEGMENTATION_PIXEL_DATA_CREATED, {
       segmentationId,
       segDisplaySet,
+      overlappingSegments,
     });
 
     return this.addOrUpdateSegmentation(segmentationSchema, suppressEvents);

extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts

@@ -77,17 +77,14 @@ class CornerstoneViewportService implements IViewportService {
     viewportOptions: PublicViewportOptions,
     elementRef: HTMLDivElement
   ) {
-    const viewportId =
-      viewportOptions.viewportId || this.getViewportId(viewportIndex);
-    const viewportInfo = new ViewportInfo(viewportIndex, viewportId);
+    const viewportInfo = new ViewportInfo(
+      viewportIndex,
+      viewportOptions.viewportId
+    );
     viewportInfo.setElement(elementRef);
     this.viewportsInfo.set(viewportIndex, viewportInfo);
   }
 
-  public getViewportId(viewportIndex: number): string {
-    return `viewport-${viewportIndex}`;
-  }
-
   public getViewportIds(): string[] {
     const viewportIds = [];
 
@@ -176,6 +173,22 @@ class CornerstoneViewportService implements IViewportService {
   ): void {
     const renderingEngine = this.getRenderingEngine();
     const viewportInfo = this.viewportsInfo.get(viewportIndex);
+    let viewportId = viewportInfo.getViewportId();
+
+    // if currently there is a viewport with the viewportId, but it is not the same
+    // as the one we are trying to set, we need to disable the old one
+    // and enable the new one, we could ideally change the name of the viewportId
+    // but the viewportId is an integral part in renderers map, tools svg cache
+    // etc. which would require a lot of refactoring, for now we will just disable
+    // the old one and enable the new one at the end of this function
+    let newViewportId = null;
+    if (publicViewportOptions?.viewportId !== viewportId) {
+      newViewportId = publicViewportOptions.viewportId;
+      viewportInfo.setViewportId(newViewportId);
+
+      renderingEngine.disableElement(viewportId);
+    }
+
     viewportInfo.setRenderingEngineId(renderingEngine.id);
 
     const {
@@ -196,7 +209,7 @@ class CornerstoneViewportService implements IViewportService {
       viewportIndex,
     });
 
-    const viewportId = viewportInfo.getViewportId();
+    viewportId = viewportInfo.getViewportId();
     const element = viewportInfo.getElement();
     const type = viewportInfo.getViewportType();
     const background = viewportInfo.getBackground();
@@ -218,7 +231,8 @@ class CornerstoneViewportService implements IViewportService {
     // ENABLED_ELEMENT again and again, which will run onEnableElement callbacks
     renderingEngine.enableElement(viewportInput);
 
-    this._setDisplaySets(viewportId, viewportData, viewportInfo);
+    const viewport = renderingEngine.getViewport(viewportId);
+    this._setDisplaySets(viewport, viewportData, viewportInfo);
   }
 
   public getCornerstoneViewport(
@@ -616,12 +630,10 @@ class CornerstoneViewportService implements IViewportService {
   }
 
   _setDisplaySets(
-    viewportId: string,
+    viewport: StackViewport | VolumeViewport,
     viewportData: StackViewportData | VolumeViewportData,
     viewportInfo: ViewportInfo
   ): void {
-    const viewport = this.getCornerstoneViewport(viewportId);
-
     if (viewport instanceof StackViewport) {
       this._setStackViewport(
         viewport,
@@ -687,10 +699,6 @@ class CornerstoneViewportService implements IViewportService {
   } {
     const viewportIndex = viewportInfo.getViewportIndex();
 
-    if (!publicViewportOptions.viewportId) {
-      publicViewportOptions.viewportId = this.getViewportId(viewportIndex);
-    }
-
     // Creating a temporary viewportInfo to handle defaults
     const newViewportInfo = new ViewportInfo(
       viewportIndex,