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 @@
let FilterInGroupsComponent = __webpack_require__(36);
let DataStore = __webpack_require__(2);
const REPOSITORY_LINK =
'https://repository.nomad-coe.eu/NomadRepository-1.1/views/calculation.zul?pid=';
let calcTypesMap = new Map();
calcTypesMap.set('Single point', 'single point');
......@@ -6024,22 +6025,25 @@
<table id="methodology-data">
<thead>
<tr>
<th style="width: 14%;"><span>Calculation ID</span></th>
<th style="width: 16%;">
<th style="width: 13%;"><span>Calculation ID</span></th>
<th style="width: 15%;">
<span>Type</span>
</th>
<th style="width: 20%;">
<th style="width: 19%;">
<span info-sys-data="functional-type">Density functional</span>
</th>
<th style="width: 16%;">
<th style="width: 15%;">
<span info-sys-data="code-name">Code</span>
</th>
<th style="width: 18%;">
<th style="width: 17%;">
<span info-sys-data="pseudopotential-type">Potential</span>
</th>
<th style="width: 16%;">
<th style="width: 12%;">
<span info-sys-data="basis-set-type">Basis set</span>
</th>
<th style="width: 9%;">
<span info-sys-data="basis-set-type">Link</span>
</th>
</tr>
</thead>
<tbody>
......@@ -6048,7 +6052,6 @@
`;
this.tbody = this.dataTableWrapper.querySelector("tbody");
//console.log('METHODOLOGY '+this.tbody);
this.moreInfoRow = document.createElement('tr'); //
this.moreInfoRow.className= 'moreinfo';
this.moreInfoCalcId = null;
......@@ -6057,32 +6060,30 @@
this.element.querySelector('.filter-placeholder').
appendChild(this.filterComponent.element);
//this.filterComponent.addItemsMap(calcTypesMap);
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 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';
//console.log('FILTERING calcProps: ',calcProps);
let propsPresent = true;
calcProps.forEach( e => {
if (propsSel.indexOf(e) < 0) propsPresent = false;
});
if (propsPresent) rows[i].style.display = 'table-row';
else rows[i].style.display = 'none';
}
});
// For static ones
InfoSys.addToInfoSystem(this.element);
this._events();
}
_events() {
//super._events();
......@@ -6091,7 +6092,6 @@
let rowElement = e.target.parentElement;
if (rowElement.className.indexOf('data-row') < 0)
rowElement = rowElement.parentElement;
//console.log("TABLE EVENT ",rowElement);
if (rowElement.className.indexOf('data-row') >= 0){
let id= rowElement.getAttribute('data-calc-id');
......@@ -6168,7 +6168,7 @@
}
updateSelection( leafIds /*Set*/){
updateSelection( leafIds ){
this.moreInfoCalcId = null; // Reset the unfolded more info
//console.log('MethodologyDetails UPDATING ',calcs); console.log(calcs);
this.sortedLeafs.length = 0;
......@@ -6180,7 +6180,6 @@
this.sortedLeafs.sort();
this._render();
//console.log('METHODOLOGY '+this.tbody.innerHTML);
}
......@@ -6196,7 +6195,7 @@
if (DataStore.getGroups().has(leafId)){
calcType = DataStore.getGroupType(leafId);
if (calcType === 'convergence') calcType = 'parameter variation';
console.log('Group',DataStore.getGroupType(leafId));
//console.log('Group',DataStore.getGroupType(leafId));
}
html+= getRowHtml(leafId, calc, calcType);
......@@ -6209,6 +6208,12 @@
let calcProps = calcType+','+calc.functional_type+','+calc.code_name+
','+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);
return `
<tr data-calc-id="${leafId}" data-calc-props="${calcProps}" class="data-row">
......@@ -6238,6 +6243,9 @@
${getOptValue(calc.basis_set_quality_quantifier)}
</td>
<td style="padding-top: 8px;padding-bottom: 4px;">${repositoryLinkHtml}
</td>
</tr>`;
}
......@@ -8573,13 +8581,29 @@
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 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 {
constructor(className) {
this.element = document.createElement('div');
this.element.className = className;
this.filtersOn = [];//this.filtersOnMap = new Map();
this.filtersOn = [];
this.folded = true;
this.element.innerHTML+=`
<div style="float: left; width: 97%;" >
......@@ -8610,26 +8634,28 @@
this.unfoldedPanel.style.display = (this.folded ? 'none' : 'flex');
});
this.addGroupItems('calculation-type', calcTypesMap);
this.addGroupItems('density-functional', densityFunctionalMap);
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'){
//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);
//console.log('this.filtersOn',this.filtersOn);
}
});
}
addGroupItems(groupId, groupItemsMap){
let html = '<div data-filter-type="'+groupId+'" >'+groupId+'<br>';
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>'+
......
......@@ -19,13 +19,29 @@ 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 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 {
constructor(className) {
this.element = document.createElement('div');
this.element.className = className;
this.filtersOn = [];//this.filtersOnMap = new Map();
this.filtersOn = [];
this.folded = true;
this.element.innerHTML+=`
<div style="float: left; width: 97%;" >
......@@ -56,26 +72,28 @@ class FilterInGroupsComponent {
this.unfoldedPanel.style.display = (this.folded ? 'none' : 'flex');
});
this.addGroupItems('calculation-type', calcTypesMap);
this.addGroupItems('density-functional', densityFunctionalMap);
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'){
//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);
//console.log('this.filtersOn',this.filtersOn);
}
});
}
addGroupItems(groupId, groupItemsMap){
let html = '<div data-filter-type="'+groupId+'" >'+groupId+'<br>';
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>'+
......
......@@ -7,7 +7,8 @@ let InfoSys = require('../common/InfoSys.js');
let FilterInGroupsComponent = require('./FilterInGroupsComponent.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();
calcTypesMap.set('Single point', 'single point');
......@@ -50,22 +51,25 @@ class MethodologyDetails extends DetailsViewBase {
<table id="methodology-data">
<thead>
<tr>
<th style="width: 14%;"><span>Calculation ID</span></th>
<th style="width: 16%;">
<th style="width: 13%;"><span>Calculation ID</span></th>
<th style="width: 15%;">
<span>Type</span>
</th>
<th style="width: 20%;">
<th style="width: 19%;">
<span info-sys-data="functional-type">Density functional</span>
</th>
<th style="width: 16%;">
<th style="width: 15%;">
<span info-sys-data="code-name">Code</span>
</th>
<th style="width: 18%;">
<th style="width: 17%;">
<span info-sys-data="pseudopotential-type">Potential</span>
</th>
<th style="width: 16%;">
<th style="width: 12%;">
<span info-sys-data="basis-set-type">Basis set</span>
</th>
<th style="width: 9%;">
<span info-sys-data="basis-set-type">Link</span>
</th>
</tr>
</thead>
<tbody>
......@@ -74,7 +78,6 @@ class MethodologyDetails extends DetailsViewBase {
`;
this.tbody = this.dataTableWrapper.querySelector("tbody");
//console.log('METHODOLOGY '+this.tbody);
this.moreInfoRow = document.createElement('tr'); //
this.moreInfoRow.className= 'moreinfo';
this.moreInfoCalcId = null;
......@@ -83,32 +86,30 @@ class MethodologyDetails extends DetailsViewBase {
this.element.querySelector('.filter-placeholder').
appendChild(this.filterComponent.element);
//this.filterComponent.addItemsMap(calcTypesMap);
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 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';
//console.log('FILTERING calcProps: ',calcProps);
let propsPresent = true;
calcProps.forEach( e => {
if (propsSel.indexOf(e) < 0) propsPresent = false;
});
if (propsPresent) rows[i].style.display = 'table-row';
else rows[i].style.display = 'none';
}
});
// For static ones
InfoSys.addToInfoSystem(this.element);
this._events();
}
_events() {
//super._events();
......@@ -117,7 +118,6 @@ class MethodologyDetails extends DetailsViewBase {
let rowElement = e.target.parentElement;
if (rowElement.className.indexOf('data-row') < 0)
rowElement = rowElement.parentElement;
//console.log("TABLE EVENT ",rowElement);
if (rowElement.className.indexOf('data-row') >= 0){
let id= rowElement.getAttribute('data-calc-id');
......@@ -194,7 +194,7 @@ class MethodologyDetails extends DetailsViewBase {
}
updateSelection( leafIds /*Set*/){
updateSelection( leafIds ){
this.moreInfoCalcId = null; // Reset the unfolded more info
//console.log('MethodologyDetails UPDATING ',calcs); console.log(calcs);
this.sortedLeafs.length = 0;
......@@ -206,7 +206,6 @@ class MethodologyDetails extends DetailsViewBase {
this.sortedLeafs.sort();
this._render();
//console.log('METHODOLOGY '+this.tbody.innerHTML);
}
......@@ -222,7 +221,7 @@ class MethodologyDetails extends DetailsViewBase {
if (DataStore.getGroups().has(leafId)){
calcType = DataStore.getGroupType(leafId);
if (calcType === 'convergence') calcType = 'parameter variation';
console.log('Group',DataStore.getGroupType(leafId));
//console.log('Group',DataStore.getGroupType(leafId));
}
html+= getRowHtml(leafId, calc, calcType);
......@@ -235,6 +234,12 @@ class MethodologyDetails extends DetailsViewBase {
let calcProps = calcType+','+calc.functional_type+','+calc.code_name+
','+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);
return `
<tr data-calc-id="${leafId}" data-calc-props="${calcProps}" class="data-row">
......@@ -264,6 +269,9 @@ class MethodologyDetails extends DetailsViewBase {
${getOptValue(calc.basis_set_quality_quantifier)}
</td>
<td style="padding-top: 8px;padding-bottom: 4px;">${repositoryLinkHtml}
</td>
</tr>`;
}
......
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