Re-implemented node click events through node info menu

src/display/components/nodeinfo/neighbors.css

+.neighbor-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    max-height: 50%;
+    overflow: auto;
+    background-color: #ffffff;
+}
+
+.neighbor-content-link {
+    cursor: pointer;
+    margin: 1px;
+    font-size: 14px;
+}
+
+.neighbor-content-link:hover {
+    color: red;
+}
\ No newline at end of file

src/display/components/nodeinfo/neighbors.tsx

 import React from "react";
+
 import { NodeData } from "../../graph";
 import FancyScrollbar from "../fancyscrollbar";
 import Collapsible from "../collapsible";
 
+import "./neighbors.css";
+
 interface NeighborsProps {
     neighbors: NodeData[];
     nodeClickedCallback?: (node: NodeData) => void;
@@ -10,6 +13,7 @@ interface NeighborsProps {
 
 function Neighbors({ neighbors, nodeClickedCallback }: 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>>();
 
     for (const cls of classes) {
@@ -20,15 +24,31 @@ function Neighbors({ neighbors, nodeClickedCallback }: NeighborsProps) {
         categories.get(neighbor.type).push(neighbor);
     }
 
+    const handleNodeClick = (node: NodeData) => {
+        if (nodeClickedCallback) {
+            nodeClickedCallback(node);
+        }
+    };
+
     return (
         <div className={"neighbor-container"}>
             <FancyScrollbar>
                 <Collapsible header={"Verwandte Inhalte"}>
                     {classes.map((cls) => (
-                        <Collapsible header={cls} key={cls} heightTransition={false}>
+                        <Collapsible
+                            header={cls}
+                            key={cls}
+                            heightTransition={false}
+                        >
                             <ul>
                                 {categories.get(cls).map((node) => (
-                                    <li key={node.name}>{node.name}</li>
+                                    <li
+                                        className={"neighbor-content-link"}
+                                        key={node.name}
+                                        onClick={() => handleNodeClick(node)}
+                                    >
+                                        {node.name}
+                                    </li>
                                 ))}
                             </ul>
                         </Collapsible>

src/display/components/nodeinfo/nodeinfobar.tsx

@@ -9,9 +9,15 @@ interface InfoBarProps {
     height: number;
     node: NodeData;
     nodeClosedCallback?: () => void;
+    nodeClickedCallback?: (node: NodeData) => void;
 }
 
-function NodeInfoBar({ height, node, nodeClosedCallback }: InfoBarProps) {
+function NodeInfoBar({
+    height,
+    node,
+    nodeClosedCallback,
+    nodeClickedCallback,
+}: InfoBarProps) {
     return (
         <div id={"infoOverlay"} className={"detail-view"} style={{ height }}>
             <div
@@ -34,7 +40,10 @@ function NodeInfoBar({ height, node, nodeClosedCallback }: InfoBarProps) {
                 </FancyScrollbar>
             </div>
 
-            <Neighbors neighbors={node.neighbors} />
+            <Neighbors
+                neighbors={node.neighbors}
+                nodeClickedCallback={nodeClickedCallback}
+            />
         </div>
     );
 }

src/display/display.css

@@ -192,16 +192,6 @@
     width: 78px;
 }
 
-.neighbor-container {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    max-height: 50%;
-    overflow: auto;
-    background-color: #ffffff;
-}
-
 /*New Section */
 
 .neighbor-collapsible-title {
@@ -270,14 +260,7 @@
     padding: 0 0 0 20px;
 }
 
-
-.neighbor-content-link {
-    cursor: pointer;
-    margin: 1px;
-    font-size: 14px;
-}
-
-.activation-hover, .neighbor-content-link:hover {
+.activation-hover {
     color: red;
 }
 

src/display/display.tsx

@@ -2,7 +2,7 @@ import { NodeInfoOverlay } from "./components/nodeinfo";
 
 import React from "react";
 import screenfull from "screenfull";
-import { GraphRenderer } from "./renderer";
+import { GraphNode, GraphRenderer } from "./renderer";
 import * as Helpers from "./helpers";
 import Graph, { NodeData } from "./graph";
 import { loadGraphJson } from "../datasets";
@@ -18,6 +18,7 @@ class Display extends React.Component<
 
     infoOverlay: NodeInfoOverlay;
     fullscreenRef: React.RefObject<HTMLDivElement>;
+    rendererRef: React.RefObject<GraphRenderer>;
 
     static propTypes = {
         spaceId: PropTypes.string.isRequired,
@@ -34,6 +35,7 @@ class Display extends React.Component<
     constructor(props: InferType<typeof Display.propTypes>) {
         super(props);
         this.fullscreenRef = React.createRef();
+        this.rendererRef = React.createRef();
         this.state = {
             graph: null,
             currentNode: null,
@@ -43,6 +45,7 @@ class Display extends React.Component<
         };
         this.handleNodeClicked = this.handleNodeClicked.bind(this);
         this.handleNodeClose = this.handleNodeClose.bind(this);
+        this.handleNodeChangeRequest = this.handleNodeChangeRequest.bind(this);
     }
 
     componentDidMount() {
@@ -63,6 +66,11 @@ class Display extends React.Component<
         this.setState({ currentNode: node, nodeActive: true });
     }
 
+    handleNodeChangeRequest(node: NodeData) {
+        this.rendererRef.current.focusOnNode(node as GraphNode);
+        this.handleNodeClicked(node);
+    }
+
     handleNodeClose() {
         this.setState({ nodeActive: false });
     }
@@ -110,12 +118,14 @@ class Display extends React.Component<
                         node={this.state.currentNode}
                         height={this.state.nodeActive ? this.state.height : 0}
                         nodeClosedCallback={this.handleNodeClose}
+                        nodeClickedCallback={this.handleNodeChangeRequest}
                     ></NodeInfoBar>
                 )}
 
                 <div id="3d-graph">
                     {this.state.graph && (
                         <GraphRenderer
+                            ref={this.rendererRef}
                             graph={this.state.graph}
                             width={this.state.width}
                             height={this.state.height}