From 25917f87c9bfc0577486bc7fe09135f22bfa2365 Mon Sep 17 00:00:00 2001
From: jihea-park <jihea.park@navercorp.com>
Date: Wed, 8 Jan 2025 13:32:13 +0900
Subject: [PATCH] [#11921] FlameGraph > Set colors for each application name

---
 .../src/components/FlameGraph/FlameNode.tsx   |  2 +-
 .../Transaction/timeline/TimelineFetcher.tsx  | 22 +++++++++++++++----
 .../src/main/v3/packages/ui/src/lib/colors.ts | 15 +++++++++++++
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/FlameGraph/FlameNode.tsx b/web-frontend/src/main/v3/packages/ui/src/components/FlameGraph/FlameNode.tsx
index 7dd7f5afc76a..439cd0a5bd9e 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/FlameGraph/FlameNode.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/FlameGraph/FlameNode.tsx
@@ -93,8 +93,8 @@ const FlameNodeComponent = <T,>({
           width={width}
           height={height}
           style={{
-            ...nodeStyle,
             fill: isHover ? hoverColor : color,
+            ...nodeStyle,
           }}
         />
         <text
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/Transaction/timeline/TimelineFetcher.tsx b/web-frontend/src/main/v3/packages/ui/src/components/Transaction/timeline/TimelineFetcher.tsx
index 30585318fb64..94ac43408651 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/Transaction/timeline/TimelineFetcher.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/Transaction/timeline/TimelineFetcher.tsx
@@ -7,6 +7,11 @@ import {
   TransactionInfoType as TransactionInfo,
   colors,
 } from '@pinpoint-fe/ui/constants';
+import {
+  getColorByString,
+  getContrastingTextColor,
+  getDarkenHexColor,
+} from '@pinpoint-fe/ui/lib/colors';
 import { FlameGraph } from '../../FlameGraph';
 import { cn } from '../../../lib';
 import { TimelineDetail } from './TimelineDetail';
@@ -144,15 +149,22 @@ export const TimelineFetcher = ({ transactionInfo }: TimelineFetcherProps) => {
         data={flameGraphData}
         start={transactionInfo?.callStackStart}
         end={transactionInfo?.callStackEnd}
-        customNodeStyle={(node, color) => {
+        customNodeStyle={(node, _color) => {
+          const nodeApplicationName = node?.detail?.args?.['Application Name'] || '';
+          const color = nodeApplicationName ? getColorByString(nodeApplicationName) : _color?.color;
+          const hoverColor = getDarkenHexColor(color);
+
           const id = node.detail.args.id;
           const isFocused = focusedNodeId === id || selectedTrace?.args.id === id;
 
           return {
-            fill: isFocused ? color?.hoverColor : color?.color,
+            fill: isFocused ? hoverColor : color,
+            stroke: colors.white,
+            strokeWidth: 0.5,
           };
         }}
-        customTextStyle={(node) => {
+        customTextStyle={(node, _color) => {
+          const nodeApplicationName = node?.detail?.args?.['Application Name'] || '';
           const id = node.detail.args.id;
           const isFocused = focusedNodeId === id || selectedTrace?.args.id === id;
           const isHighLighted = searchedListIds?.includes(id);
@@ -165,7 +177,9 @@ export const TimelineFetcher = ({ transactionInfo }: TimelineFetcherProps) => {
                 paintOrder: 'stroke',
                 strokeLinejoin: 'round',
               }
-            : {};
+            : {
+                fill: getContrastingTextColor(getColorByString(nodeApplicationName)) || _color,
+              };
           return {
             ...hilightedStyle,
             fontWeight: isFocused ? 'bold' : '',
diff --git a/web-frontend/src/main/v3/packages/ui/src/lib/colors.ts b/web-frontend/src/main/v3/packages/ui/src/lib/colors.ts
index 5ce1b1007fc3..46cd59eb87ab 100644
--- a/web-frontend/src/main/v3/packages/ui/src/lib/colors.ts
+++ b/web-frontend/src/main/v3/packages/ui/src/lib/colors.ts
@@ -52,3 +52,18 @@ export const getDarkenHexColor = (hexColor: string, amount = 0.2) => {
 
   return darkenedHex;
 };
+
+export function getColorByString(input: string): string {
+  let hash = 0;
+  for (let i = 0; i < input.length; i++) {
+    hash = input.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  let color = '#';
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += ('00' + value.toString(16)).slice(-2);
+  }
+
+  return color;
+}