资产浏览

src/view/Manage/AssetBrowse/Component/Relation.jsx

@@ -19,7 +19,7 @@ class Relation extends React.Component {
   // }
 
   componentDidUpdate(prevProps, prevState) {
-    const { data, onClick } = this.props;
+    const { data, onCenterClick, onExpandClick } = this.props;
 
     if (data) {
 
@@ -27,7 +27,7 @@ class Relation extends React.Component {
         const newData = JSON.parse(JSON.stringify(data));
 
         this.graph?.destroy();
-        this.graph = init(this)(this.elem, newData, onClick);
+        this.graph = init(this)(this.elem, newData, onCenterClick, onExpandClick);
       } 
     }
     
@@ -45,7 +45,7 @@ class Relation extends React.Component {
 
 export default Relation;
 
-const init = (ctx) => function (container, data, onClick) {
+const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
   const width = container.scrollWidth;
   const height = container.scrollHeight;
 
@@ -70,7 +70,12 @@ const init = (ctx) => function (container, data, onClick) {
         y: 0,
       });
 
-      view.data([]);
+      const data = [
+        { type: 'expand', value: 50 },
+        { type: 'center', value: 50 }
+      ];
+
+      view.data(data);
 
       view.coordinate('theta', {
         radius: 1.0,
@@ -92,7 +97,12 @@ const init = (ctx) => function (container, data, onClick) {
 
       view.on('element:click', evt => {
         const { data } = evt;
-        onClick && onClick(data?.data?.type, cfg.id);
+
+        if (data?.data?.type === 'center') {
+          onCenterClick && onCenterClick(cfg.id);
+        } else if (data?.data?.type === 'expand') {
+          onExpandClick && onExpandClick(cfg.id);
+        }
       })
      
       view.render();
@@ -120,7 +130,7 @@ const init = (ctx) => function (container, data, onClick) {
           cursor: 'pointer',
           img: actionImg,
         },
-        name: 'next-icon',
+        name: 'expand-icon',
       });
 
       imageShape1.hide();
@@ -153,36 +163,46 @@ const init = (ctx) => function (container, data, onClick) {
           fill: "#fff",
           cursor: 'pointer',
         },
+        name: 'text',
         draggable: true
       });
 
       return keyShape;
     },
+    afterDraw: (cfg, group) => {
+      const pathShape1 = group.get('children')[1];
+      const pathShape2 = group.get('children')[2];
+      const pathShape3 = group.get('children')[3];
+
+      pathShape1?.hide();
+      pathShape2?.hide();
+      pathShape3?.hide();
+    },
     setState(name, value, item) {
       const group = item.getContainer();
 
       const keyShape = group.get('children')[0];
-
+      const pathShape1 = group.get('children')[1];
+      const pathShape2 = group.get('children')[2];
+      const pathShape3 = group.get('children')[3];
       const imageShape1 = group.get('children')[4];
       const imageShape2 = group.get('children')[5];
 
       if (name === 'active') {
         if (value) {
           keyShape?.attr('fill', '#fff');
-          const view = keyShape.get('intervalView');
-
-          const data = [
-            { type: 'center', value: 50 },
-            { type: 'next', value: 50 }
-          ];
 
-          view?.changeData(data);
+          pathShape1?.show();
+          pathShape2?.show();
+          pathShape3?.show();
           imageShape1?.show();
           imageShape2?.show();
         } else {
           keyShape?.attr('fill', null);
-          const view = keyShape?.get('intervalView');
-          view?.changeData([]);
+            
+          pathShape1?.hide();
+          pathShape2?.hide();
+          pathShape3?.hide();
           imageShape1?.hide();
           imageShape2?.hide();
         }
@@ -245,7 +265,7 @@ const init = (ctx) => function (container, data, onClick) {
 
   graph.node(function (node) {
     return {
-      label: fittingString(node.id||'', innerRaduis*2-4.0, textFontSize),
+      label: fittingString(node.text||'', innerRaduis*2-4.0, textFontSize),
     };
   });
 
@@ -273,17 +293,15 @@ const init = (ctx) => function (container, data, onClick) {
   });
 
   graph.on('node:click', function(e) {
-
+    const item = e.item;
+    const model = item?.getModel();
+   
+    console.log('e.target?.cfg?.name', e.target?.cfg?.name);
     if (e.target?.cfg?.name === 'center-icon') {
-
-    } else {
-
+      onCenterClick && onCenterClick(model?.id);
+    } else if (e.target?.cfg?.name==='expand-icon' || e.target?.cfg?.name==='innnerCircle' || e.target?.cfg?.name==='text') {
+      onExpandClick && onExpandClick(model?.id);
     }
-
-    // const item = e.item;
-    // const model = item.getModel();
-
-    // onClick && onClick(model);
   })
 
   function clearAllStats() {

src/view/Manage/AssetBrowse/Component/RelationContainer.jsx

 import { useEffect, useState } from 'react';
 
+import { dispatch } from '../../../../model';
+
 import Relation from './Relation';
 
-const data = {
-  "id": "Modeling Methods",
-  "children": [
-    {
-      "id": "Classification",
-      "children": [
-        { "id": "Logistic regression" },
-        { "id": "Linear discriminant analysis" },
-        { "id": "Rules" },
-        { "id": "Decision trees" },
-        { "id": "Naive Bayes" },
-        { "id": "K nearest neighbor" },
-        { "id": "Probabilistic neural network" },
-        { "id": "Support vector machine" }
-      ]
-    },
-    {
-      "id": "Consensus",
-      "children": [
-        {
-          "id": "Models diversity",
-          "children": [
-            { "id": "Different initializations" },
-            { "id": "Different parameter choices" },
-            { "id": "Different architectures" },
-            { "id": "Different modeling methods" },
-            { "id": "Different training sets" },
-            { "id": "Different feature sets" }
-          ]
-        },
-        {
-          "id": "Methods",
-          "children": [
-            { "id": "Classifier selection" },
-            { "id": "Classifier fusion" }
-          ]
-        },
-        {
-          "id": "Common",
-          "children": [
-            { "id": "Bagging" },
-            { "id": "Boosting" },
-            { "id": "AdaBoost" }
-          ]
-        }
-      ]
-    },
-    {
-      "id": "Regression",
-      "children": [
-        { "id": "Multiple linear regression" },
-        { "id": "Partial least squares" },
-        { "id": "Multi-layer feedforward neural network" },
-        { "id": "General regression neural network" },
-        { "id": "Support vector regression" }
-      ]
-    }
-  ]
-};
+const RelationContainer = (props) => {
 
-function App() {
+  const { nodeParams, onChange } = props;
 
+  const [ dirs, setDirs ] = useState([]);
   const [ nodes, setNodes ] = useState([]);
+  const [ relationData, setRelationData ] = useState(null); 
+
+  useEffect(() => {
+    getDirectoryData();
+  }, [])
 
-  const [ relationParams, setRelationParams ] = useState({ relationData: {}, reload: false });
-  const { relationData, reload } = relationParams; 
+  useEffect(() => {
+    generateNodes();
+  }, [dirs])
 
   useEffect(() => {
-    let newNodes = [{ id: data.id, pid: '', levelId: '0', simple: false, show: true }];
-    
-    function recursion(subData, parentId, parentLevelId) {
-      // if (parentLevelId.split('-').length > 2) return; 
+    generateRelationData();
+  }, [nodeParams])
+
+  const getDirectoryData = () => {
+    dispatch({
+      type: 'assetmanage.queryAllDirectoryAsTree',
+      callback: data => {
+        let newDirs = [...data];
+        newDirs = (newDirs||[]).filter(item => item.type!=='custom');
+
+        setDirs(newDirs);
+      }
+    });
+  }
 
-      (subData||[]).forEach((item, index) => {
-        let currentLevelId = `${parentLevelId}-${index}`;
-        newNodes.push({ id: item.id, pid: parentId, levelId: currentLevelId, simple: (currentLevelId.split('-').length>=3)?true: false, show: (currentLevelId.split('-').length>3)?false:true });
+  const generateNodes = () => {
+    let newNodes = [];
+    
+    function recursion(data, parentId, parentLevelId) {
+      (data||[]).forEach((item, index) => {
+        let currentLevelId = (parentLevelId)?`${parentLevelId}-${index}`:`${index}`;
+        newNodes.push({ id: item.nodeId, pid: parentId, levelId: currentLevelId, simple: (currentLevelId.split('-').length>=3)?true: false, show: (currentLevelId.split('-').length>3)?false:true, text: item.text });
 
-        recursion(item.children, item.id, currentLevelId);
+        recursion(item.children, item.nodeId, currentLevelId);
       })
     }
 
-    recursion(data.children, data.id, '0');
-
+    recursion(dirs, null, null);
+    
     setNodes(newNodes);
+
     generateRelationData(newNodes);
-  }, [])
+  }
+
+  const generateRelationData = (data = nodes) => {
+    if ((nodeParams?.expandId||'') !== '') {
+      generateExpandNodeRelationData(data);
+    } else if ((nodeParams?.centerId||'') !== '') {
+      generateCenterNodeRelationData(data);
+    } else {
+      setRelationData(null);
+    }
+  }
+
+  const generateCenterNodeRelationData = (data = nodes) => {
+    if ((data||[]).length===0) {
+      setRelationData(null);
+      return;
+    }
 
-  const generateRelationData = (nodes, reload=true) => {
-    const rootNode = nodes[0];
-    let newRelationData = {...rootNode, children: []};
+    const index = (data||[]).findIndex(node => node.id === nodeParams?.centerId);
+    if (index !== -1) {
+      const rootNode = data[index];
+      let newRelationData = {...rootNode, children: []};
 
-    function recursion(subData, parentId) {
-      (nodes||[]).forEach(node => {
-        if (!node.show) return;
+      function recursion(subData, parentId) {
 
-        if (node.pid === parentId) {
+        (data||[]).forEach(node => {
+          if (!node.show) return;
 
-          let newNode = { ...node, children: [] };
+          if (node.pid === parentId) {
 
-          (subData||[]).push(newNode);
-          recursion(newNode.children, newNode.id);
-        }
-      })
-    }
+            let newNode = { ...node, children: [] };
 
-    recursion(newRelationData.children, rootNode.id);
+            (subData||[]).push(newNode);
+            recursion(newNode.children, newNode.id);
+          }
+        })
+      }
+
+      recursion(newRelationData.children, rootNode.id);
 
-    setRelationParams({ relationData: newRelationData, reload });
+      setRelationData(newRelationData);
+    }
   }
 
-  const onClick = (type, id) => {
-    // console.log('type', type);
-    // console.log('id', id);
+  const generateExpandNodeRelationData = (data = nodes) => {
+    if ((data||[]).length===0) {
+      setRelationData(null);
+      return;
+    }
 
-    const index = (nodes||[]).findIndex((node) => node.id === id);
+    const index = (data||[]).findIndex((node) => node.id === nodeParams?.expandId);
     if (index !== -1) {
-      const currentNode = nodes[index];
+      const currentNode = data[index];
 
-      (nodes||[]).forEach(node => {
+      (data||[]).forEach(node => {
         if (((node.levelId.split('-').length===currentNode.levelId.split('-').length+1)||(node.levelId.split('-').length===currentNode.levelId.split('-').length+2)) && node.levelId.slice(0, currentNode.levelId.length)===currentNode.levelId) {
           node.show = true;
         }
 
         if (node.levelId.split('-').length >2) {
           if (node.levelId.split('-').length<=currentNode.levelId.split('-').length) {
-            node.simple = !(currentNode.levelId.slice(0, node.levelId.length)===node.levelId);
+            node.simple = (currentNode.levelId.slice(0, node.levelId.length)!==node.levelId);
           } else if (node.levelId.split('-').length===currentNode.levelId.split('-').length+1) {
-            node.simple = !(node.levelId.slice(0, currentNode.levelId.length)===currentNode.levelId);
+            node.simple = (node.levelId.slice(0, currentNode.levelId.length)!==currentNode.levelId);
           } else if (node.levelId.slice(0, currentNode.levelId.length)!==currentNode.levelId) {
             node.simple = true;
           }
         }
       })
 
-      setNodes(nodes);
-      generateRelationData(nodes, false);
+      setNodes(data);
+      generateCenterNodeRelationData(data);
     }
   }
 
+  const onCenterClick = (id) => {
+    onChange && onChange({centerId: id, expandId: ''});
+  }
+
+  const onExpandClick = (id) => {
+    onChange && onChange({...nodeParams, expandId: id});
+  }
+
   return (
     <div style={{ width: '100%', height: '100%' }}>
-      <Relation data={relationData} reload={reload} onClick={onClick} />
+      <Relation data={relationData} onCenterClick={onCenterClick} onExpandClick={onExpandClick} />
     </div>
   );
 }
 
-export default App;
+export default RelationContainer;

src/view/Manage/AssetBrowse/index.jsx

@@ -13,17 +13,23 @@ import './index.less';
 
 const AssetBrowse = (props) => {
 
-  const [ nodeId, setNodeId ] = useState(''); 
+  const [ nodeParams, setNodeParams ] = useState({ centerId: '', expandId: '' });
   const [ expandTree, setExpandTree ] = useState(true);
 
+  const { nodeId, expandId } = nodeParams;
+
   const onTreeSelect = (value, type) => {
-    setNodeId(value||'');
+    setNodeParams({ centerId: value||'', expandId: '' });
   }
 
   const treeToggleClick = () => {
     setExpandTree(!expandTree);
   }
 
+  const onRelationChange = (data) => {
+    setNodeParams(data);
+  }
+
   const classes = classNames('asset-browse', {
     'asset-browse-collapse': !expandTree
   });  
@@ -41,7 +47,7 @@ const AssetBrowse = (props) => {
       <div className='right'>
         <Row>
           <Col span={12}>
-            <RelationContainer />
+            <RelationContainer nodeParams={nodeParams} onChange={onRelationChange} />
           </Col>
           <Col span={12}>
             <AssetTable nodeId={nodeId} reference={AssetBrowseReference} {...props} />