diff --git a/src/display/components/nodeinfo/neighbors.tsx b/src/display/components/nodeinfo/neighbors.tsx index a08ea6ea8b8d26b43b03c7a7c424f12af2d74d0c..34bcf067fc7f301a7ecd6849fd74158ae2de916e 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 8353ef1510ba8639e002c07cb9f50527f314ab9e..1883d68c78b84d6e1db67016e6e894746a46c83c 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 9c85c567ec99351338a87ad9d7ffdbd6948512b5..911aa87313b46b16e0c10f0a0d83fadae21eee18 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}