fix(tmtv): fix toggle one up weird behaviours (#4473)

extensions/cornerstone/package.json

@@ -38,7 +38,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.4",
     "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^2.1.16",
+    "@cornerstonejs/dicom-image-loader": "^2.1.17",
     "@icr/polyseg-wasm": "^0.4.0",
     "@ohif/core": "3.9.0-beta.107",
     "@ohif/ui": "3.9.0-beta.107",
@@ -55,9 +55,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^2.1.16",
-    "@cornerstonejs/core": "^2.1.16",
-    "@cornerstonejs/tools": "^2.1.16",
+    "@cornerstonejs/adapters": "^2.1.17",
+    "@cornerstonejs/core": "^2.1.17",
+    "@cornerstonejs/tools": "^2.1.17",
     "@icr/polyseg-wasm": "^0.4.0",
     "@kitware/vtk.js": "32.1.0",
     "html2canvas": "^1.4.1",

extensions/cornerstone/src/commandsModule.ts

@@ -871,7 +871,7 @@ function commandsModule({
       }
 
       crosshairInstances.forEach(ins => {
-        ins?.resetCrosshairs();
+        ins?.computeToolCenter();
       });
     },
     /**

extensions/cornerstone/src/components/ViewportDataOverlaySettingMenu/ViewportSegmentationMenu.tsx

@@ -110,22 +110,20 @@ function ViewportSegmentationMenu({
           <Separator className="bg-input mb-3" />
           <span className="text-muted-foreground mb-2 text-xs font-semibold">Available</span>
           <ul className="space-y-1">
-            {availableSegmentations.map(segmentation => (
+            {availableSegmentations.map(({segmentationId, label}) => (
               <li
-                key={segmentation.segmentation.segmentationId}
+                key={segmentationId}
                 className="flex items-center text-sm"
               >
                 <Button
                   variant="ghost"
                   size="icon"
                   className="text-muted-foreground mr-2"
-                  onClick={() =>
-                    addSegmentationToViewport(segmentation.segmentation.segmentationId)
-                  }
+                  onClick={() => addSegmentationToViewport(segmentationId)}
                 >
                   <Icons.Plus className="h-6 w-6" />
                 </Button>
-                <span className="text-foreground/60">{segmentation.segmentation.label}</span>
+                <span className="text-foreground/60">{label}</span>
               </li>
             ))}
           </ul>

extensions/cornerstone/src/components/ViewportDataOverlaySettingMenu/ViewportSegmentationMenuWrapper.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, useEffect, useState } from 'react';
 import { Button, Icons, Popover, PopoverContent, PopoverTrigger } from '@ohif/ui-next';
 import ViewportSegmentationMenu from './ViewportSegmentationMenu';
 import classNames from 'classnames';
+import { useSegmentations } from '../../hooks/useSegmentations';
 
 export function ViewportSegmentationMenuWrapper({
   viewportId,
@@ -13,35 +14,16 @@ export function ViewportSegmentationMenuWrapper({
   viewportId: string;
   element: HTMLElement;
 }>): ReactNode {
-  const { segmentationService, viewportActionCornersService, viewportGridService } =
-    servicesManager.services;
-  const [representations, setRepresentations] = useState(null);
+  const { viewportActionCornersService, viewportGridService } = servicesManager.services;
 
-  useEffect(() => {
-    const representations = segmentationService.getSegmentationRepresentations(viewportId);
-    setRepresentations(representations);
-  }, [viewportId, segmentationService]);
-
-  useEffect(() => {
-    const { unsubscribe } = segmentationService.subscribe(
-      segmentationService.EVENTS.SEGMENTATION_REPRESENTATION_MODIFIED,
-      () => {
-        const representations = segmentationService.getSegmentationRepresentations(viewportId);
-        setRepresentations(representations);
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [viewportId, segmentationService]);
+  const segmentations = useSegmentations({ servicesManager });
 
   const activeViewportId = viewportGridService.getActiveViewportId();
   const isActiveViewport = viewportId === activeViewportId;
 
   const { align, side } = getAlignAndSide(viewportActionCornersService, location);
 
-  if (!representations?.length) {
+  if (!segmentations?.length) {
     return null;
   }