fix datatree sub and unsubscribe at tree

src/components/DBMTree.vue

@@ -7,10 +7,11 @@
           dense
           :nodes="dbmData"
           node-key="key"
-          :default-expand-all="true"
+          :default-expand-all="false"
+          v-model:expanded="expanded"
         >
           <template v-slot:[`default-header`]="props">
-            <div class="row items-center text-blue">
+            <div class="row items-center text-blue" @click="ClickNode(props.node)">
               <div
                 class="row items-center text-blue"
                 @contextmenu.prevent="openContextMenu($event, props.node)"
@@ -25,12 +26,12 @@
               />
             </div>
             <q-popup-edit
-              v-if="props.node.value !== undefined"
+              v-if="props.node.value !== undefined && props.node.value !== ''"
               v-model="props.node.value"
               class="q-ml-xl bg-grey text-white"
               @save="(val) => onValueEdit(val, props.node)"
             >
-              <template v-if="props.node.value !== undefined" v-slot="scope">
+              <template v-slot="scope">
                 <q-input
                   dark
                   color="white"
@@ -56,29 +57,34 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import type { TreeNode } from 'src/composables/dbmTree';
-import { subs, dbmData, buildTree } from 'src/composables/dbmTree';
+import {
+  dbmData,
+  buildTree,
+  // addChildrentoTree,
+  getSubscriptionsByUuid,
+  addChildrentoTree,
+  removeSubtreeByParentKey,
+} from 'src/composables/dbmTree';
 import { openContextMenu } from 'src/composables/useContextMenu';
 import SubMenu from 'src/components/SubMenu.vue';
 import { QCard } from 'quasar';
 import { send } from 'src/services/websocket';
+import { onBeforeRouteLeave } from 'vue-router';
 
 onMounted(() => {
   send({
     subscribe: [
       {
         path: '.*',
-        depth: 2,
+        depth: 1,
       },
     ],
   })
     .then((response) => {
       if (response?.subscribe) {
-        subs.value = response.subscribe;
-        dbmData.value = buildTree(subs.value);
-      } else {
-        console.log('Response from server:', response);
+        dbmData.value = buildTree(response.subscribe ?? []);
       }
     })
     .catch((err) => {
@@ -86,16 +92,95 @@ onMounted(() => {
     });
 });
 
-// function updateValue(uuid: string, newValue: string) {
-//   const target = subs.value.find((s) => s.uuid === uuid);
-//   if (target) {
-//     target.value = newValue;
-//     treeData.value = buildTree(subs.value);
-//   }
-// }
+onBeforeRouteLeave((to, from, next) => {
+  send({
+    unsubscribe: [
+      {
+        path: '.*',
+        depth: 0,
+      },
+    ],
+  })
+    .then((response) => {
+      if (response?.subscribe) {
+        dbmData.value = buildTree(response.subscribe ?? []);
+      }
+    })
+    .catch((err) => {
+      console.error('Error fetching data:', err);
+    });
+  next();
+});
+
+const expanded = ref<string[]>([]);
+
+function ClickNode(node: TreeNode) {
+  if (node.key === 'DBM') return;
+
+  const nodeKey = node.key as string;
+
+  const isExpanded = expanded.value.includes(nodeKey);
+
+  if (isExpanded) {
+    // Collapse the parent node and its children
+    //expanded.value = expanded.value.filter((k) => k !== nodeKey && !k.startsWith(nodeKey));
+
+    // 2. Send unsubscribe request
+    send({
+      unsubscribe: [
+        {
+          uuid: nodeKey,
+          path: '.*',
+          depth: 0,
+        },
+      ],
+    })
+      .then((response) => {
+        if (response?.unsubscribe) {
+          removeSubtreeByParentKey(nodeKey);
+        }
+        requestAnimationFrame(() => {
+          expanded.value = expanded.value.filter((k) => k !== nodeKey && !k.startsWith(nodeKey));
+        });
+      })
+      .catch((err) => {
+        console.error('Error during unsubscribe:', err);
+      });
+
+    // 3. Do not continue further — important!
+    return;
+  }
+
+  // 4. If not expanded, send subscribe and expand
+  send({
+    subscribe: [
+      {
+        uuid: nodeKey,
+        path: '.*',
+        depth: 1,
+      },
+    ],
+  })
+    .then((response) => {
+      if (response?.subscribe) {
+        addChildrentoTree(response.subscribe);
+
+        // Delay to ensure reactive updates apply cleanly
+        requestAnimationFrame(() => {
+          if (!expanded.value.includes(nodeKey)) {
+            expanded.value.push(nodeKey);
+          }
+        });
+      }
+    })
+    .catch((err) => {
+      console.error('Error during subscribe:', err);
+    });
+}
 
 function onValueEdit(newValue: undefined, node: TreeNode) {
-  const sub = subs.value.find((s) => s.uuid === node.key);
+  console.log(node.value, node.value === undefined);
+  const sub = getSubscriptionsByUuid(node.key);
   if (sub) {
     send({
       set: [

src/composables/dbmTree.ts

@@ -1,14 +1,14 @@
 import type { Subs } from 'src/models/Subscribe';
-import { ref } from 'vue';
+import { ref, nextTick } from 'vue';
 
-export const dbmData = ref<TreeNode[]>(buildTree([]));
+const Subscriptions = ref<Subs>([]);
 
-export const subs = ref<Subs>([]);
+export const dbmData = ref<TreeNode[]>([]);
 
 export interface TreeNode {
-  path: string;
+  path: string | undefined;
   key?: string; // optional: useful for QTree's node-key
-  value?: string | undefined;
+  value?: string | number | boolean | undefined;
   children?: TreeNode[];
 }
 
@@ -23,6 +23,8 @@ export function buildTree(subs: Subs): TreeNode[] {
 
   const root: TreeMap = {};
 
+  Subscriptions.value = subs;
+
   for (const item of subs) {
     const pathParts = item.path?.split(':') ?? [];
     let current = root;
@@ -63,3 +65,46 @@ export function buildTree(subs: Subs): TreeNode[] {
     },
   ];
 }
+
+export function getTreeElementByPath(path: string) {
+  return dbmData.value.find((s) => s.path === path);
+}
+
+export function getSubscriptionsByUuid(uid: string | undefined) {
+  return Subscriptions.value.find((s) => s.uuid === uid);
+}
+
+export function addChildrentoTree(subs: Subs) {
+  Subscriptions.value.push(...subs);
+  void nextTick(() => {
+    dbmData.value = buildTree(Subscriptions.value);
+  });
+}
+
+export function removeSubtreeByParentKey(parentKey: string) {
+  // Find the parent node using its uuid
+  const parent = Subscriptions.value.find((s) => s.uuid === parentKey);
+  if (!parent || !parent.path) return;
+
+  const parentPath = parent.path;
+
+  // Now filter out the children, but NOT the parent itself
+  Subscriptions.value = Subscriptions.value.filter((s) => {
+    // Keep the parent itself (don't remove it)
+    if (s.uuid === parentKey) return true;
+
+    // Remove any child whose path starts with parentPath + '/' (descendants)
+    return !s.path?.startsWith(parentPath + ':');
+  });
+
+  // Rebuild the tree after removing children, but keeping the parent
+  dbmData.value = buildTree(Subscriptions.value);
+}
+
+export function getSubscriptionsByPath(path: string) {
+  return Subscriptions.value.find((s) => s.path === path);
+}
+
+export function getAllSubscriptions() {
+  return Subscriptions.value;
+}

src/models/Response.ts

@@ -7,5 +7,6 @@ export type Response = {
   get?: Gets;
   set?: Sets;
   subscribe?: Subs;
+  unsubscribe?: Subs;
   publish?: Pubs;
 };

src/models/Subscribe.ts

@@ -1,6 +1,6 @@
 export type Subscribe = {
-  uuid?: string;
-  path?: string;
+  uuid?: string | undefined;
+  path?: string | undefined;
   depth?: number;
   value?: string | number | boolean | undefined;
 };

src/services/websocket.ts

@@ -2,10 +2,16 @@ import type { Response } from 'src/models/Response';
 import type { Publish } from 'src/models/Publish';
 import type { Request } from 'src/models/Request';
 import type { QVueGlobals } from 'quasar';
-import { subs, buildTree, dbmData } from 'src/composables/dbmTree';
-import { ref } from 'vue';
+import {
+  getAllSubscriptions,
+  getSubscriptionsByPath,
+  buildTree,
+  dbmData,
+} from 'src/composables/dbmTree';
+import { ref, reactive } from 'vue';
 
 const pendingResponses = new Map<string, (data: Response | undefined) => void>();
+export const lastKnownValues = reactive(new Map<string, string>());
 
 export let socket: WebSocket | null = null;
 const isConnected = ref(false);
@@ -47,16 +53,38 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
       if (id && pendingResponses.has(id)) {
         pendingResponses.get(id)?.(message); // resolve the promise
         pendingResponses.delete(id);
-      } else if (message.publish) {
-        message.publish.forEach((pub: Publish) => {
-          const target = subs.value.find((s) => s.path === pub.path);
-          if (target) {
-            target.value = pub.value ?? '';
+        return;
+      }
+
+      if (message.publish) {
+        let changed = false;
+
+        (message.publish as Publish[]).forEach((pub) => {
+          const path = pub.path;
+          const value = pub.value ?? '';
+
+          if (path === undefined) {
+            return;
+          }
+
+          const oldValue = lastKnownValues.get(path);
+          if (oldValue !== value) {
+            lastKnownValues.set(path, value); // this is now reactive
+
+            const existing = getSubscriptionsByPath(path);
+            if (existing) {
+              existing.value = value;
+            } else {
+              getAllSubscriptions().push({ path, value, uuid: pub.uuid });
+            }
+
+            changed = true;
           }
         });
-        dbmData.value = buildTree(subs.value);
-      } else {
-        console.warn('Unmatched message:', message);
+
+        if (changed) {
+          dbmData.value = buildTree(getAllSubscriptions()); // rebuild reactive tree
+        }
       }
     };
   };
@@ -67,10 +95,6 @@ export function initWebSocket(url: string, $q?: QVueGlobals) {
     }
   };
 
-  // onBeforeUnmount(() => {
-  //   close();
-  // });
-
   return {
     connect,
     close,
@@ -107,7 +131,6 @@ export function send(data: Request): Promise<Response | undefined> {
 
   return new Promise((resolve) => {
     pendingResponses.set(id, resolve);
-
     waitForSocketConnection()
       .then(() => {
         socket?.send(JSON.stringify(payload));
@@ -121,5 +144,5 @@ export function send(data: Request): Promise<Response | undefined> {
 }
 
 function generateId(): string {
-  return Math.random().toString(36).substr(2, 9); // simple unique ID
+  return Math.random().toString(36).substring(2, 9); // simple unique ID
 }