Mercurial > repos > jankanis > blast2html

view blast_html.html.jinja @ 20:53cd304c5f26

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add index for multiple results; fix layout of query ruler for edge case The query ruler did not layout nicely if the last segment was too short to contain the text. For very short last segments the text is now displayed after the ruler.
author Jan Kanis <jan.code@jankanis.nl>
date Wed, 14 May 2014 16:20:29 +0200
parents 67ddcb807b7d
children 9596fea636bb
line wrap: on
line source

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name=generator content="blast_html; 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 div.indexentry {
      margin: .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:
#}