The searchbar now correctly displays node colors.

src/display/components/searchbar.css

@@ -37,7 +37,7 @@
     position: absolute;
     left: 10px;
     top: 65px;
-    border-radius: 10px;
+    border-radius: 15px;
 }
 
 .searchbar-results-circle {
@@ -58,7 +58,7 @@
     flex-direction: row;
     margin-top: -1px ;
     padding-left: 10px;
-    padding-right: 10px;
+    padding-right: 15px;
     align-items: center;
 }
 

src/display/components/searchbar.tsx

@@ -7,9 +7,15 @@ interface SearchBarProps {
     minified: boolean;
     nodeSet: NodeData[];
     onSearch?: (node: NodeData) => void;
+    nodeColors: Map<string, string>;
 }
 
-function SearchBar({ minified, nodeSet, onSearch }: SearchBarProps) {
+function SearchBar({
+    minified,
+    nodeSet,
+    onSearch,
+    nodeColors,
+}: SearchBarProps) {
     const [isMinified, setMinified] = useState(minified);
     const [width, setWidth] = useState<number>(minified ? 0 : 100);
     const [inputText, setInputText] = useState("");
@@ -34,21 +40,17 @@ function SearchBar({ minified, nodeSet, onSearch }: SearchBarProps) {
         setInputText(e.target.value.toLowerCase());
     };
 
-    const labels = nodeSet.map((node) => node.name);
-    const nodeLoopup = new Map<string, NodeData>();
-    labels.forEach((label, i) => nodeLoopup.set(label, nodeSet[i]));
-
-    const filtered = labels
+    const filtered = nodeSet
         .filter((el) => {
             if (inputText !== "") {
-                return el.toLowerCase().includes(inputText);
+                return el.name.toLowerCase().includes(inputText);
             }
         })
         .slice(0, 3);
 
-    const handleNodeClick = (node: string) => {
+    const handleNodeClick = (node: NodeData) => {
         if (onSearch !== undefined) {
-            onSearch(nodeLoopup.get(node));
+            onSearch(node);
         }
     };
 
@@ -84,15 +86,15 @@ function SearchBar({ minified, nodeSet, onSearch }: SearchBarProps) {
             <div className={"searchbar-results"}>
                 {filtered.map((el) => (
                     <div
-                        key={el}
+                        key={el.name}
                         className={"searchbar-result"}
                         onMouseDown={() => handleNodeClick(el)}
                     >
                         <div
                             className={"searchbar-results-circle"}
-                            style={{ backgroundColor: "red" }}
+                            style={{ backgroundColor: nodeColors.get(el.type) }}
                         ></div>
-                        <div>{el}</div>
+                        <div>{el.name}</div>
                     </div>
                 ))}
             </div>

src/display/display.tsx

@@ -128,6 +128,7 @@ class Display extends React.Component<
                             minified={true}
                             nodeSet={this.state.graph.nodes}
                             onSearch={this.handleNodeChangeRequest}
+                            nodeColors={this.state.graph.nodeColors}
                         />
                     )}
                 </div>