Skip to content

V
VisualDL

PaddlePaddle / VisualDL
大约 2 年 前同步成功

通知 89
Star 4655
Fork 642
V
VisualDL
“e8efba5787158c69daf38b946124569d93d46f05”上不存在“paddle/fluid/git@gitcode.net:Crayonxin2000/Paddle.git”
未验证 提交 db62d42b 编写于 作者: J Jeff Wang 提交者： GitHub
浏览文件
操作

Use ESlint to format the Javascript and Vue files. (#365) 

* Use ESlint to format the Javascript and Vue files.
Strongly recommended rules applied.

* Add google format package
上级 32ef4f9e
隐藏空白更改
内联 并排
Showing with 1417 addition and 1256 deletion
frontend/.eslintrc.js 0 → 100644
浏览文件 @ db62d42b
module.exports = {
extends: [
'google',
'plugin:vue/base',
'plugin:vue/essential',
'plugin:vue/strongly-recommended',
],
rules: {
// override/add rules settings here, such as:
'vue/no-unused-vars': 'warn',
'max-len': ["warn", 120],
}
}
frontend/package.json
浏览文件 @ db62d42b
...@@ -49,6 +49,9 @@ ...@@ -49,6 +49,9 @@
"copy-webpack-plugin": "^4.0.1", "copy-webpack-plugin": "^4.0.1",
"cross-env": "^4.0.0", "cross-env": "^4.0.0",
"css-loader": "^0.28.0", "css-loader": "^0.28.0",
"eslint": "^4.19.1",
"eslint-config-google": "^0.9.1",
"eslint-plugin-vue": "^4.4.0",
"express": "^4.16.2", "express": "^4.16.2",
"extract-text-webpack-plugin": "^2.1.0", "extract-text-webpack-plugin": "^2.1.0",
"fecs": "1.5.2", "fecs": "1.5.2",
......
frontend/src/App.vue
浏览文件 @ db62d42b
<template> <template>
<div id="app"> <div id="app">
<v-app> <v-app>
<AppMenu :initialRoute="initialRoute"> <AppMenu :initial-route="initialRoute"/>
</AppMenu> <router-view/>
<router-view></router-view> </v-app>
</v-app> </div>
</div>
</template> </template>
<script> <script>
import AppMenu from './common/component/AppMenu' import AppMenu from './common/component/AppMenu';
export default { export default {
name: 'App', name: 'App',
components: { components: {
AppMenu AppMenu,
}, },
data() { data() {
return { return {
initialRoute: "scalars" initialRoute: 'scalars',
} };
}, },
created() { created() {
if (location.hash && location.hash != '#/') { if (location.hash && location.hash != '#/') {
this.initialRoute = /(\#\/)(\w*)([?|&]{0,1})/.exec(location.hash)[2]; this.initialRoute = /(\#\/)(\w*)([?|&]{0,1})/.exec(location.hash)[2];
} } else {
else {
location.hash = '#/scalars'; location.hash = '#/scalars';
} }
} },
} };
</script> </script>
<style lang="stylus"> <style lang="stylus">
......
frontend/src/audio/Audio.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-page-container"> <div class="visual-dl-page-container">
<div class="visual-dl-page-left"> <div class="visual-dl-page-left">
<ui-audio-container <ui-audio-container
:expand="true" :expand="true"
:config="filteredConfig" :config="filteredConfig"
:runsItems="runsItems" :runs-items="runsItems"
:tagList="filteredTagsList" :tag-list="filteredTagsList"
:title="'Tags matching ' + config.groupNameReg" :title="'Tags matching ' + config.groupNameReg"
></ui-audio-container> />
<ui-audio-container <ui-audio-container
v-for="item in groupedTags" v-for="item in groupedTags"
:key="item.group" :key="item.group"
:config="filteredConfig" :config="filteredConfig"
:runsItems="runsItems" :runs-items="runsItems"
:tagList="item.tags" :tag-list="item.tags"
:title="item.group" :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> </div>
<div class="visual-dl-page-right">
<div class="visual-dl-page-config-container">
<ui-config
:runs-items="runsItems"
:config="config"
/>
</div>
</div>
</div>
</template> </template>
<script> <script>
...@@ -32,16 +34,16 @@ import {getPluginAudioTags, getRuns} from '../service'; ...@@ -32,16 +34,16 @@ import {getPluginAudioTags, getRuns} from '../service';
import {debounce, flatten, uniq, isArray} from 'lodash'; import {debounce, flatten, uniq, isArray} from 'lodash';
import autoAdjustHeight from '../common/util/autoAdjustHeight'; import autoAdjustHeight from '../common/util/autoAdjustHeight';
import Config from './ui/Config' import Config from './ui/Config';
import AudioPanelContainer from './ui/AudioPanelContainer'; import AudioPanelContainer from './ui/AudioPanelContainer';
export default { export default {
name: 'Images', name: 'Images',
components: { components: {
'ui-config': Config, 'ui-config': Config,
'ui-audio-container': AudioPanelContainer 'ui-audio-container': AudioPanelContainer,
}, },
data () { data() {
return { return {
runsArray: [], runsArray: [],
tags: [], tags: [],
...@@ -49,18 +51,18 @@ export default { ...@@ -49,18 +51,18 @@ export default {
groupNameReg: '.*', groupNameReg: '.*',
isActualImageSize: false, isActualImageSize: false,
runs: [], runs: [],
running: true running: true,
}, },
filteredTagsList: [] filteredTagsList: [],
} };
}, },
computed: { computed: {
runsItems() { runsItems() {
let runsArray = this.runsArray || []; let runsArray = this.runsArray || [];
return runsArray.map(item => { return runsArray.map((item) => {
return { return {
name: item, name: item,
value: item value: item,
}; };
}); });
}, },
...@@ -68,21 +70,21 @@ export default { ...@@ -68,21 +70,21 @@ export default {
let tags = this.tags; let tags = this.tags;
let runs = Object.keys(tags); let runs = Object.keys(tags);
let tagsArray = runs.map(run => Object.keys(tags[run])); let tagsArray = runs.map((run) => Object.keys(tags[run]));
let allUniqTags = uniq(flatten(tagsArray)); let allUniqTags = uniq(flatten(tagsArray));
// get the data for every chart // get the data for every chart
return allUniqTags.map(tag => { return allUniqTags.map((tag) => {
let tagList = runs.map(run => { let tagList = runs.map((run) => {
return { return {
run, run,
tag: tags[run][tag] tag: tags[run][tag],
}; };
}).filter(item => item.tag !== undefined); }).filter((item) => item.tag !== undefined);
return { return {
tagList, tagList,
tag, tag,
group: tag.split('/')[0] group: tag.split('/')[0],
}; };
}); });
}, },
...@@ -90,35 +92,34 @@ export default { ...@@ -90,35 +92,34 @@ export default {
let tagsList = this.tagsList || []; let tagsList = this.tagsList || [];
// put data in group // put data in group
let groupData = {}; let groupData = {};
tagsList.forEach(item => { tagsList.forEach((item) => {
let group = item.group; let group = item.group;
if (groupData[group] === undefined) { if (groupData[group] === undefined) {
groupData[group] = []; groupData[group] = [];
groupData[group].push(item); groupData[group].push(item);
} } else {
else {
groupData[group].push(item); groupData[group].push(item);
} }
}); });
// to array // to array
let groups = Object.keys(groupData); let groups = Object.keys(groupData);
return groups.map(group => { return groups.map((group) => {
return { return {
group, group,
tags: groupData[group] tags: groupData[group],
}; };
}); });
}, },
filteredConfig() { filteredConfig() {
let config = this.config || {}; let config = this.config || {};
let filteredConfig = {}; let filteredConfig = {};
Object.keys(config).forEach(key => { Object.keys(config).forEach((key) => {
let val = config[key]; let val = config[key];
filteredConfig[key] = val; filteredConfig[key] = val;
}); });
return filteredConfig; return filteredConfig;
} },
}, },
created() { created() {
getPluginAudioTags().then(({errno, data}) => { getPluginAudioTags().then(({errno, data}) => {
...@@ -139,10 +140,10 @@ export default { ...@@ -139,10 +140,10 @@ export default {
}, },
watch: { watch: {
'config.groupNameReg': function(val) { 'config.groupNameReg': function(val) {
this.throttledFilterTagsList() this.throttledFilterTagsList();
} },
}, },
methods:{ methods: {
filterTagsList(groupNameReg) { filterTagsList(groupNameReg) {
if (!groupNameReg) { if (!groupNameReg) {
this.filteredTagsList = []; this.filteredTagsList = [];
...@@ -150,14 +151,14 @@ export default { ...@@ -150,14 +151,14 @@ export default {
} }
let tagsList = this.tagsList || []; let tagsList = this.tagsList || [];
let regExp = new RegExp(groupNameReg); let regExp = new RegExp(groupNameReg);
this.filteredTagsList = tagsList.filter(item => regExp.test(item.tag)); this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
}, },
throttledFilterTagsList: _.debounce( throttledFilterTagsList: _.debounce(
function() { function() {
this.filterTagsList(this.config.groupNameReg) this.filterTagsList(this.config.groupNameReg);
}, 300 }, 300
), ),
} },
}; };
</script> </script>
......
frontend/src/audio/index.js
浏览文件 @ db62d42b
...@@ -5,5 +5,5 @@ import Audio from './Audio'; ...@@ -5,5 +5,5 @@ import Audio from './Audio';
router.add({ router.add({
target: '#content', target: '#content',
rule: '/audio', rule: '/audio',
Component: Audio Component: Audio,
}); });
frontend/src/audio/ui/AudioPanel.vue
浏览文件 @ db62d42b
<template> <template>
<v-card hover class="visual-dl-audio"> <v-card
<h3 class="visual-dl-audio-title">{{tagInfo.tag.displayName}} hover
<span class="visual-dl-audio-run-icon">{{tagInfo.run}}</span> class="visual-dl-audio">
</h3> <h3 class="visual-dl-audio-title">{{ tagInfo.tag.displayName }}
<p> <span class="visual-dl-audio-run-icon">{{ tagInfo.run }}</span>
<span>Step:</span> </h3>
<span>{{audioData.step}}</span> <p>
<span class="visual-del-audio-time">{{audioData.wall_time | formatTime}}</span> <span>Step:</span>
</p> <span>{{ audioData.step }}</span>
<v-slider :max="steps" <span class="visual-del-audio-time">{{ audioData.wall_time | formatTime }}</span>
:min="slider.min" </p>
:step="1" <v-slider
v-model="currentIndex" :max="steps"
></v-slider> :min="slider.min"
:step="1"
v-model="currentIndex"
/>
<audio controls :src="audioData.audioSrc"> <audio
Your browser does not support the audio element. controls
</audio> :src="audioData.audioSrc">
</v-card> Your browser does not support the audio element.
</audio>
</v-card>
</template> </template>
<script> <script>
import {getPluginAudioAudio} from '../../service'; import {getPluginAudioAudio} from '../../service';
...@@ -31,21 +36,21 @@ export default { ...@@ -31,21 +36,21 @@ export default {
steps() { steps() {
let data = this.data || []; let data = this.data || [];
return data.length - 1; return data.length - 1;
} },
}, },
filters: { filters: {
formatTime: function (value) { formatTime: function(value) {
if (!value) { if (!value) {
return; return;
} }
// The value was made in seconds, must convert it to milliseconds // The value was made in seconds, must convert it to milliseconds
let time = new Date(value * 1000); let time = new Date(value * 1000);
var options = { let options = {
weekday: "short", year: "numeric", month: "short", weekday: 'short', year: 'numeric', month: 'short',
day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit" day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit',
}; };
return time.toLocaleDateString("en-US", options); return time.toLocaleDateString('en-US', options);
} },
}, },
data() { data() {
return { return {
...@@ -54,7 +59,7 @@ export default { ...@@ -54,7 +59,7 @@ export default {
value: '0', value: '0',
label: '', label: '',
min: 0, min: 0,
step: 1 step: 1,
}, },
audioData: {}, audioData: {},
data: [], data: [],
...@@ -74,7 +79,7 @@ export default { ...@@ -74,7 +79,7 @@ export default {
}, },
watch: { watch: {
running: function (val) { running: function(val) {
val ? this.startInterval() : this.stopInterval(); val ? this.startInterval() : this.stopInterval();
}, },
currentIndex: function(index) { currentIndex: function(index) {
...@@ -86,10 +91,10 @@ export default { ...@@ -86,10 +91,10 @@ export default {
this.audioData = { this.audioData = {
audioSrc, audioSrc,
step, step,
wall_time wall_time,
} };
} }
} },
}, },
methods: { methods: {
stopInterval() { stopInterval() {
...@@ -102,14 +107,14 @@ export default { ...@@ -102,14 +107,14 @@ export default {
}, intervalTime * 1000); }, intervalTime * 1000);
}, },
getOriginAudioData() { getOriginAudioData() {
//let {run, tag} = this.tagInfo; // let {run, tag} = this.tagInfo;
let run = this.tagInfo.run let run = this.tagInfo.run;
let tag = this.tagInfo.tag let tag = this.tagInfo.tag;
let {displayName, samples} = tag; let {displayName, samples} = tag;
let params = { let params = {
run, run,
tag: displayName, tag: displayName,
samples samples,
}; };
getPluginAudioAudio(params).then(({status, data}) => { getPluginAudioAudio(params).then(({status, data}) => {
if (status === 0) { if (status === 0) {
...@@ -117,8 +122,8 @@ export default { ...@@ -117,8 +122,8 @@ export default {
this.currentIndex = data.length - 1; this.currentIndex = data.length - 1;
} }
}); });
} },
} },
}; };
</script> </script>
<style lang="stylus"> <style lang="stylus">
......
frontend/src/audio/ui/AudioPanelContainer.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-chart-page"> <div class="visual-dl-chart-page">
<ui-expand-panel :info="total" :title="title"> <ui-expand-panel
<ui-audio :info="total"
class="visual-dl-chart-audio" :title="title">
v-for="(tagInfo, index) in filteredPageList" <ui-audio
:key="index" class="visual-dl-chart-audio"
:tagInfo="tagInfo" v-for="(tagInfo, index) in filteredPageList"
:runs="config.runs" :key="index"
:running="config.running" :tag-info="tagInfo"
:runsItems="runsItems" :runs="config.runs"
></ui-audio> :running="config.running"
:runs-items="runsItems"
/>
<v-pagination class="visual-dl-sm-pagination" <v-pagination
v-if="total > pageSize" class="visual-dl-sm-pagination"
v-model="currentPage" v-if="total > pageSize"
:length="pageLength" v-model="currentPage"
></v-pagination> :length="pageLength"
</ui-expand-panel> />
</div> </ui-expand-panel>
</div>
</template> </template>
<script> <script>
import ExpandPanel from '../../common/component/ExpandPanel'; import ExpandPanel from '../../common/component/ExpandPanel';
...@@ -36,8 +39,8 @@ export default { ...@@ -36,8 +39,8 @@ export default {
let tagList = this.tagList || []; let tagList = this.tagList || [];
let runs = this.config.runs || []; let runs = this.config.runs || [];
let list = cloneDeep(tagList); let list = cloneDeep(tagList);
return flatten(list.slice().map(item => { return flatten(list.slice().map((item) => {
return item.tagList.filter(one => runs.includes(one.run)); return item.tagList.filter((one) => runs.includes(one.run));
})); }));
}, },
...@@ -50,15 +53,15 @@ export default { ...@@ -50,15 +53,15 @@ export default {
return list.length; return list.length;
}, },
pageLength() { pageLength() {
return Math.ceil(this.total / this.pageSize) return Math.ceil(this.total / this.pageSize);
} },
}, },
data() { data() {
return { return {
// current page // current page
currentPage: 1, currentPage: 1,
// item per page // item per page
pageSize: 8 pageSize: 8,
}; };
}, },
}; };
......
frontend/src/audio/ui/Config.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-page-config-com"> <div class="visual-dl-page-config-com">
<v-text-field <v-text-field
label="Group name RegExp" label="Group name RegExp"
hint="input a tag group name to search" hint="input a tag group name to search"
v-model="config.groupNameReg" v-model="config.groupNameReg"
dark dark
></v-text-field> />
<label class="visual-dl-page-checkbox-group-label">Runs</label> <label class="visual-dl-page-checkbox-group-label">Runs</label>
<v-checkbox v-for="item in runsItems" <v-checkbox
:key="item.name" v-for="item in runsItems"
:label="item.name" :key="item.name"
:value="item.value" :label="item.name"
v-model="config.runs" :value="item.value"
dark v-model="config.runs"
></v-checkbox> dark
/>
<v-btn :color="config.running ? 'primary' : 'error'" <v-btn
v-model="config.running" :color="config.running ? 'primary' : 'error'"
@click="toggleAllRuns" v-model="config.running"
class="visual-dl-page-run-toggle" @click="toggleAllRuns"
dark block class="visual-dl-page-run-toggle"
> dark
{{config.running ? 'Running' : 'Stopped'}} block
</v-btn> >
</div> {{ config.running ? 'Running' : 'Stopped' }}
</v-btn>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
runsItems: Array, runsItems: Array,
config: Object config: Object,
}, },
data() { data() {
return { return {
...@@ -40,8 +43,8 @@ export default { ...@@ -40,8 +43,8 @@ export default {
methods: { methods: {
toggleAllRuns() { toggleAllRuns() {
this.config.running = !this.config.running; this.config.running = !this.config.running;
} },
} },
}; };
</script> </script>
......
frontend/src/common/component/AppMenu.vue
浏览文件 @ db62d42b
<template> <template>
<div> <div>
<div class="visual-dl-app-menu"> <div class="visual-dl-app-menu">
<v-toolbar color="primary" dark> <v-toolbar
<v-toolbar-title class="appbar-menu-title"></v-toolbar-title> color="primary"
<v-toolbar-items> dark>
<v-btn v-for="item in items" :key="item.name" <v-toolbar-title class="appbar-menu-title"/>
flat dark :class="selected === item.name ? 'menu-item-selected': 'menu-item'" <v-toolbar-items>
@click="handleItemClick(item)" <v-btn
>{{ item.title}}</v-btn> v-for="item in items"
</v-toolbar-items> :key="item.name"
</v-toolbar> flat
</div> dark
:class="selected === item.name ? 'menu-item-selected': 'menu-item'"
@click="handleItemClick(item)"
>{{ item.title }}</v-btn>
</v-toolbar-items>
</v-toolbar>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
props: ['initialRoute'], props: ['initialRoute'],
name: 'AppMenu', name: 'AppMenu',
data () { data() {
return { return {
selected: this.initialRoute, selected: this.initialRoute,
items: [ items: [
{ {
url: '/scalars', url: '/scalars',
title: 'SCALARS', title: 'SCALARS',
name: 'scalars' name: 'scalars',
}, },
{ {
url: '/images', url: '/images',
title: 'IMAGES', title: 'IMAGES',
name: 'images' name: 'images',
}, },
{ {
url: '/audio', url: '/audio',
title: 'AUDIO', title: 'AUDIO',
name: 'audio' name: 'audio',
}, },
{ {
url: '/histograms', url: '/histograms',
title: 'HISTOGRAMS', title: 'HISTOGRAMS',
name: 'histograms' name: 'histograms',
}, },
{ {
url: '/graphs', url: '/graphs',
title: 'GRAPHS', title: 'GRAPHS',
name: 'graphs' name: 'graphs',
}, },
{ {
url: '/texts', url: '/texts',
title: 'TEXTS', title: 'TEXTS',
name: 'texts' name: 'texts',
}, },
/* // Hide the top menu /* // Hide the top menu
{ {
...@@ -59,16 +65,16 @@ export default { ...@@ -59,16 +65,16 @@ export default {
name: 'HighDimensional' name: 'HighDimensional'
} }
*/ */
] ],
} };
}, },
methods: { methods: {
handleItemClick: function (item) { handleItemClick: function(item) {
this.selected = item.name this.selected = item.name;
this.$router.push(item.url) this.$router.push(item.url);
} },
} },
} };
</script> </script>
<style scoped lang="stylus"> <style scoped lang="stylus">
......
frontend/src/common/component/ExpandPanel.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-expand-panel"> <div class="visual-dl-expand-panel">
<h3 <h3
class="visual-dl-expand-head" class="visual-dl-expand-head"
@click="isShow = !isShow" @click="isShow = !isShow"
> >
<span>{{title}}</span> <span>{{ title }}</span>
<span class="visual-dl-expand-head-info"> <span class="visual-dl-expand-head-info">
<v-icon class="visual-dl-expand-head-arrow" size="20">{{iconName}}</v-icon> <v-icon
<span class="visual-dl-expand-head-num">({{info}})</span> class="visual-dl-expand-head-arrow"
</span> size="20">{{ iconName }}</v-icon>
</h3> <span class="visual-dl-expand-head-num">({{ info }})</span>
<div </span>
v-if="isShow" </h3>
class="visual-dl-expand-panel-content" <div
> v-if="isShow"
<slot></slot> class="visual-dl-expand-panel-content"
</div> >
<slot/>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
title: String, title: String,
info: Number info: Number,
}, },
computed: { computed: {
iconName() { iconName() {
return this.isShow ? 'expand_less' : 'expand_more'; return this.isShow ? 'expand_less' : 'expand_more';
} },
}, },
data() { data() {
return { return {
isShow: true isShow: true,
}; };
} },
}; };
</script> </script>
<style lang="stylus"> <style lang="stylus">
......
frontend/src/common/component/Notification/Notification.js
浏览文件 @ db62d42b
...@@ -23,7 +23,7 @@ function calcTopDist(topDist = 16) { ...@@ -23,7 +23,7 @@ function calcTopDist(topDist = 16) {
* @param {Object} options options * @param {Object} options options
* @return {NotificationItem} instance * @return {NotificationItem} instance
*/ */
const notification = function (options = {}) { const notification = function(options = {}) {
options.top = calcTopDist(options.offset); options.top = calcTopDist(options.offset);
const {onClose, onClick} = options; const {onClose, onClick} = options;
delete options.onClick; delete options.onClick;
...@@ -31,9 +31,9 @@ const notification = function (options = {}) { ...@@ -31,9 +31,9 @@ const notification = function (options = {}) {
delete options.offset; delete options.offset;
const instance = { const instance = {
vm: new NotificationItem({ vm: new NotificationItem({
data: options data: options,
}), }),
id: `notification_${seed++}` id: `notification_${seed++}`,
}; };
if (typeof onClick === 'function') { if (typeof onClick === 'function') {
...@@ -54,7 +54,7 @@ const notification = function (options = {}) { ...@@ -54,7 +54,7 @@ const notification = function (options = {}) {
* @param {string} id instance id * @param {string} id instance id
* @param {Function} onClose cusmtom func * @param {Function} onClose cusmtom func
*/ */
notification.close = function (id, onClose) { notification.close = function(id, onClose) {
let index; let index;
let removedHeight; let removedHeight;
let len = instances.length; let len = instances.length;
...@@ -79,15 +79,14 @@ notification.close = function (id, onClose) { ...@@ -79,15 +79,14 @@ notification.close = function (id, onClose) {
instances[i].vm.el.style.top = `${parseInt(instances[i].vm.el.style.top, 10) - removedHeight - 16}px`; instances[i].vm.el.style.top = `${parseInt(instances[i].vm.el.style.top, 10) - removedHeight - 16}px`;
} }
} }
}; };
// fout type func // fout type func
['success', 'warning', 'info', 'error'].forEach(type => { ['success', 'warning', 'info', 'error'].forEach((type) => {
notification[type] = options => { notification[type] = (options) => {
if (typeof options === 'string') { if (typeof options === 'string') {
options = { options = {
message: options message: options,
}; };
} }
options = options || {}; options = options || {};
......
frontend/src/common/util/downLoadFile.js
浏览文件 @ db62d42b
...@@ -25,17 +25,17 @@ function s2ab(s) { ...@@ -25,17 +25,17 @@ function s2ab(s) {
* @param {Array} data the data for the xlsx * @param {Array} data the data for the xlsx
* @param {string} name filename * @param {string} name filename
*/ */
export const generateXLSXandAutoDownload = function (data, name) { export const generateXLSXandAutoDownload = function(data, name) {
let wopts = { let wopts = {
bookType: 'xlsx', bookType: 'xlsx',
bookSST: false, bookSST: false,
type: 'binary' type: 'binary',
}; };
let ws = aoaToSheet(data); let ws = aoaToSheet(data);
let wb = { let wb = {
SheetNames: ['Export'], SheetNames: ['Export'],
Sheets: {}, Sheets: {},
Props: {} Props: {},
}; };
wb.Sheets.Export = ws; wb.Sheets.Export = ws;
let wbout = XLSX.write(wb, wopts); let wbout = XLSX.write(wb, wopts);
...@@ -43,7 +43,7 @@ export const generateXLSXandAutoDownload = function (data, name) { ...@@ -43,7 +43,7 @@ export const generateXLSXandAutoDownload = function (data, name) {
new Blob( new Blob(
[s2ab(wbout)], [s2ab(wbout)],
{ {
type: 'application/octet-stream' type: 'application/octet-stream',
} }
), ),
name + '.xlsx' || 'sheetjs.xlsx' name + '.xlsx' || 'sheetjs.xlsx'
...@@ -57,12 +57,12 @@ export const generateXLSXandAutoDownload = function (data, name) { ...@@ -57,12 +57,12 @@ export const generateXLSXandAutoDownload = function (data, name) {
* @param {Array} data the data for the xlsx * @param {Array} data the data for the xlsx
* @param {string} name filename * @param {string} name filename
*/ */
export const generateJsonAndDownload = function (data, name) { export const generateJsonAndDownload = function(data, name) {
saveAs( saveAs(
new Blob( new Blob(
[s2ab(JSON.stringify(data, null, ' '))], [s2ab(JSON.stringify(data, null, ' '))],
{ {
type: 'application/octet-stream' type: 'application/octet-stream',
} }
), ),
name + '.json' || 'json.json' name + '.json' || 'json.json'
......
frontend/src/common/util/http.js
浏览文件 @ db62d42b
...@@ -7,11 +7,11 @@ const STATUSINFO = 'msg'; ...@@ -7,11 +7,11 @@ const STATUSINFO = 'msg';
const instance = axios.create({ const instance = axios.create({
baseURL: '/', baseURL: '/',
timeout: 30000 timeout: 30000,
}); });
// for better ux, don't send the error msg because there will be too mutch error // for better ux, don't send the error msg because there will be too mutch error
const responseErrorStatus = response => { const responseErrorStatus = (response) => {
const data = response.data; const data = response.data;
// if (data[STATUS] !== 0) { // if (data[STATUS] !== 0) {
// Notification.error(data[STATUSINFO]); // Notification.error(data[STATUSINFO]);
...@@ -21,7 +21,7 @@ const responseErrorStatus = response => { ...@@ -21,7 +21,7 @@ const responseErrorStatus = response => {
}; };
// for better ux, don't send the error msg because there will be too mutch error // for better ux, don't send the error msg because there will be too mutch error
const responseNetError = error => { const responseNetError = (error) => {
// Notification.error('net error'); // Notification.error('net error');
return Promise.reject(error); return Promise.reject(error);
}; };
...@@ -30,11 +30,11 @@ const responseNetError = error => { ...@@ -30,11 +30,11 @@ const responseNetError = error => {
const formInstance = axios.create({ const formInstance = axios.create({
baseURL: '/', baseURL: '/',
timeout: 3000, timeout: 3000,
transformRequest: [data => qs.stringify(data)], transformRequest: [(data) => qs.stringify(data)],
headers: { headers: {
'Content-Type': 'application/x-www-form-urlencoded', 'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json,application/vnd.ms-excel' 'Accept': 'application/json,application/vnd.ms-excel',
} },
}); });
......
frontend/src/common/util/index.js
浏览文件 @ db62d42b
import quantile from './quantile'; import quantile from './quantile';
export { export {
quantile quantile,
}; };
frontend/src/common/util/number.js
浏览文件 @ db62d42b
export default function (x) { export default function(x) {
return x === null ? NaN : +x; return x === null ? NaN : +x;
} }
frontend/src/common/util/quantile.js
浏览文件 @ db62d42b
import number from './number'; import number from './number';
export default function (values, p, valueof) { export default function(values, p, valueof) {
if (valueof == null) { if (valueof == null) {
return valueof = number; return valueof = number;
} }
......
frontend/src/common/util/routeTo.js
浏览文件 @ db62d42b
import {router} from 'san-router'; import {router} from 'san-router';
export function routeTo(url, params = {}) { export function routeTo(url, params = {}) {
let paramsArr = Object.keys(params).map(key => `${key}=${params[key]}`); let paramsArr = Object.keys(params).map((key) => `${key}=${params[key]}`);
let urlParams = (url.indexOf('?') > -1 ? '&' : '?') + paramsArr.join('&'); let urlParams = (url.indexOf('?') > -1 ? '&' : '?') + paramsArr.join('&');
router.locator.redirect(urlParams.length > 1 ? `${url}${urlParams}` : url); router.locator.redirect(urlParams.length > 1 ? `${url}${urlParams}` : url);
......
frontend/src/graph/Graph.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-page-container"> <div class="visual-dl-page-container">
<div class="visual-dl-page-left"> <div class="visual-dl-page-left">
<ui-chart <ui-chart
:fitScreen="fitScreen" :fit-screen="fitScreen"
:download="download" :download="download"
:scale="config.scale" :scale="config.scale"
:curNode="curNode" :cur-node="curNode"
@curNodeUpdated="curNode = $event" @curNodeUpdated="curNode = $event"
></ui-chart> />
</div>
<div class="visual-dl-page-right">
<div class="visual-dl-page-config-container">
<ui-config
:config="config"
:curNode="curNode"
@fitScreen="handleFitScreen"
@download="handleDownload"
></ui-config>
</div>
</div>
</div> </div>
<div class="visual-dl-page-right">
<div class="visual-dl-page-config-container">
<ui-config
:config="config"
:cur-node="curNode"
@fitScreen="handleFitScreen"
@download="handleDownload"
/>
</div>
</div>
</div>
</template> </template>
<script> <script>
import autoAdjustHeight from '../common/util/autoAdjustHeight'; import autoAdjustHeight from '../common/util/autoAdjustHeight';
import Config from './ui/Config' import Config from './ui/Config';
import Chart from './ui/Chart'; import Chart from './ui/Chart';
export default { export default {
components: { components: {
'ui-config': Config, 'ui-config': Config,
'ui-chart': Chart 'ui-chart': Chart,
}, },
name: 'Graph', name: 'Graph',
data () { data() {
return { return {
config: { config: {
scale: 0.5 scale: 0.5,
}, },
fitScreen: {fitScreen: false}, fitScreen: {fitScreen: false},
download: {download: false}, download: {download: false},
curNode: {} curNode: {},
} };
}, },
mounted() { mounted() {
autoAdjustHeight(); autoAdjustHeight();
...@@ -54,8 +54,8 @@ export default { ...@@ -54,8 +54,8 @@ export default {
}, },
handleDownload() { handleDownload() {
this.download = {fitScreen: true}; this.download = {fitScreen: true};
} },
} },
}; };
</script> </script>
......
frontend/src/graph/index.js
浏览文件 @ db62d42b
...@@ -5,5 +5,5 @@ import Graph from './Graph'; ...@@ -5,5 +5,5 @@ import Graph from './Graph';
router.add({ router.add({
target: '#content', target: '#content',
rule: '/graphs', rule: '/graphs',
Component: Graph Component: Graph,
}); });
frontend/src/graph/ui/Chart.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-graph-charts"> <div class="visual-dl-graph-charts">
<svg class="visual-dl-page-left"> <svg class="visual-dl-page-left">
<g/> <g/>
</svg> </svg>
</div> </div>
</template> </template>
<script> <script>
// libs // libs
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
import { import {
dragMovelHandler, dragMovelHandler,
tansformElement, tansformElement,
relativeMove relativeMove,
} from './dragHelper'; } from './dragHelper';
// service // service
import {getPluginGraphsGraph} from '../../service'; import {getPluginGraphsGraph} from '../../service';
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
import interact from 'interactjs'; import interact from 'interactjs';
// for d3 drawing // for d3 drawing
import * as d3 from "d3"; import * as d3 from 'd3';
import * as dagre from "dagre"; import * as dagre from 'dagre';
export default { export default {
props: ['fitScreen', 'download', 'scale', 'curNode'], props: ['fitScreen', 'download', 'scale', 'curNode'],
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
computedWidth() { computedWidth() {
let scale = this.scale; let scale = this.scale;
return Math.floor(scale * 2 * 700); return Math.floor(scale * 2 * 700);
} },
}, },
data() { data() {
return { return {
...@@ -49,25 +49,27 @@ ...@@ -49,25 +49,27 @@
aEl.download = 'graph.png'; aEl.download = 'graph.png';
aEl.click(); aEl.click();
} }
} },
}, },
mounted() { mounted() {
this.getOriginChartsData(); this.getOriginChartsData();
let chartScope = this; let chartScope = this;
getPluginGraphsGraph().then(({errno, data}) => { getPluginGraphsGraph().then(({errno, data}) => {
var raw_data = data.data; let raw_data = data.data;
var data = raw_data; var data = raw_data;
// d3 svg drawing // d3 svg drawing
var g = new dagreD3.graphlib.Graph() let g = new dagreD3.graphlib.Graph()
.setGraph({}) .setGraph({})
.setDefaultEdgeLabel(function() { return {}; }); .setDefaultEdgeLabel(function() {
var render = new dagreD3.render(); return {};
var nodeKeys = []; });
let render = new dagreD3.render();
let nodeKeys = [];
var buildInputNodeLabel = function(inputNode) { let buildInputNodeLabel = function(inputNode) {
// TODO(daming-lu): need more complex compound node // TODO(daming-lu): need more complex compound node
var nodeLabel = 'id: ' + inputNode['name'] + '\n' let nodeLabel = 'id: ' + inputNode['name'] + '\n'
+ 'type: ' + inputNode['data_type'] + '\n' + 'type: ' + inputNode['data_type'] + '\n'
+ 'dims: ' + inputNode['shape'].join(' x '); + 'dims: ' + inputNode['shape'].join(' x ');
return nodeLabel; return nodeLabel;
...@@ -75,13 +77,13 @@ ...@@ -75,13 +77,13 @@
// add input nodes // add input nodes
for (var i=0; i<data['input'].length; ++i) { for (var i=0; i<data['input'].length; ++i) {
var curInputNode = data['input'][i]; let curInputNode = data['input'][i];
var nodeKey = curInputNode['name']; var nodeKey = curInputNode['name'];
g.setNode( g.setNode(
nodeKey, nodeKey,
{ {
label: buildInputNodeLabel(curInputNode), label: buildInputNodeLabel(curInputNode),
class: "input" class: 'input',
} }
); );
nodeKeys.push(nodeKey); nodeKeys.push(nodeKey);
...@@ -89,65 +91,65 @@ ...@@ -89,65 +91,65 @@
// add operator nodes then add edges from inputs to operator and from operator to output // add operator nodes then add edges from inputs to operator and from operator to output
for (var i=0; i<data['node'].length; ++i) { for (var i=0; i<data['node'].length; ++i) {
var curOperatorNode = data['node'][i]; let curOperatorNode = data['node'][i];
var nodeKey = 'opNode_' + i; var nodeKey = 'opNode_' + i;
// add operator node // add operator node
var curOpLabel = curOperatorNode['opType']; let curOpLabel = curOperatorNode['opType'];
g.setNode( g.setNode(
nodeKey, nodeKey,
{ {
label: curOpLabel + ' '.repeat(Math.floor(curOpLabel.length/5)), label: curOpLabel + ' '.repeat(Math.floor(curOpLabel.length/5)),
class: "operator" class: 'operator',
} }
); );
nodeKeys.push(nodeKey); nodeKeys.push(nodeKey);
// add output node // add output node
var outputNodeKey = curOperatorNode['output'][0]; let outputNodeKey = curOperatorNode['output'][0];
g.setNode( g.setNode(
outputNodeKey, outputNodeKey,
{ {
label: outputNodeKey + ' '.repeat(Math.floor(outputNodeKey.length/5)), label: outputNodeKey + ' '.repeat(Math.floor(outputNodeKey.length/5)),
class: "output" class: 'output',
} }
); );
nodeKeys.push(outputNodeKey); nodeKeys.push(outputNodeKey);
// add edges from inputs to node and from node to output // add edges from inputs to node and from node to output
for (var e=0; e<curOperatorNode['input'].length; ++e) { for (let e=0; e<curOperatorNode['input'].length; ++e) {
g.setEdge(curOperatorNode['input'][e], nodeKey); g.setEdge(curOperatorNode['input'][e], nodeKey);
} }
g.setEdge(nodeKey, curOperatorNode['output'][0]); g.setEdge(nodeKey, curOperatorNode['output'][0]);
} }
// TODO(daming-lu): add prettier styles to diff nodes // TODO(daming-lu): add prettier styles to diff nodes
var svg = d3.select("svg") let svg = d3.select('svg')
.attr("font-family", "sans-serif") .attr('font-family', 'sans-serif')
.attr("font-size", "28px"); .attr('font-size', '28px');
render(d3.select("svg g"), g); render(d3.select('svg g'), g);
// adjust viewBox so that the whole graph can be shown, with scroll bar // adjust viewBox so that the whole graph can be shown, with scroll bar
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) {
this.curNode = g.node(d); this.curNode = g.node(d);
var nodeType = this.curNode.class; let nodeType = this.curNode.class;
var nodeInfo = null; let nodeInfo = null;
if (nodeType === "operator") { if (nodeType === 'operator') {
var opIndex = d.slice(7); // remove prefix "opNode_" let opIndex = d.slice(7); // remove prefix "opNode_"
nodeInfo = data.node[opIndex]; nodeInfo = data.node[opIndex];
} else if (nodeType === "input") { } else if (nodeType === 'input') {
nodeInfo = data.input[d-1]; nodeInfo = data.input[d-1];
} else { } else {
nodeInfo = "output"; nodeInfo = 'output';
} }
chartScope.$emit('curNodeUpdated', chartScope.$emit('curNodeUpdated',
{ {
'nodeType': nodeType, 'nodeType': nodeType,
'nodeInfo': nodeInfo 'nodeInfo': nodeInfo,
}); });
}); });
}); });
...@@ -182,15 +184,15 @@ ...@@ -182,15 +184,15 @@
}, },
getBigImgEl() { getBigImgEl() {
return this.$refs.draggable return this.$refs.draggable;
}, },
getSmallImgEl() { getSmallImgEl() {
return this.$refs.small_img return this.$refs.small_img;
}, },
getSmallImgDragHandler() { getSmallImgDragHandler() {
return this.$refs.screen_handler return this.$refs.screen_handler;
}, },
addDragEventForImg() { addDragEventForImg() {
...@@ -210,7 +212,7 @@ ...@@ -210,7 +212,7 @@
relativeMove({triggerEl, x, y}, relativeEl); relativeMove({triggerEl, x, y}, relativeEl);
}); });
} },
}); });
interact('.screen-handler').draggable({ interact('.screen-handler').draggable({
...@@ -224,8 +226,8 @@ ...@@ -224,8 +226,8 @@
top: 0, top: 0,
left: 0, left: 0,
bottom: 1, bottom: 1,
right: 1 right: 1,
} },
}, },
// call this function on every dragmove event // call this function on every dragmove event
onmove(event) { onmove(event) {
...@@ -237,10 +239,10 @@ ...@@ -237,10 +239,10 @@
relativeMove({triggerEl, x, y}, relativeEl); relativeMove({triggerEl, x, y}, relativeEl);
}); });
} },
}); });
} },
} },
}; };
</script> </script>
<style lang="stylus"> <style lang="stylus">
......
frontend/src/graph/ui/Config.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-graph-config-com"> <div class="visual-dl-graph-config-com">
<div class="graph-config-upper"> <div class="graph-config-upper">
<v-btn <v-btn
class="visual-dl-graph-config-button" class="visual-dl-graph-config-button"
color="primary" color="primary"
@click="handleFitScreen" @click="handleFitScreen"
dark> dark>
<v-icon style="margin-right: 6px" size="20">fullscreen</v-icon> <v-icon
Fit &nbsp; to &nbsp; screen style="margin-right: 6px"
</v-btn> size="20">fullscreen</v-icon>
Fit &nbsp; to &nbsp; screen
</v-btn>
<v-btn <v-btn
class="visual-dl-graph-config-button" class="visual-dl-graph-config-button"
color="primary" color="primary"
@click="handleDownload" @click="handleDownload"
dark> dark>
<v-icon style="margin-right: 6px">file_download</v-icon> <v-icon style="margin-right: 6px">file_download</v-icon>
Download image Download image
</v-btn> </v-btn>
<v-slider <v-slider
label="Scale" label="Scale"
max="1" max="1"
min="0.1" min="0.1"
step="0.1" step="0.1"
v-model="config.scale" v-model="config.scale"
dark></v-slider> dark/>
</div> </div>
<div class="node-info"> <div class="node-info">
<h3>Node Info: </h3> <h3>Node Info: </h3>
<div v-if="curNode.nodeType === 'input'">
<div>Node Type: {{ curNode.nodeType }}</div>
<div>Name: {{curNode.nodeInfo.name}}</div>
<div>Shape: {{curNode.nodeInfo.shape}}</div>
<div>Data Type: {{curNode.nodeInfo.data_type}}</div>
</div>
<div v-else-if="curNode.nodeType === 'output'">
<div>Node Type: {{ curNode.nodeType }}</div>
</div>
<div v-else-if="curNode.nodeType === 'operator'">
<div>Node Type: {{ curNode.nodeType }}</div>
<div>Input: {{curNode.nodeInfo.input}}</div>
<div>Operator Type: {{curNode.nodeInfo.opType}}</div>
<div>Output: {{curNode.nodeInfo.output}}</div>
</div>
<div v-else>
</div> <div v-if="curNode.nodeType === 'input'">
</div> <div>Node Type: {{ curNode.nodeType }}</div>
<div>Name: {{ curNode.nodeInfo.name }}</div>
<div>Shape: {{ curNode.nodeInfo.shape }}</div>
<div>Data Type: {{ curNode.nodeInfo.data_type }}</div>
</div>
<div v-else-if="curNode.nodeType === 'output'">
<div>Node Type: {{ curNode.nodeType }}</div>
</div>
<div v-else-if="curNode.nodeType === 'operator'">
<div>Node Type: {{ curNode.nodeType }}</div>
<div>Input: {{ curNode.nodeInfo.input }}</div>
<div>Operator Type: {{ curNode.nodeInfo.opType }}</div>
<div>Output: {{ curNode.nodeInfo.output }}</div>
</div>
<div v-else/>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
props:['config', 'curNode'], props: ['config', 'curNode'],
methods: { methods: {
handleFitScreen() { handleFitScreen() {
this.$emit('fitScreen') this.$emit('fitScreen');
}, },
handleDownload() { handleDownload() {
this.$emit('download') this.$emit('download');
} },
} },
}; };
</script> </script>
<style lang="stylus"> <style lang="stylus">
......
frontend/src/high-dimensional/HighDimensional.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-page-container"> <div class="visual-dl-page-container">
<div class="visual-dl-page-left"> <div class="visual-dl-page-left">
<ui-chart <ui-chart
:config="config" :config="config"
:displayWordLabel="config.displayWordLabel" :display-word-label="config.displayWordLabel"
:searchText="config.searchText" :search-text="config.searchText"
:dimension="config.dimension" :dimension="config.dimension"
:embedding_data="embedding_data" :embedding_data="embedding_data"
></ui-chart> />
</div>
<div class="visual-dl-page-right">
<div class="visual-dl-page-config-container">
<ui-config
:config="config"
></ui-config>
</div>
</div>
</div> </div>
<div class="visual-dl-page-right">
<div class="visual-dl-page-config-container">
<ui-config
:config="config"
/>
</div>
</div>
</div>
</template> </template>
<script> <script>
import {getHighDimensionalDatasets} from '../service'; import {getHighDimensionalDatasets} from '../service';
import autoAdjustHeight from '../common/util/autoAdjustHeight'; import autoAdjustHeight from '../common/util/autoAdjustHeight';
import Config from './ui/Config' import Config from './ui/Config';
import Chart from './ui/Chart'; import Chart from './ui/Chart';
export default { export default {
...@@ -31,28 +31,28 @@ export default { ...@@ -31,28 +31,28 @@ export default {
'ui-chart': Chart, 'ui-chart': Chart,
}, },
name: 'HighDimensional', name: 'HighDimensional',
data () { data() {
return { return {
config: { config: {
searchText: '', searchText: '',
displayWordLabel: true, displayWordLabel: true,
dimension: "2", dimension: '2',
reduction: "tsne", reduction: 'tsne',
running: true running: true,
}, },
embedding_data: [] embedding_data: [],
} };
}, },
created() { created() {
this.fetchDatasets() this.fetchDatasets();
}, },
watch: { watch: {
'config.dimension': function(val) { 'config.dimension': function(val) {
this.fetchDatasets() this.fetchDatasets();
}, },
'config.reduction': function(val) { 'config.reduction': function(val) {
this.fetchDatasets() this.fetchDatasets();
} },
}, },
mounted() { mounted() {
autoAdjustHeight(); autoAdjustHeight();
...@@ -62,20 +62,20 @@ export default { ...@@ -62,20 +62,20 @@ export default {
// Fetch the data from the server. Passing dimension and reduction method // Fetch the data from the server. Passing dimension and reduction method
let params = { let params = {
dimension: this.config.dimension, dimension: this.config.dimension,
reduction: this.config.reduction reduction: this.config.reduction,
}; };
getHighDimensionalDatasets(params).then(({errno, data}) => { getHighDimensionalDatasets(params).then(({errno, data}) => {
var vector_data = data.embedding; let vector_data = data.embedding;
var labels = data.labels; let labels = data.labels;
for ( var i = 0; i < vector_data.length; i ++) { for ( let i = 0; i < vector_data.length; i ++) {
vector_data[i].push(labels[i]) vector_data[i].push(labels[i]);
} }
this.embedding_data = vector_data this.embedding_data = vector_data;
}); });
}, },
} },
}; };
</script> </script>
......
frontend/src/high-dimensional/ui/Chart.vue
浏览文件 @ db62d42b
<template> <template>
<v-card hover class="visual-dl-page-charts"> <v-card
<div ref="chartBox" class="visual-dl-chart-box" :style="computedStyle"> hover
</div> class="visual-dl-page-charts">
</v-card> <div
ref="chartBox"
class="visual-dl-chart-box"
:style="computedStyle"/>
</v-card>
</template> </template>
<script> <script>
...@@ -21,12 +25,12 @@ export default { ...@@ -21,12 +25,12 @@ export default {
computedStyle() { computedStyle() {
return 'height:' + this.height + 'px;' + return 'height:' + this.height + 'px;' +
'width:' + this.width + 'px;'; 'width:' + this.width + 'px;';
} },
}, },
created() {}, created() {},
mounted() { mounted() {
this.createChart(); this.createChart();
this.myChart.showLoading() this.myChart.showLoading();
this.set2DChartOptions(); this.set2DChartOptions();
this.setDisplayWordLabel(); this.setDisplayWordLabel();
...@@ -38,17 +42,17 @@ export default { ...@@ -38,17 +42,17 @@ export default {
series: [{ series: [{
// Grab the 'matched' series data // Grab the 'matched' series data
name: 'all', name: 'all',
data: val data: val,
}] }],
}); });
}, },
displayWordLabel: function(val) { displayWordLabel: function(val) {
this.setDisplayWordLabel() this.setDisplayWordLabel();
}, },
dimension: function(val) { dimension: function(val) {
this.myChart.clear() this.myChart.clear();
this.myChart.showLoading() this.myChart.showLoading();
if (val === "2") { if (val === '2') {
this.set2DChartOptions(); this.set2DChartOptions();
this.setDisplayWordLabel(); this.setDisplayWordLabel();
} else { } else {
...@@ -58,13 +62,13 @@ export default { ...@@ -58,13 +62,13 @@ export default {
}, },
searchText: function(val) { searchText: function(val) {
// Filter the data that has the hasPrefix // Filter the data that has the hasPrefix
var matched_words = [] let matched_words = [];
if (val != '') { if (val != '') {
val = val.toLowerCase() val = val.toLowerCase();
function hasPrefix(value) { function hasPrefix(value) {
var word = value[value.length - 1] let word = value[value.length - 1];
return (typeof word == "string" && word.toLowerCase().startsWith(val)) return (typeof word == 'string' && word.toLowerCase().startsWith(val));
} }
matched_words = this.embedding_data.filter(hasPrefix); matched_words = this.embedding_data.filter(hasPrefix);
...@@ -75,8 +79,8 @@ export default { ...@@ -75,8 +79,8 @@ export default {
series: [{ series: [{
// Grab the 'matched' series data // Grab the 'matched' series data
name: 'matched', name: 'matched',
data: matched_words data: matched_words,
}] }],
}); });
}, },
}, },
...@@ -87,25 +91,25 @@ export default { ...@@ -87,25 +91,25 @@ export default {
this.myChart = echarts.init(el); this.myChart = echarts.init(el);
}, },
set2DChartOptions() { set2DChartOptions() {
var typeD = "normal"; let typeD = 'normal';
var option = { let option = {
xAxis: {}, xAxis: {},
yAxis: {}, yAxis: {},
series: [{ series: [{
name: "all", name: 'all',
symbolSize: 10, symbolSize: 10,
data: this.embedding_data, data: this.embedding_data,
type: 'scatter', type: 'scatter',
}, },
{ {
name: "matched", name: 'matched',
animation: false, animation: false,
symbolSize: 10, symbolSize: 10,
data: [], data: [],
itemStyle: { itemStyle: {
normal: { normal: {
opacity: 1 opacity: 1,
} },
}, },
label: { label: {
normal: { normal: {
...@@ -113,37 +117,37 @@ export default { ...@@ -113,37 +117,37 @@ export default {
formatter: function(param) { formatter: function(param) {
return param.data[param.data.length - 1]; return param.data[param.data.length - 1];
}, },
position: 'top' position: 'top',
} },
}, },
type: 'scatter' type: 'scatter',
} },
] ],
}; };
this.myChart.setOption(option); this.myChart.setOption(option);
}, },
set3DChartOptions() { set3DChartOptions() {
var symbolSize = 2.5; let symbolSize = 2.5;
var option3d = { let option3d = {
grid3D: {}, grid3D: {},
xAxis3D: { xAxis3D: {
type: 'category' type: 'category',
}, },
yAxis3D: {}, yAxis3D: {},
xAxis3D: {}, xAxis3D: {},
zAxis3D: {}, zAxis3D: {},
dataset: { dataset: {
source: this.embedding_data source: this.embedding_data,
}, },
series: [ series: [
{ {
name: "all", name: 'all',
type: 'scatter3D', type: 'scatter3D',
symbolSize: symbolSize, symbolSize: symbolSize,
data: [] data: [],
}, },
{ {
name: "matched", name: 'matched',
animation: false, animation: false,
symbolSize: symbolSize, symbolSize: symbolSize,
data: [], data: [],
...@@ -153,13 +157,13 @@ export default { ...@@ -153,13 +157,13 @@ export default {
formatter: function(param) { formatter: function(param) {
return param.data[param.data.length - 1]; return param.data[param.data.length - 1];
}, },
position: 'top' position: 'top',
} },
}, },
type: 'scatter3D' type: 'scatter3D',
} },
] ],
} };
this.myChart.setOption(option3d); this.myChart.setOption(option3d);
}, },
setDisplayWordLabel() { setDisplayWordLabel() {
...@@ -173,16 +177,16 @@ export default { ...@@ -173,16 +177,16 @@ export default {
formatter: function(param) { formatter: function(param) {
return param.data[param.data.length - 1]; return param.data[param.data.length - 1];
}, },
position: 'top' position: 'top',
}, },
emphasis: { emphasis: {
show: true, show: true,
} },
} },
}] }],
}); });
}, },
} },
}; };
</script> </script>
......
frontend/src/high-dimensional/ui/Config.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-page-config-com"> <div class="visual-dl-page-config-com">
<v-text-field <v-text-field
label="Search" label="Search"
hint="Search by label" hint="Search by label"
v-model="config.searchText" v-model="config.searchText"
dark dark
></v-text-field> />
<v-checkbox class="visual-dl-page-config-checkbox" <v-checkbox
label="Display All Labels" class="visual-dl-page-config-checkbox"
v-model="config.displayWordLabel" dark></v-checkbox> label="Display All Labels"
v-model="config.displayWordLabel"
dark/>
<v-radio-group label="Dimension" v-model="config.dimension" dark> <v-radio-group
<v-radio label="2D" value="2"></v-radio> label="Dimension"
<v-radio label="3D" value="3"></v-radio> v-model="config.dimension"
</v-radio-group> dark>
<v-radio
label="2D"
value="2"/>
<v-radio
label="3D"
value="3"/>
</v-radio-group>
<v-radio-group label="Reduction Method" v-model="config.reduction" dark> <v-radio-group
<v-radio label="T-SNE" value="tsne"></v-radio> label="Reduction Method"
<v-radio label="PCA" value="pca"></v-radio> v-model="config.reduction"
</v-radio-group> dark>
<v-radio
label="T-SNE"
value="tsne"/>
<v-radio
label="PCA"
value="pca"/>
</v-radio-group>
<v-btn :color="config.running ? 'primary' : 'error'" <v-btn
v-model="config.running" :color="config.running ? 'primary' : 'error'"
@click="toggleAllRuns" v-model="config.running"
class="visual-dl-page-run-toggle" @click="toggleAllRuns"
dark block class="visual-dl-page-run-toggle"
> dark
{{config.running ? 'Running' : 'Stopped'}} block
</v-btn> >
</div> {{ config.running ? 'Running' : 'Stopped' }}
</v-btn>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
runsItems: Array, runsItems: Array,
config: Object config: Object,
}, },
data() { data() {
return { return {
...@@ -47,8 +65,8 @@ export default { ...@@ -47,8 +65,8 @@ export default {
methods: { methods: {
toggleAllRuns() { toggleAllRuns() {
this.config.running = !this.config.running; this.config.running = !this.config.running;
} },
} },
}; };
</script> </script>
......
frontend/src/histogram/Histogram.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-page-container"> <div class="visual-dl-page-container">
<div class="visual-dl-page-left"> <div class="visual-dl-page-left">
<ui-chart-page <ui-chart-page
:config="config" :config="config"
:runsItems="runsItems" :runs-items="runsItems"
:tagList="filteredTagsList" :tag-list="filteredTagsList"
:title="'Tags matching ' + config.groupNameReg" :title="'Tags matching ' + config.groupNameReg"
></ui-chart-page> />
<ui-chart-page <ui-chart-page
v-for="item in groupedTags" v-for="item in groupedTags"
:key="item.group" :key="item.group"
:config="config" :config="config"
:runsItems="runsItems" :runs-items="runsItems"
:tagList="item.tags" :tag-list="item.tags"
:title="item.group" :title="item.group"
></ui-chart-page> />
</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> </div>
<div class="visual-dl-page-right">
<div class="visual-dl-page-config-container">
<ui-config
:runs-items="runsItems"
:config="config"
/>
</div>
</div>
</div>
</template> </template>
<script> <script>
...@@ -37,15 +37,15 @@ import autoAdjustHeight from '../common/util/autoAdjustHeight'; ...@@ -37,15 +37,15 @@ import autoAdjustHeight from '../common/util/autoAdjustHeight';
export default { export default {
components: { components: {
'ui-config': Config, 'ui-config': Config,
'ui-chart-page': ChartPage 'ui-chart-page': ChartPage,
}, },
computed: { computed: {
runsItems() { runsItems() {
let runsArray = this.runsArray || []; let runsArray = this.runsArray || [];
return runsArray.map(item => { return runsArray.map((item) => {
return { return {
name: item, name: item,
value: item value: item,
}; };
}); });
}, },
...@@ -53,21 +53,21 @@ export default { ...@@ -53,21 +53,21 @@ export default {
let tags = this.tags; let tags = this.tags;
let runs = Object.keys(tags); let runs = Object.keys(tags);
let tagsArray = runs.map(run => Object.keys(tags[run])); let tagsArray = runs.map((run) => Object.keys(tags[run]));
let allUniqTags = uniq(flatten(tagsArray)); let allUniqTags = uniq(flatten(tagsArray));
// get the data for every chart // get the data for every chart
return allUniqTags.map(tag => { return allUniqTags.map((tag) => {
let tagList = runs.map(run => { let tagList = runs.map((run) => {
return { return {
run, run,
tag: tags[run][tag] tag: tags[run][tag],
}; };
}).filter(item => item.tag !== undefined); }).filter((item) => item.tag !== undefined);
return { return {
tagList, tagList,
tag, tag,
group: tag.split('/')[0] group: tag.split('/')[0],
}; };
}); });
}, },
...@@ -75,26 +75,25 @@ export default { ...@@ -75,26 +75,25 @@ export default {
let tagsList = this.tagsList || []; let tagsList = this.tagsList || [];
// put data in group // put data in group
let groupData = {}; let groupData = {};
tagsList.forEach(item => { tagsList.forEach((item) => {
let group = item.group; let group = item.group;
if (groupData[group] === undefined) { if (groupData[group] === undefined) {
groupData[group] = []; groupData[group] = [];
groupData[group].push(item); groupData[group].push(item);
} } else {
else {
groupData[group].push(item); groupData[group].push(item);
} }
}); });
// to array // to array
let groups = Object.keys(groupData); let groups = Object.keys(groupData);
return groups.map(group => { return groups.map((group) => {
return { return {
group, group,
tags: groupData[group] tags: groupData[group],
}; };
}); });
} },
}, },
data() { data() {
return { return {
...@@ -105,21 +104,21 @@ export default { ...@@ -105,21 +104,21 @@ export default {
horizontal: 'step', horizontal: 'step',
chartType: 'offset', chartType: 'offset',
runs: [], runs: [],
running: true running: true,
}, },
filteredTagsList: [] filteredTagsList: [],
}; };
}, },
created() { created() {
getPluginHistogramsTags().then(({errno, data}) => { getPluginHistogramsTags().then(({errno, data}) => {
this.tags = data this.tags = data;
// filter when inited // filter when inited
let groupNameReg = this.config.groupNameReg; let groupNameReg = this.config.groupNameReg;
this.filterTagsList(groupNameReg); this.filterTagsList(groupNameReg);
}); });
getRuns().then(({errno, data}) => { getRuns().then(({errno, data}) => {
this.runsArray = data this.runsArray = data;
this.config.runs = data this.config.runs = data;
}); });
}, },
...@@ -128,26 +127,26 @@ export default { ...@@ -128,26 +127,26 @@ export default {
}, },
watch: { watch: {
'config.groupNameReg': function(val) { 'config.groupNameReg': function(val) {
this.throttledFilterTagsList() this.throttledFilterTagsList();
} },
}, },
methods: { methods: {
filterTagsList(groupNameReg) { filterTagsList(groupNameReg) {
if (!groupNameReg) { if (!groupNameReg) {
this.filteredTagsList = [] this.filteredTagsList = [];
return; return;
} }
let tagsList = this.tagsList || []; let tagsList = this.tagsList || [];
let regExp = new RegExp(groupNameReg); let regExp = new RegExp(groupNameReg);
let filtedTagsList = tagsList.filter(item => regExp.test(item.tag)); let filtedTagsList = tagsList.filter((item) => regExp.test(item.tag));
this.filteredTagsList = filtedTagsList this.filteredTagsList = filtedTagsList;
}, },
throttledFilterTagsList: _.debounce( throttledFilterTagsList: _.debounce(
function() { function() {
this.filterTagsList(this.config.groupNameReg) this.filterTagsList(this.config.groupNameReg);
}, 300 }, 300
), ),
} },
}; };
</script> </script>
......
frontend/src/histogram/histogramHelper.js
浏览文件 @ db62d42b
...@@ -7,7 +7,7 @@ export function tansformBackendData(histogramData) { ...@@ -7,7 +7,7 @@ export function tansformBackendData(histogramData) {
step, step,
min: min(items.map(([left, right, count]) => left)), min: min(items.map(([left, right, count]) => left)),
max: max(items.map(([left, right, count]) => right)), max: max(items.map(([left, right, count]) => right)),
items: items.map(([left, right, count]) => ({left, right, count})) items: items.map(([left, right, count]) => ({left, right, count})),
}; };
} }
...@@ -19,7 +19,7 @@ export function computeNewHistogram(histogram, min, max, binsNum = 30) { ...@@ -19,7 +19,7 @@ export function computeNewHistogram(histogram, min, max, binsNum = 30) {
} }
let stepWidth = (max - min) / binsNum; let stepWidth = (max - min) / binsNum;
let itemIndex = 0; let itemIndex = 0;
return range(min, max, stepWidth).map(binLeft => { return range(min, max, stepWidth).map((binLeft) => {
let binRight = binLeft + stepWidth; let binRight = binLeft + stepWidth;
let yValue = 0; let yValue = 0;
while (itemIndex < histogram.items.length) { while (itemIndex < histogram.items.length) {
...@@ -41,7 +41,7 @@ export function computeNewHistogram(histogram, min, max, binsNum = 30) { ...@@ -41,7 +41,7 @@ export function computeNewHistogram(histogram, min, max, binsNum = 30) {
} }
export function tansformToVisData(tempData, time, step) { export function tansformToVisData(tempData, time, step) {
return tempData.map(function (dataItem) { return tempData.map(function(dataItem) {
return [time, step, dataItem.x + dataItem.dx / 2, Math.floor(dataItem.y)]; return [time, step, dataItem.x + dataItem.dx / 2, Math.floor(dataItem.y)];
}); });
} }
...@@ -50,18 +50,18 @@ export function originDataToChartData(originData) { ...@@ -50,18 +50,18 @@ export function originDataToChartData(originData) {
let tempData = originData.map(tansformBackendData); let tempData = originData.map(tansformBackendData);
let globalMin = min(tempData.map(({min}) => min)); let globalMin = min(tempData.map(({min}) => min));
let globalMax = max(tempData.map(({max}) => max)); let globalMax = max(tempData.map(({max}) => max));
let chartData = tempData.map(function (item) { let chartData = tempData.map(function(item) {
let histoBins = computeNewHistogram(item, globalMin, globalMax); let histoBins = computeNewHistogram(item, globalMin, globalMax);
let {time, step} = item; let {time, step} = item;
return { return {
time, time,
step, step,
items: tansformToVisData(histoBins, time, step) items: tansformToVisData(histoBins, time, step),
}; };
}); });
return { return {
min: globalMin, min: globalMin,
max: globalMax, max: globalMax,
chartData chartData,
}; };
} }
frontend/src/histogram/index.js
浏览文件 @ db62d42b
...@@ -5,5 +5,5 @@ import Histogram from './Histogram'; ...@@ -5,5 +5,5 @@ import Histogram from './Histogram';
router.add({ router.add({
target: '#content', target: '#content',
rule: '/histograms', rule: '/histograms',
Component: Histogram Component: Histogram,
}); });
frontend/src/histogram/ui/Chart.vue
浏览文件 @ db62d42b
<template> <template>
<v-card hover class="visual-dl-page-charts"> <v-card
<div class="visual-dl-chart-box" ref="visual_dl_chart_box"> hover
</div> class="visual-dl-page-charts">
<div class="visual-dl-chart-actions"> <div
<v-btn color="toolbox_icon" flat icon @click="isExpand = !isExpand" class="chart-toolbox-icons" > class="visual-dl-chart-box"
<img v-if="!isExpand" src="../../assets/ic_fullscreen_off.svg"/> ref="visual_dl_chart_box"/>
<img v-if="isExpand" src="../../assets/ic_fullscreen_on.svg"/> <div class="visual-dl-chart-actions">
</v-btn> <v-btn
</div> color="toolbox_icon"
</v-card> flat
icon
@click="isExpand = !isExpand"
class="chart-toolbox-icons" >
<img
v-if="!isExpand"
src="../../assets/ic_fullscreen_off.svg">
<img
v-if="isExpand"
src="../../assets/ic_fullscreen_on.svg">
</v-btn>
</div>
</v-card>
</template> </template>
<script> <script>
// libs // libs
...@@ -32,7 +44,7 @@ export default { ...@@ -32,7 +44,7 @@ export default {
data() { data() {
return { return {
originData: [], originData: [],
isExpand: false isExpand: false,
}; };
}, },
watch: { watch: {
...@@ -47,7 +59,7 @@ export default { ...@@ -47,7 +59,7 @@ export default {
}, },
isExpand: function(val) { isExpand: function(val) {
this.expandArea(val); this.expandArea(val);
} },
}, },
mounted() { mounted() {
let tagInfo = this.tagInfo; let tagInfo = this.tagInfo;
...@@ -68,7 +80,7 @@ export default { ...@@ -68,7 +80,7 @@ export default {
}, },
createChart() { createChart() {
let el = this.$refs.visual_dl_chart_box let el = this.$refs.visual_dl_chart_box;
this.myChart = echarts.init(el); this.myChart = echarts.init(el);
}, },
...@@ -77,7 +89,7 @@ export default { ...@@ -77,7 +89,7 @@ export default {
let zr = this.myChart.getZr(); let zr = this.myChart.getZr();
let hoverDots = zrDrawElement.hoverDots; let hoverDots = zrDrawElement.hoverDots;
if (hoverDots != null && hoverDots.length !== 0) { if (hoverDots != null && hoverDots.length !== 0) {
hoverDots.forEach(dot => zr.remove(dot)); hoverDots.forEach((dot) => zr.remove(dot));
} }
let chartType = this.chartType; let chartType = this.chartType;
let data = this.originData; let data = this.originData;
...@@ -92,19 +104,18 @@ export default { ...@@ -92,19 +104,18 @@ export default {
left: 45, left: 45,
top: 60, top: 60,
right: 40, right: 40,
bottom: 36 bottom: 36,
}; };
let title = { let title = {
text: tag, text: tag,
textStyle: { textStyle: {
fontSize: '12', fontSize: '12',
fontWeight: 'normal' fontWeight: 'normal',
} },
}; };
if (chartType === 'overlay') { if (chartType === 'overlay') {
this.setOverlayChartOption(visData, title, grid); this.setOverlayChartOption(visData, title, grid);
} } else if (chartType === 'offset') {
else if (chartType === 'offset') {
this.setOffsetChartOption(visData, title, grid); this.setOffsetChartOption(visData, title, grid);
} }
}, },
...@@ -121,13 +132,13 @@ export default { ...@@ -121,13 +132,13 @@ export default {
lineStyle: { lineStyle: {
normal: { normal: {
width: 1, width: 1,
color: '#008c99' color: '#008c99',
} },
}, },
encode: { encode: {
x: [2], x: [2],
y: [3] y: [3],
} },
}) })
); );
let option = { let option = {
...@@ -136,40 +147,40 @@ export default { ...@@ -136,40 +147,40 @@ export default {
link: {xAxisIndex: 'all'}, link: {xAxisIndex: 'all'},
show: true, show: true,
snap: true, snap: true,
triggerTooltip: true triggerTooltip: true,
}, },
grid: grid, grid: grid,
xAxis: { xAxis: {
type: 'value' type: 'value',
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLine: { axisLine: {
onZero: false onZero: false,
}, },
axisLabel: { axisLabel: {
formatter(value, index) { formatter(value, index) {
return yValueFormat(value); return yValueFormat(value);
} },
}, },
axisPointer: { axisPointer: {
label: { label: {
formatter({value}) { formatter({value}) {
return yValueFormat(value); return yValueFormat(value);
} },
} },
} },
}, },
series: seriesOption series: seriesOption,
}; };
let zr1 = this.myChart.getZr(); let zr1 = this.myChart.getZr();
zr1.on('mousemove', function (e) { zr1.on('mousemove', function(e) {
zr1.remove(zrDrawElement.hoverLine); zr1.remove(zrDrawElement.hoverLine);
zr1.remove(zrDrawElement.tooltip); zr1.remove(zrDrawElement.tooltip);
zr1.remove(zrDrawElement.tooltipX); zr1.remove(zrDrawElement.tooltipX);
zr1.remove(zrDrawElement.tooltipY); zr1.remove(zrDrawElement.tooltipY);
zrDrawElement.hoverDots.forEach(dot => zr1.remove(dot)); zrDrawElement.hoverDots.forEach((dot) => zr1.remove(dot));
zrDrawElement.hoverDots.length = 0; zrDrawElement.hoverDots.length = 0;
}); });
...@@ -188,7 +199,7 @@ export default { ...@@ -188,7 +199,7 @@ export default {
grid.top = 126; grid.top = 126;
grid.left = 16; grid.left = 16;
grid.right = 40; grid.right = 40;
chartData.forEach(function (dataItem) { chartData.forEach(function(dataItem) {
let lineData = []; let lineData = [];
maxStep = Math.max(dataItem.step, maxStep); maxStep = Math.max(dataItem.step, maxStep);
minStep = Math.min(dataItem.step, minStep); minStep = Math.min(dataItem.step, minStep);
...@@ -202,7 +213,7 @@ export default { ...@@ -202,7 +213,7 @@ export default {
let option = { let option = {
textStyle: { textStyle: {
fontFamily: 'Merriweather Sans' fontFamily: 'Merriweather Sans',
}, },
title, title,
color: ['#006069'], color: ['#006069'],
...@@ -213,43 +224,43 @@ export default { ...@@ -213,43 +224,43 @@ export default {
max: maxStep, max: maxStep,
dimension: 1, dimension: 1,
inRange: { inRange: {
colorLightness: [0.2, 0.4] colorLightness: [0.2, 0.4],
} },
}, },
xAxis: { xAxis: {
min: minX, min: minX,
max: maxX, max: maxX,
axisLine: { axisLine: {
onZero: false onZero: false,
}, },
axisLabel: { axisLabel: {
fontSize: '11', fontSize: '11',
formatter: function (value) { formatter: function(value) {
return Math.round(value * 100) / 100; return Math.round(value * 100) / 100;
} },
}, },
splitLine: { splitLine: {
show: false show: false,
} },
}, },
yAxis: { yAxis: {
position: 'right', position: 'right',
axisLine: { axisLine: {
onZero: false onZero: false,
}, },
inverse: true, inverse: true,
splitLine: { splitLine: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
fontSize: '11' fontSize: '11',
} },
}, },
grid, grid,
series: [{ series: [{
type: 'custom', type: 'custom',
dimensions: ['x', 'y'], dimensions: ['x', 'y'],
renderItem: function (params, api) { renderItem: function(params, api) {
let points = makePolyPoints( let points = makePolyPoints(
params.dataIndex, params.dataIndex,
api.value, api.value,
...@@ -260,16 +271,16 @@ export default { ...@@ -260,16 +271,16 @@ export default {
type: 'polygon', type: 'polygon',
silent: true, silent: true,
shape: { shape: {
points points,
}, },
style: api.style({ style: api.style({
stroke: '#bbb', stroke: '#bbb',
lineWidth: 1 lineWidth: 1,
}) }),
}; };
}, },
data: rawData data: rawData,
}] }],
}; };
function makePolyPoints(dataIndex, getValue, getCoord, yValueMapHeight) { function makePolyPoints(dataIndex, getValue, getCoord, yValueMapHeight) {
...@@ -296,29 +307,29 @@ export default { ...@@ -296,29 +307,29 @@ export default {
if (zrDrawElement.hoverLine) { if (zrDrawElement.hoverLine) {
zr.remove(zrDrawElement.hoverLine); zr.remove(zrDrawElement.hoverLine);
zr.remove(zrDrawElement.tooltip); zr.remove(zrDrawElement.tooltip);
zrDrawElement.hoverDots.forEach(dot => zr.remove(dot)); zrDrawElement.hoverDots.forEach((dot) => zr.remove(dot));
zrDrawElement.hoverDots.length = 0; zrDrawElement.hoverDots.length = 0;
zr.remove(zrDrawElement.tooltipX); zr.remove(zrDrawElement.tooltipX);
zr.remove(zrDrawElement.tooltipY); zr.remove(zrDrawElement.tooltipY);
} }
} }
zr.on('mouseout', e => { zr.on('mouseout', (e) => {
removeTooltip(); removeTooltip();
}); });
zr.on('mousemove', e => { zr.on('mousemove', (e) => {
removeTooltip(); removeTooltip();
let nearestIndex = findNearestValue(e.offsetX, e.offsetY); let nearestIndex = findNearestValue(e.offsetX, e.offsetY);
if (nearestIndex) { if (nearestIndex) {
let getCoord = function (pt) { let getCoord = function(pt) {
return ecChart.convertToPixel('grid', pt); return ecChart.convertToPixel('grid', pt);
}; };
let gridRect = ecChart.getModel().getComponent('grid', 0).coordinateSystem.getRect(); let gridRect = ecChart.getModel().getComponent('grid', 0).coordinateSystem.getRect();
let linePoints = makePolyPoints( let linePoints = makePolyPoints(
nearestIndex.itemIndex, nearestIndex.itemIndex,
function (i) { function(i) {
return rawData[nearestIndex.itemIndex][i]; return rawData[nearestIndex.itemIndex][i];
}, },
getCoord, getCoord,
...@@ -328,17 +339,17 @@ export default { ...@@ -328,17 +339,17 @@ export default {
zr.add(zrDrawElement.hoverLine = new echarts.graphic.Polyline({ zr.add(zrDrawElement.hoverLine = new echarts.graphic.Polyline({
silent: true, silent: true,
shape: { shape: {
points: linePoints points: linePoints,
}, },
style: { style: {
stroke: '#5c5c5c', stroke: '#5c5c5c',
lineWidth: 2 lineWidth: 2,
}, },
z: 999 z: 999,
})); }));
let itemX; let itemX;
rawData.forEach(dataItem => { rawData.forEach((dataItem) => {
let binIndex = nearestIndex.binIndex; let binIndex = nearestIndex.binIndex;
let x = dataItem[binIndex * 3]; let x = dataItem[binIndex * 3];
let y = dataItem[binIndex * 3 + 1]; let y = dataItem[binIndex * 3 + 1];
...@@ -349,14 +360,14 @@ export default { ...@@ -349,14 +360,14 @@ export default {
shape: { shape: {
cx: pt[0], cx: pt[0],
cy: pt[1], cy: pt[1],
r: 3 r: 3,
}, },
style: { style: {
fill: '#000', fill: '#000',
stroke: '#ccc', stroke: '#ccc',
lineWidth: 1 lineWidth: 1,
}, },
z: 1000 z: 1000,
}); });
zr.add(dot); zr.add(dot);
zrDrawElement.hoverDots.push(dot); zrDrawElement.hoverDots.push(dot);
...@@ -375,16 +386,16 @@ export default { ...@@ -375,16 +386,16 @@ export default {
textBorderWidth: 2, textBorderWidth: 2,
textBorderRadius: 5, textBorderRadius: 5,
textPadding: 10, textPadding: 10,
rich: {} rich: {},
}, },
z: 2000 z: 2000,
}); });
zr.add(zrDrawElement.tooltip); zr.add(zrDrawElement.tooltip);
zrDrawElement.tooltipX = new echarts.graphic.Text({ zrDrawElement.tooltipX = new echarts.graphic.Text({
position: [ position: [
itemX, itemX,
gridRect.y + gridRect.height gridRect.y + gridRect.height,
], ],
style: { style: {
fontFamily: 'Merriweather Sans', fontFamily: 'Merriweather Sans',
...@@ -395,16 +406,16 @@ export default { ...@@ -395,16 +406,16 @@ export default {
textBackgroundColor: '#333', textBackgroundColor: '#333',
textBorderWidth: 2, textBorderWidth: 2,
textPadding: [5, 7], textPadding: [5, 7],
rich: {} rich: {},
}, },
z: 2000 z: 2000,
}); });
zr.add(zrDrawElement.tooltipX); zr.add(zrDrawElement.tooltipX);
zrDrawElement.tooltipY = new echarts.graphic.Text({ zrDrawElement.tooltipY = new echarts.graphic.Text({
position: [ position: [
gridRect.x + gridRect.width, gridRect.x + gridRect.width,
linePoints[linePoints.length - 1][1] linePoints[linePoints.length - 1][1],
], ],
style: { style: {
fontFamily: 'Merriweather Sans', fontFamily: 'Merriweather Sans',
...@@ -415,9 +426,9 @@ export default { ...@@ -415,9 +426,9 @@ export default {
textBackgroundColor: '#333', textBackgroundColor: '#333',
textBorderWidth: 2, textBorderWidth: 2,
textPadding: [5, 7], textPadding: [5, 7],
rich: {} rich: {},
}, },
z: 2000 z: 2000,
}); });
zr.add(zrDrawElement.tooltipY); zr.add(zrDrawElement.tooltipY);
} }
...@@ -448,7 +459,7 @@ export default { ...@@ -448,7 +459,7 @@ export default {
if (binIndex != null) { if (binIndex != null) {
return { return {
itemIndex: itemIndex, itemIndex: itemIndex,
binIndex: binIndex binIndex: binIndex,
}; };
} }
} }
...@@ -469,11 +480,11 @@ export default { ...@@ -469,11 +480,11 @@ export default {
}, },
getOriginChartData(tagInfo) { getOriginChartData(tagInfo) {
let run = tagInfo.run let run = tagInfo.run;
let tag = tagInfo.tag let tag = tagInfo.tag;
let params = { let params = {
run, run,
tag: tag.displayName tag: tag.displayName,
}; };
getPluginHistogramsHistograms(params).then(({status, data}) => { getPluginHistogramsHistograms(params).then(({status, data}) => {
if (status === 0) { if (status === 0) {
...@@ -484,7 +495,7 @@ export default { ...@@ -484,7 +495,7 @@ export default {
expandArea(expand) { expandArea(expand) {
let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page')[0].offsetWidth; let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page')[0].offsetWidth;
let width = pageBoxWidth * 0.96; //4% margin let width = pageBoxWidth * 0.96; // 4% margin
if (expand) { if (expand) {
let el = this.$refs.visual_dl_chart_box; let el = this.$refs.visual_dl_chart_box;
el.style.width = width + 'px'; el.style.width = width + 'px';
...@@ -492,21 +503,20 @@ export default { ...@@ -492,21 +503,20 @@ export default {
this.isExpand = true; this.isExpand = true;
this.myChart.resize({ this.myChart.resize({
width: width, width: width,
height: 600 height: 600,
}); });
} } else {
else {
let el = this.$refs.visual_dl_chart_box; let el = this.$refs.visual_dl_chart_box;
el.style.width = '400px'; el.style.width = '400px';
el.style.height = '300px'; el.style.height = '300px';
this.isExpand = false; this.isExpand = false;
this.myChart.resize({ this.myChart.resize({
width: 400, width: 400,
height: 300 height: 300,
}); });
} }
} },
} },
}; };
</script> </script>
<style lang="stylus"> <style lang="stylus">
......
frontend/src/histogram/ui/ChartPage.vue
浏览文件 @ db62d42b
<template> <template>
<!-- ClassName visual-dl-chart-page used in chart.san, change they all if you need!--> <!-- ClassName visual-dl-chart-page used in chart.san, change they all if you need!-->
<div class="visual-dl-chart-page"> <div class="visual-dl-chart-page">
<ui-expand-panel :info="total" :title="title"> <ui-expand-panel
<div class="visual-dl-chart-page-box"> :info="total"
<ui-chart :title="title">
v-for="(tagInfo, index) in filteredPageList" <div class="visual-dl-chart-page-box">
:key="index" <ui-chart
:tagInfo="tagInfo" v-for="(tagInfo, index) in filteredPageList"
:runs="config.runs" :key="index"
:chartType="config.chartType" :tag-info="tagInfo"
:running="config.running" :runs="config.runs"
:runsItems="runsItems" :chart-type="config.chartType"
></ui-chart> :running="config.running"
</div> :runs-items="runsItems"
<v-pagination class="visual-dl-sm-pagination" />
v-if="total > pageSize" </div>
v-model="currentPage" <v-pagination
:length="pageLength" class="visual-dl-sm-pagination"
></v-pagination> v-if="total > pageSize"
</ui-expand-panel> v-model="currentPage"
</div> :length="pageLength"
/>
</ui-expand-panel>
</div>
</template> </template>
<script> <script>
import ExpandPanel from '../../common/component/ExpandPanel'; import ExpandPanel from '../../common/component/ExpandPanel';
...@@ -39,8 +42,8 @@ export default { ...@@ -39,8 +42,8 @@ export default {
let tagList = this.tagList || []; let tagList = this.tagList || [];
let runs = this.config.runs || []; let runs = this.config.runs || [];
let list = cloneDeep(tagList); let list = cloneDeep(tagList);
return flatten(list.slice().map(item => { return flatten(list.slice().map((item) => {
return item.tagList.filter(one => runs.includes(one.run)); return item.tagList.filter((one) => runs.includes(one.run));
})); }));
}, },
...@@ -55,23 +58,23 @@ export default { ...@@ -55,23 +58,23 @@ export default {
return list.length; return list.length;
}, },
pageLength() { pageLength() {
return Math.ceil(this.total / this.pageSize) return Math.ceil(this.total / this.pageSize);
} },
}, },
data() { data() {
return { return {
// current page // current page
currentPage: 1, currentPage: 1,
// item per page // item per page
pageSize: 4 pageSize: 4,
}; };
}, },
methods: { methods: {
handlePageChange({pageNum}) { handlePageChange({pageNum}) {
this.currentPage = pageNum; this.currentPage = pageNum;
} },
} },
}; };
</script> </script>
<style lang="stylus"> <style lang="stylus">
......
frontend/src/histogram/ui/Config.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-page-config-com"> <div class="visual-dl-page-config-com">
<v-text-field <v-text-field
label="Group name RegExp" label="Group name RegExp"
hint="input a tag group name to search" hint="input a tag group name to search"
v-model="config.groupNameReg" v-model="config.groupNameReg"
dark dark
></v-text-field> />
<v-radio-group label="Histogram mode" v-model="config.chartType" dark> <v-radio-group
<v-radio v-for="mode in chartTypeItems" :key="mode.name" label="Histogram mode"
:label="mode.name" :value="mode.value"></v-radio> v-model="config.chartType"
</v-radio-group> dark>
<v-radio
v-for="mode in chartTypeItems"
:key="mode.name"
:label="mode.name"
:value="mode.value"/>
</v-radio-group>
<label class="visual-dl-page-checkbox-group-label">Runs</label> <label class="visual-dl-page-checkbox-group-label">Runs</label>
<v-checkbox v-for="item in runsItems" <v-checkbox
:key="item.name" v-for="item in runsItems"
:label="item.name" :key="item.name"
:value="item.value" :label="item.name"
v-model="config.runs" :value="item.value"
dark v-model="config.runs"
></v-checkbox> dark
/>
<v-btn class="visual-dl-page-run-toggle" <v-btn
:color="config.running ? 'primary' : 'error'" class="visual-dl-page-run-toggle"
v-model="config.running" :color="config.running ? 'primary' : 'error'"
@click="toggleAllRuns" v-model="config.running"
dark block @click="toggleAllRuns"
> dark
{{config.running ? 'Running' : 'Stopped'}} block
</v-btn> >
</div> {{ config.running ? 'Running' : 'Stopped' }}
</v-btn>
</div>
</template> </template>
<script> <script>
export default { export default {
...@@ -39,21 +48,21 @@ export default { ...@@ -39,21 +48,21 @@ export default {
chartTypeItems: [ chartTypeItems: [
{ {
name: 'Overlay', name: 'Overlay',
value: 'overlay' value: 'overlay',
}, },
{ {
name: 'Offset', name: 'Offset',
value: 'offset' value: 'offset',
} },
] ],
}; };
}, },
methods: { methods: {
toggleAllRuns() { toggleAllRuns() {
let running = this.config.running; let running = this.config.running;
this.config.running = !running; this.config.running = !running;
} },
} },
}; };
</script> </script>
<style lang="stylus"> <style lang="stylus">
......
frontend/src/images/Images.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-page-container"> <div class="visual-dl-page-container">
<div class="visual-dl-page-left"> <div class="visual-dl-page-left">
<ui-chart-page <ui-chart-page
:expand="true" :expand="true"
:config="filteredConfig" :config="filteredConfig"
:runsItems="runsItems" :runs-items="runsItems"
:tagList="filteredTagsList" :tag-list="filteredTagsList"
:title="'Tags matching ' + config.groupNameReg" :title="'Tags matching ' + config.groupNameReg"
></ui-chart-page> />
<ui-chart-page <ui-chart-page
v-for="item in groupedTags" v-for="item in groupedTags"
:key="item.group" :key="item.group"
:config="filteredConfig" :config="filteredConfig"
:runsItems="runsItems" :runs-items="runsItems"
:tagList="item.tags" :tag-list="item.tags"
:title="item.group" :title="item.group"
></ui-chart-page> />
</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> </div>
<div class="visual-dl-page-right">
<div class="visual-dl-page-config-container">
<ui-config
:runs-items="runsItems"
:config="config"
/>
</div>
</div>
</div>
</template> </template>
<script> <script>
...@@ -32,16 +34,16 @@ import {getPluginImagesTags, getRuns} from '../service'; ...@@ -32,16 +34,16 @@ import {getPluginImagesTags, getRuns} from '../service';
import {debounce, flatten, uniq, isArray} from 'lodash'; import {debounce, flatten, uniq, isArray} from 'lodash';
import autoAdjustHeight from '../common/util/autoAdjustHeight'; import autoAdjustHeight from '../common/util/autoAdjustHeight';
import Config from './ui/Config' import Config from './ui/Config';
import ChartPage from './ui/ChartPage'; import ChartPage from './ui/ChartPage';
export default { export default {
name: 'Images', name: 'Images',
components: { components: {
'ui-config': Config, 'ui-config': Config,
'ui-chart-page': ChartPage 'ui-chart-page': ChartPage,
}, },
data () { data() {
return { return {
runsArray: [], runsArray: [],
tags: [], tags: [],
...@@ -49,18 +51,18 @@ export default { ...@@ -49,18 +51,18 @@ export default {
groupNameReg: '.*', groupNameReg: '.*',
isActualImageSize: false, isActualImageSize: false,
runs: [], runs: [],
running: true running: true,
}, },
filteredTagsList: [] filteredTagsList: [],
} };
}, },
computed: { computed: {
runsItems() { runsItems() {
let runsArray = this.runsArray || []; let runsArray = this.runsArray || [];
return runsArray.map(item => { return runsArray.map((item) => {
return { return {
name: item, name: item,
value: item value: item,
}; };
}); });
}, },
...@@ -68,21 +70,21 @@ export default { ...@@ -68,21 +70,21 @@ export default {
let tags = this.tags; let tags = this.tags;
let runs = Object.keys(tags); let runs = Object.keys(tags);
let tagsArray = runs.map(run => Object.keys(tags[run])); let tagsArray = runs.map((run) => Object.keys(tags[run]));
let allUniqTags = uniq(flatten(tagsArray)); let allUniqTags = uniq(flatten(tagsArray));
// get the data for every chart // get the data for every chart
return allUniqTags.map(tag => { return allUniqTags.map((tag) => {
let tagList = runs.map(run => { let tagList = runs.map((run) => {
return { return {
run, run,
tag: tags[run][tag] tag: tags[run][tag],
}; };
}).filter(item => item.tag !== undefined); }).filter((item) => item.tag !== undefined);
return { return {
tagList, tagList,
tag, tag,
group: tag.split('/')[0] group: tag.split('/')[0],
}; };
}); });
}, },
...@@ -90,23 +92,22 @@ export default { ...@@ -90,23 +92,22 @@ export default {
let tagsList = this.tagsList || []; let tagsList = this.tagsList || [];
// put data in group // put data in group
let groupData = {}; let groupData = {};
tagsList.forEach(item => { tagsList.forEach((item) => {
let group = item.group; let group = item.group;
if (groupData[group] === undefined) { if (groupData[group] === undefined) {
groupData[group] = []; groupData[group] = [];
groupData[group].push(item); groupData[group].push(item);
} } else {
else {
groupData[group].push(item); groupData[group].push(item);
} }
}); });
// to array // to array
let groups = Object.keys(groupData); let groups = Object.keys(groupData);
return groups.map(group => { return groups.map((group) => {
return { return {
group, group,
tags: groupData[group] tags: groupData[group],
}; };
}); });
}, },
...@@ -114,12 +115,12 @@ export default { ...@@ -114,12 +115,12 @@ export default {
let tansformArr = ['isActualImageSize']; let tansformArr = ['isActualImageSize'];
let config = this.config || {}; let config = this.config || {};
let filteredConfig = {}; let filteredConfig = {};
Object.keys(config).forEach(key => { Object.keys(config).forEach((key) => {
let val = config[key]; let val = config[key];
filteredConfig[key] = val; filteredConfig[key] = val;
}); });
return filteredConfig; return filteredConfig;
} },
}, },
created() { created() {
getPluginImagesTags().then(({errno, data}) => { getPluginImagesTags().then(({errno, data}) => {
...@@ -140,10 +141,10 @@ export default { ...@@ -140,10 +141,10 @@ export default {
}, },
watch: { watch: {
'config.groupNameReg': function(val) { 'config.groupNameReg': function(val) {
this.throttledFilterTagsList() this.throttledFilterTagsList();
} },
}, },
methods:{ methods: {
filterTagsList(groupNameReg) { filterTagsList(groupNameReg) {
if (!groupNameReg) { if (!groupNameReg) {
this.filteredTagsList = []; this.filteredTagsList = [];
...@@ -151,14 +152,14 @@ export default { ...@@ -151,14 +152,14 @@ export default {
} }
let tagsList = this.tagsList || []; let tagsList = this.tagsList || [];
let regExp = new RegExp(groupNameReg); let regExp = new RegExp(groupNameReg);
this.filteredTagsList = tagsList.filter(item => regExp.test(item.tag)); this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
}, },
throttledFilterTagsList: _.debounce( throttledFilterTagsList: _.debounce(
function() { function() {
this.filterTagsList(this.config.groupNameReg) this.filterTagsList(this.config.groupNameReg);
}, 300 }, 300
), ),
} },
}; };
</script> </script>
......
frontend/src/images/index.js
浏览文件 @ db62d42b
...@@ -5,5 +5,5 @@ import Images from './Images'; ...@@ -5,5 +5,5 @@ import Images from './Images';
router.add({ router.add({
target: '#content', target: '#content',
rule: '/images', rule: '/images',
Component: Images Component: Images,
}); });
frontend/src/images/ui/ChartPage.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-chart-page"> <div class="visual-dl-chart-page">
<ui-expand-panel :info="total" :title="title"> <ui-expand-panel
<ui-image :info="total"
class="visual-dl-chart-image" :title="title">
v-for="(tagInfo, index) in filteredPageList" <ui-image
:key="index" class="visual-dl-chart-image"
:tagInfo="tagInfo" v-for="(tagInfo, index) in filteredPageList"
:isActualImageSize="config.isActualImageSize" :key="index"
:runs="config.runs" :tag-info="tagInfo"
:running="config.running" :is-actual-image-size="config.isActualImageSize"
:runsItems="runsItems" :runs="config.runs"
></ui-image> :running="config.running"
:runs-items="runsItems"
/>
<v-pagination class="visual-dl-sm-pagination" <v-pagination
v-if="total > pageSize" class="visual-dl-sm-pagination"
v-model="currentPage" v-if="total > pageSize"
:length="pageLength" v-model="currentPage"
></v-pagination> :length="pageLength"
</ui-expand-panel> />
</div> </ui-expand-panel>
</div>
</template> </template>
<script> <script>
import ExpandPanel from '../../common/component/ExpandPanel'; import ExpandPanel from '../../common/component/ExpandPanel';
...@@ -37,8 +40,8 @@ export default { ...@@ -37,8 +40,8 @@ export default {
let tagList = this.tagList || []; let tagList = this.tagList || [];
let runs = this.config.runs || []; let runs = this.config.runs || [];
let list = cloneDeep(tagList); let list = cloneDeep(tagList);
return flatten(list.slice().map(item => { return flatten(list.slice().map((item) => {
return item.tagList.filter(one => runs.includes(one.run)); return item.tagList.filter((one) => runs.includes(one.run));
})); }));
}, },
...@@ -51,15 +54,15 @@ export default { ...@@ -51,15 +54,15 @@ export default {
return list.length; return list.length;
}, },
pageLength() { pageLength() {
return Math.ceil(this.total / this.pageSize) return Math.ceil(this.total / this.pageSize);
} },
}, },
data() { data() {
return { return {
// current page // current page
currentPage: 1, currentPage: 1,
// item per page // item per page
pageSize: 8 pageSize: 8,
}; };
}, },
}; };
......
frontend/src/images/ui/Config.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-page-config-com"> <div class="visual-dl-page-config-com">
<v-text-field <v-text-field
label="Group name RegExp" label="Group name RegExp"
hint="input a tag group name to search" hint="input a tag group name to search"
v-model="config.groupNameReg" v-model="config.groupNameReg"
dark dark
></v-text-field> />
<v-checkbox label="Show actual image size" v-model="config.isActualImageSize" dark></v-checkbox> <v-checkbox
label="Show actual image size"
<label class="visual-dl-page-checkbox-group-label">Runs</label> v-model="config.isActualImageSize"
<v-checkbox v-for="item in runsItems" dark/>
:key="item.name"
:label="item.name"
:value="item.value"
v-model="config.runs"
dark
></v-checkbox>
<v-btn :color="config.running ? 'primary' : 'error'" <label class="visual-dl-page-checkbox-group-label">Runs</label>
v-model="config.running" <v-checkbox
@click="toggleAllRuns" v-for="item in runsItems"
class="visual-dl-page-run-toggle" :key="item.name"
dark block :label="item.name"
> :value="item.value"
{{config.running ? 'Running' : 'Stopped'}} v-model="config.runs"
</v-btn> dark
</div> />
<v-btn
:color="config.running ? 'primary' : 'error'"
v-model="config.running"
@click="toggleAllRuns"
class="visual-dl-page-run-toggle"
dark
block
>
{{ config.running ? 'Running' : 'Stopped' }}
</v-btn>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
runsItems: Array, runsItems: Array,
config: Object config: Object,
}, },
data() { data() {
return { return {
...@@ -42,8 +48,8 @@ export default { ...@@ -42,8 +48,8 @@ export default {
methods: { methods: {
toggleAllRuns() { toggleAllRuns() {
this.config.running = !this.config.running; this.config.running = !this.config.running;
} },
} },
}; };
</script> </script>
......
frontend/src/images/ui/Image.vue
浏览文件 @ db62d42b
<template> <template>
<v-card hover class="visual-dl-image"> <v-card
<h3 class="visual-dl-image-title">{{tagInfo.tag.displayName}} hover
<span class="visual-dl-image-run-icon">{{tagInfo.run}}</span> class="visual-dl-image">
</h3> <h3 class="visual-dl-image-title">{{ tagInfo.tag.displayName }}
<p> <span class="visual-dl-image-run-icon">{{ tagInfo.run }}</span>
<span>Step:</span> </h3>
<span>{{imgData.step}}</span> <p>
<span class="visual-del-image-time">{{imgData.wall_time | formatTime}}</span> <span>Step:</span>
</p> <span>{{ imgData.step }}</span>
<v-slider :max="steps" <span class="visual-del-image-time">{{ imgData.wall_time | formatTime }}</span>
:min="slider.min" </p>
:step="1" <v-slider
v-model="currentIndex" :max="steps"
></v-slider> :min="slider.min"
:step="1"
v-model="currentIndex"
/>
<img :width="imageWidth" :height="imageHeight" :src="imgData.imgSrc" /> <img
</v-card> :width="imageWidth"
:height="imageHeight"
:src="imgData.imgSrc" >
</v-card>
</template> </template>
<script> <script>
import {getPluginImagesImages} from '../../service'; import {getPluginImagesImages} from '../../service';
...@@ -33,25 +39,25 @@ export default { ...@@ -33,25 +39,25 @@ export default {
return data.length - 1; return data.length - 1;
}, },
imageWidth() { imageWidth() {
return this.isActualImageSize ? this.imgData.width : defaultImgWidth return this.isActualImageSize ? this.imgData.width : defaultImgWidth;
}, },
imageHeight() { imageHeight() {
return this.isActualImageSize ? this.imgData.height : defaultImgHeight return this.isActualImageSize ? this.imgData.height : defaultImgHeight;
} },
}, },
filters: { filters: {
formatTime: function (value) { formatTime: function(value) {
if (!value) { if (!value) {
return; return;
} }
// The value was made in seconds, must convert it to milliseconds // The value was made in seconds, must convert it to milliseconds
let time = new Date(value * 1000); let time = new Date(value * 1000);
var options = { let options = {
weekday: "short", year: "numeric", month: "short", weekday: 'short', year: 'numeric', month: 'short',
day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit" day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit',
}; };
return time.toLocaleDateString("en-US", options); return time.toLocaleDateString('en-US', options);
} },
}, },
data() { data() {
return { return {
...@@ -60,12 +66,12 @@ export default { ...@@ -60,12 +66,12 @@ export default {
value: '0', value: '0',
label: '', label: '',
min: 0, min: 0,
step: 1 step: 1,
}, },
imgData: {}, imgData: {},
data: [], data: [],
height: defaultImgHeight, height: defaultImgHeight,
weight: defaultImgWidth weight: defaultImgWidth,
}; };
}, },
created() { created() {
...@@ -82,7 +88,7 @@ export default { ...@@ -82,7 +88,7 @@ export default {
}, },
watch: { watch: {
running: function (val) { running: function(val) {
val ? this.startInterval() : this.stopInterval(); val ? this.startInterval() : this.stopInterval();
}, },
currentIndex: function(index) { currentIndex: function(index) {
...@@ -97,11 +103,11 @@ export default { ...@@ -97,11 +103,11 @@ export default {
height, height,
width, width,
step, step,
wall_time wall_time,
} };
} }
/* eslint-enable fecs-camelcase */ /* eslint-enable fecs-camelcase */
} },
}, },
methods: { methods: {
stopInterval() { stopInterval() {
...@@ -114,14 +120,14 @@ export default { ...@@ -114,14 +120,14 @@ export default {
}, intervalTime * 1000); }, intervalTime * 1000);
}, },
getOriginChartsData() { getOriginChartsData() {
//let {run, tag} = this.tagInfo; // let {run, tag} = this.tagInfo;
let run = this.tagInfo.run let run = this.tagInfo.run;
let tag = this.tagInfo.tag let tag = this.tagInfo.tag;
let {displayName, samples} = tag; let {displayName, samples} = tag;
let params = { let params = {
run, run,
tag: displayName, tag: displayName,
samples samples,
}; };
getPluginImagesImages(params).then(({status, data}) => { getPluginImagesImages(params).then(({status, data}) => {
if (status === 0) { if (status === 0) {
...@@ -129,8 +135,8 @@ export default { ...@@ -129,8 +135,8 @@ export default {
this.currentIndex = data.length - 1; this.currentIndex = data.length - 1;
} }
}); });
} },
} },
}; };
</script> </script>
<style lang="stylus"> <style lang="stylus">
......
frontend/src/index.js
浏览文件 @ db62d42b
// The Vue build version to load with the `import` command // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' import Vue from 'vue';
import App from './App' import App from './App';
import Vuetify from 'vuetify' import Vuetify from 'vuetify';
import router from '@/router' import router from '@/router';
Vue.config.productionTip = false Vue.config.productionTip = false;
Vue.use(Vuetify, { Vue.use(Vuetify, {
theme: { theme: {
primary: '#008c99', primary: '#008c99',
accent: '#008c99', accent: '#008c99',
toolbox_icon: '#999999' toolbox_icon: '#999999',
} },
}) });
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
...@@ -20,4 +20,4 @@ new Vue({ ...@@ -20,4 +20,4 @@ new Vue({
router, router,
components: {App}, components: {App},
template: '<App/>', template: '<App/>',
}) });
frontend/src/router/index.js
浏览文件 @ db62d42b
import Vue from 'vue' import Vue from 'vue';
import Router from 'vue-router' import Router from 'vue-router';
import Scalars from '@/scalars/Scalars' import Scalars from '@/scalars/Scalars';
import Histogram from '@/histogram/Histogram' import Histogram from '@/histogram/Histogram';
import Images from '@/images/Images' import Images from '@/images/Images';
import Graph from '@/graph/Graph' import Graph from '@/graph/Graph';
import Texts from '@/texts/Texts' import Texts from '@/texts/Texts';
import Audio from '@/audio/Audio' import Audio from '@/audio/Audio';
import HighDimensional from '@/high-dimensional/HighDimensional' import HighDimensional from '@/high-dimensional/HighDimensional';
Vue.use(Router) Vue.use(Router);
export default new Router({ export default new Router({
routes: [ routes: [
{ {
path: '/scalars', path: '/scalars',
name: 'Scalars', name: 'Scalars',
component: Scalars component: Scalars,
}, },
{ {
path: '/histograms', path: '/histograms',
name: 'Histograms', name: 'Histograms',
component: Histogram component: Histogram,
}, },
{ {
path: '/images', path: '/images',
name: 'Images', name: 'Images',
component: Images component: Images,
}, },
{ {
path: '/graphs', path: '/graphs',
name: 'Graph', name: 'Graph',
component: Graph component: Graph,
}, },
{ {
path: '/texts', path: '/texts',
name: 'Texts', name: 'Texts',
component: Texts component: Texts,
}, },
{ {
path: '/audio', path: '/audio',
name: 'Audio', name: 'Audio',
component: Audio component: Audio,
}, },
{ {
path: '/HighDimensional', path: '/HighDimensional',
name: 'HighDimensional', name: 'HighDimensional',
component: HighDimensional component: HighDimensional,
} },
] ],
}) });
frontend/src/scalars/Scalars.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-page-container"> <div class="visual-dl-page-container">
<div class="visual-dl-page-left"> <div class="visual-dl-page-left">
<ui-chart-page <ui-chart-page
:config="config" :config="config"
:runsItems="runsItems" :runs-items="runsItems"
:tagList="filteredTagsList" :tag-list="filteredTagsList"
:title="'Tags matching' + config.groupNameReg" :title="'Tags matching' + config.groupNameReg"
></ui-chart-page> />
<ui-chart-page <ui-chart-page
v-for="item in groupedTags" v-for="item in groupedTags"
:key="item.group" :key="item.group"
:config="config" :config="config"
:runsItems="runsItems" :runs-items="runsItems"
:tagList="item.tags" :tag-list="item.tags"
:title="item.group" :title="item.group"
></ui-chart-page> />
</div> </div>
<div class="visual-dl-page-right"> <div class="visual-dl-page-right">
<div class="visual-dl-page-config-container"> <div class="visual-dl-page-config-container">
<ui-config <ui-config
:runsItems="runsItems" :runs-items="runsItems"
:config="config" :config="config"
></ui-config> />
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -33,13 +33,13 @@ import {getPluginScalarsTags, getRuns} from '../service'; ...@@ -33,13 +33,13 @@ import {getPluginScalarsTags, getRuns} from '../service';
import {debounce, flatten, uniq, isArray} from 'lodash'; import {debounce, flatten, uniq, isArray} from 'lodash';
import autoAdjustHeight from '../common/util/autoAdjustHeight'; import autoAdjustHeight from '../common/util/autoAdjustHeight';
import Config from './ui/Config' import Config from './ui/Config';
import ChartPage from './ui/ChartPage'; import ChartPage from './ui/ChartPage';
export default { export default {
components: { components: {
'ui-config': Config, 'ui-config': Config,
'ui-chart-page': ChartPage 'ui-chart-page': ChartPage,
}, },
data() { data() {
return { return {
...@@ -52,18 +52,18 @@ export default { ...@@ -52,18 +52,18 @@ export default {
sortingMethod: 'default', sortingMethod: 'default',
outlier: false, outlier: false,
runs: [], runs: [],
running: true running: true,
}, },
filteredTagsList: [] filteredTagsList: [],
} };
}, },
computed: { computed: {
runsItems() { runsItems() {
let runsArray = this.runsArray || []; let runsArray = this.runsArray || [];
return runsArray.map(item => { return runsArray.map((item) => {
return { return {
name: item, name: item,
value: item value: item,
}; };
}); });
}, },
...@@ -71,21 +71,21 @@ export default { ...@@ -71,21 +71,21 @@ export default {
let tags = this.tags; let tags = this.tags;
let runs = Object.keys(tags); let runs = Object.keys(tags);
let tagsArray = runs.map(run => Object.keys(tags[run])); let tagsArray = runs.map((run) => Object.keys(tags[run]));
let allUniqTags = uniq(flatten(tagsArray)); let allUniqTags = uniq(flatten(tagsArray));
// get the data for every chart // get the data for every chart
return allUniqTags.map(tag => { return allUniqTags.map((tag) => {
let tagList = runs.map(run => { let tagList = runs.map((run) => {
return { return {
run, run,
tag: tags[run][tag] tag: tags[run][tag],
}; };
}).filter(item => item.tag !== undefined); }).filter((item) => item.tag !== undefined);
return { return {
tagList, tagList,
tag, tag,
group: tag.split('/')[0] group: tag.split('/')[0],
}; };
}); });
}, },
...@@ -93,23 +93,22 @@ export default { ...@@ -93,23 +93,22 @@ export default {
let tagsList = this.tagsList || []; let tagsList = this.tagsList || [];
// put data in group // put data in group
let groupData = {}; let groupData = {};
tagsList.forEach(item => { tagsList.forEach((item) => {
let group = item.group; let group = item.group;
if (groupData[group] === undefined) { if (groupData[group] === undefined) {
groupData[group] = []; groupData[group] = [];
groupData[group].push(item); groupData[group].push(item);
} } else {
else {
groupData[group].push(item); groupData[group].push(item);
} }
}); });
// to array // to array
let groups = Object.keys(groupData); let groups = Object.keys(groupData);
return groups.map(group => { return groups.map((group) => {
return { return {
group, group,
tags: groupData[group] tags: groupData[group],
}; };
}); });
}, },
...@@ -133,8 +132,8 @@ export default { ...@@ -133,8 +132,8 @@ export default {
}, },
watch: { watch: {
'config.groupNameReg': function(val) { 'config.groupNameReg': function(val) {
this.throttledFilterTagsList() this.throttledFilterTagsList();
} },
}, },
methods: { methods: {
filterTagsList(groupNameReg) { filterTagsList(groupNameReg) {
...@@ -144,14 +143,14 @@ export default { ...@@ -144,14 +143,14 @@ export default {
} }
let tagsList = this.tagsList || []; let tagsList = this.tagsList || [];
let regExp = new RegExp(groupNameReg); let regExp = new RegExp(groupNameReg);
this.filteredTagsList = tagsList.filter(item => regExp.test(item.tag)); this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
}, },
throttledFilterTagsList: _.debounce( throttledFilterTagsList: _.debounce(
function() { function() {
this.filterTagsList(this.config.groupNameReg) this.filterTagsList(this.config.groupNameReg);
}, 300 }, 300
), ),
} },
}; };
</script> </script>
......
frontend/src/scalars/index.js
浏览文件 @ db62d42b
...@@ -5,11 +5,11 @@ import Scalar from './Scalars'; ...@@ -5,11 +5,11 @@ import Scalar from './Scalars';
router.add({ router.add({
target: '#content', target: '#content',
rule: '/', rule: '/',
Component: Scalar Component: Scalar,
}); });
router.add({ router.add({
target: '#content', target: '#content',
rule: '/scalars', rule: '/scalars',
Component: Scalar Component: Scalar,
}); });
frontend/src/scalars/ui/Chart.vue
浏览文件 @ db62d42b
<template> <template>
<v-card hover class="visual-dl-page-charts"> <v-card
<div ref="chartBox" class="visual-dl-chart-box" :style="computedStyle"> hover
</div> class="visual-dl-page-charts">
<div class="visual-dl-chart-actions"> <div
<v-btn color="toolbox_icon" flat icon @click="isSelectZoomEnable = !isSelectZoomEnable" class="chart-toolbox-icons"> ref="chartBox"
<img v-if="!isSelectZoomEnable" src="../../assets/ic_zoom_select_off.svg"/> class="visual-dl-chart-box"
<img v-if="isSelectZoomEnable" src="../../assets/ic_zoom_select_on.svg"/> :style="computedStyle"/>
</v-btn> <div class="visual-dl-chart-actions">
<v-btn color="toolbox_icon" flat icon @click="restoreChart" class="chart-toolbox-icons"> <v-btn
<img src="../../assets/ic_undo.svg"/> color="toolbox_icon"
</v-btn> flat
<v-btn color="toolbox_icon" flat icon @click="isExpand = !isExpand" class="chart-toolbox-icons" > icon
<img v-if="!isExpand" src="../../assets/ic_fullscreen_off.svg"/> @click="isSelectZoomEnable = !isSelectZoomEnable"
<img v-if="isExpand" src="../../assets/ic_fullscreen_on.svg"/> class="chart-toolbox-icons">
</v-btn> <img
<v-btn color="toolbox_icon" flat icon @click="saveChartAsImage" class="chart-toolbox-icons" > v-if="!isSelectZoomEnable"
<img src="../../assets/ic_download.svg"/> src="../../assets/ic_zoom_select_off.svg">
</v-btn> <img
<v-menu v-if="tagInfo.tagList.length > 0"> v-if="isSelectZoomEnable"
<v-btn color="toolbox_icon" slot="activator" flat icon class="chart-toolbox-icons"> src="../../assets/ic_zoom_select_on.svg">
<v-icon >more_vert</v-icon> </v-btn>
</v-btn> <v-btn
<v-list dense> color="toolbox_icon"
<v-list-tile> flat
<v-list-tile-content> icon
<v-list-tile-title>Download data in JSON</v-list-tile-title> @click="restoreChart"
</v-list-tile-content> class="chart-toolbox-icons">
<v-list-tile-action> <img src="../../assets/ic_undo.svg">
<v-icon>expand_more</v-icon> </v-btn>
</v-list-tile-action> <v-btn
</v-list-tile> color="toolbox_icon"
flat
<v-list-tile v-for="subItem in tagInfo.tagList" :key="subItem.run" @click="handleDownLoad(subItem.run)"> icon
<v-list-tile-content> @click="isExpand = !isExpand"
<v-list-tile-title>&nbsp;&nbsp;&nbsp;{{ subItem.run }}</v-list-tile-title> class="chart-toolbox-icons" >
</v-list-tile-content> <img
</v-list-tile> v-if="!isExpand"
</v-list> src="../../assets/ic_fullscreen_off.svg">
</v-menu> <img
</div> v-if="isExpand"
</v-card> src="../../assets/ic_fullscreen_on.svg">
</v-btn>
<v-btn
color="toolbox_icon"
flat
icon
@click="saveChartAsImage"
class="chart-toolbox-icons" >
<img src="../../assets/ic_download.svg">
</v-btn>
<v-menu v-if="tagInfo.tagList.length > 0">
<v-btn
color="toolbox_icon"
slot="activator"
flat
icon
class="chart-toolbox-icons">
<v-icon >more_vert</v-icon>
</v-btn>
<v-list dense>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>Download data in JSON</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon>expand_more</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile
v-for="subItem in tagInfo.tagList"
:key="subItem.run"
@click="handleDownLoad(subItem.run)">
<v-list-tile-content>
<v-list-tile-title>&nbsp;&nbsp;&nbsp;{{ subItem.run }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-menu>
</div>
</v-card>
</template> </template>
<script> <script>
...@@ -68,7 +108,7 @@ export default { ...@@ -68,7 +108,7 @@ export default {
computedStyle() { computedStyle() {
return 'height:' + this.height + 'px;' return 'height:' + this.height + 'px;'
+ 'width:' + this.width + 'px;'; + 'width:' + this.width + 'px;';
} },
}, },
data() { data() {
return { return {
...@@ -76,7 +116,7 @@ export default { ...@@ -76,7 +116,7 @@ export default {
height: 300, height: 300,
isExpand: false, isExpand: false,
isSelectZoomEnable: true, isSelectZoomEnable: true,
originData: [] originData: [],
}; };
}, },
watch: { watch: {
...@@ -105,7 +145,7 @@ export default { ...@@ -105,7 +145,7 @@ export default {
}, },
isSelectZoomEnable: function(val) { isSelectZoomEnable: function(val) {
this.toggleSelectZoom(val); this.toggleSelectZoom(val);
} },
}, },
mounted() { mounted() {
this.initChart(this.tagInfo); this.initChart(this.tagInfo);
...@@ -138,7 +178,7 @@ export default { ...@@ -138,7 +178,7 @@ export default {
setChartsOptions({tagList, tag}) { setChartsOptions({tagList, tag}) {
// Create two lines, one line is original, the other line is for smoothing // Create two lines, one line is original, the other line is for smoothing
let seriesOption = tagList.map(item => [ let seriesOption = tagList.map((item) => [
{ {
name: item.run, name: item.run,
type: 'line', type: 'line',
...@@ -150,9 +190,9 @@ export default { ...@@ -150,9 +190,9 @@ export default {
lineStyle: { lineStyle: {
normal: { normal: {
opacity: originLinesOpacity, opacity: originLinesOpacity,
width: lineWidth width: lineWidth,
} },
} },
}, },
{ {
name: item.run, name: item.run,
...@@ -164,18 +204,18 @@ export default { ...@@ -164,18 +204,18 @@ export default {
animationDuration: 100, animationDuration: 100,
lineStyle: { lineStyle: {
normal: { normal: {
width: lineWidth width: lineWidth,
} },
} },
} },
] ]
); );
seriesOption = flatten(seriesOption); seriesOption = flatten(seriesOption);
let legendOptions = tagList.map(item => item.run); let legendOptions = tagList.map((item) => item.run);
let instance = this; let instance = this;
let option = { let option = {
textStyle: { textStyle: {
fontFamily: 'Merriweather Sans' fontFamily: 'Merriweather Sans',
}, },
color: [ color: [
'#008c99', '#008c99',
...@@ -187,19 +227,19 @@ export default { ...@@ -187,19 +227,19 @@ export default {
'#DD4477', '#DD4477',
'#AAAA11', '#AAAA11',
'#5574A6', '#5574A6',
'#8B0707' '#8B0707',
], ],
title: { title: {
text: tag, text: tag,
textStyle: { textStyle: {
fontSize: 13, fontSize: 13,
fontWeight: 'normal' fontWeight: 'normal',
} },
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
animation: true animation: true,
}, },
textStyle: { textStyle: {
fontSize: '13', fontSize: '13',
...@@ -208,7 +248,7 @@ export default { ...@@ -208,7 +248,7 @@ export default {
formatter(params, ticket, callback) { formatter(params, ticket, callback) {
let data = instance.getFormatterPoints(params[0].data); let data = instance.getFormatterPoints(params[0].data);
return instance.transformFormatterData(data); return instance.transformFormatterData(data);
} },
}, },
toolbox: { toolbox: {
show: true, show: true,
...@@ -220,20 +260,20 @@ export default { ...@@ -220,20 +260,20 @@ export default {
}, },
legend: { legend: {
data: legendOptions, data: legendOptions,
top: 39 top: 39,
}, },
grid: { grid: {
left: 48, left: 48,
top: 75, top: 75,
right: 40, right: 40,
bottom: 36 bottom: 36,
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
fontSize: '11' fontSize: '11',
}, },
splitNumber: this.isExpand ? 10 : 5 splitNumber: this.isExpand ? 10 : 5,
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
...@@ -241,10 +281,10 @@ export default { ...@@ -241,10 +281,10 @@ export default {
fontSize: '11', fontSize: '11',
formatter(value) { formatter(value) {
return value.toString().slice(0, 5); return value.toString().slice(0, 5);
} },
} },
}, },
series: seriesOption series: seriesOption,
}; };
this.myChart.setOption(option); this.myChart.setOption(option);
}, },
...@@ -261,22 +301,22 @@ export default { ...@@ -261,22 +301,22 @@ export default {
}, },
getOriginChartData({tagList, tag}) { getOriginChartData({tagList, tag}) {
let requestList = tagList.map(item => { let requestList = tagList.map((item) => {
let params = { let params = {
run: item.run, run: item.run,
tag: tag tag: tag,
}; };
return getPluginScalarsScalars(params); return getPluginScalarsScalars(params);
}); });
axios.all(requestList).then(resArray => { axios.all(requestList).then((resArray) => {
if (resArray.every(res => res.status === 0)) { if (resArray.every((res) => res.status === 0)) {
this.originData = resArray.map(res => res.data); this.originData = resArray.map((res) => res.data);
} }
}); });
}, },
setChartData() { setChartData() {
let seriesData = this.originData.map(lineData => { let seriesData = this.originData.map((lineData) => {
if (lineData.length == 0) return []; if (lineData.length == 0) return [];
// add the smoothed data // add the smoothed data
this.transformDataset(lineData); this.transformDataset(lineData);
...@@ -287,8 +327,8 @@ export default { ...@@ -287,8 +327,8 @@ export default {
// map 1 dimension to xAixs. // map 1 dimension to xAixs.
x: [1], x: [1],
// map 2 dimension to yAixs. // map 2 dimension to yAixs.
y: [2] y: [2],
} },
}, },
{ {
data: lineData, data: lineData,
...@@ -297,13 +337,13 @@ export default { ...@@ -297,13 +337,13 @@ export default {
x: [1], x: [1],
// Map 3 dimension to yAixs, // Map 3 dimension to yAixs,
// the third number is smoothed value. // the third number is smoothed value.
y: [3] y: [3],
} },
} },
]; ];
}); });
this.myChart.setOption({ this.myChart.setOption({
series: flatten(seriesData) series: flatten(seriesData),
}); });
}, },
...@@ -313,7 +353,7 @@ export default { ...@@ -313,7 +353,7 @@ export default {
handleDownLoad(runItemForDownload) { handleDownLoad(runItemForDownload) {
let options = this.getChartOptions(); let options = this.getChartOptions();
let series = options.series || []; let series = options.series || [];
let seriesItem = series.find(item => item.name === runItemForDownload) || {}; let seriesItem = series.find((item) => item.name === runItemForDownload) || {};
let fileName = this.tagInfo.tag.replace(/\//g, '-'); let fileName = this.tagInfo.tag.replace(/\//g, '-');
generateJsonAndDownload(seriesItem.data, fileName); generateJsonAndDownload(seriesItem.data, fileName);
}, },
...@@ -360,7 +400,7 @@ export default { ...@@ -360,7 +400,7 @@ export default {
// Chart outlier options methods and functions ---- start. // Chart outlier options methods and functions ---- start.
// Compute Y domain from originData. // Compute Y domain from originData.
setChartsOutlier() { setChartsOutlier() {
let domainRangeArray = this.originData.map(seriesData => this.computeDataRange(seriesData, this.outlier)); let domainRangeArray = this.originData.map((seriesData) => this.computeDataRange(seriesData, this.outlier));
// Compare, get the best Y domain. // Compare, get the best Y domain.
let flattenNumbers = flatten(domainRangeArray); let flattenNumbers = flatten(domainRangeArray);
...@@ -373,7 +413,6 @@ export default { ...@@ -373,7 +413,6 @@ export default {
this.setChartOutlierOptions(PaddedYDomain); this.setChartOutlierOptions(PaddedYDomain);
// Store Y domain, if originData is not change, Y domain keep same. // Store Y domain, if originData is not change, Y domain keep same.
}, },
// Compute max and min from array, if outlier is true, return quantile range. // Compute max and min from array, if outlier is true, return quantile range.
...@@ -384,14 +423,13 @@ export default { ...@@ -384,14 +423,13 @@ export default {
let min; let min;
if (!isQuantile) { if (!isQuantile) {
// Get the orgin data range. // Get the orgin data range.
max = maxBy(arr, item => item[2])[2]; max = maxBy(arr, (item) => item[2])[2];
min = minBy(arr, item => item[2])[2]; min = minBy(arr, (item) => item[2])[2];
} } else {
else {
// Get the quantile range. // Get the quantile range.
let sorted = sortBy(arr, [item => item[2]]); let sorted = sortBy(arr, [(item) => item[2]]);
min = quantile(sorted, minQuantile, item => item[2]); min = quantile(sorted, minQuantile, (item) => item[2]);
max = quantile(arr, maxQuantile, item => item[2]); max = quantile(arr, maxQuantile, (item) => item[2]);
} }
return [min, max]; return [min, max];
}, },
...@@ -399,7 +437,7 @@ export default { ...@@ -399,7 +437,7 @@ export default {
paddedYDomain(min, max) { paddedYDomain(min, max) {
return { return {
max: max > 0 ? max * 1.1 : max * 0.9, max: max > 0 ? max * 1.1 : max * 0.9,
min: min > 0 ? min * 0.9 : min * 1.1 min: min > 0 ? min * 0.9 : min * 1.1,
}; };
}, },
...@@ -407,84 +445,83 @@ export default { ...@@ -407,84 +445,83 @@ export default {
this.myChart.setOption({ this.myChart.setOption({
yAxis: { yAxis: {
min, min,
max max,
} },
}); });
}, },
// Chart horizontal options methods and functions ---- start. // Chart horizontal options methods and functions ---- start.
setChartHorizon() { setChartHorizon() {
let seriesOption = this.myChart.getOption().series; let seriesOption = this.myChart.getOption().series;
let encodeSeries = val => { let encodeSeries = (val) => {
return { return {
encode: { encode: {
x: [val] x: [val],
} },
}; };
}; };
let stepSeries = seriesOption.map(item => encodeSeries(1)); let stepSeries = seriesOption.map((item) => encodeSeries(1));
let relativeSeries = seriesOption.map(item => encodeSeries(4)); let relativeSeries = seriesOption.map((item) => encodeSeries(4));
let wallSeries = seriesOption.map(item => encodeSeries(0)); let wallSeries = seriesOption.map((item) => encodeSeries(0));
let horizontalToxAxisOptions = { let horizontalToxAxisOptions = {
step: { step: {
xAxis: { xAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
fontSize: '11' fontSize: '11',
}, },
splitNumber: this.isExpand ? 10 : 5 splitNumber: this.isExpand ? 10 : 5,
}, },
series: stepSeries series: stepSeries,
}, },
relative: { relative: {
xAxis: { xAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
fontSize: '11' fontSize: '11',
}, },
splitNumber: this.isExpand ? 10 : 5 splitNumber: this.isExpand ? 10 : 5,
}, },
series: relativeSeries series: relativeSeries,
}, },
wall: { wall: {
xAxis: { xAxis: {
type: 'time', type: 'time',
axisLabel: { axisLabel: {
fontSize: '11' fontSize: '11',
}, },
}, },
series: wallSeries series: wallSeries,
} },
}; };
this.myChart.setOption(horizontalToxAxisOptions[this.horizontal]); this.myChart.setOption(horizontalToxAxisOptions[this.horizontal]);
}, },
expandArea(expand) { expandArea(expand) {
let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page-box')[0].offsetWidth; let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page-box')[0].offsetWidth;
let width = pageBoxWidth * 0.96; //4% margin let width = pageBoxWidth * 0.96; // 4% margin
if (expand) { if (expand) {
let el = this.$refs.chartBox; let el = this.$refs.chartBox;
el.style.width = width + 'px'; el.style.width = width + 'px';
el.style.height = '600px'; el.style.height = '600px';
this.myChart.resize({ this.myChart.resize({
width: width, width: width,
height: 600 height: 600,
}); });
} } else {
else {
let el = this.$refs.chartBox; let el = this.$refs.chartBox;
el.style.width = '400px'; el.style.width = '400px';
el.style.height = '300px'; el.style.height = '300px';
this.myChart.resize({ this.myChart.resize({
width: 400, width: 400,
height: 300 height: 300,
}); });
} }
this.myChart.setOption({ this.myChart.setOption({
xAxis: { xAxis: {
splitNumber: this.isExpand ? 10 : 5 splitNumber: this.isExpand ? 10 : 5,
} },
}); });
}, },
...@@ -494,24 +531,24 @@ export default { ...@@ -494,24 +531,24 @@ export default {
instance.myChart.dispatchAction({ instance.myChart.dispatchAction({
type: 'takeGlobalCursor', type: 'takeGlobalCursor',
key: 'dataZoomSelect', key: 'dataZoomSelect',
dataZoomSelectActive: enable dataZoomSelectActive: enable,
}); });
}, 0) }, 0);
}, },
restoreChart() { restoreChart() {
this.myChart.dispatchAction({ this.myChart.dispatchAction({
type: 'restore' type: 'restore',
}) });
}, },
saveChartAsImage() { saveChartAsImage() {
let dataUrl = this.myChart.getDataURL({ let dataUrl = this.myChart.getDataURL({
pixelRatio: 1, pixelRatio: 1,
backgroundColor: '#fff' backgroundColor: '#fff',
}); });
let fileName = this.tagInfo.tag.replace(/\//g, '-'); let fileName = this.tagInfo.tag.replace(/\//g, '-');
let link = document.createElement("a"); let link = document.createElement('a');
link.download = fileName; link.download = fileName;
link.href = dataUrl; link.href = dataUrl;
document.body.appendChild(link); document.body.appendChild(link);
...@@ -530,9 +567,7 @@ export default { ...@@ -530,9 +567,7 @@ export default {
let nearestItem; let nearestItem;
if (step === 0) { if (step === 0) {
nearestItem = series[0]; nearestItem = series[0];
} else {
}
else {
for (let i = 0; i < series.length; i++) { for (let i = 0; i < series.length; i++) {
let item = series[i]; let item = series[i];
if (item[1] === step) { if (item[1] === step) {
...@@ -551,7 +586,7 @@ export default { ...@@ -551,7 +586,7 @@ export default {
} }
return { return {
run: tagList[index].run, run: tagList[index].run,
item: nearestItem item: nearestItem,
}; };
}); });
...@@ -561,15 +596,15 @@ export default { ...@@ -561,15 +596,15 @@ export default {
let sortedPoints; let sortedPoints;
switch (sortingMethod) { switch (sortingMethod) {
case 'descending': case 'descending':
sortedPoints = sortBy(points, one => one.item[3]); sortedPoints = sortBy(points, (one) => one.item[3]);
sortedPoints.reverse(); sortedPoints.reverse();
break; break;
case 'ascending': case 'ascending':
sortedPoints = sortBy(points, one => one.item[3]); sortedPoints = sortBy(points, (one) => one.item[3]);
break; break;
case 'nearest': case 'nearest':
// Compare other ponts width the trigger point, caculate the nearest sort. // Compare other ponts width the trigger point, caculate the nearest sort.
sortedPoints = sortBy(points, one => one.item[3] - triggerValue); sortedPoints = sortBy(points, (one) => one.item[3] - triggerValue);
break; break;
default: default:
sortedPoints = points; sortedPoints = points;
...@@ -583,7 +618,7 @@ export default { ...@@ -583,7 +618,7 @@ export default {
Step: 1, Step: 1,
Value: 2, Value: 2,
Smoothed: 3, Smoothed: 3,
Relative: 4 Relative: 4,
}; };
let widthPropMap = { let widthPropMap = {
Run: 40, Run: 40,
...@@ -591,9 +626,9 @@ export default { ...@@ -591,9 +626,9 @@ export default {
Step: 40, Step: 40,
Value: 50, Value: 50,
Smoothed: 60, Smoothed: 60,
Relative: 60 Relative: 60,
}; };
let transformedData = data.map(item => { let transformedData = data.map((item) => {
let data = item.item; let data = item.item;
return { return {
Run: item.run, Run: item.run,
...@@ -604,19 +639,19 @@ export default { ...@@ -604,19 +639,19 @@ export default {
Time: moment(Math.floor(data[indexPropMap.Time] * 1000), 'x').format('YYYY-MM-DD HH:mm:ss'), Time: moment(Math.floor(data[indexPropMap.Time] * 1000), 'x').format('YYYY-MM-DD HH:mm:ss'),
// Relative display value should take easy-read into consideration. // Relative display value should take easy-read into consideration.
// Better to tranform data to 'day:hour', 'hour:minutes', 'minute: seconds' and second only. // Better to tranform data to 'day:hour', 'hour:minutes', 'minute: seconds' and second only.
Relative: Math.floor(data[indexPropMap.Relative] * 60 * 60) + 's' Relative: Math.floor(data[indexPropMap.Relative] * 60 * 60) + 's',
}; };
}); });
let headerHtml = '<tr style="font-size:14px;">'; let headerHtml = '<tr style="font-size:14px;">';
headerHtml += Object.keys(transformedData[0]).map(key => { headerHtml += Object.keys(transformedData[0]).map((key) => {
return '<td style="padding: 0 4px; font-family: \'Merriweather Sans\'; font-weight: bold; width:' + widthPropMap[key] + 'px;">' + key + '</td>'; return '<td style="padding: 0 4px; font-family: \'Merriweather Sans\'; font-weight: bold; width:' + widthPropMap[key] + 'px;">' + key + '</td>';
}).join(''); }).join('');
headerHtml += '</tr>'; headerHtml += '</tr>';
let content = transformedData.map(item => { let content = transformedData.map((item) => {
let str = '<tr style="font-size:12px;">'; let str = '<tr style="font-size:12px;">';
str += Object.keys(item).map(val => { str += Object.keys(item).map((val) => {
return '<td style="padding: 0 4px">' + item[val] + '</td>'; return '<td style="padding: 0 4px">' + item[val] + '</td>';
}).join(''); }).join('');
str += '</tr>'; str += '</tr>';
...@@ -625,8 +660,8 @@ export default { ...@@ -625,8 +660,8 @@ export default {
return '<table style="text-align: left;table-layout: fixed;width: 480px;"><thead>' + headerHtml + '</thead>' return '<table style="text-align: left;table-layout: fixed;width: 480px;"><thead>' + headerHtml + '</thead>'
+ '<tbody>' + content + '</tbody><table>'; + '<tbody>' + content + '</tbody><table>';
} },
} },
}; };
</script> </script>
<style lang="stylus"> <style lang="stylus">
......
frontend/src/scalars/ui/ChartPage.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-chart-page"> <div class="visual-dl-chart-page">
<ui-expand-panel :info="tagList.length" :title="title"> <ui-expand-panel
<div ref="chartPageBox" class="visual-dl-chart-page-box"> :info="tagList.length"
<ui-chart :title="title">
v-for="(tagInfo, index) in filteredTagList" <div
:key="index" ref="chartPageBox"
:tagInfo="tagInfo" class="visual-dl-chart-page-box">
:groupNameReg="config.groupNameReg" <ui-chart
:smoothing="config.smoothing" v-for="(tagInfo, index) in filteredTagList"
:horizontal="config.horizontal" :key="index"
:sortingMethod="config.sortingMethod" :tag-info="tagInfo"
:outlier="config.outlier" :group-name-reg="config.groupNameReg"
:runs="config.runs" :smoothing="config.smoothing"
:running="config.running" :horizontal="config.horizontal"
:runsItems="runsItems" :sorting-method="config.sortingMethod"
></ui-chart> :outlier="config.outlier"
</div> :runs="config.runs"
<v-pagination :running="config.running"
v-if="total > pageSize" :runs-items="runsItems"
v-model="currentPage" />
:length="pageLength" </div>
/> <v-pagination
</ui-expand-panel> v-if="total > pageSize"
</div> v-model="currentPage"
:length="pageLength"
/>
</ui-expand-panel>
</div>
</template> </template>
<script> <script>
import ExpandPanel from '../../common/component/ExpandPanel'; import ExpandPanel from '../../common/component/ExpandPanel';
...@@ -41,31 +45,31 @@ export default { ...@@ -41,31 +45,31 @@ export default {
let tagList = this.tagList || []; let tagList = this.tagList || [];
let runs = this.config.runs || []; let runs = this.config.runs || [];
let list = cloneDeep(tagList); let list = cloneDeep(tagList);
return list.slice().map(item => { return list.slice().map((item) => {
item.tagList = item.tagList.filter(one => runs.includes(one.run)); item.tagList = item.tagList.filter((one) => runs.includes(one.run));
return item; return item;
}); });
}, },
filteredTagList() { filteredTagList() {
let tagList = this.filteredRunsList || []; let tagList = this.filteredRunsList || [];
return tagList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize); return tagList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
}, },
total() { total() {
let tagList = this.tagList || []; let tagList = this.tagList || [];
return tagList.length; return tagList.length;
}, },
pageLength() { pageLength() {
return Math.ceil(this.total / this.pageSize) return Math.ceil(this.total / this.pageSize);
} },
}, },
data() { data() {
return { return {
// current page // current page
currentPage: 1, currentPage: 1,
// item per page // item per page
pageSize: 8 pageSize: 8,
}; };
} },
}; };
</script> </script>
<style lang="stylus"> <style lang="stylus">
......
frontend/src/scalars/ui/Config.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-page-config-com"> <div class="visual-dl-page-config-com">
<v-text-field <v-text-field
label="Group name RegExp" label="Group name RegExp"
hint="input a tag group name" hint="input a tag group name"
v-model="config.groupNameReg" v-model="config.groupNameReg"
dark dark
></v-text-field> />
<div class="visual-dl-page-slider-block"> <div class="visual-dl-page-slider-block">
<v-slider label="Smoothing" <v-slider
:max="0.99" label="Smoothing"
:min="0" :max="0.99"
:step="0.01" :min="0"
v-model="smoothingValue" :step="0.01"
class="visual-dl-page-smoothing-slider" v-model="smoothingValue"
dark></v-slider> class="visual-dl-page-smoothing-slider"
<span class="visual-dl-page-slider-span">{{smoothingValue}}</span> dark/>
</div> <span class="visual-dl-page-slider-span">{{ smoothingValue }}</span>
</div>
<v-radio-group label="Horizontal" v-model="config.horizontal" dark> <v-radio-group
<v-radio label="Step" value="step"></v-radio> label="Horizontal"
<v-radio label="Relative" value="relative"></v-radio> v-model="config.horizontal"
<v-radio label="Wall" value="wall"></v-radio> dark>
</v-radio-group> <v-radio
label="Step"
value="step"/>
<v-radio
label="Relative"
value="relative"/>
<v-radio
label="Wall"
value="wall"/>
</v-radio-group>
<v-select <v-select
:items="sortingMethodItems" :items="sortingMethodItems"
v-model="config.sortingMethod" v-model="config.sortingMethod"
label="Tooltip sorting method" label="Tooltip sorting method"
class="visual-dl-page-config-selector" class="visual-dl-page-config-selector"
dark dense dark
></v-select> dense
/>
<v-checkbox class="visual-dl-page-config-checkbox" label="Ignore outliers in chart scaling" v-model="config.outlier" dark></v-checkbox> <v-checkbox
class="visual-dl-page-config-checkbox"
label="Ignore outliers in chart scaling"
v-model="config.outlier"
dark/>
<label class="visual-dl-page-checkbox-group-label">Runs</label> <label class="visual-dl-page-checkbox-group-label">Runs</label>
<v-checkbox v-for="item in runsItems" <v-checkbox
:key="item.name" v-for="item in runsItems"
:label="item.name" :key="item.name"
:value="item.value" :label="item.name"
v-model="config.runs" :value="item.value"
dark v-model="config.runs"
class="visual-dl-page-runs-checkbox" dark
></v-checkbox> class="visual-dl-page-runs-checkbox"
/>
<v-btn :color="config.running ? 'primary' : 'error'" <v-btn
v-model="config.running" :color="config.running ? 'primary' : 'error'"
@click="toggleAllRuns" v-model="config.running"
class="visual-dl-page-run-toggle" @click="toggleAllRuns"
dark block class="visual-dl-page-run-toggle"
> dark
{{config.running ? 'Running' : 'Stopped'}} block
</v-btn> >
</div> {{ config.running ? 'Running' : 'Stopped' }}
</v-btn>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
runsItems: Array, runsItems: Array,
config: Object config: Object,
}, },
data() { data() {
return { return {
horizontalItems: [ horizontalItems: [
{ {
name: 'Step', name: 'Step',
value: 'step' value: 'step',
}, },
{ {
name: 'Relative', name: 'Relative',
value: 'relative' value: 'relative',
}, },
{ {
name: 'Wall', name: 'Wall',
value: 'wall' value: 'wall',
} },
], ],
sortingMethodItems: [ sortingMethodItems: [
'default', 'descending', 'ascending', 'nearest' 'default', 'descending', 'ascending', 'nearest',
], ],
smoothingValue: this.config.smoothing smoothingValue: this.config.smoothing,
}; };
}, },
watch: { watch: {
...@@ -89,13 +107,13 @@ export default { ...@@ -89,13 +107,13 @@ export default {
function() { function() {
this.config.smoothing = this.smoothingValue; this.config.smoothing = this.smoothingValue;
}, 50 }, 50
) ),
}, },
methods: { methods: {
toggleAllRuns() { toggleAllRuns() {
this.config.running = !this.config.running; this.config.running = !this.config.running;
} },
} },
}; };
</script> </script>
......
frontend/src/texts/Texts.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-page-container"> <div class="visual-dl-page-container">
<div class="visual-dl-page-left"> <div class="visual-dl-page-left">
<ui-chart-page <ui-chart-page
:expand="true" :expand="true"
:config="filteredConfig" :config="filteredConfig"
:runsItems="runsItems" :runs-items="runsItems"
:tagList="filteredTagsList" :tag-list="filteredTagsList"
:title="'Tags matching ' + config.groupNameReg" :title="'Tags matching ' + config.groupNameReg"
></ui-chart-page> />
<ui-chart-page <ui-chart-page
v-for="item in groupedTags" v-for="item in groupedTags"
:key="item.group" :key="item.group"
:config="filteredConfig" :config="filteredConfig"
:runsItems="runsItems" :runs-items="runsItems"
:tagList="item.tags" :tag-list="item.tags"
:title="item.group" :title="item.group"
></ui-chart-page> />
</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> </div>
<div class="visual-dl-page-right">
<div class="visual-dl-page-config-container">
<ui-config
:runs-items="runsItems"
:config="config"
/>
</div>
</div>
</div>
</template> </template>
<script> <script>
...@@ -32,34 +34,34 @@ import {getPluginTextsTags, getRuns} from '../service'; ...@@ -32,34 +34,34 @@ import {getPluginTextsTags, getRuns} from '../service';
import {debounce, flatten, uniq, isArray} from 'lodash'; import {debounce, flatten, uniq, isArray} from 'lodash';
import autoAdjustHeight from '../common/util/autoAdjustHeight'; import autoAdjustHeight from '../common/util/autoAdjustHeight';
import Config from './ui/Config' import Config from './ui/Config';
import ChartPage from './ui/ChartPage'; import ChartPage from './ui/ChartPage';
export default { export default {
name: 'Texts', name: 'Texts',
components: { components: {
'ui-config': Config, 'ui-config': Config,
'ui-chart-page': ChartPage 'ui-chart-page': ChartPage,
}, },
data () { data() {
return { return {
runsArray: [], runsArray: [],
tags: [], tags: [],
config: { config: {
groupNameReg: '.*', groupNameReg: '.*',
runs: [], runs: [],
running: true running: true,
}, },
filteredTagsList: [] filteredTagsList: [],
} };
}, },
computed: { computed: {
runsItems() { runsItems() {
let runsArray = this.runsArray || []; let runsArray = this.runsArray || [];
return runsArray.map(item => { return runsArray.map((item) => {
return { return {
name: item, name: item,
value: item value: item,
}; };
}); });
}, },
...@@ -67,21 +69,21 @@ export default { ...@@ -67,21 +69,21 @@ export default {
let tags = this.tags; let tags = this.tags;
let runs = Object.keys(tags); let runs = Object.keys(tags);
let tagsArray = runs.map(run => Object.keys(tags[run])); let tagsArray = runs.map((run) => Object.keys(tags[run]));
let allUniqTags = uniq(flatten(tagsArray)); let allUniqTags = uniq(flatten(tagsArray));
// get the data for every chart // get the data for every chart
return allUniqTags.map(tag => { return allUniqTags.map((tag) => {
let tagList = runs.map(run => { let tagList = runs.map((run) => {
return { return {
run, run,
tag: tags[run][tag] tag: tags[run][tag],
}; };
}).filter(item => item.tag !== undefined); }).filter((item) => item.tag !== undefined);
return { return {
tagList, tagList,
tag, tag,
group: tag.split('/')[0] group: tag.split('/')[0],
}; };
}); });
}, },
...@@ -89,35 +91,34 @@ export default { ...@@ -89,35 +91,34 @@ export default {
let tagsList = this.tagsList || []; let tagsList = this.tagsList || [];
// put data in group // put data in group
let groupData = {}; let groupData = {};
tagsList.forEach(item => { tagsList.forEach((item) => {
let group = item.group; let group = item.group;
if (groupData[group] === undefined) { if (groupData[group] === undefined) {
groupData[group] = []; groupData[group] = [];
groupData[group].push(item); groupData[group].push(item);
} } else {
else {
groupData[group].push(item); groupData[group].push(item);
} }
}); });
// to array // to array
let groups = Object.keys(groupData); let groups = Object.keys(groupData);
return groups.map(group => { return groups.map((group) => {
return { return {
group, group,
tags: groupData[group] tags: groupData[group],
}; };
}); });
}, },
filteredConfig() { filteredConfig() {
let config = this.config || {}; let config = this.config || {};
let filteredConfig = {}; let filteredConfig = {};
Object.keys(config).forEach(key => { Object.keys(config).forEach((key) => {
let val = config[key]; let val = config[key];
filteredConfig[key] = val; filteredConfig[key] = val;
}); });
return filteredConfig; return filteredConfig;
} },
}, },
created() { created() {
getPluginTextsTags().then(({errno, data}) => { getPluginTextsTags().then(({errno, data}) => {
...@@ -138,10 +139,10 @@ export default { ...@@ -138,10 +139,10 @@ export default {
}, },
watch: { watch: {
'config.groupNameReg': function(val) { 'config.groupNameReg': function(val) {
this.throttledFilterTagsList() this.throttledFilterTagsList();
} },
}, },
methods:{ methods: {
filterTagsList(groupNameReg) { filterTagsList(groupNameReg) {
if (!groupNameReg) { if (!groupNameReg) {
this.filteredTagsList = []; this.filteredTagsList = [];
...@@ -149,14 +150,14 @@ export default { ...@@ -149,14 +150,14 @@ export default {
} }
let tagsList = this.tagsList || []; let tagsList = this.tagsList || [];
let regExp = new RegExp(groupNameReg); let regExp = new RegExp(groupNameReg);
this.filteredTagsList = tagsList.filter(item => regExp.test(item.tag)); this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
}, },
throttledFilterTagsList: _.debounce( throttledFilterTagsList: _.debounce(
function() { function() {
this.filterTagsList(this.config.groupNameReg) this.filterTagsList(this.config.groupNameReg);
}, 300 }, 300
), ),
} },
}; };
</script> </script>
......
frontend/src/texts/index.js
浏览文件 @ db62d42b
...@@ -5,5 +5,5 @@ import Texts from './Texts'; ...@@ -5,5 +5,5 @@ import Texts from './Texts';
router.add({ router.add({
target: '#content', target: '#content',
rule: '/texts', rule: '/texts',
Component: Texts Component: Texts,
}); });
frontend/src/texts/ui/Chart.vue
浏览文件 @ db62d42b
<template> <template>
<v-card hover class="visual-dl-text"> <v-card
<h3 class="visual-dl-text-title">{{tagInfo.tag.displayName}} hover
<span class="visual-dl-text-run-icon">{{tagInfo.run}}</span> class="visual-dl-text">
</h3> <h3 class="visual-dl-text-title">{{ tagInfo.tag.displayName }}
<p> <span class="visual-dl-text-run-icon">{{ tagInfo.run }}</span>
<span>Step:</span> </h3>
<span>{{textData.step}}</span> <p>
<span class="visual-del-text-time">{{textData.wall_time | formatTime}}</span> <span>Step:</span>
</p> <span>{{ textData.step }}</span>
<v-slider :max="steps" <span class="visual-del-text-time">{{ textData.wall_time | formatTime }}</span>
:min="slider.min" </p>
:step="1" <v-slider
v-model="currentIndex" :max="steps"
></v-slider> :min="slider.min"
:step="1"
v-model="currentIndex"
/>
<p> {{textData.message}} </p> <p> {{ textData.message }} </p>
</v-card> </v-card>
</template> </template>
<script> <script>
...@@ -30,21 +33,21 @@ export default { ...@@ -30,21 +33,21 @@ export default {
steps() { steps() {
let data = this.data || []; let data = this.data || [];
return data.length - 1; return data.length - 1;
} },
}, },
filters: { filters: {
formatTime: function (value) { formatTime: function(value) {
if (!value) { if (!value) {
return; return;
} }
// The value was made in seconds, must convert it to milliseconds // The value was made in seconds, must convert it to milliseconds
let time = new Date(value * 1000); let time = new Date(value * 1000);
var options = { let options = {
weekday: "short", year: "numeric", month: "short", weekday: 'short', year: 'numeric', month: 'short',
day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit',
}; };
return time.toLocaleDateString("en-US", options); return time.toLocaleDateString('en-US', options);
} },
}, },
data() { data() {
return { return {
...@@ -53,7 +56,7 @@ export default { ...@@ -53,7 +56,7 @@ export default {
value: '0', value: '0',
label: '', label: '',
min: 0, min: 0,
step: 1 step: 1,
}, },
textData: {}, textData: {},
data: [], data: [],
...@@ -73,23 +76,23 @@ export default { ...@@ -73,23 +76,23 @@ export default {
}, },
watch: { watch: {
running: function (val) { running: function(val) {
val ? this.startInterval() : this.stopInterval(); val ? this.startInterval() : this.stopInterval();
}, },
currentIndex: function(index) { currentIndex: function(index) {
if (this.data && this.data[index]) { if (this.data && this.data[index]) {
let currentTextInfo = this.data ? this.data[index] : {}; let currentTextInfo = this.data ? this.data[index] : {};
let wall_time = currentTextInfo[0] let wall_time = currentTextInfo[0];
let step = currentTextInfo[1]; let step = currentTextInfo[1];
let message = currentTextInfo[2] let message = currentTextInfo[2];
this.textData = { this.textData = {
step, step,
wall_time, wall_time,
message, message,
} };
} }
} },
}, },
methods: { methods: {
stopInterval() { stopInterval() {
...@@ -102,14 +105,14 @@ export default { ...@@ -102,14 +105,14 @@ export default {
}, intervalTime * 1000); }, intervalTime * 1000);
}, },
getOriginChartsData() { getOriginChartsData() {
//let {run, tag} = this.tagInfo; // let {run, tag} = this.tagInfo;
let run = this.tagInfo.run let run = this.tagInfo.run;
let tag = this.tagInfo.tag let tag = this.tagInfo.tag;
let {displayName, samples} = tag; let {displayName, samples} = tag;
let params = { let params = {
run, run,
tag: displayName, tag: displayName,
samples samples,
}; };
getPluginTextsTexts(params).then(({status, data}) => { getPluginTextsTexts(params).then(({status, data}) => {
if (status === 0) { if (status === 0) {
...@@ -117,8 +120,8 @@ export default { ...@@ -117,8 +120,8 @@ export default {
this.currentIndex = data.length - 1; this.currentIndex = data.length - 1;
} }
}); });
} },
} },
}; };
</script> </script>
<style lang="stylus"> <style lang="stylus">
......
frontend/src/texts/ui/ChartPage.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-chart-page"> <div class="visual-dl-chart-page">
<ui-expand-panel :info="tagList.length" :title="title"> <ui-expand-panel
<div ref="chartPageBox" class="visual-dl-chart-page-box"> :info="tagList.length"
<ui-chart :title="title">
v-for="(tagInfo, index) in filteredPageList" <div
:key="index" ref="chartPageBox"
:tagInfo="tagInfo" class="visual-dl-chart-page-box">
:groupNameReg="config.groupNameReg" <ui-chart
:outlier="config.outlier" v-for="(tagInfo, index) in filteredPageList"
:runs="config.runs" :key="index"
:running="config.running" :tag-info="tagInfo"
:runsItems="runsItems" :group-name-reg="config.groupNameReg"
></ui-chart> :outlier="config.outlier"
</div> :runs="config.runs"
<v-pagination :running="config.running"
v-if="total > pageSize" :runs-items="runsItems"
v-model="currentPage" />
:length="pageLength" </div>
/> <v-pagination
</ui-expand-panel> v-if="total > pageSize"
</div> v-model="currentPage"
:length="pageLength"
/>
</ui-expand-panel>
</div>
</template> </template>
<script> <script>
import ExpandPanel from '../../common/component/ExpandPanel'; import ExpandPanel from '../../common/component/ExpandPanel';
...@@ -37,8 +41,8 @@ export default { ...@@ -37,8 +41,8 @@ export default {
let tagList = this.tagList || []; let tagList = this.tagList || [];
let runs = this.config.runs || []; let runs = this.config.runs || [];
let list = cloneDeep(tagList); let list = cloneDeep(tagList);
return flatten(list.slice().map(item => { return flatten(list.slice().map((item) => {
return item.tagList.filter(one => runs.includes(one.run)); return item.tagList.filter((one) => runs.includes(one.run));
})); }));
}, },
filteredPageList() { filteredPageList() {
...@@ -50,17 +54,17 @@ export default { ...@@ -50,17 +54,17 @@ export default {
return tagList.length; return tagList.length;
}, },
pageLength() { pageLength() {
return Math.ceil(this.total / this.pageSize) return Math.ceil(this.total / this.pageSize);
} },
}, },
data() { data() {
return { return {
// current page // current page
currentPage: 1, currentPage: 1,
// item per page // item per page
pageSize: 8 pageSize: 8,
}; };
} },
}; };
</script> </script>
<style lang="stylus"> <style lang="stylus">
......
frontend/src/texts/ui/Config.vue
浏览文件 @ db62d42b
<template> <template>
<div class="visual-dl-page-config-com"> <div class="visual-dl-page-config-com">
<v-text-field <v-text-field
label="Group name RegExp" label="Group name RegExp"
hint="input a tag group name" hint="input a tag group name"
v-model="config.groupNameReg" v-model="config.groupNameReg"
dark dark
></v-text-field> />
<label class="visual-dl-page-checkbox-group-label">Runs</label> <label class="visual-dl-page-checkbox-group-label">Runs</label>
<v-checkbox v-for="item in runsItems" <v-checkbox
:key="item.name" v-for="item in runsItems"
:label="item.name" :key="item.name"
:value="item.value" :label="item.name"
v-model="config.runs" :value="item.value"
dark v-model="config.runs"
class="visual-dl-page-runs-checkbox" dark
></v-checkbox> class="visual-dl-page-runs-checkbox"
/>
<v-btn :color="config.running ? 'primary' : 'error'" <v-btn
v-model="config.running" :color="config.running ? 'primary' : 'error'"
@click="toggleAllRuns" v-model="config.running"
class="visual-dl-page-run-toggle" @click="toggleAllRuns"
dark block class="visual-dl-page-run-toggle"
> dark
{{config.running ? 'Running' : 'Stopped'}} block
</v-btn> >
</div> {{ config.running ? 'Running' : 'Stopped' }}
</v-btn>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
runsItems: Array, runsItems: Array,
config: Object config: Object,
}, },
data() { data() {
return { return {
...@@ -42,8 +45,8 @@ export default { ...@@ -42,8 +45,8 @@ export default {
methods: { methods: {
toggleAllRuns() { toggleAllRuns() {
this.config.running = !this.config.running; this.config.running = !this.config.running;
} },
} },
}; };
</script> </script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或