11 KiB
11 KiB
Architektur Diagramme - Frontend Nyla
Diese Datei enthält visuelle Diagramme der Frontend-Architektur im Mermaid-Format.
1. High-Level Architektur
graph TB
subgraph "Entry Point"
A[main.tsx] --> B[App.tsx]
end
subgraph "Infrastructure Layer"
B --> C[LanguageProvider]
B --> D[AuthProvider]
B --> E[Router]
end
subgraph "Routing Layer"
E --> F[Login]
E --> G[Register]
E --> H[ProtectedRoute]
end
subgraph "Application Layer"
H --> I[Home]
I --> J[Sidebar]
I --> K[PageManager]
end
subgraph "Pages"
K --> L[Dashboard]
K --> M[Dateien]
K --> N[Connections]
K --> O[Workflows]
K --> P[Prompts]
K --> Q[TeamBereich]
K --> R[Einstellungen]
end
style A fill:#e1f5ff
style B fill:#e1f5ff
style C fill:#fff4e1
style D fill:#fff4e1
style E fill:#fff4e1
style I fill:#e8f5e9
style K fill:#e8f5e9
2. Component Hierarchy
graph TD
A[App.tsx] --> B[Router]
B --> C[Home]
C --> D[Sidebar]
C --> E[PageManager]
E --> F[Dashboard]
E --> G[Dateien]
E --> H[Connections]
E --> I[Workflows]
F --> J[DashboardChat]
J --> K[DashboardChatArea]
K --> L[DashboardChatAreaMessageList]
K --> M[DashboardChatAreaInput]
K --> N[DashboardChatAreaConnectedFiles]
G --> O[DateienTable]
O --> P[FilePreview]
P --> Q[FileRenderers]
H --> R[ConnectionsTable]
R --> S[ConnectionEditModal]
style A fill:#ffebee
style C fill:#e3f2fd
style E fill:#e8f5e9
style F fill:#fff3e0
style G fill:#fff3e0
style H fill:#fff3e0
3. Data Flow Architecture
graph LR
subgraph "UI Layer"
A[Page Component] --> B[Feature Component]
end
subgraph "Business Logic Layer"
B --> C[Custom Hook]
C --> D[useApiRequest]
end
subgraph "API Layer"
D --> E[api.ts]
E --> F[Axios Instance]
F --> G[Backend API]
end
subgraph "State Management"
C --> H[React State]
H --> I[Context API]
end
G -.Response.-> F
F -.Data.-> D
D -.State Update.-> C
C -.Re-render.-> B
style A fill:#e1f5ff
style C fill:#fff4e1
style E fill:#e8f5e9
style G fill:#fce4ec
4. Authentication Flow
sequenceDiagram
participant User
participant App
participant AuthProvider
participant MSAL
participant ProtectedRoute
participant Backend
User->>App: Access Protected Route
App->>AuthProvider: Check Auth Status
AuthProvider->>MSAL: Get Account
MSAL-->>AuthProvider: Account Status
alt Not Authenticated
AuthProvider-->>App: No Account
App->>ProtectedRoute: Redirect to Login
ProtectedRoute->>User: Show Login Page
User->>MSAL: Login Request
MSAL->>Backend: OAuth Flow
Backend-->>MSAL: Token
MSAL-->>AuthProvider: Account + Token
AuthProvider->>App: Authenticated
end
AuthProvider->>ProtectedRoute: Allow Access
ProtectedRoute->>App: Render Protected Content
5. Page Management Flow
stateDiagram-v2
[*] --> PageManager: Route Change
PageManager --> CheckConfig: Get Page Config
CheckConfig --> LoadPage: Config Found & Enabled
CheckConfig --> ErrorPage: Config Not Found
LoadPage --> CheckInstance: Page Instance Exists?
CheckInstance --> ReuseInstance: Yes (Preserved)
CheckInstance --> CreateInstance: No
ReuseInstance --> ShowPage: Activate Instance
CreateInstance --> LazyLoad: Load Component
LazyLoad --> ShowPage: Component Loaded
ShowPage --> AnimateIn: Framer Motion
AnimateIn --> Active: Page Active
Active --> AnimateOut: Navigate Away
AnimateOut --> Cleanup: Non-Preserved
AnimateOut --> Hide: Preserved
Cleanup --> [*]
Hide --> [*]
ErrorPage --> [*]
6. Workflow Management Flow
graph TB
subgraph "Dashboard Page"
A[Dashboard.tsx] --> B[useWorkflowManager]
end
subgraph "Workflow Manager Hook"
B --> C[useWorkflow]
B --> D[useWorkflowStatus]
B --> E[useWorkflowMessages]
B --> F[useWorkflowLogs]
B --> G[useWorkflowOperations]
end
subgraph "Workflows Hook"
C --> H[useApiRequest]
D --> H
E --> H
F --> H
G --> H
end
subgraph "API Layer"
H --> I[api.ts]
I --> J[Backend API]
end
subgraph "Polling Logic"
B --> K{Polling Active?}
K -->|Yes| L[Poll Every 2s]
L --> D
L --> E
L --> F
K -->|No| M[Stop Polling]
end
style A fill:#e1f5ff
style B fill:#fff4e1
style H fill:#e8f5e9
style I fill:#fce4ec
7. File Upload & Preview Flow
sequenceDiagram
participant User
participant DateienPage
participant DateienTable
participant useFileOperations
participant api.ts
participant Backend
participant FilePreview
User->>DateienPage: Upload File
DateienPage->>DateienTable: File Selected
DateienTable->>useFileOperations: uploadFile(file)
useFileOperations->>api.ts: POST /api/files/
api.ts->>Backend: Upload Request
Backend-->>api.ts: File Metadata
api.ts-->>useFileOperations: Response
useFileOperations-->>DateienTable: Success
User->>DateienTable: Click File
DateienTable->>FilePreview: Show Preview
FilePreview->>FilePreview: Detect File Type
FilePreview->>FilePreview: Select Renderer
FilePreview->>api.ts: GET /api/files/{id}/content
api.ts->>Backend: File Content Request
Backend-->>api.ts: File Content
api.ts-->>FilePreview: Content Data
FilePreview-->>User: Render Preview
8. Internationalization Flow
graph TB
subgraph "Initialization"
A[App.tsx] --> B[LanguageProvider]
B --> C{Check localStorage}
C -->|Found| D[Load Saved Language]
C -->|Not Found| E[Detect Browser Language]
D --> F[loadLanguage]
E --> F
end
subgraph "Language Loading"
F --> G{Language Code}
G -->|de| H[locales/de.ts]
G -->|en| I[locales/en.ts]
G -->|fr| J[locales/fr.ts]
H --> K[Translation Object]
I --> K
J --> K
end
subgraph "Usage"
K --> L[LanguageContext State]
L --> M[useLanguage Hook]
M --> N[Component]
N --> O[t function]
O --> P[Translation Key]
P --> K
end
style A fill:#e1f5ff
style B fill:#fff4e1
style K fill:#e8f5e9
style N fill:#fce4ec
9. Component Dependency Graph
graph TD
subgraph "Core Components"
A[PageManager] --> B[pageConfigs]
B --> C[Lazy Pages]
end
subgraph "Feature Components"
D[DashboardChat] --> E[DashboardChatArea]
E --> F[DashboardChatAreaMessageList]
E --> G[DashboardChatAreaInput]
E --> H[DashboardChatAreaConnectedFiles]
I[DateienTable] --> J[FilePreview]
J --> K[FileRenderers]
L[ConnectionsTable] --> M[ConnectionEditModal]
N[PromptsTable] --> O[Popup]
O --> P[EditForm]
end
subgraph "Hooks Layer"
Q[useWorkflowManager] --> R[useWorkflows]
R --> S[useApiRequest]
T[useConnections] --> S
U[useFiles] --> S
V[usePrompts] --> S
end
subgraph "API Layer"
S --> W[api.ts]
W --> X[Backend]
end
C --> D
C --> I
C --> L
C --> N
D --> Q
I --> U
L --> T
N --> V
style A fill:#e1f5ff
style S fill:#fff4e1
style W fill:#e8f5e9
style X fill:#fce4ec
10. State Management Architecture
graph TB
subgraph "Global State"
A[LanguageContext] --> B[Current Language]
A --> C[Translations]
D[AuthProvider] --> E[MSAL Instance]
D --> F[Account State]
end
subgraph "Component State"
G[useState] --> H[Local Component State]
I[useReducer] --> J[Complex State Logic]
end
subgraph "Derived State"
K[useMemo] --> L[Computed Values]
M[useCallback] --> N[Memoized Functions]
end
subgraph "Server State"
O[useApiRequest] --> P[Loading State]
O --> Q[Error State]
O --> R[Data State]
end
B --> G
C --> G
E --> D
F --> D
H --> K
J --> K
P --> G
Q --> G
R --> G
style A fill:#e1f5ff
style D fill:#e1f5ff
style O fill:#fff4e1
style G fill:#e8f5e9
11. Build & Deployment Flow
graph LR
subgraph "Development"
A[Source Code] --> B[Vite Dev Server]
B --> C[Hot Module Replacement]
C --> D[Browser]
end
subgraph "Build Process"
E[Source Code] --> F[TypeScript Compiler]
F --> G[Vite Build]
G --> H[Bundle Optimization]
H --> I[Static Assets]
end
subgraph "Environment"
J[.env.dev] --> B
K[.env.int] --> G
L[.env.prod] --> G
end
subgraph "Deployment"
I --> M[Static Web App]
M --> N[Azure Static Web Apps]
end
style A fill:#e1f5ff
style B fill:#fff4e1
style G fill:#e8f5e9
style N fill:#fce4ec
12. Error Handling Flow
graph TD
A[API Request] --> B{Request Success?}
B -->|Yes| C[Return Data]
B -->|No| D[Error Handler]
D --> E{Error Type?}
E -->|401 Unauthorized| F[Clear Token]
F --> G[Redirect to Login]
E -->|Validation Error| H[Format Validation Errors]
H --> I[Display User-Friendly Message]
E -->|Network Error| J[Display Network Error]
E -->|Server Error| K[Format Server Error]
K --> I
E -->|Unknown Error| L[Display Generic Error]
I --> M[Update UI State]
J --> M
L --> M
style A fill:#e1f5ff
style D fill:#ffebee
style M fill:#e8f5e9
Diagramm-Erklärungen
Farbcodierung
- Blau (#e1f5ff): Entry Points & Core Components
- Orange (#fff4e1): Business Logic & Hooks
- Grün (#e8f5e9): API Layer & Data
- Rosa (#fce4ec): External Services & Backend
Diagramm-Typen
- High-Level Architektur: Gesamtübersicht der Anwendung
- Component Hierarchy: Komponenten-Struktur und Verschachtelung
- Data Flow: Datenfluss durch die Anwendung
- Sequence Diagrams: Zeitliche Abläufe von Prozessen
- State Diagrams: Zustandsübergänge
- Dependency Graphs: Abhängigkeiten zwischen Modulen
Zuletzt aktualisiert: 2025-01-15