diff --git a/src/App.vue b/src/App.vue
index c6b4d84..e8ac7cb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,7 @@
       <button
       :style="{ margin: '0 30px', backgroundColor: 'green', color: 'white', border: 'none' }"
       class="btn btn-primary" @click="showPreviousBox">
-          Previous Box
+          Parent Box
       </button>
 
       <!-- <button
@@ -307,6 +307,86 @@ export default {
           }
         }
       }
+      if ("bl" in objJson) {
+        for (let i=0; i<objJson.bl.length; i++) {
+          if ("body" in objJson.bl[i]) {
+            let currentNodeNum = objJson.bl[i].body - 1;
+            let newRoute = currentRoute + `-${currentNodeNum + 1}`;
+            let newAltRoute = altRoute + `-${i}`
+            const clickPrompt = "--- Click <HERE> to visualize this FN ---  " + newAltRoute;
+            this.routePair[newAltRoute] = newRoute;
+            this.highlightedJson.fn_array[currentNodeNum] = {
+              hi_there: clickPrompt,
+              ...this.highlightedJson.fn_array[currentNodeNum]
+            };
+            this.getAllChildBody(this.highlightedJson.fn_array[currentNodeNum], newRoute, newAltRoute);
+          }
+          if ("condition" in objJson.bl[i]) {
+            let currentNodeNum = objJson.bl[i].condition - 1;
+            let newRoute = currentRoute + `-${currentNodeNum + 1}`;
+            let newAltRoute = altRoute + `-${i}`
+            const clickPrompt = "--- Click <HERE> to visualize this FN ---  " + newAltRoute;
+            this.routePair[newAltRoute] = newRoute;
+            this.highlightedJson.fn_array[currentNodeNum] = {
+              hi_there: clickPrompt,
+              ...this.highlightedJson.fn_array[currentNodeNum]
+            };
+            this.getAllChildBody(this.highlightedJson.fn_array[currentNodeNum], newRoute, newAltRoute);
+          }
+        }
+      }
+      if ("bc" in objJson) {
+        for (let i=0; i<objJson.bc.length; i++) {
+          if ("body" in objJson.bc[i]) {
+            let currentNodeNum = objJson.bc[i].body - 1;
+            let newRoute = currentRoute + `-${currentNodeNum + 1}`;
+            let newAltRoute = altRoute + `-${i}`
+            const clickPrompt = "--- Click <HERE> to visualize this FN ---  " + newAltRoute;
+            this.routePair[newAltRoute] = newRoute;
+            this.highlightedJson.fn_array[currentNodeNum] = {
+              hi_there: clickPrompt,
+              ...this.highlightedJson.fn_array[currentNodeNum]
+            };
+            this.getAllChildBody(this.highlightedJson.fn_array[currentNodeNum], newRoute, newAltRoute);
+          }
+          if ("condition" in objJson.bc[i]) {
+            let currentNodeNum = objJson.bc[i].condition - 1;
+            let newRoute = currentRoute + `-${currentNodeNum + 1}`;
+            let newAltRoute = altRoute + `-${i}`
+            const clickPrompt = "--- Click <HERE> to visualize this FN ---  " + newAltRoute;
+            this.routePair[newAltRoute] = newRoute;
+            this.highlightedJson.fn_array[currentNodeNum] = {
+              hi_there: clickPrompt,
+              ...this.highlightedJson.fn_array[currentNodeNum]
+            };
+            this.getAllChildBody(this.highlightedJson.fn_array[currentNodeNum], newRoute, newAltRoute);
+          }
+          if ("body_if" in objJson.bc[i]) {
+            let currentNodeNum = objJson.bc[i].body_if - 1;
+            let newRoute = currentRoute + `-${currentNodeNum + 1}`;
+            let newAltRoute = altRoute + `-${i}`
+            const clickPrompt = "--- Click <HERE> to visualize this FN ---  " + newAltRoute;
+            this.routePair[newAltRoute] = newRoute;
+            this.highlightedJson.fn_array[currentNodeNum] = {
+              hi_there: clickPrompt,
+              ...this.highlightedJson.fn_array[currentNodeNum]
+            };
+            this.getAllChildBody(this.highlightedJson.fn_array[currentNodeNum], newRoute, newAltRoute);
+          }
+          if ("body_else" in objJson.bc[i]) {
+            let currentNodeNum = objJson.bc[i].body_else - 1;
+            let newRoute = currentRoute + `-${currentNodeNum + 1}`;
+            let newAltRoute = altRoute + `-${i}`
+            const clickPrompt = "--- Click <HERE> to visualize this FN ---  " + newAltRoute;
+            this.routePair[newAltRoute] = newRoute;
+            this.highlightedJson.fn_array[currentNodeNum] = {
+              hi_there: clickPrompt,
+              ...this.highlightedJson.fn_array[currentNodeNum]
+            };
+            this.getAllChildBody(this.highlightedJson.fn_array[currentNodeNum], newRoute, newAltRoute);
+          }
+        }
+      }
       // if ("bc" in objJson) {
       //   for (let i=0; i<objJson.bc.length; i++) {
       //     if ("body_if" in objJson.bc[i]) {
diff --git a/src/utils/drawBox.js b/src/utils/drawBox.js
index c11e588..9f19383 100644
--- a/src/utils/drawBox.js
+++ b/src/utils/drawBox.js
@@ -2,7 +2,7 @@
 import * as d3 from "d3";
 import { handleClick } from "./click";
 import { handleClickCond, handleClickLoop } from "./clickCond";
-import { computeBoundingRectangle, getOuterBox } from "./utilities"
+import { computeBoundingRectangle, getOuterBox, relayoutPorts } from "./utilities"
 import { getGromet } from './global.js';
 
 export function drawBox(layout, fnS, body_num, directionO = "right") {
@@ -16,7 +16,31 @@ export function drawBox(layout, fnS, body_num, directionO = "right") {
 
     // 绘制节点
     const nodes = layout.nodes;
+
     console.log(layout)
+    let opoNode = {};
+    let opiNode = {};
+    for (const nodeId in nodes) {
+      const node = nodes[nodeId];
+      const [type, index] = nodeId.split("-");
+      const isOpoNode = (type === 'opo');
+      const isOpiNode = (type === 'opi');
+      if (isOpiNode){
+        opiNode[nodeId] = node;
+      }
+      if (isOpoNode){
+        opoNode[nodeId] = node;
+      }
+    }
+    console.log(opiNode);
+    console.log(opoNode)
+    if (Object.keys(opiNode).length>1){
+      opiNode = relayoutPorts(opiNode);
+    }
+    if (Object.keys(opoNode).length>1){
+      opoNode = relayoutPorts(opoNode);
+    }
+    
     let opoNodeFlag = false;
     let opiNodeFlag = false;
     const minValue = Math.min(...Object.values(layout.nodes).map(obj => obj.y));
diff --git a/src/utils/layout.js b/src/utils/layout.js
index f41246a..32fea41 100644
--- a/src/utils/layout.js
+++ b/src/utils/layout.js
@@ -842,11 +842,17 @@ export function getBoxLayout(data) {
   };
   graph.nodes().forEach((nodeId) => {
     const node = graph.node(nodeId);
+    // if (node.height = undefined){
+    //   node.height = 100;
+    // }
+    // if (node.width = undefined){
+    //   node.width = 100;
+    // }
     layout.nodes[nodeId] = {
       x: node.x,
       y: node.y,
-      width: node.width,
-      height: node.height,
+      width: node.width?node.width:100,
+      height: node.height?node.height:100,
       label: node.label,
       type: node.type,
       value: node.value,
diff --git a/src/utils/utilities.js b/src/utils/utilities.js
index e99ae99..38cd1b7 100644
--- a/src/utils/utilities.js
+++ b/src/utils/utilities.js
@@ -13,6 +13,68 @@ export function arraysAreEqual(array1, array2) {
     return true;
 }
 
+export function relayoutPorts(nodesObject) {
+    let overlap = false;
+    let leftLimit = false;
+    const nodes = Object.values(nodesObject);
+    console.log(nodes);
+    nodes.sort(function(a, b){
+        return a.x - b.x;
+    });
+    let previousX = -999999;
+    nodes.forEach(function(node, index){
+        // if (node.x-previousX>54){
+        //     previousX = node.x;
+        // } else {
+        //     overlap = true;
+        //     if (node.x - 55 < 0) {
+        //         leftLimit = true;
+        //     } else {
+        //         nodes[index-1].x = node.x - 55;
+        //     }
+        // }
+        if (node.x-previousX<57){
+            overlap = true;
+        } else {
+            previousX = node.x;
+        }
+    })
+    while (overlap==true) {
+        overlap = false;
+        if (leftLimit==false){
+            previousX = -999999;
+            nodes.forEach(function(node, index){
+                if (node.x-previousX>57){
+                    previousX = node.x;
+                } else {
+                    overlap = true;
+                    if (node.x - 60 < 0) {
+                        leftLimit = true;
+                    } else {
+                        nodes[index-1].x = node.x - 60;
+                    }
+                }
+            })
+        } else {
+            nodes.forEach(function(node, index){
+                previousX = -999999;
+                if (node.x-previousX>57){
+                    previousX = node.x;
+                } else {
+                    overlap = true;
+                    if (node.x - 60 < 0) {
+                        leftLimit = true;
+                    } else {
+                        node.x = previousX + 60;
+                    }
+                }
+            })
+        }
+    }
+    console.log(nodes)
+    return nodes;
+}
+
 export function loopOverHierarchy(d, callback) {
     callback(d);
     if (d.children) d.children.forEach(c => loopOverHierarchy(c, callback));