Mercurial > repos > jankanis > blast2html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">

    <title>Blast output</title>

    <style>
      body {
      color: #33333;
      font-family: Verdana,Arial,Sans-Serif;
      }

      #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.blackHeader {
      color: black;
      letter-spacing: 0;
      font-style: 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;
      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: 70em) {
      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 {
      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;
      }

    </style>

    <script type="text/javascript">
      function toggle_visibility(id) {
	 var e = document.getElementById(id);
	 if(e.style.display == 'none')
	    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>

      <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=blackHeader>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&le;</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=blackHeader>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>{{hit.accession}}</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>
		<a href="#description{{hit.Hit_num}}">Descriptions</a>
	      </div>

	      <div class=title>
		<p class=hittitle>{{hit|firsttitle}}</p>
		<p class=titleinfo>
		  <span class=b>Sequence ID:</span> {{hit|seqid}}
		  <span class=b>Length:</span> {{hit.Hit_len}}
		  <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}}
		</p>
	      </div>

	      <a class=showmoretitles onclick="toggle_visibility('moretitles{{hit.Hit_num}}'); return false;" href=''>
		Show {{hit|othertitles|length}} more title(s)
	      </a>

	      <div class=moretitles id=moretitles{{hit.Hit_num}}>
		{% for title in hit|othertitles %}
		<div class=title>
		  <p class=hittitle>{{title.title}}</p>
		  <p class=titleinfo>
		    <span class=b>Sequence ID:</span> {{title.id}}
		  </p>
		</div>
		{% endfor %}
	      </div>

	      {% for hsp in hit.Hit_hsps.Hsp %}
	      <div class=hotspots>
		<p>Range {{hsp.Hsp_num}}: {{hsp['Hsp_hit-from']}} to {{hsp['Hsp_hit-to']}}</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>{{hsp|alignment_pre}}</pre>

	      </div>
	      {% endfor %}

	      <p>
	      {{hit.Hit_id}}

	      Hit {{hit.Hit_num}}
	      </p>
	    </div>
	    {% endfor %}
	</div></div>
      </div>

    </div>
  </body>
</html>
author	Jan Kanis <jan.code@jankanis.nl>
date	Fri, 09 May 2014 18:16:48 +0200
parents	bbdc8fb0de2b
children	7660519f2dc9