feat(segmentation): segment statistics, labelmap interpolation and segment bidirectional (#4865)

platform/ui-next/src/components/SegmentationTable/SegmentationHeader.tsx

@@ -3,29 +3,23 @@ import { Button } from '../Button';
 import { Icons } from '../Icons/Icons';
 import { DropdownMenu, DropdownMenuTrigger } from '../DropdownMenu';
 import { Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip';
-import { useSegmentationTableContext } from './SegmentationTableContext';
-import { useTranslation } from 'react-i18next';
+import { useSegmentationExpanded, useSegmentationTableContext } from './contexts';
 
+// Then use it in your component:
 export const SegmentationHeader: React.FC<{
   children?: React.ReactNode;
-  segmentation?: any;
-}> = ({ children, segmentation }) => {
-  const { t } = useTranslation('SegmentationTable');
-  const { ...contextProps } = useSegmentationTableContext('SegmentationHeader');
+}> = ({ children }) => {
+  // Always call both hooks unconditionally at the top level
+  const expandedContext = useSegmentationExpanded('SegmentationHeader');
+  const tableContext = useSegmentationTableContext('SegmentationHeader');
+
+  // Determine which segmentation to use
+  const segmentation = expandedContext?.segmentation || tableContext.activeSegmentation;
 
   if (!segmentation) {
     return null;
   }
 
-  const childrenWithProps = React.Children.map(children, child =>
-    React.isValidElement(child)
-      ? React.cloneElement(child, {
-          t,
-          ...contextProps,
-        })
-      : child
-  );
-
   return (
     <div className="text-foreground flex h-8 w-full items-center justify-between">
       <div className="flex items-center space-x-1">
@@ -40,7 +34,7 @@ export const SegmentationHeader: React.FC<{
               <Icons.More />
             </Button>
           </DropdownMenuTrigger>
-          {childrenWithProps}
+          {children}
         </DropdownMenu>
         <div className="pl-1.5">{segmentation.label}</div>
       </div>
@@ -55,7 +49,7 @@ export const SegmentationHeader: React.FC<{
             </Button>
           </TooltipTrigger>
           <TooltipContent>
-            <p>{segmentation.cachedStats.info}</p>
+            <p>{segmentation.cachedStats?.info}</p>
           </TooltipContent>
         </Tooltip>
       </div>