Improve intersecting group behavior

GraphNode.js

@@ -41,7 +41,6 @@ class GraphNode {
     }
   }
 
-  // TODO: move affinity to LayoutNode
   setAffinity(nodes) {
     const INF = 999999;
 
@@ -55,9 +54,12 @@ class GraphNode {
         this.addAffinity(node, d => d <= 2 ? -INF : 0);
       }
 
-      // Keep one space around groups
-      if (this.groups.size && !intersects(this.groups, node.groups)) {
-        node.addAffinity(this, d => d <= 2 ? -INF : 0);
+      // Am I in any labeled groups that node is not?
+      // If so, preserve one space above the group
+      let labeled = new Set(Array.from(this.groups).filter(g => g.label != ''));
+      if (asymDifference(labeled, node.groups).size) {
+        node.addAffinity(this, (d, v) =>
+                         (v[0] == 0 && v[1] > 0 && v[1] < 2) ? -INF : 0);
       }
 
       // Try to stack nodes with the same label
@@ -67,8 +69,10 @@ class GraphNode {
 
       // Try to preserve pagerank left-to-right flow from initial positions
       let rankSign = Math.sign(node.pageRank - this.pageRank);
-      this.addAffinity(node, (d, v) =>
-                       [Math.sign(v[0]) == rankSign ? 0 : -1000, 0]);
+      if (rankSign != 0) {
+        this.addAffinity(node, (d, v) =>
+                         [Math.sign(v[0]) == rankSign ? 0 : -1000, 0]);
+      }
     }
 
     for (let to of this.links) {
@@ -78,6 +82,7 @@ class GraphNode {
       to.addAffinity(this, d => d <= 2 ? -INF : d * 9);
     }
 
+    // Affinity for groups
     for (let group of this.groups) {
       for (let node of group.nodes) {
         this.addAffinity(node, d => d * 100);

architype.css

@@ -8,7 +8,7 @@
   --placeholder: rgba(255,255,255,0.2);
   --outline: #323434;
   --background: #202020;
-  --group-background: rgba(0,0,0,0.3);
+  --group-background: rgba(0,0,0,0.5);
   --node-background: #000000;
   --input: rgba(255,255,255,0.2);
 }
@@ -136,7 +136,6 @@ body {
   text-align: center;
 
   font-size: 20px;
-  border-radius: 10%;
   overflow-wrap: anywhere;
   overflow: hidden;
   cursor: default;
@@ -149,12 +148,13 @@ body {
   background: var(--node-background);
   justify-content: center;
   border: 1px solid white;
+  border-radius: 10%;
   z-index: 3;
 }
 
 .gridGroup {
-  width: calc(100% - 10px);
-  height: calc(100% - 30px);
+  width: 100%;
+  height: 100%;
   background: var(--group-background);
   justify-content: flex-start;
   margin-top: 20px;
@@ -176,7 +176,7 @@ body {
   padding-top: 3px;
   overflow: hidden;
   overflow-wrap: anywhere;
-  z-index: 3;
+  z-index: 1;
 }
 
 .gridLines {

utils.js

@@ -25,5 +25,15 @@ function intersects(set1, set2) {
   return false;
 }
 
+function asymDifference(set1, set2) {
+  let ret = new Set();
+  for (let item of set1) {
+    if (!set2.has(item)) {
+      ret.add(item);
+    }
+  }
+  return ret;
+}
+
 <!--# include file="MinHeap.js" -->
 <!--# include file="StringMap.js" -->