diff --git a/frontend/console/src/features/graph/GraphPane.tsx b/frontend/console/src/features/graph/GraphPane.tsx index 0341bc027..2411cff78 100644 --- a/frontend/console/src/features/graph/GraphPane.tsx +++ b/frontend/console/src/features/graph/GraphPane.tsx @@ -168,20 +168,20 @@ export const GraphPane: React.FC = ({ 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() diff --git a/frontend/console/src/features/graph/graph-utils.ts b/frontend/console/src/features/graph/graph-utils.ts index 9978f8b8a..ed0480b94 100644 --- a/frontend/console/src/features/graph/graph-utils.ts +++ b/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() // 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), ] }