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

Implement part of the new Methodology details page (2)

Done:
- Remove tree
- Filtering by several properties
- The link to the archive data
parent 3522ee1c
Pipeline #24099 passed with stages
in 8 seconds
...@@ -5981,7 +5981,8 @@ ...@@ -5981,7 +5981,8 @@
let FilterInGroupsComponent = __webpack_require__(36); let FilterInGroupsComponent = __webpack_require__(36);
let DataStore = __webpack_require__(2); let DataStore = __webpack_require__(2);
const REPOSITORY_LINK =
'https://repository.nomad-coe.eu/NomadRepository-1.1/views/calculation.zul?pid=';
let calcTypesMap = new Map(); let calcTypesMap = new Map();
calcTypesMap.set('Single point', 'single point'); calcTypesMap.set('Single point', 'single point');
...@@ -6024,22 +6025,25 @@ ...@@ -6024,22 +6025,25 @@
<table id="methodology-data"> <table id="methodology-data">
<thead> <thead>
<tr> <tr>
<th style="width: 14%;"><span>Calculation ID</span></th> <th style="width: 13%;"><span>Calculation ID</span></th>
<th style="width: 16%;"> <th style="width: 15%;">
<span>Type</span> <span>Type</span>
</th> </th>
<th style="width: 20%;"> <th style="width: 19%;">
<span info-sys-data="functional-type">Density functional</span> <span info-sys-data="functional-type">Density functional</span>
</th> </th>
<th style="width: 16%;"> <th style="width: 15%;">
<span info-sys-data="code-name">Code</span> <span info-sys-data="code-name">Code</span>
</th> </th>
<th style="width: 18%;"> <th style="width: 17%;">
<span info-sys-data="pseudopotential-type">Potential</span> <span info-sys-data="pseudopotential-type">Potential</span>
</th> </th>
<th style="width: 16%;"> <th style="width: 12%;">
<span info-sys-data="basis-set-type">Basis set</span> <span info-sys-data="basis-set-type">Basis set</span>
</th> </th>
<th style="width: 9%;">
<span info-sys-data="basis-set-type">Link</span>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -6048,7 +6052,6 @@ ...@@ -6048,7 +6052,6 @@
`; `;
this.tbody = this.dataTableWrapper.querySelector("tbody"); this.tbody = this.dataTableWrapper.querySelector("tbody");
//console.log('METHODOLOGY '+this.tbody);
this.moreInfoRow = document.createElement('tr'); // this.moreInfoRow = document.createElement('tr'); //
this.moreInfoRow.className= 'moreinfo'; this.moreInfoRow.className= 'moreinfo';
this.moreInfoCalcId = null; this.moreInfoCalcId = null;
...@@ -6057,32 +6060,30 @@ ...@@ -6057,32 +6060,30 @@
this.element.querySelector('.filter-placeholder'). this.element.querySelector('.filter-placeholder').
appendChild(this.filterComponent.element); appendChild(this.filterComponent.element);
//this.filterComponent.addItemsMap(calcTypesMap);
this.filterComponent.setItemListener( propsSel/*ected*/ => { this.filterComponent.setItemListener( propsSel/*ected*/ => {
//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'));
let calcProps = rows[i].getAttribute('data-calc-props').split(','); let calcProps = rows[i].getAttribute('data-calc-props').split(',');
console.log('FILTERING calcProps: ',calcProps); //console.log('FILTERING calcProps: ',calcProps);
if (propsSel.indexOf(calcProps[0]) >= 0 && propsSel.indexOf(calcProps[1]) >= 0) let propsPresent = true;
rows[i].style.display = 'table-row'; calcProps.forEach( e => {
//if (calcTypes.indexOf(calcType) >= 0) rows[i].style.display = 'table-row'; if (propsSel.indexOf(e) < 0) propsPresent = false;
});
if (propsPresent) 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);
this._events(); this._events();
} }
_events() { _events() {
//super._events(); //super._events();
...@@ -6091,7 +6092,6 @@ ...@@ -6091,7 +6092,6 @@
let rowElement = e.target.parentElement; let rowElement = e.target.parentElement;
if (rowElement.className.indexOf('data-row') < 0) if (rowElement.className.indexOf('data-row') < 0)
rowElement = rowElement.parentElement; rowElement = rowElement.parentElement;
//console.log("TABLE EVENT ",rowElement);
if (rowElement.className.indexOf('data-row') >= 0){ if (rowElement.className.indexOf('data-row') >= 0){
let id= rowElement.getAttribute('data-calc-id'); let id= rowElement.getAttribute('data-calc-id');
...@@ -6168,7 +6168,7 @@ ...@@ -6168,7 +6168,7 @@
} }
updateSelection( leafIds /*Set*/){ updateSelection( leafIds ){
this.moreInfoCalcId = null; // Reset the unfolded more info this.moreInfoCalcId = null; // Reset the unfolded more info
//console.log('MethodologyDetails UPDATING ',calcs); console.log(calcs); //console.log('MethodologyDetails UPDATING ',calcs); console.log(calcs);
this.sortedLeafs.length = 0; this.sortedLeafs.length = 0;
...@@ -6180,7 +6180,6 @@ ...@@ -6180,7 +6180,6 @@
this.sortedLeafs.sort(); this.sortedLeafs.sort();
this._render(); this._render();
//console.log('METHODOLOGY '+this.tbody.innerHTML);
} }
...@@ -6196,7 +6195,7 @@ ...@@ -6196,7 +6195,7 @@
if (DataStore.getGroups().has(leafId)){ if (DataStore.getGroups().has(leafId)){
calcType = DataStore.getGroupType(leafId); calcType = DataStore.getGroupType(leafId);
if (calcType === 'convergence') calcType = 'parameter variation'; if (calcType === 'convergence') calcType = 'parameter variation';
console.log('Group',DataStore.getGroupType(leafId)); //console.log('Group',DataStore.getGroupType(leafId));
} }
html+= getRowHtml(leafId, calc, calcType); html+= getRowHtml(leafId, calc, calcType);
...@@ -6209,6 +6208,12 @@ ...@@ -6209,6 +6208,12 @@
let calcProps = calcType+','+calc.functional_type+','+calc.code_name+ let calcProps = calcType+','+calc.functional_type+','+calc.code_name+
','+calc.core_electron_treatment+','+calc.basis_set_type; ','+calc.core_electron_treatment+','+calc.basis_set_type;
let repositoryLinkHtml = '';
if (calc.calculation_pid !== null && calc.calculation_pid !== undefined)
repositoryLinkHtml =
'<a href="'+REPOSITORY_LINK+calc.calculation_pid+'" target="blank"> '+
+'<img src="img/download.svg" height="20px" /> </a>';
//***** 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-props="${calcProps}" class="data-row"> <tr data-calc-id="${leafId}" data-calc-props="${calcProps}" class="data-row">
...@@ -6238,6 +6243,9 @@ ...@@ -6238,6 +6243,9 @@
${getOptValue(calc.basis_set_quality_quantifier)} ${getOptValue(calc.basis_set_quality_quantifier)}
</td> </td>
<td style="padding-top: 8px;padding-bottom: 4px;">${repositoryLinkHtml}
</td>
</tr>`; </tr>`;
} }
...@@ -8573,13 +8581,29 @@ ...@@ -8573,13 +8581,29 @@
densityFunctionalMap.set('meta-hybrid-GGA', 'meta-hybrid-GGA'); densityFunctionalMap.set('meta-hybrid-GGA', 'meta-hybrid-GGA');
densityFunctionalMap.set('HF', 'HF'); 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 potencial', 'full all electron');
potentialMap.set('Pseudo potencial', '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 { class FilterInGroupsComponent {
constructor(className) { constructor(className) {
this.element = document.createElement('div'); this.element = document.createElement('div');
this.element.className = className; this.element.className = className;
this.filtersOn = [];//this.filtersOnMap = new Map(); this.filtersOn = [];
this.folded = true; this.folded = true;
this.element.innerHTML+=` this.element.innerHTML+=`
<div style="float: left; width: 97%;" > <div style="float: left; width: 97%;" >
...@@ -8610,26 +8634,28 @@ ...@@ -8610,26 +8634,28 @@
this.unfoldedPanel.style.display = (this.folded ? 'none' : 'flex'); this.unfoldedPanel.style.display = (this.folded ? 'none' : 'flex');
}); });
this.addGroupItems('calculation-type', calcTypesMap); this.addGroupItems('Calculation type', calcTypesMap);
this.addGroupItems('density-functional', densityFunctionalMap); this.addGroupItems('Density functional', densityFunctionalMap);
this.addGroupItems('Code', codeMap);
this.addGroupItems('Potential', potentialMap);
this.addGroupItems('Basic set', basicSetMap);
// Add listener for checkboxes events // Add listener for checkboxes events
this.element.addEventListener('click', (e) => { this.element.addEventListener('click', (e) => {
if (e.target.tagName === 'INPUT'){ if (e.target.tagName === 'INPUT'){
//console.log('e.target.value',e.target.value);
let index = this.filtersOn.indexOf(e.target.value); let index = this.filtersOn.indexOf(e.target.value);
if (index >= 0) this.filtersOn.splice( index, 1 ); if (index >= 0) this.filtersOn.splice( index, 1 );
else this.filtersOn.push(e.target.value); else this.filtersOn.push(e.target.value);
this.itemListener(this.filtersOn); this.itemListener(this.filtersOn);
console.log('this.filtersOn',this.filtersOn); //console.log('this.filtersOn',this.filtersOn);
} }
}); });
} }
addGroupItems(groupId, groupItemsMap){ addGroupItems(group, groupItemsMap){
let html = '<div data-filter-type="'+groupId+'" >'+groupId+'<br>'; let html = '<div> <div style="font-weight: bold; padding: 6px 0;">'+group+'</div>';
groupItemsMap.forEach( (itemId, itemName) => { groupItemsMap.forEach( (itemId, itemName) => {
this.filtersOn.push(itemId); this.filtersOn.push(itemId);
html += '<input type="checkbox" value="'+itemId+'" checked>'+ html += '<input type="checkbox" value="'+itemId+'" checked>'+
......
...@@ -19,13 +19,29 @@ densityFunctionalMap.set('hybrid-GGA', 'hybrid-GGA'); ...@@ -19,13 +19,29 @@ densityFunctionalMap.set('hybrid-GGA', 'hybrid-GGA');
densityFunctionalMap.set('meta-hybrid-GGA', 'meta-hybrid-GGA'); densityFunctionalMap.set('meta-hybrid-GGA', 'meta-hybrid-GGA');
densityFunctionalMap.set('HF', 'HF'); 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 potencial', 'full all electron');
potentialMap.set('Pseudo potencial', '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 { class FilterInGroupsComponent {
constructor(className) { constructor(className) {
this.element = document.createElement('div'); this.element = document.createElement('div');
this.element.className = className; this.element.className = className;
this.filtersOn = [];//this.filtersOnMap = new Map(); this.filtersOn = [];
this.folded = true; this.folded = true;
this.element.innerHTML+=` this.element.innerHTML+=`
<div style="float: left; width: 97%;" > <div style="float: left; width: 97%;" >
...@@ -56,26 +72,28 @@ class FilterInGroupsComponent { ...@@ -56,26 +72,28 @@ class FilterInGroupsComponent {
this.unfoldedPanel.style.display = (this.folded ? 'none' : 'flex'); this.unfoldedPanel.style.display = (this.folded ? 'none' : 'flex');
}); });
this.addGroupItems('calculation-type', calcTypesMap); this.addGroupItems('Calculation type', calcTypesMap);
this.addGroupItems('density-functional', densityFunctionalMap); this.addGroupItems('Density functional', densityFunctionalMap);
this.addGroupItems('Code', codeMap);
this.addGroupItems('Potential', potentialMap);
this.addGroupItems('Basic set', basicSetMap);
// Add listener for checkboxes events // Add listener for checkboxes events
this.element.addEventListener('click', (e) => { this.element.addEventListener('click', (e) => {
if (e.target.tagName === 'INPUT'){ if (e.target.tagName === 'INPUT'){
//console.log('e.target.value',e.target.value);
let index = this.filtersOn.indexOf(e.target.value); let index = this.filtersOn.indexOf(e.target.value);
if (index >= 0) this.filtersOn.splice( index, 1 ); if (index >= 0) this.filtersOn.splice( index, 1 );
else this.filtersOn.push(e.target.value); else this.filtersOn.push(e.target.value);
this.itemListener(this.filtersOn); this.itemListener(this.filtersOn);
console.log('this.filtersOn',this.filtersOn); //console.log('this.filtersOn',this.filtersOn);
} }
}); });
} }
addGroupItems(groupId, groupItemsMap){ addGroupItems(group, groupItemsMap){
let html = '<div data-filter-type="'+groupId+'" >'+groupId+'<br>'; let html = '<div> <div style="font-weight: bold; padding: 6px 0;">'+group+'</div>';
groupItemsMap.forEach( (itemId, itemName) => { groupItemsMap.forEach( (itemId, itemName) => {
this.filtersOn.push(itemId); this.filtersOn.push(itemId);
html += '<input type="checkbox" value="'+itemId+'" checked>'+ html += '<input type="checkbox" value="'+itemId+'" checked>'+
......
...@@ -7,7 +7,8 @@ let InfoSys = require('../common/InfoSys.js'); ...@@ -7,7 +7,8 @@ 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');
const REPOSITORY_LINK =
'https://repository.nomad-coe.eu/NomadRepository-1.1/views/calculation.zul?pid=';
let calcTypesMap = new Map(); let calcTypesMap = new Map();
calcTypesMap.set('Single point', 'single point'); calcTypesMap.set('Single point', 'single point');
...@@ -50,22 +51,25 @@ class MethodologyDetails extends DetailsViewBase { ...@@ -50,22 +51,25 @@ class MethodologyDetails extends DetailsViewBase {
<table id="methodology-data"> <table id="methodology-data">
<thead> <thead>
<tr> <tr>
<th style="width: 14%;"><span>Calculation ID</span></th> <th style="width: 13%;"><span>Calculation ID</span></th>
<th style="width: 16%;"> <th style="width: 15%;">
<span>Type</span> <span>Type</span>
</th> </th>
<th style="width: 20%;"> <th style="width: 19%;">
<span info-sys-data="functional-type">Density functional</span> <span info-sys-data="functional-type">Density functional</span>
</th> </th>
<th style="width: 16%;"> <th style="width: 15%;">
<span info-sys-data="code-name">Code</span> <span info-sys-data="code-name">Code</span>
</th> </th>
<th style="width: 18%;"> <th style="width: 17%;">
<span info-sys-data="pseudopotential-type">Potential</span> <span info-sys-data="pseudopotential-type">Potential</span>
</th> </th>
<th style="width: 16%;"> <th style="width: 12%;">
<span info-sys-data="basis-set-type">Basis set</span> <span info-sys-data="basis-set-type">Basis set</span>
</th> </th>
<th style="width: 9%;">
<span info-sys-data="basis-set-type">Link</span>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -74,7 +78,6 @@ class MethodologyDetails extends DetailsViewBase { ...@@ -74,7 +78,6 @@ class MethodologyDetails extends DetailsViewBase {
`; `;
this.tbody = this.dataTableWrapper.querySelector("tbody"); this.tbody = this.dataTableWrapper.querySelector("tbody");
//console.log('METHODOLOGY '+this.tbody);
this.moreInfoRow = document.createElement('tr'); // this.moreInfoRow = document.createElement('tr'); //
this.moreInfoRow.className= 'moreinfo'; this.moreInfoRow.className= 'moreinfo';
this.moreInfoCalcId = null; this.moreInfoCalcId = null;
...@@ -83,32 +86,30 @@ class MethodologyDetails extends DetailsViewBase { ...@@ -83,32 +86,30 @@ class MethodologyDetails extends DetailsViewBase {
this.element.querySelector('.filter-placeholder'). this.element.querySelector('.filter-placeholder').
appendChild(this.filterComponent.element); appendChild(this.filterComponent.element);
//this.filterComponent.addItemsMap(calcTypesMap);
this.filterComponent.setItemListener( propsSel/*ected*/ => { this.filterComponent.setItemListener( propsSel/*ected*/ => {
//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'));
let calcProps = rows[i].getAttribute('data-calc-props').split(','); let calcProps = rows[i].getAttribute('data-calc-props').split(',');
console.log('FILTERING calcProps: ',calcProps); //console.log('FILTERING calcProps: ',calcProps);
if (propsSel.indexOf(calcProps[0]) >= 0 && propsSel.indexOf(calcProps[1]) >= 0) let propsPresent = true;
rows[i].style.display = 'table-row'; calcProps.forEach( e => {
//if (calcTypes.indexOf(calcType) >= 0) rows[i].style.display = 'table-row'; if (propsSel.indexOf(e) < 0) propsPresent = false;
});
if (propsPresent) 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);
this._events(); this._events();
} }
_events() { _events() {
//super._events(); //super._events();
...@@ -117,7 +118,6 @@ class MethodologyDetails extends DetailsViewBase { ...@@ -117,7 +118,6 @@ class MethodologyDetails extends DetailsViewBase {
let rowElement = e.target.parentElement; let rowElement = e.target.parentElement;
if (rowElement.className.indexOf('data-row') < 0) if (rowElement.className.indexOf('data-row') < 0)
rowElement = rowElement.parentElement; rowElement = rowElement.parentElement;
//console.log("TABLE EVENT ",rowElement);
if (rowElement.className.indexOf('data-row') >= 0){ if (rowElement.className.indexOf('data-row') >= 0){
let id= rowElement.getAttribute('data-calc-id'); let id= rowElement.getAttribute('data-calc-id');
...@@ -194,7 +194,7 @@ class MethodologyDetails extends DetailsViewBase { ...@@ -194,7 +194,7 @@ class MethodologyDetails extends DetailsViewBase {
} }
updateSelection( leafIds /*Set*/){ updateSelection( leafIds ){
this.moreInfoCalcId = null; // Reset the unfolded more info this.moreInfoCalcId = null; // Reset the unfolded more info
//console.log('MethodologyDetails UPDATING ',calcs); console.log(calcs); //console.log('MethodologyDetails UPDATING ',calcs); console.log(calcs);
this.sortedLeafs.length = 0; this.sortedLeafs.length = 0;
...@@ -206,7 +206,6 @@ class MethodologyDetails extends DetailsViewBase { ...@@ -206,7 +206,6 @@ class MethodologyDetails extends DetailsViewBase {
this.sortedLeafs.sort(); this.sortedLeafs.sort();
this._render(); this._render();
//console.log('METHODOLOGY '+this.tbody.innerHTML);
} }
...@@ -222,7 +221,7 @@ class MethodologyDetails extends DetailsViewBase { ...@@ -222,7 +221,7 @@ class MethodologyDetails extends DetailsViewBase {
if (DataStore.getGroups().has(leafId)){ if (DataStore.getGroups().has(leafId)){
calcType = DataStore.getGroupType(leafId); calcType = DataStore.getGroupType(leafId);
if (calcType === 'convergence') calcType = 'parameter variation'; if (calcType === 'convergence') calcType = 'parameter variation';
console.log('Group',DataStore.getGroupType(leafId)); //console.log('Group',DataStore.getGroupType(leafId));
} }
html+= getRowHtml(leafId, calc, calcType); html+= getRowHtml(leafId, calc, calcType);
...@@ -235,6 +234,12 @@ class MethodologyDetails extends DetailsViewBase { ...@@ -235,6 +234,12 @@ class MethodologyDetails extends DetailsViewBase {
let calcProps = calcType+','+calc.functional_type+','+calc.code_name+ let calcProps = calcType+','+calc.functional_type+','+calc.code_name+
','+calc.core_electron_treatment+','+calc.basis_set_type; ','+calc.core_electron_treatment+','+calc.basis_set_type;
let repositoryLinkHtml = '';
if (calc.calculation_pid !== null && calc.calculation_pid !== undefined)
repositoryLinkHtml =
'<a href="'+REPOSITORY_LINK+calc.calculation_pid+'" target="blank"> '+
+'<img src="img/download.svg" height="20px" /> </a>';
//***** 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-props="${calcProps}" class="data-row"> <tr data-calc-id="${leafId}" data-calc-props="${calcProps}" class="data-row">
...@@ -264,6 +269,9 @@ class MethodologyDetails extends DetailsViewBase { ...@@ -264,6 +269,9 @@ class MethodologyDetails extends DetailsViewBase {
${getOptValue(calc.basis_set_quality_quantifier)} ${getOptValue(calc.basis_set_quality_quantifier)}
</td> </td>
<td style="padding-top: 8px;padding-bottom: 4px;">${repositoryLinkHtml}
</td>