diff options
| -rw-r--r-- | wqflask/wqflask/templates/wgcna_setup.html | 155 |
1 files changed, 130 insertions, 25 deletions
diff --git a/wqflask/wqflask/templates/wgcna_setup.html b/wqflask/wqflask/templates/wgcna_setup.html index 34690f29..87ee2e3b 100644 --- a/wqflask/wqflask/templates/wgcna_setup.html +++ b/wqflask/wqflask/templates/wgcna_setup.html @@ -3,10 +3,14 @@ {% block content %} <!-- Start of body --> <style type="text/css"> + +#terminal { + margin-top: 10px; +} + </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-5"> <h1 class="mx-3 my-2 "> WGCNA analysis parameters</h1> @@ -28,19 +32,25 @@ <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"> + <input type="text" class="form-control form-control-md" id="MinModuleSize" value="30" name="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> + <label for="TOMtype" class="col-md-3 col-form-label col-form-label-sm">TOMtype:</label> <div class="col-md-9"> - <input type="text" class="form-control form-control-md" id="TOMtype" value="unsigned"> + <input type="text" class="form-control form-control-md" id="TOMtype" value="unsigned" name="TOMtype"> </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"> + <input type="text" class="form-control form-control-md" id="mergeCutHeight" value="0.25" name="mergeCutHeight"> + </div> + </div> + <div class="form-group row "> + <label for="corType" class="col-md-3 col-form-label col-form-label-sm">corType:</label> + <div class="col-md-9"> + <input type="text" class="form-control form-control-md" id="corType" value="pearson" name="corType"> </div> </div> <div class="form-group"> @@ -52,50 +62,145 @@ {% endif %} </div> <div class="col-md-7"> - <div class="col-md-10 mx-5"> - <div id="terminal"> + <div id="terminal" class="mt-2"> </div> - </div> </div> </div> + +<script src="https://cdn.socket.io/4.2.0/socket.io.min.js" integrity="sha384-PiBR5S00EtOj2Lto9Uu81cmoyZqR57XcOna1oAuVuIEjzj0wpqDVfD0JA9eXlRsj" crossorigin="anonymous"></script> + +<script src="https://cdn.jsdelivr.net/npm/xterm@4.14.1/lib/xterm.min.js"></script> + +<script src="https://cdn.jsdelivr.net/npm/xterm-addon-attach@0.6.0/lib/xterm-addon-attach.min.js"></script> + + +<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.min.js"></script> + <script src="https://code.jquery.com/jquery-3.5.1.js" + integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" + crossorigin="anonymous"></script> <script> -document.addEventListener('DOMContentLoaded', function() { +// document.addEventListener('DOMContentLoaded', function() { + + let term = new Terminal({ cursorBlink: true, lineHeight: 1.3,scrollback:true,macOptionIsMeta:true}); + let termDebugs = { + general: "Computation process to be displayed here....", + success: "Computation in process ......", + fail: "Too few phenotypes as input must be >=4" + } - let term = new Terminal({ cursorBlink: true, lineHeight: 1.3 }); + const fitAddon = new FitAddon.FitAddon() + term.loadAddon(fitAddon) - const fitAddon = new FitAddon.FitAddon(); - term.loadAddon(fitAddon); term.open(document.getElementById('terminal')); term.setOption('theme', { background: '#300a24' }); + // term.onData((data) => {uk + // console.log("key pressed in browser:", data); + // // socket.emit("pty-input", { input: data }); + // term.write(data) + // }); - term.writeln("Waiting for you to click the compute button....") + term.writeln(termDebugs.general) wgcnaForm = document.querySelector("#wgcna_form") + const socket = io("http://127.0.0.1:8081") //issue gn3 private + const attachAddon = new AttachAddon.AttachAddon(socket); + + term.loadAddon(attachAddon); + + fitAddon.fit() + + term.onData((data)=>{ + console.log(data) + }) + + if (wgcnaForm) { - wgcnaForm.addEventListener("submit", (e) => { - term.writeln("Computation in process ......") - }) + console.log(term) + console.log(socket) - // open socket connection - const socket = io(`${GN_SERVER_URL}`) - // add namespace - socket.on("output", ({ data }) => { - term.writeln(data) - }) + + // socket.on("connect",()=>{ + // console.log("connected") + // socket.emit("my_event") + // }) + + // socket.on("output", (data) => { + + // console.log(data) + // console.log("received ddata") + + // }) } else { - term.writeln("Too few phenotypes as input must be >=4") + term.writeln(termDebugs.fail) } -}); + + + socket.on("connect",()=>{ + console.log(socket.id) + // socket.emit("user_connection") + $("#wgcna_form").append(`<input type="hidden" name="socket_id" value=${socket.id}>`); + }) + + socket.on("output",(msg)=>{ + let {data} = msg + term.writeln(data) + }) + + + + $(document).on('submit','#wgcna_form',function(e) + { + + console.log(`the socket id is ${socket.id}`) + + term.writeln(termDebugs.success) + + e.preventDefault(); + var form = $(this); + $.ajax({ + type:'POST', + url:'/wgcna_results', + data:form.serialize(), + + success:function(){}, + success:function(data){ + // console.log(data) + document.write(data) + // document.write() + // window.location.href = "test_wgcna_results.html" + // console.log(data) + + } + // success:function(data, textStatus) + // { + + // // console.log(event) + // // console.log(data) + // // document.write(data); + // console.log(data) + // // alert('saved'); + // // console.log(data.redirect) + // } + }) + }); + + + + + + + +// }); </script> {% endblock %}
\ No newline at end of file |