Fix: Fixed the issue that the page crashed when the node ID was the same as the combo ID #4180 (#4191)

### What problem does this PR solve?

Fix: Fixed the issue that the page crashed when the node ID was the same
as the combo ID #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/util.ts

 import { isEmpty } from 'lodash';
+import { v4 as uuid } from 'uuid';
 
 class KeyGenerator {
   idx = 0;
 
 export const buildNodesAndCombos = (nodes: any[]) => {
   const combos: any[] = [];
-  const nextNodes = nodes.map((x) => {
+  nodes.forEach((x) => {
     const combo = Array.isArray(x?.communities) ? x.communities[0] : undefined;
-    if (combo && combos.every((y) => y.id !== combo)) {
+    if (combo && combos.every((y) => y.data.label !== combo)) {
       combos.push({
-        id: combo,
+        id: uuid(),
+        data: {
+          label: combo,
+        },
       });
     }
+  });
+
+  const nextNodes = nodes.map((x) => {
     return {
       ...x,
-      combo,
+      combo: combos.find((y) => y.data.label === x.id)?.id,
     };
   });
 

web/src/pages/force-graph/constant.ts

-const nodes = [
-  {
-    type: '"ORGANIZATION"',
-    description:
-      '"厦门象屿是一家公司，其营业收入和市场占有率在2018年至2022年间有所变化。"',
-    source_id: '0',
-    id: '"厦门象屿"',
-  },
-  {
-    type: '"EVENT"',
-    description:
-      '"2018年是一个时间点，标志着厦门象屿营业收入和市场占有率的记录开始。"',
-    source_id: '0',
-    entity_type: '"EVENT"',
-    id: '"2018"',
-  },
-  {
-    type: '"EVENT"',
-    description:
-      '"2019年是一个时间点，厦门象屿的营业收入和市场占有率在此期间有所变化。"',
-    source_id: '0',
-    entity_type: '"EVENT"',
-    id: '"2019"',
-  },
-  {
-    type: '"EVENT"',
-    description:
-      '"2020年是一个时间点，厦门象屿的营业收入和市场占有率在此期间有所变化。"',
-    source_id: '0',
-    entity_type: '"EVENT"',
-    id: '"2020"',
-  },
-  {
-    type: '"EVENT"',
-    description:
-      '"2021年是一个时间点，厦门象屿的营业收入和市场占有率在此期间有所变化。"',
-    source_id: '0',
-    entity_type: '"EVENT"',
-    id: '"2021"',
-  },
-  {
-    type: '"EVENT"',
-    description:
-      '"2022年是一个时间点，厦门象屿的营业收入和市场占有率在此期间有所变化。"',
-    source_id: '0',
-    entity_type: '"EVENT"',
-    id: '"2022"',
-  },
-  {
-    type: '"ORGANIZATION"',
-    description:
-      '"厦门象屿股份有限公司是一家公司，中文简称为厦门象屿，外文名称为Xiamen Xiangyu Co.,Ltd.，外文名称缩写为Xiangyu，法定代表人为邓启东。"',
-    source_id: '1',
-    id: '"厦门象屿股份有限公司"',
-  },
-  {
-    type: '"PERSON"',
-    description: '"邓启东是厦门象屿股份有限公司的法定代表人。"',
-    source_id: '1',
-    entity_type: '"PERSON"',
-    id: '"邓启东"',
-  },
-  {
-    type: '"GEO"',
-    description: '"厦门是一个地理位置，与厦门象屿股份有限公司相关。"',
-    source_id: '1',
-    entity_type: '"GEO"',
-    id: '"厦门"',
-  },
-  {
-    type: '"PERSON"',
-    description:
-      '"廖杰 is the Board Secretary, responsible for handling board-related matters and communications."',
-    source_id: '2',
-    id: '"廖杰"',
-  },
-  {
-    type: '"PERSON"',
-    description:
-      '"史经洋 is the Securities Affairs Representative, responsible for handling securities-related matters and communications."',
-    source_id: '2',
-    entity_type: '"PERSON"',
-    id: '"史经洋"',
-  },
-  {
-    type: '"GEO"',
-    description:
-      '"A geographic location in Xiamen, specifically in the Free Trade Zone, where the company\'s office is situated."',
-    source_id: '2',
-    entity_type: '"GEO"',
-    id: '"厦门市湖里区自由贸易试验区厦门片区"',
-  },
-  {
-    type: '"GEO"',
-    description:
-      '"The building where the company\'s office is located, situated at Xiangyu Road, Xiamen."',
-    source_id: '2',
-    entity_type: '"GEO"',
-    id: '"象屿集团大厦"',
-  },
-  {
-    type: '"EVENT"',
-    description:
-      '"Refers to the year 2021, used for comparing financial metrics with the year 2022."',
-    source_id: '3',
-    id: '"2021年"',
-  },
-  {
-    type: '"EVENT"',
-    description:
-      '"Refers to the year 2022, used for presenting current financial metrics and comparing them with the year 2021."',
-    source_id: '3',
-    entity_type: '"EVENT"',
-    id: '"2022年"',
-  },
-  {
-    type: '"EVENT"',
-    description:
-      '"Indicates the focus on key financial metrics in the table, such as weighted averages and percentages."',
-    source_id: '3',
-    entity_type: '"EVENT"',
-    id: '"主要财务指标"',
-  },
-].map(({ type, ...x }) => ({ ...x }));
-
-const edges = [
-  {
-    weight: 2.0,
-    description: '"厦门象屿在2018年的营业收入和市场占有率被记录。"',
-    source_id: '0',
-    source: '"厦门象屿"',
-    target: '"2018"',
-  },
-  {
-    weight: 2.0,
-    description: '"厦门象屿在2019年的营业收入和市场占有率有所变化。"',
-    source_id: '0',
-    source: '"厦门象屿"',
-    target: '"2019"',
-  },
-  {
-    weight: 2.0,
-    description: '"厦门象屿在2020年的营业收入和市场占有率有所变化。"',
-    source_id: '0',
-    source: '"厦门象屿"',
-    target: '"2020"',
-  },
-  {
-    weight: 2.0,
-    description: '"厦门象屿在2021年的营业收入和市场占有率有所变化。"',
-    source_id: '0',
-    source: '"厦门象屿"',
-    target: '"2021"',
-  },
-  {
-    weight: 2.0,
-    description: '"厦门象屿在2022年的营业收入和市场占有率有所变化。"',
-    source_id: '0',
-    source: '"厦门象屿"',
-    target: '"2022"',
-  },
-  {
-    weight: 2.0,
-    description: '"厦门象屿股份有限公司的法定代表人是邓启东。"',
-    source_id: '1',
-    source: '"厦门象屿股份有限公司"',
-    target: '"邓启东"',
-  },
-  {
-    weight: 2.0,
-    description: '"厦门象屿股份有限公司位于厦门。"',
-    source_id: '1',
-    source: '"厦门象屿股份有限公司"',
-    target: '"厦门"',
-  },
-  {
-    weight: 2.0,
-    description:
-      '"廖杰\'s office is located in the Xiangyu Group Building, indicating his workplace."',
-    source_id: '2',
-    source: '"廖杰"',
-    target: '"象屿集团大厦"',
-  },
-  {
-    weight: 2.0,
-    description:
-      '"廖杰 works in the Xiamen Free Trade Zone, a specific area within Xiamen."',
-    source_id: '2',
-    source: '"廖杰"',
-    target: '"厦门市湖里区自由贸易试验区厦门片区"',
-  },
-  {
-    weight: 2.0,
-    description:
-      '"史经洋\'s office is also located in the Xiangyu Group Building, indicating his workplace."',
-    source_id: '2',
-    source: '"史经洋"',
-    target: '"象屿集团大厦"',
-  },
-  {
-    weight: 2.0,
-    description:
-      '"史经洋 works in the Xiamen Free Trade Zone, a specific area within Xiamen."',
-    source_id: '2',
-    source: '"史经洋"',
-    target: '"厦门市湖里区自由贸易试验区厦门片区"',
-  },
-  {
-    weight: 2.0,
-    description:
-      '"The years 2021 and 2022 are related as they are used for comparing financial metrics, showing changes and adjustments over time."',
-    source_id: '3',
-    source: '"2021年"',
-    target: '"2022年"',
-  },
-  {
-    weight: 2.0,
-    description:
-      '"The \'主要财务指标\' is related to the year 2021 as it provides the basis for financial comparisons and adjustments."',
-    source_id: '3',
-    source: '"2021年"',
-    target: '"主要财务指标"',
-  },
-  {
-    weight: 2.0,
-    description:
-      '"The \'主要财务指标\' is related to the year 2022 as it presents the current financial metrics and their changes compared to 2021."',
-    source_id: '3',
-    source: '"2022年"',
-    target: '"主要财务指标"',
-  },
-];
-
-export const graphData = {
-  directed: false,
-  multigraph: false,
-  graph: {},
-  nodes,
-  edges,
-  combos: [],
-};

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

-.container {
-  width: 100%;
-  height: 100%;
-}

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

-import InputWithUpload from './input-upload';
-
-export default InputWithUpload;

web/src/pages/force-graph/input-upload.tsx

-import { Authorization } from '@/constants/authorization';
-import { getAuthorization } from '@/utils/authorization-util';
-import { PlusOutlined } from '@ant-design/icons';
-import type { UploadFile, UploadProps } from 'antd';
-import { Image, Input, Upload } from 'antd';
-import { useState } from 'react';
-
-const InputWithUpload = () => {
-  const [previewOpen, setPreviewOpen] = useState(false);
-  const [previewImage, setPreviewImage] = useState('');
-  const [fileList, setFileList] = useState<UploadFile[]>([]);
-
-  const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
-    setFileList(newFileList);
-
-  const uploadButton = (
-    <button style={{ border: 0, background: 'none' }} type="button">
-      <PlusOutlined />
-      <div style={{ marginTop: 8 }}>Upload</div>
-    </button>
-  );
-  return (
-    <>
-      <Input placeholder="Basic usage"></Input>
-      <Upload
-        action="/v1/document/upload_and_parse"
-        listType="picture-card"
-        fileList={fileList}
-        onChange={handleChange}
-        multiple
-        headers={{ [Authorization]: getAuthorization() }}
-        data={{ conversation_id: '9e9f7d2453e511efb18efa163e197198' }}
-        method="post"
-      >
-        {fileList.length >= 8 ? null : uploadButton}
-      </Upload>
-      {previewImage && (
-        <Image
-          wrapperStyle={{ display: 'none' }}
-          preview={{
-            visible: previewOpen,
-            onVisibleChange: (visible) => setPreviewOpen(visible),
-            afterOpenChange: (visible) => !visible && setPreviewImage(''),
-          }}
-          src={previewImage}
-        />
-      )}
-    </>
-  );
-};
-
-export default () => {
-  return (
-    <section style={{ height: 500, width: 400 }}>
-      <div style={{ height: 200 }}></div>
-      <InputWithUpload></InputWithUpload>
-    </section>
-  );
-};

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

-import { useEffect, useRef } from 'react';
-import { ForceGraph2D } from 'react-force-graph';
-import { graphData } from './constant';
-
-const Next = () => {
-  const graphRef = useRef<ForceGraph2D>();
-
-  useEffect(() => {
-    graphRef.current.d3Force('cluster');
-  }, []);
-
-  return (
-    <div>
-      <ForceGraph2D
-        ref={graphRef}
-        graphData={graphData}
-        nodeAutoColorBy={'type'}
-        nodeLabel={(node) => {
-          return node.id;
-        }}
-        // nodeVal={(node) => {
-        //   return <div>xxx</div>;
-        // }}
-        // nodeVal={(node) => 100 / (node.level + 1)}
-        linkAutoColorBy={'type'}
-        nodeCanvasObjectMode={() => 'after'}
-        nodeCanvasObject={(node, ctx) => {
-          console.info(ctx);
-          return ctx.canvas;
-        }}
-        // nodeVal={'id'}
-      />
-    </div>
-  );
-};
-
-export default Next;

web/src/pages/force-graph/util.ts

-class KeyGenerator {
-  idx = 0;
-  chars: string[] = [];
-  constructor() {
-    const chars = Array(26)
-      .fill(1)
-      .map((x, idx) => String.fromCharCode(97 + idx)); // 26 char
-    this.chars = chars;
-  }
-  generateKey() {
-    const key = this.chars[this.idx];
-    this.idx++;
-    return key;
-  }
-}
-
-// Classify nodes based on edge relationships
-export class Converter {
-  keyGenerator;
-  dict: Record<string, string> = {}; // key is node id, value is combo
-  constructor() {
-    this.keyGenerator = new KeyGenerator();
-  }
-  buildDict(edges: { source: string; target: string }[]) {
-    edges.forEach((x) => {
-      if (this.dict[x.source] && !this.dict[x.target]) {
-        this.dict[x.target] = this.dict[x.source];
-      } else if (!this.dict[x.source] && this.dict[x.target]) {
-        this.dict[x.source] = this.dict[x.target];
-      } else if (!this.dict[x.source] && !this.dict[x.target]) {
-        this.dict[x.source] = this.dict[x.target] =
-          this.keyGenerator.generateKey();
-      }
-    });
-    return this.dict;
-  }
-  buildNodesAndCombos(nodes: any[], edges: any[]) {
-    this.buildDict(edges);
-    const nextNodes = nodes.map((x) => ({ ...x, combo: this.dict[x.id] }));
-
-    const combos = Object.values(this.dict).reduce<any[]>((pre, cur) => {
-      if (pre.every((x) => x.id !== cur)) {
-        pre.push({
-          id: cur,
-          data: {
-            label: `Combo ${cur}`,
-          },
-        });
-      }
-      return pre;
-    }, []);
-
-    return { nodes: nextNodes, combos };
-  }
-}

web/src/routes.ts

     component: '@/pages/document-viewer',
     layout: false,
   },
-  {
-    path: 'force',
-    component: '@/pages/force-graph',
-    layout: false,
-  },
   {
     path: '/*',
     component: '@/pages/404',