Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
client/css/styles.css
View file @ 54e1bf34
......@@ -352,6 +352,8 @@ div.title span.unfolded::before{
display: flex;
margin-top: 10px;
justify-content: space-evenly;/*center;*/
align-items: flex-start;
}
......@@ -364,12 +366,15 @@ div.title span.unfolded::before{
.search-filter-side{
background-color: #DDD;
width: 240px;
padding: 10px 16px;
background-color: white;/* background-color: #DDD;*/
width: 220px;
padding: 16px;
}
.search-main-side{
transition: opacity 1s;
}
.search-box{
width: 742px;
......@@ -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{
margin-bottom: 12px;
padding: 0px 0px 4px 4px ;
}
.filter-quantity-box > * {
transition: opacity 1s;
}
.field-title{
font-size: 1.1em;
color: #E56400;
font-size: 1em;
padding: 10px 0;
font-weight: bold;
}
/* equivalent to view-box */
.filter-section-box{
margin: 16px 8px;
background-color: white;
}
input[type='range'] {
......
client/src/search-mod/FilterPanel.view.js
View file @ 54e1bf34
......@@ -30,6 +30,8 @@ let InfoSys = require('../common/InfoSys.js');
let AutocompleteMultiselectList = require('./Autocomplete.view.js').AutocompleteMultiselectList;
const NOT_SELECTED_OPACITY = 0.2
class FilterPanel {
constructor() {
......@@ -102,7 +104,7 @@ class FilterPanel {
createPropsGroupBox(title){
const element = document.createElement('div');
element.className = 'filter-section-box';
element.innerHTML = '<div class="title">'+title+'</div>';
element.innerHTML = '<div class="filter-section-title">'+title+'</div>';
return element;
}
......@@ -207,7 +209,7 @@ class CheckboxesField{
//checkbox.parentElement.style.backgroundColor = 'red'
checkbox.parentElement.style.opacity = ''//(bool ? '' : '')
}else{
checkbox.parentElement.style.opacity = (bool ? 0.1 : '')
checkbox.parentElement.style.opacity = (bool ? NOT_SELECTED_OPACITY : '')
}
});
}
......@@ -245,8 +247,8 @@ class SpaceGroupField{
highlightSelected(bool){
if (this.getValues() === null){
this.select.style.opacity = (bool ? 0.1 : '')
this.input.style.opacity = (bool ? 0.1 : '')
this.select.style.opacity = (bool ? NOT_SELECTED_OPACITY : '')
this.input.style.opacity = (bool ? NOT_SELECTED_OPACITY : '')
}
}
......@@ -281,7 +283,7 @@ class AutocompleteField{
highlightSelected(bool){
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{
highlightSelected(bool){
if (this.getValues() === null)
this.inputs[0].parentElement.style.opacity = (bool ? 0.1 : '')
this.inputs[0].parentElement.style.opacity = (bool ? NOT_SELECTED_OPACITY : '')
}
}
......
client/src/search-mod/MaterialList.view.js
View file @ 54e1bf34
......@@ -187,13 +187,29 @@ class MaterialList {
//this.resultsContainer.style.visibility = 'hidden';
this.matMap.clear();
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;
// 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;
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 => {
// Bulk materials request
let bulkReq = util.serverReqPOST(util.getSearchURL()+'?page=1'+
......@@ -248,6 +264,8 @@ class MaterialList {
});
*/
/*
oReq.addEventListener("error", e => { // Not valid query
console.log('Search ERROR - Not valid query ');
......
client/src/search-mod/NewSearchMod.js
View file @ 54e1bf34
......@@ -239,6 +239,11 @@ class NewSearchMod {
}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)
searchExpressionQuery = this._getESQueryFromSearchQuery_otherElements(
this.searchQuery, this.queryTypes);
......@@ -253,6 +258,7 @@ class NewSearchMod {
//TODO: why not identifying by ID???
this.element.querySelector('.add-box').style.display = 'none';
*/
}
}
......@@ -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 => {
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 => {
this.filterSidePanel.addEventListener( "mouseenter", event => {
mainSideElem.style.opacity = 0.3
});
filterSideElem.addEventListener( "mouseleave", event => {
this.filterSidePanel.addEventListener( "mouseleave", event => {
mainSideElem.style.opacity = ''
});
......@@ -364,38 +360,29 @@ class NewSearchMod {
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)
let mainSideBox = (event.target === element.querySelector('.search-main-side'));//event.target.closest('.search-main-side');
getOptimadeQueryFromSearchQuery(searchQuery, queryTypes){
if (filterSideBox){
console.log('filterSideBox', over)
this.element.querySelector('.search-main-side').style.opacity = (over ? 0.7 : '')
let optimadeQuery = '';
searchQuery.forEach( (item, i) => {
if (queryTypes[i] === 'E'){
optimadeQuery += ' elements HAS ONLY "'+searchQuery[i]+'"'
}else if (mainSideBox){
console.log('mainSideBox', over)
}else if ( queryTypes[i] === 'F' ){
}else if ( queryTypes[i] === 'S' ){
optimadeQuery += ' '+searchQuery[i]+''
}
}
*/
});
console.log('optimadeQuery: ', optimadeQuery)
return optimadeQuery;
}
_getESQueryFromSearchQuery(searchQuery, queryTypes){
let formulas = [];
let parFormulas = [];
let parOperator = null;
let parOperator = null; // operator just before the opening parenthesis
let openIndex = -1;
searchQuery.forEach( (item, i) => {
if (queryTypes[i] === 'F' || queryTypes[i] === 'E'){
......@@ -904,8 +891,6 @@ class NewSearchMod {
// console.log('FINAL LOOP', map, index);
}
if (type === 'tokens'){
let tokens = [];
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