Mercurial > repos > jankanis > blast2html

view blast_html.html.jinja @ 17:8e61627a87f1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
make html more semantic
author Jan Kanis <jan.code@jankanis.nl>
date Tue, 13 May 2014 12:54:03 +0200
parents db7e4ee3be03
children 67ddcb807b7d
line wrap: on
line source

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    
    <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;
      }
      
      .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: .5em 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 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;
      }

      
      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>
      <h1>Nucleotide Sequence ({{length}} 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>
      
      {% if not (blast.BlastOutput_iterations.findall('Iteration') and
                 blast.BlastOutput_iterations.Iteration.Iteration_hits.findall('Hit')) %}
      <section class=nodata>
        <h2>No Results</h2>
        <div class=grey>
          No Matches
        </div>
      </section>
      {% else %}


      
      <section class=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=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>
                  {% for s in queryscale %}
                  <div class=graphicitem style="width: {{s.width}}%">
                    <div>{{s.label}}</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|js_string_escape}}"'
                 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>
      </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 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 %}
    </div>
  </body>
</html>

{#
Local Variables:
tab-width: 2
indent-tabs-mode: nil
End:
#}