import log

src/components/EventLogs.vue

@@ -1,33 +1,62 @@
 <script lang="ts" setup>
-import { ref, watch, nextTick } from 'vue'
-import { Logs } from '@/hooks/useStates'
+import { ref, watch, nextTick, onUnmounted } from 'vue'
+import { Network } from '@/hooks/useStates'
 
 const logContainer = ref<HTMLElement | null>(null)
+const showLog = ref<boolean>(false)
+let timer: any = undefined
+
 watch(
-  Logs,
+  Network.Logs,
   () => {
+    showLog.value = true
     nextTick(() => {
       if (logContainer.value != undefined) {
         logContainer.value.scrollTop = logContainer.value.scrollHeight
       }
     })
+    resetTimer()
   },
   { deep: true }
 )
+
+const handleMouseOver = () => {
+  clearTimeout(timer)
+}
+
+const resetTimer = () => {
+  clearTimeout(timer)
+  timer = setTimeout(() => {
+    nextTick(() => {
+      Network.Logs.value = []
+    })
+    showLog.value = false
+  }, 4000)
+}
+
+onUnmounted(() => {
+  clearTimeout(timer)
+})
 </script>
 
 <template>
-  <div class="log-container" ref="logContainer">
-    <div class="log" v-for="(log, i) in Logs" :key="i"> > {{ log }}</div>
+  <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>
 
 <style scoped>
 @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
 
 .log-container {
-  bottom:320px;
-  height: 300px;
+  bottom: 320px;
+  max-height: 300px;
   display: flex;
   max-width: 40%;
   overflow-y: scroll;
@@ -36,6 +65,6 @@ watch(
 .log {
   font-family: 'Share Tech Mono', monospace;
   padding-right: 20px;
-  font-size: .82rem;
+  font-size: 0.82rem;
 }
 </style>

src/core/network.ts

@@ -22,6 +22,7 @@ export class NetworkHub {
   Flows = ref<Flow[]>([])
   Packets = ref<Packet[]>([])
   PacketsCurrent = ref<Packet[]>([])
+  Logs = ref<string[]>([])
   ASN = ref<number>(0) // absolute slot number
   Rand: SeededRandom
   kdTree: KDTree // to find nearest neighbors
@@ -81,6 +82,8 @@ export class NetworkHub {
       w: undefined
     }
     this.Nodes.value.push(n)
+
+    this.Logs.value.unshift(`New ${NODE_TYPE[type]} node: ID ${n.id}, position: [${n.pos}]`)
   }
 
   ConstructTopology() {
@@ -104,6 +107,8 @@ export class NetworkHub {
         this.AddLink(n.id, nn)
       })
     }
+
+    this.Logs.value.unshift(`Established ${Object.keys(this.Links.value).length} links`)
   }
 
   StartWebWorkers() {
@@ -147,6 +152,7 @@ export class NetworkHub {
         }
       }
     }
+    this.Logs.value.unshift('WebWorkers started')
   }
 
   // handle control plane msg from each node

src/hooks/useDrawTopology.ts

@@ -1,6 +1,5 @@
-import { nextTick, watch } from 'vue'
+import { watch } from 'vue'
 import {
-  Logs,
   Network,
   SelectedNode,
   SignalEditTopology,
@@ -122,12 +121,14 @@ export function useDrawTopology(dom: HTMLElement) {
     // console.log(
     //   'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.'
     // )
-    Logs.value.unshift('Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.')
+    Network.Logs.value.unshift(
+      'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.'
+    )
   }
 
   loadingManager.onLoad = function () {
     // console.log('Loading complete!')
-    Logs.value.unshift('Loading complete!')
+    Network.Logs.value.unshift('Loading complete!')
   }
 
   loadingManager.onProgress = function (url, itemsLoaded, itemsTotal) {