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;
      }

      .graphic {
      background-color: white;
      border: 2px solid black;
      padding: .5em;
      align: center;
      margin: auto;
      }

      #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;
      width: 100%;
      border-spacing: 0;
      }
      table.legend td {
      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 table {
      width: 100%;
      height: 1.3em;
      margin-top: 0;
      color: white;
      table-layout: fixed;
      border-collapse: collapse;
      }
      .scale td {
      margin 0;
      padding 0;
      }
      .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;
      }

      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=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>

              <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 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 16:51:52 +0200
parents	d20ce91e1297
children	beb83da5a6b7