From 604200e1db2e4f7ec75d0116d7562604ede397ec Mon Sep 17 00:00:00 2001 From: scarqin Date: Tue, 24 Dec 2024 15:31:02 +0800 Subject: [PATCH] feat: flow chart --- .../core/src/pages/aiSetting/AIFlowChart.tsx | 41 ++++++++++++------- .../pages/aiSetting/components/CustomEdge.tsx | 2 +- .../aiSetting/components/ModelCardNode.tsx | 2 +- .../aiSetting/components/ServiceCardNode.tsx | 2 +- .../core/src/pages/aiSetting/constants.ts | 2 +- .../core/src/pages/aiSetting/styles.css | 33 --------------- 6 files changed, 30 insertions(+), 52 deletions(-) diff --git a/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx b/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx index b84be017..6472c01b 100644 --- a/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx +++ b/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx @@ -39,15 +39,18 @@ interface ApiResponse { const calculateNodePositions = (models: ModelData[], startY = LAYOUT.NODE_START_Y, gap = LAYOUT.NODE_GAP) => { return models.reduce( (acc, model, index) => { - acc[model.id] = { - x: LAYOUT.MODEL_NODE_X, - y: startY + index * gap + const y = startY + index * gap + return { + ...acc, + [model.id]: { + x: LAYOUT.MODEL_NODE_X, + y + }, + [`${model.id}-keys`]: { + x: LAYOUT.KEY_NODE_X, + y + } } - acc[`${model.id}-keys`] = { - x: LAYOUT.KEY_NODE_X, - y: startY + index * gap - } - return acc }, {} as Record ) @@ -83,17 +86,24 @@ const AIFlowChart = () => { useEffect(() => { if (!modelData.length) return + const positions = calculateNodePositions(modelData) + // subtract 5 to make sure the service node is above the top model node + const serviceY = positions[modelData[0].id].y - 5 + const newNodes = [ { id: 'apiService', type: 'serviceCard', - position: { x: LAYOUT.SERVICE_NODE_X, y: LAYOUT.NODE_START_Y }, - data: {} + position: { x: LAYOUT.SERVICE_NODE_X, y: serviceY }, + data: { + title: 'API Service', + count: modelData.length + } }, ...modelData.map((model) => ({ id: model.id, type: 'modelCard', - position: calculateNodePositions(modelData)[model.id], + position: positions[model.id], data: { title: model.name, status: model.status, @@ -104,7 +114,7 @@ const AIFlowChart = () => { ...modelData.map((model) => ({ id: `${model.id}-keys`, type: 'keyCard', - position: calculateNodePositions(modelData)[`${model.id}-keys`], + position: positions[`${model.id}-keys`], data: { title: 'API Keys', keys: model.keys.map((key, index) => ({ @@ -121,14 +131,15 @@ const AIFlowChart = () => { id: `service-${model.id}`, source: 'apiService', target: model.id, - label: `apis(${model.api_count})`, - markerEnd: { type: 'arrow' }, - data: { id: model.id } + label: `${model.api_count} apis`, + data: { id: model.id }, + animated: true })), ...modelData.map((model) => ({ id: `${model.id}-keys-edge`, source: model.id, target: `${model.id}-keys`, + label: `${model.key_count} keys`, animated: true })) ] diff --git a/frontend/packages/core/src/pages/aiSetting/components/CustomEdge.tsx b/frontend/packages/core/src/pages/aiSetting/components/CustomEdge.tsx index 2fcf5824..f3cbff89 100644 --- a/frontend/packages/core/src/pages/aiSetting/components/CustomEdge.tsx +++ b/frontend/packages/core/src/pages/aiSetting/components/CustomEdge.tsx @@ -35,7 +35,7 @@ export default function CustomEdge({ target="_blank" style={{ position: 'absolute', - transform: `translate(${targetX - 80}px,${targetY}px)`, + transform: `translate(${targetX - 80}px,${targetY - 20}px)`, borderRadius: '4px', fontSize: 12, fontWeight: 500, diff --git a/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx b/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx index 41c13307..f0ee9c99 100644 --- a/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx +++ b/frontend/packages/core/src/pages/aiSetting/components/ModelCardNode.tsx @@ -20,7 +20,7 @@ export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) = const { title, status, defaultModel, logo } = data return (
diff --git a/frontend/packages/core/src/pages/aiSetting/components/ServiceCardNode.tsx b/frontend/packages/core/src/pages/aiSetting/components/ServiceCardNode.tsx index 87fc3be6..b2237fd3 100644 --- a/frontend/packages/core/src/pages/aiSetting/components/ServiceCardNode.tsx +++ b/frontend/packages/core/src/pages/aiSetting/components/ServiceCardNode.tsx @@ -5,7 +5,7 @@ import React from 'react' export const ServiceCardNode: React.FC = () => { return (
diff --git a/frontend/packages/core/src/pages/aiSetting/constants.ts b/frontend/packages/core/src/pages/aiSetting/constants.ts index 28a874dc..5b67c973 100644 --- a/frontend/packages/core/src/pages/aiSetting/constants.ts +++ b/frontend/packages/core/src/pages/aiSetting/constants.ts @@ -3,5 +3,5 @@ export const LAYOUT = { NODE_START_Y: 50, NODE_GAP: 120, MODEL_NODE_X: 500, - KEY_NODE_X: 850, + KEY_NODE_X: 900, } as const; diff --git a/frontend/packages/core/src/pages/aiSetting/styles.css b/frontend/packages/core/src/pages/aiSetting/styles.css index eac93238..e12ed580 100644 --- a/frontend/packages/core/src/pages/aiSetting/styles.css +++ b/frontend/packages/core/src/pages/aiSetting/styles.css @@ -6,39 +6,6 @@ width: auto; max-width: 100%; } -.react-flow__edge-path { - stroke: var(--primary-color); - stroke-width: 2; -} - -.react-flow__edge-text { - font-size: 12px; - fill: #666; -} - -.react-flow__controls { - box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); - border: 1px solid #ededed; -} - -.react-flow__controls-button { - border: none; - background: white; - border-bottom: 1px solid #ededed; - box-sizing: content-box; - display: flex; - justify-content: center; - align-items: center; - width: 16px; - height: 16px; - cursor: pointer; - user-select: none; - padding: 5px; -} - -.react-flow__controls-button:hover { - background: #f8f8f8; -} /* Custom Node Styles */ .custom-node {