feat: Classify nodes based on edge relationships #162 (#1755)

### What problem does this PR solve?
feat: Add ForceGraph
feat: Classify nodes based on edge relationships #162 

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/force-graph/index.tsx

@@ -0,0 +1,86 @@
+import { Graph } from '@antv/g6';
+import { useSize } from 'ahooks';
+import { useEffect, useRef } from 'react';
+import { graphData } from './constant';
+
+import styles from './index.less';
+import { Converter } from './util';
+
+const converter = new Converter();
+
+const nextData = converter.buildNodesAndCombos(
+  graphData.nodes,
+  graphData.edges,
+);
+console.log('🚀 ~ nextData:', nextData);
+
+const finalData = { ...graphData, ...nextData };
+
+const ForceGraph = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const size = useSize(containerRef);
+
+  const render = () => {
+    const graph = new Graph({
+      container: containerRef.current!,
+      autoFit: 'view',
+      behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
+      plugins: [
+        {
+          type: 'tooltip',
+          getContent: (e, items) => {
+            if (items.every((x) => x?.description)) {
+              let result = ``;
+              items.forEach((item) => {
+                if (item?.description) {
+                  result += `<p>${item?.description}</p>`;
+                }
+              });
+              return result;
+            }
+            return undefined;
+          },
+        },
+      ],
+      layout: {
+        type: 'combo-combined',
+        comboPadding: 2,
+      },
+      node: {
+        style: {
+          size: 20,
+          labelText: (d) => d.id,
+          labelPadding: 20,
+          //   labelOffsetX: 20,
+          labelOffsetY: 5,
+        },
+        palette: {
+          type: 'group',
+          field: (d) => d.combo,
+        },
+      },
+      edge: {
+        style: (model) => {
+          const { size, color } = model.data;
+          return {
+            stroke: color || '#99ADD1',
+            lineWidth: size || 1,
+          };
+        },
+      },
+      //   data: graphData,
+    });
+
+    graph.setData(finalData);
+
+    graph.render();
+  };
+
+  useEffect(() => {
+    render();
+  }, []);
+
+  return <div ref={containerRef} className={styles.container} />;
+};
+
+export default ForceGraph;