Skip to content

Embedding visualization connect #356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Apr 3, 2018
Merged

Embedding visualization connect #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
08de1fa
Make the frontend to fetch the data from the flask server.
jetfuel Mar 30, 2018
29b2624
Provide loading animation.
jetfuel Mar 31, 2018
48b9121
Merge branch 'develop' into embedding_visualization_connect
jetfuel Apr 2, 2018
8e2ed68
Fixed format style
jetfuel Apr 2, 2018
e7fbf47
Provide a 2D 3D switcher.
jetfuel Apr 2, 2018
2e1d56f
Include PCA method to do dimension reduction
jetfuel Apr 2, 2018
cd5ffd6
Fix the style.
jetfuel Apr 2, 2018
1f7469e
Fix typo
jetfuel Apr 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 81 additions & 26 deletions frontend/mock/data/plugin/embeddings/embeddings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,86 @@
* @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"]
]
module.exports = function(path, queryParam, postParam) {
if (queryParam.dimension === '3') {
return {
// moock delay
_timeout: 0,
// mock http status
_status: 200,
// mock response data
_data: {
status: 0,
msg: 'SUCCESS',
data: {
"embedding": [
[10.0, 8.04, 3],
[8.0, 6.95, 4],
[13.0, 7.58, 1],
[9.0, 8.81, 3],
[11.0, 8.33, 5],
[14.0, 9.96, 6],
[6.0, 7.24, 1],
[4.0, 4.26, 2],
[12.0, 10.84, 6],
[7.0, 4.8, 3],
[5.0, 5.68, 3]
],
"labels": [
"yellow",
"blue",
"red",
"king",
"queen",
"man",
"women",
"kid",
"adult",
"light",
"dark"
]
}
}
}
};
};
} else {
return {
// moock delay
_timeout: 0,
// mock http status
_status: 200,
// mock response data
_data: {
status: 0,
msg: 'SUCCESS',
data: {
"embedding": [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.8],
[5.0, 5.68]
],
"labels": [
"yellow",
"blue",
"red",
"king",
"queen",
"man",
"women",
"kid",
"adult",
"light",
"dark"
]
}
}
};
}
};
3 changes: 2 additions & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
"d3-format": "^1.2.1",
"dagre": "^0.8.2",
"dagre-d3": "^0.6.1",
"echarts": "^3.8.5",
"echarts": "^4.0.0",
"echarts-gl": "^1.1.0",
"file-saver": "^1.3.3",
"graphlib": "^1.0.5",
"htmlcs": "^0.4.1",
Expand Down
32 changes: 29 additions & 3 deletions frontend/src/high-dimensional/HighDimensional.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
:config="config"
:displayWordLabel="config.displayWordLabel"
:searchText="config.searchText"
:dimension="config.dimension"
:embedding_data="embedding_data"
></ui-chart>
</div>
Expand Down Expand Up @@ -35,20 +36,45 @@ export default {
config: {
searchText: '',
displayWordLabel: true,
dimension: "2",
reduction: "tsne",
running: true
},
embedding_data: []
}
},
created() {
getHighDimensionalDatasets().then(({errno, data}) => {
this.embedding_data = data.embedding;
});
this.fetchDatasets()
},
watch: {
'config.dimension': function(val) {
this.fetchDatasets()
},
'config.reduction': function(val) {
this.fetchDatasets()
}
},
mounted() {
autoAdjustHeight();
},
methods: {
fetchDatasets() {
// Fetch the data from the server. Passing dimension and reduction method
let params = {
dimension: this.config.dimension,
reduction: this.config.reduction
};
getHighDimensionalDatasets(params).then(({errno, data}) => {
var vector_data = data.embedding;
var labels = data.labels;

for ( var i = 0; i < vector_data.length; i ++) {
vector_data[i].push(labels[i])
}

this.embedding_data = vector_data
});
},
}
};

Expand Down
117 changes: 85 additions & 32 deletions frontend/src/high-dimensional/ui/Chart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@

<script>
import echarts from 'echarts';
import 'echarts-gl';

export default {
props: ['config', 'displayWordLabel', 'searchText', 'embedding_data'],
props: ['config', 'displayWordLabel', 'searchText', 'embedding_data', 'dimension'],
data() {
return {
width: 900,
Expand All @@ -18,20 +19,21 @@ export default {
},
computed: {
computedStyle() {
return 'height:' + this.height + 'px;'
+ 'width:' + this.width + 'px;';
return 'height:' + this.height + 'px;' +
'width:' + this.width + 'px;';
}
},
created() {

},
created() {},
mounted() {
this.createChart();
this.setChartsOptions();
this.myChart.showLoading()

this.set2DChartOptions();
this.setDisplayWordLabel();
},
watch: {
embedding_data: function(val) {
this.myChart.hideLoading();
this.myChart.setOption({
series: [{
// Grab the 'matched' series data
Expand All @@ -43,13 +45,25 @@ export default {
displayWordLabel: function(val) {
this.setDisplayWordLabel()
},
dimension: function(val) {
this.myChart.clear()
this.myChart.showLoading()
if (val === "2") {
this.set2DChartOptions();
this.setDisplayWordLabel();
} else {
this.set3DChartOptions();
this.setDisplayWordLabel();
}
},
searchText: function(val) {
// Filter the data that has the hasPrefix
var matched_words = []
if (val != '') {
val = val.toLowerCase()

function hasPrefix(value) {
var word = value[2]
var word = value[value.length - 1]
return (typeof word == "string" && word.toLowerCase().startsWith(val))
}

Expand All @@ -72,13 +86,12 @@ export default {
let el = this.$refs.chartBox;
this.myChart = echarts.init(el);
},
setChartsOptions(){
set2DChartOptions() {
var typeD = "normal";
var option = {
xAxis: {},
yAxis: {},
series: [
{
series: [{
name: "all",
symbolSize: 10,
data: this.embedding_data,
Expand All @@ -87,45 +100,88 @@ export default {
{
name: "matched",
animation: false,
symbolSize:10,
symbolSize: 10,
data: [],
itemStyle: {
normal: {
opacity: 1
}
},
label: {
normal: {
show: true,
formatter: function(param) {
return param.data[param.data.length - 1];
},
position: 'top'
}
},
type: 'scatter'
}
]
};
this.myChart.setOption(option);
},
set3DChartOptions() {
var symbolSize = 2.5;
var option3d = {
grid3D: {},
xAxis3D: {
type: 'category'
},
yAxis3D: {},
xAxis3D: {},
zAxis3D: {},
dataset: {
source: this.embedding_data
},
series: [
{
name: "all",
type: 'scatter3D',
symbolSize: symbolSize,
data: []
},
{
name: "matched",
animation: false,
symbolSize: symbolSize,
data: [],
label: {
normal: {
show: true,
formatter: function (param) {
return param.data[2];
formatter: function(param) {
return param.data[param.data.length - 1];
},
position: 'top'
}
},
type: 'scatter'
}
]
};
this.myChart.setOption(option);
type: 'scatter3D'
}
]
}
this.myChart.setOption(option3d);
},
setDisplayWordLabel() {
this.myChart.setOption({
this.myChart.setOption({
series: [{
// Grab the 'all' series data
name: 'all',
label: {
normal: {
show: this.displayWordLabel,
formatter: function (param) {
return param.data[2];
},
position: 'top'
formatter: function(param) {
return param.data[param.data.length - 1];
},
emphasis: {
show: true,
}
position: 'top'
},
emphasis: {
show: true,
}
})
}
}]
});
},

}
};

Expand All @@ -136,7 +192,4 @@ export default {
float left
padding 10px
position relative



</style>
Loading