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

Integrate the MaterialList component into the NewSearch page

parent 41bcfb04
This diff is collapsed.
......@@ -300,13 +300,20 @@ div.title span.unfolded::before{
/******+ SEARCH BAR *********/
#search-module{
width: 62%; margin: 10px auto;
}
/*width: 62%; margin: 10px auto;*/
display: flex;
margin-top: 10px;
justify-content: space-evenly;/*center;*/
.searchline{
}
.search-filter-side{
background-color: #DDD;
padding: 10px 16px;
}
.exclusive-search-line{
margin: 4px auto;
font-size: 0.85em;
......@@ -402,19 +409,19 @@ div.title span.unfolded::before{
cursor: default;
}
#formula-box{
#formula-box, #material-name-box{
text-align: center;
background-color: #DDD;
padding: 40px 0;
}
.formula-text-field, .material-name-text-field{
.formula-text-field, .name-text-field{
padding: 10px;
border: 0;
font-size: 0.9em;
width: 60%;
}
.adding-formula-btn, .adding-material-name-btn{
.adding-formula-btn, .adding-name-btn{
padding: 9px;
border: 1px solid #999;
}
......
......@@ -32,7 +32,7 @@ let FlaggingFormPopup = require('./common/FlaggingFormPopup.js');
let PubSub = require('./common/PubSub.js');
let Router = require('./common/Router.js');
let MaterialMod = require('./material-mod/MaterialMod.js');
let SearchModule = require('./search-mod/SearchMod.js');
let SearchModule = require('./search-mod/NewSearchMod.js');
let UserGuidance = require('./common/UserGuidance.js');
let DataStore = require('./material-mod/DataStore.js');
......@@ -42,7 +42,6 @@ let contentElement = document.getElementById('content');
let titleElement = document.querySelector('title');
/********* User flagging side tab ****************/
/* This side vertical tab is hidden initially
......@@ -204,7 +203,7 @@ PubSub.subscribe('show-search', search => {
LoadingPopup.hide(); // In case it comes from the result page
}else if (search === 'results')
searchMod.showResultsPage();
searchMod.showSearchResults();
showModuleDOM(searchMod.element);
......
......@@ -19,8 +19,7 @@
/*
This component implements the UI box (Properties) that allows add filters
to the search
*/
......@@ -31,33 +30,14 @@ let InfoSys = require('../common/InfoSys.js');
class PropertiesBox {
class FilterPanel {
constructor() {
//this.element = document.getElementById('filter-panel-placeholder');
this.element = document.createElement('div');
this.element.setAttribute("id",'search-properties-box');
this.element.setAttribute("id",'filter-panel-placeholder');
this.element.innerHTML=
`
<div class="props-box-tabs-wrapper" style="float: left; width: 25%; ">
<div class="properties-box-tabs" >
<div data-tab="structure" class="props-tab-selected" >Structure </div>
<div data-tab="results">Properties </div>
<div data-tab="method">Method </div>
<!-- <div class="contributors-tab">Contributors </div> -->
</div>
</div>
<div class="properties-box-panel" style="float: left;width: 75%;height: 100%">
<div class="props-tab-panel-wrapper" style="height: 86%" >
<div class="structure-panel props-tab-panel" style="display: block">
<div style="float: left; width: 47%;">
<div class="field">
<div class="field-title"><span info-sys-data="space-group">Space group number</span></div>
<input type="text" class="space-group-number-field">
......@@ -79,11 +59,6 @@ class PropertiesBox {
</div>
</div>
<div style="float: left; width: 5%;"></div>
<div style="float: right; width: 47%;">
<div class="field">
<div class="field-title"><span info-sys-data="structure-type">Structure type</span></div>
......@@ -110,12 +85,6 @@ class PropertiesBox {
<span info-sys-data="crystal-system.value:triclinic">Triclinic</span><br>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div class="results-panel props-tab-panel" >
<div style="float: left; width: 47%;">
<div class="field">
<div class="field-title"><span info-sys-data="band-gap">Band gap</span> <span style="font-weight: normal;">(eV)</span></div>
......@@ -127,11 +96,7 @@ class PropertiesBox {
-->
</div>
</div>
<div style="float: left; width: 5%;"> </div>
<div style="float: right; width: 47%;">
<div class="field" style="padding-top: 28px;">
<input type="radio" name="band-gap-type" value="d"> Direct<br>
<input type="radio" name="band-gap-type" value="i"> Indirect<br>
......@@ -139,108 +104,22 @@ class PropertiesBox {
</div>
</div>
<div style="clear: both;"></div>
<div class="field" style="background-color: #CCC; padding: 10px;">
<div style="font-weight: bold; padding-bottom: 6px" >Results containing...</div>
<div style="float: left; width: 47%;">
<input type="checkbox" class="has-band-structure-field" value="Band structure">
<span info-sys-data="has-band-structure">Band structure</span><br>
<input type="checkbox" class="has-dos-field" value="DOS">
<span info-sys-data="has-dos">DOS</span><br>
<input type="checkbox" class="has-fermi-surface-field" value="Fermi surface">
<span info-sys-data="has-fermi-surface">Fermi surface</span><br>
</div>
<div style="float: right; width: 47%;">
<input type="checkbox" class="has-thermal-properties-field" value="Thermal properties">
<span info-sys-data="has-thermal-properties">Thermal properties</span>
<br>
<!-- <input type="checkbox" class="results-containing-field" value="EOS" disabled>Equation of state<br>-->
</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="method-panel props-tab-panel" >
<div style="float: left; width: 47%;">
<div class="field">
<div class="field-title"><span info-sys-data="functional-type">Functional type</span></div>
<input type="checkbox" class="functional-type-field" value="LDA">
<span info-sys-data="functional-type.value:LDA">LDA</span><br>
<input type="checkbox" class="functional-type-field" value="GGA">
<span info-sys-data="functional-type.value:GGA">GGA</span><br>
<input type="checkbox" class="functional-type-field" value="meta-GGA">
<span info-sys-data="functional-type.value:meta-GGA">meta-GGA</span><br>
<input type="checkbox" class="functional-type-field" value="hybrid-GGA">
<span info-sys-data="functional-type.value:hybrid-GGA">hybrid-GGA</span><br>
<input type="checkbox" class="functional-type-field" value="hybrid-meta-GGA">
<span info-sys-data="functional-type.value:hybrid-meta-GGA">hybrid-meta-GGA</span><br>
<input type="checkbox" class="functional-type-field" value="HF">
<span info-sys-data="functional-type.value:HF">HF</span><br>
<input type="checkbox" class="functional-type-field" value="GW">
<span info-sys-data="functional-type.value:GW">GW</span><br>
</div>
<div class="field">
<div class="field-title"><span info-sys-data="code-name">Code name</span></div>
<select class="code-name-field" >
<option></option>
</select>
<!--
<input type="checkbox" class="code-name-field" value="VASP">VASP<br>
<input type="checkbox" class="code-name-field" value="quantum-espresso">Quantum Espresso<br>
<input type="checkbox" class="code-name-field" value="FHI-aims">FHI-aims<br>
<input type="checkbox" class="code-name-field" value="exciting">exciting<br>
-->
</div>
</div>
<div style="float: left; width: 5%;"> </div>
<div style="float: right; width: 47%;">
<div class="field">
<div class="field-title"><span info-sys-data="basis-set-type">Basis set</span></div>
<input type="checkbox" class="basis-set-type-field" value="numeric AOs">
<span info-sys-data="basis-set-type.value:numeric AOs">Numeric AOs</span><br>
<input type="checkbox" class="basis-set-type-field" value="gaussians">
<span info-sys-data="basis-set-type.value:gaussians">Gaussians</span><br>
<input type="checkbox" class="basis-set-type-field" value="(L)APW+lo">
<span info-sys-data="basis-set-type.value:(L)APW+lo">(L)APW+lo</span><br>
<input type="checkbox" class="basis-set-type-field" value="plane waves">
<span info-sys-data="basis-set-type.value:plane waves">Plane waves</span><br>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="properties-box-enter-button" style="height: 14%">
<button disabled>Add to query</button>
</div>
</div>
`;
<div style="clear: both;"></div>
`
this.tabsElement = this.element.querySelector('.properties-box-tabs');
this.tabSelected = this.element.querySelector('[data-tab="structure"]');
this.tabPanelSelected = this.element.querySelector('.structure-panel');
this.addButton = this.element.querySelector('.properties-box-enter-button button');
let codeNameSelect = this.element.querySelector('.code-name-field');
let r = util.serverReq(util.getSuggestionURL('code_name'), () => {
//console.log('CODES', r.response);
JSON.parse(r.response).code_name.forEach( codeName => {
codeNameSelect.innerHTML += '<option>'+codeName+'</option>';
});
});
let structureTypeSelect = this.element.querySelector('.structure-type-field');
let r1 = util.serverReq(util.getSuggestionURL('structure_type'), () => {
......@@ -264,46 +143,20 @@ class PropertiesBox {
_events() {
this.tabsElement.addEventListener( "click", (e) => {
if (e.target !== e.currentTarget) { // When the event source is a child
if (this.tabSelected !== null) this.tabSelected.className = '';
this.tabSelected = e.target;
this.tabSelected.className = 'props-tab-selected';
let tabString = e.target.getAttribute('data-tab');
//console.log("TAB: "+tabString);
if (this.tabPanelSelected !== null)
this.tabPanelSelected.style.display = 'none';
this.tabPanelSelected = this.element.getElementsByClassName(tabString+'-panel')[0];
this.tabPanelSelected.style.display = 'block';
this.checkPropsValues();
}
});
this.addButton.addEventListener( "click", (e) => {
let propsMap = this.getPropsWithValueFromCurrentTab(true);
//console.log('addButton.propsMap: ',propsMap);
this.addPropertiesListener(propsMap);
this.addButton.disabled = true;
});
/*
let panel = this.element.querySelector('.properties-box-panel');
panel.addEventListener( 'input', e => { this.checkPropsValues(); });
panel.addEventListener( 'change', e => { this.checkPropsValues(); });
*/
}
checkPropsValues(){
let map = this.getPropsWithValueFromCurrentTab(false);
this.addButton.disabled = (map.size === 0);
//let map = this.getPropsWithValueFromCurrentTab(false);
}
/*
getPropsWithValueFromCurrentTab(reset){
let tabString = this.tabSelected.getAttribute('data-tab');
//console.log('andButton: ',tabString);
let propsMap = new Map();
if (tabString === 'structure'){
......@@ -323,6 +176,7 @@ class PropertiesBox {
//this.addPropsFromTextFields(propsMap,['contributors']);}
return propsMap;
}
*/
addPropsFromTextFields(propsMap,propsArray, reset){
......@@ -409,7 +263,7 @@ class PropertiesBox {
}
// EXPORTS
module.exports = PropertiesBox;
module.exports = FilterPanel;
......
......@@ -121,7 +121,62 @@ class MaterialList {
this.searchJson = searchJson;
this.page = 1;
this._search();
this._search1();
}
_search1(){ /**************** ES queries!!!!!!!!!!!!!!!!!!!111111
let postQuery= `
{
"query" : {
"constant_score" : {
"filter" : {
"bool" : {
"must": [
{"match" : { "atom_labels": "Te" }},
{"match" : { "atom_labels": "Si" }}
]
}
}
}
}
} `;
console.log('SENDING: ', postQuery);
LoadingPopup.show();
//let oReq = util.serverReqPOST(util.getSearchURL(), postQuery, e => {
let oReq = util.serverReqPOST('http://enc-staging-nomad.esc.rzg.mpg.de/v1.0/esmaterials', postQuery, e => {
let data= JSON.parse(e.target.response);
console.log('GETTING: ', data);
/*
if (e.target.status === 200){
this.total_results= data.total_results;
this.pagesNum= (data.pages === null ? 1 : data.pages.pages);
let matData= data.results;
if (this.total_results === 1){
util.setBrowserHashPath('material',+matData[0].id);
util.searchResults = false;
}else{
this.setData(matData);
util.searchResults = true;
}
}else{ // Right query - results not found
this.total_results= 0;
this.pagesNum = 0;
this.setData([]);
}
this._updateUI();
*/
this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
});
}
......@@ -135,7 +190,7 @@ class MaterialList {
LoadingPopup.show();
let oReq = util.serverReqPOST(util.getSearchURL(), postQuery, e => {
let data= JSON.parse(e.target.response);
console.log('SENDING: ', data);
console.log('GETING: ', data);
if (e.target.status === 200){
this.total_results= data.total_results;
this.pagesNum= (data.pages === null ? 1 : data.pages.pages);
......
......@@ -29,7 +29,9 @@ let util = require('../common/util.js');
let UserGuidance = require('../common/UserGuidance.js');
let ElementTable = require('./ElemenTable.view.js');
let MaterialList = require('./MaterialList.view.js');
let PropertiesBox = require('./PropertiesBox.view.js');
//let PropertiesBox = require('./PropertiesBox.view.js');
let FilterPanel = require('./FilterPanel.view.js');
// local utility functions
......@@ -50,73 +52,81 @@ function replaceDashes(s){
class SearchMod {
class NewSearchMod {
constructor() {
this.element = document.createElement('div');
this.element.setAttribute("id",'search-module');
this.element.innerHTML=
`
<div class="search-page">
<div class="search-filter-side">
<div class="searchline" style="visibility: hidden">
<div class="search-query-wrapper" style="float: left;">
<div class="search-query-box" style="float: left;">
</div>
<button class="clean-btn" style="float: right;">Clear all</button>
</div>
<div>Filters</div>
<!-- <div id="filter-panel-placeholder"> </div> -->
<button style="float: right" class="search-btn" >Search</button>
<div style="clear: both;"></div>
<div class="exclusive-search-line">
Exclusive search <input class="exclusive-search" type="checkbox" >
</div>
</div>
<div class="search-main-side">
<div class="add-buttons" >
<div class="tab-buttons" style="width: 70%; display: inline-block">
<button class="element-add-btn" id="add-tab-selected">Element</button>
<button class="formula-add-btn" style="padding: 10px 20px;" >Formula/Material</button>
<button class="props-add-btn" >Properties</button>
</div>
<div class="bool-buttons" style="width: 28%; display: inline-block" >
<button disabled >AND</button>
<button disabled >OR</button>
<button disabled >NOT</button>
<button disabled >(</button> <button disabled >)</button>
<!--<input type="checkbox" name="and-or" class="not-symbol-btn" />NOT-->
</div>
</div>
<div class="search-box" >
<div class="search-query-wrapper" style="float: left;">
<div class="search-query-box" style="float: left;">
</div>
<button class="clean-btn" style="float: right;">Clear all</button>
</div>
<button style="float: right" class="search-btn" >Search</button>
<div style="clear: both;"></div>
<div class="exclusive-search-line">
Exclusive search <input class="exclusive-search" type="checkbox" >
</div>
</div>
<div>
<div class="triangle element-tri" style="margin: -10px 64px; visibility: visible"></div>
<div class="triangle formula-tri" style="margin: -10px 30px; visibility: hidden"></div>
<div class="triangle props-tri" style="margin: -10px 70px; visibility: hidden"></div>
</div>
<div class="add-buttons" >
<div class="tab-buttons" style="width: 70%; display: inline-block">
<button class="element-add-btn" id="add-tab-selected">Element</button>
<button class="formula-add-btn" style="padding: 10px 20px;" >Formula</button>
<button class="name-add-btn" >Name</button>
</div>
<div class="bool-buttons" style="width: 28%; display: inline-block" >
<button disabled >AND</button>
<button disabled >OR</button>
<button disabled >NOT</button>
<button disabled >(</button> <button disabled >)</button>
<!--<input type="checkbox" name="and-or" class="not-symbol-btn" />NOT-->
</div>
</div>
<div class="add-panel">
</div>
</div> <!-- search-page -->
<div class="add-box">
<div>
<div class="triangle element-tri" style="margin: -10px 64px; visibility: visible"></div>
<div class="triangle formula-tri" style="margin: -10px 30px; visibility: hidden"></div>
<div class="triangle name-tri" style="margin: -10px 70px; visibility: hidden"></div>
</div>
<div class="add-panel">
</div>
</div>
<div class="results-page" style="display: none">
</div>
<div class="results-panel" > <!-- style="display: none"-->
</div>
</div> <!-- search-main-side -->
`;
this.searchPage = this.element.querySelector('.search-page');
this.filterSidePanel = this.element.querySelector('.search-filter-side');
this.searchQueryBox= this.element.getElementsByClassName("search-query-box")[0];
this.searchLine = this.element.querySelector('.searchline');
this.searchBox = this.element.querySelector('.search-box');
this.mainButton= this.element.querySelector('.search-btn');
this.cleanButton= this.element.querySelector('.clean-btn');
this.addButtonsBox= this.element.querySelector('.add-buttons');
this.addElementButton = this.addButtonsBox.querySelector('.element-add-btn');
this.addFormulaButton = this.addButtonsBox.querySelector('.formula-add-btn');
this.addMatNameButton = this.addButtonsBox.querySelector('.name-add-btn');
this.addPanel= this.element.querySelector('.add-panel');
......@@ -124,33 +134,46 @@ class SearchMod {
this.elementTable.setClickListener(elementArray => {
this.addElementsInSearchQuery(elementArray);
this.addFormulaButton.disabled = true; // Not always necessary but it simplifies the code
this.addMatNameButton.disabled = true; // Not always necessary but it simplifies the code
});
this.elementTable.setDeselectListener(e => this.removeElementORFormulaInSearchQuery(e));
this.propertiesBox= new PropertiesBox();
this.propertiesBox.setAddPropertiesListener(propsMap => {
this.addPropertiesInSearchQuery(propsMap);
});
this.formulaBox = new FormulaBox();
this.formulaBox.setAddFormulaListener(formula => {
if (formula.trim() !== ''){
this.addTagInSearchQuery(formula, 'F');
this.addElementButton.disabled = true;
this.addMatNameButton.disabled = true;
this.formulaBox.disable(true);
this.materialNameBox.disable(true);
}
});
this.formulaBox.setAddMaterialListener(materialName => {
if (materialName.trim() !== ''){
this.addTagInSearchQuery(materialName, 'material-name');
this.materialNameBox = new MaterialNameBox();
this.materialNameBox.setAddMaterialNameListener( name => {
if (name.trim() !== ''){
this.addTagInSearchQuery(name, 'material-name');
this.addElementButton.disabled = true;
this.addFormulaButton.disabled = true;
this.formulaBox.disable(true);
this.materialNameBox.disable(true);
}
});
/*
this.propertiesBox= new PropertiesBox();
this.propertiesBox.setAddPropertiesListener(propsMap => {
this.addPropertiesInSearchQuery(propsMap);
});*/
this.filterPanel = new FilterPanel();
this.filterSidePanel.appendChild(this.filterPanel.element);
this.materialList= new MaterialList();
this.resultsPage = this.element.querySelector('.results-page');
this.resultsPage = this.element.querySelector('.results-panel');
this.materialList.attachAndSetEvents(this.resultsPage);
this.currentTab = 'element';
......@@ -158,7 +181,7 @@ class SearchMod {
this.userGuidance = true; // can enabled/disabled
this.showingSearchBox = false;
//this.showingSearchBox = false;
this.searchQuery = [];
this.queryTypes = []; //**** Types associated to query elements
// Types: element (E), formula (F), symbol (S) and prop names
......@@ -204,6 +227,8 @@ class SearchMod {
this.materialList.setSearch(queryObj);
util.setBrowserHashPath('search','results');
this.element.querySelector('.add-box').style.display = 'none';
}
});
......@@ -213,8 +238,10 @@ class SearchMod {
this.queryTypes = [];
this.updateSearchQuery();
this.addFormulaButton.disabled = false;
this.addMatNameButton.disabled = false;
this.addElementButton.disabled = false;
this.formulaBox.disable(false);
this.materialNameBox.disable(false);
this.elementTable.deselectAllElements();