Fixed issue with synchronizing API result order.

client/css/styles.css

@@ -759,9 +759,12 @@ background-image: -webkit-linear-gradient(top, #777, #AAA, #777);
 #searchbtn:disabled {  }
 
 .search-labels{width: 62%; margin: 10px auto;}
-span.search-label{ display: inline-block; margin: 0 8px;
+span.search-label {
+  display: inline-block; margin: 0 8px;
   background-color: #E4E4E4; border: 0;
-  padding: 4px; }
+  padding: 4px;
+  padding-left: 6px;
+}
 img.remove-label{ cursor: pointer; }
 
 
@@ -1438,6 +1441,7 @@ text.structure-viewer-legend-labels{
   box-sizing: border-box;
   height: 50px;
   width: 120px;
+  flex: 0 0 120px;
 }
 
 .restricted-search-option {

client/src/main.js

@@ -219,6 +219,7 @@ let searchMod;
 let MaterialModule;
 let materialModDOM;
 let currentModule; // current module DOM being shown
+let initialized = false; // Has the search been initialized
 
 
 function showModuleDOM(module){
@@ -261,8 +262,10 @@ PubSub.subscribe('show-search', search => {
   titleElement.innerHTML = 'NOMAD Encyclopedia - Search';
   breadcrumb.setState('search', search);
   showModuleDOM(searchMod.element);
-
-  searchMod.sendQuery();
+  if (!initialized) {
+    searchMod.sendQuery();
+  }
+  initialized = true
 });
 
 

client/src/search-mod/MaterialList.view.js

@@ -42,7 +42,7 @@ class MaterialList {
     this.matMap = new Map();
     //this.currentSystemType = 'bulk';
     this.optimadeQuery = null;
-    this.queries = [];
+    this.newestQuery = null;
     
     this.noResultsBox = document.createElement('div');
     this.noResultsBox.style = 'text-align: center; font-weight: bold'
@@ -100,10 +100,9 @@ class MaterialList {
     reqJson.search_by.restricted = '0';
     console.log('SEARCHING: ', reqJson );
     const timestamp = Date.now();
-    this.queries.push(timestamp);
+    this.newestQuery = timestamp;
 
     document.querySelector('#syntax-error').style.visibility = 'hidden';
-    this.queries = true;
     fetch(util.getSearchURL(), {
       method: 'POST',
       headers: {'Content-Type': 'application/json;charset=utf-8'},
@@ -114,15 +113,15 @@ class MaterialList {
         console.log('GETTING: ', result);
 
         // If a newer query has been sent, ignore the results of an old query.
-        console.log(timestamp)
-
-        // Update state
-        this.noResults = (result.results.length === 0); 
-        this._setMatList(result.results);
-        this.pagControl.set(result.pages);
-         
-        this.visible = true;
-        this._render();
+        if (this.newestQuery === timestamp) {
+          // Update state
+          this.noResults = (result.results.length === 0); 
+          this._setMatList(result.results);
+          this.pagControl.set(result.pages);
+          
+          this.visible = true;
+          this._render();
+        }
       })
       .catch(error => {
         document.querySelector('#syntax-error').style.visibility = 'visible';