c75c85c53b
- Backend: Refactored tasks.py to directly invoke run_single_fna_pipeline.py for consistency. - Backend: Changed output format to ZIP and added auto-cleanup of intermediate files. - Backend: Fixed language parameter passing in API and tasks. - Frontend: Removed CRISPR Fusion UI elements from Submit and Monitor views. - Frontend: Implemented simulated progress bar for better UX. - Frontend: Restored One-click load button and added result file structure documentation. - Docker: Fixed critical Restarting loop by removing incorrect image directive in docker-compose.yml. - Docker: Optimized Dockerfile to correct .pixi environment path issues and prevent accidental deletion of frontend assets.
2.9 KiB
2.9 KiB
UI Optimization Plan
Overview
This document outlines a plan to modernize and professionalize the UI of the BtToxin Pipeline web interface. The current interface uses default Element Plus styling, which functions well but lacks a distinctive "biotech" feel and modern polish.
Context
- Project Root:
/vol1/1000/docker_server/traefik/web/zly - Frontend Path:
frontend/ - Tech Stack: Vue 3 + Vite + Element Plus + Tailwind CSS (if installed, otherwise custom CSS)
- Deployment: Docker container serving compiled static files via FastAPI/Nginx.
Tasks for Next Agent
1. Theme Modernization (Biotech/Science Focus)
-
Color Palette Update:
- Change primary color from default Blue to Emerald/Teal to reflect the biological nature (Bt bacteria/plants).
- Recommended Primary:
#10B981(Emerald 500) or#0D9488(Teal 600). - Background: Change pure white backgrounds to off-white/light gray (
#F9FAFB) to add depth. - Action: Update
frontend/src/assets/main.css(orbase.css) to override Element Plus CSS variables (--el-color-primary, etc.).
-
Typography:
- Use modern sans-serif fonts (e.g.,
Inter,Roboto) for headings. - Critical: Ensure all sequence data (DNA/Protein) uses Monospace fonts (
JetBrains Mono,Fira Code) for readability.
- Use modern sans-serif fonts (e.g.,
2. Component Refinement
-
Cards & Containers:
- Remove heavy borders from
el-card. - Add soft shadows (
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)). - Increase border radius (e.g.,
12px) for a friendlier look.
- Remove heavy borders from
-
Prediction Tool Tabs:
- Move away from
border-cardstyle if possible, or customize it to look cleaner. - Ensure "Task Query", "New Analysis", and "Task History" tabs are evenly spaced and visually balanced.
- Move away from
3. User Experience (UX) Enhancements
-
Loading States:
- Replace simple text loaders with Skeleton screens or a custom DNA helix animation.
- Add loading feedback specifically for the File Upload component.
-
Empty States:
- Add illustrations for empty "Task History" to guide users to start a new analysis.
4. Implementation Steps
- Locate Styles: Find the global CSS file (check
frontend/src/main.tsfor imports). - Apply Variables: Override
:rootCSS variables for Element Plus. - Component Overrides: Use scoped CSS or utility classes to adjust specific components (PredictionView, TaskHistory).
- Rebuild: Run
docker compose -f docker/compose/docker-compose.traefik.yml -p compose up -d --buildto verify changes.
Prompt for Next Agent
"Please review the UI_OPTIMIZATION.md file in the project root. It contains a detailed plan for modernizing the BtToxin Pipeline interface. Focus on implementing the Color Palette updates and Card styling first. You will need to modify the frontend CSS files and potentially some Vue components. Remember to rebuild the docker container to see your changes."