Add debounce for constituenta hover

README.md

@@ -35,6 +35,7 @@ This readme file is used mostly to document project dependencies
   - react-pdf
   - react-tooltip
   - js-file-download
+  - use-debounce
   - framer-motion
   - reagraph
   - @tanstack/react-table

rsconcept/frontend/package-lock.json

@@ -28,7 +28,8 @@
         "react-tabs": "^6.0.2",
         "react-toastify": "^9.1.3",
         "react-tooltip": "^5.26.3",
-        "reagraph": "^4.15.27"
+        "reagraph": "^4.15.27",
+        "use-debounce": "^10.0.0"
       },
       "devDependencies": {
         "@lezer/generator": "^1.7.0",
@@ -10076,6 +10077,17 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-debounce": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.0.tgz",
+      "integrity": "sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/use-isomorphic-layout-effect": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",

rsconcept/frontend/package.json

@@ -32,7 +32,8 @@
     "react-tabs": "^6.0.2",
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.26.3",
-    "reagraph": "^4.15.27"
+    "reagraph": "^4.15.27",
+    "use-debounce": "^10.0.0"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.0",

rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { AnimatePresence } from 'framer-motion';
 import fileDownload from 'js-file-download';
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useDebounce } from 'use-debounce';
 
 import InfoConstituenta from '@/components/info/InfoConstituenta';
 import SelectedCounter from '@/components/info/SelectedCounter';
@@ -73,6 +74,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
   const hoverCst = useMemo(() => {
     return hoverID && controller.schema?.cstByID.get(hoverID);
   }, [controller.schema?.cstByID, hoverID]);
+  const [hoverCstDebounced] = useDebounce(hoverCst, PARAMETER.graphPopupDelay);
 
   const [toggleResetView, setToggleResetView] = useState(false);
 
@@ -315,13 +317,13 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
         ) : null}
       </Overlay>
 
-      {hoverCst ? (
+      {hoverCst && hoverCstDebounced && hoverCst === hoverCstDebounced ? (
         <Overlay
           layer='z-tooltip'
           position='top-[1.6rem] left-[2.6rem]'
           className={clsx('w-[25rem]', 'px-3', 'overflow-y-auto', 'border shadow-md', 'clr-app')}
         >
-          <InfoConstituenta className='pt-1 pb-2' data={hoverCst} />
+          <InfoConstituenta className='pt-1 pb-2' data={hoverCstDebounced} />
         </Overlay>
       ) : null}
 

rsconcept/frontend/src/utils/constants.ts

@@ -15,6 +15,7 @@ export const buildConstants = {
 export const PARAMETER = {
   smallScreen: 640, // == tailwind:xs
   smallTreeNodes: 50, // amount of nodes threshold for size increase for large graphs
+  graphPopupDelay: 500, // milliseconds delay for graph popup selections
   refreshTimeout: 100, // milliseconds delay for post-refresh actions
   minimalTimeout: 10, // milliseconds delay for fast updates
   graphRefreshDelay: 10, // milliseconds delay for graph viewpoint reset