web-app/index.html at master · gesel-inc/web-app · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Search for gene sets with gesel"
    />
    <title>Gesel gene set search</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <script type="module" src="./index.js"></script>
    <h1>Bioconductor gene set search</h1>

    <div id="species-input">
      <label for="species-select">Choose species:</label>
      <select name="species" id="species-select" onchange="window.setSpecies(this.value);">
        <option value="9606">Human</option>
        <option value="10090">Mouse</option>
        <option value="7227">Fly</option>
        <option value="10116">Rat</option>
        <option value="6239">Worm</option>
        <option value="7955">Zebrafish</option>
        <option value="9598">Chimp</option>
      </select>
    </div>

    <div class="row">
      <div class="column">
        <div class="option-box">
          <label for="filter-genes">Search on genes of interest:</label>
          <div class="textarea-wrapper">
            <textarea id="filter-genes" class="input-textbox" placeholder="SNAP25&#10;Neurod6&#10;ATOH1&#10;ENSG00000142208"></textarea>
          </div>
          <div class="option-description">
            <p style="margin:0.25rem">
              <em>Filter to sets that overlap any of the specified genes.</em>
            </p>
            <ul style="margin:0.25rem">
              <li><em>Ensembl or Entrez IDs or gene symbols are supported.</em></li>
              <li><em>One gene should be provided per line, any text after <code>#</code> will be ignored.</em></li>
              <li><em>Sets will be ranked by the enrichment p-value in the output table.</em></li>
            </ul>
            <p style="margin:0.25rem">
              <em>
                Not sure if your gene identifiers are recognized by the database?
              </em>
              <button id="validate-genes" onclick="sanitizeGenes()"><em>Validate genes here!</em></button>
            </p>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="option-box">
          <label for="filter-text">Search on names/descriptions:</span>
          <div class="textarea-wrapper">
            <textarea id="filter-text" placeholder="pancrea* cancer" class="input-textbox"></textarea>
          </div>
          <div class="option-description">
            <p style="margin:0.25rem">
              <em>
                Filter to sets with names or descriptions containing all search terms.
                <code>*</code> and <code>?</code> wildcards are supported.
              </em>
            </p>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="option-box">
          <label for="collection-availability">Restrict to collections:</label>
          <form id="collection-availability">
          </form>
          <div class="option-description">
            <p style="margin:0.25rem">
              <em>
                Filter to gene sets in the specified collections.
              </em>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="search-wrapper">
      <button id="search" onclick="performSearch()">Search for gene sets</button>
    </div>

    <hr/>

    <div style="padding:12px 15px">
      <table class="result-table">
        <thead>
          <tr>
            <th class="result-header-cell" style="width: 25%">Name</th>
            <th class="result-header-cell" style="width: 35%">Description</th>
            <th class="result-header-cell" style="width: 25%">Collection</th>
            <th class="result-header-cell" style="width: 5%">Size</th>
            <th class="result-header-cell" style="width: 5%">Overlap</th>
            <th class="result-header-cell" style="width: 5%"><em>p</em>-value</th>
          </tr>
        </thead>
        <tbody id="tabbody">
        </tbody>
      </table>
    </div>

    <div id="summary" class="footer"></div>
    <div id="pages" class="footer" style="padding:0.5rem"></div>
  </body>
</html>