Skip to content

Commit 4e6e194

Browse files
nickyfantasynickyfantasy
authored
Add Audio UI in app and audio endpoint, test by adding mock audio tags (#352)
1 parent d435cb1 commit 4e6e194

File tree

12 files changed

+580
-4
lines changed

12 files changed

+580
-4
lines changed

‎frontend/mock/data/plugin/audio/audio.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* get mock data
3+
*
4+
* @param {string} path request path
5+
* @param {Object} queryParam query params
6+
* @param {Object} postParam post params
7+
* @return {Object}
8+
*/
9+
module.exports = function (path, queryParam, postParam) {
10+
return {
11+
// moock delay
12+
_timeout: 0,
13+
// mock http status
14+
_status: 200,
15+
// mock response data
16+
_data: {
17+
status: 0,
18+
msg: 'SUCCESS',
19+
data: [
20+
{
21+
"wall_time": 1512549785.061623,
22+
"step": 60,
23+
"query": "sample=0&index=0&tag=input_reshape%2Finput%2Faudio%2F0&run=test",
24+
"width": 28,
25+
"height": 28
26+
},
27+
{"wall_time": 1512886109.672786, "step": 60, "query": "sample=0&index=1&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
28+
{"wall_time": 1512886124.266915, "step": 210, "query": "sample=0&index=2&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
29+
{"wall_time": 1512886138.898628, "step": 330, "query": "sample=0&index=3&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
30+
{"wall_time": 1512886139.883663, "step": 340, "query": "sample=0&index=4&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
31+
{"wall_time": 1512886147.195567, "step": 410, "query": "sample=0&index=5&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
32+
{"wall_time": 1512886156.47856, "step": 500, "query": "sample=0&index=6&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
33+
{"wall_time": 1512886187.82793, "step": 810, "query": "sample=0&index=7&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
34+
{"wall_time": 1512886200.386198, "step": 950, "query": "sample=0&index=8&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
35+
{"wall_time": 1512886204.224405, "step": 990, "query": "sample=0&index=9&tag=input_reshape%2Finput%2Faudio%2F0&run=test"}
36+
]
37+
}
38+
};
39+
};

‎frontend/mock/data/plugin/audio/individualaudio.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* get mock data
3+
*
4+
* @param {string} path request path
5+
* @param {Object} queryParam query params
6+
* @param {Object} postParam post params
7+
* @return {Object}
8+
*/
9+
module.exports = function (path, queryParam, postParam) {
10+
return {
11+
// moock delay
12+
_timeout: 0,
13+
// mock http status
14+
_status: 200,
15+
// mock response data
16+
_data: {
17+
status: 0,
18+
msg: 'SUCCESS',
19+
data: ''
20+
}
21+
};
22+
};

‎frontend/mock/data/plugin/audio/tags.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* get mock data
3+
*
4+
* @param {string} path request path
5+
* @param {Object} queryParam query params
6+
* @param {Object} postParam post params
7+
* @return {Object}
8+
*/
9+
module.exports = function (path, queryParam, postParam) {
10+
return {
11+
// moock delay
12+
_timeout: 0,
13+
// mock http status
14+
_status: 200,
15+
// mock response data
16+
_data: {
17+
status: 0,
18+
msg: 'SUCCESS',
19+
data: {
20+
"test": {
21+
"input_reshape/input/audio/7": {
22+
"displayName": "input_reshape/input/audio/7",
23+
"description": "", "samples": 1
24+
},
25+
"input_reshape/input/audio/4": {
26+
"displayName": "input_reshape/input/audio/4",
27+
"description": "",
28+
"samples": 1
29+
},
30+
"input_reshape/input/audio/5": {
31+
"displayName": "input_reshape/input/audio/5",
32+
"description": "", "samples": 1
33+
}, "input_reshape/input/audio/2": {"displayName": "input_reshape/input/audio/2", "description": "", "samples": 1}, "input_reshape/input/audio/3": {"displayName": "input_reshape/input/audio/3", "description": "", "samples": 1}, "input_reshape/input/audio/0": {"displayName": "input_reshape/input/audio/0", "description": "", "samples": 1}, "input_reshape/input/audio/1": {"displayName": "input_reshape/input/audio/1", "description": "", "samples": 1}, "input_reshape/input/audio/8": {"displayName": "input_reshape/input/audio/8", "description": "", "samples": 1}, "input_reshape/input/audio/9": {"displayName": "input_reshape/input/audio/9", "description": "", "samples": 1}}, "train": {"input_reshape/input/audio/6": {"displayName": "input_reshape/input/audio/6", "description": "", "samples": 1}, "input_reshape/input/audio/7": {"displayName": "input_reshape/input/audio/7", "description": "", "samples": 1}, "input_reshape/input/audio/4": {"displayName": "input_reshape/input/audio/4", "description": "", "samples": 1}, "input_reshape/input/audio/5": {"displayName": "input_reshape/input/audio/5", "description": "", "samples": 1}, "input_reshape/input/audio/2": {"displayName": "input_reshape/input/audio/2", "description": "", "samples": 1}, "input_reshape/input/audio/3": {"displayName": "input_reshape/input/audio/3", "description": "", "samples": 1}, "input_reshape/input/audio/0": {"displayName": "input_reshape/input/audio/0", "description": "", "samples": 1}, "input_reshape/input/audio/1": {"displayName": "input_reshape/input/audio/1", "description": "", "samples": 1}, "input_reshape/input/audio/8": {"displayName": "input_reshape/input/audio/8", "description": "", "samples": 1}, "input_reshape/input/audio/9": {"displayName": "input_reshape/input/audio/9", "description": "", "samples": 1}}}
34+
}
35+
};
36+
};

‎frontend/src/audio/Audio.vue‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<template>
2+
<div class="visual-dl-page-container">
3+
<div class="visual-dl-page-left">
4+
<ui-audio-container
5+
:expand="true"
6+
:config="filteredConfig"
7+
:runsItems="runsItems"
8+
:tagList="filteredTagsList"
9+
:title="'Tags matching ' + config.groupNameReg"
10+
></ui-audio-container>
11+
<ui-audio-container
12+
v-for="item in groupedTags"
13+
:key="item.group"
14+
:config="filteredConfig"
15+
:runsItems="runsItems"
16+
:tagList="item.tags"
17+
:title="item.group"
18+
></ui-audio-container>
19+
</div>
20+
<div class="visual-dl-page-right">
21+
<div class="visual-dl-page-config-container">
22+
<ui-config :runsItems="runsItems" :config="config"
23+
></ui-config>
24+
</div>
25+
</div>
26+
</div>
27+
</template>
28+
29+
<script>
30+
31+
import {getPluginAudioTags, getRuns} from '../service';
32+
import {debounce, flatten, uniq, isArray} from 'lodash';
33+
import autoAdjustHeight from '../common/util/autoAdjustHeight';
34+
35+
import Config from './ui/Config'
36+
import AudioPanelContainer from './ui/AudioPanelContainer';
37+
38+
export default {
39+
name: 'Images',
40+
components: {
41+
'ui-config': Config,
42+
'ui-audio-container': AudioPanelContainer
43+
},
44+
data () {
45+
return {
46+
runsArray: [],
47+
tags: [],
48+
config: {
49+
groupNameReg: '.*',
50+
isActualImageSize: false,
51+
runs: [],
52+
running: true
53+
},
54+
filteredTagsList: []
55+
}
56+
},
57+
computed: {
58+
runsItems() {
59+
let runsArray = this.runsArray || [];
60+
return runsArray.map(item => {
61+
return {
62+
name: item,
63+
value: item
64+
};
65+
});
66+
},
67+
tagsList() {
68+
let tags = this.tags;
69+
70+
let runs = Object.keys(tags);
71+
let tagsArray = runs.map(run => Object.keys(tags[run]));
72+
let allUniqTags = uniq(flatten(tagsArray));
73+
74+
// get the data for every chart
75+
return allUniqTags.map(tag => {
76+
let tagList = runs.map(run => {
77+
return {
78+
run,
79+
tag: tags[run][tag]
80+
};
81+
}).filter(item => item.tag !== undefined);
82+
return {
83+
tagList,
84+
tag,
85+
group: tag.split('/')[0]
86+
};
87+
});
88+
},
89+
groupedTags() {
90+
let tagsList = this.tagsList || [];
91+
// put data in group
92+
let groupData = {};
93+
tagsList.forEach(item => {
94+
let group = item.group;
95+
if (groupData[group] === undefined) {
96+
groupData[group] = [];
97+
groupData[group].push(item);
98+
}
99+
else {
100+
groupData[group].push(item);
101+
}
102+
});
103+
104+
// to array
105+
let groups = Object.keys(groupData);
106+
return groups.map(group => {
107+
return {
108+
group,
109+
tags: groupData[group]
110+
};
111+
});
112+
},
113+
filteredConfig() {
114+
let config = this.config || {};
115+
let filteredConfig = {};
116+
Object.keys(config).forEach(key => {
117+
let val = config[key];
118+
filteredConfig[key] = val;
119+
});
120+
return filteredConfig;
121+
}
122+
},
123+
created() {
124+
getPluginAudioTags().then(({errno, data}) => {
125+
this.tags = data;
126+
127+
// filter when inited
128+
let groupNameReg = this.config.groupNameReg;
129+
this.filterTagsList(groupNameReg);
130+
});
131+
132+
getRuns().then(({errno, data}) => {
133+
this.runsArray = data;
134+
this.config.runs = data;
135+
});
136+
},
137+
mounted() {
138+
autoAdjustHeight();
139+
},
140+
watch: {
141+
'config.groupNameReg': function(val) {
142+
this.throttledFilterTagsList()
143+
}
144+
},
145+
methods:{
146+
filterTagsList(groupNameReg) {
147+
if (!groupNameReg) {
148+
this.filteredTagsList = [];
149+
return;
150+
}
151+
let tagsList = this.tagsList || [];
152+
let regExp = new RegExp(groupNameReg);
153+
this.filteredTagsList = tagsList.filter(item => regExp.test(item.tag));
154+
},
155+
throttledFilterTagsList: _.debounce(
156+
function() {
157+
this.filterTagsList(this.config.groupNameReg)
158+
}, 300
159+
),
160+
}
161+
};
162+
163+
</script>
164+
165+
<style lang="stylus">
166+
167+
</style>

‎frontend/src/audio/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {router} from 'san-router';
2+
3+
import Audio from './Audio';
4+
5+
router.add({
6+
target: '#content',
7+
rule: '/audio',
8+
Component: Audio
9+
});

0 commit comments

Comments
 (0)