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