Merge pull request #33 from Shubh942/master4

Modified Readme.md file and connected access button with server

README.md

@@ -1,3 +1,143 @@
 # GDB-UI
 
-GDB stands for GNU Debugger. It's a powerful and popular debugger for various programming languages, including C, C++, Ada, and others. It allows developers to observe what a program is doing while it's running. This is particularly useful when debugging to find and fix problems in the code.
+**GDB-UI** is a user-friendly interface built for the GNU Debugger (GDB), providing a modern web-based UI for debugging your applications. It allows developers to monitor program execution, inspect variables, set breakpoints, and more, all through an intuitive web application.
+
+**GitHub Repository:** [c2siorg/GDB-UI](https://github.com/c2siorg/GDB-UI)
+
+## Project Overview
+
+GDB-UI simplifies the debugging process by integrating the powerful features of GDB with a sleek and easy-to-use web interface. This project is particularly useful for developers working with languages like C, C++, and Ada. The interface offers a more accessible and visual approach to debugging, making it easier to identify and fix issues in your code.
+
+## Getting Started
+
+### Docker Setup
+
+The quickest way to get started with GDB-UI is by using Docker. A `docker-compose.yml` file is provided to handle the entire setup.
+
+1. Ensure Docker and Docker Compose are installed on your machine.
+2. Run the following command in your terminal:
+
+    ```sh
+    docker-compose up
+    ```
+
+This command will build and start both the frontend and backend services, making the application available at [http://localhost:3000](http://localhost:3000) (or your specified port).
+
+### Manual Setup
+
+If you prefer a manual setup or are unable to use Docker, follow these steps:
+
+#### Prerequisites
+
+- **Node.js:** Version 18
+- **Python:** Version 3.10
+
+#### Frontend Setup (React)
+
+1. Navigate to the `webapp` directory:
+
+    ```sh
+    cd webapp
+    ```
+
+2. Install the necessary dependencies:
+
+    ```sh
+    npm install
+    ```
+
+3. Start the development server:
+
+    ```sh
+    npm run dev
+    ```
+
+#### Backend Setup (Python Server)
+
+1. Navigate to the `gdbui_server` directory:
+
+    ```sh
+    cd gdbui_server
+    ```
+
+2. Install the required Python packages:
+
+    ```sh
+    pip install -r requirements.txt
+    ```
+
+3. Run the backend server:
+
+    ```sh
+    python main.py
+    ```
+
+## Running Tests
+
+### Frontend Tests (Vite)
+
+To run the frontend tests, follow these steps:
+
+1. Navigate to the `webapp` directory:
+
+    ```sh
+    cd webapp
+    ```
+
+2. Run the tests using Vite:
+
+    ```sh
+    npm run test
+    ```
+
+### Backend Tests
+
+To run the backend tests, use the following procedure:
+
+1. Ensure your Python environment is set up as described in the manual setup.
+2. Navigate to the `gdbui_server` directory:
+
+    ```sh
+    cd gdbui_server
+    ```
+
+3. Run the tests using the `unittest` module:
+
+    ```sh
+    python -m unittest discover -s tests
+    ```
+
+## Contributing
+
+We welcome contributions from the community! To get started:
+
+1. **Fork the repository at** [c2siorg/GDB-UI](https://github.com/c2siorg/GDB-UI).
+2. **Clone your fork:**
+
+    ```sh
+    git clone https://github.com/your-username/GDB-UI.git
+    ```
+
+3. **Create a new branch for your feature or bugfix:**
+
+    ```sh
+    git checkout -b feature-name
+    ```
+
+4. **Make your changes and commit them:**
+
+    ```sh
+    git commit -m "Description of your changes"
+    ```
+
+5. **Push your branch to your fork:**
+
+    ```sh
+    git push origin feature-name
+    ```
+
+6. **Open a pull request** on the main repository.
+
+**Please ensure your code adheres to our coding standards and is thoroughly tested before submitting your pull request.**
+
+

gdbui_server/main.py

@@ -235,17 +235,17 @@ def get_locals():
         start_gdb_session(f'{file}')
 
     try:
-        result = execute_gdb_command("info locals")
+        result = execute_gdb_command("info functions")
         response = {
             'success': True,
             'result': result,
-            'code': "execute_gdb_command('info locals')"
+            'code': "execute_gdb_command('info functions')"
         }
     except Exception as e:
         response = {
             'success': False,
             'error': str(e),
-            'code': "execute_gdb_command('info locals')"
+            'code': "execute_gdb_command('info functions')"
         }
 
     return jsonify(response)

webapp/src/components/DebugHeader/DebugHeader.css

@@ -75,6 +75,7 @@ body {
 }
 .icon {
   transition: border 0.1s ease-in-out, padding 0.1s ease-in-out;
+  cursor: pointer;
 }
 
 .icon:hover {

webapp/src/components/DebugHeader/DebugHeader.jsx

@@ -13,23 +13,83 @@ import { DataState } from "../../context/DataContext";
 import "./DebugHeader.css";
 
 const DebugHeader = () => {
-  const { refresh, setRefresh } = DataState();
+  const {
+    refresh,
+    setRefresh,
+    setTerminalOutput,
+    setCommandPress,
+    commandPress,
+  } = DataState();
+
+  const handleRun = (command) => {
+    console.log("clicked");
+    setCommandPress(!commandPress);
+    setTerminalOutput(command);
+  };
 
   return (
     <div className="parent-debug-header">
       <div className="debug-header">
         <div className="icons">
           <div className="arrow">
-            <FaArrowLeft className="icon" />
-            <FaArrowRight className="icon" />
+            <FaArrowLeft
+              className="icon"
+              title="Previous"
+              onClick={() => {
+                handleRun("previous");
+              }}
+            />
+            <FaArrowRight
+              className="icon"
+              title="Next"
+              onClick={() => {
+                handleRun("next");
+              }}
+            />
           </div>
           <div className="others">
-            <IoReload className="icon" />
-            <FaForward className="icon" />
-            <FaSquare className="icon" />
-            <MdSkipNext className="icon" />
-            <MdSkipPrevious className="icon" />
-            <BsArrowRightSquareFill className="icon" />
+            <IoReload
+              className="icon"
+              title="Run"
+              onClick={() => {
+                handleRun("run");
+              }}
+            />
+            <FaForward
+              className="icon"
+              title="Continue"
+              onClick={() => {
+                handleRun("continue");
+              }}
+            />
+            <FaSquare
+              className="icon"
+              title="Stop"
+              onClick={() => {
+                handleRun("stop");
+              }}
+            />
+            <MdSkipNext
+              className="icon"
+              title="Step"
+              onClick={() => {
+                handleRun("step");
+              }}
+            />
+            <MdSkipPrevious
+              className="icon"
+              title="Finish"
+              onClick={() => {
+                handleRun("finish");
+              }}
+            />
+            <BsArrowRightSquareFill
+              className="icon"
+              title="Run"
+              onClick={() => {
+                handleRun("step-out");
+              }}
+            />
           </div>
         </div>
         <div className="filename">

webapp/src/components/Functions/Functions.css

@@ -6,6 +6,7 @@
   align-items: center;
   gap: 10px;
   border: 1px solid var(--Gray-2, #4f4f4f);
+
   /* background: #1e1e1e; */
 }
 .functions-heading {
@@ -22,13 +23,14 @@
   display: flex;
   padding: 10px;
   height: 87vh;
+  max-width: 20vw;
   flex-direction: column;
   align-items: flex-start;
   gap: 11px;
   flex-shrink: 0;
   border: 1px solid var(--Gray-2, #4f4f4f);
   overflow-y: scroll;
-  overflow-x: hidden;
+  overflow-x: scroll;
 }
 .functions a {
   display: block; /* Ensure the anchor tags are block-level elements */

webapp/src/components/MainScreen/MainScreen.jsx

@@ -12,7 +12,7 @@ const MainScreen = () => {
         <Editor
           height="90vh"
           className="mainScreen"
-          defaultLanguage="Cpp"
+          defaultLanguage="cpp"
           defaultValue="// some comment"
           theme={isDarkMode === "dark" ? "vs-dark" : "vs"}
         />

webapp/src/components/Terminal/TerminalComp.jsx

@@ -1,15 +1,20 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { ReactTerminal } from "react-terminal";
 import axios from "axios";
 import "./Terminal.css";
+import { DataState } from "../../context/DataContext";
 
 const TerminalComp = () => {
+  const { terminalOutput, commandPress } = DataState();
   const [output, setOutput] = useState("");
+  const terminalRef = useRef("null");
 
-  const handleCommand = async (command) => {
+  const handleCommand = async (command, ...args) => {
+    const fullCommand = [command, ...args].join(" ");
+    console.log("Full Command:", fullCommand);
     try {
       const { data } = await axios.post("http://127.0.0.1:10000/gdb_command", {
-        command: command,
+        command: fullCommand,
         name: "program",
       });
       return data["result"];
@@ -18,9 +23,24 @@ const TerminalComp = () => {
     }
   };
 
+  const defaultHandler = async (command, ...args) => {
+    const result = await handleCommand(command, ...args);
+    setOutput(result);
+    return result;
+  };
+
+  useEffect(() => {
+    console.log(terminalOutput);
+    if (terminalOutput) {
+      console.log(terminalOutput);
+      defaultHandler(terminalOutput);
+    }
+  }, [commandPress]);
+
   return (
     <div className="terminal">
       <ReactTerminal
+        ref={terminalRef}
         themes={{
           "my-custom-theme": {
             themeBGColor: "#000",
@@ -30,14 +50,7 @@ const TerminalComp = () => {
           },
         }}
         theme="my-custom-theme"
-        commands={{
-          myCommand: async (command) => {
-            return await handleCommand(command);
-          },
-        }}
-        defaultHandler={async (command) => {
-          return await handleCommand(command);
-        }}
+        defaultHandler={defaultHandler}
       />
     </div>
   );