<commit_before><html>
  <head>
    <title>Visualization of Ukkonen's Algorithm</title>
    <script src="elm.js"></script>
    <style>
      #ukkonen-visualization {
      }

      #input-string {
        width: 565px;
      }

      #input-button-wrapper button {
        background: #5775A9;
        background-image: -webkit-linear-gradient(top, #5775A9, #7a93bf);
        background-image: -moz-linear-gradient(top, #5775A9, #7a93bf);
        background-image: -ms-linear-gradient(top, #5775A9, #7a93bf);
        background-image: -o-linear-gradient(top, #5775A9, #7a93bf);
        background-image: linear-gradient(to bottom, #5775A9, #7a93bf);
        -webkit-border-radius: 4;
        -moz-border-radius: 4;
        border-radius: 4px;
        border: none;
        color: #ffffff;
        font-size: 18px;
        padding: 10px 20px 10px 20px;
        text-decoration: none;
      }

      #input-button-wrapper button:hover {
        background: #698ac2;
        background-image: -webkit-linear-gradient(top, #698ac2, #839fcf);
        background-image: -moz-linear-gradient(top, #698ac2, #839fcf);
        background-image: -ms-linear-gradient(top, #698ac2, #839fcf);
        background-image: -o-linear-gradient(top, #698ac2, #839fcf);
        background-image: linear-gradient(to bottom, #698ac2, #839fcf);
        text-decoration: none;
      }

      #input-button-wrapper {
        float: right;
      }

      #input-string input {
        float: left;
      }

      .node {
        cursor: pointer;
      }

      .node circle {
        fill: #fff;
        stroke: steelblue;
        stroke-width: 3px;
      }

      .node text {
        font: 12px sans-serif;
      }

      .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 2px;
      }
    </style>
  </head>

  <body>
    <div id="tree-graph"></div>
    <div id="ukkonen-visualization"></div>
  </body>

  <script src="lib/d3.v3.min.js"></script>

  <script type="text/javascript">
    // Show the stamp module in the "elm-stamps" div.
    var div = document.getElementById('ukkonen-visualization');
    var ukkonenVisualization = Elm.embed(Elm.UkkonenVisualization, div);
    var treeGraph = document.getElementById('tree-graph');

    ukkonenVisualization.ports.tree.subscribe(function(x) {
      function formatD3Tree(tree, parent) {
        return {
          name: tree.id,
          parent: parent,
          children: Object.keys(tree.children).map(function(k) {
            return formatD3Tree(tree.children[k].pointingTo, tree.id);
          })
        };
      }

      var treeData = [formatD3Tree(x, null)];

      console.log(">>> " + x);
      console.log(">>> " + treeData);

      var margin = {top: 20, right: 120, bottom: 20, left: 120};
      var width = 960 - margin.right - margin.left;
      var height = 500 - margin.top - margin.bottom;

      var i = 0;
      var duration = 750;

      var tree = d3.layout.tree().size([height, width]);

      var diagonal = d3.svg.diagonal().projection(function(d) {
        return [d.y, d.x];
      });

      var svg = d3.select("body").append("svg")
        .attr("width", width + margin.right + margin.left)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var root = treeData[0];
      root.x0 = height / 2;
      root.y0 = 0;

      update(root);

      d3.select(self.frameElement).style("height", "500px");

      function update(source) {

        // Compute the new tree layout.
        var nodes = tree.nodes(root).reverse(),
          links = tree.links(nodes);<commit_msg>Redraw tree instead of appending new one<commit_after><html>
  <head>
    <title>Visualization of Ukkonen's Algorithm</title>
    <script src="elm.js"></script>
    <style>
      #ukkonen-visualization {
      }

      #input-string {
        width: 565px;
      }

      #input-button-wrapper button {
        background: #5775A9;
        background-image: -webkit-linear-gradient(top, #5775A9, #7a93bf);
        background-image: -moz-linear-gradient(top, #5775A9, #7a93bf);
        background-image: -ms-linear-gradient(top, #5775A9, #7a93bf);
        background-image: -o-linear-gradient(top, #5775A9, #7a93bf);
        background-image: linear-gradient(to bottom, #5775A9, #7a93bf);
        -webkit-border-radius: 4;
        -moz-border-radius: 4;
        border-radius: 4px;
        border: none;
        color: #ffffff;
        font-size: 18px;
        padding: 10px 20px 10px 20px;
        text-decoration: none;
      }

      #input-button-wrapper button:hover {
        background: #698ac2;
        background-image: -webkit-linear-gradient(top, #698ac2, #839fcf);
        background-image: -moz-linear-gradient(top, #698ac2, #839fcf);
        background-image: -ms-linear-gradient(top, #698ac2, #839fcf);
        background-image: -o-linear-gradient(top, #698ac2, #839fcf);
        background-image: linear-gradient(to bottom, #698ac2, #839fcf);
        text-decoration: none;
      }

      #input-button-wrapper {
        float: right;
      }

      #input-string input {
        float: left;
      }

      .node {
        cursor: pointer;
      }

      .node circle {
        fill: #fff;
        stroke: steelblue;
        stroke-width: 3px;
      }

      .node text {
        font: 12px sans-serif;
      }

      .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 2px;
      }
    </style>
  </head>

  <body>
    <div id="tree-graph"></div>
    <div id="ukkonen-visualization"></div>
  </body>

  <script src="lib/d3.v3.min.js"></script>

  <script type="text/javascript">
    // Show the stamp module in the "elm-stamps" div.
    var div = document.getElementById('ukkonen-visualization');
    var ukkonenVisualization = Elm.embed(Elm.UkkonenVisualization, div);
    var treeGraph = document.getElementById('tree-graph');

    function formatD3Tree(tree, parent) {
      return {
        name: tree.id,
        parent: parent,
        children: Object.keys(tree.children).map(function(k) {
          return formatD3Tree(tree.children[k].pointingTo, tree.id);
        })
      };
    }


    var margin = {top: 20, right: 120, bottom: 20, left: 120};
    var width = 960 - margin.right - margin.left;
    var height = 500 - margin.top - margin.bottom;

    var i = 0;
    var duration = 750;

    var tree = d3.layout.tree().size([height, width]);

    var diagonal = d3.svg.diagonal().projection(function(d) {
      return [d.y, d.x];
    });

    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    ukkonenVisualization.ports.tree.subscribe(function(x) {
      var treeData = [formatD3Tree(x, null)];

      var root = treeData[0];
      root.x0 = height / 2;
      root.y0 = 0;

      update(root);

      d3.select(self.frameElement).style("height", "500px");

      function update(source) {

        // Compute the new tree layout.
        var nodes = tree.nodes(root).reverse(),
          links = tree.links(nodes);
{'fraction_non_alphanumeric': 0.14870093974571585, 'fraction_numerical': 0.03897180762852405, 'mean_word_length': 2.206468763845813, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 45, 'https://': 0, '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': '6043359', 'n_tokens_mistral': 2612, 'n_tokens_neox': 2353, 'n_words': 483}