From e4b7b54eecc307ec52f6105f92c3d87449458641 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Tue, 28 Apr 2020 02:02:40 -0700
Subject: nested collection view now in search box, search item doc type cast
 over stacking view, but with bugs

---
 src/client/views/nodes/FieldView.tsx | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/client/views/nodes/FieldView.tsx')

diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index a3790d38b..6198212b5 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -51,6 +51,9 @@ export interface FieldViewProps {
     ContentScaling: () => number;
     ChromeHeight?: () => number;
     childLayoutTemplate?: () => Opt<Doc>;
+    highlighting?: string[];
+    lines?: string[];
+    doc?: Doc;
 }
 
 @observer
-- 
cgit v1.2.3-70-g09d2


From fd741cddf64fe1b068b7a1de5bc3840798afe75d Mon Sep 17 00:00:00 2001
From: andy temp <andytemp@Kates-MBP.fios-router.home>
Date: Wed, 22 Jul 2020 14:42:32 -0400
Subject: search results open and close as panel under bar

---
 src/client/util/CurrentUserUtils.ts                |  2 +-
 .../views/collections/CollectionSchemaView.tsx     |  2 +-
 src/client/views/collections/CollectionView.tsx    |  2 +-
 src/client/views/nodes/FieldView.tsx               |  2 ++
 src/client/views/search/SearchBox.scss             |  2 +-
 src/client/views/search/SearchBox.tsx              | 28 ++++++++++++++++++----
 6 files changed, 29 insertions(+), 9 deletions(-)

(limited to 'src/client/views/nodes/FieldView.tsx')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 582cc2d5c..f16ef399c 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -658,7 +658,7 @@ export class CurrentUserUtils {
         const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
         const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
         if (doc["search-panel"] === undefined) {
-            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({ ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc;
+            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({_width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc;
     }
         // Finally, setup the list of buttons to display in the sidebar
         if (doc["tabs-buttons"] === undefined) {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 50eea5059..be4f7c888 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -631,7 +631,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         return <div className="collectionSchemaView-container"
             style={{
                 pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined,
-                width: this.props.PanelWidth() || "100%", height: this.props.PanelHeight() || "100%"
+                width: this.props.PanelWidth() || "100%", height: this.props.PanelPosition === "absolute" ? this.props.PanelHeight() : this.props.PanelHeight()  || "100%", top: this.props.PanelPosition === "absolute" ? 32 : 0, position: this.props.PanelPosition || "relative",
             }}  >
             <div className="collectionSchemaView-tableContainer"
                 style={{ width: `calc(100% - ${this.previewWidth()}px)` }}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 43bfbc913..0178cc2e9 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -554,7 +554,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
         return (<div className={"collectionView"} onContextMenu={this.onContextMenu}
             style={{ pointerEvents: this.props.Document.isBackground ? "none" : undefined, boxShadow }}>
             {this.showIsTagged()}
-            <div className="collectionView-facetCont" style={{ width: `calc(100% - ${this.facetWidth()}px)` }}>
+            <div className="collectionView-facetCont" style={{ display: this.props.PanelPosition==="absolute"? "flex" : "", justifyContent: this.props.PanelPosition==="absolute"? "center" : "", width: `calc(100% - ${this.facetWidth()}px)` }}>
                 {this.collectionViewType !== undefined ? this.SubView(this.collectionViewType, props) : (null)}
             </div>
             {this.lightbox(DocListCast(this.props.Document[this.props.fieldKey]).filter(d => d.type === DocumentType.IMG).map(d =>
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 3aabd5d6b..8b83a29b2 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -48,10 +48,12 @@ export interface FieldViewProps {
     ignoreAutoHeight?: boolean;
     PanelWidth: () => number;
     PanelHeight: () => number;
+    PanelPosition: string;
     NativeHeight: () => number;
     NativeWidth: () => number;
     setVideoBox?: (player: VideoBox) => void;
     ContentScaling: () => number;
+
     ChromeHeight?: () => number;
     childLayoutTemplate?: () => Opt<Doc>;
     highlighting?: string[];
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 4d057f782..8cd2f00b4 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -17,7 +17,7 @@
 .searchBox-bar {
     height: 32px;
     display: flex;
-    justify-content: flex-end;
+    justify-content: center;
     align-items: center;
     background-color: black;
     .searchBox-barChild {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 884aa6a68..21f476ea4 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -199,13 +199,26 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     enter = (e: React.KeyboardEvent) => {
         if (e.key === "Enter") {
-            if (this._icons !== this._allIcons) {
-                runInAction(() => { this.expandedBucket = false });
+            // if (this._icons !== this._allIcons) {
+            //     runInAction(() => { this.expandedBucket = false });
+            // }
+            console.log(StrCast(this.layoutDoc._searchString));
+            if (StrCast(this.layoutDoc._searchString)!==""){
+                console.log("OPEN");
+                runInAction(()=>{this.open=true});
+            }
+            else {
+                console.log("CLOSE");
+                runInAction(()=>{this.open=false});
+
             }
             this.submitSearch();
         }
     }
 
+    @observable open: boolean = false;
+
+
     public static async convertDataUri(imageUri: string, returnedFilename: string) {
         try {
             const posting = Utils.prepend("/uploadURI");
@@ -377,7 +390,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     get fieldFiltersApplied() { return !(this._authorFieldStatus && this._titleFieldStatus); }
 
 
-    @observable expandedBucket: boolean = false;
     @action
     submitSearch = async (reset?: boolean) => {
         this.checkIcons();
@@ -1109,7 +1121,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                     </span> */}
                     <input value={StrCast(this.layoutDoc._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" }} />
+                        style={{ width: this._searchbarOpen ? "200px" : "200px" }} />
                     {/* <button className="searchBox-barChild searchBox-filter" style={{ transform: "none" }} title="Advanced Filtering Options" onClick={() => this.handleFilterChange()}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button> */}
                 </div>
                 <div id={`filterhead${this.props.Document[Id]}`} className="filter-form" style={this._filterOpen && this._numTotalResults > 0 ? { overflow: "visible" } : { overflow: "hidden" }}>
@@ -1123,12 +1135,18 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         {this.keyButtons}
                     </div>
                 </div>
+                <div style={{zIndex:2000}}>
                 {this.headerscale > 0 ? <CollectionView {...this.props}
                     Document={this.props.Document}
                     moveDocument={returnFalse}
                     removeDocument={returnFalse}
+                    PanelHeight={this.open===true?()=>200 :()=>0}
+                    PanelWidth={this.open===true? ()=>600 : ()=>0}
+                    PanelPosition={"absolute"}
                     focus={this.selectElement}
-                    ScreenToLocalTransform={Transform.Identity} /> : undefined}
+                    ScreenToLocalTransform={Transform.Identity}
+                     /> : undefined}
+                     </div>
 
                 <div className="searchBox-results" onScroll={this.resultsScrolled} style={{
                     display: this._resultsOpen ? "flex" : "none",
-- 
cgit v1.2.3-70-g09d2


From d4ff3975ee3b72a7869535bf8d9fc78039203aed Mon Sep 17 00:00:00 2001
From: andy temp <andytemp@Kates-MBP.fios-router.home>
Date: Wed, 22 Jul 2020 22:39:44 -0400
Subject: search

---
 src/client/util/CurrentUserUtils.ts                |  2 +-
 src/client/views/EditableView.tsx                  |  5 +-
 src/client/views/MainView.tsx                      | 14 ++++
 .../views/collections/CollectionSchemaCells.tsx    | 10 +--
 .../views/collections/CollectionSchemaHeaders.tsx  | 42 +++++++++-
 .../views/collections/CollectionSchemaView.tsx     |  5 +-
 src/client/views/collections/SchemaTable.tsx       |  6 +-
 src/client/views/nodes/FieldView.tsx               |  4 +-
 src/client/views/search/SearchBox.tsx              | 91 +++++++++++++++++-----
 9 files changed, 135 insertions(+), 44 deletions(-)

(limited to 'src/client/views/nodes/FieldView.tsx')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index f16ef399c..c7cdf8545 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -658,7 +658,7 @@ export class CurrentUserUtils {
         const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
         const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
         if (doc["search-panel"] === undefined) {
-            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({_width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc;
+            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({_width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack", })) as any as Doc;
     }
         // Finally, setup the list of buttons to display in the sidebar
         if (doc["tabs-buttons"] === undefined) {
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 4c2d2f0a9..b78ed6fee 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -195,15 +195,13 @@ export class EditableView extends React.Component<EditableProps> {
         if (this.props.positions!==undefined){
         let positions = this.props.positions;
         let length = this.props.search!.length;
-        console.log(contents);
-        console.log(this.props.contents?.valueOf());
+
         // contents = String(this.props.contents.valueOf());
 
         results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(0, this.props.positions![0]) : this.props.placeholder?.valueOf()}</span>);
         positions.forEach((num, cur) => {
             results.push(<span style={{ backgroundColor: "#FFFF00", fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num, num + length) : this.props.placeholder?.valueOf()}</span>);
             let end = 0;
-            console.log
             cur === positions.length-1? end = contents.length: end = positions[cur + 1];
             results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num + length, end) : this.props.placeholder?.valueOf()}</span>);
         }
@@ -217,7 +215,6 @@ else{
     }
 
     render() {
-        console.log(this.props.highlight === undefined);
         if (this._editing && this.props.GetValue() !== undefined) {
             return this.props.sizeToContent ?
                 <div style={{ display: "grid", minWidth: 100 }}>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c65c90afb..fce3707a7 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -156,10 +156,24 @@ export class MainView extends React.Component {
         const targets = document.elementsFromPoint(e.x, e.y);
         if (targets && targets.length && targets[0].className.toString().indexOf("contextMenu") === -1) {
             ContextMenu.Instance.closeMenu();
+            //SearchBox.Instance.closeSearch();
         }
         if (targets && (targets.length && targets[0].className.toString() !== "timeline-menu-desc" && targets[0].className.toString() !== "timeline-menu-item" && targets[0].className.toString() !== "timeline-menu-input")) {
             TimelineMenu.Instance.closeMenu();
         }
+        if (targets && targets.length && SearchBox.Instance._searchbarOpen){
+            let check = false;
+            targets.forEach((thing)=>{
+            if (thing.className.toString()==="collectionSchemaView-table" || thing.className.toString()==="beta") {
+                check=true;
+            }
+        });
+        if (check===false){
+            SearchBox.Instance.closeSearch();
+        }
+    }
+
+
     });
 
     globalPointerUp = () => this.isPointerDown = false;
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index b1c3705ca..11f0edf23 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -246,7 +246,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         trace();
         let positions = [];
         if (StrCast(this.props.Document._searchString) !== "") {
-            console.log(StrCast(this.props.Document._searchString));
             const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
             let term = "";
             if (cfield!==undefined){
@@ -262,7 +261,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
             }
             let search = StrCast(this.props.Document._searchString)
             let start = term.indexOf(search) as number;
-            console.log(start);
             let tally = 0;
             if (start!==-1){
             positions.push(start);
@@ -277,7 +275,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                 positions.pop();
             }
         }
-        console.log(positions.length);
         return (
             <div className="collectionSchemaView-cellContainer" style={{ cursor: fieldIsDoc ? "grab" : "auto" }} ref={dragRef} onPointerDown={this.onPointerDown} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>
                 <div className={className} ref={this._focusRef} onPointerDown={onItemDown} tabIndex={-1}>
@@ -299,18 +296,14 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                                 //     return "0";
                                 // } else {
                                     const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
-                                    console.log(cfield);
                                     if (cfield!==undefined){
                                     if (cfield.Text!==undefined){
-                                        console.log
-                                        return(cfield.Text)
+                                        return(cfield.Text);
                                     }
                                     else if (StrCast(cfield)){
-                                        console.log("strcast");
                                         return StrCast(cfield);
                                     }
                                     else {
-                                        console.log("numcast");
                                         return String(NumCast(cfield));
                                     }
                                 }
@@ -325,7 +318,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                                     return "0";
                                 } else {
                                     const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
-                                    console.log(cfield);
                                     if (type === "number") {
                                         return StrCast(cfield);
                                     }
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 4a9bd4aa6..ec8605215 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -9,6 +9,8 @@ import { ColumnType } from "./CollectionSchemaView";
 import { faFile } from "@fortawesome/free-regular-svg-icons";
 import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField";
 import { undoBatch } from "../../util/UndoManager";
+import { Doc } from "../../../fields/Doc";
+import { StrCast } from "../../../fields/Types";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -291,6 +293,7 @@ export interface KeysDropdownProps {
     onSelect: (oldKey: string, newKey: string, addnew: boolean, filter?: string) => void;
     setIsEditing: (isEditing: boolean) => void;
     width?: string;
+    docs?: Doc[];
 }
 @observer
 export class KeysDropdown extends React.Component<KeysDropdownProps> {
@@ -309,7 +312,6 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         if (key.slice(0, this._key.length) === this._key && this._key !== key) {
             let filter = key.slice(this._key.length - key.length);
             this.props.onSelect(this._key, this._key, this.props.addNew, filter);
-            console.log("YEE");
         }
         else {
             this.props.onSelect(this._key, key, this.props.addNew);
@@ -319,6 +321,13 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         }
     }
 
+    @action
+    onSelect2 = (key: string): void => {
+        this._searchTerm=this._searchTerm.slice(0,this._key.length) +key;
+        this._isOpen = false;
+
+    }
+
     @undoBatch
     onKeyDown = (e: React.KeyboardEvent): void => {
         //if (this._key !==)
@@ -394,7 +403,35 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         return options;
     }
 
+    renderFilterOptions = (): JSX.Element[] | JSX.Element => {
+        console.log("HEHEHE")
+        if (!this._isOpen) return <></>;
+
+        const keyOptions:string[]=[];
+        console.log(this._searchTerm.slice(this._key.length))
+        let temp = this._searchTerm.slice(this._key.length);
+        this.props.docs?.forEach((doc)=>{
+            let key = StrCast(doc[this._key]);
+            if (keyOptions.includes(key)===false && key.includes(temp)){
+            keyOptions.push(key);
+            }
+        });
+
+
+        const options = keyOptions.map(key => {
+            return <div key={key} className="key-option" style={{
+                border: "1px solid lightgray",
+                width: this.props.width, maxWidth: this.props.width, overflowX: "hidden"
+            }}
+                onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect2(key);  }}>{key}</div>;
+        });
+
+        return options;
+    }
+
+
     render() {
+        console.log(this.props.docs);
         return (
             <div className="keys-dropdown" style={{ zIndex: 10, width: this.props.width, maxWidth: this.props.width }}>
                 {this._key === this._searchTerm.slice(0, this._key.length) ?
@@ -414,7 +451,8 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                     width: this.props.width, maxWidth: this.props.width,
                 }}
                     onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
-                    {this.renderOptions()}
+                    {this._key === this._searchTerm.slice(0, this._key.length) ?
+                    this.renderFilterOptions():this.renderOptions()}
                 </div>
             </div >
         );
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index be4f7c888..0b3d8e20d 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -609,7 +609,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
 
 
     onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        console.log("yeet2");
     }
     render() {
         TraceMobx();
@@ -631,10 +630,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         return <div className="collectionSchemaView-container"
             style={{
                 pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined,
-                width: this.props.PanelWidth() || "100%", height: this.props.PanelPosition === "absolute" ? this.props.PanelHeight() : this.props.PanelHeight()  || "100%", top: this.props.PanelPosition === "absolute" ? 32 : 0, position: this.props.PanelPosition || "relative",
+                width: this.props.PanelWidth() || "100%", height: this.props.PanelPosition === "absolute" ? this.props.PanelHeight() : this.props.PanelHeight()  || "100%", top: this.props.PanelPosition === "absolute" ? 52 : 0, position: this.props.PanelPosition || "relative",
             }}  >
             <div className="collectionSchemaView-tableContainer"
-                style={{ width: `calc(100% - ${this.previewWidth()}px)` }}
+                style={{ backgroundColor:"white", width: `calc(100% - ${this.previewWidth()}px)` }}
                 onKeyPress={this.onKeyPress}
                 onPointerDown={this.onPointerDown}
                 onWheel={e => this.props.active(true) && e.stopPropagation()}
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 2b60bef1b..c820cb661 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -189,7 +189,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                 addNew={false}
                 onSelect={this.props.changeColumns}
                 setIsEditing={this.props.setHeaderIsEditing}
-
+                docs={this.props.childDocs}
                 // try commenting this out
                 width={"100%"}
             />;
@@ -451,10 +451,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         //@ts-ignore
         expandedRowsList.forEach(row => expanded[row] = true);
         const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :((((
-        let overflow = "auto";
-        StrCast(this.props.Document.type) === "search" ? overflow = "overlay" : "auto";
         return <ReactTable
-            style={{ position: "relative", overflow: overflow }}
+            style={{ position: "relative" }}
             data={children}
             page={0}
             pageSize={children.length}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 8b83a29b2..732a254fe 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -46,8 +46,8 @@ export interface FieldViewProps {
     dontRegisterView?: boolean;
     focus: (doc: Doc) => void;
     ignoreAutoHeight?: boolean;
-    PanelWidth: () => number;
-    PanelHeight: () => number;
+    PanelWidth: () => number|string;
+    PanelHeight: () => number|string;
     PanelPosition: string;
     NativeHeight: () => number;
     NativeWidth: () => number;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 21f476ea4..ee85375e3 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -73,7 +73,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @computed get _searchString() { return this.layoutDoc.searchQuery; }
     @computed set _searchString(value) { this.layoutDoc.searchQuery = (value); }
     @observable private _resultsOpen: boolean = false;
-    @observable private _searchbarOpen: boolean = false;
+    @observable _searchbarOpen: boolean = false;
     @observable private _results: [Doc, string[], string[]][] = [];
     @observable private _openNoResults: boolean = false;
     @observable private _visibleElements: JSX.Element[] = [];
@@ -183,10 +183,16 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @action
     getViews = (doc: Doc) => SearchUtil.GetViewsOfDocument(doc)
 
+
+    @observable newsearchstring: string ="";
     @action.bound
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        this.layoutDoc._searchString = e.target.value;
-
+        //this.layoutDoc._searchString = e.target.value;
+        this.newsearchstring= e.target.value;
+        if (e.target.value===""){
+            console.log("CLOSE");
+            runInAction(()=>{this.open=false});
+        }
         this._openNoResults = false;
         this._results = [];
         this._resultsSet.clear();
@@ -199,10 +205,11 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     enter = (e: React.KeyboardEvent) => {
         if (e.key === "Enter") {
+            console.log(this.newsearchstring)
+            this.layoutDoc._searchString=this.newsearchstring;
             // if (this._icons !== this._allIcons) {
             //     runInAction(() => { this.expandedBucket = false });
             // }
-            console.log(StrCast(this.layoutDoc._searchString));
             if (StrCast(this.layoutDoc._searchString)!==""){
                 console.log("OPEN");
                 runInAction(()=>{this.open=true});
@@ -392,11 +399,15 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     @action
     submitSearch = async (reset?: boolean) => {
+        
         this.checkIcons();
         if (reset) {
             this.layoutDoc._searchString = "";
         }
+        this.noresults= false;
         this.dataDoc[this.fieldKey] = new List<Doc>([]);
+        this.headercount=0;
+        this.children=0;
         this.buckets = [];
         this.new_buckets = {};
         const query = StrCast(this.layoutDoc._searchString);
@@ -519,7 +530,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         });
         return this.lockPromise;
     }
-
+    @observable noresults = false;
     collectionRef = React.createRef<HTMLSpanElement>();
     startDragCollection = async () => {
         const res = await this.getAllResults(this.getFinalQuery(StrCast(this.layoutDoc._searchString)));
@@ -591,6 +602,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this._curRequest = undefined;
     }
 
+    @observable children: number =0;
     @action
     resultsScrolled = (e?: React.UIEvent<HTMLDivElement>) => {
         if (!this._resultsRef.current) return;
@@ -604,11 +616,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this._endIndex = 30;
         let headers = new Set<string>();
         if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
-            this._visibleElements = [<div className="no-result">No Search Results</div>];
-            //this._visibleDocuments= Docs.Create.
-            let noResult = Docs.Create.TextDocument("", { title: "noResult" })
-            noResult.isBucket = false;
-            Doc.AddDocToList(this.dataDoc, this.props.fieldKey, noResult);
+            this.noresults=true;
             return;
         }
 
@@ -653,6 +661,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                             this._visibleDocuments[i] = result[0];
                             this._isSearch[i] = "search";
                             Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
+                            this.children ++;
                         }
                     }
                     else {
@@ -669,6 +678,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                                 this._isSearch[i] = "search";
                                 console.log("WHYYYY");
                                 Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
+                                this.children ++;
 
                             }
                         }
@@ -681,6 +691,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         let schemaheaders: SchemaHeaderField[] = [];
         this.headerscale = headers.size;
         headers.forEach((item) => schemaheaders.push(new SchemaHeaderField(item, "#f1efeb")))
+        this.headercount= schemaheaders.length;
         this.props.Document._schemaHeaders = new List<SchemaHeaderField>(schemaheaders);
         if (this._maxSearchIndex >= this._numTotalResults) {
             this._visibleElements.length = this._results.length;
@@ -688,7 +699,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             this._isSearch.length = this._results.length;
         }
     }
-
+    @observable headercount:number=0;
     @observable headerscale: number = 0;
 
     findCommonElements(arr2: string[]) {
@@ -1112,16 +1123,24 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
     //Make id layour document
     render() {
+        this.props.Document._chromeStatus === "disabled";
         this.props.Document._searchDoc = true;
+        //let length = Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []).length;
+        let length = this.headercount;
+        length > 3 ? length = 650 : length = length * 205 + 51;
+        let height = this.children;
+        height > 8 ? height = 31+31*8: height = 31*height+ 31; 
         return (
             <div style={{ pointerEvents: "all" }} className="searchBox-container">
                 <div className="searchBox-bar">
                     {/* <span className="searchBox-barChild searchBox-collection" onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection">
                         <FontAwesomeIcon icon="object-group" size="lg" />
                     </span> */}
-                    <input value={StrCast(this.layoutDoc._searchString)} onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
+                    <div style={{position:"absolute", left:15}}>{Doc.CurrentUserEmail}</div>
+                    <FontAwesomeIcon icon={"search"} size="lg" style={{ position:"relative", left:24, padding:1 }} />
+                    <input value={this.newsearchstring} autoComplete="off" 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 ? "200px" : "200px" }} />
+                        style={{ paddingLeft:23, width: this._searchbarOpen ? "200px" : "200px" }} />
                     {/* <button className="searchBox-barChild searchBox-filter" style={{ transform: "none" }} title="Advanced Filtering Options" onClick={() => this.handleFilterChange()}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button> */}
                 </div>
                 <div id={`filterhead${this.props.Document[Id]}`} className="filter-form" style={this._filterOpen && this._numTotalResults > 0 ? { overflow: "visible" } : { overflow: "hidden" }}>
@@ -1135,18 +1154,52 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         {this.keyButtons}
                     </div>
                 </div>
-                <div style={{zIndex:2000}}>
-                {this.headerscale > 0 ? <CollectionView {...this.props}
+                <div style={{ zIndex:2000}}>
+                {this._searchbarOpen === true ? 
+                <div style={{display:"flex", justifyContent:"center",}}>
+                <div style={{width: this.headercount>0?length: 251,
+                height: 25,
+                borderColor: "#9c9396",
+                border: "1px solid",
+                borderRadius:"0.3em",
+                borderBottom:this.open===false?"1px solid":"none",
+                position: "absolute",
+                background: "rgb(241, 239, 235)",
+                top:29}}>                 
+                    <form className="beta" style={{justifyContent:"space-evenly", display:"flex"}}><label>
+      <input
+        type="radio"
+      />
+      Current collection 
+    </label>
+    <label>
+      <input
+        type="radio"
+      />
+      Workspace
+    </label>
+    <label>
+      <input
+        type="radio"
+      />
+      Database
+    </label></form>           
+                </div>
+
+                {this.noresults===false? <div style={{display:this.open===true? "contents":"none"}}> <CollectionView {...this.props}
                     Document={this.props.Document}
                     moveDocument={returnFalse}
                     removeDocument={returnFalse}
-                    PanelHeight={this.open===true?()=>200 :()=>0}
-                    PanelWidth={this.open===true? ()=>600 : ()=>0}
+                    PanelHeight={this.open===true?()=> height:()=>0}
+                    PanelWidth={this.open===true? ()=>length : ()=>0}
                     PanelPosition={"absolute"}
                     focus={this.selectElement}
                     ScreenToLocalTransform={Transform.Identity}
-                     /> : undefined}
-                     </div>
+                     /></div>: <div style={{display:"flex",justifyContent:"center"}}><div style={{height:200, top:29, width:250, position:"absolute", backgroundColor:"white", display:"flex", justifyContent:"center", alignItems    :"center", border: "black 1px solid", }}>
+                     <div>No search results :(</div>
+                     </div></div>}
+                     </div>: undefined}
+                </div>
 
                 <div className="searchBox-results" onScroll={this.resultsScrolled} style={{
                     display: this._resultsOpen ? "flex" : "none",
-- 
cgit v1.2.3-70-g09d2


From a0f266b7dd7946a12be0d17b523b0a45570c80a6 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Tue, 28 Jul 2020 17:03:53 -0400
Subject: filter and other small features

---
 .../views/collections/CollectionSchemaView.scss    |   1 -
 .../views/collections/CollectionSchemaView.tsx     |   1 +
 src/client/views/nodes/FieldView.tsx               |   5 +-
 src/client/views/search/SearchBox.tsx              | 194 +++------------------
 4 files changed, 28 insertions(+), 173 deletions(-)

(limited to 'src/client/views/nodes/FieldView.tsx')

diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 83fe54c82..93878d799 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -25,7 +25,6 @@
     .collectionSchemaView-tableContainer {
         width: 100%;
         height: 100%;
-        overflow: auto;
     }
 
     .collectionSchemaView-dividerDragger {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 4ecc7ba60..d3c975e5d 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -628,6 +628,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         </div>;
         return <div className="collectionSchemaView-container"
             style={{
+                overflow: this.props.overflow === true ? "auto" : undefined,
                 pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined,
                 width: this.props.PanelWidth() || "100%", height: this.props.PanelPosition === "absolute" ? this.props.PanelHeight() : this.props.PanelHeight() || "100%", top: this.props.PanelPosition === "absolute" ? 52 : 0, position: this.props.PanelPosition || "relative",
             }}  >
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 732a254fe..c9fc99a31 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -46,9 +46,10 @@ export interface FieldViewProps {
     dontRegisterView?: boolean;
     focus: (doc: Doc) => void;
     ignoreAutoHeight?: boolean;
-    PanelWidth: () => number|string;
-    PanelHeight: () => number|string;
+    PanelWidth: () => number | string;
+    PanelHeight: () => number | string;
     PanelPosition: string;
+    overflow?: boolean;
     NativeHeight: () => number;
     NativeWidth: () => number;
     setVideoBox?: (player: VideoBox) => void;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 7601ea12e..73932896b 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -452,39 +452,22 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         console.log(searchString);
         let values = searchString.slice(searchString.indexOf(":") + 1, searchString.length);
         console.log(values);
-
-        const selectedCollection: DocumentView = SelectionManager.SelectedDocuments()[0];
-        if (selectedCollection !== undefined) {
-            let docs = DocListCast(selectedCollection.dataDoc[Doc.LayoutFieldKey(selectedCollection.dataDoc)]);
-            let found: [Doc, string[], string[]][] = [];
-            Doc.setDocFilter(selectedCollection.props.Document, key, values, "match");
-            // docs.forEach((d) => {
-            //     let hlights: string[] = [];
-            //     const protos = Doc.GetAllPrototypes(d);
-            //     let proto = protos[protos.length - 2];
-            //     Object.keys(proto).forEach(key => {
-            //         console.log(key);
-            //         console.log(StrCast(this.layoutDoc._searchString));
-            //         Doc.setDocFilter(selectedCollection.props.Document, key, StrCast(this.layoutDoc._searchString), "match");
-
-            //         // if (StrCast(d[key]).includes(query)) {
-            //         //     console.log(key, d[key]);
-            //         //     hlights.push(key);
-            //         // }
-            //     });
-            //     // if (hlights.length > 0) {
-            //     //     found.push([d, hlights, []]);
-            //     // };
-            // });
-            // console.log(found);
-            // this._results = found;
-            // this._numTotalResults = found.length;
+        let doc = undefined;
+        if (this.scale === false) {
+            doc = SelectionManager.SelectedDocuments()[0].props.Document;
+        }
+        console.log(this.scale);
+        if (this.scale === true) {
+            doc = Cast(Doc.UserDoc().myWorkspaces, Doc) as Doc;
+            doc = DocListCast(doc.data)[0];
+        }
+        if (doc !== undefined) {
+            console.log(StrCast(doc.title));
+            Doc.setDocFilter(doc, key, values, "match");
         }
         else {
             this.noresults = "No collection selected :(";
         }
-
-        //Doc.setDocFilter(this.props.Document, newKey, filter, "match");
     }
 
     @action
@@ -512,7 +495,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             if (this._timeout) { clearTimeout(this._timeout); this._timeout = undefined };
             this._timeout = setTimeout(() => {
                 console.log("Resubmitting search");
-
             }, 60000);
         }
 
@@ -708,7 +690,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         const endIndex = 30;
         this._endIndex = endIndex === -1 ? 12 : endIndex;
         this._endIndex = 30;
-        let headers = new Set<string>();
+        let headers = new Set<string>(["title", "author", "creationDate"]);
         if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
             if (this.noresults === "") {
                 this.noresults = "No search results :(";
@@ -986,125 +968,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     remButtonDoc = (doc: Doc) => Doc.RemoveDocFromList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc);
     moveButtonDoc = (doc: Doc, targetCollection: Doc | undefined, addDocument: (document: Doc) => boolean) => this.remButtonDoc(doc) && addDocument(doc);
 
-    @computed get docButtons() {
-        const nodeBtns = this.props.Document.nodeButtons;
-        let width = () => NumCast(this.props.Document._width);
-        // if (StrCast(this.props.Document.title)==="sidebar search stack"){
-        width = MainView.Instance.flyoutWidthFunc;
-
-        // }   
-        if (nodeBtns instanceof Doc) {
-            return <div id="hi" style={{ height: "100px", }}>
-                <DocumentView
-                    docFilters={returnEmptyFilter}
-                    Document={nodeBtns}
-                    DataDoc={undefined}
-                    LibraryPath={emptyPath}
-                    addDocument={undefined}
-                    addDocTab={returnFalse}
-                    rootSelected={returnTrue}
-                    pinToPres={emptyFunction}
-                    onClick={undefined}
-                    removeDocument={undefined}
-                    ScreenToLocalTransform={this.getTransform}
-                    ContentScaling={returnOne}
-                    PanelWidth={width}
-                    PanelHeight={() => 100}
-                    renderDepth={0}
-                    backgroundColor={returnEmptyString}
-                    focus={emptyFunction}
-                    parentActive={returnTrue}
-                    whenActiveChanged={emptyFunction}
-                    bringToFront={emptyFunction}
-                    ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined}
-                    NativeHeight={() => 100}
-                    NativeWidth={width}
-                />
-            </div>;
-        }
-        return (null);
-    }
-
-    @computed get keyButtons() {
-        const nodeBtns = this.props.Document.keyButtons;
-        let width = () => NumCast(this.props.Document._width);
-        // if (StrCast(this.props.Document.title)==="sidebar search stack"){
-        width = MainView.Instance.flyoutWidthFunc;
-        // }
-        if (nodeBtns instanceof Doc) {
-            return <div id="hi" style={{ height: "35px", }}>
-                <DocumentView
-                    docFilters={returnEmptyFilter}
-                    Document={nodeBtns}
-                    DataDoc={undefined}
-                    LibraryPath={emptyPath}
-                    addDocument={undefined}
-                    addDocTab={returnFalse}
-                    rootSelected={returnTrue}
-                    pinToPres={emptyFunction}
-                    onClick={undefined}
-                    removeDocument={undefined}
-                    ScreenToLocalTransform={this.getTransform}
-                    ContentScaling={returnOne}
-                    PanelWidth={width}
-                    PanelHeight={() => 100}
-                    renderDepth={0}
-                    backgroundColor={returnEmptyString}
-                    focus={emptyFunction}
-                    parentActive={returnTrue}
-                    whenActiveChanged={emptyFunction}
-                    bringToFront={emptyFunction}
-                    ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined}
-                    NativeHeight={() => 100}
-                    NativeWidth={width}
-                />
-            </div>;
-        }
-        return (null);
-    }
-
-    @computed get defaultButtons() {
-        const defBtns = this.props.Document.defaultButtons;
-        let width = () => NumCast(this.props.Document._width);
-        // if (StrCast(this.props.Document.title)==="sidebar search stack"){
-        width = MainView.Instance.flyoutWidthFunc;
-        // }
-        if (defBtns instanceof Doc) {
-            return <div id="hi" style={{ height: "35px", }}>
-                <DocumentView
-                    docFilters={returnEmptyFilter}
-
-                    Document={defBtns}
-                    DataDoc={undefined}
-                    LibraryPath={emptyPath}
-                    addDocument={undefined}
-                    addDocTab={returnFalse}
-                    rootSelected={returnTrue}
-                    pinToPres={emptyFunction}
-                    onClick={undefined}
-                    removeDocument={undefined}
-                    ScreenToLocalTransform={this.getTransform}
-                    ContentScaling={returnOne}
-                    PanelWidth={width}
-                    PanelHeight={() => 100}
-                    renderDepth={0}
-                    backgroundColor={returnEmptyString}
-                    focus={emptyFunction}
-                    parentActive={returnTrue}
-                    whenActiveChanged={emptyFunction}
-                    bringToFront={emptyFunction}
-                    ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined}
-                    NativeHeight={() => 100}
-                    NativeWidth={width}
-                />
-            </div>;
-        }
-        return (null);
-    }
-
     @action.bound
     updateIcon = async (icon: string) => {
         if (this._icons.includes(icon)) {
@@ -1223,15 +1086,17 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     @observable filter = false;
 
+
     //Make id layour document
     render() {
         this.props.Document._chromeStatus === "disabled";
         this.props.Document._searchDoc = true;
-        let length = Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []).length;
-        //let length = this.headercount;
-        length > 3 ? length = 650 : length = length * 205 + 51;
-        let height = this.children;
-        height > 8 ? height = 31 + 31 * 8 : height = 31 * height + 31;
+        let cols = Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []).length;
+        let length = 0;
+        cols > 5 ? length = 1076 : length = cols * 205 + 51;
+        let height = 0;
+        let rows = this.children;
+        rows > 8 ? height = 31 + 31 * 8 : height = 31 * rows + 31;
         return (
             <div style={{ pointerEvents: "all" }} className="searchBox-container">
                 <div className="searchBox-bar">
@@ -1239,28 +1104,16 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         <FontAwesomeIcon icon="object-group" size="lg" />
                     </span> */}
                     <div style={{ position: "absolute", left: 15 }}>{Doc.CurrentUserEmail}</div>
-                    <FontAwesomeIcon icon={"search"} size="lg" style={{ position: "relative", left: 24, padding: 1 }} />
+                    <FontAwesomeIcon onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg" style={{ position: "relative", left: 24, padding: 1 }} />
                     <input value={this.newsearchstring} autoComplete="off" 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={{ paddingLeft: 23, width: this._searchbarOpen ? "200px" : "200px" }} />
-                    {/* <button className="searchBox-barChild searchBox-filter" style={{ transform: "none" }} title="Advanced Filtering Options" onClick={() => this.handleFilterChange()}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button> */}
-                </div>
-                <div id={`filterhead${this.props.Document[Id]}`} className="filter-form" style={this._filterOpen && this._numTotalResults > 0 ? { overflow: "visible" } : { overflow: "hidden" }}>
-                    <div id={`filterhead2${this.props.Document[Id]}`} className="filter-header"  >
-                        {this.defaultButtons}
-                    </div>
-                    <div id={`node${this.props.Document[Id]}`} className="filter-body" style={this._nodeStatus ? { borderTop: "grey 1px solid" } : { borderTop: "0px" }}>
-                        {this.docButtons}
-                    </div>
-                    <div className="filter-key" id={`key${this.props.Document[Id]}`} style={this._keyStatus ? { borderTop: "grey 1px solid" } : { borderTop: "0px" }}>
-                        {this.keyButtons}
-                    </div>
                 </div>
                 <div style={{ zIndex: 2000 }}>
                     {this._searchbarOpen === true ?
                         <div style={{ display: "flex", justifyContent: "center", }}>
                             <div style={{
-                                width: this.headercount > 0 ? length : 253,
+                                width: cols > 0 ? length : 253,
                                 height: 25,
                                 borderColor: "#9c9396",
                                 border: "1px solid",
@@ -1315,9 +1168,10 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                                 PanelHeight={this.open === true ? () => height : () => 0}
                                 PanelWidth={this.open === true ? () => length : () => 0}
                                 PanelPosition={"absolute"}
+                                overflow={cols > 5 || rows > 8 ? true : false}
                                 focus={this.selectElement}
                                 ScreenToLocalTransform={Transform.Identity}
-                            /></div> : <div style={{ display: "flex", justifyContent: "center" }}><div style={{ height: 200, top: 29, width: 250, position: "absolute", backgroundColor: "white", display: "flex", justifyContent: "center", alignItems: "center", border: "black 1px solid", }}>
+                            /></div> : <div style={{ display: "flex", justifyContent: "center" }}><div style={{ height: 200, top: 54, width: 250, position: "absolute", backgroundColor: "rgb(241, 239, 235)", display: "flex", justifyContent: "center", alignItems: "center", border: "black 1px solid", }}>
                                 <div>{this.noresults}</div>
                             </div></div>}
                         </div> : undefined}
-- 
cgit v1.2.3-70-g09d2


From a59bcec29efb9b5ea0ba8ddfb4b9977b904c10b8 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Tue, 4 Aug 2020 12:18:16 -0400
Subject: cleaning up

---
 src/client/views/nodes/FieldView.tsx   |   2 +-
 src/client/views/search/SearchBox.tsx  |   6 +-
 src/client/views/search/SearchItem.tsx | 272 +++++++++++++++++----------------
 3 files changed, 141 insertions(+), 139 deletions(-)

(limited to 'src/client/views/nodes/FieldView.tsx')

diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 2cbfcdb0b..34b07f351 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -48,7 +48,7 @@ export interface FieldViewProps {
     ignoreAutoHeight?: boolean;
     PanelWidth: () => number;
     PanelHeight: () => number;
-    PanelPosition: string;
+    PanelPosition?: string;
     overflow?: boolean;
     NativeHeight: () => number;
     NativeWidth: () => number;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index b7f7af244..b76955815 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -54,7 +54,7 @@ const SearchBoxDocument = makeInterface(documentSchema, searchSchema);
 @observer
 export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDocument>(SearchBoxDocument) {
 
-    @computed get _searchString() { return this.layoutDoc.searchQuery; }
+    get _searchString() { return this.layoutDoc.searchQuery; }
     @computed set _searchString(value) { this.layoutDoc.searchQuery = (value); }
     @observable private _resultsOpen: boolean = false;
     @observable _searchbarOpen: boolean = false;
@@ -691,7 +691,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         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)));
         const endIndex = 30;
-        this._endIndex = endIndex === -1 ? 12 : endIndex;
+        //this._endIndex = endIndex === -1 ? 12 : endIndex;
         this._endIndex = 30;
         let headers = new Set<string>(["title", "author", "text", "lastModified"]);
         if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
@@ -1039,7 +1039,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                             style={{ color: "black", padding: 1, left: 35, position: "relative" }} />
 
                         <FontAwesomeIcon icon={"filter"} size="lg"
-                            style={{ cursor:"default", right: 20, padding: 1, left: 250, position: "relative", backgroundColor: this.filter ? "white" : "lightgray", color: this.filter ? "black" : "white" }}
+                            style={{ cursor: "default", right: 20, padding: 1, left: 250, position: "relative", backgroundColor: this.filter ? "white" : "lightgray", color: this.filter ? "black" : "white" }}
                             onPointerDown={e => { e.stopPropagation(); SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined); }}
                             onClick={action(() => {
                                 this.filter = !this.filter && !this.scale;
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index 6b06289c4..b61ed450f 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -143,13 +143,13 @@ const SearchDocument = makeInterface(documentSchema);
 
 @observer
 export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchema>(SearchDocument) {
-    
+
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchItem, fieldKey); }
 
-    constructor(props:any){
+    constructor(props: any) {
         super(props);
         //this.rootDoc._viewType= CollectionViewType.Stacking;
-        this.props.Document._height=46;
+        this.props.Document._height = 46;
         if (!this.searchItemTemplate) { // create exactly one presElmentBox template to use by any and all presentations.
             Doc.UserDoc().searchItemTemplate = new PrefetchProxy(Docs.Create.SearchItemBoxDocument({ title: "search item template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" }));
             // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement
@@ -175,44 +175,46 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
     private _oldHeight: number = 46;
 
     componentDidMount() {
-        let parent: Doc |undefined = undefined;
+        let parent: Doc | undefined = undefined;
         let height = 0;
-        if (this.rootDoc.parent){
+        if (this.rootDoc.parent) {
             parent = Cast(this.rootDoc.parent, Doc, null);
-            if (parent!== undefined){
-            height=(NumCast(parent._height));
+            if (parent !== undefined) {
+                height = (NumCast(parent._height));
             }
         }
 
         this._reactionDisposer2 = reaction(
             () => this._useIcons,
-            el=> { 
-                if (this.rootDoc.parent){
+            el => {
+                if (this.rootDoc.parent) {
                     parent = Cast(this.rootDoc.parent, Doc, null) as Doc;
-                    height=(NumCast(parent._height));
+                    height = (NumCast(parent._height));
                 };
                 console.log(height);
                 console.log(this._oldHeight);
-            setTimeout(() =>{this._mainRef.current?.getBoundingClientRect()? this.props.Document._height= this._mainRef.current?.getBoundingClientRect().height : null;
-                parent!==undefined? this._mainRef.current?.getBoundingClientRect()? parent._height= -this._oldHeight + height +this._mainRef.current?.getBoundingClientRect().height : null: null;
-                this._mainRef.current?.getBoundingClientRect()?  this._oldHeight= this._mainRef.current?.getBoundingClientRect().height : null;
-                // this._oldHeight 55? this._oldHeight =55:null;
-            }, 1);
-        }
+                setTimeout(() => {
+                    this._mainRef.current?.getBoundingClientRect() ? this.props.Document._height = this._mainRef.current?.getBoundingClientRect().height : null;
+                    parent !== undefined ? this._mainRef.current?.getBoundingClientRect() ? parent._height = -this._oldHeight + height + this._mainRef.current?.getBoundingClientRect().height : null : null;
+                    this._mainRef.current?.getBoundingClientRect() ? this._oldHeight = this._mainRef.current?.getBoundingClientRect().height : null;
+                    // this._oldHeight 55? this._oldHeight =55:null;
+                }, 1);
+            }
         );
 
         this._reactionDisposer3 = reaction(
             () => this._displayLines,
-            el=> { 
-                if (this.rootDoc.parent){
+            el => {
+                if (this.rootDoc.parent) {
                     parent = Cast(this.rootDoc.parent, Doc, null) as Doc;
-                    height=(NumCast(parent._height));
+                    height = (NumCast(parent._height));
                 };
-            setTimeout(() =>{this._mainRef.current?.getBoundingClientRect()? this.props.Document._height= this._mainRef.current?.getBoundingClientRect().height : null;
-                parent!==undefined? this._mainRef.current?.getBoundingClientRect()? parent._height= -this._oldHeight + height +this._mainRef.current?.getBoundingClientRect().height : null: null;
-                this._mainRef.current?.getBoundingClientRect()?  this._oldHeight= this._mainRef.current?.getBoundingClientRect().height : null;
-            }, 1);
-        }
+                setTimeout(() => {
+                    this._mainRef.current?.getBoundingClientRect() ? this.props.Document._height = this._mainRef.current?.getBoundingClientRect().height : null;
+                    parent !== undefined ? this._mainRef.current?.getBoundingClientRect() ? parent._height = -this._oldHeight + height + this._mainRef.current?.getBoundingClientRect().height : null : null;
+                    this._mainRef.current?.getBoundingClientRect() ? this._oldHeight = this._mainRef.current?.getBoundingClientRect().height : null;
+                }, 1);
+            }
         );
 
         Doc.SetSearchQuery(this.query);
@@ -225,14 +227,14 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
 
     }
 
-    
+
 
     private _reactionDisposer2?: IReactionDisposer;
     private _reactionDisposer3?: IReactionDisposer;
 
 
-    
-    @computed get highlightPos(){return NumCast(this.rootDoc.searchIndex)}
+
+    @computed get highlightPos() { return NumCast(this.rootDoc.searchIndex) }
 
     @action
     public DocumentIcon() {
@@ -286,9 +288,9 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
         return <div><div onClick={action(() => { this._useIcons = false; this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); })} >
             <FontAwesomeIcon icon={button} size="2x" />
         </div>
-        <div className="searchItem-label">{this.rootDoc.type ? this.rootDoc.type : "Other"}</div>
+            <div className="searchItem-label">{this.rootDoc.type ? this.rootDoc.type : "Other"}</div>
         </div>
-        ;
+            ;
     }
 
     collectionRef = React.createRef<HTMLDivElement>();
@@ -304,8 +306,8 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
 
         this.rootDoc!.searchMatch = false;
         setTimeout(() => this.rootDoc!.searchMatch = true, 0);
-        this.rootDoc.searchIndex=NumCast(this.rootDoc.searchIndex);
-        this.length=NumCast(this.rootDoc!.length);
+        this.rootDoc.searchIndex = NumCast(this.rootDoc.searchIndex);
+        this.length = NumCast(this.rootDoc!.length);
     }
 
     @action
@@ -317,12 +319,12 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
 
         this.rootDoc!.searchMatch2 = false;
         setTimeout(() => this.rootDoc!.searchMatch2 = true, 0);
-        this.rootDoc.searchIndex=NumCast(this.rootDoc.searchIndex);
+        this.rootDoc.searchIndex = NumCast(this.rootDoc.searchIndex);
 
-        this.length=NumCast(this.rootDoc!.length);
+        this.length = NumCast(this.rootDoc!.length);
     }
 
-    @observable length:number|undefined = 0;
+    @observable length: number | undefined = 0;
 
     highlightDoc = (e: React.PointerEvent) => {
         if (this.rootDoc!.type === DocumentType.LINK) {
@@ -402,9 +404,9 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
     // @computed get targetDoc() { return this.searchElementDoc?.targetDoc as Doc; }
 
     @computed get searchItemTemplate() { return Cast(Doc.UserDoc().searchItemTemplate, Doc, null); }
-    childLayoutTemplate = () => this.layoutDoc._viewType === CollectionViewType.Stacking ? this.searchItemTemplate: undefined;
+    childLayoutTemplate = () => this.layoutDoc._viewType === CollectionViewType.Stacking ? this.searchItemTemplate : undefined;
     getTransform = () => {
-    return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight
+        return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight
     }
     panelHeight = () => {
         return this.props.PanelHeight();
@@ -413,60 +415,60 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
         //this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.layoutDoc._itemIndex));
     }
 
-    newsearch(){
-       runInAction(()=>{
-        if (StrCast(this.rootDoc.bucketfield)!=="results"){
-        SearchBox.Instance._icons=[StrCast(this.rootDoc.bucketfield)];
-        SearchBox.Instance._icons=SearchBox.Instance._icons;
-        }
-        else{
-            SearchBox.Instance._icons=SearchBox.Instance._allIcons;
-        }
-        SearchBox.Instance.expandedBucket= true;
-        SearchBox.Instance.submitSearch();
-       }) 
+    newsearch() {
+        runInAction(() => {
+            if (StrCast(this.rootDoc.bucketfield) !== "results") {
+                SearchBox.Instance._icons = [StrCast(this.rootDoc.bucketfield)];
+                SearchBox.Instance._icons = SearchBox.Instance._icons;
+            }
+            else {
+                SearchBox.Instance._icons = SearchBox.Instance._allIcons;
+            }
+            SearchBox.Instance.submitSearch();
+        })
     }
-    
+
     @action
-    returnLines(){
-        if ((Cast(this.rootDoc.lines, listSpec("string")))!.length>1){
-        if (!this._displayLines) {
-            console.log(Cast(this.rootDoc.lines, listSpec("string")));
-            return <div style={{width: 10}}
-            onPointerDown={action(() => {
-                this._displayLines = !this._displayLines;
-                //this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE);
-            })}
-            //onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))}
-             >
-            {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) => <div style={{overflow:"visible"}}id={i.toString()} className="searchItem-highlighting">{l}</div>)}
-            </div>;;
+    returnLines() {
+        if ((Cast(this.rootDoc.lines, listSpec("string")))!.length > 1) {
+            if (!this._displayLines) {
+                console.log(Cast(this.rootDoc.lines, listSpec("string")));
+                return <div style={{ width: 10 }}
+                    onPointerDown={action(() => {
+                        this._displayLines = !this._displayLines;
+                        //this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE);
+                    })}
+                //onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))}
+                >
+                    {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) => <div style={{ overflow: "visible" }} id={i.toString()} className="searchItem-highlighting">{l}</div>)}
+                </div>;;
+            }
         }
     }
-    }
-    
+
     //this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); 
 
     @observable _displayLines: boolean = true;
 
-    returnButtons(){
+    returnButtons() {
         return <div>
-        <div onClick={action(() => { this.rootDoc!.type === DocumentType.PDF? this._displayLines = !this._displayLines : null; 
-        })}> 
-        {this.rootDoc!.type === DocumentType.PDF?"Expand Lines": null}
-        {NumCast(this.rootDoc!.length)>1?`Instance ${NumCast(this.rootDoc.searchIndex)===0? NumCast(this.rootDoc.length):NumCast(this.rootDoc.searchIndex) } of ${NumCast(this.rootDoc.length)}`: null}
-             <button onClick={this.nextHighlight} style={{padding:2, position:"absolute", left:77}}>
-                        <FontAwesomeIcon icon="arrow-up" size="sm"  /> 
-                        </button>
-                        <button onClick={this.nextHighlight2} style={{padding:2, position:"absolute", left:87}}>                    
-                        <FontAwesomeIcon icon="arrow-down" size="sm"  />
-                        </button>
-        </div>
-        <div>
-        <div style={{background: "lightgrey"}}>
-            {this.returnLines()}
-        </div>
-        </div>
+            <div onClick={action(() => {
+                this.rootDoc!.type === DocumentType.PDF ? this._displayLines = !this._displayLines : null;
+            })}>
+                {this.rootDoc!.type === DocumentType.PDF ? "Expand Lines" : null}
+                {NumCast(this.rootDoc!.length) > 1 ? `Instance ${NumCast(this.rootDoc.searchIndex) === 0 ? NumCast(this.rootDoc.length) : NumCast(this.rootDoc.searchIndex)} of ${NumCast(this.rootDoc.length)}` : null}
+                <button onClick={this.nextHighlight} style={{ padding: 2, position: "absolute", left: 77 }}>
+                    <FontAwesomeIcon icon="arrow-up" size="sm" />
+                </button>
+                <button onClick={this.nextHighlight2} style={{ padding: 2, position: "absolute", left: 87 }}>
+                    <FontAwesomeIcon icon="arrow-down" size="sm" />
+                </button>
+            </div>
+            <div>
+                <div style={{ background: "lightgrey" }}>
+                    {this.returnLines()}
+                </div>
+            </div>
         </div>
     }
 
@@ -476,79 +478,79 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
     render() {
         const doc1 = Cast(this.rootDoc!.anchor1, Doc);
         const doc2 = Cast(this.rootDoc!.anchor2, Doc);
-        if (StrCast(this.rootDoc.bucketfield)==="webs"){
-            this.props.Document._viewType=CollectionViewType.Stacking;  
-            this.props.Document._chromeStatus='disabled';
-            this.props.Document._height=this.rootDoc._height;
+        if (StrCast(this.rootDoc.bucketfield) === "webs") {
+            this.props.Document._viewType = CollectionViewType.Stacking;
+            this.props.Document._chromeStatus = 'disabled';
+            this.props.Document._height = this.rootDoc._height;
             return <div>
-            <CollectionView {...this.props}
-            Document={this.props.Document}
-            PanelHeight={this.panelHeight}
-            whenActiveChanged={emptyFunction}
-            onClick={undefined}
-            moveDocument={returnFalse}
-            childLayoutTemplate={undefined}
-            addDocument={undefined}
-            removeDocument={returnFalse}
-            focus={this.selectElement}
-            ScreenToLocalTransform={this.getTransform} />
+                <CollectionView {...this.props}
+                    Document={this.props.Document}
+                    PanelHeight={this.panelHeight}
+                    whenActiveChanged={emptyFunction}
+                    onClick={undefined}
+                    moveDocument={returnFalse}
+                    childLayoutTemplate={undefined}
+                    addDocument={undefined}
+                    removeDocument={returnFalse}
+                    focus={this.selectElement}
+                    ScreenToLocalTransform={this.getTransform} />
             </div>
         }
-        if (this.rootDoc.isBucket === true){
-            this.props.Document._viewType=CollectionViewType.Stacking;  
-            this.props.Document._chromeStatus='disabled';
-            this.props.Document._height=this.rootDoc._height;
+        if (this.rootDoc.isBucket === true) {
+            this.props.Document._viewType = CollectionViewType.Stacking;
+            this.props.Document._chromeStatus = 'disabled';
+            this.props.Document._height = this.rootDoc._height;
 
             return <div>
-            <CollectionView {...this.props}
-            Document={this.props.Document}
-            PanelHeight={this.panelHeight}
-            whenActiveChanged={emptyFunction}
-            onClick={undefined}
-            moveDocument={returnFalse}
-            childLayoutTemplate={this.childLayoutTemplate}
-            addDocument={undefined}
-            removeDocument={returnFalse}
-            focus={this.selectElement}
-            ScreenToLocalTransform={this.getTransform} />
-            <button onClick={()=>this.newsearch()}className="bucket-expand" style={{transform:"none", fontSize:"100%",textTransform:"none", background: "lightgray",color: "black", bottom: 8, marginBottom:-2, paddingTop:2,fontFamily:"Arial, sans-serif"}}>See all {StrCast(this.rootDoc.bucketfield)}...
+                <CollectionView {...this.props}
+                    Document={this.props.Document}
+                    PanelHeight={this.panelHeight}
+                    whenActiveChanged={emptyFunction}
+                    onClick={undefined}
+                    moveDocument={returnFalse}
+                    childLayoutTemplate={this.childLayoutTemplate}
+                    addDocument={undefined}
+                    removeDocument={returnFalse}
+                    focus={this.selectElement}
+                    ScreenToLocalTransform={this.getTransform} />
+                <button onClick={() => this.newsearch()} className="bucket-expand" style={{ transform: "none", fontSize: "100%", textTransform: "none", background: "lightgray", color: "black", bottom: 8, marginBottom: -2, paddingTop: 2, fontFamily: "Arial, sans-serif" }}>See all {StrCast(this.rootDoc.bucketfield)}...
             </button>
             </div>
         }
-        else if (this.rootDoc.isBucket === false){
-            this.props.Document._chromeStatus='disabled';
-            return      <div className="searchItem">
+        else if (this.rootDoc.isBucket === false) {
+            this.props.Document._chromeStatus = 'disabled';
+            return <div className="searchItem">
                 <div className="searchItem-body" >
-                <div className="searchItem-title-container">
-                <div className="searchItem-title" style={{height:"10px", overflow:"hidden", textOverflow:"ellipsis"}}>No Search Results</div>
-                </div>
+                    <div className="searchItem-title-container">
+                        <div className="searchItem-title" style={{ height: "10px", overflow: "hidden", textOverflow: "ellipsis" }}>No Search Results</div>
+                    </div>
                 </div>
             </div>
         }
         else {
-        return <div className="searchItem-overview" onPointerDown={this.pointerDown} onContextMenu={this.onContextMenu}>
-            <div ref={this._mainRef} className="searchItem"  onPointerEnter={this.highlightDoc} onPointerLeave={this.unHighlightDoc}>
-                <div className="searchItem-body" onClick={this.onClick}>
-                    <div className="searchItem-title-container">
-                        <div className="searchItem-title" style={{height:"10px", overflow:"hidden", textOverflow:"ellipsis"}}>{StrCast(this.rootDoc.title)}</div>
-                        <div className="searchItem-highlighting">
-                        {this.rootDoc.highlighting? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "":null}</div>
-                        <div className={`icon-${this._displayLines ? "q" : "a"}`}>
-                        {NumCast(this.rootDoc.length) > 1 || this.rootDoc!.type === DocumentType.PDF?this.returnButtons(): null} 
+            return <div className="searchItem-overview" onPointerDown={this.pointerDown} onContextMenu={this.onContextMenu}>
+                <div ref={this._mainRef} className="searchItem" onPointerEnter={this.highlightDoc} onPointerLeave={this.unHighlightDoc}>
+                    <div className="searchItem-body" onClick={this.onClick}>
+                        <div className="searchItem-title-container">
+                            <div className="searchItem-title" style={{ height: "10px", overflow: "hidden", textOverflow: "ellipsis" }}>{StrCast(this.rootDoc.title)}</div>
+                            <div className="searchItem-highlighting">
+                                {this.rootDoc.highlighting ? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "" : null}</div>
+                            <div className={`icon-${this._displayLines ? "q" : "a"}`}>
+                                {NumCast(this.rootDoc.length) > 1 || this.rootDoc!.type === DocumentType.PDF ? this.returnButtons() : null}
+                            </div>
                         </div>
+                    </div>
+                    <div className="searchItem-info" style={{ width: this._useIcons ? "30px" : "100%" }}>
+                        <div className={`icon-${this._useIcons ? "icons" : "live"}`}>
+                            <div className="searchItem-type" title="Click to Preview" onPointerDown={this.onPointerDown}>{this.DocumentIcon()}</div>
                         </div>
-                </div>
-                <div className="searchItem-info" style={{ width: this._useIcons ? "30px" : "100%" }}>
-                    <div className={`icon-${this._useIcons ? "icons" : "live"}`}>
-                        <div className="searchItem-type" title="Click to Preview" onPointerDown={this.onPointerDown}>{this.DocumentIcon()}</div>
                     </div>
-                </div>
-                {/* <div className="searchItem-context" title="Drag as document">
+                    {/* <div className="searchItem-context" title="Drag as document">
                     {(doc1 instanceof Doc && doc2 instanceof Doc) && this.rootDoc!.type === DocumentType.LINK ? <LinkContextMenu doc1={doc1} doc2={doc2} /> :
                         this.contextButton}
                 </div> */}
-            </div>
-        </div>;
+                </div>
+            </div>;
         }
     }
 } 
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2

