{% extends 'layout.html' %}
{% block head %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>
    <script>
         $( document ).ready(function() {
                document.getElementById("defaultOpen").click();


            });
    </script>
    <script>  
        function openPage(pageName, elmnt, color) {
        // Hide all elements with class="tabcontent" by default */
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            // console.log(i)
            tabcontent[i].style.display = "none";
        }

        // Remove the background color of all tablinks/buttons
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].style.backgroundColor = "";
        }

        elmnt.style.backgroundColor = color;
        }


        </script>  
    <script> function error(){console.log('error')} </script>

    <style>
         /* Style the tab content */
        .tabcontent {
          display: none;
          padding: 6px 12px;
          border: 1px solid #ccc;
          border-top: none;
        }
        #viewport {
                width: 500px;
                height: 500px;
                border: 1px solid gray;
            }
    </style>

    <script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>
{% endblock head %}

{% block content %}
    <div class="container-fluid" align="center" style="padding: 2px">


        <div id = "shape-viewer" class="row container-fluid" style="border: 1px solid black; border-radius: 4px; margin: 2px;">
            <div class="col-sm-12" style="background:#33333333;">
                <p>Example alignment and their functional inference </p>
            </div>
            <div class="col-sm-12" >
            <br>
            <p align="left">The final correspondence examined the protein MAO-A derived from humans (PDB code: 2bxs) and from rats (PDB code: 1o5w), both bound to clorgyline. Despite minor differences in cavity volume, the binding sites share conserved residues. The Sinkhorn-derived EMD score for this pair was 4.75, while the RMSD was 1.63 Å. Both values are relatively low, demonstrating the method's ability to detect structural conservation across species. Further, there were fewer errors in the correspondences, defined as lines being closer together and not matched across the cavity. This occurs because, in highly similar sites, key functional residues are already well aligned, reducing the need to match atoms across the cavity to establish correspondence.</p>

            <div style="max-width: 450px; max-height: 400px;">
                    <img src="static/2bxs_1o5w.png" style="width: 100%; height: auto;" alt="SiteContext sample page">
                </div>
            <p><b>Figure 1:</b> The correspondences between atoms in sites belonging to MAO-A (2bxs) and MAO-A (1o5w).</p>
            </br>
            <p align="left">LSD1 (PDB code: 2z3y), a protein implicated in prostate cancer [1], and human-derived MAO-A (PDB code: 2bxr), associated with Alzheimer's disease, were compared. The two sites share structural similarities but differ in the types of residues within the binding site. This pair was classified as dissimilar, as experimental evidence supports this distinction—LSD1 was shown to bind an inhibitor, whereas MAO-A did not. The proposed method successfully captured subtle differences arising from variations in atomic structure among the differing residues. The overall matching cost and RMSD for this pair were 8.66 and 2.54 Å, respectively—both higher than those of site pairs classified as similar. Notably, there was a high frequency of atoms matched across the cavity, which is less common in similar pairs. </p>
            <div style="max-width: 450px; max-height: 400px;">
                    <img src="static/2z3y_2bxr.png" style="width: 100%; height: auto;" alt="SiteContext sample page">
                </div>
            <p><b>Figure 2:</b> The correspondences between atoms in sites belonging to LSD1 (2z3y) and MAO-A (2bxr).</p>
            <div align="center">
            <p >Reference</p>
            <ol>

            <li align="left">Ehrt, C., Brinkjost, T., & Koch, O. (2016). Impact of binding site comparisons on medicinal chemistry and rational molecular design. Journal of Medicinal Chemistry, 59(9), 4121–4151. https://doi.org/10.1021/acs.jmedchem.6b00078 </li>

            </ol>
            </div>
            </div>


        </div>
        <div id = "shape-viewer" class="row container-fluid" style="border: 1px solid black; border-radius: 4px; margin: 2px;">
            <div class="col-sm-12" style="background:#33333333;">
                <p>Structure Correspondence Viewer </p>
            </div>
            <div class="col-sm-12">

                <iframe src="static/3Dmol_files/3Dmol_viewer_2bxsA.html" style="width:100%; height:500px;overflow:auto;">
                    Your browser doesn't support iframes
                </iframe>
            </div>


</br>

             <div class="col-sm-12">

                <iframe src="static/3Dmol_files/3Dmol_viewer_1o5wA.html" style="width:100%; height:500px;overflow:auto;">
                    Your browser doesn't support iframes
                </iframe>
            </div>
            </br>

             <div class="col-sm-12">

                <iframe src="static/3Dmol_files/3Dmol_viewer_2z3yA.html" style="width:100%; height:500px;overflow:auto;">
                    Your browser doesn't support iframes
                </iframe>
            </div>
            </br>

             <div class="col-sm-12">

                <iframe src="static/3Dmol_files/3Dmol_viewer_2bxrA.html" style="width:100%; height:500px;overflow:auto;">
                    Your browser doesn't support iframes
                </iframe>
            </div>
    </div>
</div>

{% endblock content %}
