Added close button to searchbar.

src/display/components/searchbar.css

@@ -4,7 +4,6 @@
     flex-wrap: nowrap;
     justify-content: flex-start;
     align-items: center;
-    gap: 10px;
 }
 
 .searchbar-input[type="search"] {
@@ -15,13 +14,21 @@
     outline: none;
 }
 
-.searchbar-icon-div {
+.searchbar-open-icon-div {
     cursor: pointer;
     opacity: 0.7;
     width: 30px;
     height: 30px;
 }
 
+.searchbar-close-icon-div {
+    cursor: pointer;
+    opacity: 0.7;
+    width: 18px;
+    margin-right: 10px;
+    margin-bottom: 2px;
+}
+
 .searchbar-icon {
     max-width: 100%;
     transition: all 0.5s;
@@ -32,7 +39,6 @@
 }
 
 .searchbar-form {
-    margin-right: 10px;
 }
 
 .searchbar-text {

src/display/components/searchbar.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 
 import "./searchbar.css";
 import searchicon from "./search_icon.svg";
+import closeicon from "./close_icon.svg";
 import { NodeData } from "../../common/graph";
 
 interface SearchBarProps {
@@ -26,6 +27,12 @@ function SearchBar({
         setMinified((prev) => !prev);
     };
 
+    const clearInput = () => {
+        setInputText("");
+        inputField.current.value = "";
+        inputField.current.focus();
+    };
+
     useEffect(() => {
         if (isMinified) {
             setWidth(0);
@@ -61,7 +68,10 @@ function SearchBar({
             style={{ backgroundColor: isMinified ? "" : "white" }}
         >
             <div className={"searchbar"}>
-                <div className={"searchbar-icon-div"} onClick={toggleMinified}>
+                <div
+                    className={"searchbar-open-icon-div"}
+                    onClick={toggleMinified}
+                >
                     <img
                         className={`searchbar-icon ${
                             isMinified ? "searchbar-icon-white" : ""
@@ -70,7 +80,6 @@ function SearchBar({
                         alt={"Searchbar"}
                     />
                 </div>
-                <div></div>
                 <div
                     className={"searchbar-text"}
                     style={{ width: width + "%" }}
@@ -89,6 +98,18 @@ function SearchBar({
                         </form>
                     )}
                 </div>
+                {!isMinified && (
+                    <div
+                        className={"searchbar-close-icon-div"}
+                        onClick={clearInput}
+                    >
+                        <img
+                            className={"searchbar-icon"}
+                            src={closeicon}
+                            alt={"Close"}
+                        />
+                    </div>
+                )}
             </div>
             <div className={"searchbar-results"}>
                 {filtered.map((el) => (