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

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

static/js/pw.js

@@ -1,5 +1,31 @@
 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",
@@ -627,6 +653,34 @@ function draw(pathway, elem) {
             return d.multi_step ? 'url(#doublearrow)' : 'url(#arrow)';
         })
         .attr("fill", "none")
+        .on("click", function(event, d) {
+          const wasHighlighted = d3.select(this).classed("highlighted");
+	      d3.selectAll("path").classed("highlighted", false);
+          if (!wasHighlighted) {
+            const toHighlight = [];
+            toHighlight.push(d.el);
+
+            if (d.source.pseudo || d.target.pseudo) {
+              if (d.target.pseudo) {
+                d3.selectAll("path").each(e => {
+                  if (e !== undefined && e.source.id === d.target.id) {
+                    toHighlight.push(e.el);
+                  }
+                });
+              } else {
+                d3.selectAll("path").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) {
@@ -643,10 +697,41 @@ function draw(pathway, elem) {
         .call(d3.drag()
             .on("start", dragstarted)
             .on("drag", dragged)
-            .on("end", dragended))
+            .on("end", dragended)
+        )
         .on("click", function (event, d) {
+          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
     node.append("circle")