{% extends "base.html" %}
{% block body %}
        {% include 'jumbotron_header.html' %}
        <script type="text/python" src="{{ url_for('static', filename='python/info.py') }}"></script>

        <!-- Form -->
        <form name="form_base" id="form_base" class="form-horizontal" role="form" action="submit" enctype="multipart/form-data" method="POST">
            <input type="hidden" id="navbar_link" name="navbar_link">
        </form>

        <!-- Accordion -->
        <div class="panel-group" id="accordion">
            <!-- Create a plot -->
            <div class="panel panel-primary panel-background panel-advanced panel-info">
                <!-- Header -->
                <div class="panel-heading panel-heading-advanced text-centered">
                    <h4 class="panel-title -with-icon">
                        <a id="info_create_plot_icon" class="heading-advanced-icon collapsed" data-toggle="collapse" data-parent="#accordion" href="#info_create_plot">Create a plot</a>
                    </h4>
                </div>
                <!-- Body -->
                <div id="info_create_plot" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="panel-body">
                            <p>
                                A plot can be generated by selecting a valid gene name or an absolute chromosomal
                                location by specifying the genomic coordinates (chromosome, start, and end). The human
                                builds available are: hg18, hg19 (default), and hg38. The plot can be extended on
                                both sides by selecting a 0, 1Kb, 5Kb, 10Kb, 50Kb (default), 100Kb, 500Kb, 1Mb range.
                                Plots can span a maximum of 5Mb genomic space.
                            </p>
                            <p>
                                From the "Features" panel 4 major track types can be loaded to obtain the desired plot.
                            </p>
                            <div>
                                <ol>
                                    <li>
                                        tracks called <span class="underline">chromatin maps</span> refer to genomic maps of regions that may be involved in gene transcription
                                        regulation. Such maps were inferred from experimental data sets such as
                                        open chromatin and histone modification profiles obtained from adult human pancreatic islets
                                        and pancreatic progenitors cell types.
                                    </li>
                                    <li>
                                        <span class="underline">transcription factors</span> tracks are maps of transcription
                                        factors binding sites obtained from Chip-seq experiments performed in human adult pancreatic
                                        islets and pancreatic progenitors.
                                    </li>
                                    <li>
                                        <span class="underline">SNPs</span> tracks include GWAS variants datasets associated
                                        to type 2 diabetes and fasting glycemia.
                                    </li>
                                    <li>
                                        an optional <span class="underline">chromatin profile</span> track can be loaded
                                        to visualize open chromatin profiles obtained from ATAC-Seq experiments performed in FACS
                                        purified alpha and beta cells.
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Description of the plot -->
            <div class="panel panel-primary panel-background panel-advanced panel-info">
                <!-- Header -->
                <div class="panel-heading panel-heading-advanced text-centered">
                    <h4 class="panel-title -with-icon">
                        <a id="info_plot_description_icon"class="heading-advanced-icon collapsed" data-toggle="collapse" data-parent="#accordion" href="#info_plot_description">Description of the plot</a>
                    </h4>
                </div>
                <!-- Body -->
                <div id="info_plot_description" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="panel-body">
                            <p>
                                The plot illustrates regulatory regions, transcription factors binding sites and
                                GWAS variants in which the sequence of the base genome is represented on the horizontal
                                axis. In the upper part of the plot a red line on the chromosome ideogram reflects the
                                portion of the chromosome displayed. Each dot represents a genomic variant, being the
                                color intensity of the dot proportional to -Log10 p-value of association,
                                as indicated on the side of the plot.
                            </p>
                            <p>
                                The rs# ID depicts the top associated variant in the locus. The black box in the middle
                                of the plot contains vertical colored bands depicting different chromatin states, open
                                chromatin classes or regulatory elements as described in the legend above the
                                plot. Black lines connecting the circles (each representing a different transcription
                                factor) to the black box, point to the genomic location of each transcription factor
                                binding site. The color intensity of such lines is proportional to the number of co-bound
                                transcription factors. Annotated genes are depicted as horizontal gray lines at the bottom
                                of the plot, with transcriptional orientation indicated by arrows. Boxes along the
                                line correspond to positions of coding exons. Islet-specific genes are shown in dark
                                grey.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Moving around -->
            <div class="panel panel-primary panel-background panel-advanced panel-info">
                <!-- Header -->
                <div class="panel-heading panel-heading-advanced text-centered">
                    <h4 class="panel-title -with-icon">
                        <a id="info_moving_around_icon" class="heading-advanced-icon collapsed" data-toggle="collapse" data-parent="#accordion" href="#info_moving_around">Moving around</a>
                    </h4>
                </div>
                <!-- Body -->
                <div id="info_moving_around" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="panel-body">
                            <p>
                                It is possible to change the coordinates of the plot by moving left or right (25%, 50%
                                and 75% of the length of the plot) with the buttons above the plot. Zooming in and out
                                is also easily done through the two buttons above the plot, which can provide 1.5x, 3x,
                                and 10x zoom in or zoom out steps.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Upload your own data -->
            <div class="panel panel-primary panel-background panel-advanced panel-info">
                <!-- Header -->
                <div class="panel-heading panel-heading-advanced text-centered">
                    <h4 class="panel-title -with-icon">
                        <a id="info_upload_your_data_icon" class="heading-advanced-icon collapsed" data-toggle="collapse" data-parent="#accordion" href="#info_upload_your_data">Upload your data</a>
                    </h4>
                </div>
                <!-- Body -->
                <div id="info_upload_your_data" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="panel-body">
                            <p>
                                Variants or regions files can be uploaded by the user for temporary display.
                                The file size of the uploaded file should not exceed 50Mb. If a file contains a
                                header, this should start with the "&#35;" symbol.
                            </p>
                            <p>
                                A <span class="underline">variant file</span> should consist of three or four tab-delimited fields.
                                Mandatory fields are those of chromosome, position, and p-value. The
                                files can also contain an optional fourth field with the names of the
                                variants. Other columns after the fourth, will be ignored. For instance:
                                <ul>
                                    <li>column 1: Chromosome, a number between 1 and 22 or the letters X, Y,
                                        preceded by the prefix 'chr' (eg. chr1, chr2....chrY)</li>
                                    <li>column 2: Position, a positive integer (eg. 32541241)</li>
                                    <li>column 3: P-value, a numerical value (eg. 0.000005)</li>
                                    <li>column 4: Name, any alphanumeric string (eg. rs9581940)</li>
                                </ul>
                            </p>
                            <p>
                                A <span class="underline">region file</span> has a typical BED file format and should be composed of at least
                                3 mandatory tab-delimited fields: chromosome, start, and end. Other columns after
                                the third, will be ignored. For instance:
                                <ul>
                                    <li>column 1: Chromosome, a number between 1 and 22 or the letters X, Y,
                                        preceded by the prefix 'chr' (eg. chr1, chr2....chrY)</li>
                                    <li>column 2: Start, a positive integer (eg. 49356749)</li>
                                    <li>column 3: End, a positive integer (eg. 51674938)</li>
                                </ul>
                            </p>
                            <p>
                                To avoid errors during the upload remember that the chromosomes should be named as
                                follow: chr1, chr2, chr3, chr4, chr5, chr6, chr7, chr8, chr9, chr10, chr11, chr12,
                                chr13, chr14, chr15, chr16, chr17, chr18, chr19, chr20, chr21, chr22, chrX, chrY.
                            </p>
                            <p>
                                The fields with positional information should only contain integer values while the
                                p-values should be numerical values.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Retrieve results -->
            <div class="panel panel-primary panel-background panel-advanced panel-info">
                <!-- Header -->
                <div class="panel-heading panel-heading-advanced text-centered">
                    <h4 class="panel-title -with-icon">
                        <a id="info_retrieve_results_icon" class="heading-advanced-icon collapsed" data-toggle="collapse" data-parent="#accordion" href="#info_retrieve_results">Retrieve results</a>
                    </h4>
                </div>
                <!-- Body -->
                <div id="info_retrieve_results" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="panel-body">
                            <p>
                                Graphical representations and text tables are available for download.
                            </p>
                            <p>
                                The plot can be downloaded as PNG (Portable Network Graphics) or as PDF (Adobe Portable
                                Document) format by clicking on the download icon above the plot. The difference between
                                the two formats is that the latter uses vector graphics.
                            </p>
                            <p>
                                A button above the plot provides a link to a UCSC browser session containing all the data
                                currently available in the Islet Regulome Browser for classic UCSC visualization. For this
                                purpose bigwig files were generated by aligning unique reads from the <a href="{{ url_for('data') }}">raw data</a>
                                using Bowtie2 (default parameters). For transcription factor binding sites and chromatin maps
                                refer to the parameters used in <a href="{{ url_for('data') }}">the original publications</a>.
                            </p>
                            <p>
                                Two tables related to the selected locus can be downloaded from the "Table" panel,
                                selectable from the top left corner of the plot page. One table contains the regulatory
                                regions, open chromatin classes or chromatin states selected for display along with
                                the transcription factors who's bind sites overlap them. The other table contains a
                                list of the variants contained in the selected locus along with their p-value of association.
                            </p>
                            <p>
                                The <span class="underline">Setting</span> panel, selectable from top left corner of the plot page, allows to
                                retrieve all the settings used to make the plot including genomic coordinates
                                genome build, SNPs datasets and feature selected.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}
