From d5482cd50d5f7fc536fa9be432206eb7bed6aa66 Mon Sep 17 00:00:00 2001
From: shahid <105579118+Shahidullah-Muffakir@users.noreply.github.com>
Date: Wed, 7 Feb 2024 19:30:46 +0530
Subject: [PATCH] fix: Zoom label not updating on selection/input (#389)

* fix: Zoom label not updating on selection/input
---
 src/containers/Views/GraphView/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/containers/Views/GraphView/index.tsx b/src/containers/Views/GraphView/index.tsx
index 0f8fdb2c0cd..d8771d39b1b 100644
--- a/src/containers/Views/GraphView/index.tsx
+++ b/src/containers/Views/GraphView/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import dynamic from "next/dynamic";
 import styled from "styled-components";
+import debounce from "lodash.debounce";
 import { toast } from "react-hot-toast";
 import { Space } from "react-zoomable-ui";
 import { ElkRoot } from "reaflow/dist/layout/useLayout";
@@ -96,7 +97,6 @@ const GraphCanvas = ({ isWidget }: GraphProps) => {
   const direction = useGraph(state => state.direction);
   const nodes = useGraph(state => state.nodes);
   const edges = useGraph(state => state.edges);
-
   const [paneWidth, setPaneWidth] = React.useState(2000);
   const [paneHeight, setPaneHeight] = React.useState(2000);
 
@@ -156,6 +156,7 @@ function getViewType(nodes: NodeData[]) {
 
 export const Graph = ({ isWidget = false }: GraphProps) => {
   const setViewPort = useGraph(state => state.setViewPort);
+  const viewPort = useGraph(state => state.viewPort);
   const loading = useGraph(state => state.loading);
   const isPremium = useUser(state => state.premium);
   const viewType = useGraph(state => getViewType(state.nodes));
@@ -192,6 +193,9 @@ export const Graph = ({ isWidget = false }: GraphProps) => {
   if (viewType === "premium" && !isWidget) {
     if (!isPremium) return <PremiumView />;
   }
+  const debouncedOnZoomChangeHandler = debounce(() => {
+    setViewPort(viewPort!);
+  }, 300);
 
   return (
     <>
@@ -205,6 +209,7 @@ export const Graph = ({ isWidget = false }: GraphProps) => {
         {...bindLongPress()}
       >
         <Space
+          onUpdated={() => debouncedOnZoomChangeHandler()}
           onCreate={setViewPort}
           onContextMenu={e => e.preventDefault()}
           treatTwoFingerTrackPadGesturesLikeTouch={gesturesEnabled}