Fix: Fixed the issue that the graph could not display the grouping #4180 (#4306)

### What problem does this PR solve?

Fix: Fixed the issue that the graph could not display the grouping #4180

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/force-graph.tsx

@@ -50,6 +50,9 @@ const ForceGraph = ({ data, show }: IProps) => {
           enterable: true,
           getContent: (e: IElementEvent, items: ElementDatum) => {
             if (Array.isArray(items)) {
+              if (items.some((x) => x?.isCombo)) {
+                return `<p style="font-weight:600;color:red">${items?.[0]?.data?.label}</p>`;
+              }
               let result = ``;
               items.forEach((item) => {
                 result += `<section style="color:${TooltipColorMap[e['targetType'] as keyof typeof TooltipColorMap]};"><h3>${item?.id}</h3>`;

web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/util.ts

@@ -63,12 +63,18 @@ export const isDataExist = (data: any) => {
   );
 };
 
+const findCombo = (communities: string[]) => {
+  const combo = Array.isArray(communities) ? communities[0] : undefined;
+  return combo;
+};
+
 export const buildNodesAndCombos = (nodes: any[]) => {
   const combos: any[] = [];
   nodes.forEach((x) => {
-    const combo = Array.isArray(x?.communities) ? x.communities[0] : undefined;
+    const combo = findCombo(x?.communities);
     if (combo && combos.every((y) => y.data.label !== combo)) {
       combos.push({
+        isCombo: true,
         id: uuid(),
         data: {
           label: combo,
@@ -80,7 +86,7 @@ export const buildNodesAndCombos = (nodes: any[]) => {
   const nextNodes = nodes.map((x) => {
     return {
       ...x,
-      combo: combos.find((y) => y.data.label === x.id)?.id,
+      combo: combos.find((y) => y.data.label === findCombo(x?.communities))?.id,
     };
   });