feat: Translate ForceGraph #162 (#1810)

### What problem does this PR solve?

feat: Translate ForceGraph #162

### Type of change


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

web/src/locales/en.ts

@@ -307,6 +307,8 @@ The above is the content you need to summarize.`,
       chunkMessage: 'Please input value!',
       full: 'Full text',
       ellipse: 'Ellipse',
+      graph: 'Knowledge graph',
+      mind: 'Mind map',
     },
     chat: {
       newConversation: 'New conversation',

web/src/locales/zh-traditional.ts

@@ -279,6 +279,8 @@ export default {
       chunkMessage: '請輸入值！',
       full: '全文',
       ellipse: '省略',
+      graph: '知識圖譜',
+      mind: '心智圖',
     },
     chat: {
       newConversation: '新會話',

web/src/locales/zh.ts

@@ -296,6 +296,8 @@ export default {
       chunkMessage: '请输入值！',
       full: '全文',
       ellipse: '省略',
+      graph: '知识图谱',
+      mind: '思维导图',
     },
     chat: {
       newConversation: '新会话',

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

@@ -127,7 +127,7 @@ const ForceGraph = ({ data, show }: IProps) => {
       ref={containerRef}
       className={styles.forceContainer}
       style={{
-        width: '90vh',
+        width: '90vw',
         height: '80vh',
         display: show ? 'block' : 'none',
       }}

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

@@ -18,7 +18,7 @@ import { TreeData } from '@antv/g6/lib/types';
 import isEmpty from 'lodash/isEmpty';
 import { useCallback, useEffect, useRef } from 'react';
 
-const rootId = 'Modeling Methods';
+const rootId = 'root';
 
 const COLORS = [
   '#5B8FF9',
@@ -35,7 +35,7 @@ const COLORS = [
 
 const TreeEvent = {
   COLLAPSE_EXPAND: 'collapse-expand',
-  ADD_CHILD: 'add-child',
+  WHEEL: 'canvas:wheel',
 };
 
 class IndentedNode extends BaseNode {
@@ -204,16 +204,6 @@ class IndentedNode extends BaseNode {
     };
   }
 
-  drawAddShape(attributes: any, container: any) {
-    const addStyle = this.getAddStyle(attributes);
-    const btn = this.upsert('add', Badge, addStyle as any, container);
-
-    this.forwardEvent(btn, CommonEvent.CLICK, (event: any) => {
-      event.stopPropagation();
-      attributes.context.graph.emit(TreeEvent.ADD_CHILD, { id: this.id });
-    });
-  }
-
   render(attributes = this.parsedAttributes, container = this) {
     super.render(attributes, container);
 
@@ -221,7 +211,6 @@ class IndentedNode extends BaseNode {
 
     this.drawIconArea(attributes, container);
     this.drawCollapseShape(attributes, container);
-    this.drawAddShape(attributes, container);
   }
 }
 
@@ -255,7 +244,6 @@ class CollapseExpandTree extends BaseBehavior {
     graph.on(NodeEvent.POINTER_ENTER, this.showIcon);
     graph.on(NodeEvent.POINTER_LEAVE, this.hideIcon);
     graph.on(TreeEvent.COLLAPSE_EXPAND, this.onCollapseExpand);
-    graph.on(TreeEvent.ADD_CHILD, this.addChild);
   }
 
   unbindEvents() {
@@ -264,7 +252,6 @@ class CollapseExpandTree extends BaseBehavior {
     graph.off(NodeEvent.POINTER_ENTER, this.showIcon);
     graph.off(NodeEvent.POINTER_LEAVE, this.hideIcon);
     graph.off(TreeEvent.COLLAPSE_EXPAND, this.onCollapseExpand);
-    graph.off(TreeEvent.ADD_CHILD, this.addChild);
   }
 
   status = 'idle';
@@ -294,28 +281,6 @@ class CollapseExpandTree extends BaseBehavior {
     else await graph.expandElement(id);
     this.status = 'idle';
   };
-
-  addChild(event: any) {
-    const {
-      onCreateChild = () => ({
-        id: `${Date.now()}`,
-        style: { labelText: 'new node' },
-      }),
-    } = this.options;
-    const { graph } = this.context;
-    const datum = onCreateChild(event.id);
-    graph.addNodeData([datum]);
-    graph.addEdgeData([{ source: event.id, target: datum.id }]);
-    const parent = graph.getNodeData(event.id);
-    graph.updateNodeData([
-      {
-        id: event.id,
-        children: [...(parent.children || []), datum.id],
-        style: { collapsed: false },
-      },
-    ]);
-    graph.render();
-  }
 }
 
 register(ExtensionCategory.NODE, 'indented', IndentedNode);
@@ -375,7 +340,7 @@ const IndentedTree = ({ data, show }: IProps) => {
           targetPort: 'in',
           stroke: (datum: any) => {
             const depth = graph.getAncestorsData(datum.source, 'tree').length;
-            return COLORS[depth % COLORS.length];
+            return COLORS[depth % COLORS.length] || 'black';
           },
         },
       },
@@ -389,7 +354,6 @@ const IndentedTree = ({ data, show }: IProps) => {
       },
       behaviors: [
         'scroll-canvas',
-        'drag-branch',
         'collapse-expand-tree',
         {
           type: 'click-select',
@@ -421,7 +385,7 @@ const IndentedTree = ({ data, show }: IProps) => {
       id="tree"
       ref={containerRef}
       style={{
-        width: '90vh',
+        width: '90vw',
         height: '80vh',
         display: show ? 'block' : 'none',
       }}

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

@@ -1,6 +1,7 @@
 import { useFetchKnowledgeGraph } from '@/hooks/chunk-hooks';
 import { Flex, Modal, Segmented } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import ForceGraph from './force-graph';
 import IndentedTree from './indented-tree';
 import styles from './index.less';
@@ -15,6 +16,14 @@ const KnowledgeGraphModal: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { data } = useFetchKnowledgeGraph();
   const [value, setValue] = useState<SegmentedValue>(SegmentedValue.Graph);
+  const { t } = useTranslation();
+
+  const options = useMemo(() => {
+    return [
+      { value: SegmentedValue.Graph, label: t('chunk.graph') },
+      { value: SegmentedValue.Mind, label: t('chunk.mind') },
+    ];
+  }, [t]);
 
   const handleOk = () => {
     setIsModalOpen(false);
@@ -32,7 +41,7 @@ const KnowledgeGraphModal: React.FC = () => {
 
   return (
     <Modal
-      title="Knowledge Graph"
+      title={t('chunk.graph')}
       open={isModalOpen}
       onOk={handleOk}
       onCancel={handleCancel}
@@ -43,7 +52,7 @@ const KnowledgeGraphModal: React.FC = () => {
         <Flex justify="end">
           <Segmented
             size="large"
-            options={[SegmentedValue.Graph, SegmentedValue.Mind]}
+            options={options}
             value={value}
             onChange={(v) => setValue(v as SegmentedValue)}
           />