Pmine/mine.html at master · SageCode98/Pmine · 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
<!DOCTYPE html>
<HTML LANG="en">
  <HEAD>
    <META CHARSET="utf-8">
    <META NAME="viewport" CONTENT="width=device-width, initial-scale=1">
    <TITLE>Pmine Clinvar datamining & visualization</TITLE><!--[if IE]>
                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <STYLE>
    .ui-autocomplete-loading {
    background: white url("search_GeneSymbol.cgi") right center no-repeat;
    }
    </STYLE>
    <script TYPE="text/javascript" src="jquery-1.12.4.js"></script>
    <SCRIPT TYPE="text/javascript" SRC="jquery-ui.js">
    </SCRIPT>
    <script type="text/javascript" src="loader.js"></script>
    <SCRIPT TYPE="text/javascript" SRC="js/search.js">
    </SCRIPT>

    <LINK REL="stylesheet" TYPE="text/css" HREF=
    "css/search_product.css">
    <SCRIPT TYPE="text/javascript">
         $(document).ready(function() {
                  function log( message ) {
      $( "<div/>" ).text( message ).prependTo( "#log" );
      $( "#log" ).attr( "scrollTop", 0 );
    }
           $("#search_term").keyup(function()  {
            var query = $("#search_term").val();
            var queryType = $("#search_type option:selected").val();
           if (query.length >= 2) {
               $.ajax(
                 {
                   url: 'autocomplete_Gene.cgi',
                   method:'POST',
                   coententType:'application/json',
                   data:{
                     search_term: query,
                     search_type: queryType,
                   },
                   success: function(data){
                           var temp_data=["abc","bcd","xyz"]
                           var g_data=data.matches
                           var GeneSymbol_data = $( "GeneSymbol", data ).map(function() {
                           return {
                                value: $( "name", this ).text() +  ", " +$( "Chromosome", this ).text() +  ", " + $( "Start", this ).text() +  ", " + $( "Stop", this ).text() +  ", " + $( "ClinicalSignificance", this ).text() +  ", " + $( "PhenotypeList", this ).text() +  ", " +
 ($.trim( $( "RCVaccession", this ).text() ) || "(unknown name)" ),
            id: $( "GeneSymbol", this ).text()
          };
        }).get();
        $( "#search_term" ).autocomplete({
          source: g_data,
          minLength: 0,
          select: function( event, ui ) {
            log( ui.item ?
              "Selected: " + ui.item.value + ", GeneSymbol: " + ui.item.id :
              "Nothing selected, input was " + this.value );
              }
              });
                   },
                   datatype: 'text'
                }
           );
         }
       });
       });
    </SCRIPT>
</head>
<body>

  </HEAD>
  <BODY ID="main">
   <select id="search_type">
  <option value="genetype">GeneType</option>
  <option value="start">Start</option>
  <option value="end">End</option>
   </select>
    <H1>
      Pmine Clinvar Search
    </H1>
    <FORM NAME="gene_search" ID="gene_search" ACTION="">
      <INPUT NAME="search_term" ID="search_term" class="ui-autocomplete_input" TYPE="search"
      VALUE="" AUTOFOCUS="autofocus" autocomplete="off" PLACEHOLDER=
      "Enter a search term"> <INPUT NAME="submit" TYPE="submit" ID=
      "submit" VALUE="submit">
    </FORM>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>

     <SECTION ID='results'>
      <P>
        <SPAN ID='match_count'>0</SPAN> match(es) found.
      </P>
      <TABLE>
        <THEAD>
          <TR>
            <TD>
              GeneSymbol
            </TD>
              <TD>
              Chromosome
            </TD>
               <TD>
              Start
            </TD>
               <TD>
              Stop
            </TD>
               <TD>
              ClinicalSignificance
            </TD>
               <TD>
              PhenotypeList
            </TD>
            <TD>
              RCVaccession
            </TD>
          </TR>
        </THEAD>
        <TBODY>
          <!-- this will be filled in by javascript when there are results -->
        </TBODY>
      </TABLE>
    </SECTION>
  </BODY>
</HTML>