From 71361cf5bd97838eae9f5e8a1b51d557107d06be Mon Sep 17 00:00:00 2001
From: Lasserich <lasse.friedrich@sap.com>
Date: Thu, 30 Oct 2025 10:53:28 +0100
Subject: [PATCH 1/3] feat: filter button + tinted nodes

---
 src/components/Graphs/Graph.module.css | 36 ++++++++++-
 src/components/Graphs/Graph.tsx        | 86 ++++++++++++++++----------
 src/components/Graphs/useGraph.ts      | 14 +++--
 3 files changed, 95 insertions(+), 41 deletions(-)

diff --git a/src/components/Graphs/Graph.module.css b/src/components/Graphs/Graph.module.css
index 15887d86..5f75ad4b 100644
--- a/src/components/Graphs/Graph.module.css
+++ b/src/components/Graphs/Graph.module.css
@@ -3,12 +3,39 @@
   height: 600px;
   overflow: hidden;
   font-family: var(--sapFontFamily);
+  position: relative;
 }
 
 .graphColumn {
   flex: 1;
   display: flex;
   flex-direction: column;
+  background-color: #ffffff;
+}
+
+.topLegendContainer {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;              
+  display: flex;
+  align-items: center;
+  z-index: 2;
+}
+
+.filterIcon {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-left: 0.5rem;
+}
+
+.filterIcon:hover {
+  background-color: var(--sapButton_Hover_Background, #f0f0f0);
 }
 
 .graphHeader {
@@ -45,7 +72,6 @@
   color: var(--sapTextColor, #222);
 }
 
-/* Remove the default fieldset frame when used for grouping only */
 .fieldsetReset {
   border: 0;
   margin: 0;
@@ -53,7 +79,13 @@
   min-inline-size: 0;
 }
 
-/* React Flow Controls dark mode */
+.popoverButtonContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+
 :global([data-theme='dark'] .react-flow__controls) {
   background-color: rgba(28, 28, 28, 0.9);
   border: 1px solid rgba(255, 255, 255, 0.15);
diff --git a/src/components/Graphs/Graph.tsx b/src/components/Graphs/Graph.tsx
index 3d215da4..84b3ab7d 100644
--- a/src/components/Graphs/Graph.tsx
+++ b/src/components/Graphs/Graph.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useMemo } from 'react';
-import { ReactFlow, Background, Controls, MarkerType, Node, Panel } from '@xyflow/react';
+import { ReactFlow, Background, Controls, MarkerType, Node } from '@xyflow/react';
+import { Button, Popover } from '@ui5/webcomponents-react';
 import type { NodeProps } from '@xyflow/react';
-import { RadioButton, FlexBox, FlexBoxAlignItems } from '@ui5/webcomponents-react';
 import styles from './Graph.module.css';
 import '@xyflow/react/dist/style.css';
 import { NodeData, ColorBy } from './types';
@@ -32,7 +32,8 @@ const Graph: React.FC = () => {
   const { t } = useTranslation();
   const { openInAside } = useSplitter();
   const { isDarkTheme } = useTheme();
-  const [colorBy, setColorBy] = useState<ColorBy>('provider');
+  const [colorBy, setColorBy] = useState<ColorBy>('source');
+  const [filterPopoverOpen, setFilterPopoverOpen] = useState(false);
 
   const handleYamlClick = useCallback(
     (item: ManagedResourceItem) => {
@@ -92,37 +93,56 @@ const Graph: React.FC = () => {
         >
           <Controls showInteractive={false} />
           <Background />
-          <Panel position="top-left">
-            <FlexBox alignItems={FlexBoxAlignItems.Center} role="radiogroup">
-              <fieldset className={styles.fieldsetReset}>
-                <div className={styles.graphHeader}>
-                  <span className={styles.colorizedTitle}>{t('Graphs.colorizedTitle')}</span>
-                  <RadioButton
-                    name="colorBy"
-                    text={t('Graphs.colorsProviderConfig')}
-                    checked={colorBy === 'provider'}
-                    onChange={() => setColorBy('provider')}
-                  />
-                  <RadioButton
-                    name="colorBy"
-                    text={t('Graphs.colorsProvider')}
-                    checked={colorBy === 'source'}
-                    onChange={() => setColorBy('source')}
-                  />
-                  <RadioButton
-                    name="colorBy"
-                    text={t('Graphs.colorsFlux')}
-                    checked={colorBy === 'flux'}
-                    onChange={() => setColorBy('flux')}
-                  />
-                </div>
-              </fieldset>
-            </FlexBox>
-          </Panel>
-          <Panel position="top-right">
-            <Legend legendItems={legendItems} />
-          </Panel>
         </ReactFlow>
+
+        <div className={styles.topLegendContainer}>
+          <Legend legendItems={legendItems}/>
+          <Popover
+            opener="filter-button"
+            open={filterPopoverOpen}
+            onClose={() => setFilterPopoverOpen(false)}
+            placement="Top"
+          >
+            <div className={styles.popoverButtonContainer}>
+              <Button
+                design={colorBy === 'source' ? 'Emphasized' : 'Default'}
+                onClick={() => {
+                  setColorBy('source');
+                  setFilterPopoverOpen(false);
+                }}
+              >
+                {t('Graphs.colorsProvider')}
+              </Button>
+              <Button
+                design={colorBy === 'provider' ? 'Emphasized' : 'Default'}
+                onClick={() => {
+                  setColorBy('provider');
+                  setFilterPopoverOpen(false);
+                }}
+              >
+                {t('Graphs.colorsProviderConfig')}
+              </Button>
+              <Button
+                design={colorBy === 'flux' ? 'Emphasized' : 'Default'}
+                onClick={() => {
+                  setColorBy('flux');
+                  setFilterPopoverOpen(false);
+                }}
+              >
+                {t('Graphs.colorsFlux')}
+              </Button>
+            </div>
+          </Popover>
+          <div className={styles.filterIcon}>
+            <Button
+              id="filter-button"
+              design="Transparent"
+              icon="filter"
+              tooltip={t('Graphs.colorizedTitle')}
+              onClick={() => setFilterPopoverOpen(!filterPopoverOpen)}
+            />
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/Graphs/useGraph.ts b/src/components/Graphs/useGraph.ts
index d8c53531..e452fb99 100644
--- a/src/components/Graphs/useGraph.ts
+++ b/src/components/Graphs/useGraph.ts
@@ -24,14 +24,17 @@ function buildGraph(
   treeData.forEach((n) => {
     const colorKey: string =
       colorBy === 'source' ? n.providerType : colorBy === 'flux' ? (n.fluxName ?? 'default') : n.providerConfigName;
-    const node: Node<NodeData> = {
+    const borderColor = colorMap[colorKey] || '#ccc';
+    const backgroundColor = `${borderColor}08`; 
+      
+      const node: Node<NodeData> = {
       id: n.id,
       type: 'custom',
       data: { ...n },
       style: {
-        border: `2px solid ${colorMap[colorKey] || '#ccc'}`,
+        border: `2px solid ${borderColor}`,
         borderRadius: 8,
-        backgroundColor: 'var(--sapTile_Background, #fff)',
+        backgroundColor,
         width: nodeWidth,
         height: nodeHeight,
       },
@@ -53,8 +56,7 @@ function buildGraph(
         id: `e-${n.parentId}-${n.id}`,
         source: n.parentId,
         target: n.id,
-        markerEnd: { type: MarkerType.ArrowClosed },
-      });
+        style: { strokeWidth: 2, stroke: '#888' },    });
     }
     n.extraRefs?.forEach((refId) => {
       if (nodeMap.has(refId)) {
@@ -63,7 +65,7 @@ function buildGraph(
           id: `e-${refId}-${n.id}`,
           source: refId,
           target: n.id,
-          markerEnd: { type: MarkerType.ArrowClosed },
+          style: { strokeWidth: 2, stroke: '#888' },
         });
       }
     });

From 62a9f30f807636faba26585287dae7b0e435afac Mon Sep 17 00:00:00 2001
From: Lasserich <lasse.friedrich@sap.com>
Date: Thu, 30 Oct 2025 11:10:54 +0100
Subject: [PATCH 2/3] fix: linting

---
 src/components/Graphs/Graph.tsx   |  4 ++--
 src/components/Graphs/useGraph.ts | 11 ++++++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Graphs/Graph.tsx b/src/components/Graphs/Graph.tsx
index 84b3ab7d..150deaeb 100644
--- a/src/components/Graphs/Graph.tsx
+++ b/src/components/Graphs/Graph.tsx
@@ -96,12 +96,12 @@ const Graph: React.FC = () => {
         </ReactFlow>
 
         <div className={styles.topLegendContainer}>
-          <Legend legendItems={legendItems}/>
+          <Legend legendItems={legendItems} />
           <Popover
             opener="filter-button"
             open={filterPopoverOpen}
-            onClose={() => setFilterPopoverOpen(false)}
             placement="Top"
+            onClose={() => setFilterPopoverOpen(false)}
           >
             <div className={styles.popoverButtonContainer}>
               <Button
diff --git a/src/components/Graphs/useGraph.ts b/src/components/Graphs/useGraph.ts
index e452fb99..24f8b247 100644
--- a/src/components/Graphs/useGraph.ts
+++ b/src/components/Graphs/useGraph.ts
@@ -2,7 +2,7 @@ import { useMemo, useEffect, useState } from 'react';
 import { useApiResource, useProvidersConfigResource } from '../../lib/api/useApiResource';
 import { ManagedResourcesRequest } from '../../lib/api/types/crossplane/listManagedResources';
 import { resourcesInterval } from '../../lib/shared/constants';
-import { Node, Edge, Position, MarkerType } from '@xyflow/react';
+import { Node, Edge, Position } from '@xyflow/react';
 import dagre from 'dagre';
 import { NodeData, ColorBy } from './types';
 import { buildTreeData, generateColorMap } from './graphUtils';
@@ -25,9 +25,9 @@ function buildGraph(
     const colorKey: string =
       colorBy === 'source' ? n.providerType : colorBy === 'flux' ? (n.fluxName ?? 'default') : n.providerConfigName;
     const borderColor = colorMap[colorKey] || '#ccc';
-    const backgroundColor = `${borderColor}08`; 
-      
-      const node: Node<NodeData> = {
+    const backgroundColor = `${borderColor}08`;
+
+    const node: Node<NodeData> = {
       id: n.id,
       type: 'custom',
       data: { ...n },
@@ -56,7 +56,8 @@ function buildGraph(
         id: `e-${n.parentId}-${n.id}`,
         source: n.parentId,
         target: n.id,
-        style: { strokeWidth: 2, stroke: '#888' },    });
+        style: { strokeWidth: 2, stroke: '#888' },
+      });
     }
     n.extraRefs?.forEach((refId) => {
       if (nodeMap.has(refId)) {

From c1769c0affa8d11355b4f86d4572adb6adea18c9 Mon Sep 17 00:00:00 2001
From: Lasserich <lasse.friedrich@sap.com>
Date: Tue, 4 Nov 2025 17:55:40 +0100
Subject: [PATCH 3/3] fix: darkmode

---
 src/components/Graphs/Graph.module.css | 9 +++++----
 src/components/Graphs/Graph.tsx        | 2 +-
 src/components/Graphs/useGraph.ts      | 1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Graphs/Graph.module.css b/src/components/Graphs/Graph.module.css
index 5f75ad4b..311a52ef 100644
--- a/src/components/Graphs/Graph.module.css
+++ b/src/components/Graphs/Graph.module.css
@@ -1,7 +1,7 @@
 .graphContainer {
   display: flex;
   height: 600px;
-  overflow: hidden;
+  padding: 2px; 
   font-family: var(--sapFontFamily);
   position: relative;
 }
@@ -10,7 +10,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: #ffffff;
+  background-color: var(--sapTile_Background, #fff);
 }
 
 .topLegendContainer {
@@ -19,6 +19,7 @@
   right: 1rem;              
   display: flex;
   align-items: center;
+  
   z-index: 2;
 }
 
@@ -29,7 +30,8 @@
   padding: 4px;
   border-radius: 8px;
   transition: background-color 0.2s ease;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: var(--sapTile_Background, #fff);
+  border: 1px solid var(--sapList_BorderColor, #ccc);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin-left: 0.5rem;
 }
@@ -82,7 +84,6 @@
 .popoverButtonContainer {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
   padding: 0.5rem;
 }
 
diff --git a/src/components/Graphs/Graph.tsx b/src/components/Graphs/Graph.tsx
index 150deaeb..6501b6c1 100644
--- a/src/components/Graphs/Graph.tsx
+++ b/src/components/Graphs/Graph.tsx
@@ -100,7 +100,7 @@ const Graph: React.FC = () => {
           <Popover
             opener="filter-button"
             open={filterPopoverOpen}
-            placement="Top"
+            placement="Bottom"
             onClose={() => setFilterPopoverOpen(false)}
           >
             <div className={styles.popoverButtonContainer}>
diff --git a/src/components/Graphs/useGraph.ts b/src/components/Graphs/useGraph.ts
index 24f8b247..48a630c4 100644
--- a/src/components/Graphs/useGraph.ts
+++ b/src/components/Graphs/useGraph.ts
@@ -25,6 +25,7 @@ function buildGraph(
     const colorKey: string =
       colorBy === 'source' ? n.providerType : colorBy === 'flux' ? (n.fluxName ?? 'default') : n.providerConfigName;
     const borderColor = colorMap[colorKey] || '#ccc';
+    // 8% opacity for background
     const backgroundColor = `${borderColor}08`;
 
     const node: Node<NodeData> = {