{% extends 'layout.html' %}
{% block head %}
{% endblock head %}

{% block content %}
    <div class="container-fluid" style="padding: 2%;">
        <div class="row" >
            <h2>SiteContext Usage and Test Guide</h2>
        </div>
            </br>
            <div class="col-sm-6" ><h4>Upload Data and Compaire a Pair of Moleclues</h4>
            
            <ul>
                <li>
                    Click on the thumbnail below to watch the tutorial video.<br>
                    <video  width="560px" height="315px" controls>
                    <source src="static/video/Pair_of_Molecules_tutorial.mp4" type="video/mp4"/>
                    </video>
                </li>
                <li><a href="static/run_pair_of_molecules.zip">Download</a> the example
                    dataset for comparing a pair of molecules.
                </li>
                <li>Open the drop-down menu labeled <b>"Upload Data and Run SiteContext"</b>.</li>
                <li>Select <b>"Compaire a Pair of Molecules"</b>.</li>
                <li>Choose a <b>"Feature Option"</b> from the list. </li>
                <li>Prepare a ZIP file containing two folders: set1 and set2. Each folder should contain one molecule file. The molecule in the set1 folder will be compared with the molecule in the set2 folder.</li>
                <li>Under <b>"Upload PDB data zip file"</b>, click the <b>"Browse/drop files here to upload"</b> area and select the ZIP file you prepared <b>(either the previously downloaded example or one you prepared yourself)</b>. Alternatively, drag and drop the ZIP file into the upload area.
                </li>
                <li>Click <b>"Submit"</b>.</li>
                <li>Once the computation is complete, a link will appear: <b>"Click here to view the results"</b>.
                </li>
                <li>Click the link to be directed to your results page.</li>
                <li>The viewable results from SiteContext include the similarity score and RMSD for the compared site pair.</br>
                    We also show the correspondence between atoms that exhibit the most similar environments based on the selected features. </br>
                    You can click on the pink and gray (matched) or green (unmatched) atoms to inspect their mapping. </br>
                    To reduce UI clutter, only one side of the correspondence is clickable. </li>
            </ul>
            </div>

    

            <div class="col-sm-6" ><h4>Upload Data and Compaire a Batch of Molecules</h4>
            <ul>
                <li>
                    Click on the thumbnail below to watch the tutorial video.<br>
                    <video  width="560px" height="315px" controls>
                    <source src="static/video/Batch_of_Molecules_tutorial.mp4" type="video/mp4"/>
                    </video>
                </li>
                <li><a href="static/run_batch_SiteContext_case_study_1.zip">Download</a> the example
                    dataset for comparing a batch of molecules.
                </li>
                <li>Open the drop-down menu labeled <b>"Upload Data and Run SiteContext"</b>.</li>
                <li>Select <b>"Compute a Batch of Molecules"</b>.</li>
                <li>Choose a <b>"Feature Option"</b> from the list. </li>
                <li>Prepare a ZIP file containing two folders: set1 and set2. Each folder should contain at least one and no more than 10 molecule files. Every molecule in the set1 folder will be compared with every molecule in the set2 folder. </li>

                <li>Under <b>"Upload PDB data zip file"</b>, click the <b>"Browse/drop files here to upload"</b> area and select the ZIP file you prepared <b>(either the previously downloaded example or one you prepared yourself)</b>. Alternatively, drag and drop the ZIP file into the upload area.
                </li>
                </li>
                <li>Click <b>"Submit"</b>.</li>
                <li>Once submitted, you will receive a <b>Project ID</b>. Be sure to save or note it down..</li>
                <li>Click on the <b>"Download Results"</b> button.</li>
                <li>Enter the <b>Project ID</b> into the input field labeled <b>"Download Results"</b>.</li>
                <li>Click <b>"Submit"</b> again to proceed.</li>
                <li>If your results are ready, the download will begin automatically.</li>
                <li>The results include a CSV file (similarity_scores_all.csv) containing all similarity and RMSD scores for each molecular pair.</li>
                <li>If the results are not yet available, a message will appear stating: <i>"Results for Project ID have not been generated yet"</i>.
                </li>
            </ul>

     
            </div>


            <div class="col-sm-6"> <h4 href="run-demo-SiteContext">Interactive Demo</h4>
            <ul>
            <li>
                Go to the <a href="run-demo-SiteContext">Demo</a> page.
                </li>
            </ul>
            </div>
        </div>
    </div>
{% endblock content %}
