diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 83e378dd..bac185da 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -528,7 +528,7 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
                             </button>
                             <form className="grow flex items-center border rounded-md px-2" onSubmit={sendQuery}>
                                 <DropdownMenuTrigger asChild>
-                                    <button className="bg-gray-200 p-2 rounded-md hover:bg-gray-300">
+                                    <button data-name="questionOptionsMenu" className="bg-gray-200 p-2 rounded-md hover:bg-gray-300">
                                         <ArrowDown color="white" />
                                     </button>
                                 </DropdownMenuTrigger>
diff --git a/app/components/code-graph.tsx b/app/components/code-graph.tsx
index 41b0536a..6a0c4c40 100644
--- a/app/components/code-graph.tsx
+++ b/app/components/code-graph.tsx
@@ -435,8 +435,8 @@ export function CodeGraph({
                                         </button>
                                     }
                                 </div>
-                                <div className="w-full absolute bottom-0 left-0 flex justify-between items-center p-4 z-10 pointer-events-none">
-                                    <div className="flex gap-4 text-gray-500">
+                                <div data-name="canvas-info-panel" className="w-full absolute bottom-0 left-0 flex justify-between items-center p-4 z-10 pointer-events-none">
+                                    <div data-name="metrics-panel" className="flex gap-4 text-gray-500">
                                         <p>{nodesCount} Nodes</p>
                                         <p>{edgesCount} Edges</p>
                                     </div>
diff --git a/app/components/dataPanel.tsx b/app/components/dataPanel.tsx
index f9dfbaaa..a43a3851 100644
--- a/app/components/dataPanel.tsx
+++ b/app/components/dataPanel.tsx
@@ -36,7 +36,7 @@ export default function DataPanel({ obj, setObj, url }: Props) {
     const object = Object.entries(obj).filter(([k]) => !excludedProperties.includes(k))
 
     return (
-        <div className="z-20 absolute -top-10 left-20 bg-[#343434] text-white shadow-lg rounded-lg flex flex-col max-h-[88%] max-w-[56%] overflow-hidden" >
+        <div data-name="node-details-panel" className="z-20 absolute -top-10 left-20 bg-[#343434] text-white shadow-lg rounded-lg flex flex-col max-h-[88%] max-w-[56%] overflow-hidden" >
             <header className="bg-[#191919] flex items-center gap-8 justify-between p-8">
                 <p title={label} className="truncate font-bold">{label.toUpperCase()}</p>
                 <button onClick={() => setObj(undefined)}>
diff --git a/e2e/config/constants.ts b/e2e/config/constants.ts
index 0c38c15a..a8eca86f 100644
--- a/e2e/config/constants.ts
+++ b/e2e/config/constants.ts
@@ -1,4 +1,4 @@
-export const GRAPH_ID = "1";
+export const GRAPH_ID = "GraphRAG-SDK";
 export const PROJECT_NAME = "GraphRAG-SDK";
 export const CHAT_OPTTIONS_COUNT = 1;
 export const Node_Question = "how many nodes do we have?";
diff --git a/e2e/config/testData.ts b/e2e/config/testData.ts
index 8e89a4f0..a61fce97 100644
--- a/e2e/config/testData.ts
+++ b/e2e/config/testData.ts
@@ -13,3 +13,8 @@ export const specialCharacters: { character: string; expectedRes: boolean }[] =
   ...categorizeCharacters(['%', '*', '(', ')', '-', '[', ']', '{', '}', ';', ':', '"', '|', '~'], false),
   ...categorizeCharacters(['!', '@', '$', '^', '_', '=', '+', "'", ',', '.', '<', '>', '/', '?', '\\', '`', '&', '#'], true)
 ];
+
+export const nodesPath: { firstNode: string; secondNode: string }[] = [
+  { firstNode: "import_data", secondNode: "add_edge" },
+  { firstNode: "test_kg_delete", secondNode: "list_graphs" },
+];
\ No newline at end of file
diff --git a/e2e/infra/ui/browserWrapper.ts b/e2e/infra/ui/browserWrapper.ts
index 706ebaef..985bf25c 100644
--- a/e2e/infra/ui/browserWrapper.ts
+++ b/e2e/infra/ui/browserWrapper.ts
@@ -13,9 +13,9 @@ export default class BrowserWrapper {
         if (!this.browser) {
             this.browser = await chromium.launch();
         }
-        if (!this.context) {
-            this.context = await this.browser.newContext();
-        }
+        this.context = await this.browser.newContext({
+            permissions: ['clipboard-read', 'clipboard-write'],
+        });
         if (!this.page) {
             this.page = await this.context.newPage();
         }
diff --git a/e2e/logic/POM/codeGraph.ts b/e2e/logic/POM/codeGraph.ts
index 3f8e3d60..c6d3846b 100644
--- a/e2e/logic/POM/codeGraph.ts
+++ b/e2e/logic/POM/codeGraph.ts
@@ -1,7 +1,7 @@
 import { Locator, Page } from "playwright";
 import BasePage from "../../infra/ui/basePage";
 import { delay, waitToBeEnabled } from "../utils";
-import { analyzeCanvasWithLocator, CanvasAnalysisResult } from "../canvasAnalysis";
+import { analyzeCanvasNodes, CanvasAnalysisResult } from "../canvasAnalysis";
 
 export default class CodeGraph extends BasePage {
     /* NavBar Locators*/
@@ -21,17 +21,33 @@ export default class CodeGraph extends BasePage {
         return this.page.locator("//div[@role='dialog']")
     }
 
+    private get tipBtn(): Locator {
+        return this.page.locator("//button[@title='Tip']")
+    }
+
+    private get genericMenu(): Locator {
+        return this.page.locator("//div[contains(@role, 'menu')]")
+    }
+
+    private get tipMenuCloseBtn(): Locator {
+        return this.page.locator("//div[@role='menu']//button[@title='Close']")
+    }
+
     /* CodeGraph Locators*/
     private get comboBoxbtn(): Locator {
         return this.page.locator("//button[@role='combobox']")
     }
 
-    private get selectGraphInComboBox(): (graph: string) => Locator {
-        return (graph: string) => this.page.locator(`//div[@role='presentation']//div[@role='option'][${graph}]`);
+    private get selectGraphInComboBoxByName(): (graph: string) => Locator {
+        return (graph: string) => this.page.locator(`//div[@role='presentation']//div//span[contains(text(), '${graph}')]`);
+    }
+
+    private get selectGraphInComboBoxById(): (graph: string) => Locator {
+        return (graph: string) => this.page.locator(`//div[@role='presentation']//div[${graph}]`);
     }
 
     private get lastElementInChat(): Locator {
-        return this.page.locator("//main[@data-name='main-chat']/*[last()]/p");
+        return this.page.locator("//main[@data-name='main-chat']/*[last()]/span");
     }
 
     private get typeUrlInput(): Locator {
@@ -115,6 +131,22 @@ export default class CodeGraph extends BasePage {
         return this.page.locator("//div[@role='region']//ol//li");
     }
 
+    private get notificationErrorCloseBtn(): Locator {
+        return this.page.locator("//div[@role='region']//ol//li/button");
+    }
+
+    private get questionOptionsMenu(): Locator {
+        return this.page.locator("//button[@data-name='questionOptionsMenu']");
+    }
+
+    private get selectQuestionInMenu(): (questionNumber: string) => Locator {
+        return (questionNumber: string) => this.page.locator(`//div[contains(@role, 'menu')]/button[${questionNumber}]`);
+    }
+
+    private get lastQuestionInChat(): Locator {
+        return this.page.locator("//main[@data-name='main-chat']/*[last()-1]/p");
+    }
+
     /* Canvas Locators*/
 
     private get canvasElement(): Locator {
@@ -133,10 +165,37 @@ export default class CodeGraph extends BasePage {
         return this.page.locator("//button[@title='Center']");
     }
 
-    private get removeNodeViaElementMenu(): Locator {
-        return this.page.locator("//button[@title='Remove']");
+    private get codeGraphCheckbox(): (checkbox: string) => Locator {
+        return (checkbox: string) => this.page.locator(`(//button[@role='checkbox'])[${checkbox}]`);
+    }
+
+    private get clearGraphBtn(): Locator {
+        return this.page.locator("//button[p[text()='Clear Graph']]");
+    }
+
+    private get elementMenuButton(): (buttonID: string) => Locator {
+        return (buttonID: string) => this.page.locator(`//button[@title='${buttonID}']`);
     }
     
+    private get nodedetailsPanelHeader(): Locator {
+        return this.page.locator("//div[@data-name='node-details-panel']/header/p");
+    }
+    
+    private get nodedetailsPanelcloseBtn(): Locator {
+        return this.page.locator("//div[@data-name='node-details-panel']/header/button");
+    }
+    private get canvasMetricsPanel(): (itemId: string) => Locator {
+        return (itemId: string) => this.page.locator(`//div[@data-name='metrics-panel']/p[${itemId}]`);
+    }
+
+    private get nodedetailsPanelID(): Locator {
+        return this.page.locator("//div[@data-name='node-details-panel']/main/div[1]/p[2]");
+    }
+
+    private get nodedetailsPanelElements(): Locator {
+        return this.page.locator("//div[@data-name='node-details-panel']/main/div/p[1]");
+    }
+
     /* NavBar functionality */
     async clickOnFalkorDbLogo(): Promise<Page> {
         await this.page.waitForLoadState('networkidle'); 
@@ -164,6 +223,19 @@ export default class CodeGraph extends BasePage {
         return await this.createNewProjectDialog.isVisible();
     }
 
+    async clickonTipBtn(): Promise<void> {
+        await this.tipBtn.click();
+    }
+
+    async isTipMenuVisible(): Promise<boolean> {
+        await delay(500);
+        return await this.genericMenu.isVisible();
+    }
+
+    async clickonTipMenuCloseBtn(): Promise<void> {
+        await this.tipMenuCloseBtn.click();
+    }
+
     /* Chat functionality */
     async clickOnshowPathBtn(): Promise<void> {
         await this.showPathBtn.click();
@@ -183,8 +255,9 @@ export default class CodeGraph extends BasePage {
         await this.lightbulbBtn.click();
     }
 
-    async getTextInLastChatElement(): Promise<string | null>{
-        return await this.lastElementInChat.textContent();
+    async getTextInLastChatElement(): Promise<string>{
+        await delay(2500);
+        return (await this.lastElementInChat.textContent())!;
     }
 
     async getLastChatElementButtonCount(): Promise<number | null>{
@@ -224,14 +297,37 @@ export default class CodeGraph extends BasePage {
     }
 
     async isNotificationError(): Promise<boolean> {
+        await delay(500);
         return await this.notificationError.isVisible();
     }
 
+    async clickOnNotificationErrorCloseBtn(): Promise<void> {
+        await this.notificationErrorCloseBtn.click();
+    }
+
+    async clickOnQuestionOptionsMenu(): Promise<void> {
+        await this.questionOptionsMenu.click();
+    }
+
+    async selectAndGetQuestionInOptionsMenu(questionNumber: string): Promise<string> {
+        await this.selectQuestionInMenu(questionNumber).click();
+        return await this.selectQuestionInMenu(questionNumber).innerHTML();
+    }
+
+    async getLastQuestionInChat(): Promise<string> {
+        return await this.lastQuestionInChat.innerText();
+    }
+
     /* CodeGraph functionality */
-    async selectGraph(graph: string): Promise<void> {
+    async selectGraph(graph: string | number): Promise<void> {
         await this.comboBoxbtn.click();
-        await this.selectGraphInComboBox(graph).waitFor({ state : 'visible'})
-        await this.selectGraphInComboBox(graph).click();
+        if(typeof graph === 'number'){
+            await this.selectGraphInComboBoxById(graph.toString()).waitFor({ state : 'visible'})
+            await this.selectGraphInComboBoxById(graph.toString()).click();
+        } else {
+            await this.selectGraphInComboBoxByName(graph).waitFor({ state : 'visible'})
+            await this.selectGraphInComboBoxByName(graph).click();
+        }
     }
 
     async createProject(url : string): Promise<void> {
@@ -251,6 +347,7 @@ export default class CodeGraph extends BasePage {
     }
 
     async getSearchAutoCompleteCount(): Promise<number> {
+        await this.searchBarAutoCompleteOptions.first().waitFor({ state: 'visible' });
         return await this.searchBarAutoCompleteOptions.count();
     }
 
@@ -259,6 +356,7 @@ export default class CodeGraph extends BasePage {
     }
 
     async selectSearchBarOptionBtn(buttonNum: string): Promise<void> {
+        await delay(1000);
         await this.searchBarOptionBtn(buttonNum).click();
     }
 
@@ -266,7 +364,6 @@ export default class CodeGraph extends BasePage {
         return await this.searchBarInput.inputValue();
     }
     
-
     async scrollToBottomInSearchBarList(): Promise<void> {
         await this.searchBarList.evaluate((element) => {
           element.scrollTop = element.scrollHeight;
@@ -279,10 +376,10 @@ export default class CodeGraph extends BasePage {
     }
 
     /* Canvas functionality */
-    
+
     async getCanvasAnalysis(): Promise<CanvasAnalysisResult> {
         await delay(2000);
-        return await analyzeCanvasWithLocator(this.canvasElement);
+        return await analyzeCanvasNodes(this.canvasElement);
     }
 
     async clickZoomIn(): Promise<void> {
@@ -298,14 +395,70 @@ export default class CodeGraph extends BasePage {
     }
 
     async clickOnRemoveNodeViaElementMenu(): Promise<void> {
-        await this.removeNodeViaElementMenu.click();
+        await this.elementMenuButton("Remove").click();
     }
 
-    async rightClickOnNode(x : number, y: number): Promise<void> {
+    async rightClickOnNode(x: number, y: number): Promise<void> {
         const boundingBox = (await this.canvasElement.boundingBox())!;
-        const adjustedX = boundingBox.x + Math.round(x);
-        const adjustedY = boundingBox.y + Math.round(y);
+        const devicePixelRatio = await this.page.evaluate(() => window.devicePixelRatio || 1);
+        const adjustedX = boundingBox.x + Math.round(x * devicePixelRatio);
+        const adjustedY = boundingBox.y + Math.round(y * devicePixelRatio);
         await this.page.mouse.click(adjustedX, adjustedY, { button: 'right' });
     }
     
+
+    async selectCodeGraphCheckbox(checkbox: string): Promise<void> {
+        await this.codeGraphCheckbox(checkbox).click();
+    }
+
+    async clickOnClearGraphBtn(): Promise<void> {
+        await this.clearGraphBtn.click();
+    } 
+
+    async changeNodePosition(x: number, y: number): Promise<void> {
+        const box = (await this.canvasElement.boundingBox())!;
+        const targetX = x + 100;
+        const targetY = y + 50;
+        const absStartX = box.x + x;
+        const absStartY = box.y + y;
+        const absEndX = box.x + targetX;
+        const absEndY = box.y + targetY;
+        await this.page.mouse.move(absStartX, absStartY);
+        await this.page.mouse.down();
+        await this.page.mouse.move(absEndX, absEndY);
+        await this.page.mouse.up();
+    }
+
+    async getNodeDetailsHeader(): Promise<string> {
+        await this.elementMenuButton("View Node").click();
+        const text = await this.nodedetailsPanelHeader.innerHTML();
+        return text;
+    }
+
+    async clickOnNodeDetailsCloseBtn(): Promise<void>{
+        await this.nodedetailsPanelcloseBtn.click();
+    }
+
+    async getMetricsPanelInfo(): Promise<{nodes: string, edges: string}> {
+        const nodes = await this.canvasMetricsPanel("1").innerHTML();
+        const edges = await this.canvasMetricsPanel("2").innerHTML();
+        return { nodes, edges }
+    }
+
+    async clickOnCopySrcOnNode(): Promise<string> {
+        await this.elementMenuButton("Copy src to clipboard").click();
+        await delay(1000)
+        return await this.page.evaluate(() => navigator.clipboard.readText());
+    }
+
+    async getNodedetailsPanelID(): Promise<string> {
+        return await this.nodedetailsPanelID.innerHTML();
+    }
+
+    async getNodeDetailsPanelElements(): Promise<string[]> {
+        await this.elementMenuButton("View Node").click();
+        await delay(500)
+        const elements = await this.nodedetailsPanelElements.all();
+        return Promise.all(elements.map(element => element.innerHTML()));
+    }
 }
diff --git a/e2e/logic/api/apiCalls.ts b/e2e/logic/api/apiCalls.ts
index cb885629..1b1248d4 100644
--- a/e2e/logic/api/apiCalls.ts
+++ b/e2e/logic/api/apiCalls.ts
@@ -14,8 +14,8 @@ export class ApiCalls {
         return await result.json();
     }
 
-    async fetchLatestRepoInfo(projectName: string): Promise<fetchLatestRepoInfo>{
-        const result = await postRequest(urls.baseUrl + "api/repo/" + projectName);
+    async projectInfo(projectName: string): Promise<fetchLatestRepoInfo>{
+        const result = await getRequest(urls.baseUrl + "api/repo/" + projectName + "/info");
         return await result.json();
     }
 
diff --git a/e2e/logic/api/apiResponse.ts b/e2e/logic/api/apiResponse.ts
index 184311b0..08d89cbd 100644
--- a/e2e/logic/api/apiResponse.ts
+++ b/e2e/logic/api/apiResponse.ts
@@ -21,6 +21,7 @@ export interface getProjectResponse {
                     ext?: string;
                     name: string;
                     path: string;
+                    src: string;
                     doc?: string;
                     src_end?: number;
                     src_start?: number;
diff --git a/e2e/logic/canvasAnalysis.ts b/e2e/logic/canvasAnalysis.ts
index e449f64f..6f33c283 100644
--- a/e2e/logic/canvasAnalysis.ts
+++ b/e2e/logic/canvasAnalysis.ts
@@ -8,7 +8,7 @@ export interface CanvasAnalysisResult {
     green: Array<{ x: number; y: number; radius: number }>;
 }
 
-export async function analyzeCanvasWithLocator(locator: Locator) {
+export async function analyzeCanvasNodes(locator: Locator): Promise<CanvasAnalysisResult> {
     const canvasHandle = await locator.evaluateHandle((canvas) => canvas as HTMLCanvasElement);
     const canvasElement = await canvasHandle.asElement();
     if (!canvasElement) {
@@ -58,64 +58,70 @@ export async function analyzeCanvasWithLocator(locator: Locator) {
             const clusterNodes = (pixels: Pixel[], radius: number): Pixel[][] => {
                 const visited = new Set<string>();
                 const clusters: Pixel[][] = [];
-
+            
                 pixels.forEach((pixel) => {
                     const key = `${pixel.x},${pixel.y}`;
                     if (visited.has(key)) return;
-
+            
                     const cluster: Pixel[] = [];
                     const stack: Pixel[] = [pixel];
-
+            
                     while (stack.length > 0) {
                         const current = stack.pop()!;
                         const currentKey = `${current.x},${current.y}`;
                         if (visited.has(currentKey)) continue;
-
+            
                         visited.add(currentKey);
                         cluster.push(current);
-
+            
                         pixels.forEach((neighbor) => {
                             const dist = Math.sqrt(
                                 (current.x - neighbor.x) ** 2 + (current.y - neighbor.y) ** 2
                             );
-                            if (dist <= radius) stack.push(neighbor);
+                            if (dist <= radius && !visited.has(`${neighbor.x},${neighbor.y}`)) {
+                                stack.push(neighbor);
+                            }
                         });
                     }
-
+            
                     clusters.push(cluster);
                 });
-
+            
                 return clusters;
             };
+            
+            
 
             const mergeCloseClusters = (clusters: Pixel[][], mergeRadius: number): Pixel[][] => {
                 const mergedClusters: Pixel[][] = [];
-                const used = new Set<number>();
-
+                const usedClusters = new Set<number>();
+            
                 for (let i = 0; i < clusters.length; i++) {
-                    if (used.has(i)) continue;
-
+                    if (usedClusters.has(i)) continue;
+            
                     let merged = [...clusters[i]];
+            
                     for (let j = i + 1; j < clusters.length; j++) {
-                        if (used.has(j)) continue;
-
+                        if (usedClusters.has(j)) continue;
+            
                         const dist = Math.sqrt(
                             (merged[0].x - clusters[j][0].x) ** 2 +
                             (merged[0].y - clusters[j][0].y) ** 2
                         );
-
+            
                         if (dist <= mergeRadius) {
-                            merged = merged.concat(clusters[j]);
-                            used.add(j);
+                            merged = [...new Set([...merged, ...clusters[j]])]; // Deduplicate pixels
+                            usedClusters.add(j);
                         }
                     }
-
+            
                     mergedClusters.push(merged);
-                    used.add(i);
+                    usedClusters.add(i);
                 }
-
+            
                 return mergedClusters;
             };
+            
 
             const redClusters = clusterNodes(redPixels, adjustedRadius);
             const yellowClusters = clusterNodes(yellowPixels, adjustedRadius);
@@ -155,4 +161,4 @@ export async function analyzeCanvasWithLocator(locator: Locator) {
 
     await canvasHandle.dispose();
     return result;
-}
\ No newline at end of file
+}
diff --git a/e2e/tests/chat.spec.ts b/e2e/tests/chat.spec.ts
index 02e20253..02f010b4 100644
--- a/e2e/tests/chat.spec.ts
+++ b/e2e/tests/chat.spec.ts
@@ -76,12 +76,50 @@ test.describe("Chat tests", () => {
     expect(await chat.isNotificationError()).toBe(true);
   });
 
-  test("Validate error notification when sending an empty question in chat", async () => {
+  test("Validate error notification and its closure when sending an empty question in chat", async () => {
     const chat = await browser.createNewPage(CodeGraph, urls.baseUrl);
     await chat.selectGraph(GRAPH_ID);
     await chat.clickAskquestionBtn();
-    await delay(500);
     expect(await chat.isNotificationError()).toBe(true);
+    await chat.clickOnNotificationErrorCloseBtn();
+    expect(await chat.isNotificationError()).toBe(false);
+  });
+
+  for (let index = 0; index < 5; index++) {
+    const questionNumber = index + 1;
+    test(`Validate displaying question ${index} in chat after selection from options menu`, async () => {
+      const chat = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await chat.selectGraph(GRAPH_ID);
+      await chat.clickOnQuestionOptionsMenu();
+      const selectedQuestion = await chat.selectAndGetQuestionInOptionsMenu(questionNumber.toString());  
+      expect(selectedQuestion).toEqual(await chat.getLastQuestionInChat())
+    });
+  }
+
+  test(`Validate consistent UI responses for repeated questions in chat`, async () => {
+    const chat = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await chat.selectGraph(GRAPH_ID);
+    const responses: string[] = [];
+    for (let i = 0; i < 3; i++) {
+      await chat.sendMessage(Node_Question);
+      const result = await chat.getTextInLastChatElement();
+      const number = result.match(/\d+/g)?.[0]!;
+      responses.push(number);
+    }
+    const identicalResponses = responses.every((value) => value === responses[0]);
+    expect(identicalResponses).toBe(true);
   });
+
+  test(`Validate UI response matches API response for a given question in chat`, async () => {
+    const chat = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await chat.selectGraph(GRAPH_ID);
   
+    await chat.sendMessage(Node_Question);
+    const uiResponse = await chat.getTextInLastChatElement();
+    const number = uiResponse.match(/\d+/g)?.[0]!;
+    
+    const api = new ApiCalls();
+    const apiResponse = await api.askQuestion(PROJECT_NAME, Node_Question);
+    expect(number).toEqual(apiResponse.result.response.match(/\d+/g)?.[0]);
+  });
 });
diff --git a/e2e/tests/codeGraph.spec.ts b/e2e/tests/codeGraph.spec.ts
index f2eaa60f..d1014b33 100644
--- a/e2e/tests/codeGraph.spec.ts
+++ b/e2e/tests/codeGraph.spec.ts
@@ -2,10 +2,11 @@ import { test, expect } from "@playwright/test";
 import BrowserWrapper from "../infra/ui/browserWrapper";
 import CodeGraph from "../logic/POM/codeGraph";
 import urls from "../config/urls.json";
-import { GRAPH_ID } from "../config/constants";
+import { GRAPH_ID, Node_Add_Edge, Node_Import_Data, PROJECT_NAME } from "../config/constants";
 import { delay } from "../logic/utils";
-import { searchData, specialCharacters } from "../config/testData";
+import { searchData, specialCharacters, nodesPath } from "../config/testData";
 import { CanvasAnalysisResult } from "../logic/canvasAnalysis";
+import { ApiCalls } from "../logic/api/apiCalls";
 
 const colors: (keyof CanvasAnalysisResult)[] = ["red", "yellow", "green"];
 
@@ -38,7 +39,6 @@ test.describe("Code graph tests", () => {
       const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
       await codeGraph.selectGraph(GRAPH_ID);
       await codeGraph.fillSearchBar(searchInput);
-      await delay(1000);
       await codeGraph.selectSearchBarOptionBtn("1");
       expect(await codeGraph.getSearchBarInputValue()).toBe(
         completedSearchInput
@@ -66,6 +66,18 @@ test.describe("Code graph tests", () => {
     });
   });
 
+  searchData.slice(0, 2).forEach(({ searchInput}) => {
+    test(`search bar auto complete via ui and validating via api for: ${searchInput}`, async () => {
+      const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await codeGraph.selectGraph(GRAPH_ID);
+      await codeGraph.fillSearchBar(searchInput);
+      const count = await codeGraph.getSearchAutoCompleteCount();
+      const api = new ApiCalls();
+      const response = await api.searchAutoComplete(PROJECT_NAME, searchInput);
+      expect(count).toBe(response.result.completions.length);
+    });
+  })
+
   test(`Verify zoom in functionality on canvas`, async () => {
     const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
     await codeGraph.selectGraph(GRAPH_ID);
@@ -126,4 +138,191 @@ test.describe("Code graph tests", () => {
     expect(initialNodeAnalysis.red.length).toBeGreaterThan(updatedNodeAnalysis.red.length);
   });
 
+  colors.forEach((color, index) => {
+    const checkboxIndex = index + 1;
+    test(`Verify that unchecking the ${color} checkbox hides ${color} nodes on the canvas`, async () => {
+      const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await codeGraph.selectGraph(GRAPH_ID);
+      await codeGraph.selectCodeGraphCheckbox(checkboxIndex.toString());
+      const result = await codeGraph.getCanvasAnalysis();
+      expect(result[color].length).toBe(0);
+    });
+  })
+
+  test(`Verify "Clear graph" button resets canvas view`, async () => {
+    const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await codeGraph.selectGraph(GRAPH_ID);
+    const initialAnalysis = await codeGraph.getCanvasAnalysis();
+    const initialNodeCount = initialAnalysis.green.length + initialAnalysis.yellow.length + initialAnalysis.red.length;
+    await codeGraph.clickOnshowPathBtn();
+    await codeGraph.insertInputForShowPath("1", Node_Import_Data);
+    await codeGraph.insertInputForShowPath("2", Node_Add_Edge);
+    await codeGraph.clickOnClearGraphBtn();
+    const finalAnalysis = await codeGraph.getCanvasAnalysis();
+    const finalNodeCount = finalAnalysis.green.length + finalAnalysis.yellow.length + finalAnalysis.red.length;
+    expect(initialNodeCount).toBe(finalNodeCount);
+  });
+
+  for (let index = 0; index < 2; index++) {
+    const checkboxIndex = index + 1;
+    test(`Verify selecting different graphs displays nodes in canvas - Iteration ${index + 1}`, async () => {
+      const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await codeGraph.selectGraph(checkboxIndex);
+      const result = await codeGraph.getCanvasAnalysis();
+      const nodesLength = result.green.length + result.yellow.length + result.red.length;
+      expect(nodesLength).toBeGreaterThan(1);
+    });
+  }
+  
+  colors.forEach((color) => {
+    test(`Validate canvas node dragging for color: ${color}`, async () => {
+      const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await codeGraph.selectGraph(GRAPH_ID);
+      const initialAnalysis = await codeGraph.getCanvasAnalysis();
+      await codeGraph.changeNodePosition(initialAnalysis[color][0].x, initialAnalysis[color][0].y);
+      const finalAnalysis = await codeGraph.getCanvasAnalysis();
+      expect(finalAnalysis[color][0].x).not.toBe(initialAnalysis[color][0].x);
+      expect(finalAnalysis[color][0].y).not.toBe(initialAnalysis[color][0].y);
+    });
+  })
+
+  test(`Validate node and edge counts in canvas match API data`, async () => {
+    const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await codeGraph.selectGraph(GRAPH_ID);
+    const { nodes, edges } = await codeGraph.getMetricsPanelInfo();
+    const api = new ApiCalls();
+    const response = await api.projectInfo(PROJECT_NAME);
+    expect(response.result.info.node_count).toEqual(parseInt(nodes));
+    expect(response.result.info.edge_count).toEqual(parseInt(edges));
+  });
+  
+
+  test(`Validate displayed nodes match API response after selecting a graph via UI`, async () => {
+    const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await codeGraph.selectGraph(GRAPH_ID);
+    const analysis = await codeGraph.getCanvasAnalysis();
+    const result = await Promise.all(
+      analysis.green.slice(0,2).map(async (node) => {
+          await codeGraph.rightClickOnNode(node.x, node.y);
+          return await codeGraph.getNodeDetailsHeader();
+        })
+    );
+    await codeGraph.clickOnNodeDetailsCloseBtn();
+    const api = new ApiCalls();
+    const response = await api.getProject(PROJECT_NAME);
+    const nodeExists = response.result.entities.nodes.some((node) =>
+      result.some((resItem) => resItem.includes(node.properties.name.toUpperCase()))
+    );
+    expect(nodeExists).toBe(true)
+  });
+
+
+  test(`Validate copy to clipboard functionality for node and verify with api`, async () => {
+    const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await browser.setPageToFullScreen();
+    await codeGraph.selectGraph(GRAPH_ID);
+    await codeGraph.fillSearchBar(Node_Import_Data);
+    await codeGraph.selectSearchBarOptionBtn("1");
+    const analysis = await codeGraph.getCanvasAnalysis();
+    await codeGraph.rightClickOnNode(analysis.green[0].x, analysis.green[0].y);
+    const result = await codeGraph.clickOnCopySrcOnNode();
+    const api = new ApiCalls();
+    const response = await api.getProject(PROJECT_NAME);
+    const foundNode = response.result.entities.nodes.find(node => node.properties?.name === Node_Import_Data);
+    expect(foundNode?.properties.src).toBe(result);
+  });
+
+  test(`Verify searching for node focus on correct node in canvas`, async () => {
+    const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await browser.setPageToFullScreen();
+    await codeGraph.selectGraph(GRAPH_ID);
+    await codeGraph.fillSearchBar(Node_Import_Data);
+    await codeGraph.selectSearchBarOptionBtn("1");
+    const result = await codeGraph.getCanvasAnalysis();
+    await codeGraph.rightClickOnNode(result.green[0].x, result.green[0].y);
+    const header = await codeGraph.getNodeDetailsHeader();
+    await codeGraph.clickOnNodeDetailsCloseBtn();
+    expect(header).toContain(Node_Import_Data.toUpperCase())
 });
+
+  nodesPath.forEach(({firstNode, secondNode}) => {
+    test(`Verify successful node path connection in canvas between ${firstNode} and ${secondNode} via UI`, async () => {
+      const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+      await codeGraph.selectGraph(GRAPH_ID);
+      await codeGraph.clickOnshowPathBtn();
+      await codeGraph.insertInputForShowPath("1", firstNode);
+      await codeGraph.insertInputForShowPath("2", secondNode);
+      const result = await codeGraph.getCanvasAnalysis();  
+      const res = [];
+      for (const node of result.green) {
+          await codeGraph.rightClickOnNode(node.x, node.y);
+          const details = await codeGraph.getNodeDetailsHeader();
+          await codeGraph.clickOnNodeDetailsCloseBtn();
+          res.push(details);
+      }
+      
+      expect(res.some((item) => item.includes(firstNode.toUpperCase()))).toBe(true);
+      expect(res.some((item) => item.includes(secondNode.toUpperCase()))).toBe(true);
+    });
+  })
+
+  test(`Validate node path connection in canvas ui and confirm via api`, async () => {
+    const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await codeGraph.selectGraph(GRAPH_ID);
+    await codeGraph.clickOnshowPathBtn();
+    await codeGraph.insertInputForShowPath("1", Node_Import_Data);
+    await codeGraph.insertInputForShowPath("2", Node_Add_Edge);
+    const result = await codeGraph.getCanvasAnalysis();
+      
+    const res = [];
+    for (const node of result.green) {
+      await codeGraph.rightClickOnNode(node.x, node.y);
+      const details = await codeGraph.getNodeDetailsHeader();
+      const nodeID = await codeGraph.getNodedetailsPanelID();
+      await codeGraph.clickOnNodeDetailsCloseBtn();
+      res.push({details, nodeID});
+    }
+    const ids: Set<string> = new Set(
+      res.filter(item => item.details.includes(Node_Import_Data.toUpperCase()) || item.details.includes(Node_Add_Edge.toUpperCase())).map(item => item.nodeID)
+    );
+    const sortedIds = Array.from(ids).map(id => parseInt(id, 10)).sort((a, b) => a - b);
+    const api = new ApiCalls();
+    const response = await api.showPath(PROJECT_NAME ,sortedIds[0].toString(),sortedIds[1].toString());
+    const containsDetails = res.some(resItem =>
+      response.result.paths.some(path =>
+        path.some(item =>
+            item.properties?.name
+                ? resItem.details.toUpperCase().includes(item.properties.name.toUpperCase())
+                : false
+        )
+      )
+    );
+    expect(containsDetails).toBe(true);
+  });
+
+  test(`Validate view node panel keys for required and optional fields`, async () => {
+    const codeGraph = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await codeGraph.selectGraph(GRAPH_ID);
+    const analysis = await codeGraph.getCanvasAnalysis();
+    const requiredKeys: string[] = ['id', 'name', 'args', 'path', 'src_end', 'src_start'];
+    const optionalKeys: string[] = ['src']; 
+    await Promise.all(
+        analysis.green.slice(0, 2).map(async (node) => {
+            await codeGraph.rightClickOnNode(node.x, node.y);
+            const elements = await codeGraph.getNodeDetailsPanelElements();
+            
+            requiredKeys.forEach((key) => {
+                const isKeyPresent = elements.some((element) => element.includes(key));
+                expect(isKeyPresent).toBe(true); 
+            });
+            optionalKeys.forEach((key) => {
+                const isKeyPresent = elements.some((element) => element.includes(key));
+                if (isKeyPresent) {
+                  expect(isKeyPresent).toBe(true); 
+                }
+            });
+        })
+    );
+  });
+
+ });
diff --git a/e2e/tests/navBar.spec.ts b/e2e/tests/navBar.spec.ts
index b6706cbf..9f294a75 100644
--- a/e2e/tests/navBar.spec.ts
+++ b/e2e/tests/navBar.spec.ts
@@ -38,4 +38,12 @@ test.describe(' Navbar tests', () => {
     await navBar.clickCreateNewProjectBtn();
     expect(await navBar.isCreateNewProjectDialog()).toBe(true)
   })
+
+  test("Validate Tip popup visibility and closure functionality", async () => {
+    const navBar = await browser.createNewPage(CodeGraph, urls.baseUrl);
+    await navBar.clickonTipBtn();
+    expect(await navBar.isTipMenuVisible()).toBe(true);
+    await navBar.clickonTipMenuCloseBtn();
+    expect(await navBar.isTipMenuVisible()).toBe(false);
+  });
 });
diff --git a/playwright.config.ts b/playwright.config.ts
index 02963413..7a5292d5 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -20,7 +20,7 @@ export default defineConfig({
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: process.env.CI ? 2 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */