ff62a34d89
Phase 1: Extract 6 shared CSS modules (table-section, log-panel, rate-colors, refresh-indicator, chart-card, section-card) eliminating ~135 duplicate class definitions across 11 files. Phase 2: Replace all hardcoded hex colors in CSS modules with design system variables. Strip ~55 hex fallbacks from var() patterns. Fix 4 undefined variable names (--accent, --bg-base, --surface, --bg-surface-raised). Phase 3: Replace ~45 hardcoded hex values in ProcessDiagram SVG components with var() CSS custom properties. Fix Dashboard.tsx color prop. Phase 4: Create CSS modules for AdminLayout, DatabaseAdminPage, OidcCallback (previously 100% inline). Extract shared PageLoader component (replaces 3 copy-pasted spinner patterns). Move AppsTab static inline styles to CSS classes. Extract LayoutShell StarredList styles. 58 files changed, net -219 lines. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import type { DiagramEdge as DiagramEdgeType } from '../../api/queries/diagrams';
|
|
|
|
interface DiagramEdgeProps {
|
|
edge: DiagramEdgeType;
|
|
offsetY?: number;
|
|
/** undefined = no overlay (default gray solid), true = traversed (green solid), false = not traversed (gray dashed) */
|
|
traversed?: boolean | undefined;
|
|
}
|
|
|
|
export function DiagramEdge({ edge, offsetY = 0, traversed }: DiagramEdgeProps) {
|
|
const pts = edge.points;
|
|
if (!pts || pts.length < 2) return null;
|
|
|
|
// Build SVG path: move to first point, then line segments through all waypoints.
|
|
// ELK bend points are waypoints, not bezier control points.
|
|
let d = `M ${pts[0][0]} ${pts[0][1] + offsetY}`;
|
|
for (let i = 1; i < pts.length; i++) {
|
|
d += ` L ${pts[i][0]} ${pts[i][1] + offsetY}`;
|
|
}
|
|
|
|
return (
|
|
<g className="diagram-edge">
|
|
<path
|
|
d={d}
|
|
fill="none"
|
|
stroke={traversed === true ? 'var(--success)' : 'var(--text-muted)'}
|
|
strokeWidth={traversed === true ? 1.5 : traversed === false ? 1 : 1.5}
|
|
strokeDasharray={traversed === false ? '4,3' : undefined}
|
|
markerEnd={traversed === true ? 'url(#arrowhead-green)' : traversed === false ? undefined : 'url(#arrowhead)'}
|
|
/>
|
|
{edge.label && pts.length >= 2 && (
|
|
<text
|
|
x={(pts[0][0] + pts[pts.length - 1][0]) / 2}
|
|
y={(pts[0][1] + pts[pts.length - 1][1]) / 2 + offsetY - 6}
|
|
fill="var(--text-muted)"
|
|
fontSize={9}
|
|
textAnchor="middle"
|
|
>
|
|
{edge.label}
|
|
</text>
|
|
)}
|
|
</g>
|
|
);
|
|
}
|