fix: 修改流水线和实验历史数据有蓝色边框的问题

react-ui/src/pages/Experiment/training/index.jsx

@@ -23,24 +23,12 @@ function ExperimentText() {
   const [paramsModalOpen, openParamsModal, closeParamsModal] = useVisible(false);
 
   const graphRef = useRef();
-  // const onDragEnd = (val) => {
-  //   console.log(val, 'eee');
-  //   const _x = val.x;
-  //   const _y = val.y;
-  //   const point = graph.getPointByClient(_x, _y);
-  //   let model = {};
-  //   // 元模型
-  //   model = {
-  //     ...val,
-  //     x: point.x,
-  //     y: point.y,
-  //     id: val.component_name + '-' + s8(),
-  //     isCluster: false,
-  //   };
-  //   graph.addItem('node', model, true);
-  // };
   const getGraphData = (data) => {
     if (graph) {
+      // 修改历史数据有蓝色边框的问题
+      data.nodes.forEach((item) => {
+        item.style.stroke = '#fff';
+      });
       graph.data(data);
       graph.render();
     } else {
@@ -166,8 +154,12 @@ function ExperimentText() {
       width: graphRef.current.clientWidth || 500,
       height: graphRef.current.clientHeight || 760,
       animate: false,
-      groupByTypes: false,
-      enabledStack: true,
+      groupByTypes: true,
+      enabledStack: false,
+      fitView: true,
+      minZoom: 0.5,
+      maxZoom: 5,
+      fitViewPadding: 300,
       modes: {
         default: [
           // config the shouldBegin for drag-node to avoid node moving while dragging on the anchor-point circles
@@ -181,15 +173,6 @@ function ExperimentText() {
           // config the shouldBegin and shouldEnd to make sure the create-edge is began and ended at anchor-point circles
           'drag-canvas',
           'zoom-canvas',
-          // 'brush-select',
-          'drag-combo',
-        ],
-        altSelect: [
-          {
-            type: 'brush-select',
-            trigger: 'drag',
-          },
-          'drag-node',
         ],
       },
 
@@ -232,15 +215,8 @@ function ExperimentText() {
           stroke: '#a2a6b5',
           radius: 1,
         },
-        nodeStateStyle: {
-          hover: {
-            opacity: 1,
-            stroke: '#8fe8ff',
-          },
-        },
         labelCfg: {
           autoRotate: true,
-          // refY: 10,
           style: {
             fontSize: 10,
             fill: '#FFF',
@@ -257,11 +233,6 @@ function ExperimentText() {
           cursor: 'pointer',
         },
       },
-      // linkCenter: true,
-      fitView: true,
-      minZoom: 0.5,
-      maxZoom: 5,
-      fitViewPadding: 300,
     });
     graph.on('node:click', (e) => {
       if (e.target.get('name') !== 'anchor-point' && e.item) {

react-ui/src/pages/Model/components/ModelEvolution/index.tsx

@@ -170,28 +170,32 @@ function ModelEvolution({
 
     graph.on('node:click', (e: G6GraphEvent) => {
       const nodeItem = e.item;
-      const model = nodeItem.getModel();
+      const model = nodeItem.getModel() as ModelDepsData | ProjectDependency | TrainDataset;
       const { model_type } = model;
       const { origin } = location;
       let url: string = '';
       switch (model_type) {
         case NodeType.children:
         case NodeType.parent: {
-          const { current_model_id, version } = model as ModelDepsData;
+          const { current_model_id, version } = model;
           url = `${origin}/dataset/model/${current_model_id}?tab=${ResourceInfoTabKeys.Evolution}&version=${version}`;
           break;
         }
         case NodeType.project: {
-          const { url: projectUrl } = model as ProjectDependency;
+          const { url: projectUrl } = model;
           url = projectUrl;
           break;
         }
         case NodeType.trainDataset:
         case NodeType.testDataset: {
-          const { dataset_id, dataset_version } = model as TrainDataset;
+          const { dataset_id, dataset_version } = model;
           url = `${origin}/dataset/dataset/${dataset_id}?tab=${ResourceInfoTabKeys.Version}&version=${dataset_version}`;
           break;
         }
+        case NodeType.current: {
+          // TODO: 隐藏数据集和项目
+          break;
+        }
         default:
           break;
       }

react-ui/src/pages/Model/components/ModelEvolution/utils.tsx

@@ -40,14 +40,14 @@ export interface TrainDataset extends NodeConfig {
   dataset_id: number;
   dataset_name: string;
   dataset_version: string;
-  model_type: NodeType;
+  model_type: NodeType.testDataset | NodeType.trainDataset;
 }
 
 export interface ProjectDependency extends NodeConfig {
   url: string;
   name: string;
   branch: string;
-  model_type: NodeType;
+  model_type: NodeType.project;
 }
 
 export type ModalDetail = {
@@ -65,7 +65,7 @@ export interface ModelDepsAPIData {
   current_model_id: number;
   version: string;
   exp_ins_id: number;
-  model_type: NodeType;
+  model_type: NodeType.children | NodeType.current | NodeType.parent;
   current_model_name: string;
   project_dependency: ProjectDependency;
   test_dataset: TrainDataset[];
@@ -242,7 +242,7 @@ const addDatasetDependency = (
       fittingString(node.dataset_version, ellipseWidth - labelPadding, nodeFontSize);
 
     const half = len / 2 - 0.5;
-    node.x = currentNode.x! - (half - index) * (ellipseWidth + hGap / 2);
+    node.x = currentNode.x! - (half - index) * (ellipseWidth + 20);
     node.y = currentNode.y! - nodeHeight - vGap;
     nodes.push(node);
     datasetNodes.push(node);
@@ -317,15 +317,13 @@ function adjustDatasetPosition(node: NodeConfig) {
   };
   const overlapRect = isChildrenOverlapDataset(datasetNodes, nodeRect);
   if (overlapRect) {
-    console.log(node);
-
     const adjustRect = {
       x: overlapRect.x - nodeWidth - hGap / 2,
       y: overlapRect.y,
       width: overlapRect.width,
       height: overlapRect.height,
     };
-    const lastNode = datasetNodes[datasetNodes.length - 1] as NodeConfig;
+    const lastNode = datasetNodes[datasetNodes.length - 1];
     const distance = lastNode.x! - adjustRect.x;
     datasetNodes.forEach((item) => {
       item.x = item.x! - distance;

react-ui/src/pages/Model/components/NodeTooltips/index.tsx

@@ -118,14 +118,18 @@ function ProjectInfo({ data }: { data: ProjectDependency }) {
 
 function NodeTooltips({ data, x, y, onMouseEnter, onMouseLeave }: NodeTooltipsProps) {
   if (!data) return null;
-  let Component;
+  let Component = null;
   const { model_type } = data;
   if (model_type === NodeType.testDataset || model_type === NodeType.trainDataset) {
-    Component = <DatasetInfo data={data as TrainDataset} />;
+    Component = <DatasetInfo data={data} />;
   } else if (model_type === NodeType.project) {
-    Component = <ProjectInfo data={data as ProjectDependency} />;
-  } else {
-    Component = <ModelInfo data={data as ModelDepsData} />;
+    Component = <ProjectInfo data={data} />;
+  } else if (
+    model_type === NodeType.children ||
+    model_type === NodeType.parent ||
+    model_type === NodeType.current
+  ) {
+    Component = <ModelInfo data={data} />;
   }
   return (
     <div

react-ui/src/pages/Pipeline/editPipeline/index.jsx

@@ -46,7 +46,7 @@ const EditPipeline = () => {
       id: val.component_name + '-' + s8(),
       isCluster: false,
     };
-    console.log('model', model);
+    // console.log('model', model);
     graph.addItem('node', model, true);
   };
   const formChange = (val) => {
@@ -110,6 +110,10 @@ const EditPipeline = () => {
   };
   const getGraphData = (data) => {
     if (graph) {
+      // 修改历史数据有蓝色边框的问题
+      data.nodes.forEach((item) => {
+        item.style.stroke = '#fff';
+      });
       graph.data(data);
       graph.render();
     } else {
@@ -407,10 +411,14 @@ const EditPipeline = () => {
       width: graphRef.current.clientWidth || 500,
       height: graphRef.current.clientHeight || '100%',
       animate: false,
-      groupByTypes: false,
+      groupByTypes: true,
       fitView: true,
       plugins: [contextMenu],
       enabledStack: true,
+      fitView: true,
+      minZoom: 0.5,
+      maxZoom: 5,
+      fitViewPadding: 300,
       modes: {
         default: [
           // config the shouldBegin for drag-node to avoid node moving while dragging on the anchor-point circles
@@ -450,22 +458,11 @@ const EditPipeline = () => {
           },
           'drag-canvas',
           'zoom-canvas',
-          // 'brush-select',
-          'drag-combo',
-        ],
-        altSelect: [
-          {
-            type: 'brush-select',
-            trigger: 'drag',
-          },
-          'drag-node',
         ],
       },
-
       defaultNode: {
         type: 'rect-node',
         size: [110, 36],
-
         labelCfg: {
           style: {
             fill: 'transparent',
@@ -489,7 +486,6 @@ const EditPipeline = () => {
       },
       defaultEdge: {
         //type: 'cubic-vertical',
-
         style: {
           endArrow: {
             // 设置终点箭头
@@ -503,15 +499,8 @@ const EditPipeline = () => {
           stroke: '#CDD0DC',
           radius: 1,
         },
-        nodeStateStyle: {
-          hover: {
-            opacity: 1,
-            stroke: '#8fe8ff',
-          },
-        },
         labelCfg: {
           autoRotate: true,
-          // refY: 10,
           style: {
             fontSize: 10,
             fill: '#FFF',
@@ -528,11 +517,6 @@ const EditPipeline = () => {
           cursor: 'pointer',
         },
       },
-      // linkCenter: true,
-      fitView: true,
-      minZoom: 0.5,
-      maxZoom: 5,
-      fitViewPadding: 300,
     });
     graph.on('node:click', (e) => {
       e.stopPropagation();