index.html 16.7 KB
Newer Older
1 2 3
<!doctype html>

<!-- 
4 5 6
  This file is part of Vidjil <http://www.vidjil.org>, High-throughput Analysis of V(D)J Immune Repertoire
  Copyright (C) 2011-2017 by Bonsai bioinformatics
  at CRIStAL (UMR CNRS 9189, Université Lille) and Inria Lille
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  "Vidjil" is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  "Vidjil" is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with "Vidjil". If not, see <http://www.gnu.org/licenses/>
-->

<html>
23 24 25
    <head>
        <meta charset="utf-8">
        <title>Vidjil</title>
Marc Duez's avatar
Marc Duez committed
26

Mathieu Giraud's avatar
Mathieu Giraud committed
27 28
        <link rel="shortcut icon" href="./images/favicon-v.ico" type="image/x-icon">
        <link rel="icon" href="./images/favicon-v.ico" type="image/x-icon">
Marc Duez's avatar
Marc Duez committed
29 30
        <link rel="stylesheet" type="text/css" href="css/fonts/ubuntu/stylesheet.css" /> 
        <link rel="stylesheet" type="text/css" href="css/fonts/ubuntu-mono/stylesheet.css" /> 
31
        <link rel="stylesheet" type="text/css" href="css/icons/fontello/css/fontello.css" />
32
        <link rel="stylesheet" type="text/css" href="css/icons/fontello/css/animation.css" />
33 34
        <link id="palette" rel="stylesheet" type="text/css" href="css/light.css" />
        <link id="seg_highlight" rel="stylesheet" type="text/css" href="css/segmenter_highlight.css" />
35 36 37

        <script data-main="js/app.js" src="js/lib/require.js"></script>

38 39 40
    </head>


Marc Duez's avatar
Marc Duez committed
41
    <body>
42

43 44 45 46 47
        <div id="file_menu" >
            <span class="closeButton" onclick="cancel();">X</span>

            <h2>Vidjil <span class='logo'>(beta)</span> &ndash; V(D)J repertoire browsing and analysis</h2>

48
            Data file (.vidjil):<br/>
49
            <input id="upload_json" type="file" name="json" /></br>
50
            <p class='help'>The .vidjil file stores a set of clones on several points.</p>
51 52 53

            Analysis file (.analysis, optional):<br/>
            <input id="upload_pref" type="file" name="pref" /></br>
54
            <p class='help'>The .analysis file stores all parameters set by the user (tags, colors, manual clusters).</p>
55 56

            <button onclick="document.getElementById('file_menu').style.display='none';
Marc Duez's avatar
Marc Duez committed
57
            m.load('upload_json','upload_pref', 200)">start</button> 
58 59
        </div>

60
        <div id="axis_choice" >
61 62 63
            <span class="closeButton" onclick="cancel();">X</span>
            <h2>analysis menu</h2>

64
            Analysis file:<br/>
65 66
            <input id="upload_analysis" type="file" name="analysis" /></br></br>

67
            <button onclick="document.getElementById('axis_choice').style.display='none';
68 69
                                    m.loadAnalysis('upload_analysis');">start</button> 
        </div>
Marc Duez's avatar
Marc Duez committed
70
        
71 72 73 74 75 76 77
        <div id="upload_summary" style="" class="menu" onmouseover="showSelector('upload_summary_selector');" onmouseout="hideSelector();">
            <span id="upload_summary_label">upload</span>
            <div id="upload_summary_selector" class="selector"><div>

            </div></div>
        </div>

78
        <!-- TOP-CONTAINER -->
79
        <div id="top-container" onmouseout="hideSelector()">
80 81 82 83 84 85 86 87
            <div id="menu-container">
                <div class="menu" id="top_info">
                    <!--Div is filled programmatically -->
                </div>
                <div class="menu" id="db_menu" onmouseover="showSelector('dbSelector');" style="display : none">patients
                    <div id="dbSelector" class="selector"><div>
                        <div class="menu_box">
                            <a class="buttonSelector" onclick="javascript:db.call('patient/index')">open patient list</a>
88
                        </div>
89 90 91 92 93 94
                        <div class="menu_box">
                            <div id="last_loaded_file">
                            </div>
                        </div>
                    </div></div>
                </div>
95

96 97 98 99 100
                <div class="menu" id="static_file_menu" onmouseover="showSelector('fileSelector');" style="display : none">file
                  <div id="fileSelector" class="selector"><div>
                        <div class="menu_box">
                            <div id="upload_list">
                            </div>
101
                        </div>
102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
                  </div></div>
                </div>
 
                <div class="menu" id="demo_file_menu" onmouseover="showSelector('demoSelector');">import/export
                    <div id="demoSelector" class="selector"><div>
                        <div class="menu_box">
                            <a id="import_data_anchor" id="import_data" class="buttonSelector" onclick="javascript:loadData()">import data (.vidjil)</a>
                            <a id="import_data_analysis" id="import_analysis" class="buttonSelector" onclick="javascript:loadAnalysis()">import analysis</a>
                        </div>
                        <!--<a class="buttonSelector" onclick="javascript:m.resetAnalysis()">reset analysis</a> -->
                        <!--<a class="buttonSelector" onclick="javascript:reset()">reset all</a> -->
                        <div class="menu_box">
                          <a class="buttonSelector" id="export_sample_report" onclick="javascript:report.reportHTMLdiag()">export report (sample)</a>
                          <a class="buttonSelector" id="export_monitor_report" onclick="javascript:report.reportHTML()">export report (monitor)</a>
                        </div>
                        <div class="menu_box">
                            <a class="buttonSelector" id="export_analysis" onclick="javascript:m.saveAnalysis()">export analysis</a>
119 120
                            <a class="buttonSelector" id="export_svg1" onclick="javascript:graph.resize(1400,800);m.exportSVG('visu2_svg')">export SVG graph</a>
                            <a class="buttonSelector" id="export_svg2" onclick="javascript:sp.resize(1400,800);sp.fastForward();m.exportSVG('visu_svg')">export SVG plot</a>
121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164
                            <a class="buttonSelector" id="export_csv" onclick="javascript:m.exportCSV()">export csv (visible clones)</a>
                            <a class="buttonSelector" id="export_fasta" onclick="javascript:m.exportFasta()">export fasta (selected clones)</a>
                        </div>
                    </div></div>
                </div>

                <div class="menu" id="cluster_menu" onmouseover="showSelector('clusterSelector');" > cluster
                    <div id="clusterSelector" class="selector"><div>
                        <a class="buttonSelector" onclick="m.restoreClusters();">clones merged by user</a>
                        <a class="buttonSelector" onclick="m.resetClusters();">reset all user clones</a>
                        <a class="buttonSelector" onclick="m.clusterBy(function(id){return m.clone(id).getGene(5)});">cluster by V/5' </a>
                        <a class="buttonSelector" onclick="m.clusterBy(function(id){return m.clone(id).getGene(3)});">cluster by J/3' </a>
                        <a class="buttonSelector" onclick="m.clusterBy(function(id){return m.clone(id).germline});">cluster by locus </a>
                        <a class="buttonSelector devel-mode" onclick="m.similarity_builder.DBscan(95,0.001);">cluster by DBscan (experimental) </a>
                        <a class="buttonSelector" onclick="m.similarity_builder.cluster_me(95,0.1);">cluster by similarity </a>
                        <div id="clusterby_button"> </div>
                    </div></div>
                </div>

                <div class="menu" id="color_menu" onmouseover="showSelector('colorSelector');" > color by
                    <div class="div-menu-selector"><select class="menu-selector" onchange="m.changeColorMethod(this.value)">
                        <option value="Tag">tag</option>
                        <option value="V">V/5'</option>
                        <option value="J">J/3'</option>
                        <option value="N">N</option>
                        <option value="system" id="color_system_button">locus/germline</option>
                        <option value="abundance">abundance</option>
                        <option value="productive">productivity</option>
                    </select></div>
                </div>

                <div class="menu" id="filter_menu" onmouseenter="builder.build_displaySelector();" onmouseover="showSelector('filterSelector');" > filter
                    <div id="filterSelector" class="selector"><div>
                        <div class="menu_box">
                            <span id="top_label"></span></br>
                            <input id="top_slider" type="range" min="5" max="100" step="5" value="10" onchange="m.displayTop(this.value)" />
                        </div>
                        <div class="menu_box">
                            tag visibility</br>
                            <ul id="tagList">
                            </ul>
                        </div>
                    </div></div>
                </div>
165

166 167 168 169 170 171 172
                <div class="menu" id="settings_menu" onmouseenter="builder.build_settings();" onmouseover=" showSelector('settingsSelector');" > settings
                    <div id="settingsSelector" class="selector"><div>
                        <div class="menu_box">
                            normalization</br>
                            <form name="normalize_list" id="normalize_list">
                            </form>
                        </div>
173

174 175 176 177
                        <div class="menu_box">
                            normalization method</br>
                            <div class="buttonSelector" onclick="m.changeNormMethod('constant')" ><input type="radio" name="normalize_method" value="constant" checked >constant</input></div>
                            <div class="buttonSelector" onclick="m.changeNormMethod('to-100')" ><input type="radio" name="normalize_method" value="to-100">to 100%</input></div>
178

179
                        </div>
180

181
                        <div class="menu_box">
182 183 184
                            size display</br>
                            <div class="buttonSelector" onclick="m.changeNotation('scientific', true)"><input type="radio" name="notation" value="scientific" >scientific notation</input></div>
                            <div class="buttonSelector" onclick="m.changeNotation('percent', true)"><input type="radio" name="notation" value="percent" checked>percent</input></div>
185
                        </div>
186 187

                        <div class="menu_box">
188 189 190 191 192
                            point key</br>
                            <div class="buttonSelector" onclick="m.changeTimeFormat('name', true)"><input type="radio" name="time" value="name" checked>name</input></div>
                            <div class="buttonSelector" onclick="m.changeTimeFormat('short_name', true)"><input type="radio" name="time" value="short_name" checked>name (short)</input></div>
                            <div class="buttonSelector" onclick="m.changeTimeFormat('sampling_date', true)"><input type="radio" name="time" value="sampling_date" >sampling date</input></div>
                            <div class="buttonSelector" onclick="m.changeTimeFormat('delta_date', true)"><input type="radio" name="time" value="delta_date">day after first sample</input></div>
193 194
                        </div>

195 196 197 198 199 200
                        <!--
                        <div class="submenu" id="system_menu" style="display:none">
                            <div class="menu_box">
                                selected locus/germline (for the grid)</br>
                                <ul id="germline_list">
                                </ul>
201 202
                            </div>
                        </div>
203
                        -->
204

205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226
                        <!--menu graph/dbscan -->
                        <div class="submenu" style="display:none">

                            <div class="menu_box">
                                <div id="DBSCANEpsSlider">
                                <input id="changeEps" type="range" min="0" max="40" step="1" value="0" onchange="m.changeEps(this.value)" />
                                </div>
                            </div>


                            <div class="menu_box">
                                <div id="DBSCANNbrSlider">
                                <input id="changeNbr" type="range" min="0" max="100" step="1" value="0" onchange="m.changeNbr(this.value)" />
                                </div>
                            </div>


                            <div class="menu_box">
                                <div id="EditDistanceSlider">
                                </br>
                                <input id="displayMax_slider" type="range" min="1" max="20" step="1" value="10" onchange="sp.displayDistanceMax(this.value)" style="display:none"/>
                                </div>
227 228
                            </div>
                        </div>
229

230 231
                    </div></div>
                </div>
232

233

234 235 236 237 238 239 240
                <div id="debug_menu" class="menu" onmouseover="showSelector('adminSelector');" style="display : none"> development
                    <div id="adminSelector" class="selector"><div>
                        <input type="checkbox" onclick=" this.checked ? $('#fps').css('display', '') : $('#fps').css('display', 'none');">display fps</input></br>
                        <input type="checkbox" onclick=" this.checked ? console.openLog() : console.closeLog() ;">log</input>
                        <div class="buttonSelector" onclick="m.changeTimeFormat('delta_date_no_zero', true)"><input type="radio" name="time" value="delta_date_no_zero">day after first sample (no zero)</input></div>
                    </div></div>
                </div>
241 242
            </div>

243
            <div id="logo" style="float: right;" onclick="console.log({'type': 'popup', 'default':'welcome'})">Vidjil <span class='logo'>(beta)</span></div>
244

Tatiana Rocher's avatar
Tatiana Rocher committed
245 246
            <div class="menu" style="float: right" onmouseover="showSelector('helpSelector');"> help
                <div id="helpSelector" class="selector"><div>
247
                    <a class="buttonSelector getHelp" onclick="report.sendMail()">get support</a>
248
                    <a class="buttonSelector" href="http://www.vidjil.org/doc/user.html" target="_blank">manual</a>
249
                    <a class="buttonSelector" href="http://www.vidjil.org/doc/tutorial/mastering-vidjil.html" target="_blank">tutorial</a>
Tatiana Rocher's avatar
Tatiana Rocher committed
250 251
                </div></div>
                </div>
252

253
            <div style="float: right" class="menu" onmouseover="showSelector('paletteSelector');"> palette 
254
                <div id="paletteSelector" class="selector"><div>
255
                    <a class="buttonSelector" onclick="changeStyle('solarizeL')">light</a>
256 257
                    <a class="buttonSelector" onclick="changeStyle('display')">light (presentation)</a>
                    <a class="buttonSelector" onclick="changeStyle('solarizeD')">dark</a>
258
                </div></div>
259
            </div>
260 261 262 263 264
            <div style="float: right; margin: 5px;" id='live-ajax'>
                <div class="active-container">
                    <img src="images/ajax-loader.gif" />
                </div>
            </div>
265

266
            <div id="fps" style="float: right; display: none"> </div>
267
            <div id="header_messages" class="message_container header"></div>
268

269 270 271 272 273
<!--
	    <div class="menu" style="float: right; margin-right:100px"><span style="padding: 4px 5px; background-color: #fef6e3; font-family: ubuntulight;">
		<b>Maintenance:</b> Vidjil will be offline Tuesday 7, 11:00 → 13:00 CEST. Thank you for your understanding.
	    </span></div>
-->
274
        </div>  
Marc Duez's avatar
Marc Duez committed
275
        <!-- fin top-container-->
276 277 278
        
        <!-- MID-CONTAINER -->
        <div id="mid-container" onmouseover="hideSelector()">
Marc Duez's avatar
Marc Duez committed
279

280
            <!-- LEFT-CONTAINER -->
281
            <div id="left-container">
282 283 284
                <div id="info-row"><div id="info"> </div></div>
                <div id="list-row"><div id="list"> </div></div>
                <div id="data-row"><div id="data"> </div></div>
285
            </div>
286
            <!-- fin left-container -->
287

288
            <div id="vertical-separator"></div>
Marc Duez's avatar
Marc Duez committed
289

290
            <!-- RIGHT-CONTAINER -->
Marc Duez's avatar
Marc Duez committed
291
            <div id="right-container"></div>
292

293
            <!-- VISU-CONTAINER  -->
294
            <div id="visu-container">
Marc Duez's avatar
Marc Duez committed
295 296 297
                <div id="visu2"></div>
                <div id="visu-separator" >...</div>
                <div id="visu" onclick=""></div>
298 299 300 301 302 303
            </div>

        </div>
        <!-- fin mid-container -->

        <!-- BOT-CONTAINER / SEGMENTER-CONTAINER -->
Marc Duez's avatar
Marc Duez committed
304
        <div id="bot-container"> </div>
305

306
        <form id="form"></form>
307

308
    </body> 
309

310
</html>