[Chore] Package Export, Blanks for fields, Styling (#421)

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

templates/actions/objects/pathway.html

@@ -22,7 +22,7 @@
   {% for tpl in action_button_templates %}
     {% include tpl %}
   {% endfor %}
-  <li role="separator" class="divider"></li>
+  <li role="separator" class="divider h-px"></li>
 {% endif %}
 <li>
   <a
@@ -74,7 +74,7 @@
       Rules</a
     >
   </li>
-  <li role="separator" class="divider"></li>
+  <li role="separator" class="divider h-px"></li>
   <li>
     <a
       class="button"
@@ -99,11 +99,16 @@
       <i class="glyphicon glyphicon-plus"></i> Set Aliases</a
     >
   </li>
-  <li role="separator" class="divider"></li>
+  <li role="separator" class="divider h-px"></li>
   <li>
     <a
       class="button"
-      onclick="document.getElementById('delete_pathway_node_modal').showModal(); return false;"
+      onclick="
+      const modal = document.getElementById('delete_pathway_node_modal');
+      modal.showModal();
+      window.dispatchEvent(new Event('modal-opened'));
+      return false;
+      "
     >
       <i class="glyphicon glyphicon-trash"></i> Delete Compound</a
     >
@@ -111,7 +116,12 @@
   <li>
     <a
       class="button"
-      onclick="document.getElementById('delete_pathway_edge_modal').showModal(); return false;"
+      onclick="
+      const modal = document.getElementById('delete_pathway_edge_modal');
+      modal.showModal();
+      window.dispatchEvent(new Event('modal-opened'));
+      return false;
+      "
     >
       <i class="glyphicon glyphicon-trash"></i> Delete Reaction</a
     >

templates/modals/objects/delete_pathway_edge_modal.html

@@ -4,6 +4,22 @@
   id="delete_pathway_edge_modal"
   class="modal"
   x-data="modalForm({ state: { selectedEdge: '', imageUrl: '' } })"
+  @modal-opened.window="
+   const links = d3.selectAll('path.highlighted');
+   if (!links.empty()) {
+        const el = links.node();
+        const selectElement = document.getElementById('delete_pathway_edge_edges');
+        console.log(el);
+        console.log(el.__data__);
+        for (let option of selectElement.options) {
+            if (option.value === el.__data__.url) {
+                option.selected = true;
+                break;
+            }
+        }
+        selectElement.dispatchEvent(new Event('change'));
+   }
+  "
   @close="reset()"
 >
   <div class="modal-box">

templates/modals/objects/delete_pathway_node_modal.html

@@ -4,6 +4,19 @@
   id="delete_pathway_node_modal"
   class="modal"
   x-data="modalForm({ state: { selectedNode: '', imageUrl: '' } })"
+  @modal-opened.window="
+   const el = d3.select('circle.highlighted').node();
+   if (el !== null) {
+    const selectElement = document.getElementById('delete_pathway_node_nodes');
+    for (let option of selectElement.options) {
+        if (option.value === el.__data__.url) {
+            option.selected = true;
+            break;
+        }
+    }
+    selectElement.dispatchEvent(new Event('change'));
+   }
+  "
   @close="reset()"
 >
   <div class="modal-box">

templates/objects/edge.html

@@ -92,7 +92,7 @@
         <div class="flex flex-wrap items-center justify-center gap-4">
           {% for educt in edge.start_nodes.all %}
             <a href="{{ educt.url }}" class="btn btn-outline btn-sm"
-              >{{ educt.name }}</a
+              >{{ educt.get_name }}</a
             >
           {% endfor %}
           <svg
@@ -112,7 +112,7 @@
           </svg>
           {% for product in edge.end_nodes.all %}
             <a href="{{ product.url }}" class="btn btn-outline btn-sm"
-              >{{ product.name }}</a
+              >{{ product.get_name }}</a
             >
           {% endfor %}
         </div>

templates/objects/group.html

@@ -56,7 +56,9 @@
         <ul class="menu bg-base-200 rounded-box">
           {% for um in group.user_member.all %}
             <li>
-              <a href="{{ um.url }}" class="hover:bg-base-300"
+              <a
+                href="{% if user.is_superuser %}{{ um.url }}{% else %}{{ "#" }}{% endif %}"
+                class="hover:bg-base-300"
                 >{{ um.username }}
                 {% if not um.is_active %}<i>(inactive)</i>{% endif %}</a
               >

templates/objects/node.html

@@ -1,4 +1,5 @@
 {% extends "framework_modern.html" %}
+{% load envipytags %}
 
 {% block content %}
 
@@ -54,6 +55,12 @@
       </div>
     </div>
 
+    {% epdb_slot_templates "epdb.objects.node.viz" as viz_templates %}
+
+    {% for tpl in viz_templates %}
+      {% include tpl %}
+    {% endfor %}
+
     <!-- Image Representation -->
     <div class="collapse-arrow bg-base-200 collapse">
       <input type="checkbox" checked />

templates/objects/pathway.html

@@ -72,6 +72,15 @@
       stroke: red;
       stroke-width: 3px;
     }
+
+    .inedge {
+      stroke: red;
+      stroke-width: 3px;
+    }
+    .outedge {
+      stroke: green;
+      stroke-width: 3px;
+    }
   </style>
   <script src="{% static 'js/pw.js' %}"></script>
 
@@ -106,7 +115,7 @@
     </div>
 
     <!-- Graphical Representation -->
-    <div class="collapse-arrow bg-base-200 collapse">
+    <div class="collapse-arrow bg-base-200 collapse overflow-y-auto">
       <input type="checkbox" checked />
       <div class="collapse-title text-xl font-medium">
         Graphical Representation
@@ -140,7 +149,7 @@
                 </div>
                 <ul
                   tabindex="0"
-                  class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2"
+                  class="dropdown-content menu bg-base-100 rounded-box z-50 w-96 p-2"
                 >
                   {% include "actions/objects/pathway.html" %}
                 </ul>

templates/predict_pathway.html

@@ -212,7 +212,13 @@
         e.preventDefault();
         const button = this;
         button.disabled = true;
-        button.textContent = "Predicting...";
+
+        // Set text depending on mode
+        if (document.getElementById("predict-submit-button").innerText === "Build") {
+          button.textContent = "Building...";
+        } else {
+          button.textContent = "Predicting...";
+        }
 
         // Get SMILES from either input or Ketcher
         const smilesInput = document.getElementById("predict-smiles");