Mercurial > repos > jankanis > blast2html

diff blast_html.html.jinja @ 13:c2d63adb83db

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
renamed files
author Jan Kanis <jan.code@jankanis.nl>
date Mon, 12 May 2014 17:13:49 +0200
parents visualise.html.jinja@a459c754cdb5
children db7e4ee3be03
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/blast_html.html.jinja	Mon May 12 17:13:49 2014 +0200
@@ -0,0 +1,542 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    
+    <title>Blast output</title>
+
+    <style>
+      body {
+      color: #33333;
+      font-family: Arial,Sans-Serif;
+      }
+
+      :link {
+      color: #336699;
+      }
+
+      .right {
+      float: right;
+      }
+
+      #content {
+      margin: 0 2em;
+      padding: 0.5em;
+      border: 1px solid #888888;
+      background-color: #d3dff5;
+      }
+
+      h1, h2, h3, h4, h5, h6 {
+      color: #2A6979;
+      font-family: arial,verdana,sans-serif;
+      letter-spacing: -1px;
+      margin: 1.2em 0 0.3em;
+      }
+
+      h1 {
+      border-bottom: 1px solid #CCCCCC;
+      font-size: 150%;
+      padding-bottom: 0.1em;
+      }
+
+      h2 {
+      font-size: 120%;
+      font-weight: bold;
+      }
+
+      h4.darkHeader {
+      color: #4D4D4D;
+      letter-spacing: 0;
+      font-weight: bold;
+      }
+
+      #nodata {
+      font-weight: bold;
+      }
+      
+      .headerdata {
+      font-size: 90%;
+      }
+      .headerdata .param {
+      font-weight: bold;
+      text-align: right;
+      padding: 0 1em;
+      }
+
+      .grey {
+      background-color: #eeeeee;
+      border: 1px solid #cccccc;
+      padding: 1em;
+      }
+
+      .white {
+      background-color: white;
+      border: 1px solid #cccccc;
+      padding: 1.5em 2%;
+      }
+
+      .graphicrow {
+      clear: left;
+      width: 100%;
+      }
+
+      .graphicitem {
+      float: left;
+      }
+
+
+      
+      .graphic {
+      background-color: white;
+      border: 2px solid black;
+      padding: .5em 1.5em;
+      align: center;
+      margin: auto;
+      }
+
+      #graphics .grey {
+      text-align: center;
+      }
+
+      .centered, #defline, div.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: 2.8em;
+      overflow-y: hidden;
+      }
+
+      div.legend {
+      max-width: 40em;
+      }
+      div.legend div {
+      width: 100%;
+      color: white;
+      font-weight: bold;
+      border-spacing: 0;
+      }
+      div.legend div .graphicitem {
+      width: 20%;
+      padding: 0;
+      margin: 0;
+      border: none;
+      }
+
+      div.tablewrapper {
+      width: 50%;
+      min-width: 60em;
+      }
+
+      /* For small widths we give the graphic 100% */
+      @media (max-width: 72.5em) {
+      div.tablewrapper {
+      width: 100%;
+      min-width: 0px;
+      }
+      }
+
+      .scale {
+      width: 100%;
+      margin: .5em 0;
+      font-weight: bold;
+      }
+      .scale div {
+      color: red;
+      text-align: left;
+      }
+      .scale .graphicrow {
+      margin: .5em 0 .5em 0;
+      color: white;
+      }
+      .scale .graphicitem div {
+      margin: 0 1px;
+      padding: 0 2px;
+      text-align: right;
+      background-color: red;
+      color: white;
+      }
+      .scale .graphicitem:first-child div {
+      margin-left: 0px;
+      }
+      .scale .graphicitem:last-child div {
+      margin-right: 0px;
+      }
+
+      a.matchresult {
+      display: block;
+      margin: 0;
+      padding: 0;
+      }
+      div.matchrow {
+      margin-top: 4px;
+      }
+      div.matchrow, div.matchitem {
+      height: 4px;
+      }
+
+
+      
+      div#descriptions {
+      }
+      
+      table.descriptiontable {
+      font-size: 85%;
+      border: 1px solid #97b0c8;
+      border-spacing: 0;
+      color: #222222;
+      line-height: 1.3em;
+      background-color: white;
+      }
+      table.descriptiontable col:first-child {
+      width: 100%;
+      }
+      table.descriptiontable tr:hover {
+      background-color: #D5DEE3;
+      }
+      table.descriptiontable th {
+      color: #14376C;
+      font-weight: normal;
+      background-color: #F0F0F0;
+      background: linear-gradient(#FFFFFF, #F0F0F0);
+      border-bottom: 1px solid #D4DFE9;
+      border-right: 1px solid #CFCFCF;
+      border-left: 0px solid black;
+      border-top: 0px solid black;
+      }
+      table.descriptiontable td {
+      overflow: hidden;
+      text-align: center;
+      padding: .4em .8em;
+      }
+      table.descriptiontable td div {
+      width: 1em;
+      overflow: visible;
+      white-space: nowrap;
+      text-align: left;
+      }
+
+
+      
+      #alignments .white {
+      padding: 1.5em 1em;
+      }
+      
+      .alignment {
+      border-top: 1px solid black;
+      padding-left: 1em;
+      padding-right: 1em;
+      }
+      
+      div.linkheader {
+      padding-top: .2em;
+      font-size: 85%;
+      color: #14376C;
+      }
+      div.linkheader a.linkheader {
+      margin-right: 1em;
+      }
+      div.linkheader .right a {
+      text-decoration: none;
+      }
+
+      .title .hittitle {
+      color: #22222;
+      margin-bottom: .3em;
+      }
+      .title .titleinfo {
+      font-size: 80%;
+      margin-top: 0;
+      margin-bottom: .3em;
+      }
+      .title .titleinfo .b {
+      color: #606060;
+      font-weight: bold;
+      font-size: 90%;
+      }
+
+      .moretitles {
+      margin: 1.2em;
+      }
+      .moretitles .titleinfo {
+      margin: 0;
+      padding: 0;
+      }
+      .moretitles .hittitle {
+      margin: .4em 0 .2em 0;
+      padding: 0;
+      }
+      
+      a.showmoretitles {
+      font-size: 75%;
+      color: #336699;
+      font-weight: bold;
+      margin-top: 0;
+      }
+      a.showmoretitles:hover {
+      }
+
+      .hotspot {
+      color: #606060;
+      font-family: verdana, arial, sans-serif;
+      margin-bottom: 2.5em;
+      }
+
+      .hotspot p.range {
+      font-size: 70%;
+      margin-top: 0;
+      margin-top: 1em;
+      margin-bottom: .2em;
+      }
+      .hotspot p.range span.range {
+      font-weight: bold;
+      }
+      .hotspot p.range a.range {
+      margin-left: .5em;
+      }
+
+      table.hotspotstable {
+      border-top: 1px solid;
+      border-bottom: 1px solid;
+      text-align: left;
+      border-collapse: collapse;
+      }
+      table.hotspotstable th, table.hotspotstable td {
+      padding: .1em 1em;
+      }
+      table.hotspotstable th {
+      font-size: 70%;
+      }
+      table.hotspotstable td {
+      min-width: 7em;
+      color: #222222;
+      font-size: 80%;
+      }
+
+      pre.alignmentgraphic {
+      color: #222222;
+      }
+
+      
+    </style>
+
+    <script type="text/javascript">
+      function toggle_visibility(id) {
+	 var e = document.getElementById(id);
+	 if(e.style.display != 'block')
+	    e.style.display = 'block';
+	 else
+	    e.style.display = 'none';
+      }
+    </script>
+
+  </head>
+
+  
+  <body>
+    <div id=content>
+      <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>
+          
+      </div>
+      
+      {% if not (blast.BlastOutput_iterations.findall('Iteration') and
+                 blast.BlastOutput_iterations.Iteration.Iteration_hits.findall('Hit')) %}
+      <div id=nodata>
+	<h2>No Results</h2>
+	<div class=grey>
+	  No Matches
+	</div>
+      </div>
+      {% else %}
+
+
+      
+      <div id=graphics>
+        <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=graphic>
+            <h4 class=darkHeader>Color key for alignment scores</h4>
+	    <div class=legend><div class=graphicrow>
+		<div class=graphicitem style="background-color: {{colors[0]}}">&lt;40</div>
+		<div class=graphicitem style="background-color: {{colors[1]}}">40–50</div>
+		<div class=graphicitem style="background-color: {{colors[2]}}">50–80</div>
+		<div class=graphicitem style="background-color: {{colors[3]}}">80–200</div>
+		<div class=graphicitem style="background-color: {{colors[4]}}">200≤</div>
+            </div></div>
+	    <div style="clear: left"></div>
+
+            <div class=tablewrapper>
+
+              <div class=scale>
+                <div>query:</div>
+		<div class=graphicrow>
+                    {% for s in queryscale %}
+                    <div class=graphicitem
+			 style="width: {{s.width|safe}}%">
+		      <div>{{s.label|safe}}</div>
+		    </div>
+                    {% endfor %}
+		</div>
+		<div style="clear: left"></div>
+              </div>
+              
+              {% for line in match_colors %}
+              <a class=matchresult
+		 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}}">
+                <div class="matchrow graphicrow">
+                    {% for match in line.colors %}
+                    <div class="matchitem graphicitem"
+			 style="background-color: {{match[1]}}; width: {{match[0]}}%"></div>
+                    {% endfor %}
+                </div>
+              </a>
+              
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      
+      <div id=descriptions>
+        <h2>Descriptions</h2>
+
+        <div class=grey><div class=white>
+            <h4 class=darkHeader>Sequences producing significant alignments:</h4>
+
+            <table class=descriptiontable>
+	      <col/><col/><col/><col/><col/><col/><col/>
+              <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><a href="#hit{{hit.link_id}}"
+			    title="{{hit.title}}"
+			    name=description{{hit.link_id}}>
+		      {{hit.title}}
+		</a></div></td>
+                <td>{{hit.maxscore}}</td>
+                <td>{{hit.totalscore}}</td>
+                <td>{{hit.cover}}</td>
+                <td>{{hit.e_value}}</td>
+                <td>{{hit.ident}}</td>
+                <td><a href="{{genelink(hit.hit|hitid)}}">{{hit.accession}}</a></td>
+              </tr>
+              {% endfor %}
+            </table>
+            
+        </div></div>
+      </div>
+
+      
+
+      <div id=alignments>
+	<h2>Alignments</h2>
+	
+	<div class=grey><div class=white>
+	    {% for hit in hits %}
+	    <div class=alignment id=hit{{hit.Hit_num}}>
+	      
+	      <div class=linkheader>
+		<div class=right><a href="#description{{hit.Hit_num}}">Descriptions</a></div>
+		<a class=linkheader href="{{genelink(hit|hitid)}}">GenBank</a>
+		<a class=linkheader href="{{genelink(hit|hitid, 'graph')}}">Graphics</a>
+	      </div>
+	      
+	      <div class=title>
+		<p class=hittitle>{{hit|firsttitle}}</p>
+		<p class=titleinfo>
+		  <span class=b>Sequence ID:</span> <a href="{{genelink(hit|hitid)}}">{{hit|seqid}}</a>
+		  <span class=b>Length:</span> {{hit.Hit_len}}
+		  <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}}
+		</p>
+	      </div>
+
+	      {% if hit|othertitles|length %}
+	      <a class=showmoretitles onclick="toggle_visibility('moretitles{{hit.Hit_num}}'); return false;" href=''>
+		See {{hit|othertitles|length}} more title(s)
+	      </a>
+
+	      <div class=moretitles id=moretitles{{hit.Hit_num}} style="display: none">
+		{% for title in hit|othertitles %}
+		<div class=title>
+		  <p class=hittitle>{{title.title}}</p>
+		  <p class=titleinfo>
+		    <span class=b>Sequence ID:</span> <a href="{{genelink(title.hitid)}}">{{title.id}}</a>
+		  </p>
+		</div>
+		{% endfor %}
+	      </div>
+	      {% endif %}
+
+	      {% for hsp in hit.Hit_hsps.Hsp %}
+	      <div class=hotspot>
+		<p class=range>
+		  <span class=range>Range {{hsp.Hsp_num}}: {{hsp['Hsp_hit-from']}} to {{hsp['Hsp_hit-to']}}</span>
+		  <a class=range href="{{genelink(hit|hitid, 'genbank', hsp)}}">GenBank</a>
+		  <a class=range href="{{genelink(hit|hitid, 'graph', hsp)}}">Graphics</a>
+		</p>
+
+		<table class=hotspotstable>
+		  <tr>
+		    <th>Score</th><th>Expect</th><th>Identities</th><th>Gaps</th><th>Strand</th>
+		  </tr>
+		  <tr>
+		    <td>{{hsp['Hsp_bit-score']|fmt('.1f')}} bits({{hsp.Hsp_score}})</td>
+		    <td>{{hsp.Hsp_evalue|fmt('.1f')}}</td>
+		    <td>{{ hsp.Hsp_identity }}/{{ hsp|len }}({{
+		      (hsp.Hsp_identity/hsp|len) |fmt('.0%') }})</td>
+		    <td>{{ hsp.Hsp_gaps }}/{{ hsp|len
+		      }}({{ (hsp.Hsp_gaps / hsp|len) | fmt('.0%') }})</td>
+		    <td>{{ hsp['Hsp_query-frame']|asframe }}/{{ hsp['Hsp_hit-frame']|asframe }}</td>
+		  </tr>
+		</table>
+
+		<pre class=alignmentgraphic>{{hsp|alignment_pre}}</pre>
+	      </div>
+	      {% endfor %}
+	      
+	    </div>
+
+	    {% endfor %}
+	</div></div>
+      </div>
+
+      {% endif %}
+    </div>
+  </body>
+</html>
+