From 7928cf5b73ccb278bb5d47063ac2d16403f97f23 Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Fri, 22 Aug 2025 11:02:36 +0200
Subject: [PATCH 1/5] adjusting color and button behaviour

---
 src/components/Graphs/CustomNode.tsx         |  1 +
 src/components/Graphs/graphUtils.ts          |  2 +-
 src/components/Shared/ResourceStatusCell.tsx | 36 +++++++++++++++-----
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/Graphs/CustomNode.tsx b/src/components/Graphs/CustomNode.tsx
index de2296b5..c695bfb5 100644
--- a/src/components/Graphs/CustomNode.tsx
+++ b/src/components/Graphs/CustomNode.tsx
@@ -28,6 +28,7 @@ const CustomNode: React.FC<CustomNodeProps> = ({ label, type, status, transition
             positiveText={t('common.healthy')}
             negativeText={t('errors.notHealthy')}
             message={statusMessage}
+            hideOnHoverEffect={true}
           />
         </div>
         <div className={styles.nodeTextContainer}>
diff --git a/src/components/Graphs/graphUtils.ts b/src/components/Graphs/graphUtils.ts
index 3c19b005..f08afb00 100644
--- a/src/components/Graphs/graphUtils.ts
+++ b/src/components/Graphs/graphUtils.ts
@@ -26,7 +26,7 @@ export const resolveProviderType = (configName: string, providerConfigsList: Pro
 };
 
 export const generateColorMap = (items: NodeData[], colorBy: string): Record<string, string> => {
-  const colors = ['#E09D00', '#E6600D', '#AB218E', '#678BC7', '#1A9898', '#759421', '#925ACE', '#647987'];
+  const colors = ['#E09D00', '#e269c9', '#AB218E', '#678BC7', '#1A9898', '#759421', '#925ACE', '#647987'];
 
   const keys = (() => {
     if (colorBy === 'source') return Array.from(new Set(items.map((i) => i.providerType).filter(Boolean)));
diff --git a/src/components/Shared/ResourceStatusCell.tsx b/src/components/Shared/ResourceStatusCell.tsx
index f14e6cee..cea3dac7 100644
--- a/src/components/Shared/ResourceStatusCell.tsx
+++ b/src/components/Shared/ResourceStatusCell.tsx
@@ -1,4 +1,4 @@
-import { ButtonDomRef, FlexBox, Icon, ResponsivePopover, Text } from '@ui5/webcomponents-react';
+import { Button, ButtonDomRef, FlexBox, Icon, ResponsivePopover, Text } from '@ui5/webcomponents-react';
 import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo';
 import { useRef, useState } from 'react';
 import { AnimatedHoverTextButton } from '../Helper/AnimatedHoverTextButton.tsx';
@@ -10,6 +10,7 @@ export interface ResourceStatusCellProps {
   message?: string;
   positiveText: string;
   negativeText: string;
+  hideOnHoverEffect?: boolean;
 }
 export const ResourceStatusCell = ({
   isOk,
@@ -17,6 +18,7 @@ export const ResourceStatusCell = ({
   message,
   positiveText,
   negativeText,
+  hideOnHoverEffect
 }: ResourceStatusCellProps) => {
   const btnRef = useRef<ButtonDomRef>(null);
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
@@ -29,19 +31,37 @@ export const ResourceStatusCell = ({
   };
   return (
     <span>
-      <AnimatedHoverTextButton
-        ref={btnRef}
-        icon={
+      {hideOnHoverEffect ? (
+        <Button
+          ref={btnRef}
+          design="Transparent"
+          onClick={handleOpen}
+          title={transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'}
+          aria-label={transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'}
+        >
           <Icon
             design={isOk ? 'Positive' : 'Negative'}
             name={isOk ? 'sys-enter-2' : 'sys-cancel-2'}
             showTooltip={true}
             accessibleName={transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'}
           />
-        }
-        text={isOk ? positiveText : negativeText}
-        onClick={handleOpen}
-      />
+        </Button>
+      ) : (
+        <AnimatedHoverTextButton
+          ref={btnRef}
+          icon={
+            <Icon
+              design={isOk ? 'Positive' : 'Negative'}
+              name={isOk ? 'sys-enter-2' : 'sys-cancel-2'}
+              showTooltip={true}
+              accessibleName={transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'}
+            />
+          }
+          text={isOk ? positiveText : negativeText}
+          onClick={handleOpen}
+        />
+      )}
+
       <ResponsivePopover
         opener={btnRef.current ?? undefined}
         open={popoverIsOpen}

From 649492e23f9b026b9b4030f7635ae8cc21fa4f92 Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Fri, 22 Aug 2025 13:39:47 +0200
Subject: [PATCH 2/5] creating prop for transitionTime

---
 src/components/Shared/ResourceStatusCell.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Shared/ResourceStatusCell.tsx b/src/components/Shared/ResourceStatusCell.tsx
index cea3dac7..b856fece 100644
--- a/src/components/Shared/ResourceStatusCell.tsx
+++ b/src/components/Shared/ResourceStatusCell.tsx
@@ -22,6 +22,7 @@ export const ResourceStatusCell = ({
 }: ResourceStatusCellProps) => {
   const btnRef = useRef<ButtonDomRef>(null);
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
+  const timeAgo = transitionTime ? formatDateAsTimeAgo(transitionTime) : '-';
 
   const handleClose = () => {
     setPopoverIsOpen(false);
@@ -36,14 +37,14 @@ export const ResourceStatusCell = ({
           ref={btnRef}
           design="Transparent"
           onClick={handleOpen}
-          title={transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'}
-          aria-label={transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'}
+          title={timeAgo}
+          aria-label={timeAgo}
         >
           <Icon
             design={isOk ? 'Positive' : 'Negative'}
             name={isOk ? 'sys-enter-2' : 'sys-cancel-2'}
             showTooltip={true}
-            accessibleName={transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'}
+            accessibleName={timeAgo}
           />
         </Button>
       ) : (
@@ -54,7 +55,7 @@ export const ResourceStatusCell = ({
               design={isOk ? 'Positive' : 'Negative'}
               name={isOk ? 'sys-enter-2' : 'sys-cancel-2'}
               showTooltip={true}
-              accessibleName={transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'}
+              accessibleName={timeAgo}
             />
           }
           text={isOk ? positiveText : negativeText}
@@ -84,7 +85,7 @@ export const ResourceStatusCell = ({
               color: isOk ? 'var(--sapPositiveTextColor)' : 'var(--sapNegativeTextColor)',
             }}
           >
-            {formatDateAsTimeAgo(transitionTime)}
+            {timeAgo}
           </Text>
         </FlexBox>
       </ResponsivePopover>

From 8c6d3c9e89db8b34a82fd46904f255d62250bc02 Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Fri, 22 Aug 2025 13:40:32 +0200
Subject: [PATCH 3/5] linting

---
 src/components/Shared/ResourceStatusCell.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/Shared/ResourceStatusCell.tsx b/src/components/Shared/ResourceStatusCell.tsx
index b856fece..fd78b91b 100644
--- a/src/components/Shared/ResourceStatusCell.tsx
+++ b/src/components/Shared/ResourceStatusCell.tsx
@@ -18,7 +18,7 @@ export const ResourceStatusCell = ({
   message,
   positiveText,
   negativeText,
-  hideOnHoverEffect
+  hideOnHoverEffect,
 }: ResourceStatusCellProps) => {
   const btnRef = useRef<ButtonDomRef>(null);
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
@@ -33,13 +33,7 @@ export const ResourceStatusCell = ({
   return (
     <span>
       {hideOnHoverEffect ? (
-        <Button
-          ref={btnRef}
-          design="Transparent"
-          onClick={handleOpen}
-          title={timeAgo}
-          aria-label={timeAgo}
-        >
+        <Button ref={btnRef} design="Transparent" title={timeAgo} aria-label={timeAgo} onClick={handleOpen}>
           <Icon
             design={isOk ? 'Positive' : 'Negative'}
             name={isOk ? 'sys-enter-2' : 'sys-cancel-2'}

From d3a2740d620fc5b496077ea135b3b542e34df242 Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Mon, 25 Aug 2025 12:00:58 +0200
Subject: [PATCH 4/5] color scheme change

---
 src/components/Graphs/graphUtils.ts | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/Graphs/graphUtils.ts b/src/components/Graphs/graphUtils.ts
index f08afb00..ee5a585b 100644
--- a/src/components/Graphs/graphUtils.ts
+++ b/src/components/Graphs/graphUtils.ts
@@ -26,7 +26,23 @@ export const resolveProviderType = (configName: string, providerConfigsList: Pro
 };
 
 export const generateColorMap = (items: NodeData[], colorBy: string): Record<string, string> => {
-  const colors = ['#E09D00', '#e269c9', '#AB218E', '#678BC7', '#1A9898', '#759421', '#925ACE', '#647987'];
+  const colors = [
+  "#FFC933", // MANGO 4
+  "#FF8AF0", // PINK 4
+  "#FEADC8", // RASPBERRY 4
+  "#2CE0BF", // TEAL 4
+  "#FF8CB2", // RED 4
+  "#B894FF", // INDIGO 4
+  "#049F9A", // TEAL 6
+  "#FA4F96", // RASPBERRY 6
+  "#F31DED", // PINK 6
+  "#7858FF", // INDIGO 6
+  "#07838F", // TEAL 7
+  "#DF1278", // RASBERRY 7
+  "#510080", // PINK 10
+  "#5D36FF", // INDIGO 7
+  ];
+
 
   const keys = (() => {
     if (colorBy === 'source') return Array.from(new Set(items.map((i) => i.providerType).filter(Boolean)));

From dfb088509a7853c4f0cf069de1d428adc004a614 Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Mon, 25 Aug 2025 12:34:59 +0200
Subject: [PATCH 5/5] linting

---
 src/components/Graphs/graphUtils.ts | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/Graphs/graphUtils.ts b/src/components/Graphs/graphUtils.ts
index ee5a585b..9dc51d02 100644
--- a/src/components/Graphs/graphUtils.ts
+++ b/src/components/Graphs/graphUtils.ts
@@ -27,23 +27,22 @@ export const resolveProviderType = (configName: string, providerConfigsList: Pro
 
 export const generateColorMap = (items: NodeData[], colorBy: string): Record<string, string> => {
   const colors = [
-  "#FFC933", // MANGO 4
-  "#FF8AF0", // PINK 4
-  "#FEADC8", // RASPBERRY 4
-  "#2CE0BF", // TEAL 4
-  "#FF8CB2", // RED 4
-  "#B894FF", // INDIGO 4
-  "#049F9A", // TEAL 6
-  "#FA4F96", // RASPBERRY 6
-  "#F31DED", // PINK 6
-  "#7858FF", // INDIGO 6
-  "#07838F", // TEAL 7
-  "#DF1278", // RASBERRY 7
-  "#510080", // PINK 10
-  "#5D36FF", // INDIGO 7
+    '#FFC933', // MANGO 4
+    '#FF8AF0', // PINK 4
+    '#FEADC8', // RASPBERRY 4
+    '#2CE0BF', // TEAL 4
+    '#FF8CB2', // RED 4
+    '#B894FF', // INDIGO 4
+    '#049F9A', // TEAL 6
+    '#FA4F96', // RASPBERRY 6
+    '#F31DED', // PINK 6
+    '#7858FF', // INDIGO 6
+    '#07838F', // TEAL 7
+    '#DF1278', // RASBERRY 7
+    '#510080', // PINK 10
+    '#5D36FF', // INDIGO 7
   ];
 
-
   const keys = (() => {
     if (colorBy === 'source') return Array.from(new Set(items.map((i) => i.providerType).filter(Boolean)));
     if (colorBy === 'flux') return Array.from(new Set(items.map((i) => i.fluxName ?? 'default')));