Add Audio UI in app and audio endpoint, test by adding mock audio tags (

#352)

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

@@ -0,0 +1,39 @@
+/**
+ * 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: [
+                {
+                    "wall_time": 1512549785.061623,
+                    "step": 60,
+                    "query": "sample=0&index=0&tag=input_reshape%2Finput%2Faudio%2F0&run=test",
+                    "width": 28,
+                    "height": 28
+                },
+                {"wall_time": 1512886109.672786, "step": 60, "query": "sample=0&index=1&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
+                {"wall_time": 1512886124.266915, "step": 210, "query": "sample=0&index=2&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
+                {"wall_time": 1512886138.898628, "step": 330, "query": "sample=0&index=3&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
+                {"wall_time": 1512886139.883663, "step": 340, "query": "sample=0&index=4&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
+                {"wall_time": 1512886147.195567, "step": 410, "query": "sample=0&index=5&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
+                {"wall_time": 1512886156.47856, "step": 500, "query": "sample=0&index=6&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
+                {"wall_time": 1512886187.82793, "step": 810, "query": "sample=0&index=7&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
+                {"wall_time": 1512886200.386198, "step": 950, "query": "sample=0&index=8&tag=input_reshape%2Finput%2Faudio%2F0&run=test"},
+                {"wall_time": 1512886204.224405, "step": 990, "query": "sample=0&index=9&tag=input_reshape%2Finput%2Faudio%2F0&run=test"}
+            ]
+        }
+    };
+};

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

@@ -0,0 +1,22 @@
+/**
+ * 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: ''
+        }
+    };
+};

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

@@ -0,0 +1,36 @@
+/**
+ * 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": {
+                    "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}}, "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}}}
+        }
+    };
+};

frontend/src/audio/Audio.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="visual-dl-page-container">
+        <div class="visual-dl-page-left">
+            <ui-audio-container
+                :expand="true"
+                :config="filteredConfig"
+                :runsItems="runsItems"
+                :tagList="filteredTagsList"
+                :title="'Tags matching ' + config.groupNameReg"
+            ></ui-audio-container>
+            <ui-audio-container
+                v-for="item in groupedTags"
+                :key="item.group"
+                :config="filteredConfig"
+                :runsItems="runsItems"
+                :tagList="item.tags"
+                :title="item.group"
+            ></ui-audio-container>
+        </div>
+        <div class="visual-dl-page-right">
+            <div class="visual-dl-page-config-container">
+                <ui-config :runsItems="runsItems" :config="config"
+                ></ui-config>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import {getPluginAudioTags, getRuns} from '../service';
+import {debounce, flatten, uniq, isArray} from 'lodash';
+import autoAdjustHeight from '../common/util/autoAdjustHeight';
+
+import Config from './ui/Config'
+import AudioPanelContainer from './ui/AudioPanelContainer';
+
+export default {
+    name: 'Images',
+    components: {
+        'ui-config': Config,
+        'ui-audio-container': AudioPanelContainer
+    },
+    data () {
+        return {
+            runsArray: [],
+            tags: [],
+            config: {
+                groupNameReg: '.*',
+                isActualImageSize: false,
+                runs: [],
+                running: true
+            },
+            filteredTagsList: []
+        }
+    },
+    computed: {
+        runsItems() {
+            let runsArray = this.runsArray || [];
+            return runsArray.map(item => {
+                return {
+                    name: item,
+                    value: item
+                };
+            });
+        },
+        tagsList() {
+            let tags = this.tags;
+
+            let runs = Object.keys(tags);
+            let tagsArray = runs.map(run => Object.keys(tags[run]));
+            let allUniqTags = uniq(flatten(tagsArray));
+
+            // get the data for every chart
+            return allUniqTags.map(tag => {
+                let tagList = runs.map(run => {
+                    return {
+                        run,
+                        tag: tags[run][tag]
+                    };
+                }).filter(item => item.tag !== undefined);
+                return {
+                    tagList,
+                    tag,
+                    group: tag.split('/')[0]
+                };
+            });
+        },
+        groupedTags() {
+            let tagsList = this.tagsList || [];
+            // put data in group
+            let groupData = {};
+            tagsList.forEach(item => {
+                let group = item.group;
+                if (groupData[group] === undefined) {
+                    groupData[group] = [];
+                    groupData[group].push(item);
+                }
+                else {
+                    groupData[group].push(item);
+                }
+            });
+
+            // to array
+            let groups = Object.keys(groupData);
+            return groups.map(group => {
+                return {
+                    group,
+                    tags: groupData[group]
+                };
+            });
+        },
+        filteredConfig() {
+            let config = this.config || {};
+            let filteredConfig = {};
+            Object.keys(config).forEach(key => {
+                let val = config[key];
+                filteredConfig[key] = val;
+            });
+            return filteredConfig;
+        }
+    },
+    created() {
+        getPluginAudioTags().then(({errno, data}) => {
+            this.tags = data;
+
+            // filter when inited
+            let groupNameReg = this.config.groupNameReg;
+            this.filterTagsList(groupNameReg);
+        });
+
+        getRuns().then(({errno, data}) => {
+            this.runsArray = data;
+            this.config.runs = data;
+        });
+    },
+    mounted() {
+	    autoAdjustHeight();
+    },
+    watch: {
+        'config.groupNameReg': function(val) {
+            this.throttledFilterTagsList()
+        }
+    },
+    methods:{
+        filterTagsList(groupNameReg) {
+            if (!groupNameReg) {
+                this.filteredTagsList = [];
+                return;
+            }
+            let tagsList = this.tagsList || [];
+            let regExp = new RegExp(groupNameReg);
+            this.filteredTagsList = tagsList.filter(item => regExp.test(item.tag));
+        },
+        throttledFilterTagsList: _.debounce(
+            function() {
+                this.filterTagsList(this.config.groupNameReg)
+            }, 300
+        ),
+    }
+};
+
+</script>
+
+<style lang="stylus">
+
+</style>

frontend/src/audio/index.js

@@ -0,0 +1,9 @@
+import {router} from 'san-router';
+
+import Audio from './Audio';
+
+router.add({
+    target: '#content',
+    rule: '/audio',
+    Component: Audio
+});