From e8b9871fb911833a423244511dd03ce66c4a056f Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 1 Aug 2024 19:24:03 +0800
Subject: [PATCH] feat: Alter style of ForceGraph #162 (#1774)

### What problem does this PR solve?

feat: alter style of ForceGraph #162
### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 .../knowledge-graph/force-graph.tsx           | 87 ++++++++++---------
 .../components/knowledge-graph/index.less     |  9 +-
 .../components/knowledge-graph/modal.tsx      |  4 +-
 .../components/knowledge-graph/util.ts        |  3 -
 4 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/force-graph.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/force-graph.tsx
index c81acd6a2..19c0e5739 100644
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/force-graph.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/force-graph.tsx
@@ -1,25 +1,19 @@
-import { Graph } from '@antv/g6';
-import { useSize } from 'ahooks';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { graphData } from './constant';
-import { Converter, buildNodesAndCombos, isDataExist } from './util';
-
 import { useFetchKnowledgeGraph } from '@/hooks/chunk-hooks';
+import { ElementDatum, Graph, IElementEvent } from '@antv/g6';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { buildNodesAndCombos, isDataExist } from './util';
+
 import styles from './index.less';
 
-const converter = new Converter();
-
-const nextData = converter.buildNodesAndCombos(
-  graphData.nodes,
-  graphData.edges,
-);
-console.log('🚀 ~ nextData:', nextData);
-
-const finalData = { ...graphData, ...nextData };
+const TooltipColorMap = {
+  combo: 'red',
+  node: 'black',
+  edge: 'blue',
+};
 
 const ForceGraph = () => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const size = useSize(containerRef);
+  const graphRef = useRef<Graph | null>(null);
   const { data } = useFetchKnowledgeGraph();
 
   const nextData = useMemo(() => {
@@ -30,12 +24,12 @@ const ForceGraph = () => {
     }
     return { nodes: [], edges: [] };
   }, [data]);
-  console.log('🚀 ~ nextData ~ nextData:', nextData);
 
   const render = useCallback(() => {
     const graph = new Graph({
       container: containerRef.current!,
       autoFit: 'view',
+      autoResize: true,
       behaviors: [
         'drag-element',
         'drag-canvas',
@@ -49,16 +43,23 @@ const ForceGraph = () => {
       plugins: [
         {
           type: 'tooltip',
-          getContent: (e, items) => {
-            if (items.every((x) => x?.description)) {
+          enterable: true,
+          getContent: (e: IElementEvent, items: ElementDatum) => {
+            if (Array.isArray(items)) {
               let result = ``;
               items.forEach((item) => {
-                result += `<h3>${item?.id}</h3>`;
+                result += `<section style="color:${TooltipColorMap[e['targetType'] as keyof typeof TooltipColorMap]};"><h3>${item?.id}</h3>`;
+                if (item?.entity_type) {
+                  result += `<div style="padding-bottom: 6px;"><b>Entity type: </b>${item?.entity_type}</div>`;
+                }
+                if (item?.weight) {
+                  result += `<div><b>Weight: </b>${item?.weight}</div>`;
+                }
                 if (item?.description) {
                   result += `<p>${item?.description}</p>`;
                 }
               });
-              return result;
+              return result + '</section>';
             }
             return undefined;
           },
@@ -68,44 +69,44 @@ const ForceGraph = () => {
         type: 'combo-combined',
         preventOverlap: true,
         comboPadding: 1,
-        spacing: 20,
+        spacing: 100,
       },
       node: {
         style: {
-          size: 20,
+          size: 150,
           labelText: (d) => d.id,
-          labelPadding: 30,
+          // labelPadding: 30,
+          labelFontSize: 40,
           //   labelOffsetX: 20,
-          // labelOffsetY: 5,
+          labelOffsetY: 20,
           labelPlacement: 'center',
           labelWordWrap: true,
         },
         palette: {
           type: 'group',
-          field: (d) => d.combo,
+          field: (d) => {
+            return d?.entity_type as string;
+          },
         },
-        // state: {
-        //   highlight: {
-        //     fill: '#D580FF',
-        //     halo: true,
-        //     lineWidth: 0,
-        //   },
-        //   dim: {
-        //     fill: '#99ADD1',
-        //   },
-        // },
       },
       edge: {
         style: (model) => {
-          const { size, color } = model.data;
+          const weight: number = Number(model?.weight) || 2;
+          const lineWeight = weight * 4;
           return {
-            stroke: color || '#99ADD1',
-            lineWidth: size || 1,
+            stroke: '#99ADD1',
+            lineWidth: lineWeight > 10 ? 10 : lineWeight,
           };
         },
       },
     });
 
+    if (graphRef.current) {
+      graphRef.current.destroy();
+    }
+
+    graphRef.current = graph;
+
     graph.setData(nextData);
 
     graph.render();
@@ -117,7 +118,13 @@ const ForceGraph = () => {
     }
   }, [data, render]);
 
-  return <div ref={containerRef} className={styles.forceContainer} />;
+  return (
+    <div
+      ref={containerRef}
+      className={styles.forceContainer}
+      style={{ width: '100%', height: '80vh' }}
+    />
+  );
 };
 
 export default ForceGraph;
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/index.less b/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/index.less
index 3616cce4f..c75fcd4cd 100644
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/index.less
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/index.less
@@ -1,9 +1,10 @@
 .forceContainer {
-  width: 100%;
-  height: 100%;
+  :global(.tooltip) {
+    border-radius: 10px !important;
+  }
 }
 
 .modalContainer {
-  width: 90vw;
-  height: 80vh;
+  width: 100%;
+  height: 100%;
 }
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/modal.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/modal.tsx
index 327e3148e..17b7dbcd1 100644
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/modal.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/modal.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react';
 import ForceGraph from './force-graph';
 
 import styles from './index.less';
+import { isDataExist } from './util';
 
 const KnowledgeGraphModal: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -18,8 +19,7 @@ const KnowledgeGraphModal: React.FC = () => {
   };
 
   useEffect(() => {
-    if (data?.data && typeof data?.data !== 'boolean') {
-      console.log('🚀 ~ useEffect ~ data:', data);
+    if (isDataExist(data)) {
       setIsModalOpen(true);
     }
   }, [setIsModalOpen, data]);
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/util.ts b/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/util.ts
index 247f18bf0..7aa41f262 100644
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/util.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/util.ts
@@ -65,9 +65,6 @@ export const buildNodesAndCombos = (nodes: any[]) => {
     if (combo && combos.every((y) => y.id !== combo)) {
       combos.push({
         id: combo,
-        data: {
-          label: `Combo ${combo}`,
-        },
       });
     }
     return {