From 47792d07c973f4a18fa11d7358600917a29fe9e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Herv=C3=A9=20=20MENAGER?= <herve.menager@pasteur.fr>
Date: Mon, 29 Jan 2018 22:34:31 +0100
Subject: [PATCH] display compounds list as a grid of vignettes
Former-commit-id: 495e7ad856b90ef7d40ad1fa5bb279346a8a818a
---
ippisite/ippidb/static/images/cross.svg | 4 +++
ippisite/ippidb/templates/base.html | 1 +
.../ippidb/templates/compound_grid_item.html | 34 +++++++++++++++++++
ippisite/ippidb/templates/compound_list.html | 14 ++++++--
...abstract.html => compound_table_item.html} | 0
ippisite/ippidb/templates/pubchem_img.html | 2 +-
ippisite/ippidb/views.py | 2 +-
7 files changed, 52 insertions(+), 5 deletions(-)
create mode 100644 ippisite/ippidb/static/images/cross.svg
create mode 100644 ippisite/ippidb/templates/compound_grid_item.html
rename ippisite/ippidb/templates/{compound_abstract.html => compound_table_item.html} (100%)
diff --git a/ippisite/ippidb/static/images/cross.svg b/ippisite/ippidb/static/images/cross.svg
new file mode 100644
index 00000000..d7e1b1b5
--- /dev/null
+++ b/ippisite/ippidb/static/images/cross.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="Layer_1" width="15" height="15" viewBox="0 0 15.001 14.999" overflow="visible" xml:space="preserve" sodipodi:version="0.32" inkscape:version="0.43" sodipodi:docname="AS-skrzyzowanie.svg" sodipodi:docbase="C:\Documents and Settings\Michał\Pulpit\drogi"><metadata id="metadata12"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs10"/><sodipodi:namedview inkscape:window-height="721" inkscape:window-width="995" inkscape:pageshadow="2" inkscape:pageopacity="0.0" borderopacity="1.0" bordercolor="#666666" pagecolor="#ffffff" id="base" inkscape:zoom="37" inkscape:cx="7.5" inkscape:cy="7.5" inkscape:window-x="25" inkscape:window-y="-4" inkscape:current-layer="Layer_1" showguides="true" inkscape:guide-bbox="true" inkscape:guide-points="true"/>
+<g id="g1332" style="fill:#000000;fill-opacity:1;stroke:none" transform="matrix(0.260054,0,0,0.260054,1.040286,10.10348)"/>
+<path style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 11.374823,1.1413564 L 13.849862,3.6163952 L 9.9605151,7.5057412 L 13.849862,11.395089 L 11.374823,13.870128 L 7.4854771,9.9807801 L 3.5961301,13.870128 L 1.1210911,11.395089 L 5.0104381,7.5057412 L 1.1210911,3.6163952 L 3.5961301,1.1413564 L 7.4854761,5.0307032 L 11.374823,1.1413564 z " id="path2224" sodipodi:nodetypes="ccccccccccccc"/></svg>
\ No newline at end of file
diff --git a/ippisite/ippidb/templates/base.html b/ippisite/ippidb/templates/base.html
index e20d6f95..d8a44a40 100644
--- a/ippisite/ippidb/templates/base.html
+++ b/ippisite/ippidb/templates/base.html
@@ -10,6 +10,7 @@
<script src="/static/jquery/jquery-3.3.1.min.js"></script>
<script src="/static/popper/popper.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
+ <script src="/static/holder/holder.min.js"></script>
<script defer src="/static/font-awesome/js/fontawesome-all.min.js"></script>
<script type="text/javascript" src="/static/Kekule.js-master/release/kekule.js?modules=chemWidget,openbabel,indigo"></script>
diff --git a/ippisite/ippidb/templates/compound_grid_item.html b/ippisite/ippidb/templates/compound_grid_item.html
new file mode 100644
index 00000000..81a47c23
--- /dev/null
+++ b/ippisite/ippidb/templates/compound_grid_item.html
@@ -0,0 +1,34 @@
+<div class="card m-2 border border-info" style="width: 300px">
+ <a href="/compound/{{ compound.id }}">{% include "pubchem_img.html" %}</a>
+ <div class="card-body" style="overflow:hidden; word-wrap:break-word;">
+ {% if compound.common_name %}
+ <p class="card-text">Common name: {{ compound.common_name }}</p>
+ {% endif %}
+ {% if compound.canonical_smile %}
+ <p class="card-text">Canonical SMILES: {{ compound.canonical_smile }}</p>
+ {% endif %}
+ {% if compound.iupac_name %}
+ <p class="card-text">IUPAC name: {{ compound.iupac_name }}</p>
+ {% endif %}
+ </div>
+</div>
+<!--
+<div class="col-md-4 border border-info bg-light">
+ <div class="row border-info d-flex justify-content-center align-content-center">
+ <a href="/compound/{{ compound.id }}">{% include "pubchem_img.html" %}</a>
+ </div>
+ <div class="row">
+ <ul class="list-group">
+ {% if compound.common_name %}
+ <li class="list-group-item">Common name: {{ compound.common_name }}</li>
+ {% endif %}
+ {% if compound.canonical_smile %}
+ <li class="list-group-item">Canonical SMILES: {{ compound.canonical_smile }}</li>
+ {% endif %}
+ {% if compound.iupac_name %}
+ <li class="list-group-item">IUPAC name: {{ compound.iupac_name }}</li>
+ {% endif %}
+ </ul>
+ </div>
+</div>
+-->
diff --git a/ippisite/ippidb/templates/compound_list.html b/ippisite/ippidb/templates/compound_list.html
index 2e8308a6..41f9c97d 100644
--- a/ippisite/ippidb/templates/compound_list.html
+++ b/ippisite/ippidb/templates/compound_list.html
@@ -67,9 +67,17 @@
</div>
</form>
{% if compounds %}
- {% for compound in compounds %}
- {% include "compound_abstract.html" with compound=compound %}
- {% endfor %}
+ {% if display_table %}
+ {% for compound in compounds %}
+ {% include "compound_table_item.html" with compound=compound %}
+ {% endfor %}
+ {% else %}
+ <div class="row">
+ {% for compound in compounds %}
+ {% include "compound_grid_item.html" with compound=compound %}
+ {% endfor %}
+ </div>
+ {% endif %}
{% else %}
<p>Nothing found there!</p>
{% endif %}
diff --git a/ippisite/ippidb/templates/compound_abstract.html b/ippisite/ippidb/templates/compound_table_item.html
similarity index 100%
rename from ippisite/ippidb/templates/compound_abstract.html
rename to ippisite/ippidb/templates/compound_table_item.html
diff --git a/ippisite/ippidb/templates/pubchem_img.html b/ippisite/ippidb/templates/pubchem_img.html
index ac401906..622ee2ca 100644
--- a/ippisite/ippidb/templates/pubchem_img.html
+++ b/ippisite/ippidb/templates/pubchem_img.html
@@ -1 +1 @@
-<img src="https://pubchem.ncbi.nlm.nih.gov/image/imagefly.cgi?cid={{ compound.pubchem_id }}&width=300&height=300" style="width:300px;height:300px;"/>
+<img src="https://pubchem.ncbi.nlm.nih.gov/image/imagefly.cgi?cid={{ compound.pubchem_id }}&width=300&height=300" style="width:290px;height:290px;" onerror="this.src='/static/images/cross.svg';"/>
diff --git a/ippisite/ippidb/views.py b/ippisite/ippidb/views.py
index f4056df8..9dc2d6e4 100644
--- a/ippisite/ippidb/views.py
+++ b/ippisite/ippidb/views.py
@@ -200,7 +200,7 @@ def compound_list(request):
boundcomplexes = boundcomplexes[:5]
count = compounds.count()
# handle pagination in compounds list
- paginator = Paginator(compounds, 5)
+ paginator = Paginator(compounds, 12)
page = request.GET.get('page')
try:
compounds = paginator.page(page)
--
GitLab