From 74671012cbf365c46196839da82dd7de1c1028a5 Mon Sep 17 00:00:00 2001
From: Shivam <shivamkotak16.sk@gmail.com>
Date: Wed, 12 Oct 2022 12:26:23 +0530
Subject: [PATCH] fix: persist hidden nodes on rotate

---
 src/components/Graph/index.tsx                   | 4 +++-
 src/containers/Editor/LiveEditor/GraphCanvas.tsx | 3 ++-
 src/hooks/store/useGraph.tsx                     | 2 ++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Graph/index.tsx b/src/components/Graph/index.tsx
index 61c108a021e..e8512613489 100644
--- a/src/components/Graph/index.tsx
+++ b/src/components/Graph/index.tsx
@@ -47,6 +47,7 @@ const GraphComponent = ({
 }: LayoutProps) => {
   const [minScale, setMinScale] = React.useState(0.4);
   const setGraphValue = useGraph(state => state.setGraphValue);
+  const setLoading = useGraph(state => state.setLoading);
   const setConfig = useConfig(state => state.setConfig);
   const centerView = useConfig(state => state.centerView);
   const loading = useGraph(state => state.loading);
@@ -85,12 +86,13 @@ const GraphComponent = ({
         const MIN_SCALE = Math.round((450_000 / areaSize) * 100) / 100;
         const scale = MIN_SCALE > 2 ? 1 : MIN_SCALE <= 0 ? 0.1 : MIN_SCALE;
 
+        setLoading(true);
         setMinScale(scale);
         setSize({ width: layout.width + 400, height: layout.height + 400 });
 
         requestAnimationFrame(() => {
           setTimeout(() => {
-            setGraphValue("loading", false);
+            setLoading(false);
             setTimeout(() => changeRatio > 100 && centerView(), 0);
           }, 0);
         });
diff --git a/src/containers/Editor/LiveEditor/GraphCanvas.tsx b/src/containers/Editor/LiveEditor/GraphCanvas.tsx
index 6ecb3c2520e..1bb82293645 100644
--- a/src/containers/Editor/LiveEditor/GraphCanvas.tsx
+++ b/src/containers/Editor/LiveEditor/GraphCanvas.tsx
@@ -11,6 +11,7 @@ export const GraphCanvas = ({ isWidget = false }: { isWidget?: boolean }) => {
 
   const collapsedNodes = useGraph(state => state.collapsedNodes);
   const collapsedEdges = useGraph(state => state.collapsedEdges);
+  const loading = useGraph(state => state.loading);
 
   React.useEffect(() => {
     const nodeList = collapsedNodes.map(id => `[id$="node-${id}"]`);
@@ -26,7 +27,7 @@ export const GraphCanvas = ({ isWidget = false }: { isWidget?: boolean }) => {
       selectedNodes.forEach(node => node.classList.add("hide"));
       selectedEdges.forEach(edge => edge.classList.add("hide"));
     }
-  }, [collapsedNodes, collapsedEdges]);
+  }, [collapsedNodes, collapsedEdges, loading]);
 
   return (
     <>
diff --git a/src/hooks/store/useGraph.tsx b/src/hooks/store/useGraph.tsx
index 097981574fa..15434b29537 100644
--- a/src/hooks/store/useGraph.tsx
+++ b/src/hooks/store/useGraph.tsx
@@ -17,6 +17,7 @@ export type Graph = typeof initialStates;
 
 interface GraphActions {
   setGraphValue: (key: keyof Graph, value: any) => void;
+  setLoading: (loading: boolean) => void;
   expandNodes: (nodeId: string) => void;
   collapseNodes: (nodeId: string) => void;
   collapseGraph: () => void;
@@ -32,6 +33,7 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
       collapsedEdges: [],
       [key]: value,
     }),
+  setLoading: loading => set({ loading }),
   expandNodes: nodeId => {
     const [childrenNodes, matchingNodes] = getOutgoers(
       nodeId,