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: 1em;
      }

      .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: 4em;
      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;
      }

      a.matchresult {
      display: block;
      margin: 0;
      padding: 0;
      }
      div.matchrow {
      margin-top: 4px;
      }
      div.matchrow, div.matchitem {
      height: 4px;
      }

      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 ({{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 style="{{'margin-left: 0px' if loop.first else 'margin-right: 0px' if loop.last}}">{{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>
              <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>

    </div>
  </body>
</html>
author	Jan Kanis <jan.code@jankanis.nl>
date	Thu, 08 May 2014 17:33:41 +0200
parents	9e7927673089
children	bbdc8fb0de2b