diff --git a/ippisite/ippidb/static/css/compounds_list.css b/ippisite/ippidb/static/css/compounds_list.css
index 56059a5321b2766d3f02cc2a5629f5e9dd645900..7d5c5a73dc6d77d69bb3415da4000a65dac6b87b 100644
--- a/ippisite/ippidb/static/css/compounds_list.css
+++ b/ippisite/ippidb/static/css/compounds_list.css
@@ -206,6 +206,14 @@ Description: IPPI-DB Theme
font-size: 16px;
}
+.table th, td {
+ border-right: 1px solid #dee2e6;
+}
+
+.col_width {
+ width: 20%;
+}
+
.card_title {
font-family: "BrandonGrotesqueBld";
}
@@ -221,7 +229,7 @@ Description: IPPI-DB Theme
.compound_2D {
position: fixed;
- width: 320px;
+ display: flex;
}
.fix-compound_2D {
diff --git a/ippisite/ippidb/templates/compound_card.html b/ippisite/ippidb/templates/compound_card.html
index afbce3cd87e55cbe12d892ca3ddc6269da94c848..6459c921fa0c45449aab7d977b78660313d7fda8 100644
--- a/ippisite/ippidb/templates/compound_card.html
+++ b/ippisite/ippidb/templates/compound_card.html
@@ -26,264 +26,290 @@
{{ compound.id }}{% endblock %}
</div>
</nav>
- <div class="container-fluid inner-wrap">
- <div class="row flex-xl-nowrap {% if compound.is_validated is False %}bg-warning{% endif %}">
- <h1 class="page-title">Compound {{ compound.id }}</h1>
- {% if compound.is_validated is False %}
- <h3 class="ml-2 font-italic">This compound has not been validated by a curator yet, data might be incomplete or
- inaccurate</h3>
- {% endif %}
+ <div class="container-fluid inner-wrap compound_header_title" id="compound_header_title" style="width: 50%;">
+ <div class="row" style="display: flex;">
+ {% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile %}
+ <div class="{% if compound.is_validated is False %}bg_warning{% endif %}" style="margin: auto;">
+ <h1 class="page-title">Compound {{ compound.id }}</h1>
+ {% if compound.is_validated is False %}
+ <h3 class="ml-2">This compound has not been validated by a curator yet, data might be incomplete or
+ inaccurate</h3>
+ {% endif %}
+ </div>
</div>
- <div class="row">
- <div class="tab-content" id="tabContent">
- <div class="tab-pane fade show active" id="compound" role="tabpanel" aria-labelledby="compound-tab">
- <div class="card">
- <div class="card-body">
- {% include "compound_l_item.html" with compound=compound show_detail=True %}
- </div>
+ </div>
+ <div class="top">
+
+ </div>
+ <div class="row" style="display: inline-block;height:auto;">
+ <div class="tab-content" id="tabContent">
+ <div class="tab-pane fade show active" id="compound" role="tabpanel" aria-labelledby="compound-tab">
+ <div class="card">
+ <div class="card-body">
+ {% include "compound_l_item.html" with compound=compound show_detail=True %}
</div>
</div>
- <div class="tab-pane fade" id="physicochemistry" role="tabpanel" aria-labelledby="physicochemistry-tab">
- <div class="row d-flex justify-content-center">
- <div class="col-sm-12 col-md-9" style="margin: 10px;">
- <h5 class="card_title">Physicochemical filters</h5>
- <div>
- <table class="table table-sm col-sm-12 col-md-6 card_border">
- <thead>
- <tr>
- <th scope="col" class="card_title">Descriptor</th>
- <th scope="col" class="card_title">Lipinski's RO5</th>
- <th scope="col" class="card_title">Veber</th>
- <th scope="col" class="card_title">Pfizer's 3/75</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th scope="row">Global</th>
- <td class="{% status_class compound.lipinsky %}" title="at least 3 criteria ok"></td>
- <td class="{% status_class compound.veber %}" title="RB and HBA+HBD or TPSA ok"></td>
- <td class="{% status_class compound.pfizer %}" title="AlogP and TPSA ok"></td>
- </tr>
- <tr>
- <th scope="row">MW</th>
- <td class="text-center {% status_class compound.lipinsky_mw %}"
- title="Molecular weight <= 500g/mol">
- {% if compound.molecular_weight is not None %}
- {{ compound.molecular_weight }} g/mol
- {% else %}
- not available
- {% endif %}
+ </div>
+ <div class="tab-pane fade" id="physicochemistry" role="tabpanel" aria-labelledby="physicochemistry-tab">
+ <div class="row d-flex justify-content-center">
+ <div class="col-sm-12 col-md-9" style="margin: 10px;">
+ <h5 class="card_title">Physicochemical filters</h5>
+ <div>
+ <table class="table table-sm col-sm-12 col-md-6 card_border" style="text-align: center;">
+ <thead>
+ <tr>
+ <th scope="col" class="card_title col_width"></th>
+ <th scope="col" class="card_title col_width">Descriptor</th>
+ <th scope="col" class="card_title col_width">Lipinski's RO5</th>
+ <th scope="col" class="card_title col_width">Veber</th>
+ <th scope="col" class="card_title col_width">Pfizer's 3/75</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">Compliance</th>
+ <td></td>
+ <td class="{% status_class compound.lipinsky %}" title="at least 3 criteria ok"></td>
+ <td class="{% status_class compound.veber %}" title="RB and HBA+HBD or TPSA ok"></td>
+ <td class="{% status_class compound.pfizer %}" title="AlogP and TPSA ok"></td>
+ </tr>
+ <tr>
+ <th scope="row">MW</th>
+ <td>{% if compound.molecular_weight is not None %}
+ {{ compound.molecular_weight }} g/mol
+ {% else %}
+ not available
+ {% endif %}</td>
+ <td class="text-center {% status_class compound.lipinsky_mw %}"
+ title="Molecular weight <= 500g/mol">
+
+ </td>
+ <td class="table-light"></td>
+ <td class="table-light"></td>
+ </tr>
+ <tr>
+ <th scope="row">HBA</th>
+ <td>
+ {{ compound.nb_acceptor_h | default_if_none:"not available" }}</td>
+ <td class="text-center {% status_class compound.lipinsky_hba %}" title="HBA <= 10"></td>
+ <td class="table-light"></td>
+ <td class="table-light"></td>
+ </tr>
+ <tr>
+ <th scope="row">HBD</th>
+ <td>
+ {{ compound.nb_donor_h | default_if_none:"not available" }}</td>
+ <td class="text-center {% status_class compound.lipinsky_hbd %}" title="HBD <= 5"></td>
+ <td class="table-light"></td>
+ <td class="table-light"></td>
+ </tr>
+ <tr>
+ <th scope="row">HBA + HBD</th>
+ <td>{{ compound.hba_hbd | default_if_none:"not available" }}</td>
+ <td class="table-light"></td>
+ <td class="text-center {% status_class compound.veber_hba_hbd %}" title="HBD + HBA <= 12">
</td>
- <td class="table-light"></td>
- <td class="table-light"></td>
- </tr>
- <tr>
- <th scope="row">HBA</th>
- <td class="text-center {% status_class compound.lipinsky_hba %}" title="HBA <= 10">
- {{ compound.nb_acceptor_h | default_if_none:"not available" }}</td>
- <td class="table-light"></td>
- <td class="table-light"></td>
- </tr>
- <tr>
- <th scope="row">HBD</th>
- <td class="text-center {% status_class compound.lipinsky_hbd %}" title="HBD <= 5">
- {{ compound.nb_donor_h | default_if_none:"not available" }}</td>
- <td class="table-light"></td>
- <td class="table-light"></td>
- </tr>
- <tr>
- <th scope="row">HBA + HBD</th>
- <td class="table-light"></td>
- <td class="text-center {% status_class compound.veber_hba_hbd %}" title="HBD + HBA <= 12">
- {{ compound.hba_hbd | default_if_none:"not available" }}</td>
- <td class="table-light"></td>
- </tr>
- <tr>
- <th scope="row">AlogP</th>
- <td class="text-center {% status_class compound.lipinsky_a_log_p %}" title="AlogP <= 5">
- {{ compound.a_log_p | default_if_none:"not available" }}</td>
- <td class="table-light"></td>
- <td class="text-center {% status_class compound.pfizer_a_log_p %}" title="AlogP <= 3">
- {{ compound.a_log_p | default_if_none:"not available" }}</td>
- </tr>
- <tr>
- <th scope="row">TPSA</th>
- <td class="table-light"></td>
- <td class="text-center {% status_class compound.veber_tpsa %}" title="TPSA <= 140">
- {{ compound.tpsa | default_if_none:"not available" }}</td>
- <td class="text-center default_if_none:" not available" }}</td> </tr> <tr>
- <th scope="row">RB</th>
- <td class="table-light"></td>
- <td class="text-center {% status_class compound.veber_rb %}" title="RB <= 10">
- {{ compound.nb_rotatable_bonds | default_if_none:"not available"}}</td>
- <td class="table-light"></td>
- </tr>
- </tbody>
- </table>
- </div>
+ <td class="table-light"></td>
+ </tr>
+ <tr>
+ <th scope="row">AlogP</th>
+ <td>{{ compound.a_log_p | default_if_none:"not available" }}</td>
+ <td class="text-center {% status_class compound.lipinsky_a_log_p %}" title="AlogP <= 5">
+ </td>
+ <td class="table-light"></td>
+ <td class="text-center {% status_class compound.pfizer_a_log_p %}" title="AlogP <= 3">
+ </td>
+ </tr>
+ <tr>
+ <th scope="row">TPSA</th>
+ <td>{{ compound.tpsa | default_if_none:"not available" }}</td>
+ <td class="table-light"></td>
+ <td class="text-center {% status_class compound.veber_tpsa %}" title="TPSA <= 140">
+ </td>
+ <td class="text-center default_if_none:" not available" }}</td> </tr> <tr>
+ <th scope="row">RB</th>
+ <td>{{ compound.nb_rotatable_bonds | default_if_none:"not available"}}</td>
+ <td class="table-light"></td>
+ <td class="text-center {% status_class compound.veber_rb %}" title="RB <= 10">
+ </td>
+ <td class="table-light"></td>
+ </tr>
+ </tbody>
+ </table>
</div>
- <div class="col-sm-12 col-md-9" style="margin: 10px;">
- <h5 class="card_title">Radar chart</h5>
- <div class="card_border">
- {% if compound.molecular_weight is not None %}
- <canvas id="radar"></canvas>
- <script>
- drawCompoundDescriptorRadarChart('radar', {{ compound.molecular_weight }}, {{ compound.a_log_p }}, {{ compound.nb_donor_h }}, {{ compound.nb_acceptor_h }}, {{ compound.tpsa }}, {{ compound.nb_rotatable_bonds }}, {{ compound.nb_benzene_like_rings }}, {{ compound.fsp3 }}, {{ compound.nb_chiral_centers }});
- </script>
- {% else %}
- <p class="text-secondary">Compound properties unavailable</p>
- {% endif %}
- </div>
+ </div>
+ <div class="col-sm-12 col-md-9" style="margin: 10px;">
+ <h5 class="card_title">Radar chart</h5>
+ <div class="card_border">
+ {% if compound.molecular_weight is not None %}
+ <canvas id="radar"></canvas>
+ <script>
+ drawCompoundDescriptorRadarChart('radar', {{ compound.molecular_weight }}, {{ compound.a_log_p }}, {{ compound.nb_donor_h }}, {{ compound.nb_acceptor_h }}, {{ compound.tpsa }}, {{ compound.nb_rotatable_bonds }}, {{ compound.nb_benzene_like_rings }}, {{ compound.fsp3 }}, {{ compound.nb_chiral_centers }});
+ </script>
+ {% else %}
+ <p class="text-secondary">Compound properties unavailable</p>
+ {% endif %}
</div>
</div>
- <div class="row d-flex justify-content-center">
- <div class="col-sm-12 col-md-9" style="margin: 10px;">
- <h5 class="card_title">PCA : iPPI-DB chemical space</h5>
- <div class="card_border">
+ </div>
+ <div class="row d-flex justify-content-center">
+ <div class="col-sm-12 col-md-9" style="margin: 10px;">
+ <h5 class="card_title">PCA : iPPI-DB chemical space</h5>
+ <div class="card_border">
- <canvas id="pca_biplot"></canvas>
- <script>
- drawCompoundsBiplotChart('pca_biplot', prepareCompoundFamilyBiplotData({{ compound.id }}, '{{ compound.best_activity_ppi_family_name|default_if_none:"No target family identified" }}', {{ pca_biplot_data | safe }}), 'physicochemistry');
- </script>
- </div>
+ <canvas id="pca_biplot"></canvas>
+ <script>
+ drawCompoundsBiplotChart('pca_biplot', prepareCompoundFamilyBiplotData({{ compound.id }}, '{{ compound.best_activity_ppi_family_name|default_if_none:"No target family identified" }}', {{ pca_biplot_data | safe }}), 'physicochemistry');
+ </script>
</div>
- <div class="col-sm-12 col-md-7" style="margin: 10px;">
- <h5 class="card_title">PCA : Correlation circle</h5>
- <div class="card_border">
- <img src="data:image/png;base64,{{ pca_biplot_cc }}" style="width: 100%; height:auto" \>
- </div>
+ </div>
+ <div class="col-sm-12 col-md-7" style="margin: 10px;">
+ <h5 class="card_title">PCA : Correlation circle</h5>
+ <div class="card_border">
+ <img src="data:image/png;base64,{{ pca_biplot_cc }}" style="width: 100%; height:auto" \>
</div>
</div>
</div>
- <div class="tab-pane fade" id="pharmacology" role="tabpanel" aria-labelledby="pharmacology-tab">
- <div class="row d-flex justify-content-center">
- <div class="col-sm-12 col-md-9" style="margin: 10px;">
- <h5 class="card_title">Efficiencies: iPPI-DB biplot LE versus LLE</h5>
- <div class="card_border">
- <canvas id="le_lle_biplot"></canvas>
- <script>
- drawCompoundsBiplotChart('le_lle_biplot', prepareCompoundFamilyBiplotData({{ compound.id }}, '{{ compound.best_activity_ppi_family_name|default_if_none:"No target family identified" }}', {{ le_lle_biplot_data | safe }}), 'pharmacology');
- </script>
- </div>
+ </div>
+ <div class="tab-pane fade" id="pharmacology" role="tabpanel" aria-labelledby="pharmacology-tab">
+ <div class="row d-flex justify-content-center">
+ <div class="col-sm-12 col-md-9" style="margin: 10px;">
+ <h5 class="card_title">Efficiencies: iPPI-DB biplot LE versus LLE</h5>
+ <div class="card_border">
+ <canvas id="le_lle_biplot"></canvas>
+ <script>
+ drawCompoundsBiplotChart('le_lle_biplot', prepareCompoundFamilyBiplotData({{ compound.id }}, '{{ compound.best_activity_ppi_family_name|default_if_none:"No target family identified" }}', {{ le_lle_biplot_data | safe }}), 'pharmacology');
+ </script>
</div>
</div>
- <div class="row d-flex justify-content-center">
- <div class="col-sm-12 col-md-9" style="margin: 10px;">
- <h5 class="card_title">Summary</h5>
- <div class="card_border row" style="text-align: center;">
- <div class="col-md-4">
- <h6 class="card_title">Bibliographic ressources</h6>
- <p>{{ compound.biblio_refs.count }}</p>
- </div>
- <div class="col-md-4">
- <h6 class="card_title">Biochemical tests</h6>
- <p>{{ compound.bioch_tests_count }}</p>
- </div>
- <div class="col-md-4">
- <h6 class="card_title">Cellular tests</h6>
- <p>{{ compound.cell_tests_count }}</p>
- </div>
+ </div>
+ <div class="row d-flex justify-content-center">
+ <div class="col-sm-12 col-md-9" style="margin: 10px;">
+ <h5 class="card_title">Summary</h5>
+ <div class="card_border row" style="text-align: center;">
+ <div class="col-md-4">
+ <h6 class="card_title">Bibliographic ressources</h6>
+ <p>{{ compound.biblio_refs.count }}</p>
+ </div>
+ <div class="col-md-4">
+ <h6 class="card_title">Biochemical tests</h6>
+ <p>{{ compound.bioch_tests_count }}</p>
+ </div>
+ <div class="col-md-4">
+ <h6 class="card_title">Cellular tests</h6>
+ <p>{{ compound.cell_tests_count }}</p>
</div>
</div>
</div>
- <div class="row d-flex justify-content-center">
- <div class="col-sm-12 col-md-12" style="margin: 10px;">
- <h5 class="card_title">Pharmacological data</h5>
- <div class="card_border">
- <table class="table table-sm col-sm-12 col-md-12">
- <thead style="text-align: center;">
- <tr>
- <th class="card_title" scope="col">Bibliography</th>
- <th class="card_title" scope="col" title="Compound name in publication">Name</th>
- <th class="card_title" scope="col">Target</th>
- <th class="card_title" scope="col">Competition</th>
- <th class="card_title" scope="col">Assay type</th>
- <th class="card_title" scope="col">Assay name</th>
- <th class="card_title" scope="col">Cell line</th>
- <th class="card_title" scope="col">Activity type</th>
- <th class="card_title" scope="col">Activity</th>
- </tr>
- </thead>
- <tbody style="text-align: center;">
- {% for car in compound.compoundactivityresult_set.all %}
- <tr {% if car.is_best %}class="table-primary" {% endif %}>
- <td>{% include "biblio_simplelink.html" with bibliography=car.test_activity_description.biblio %}
- </td>
- {% for rcb in car.test_activity_description.biblio.refcompoundbiblio_set.all %}
- {% if rcb.compound == compound %}
- <td>{{ rcb.compound_name }}</td>
- {% endif %}
- {% endfor %}
- <td>{{ car.test_activity_description.protein_domain_bound_complex.name }} <br /><a
- href="http://www.uniprot.org/uniprot/{{ car.test_activity_description.protein_domain_bound_complex.protein.uniprot_id }}"
- target="_blank">{{ car.test_activity_description.protein_domain_bound_complex.protein.uniprot_id }}</a>
- </td>
- <td>{{ car.test_activity_description.protein_domain_partner_complex.name }} <br /><a
- href="http://www.uniprot.org/uniprot/{{ car.test_activity_description.protein_domain_partner_complex.protein.uniprot_id }}"
- target="_blank">{{ car.test_activity_description.protein_domain_bound_complex.protein.uniprot_id }}</a>
- </td>
- <td>{{ car.test_activity_description.get_test_type_display }}</td>
- <td>{{ car.test_activity_description.test_name }}</td>
- <td>{{ car.test_activity_description.cell_line.name }}</td>
- <td>{{ car.get_activity_type_display }}</td>
- <td>{{ car.activity|floatformat:2 }}</td>
- </tr>
+ </div>
+ <div class="row d-flex justify-content-center">
+ <div class="col-sm-12 col-md-12" style="margin: 10px;">
+ <h5 class="card_title">Pharmacological data</h5>
+ <div class="card_border">
+ <table class="table table-sm col-sm-12 col-md-12">
+ <thead style="text-align: center;">
+ <tr>
+ <th class="card_title" scope="col">Bibliography</th>
+ <th class="card_title" scope="col" title="Compound name in publication">Name</th>
+ <th class="card_title" scope="col">Target</th>
+ <th class="card_title" scope="col">Competition</th>
+ <th class="card_title" scope="col">Assay type</th>
+ <th class="card_title" scope="col">Assay name</th>
+ <th class="card_title" scope="col">Cell line</th>
+ <th class="card_title" scope="col">Activity type</th>
+ <th class="card_title" scope="col">Activity</th>
+ </tr>
+ </thead>
+ <tbody style="text-align: center;">
+ {% for car in compound.compoundactivityresult_set.all %}
+ <tr {% if car.is_best %}class="table-primary" {% endif %}>
+ <td>{% include "biblio_simplelink.html" with bibliography=car.test_activity_description.biblio %}
+ </td>
+ {% for rcb in car.test_activity_description.biblio.refcompoundbiblio_set.all %}
+ {% if rcb.compound == compound %}
+ <td>{{ rcb.compound_name }}</td>
+ {% endif %}
{% endfor %}
- </tbody>
- </table>
- </div>
+ <td>{{ car.test_activity_description.protein_domain_bound_complex.name }} <br /><a
+ href="http://www.uniprot.org/uniprot/{{ car.test_activity_description.protein_domain_bound_complex.protein.uniprot_id }}"
+ target="_blank">{{ car.test_activity_description.protein_domain_bound_complex.protein.uniprot_id }}</a>
+ </td>
+ <td>{{ car.test_activity_description.protein_domain_partner_complex.name }} <br /><a
+ href="http://www.uniprot.org/uniprot/{{ car.test_activity_description.protein_domain_partner_complex.protein.uniprot_id }}"
+ target="_blank">{{ car.test_activity_description.protein_domain_bound_complex.protein.uniprot_id }}</a>
+ </td>
+ <td>{{ car.test_activity_description.get_test_type_display }}</td>
+ <td>{{ car.test_activity_description.test_name }}</td>
+ <td>{{ car.test_activity_description.cell_line.name }}</td>
+ <td>{{ car.get_activity_type_display }}</td>
+ <td>{{ car.activity|floatformat:2 }}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
</div>
</div>
-
</div>
- <div class="tab-pane fade" id="drugsimilarity" role="tabpanel" aria-labelledby="drugsimilarity-tab">
- <table class="table table-striped" style="border:1px solid #E3E3E3;">
- <thead>
- <tr>
- <th title="Tanimoto index" class="table_title">Ta</th>
- <th class="table_title">Structure</th>
- <th class="table_title">Name</th>
- <th class="table_title">Drugbank ID</th>
- </tr>
- </thead>
- <tbody>
- {% for dbct in compound.sorted_similar_drugbank_compounds %}
- <tr>
- <td>{{ dbct.tanimoto }}</td>
- <td>
- {% include "compound_smiles_draw.html" with id=dbct.drugbank_compound.id smile=dbct.drugbank_compound.canonical_smiles %}
- </td>
- <td>{{ dbct.drugbank_compound.common_name }}</td>
- <td><a target="_blank"
- href="https://www.drugbank.ca/drugs/{{ dbct.drugbank_compound.id }}">{{ dbct.drugbank_compound.id }}</a>
- </td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- </div>
- </div>
+ </div>
+ <div class="tab-pane fade" id="drugsimilarity" role="tabpanel" aria-labelledby="drugsimilarity-tab">
+ <table class="table table-striped" style="border:1px solid #E3E3E3;">
+ <thead>
+ <tr>
+ <th title="Tanimoto index" class="table_title">Ta</th>
+ <th class="table_title">Structure</th>
+ <th class="table_title">Name</th>
+ <th class="table_title">Drugbank ID</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for dbct in compound.sorted_similar_drugbank_compounds %}
+ <tr>
+ <td>{{ dbct.tanimoto }}</td>
+ <td>
+ {% include "compound_smiles_draw.html" with id=dbct.drugbank_compound.id smile=dbct.drugbank_compound.canonical_smiles %}
+ </td>
+ <td>{{ dbct.drugbank_compound.common_name }}</td>
+ <td><a target="_blank"
+ href="https://www.drugbank.ca/drugs/{{ dbct.drugbank_compound.id }}">{{ dbct.drugbank_compound.id }}</a>
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ </div>
</div>
+
</div>
- <script>
- var showTab = function (hash) {
- window.location.hash = hash;
- window.scrollTo(0, 0);
- };
- $('a.second_nav').on('shown.bs.tab', function (e) {
- showTab(e.target.hash);
- drawSmiles();
- });
- $(document).ready(function () {
- var tabHash = document.location.hash;
- console.log("tab:", tabHash);
- if ($(tabHash).length == 0) {
- tabHash = $('.second_nav.active').attr('href');
- console.log("tab:", tabHash);
- showTab(tabHash);
- }
- $('[href="' + tabHash + '"]').tab('show');
- });
- </script>
- {% endblock %}
\ No newline at end of file
+</div>
+<script>
+ var showTab = function (hash) {
+ window.location.hash = hash;
+ window.scrollTo(0, 0);
+ };
+ $('a.second_nav').on('shown.bs.tab', function (e) {
+ showTab(e.target.hash);
+ drawSmiles();
+ });
+ $(document).ready(function () {
+ var tabHash = document.location.hash;
+ if ($(tabHash).length == 0) {
+ tabHash = $('.second_nav.active').attr('href');
+ showTab(tabHash);
+ }
+ $('[href="' + tabHash + '"]').tab('show');
+ });
+</script>
+<script>
+ $("#compound_header_title").on("scroll", function (e) {
+ console.log("scroll");
+ if (this.scrollTop > 300) {
+
+ $("#compound_header_title").addClass("fix-compound_2D");
+ } else {
+ $("#compound_header_title").removeClass("fix-compound_2D");
+ }
+
+ });
+</script>
+{% endblock %}
\ No newline at end of file