In / Out Edges Viz, Submitting Button Text

epdb/migrations/0025_auto_20260511_2025.py

@@ -23,6 +23,7 @@ MAPPING = {
     "true": HalfLifeModel.SFO,
     "SFO-SFO": HalfLifeModel.SFO_SFO,
     "DFOP-SFO": HalfLifeModel.DFOP_SFO,
+    "other": HalfLifeModel.OTHER,
 }
 
 

static/js/pw.js

@@ -1,5 +1,40 @@
 console.log("loaded pw.js")
 
+
+function findPaths(source_idx, target_idx, links) {
+    const resultLinks = new Set();
+    const visited = new Set();
+
+    // Helper function for depth-first search
+    function dfs(current) {
+        if (current === target_idx) {
+            return;
+        }
+
+        visited.add(current);
+
+        links.forEach(link => {
+            if (
+                link.target.id === current &&
+                !visited.has(link.source.id) &&
+                link.source.id !== link.target.id // Avoid self-loops
+            ) {
+                resultLinks.add(link); // Add link to result
+                dfs(link.source.id);
+            }
+        });
+
+        visited.delete(current);
+    }
+
+    // Start DFS
+    dfs(source_idx);
+
+    return Array.from(resultLinks); // Convert Set to Array for result
+}
+
+
+
 function predictFromNode(url) {
     fetch("", {
         method: "POST",
@@ -678,10 +713,38 @@ function draw(pathway, elem) {
             const wasHighlighted = d3.select(this).select("circle").classed("highlighted");
 
             d3.selectAll('circle.highlighted').classed('highlighted', false);
+            d3.selectAll("path").classed("inedge", false);
+            d3.selectAll("path").classed("outedge", false);
 
             if (!wasHighlighted) {
                 d3.select(this).select("circle").classed("highlighted", !d3.select(this).select("circle").classed("highlighted"));
+
+                const inEdges = findPaths(d.id, 3, links);
+                const outEdges = []
+
+                // Colorize out edges green
+                for (const l of links) {
+                    if (l.source.id === d.id) {
+                        outEdges.push(l);
+                        if (l.target.pseudo) {
+                            for (const l2 of links) {
+                                if (l.target.id === l2.source.id) {
+                                    outEdges.push(l2);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                for (const e of inEdges) {
+                    d3.select(e.el).classed("inedge", true);
+                }
+                for (const e of outEdges) {
+                    d3.select(e.el).classed("outedge", true);
+                }
             }
+
+
         })
 
     // Kreise für die Knoten hinzufügen

templates/objects/pathway.html

@@ -72,6 +72,17 @@
       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>
 

templates/predict_pathway.html

@@ -212,7 +212,11 @@
         e.preventDefault();
         const button = this;
         button.disabled = true;
-        button.textContent = "Predicting...";
+        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");