make segmentation page menus cleaner for future modification and easier reactifying (ESA-PhiLab#33)

Author: rfievet

src/components/segmentation/SegmentationModals.test.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import SegmentationModals from './SegmentationModals';
+
+describe('SegmentationModals', () => {
+  const mockProps = {
+    isPreferencesOpen: false,
+    onClosePreferences: vi.fn(),
+    isProfileOpen: false,
+    onCloseProfile: vi.fn(),
+    profileUserId: 'current',
+    isLoginOpen: false,
+    loginMode: 'login' as const,
+    isHelpOpen: false,
+    onCloseHelp: vi.fn(),
+    isResetMaskOpen: false,
+    onCloseResetMask: vi.fn(),
+    onConfirmResetMask: vi.fn(),
+    isClassSelectionOpen: false,
+    onCloseClassSelection: vi.fn(),
+    isImageInfoOpen: false,
+    onCloseImageInfo: vi.fn(),
+    isConfusionMatrixOpen: false,
+    onCloseConfusionMatrix: vi.fn(),
+  };
+
+  it('renders without crashing', () => {
+    render(<SegmentationModals {...mockProps} />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('shows preferences modal when open', () => {
+    render(<SegmentationModals {...mockProps} isPreferencesOpen={true} />);
+    expect(screen.getByText('Preferences')).toBeInTheDocument();
+  });
+
+  it('shows help modal when open', () => {
+    render(<SegmentationModals {...mockProps} isHelpOpen={true} />);
+    expect(screen.getByText('Help')).toBeInTheDocument();
+  });
+});

src/components/segmentation/SegmentationModals.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import PreferencesModal from '../PreferencesModal';
+import { UserProfileModal } from '../UserProfileModal';
+import { LoginForm } from '../LoginForm';
+import HelpModal from '../HelpModal';
+import ConfirmDialog from '../ConfirmDialog';
+import ClassSelectionModal from '../ClassSelectionModal';
+import ImageInfoModal from '../ImageInfoModal';
+import ConfusionMatrixModal from '../ConfusionMatrixModal';
+
+interface SegmentationModalsProps {
+  isPreferencesOpen: boolean;
+  onClosePreferences: () => void;
+  isProfileOpen: boolean;
+  onCloseProfile: () => void;
+  profileUserId: string;
+  isLoginOpen: boolean;
+  loginMode: 'login' | 'register';
+  isHelpOpen: boolean;
+  onCloseHelp: () => void;
+  isResetMaskOpen: boolean;
+  onCloseResetMask: () => void;
+  onConfirmResetMask: () => void;
+  isClassSelectionOpen: boolean;
+  onCloseClassSelection: () => void;
+  isImageInfoOpen: boolean;
+  onCloseImageInfo: () => void;
+  isConfusionMatrixOpen: boolean;
+  onCloseConfusionMatrix: () => void;
+}
+
+const SegmentationModals: React.FC<SegmentationModalsProps> = ({
+  isPreferencesOpen,
+  onClosePreferences,
+  isProfileOpen,
+  onCloseProfile,
+  profileUserId,
+  isLoginOpen,
+  loginMode,
+  isHelpOpen,
+  onCloseHelp,
+  isResetMaskOpen,
+  onCloseResetMask,
+  onConfirmResetMask,
+  isClassSelectionOpen,
+  onCloseClassSelection,
+  isImageInfoOpen,
+  onCloseImageInfo,
+  isConfusionMatrixOpen,
+  onCloseConfusionMatrix
+}) => {
+  return (
+    <>
+      <PreferencesModal isOpen={isPreferencesOpen} onClose={onClosePreferences} />
+      
+      <UserProfileModal
+        isOpen={isProfileOpen}
+        onClose={onCloseProfile}
+        userId={profileUserId}
+      />
+      
+      {isLoginOpen && <LoginForm initialMode={loginMode} />}
+      
+      <HelpModal isOpen={isHelpOpen} onClose={onCloseHelp} />
+      
+      <ConfirmDialog
+        isOpen={isResetMaskOpen}
+        onClose={onCloseResetMask}
+        onConfirm={onConfirmResetMask}
+        message="Are you sure you want to reset all your drawn pixels?"
+        confirmText="Reset"
+        cancelText="Cancel"
+        type="warning"
+      />
+      
+      <ClassSelectionModal
+        isOpen={isClassSelectionOpen}
+        onClose={onCloseClassSelection}
+      />
+      
+      <ImageInfoModal isOpen={isImageInfoOpen} onClose={onCloseImageInfo} />
+      
+      <ConfusionMatrixModal
+        isOpen={isConfusionMatrixOpen}
+        onClose={onCloseConfusionMatrix}
+      />
+    </>
+  );
+};
+
+export default SegmentationModals;

src/components/segmentation/SegmentationStatusBar.test.tsx

@@ -0,0 +1,31 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import SegmentationStatusBar from './SegmentationStatusBar';
+
+describe('SegmentationStatusBar', () => {
+  const mockProps = {
+    onOpenProfile: vi.fn(),
+    onOpenImageInfo: vi.fn(),
+    onOpenConfusionMatrix: vi.fn(),
+  };
+
+  it('renders status bar with all sections', () => {
+    const { container } = render(<SegmentationStatusBar {...mockProps} />);
+    
+    const statusbar = container.querySelector('#statusbar');
+    expect(statusbar).toBeInTheDocument();
+    expect(statusbar).toHaveClass('statusbar');
+  });
+
+  it('renders all status bar components', () => {
+    const { container } = render(<SegmentationStatusBar {...mockProps} />);
+    
+    expect(container.querySelector('#user-info')).toBeInTheDocument();
+    expect(container.querySelector('#admin-button')).toBeInTheDocument();
+    expect(container.querySelector('#image-info')).toBeInTheDocument();
+    expect(container.querySelector('#different-classes')).toBeInTheDocument();
+    expect(container.querySelector('#drawn-pixels')).toBeInTheDocument();
+    expect(container.querySelector('#ai-score')).toBeInTheDocument();
+    expect(container.querySelector('#ai-recommendation')).toBeInTheDocument();
+  });
+});

src/components/segmentation/SegmentationStatusBar.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import UserInfo from './statusbar/UserInfo';
+import AdminButton from './statusbar/AdminButton';
+import ImageInfo from './statusbar/ImageInfo';
+import StatsDisplay from './statusbar/StatsDisplay';
+import AIScore from './statusbar/AIScore';
+import AIRecommendation from './statusbar/AIRecommendation';
+
+interface SegmentationStatusBarProps {
+  onOpenProfile: () => void;
+  onOpenImageInfo: () => void;
+  onOpenConfusionMatrix: () => void;
+}
+
+const SegmentationStatusBar: React.FC<SegmentationStatusBarProps> = ({
+  onOpenProfile,
+  onOpenImageInfo,
+  onOpenConfusionMatrix
+}) => {
+  return (
+    <div
+      id="statusbar"
+      className="statusbar"
+      style={{ visibility: 'hidden', position: 'fixed', bottom: '10px', zIndex: 10 }}
+    >
+      <UserInfo onOpenProfile={onOpenProfile} />
+      <AdminButton />
+      <ImageInfo onOpenImageInfo={onOpenImageInfo} />
+      <StatsDisplay />
+      <AIScore onOpenConfusionMatrix={onOpenConfusionMatrix} />
+      <AIRecommendation />
+    </div>
+  );
+};
+
+export default SegmentationStatusBar;

src/components/segmentation/SegmentationToolbar.test.tsx

@@ -0,0 +1,28 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import SegmentationToolbar from './SegmentationToolbar';
+
+describe('SegmentationToolbar', () => {
+  const mockProps = {
+    onExportGeoTIFF: vi.fn(),
+    onSelectClass: vi.fn(),
+    onResetMask: vi.fn(),
+    onOpenHelp: vi.fn(),
+    onOpenPreferences: vi.fn(),
+  };
+
+  it('renders toolbar with all sections', () => {
+    const { container } = render(<SegmentationToolbar {...mockProps} />);
+    
+    const toolbar = container.querySelector('#toolbar');
+    expect(toolbar).toBeInTheDocument();
+    expect(toolbar).toHaveClass('toolbar');
+  });
+
+  it('renders toolbar separators', () => {
+    const { container } = render(<SegmentationToolbar {...mockProps} />);
+    
+    const separators = container.querySelectorAll('.toolbar_separator');
+    expect(separators.length).toBeGreaterThan(0);
+  });
+});

src/components/segmentation/SegmentationToolbar.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import NavigationTools from './toolbar/NavigationTools';
+import EditingTools from './toolbar/EditingTools';
+import ClassSelector from './toolbar/ClassSelector';
+import DrawingTools from './toolbar/DrawingTools';
+import MaskTools from './toolbar/MaskTools';
+import FilterTools from './toolbar/FilterTools';
+import SettingsTools from './toolbar/SettingsTools';
+import ToolbarSeparator from './toolbar/ToolbarSeparator';
+
+interface SegmentationToolbarProps {
+  onExportGeoTIFF: () => void;
+  onSelectClass: () => void;
+  onResetMask: () => void;
+  onOpenHelp: () => void;
+  onOpenPreferences: () => void;
+}
+
+const SegmentationToolbar: React.FC<SegmentationToolbarProps> = ({
+  onExportGeoTIFF,
+  onSelectClass,
+  onResetMask,
+  onOpenHelp,
+  onOpenPreferences
+}) => {
+  return (
+    <ul className="toolbar" id="toolbar" style={{ visibility: 'hidden' }}>
+      <NavigationTools onExportGeoTIFF={onExportGeoTIFF} />
+      <EditingTools />
+      <ToolbarSeparator />
+      <ClassSelector onSelectClass={onSelectClass} />
+      <ToolbarSeparator />
+      <DrawingTools onResetMask={onResetMask} />
+      <ToolbarSeparator />
+      <MaskTools />
+      <ToolbarSeparator />
+      <FilterTools />
+      <ToolbarSeparator />
+      <SettingsTools onOpenHelp={onOpenHelp} onOpenPreferences={onOpenPreferences} />
+    </ul>
+  );
+};
+
+export default SegmentationToolbar;

src/components/segmentation/hooks/useSegmentationSetup.ts

@@ -0,0 +1,95 @@
+import { useEffect } from 'react';
+
+interface UseSegmentationSetupProps {
+  authChecked: boolean;
+  onOpenPreferences: () => void;
+  onOpenLogin: () => void;
+  onOpenRegister: () => void;
+  onOpenProfile: (userId?: string) => void;
+  onOpenHelp: () => void;
+}
+
+export const useSegmentationSetup = ({
+  authChecked,
+  onOpenPreferences,
+  onOpenLogin,
+  onOpenRegister,
+  onOpenProfile,
+  onOpenHelp
+}: UseSegmentationSetupProps) => {
+  useEffect(() => {
+    if (!authChecked) return;
+
+    const isDebugMode = window.location.search.includes('debug=1') || window.location.hostname === 'localhost';
+    
+    if (isDebugMode) {
+      console.log('🚀 IRIS Segmentation: React SPA initialized');
+    }
+    
+    // Check if we should auto-open preferences (from admin navigation)
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('openPreferences') === 'true') {
+      onOpenPreferences();
+      // Clean up URL parameter
+      urlParams.delete('openPreferences');
+      const newUrl = window.location.pathname + (urlParams.toString() ? '?' + urlParams.toString() : '');
+      window.history.replaceState({}, '', newUrl);
+    }
+    
+    // Wait for legacy JavaScript to load, then check auth and initialize
+    const waitForLegacyScripts = setInterval(() => {
+      if (window.init_segmentation) {
+        clearInterval(waitForLegacyScripts);
+        
+        if (isDebugMode) console.log('✅ Legacy scripts loaded');
+        
+        // Check authentication BEFORE calling init_segmentation
+        fetch('/user/get/current')
+          .then(response => {
+            if (response.status === 403) {
+              if (isDebugMode) console.log('❌ Not authenticated, showing React login modal');
+              onOpenLogin();
+            } else {
+              if (isDebugMode) console.log('✅ Authenticated, calling init_segmentation()');
+              window.init_segmentation();
+            }
+          })
+          .catch(error => {
+            console.error('Auth check failed:', error);
+            window.init_segmentation();
+          });
+      }
+    }, 50);
+    
+    // Timeout waiting for scripts after 5 seconds
+    setTimeout(() => {
+      clearInterval(waitForLegacyScripts);
+      if (!window.init_segmentation) {
+        console.error('❌ Legacy scripts failed to load - init_segmentation not found');
+      }
+    }, 5000);
+
+    // Override global dialogue functions to use React modals
+    (window as any).dialogue_config = onOpenPreferences;
+    window.openUserProfile = onOpenProfile;
+    window.openLogin = onOpenLogin;
+    window.openRegister = onOpenRegister;
+
+    // Expose logout function for React
+    (window as any).reactLogout = async (callback?: () => void) => {
+      await fetch('/user/logout');
+      if (callback) {
+        callback();
+      } else {
+        window.location.reload();
+      }
+    };
+
+    // Expose React functions for legacy JavaScript integration
+    window.irisReactApp = {
+      openHelpModal: onOpenHelp,
+      openUserProfile: onOpenProfile,
+      openPreferences: onOpenPreferences,
+    };
+  }, [authChecked, onOpenPreferences, onOpenLogin, onOpenRegister, onOpenProfile, onOpenHelp]);
+};

src/components/segmentation/statusbar/AIRecommendation.test.tsx

@@ -0,0 +1,13 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import AIRecommendation from './AIRecommendation';
+
+describe('AIRecommendation', () => {
+  it('renders AI recommendation with default text', () => {
+    const { container } = render(<AIRecommendation />);
+    
+    const recommendation = container.querySelector('#ai-recommendation');
+    expect(recommendation).toBeInTheDocument();
+    expect(screen.getByText('AI is loading')).toBeInTheDocument();
+  });
+});