aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts2
-rw-r--r--src/client/views/SearchDocBox.tsx213
-rw-r--r--src/client/views/search/SearchBox.tsx2
3 files changed, 72 insertions, 145 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 86e459561..8ade14251 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -146,6 +146,8 @@ 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
+
}
class EmptyBox {
diff --git a/src/client/views/SearchDocBox.tsx b/src/client/views/SearchDocBox.tsx
index c64b7285a..da0872c43 100644
--- a/src/client/views/SearchDocBox.tsx
+++ b/src/client/views/SearchDocBox.tsx
@@ -2,10 +2,10 @@ import { observer } from "mobx-react";
import React = require("react");
import { observable, action, computed, runInAction } from "mobx";
import Measure from "react-measure";
-import "./RecommendationsBox.scss";
+import "./SearchBoxDoc.scss";
import { Doc, DocListCast, WidthSym, HeightSym } from "../../new_fields/Doc";
import { DocumentIcon } from "./nodes/DocumentIcon";
-import { StrCast, NumCast } from "../../new_fields/Types";
+import { StrCast, NumCast, BoolCast } from "../../new_fields/Types";
import { returnFalse, emptyFunction, returnEmptyString, returnOne } from "../../Utils";
import { Transform } from "../util/Transform";
import { ObjectField } from "../../new_fields/ObjectField";
@@ -21,13 +21,16 @@ 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";
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> {
@@ -45,164 +48,86 @@ export class SearchDocBox extends React.Component<FieldViewProps> {
constructor(props: FieldViewProps) {
super(props);
+ this.editingMetadata = this.editingMetadata || false;
}
- @action
- private DocumentIcon(doc: Doc) {
- let layoutresult = StrCast(doc.type);
- let renderDoc = doc;
- //let box: number[] = [];
- if (layoutresult.indexOf(DocumentType.COL) !== -1) {
- renderDoc = Doc.MakeDelegate(renderDoc);
- }
- let returnXDimension = () => 150;
- let returnYDimension = () => 150;
- let scale = () => returnXDimension() / NumCast(renderDoc.nativeWidth, returnXDimension());
- //let scale = () => 1;
- let newRenderDoc = Doc.MakeAlias(renderDoc); /// newRenderDoc -> renderDoc -> render"data"Doc -> TextProt
- newRenderDoc.height = NumCast(this.props.Document.documentIconHeight);
- newRenderDoc.autoHeight = false;
- const docview = <div>
- <DocumentView
- fitToBox={StrCast(doc.type).indexOf(DocumentType.COL) !== -1}
- Document={newRenderDoc}
- addDocument={returnFalse}
- removeDocument={returnFalse}
- ruleProvider={undefined}
- ScreenToLocalTransform={Transform.Identity}
- addDocTab={returnFalse}
- pinToPres={returnFalse}
- renderDepth={1}
- PanelWidth={returnXDimension}
- PanelHeight={returnYDimension}
- focus={emptyFunction}
- backgroundColor={returnEmptyString}
- parentActive={returnFalse}
- whenActiveChanged={returnFalse}
- bringToFront={emptyFunction}
- zoomToScale={emptyFunction}
- getScale={returnOne}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined}
- ContentScaling={scale}
- />
- </div>;
- return docview;
+ @computed
+ private get editingMetadata() {
+ return BoolCast(this.props.Document.editingMetadata);
}
- // @action
- // closeMenu = () => {
- // this._display = false;
- // this.previewDocs.forEach(doc => DocServer.DeleteDocument(doc[Id]));
- // this.previewDocs = [];
- // }
-
- // @action
- // resetDocuments = () => {
- // this._documents = [];
- // }
-
- // @action
- // displayRecommendations(x: number, y: number) {
- // this._pageX = x;
- // this._pageY = y;
- // this._display = true;
- // }
+ @computed
+ private set editingMetadata(value: boolean) {
+ this.props.Document.editingMetadata = value;
+ }
static readonly buffer = 20;
- // get pageX() {
- // const x = this._pageX;
- // if (x < 0) {
- // return 0;
- // }
- // const width = this._width;
- // if (x + width > window.innerWidth - RecommendationsBox.buffer) {
- // return window.innerWidth - RecommendationsBox.buffer - width;
- // }
- // return x;
- // }
-
- // get pageY() {
- // const y = this._pageY;
- // if (y < 0) {
- // return 0;
- // }
- // const height = this._height;
- // if (y + height > window.innerHeight - RecommendationsBox.buffer) {
- // return window.innerHeight - RecommendationsBox.buffer - height;
- // }
- // return y;
- // }
-
- // get createDocViews() {
- // return DocListCast(this.props.Document.data).map(doc => {
- // return (
- // <div className="content">
- // <span style={{ height: NumCast(this.props.Document.documentIconHeight) }} className="image-background">
- // {this.DocumentIcon(doc)}
- // </span>
- // <span className="score">{NumCast(doc.score).toFixed(4)}</span>
- // <div style={{ marginRight: 50 }} onClick={() => DocumentManager.Instance.jumpToDocument(doc, false)}>
- // <FontAwesomeIcon className="documentdecorations-icon" icon={"bullseye"} size="sm" />
- // </div>
- // <div style={{ marginRight: 50 }} onClick={() => DocUtils.MakeLink({ doc: this.props.Document.sourceDoc as Doc }, { doc: doc }, "User Selected Link", "Generated from Recommender", undefined)}>
- // <FontAwesomeIcon className="documentdecorations-icon" icon={"link"} size="sm" />
- // </div>
- // </div>
- // );
- // });
- // }
-
- componentDidMount() { //TODO: invoking a computedFn from outside an reactive context won't be memoized, unless keepAlive is set
+ componentDidMount() {
runInAction(() => {
- //if (this._docViews.length === 0) {
- //this._docViews =
- this.content = (Docs.Create.TreeDocument(DocListCast(Doc.GetProto(this.props.Document).data), { _width: 200, _height: 400, backgroundColor: "grey", title: `Search Docs: "Results"` }));
-
- // this._docViews = DocListCast(this.props.Document.data).map(doc => {
- // return (
- // <div className="content">
- // <span style={{ height: NumCast(this.props.Document.documentIconHeight) }} className="image-background">
- // {this.DocumentIcon(doc)}
- // </span>
- // <span className="score">{NumCast(doc.score).toFixed(4)}</span>
- // <div style={{ marginRight: 50 }} onClick={() => DocumentManager.Instance.jumpToDocument(doc, false)}>
- // <FontAwesomeIcon className="documentdecorations-icon" icon={"bullseye"} size="sm" />
- // </div>
- // <div style={{ marginRight: 50 }} onClick={() => DocUtils.MakeLink({ doc: this.props.Document.sourceDoc as Doc }, { doc: doc }, "User Selected Link", "Generated from Recommender", undefined)}>
- // <FontAwesomeIcon className="documentdecorations-icon" icon={"link"} size="sm" />
- // </div>
- // </div>
- // );
- // });
- //}
+ this.content = (Docs.Create.TreeDocument(DocListCast(Doc.GetProto(this.props.Document).data), { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs: "Results"` }));
+ this.query = StrCast(this.props.Document.searchText);
});
}
@observable
private content: Doc | undefined;
- render() { //TODO: Invariant violation: max depth exceeded error. Occurs when images are rendered.
- // if (!this._display) {
- // return null;
- // }
- // let style = { left: this.pageX, top: this.pageY };
- //const transform = "translate(" + (NumCast(this.props.node.x) + 350) + "px, " + NumCast(this.props.node.y) + "px"
- // let title = StrCast((this.props.Document.sourceDoc as Doc).title);
- // if (title.length > 15) {
- // title = title.substring(0, 15) + "...";
- // }
+ @action
+ updateKey = (newKey: string) => {
+ this.query = newKey;
+ //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;
+ }
+
+ render() {
+ const isEditing = this.editingMetadata;
+ console.log(isEditing);
return (
- //<div className="rec-scroll">
- <ContentFittingDocumentView {...this.props}
- Document={this.content}
- getTransform={this.props.ScreenToLocalTransform}>
- </ContentFittingDocumentView>
- //</div>
+ <div style={{ pointerEvents: "all" }}>
+ <div
+ style={{
+ position: "absolute",
+ right: 0,
+ width: 20,
+ height: 20,
+ background: "black",
+ pointerEvents: "all",
+ opacity: 1,
+ transition: "0.4s opacity ease",
+ zIndex: 99,
+ }}
+ title={"Add Metadata"}
+ onClick={action(() => this.editingMetadata = !this.editingMetadata)}
+ />
+ <div className="editableclass" style={{ opacity: isEditing ? 1 : 0, pointerEvents: isEditing ? "auto" : "none", transition: "0.4s opacity ease", }}>
+ <EditableView
+ contents={this.query}
+ SetValue={this.updateKey}
+ GetValue={() => ""}
+ />
+ </div>
+ <div style={{
+ pointerEvents: "none",
+ }}>
+ <ContentFittingDocumentView {...this.props}
+ Document={this.content}
+ getTransform={this.props.ScreenToLocalTransform}>
+ </ContentFittingDocumentView>
+ </div>
+ </div >
);
}
- //
- //
+
} \ No newline at end of file
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 7628297c0..9af8829fa 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -235,7 +235,7 @@ export class SearchBox extends React.Component {
}
}
//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, 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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 01:44:40 +0000