Skip to content

Update embedding search #420

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
jetfuel merged 6 commits into from
Apr 24, 2018
Merged

Update embedding search #420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
07ef65d
Update embedding label color
jetfuel Apr 23, 2018
cdc975d
Splite the data into matched and not-matched list
jetfuel Apr 23, 2018
3f4b7ee
After switching the dimension, also filter the list
jetfuel Apr 23, 2018
93e9aa7
Use color variables to keep track the color
jetfuel Apr 23, 2018
30f7903
Update color.
jetfuel Apr 24, 2018
78af3fc
Merge branch 'develop' into updateEmbeddingSearch
jetfuel Apr 24, 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
2 changes: 1 addition & 1 deletion docs/getting_started/index_en.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
Getting Started
============
===============

.. toctree::
:maxdepth: 1
Expand Down
82 changes: 52 additions & 30 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 @@ -40,6 +40,8 @@ export default {
return {
width: 900,
height: 600,
regularLabelColor: '#008c99',
matchedLabelColor: '#c23531',
};
},
computed: {
Expand All @@ -59,13 +61,9 @@ export default {
watch: {
embeddingData: function(val) {
this.myChart.hideLoading();
this.myChart.setOption({
series: [{
// Grab the 'matched' series data
name: 'all',
data: val,
}],
});

// Got new data, pass to the filter function to render the 'matched' set and 'not matched' set
this.filterSeriesDataAndSetOption(this.searchText);
},
displayWordLabel: function(val) {
this.setDisplayWordLabel();
Expand All @@ -82,27 +80,7 @@ export default {
}
},
searchText: function(val) {
// Filter the data that has the hasPrefix
let matchedWords = [];
if (val != '') {
val = val.toLowerCase();

function hasPrefix(value) {
let word = value[value.length - 1];
return (typeof word == 'string' && word.toLowerCase().startsWith(val));
}

matchedWords = this.embeddingData.filter(hasPrefix);
}

// Update the matched series data
this.myChart.setOption({
series: [{
// Grab the 'matched' series data
name: 'matched',
data: matchedWords,
}],
});
this.filterSeriesDataAndSetOption(val);
},
},
methods: {
Expand All @@ -113,13 +91,15 @@ export default {
},
set2DChartOptions() {
let option = {
animation: false,
xAxis: {},
yAxis: {},
series: [{
name: 'all',
symbolSize: 10,
data: this.embeddingData,
data: [],
type: 'scatter',
color: this.regularLabelColor,
},
{
name: 'matched',
Expand Down Expand Up @@ -147,8 +127,9 @@ export default {
this.myChart.setOption(option);
},
set3DChartOptions() {
let symbolSize = 2.5;
let symbolSize = 8;
let option3d = {
animation: false,
grid3D: {},
xAxis3D: {
type: 'category',
Expand All @@ -165,6 +146,7 @@ export default {
type: 'scatter3D',
symbolSize: symbolSize,
data: [],
color: this.regularLabelColor,
},
{
name: 'matched',
Expand All @@ -178,6 +160,9 @@ export default {
return param.data[param.data.length - 1];
},
position: 'top',
textStyle: {
color: this.matchedLabelColor,
},
},
},
type: 'scatter3D',
Expand All @@ -198,6 +183,9 @@ export default {
return param.data[param.data.length - 1];
},
position: 'top',
textStyle: {
color: this.regularLabelColor,
},
},
emphasis: {
show: true,
Expand All @@ -206,6 +194,40 @@ export default {
}],
});
},
filterSeriesDataAndSetOption(keyWord) {
// Filter the data that has the hasPrefix
let matchedWords = [];
let notMatchedWords = [];

if (keyWord != '') {
keyWord = keyWord.toLowerCase();
this.embeddingData.forEach( function(dataItem) {
let word = dataItem[dataItem.length - 1];

if (typeof word == 'string' && word.toLowerCase().startsWith(keyWord)) {
matchedWords.push(dataItem);
} else {
notMatchedWords.push(dataItem);
}
});
} else {
notMatchedWords = this.embeddingData;
}

// Update the matched series data
this.myChart.setOption({
series: [{
// Grab the 'matched' series data
name: 'matched',
data: matchedWords,
},
{
// Grab the 'all' series data
name: 'all',
data: notMatchedWords,
}],
});
},
},
};

Expand Down