fix: reduce the graph chaos (#3548)

Only show edges for non-data type nodes. This helps reduce the noise a
bit of the graph.

![Screenshot 2024-11-27 at 9 53
45 AM](https://github.com/user-attachments/assets/4e5f3f28-de9f-480b-bbcc-975149f08b60)
![Screenshot 2024-11-27 at 9 53
59 AM](https://github.com/user-attachments/assets/8f17f3ec-0da5-4224-ade6-06b8d0ca3155)
![Screenshot 2024-11-27 at 10 22
23 AM](https://github.com/user-attachments/assets/1312c629-6826-4a8a-8110-fe7344133851)
![Screenshot 2024-11-27 at 10 22
32 AM](https://github.com/user-attachments/assets/06adf44c-bee1-4013-b37d-69fa4b885391)

frontend/console/src/features/graph/GraphPane.tsx

@@ -168,20 +168,20 @@ export const GraphPane: React.FC<GraphPaneProps> = ({ onTapped }) => {
     })
 
     if (hasNewNodesWithoutPositions) {
-      const layoutOptions: FcoseLayoutOptions = {
+      const layoutOptions = {
         name: 'fcose',
         animate: false,
         quality: 'default',
-        nodeSeparation: 75,
-        idealEdgeLength: 75,
+        nodeSeparation: 50,
+        idealEdgeLength: 50,
         nodeRepulsion: 4500,
-        padding: 30,
+        padding: 20,
         randomize: false,
         // Make the layout more deterministic
         tile: true,
         tilingPaddingVertical: 20,
         tilingPaddingHorizontal: 20,
-      }
+      } as FcoseLayoutOptions
 
       const layout = cy.layout(layoutOptions)
       layout.run()

frontend/console/src/features/graph/graph-utils.ts

@@ -116,7 +116,7 @@ const createModuleEdge = (sourceModule: string, targetModule: string) => ({
   },
 })
 
-const createVerbEdges = (modules: Module[]) => {
+const createEdges = (modules: Module[]) => {
   const edges: EdgeDefinition[] = []
   const moduleConnections = new Set<string>() // Track unique module connections
 
@@ -125,33 +125,70 @@ const createVerbEdges = (modules: Module[]) => {
     for (const verb of module.verbs || []) {
       // For each reference in the verb
       for (const ref of verb.references || []) {
-        // Create verb-to-verb edge
+        // Only create verb-to-verb child edges
         edges.push(createChildEdge(ref.module, ref.name, module.name, verb.verb?.name || ''))
 
-        // Track module-to-module connection
-        // Sort module names to ensure consistent edge IDs
+        // Track module-to-module connection for all reference types
         const [sourceModule, targetModule] = [module.name, ref.module].sort()
         moduleConnections.add(`${sourceModule}-${targetModule}`)
       }
     }
 
     for (const config of module.configs || []) {
+      // For each reference in the verb
       for (const ref of config.references || []) {
+        // Only create verb-to-verb child edges
         edges.push(createChildEdge(ref.module, ref.name, module.name, config.config?.name || ''))
 
-        // Track module-to-module connection
-        // Sort module names to ensure consistent edge IDs
+        // Track module-to-module connection for all reference types
+        const [sourceModule, targetModule] = [module.name, ref.module].sort()
+        moduleConnections.add(`${sourceModule}-${targetModule}`)
+      }
+    }
+
+    for (const secret of module.secrets || []) {
+      // For each reference in the verb
+      for (const ref of secret.references || []) {
+        // Only create verb-to-verb child edges
+        edges.push(createChildEdge(ref.module, ref.name, module.name, secret.secret?.name || ''))
+
+        // Track module-to-module connection for all reference types
         const [sourceModule, targetModule] = [module.name, ref.module].sort()
         moduleConnections.add(`${sourceModule}-${targetModule}`)
       }
     }
 
-    for (const data of module.data || []) {
-      for (const ref of data.references || []) {
-        edges.push(createChildEdge(ref.module, ref.name, module.name, data.data?.name || ''))
+    for (const database of module.databases || []) {
+      // For each reference in the verb
+      for (const ref of database.references || []) {
+        // Only create verb-to-verb child edges
+        edges.push(createChildEdge(ref.module, ref.name, module.name, database.database?.name || ''))
+
+        // Track module-to-module connection for all reference types
+        const [sourceModule, targetModule] = [module.name, ref.module].sort()
+        moduleConnections.add(`${sourceModule}-${targetModule}`)
+      }
+    }
+
+    for (const subscription of module.subscriptions || []) {
+      // For each reference in the verb
+      for (const ref of subscription.references || []) {
+        // Only create verb-to-verb child edges
+        edges.push(createChildEdge(ref.module, ref.name, module.name, subscription.subscription?.name || ''))
+
+        // Track module-to-module connection for all reference types
+        const [sourceModule, targetModule] = [module.name, ref.module].sort()
+        moduleConnections.add(`${sourceModule}-${targetModule}`)
+      }
+    }
+
+    for (const topic of module.topics || []) {
+      // For each reference in the verb
+      for (const ref of topic.references || []) {
+        // Only create verb-to-verb child edges
+        edges.push(createChildEdge(ref.module, ref.name, module.name, topic.topic?.name || ''))
 
-        // Track module-to-module connection
-        // Sort module names to ensure consistent edge IDs
+        // Track module-to-module connection for all reference types
         const [sourceModule, targetModule] = [module.name, ref.module].sort()
         moduleConnections.add(`${sourceModule}-${targetModule}`)
       }
@@ -177,7 +214,7 @@ export const getGraphData = (
   return [
     ...modules.modules.map((module) => createParentNode(module, nodePositions)),
     ...modules.modules.flatMap((module) => createModuleChildren(module, nodePositions, isDarkMode)),
-    ...createVerbEdges(modules.modules),
+    ...createEdges(modules.modules),
   ]
 }