Embedding visualization frontend (#353)

* Include the embedding frontend work, currenlty using harded data

* Remove a ChartPage in embeddings
Embedding chart now use the mock data from the mock server.

* Some code refactoring.

frontend/mock/data/plugin/embeddings/embeddings.js

+/**
+ * get mock data
+ *
+ * @param {string} path request path
+ * @param {Object} queryParam query params
+ * @param {Object} postParam post params
+ * @return {Object}
+ */
+module.exports = function (path, queryParam, postParam) {
+    return {
+        // moock delay
+        _timeout: 0,
+        // mock http status
+        _status: 200,
+        // mock response data
+        _data: {
+            status: 0,
+            msg: 'SUCCESS',
+            data: {
+                "embedding": [
+                    [10.0, 8.04, "yellow"],
+                    [8.0, 6.95, "blue"],
+                    [13.0, 7.58, "red"],
+                    [9.0, 8.81, "king"],
+                    [11.0, 8.33, "queen"],
+                    [14.0, 9.96, "man"],
+                    [6.0, 7.24, "women"],
+                    [4.0, 4.26, "kid"],
+                    [12.0, 10.84, "adult"],
+                    [7.0, 4.82, "light"],
+                    [5.0, 5.68, "dark"]
+                ]
+            }
+        }
+    };
+};

frontend/src/common/component/AppMenu.vue

@@ -51,7 +51,14 @@ export default {
                 url: '/texts',
                 title: 'TEXTS',
                 name: 'texts'
+            },
+            /* // Hide the top menu
+            {
+                url: '/HighDimensional',
+                title: 'HighDimensional',
+                name: 'HighDimensional'
             }
+            */
             ]
         }
     },

frontend/src/high-dimensional/HighDimensional.vue

+<template>
+    <div class="visual-dl-page-container">
+        <div class="visual-dl-page-left">
+            <ui-chart
+                    :config="config"
+                    :displayWordLabel="config.displayWordLabel"
+                    :searchText="config.searchText"
+                    :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>
+</template>
+
+<script>
+import {getHighDimensionalDatasets} from '../service';
+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: 'HighDimensional',
+    data () {
+        return {
+            config: {
+                searchText: '',
+                displayWordLabel: true,
+                running: true
+            },
+            embedding_data: []
+        }
+    },
+    created() {
+    	    getHighDimensionalDatasets().then(({errno, data}) => {
+            this.embedding_data = data.embedding;
+        });
+    },
+    mounted() {
+        autoAdjustHeight();
+    },
+    methods: {
+    }
+};
+
+</script>
+
+<style lang="stylus">
+
+</style>

frontend/src/high-dimensional/ui/Chart.vue

+<template>
+    <v-card hover class="visual-dl-page-charts">
+        <div ref="chartBox" class="visual-dl-chart-box" :style="computedStyle">
+        </div>
+    </v-card>
+</template>
+
+<script>
+import echarts from 'echarts';
+
+export default {
+    props: ['config', 'displayWordLabel', 'searchText', 'embedding_data'],
+    data() {
+        return {
+            width: 900,
+            height: 600,
+        };
+    },
+    computed: {
+        computedStyle() {
+            return 'height:' + this.height + 'px;'
+                + 'width:' + this.width + 'px;';
+        }
+    },
+    created() {
+
+    },
+    mounted() {
+        this.createChart();
+        this.setChartsOptions();
+        this.setDisplayWordLabel();
+    },
+    watch: {
+        embedding_data: function(val) {
+            this.myChart.setOption({
+                series: [{
+                    // Grab the 'matched' series data
+                    name: 'all',
+                    data: val
+                }]
+            });
+        },
+        displayWordLabel: function(val) {
+            this.setDisplayWordLabel()
+        },
+        searchText: function(val) {
+            var matched_words = []
+            if (val != '') {
+                val = val.toLowerCase()
+
+                function hasPrefix(value) {
+                    var word = value[2]
+                    return (typeof word == "string" && word.toLowerCase().startsWith(val))
+                }
+
+                matched_words = this.embedding_data.filter(hasPrefix);
+            }
+
+            // Update the matched series data
+            this.myChart.setOption({
+                series: [{
+                    // Grab the 'matched' series data
+                    name: 'matched',
+                    data: matched_words
+                }]
+            });
+        },
+    },
+    methods: {
+        createChart() {
+            // Initialize the eChartBox
+            let el = this.$refs.chartBox;
+            this.myChart = echarts.init(el);
+        },
+        setChartsOptions(){
+            var typeD = "normal";
+            var option = {
+                xAxis: {},
+                yAxis: {},
+                series: [
+                    {
+                        name: "all",
+                        symbolSize: 10,
+                        data: this.embedding_data,
+                        type: 'scatter',
+                    },
+                    {
+                        name: "matched",
+                        animation: false,
+                        symbolSize:10,
+                        data: [],
+                        itemStyle: {
+                            normal: {
+                                opacity: 1
+                            }
+                        },
+                        label: {
+                                normal: {
+                                    show: true,
+                                    formatter: function (param) {
+                                        return param.data[2];
+                                    },
+                                    position: 'top'
+                                }
+                            },
+                        type: 'scatter'
+                    }
+                ]
+            };
+            this.myChart.setOption(option);
+        },
+        setDisplayWordLabel() {
+                this.myChart.setOption({
+                    label: {
+                        normal: {
+                            show: this.displayWordLabel,
+                            formatter: function (param) {
+                                return param.data[2];
+                                },
+                                position: 'top'
+                            },
+                            emphasis: {
+                                show: true,
+                            }
+                        }
+                })
+        },
+
+    }
+};
+
+</script>
+
+<style lang="stylus">
+    .visual-dl-page-charts
+        float left
+        padding 10px
+        position relative
+
+
+
+</style>

frontend/src/high-dimensional/ui/Config.vue

+<template>
+    <div class="visual-dl-page-config-com">
+
+        <v-text-field
+                label="Search"
+                hint="Search by label"
+                v-model="config.searchText"
+                dark
+        ></v-text-field>
+
+
+        <v-checkbox class="visual-dl-page-config-checkbox"
+                    label="Display All Labels"
+                    v-model="config.displayWordLabel" dark></v-checkbox>
+
+        <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>
+<script>
+
+export default {
+    props: {
+        runsItems: Array,
+        config: Object
+    },
+    data() {
+        return {
+        };
+    },
+    methods: {
+        toggleAllRuns() {
+            this.config.running = !this.config.running;
+        }
+    }
+};
+
+</script>
+<style lang="stylus">
++prefix-classes('visual-dl-page-')
+    .config-com
+        padding 20px
+        .slider-block
+            display flex
+            align-items center
+        .smoothing-slider
+            display inline
+        .slider-span
+            width 40px
+        .run-toggle
+            margin-top 20px
+        .config-selector
+            margin-top 12px
+            margin-bottom 20px
+        .checkbox-group-label
+            display flex
+            margin-top 20px
+            margin-bottom 10px
+
+</style>
+
+

frontend/src/router/index.js

@@ -7,6 +7,7 @@ import Images from '@/images/Images'
 import Graph from '@/graph/Graph'
 import Texts from '@/texts/Texts'
 import Audio from '@/audio/Audio'
+import HighDimensional from '@/high-dimensional/HighDimensional'
 
 Vue.use(Router)
 
@@ -41,6 +42,11 @@ export default new Router({
       path: '/audio',
       name: 'Audio',
       component: Audio
+    },
+    {
+      path: '/HighDimensional',
+      name: 'HighDimensional',
+      component: HighDimensional
     }
   ]
 })

frontend/src/service.js

@@ -23,3 +23,5 @@ export const getPluginTextsTexts = makeService('/data/plugin/texts/texts');
 export const getPluginAudioTags = makeService('/data/plugin/audio/tags');
 
 export const getPluginAudioAudio = makeService('/data/plugin/audio/audio');
+
+export const getHighDimensionalDatasets = makeService('/data/plugin/embeddings/embeddings');