fix(desktop): add id for tree node

src/components/widgets/TreeNodeInfo.vue

@@ -8,13 +8,19 @@
       </template>
       <div>{{ $t('connections.subTopics') }}</div>
       <div class="mt-2">
-        <el-tag v-for="topic in getSubTopics(node)" :key="topic" size="small" class="mr-2 mb-2">
+        <el-tag
+          type="info"
+          v-for="(topic, index) in getSubTopics(node)"
+          :key="`${topic}-${index}`"
+          size="small"
+          class="mr-2 mb-2"
+        >
           {{ topic }}
         </el-tag>
       </div>
     </div>
     <!-- Topic node without payload -->
-    <div v-else-if="!node.latestMessage">
+    <div v-else-if="checkPayloadEmpty(node.latestMessage)">
       <div>{{ $t('connections.fullTopic') }}</div>
       <el-tooltip
         :effect="currentTheme !== 'light' ? 'light' : 'dark'"
@@ -27,7 +33,13 @@
       </el-tooltip>
       <div>{{ $t('connections.subTopics') }}</div>
       <div class="mt-2">
-        <el-tag v-for="topic in getSubTopics(node)" :key="topic" size="small" class="mr-2 mb-2">
+        <el-tag
+          v-for="(topic, index) in getSubTopics(node)"
+          type="info"
+          :key="`${topic}-${index}`"
+          size="small"
+          class="mr-2 mb-2"
+        >
           {{ topic }}
         </el-tag>
       </div>
@@ -60,7 +72,7 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
-import { findSubTopics, findFullTopicPath } from '@/utils/topicTree'
+import { findSubTopics, findFullTopicPath, isPayloadEmpty } from '@/utils/topicTree'
 import Prism from 'prismjs'
 
 @Component
@@ -75,15 +87,17 @@ export default class TreeNodeInfo extends Vue {
   }
 
   get latestMessage(): string {
+    const message = this.node.latestMessage || ''
     if (this.payloadFormat === 'json') {
-      return JSON.stringify(JSON.parse(this.node.latestMessage || ''), null, 2)
+      return JSON.stringify(JSON.parse(message.toString()), null, 2)
     }
-    return this.node.latestMessage || ''
+    return message.toString()
   }
 
   get payloadFormat(): string {
     try {
-      JSON.parse(this.latestMessage)
+      const message = this.node.latestMessage || ''
+      JSON.parse(message.toString())
       return 'json'
     } catch (e) {
       return 'plaintext'
@@ -118,8 +132,13 @@ export default class TreeNodeInfo extends Vue {
   }
 
   private getFullTopicPath(node: TopicTreeData): string {
-    const fullPath = findFullTopicPath(this.treeData, node.label)
-    return fullPath || node.label
+    const fullPath = findFullTopicPath(this.treeData, node.id)
+    if (!fullPath) return node.label
+    return fullPath
+  }
+
+  private checkPayloadEmpty(payload: string | Buffer | null | undefined): boolean {
+    return isPayloadEmpty(payload)
   }
 
   private mounted() {
@@ -148,6 +167,9 @@ body.night {
 }
 
 .tree-node-info {
+  .el-tag.el-tag--info {
+    color: var(--color-text-default);
+  }
   .node-info-item {
     background-color: var(--color-bg-select_lang);
     padding: 6px 12px;

src/components/widgets/TreeView.vue

@@ -25,7 +25,7 @@
       ref="tree"
       :data="data"
       :props="defaultProps"
-      node-key="label"
+      node-key="id"
       :default-expanded-keys="expandedKeys"
       :expand-on-click-node="false"
       @node-click="handleNodeClick"
@@ -40,7 +40,7 @@
             <span v-if="data.connectionInfo && data.connectionInfo.name">
               &nbsp;- [{{ data.connectionInfo.name }}]
             </span>
-            <el-tag v-if="data.latestMessage" size="mini" class="value-tag ml-2">
+            <el-tag v-if="!checkPayloadEmpty(data.latestMessage)" size="mini" class="value-tag ml-2">
               {{ data.latestMessage }}
             </el-tag>
           </span>
@@ -58,7 +58,7 @@
 import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import { Tree } from 'element-ui'
-import { getAllLabels } from '@/utils/topicTree'
+import { getAllIDs, isPayloadEmpty } from '@/utils/topicTree'
 
 @Component
 export default class TreeView extends Vue {
@@ -105,8 +105,8 @@ export default class TreeView extends Vue {
   }
 
   private handleNodeExpand(data: TopicTreeData) {
-    if (!this.expandedKeys.includes(data.label)) {
-      this.expandedKeys.push(data.label)
+    if (!this.expandedKeys.includes(data.id)) {
+      this.expandedKeys.push(data.id)
     }
   }
 
@@ -115,7 +115,7 @@ export default class TreeView extends Vue {
   }
 
   private removeExpandedKeysRecursively(node: TopicTreeData) {
-    const index = this.expandedKeys.indexOf(node.label)
+    const index = this.expandedKeys.indexOf(node.id)
     if (index > -1) {
       this.expandedKeys.splice(index, 1)
     }
@@ -125,13 +125,28 @@ export default class TreeView extends Vue {
   }
 
   private expandAll() {
-    this.expandedKeys = getAllLabels(this.data)
+    this.expandedKeys = getAllIDs(this.data)
   }
 
   private collapseAll() {
+    const collapseNode = (node: TopicTreeData) => {
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(collapseNode)
+      }
+      const treeNode = this.treeRef.getNode(node.id)
+      if (treeNode) {
+        treeNode.expanded = false
+      }
+    }
+    this.data.forEach(collapseNode)
     this.expandedKeys = []
   }
-  mounted() {
+
+  private checkPayloadEmpty(payload: string | Buffer | null | undefined): boolean {
+    return isPayloadEmpty(payload)
+  }
+
+  private mounted() {
     // Keep the filter text when data changes
     this.$nextTick(() => {
       if (this.filterText) {

src/types/global.d.ts

@@ -449,11 +449,12 @@ declare global {
   type LogLevel = 'debug' | 'info' | 'warn' | 'error'
 
   interface TopicTreeData {
+    id: string
     label: string
     qos?: QoS
     retain?: boolean
     time?: string
-    latestMessage?: string
+    latestMessage?: string | Buffer | null
     messageCount: number
     subTopicCount: number
     connectionInfo?: ConnectionModel

src/utils/topicTree.ts

@@ -30,12 +30,13 @@ export function updateTopicTreeData(
   const currentTime = time.getNowDate()
 
   let updatedTree = [...currentTree]
-  let hostNode = updatedTree.find((node) => node.label === connectionInfo.host)
+  let hostNode = updatedTree.find((node) => node.id === connectionInfo.id)
 
   if (!hostNode) {
     hostNode = {
+      id: connectionInfo.id ?? '',
       label: connectionInfo.host,
-      latestMessage: '',
+      latestMessage: undefined,
       messageCount: 0,
       subTopicCount: 0,
       children: [],
@@ -47,14 +48,18 @@ export function updateTopicTreeData(
   hostNode.messageCount++
 
   let currentNode = hostNode
+  let currentId = connectionInfo.id
   for (let i = 0; i < topicLevels.length; i++) {
     const level = topicLevels[i]
-    let childNode = currentNode.children?.find((n) => n.label === level)
+    const childIndex = currentNode.children?.findIndex((n) => n.label === level) ?? -1
+    let childNode: TopicTreeData
 
-    if (!childNode) {
+    if (childIndex === -1) {
+      currentId = `${currentId}-${currentNode.children?.length ?? 0 + 1}`
       childNode = {
+        id: currentId,
         label: level,
-        latestMessage: '',
+        latestMessage: undefined,
         messageCount: 0,
         subTopicCount: 0,
         children: [],
@@ -67,6 +72,9 @@ export function updateTopicTreeData(
       } else {
         currentNode.children = [childNode]
       }
+    } else {
+      childNode = currentNode.children![childIndex]
+      currentId = childNode.id
     }
 
     childNode.messageCount++
@@ -127,15 +135,15 @@ export function findSubTopics(node: TopicTreeData, isRoot: boolean = true): stri
 }
 
 /**
- * Finds the full topic path for a given node label in the topic tree.
+ * Finds the full topic path for a given node ID in the topic tree.
  *
  * @param treeData - The entire topic tree data structure.
- * @param targetLabel - The label of the node to find the full path for.
+ * @param targetId - The ID of the node to find the full path for.
  * @returns The full topic path as a string, or null if the node is not found.
  */
-export function findFullTopicPath(treeData: TopicTreeData[], targetLabel: string): string | null {
+export function findFullTopicPath(treeData: TopicTreeData[], targetId: string): string | null {
   function findPath(node: TopicTreeData, currentPath: string[]): string[] | null {
-    if (node.label === targetLabel) {
+    if (node.id === targetId) {
       return currentPath
     }
     if (node.children) {
@@ -160,18 +168,28 @@ export function findFullTopicPath(treeData: TopicTreeData[], targetLabel: string
 }
 
 /**
- * Retrieves all labels from the given topic tree nodes and their children.
+ * Retrieves all IDs from the given topic tree nodes and their children.
  *
  * @param nodes - An array of TopicTreeData representing the topic tree nodes.
- * @returns An array of strings containing all labels from the nodes and their children.
+ * @returns An array of strings containing all IDs from the nodes and their children.
  */
-export function getAllLabels(nodes: TopicTreeData[]): string[] {
-  let labels: string[] = []
+export function getAllIDs(nodes: TopicTreeData[]): string[] {
+  let ids: string[] = []
   for (const node of nodes) {
-    labels.push(node.label)
+    ids.push(node.id)
     if (node.children && node.children.length > 0) {
-      labels = labels.concat(getAllLabels(node.children))
+      ids = ids.concat(getAllIDs(node.children))
     }
   }
-  return labels
+  return ids
+}
+
+/**
+ * Checks if the given payload is empty.
+ *
+ * @param payload - The payload to check. Can be a string, Buffer, null, or undefined.
+ * @returns True if the payload is null or undefined, false otherwise.
+ */
+export function isPayloadEmpty(payload: string | Buffer | null | undefined): boolean {
+  return payload === null || payload === undefined
 }