Skip to content

GitLab

Commit e03e48df authored by Iker Hurtado's avatar Iker Hurtado
Browse files

Search filters box integration and improvement (2)

parent aa9bb74f
Hide whitespace changes
Inline Side-by-side
Showing with 206 additions and 82 deletions
client/bundle.js
View file @ e03e48df
......@@ -8097,8 +8097,10 @@
rootQueryObj.bool.must.push( this._getESSimpleMatch(filterNameDef, values, false) );
}else{ // normal case
rootQueryObj.bool.must.push( this._getESOperatorMatch(filterNameDef, values, false) );
console.log(this._getESOperatorMatch(filterNameDef, values, false) );
//rootQueryObj.bool.must.push( this._getESOperatorMatch(filterNameDef, values, false) );
rootQueryObj.bool.must.push( this._getESTermsArray(filterNameDef, values) );
//console.log(this._getESOperatorMatch(filterNameDef, values, false) );
}
});
......@@ -8114,6 +8116,12 @@
};
}
_getESTermsArray(field, value){
return {
"terms": { [field] : value }
};
}
_getESOperatorMatch(field, elements, and = true){
let elementsString = '';
......@@ -9295,7 +9303,8 @@
_paginationSearch(){
this.esQueryObject.bool.must[1].match.system_type = this.currentSystemType;
let systemTypePosition = this.esQueryObject.bool.must.length-1;
this.esQueryObject.bool.must[systemTypePosition].match.system_type = this.currentSystemType;
let page = this.matMap.get(this.currentSystemType).page;
let req = util.serverReqPOST(util.getSearchURL()+'?page='+page+
......@@ -9311,23 +9320,37 @@
}
initSearchTest(rootQueryObj){
//this.resultsContainer.style.visibility = 'hidden';
this.matMap.clear();
let qqq = { 'bool' : {} };
//qqq.bool.must = {"terms":{"crystal_system":{"operator":"or","query":"cubic"}}};
qqq.bool.must = {"terms":{"crystal_system": ["hexagonal","cubic"]}};
console.log('SENDING: ', JSON.stringify(qqq)); console.log(': ', qqq.bool.must);
let bulkReq = util.serverReqPOST(util.getSearchURL()+'?page=1'+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(qqq), bulke => {
let bulkData = JSON.parse(bulke.target.response); console.log('GETTING: ', bulkData);
this.matMap.set('bulk', this._createSystemTypeData(bulkData, 1, bulke.target.status === 200));
LoadingPopup.hide();
});
}
initSearch(rootQueryObj){
//this.resultsContainer.style.visibility = 'hidden';
this.matMap.clear();
this.currentSystemType = 'bulk';
/*
let rootQueryObj = { 'bool' : {} };
rootQueryObj.bool.must = [];
rootQueryObj.bool.must.push( searchJson );
rootQueryObj.bool.must.push( { "match": {"system_type" : "bulk"} } );
*/
rootQueryObj.bool.must.push( { "match": {"system_type" : "bulk"} } );
console.log('SENDING: ', JSON.stringify(rootQueryObj)); console.log(': ', rootQueryObj.bool.must);
let systemTypePosition = rootQueryObj.bool.must.length-1;
this.esQueryObject = rootQueryObj;
console.log('SENDING: ', JSON.stringify(rootQueryObj)); console.log(': ', rootQueryObj.bool.must);
LoadingPopup.show();
//let oReq = util.serverReqPOST('http://enc-staging-nomad.esc.rzg.mpg.de/current/v1.0/esmaterials', postQuery, e => {
......@@ -9359,11 +9382,20 @@
this.matMap.set('1D', this._createSystemTypeData(oneDData, 1, oneDe.target.status === 200));
this._updateUI(this.currentSystemType);
let selectedSystemType = null;
this.matMap.forEach( (materials, systemType) => {
this.element.querySelector('#system-tab-'+systemType).disabled =
(materials.total === 0);
if (selectedSystemType === null && materials.total > 0) {
selectedSystemType = systemType;
this.element.querySelector('#system-tab-'+this.currentSystemType).className = '';
this.element.querySelector('#system-tab-'+selectedSystemType).className = 'selected';
this.currentSystemType = selectedSystemType;
}
});
rootQueryObj.bool.must[systemTypePosition].match.system_type = this.currentSystemType;
this._updateUI(this.currentSystemType);
//this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
......@@ -9550,12 +9582,9 @@
this.element = document.createElement('div');
this.element.setAttribute("id",'filter-panel-placeholder');
this.element.innerHTML=
`
<div class="field">
<div class="field-title"><span info-sys-data="space-group">Space group number</span></div>
<input type="text" class="space-group-number-field">
</div>
` <br>
<div>--- Structure ---</div>
<br>
<div class="field">
<div class="field-title">System type</div>
<input type="checkbox" class="system-type-field" value="bulk"> Bulk<br>
......@@ -9563,23 +9592,6 @@
<input type="checkbox" class="system-type-field" value="1D"> 1D<br>
</div>
<div class="field">
<div class="field-title"><span info-sys-data="mass-density">Mass density</span> <span style="font-weight: normal;">(kg/m<sup>3</sup>)</span></div>
<!-- <div class="test-slider"> </div> -->
Min: <input type="text" class="mass-density-min-field">&nbsp;&nbsp;
Max: <input type="text" class="mass-density-max-field">
</div>
<div class="field">
<div class="field-title"><span info-sys-data="structure-type">Structure type</span></div>
<select class="structure-type-field" style="max-width: 174px">
<option></option>
</select>
</div>
<div class="field">
<div class="field-title"><span info-sys-data="crystal-system">Crystal system</span></div>
<input type="checkbox" class="crystal-system-field" value="cubic">
......@@ -9598,6 +9610,42 @@
<span info-sys-data="crystal-system.value:triclinic">Triclinic</span><br>
</div>
<div class="field">
<div class="field-title"><span info-sys-data="space-group">Space group</span></div>
<select id="space-group-dropdown-list">
<option value="by-number">by number</option>
<option value="by-symbol">by short symbol</option>
</select>
<input type="text" class="space-group-textfield" style="width: 60px">
</div>
<div class="field">
<div class="field-title">Strukturbericht designation</div>
<input type="text" class="strukturbericht-designation-field">
</div>
<div class="field">
<div class="field-title"><span info-sys-data="structure-type">Structure type</span></div>
<select class="structure-type-field" style="max-width: 174px">
<option ></option>
</select>
</div>
<br>
<div>--- Properties ---</div>
<br>
<div class="field">
<div class="field-title"><span info-sys-data="mass-density">Mass density</span> <span style="font-weight: normal;">(kg/m<sup>3</sup>)</span></div>
<!-- <div class="test-slider"> </div> -->
Min: <input type="text" class="mass-density-min-field">&nbsp;&nbsp;
Max: <input type="text" class="mass-density-max-field">
</div>
<div class="field">
<div class="field-title"><span info-sys-data="band-gap">Band gap</span> <span style="font-weight: normal;">(eV)</span></div>
......@@ -9610,7 +9658,7 @@
</div>
<div class="field" style="padding-top: 28px;">
<div class="field" >
<input type="radio" name="band-gap-type" value="direct"> Direct<br>
<input type="radio" name="band-gap-type" value="indirect"> Indirect<br>
<input type="radio" name="band-gap-type" value="both" checked> Both<br>
......@@ -9657,11 +9705,13 @@
getValues(){
//let map = this.getPropsWithValueFromCurrentTab(false);
let filterMap = new Map();
this.addFilterFromTextField(filterMap, 'space-group-number');
this.addFilterFromCheckboxes(filterMap,'system-type');
this.addRangeFilter(filterMap, 'mass-density');
this.addFilterFromDropdownList(filterMap, 'structure-type');
this.addFilterFromCheckboxes(filterMap, 'crystal-system');
this.addSpaceGroupFilter(filterMap);//this.addFilterFromTextField(filterMap, 'space-group-number');
this.addFilterFromTextField(filterMap, 'strukturbericht-designation');
this.addFilterFromDropdownList(filterMap, 'structure-type');
this.addRangeFilter(filterMap, 'mass-density');
this.addRangeFilter(filterMap, 'band-gap');
this.addBandgapTypeFilter(filterMap);
this.addFiltersFromBoolCheckboxes(filterMap,
......@@ -9694,6 +9744,18 @@
//if (reset) field.selectedIndex = 0;
}
addSpaceGroupFilter(filterMap){
let filterName;
let field = this.element.querySelector('#space-group-dropdown-list');
let type = field.options[field.selectedIndex].value;
if (type === 'by-number') filterName = 'space-group-number';
else filterName = 'space-group-international-short-symbol';
let value = this.element.querySelector('.space-group-textfield').value;
if (value.trim() !== '')
filterMap.set(filterName, [value]);
//if (reset) field.selectedIndex = 0;
}
addRangeFilter(filterMap, filterName){
let minField = document.querySelector('.'+filterName+'-min-field');
let maxField = document.querySelector('.'+filterName+'-max-field');
......
client/src/search-mod/FilterPanel.view.js
View file @ e03e48df
......@@ -37,12 +37,9 @@ class FilterPanel {
this.element = document.createElement('div');
this.element.setAttribute("id",'filter-panel-placeholder');
this.element.innerHTML=
`
<div class="field">
<div class="field-title"><span info-sys-data="space-group">Space group number</span></div>
<input type="text" class="space-group-number-field">
</div>
` <br>
<div>--- Structure ---</div>
<br>
<div class="field">
<div class="field-title">System type</div>
<input type="checkbox" class="system-type-field" value="bulk"> Bulk<br>
......@@ -50,23 +47,6 @@ class FilterPanel {
<input type="checkbox" class="system-type-field" value="1D"> 1D<br>
</div>
<div class="field">
<div class="field-title"><span info-sys-data="mass-density">Mass density</span> <span style="font-weight: normal;">(kg/m<sup>3</sup>)</span></div>
<!-- <div class="test-slider"> </div> -->
Min: <input type="text" class="mass-density-min-field">&nbsp;&nbsp;
Max: <input type="text" class="mass-density-max-field">
</div>
<div class="field">
<div class="field-title"><span info-sys-data="structure-type">Structure type</span></div>
<select class="structure-type-field" style="max-width: 174px">
<option></option>
</select>
</div>
<div class="field">
<div class="field-title"><span info-sys-data="crystal-system">Crystal system</span></div>
<input type="checkbox" class="crystal-system-field" value="cubic">
......@@ -85,6 +65,42 @@ class FilterPanel {
<span info-sys-data="crystal-system.value:triclinic">Triclinic</span><br>
</div>
<div class="field">
<div class="field-title"><span info-sys-data="space-group">Space group</span></div>
<select id="space-group-dropdown-list">
<option value="by-number">by number</option>
<option value="by-symbol">by short symbol</option>
</select>
<input type="text" class="space-group-textfield" style="width: 60px">
</div>
<div class="field">
<div class="field-title">Strukturbericht designation</div>
<input type="text" class="strukturbericht-designation-field">
</div>
<div class="field">
<div class="field-title"><span info-sys-data="structure-type">Structure type</span></div>
<select class="structure-type-field" style="max-width: 174px">
<option ></option>
</select>
</div>
<br>
<div>--- Properties ---</div>
<br>
<div class="field">
<div class="field-title"><span info-sys-data="mass-density">Mass density</span> <span style="font-weight: normal;">(kg/m<sup>3</sup>)</span></div>
<!-- <div class="test-slider"> </div> -->
Min: <input type="text" class="mass-density-min-field">&nbsp;&nbsp;
Max: <input type="text" class="mass-density-max-field">
</div>
<div class="field">
<div class="field-title"><span info-sys-data="band-gap">Band gap</span> <span style="font-weight: normal;">(eV)</span></div>
......@@ -97,7 +113,7 @@ class FilterPanel {
</div>
<div class="field" style="padding-top: 28px;">
<div class="field" >
<input type="radio" name="band-gap-type" value="direct"> Direct<br>
<input type="radio" name="band-gap-type" value="indirect"> Indirect<br>
<input type="radio" name="band-gap-type" value="both" checked> Both<br>
......@@ -144,11 +160,13 @@ class FilterPanel {
getValues(){
//let map = this.getPropsWithValueFromCurrentTab(false);
let filterMap = new Map();
this.addFilterFromTextField(filterMap, 'space-group-number');
this.addFilterFromCheckboxes(filterMap,'system-type');
this.addRangeFilter(filterMap, 'mass-density');
this.addFilterFromDropdownList(filterMap, 'structure-type');
this.addFilterFromCheckboxes(filterMap, 'crystal-system');
this.addSpaceGroupFilter(filterMap);//this.addFilterFromTextField(filterMap, 'space-group-number');
this.addFilterFromTextField(filterMap, 'strukturbericht-designation');
this.addFilterFromDropdownList(filterMap, 'structure-type');
this.addRangeFilter(filterMap, 'mass-density');
this.addRangeFilter(filterMap, 'band-gap');
this.addBandgapTypeFilter(filterMap);
this.addFiltersFromBoolCheckboxes(filterMap,
......@@ -181,6 +199,18 @@ class FilterPanel {
//if (reset) field.selectedIndex = 0;
}
addSpaceGroupFilter(filterMap){
let filterName;
let field = this.element.querySelector('#space-group-dropdown-list');
let type = field.options[field.selectedIndex].value;
if (type === 'by-number') filterName = 'space-group-number';
else filterName = 'space-group-international-short-symbol';
let value = this.element.querySelector('.space-group-textfield').value;
if (value.trim() !== '')
filterMap.set(filterName, [value]);
//if (reset) field.selectedIndex = 0;
}
addRangeFilter(filterMap, filterName){
let minField = document.querySelector('.'+filterName+'-min-field');
let maxField = document.querySelector('.'+filterName+'-max-field');
......
client/src/search-mod/MaterialList.view.js
View file @ e03e48df
......@@ -135,7 +135,8 @@ class MaterialList {
_paginationSearch(){
this.esQueryObject.bool.must[1].match.system_type = this.currentSystemType;
let systemTypePosition = this.esQueryObject.bool.must.length-1;
this.esQueryObject.bool.must[systemTypePosition].match.system_type = this.currentSystemType;
let page = this.matMap.get(this.currentSystemType).page;
let req = util.serverReqPOST(util.getSearchURL()+'?page='+page+
......@@ -151,23 +152,37 @@ class MaterialList {
}
initSearchTest(rootQueryObj){
//this.resultsContainer.style.visibility = 'hidden';
this.matMap.clear();
let qqq = { 'bool' : {} };
//qqq.bool.must = {"terms":{"crystal_system":{"operator":"or","query":"cubic"}}};
qqq.bool.must = {"terms":{"crystal_system": ["hexagonal","cubic"]}};
console.log('SENDING: ', JSON.stringify(qqq)); console.log(': ', qqq.bool.must);
let bulkReq = util.serverReqPOST(util.getSearchURL()+'?page=1'+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(qqq), bulke => {
let bulkData = JSON.parse(bulke.target.response); console.log('GETTING: ', bulkData);
this.matMap.set('bulk', this._createSystemTypeData(bulkData, 1, bulke.target.status === 200));
LoadingPopup.hide();
});
}
initSearch(rootQueryObj){
//this.resultsContainer.style.visibility = 'hidden';
this.matMap.clear();
this.currentSystemType = 'bulk';
/*
let rootQueryObj = { 'bool' : {} };
rootQueryObj.bool.must = [];
rootQueryObj.bool.must.push( searchJson );
rootQueryObj.bool.must.push( { "match": {"system_type" : "bulk"} } );
*/
rootQueryObj.bool.must.push( { "match": {"system_type" : "bulk"} } );
console.log('SENDING: ', JSON.stringify(rootQueryObj)); console.log(': ', rootQueryObj.bool.must);
let systemTypePosition = rootQueryObj.bool.must.length-1;
this.esQueryObject = rootQueryObj;
console.log('SENDING: ', JSON.stringify(rootQueryObj)); console.log(': ', rootQueryObj.bool.must);
LoadingPopup.show();
//let oReq = util.serverReqPOST('http://enc-staging-nomad.esc.rzg.mpg.de/current/v1.0/esmaterials', postQuery, e => {
......@@ -199,11 +214,20 @@ class MaterialList {
this.matMap.set('1D', this._createSystemTypeData(oneDData, 1, oneDe.target.status === 200));
this._updateUI(this.currentSystemType);
let selectedSystemType = null;
this.matMap.forEach( (materials, systemType) => {
this.element.querySelector('#system-tab-'+systemType).disabled =
(materials.total === 0);
if (selectedSystemType === null && materials.total > 0) {
selectedSystemType = systemType;
this.element.querySelector('#system-tab-'+this.currentSystemType).className = '';
this.element.querySelector('#system-tab-'+selectedSystemType).className = 'selected';
this.currentSystemType = selectedSystemType;
}
});
rootQueryObj.bool.must[systemTypePosition].match.system_type = this.currentSystemType;
this._updateUI(this.currentSystemType);
//this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
......
client/src/search-mod/NewSearchMod.js
View file @ e03e48df
......@@ -492,8 +492,10 @@ class NewSearchMod {
rootQueryObj.bool.must.push( this._getESSimpleMatch(filterNameDef, values, false) );
}else{ // normal case
rootQueryObj.bool.must.push( this._getESOperatorMatch(filterNameDef, values, false) );
console.log(this._getESOperatorMatch(filterNameDef, values, false) );
//rootQueryObj.bool.must.push( this._getESOperatorMatch(filterNameDef, values, false) );
rootQueryObj.bool.must.push( this._getESTermsArray(filterNameDef, values) );
//console.log(this._getESOperatorMatch(filterNameDef, values, false) );
}
});
......@@ -509,6 +511,12 @@ class NewSearchMod {
};
}
_getESTermsArray(field, value){
return {
"terms": { [field] : value }
};
}
_getESOperatorMatch(field, elements, and = true){
let elementsString = '';
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment