aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/SearchUtil.ts8
-rw-r--r--src/client/views/search/SearchBox.tsx77
-rw-r--r--src/client/views/search/SearchItem.scss41
-rw-r--r--src/server/Search.ts5
-rw-r--r--src/server/index.ts8
5 files changed, 109 insertions, 30 deletions
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index 338628960..674eeb1a8 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -14,11 +14,11 @@ export namespace SearchUtil {
numFound: number;
}
- export function Search(query: string, returnDocs: true): Promise<DocSearchResult>;
- export function Search(query: string, returnDocs: false): Promise<IdSearchResult>;
- export async function Search(query: string, returnDocs: boolean) {
+ export function Search(query: string, returnDocs: true, start?: number, count?: number): Promise<DocSearchResult>;
+ export function Search(query: string, returnDocs: false, start?: number, count?: number): Promise<IdSearchResult>;
+ export async function Search(query: string, returnDocs: boolean, start?: number, rows?: number) {
const result: IdSearchResult = JSON.parse(await rp.get(DocServer.prepend("/search"), {
- qs: { query }
+ qs: { query, start, rows }
}));
if (!returnDocs) {
return result;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 1f6835c26..327f9514a 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -26,6 +26,12 @@ export class SearchBox extends React.Component {
@observable public _pageNum: number = 0;
//temp
@observable public _maxNum: number = 10;
+ @observable private _visibleElements: JSX.Element[] = [];
+ @observable private _scrollY: number = 0;
+
+ private _isSearch: ("search" | "placeholder" | undefined)[] = [];
+ private _currentIndex = 0;
+ private _numResults = 0;
static Instance: SearchBox;
@@ -90,25 +96,35 @@ export class SearchBox extends React.Component {
else {
//gets json result into a list of documents that can be used
//these are filtered by type
- results = await this.getResults(query);
+ this._currentIndex = 0;
+ results = await this.getResults(query, 12);
}
runInAction(() => {
this._resultsOpen = true;
this._results = results;
this._openNoResults = true;
+ this.resultsScrolled();
});
}
@action
- getResults = async (query: string) => {
- const { docs } = await SearchUtil.Search(query, true);
- return FilterBox.Instance.filterDocsByType(docs);
+ getResults = async (query: string, count: number) => {
+ let resDocs = [];
+ while (resDocs.length < count) {
+ const { docs, numFound } = await SearchUtil.Search(query, true, count === -1 ? undefined : this._currentIndex, count === -1 ? undefined : this._maxNum);
+ if (numFound !== this._numResults) {
+ this._numResults = numFound;
+ }
+ resDocs.push(...FilterBox.Instance.filterDocsByType(docs));
+ this._currentIndex += this._maxNum;
+ }
+ return resDocs;
}
collectionRef = React.createRef<HTMLSpanElement>();
startDragCollection = async () => {
- const results = await this.getResults(FilterBox.Instance.getFinalQuery(this._searchString));
+ const results = await this.getResults(FilterBox.Instance.getFinalQuery(this._searchString), -1);
const docs = results.map(doc => {
const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
if (isProto) {
@@ -166,6 +182,50 @@ export class SearchBox extends React.Component {
this._results = [];
}
+ resultsScrolled = async (e?: React.UIEvent<HTMLDivElement>) => {
+ let scrollY = e ? e.currentTarget.scrollTop : 0;
+ let buffer = 4;
+ let startIndex = Math.floor(Math.max(0, scrollY / 70 - buffer));
+ let endIndex = Math.ceil(Math.min(this._numResults - 1, startIndex + (560 / 70) + buffer));
+
+ runInAction(() => {
+ if (this._numResults === 0 && this._openNoResults) {
+ this._visibleElements = [<div className="no-result">No Search Results</div>];
+ return;
+ }
+ else if (this._visibleElements.length !== this._numResults) {
+ this._visibleElements = Array<JSX.Element>(this._numResults);
+ this._isSearch = Array<undefined>(this._numResults);
+ }
+ });
+
+ for (let i = 0; i < this._numResults; i++) {
+ if (i < startIndex || i > endIndex) {
+ if (this._isSearch[i] !== "placeholder") {
+ this._isSearch[i] = "placeholder";
+ runInAction(() => {
+ this._visibleElements[i] = <div className="searchBox-placeholder" key={`searchBox-placeholder-${i}`}></div>;
+ });
+ }
+ }
+ else {
+ if (this._isSearch[i] !== "search") {
+ let result: Doc | undefined = undefined;
+ if (i >= this._results.length) {
+ this._results.push(...(await this.getResults(this._searchString, 1)));
+ }
+ result = this._results[i];
+ if (result) {
+ runInAction(() => {
+ this._visibleElements[i] = <SearchItem doc={result!} key={result![Id]} />;
+ });
+ this._isSearch[i] = "search";
+ }
+ }
+ }
+ }
+ }
+
render() {
return (
<div className="searchBox-container">
@@ -178,11 +238,12 @@ export class SearchBox extends React.Component {
style={{ width: this._resultsOpen ? "500px" : "100px" }} />
<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) ? (
+ <div className="searchBox-results" onScroll={this.resultsScrolled} 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}
+ this._openNoResults ? (<div className="no-result">No Search Results</div>) : null} */}
+ {this._visibleElements}
</div>
{/* <div style={this._results.length !== 0 ? { display: "flex" } : { display: "none" }}>
<Pager />
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index fa4c9cb38..c384e3bfc 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -86,21 +86,24 @@
.link-container.item:hover .link-extended {
opacity: 1;
}
-
+
.icon-icons {
- width:50px
+ width: 50px
}
+
.icon-live {
- width:175px;
+ width: 175px;
}
- .icon-icons, .icon-live {
- height:50px;
- margin:auto;
+ .icon-icons,
+ .icon-live {
+ height: 50px;
+ margin: auto;
overflow: hidden;
+
.search-type {
display: inline-block;
- width:100%;
+ width: 100%;
position: absolute;
justify-content: center;
align-items: center;
@@ -112,10 +115,11 @@
overflow: hidden;
img {
- width:100% !important;
- height:auto !important;
+ width: 100% !important;
+ height: auto !important;
}
}
+
.search-type:hover+.search-label {
opacity: 1;
}
@@ -134,16 +138,18 @@
}
.icon-live:hover {
- height:175px;
+ height: 175px;
+
.pdfBox-cont {
img {
- width:100% !important;
+ width: 100% !important;
}
}
}
}
+
.search-info:hover {
- width:60%;
+ width: 60%;
}
}
}
@@ -176,12 +182,19 @@
}
}
+
.search-overview:hover {
z-index: 1;
}
+
+.searchBox-placeholder {
+ min-height: 70px;
+}
+
.collection {
- display:flex;
+ display: flex;
}
+
.collection-item {
- width:35px;
+ width: 35px;
} \ No newline at end of file
diff --git a/src/server/Search.ts b/src/server/Search.ts
index e2a74b737..5a22f7da7 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -18,13 +18,14 @@ export class Search {
}
}
- public async search(query: string, start: number = 0) {
+ public async search(query: string, start: number = 0, rows: number = 10) {
try {
const searchResults = JSON.parse(await rp.get(this.url + "dash/select", {
qs: {
q: query,
fl: "id",
- start: start
+ start,
+ rows,
}
}));
const { docs, numFound } = searchResults.response;
diff --git a/src/server/index.ts b/src/server/index.ts
index bf946fc9f..66fe3c990 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -143,8 +143,12 @@ app.get("/pull", (req, res) =>
// GETTERS
app.get("/search", async (req, res) => {
- let query = req.query.query || "hello";
- let results = await Search.Instance.search(query);
+ const { query, start, rows } = req.query;
+ if (query === undefined) {
+ res.send([]);
+ return;
+ }
+ let results = await Search.Instance.search(query, start, rows);
res.send(results);
});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-28 01:44:37 +0000