modifications for wgcna form page

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