From ddd4ee1fce490a7a48716c930fc8f0a425692bae Mon Sep 17 00:00:00 2001
From: master <>
Date: Sat, 28 Mar 2026 23:21:47 +0200
Subject: [PATCH] Add stage filter support to topology graph

The global Stage dropdown (production/staging/development) now filters
the topology graph client-side by environmentType, hiding environments
that don't match the selected stage.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../topology/topology-graph-page.component.ts | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/Web/StellaOps.Web/src/app/features/topology/topology-graph-page.component.ts b/src/Web/StellaOps.Web/src/app/features/topology/topology-graph-page.component.ts
index 86c144d13..46c1794f4 100644
--- a/src/Web/StellaOps.Web/src/app/features/topology/topology-graph-page.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/topology/topology-graph-page.component.ts
@@ -44,7 +44,7 @@ import { TopologyTarget, TopologyHost } from './topology.models';
             <span>{{ layout()?.metadata?.promotionPathCount ?? 0 }} paths</span>
           </div>
           <app-topology-graph
-            [layout]="layout()"
+            [layout]="stageFilteredLayout()"
             (nodeSelected)="onNodeSelected($event)"
             (edgeSelected)="onEdgeSelected($event)"
           />
@@ -445,6 +445,36 @@ export class TopologyGraphPageComponent {
     return '';
   });
 
+  readonly stageFilteredLayout = computed((): TopologyLayoutResponse | null => {
+    const data = this.layout();
+    if (!data) return null;
+
+    const stage = this.context.stage();
+    if (!stage || stage === 'all') return data;
+
+    const matchedEnvIds = new Set<string>();
+    const matchedRegionIds = new Set<string>();
+
+    const filteredNodes = data.nodes.filter((n) => {
+      if (n.kind === 'region') return true;
+      const matches = n.environmentType === stage;
+      if (matches) {
+        matchedEnvIds.add(n.id);
+        if (n.parentNodeId) matchedRegionIds.add(n.parentNodeId);
+      }
+      return matches;
+    }).filter((n) => {
+      if (n.kind === 'region') return matchedRegionIds.has(n.id);
+      return true;
+    });
+
+    const filteredEdges = data.edges.filter(
+      (e) => matchedEnvIds.has(e.sourceNodeId) && matchedEnvIds.has(e.targetNodeId),
+    );
+
+    return { ...data, nodes: filteredNodes, edges: filteredEdges };
+  });
+
   constructor() {
     this.context.initialize();