| # 10 — Project Dependency Map |
|
|
| ## Overview |
|
|
| This diagram shows the dependency relationships between all BAYAN modules, highlighting critical paths, internal dependencies, and external services. |
|
|
| ## Full Dependency Graph |
|
|
| ```mermaid |
| graph TB |
| subgraph "Frontend Dependencies" |
| direction TB |
| INDEX["index.html<br/>(SPA Entry)"] |
| |
| subgraph "Core" |
| EDITOR["editor.js"] |
| RENDERER["renderer.js"] |
| SELECTION["selection.js"] |
| FORMAT["format.js"] |
| end |
| |
| subgraph "Auth" |
| AUTH["auth.js"] |
| AUTH_UI["auth-ui.js"] |
| SESSION["session.js"] |
| CLIENT["client.js"] |
| CONFIG["config.js"] |
| end |
| |
| subgraph "Data" |
| DOC_API["documents-api.js"] |
| DOC_UI["documents-ui.js"] |
| DOC_STATE["documents-state.js"] |
| SUMM_API["summaries-api.js"] |
| SUMM_UI["summaries-ui.js"] |
| SET_API["settings-api.js"] |
| SET_SYNC["settings-sync.js"] |
| end |
| |
| subgraph "Sync" |
| SYNC_MGR["sync-manager.js"] |
| SYNC_Q["sync-queue.js"] |
| SYNC_RES["sync-resolver.js"] |
| end |
| |
| subgraph "UI" |
| UI["ui.js"] |
| THEME["theme.js"] |
| API["api.js"] |
| end |
| |
| subgraph "Vendor" |
| DOCX["docx.min.js"] |
| JSPDF["jspdf.umd.min.js"] |
| SUPABASE_SDK["supabase-js (CDN)"] |
| end |
| end |
| |
| subgraph "Backend Dependencies" |
| APP["app.py (Flask)"] |
| MODEL_LOADER["model_loader.py"] |
| HF_INF["hf_inference.py"] |
| |
| subgraph "NLP" |
| ARASPELL_SVC["araspell_service.py"] |
| ARASPELL_RULES["araspell_rules.py"] |
| GRAMMAR_SVC["grammar_service.py"] |
| end |
| end |
| |
| subgraph "External Services" |
| SUPABASE["Supabase<br/>Auth + PostgreSQL"] |
| GOOGLE["Google OAuth"] |
| HF_HUB["HuggingFace Hub"] |
| HF_API_EXT["HF Inference API"] |
| end |
| |
| subgraph "Infrastructure" |
| DOCKER["Docker"] |
| GUNICORN["Gunicorn"] |
| GH_ACTIONS["GitHub Actions"] |
| end |
| |
| subgraph "Python Packages" |
| FLASK["Flask + CORS"] |
| TORCH["PyTorch (CPU)"] |
| TRANSFORMERS["Transformers"] |
| HF_HUB_PKG["huggingface_hub"] |
| end |
| |
| %% Frontend Internal Dependencies |
| INDEX --> EDITOR & RENDERER & SELECTION & FORMAT |
| INDEX --> AUTH & AUTH_UI & SESSION & CLIENT |
| INDEX --> DOC_API & DOC_UI & SUMM_API & SUMM_UI |
| INDEX --> SYNC_MGR & UI & THEME & API |
| |
| EDITOR --> RENDERER |
| EDITOR --> SELECTION |
| EDITOR --> API |
| EDITOR --> UI |
| |
| DOC_UI --> DOC_API |
| DOC_UI --> DOC_STATE |
| SUMM_UI --> SUMM_API |
| SET_SYNC --> SET_API |
| |
| SYNC_MGR --> SYNC_Q |
| SYNC_MGR --> SYNC_RES |
| SYNC_MGR --> DOC_API |
| |
| AUTH --> CLIENT |
| AUTH --> SESSION |
| AUTH_UI --> AUTH |
| CLIENT --> CONFIG |
| CLIENT --> SUPABASE_SDK |
| |
| DOC_API --> CLIENT |
| SUMM_API --> CLIENT |
| SET_API --> CLIENT |
| |
| DOC_UI --> DOCX |
| DOC_UI --> JSPDF |
| |
| %% Backend Internal Dependencies |
| APP --> MODEL_LOADER |
| APP --> HF_INF |
| APP --> ARASPELL_SVC |
| |
| ARASPELL_SVC --> ARASPELL_RULES |
| MODEL_LOADER --> TRANSFORMERS |
| MODEL_LOADER --> TORCH |
| MODEL_LOADER --> HF_HUB_PKG |
| |
| HF_INF --> HF_API_EXT |
| |
| %% External Dependencies |
| CLIENT --> SUPABASE |
| AUTH --> GOOGLE |
| MODEL_LOADER --> HF_HUB |
| DOCKER --> GUNICORN |
| GUNICORN --> APP |
| GH_ACTIONS --> DOCKER |
| |
| %% Styling |
| style APP fill:#059669,color:#fff |
| style SUPABASE fill:#3B82F6,color:#fff |
| style EDITOR fill:#7C3AED,color:#fff |
| style MODEL_LOADER fill:#DC2626,color:#fff |
| |
| linkStyle default stroke:#94A3B8 |
| ``` |
|
|
| ## Critical Dependency Paths |
|
|
| ```mermaid |
| graph LR |
| subgraph "Critical Path 1: Text Analysis" |
| A1["editor.js"] --> A2["api.js"] --> A3["app.py"] --> A4["model_loader.py"] --> A5["AraSpell"] |
| end |
| |
| subgraph "Critical Path 2: Authentication" |
| B1["auth-ui.js"] --> B2["auth.js"] --> B3["client.js"] --> B4["Supabase SDK"] --> B5["Supabase"] |
| end |
| |
| subgraph "Critical Path 3: Document Sync" |
| C1["sync-manager.js"] --> C2["documents-api.js"] --> C3["client.js"] --> C4["Supabase"] |
| end |
| |
| style A1 fill:#EF4444,color:#fff |
| style B1 fill:#3B82F6,color:#fff |
| style C1 fill:#22C55E,color:#fff |
| ``` |
|
|
| ## Dependency Matrix |
|
|
| | Module | Depends On | Depended By | |
| |--------|-----------|-------------| |
| | `editor.js` | renderer, selection, api, ui | index.html | |
| | `renderer.js` | — | editor.js | |
| | `auth.js` | client, session | auth-ui.js | |
| | `documents-api.js` | client | documents-ui, sync-manager | |
| | `sync-manager.js` | sync-queue, sync-resolver, documents-api | editor.js | |
| | `app.py` | model_loader, hf_inference, araspell_service | Gunicorn | |
| | `model_loader.py` | transformers, torch, huggingface_hub | app.py | |
| | `client.js` | config, supabase-js CDN | auth, documents-api, summaries-api, settings-api | |
| |
| ## Future Extension Points |
| |
| | Extension | Where to Add | Dependencies Needed | |
| |-----------|-------------|-------------------| |
| | New NLP model | `model_loader.py` + `/api/` route in `app.py` | transformers | |
| | Multi-language | `araspell_rules.py` + new language rules | Language-specific models | |
| | Mobile app | New client consuming same `/api/` endpoints | React Native / Flutter | |
| | Analytics | New Supabase table + tracking module | — | |
| | Real-time collab | Supabase Realtime channel | supabase-js realtime | |
|
|