<commit_before>{% extends "main.html" %}

{% block add_includes %}
    <link rel="stylesheet" href="{{ static_url("js/fancybox/source/jquery.fancybox.css") }}" type="text/css" media="screen" />
    <link rel="stylesheet" href="{{ static_url("css/jquery.dataTables.yadcf.css") }}" type="text/css" media="screen" />
    <script type="text/javascript" src="{{ static_url("js/fancybox/source/jquery.fancybox.pack.js") }}" ></script>

    <!-- AmCharts -->
    <script src="{{ static_url("js/d3.min.js") }}"></script>
    <script src="{{ static_url("js/amcharts/amcharts.js") }}"></script>
    <script src="{{ static_url("js/amcharts/serial.js") }}"></script>
    
    <script src="{{ static_url("js/jquery.dataTables.columnFilter.js") }}"></script>
    <script src="{{ static_url("js/fnGetAdjacentTr.js") }}"></script>
    <script src="{{ static_url("js/jquery.dataTables.yadcf.js") }}"></script>
{% end %}

{% block init_script %}
    <script type="text/javascript" class="init">
      $(document).ready(function() {
        var mz_array = [];

        var res_datasetids = [];
        var res_datasets = [];
        var res_alldatasets = [];
        var res_stats = [];
        var res_jobids = [];
        var tbl_demo;
        var current_dataset = -1;

        function set_dataset(id) {
          current_dataset = id;
          var j = 0;
          for (; j < res_datasetids.length; j++) {
            if (res_datasetids[j] == id) {
              break;
            }
          }
          $("#img-body").empty();
          if (j < res_datasetids.length) {
            $("#img-header").text("Images and statistics for dataset " + res_datasets[j]);
            $("#img-body").append('<div class="row"><div class="col-lg-8" style="text-align:right;">Average correlation with the monoisotopic (first) image:</div><div class="col-lg-4"><b><span id="span-corriso"></span></b></div></div><div class="row"><div class="col-lg-8" style="text-align:right;">Correlation with peak intensities:</div><div class="col-lg-4"><b><span id="span-corrint"></span></b></div></div><div class="row"><div class="col-lg-8" style="text-align:right;">Mean entropy:</div><div class="col-lg-4"><b><span id="span-meanent"></span></b></div></div><table id="tbl-images" width="100%"></table>');
            $("#span-corriso").text(res_stats[j]["corr_images"].toFixed(4));
            $("#span-corrint").text(res_stats[j]["corr_int"].toFixed(4));
            $("#span-meanent").text(res_stats[j]["mean_ent"].toFixed(4));
            $("#tbl-images").empty();
            $("#tbl-images").append('<tr id="tr-images"></tr>');
            for (var k=0; k < res_stats[j]["entropies"].length; k++) {
              $("#tr-images").append('<td><img width="100%" src="/mzimage/' + res_jobids[j] + 'p' + k + '.png"/></td>');
            }
            $("#tbl-images").append('<tr id="tr-imageent"></tr>');
            for (var k=0; k < res_stats[j]["entropies"].length; k++) {
              $("#tr-imageent").append('<td style="text-align:center;">Entropy: <b>' + res_stats[j]["entropies"][k].toFixed(3) + '</b></td>');
            }
          } else {
            $("#img-header").text("Run m/z extraction for dataset " + res_alldatasets[id]);
            $("#img-body").append('<div class="row"><div class="col-md-8">When you press this button, a Spark job will be initiated at the server side. It will appear in the list (updated every 5 seconds). When it finishes, <b>reload the page</b> to view the m/z image.</div><div class="col-md-4"><div class="pull-right"><button id="btn-runmz" class="btn btn-large btn-primary" type="button">Run m/z extraction for dataset ' + res_alldatasets[id] + '</button></div></div></div>');
            $('#btn-runmz').click(function() {
              $('#btn-runmz').addClass("disabled");
              // alert(mz_array_forspark.toString());
              $.post("/run/extractmzs", {
                "data" : mz_array_forspark.toString(),
                "formula_id" : subst_id,
                "dataset_id" : current_dataset
              });
            });
          }
        }

        $(".fancybox").fancybox();

        function select_row(row_object) {
            $(row_object).addClass('selected');
            var d = tbl_demo.row(row_object).data();
            var dataset_id = d[10];
            var subst_id = d[4];
            var entropies = d[9];
            // console.log( d );

            $.getJSON("/ajax/demosubst/" + d[8].toString() + "/" + subst_id + "/" + d[3] + "/" + dataset_id + "/", function (data) {
              var num_peaks = data["data"].length;
              var w_percent = 100 / num_peaks;
              mz_array = [];
              console.log(data["coords"]);
              for (var i=0; i < data["spec"]["isodist_mzs"].length; i++) {
                var cur = { "mz" : data["spec"]["isodist_mzs"][i].toFixed(3),
                            "int" : data["spec"]["isodist_int"][i].toFixed(3) };
                mz_array.push(cur);
              }
              // console.log(mz_array);
              $("#molecular_chart").attr("style", "width: 100%; height: 300px;");
              var chart = sin_amchart_spectrum("molecular_chart", mz_array, '{{ static_url("js/amcharts/images/") }}');

              // var colors = ["violet", "indigo", "blue", "green", "yellow", "orange", "red"];
              var colors = ["white", "red"];

              var col_w = num_peaks > 12 ? 1 : Math.floor(12 / num_peaks);
              var pixel_size = 4;
              $("#imagediv").empty();<commit_msg>minor<commit_after>{% extends "main.html" %}

{% block add_includes %}
    <link rel="stylesheet" href="{{ static_url("js/fancybox/source/jquery.fancybox.css") }}" type="text/css" media="screen" />
    <link rel="stylesheet" href="{{ static_url("css/jquery.dataTables.yadcf.css") }}" type="text/css" media="screen" />
    <script type="text/javascript" src="{{ static_url("js/fancybox/source/jquery.fancybox.pack.js") }}" ></script>

    <!-- AmCharts -->
    <script src="{{ static_url("js/d3.min.js") }}"></script>
    <script src="{{ static_url("js/amcharts/amcharts.js") }}"></script>
    <script src="{{ static_url("js/amcharts/serial.js") }}"></script>
    
    <script src="{{ static_url("js/jquery.dataTables.columnFilter.js") }}"></script>
    <script src="{{ static_url("js/fnGetAdjacentTr.js") }}"></script>
    <script src="{{ static_url("js/jquery.dataTables.yadcf.js") }}"></script>
{% end %}

{% block init_script %}
    <script type="text/javascript" class="init">
      $(document).ready(function() {
        var mz_array = [];

        var res_datasetids = [];
        var res_datasets = [];
        var res_alldatasets = [];
        var res_stats = [];
        var res_jobids = [];
        var tbl_demo;
        var current_dataset = -1;

        function set_dataset(id) {
          current_dataset = id;
          var j = 0;
          for (; j < res_datasetids.length; j++) {
            if (res_datasetids[j] == id) {
              break;
            }
          }
          $("#img-body").empty();
          if (j < res_datasetids.length) {
            $("#img-header").text("Images and statistics for dataset " + res_datasets[j]);
            $("#img-body").append('<div class="row"><div class="col-lg-8" style="text-align:right;">Average correlation with the monoisotopic (first) image:</div><div class="col-lg-4"><b><span id="span-corriso"></span></b></div></div><div class="row"><div class="col-lg-8" style="text-align:right;">Correlation with peak intensities:</div><div class="col-lg-4"><b><span id="span-corrint"></span></b></div></div><div class="row"><div class="col-lg-8" style="text-align:right;">Mean entropy:</div><div class="col-lg-4"><b><span id="span-meanent"></span></b></div></div><table id="tbl-images" width="100%"></table>');
            $("#span-corriso").text(res_stats[j]["corr_images"].toFixed(4));
            $("#span-corrint").text(res_stats[j]["corr_int"].toFixed(4));
            $("#span-meanent").text(res_stats[j]["mean_ent"].toFixed(4));
            $("#tbl-images").empty();
            $("#tbl-images").append('<tr id="tr-images"></tr>');
            for (var k=0; k < res_stats[j]["entropies"].length; k++) {
              $("#tr-images").append('<td><img width="100%" src="/mzimage/' + res_jobids[j] + 'p' + k + '.png"/></td>');
            }
            $("#tbl-images").append('<tr id="tr-imageent"></tr>');
            for (var k=0; k < res_stats[j]["entropies"].length; k++) {
              $("#tr-imageent").append('<td style="text-align:center;">Entropy: <b>' + res_stats[j]["entropies"][k].toFixed(3) + '</b></td>');
            }
          } else {
            $("#img-header").text("Run m/z extraction for dataset " + res_alldatasets[id]);
            $("#img-body").append('<div class="row"><div class="col-md-8">When you press this button, a Spark job will be initiated at the server side. It will appear in the list (updated every 5 seconds). When it finishes, <b>reload the page</b> to view the m/z image.</div><div class="col-md-4"><div class="pull-right"><button id="btn-runmz" class="btn btn-large btn-primary" type="button">Run m/z extraction for dataset ' + res_alldatasets[id] + '</button></div></div></div>');
            $('#btn-runmz').click(function() {
              $('#btn-runmz').addClass("disabled");
              // alert(mz_array_forspark.toString());
              $.post("/run/extractmzs", {
                "data" : mz_array_forspark.toString(),
                "formula_id" : subst_id,
                "dataset_id" : current_dataset
              });
            });
          }
        }

        $(".fancybox").fancybox();

        function select_row(row_object) {
            $(row_object).addClass('selected');
            var d = tbl_demo.row(row_object).data();
            var dataset_id = d[10];
            var subst_id = d[4];
            var entropies = d[9];
            // console.log( d );

            $("#imagediv").empty();
            $("#imagediv").html("<h4 style='text-align:center'>...loading images...</h4>");

            $.getJSON("/ajax/demosubst/" + d[8].toString() + "/" + subst_id + "/" + d[3] + "/" + dataset_id + "/", function (data) {
              var num_peaks = data["data"].length;
              var w_percent = 100 / num_peaks;
              mz_array = [];
              console.log(data["coords"]);
              for (var i=0; i < data["spec"]["isodist_mzs"].length; i++) {
                var cur = { "mz" : data["spec"]["isodist_mzs"][i].toFixed(3),
                            "int" : data["spec"]["isodist_int"][i].toFixed(3) };
                mz_array.push(cur);
              }
              // console.log(mz_array);
              $("#molecular_chart").attr("style", "width: 100%; height: 300px;");
              var chart = sin_amchart_spectrum("molecular_chart", mz_array, '{{ static_url("js/amcharts/images/") }}');

              // var colors = ["violet", "indigo", "blue", "green", "yellow", "orange", "red"];
              var colors = ["white", "red"];

              var col_w = num_peaks > 12 ? 1 : Math.floor(12 / num_peaks);
              var pixel_size = 4;
              $("#imagediv").empty();
{'fraction_non_alphanumeric': 0.21482872730525, 'fraction_numerical': 0.00876486897415258, 'mean_word_length': 2.522999369880277, 'pattern_counts': {'":': 0, '<': 161, '<?xml version=': 0, '>': 153, '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': '1000582', 'n_tokens_mistral': 3651, 'n_tokens_neox': 3561, 'n_words': 615}