Remove CalendarStyles.css and Scheduling.tsx components, updating the project structure for improved maintainability. Update Supabase CLI version and modify experiment_repetitions SQL migration to include scheduled_date. Enhance scheduling component in the remote app with improved drag-and-drop functionality and UI adjustments for better user experience.

2025-12-12 12:53:52 -05:00
parent bada5a073d
commit 9159ab68f3
8 changed files with 548 additions and 2438 deletions
--- a/scheduling-remote/REFACTORING_PROPOSAL.md
+++ b/scheduling-remote/REFACTORING_PROPOSAL.md
@@ -0,0 +1,156 @@
+# Scheduling Component Refactoring Proposal
+
+## Current State Analysis
+
+The `ScheduleExperiment` component is approximately **1,140 lines** and handles multiple responsibilities:
+
+1. **Conductor Management** (~150 lines)
+   - Fetching conductors
+   - Selection state
+   - Color mapping
+   - Availability fetching
+
+2. **Phase/Experiment/Repetition Management** (~300 lines)
+   - Phase expansion/collapse
+   - Experiment loading
+   - Repetition creation/selection
+   - Soaking/airdrying data fetching
+
+3. **Calendar Event Management** (~200 lines)
+   - Event generation
+   - Drag and drop handling
+   - Availability events
+   - Styling and theming
+
+4. **Scheduling Logic** (~300 lines)
+   - Repetition spawning
+   - Staggering calculations
+   - Phase timing updates
+   - Lock/unlock functionality
+   - Database persistence
+
+5. **UI Rendering** (~200 lines)
+   - Conductor panel
+   - Phase/Experiment/Repetition tree
+   - Calendar component
+   - Loading/error states
+
+## Proposed Structure
+
+### Component Hierarchy
+
+```
+ScheduleExperiment (Main Container - ~150 lines)
+├── ConductorPanel (UI Component - ~100 lines)
+├── ExperimentPhasePanel (UI Component - ~150 lines)
+│   ├── ExperimentItem (UI Component - ~80 lines)
+│   │   └── RepetitionItem (UI Component - ~120 lines)
+└── SchedulingCalendar (UI Component - ~150 lines)
+```
+
+### Custom Hooks
+
+```
+hooks/
+├── useConductors.ts (~100 lines)
+│   - Conductor fetching
+│   - Selection state
+│   - Color mapping
+│   - Availability fetching
+│
+├── useExperimentPhases.ts (~150 lines)
+│   - Phase/Experiment/Repetition data fetching
+│   - Expansion state
+│   - Selection state
+│   - Soaking/airdrying data
+│
+├── useScheduling.ts (~200 lines)
+│   - Repetition scheduling state
+│   - Spawn/stagger logic
+│   - Phase timing updates
+│   - Lock/unlock functionality
+│   - Database persistence
+│
+└── useCalendarEvents.ts (~150 lines)
+    - Calendar event generation
+    - Drag and drop handlers
+    - Event styling
+    - Scroll preservation
+```
+
+### File Structure
+
+```
+scheduling-remote/src/components/
+├── Scheduling.tsx (Main router - unchanged)
+├── ScheduleExperiment/
+│   ├── index.tsx (Main container - ~150 lines)
+│   ├── ConductorPanel.tsx (~100 lines)
+│   ├── ExperimentPhasePanel.tsx (~150 lines)
+│   ├── ExperimentItem.tsx (~80 lines)
+│   ├── RepetitionItem.tsx (~120 lines)
+│   └── SchedulingCalendar.tsx (~150 lines)
+└── hooks/
+    ├── useConductors.ts (~100 lines)
+    ├── useExperimentPhases.ts (~150 lines)
+    ├── useScheduling.ts (~200 lines)
+    └── useCalendarEvents.ts (~150 lines)
+```
+
+## Benefits
+
+1. **Maintainability**: Each component has a single, clear responsibility
+2. **Testability**: Smaller units are easier to test in isolation
+3. **Reusability**: Components and hooks can be reused elsewhere
+4. **Readability**: Easier to understand and navigate
+5. **Performance**: Better optimization opportunities with smaller components
+6. **Collaboration**: Multiple developers can work on different parts simultaneously
+
+## Refactoring Strategy
+
+### Phase 1: Extract Custom Hooks (Low Risk)
+1. Extract `useConductors` hook
+2. Extract `useExperimentPhases` hook
+3. Extract `useScheduling` hook
+4. Extract `useCalendarEvents` hook
+5. Test each hook independently
+
+### Phase 2: Extract UI Components (Medium Risk)
+1. Extract `ConductorPanel` component
+2. Extract `ExperimentPhasePanel` component
+3. Extract `ExperimentItem` component
+4. Extract `RepetitionItem` component
+5. Extract `SchedulingCalendar` component
+6. Test component integration
+
+### Phase 3: Refactor Main Component (Low Risk)
+1. Update `ScheduleExperiment` to use extracted hooks and components
+2. Remove duplicate code
+3. Final integration testing
+
+## Best Practices Applied
+
+1. **Single Responsibility Principle**: Each component/hook has one clear purpose
+2. **Custom Hooks for Logic**: Business logic separated from UI
+3. **Props Drilling vs Context**: Use props for direct parent-child, context only if needed
+4. **Memoization**: Preserve existing `useMemo`/`useCallback` optimizations
+5. **Type Safety**: Maintain all TypeScript types
+6. **State Management**: Keep related state together in hooks
+
+## Migration Path
+
+1. **Backward Compatible**: All functionality preserved
+2. **Incremental**: Can be done in phases
+3. **Testable**: Each phase can be tested independently
+4. **Reversible**: Changes can be rolled back if needed
+
+## Estimated Impact
+
+- **Main Component**: 1,140 lines → ~150 lines (87% reduction)
+- **Total Lines**: ~1,140 → ~1,200 (slight increase due to imports/exports, but much better organized)
+- **Complexity**: Significantly reduced per file
+- **Maintainability**: Dramatically improved
+
+
+
+