From defd9b3a2858003cbc6cb13c9d4feb59603c5c7a Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Fri, 3 Nov 2023 10:25:33 +0100
Subject: [PATCH] visualizer: use fixed colors for core data types

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .../AppVisualizerPage/GraphVisualizer.tsx     | 43 +++++++++++--------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/plugins/visualizer/src/components/AppVisualizerPage/GraphVisualizer.tsx b/plugins/visualizer/src/components/AppVisualizerPage/GraphVisualizer.tsx
index de043d71ca..e047bc498f 100644
--- a/plugins/visualizer/src/components/AppVisualizerPage/GraphVisualizer.tsx
+++ b/plugins/visualizer/src/components/AppVisualizerPage/GraphVisualizer.tsx
@@ -32,11 +32,17 @@ import DisabledIcon from '@material-ui/icons/NotInterestedSharp';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-function createOutputColorGenerator(availableColors: string[]) {
+function createOutputColorGenerator(
+  colorMap: { [extDataId: string]: string },
+  availableColors: string[],
+) {
   const map = new Map<string, string>();
   let i = 0;
 
   return function getOutputColor(id: string) {
+    if (id in colorMap) {
+      return colorMap[id];
+    }
     let color = map.get(id);
     if (color) {
       return color;
@@ -51,22 +57,25 @@ function createOutputColorGenerator(availableColors: string[]) {
   };
 }
 
-const getOutputColor = createOutputColorGenerator([
-  colors.green[500],
-  colors.blue[500],
-  colors.yellow[500],
-  colors.purple[500],
-  colors.orange[500],
-  colors.red[500],
-  colors.lime[500],
-  colors.green[200],
-  colors.blue[200],
-  colors.yellow[200],
-  colors.purple[200],
-  colors.orange[200],
-  colors.red[200],
-  colors.lime[200],
-]);
+const getOutputColor = createOutputColorGenerator(
+  {
+    [coreExtensionData.reactElement.id]: colors.green[500],
+    [coreExtensionData.routePath.id]: colors.yellow[500],
+    [coreExtensionData.routeRef.id]: colors.purple[500],
+    [coreExtensionData.apiFactory.id]: colors.blue[500],
+    [coreExtensionData.theme.id]: colors.lime[500],
+    [coreExtensionData.navTarget.id]: colors.orange[500],
+  },
+  [
+    colors.blue[200],
+    colors.orange[200],
+    colors.green[200],
+    colors.red[200],
+    colors.yellow[200],
+    colors.purple[200],
+    colors.lime[200],
+  ],
+);
 
 interface StyleProps {
   enabled: boolean;