<commit_before><html>
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>


<div onload="render()">
  <div id="html-content-holder">
    <div class="text-center graph" id="sankey_multiple" style="height: 600px; background-color:white;"></div>
  </div>
</div>

<div class="row">
  <div class="text-left col-md-3">
    <b>Plants</b>
  </div>
  <div class="text-center col-md-3">
    <b>Compounds</b>
  </div>
  <div class="text-center col-md-3">
    <b>Proteins</b>
  </div>
  <div class="col-md-3 text-right">
    <b>Diseases</b>
  </div>
</div>

<br />
<a id="btn-convert" class="btn btn-primary col-md-4 col-md-offset-4 text-center">Download graph as .png (double-click)</a>

<br />

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/h2c/html2canvas.js"></script>
<script type="text/javascript" src="assets/js/filesaver.js"></script>
<script type="text/javascript" src="assets/js/jszip.min.js"></script>
<script>

    var element = $("#html-content-holder"); // global variable
    var getCanvas; // global variable

      $("#btn-convert").on('click', function () {
        html2canvas(element, {
        onrendered: function (canvas) {
               $("#previewImage").append(canvas);
               getCanvas = canvas;
            }
        });

        var imgageData = getCanvas.toDataURL("image/png");

        // var currentdate = new Date();
        // var pngName = "ijah_multipartite_graph_"
        // var pngName = pngName.concat(currentdate.toString());
        // var pngName2 = pngName.concat(".png");
        // console.log(pngName2);

        var pngFname = "ijah_multipartite_graph.png"
        console.log(pngFname)

        var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
        $("#btn-convert").attr("download", pngFname).attr("href", newData);

    });
    // var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(localStorage.getItem("jsonPlaComp"));
    // //var dataStr2 = "data:text/json;charset=utf-8," + encodeURIComponent(localStorage.getItem('jsonCompProt'));
    // //var dataStr3 = "data:text/json;charset=utf-8," + encodeURIComponent(localStorage.getItem('jsonProtDis'));
    //
    // var dlAnchorElem = document.getElementById("downloadAnchorElem");
    // dlAnchorElem.setAttribute("href",     dataStr     );
    // dlAnchorElem.setAttribute("download", "plantCompound.json");
    // dlAnchorElem.click();

    // var data1 = localStorage.getItem("jsonPlaComp");
    // var data2 = localStorage.getItem("jsonCompProt");
    // var data3 = localStorage.getItem("jsonProtDis");
    // var jsonPC = new Blob([data1], {type: "application/json"});
    // var jsonCP = new Blob([data2], {type: "application/json"});
    // var jsonPD = new Blob([data3], {type: "application/json"});

</script>

<script

<script async type="text/javascript">
  var init = function() {
    // var test = JSON.stringify([
    //    [ 'Brazil', 'Portugal', 5 ],
    //    [ 'Brazil', 'France', 1 ],
    //    [ 'Brazil', 'Spain', 1 ],
    //    [ 'Brazil', 'England', 1 ],
    //    [ 'Canada', 'Portugal', 1 ],
    //    [ 'Canada', 'France', 5 ],
    //    [ 'Canada', 'England', 1 ],
    //    [ 'Mexico', 'Portugal', 1 ],
    //    [ 'Mexico', 'France', 1 ],
    //    [ 'Mexico', 'Spain', 5 ],
    //    [ 'Mexico', 'England', 1 ],
    //    [ 'USA', 'Portugal', 1 ],
    //    [ 'USA', 'France', 1 ],
    //    [ 'USA', 'Spain', 1 ],
    //    [ 'USA', 'England', 5 ],
    //    [ 'Portugal', 'Angola', 2 ],
    //    [ 'Portugal', 'Senegal', 1 ],
    //    [ 'Portugal', 'Morocco', 1 ],
    //    [ 'Portugal', 'South Africa', 3 ],
    //    [ 'France', 'Angola', 1 ],
    //    [ 'France', 'Senegal', 3 ],
    //    [ 'France', 'Mali', 3 ],
    //    [ 'France', 'Morocco', 3 ],
    //    [ 'France', 'South Africa', 1 ],
    //    [ 'Spain', 'Senegal', 1 ],
    //    [ 'Spain', 'Morocco', 3 ],
    //    [ 'Spain', 'South Africa', 1 ],
    //    [ 'England', 'Angola', 1 ],
    //    [ 'England', 'Senegal', 1 ],
    //    [ 'England', 'Morocco', 2 ],
    //    [ 'England', 'South Africa', 7 ],
    //    [ 'South Africa', 'China', 5 ],
    //    [ 'South Africa', 'India', 1 ],
    //    [ 'South Africa', 'Japan', 3 ],
    //    [ 'Angola', 'China', 5 ],
    //    [ 'Angola', 'India', 1 ],
    //    [ 'Angola', 'Japan', 3 ],
    //    [ 'Senegal', 'China', 5 ],
    //    [ 'Senegal', 'India', 1 ],
    //    [ 'Senegal', 'Japan', 3 ],
    //    [ 'Mali', 'China', 5 ],
    //    [ 'Mali', 'India', 1 ],
    //    [ 'Mali', 'Japan', 3 ],
    //   [ 'Indonesia', 'Spain', 5 ],
    //    [ 'Morocco', 'China', 5 ],
    //    [ 'Morocco', 'India', 1 ],
    //    [ 'Morocco', 'Japan', 3 ]
    // ]);
    // localStorage.setItem('data', test);

    // console.log(JSON.parse(localStorage.getItem('data')));

    google.charts.load("current", {packages:["sankey"]});
    google.charts.setOnLoadCallback(drawChart);
     function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'From');
      data.addColumn('string', 'To');
      data.addColumn('number', 'Weight');
      data.addRows(JSON.parse(localStorage.getItem('data')) );

      // Set chart options
      var options = {
        width: 1150,
        sankey: {
          node: { label: {
             color: '#34495e',
             bold: true} } },
      };

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
      chart.draw(data, options);
     }
  }
  window.onload = init;


</script>
</body>
</html><commit_msg>comment ref text<commit_after><html>
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>


<div onload="render()">
  <div id="html-content-holder">
    <div class="text-center graph" id="sankey_multiple" style="height: 600px; background-color:white;"></div>
  </div>
</div>

<div class="row">
  <div class="text-left col-md-3">
    <b>Plants</b>
  </div>
  <div class="text-center col-md-3">
    <b>Compounds</b>
  </div>
  <div class="text-center col-md-3">
    <b>Proteins</b>
  </div>
  <div class="col-md-3 text-right">
    <b>Diseases</b>
  </div>
</div>

<br />
<a id="btn-convert" class="btn btn-primary col-md-4 col-md-offset-4 text-center">Download graph as .png (double-click)</a>

<br />

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/h2c/html2canvas.js"></script>
<script type="text/javascript" src="assets/js/filesaver.js"></script>
<script type="text/javascript" src="assets/js/jszip.min.js"></script>
<script>

    var element = $("#html-content-holder"); // global variable
    var getCanvas; // global variable

      $("#btn-convert").on('click', function () {
        html2canvas(element, {
        onrendered: function (canvas) {
               $("#previewImage").append(canvas);
               getCanvas = canvas;
            }
        });

        var imgageData = getCanvas.toDataURL("image/png");

        // var currentdate = new Date();
        // var pngName = "ijah_multipartite_graph_"
        // var pngName = pngName.concat(currentdate.toString());
        // var pngName2 = pngName.concat(".png");
        // console.log(pngName2);

        var pngFname = "ijah_multipartite_graph.png"
        console.log(pngFname)

        var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
        $("#btn-convert").attr("download", pngFname).attr("href", newData);

    });
</script>

<script
<script async type="text/javascript">
  var init = function() {
    google.charts.load("current", {packages:["sankey"]});
    google.charts.setOnLoadCallback(drawChart);
     function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'From');
      data.addColumn('string', 'To');
      data.addColumn('number', 'Weight');
      data.addRows(JSON.parse(localStorage.getItem('data')) );

      // Set chart options
      var options = {
        width: 1150,
        sankey: {
          node: { label: {
             color: '#34495e',
             bold: true} } },
      };

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
      chart.draw(data, options);
     }
  }
  window.onload = init;
</script>

</body>
</html>
{'fraction_non_alphanumeric': 0.20579443550241436, 'fraction_numerical': 0.011956771671648655, 'mean_word_length': 2.615544472152951, 'pattern_counts': {'":': 0, '<': 103, '<?xml version=': 0, '>': 101, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4986608', 'n_tokens_mistral': 3074, 'n_tokens_neox': 2871, 'n_words': 554}