Merge pull request #205 from browngraphicslab/search_virt

Search virtualization

1 files changed, 150 insertions, 33 deletions

diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 121abf973..dc1d35b1c 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { observable, action, runInAction } from 'mobx';
+import { observable, action, runInAction, flow, computed } from 'mobx';
 import "./SearchBox.scss";
 import "./FilterBox.scss";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -16,6 +16,7 @@ import { SearchUtil } from '../../util/SearchUtil';
 import { RouteStore } from '../../../server/RouteStore';
 import { FilterBox } from './FilterBox';
 
+
 @observer
 export class SearchBox extends React.Component {
 
@@ -23,16 +24,24 @@ export class SearchBox extends React.Component {
     @observable private _resultsOpen: boolean = false;
     @observable private _results: Doc[] = [];
     @observable private _openNoResults: boolean = false;
-    @observable public _pageNum: number = 0;
-    //temp
-    @observable public _maxNum: number = 10;
+    @observable private _visibleElements: JSX.Element[] = [];
+
+    private resultsRef = React.createRef<HTMLDivElement>();
+
+    private _isSearch: ("search" | "placeholder" | undefined)[] = [];
+    private _numTotalResults = -1;
+    private _endIndex = -1;
 
     static Instance: SearchBox;
 
+    private _maxSearchIndex: number = 0;
+    private _curRequest?: Promise<any> = undefined;
+
     constructor(props: any) {
         super(props);
 
         SearchBox.Instance = this;
+        this.resultsScrolled = this.resultsScrolled.bind(this);
     }
 
     @action
@@ -49,15 +58,16 @@ export class SearchBox extends React.Component {
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
         this._searchString = e.target.value;
 
-        if (this._searchString === "") {
-            this._results = [];
-            this._openNoResults = false;
-        }
+        this._openNoResults = false;
+        this._results = [];
+        this._visibleElements = [];
+        this._numTotalResults = -1;
+        this._endIndex = -1;
+        this._curRequest = undefined;
+        this._maxSearchIndex = 0;
     }
 
-    enter = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") { this.submitSearch(); }
-    }
+    enter = (e: React.KeyboardEvent) => { if (e.key === "Enter") { this.submitSearch(); } }
 
     public static async convertDataUri(imageUri: string, returnedFilename: string) {
         try {
@@ -78,38 +88,70 @@ export class SearchBox extends React.Component {
 
     @action
     submitSearch = async () => {
-        let query = this._searchString; // searchbox gets query
-        let results: Doc[];
-
+        let query = this._searchString;
         query = FilterBox.Instance.getFinalQuery(query);
+        this._results = [];
+        this._isSearch = [];
+        this._visibleElements = [];
 
         //if there is no query there should be no result
         if (query === "") {
-            results = [];
+            return;
         }
         else {
-            //gets json result into a list of documents that can be used
-            //these are filtered by type
-            results = await this.getResults(query);
+            this._endIndex = 12;
+            this._maxSearchIndex = 0;
+            this._numTotalResults = -1;
+            await this.getResults(query);
         }
 
         runInAction(() => {
             this._resultsOpen = true;
-            this._results = results;
             this._openNoResults = true;
+            this.resultsScrolled();
         });
     }
 
-    @action
+    getAllResults = async (query: string) => {
+        return SearchUtil.Search(query, true, 0, 10000000);
+    }
+
+
+    private lockPromise?: Promise<void>;
     getResults = async (query: string) => {
-        const { docs } = await SearchUtil.Search(query, true);
-        return FilterBox.Instance.filterDocsByType(docs);
+        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;
+                    }
+
+                    let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs);
+                    this._results.push(...filteredDocs);
+
+                    this._curRequest = undefined;
+                }));
+                this._maxSearchIndex += 10;
+
+                await this._curRequest;
+            }
+            this.resultsScrolled();
+            res();
+        });
+        return this.lockPromise;
     }
 
     collectionRef = React.createRef<HTMLSpanElement>();
     startDragCollection = async () => {
-        const results = await this.getResults(FilterBox.Instance.getFinalQuery(this._searchString));
-        const docs = results.map(doc => {
+        let res = await this.getAllResults(FilterBox.Instance.getFinalQuery(this._searchString));
+        let filtered = FilterBox.Instance.filterDocsByType(res.docs);
+        // console.log(this._results)
+        const docs = filtered.map(doc => {
             const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
             if (isProto) {
                 return Doc.MakeDelegate(doc);
@@ -142,6 +184,7 @@ export class SearchBox extends React.Component {
             }
         }
         return Docs.Create.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` });
+
     }
 
     @action.bound
@@ -155,7 +198,6 @@ export class SearchBox extends React.Component {
 
     @action.bound
     closeSearch = () => {
-        console.log("closing search");
         FilterBox.Instance.closeFilter();
         this.closeResults();
     }
@@ -164,6 +206,84 @@ export class SearchBox extends React.Component {
     closeResults() {
         this._resultsOpen = false;
         this._results = [];
+        this._visibleElements = [];
+        this._numTotalResults = -1;
+        this._endIndex = -1;
+        this._curRequest = undefined;
+    }
+
+    @action
+    resultsScrolled = (e?: React.UIEvent<HTMLDivElement>) => {
+        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));
+
+        this._endIndex = endIndex === -1 ? 12 : endIndex;
+
+        if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
+            this._visibleElements = [<div className="no-result">No Search Results</div>];
+            return;
+        }
+
+        if (this._numTotalResults <= this._maxSearchIndex) {
+            this._numTotalResults = this._results.length;
+        }
+
+        // only hit right at the beginning
+        // visibleElements is all of the elements (even the ones you can't see)
+        else if (this._visibleElements.length !== this._numTotalResults) {
+            // undefined until a searchitem is put in there
+            this._visibleElements = Array<JSX.Element>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
+            // indicates if things are placeholders
+            this._isSearch = Array<undefined>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
+        }
+
+        for (let i = 0; i < this._numTotalResults; i++) {
+            //if the index is out of the window then put a placeholder in
+            //should ones that have already been found get set to placeholders?
+            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}`}>Loading...</div>;
+                }
+            }
+            else {
+                if (this._isSearch[i] !== "search") {
+                    let result: Doc | undefined = undefined;
+                    if (i >= this._results.length) {
+                        this.getResults(this._searchString);
+                        if (i < this._results.length) result = this._results[i];
+                        if (result) {
+                            this._visibleElements[i] = <SearchItem doc={result} key={result[Id]} />;
+                            this._isSearch[i] = "search";
+                        }
+                    }
+                    else {
+                        result = this._results[i];
+                        if (result) {
+                            this._visibleElements[i] = <SearchItem doc={result} key={result[Id]} />;
+                            this._isSearch[i] = "search";
+                        }
+                    }
+                }
+            }
+        }
+        if (this._maxSearchIndex >= this._numTotalResults) {
+            this._visibleElements.length = this._results.length;
+            this._isSearch.length = this._results.length;
+        }
+    }
+
+    @computed
+    get resFull() {
+        console.log(this._numTotalResults)
+        return this._numTotalResults <= 8;
+    }
+
+    @computed
+    get resultHeight() {
+        return this._numTotalResults * 70;
     }
 
     render() {
@@ -179,15 +299,12 @@ export class SearchBox extends React.Component {
                     <button className="searchBox-barChild searchBox-submit" onClick={this.submitSearch} onPointerDown={FilterBox.Instance.stopProp}>Submit</button>
                     <button className="searchBox-barChild searchBox-filter" onClick={FilterBox.Instance.openFilter} onPointerDown={FilterBox.Instance.stopProp}>Filter</button>
                 </div>
-                <div className="searchBox-results" style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
-                    {(this._results.length !== 0) ? (
-                        this._results.map(result => <SearchItem doc={result} key={result[Id]} />)
-                    ) :
-                        this._openNoResults ? (<div className="no-result">No Search Results</div>) : null}
+                <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 style={this._results.length !== 0 ? { display: "flex" } : { display: "none" }}>
-                    <Pager />
-                </div> */}
             </div>
         );
     }