Skip to content
GitLab
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
Hide whitespace changes
Inline Side-by-side
client/bundle.js
View file @ 3522ee1c
......@@ -5978,7 +5978,7 @@
let DetailsViewBase = __webpack_require__(19);
let util = __webpack_require__(1);
let InfoSys = __webpack_require__(11);
let FilterComponent = __webpack_require__(26);
let FilterInGroupsComponent = __webpack_require__(36);
let DataStore = __webpack_require__(2);
......@@ -6053,25 +6053,30 @@
this.moreInfoRow.className= 'moreinfo';
this.moreInfoCalcId = null;
this.filterComponent = new FilterComponent('meth-filter-component');
this.filterComponent = new FilterInGroupsComponent('meth-filter-component');
this.element.querySelector('.filter-placeholder').
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 => {
let rows = this.tbody.querySelectorAll('tr');
for (let i = 0; i < rows.length; ++i){
//console.log('FILTERING: ',rows[i].getAttribute('data-calc-type'));
let calcType = rows[i].getAttribute('data-calc-type');
if (calcTypes.indexOf(calcType) >= 0) rows[i].style.display = 'table-row';
let calcProps = rows[i].getAttribute('data-calc-props').split(',');
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';
}
});
// For static ones
InfoSys.addToInfoSystem(this.element);
......@@ -6179,19 +6184,7 @@
}
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';
}
*/
}
updateMarkedLeaf(leafId){ }
_render(){
......@@ -6213,9 +6206,12 @@
InfoSys.addToInfoSystem(this.tbody);
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);
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>
<span info-sys-data="calculation-type.value:${calcType}">
......@@ -6278,102 +6274,7 @@
/***/ },
/* 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;
/***/ },
/* 26 */,
/* 27 */
/***/ function(module, exports, __webpack_require__) {
......@@ -8647,5 +8548,106 @@
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
client/css/styles.css
View file @ 3522ee1c
......@@ -1034,6 +1034,10 @@ tr.moreinfo {
#methodology-data td .info-sys-label{ color: #777; }
.filter-groups-c-unfolded{
justify-content: space-evenly;
}
/**** SVG ***/
......
client/src/material-mod/FilterInGroupsComponent.js 0 → 100644
View file @ 3522ee1c
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;
client/src/material-mod/MethodologyDetails.view.js
View file @ 3522ee1c
......@@ -4,7 +4,7 @@
let DetailsViewBase = require('./DetailsViewBase.js');
let util = require('../common/util.js');
let InfoSys = require('../common/InfoSys.js');
let FilterComponent = require('../common/FilterComponent.js');
let FilterInGroupsComponent = require('./FilterInGroupsComponent.js');
let DataStore = require('./DataStore.js');
......@@ -79,25 +79,30 @@ class MethodologyDetails extends DetailsViewBase {
this.moreInfoRow.className= 'moreinfo';
this.moreInfoCalcId = null;
this.filterComponent = new FilterComponent('meth-filter-component');
this.filterComponent = new FilterInGroupsComponent('meth-filter-component');
this.element.querySelector('.filter-placeholder').
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 => {
let rows = this.tbody.querySelectorAll('tr');
for (let i = 0; i < rows.length; ++i){
//console.log('FILTERING: ',rows[i].getAttribute('data-calc-type'));
let calcType = rows[i].getAttribute('data-calc-type');
if (calcTypes.indexOf(calcType) >= 0) rows[i].style.display = 'table-row';
let calcProps = rows[i].getAttribute('data-calc-props').split(',');
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';
}
});
// For static ones
InfoSys.addToInfoSystem(this.element);
......@@ -205,19 +210,7 @@ class MethodologyDetails extends DetailsViewBase {
}
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';
}
*/
}
updateMarkedLeaf(leafId){ }
_render(){
......@@ -239,9 +232,12 @@ class MethodologyDetails extends DetailsViewBase {
InfoSys.addToInfoSystem(this.tbody);
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);
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>
<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