fix(segmentation): List surface representations in the segmentation table for 3D views. (#5700)

This was done by using an array of representation types instead of a single type for a panel.
The first element of the array is the primary type of the panel, and the rest are secondary types
that can also be displayed in the panel.

PR feedback:
- added test to check number of segments in side panel for 3D only view
- fixed jumping to segment in 3D only view
- fixed exception when adding contour segment in 3D only view

extensions/cornerstone/src/getPanelModule.tsx

@@ -24,7 +24,7 @@ const getPanelModule = ({ commandsManager, servicesManager, extensionManager }:
         configuration={{
           ...props?.configuration,
         }}
-        segmentationRepresentationType={props?.segmentationRepresentationType}
+        segmentationRepresentationTypes={props?.segmentationRepresentationTypes}
       />
     );
   };
@@ -38,20 +38,20 @@ const getPanelModule = ({ commandsManager, servicesManager, extensionManager }:
         configuration={{
           ...props?.configuration,
         }}
-        segmentationRepresentationType={props?.segmentationRepresentationType}
+        segmentationRepresentationTypes={props?.segmentationRepresentationTypes}
       />
     );
   };
 
   const wrappedPanelSegmentationWithTools = props => {
     const { t } = useTranslation('SegmentationPanel');
-    const tKey = `${props.segmentationRepresentationType ?? 'Segmentation'} tools`;
+    const tKey = `${props.segmentationRepresentationTypes?.[0] ?? 'Segmentation'} tools`;
     const tValue = t(tKey);
 
     return (
       <>
         <Toolbox
-          buttonSectionId={toolSectionMap[props.segmentationRepresentationType]}
+          buttonSectionId={toolSectionMap[props.segmentationRepresentationTypes?.[0]]}
           title={tValue}
         />
         <PanelSegmentation
@@ -61,7 +61,7 @@ const getPanelModule = ({ commandsManager, servicesManager, extensionManager }:
           configuration={{
             ...props?.configuration,
           }}
-          segmentationRepresentationType={props?.segmentationRepresentationType}
+          segmentationRepresentationTypes={props?.segmentationRepresentationTypes}
         />
       </>
     );
@@ -103,7 +103,10 @@ const getPanelModule = ({ commandsManager, servicesManager, extensionManager }:
       component: props =>
         wrappedPanelSegmentationWithTools({
           ...props,
-          segmentationRepresentationType: SegmentationRepresentations.Labelmap,
+          segmentationRepresentationTypes: [
+            SegmentationRepresentations.Labelmap,
+            SegmentationRepresentations.Surface,
+          ],
         }),
     },
     {
@@ -114,7 +117,7 @@ const getPanelModule = ({ commandsManager, servicesManager, extensionManager }:
       component: props =>
         wrappedPanelSegmentationWithTools({
           ...props,
-          segmentationRepresentationType: SegmentationRepresentations.Contour,
+          segmentationRepresentationTypes: [SegmentationRepresentations.Contour],
         }),
     },
   ];