From ad0152df3d50d18d760570930db4da5aae849d2f Mon Sep 17 00:00:00 2001 From: monikahedman Date: Fri, 5 Jul 2019 17:33:58 -0400 Subject: small fixes --- src/client/views/pdf/PDFViewer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 8af29110f..581237287 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -229,12 +229,13 @@ export class Viewer extends React.Component { } } + @action makeAnnotationDocument = (sourceDoc: Doc | undefined, s: number, color: string): Doc => { let annoDocs: Doc[] = []; let mainAnnoDoc = Docs.CreateInstance(new Doc(), "", {}); mainAnnoDoc.title = "Annotation on " + StrCast(this.props.parent.Document.title); - mainAnnoDoc.pdfDoc = this.props.parent.Document; + mainAnnoDoc.pdfDoc = this.props.parent.props.Document; let minY = Number.MAX_VALUE; this._savedAnnotations.forEach((key: number, value: HTMLDivElement[]) => { for (let anno of value) { -- cgit v1.2.3-70-g09d2 From c3d4b851d81d42256b972a6b8eaa9c9210232953 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Sat, 6 Jul 2019 14:52:53 -0400 Subject: free cookies! --- src/client/util/SearchUtil.ts | 8 ++-- src/client/views/search/SearchBox.tsx | 77 +++++++++++++++++++++++++++++---- src/client/views/search/SearchItem.scss | 41 ++++++++++++------ src/server/Search.ts | 5 ++- src/server/index.ts | 8 +++- 5 files changed, 109 insertions(+), 30 deletions(-) (limited to 'src') 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; - export function Search(query: string, returnDocs: false): Promise; - export async function Search(query: string, returnDocs: boolean) { + export function Search(query: string, returnDocs: true, start?: number, count?: number): Promise; + export function Search(query: string, returnDocs: false, start?: number, count?: number): Promise; + 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(); 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) => { + 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 = [
No Search Results
]; + return; + } + else if (this._visibleElements.length !== this._numResults) { + this._visibleElements = Array(this._numResults); + this._isSearch = Array(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] =
; + }); + } + } + 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] = ; + }); + this._isSearch[i] = "search"; + } + } + } + } + } + render() { return (
@@ -178,11 +238,12 @@ export class SearchBox extends React.Component { style={{ width: this._resultsOpen ? "500px" : "100px" }} />
-
- {(this._results.length !== 0) ? ( +
+ {/* {(this._results.length !== 0) ? ( this._results.map(result => ) ) : - this._openNoResults ? (
No Search Results
) : null} + this._openNoResults ? (
No Search Results
) : null} */} + {this._visibleElements}
{/*
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); }); -- cgit v1.2.3-70-g09d2 From 6cc2335bc6d318ec780bdaecfbad4e047a7b5ac9 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Mon, 8 Jul 2019 18:49:40 -0400 Subject: end of day 7/8 --- src/client/views/pdf/PDFMenu.tsx | 12 ++-- src/client/views/search/FilterBox.tsx | 2 +- src/client/views/search/SearchBox.tsx | 115 +++++++++++++++++++++++----------- 3 files changed, 86 insertions(+), 43 deletions(-) (limited to 'src') diff --git a/src/client/views/pdf/PDFMenu.tsx b/src/client/views/pdf/PDFMenu.tsx index f93b2e59f..b979a9932 100644 --- a/src/client/views/pdf/PDFMenu.tsx +++ b/src/client/views/pdf/PDFMenu.tsx @@ -242,24 +242,24 @@ export default class PDFMenu extends React.Component { render() { let buttons = this.Status === "pdf" || this.Status === "snippet" ? [ - , - , + , this.Status === "snippet" ? : undefined, - ] : [ - , - , + , + ,
, - , + , ]; return ( diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx index 23a1b31d8..4c74c0413 100644 --- a/src/client/views/search/FilterBox.tsx +++ b/src/client/views/search/FilterBox.tsx @@ -242,7 +242,7 @@ export class FilterBox extends React.Component { let finalDocs: Doc[] = []; docs.forEach(doc => { let layoutresult = Cast(doc.type, "string"); - if (!layoutresult || this._icons.includes(layoutresult)) { + if (layoutresult && this._icons.includes(layoutresult)) { finalDocs.push(doc); } }); diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 327f9514a..430ca3b2e 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -15,6 +15,7 @@ import { Id } from '../../../new_fields/FieldSymbols'; import { SearchUtil } from '../../util/SearchUtil'; import { RouteStore } from '../../../server/RouteStore'; import { FilterBox } from './FilterBox'; +import { start } from 'repl'; @observer export class SearchBox extends React.Component { @@ -31,7 +32,10 @@ export class SearchBox extends React.Component { private _isSearch: ("search" | "placeholder" | undefined)[] = []; private _currentIndex = 0; - private _numResults = 0; + private _numTotalResults = 0; + private _numFilteredResults = 0; + private _startIndex = -1; + private _endIndex = -1; static Instance: SearchBox; @@ -55,15 +59,16 @@ export class SearchBox extends React.Component { onChange(e: React.ChangeEvent) { this._searchString = e.target.value; - if (this._searchString === "") { - this._results = []; - this._openNoResults = false; - } + this._openNoResults = false; + this._results = []; + this._visibleElements = []; + this._currentIndex = 0; + this._numTotalResults = 0; + this._startIndex = -1; + this._endIndex = -1; } - 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 { @@ -111,13 +116,30 @@ export class SearchBox extends React.Component { @action getResults = async (query: string, count: number) => { let resDocs = []; + // count is total number of documents to be shown (i believe) + console.log(`Count: ${count}`); 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; + let index = count === -1 ? undefined : this._currentIndex; + let num = count === -1 ? undefined : Math.min(this._numTotalResults - this._currentIndex + 1, this._maxNum); + // num found has to be the number of docs before filtering happens - this is the total num + const { docs, numFound } = await SearchUtil.Search(query, true, index, num); + // accounts for the fact that there may be fewer documents than the max that are returned + let filteredDocs = FilterBox.Instance.filterDocsByType(docs); + count = Math.min(numFound, count); + // uh what is going on here with the first part? + if (numFound !== this._numTotalResults && this._numTotalResults === 0) { + console.log(`Total: ${numFound}`); + this._numTotalResults = numFound; } - resDocs.push(...FilterBox.Instance.filterDocsByType(docs)); - this._currentIndex += this._maxNum; + + // if (filteredDocs.length < docs.length) { + // this._numResults -= docs.length - filteredDocs.length; + // console.log(`New Total: ${this._numResults}`); + // } + resDocs.push(...filteredDocs); + this._currentIndex += docs.length; + console.log(`ResDocs: ${resDocs.length}`); + console.log(`CurrIndex: ${this._currentIndex}`); } return resDocs; } @@ -171,7 +193,7 @@ export class SearchBox extends React.Component { @action.bound closeSearch = () => { - console.log("closing search"); + console.log("closing search") FilterBox.Instance.closeFilter(); this.closeResults(); } @@ -180,46 +202,67 @@ export class SearchBox extends React.Component { closeResults() { this._resultsOpen = false; this._results = []; + this._visibleElements = []; + this._currentIndex = 0; + this._numTotalResults = 0; + this._startIndex = -1; + this._endIndex = -1; } + @action resultsScrolled = async (e?: React.UIEvent) => { 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)); + let endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (560 / 70) + buffer)); - runInAction(() => { - if (this._numResults === 0 && this._openNoResults) { - this._visibleElements = [
No Search Results
]; - return; - } - else if (this._visibleElements.length !== this._numResults) { - this._visibleElements = Array(this._numResults); - this._isSearch = Array(this._numResults); - } - }); + if (startIndex === this._startIndex && endIndex === this._endIndex) { + return; + } + + console.log(`START: ${startIndex}`); + console.log(`END: ${endIndex}`); + + this._startIndex = startIndex; + this._endIndex = endIndex; + + if (this._numTotalResults === 0 && this._openNoResults) { + this._visibleElements = [
No Search Results
]; + return; + } - for (let i = 0; i < this._numResults; i++) { + else if (this._visibleElements.length !== this._numTotalResults) { + this._visibleElements = Array(this._numTotalResults); + this._isSearch = Array(this._numTotalResults); + } + + for (let i = 0; i < this._numTotalResults; i++) { if (i < startIndex || i > endIndex) { if (this._isSearch[i] !== "placeholder") { this._isSearch[i] = "placeholder"; - runInAction(() => { - this._visibleElements[i] =
; - }); + this._visibleElements[i] =
; } } 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) { + let results = await this.getResults(this._searchString, i - this._results.length) runInAction(() => { - this._visibleElements[i] = ; - }); - this._isSearch[i] = "search"; + this._results.push(...results); + result = this._results[i]; + if (result) { + this._visibleElements[i] = ; + this._isSearch[i] = "search"; + } + }) + } + else { + result = this._results[i]; + if (result) { + this._visibleElements[i] = ; + this._isSearch[i] = "search"; + } } } } -- cgit v1.2.3-70-g09d2 From 701509141f793d4c7335771ade8a7b1dae49985a Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 10 Jul 2019 16:14:13 -0400 Subject: bout to do something cray --- src/client/views/search/SearchBox.tsx | 137 ++++++++++++++++++++++++++++++---- 1 file changed, 121 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 430ca3b2e..296d2ccc8 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 } from 'mobx'; import "./SearchBox.scss"; import "./FilterBox.scss"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -33,9 +33,9 @@ export class SearchBox extends React.Component { private _isSearch: ("search" | "placeholder" | undefined)[] = []; private _currentIndex = 0; private _numTotalResults = 0; - private _numFilteredResults = 0; private _startIndex = -1; private _endIndex = -1; + private _fetchedIndices: number[] = [0]; static Instance: SearchBox; @@ -43,6 +43,7 @@ export class SearchBox extends React.Component { super(props); SearchBox.Instance = this; + this.resultsScrolled = this.resultsScrolled.bind(this); } @action @@ -123,10 +124,13 @@ export class SearchBox extends React.Component { let num = count === -1 ? undefined : Math.min(this._numTotalResults - this._currentIndex + 1, this._maxNum); // num found has to be the number of docs before filtering happens - this is the total num const { docs, numFound } = await SearchUtil.Search(query, true, index, num); - // accounts for the fact that there may be fewer documents than the max that are returned + let filteredDocs = FilterBox.Instance.filterDocsByType(docs); + + // accounts for the fact that there may be fewer documents than the max that are returned count = Math.min(numFound, count); - // uh what is going on here with the first part? + + // happens at the beginning if (numFound !== this._numTotalResults && this._numTotalResults === 0) { console.log(`Total: ${numFound}`); this._numTotalResults = numFound; @@ -137,13 +141,104 @@ export class SearchBox extends React.Component { // console.log(`New Total: ${this._numResults}`); // } resDocs.push(...filteredDocs); + this._currentIndex += docs.length; + console.log(`ResDocs: ${resDocs.length}`); console.log(`CurrIndex: ${this._currentIndex}`); } + console.log(this.getResults2(query, count, [])); return resDocs; } + @action + getResults2 = async (query: string, count: number, docs?: Doc[]) => { + console.log("results 2") + let buffer = 4; + // let goalIndex = this._endIndex + count; + // let bottomBound = Math.floor(goalIndex / 10) * 10; + let tempIndex = this._currentIndex; + let goalNum = this._endIndex + buffer; + let resDocs: Doc[]; + + if (docs) { + resDocs = docs; + } else { + resDocs = []; + } + + // let topBound = bottomBound - 10; + // let unfilteredDocs: Doc[]; + // let unfilteredFound: number; + // means this has already been fetched + // if (this._fetchedIndices.includes(topBound)) { + // return; + // } + + let index = count <= 0 ? undefined : this._currentIndex; + if (index) { + let topBound = Math.ceil(index / 10) * 10; + if (this._fetchedIndices.includes(topBound)) { + return; + } + let startIndex = this._fetchedIndices[this._fetchedIndices.length - 1]; + let endIndex = startIndex + 10; + this._fetchedIndices.push(endIndex); + console.log(this._fetchedIndices) + let prom: Promise = SearchUtil.Search(query, true, index, 10); + + prom.then((res: SearchUtil.DocSearchResult) => { + count = Math.min(res.numFound, count); + console.log(res.docs); + let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs); + + if (res.numFound !== this._numTotalResults && this._numTotalResults === 0) { + this._numTotalResults = res.numFound; + } + + resDocs.push(...filteredDocs); + + tempIndex += res.docs.length; + + if (filteredDocs.length <= count) { + runInAction(() => { + return this.getResults2(query, count - filteredDocs.length, resDocs); + }); + } + else { + return resDocs; + } + console.log(tempIndex); + console.log(resDocs.length); + }) + + } + //this is the upper bound of the last + // let index = this._fetchedIndices[this._fetchedIndices.length - 1]; + // let prom: Promise = SearchUtil.Search(query, true, index, 10); + + // prom.then((res: SearchUtil.DocSearchResult) => { + // // unfilteredDocs = res.docs; + // // unfilteredFound = res.numFound; + + // count = Math.min(res.numFound, count); + // let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs); + + // if (res.numFound !== this._numTotalResults && this._numTotalResults === 0) { + // console.log(`Total: ${res.numFound}`); + // this._numTotalResults = res.numFound; + // } + + // resDocs.push(...filteredDocs); + + // this._currentIndex += res.docs.length; + // }) + + // console.log(prom); + + + } + collectionRef = React.createRef(); startDragCollection = async () => { const results = await this.getResults(FilterBox.Instance.getFinalQuery(this._searchString), -1); @@ -209,8 +304,7 @@ export class SearchBox extends React.Component { this._endIndex = -1; } - @action - resultsScrolled = async (e?: React.UIEvent) => { + resultsScrolled = flow(function* (this: SearchBox, e?: React.UIEvent) { let scrollY = e ? e.currentTarget.scrollTop : 0; let buffer = 4; let startIndex = Math.floor(Math.max(0, scrollY / 70 - buffer)); @@ -222,6 +316,7 @@ export class SearchBox extends React.Component { console.log(`START: ${startIndex}`); console.log(`END: ${endIndex}`); + console.log("_________________________________________________________________________________________________________") this._startIndex = startIndex; this._endIndex = endIndex; @@ -231,12 +326,18 @@ export class SearchBox extends React.Component { return; } + // 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(this._numTotalResults); + // indicates if things are placeholders this._isSearch = Array(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"; @@ -247,15 +348,19 @@ export class SearchBox extends React.Component { if (this._isSearch[i] !== "search") { let result: Doc | undefined = undefined; if (i >= this._results.length) { - let results = await this.getResults(this._searchString, i - this._results.length) - runInAction(() => { - this._results.push(...results); - result = this._results[i]; - if (result) { - this._visibleElements[i] = ; - this._isSearch[i] = "search"; - } - }) + // _________________________________________________________________________________________________ + let results: Doc[] = yield this.getResults(this._searchString, i + 1 - this._results.length); + if (results.length !== 0) { + runInAction(() => { + this._results.push(...results); + result = this._results[i]; + if (result) { + this._visibleElements[i] = ; + this._isSearch[i] = "search"; + } + }); + } + // _________________________________________________________________________________________________ } else { result = this._results[i]; @@ -267,7 +372,7 @@ export class SearchBox extends React.Component { } } } - } + }); render() { return ( -- cgit v1.2.3-70-g09d2 From a2e762e4a85eca92401394afe7dbc03db5a5b473 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 10 Jul 2019 18:17:14 -0400 Subject: hate this --- src/client/views/search/SearchBox.tsx | 55 +++++++++++++++-------------------- 1 file changed, 23 insertions(+), 32 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 296d2ccc8..db6f69ccb 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -65,8 +65,8 @@ export class SearchBox extends React.Component { this._visibleElements = []; this._currentIndex = 0; this._numTotalResults = 0; - this._startIndex = -1; - this._endIndex = -1; + this._startIndex = 0; + this._endIndex = 12; } enter = (e: React.KeyboardEvent) => { if (e.key === "Enter") { this.submitSearch(); } } @@ -144,28 +144,21 @@ export class SearchBox extends React.Component { this._currentIndex += docs.length; - console.log(`ResDocs: ${resDocs.length}`); + // console.log(`ResDocs: ${resDocs.length}`); console.log(`CurrIndex: ${this._currentIndex}`); } - console.log(this.getResults2(query, count, [])); + // console.log(this.getResults2(query, count, [])); return resDocs; } @action - getResults2 = async (query: string, count: number, docs?: Doc[]) => { - console.log("results 2") - let buffer = 4; + getResults2 = async (query: string, count: number, docs: Doc[]) => { + // let buffer = 4; // let goalIndex = this._endIndex + count; // let bottomBound = Math.floor(goalIndex / 10) * 10; - let tempIndex = this._currentIndex; - let goalNum = this._endIndex + buffer; - let resDocs: Doc[]; - - if (docs) { - resDocs = docs; - } else { - resDocs = []; - } + // let tempIndex = this._currentIndex; + // let goalNum = this._endIndex + buffer; + let resDocs: Doc[] = docs; // let topBound = bottomBound - 10; // let unfilteredDocs: Doc[]; @@ -176,10 +169,12 @@ export class SearchBox extends React.Component { // } let index = count <= 0 ? undefined : this._currentIndex; + // let index = this._currentIndex; if (index) { let topBound = Math.ceil(index / 10) * 10; if (this._fetchedIndices.includes(topBound)) { - return; + // console.log("returning NOTHING") + return resDocs; } let startIndex = this._fetchedIndices[this._fetchedIndices.length - 1]; let endIndex = startIndex + 10; @@ -198,21 +193,17 @@ export class SearchBox extends React.Component { resDocs.push(...filteredDocs); - tempIndex += res.docs.length; + this._currentIndex += res.docs.length; - if (filteredDocs.length <= count) { - runInAction(() => { - return this.getResults2(query, count - filteredDocs.length, resDocs); - }); - } - else { - return resDocs; + if (resDocs.length < count) { + return this.getResults2(query, count - resDocs.length, resDocs); + // resDocs = await this.getResults2(query, count - filteredDocs.length, resDocs); } - console.log(tempIndex); - console.log(resDocs.length); - }) + return resDocs; + }) } + return resDocs; //this is the upper bound of the last // let index = this._fetchedIndices[this._fetchedIndices.length - 1]; // let prom: Promise = SearchUtil.Search(query, true, index, 10); @@ -300,8 +291,8 @@ export class SearchBox extends React.Component { this._visibleElements = []; this._currentIndex = 0; this._numTotalResults = 0; - this._startIndex = -1; - this._endIndex = -1; + this._startIndex = 0; + this._endIndex = 12; } resultsScrolled = flow(function* (this: SearchBox, e?: React.UIEvent) { @@ -316,8 +307,6 @@ export class SearchBox extends React.Component { console.log(`START: ${startIndex}`); console.log(`END: ${endIndex}`); - console.log("_________________________________________________________________________________________________________") - this._startIndex = startIndex; this._endIndex = endIndex; @@ -350,6 +339,7 @@ export class SearchBox extends React.Component { if (i >= this._results.length) { // _________________________________________________________________________________________________ let results: Doc[] = yield this.getResults(this._searchString, i + 1 - this._results.length); + console.log(results) if (results.length !== 0) { runInAction(() => { this._results.push(...results); @@ -372,6 +362,7 @@ export class SearchBox extends React.Component { } } } + console.log("_________________________________________________________________________________________________________") }); render() { -- cgit v1.2.3-70-g09d2 From 8888e3aef8658e4100e2fc4bee6b805e7b0feaa9 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 10 Jul 2019 20:31:57 -0400 Subject: dear god i hate this --- src/client/views/search/SearchBox.tsx | 173 +++++++++++++++++----------------- 1 file changed, 87 insertions(+), 86 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index db6f69ccb..1980ddaf2 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -39,6 +39,8 @@ export class SearchBox extends React.Component { static Instance: SearchBox; + private _maxSearchIndex: number = 0; + constructor(props: any) { super(props); @@ -65,8 +67,8 @@ export class SearchBox extends React.Component { this._visibleElements = []; this._currentIndex = 0; this._numTotalResults = 0; - this._startIndex = 0; - this._endIndex = 12; + this._startIndex = -1; + this._endIndex = -1; } enter = (e: React.KeyboardEvent) => { if (e.key === "Enter") { this.submitSearch(); } } @@ -114,6 +116,25 @@ export class SearchBox extends React.Component { }); } + getResultsHelp = async (query: string) => { + // docs length = this._results.length --> number of docs that are shown (after filtering) + // stops looking once this._results.length >= maxDisplayIndex + // max search index = number of results looked through in solr (solr index) --> increments of 10 + // max display index = number of documents that SHOULD be shown (should include buffer), this._endIndex + buffer (= 4) + // currentRequest = promise | undefined, if undefined, can run and look for more. If not undefined, then there is a request in progress and it cannot look for more yet + + let buffer = 4; + let maxDisplayIndex: number = this._endIndex + buffer; + let curRequest = undefined; + + + while (this._results.length < maxDisplayIndex) { + if (curRequest === undefined) { + + } + } + } + @action getResults = async (query: string, count: number) => { let resDocs = []; @@ -144,91 +165,72 @@ export class SearchBox extends React.Component { this._currentIndex += docs.length; - // console.log(`ResDocs: ${resDocs.length}`); + console.log(`ResDocs: ${resDocs.length}`); console.log(`CurrIndex: ${this._currentIndex}`); } // console.log(this.getResults2(query, count, [])); return resDocs; } - @action - getResults2 = async (query: string, count: number, docs: Doc[]) => { - // let buffer = 4; - // let goalIndex = this._endIndex + count; - // let bottomBound = Math.floor(goalIndex / 10) * 10; - // let tempIndex = this._currentIndex; - // let goalNum = this._endIndex + buffer; - let resDocs: Doc[] = docs; - - // let topBound = bottomBound - 10; - // let unfilteredDocs: Doc[]; - // let unfilteredFound: number; - // means this has already been fetched - // if (this._fetchedIndices.includes(topBound)) { - // return; - // } - - let index = count <= 0 ? undefined : this._currentIndex; - // let index = this._currentIndex; - if (index) { - let topBound = Math.ceil(index / 10) * 10; - if (this._fetchedIndices.includes(topBound)) { - // console.log("returning NOTHING") - return resDocs; - } - let startIndex = this._fetchedIndices[this._fetchedIndices.length - 1]; - let endIndex = startIndex + 10; - this._fetchedIndices.push(endIndex); - console.log(this._fetchedIndices) - let prom: Promise = SearchUtil.Search(query, true, index, 10); - - prom.then((res: SearchUtil.DocSearchResult) => { - count = Math.min(res.numFound, count); - console.log(res.docs); - let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs); - - if (res.numFound !== this._numTotalResults && this._numTotalResults === 0) { - this._numTotalResults = res.numFound; - } - - resDocs.push(...filteredDocs); - - this._currentIndex += res.docs.length; - - if (resDocs.length < count) { - return this.getResults2(query, count - resDocs.length, resDocs); - // resDocs = await this.getResults2(query, count - filteredDocs.length, resDocs); - } - - return resDocs; - }) - } - return resDocs; - //this is the upper bound of the last - // let index = this._fetchedIndices[this._fetchedIndices.length - 1]; - // let prom: Promise = SearchUtil.Search(query, true, index, 10); - - // prom.then((res: SearchUtil.DocSearchResult) => { - // // unfilteredDocs = res.docs; - // // unfilteredFound = res.numFound; - - // count = Math.min(res.numFound, count); - // let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs); - - // if (res.numFound !== this._numTotalResults && this._numTotalResults === 0) { - // console.log(`Total: ${res.numFound}`); - // this._numTotalResults = res.numFound; - // } - - // resDocs.push(...filteredDocs); - - // this._currentIndex += res.docs.length; - // }) - - // console.log(prom); - - - } + // @action + // getResults2 = async (query: string, count: number, docs: Doc[]) => { + // console.log("results 2") + // let buffer = 4; + // // let goalIndex = this._endIndex + count; + // // let bottomBound = Math.floor(goalIndex / 10) * 10; + // let tempIndex = this._currentIndex; + // let goalNum = this._endIndex + buffer; + // let resDocs: Doc[] = docs; + + // // let topBound = bottomBound - 10; + // // let unfilteredDocs: Doc[]; + // // let unfilteredFound: number; + // // means this has already been fetched + // // if (this._fetchedIndices.includes(topBound)) { + // // return; + // // } + + // let index = count <= 0 ? undefined : this._currentIndex; + // if (index) { + // let topBound = Math.ceil(index / 10) * 10; + // if (this._fetchedIndices.includes(topBound)) { + // return; + // } + // let startIndex = this._fetchedIndices[this._fetchedIndices.length - 1]; + // let endIndex = startIndex + 10; + // this._fetchedIndices.push(endIndex); + // console.log(this._fetchedIndices) + // let prom: Promise = SearchUtil.Search(query, true, index, 10); + + // prom.then((res: SearchUtil.DocSearchResult) => { + // count = Math.min(res.numFound, count); + // console.log(res.docs); + // let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs); + + // if (res.numFound !== this._numTotalResults && this._numTotalResults === 0) { + // this._numTotalResults = res.numFound; + // } + + // resDocs.push(...filteredDocs); + + // this._currentIndex += res.docs.length; + + // if (resDocs.length <= count) { + // runInAction(() => { + // return this.getResults2(query, count, resDocs); + // }); + // } + // else { + // return resDocs; + // } + // // console.log(tempIndex); + // console.log(resDocs.length); + // }) + + // } + + + // } collectionRef = React.createRef(); startDragCollection = async () => { @@ -291,8 +293,8 @@ export class SearchBox extends React.Component { this._visibleElements = []; this._currentIndex = 0; this._numTotalResults = 0; - this._startIndex = 0; - this._endIndex = 12; + this._startIndex = -1; + this._endIndex = -1; } resultsScrolled = flow(function* (this: SearchBox, e?: React.UIEvent) { @@ -304,9 +306,10 @@ export class SearchBox extends React.Component { if (startIndex === this._startIndex && endIndex === this._endIndex) { return; } - + console.log("_________________________________________________________________________________________________________") console.log(`START: ${startIndex}`); console.log(`END: ${endIndex}`); + this._startIndex = startIndex; this._endIndex = endIndex; @@ -339,7 +342,6 @@ export class SearchBox extends React.Component { if (i >= this._results.length) { // _________________________________________________________________________________________________ let results: Doc[] = yield this.getResults(this._searchString, i + 1 - this._results.length); - console.log(results) if (results.length !== 0) { runInAction(() => { this._results.push(...results); @@ -362,7 +364,6 @@ export class SearchBox extends React.Component { } } } - console.log("_________________________________________________________________________________________________________") }); render() { -- cgit v1.2.3-70-g09d2 From 341d173db8f1580f49dc4e9ff429b72d88da16b4 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Thu, 11 Jul 2019 18:01:35 -0400 Subject: end of day 7/11 ho boy we got problems --- src/client/views/search/SearchBox.tsx | 182 +++++++++++++++++++++++----------- 1 file changed, 126 insertions(+), 56 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 1980ddaf2..0816bb9de 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -40,6 +40,7 @@ export class SearchBox extends React.Component { static Instance: SearchBox; private _maxSearchIndex: number = 0; + private _curRequest: Promise | undefined = undefined; constructor(props: any) { super(props); @@ -69,6 +70,8 @@ export class SearchBox extends React.Component { this._numTotalResults = 0; this._startIndex = -1; this._endIndex = -1; + this._curRequest = undefined; + this._maxSearchIndex = 0; } enter = (e: React.KeyboardEvent) => { if (e.key === "Enter") { this.submitSearch(); } } @@ -97,20 +100,43 @@ export class SearchBox extends React.Component { query = FilterBox.Instance.getFinalQuery(query); + // if (this._curRequest !== undefined) { + // this._curRequest.then(() => { + // this._curRequest = undefined; + // this._results = []; + // }); + // } + + // this._results = []; + //if there is no query there should be no result if (query === "") { - results = []; + // results = []; + return; } else { //gets json result into a list of documents that can be used //these are filtered by type + // this._results = []; this._currentIndex = 0; - results = await this.getResults(query, 12); + this._startIndex = 0; + this._endIndex = 12; + // this._curRequest = undefined; + // if (this._curRequest !== undefined) { + // this._curRequest.then(() => { + // this._curRequest = undefined; + // }); + // } + + this._maxSearchIndex = 0; + + // results = await this.getResultsHelp(query); + await this.getResultsHelp(query); } runInAction(() => { this._resultsOpen = true; - this._results = results; + // this._results = results; this._openNoResults = true; this.resultsScrolled(); }); @@ -123,54 +149,85 @@ export class SearchBox extends React.Component { // max display index = number of documents that SHOULD be shown (should include buffer), this._endIndex + buffer (= 4) // currentRequest = promise | undefined, if undefined, can run and look for more. If not undefined, then there is a request in progress and it cannot look for more yet - let buffer = 4; - let maxDisplayIndex: number = this._endIndex + buffer; - let curRequest = undefined; + // let buffer = 4; + // let maxDisplayIndex: number = this._endIndex + buffer; + console.log(`end index: ${this._endIndex}`) + console.log(this._results.length) + + while (this._results.length < this._endIndex) { + console.log("looping") + if (this._curRequest === undefined) { + //start at max search index, get 10, add 10 to max search index + // const { docs, numFound } = await SearchUtil.Search(query, true, this._maxSearchIndex, 10); + // happens at the beginning + // am i gonna need this? + // if (numFound !== this._numTotalResults && this._numTotalResults === 0) { + // this._numTotalResults = numFound; + // } - while (this._results.length < maxDisplayIndex) { - if (curRequest === undefined) { + this._curRequest = SearchUtil.Search(query, true, this._maxSearchIndex, 10); + this._maxSearchIndex += 10; + this._curRequest.then((res: SearchUtil.DocSearchResult) => { + + // happens at the beginning + if (res.numFound !== this._numTotalResults && this._numTotalResults === 0) { + this._numTotalResults = res.numFound; + } + + let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs); + this._results.push(...filteredDocs); + + console.log(this._results) + this._curRequest = undefined; + console.log("setting to undefined") + }); + + //deals with if there are fewer results than can be scrolled through + // if (this._numTotalResults < this._endIndex) { + // break; + // } } } } - @action - getResults = async (query: string, count: number) => { - let resDocs = []; - // count is total number of documents to be shown (i believe) - console.log(`Count: ${count}`); - while (resDocs.length < count) { - let index = count === -1 ? undefined : this._currentIndex; - let num = count === -1 ? undefined : Math.min(this._numTotalResults - this._currentIndex + 1, this._maxNum); - // num found has to be the number of docs before filtering happens - this is the total num - const { docs, numFound } = await SearchUtil.Search(query, true, index, num); - - let filteredDocs = FilterBox.Instance.filterDocsByType(docs); - - // accounts for the fact that there may be fewer documents than the max that are returned - count = Math.min(numFound, count); - - // happens at the beginning - if (numFound !== this._numTotalResults && this._numTotalResults === 0) { - console.log(`Total: ${numFound}`); - this._numTotalResults = numFound; - } + // @action + // getResults = async (query: string, count: number) => { + // let resDocs = []; + // // count is total number of documents to be shown (i believe) + // console.log(`Count: ${count}`); + // while (resDocs.length < count) { + // let index = count === -1 ? undefined : this._currentIndex; + // let num = count === -1 ? undefined : Math.min(this._numTotalResults - this._currentIndex + 1, this._maxNum); + // // num found has to be the number of docs before filtering happens - this is the total num + // const { docs, numFound } = await SearchUtil.Search(query, true, index, num); + + // let filteredDocs = FilterBox.Instance.filterDocsByType(docs); + + // // accounts for the fact that there may be fewer documents than the max that are returned + // count = Math.min(numFound, count); + + // // happens at the beginning + // if (numFound !== this._numTotalResults && this._numTotalResults === 0) { + // console.log(`Total: ${numFound}`); + // this._numTotalResults = numFound; + // } - // if (filteredDocs.length < docs.length) { - // this._numResults -= docs.length - filteredDocs.length; - // console.log(`New Total: ${this._numResults}`); - // } - resDocs.push(...filteredDocs); + // // if (filteredDocs.length < docs.length) { + // // this._numResults -= docs.length - filteredDocs.length; + // // console.log(`New Total: ${this._numResults}`); + // // } + // resDocs.push(...filteredDocs); - this._currentIndex += docs.length; + // this._currentIndex += docs.length; - console.log(`ResDocs: ${resDocs.length}`); - console.log(`CurrIndex: ${this._currentIndex}`); - } - // console.log(this.getResults2(query, count, [])); - return resDocs; - } + // console.log(`ResDocs: ${resDocs.length}`); + // console.log(`CurrIndex: ${this._currentIndex}`); + // } + // // console.log(this.getResults2(query, count, [])); + // return resDocs; + // } // @action // getResults2 = async (query: string, count: number, docs: Doc[]) => { @@ -234,8 +291,9 @@ export class SearchBox extends React.Component { collectionRef = React.createRef(); startDragCollection = async () => { - const results = await this.getResults(FilterBox.Instance.getFinalQuery(this._searchString), -1); - const docs = results.map(doc => { + // const results = await this.getResults(FilterBox.Instance.getFinalQuery(this._searchString), -1); + await this.getResultsHelp(FilterBox.Instance.getFinalQuery(this._searchString)); + const docs = this._results.map(doc => { const isProto = Doc.GetT(doc, "isPrototype", "boolean", true); if (isProto) { return Doc.MakeDelegate(doc); @@ -295,23 +353,27 @@ export class SearchBox extends React.Component { this._numTotalResults = 0; this._startIndex = -1; this._endIndex = -1; + this._curRequest = undefined; } resultsScrolled = flow(function* (this: SearchBox, e?: React.UIEvent) { + console.log("_________________________________________________________________________________________________________") let scrollY = e ? e.currentTarget.scrollTop : 0; let buffer = 4; + console.log(`start before: ${this._startIndex}`); let startIndex = Math.floor(Math.max(0, scrollY / 70 - buffer)); + console.log(`end before: ${this._endIndex}`); let endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (560 / 70) + buffer)); if (startIndex === this._startIndex && endIndex === this._endIndex) { + console.log("returning") return; } - console.log("_________________________________________________________________________________________________________") console.log(`START: ${startIndex}`); console.log(`END: ${endIndex}`); - this._startIndex = startIndex; - this._endIndex = endIndex; + this._startIndex = startIndex === -1 ? 0 : startIndex; + this._endIndex = endIndex === -1 ? 12 : endIndex; if (this._numTotalResults === 0 && this._openNoResults) { this._visibleElements = [
No Search Results
]; @@ -341,17 +403,25 @@ export class SearchBox extends React.Component { let result: Doc | undefined = undefined; if (i >= this._results.length) { // _________________________________________________________________________________________________ - let results: Doc[] = yield this.getResults(this._searchString, i + 1 - this._results.length); - if (results.length !== 0) { - runInAction(() => { - this._results.push(...results); - result = this._results[i]; - if (result) { - this._visibleElements[i] = ; - this._isSearch[i] = "search"; - } - }); + // let results: Doc[] = yield this.getResults(this._searchString, i + 1 - this._results.length); + + // this updates this._results + yield this.getResultsHelp(this._searchString); + result = this._results[i]; + if (result) { + this._visibleElements[i] = ; + this._isSearch[i] = "search"; } + // if (results.length !== 0) { + // runInAction(() => { + // // this._results.push(...results); + // result = this._results[i]; + // if (result) { + // this._visibleElements[i] = ; + // this._isSearch[i] = "search"; + // } + // }); + // } // _________________________________________________________________________________________________ } else { -- cgit v1.2.3-70-g09d2 From e289ffead09b091fdb40aab47ea4d04ae5935455 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Fri, 12 Jul 2019 15:28:34 -0400 Subject: things almost working yeet yeet --- src/client/views/search/SearchBox.tsx | 190 ++++++++++------------------------ 1 file changed, 54 insertions(+), 136 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 0816bb9de..8e5d317f0 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -16,6 +16,8 @@ import { SearchUtil } from '../../util/SearchUtil'; import { RouteStore } from '../../../server/RouteStore'; import { FilterBox } from './FilterBox'; import { start } from 'repl'; +import { getForkTsCheckerWebpackPluginHooks } from 'fork-ts-checker-webpack-plugin/lib/hooks'; +import { faThumbsDown } from '@fortawesome/free-regular-svg-icons'; @observer export class SearchBox extends React.Component { @@ -32,7 +34,7 @@ export class SearchBox extends React.Component { private _isSearch: ("search" | "placeholder" | undefined)[] = []; private _currentIndex = 0; - private _numTotalResults = 0; + private _numTotalResults = -1; private _startIndex = -1; private _endIndex = -1; private _fetchedIndices: number[] = [0]; @@ -40,7 +42,7 @@ export class SearchBox extends React.Component { static Instance: SearchBox; private _maxSearchIndex: number = 0; - private _curRequest: Promise | undefined = undefined; + private _curRequest?: Promise = undefined; constructor(props: any) { super(props); @@ -67,7 +69,7 @@ export class SearchBox extends React.Component { this._results = []; this._visibleElements = []; this._currentIndex = 0; - this._numTotalResults = 0; + this._numTotalResults = -1; this._startIndex = -1; this._endIndex = -1; this._curRequest = undefined; @@ -121,6 +123,7 @@ export class SearchBox extends React.Component { this._currentIndex = 0; this._startIndex = 0; this._endIndex = 12; + this._results = []; // this._curRequest = undefined; // if (this._curRequest !== undefined) { // this._curRequest.then(() => { @@ -129,6 +132,7 @@ export class SearchBox extends React.Component { // } this._maxSearchIndex = 0; + this._numTotalResults = -1; // results = await this.getResultsHelp(query); await this.getResultsHelp(query); @@ -151,144 +155,58 @@ export class SearchBox extends React.Component { // let buffer = 4; // let maxDisplayIndex: number = this._endIndex + buffer; - console.log(`end index: ${this._endIndex}`) - console.log(this._results.length) + // console.log(`end index: ${this._endIndex}`) + // console.log(this._results.length) + + while (this._results.length < this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) { + console.log("looping"); + //start at max search index, get 10, add 10 to max search index + // const { docs, numFound } = await SearchUtil.Search(query, true, this._maxSearchIndex, 10); + + // happens at the beginning + // am i gonna need this? + // if (numFound !== this._numTotalResults && this._numTotalResults === 0) { + // this._numTotalResults = numFound; + // } - while (this._results.length < this._endIndex) { - console.log("looping") - if (this._curRequest === undefined) { - //start at max search index, get 10, add 10 to max search index - // const { docs, numFound } = await SearchUtil.Search(query, true, this._maxSearchIndex, 10); + let prom: Promise; + 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) => { // happens at the beginning - // am i gonna need this? - // if (numFound !== this._numTotalResults && this._numTotalResults === 0) { - // this._numTotalResults = numFound; - // } + if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) { + this._numTotalResults = res.numFound; + } - this._curRequest = SearchUtil.Search(query, true, this._maxSearchIndex, 10); - this._maxSearchIndex += 10; + let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs); + this._results.push(...filteredDocs); - this._curRequest.then((res: SearchUtil.DocSearchResult) => { + console.log(this._results); + if (prom === this._curRequest) { + this._curRequest = undefined; + } + console.log("setting to undefined"); + })); - // happens at the beginning - if (res.numFound !== this._numTotalResults && this._numTotalResults === 0) { - this._numTotalResults = res.numFound; - } - let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs); - this._results.push(...filteredDocs); - console.log(this._results) - this._curRequest = undefined; - console.log("setting to undefined") - }); + this._curRequest = prom; - //deals with if there are fewer results than can be scrolled through - // if (this._numTotalResults < this._endIndex) { - // break; - // } - } + await prom; + + //deals with if there are fewer results than can be scrolled through + // if (this._numTotalResults < this._endIndex) { + // break; + // } } } - // @action - // getResults = async (query: string, count: number) => { - // let resDocs = []; - // // count is total number of documents to be shown (i believe) - // console.log(`Count: ${count}`); - // while (resDocs.length < count) { - // let index = count === -1 ? undefined : this._currentIndex; - // let num = count === -1 ? undefined : Math.min(this._numTotalResults - this._currentIndex + 1, this._maxNum); - // // num found has to be the number of docs before filtering happens - this is the total num - // const { docs, numFound } = await SearchUtil.Search(query, true, index, num); - - // let filteredDocs = FilterBox.Instance.filterDocsByType(docs); - - // // accounts for the fact that there may be fewer documents than the max that are returned - // count = Math.min(numFound, count); - - // // happens at the beginning - // if (numFound !== this._numTotalResults && this._numTotalResults === 0) { - // console.log(`Total: ${numFound}`); - // this._numTotalResults = numFound; - // } - - // // if (filteredDocs.length < docs.length) { - // // this._numResults -= docs.length - filteredDocs.length; - // // console.log(`New Total: ${this._numResults}`); - // // } - // resDocs.push(...filteredDocs); - - // this._currentIndex += docs.length; - - // console.log(`ResDocs: ${resDocs.length}`); - // console.log(`CurrIndex: ${this._currentIndex}`); - // } - // // console.log(this.getResults2(query, count, [])); - // return resDocs; - // } - - // @action - // getResults2 = async (query: string, count: number, docs: Doc[]) => { - // console.log("results 2") - // let buffer = 4; - // // let goalIndex = this._endIndex + count; - // // let bottomBound = Math.floor(goalIndex / 10) * 10; - // let tempIndex = this._currentIndex; - // let goalNum = this._endIndex + buffer; - // let resDocs: Doc[] = docs; - - // // let topBound = bottomBound - 10; - // // let unfilteredDocs: Doc[]; - // // let unfilteredFound: number; - // // means this has already been fetched - // // if (this._fetchedIndices.includes(topBound)) { - // // return; - // // } - - // let index = count <= 0 ? undefined : this._currentIndex; - // if (index) { - // let topBound = Math.ceil(index / 10) * 10; - // if (this._fetchedIndices.includes(topBound)) { - // return; - // } - // let startIndex = this._fetchedIndices[this._fetchedIndices.length - 1]; - // let endIndex = startIndex + 10; - // this._fetchedIndices.push(endIndex); - // console.log(this._fetchedIndices) - // let prom: Promise = SearchUtil.Search(query, true, index, 10); - - // prom.then((res: SearchUtil.DocSearchResult) => { - // count = Math.min(res.numFound, count); - // console.log(res.docs); - // let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs); - - // if (res.numFound !== this._numTotalResults && this._numTotalResults === 0) { - // this._numTotalResults = res.numFound; - // } - - // resDocs.push(...filteredDocs); - - // this._currentIndex += res.docs.length; - - // if (resDocs.length <= count) { - // runInAction(() => { - // return this.getResults2(query, count, resDocs); - // }); - // } - // else { - // return resDocs; - // } - // // console.log(tempIndex); - // console.log(resDocs.length); - // }) - - // } - - - // } - collectionRef = React.createRef(); startDragCollection = async () => { // const results = await this.getResults(FilterBox.Instance.getFinalQuery(this._searchString), -1); @@ -350,7 +268,7 @@ export class SearchBox extends React.Component { this._results = []; this._visibleElements = []; this._currentIndex = 0; - this._numTotalResults = 0; + this._numTotalResults = -1; this._startIndex = -1; this._endIndex = -1; this._curRequest = undefined; @@ -365,10 +283,10 @@ export class SearchBox extends React.Component { console.log(`end before: ${this._endIndex}`); let endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (560 / 70) + buffer)); - if (startIndex === this._startIndex && endIndex === this._endIndex) { - console.log("returning") - return; - } + // if (startIndex === this._startIndex && endIndex === this._endIndex && this._results.length > this._endIndex) { + // console.log("returning") + // return; + // } console.log(`START: ${startIndex}`); console.log(`END: ${endIndex}`); @@ -384,9 +302,9 @@ export class SearchBox extends React.Component { // 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(this._numTotalResults); + this._visibleElements = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); // indicates if things are placeholders - this._isSearch = Array(this._numTotalResults); + this._isSearch = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); } for (let i = 0; i < this._numTotalResults; i++) { -- cgit v1.2.3-70-g09d2 From 8c82a0fb1310429a973b536d5e0c25c3749d7e14 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Fri, 12 Jul 2019 17:03:59 -0400 Subject: send help --- deploy/index.html | 1 - src/client/views/search/FilterBox.tsx | 3 +++ 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/deploy/index.html b/deploy/index.html index f4a019b71..532b995f8 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -6,7 +6,6 @@ - diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx index 4c74c0413..5aa3e9509 100644 --- a/src/client/views/search/FilterBox.tsx +++ b/src/client/views/search/FilterBox.tsx @@ -239,6 +239,9 @@ export class FilterBox extends React.Component { @action filterDocsByType(docs: Doc[]) { + if (this._icons.length === 9) { + return docs; + } let finalDocs: Doc[] = []; docs.forEach(doc => { let layoutresult = Cast(doc.type, "string"); -- cgit v1.2.3-70-g09d2 From 00a9a169679baa011c66b28152ff27dec2532907 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Fri, 12 Jul 2019 18:15:31 -0400 Subject: end of day 7/12 --- src/client/views/search/SearchBox.tsx | 175 +++++++++++----------------------- 1 file changed, 54 insertions(+), 121 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 8e5d317f0..e5280fe8c 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -30,14 +30,12 @@ export class SearchBox extends React.Component { //temp @observable public _maxNum: number = 10; @observable private _visibleElements: JSX.Element[] = []; - @observable private _scrollY: number = 0; + // @observable private _sc rollY: number = 0; private _isSearch: ("search" | "placeholder" | undefined)[] = []; - private _currentIndex = 0; private _numTotalResults = -1; private _startIndex = -1; private _endIndex = -1; - private _fetchedIndices: number[] = [0]; static Instance: SearchBox; @@ -68,7 +66,6 @@ export class SearchBox extends React.Component { this._openNoResults = false; this._results = []; this._visibleElements = []; - this._currentIndex = 0; this._numTotalResults = -1; this._startIndex = -1; this._endIndex = -1; @@ -97,120 +94,81 @@ 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); - - // if (this._curRequest !== undefined) { - // this._curRequest.then(() => { - // this._curRequest = undefined; - // this._results = []; - // }); - // } - - // this._results = []; + 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 - // this._results = []; - this._currentIndex = 0; this._startIndex = 0; this._endIndex = 12; - this._results = []; - // this._curRequest = undefined; - // if (this._curRequest !== undefined) { - // this._curRequest.then(() => { - // this._curRequest = undefined; - // }); - // } - this._maxSearchIndex = 0; this._numTotalResults = -1; - - // results = await this.getResultsHelp(query); - await this.getResultsHelp(query); + await this.getResults(query); } runInAction(() => { this._resultsOpen = true; - // this._results = results; this._openNoResults = true; this.resultsScrolled(); }); - } - getResultsHelp = async (query: string) => { - // docs length = this._results.length --> number of docs that are shown (after filtering) - // stops looking once this._results.length >= maxDisplayIndex - // max search index = number of results looked through in solr (solr index) --> increments of 10 - // max display index = number of documents that SHOULD be shown (should include buffer), this._endIndex + buffer (= 4) - // currentRequest = promise | undefined, if undefined, can run and look for more. If not undefined, then there is a request in progress and it cannot look for more yet - - // let buffer = 4; - // let maxDisplayIndex: number = this._endIndex + buffer; - // console.log(`end index: ${this._endIndex}`) - // console.log(this._results.length) - - while (this._results.length < this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) { - console.log("looping"); - //start at max search index, get 10, add 10 to max search index - // const { docs, numFound } = await SearchUtil.Search(query, true, this._maxSearchIndex, 10); - - // happens at the beginning - // am i gonna need this? - // if (numFound !== this._numTotalResults && this._numTotalResults === 0) { - // this._numTotalResults = numFound; - // } - - let prom: Promise; - 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) => { + console.log(this._results) + } - // happens at the beginning - if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) { - this._numTotalResults = res.numFound; - } + getResults = async (query: string, all: boolean = false) => { - let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs); - this._results.push(...filteredDocs); + if (all) { + // let { numFound, docs } = await SearchUtil.Search(query, true, this._maxSearchIndex, 100000); + let prom: Promise = SearchUtil.Search(query, true, 0, 100000); - console.log(this._results); - if (prom === this._curRequest) { - this._curRequest = undefined; + prom.then(({ docs, numFound }) => { + this._results = docs; + }) + } + else { + while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) { + + let prom: Promise; + if (this._curRequest) { + prom = this._curRequest; + return; + } else { + prom = SearchUtil.Search(query, true, this._maxSearchIndex, 10); + this._maxSearchIndex += 10; } - console.log("setting to undefined"); - })); + prom.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 = prom; + if (prom === this._curRequest) { + this._curRequest = undefined; + } + })); - await prom; + this._curRequest = prom; - //deals with if there are fewer results than can be scrolled through - // if (this._numTotalResults < this._endIndex) { - // break; - // } + await prom; + } } } collectionRef = React.createRef(); startDragCollection = async () => { - // const results = await this.getResults(FilterBox.Instance.getFinalQuery(this._searchString), -1); - await this.getResultsHelp(FilterBox.Instance.getFinalQuery(this._searchString)); + await this.getResults(FilterBox.Instance.getFinalQuery(this._searchString), true); + console.log(this._results) + // if (res !== undefined) { const docs = this._results.map(doc => { const isProto = Doc.GetT(doc, "isPrototype", "boolean", true); if (isProto) { @@ -244,6 +202,7 @@ export class SearchBox extends React.Component { } } return Docs.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` }); + // } } @action.bound @@ -257,7 +216,6 @@ export class SearchBox extends React.Component { @action.bound closeSearch = () => { - console.log("closing search") FilterBox.Instance.closeFilter(); this.closeResults(); } @@ -267,7 +225,6 @@ export class SearchBox extends React.Component { this._resultsOpen = false; this._results = []; this._visibleElements = []; - this._currentIndex = 0; this._numTotalResults = -1; this._startIndex = -1; this._endIndex = -1; @@ -275,21 +232,11 @@ export class SearchBox extends React.Component { } resultsScrolled = flow(function* (this: SearchBox, e?: React.UIEvent) { - console.log("_________________________________________________________________________________________________________") let scrollY = e ? e.currentTarget.scrollTop : 0; let buffer = 4; - console.log(`start before: ${this._startIndex}`); let startIndex = Math.floor(Math.max(0, scrollY / 70 - buffer)); - console.log(`end before: ${this._endIndex}`); let endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (560 / 70) + buffer)); - // if (startIndex === this._startIndex && endIndex === this._endIndex && this._results.length > this._endIndex) { - // console.log("returning") - // return; - // } - console.log(`START: ${startIndex}`); - console.log(`END: ${endIndex}`); - this._startIndex = startIndex === -1 ? 0 : startIndex; this._endIndex = endIndex === -1 ? 12 : endIndex; @@ -298,6 +245,10 @@ export class SearchBox extends React.Component { 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) { @@ -320,27 +271,12 @@ export class SearchBox extends React.Component { if (this._isSearch[i] !== "search") { let result: Doc | undefined = undefined; if (i >= this._results.length) { - // _________________________________________________________________________________________________ - // let results: Doc[] = yield this.getResults(this._searchString, i + 1 - this._results.length); - - // this updates this._results - yield this.getResultsHelp(this._searchString); - result = this._results[i]; + this.getResults(this._searchString); + if (i < this._results.length) result = this._results[i]; if (result) { this._visibleElements[i] = ; this._isSearch[i] = "search"; } - // if (results.length !== 0) { - // runInAction(() => { - // // this._results.push(...results); - // result = this._results[i]; - // if (result) { - // this._visibleElements[i] = ; - // this._isSearch[i] = "search"; - // } - // }); - // } - // _________________________________________________________________________________________________ } else { result = this._results[i]; @@ -352,6 +288,10 @@ export class SearchBox extends React.Component { } } } + if (this._maxSearchIndex >= this._numTotalResults) { + this._visibleElements.length = this._results.length; + this._isSearch.length = this._results.length; + } }); render() { @@ -367,15 +307,8 @@ export class SearchBox extends React.Component {
- {/* {(this._results.length !== 0) ? ( - this._results.map(result => ) - ) : - this._openNoResults ? (
No Search Results
) : null} */} {this._visibleElements}
- {/*
- -
*/}
); } -- cgit v1.2.3-70-g09d2 From 2575564d70828820521074455383e940d521cca8 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Sun, 14 Jul 2019 16:03:22 -0400 Subject: yeeeee --- src/client/views/search/SearchBox.scss | 3 +- src/client/views/search/SearchBox.tsx | 73 ++++++++++++++-------------------- 2 files changed, 32 insertions(+), 44 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 2a27bbe62..4c78b2682 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -46,7 +46,8 @@ display: flex; flex-direction: column; margin-right: 72px; - height: 560px; + height: auto; + max-height: 560px; overflow: hidden; overflow-y: auto; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index e5280fe8c..47f951f42 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -26,11 +26,7 @@ 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[] = []; - // @observable private _sc rollY: number = 0; private _isSearch: ("search" | "placeholder" | undefined)[] = []; private _numTotalResults = -1; @@ -117,59 +113,50 @@ export class SearchBox extends React.Component { this._openNoResults = true; this.resultsScrolled(); }); + } - console.log(this._results) + getAllResults = async (query: string) => { + return SearchUtil.Search(query, true, 0, 10000000); } - getResults = async (query: string, all: boolean = false) => { + getResults = async (query: string) => { - if (all) { - // let { numFound, docs } = await SearchUtil.Search(query, true, this._maxSearchIndex, 100000); - let prom: Promise = SearchUtil.Search(query, true, 0, 100000); + while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) { - prom.then(({ docs, numFound }) => { - this._results = docs; - }) - } - else { - while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) { - - let prom: Promise; - 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) => { + let prom: Promise; + 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) => { - // 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; - } - })); + if (prom === this._curRequest) { + this._curRequest = undefined; + } + })); - this._curRequest = prom; + this._curRequest = prom; - await prom; - } + await prom; } } collectionRef = React.createRef(); startDragCollection = async () => { - await this.getResults(FilterBox.Instance.getFinalQuery(this._searchString), true); - console.log(this._results) - // if (res !== undefined) { - const docs = this._results.map(doc => { + let res = await this.getAllResults(FilterBox.Instance.getFinalQuery(this._searchString)); + // console.log(this._results) + const docs = res.docs.map(doc => { const isProto = Doc.GetT(doc, "isPrototype", "boolean", true); if (isProto) { return Doc.MakeDelegate(doc); @@ -202,7 +189,7 @@ export class SearchBox extends React.Component { } } return Docs.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` }); - // } + } @action.bound -- cgit v1.2.3-70-g09d2 From dcb7b3ec59b8458fc074656067b35e9068d5e3de Mon Sep 17 00:00:00 2001 From: monikahedman Date: Sun, 14 Jul 2019 17:08:15 -0400 Subject: fixed --- src/client/views/search/SearchBox.scss | 2 - src/client/views/search/SearchBox.tsx | 342 ++++++++++++++++++++++++++------- 2 files changed, 277 insertions(+), 67 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 4c78b2682..1ec89ed2b 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -46,9 +46,7 @@ display: flex; flex-direction: column; margin-right: 72px; - height: auto; max-height: 560px; - overflow: hidden; overflow-y: auto; .no-result { diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 5989e49bd..b9ada9677 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -1,26 +1,111 @@ import * as React from 'react'; -import { observer } from 'mobx-react'; -import { observable, action, runInAction, flow } from 'mobx'; + +import { + observer +} + + from 'mobx-react'; + +import { + observable, + action, + runInAction, + flow, + computed +} + + from 'mobx'; import "./SearchBox.scss"; import "./FilterBox.scss"; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { SetupDrag } from '../../util/DragManager'; -import { Docs } from '../../documents/Documents'; -import { NumCast } from '../../../new_fields/Types'; -import { Doc } from '../../../new_fields/Doc'; -import { SearchItem } from './SearchItem'; -import { DocServer } from '../../DocServer'; + +import { + FontAwesomeIcon +} + + from '@fortawesome/react-fontawesome'; + +import { + SetupDrag +} + + from '../../util/DragManager'; + +import { + Docs +} + + from '../../documents/Documents'; + +import { + NumCast +} + + from '../../../new_fields/Types'; + +import { + Doc +} + + from '../../../new_fields/Doc'; + +import { + SearchItem +} + + from './SearchItem'; + +import { + DocServer +} + + from '../../DocServer'; import * as rp from 'request-promise'; -import { Id } from '../../../new_fields/FieldSymbols'; -import { SearchUtil } from '../../util/SearchUtil'; -import { RouteStore } from '../../../server/RouteStore'; -import { FilterBox } from './FilterBox'; -import { start } from 'repl'; -import { getForkTsCheckerWebpackPluginHooks } from 'fork-ts-checker-webpack-plugin/lib/hooks'; -import { faThumbsDown } from '@fortawesome/free-regular-svg-icons'; -@observer -export class SearchBox extends React.Component { +import { + Id +} + + from '../../../new_fields/FieldSymbols'; + +import { + SearchUtil +} + + from '../../util/SearchUtil'; + +import { + RouteStore +} + + from '../../../server/RouteStore'; + +import { + FilterBox +} + + from './FilterBox'; + +import { + start +} + + from 'repl'; + +import { + getForkTsCheckerWebpackPluginHooks +} + + from 'fork-ts-checker-webpack-plugin/lib/hooks'; + +import { + faThumbsDown +} + + from '@fortawesome/free-regular-svg-icons'; +import * as $ from 'jquery'; + + +@observer export class SearchBox extends React.Component { @observable private _searchString: string = ""; @observable private _resultsOpen: boolean = false; @@ -45,18 +130,19 @@ export class SearchBox extends React.Component { this.resultsScrolled = this.resultsScrolled.bind(this); } - @action - getViews = async (doc: Doc) => { + @action getViews = async (doc: Doc) => { const results = await SearchUtil.GetViewsOfDocument(doc); let toReturn: Doc[] = []; + await runInAction(() => { toReturn = results; - }); + } + + ); return toReturn; } - @action.bound - onChange(e: React.ChangeEvent) { + @action.bound onChange(e: React.ChangeEvent) { this._searchString = e.target.value; this._openNoResults = false; @@ -69,27 +155,37 @@ export class SearchBox extends React.Component { 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 { let posting = DocServer.prepend(RouteStore.dataUriToImage); + const returnedUri = await rp.post(posting, { body: { uri: imageUri, name: returnedFilename - }, + } + + , json: true, - }); + } + + ); return returnedUri; - } catch (e) { + } + + catch (e) { console.log(e); } } - @action - submitSearch = async () => { + @action submitSearch = async () => { let query = this._searchString; query = FilterBox.Instance.getFinalQuery(query); this._results = []; @@ -100,6 +196,7 @@ export class SearchBox extends React.Component { if (query === "") { return; } + else { this._startIndex = 0; this._endIndex = 12; @@ -112,7 +209,9 @@ export class SearchBox extends React.Component { this._resultsOpen = true; this._openNoResults = true; this.resultsScrolled(); - }); + } + + ); } getAllResults = async (query: string) => { @@ -124,13 +223,17 @@ export class SearchBox extends React.Component { while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) { let prom: Promise; + if (this._curRequest) { prom = this._curRequest; return; - } else { + } + + else { prom = SearchUtil.Search(query, true, this._maxSearchIndex, 10); this._maxSearchIndex += 10; } + prom.then(action((res: SearchUtil.DocSearchResult) => { // happens at the beginning @@ -144,7 +247,9 @@ export class SearchBox extends React.Component { if (prom === this._curRequest) { this._curRequest = undefined; } - })); + } + + )); this._curRequest = prom; @@ -153,47 +258,67 @@ export class SearchBox extends React.Component { } collectionRef = React.createRef(); + startDragCollection = async () => { let res = await this.getAllResults(FilterBox.Instance.getFinalQuery(this._searchString)); + let filtered = FilterBox.Instance.filterDocsByType(res.docs); + // console.log(this._results) - const docs = res.docs.map(doc => { + const docs = filtered.map(doc => { const isProto = Doc.GetT(doc, "isPrototype", "boolean", true); + if (isProto) { return Doc.MakeDelegate(doc); - } else { + } + + else { return Doc.MakeAlias(doc); } - }); + } + + ); let x = 0; let y = 0; + for (const doc of docs) { doc.x = x; doc.y = y; const size = 200; const aspect = NumCast(doc.nativeHeight) / NumCast(doc.nativeWidth, 1); + if (aspect > 1) { doc.height = size; doc.width = size / aspect; - } else if (aspect > 0) { + } + + else if (aspect > 0) { doc.width = size; doc.height = size * aspect; - } else { + } + + else { doc.width = size; doc.height = size; } + doc.zoomBasis = 1; x += 250; + if (x > 1000) { x = 0; y += 300; } } - return Docs.Create.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` }); + + return Docs.Create.FreeformDocument(docs, { + width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` + } + + ); } - @action.bound - openSearch(e: React.PointerEvent) { + @action.bound openSearch(e: React.PointerEvent) { e.stopPropagation(); this._openNoResults = false; FilterBox.Instance.closeFilter(); @@ -201,14 +326,12 @@ export class SearchBox extends React.Component { FilterBox.Instance._pointerTime = e.timeStamp; } - @action.bound - closeSearch = () => { + @action.bound closeSearch = () => { FilterBox.Instance.closeFilter(); this.closeResults(); } - @action.bound - closeResults() { + @action.bound closeResults() { this._resultsOpen = false; this._results = []; this._visibleElements = []; @@ -245,59 +368,148 @@ export class SearchBox extends React.Component { this._isSearch = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); } - for (let i = 0; i < this._numTotalResults; i++) { + 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] =
; + + this._visibleElements[i] =
; } } + 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] = ; + this._visibleElements[i] = ; this._isSearch[i] = "search"; } } + else { result = this._results[i]; + if (result) { - this._visibleElements[i] = ; + this._visibleElements[i] = ; 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(`res full $ { + this._numTotalResults <=8 + } + + `) return this._numTotalResults <= 8; + } + + @computed get resultHeight() { + return this._numTotalResults * 70; + } render() { - return ( -
-
- - - - - -
-
- {this._visibleElements} -
-
- ); + return (
{ + this._visibleElements + } + +
); } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From f0e1eae76147d9c70309dcea54f6516622efca0f Mon Sep 17 00:00:00 2001 From: monikahedman Date: Sun, 14 Jul 2019 17:11:03 -0400 Subject: oops --- src/client/views/search/SearchBox.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index b9ada9677..8bf8e3bfa 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -442,11 +442,7 @@ import * as $ from 'jquery'; ); @computed get resFull() { - console.log(`res full $ { - this._numTotalResults <=8 - } - - `) return this._numTotalResults <= 8; + return this._numTotalResults <= 8; } @computed get resultHeight() { -- cgit v1.2.3-70-g09d2 From 44b91eacaab13eebaaa707f42670f01a736c5bba Mon Sep 17 00:00:00 2001 From: monikahedman Date: Sun, 14 Jul 2019 18:12:02 -0400 Subject: small changes --- src/client/views/search/SearchBox.tsx | 335 +++++++-------------------------- src/client/views/search/SearchItem.tsx | 2 +- src/server/Search.ts | 12 ++ 3 files changed, 85 insertions(+), 264 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 8bf8e3bfa..f5748d494 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -1,111 +1,28 @@ import * as React from 'react'; - -import { - observer -} - - from 'mobx-react'; - -import { - observable, - action, - runInAction, - flow, - computed -} - - from 'mobx'; +import { observer } from 'mobx-react'; +import { observable, action, runInAction, flow, computed } from 'mobx'; import "./SearchBox.scss"; import "./FilterBox.scss"; - -import { - FontAwesomeIcon -} - - from '@fortawesome/react-fontawesome'; - -import { - SetupDrag -} - - from '../../util/DragManager'; - -import { - Docs -} - - from '../../documents/Documents'; - -import { - NumCast -} - - from '../../../new_fields/Types'; - -import { - Doc -} - - from '../../../new_fields/Doc'; - -import { - SearchItem -} - - from './SearchItem'; - -import { - DocServer -} - - from '../../DocServer'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { SetupDrag } from '../../util/DragManager'; +import { Docs } from '../../documents/Documents'; +import { NumCast } from '../../../new_fields/Types'; +import { Doc } from '../../../new_fields/Doc'; +import { SearchItem } from './SearchItem'; +import { DocServer } from '../../DocServer'; import * as rp from 'request-promise'; - -import { - Id -} - - from '../../../new_fields/FieldSymbols'; - -import { - SearchUtil -} - - from '../../util/SearchUtil'; - -import { - RouteStore -} - - from '../../../server/RouteStore'; - -import { - FilterBox -} - - from './FilterBox'; - -import { - start -} - - from 'repl'; - -import { - getForkTsCheckerWebpackPluginHooks -} - - from 'fork-ts-checker-webpack-plugin/lib/hooks'; - -import { - faThumbsDown -} - - from '@fortawesome/free-regular-svg-icons'; +import { Id } from '../../../new_fields/FieldSymbols'; +import { SearchUtil } from '../../util/SearchUtil'; +import { RouteStore } from '../../../server/RouteStore'; +import { FilterBox } from './FilterBox'; +import { start } from 'repl'; +import { getForkTsCheckerWebpackPluginHooks } from 'fork-ts-checker-webpack-plugin/lib/hooks'; +import { faThumbsDown } from '@fortawesome/free-regular-svg-icons'; import * as $ from 'jquery'; -@observer export class SearchBox extends React.Component { +@observer +export class SearchBox extends React.Component { @observable private _searchString: string = ""; @observable private _resultsOpen: boolean = false; @@ -130,19 +47,18 @@ import * as $ from 'jquery'; this.resultsScrolled = this.resultsScrolled.bind(this); } - @action getViews = async (doc: Doc) => { + @action + getViews = async (doc: Doc) => { const results = await SearchUtil.GetViewsOfDocument(doc); let toReturn: Doc[] = []; - await runInAction(() => { toReturn = results; - } - - ); + }); return toReturn; } - @action.bound onChange(e: React.ChangeEvent) { + @action.bound + onChange(e: React.ChangeEvent) { this._searchString = e.target.value; this._openNoResults = false; @@ -155,37 +71,27 @@ import * as $ from 'jquery'; 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 { let posting = DocServer.prepend(RouteStore.dataUriToImage); - const returnedUri = await rp.post(posting, { body: { uri: imageUri, name: returnedFilename - } - - , + }, json: true, - } - - ); + }); return returnedUri; - } - - catch (e) { + } catch (e) { console.log(e); } } - @action submitSearch = async () => { + @action + submitSearch = async () => { let query = this._searchString; query = FilterBox.Instance.getFinalQuery(query); this._results = []; @@ -196,7 +102,6 @@ import * as $ from 'jquery'; if (query === "") { return; } - else { this._startIndex = 0; this._endIndex = 12; @@ -209,9 +114,7 @@ import * as $ from 'jquery'; this._resultsOpen = true; this._openNoResults = true; this.resultsScrolled(); - } - - ); + }); } getAllResults = async (query: string) => { @@ -223,17 +126,13 @@ import * as $ from 'jquery'; while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) { let prom: Promise; - if (this._curRequest) { prom = this._curRequest; return; - } - - else { + } else { prom = SearchUtil.Search(query, true, this._maxSearchIndex, 10); this._maxSearchIndex += 10; } - prom.then(action((res: SearchUtil.DocSearchResult) => { // happens at the beginning @@ -247,9 +146,7 @@ import * as $ from 'jquery'; if (prom === this._curRequest) { this._curRequest = undefined; } - } - - )); + })); this._curRequest = prom; @@ -258,67 +155,48 @@ import * as $ from 'jquery'; } collectionRef = React.createRef(); - startDragCollection = async () => { 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); - } - - else { + } else { return Doc.MakeAlias(doc); } - } - - ); + }); let x = 0; let y = 0; - for (const doc of docs) { doc.x = x; doc.y = y; const size = 200; const aspect = NumCast(doc.nativeHeight) / NumCast(doc.nativeWidth, 1); - if (aspect > 1) { doc.height = size; doc.width = size / aspect; - } - - else if (aspect > 0) { + } else if (aspect > 0) { doc.width = size; doc.height = size * aspect; - } - - else { + } else { doc.width = size; doc.height = size; } - doc.zoomBasis = 1; x += 250; - if (x > 1000) { x = 0; y += 300; } } - - return Docs.Create.FreeformDocument(docs, { - width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` - } - - ); + return Docs.Create.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` }); } - @action.bound openSearch(e: React.PointerEvent) { + @action.bound + openSearch(e: React.PointerEvent) { e.stopPropagation(); this._openNoResults = false; FilterBox.Instance.closeFilter(); @@ -326,12 +204,14 @@ import * as $ from 'jquery'; FilterBox.Instance._pointerTime = e.timeStamp; } - @action.bound closeSearch = () => { + @action.bound + closeSearch = () => { FilterBox.Instance.closeFilter(); this.closeResults(); } - @action.bound closeResults() { + @action.bound + closeResults() { this._resultsOpen = false; this._results = []; this._visibleElements = []; @@ -368,144 +248,73 @@ import * as $ from 'jquery'; this._isSearch = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); } - for (let i = 0; - i < this._numTotalResults; - - i++) { - + 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] =
; + this._visibleElements[i] =
; } } - 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] = ; + this._visibleElements[i] = ; this._isSearch[i] = "search"; } } - else { result = this._results[i]; - if (result) { - this._visibleElements[i] = ; + this._visibleElements[i] = ; this._isSearch[i] = "search"; } } } } } - if (this._maxSearchIndex >= this._numTotalResults) { this._visibleElements.length = this._results.length; this._isSearch.length = this._results.length; } - } + }); - ); - - @computed get resFull() { + @computed + get resFull() { + console.log(this._numTotalResults) return this._numTotalResults <= 8; } - @computed get resultHeight() { + @computed + get resultHeight() { return this._numTotalResults * 70; } render() { - return (
{ - this._visibleElements - } - -
); + return ( +
+
+ + + + + +
+
+ {this._visibleElements} +
+
+ ); } } \ No newline at end of file diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index cd7e31b20..134c13dc8 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -240,7 +240,7 @@ export class SearchItem extends React.Component {
-
+
{StrCast(this.props.doc.title)}
diff --git a/src/server/Search.ts b/src/server/Search.ts index ffba4ea8e..98f421937 100644 --- a/src/server/Search.ts +++ b/src/server/Search.ts @@ -18,6 +18,18 @@ export class Search { } } + public async updateDocuments(documents: any[]) { + try { + const res = await rp.post(this.url + "dash/update", { + headers: { 'content-type': 'application/json' }, + body: JSON.stringify(documents) + }); + return res; + } catch (e) { + // console.warn("Search error: " + e + document); + } + } + public async search(query: string, start: number = 0, rows: number = 10) { try { const searchResults = JSON.parse(await rp.get(this.url + "dash/select", { -- cgit v1.2.3-70-g09d2 From 29840e571c2f17d0bb346186dd91f1d895684a95 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Sun, 14 Jul 2019 18:15:39 -0400 Subject: fixed no search results --- src/client/views/search/SearchBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index f5748d494..bfad9a845 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -230,7 +230,7 @@ export class SearchBox extends React.Component { this._startIndex = startIndex === -1 ? 0 : startIndex; this._endIndex = endIndex === -1 ? 12 : endIndex; - if (this._numTotalResults === 0 && this._openNoResults) { + if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { this._visibleElements = [
No Search Results
]; return; } -- cgit v1.2.3-70-g09d2 From 606a494b4f0e259ce8d70b9ac4c5ab7b2bd0cd25 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Sun, 14 Jul 2019 18:32:09 -0400 Subject: should be ready --- src/client/views/search/SearchItem.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 134c13dc8..9a9351429 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -99,7 +99,9 @@ export class SearchItem extends React.Component { @observable _selected: boolean = false; onClick = () => { - DocumentManager.Instance.jumpToDocument(this.props.doc, false); + // I dont think this is the best functionality because clicking the name of the collection does that. Change it back if you'd like + // DocumentManager.Instance.jumpToDocument(this.props.doc, false); + CollectionDockingView.Instance.AddRightSplit(this.props.doc, undefined); } @observable _useIcons = true; @observable _displayDim = 50; -- cgit v1.2.3-70-g09d2 From 8c80710f241376043e8700ec79277fc039f3a00b Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sun, 14 Jul 2019 22:19:33 -0400 Subject: Cleaned up imports --- src/client/views/search/SearchBox.tsx | 9 --------- 1 file changed, 9 deletions(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index bfad9a845..67aaa387c 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -15,10 +15,6 @@ import { Id } from '../../../new_fields/FieldSymbols'; import { SearchUtil } from '../../util/SearchUtil'; import { RouteStore } from '../../../server/RouteStore'; import { FilterBox } from './FilterBox'; -import { start } from 'repl'; -import { getForkTsCheckerWebpackPluginHooks } from 'fork-ts-checker-webpack-plugin/lib/hooks'; -import { faThumbsDown } from '@fortawesome/free-regular-svg-icons'; -import * as $ from 'jquery'; @observer @@ -32,7 +28,6 @@ export class SearchBox extends React.Component { private _isSearch: ("search" | "placeholder" | undefined)[] = []; private _numTotalResults = -1; - private _startIndex = -1; private _endIndex = -1; static Instance: SearchBox; @@ -65,7 +60,6 @@ export class SearchBox extends React.Component { this._results = []; this._visibleElements = []; this._numTotalResults = -1; - this._startIndex = -1; this._endIndex = -1; this._curRequest = undefined; this._maxSearchIndex = 0; @@ -103,7 +97,6 @@ export class SearchBox extends React.Component { return; } else { - this._startIndex = 0; this._endIndex = 12; this._maxSearchIndex = 0; this._numTotalResults = -1; @@ -216,7 +209,6 @@ export class SearchBox extends React.Component { this._results = []; this._visibleElements = []; this._numTotalResults = -1; - this._startIndex = -1; this._endIndex = -1; this._curRequest = undefined; } @@ -227,7 +219,6 @@ export class SearchBox extends React.Component { let startIndex = Math.floor(Math.max(0, scrollY / 70 - buffer)); let endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (560 / 70) + buffer)); - this._startIndex = startIndex === -1 ? 0 : startIndex; this._endIndex = endIndex === -1 ? 12 : endIndex; if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { -- cgit v1.2.3-70-g09d2 From 0f429c53fc3df62a60be1da398740524545357bc Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sun, 14 Jul 2019 22:27:59 -0400 Subject: Compile errors --- src/client/views/pdf/PDFMenu.tsx | 4 +- src/client/views/pdf/Page.tsx | 2 +- src/client/views/search/Pager.scss | 47 --------------------- src/client/views/search/Pager.tsx | 78 ----------------------------------- src/client/views/search/SearchBox.tsx | 5 ++- 5 files changed, 6 insertions(+), 130 deletions(-) delete mode 100644 src/client/views/search/Pager.scss delete mode 100644 src/client/views/search/Pager.tsx (limited to 'src') diff --git a/src/client/views/pdf/PDFMenu.tsx b/src/client/views/pdf/PDFMenu.tsx index e73b759df..27c2a8f1a 100644 --- a/src/client/views/pdf/PDFMenu.tsx +++ b/src/client/views/pdf/PDFMenu.tsx @@ -18,7 +18,7 @@ export default class PDFMenu extends React.Component { @observable private _transitionDelay: string = ""; - StartDrag: (e: PointerEvent, ele: HTMLDivElement) => void = emptyFunction; + StartDrag: (e: PointerEvent, ele: HTMLElement) => void = emptyFunction; Highlight: (d: Doc | undefined, color: string | undefined) => void = emptyFunction; Delete: () => void = emptyFunction; Snippet: (marquee: { left: number, top: number, width: number, height: number }) => void = emptyFunction; @@ -34,7 +34,7 @@ export default class PDFMenu extends React.Component { private _offsetY: number = 0; private _offsetX: number = 0; private _mainCont: React.RefObject = React.createRef(); - private _commentCont: React.RefObject = React.createRef(); + private _commentCont = React.createRef(); private _snippetButton: React.RefObject = React.createRef(); private _dragging: boolean = false; @observable private _keyValue: string = ""; diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx index 1e22aca9e..b4a4b5806 100644 --- a/src/client/views/pdf/Page.tsx +++ b/src/client/views/pdf/Page.tsx @@ -152,7 +152,7 @@ export default class Page extends React.Component { * start a drag event and create or put the necessary info into the drag event. */ @action - startDrag = (e: PointerEvent, ele: HTMLDivElement): void => { + startDrag = (e: PointerEvent, ele: HTMLElement): void => { e.preventDefault(); e.stopPropagation(); let thisDoc = this.props.parent.Document; diff --git a/src/client/views/search/Pager.scss b/src/client/views/search/Pager.scss deleted file mode 100644 index 2b9c81b93..000000000 --- a/src/client/views/search/Pager.scss +++ /dev/null @@ -1,47 +0,0 @@ -@import "../globalCssVariables"; - -.search-pager { - background-color: $dark-color; - border-radius: 10px; - width: 500px; - display: flex; - justify-content: center; - // margin-left: 27px; - float: right; - margin-right: 74px; - margin-left: auto; - - // flex-direction: column; - - .search-arrows { - display: flex; - justify-content: center; - margin: 10px; - width: 50%; - - .arrow { - -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; - - .fontawesome-icon { - color: $light-color; - width: 20px; - height: 20px; - margin-right: 2px; - margin-left: 2px; - // opacity: .7; - } - } - - .pager-title { - text-align: center; - // font-size: 8px; - // margin-bottom: 10px; - color: $light-color; - // padding: 2px; - width: 40%; - } - } -} \ No newline at end of file diff --git a/src/client/views/search/Pager.tsx b/src/client/views/search/Pager.tsx deleted file mode 100644 index 1c62773b1..000000000 --- a/src/client/views/search/Pager.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import * as React from 'react'; -import { observer } from 'mobx-react'; -import { faArrowCircleRight, faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { library } from '@fortawesome/fontawesome-svg-core'; -import "./Pager.scss"; -import { SearchBox } from './SearchBox'; -import { observable, action } from 'mobx'; -import { FilterBox } from './FilterBox'; - -library.add(faArrowCircleRight); -library.add(faArrowCircleLeft); - -@observer -export class Pager extends React.Component { - - @observable _leftHover: boolean = false; - @observable _rightHover: boolean = false; - - @action - onLeftClick(e: React.PointerEvent) { - FilterBox.Instance._pointerTime = e.timeStamp; - if (SearchBox.Instance._pageNum > 0) { - SearchBox.Instance._pageNum -= 1; - } - } - - @action - onRightClick(e: React.PointerEvent) { - FilterBox.Instance._pointerTime = e.timeStamp; - if (SearchBox.Instance._pageNum + 1 < SearchBox.Instance._maxNum) { - SearchBox.Instance._pageNum += 1; - } - } - - @action.bound - mouseInLeft() { - this._leftHover = true; - } - - @action.bound - mouseOutLeft() { - this._leftHover = false; - } - - @action.bound - mouseInRight() { - this._rightHover = true; - } - - @action.bound - mouseOutRight() { - this._rightHover = false; - } - - render() { - return ( -
-
-
- -
-
- page {SearchBox.Instance._pageNum + 1} of {SearchBox.Instance._maxNum} -
-
- -
-
-
- ); - } - -} \ No newline at end of file diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index c02db528a..e0c5d163e 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -213,7 +213,8 @@ export class SearchBox extends React.Component { this._curRequest = undefined; } - resultsScrolled = flow(function* (this: SearchBox, e?: React.UIEvent) { + @action + resultsScrolled = (e?: React.UIEvent) => { let scrollY = e ? e.currentTarget.scrollTop : 0; let buffer = 4; let startIndex = Math.floor(Math.max(0, scrollY / 70 - buffer)); @@ -273,7 +274,7 @@ export class SearchBox extends React.Component { this._visibleElements.length = this._results.length; this._isSearch.length = this._results.length; } - }); + } @computed get resFull() { -- cgit v1.2.3-70-g09d2 From 756b6590723c307440d7c69f9ad91073ad0f7a24 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sun, 14 Jul 2019 23:33:35 -0400 Subject: Some search fixes and tweaks --- src/client/util/SerializationHelper.ts | 7 +- src/client/views/search/SearchBox.tsx | 55 +++--- src/client/views/search/SearchItem.scss | 303 ++++++++++++++++---------------- 3 files changed, 187 insertions(+), 178 deletions(-) (limited to 'src') 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(); + 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; - 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; + 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(); @@ -215,7 +214,7 @@ export class SearchBox extends React.Component { @action resultsScrolled = (e?: React.UIEvent) => { - 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] =
; + this._visibleElements[i] =
Loading...
; } } else { @@ -303,7 +302,7 @@ export class SearchBox extends React.Component {
+ }} ref={this.resultsRef}> {this._visibleElements}
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 { -- cgit v1.2.3-70-g09d2 From a65e1f4af074beebb6a78861cf29ca25a2c59b28 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sun, 14 Jul 2019 23:35:04 -0400 Subject: Added console warn --- src/client/util/SerializationHelper.ts | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/client/util/SerializationHelper.ts b/src/client/util/SerializationHelper.ts index 429fb22d9..dca539f3b 100644 --- a/src/client/util/SerializationHelper.ts +++ b/src/client/util/SerializationHelper.ts @@ -40,6 +40,7 @@ export namespace SerializationHelper { serializing += 1; if (!obj.__type) { if (ClientUtils.RELEASE) { + console.warn("No property 'type' found in JSON."); return undefined; } else { throw Error("No property 'type' found in JSON."); -- cgit v1.2.3-70-g09d2