{% extends 'base.html' %}
{% load static %}
{% block content %}
<p class="eyebrow">Data Interface</p>
<h1>Expression Plot</h1>
<p class="muted">{{ gene_count }} genes · {{ selected_count }} selected RNA-seq samples. All count files were read and checked for matching gene rows and lengths.</p>
<p class="muted">{{ normalization_note }}</p>
<section class="card expression-controls">
  <label for="gene-search">Search a gene name</label>
  <input id="gene-search" type="search" autocomplete="off" placeholder="Type a gene name…" aria-autocomplete="list" aria-controls="gene-suggestions">
  <div id="gene-suggestions" class="gene-suggestions" role="listbox"></div>
  <p id="gene-status" class="muted" role="status">Search for a gene to see its expression across selected samples.</p>
  <div id="expression-bars" class="expression-bars" aria-label="Gene expression bar plot"></div>
</section>
<section class="card">
  <h2>Expression table</h2>
  <p id="table-status" class="muted">Search above to filter genes. Showing up to 50 matching genes.</p>
  <div class="table-wrap expression-table-wrap"><table><thead><tr id="expression-head"><th>Gene name</th><th>Gene length (bp)</th></tr></thead><tbody id="expression-body"></tbody></table></div>
</section>
<p><a class="button" href="{{ lab_prefix }}/">Return to Data Interface</a></p>
{{ plot_data|json_script:"expression-data" }}
<script src="{% static 'expression_plot.js' %}?v=20261010-expression-plot"></script>
{% endblock %}