Skip to content

S
szse
Commit 9cf34768 by zhaochengxiang
Options

资产浏览

parent 920fa8c1
Showing with 135 additions and 116 deletions
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" }
]
}
]
};
function App() {
const RelationContainer = (props) => {
const { nodeParams, onChange } = props;
const [ dirs, setDirs ] = useState([]);
const [ nodes, setNodes ] = useState([]);
const [ relationData, setRelationData ] = useState(null);
const [ relationParams, setRelationParams ] = useState({ relationData: {}, reload: false });
const { relationData, reload } = relationParams;
useEffect(() => {
getDirectoryData();
}, [])
useEffect(() => {
let newNodes = [{ id: data.id, pid: '', levelId: '0', simple: false, show: true }];
generateNodes();
}, [dirs])
function recursion(subData, parentId, parentLevelId) {
// if (parentLevelId.split('-').length > 2) return;
useEffect(() => {
generateRelationData();
}, [nodeParams])
(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 getDirectoryData = () => {
dispatch({
type: 'assetmanage.queryAllDirectoryAsTree',
callback: data => {
let newDirs = [...data];
newDirs = (newDirs||[]).filter(item => item.type!=='custom');
recursion(item.children, item.id, currentLevelId);
setDirs(newDirs);
}
});
}
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.nodeId, currentLevelId);
})
}
recursion(data.children, data.id, '0');
recursion(dirs, null, null);
setNodes(newNodes);
generateRelationData(newNodes);
}, [])
}
const generateRelationData = (nodes, reload=true) => {
const rootNode = nodes[0];
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 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 => {
(data||[]).forEach(node => {
if (!node.show) return;
if (node.pid === parentId) {
......@@ -109,43 +93,54 @@ function App() {
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} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment