From bf4ceddbd40bc7251989504fffe6550bc13a629e Mon Sep 17 00:00:00 2001
From: AmyangXYZ <amyang.xyz@gmail.com>
Date: Tue, 16 Jan 2024 21:16:54 -0500
Subject: [PATCH] change max print width of formatter and improve EstConn
 function

---
 .prettierrc.json                   |   2 +-
 src/assets/base.css                |   4 +-
 src/components/ControlPanel.vue    |  24 +-
 src/components/EventLogs.vue       |   8 +-
 src/components/MenuBar.vue         |  14 +-
 src/components/NodeStats.vue       |   9 +-
 src/components/TopoEditToolbox.vue |  15 +-
 src/components/icons/IconReset.vue |   4 +-
 src/core/network.ts                | 115 ++++----
 src/core/node_end_system.ts        |   9 +-
 src/core/node_five_g_gnb.ts        |   9 +-
 src/core/node_five_g_ue.ts         |   9 +-
 src/core/node_tsch.ts              |   9 +-
 src/core/node_tsn.ts               |   9 +-
 src/core/preset_topologies.json    | 430 ++++++++++++-----------------
 src/hooks/useDrawMiniMap.ts        |   8 +-
 src/hooks/useDrawTopology.ts       |  91 +-----
 src/utils/kdtree.ts                |   6 +-
 src/views/HomeView.vue             |  20 +-
 19 files changed, 271 insertions(+), 524 deletions(-)

diff --git a/.prettierrc.json b/.prettierrc.json
index 66e2335..ced5aa8 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -3,6 +3,6 @@
   "semi": false,
   "tabWidth": 2,
   "singleQuote": true,
-  "printWidth": 100,
+  "printWidth": 120,
   "trailingComma": "none"
 }
\ No newline at end of file
diff --git a/src/assets/base.css b/src/assets/base.css
index 3cff482..b8736fe 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -61,8 +61,8 @@
 body {
   min-height: 100vh;
   line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
   font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
index ab811e7..751c2d1 100644
--- a/src/components/ControlPanel.vue
+++ b/src/components/ControlPanel.vue
@@ -27,35 +27,17 @@ onKeyStroke('ArrowRight', () => {
       <el-col :span="8" style="margin-top: 3px">
         <a href="https://github.com/AmyangXYZ/VeRNet"><img height="48" :src="VeRNetLogo" /></a>
         <el-button-group class="btns">
-          <el-button
-            class="btn"
-            :disabled="Network.Running.value"
-            size="small"
-            type="primary"
-            @click="Network.Run"
-          >
+          <el-button class="btn" :disabled="Network.Running.value" size="small" type="primary" @click="Network.Run">
             <el-icon size="18">
               <IconPlay />
             </el-icon>
           </el-button>
-          <el-button
-            class="btn"
-            :disabled="Network.Running.value"
-            size="small"
-            type="info"
-            @click="Network.Step"
-          >
+          <el-button class="btn" :disabled="Network.Running.value" size="small" type="info" @click="Network.Step">
             <el-icon size="18">
               <IconPlusOne />
             </el-icon>
           </el-button>
-          <el-button
-            class="btn"
-            :disabled="!Network.Running.value"
-            size="small"
-            type="warning"
-            @click="Network.Pause"
-          >
+          <el-button class="btn" :disabled="!Network.Running.value" size="small" type="warning" @click="Network.Pause">
             <el-icon size="18">
               <IconPause />
             </el-icon>
diff --git a/src/components/EventLogs.vue b/src/components/EventLogs.vue
index c4746e2..6572683 100644
--- a/src/components/EventLogs.vue
+++ b/src/components/EventLogs.vue
@@ -40,13 +40,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div
-    class="log-container"
-    v-show="showLog"
-    ref="logContainer"
-    @mouseover="handleMouseOver"
-    @mouseleave="resetTimer"
-  >
+  <div class="log-container" v-show="showLog" ref="logContainer" @mouseover="handleMouseOver" @mouseleave="resetTimer">
     <div class="log" v-for="(log, i) in Network.Logs.value" :key="i">> {{ log }}</div>
   </div>
 </template>
diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index c60409a..1b526a9 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -33,12 +33,7 @@ onKeyStroke('`', () => {
         </a>
       </el-col>
       <el-col :span="4">
-        <el-tooltip
-          effect="light"
-          content="Network settings"
-          :hide-after="0"
-          placement="right-start"
-        >
+        <el-tooltip effect="light" content="Network settings" :hide-after="0" placement="right-start">
           <el-button class="btn" size="small" @click="SignalShowSettings = !SignalShowSettings">
             <el-icon color="#aaa" size="20">
               <Setting />
@@ -56,12 +51,7 @@ onKeyStroke('`', () => {
         </el-tooltip>
       </el-col>
       <el-col :span="4">
-        <el-tooltip
-          effect="light"
-          content="Network statistics"
-          :hide-after="0"
-          placement="right-start"
-        >
+        <el-tooltip effect="light" content="Network statistics" :hide-after="0" placement="right-start">
           <el-button class="btn" size="small" @click="SignalShowStatistics = !SignalShowStatistics">
             <el-icon color="#aaa" size="20">
               <DataAnalysis />
diff --git a/src/components/NodeStats.vue b/src/components/NodeStats.vue
index 820e873..95f4a1f 100644
--- a/src/components/NodeStats.vue
+++ b/src/components/NodeStats.vue
@@ -6,20 +6,17 @@ import { NODE_TYPE, NODE_TYPE_DISPLAY_NAME } from '@/core/typedefs'
 </script>
 
 <template>
-  <el-card class="card" v-if="SelectedNode > 0 && Network.Nodes.value[SelectedNode]!=undefined">
+  <el-card class="card" v-if="SelectedNode > 0 && Network.Nodes.value[SelectedNode] != undefined">
     <el-row :gutter="30">
       <el-col :span="11" align="center">
         <img :src="SelectedNode == 1 ? rpi4 : sensortag" />
       </el-col>
       <el-col :span="13">
         <span style="font-weight: 600; font-size: 0.9rem">
-          {{ NODE_TYPE_DISPLAY_NAME[NODE_TYPE[Network.Nodes.value[SelectedNode].type]] }}-{{
-            SelectedNode
-          }}
+          {{ NODE_TYPE_DISPLAY_NAME[NODE_TYPE[Network.Nodes.value[SelectedNode].type]] }}-{{ SelectedNode }}
         </span>
         <br />
-        - TX: {{ Network.Nodes.value[SelectedNode].tx_cnt }} , RX:
-        {{ Network.Nodes.value[SelectedNode].rx_cnt }}<br />
+        - TX: {{ Network.Nodes.value[SelectedNode].tx_cnt }} , RX: {{ Network.Nodes.value[SelectedNode].rx_cnt }}<br />
       </el-col>
     </el-row>
   </el-card>
diff --git a/src/components/TopoEditToolbox.vue b/src/components/TopoEditToolbox.vue
index fe3a975..8d12a78 100644
--- a/src/components/TopoEditToolbox.vue
+++ b/src/components/TopoEditToolbox.vue
@@ -45,12 +45,7 @@ const finishEdit = () => {
     <div class="flex-container">
       <span class="label-margin">Load preset:</span>
       <el-select class="dropdown" v-model="Network.SelectedTopo.value" style="margin-right: 55px">
-        <el-option
-          v-for="(_, name) in Network.PresetTopos"
-          :key="name"
-          :label="name"
-          :value="name"
-        />
+        <el-option v-for="(_, name) in Network.PresetTopos" :key="name" :label="name" :value="name" />
       </el-select>
     </div>
 
@@ -58,12 +53,7 @@ const finishEdit = () => {
       <span class="label-margin">Add node:</span>
       <el-select class="dropdown" v-model="nodeType">
         <el-option-group v-for="group in nodeTypes" :key="group.label" :label="group.label">
-          <el-option
-            v-for="item in group.types"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+          <el-option v-for="item in group.types" :key="item.value" :label="item.label" :value="item.value" />
         </el-option-group>
       </el-select>
 
@@ -80,7 +70,6 @@ const finishEdit = () => {
       <el-button class="circular-button" @click="finishEdit" type="danger" :icon="Check" circle />
     </div>
   </el-card>
-  
 </template>
 
 <style scoped>
diff --git a/src/components/icons/IconReset.vue b/src/components/icons/IconReset.vue
index 8c753c2..043ed9e 100644
--- a/src/components/icons/IconReset.vue
+++ b/src/components/icons/IconReset.vue
@@ -1,8 +1,6 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
     <path d="M0 0h24v24H0z" fill="none" />
-    <path
-      d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"
-    />
+    <path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" />
   </svg>
 </template>
diff --git a/src/core/network.ts b/src/core/network.ts
index 1a9e570..1ad624f 100644
--- a/src/core/network.ts
+++ b/src/core/network.ts
@@ -28,7 +28,12 @@ export class NetworkHub {
   Logs = ref<string[]>([])
   ASN = ref<number>(0) // absolute slot number
   Rand: SeededRandom
-  kdTree: KDTree // to find nearest neighbors
+
+  // to find nearest neighbors, only network devices are inserted in KDTrees
+  kdTreeAny: KDTree // any network devices
+  kdTreeTSCH: KDTree // TSCH only
+  kdTreeTSN: KDTree // TSN only
+  kdTreeFiveGgNB: KDTree // 5G gNB only
 
   PresetTopos: { [name: string]: any } = presetTopos
   SelectedTopo = ref('5G-TSN-TSCH') // realistic topo example
@@ -44,7 +49,10 @@ export class NetworkHub {
     this.Config = ref<Config>(config)
     this.Nodes = ref<Node[]>([<Node>{ id: 0 }]) // placeholder to let node_id start from 1
     this.Rand = new SeededRandom(this.Config.value.seed)
-    this.kdTree = new KDTree()
+    this.kdTreeAny = new KDTree()
+    this.kdTreeTSCH = new KDTree()
+    this.kdTreeTSN = new KDTree()
+    this.kdTreeFiveGgNB = new KDTree()
 
     watch(this.SelectedTopo, () => {
       this.LoadTopology()
@@ -86,16 +94,10 @@ export class NetworkHub {
   // forward physical layer pkt from each node
   handlePkt = (pkt: Packet) => {
     // check protocol type
-    if (
-      this.Nodes.value[pkt.mac_src].type == NODE_TYPE.TSCH ||
-      this.Nodes.value[pkt.mac_dst].type == NODE_TYPE.TSCH
-    ) {
+    if (this.Nodes.value[pkt.mac_src].type == NODE_TYPE.TSCH || this.Nodes.value[pkt.mac_dst].type == NODE_TYPE.TSCH) {
       pkt.protocol = PROTOCOL_TYPE.TSCH
     }
-    if (
-      this.Nodes.value[pkt.mac_src].type == NODE_TYPE.TSN ||
-      this.Nodes.value[pkt.mac_dst].type == NODE_TYPE.TSN
-    ) {
+    if (this.Nodes.value[pkt.mac_src].type == NODE_TYPE.TSN || this.Nodes.value[pkt.mac_dst].type == NODE_TYPE.TSN) {
       pkt.protocol = PROTOCOL_TYPE.TSN
     }
     if (
@@ -167,14 +169,10 @@ export class NetworkHub {
           // type: [0, 1, 2, 3, 11, 12, 13, 14, 15, 16, 17][
           //   Math.floor((this.Rand.next() * Object.keys(NODE_TYPE).length) / 2)
           // ],
-          type: [0, 1, 2, 3, 11, 12, 16][
-            Math.floor(this.Rand.next() * 7)
-          ],
+          type: [0, 1, 2, 3, 11, 12, 16][Math.floor(this.Rand.next() * 7)],
           pos: [
-            Math.floor(this.Rand.next() * this.Config.value.grid_size) -
-              this.Config.value.grid_size / 2,
-            Math.floor(this.Rand.next() * this.Config.value.grid_size) -
-              this.Config.value.grid_size / 2
+            Math.floor(this.Rand.next() * this.Config.value.grid_size) - this.Config.value.grid_size / 2,
+            Math.floor(this.Rand.next() * this.Config.value.grid_size) - this.Config.value.grid_size / 2
           ],
           neighbors: [],
           tx_cnt: 0,
@@ -198,76 +196,63 @@ export class NetworkHub {
   }
 
   EstablishConnection() {
-    this.kdTree = new KDTree()
+    this.kdTreeAny = new KDTree()
+    this.kdTreeTSCH = new KDTree()
+    this.kdTreeTSN = new KDTree()
+    this.kdTreeFiveGgNB = new KDTree()
     this.Links.value = []
     for (const n of this.Nodes.value) {
       if (n.id == 0 || n.type > 10) continue
-      this.kdTree.Insert(new KDNode(n.id, n.pos))
+      this.kdTreeAny.Insert(new KDNode(n.id, n.pos))
+      switch (n.type) {
+        case NODE_TYPE.TSCH:
+          this.kdTreeTSCH.Insert(new KDNode(n.id, n.pos))
+          break
+        case NODE_TYPE.TSN:
+          this.kdTreeTSN.Insert(new KDNode(n.id, n.pos))
+          break
+        case NODE_TYPE.FIVE_G_GNB:
+          this.kdTreeFiveGgNB.Insert(new KDNode(n.id, n.pos))
+          break
+        default:
+          break
+      }
     }
 
     for (const n of this.Nodes.value) {
       if (n.id == 0) continue
 
-      const neighbors: any = []
+      let neighbors: any = []
 
+      // actively find connections, final routing table will be based on the
+      // overall connected graph (Links), not just the neighbors of each node
       switch (n.type) {
-        // 5G UE connects to one 5G tower and multiple wired end systems
+        // 5G UE connects to one 5G tower
         case NODE_TYPE.FIVE_G_UE: {
-          const ueBsNeighbors = this.kdTree.FindKNearest(n.pos, 1, this.Config.value.tx_range)
-          const validUeBs = ueBsNeighbors.find(nn => this.Nodes.value[nn]?.type === NODE_TYPE.FIVE_G_GNB)
-          if (validUeBs !== undefined) neighbors.push(validUeBs)
-
-          const ueEndNeighbors = this.kdTree.FindKNearest(n.pos, 1000, 20)
-          const validUeEnd = ueEndNeighbors.find(nn => this.Nodes.value[nn]?.type >= NODE_TYPE.END_SYSTEM_SERVER)
-          if (validUeEnd !== undefined) neighbors.push(validUeEnd)
-
+          neighbors = this.kdTreeFiveGgNB.FindKNearest(n.pos, 1, this.Config.value.tx_range)
           break
         }
-        // 5G GNB connects to a TSN, an end system, and multiple 5G UEs
+        // 5G GNB connects to TSN bridges
         case NODE_TYPE.FIVE_G_GNB: {
-          const bsNeighbors = this.kdTree.FindKNearest(n.pos, 1, this.Config.value.tx_range)
-          const validGnbTsn = bsNeighbors.find(nn => this.Nodes.value[nn].type === NODE_TYPE.TSN)
-          const validBsEnd = bsNeighbors.find(nn => this.Nodes.value[nn].type >= NODE_TYPE.END_SYSTEM_SERVER)
-          if (validGnbTsn !== undefined) neighbors.push(validGnbTsn)
-          if (validBsEnd !== undefined) neighbors.push(validBsEnd)
-
-          const gnbUeNeighbors = this.kdTree.FindKNearest(n.pos, 1000, this.Config.value.tx_range)
-          const validUes = gnbUeNeighbors.filter(nn => this.Nodes.value[nn].type === NODE_TYPE.FIVE_G_UE)
-          neighbors.push(...validUes)
-
+          neighbors = this.kdTreeTSN.FindKNearest(n.pos, 2, this.Config.value.grid_size)
           break
         }
-        // TSCH node connects to multiple other TSCH nodes and wired end systems
+        // TSCH node connects to multiple other TSCH nodes and one TSN bridge
         case NODE_TYPE.TSCH: {
-          const tschNeighbors = this.kdTree.FindKNearest(n.pos, 1000, this.Config.value.tx_range)
-          const validTsch = tschNeighbors.filter(nn => this.Nodes.value[nn].type === NODE_TYPE.TSCH)
-          const validTschEnd = tschNeighbors.find(nn => this.Nodes.value[nn].type >= NODE_TYPE.END_SYSTEM_SERVER)
-          neighbors.push(...validTsch)
-          if (validTschEnd !== undefined) neighbors.push(validTschEnd)
+          neighbors = this.kdTreeTSCH.FindKNearest(n.pos, 1000, this.Config.value.tx_range)
+          neighbors.push(...this.kdTreeTSN.FindKNearest(n.pos, 1, 12))
           break
         }
-        // TSN bridge connects multiple TSN bridges, 5G tower and end systems
+        // TSN bridge connects multiple TSN bridges
         case NODE_TYPE.TSN: {
-          const tsnNeighbors = this.kdTree.FindKNearest(n.pos, 1000, this.Config.value.tx_range)
-          const validTsn = tsnNeighbors.filter(nn => this.Nodes.value[nn]?.type === NODE_TYPE.TSN)
-          const validFiveGnb = tsnNeighbors.find(nn => this.Nodes.value[nn]?.type === NODE_TYPE.FIVE_G_GNB)
-          const validTsnEnd = tsnNeighbors.find(nn => this.Nodes.value[nn]?.type >= NODE_TYPE.END_SYSTEM_SERVER)
-          neighbors.push(...validTsn)
-          if (validFiveGnb !== undefined) neighbors.push(validFiveGnb)
-          if (validTsnEnd !== undefined) neighbors.push(validTsnEnd)
-          
+          neighbors = this.kdTreeTSN.FindKNearest(n.pos, 1000, this.Config.value.tx_range)
           break
         }
         // end system connects to one network node
         default: {
-          const networkNeighbors = this.kdTree.FindKNearest(n.pos, 3, this.Config.value.grid_size)
-          const validNetwork = networkNeighbors.find(nn => 
-            this.Nodes.value[nn]?.type === NODE_TYPE.TSN || 
-            this.Nodes.value[nn]?.type === NODE_TYPE.TSCH || 
-            this.Nodes.value[nn]?.type === NODE_TYPE.FIVE_G_UE)
-          if (validNetwork !== undefined) neighbors.push(validNetwork)
+          neighbors = this.kdTreeAny.FindKNearest(n.pos, 1, this.Config.value.grid_size)
           break
-          }
+        }
       }
 
       n.neighbors = neighbors
@@ -331,8 +316,7 @@ export class NetworkHub {
       id: this.Nodes.value.length,
       type: type,
       pos: [
-        Math.floor(this.Rand.next() * this.Config.value.grid_size) -
-          this.Config.value.grid_size / 2,
+        Math.floor(this.Rand.next() * this.Config.value.grid_size) - this.Config.value.grid_size / 2,
         Math.floor(this.Rand.next() * this.Config.value.grid_size) - this.Config.value.grid_size / 2
       ],
       neighbors: [],
@@ -347,11 +331,10 @@ export class NetworkHub {
 
   AddLink(v1: number, v2: number) {
     if (v1 > v2) {
-      [v1, v2] = [v2, v1]
+      ;[v1, v2] = [v2, v1]
     }
     // Cantor pairing
     const uid = 0.5 * (v1 + v2) * (v1 + v2 + 1) + v2
-
     let type: number = LINK_TYPE.WIRELESS
     if (
       this.Nodes.value[v1].type == NODE_TYPE.TSN ||
diff --git a/src/core/node_end_system.ts b/src/core/node_end_system.ts
index f48c652..9710d4c 100644
--- a/src/core/node_end_system.ts
+++ b/src/core/node_end_system.ts
@@ -1,12 +1,5 @@
 import { Node } from './node'
-import {
-  PKT_TYPE,
-  type Message,
-  type Packet,
-  MSG_TYPE,
-  type ASNMsgPayload,
-  type InitMsgPayload
-} from './typedefs'
+import { PKT_TYPE, type Message, type Packet, MSG_TYPE, type ASNMsgPayload, type InitMsgPayload } from './typedefs'
 
 class EndSystem extends Node {
   constructor() {
diff --git a/src/core/node_five_g_gnb.ts b/src/core/node_five_g_gnb.ts
index 2eb21b3..ae5ec6f 100644
--- a/src/core/node_five_g_gnb.ts
+++ b/src/core/node_five_g_gnb.ts
@@ -1,12 +1,5 @@
 import { Node } from './node'
-import {
-  PKT_TYPE,
-  type Message,
-  type Packet,
-  MSG_TYPE,
-  type ASNMsgPayload,
-  type InitMsgPayload
-} from './typedefs'
+import { PKT_TYPE, type Message, type Packet, MSG_TYPE, type ASNMsgPayload, type InitMsgPayload } from './typedefs'
 
 class FiveGBS extends Node {
   constructor() {
diff --git a/src/core/node_five_g_ue.ts b/src/core/node_five_g_ue.ts
index 154b493..f5fd441 100644
--- a/src/core/node_five_g_ue.ts
+++ b/src/core/node_five_g_ue.ts
@@ -1,12 +1,5 @@
 import { Node } from './node'
-import {
-  PKT_TYPE,
-  type Message,
-  type Packet,
-  MSG_TYPE,
-  type ASNMsgPayload,
-  type InitMsgPayload
-} from './typedefs'
+import { PKT_TYPE, type Message, type Packet, MSG_TYPE, type ASNMsgPayload, type InitMsgPayload } from './typedefs'
 
 class FiveGUE extends Node {
   constructor() {
diff --git a/src/core/node_tsch.ts b/src/core/node_tsch.ts
index fc9b63f..b978f37 100644
--- a/src/core/node_tsch.ts
+++ b/src/core/node_tsch.ts
@@ -1,12 +1,5 @@
 import { Node } from './node'
-import {
-  PKT_TYPE,
-  type Message,
-  type Packet,
-  MSG_TYPE,
-  type ASNMsgPayload,
-  type InitMsgPayload
-} from './typedefs'
+import { PKT_TYPE, type Message, type Packet, MSG_TYPE, type ASNMsgPayload, type InitMsgPayload } from './typedefs'
 
 class TSCHNode extends Node {
   constructor() {
diff --git a/src/core/node_tsn.ts b/src/core/node_tsn.ts
index 46ce14c..88d7012 100644
--- a/src/core/node_tsn.ts
+++ b/src/core/node_tsn.ts
@@ -1,12 +1,5 @@
 import { Node } from './node'
-import {
-  PKT_TYPE,
-  type Message,
-  type Packet,
-  MSG_TYPE,
-  type ASNMsgPayload,
-  type InitMsgPayload
-} from './typedefs'
+import { PKT_TYPE, type Message, type Packet, MSG_TYPE, type ASNMsgPayload, type InitMsgPayload } from './typedefs'
 
 class TSNNode extends Node {
   constructor() {
diff --git a/src/core/preset_topologies.json b/src/core/preset_topologies.json
index ee882ac..db57b00 100644
--- a/src/core/preset_topologies.json
+++ b/src/core/preset_topologies.json
@@ -1,252 +1,180 @@
 {
-    "Scratch": {
-        "nodes": []
-    },
-    "Random": {
-        "nodes": []
-    },
-    "5G single-cell": {
-        "nodes": [
-            {
-                "id": 1,
-                "type": 2,
-                "pos": [
-                    0,
-                    0
-                ]
-            },
-            {
-                "id": 2,
-                "type": 3,
-                "pos": [
-                    -20,
-                    0
-                ]
-            },
-            {
-                "id": 3,
-                "type": 3,
-                "pos": [
-                    20,
-                    0
-                ]
-            },
-            {
-                "id": 4,
-                "type": 3,
-                "pos": [
-                    0,
-                    20
-                ]
-            }
-        ]
-    },
-    "6TiSCH tree": {
-        "nodes": [
-            {
-                "id": 1,
-                "type": 0,
-                "pos": [
-                    0,
-                    0
-                ]
-            },
-            {
-                "id": 2,
-                "type": 0,
-                "pos": [
-                    10,
-                    10
-                ]
-            },
-            {
-                "id": 3,
-                "type": 0,
-                "pos": [
-                    -10,
-                    10
-                ]
-            }
-        ]
-    },
-    "5G-TSN-TSCH": {
-        "nodes": [
-            {
-                "id": 1,
-                "type": 1,
-                "pos": [
-                    -10,
-                    -10
-                ]
-            },
-            {
-                "id": 2,
-                "type": 1,
-                "pos": [
-                    10,
-                    -10
-                ]
-            },
-            {
-                "id": 3,
-                "type": 1,
-                "pos": [
-                    10,
-                    10
-                ]
-            },
-            {
-                "id": 4,
-                "type": 1,
-                "pos": [
-                    -10,
-                    10
-                ]
-            },
-            {
-                "id": 5,
-                "type": 1,
-                "pos": [
-                    -25,
-                    -20
-                ]
-            },
-            {
-                "id": 6,
-                "type": 1,
-                "pos": [
-                    25,
-                    -20
-                ]
-            },
-            {
-                "id": 7,
-                "type": 1,
-                "pos": [
-                    25,
-                    20
-                ]
-            },
-            {
-                "id": 8,
-                "type": 1,
-                "pos": [
-                    -25,
-                    20
-                ]
-            },
-            {
-                "id": 9,
-                "type": 1,
-                "pos": [
-                    -40,
-                    -10
-                ]
-            },
-            {
-                "id": 10,
-                "type": 1,
-                "pos": [
-                    40,
-                    -10
-                ]
-            },
-            {
-                "id": 11,
-                "type": 1,
-                "pos": [
-                    -40,
-                    10
-                ]
-            },
-            {
-                "id": 12,
-                "type": 1,
-                "pos": [
-                    40,
-                    10
-                ]
-            },
-            {
-                "id": 13,
-                "type": 16,
-                "pos": [
-                    -40,
-                    -20
-                ]
-            },
-            {
-                "id": 14,
-                "type": 16,
-                "pos": [
-                    40,
-                    20
-                ]
-            },
-            {
-                "id": 15,
-                "type": 12,
-                "pos": [
-                    -25,
-                    45
-                ]
-            },
-            {
-                "id": 16,
-                "type": 13,
-                "pos": [
-                    45,
-                    -25
-                ]
-            },
-            {
-                "id": 18,
-                "type": 11,
-                "pos": [
-                    30,
-                    -30
-                ]
-            },
-            {
-                "id": 19,
-                "type": 11,
-                "pos": [
-                    25,
-                    30
-                ]
-            },
-            {
-                "id": 20,
-                "type": 11,
-                "pos": [
-                    -25,
-                    -30
-                ]
-            },
-            {
-                "id": 21,
-                "type": 11,
-                "pos": [
-                    -40,
-                    20
-                ]
-            },
-            {
-                "id": 22,
-                "type": 3,
-                "pos": [
-                    -20,
-                    40
-                ]
-            },
-            {
-                "id": 23,
-                "type": 2,
-                "pos": [
-                    -20,
-                    30
-                ]
-            }
-        ]
-    }
-}
\ No newline at end of file
+  "Scratch": {
+    "nodes": []
+  },
+  "Random": {
+    "nodes": []
+  },
+  "5G single-cell": {
+    "nodes": [
+      {
+        "id": 1,
+        "type": 2,
+        "pos": [0, 0]
+      },
+      {
+        "id": 2,
+        "type": 3,
+        "pos": [-20, 0]
+      },
+      {
+        "id": 3,
+        "type": 3,
+        "pos": [20, 0]
+      },
+      {
+        "id": 4,
+        "type": 3,
+        "pos": [0, 20]
+      }
+    ]
+  },
+  "6TiSCH tree": {
+    "nodes": [
+      {
+        "id": 1,
+        "type": 0,
+        "pos": [0, 0]
+      },
+      {
+        "id": 2,
+        "type": 0,
+        "pos": [10, 10]
+      },
+      {
+        "id": 3,
+        "type": 0,
+        "pos": [-10, 10]
+      }
+    ]
+  },
+  "5G-TSN-TSCH": {
+    "nodes": [
+      {
+        "id": 1,
+        "type": 1,
+        "pos": [-10, -10]
+      },
+      {
+        "id": 2,
+        "type": 1,
+        "pos": [10, -10]
+      },
+      {
+        "id": 3,
+        "type": 1,
+        "pos": [10, 10]
+      },
+      {
+        "id": 4,
+        "type": 1,
+        "pos": [-10, 10]
+      },
+      {
+        "id": 5,
+        "type": 1,
+        "pos": [-25, -20]
+      },
+      {
+        "id": 6,
+        "type": 1,
+        "pos": [25, -20]
+      },
+      {
+        "id": 7,
+        "type": 1,
+        "pos": [25, 20]
+      },
+      {
+        "id": 8,
+        "type": 2,
+        "pos": [-25, 20]
+      },
+      {
+        "id": 9,
+        "type": 1,
+        "pos": [-40, -10]
+      },
+      {
+        "id": 10,
+        "type": 1,
+        "pos": [40, -10]
+      },
+      {
+        "id": 11,
+        "type": 1,
+        "pos": [-40, 10]
+      },
+      {
+        "id": 12,
+        "type": 1,
+        "pos": [40, 10]
+      },
+      {
+        "id": 13,
+        "type": 16,
+        "pos": [-40, -20]
+      },
+      {
+        "id": 14,
+        "type": 16,
+        "pos": [40, 20]
+      },
+      {
+        "id": 15,
+        "type": 12,
+        "pos": [-20, 40]
+      },
+      {
+        "id": 16,
+        "type": 12,
+        "pos": [45, -20]
+      },
+      {
+        "id": 17,
+        "type": 16,
+        "pos": [-30, 40]
+      },
+      {
+        "id": 18,
+        "type": 0,
+        "pos": [20, -40]
+      },
+      {
+        "id": 19,
+        "type": 11,
+        "pos": [25, 30]
+      },
+      {
+        "id": 20,
+        "type": 11,
+        "pos": [-25, -30]
+      },
+      {
+        "id": 21,
+        "type": 11,
+        "pos": [-40, 20]
+      },
+      {
+        "id": 22,
+        "type": 3,
+        "pos": [-20, 30]
+      },
+      {
+        "id": 23,
+        "type": 3,
+        "pos": [-30, 30]
+      },
+      {
+        "id": 24,
+        "type": 0,
+        "pos": [15, -30]
+      },
+      {
+        "id": 25,
+        "type": 0,
+        "pos": [30, -30]
+      }
+    ]
+  }
+}
diff --git a/src/hooks/useDrawMiniMap.ts b/src/hooks/useDrawMiniMap.ts
index 46d2df4..69c74f4 100644
--- a/src/hooks/useDrawMiniMap.ts
+++ b/src/hooks/useDrawMiniMap.ts
@@ -16,8 +16,8 @@ export function useDrawMiniMap(chartDom: HTMLElement) {
       axisLine: { show: false },
       axisTick: { show: false },
       axisLabel: { show: false },
-      min: -(Network.Config.value.grid_size + 10) / 2,
-      max: (Network.Config.value.grid_size + 10) / 2,
+      min: -Network.Config.value.grid_size / 2 - 10,
+      max: Network.Config.value.grid_size / 2 + 10,
       zlevel: -4
     },
     yAxis: {
@@ -27,8 +27,8 @@ export function useDrawMiniMap(chartDom: HTMLElement) {
       axisLine: { show: false },
       axisTick: { show: false },
       axisLabel: { show: false },
-      min: -(Network.Config.value.grid_size + 10) / 2,
-      max: (Network.Config.value.grid_size + 10) / 2,
+      min: -Network.Config.value.grid_size / 2 - 10,
+      max: Network.Config.value.grid_size / 2 + 10,
       zlevel: -4,
       inverse: true
     },
diff --git a/src/hooks/useDrawTopology.ts b/src/hooks/useDrawTopology.ts
index fd242db..dd49935 100644
--- a/src/hooks/useDrawTopology.ts
+++ b/src/hooks/useDrawTopology.ts
@@ -14,15 +14,7 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { DragControls } from 'three/examples/jsm/controls/DragControls.js'
 import Stats from 'three/examples/jsm/libs/stats.module'
 import * as TWEEN from '@tweenjs/tween.js'
-import {
-  type Node,
-  NODE_TYPE,
-  ADDR,
-  type Packet,
-  type Link,
-  LINK_TYPE,
-  NODE_TYPE_DISPLAY_NAME
-} from '@/core/typedefs'
+import { type Node, NODE_TYPE, ADDR, type Packet, type Link, LINK_TYPE, NODE_TYPE_DISPLAY_NAME } from '@/core/typedefs'
 
 export async function useDrawTopology(dom: HTMLElement) {
   const scene = new THREE.Scene()
@@ -137,17 +129,10 @@ export async function useDrawTopology(dom: HTMLElement) {
   const modelTemplates: { [type: number]: any } = {}
   const loadGLTFModels = async () => {
     Network.Logs.value.unshift(
-      `Loading resources...${1 + Object.keys(modelTemplates).length}/${
-        Object.keys(NODE_TYPE).length / 2
-      }`
+      `Loading resources...${1 + Object.keys(modelTemplates).length}/${Object.keys(NODE_TYPE).length / 2}`
     )
     const loader = new GLTFLoader(loadingManager)
-    const loadModel = async (
-      type: number,
-      modelPath: string,
-      scaleFactor: number,
-      rotationY: number
-    ) => {
+    const loadModel = async (type: number, modelPath: string, scaleFactor: number, rotationY: number) => {
       const gltf: any = await new Promise((resolve) => {
         loader.load(modelPath, (gltf: any) => resolve(gltf))
       })
@@ -165,51 +150,16 @@ export async function useDrawTopology(dom: HTMLElement) {
       modelTemplates[type] = modelTemplate
     }
 
-    await loadModel(
-      NODE_TYPE.TSCH,
-      '/models/wi-fi_router/scene.gltf',
-      1.6,
-      -Math.PI / 2
-    )
+    await loadModel(NODE_TYPE.TSCH, '/models/wi-fi_router/scene.gltf', 1.6, -Math.PI / 2)
     await loadModel(NODE_TYPE.TSN, '/models/switch/scene.gltf', 7, 0)
     await loadModel(NODE_TYPE.FIVE_G_GNB, '/models/5g_tower/scene.gltf', 6, 0)
     await loadModel(NODE_TYPE.FIVE_G_UE, '/models/5g_ue/scene.gltf', 0.5, -Math.PI / 2)
-    await loadModel(
-      NODE_TYPE.END_SYSTEM_SERVER,
-      '/models/es/server/scene.gltf',
-      1.5,
-      Math.PI / 2
-    )
-    await loadModel(
-      NODE_TYPE.END_SYSTEM_SENSOR_CAMERA,
-      '/models/es/sensor_camera/scene.glb',
-      2,
-      -Math.PI / 3
-    )
-    await loadModel(
-      NODE_TYPE.END_SYSTEM_SENSOR_TEMP,
-      '/models/es/sensor_temp/scene.gltf',
-      12,
-      -Math.PI / 3
-    )
-    await loadModel(
-      NODE_TYPE.END_SYSTEM_SENSOR_HUMIDITY,
-      '/models/es/sensor_humidity/scene.gltf',
-      100,
-      -Math.PI / 3
-    )
-    await loadModel(
-      NODE_TYPE.END_SYSTEM_SENSOR_PRESSURE,
-      '/models/es/sensor_pressure/scene.gltf',
-      16,
-      -Math.PI / 3
-    )
-    await loadModel(
-      NODE_TYPE.END_SYSTEM_ACTUATOR_ROBOTIC_ARM,
-      '/models/es/robotic_arm/scene.gltf',
-      .004,
-      -Math.PI / 2
-    )
+    await loadModel(NODE_TYPE.END_SYSTEM_SERVER, '/models/es/server/scene.gltf', 1.5, Math.PI / 2)
+    await loadModel(NODE_TYPE.END_SYSTEM_SENSOR_CAMERA, '/models/es/sensor_camera/scene.glb', 2, -Math.PI / 3)
+    await loadModel(NODE_TYPE.END_SYSTEM_SENSOR_TEMP, '/models/es/sensor_temp/scene.gltf', 12, -Math.PI / 3)
+    await loadModel(NODE_TYPE.END_SYSTEM_SENSOR_HUMIDITY, '/models/es/sensor_humidity/scene.gltf', 100, -Math.PI / 3)
+    await loadModel(NODE_TYPE.END_SYSTEM_SENSOR_PRESSURE, '/models/es/sensor_pressure/scene.gltf', 16, -Math.PI / 3)
+    await loadModel(NODE_TYPE.END_SYSTEM_ACTUATOR_ROBOTIC_ARM, '/models/es/robotic_arm/scene.gltf', 0.004, -Math.PI / 2)
     await loadModel(
       NODE_TYPE.END_SYSTEM_ACTUATOR_PNEUMATIC,
       '/models/es/actuator_pneumatic/scene.gltf',
@@ -436,15 +386,7 @@ export async function useDrawTopology(dom: HTMLElement) {
     }
   }
   const drawBeaconPacket = (pkt: Packet) => {
-    const geometry = new THREE.SphereGeometry(
-      Network.Config.value.tx_range,
-      32,
-      32,
-      0,
-      Math.PI,
-      0,
-      -Math.PI
-    )
+    const geometry = new THREE.SphereGeometry(Network.Config.value.tx_range, 32, 32, 0, Math.PI, 0, -Math.PI)
     const material = new THREE.MeshBasicMaterial({
       color: 'skyblue',
       opacity: 0.33,
@@ -602,10 +544,7 @@ export async function useDrawTopology(dom: HTMLElement) {
       event.object.position.y = 0
 
       if (NODE_TYPE[event.object.userData.type] != undefined) {
-        Network.Nodes.value[event.object.userData.node_id].pos = [
-          event.object.position.x,
-          event.object.position.z
-        ]
+        Network.Nodes.value[event.object.userData.node_id].pos = [event.object.position.x, event.object.position.z]
 
         for (const l of relatedLinks) {
           clearLink(l.link.uid)
@@ -626,11 +565,7 @@ export async function useDrawTopology(dom: HTMLElement) {
         node.model.position.copy(node.dragBox.position)
         node.dragBoxHelper.update()
         if (node.label != undefined) {
-          node.label.position.set(
-            node.dragBox.position.x,
-            node.label.position.y,
-            node.dragBox.position.z
-          )
+          node.label.position.set(node.dragBox.position.x, node.label.position.y, node.dragBox.position.z)
         }
       }
     })
diff --git a/src/utils/kdtree.ts b/src/utils/kdtree.ts
index 87f4cba..4d6d8ef 100644
--- a/src/utils/kdtree.ts
+++ b/src/utils/kdtree.ts
@@ -50,16 +50,12 @@ export class KDTree {
 
     const d = this._distanceSquared(current.pos, pos)
     if (!(current.pos[0] == pos[0] && current.pos[1] == pos[1]) && d <= range) {
-      
       if (nearestNodes.length < k) {
         nearestNodes.push(current)
       } else if (d < this._distanceSquared(pos, nearestNodes[k - 1].pos)) {
         nearestNodes[k - 1] = current
       }
-      nearestNodes.sort(
-        (a: KDNode, b: KDNode) =>
-          this._distanceSquared(pos, a.pos) - this._distanceSquared(pos, b.pos)
-      )
+      nearestNodes.sort((a: KDNode, b: KDNode) => this._distanceSquared(pos, a.pos) - this._distanceSquared(pos, b.pos))
     }
 
     const cd = depth % 2
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 8f1005d..f6e3226 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -15,30 +15,20 @@ import EventLogs from '@/components/EventLogs.vue'
 
 <template>
   <transition name="el-zoom-in-center">
-    <SettingsPanel
-      style="position: absolute; left: 25%; width: 50%; top: 14%; height: 64%; z-index: 9999"
-    />
+    <SettingsPanel style="position: absolute; left: 25%; width: 50%; top: 14%; height: 64%; z-index: 9999" />
   </transition>
   <MenuBar style="position: absolute; top: 16px; left: 16px; width: 150px; z-index: 999" />
   <TopoEditToolbox
     v-show="SignalEditTopology"
     style="position: absolute; top: 48px; left: 16px; width: 320px; z-index: 999"
   />
-  <ControlPanel
-    style="position: absolute; top: 16px; left: 40%; min-width: 336px; width: 20%; z-index: 999"
-  />
+  <ControlPanel style="position: absolute; top: 16px; left: 40%; min-width: 336px; width: 20%; z-index: 999" />
   <EventLogs style="position: absolute; left: 16px; z-index: 999" />
-  <NodeStats
-    style="position: absolute; bottom: 16px; left: 38%; width: 26%; min-width: 400px; z-index: 999"
-  />
+  <NodeStats style="position: absolute; bottom: 16px; left: 38%; width: 26%; min-width: 400px; z-index: 999" />
   <Topology style="position: absolute; z-index: 10" />
   <MiniMap style="position: absolute; bottom: 16px; left: 16px; z-index: 999" />
-  <FlowsPanelVue
-    style="position: absolute; bottom: 480px; right: 16px; width: 380px; z-index: 999"
-  />
-  <PacketSniffer
-    style="position: absolute; bottom: 16px; right: 16px; width: 380px; z-index: 999"
-  />
+  <FlowsPanelVue style="position: absolute; bottom: 480px; right: 16px; width: 380px; z-index: 999" />
+  <PacketSniffer style="position: absolute; bottom: 16px; right: 16px; width: 380px; z-index: 999" />
   <!-- <transition name="el-zoom-in-center">
     <ScheduleTable
       style="position: absolute; left: 16px; top: 48px; min-width: 336px; width: 32%; z-index: 999"