Skip to content

Commit

Permalink
Merge pull request #53 from BingBlog/develop
Browse files Browse the repository at this point in the history
  • Loading branch information
@Superjomn
Superjomn authored Jan 3, 2018
2 parents 9444f05 + 514629c commit b721119
Show file tree
Hide file tree
Showing 25 changed files with 1,796 additions and 57 deletions.
774 changes: 774 additions & 0 deletions frontend/mock/data/plugin/histograms/histograms.js
View file

Large diffs are not rendered by default.

30 changes: 30 additions & 0 deletions frontend/mock/data/plugin/histograms/tags.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* get mock data
*
* @param {string} path request path
* @param {Object} queryParam query params
* @param {Object} postParam post params
* @return {Object}
*/
module.exports = function (path, queryParam, postParam) {
return {
// moock delay
_timeout: 0,
// mock http status
_status: 200,
// mock response data
_data: {
status: 0,
msg: 'SUCCESS',
data: {
"test": {
"layer1/Wx_plus_b/pre_activations":
{
"displayName": "layer1/Wx_plus_b/pre_activations",
"description": ""
}
}
}
}
};
};
3 changes: 1 addition & 2 deletions frontend/mock/data/plugin/images/images.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ module.exports = function (path, queryParam, postParam) {
{
"wall_time": 1512549785.061623,
"step": 60,
"query":
"sample=0&index=0&tag=input_reshape%2Finput%2Fimage%2F0&run=test",
"query": "sample=0&index=0&tag=input_reshape%2Finput%2Fimage%2F0&run=test",
"width": 28,
"height": 28
},
Expand Down
15 changes: 13 additions & 2 deletions frontend/mock/data/plugin/images/tags.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,19 @@
msg: 'SUCCESS',
data: {
"test": {
"input_reshape/input/image/6": {
"displayName": "input_reshape/input/image/6", "description": "", "samples": 1}, "input_reshape/input/image/7": {"displayName": "input_reshape/input/image/7", "description": "", "samples": 1}, "input_reshape/input/image/4": {"displayName": "input_reshape/input/image/4", "description": "", "samples": 1}, "input_reshape/input/image/5": {"displayName": "input_reshape/input/image/5", "description": "", "samples": 1}, "input_reshape/input/image/2": {"displayName": "input_reshape/input/image/2", "description": "", "samples": 1}, "input_reshape/input/image/3": {"displayName": "input_reshape/input/image/3", "description": "", "samples": 1}, "input_reshape/input/image/0": {"displayName": "input_reshape/input/image/0", "description": "", "samples": 1}, "input_reshape/input/image/1": {"displayName": "input_reshape/input/image/1", "description": "", "samples": 1}, "input_reshape/input/image/8": {"displayName": "input_reshape/input/image/8", "description": "", "samples": 1}, "input_reshape/input/image/9": {"displayName": "input_reshape/input/image/9", "description": "", "samples": 1}}, "train": {"input_reshape/input/image/6": {"displayName": "input_reshape/input/image/6", "description": "", "samples": 1}, "input_reshape/input/image/7": {"displayName": "input_reshape/input/image/7", "description": "", "samples": 1}, "input_reshape/input/image/4": {"displayName": "input_reshape/input/image/4", "description": "", "samples": 1}, "input_reshape/input/image/5": {"displayName": "input_reshape/input/image/5", "description": "", "samples": 1}, "input_reshape/input/image/2": {"displayName": "input_reshape/input/image/2", "description": "", "samples": 1}, "input_reshape/input/image/3": {"displayName": "input_reshape/input/image/3", "description": "", "samples": 1}, "input_reshape/input/image/0": {"displayName": "input_reshape/input/image/0", "description": "", "samples": 1}, "input_reshape/input/image/1": {"displayName": "input_reshape/input/image/1", "description": "", "samples": 1}, "input_reshape/input/image/8": {"displayName": "input_reshape/input/image/8", "description": "", "samples": 1}, "input_reshape/input/image/9": {"displayName": "input_reshape/input/image/9", "description": "", "samples": 1}}}
"input_reshape/input/image/7": {
"displayName": "input_reshape/input/image/7",
"description": "", "samples": 1
},
"input_reshape/input/image/4": {
"displayName": "input_reshape/input/image/4",
"description": "",
"samples": 1
},
"input_reshape/input/image/5": {
"displayName": "input_reshape/input/image/5",
"description": "", "samples": 1
}, "input_reshape/input/image/2": {"displayName": "input_reshape/input/image/2", "description": "", "samples": 1}, "input_reshape/input/image/3": {"displayName": "input_reshape/input/image/3", "description": "", "samples": 1}, "input_reshape/input/image/0": {"displayName": "input_reshape/input/image/0", "description": "", "samples": 1}, "input_reshape/input/image/1": {"displayName": "input_reshape/input/image/1", "description": "", "samples": 1}, "input_reshape/input/image/8": {"displayName": "input_reshape/input/image/8", "description": "", "samples": 1}, "input_reshape/input/image/9": {"displayName": "input_reshape/input/image/9", "description": "", "samples": 1}}, "train": {"input_reshape/input/image/6": {"displayName": "input_reshape/input/image/6", "description": "", "samples": 1}, "input_reshape/input/image/7": {"displayName": "input_reshape/input/image/7", "description": "", "samples": 1}, "input_reshape/input/image/4": {"displayName": "input_reshape/input/image/4", "description": "", "samples": 1}, "input_reshape/input/image/5": {"displayName": "input_reshape/input/image/5", "description": "", "samples": 1}, "input_reshape/input/image/2": {"displayName": "input_reshape/input/image/2", "description": "", "samples": 1}, "input_reshape/input/image/3": {"displayName": "input_reshape/input/image/3", "description": "", "samples": 1}, "input_reshape/input/image/0": {"displayName": "input_reshape/input/image/0", "description": "", "samples": 1}, "input_reshape/input/image/1": {"displayName": "input_reshape/input/image/1", "description": "", "samples": 1}, "input_reshape/input/image/8": {"displayName": "input_reshape/input/image/8", "description": "", "samples": 1}, "input_reshape/input/image/9": {"displayName": "input_reshape/input/image/9", "description": "", "samples": 1}}}
}
};
};
4 changes: 0 additions & 4 deletions frontend/mock/data/plugin/scalars/tags.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,10 +165,6 @@ module.exports = function (path, queryParam, postParam) {
"layer1/biases/summaries/stddev_1": {
"displayName": "layer1/biases/summaries/stddev_1",
"description": ""
},
"layer1/biases/summaries/min": {
"displayName": "layer1/biases/summaries/min",
"description": ""
}
}
}
Expand Down
6 changes: 5 additions & 1 deletion frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,12 @@
},
"dependencies": {
"axios": "^0.16.1",
"csshint": "^0.3.3",
"d3-format": "^1.2.1",
"echarts": "^3.8.5",
"file-saver": "^1.3.3",
"htmlcs": "^0.4.1",
"lesslint": "^1.0.2",
"lodash": "^4.17.4",
"normalize.css": "^6.0.0",
"qs": "^6.5.1",
Expand Down Expand Up @@ -43,7 +47,7 @@
"css-loader": "^0.28.0",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^2.1.0",
"fecs": "^1.5.3",
"fecs": "1.5.2",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.6.1",
"glob": "^7.1.1",
Expand Down
13 changes: 12 additions & 1 deletion frontend/src/App.san
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div id="app">
<ui-app-menu
selected="{{route}}"
on-item-click="menuChange($event)"
></ui-app-menu>
<div id="content-container" class="visual-dl-content-container">
Expand All @@ -21,10 +22,20 @@ export default {
'ui-app-menu': AppMenu
},
initData() {
return {};
return {
route: 'scalars'
};
},
attached() {
router.start();
let route;
if (location.hash) {
route = /(\#\/)(\w*)([?|&]{0,1})/.exec(location.hash)[2];
this.data.set('route', route);
}
else {
location.hash = '#/scalars';
}
},
menuChange({value, url, title}) {
routeTo(url);
Expand Down
30 changes: 22 additions & 8 deletions frontend/src/common/component/AppMenu.san
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<san-menu slot="right">
<san-menu-item
san-for="item in items"
class="{{selected === item.value ? 'sm-menu-item-selected' : ''}}"
class="{{selected === item.name ? 'sm-menu-item-selected' : ''}}"
on-click="handleItemClick(item)"
title="{{item.title}}" />
</san-menu>
Expand All @@ -23,23 +23,28 @@ export default {
},
initData() {
return {
selected: '1',
selected: 'scalars',
items: [
{
value: '1',
url: '/scalars',
title: 'SCALARS'
title: 'SCALARS',
name: 'scalars'
},
{
value: '2',
url: '/images',
title: 'IMAGES'
title: 'IMAGES',
name: 'images'
},
{
url: '/histograms',
title: 'HISTOGRAMS',
name: 'histograms'
}
]
};
},
handleItemClick(item) {
this.data.set('selected', item.value);
this.data.set('selected', item.name);
this.fire('item-click', item);
}
};
Expand All @@ -61,7 +66,16 @@ export default {
height 100%
display flex
flex-direction row
.sm-menu-item
.sm-menu-item-content
color #fff
opacity 0.6
.sm-menu-item:hover
background none
opacity 1
.sm-menu-item-selected
background #e4e4e4
.sm-menu-item-content
color #fff
opacity 1
</style>

13 changes: 12 additions & 1 deletion frontend/src/common/component/Charts/chart.san
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,18 @@ export default {
let legendOptions = tagList.map(item => item.run);
let that = this;
let option = {
color: [
'#c23531',
'#61a0a8',
'#d48265',
'#91c7ae',
'#749f83',
'#ca8622',
'#bda29a',
'#6e7074',
'#546570',
'#c4ccd3'
],
title: {
text: tag,
textStyle: {
Expand Down Expand Up @@ -457,7 +469,6 @@ export default {
height: 300
});
}

},

getFormatterPoints(data) {
Expand Down
44 changes: 37 additions & 7 deletions frontend/src/common/component/Charts/image.san
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="visual-dl-image">
<h3>{{tagInfo.tag.displayName}}
<span>{{tagInfo.run}}</span>
<h3 class="visual-dl-image-title">{{tagInfo.tag.displayName}}
<span class="visual-dl-image-run-icon">{{tagInfo.run}}</span>
</h3>
<p>
<span>Step:</span>
Expand All @@ -15,13 +15,16 @@
max="{{steps}}"
step="{{1}}"
/>
<img src="{{imgData.imgSrc}}" width="{{imgData.width}}" height="{{imgData.height}}"/>
<img style="{{computedImgStyle}}" src="{{imgData.imgSrc}}" />
</div>
</template>
<script>
import Slider from 'san-mui/Slider';
import {getPluginImagesImages} from '../../../service';

const defaultImgWidth = 400;
const defaultImgHight = 300;

export default {
components: {
'san-slider': Slider
Expand All @@ -30,6 +33,20 @@ export default {
steps() {
let data = this.data.get('data') || [];
return data.length - 1;
},
computedImgStyle() {
let isActualImageSize = this.data.get('isActualImageSize');
let width;
let height;
if (isActualImageSize) {
width = this.data.get('imgData.width');
height = this.data.get('imgData.height');
}
else {
width = defaultImgWidth;
height = defaultImgHight;
}
return 'width:' + width + 'px;height:' + height + 'px';
}
},
filters: {
Expand All @@ -44,21 +61,21 @@ export default {
},
initData() {
return {
currentIndex: 0,
slider: {
value: '0',
label: '',
min: 0,
step: 1
},
currentIndex: 0
}
};
},
inited() {
let {run, tag} = this.data.get('tagInfo');
let {displayName, samples} = tag;
let params = {
run,
displayName,
tag: displayName,
samples
};
getPluginImagesImages(params).then(({data}) => {
Expand Down Expand Up @@ -90,9 +107,22 @@ export default {
</script>
<style lang="stylus">
.visual-dl-image
float left
padding 10px
font-size 12px
width 400px
float left
.visual-dl-image-title
font-size 14px
line-height 30px
.visual-dl-image-run-icon
background #e4e4e4
float right
margin-right 10px
padding 0 10px
border solid 1px #e4e4e4
border-radius 6px
line-height 20px
margin-top 4px
.visual-dl-chart-actions
.sm-form-item
width 300px
Expand Down
Loading

0 comments on commit b721119

Please sign in to comment.