aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
Diffstat (limited to 'wqflask')
-rw-r--r--wqflask/wqflask/templates/wgcna_setup.html155
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