From 71fd90f44eeea1f7f73cd835bbea31f14a95225e Mon Sep 17 00:00:00 2001
From: AmyangXYZ <amyang.xyz@gmail.com>
Date: Sat, 6 Jan 2024 18:44:01 -0500
Subject: [PATCH] add loadPresetTopo

---
 public/topologies/example.json     |  21 ----
 src/components/NodeStats.vue       |   2 +-
 src/components/TopoEditToolbox.vue | 103 +++++++++---------
 src/core/network.ts                |  76 +++++++++----
 src/core/node_five_g_ue.ts         |   4 +
 src/core/preset_topologies.json    |  72 +++++++++++++
 src/hooks/useDrawTopology.ts       | 167 ++++++++++++++++-------------
 src/hooks/useStates.ts             |   2 +-
 8 files changed, 277 insertions(+), 170 deletions(-)
 delete mode 100644 public/topologies/example.json
 create mode 100644 src/core/preset_topologies.json

diff --git a/public/topologies/example.json b/public/topologies/example.json
deleted file mode 100644
index e3722bc..0000000
--- a/public/topologies/example.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-    "name": "example",
-    "nodes": [
-        {
-            "id": 1,
-            "type": 2,
-            "pos": [
-                0,
-                0
-            ]
-        },
-        {
-            "id": 1,
-            "type": 2,
-            "pos": [
-                0,
-                0
-            ]
-        }
-    ]
-}
\ No newline at end of file
diff --git a/src/components/NodeStats.vue b/src/components/NodeStats.vue
index 599b6e1..820e873 100644
--- a/src/components/NodeStats.vue
+++ b/src/components/NodeStats.vue
@@ -6,7 +6,7 @@ import { NODE_TYPE, NODE_TYPE_DISPLAY_NAME } from '@/core/typedefs'
 </script>
 
 <template>
-  <el-card class="card" v-show="SelectedNode > 0">
+  <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" />
diff --git a/src/components/TopoEditToolbox.vue b/src/components/TopoEditToolbox.vue
index 7f8ad14..91f0fee 100644
--- a/src/components/TopoEditToolbox.vue
+++ b/src/components/TopoEditToolbox.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Network, SignalEditTopology, SignalUpdateTopology } from '@/hooks/useStates'
+import { Network, SignalEditTopology, SignalAddNode } from '@/hooks/useStates'
 import { Check, Plus, Switch } from '@element-plus/icons-vue'
 
 const nodeType = ref(0)
@@ -25,15 +25,13 @@ const nodeTypes = [
   }
 ]
 
-const presetTopos: any = []
-
 const addNode = () => {
   Network.AddNode(nodeType.value)
-  SignalUpdateTopology.value++
+  SignalAddNode.value++
 }
 const connect = () => {
   Network.EstablishConnection()
-  SignalUpdateTopology.value++
+  SignalAddNode.value++
 }
 const finishEdit = () => {
   Network.StartWebWorkers()
@@ -42,59 +40,68 @@ const finishEdit = () => {
 </script>
 
 <template>
-  <el-card class="card">
-    <el-row :gutter="30">
-      <el-col
-        >Load preset topology:<el-select>
+  <el-card class="card p-4">
+    <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-select>
+    </div>
+
+    <div class="flex-container mt-4">
+      <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
-            class="item"
-            v-for="item in presetTopos"
+            v-for="item in group.types"
             :key="item.value"
             :label="item.label"
             :value="item.value"
-          /> </el-select
-      ></el-col>
-    </el-row>
-    <el-row :gutter="30">
-      <el-col>
-        Add a
-        <el-select v-model="nodeType">
-          <el-option-group v-for="group in nodeTypes" :key="group.label" :label="group.label">
-            <el-option
-              class="item"
-              v-for="item in group.types"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-option-group>
-        </el-select>
-        <el-button size="small" @click="addNode" type="primary" :icon="Plus" circle />
-      </el-col>
-    </el-row>
-    <el-row :gutter="30">
-      <el-col>
-        Connect<el-button size="small" @click="connect" type="info" :icon="Switch" circle />
-      </el-col>
-    </el-row>
+          />
+        </el-option-group>
+      </el-select>
+
+      <el-button class="circular-button" @click="addNode" type="primary" :icon="Plus" circle />
+    </div>
 
-    <el-row :gutter="30">
-      <el-col>
-        Finish<el-button size="small" @click="finishEdit" type="danger" :icon="Check" circle />
-      </el-col>
-    </el-row>
+    <div class="flex-container mt-4">
+      <span class="label-margin">Connect</span>
+      <el-button class="circular-button" @click="connect" type="info" :icon="Switch" circle />
+    </div>
+
+    <div class="flex-container mt-4">
+      <span class="label-margin">Finish</span>
+      <el-button class="circular-button" @click="finishEdit" type="danger" :icon="Check" circle />
+    </div>
   </el-card>
 </template>
 
 <style scoped>
 .card {
-  /* margin-top: 2px; */
-  height: 150px;
-  /* background-color:white; */
-  /* width: 380px; */
-  font-size: 0.87rem;
+  padding: 10px;
+}
+.flex-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+}
+.label-margin {
+  margin-right: 8px;
+}
+.dropdown {
+  width: 120px;
+}
+.el-select-dropdown__item {
+  line-height: 25px;
+  height: 25px;
+}
+.circular-button {
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
 }
-.item {
-  font-size: 0.82rem;
+.button-margin {
+  margin-left: 8px;
 }
 </style>
diff --git a/src/core/network.ts b/src/core/network.ts
index cafc873..1d5e94b 100644
--- a/src/core/network.ts
+++ b/src/core/network.ts
@@ -16,6 +16,8 @@ import {
 } from './typedefs'
 import { SeededRandom } from '@/utils/rand'
 
+import presetTopos from './preset_topologies.json'
+
 export class NetworkHub {
   Config: Ref<Config>
   Nodes: Ref<Node[]>
@@ -28,6 +30,9 @@ export class NetworkHub {
   Rand: SeededRandom
   kdTree: KDTree // to find nearest neighbors
 
+  PresetTopos: { [name: string]: any } = presetTopos
+  SelectedTopo = ref('Random')
+
   asnTimer: any
   SignalReset = ref(0)
   SlotDone = ref(false)
@@ -41,6 +46,10 @@ export class NetworkHub {
     this.Rand = new SeededRandom(this.Config.value.seed)
     this.kdTree = new KDTree()
 
+    watch(this.SelectedTopo, () => {
+      this.LoadTopology()
+    })
+
     watch(this.ASN, () => {
       if (this.ASN.value > 0) {
         this.doneCnt = 0
@@ -111,28 +120,51 @@ export class NetworkHub {
     this.Packets.value.push(pkt)
     this.PacketsCurrent.value.push(pkt)
   }
-  clearNodes() {}
-  LoadTopology(name: string) {
-    for (let i = 1; i <= this.Config.value.num_nodes; i++) {
-      const n = <Node>{
-        id: this.Nodes.value.length,
-        type: [0, 1, 2, 3, 11, 12, 13][
-          Math.floor((this.Rand.next() * Object.keys(NODE_TYPE).length) / 2)
-        ],
-        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
-        ],
-        neighbors: [],
-        tx_cnt: 0,
-        rx_cnt: 0,
-        w: undefined
+  clearNodes() {
+    for (const n of this.Nodes.value) {
+      if (n.id == 0) continue
+      if (n.w != undefined) {
+        n.w.terminate()
+      }
+    }
+    this.Nodes.value = [<Node>{ id: 0 }] // placeholder to let node_id start from 1
+    this.Links.value = []
+  }
+  LoadTopology() {
+    this.clearNodes()
+
+    if (this.SelectedTopo.value == 'Random') {
+      for (let i = 1; i <= this.Config.value.num_nodes; i++) {
+        const n = <Node>{
+          id: this.Nodes.value.length,
+          type: [0, 1, 2, 3, 11, 12, 13][
+            Math.floor((this.Rand.next() * Object.keys(NODE_TYPE).length) / 2)
+          ],
+          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
+          ],
+          neighbors: [],
+          tx_cnt: 0,
+          rx_cnt: 0,
+          w: undefined
+        }
+        this.Nodes.value.push(n)
+      }
+    } else {
+      const topo = this.PresetTopos[this.SelectedTopo.value]
+      for (const n of topo.nodes) {
+        this.Nodes.value.push(<Node>{
+          id: n.id,
+          type: n.type,
+          pos: n.pos
+        })
       }
-      this.Nodes.value.push(n)
     }
-    this.Logs.value.unshift(`Loaded topology: {${name}}.`)
+
+    this.Logs.value.unshift(`Loaded topology: {${this.SelectedTopo.value}}.`)
   }
 
   EstablishConnection() {
@@ -235,9 +267,9 @@ export class NetworkHub {
     let type: number = LINK_TYPE.WIRELESS
     if (
       this.Nodes.value[v1].type == NODE_TYPE.TSN ||
-      this.Nodes.value[v1].type >= 4 || // is a end system
+      this.Nodes.value[v1].type >= 10 || // is a end system
       this.Nodes.value[v2].type == NODE_TYPE.TSN ||
-      this.Nodes.value[v2].type >= 4
+      this.Nodes.value[v2].type >= 10
     ) {
       type = LINK_TYPE.WIRED
     }
diff --git a/src/core/node_five_g_ue.ts b/src/core/node_five_g_ue.ts
index b7e9e91..154b493 100644
--- a/src/core/node_five_g_ue.ts
+++ b/src/core/node_five_g_ue.ts
@@ -13,6 +13,7 @@ class FiveGUE extends Node {
     super()
     this.registerMsgHandler(MSG_TYPE.INIT, this.initMsgHandler)
     this.registerMsgHandler(MSG_TYPE.ASN, this.asnMsgHandler)
+    this.registerPktHandler(PKT_TYPE.DATA, this.dataPktHandler)
   }
   initMsgHandler = (msg: Message) => {
     const payload: InitMsgPayload = msg.payload
@@ -29,5 +30,8 @@ class FiveGUE extends Node {
       type: MSG_TYPE.DONE
     })
   }
+  dataPktHandler = (pkt: Packet) => {
+    // console.log('tsn', pkt)
+  }
 }
 new FiveGUE().Run()
diff --git a/src/core/preset_topologies.json b/src/core/preset_topologies.json
new file mode 100644
index 0000000..d115458
--- /dev/null
+++ b/src/core/preset_topologies.json
@@ -0,0 +1,72 @@
+{
+    "Scratch": {
+        "nodes": []
+    },
+    "Random": {
+        "nodes": []
+    },
+    "5G single-cell": {
+        "nodes": [
+            {
+                "id": 1,
+                "type": 2,
+                "pos": [
+                    0,
+                    0
+                ]
+            },
+            {
+                "id": 2,
+                "type": 3,
+                "pos": [
+                    20,
+                    20
+                ]
+            },
+            {
+                "id": 3,
+                "type": 3,
+                "pos": [
+                    -20,
+                    20
+                ]
+            },
+            {
+                "id": 4,
+                "type": 3,
+                "pos": [
+                    0,
+                    25
+                ]
+            }
+        ]
+    },
+    "6TiSCH tree": {
+        "nodes": [
+            {
+                "id": 1,
+                "type": 0,
+                "pos": [
+                    0,
+                    0
+                ]
+            },
+            {
+                "id": 2,
+                "type": 0,
+                "pos": [
+                    10,
+                    10
+                ]
+            },
+            {
+                "id": 3,
+                "type": 0,
+                "pos": [
+                    -10,
+                    10
+                ]
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/hooks/useDrawTopology.ts b/src/hooks/useDrawTopology.ts
index da571d7..cb3ceaf 100644
--- a/src/hooks/useDrawTopology.ts
+++ b/src/hooks/useDrawTopology.ts
@@ -4,7 +4,7 @@ import {
   SelectedNode,
   SignalEditTopology,
   SignalResetCamera,
-  SignalUpdateTopology
+  SignalAddNode
 } from './useStates'
 
 import * as THREE from 'three'
@@ -33,7 +33,7 @@ export async function useDrawTopology(dom: HTMLElement) {
   renderer.shadowMap.enabled = true
   renderer.setPixelRatio(window.devicePixelRatio)
   dom.appendChild(renderer.domElement)
-  const objectsToDrag: any = []
+  let objectsToDrag: any = []
 
   const stats = new Stats()
   stats.dom.style.position = 'fixed'
@@ -251,6 +251,9 @@ export async function useDrawTopology(dom: HTMLElement) {
       scene.remove(node.dragBoxHelper)
     }
     drawnNodes = {}
+    dragControls.dispose()
+    objectsToDrag = []
+    createDragControls()
   }
 
   let drawnLinks: { [uid: number]: { mesh: any; link: Link } } = {}
@@ -510,6 +513,82 @@ export async function useDrawTopology(dom: HTMLElement) {
     stats.update()
   }
 
+  let dragControls: DragControls
+  const createDragControls = () => {
+    dragControls = new DragControls(objectsToDrag, camera, renderer.domElement)
+    let relatedLinks: any = []
+    let relatedUnicastPackets: any = []
+    let relatedBeaconPacket: any = undefined
+    if (!SignalEditTopology.value) {
+      dragControls.deactivate()
+    }
+    dragControls.addEventListener('dragstart', function (event: any) {
+      if (NODE_TYPE[event.object.userData.type] != undefined) {
+        const node = event.object.userData.node_id
+        for (const l of Object.values(drawnLinks)) {
+          if (l.link.v1 == node || l.link.v2 == node) {
+            relatedLinks.push(l)
+          }
+        }
+        for (const u of Object.values(drawnUnicastPackets)) {
+          if (u.mac_src == node || u.mac_dst == node) {
+            relatedUnicastPackets.push(u)
+          }
+        }
+        for (const b of Object.values(drawnBeaconPackets)) {
+          if (b.mac_src == node) {
+            relatedBeaconPacket = b
+            break
+          }
+        }
+      }
+      controls.enabled = false
+    })
+    dragControls.addEventListener('dragend', function () {
+      relatedLinks = []
+      relatedUnicastPackets = []
+      relatedBeaconPacket = undefined
+      controls.enabled = true
+    })
+    dragControls.addEventListener('drag', function (event: any) {
+      // snap to ground
+      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
+        ]
+
+        for (const l of relatedLinks) {
+          clearLink(l.link.uid)
+          drawLink(l.link)
+        }
+        for (const pkt of relatedUnicastPackets) {
+          clearPacket(pkt.uid)
+          drawUnicastPacket(pkt)
+        }
+        if (relatedBeaconPacket != undefined) {
+          clearPacket(relatedBeaconPacket.uid)
+          drawBeaconPacket(relatedBeaconPacket)
+        }
+      }
+
+      // update dragbox and model
+      for (const node of Object.values(drawnNodes)) {
+        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
+          )
+        }
+      }
+    })
+  }
+
   // ###### main #######
   setCamera()
   addLights()
@@ -517,19 +596,25 @@ export async function useDrawTopology(dom: HTMLElement) {
   animate()
 
   await loadGLTFModels()
-  Network.LoadTopology('default-random')
+  Network.LoadTopology()
   drawNodes()
+  createDragControls()
   Network.EstablishConnection()
   Network.StartWebWorkers()
 
   drawLinks()
   // ###################
 
-  watch(SignalUpdateTopology, () => {
+  watch(SignalAddNode, () => {
     drawNodes()
-    clearLinks()
     drawLinks()
   })
+  watch(Network.SelectedTopo, () => {
+    clearPackets()
+    clearLinks()
+    clearNodes()
+    drawNodes()
+  })
 
   watch(Network.SlotDone, () => {
     if (Network.SlotDone.value) {
@@ -583,76 +668,4 @@ export async function useDrawTopology(dom: HTMLElement) {
     },
     false
   )
-
-  // onDrag
-  const dragControls = new DragControls(objectsToDrag, camera, renderer.domElement)
-  let relatedLinks: any = []
-  let relatedUnicastPackets: any = []
-  let relatedBeaconPacket: any = undefined
-  dragControls.deactivate()
-  dragControls.addEventListener('dragstart', function (event) {
-    if (NODE_TYPE[event.object.userData.type] != undefined) {
-      const node = event.object.userData.node_id
-      for (const l of Object.values(drawnLinks)) {
-        if (l.link.v1 == node || l.link.v2 == node) {
-          relatedLinks.push(l)
-        }
-      }
-      for (const u of Object.values(drawnUnicastPackets)) {
-        if (u.mac_src == node || u.mac_dst == node) {
-          relatedUnicastPackets.push(u)
-        }
-      }
-      for (const b of Object.values(drawnBeaconPackets)) {
-        if (b.mac_src == node) {
-          relatedBeaconPacket = b
-          break
-        }
-      }
-    }
-    controls.enabled = false
-  })
-  dragControls.addEventListener('dragend', function () {
-    relatedLinks = []
-    relatedUnicastPackets = []
-    relatedBeaconPacket = undefined
-    controls.enabled = true
-  })
-  dragControls.addEventListener('drag', function (event) {
-    // snap to ground
-    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
-      ]
-
-      for (const l of relatedLinks) {
-        clearLink(l.link.uid)
-        drawLink(l.link)
-      }
-      for (const pkt of relatedUnicastPackets) {
-        clearPacket(pkt.uid)
-        drawUnicastPacket(pkt)
-      }
-      if (relatedBeaconPacket != undefined) {
-        clearPacket(relatedBeaconPacket.uid)
-        drawBeaconPacket(relatedBeaconPacket)
-      }
-    }
-
-    // update dragbox and model
-    for (const node of Object.values(drawnNodes)) {
-      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
-        )
-      }
-    }
-  })
 }
diff --git a/src/hooks/useStates.ts b/src/hooks/useStates.ts
index dd5befd..669f90e 100644
--- a/src/hooks/useStates.ts
+++ b/src/hooks/useStates.ts
@@ -17,4 +17,4 @@ export const SignalShowSettings = ref(false)
 export const SignalShowSchedule = ref(false)
 export const SignalShowStatistics = ref(false)
 export const SignalEditTopology = ref(false)
-export const SignalUpdateTopology = ref(0)
+export const SignalAddNode = ref(0)