add xterm web terminal

1 files changed, 116 insertions, 109 deletions

diff --git a/wqflask/wqflask/templates/test_wgcna_results.html b/wqflask/wqflask/templates/test_wgcna_results.html
index 37ea2aa0..f95766ad 100644
--- a/wqflask/wqflask/templates/test_wgcna_results.html
+++ b/wqflask/wqflask/templates/test_wgcna_results.html
@@ -1,146 +1,153 @@
 {% extends "base.html" %}
 {% block title %}WCGNA results{% endblock %}
+{% block content %}
+<!-- Start of body -->
 
-{% block content %} <!-- Start of body -->
 
-  <style type="text/css">
-    .container {
-      min-height: 100vh !important;
-      width: 100vw;
 
-    }
-    .grid_container {
+<link REL="stylesheet" TYPE="text/css" href="{{ url_for('css', filename='xterm/css/xterm.min.css') }}" />
 
-      /*width:250px;*/
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='xterm/xterm.min.js') }}"></script>
 
+<style type="text/css">
+.container {
+    min-height: 100vh;
+    width: 100vw;
+    padding: 20px;
 
+}
 
-      width: 80vw;
-      margin:auto;
-      padding: 20px;
+.grid_container {
 
 
-      display: grid;
-      grid-template-columns: repeat(7,1fr);
-      /*grid-gap: 5px;*/
-      border: 1px solid black;
-      grid-column-gap: 20px;
+    width: 80vw;
+    margin: auto;
+    padding: 20px;
 
-    }
-    .control_sft_column {
-      text-align: center;
-    }
-    .grid_container div:not(:last-child){
-      border-right: 1px solid #000;
-    }
 
-    .grid_container .control_sft_column h3{
-      font-weight: bold;
-      font-size: 18px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    /*grid-gap: 5px;*/
+    border: 1px solid black;
+    grid-column-gap: 20px;
 
-      /*border-right: 1px solid #;*/
-      /*background: forestgreen;*/
-    }
+}
 
-    .control_net_colors{
+.control_sft_column {
+    text-align: center;
+}
 
-     display: flex;
-     flex-wrap: wrap;
-     justify-content: space-between;
-     align-items: center;
-     text-align: center;
-    }
+.grid_container div:not(:last-child) {
+    border-right: 1px solid #000;
+}
 
+.grid_container .control_sft_column h3 {
+    font-weight: bold;
+    font-size: 18px;
+}
 
-    .control_mod_eigens {
-      display: grid;
-      grid-template-columns: repeat(2,200px);
-    }
-
-
-  </style>
-  <div class="container">
+.control_net_colors {
 
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+}
 
-   <div>
-   <div class="grid_container">
-   {% for key, value in results["data"]["output"]["soft_threshold"].items()%}
 
-    <div class="control_sft_column">
-      <h3>{{key}}</h3>
-      {% for val in value %}
-        <p>{{val|round(3)}}</p>
-
-      {% endfor %}
-      
-    </div>
-       {% endfor %}
+.control_mod_eigens {
+    display: grid;
+    grid-template-columns: repeat(2, 200px);
+}
 
-   </div>
+#terminal {
 
-   <div>
-     <h3>Net colors</h3>
-     <div class="control_net_colors">
-     {% for key,value  in  results["data"]["output"]["net_colors"].items() %}
-     <div style="background-color:{{value}}">
-     <p>{{key}}</p>
-     <p >{{value}}</p>
-     </div>
-       
-     {% endfor %}
+    max-width: 768px;
 
-     </div>
-    
+    margin: 10px;
 
-   </div>
-
-
-   <div>
-    <h2> Module eigen genes </h2>
-
-     <div>
-    {% for strain in results["data"]["input"]["sample_names"]%}
-    {{strain}}
-    {% endfor %}
-    {% for mod,values  in results["data"]["output"]["ModEigens"].items() %}
-      {{mod}} {{values}}
-
-    {% endfor %}
-
-   </div>
-
-   <div>
-              <a href="/tmp/{{ results['data']['output']['imageLoc'] }}">
-
-                dsffsdf
-                   <!--  <img alt="Embedded Image" src="data:image/png;base64,
-                    {% for elem in results['imgdata'] -%}
-                    {% print("%c"|format(elem)) %}
-                    {%- endfor %}
-                    " /> --></a>
+}
+</style>
+<div class="container">
+    <div>
+        <div id="terminal">
+        </div>
+    </div>
+    <div>
+        <div class="grid_container">
+            {% for key, value in results["data"]["output"]["soft_threshold"].items()%}
+            <div class="control_sft_column">
+                <h3>{{key}}</h3>
+                {% for val in value %}
+                <p>{{val|round(3)}}</p>
+                {% endfor %}
+            </div>
+            {% endfor %}
+        </div>
+        <div>
+            <h3>Net colors</h3>
+            <div class="control_net_colors">
+                {% for key,value in results["data"]["output"]["net_colors"].items() %}
+                <div style="background-color:{{value}}">
+                    <p>{{key}}</p>
+                    <p>{{value}}</p>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+        <div>
+            <h2> Module eigen genes </h2>
+            <div>
+                {% for strain in results["data"]["input"]["sample_names"]%}
+                {{strain}}
+                {% endfor %}
+                {% for mod,values in results["data"]["output"]["ModEigens"].items() %}
+                {{mod}} {{values}}
+                {% endfor %}
+            </div>
+            <!-- end -->
+            <div>
+                <a href="/tmp/{{ results['data']['output']['imageLoc'] }}">
+                    CLuster dendogram
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+<script type="text/javascript">
+var results = { { results | safe } }
 
-     
-   </div>
- </div>
-   <!-- {{key}} -->
+let terminal_output = results.output
+let { output } = results.data
 
+let sft = output.soft_threshold
+</script>
+<script>
 
-  </div>
 
+function writeToTerminal(config, target_dom_id) {
+    // create instance
+    let term = new Terminal(config)
 
-  <script type="text/javascript">
+    term.open(document.getElementById(target_dom_id))
+    term.setOption("theme", {
+        background: "#300a24"
+    })
 
-    var results = {{ results|safe }}
+    return (terminal_output) => {
+      // todo add write delay
+        terminal_output.split('\n').forEach((line) => {
+            term.writeln(line)
+        });
+    }
 
-    let {output} = results.data
 
-    let sft = output.soft_threshold
+}
 
-    console.log(output)
 
-    console.log(results)
 
-    
-  </script>
-{% endblock %}
+ writeToTerminal({ cursorBlink: true, lineHeight: 1.2 }, "terminal")(terminal_output)
 
+</script>
+{% endblock %}
\ No newline at end of file