compound_t_list.html

<table class="table table-striped">
  <thead>
    <tr>
      {% include "compound_t_colhead.html" with col_id="tanimoto" col_name="Tanimoto" col_title="Tanimoto similarity" %}
      {% include "compound_t_colhead.html" with col_id="id" col_name="#" col_title="Compound's iPPIDB ID" %}
      {% include "compound_t_colhead.html" with col_id="canonical_smiles" col_name="Structure" %}
      {% include "compound_t_colhead.html" with col_id="common_name" col_name="common name" %}
      {% include "compound_t_colhead.html" with col_id="families" col_name="PPI families" %}
      {% include "compound_t_colhead.html" with col_id="pubs" col_name="Publications" col_title="Number of available publications"%}
      {% include "compound_t_colhead.html" with col_id="available_tests" col_name="Assays" col_title="Number of available assays" %}
      {% include "compound_t_colhead.html" with col_id="compound_action_ligand_ids" col_name="PDB ligand" col_title="PDB ligand identifier"%}
      {% include "compound_t_colhead.html" with col_id="molecular_weight" col_name="MW" col_title="molecular weight (g/mol)" %}
      {% include "compound_t_colhead.html" with col_id="a_log_p" col_name="AlogP" col_title="Octanol/Water partition coefficient"%}
      {% include "compound_t_colhead.html" with col_id="nb_donor_h" col_name="HBD" col_title="Number of Hydrogen Bond Donors" %}
      {% include "compound_t_colhead.html" with col_id="nb_acceptor_h" col_name="HBA" col_title="Number of Hydrogen Bond Acceptors" %}
      {% include "compound_t_colhead.html" with col_id="tpsa" col_name="TPSA (Å2)" col_title="Topological Polar Surface Area" %}
      {% include "compound_t_colhead.html" with col_id="nb_rotatable_bonds" col_name="RB" col_title="Number of Rotatable Bonds" %}
      {% include "compound_t_colhead.html" with col_id="nb_aromatic_sssr" col_name="Ar" col_title="Number of SSSR Aromatic rings" %}
      {% include "compound_t_colhead.html" with col_id="fsp3" col_name="Fsp3" col_title="Number of Carbon sp3/ Number of Carbon" %}
      {% include "compound_t_colhead.html" with col_id="nb_chiral_centers" col_name="R/S" col_title="Number of chiral centers" %}
      {% include "compound_t_colhead.html" with col_id="le" col_name="LE" col_title="Ligand Efficiency" %}
      {% include "compound_t_colhead.html" with col_id="lle" col_name="LLE" col_title="Lipophilic Efficiency" %}
      {% include "compound_t_colhead.html" with col_id="best_activity" col_name="Best Activity" col_title="Best pXC50 Activity" %}
      <button type="button" class="btn btn-primary float-right" style="width: inherit!important" data-toggle="modal" data-target="#selectColumns">
        <i class="fa fa-columns" title="customize columns"></i>
      </button>
    </tr>
  </thead>
  <tbody>
    {% for compound in compounds %}
      <tr>
        {% if compound.tanimoto != None %}
        <td title="tanimoto similarity value">{{ compound.tanimoto }}</td>
        {% endif %}
        <td scope="col"><span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span></td>
      {% if "canonical_smiles" in fields %}
        <td scope="col" style="width:150px">{% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile width="150" height="150"%}</td>
      {% endif %}
      {% if "common_name" in fields %}
        <td scope="col">{{ compound.common_name|default_if_none:"-" }}</td>
      {% endif %}
      {% if "families" in fields %}
        <td scope="col">{% for family in compound.families %}{{ family.name }}{% if not forloop.last %}, {% endif %}{% endfor %}</td>
      {% endif %}
      {% if "pubs" in fields %}
        <td scope="col">{{ compound.pubs }}</td>
      {% endif %}
      {% if "available_tests" in fields %}
        <td scope="col">{{ compound.compoundactivityresult_set.count }}</td>
      {% endif %}
      {% if "compound_action_ligand_ids" in fields %}
        <td scope="col">{% for ligand_id in compound.compound_action_ligand_ids %}{{ ligand_id | default_if_none:""}}{% endfor %}</td>
      {% endif %}
      {% if "molecular_weight" in fields %}
        <td scope="col">{{ compound.molecular_weight}}</td>
      {% endif %}
      {% if "a_log_p" in fields %}
        <td scope="col">{{ compound.a_log_p }}</td>
      {% endif %}
      {% if "nb_donor_h" in fields %}
        <td scope="col">{{ compound.nb_donor_h }}</td>
      {% endif %}
      {% if "nb_acceptor_h" in fields %}
        <td scope="col">{{ compound.nb_acceptor_h }}</td>
      {% endif %}
      {% if "tpsa" in fields %}
        <td scope="col">{{ compound.tpsa }}</td>
      {% endif %}
      {% if "nb_rotatable_bonds" in fields %}
        <td scope="col">{{ compound.nb_rotatable_bonds }}</td>
      {% endif %}
      {% if "nb_aromatic_sssr" in fields %}
        <td scope="col">{{ compound.nb_aromatic_sssr }}</td>
      {% endif %}
      {% if "fsp3" in fields %}
        <td scope="col">{{ compound.fsp3|floatformat:2 }}</td>
      {% endif %}
      {% if "nb_chiral_centers" in fields %}
        <td scope="col">{{ compound.nb_chiral_centers }}</td>
      {% endif %}
      {% if "le" in fields %}
        <td scope="col">{{ compound.le|floatformat:2 }}</td>
      {% endif %}
      {% if "lle" in fields %}
        <td scope="col">{{ compound.lle|floatformat:2 }}</td>
      {% endif %}
      {% if "best_activity" in fields %}
        <td scope="col">{{ compound.best_activity|floatformat:2 }}</td>
      {% endif %}
      </tr>
    {% endfor %}
  </tbody>
</table>

<!-- Modal for selection of table columns to be displayed-->
<div class="modal fade" id="selectColumns" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Table columns</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <label><input type="checkbox" name="field" value="canonical_smiles" class="mr-1" {% if 'canonical_smiles' in fields %}checked="checked"{% endif %} />Structure</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="common_name" class="mr-1" {% if 'common_name' in fields %}checked="checked"{% endif %} />Common name</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="families" class="mr-1" {% if 'families' in fields %}checked="checked"{% endif %} />PPI families</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="pubs" class="mr-1" {% if 'pubs' in fields %}checked="checked"{% endif %} />Available publications</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="available_tests" class="mr-1" {% if 'available_tests' in fields %}checked="checked"{% endif %} />Available tests</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="compound_action_ligand_ids" class="mr-1" {% if 'compound_action_ligand_ids' in fields %}checked="checked"{% endif %} />PDB ligands</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="molecular_weight" class="mr-1" {% if 'molecular_weight' in fields %}checked="checked"{% endif %} />Molecular Weight</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="a_log_p" class="mr-1" {% if 'a_log_p' in fields %}checked="checked"{% endif %} />AlogP</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="nb_donor_h" class="mr-1" {% if 'nb_donor_h' in fields %}checked="checked"{% endif %} />Number of hydrogen bond donors</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="nb_acceptor_h" class="mr-1" {% if 'nb_acceptor_h' in fields %}checked="checked"{% endif %} />Number of hydrogen bond acceptors</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="tpsa" class="mr-1" {% if 'tpsa' in fields %}checked="checked"{% endif %} />Topological Polar Surface Area (TPSA)</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="nb_rotatable_bonds" class="mr-1" {% if 'nb_rotatable_bonds' in fields %}checked="checked"{% endif %} />Number of rotatable bonds</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="nb_aromatic_sssr" class="mr-1" {% if 'nb_aromatic_sssr' in fields %}checked="checked"{% endif %} />Number of aromatic Smallest Set of System Rings (SSSR)</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="fsp3" class="mr-1" {% if 'fsp3' in fields %}checked="checked"{% endif %} />Number of Carbon sp3 / Number of Carbon</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="nb_chiral_centers" class="mr-1" {% if 'nb_chiral_centers' in fields %}checked="checked"{% endif %} />Number of chiral centers</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="le" class="mr-1" {% if 'le' in fields %}checked="checked"{% endif %} />Ligand Efficiency</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="lle" class="mr-1" {% if 'lle' in fields %}checked="checked"{% endif %} />Lipophilic Efficiency</label>
        </div>
        <div class="row">
          <label><input type="checkbox" name="field" value="best_activity" class="mr-1" {% if 'best_activity' in fields %}checked="checked"{% endif %} />Best pXC50 Activity</label>
        </div>
      </div>
      <div class="modal-footer">
        <script>
        function changeFieldsSelection(){
            var selectedFields = $('input[name=field]:checked').map(function(_, el) { return $(el).val(); }).get();
            modifyUrl('fields', selectedFields);
        }
        </script>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="changeFieldsSelection();">Change columns</button>
      </div>
    </div>
  </div>
</div>