Commit 3d624d17 authored by Iker Hurtado's avatar Iker Hurtado
Browse files

Rebuild the material list component (1)

parent 9bc12cad
......@@ -7981,9 +7981,10 @@
pFormula = this._processFormula(f, 'element-string');
let tempQueryObj = { 'bool' : { 'must' : [] } };
tempQueryObj.bool.must.push(
this._getESOperatorMatch(
(reduced ? 'formula_reduced_terms' : 'formula_cell_terms'), pFormula[0]));
if (pFormula[0].length > 0) // length === 0 No formula, only elements
tempQueryObj.bool.must.push(
this._getESOperatorMatch(
(reduced ? 'formula_reduced_terms' : 'formula_cell_terms'), pFormula[0]));
tempQueryObj.bool.must.push(
this._getESSimpleMatch('atom_labels_keyword', pFormula[1]));
......@@ -8244,16 +8245,16 @@
}
// Travese the array removing the unnecessary parethesis (only tested for one level nested)
if ( searchQuery.indexOf('(') >= 0){ // Recursion
if ( this.searchQuery.indexOf('(') >= 0){ // Recursion
for (let i = 0; i < searchQuery.length; i++) { // dangerous: modifing a array being traversed
if ( searchQuery[i] === '(' ){
if (searchQuery[i+1] === ')'){ // '()' case
for (let i = 0; i < this.searchQuery.length; i++) { // dangerous: modifing a array being traversed
if ( this.searchQuery[i] === '(' ){
if ( this.searchQuery[i+1] === ')'){ // '()' case
this.searchQuery.splice(i, 2);
this.queryTypes.splice(i, 2);
}else if (searchQuery[i+2] === ')'){ // '(item)' case
this.searchQuery.splice(i, 3, searchQuery[i+1]);
this.queryTypes.splice(i, 3, queryTypes[i+1]);
this.searchQuery.splice(i, 3, this.searchQuery[i+1]);
this.queryTypes.splice(i, 3, this.queryTypes[i+1]);
}
}
}
......@@ -9219,6 +9220,8 @@
this.element = document.createElement('div');
this.element.setAttribute("id",'matlist');
this.formula = false; // **** Maybe this field can be removed
// map containing an entry per system type (if there are materials for it)
this.matMap = new Map();
this.matMap = new Map();
this.page = 0;
this.searchJson = null;
......@@ -9226,7 +9229,12 @@
this.pagesNum = 0;
this.element.innerHTML=
`
<div class="title"> Results </div>
<div id="system-type-tabs" style=" display: inline-block">
<button class="bulk-system-tab" id="add-tab-selected">BULK</button>
<button class="2D-system-tab" >2D</button>
<button class="1D-system-tab" style="padding: 10px 20px;" >1D</button>
<span class="title" >Results<span>
</div>
<div class="pag-header">
<span class="prevButton">
<img src="img/prev.svg" style="display: inline;" width="7px"/> &nbsp; prev
......@@ -9239,6 +9247,7 @@
<div class="data-container"> </div>`; // results data container
this.titleBox = this.element.getElementsByClassName("title")[0];
this.tabsBox = this.element.querySelector("#system-type-tabs");
// Pagination components
this.resultsNrTag = this.element.getElementsByClassName("pag-header")[0];
......@@ -9258,6 +9267,37 @@
_events() {
this.tabsBox.addEventListener( "click", (e) => {
if (e.target !== e.currentTarget) { // When the event source is a child
let className = e.target.className;
let index = className.indexOf('system-tab');
if (index > 0){
let selectingElement;
let selectingTab = className.substring(0, index-1);
this._updateUI(selectingTab);
/*
this.addPanel.replaceChild(selectingElement, this.addPanel.lastChild);
this.element.querySelector('.add-box').style.display = 'block';
// Change the styles of the buttons
let selEl = this.element.querySelector('.'+this.currentTab+'-add-btn');
this._setTabSelectedStyles(selEl, false);
this._setTabSelectedStyles(e.target, true);
// Change the triangle
this.element.querySelector('.'+this.currentTab+'-tri').style.visibility = 'hidden';
this.element.querySelector('.'+selectingTab+'-tri').style.visibility = 'visible';
*/
this.currentTab = selectingTab;
}
}
});
this.nextButton.addEventListener('click', e => {
if (this.page === this.pagesNum) return;
this.page++;
......@@ -9289,13 +9329,13 @@
}
/*
_printMatMap(){console.log('MATMAP:');
this.matMap.forEach(function(value, key, ownerMap) {
console.log(key + ' '+JSON.stringify(value));
});
}
*/
setSearch(searchJson){
//this.formula= formula;
......@@ -9308,76 +9348,68 @@
}
_search(){ /**************** ES queries!!!!!*/
_search(){
let rootQueryObj = { 'bool' : {} };
rootQueryObj.bool.must = [];
rootQueryObj.bool.must.push( this.searchJson );
rootQueryObj.bool.must.push( { "match": {"system_type" : "bulk"} } );
let postQuery = JSON.stringify(this.searchJson);
/*
let postQuery= `
{
"bool" : {
"filter" : {
"range" : { "mass_density": { "gte" : 35000 } }
}
}
} `;
console.log('SENDING: ', JSON.stringify(rootQueryObj));
postQuery= `
{
"bool" : {
"should" : {"match":{"formula_keyword":"H4O2"}}
}
} `;
LoadingPopup.show();
//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='+this.page+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(rootQueryObj), bulke => {
let bulkData = JSON.parse(bulke.target.response); console.log('GETTING: ', bulkData);
postQuery= `
{
"bool" : {
"must" :[
{"match":{"atom_labels":"Fe"}},
{"match":{"atom_labels":"O"}}
]
}
} `;
this.matMap.set('bulk', createSystemTypeData(bulkData, this.page, bulke.target.status === 200));
console.log('this.matMap: ', this.matMap);
// 2D materials request
rootQueryObj.bool.must[1].match.system_type = '2D';
console.log('SENDING: ', JSON.stringify(rootQueryObj));
let twoDReq = util.serverReqPOST(util.getSearchURL()+'?page='+this.page+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(rootQueryObj), twoDe => {
let twoDData = JSON.parse(twoDe.target.response);
postQuery= `
{
"bool" : {
"must" :[
{"match":{"formula_reduced":"Fe3"}},
{"match":{"formula_reduced":"O1"}}
]
}
} `;
this.matMap.set('2D', createSystemTypeData(twoDData, this.page, twoDe.target.status === 200));
console.log('this.matMap: ', this.matMap);
postQuery= `
{
"bool" : {
"must" :[
{"match":{"formula_reduced":"Al1"}},
{"match":{"formula_reduced":"O3"}},
{"match":{"atom_labels":"Cu"}}
]
}
} `;
*/
// 1D materials request
rootQueryObj.bool.must[1].match.system_type = '1D';
console.log('SENDING: ', JSON.stringify(rootQueryObj));
let oneDReq = util.serverReqPOST(util.getSearchURL()+'?page='+this.page+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(rootQueryObj), oneDe => {
let oneDData = JSON.parse(oneDe.target.response);
console.log('SENDING: ', postQuery);
this.matMap.set('1D', createSystemTypeData(oneDData, this.page, oneDe.target.status === 200));
console.log('this.matMap: ', this.matMap);
this._updateUI('bulk');
this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
});
});
LoadingPopup.show();
//let oReq = util.serverReqPOST(util.getSearchURL(), postQuery, e => {
//let oReq = util.serverReqPOST('http://enc-staging-nomad.esc.rzg.mpg.de/current/v1.0/esmaterials', postQuery, e => {
let oReq = util.serverReqPOST(util.getSearchURL()+'?page='+this.page+'&per_page='+RESULTS_PER_PAGE, postQuery, e => {
let data= JSON.parse(e.target.response);
console.log('GETTING: ', data);
//if (data.total_results === 1){
//util.setBrowserHashPath('material',+matData[0].id);
//util.searchResults = false;
//}else{
//util.searchResults = true;
/*
if (e.target.status === 200){
this.total_results = data.total_results;
this.pagesNum = Math.ceil(data.total_results/RESULTS_PER_PAGE);//0;//(data.pages === null ? 1 : data.pages.pages);
......@@ -9387,59 +9419,31 @@
util.setBrowserHashPath('material',+matData[0].id);
util.searchResults = false;
}else{
this.setData(matData);
let systemTypeMatMap = new Map();
this.matMap.set('bulk',
{'materials': systemTypeMatMap, 'page': this.page, 'total': data.total_results}
);
this.setData(systemTypeMatMap, matData);
util.searchResults = true;
}
}else{ // Right query - results not found
this.total_results= 0;
this.total_results = 0;
this.pagesNum = 0;
// this.matMap.set('bulk', new Map());
this.setData([]);
}
this._updateUI();
//this._updateUI();
this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
});
}
/*
_search(){
this.searchJson.search_by.page = this.page;
this.searchJson.search_by.per_page = 10;
let postQuery = JSON.stringify(this.searchJson);
console.log('SENDING: ', postQuery);
LoadingPopup.show();
let oReq = util.serverReqPOST(util.getSearchURL(), postQuery, e => {
let data= JSON.parse(e.target.response);
console.log('GETING: ', data);
if (e.target.status === 200){
this.total_results= data.total_results;
this.pagesNum= (data.pages === null ? 1 : data.pages.pages);
let matData= data.results;
if (this.total_results === 1){
util.setBrowserHashPath('material',+matData[0].id);
util.searchResults = false;
}else{
this.setData(matData);
util.searchResults = true;
}
*/
}else{ // Right query - results not found
this.total_results= 0;
this.pagesNum = 0;
this.setData([]);
}
this._updateUI();
this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
});
/*
oReq.addEventListener("error", e => { // Not valid query
console.log('Search ERROR - Not valid query ');
this.total_results= 0;
......@@ -9449,22 +9453,32 @@
this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
});
}
*/
function createSystemTypeData(data, page, status){
if (status){
//this.pagesNum = Math.ceil(data.total_results/RESULTS_PER_PAGE);//0;//(data.pages === null ? 1 : data.pages.pages);
let systemTypeMatMap = new Map();
data.results.forEach( mat => {
if (systemTypeMatMap.has(mat.formula_reduced)){
let matArray= systemTypeMatMap.get(mat.formula_reduced);
matArray.push(mat);
}else{
let newArray= []; newArray.push(mat);
systemTypeMatMap.set(mat.formula_reduced, newArray);
}
}); //this._printMatMap();
return { 'materials': systemTypeMatMap,
'page': page,
'total': data.total_results };
}else return null; // Right query - results not found
//this.total_results = 0;
//this.pagesNum = 0;
}
setData(data){
//this.formula= formula;
this.matMap.clear();
data.forEach( mat => {
if (this.matMap.has(mat.formula_reduced)){
let matArray= this.matMap.get(mat.formula_reduced);
matArray.push(mat);
}else{
let newArray= []; newArray.push(mat);
this.matMap.set(mat.formula_reduced, newArray);
}
}); //this._printMatMap();
}
......@@ -9477,15 +9491,17 @@
}
_updateUI(){
_updateUI(systemType){
console.log('_updateUI',systemType, this.matMap.get(systemType).total);
this.titleBox.innerHTML= 'Results (total: '+this.total_results+')';
//this.pagesNum= Math.ceil(this.total_results/RESULTS_PER_PAGE);
this.pageElement.innerHTML= 'page '+this.page+' / '+this.pagesNum;
let totalResults = this.matMap.get(systemType).total;
this.titleBox.innerHTML= 'Results (total: '+totalResults+')';
this.pageElement.innerHTML= 'page '+this.page+' / '+Math.ceil(totalResults/RESULTS_PER_PAGE);
let html = '';
if (this.matMap.size === 0) {
if (this.matMap.get(systemType) === null) {
this.resultsNrTag.style.display = 'none';
this.titleBox.style.display = 'none';
......@@ -9515,7 +9531,7 @@
<tbody>
`;
this.matMap.forEach((mats, formula) => {
this.matMap.get(systemType).materials.forEach((mats, formula) => {
let rFormula = util.getSubscriptedFormula(formula);
html+= '<tr> <td class="formula" colspan="5"><b>'+rFormula+'</b>';
......
......@@ -36,6 +36,8 @@ class MaterialList {
this.element = document.createElement('div');
this.element.setAttribute("id",'matlist');
this.formula = false; // **** Maybe this field can be removed
// map containing an entry per system type (if there are materials for it)
this.matMap = new Map();
this.matMap = new Map();
this.page = 0;
this.searchJson = null;
......@@ -43,7 +45,12 @@ class MaterialList {
this.pagesNum = 0;
this.element.innerHTML=
`
<div class="title"> Results </div>
<div id="system-type-tabs" style=" display: inline-block">
<button class="bulk-system-tab" id="add-tab-selected">BULK</button>
<button class="2D-system-tab" >2D</button>
<button class="1D-system-tab" style="padding: 10px 20px;" >1D</button>
<span class="title" >Results<span>
</div>
<div class="pag-header">
<span class="prevButton">
<img src="img/prev.svg" style="display: inline;" width="7px"/> &nbsp; prev
......@@ -56,6 +63,7 @@ class MaterialList {
<div class="data-container"> </div>`; // results data container
this.titleBox = this.element.getElementsByClassName("title")[0];
this.tabsBox = this.element.querySelector("#system-type-tabs");
// Pagination components
this.resultsNrTag = this.element.getElementsByClassName("pag-header")[0];
......@@ -75,6 +83,37 @@ class MaterialList {
_events() {
this.tabsBox.addEventListener( "click", (e) => {
if (e.target !== e.currentTarget) { // When the event source is a child
let className = e.target.className;
let index = className.indexOf('system-tab');
if (index > 0){
let selectingElement;
let selectingTab = className.substring(0, index-1);
this._updateUI(selectingTab);
/*
this.addPanel.replaceChild(selectingElement, this.addPanel.lastChild);
this.element.querySelector('.add-box').style.display = 'block';
// Change the styles of the buttons
let selEl = this.element.querySelector('.'+this.currentTab+'-add-btn');
this._setTabSelectedStyles(selEl, false);
this._setTabSelectedStyles(e.target, true);
// Change the triangle
this.element.querySelector('.'+this.currentTab+'-tri').style.visibility = 'hidden';
this.element.querySelector('.'+selectingTab+'-tri').style.visibility = 'visible';
*/
this.currentTab = selectingTab;
}
}
});
this.nextButton.addEventListener('click', e => {
if (this.page === this.pagesNum) return;
this.page++;
......@@ -106,13 +145,13 @@ class MaterialList {
}
/*
_printMatMap(){console.log('MATMAP:');
this.matMap.forEach(function(value, key, ownerMap) {
console.log(key + ' '+JSON.stringify(value));
});
}
*/
setSearch(searchJson){
//this.formula= formula;
......@@ -125,138 +164,102 @@ class MaterialList {
}
_search(){ /**************** ES queries!!!!!*/
_search(){
let rootQueryObj = { 'bool' : {} };
rootQueryObj.bool.must = [];
rootQueryObj.bool.must.push( this.searchJson );
rootQueryObj.bool.must.push( { "match": {"system_type" : "bulk"} } );
let postQuery = JSON.stringify(this.searchJson);
/*
let postQuery= `
{
"bool" : {
"filter" : {
"range" : { "mass_density": { "gte" : 35000 } }
}
}
} `;
postQuery= `
{
"bool" : {
"should" : {"match":{"formula_keyword":"H4O2"}}
}
} `;
console.log('SENDING: ', JSON.stringify(rootQueryObj));
LoadingPopup.show();
postQuery= `
{
"bool" : {
"must" :[
{"match":{"atom_labels":"Fe"}},
{"match":{"atom_labels":"O"}}
]
}
} `;
//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='+this.page+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(rootQueryObj), bulke => {
let bulkData = JSON.parse(bulke.target.response); console.log('GETTING: ', bulkData);
this.matMap.set('bulk', createSystemTypeData(bulkData, this.page, bulke.target.status === 200));
console.log('this.matMap: ', this.matMap);
postQuery= `
{
"bool" : {
"must" :[
{"match":{"formula_reduced":"Fe3"}},
{"match":{"formula_reduced":"O1"}}
]
}
} `;
// 2D materials request
rootQueryObj.bool.must[1].match.system_type = '2D';
console.log('SENDING: ', JSON.stringify(rootQueryObj));
let twoDReq = util.serverReqPOST(util.getSearchURL()+'?page='+this.page+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(rootQueryObj), twoDe => {
let twoDData = JSON.parse(twoDe.target.response);
postQuery= `
{
"bool" : {
"must" :[
{"match":{"formula_reduced":"Al1"}},
{"match":{"formula_reduced":"O3"}},
{"match":{"atom_labels":"Cu"}}
]
}
} `;
*/
this.matMap.set('2D', createSystemTypeData(twoDData, this.page, twoDe.target.status === 200));
console.log('this.matMap: ', this.matMap);
console.log('SENDING: ', postQuery);
// 1D materials request
rootQueryObj.bool.must[1].match.system_type = '1D';
console.log('SENDING: ', JSON.stringify(rootQueryObj));
let oneDReq = util.serverReqPOST(util.getSearchURL()+'?page='+this.page+
'&per_page='+RESULTS_PER_PAGE, JSON.stringify(rootQueryObj), oneDe => {
LoadingPopup.show();
//let oReq = util.serverReqPOST(util.getSearchURL(), postQuery, e => {
//let oReq = util.serverReqPOST('http://enc-staging-nomad.esc.rzg.mpg.de/current/v1.0/esmaterials', postQuery, e => {
let oReq = util.serverReqPOST(util.getSearchURL()+'?page='+this.page+'&per_page='+RESULTS_PER_PAGE, postQuery, e => {
let data= JSON.parse(e.target.response);
console.log('GETTING: ', data);
let oneDData = JSON.parse(oneDe.target.response);
if (e.target.status === 200){
this.total_results = data.total_results;
this.pagesNum = Math.ceil(data.total_results/RESULTS_PER_PAGE);//0;//(data.pages === null ? 1 : data.pages.pages);
let matData = data.results;
if (this.total_results === 1){
util.setBrowserHashPath('material',+matData[0].id);
util.searchResults = false;
}else{
this.setData(matData);
util.searchResults = true;
}
}else{ // Right query - results not found
this.total_results= 0;
this.pagesNum = 0;
this.setData([]);
}
this._updateUI();
this.matMap.set('1D', createSystemTypeData(oneDData, this.page, oneDe.target.status === 200));
console.log('this.matMap: ', this.matMap);
this._updateUI('bulk');
this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
});
this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
});
});
}
/*
_search(){
this.searchJson.search_by.page = this.page;
this.searchJson.search_by.per_page = 10;