diff options
| -rw-r--r-- | wqflask/wqflask/templates/wgcna_setup.html | 140 |
1 files changed, 94 insertions, 46 deletions
diff --git a/wqflask/wqflask/templates/wgcna_setup.html b/wqflask/wqflask/templates/wgcna_setup.html index 44932389..4b13e54e 100644 --- a/wqflask/wqflask/templates/wgcna_setup.html +++ b/wqflask/wqflask/templates/wgcna_setup.html @@ -1,53 +1,101 @@ {% extends "base.html" %} {% block title %}WCGNA analysis{% endblock %} - -{% block content %} <!-- Start of body --> - +{% block content %} +<!-- Start of body --> +<style type="text/css"> +</style> +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.14.1/css/xterm.css"> +<script src="https://cdn.jsdelivr.net/npm/xterm@4.14.1/lib/xterm.min.js"></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script> <div class="container"> - <div class="col-md-6"> -<h1 class="mx-3 my-2 bg-warning"> WGCNA analysis parameters</h1> - {% if request.form['trait_list'].split(",")|length < 4 %} - <div class="alert alert-danger" role="alert"> - <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> - <span class="sr-only">Error:</span> - <h2>Too few phenotypes as input</h2> - Please make sure you select enough phenotypes / genes to perform WGCNA. Your collection needs to contain at least 4 different phenotypes. You provided {{request.form['trait_list'].split(',')|length}} phenotypes as input. - </div> - {% else %} - <form class="col-md-12" action="/wgcna_results" method="post" class="form-horizontal"> - <input type="hidden" name="trait_list" id="trait_list" value= "{{request.form['trait_list']}}"> - <div class="form-group row "> - <label for="SoftThresholds" class="col-md-3 col-form-label col-form-label-sm">Soft threshhold</label> - <div class="col-md-9"> - <input type="text" class="form-control form-control-md" value="1,2,3,4,5,6,7,8,9" id="SoftThresholds" name="SoftThresholds"> - </div> - </div> - <div class="form-group row "> - <label for="MinModuleSize" class="col-md-3 col-form-label col-form-label-sm">Minimum module size:</label> - <div class="col-md-9"> - <input type="text" class="form-control form-control-md" id="MinModuleSize" value="MinModuleSize"> - </div> - </div> - - <div class="form-group row "> - <label for="TOMtype" class="col-md-3 col-form-label col-form-label-sm">TOMtype module size:</label> - <div class="col-md-9"> - <input type="text" class="form-control form-control-md" id="TOMtype" value="unsigned"> - </div> - </div> - <div class="form-group row "> - <label for="mergeCutHeight" class="col-md-3 col-form-label col-form-label-sm">mergeCutHeight size:</label> - <div class="col-md-9"> - <input type="text" class="form-control form-control-md" id="mergeCutHeight" value="0.25"> + <div class="col-md-5"> + <h1 class="mx-3 my-2 "> WGCNA analysis parameters</h1> + {% if request.form['trait_list'].split(",")|length < 4 %} <div class="alert alert-danger" role="alert"> + <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> + <span class="sr-only">Error:</span> + <h2>Too few phenotypes as input</h2> + Please make sure you select enough phenotypes / genes to perform WGCNA. Your collection needs to contain at least 4 different phenotypes. You provided {{request.form['trait_list'].split(',')|length}} phenotypes as input. </div> - </div> - <div class="form-group"> - <div class="text-center"> - <input type="submit" class="btn btn-primary" value="Run WGCNA using these settings" /> - </div> + {% else %} + <form class="col-md-12" action="/wgcna_results" method="post" class="form-horizontal" id="wgcna_form"> + <input type="hidden" name="trait_list" id="trait_list" value="{{request.form['trait_list']}}"> + <div class="form-group row "> + <label for="SoftThresholds" class="col-md-3 col-form-label col-form-label-sm">Soft threshhold</label> + <div class="col-md-9"> + <input type="text" class="form-control form-control-md" value="1,2,3,4,5,6,7,8,9" id="SoftThresholds" name="SoftThresholds"> + </div> + </div> + <div class="form-group row "> + <label for="MinModuleSize" class="col-md-3 col-form-label col-form-label-sm">Minimum module size:</label> + <div class="col-md-9"> + <input type="text" class="form-control form-control-md" id="MinModuleSize" value="MinModuleSize"> + </div> + </div> + <div class="form-group row "> + <label for="TOMtype" class="col-md-3 col-form-label col-form-label-sm">TOMtype module size:</label> + <div class="col-md-9"> + <input type="text" class="form-control form-control-md" id="TOMtype" value="unsigned"> + </div> + </div> + <div class="form-group row "> + <label for="mergeCutHeight" class="col-md-3 col-form-label col-form-label-sm">mergeCutHeight size:</label> + <div class="col-md-9"> + <input type="text" class="form-control form-control-md" id="mergeCutHeight" value="0.25"> + </div> + </div> + <div class="form-group"> + <div class="text-center"> + <input type="submit" class="btn btn-primary" value="Run WGCNA using these settings" /> + </div> + </div> + </form> + {% endif %} +</div> +<div class="col-md-7"> + <div class="col-md-10 mx-5"> + <div id="terminal"> + </div> </div> -</form> - {% endif %} </div> </div> -{% endblock %} +<script> +document.addEventListener('DOMContentLoaded', function() { + + + + let term = new Terminal({ cursorBlink: true, lineHeight: 1.3 }); + + const fitAddon = new FitAddon.FitAddon(); + term.loadAddon(fitAddon); + term.open(document.getElementById('terminal')); + term.setOption('theme', { + background: '#300a24' + }); + + term.writeln("Waiting for you to click the compute button....") + + wgcnaForm = document.querySelector("#wgcna_form") + + if (wgcnaForm) { + + wgcnaForm.addEventListener("submit", (e) => { + term.writeln("Computation in process ......") + }) + + // open socket connection + + const socket = io(`${GN_SERVER_URL}`) + // add namespace + socket.on("output",({data})=>{ + + term.writeln(data) + + }) + } else { + term.writeln("Too few phenotypes as input must be >=4") + } + + +}); +</script> +{% endblock %} \ No newline at end of file |