Fix WebInterface node overlap for large arbitration graphs

gui/app/arbitration_graphs/arbitrator_option.js

@@ -120,8 +120,28 @@ let ArbitratorOptionComponent = {
         optionRy: function () {
             return this.optionRx();
         },
+        optionSubtreeHeight: function (behavior) {
+            if (!behavior || !behavior.options || behavior.options.length === 0) {
+                return this.optionOuterHeight;
+            }
+            let totalHeight = 0;
+            for (const option of behavior.options) {
+                totalHeight += this.optionSubtreeHeight(option.behavior);
+            }
+            return totalHeight;
+        },
         optionY: function (index) {
-            return index * this.optionOuterHeight - this.options.length / 2 * this.optionOuterHeight + this.optionOuterHeight / 2;
+            let totalHeight = 0;
+            for (const option of this.options) {
+                totalHeight += this.optionSubtreeHeight(option.behavior);
+            }
+            let subtreeStartY = this.optionInnerHeight / 2 - totalHeight / 2;
+            let y = subtreeStartY;
+            for (let i = 0; i < index; i++) {
+                y += this.optionSubtreeHeight(this.options[i].behavior);
+            }
+            let currentSubtreeHeight = this.optionSubtreeHeight(this.options[index].behavior);
+            return y + currentSubtreeHeight / 2 - this.optionInnerHeight / 2;
         },
         normalizedUtility: function (cost, minCost, maxCost) {
             costRange = maxCost - minCost;

gui/app/arbitration_graphs/example_nested_large.yaml

@@ -0,0 +1,101 @@
+arbitration:
+  type: PriorityArbitrator
+  name: R
+  invocationCondition: true
+  commitmentCondition: true
+  options:
+    - type: Option
+      behavior:
+        type: PriorityArbitrator
+        name: Uninitialized
+        invocationCondition: true
+        commitmentCondition: true
+        options:
+          - type: Option
+            behavior:
+              type: Behavior
+              name: A
+              invocationCondition: true
+              commitmentCondition: true
+            verificationResult: passed
+            flags:
+              - INTERRUPTABLE
+          - type: Option
+            behavior:
+              type: Behavior
+              name: B
+              invocationCondition: false
+              commitmentCondition: false
+            flags:
+              - INTERRUPTABLE
+          - type: Option
+            behavior:
+              type: Behavior
+              name: C
+              invocationCondition: false
+              commitmentCondition: false
+            flags:
+              - INTERRUPTABLE
+          - type: Option
+            behavior:
+              type: Behavior
+              name: D
+              invocationCondition: true
+              commitmentCondition: true
+            flags:
+              - INTERRUPTABLE
+        activeBehavior: 0
+      verificationResult: passed
+      flags:
+        - INTERRUPTABLE
+    - type: Option
+      behavior:
+        type: PriorityArbitrator
+        name: E
+        invocationCondition: true
+        commitmentCondition: false
+        options:
+          - type: Option
+            behavior:
+              type: Behavior
+              name: F
+              invocationCondition: false
+              commitmentCondition: false
+            flags:
+              - INTERRUPTABLE
+          - type: Option
+            behavior:
+              type: Behavior
+              name: G
+              invocationCondition: false
+              commitmentCondition: false
+            flags:
+              - INTERRUPTABLE
+          - type: Option
+            behavior:
+              type: PriorityArbitrator
+              name: H
+              invocationCondition: true
+              commitmentCondition: false
+              options:
+                - type: Option
+                  behavior:
+                    type: Behavior
+                    name: I
+                    invocationCondition: false
+                    commitmentCondition: false
+                  flags:
+                    - INTERRUPTABLE
+                - type: Option
+                  behavior:
+                    type: Behavior
+                    name: J
+                    invocationCondition: true
+                    commitmentCondition: true
+                  flags:
+                    - INTERRUPTABLE
+            flags:
+              - INTERRUPTABLE
+      flags:
+        - INTERRUPTABLE
+  activeBehavior: 0

gui/app/arbitration_graphs/index.html

@@ -28,6 +28,9 @@ <h1 id="header" v-show="showTitle">Arbitration Graphs GUI</h1>
                 <a class="load-yaml" href="javascript:loadExample('example_nested.yaml');">
                     <i class="fas fa-file-image"></i> Nested example
                 </a>
+                <a class="load-yaml" href="javascript:loadExample('example_nested_large.yaml');">
+                    <i class="fas fa-file-image"></i> Large nested example
+                </a>
             </div>
             <div v-if="!arbitrationGraph || offlineMode">
                 <label id="file-upload-form" class="load-yaml">