Protokoll #11780

{
    "event": "PreToolUse",
    "tool_name": "Edit",
    "tool_input": {
        "file_path": "\/var\/www\/dev.campus.systemische-tools.de\/src\/View\/docs\/code-graph-global.php",
        "old_string": "            const depTypeFilter = document.getElementById('dep-type-filter');\n\n            function applyFilters() {\n                const selectedNs = filter.value;\n                const selectedType = depTypeFilter.value;\n\n                const connectedNodes = new Set();\n                if (selectedType) {\n                    data.links.forEach(link => {\n                        if (link.type === selectedType) {\n                            connectedNodes.add(data.nodes[link.source].id);\n                            connectedNodes.add(data.nodes[link.target].id);\n                        }\n                    });\n                }\n\n                d3.selectAll('.graph-link')\n                    .style('opacity', d => {\n                        const typeMatch = !selectedType || d.type === selectedType;\n                        const srcNs = data.nodes[d.source].namespace;\n                        const tgtNs = data.nodes[d.target].namespace;\n                        const nsMatch = !selectedNs || srcNs === selectedNs || tgtNs === selectedNs;\n\n                        if (!typeMatch) return 0;\n                        if (!nsMatch) return 0.05;\n                        return 0.6;\n                    });\n\n                d3.selectAll('.graph-node')\n                    .style('opacity', d => {\n                        const typeMatch = !selectedType || connectedNodes.has(d.id);\n                        const nsMatch = !selectedNs || d.namespace === selectedNs;\n\n                        if (selectedType && !typeMatch) return 0.1;\n                        if (selectedNs && !nsMatch) return 0.1;\n                        return 1;\n                    });\n            }\n\n            filter.addEventListener('change', applyFilters);\n            depTypeFilter.addEventListener('change', applyFilters);",
        "new_string": "            const depTypeFilter = document.getElementById('dep-type-filter');\n            const langFilter = document.getElementById('lang-filter');\n\n            function applyFilters() {\n                const selectedNs = filter.value;\n                const selectedType = depTypeFilter.value;\n                const selectedLang = langFilter.value;\n\n                const connectedNodes = new Set();\n                if (selectedType) {\n                    data.links.forEach(link => {\n                        if (link.type === selectedType) {\n                            connectedNodes.add(data.nodes[link.source].id);\n                            connectedNodes.add(data.nodes[link.target].id);\n                        }\n                    });\n                }\n\n                d3.selectAll('.graph-link')\n                    .style('opacity', d => {\n                        const typeMatch = !selectedType || d.type === selectedType;\n                        const srcNs = data.nodes[d.source].namespace;\n                        const tgtNs = data.nodes[d.target].namespace;\n                        const srcLang = data.nodes[d.source].extension || 'php';\n                        const tgtLang = data.nodes[d.target].extension || 'php';\n                        const nsMatch = !selectedNs || srcNs === selectedNs || tgtNs === selectedNs;\n                        const langMatch = !selectedLang || srcLang === selectedLang || tgtLang === selectedLang;\n\n                        if (!typeMatch) return 0;\n                        if (!nsMatch) return 0.05;\n                        if (!langMatch) return 0.05;\n                        return 0.6;\n                    });\n\n                d3.selectAll('.graph-node')\n                    .style('opacity', d => {\n                        const typeMatch = !selectedType || connectedNodes.has(d.id);\n                        const nsMatch = !selectedNs || d.namespace === selectedNs;\n                        const langMatch = !selectedLang || (d.extension || 'php') === selectedLang;\n\n                        if (selectedType && !typeMatch) return 0.1;\n                        if (selectedNs && !nsMatch) return 0.1;\n                        if (selectedLang && !langMatch) return 0.1;\n                        return 1;\n                    });\n            }\n\n            filter.addEventListener('change', applyFilters);\n            depTypeFilter.addEventListener('change', applyFilters);\n            langFilter.addEventListener('change', applyFilters);"
    }
}

{
    "tool_response": {
        "filePath": "\/var\/www\/dev.campus.systemische-tools.de\/src\/View\/docs\/code-graph-global.php",
        "oldString": "            const depTypeFilter = document.getElementById('dep-type-filter');\n\n            function applyFilters() {\n                const selectedNs = filter.value;\n                const selectedType = depTypeFilter.value;\n\n                const connectedNodes = new Set();\n                if (selectedType) {\n                    data.links.forEach(link => {\n                        if (link.type === selectedType) {\n                            connectedNodes.add(data.nodes[link.source].id);\n                            connectedNodes.add(data.nodes[link.target].id);\n                        }\n                    });\n                }\n\n                d3.selectAll('.graph-link')\n                    .style('opacity', d => {\n                        const typeMatch = !selectedType || d.type === selectedType;\n                        const srcNs = data.nodes[d.source].namespace;\n                        const tgtNs = data.nodes[d.target].namespace;\n                        const nsMatch = !selectedNs || srcNs === selectedNs || tgtNs === selectedNs;\n\n                        if (!typeMatch) return 0;\n                        if (!nsMatch) return 0.05;\n                        return 0.6;\n                    });\n\n                d3.selectAll('.graph-node')\n                    .style('opacity', d => {\n                        const typeMatch = !selectedType || connectedNodes.has(d.id);\n                        const nsMatch = !selectedNs || d.namespace === selectedNs;\n\n                        if (selectedType && !typeMatch) return 0.1;\n                        if (selectedNs && !nsMatch) return 0.1;\n                        return 1;\n                    });\n            }\n\n            filter.addEventListener('change', applyFilters);\n            depTypeFilter.addEventListener('change', applyFilters);",
        "newString": "            const depTypeFilter = document.getElementById('dep-type-filter');\n            const langFilter = document.getElementById('lang-filter');\n\n            function applyFilters() {\n                const selectedNs = filter.value;\n                const selectedType = depTypeFilter.value;\n                const selectedLang = langFilter.value;\n\n                const connectedNodes = new Set();\n                if (selectedType) {\n                    data.links.forEach(link => {\n                        if (link.type === selectedType) {\n                            connectedNodes.add(data.nodes[link.source].id);\n                            connectedNodes.add(data.nodes[link.target].id);\n                        }\n                    });\n                }\n\n                d3.selectAll('.graph-link')\n                    .style('opacity', d => {\n                        const typeMatch = !selectedType || d.type === selectedType;\n                        const srcNs = data.nodes[d.source].namespace;\n                        const tgtNs = data.nodes[d.target].namespace;\n                        const srcLang = data.nodes[d.source].extension || 'php';\n                        const tgtLang = data.nodes[d.target].extension || 'php';\n                        const nsMatch = !selectedNs || srcNs === selectedNs || tgtNs === selectedNs;\n                        const langMatch = !selectedLang || srcLang === selectedLang || tgtLang === selectedLang;\n\n                        if (!typeMatch) return 0;\n                        if (!nsMatch) return 0.05;\n                        if (!langMatch) return 0.05;\n                        return 0.6;\n                    });\n\n                d3.selectAll('.graph-node')\n                    .style('opacity', d => {\n                        const typeMatch = !selectedType || connectedNodes.has(d.id);\n                        const nsMatch = !selectedNs || d.namespace === selectedNs;\n                        const langMatch = !selectedLang || (d.extension || 'php') === selectedLang;\n\n                        if (selectedType && !typeMatch) return 0.1;\n                        if (selectedNs && !nsMatch) return 0.1;\n                        if (selectedLang && !langMatch) return 0.1;\n                        return 1;\n                    });\n            }\n\n            filter.addEventListener('change', applyFilters);\n            depTypeFilter.addEventListener('change', applyFilters);\n            langFilter.addEventListener('change', applyFilters);",
        "originalFile": "<?php\n\ndeclare(strict_types=1);\n\n\/\/ @responsibility: View für globalen Projekt-Dependency-Graph\n\nob_start();\n?>\n<link rel=\"stylesheet\" href=\"\/css\/graph.css\">\n\n<nav class=\"breadcrumb\">\n    <a href=\"\/docs\/code\">Code-Analyse<\/a> &raquo;\n    <span>Projekt-Graph<\/span>\n<\/nav>\n\n<h1>Projekt Dependency Graph<\/h1>\n<p class=\"graph-stats\">Alle Dependency-Beziehungen im Projekt (nur interne Klassen)<\/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-php\"><\/span> PHP<\/span>\n        <span class=\"graph-legend-item\"><span class=\"graph-legend-node graph-node-python\"><\/span> Python<\/span>\n        <span class=\"graph-legend-item\"><span class=\"graph-legend-node graph-node-js\"><\/span> JavaScript<\/span>\n        <span class=\"graph-legend-item graph-legend-separator\"><span class=\"graph-legend-link graph-link-extends\"><\/span> extends<\/span>\n        <span class=\"graph-legend-item\"><span class=\"graph-legend-link graph-link-implements\"><\/span> implements<\/span>\n        <span class=\"graph-legend-item\"><span class=\"graph-legend-link graph-link-constructor\"><\/span> constructor<\/span>\n        <span class=\"graph-legend-item\"><span class=\"graph-legend-link graph-link-use\"><\/span> use\/import<\/span>\n    <\/div>\n    <div class=\"graph-filters\">\n        <label for=\"lang-filter\" class=\"graph-filter-label\">Sprache:<\/label>\n        <select id=\"lang-filter\" class=\"graph-filter-select\">\n            <option value=\"\">Alle<\/option>\n            <option value=\"php\">PHP<\/option>\n            <option value=\"py\">Python<\/option>\n            <option value=\"js\">JavaScript<\/option>\n        <\/select>\n        <label for=\"dep-type-filter\" class=\"graph-filter-label\">Typ:<\/label>\n        <select id=\"dep-type-filter\" class=\"graph-filter-select\">\n            <option value=\"\">Alle<\/option>\n            <option value=\"extends\">extends<\/option>\n            <option value=\"implements\">implements<\/option>\n            <option value=\"constructor\">constructor<\/option>\n            <option value=\"use\">use<\/option>\n            <option value=\"trait\">trait<\/option>\n        <\/select>\n        <label for=\"namespace-filter\" class=\"graph-filter-label\">Namespace:<\/label>\n        <select id=\"namespace-filter\" class=\"graph-filter-select\">\n            <option value=\"\">Alle<\/option>\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=\"\/docs\/code\" class=\"btn btn--secondary\">&larr; 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    \/\/ Language-based colors\n    const langColors = {\n        php: '#6366f1',      \/\/ Indigo\n        py: '#10b981',       \/\/ Emerald (Python green)\n        js: '#f59e0b'        \/\/ Amber (JavaScript yellow)\n    };\n\n    const linkColors = {\n        extends: '#f59e0b',\n        implements: '#3b82f6',\n        constructor: '#8b5cf6',\n        use: '#94a3b8',\n        trait: '#14b8a6'\n    };\n\n    container.innerHTML = '<div class=\"graph-loading\">Lade Graph-Daten...<\/div>';\n\n    fetch('\/docs\/code\/graph-data')\n        .then(r => r.json())\n        .then(data => {\n            container.innerHTML = '';\n\n            \/\/ Count by language\n            const langCounts = { php: 0, py: 0, js: 0 };\n            data.nodes.forEach(n => {\n                const ext = n.extension || 'php';\n                if (langCounts[ext] !== undefined) langCounts[ext]++;\n            });\n\n            document.getElementById('graph-stats').textContent =\n                `${data.stats.nodes} Klassen | ${data.stats.links} Beziehungen | PHP: ${langCounts.php} | Python: ${langCounts.py} | JS: ${langCounts.js}`;\n\n            const namespaces = [...new Set(data.nodes.map(n => n.namespace))].sort();\n            const filter = document.getElementById('namespace-filter');\n            namespaces.forEach(ns => {\n                const opt = document.createElement('option');\n                opt.value = ns;\n                opt.textContent = ns;\n                filter.appendChild(opt);\n            });\n\n            const namespaceGroups = {};\n            data.nodes.forEach((node, i) => {\n                const ns = node.namespace || 'global';\n                if (!namespaceGroups[ns]) namespaceGroups[ns] = [];\n                namespaceGroups[ns].push(node);\n            });\n\n            const nsKeys = Object.keys(namespaceGroups).sort();\n            const nsCount = nsKeys.length;\n            const centerX = width \/ 2;\n            const centerY = height \/ 2;\n            const nsRadius = Math.min(width, height) * 0.35;\n\n            nsKeys.forEach((ns, nsIndex) => {\n                const nodes = namespaceGroups[ns];\n                const nsAngle = (2 * Math.PI * nsIndex) \/ nsCount - Math.PI \/ 2;\n                const nsCenterX = centerX + nsRadius * Math.cos(nsAngle);\n                const nsCenterY = centerY + nsRadius * Math.sin(nsAngle);\n\n                const nodeCount = nodes.length;\n                const nodeRadius = Math.min(80, 20 + nodeCount * 5);\n\n                nodes.forEach((node, nodeIndex) => {\n                    if (nodeCount === 1) {\n                        node.x = nsCenterX;\n                        node.y = nsCenterY;\n                    } else {\n                        const nodeAngle = (2 * Math.PI * nodeIndex) \/ nodeCount;\n                        node.x = nsCenterX + nodeRadius * Math.cos(nodeAngle);\n                        node.y = nsCenterY + nodeRadius * Math.sin(nodeAngle);\n                    }\n                });\n            });\n\n            const nodeIndex = {};\n            data.nodes.forEach((n, i) => nodeIndex[n.id] = i);\n\n            data.links.forEach(link => {\n                if (typeof link.source === 'number') {\n                    link.sourceNode = data.nodes[link.source];\n                    link.targetNode = data.nodes[link.target];\n                }\n            });\n\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            svg.append('defs').selectAll('marker')\n                .data(['extends', 'implements', 'constructor', 'use', 'trait'])\n                .enter().append('marker')\n                .attr('id', d => 'arrow-global-' + 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]);\n\n            const nsLabels = g.append('g').attr('class', 'ns-labels');\n            nsKeys.forEach((ns, nsIndex) => {\n                const nsAngle = (2 * Math.PI * nsIndex) \/ nsCount - Math.PI \/ 2;\n                const labelRadius = nsRadius + 100;\n                const labelX = centerX + labelRadius * Math.cos(nsAngle);\n                const labelY = centerY + labelRadius * Math.sin(nsAngle);\n\n                nsLabels.append('text')\n                    .attr('x', labelX)\n                    .attr('y', labelY)\n                    .attr('text-anchor', 'middle')\n                    .attr('fill', 'var(--text-muted)')\n                    .attr('font-size', '10px')\n                    .attr('font-weight', 'bold')\n                    .text(ns.split('\\\\').pop());\n            });\n\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', 1.5)\n                .attr('stroke-opacity', 0.4)\n                .attr('marker-end', d => 'url(#arrow-global-' + 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            const node = g.append('g')\n                .selectAll('g')\n                .data(data.nodes)\n                .enter().append('g')\n                .attr('class', 'graph-node')\n                .attr('data-namespace', d => d.namespace)\n                .attr('transform', d => `translate(${d.x},${d.y})`)\n                .attr('cursor', d => d.fileId ? 'pointer' : 'default')\n                .on('click', (event, d) => {\n                    if (d.fileId) {\n                        window.location.href = '\/docs\/code\/' + d.fileId;\n                    }\n                });\n\n            node.append('circle')\n                .attr('r', 8)\n                .attr('fill', d => langColors[d.extension] || langColors.php)\n                .attr('stroke', '#fff')\n                .attr('stroke-width', 1.5);\n\n            node.append('text')\n                .text(d => 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');... [TRUNCATED-67be0da752848cbc]",
        "structuredPatch": [
            {
                "oldStart": 248,
                "oldLines": 10,
                "newStart": 248,
                "newLines": 12,
                "lines": [
                    "                 .text(d => d.id);",
                    " ",
                    "             const depTypeFilter = document.getElementById('dep-type-filter');",
                    "+            const langFilter = document.getElementById('lang-filter');",
                    " ",
                    "             function applyFilters() {",
                    "                 const selectedNs = filter.value;",
                    "                 const selectedType = depTypeFilter.value;",
                    "+                const selectedLang = langFilter.value;",
                    " ",
                    "                 const connectedNodes = new Set();",
                    "                 if (selectedType) {"
                ]
            },
            {
                "oldStart": 268,
                "oldLines": 10,
                "newStart": 270,
                "newLines": 14,
                "lines": [
                    "                         const typeMatch = !selectedType || d.type === selectedType;",
                    "                         const srcNs = data.nodes[d.source].namespace;",
                    "                         const tgtNs = data.nodes[d.target].namespace;",
                    "+                        const srcLang = data.nodes[d.source].extension || 'php';",
                    "+                        const tgtLang = data.nodes[d.target].extension || 'php';",
                    "                         const nsMatch = !selectedNs || srcNs === selectedNs || tgtNs === selectedNs;",
                    "+                        const langMatch = !selectedLang || srcLang === selectedLang || tgtLang === selectedLang;",
                    " ",
                    "                         if (!typeMatch) return 0;",
                    "                         if (!nsMatch) return 0.05;",
                    "+                        if (!langMatch) return 0.05;",
                    "                         return 0.6;",
                    "                     });",
                    " "
                ]
            },
            {
                "oldStart": 279,
                "oldLines": 15,
                "newStart": 285,
                "newLines": 18,
                "lines": [
                    "                     .style('opacity', d => {",
                    "                         const typeMatch = !selectedType || connectedNodes.has(d.id);",
                    "                         const nsMatch = !selectedNs || d.namespace === selectedNs;",
                    "+                        const langMatch = !selectedLang || (d.extension || 'php') === selectedLang;",
                    " ",
                    "                         if (selectedType && !typeMatch) return 0.1;",
                    "                         if (selectedNs && !nsMatch) return 0.1;",
                    "+                        if (selectedLang && !langMatch) return 0.1;",
                    "                         return 1;",
                    "                     });",
                    "             }",
                    " ",
                    "             filter.addEventListener('change', applyFilters);",
                    "             depTypeFilter.addEventListener('change', applyFilters);",
                    "+            langFilter.addEventListener('change', applyFilters);",
                    " ",
                    "             const bounds = g.node().getBBox();",
                    "             const dx = bounds.width;"
                ]
            }
        ],
        "userModified": false,
        "replaceAll": false
    }
}