diff --git a/README.md b/README.md index b4f2ff43..516c7519 100644 --- a/README.md +++ b/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 diff --git a/rsconcept/frontend/package-lock.json b/rsconcept/frontend/package-lock.json index cfe07315..6dbf58b3 100644 --- a/rsconcept/frontend/package-lock.json +++ b/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", diff --git a/rsconcept/frontend/package.json b/rsconcept/frontend/package.json index b73c6924..c36f8afb 100644 --- a/rsconcept/frontend/package.json +++ b/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", diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx index ca530738..3e149875 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx +++ b/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} - {hoverCst ? ( + {hoverCst && hoverCstDebounced && hoverCst === hoverCstDebounced ? ( - + ) : null} diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts index 22080ede..c4d654f2 100644 --- a/rsconcept/frontend/src/utils/constants.ts +++ b/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