From 389e61a49803dd6ffe22247822c82ba6b979e7e9 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sat, 4 Nov 2023 22:09:22 +0100
Subject: [PATCH] visualizer: cleaner tree

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

diff --git a/plugins/visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx b/plugins/visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx
index d405e1e164..f38acf1379 100644
--- a/plugins/visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx
+++ b/plugins/visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx
@@ -31,6 +31,23 @@ function inputId({ node, input }: { node: AppNode; input: string }) {
   return `${node.spec.id}$$${input}`;
 }
 
+function trimNodeId(id: string) {
+  let newId = id;
+  if (newId.startsWith('apis.')) {
+    newId = newId.slice('apis.'.length);
+  }
+  if (newId.startsWith('plugin.')) {
+    newId = newId.slice('plugin.'.length);
+  }
+  if (newId.startsWith('catalog.filter.entity.')) {
+    newId = newId.slice('catalog.filter.entity.'.length);
+  }
+  if (newId.endsWith('.nav.index')) {
+    newId = newId.slice(0, -'.nav.index'.length);
+  }
+  return newId;
+}
+
 function resolveGraphData(tree: AppTree): {
   nodes: NodeType[];
   edges: { from: string; to: string }[];
@@ -73,7 +90,10 @@ const useStyles = makeStyles(theme => ({
       node.type === 'node'
         ? theme.palette.primary.light
         : theme.palette.grey[500],
-    stroke: theme.palette.primary.light,
+    stroke: (node: NodeType) =>
+      node.type === 'node'
+        ? theme.palette.primary.main
+        : theme.palette.grey[600],
   },
   text: {
     fill: theme.palette.primary.contrastText,
@@ -123,7 +143,7 @@ export function Node(props: { node: NodeType }) {
         textAnchor="middle"
         alignmentBaseline="middle"
       >
-        {node.type === 'node' ? node.id : node.name}
+        {node.type === 'node' ? trimNodeId(node.id) : node.name}
       </text>
     </g>
   );
@@ -139,9 +159,11 @@ export function TreeVisualizer({ tree }: { tree: AppTree }) {
         style={{ height: '100%', width: '100%' }}
         {...graphData}
         nodeMargin={10}
-        edgeMargin={30}
-        rankMargin={100}
+        rankMargin={50}
+        paddingX={50}
         renderNode={Node}
+        align={DependencyGraphTypes.Alignment.DOWN_RIGHT}
+        ranker={DependencyGraphTypes.Ranker.TIGHT_TREE}
         direction={DependencyGraphTypes.Direction.TOP_BOTTOM}
       />
     </Box>