Skip to content

Commit

Permalink
feat: Translate ForceGraph infiniflow#162 (infiniflow#1810)
Browse files Browse the repository at this point in the history
### What problem does this PR solve?

feat: Translate ForceGraph infiniflow#162

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
  • Loading branch information
cike8899 authored Aug 5, 2024
1 parent 6ff7c6e commit 1e5056b
Show file tree
Hide file tree
Showing 6 changed files with 23 additions and 44 deletions.
2 changes: 2 additions & 0 deletions web/src/locales/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions web/src/locales/zh-traditional.ts
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,8 @@ export default {
chunkMessage: '請輸入值!',
full: '全文',
ellipse: '省略',
graph: '知識圖譜',
mind: '心智圖',
},
chat: {
newConversation: '新會話',
Expand Down
2 changes: 2 additions & 0 deletions web/src/locales/zh.ts
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,8 @@ export default {
chunkMessage: '请输入值!',
full: '全文',
ellipse: '省略',
graph: '知识图谱',
mind: '思维导图',
},
chat: {
newConversation: '新会话',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -35,7 +35,7 @@ const COLORS = [

const TreeEvent = {
COLLAPSE_EXPAND: 'collapse-expand',
ADD_CHILD: 'add-child',
WHEEL: 'canvas:wheel',
};

class IndentedNode extends BaseNode {
Expand Down Expand Up @@ -204,24 +204,13 @@ 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);

this.drawCountShape(attributes, container);

this.drawIconArea(attributes, container);
this.drawCollapseShape(attributes, container);
this.drawAddShape(attributes, container);
}
}

Expand Down Expand Up @@ -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() {
Expand All @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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';
},
},
},
Expand All @@ -389,7 +354,6 @@ const IndentedTree = ({ data, show }: IProps) => {
},
behaviors: [
'scroll-canvas',
'drag-branch',
'collapse-expand-tree',
{
type: 'click-select',
Expand Down Expand Up @@ -421,7 +385,7 @@ const IndentedTree = ({ data, show }: IProps) => {
id="tree"
ref={containerRef}
style={{
width: '90vh',
width: '90vw',
height: '80vh',
display: show ? 'block' : 'none',
}}
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);
Expand All @@ -32,7 +41,7 @@ const KnowledgeGraphModal: React.FC = () => {

return (
<Modal
title="Knowledge Graph"
title={t('chunk.graph')}
open={isModalOpen}
onOk={handleOk}
onCancel={handleCancel}
Expand All @@ -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)}
/>
Expand Down

0 comments on commit 1e5056b

Please sign in to comment.