Update mouse cursor appropriately when hovering over nodes

ResilienceWeb · Sep 28, 2024 · 1a8b3a8 · 1a8b3a8
1 parent 3bdca18
commit 1a8b3a8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/app/[subdomain]/[slug]/page.tsx b/app/[subdomain]/[slug]/page.tsx
@@ -41,6 +41,7 @@ export async function generateMetadata({ params }) {
 
   return {
     title: `${listing.title} | Resilience Web`,
+    description: truncatedDescription,
     openGraph: {
       title: `${listing.title} | Resilience Web`,
       description: truncatedDescription,

diff --git a/components/network/Network.tsx b/components/network/Network.tsx
@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import { memo, useCallback, useEffect, useMemo } from 'react'
+import { memo, useState, useCallback, useEffect, useMemo } from 'react'
 import VisNetworkReactComponent from 'vis-network-react'
 import { useDisclosure } from '@chakra-ui/react'
 import Dialog from '@components/main-list/dialog'
@@ -76,6 +76,7 @@ const options = {
 
 const Network = ({ data, selectedId, setSelectedId }) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
+  const [network, setNetwork] = useState<any>()
 
   useEffect(() => {
     if (selectedId) {
@@ -89,8 +90,18 @@ const Network = ({ data, selectedId, setSelectedId }) => {
         const { nodes } = event
         setSelectedId(nodes[0])
       },
+      hoverNode: function () {
+        if (network) {
+          network.canvas.body.container.style.cursor = 'pointer'
+        }
+      },
+      blurNode: function () {
+        if (network) {
+          network.canvas.body.container.style.cursor = 'default'
+        }
+      },
     }),
-    [setSelectedId],
+    [network, setSelectedId],
   )
 
   const selectedItem = useMemo(
@@ -103,6 +114,8 @@ const Network = ({ data, selectedId, setSelectedId }) => {
     onClose()
   }, [onClose, setSelectedId])
 
+  const getNetwork = useCallback((network) => setNetwork(network), [setNetwork])
+
   return (
     <>
       <Head>
@@ -116,6 +129,7 @@ const Network = ({ data, selectedId, setSelectedId }) => {
           events={events}
           data={data}
           options={options}
+          getNetwork={getNetwork}
         />
         {Boolean(selectedId) &&
           selectedItem?.group !== 'category' &&