Commit d276bf63 authored by Lauri Himanen's avatar Lauri Himanen
Browse files

Fixed issue with incorrect display type used on AutocompleteTextField, added...

Fixed issue with incorrect display type used on AutocompleteTextField, added support for boolean operations on material names, improved the logic for showing invalid query types.
parent c401f678
This diff is collapsed.
......@@ -551,13 +551,16 @@ div.title span.unfolded::before{
}
.AutocompleteTextField-dropdown > div, .AutocompleteMultiselectTextfield-dropdown > div {
display: flex;
align-items: center;
padding: 2px 10px 2px 10px;
cursor: pointer;
border: 1px solid transparent;
}
.AutocompleteMultiselectTextfield-dropdown > div {
display: flex;
align-items: center;
}
.autocomplete-active {
border-color: #E56400 !important;
}
......
......@@ -55,25 +55,9 @@ class NewSearchMod {
this.element.innerHTML=
`
<div class="search-filter-side">
<!-- <div class="search-title">Properties</div>-->
<!-- <div id="filter-panel-placeholder"> </div> -->
</div>
<div class="search-main-side">
<!-- <div class="search-title">Composition</div> -->
<div class="search-box-placeholder" > </div>
<!-- <input type="checkbox" id="multiples-of-formula" value="">
Include multiples of formula
<br> -->
<!--<div style="padding: 5px 0; ">
<input type="checkbox" id="allow-other-elements" value="" checked>Allow other elements
</div>-->
<div style="display: flex">
<div class="perm-tooltip search-option" style="margin-right: 10px">
<input id="allow-other-elements" name="allow-other-elements" type="checkbox" checked>
......@@ -95,16 +79,15 @@ class NewSearchMod {
<button class="not-button">NOT</button>
<button class="open-parentheses" >(</button>
<button class="close-parentheses">)</button>
<!--<input type="checkbox" name="and-or" class="not-symbol-btn" />NOT-->
</div>
</div>
<div class="add-box">
<div class="add-panel">
</div>
</div>
<div class="results-panel"> <!-- style="display: none"-->
<div class="results-panel">
</div>
</div> <!-- search-main-side -->
</div>
`;
this.filterSidePanel = this.element.querySelector('.search-filter-side');
......@@ -129,18 +112,15 @@ class NewSearchMod {
this.searchBox.setSearchQueryChangeListener( () => {
REACTIVE_SEARCH_RIGHT ? this.sendQuery() : null;
//REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch();
REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch();
});
this.allowOtherElementsCheckbox = this.element.querySelector('#allow-other-elements');
this.allowOtherElementsCheckbox.addEventListener( 'change', e => {
REACTIVE_SEARCH_RIGHT ? this.sendQuery() : null;
//REACTIVE_SEARCH_RIGHT ? this.sendQuery() : this.materialList.invalidateSearch();
REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch();
});
this.restrictedCheckbox = this.element.querySelector('#restricted-search');
this.restrictedCheckbox.addEventListener( 'change', e => {
REACTIVE_SEARCH_RIGHT ? this.sendQuery() : null;
//REACTIVE_SEARCH_RIGHT ? this.sendQuery() : this.materialList.invalidateSearch();
REACTIVE_SEARCH_RIGHT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch();
});
/* This button could be out of the search box because its functionality
......@@ -197,21 +177,17 @@ class NewSearchMod {
this.formulaBox.setAddFormulaListener(formula => {
if (formula.trim() !== ''){
this.searchBox.addTag(formula, 'formula');
//this.formulaBox.disable(true);
this.addElementButton.disabled = true;
this.addMatNameButton.disabled = true;
// this.materialNameBox.disableInput(); It doesn't seem needed
}
});
this.materialNameBox = new MaterialNameBox();
this.materialNameBox.setAddMaterialNameListener( name => {
if (name.trim() !== ''){
this.searchBox.addTag(name, 'material');// this.addTag(name, 'MN');
this.searchBox.addTag(name, 'material');
this.addElementButton.disabled = true;
this.addFormulaButton.disabled = true;
// this.formulaBox.disableInput(); It doesn't seem needed
this.materialNameBox.disableInput();
}
});
......@@ -219,8 +195,7 @@ class NewSearchMod {
this.filterSidePanel.appendChild(this.filterPanel.element);
this.filterPanel.setPropsChangeListener( propsMap => {
REACTIVE_SEARCH_LEFT ? this.sendQuery() : null;
//REACTIVE_SEARCH_LEFT ? this.sendQuery() : this.materialList.invalidateSearch();
REACTIVE_SEARCH_LEFT ? this.sendQuery() : INVALIDATE_RESULTS && this.materialList.invalidateSearch();
})
this.materialList= new MaterialList();
......@@ -242,21 +217,19 @@ class NewSearchMod {
if (index > 0){
let selectingElement;
let selectingTab = className.substring(0, index-1);
if (selectingTab === 'element')
if (selectingTab === 'element') {
selectingElement = this.elementTable.element;
else if (selectingTab === 'name') {
} else if (selectingTab === 'name') {
selectingElement = this.materialNameBox.element;
// add autocomplete functionality,
// but load data not before the name tab is activated
this.materialNameBox.setAutocomplete();
}
else if (selectingTab === 'formula')
} else if (selectingTab === 'formula') {
selectingElement = this.formulaBox.element;
}
this.addPanel.replaceChild(selectingElement, this.addPanel.lastChild);
console.log("CLICK!");
// Hide or show the current tab
const icon = e.target.querySelector('.search-fold-icon')
if (this.currentTab == selectingTab) {
......@@ -282,10 +255,10 @@ class NewSearchMod {
this.currentTab = selectingTab;
this.currentTabElement = selEl;
// Disable/enable bool operation buttons
this.element.querySelectorAll('.bool-buttons button').forEach( button => {
button.disabled = (selectingTab === 'name');
});
// Disable/enable bool operation buttons on the material name tab
//this.element.querySelectorAll('.bool-buttons button').forEach( button => {
//button.disabled = (selectingTab === 'name');
//});
/*
if (this.userGuidance){
if (selectingTab === 'element'){
......
......@@ -18,11 +18,11 @@ class OptimadeTranslator {
let query = [...queryIn];
let types = [...typesIn];
// Add escaped quotes to all elements
// Add escaped quotes to all elements and material names
for (let i=0; i < query.length; ++i) {
let q = query[i];
let t = types[i];
if (t === "E") {
if (t === "E" || t === "MN" ) {
query[i] = `\"${q}\"`
}
}
......@@ -61,6 +61,8 @@ class OptimadeTranslator {
} else {
q = "formula HAS ONLY " + q
}
} else if (t === "MN") {
q = "material_name = " + q
}
query[i] = q;
}
......
......@@ -80,10 +80,6 @@ class SearchBox{
this.cleanButton = this.element.querySelector('.clean-btn');
this.cleanButton.addEventListener( "click", (e) => {
/*
this.searchQuery = [];
this.queryTypes = [];
this.updateSearchQuery();*/
// init search query
this._resetState();
this.renderQuery();
......@@ -101,15 +97,11 @@ class SearchBox{
}
_resetState(){
this.notItem = false;
this.inSubquery = false;
this.rootQuery = { type: 'query', value: [], not: false }; // no prop open indicates that is the first
}
getOldQueryFormat(){
const oldFormat = [];
......@@ -157,11 +149,6 @@ class SearchBox{
return '';
}
// Material name query. Does not allow combinations.
if (this.rootQuery.length === 1 && this.rootQuery.value[0].type === 'material') { // material case
return `material_name="${this.rootQuery.value[0].value}"`;
}
// Translate element/formula queries into OptimadeSyntax
const translator = new OptimadeTranslator();
const [searchQuery, queryTypes] = this.getOldQueryFormat();
......@@ -172,8 +159,8 @@ class SearchBox{
this.currentConnector = operator;
}
renderQuery(){
renderQuery() {
document.querySelector('#syntax-error').style.visibility = 'hidden';
this.searchQueryBox.innerHTML = getQueryStructHTML(this.rootQuery);
if (this.searchQueryChangeListener) this.searchQueryChangeListener();
......@@ -285,10 +272,6 @@ class SearchBox{
removeElementORFormulaInSearchQuery(item){
//console.log(" removeElementORFormulaInSearchQuery item: ",item, this.searchQuery.indexOf(item));
// NOT being used let isMaterialName = (this.queryTypes[0] === 'MN');
// spot the item and remove the item and the bool operator(s) related
removeItem(this.rootQuery, item);
......
Markdown is supported
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