From 322013e4cc8cd80c4b36d9e0943775c9286ef83d Mon Sep 17 00:00:00 2001
From: AmyangXYZ <amyang.xyz@gmail.com>
Date: Sun, 4 Feb 2024 12:51:14 -0500
Subject: [PATCH] add stats subscribe/report and clean codes

---
 src/components/NodeStats.vue       | 32 ++++++----
 src/components/TopoEditToolbox.vue |  6 +-
 src/core/network.ts                | 34 +++++++----
 src/core/nodes/end_system.ts       | 41 +++----------
 src/core/nodes/five_g_gnb.ts       | 47 --------------
 src/core/nodes/five_g_ue.ts        | 47 --------------
 src/core/nodes/node.ts             | 98 ++++++++++++++++++++++++++++--
 src/core/nodes/tsch.ts             | 47 --------------
 src/core/nodes/tsn.ts              | 49 ---------------
 src/core/typedefs/message.ts       | 11 +++-
 src/core/typedefs/node.ts          |  2 -
 src/core/typedefs/stats.ts         |  6 ++
 src/hooks/useDrawTopology.ts       | 11 +---
 src/hooks/useStates.ts             |  3 +-
 src/topologies/5G-TSN-TSCH.json    |  7 ++-
 src/views/HomeView.vue             |  2 +-
 16 files changed, 172 insertions(+), 271 deletions(-)
 create mode 100644 src/core/typedefs/stats.ts

diff --git a/src/components/NodeStats.vue b/src/components/NodeStats.vue
index 64159ed..ddc673e 100644
--- a/src/components/NodeStats.vue
+++ b/src/components/NodeStats.vue
@@ -2,11 +2,11 @@
 import sensortag from '@/assets/sensortag.png'
 import tsn_switch from '@/assets/tsn_switch.png'
 import five_g_gnb from '@/assets/five_g_gnb.png'
-import { Network, SelectedNode } from '@/hooks/useStates'
+import { Network } from '@/hooks/useStates'
 import { NODE_TYPE, NODE_TYPE_DISPLAY_NAME } from '@/core/typedefs'
 import { Picture } from '@element-plus/icons-vue'
 
-const images: { [type: number]: string } = {
+const avatars: { [type: number]: string } = {
   [NODE_TYPE.TSCH]: sensortag,
   [NODE_TYPE.TSN]: tsn_switch,
   [NODE_TYPE.FIVE_G_GNB]: five_g_gnb
@@ -14,23 +14,33 @@ const images: { [type: number]: string } = {
 </script>
 
 <template>
-  <el-card class="card" v-if="SelectedNode > 0 && Network.Nodes.value[SelectedNode] != undefined">
+  <el-card class="card" v-if="Network.StatsPublisherNode.value > 0 && Network.NodeStats.value != undefined">
     <el-row :gutter="30">
-      <el-col :span="11" align="center">
-        <el-image class="image" :src="images[Network.Nodes.value[SelectedNode].type]">
+      <el-col :span="12" align="center">
+        <el-image class="avatar" :src="avatars[Network.Nodes.value[Network.StatsPublisherNode.value].type]">
           <template #error>
-            <div class="image">
+            <div class="avatar">
               <el-icon><Picture /></el-icon>
             </div>
           </template>
         </el-image>
       </el-col>
-      <el-col :span="10">
+      <el-col :span="12">
         <span class="stats">
-          {{ NODE_TYPE_DISPLAY_NAME[Network.Nodes.value[SelectedNode].type] }}-{{ SelectedNode }}
+          {{ NODE_TYPE_DISPLAY_NAME[Network.Nodes.value[Network.StatsPublisherNode.value].type] }}-{{
+            Network.StatsPublisherNode.value
+          }}
         </span>
         <br />
-        - TX: {{ Network.Nodes.value[SelectedNode].tx_cnt }} , RX: {{ Network.Nodes.value[SelectedNode].rx_cnt }}<br />
+        - TX: {{ Network.NodeStats.value.tx_cnt }} , RX: {{ Network.NodeStats.value.rx_cnt }}<br />
+        - Queue length: {{ Network.NodeStats.value.queue_len }} <br />
+        - Queue head:
+        {{
+          Network.NodeStats.value.queue_head != undefined
+            ? 'Pkt 0x' + Network.NodeStats.value.queue_head.toString(16).toUpperCase().padStart(4, '0')
+            : undefined
+        }}
+        <br />
       </el-col>
     </el-row>
   </el-card>
@@ -40,10 +50,10 @@ const images: { [type: number]: string } = {
 .card {
   /* margin-top: 2px; */
   height: 130px;
-  /* width: 380px; */
+
   font-size: 0.82rem;
 }
-.image {
+.avatar {
   height: 110px;
   font-size: 36px;
 }
diff --git a/src/components/TopoEditToolbox.vue b/src/components/TopoEditToolbox.vue
index 7645fde..ab0b368 100644
--- a/src/components/TopoEditToolbox.vue
+++ b/src/components/TopoEditToolbox.vue
@@ -26,10 +26,8 @@ const nodeTypes = [
   }
 ]
 
-const { nodeId1, nodeId2 } = toRefs({
-  nodeId1: ref(''),
-  nodeId2: ref('')
-})
+const nodeId1 = ref('')
+const nodeId2 = ref('')
 
 const addNode = () => {
   Network.AddNode(nodeType.value)
diff --git a/src/core/network.ts b/src/core/network.ts
index 1b36cc8..bdf40b1 100644
--- a/src/core/network.ts
+++ b/src/core/network.ts
@@ -15,9 +15,11 @@ import {
   PROTOCOL_TYPE,
   type RoutingGraph,
   type RoutingMsgPayload,
-  type FlowMsgPayload
+  type FlowMsgPayload,
+  type StatsSubscribePayload
 } from './typedefs'
 import { SeededRandom } from '@/utils/rand'
+import type { NodeStats } from './typedefs/stats'
 
 export class NetworkHub {
   Config: Ref<Config>
@@ -41,6 +43,9 @@ export class NetworkHub {
   SelectedTopo = ref('5G-TSN-TSCH') // realistic topo example
   // SelectedTopo = ref('Routing test') // realistic topo example
 
+  StatsPublisherNode = ref(0)
+  NodeStats = ref<NodeStats | undefined>(undefined) // stats from the publisher node
+
   asnTimer: any
   SignalReset = ref(0)
   SlotDone = ref(false)
@@ -71,6 +76,21 @@ export class NetworkHub {
       this.LoadTopology()
     })
 
+    watch(this.StatsPublisherNode, (newN, oldN) => {
+      if (oldN > 0 && this.Nodes.value[oldN] != undefined) {
+        this.Nodes.value[oldN].w!.postMessage(<Message>{
+          type: MSG_TYPE.STATS_SUBSCRIBE,
+          payload: <StatsSubscribePayload>{ flag: false }
+        })
+      }
+      if (this.Nodes.value[newN] != undefined) {
+        this.Nodes.value[newN].w!.postMessage(<Message>{
+          type: MSG_TYPE.STATS_SUBSCRIBE,
+          payload: <StatsSubscribePayload>{ flag: true }
+        })
+      }
+    })
+
     watch(this.ASN, () => {
       if (this.ASN.value > 0) {
         this.doneCnt = 0
@@ -99,7 +119,8 @@ export class NetworkHub {
           this.SlotDone.value = true
         }
         break
-      case MSG_TYPE.STAT:
+      case MSG_TYPE.STATS_REPORT:
+        this.NodeStats.value = msg.payload
         break
     }
   }
@@ -139,8 +160,6 @@ export class NetworkHub {
     }
     pkt.asn = this.ASN.value
     if (isValid) {
-      this.Nodes.value[pkt.mac_src].tx_cnt++
-      this.Nodes.value[pkt.mac_dst].rx_cnt++
       this.Nodes.value[pkt.mac_dst].w!.postMessage(pkt)
 
       // must use this format for the detailedView function of el-table-v2
@@ -188,8 +207,6 @@ export class NetworkHub {
             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)
@@ -201,8 +218,6 @@ export class NetworkHub {
           id: n.id,
           type: n.type,
           pos: n.pos,
-          tx_cnt: 0,
-          rx_cnt: 0,
           neighbors: <number[]>[]
         })
       }
@@ -332,7 +347,6 @@ export class NetworkHub {
 
       n.w.postMessage(<Message>{
         type: MSG_TYPE.INIT,
-        id: n.id,
         payload: <InitMsgPayload>{ id: n.id, neighbors: toRaw(n.neighbors) }
       })
 
@@ -346,7 +360,6 @@ export class NetworkHub {
       }
       n.w.postMessage(<Message>{
         type: MSG_TYPE.ROUTING,
-        id: n.id,
         payload: toRaw(routingTable)
       })
 
@@ -355,7 +368,6 @@ export class NetworkHub {
         if (flows.length > 0) {
           n.w.postMessage(<Message>{
             type: MSG_TYPE.FLOW,
-            id: n.id,
             payload: <FlowMsgPayload>{ flows: flows }
           })
         }
diff --git a/src/core/nodes/end_system.ts b/src/core/nodes/end_system.ts
index e0cd1c8..0fb678d 100644
--- a/src/core/nodes/end_system.ts
+++ b/src/core/nodes/end_system.ts
@@ -1,37 +1,14 @@
 import { Node } from './node'
-import {
-  PKT_TYPE,
-  type Message,
-  type Packet,
-  MSG_TYPE,
-  type ASNMsgPayload,
-  type InitMsgPayload,
-  type FlowMsgPayload,
-  type Flow,
-  type RoutingMsgPayload
-} from '../typedefs'
+import { PKT_TYPE, type Message, type Packet, MSG_TYPE, type FlowMsgPayload, type Flow } from '../typedefs'
 
 class EndSystem extends Node {
   flows: Flow[] = []
   constructor() {
     super()
-    this.registerMsgHandler(MSG_TYPE.INIT, this.initMsgHandler)
-    this.registerMsgHandler(MSG_TYPE.ASN, this.asnMsgHandler)
     this.registerMsgHandler(MSG_TYPE.FLOW, this.flowMsgHandler)
-    this.registerMsgHandler(MSG_TYPE.ROUTING, this.routingMsgHandler)
-
-    this.registerPktHandler(PKT_TYPE.DATA, this.dataPktHandler)
-  }
-  initMsgHandler = (msg: Message) => {
-    const payload: InitMsgPayload = msg.payload
-    this.id = payload.id
-    this.neighbors = payload.neighbors
   }
-  asnMsgHandler = (msg: Message) => {
-    const payload: ASNMsgPayload = msg.payload
-    this.ASN = payload.asn
 
-    // do something
+  action = () => {
     for (const flow of this.flows) {
       if (this.ASN % flow.period == 1) {
         this.queue.push(<Packet>{
@@ -50,22 +27,18 @@ class EndSystem extends Node {
     if (this.queue.length > 0) {
       const pkt = this.queue.pop()
       postMessage(pkt)
+      this.tx_cnt++
     }
-
-    postMessage(<Message>{
-      type: MSG_TYPE.DONE
-    })
   }
+
   flowMsgHandler = (msg: Message) => {
     const payload: FlowMsgPayload = msg.payload
     this.flows = payload.flows
   }
-  routingMsgHandler = (msg: Message) => {
-    const payload: RoutingMsgPayload = msg.payload
-    this.routingTable = payload
-  }
+
   dataPktHandler = (pkt: Packet) => {
-    // console.log('received', pkt)
+    console.log('received', pkt.uid)
+    this.rx_cnt++
   }
 }
 
diff --git a/src/core/nodes/five_g_gnb.ts b/src/core/nodes/five_g_gnb.ts
index 5052722..795e21e 100644
--- a/src/core/nodes/five_g_gnb.ts
+++ b/src/core/nodes/five_g_gnb.ts
@@ -1,55 +1,8 @@
 import { Node } from './node'
-import {
-  PKT_TYPE,
-  type Message,
-  type Packet,
-  MSG_TYPE,
-  type ASNMsgPayload,
-  type InitMsgPayload,
-  type RoutingMsgPayload
-} from '../typedefs'
 
 class FiveGBS extends Node {
   constructor() {
     super()
-    this.registerMsgHandler(MSG_TYPE.INIT, this.initMsgHandler)
-    this.registerMsgHandler(MSG_TYPE.ASN, this.asnMsgHandler)
-    this.registerMsgHandler(MSG_TYPE.ROUTING, this.routingMsgHandler)
-    this.registerPktHandler(PKT_TYPE.DATA, this.dataPktHandler)
-  }
-  initMsgHandler = (msg: Message) => {
-    const payload: InitMsgPayload = msg.payload
-    this.id = payload.id
-    this.neighbors = payload.neighbors
-  }
-  asnMsgHandler = (msg: Message) => {
-    const payload: ASNMsgPayload = msg.payload
-    this.ASN = payload.asn
-
-    // do something
-    if (this.queue.length > 0) {
-      const pkt = this.queue.pop()
-      postMessage(pkt)
-    }
-
-    postMessage(<Message>{
-      type: MSG_TYPE.DONE
-    })
-  }
-  routingMsgHandler = (msg: Message) => {
-    const payload: RoutingMsgPayload = msg.payload
-    this.routingTable = payload
-  }
-  dataPktHandler = (pkt: Packet) => {
-    if (pkt.e2e_dst != this.id) {
-      if (this.routingTable[pkt.e2e_dst] != undefined) {
-        pkt.mac_src = this.id
-        pkt.mac_dst = this.routingTable[pkt.e2e_dst]
-        this.queue.push(pkt)
-      } else {
-        console.log(`[v${this.id}] cannot find next hop for dst ${pkt.e2e_dst}}`)
-      }
-    }
   }
 }
 
diff --git a/src/core/nodes/five_g_ue.ts b/src/core/nodes/five_g_ue.ts
index c760da2..a856074 100644
--- a/src/core/nodes/five_g_ue.ts
+++ b/src/core/nodes/five_g_ue.ts
@@ -1,55 +1,8 @@
 import { Node } from './node'
-import {
-  PKT_TYPE,
-  type Message,
-  type Packet,
-  MSG_TYPE,
-  type ASNMsgPayload,
-  type InitMsgPayload,
-  type RoutingMsgPayload
-} from '../typedefs'
 
 class FiveGUE extends Node {
   constructor() {
     super()
-    this.registerMsgHandler(MSG_TYPE.INIT, this.initMsgHandler)
-    this.registerMsgHandler(MSG_TYPE.ASN, this.asnMsgHandler)
-    this.registerMsgHandler(MSG_TYPE.ROUTING, this.routingMsgHandler)
-    this.registerPktHandler(PKT_TYPE.DATA, this.dataPktHandler)
-  }
-  initMsgHandler = (msg: Message) => {
-    const payload: InitMsgPayload = msg.payload
-    this.id = payload.id
-    this.neighbors = payload.neighbors
-  }
-  asnMsgHandler = (msg: Message) => {
-    const payload: ASNMsgPayload = msg.payload
-    this.ASN = payload.asn
-
-    // do something
-    if (this.queue.length > 0) {
-      const pkt = this.queue.pop()
-      postMessage(pkt)
-    }
-
-    postMessage(<Message>{
-      type: MSG_TYPE.DONE
-    })
-  }
-  routingMsgHandler = (msg: Message) => {
-    const payload: RoutingMsgPayload = msg.payload
-    this.routingTable = payload
-  }
-  dataPktHandler = (pkt: Packet) => {
-    if (pkt.e2e_dst != this.id) {
-      if (this.routingTable[pkt.e2e_dst] != undefined) {
-        pkt.mac_src = this.id
-        pkt.mac_dst = this.routingTable[pkt.e2e_dst]
-        this.queue.push(pkt)
-      } else {
-        console.log(`[v${this.id}] cannot find next hop for dst ${pkt.e2e_dst}}`)
-      }
-    }
   }
 }
 new FiveGUE().Run()
diff --git a/src/core/nodes/node.ts b/src/core/nodes/node.ts
index 7ae7925..4f273e7 100644
--- a/src/core/nodes/node.ts
+++ b/src/core/nodes/node.ts
@@ -1,18 +1,39 @@
-import { type Message, type MsgHandler, type Packet, type PktHandler, type RoutingTable } from '../typedefs'
+import {
+  MSG_TYPE,
+  type InitMsgPayload,
+  type Message,
+  type MsgHandler,
+  type Packet,
+  type PktHandler,
+  type RoutingTable,
+  type RoutingMsgPayload,
+  type ASNMsgPayload,
+  PKT_TYPE,
+  type StatsSubscribePayload,
+  type StatsReportPayload
+} from '../typedefs'
 
 export class Node {
   id: number = 0
   neighbors: number[] = []
   pkt_seq: number = 0
-  tx_cnt: number = 0
   rx_cnt: number = 0
-  queue: Packet[] = []
+  tx_cnt: number = 0
   ASN: number = 0
+  queue: Packet[] = []
   routingTable: RoutingTable = {}
+  publishingStats: boolean = false
+
   msgHandlers: { [type: number]: MsgHandler } = {}
   pktHandlers: { [type: number]: PktHandler } = {}
 
-  constructor() {}
+  constructor() {
+    this.registerMsgHandler(MSG_TYPE.INIT, this.initMsgHandler)
+    this.registerMsgHandler(MSG_TYPE.ROUTING, this.routingMsgHandler)
+    this.registerMsgHandler(MSG_TYPE.STATS_SUBSCRIBE, this.statsSubscribeHandler)
+    this.registerMsgHandler(MSG_TYPE.ASN, this.asnMsgHandler)
+    this.registerPktHandler(PKT_TYPE.DATA, this.dataPktHandler)
+  }
 
   Run() {
     onmessage = (e: any) => {
@@ -40,4 +61,73 @@ export class Node {
   registerPktHandler(type: number, handler: PktHandler) {
     this.pktHandlers[type] = handler
   }
+
+  // Basic common handlers, shall be overwritten in child class
+  initMsgHandler = (msg: Message) => {
+    const payload: InitMsgPayload = msg.payload
+    this.id = payload.id
+    this.neighbors = payload.neighbors
+  }
+  routingMsgHandler = (msg: Message) => {
+    const payload: RoutingMsgPayload = msg.payload
+    this.routingTable = payload
+  }
+  statsSubscribeHandler = (msg: Message) => {
+    const payload: StatsSubscribePayload = msg.payload
+    this.publishingStats = payload.flag
+    if (this.publishingStats) {
+      postMessage(<Message>{
+        type: MSG_TYPE.STATS_REPORT,
+        payload: <StatsReportPayload>{
+          rx_cnt: this.rx_cnt,
+          tx_cnt: this.tx_cnt,
+          queue_len: this.queue.length,
+          queue_head: this.queue.length > 0 ? this.queue[0].uid : undefined
+        }
+      })
+    }
+  }
+  asnMsgHandler = (msg: Message) => {
+    const payload: ASNMsgPayload = msg.payload
+    this.ASN = payload.asn
+
+    this.action()
+
+    if (this.publishingStats) {
+      postMessage(<Message>{
+        type: MSG_TYPE.STATS_REPORT,
+        payload: <StatsReportPayload>{
+          rx_cnt: this.rx_cnt,
+          tx_cnt: this.tx_cnt,
+          queue_len: this.queue.length,
+          queue_head: this.queue.length > 0 ? this.queue[0].uid : undefined
+        }
+      })
+    }
+
+    postMessage(<Message>{
+      type: MSG_TYPE.DONE
+    })
+  }
+  // main action in each slot
+  action = () => {
+    if (this.queue.length > 0) {
+      const pkt = this.queue.pop()
+      postMessage(pkt)
+      this.tx_cnt++
+    }
+  }
+  // simple forwarding
+  dataPktHandler = (pkt: Packet) => {
+    this.rx_cnt++
+    if (pkt.e2e_dst != this.id) {
+      if (this.routingTable[pkt.e2e_dst] != undefined) {
+        pkt.mac_src = this.id
+        pkt.mac_dst = this.routingTable[pkt.e2e_dst]
+        this.queue.push(pkt)
+      } else {
+        console.log(`[v${this.id}] cannot find next hop for dst ${pkt.e2e_dst}}`)
+      }
+    }
+  }
 }
diff --git a/src/core/nodes/tsch.ts b/src/core/nodes/tsch.ts
index d8f423a..f64b847 100644
--- a/src/core/nodes/tsch.ts
+++ b/src/core/nodes/tsch.ts
@@ -1,55 +1,8 @@
 import { Node } from './node'
-import {
-  PKT_TYPE,
-  type Message,
-  type Packet,
-  MSG_TYPE,
-  type ASNMsgPayload,
-  type InitMsgPayload,
-  type RoutingMsgPayload
-} from '../typedefs'
 
 class TSCHNode extends Node {
   constructor() {
     super()
-    this.registerMsgHandler(MSG_TYPE.ASN, this.asnMsgHandler)
-    this.registerMsgHandler(MSG_TYPE.INIT, this.initMsgHandler)
-    this.registerMsgHandler(MSG_TYPE.ROUTING, this.routingMsgHandler)
-    this.registerPktHandler(PKT_TYPE.DATA, this.dataPktHandler)
-  }
-  asnMsgHandler = (msg: Message) => {
-    const payload: ASNMsgPayload = msg.payload
-    this.ASN = payload.asn
-
-    // do something
-    if (this.queue.length > 0) {
-      const pkt = this.queue.pop()
-      postMessage(pkt)
-    }
-
-    postMessage(<Message>{
-      type: MSG_TYPE.DONE
-    })
-  }
-  initMsgHandler = (msg: Message) => {
-    const payload: InitMsgPayload = msg.payload
-    this.id = payload.id
-    this.neighbors = payload.neighbors
-  }
-  routingMsgHandler = (msg: Message) => {
-    const payload: RoutingMsgPayload = msg.payload
-    this.routingTable = payload
-  }
-  dataPktHandler = (pkt: Packet) => {
-    if (pkt.e2e_dst != this.id) {
-      if (this.routingTable[pkt.e2e_dst] != undefined) {
-        pkt.mac_src = this.id
-        pkt.mac_dst = this.routingTable[pkt.e2e_dst]
-        this.queue.push(pkt)
-      } else {
-        console.log(`[v${this.id}] cannot find next hop for dst ${pkt.e2e_dst}}`)
-      }
-    }
   }
 }
 
diff --git a/src/core/nodes/tsn.ts b/src/core/nodes/tsn.ts
index 008bfc1..0a0cb14 100644
--- a/src/core/nodes/tsn.ts
+++ b/src/core/nodes/tsn.ts
@@ -1,57 +1,8 @@
 import { Node } from './node'
-import {
-  PKT_TYPE,
-  type Message,
-  type Packet,
-  MSG_TYPE,
-  type ASNMsgPayload,
-  type InitMsgPayload,
-  type RoutingMsgPayload
-} from '../typedefs'
 
 class TSNNode extends Node {
   constructor() {
     super()
-    this.registerMsgHandler(MSG_TYPE.INIT, this.initMsgHandler)
-    this.registerMsgHandler(MSG_TYPE.ASN, this.asnMsgHandler)
-    this.registerMsgHandler(MSG_TYPE.ROUTING, this.routingMsgHandler)
-    this.registerPktHandler(PKT_TYPE.DATA, this.dataPktHandler)
-  }
-  initMsgHandler = (msg: Message) => {
-    const payload: InitMsgPayload = msg.payload
-    this.id = payload.id
-
-    this.neighbors = payload.neighbors
-  }
-  asnMsgHandler = (msg: Message) => {
-    const payload: ASNMsgPayload = msg.payload
-    this.ASN = payload.asn
-
-    // do something
-    if (this.queue.length > 0) {
-      const pkt = this.queue.pop()
-      postMessage(pkt)
-    }
-
-    postMessage(<Message>{
-      type: MSG_TYPE.DONE
-    })
-  }
-  routingMsgHandler = (msg: Message) => {
-    const payload: RoutingMsgPayload = msg.payload
-    this.routingTable = payload
-  }
-
-  dataPktHandler = (pkt: Packet) => {
-    if (pkt.e2e_dst != this.id) {
-      if (this.routingTable[pkt.e2e_dst] != undefined) {
-        pkt.mac_src = this.id
-        pkt.mac_dst = this.routingTable[pkt.e2e_dst]
-        this.queue.push(pkt)
-      } else {
-        console.log(`[v${this.id}] cannot find next hop for dst ${pkt.e2e_dst}}`)
-      }
-    }
   }
 }
 
diff --git a/src/core/typedefs/message.ts b/src/core/typedefs/message.ts
index ab006d3..3dc2053 100644
--- a/src/core/typedefs/message.ts
+++ b/src/core/typedefs/message.ts
@@ -1,9 +1,9 @@
 import type { Flow } from './flow'
+import type { NodeStats } from './stats'
 
 // Message is used for direct communication (debug, cmd, stats) between nodes and controller
 export interface Message {
   type: number
-  id: number // node id
   payload: any
 }
 
@@ -15,7 +15,8 @@ export enum MSG_TYPE {
   DONE, // finished all activities of the current slot
   ROUTING,
   FLOW, // install periodic flow
-  STAT
+  STATS_SUBSCRIBE,
+  STATS_REPORT
 }
 
 export interface InitMsgPayload {
@@ -34,3 +35,9 @@ export interface RoutingMsgPayload {
 export interface FlowMsgPayload {
   flows: Flow[]
 }
+
+export interface StatsSubscribePayload {
+  flag: boolean // start or end
+}
+
+export type StatsReportPayload = NodeStats
diff --git a/src/core/typedefs/node.ts b/src/core/typedefs/node.ts
index 5b7fd03..61f21e8 100644
--- a/src/core/typedefs/node.ts
+++ b/src/core/typedefs/node.ts
@@ -31,7 +31,5 @@ export interface Node {
   type: number
   pos: [number, number]
   neighbors: number[]
-  tx_cnt: number
-  rx_cnt: number
   w: Worker | undefined
 }
diff --git a/src/core/typedefs/stats.ts b/src/core/typedefs/stats.ts
new file mode 100644
index 0000000..eb6069d
--- /dev/null
+++ b/src/core/typedefs/stats.ts
@@ -0,0 +1,6 @@
+export interface NodeStats {
+  rx_cnt: number
+  tx_cnt: number
+  queue_len: number
+  queue_head: number // packet uid
+}
diff --git a/src/hooks/useDrawTopology.ts b/src/hooks/useDrawTopology.ts
index 6b67891..5660cdf 100644
--- a/src/hooks/useDrawTopology.ts
+++ b/src/hooks/useDrawTopology.ts
@@ -1,12 +1,5 @@
 import { watch } from 'vue'
-import {
-  Network,
-  SelectedNode,
-  SignalEditTopology,
-  SignalResetCamera,
-  SignalAddNode,
-  SignalUpdateLinks
-} from './useStates'
+import { Network, SignalEditTopology, SignalResetCamera, SignalAddNode, SignalUpdateLinks } from './useStates'
 
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
@@ -652,7 +645,7 @@ export async function useDrawTopology(dom: HTMLElement) {
       const intersects = raycaster.intersectObjects(scene.children)
       for (const o of intersects) {
         if (o.object.userData.node_id != undefined) {
-          SelectedNode.value = o.object.userData.node_id
+          Network.StatsPublisherNode.value = o.object.userData.node_id
           break
         }
       }
diff --git a/src/hooks/useStates.ts b/src/hooks/useStates.ts
index 0370ee1..b209826 100644
--- a/src/hooks/useStates.ts
+++ b/src/hooks/useStates.ts
@@ -5,13 +5,12 @@ import { type Config } from '@/core/typedefs'
 import { NetworkHub } from '@/core/network'
 
 export const Network = new NetworkHub(<Config>{
-  seed: 1111,
+  seed: 11111,
   num_nodes: 20,
   grid_size: 80,
   tx_range: 20
 })
 
-export const SelectedNode = ref(0)
 export const SignalResetCamera = ref(1)
 export const SignalShowSettings = ref(false)
 export const SignalShowSchedule = ref(false)
diff --git a/src/topologies/5G-TSN-TSCH.json b/src/topologies/5G-TSN-TSCH.json
index f831f7f..1809bd2 100644
--- a/src/topologies/5G-TSN-TSCH.json
+++ b/src/topologies/5G-TSN-TSCH.json
@@ -72,7 +72,7 @@
     },
     {
       "id": 15,
-      "type": 15,
+      "type": 12,
       "pos": [-20, 40]
     },
     {
@@ -124,6 +124,11 @@
       "id": 25,
       "type": 0,
       "pos": [30, -30]
+    },
+    {
+      "id": 26,
+      "type": 15,
+      "pos": [10, -40]
     }
   ],
   "links": []
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index b0ecf68..5b41652 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -24,7 +24,7 @@ import EventLogs from '@/components/EventLogs.vue'
   />
   <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%; 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" />