Commit 47094dd7 authored by Lauri Himanen's avatar Lauri Himanen
Browse files

Fixed issue with loading spinner, removed autocomplete feature for material...

Fixed issue with loading spinner, removed autocomplete feature for material names, added support for using enter to add formula/material name to query.
parent cff6a589
Pipeline #97759 skipped with stage
This diff is collapsed.
window.nomadEnv = { window.nomadEnv = {
apiRoot: "https://nomad-lab.eu/dev/rae/enc-search/api/encyclopedia/", //apiRoot: "https://nomad-lab.eu/dev/rae/enc-search/api/encyclopedia/",
//apiRoot: "https://nomad-lab.eu/prod/rae/beta/api/encyclopedia/", apiRoot: "https://nomad-lab.eu/prod/rae/beta/api/encyclopedia/",
//apiRoot: "https://nomad-lab.eu/prod/rae/api/encyclopedia/", //apiRoot: "https://nomad-lab.eu/prod/rae/api/encyclopedia/",
//apiRoot: "http://localhost:8000/fairdi/nomad/latest/api/encyclopedia/", //apiRoot: "http://localhost:8000/fairdi/nomad/latest/api/encyclopedia/",
......
...@@ -511,26 +511,17 @@ div.title span.unfolded::before{ ...@@ -511,26 +511,17 @@ div.title span.unfolded::before{
/* Formula and Material name boxes */ /* Formula and Material name boxes */
.FormulaBox, .TextBox {
.MaterialNameBox{
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: left; text-align: left;
background-color: #DDD; background-color: #DDD;
} }
.FormulaBox input, .MaterialNameBox input{ .TextBox input[type=text] {
padding: 10px; padding: 10px;
border: 0; border: 0;
font-size: 0.9em; font-size: 0.9em;
}
.MaterialNameBox input{
box-sizing: border-box;
width: 100%;
}
.FormulaBox input[type=text]{
box-sizing: border-box; box-sizing: border-box;
width: 580px; width: 580px;
} }
...@@ -884,7 +875,7 @@ div#specialRows{margin: 20px 40px;} ...@@ -884,7 +875,7 @@ div#specialRows{margin: 20px 40px;}
} }
.MaterialList{ /*width: 690px; margin: 0 auto 80px;*/ .MaterialList{ /*width: 690px; margin: 0 auto 80px;*/
margin-top: 30px; margin-top: 25px;
} }
/* #paginationWg erased*/ /* #paginationWg erased*/
......
...@@ -30,9 +30,6 @@ let loadingPopup = document.querySelector('#loading-popup'); ...@@ -30,9 +30,6 @@ let loadingPopup = document.querySelector('#loading-popup');
let loadSet = new Set(); let loadSet = new Set();
function show(id) { function show(id) {
if (!window.allowNewLoadPopup) {
return;
}
loadSet.add(id, true); loadSet.add(id, true);
let ttRect = loadingPopup.getBoundingClientRect(); let ttRect = loadingPopup.getBoundingClientRect();
let leftPos = (window.innerWidth - ttRect.width)/2; let leftPos = (window.innerWidth - ttRect.width)/2;
......
...@@ -45,14 +45,10 @@ function route() { ...@@ -45,14 +45,10 @@ function route() {
if (hashHistory.length && historyLength == length) { if (hashHistory.length && historyLength == length) {
if (hashHistory[hashHistory.length - 2] == hash) { if (hashHistory[hashHistory.length - 2] == hash) {
hashHistory = hashHistory.slice(0, -1); hashHistory = hashHistory.slice(0, -1);
LoadingPopup.reset();
window.allowNewLoadPopup = false;
} else { } else {
window.allowNewLoadPopup = true;
hashHistory.push(hash); hashHistory.push(hash);
} }
} else { } else {
window.allowNewLoadPopup = true;
hashHistory.push(hash); hashHistory.push(hash);
historyLength = length; historyLength = length;
} }
......
...@@ -40,7 +40,6 @@ let DataStore = require('./material-mod/DataStore.js'); ...@@ -40,7 +40,6 @@ let DataStore = require('./material-mod/DataStore.js');
// main DOM elements // main DOM elements
let contentElement = document.getElementById('content'); let contentElement = document.getElementById('content');
let titleElement = document.querySelector('title'); let titleElement = document.querySelector('title');
window.allowNewLoadPopup = true;
var getUrl = window.location; var getUrl = window.location;
var guiRoot = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname; var guiRoot = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname;
......
...@@ -532,7 +532,7 @@ class Overview { ...@@ -532,7 +532,7 @@ class Overview {
this.heatCalcIdBox.innerHTML = ''; this.heatCalcIdBox.innerHTML = '';
} else { } else {
let url = util.getMaterialCalcURL(this.materialId, calcWithHeat.calc_id); let url = util.getMaterialCalcURL(this.materialId, calcWithHeat.calc_id);
LoadingPopup.show(); LoadingPopup.show("overview_thermodynamical");
let query = JSON.stringify({properties: ["thermodynamical_properties"]}); let query = JSON.stringify({properties: ["thermodynamical_properties"]});
util.serverReqPOST(url, query, e => { util.serverReqPOST(url, query, e => {
if (e.target.status === 200) { if (e.target.status === 200) {
...@@ -545,7 +545,7 @@ class Overview { ...@@ -545,7 +545,7 @@ class Overview {
this.phononLoaded = true; this.phononLoaded = true;
document.getElementById('thermal-props-ov').style.visibility = 'visible'; document.getElementById('thermal-props-ov').style.visibility = 'visible';
} }
LoadingPopup.hide(); LoadingPopup.hide("overview_thermodynamical");
}); });
} }
} }
......
...@@ -39,6 +39,7 @@ class AutocompleteTextfield { ...@@ -39,6 +39,7 @@ class AutocompleteTextfield {
this.listContainer = this.element.querySelector('div'); this.listContainer = this.element.querySelector('div');
this.selectListener; this.selectListener;
this.index = 0;
// state // state
this.valueList; // List of autocomplete (possible) values this.valueList; // List of autocomplete (possible) values
...@@ -46,17 +47,27 @@ class AutocompleteTextfield { ...@@ -46,17 +47,27 @@ class AutocompleteTextfield {
// event management // event management
this.input.addEventListener("input", (e) => { this.input.addEventListener("input", (e) => {
this.index = 0;
this._processInput(); this._processInput();
}); });
// react to keyboard navigation // react to keyboard navigation
this.input.addEventListener("keydown", (e) => { this.input.addEventListener("keydown", (e) => {
const nItems = this.listContainer.children.length;
if (e.keyCode == 40) { // arrow DOWN if (e.keyCode == 40) { // arrow DOWN
if (this._getActiveListItem()) this.index = (index+1) % nItems;
this._setActiveListItem(this._getActiveListItem().nextSibling); this._setActiveListItem(this.listContainer.children[this.index]);
//if (this._getActiveListItem()) {
//this._setActiveListItem(this._getActiveListItem().nextSibling);
//} else {
//this._setActiveListItem(this.listContainer.children[0]);
//}
} else if (e.keyCode == 38) { // arrow UP } else if (e.keyCode == 38) { // arrow UP
if (this._getActiveListItem()) this.index = (index-1) % nItems;
this._setActiveListItem(this._getActiveListItem().previousSibling); this._setActiveListItem(this.listContainer.children[this.index]);
//if (this._getActiveListItem()) {
//this._setActiveListItem(this._getActiveListItem().previousSibling);
//}
} }
}); });
...@@ -138,9 +149,10 @@ class AutocompleteTextfield { ...@@ -138,9 +149,10 @@ class AutocompleteTextfield {
this.listContainer.innerHTML = ''; this.listContainer.innerHTML = '';
matchingValues.forEach( value => { matchingValues.forEach( (value, i) => {
const listItem = generateListItem(value, currentInput); const listItem = generateListItem(value, currentInput);
this.listContainer.append(listItem); this.listContainer.append(listItem);
// check if a valid option was completely entered. if so, set the focus to the element corresponding to the input // check if a valid option was completely entered. if so, set the focus to the element corresponding to the input
if (value.toUpperCase() === currentInput.toUpperCase()) if (value.toUpperCase() === currentInput.toUpperCase())
this._setActiveListItem(listItem); this._setActiveListItem(listItem);
......
...@@ -86,7 +86,7 @@ class MaterialList { ...@@ -86,7 +86,7 @@ class MaterialList {
//this.resultsContainer.style.visibility = 'hidden'; //this.resultsContainer.style.visibility = 'hidden';
this.matMap.clear(); this.matMap.clear();
LoadingPopup.show(); LoadingPopup.show("searching");
let reqJson = { let reqJson = {
query: this.optimadeQuery, query: this.optimadeQuery,
...@@ -127,20 +127,8 @@ class MaterialList { ...@@ -127,20 +127,8 @@ class MaterialList {
document.querySelector('#syntax-error').style.visibility = 'visible'; document.querySelector('#syntax-error').style.visibility = 'visible';
}) })
.finally(() => { .finally(() => {
LoadingPopup.hide(); LoadingPopup.hide("searching");
}); });
/*
oReq.addEventListener("error", e => { // Not valid query
console.log('Search ERROR - Not valid query ');
this.total_results= 0;
this.setData([]);
this._updateUI();
this.resultsContainer.style.visibility = 'visible';
LoadingPopup.hide();
});
*/
} }
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
let util = require('../common/util.js'); let util = require('../common/util.js');
let AutocompleteTextfield = require('./AutocompleteTextfield.js'); let AutocompleteTextfield = require('./AutocompleteTextfield.js');
class MaterialNameBox{ class MaterialNameBox {
constructor() { constructor() {
this.element = document.createElement('div'); this.element = document.createElement('div');
...@@ -61,6 +61,7 @@ class MaterialNameBox{ ...@@ -61,6 +61,7 @@ class MaterialNameBox{
if (!this.materialNamesLoaded){ if (!this.materialNamesLoaded){
let r1 = util.serverReq(util.getSuggestionURL('material_name'), (e) => { let r1 = util.serverReq(util.getSuggestionURL('material_name'), (e) => {
let names = JSON.parse(r1.response).material_name; let names = JSON.parse(r1.response).material_name;
console.log(names);
this.materialNameField.setAutocompleteList(names); this.materialNameField.setAutocompleteList(names);
}); });
this.materialNamesLoaded = true; this.materialNamesLoaded = true;
......
...@@ -30,7 +30,6 @@ let UserGuidance = require('../common/UserGuidance.js'); ...@@ -30,7 +30,6 @@ let UserGuidance = require('../common/UserGuidance.js');
let SearchBox = require('./SearchBox.view.js'); let SearchBox = require('./SearchBox.view.js');
let ElementTable = require('./ElemenTable.view.js'); let ElementTable = require('./ElemenTable.view.js');
let MaterialList = require('./MaterialList.view.js'); let MaterialList = require('./MaterialList.view.js');
let MaterialNameBox = require('./MaterialName.view.js');
let FilterPanel = require('./FilterPanel.view.js'); let FilterPanel = require('./FilterPanel.view.js');
let SwitchComponent = require('../common/SwitchComponent.js'); let SwitchComponent = require('../common/SwitchComponent.js');
...@@ -155,8 +154,8 @@ class NewSearchMod { ...@@ -155,8 +154,8 @@ class NewSearchMod {
this.searchBox.removeElementORFormulaInSearchQuery(e) this.searchBox.removeElementORFormulaInSearchQuery(e)
}); });
this.formulaBox = new FormulaBox(); this.formulaBox = new FormulaBox("Add formula to the search query above");
this.formulaBox.setAddFormulaListener(formula => { this.formulaBox.setAddListener(formula => {
if (formula.trim() !== ''){ if (formula.trim() !== ''){
this.searchBox.addTag(formula, 'formula'); this.searchBox.addTag(formula, 'formula');
this.addElementButton.disabled = true; this.addElementButton.disabled = true;
...@@ -164,8 +163,8 @@ class NewSearchMod { ...@@ -164,8 +163,8 @@ class NewSearchMod {
} }
}); });
this.materialNameBox = new MaterialNameBox(); this.materialNameBox = new TextBox("Add material name to the search query above");
this.materialNameBox.setAddMaterialNameListener( name => { this.materialNameBox.setAddListener(name => {
if (name.trim() !== ''){ if (name.trim() !== ''){
this.searchBox.addTag(name, 'material'); this.searchBox.addTag(name, 'material');
this.addElementButton.disabled = true; this.addElementButton.disabled = true;
...@@ -207,9 +206,6 @@ class NewSearchMod { ...@@ -207,9 +206,6 @@ class NewSearchMod {
selectingElement = this.elementTable.element; selectingElement = this.elementTable.element;
} else if (selectingTab === 'name') { } else if (selectingTab === 'name') {
selectingElement = this.materialNameBox.element; 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; selectingElement = this.formulaBox.element;
} }
...@@ -488,67 +484,84 @@ class NewSearchMod { ...@@ -488,67 +484,84 @@ class NewSearchMod {
} }
class TextBox {
class FormulaBox { constructor(placeholder) {
constructor() {
this.element = document.createElement('div'); this.element = document.createElement('div');
this.element.className = 'FormulaBox';// this.element.setAttribute("id",'formula-box'); this.element.className = 'TextBox';
this.element.innerHTML= const column = document.createElement('div');
` column.style.display = 'flex';
<div style="display: flex; flex-direction: column"> column.style.flexDirection = 'column';
<div style="display: flex; flex-direction: row"> const row = document.createElement('div');
<input type="text" placeholder="Add formula to the search query above"> row.style.display = 'flex';
<button class="adding-formula-btn" disabled> Add to query </button> row.style.flexDirection = 'row';
</div> this.textField = document.createElement('input');
<div class="perm-tooltip search-option" style="margin-right: 10px"> this.textField.type = 'text';
<input id="allow-other-elements" name="allow-other-elements" type="checkbox" checked> this.textField.placeholder = placeholder;
<label for="allow-other-elements" class="perm-tooltip">Allow other elements</label> row.append(this.textField);
<span class="tooltiptext">If selected, the returned materials may also contain other elements.</span> this.button = document.createElement('button');
</div> this.button.className = 'adding-btn';
</div> this.button.disabled = true;
`; this.button.textContent = "Add to query";
this.formulaTextField = this.element.querySelector('input'); row.append(this.button);
this.formulaButton = this.element.querySelector('.adding-formula-btn'); column.append(row);
this.element.append(column);
this.formulaButton.addEventListener( "click", (e) => {
this.addFormulaListener(this.formulaTextField.value); this.button.addEventListener( "click", (e) => {
this.formulaTextField.value = ''; this.addListener(this.textField.value);
this.textField.value = '';
}); });
this.formulaTextField.addEventListener( 'input', e => { // React to enter key
//console.log('formulaTextField input: ',this.formulaTextField.value); this.textField.addEventListener("keypress", e => {
this.formulaButton.disabled = (this.formulaTextField.value === ''); if (e.keyCode == 13) { // ENTER
this.addListener(this.textField.value);
this.textField.value = '';
}
}); });
this.textField.addEventListener( 'input', e => {
this.button.disabled = (this.textField.value === '');
});
} }
setAddListener(listener) {
setAddFormulaListener(listener) { this.addListener = listener;
this.addFormulaListener= listener;
} }
disableInput() { disableInput() {
this.formulaTextField.disabled = true; this.textField.disabled = true;
this.formulaButton.disabled = true; this.button.disabled = true;
} }
enableInput() { enableInput() {
this.formulaTextField.disabled = false; this.textField.disabled = false;
this.formulaButton.disabled = false; this.button.disabled = false;
} }
}
/* class FormulaBox extends TextBox {
getAllowOtherElements(){ constructor(placeholder) {
return this.element.querySelector('.allow-other-elements').checked; super(placeholder);
const checkbox = document.createElement("div");
checkbox.className = "perm-tooltip search-option";
checkbox.style.marginRight = "10px";
const input = document.createElement("input");
input.id = "allow-other-elements";
input.name = "allow-other-elements";
input.type = "checkbox";
input.checked = true;
checkbox.append(input)
const label = document.createElement("label");
label["for"] = "allow-other-elements";
label.className = "perm-tooltip";
label.textContent = "Allow other elements";
checkbox.append(label)
const span = document.createElement("span");
span.className = "tooltiptext";
span.textContent = "If selected, the returned materials may also contain other elements.";
checkbox.append(span);
this.element.children[0].append(checkbox);
} }
getMultiplesOfFormula(){
return this.element.querySelector('.multiples-of-formula').checked;
}*/
} }
// EXPORTS // EXPORTS
......
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