Implemented Reaction Page (#5)

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#5

epdb/models.py

@@ -612,6 +612,19 @@ class Reaction(EnviPathModel, AliasMixin, ScenarioMixin):
         r.save()
         return r
 
+    def smirks(self):
+        return f"{'.'.join([cs.smiles for cs in self.educts.all()])}>>{'.'.join([cs.smiles for cs in self.products.all()])}"
+
+    @property
+    def as_svg(self):
+        return IndigoUtils.smirks_to_svg(self.smirks(), False, width=800, height=400)
+
+    @property
+    def related_pathways(self):
+        return Pathway.objects.filter(
+            id__in=Edge.objects.filter(edge_label=self).values('pathway_id')).order_by('name')
+
+
 
 class Pathway(EnviPathModel, AliasMixin, ScenarioMixin):
     package = models.ForeignKey('epdb.Package', verbose_name='Package', on_delete=models.CASCADE, db_index=True)

templates/objects/reaction.html

@@ -23,10 +23,83 @@
                 </ul>
             </div>
         </div>
-        <div class="panel-body">
+
-            <p> {{ reaction.description }} </p>
+        <!-- Description -->
+        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+            <h4 class="panel-title">
+                <a id="reaction-desc-link" data-toggle="collapse" data-parent="#reaction-detail"
+                   href="#reaction-desc">Description</a>
+            </h4>
+        </div>
+        <div id="reaction-desc" class="panel-collapse collapse in">
+            <div class="panel-body list-group-item">
+                {{ reaction.description }}
+            </div>
+        </div>
+
+        <!-- Image -->
+        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+            <h4 class="panel-title">
+                <a id="reaction-image-link" data-toggle="collapse" data-parent="#reaction-detail"
+                   href="#reaction-image">Image Representation</a>
+            </h4>
+        </div>
+        <div id="reaction-image" class="panel-collapse collapse in">
+            <div class="panel-body list-group-item">
+                <div id="image-div" align="center">
+                    {{ reaction.as_svg|safe }}
+                </div>
+            </div>
+        </div>
+
+        <!-- Reaction Description -->
+        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+            <h4 class="panel-title">
+                <a id="reaction-description-link" data-toggle="collapse" data-parent="#reaction-description-detail"
+                   href="#reaction-description-smiles">Reaction Description</a>
+            </h4>
+        </div>
+        <div id="reaction-description-smiles" class="panel-collapse collapse in">
+            <div class="panel-body list-group-item">
+                {% for educt in reaction.educts.all %}
+                <a class="btn btn-default" href="{{ educt.url }}">{{ educt.name }}</a>
+                {% endfor %}
+                <span class="glyphicon glyphicon-arrow-right" style="margin-left:5em;margin-right:5em;" aria-hidden="true"></span>
+                {% for product in reaction.products.all %}
+                <a class="btn btn-default" href="{{ product.url }}">{{ product.name }}</a>
+                {% endfor %}
+            </div>
+        </div>
+
+        <!-- SMIRKS -->
+        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+            <h4 class="panel-title">
+                <a id="reaction-smirks-link" data-toggle="collapse" data-parent="#reaction-detail"
+                   href="#reaction-smirks">SMIRKS Representation</a>
+            </h4>
+        </div>
+        <div id="reaction-smirks" class="panel-collapse collapse in">
+            <div class="panel-body list-group-item">
+                {{ reaction.smirks }}
+            </div>
+        </div>
+
+       <!-- Pathways -->
+        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+            <h4 class="panel-title">
+                <a id="reaction-pathway-link" data-toggle="collapse" data-parent="#reaction-detail"
+                   href="#reaction-pathway">Pathways</a>
+            </h4>
+        </div>
+        <div id="reaction-pathway" class="panel-collapse collapse in">
+            <div class="panel-body list-group-item">
+                {% for r in reaction.related_pathways %}
+                <a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
+                {% endfor %}
             </div>
         </div>
 
     </div>
+
+</div>
 {% endblock content %}