fix: bind graph events after graph is ready (#493)

databendlabs · Oct 26, 2024 · 9fbd874 · 9fbd874
1 parent 56ca4df
commit 9fbd874
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 59 deletions.
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+src/test
diff --git a/frontend/src/ProfileGraphDashboard.tsx b/frontend/src/ProfileGraphDashboard.tsx
@@ -46,8 +46,7 @@ function ProfileGraphDashboard() {
 
   const { handleNodeSelection, setOverInfo } = useNodeSelection(graphRef, plainData, setSelectedNodeId, setOverviewInfo);
 
-  useGraphEvents(
-    graphRef,
+  const { bindGraphEvents } = useGraphEvents(
     plainData,
     setOverInfo as React.Dispatch<React.SetStateAction<IOverview>>,
     setSelectedNodeId,
@@ -71,6 +70,7 @@ function ProfileGraphDashboard() {
             setIsLoading={setIsLoading}
             profileWrapRef={profileWrapRef}
             profileWrapRefCanvas={profileWrapRefCanvas}
+            bindGraphEvents={bindGraphEvents}
           />
           <SidebarContent
             rangeData={rangeData}
@@ -98,6 +98,7 @@ function GraphContent({
   setIsLoading,
   profileWrapRef,
   profileWrapRefCanvas,
+  bindGraphEvents,
 }: {
   isLoading: boolean;
   plainData: Profile[];
@@ -108,6 +109,7 @@ function GraphContent({
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
   profileWrapRef: React.RefObject<HTMLDivElement>;
   profileWrapRefCanvas: React.RefObject<HTMLCanvasElement>;
+  bindGraphEvents: (graph: IGraph) => void;
 }) {
   return (
     <div ref={profileWrapRef} className="flex-1 flex justify-center items-center h-screen">
@@ -124,10 +126,13 @@ function GraphContent({
               graph.fitView();
               graph.refresh();
               setIsLoading(false);
+            } else {
+              graphRef.current = graph;
+              graph.setMaxZoom(2);
+              graph.setMinZoom(0.5);
+
+              bindGraphEvents(graph);
             }
-            graphRef.current = graph;
-            graph.setMaxZoom(2);
-            graph.setMinZoom(0.5);
           }}
         />
       )}

diff --git a/frontend/src/hooks/useGraphEvents.ts b/frontend/src/hooks/useGraphEvents.ts
@@ -1,11 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
+import { IG6GraphEvent, IGraph, Item } from "@ant-design/charts";
+
 import { ALL_NODE_ID } from "../constants";
-import { useRefValueListener } from "./useRefValueListener";
-import { IGraph } from "@ant-design/charts";
 import { IOverview, Profile } from "../types/ProfileGraphDashboard";
 
 export function useGraphEvents(
-  graphRef: React.RefObject<IGraph>,
   plainData: Profile[],
   setOverInfo: React.Dispatch<React.SetStateAction<IOverview>>,
   setSelectedNodeId: React.Dispatch<React.SetStateAction<string>>,
@@ -14,47 +13,40 @@ export function useGraphEvents(
   overviewInfoCurrent: React.RefObject<IOverview | undefined>,
   setOverviewInfo: React.Dispatch<React.SetStateAction<IOverview | undefined>>,
 ) {
-
-  const [graph, setGraph] = useState(graphRef.current);
-
-  useRefValueListener(graphRef, (graph: IGraph) => {
-    setGraph(graph);
-  });
-
-  const getAllNodes = useCallback(() => {
+  const getAllNodes = useCallback((graph: IGraph) => {
     return graph?.getNodes();
-  }, [graph]);
+  }, []);
 
-  const setNodeActive = useCallback(( node) => {
-    graph?.setItemState(node, "highlight", true);
-  }, [graph]);
+  const setNodeActive = useCallback((graph: IGraph, node?: Item | string) => {
+    if (node) {
+      graph?.setItemState(node, "highlight", true);
+    }
+  }, []);
 
-  const clearNodeActive = useCallback(() => {
-    getAllNodes()?.forEach(n => {
+  const clearNodeActive = useCallback((graph: IGraph) => {
+    getAllNodes(graph)?.forEach(n => {
       graph?.clearItemStates(n);
     });
-  }, [graph, getAllNodes]);
+  }, [getAllNodes]);
 
-  useEffect(() => {
-    if (!graph) return;
-
-    const handleNodeClick = (evt) => {
-      const modal = evt.item._cfg.model;
+  const bindGraphEvents = useCallback((graph: IGraph) => {
+    const handleNodeClick = (evt: IG6GraphEvent) => {
+      const modal = evt.item?._cfg?.model;
       setOverInfo({
-        ...plainData.find(item => item.id === modal.id),
+        ...plainData.find(item => item.id === modal?.id),
       } as IOverview);
-      setSelectedNodeId(modal.id);
+      setSelectedNodeId(modal?.id as string);
 
-      const nodes = getAllNodes();
-      const id = evt.item._cfg.id;
+      const nodes = getAllNodes(graph);
+      const id = evt.item?._cfg?.id;
       const node = nodes?.find(node => node?._cfg?.id === id);
       nodes
         ?.filter(node => node?._cfg?.id !== id)
         .forEach(n => {
           graph?.clearItemStates(n);
         });
 
-      setNodeActive(node);
+      setNodeActive(graph, node);
     };
 
     const handleNodeMouseLeave = () => {
@@ -67,7 +59,7 @@ export function useGraphEvents(
     const handleCanvasClick = () => {
       setSelectedNodeId(ALL_NODE_ID);
       setOverviewInfo(overviewInfoCurrent.current || undefined);
-      clearNodeActive();
+      clearNodeActive(graph);
     };
 
     const handleCanvasDragStart = () => {
@@ -88,12 +80,9 @@ export function useGraphEvents(
     graph.on("canvas:dragstart", handleCanvasDragStart);
     graph.on("canvas:dragend", handleCanvasDragEnd);
 
-    return () => {
-      graph.off("node:click", handleNodeClick);
-      graph.off("node:mouseleave", handleNodeMouseLeave);
-      graph.off("canvas:click", handleCanvasClick);
-      graph.off("canvas:dragstart", handleCanvasDragStart);
-      graph.off("canvas:dragend", handleCanvasDragEnd);
-    };
-  }, [graph, plainData, setOverInfo, setSelectedNodeId, getAllNodes, setNodeActive, clearNodeActive, profileWrapRefCanvas, profileWrapRef, overviewInfoCurrent, setOverviewInfo]);
-}
+  }, [profileWrapRefCanvas, profileWrapRef, overviewInfoCurrent, setOverviewInfo, getAllNodes, setNodeActive, clearNodeActive]);
+
+  return {
+    bindGraphEvents,
+  };
+}
diff --git a/frontend/src/hooks/useProfileData.ts b/frontend/src/hooks/useProfileData.ts
@@ -24,6 +24,7 @@ export function useProfileData(): {
   const [overviewInfo, setOverviewInfo] = useState<IOverview | undefined>(undefined);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const overviewInfoCurrent = useRef<IOverview | undefined>(undefined);
+
   useEffect(() => {
     const fetchMessage = async () => {
       try {

diff --git a/frontend/src/hooks/useRefValueListener.ts b/frontend/src/hooks/useRefValueListener.ts