feat: 模型演化添加数据集legend
This commit is contained in:
parent
41a684806e
commit
6c6b89dd24
|
@ -1,19 +1,19 @@
|
|||
import { Flex } from 'antd';
|
||||
import styles from './index.less';
|
||||
|
||||
type GraphLegandData = {
|
||||
type GraphLegendData = {
|
||||
name: string;
|
||||
color: string;
|
||||
radius: number;
|
||||
radius: number | string;
|
||||
fill: boolean;
|
||||
};
|
||||
|
||||
type GraphLegandProps = {
|
||||
type GraphLegendProps = {
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
function GraphLegand({ style }: GraphLegandProps) {
|
||||
const legends: GraphLegandData[] = [
|
||||
function GraphLegend({ style }: GraphLegendProps) {
|
||||
const legends: GraphLegendData[] = [
|
||||
{
|
||||
name: '父模型',
|
||||
color: 'linear-gradient(305deg,#43c9b1 0%,#93dfd1 100%)',
|
||||
|
@ -32,6 +32,24 @@ function GraphLegand({ style }: GraphLegandProps) {
|
|||
radius: 2,
|
||||
fill: true,
|
||||
},
|
||||
{
|
||||
name: '训练数据集',
|
||||
color: '#a5d878',
|
||||
radius: '50%',
|
||||
fill: true,
|
||||
},
|
||||
{
|
||||
name: '测试数据集',
|
||||
color: '#d8b578',
|
||||
radius: '50%',
|
||||
fill: true,
|
||||
},
|
||||
{
|
||||
name: '项目',
|
||||
color: 'linear-gradient(305deg,#8981ff 0%,#b3a9ff 100%)',
|
||||
radius: 6,
|
||||
fill: true,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Flex align="center" className={styles['graph-legend']} style={style}>
|
||||
|
@ -52,4 +70,4 @@ function GraphLegand({ style }: GraphLegandProps) {
|
|||
);
|
||||
}
|
||||
|
||||
export default GraphLegand;
|
||||
export default GraphLegend;
|
|
@ -8,7 +8,7 @@ import G6, { G6GraphEvent, Graph, Item } from '@antv/g6';
|
|||
import { ResourceInfoTabKeys } from '@/pages/Dataset/components/ResourceIntro';
|
||||
import { Flex, Select } from 'antd';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import GraphLegand from '../GraphLegand';
|
||||
import GraphLegend from '../GraphLegend';
|
||||
import NodeTooltips from '../NodeTooltips';
|
||||
import styles from './index.less';
|
||||
import type { ModelDepsData, ProjectDependency, TrainDataset } from './utils';
|
||||
|
@ -41,16 +41,16 @@ function ModelEvolution({
|
|||
|
||||
useEffect(() => {
|
||||
initGraph();
|
||||
const changSize = () => {
|
||||
const changeSize = () => {
|
||||
if (!graph || graph.get('destroyed')) return;
|
||||
if (!graphRef.current) return;
|
||||
graph.changeSize(graphRef.current.clientWidth, graphRef.current.clientHeight);
|
||||
graph.fitView();
|
||||
};
|
||||
|
||||
window.addEventListener('resize', changSize);
|
||||
window.addEventListener('resize', changeSize);
|
||||
return () => {
|
||||
window.removeEventListener('resize', changSize);
|
||||
window.removeEventListener('resize', changeSize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
@ -158,7 +158,7 @@ function ModelEvolution({
|
|||
|
||||
setHoverNodeData(model);
|
||||
setNodeToolTipX(point.x + offsetX);
|
||||
// 92: 版本选择器的高度,296: tooltip的高度
|
||||
// 92: 版本选择器的高度,296: tooltip 的高度
|
||||
setNodeToolTipY(point.y + 92 - 296 - offsetY);
|
||||
setShowNodeTooltip(true);
|
||||
});
|
||||
|
@ -258,7 +258,7 @@ function ModelEvolution({
|
|||
onChange={onVersionChange}
|
||||
options={versionList}
|
||||
/>
|
||||
<GraphLegand style={{ marginRight: 0, marginLeft: 'auto' }}></GraphLegand>
|
||||
<GraphLegend style={{ marginRight: 0, marginLeft: 'auto' }}></GraphLegend>
|
||||
</Flex>
|
||||
<div className={styles['model-evolution__graph']} id="canvas" ref={graphRef}></div>
|
||||
{(showNodeTooltip || enterTooltip) && (
|
||||
|
|
|
@ -92,9 +92,9 @@ export function normalizeChildren(data: ModelDepsData[]) {
|
|||
}
|
||||
|
||||
// 获取 label
|
||||
export function getLabel(node: { current_model_name: string; version: string }) {
|
||||
export function getLabel(node: ModelDepsData | ModelDepsAPIData) {
|
||||
return (
|
||||
fittingString(`${node.current_model_name}`, nodeWidth - 12, 8) +
|
||||
fittingString(`${node.model_version_dependcy_vo.name ?? ''}`, nodeWidth - 12, 8) +
|
||||
'\n' +
|
||||
fittingString(`${node.version}`, nodeWidth - 12, 8)
|
||||
);
|
||||
|
@ -144,10 +144,7 @@ export function normalizeTreeData(
|
|||
normalizedData.model_type = NodeType.current;
|
||||
normalizedData.current_model_name = currentNodeName;
|
||||
normalizedData.id = `$M_${normalizedData.current_model_id}_${normalizedData.version}`;
|
||||
normalizedData.label = getLabel({
|
||||
current_model_name: currentNodeName,
|
||||
version: normalizedData.version,
|
||||
});
|
||||
normalizedData.label = getLabel(normalizedData);
|
||||
normalizedData.style = getStyle(NodeType.current);
|
||||
// let first1 = { ...normalizedData.children[0] };
|
||||
// let first2 = { ...normalizedData.children[0] };
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
margin: 4px 0;
|
||||
color: @text-color;
|
||||
font-size: 14px;
|
||||
|
@ -43,14 +43,12 @@
|
|||
min-width: 0;
|
||||
color: @text-color;
|
||||
font-weight: 500;
|
||||
.singleLine();
|
||||
}
|
||||
|
||||
&__link {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-weight: 500;
|
||||
.singleLine();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -68,7 +68,9 @@ function NodeTooltips({ data, x, y, onMouseEnter, onMouseLeave }: NodeTooltipsPr
|
|||
<a className={styles['node-tooltips__row__link']} onClick={gotoExperimentPage}>
|
||||
{data.train_task?.name}
|
||||
</a>
|
||||
) : null}
|
||||
) : (
|
||||
'--'
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue