Migrate from san to vue (#281)

* Initial checking to setup Vue basic requirements. (#264)

Add App.vue
Add AppMenu.vue

* Vue with app menu (#265)

* Add vuetify framework
Update AppMenu.vue to include the basic menu item.

* use name as key.

* Add major components (#266)

* Add vuetify framework
Update AppMenu.vue to include the basic menu item.

* use name as key.

* Add Scalars, Images, Histograms, Graph.

* Switch to use the stylus language for CSS

* Port functions from Scalars.san to Scalars.vue

* Add config vue (#267)

* Add vuetify framework
Update AppMenu.vue to include the basic menu item.

* use name as key.

* Add Config Vue

* Integrate chart to scalar with Vue (#268)

* Fix warnings from Vue compiler
* use default prop instead of duplicate data and prop
* use function instead of shorthand declaration with data

* refract naming style, fix scalar options

* Fix config UI

* Add chart and chart page and integrate to scalar

* update with varun and jeff's comments

* Add images config (#270)

* Add vuetify framework
Update AppMenu.vue to include the basic menu item.

* use name as key.

* Add the Config.vue for Images

* Add the CharPage.vue and Image.vue

* Hook up the config to the image.vue so that the image height and width can update

* Show Scalar Data and add ExpandPanel (#272)

* Watch tagInfo changes to update chart and fix tooltip issue

* Add expand panel and maintain isShow state in the panel

* Add Expand Panel in Image

* Add watch group name reg (#273)

* Add vuetify framework
Update AppMenu.vue to include the basic menu item.

* use name as key.

* Add Watch on the groupNameReg

* Allow the nav bar to persist the selected item style. (#274)

* Fix the incorrect pagination issue. (#276)

* Add the Graph.vue and the Config.vue for Graph tab (#277)

* Add the Histogram related vue files. (#278)

* Fix error message on charts (#279)

* Make sure to clear the chart before each use.

* Add key for v-for loop.

* Add theme and fix UI (#280)

-Apply theme color in Vuetify
-Add main.styl to override Vuetify default stylus variables
-Add relative path in web pack config to find variables.styl

* Fix multiple scalar issues: (#283)

* Fix multiple scalar issues:
-download link / outliers should take boolean value instead of array
-download link now show proper selector of runsItem and download button
-Use tag as key to prevent chart re-rendering
-Add missing label in scalar config and fix UI

* simply use index for key because scalar has different tag info structure from image and histogram

* Fix font size and reorganize css and stylus (#287)

* Fix comments

* placeholder index.js

* Fix issue where download data link points to empty run (#294)

-Dropdown should only display non empty runs
-Select first run by default
-Remove drop down if all are empty runs
-Refract download type to runItemForDownload
-Add train run and multiple tags in mock data

* Fix error when scalar data empty (#298)

-Error comes in when trying to access elements inside empty data
-When one of the runs has empty data, the chart will display nothing even other run has non empty data
-Fix by checking length of data before accessing

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

@@ -19,15 +19,27 @@ module.exports = function (path, queryParam, postParam) {
  data: {
  "test": {
  "layer1/Wx_plus_b/pre_activations":
- {
- "displayName": "layer1/Wx_plus_b/pre_activations",
- "description": ""
- },
+  {
+  "displayName": "layer1/Wx_plus_b/pre_activations",
+  "description": ""
+  },
  "layer1/Wx_plus_b/pre_activations_1":
- {
- "displayName": "layer1/Wx_plus_b/pre_activations_1",
- "description": ""
- }
+ {
+ "displayName": "layer1/Wx_plus_b/pre_activations_1",
+ "description": ""
+ }
+ },
+ "train": {
+ "layer1/Wx_plus_b/pre_activations":
+ {
+ "displayName": "layer1/Wx_plus_b/pre_activations",
+ "description": ""
+ },
+ "layer1/Wx_plus_b/pre_activations_1":
+ {
+ "displayName": "layer1/Wx_plus_b/pre_activations_1",
+ "description": ""
+ }
  }
  }
  }

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

@@ -22,6 +22,20 @@ module.exports = function (path, queryParam, postParam) {
  "displayName": "layer2/biases/summaries/mean",
  "description": ""
  }
+ },
+ "train": {
+ "layer2/biases/summaries/mean": {
+ "displayName": "layer2/biases/summaries/mean",
+ "description": ""
+ },
+ "layer2/biases/summaries/accuracy": {
+ "displayName": "layer2/biases/summaries/accuracy",
+ "description": ""
+ },
+ "layer2/biases/summaries/cost": {
+ "displayName": "layer2/biases/summaries/cost",
+ "description": ""
+ }
  }
  }
  }

frontend/package.json

@@ -27,6 +27,9 @@
  "san-router": "^1.1.1",
  "san-store": "^1.0.1",
  "san-update": "^2.1.0",
+ "vue": "^2.5.2",
+ "vue-router": "^3.0.1",
+ "vuetify": "^0.17.7",
  "xlsx": "^0.11.3"
  },
  "devDependencies": {
@@ -72,6 +75,10 @@
  "webpack-dev-server": "^2.4.2",
  "webpack-hot-middleware": "^2.19.1",
  "webpack-merge": "^4.1.0",
- "yargs": "^8.0.2"
+ "yargs": "^8.0.2",
+ "vue-jest": "^1.0.2",
+ "vue-loader": "^13.3.0",
+ "vue-style-loader": "^3.0.1",
+ "vue-template-compiler": "^2.5.2"
  }
 }

frontend/src/App.vue

@@ -0,0 +1,75 @@
+<template>
+ <div id="app">
+ <v-app>
+ <AppMenu :initialRoute="initialRoute">
+ </AppMenu>
+ <router-view></router-view>
+ </v-app>
+ </div>
+</template>
+
+<script>
+import AppMenu from './common/component/AppMenu'
+
+export default {
+ name: 'App',
+ components: {
+ AppMenu
+ },
+ data() {
+ return {
+ initialRoute: "scalars"
+ }
+ },
+ created() {
+ if (location.hash && location.hash != '#/') {
+ this.initialRoute = /(\#\/)(\w*)([?|&]{0,1})/.exec(location.hash)[2];
+ }
+ else {
+ location.hash = '#/scalars';
+ }
+ }
+}
+</script>
+
+<style lang="stylus">
+@import '~style/variables';
+@import '../style/main';
+@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700');
+
+#app {
+ font-family: 'Merriweather Sans', Helvetica, Arial, sans-serif;
+ font-weight: bold;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ color: $-content-text-color;
+}
+
++prefix-classes('visual-dl-page-')
+ .container
+ padding-right 300px
+ position relative
+ background $-left-background-color
+ .left
+ width 100%
+ overflow scroll
+ border solid 1px $-left-border-color
+ background $-left-border-color
+ min-height 300px
+ padding 2%
+ box-sizing border-box
+ .right
+ overflow scroll
+ width 300px
+ min-height 300px
+ position absolute
+ right 0
+ top 0
+ box-sizing border-box
+ font-size 14px
+ font-weight normal
+ .config-com
+ color $-right-font-color
+
+</style>
+

frontend/src/common/component/AppMenu.vue

@@ -0,0 +1,85 @@
+<template>
+ <div>
+ <div class="visual-dl-app-menu">
+ <v-toolbar color="primary" dark>
+ <v-toolbar-title class="appbar-menu-title"></v-toolbar-title>
+ <v-toolbar-items>
+ <v-btn v-for="item in items" :key="item.name"
+ flat dark :class="selected === item.name ? 'menu-item-selected': 'menu-item'"
+ @click="handleItemClick(item)"
+ >{{ item.title}}</v-btn>
+ </v-toolbar-items>
+ </v-toolbar>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: ['initialRoute'],
+ name: 'AppMenu',
+ data () {
+ return {
+ selected: this.initialRoute,
+ items: [
+ {
+ url: '/scalars',
+ title: 'SCALARS',
+ name: 'scalars'
+ },
+ {
+ url: '/images',
+ title: 'IMAGES',
+ name: 'images'
+ },
+ {
+ url: '/histograms',
+ title: 'HISTOGRAMS',
+ name: 'histograms'
+ },
+ {
+ url: '/graphs',
+ title: 'GRAPHS',
+ name: 'graphs'
+ }
+ ]
+ }
+ },
+ methods: {
+ handleItemClick: function (item) {
+ this.selected = item.name
+ this.$router.push(item.url)
+ }
+ }
+}
+</script>
+
+<style scoped lang="stylus">
+@import '~style/variables';
+
+.visual-dl-app-menu
+ .appbar-menu-title
+ flex none
+ margin-right 50px
+ background url('./visualdl-logo.png') no-repeat
+ background-size cover
+ width 120px
+ height 50px
+
+ .menu-item
+ font-size 16px
+ background none
+ padding 0 10px
+ color #fff
+ opacity 0.6
+ display flex
+ flex-direction row
+ font-weight bold
+
+ .menu-item:hover
+ opacity 1
+
+ .menu-item-selected
+ @extends .visual-dl-app-menu .menu-item
+ opacity 1
+</style>

frontend/src/common/component/ExpandPanel.vue

@@ -0,0 +1,65 @@
+<template>
+ <div class="visual-dl-expand-panel">
+ <h3
+ class="visual-dl-expand-head"
+ @click="isShow = !isShow"
+ >
+ <span>{{title}}</span>
+ <span class="visual-dl-expand-head-info">
+ <v-icon class="visual-dl-expand-head-arrow" size="20">{{iconName}}</v-icon>
+ <span class="visual-dl-expand-head-num">({{info}})</span>
+ </span>
+ </h3>
+ <div
+ v-if="isShow"
+ class="visual-dl-expand-panel-content"
+ >
+ <slot></slot>
+ </div>
+ </div>
+</template>
+<script>
+export default {
+ props: {
+ title: String,
+ info: Number
+ },
+ computed: {
+ iconName() {
+ return this.isShow ? 'expand_less' : 'expand_more';
+ }
+ },
+ data() {
+ return {
+ isShow: true
+ };
+ }
+};
+</script>
+<style lang="stylus">
+ .visual-dl-expand-panel
+ .visual-dl-expand-head
+ border solid 1px #ccc
+ line-height 50px
+ height 50px
+ padding 0 20px
+ cursor pointer
+ position relative
+ .visual-dl-expand-head-info
+ position absolute
+ left 90%
+ .visual-dl-expand-head-arrow
+ vertical-align middle
+ .visual-dl-expand-head-num
+ line-height 20px
+ font-size 12px
+ font-weight normal
+ .visual-dl-expand-panel-content
+ padding 0 20px
+ .visual-dl-expand-panel-content:after
+ content: "";
+ clear: both;
+ display: block;
+</style>
+
+

frontend/src/common/component/Notification/index.js

@@ -1,7 +1,3 @@
-import Notification from './Notification';
-import NotificationItem from './NotificationItem';
-
-export {
- NotificationItem,
- Notification as default
-};
+/**
+ * Created by ludaming on 3/4/18.
+ */

frontend/src/graph/Graph.vue

@@ -0,0 +1,60 @@
+<template>
+ <div class="visual-dl-page-container">
+ <div class="visual-dl-page-left">
+ <ui-chart
+ :fitScreen="fitScreen"
+ :download="download"
+ :scale="config.scale"
+ ></ui-chart>
+ </div>
+ <div class="visual-dl-page-right">
+ <div class="visual-dl-page-config-container">
+ <ui-config
+ :config="config"
+ @fitScreen="handleFitScreen"
+ @download="handleDownload"
+ ></ui-config>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import autoAdjustHeight from '../common/util/autoAdjustHeight';
+import Config from './ui/Config'
+import Chart from './ui/Chart';
+
+export default {
+ components: {
+ 'ui-config': Config,
+ 'ui-chart': Chart
+ },
+ name: 'Graph',
+ data () {
+ return {
+ config: {
+ scale: 0.5
+ },
+ fitScreen: {fitScreen: false},
+ download: {download: false}
+ }
+ },
+ mounted() {
+ autoAdjustHeight();
+ },
+ methods: {
+ handleFitScreen() {
+ this.fitScreen = {fitScreen: true}
+ this.config.scale = 0.5;
+ },
+ handleDownload() {
+ this.download = {fitScreen: true}
+ }
+ }
+};
+
+</script>
+
+<style lang="stylus">
+
+</style>