diff options
| -rw-r--r-- | wqflask/wqflask/templates/test_wgcna_results.html | 225 |
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 |