OHIF with Cornerstone3D 2.0 (#4347)

extensions/tmtv/src/utils/hpViewports.ts

@@ -1,4 +1,22 @@
-const ctAXIAL = {
+// Common sync group configurations
+const cameraPositionSync = (id: string) => ({
+  type: 'cameraPosition',
+  id,
+  source: true,
+  target: true,
+});
+
+const hydrateSegSync = {
+  type: 'hydrateseg',
+  id: 'sameFORId',
+  source: true,
+  target: true,
+  options: {
+    matchingRules: ['sameFOR'],
+  },
+};
+
+const ctAXIAL: AppTypes.HangingProtocol.Viewport = {
   viewportOptions: {
     viewportId: 'ctAXIAL',
     viewportType: 'volume',
@@ -9,12 +27,7 @@ const ctAXIAL = {
       preset: 'first', // 'first', 'last', 'middle'
     },
     syncGroups: [
-      {
-        type: 'cameraPosition',
-        id: 'axialSync',
-        source: true,
-        target: true,
-      },
+      cameraPositionSync('axialSync'),
       {
         type: 'voi',
         id: 'ctWLSync',
@@ -24,6 +37,7 @@ const ctAXIAL = {
           syncColormap: true,
         },
       },
+      hydrateSegSync,
     ],
   },
   displaySets: [
@@ -33,49 +47,14 @@ const ctAXIAL = {
   ],
 };
 
-const ctSAGITTAL = {
+const ctSAGITTAL: AppTypes.HangingProtocol.Viewport = {
   viewportOptions: {
     viewportId: 'ctSAGITTAL',
     viewportType: 'volume',
     orientation: 'sagittal',
     toolGroupId: 'ctToolGroup',
     syncGroups: [
-      {
-        type: 'cameraPosition',
-        id: 'sagittalSync',
-        source: true,
-        target: true,
-      },
-      {
-        type: 'voi',
-        id: 'ctWLSync',
-        source: true,
-        target: true,
-        options: {
-          syncColormap: true,
-        },
-      },
-    ],
-  },
-  displaySets: [
-    {
-      id: 'ctDisplaySet',
-    },
-  ],
-};
-const ctCORONAL = {
-  viewportOptions: {
-    viewportId: 'ctCORONAL',
-    viewportType: 'volume',
-    orientation: 'coronal',
-    toolGroupId: 'ctToolGroup',
-    syncGroups: [
-      {
-        type: 'cameraPosition',
-        id: 'coronalSync',
-        source: true,
-        target: true,
-      },
+      cameraPositionSync('sagittalSync'),
       {
         type: 'voi',
         id: 'ctWLSync',
@@ -85,6 +64,7 @@ const ctCORONAL = {
           syncColormap: true,
         },
       },
+      hydrateSegSync,
     ],
   },
   displaySets: [
@@ -94,7 +74,34 @@ const ctCORONAL = {
   ],
 };
 
-const ptAXIAL = {
+const ctCORONAL: AppTypes.HangingProtocol.Viewport = {
+  viewportOptions: {
+    viewportId: 'ctCORONAL',
+    viewportType: 'volume',
+    orientation: 'coronal',
+    toolGroupId: 'ctToolGroup',
+    syncGroups: [
+      cameraPositionSync('coronalSync'),
+      {
+        type: 'voi',
+        id: 'ctWLSync',
+        source: true,
+        target: true,
+        options: {
+          syncColormap: true,
+        },
+      },
+      hydrateSegSync,
+    ],
+  },
+  displaySets: [
+    {
+      id: 'ctDisplaySet',
+    },
+  ],
+};
+
+const ptAXIAL: AppTypes.HangingProtocol.Viewport = {
   viewportOptions: {
     viewportId: 'ptAXIAL',
     viewportType: 'volume',
@@ -106,12 +113,7 @@ const ptAXIAL = {
       preset: 'first', // 'first', 'last', 'middle'
     },
     syncGroups: [
-      {
-        type: 'cameraPosition',
-        id: 'axialSync',
-        source: true,
-        target: true,
-      },
+      cameraPositionSync('axialSync'),
       {
         type: 'voi',
         id: 'ptWLSync',
@@ -131,6 +133,7 @@ const ptAXIAL = {
           syncInvertState: false,
         },
       },
+      hydrateSegSync,
     ],
   },
   displaySets: [
@@ -146,7 +149,7 @@ const ptAXIAL = {
   ],
 };
 
-const ptSAGITTAL = {
+const ptSAGITTAL: AppTypes.HangingProtocol.Viewport = {
   viewportOptions: {
     viewportId: 'ptSAGITTAL',
     viewportType: 'volume',
@@ -154,12 +157,7 @@ const ptSAGITTAL = {
     background: [1, 1, 1],
     toolGroupId: 'ptToolGroup',
     syncGroups: [
-      {
-        type: 'cameraPosition',
-        id: 'sagittalSync',
-        source: true,
-        target: true,
-      },
+      cameraPositionSync('sagittalSync'),
       {
         type: 'voi',
         id: 'ptWLSync',
@@ -179,6 +177,7 @@ const ptSAGITTAL = {
           syncInvertState: false,
         },
       },
+      hydrateSegSync,
     ],
   },
   displaySets: [
@@ -194,7 +193,7 @@ const ptSAGITTAL = {
   ],
 };
 
-const ptCORONAL = {
+const ptCORONAL: AppTypes.HangingProtocol.Viewport = {
   viewportOptions: {
     viewportId: 'ptCORONAL',
     viewportType: 'volume',
@@ -202,12 +201,7 @@ const ptCORONAL = {
     background: [1, 1, 1],
     toolGroupId: 'ptToolGroup',
     syncGroups: [
-      {
-        type: 'cameraPosition',
-        id: 'coronalSync',
-        source: true,
-        target: true,
-      },
+      cameraPositionSync('coronalSync'),
       {
         type: 'voi',
         id: 'ptWLSync',
@@ -227,6 +221,7 @@ const ptCORONAL = {
           syncInvertState: false,
         },
       },
+      hydrateSegSync,
     ],
   },
   displaySets: [
@@ -242,7 +237,7 @@ const ptCORONAL = {
   ],
 };
 
-const fusionAXIAL = {
+const fusionAXIAL: AppTypes.HangingProtocol.Viewport = {
   viewportOptions: {
     viewportId: 'fusionAXIAL',
     viewportType: 'volume',
@@ -253,12 +248,7 @@ const fusionAXIAL = {
       preset: 'first', // 'first', 'last', 'middle'
     },
     syncGroups: [
-      {
-        type: 'cameraPosition',
-        id: 'axialSync',
-        source: true,
-        target: true,
-      },
+      cameraPositionSync('axialSync'),
       {
         type: 'voi',
         id: 'ctWLSync',
@@ -284,6 +274,7 @@ const fusionAXIAL = {
           syncInvertState: false,
         },
       },
+      hydrateSegSync,
     ],
   },
   displaySets: [
@@ -297,8 +288,8 @@ const fusionAXIAL = {
           name: 'hsv',
           opacity: [
             { value: 0, opacity: 0 },
-            { value: 0.1, opacity: 0.9 },
-            { value: 1, opacity: 0.95 },
+            { value: 0.1, opacity: 0.8 },
+            { value: 1, opacity: 0.9 },
           ],
         },
         voi: {
@@ -320,12 +311,7 @@ const fusionSAGITTAL = {
     //   preset: 'middle', // 'first', 'last', 'middle'
     // },
     syncGroups: [
-      {
-        type: 'cameraPosition',
-        id: 'sagittalSync',
-        source: true,
-        target: true,
-      },
+      cameraPositionSync('sagittalSync'),
       {
         type: 'voi',
         id: 'ctWLSync',
@@ -351,6 +337,7 @@ const fusionSAGITTAL = {
           syncInvertState: false,
         },
       },
+      hydrateSegSync,
     ],
   },
   displaySets: [
@@ -364,8 +351,8 @@ const fusionSAGITTAL = {
           name: 'hsv',
           opacity: [
             { value: 0, opacity: 0 },
-            { value: 0.1, opacity: 0.9 },
-            { value: 1, opacity: 0.95 },
+            { value: 0.1, opacity: 0.8 },
+            { value: 1, opacity: 0.9 },
           ],
         },
         voi: {
@@ -387,12 +374,7 @@ const fusionCORONAL = {
     //   preset: 'middle', // 'first', 'last', 'middle'
     // },
     syncGroups: [
-      {
-        type: 'cameraPosition',
-        id: 'coronalSync',
-        source: true,
-        target: true,
-      },
+      cameraPositionSync('coronalSync'),
       {
         type: 'voi',
         id: 'ctWLSync',
@@ -418,6 +400,7 @@ const fusionCORONAL = {
           syncInvertState: false,
         },
       },
+      hydrateSegSync,
     ],
   },
   displaySets: [
@@ -431,8 +414,8 @@ const fusionCORONAL = {
           name: 'hsv',
           opacity: [
             { value: 0, opacity: 0 },
-            { value: 0.1, opacity: 0.9 },
-            { value: 1, opacity: 0.95 },
+            { value: 0.1, opacity: 0.8 },
+            { value: 1, opacity: 0.9 },
           ],
         },
         voi: {
@@ -443,7 +426,7 @@ const fusionCORONAL = {
   ],
 };
 
-const mipSAGITTAL = {
+const mipSAGITTAL: AppTypes.HangingProtocol.Viewport = {
   viewportOptions: {
     viewportId: 'mipSagittal',
     viewportType: 'volume',
@@ -470,6 +453,7 @@ const mipSAGITTAL = {
           syncInvertState: false,
         },
       },
+      hydrateSegSync,
     ],
 
     // Custom props can be used to set custom properties which extensions