Merge branch 'staging' into add-create-repo

Author: Anchel123

app/components/Input.tsx

@@ -38,9 +38,7 @@ export default function Input({ onValueChange, handleSubmit, graph, icon, node,
         const timeout = setTimeout(async () => {
 
             if (!node?.name) {
-                if (!node?.name) {
-                    setOptions([])
-                }
+                setOptions([])
                 setOpen(false)
                 return
             }

app/components/chat.tsx

@@ -4,12 +4,12 @@ import Image from "next/image";
 import { AlignLeft, ArrowDown, ArrowRight, ChevronDown, Lightbulb, Undo2 } from "lucide-react";
 import { Path } from "../page";
 import Input from "./Input";
-import { Graph, GraphData } from "./model";
+import { Graph, GraphData, Link } from "./model";
 import { cn } from "@/lib/utils";
 import { TypeAnimation } from "react-type-animation";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { prepareArg } from "../utils";
-import { NodeObject } from "react-force-graph-2d";
+import { NodeObject, ForceGraphMethods } from "react-force-graph-2d";
 
 type PathData = {
     nodes: any[]
@@ -25,50 +25,6 @@ enum MessageTypes {
     Text,
 }
 
-const EDGE_STYLE = {
-    "line-color": "gray",
-    "target-arrow-color": "gray",
-    "opacity": 0.5,
-}
-
-
-const PATH_EDGE_STYLE = {
-    width: 0.5,
-    "line-style": "dashed",
-    "line-color": "#FF66B3",
-    "arrow-scale": 0.3,
-    "target-arrow-color": "#FF66B3",
-    "opacity": 1
-}
-
-const SELECTED_PATH_EDGE_STYLE = {
-    width: 1,
-    "line-style": "solid",
-    "line-color": "#FF66B3",
-    "arrow-scale": 0.6,
-    "target-arrow-color": "#FF66B3",
-};
-
-const NODE_STYLE = {
-    "border-width": 0.5,
-    "color": "gray",
-    "border-color": "black",
-    "background-color": "gray",
-    "opacity": 0.5
-}
-
-const PATH_NODE_STYLE = {
-    "border-width": 0.5,
-    "border-color": "#FF66B3",
-    "border-opacity": 1,
-}
-
-const SELECTED_PATH_NODE_STYLE = {
-    "border-width": 1,
-    "border-color": "#FF66B3",
-    "border-opacity": 1,
-};
-
 interface Message {
     type: MessageTypes;
     text?: string;
@@ -85,7 +41,7 @@ interface Props {
     isPathResponse: boolean | undefined
     setIsPathResponse: (isPathResponse: boolean | undefined) => void
     setData: Dispatch<SetStateAction<GraphData>>
-    chartRef: any
+    chartRef: React.MutableRefObject<ForceGraphMethods<Node, Link>>
 }
 
 const SUGGESTIONS = [

app/components/code-graph.tsx

@@ -14,7 +14,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import dynamic from 'next/dynamic';
 import { Position } from "./graphView";
 import { prepareArg } from '../utils';
-import { NodeObject } from "react-force-graph-2d";
+import { NodeObject, ForceGraphMethods } from "react-force-graph-2d";
 
 const GraphView = dynamic(() => import('./graphView'));
 
@@ -27,7 +27,7 @@ interface Props {
     setOptions: Dispatch<SetStateAction<string[]>>
     isShowPath: boolean
     setPath: Dispatch<SetStateAction<Path | undefined>>
-    chartRef: RefObject<any>
+    chartRef: React.MutableRefObject<ForceGraphMethods<Node, Link>>
     selectedValue: string
     selectedPathId: number | undefined
     setSelectedPathId: (selectedPathId: number) => void
@@ -178,8 +178,6 @@ export function CodeGraph({
 
                 const isTarget = graph.Elements.links.some(link => link.target.id === node.id && nodes.some(n => n.id === link.source.id));
 
-                debugger
-
                 if (!isTarget) return true
 
                 const deleted = graph.NodesMap.delete(Number(node.id))

app/components/graphView.tsx

@@ -1,5 +1,5 @@
 
-import ForceGraph2D from 'react-force-graph-2d';
+import ForceGraph2D, { ForceGraphMethods } from 'react-force-graph-2d';
 import { Graph, GraphData, Link, Node } from './model';
 import { Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react';
 import { Path } from '../page';
@@ -13,7 +13,7 @@ interface Props {
     data: GraphData
     setData: Dispatch<SetStateAction<GraphData>>
     graph: Graph
-    chartRef: RefObject<any>
+    chartRef: React.MutableRefObject<ForceGraphMethods<Node, Link>>
     selectedObj: Node | Link | undefined
     setSelectedObj: Dispatch<SetStateAction<Node | Link | undefined>>
     selectedObjects: Node[]

app/components/toolbar.tsx

@@ -1,9 +1,11 @@
 import { CircleDot, Minus, Plus } from "lucide-react";
 import { cn } from "@/lib/utils"
-import { RefObject } from "react";
+import { ForceGraphMethods } from "react-force-graph-2d";
+import { Node, Link } from "./model";
+import { MutableRefObject } from "react";
 
 interface Props {
-    chartRef: RefObject<any>
+    chartRef: MutableRefObject<ForceGraphMethods<Node, Link>>
     className?: string
 }
 

e2e/config/testData.ts

@@ -26,4 +26,9 @@ export const nodes: { nodeName: string; }[] = [
   { nodeName: "list_graphs"}
 ];
 
-export const categories: string[] = ['File', 'Class', 'Function'];
+export const categories: string[] = ['File', 'Class', 'Function'];
+
+export const graphs: { graphName: string; }[] = [
+  { graphName: "GraphRAG-SDK" },
+  { graphName: "click" },
+];

e2e/tests/canvas.spec.ts

@@ -4,7 +4,7 @@ import CodeGraph from "../logic/POM/codeGraph";
 import urls from "../config/urls.json";
 import { GRAPH_ID, PROJECT_NAME } from "../config/constants";
 import { findNodeByName } from "../logic/utils";
-import { nodesPath, categories, nodes } from "../config/testData";
+import { nodesPath, categories, nodes, graphs } from "../config/testData";
 import { ApiCalls } from "../logic/api/apiCalls";
 
 test.describe("Canvas tests", () => {
@@ -117,16 +117,15 @@ test.describe("Canvas tests", () => {
     });
   })
 
-  for (let index = 0; index < 2; index++) {
-    const checkboxIndex = index + 1;
-    test(`Verify selecting different graphs displays nodes in canvas - Iteration ${index + 1}`, async () => {
+  graphs.forEach(({graphName}) => {
+    test(`Verify selecting different graphs displays nodes in canvas - grpah: ${graphName}`, async () => {
       const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
-      await codeGraph.selectGraph(checkboxIndex);
+      await codeGraph.selectGraph(graphName);
       const result = await codeGraph.getGraphDetails();
       expect(result.elements.nodes.length).toBeGreaterThan(1);
       expect(result.elements.links.length).toBeGreaterThan(1);
     });
-  }
+  })
 
   for (let index = 0; index < 3; index++) {
     const nodeIndex: number = index + 1;