From 1c9db55905bbc94b920eb4d1c9b113b27d139d72 Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Mon, 18 Jul 2022 17:21:29 +0200
Subject: [PATCH] Re-implemented node click events through node info menu
---
src/display/components/nodeinfo/neighbors.css | 19 +++++++++++++++
src/display/components/nodeinfo/neighbors.tsx | 24 +++++++++++++++++--
.../components/nodeinfo/nodeinfobar.tsx | 13 ++++++++--
src/display/display.css | 19 +--------------
src/display/display.tsx | 12 +++++++++-
5 files changed, 64 insertions(+), 23 deletions(-)
diff --git a/src/display/components/nodeinfo/neighbors.css b/src/display/components/nodeinfo/neighbors.css
index e69de29..bc3b226 100644
--- a/src/display/components/nodeinfo/neighbors.css
+++ b/src/display/components/nodeinfo/neighbors.css
@@ -0,0 +1,19 @@
+.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
diff --git a/src/display/components/nodeinfo/neighbors.tsx b/src/display/components/nodeinfo/neighbors.tsx
index 219c399..a08ea6e 100644
--- a/src/display/components/nodeinfo/neighbors.tsx
+++ b/src/display/components/nodeinfo/neighbors.tsx
@@ -1,8 +1,11 @@
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>
diff --git a/src/display/components/nodeinfo/nodeinfobar.tsx b/src/display/components/nodeinfo/nodeinfobar.tsx
index d417092..8353ef1 100644
--- a/src/display/components/nodeinfo/nodeinfobar.tsx
+++ b/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>
);
}
diff --git a/src/display/display.css b/src/display/display.css
index ef35a51..f6fa055 100644
--- a/src/display/display.css
+++ b/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;
}
diff --git a/src/display/display.tsx b/src/display/display.tsx
index 6f7e361..9c85c56 100644
--- a/src/display/display.tsx
+++ b/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}
--
GitLab