feat(iace): Erweiterung 5 — Safety Knowledge Graph (React Flow)

Interaktiver Graph: Komponente → Gefaehrdung → Massnahme
- 3-Spalten-Layout: Indigo (Komponenten), Rot (Hazards), Gruen (Massnahmen)
- Animierte Kanten mit Pfeilmarkern
- Zoom, Pan, MiniMap, Controls
- Dependency: @xyflow/react v12 (MIT-Lizenz)

Alle 5 IACE Phase-5 Erweiterungen jetzt abgeschlossen:
1. Betriebszustand-UI
2. FMEA-Worksheet
3. Delta-Impact-Preview Modal
4. Textil + Landmaschinen Patterns
5. Safety Knowledge Graph

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

admin-compliance/app/sdk/iace/[projectId]/knowledge-graph/_hooks/useKnowledgeGraph.ts

@@ -0,0 +1,133 @@
+'use client'
+
+import { useState, useEffect, useMemo } from 'react'
+
+interface Component { id: string; name: string; component_type: string }
+interface Hazard { id: string; name: string; category: string; operational_states?: string[] }
+interface Mitigation { id: string; name?: string; title?: string; reduction_type: string; hazard_id?: string; linked_hazard_ids?: string[] }
+
+export interface GraphNode {
+  id: string
+  type: 'component' | 'hazard' | 'mitigation'
+  label: string
+  subLabel?: string
+  color: string
+}
+
+export interface GraphEdge {
+  id: string
+  source: string
+  target: string
+  label?: string
+}
+
+const NODE_COLORS: Record<string, string> = {
+  component: '#6366F1',  // indigo
+  hazard: '#EF4444',     // red
+  mitigation: '#10B981', // green
+}
+
+export function useKnowledgeGraph(projectId: string) {
+  const [components, setComponents] = useState<Component[]>([])
+  const [hazards, setHazards] = useState<Hazard[]>([])
+  const [mitigations, setMitigations] = useState<Mitigation[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    loadData()
+  }, [projectId]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function loadData() {
+    try {
+      const [compRes, hazRes, mitRes] = await Promise.all([
+        fetch(`/api/sdk/v1/iace/projects/${projectId}/components`),
+        fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`),
+        fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations`),
+      ])
+
+      if (compRes.ok) {
+        const j = await compRes.json()
+        setComponents((j.components || j || []).map((c: Record<string, unknown>) => ({
+          id: c.id as string, name: c.name as string, component_type: c.component_type as string || '',
+        })))
+      }
+      if (hazRes.ok) {
+        const j = await hazRes.json()
+        setHazards((j.hazards || j || []).map((h: Record<string, unknown>) => ({
+          id: h.id as string, name: h.name as string, category: h.category as string || '',
+          operational_states: (h.operational_states || []) as string[],
+        })))
+      }
+      if (mitRes.ok) {
+        const j = await mitRes.json()
+        setMitigations((j.mitigations || j || []).map((m: Record<string, unknown>) => ({
+          id: m.id as string, name: (m.name || m.title || '') as string,
+          title: (m.title || m.name || '') as string,
+          reduction_type: (m.reduction_type || '') as string,
+          hazard_id: (m.hazard_id || '') as string,
+          linked_hazard_ids: (m.linked_hazard_ids || []) as string[],
+        })))
+      }
+    } catch (err) {
+      console.error('Failed to load graph data:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const { nodes, edges } = useMemo(() => {
+    const graphNodes: GraphNode[] = []
+    const graphEdges: GraphEdge[] = []
+
+    // Component nodes
+    components.forEach((c) => {
+      graphNodes.push({
+        id: `comp-${c.id}`, type: 'component',
+        label: c.name, subLabel: c.component_type,
+        color: NODE_COLORS.component,
+      })
+    })
+
+    // Hazard nodes
+    hazards.forEach((h) => {
+      graphNodes.push({
+        id: `haz-${h.id}`, type: 'hazard',
+        label: h.name, subLabel: h.category,
+        color: NODE_COLORS.hazard,
+      })
+      // Edge: first component → hazard (simplified — could be per component_id)
+      if (components.length > 0) {
+        graphEdges.push({
+          id: `e-comp-haz-${h.id}`,
+          source: `comp-${components[0].id}`,
+          target: `haz-${h.id}`,
+          label: 'erzeugt',
+        })
+      }
+    })
+
+    // Mitigation nodes
+    mitigations.forEach((m) => {
+      graphNodes.push({
+        id: `mit-${m.id}`, type: 'mitigation',
+        label: m.title || m.name || m.id,
+        subLabel: m.reduction_type,
+        color: NODE_COLORS.mitigation,
+      })
+      // Edge: mitigation → hazard
+      const hazardIds = m.linked_hazard_ids?.length ? m.linked_hazard_ids : m.hazard_id ? [m.hazard_id] : []
+      hazardIds.forEach((hid) => {
+        graphEdges.push({
+          id: `e-mit-haz-${m.id}-${hid}`,
+          source: `mit-${m.id}`,
+          target: `haz-${hid}`,
+          label: 'schuetzt',
+        })
+      })
+    })
+
+    return { nodes: graphNodes, edges: graphEdges }
+  }, [components, hazards, mitigations])
+
+  return { nodes, edges, loading, stats: { components: components.length, hazards: hazards.length, mitigations: mitigations.length } }
+}

admin-compliance/app/sdk/iace/[projectId]/knowledge-graph/page.tsx

@@ -0,0 +1,191 @@
+'use client'
+
+import { useCallback, useMemo } from 'react'
+import { useParams } from 'next/navigation'
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  type Node,
+  type Edge,
+  MarkerType,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import { useKnowledgeGraph } from './_hooks/useKnowledgeGraph'
+
+const TYPE_STYLES: Record<string, { bg: string; border: string }> = {
+  component: { bg: '#EEF2FF', border: '#6366F1' },
+  hazard: { bg: '#FEF2F2', border: '#EF4444' },
+  mitigation: { bg: '#ECFDF5', border: '#10B981' },
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  component: 'Komponente',
+  hazard: 'Gefaehrdung',
+  mitigation: 'Massnahme',
+}
+
+export default function KnowledgeGraphPage() {
+  const { projectId } = useParams<{ projectId: string }>()
+  const { nodes: graphNodes, edges: graphEdges, loading, stats } = useKnowledgeGraph(projectId)
+
+  // Convert to React Flow nodes with layout
+  const rfNodes = useMemo((): Node[] => {
+    const compNodes = graphNodes.filter((n) => n.type === 'component')
+    const hazNodes = graphNodes.filter((n) => n.type === 'hazard')
+    const mitNodes = graphNodes.filter((n) => n.type === 'mitigation')
+
+    const nodes: Node[] = []
+    const colWidth = 300
+    const rowHeight = 80
+
+    // Column 1: Components
+    compNodes.forEach((n, i) => {
+      nodes.push({
+        id: n.id,
+        position: { x: 0, y: i * rowHeight },
+        data: { label: n.label, subLabel: n.subLabel, nodeType: n.type },
+        style: {
+          background: TYPE_STYLES.component.bg,
+          border: `2px solid ${TYPE_STYLES.component.border}`,
+          borderRadius: '12px',
+          padding: '8px 12px',
+          fontSize: '12px',
+          fontWeight: 500,
+          width: 200,
+        },
+      })
+    })
+
+    // Column 2: Hazards
+    hazNodes.forEach((n, i) => {
+      nodes.push({
+        id: n.id,
+        position: { x: colWidth, y: i * rowHeight },
+        data: { label: n.label, subLabel: n.subLabel, nodeType: n.type },
+        style: {
+          background: TYPE_STYLES.hazard.bg,
+          border: `2px solid ${TYPE_STYLES.hazard.border}`,
+          borderRadius: '12px',
+          padding: '8px 12px',
+          fontSize: '12px',
+          fontWeight: 500,
+          width: 220,
+        },
+      })
+    })
+
+    // Column 3: Mitigations
+    mitNodes.forEach((n, i) => {
+      nodes.push({
+        id: n.id,
+        position: { x: colWidth * 2, y: i * rowHeight },
+        data: { label: n.label, subLabel: n.subLabel, nodeType: n.type },
+        style: {
+          background: TYPE_STYLES.mitigation.bg,
+          border: `2px solid ${TYPE_STYLES.mitigation.border}`,
+          borderRadius: '12px',
+          padding: '8px 12px',
+          fontSize: '12px',
+          fontWeight: 500,
+          width: 220,
+        },
+      })
+    })
+
+    return nodes
+  }, [graphNodes])
+
+  const rfEdges = useMemo((): Edge[] => {
+    return graphEdges.map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      label: e.label,
+      type: 'smoothstep',
+      animated: true,
+      style: { stroke: '#94A3B8', strokeWidth: 1.5 },
+      labelStyle: { fontSize: 10, fill: '#64748B' },
+      markerEnd: { type: MarkerType.ArrowClosed, color: '#94A3B8' },
+    }))
+  }, [graphEdges])
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(rfNodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(rfEdges)
+
+  // Update when data loads
+  const onInit = useCallback(() => {
+    if (rfNodes.length > 0) {
+      setNodes(rfNodes)
+      setEdges(rfEdges)
+    }
+  }, [rfNodes, rfEdges, setNodes, setEdges])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div>
+        <h1 className="text-xl font-bold text-gray-900 dark:text-white">Safety Knowledge Graph</h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
+          Interaktive Visualisierung: Komponente → Gefaehrdung → Massnahme
+        </p>
+      </div>
+
+      {/* Legend + Stats */}
+      <div className="flex items-center gap-6">
+        {(['component', 'hazard', 'mitigation'] as const).map((t) => (
+          <div key={t} className="flex items-center gap-2">
+            <div className="w-3 h-3 rounded-full" style={{ backgroundColor: TYPE_STYLES[t].border }} />
+            <span className="text-xs text-gray-600">{TYPE_LABELS[t]} ({
+              t === 'component' ? stats.components : t === 'hazard' ? stats.hazards : stats.mitigations
+            })</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Graph */}
+      {graphNodes.length === 0 ? (
+        <div className="text-center py-16 text-gray-500">
+          Keine Daten — bitte zuerst Projekt initialisieren.
+        </div>
+      ) : (
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden" style={{ height: '600px' }}>
+          <ReactFlow
+            nodes={rfNodes}
+            edges={rfEdges}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            onInit={onInit}
+            fitView
+            fitViewOptions={{ padding: 0.2 }}
+            minZoom={0.3}
+            maxZoom={2}
+            nodesDraggable
+            nodesConnectable={false}
+          >
+            <Background gap={20} size={1} color="#f0f0f0" />
+            <Controls />
+            <MiniMap
+              nodeColor={(node) => {
+                const t = (node.data as { nodeType?: string })?.nodeType || 'component'
+                return TYPE_STYLES[t]?.border || '#94A3B8'
+              }}
+              maskColor="rgba(0,0,0,0.05)"
+            />
+          </ReactFlow>
+        </div>
+      )}
+    </div>
+  )
+}

admin-compliance/app/sdk/iace/layout.tsx

@@ -21,6 +21,7 @@ const IACE_NAV_ITEMS = [
 
 const IACE_EXTRA_ITEMS = [
   { id: 'fmea', label: 'FMEA', href: '/fmea', icon: 'grid' },
+  { id: 'knowledge-graph', label: 'Knowledge Graph', href: '/knowledge-graph', icon: 'activity' },
   { id: 'classification', label: 'Klassifikation', href: '/classification', icon: 'tag' },
   { id: 'monitoring', label: 'Monitoring', href: '/monitoring', icon: 'activity' },
 ]

admin-compliance/package-lock.json

@@ -16,6 +16,7 @@
         "@tiptap/pm": "^3.20.2",
         "@tiptap/react": "^3.20.2",
         "@tiptap/starter-kit": "^3.20.2",
+        "@xyflow/react": "^12.10.2",
         "bpmn-js": "^18.0.1",
         "jspdf": "^4.1.0",
         "jszip": "^3.10.1",
@@ -3413,6 +3414,38 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@xyflow/react": {
+      "version": "12.10.2",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.10.2.tgz",
+      "integrity": "sha512-CgIi6HwlcHXwlkTpr0fxLv/0sRVNZ8IdwKLzzeCscaYBwpvfcH1QFOCeaTCuEn1FQEs/B8CjnTSjhs8udgmBgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.76",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.76",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.76.tgz",
+      "integrity": "sha512-hvwvnRS1B3REwVDlWexsq7YQaPZeG3/mKo1jv38UmnpWmxihp14bW6VtEOuHEwJX2FvzFw8k77LyKSk/wiZVNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",

admin-compliance/package.json

@@ -26,6 +26,7 @@
     "@tiptap/pm": "^3.20.2",
     "@tiptap/react": "^3.20.2",
     "@tiptap/starter-kit": "^3.20.2",
+    "@xyflow/react": "^12.10.2",
     "bpmn-js": "^18.0.1",
     "jspdf": "^4.1.0",
     "jszip": "^3.10.1",