aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/SearchUtil.ts8
-rw-r--r--src/client/views/pdf/PDFMenu.tsx10
-rw-r--r--src/client/views/pdf/PDFViewer.tsx3
-rw-r--r--src/client/views/search/FilterBox.tsx5
-rw-r--r--src/client/views/search/SearchBox.scss3
-rw-r--r--src/client/views/search/SearchBox.tsx175
-rw-r--r--src/client/views/search/SearchItem.scss41
-rw-r--r--src/server/Search.ts17
-rw-r--r--src/server/index.ts8
9 files changed, 195 insertions, 75 deletions
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index 338628960..674eeb1a8 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -14,11 +14,11 @@ export namespace SearchUtil {
numFound: number;
}
- export function Search(query: string, returnDocs: true): Promise<DocSearchResult>;
- export function Search(query: string, returnDocs: false): Promise<IdSearchResult>;
- export async function Search(query: string, returnDocs: boolean) {
+ export function Search(query: string, returnDocs: true, start?: number, count?: number): Promise<DocSearchResult>;
+ export function Search(query: string, returnDocs: false, start?: number, count?: number): Promise<IdSearchResult>;
+ export async function Search(query: string, returnDocs: boolean, start?: number, rows?: number) {
const result: IdSearchResult = JSON.parse(await rp.get(DocServer.prepend("/search"), {
- qs: { query }
+ qs: { query, start, rows }
}));
if (!returnDocs) {
return result;
diff --git a/src/client/views/pdf/PDFMenu.tsx b/src/client/views/pdf/PDFMenu.tsx
index feaa1f652..e73b759df 100644
--- a/src/client/views/pdf/PDFMenu.tsx
+++ b/src/client/views/pdf/PDFMenu.tsx
@@ -238,24 +238,24 @@ export default class PDFMenu extends React.Component {
render() {
let buttons = this.Status === "pdf" || this.Status === "snippet" ? [
- <button className="pdfMenu-button" title="Click to Highlight" onClick={this.highlightClicked} key="1"
+ <button key="1" className="pdfMenu-button" title="Click to Highlight" onClick={this.highlightClicked}
style={this.Highlighting ? { backgroundColor: "#121212" } : {}}>
<FontAwesomeIcon icon="highlighter" size="lg" style={{ transition: "transform 0.1s", transform: this.Highlighting ? "" : "rotate(-45deg)" }} />
</button>,
<button className="pdfMenu-button" title="Drag to Annotate" ref={this._commentCont} onPointerDown={this.pointerDown}><FontAwesomeIcon icon="comment-alt" size="lg" key="2" /></button>,
this.Status === "snippet" ? <button className="pdfMenu-button" title="Drag to Snippetize Selection" onPointerDown={this.snippetStart} ref={this._snippetButton}><FontAwesomeIcon icon="cut" size="lg" /></button> : undefined,
- <button className="pdfMenu-button" title="Pin Menu" onClick={this.togglePin} key="3"
+ <button key="3" className="pdfMenu-button" title="Pin Menu" onClick={this.togglePin}
style={this.Pinned ? { backgroundColor: "#121212" } : {}}>
<FontAwesomeIcon icon="thumbtack" size="lg" style={{ transition: "transform 0.1s", transform: this.Pinned ? "rotate(45deg)" : "" }} />
</button>
] : [
- <button className="pdfMenu-button" title="Delete Anchor" onPointerDown={this.deleteClicked}><FontAwesomeIcon icon="trash-alt" size="lg" key="1" /></button>,
- <button className="pdfMenu-button" title="Pin to Presentation" onPointerDown={this.PinToPres}><FontAwesomeIcon icon="map-pin" size="lg" key="2" /></button>,
+ <button key="4" className="pdfMenu-button" title="Delete Anchor" onPointerDown={this.deleteClicked}><FontAwesomeIcon icon="trash-alt" size="lg" key="1" /></button>,
+ <button key="5" className="pdfMenu-button" title="Pin to Presentation" onPointerDown={this.PinToPres}><FontAwesomeIcon icon="map-pin" size="lg" key="2" /></button>,
<div className="pdfMenu-addTag" key="3">
<input onKeyDown={handleBackspace} onChange={this.keyChanged} placeholder="Key" style={{ gridColumn: 1 }} />
<input onKeyDown={handleBackspace} onChange={this.valueChanged} placeholder="Value" style={{ gridColumn: 3 }} />
</div>,
- <button className="pdfMenu-button" title={`Add tag: ${this._keyValue} with value: ${this._valueValue}`} onPointerDown={this.addTag}><FontAwesomeIcon style={{ transition: "all .2s" }} color={this._added ? "#42f560" : "white"} icon="check" size="lg" key="4" /></button>,
+ <button key="6" className="pdfMenu-button" title={`Add tag: ${this._keyValue} with value: ${this._valueValue}`} onPointerDown={this.addTag}><FontAwesomeIcon style={{ transition: "all .2s" }} color={this._added ? "#42f560" : "white"} icon="check" size="lg" key="4" /></button>,
];
return (
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 8f5a356c8..aca8c4e53 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -236,12 +236,13 @@ export class Viewer extends React.Component<IViewerProps> {
}
}
+ @action
makeAnnotationDocument = (sourceDoc: Doc | undefined, s: number, color: string): Doc => {
let annoDocs: Doc[] = [];
let mainAnnoDoc = Docs.Create.InstanceFromProto(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) {
diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx
index c6c18f9b4..7ea703b74 100644
--- a/src/client/views/search/FilterBox.tsx
+++ b/src/client/views/search/FilterBox.tsx
@@ -239,10 +239,13 @@ 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");
- if (!layoutresult || this._icons.includes(layoutresult)) {
+ if (layoutresult && this._icons.includes(layoutresult)) {
finalDocs.push(doc);
}
});
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 7dcfbe1ef..5989e49bd 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';
@@ -15,6 +15,9 @@ 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 {
@@ -23,16 +26,23 @@ export class SearchBox extends React.Component {
@observable private _resultsOpen: boolean = false;
@observable private _results: Doc[] = [];
@observable private _openNoResults: boolean = false;
- @observable public _pageNum: number = 0;
- //temp
- @observable public _maxNum: number = 10;
+ @observable private _visibleElements: JSX.Element[] = [];
+
+ private _isSearch: ("search" | "placeholder" | undefined)[] = [];
+ private _numTotalResults = -1;
+ private _startIndex = -1;
+ private _endIndex = -1;
static Instance: SearchBox;
+ private _maxSearchIndex: number = 0;
+ private _curRequest?: Promise<any> = undefined;
+
constructor(props: any) {
super(props);
SearchBox.Instance = this;
+ this.resultsScrolled = this.resultsScrolled.bind(this);
}
@action
@@ -49,15 +59,17 @@ export class SearchBox extends React.Component {
onChange(e: React.ChangeEvent<HTMLInputElement>) {
this._searchString = e.target.value;
- if (this._searchString === "") {
- this._results = [];
- this._openNoResults = false;
- }
+ this._openNoResults = false;
+ this._results = [];
+ this._visibleElements = [];
+ this._numTotalResults = -1;
+ this._startIndex = -1;
+ this._endIndex = -1;
+ this._curRequest = undefined;
+ this._maxSearchIndex = 0;
}
- enter = (e: React.KeyboardEvent) => {
- if (e.key === "Enter") { this.submitSearch(); }
- }
+ enter = (e: React.KeyboardEvent) => { if (e.key === "Enter") { this.submitSearch(); } }
public static async convertDataUri(imageUri: string, returnedFilename: string) {
try {
@@ -78,38 +90,73 @@ export class SearchBox extends React.Component {
@action
submitSearch = async () => {
- let query = this._searchString; // searchbox gets query
- let results: Doc[];
-
+ let query = this._searchString;
query = FilterBox.Instance.getFinalQuery(query);
+ this._results = [];
+ this._isSearch = [];
+ this._visibleElements = [];
//if there is no query there should be no result
if (query === "") {
- results = [];
+ return;
}
else {
- //gets json result into a list of documents that can be used
- //these are filtered by type
- results = await this.getResults(query);
+ this._startIndex = 0;
+ this._endIndex = 12;
+ this._maxSearchIndex = 0;
+ this._numTotalResults = -1;
+ await this.getResults(query);
}
runInAction(() => {
this._resultsOpen = true;
- this._results = results;
this._openNoResults = true;
+ this.resultsScrolled();
});
}
- @action
+ getAllResults = async (query: string) => {
+ return SearchUtil.Search(query, true, 0, 10000000);
+ }
+
getResults = async (query: string) => {
- const { docs } = await SearchUtil.Search(query, true);
- return FilterBox.Instance.filterDocsByType(docs);
+
+ while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) {
+
+ let prom: Promise<any>;
+ if (this._curRequest) {
+ prom = this._curRequest;
+ return;
+ } else {
+ prom = SearchUtil.Search(query, true, this._maxSearchIndex, 10);
+ this._maxSearchIndex += 10;
+ }
+ prom.then(action((res: SearchUtil.DocSearchResult) => {
+
+ // 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);
+
+ if (prom === this._curRequest) {
+ this._curRequest = undefined;
+ }
+ }));
+
+ this._curRequest = prom;
+
+ await prom;
+ }
}
collectionRef = React.createRef<HTMLSpanElement>();
startDragCollection = async () => {
- const results = await this.getResults(FilterBox.Instance.getFinalQuery(this._searchString));
- const docs = results.map(doc => {
+ let res = await this.getAllResults(FilterBox.Instance.getFinalQuery(this._searchString));
+ // console.log(this._results)
+ const docs = res.docs.map(doc => {
const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
if (isProto) {
return Doc.MakeDelegate(doc);
@@ -142,6 +189,7 @@ export class SearchBox extends React.Component {
}
}
return Docs.Create.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` });
+
}
@action.bound
@@ -155,7 +203,6 @@ export class SearchBox extends React.Component {
@action.bound
closeSearch = () => {
- console.log("closing search");
FilterBox.Instance.closeFilter();
this.closeResults();
}
@@ -164,8 +211,76 @@ export class SearchBox extends React.Component {
closeResults() {
this._resultsOpen = false;
this._results = [];
+ this._visibleElements = [];
+ this._numTotalResults = -1;
+ this._startIndex = -1;
+ this._endIndex = -1;
+ this._curRequest = undefined;
}
+ resultsScrolled = flow(function* (this: SearchBox, e?: React.UIEvent<HTMLDivElement>) {
+ let scrollY = e ? e.currentTarget.scrollTop : 0;
+ let buffer = 4;
+ let startIndex = Math.floor(Math.max(0, scrollY / 70 - buffer));
+ let endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (560 / 70) + buffer));
+
+ this._startIndex = startIndex === -1 ? 0 : startIndex;
+ this._endIndex = endIndex === -1 ? 12 : endIndex;
+
+ if (this._numTotalResults === 0 && this._openNoResults) {
+ this._visibleElements = [<div className="no-result">No Search Results</div>];
+ return;
+ }
+
+ if (this._numTotalResults <= this._maxSearchIndex) {
+ this._numTotalResults = this._results.length;
+ }
+
+ // only hit right at the beginning
+ // visibleElements is all of the elements (even the ones you can't see)
+ else if (this._visibleElements.length !== this._numTotalResults) {
+ // undefined until a searchitem is put in there
+ this._visibleElements = Array<JSX.Element>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
+ // indicates if things are placeholders
+ this._isSearch = Array<undefined>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
+ }
+
+ for (let i = 0; i < this._numTotalResults; i++) {
+ //if the index is out of the window then put a placeholder in
+ //should ones that have already been found get set to placeholders?
+ if (i < startIndex || i > endIndex) {
+ if (this._isSearch[i] !== "placeholder") {
+ this._isSearch[i] = "placeholder";
+ this._visibleElements[i] = <div className="searchBox-placeholder" key={`searchBox-placeholder-${i}`}></div>;
+ }
+ }
+ else {
+ if (this._isSearch[i] !== "search") {
+ let result: Doc | undefined = undefined;
+ if (i >= this._results.length) {
+ this.getResults(this._searchString);
+ if (i < this._results.length) result = this._results[i];
+ if (result) {
+ this._visibleElements[i] = <SearchItem doc={result} key={result[Id]} />;
+ this._isSearch[i] = "search";
+ }
+ }
+ else {
+ result = this._results[i];
+ if (result) {
+ this._visibleElements[i] = <SearchItem doc={result} key={result[Id]} />;
+ this._isSearch[i] = "search";
+ }
+ }
+ }
+ }
+ }
+ if (this._maxSearchIndex >= this._numTotalResults) {
+ this._visibleElements.length = this._results.length;
+ this._isSearch.length = this._results.length;
+ }
+ });
+
render() {
return (
<div className="searchBox-container">
@@ -178,15 +293,9 @@ export class SearchBox extends React.Component {
style={{ width: this._resultsOpen ? "500px" : "100px" }} />
<button className="searchBox-barChild searchBox-filter" onClick={FilterBox.Instance.openFilter} onPointerDown={FilterBox.Instance.stopProp}>Filter</button>
</div>
- <div className="searchBox-results" style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
- {(this._results.length !== 0) ? (
- this._results.map(result => <SearchItem doc={result} key={result[Id]} />)
- ) :
- this._openNoResults ? (<div className="no-result">No Search Results</div>) : null}
+ <div className="searchBox-results" onScroll={this.resultsScrolled} style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
+ {this._visibleElements}
</div>
- {/* <div style={this._results.length !== 0 ? { display: "flex" } : { display: "none" }}>
- <Pager />
- </div> */}
</div>
);
}
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 8591f8857..ffba4ea8e 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -18,25 +18,14 @@ 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) {
+ 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 21adff9e5..e9ca256fa 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -144,8 +144,12 @@ app.get("/pull", (req, res) =>
// GETTERS
app.get("/search", async (req, res) => {
- let query = req.query.query || "hello";
- let results = await Search.Instance.search(query);
+ const { query, start, rows } = req.query;
+ if (query === undefined) {
+ res.send([]);
+ return;
+ }
+ let results = await Search.Instance.search(query, start, rows);
res.send(results);
});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-23 01:41:20 +0000