Mercurial > repos > jankanis > blast2html

view test-data/blast xml example2.html @ 119:591dc9c24824

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
tentative fix for Rikilt issue 10: don't sort hits ourselves but use blastxml ordering
author Jan Kanis <jan.code@jankanis.nl>
date Thu, 31 Jul 2014 13:26:34 +0200
parents 4f0ed3b5ae46
children
line wrap: on
line source

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name=generator content="blast2html; see https://github.com/thehyve/blast2html/">
    
    <title>Blast output</title>
    
    <style>
      body {
      color: #333333;
      font-family: Arial,Sans-Serif;
      }

      :link {
      color: #336699;
      }

      .right {
      float: right;
      }

      /* Galaxy with html sanitization enabled strips the header of this html page. If so, show the user a warning.*/
      #strip_html_warning {
      display: none;
      }
      
      #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 {
      font-size: 200%;
      }

      h2 {
      font-size: 150%;
      }
      
      h1, h2 {
      border-bottom: 1px solid #CCCCCC;
      padding-bottom: 0.1em;
      }

      h3 {
      font-size: 120%;
      font-weight: bold;
      }

      h5.darkHeader {
      color: #4D4D4D;
      letter-spacing: 0;
      font-weight: bold;
      font-size: 108%;
      }

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

      footer {
      text-align: center;
      color: #cccccc;
      font-size: 70%;
      margin-top: 1em;
      }
      footer :link {
      color: #5588cc;
      }
      
    </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="strip_html_warning">
      <!-- This div should be hidden by the header css block. Galaxy
      strips all css, breaking this page but making this warning
      visible. This warning contains some ugly old skool tabular html
      layout that is not stripped. -->
      <table bgcolor="#FFE5C9"><tr><td><font color="red"><b>
                <font size=5><center>This html page seems to have been stripped by Galaxy.</center></font>
                Disable Galaxy's html sanitization feature to view the full page (see <font face=monospace>sanitize_all_html</font> in your galaxy's universe_wsgi.ini), or download this page instead of viewing it in Galaxy.
      </b></font></td></tr></table>
    </div>
    
    <div id=content>

      <section class=header>

        <h1>Nucleotide Blast results</h1>

        <table class=headerdata>
          <tr><td class=param>Program:</td><td>BLASTN 2.2.28+</td></tr>
          <tr><td class=param>Database:</td><td>/share/BlastDB/nt</td></tr>
        </table>

      </section>



      
      <section class=match id=match1>
      
        <h2>Nucleotide Sequence (16 letters)</h2>

        <section class=header>

          <table class=headerdata>
            <tr><td class=param>Query number:</td><td>1</td></tr>
            <tr><td class=param>Query ID:</td><td>Query_1</td></tr>
            <tr><td class=param>Definition line:</td><td>No definition line</td></tr>
            <tr><td class=param>Length:</td><td>16</td></tr>
          </table>

        </section>

        <section>
          <h3>No Hits</h3>
          <div class=grey>
            <table class=headerdata>
              <tr><td class=param>Message:</td><td>No hits found</td></tr>
            </table>
          </div>
        </section>
      </section>

    </div>

    <footer>
      This page was generated by <a href="https://github.com/thehyve/blast2html/">blast2html</a>.
    </footer>
  </body>
</html>