github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-08-04 10:00:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: Update AddNodesSider component to toggle between all nodes and higher order nodes

Browse Source
This commit is contained in:
谨欣 2024-09-03 18:32:21 +08:00
parent 230ba69772
commit e14eb255ef
3 changed files with 19 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/components/flow/add-nodes-sider.tsx
View File

@ -12,6 +12,8 @@ import StaticNodes from './static-nodes';
const { Search } = Input; const { Search } = Input;
const { Sider } = Layout; const { Sider } = Layout;
const TAGS = JSON.stringify({ order: 'higher-order' });
type GroupType = { type GroupType = {
category: string; category: string;
categoryLabel: string; categoryLabel: string;
@ -41,14 +43,16 @@ const AddNodesSider: React.FC = () => {
const [resources, setResources] = useState<Array<IFlowNode>>([]); const [resources, setResources] = useState<Array<IFlowNode>>([]);
const [operatorsGroup, setOperatorsGroup] = useState<GroupType[]>([]); const [operatorsGroup, setOperatorsGroup] = useState<GroupType[]>([]);
const [resourcesGroup, setResourcesGroup] = useState<GroupType[]>([]); const [resourcesGroup, setResourcesGroup] = useState<GroupType[]>([]);
const [isAdvancedMode, setIsAdvancedMode] = useState<boolean>(false); const [isAllNodesVisible, setIsAllNodesVisible] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
getNodes(); getNodes(TAGS);
}, []); }, []);
// tags is optional, if tags is not passed, it will get all nodes
async function getNodes(tags?: string) { async function getNodes(tags?: string) {
const [_, data] = await apiInterceptors(getFlowNodes(tags)); const [_, data] = await apiInterceptors(getFlowNodes(tags));
if (data && data.length > 0) { if (data && data.length > 0) {
localStorage.setItem(FLOW_NODES_KEY, JSON.stringify(data)); localStorage.setItem(FLOW_NODES_KEY, JSON.stringify(data));
const operatorNodes = data.filter(node => node.flow_type === 'operator'); const operatorNodes = data.filter(node => node.flow_type === 'operator');
@ -168,14 +172,13 @@ const AddNodesSider: React.FC = () => {
} }
function onModeChange() { function onModeChange() {
setIsAdvancedMode(!isAdvancedMode); if (isAllNodesVisible) {
getNodes(TAGS);
if (!isAdvancedMode) {
const tags = JSON.stringify({ order: 'higher-order' });
getNodes(tags);
} else { } else {
getNodes(); getNodes();
} }
setIsAllNodesVisible(!isAllNodesVisible);
} }
return ( return (
@ -196,19 +199,9 @@ const AddNodesSider: React.FC = () => {
{t('add_node')} {t('add_node')}
</p> </p>
{isAdvancedMode ? ( <Tag color={isAllNodesVisible ? 'green' : 'blue'} onClick={onModeChange} className='mr-0'>
<Tag color='blue' onClick={onModeChange}> {isAllNodesVisible ? t('All_Nodes') : t('Higher_Order_Nodes')}
{t('Advanced_Mode')}
</Tag> </Tag>
) : (
<Tag color='green' onClick={onModeChange}>
{t('Default_Mode')}
</Tag>
)}
{/* <Button onClick={onModeChange} shape='round' size='small'>
{isAdvancedMode ? t('Advanced_Mode') : t('Default_Mode')}
</Button> */}
</div> </div>
<Search placeholder='Search node' onSearch={searchNode} allowClear /> <Search placeholder='Search node' onSearch={searchNode} allowClear />

2
web/locales/en/flow.ts
View File

@ -21,4 +21,6 @@ export const FlowEn = {
Add_Parameter: 'Add Parameter', Add_Parameter: 'Add Parameter',
Advanced_Mode: 'Advanced Mode', Advanced_Mode: 'Advanced Mode',
Default_Mode: 'Default Mode', Default_Mode: 'Default Mode',
Higher_Order_Nodes: 'Higher Order Nodes',
All_Nodes: 'All Nodes',
}; };

6
web/locales/zh/flow.ts
View File

@ -19,6 +19,8 @@ export const FlowZn = {
Please_Add_Nodes_First: '请先添加节点', Please_Add_Nodes_First: '请先添加节点',
Add_Global_Variable_of_Flow: '添加 Flow 全局变量', Add_Global_Variable_of_Flow: '添加 Flow 全局变量',
Add_Parameter: '添加参数', Add_Parameter: '添加参数',
Advanced_Mode: '高级模式', // Advanced_Mode: '高级模式',
Default_Mode: '默认模式', // Default_Mode: '默认模式',
Higher_Order_Nodes: '高阶节点',
All_Nodes: '所有节点',
}; };