comparison blast_html.html.jinja @ 20:53cd304c5f26

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.

19:67ddcb807b7d

      }

      #nodata {
      font-weight: bold;
      }
      
      .headerdata {
      font-size: 90%;
      }
      .headerdata .param {

      }

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

      .centered, .defline, div.legend, div.tablewrapper {
      margin-left: auto;

      }
      .scale .graphicrow {
      margin: .5em 0 .5em 0;
      color: white;
      }
      .scale .graphicitem div {
      margin: 0 1px;
      padding: 0 2px;
      text-align: right;
      background-color: red;

      .scale .graphicitem:first-child div {
      margin-left: 0px;
      }
      .scale .graphicitem:last-child div {
      margin-right: 0px;
      }

      a.matchresult {
      display: block;
      margin: 0;

          No matches
        </div>
      </section>

      {% else %}
      {% for result in blast.BlastOutput_iterations.Iteration %}
      
      <section class=match>
      
        <h1>Nucleotide Sequence ({{result|len}} letters)</h1>

        <section class=header>

              <div class=tablewrapper>

                <div class=scale>
                  <div>query:</div>
                  <div class=graphicrow>
                    {% for s in result|queryscale %}
                    <div class=graphicitem style="width: {{s.width}}%">
                      <div>{{s.label}}</div>
                    </div>
                    {% endfor %}
                  </div>
                  <div style="clear: left"></div>
                </div>

                {% for line in result|match_colors %}

20:53cd304c5f26

      }

      #nodata {
      font-weight: bold;
      }

      .index div.indexentry {
      margin: .6em;
      font-weight: bold;
      font-size: 100%;
      }
      
      .headerdata {
      font-size: 90%;
      }
      .headerdata .param {

      }

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

      .centered, .defline, div.legend, div.tablewrapper {
      margin-left: auto;

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

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

          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>

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