<commit_before><!--

    Copyright © 2017 the original authors (http://cereebro.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<!DOCTYPE html>
<html>
<head>
<title data-th-text="|Cereebro : ${system.name}|">Cereebro</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/js/jquery/jquery.min.js" data-th-src="@{/webjars/jquery/jquery.min.js}"></script>
<link rel="icon" href="/images/cereebro/favicon.ico" type="image/x-icon" />
<link href="/css/bootstrap.min.css" data-th-href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
<script data-th-src="@{/webjars/bootstrap/js/bootstrap.min.js}" src="/js/bootstrap.min.js"></script>
<script data-th-src="@{/webjars/linkurious.js/sigma.min.js}" src="/js/sigma.js/sigma.min.js"></script>
<script data-th-src="@{/webjars/linkurious.js/plugins/sigma.parsers.json.min.js}"
  src="/js/sigma.js/plugins/sigma.parsers.json.min.js"></script>
<script data-th-src="@{/webjars/linkurious.js/plugins/sigma.layouts.forceAtlas2.min.js}"
  src="/js/sigma.js/plugins/sigma.layouts.forceAtlas2.min.js"></script>
<script data-th-src="@{/webjars/linkurious.js/plugins/sigma.renderers.linkurious.min.js}"
  src="/js/sigma.js/plugins/sigma.renderers.linkurious.min.js"></script>
<script data-th-src="@{/webjars/d3js/d3.min.js}" src="/webjars/d3js/d3.min.js"></script>
<script src="/js/d3.dependencyWheel.js"></script>

<style type="text/css">
html, body {
    height: 100%;
}

.cereebro-chart-container {
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    color: #ddd;
}

#graph-container {
    width: 100%;
    height: 360px;
}

#wheel-container {
    text-align: center;
}

.dependencyWheel {
    font-size: 0.7em;
}

.chord {
    fill-opacity: .67;
}

.popover {
    max-width: 80%;
}

div.cereebro-components>div:nth-of-type(odd) {
    background: #f9f9f9;
}

.cereebro-logo {
    padding: 6px 6px;
}

.cereebro-component-block {
    padding: 12px;
}

.cereebro-navbar-static-bottom {
    position: relative;
    margin-top: -96px; /* negative value of footer height */
    height: 96px;
    clear: both;
}

.cereebro-navbar-footer {
    margin: 16px auto 16px auto;
}

.cereebro-navbar-footer p {
    color: #777;
    text-align: center;
}

.cereebro-container {
    min-height: 100%;
    padding-bottom: 120px;
}
</style>
<script type="text/javascript" data-th-inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function() {

        $(function() {
            $('[data-toggle="popover"]').popover()
        })

        ////////////////////////////////////
        // sigma.js graph
        ////////////////////////////////////

        // Add a method to the graph model that returns an
        // object with every neighbors of a node inside:
        sigma.classes.graph.addMethod('neighbors', function(nodeId) {
            var k, neighbors = {},
            //index = this.allNeighborsIndex[nodeId] || {};
            index = this.allNeighborsIndex.get(nodeId).valueList();

            for (k in index) {
                neighbors[index[k].valueList()[0].source] = index[k].valueList()[0];
                neighbors[index[k].valueList()[0].target] = index[k].valueList()[0];
                //neighbors[k] = this.nodesIndex[k];
            }
            return neighbors;
        });

        var graph = /*[[${graph}]]*/{};
        s = new sigma({
            graph : graph,
            container : 'graph-container'
        });
        // We first need to save the original colors of our
        // nodes and edges, like this:
        s.graph.nodes().forEach(function(n) {
            n.originalColor = n.color;
            n.originalSize = n.size;
        });
        s.graph.edges().forEach(function(e) {
            e.originalColor = e.color;
        });

        // When a node is clicked, we check for each node
        // if it is a neighbor of the clicked one. If not,
        // we set its color as grey, and else, it takes its
        // original color.
        // We do the same for the edges, and we only keep
        // edges that have both extremities colored.
        s.bind('clickNode', function(e) {
            var nodeId = e.data.node.id, toKeep = s.graph.neighbors(nodeId);
            toKeep[nodeId] = e.data.node;

            s.graph.nodes().forEach(function(n) {
                if (toKeep[n.id])
                    n.color = n.originalColor;
                else
                    n.color = '#eee';

                // size back to original for other nodes
                if (n.id != e.data.node.id)
                    n.size = n.originalSize;
            });

            s.graph.edges().forEach(function(e) {
                if (toKeep[e.source] && toKeep[e.target])
                    e.color = e.originalColor;
                else
                    e.color = '#eee';
            });

            // Since the data has been modified, we need to
            // call the refresh method to make the colors
            // update effective.
            s.refresh();
        });

        // When the stage is clicked, we just color each
        // node and edge with its original color.
        s.bind('clickStage', function(e) {
            s.graph.nodes().forEach(function(n) {
                n.color = n.originalColor;
                n.size = n.originalSize;
            });

            s.graph.edges().forEach(function(e) {
                e.color = e.originalColor;
            });

            // Same as in the previous event:
            s.refresh();
        });

        s.startForceAtlas2();
        // Stop forceAtlas2 after n seconds
        setTimeout(function() {
            s.stopForceAtlas2();
        }, 1000);

        ////////////////////////////////////
        // d3.js dependency wheel
        ////////////////////////////////////

        var wheel = /*[[${wheel}]]*/{};
        if (wheel.names.length > 0) {
            var wheelData = {
                packageNames : wheel.names,
                matrix : wheel.dependencyMatrix
            };

            var wheelChart = d3.chart.dependencyWheel() //
            .width(768) // also used for height, since the wheel is in a a square
            .margin(192) // used to display package names
            .padding(.04); // separating groups in the wheel

            d3.select('#wheel-container').datum(wheelData).call(wheelChart);
        }

    });
    /*]]>*/
</script>
</head>
<body>
  <div class="cereebro-container">
    <div class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <img data-th-src="@{/images/cereebro/cereebro.png}" src="/images/cereebro/cereebro.png" title="Cereebro dashboard" class="navbar-brand cereebro-logo" />
        </div>
      </div>
    </div>
    <div class="container">
      <h1 data-th-text="${system.name}">System name</h1>
      <div id="cerebro-charts">
        <ul class="nav nav-tabs">
          <li role="presentation" class="active"><a href="#graph-container" aria-controls="graph-container"
            role="tab" data-toggle="tab">Graph</a></li>
          <li role="presentation"><a href="#wheel-container" aria-controls="wheel-container" role="tab"
            data-toggle="tab" class="hidden-xs hidden-sm">Wheel</a></li>
        </ul>
        <div class="tab-content cereebro-chart-container">
          <div id="graph-container" role="tabpanel" class="tab-pane active"></div>
          <div id="wheel-container" role="tabpanel" class="tab-pane hidden-xs hidden-sm"></div>
        </div>
      </div>
      <div class="alert alert-danger alert-dismissible fade in" role="alert" data-th-if="${system.hasErrors()}">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h4>Errors were caught during system resolution :</h4>
        <ul data-th-each="error: ${system.errors}">
          <li><span data-th-text="${error.snitchUri}"></span> : <span data-th-text="${error.message}"> </span> <a
            id="error-button" tabindex="0" class="btn btn-xs btn-danger" role="button" data-toggle="popover"
            data-placement="auto" title="Stacktrace" data-th-if="${error.hasCause()}" data-html="true"
            data-trigger="click"
            data-th-attr="data-content='&lt;pre&gt;' + ${error.getCauseStackTraceString().get()} + '&lt;/pre&gt;'">Stacktrace</a>
          </li>
        </ul>
      </div>
      <h3>Components</h3>
      <table class="table table-striped table-bordered hidden-xs hidden-sm">
        <thead>
          <tr>
            <th>name</th>
            <th>type</th>
            <th>dependencies</th>
            <th>consumers</th>
          </tr>
        </thead>
        <tbody>
          <tr data-th-each="rel: ${system.componentRelationships}">
            <td data-th-text="${rel.component.name}"></td>
            <td data-th-text="${rel.component.type}"></td>
            <td>
              <ul data-th-each="dependency : ${rel.dependencies}">
                <li data-th-text="${dependency.component.asString()}"></li>
              </ul>
            </td>
            <td>
              <ul data-th-each="consumer : ${rel.consumers}">
                <li data-th-text="${consumer.component.asString()}"></li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="cereebro-components hidden-md hidden-lg">
        <div class="cereebro-component-block" data-th-each="rel: ${system.componentRelationships}">
          <h4 data-th-text="${rel.component.name}">name</h4>
          <div>
            <label>Type :&nbsp;</label><span data-th-text="${rel.component.type}">type</span><br />
          </div>
          <div>
            <label>Dependencies :&nbsp;</label>
            <ul data-th-if="${!rel.dependencies.empty}" data-th-each="dependency : ${rel.dependencies}">
              <li data-th-text="${dependency.component.asString()}"></li>
            </ul>
            <em data-th-if="${rel.dependencies.empty}">--</em>
          </div>
          <div>
            <label>Consumers :&nbsp;</label>
            <ul data-th-if="${!rel.consumers.empty}" data-th-each="consumer : ${rel.consumers}">
              <li data-th-text="${consumer.component.asString()}"></li>
            </ul>
            <em data-th-if="${rel.consumers.empty}">--</em>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div id="footer" class="navbar navbar-inverse navbar-fixed-bottom cereebro-navbar-static-bottom" role="footer">
    <div class="container">
      <div class="cereebro-navbar-footer">
        <p>
          Powered by <a href="http://cereebro.io">Cereebro.io</a><br /> Cereebro is Open Source software released under
          the <a href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache 2.0 license</a>
        </p>
      </div>
    </div>
  </div>

</body>
</html><commit_msg>Fix d3js script URL relative to the app context path<commit_after><!--

    Copyright © 2017 the original authors (http://cereebro.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<!DOCTYPE html>
<html>
<head>
<title data-th-text="|Cereebro : ${system.name}|">Cereebro</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/js/jquery/jquery.min.js" data-th-src="@{/webjars/jquery/jquery.min.js}"></script>
<link rel="icon" href="/images/cereebro/favicon.ico" type="image/x-icon" />
<link href="/css/bootstrap.min.css" data-th-href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
<script data-th-src="@{/webjars/bootstrap/js/bootstrap.min.js}" src="/js/bootstrap.min.js"></script>
<script data-th-src="@{/webjars/linkurious.js/sigma.min.js}" src="/js/sigma.js/sigma.min.js"></script>
<script data-th-src="@{/webjars/linkurious.js/plugins/sigma.parsers.json.min.js}"
  src="/js/sigma.js/plugins/sigma.parsers.json.min.js"></script>
<script data-th-src="@{/webjars/linkurious.js/plugins/sigma.layouts.forceAtlas2.min.js}"
  src="/js/sigma.js/plugins/sigma.layouts.forceAtlas2.min.js"></script>
<script data-th-src="@{/webjars/linkurious.js/plugins/sigma.renderers.linkurious.min.js}"
  src="/js/sigma.js/plugins/sigma.renderers.linkurious.min.js"></script>
<script data-th-src="@{/webjars/d3js/d3.min.js}" src="/webjars/d3js/d3.min.js"></script>

<script data-th-src="@{/js/d3.dependencyWheel.js}" src="/js/d3.dependencyWheel.js"></script>

<style type="text/css">
html, body {
    height: 100%;
}

.cereebro-chart-container {
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    color: #ddd;
}

#graph-container {
    width: 100%;
    height: 360px;
}

#wheel-container {
    text-align: center;
}

.dependencyWheel {
    font-size: 0.7em;
}

.chord {
    fill-opacity: .67;
}

.popover {
    max-width: 80%;
}

div.cereebro-components>div:nth-of-type(odd) {
    background: #f9f9f9;
}

.cereebro-logo {
    padding: 6px 6px;
}

.cereebro-component-block {
    padding: 12px;
}

.cereebro-navbar-static-bottom {
    position: relative;
    margin-top: -96px; /* negative value of footer height */
    height: 96px;
    clear: both;
}

.cereebro-navbar-footer {
    margin: 16px auto 16px auto;
}

.cereebro-navbar-footer p {
    color: #777;
    text-align: center;
}

.cereebro-container {
    min-height: 100%;
    padding-bottom: 120px;
}
</style>
<script type="text/javascript" data-th-inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function() {

        $(function() {
            $('[data-toggle="popover"]').popover()
        })

        ////////////////////////////////////
        // sigma.js graph
        ////////////////////////////////////

        // Add a method to the graph model that returns an
        // object with every neighbors of a node inside:
        sigma.classes.graph.addMethod('neighbors', function(nodeId) {
            var k, neighbors = {},
            //index = this.allNeighborsIndex[nodeId] || {};
            index = this.allNeighborsIndex.get(nodeId).valueList();

            for (k in index) {
                neighbors[index[k].valueList()[0].source] = index[k].valueList()[0];
                neighbors[index[k].valueList()[0].target] = index[k].valueList()[0];
                //neighbors[k] = this.nodesIndex[k];
            }
            return neighbors;
        });

        var graph = /*[[${graph}]]*/{};
        s = new sigma({
            graph : graph,
            container : 'graph-container'
        });
        // We first need to save the original colors of our
        // nodes and edges, like this:
        s.graph.nodes().forEach(function(n) {
            n.originalColor = n.color;
            n.originalSize = n.size;
        });
        s.graph.edges().forEach(function(e) {
            e.originalColor = e.color;
        });

        // When a node is clicked, we check for each node
        // if it is a neighbor of the clicked one. If not,
        // we set its color as grey, and else, it takes its
        // original color.
        // We do the same for the edges, and we only keep
        // edges that have both extremities colored.
        s.bind('clickNode', function(e) {
            var nodeId = e.data.node.id, toKeep = s.graph.neighbors(nodeId);
            toKeep[nodeId] = e.data.node;

            s.graph.nodes().forEach(function(n) {
                if (toKeep[n.id])
                    n.color = n.originalColor;
                else
                    n.color = '#eee';

                // size back to original for other nodes
                if (n.id != e.data.node.id)
                    n.size = n.originalSize;
            });

            s.graph.edges().forEach(function(e) {
                if (toKeep[e.source] && toKeep[e.target])
                    e.color = e.originalColor;
                else
                    e.color = '#eee';
            });

            // Since the data has been modified, we need to
            // call the refresh method to make the colors
            // update effective.
            s.refresh();
        });

        // When the stage is clicked, we just color each
        // node and edge with its original color.
        s.bind('clickStage', function(e) {
            s.graph.nodes().forEach(function(n) {
                n.color = n.originalColor;
                n.size = n.originalSize;
            });

            s.graph.edges().forEach(function(e) {
                e.color = e.originalColor;
            });

            // Same as in the previous event:
            s.refresh();
        });

        s.startForceAtlas2();
        // Stop forceAtlas2 after n seconds
        setTimeout(function() {
            s.stopForceAtlas2();
        }, 1000);

        ////////////////////////////////////
        // d3.js dependency wheel
        ////////////////////////////////////

        var wheel = /*[[${wheel}]]*/{};
        if (wheel.names.length > 0) {
            var wheelData = {
                packageNames : wheel.names,
                matrix : wheel.dependencyMatrix
            };

            var wheelChart = d3.chart.dependencyWheel() //
            .width(768) // also used for height, since the wheel is in a a square
            .margin(192) // used to display package names
            .padding(.04); // separating groups in the wheel

            d3.select('#wheel-container').datum(wheelData).call(wheelChart);
        }

    });
    /*]]>*/
</script>
</head>
<body>
  <div class="cereebro-container">
    <div class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <img data-th-src="@{/images/cereebro/cereebro.png}" src="/images/cereebro/cereebro.png" title="Cereebro dashboard" class="navbar-brand cereebro-logo" />
        </div>
      </div>
    </div>
    <div class="container">
      <h1 data-th-text="${system.name}">System name</h1>
      <div id="cerebro-charts">
        <ul class="nav nav-tabs">
          <li role="presentation" class="active"><a href="#graph-container" aria-controls="graph-container"
            role="tab" data-toggle="tab">Graph</a></li>
          <li role="presentation"><a href="#wheel-container" aria-controls="wheel-container" role="tab"
            data-toggle="tab" class="hidden-xs hidden-sm">Wheel</a></li>
        </ul>
        <div class="tab-content cereebro-chart-container">
          <div id="graph-container" role="tabpanel" class="tab-pane active"></div>
          <div id="wheel-container" role="tabpanel" class="tab-pane hidden-xs hidden-sm"></div>
        </div>
      </div>
      <div class="alert alert-danger alert-dismissible fade in" role="alert" data-th-if="${system.hasErrors()}">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h4>Errors were caught during system resolution :</h4>
        <ul data-th-each="error: ${system.errors}">
          <li><span data-th-text="${error.snitchUri}"></span> : <span data-th-text="${error.message}"> </span> <a
            id="error-button" tabindex="0" class="btn btn-xs btn-danger" role="button" data-toggle="popover"
            data-placement="auto" title="Stacktrace" data-th-if="${error.hasCause()}" data-html="true"
            data-trigger="click"
            data-th-attr="data-content='&lt;pre&gt;' + ${error.getCauseStackTraceString().get()} + '&lt;/pre&gt;'">Stacktrace</a>
          </li>
        </ul>
      </div>
      <h3>Components</h3>
      <table class="table table-striped table-bordered hidden-xs hidden-sm">
        <thead>
          <tr>
            <th>name</th>
            <th>type</th>
            <th>dependencies</th>
            <th>consumers</th>
          </tr>
        </thead>
        <tbody>
          <tr data-th-each="rel: ${system.componentRelationships}">
            <td data-th-text="${rel.component.name}"></td>
            <td data-th-text="${rel.component.type}"></td>
            <td>
              <ul data-th-each="dependency : ${rel.dependencies}">
                <li data-th-text="${dependency.component.asString()}"></li>
              </ul>
            </td>
            <td>
              <ul data-th-each="consumer : ${rel.consumers}">
                <li data-th-text="${consumer.component.asString()}"></li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="cereebro-components hidden-md hidden-lg">
        <div class="cereebro-component-block" data-th-each="rel: ${system.componentRelationships}">
          <h4 data-th-text="${rel.component.name}">name</h4>
          <div>
            <label>Type :&nbsp;</label><span data-th-text="${rel.component.type}">type</span><br />
          </div>
          <div>
            <label>Dependencies :&nbsp;</label>
            <ul data-th-if="${!rel.dependencies.empty}" data-th-each="dependency : ${rel.dependencies}">
              <li data-th-text="${dependency.component.asString()}"></li>
            </ul>
            <em data-th-if="${rel.dependencies.empty}">--</em>
          </div>
          <div>
            <label>Consumers :&nbsp;</label>
            <ul data-th-if="${!rel.consumers.empty}" data-th-each="consumer : ${rel.consumers}">
              <li data-th-text="${consumer.component.asString()}"></li>
            </ul>
            <em data-th-if="${rel.consumers.empty}">--</em>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div id="footer" class="navbar navbar-inverse navbar-fixed-bottom cereebro-navbar-static-bottom" role="footer">
    <div class="container">
      <div class="cereebro-navbar-footer">
        <p>
          Powered by <a href="http://cereebro.io">Cereebro.io</a><br /> Cereebro is Open Source software released under
          the <a href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache 2.0 license</a>
        </p>
      </div>
    </div>
  </div>

</body>
</html>
{'fraction_non_alphanumeric': 0.17290776577029404, 'fraction_numerical': 0.008209767948395744, 'mean_word_length': 1.8858938716306055, 'pattern_counts': {'":': 0, '<': 337, '<?xml version=': 0, '>': 341, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, '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': '2652930', 'n_tokens_mistral': 7629, 'n_tokens_neox': 7169, 'n_words': 1453}