{% extends "variants/variants_layout.html" %}

{% import "bootstrap/wtf.html" as wtf %}

{% from "variants/components.html" import gene_cell %}
{% from "variants/utils.html" import stash_filter_buttons %}
{% from "variant/buttons.html" import splice_junctions_button %}
{% from "variant/components.html" import variant_scripts %}

{% block category_title %}
  {% if is_methylation %}WGS-LR methylation{% else %}WTS outlier{% endif %} variants
{% endblock %}

{% block variants_form_action%}
  {{url_for('omics_variants.outliers', institute_id=institute._id, case_name=case.display_name)}}
{% endblock %}

{% block variants_filter %}
  {{ outlier_filters(form, institute, case) }}
{% endblock %}

{% block variants_filter_form_footer %}
  {{ omics_filter_form_footer(form, result_size, total_variants, page, variants|length, institute) }}
{% endblock %}

{% block variants_table_header %}
  <thead class="thead table-light">
    <tr>
      <th scope="col" style="width:14%" title="HGNC symbols">Gene</th>
      <th scope="col" style="width:7%" title="Sub-category">Type</th>
      <th scope="col" style="width:7%" title="{% if is_methylation %}MethBat Compare label{% else %}Value - delta Psi or l2fc{% endif %}">{% if is_methylation %}Compare{% else %}Value{% endif %}</th>
      <th scope="col" title="{% if is_methylation %}MethBat Summary label {% else %} Functional annotation{% endif %}">{% if is_methylation %}Summary{% else %}Func. annotation{% endif %}</th>
      <th scope="col" style="width:7%" title="{% if is_methylation %}MethBat Category population frequency{% else %}P-value{% endif %}">{% if is_methylation %}Pop freq{% else %}P-value{% endif %}</th>
      <th scope="col" style="width:10%" title="Individual">Ind</th>
      <th scope="col" style="width:3%" title="Chromosome">Chr</th>
      <th scope="col" title="Position">Pos</th>
    </tr>
  </thead>
{% endblock %}

{% block variants_table_rows %}
    {% for variant in variants %}
      <tr>
        <td class="text-end">
          <div class="d-flex flex-row justify-content-between align-items-center">
          {% if variant.genes %}
            {{ gene_cell(variant, inherit_palette) }}
          {% else %}
            {{ variant.gene_name_orig }}
          {% endif %}
          {% if variant.cpg_label %}
            {% set cpg_label_parts = variant.cpg_label.split("_") %}
            <div style="white-space: nowrap;">{{ cpg_label_parts[0] }}</div>
          {% endif %}
            <div class="d-flex justify-content-center">
            {% set form_var_id = variant.variant_id or variant.omics_variant_id %}
            {% if case.vcf_files.vcf_snv %}
                {% set form_id = "snvs_" + form_var_id %}
                <form id="{{form_id}}" action="{{url_for('variants.variants', institute_id=institute._id, case_name=case.display_name) }}" target="_blank">
                  <input form="{{form_id}}" type="hidden" id="hgnc_symbols" name="hgnc_symbols" value="{% for gene in variant.genes %}{{gene.hgnc_symbol}}{{ ", " if not loop.last else "" }}{% endfor %}"></input>
                  <input form="{{form_id}}" type="hidden" id="gene_panels" name="gene_panels" value=""></input>
                  <span><button form="{{form_id}}" type="submit" class="btn btn-secondary btn-sm" style="float: right;" data-bs-toggle="tooltip" title="SNV and INDEL variants view filtered for the gene(s) {% for gene in variant.genes %}{{gene.hgnc_symbol}}{{ ", " if not loop.last else "" }}{% endfor %} ">SNVs</button></span>
              </form>
            {% endif %}
            {% if case.vcf_files.vcf_sv %}
              {% set form_id = "svs_" + form_var_id %}
              <form id="{{form_id}}" action="{{url_for('variants.sv_variants', institute_id=institute._id, case_name=case.display_name) }}" target="_blank">
                <input form="{{form_id}}" type="hidden" id="hgnc_symbols" name="hgnc_symbols" value="{% for gene in variant.genes %}{{gene.hgnc_symbol}}{{ ", " if not loop.last else "" }}{% endfor %}"></input>
                <input form="{{form_id}}" type="hidden" id="gene_panels" name="gene_panels" value=""></input>
                <button form="{{form_id}}" type="submit" class="btn btn-secondary btn-sm" data-bs-toggle="tooltip" title="SV variants view filtered for the gene(s) {% for gene in variant.genes %}{{gene.hgnc_symbol}}{{ ", " if not loop.last else "" }}{% endfor %} ">SVs</button></span>
              </form>
            {% endif %}
            </div>
          </div>
        </td>
        <td>{{ variant.sub_category }}</td>
        <td class="text-end"> {% if variant.sub_category == "splicing" %}
            <span data-bs-toggle="tooltip" data-bs-html="true" title='The ∆ψ-value, which is the difference between the actual observed ψ (intron Jaccard Index splice metric) and the expected ψ - see FRASER vignette for details.'>
            {{ variant.delta_psi }}&nbsp;<a target="_blank" href="https://www.bioconductor.org/packages/devel/bioc/vignettes/FRASER/inst/doc/FRASER.pdf" rel="noopener noreferrer">&Delta;&psi;</a></span>
          {% elif variant.sub_category == "expression" %}
            <span data-bs-toggle="tooltip" data-bs-html="true" title='The log2 fold change (fold change) - click to see OUTRIDER vignette for details.'>
            {{ variant.l2fc }} ({{variant.l2fc|l2fc_2_fc|round(2)}}x) &nbsp;&nbsp;<a target="_blank" href="https://www.bioconductor.org/packages/devel/bioc/vignettes/OUTRIDER/inst/doc/OUTRIDER.pdf" rel="noopener noreferrer">{% if variant.l2fc > 0 %}&uarr;{% elif variant.l2fc < 0 %}&darr;{% endif %}</a></span>
          {% elif variant.sub_category == "methylation" %}
            <a target="_blank" data-bs-toggle="tooltip" data-bs-html="true" title='MethBat compare label {{ variant.compare_label }}' href="https://github.com/PacificBiosciences/MethBat/blob/main/docs/profile_guide.md#single-dataset-profiles" rel="noopener noreferrer">{% if "Hyper" in variant.compare_label %}&uarr;{% elif "Hypo" in variant.compare_label %}&darr;{% endif %}{% if "ASM" in variant.compare_label %}ASM{% elif "InsufficientData" in variant.compare_label %}?{% elif "Uncategorized" in variant.compare_label %}&asymp;{% endif %}</a>
          {% endif %}
        </td>
        <td>
          {% if variant.sub_category == "splicing" %}
            {{ variant.potential_impact }} - fs {{ variant.causes_frameshift }}
          {% elif variant.sub_category == "methylation" %}
            <a target="_blank" href="https://github.com/PacificBiosciences/MethBat/blob/main/docs/profile_guide.md#single-dataset-profiles" data-bs-toggle="tooltip" data-bs-html="true" title='MethBat summary label {{ variant.summary_label }}' rel="noopener noreferrer">{% if "Methylated" in variant.summary_label %}&uarr;{% elif "Unmethylated" in variant.summary_label %}&darr;{% elif "AlleleSpecificMethylation" in variant.summary_label %}ASM{% elif "NoData" in variant.summary_label %}?{% else %}&asymp;{% endif %}</a>
          {% endif %}
        </td>
        {% if variant.sub_category == "methylation" %}
          <td class="text-end" data-bs-toggle="tooltip" data-bs-html="true" title="<br>
            {%  if "category_pop_count" in variant %}
            Category population count: {{ variant.category_pop_count}}<br>{% endif %}
            {% if "category_pop_freq" in variant %}
            Category population freq: {{ '%.3e' % variant.category_pop_freq }}<br>{% endif %}
            {% if "background_category" in variant %}Background: {{ variant.background_category }}
            <br>{% endif %}
            {% if "asm_fishers_pvalue" in variant %}
            ASM Fisher P value: {{ '%.3e' % variant.asm_fishers_pvalue }}
            <br>{% endif %}
            {% if "mean_meth_delta" in variant %}
            Mean methylation delta: {{ '%.3e' % variant.mean_meth_delta }}<br>{% endif %}
            {% if "mean_abs_meth_delta_zscore" in variant %}
            Mean abs methylation delta Z-score: {{ '%.3e' % variant.mean_abs_meth_delta_zscore }}<br>{% endif %}
            {% if "mean_combined_methyl" in variant %}
            Mean combined methylation: {{ '%.3e' % variant.mean_combined_methyl }}{% endif %}{% if "mean_combined_methyl_zscore" in variant %} (Z-score {{ '%.3e' % variant.mean_combined_methyl_zscore }}){% endif %}<br>
            Num phased cpgs: {{ variant.num_phased_cpgs }}<br>partial: {{ variant.num_partial_cpgs }}<br>unphased: {{ variant.num_unphased_cpgs }}<br>
            Median cov: {{ variant.median_total_coverage }}<br>hap1: {{ variant.median_hap1_coverage }}<br>hap2: {{ variant.median_hap2_coverage }}<br>
            ">{% if "category_pop_freq" in variant %}{{ '%.3e' % variant.category_pop_freq }}{% endif %}</td>
        {% else %}
          <td class="text-end" data-bs-toggle="tooltip" data-bs-html="true" title="P value: {{ '%.3e' % variant.p_value }}<br>
            {% if variant.padjust %} Adjusted P-value (Outrider) {{ '%.3e' % variant.padjust }} {% elif variant.p_adjust_gene %} Adjusted P-value (Fraser) {{ '%.3e' % variant.p_adjust_gene }}{% endif %}
            ">{{ '%.3e' % variant.p_value }}</td>
        {% endif %}
        <td>{% for sample in variant.samples %}
            {% if sample.genotype_call != "./." %}
              <div>{{ sample.display_name }}</div>
            {% endif %}
          {% endfor %}
        </td>

        <td class="text-end">{{ variant.chromosome }}</td>
        <td class="text-end"><span style="white-space: nowrap;">{{ variant.position|human_longint|safe }}</span>-<span style="white-space: nowrap;">{{ variant.end|human_longint|safe }}</span>
          <button type="button" class="fa fa-copy btn-xs js-tooltip js-copy"
            style="background-color: Transparent;outline:none; border: none;" data-bs-toggle="tooltip" data-bs-placement="bottom" data-copy="{{ variant.chromosome }}:{{ variant.position }}-{{ variant.end }}" title="Copy to clipboard">
          </button>
        {% if case.bam_files %}
          <a class="btn btn-secondary btn-sm text-white" href="{{url_for('alignviewers.igv', institute_id=institute['_id'], case_name=case['display_name'], omics_variant_id=variant['omics_variant_id'])}}" rel="noopener" target="_blank">IGV gDNA</a>
        {% else %}
          <span data-bs-toggle="tooltip" title="BAM file(s) missing"><button class="btn btn-secondary btn-sm" disabled><i class="fa fa-times-circle fa-fw me-1"></i>IGV gDNA</button></span>
        {% endif %}
        {% if case.has_rna_tracks %}
          {{ splice_junctions_button(institute._id, case, None, variant.omics_variant_id) }}
        {% endif %}
      </tr>
    {% else %}
      <tr>
        <td colspan="9">
          No matching variants
        </td>
      </tr>
    {% endfor %}
{% endblock %}

{% block scripts %}
  {{ super() }}
  {{ variant_scripts() }}
{% endblock %}

{% macro outlier_filters(form, institute, case, filters) %}
<input type="hidden" name="variant_type" value="{{ form.variant_type.data }}">
<div class="row">
  <div class="col-2">
    <span>{{ form.gene_panels.label(class="control-label", data_bs_toggle="tooltip", data_bs_placement="left", title="This list can be modified from the institute settings page. Latest panel version is used in variants filtering.") }}</span>
    <span style="float:right;">{{ form.gene_panels_exclude.label(class="control-label", data_bs_toggle="tooltip", data_bs_placement="left", title="Check this box to exclude from the search any gene listed in selected 'Gene Panels', 'Symbol file' or provided in the 'HGNC Symbols/Ids' field.") }} {{form.gene_panels_exclude}}</span>
    {{ form.gene_panels(class="selectpicker", data_style="btn-secondary") }}
  </div>
  <div class="col-2">
    {{ form.hgnc_symbols.label(class="control-label") }}
    {{ form.hgnc_symbols(class="form-control") }}
  </div>
  <div class="col-1 align-self-end">
    <div class="btn-group d-flex">
      <a class="btn btn-secondary text-white" href="{{ url_for('omics_variants.outliers', institute_id=institute._id,
        case_name=case.display_name, variant_type=form.variant_type.data,
        gene_panels=['hpo']) }}">HPO gene list</a>
    </div>
  </div>
  <div class="col-1">
    {{ form.svtype.label(class="control-label") }}
    {{ form.svtype(class="form-control selectpicker", data_style="btn-secondary") }}
  </div>
  <div class="col-1">
    {{ form.category_pop_freq.label(class="control-label", **{'data-bs-toggle': 'tooltip', 'title':'Methbat category population frequency'}) }}
    {{ form.category_pop_freq(class="form-control") }}
  </div>
  <div class="col-1">
    {{ form.p_value.label(class="control-label", **{'data-bs-toggle': 'tooltip', 'title':'Un-adjusted P-value'}) }}
    {{ form.p_value(class="form-control") }}
  </div>
  <div class="col-1">
    {{ form.padjust.label(class="control-label", **{'data-bs-toggle': 'tooltip', 'title':'Outrider adjusted P-value'}) }}
    {{ form.padjust(class="form-control") }}
  </div>
  <div class="col-1">
    {{ form.p_adjust_gene.label(class="control-label", **{'data-bs-toggle': 'tooltip', 'title':'Fraser gene adjusted P-value'}) }}
    {{ form.p_adjust_gene(class="form-control") }}
  </div>
  <div class="col-2">
    {{ form.methbat_significance.label(class="control-label") }}
    {{ form.methbat_significance(class="form-control selectpicker", data_style="btn-secondary", disabled=not is_methylation) }}
  </div>
</div>
<div class="row">
  <div class="col-2">
    {{ form.chrom.label(class="control-label") }}
    {{ form.chrom(class="selectpicker", data_style="btn-secondary") }}
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col">
        {{ wtf.form_field(form.start) }}
      </div>
      <div class="col">
        {{ wtf.form_field(form.end) }}
      </div>
      <div class="col">
      {{ wtf.form_field(form.cytoband_start) }}
      </div>
      <div class="col">
        {{ wtf.form_field(form.cytoband_end) }}
      </div>
    </div>
  </div>
  <div class="col-1">
    {{ form.l2fc.label(class="control-label", **{'data-bs-toggle': 'tooltip', 'title':'Absolute log2 fold change'}) }}
    {{ form.l2fc(class="form-control") }}
  </div>
  <div class="col-1">
    {{ form.delta_psi.label(class="control-label", **{'data-bs-toggle': 'tooltip', 'title':'Absolute ΔΨ value'}) }}
    {{ form.delta_psi(class="form-control") }}
  </div>

</div>
<div class="row" style="margin-top:20px;">
    <div class="col-4">
      {{ form.filter_variants(class="btn btn-primary form-control", onclick="resetPage()") }}
    </div>
    <div class="col-4">
      {{ form.clinical_filter(class="btn btn-secondary form-control", onclick="resetPage()") }}
    </div>
    <div class="col-4">
      {{ form.export(class="btn btn-warning form-control") }}
    </div>
</div>
<div class="row" style="margin-top:20px;">
  <div class="col-2">
    <a href="{{ url_for('omics_variants.outliers', institute_id=institute._id, case_name=case.display_name,
      variant_type=form.variant_type.data) }}"
      class="btn btn-secondary" style="color: #ffffff !important;">
      Reset&nbsp;filters
    </a>
  </div>
  <div class="col-6">
    {{ stash_filter_buttons(form, institute, case) }}
  </div>
  <div class="col-2 offset-2 text-end">
      <div class="btn-group" role="group">
        {{ form.sort_by(class="form-select btn btn-primary") }}
        {{ form.sort_order(class="form-select btn btn-primary") }}
      </div>
    </div>
</div>
{% endmacro %}

{% macro omics_filter_form_footer(form, result_size, total_variants, page, nvars, institute) %}
<div class="card-footer text-center">
  <div class="row">
    <div class="col-4">
      <div class="form-check d-flex justify-content-start">
        {% if institute.check_show_all_vars %}
          <input type="checkbox" class="form-check-input" name="show_unaffected" id="show_unaffected" checked disabled>
          {{ form.show_unaffected.label(class="form-check-label ms-2", **{'data-bs-toggle': 'tooltip', 'title':'Modify general institute settings to be able to edit this checkbox'}) }}
        {% else %}
          {{ form.show_unaffected(class="form-check-input") }}
          {{ form.show_unaffected.label(class="form-check-label ms-2", **{'data-bs-toggle': 'tooltip', 'title':'This filter applies only to cases with more than one sample. When this is unchecked, only variants that are predicted by callers to be present in an affected individual genotype are shown.'}) }}
        {% endif %}
      </div>
    </div>
    <div class="col-4 d-flex justify-content-center align-items-center">
      <div class="d-flex me-1 justify-content-center align-items-center">Showing page {{page}}</div>
    </div>
  </div>
</div>
{% endmacro %}