Skip to content

Commit d4717a3

Browse files
jetfueljetfuel
authored
Add config vue (#267)
* Add vuetify framework Update AppMenu.vue to include the basic menu item. * use name as key. * Add Config Vue
1 parent 6042ff9 commit d4717a3

File tree

4 files changed

+155
-8
lines changed

4 files changed

+155
-8
lines changed

‎frontend/src/App.vue‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,39 @@ export default {
1919
}
2020
</script>
2121

22-
<style>
22+
<style lang="stylus">
2323
#app {
2424
font-family: 'Avenir', Helvetica, Arial, sans-serif;
2525
-webkit-font-smoothing: antialiased;
2626
-moz-osx-font-smoothing: grayscale;
2727
text-align: center;
2828
color: #2c3e50;
2929
}
30+
31+
@import './style/variables';
32+
+prefix-classes('visual-dl-page-')
33+
.container
34+
padding-right 250px
35+
position relative
36+
background $-left-background-color
37+
.left
38+
width 100%
39+
overflow scroll
40+
border solid 1px $-left-border-clor
41+
background $-left-border-clor
42+
min-height 300px
43+
padding 2%
44+
box-sizing border-box
45+
.right
46+
overflow scroll
47+
width 250px
48+
min-height 300px
49+
position absolute
50+
right 0
51+
top 0
52+
box-sizing border-box
53+
.config-com
54+
color $-right-font-color
55+
3056
</style>
3157

‎frontend/src/scalars/Scalars.vue‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,9 @@
2626
</div>
2727
<div class="visual-dl-page-right">
2828
<div class="visual-dl-page-config-container">
29-
<p>
30-
I should show all runs items and config
31-
{{ runsItems }}
32-
</p>
33-
<p>
34-
{{ config }}
35-
</p>
29+
<Config :runsItems="config.runs"
30+
:config="config"
31+
></Config>
3632
</div>
3733
</div>
3834
</div>
@@ -43,7 +39,12 @@ import {getPluginScalarsTags, getRuns} from '../service';
4339
import {debounce, flatten, uniq, isArray} from 'lodash';
4440
import autoAdjustHeight from '../common/util/autoAdjustHeight';
4541
42+
import Config from './ui/config'
43+
4644
export default {
45+
components: {
46+
Config
47+
},
4748
name: 'Scalars',
4849
data () {
4950
return {

‎frontend/src/scalars/ui/config.vue‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<template>
2+
<div class="visual-dl-page-config-com">
3+
<v-text-field
4+
name="Group name RegExp"
5+
label="Group name RegExp"
6+
hint="input a tag group name"
7+
id="testing"
8+
v-model="config.groupNameReg"
9+
dark
10+
></v-text-field>
11+
12+
<v-slider label="Smoothing" v-bind:max="100" v-bind:min="0" v-model="config.smoothing" dark></v-slider>
13+
<v-text-field v-model="config.smoothing" type="number" dark></v-text-field>
14+
15+
<p>{{ config.horizontal || 'null' }}</p>
16+
<v-radio-group v-model="config.horizontal" dark>
17+
<v-radio label="Step" value="step"></v-radio>
18+
<v-radio label="Relative" value="relative"></v-radio>
19+
<v-radio label="Wall" value="wall"></v-radio>
20+
</v-radio-group>
21+
22+
<v-select
23+
v-bind:items="sortingMethodItems"
24+
v-model="config.sortingMethod"
25+
label="Tooltip sorting method"
26+
single-line
27+
bottom
28+
dark
29+
></v-select>
30+
31+
<v-checkbox label="Show data download links" v-model="config.downloadLink" dark></v-checkbox>
32+
<v-checkbox label="Ignore outliers in chart scaling" v-model="config.outlier" dark></v-checkbox>
33+
34+
<p>
35+
RunItems{{ config.runs }}
36+
</p>
37+
<v-checkbox v-for="item in runsItems"
38+
:label="item"
39+
:value="item"
40+
v-model="config.runs"
41+
dark
42+
></v-checkbox>
43+
44+
<v-switch class="visual-dl-page-run-toggle"
45+
v-bind:label="`Running: ${config.running.toString()}`"
46+
v-model="config.running"
47+
dark></v-switch>
48+
</div>
49+
</template>
50+
<script>
51+
import('vuetify/dist/vuetify.min.css')
52+
53+
//import TextField from 'san-mui/TextField';
54+
55+
// TODO: Consider create Vue Components for these
56+
57+
//import Slider from '../../common/component/Slider';
58+
//import RadioGroup from '../../common/component/RadioGroup';
59+
//import DropDownMenu from '../../common/component/DropDownMenu';
60+
//import CheckBoxGroup from '../../common/component/CheckBoxGroup';
61+
//import Button from 'san-mui/Button';
62+
63+
export default {
64+
name: 'config',
65+
props: ['runsItems', 'config'],
66+
data() {
67+
return {
68+
config: {
69+
groupNameReg: '.*',
70+
smoothing: '0.6',
71+
horizontal: 'step',
72+
sortingMethod: 'default',
73+
downloadLink: [],
74+
outlier: [],
75+
running: true,
76+
runs: []
77+
},
78+
horizontalItems: [
79+
{
80+
name: 'Step',
81+
value: 'step'
82+
},
83+
{
84+
name: 'Relative',
85+
value: 'relative'
86+
},
87+
{
88+
name: 'Wall',
89+
value: 'wall'
90+
}
91+
],
92+
sortingMethodItems: [
93+
'default', 'descending', 'ascending', 'nearest'
94+
],
95+
runsItems: [],
96+
};
97+
},
98+
toggleAllRuns() {
99+
let running = this.data.get('config.running');
100+
this.data.set('config.running', !running);
101+
this.fire('runningChange', running);
102+
}
103+
};
104+
105+
</script>
106+
<style lang="stylus">
107+
@import '../../style/variables';
108+
109+
+prefix-classes('visual-dl-page-')
110+
.config-com
111+
width 90%
112+
margin 20px auto
113+
.run-toggle
114+
width 100%
115+
margin-top 20px
116+
117+
</style>
118+
119+

‎frontend/template/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<title>Visual DL</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
8+
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
89
</head>
910
<body>
1011
<div id="root"></div>

0 commit comments

Comments
 (0)