From 9542f4484c8fca666db113304f697a090ac093c3 Mon Sep 17 00:00:00 2001 From: balibabu Date: Mon, 5 Aug 2024 16:04:57 +0800 Subject: [PATCH] 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 | 2 + web/src/locales/zh-traditional.ts | 2 + web/src/locales/zh.ts | 2 + .../knowledge-graph/force-graph.tsx | 2 +- .../knowledge-graph/indented-tree.tsx | 44 ++----------------- .../components/knowledge-graph/modal.tsx | 15 +++++-- 6 files changed, 23 insertions(+), 44 deletions(-) diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index 9978c37e0c2..fff690c10b1 100644 --- a/web/src/locales/en.ts +++ b/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', diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts index 2c1be5a4843..fcedfe58d2e 100644 --- a/web/src/locales/zh-traditional.ts +++ b/web/src/locales/zh-traditional.ts @@ -279,6 +279,8 @@ export default { chunkMessage: '請輸入值！', full: '全文', ellipse: '省略', + graph: '知識圖譜', + mind: '心智圖', }, chat: { newConversation: '新會話', diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index 04b8b454417..f289c48dd85 100644 --- a/web/src/locales/zh.ts +++ b/web/src/locales/zh.ts @@ -296,6 +296,8 @@ export default { chunkMessage: '请输入值！', full: '全文', ellipse: '省略', + graph: '知识图谱', + mind: '思维导图', }, chat: { newConversation: '新会话', 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 4c6c427583e..ad0d5851a5c 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 @@ -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', }} diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/indented-tree.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/indented-tree.tsx index 8dbf027efde..66299727dc8 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/indented-tree.tsx +++ b/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', }} 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 9c56ae1e4c7..d19e1fd1aa9 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 @@ -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.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 ( { setValue(v as SegmentedValue)} />