Commit 3522ee1c authored by Iker Hurtado's avatar Iker Hurtado
Browse files

Implement part of the new Methodology details page

parent 4291a0ae
Pipeline #24056 passed with stages
in 11 seconds
...@@ -5978,7 +5978,7 @@ ...@@ -5978,7 +5978,7 @@
let DetailsViewBase = __webpack_require__(19); let DetailsViewBase = __webpack_require__(19);
let util = __webpack_require__(1); let util = __webpack_require__(1);
let InfoSys = __webpack_require__(11); let InfoSys = __webpack_require__(11);
let FilterComponent = __webpack_require__(26); let FilterInGroupsComponent = __webpack_require__(36);
let DataStore = __webpack_require__(2); let DataStore = __webpack_require__(2);
...@@ -6053,25 +6053,30 @@ ...@@ -6053,25 +6053,30 @@
this.moreInfoRow.className= 'moreinfo'; this.moreInfoRow.className= 'moreinfo';
this.moreInfoCalcId = null; this.moreInfoCalcId = null;
this.filterComponent = new FilterComponent('meth-filter-component'); this.filterComponent = new FilterInGroupsComponent('meth-filter-component');
this.element.querySelector('.filter-placeholder'). this.element.querySelector('.filter-placeholder').
appendChild(this.filterComponent.element); appendChild(this.filterComponent.element);
this.filterComponent.addItemsMap(calcTypesMap); //this.filterComponent.addItemsMap(calcTypesMap);
this.filterComponent.setItemListener( calcTypes => {
this.filterComponent.setItemListener( propsSel/*ected*/ => {
//this.tbody.querySelectorAll('tr').forEach( rowElement => { //this.tbody.querySelectorAll('tr').forEach( rowElement => {
let rows = this.tbody.querySelectorAll('tr'); let rows = this.tbody.querySelectorAll('tr');
for (let i = 0; i < rows.length; ++i){ for (let i = 0; i < rows.length; ++i){
//console.log('FILTERING: ',rows[i].getAttribute('data-calc-type')); //console.log('FILTERING: ',rows[i].getAttribute('data-calc-type'));
let calcType = rows[i].getAttribute('data-calc-type'); let calcProps = rows[i].getAttribute('data-calc-props').split(',');
if (calcTypes.indexOf(calcType) >= 0) rows[i].style.display = 'table-row'; console.log('FILTERING calcProps: ',calcProps);
if (propsSel.indexOf(calcProps[0]) >= 0 && propsSel.indexOf(calcProps[1]) >= 0)
rows[i].style.display = 'table-row';
//if (calcTypes.indexOf(calcType) >= 0) rows[i].style.display = 'table-row';
else rows[i].style.display = 'none'; else rows[i].style.display = 'none';
} }
}); });
// For static ones // For static ones
InfoSys.addToInfoSystem(this.element); InfoSys.addToInfoSystem(this.element);
...@@ -6179,19 +6184,7 @@ ...@@ -6179,19 +6184,7 @@
} }
updateMarkedLeaf(leafId){ updateMarkedLeaf(leafId){ }
/* Do nothing for now...
this.markedCalc = leafId;
let rowElement= this.element.querySelector('.data-row-marked');
if (rowElement !== null) rowElement.className= 'data-row';
if (this.markedCalc !== null){
let rowElement1= document.querySelector('tr[data-calc-id="'+this.markedCalc+'"]');
if (rowElement1 !== null) rowElement1.className= 'data-row-marked';
}
*/
}
_render(){ _render(){
...@@ -6213,9 +6206,12 @@ ...@@ -6213,9 +6206,12 @@
InfoSys.addToInfoSystem(this.tbody); InfoSys.addToInfoSystem(this.tbody);
function getRowHtml(leafId, calc, calcType){ function getRowHtml(leafId, calc, calcType){
let calcProps = calcType+','+calc.functional_type+','+calc.code_name+
','+calc.core_electron_treatment+','+calc.basis_set_type;
//***** InfoSys.setTooltip(this.spaceGroup, 'space-group.value:'+data.space_group); //***** InfoSys.setTooltip(this.spaceGroup, 'space-group.value:'+data.space_group);
return ` return `
<tr data-calc-id="${leafId}" data-calc-type="${calcType}" class="data-row"> <tr data-calc-id="${leafId}" data-calc-props="${calcProps}" class="data-row">
<td>${leafId}</td> <td>${leafId}</td>
<td> <td>
<span info-sys-data="calculation-type.value:${calcType}"> <span info-sys-data="calculation-type.value:${calcType}">
...@@ -6278,102 +6274,7 @@ ...@@ -6278,102 +6274,7 @@
/***/ }, /***/ },
/* 26 */ /* 26 */,
/***/ function(module, exports, __webpack_require__) {
let util = __webpack_require__(1);
class FilterComponent {
constructor(className) {
this.element = document.createElement('div');
this.element.className = className;
this.filtersOn = [];
this.folded = true;
this.element.innerHTML+=`
<div style="float: left; width: 97%;" >
<div class="filter-c-folded" >
<span style="vertical-align: top;">Filtering</span>
</div>
<div class="filter-c-unfolded" style="display: none">
</div>
</div>
<div class="filter-c-btn" style="float: right; width: 3%;">
<img src="${util.IMAGE_DIR}folded.png" />
<!--<button class="on">filter</button> -->
</div>
<div style="clear: both;"></div>
`;
this.foldedPanel = this.element.querySelector('.filter-c-folded');
this.unfoldedPanel = this.element.querySelector('.filter-c-unfolded');
this.foldBtn = this.element.querySelector('img');
this.foldBtn.addEventListener('click', e => {
this.folded = !this.folded;
this.foldBtn.src = (this.folded ? util.IMAGE_DIR+'folded.png' :
util.IMAGE_DIR+'unfolded.png');
//this.foldBtn.className = (this.folded ? 'on' : 'off');
this.foldedPanel.style.display = (this.folded ? 'block' : 'none');
this.unfoldedPanel.style.display = (this.folded ? 'none' : 'block');
});
}
addItems(items){
let html = '';
items.forEach( item => {
this.filtersOn.push(item);
html += '<input type="checkbox" value="'+item+'" checked>'+item+' &nbsp;&nbsp; ';
});
this.unfoldedPanel.innerHTML += html;
this.element.addEventListener('click', (e) => {
if (e.target.tagName === 'INPUT'){
let index = this.filtersOn.indexOf(e.target.value);
if (index >= 0) this.filtersOn.splice( index, 1 );
else this.filtersOn.push(e.target.value);
this.itemListener(this.filtersOn);
}
});
}
addItemsMap(itemsMap){
let html = '';
itemsMap.forEach( (itemId, itemName) => {
this.filtersOn.push(itemId);
html += '<input type="checkbox" value="'+itemId+'" checked>'+
'<span style="vertical-align: 20%">'+itemName+'</span> &nbsp;&nbsp; ';
});
this.unfoldedPanel.innerHTML += html;
this.element.addEventListener('click', (e) => {
if (e.target.tagName === 'INPUT'){
let index = this.filtersOn.indexOf(e.target.value);
if (index >= 0) this.filtersOn.splice( index, 1 );
else this.filtersOn.push(e.target.value);
this.itemListener(this.filtersOn);
}
});
}
setItemListener(listener){
this.itemListener = listener;
}
}
// EXPORTS
module.exports = FilterComponent;
/***/ },
/* 27 */ /* 27 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {
...@@ -8647,5 +8548,106 @@ ...@@ -8647,5 +8548,106 @@
module.exports = PropertiesBox; module.exports = PropertiesBox;
/***/ },
/* 36 */
/***/ function(module, exports, __webpack_require__) {
let util = __webpack_require__(1);
let calcTypesMap = new Map();
calcTypesMap.set('Single point', 'single point');
calcTypesMap.set('GW', 'GW calculation');
calcTypesMap.set('Geometry optimization', 'geometry optimization');
calcTypesMap.set('Molecular dynamics', 'molecular dynamics');
calcTypesMap.set('Phonon', 'phonon calculation');
calcTypesMap.set('Equation of state', 'equation of state');
calcTypesMap.set('Parameter variation', 'parameter variation');//calcTypesMap.set('Convergence', 'convergence');
calcTypesMap.set('QHA', 'QHA calculation');
let densityFunctionalMap = new Map();
densityFunctionalMap.set('LDA', 'LDA');
densityFunctionalMap.set('GGA', 'GGA');
densityFunctionalMap.set('meta-GGA', 'meta-GGA');
densityFunctionalMap.set('hybrid-GGA', 'hybrid-GGA');
densityFunctionalMap.set('meta-hybrid-GGA', 'meta-hybrid-GGA');
densityFunctionalMap.set('HF', 'HF');
class FilterInGroupsComponent {
constructor(className) {
this.element = document.createElement('div');
this.element.className = className;
this.filtersOn = [];//this.filtersOnMap = new Map();
this.folded = true;
this.element.innerHTML+=`
<div style="float: left; width: 97%;" >
<div class="filter-groups-c-folded" >
<span style="vertical-align: top;">Filtering</span>
</div>
<div class="filter-groups-c-unfolded" style="display: none">
</div>
</div>
<div class="filter-c-btn" style="float: right; width: 3%;">
<img src="${util.IMAGE_DIR}folded.png" />
<!--<button class="on">filter</button> -->
</div>
<div style="clear: both;"></div>
`;
this.foldedPanel = this.element.querySelector('.filter-groups-c-folded');
this.unfoldedPanel = this.element.querySelector('.filter-groups-c-unfolded');
this.foldBtn = this.element.querySelector('img');
this.foldBtn.addEventListener('click', e => {
this.folded = !this.folded;
this.foldBtn.src = (this.folded ? util.IMAGE_DIR+'folded.png' :
util.IMAGE_DIR+'unfolded.png');
//this.foldBtn.className = (this.folded ? 'on' : 'off');
this.foldedPanel.style.display = (this.folded ? 'block' : 'none');
this.unfoldedPanel.style.display = (this.folded ? 'none' : 'flex');
});
this.addGroupItems('calculation-type', calcTypesMap);
this.addGroupItems('density-functional', densityFunctionalMap);
// Add listener for checkboxes events
this.element.addEventListener('click', (e) => {
if (e.target.tagName === 'INPUT'){
//console.log('e.target.value',e.target.value);
let index = this.filtersOn.indexOf(e.target.value);
if (index >= 0) this.filtersOn.splice( index, 1 );
else this.filtersOn.push(e.target.value);
this.itemListener(this.filtersOn);
console.log('this.filtersOn',this.filtersOn);
}
});
}
addGroupItems(groupId, groupItemsMap){
let html = '<div data-filter-type="'+groupId+'" >'+groupId+'<br>';
groupItemsMap.forEach( (itemId, itemName) => {
this.filtersOn.push(itemId);
html += '<input type="checkbox" value="'+itemId+'" checked>'+
'<span style="vertical-align: 20%">'+itemName+'</span> &nbsp;&nbsp; <br> ';
});
this.unfoldedPanel.innerHTML += html+ '</div>';
}
setItemListener(listener){
this.itemListener = listener;
}
}
// EXPORTS
module.exports = FilterInGroupsComponent;
/***/ } /***/ }
/******/ ]); /******/ ]);
\ No newline at end of file
...@@ -1034,6 +1034,10 @@ tr.moreinfo { ...@@ -1034,6 +1034,10 @@ tr.moreinfo {
#methodology-data td .info-sys-label{ color: #777; } #methodology-data td .info-sys-label{ color: #777; }
.filter-groups-c-unfolded{
justify-content: space-evenly;
}
/**** SVG ***/ /**** SVG ***/
......
let util = require('../common/util.js');
let calcTypesMap = new Map();
calcTypesMap.set('Single point', 'single point');
calcTypesMap.set('GW', 'GW calculation');
calcTypesMap.set('Geometry optimization', 'geometry optimization');
calcTypesMap.set('Molecular dynamics', 'molecular dynamics');
calcTypesMap.set('Phonon', 'phonon calculation');
calcTypesMap.set('Equation of state', 'equation of state');
calcTypesMap.set('Parameter variation', 'parameter variation');//calcTypesMap.set('Convergence', 'convergence');
calcTypesMap.set('QHA', 'QHA calculation');
let densityFunctionalMap = new Map();
densityFunctionalMap.set('LDA', 'LDA');
densityFunctionalMap.set('GGA', 'GGA');
densityFunctionalMap.set('meta-GGA', 'meta-GGA');
densityFunctionalMap.set('hybrid-GGA', 'hybrid-GGA');
densityFunctionalMap.set('meta-hybrid-GGA', 'meta-hybrid-GGA');
densityFunctionalMap.set('HF', 'HF');
class FilterInGroupsComponent {
constructor(className) {
this.element = document.createElement('div');
this.element.className = className;
this.filtersOn = [];//this.filtersOnMap = new Map();
this.folded = true;
this.element.innerHTML+=`
<div style="float: left; width: 97%;" >
<div class="filter-groups-c-folded" >
<span style="vertical-align: top;">Filtering</span>
</div>
<div class="filter-groups-c-unfolded" style="display: none">
</div>
</div>
<div class="filter-c-btn" style="float: right; width: 3%;">
<img src="${util.IMAGE_DIR}folded.png" />
<!--<button class="on">filter</button> -->
</div>
<div style="clear: both;"></div>
`;
this.foldedPanel = this.element.querySelector('.filter-groups-c-folded');
this.unfoldedPanel = this.element.querySelector('.filter-groups-c-unfolded');
this.foldBtn = this.element.querySelector('img');
this.foldBtn.addEventListener('click', e => {
this.folded = !this.folded;
this.foldBtn.src = (this.folded ? util.IMAGE_DIR+'folded.png' :
util.IMAGE_DIR+'unfolded.png');
//this.foldBtn.className = (this.folded ? 'on' : 'off');
this.foldedPanel.style.display = (this.folded ? 'block' : 'none');
this.unfoldedPanel.style.display = (this.folded ? 'none' : 'flex');
});
this.addGroupItems('calculation-type', calcTypesMap);
this.addGroupItems('density-functional', densityFunctionalMap);
// Add listener for checkboxes events
this.element.addEventListener('click', (e) => {
if (e.target.tagName === 'INPUT'){
//console.log('e.target.value',e.target.value);
let index = this.filtersOn.indexOf(e.target.value);
if (index >= 0) this.filtersOn.splice( index, 1 );
else this.filtersOn.push(e.target.value);
this.itemListener(this.filtersOn);
console.log('this.filtersOn',this.filtersOn);
}
});
}
addGroupItems(groupId, groupItemsMap){
let html = '<div data-filter-type="'+groupId+'" >'+groupId+'<br>';
groupItemsMap.forEach( (itemId, itemName) => {
this.filtersOn.push(itemId);
html += '<input type="checkbox" value="'+itemId+'" checked>'+
'<span style="vertical-align: 20%">'+itemName+'</span> &nbsp;&nbsp; <br> ';
});
this.unfoldedPanel.innerHTML += html+ '</div>';
}
setItemListener(listener){
this.itemListener = listener;
}
}
// EXPORTS
module.exports = FilterInGroupsComponent;
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
let DetailsViewBase = require('./DetailsViewBase.js'); let DetailsViewBase = require('./DetailsViewBase.js');
let util = require('../common/util.js'); let util = require('../common/util.js');
let InfoSys = require('../common/InfoSys.js'); let InfoSys = require('../common/InfoSys.js');
let FilterComponent = require('../common/FilterComponent.js'); let FilterInGroupsComponent = require('./FilterInGroupsComponent.js');
let DataStore = require('./DataStore.js'); let DataStore = require('./DataStore.js');
...@@ -79,25 +79,30 @@ class MethodologyDetails extends DetailsViewBase { ...@@ -79,25 +79,30 @@ class MethodologyDetails extends DetailsViewBase {
this.moreInfoRow.className= 'moreinfo'; this.moreInfoRow.className= 'moreinfo';
this.moreInfoCalcId = null; this.moreInfoCalcId = null;
this.filterComponent = new FilterComponent('meth-filter-component'); this.filterComponent = new FilterInGroupsComponent('meth-filter-component');
this.element.querySelector('.filter-placeholder'). this.element.querySelector('.filter-placeholder').
appendChild(this.filterComponent.element); appendChild(this.filterComponent.element);
this.filterComponent.addItemsMap(calcTypesMap); //this.filterComponent.addItemsMap(calcTypesMap);
this.filterComponent.setItemListener( calcTypes => {
this.filterComponent.setItemListener( propsSel/*ected*/ => {
//this.tbody.querySelectorAll('tr').forEach( rowElement => { //this.tbody.querySelectorAll('tr').forEach( rowElement => {
let rows = this.tbody.querySelectorAll('tr'); let rows = this.tbody.querySelectorAll('tr');
for (let i = 0; i < rows.length; ++i){ for (let i = 0; i < rows.length; ++i){
//console.log('FILTERING: ',rows[i].getAttribute('data-calc-type')); //console.log('FILTERING: ',rows[i].getAttribute('data-calc-type'));
let calcType = rows[i].getAttribute('data-calc-type'); let calcProps = rows[i].getAttribute('data-calc-props').split(',');
if (calcTypes.indexOf(calcType) >= 0) rows[i].style.display = 'table-row'; console.log('FILTERING calcProps: ',calcProps);
if (propsSel.indexOf(calcProps[0]) >= 0 && propsSel.indexOf(calcProps[1]) >= 0)
rows[i].style.display = 'table-row';
//if (calcTypes.indexOf(calcType) >= 0) rows[i].style.display = 'table-row';
else rows[i].style.display = 'none'; else rows[i].style.display = 'none';
} }
}); });
// For static ones // For static ones
InfoSys.addToInfoSystem(this.element); InfoSys.addToInfoSystem(this.element);
...@@ -205,19 +210,7 @@ class MethodologyDetails extends DetailsViewBase { ...@@ -205,19 +210,7 @@ class MethodologyDetails extends DetailsViewBase {
} }
updateMarkedLeaf(leafId){ updateMarkedLeaf(leafId){ }
/* Do nothing for now...
this.markedCalc = leafId;
let rowElement= this.element.querySelector('.data-row-marked');
if (rowElement !== null) rowElement.className= 'data-row';
if (this.markedCalc !== null){
let rowElement1= document.querySelector('tr[data-calc-id="'+this.markedCalc+'"]');
if (rowElement1 !== null) rowElement1.className= 'data-row-marked';
}
*/
}
_render(){ _render(){
...@@ -239,9 +232,12 @@ class MethodologyDetails extends DetailsViewBase { ...@@ -239,9 +232,12 @@ class MethodologyDetails extends DetailsViewBase {
InfoSys.addToInfoSystem(this.tbody); InfoSys.addToInfoSystem(this.tbody);
function getRowHtml(leafId, calc, calcType){ function getRowHtml(leafId, calc, calcType){
let calcProps = calcType+','+calc.functional_type+','+calc.code_name+
','+calc.core_electron_treatment+','+calc.basis_set_type;
//***** InfoSys.setTooltip(this.spaceGroup, 'space-group.value:'+data.space_group); //***** InfoSys.setTooltip(this.spaceGroup, 'space-group.value:'+data.space_group);
return ` return `
<tr data-calc-id="${leafId}" data-calc-type="${calcType}" class="data-row"> <tr data-calc-id="${leafId}" data-calc-props="${calcProps}" class="data-row">
<td>${leafId}</td> <td>${leafId}</td>
<td> <td>
<span info-sys-data="calculation-type.value:${calcType}"> <span info-sys-data="calculation-type.value:${calcType}">
......
Supports Markdown
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