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 @@
let DetailsViewBase = __webpack_require__(19);
let util = __webpack_require__(1);
let InfoSys = __webpack_require__(11);
let FilterInGroupsComponent = __webpack_require__(26);
//let FilterInGroupsComponent = require('./FilterInGroupsComponent.js');
let DataStore = __webpack_require__(2);
let SortingButton = __webpack_require__(27);
......@@ -5994,6 +5994,132 @@
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>
<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 {
......@@ -6029,7 +6155,7 @@
<span>Calculation ID</span>
<span class="sorting-button"></span>
</th>
<th style="width: 15%;">
<th style="width: 17%;">
<span>Type</span>
<span class="sorting-button"></span>
</th>
......@@ -6037,7 +6163,7 @@
<span info-sys-data="functional-type">Density functional</span>
<span class="sorting-button"></span>
</th>
<th style="width: 15%;">
<th style="width: 13%;">
<span info-sys-data="code-name">Code</span>
<span class="sorting-button"></span>
</th>
......@@ -6108,7 +6234,7 @@
this.sortingButtons.push(component);
component.setListener( (descendingOrder, field) => {
console.log('awful',descendingOrder, field);
//console.log(descendingOrder, field);
this.sortingButtons.forEach( el => {
if (el !== component) el.init();
});
......@@ -6209,17 +6335,6 @@
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 => {
......@@ -6240,12 +6355,7 @@
});
});
/*
this.sortedCalcs.sort( (a, b) => {
return a.id - b.id;
});*/
this.sortRowsCalcDataBy(true, 'id');
//console.log('sortedCalcs:', this.sortedCalcs);
this._render();
......@@ -6365,125 +6475,7 @@
/***/ },
/* 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;
/***/ },
/* 26 */,
/* 27 */
/***/ function(module, exports, __webpack_require__) {
......@@ -6495,23 +6487,23 @@
constructor(id) {
this.id = id;
this.descending = true;
this.ascending = true;
this.element = document.createElement('span');
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"/>
`;
this.image = this.element.querySelector('img');
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.descending = !this.descending;
this.ascending = !this.ascending;
this.image.setAttribute('src',
'img/sorting_'+(this.descending ? 'descending' : 'ascending')+'.png');
this.listener(this.descending, this.id);
'img/sorting_'+(this.ascending ? 'ascending' : 'descending')+'.png');
this.listener(this.ascending, this.id);
});
}
......@@ -6519,10 +6511,10 @@
init(){
this.image.setAttribute('src','img/sorting_init.png');
}
/*
setDescendingIcon(){
this.image.setAttribute('src','img/sorting_descending.png');
}
}*/
setListener(listener){
......
......@@ -1034,8 +1034,13 @@ tr.moreinfo {
#methodology-data td .info-sys-label{ color: #777; }
.filter-groups-c-unfolded{
justify-content: space-evenly;
.filter-groups-c-unfolded table td{
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 @@
let DetailsViewBase = require('./DetailsViewBase.js');
let util = require('../common/util.js');
let InfoSys = require('../common/InfoSys.js');
let FilterInGroupsComponent = require('./FilterInGroupsComponent.js');
//let FilterInGroupsComponent = require('./FilterInGroupsComponent.js');
let DataStore = require('./DataStore.js');
let SortingButton = require('./SortingButton.js');
......@@ -22,6 +22,132 @@ 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>
<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');
});