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

New Methodology details page: improvements and refactoring

parent 208f2b3b
Pipeline #24311 passed with stages
in 11 seconds
...@@ -5976,7 +5976,7 @@ ...@@ -5976,7 +5976,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 FilterInGroupsComponent = __webpack_require__(26); //let FilterInGroupsComponent = require('./FilterInGroupsComponent.js');
let DataStore = __webpack_require__(2); let DataStore = __webpack_require__(2);
let SortingButton = __webpack_require__(27); let SortingButton = __webpack_require__(27);
...@@ -5994,6 +5994,132 @@ ...@@ -5994,6 +5994,132 @@
calcTypesMap.set('Parameter variation', 'parameter variation');//calcTypesMap.set('Convergence', 'convergence'); calcTypesMap.set('Parameter variation', 'parameter variation');//calcTypesMap.set('Convergence', 'convergence');
calcTypesMap.set('QHA', 'QHA calculation'); 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');
let codeMap = new Map();
codeMap.set('exciting', 'exciting');
codeMap.set('VASP', 'VASP');
codeMap.set('FHI-aims', 'FHI-aims');
let potentialMap = new Map();
potentialMap.set('Full potential', 'full all electron');
potentialMap.set('Pseudo potential', 'pseudopotential');
let basicSetMap = new Map();
basicSetMap.set('Numeric AOs', 'numeric AOs');
basicSetMap.set('Gaussians', 'gaussians');
basicSetMap.set('(L)APW+lo', '(L)APW+lo');
basicSetMap.set('Plane waves', 'plane waves');
class FilterInGroupsComponent {
constructor(className) {
this.element = document.createElement('div');
this.element.className = className;
this.filtersOn = [];
this.folded = true;
this.element.innerHTML+=`
<div>
<div style="display: flex; justify-content: flex-end;">
<div class="filter-groups-c-folded" >
<span style="vertical-align: top;">Filtering &nbsp;&nbsp;</span>
</div>
<div class="filter-c-btn" >
<img src="${util.IMAGE_DIR}folded.png" />
<!--<button class="on">filter</button> -->
</div>
</div>
<div class="filter-groups-c-unfolded" style="display: none">
<table style="width: 100%">
<thead>
<tr>
<th style="width: 13%;"> </th>
<th style="width: 17%;">
<span>Type</span>
</th>
<th style="width: 19%;">
<span info-sys-data="functional-type">Density functional</span>
</th>
<th style="width: 13%;">
<span info-sys-data="code-name">Code</span>
</th>
<th style="width: 17%;">
<span info-sys-data="pseudopotential-type">Potential</span>
</th>
<th style="width: 12%;">
<span info-sys-data="basis-set-type">Basis set</span>
</th>
<th style="width: 9%;"> </th>
</tr>
</thead>
<tbody>
<tr id="filter-items-row"></tr>
</tbody>
</table>
</div>
</div>
`;
//this.foldedPanel = this.element.querySelector('.filter-groups-c-folded');
this.unfoldedPanel = this.element.querySelector('.filter-groups-c-unfolded');
this.filterItemsRow = this.element.querySelector('#filter-items-row');
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.foldedPanel.style.display = (this.folded ? 'block' : 'none');
this.unfoldedPanel.style.display = (this.folded ? 'none' : 'block');
});
this.filterItemsRow.innerHTML = '<td></td>'; // calculation Id column
this.addGroupItems('Calculation type', calcTypesMap);
this.addGroupItems('Density functional', densityFunctionalMap);
this.addGroupItems('Code', codeMap);
this.addGroupItems('Potential', potentialMap);
this.addGroupItems('Basic set', basicSetMap);
this.filterItemsRow.innerHTML += '<td></td>'; // link column
// Add listener for checkboxes events
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);
//console.log('this.filtersOn',this.filtersOn);
}
});
}
addGroupItems(group, groupItemsMap){
let html = '<td> ';
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.filterItemsRow.innerHTML += html+ '</td>';
}
setItemListener(listener){
this.itemListener = listener;
}
}
class MethodologyDetails extends DetailsViewBase { class MethodologyDetails extends DetailsViewBase {
...@@ -6029,7 +6155,7 @@ ...@@ -6029,7 +6155,7 @@
<span>Calculation ID</span> <span>Calculation ID</span>
<span class="sorting-button"></span> <span class="sorting-button"></span>
</th> </th>
<th style="width: 15%;"> <th style="width: 17%;">
<span>Type</span> <span>Type</span>
<span class="sorting-button"></span> <span class="sorting-button"></span>
</th> </th>
...@@ -6037,7 +6163,7 @@ ...@@ -6037,7 +6163,7 @@
<span info-sys-data="functional-type">Density functional</span> <span info-sys-data="functional-type">Density functional</span>
<span class="sorting-button"></span> <span class="sorting-button"></span>
</th> </th>
<th style="width: 15%;"> <th style="width: 13%;">
<span info-sys-data="code-name">Code</span> <span info-sys-data="code-name">Code</span>
<span class="sorting-button"></span> <span class="sorting-button"></span>
</th> </th>
...@@ -6108,7 +6234,7 @@ ...@@ -6108,7 +6234,7 @@
this.sortingButtons.push(component); this.sortingButtons.push(component);
component.setListener( (descendingOrder, field) => { component.setListener( (descendingOrder, field) => {
console.log('awful',descendingOrder, field); //console.log(descendingOrder, field);
this.sortingButtons.forEach( el => { this.sortingButtons.forEach( el => {
if (el !== component) el.init(); if (el !== component) el.init();
}); });
...@@ -6209,17 +6335,6 @@ ...@@ -6209,17 +6335,6 @@
updateSelection( leafIds ){ updateSelection( leafIds ){
/*
this.moreInfoCalcId = null; // Reset the unfolded more info
//console.log('MethodologyDetails UPDATING ',calcs); console.log(calcs);
this.sortedCalcs.length = 0;
leafIds.forEach( leafId => {
//let calc = DataStore.getCalc(DataStore.getCalcReprIntId(leafId));
this.sortedCalcs.push(leafId);
});
this.sortedCalcs.sort();
*/
//this.sortedCalcs = DataStore.getCalculations();
DataStore.getCalculations().forEach( c => { DataStore.getCalculations().forEach( c => {
...@@ -6240,12 +6355,7 @@ ...@@ -6240,12 +6355,7 @@
}); });
}); });
/*
this.sortedCalcs.sort( (a, b) => {
return a.id - b.id;
});*/
this.sortRowsCalcDataBy(true, 'id'); this.sortRowsCalcDataBy(true, 'id');
//console.log('sortedCalcs:', this.sortedCalcs); //console.log('sortedCalcs:', this.sortedCalcs);
this._render(); this._render();
...@@ -6365,125 +6475,7 @@ ...@@ -6365,125 +6475,7 @@
/***/ }, /***/ },
/* 26 */ /* 26 */,
/***/ 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');
let codeMap = new Map();
codeMap.set('exciting', 'exciting');
codeMap.set('VASP', 'VASP');
codeMap.set('FHI-aims', 'FHI-aims');
let potentialMap = new Map();
potentialMap.set('Full potential', 'full all electron');
potentialMap.set('Pseudo potential', 'pseudopotential');
let basicSetMap = new Map();
basicSetMap.set('Numeric AOs', 'numeric AOs');
basicSetMap.set('Gaussians', 'gaussians');
basicSetMap.set('(L)APW+lo', '(L)APW+lo');
basicSetMap.set('Plane waves', 'plane waves');
class FilterInGroupsComponent {
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-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);
this.addGroupItems('Code', codeMap);
this.addGroupItems('Potential', potentialMap);
this.addGroupItems('Basic set', basicSetMap);
// Add listener for checkboxes events
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);
//console.log('this.filtersOn',this.filtersOn);
}
});
}
addGroupItems(group, groupItemsMap){
let html = '<div> <div style="font-weight: bold; padding: 6px 0;">'+group+'</div>';
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;
/***/ },
/* 27 */ /* 27 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {
...@@ -6495,23 +6487,23 @@ ...@@ -6495,23 +6487,23 @@
constructor(id) { constructor(id) {
this.id = id; this.id = id;
this.descending = true; this.ascending = true;
this.element = document.createElement('span'); this.element = document.createElement('span');
this.element.innerHTML+=` this.element.innerHTML+=`
<img src="img/sorting_init.png" width="20px" <img src="img/sorting_init.png" width="12px"
style="margin-bottom: -1px; cursor: pointer"/> style="margin-bottom: -1px; cursor: pointer"/>
`; `;
this.image = this.element.querySelector('img'); this.image = this.element.querySelector('img');
if (id === 'id') if (id === 'id')
this.image.setAttribute('src','img/sorting_descending.png'); this.image.setAttribute('src','img/sorting_ascending.png');
this.element.addEventListener('click', e => { this.element.addEventListener('click', e => {
this.descending = !this.descending; this.ascending = !this.ascending;
this.image.setAttribute('src', this.image.setAttribute('src',
'img/sorting_'+(this.descending ? 'descending' : 'ascending')+'.png'); 'img/sorting_'+(this.ascending ? 'ascending' : 'descending')+'.png');
this.listener(this.descending, this.id); this.listener(this.ascending, this.id);
}); });
} }
...@@ -6519,10 +6511,10 @@ ...@@ -6519,10 +6511,10 @@
init(){ init(){
this.image.setAttribute('src','img/sorting_init.png'); this.image.setAttribute('src','img/sorting_init.png');
} }
/*
setDescendingIcon(){ setDescendingIcon(){
this.image.setAttribute('src','img/sorting_descending.png'); this.image.setAttribute('src','img/sorting_descending.png');
} }*/
setListener(listener){ setListener(listener){
......
...@@ -1034,8 +1034,13 @@ tr.moreinfo { ...@@ -1034,8 +1034,13 @@ tr.moreinfo {
#methodology-data td .info-sys-label{ color: #777; } #methodology-data td .info-sys-label{ color: #777; }
.filter-groups-c-unfolded{ .filter-groups-c-unfolded table td{
justify-content: space-evenly; vertical-align: top;
font-size: 0.9em;
}
.filter-groups-c-unfolded table th{
text-align: left;
} }
......
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');
let codeMap = new Map();
codeMap.set('exciting', 'exciting');
codeMap.set('VASP', 'VASP');
codeMap.set('FHI-aims', 'FHI-aims');
let potentialMap = new Map();
potentialMap.set('Full potential', 'full all electron');
potentialMap.set('Pseudo potential', 'pseudopotential');
let basicSetMap = new Map();
basicSetMap.set('Numeric AOs', 'numeric AOs');
basicSetMap.set('Gaussians', 'gaussians');
basicSetMap.set('(L)APW+lo', '(L)APW+lo');
basicSetMap.set('Plane waves', 'plane waves');
class FilterInGroupsComponent {
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-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);
this.addGroupItems('Code', codeMap);
this.addGroupItems('Potential', potentialMap);
this.addGroupItems('Basic set', basicSetMap);
// Add listener for checkboxes events
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);
//console.log('this.filtersOn',this.filtersOn);
}
});
}
addGroupItems(group, groupItemsMap){
let html = '<div> <div style="font-weight: bold; padding: 6px 0;">'+group+'</div>';
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 FilterInGroupsComponent = require('./FilterInGroupsComponent.js'); //let FilterInGroupsComponent = require('./FilterInGroupsComponent.js');
let DataStore = require('./DataStore.js'); let DataStore = require('./DataStore.js');
let SortingButton = require('./SortingButton.js'); let SortingButton = require('./SortingButton.js');
...@@ -22,6 +22,132 @@ calcTypesMap.set('Equation of state', 'equation of state'); ...@@ -22,6 +22,132 @@ calcTypesMap.set('Equation of state', 'equation of state');
calcTypesMap.set('Parameter variation', 'parameter variation');//calcTypesMap.set('Convergence', 'convergence'); calcTypesMap.set('Parameter variation', 'parameter variation');//calcTypesMap.set('Convergence', 'convergence');
calcTypesMap.set('QHA', 'QHA calculation'); 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');
let codeMap = new Map();
codeMap.set('exciting', 'exciting');
codeMap.set('VASP', 'VASP');
codeMap.set('FHI-aims', 'FHI-aims');
let potentialMap = new Map();
potentialMap.set('Full potential', 'full all electron');
potentialMap.set('Pseudo potential', 'pseudopotential');
let basicSetMap = new Map();
basicSetMap.set('Numeric AOs', 'numeric AOs');
basicSetMap.set('Gaussians', 'gaussians');
basicSetMap.set('(L)APW+lo', '(L)APW+lo');
basicSetMap.set('Plane waves', 'plane waves');
<