static/js/pw.js

@@ -605,7 +605,36 @@ function draw(pathway, elem) {
         // Check if target is pseudo and draw marker only if not pseudo
         .attr("class", d => d.target.pseudo ? "link_no_arrow" : "link")
         .attr("marker-end", d => d.target.pseudo ? '' : d.multi_step ? 'url(#doublearrow)' : 'url(#arrow)')
+      .on("click", function(event, d) {
+          const wasHighlighted = d3.select(this).classed("highlighted");
 
+          d3.selectAll("line").classed("highlighted", false);
+
+          if (!wasHighlighted) {
+              const toHighlight = [];
+              toHighlight.push(d.el);
+
+              if (d.source.pseudo || d.target.pseudo) {
+                  if (d.target.pseudo) {
+                      d3.selectAll("line").each(e => {
+                          if (e !== undefined && e.source.id === d.target.id) {
+                              toHighlight.push(e.el);
+                          }
+                      });
+                  } else {
+                      d3.selectAll("line").each(e => {
+                          if (e !== undefined && (e.target.id === d.source.id || e.source.id === d.source.id)) {
+                              toHighlight.push(e.el);
+                          }
+                      });
+                  }
+              }
+
+              for (const e of toHighlight) {
+                  d3.select(e).classed("highlighted", true);
+              }
+          }
+      })
 
     // add element to links array
     link.each(function (d) {
@@ -624,7 +653,13 @@ function draw(pathway, elem) {
             .on("drag", dragged)
             .on("end", dragended))
         .on("click", function (event, d) {
-            d3.select(this).select("circle").classed("highlighted", !d3.select(this).select("circle").classed("highlighted"));
+            const wasHighlighted = d3.select(this).select("circle").classed("highlighted");
+
+            d3.selectAll('circle.highlighted').classed('highlighted', false);
+
+            if (!wasHighlighted) {
+                d3.select(this).select("circle").classed("highlighted", !d3.select(this).select("circle").classed("highlighted"));
+            }
         })
 
     // Kreise für die Knoten hinzufügen

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/collections/new_prediction_setting_modal.html

@@ -203,11 +203,11 @@
               id="model-based-prediction-setting-threshold"
               name="model-based-prediction-setting-threshold"
               class="input input-bordered w-full"
-              placeholder="0.25"
+              value="0.25"
               type="number"
               min="0"
               max="1"
-              step="0.05"
+              step="any"
             />
           </div>
 

templates/modals/objects/delete_pathway_edge_modal.html

@@ -4,6 +4,25 @@
   id="delete_pathway_edge_modal"
   class="modal"
   x-data="modalForm({ state: { selectedEdge: '', imageUrl: '' } })"
+  @modal-opened.window="
+   const links = d3.selectAll('line.highlighted');
+  console.log(links);
+   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,22 @@
   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/pathway.html

@@ -106,12 +106,12 @@
     </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
       </div>
-      <div class="collapse-content">
+      <div class="collapse-content ">
         <div class="bg-base-100 mb-2 rounded-lg p-2">
           <div class="navbar bg-base-100 rounded-lg">
             <div class="flex-1">
@@ -140,7 +140,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>