From 6dbbb9b8982fc7f1215da89a59ab683bb99fc055 Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Mon, 18 Jul 2022 17:51:27 +0200
Subject: [PATCH] Improved neighbor menu design, by including type colors.
---
src/display/components/nodeinfo/neighbors.tsx | 8 +++++++-
src/display/components/nodeinfo/nodeinfobar.tsx | 3 +++
src/display/display.tsx | 1 +
3 files changed, 11 insertions(+), 1 deletion(-)
diff --git a/src/display/components/nodeinfo/neighbors.tsx b/src/display/components/nodeinfo/neighbors.tsx
index a08ea6e..34bcf06 100644
--- a/src/display/components/nodeinfo/neighbors.tsx
+++ b/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) => (
diff --git a/src/display/components/nodeinfo/nodeinfobar.tsx b/src/display/components/nodeinfo/nodeinfobar.tsx
index 8353ef1..1883d68 100644
--- a/src/display/components/nodeinfo/nodeinfobar.tsx
+++ b/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>
diff --git a/src/display/display.tsx b/src/display/display.tsx
index 9c85c56..911aa87 100644
--- a/src/display/display.tsx
+++ b/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}
--
GitLab