Mercurial > repos > jankanis > blast2html2

diff visualise.html.jinja @ 7:9e7927673089

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
intermediate commit before converting some tables to divs
author Jan Kanis <jan.code@jankanis.nl>
date Thu, 08 May 2014 16:51:52 +0200
parents d20ce91e1297
children beb83da5a6b7
line wrap: on
line diff
--- a/visualise.html.jinja	Wed May 07 19:02:20 2014 +0200
+++ b/visualise.html.jinja	Thu May 08 16:51:52 2014 +0200
@@ -11,7 +11,6 @@
       font-family: Verdana,Arial,Sans-Serif;
       }
 
-      
       #content {
       margin: 0 2em;
       padding: 0.5em;
@@ -37,7 +36,7 @@
       font-weight: bold;
       }
 
-      h4.graphicHeader {
+      h4.blackHeader {
       color: black;
       letter-spacing: 0;
       font-style: bold;
@@ -52,11 +51,16 @@
       padding: 0 1em;
       }
 
-      .graphicInfo {
+      .grey {
       background-color: #eeeeee;
       border: 1px solid #cccccc;
       padding: 1em;
-      text-align: center;
+      }
+
+      .white {
+      background-color: white;
+      border: 1px solid #cccccc;
+      padding: 1em;
       }
 
       .graphic {
@@ -67,18 +71,36 @@
       margin: auto;
       }
 
-      .centered {
+      #graphics .grey {
+      text-align: center;
+      }
+
+      .centered, #defline, div.legendwrapper, table.legend, div.tablewrapper {
       align: center;
       margin-left: auto;
       margin-right: auto;
       }
 
+      #defline {
+      background-color: white;
+      border: 1px solid black;
+      margin: .5em auto;
+      padding-left: .2em;
+      padding-right: .2em;
+      max-width: 50em;
+      text-align: left;
+      height: 4em;
+      overflow-y: hidden;
+      }
+
+      div.legendwrapper {
+      max-width: 40em;
+      }
+      
       table.legend {
       color: white;
       font-weight: bold;
-      align: center;
-      margin: 0 auto;
-      width: 40em;
+      width: 100%;
       border-spacing: 0;
       }
       table.legend td {
@@ -88,70 +110,173 @@
       border: none;
       }
 
-      table.matchresult {
-      height: 5px;
-      width: 40em;
-      align: center;
-      margin: 4px auto 0 auto;
+      div.tablewrapper {
+      width: 50%;
+      min-width: 60em;
+      }
+
+      /* For small widths we give the graphic 100% */
+      @media (max-width: 70em) {
+      div.tablewrapper {
+      width: 100%;
+      min-width: 0px;
+      }
+      }
+
+      .scale {
+      width: 100%;
+      margin: .5em 0;
+      font-weight: bold;
+      }
+      .scale div {
+      color: red;
+      text-align: left;
       }
-      table.matchresult tr {
-      height: 5px;
+      .scale table {
+      width: 100%;
+      height: 1.3em;
+      margin-top: 0;
+      color: white;
+      table-layout: fixed;
+      border-collapse: collapse;
+      }
+      .scale td {
+      margin 0;
+      padding 0;
       }
-      table.matchresult td {
-      height: 5px;
+      .scale td div {
+      margin: 1px 0;
+      text-align: right;
+      background-color: red;
+      color: white;
+      }
+      
+      table.matchresult {
+      width: 100%;
+      margin-top: 3px;
+      margin-bottom: 0;
+      border-collapse: collapse;
+      }
+      table.matchresult, table.matchresult tr, table.matchresult td, a.matchlink {
+      height: 3px;
+      margin-left: 0;
+      margin-right: 0;
+      padding-left: 0;
+      padding-right: 0;
       }
       a.matchlink {
       display: block;
-      heigth: 5px;
+      }
+
+      table.descriptiontable {
+      width: 100%;
       }
+      table.descriptiontable td {
+      overflow: hidden;
+      white-space: nowrap;
+      }
+      table.descriptiontable td div {
+      display: inline-block;
+      overflow: hidden;
+      max-height: 1.4em;
+      white-space: nowrap;
+      }
+
     </style>
 
+    
   </head>
 
   <body>
     <div id=content>
-      <h1>Nucleotide Sequence ({{blast["BlastOutput_query-len"]}} letters)</h1>
+      <h1>Nucleotide Sequence ({{length}} letters)</h1>
 
       <div id=header>
 
-	<table class=headerdata>
-	  {% for param, value in params %}
-   	    <tr><td class=param>{{param}}</td><td>{{value}}</td></tr>
-	  {% endfor %}
-	</table>
-	  
+        <table class=headerdata>
+          {% for param, value in params %}
+            <tr><td class=param>{{param}}</td><td>{{value}}</td></tr>
+          {% endfor %}
+        </table>
+          
       </div>
 
       <div id=graphics>
-	<h2>Graphic Summary</h2>
+        <h2>Graphic Summary</h2>
+
+        <div class=grey>
+          <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3>
+          
+          <div id=defline>Mouse-over to show defline and scores, click to show alignments</div>
 
-	<div class=graphicInfo>
-	  <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3>
-	  <div class=graphic>
-	    <h4 class=graphicHeader>Color key for alignment scores</h4>
-	    <table class=legend><tr>
-		<td style="background-color: {{colors[0]}}">&lt;40</td>
-		<td style="background-color: {{colors[1]}}">40-50</td>
-		<td style="background-color: {{colors[2]}}">50-80</td>
-		<td style="background-color: {{colors[3]}}">80-200</td>
-		<td style="background-color: {{colors[4]}}">&gt;=200</td>
-	    </tr></table>
+          <div class=graphic>
+            <h4 class=blackHeader>Color key for alignment scores</h4>
+            <div class=legendwrapper><table class=legend><tr>
+                  <td style="background-color: {{colors[0]}}">&lt;40</td>
+                  <td style="background-color: {{colors[1]}}">40-50</td>
+                  <td style="background-color: {{colors[2]}}">50-80</td>
+                  <td style="background-color: {{colors[3]}}">80-200</td>
+                  <td style="background-color: {{colors[4]}}">200&le;</td>
+            </tr></table></div>
+
+            <div class=tablewrapper>
 
-	    {% for line in match_colors %}
-	    <a href={{line.link}}>
-	      <table class=matchresult><tr>
-		  {% for match in line.colors %}
-		  <td style="background-color: {{match[1]}}; width: {{match[0]}}px" />
-		  {% endfor %}
-	      </tr></table>
-	    </a>
-	    {% endfor %}
-	    
-	    <p>hoi</p>
+              <div class=scale>
+                <div>query:</div>
+                <table><tr>
+                    {% for s in queryscale %}
+                    <td width={{s.width|safe}}%><div>{{s.label|safe}}</div></td>
+                    {% endfor %}
+                </tr></table>
+              </div>
+              
+              {% for line in match_colors %}
+              <a href="{{line.link}}"
+                 onmouseover='document.getElementById("defline").innerHTML="{{line.defline}}"'
+                 onmouseout='document.getElementById("defline").innerHTML="Mouse-over to show defline and scores, click to show alignments"'
+                 title="{{line.defline}}">
+                <table class=matchresult><tr>
+                    {% for match in line.colors %}
+                    <td width={{match[0]}}% style="background-color: {{match[1]}}" />
+                    {% endfor %}
+                </tr></table>
+              </a>
+              
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
 
-	  </div>
-	</div>
+      <div id=descriptions>
+        <h2>Descriptions</h2>
 
+        <div class=grey><div class=white>
+            <h4 class=blackHeader>Sequences producing significant alignments:</h4>
+            <table class=descriptiontable>
+              <tr>
+                <th>Description</th>
+                <th>Max score</th>
+                <th>Total score</th>
+                <th>Query cover</th>
+                <th>E value</th>
+                <th>Ident</th>
+                <th>Accession</th>
+              </tr>
+              {% for hit in hit_info %}
+              <tr>
+                <td><div>{{hit.description}}</div></td>
+                <td>{{hit.maxscore}}</td>
+                <td>{{hit.totalscore}}</td>
+                <td>{{hit.cover}}</td>
+                <td>{{hit.e_value}}</td>
+                <td>{{hit.ident}}</td>
+                <td>{{hit.accession}}</td>
+              </tr>
+              {% endfor %}
+            </table>
+            
+        </div></div>
 
       </div>