aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts10
-rw-r--r--src/client/util/DragManager.ts1
-rw-r--r--src/client/util/SelectionManager.ts1
-rw-r--r--src/client/views/SearchDocBox.tsx442
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx2
-rw-r--r--src/client/views/nodes/DocumentView.tsx4
-rw-r--r--src/client/views/nodes/QueryBox.tsx74
-rw-r--r--src/client/views/search/CheckBox.tsx146
-rw-r--r--src/client/views/search/FilterBox.scss9
-rw-r--r--src/client/views/search/FilterBox.tsx2
-rw-r--r--src/client/views/search/IconBar.scss7
-rw-r--r--src/client/views/search/IconBar.tsx20
-rw-r--r--src/client/views/search/IconButton.scss1
-rw-r--r--src/client/views/search/IconButton.tsx16
-rw-r--r--src/client/views/search/SearchBox.scss261
-rw-r--r--src/client/views/search/SearchBox.tsx422
-rw-r--r--src/server/ApiManagers/SessionManager.ts20
-rw-r--r--src/server/DashSession/DashSessionAgent.ts2
-rw-r--r--src/server/authentication/models/current_user_utils.ts5
-rw-r--r--src/server/index.ts2
20 files changed, 1298 insertions, 149 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 96425ba30..da8efe745 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -41,6 +41,8 @@ import { ComputedField, ScriptField } from "../../new_fields/ScriptField";
import { ProxyField } from "../../new_fields/Proxy";
import { DocumentType } from "./DocumentTypes";
import { RecommendationsBox } from "../views/RecommendationsBox";
+import { SearchBox } from "../views/search/SearchBox";
+
//import { PresBox } from "../views/nodes/PresBox";
//import { PresField } from "../../new_fields/PresField";
import { PresElementBox } from "../views/presentationview/PresElementBox";
@@ -161,6 +163,9 @@ export interface DocumentOptions {
flexDirection?: "unset" | "row" | "column" | "row-reverse" | "column-reverse";
selectedIndex?: number;
syntaxColor?: string; // can be applied to text for syntax highlighting all matches in the text
+ searchText?: string, //for searchbox
+ sq?: string,
+ fq?: string,
linearViewIsExpanded?: boolean; // is linear view expanded
}
@@ -543,6 +548,7 @@ export namespace Docs {
}
export function QueryDocument(options: DocumentOptions = {}) {
+ console.log("yuh");
return InstanceFromProto(Prototypes.get(DocumentType.QUERY), "", options);
}
@@ -702,6 +708,10 @@ export namespace Docs {
return InstanceFromProto(Prototypes.get(DocumentType.RECOMMENDATION), new List<Doc>(data), options);
}
+ export function SearchDocument(documents: Array<Doc>, options: DocumentOptions = {}) {
+ return InstanceFromProto(Prototypes.get(DocumentType.SEARCHBOX), new List(documents), options);
+ }
+
export type DocConfig = {
doc: Doc,
initialWidth?: number,
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 1f2312032..07cd2e98f 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -279,6 +279,7 @@ export namespace DragManager {
}
function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void) {
+ console.log("drag");
eles = eles.filter(e => e);
if (!dragDiv) {
dragDiv = document.createElement("div");
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 0e281e77e..b7d88c54c 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -14,6 +14,7 @@ export namespace SelectionManager {
@action
SelectDoc(docView: DocumentView, ctrlPressed: boolean): void {
+ console.log("select");
// if doc is not in SelectedDocuments, add it
if (!manager.SelectedDocuments.get(docView)) {
if (!ctrlPressed) {
diff --git a/src/client/views/SearchDocBox.tsx b/src/client/views/SearchDocBox.tsx
new file mode 100644
index 000000000..c57f9e737
--- /dev/null
+++ b/src/client/views/SearchDocBox.tsx
@@ -0,0 +1,442 @@
+import { observer } from "mobx-react";
+import React = require("react");
+import { observable, action, computed, runInAction } from "mobx";
+import Measure from "react-measure";
+//import "./SearchBoxDoc.scss";
+import { Doc, DocListCast, WidthSym, HeightSym } from "../../new_fields/Doc";
+import { DocumentIcon } from "./nodes/DocumentIcon";
+import { StrCast, NumCast, BoolCast, Cast } from "../../new_fields/Types";
+import { returnFalse, emptyFunction, returnEmptyString, returnOne } from "../../Utils";
+import { Transform } from "../util/Transform";
+import { ObjectField } from "../../new_fields/ObjectField";
+import { DocumentView } from "./nodes/DocumentView";
+import { DocumentType } from '../documents/DocumentTypes';
+import { ClientRecommender } from "../ClientRecommender";
+import { DocServer } from "../DocServer";
+import { Id } from "../../new_fields/FieldSymbols";
+import { FieldView, FieldViewProps } from "./nodes/FieldView";
+import { DocumentManager } from "../util/DocumentManager";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faBullseye, faLink } from "@fortawesome/free-solid-svg-icons";
+import { DocUtils, Docs } from "../documents/Documents";
+import { ContentFittingDocumentView } from "./nodes/ContentFittingDocumentView";
+import { EditableView } from "./EditableView";
+import { SearchUtil } from "../util/SearchUtil";
+import { SearchItem } from "./search/SearchItem";
+import { FilterBox } from "./search/FilterBox";
+import { SearchBox } from "./search/SearchBox";
+
+export interface RecProps {
+ documents: { preview: Doc, similarity: number }[];
+ node: Doc;
+
+}
+
+library.add(faBullseye, faLink);
+export const keyPlaceholder = "Query";
+
+@observer
+export class SearchDocBox extends React.Component<FieldViewProps> {
+
+ public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchDocBox, fieldKey); }
+
+ // @observable private _display: boolean = false;
+ @observable private _pageX: number = 0;
+ @observable private _pageY: number = 0;
+ @observable private _width: number = 0;
+ @observable private _height: number = 0;
+ @observable.shallow private _docViews: JSX.Element[] = [];
+ // @observable private _documents: { preview: Doc, score: number }[] = [];
+ private previewDocs: Doc[] = [];
+
+ constructor(props: FieldViewProps) {
+ super(props);
+ this.editingMetadata = this.editingMetadata || false;
+ //SearchBox.Instance = this;
+ this.resultsScrolled = this.resultsScrolled.bind(this);
+ }
+
+
+ @computed
+ private get editingMetadata() {
+ return BoolCast(this.props.Document.editingMetadata);
+ }
+
+ private set editingMetadata(value: boolean) {
+ this.props.Document.editingMetadata = value;
+ }
+
+ static readonly buffer = 20;
+
+ componentDidMount() {
+ runInAction(() => {
+ console.log("didit"
+ );
+ this.query = StrCast(this.props.Document.searchText);
+ this.content = (Docs.Create.TreeDocument(DocListCast(Doc.GetProto(this.props.Document).data), { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs:` + this.query }));
+
+ });
+ if (this.inputRef.current) {
+ this.inputRef.current.focus();
+ runInAction(() => {
+ this._searchbarOpen = true;
+ });
+ }
+ }
+
+ @observable
+ private content: Doc | undefined;
+
+ @action
+ updateKey = async (newKey: string) => {
+ this.query = newKey;
+ if (newKey.length > 1) {
+ let newdocs = await this.getAllResults(this.query);
+ let things = newdocs.docs
+ console.log(things);
+ console.log(this.content);
+ runInAction(() => {
+ this.content = Docs.Create.TreeDocument(things, { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs:` + this.query });
+ });
+ console.log(this.content);
+ }
+
+
+ //this.keyRef.current && this.keyRef.current.setIsFocused(false);
+ //this.query.length === 0 && (this.query = keyPlaceholder);
+ return true;
+ }
+
+ @computed
+ public get query() {
+ return StrCast(this.props.Document.query);
+ }
+
+ public set query(value: string) {
+ this.props.Document.query = value;
+ }
+
+ @observable private _searchString: string = "";
+ @observable private _resultsOpen: boolean = false;
+ @observable private _searchbarOpen: boolean = false;
+ @observable private _results: [Doc, string[], string[]][] = [];
+ private _resultsSet = new Map<Doc, number>();
+ @observable private _openNoResults: boolean = false;
+ @observable private _visibleElements: JSX.Element[] = [];
+
+ private resultsRef = React.createRef<HTMLDivElement>();
+ public inputRef = React.createRef<HTMLInputElement>();
+
+ private _isSearch: ("search" | "placeholder" | undefined)[] = [];
+ private _numTotalResults = -1;
+ private _endIndex = -1;
+
+
+ private _maxSearchIndex: number = 0;
+ private _curRequest?: Promise<any> = undefined;
+
+ @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<HTMLInputElement>) {
+ this._searchString = e.target.value;
+
+ this._openNoResults = false;
+ this._results = [];
+ this._resultsSet.clear();
+ this._visibleElements = [];
+ this._numTotalResults = -1;
+ this._endIndex = -1;
+ this._curRequest = undefined;
+ this._maxSearchIndex = 0;
+ }
+
+ enter = async (e: React.KeyboardEvent) => {
+ console.log(e.key);
+ if (e.key === "Enter") {
+ let newdocs = await this.getAllResults(this.query)
+ let things = newdocs.docs
+ console.log(things);
+ this.content = Docs.Create.TreeDocument(things, { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs: "Results"` });
+
+ }
+ }
+
+
+ @action
+ submitSearch = async () => {
+ let query = this._searchString;
+ query = FilterBox.Instance.getFinalQuery(query);
+ this._results = [];
+ this._resultsSet.clear();
+ this._isSearch = [];
+ this._visibleElements = [];
+ FilterBox.Instance.closeFilter();
+
+ //if there is no query there should be no result
+ if (query === "") {
+ return;
+ }
+ else {
+ this._endIndex = 12;
+ this._maxSearchIndex = 0;
+ this._numTotalResults = -1;
+ await this.getResults(query);
+ }
+
+ runInAction(() => {
+ this._resultsOpen = true;
+ this._searchbarOpen = true;
+ this._openNoResults = true;
+ this.resultsScrolled();
+ });
+ }
+
+ getAllResults = async (query: string) => {
+ return SearchUtil.Search(query, true, { fq: this.filterQuery, start: 0, rows: 10000000 });
+ }
+
+ private get filterQuery() {
+ const types = FilterBox.Instance.filterTypes;
+ const includeDeleted = FilterBox.Instance.getDataStatus();
+ return "NOT baseProto_b:true" + (includeDeleted ? "" : " AND NOT deleted_b:true") + (types ? ` AND (${types.map(type => `({!join from=id to=proto_i}type_t:"${type}" AND NOT type_t:*) OR type_t:"${type}" OR type_t:"extension"`).join(" ")})` : "");
+ }
+
+
+ private NumResults = 25;
+ private lockPromise?: Promise<void>;
+ getResults = async (query: string) => {
+ if (this.lockPromise) {
+ await this.lockPromise;
+ }
+ this.lockPromise = new Promise(async res => {
+ while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) {
+ this._curRequest = SearchUtil.Search(query, true, { fq: this.filterQuery, start: this._maxSearchIndex, rows: this.NumResults, hl: true, "hl.fl": "*" }).then(action(async (res: SearchUtil.DocSearchResult) => {
+
+ // happens at the beginning
+ if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) {
+ this._numTotalResults = res.numFound;
+ }
+
+ const highlighting = res.highlighting || {};
+ const highlightList = res.docs.map(doc => highlighting[doc[Id]]);
+ const lines = new Map<string, string[]>();
+ res.docs.map((doc, i) => lines.set(doc[Id], res.lines[i]));
+ const docs = await Promise.all(res.docs.map(async doc => (await Cast(doc.extendsDoc, Doc)) || doc));
+ const highlights: typeof res.highlighting = {};
+ docs.forEach((doc, index) => highlights[doc[Id]] = highlightList[index]);
+ const filteredDocs = FilterBox.Instance.filterDocsByType(docs);
+ runInAction(() => {
+ // this._results.push(...filteredDocs);
+ filteredDocs.forEach(doc => {
+ const index = this._resultsSet.get(doc);
+ const highlight = highlights[doc[Id]];
+ const line = lines.get(doc[Id]) || [];
+ const hlights = highlight ? Object.keys(highlight).map(key => key.substring(0, key.length - 2)) : [];
+ if (index === undefined) {
+ this._resultsSet.set(doc, this._results.length);
+ this._results.push([doc, hlights, line]);
+ } else {
+ this._results[index][1].push(...hlights);
+ this._results[index][2].push(...line);
+ }
+ });
+ });
+
+ this._curRequest = undefined;
+ }));
+ this._maxSearchIndex += this.NumResults;
+
+ await this._curRequest;
+ }
+ this.resultsScrolled();
+ res();
+ });
+ return this.lockPromise;
+ }
+
+ collectionRef = React.createRef<HTMLSpanElement>();
+ startDragCollection = async () => {
+ const res = await this.getAllResults(FilterBox.Instance.getFinalQuery(this._searchString));
+ const 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 {
+ return Doc.MakeAlias(doc);
+ }
+ });
+ let x = 0;
+ let y = 0;
+ for (const doc of docs.map(d => Doc.Layout(d))) {
+ 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) {
+ doc._width = size;
+ doc._height = size * aspect;
+ } else {
+ doc._width = size;
+ doc._height = size;
+ }
+ x += 250;
+ if (x > 1000) {
+ x = 0;
+ y += 300;
+ }
+ }
+ //return Docs.Create.TreeDocument(docs, { _width: 200, _height: 400, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` });
+ return Docs.Create.SearchDocument(docs, { _width: 200, _height: 400, searchText: this._searchString, title: `Search Docs: "${this._searchString}"` });
+ }
+
+ @action.bound
+ openSearch(e: React.SyntheticEvent) {
+ e.stopPropagation();
+ this._openNoResults = false;
+ FilterBox.Instance.closeFilter();
+ this._resultsOpen = true;
+ this._searchbarOpen = true;
+ FilterBox.Instance._pointerTime = e.timeStamp;
+ }
+
+ @action.bound
+ closeSearch = () => {
+ FilterBox.Instance.closeFilter();
+ this.closeResults();
+ this._searchbarOpen = false;
+ }
+
+ @action.bound
+ closeResults() {
+ this._resultsOpen = false;
+ this._results = [];
+ this._resultsSet.clear();
+ this._visibleElements = [];
+ this._numTotalResults = -1;
+ this._endIndex = -1;
+ this._curRequest = undefined;
+ }
+
+ @action
+ resultsScrolled = (e?: React.UIEvent<HTMLDivElement>) => {
+ if (!this.resultsRef.current) return;
+ const scrollY = e ? e.currentTarget.scrollTop : this.resultsRef.current ? this.resultsRef.current.scrollTop : 0;
+ const itemHght = 53;
+ const startIndex = Math.floor(Math.max(0, scrollY / itemHght));
+ const endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (this.resultsRef.current.getBoundingClientRect().height / itemHght)));
+
+ this._endIndex = endIndex === -1 ? 12 : endIndex;
+
+ if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
+ this._visibleElements = [<div className="no-result">No Search Results</div>];
+ return;
+ }
+
+ if (this._numTotalResults <= this._maxSearchIndex) {
+ this._numTotalResults = this._results.length;
+ }
+
+ // only hit right at the beginning
+ // visibleElements is all of the elements (even the ones you can't see)
+ else if (this._visibleElements.length !== this._numTotalResults) {
+ // undefined until a searchitem is put in there
+ this._visibleElements = Array<JSX.Element>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
+ // indicates if things are placeholders
+ this._isSearch = Array<undefined>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
+ }
+
+ for (let i = 0; i < this._numTotalResults; i++) {
+ //if the index is out of the window then put a placeholder in
+ //should ones that have already been found get set to placeholders?
+ if (i < startIndex || i > endIndex) {
+ if (this._isSearch[i] !== "placeholder") {
+ this._isSearch[i] = "placeholder";
+ this._visibleElements[i] = <div className="searchBox-placeholder" key={`searchBox-placeholder-${i}`}>Loading...</div>;
+ }
+ }
+ else {
+ if (this._isSearch[i] !== "search") {
+ let result: [Doc, string[], string[]] | undefined = undefined;
+ if (i >= this._results.length) {
+ this.getResults(this._searchString);
+ if (i < this._results.length) result = this._results[i];
+ if (result) {
+ const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
+ this._visibleElements[i] = <SearchItem doc={result[0]} query={this._searchString} key={result[0][Id]} lines={result[2]} highlighting={highlights} />;
+ this._isSearch[i] = "search";
+ }
+ }
+ else {
+ result = this._results[i];
+ if (result) {
+ const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
+ this._visibleElements[i] = <SearchItem doc={result[0]} query={this._searchString} key={result[0][Id]} lines={result[2]} highlighting={highlights} />;
+ this._isSearch[i] = "search";
+ }
+ }
+ }
+ }
+ }
+ if (this._maxSearchIndex >= this._numTotalResults) {
+ this._visibleElements.length = this._results.length;
+ this._isSearch.length = this._results.length;
+ }
+ }
+
+ @computed
+ get resFull() { return this._numTotalResults <= 8; }
+
+ @computed
+ get resultHeight() { return this._numTotalResults * 70; }
+
+ render() {
+ const isEditing = this.editingMetadata;
+ return (
+ <div style={{ pointerEvents: "all" }}>
+ <ContentFittingDocumentView {...this.props}
+ Document={this.content}
+ getTransform={this.props.ScreenToLocalTransform}>
+ </ContentFittingDocumentView>
+ <div
+ style={{
+ position: "absolute",
+ right: 0,
+ width: 20,
+ height: 20,
+ background: "black",
+ pointerEvents: "all",
+ opacity: 1,
+ transition: "0.4s opacity ease",
+ zIndex: 99,
+ top: 0,
+ }}
+ title={"Add Metadata"}
+ onClick={action(() => { this.editingMetadata = !this.editingMetadata })}
+ />
+ <div className="editableclass" onKeyPress={this.enter} style={{ opacity: isEditing ? 1 : 0, pointerEvents: isEditing ? "auto" : "none", transition: "0.4s opacity ease", position: "absolute", top: 0, left: 0, height: 20, width: "-webkit-fill-available" }}>
+ <EditableView
+ contents={this.query}
+ SetValue={this.updateKey}
+ GetValue={() => ""}
+ />
+ </div>
+ </div >
+ );
+ }
+
+} \ No newline at end of file
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 68501fca2..fc61487e5 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -35,6 +35,8 @@ import { WebBox } from "./WebBox";
import { InkingStroke } from "../InkingStroke";
import React = require("react");
import { RecommendationsBox } from "../RecommendationsBox";
+import { SearchBox } from "../search/SearchBox";
+
import { TraceMobx } from "../../../new_fields/util";
const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 02a1ac527..75186f018 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -275,6 +275,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
onClick = (e: React.MouseEvent | React.PointerEvent) => {
if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick &&
(Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) {
+ console.log("click");
+
e.stopPropagation();
let preventDefault = true;
this.props.bringToFront(this.props.Document);
@@ -296,6 +298,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
} else if (this.Document.type === DocumentType.BUTTON) {
UndoManager.RunInBatch(() => ScriptBox.EditButtonScript("On Button Clicked ...", this.props.Document, "onClick", e.clientX, e.clientY), "on button click");
} else if (this.Document.isButton) {
+ console.log("button3");
+
SelectionManager.SelectDoc(this, e.ctrlKey); // don't think this should happen if a button action is actually triggered.
UndoManager.RunInBatch(() => this.buttonClick(e.altKey, e.ctrlKey), "on link button follow");
} else {
diff --git a/src/client/views/nodes/QueryBox.tsx b/src/client/views/nodes/QueryBox.tsx
index 99b5810fc..95ea3e099 100644
--- a/src/client/views/nodes/QueryBox.tsx
+++ b/src/client/views/nodes/QueryBox.tsx
@@ -1,11 +1,22 @@
import React = require("react");
import { library } from '@fortawesome/fontawesome-svg-core';
import { faArrowLeft, faArrowRight, faEdit, faMinus, faPlay, faPlus, faStop, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { IReactionDisposer } from "mobx";
+import { IReactionDisposer, computed } from "mobx";
import { observer } from "mobx-react";
-import { FilterBox } from "../search/FilterBox";
import { FieldView, FieldViewProps } from './FieldView';
import "./PresBox.scss";
+import { SearchBox } from "../search/SearchBox";
+import { SelectionManager } from "../../util/SelectionManager";
+import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
+import { emptyFunction, returnOne } from "../../../Utils";
+import { DocAnnotatableComponent } from '../DocComponent';
+import { makeInterface, createSchema } from "../../../new_fields/Schema";
+import { documentSchema } from "../../../new_fields/documentSchemas";
+import { TraceMobx } from "../../../new_fields/util";
+import { Id } from '../../../new_fields/FieldSymbols';
+import { StrCast } from "../../../new_fields/Types";
+
+
library.add(faArrowLeft);
library.add(faArrowRight);
@@ -16,8 +27,19 @@ library.add(faTimes);
library.add(faMinus);
library.add(faEdit);
+export const pageSchema = createSchema({
+ curPage: "number",
+ fitWidth: "boolean",
+ googlePhotosUrl: "string",
+ googlePhotosTags: "string"
+});
+
+
+type QueryDocument = makeInterface<[typeof pageSchema, typeof documentSchema]>;
+const QueryDocument = makeInterface(pageSchema, documentSchema);
+
@observer
-export class QueryBox extends React.Component<FieldViewProps> {
+export class QueryBox extends DocAnnotatableComponent<FieldViewProps, QueryDocument>(QueryDocument) {
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(QueryBox, fieldKey); }
_docListChangedReaction: IReactionDisposer | undefined;
componentDidMount() {
@@ -27,9 +49,49 @@ export class QueryBox extends React.Component<FieldViewProps> {
this._docListChangedReaction && this._docListChangedReaction();
}
+ @computed get content() {
+ let key = this.props.Document[Id];
+ let sq = StrCast(this.props.Document.sq);
+ let fq= StrCast(this.props.Document.fq);
+ if (this.props.Document.sq){
+ console.log("yes");
+ console.log(sq);
+ console.log(fq);
+ return <SearchBox id={key} sq={sq} fq={fq}/>
+ }
+ else {
+ console.log("no");
+ return <SearchBox id={key} />
+ }
+ }
+ contentFunc = () => [this.content];
+
+
render() {
- return <div style={{ width: "100%", height: "100%", position: "absolute", pointerEvents: "all" }}>
- <FilterBox></FilterBox>
- </div>;
+ const dragging = !SelectionManager.GetIsDragging() ? "" : "-dragging";
+ return <div className={`queryBox${dragging}`} style={{ width: "100%", height: "100%", position: "absolute", pointerEvents: "all" }} >
+ {/* <CollectionFreeFormView {...this.props}
+ PanelHeight={this.props.PanelHeight}
+ PanelWidth={this.props.PanelWidth}
+ annotationsKey={this.annotationKey}
+ isAnnotationOverlay={true}
+ focus={this.props.focus}
+ isSelected={this.props.isSelected}
+ select={emptyFunction}
+ active={this.active}
+ ContentScaling={returnOne}
+ whenActiveChanged={this.whenActiveChanged}
+ removeDocument={this.removeDocument}
+ moveDocument={this.moveDocument}
+ addDocument={this.addDocument}
+ CollectionView={undefined}
+ ScreenToLocalTransform={this.props.ScreenToLocalTransform}
+ renderDepth={this.props.renderDepth + 1}
+ ContainingCollectionDoc={this.props.ContainingCollectionDoc}
+ chromeCollapsed={true}>
+ {this.contentFunc}
+ </CollectionFreeFormView> */}
+ {this.contentFunc()}
+ </div >;
}
} \ No newline at end of file
diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index a9d48219a..8c97d5dbc 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -17,8 +17,8 @@ interface CheckBoxProps {
export class CheckBox extends React.Component<CheckBoxProps>{
// true = checked, false = unchecked
@observable private _status: boolean;
- @observable private uncheckTimeline: anime.AnimeTimelineInstance;
- @observable private checkTimeline: anime.AnimeTimelineInstance;
+ // @observable private uncheckTimeline: anime.AnimeTimelineInstance;
+ // @observable private checkTimeline: anime.AnimeTimelineInstance;
@observable private checkRef: any;
@observable private _resetReaction?: IReactionDisposer;
@@ -28,87 +28,87 @@ export class CheckBox extends React.Component<CheckBoxProps>{
this._status = this.props.originalStatus;
this.checkRef = React.createRef();
- this.checkTimeline = anime.timeline({
- loop: false,
- autoplay: false,
- direction: "normal",
- }); this.uncheckTimeline = anime.timeline({
- loop: false,
- autoplay: false,
- direction: "normal",
- });
+ // this.checkTimeline = anime.timeline({
+ // loop: false,
+ // autoplay: false,
+ // direction: "normal",
+ // }); this.uncheckTimeline = anime.timeline({
+ // loop: false,
+ // autoplay: false,
+ // direction: "normal",
+ // });
}
- componentDidMount = () => {
- this.uncheckTimeline.add({
- targets: this.checkRef.current,
- easing: "easeInOutQuad",
- duration: 500,
- opacity: 0,
- });
- this.checkTimeline.add({
- targets: this.checkRef.current,
- easing: "easeInOutQuad",
- duration: 500,
- strokeDashoffset: [anime.setDashoffset, 0],
- opacity: 1
- });
+ // componentDidMount = () => {
+ // this.uncheckTimeline.add({
+ // targets: this.checkRef.current,
+ // easing: "easeInOutQuad",
+ // duration: 500,
+ // opacity: 0,
+ // });
+ // this.checkTimeline.add({
+ // targets: this.checkRef.current,
+ // easing: "easeInOutQuad",
+ // duration: 500,
+ // strokeDashoffset: [anime.setDashoffset, 0],
+ // opacity: 1
+ // });
- if (this.props.originalStatus) {
- this.checkTimeline.play();
- this.checkTimeline.restart();
- }
+ // if (this.props.originalStatus) {
+ // this.checkTimeline.play();
+ // this.checkTimeline.restart();
+ // }
- this._resetReaction = reaction(
- () => this.props.parent._resetBoolean,
- () => {
- if (this.props.parent._resetBoolean) {
- runInAction(() => {
- this.reset();
- this.props.parent._resetCounter++;
- if (this.props.parent._resetCounter === this.props.numCount) {
- this.props.parent._resetCounter = 0;
- this.props.parent._resetBoolean = false;
- }
- });
- }
- },
- );
- }
+ // this._resetReaction = reaction(
+ // () => this.props.parent._resetBoolean,
+ // () => {
+ // if (this.props.parent._resetBoolean) {
+ // runInAction(() => {
+ // this.reset();
+ // this.props.parent._resetCounter++;
+ // if (this.props.parent._resetCounter === this.props.numCount) {
+ // this.props.parent._resetCounter = 0;
+ // this.props.parent._resetBoolean = false;
+ // }
+ // });
+ // }
+ // },
+ // );
+ // }
- @action.bound
- reset() {
- if (this.props.default) {
- if (!this._status) {
- this._status = true;
- this.checkTimeline.play();
- this.checkTimeline.restart();
- }
- }
- else {
- if (this._status) {
- this._status = false;
- this.uncheckTimeline.play();
- this.uncheckTimeline.restart();
- }
- }
+ // @action.bound
+ // reset() {
+ // if (this.props.default) {
+ // if (!this._status) {
+ // this._status = true;
+ // this.checkTimeline.play();
+ // this.checkTimeline.restart();
+ // }
+ // }
+ // else {
+ // if (this._status) {
+ // this._status = false;
+ // this.uncheckTimeline.play();
+ // this.uncheckTimeline.restart();
+ // }
+ // }
- this.props.updateStatus(this.props.default);
- }
+ // this.props.updateStatus(this.props.default);
+ // }
@action.bound
onClick = () => {
- if (this._status) {
- this.uncheckTimeline.play();
- this.uncheckTimeline.restart();
- }
- else {
- this.checkTimeline.play();
- this.checkTimeline.restart();
+ // if (this._status) {
+ // this.uncheckTimeline.play();
+ // this.uncheckTimeline.restart();
+ // }
+ // else {
+ // this.checkTimeline.play();
+ // this.checkTimeline.restart();
- }
- this._status = !this._status;
- this.props.updateStatus(this._status);
+ // }
+ // this._status = !this._status;
+ // this.props.updateStatus(this._status);
}
diff --git a/src/client/views/search/FilterBox.scss b/src/client/views/search/FilterBox.scss
index ebb39460d..094ea9cc5 100644
--- a/src/client/views/search/FilterBox.scss
+++ b/src/client/views/search/FilterBox.scss
@@ -4,7 +4,6 @@
.filter-form {
padding: 25px;
width: 440px;
- background: whitesmoke;
position: relative;
right: 1px;
color: grey;
@@ -12,9 +11,7 @@
display: inline-block;
transform-origin: top;
overflow: auto;
- border-radius: 15px;
- box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
- border: solid #BBBBBBBB 1px;
+ border-bottom: solid black 3px;
.top-filter-header {
@@ -124,7 +121,7 @@
max-width: 40px;
flex: initial;
- &.icon{
+ &.icon {
width: 40px;
text-align: center;
margin-bottom: 5px;
@@ -150,7 +147,7 @@
transition: all 0.2s ease-in-out;
}
- &.icon:hover + .description {
+ &.icon:hover+.description {
opacity: 1;
}
}
diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx
index d4c9e67fb..1c05ff864 100644
--- a/src/client/views/search/FilterBox.tsx
+++ b/src/client/views/search/FilterBox.tsx
@@ -387,7 +387,7 @@ export class FilterBox extends React.Component {
{/* {this.getActiveFilters()} */}
</div>
{this._filterOpen ? (
- <div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
+ <div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex", background: "black" } : { display: "none" }}>
<div className="top-filter-header" style={{ display: "flex", width: "100%" }}>
<div id="header">Filter Search Results</div>
<div style={{ marginLeft: "auto" }}></div>
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index 2555ad271..013dcd57e 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -2,10 +2,9 @@
.icon-bar {
display: flex;
+ flex-wrap: wrap;
justify-content: space-evenly;
- align-items: center;
- height: 35px;
+ height: auto;
width: 100%;
- flex-wrap: wrap;
- margin-bottom: 10px;
+ flex-direction: row-reverse;
} \ No newline at end of file
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index cff397407..46c109934 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -9,7 +9,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import * as _ from "lodash";
import { IconButton } from './IconButton';
-import { FilterBox } from './FilterBox';
+import { DocumentType } from "../../documents/DocumentTypes";
+
library.add(faSearch);
library.add(faObjectGroup);
@@ -25,6 +26,9 @@ library.add(faBan);
@observer
export class IconBar extends React.Component {
+ public _allIcons: string[] = [DocumentType.AUDIO, DocumentType.COL, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.TEXT, DocumentType.VID, DocumentType.WEB];
+
+ @observable private _icons: string[] = this._allIcons;
static Instance: IconBar;
@@ -33,16 +37,22 @@ export class IconBar extends React.Component {
@observable public _reset: number = 0;
@observable public _select: number = 0;
+ @action.bound
+ updateIcon(newArray: string[]) { this._icons = newArray; }
+
+ @action.bound
+ getIcons(): string[] { return this._icons; }
+
constructor(props: any) {
super(props);
IconBar.Instance = this;
}
@action.bound
- getList(): string[] { return FilterBox.Instance.getIcons(); }
+ getList(): string[] { return this.getIcons(); }
@action.bound
- updateList(newList: string[]) { FilterBox.Instance.updateIcon(newList); }
+ updateList(newList: string[]) { this.updateIcon(newList); }
@action.bound
resetSelf = () => {
@@ -53,13 +63,13 @@ export class IconBar extends React.Component {
@action.bound
selectAll = () => {
this._selectAllClicked = true;
- this.updateList(FilterBox.Instance._allIcons);
+ this.updateList(this._allIcons);
}
render() {
return (
<div className="icon-bar">
- {FilterBox.Instance._allIcons.map((type: string) =>
+ {this._allIcons.map((type: string) =>
<IconButton key={type.toString()} type={type} />
)}
</div>
diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss
index 4a3107676..4ec03c7c9 100644
--- a/src/client/views/search/IconButton.scss
+++ b/src/client/views/search/IconButton.scss
@@ -5,7 +5,6 @@
flex-direction: column;
align-items: center;
width: 30px;
- height: 60px;
.type-icon {
height: 30px;
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index f01508141..4f94139d9 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -11,7 +11,6 @@ import '../globalCssVariables.scss';
import * as _ from "lodash";
import { IconBar } from './IconBar';
import { props } from 'bluebird';
-import { FilterBox } from './FilterBox';
import { Search } from '../../../server/Search';
import { gravity } from 'sharp';
@@ -34,7 +33,7 @@ interface IconButtonProps {
@observer
export class IconButton extends React.Component<IconButtonProps>{
- @observable private _isSelected: boolean = FilterBox.Instance.getIcons().indexOf(this.props.type) !== -1;
+ @observable private _isSelected: boolean = IconBar.Instance.getIcons().indexOf(this.props.type) !== -1;
@observable private _hover = false;
private _resetReaction?: IReactionDisposer;
private _selectAllReaction?: IReactionDisposer;
@@ -108,7 +107,7 @@ export class IconButton extends React.Component<IconButtonProps>{
@action.bound
onClick = () => {
- const newList: string[] = FilterBox.Instance.getIcons();
+ const newList: string[] = IconBar.Instance.getIcons();
if (!this._isSelected) {
this._isSelected = true;
@@ -119,21 +118,24 @@ export class IconButton extends React.Component<IconButtonProps>{
_.pull(newList, this.props.type);
}
- FilterBox.Instance.updateIcon(newList);
+ IconBar.Instance.updateIcon(newList);
}
selected = {
opacity: 1,
- backgroundColor: "rgb(128, 128, 128)"
+ backgroundColor: "#121721",
+ //backgroundColor: "rgb(128, 128, 128)"
};
notSelected = {
opacity: 0.2,
+ backgroundColor: "#121721",
};
hoverStyle = {
opacity: 1,
- backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent
+ backgroundColor: "rgb(128, 128, 128)"
+ //backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent
};
@action.bound
@@ -186,7 +188,7 @@ export class IconButton extends React.Component<IconButtonProps>{
>
{this.getFA()}
</div>
- <div className="filter-description">{this.props.type}</div>
+ {/* <div className="filter-description">{this.props.type}</div> */}
</div>
);
}
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index f492ea773..ec4eda643 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -4,20 +4,21 @@
.searchBox-container {
display: flex;
flex-direction: column;
- width:100%;
- height:100%;
+ width: 100%;
+ height: 100%;
position: absolute;
font-size: 10px;
line-height: 1;
overflow: hidden;
+ background: lightgrey,
}
+
.searchBox-bar {
height: 32px;
display: flex;
justify-content: flex-end;
align-items: center;
padding-left: 2px;
- padding-right: 2px;
.searchBox-barChild {
@@ -33,8 +34,7 @@
-webkit-transition: width 0.4s;
transition: width 0.4s;
align-self: stretch;
- margin-left: 2px;
- margin-right: 2px
+
}
.searchBox-input:focus {
@@ -44,6 +44,10 @@
&.searchBox-filter {
align-self: stretch;
+ button:hover{
+ transform:scale(1.0);
+ background:"#121721";
+ }
}
&.searchBox-submit {
@@ -65,7 +69,7 @@
}
.searchBox-results {
- display:flex;
+ display: flex;
flex-direction: column;
top: 300px;
display: flex;
@@ -83,6 +87,249 @@
text-transform: uppercase;
text-align: left;
font-weight: bold;
- margin-left: 28px;
+ }
+}
+
+.filter-form {
+ position: relative;
+ background: #121721;
+ flex-direction: column;
+ transform-origin: top;
+ transition: height 0.3s ease, display 0.6s ease;
+ height:0px;
+ overflow:hidden;
+
+
+ .filter-header {
+ display: flex;
+ position: relative;
+ flex-wrap:wrap;
+ right: 1px;
+ color: grey;
+ flex-direction: row-reverse;
+ transform-origin: top;
+ justify-content: space-evenly;
+ margin-bottom: 5px;
+ overflow:hidden;
+ transition:height 0.3s ease-out;
+
+
+
+ .filter-item {
+ position: relative;
+ border:1px solid grey;
+ border-radius: 16px;
+
+ }
+ }
+
+ .filter-body {
+ position: relative;
+ right: 1px;
+ color: grey;
+ transform-origin: top;
+ border-top: 0px;
+ //padding-top: 5px;
+ margin-left: 10px;
+ margin-right: 10px;
+ overflow:hidden;
+ transition:height 0.3s ease-out;
+ height:0px;
+
+ }
+ .filter-key {
+ position: relative;
+ right: 1px;
+ color: grey;
+ transform-origin: top;
+ border-top: 0px;
+ //padding-top: 5px;
+ margin-left: 10px;
+ margin-right: 10px;
+ overflow:hidden;
+ transition:height 0.3s ease-out;
+ height:0px;
+ .filter-keybar {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ height: auto;
+ width: 100%;
+ flex-direction: row-reverse;
+ margin-top:5px;
+
+ .filter-item {
+ position: relative;
+ border:1px solid grey;
+ border-radius: 16px;
+
+ }
+ }
+
+
+ }
+}
+
+// .top-filter-header {
+
+// #header {
+// text-transform: uppercase;
+// letter-spacing: 2px;
+// font-size: 13;
+// width: 80%;
+// }
+
+// .close-icon {
+// width: 20%;
+// opacity: .6;
+// position: relative;
+// display: block;
+
+// .line {
+// display: block;
+// background: $alt-accent;
+// width: 20;
+// height: 3;
+// position: absolute;
+// right: 0;
+// border-radius: ($height-line / 2);
+
+// &.line-1 {
+// transform: rotate(45deg);
+// top: 45%;
+// }
+
+// &.line-2 {
+// transform: rotate(-45deg);
+// top: 45%;
+// }
+// }
+// }
+
+// .close-icon:hover {
+// opacity: 1;
+// }
+
+// }
+
+// .filter-options {
+
+// .filter-div {
+// margin-top: 10px;
+// margin-bottom: 10px;
+// display: inline-block;
+// width: 100%;
+// border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
+// border-top-style: solid;
+
+// .filter-header {
+// display: flex;
+// align-items: center;
+// margin-bottom: 10px;
+// letter-spacing: 2px;
+
+// .filter-title {
+// font-size: 13;
+// text-transform: uppercase;
+// margin-top: 10px;
+// margin-bottom: 10px;
+// -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;
+// }
+// }
+
+// .filter-header:hover .filter-title {
+// transform: scale(1.05);
+// }
+
+// .filter-panel {
+// max-height: 0px;
+// width: 100%;
+// overflow: hidden;
+// opacity: 0;
+// transform-origin: top;
+// -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;
+// text-align: center;
+// }
+// }
+// }
+
+// .filter-buttons {
+// border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
+// border-top-style: solid;
+// padding-top: 10px;
+// }
+
+
+.active-filters {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: flex-end;
+ width: 100%;
+ margin-right: 30px;
+ position: relative;
+
+ .active-icon {
+ max-width: 40px;
+ flex: initial;
+
+ &.icon {
+ width: 40px;
+ text-align: center;
+ margin-bottom: 5px;
+ position: absolute;
+ }
+
+ &.container {
+ display: flex;
+ flex-direction: column;
+ width: 40px;
+ }
+
+ &.description {
+ text-align: center;
+ top: 40px;
+ position: absolute;
+ width: 40px;
+ font-size: 9px;
+ opacity: 0;
+ -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;
+ }
+
+ &.icon:hover+.description {
+ opacity: 1;
+ }
+ }
+
+ .col-icon {
+ height: 35px;
+ margin-left: 5px;
+ width: 35px;
+ background-color: black;
+ color: white;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .save-filter,
+ .reset-filter,
+ .all-filter {
+ background-color: gray;
+ }
+
+ .save-filter:hover,
+ .reset-filter:hover,
+ .all-filter:hover {
+ background-color: $darker-alt-accent;
+ }
}
} \ No newline at end of file
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 586365f6e..56b769396 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1,27 +1,44 @@
import { library } from '@fortawesome/fontawesome-svg-core';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, runInAction } from 'mobx';
+import { action, computed, observable, runInAction, IReactionDisposer, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import * as rp from 'request-promise';
import { Doc } from '../../../new_fields/Doc';
import { Id } from '../../../new_fields/FieldSymbols';
-import { Cast, NumCast } from '../../../new_fields/Types';
+import { Cast, NumCast, StrCast } from '../../../new_fields/Types';
import { Utils } from '../../../Utils';
import { Docs } from '../../documents/Documents';
import { SetupDrag } from '../../util/DragManager';
import { SearchUtil } from '../../util/SearchUtil';
-import { FilterBox } from './FilterBox';
-import "./FilterBox.scss";
import "./SearchBox.scss";
import { SearchItem } from './SearchItem';
import { IconBar } from './IconBar';
+import { FieldFilters } from './FieldFilters';
+import { FieldView } from '../nodes/FieldView';
+import { DocumentType } from "../../documents/DocumentTypes";
+import { DocumentView } from '../nodes/DocumentView';
+import { SelectionManager } from '../../util/SelectionManager';
+
+
library.add(faTimes);
+export interface SearchProps {
+ id:string;
+ sq?:string;
+ fq?:string;
+}
+
+export enum Keys {
+ TITLE = "title",
+ AUTHOR = "author",
+ DATA = "data"
+}
+
@observer
-export class SearchBox extends React.Component {
+export class SearchBox extends React.Component<SearchProps> {
@observable private _searchString: string = "";
@observable private _resultsOpen: boolean = false;
@@ -42,14 +59,24 @@ export class SearchBox extends React.Component {
private _maxSearchIndex: number = 0;
private _curRequest?: Promise<any> = undefined;
+ public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchBox, fieldKey); }
+
+
+ //if true, any keywords can be used. if false, all keywords are required.
+ //this also serves as an indicator if the word status filter is applied
+ @observable private _basicWordStatus: boolean = false;
+ @observable private _nodeStatus: boolean = false;
+ @observable private _keyStatus: boolean = false;
+
constructor(props: any) {
super(props);
-
SearchBox.Instance = this;
this.resultsScrolled = this.resultsScrolled.bind(this);
}
+ private _reactionDisposer?: IReactionDisposer;
+
componentDidMount = () => {
if (this.inputRef.current) {
this.inputRef.current.focus();
@@ -57,8 +84,19 @@ export class SearchBox extends React.Component {
this._searchbarOpen = true;
});
}
+ if (this.props.sq && this.props.fq){
+ console.log(this.props.sq);
+ let sq= this.props.sq
+
+ let fq =this.props.fq;
+ runInAction(() => {
+ this._searchString=sq;
+ this.submitSearch();
+ });
+ }
}
+
@action
getViews = async (doc: Doc) => {
const results = await SearchUtil.GetViewsOfDocument(doc);
@@ -106,17 +144,179 @@ export class SearchBox extends React.Component {
}
}
+ public _allIcons: string[] = [DocumentType.AUDIO, DocumentType.COL, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.TEXT, DocumentType.VID, DocumentType.WEB, DocumentType.TEMPLATE];
+ //if true, any keywords can be used. if false, all keywords are required.
+ //this also serves as an indicator if the word status filter is applied
+ @observable private _filterOpen: boolean = false;
+ //if icons = all icons, then no icon filter is applied
+ @observable private _icons: string[] = this._allIcons;
+ //if all of these are true, no key filter is applied
+ @observable private _anyKeywordStatus: boolean = true;
+ @observable private _allKeywordStatus: boolean = true;
+ @observable private _titleFieldStatus: boolean = true;
+ @observable private _authorFieldStatus: boolean = true;
+ @observable private _dataFieldStatus: boolean = true;
+ //this also serves as an indicator if the collection status filter is applied
+ @observable public _deletedDocsStatus: boolean = false;
+ @observable private _collectionStatus = false;
+ @observable private _collectionSelfStatus = true;
+ @observable private _collectionParentStatus = true;
+
+
+ getFinalQuery(query: string): string {
+ //alters the query so it looks in the correct fields
+ //if this is true, then not all of the field boxes are checked
+ //TODO: data
+ if (this.fieldFiltersApplied) {
+ query = this.applyBasicFieldFilters(query);
+ query = query.replace(/\s+/g, ' ').trim();
+ }
+
+ //alters the query based on if all words or any words are required
+ //if this._wordstatus is false, all words are required and a + is added before each
+ if (!this._basicWordStatus) {
+ query = this.basicRequireWords(query);
+ query = query.replace(/\s+/g, ' ').trim();
+ }
+
+ //if should be searched in a specific collection
+ if (this._collectionStatus) {
+ query = this.addCollectionFilter(query);
+ query = query.replace(/\s+/g, ' ').trim();
+ }
+ return query;
+ }
+
+ basicRequireWords(query: string): string {
+ const oldWords = query.split(" ");
+ const newWords: string[] = [];
+ oldWords.forEach(word => {
+ const newWrd = "+" + word;
+ newWords.push(newWrd);
+ });
+ query = newWords.join(" ");
+
+ return query;
+ }
+
+ @action
+ filterDocsByType(docs: Doc[]) {
+ if (this._icons.length === 9) {
+ return docs;
+ }
+ const finalDocs: Doc[] = [];
+ docs.forEach(doc => {
+ const layoutresult = Cast(doc.type, "string");
+ if (layoutresult && this._icons.includes(layoutresult)) {
+ finalDocs.push(doc);
+ }
+ });
+ return finalDocs;
+ }
+
+ addCollectionFilter(query: string): string {
+ const collections: Doc[] = this.getCurCollections();
+ const oldWords = query.split(" ");
+
+ const collectionString: string[] = [];
+ collections.forEach(doc => {
+ const proto = doc.proto;
+ const protoId = (proto || doc)[Id];
+ const colString: string = "{!join from=data_l to=id}id:" + protoId + " ";
+ collectionString.push(colString);
+ });
+
+ let finalColString = collectionString.join(" ");
+ finalColString = finalColString.trim();
+ return "+(" + finalColString + ")" + query;
+ }
+
+ get filterTypes() {
+ return this._icons.length === 9 ? undefined : this._icons;
+ }
+
+ @action.bound
+ updateIcon(newArray: string[]) { this._icons = newArray; }
+
+ @action.bound
+ getIcons(): string[] { return this._icons; }
+
+//TODO: basically all of this
+ //gets all of the collections of all the docviews that are selected
+ //if a collection is the only thing selected, search only in that collection (not its container)
+ getCurCollections(): Doc[] {
+ const selectedDocs: DocumentView[] = SelectionManager.SelectedDocuments();
+ const collections: Doc[] = [];
+
+ selectedDocs.forEach(async element => {
+ const layout: string = StrCast(element.props.Document.layout);
+ //checks if selected view (element) is a collection. if it is, adds to list to search through
+ if (layout.indexOf("Collection") > -1) {
+ //makes sure collections aren't added more than once
+ if (!collections.includes(element.props.Document)) {
+ collections.push(element.props.Document);
+ }
+ }
+ //makes sure collections aren't added more than once
+ if (element.props.ContainingCollectionDoc && !collections.includes(element.props.ContainingCollectionDoc)) {
+ collections.push(element.props.ContainingCollectionDoc);
+ }
+ });
+
+ return collections;
+ }
+
+
+ applyBasicFieldFilters(query: string) {
+ let finalQuery = "";
+
+ if (this._titleFieldStatus) {
+ finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TITLE);
+ }
+ if (this._authorFieldStatus) {
+ finalQuery = finalQuery + this.basicFieldFilters(query, Keys.AUTHOR);
+ }
+ if (this._deletedDocsStatus) {
+ finalQuery = finalQuery + this.basicFieldFilters(query, Keys.DATA);
+ }
+ return finalQuery;
+ }
+
+ basicFieldFilters(query: string, type: string): string {
+ const oldWords = query.split(" ");
+ let mod = "";
+
+ if (type === Keys.AUTHOR) {
+ mod = " author_t:";
+ } if (type === Keys.DATA) {
+ //TODO
+ } if (type === Keys.TITLE) {
+ mod = " title_t:";
+ }
+
+ const newWords: string[] = [];
+ oldWords.forEach(word => {
+ const newWrd = mod + word;
+ newWords.push(newWrd);
+ });
+
+ query = newWords.join(" ");
+
+ return query;
+ }
+
+ get fieldFiltersApplied() { return !(this._authorFieldStatus && this._titleFieldStatus); }
+
+
+
@action
submitSearch = async () => {
let query = this._searchString;
- query = FilterBox.Instance.getFinalQuery(query);
+ this.getFinalQuery(query);
this._results = [];
this._resultsSet.clear();
this._isSearch = [];
this._visibleElements = [];
- FilterBox.Instance.closeFilter();
-
- //if there is no query there should be no result
if (query === "") {
return;
}
@@ -140,11 +340,14 @@ export class SearchBox extends React.Component {
}
private get filterQuery() {
- const types = FilterBox.Instance.filterTypes;
- const includeDeleted = FilterBox.Instance.getDataStatus();
+ const types = this.filterTypes;
+ const includeDeleted = this.getDataStatus();
return "NOT baseProto_b:true" + (includeDeleted ? "" : " AND NOT deleted_b:true") + (types ? ` AND (${types.map(type => `({!join from=id to=proto_i}type_t:"${type}" AND NOT type_t:*) OR type_t:"${type}" OR type_t:"extension"`).join(" ")})` : "");
}
+ getDataStatus() { return this._deletedDocsStatus; }
+
+
private NumResults = 25;
private lockPromise?: Promise<void>;
@@ -155,7 +358,6 @@ export class SearchBox extends React.Component {
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, { fq: this.filterQuery, start: this._maxSearchIndex, rows: this.NumResults, hl: true, "hl.fl": "*" }).then(action(async (res: SearchUtil.DocSearchResult) => {
-
// happens at the beginning
if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) {
this._numTotalResults = res.numFound;
@@ -168,9 +370,9 @@ export class SearchBox extends React.Component {
const docs = await Promise.all(res.docs.map(async doc => (await Cast(doc.extendsDoc, Doc)) || doc));
const highlights: typeof res.highlighting = {};
docs.forEach((doc, index) => highlights[doc[Id]] = highlightList[index]);
- const filteredDocs = FilterBox.Instance.filterDocsByType(docs);
+ const filteredDocs = this.filterDocsByType(docs);
runInAction(() => {
- // this._results.push(...filteredDocs);
+ //this._results.push(...filteredDocs);
filteredDocs.forEach(doc => {
const index = this._resultsSet.get(doc);
const highlight = highlights[doc[Id]];
@@ -200,9 +402,8 @@ export class SearchBox extends React.Component {
collectionRef = React.createRef<HTMLSpanElement>();
startDragCollection = async () => {
- const res = await this.getAllResults(FilterBox.Instance.getFinalQuery(this._searchString));
- const filtered = FilterBox.Instance.filterDocsByType(res.docs);
- // console.log(this._results)
+ const res = await this.getAllResults(this.getFinalQuery(this._searchString));
+ const filtered = this.filterDocsByType(res.docs);
const docs = filtered.map(doc => {
const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
if (isProto) {
@@ -234,22 +435,23 @@ export class SearchBox extends React.Component {
y += 300;
}
}
- return Docs.Create.TreeDocument(docs, { _width: 200, _height: 400, title: `Search Docs: "${this._searchString}"` });
+ console.log("create");
+ //return Docs.Create.TreeDocument(docs, { _width: 200, _height: 400, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` });
+ //return Docs.Create.SearchDocument(docs, { _width: 200, _height: 400, searchText: this._searchString, title: `Search Docs: "${this._searchString}"` });
+ return Docs.Create.QueryDocument({_autoHeight: true, title: this._searchString, fq: this.filterQuery, sq: this._searchString,
+ });
}
@action.bound
openSearch(e: React.SyntheticEvent) {
e.stopPropagation();
this._openNoResults = false;
- FilterBox.Instance.closeFilter();
this._resultsOpen = true;
this._searchbarOpen = true;
- FilterBox.Instance._pointerTime = e.timeStamp;
}
@action.bound
closeSearch = () => {
- FilterBox.Instance.closeFilter();
this.closeResults();
this._searchbarOpen = false;
}
@@ -337,9 +539,134 @@ export class SearchBox extends React.Component {
@computed
get resultHeight() { return this._numTotalResults * 70; }
+ //if true, any keywords can be used. if false, all keywords are required.
+ @action.bound
+ handleWordQueryChange = () => {
+ this._basicWordStatus = !this._basicWordStatus;
+ }
+
+ @action.bound
+ handleNodeChange = () => {
+ this._nodeStatus = !this._nodeStatus;
+ if (this._nodeStatus){
+ this.expandSection(`node${this.props.id}`)
+ }
+ else{
+ this.collapseSection(`node${this.props.id}`)
+ }
+ }
+
+ @action.bound
+ handleKeyChange = () => {
+ this._keyStatus = !this._keyStatus;
+ if (this._keyStatus){
+ this.expandSection(`key${this.props.id}`);
+ }
+ else{
+ this.collapseSection(`key${this.props.id}`);
+ }
+ }
+
+ @action.bound
+ handleFilterChange=() =>{
+ this._filterOpen=!this._filterOpen;
+ if (this._filterOpen){
+ this.expandSection(`filterhead${this.props.id}`);
+ document.getElementById(`filterhead${this.props.id}`)!.style.padding="5";
+ }
+ else{
+ this.collapseSection(`filterhead${this.props.id}`);
+
+
+ }
+ }
+ // @observable
+ // private menuHeight= 0;
+
+ @computed
+ get menuHeight(){
+ return document.getElementById("hi")?.clientHeight;
+ }
+
+
+ collapseSection(thing:string) {
+ let id = this.props.id;
+ let element= document.getElementById(thing)!;
+ // get the height of the element's inner content, regardless of its actual size
+ var sectionHeight = element.scrollHeight;
+
+ // temporarily disable all css transitions
+ var elementTransition = element.style.transition;
+ element.style.transition = '';
+
+ // on the next frame (as soon as the previous style change has taken effect),
+ // explicitly set the element's height to its current pixel height, so we
+ // aren't transitioning out of 'auto'
+ requestAnimationFrame(function() {
+ element.style.height = sectionHeight + 'px';
+ element.style.transition = elementTransition;
+
+ // on the next frame (as soon as the previous style change has taken effect),
+ // have the element transition to height: 0
+ requestAnimationFrame(function() {
+ element.style.height = 0 + 'px';
+ thing == `filterhead${id}`? document.getElementById(`filterhead${id}`)!.style.padding="0" : null;
+ });
+ });
+
+ // mark the section as "currently collapsed"
+ element.setAttribute('data-collapsed', 'true');
+ }
+
+ expandSection(thing:string) {
+ console.log("expand");
+ let element= document.getElementById(thing)!;
+ // get the height of the element's inner content, regardless of its actual size
+ var sectionHeight = element.scrollHeight;
+
+ // have the element transition to the height of its inner content
+ let temp = element.style.height;
+ element.style.height = sectionHeight + 'px';
+
+ // when the next css transition finishes (which should be the one we just triggered)
+ element.addEventListener('transitionend', function handler(e) {
+ // remove this event listener so it only gets triggered once
+ console.log("autoset");
+ element.removeEventListener('transitionend', handler);
+
+ // remove "height" from the element's inline styles, so it can return to its initial value
+ element.style.height="auto";
+ //element.style.height = undefined;
+ });
+
+ // mark the section as "currently not collapsed"
+ element.setAttribute('data-collapsed', 'false');
+
+ }
+
+ autoset(thing: string){
+ let element= document.getElementById(thing)!;
+ console.log("autoset");
+ element.removeEventListener('transitionend', function(e){});
+
+ // remove "height" from the element's inline styles, so it can return to its initial value
+ element.style.height="auto";
+ //element.style.height = undefined;
+ }
+
+ @action.bound
+ updateTitleStatus() { this._titleFieldStatus = !this._titleFieldStatus; }
+
+ @action.bound
+ updateAuthorStatus() { this._authorFieldStatus = !this._authorFieldStatus; }
+
+ @action.bound
+ updateDataStatus() { this._deletedDocsStatus = !this._deletedDocsStatus; }
+
render() {
+
return (
- <div className="searchBox-container" onPointerDown={e => { e.stopPropagation(); e.preventDefault(); }}>
+ <div className="searchBox-container">
<div className="searchBox-bar">
<span className="searchBox-barChild searchBox-collection" onPointerDown={SetupDrag(this.collectionRef, () => this._searchString ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection">
<FontAwesomeIcon icon="object-group" size="lg" />
@@ -347,10 +674,53 @@ export class SearchBox extends React.Component {
<input value={this._searchString} onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
style={{ width: this._searchbarOpen ? "500px" : "100px" }} />
- <button className="searchBox-barChild searchBox-filter" title="Advanced Filtering Options" onClick={() => { }} onPointerDown={FilterBox.Instance.stopProp}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button>
+ <button className="searchBox-barChild searchBox-filter" title="Advanced Filtering Options" onClick={() => this.handleFilterChange()}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button>
</div>
- <div className="searchBox-quickFilter" onPointerDown={this.openSearch}>
- <div className="filter-panel"><IconBar /></div>
+
+ <div id={`filterhead${this.props.id}`} className="filter-form" >
+ <div id={`filterhead2${this.props.id}`} className="filter-header" style={this._filterOpen ? { } : { }}>
+ <button className="filter-item" style={this._basicWordStatus ? { background: "#aaaaa3", } : {}} onClick={this.handleWordQueryChange}>Keywords</button>
+ <button className="filter-item" style={this._keyStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleKeyChange}>Keys</button>
+ <button className="filter-item" style={this._nodeStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleNodeChange}>Nodes</button>
+ </div>
+ <div id={`node${this.props.id}`} className="filter-body" style={this._nodeStatus ? { borderTop: "grey 1px solid" }: {borderTop: "0px"}}>
+ <IconBar />
+ </div>
+ <div className="filter-key" id={`key${this.props.id}`} style={this._keyStatus ? { borderTop: "grey 1px solid" }: {borderTop: "0px"}}>
+ <div className="filter-keybar">
+ <button className="filter-item" style={this._titleFieldStatus ? { background: "#aaaaa3", } : {}} onClick={this.updateTitleStatus}>Title</button>
+ <button className="filter-item" style={this._deletedDocsStatus ? { background: "#aaaaa3", } : {}} onClick={this.updateDataStatus}>Deleted Docs</button>
+ <button className="filter-item" style={this._authorFieldStatus ? { background: "#aaaaa3", } : {}} onClick={this.updateAuthorStatus}>Author</button>
+ </div>
+ </div>
+
+
+ {/* <div className="filter-options">
+ <div className="filter-div">
+ <div className="filter-header">
+ <div className='filter-title words'>Required words</div>
+ </div>
+ <div className="filter-panel" >
+ <button className="all-filter">Include All Keywords</button>
+ </div>
+ </div>
+ <div className="filter-div">
+ <div className="filter-header">
+ <div className="filter-title icon">Filter by type of node</div>
+ </div>
+ <div className="filter-panel"></div>
+ </div>
+ <div className="filter-div">
+ <div className="filter-header">
+ <div className="filter-title field">Filter by Basic Keys</div>
+ </div>
+ <div className="filter-panel">
+ <FieldFilters
+ titleFieldStatus={this._titleFieldStatus} dataFieldStatus={this._deletedDocsStatus} authorFieldStatus={this._authorFieldStatus}
+ updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} /> </div>
+ </div>
+ </div>
+ </div> */}
</div>
<div className="searchBox-results" onScroll={this.resultsScrolled} style={{
display: this._resultsOpen ? "flex" : "none",
diff --git a/src/server/ApiManagers/SessionManager.ts b/src/server/ApiManagers/SessionManager.ts
index bcaa6598f..c993c985f 100644
--- a/src/server/ApiManagers/SessionManager.ts
+++ b/src/server/ApiManagers/SessionManager.ts
@@ -2,7 +2,7 @@ import ApiManager, { Registration } from "./ApiManager";
import { Method, _permission_denied, AuthorizedCore, SecureHandler } from "../RouteManager";
import RouteSubscriber from "../RouteSubscriber";
import { sessionAgent } from "..";
-import { DashSessionAgent } from "../DashSession/DashSessionAgent";
+// import { DashSessionAgent } from "../DashSession/DashSessionAgent";
const permissionError = "You are not authorized!";
@@ -25,15 +25,15 @@ export default class SessionManager extends ApiManager {
protected initialize(register: Registration): void {
- register({
- method: Method.GET,
- subscription: this.secureSubscriber("debug", "to?"),
- secureHandler: this.authorizedAction(async ({ req: { params }, res }) => {
- const to = params.to || DashSessionAgent.notificationRecipient;
- const { error } = await sessionAgent.serverWorker.emit("debug", { to });
- res.send(error ? error.message : `Your request was successful: the server captured and compressed (but did not save) a new back up. It was sent to ${to}.`);
- })
- });
+ // register({
+ // method: Method.GET,
+ // subscription: this.secureSubscriber("debug", "to?"),
+ // secureHandler: this.authorizedAction(async ({ req: { params }, res }) => {
+ // const to = params.to || DashSessionAgent.notificationRecipient;
+ // const { error } = await sessionAgent.serverWorker.emit("debug", { to });
+ // res.send(error ? error.message : `Your request was successful: the server captured and compressed (but did not save) a new back up. It was sent to ${to}.`);
+ // })
+ // });
register({
method: Method.GET,
diff --git a/src/server/DashSession/DashSessionAgent.ts b/src/server/DashSession/DashSessionAgent.ts
index 1ed98cdbe..5cbba13de 100644
--- a/src/server/DashSession/DashSessionAgent.ts
+++ b/src/server/DashSession/DashSessionAgent.ts
@@ -226,4 +226,4 @@ export namespace DashSessionAgent {
export const notificationRecipient = "brownptcdash@gmail.com";
-} \ No newline at end of file
+}
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 4f82da44d..31667cbdc 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -89,6 +89,9 @@ export class CurrentUserUtils {
{ title: "use stamp", icon: "stamp", click: 'activateStamp(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
{ title: "use eraser", icon: "eraser", click: 'activateEraser(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "pink", activePen: doc },
{ title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.pen = this;', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "white", activePen: doc },
+ { title: "search", icon: "bolt", ignoreClick: true, drag: 'Docs.Create.SearchDocument({ _width: 200, title: "an image of a cat" })' },
+
+
];
return docProtoData.filter(d => !alreadyCreatedButtons?.includes(d.title)).map(data => Docs.Create.FontIconDocument({
_nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100,
@@ -249,7 +252,7 @@ export class CurrentUserUtils {
_width: 50, _height: 25, title: "Search", fontSize: 10, dontSelect: true,
letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
sourcePanel: Docs.Create.QueryDocument({
- title: "search stack", ignoreClick: true
+ title: "search stack",
}),
targetContainer: sidebarContainer,
lockedPosition: true,
diff --git a/src/server/index.ts b/src/server/index.ts
index f4446352f..8325f5d44 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -22,7 +22,7 @@ import GeneralGoogleManager from "./ApiManagers/GeneralGoogleManager";
import GooglePhotosManager from "./ApiManagers/GooglePhotosManager";
import { Logger } from "./ProcessFactory";
import { yellow } from "colors";
-import { DashSessionAgent } from "./DashSession/DashSessionAgent";
+// import { DashSessionAgent } from "./DashSession/DashSessionAgent";
import SessionManager from "./ApiManagers/SessionManager";
import { AppliedSessionAgent } from "./DashSession/Session/agents/applied_session_agent";
import { Utils } from "../Utils";
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 23:07:12 +0000