Add Edge Template (#33)

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

epdb/views.py

@@ -159,7 +159,8 @@ def _anonymous_or_real(request):
     return get_user_model().objects.get(username='anonymous')
 
 
-def breadcrumbs(first_level_object=None, second_level_namespace=None, second_level_object=None) -> List[Dict[str, str]]:
+def breadcrumbs(first_level_object=None, second_level_namespace=None, second_level_object=None,
+                third_level_namespace=None, third_level_object=None) -> List[Dict[str, str]]:
     bread = [
         {'Home': s.SERVER_URL},
         {'Package': s.SERVER_URL + '/package'},
@@ -173,6 +174,12 @@ def breadcrumbs(first_level_object=None, second_level_namespace=None, second_lev
     if second_level_object is not None:
         bread.append({second_level_object.name: second_level_object.url})
 
+    if third_level_namespace is not None:
+        bread.append({f'{third_level_namespace}'.capitalize(): second_level_object.url + f'/{third_level_namespace}'})
+
+    if third_level_object is not None:
+        bread.append({third_level_object.name: third_level_object.url})
+
     return bread
 
 
@@ -1432,6 +1439,16 @@ def package_pathway_edge(request, package_uuid, pathway_uuid, edge_uuid):
                 svg_data = current_edge.as_svg
                 return HttpResponse(svg_data, content_type="image/svg+xml")
 
+        context = get_base_context(request)
+        context['title'] = f'enviPath - {current_package.name} - {current_pathway.name} - {current_edge.edge_label.name}'
+
+        context['meta']['current_package'] = current_package
+        context['object_type'] = 'reaction'
+        context['breadcrumbs'] = breadcrumbs(current_package, 'pathway', current_pathway, 'edge', current_edge)
+        context['edge'] = current_edge
+
+        return render(request, 'objects/edge.html', context)
+
     elif request.method == 'POST':
         if s.DEBUG:
             for k, v in request.POST.items():

templates/objects/edge.html

@@ -0,0 +1,108 @@
+{% extends "framework.html" %}
+
+{% block content %}
+
+    {% block action_modals %}
+{#        {% include "modals/objects/edit_edge_modal.html" %}#}
+{#        {% include "modals/objects/delete_edge_modal.html" %}#}
+    {% endblock action_modals %}
+
+    <div class="panel-group" id="edge-detail">
+        <div class="panel panel-default">
+            <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
+                {{ edge.edge_label.name }}
+                <div id="actionsButton"
+                     style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
+                     class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+                                         aria-haspopup="true" aria-expanded="false"><span
+                        class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
+                        style="padding-right:1em"></span></a>
+                    <ul id="actionsList" class="dropdown-menu">
+                        {% block actions %}
+{#                            {% include "actions/objects/edge.html" %}#}
+                        {% endblock %}
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Description -->
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+                <h4 class="panel-title">
+                    <a id="edge-desc-link" data-toggle="collapse" data-parent="#edge-detail"
+                       href="#edge-desc">Description</a>
+                </h4>
+            </div>
+            <div id="edge-desc" class="panel-collapse collapse in">
+                <div class="panel-body list-group-item">
+                    {{ edge.description }}
+                </div>
+            </div>
+
+            <!-- Image -->
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+                <h4 class="panel-title">
+                    <a id="edge-image-link" data-toggle="collapse" data-parent="#edge-detail"
+                       href="#edge-image">Image Representation</a>
+                </h4>
+            </div>
+            <div id="edge-image" class="panel-collapse collapse in">
+                <div class="panel-body list-group-item">
+                    <div id="image-div" align="center">
+                        {{ edge.edge_label.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="edge-description-link" data-toggle="collapse" data-parent="#edge-description-detail"
+                       href="#edge-description-smiles">Reaction Description</a>
+                </h4>
+            </div>
+            <div id="edge-description-smiles" class="panel-collapse collapse in">
+                <div class="panel-body list-group-item">
+                    {% for educt in edge.start_nodes.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 edge.end_nodes.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="edge-smirks-link" data-toggle="collapse" data-parent="#edge-detail"
+                       href="#edge-smirks">SMIRKS Representation</a>
+                </h4>
+            </div>
+            <div id="edge-smirks" class="panel-collapse collapse in">
+                <div class="panel-body list-group-item">
+                    {{ edge.edge_label.smirks }}
+                </div>
+            </div>
+
+            {% if edge.edge_label.rules.all %}
+                <!-- Rules -->
+                <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+                    <h4 class="panel-title">
+                        <a id="edge-rules-link" data-toggle="collapse" data-parent="#edge-detail"
+                           href="#edge-rules">Rules</a>
+                    </h4>
+                </div>
+                <div id="edge-rules" class="panel-collapse collapse in">
+                    <div class="panel-body list-group-item">
+                        {% for r in edge.edge_label.rules.all %}
+                            <a class="list-group-item" href="{{ r.url }}">{{ r.name }}</a>
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
+
+
+    </div>
+{% endblock content %}