Commit 54e1bf34 authored by Iker Hurtado's avatar Iker Hurtado
Browse files

Manual merge/integration of "new-search" branch into master + Several new search improvements (3)

Composition and Properties panels disabling behavior. Properties panel graphic design change implementation
parent 35959d2b
Pipeline #89886 skipped with stage
...@@ -352,6 +352,8 @@ div.title span.unfolded::before{ ...@@ -352,6 +352,8 @@ div.title span.unfolded::before{
display: flex; display: flex;
margin-top: 10px; margin-top: 10px;
justify-content: space-evenly;/*center;*/ justify-content: space-evenly;/*center;*/
align-items: flex-start;
} }
...@@ -364,12 +366,15 @@ div.title span.unfolded::before{ ...@@ -364,12 +366,15 @@ div.title span.unfolded::before{
.search-filter-side{ .search-filter-side{
background-color: #DDD; background-color: white;/* background-color: #DDD;*/
width: 240px; width: 220px;
padding: 10px 16px; padding: 16px;
} }
.search-main-side{
transition: opacity 1s;
}
.search-box{ .search-box{
width: 742px; width: 742px;
...@@ -559,22 +564,37 @@ div.title span.unfolded::before{ ...@@ -559,22 +564,37 @@ div.title span.unfolded::before{
} }
/* equivalent to view-box */
.filter-section-box{
margin-bottom: 30px;
/*background-color: white;*/
}
.filter-section-title{
color: white; padding: 10px 0;
font-size: 12pt;
text-align: center;
background-color: #E56400;
}
.filter-quantity-box{ .filter-quantity-box{
margin-bottom: 12px; margin-bottom: 12px;
padding: 0px 0px 4px 4px ; padding: 0px 0px 4px 4px ;
} }
.filter-quantity-box > * {
transition: opacity 1s;
}
.field-title{ .field-title{
font-size: 1.1em; color: #E56400;
font-size: 1em;
padding: 10px 0; padding: 10px 0;
font-weight: bold; font-weight: bold;
} }
/* equivalent to view-box */
.filter-section-box{
margin: 16px 8px;
background-color: white;
}
input[type='range'] { input[type='range'] {
......
...@@ -30,6 +30,8 @@ let InfoSys = require('../common/InfoSys.js'); ...@@ -30,6 +30,8 @@ let InfoSys = require('../common/InfoSys.js');
let AutocompleteMultiselectList = require('./Autocomplete.view.js').AutocompleteMultiselectList; let AutocompleteMultiselectList = require('./Autocomplete.view.js').AutocompleteMultiselectList;
const NOT_SELECTED_OPACITY = 0.2
class FilterPanel { class FilterPanel {
constructor() { constructor() {
...@@ -102,7 +104,7 @@ class FilterPanel { ...@@ -102,7 +104,7 @@ class FilterPanel {
createPropsGroupBox(title){ createPropsGroupBox(title){
const element = document.createElement('div'); const element = document.createElement('div');
element.className = 'filter-section-box'; element.className = 'filter-section-box';
element.innerHTML = '<div class="title">'+title+'</div>'; element.innerHTML = '<div class="filter-section-title">'+title+'</div>';
return element; return element;
} }
...@@ -207,7 +209,7 @@ class CheckboxesField{ ...@@ -207,7 +209,7 @@ class CheckboxesField{
//checkbox.parentElement.style.backgroundColor = 'red' //checkbox.parentElement.style.backgroundColor = 'red'
checkbox.parentElement.style.opacity = ''//(bool ? '' : '') checkbox.parentElement.style.opacity = ''//(bool ? '' : '')
}else{ }else{
checkbox.parentElement.style.opacity = (bool ? 0.1 : '') checkbox.parentElement.style.opacity = (bool ? NOT_SELECTED_OPACITY : '')
} }
}); });
} }
...@@ -245,8 +247,8 @@ class SpaceGroupField{ ...@@ -245,8 +247,8 @@ class SpaceGroupField{
highlightSelected(bool){ highlightSelected(bool){
if (this.getValues() === null){ if (this.getValues() === null){
this.select.style.opacity = (bool ? 0.1 : '') this.select.style.opacity = (bool ? NOT_SELECTED_OPACITY : '')
this.input.style.opacity = (bool ? 0.1 : '') this.input.style.opacity = (bool ? NOT_SELECTED_OPACITY : '')
} }
} }
...@@ -281,7 +283,7 @@ class AutocompleteField{ ...@@ -281,7 +283,7 @@ class AutocompleteField{
highlightSelected(bool){ highlightSelected(bool){
if (this.getValues() === null) if (this.getValues() === null)
this.autocomplete.element.style.opacity = (bool ? 0.1 : '') this.autocomplete.element.style.opacity = (bool ? NOT_SELECTED_OPACITY : '')
} }
} }
...@@ -318,7 +320,7 @@ class MassDensityField{ ...@@ -318,7 +320,7 @@ class MassDensityField{
highlightSelected(bool){ highlightSelected(bool){
if (this.getValues() === null) if (this.getValues() === null)
this.inputs[0].parentElement.style.opacity = (bool ? 0.1 : '') this.inputs[0].parentElement.style.opacity = (bool ? NOT_SELECTED_OPACITY : '')
} }
} }
......
...@@ -187,13 +187,29 @@ class MaterialList { ...@@ -187,13 +187,29 @@ class MaterialList {
//this.resultsContainer.style.visibility = 'hidden'; //this.resultsContainer.style.visibility = 'hidden';
this.matMap.clear(); this.matMap.clear();
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); //console.log('SENDING: ', JSON.stringify(rootQueryObj)); console.log(': ', rootQueryObj.bool.must);
let systemTypePosition = rootQueryObj.bool.must.length-1; //let systemTypePosition = rootQueryObj.bool.must.length-1;
this.esQueryObject = rootQueryObj; //this.esQueryObject = rootQueryObj;
LoadingPopup.show(); LoadingPopup.show();
rootQueryObj = 'elements HAS ONLY "Si" OR elements HAS ONLY "Ag"';
console.log('SENDING: ',rootQueryObj);
let bulkReq = util.serverReqPOST(util.getSearchURL(), JSON.stringify({ query: rootQueryObj}) , bulke => {
let bulkData = JSON.parse(bulke.target.response); console.log('GETTING: ', bulkData);
this.matMap.set('bulk', this._createSystemTypeData(bulkData, 1, bulke.target.status === 200));
this._updateUI(this.currentSystemType);
this._show();
LoadingPopup.hide();
this._launchMaterialViewerIfOnlyOne();
});
/*
//let oReq = util.serverReqPOST('http://enc-staging-nomad.esc.rzg.mpg.de/current/v1.0/esmaterials', postQuery, e => { //let oReq = util.serverReqPOST('http://enc-staging-nomad.esc.rzg.mpg.de/current/v1.0/esmaterials', postQuery, e => {
// Bulk materials request // Bulk materials request
let bulkReq = util.serverReqPOST(util.getSearchURL()+'?page=1'+ let bulkReq = util.serverReqPOST(util.getSearchURL()+'?page=1'+
...@@ -248,6 +264,8 @@ class MaterialList { ...@@ -248,6 +264,8 @@ class MaterialList {
}); });
*/
/* /*
oReq.addEventListener("error", e => { // Not valid query oReq.addEventListener("error", e => { // Not valid query
console.log('Search ERROR - Not valid query '); console.log('Search ERROR - Not valid query ');
......
...@@ -239,6 +239,11 @@ class NewSearchMod { ...@@ -239,6 +239,11 @@ class NewSearchMod {
}else{ // Search by complex search expression }else{ // Search by complex search expression
searchExpressionQuery = this.getOptimadeQueryFromSearchQuery(this.searchQuery, this.queryTypes);
this.materialList.initSearch(searchExpressionQuery);//this._addFiltersInSearchQuery( this.filterPanel.getValues(), searchExpressionQuery));
/*
if (this.element.querySelector('#allow-other-elements').checked) if (this.element.querySelector('#allow-other-elements').checked)
searchExpressionQuery = this._getESQueryFromSearchQuery_otherElements( searchExpressionQuery = this._getESQueryFromSearchQuery_otherElements(
this.searchQuery, this.queryTypes); this.searchQuery, this.queryTypes);
...@@ -253,6 +258,7 @@ class NewSearchMod { ...@@ -253,6 +258,7 @@ class NewSearchMod {
//TODO: why not identifying by ID??? //TODO: why not identifying by ID???
this.element.querySelector('.add-box').style.display = 'none'; this.element.querySelector('.add-box').style.display = 'none';
*/
} }
} }
...@@ -335,24 +341,14 @@ class NewSearchMod { ...@@ -335,24 +341,14 @@ class NewSearchMod {
}); });
/* // gray-out events for the Properties panel and Composition panel
let mainSideElem = this.element.querySelector('.search-main-side');
this.element.querySelector('.search-filter-side').addEventListener( "mouseover", event => { this.filterSidePanel.addEventListener( "mouseenter", event => {
if (event.target === this.element.querySelector('.search-filter-side')){
console.log('filterSideBox', true)
this.element.querySelector('.search-main-side').style.opacity = 0.7
}
});
*/
let filterSideElem = this.element.querySelector('.search-filter-side')
let mainSideElem = this.element.querySelector('.search-main-side')
filterSideElem.addEventListener( "mouseenter", event => {
mainSideElem.style.opacity = 0.3 mainSideElem.style.opacity = 0.3
}); });
filterSideElem.addEventListener( "mouseleave", event => { this.filterSidePanel.addEventListener( "mouseleave", event => {
mainSideElem.style.opacity = '' mainSideElem.style.opacity = ''
}); });
...@@ -364,38 +360,29 @@ class NewSearchMod { ...@@ -364,38 +360,29 @@ class NewSearchMod {
this.filterPanel.showSelectedProps(false) this.filterPanel.showSelectedProps(false)
}); });
/* }
this.element.addEventListener( "mouseover", event => {
changePanels(true, event, this.element )
});
this.element.addEventListener( "mouseout", event => {
changePanels(false, event, this.element )
});
function changePanels(over, event, element ){
let filterSideBox = (event.target === element.querySelector('.search-filter-side'));//.closest('.search-filter-side'); // (1) getOptimadeQueryFromSearchQuery(searchQuery, queryTypes){
let mainSideBox = (event.target === element.querySelector('.search-main-side'));//event.target.closest('.search-main-side');
if (filterSideBox){ let optimadeQuery = '';
console.log('filterSideBox', over) searchQuery.forEach( (item, i) => {
this.element.querySelector('.search-main-side').style.opacity = (over ? 0.7 : '') if (queryTypes[i] === 'E'){
optimadeQuery += ' elements HAS ONLY "'+searchQuery[i]+'"'
}else if (mainSideBox){ }else if ( queryTypes[i] === 'F' ){
console.log('mainSideBox', over) }else if ( queryTypes[i] === 'S' ){
optimadeQuery += ' '+searchQuery[i]+''
} }
} });
*/ console.log('optimadeQuery: ', optimadeQuery)
return optimadeQuery;
} }
_getESQueryFromSearchQuery(searchQuery, queryTypes){ _getESQueryFromSearchQuery(searchQuery, queryTypes){
let formulas = []; let formulas = [];
let parFormulas = []; let parFormulas = [];
let parOperator = null; let parOperator = null; // operator just before the opening parenthesis
let openIndex = -1; let openIndex = -1;
searchQuery.forEach( (item, i) => { searchQuery.forEach( (item, i) => {
if (queryTypes[i] === 'F' || queryTypes[i] === 'E'){ if (queryTypes[i] === 'F' || queryTypes[i] === 'E'){
...@@ -904,8 +891,6 @@ class NewSearchMod { ...@@ -904,8 +891,6 @@ class NewSearchMod {
// console.log('FINAL LOOP', map, index); // console.log('FINAL LOOP', map, index);
} }
if (type === 'tokens'){ if (type === 'tokens'){
let tokens = []; let tokens = [];
map.forEach( (value, key) => tokens.push(key+value) ); map.forEach( (value, key) => tokens.push(key+value) );
......
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