Adding search nodes to ExtraSideBarComponent

src/frontend/src/components/ExtraSidebarComponent/index.tsx

@@ -1,6 +1,6 @@
 import { Disclosure } from "@headlessui/react";
 import { ChevronLeftIcon } from "@heroicons/react/24/outline";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { Link } from "react-router-dom";
 import { classNames } from "../../utils";
 import { locationContext } from "../../contexts/locationContext";
@@ -13,6 +13,7 @@ export default function ExtraSidebar() {
     extraNavigation,
     extraComponent,
   } = useContext(locationContext);
+
   return (
     <>
       <aside
@@ -21,10 +22,8 @@ export default function ExtraSidebar() {
         } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
       >
         <div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
-          <div className="flex pt-1 px-4 justify-between align-middle w-full">
+          <div className="flex px-4 justify-between align-middle w-full">
-            <span className="text-gray-900 dark:text-white py-[2px] font-medium ">
+            <span className="text-gray-900 dark:text-white py-[2px] font-medium "></span>
-              {extraNavigation.title}
-            </span>
           </div>
           <div className="flex flex-grow flex-col w-full">
             {extraNavigation.options ? (

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -1,13 +1,20 @@
 import { Bars2Icon } from "@heroicons/react/24/outline";
 import DisclosureComponent from "../DisclosureComponent";
-import { nodeColors, nodeIcons, nodeNames } from "../../../../utils";
+import {
-import { useContext, useEffect, useState } from "react";
+  classNames,
+  nodeColors,
+  nodeIcons,
+  nodeNames,
+} from "../../../../utils";
+import { useContext, useEffect, useState, useRef } from "react";
 import { typesContext } from "../../../../contexts/typesContext";
 import { APIClassType, APIObjectType } from "../../../../types/api";
 import TooltipReact from "../../../../components/ReactTooltipComponent";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
+  const [dataFilter, setFilterData] = useState(data);
 
   function onDragStart(
     event: React.DragEvent<any>,
@@ -24,11 +31,45 @@ export default function ExtraSidebar() {
     event.dataTransfer.setData("json", JSON.stringify(data));
   }
 
+  function handleSearchInput(e: string) {
+    setFilterData((_) => {
+      let ret = {};
+      Object.keys(data).forEach((d: keyof APIObjectType, i) => {
+        ret[d] = {};
+        let keys = Object.keys(data[d]).filter((nd) =>
+          nd.toLowerCase().includes(e.toLowerCase())
+        );
+        keys.forEach((element) => {
+          ret[d][element] = data[d][element];
+        });
+      });
+      return ret;
+    });
+  }
+
   return (
+    <>
+      <div className="relative mt-2 flex items-center mb-2 mx-2">
+        <input
+          type="text"
+          name="search"
+          id="search"
+          placeholder="Search nodes"
+          className="dark:text-white focus:outline-none block w-full rounded-md py-1.5 ps-3 pr-9 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 dark:ring-0 dark:bg-[#2d3747] dark:focus:outline-none"
+          onChange={(e) => {
+            handleSearchInput(e.target.value);
+          }}
+        />
+        <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
+          <MagnifyingGlassIcon className="h-5 w-5 dark:text-white"></MagnifyingGlassIcon>
+        </div>
+      </div>
+
       <div className="mt-1 w-full">
-      {Object.keys(data)
+        {Object.keys(dataFilter)
           .sort()
-        .map((d: keyof APIObjectType, i) => (
+          .map((d: keyof APIObjectType, i) =>
+            Object.keys(dataFilter[d]).length > 0 ? (
               <DisclosureComponent
                 key={i}
                 button={{
@@ -37,7 +78,7 @@ export default function ExtraSidebar() {
                 }}
               >
                 <div className="p-2 flex flex-col gap-2">
-              {Object.keys(data[d])
+                  {Object.keys(dataFilter[d])
                     .sort()
                     .map((t: string, k) => (
                       <TooltipReact
@@ -52,7 +93,8 @@ export default function ExtraSidebar() {
                             draggable
                             className={" cursor-grab border-l-8 rounded-l-md"}
                             style={{
-                          borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
+                              borderLeftColor:
+                                nodeColors[d] ?? nodeColors.unknown,
                             }}
                             onDragStart={(event) =>
                               onDragStart(event, {
@@ -78,12 +120,13 @@ export default function ExtraSidebar() {
                         </div>
                       </TooltipReact>
                     ))}
-              {Object.keys(data[d]).length === 0 && (
-                <div className="text-gray-400 text-center">Coming soon</div>
-              )}
                 </div>
               </DisclosureComponent>
-        ))}
+            ) : (
+              <div key={i}></div>
+            )
+          )}
       </div>
+    </>
   );
 }