add loadPresetTopo

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" />

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>

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
     }

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()

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
+                ]
+            }
+        ]
+    }
+}