fix: Custom Relation badge always taking default color (#28301)

Author: anuj-kumary

openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/OntologyNodeRelationsContent.tsx

@@ -22,8 +22,9 @@ import {
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GlossaryTermRelationType } from '../../rest/settingConfigAPI';
-import { RELATION_META } from './OntologyExplorer.constants';
+import { COLOR_META_BY_HEX, RELATION_META } from './OntologyExplorer.constants';
 import { OntologyEdge, OntologyNode } from './OntologyExplorer.interface';
+import { getEffectiveRelationColor } from './utils/graphStyles';
 
 export interface OntologyNodeRelationsContentProps {
   readonly node: OntologyNode;
@@ -78,14 +79,16 @@ export const OntologyNodeRelationsContent: React.FC<
   const getDisplayName = useCallback(
     (relationType: string) => {
       const relationMeta = relationTypeMap.get(relationType);
+      const builtInLabelKey = RELATION_META[relationType]?.labelKey;
 
       return (
-        relationMeta?.displayName ??
-        relationLabelOverrides[relationType] ??
-        relationType
+        (relationMeta?.displayName ||
+          relationMeta?.name ||
+          relationLabelOverrides[relationType]) ??
+        (builtInLabelKey ? t(builtInLabelKey) : relationType)
       );
     },
-    [relationTypeMap, relationLabelOverrides]
+    [relationTypeMap, relationLabelOverrides, t]
   );
 
   const totalRelations =
@@ -134,7 +137,14 @@ export const OntologyNodeRelationsContent: React.FC<
               const labelText = relatedDisplayName(rel);
               const hasRowBelow = rowIndex < rows.length - 1;
 
-              const meta = RELATION_META[rel.relationType];
+              const customRelation = relationTypeMap.get(rel.relationType);
+              const effectiveColor = getEffectiveRelationColor(
+                rel.relationType,
+                customRelation
+              );
+              const meta = effectiveColor
+                ? COLOR_META_BY_HEX[effectiveColor.toLowerCase()]
+                : undefined;
 
               return (
                 <li

openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/hooks/useGraphData.ts

@@ -25,6 +25,7 @@ import {
   EDGE_STROKE_COLOR,
   NODE_BORDER_COLOR,
   RELATION_COLORS,
+  RELATION_META,
 } from '../OntologyExplorer.constants';
 import {
   BuildGraphDataProps,
@@ -191,6 +192,20 @@ export function useGraphDataBuilder({
     [inputEdges, relationTypes]
   );
 
+  const customRelationColorMap = useMemo<Record<string, string>>(() => {
+    const map: Record<string, string> = {};
+    relationTypes?.forEach((rt) => {
+      const effectiveColor = rt.isSystemDefined
+        ? RELATION_META[rt.name]?.color ?? rt.color
+        : rt.color ?? RELATION_META[rt.name]?.color;
+      if (effectiveColor) {
+        map[rt.name] = effectiveColor;
+      }
+    });
+
+    return map;
+  }, [relationTypes]);
+
   const neighborSet = useMemo(() => {
     const set = new Set<string>();
     if (!selectedNodeId || !inputEdges.length) {
@@ -691,7 +706,9 @@ export function useGraphDataBuilder({
           const rawEdgeColor =
             explorationMode === 'data' && !isTermTermInDataMode
               ? DATA_MODE_ASSET_EDGE_STROKE_COLOR
-              : RELATION_COLORS[singleEdge.relationType] ?? EDGE_STROKE_COLOR;
+              : customRelationColorMap[singleEdge.relationType] ??
+                RELATION_COLORS[singleEdge.relationType] ??
+                EDGE_STROKE_COLOR;
           const edgeColor = getCanvasColor(
             rawEdgeColor,
             explorationMode === 'data' && !isTermTermInDataMode
@@ -744,7 +761,8 @@ export function useGraphDataBuilder({
             ? {
                 ...getEdgeRelationLabelStyle(
                   labelText,
-                  singleEdge.relationType
+                  singleEdge.relationType,
+                  customRelationColorMap[singleEdge.relationType]
                 ),
                 labelPosition: 'center',
                 labelAutoRotate: false,

openmetadata-ui/src/main/resources/ui/src/components/OntologyExplorer/utils/graphStyles.ts

@@ -19,6 +19,7 @@ import {
   register,
 } from '@antv/g6';
 import {
+  COLOR_META_BY_HEX,
   COMBO_FILL_DEFAULT,
   COMBO_HEADER_HEIGHT,
   COMBO_INTERIOR_PADDING_SIDES,
@@ -404,14 +405,32 @@ const EDGE_LABEL_BADGE_PADDING: [number, number, number, number] = [4, 8, 4, 8];
 const EDGE_LABEL_BADGE_RADIUS = 6;
 const EDGE_LABEL_BADGE_FONT_WEIGHT = 700;
 
+export function getEffectiveRelationColor(
+  relationType: string,
+  customRelation: { isSystemDefined?: boolean; color?: string } | undefined
+): string | undefined {
+  if (!customRelation) {
+    return RELATION_META[relationType]?.color;
+  }
+  if (customRelation.isSystemDefined) {
+    return RELATION_META[relationType]?.color ?? customRelation.color;
+  }
+
+  return customRelation.color ?? RELATION_META[relationType]?.color;
+}
+
 export function getEdgeRelationLabelStyle(
   labelText: string,
-  relationType?: string
+  relationType?: string,
+  effectiveColor?: string
 ): Record<string, unknown> {
-  const meta =
+  const builtInMeta =
     relationType != null
       ? RELATION_META[relationType] ?? RELATION_META.default
       : null;
+  const meta = effectiveColor
+    ? COLOR_META_BY_HEX[effectiveColor.toLowerCase()] ?? builtInMeta
+    : builtInMeta;
 
   const edgeLabelPadding = EDGE_LABEL_BADGE_PADDING;