circle adjustments

Initial bayer app

Show Pack Classification

Adjusted docker compose to bayer specifics

Adjusted Dockerfile for Bayer

Adding secret flags to group, add secret pools to packages

Adjusted View for Package creation

Prep configs, added Package Create Modal

wip

More on PES

wip

wip

static/js/pw.js

@@ -101,10 +101,24 @@ function draw(pathway, elem) {
         // Update pseudo node positions first
         updatePseudoNodePositions();
 
-        link.attr("x1", d => d.source.x)
-            .attr("y1", d => d.source.y)
-            .attr("x2", d => d.target.x)
-            .attr("y2", d => d.target.y);
+        link.attr("d", d => {
+            // Check if it's a self-loop (source equals target)
+            if (d.source.id === d.target.id) {
+                // Create a bezier curve for self-loops
+                const x = d.source.x;
+                const y = d.source.y;
+                const loopRadius = nodeRadius * 2; // Adjust size of the loop
+
+                // Create a circular path to the left of the node
+                return `M ${x},${y - nodeRadius}
+                        C ${x - loopRadius},${y - nodeRadius - loopRadius}
+                          ${x - loopRadius},${y + nodeRadius + loopRadius}
+                          ${x},${y + nodeRadius}`;
+            } else {
+                // Regular straight line for normal edges
+                return `M ${d.source.x},${d.source.y} L ${d.target.x},${d.target.y}`;
+            }
+        });
 
         node.attr("transform", d => `translate(${d.x},${d.y})`);
     }
@@ -599,16 +613,21 @@ function draw(pathway, elem) {
 
     // Kanten zeichnen
     const link = zoomable.append("g")
-        .selectAll("line")
+        .selectAll("path")
         .data(links)
-        .enter().append("line")
+        .enter().append("path")
         // 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)')
+        .attr("marker-end", d => {
+            if (d.target.pseudo) return '';
+            if (d.source.id === d.target.id) return 'url(#curve-arrow)'; // Use curve arrow for self-loops
+            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("line").classed("highlighted", false);
+	  d3.selectAll("path").classed("highlighted", false);
 
           if (!wasHighlighted) {
               const toHighlight = [];
@@ -616,13 +635,13 @@ function draw(pathway, elem) {
 
               if (d.source.pseudo || d.target.pseudo) {
                   if (d.target.pseudo) {
-                      d3.selectAll("line").each(e => {
+                      d3.selectAll("path").each(e => {
                           if (e !== undefined && e.source.id === d.target.id) {
                               toHighlight.push(e.el);
                           }
                       });
                   } else {
-                      d3.selectAll("line").each(e => {
+                      d3.selectAll("path").each(e => {
                           if (e !== undefined && (e.target.id === d.source.id || e.source.id === d.source.id)) {
                               toHighlight.push(e.el);
                           }

templates/modals/objects/delete_pathway_edge_modal.html

@@ -5,8 +5,8 @@
   class="modal"
   x-data="modalForm({ state: { selectedEdge: '', imageUrl: '' } })"
   @modal-opened.window="
-   const links = d3.selectAll('line.highlighted');
-  console.log(links);
+   const links = d3.selectAll('path.highlighted');
+
    if (!links.empty()) {
         const el = links.node();
         const selectElement = document.getElementById('delete_pathway_edge_edges');

templates/objects/pathway.html

@@ -367,6 +367,18 @@
               >
                 <path d="M 0 0 L 10 5 L 0 10 z" fill="#999" />
               </marker>
+              <marker
+                id="curve-arrow"
+                viewBox="0 0 10 10"
+                refX="10"
+                refY="5"
+                markerWidth="6"
+                markerHeight="6"
+                orient="auto"
+                markerUnits="strokeWidth"
+              >
+                <path d="M 0 0 L 10 5 L 0 10 z" fill="#999" />
+              </marker>
               <marker
                 id="doublearrow"
                 viewBox="0 0 20 30"