chore: formatting and cleanup

jerlendds · Jun 17, 2023 · 16073e1 · 16073e1
1 parent 69fc66a
commit 16073e1
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -77,7 +77,7 @@ An almost incomprehensible amount of data is created every day. And each year, f
 Some of the main hindrances to practical OSINT is the volume of information it has to deal with [(information explosion)](https://en.wikipedia.org/wiki/Information_explosion) and the issue of low quality data. With the majority of this data being unstructured, there's many challenges to analyzing it and producing actionable intelligence since most data analytics databases are designed for structured data.
 
 
-We've decided to do something about it. The rapid developments in technologies such as AI and Big Data Analytics have opened new horizons for OSINT which weren't previously available. We want our information quick and to the point, that's why we're building an open-source OSINT tool that's free. Free to use, free to modify, free to do with as you wish, and built with plain old web technologies anyone can learn. But this isn't really the project. This is a free new community. A community for OSINT enthusiast around the world and we need your help to design it, to program it, and to build it. We want to hear your suggestions, your ideas, and we're going to build it right in front of your eyes. The notion of a “needle in a haystack” is taken to the extreme on the internet. Let's build a magnet.
+We've decided to do something about it. The rapid developments in technologies such as AI and big data analytics have opened new horizons for OSINT which weren't previously available. We want our information quick and to the point, that's why we're building an open-source OSINT tool that's free. Free to use, free to modify, free to do with as you wish, and built with plain old web technologies anyone can learn. But this isn't really the project. This is a free new community. A community for OSINT enthusiast around the world and we need your help to design it, to program it, and to build it. We want to hear your suggestions, your ideas, and we're going to build it right in front of your eyes. The notion of a “needle in a haystack” is taken to the extreme on the internet. Let's build a magnet.
 
 
 [OSINTBuddy demo video](https://www.youtube.com/watch?v=XKBusfYGL4M)

diff --git a/backend/backend/app/app/plugins/core.py b/backend/backend/app/app/plugins/core.py
@@ -127,6 +127,8 @@ class GoogleCacheSearchPlugin(ob.Plugin):
 
     @ob.transform(label="To cache results")
     async def transform_to_google_cache_results(self, node, **kwargs):
+
+
         query = node["data"][0]
         pages = node["data"][1]
         return await self.search_google_cache(query, pages)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
@@ -165,9 +165,17 @@ input[type='number'] {
   stroke: #60666a !important;
 }
 .react-flow__edge {
-  cursor: grab;
-  pointer-events: none;
-}
+  cursor: grab !important;
+  pointer-events: none !important;
+}
+/* .react-flow__pane, .react-flow__renderer {
+  top: 13rem !important;
+  bottom: 0;
+} */
+/* .react-flow__background {
+  bottom: 0;
+  top: none !important;
+} */
 /* end react flow style overrides */
 
 input[type='file'] {

diff --git a/frontend/src/routes/project-graph/_components/ContextAction.tsx b/frontend/src/routes/project-graph/_components/ContextAction.tsx
@@ -1,33 +1,13 @@
-import { toast } from 'react-toastify';
-import { getId } from '..';
-import { api } from '@/services';
-import { Suspense, lazy, useEffect, useMemo, useState } from 'react';
 import { Icon } from '@components/Icons';
 
 export default function ContextAction({
-  node,
   nodeType,
-  nodeData,
-  addEdge,
-  addNode,
-  deleteNode,
+  data,
   sendJsonMessage,
   parentId,
-  lastMessage,
-  setMessageHistory,
+  transforms,
+  bounds
 }: any) {
-  const [transforms, setTransforms] = useState<string[]>([]);
-
-  let bounds = node?.getBoundingClientRect();
-  useEffect(() => {
-    let ignore = false;
-    api.get(`/nodes/transforms?node_type=${nodeType}`).then((resp) => {
-      if (!ignore && resp?.data?.transforms) setTransforms(resp?.data?.transforms);
-    });
-    return () => {
-      ignore = true;
-    };
-  }, [nodeType]);
 
   return (
     <>
@@ -45,7 +25,7 @@ export default function ContextAction({
                       transform: transform.label,
                       type: nodeType,
                       position: { x: bounds.x, y: bounds.y },
-                      data: [...nodeData],
+                      data: [...data],
                     },
                   })
                 }

diff --git a/frontend/src/routes/project-graph/_components/ContextMenu.tsx b/frontend/src/routes/project-graph/_components/ContextMenu.tsx
@@ -1,22 +1,42 @@
 import { useAppSelector } from '@/app/hooks';
 import { isSidebarOpen } from '@/features/settings/settingsSlice';
-import React, { useCallback, useEffect, useState } from 'react';
+import { api } from '@/services';
+import { useCallback, useEffect, useState } from 'react';
 
-const useContextMenu = () => {
+const useContextMenu = (setTransforms: Function) => {
   const [xPos, setXPos] = useState('0px');
   const [yPos, setYPos] = useState('0px');
   const [showMenu, setShowMenu] = useState(false);
-  const [targetNode, setTargetNode] = useState(null);
+  const [targetNode, setTargetNode] = useState<HTMLElement | null>(null);
+  const [nodeType, setNodeType] = useState<string | null | undefined>(null);
+
   const handleContextMenu = useCallback(
-    (e: any) => {
-      e.preventDefault();
-      // @todo implement support for when multiple nodes are selected
-      if (e.target.closest('.react-flow__nodesselection-rect')) {
+    (event: MouseEvent) => {
+      event.preventDefault();
+      setTransforms([]);
+
+      if (event.target instanceof HTMLElement) {
+        // @todo implement support for transforming when multiple nodes are selected
+        // const multiSelect = event.target.closest('.react-flow__nodesselection-rect') as HTMLDivElement
+        // if (multiSelect) {}
+        console.log('1');
+        const singleSelect = event.target.closest('.react-flow__node') as HTMLDivElement;
+        if (singleSelect) {
+          setTargetNode(singleSelect);
+          const type = singleSelect.querySelector('[data-node-type]')?.getAttribute('data-node-type');
+          if (type) {
+            api.get(`/nodes/transforms?node_type=${type}`).then((resp) => {
+              if (resp?.data?.transforms) {
+                setTransforms(resp?.data?.transforms);
+              }
+            });
+            setNodeType(type);
+          }
+        }
+        setXPos(`${event.pageX}px`);
+        setYPos(`${event.pageY - 20}px`);
       }
-      setXPos(`${e.pageX}px`);
-      setYPos(`${e.pageY}px`);
       setShowMenu(true);
-      setTargetNode(e.target.closest('.react-flow__node'));
     },
     [setXPos, setYPos]
   );
@@ -35,24 +55,40 @@ const useContextMenu = () => {
     };
   });
 
-  return { xPos, yPos, showMenu, targetNode };
+  return { xPos, yPos, showMenu, setYPos, targetNode, nodeType };
 };
 
 const ContextMenu = ({ menu }: any) => {
-  const { xPos, yPos, showMenu, targetNode } = useContextMenu();
+  const [transforms, setTransforms] = useState<string[]>([]);
+  const { xPos, yPos, setYPos, showMenu, targetNode, nodeType } = useContextMenu(setTransforms);
+
   const showSidebar = useAppSelector((state) => isSidebarOpen(state));
+
+  let data: Array<string | null> = [];
+  if (targetNode)
+    data = [...targetNode.querySelectorAll<HTMLInputElement | HTMLElement>('[data-node]')].map((node) =>
+      node instanceof HTMLInputElement ? node.value : node?.textContent
+    );
+
   return (
     <>
       {showMenu ? (
         <div
+          id='context-menu'
+          className='z-[999] absolute'
           style={{
-            zIndex: 999,
             top: yPos,
             left: `calc(${xPos} - ${showSidebar ? 16 : 3}rem)`,
-            position: 'absolute',
           }}
         >
-          {menu({ node: targetNode })}
+          {menu({
+            data,
+            transforms,
+            node: targetNode,
+            bounds: targetNode?.getBoundingClientRect(),
+            parentId: targetNode?.getAttribute('data-id'),
+            nodeType: nodeType,
+          })}
         </div>
       ) : (
         <></>

diff --git a/frontend/src/routes/project-graph/index.tsx b/frontend/src/routes/project-graph/index.tsx
@@ -129,7 +129,6 @@ const InvestigationFlow = ({
     }
   };
 
-
   return (
     <div onClick={handleClick} style={{ width: '100%', height: '100%' }} ref={reactFlowWrapper}>
       <ReactFlow
@@ -362,7 +361,6 @@ export default function OsintPage() {
     }
   }, [lastMessage, setMessageHistory]);
 
-
   return (
     <>
       <HotKeys keyMap={keyMap} handlers={handlers}>
@@ -397,7 +395,6 @@ export default function OsintPage() {
             />
           </div>
         </div>
-
 
         <CommandPallet
           toggleShowOptions={toggleShowNodeOptions}
@@ -409,18 +406,7 @@ export default function OsintPage() {
           className='absolute top-[3.5rem] w-48 bg-red -z-10 h-20 left-[0.7rem] text-slate-900'
         ></div>
         <ContextMenu
-          menu={({ node }) => {
-            let parentId = null;
-            let nodeData = null;
-            let nodeType = null;
-
-            if (node) {
-              nodeData = [...node.querySelectorAll('[data-node]')].map((node) =>
-                node?.value ? node.value : node?.textContent
-              );
-              parentId = node.getAttribute('data-id');
-              nodeType = node.querySelector('[data-node-type]').getAttribute('data-node-type');
-            }
+          menu={({ node, parentId, data, nodeType, transforms, bounds }) => {
             return (
               <>
                 <div className='relative z-50 inline-block text-left'>
@@ -444,16 +430,16 @@ export default function OsintPage() {
                         </div>
                       </div>
                     </div>
-                    <ContextAction
-                      node={node}
-                      parentId={parentId}
-                      nodeData={nodeData}
-                      nodeType={nodeType}
-                      addEdge={addEdge}
-                      addNode={addNode}
-                      deleteNode={deleteNode}
-                      sendJsonMessage={sendJsonMessage}
-                    />
+                    {transforms && (
+                      <ContextAction
+                        nodeType={nodeType}
+                        data={data}
+                        sendJsonMessage={sendJsonMessage}
+                        parentId={parentId}
+                        transforms={transforms}
+                        bounds={bounds}
+                      />
+                    )}
                     {nodeType && (
                       <div className='node-context'>
                         <div>

diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2015",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,