Skip to content
Snippets Groups Projects
Commit 1c9db559 authored by Matthias Konitzny's avatar Matthias Konitzny :fire:
Browse files

Re-implemented node click events through node info menu

parent d43185db
No related branches found
No related tags found
1 merge request!3Master into new editor
.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
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>
......
......@@ -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>
);
}
......
......@@ -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;
}
......
......@@ -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}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment