Some search fixes and tweaks

3 files changed, 187 insertions, 178 deletions

diff --git a/src/client/util/SerializationHelper.ts b/src/client/util/SerializationHelper.ts
index 17ae407c4..429fb22d9 100644
--- a/src/client/util/SerializationHelper.ts
+++ b/src/client/util/SerializationHelper.ts
@@ -1,5 +1,6 @@
 import { PropSchema, serialize, deserialize, custom, setDefaultModelSchema, getDefaultModelSchema, primitive, SKIP } from "serializr";
 import { Field } from "../../new_fields/Doc";
+import { ClientUtils } from "./ClientUtils";
 
 export namespace SerializationHelper {
     let serializing: number = 0;
@@ -38,7 +39,11 @@ export namespace SerializationHelper {
 
         serializing += 1;
         if (!obj.__type) {
-            throw Error("No property 'type' found in JSON.");
+            if (ClientUtils.RELEASE) {
+                return undefined;
+            } else {
+                throw Error("No property 'type' found in JSON.");
+            }
         }
 
         if (!(obj.__type in serializationTypes)) {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index e0c5d163e..dc1d35b1c 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -26,6 +26,8 @@ export class SearchBox extends React.Component {
     @observable private _openNoResults: boolean = false;
     @observable private _visibleElements: JSX.Element[] = [];
 
+    private resultsRef = React.createRef<HTMLDivElement>();
+
     private _isSearch: ("search" | "placeholder" | undefined)[] = [];
     private _numTotalResults = -1;
     private _endIndex = -1;
@@ -114,37 +116,34 @@ export class SearchBox extends React.Component {
         return SearchUtil.Search(query, true, 0, 10000000);
     }
 
-    getResults = async (query: string) => {
-
-        while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) {
 
-            let prom: Promise<any>;
-            if (this._curRequest) {
-                prom = this._curRequest;
-                return;
-            } else {
-                prom = SearchUtil.Search(query, true, this._maxSearchIndex, 10);
-                this._maxSearchIndex += 10;
-            }
-            prom.then(action((res: SearchUtil.DocSearchResult) => {
+    private lockPromise?: Promise<void>;
+    getResults = async (query: string) => {
+        if (this.lockPromise) {
+            await this.lockPromise;
+        }
+        this.lockPromise = new Promise(async res => {
+            while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) {
+                this._curRequest = SearchUtil.Search(query, true, this._maxSearchIndex, 10).then(action((res: SearchUtil.DocSearchResult) => {
 
-                // happens at the beginning
-                if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) {
-                    this._numTotalResults = res.numFound;
-                }
+                    // happens at the beginning
+                    if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) {
+                        this._numTotalResults = res.numFound;
+                    }
 
-                let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs);
-                this._results.push(...filteredDocs);
+                    let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs);
+                    this._results.push(...filteredDocs);
 
-                if (prom === this._curRequest) {
                     this._curRequest = undefined;
-                }
-            }));
-
-            this._curRequest = prom;
+                }));
+                this._maxSearchIndex += 10;
 
-            await prom;
-        }
+                await this._curRequest;
+            }
+            this.resultsScrolled();
+            res();
+        });
+        return this.lockPromise;
     }
 
     collectionRef = React.createRef<HTMLSpanElement>();
@@ -215,7 +214,7 @@ export class SearchBox extends React.Component {
 
     @action
     resultsScrolled = (e?: React.UIEvent<HTMLDivElement>) => {
-        let scrollY = e ? e.currentTarget.scrollTop : 0;
+        let scrollY = e ? e.currentTarget.scrollTop : this.resultsRef.current ? this.resultsRef.current.scrollTop : 0;
         let buffer = 4;
         let startIndex = Math.floor(Math.max(0, scrollY / 70 - buffer));
         let endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (560 / 70) + buffer));
@@ -246,7 +245,7 @@ export class SearchBox extends React.Component {
             if (i < startIndex || i > endIndex) {
                 if (this._isSearch[i] !== "placeholder") {
                     this._isSearch[i] = "placeholder";
-                    this._visibleElements[i] = <div className="searchBox-placeholder" key={`searchBox-placeholder-${i}`}></div>;
+                    this._visibleElements[i] = <div className="searchBox-placeholder" key={`searchBox-placeholder-${i}`}>Loading...</div>;
                 }
             }
             else {
@@ -303,7 +302,7 @@ export class SearchBox extends React.Component {
                 <div className="searchBox-results" onScroll={this.resultsScrolled} style={{
                     display: this._resultsOpen ? "flex" : "none",
                     height: this.resFull ? "560px" : this.resultHeight, overflow: this.resFull ? "auto" : "visible"
-                }}>
+                }} ref={this.resultsRef}>
                     {this._visibleElements}
                 </div>
             </div>
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 0fb93daad..24dd2eaa3 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -6,195 +6,200 @@
     justify-content: flex-end;
     height: 70px;
     z-index: 0;
+}
 
-    .search-item {
-        width: 500px;
-        background: $light-color-secondary;
-        border-color: $intermediate-color;
-        border-bottom-style: solid;
-        padding: 10px;
-        height: 70px;
-        z-index: 0;
-        display: inline-block;
-
-        .main-search-info {
-            display: flex;
-            flex-direction: row;
-            width: 100%;
+.searchBox-placeholder,
+.search-overview .search-item {
+    width: 500px;
+    background: $light-color-secondary;
+    border-color: $intermediate-color;
+    border-bottom-style: solid;
+    padding: 10px;
+    height: 70px;
+    z-index: 0;
+    display: inline-block;
 
-            .search-title {
-                text-transform: uppercase;
-                text-align: left;
-                width: 100%;
-                font-weight: bold;
-            }
+    .main-search-info {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
 
-            .search-info {
+        .search-title {
+            text-transform: uppercase;
+            text-align: left;
+            width: 100%;
+            font-weight: bold;
+        }
+
+        .search-info {
+            display: flex;
+            justify-content: flex-end;
+
+            .link-container.item {
+                margin-left: auto;
+                margin-right: auto;
+                height: 26px;
+                width: 26px;
+                border-radius: 13px;
+                background: $dark-color;
+                color: $light-color-secondary;
                 display: flex;
-                justify-content: flex-end;
-
-                .link-container.item {
-                    margin-left: auto;
-                    margin-right: auto;
-                    height: 26px;
-                    width: 26px;
-                    border-radius: 13px;
-                    background: $dark-color;
-                    color: $light-color-secondary;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    -webkit-transition: all 0.2s ease-in-out;
-                    -moz-transition: all 0.2s ease-in-out;
-                    -o-transition: all 0.2s ease-in-out;
-                    transition: all 0.2s ease-in-out;
-                    transform-origin: top right;
-                    overflow: hidden;
+                justify-content: center;
+                align-items: center;
+                -webkit-transition: all 0.2s ease-in-out;
+                -moz-transition: all 0.2s ease-in-out;
+                -o-transition: all 0.2s ease-in-out;
+                transition: all 0.2s ease-in-out;
+                transform-origin: top right;
+                overflow: hidden;
+                position: relative;
+
+                .link-count {
+                    opacity: 1;
+                    position: absolute;
+                    z-index: 1000;
+                    text-align: center;
+                    -webkit-transition: opacity 0.2s ease-in-out;
+                    -moz-transition: opacity 0.2s ease-in-out;
+                    -o-transition: opacity 0.2s ease-in-out;
+                    transition: opacity 0.2s ease-in-out;
+                }
+
+                .link-extended {
+                    // display: none;
+                    visibility: hidden;
+                    opacity: 0;
                     position: relative;
+                    z-index: 500;
+                    overflow: hidden;
+                    -webkit-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
+                    -moz-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
+                    -o-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
+                    transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
+                    // transition-delay: 1s;
+                }
 
-                    .link-count {
-                        opacity: 1;
-                        position: absolute;
-                        z-index: 1000;
-                        text-align: center;
-                        -webkit-transition: opacity 0.2s ease-in-out;
-                        -moz-transition: opacity 0.2s ease-in-out;
-                        -o-transition: opacity 0.2s ease-in-out;
-                        transition: opacity 0.2s ease-in-out;
-                    }
+            }
 
-                    .link-extended {
-                        // display: none;
-                        visibility: hidden;
-                        opacity: 0;
-                        position: relative;
-                        z-index: 500;
-                        overflow: hidden;
-                        -webkit-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
-                        -moz-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
-                        -o-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
-                        transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
-                        // transition-delay: 1s;
-                    }
+            .link-container.item:hover {
+                width: 70px;
+            }
 
-                }
+            .link-container.item:hover .link-count {
+                opacity: 0;
+            }
 
-                .link-container.item:hover {
-                    width: 70px;
-                }
+            .link-container.item:hover .link-extended {
+                opacity: 1;
+                visibility: visible;
+                // display: inline;
+            }
 
-                .link-container.item:hover .link-count {
-                    opacity: 0;
-                }
+            .icon-icons {
+                width: 50px
+            }
 
-                .link-container.item:hover .link-extended {
-                    opacity: 1;
-                    visibility: visible;
-                    // display: inline;
-                }
+            .icon-live {
+                width: 175px;
+            }
 
-                .icon-icons {
-                    width: 50px
-                }
+            .icon-icons,
+            .icon-live {
+                height: 50px;
+                margin: auto;
+                overflow: hidden;
 
-                .icon-live {
-                    width: 175px;
+                .search-type {
+                    display: inline-block;
+                    width: 100%;
+                    position: absolute;
+                    justify-content: center;
+                    align-items: center;
+                    position: relative;
+                    margin-right: 5px;
                 }
 
-                .icon-icons,
-                .icon-live {
-                    height: 50px;
-                    margin: auto;
+                .pdfBox-cont {
                     overflow: hidden;
 
-                    .search-type {
-                        display: inline-block;
-                        width: 100%;
-                        position: absolute;
-                        justify-content: center;
-                        align-items: center;
-                        position: relative;
-                        margin-right: 5px;
-                    }
-
-                    .pdfBox-cont {
-                        overflow: hidden;
-
-                        img {
-                            width: 100% !important;
-                            height: auto !important;
-                        }
+                    img {
+                        width: 100% !important;
+                        height: auto !important;
                     }
+                }
 
-                    .search-type:hover+.search-label {
-                        opacity: 1;
-                    }
+                .search-type:hover+.search-label {
+                    opacity: 1;
+                }
 
-                    .search-label {
-                        font-size: 10;
-                        position: relative;
-                        right: 0px;
-                        text-transform: capitalize;
-                        opacity: 0;
-                        -webkit-transition: opacity 0.2s ease-in-out;
-                        -moz-transition: opacity 0.2s ease-in-out;
-                        -o-transition: opacity 0.2s ease-in-out;
-                        transition: opacity 0.2s ease-in-out;
-                    }
+                .search-label {
+                    font-size: 10;
+                    position: relative;
+                    right: 0px;
+                    text-transform: capitalize;
+                    opacity: 0;
+                    -webkit-transition: opacity 0.2s ease-in-out;
+                    -moz-transition: opacity 0.2s ease-in-out;
+                    -o-transition: opacity 0.2s ease-in-out;
+                    transition: opacity 0.2s ease-in-out;
                 }
+            }
 
-                .icon-live:hover {
-                    height: 175px;
+            .icon-live:hover {
+                height: 175px;
 
-                    .pdfBox-cont {
-                        img {
-                            width: 100% !important;
-                        }
+                .pdfBox-cont {
+                    img {
+                        width: 100% !important;
                     }
                 }
             }
-
-            .search-info:hover {
-                width: 60%;
-            }
         }
-    }
 
-    .search-item:hover~.searchBox-instances,
-    .searchBox-instances:hover,
-    .searchBox-instances:active {
-        opacity: 1;
-        background: $lighter-alt-accent;
-        -webkit-transform: scale(1);
-        -ms-transform: scale(1);
-        transform: scale(1);
+        .search-info:hover {
+            width: 60%;
+        }
     }
+}
 
-    .search-item:hover {
-        transition: all 0.2s;
-        background: $lighter-alt-accent;
-    }
+.search-item:hover~.searchBox-instances,
+.searchBox-instances:hover,
+.searchBox-instances:active {
+    opacity: 1;
+    background: $lighter-alt-accent;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+}
 
-    .searchBox-instances {
-        float: left;
-        opacity: 1;
-        width: 150px;
-        transition: all 0.2s ease;
-        color: black;
-        transform-origin: top right;
-        -webkit-transform: scale(0);
-        -ms-transform: scale(0);
-        transform: scale(0);
-    }
+.search-item:hover {
+    transition: all 0.2s;
+    background: $lighter-alt-accent;
+}
 
+.searchBox-instances {
+    float: left;
+    opacity: 1;
+    width: 150px;
+    transition: all 0.2s ease;
+    color: black;
+    transform-origin: top right;
+    -webkit-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0);
 }
 
+
 .search-overview:hover {
     z-index: 1;
 }
 
 .searchBox-placeholder {
     min-height: 70px;
+    margin-left: 150px;
+    text-transform: uppercase;
+    text-align: left;
+    font-weight: bold;
 }
 
 .collection {