b681ddb131
Phase 1 — Python (klausur-service): 5 monoliths → 36 files - dsfa_corpus_ingestion.py (1,828 LOC → 5 files) - cv_ocr_engines.py (2,102 LOC → 7 files) - cv_layout.py (3,653 LOC → 10 files) - vocab_worksheet_api.py (2,783 LOC → 8 files) - grid_build_core.py (1,958 LOC → 6 files) Phase 2 — Go (edu-search-service, school-service): 8 monoliths → 19 files - staff_crawler.go (1,402 → 4), policy/store.go (1,168 → 3) - policy_handlers.go (700 → 2), repository.go (684 → 2) - search.go (592 → 2), ai_extraction_handlers.go (554 → 2) - seed_data.go (591 → 2), grade_service.go (646 → 2) Phase 3 — TypeScript (admin-lehrer): 45 monoliths → 220+ files - sdk/types.ts (2,108 → 16 domain files) - ai/rag/page.tsx (2,686 → 14 files) - 22 page.tsx files split into _components/ + _hooks/ - 11 component files split into sub-components - 10 SDK data catalogs added to loc-exceptions - Deleted dead backup index_original.ts (4,899 LOC) All original public APIs preserved via re-export facades. Zero new errors: Python imports verified, Go builds clean, TypeScript tsc --noEmit shows only pre-existing errors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
96 lines
2.7 KiB
TypeScript
96 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import ReactFlow, {
|
|
Node,
|
|
Edge,
|
|
Controls,
|
|
Background,
|
|
MiniMap,
|
|
BackgroundVariant,
|
|
Panel,
|
|
NodeChange,
|
|
EdgeChange,
|
|
} from 'reactflow'
|
|
import 'reactflow/dist/style.css'
|
|
|
|
import type { ScreenDefinition, FlowType } from '../types'
|
|
|
|
interface FlowDiagramProps {
|
|
flowType: FlowType
|
|
nodes: Node[]
|
|
edges: Edge[]
|
|
onNodesChange: (changes: NodeChange[]) => void
|
|
onEdgesChange: (changes: EdgeChange[]) => void
|
|
onNodeClick: (event: React.MouseEvent, node: Node) => void
|
|
onPaneClick: () => void
|
|
screens: ScreenDefinition[]
|
|
colors: Record<string, { bg: string; border: string; text: string }>
|
|
labels: Record<string, string>
|
|
categories: string[]
|
|
}
|
|
|
|
export function FlowDiagram({
|
|
flowType,
|
|
nodes,
|
|
edges,
|
|
onNodesChange,
|
|
onEdgesChange,
|
|
onNodeClick,
|
|
onPaneClick,
|
|
screens,
|
|
colors,
|
|
labels,
|
|
categories,
|
|
}: FlowDiagramProps) {
|
|
return (
|
|
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden" style={{ height: '500px' }}>
|
|
<ReactFlow
|
|
nodes={nodes}
|
|
edges={edges}
|
|
onNodesChange={onNodesChange}
|
|
onEdgesChange={onEdgesChange}
|
|
onNodeClick={onNodeClick}
|
|
onPaneClick={onPaneClick}
|
|
fitView
|
|
fitViewOptions={{ padding: 0.2 }}
|
|
attributionPosition="bottom-left"
|
|
>
|
|
<Controls />
|
|
<MiniMap
|
|
nodeColor={(node) => {
|
|
const screen = screens.find(s => s.id === node.id)
|
|
const catColors = screen ? colors[screen.category] : null
|
|
return catColors?.border || '#94a3b8'
|
|
}}
|
|
maskColor="rgba(0, 0, 0, 0.1)"
|
|
/>
|
|
<Background variant={BackgroundVariant.Dots} gap={12} size={1} />
|
|
|
|
<Panel position="top-left" className="bg-white/95 p-3 rounded-lg shadow-lg text-xs">
|
|
<div className="font-medium text-slate-700 mb-2">
|
|
{flowType === 'studio' ? '🎓 Studio' : '⚙️ Admin v2'}
|
|
</div>
|
|
<div className="space-y-1">
|
|
{categories.slice(0, 4).map((key) => {
|
|
const catColors = colors[key] || { bg: '#f1f5f9', border: '#94a3b8' }
|
|
return (
|
|
<div key={key} className="flex items-center gap-2">
|
|
<span
|
|
className="w-3 h-3 rounded"
|
|
style={{ background: catColors.bg, border: `1px solid ${catColors.border}` }}
|
|
/>
|
|
<span className="text-slate-600">{labels[key]}</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
<div className="mt-2 pt-2 border-t text-slate-400">
|
|
Klick = Subtree<br/>
|
|
Doppelklick = Oeffnen
|
|
</div>
|
|
</Panel>
|
|
</ReactFlow>
|
|
</div>
|
|
)
|
|
}
|