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

Several UI functionality improvements

- Set back to the non-reactive search (only search by clicking the search button)
- Allow search without any prop selected or item inserted in the search box
- Disable the direct showing of the material when just one result is retrieved in the search
- Add a NO RESULTS user message
- Set Inclusive mode by default
parent cd1b8e13
Pipeline #93204 skipped with stage
window.nomadEnv = {
//apiRoot: "https://nomad-lab.eu/dev/nomad/enc-search/api/encyclopedia/",
apiRoot: "https://nomad-lab.eu/dev/rae/enc-search/api/encyclopedia/", //"https://nomad-lab.eu/prod/rae/beta/api/encyclopedia/",
//apiRoot: "https://nomad-lab.eu/dev/rae/enc-search/api/encyclopedia/",
apiRoot: "https://nomad-lab.eu/prod/rae/beta/api/encyclopedia/",
//apiRoot: "https://nomad-lab.eu/prod/rae/api/encyclopedia/",
......
......@@ -784,22 +784,22 @@ div#specialRows{margin: 30px 40px;}
#matlist{ width: 690px; margin: 0 auto 80px;}
.MaterialList{ width: 690px; margin: 0 auto 80px;}
/* #paginationWg erased*/
#matlist .formula {
.MaterialList .formula {
padding: 20px 0 4px; font-size: 1.1em;
background-color: #EEE; border-bottom: 1px solid #AAA;
}
#matlist .mat-row { font-size: .9em; cursor: pointer;}
#matlist td { padding: 2px 0;}
.MaterialList .mat-row { font-size: .9em; cursor: pointer;}
.MaterialList td { padding: 2px 0;}
#matlist .not-found{ font-size: 1.6em; color: #E56400;
.MaterialList .not-found{ font-size: 1.6em; color: #E56400;
text-align: center; padding: 80px 0; }
#matlist .results-total{text-align: center;}
#matlist .pag-header{ font-size: 1.0em;padding: 10px 12px 24px;text-align: center;}
.MaterialList .results-total{text-align: center;}
.MaterialList .pag-header{ font-size: 1.0em;padding: 10px 12px 24px;text-align: center;}
span.prevButton{ display: inline-block; cursor: pointer;}
span.page{ display: inline-block; }
......
......@@ -98,8 +98,8 @@ class FilterPanel {
this.element.addEventListener('change', e => {
if (e.target.id !== 'space-group-dropdown-list') {
console.log('change event', e);
this.addPropsChangeListener(this.getValues())
// console.log('change event', e);
if (this.addPropsChangeListener) this.addPropsChangeListener(this.getValues())
}
......
......@@ -34,16 +34,23 @@ class MaterialList {
constructor(){
this.element = document.createElement('div');
this.element.setAttribute("id",'matlist');
this.element.className = 'MaterialList';
// state
this.visible = false;
this.noResults = true;
this.matMap = new Map();
//this.currentSystemType = 'bulk';
this.optimadeQuery = null;
this._hide();
this.noResultsBox = document.createElement('div');
this.noResultsBox.innerHTML = 'NO RESULTS FOUND';
this.element.append(this.noResultsBox);
this.matListWrapper = document.createElement('div');
this.element.append(this.matListWrapper);
this.pagControl = new PaginationControl();
this.element.append(this.pagControl.element);
this.matListWrapper.append(this.pagControl.element);
this.pagControl.setPrevPageListener( page => {
this._search(page);
});
......@@ -52,28 +59,19 @@ class MaterialList {
})
this.matListContainer = new MatListContainer();
this.element.append(this.matListContainer.element);
this.matListWrapper.append(this.matListContainer.element);
}
attachAndSetEvents(element){
element.appendChild(this.element);
this._render();
}
_hide() {
this.element.style.display = 'none';
}
_show() {
this.element.style.display = '';
}
/*
invalidateSearch(){
this._hide();
}
}*/
initSearch(optimadeQuery){
......@@ -103,23 +101,19 @@ class MaterialList {
.then( result => {
console.log('GETTING: ', result);
// Update
// Update state
this.noResults = (result.results.length === 0);
this._setMatList(result.results);
this.pagControl.set(result.pages);
if (result.results.length === 0){
this._hide();
this.visible = true;
this._render();
}else{
/* Go to the material page straightaway - Not wanted fro now
if (result.results.length === 1){
const onlyMat = this.matMap.values().next().value[0];
util.setBrowserHashPath('material', onlyMat.material_id);
}
//else{
this.matListContainer.updateList(this.matMap);
this._show();
//}
}
} */
LoadingPopup.hide();
})
......@@ -138,6 +132,17 @@ class MaterialList {
}
_render(){
this.element.style.display = this.visible ? '' : 'none';
if (this.visible){
this.noResultsBox.style.display = this.noResults ? '' : 'none';
this.matListWrapper.style.display = this.noResults ? 'none' : '';
this.matListContainer.updateList(this.matMap);
}
}
_setMatList(matList){
if (matList.length > 0){
......
......@@ -131,14 +131,17 @@ class NewSearchMod {
this.materialNameBox.enableInput();
this.elementTable.deselectAllElements();
});
/*
this.searchBox.setSearchQueryChangeListener( () => {
this.sendQuery();
});
}); */
this.allowOtherElementsCheckbox = this.element.querySelector('#allow-other-elements');
/*
this.allowOtherElementsCheckbox.addEventListener( 'change', e => {
this.sendQuery();
});
}); */
/* This button could be out of the search box because its functionality
is not part of it. It can also be removed eventually, if considered not necessary */
......@@ -211,10 +214,11 @@ class NewSearchMod {
this.filterPanel = new FilterPanel();
this.filterSidePanel.appendChild(this.filterPanel.element);
/*
this.filterPanel.setPropsChangeListener( propsMap => {
console.log('filterPanel.change Event propsMap: ', propsMap);
this.sendQuery();
})
})*/
this.materialList= new MaterialList();
this.resultsPage = this.element.querySelector('.results-panel');
......@@ -358,15 +362,13 @@ class NewSearchMod {
sendQuery(){
//**** The optimade query must be formed from the search box and the properties selected
let optimadeQuery = this.searchBox.getOptimadeQuery(this.allowOtherElementsCheckbox.checked);
let optimadeQueryForProps = getOptimadeQueryFromProps(this.filterPanel.getValues());
if (optimadeQuery !== ''){ // if there are items in the serach box
optimadeQuery += (optimadeQueryForProps.length > 0 ? ' AND '+optimadeQueryForProps : '');
console.log('sendQuery optimadeQuery: ', optimadeQuery );
this.materialList.initSearch(optimadeQuery);
}else
this.materialList.invalidateSearch();
const searchBoxOptimadeQuery = this.searchBox.getOptimadeQuery(this.allowOtherElementsCheckbox.checked);
const propsOptimadeQuery = getOptimadeQueryFromProps(this.filterPanel.getValues());
const sep = (searchBoxOptimadeQuery !== '' && propsOptimadeQuery !== '' ? ' AND ' : '');
// If one of them is empty, it and sep variable are ''
this.materialList.initSearch(searchBoxOptimadeQuery+sep+propsOptimadeQuery);
// this.materialList.invalidateSearch();
function getOptimadeQueryFromProps(propsValuesMap){
......
......@@ -169,16 +169,29 @@ class SearchBox{
}else{ // Exclusive search. For now only one formula or elements subqueries supported. Operator NOT doesn't make sense here
const items = [];
const notItems = [];
let notItem = false;
let areElements = false;
subquery.forEach( (item) => {
if (isElement(item)) areElements = true;
if (item !== 'AND' && item !== 'NOT'){ // item = element or formula
if (item === 'NOT'){
notItem = true;
}else if (item !== 'AND'){ // item = element or formula
if (notItem){
notItem = false;
if (areElements) notItems.push(`"${item}"`);
else // formula
notItems.push(new Formula(item).getFragments());
}else{
if (areElements) items.push(`"${item}"`);
else // formula
items.push(new Formula(item).getFragments());
}
}
});
console.log('Exclusive search: ', items)
// console.log('Exclusive search: ', items)
optimadeQuery += (areElements ? 'elements' : 'formula') + ' HAS ONLY '+ items.join(', ');
}
......@@ -242,7 +255,7 @@ class SearchBox{
}
console.log('this.updateSearchQuery: ', this.searchQuery ,this.queryTypes);
this.searchQueryBox.innerHTML = html;
this.searchQueryChangeListener();
if (this.searchQueryChangeListener) this.searchQueryChangeListener();
}
......
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