[#11921] FlameGraph > Set colors for each application name

pinpoint-apm · Jan 8, 2025 · 25917f8 · 25917f8
1 parent 3c070be
commit 25917f8
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 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
@@ -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
@@ -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
@@ -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;
+}