<commit_before><!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Angular Dependency Analysis</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
        <script src="http://cpettitt.github.io/project/graphlib-dot/latest/graphlib-dot.js"></script>
        <style>
            body {
                width: 6000px;
                height: 4000px;
                font-weight: 300;
                font-family: Arial, sans-serif;
            }

            svg {
                overflow: hidden;
                margin: 0 auto;
            }

            text {
                font-size: 14px;
            }

            h1 {
                margin-top: 1em;
                margin-bottom: 1em;
            }

            .cluster, .node rect, .node ellipse, .node polygon {
                stroke: #999;
                fill: #fff;
                stroke-width: 1px;
            }

            .node[id] {
                cursor: pointer;
            }

            .edgePath path {
                stroke: #333;
                stroke-width: 1px;
                fill: none;
            }
        </style>
    </head>
    <body>
        <h1 class="text-center">Angular Dependencies Graph</h1>

        <svg id="ngda" width="6000" height="4000"></svg>

        <script id="dot" language="text/dot">
            {{= it.dot}}
        </script>

        <script>
            var data = {{= JSON.stringify(it.report.getData())}},
                dataById = {{= JSON.stringify(it.report.getDataById())}},
                dot = document.getElementById('dot').innerHTML, g = graphlibDot.read(dot),
                svg = renderGraph('#ngda', g);

            svg.select('g').selectAll('g.cluster rect').style('fill', getClusterFillColor);
            svg.select('g').selectAll('g.node').on('click', openFile);
            svg.select('g').selectAll('g.node rect, g.node ellipse, g.node polygon').style('fill', getNodeFillColor);
            svg.select('g').selectAll('g.edgePath path, g.node rect').style('display', isVisible);

            function renderGraph(svgSelector, g) {
                var render = new dagreD3.render(), svg = d3.select(svgSelector), svgGroup = svg.append('g');

                render(d3.select(svgSelector + ' g'), g);

                var xCenterOffset = (svg.attr('width') - g.graph().width) / 2;

                svgGroup.attr('transform', 'translate(' + xCenterOffset + ', 20)');
                svg.attr('height', g.graph().height + 40);

                return svg;
            }

            function openFile(id) {
                var fileName = (dataById[id] || {}).fileName;

                if (fileName) {
                    window.open(replaceFileNamePlaceholder(id));
                }

                function replaceFileNamePlaceholder(id) {
                    return '{{= it.report.getUrlTemplate() || "" }}'.replace('${fileName}', id);
                }
            }

            function getNodeFillColor(id) {
                var typeColors = {
                            'module': 'palegoldenrod',
                            'directive': 'mistyrose'
                        };<commit_msg>remove redundant style, fix link to source file and cursor pointer style<commit_after><!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Angular Dependency Analysis</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
        <script src="http://cpettitt.github.io/project/graphlib-dot/latest/graphlib-dot.js"></script>
        <style>
            body {
                width: 6000px;
                height: 4000px;
                font-weight: 300;
                font-family: Arial, sans-serif;
            }

            svg {
                overflow: hidden;
                margin: 0 auto;
            }

            text {
                font-size: 14px;
            }

            h1 {
                margin-top: 1em;
                margin-bottom: 1em;
            }

            .cluster, .node rect, .node ellipse, .node polygon {
                stroke: #999;
                fill: #fff;
                stroke-width: 1px;
            }

            .edgePath path {
                stroke: #333;
                stroke-width: 1px;
                fill: none;
            }
        </style>
    </head>
    <body>
        <h1 class="text-center">Angular Dependencies Graph</h1>

        <svg id="ngda" width="6000" height="4000"></svg>

        <script id="dot" language="text/dot">
            {{= it.dot}}
        </script>

        <script>
            var data = {{= JSON.stringify(it.report.getData())}},
                dataById = {{= JSON.stringify(it.report.getDataById())}},
                dot = document.getElementById('dot').innerHTML, g = graphlibDot.read(dot),
                svg = renderGraph('#ngda', g);

            svg.select('g').selectAll('g.cluster rect').style('fill', getClusterFillColor);
            svg.select('g').selectAll('g.node').on('click', openFile).style('cursor', 'pointer');
            svg.select('g').selectAll('g.node rect, g.node ellipse, g.node polygon').style('fill', getNodeFillColor);
            svg.select('g').selectAll('g.edgePath path, g.node rect').style('display', isVisible);

            function renderGraph(svgSelector, g) {
                var render = new dagreD3.render(), svg = d3.select(svgSelector), svgGroup = svg.append('g');

                render(d3.select(svgSelector + ' g'), g);

                var xCenterOffset = (svg.attr('width') - g.graph().width) / 2;

                svgGroup.attr('transform', 'translate(' + xCenterOffset + ', 20)');
                svg.attr('height', g.graph().height + 40);

                return svg;
            }

            function openFile(id) {
                var fileName = (dataById[id] || {}).fileName;

                if (fileName) {
                    window.open(replaceFileNamePlaceholder(id));
                }

                function replaceFileNamePlaceholder(id) {
                    return '{{= it.report.getUrlTemplate() || "" }}'.replace('${fileName}', (dataById[id] || {}).fileName);
                }
            }

            function getNodeFillColor(id) {
                var typeColors = {
                            'module': 'palegoldenrod',
                            'directive': 'mistyrose'
                        };
{'fraction_non_alphanumeric': 0.14791696908114385, 'fraction_numerical': 0.01567716649731456, 'mean_word_length': 1.512764405543399, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 51, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '129755', 'n_tokens_mistral': 2096, 'n_tokens_neox': 1896, 'n_words': 340}