Moved color mapping from the renderer to the graph data structure.

src/display/graph.ts

+import * as Config from "../config";
+
 interface Link {
     source: string;
     target: string;
@@ -33,6 +35,8 @@ export default class Graph {
     public nodes: NodeData[];
     public links: LinkData[];
     private idToNode: Map<string, NodeData>;
+    public edgeColors: Map<string, string>;
+    public nodeColors: Map<string, string>;
 
     constructor(nodes: NodeData[], links: Link[]) {
         this.nodes = nodes;
@@ -49,11 +53,16 @@ export default class Graph {
             };
         });
 
+        this.edgeColors = new Map<string, string>();
+        this.nodeColors = new Map<string, string>();
+
         this.resetNodeData();
         this.updateNodeData();
+        this.mapNodeColors();
+        this.mapLinkColors();
     }
 
-    resetNodeData() {
+    private resetNodeData() {
         for (const node of this.nodes) {
             node.neighbors = [];
             node.links = [];
@@ -64,7 +73,7 @@ export default class Graph {
      * Updates the graph data structure to contain additional values.
      * Creates a 'neighbors' and 'links' array for each node object.
      */
-    updateNodeData() {
+    private updateNodeData() {
         this.resetNodeData();
 
         this.links.forEach((link) => {
@@ -77,28 +86,55 @@ export default class Graph {
         });
     }
 
-    node(id: string): NodeData {
+    public node(id: string): NodeData {
         return this.idToNode.get(id);
     }
 
+    /**
+     * Maps the colors of the color palette to the different edge types
+     */
+    private mapLinkColors() {
+        // TODO: Legacy - is there a use-case for link types?
+        const linkClasses = this.getLinkClasses();
+        for (let i = 0; i < linkClasses.length; i++) {
+            this.edgeColors.set(
+                linkClasses[i],
+                Config.COLOR_PALETTE[i % Config.COLOR_PALETTE.length]
+            );
+        }
+    }
+
+    /**
+     * Maps the colors of the color palette to the different edge types
+     */
+    private mapNodeColors() {
+        const nodeClasses = this.getNodeClasses();
+        for (let i = 0; i < nodeClasses.length; i++) {
+            this.nodeColors.set(
+                nodeClasses[i],
+                Config.COLOR_PALETTE[i % Config.COLOR_PALETTE.length]
+            );
+        }
+    }
+
     /**
      * Returns an array containing the different edge types of the graph.
      * @returns {*[]}
      */
-    getLinkClasses(): string[] {
+    public getLinkClasses(): string[] {
         const linkClasses: string[] = [];
 
         this.links.forEach((link) => linkClasses.push(link.type));
         return [...new Set(linkClasses)].map((c) => String(c));
     }
 
-    getNodeClasses(): string[] {
+    public getNodeClasses(): string[] {
         const nodeClasses: string[] = [];
         this.nodes.forEach((node) => nodeClasses.push(node.type));
         return [...new Set(nodeClasses)].map((c) => String(c));
     }
 
-    view(
+    public view(
         nodeTypes: Map<string, boolean>,
         linkTypes: Map<string, boolean>
     ): Graph {

src/display/renderer.tsx

@@ -39,8 +39,6 @@ export class GraphRenderer extends React.PureComponent<
     props: InferType<typeof GraphRenderer.propTypes>;
     state: InferType<typeof GraphRenderer.stateTypes>;
     forceGraph: React.RefObject<any>; // using typeof ForceGraph3d produces an error here...
-    edgeColors: Map<string, string>;
-    nodeColors: Map<string, string>;
     highlightedNodes: Set<GraphNode>;
     highlightedLinks: Set<GraphLink>;
     hoverNode: GraphNode;
@@ -62,11 +60,6 @@ export class GraphRenderer extends React.PureComponent<
         this.highlightedLinks = new Set();
         this.hoverNode = null;
         this.forceGraph = React.createRef();
-        this.edgeColors = new Map<string, string>();
-        this.nodeColors = new Map<string, string>();
-
-        this.mapLinkColors();
-        this.mapNodeColors();
     }
 
     componentDidMount() {
@@ -112,7 +105,7 @@ export class GraphRenderer extends React.PureComponent<
 
         const material = new THREE.SpriteMaterial({
             //map: imageTexture,
-            color: this.nodeColors.get(node.type),
+            color: this.props.graph.nodeColors.get(node.type),
             alphaMap: imageAlpha,
             transparent: true,
             alphaTest: 0.2,
@@ -133,9 +126,9 @@ export class GraphRenderer extends React.PureComponent<
         const colors = new Float32Array(
             [].concat(
                 ...[link.target, link.source]
-                    .map((node) => this.nodeColors.get(node.type))
+                    .map((node) => this.props.graph.nodeColors.get(node.type))
                     .map((color) => color.replace(/[^\d,]/g, "").split(",")) // Extract rgb() color components
-                    .map((rgb) => rgb.map((v) => parseInt(v) / 255))
+                    .map((rgb) => rgb.map((v: string) => parseInt(v) / 255))
             )
         );
 
@@ -268,34 +261,6 @@ export class GraphRenderer extends React.PureComponent<
         );
     }
 
-    /**
-     * Maps the colors of the color palette to the different edge types
-     */
-    mapLinkColors() {
-        // TODO: Move this to the graph data structure - access is also needed in the other menues?
-        const linkClasses = this.props.graph.getLinkClasses();
-        for (let i = 0; i < linkClasses.length; i++) {
-            this.edgeColors.set(
-                linkClasses[i],
-                Config.COLOR_PALETTE[i % Config.COLOR_PALETTE.length]
-            );
-        }
-    }
-
-    /**
-     * Maps the colors of the color palette to the different edge types
-     */
-    mapNodeColors() {
-        // TODO: Move this to the graph data structure - access is also needed in the other menues?
-        const nodeClasses = this.props.graph.getNodeClasses();
-        for (let i = 0; i < nodeClasses.length; i++) {
-            this.nodeColors.set(
-                nodeClasses[i],
-                Config.COLOR_PALETTE[i % Config.COLOR_PALETTE.length]
-            );
-        }
-    }
-
     updateLinkPosition(line: Line2, start: Coordinate, end: Coordinate) {
         if (!(line instanceof Line2)) {
             return false;