{
"tool_response": {
"type": "text",
"file": {
"filePath": "\/var\/www\/dev.campus.systemische-tools.de\/src\/View\/semantic-explorer\/graph.php",
"content": "<?php\n\ndeclare(strict_types=1);\n\n\/\/ @responsibility: View für Entity-Relations Graph\n\nob_start();\n?>\n<link rel=\"stylesheet\" href=\"\/css\/graph.css\">\n\n<nav class=\"breadcrumb\">\n <a href=\"\/semantic-explorer\">Semantic Explorer<\/a> »\n <span>Entity Graph<\/span>\n<\/nav>\n\n<h1>Entity Relations Graph<\/h1>\n<p class=\"graph-stats\">Alle Entitäten und ihre Beziehungen<\/p>\n\n<div class=\"graph-controls\">\n <div class=\"graph-legend\">\n <span class=\"graph-legend-item\"><span class=\"graph-legend-node graph-node-person\"><\/span> Person<\/span>\n <span class=\"graph-legend-item\"><span class=\"graph-legend-node graph-node-organization\"><\/span> Organization<\/span>\n <span class=\"graph-legend-item\"><span class=\"graph-legend-node graph-node-location\"><\/span> Location<\/span>\n <span class=\"graph-legend-item\"><span class=\"graph-legend-node graph-node-concept\"><\/span> Concept<\/span>\n <span class=\"graph-legend-item\"><span class=\"graph-legend-node graph-node-method\"><\/span> Method<\/span>\n <span class=\"graph-legend-item\"><span class=\"graph-legend-node graph-node-tool\"><\/span> Tool<\/span>\n <span class=\"graph-legend-item\"><span class=\"graph-legend-node graph-node-event\"><\/span> Event<\/span>\n <span class=\"graph-legend-item graph-legend-separator\"><span class=\"graph-legend-link graph-link-related_to\"><\/span> RELATED_TO<\/span>\n <span class=\"graph-legend-item\"><span class=\"graph-legend-link graph-link-part_of\"><\/span> PART_OF<\/span>\n <span class=\"graph-legend-item\"><span class=\"graph-legend-link graph-link-used_in\"><\/span> USED_IN<\/span>\n <\/div>\n <div class=\"graph-filters\">\n <label for=\"entity-type-filter\" class=\"graph-filter-label\">Entity-Typ:<\/label>\n <select id=\"entity-type-filter\" class=\"graph-filter-select\">\n <option value=\"\">Alle<\/option>\n <?php foreach ($entityTypes as $type): ?>\n <option value=\"<?= htmlspecialchars(strtoupper($type['type'])) ?>\"><?= htmlspecialchars($type['type']) ?> (<?= $type['count'] ?>)<\/option>\n <?php endforeach; ?>\n <\/select>\n <label for=\"relation-type-filter\" class=\"graph-filter-label\">Relation:<\/label>\n <select id=\"relation-type-filter\" class=\"graph-filter-select\">\n <option value=\"\">Alle<\/option>\n <?php foreach ($relationTypes as $type): ?>\n <option value=\"<?= htmlspecialchars($type['relation_type']) ?>\"><?= htmlspecialchars($type['relation_type']) ?> (<?= $type['count'] ?>)<\/option>\n <?php endforeach; ?>\n <\/select>\n <button id=\"reset-zoom\" class=\"btn btn--secondary graph-reset-btn\">Reset Zoom<\/button>\n <\/div>\n<\/div>\n\n<div id=\"graph-stats\" class=\"graph-stats\"><\/div>\n\n<div id=\"graph-container\" class=\"graph-container\"><\/div>\n\n<div class=\"graph-back-link\">\n <a href=\"\/semantic-explorer\" class=\"btn btn--secondary\">← Zurück zur Übersicht<\/a>\n<\/div>\n\n<script src=\"https:\/\/d3js.org\/d3.v7.min.js\"><\/script>\n<script>\n(function() {\n const container = document.getElementById('graph-container');\n const width = container.clientWidth;\n const height = container.clientHeight;\n\n const nodeColors = {\n PERSON: '#6366f1',\n ORGANIZATION: '#f59e0b',\n LOCATION: '#10b981',\n CONCEPT: '#8b5cf6',\n METHOD: '#3b82f6',\n TOOL: '#14b8a6',\n EVENT: '#f43f5e',\n OTHER: '#94a3b8'\n };\n\n const linkColors = {\n RELATED_TO: '#94a3b8',\n PART_OF: '#3b82f6',\n USED_IN: '#10b981',\n DEVELOPED_BY: '#8b5cf6',\n TAUGHT_BY: '#f59e0b',\n BASED_ON: '#14b8a6',\n INFLUENCED_BY: '#f43f5e',\n WORKS_WITH: '#6366f1',\n TEACHES: '#f59e0b',\n CREATED: '#8b5cf6'\n };\n\n container.innerHTML = '<div class=\"graph-loading\">Lade Graph-Daten...<\/div>';\n\n fetch('\/semantic-explorer\/graph-data')\n .then(r => r.json())\n .then(data => {\n container.innerHTML = '';\n\n document.getElementById('graph-stats').textContent =\n `${data.stats.nodes} Entitäten | ${data.stats.links} Relationen | ${data.stats.entityTypes} Entity-Typen | ${data.stats.relationTypes} Relation-Typen`;\n\n \/\/ Group nodes by type for static layout\n const typeGroups = {};\n data.nodes.forEach((node, i) => {\n const type = node.type || 'OTHER';\n if (!typeGroups[type]) typeGroups[type] = [];\n typeGroups[type].push(node);\n });\n\n \/\/ Compute static positions (circular layout by type)\n const typeKeys = Object.keys(typeGroups).sort();\n const typeCount = typeKeys.length;\n const centerX = width \/ 2;\n const centerY = height \/ 2;\n const typeRadius = Math.min(width, height) * 0.35;\n\n typeKeys.forEach((type, typeIndex) => {\n const nodes = typeGroups[type];\n const typeAngle = (2 * Math.PI * typeIndex) \/ typeCount - Math.PI \/ 2;\n const typeCenterX = centerX + typeRadius * Math.cos(typeAngle);\n const typeCenterY = centerY + typeRadius * Math.sin(typeAngle);\n\n const nodeCount = nodes.length;\n const nodeRadius = Math.min(120, 30 + nodeCount * 3);\n\n nodes.forEach((node, nodeIndex) => {\n if (nodeCount === 1) {\n node.x = typeCenterX;\n node.y = typeCenterY;\n } else {\n const nodeAngle = (2 * Math.PI * nodeIndex) \/ nodeCount;\n node.x = typeCenterX + nodeRadius * Math.cos(nodeAngle);\n node.y = typeCenterY + nodeRadius * Math.sin(nodeAngle);\n }\n });\n });\n\n \/\/ Create SVG with zoom\n const svg = d3.select('#graph-container')\n .append('svg')\n .attr('width', width)\n .attr('height', height);\n\n const g = svg.append('g');\n\n const zoom = d3.zoom()\n .scaleExtent([0.1, 4])\n .on('zoom', (event) => {\n g.attr('transform', event.transform);\n });\n\n svg.call(zoom);\n\n document.getElementById('reset-zoom').addEventListener('click', () => {\n svg.transition().duration(300).call(zoom.transform, d3.zoomIdentity);\n });\n\n \/\/ Arrow markers\n const linkTypes = [...new Set(data.links.map(l => l.type))];\n svg.append('defs').selectAll('marker')\n .data(linkTypes)\n .enter().append('marker')\n .attr('id', d => 'arrow-semantic-' + d)\n .attr('viewBox', '0 -5 10 10')\n .attr('refX', 15)\n .attr('refY', 0)\n .attr('markerWidth', 5)\n .attr('markerHeight', 5)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M0,-5L10,0L0,5')\n .attr('fill', d => linkColors[d] || '#94a3b8');\n\n \/\/ Draw type labels\n const typeLabels = g.append('g').attr('class', 'type-labels');\n typeKeys.forEach((type, typeIndex) => {\n const typeAngle = (2 * Math.PI * typeIndex) \/ typeCount - Math.PI \/ 2;\n const labelRadius = typeRadius + 140;\n const labelX = centerX + labelRadius * Math.cos(typeAngle);\n const labelY = centerY + labelRadius * Math.sin(typeAngle);\n\n typeLabels.append('text')\n .attr('x', labelX)\n .attr('y', labelY)\n .attr('text-anchor', 'middle')\n .attr('fill', nodeColors[type] || nodeColors.OTHER)\n .attr('font-size', '11px')\n .attr('font-weight', 'bold')\n .text(type);\n });\n\n \/\/ Draw links\n const link = g.append('g')\n .selectAll('line')\n .data(data.links)\n .enter().append('line')\n .attr('class', 'graph-link')\n .attr('data-type', d => d.type)\n .attr('stroke', d => linkColors[d.type] || '#94a3b8')\n .attr('stroke-width', d => 1 + (d.strength || 1) * 0.5)\n .attr('stroke-opacity', 0.4)\n .attr('marker-end', d => 'url(#arrow-semantic-' + d.type + ')')\n .attr('x1', d => data.nodes[d.source].x)\n .attr('y1', d => data.nodes[d.source].y)\n .attr('x2', d => data.nodes[d.target].x)\n .attr('y2', d => data.nodes[d.target].y);\n\n \/\/ Draw nodes\n const node = g.append('g')\n .selectAll('g')\n .data(data.nodes)\n .enter().append('g')\n .attr('class', 'graph-node')\n .attr('data-type', d => d.type)\n .attr('transform', d => `translate(${d.x},${d.y})`)\n .attr('cursor', 'pointer')\n .on('click', (event, d) => {\n if (d.entityId) {\n window.location.href = '\/semantic-explorer\/entitaeten\/' + d.entityId;\n }\n });\n\n node.append('circle')\n .attr('r', 8)\n .attr('fill', d => nodeColors[d.type] || nodeColors.OTHER)\n .attr('stroke', '#fff')\n .attr('stroke-width', 1.5);\n\n node.append('text')\n .text(d => d.label.length > 15 ? d.label.substring(0, 15) + '...' : d.label)\n .attr('x', 0)\n .attr('y', 20)\n .attr('text-anchor', 'middle')\n .attr('fill', 'var(--text-primary)')\n .attr('font-size', '8px');\n\n node.append('title')\n .text(d => d.label + ' (' + d.type + ')');\n\n \/\/ Filter logic\n const entityTy... [TRUNCATED-395a555dbd9c13dd]",
"numLines": 306,
"startLine": 1,
"totalLines": 306
}
}
}