fix: fix graph consistency, chunked nodes

src/components/App/index.tsx

@@ -1,5 +1,5 @@
 import { Leva } from 'leva'
-import { lazy, Suspense, useCallback, useEffect } from 'react'
+import { lazy, Suspense, useCallback, useEffect, useRef } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useSearchParams } from 'react-router-dom'
 import 'react-toastify/dist/ReactToastify.css'
@@ -23,6 +23,7 @@
   AiSummaryQuestionsResponse,
   AiSummarySourcesResponse,
   ExtractedEntitiesResponse,
+  FetchDataResponse,
 } from '~/types'
 import { colors } from '~/utils/colors'
 import { updateBudget } from '~/utils/setBudget'
@@ -57,6 +58,8 @@
   const [searchParams] = useSearchParams()
   const query = searchParams.get('q')
   const { setBudget, setNodeCount } = useUserStore((s) => s)
+  const queueRef = useRef<FetchDataResponse | null>(null)
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
 
   const {
     setSidebarOpen,
@@ -134,6 +137,35 @@
     setNodeCount('INCREMENT')
   }, [setNodeCount])
 
+  const handleNewNodeCreated = useCallback(
+    (data: FetchDataResponse) => {
+      if (!queueRef.current) {
+        queueRef.current = { nodes: [], edges: [] }
+      }
+
+      if (data.edges) {
+        queueRef.current.edges.push(...data.edges)
+      }
+
+      if (data.nodes) {
+        queueRef.current.nodes.push(...data.nodes)
+      }
+
+      if (timerRef.current) {
+        clearTimeout(timerRef.current)
+      }
+
+      timerRef.current = setTimeout(() => {
+        // Combine all queued data into a single update
+        const batchedData = { ...queueRef.current }
+
+        queueRef.current = { nodes: [], edges: [] } // Reset the queue
+        addNewNode(batchedData) // Call the original addNewNode function with batched data
+      }, 2000) // Adjust delay as necessary
+    },
+    [addNewNode],
+  )
+
   const handleAiSummaryAnswer = useCallback(
     (data: AiSummaryAnswerResponse) => {
       if (data.ref_id) {
@@ -173,15 +205,6 @@
     [setAiSummaryAnswer],
   )
 
-  const handleNewNodeCreated = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (data: any) => {
-      // Use the data recieved to create graph in realtime
-      addNewNode(data)
-    },
-    [addNewNode],
-  )
-
   const handleExtractedEntities = useCallback(
     (data: ExtractedEntitiesResponse) => {
       if (data.question && getKeyExist(aiRefId)) {
@@ -268,7 +291,7 @@
     }
 
     ws.onmessage = (event) => {
       console.log('Message from server:', event.data)
 
       const data = JSON.parse(event.data)
 
@@ -283,7 +306,7 @@
 
         setRunningProjectMessages(message)
 
         console.log(message)
       }
 
       // Handle the message from the server here
@@ -294,7 +317,7 @@
     }
 
     ws.onclose = () => {
       console.log('WebSocket connection closed')
     }
   }, [runningProjectId, setRunningProjectMessages])