Mercurial > repos > jankanis > blast2html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name=generator content="blast2html; see ...">

    <title>Blast output</title>

    <style>
      body {
      color: #333333;
      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;
      }

      .index {
      margin-bottom: 3em;
      }
      .index div.indexentry {
      margin: 1.2em 1.6em;
      font-weight: bold;
      font-size: 100%;
      }

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


      .graphics .grey {
      text-align: center;
      }

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

      .centered, .defline, div.legend, div.tablewrapper {
      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 {
      position: relative;
      }
      .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;
      }
      .scale .graphicitem .lastlabel {
      position: absolute;
      top: 0px;
      left: 100%;
      background-color: transparent;
      color: red;
      }

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


      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: #222222;
      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>

      {% if not blast.BlastOutput_iterations.findall('Iteration') %}
      <section class=nodata>
        <h1>No data</h1>
        <div class=grey>
          No matches
        </div>
      </section>

      {% else %}

      {% if blast.BlastOutput_iterations.findall('Iteration') | length > 1 %}
      <section class=index>
        <h1>Queries</h1>

        {% for result in blast.BlastOutput_iterations.Iteration %}
        <div class=indexentry><a href="#match{{result['Iteration_iter-num']}}">
            {% set hits = result|hits %}
            {{result['Iteration_query-ID']}}: {{result['Iteration_query-def']}}
            ({{result|len}} letters, {{hits|length}} hits)
        </a></div>
        {% endfor %}

      </section>
      {% endif %}

      {% for result in blast.BlastOutput_iterations.Iteration %}

      <section class=match id=match{{result['Iteration_iter-num']}}>

        <h1>Nucleotide Sequence ({{result|len}} letters)</h1>

        <section class=header>

          <table class=headerdata>
            {% for param, value in params %}
              <tr><td class=param>{{param}}:</td><td>{{value}}</td></tr>
            {% endfor %}
          </table>

        </section>

        {% set hits = result|hits %}
        {% if not hits %}
        <section>
          <h2>No Hits</h2>
          <div class=grey>
            This query did not match anywhere
          </div>
        </section>
        {% else %}

        <section class=graphics>
          <h2>Graphic Summary</h2>

          <div class=grey>
            <h3 class=centered>Distribution of {{result|length}} Blast Hits on the Query Sequence</h3>

            <div class=defline id=defline{{result['Iteration_iter-num']}}>
              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>
                    <div>
                      {% for s in result|queryscale %}
                      <div class=graphicitem style="width: {{s.width}}%">
                        {% if s.width > 3.0 %}
                        <div>{{s.label}}</div>
                        {% else %}
                        <div>&nbsp;</div>
                        <div class=lastlabel>{{s.label}}</div>
                        {% endif %}
                      </div>
                      {% endfor %}
                    </div>
                  </div>
                  <div style="clear: left"></div>
                </div>

                {% for line in result|match_colors %}
                <a class=matchresult
                   href="{{line.link}}"
                   onmouseover='document.getElementById("defline{{result['Iteration_iter-num']}}").innerHTML="{{line.defline|js_string_escape}}"'
                   onmouseout='document.getElementById("defline{{result['Iteration_iter-num']}}").innerHTML="Mouse-over to show defline and scores, click to show alignments"'
                   title="{{line.defline}}">
                  <div class="matchrow graphicrow">
                    {% for hit in line.colors %}
                    <div class="matchitem graphicitem"
                         style="background-color: {{hit[1]}}; width: {{hit[0]}}%"></div>
                    {% endfor %}
                  </div>
                </a>

                {% endfor %}
              </div>
            </div>
          </div>
        </section>


        <section class=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 result|hit_info %}
                <tr>
                  <td><div><a href="#hit{{hit.link_id}}"
                              title="{{hit.title}}"
                              id="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>
        </section>


        <section class=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|js_string_escape}}'); 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>
        </section>
        {% endif %}

        {% endfor %}
        {% endif %}
    </div>
  </body>
</html>

{#
Local Variables:
tab-width: 2
indent-tabs-mode: nil
End:
#}
author	Jan Kanis <jan.code@jankanis.nl>
date	Thu, 15 May 2014 10:48:09 +0200
parents	blast_html.html.jinja@9596fea636bb
children	6995a6f34f3f