未验证 提交 0d77dd69 编写于 作者: D daminglu 提交者: GitHub

Polish for release (#378)

上级 747329e0
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
<div class="visual-dl-page-left"> <div class="visual-dl-page-left">
<ui-chart <ui-chart
:do-download="doDownload" :do-download="doDownload"
:cur-node="curNode"
@curNodeUpdated="curNode = $event" @curNodeUpdated="curNode = $event"
@triggerDownload="doDownload = $event" @triggerDownload="doDownload = $event"
/> />
......
...@@ -20,10 +20,7 @@ export default { ...@@ -20,10 +20,7 @@ export default {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
'curNode': { },
type: Object,
default: {},
}},
computed: {}, computed: {},
data() { data() {
return { return {
...@@ -95,9 +92,9 @@ export default { ...@@ -95,9 +92,9 @@ export default {
nodeKey, nodeKey,
{ {
label: buildInputNodeLabel(curInputNode), label: buildInputNodeLabel(curInputNode),
style: 'opacity: 0.1; ' +
'stroke-width: 3px; ',
class: 'input', class: 'input',
style: 'stroke: #A3D39C; stroke-width: 3px; ' +
'stroke-dasharray: 5, 5;',
labelStyle: 'font-size: 0.8em;', labelStyle: 'font-size: 0.8em;',
} }
...@@ -116,8 +113,11 @@ export default { ...@@ -116,8 +113,11 @@ export default {
nodeKey, nodeKey,
{ {
label: curOpLabel + ' '.repeat(Math.floor(curOpLabel.length/5)), label: curOpLabel + ' '.repeat(Math.floor(curOpLabel.length/5)),
shape: 'rect',
class: 'operator', class: 'operator',
style: 'opacity: 0.5;', style: 'stroke-width: 3px; ' +
'opacity: 0.1; ' +
'rx: 10; ry: 10; ',
} }
); );
...@@ -131,8 +131,8 @@ export default { ...@@ -131,8 +131,8 @@ export default {
{ {
label: outputNodeKey + outputPadding, label: outputNodeKey + outputPadding,
class: 'output', class: 'output',
style: 'opacity: 0.5;' + style: 'opacity: 0.1;' +
'stroke-width: 2px; ' + 'stroke-width: 3px; ' +
'stroke-dasharray: 5, 5;', 'stroke-dasharray: 5, 5;',
shape: 'diamond', shape: 'diamond',
...@@ -158,8 +158,8 @@ export default { ...@@ -158,8 +158,8 @@ export default {
svg.attr('viewBox', '0 0 ' + g.graph().width + ' ' + g.graph().height); svg.attr('viewBox', '0 0 ' + g.graph().width + ' ' + g.graph().height);
svg.selectAll('.node').on('click', function(d, i) { svg.selectAll('.node').on('click', function(d, i) {
chartScope.curNode = g.node(d); let curNode = g.node(d);
let nodeType = chartScope.curNode.class; let nodeType = curNode.class;
let nodeInfo = null; let nodeInfo = null;
if (nodeType === 'operator') { if (nodeType === 'operator') {
let opIndex = d.slice(7); // remove prefix "opNode_" let opIndex = d.slice(7); // remove prefix "opNode_"
...@@ -188,16 +188,15 @@ export default { ...@@ -188,16 +188,15 @@ export default {
.node ellipse .node ellipse
.node polygon .node polygon
stroke: #333 stroke: #333
fill: #fff stroke-color: #41b3a3
stroke-width: 1.5px stroke-width: 1.5px
.edgePath path.path .edgePath path.path
stroke: #333 stroke: #333
fill: none
stroke-width: 1.5px stroke-width: 1.5px
.operator .operator
fill: #41b3a3 fill: #008c99
.operator > rect .operator > rect
rx: 10; rx: 10;
...@@ -207,10 +206,10 @@ export default { ...@@ -207,10 +206,10 @@ export default {
cursor: pointer cursor: pointer
.output .output
fill: #c38d9e fill: #015249
.input .input
fill: #e8a87c fill: #6c648b
.visual-dl-graph-charts .visual-dl-graph-charts
width inherit width inherit
......
...@@ -66,6 +66,10 @@ export default { ...@@ -66,6 +66,10 @@ export default {
height 26px height 26px
.graph-config-upper .graph-config-upper
height 400px height 150px
.node-info
font-family 'Courier New', sans-serif
font-weight bold
</style> </style>
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script> <script type="text/javascript" src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
......
...@@ -125,7 +125,7 @@ const config = { ...@@ -125,7 +125,7 @@ const config = {
new ExtractTextPlugin({filename: '[name].css'}) new ExtractTextPlugin({filename: '[name].css'})
], ],
externals: { externals: {
dagreD3: 'dagre-d3' dagreD3: 'dagre-d3',
} }
}; };
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册