{% extends "sharedTemplates/base.html" %}
{% block title %}Help annotation report{% endblock %}

{% block body %}
<div class="container py-5">
    <h1 class="mb-4">Annotation Report Columns</h1>

    <p class="lead">
        Each annotation report (<strong>Known</strong> or <strong>Novel</strong>) contains the following columns with detailed information about the identified segments:
    </p>

    <div class="table-responsive">
        <div class="mb-3">
            <input type="text" id="searchInput" class="form-control" placeholder="Search columns or explanations...">
        </div>
        <table class="table table-bordered table-hover align-middle">
            <thead class="table-light">
                <tr>
                    <th>Column</th>
                    <th>Explanation</th>
                    <th>Example</th>
                </tr>
            </thead>
          <tbody>
              <tr><td><strong>Sample</strong></td><td>The name of the sample.</td><td><code>Sample_001</code></td></tr>
              <tr><td><strong>Haplotype</strong></td><td>The haplotype ID (maternal or paternal).</td><td><code>1</code></td></tr>
              <tr><td><strong>Region</strong></td><td>The annotated region.</td><td><code>IGHV</code></td></tr>
              <tr><td><strong>Segment</strong></td><td>The gene segment type.</td><td><code>V</code></td></tr>
              <tr><td><strong>Start coord</strong></td><td>The start coordinate on the annotated contig.</td><td><code>12345</code></td></tr>
              <tr><td><strong>End coord</strong></td><td>The end coordinate on the annotated contig.</td><td><code>12789</code></td></tr>
              <tr><td><strong>Strand</strong></td><td>Segment orientation: <code>+</code> for 5' to 3', <code>-</code> for 3' to 5'.</td><td><code>+</code></td></tr>
              <tr><td><strong>Library name</strong></td><td>The closest reference gene segment name associated with the identified segment.</td><td><code>IGHV3-23*01</code></td></tr>
              <tr><td><strong>Target name</strong></td><td>The name assigned to the novel gene segment, based on the closest reference, with <code>-like</code> appended.</td><td><code>IGHV3-23-like</code></td></tr>
              <tr><td><strong>Short name</strong></td><td>The gene name, according to IMGT nomenclature.</td><td><code>IGHV3*01</code></td></tr>
              <tr><td><strong>Similar references</strong></td><td>Other reference gene segments sharing the same coordinates; the best match is chosen based on mutation count and name.</td><td><code>IGHV3-33*02</code></td></tr>
              <tr><td><strong>Target sequence</strong></td><td>The nucleotide sequence of the novel gene segment.</td><td><code>ATGGTGCAAGC...</code></td></tr>
              <tr><td><strong>Library sequence</strong></td><td>The nucleotide sequence of the closest reference segment.</td><td><code>ATGGTGCAAAC...</code></td></tr>
              <tr><td><strong>Mismatches</strong></td><td>Total mismatches between novel and reference segment.</td><td><code>3</code></td></tr>
              <tr><td><strong>% Mismatches of total alignment</strong></td><td>Percentage of mismatches over the full alignment length.</td><td><code>1.5%</code></td></tr>
              <tr><td><strong>% identity</strong></td><td>Percentage of identical bases across the alignment.</td><td><code>98.5%</code></td></tr>
              <tr><td><strong>BTOP</strong></td><td>BLAST traceback string showing exact mutations (substitutions, insertions, deletions).</td><td><code>10A5G3T</code></td></tr>
              <tr><td><strong>SNPs</strong></td><td>Number of single nucleotide polymorphisms (SNPs) detected.</td><td><code>2</code></td></tr>
              <tr><td><strong>Insertions</strong></td><td>Number of insertions relative to the reference.</td><td><code>1</code></td></tr>
              <tr><td><strong>Deletions</strong></td><td>Number of deletions relative to the reference.</td><td><code>0</code></td></tr>
              <tr><td><strong>Mapping tool</strong></td><td>The tool used for segment mapping.</td><td><code>Minimap2</code></td></tr>
              <tr><td><strong>Function</strong></td><td>The segment's classification: Functional, ORF, or Pseudogene.</td><td><code>Functional</code></td></tr>
              <tr><td><strong>Status</strong></td><td>Indicates if the segment is <strong>Known</strong> or <strong>Novel</strong>.</td><td><code>Novel</code></td></tr>
              <tr><td><strong>Message</strong></td><td>Annotation notes, e.g., presence of stop codons.</td><td><code>The STOP-CODON at the 3' end of the V-REGION can be deleted by rearrangement</code></td></tr>
              <tr><td><strong>Population</strong></td><td>Population group associated with the sample (if available).</td><td><code>Dutch</code></td></tr>
            </tbody>

        </table>
    </div>
</div>
<script>
    document.getElementById('searchInput').addEventListener('keyup', function () {
        const query = this.value.toLowerCase();
        const rows = document.querySelectorAll("table tbody tr");

        rows.forEach(row => {
            const rowText = row.innerText.toLowerCase();
            row.style.display = rowText.includes(query) ? "" : "none";
        });
    });
</script>
{% endblock %}