soconnor/hristudio
1
0
Fork 0
mirror of https://github.com/soconnor0919/hristudio.git synced 2025-12-11 14:44:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

Begin plugins system

Browse Source
This commit is contained in:
Sean O'Connor
2025-08-07 01:12:58 -04:00
parent 544207e9a2
commit 3a443d1727
53 changed files with 5873 additions and 2547 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
docs/work_in_progress.md Normal file
View File

@@ -0,0 +1,275 @@
# Work in Progress
## Recent Changes Summary (December 2024)
### Plugin System Implementation
#### **Plugin Management System**
Complete plugin system for robot platform integration with study-specific installations.
**Core Features:**
- Plugin browsing and installation interface
- Repository management for administrators
- Study-scoped plugin installations
- Trust levels (official, verified, community)
- Plugin action definitions for experiment integration
**Files Created:**
- `src/app/(dashboard)/plugins/` - Plugin pages and routing
- `src/components/plugins/` - Plugin UI components
- `src/components/admin/repositories-*` - Repository management
- Extended `src/server/api/routers/admin.ts` with repository CRUD
- Added `pluginRepositories` table to database schema
**Database Schema:**
- `plugins` table with robot integration metadata
- `studyPlugins` table for study-specific installations
- `pluginRepositories` table for admin-managed sources
**Navigation Integration:**
- Added "Plugins" to sidebar navigation (study-scoped)
- Admin repository management in administration section
- Proper breadcrumbs and page headers following system patterns
**Technical Implementation:**
- tRPC routes for plugin CRUD operations
- Type-safe API with proper error handling
- Follows EntityForm/DataTable unified patterns
- Integration with existing study context system
---
### Admin Page Redesign
#### **System Administration Interface**
Complete redesign of admin page to match HRIStudio design patterns.
**Layout Changes:**
- **Before**: Custom gradient layout with complex grid
- **After**: Standard PageHeader + card-based sections
- System overview cards with metrics
- Recent activity feed
- Service status monitoring
- Quick action grid for admin tools
**Components Used:**
- `PageHeader` with Shield icon and administrator badge
- Card-based layout for all sections
- Consistent typography and spacing
- Status badges and icons throughout
---
### Complete Experiment Designer Redesign
#### **Background**
The experiment designer was completely redesigned to integrate seamlessly with the HRIStudio application's existing design system and component patterns. The original designer felt out of place and used inconsistent styling.
#### **Key Changes Made**
##### **1. Layout System Overhaul**
- **Before**: Custom resizable panels with full-page layout
- **After**: Standard PageHeader + Card-based grid system
- **Components Used**:
- `PageHeader` with title, description, and action buttons
- `Card`, `CardHeader`, `CardTitle`, `CardContent` for all sections
- 12-column grid layout (3-6-3 distribution)
##### **2. Visual Integration**
- **Header**: Now uses unified `PageHeader` component with proper actions
- **Action Buttons**: Replaced custom buttons with `ActionButton` components
- **Status Indicators**: Badges integrated into header actions area
- **Icons**: Each card section has relevant icons (Palette, Play, Settings)
##### **3. Component Consistency**
- **Height Standards**: All inputs use `h-8` sizing to match system
- **Spacing**: Uses standard `space-y-6` and consistent card padding
- **Typography**: Proper text hierarchy matching other pages
- **Empty States**: Compact and informative design
##### **4. Technical Improvements**
- **Simplified Drag & Drop**: Removed complex resizable panel logic
- **Better Collision Detection**: Updated for grid layout structure
- **Function Order Fix**: Resolved initialization errors with helper functions
- **Clean Code**: Removed unused imports, fixed TypeScript warnings
#### **Code Structure Changes**
##### **Layout Before**:
```jsx
<DndContext>
<div className="flex h-full flex-col">
<div className="bg-card flex items-center justify-between border-b">
{/* Custom header */}
</div>
<ResizablePanelGroup>
<ResizablePanel>{/* Palette */}</ResizablePanel>
<ResizablePanel>{/* Canvas */}</ResizablePanel>
<ResizablePanel>{/* Properties */}</ResizablePanel>
</ResizablePanelGroup>
</div>
</DndContext>
```
##### **Layout After**:
```jsx
<DndContext>
<div className="space-y-6">
<PageHeader
title={design.name}
description="Design your experiment protocol using visual blocks"
icon={Palette}
actions={/* Save, Export, Badges */}
/>
<div className="grid grid-cols-12 gap-6">
<div className="col-span-3">
<Card>{/* Block Library */}</Card>
</div>
<div className="col-span-6">
<Card>{/* Experiment Flow */}</Card>
</div>
<div className="col-span-3">
<Card>{/* Properties */}</Card>
</div>
</div>
</div>
</DndContext>
```
#### **Files Modified**
- `src/components/experiments/designer/EnhancedBlockDesigner.tsx` - Complete redesign
- `src/components/ui/data-table.tsx` - Fixed control heights
- `src/components/experiments/experiments-data-table.tsx` - Fixed select styling
- `src/components/participants/participants-data-table.tsx` - Fixed select styling
- `src/components/studies/studies-data-table.tsx` - Fixed select styling
- `src/components/trials/trials-data-table.tsx` - Fixed select styling
---
### Data Table Controls Standardization
#### **Problem**
Data table controls (search input, filter selects, columns dropdown) had inconsistent heights and styling, making the interface look unpolished.
#### **Solution**
- **Search Input**: Already had `h-8` - ✅
- **Filter Selects**: Added `h-8` to all `SelectTrigger` components
- **Columns Dropdown**: Already had proper Button styling - ✅
#### **Tables Fixed**
- Experiments data table
- Participants data table
- Studies data table (2 selects)
- Trials data table
---
### System Theme Enhancements
#### **Background**
The overall system theme was too monochromatic with insufficient color personality.
#### **Improvements Made**
##### **Color Palette Enhancement**
- **Primary Colors**: More vibrant blue (`oklch(0.55 0.08 240)`) instead of grayscale
- **Background Warmth**: Added subtle warm undertones to light mode
- **Sidebar Blue Tint**: Maintained subtle blue character as requested
- **Chart Colors**: Proper color progression (blue → teal → green → yellow → orange)
##### **Light Mode**:
```css
--primary: oklch(0.55 0.08 240); /* Vibrant blue */
--background: oklch(0.98 0.005 60); /* Warm off-white */
--card: oklch(0.995 0.001 60); /* Subtle layering */
--muted: oklch(0.95 0.008 240); /* Slight blue tint */
```
##### **Dark Mode**:
```css
--primary: oklch(0.65 0.1 240); /* Brighter blue */
--background: oklch(0.12 0.008 250); /* Soft dark with blue undertone */
--card: oklch(0.18 0.008 250); /* Proper contrast layers */
--muted: oklch(0.22 0.01 250); /* Subtle blue-gray */
```
#### **Results**
- Much more personality and visual appeal
- Better color hierarchy and element distinction
- Professional appearance maintained
- Excellent accessibility and contrast maintained
---
### Breadcrumb Navigation Fixes
#### **Problems Identified**
1. **Study-scoped pages** linking to wrong routes (missing context)
2. **Form breadcrumbs** linking to non-existent entities during creation
3. **Inconsistent study context** across different data tables
#### **Solutions Implemented**
##### **Study Context Awareness**
- **ExperimentsDataTable**: `Dashboard → Studies → [Study Name] → Experiments`
- **ParticipantsDataTable**: `Dashboard → Studies → [Study Name] → Participants`
- **TrialsDataTable**: `Dashboard → Studies → [Study Name] → Trials`
##### **Form Breadcrumbs Fixed**
- **ExperimentForm**: Uses study context when available, falls back to global
- **ParticipantForm**: Links to study-scoped participants when in study context
- **TrialForm**: Links to study-scoped trials when available
##### **Smart Link Logic**
- ✅ **With `href`**: Renders as clickable `<BreadcrumbLink>`
- ✅ **Without `href`**: Renders as non-clickable `<BreadcrumbPage>`
- ✅ **Conditional availability**: Only provides `href` when target exists
---
### Technical Debt Cleanup
#### **Block Designer Fixes**
1. **Nested Block Drag & Drop**: Added proper `SortableContext` for child blocks
2. **Collision Detection**: Enhanced for better nested block handling
3. **Helper Functions**: Fixed initialization order (`findBlockById`, `removeBlockFromStructure`)
4. **Background Colors**: Matched page theme properly
#### **Permission System**
- **Added Administrator Bypass**: System admins can now edit any experiment
- **Study Access Check**: Enhanced to check both study membership and system roles
#### **API Enhancement**
- **Visual Design Storage**: Added `visualDesign` field to experiments update API
- **Database Integration**: Proper saving/loading of block designs
---
### Current Status
#### **Completed**
- Complete experiment designer redesign with unified components
- All data table control styling standardized
- System theme enhanced with better colors
- Breadcrumb navigation completely fixed
- Technical debt resolved
#### **Production Ready**
- All TypeScript errors resolved
- Consistent styling throughout application
- Proper error handling and user feedback
- Excellent dark mode support
- Mobile/tablet friendly drag and drop
#### **Improvements Achieved**
- **Visual Consistency**: Complete - All components now use unified design system
- **User Experience**: Significant improvement in navigation and usability
- **Code Quality**: Clean, maintainable code with proper patterns
- **Performance**: Optimized drag and drop with better collision detection
- **Accessibility**: WCAG 2.1 AA compliance maintained throughout
---
### Documentation Status
All changes have been documented and the codebase is ready for production deployment. The experiment designer now feels like a natural, integrated part of the HRIStudio platform while maintaining all its powerful functionality.