From ab3a5a97004dba783f85ec433ad783b87c0b9e80 Mon Sep 17 00:00:00 2001
From: dextmorgn <dexxterrmorgan@proton.me>
Date: Tue, 4 Feb 2025 19:48:04 +0100
Subject: [PATCH] feat: on node click

---
 src/components/investigations/graph.tsx       | 19 +++++++++++++++++++
 .../investigations/individual-modal.tsx       |  5 ++---
 .../investigations/nodes/individual.tsx       | 19 +++----------------
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/investigations/graph.tsx b/src/components/investigations/graph.tsx
index e653374..4fec00f 100644
--- a/src/components/investigations/graph.tsx
+++ b/src/components/investigations/graph.tsx
@@ -25,6 +25,7 @@ import { AlignCenterHorizontal, AlignCenterVertical, MaximizeIcon, RotateCcwIcon
 import { useTheme } from 'next-themes';
 import NewActions from './new-actions';
 import { IconButton, Tooltip, Spinner } from '@radix-ui/themes';
+import { usePathname, useSearchParams, useRouter } from 'next/navigation';
 
 const nodeTypes = { individual: IndividualNode, phone: PhoneNode, ip: IpNode, email: EmailNode, social: SocialNode };
 const edgeTypes = {
@@ -63,8 +64,19 @@ const LayoutFlow = ({ initialNodes, initialEdges, theme }: { initialNodes: any,
     const { fitView, zoomIn, zoomOut, addNodes } = useReactFlow();
     const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
     const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+    const router = useRouter()
+    const pathname = usePathname()
+    const searchParams = useSearchParams()
     const ref = useRef(null);
+    const createQueryString = useCallback(
+        (name: string, value: string) => {
+            const params = new URLSearchParams(searchParams.toString())
+            params.set(name, value)
 
+            return params.toString()
+        },
+        [searchParams]
+    )
     const onLayout = useCallback(
         (direction: any) => {
             const layouted = getLayoutedElements(nodes, edges, { direction });
@@ -90,6 +102,9 @@ const LayoutFlow = ({ initialNodes, initialEdges, theme }: { initialNodes: any,
         onLayout('LR')
     }, [initialEdges])
 
+    const handleOpenIndividualModal = (id: string) => router.push(pathname + '?' + createQueryString('individual_id', id))
+
+
     return (
         <div className='h-[calc(100vh_-_48px)]'>
             <ReactFlow
@@ -100,6 +115,10 @@ const LayoutFlow = ({ initialNodes, initialEdges, theme }: { initialNodes: any,
                 onNodesChange={onNodesChange}
                 onEdgesChange={onEdgesChange}
                 onConnect={onConnect}
+                onNodeClick={(_, node) => {
+                    if (node.type !== "individual") return
+                    handleOpenIndividualModal(node.id);
+                }}
                 fitView
                 proOptions={{
                     hideAttribution: true
diff --git a/src/components/investigations/individual-modal.tsx b/src/components/investigations/individual-modal.tsx
index 1c79072..4535cf6 100644
--- a/src/components/investigations/individual-modal.tsx
+++ b/src/components/investigations/individual-modal.tsx
@@ -137,7 +137,7 @@ const IndividualModal = () => {
                                                         <Flex key={index} gap="2" align="center">
                                                             <TextField.Root
                                                                 value={email}
-                                                                onChange={(e) => handleFieldChange(index, e.target.value, setEmails)}
+                                                                onChange={(e) => handleFieldChange(index as any, e.target.value, setEmails)}
                                                                 placeholder="Email"
                                                                 type="email"
                                                                 disabled={!editMode}
@@ -147,7 +147,7 @@ const IndividualModal = () => {
                                                                 <IconButton
                                                                     type="button"
                                                                     variant="ghost"
-                                                                    onClick={() => handleRemoveField(index, setEmails)}
+                                                                    onClick={() => handleRemoveField(index as any, setEmails)}
                                                                     aria-label="Remove email"
                                                                 >
                                                                     <TrashIcon />
@@ -189,7 +189,6 @@ const IndividualModal = () => {
                                                     )}
                                                 </Flex>
                                             </Tabs.Content>
-
                                             <Tabs.Content value="social_account">
                                                 <Flex direction="column" gap="3">
                                                     <TextField.Root
diff --git a/src/components/investigations/nodes/individual.tsx b/src/components/investigations/nodes/individual.tsx
index c418120..2799a5c 100644
--- a/src/components/investigations/nodes/individual.tsx
+++ b/src/components/investigations/nodes/individual.tsx
@@ -6,29 +6,16 @@ import { Avatar, Card, Box, Flex, Text, ContextMenu, Spinner, Badge, Tooltip } f
 import { AtSignIcon, CameraIcon, FacebookIcon, InstagramIcon, LocateIcon, MessageCircleDashedIcon, PhoneIcon, SendIcon, UserIcon } from 'lucide-react';
 import { NodeProvider, useNodeContext } from './node-context';
 import { cn } from '@/utils';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 function Custom({ data }: any) {
     const { settings } = useInvestigationContext()
     const { setOpenAddNodeModal, handleDuplicateNode, handleDeleteNode, loading } = useNodeContext()
-    const router = useRouter()
-    const pathname = usePathname()
-    const searchParams = useSearchParams()
-    const createQueryString = useCallback(
-        (name: string, value: string) => {
-            const params = new URLSearchParams(searchParams.toString())
-            params.set(name, value)
 
-            return params.toString()
-        },
-        [searchParams]
-    )
-    const handleOpenIndividualModal = () => router.push(pathname + '?' + createQueryString('individual_id', data.id))
     return (
         <>
             <ContextMenu.Root>
                 <ContextMenu.Trigger>
-                    <Box onClick={handleOpenIndividualModal} className={cn(loading ? "!opacity-40" : "!opacity-100")}>{settings.showNodeLabel ?
+                    <Box className={cn(loading ? "!opacity-40" : "!opacity-100")}>{settings.showNodeLabel ?
                         <Card className='!py-1'>
                             <Flex gap="2" align="center">
                                 <Avatar
@@ -49,7 +36,7 @@ function Custom({ data }: any) {
                             </Flex>
                         </Card> :
                         <Tooltip content={data.full_name}>
-                            <button onClick={handleOpenIndividualModal} className='!rounded-full border-transparent'>
+                            <button className='!rounded-full border-transparent'>
                                 <Avatar
                                     size="3"
                                     src={data?.image_url}
@@ -98,7 +85,7 @@ function Custom({ data }: any) {
                         Delete
                     </ContextMenu.Item>
                 </ContextMenu.Content>
-            </ContextMenu.Root>
+            </ContextMenu.Root >
         </>
     );
 }