提交 5b116181 编写于 作者: P ph

fix issue

上级 64516265
......@@ -21,7 +21,7 @@ limitations under the License.
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>/static/img/favicon.ico" />
<link rel="icon" href="<%= BASE_URL %>/static/img/favicon.png" />
<title>MindInsight</title>
<style>
.errorInfo {
......
......@@ -96,4 +96,14 @@ export default {
'.edge.highlighted path {stroke: red;}.edge.highlighted polygon {' +
'stroke: red;fill: red;}' +
'.edge.highlighted marker path {fill: red;}</style>',
dataMapDownloadStyle: '<style> #graph0 > polygon { fill: transparent; }' +
'.node, .cluster { cursor: pointer; }' +
'.selected { polygon, ellipse { stroke: red !important; stroke-width: 2px; } }' +
'.CreatDataset > polygon, .Operator > ellipse { stroke: #58a4e0; fill: #d1ebff; }' +
'.cluster > polygon { fill: #c1f5d5; stroke: #56b077; }' +
'.RepeatDataset > polygon { stroke: #fdca5a; fill: #fff2d4; }' +
'.ShuffleDataset > polygon { stroke: #f79666; fill: #fed78e; }' +
'.BatchDataset > polygon { stroke: #fa8e5a; fill: #ffcfb8; }' +
'.edge { path { stroke: rgb(167, 167, 167); }' +
'polygon { fill: rgb(167, 167, 167); stroke: rgb(167, 167, 167); } }</style>',
};
......@@ -99,6 +99,7 @@ export default {
multiSelectedItemNames: {}, // Dictionary for storing the name of the selected tags.
operateSelectAll: true, // Indicates whether to select all tags.
perSelectItemMarginBottom: 1, // Outer margin of the bottom of each selection box.
searching: false,
};
},
computed: {},
......@@ -156,11 +157,13 @@ export default {
* Tag Filter
*/
listFilter() {
this.searching = true;
if (this.searchInputTimer) {
clearTimeout(this.searchInputTimer);
this.searchInputTimer = null;
}
this.searchInputTimer = setTimeout(() => {
this.searching = false;
let reg;
try {
reg = new RegExp(this.searchInput);
......@@ -234,6 +237,9 @@ export default {
* @return {Object} Dictionary containing selected tags
*/
updateSelectedDic() {
if (this.searching) {
return this.multiSelectedItemNames;
}
let reg;
try {
reg = new RegExp(this.searchInput);
......
......@@ -49,6 +49,9 @@ limitations under the License.
<div :title="$t('graph.fitScreen')"
class="fit-screen"
@click="fit()"></div>
<div :title="$t('graph.downloadPic')"
class="download-button"
@click="downLoadSVG"></div>
</div>
<!-- Right column -->
<div id="sidebar"
......@@ -141,6 +144,7 @@ limitations under the License.
<script>
import RequestService from '../../services/request-service';
import CommonProperty from '@/common/common-property.js';
import {select, selectAll, zoom} from 'd3';
import 'd3-graphviz';
const d3 = {select, selectAll, zoom};
......@@ -510,6 +514,27 @@ export default {
const str = `translate(${-box.x},${-box.y}) scale(1)`;
graphDom.setAttribute('transform', str);
},
/**
* Download svg
*/
downLoadSVG() {
const svgXml = document.querySelector('#graph #graph0').innerHTML;
const bbox = document.getElementById('graph0').getBBox();
const viewBoxSize = `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`;
const encodeStr =
`<svg xmlns="http://www.w3.org/2000/svg" ` +
`xmlns:xlink="http://www.w3.org/1999/xlink" ` +
`width="${bbox.width}" height="${bbox.height}" ` +
`viewBox="${viewBoxSize}">${CommonProperty.graphDownloadStyle}<g>${svgXml}</g></svg>`;
// Write the svg stream encoded by base64 to the image object.
const src = `data:image/svg+xml;base64,
${window.btoa(unescape(encodeURIComponent(encodeStr)))}`;
const a = document.createElement('a');
a.href = src; // Export the information in the canvas as image data.
a.download = 'dataMap'; // Set the download name.
a.click(); // Click to trigger download.
},
/**
* Collapse on the right
*/
......@@ -624,7 +649,7 @@ 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');
}
......@@ -634,11 +659,24 @@ export default {
height: 14px;
right: 32px;
top: 10px;
z-index:999;
z-index: 999;
cursor: pointer;
display: inline-block;
background-image: url('../../assets/images/fit.png');
}
.download-button {
position: absolute;
width: 16px;
height: 14px;
right: 54px;
top: 10px;
z-index: 999;
cursor: pointer;
display: inline-block;
background-image: url('../../assets/images/download.png');
background-size: 14px 14px;
background-repeat: no-repeat;
}
}
}
.cl-data-map.full-screen {
......
......@@ -755,7 +755,7 @@ export default {
}</td><td style="text-align:center;">${hoveredItem.step}</td><td>${(
hoveredItem.relative_time / 1000
).toFixed(3)}${unit}</td><td>${this.dealrelativeTime(
new Date(hoveredItem.wall_time).toString(),
new Date(hoveredItem.wall_time * 1000).toString(),
)}</td>`;
const dom = document.querySelector('#tipTr');
dom.innerHTML = htmlStr;
......@@ -1230,7 +1230,7 @@ export default {
if (filter.length) {
if (this.curAxisName === 2) {
data = sampleObject.fullScreen
? this.dealrelativeTime(new Date(filter[0].wall_time).toString())
? this.dealrelativeTime(new Date(filter[0].wall_time * 1000).toString())
: [];
} else if (this.curAxisName === 1) {
data = `${(filter[0].relative_time / 3600).toFixed(3)}h`;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册