diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 9b98b5030..ea62b37e5 100644 --- a/src/components/App/index.tsx +++ b/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 @@ import { AiSummaryQuestionsResponse, AiSummarySourcesResponse, ExtractedEntitiesResponse, + FetchDataResponse, } from '~/types' import { colors } from '~/utils/colors' import { updateBudget } from '~/utils/setBudget' @@ -57,6 +58,8 @@ export const App = () => { const [searchParams] = useSearchParams() const query = searchParams.get('q') const { setBudget, setNodeCount } = useUserStore((s) => s) + const queueRef = useRef(null) + const timerRef = useRef(null) const { setSidebarOpen, @@ -134,6 +137,35 @@ export const App = () => { 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 @@ export const App = () => { [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)) {