提交 64516265 编写于 作者: M mindspore-ci-bot 提交者: Gitee

!87 fix histogram tip issue and support fitting screen for data-map graph

Merge pull request !87 from 潘慧/r0.2
......@@ -45,8 +45,8 @@
"learningRate": "学习率",
"modelSize": "模型大小",
"dataProcess": "数据处理",
"noDataFound":"暂无满足筛选条件的数据",
"noDataTips":"请点击“显示全量数据”按钮查看全量数据",
"noDataFound": "暂无满足筛选条件的数据",
"noDataTips": "请点击“显示全量数据”按钮查看全量数据",
"userDefined": "自定义数据",
"metric": "度量指标",
"deviceNum": "device数目"
......@@ -56,8 +56,8 @@
"key": "KEY",
"value": "VALUE",
"dataTraceTips": "该数据涉及合并操作",
"noDataFound":"暂无满足筛选条件的数据",
"noDataTips":"请点击“显示全量数据”按钮查看全量数据"
"noDataFound": "暂无满足筛选条件的数据",
"noDataTips": "请点击“显示全量数据”按钮查看全量数据"
},
"trainingDashboard": {
"trainingDashboardTitle": "训练看板",
......@@ -66,7 +66,8 @@
"trainingScalar": "训练标量信息",
"samplingData": "数据抽样",
"imagesampleSwitch": "切换标签",
"invalidId": "无效的训练作业"
"invalidId": "无效的训练作业",
"summaryDirPath": "summary路径:"
},
"scalar": {
"titleText": "标量",
......@@ -120,6 +121,7 @@
"graph": {
"titleText": "计算图",
"downloadPic": "下载",
"fitScreen": "适应屏幕",
"nodeInfo": "节点信息",
"legend": "图例",
"nameSpace": "命名空间",
......
......@@ -46,6 +46,9 @@ limitations under the License.
<div :title="$t('graph.fullScreen')"
class="full-screen-button"
@click="fullScreen = !fullScreen"></div>
<div :title="$t('graph.fitScreen')"
class="fit-screen"
@click="fit()"></div>
</div>
<!-- Right column -->
<div id="sidebar"
......@@ -340,6 +343,7 @@ export default {
* Initialization method executed after the graph rendering is complete
*/
startApp() {
this.initZooming();
const nodes = d3.selectAll('g.node, g.cluster');
nodes.on('click', (target, index, nodesList) => {
this.selectNodeInfo(target);
......@@ -347,9 +351,109 @@ export default {
nodes.classed('selected', false);
d3.select(`g[id="${selectedNode.id}"]`).classed('selected', true);
});
d3.select('svg').on('dblclick.zoom', null);
},
/**
* Initializing the Zoom Function of a Graph
*/
initZooming() {
const graphDom = document.querySelector('#graph0');
const graphBox = graphDom.getBBox();
const padding = 4;
const pointer = {
start: {
x: 0,
y: 0,
},
end: {
x: 0,
y: 0,
},
};
const zoom = d3
.zoom()
.on('start', (target) => {
pointer.start.x = event.x;
pointer.start.y = event.y;
})
.on('zoom', (target) => {
const transformData = this.getTransformData(graphDom);
let tempStr = '';
let change = {};
let scale = transformData.scale[0];
const graphRect = graphDom.getBoundingClientRect();
const mapping = {
width: graphBox.width / graphRect.width,
height: graphBox.height / graphRect.height,
};
if (event.type === 'mousemove') {
pointer.end.x = event.x;
pointer.end.y = event.y;
change = {
x: (pointer.end.x - pointer.start.x) * mapping.width * scale,
y: (pointer.end.y - pointer.start.y) * mapping.height * scale,
};
pointer.start.x = pointer.end.x;
pointer.start.y = pointer.end.y;
} else if (event.type === 'wheel') {
const wheelDelta = event.wheelDelta;
const rate = Math.abs(wheelDelta / 100);
scale =
wheelDelta > 0
? transformData.scale[0] * rate
: transformData.scale[0] / rate;
scale = Math.max(this.scaleRange[0], scale);
scale = Math.min(this.scaleRange[1], scale);
change = {
x:
(graphRect.x + padding / mapping.width - event.x) *
mapping.width *
(scale - transformData.scale[0]),
y:
(graphRect.bottom - padding / mapping.height - event.y) *
mapping.height *
(scale - transformData.scale[0]),
};
}
tempStr = `translate(${transformData.translate[0] +
change.x},${transformData.translate[1] +
change.y}) scale(${scale})`;
graphDom.setAttribute('transform', tempStr);
});
const svg = d3.select('svg');
svg.on('.zoom', null);
svg.call(zoom);
svg.on('dblclick.zoom', null);
},
/**
* Obtains the transform data of a node.
* @param {Object} node Node dom data
* @return {Object} transform data of a node
*/
getTransformData(node) {
if (!node) {
return [];
}
const transformData = node.getAttribute('transform');
const attrObj = {};
if (transformData) {
const lists = transformData.trim().split(' ');
lists.forEach((item) => {
const index1 = item.indexOf('(');
const index2 = item.indexOf(')');
const name = item.substring(0, index1);
const params = item
.substring(index1 + 1, index2)
.split(',')
.map((i) => {
return parseFloat(i) || 0;
});
attrObj[name] = params;
});
}
return attrObj;
},
/**
* Process the selected node information.
* @param {Object} target Selected Object
......@@ -397,6 +501,15 @@ export default {
});
}
},
/**
* Adapt to the screen
*/
fit() {
const graphDom = document.getElementById('graph0');
const box = graphDom.getBBox();
const str = `translate(${-box.x},${-box.y}) scale(1)`;
graphDom.setAttribute('transform', str);
},
/**
* Collapse on the right
*/
......@@ -511,10 +624,21 @@ export default {
cursor: pointer;
width: 12px;
height: 12px;
z-index: 999;
z-index:999;
display: inline-block;
background-image: url('../../assets/images/full-screen.png');
}
.fit-screen {
position: absolute;
width: 16px;
height: 14px;
right: 32px;
top: 10px;
z-index:999;
cursor: pointer;
display: inline-block;
background-image: url('../../assets/images/fit.png');
}
}
}
.cl-data-map.full-screen {
......
......@@ -1010,6 +1010,10 @@ export default {
source = node.name;
for (let i = 0; i < Math.min(5, keys.length); i++) {
target = keys[i];
isConst = !!(
this.allGraphData[keys[i]] &&
this.allGraphData[keys[i]].type === 'Const'
);
const nodeStr = isConst
? `shape="circle";width="0.14";height="0.14";fixedsize=true;` +
`label="${target.split('/').pop()}\n\n\n";`
......
......@@ -138,6 +138,8 @@ export default {
zrDrawElement: {hoverDots: []},
chartTipFlag: false,
charResizeTimer: null,
changeAxisTimer: null,
changeViewTimer: null,
};
},
computed: {
......@@ -394,19 +396,29 @@ export default {
* @param {Number} val Current mode
*/
timeTypeChange(val) {
this.curPageArr.forEach((item) => {
this.updateSampleData(item);
});
if (this.changeAxisTimer) {
clearTimeout(this.changeAxisTimer);
}
this.changeAxisTimer = setTimeout(() => {
this.curPageArr.forEach((item) => {
this.updateSampleData(item);
});
}, 500);
},
/**
* The view display type is changed
* @param {Number} val Current mode
*/
viewTypeChange(val) {
this.curPageArr.forEach((item) => {
this.formatDataToChar(item);
this.updateSampleData(item);
});
if (this.changeViewTimer) {
clearTimeout(this.changeViewTimer);
}
this.changeViewTimer = setTimeout(() => {
this.curPageArr.forEach((item) => {
this.formatDataToChar(item);
this.updateSampleData(item);
});
}, 200);
},
/**
* Update the data list based on the filtered tags
......@@ -996,7 +1008,9 @@ export default {
const z = this.getValue(rawData, dataIndex, i++);
const pt = getCoord([x, y], sampleObject);
// linear map in z axis
pt[1] -= ((z - minZ) / (maxZ - minZ)) * yValueMapHeight;
if (maxZ !== minZ) {
pt[1] -= ((z - minZ) / (maxZ - minZ)) * yValueMapHeight;
}
points.push(pt);
}
return points;
......
......@@ -21,6 +21,12 @@ limitations under the License.
<div class="cl-dashboard-top-title">
{{$t('trainingDashboard.trainingDashboardTitle')}}
</div>
<div class="path-message">
<span>{{$t('symbols.leftbracket')}}</span>
<span>{{$t('trainingDashboard.summaryDirPath')}}</span>
<span>{{summaryPath}}</span>
<span>{{$t('symbols.rightbracket')}}</span>
</div>
</div>
<div class="cl-dashboard-center">
<div class="cl-dashboard-con-up"
......@@ -166,6 +172,7 @@ export default {
return {
// training job id
trainingJobId: '',
summaryPath: '',
defColorCount: CommonProperty.commonColorArr.length, // default color
colorNum: 0,
charObj: null,
......@@ -284,6 +291,7 @@ export default {
init() {
if (this.$route.query && this.$route.query.id) {
this.trainingJobId = this.$route.query.id;
this.summaryPath = decodeURIComponent(this.trainingJobId);
} else {
this.trainingJobId = '';
this.$message.error(this.$t('trainingDashboard.invalidId'));
......@@ -1720,6 +1728,12 @@ export default {
height: 56px;
vertical-align: middle;
background: #ffffff;
.path-message {
display: inline-block;
line-height: 20px;
padding: 18px 16px;
font-weight: bold;
}
.cl-dashboard-top-title {
float: left;
color: #000000;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册