Extract DetailPanel, ArchHeader, Toolbar, ArchCanvas and ServiceTable into _components/, the ReactFlow node/edge builder into _hooks/useArchGraph, and layout constants/helpers into _layout.ts. page.tsx drops from 950 to 91 LOC, well below the 300 soft target. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import { ARCH_SERVICES, LAYERS, type ArchService, type ServiceLayer } from './architecture-data'
|
|
|
|
// =============================================================================
|
|
// TYPES
|
|
// =============================================================================
|
|
|
|
export type LayerFilter = 'alle' | ServiceLayer
|
|
|
|
// =============================================================================
|
|
// LAYOUT
|
|
// =============================================================================
|
|
|
|
export const NODE_WIDTH = 180
|
|
export const NODE_HEIGHT = 70
|
|
export const NODE_X_SPACING = 220
|
|
export const LANE_Y_START = 80
|
|
export const LANE_LABEL_HEIGHT = 40
|
|
|
|
export const LAYER_ORDER: ServiceLayer[] = ['frontend', 'backend', 'infrastructure', 'data-sovereignty']
|
|
|
|
export function getServicePosition(service: ArchService): { x: number; y: number } {
|
|
const layer = LAYERS[service.layer]
|
|
const layerServices = ARCH_SERVICES.filter(s => s.layer === service.layer)
|
|
const idx = layerServices.findIndex(s => s.id === service.id)
|
|
|
|
return {
|
|
x: 80 + idx * NODE_X_SPACING,
|
|
y: LANE_Y_START + LANE_LABEL_HEIGHT + layer.y,
|
|
}
|
|
}
|