gapsInCoverage/instance.html at master · sch-sdgs/gapsInCoverage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="/site_media/jquery/js/jquery-1.6.1.min.js"></script>
     <style type="text/css">
  #formwrap {
   line-height: 2em;
   background: #eef;
   margin: 10px;
   padding: 10px;
   height: 500px;
  }
  body {
   font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
  }
  .center { margin-left:auto; margin-right:auto; }
  .help {cursor:help; border-bottom: 1px dotted #A9A9A9}
 </style>

    <script>
        $(function() {

            $.fn.serializeObject = function() {
                 var o = {};
                 var a = this.serializeArray();
                 $.each( a, function() {
                   if( o[this.name] != null ) {
                     if( !o[this.name].push ) {
                       o[this.name] = [o[this.name]];
                     }
                     o[this.name].push(this.value || '');
                   } else {
                     o[this.name] = this.value || '';
                   }
                  });
                  return o;
            };

            function populateLibType(selectorID) {
                $('#'+selectorID).empty();
                var runtypeUrl = '/rundb/api/v1/content/?format=json';
                var files=[];
                $.get( runtypeUrl, function(data) {
                    $.each( data.objects, function(intIndex, result){
                        //var bedfile = result.name;
                        //var type = result.upload_type;
                        var file_path = result.file;
                        var bedfile = file_path.split('/')[8];
                        if (files.indexOf(bedfile) <0) {
                            if (selectorID == "exonicregions") {
                                if (file_path.includes("exonic") && file_path.includes("detail")) {
                                    $('#' + selectorID).append("<option value='" + file_path + "'>" + bedfile + "</option>");
                                    files.push(bedfile);
                                }
                            }
                            if (selectorID == "targetregions") {
                                if (!bedfile.includes("exonic") && file_path.includes("detail")) {
                                    $('#' + selectorID).append("<option value='" + file_path + "'>" + bedfile + "</option>");
                                    files.push(bedfile);
                                }

                            }
                        }
                    });
                });
            }


            // populate Library Type selector
            populateLibType("targetregions");
            populateLibType("exonicregions");

            $("#postbutton").show();
            $('#postbutton').click(function() {

                obj = $('#gapsInCoverage').serializeObject();
                console.log(obj)

                pluginAPIJSON = { "plugin" : [TB_plugin.fields.name], "pluginconfig" : obj };
                pluginAPIJSON = JSON.stringify(pluginAPIJSON);
                pluginURL = "/rundb/api/v1/results/" + TB_result + "/plugin/";
                $.ajax({
                    type: 'POST',
                    url: pluginURL,
                    async: false,
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        $("#json_result").html('<div style="text-align: center;"><p>Choo Choo! All aboard the plugin train!</p></div>');
                        setTimeout("parent.$.fn.colorbox.close()",1000);
                    },
                    data: pluginAPIJSON,
                    dataType: "json"
                });
            });
        });
    </script>
</head>

<body>
    <form id="gapsInCoverage" name="gapsInCoverage">
        <div style="text-align:center">
           <h1>Gaps in Coverage Plugin</h1>
        </div>
        <table class="center" cellpadding="5px">
            <tr id="targetselect">
             <td><span class="help"
               title="Select the target regions (ROI) matching your reference and enriched fragment library">
               Targeted Regions:</span></td>
             <td><select id="targetregions" name="targetregions"><option value="">None</option></select></td> </tr>
            <tr id="exonselect">
             <td><span class="help"
               title="Select a BED file containing the exonic co-ordinates within target regions">
               Exonic Regions:</span></td>
             <td><select id="exonicregions" name="exonicregions"></select></td> </tr>
            <tr id="introncov">
             <td><span class="help"
               title="Specify the minimum number of reads for which a base in an intron is considered sufficiently covered. Bases with coverage below this value will be considered 'gaps'">
               Min. Intron Coverage:</span></td>
             <td><input type="text" size=6 id="minintroncov" name="minintroncov" value=30></select></td> </tr>
            <tr id="exoncov">
             <td><span class="help"
               title="Specify the minimum number of reads in exon regions for which a base is considered sufficiently covered. Bases with coverage below this value will be considered 'gaps'">
               Min. Exon Coverage:</span></td>
             <td><input type="text" size=6 id="minexoncov" name="minexoncov" value=50></select></td> </tr>
        </table>

        <br/>
        <div align="center" id="json_result">
         <input id="postbutton" type="submit" value="Submit" >
        </div>
        <br/>

        <div align="left">
            <h3>Description and Usage Notes</h3>
            <p>
                This plugin generates a list of amplicon bases with coverage below the specified threshold.</p>
            <p>
                Exonic and intronic regions can have different coverage thresholds if an exonic BED file is provided.
            </p>
           </div>
    </form>
</body>
</html>