Fixed neighbor menu to work with node type ids

src/display/components/nodeinfo/neighbors.tsx

@@ -9,7 +9,6 @@ import { Node } from "../../../common/graph/node";
 
 interface NeighborsProps {
     neighbors: Node[];
-    nodeColors?: Map<string, NodeType>;
     nodeClickedCallback?: (node: Node) => void;
 }
 
@@ -20,23 +19,27 @@ interface NeighborsProps {
  * @param nodeColors Mapping of node types to colors.
  * @constructor
  */
-function Neighbors({
-    neighbors,
-    nodeClickedCallback,
-    nodeColors = new Map<string, NodeType>(),
-}: NeighborsProps) {
-    const classes = [
-        ...new Set<string>(neighbors.map((node) => node.type.name)),
-    ];
-    classes.sort(); // Sort classes to get a constant order of the node type tabs
-    const categories = new Map<string, Array<Node>>();
+function Neighbors({ neighbors, nodeClickedCallback }: NeighborsProps) {
+    const classes = [...new Set<NodeType>(neighbors.map((node) => node.type))];
+    // Sort classes to get a constant order of the node type tabs
+    classes.sort((a, b) => {
+        if (a.name < b.name) {
+            return -1;
+        }
+        if (a.name > b.name) {
+            return 1;
+        }
+        return 0;
+    });
+
+    const categories = new Map<number, Array<Node>>();
 
     for (const cls of classes) {
-        categories.set(cls, []);
+        categories.set(cls.id, []);
     }
 
     for (const neighbor of neighbors) {
-        categories.get(neighbor.type.name).push(neighbor);
+        categories.get(neighbor.type.id).push(neighbor);
     }
 
     const handleNodeClick = (node: Node) => {
@@ -51,13 +54,13 @@ function Neighbors({
                 <Collapsible header={"Verwandte Inhalte"}>
                     {classes.map((cls) => (
                         <Collapsible
-                            header={cls}
-                            key={cls}
+                            header={cls.name}
+                            key={cls.id}
                             heightTransition={false}
-                            color={nodeColors.get(cls).color}
+                            color={cls.color}
                         >
                             <ul>
-                                {categories.get(cls).map((node) => (
+                                {categories.get(cls.id).map((node) => (
                                     <li
                                         className={"neighbor-content-link"}
                                         key={node.name}

src/display/components/nodeinfo/nodeinfobar.tsx

@@ -5,13 +5,11 @@ import TitleArea from "./titlearea";
 import FancyScrollbar from "../fancyscrollbar";
 import MediaArea from "./mediaarea";
 import Neighbors from "./neighbors";
-import { NodeType } from "../../../common/graph/nodetype";
 import { Node } from "../../../common/graph/node";
 
 interface InfoBarProps {
     height: number;
     node: Node;
-    nodeColors?: Map<string, NodeType>;
     onClose?: () => void;
     nodeClickedCallback?: (node: Node) => void;
 }
@@ -20,7 +18,6 @@ interface InfoBarProps {
  * Displays a sidebar showing information on a specific node.
  * @param height Height of the sidebar.
  * @param node Node which drives the presented information.
- * @param nodeColors Mapping of node types to colors.
  * @param onClose Optional callback, called when the menu is closed.
  * @param nodeClickedCallback Optional callback, called when a neighbor of the current node gets selected.
  * @constructor
@@ -28,7 +25,6 @@ interface InfoBarProps {
 function NodeInfoBar({
     height,
     node,
-    nodeColors,
     onClose,
     nodeClickedCallback,
 }: InfoBarProps) {
@@ -52,7 +48,6 @@ function NodeInfoBar({
 
             <Neighbors
                 neighbors={node.neighbors}
-                nodeColors={nodeColors}
                 nodeClickedCallback={nodeClickedCallback}
             />
         </div>

src/display/display.tsx

@@ -149,7 +149,6 @@ class Display extends React.Component<
                 {this.state.currentNode && (
                     <NodeInfoBar
                         node={this.state.currentNode}
-                        nodeColors={this.state.graph.nameToObjectGroup}
                         height={this.state.nodeActive ? this.state.height : 0}
                         onClose={() => {
                             this.handleNodeClose();