Improved neighbor menu design, by including type colors.

src/display/components/nodeinfo/neighbors.tsx

@@ -8,10 +8,15 @@ import "./neighbors.css";
 
 interface NeighborsProps {
     neighbors: NodeData[];
+    nodeColors?: Map<string, string>;
     nodeClickedCallback?: (node: NodeData) => void;
 }
 
-function Neighbors({ neighbors, nodeClickedCallback }: NeighborsProps) {
+function Neighbors({
+    neighbors,
+    nodeClickedCallback,
+    nodeColors = new Map<string, string>(),
+}: NeighborsProps) {
     const classes = [...new Set<string>(neighbors.map((node) => node.type))];
     classes.sort(); // Sort classes to get a constant order of the node type tabs
     const categories = new Map<string, Array<NodeData>>();
@@ -39,6 +44,7 @@ function Neighbors({ neighbors, nodeClickedCallback }: NeighborsProps) {
                             header={cls}
                             key={cls}
                             heightTransition={false}
+                            color={nodeColors.get(cls)}
                         >
                             <ul>
                                 {categories.get(cls).map((node) => (

src/display/components/nodeinfo/nodeinfobar.tsx

@@ -8,6 +8,7 @@ import Neighbors from "./neighbors";
 interface InfoBarProps {
     height: number;
     node: NodeData;
+    nodeColors?: Map<string, string>;
     nodeClosedCallback?: () => void;
     nodeClickedCallback?: (node: NodeData) => void;
 }
@@ -15,6 +16,7 @@ interface InfoBarProps {
 function NodeInfoBar({
     height,
     node,
+    nodeColors,
     nodeClosedCallback,
     nodeClickedCallback,
 }: InfoBarProps) {
@@ -42,6 +44,7 @@ function NodeInfoBar({
 
             <Neighbors
                 neighbors={node.neighbors}
+                nodeColors={nodeColors}
                 nodeClickedCallback={nodeClickedCallback}
             />
         </div>

src/display/display.tsx

@@ -116,6 +116,7 @@ class Display extends React.Component<
                 {this.state.currentNode && (
                     <NodeInfoBar
                         node={this.state.currentNode}
+                        nodeColors={this.state.graph.nodeColors}
                         height={this.state.nodeActive ? this.state.height : 0}
                         nodeClosedCallback={this.handleNodeClose}
                         nodeClickedCallback={this.handleNodeChangeRequest}