pull from master

4 files changed, 414 insertions, 1169 deletions

diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index 9b7cf2fc6..f1dd106a7 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -1,28 +1,11 @@
-import * as React from 'react';
+import { action, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { observable, action } from 'mobx';
+import * as React from 'react';
+import { DocumentType } from "../../documents/DocumentTypes";
 // import "./SearchBox.scss";
 import "./IconBar.scss";
-import "./IconButton.scss";
-import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faTimesCircle, faCheckCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import * as _ from "lodash";
 import { IconButton } from './IconButton';
-import { DocumentType } from "../../documents/DocumentTypes";
-
-
-library.add(faSearch);
-library.add(faObjectGroup);
-library.add(faImage);
-library.add(faStickyNote);
-library.add(faFilePdf);
-library.add(faFilm);
-library.add(faMusic);
-library.add(faLink);
-library.add(faChartBar);
-library.add(faGlobeAsia);
-library.add(faBan);
+import "./IconButton.scss";
 
 export interface IconBarProps {
     setIcons: (icons: string[]) => void;
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index 52641c543..349690b20 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -1,30 +1,14 @@
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import { observable, action, runInAction, IReactionDisposer, reaction } from 'mobx';
-import "./SearchBox.scss";
-import "./IconButton.scss";
-import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { library, icon } from '@fortawesome/fontawesome-svg-core';
+import * as _ from "lodash";
+import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
 import { DocumentType } from "../../documents/DocumentTypes";
 import '../globalCssVariables.scss';
-import * as _ from "lodash";
 import { IconBar } from './IconBar';
-import { props } from 'bluebird';
-import { Search } from '../../../server/Search';
-import { gravity } from 'sharp';
-
-library.add(faSearch);
-library.add(faObjectGroup);
-library.add(faImage);
-library.add(faStickyNote);
-library.add(faFilePdf);
-library.add(faFilm);
-library.add(faMusic);
-library.add(faLink);
-library.add(faChartBar);
-library.add(faGlobeAsia);
-library.add(faBan);
+import "./IconButton.scss";
+import "./SearchBox.scss";
+import { Font } from '@react-pdf/renderer';
 
 interface IconButtonProps {
     type: string;
@@ -47,59 +31,46 @@ export class IconButton extends React.Component<IconButtonProps>{
     componentDidMount = () => {
         this._resetReaction = reaction(
             () => IconBar.Instance._resetClicked,
-            () => {
+            action(() => {
                 if (IconBar.Instance._resetClicked) {
-                    runInAction(() => {
-                        this.reset();
-                        IconBar.Instance._reset++;
-                        if (IconBar.Instance._reset === 9) {
-                            IconBar.Instance._reset = 0;
-                            IconBar.Instance._resetClicked = false;
-                        }
-                    });
+                    this._isSelected = false;
+                    IconBar.Instance._reset++;
+                    if (IconBar.Instance._reset === 9) {
+                        IconBar.Instance._reset = 0;
+                        IconBar.Instance._resetClicked = false;
+                    }
                 }
-            },
+            }),
         );
+
         this._selectAllReaction = reaction(
             () => IconBar.Instance._selectAllClicked,
-            () => {
+            action(() => {
                 if (IconBar.Instance._selectAllClicked) {
-                    runInAction(() => {
-                        this.select();
-                        IconBar.Instance._select++;
-                        if (IconBar.Instance._select === 9) {
-                            IconBar.Instance._select = 0;
-                            IconBar.Instance._selectAllClicked = false;
-                        }
-                    });
+                    this._isSelected = true;
+                    IconBar.Instance._select++;
+                    if (IconBar.Instance._select === 9) {
+                        IconBar.Instance._select = 0;
+                        IconBar.Instance._selectAllClicked = false;
+                    }
                 }
-            },
+            }),
         );
     }
 
     @action.bound
     getIcon() {
         switch (this.props.type) {
-            case (DocumentType.NONE):
-                return faBan;
-            case (DocumentType.AUDIO):
-                return faMusic;
-            case (DocumentType.COL):
-                return faObjectGroup;
-            case (DocumentType.IMG):
-                return faImage;
-            case (DocumentType.LINK):
-                return faLink;
-            case (DocumentType.PDF):
-                return faFilePdf;
-            case (DocumentType.RTF):
-                return faStickyNote;
-            case (DocumentType.VID):
-                return faVideo;
-            case (DocumentType.WEB):
-                return faGlobeAsia;
-            default:
-                return faCaretDown;
+            case (DocumentType.NONE): return "ban";
+            case (DocumentType.AUDIO): return "music";
+            case (DocumentType.COL): return "object-group";
+            case (DocumentType.IMG): return "image";
+            case (DocumentType.LINK): return "link";
+            case (DocumentType.PDF): return "file-pdf";
+            case (DocumentType.RTF): return "sticky-note";
+            case (DocumentType.VID): return "video";
+            case (DocumentType.WEB): return "globe-asia";
+            default: return "caret-down";
         }
     }
 
@@ -136,53 +107,16 @@ export class IconButton extends React.Component<IconButtonProps>{
         //backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent
     };
 
-    @action.bound
-    public reset() { this._isSelected = false; }
-
-    @action.bound
-    public select() { this._isSelected = true; }
-
-    @action
-    onMouseLeave = () => { this._hover = false; }
-
-    @action
-    onMouseEnter = () => { this._hover = true; }
-
-    getFA = () => {
-        switch (this.props.type) {
-            case (DocumentType.NONE):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faBan} />);
-            case (DocumentType.AUDIO):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faMusic} />);
-            case (DocumentType.COL):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faObjectGroup} />);
-            case (DocumentType.IMG):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faImage} />);
-            case (DocumentType.LINK):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faLink} />);
-            case (DocumentType.PDF):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faFilePdf} />);
-            case (DocumentType.RTF):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faStickyNote} />);
-            case (DocumentType.VID):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faVideo} />);
-            case (DocumentType.WEB):
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faGlobeAsia} />);
-            default:
-                return (<FontAwesomeIcon className="fontawesome-icon" icon={faCaretDown} />);
-        }
-    }
-
     render() {
         return (
             <div className="type-outer" id={this.props.type + "-filter"}
-                onMouseEnter={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}
+                onMouseEnter={() => this._hover = true}
+                onMouseLeave={() => this._hover = false}
                 onClick={this.onClick}>
                 <div className="type-icon" id={this.props.type + "-icon"}
                     style={this._hover ? this.hoverStyle : this._isSelected ? this.selected : this.notSelected}
                 >
-                    {this.getFA()}
+                    <FontAwesomeIcon className="fontawesome-icon" icon={this.getIcon()} />
                 </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 3f06ba7d3..13d4a6d5a 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -6,71 +6,132 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
-    position: absolute;
+    position: relative;
     font-size: 10px;
     line-height: 1;
     overflow-y: auto;
     overflow-x: visible;
-    background: lightgrey,
-}
+    background: lightgrey;
+    overflow: visible;
+    z-index: 10000;
 
-.searchBox-bar {
-    height: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: black;
-    .searchBox-barChild {
+    .searchBox-bar {
+        height: $searchpanel-height;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: black;
 
-        &.searchBox-collection {
-            flex: 0 1 auto;
-            margin-left: 2px;
-            margin-right: 2px
-        }
+        .searchBox-lozenges {
+            position: absolute;
+            left: 15;
+            display: flex;
 
-        &.searchBox-input {
-            margin:5px;
-            border-radius:20px;
-            border:black;    
-            display: block;
-            width: 130px;
-            -webkit-transition: width 0.4s;
-            transition: width 0.4s;
-            align-self: stretch;
-            outline:none;
+            .searchBox-lozenge-user,
+            .searchBox-lozenge-dashboard,
+            .searchBox-lozenge {
+                background-color: #313131;
+                border-radius: 5px;
+                height: 18px;
+                padding: 4px;
+                box-shadow: lightgrey 0.15em 0.15em 0.1em;
+                margin: 2px;
+                margin-bottom: 4px;
+                border-top: dimgrey 1px solid;
+                border-left: dimgrey 1px solid;
+                display: flex;
+                .searchBox-logoff,
+                .searchBox-dashboards {
+                    border-radius: 3px;
+                    background: olivedrab;
+                    color: white;
+                    position: relative;
+                    display: none;
+                    margin-left: 3px;
+                    padding-left: 2px;
+                    padding-right: 2px;
+                    padding-bottom: 11px;
+                    cursor: default;
+                }
+                .searchBox-logoff {
+                    background: red;
+                }
+
+                .searchBox-dashSelect{
+                    background-color: black;
+                    color: white;
+                    font-size: 9;
+                    margin-right: 6;
+                    border-radius: 5px;
+                    position: relative;
+                    height: 15px;
+                    transform: translate(0,-3px);
+
+                    &:hover {
+                        cursor: pointer;
+                    }
+                }
+            }
+            .searchBox-lozenge-user:hover {
+                .searchBox-logoff {
+                    display:inline-block;
+                }
+            }
+            .searchBox-lozenge-dashboard:hover {
+                .searchBox-dashboards {
+                    display:inline-block;
+                }
+            }
         }
-
-        .searchBox-input:focus {
-            width: 500px;
-            outline:none;
+        .searchBox-query {
+            position: relative;
+            display: flex;
+            width: 450;
         }
+        .searchBox-barChild {
 
-        &.searchBox-filter {
-            align-self: stretch;
-            button{
-                transform:none;
+            &.searchBox-collection {
+                flex: 0 1 auto;
+                margin-left: 2px;
+                margin-right: 2px
             }
-            button:hover{
-                transform:none;
+
+            &.searchBox-input {
+                margin:5px;
+                border-radius:20px;
+                border:black;    
+                display: block;
+                width: 130px;
+                -webkit-transition: width 0.4s;
+                transition: width 0.4s;
+                align-self: stretch;
+                outline:none;
+                &:focus {
+                    width: 500px;
+                    outline:none;
+                }
+            }
+            &.searchBox-filter {
+                align-self: stretch;
+                button{
+                    transform:none;
+                    &:hover {
+                        transform: none;
+                    }
+                }
             }
-        }
 
-        &.searchBox-submit {
-            margin-left: 2px;
-            margin-right: 2px
-        }
+            &.searchBox-submit {
+                margin-left: 2px;
+                margin-right: 2px
+            }
 
-        &.searchBox-close {
-            color: $light-color;
-            max-height: 32px;
+            &.searchBox-close {
+                color: $light-color;
+                max-height: $searchpanel-height;
+            }
         }
-    }
-}
-
-.searchBox-quickFilter {
-    width: 100%;
-    height: 40px;
-    margin-top: 10px;
+    }   
 }
 
 .searchBox-results {
@@ -91,241 +152,4 @@
         text-align: left;
         font-weight: bold;
     }
-}
-
-.filter-form {
-    position: relative;
-    background: #121721;
-    flex-direction: column;
-    transform-origin: top;
-    transition: height 0.3s ease, display 0.6s ease, overflow 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;
-
-        overflow:hidden;
-        transition:height 0.3s ease-out;
-        height:0px;
-
-    }
-    .filter-key {
-        position: relative;
-        right: 1px;
-        color: grey;
-        transform-origin: top;
-        border-top: 0px;
-        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 847bda137..b381bbfa9 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1,184 +1,99 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tooltip } from '@material-ui/core';
-import { action, computed, observable, runInAction, reaction, IReactionDisposer } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import * as rp from 'request-promise';
-import { Doc, DocListCast, Opt } from '../../../fields/Doc';
+import { Doc, DocListCast, Field, Opt } from '../../../fields/Doc';
 import { documentSchema } from "../../../fields/documentSchemas";
-import { Id } from '../../../fields/FieldSymbols';
+import { Copy, Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { createSchema, listSpec, makeInterface } from '../../../fields/Schema';
 import { SchemaHeaderField } from '../../../fields/SchemaHeaderField';
 import { Cast, NumCast, StrCast } from '../../../fields/Types';
-import { returnFalse, Utils } from '../../../Utils';
+import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents, Utils } from '../../../Utils';
 import { Docs } from '../../documents/Documents';
 import { DocumentType } from "../../documents/DocumentTypes";
-import { CurrentUserUtils } from '../../util/CurrentUserUtils';
+import { CurrentUserUtils } from "../../util/CurrentUserUtils";
 import { SetupDrag } from '../../util/DragManager';
 import { SearchUtil } from '../../util/SearchUtil';
-import { SelectionManager } from '../../util/SelectionManager';
 import { Transform } from '../../util/Transform';
-import { CollectionView, CollectionViewType } from '../collections/CollectionView';
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionSchemaView, ColumnType } from "../collections/CollectionSchemaView";
+import { CollectionViewType } from '../collections/CollectionView';
 import { ViewBoxBaseComponent } from "../DocComponent";
-import { DocumentView } from '../nodes/DocumentView';
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import "./SearchBox.scss";
-import { ColumnType } from "../collections/CollectionSchemaView";
+import { undoBatch } from "../../util/UndoManager";
 
-export const searchSchema = createSchema({
-    id: "string",
-    Document: Doc,
-    searchQuery: "string",
-});
-
-export enum Keys {
-    TITLE = "title",
-    AUTHOR = "author",
-    DATA = "data",
-    TEXT = "text"
-}
+export const searchSchema = createSchema({ Document: Doc });
 
 type SearchBoxDocument = makeInterface<[typeof documentSchema, typeof searchSchema]>;
 const SearchBoxDocument = makeInterface(documentSchema, searchSchema);
 
-//React.Component<SearchProps> 
 @observer
 export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDocument>(SearchBoxDocument) {
+    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchBox, fieldKey); }
+    public static Instance: SearchBox;
 
-    get _searchString() { return this.layoutDoc.searchQuery; }
-    @computed set _searchString(value) { this.layoutDoc.searchQuery = (value); }
-    @observable private _resultsOpen: boolean = false;
-    @observable _searchbarOpen: boolean = false;
-    @observable private _results: [Doc, string[], string[]][] = [];
-    @observable private _openNoResults: boolean = false;
-    @observable private _visibleElements: JSX.Element[] = [];
-    @observable private _visibleDocuments: Doc[] = [];
-
-    static NUM_SEARCH_RESULTS_PER_PAGE = 25;
-
-    private _resultsSet = new Map<Doc, number>();
-    private _resultsRef = React.createRef<HTMLDivElement>();
-    public inputRef = React.createRef<HTMLInputElement>();
-
-    private _isSearch: ("search" | "placeholder" | undefined)[] = [];
-    private _isSorted: ("sorted" | "placeholder" | undefined)[] = [];
-
+    private _allIcons: string[] = [DocumentType.INK, DocumentType.AUDIO, DocumentType.COL, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.RTF, DocumentType.VID, DocumentType.WEB];
+    private _numResultsPerPage = 500;
     private _numTotalResults = -1;
     private _endIndex = -1;
-
-    static Instance: SearchBox;
-
+    private _lockPromise?: Promise<void>;
+    private _resultsSet = new Map<Doc, number>();
+    private _inputRef = React.createRef<HTMLInputElement>();
     private _maxSearchIndex: number = 0;
     private _curRequest?: Promise<any> = undefined;
-    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchBox, fieldKey); }
+    private _disposers: { [name: string]: IReactionDisposer } = {};
+    private _blockedTypes = [DocumentType.PRESELEMENT, DocumentType.KVP, DocumentType.FILTER, DocumentType.DOCHOLDER, DocumentType.SEARCH, DocumentType.SEARCHITEM, DocumentType.FONTICON, DocumentType.BUTTON, DocumentType.SCRIPTING];
 
-    private new_buckets: { [characterName: string]: number } = {};
-    //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;
+    private docsforfilter: Doc[] | undefined = [];
+    private realTotalResults: number = 0;
+    private newsearchstring = "";
+    private collectionRef = React.createRef<HTMLDivElement>();
 
-    @observable private newAssign: boolean = true;
+    @observable _icons: string[] = this._allIcons;
+    @observable _results: [Doc, string[], string[]][] = [];
+    @observable _visibleElements: JSX.Element[] = [];
+    @observable _visibleDocuments: Doc[] = [];
+    @observable _deletedDocsStatus: boolean = false;
+    @observable _onlyAliases: boolean = true;
+    @observable _searchbarOpen = false;
+    @observable _searchFullDB = "DB";
+    @observable _noResults = "";
+    @observable _pageStart = 0;
+    @observable open = false;
+    @observable children = 0;
+    @computed get filter() { return this._results?.length && (this.currentSelectedCollection?.props.Document._searchFilterDocs || this.currentSelectedCollection?.props.Document._docFilters); }
 
     constructor(props: any) {
         super(props);
         SearchBox.Instance = this;
-        this.resultsScrolled = this.resultsScrolled.bind(this);
-
     }
-    @observable setupButtons = false;
-    private _disposers: { [name: string]: IReactionDisposer } = {};
-
-    componentDidMount = () => {
-        this._disposers.filters = reaction(() => Cast(this.props.Document._docFilters, listSpec("string")), // if a link is deleted, then remove all hyperlinks that reference it from the text's marks
-            newFilters => {
-                if (this.searchFullDB) {
-                    runInAction(() => this._pageStart = 0);
-                    this.submitSearch();
-                    // newFilters?.forEach(f => {
-                    //     console.log(f);
-                    // })
-                }
-            });
-        if (this.setupButtons === false) {
 
-            runInAction(() => this.setupButtons = true);
+    componentDidMount = action(() => {
+        if (this._inputRef.current) {
+            this._inputRef.current.focus();
         }
-        if (this.inputRef.current) {
-            this.inputRef.current.focus();
-            runInAction(() => { this._searchbarOpen = true; });
-        }
-        if (this.rootDoc.searchQuery && this.newAssign) {
-            const sq = this.rootDoc.searchQuery;
-            runInAction(() => {
-
-                // this._deletedDocsStatus=this.props.filterQuery!.deletedDocsStatus;
-                // this._authorFieldStatus=this.props.filterQuery!.authorFieldStatus
-                // this._titleFieldStatus=this.props.filterQuery!.titleFieldStatus;
-                // this._basicWordStatus=this.props.filterQuery!.basicWordStatus;
-                // this._icons=this.props.filterQuery!.icons;
-                this.newAssign = false;
-            });
-            runInAction(() => {
-                this.layoutDoc._searchString = StrCast(sq);
-                this.submitSearch();
-            });
-        }
-    }
+        this._disposers.filters = reaction(() => this.props.Document._docFilters,
+            (filters: any) => this.setSearchFilter(this.currentSelectedCollection, !this.filter ? undefined : this.docsforfilter));
+    });
 
     componentWillUnmount() {
         Object.values(this._disposers).forEach(disposer => disposer?.());
     }
 
+    @computed get currentSelectedCollection() { return CollectionDockingView.Instance; }
 
-    @action
-    getViews = (doc: Doc) => SearchUtil.GetViewsOfDocument(doc)
-
-
-    @observable newsearchstring: string = "";
-    @action.bound
-    onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        this.layoutDoc._searchString = e.target.value;
+    onChange = action((e: React.ChangeEvent<HTMLInputElement>) => {
         this.newsearchstring = e.target.value;
         if (e.target.value === "") {
-            if (this.currentSelectedCollection !== undefined) {
-                let newarray: Doc[] = [];
-                let docs: Doc[] = [];
-                docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]);
-                while (docs.length > 0) {
-                    newarray = [];
-                    docs.forEach((d) => {
-                        if (d.data !== undefined) {
-                            d._searchDocs = new List<Doc>();
-                            d._docFilters = new List();
-                            const newdocs = DocListCast(d.data);
-                            newdocs.forEach((newdoc) => {
-                                newarray.push(newdoc);
-                            });
-                        }
-                    });
-                    docs = newarray;
-                }
-
-                this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
-                this.currentSelectedCollection.props.Document._docFilters = new List();
-                this.props.Document.selectedDoc = undefined;
-            }
-            this._results.forEach(result => {
-                Doc.UnBrushDoc(result[0]);
-                result[0].searchMatch = undefined;
-            });
-
-            if (this.currentSelectedCollection !== undefined) {
-                this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
-                this.currentSelectedCollection = undefined;
-                this.props.Document.selectedDoc = undefined;
+            console.log("Reset start");
+            this.docsforfilter = undefined;
+            this.setSearchFilter(this.currentSelectedCollection, undefined);
+            this.resetSearch(false);
 
-            }
-            runInAction(() => { this.open = false; });
-            this._openNoResults = false;
+            this.open = false;
             this._results = [];
             this._resultsSet.clear();
             this._visibleElements = [];
@@ -187,62 +102,16 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             this._curRequest = undefined;
             this._maxSearchIndex = 0;
         }
-    }
+    });
 
-    enter = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") {
+    enter = action((e: React.KeyboardEvent | undefined) => {
+        if (!e || e.key === "Enter") {
             this.layoutDoc._searchString = this.newsearchstring;
-            runInAction(() => this._pageStart = 0);
-
-            if (StrCast(this.layoutDoc._searchString) !== "" || !this.searchFullDB) {
-                runInAction(() => this.open = true);
-            }
-            else {
-                runInAction(() => this.open = false);
-
-            }
+            this._pageStart = 0;
+            this.open = StrCast(this.layoutDoc._searchString) !== "" || this._searchFullDB !== "DB";
             this.submitSearch();
         }
-    }
-
-    @observable open: boolean = false;
-
-
-    public static async convertDataUri(imageUri: string, returnedFilename: string) {
-        try {
-            const posting = Utils.prepend("/uploadURI");
-            const returnedUri = await rp.post(posting, {
-                body: {
-                    uri: imageUri,
-                    name: returnedFilename
-                },
-                json: true,
-            });
-            return returnedUri;
-
-        } catch (e) {
-            console.log("SearchBox:" + e);
-        }
-    }
-
-    public _allIcons: string[] = [DocumentType.INK, DocumentType.AUDIO, DocumentType.COL, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.RTF, DocumentType.VID, DocumentType.WEB];
-    //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
-    // get _icons() { return this.props.searchFileTypes; }
-    // set _icons(value) {
-    //     this.props.setSearchFileTypes(value);
-    // }
-    @observable _icons: string[] = this._allIcons;
-    //if all of these are true, no key filter is applied
-    @observable private _titleFieldStatus: boolean = true;
-    @observable private _authorFieldStatus: boolean = true;
-    //this also serves as an indicator if the collection status filter is applied
-    @observable public _deletedDocsStatus: boolean = false;
-    @observable public _onlyAliases: boolean = true;
-    @observable private _collectionStatus = false;
-
+    });
 
     getFinalQuery(query: string): string {
         //alters the query so it looks in the correct fields
@@ -250,8 +119,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         //TODO: data
         const initialfilters = Cast(this.props.Document._docFilters, listSpec("string"), []);
 
-        const type: string[] = [];
-
         const filters: string[] = [];
 
         for (let i = 0; i < initialfilters.length; i = i + 3) {
@@ -279,9 +146,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                 const mod = "_t:";
                 const newWords: string[] = [];
                 const oldWords = values[0].split(" ");
-                oldWords.forEach((word, i) => {
-                    i === 0 ? newWords.push(key + mod + "\"" + word + "\"") : newWords.push("AND " + key + mod + "\"" + word + "\"");
-                });
+                oldWords.forEach((word, i) => i === 0 ? newWords.push(key + mod + "\"" + word + "\"") : newWords.push("AND " + key + mod + "\"" + word + "\""));
                 query = `(${query}) AND (${newWords.join(" ")})`;
             }
             else {
@@ -289,194 +154,74 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                     const mod = "_t:";
                     const newWords: string[] = [];
                     const oldWords = values[i].split(" ");
-                    oldWords.forEach((word, i) => {
-                        i === 0 ? newWords.push(key + mod + "\"" + word + "\"") : newWords.push("AND " + key + mod + "\"" + word + "\"");
-                    });
+                    oldWords.forEach((word, i) => i === 0 ? newWords.push(key + mod + "\"" + word + "\"") : newWords.push("AND " + key + mod + "\"" + word + "\""));
                     const v = "(" + newWords.join(" ") + ")";
                     if (i === 0) {
-                        query = `(${query}) AND (${v}`;
-                        if (values.length === 1) {
-                            query = query + ")";
-                        }
-                    }
-                    else if (i === values.length - 1) {
-                        query = query + " OR " + v + ")";
-                    }
-                    else {
-                        query = query + " OR " + v;
+                        query = `(${query}) AND (${v}` + (values.length === 1 ? ")" : "");
                     }
+                    else query = query + " OR " + v + (i === values.length - 1 ? ")" : "");
                 }
             }
-
         }
 
-
-        // let limit = typepos.length
-        // typepos.forEach(i => {
-        //     if (i === 0) {
-        //         if (i + 1 === limit) {
-        // query = query + " && " + filters[i] + "_t:" + filters;
-        //         }
-        //         else if (filters[i] === filters[i + 3]) {
-        //             query = query + " && (" + filters[i] + "_t:" + filters;
-        //         }
-        //         else {
-        //             query = query + " && " + filters[i] + "_t:" + filters;
-        //         }
-
-        //     }
-        //     else if (i + 3 > filters.length) {
-
-        //     }
-        //     else {
-
-        //     }
-
-        // });
-
-        // query = this.applyBasicFieldFilters(query);
-
-
-
-        query = query.replace(/-\s+/g, '');
-        // query = query.replace(/-/g, "");
-        return query;
-    }
-
-    basicRequireWords(query: string): string {
-        return query.split(" ").join(" + ").replace(/ + /, "");
+        return query.replace(/-\s+/g, '');
     }
 
     @action
     filterDocsByType(docs: Doc[]) {
         const finalDocs: Doc[] = [];
-        const blockedTypes: string[] = [DocumentType.PRESELEMENT, DocumentType.DOCHOLDER, DocumentType.SEARCH, DocumentType.SEARCHITEM, DocumentType.FONTICON, DocumentType.BUTTON, DocumentType.SCRIPTING];
         docs.forEach(doc => {
-            const layoutresult = Cast(doc.type, "string");
-            if (layoutresult && !blockedTypes.includes(layoutresult)) {
-                if (layoutresult && this._icons.includes(layoutresult)) {
-                    finalDocs.push(doc);
-                }
+            const layoutresult = StrCast(doc.type, "string") as DocumentType;
+            if (layoutresult && !this._blockedTypes.includes(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 === this._allIcons.length ? undefined : 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;
+    static foreachRecursiveDoc(docs: Doc[], func: (doc: Doc) => void) {
+        let newarray: Doc[] = [];
+        while (docs.length > 0) {
+            newarray = [];
+            docs.filter(d => d).forEach(d => {
+                const fieldKey = Doc.LayoutFieldKey(d);
+                const annos = !Field.toString(Doc.LayoutField(d) as Field).includes("CollectionView");
+                const data = d[annos ? fieldKey + "-annotations" : fieldKey];
+                data && newarray.push(...DocListCast(data));
+                func(d);
+            });
+            docs = newarray;
+        }
     }
 
-
-    currentSelectedCollection: DocumentView | undefined = undefined;
-    docsforfilter: Doc[] = [];
-
+    @action
     searchCollection(query: string) {
-        const selectedCollection: DocumentView = SelectionManager.SelectedDocuments()[0];
+        const selectedCollection = this.currentSelectedCollection;//SelectionManager.SelectedDocuments()[0];
         query = query.toLowerCase();
 
         if (selectedCollection !== undefined) {
-            this.currentSelectedCollection = selectedCollection;
-            if (this.filter === true) {
-                this.props.Document.selectedDoc = selectedCollection.props.Document;
-            }
-            let docs = DocListCast(selectedCollection.dataDoc[Doc.LayoutFieldKey(selectedCollection.dataDoc)]);
+            // this._currentSelectedCollection = selectedCollection;
+            const docs = DocListCast(selectedCollection.dataDoc[Doc.LayoutFieldKey(selectedCollection.dataDoc)]);
             const found: [Doc, string[], string[]][] = [];
-            const docsforFilter: Doc[] = [];
-            let newarray: Doc[] = [];
+            SearchBox.foreachRecursiveDoc(docs, (doc: Doc) => {
+                const hlights = new Set<string>();
+                SearchBox.documentKeys(doc).forEach(key => Field.toString(doc[key] as Field).toLowerCase().includes(query) && hlights.add(key));
+                Array.from(hlights.keys()).length > 0 && found.push([doc, Array.from(hlights.keys()), []]);
+            });
 
-            while (docs.length > 0) {
-                newarray = [];
-                docs.forEach((d) => {
-                    d ? console.log(Cast(d.context, Doc)) : null;
-                    if (d.data !== undefined) {
-                        newarray.push(...DocListCast(d.data));
-                    }
-                    const hlights: string[] = [];
-                    const protos = Doc.GetAllPrototypes(d);
-                    protos.forEach(proto => {
-                        Object.keys(proto).forEach(key => {
-                            if (StrCast(d[key]).toLowerCase().includes(query) && !hlights.includes(key)) {
-                                hlights.push(key);
-                            }
-                        });
-                    });
-                    if (hlights.length > 0) {
-                        found.push([d, hlights, []]);
-                        docsforFilter.push(d);
-                    }
-                });
-                docs = newarray;
-            }
             this._results = found;
-            this.docsforfilter = docsforFilter;
-            if (this.filter === true) {
-                selectedCollection.props.Document._searchDocs = new List<Doc>(docsforFilter);
-                docs = DocListCast(selectedCollection.dataDoc[Doc.LayoutFieldKey(selectedCollection.dataDoc)]);
-                while (docs.length > 0) {
-                    newarray = [];
-                    docs.forEach((d) => {
-                        if (d.data !== undefined) {
-                            d._searchDocs = new List<Doc>(docsforFilter);
-                            const newdocs = DocListCast(d.data);
-                            newdocs.forEach((newdoc) => {
-                                newarray.push(newdoc);
-                            });
-                        }
-                    });
-                    docs = newarray;
-                }
-            }
+            this.docsforfilter = this._results.map(r => r[0]);
+            this.setSearchFilter(selectedCollection, this.filter && found.length ? this.docsforfilter : undefined);
             this._numTotalResults = found.length;
+            this.realTotalResults = found.length;
         }
         else {
-            this.noresults = "No collection selected :(";
+            this._noResults = "No collection selected :(";
         }
 
     }
 
-
-    documentKeys(doc: Doc) {
+    static documentKeys(doc: Doc) {
         const keys: { [key: string]: boolean } = {};
         // bcz: ugh.  this is untracked since otherwise a large collection of documents will blast the server for all their fields.
         //  then as each document's fields come back, we update the documents _proxies.  Each time we do this, the whole schema will be
@@ -484,139 +229,52 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         //  then by the time the options button is clicked, all of the fields should be in place.  If a new field is added while this menu
         //  is displayed (unlikely) it won't show up until something else changes.
         //TODO Types
-        Doc.GetAllPrototypes(doc).map
-            (proto => Object.keys(proto).forEach(key => keys[key] = false));
+        Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => keys[key] = false));
         return Array.from(Object.keys(keys));
     }
 
-    applyBasicFieldFilters(query: string) {
-        let finalQuery = "";
-
-        finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TITLE);
-        finalQuery = finalQuery + this.basicFieldFilters(query, Keys.AUTHOR);
-
-        if (this._deletedDocsStatus) {
-            finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TEXT);
-        }
-        return finalQuery;
-    }
-
-    basicFieldFilters(query: string, type: string): string {
-        let mod = "";
-        switch (type) {
-            case Keys.AUTHOR: mod = " author_t:"; break;
-            case Keys.TITLE: mod = " title_t:"; break;
-            case Keys.TEXT: mod = " text_t:"; break;
-        }
-
-        const newWords: string[] = [];
-        const oldWords = query.split(" ");
-        oldWords.forEach(word => newWords.push(mod + word));
-
-        query = newWords.join(" ");
-
-        return query;
-    }
-
-    get fieldFiltersApplied() { return !(this._authorFieldStatus && this._titleFieldStatus); }
-
     @action
-    submitSearch = async (reset?: boolean) => {
-        if (this.currentSelectedCollection !== undefined) {
-            let newarray: Doc[] = [];
-            let docs: Doc[] = [];
-            docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]);
-            while (docs.length > 0) {
-                newarray = [];
-                docs.forEach((d) => {
-                    if (d.data !== undefined) {
-                        d._searchDocs = new List<Doc>();
-                        //d._docFilters = new List();
-                        const newdocs = DocListCast(d.data);
-                        newdocs.forEach((newdoc) => {
-                            newarray.push(newdoc);
-                        });
-                    }
-                });
-                docs = newarray;
-            }
+    submitSearch = async () => {
+        this.resetSearch(false);
 
-            this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
-            this.currentSelectedCollection.props.Document._docFilters = new List();
-            this.props.Document.selectedDoc = undefined;
-        }
-        if (reset) {
-            this.layoutDoc._searchString = "";
-        }
         //this.props.Document._docFilters = new List();
-        this.noresults = "";
+        this._noResults = "";
 
         this.dataDoc[this.fieldKey] = new List<Doc>([]);
-        this.headercount = 0;
         this.children = 0;
-        this.buckets = [];
-        this.new_buckets = {};
         let query = StrCast(this.layoutDoc._searchString);
         Doc.SetSearchQuery(query);
-        this.searchFullDB ? query = this.getFinalQuery(query) : console.log("local");
-        this._results.forEach(result => {
-            Doc.UnBrushDoc(result[0]);
-            result[0].searchMatch = undefined;
-        });
+        this._searchFullDB && (query = this.getFinalQuery(query));
         this._results = [];
         this._resultsSet.clear();
-        this._isSearch = [];
-        this._isSorted = [];
         this._visibleElements = [];
         this._visibleDocuments = [];
-        if (StrCast(this.props.Document.searchQuery)) {
-            if (this._timeout) { clearTimeout(this._timeout); this._timeout = undefined; }
-            this._timeout = setTimeout(() => {
-                console.log("Resubmitting search");
-            }, 60000);
-        }
 
-        if (query !== "") {
+        if (query || this._searchFullDB === "My Stuff") {
             this._endIndex = 12;
             this._maxSearchIndex = 0;
             this._numTotalResults = -1;
-            this.searchFullDB ? await this.getResults(query) : this.searchCollection(query);
+            this._searchFullDB ? await this.searchDatabase(query) : this.searchCollection(query);
             runInAction(() => {
-                this._resultsOpen = true;
-                this._searchbarOpen = true;
-                this._openNoResults = true;
+                this.open = this._searchbarOpen = true;
                 this.resultsScrolled();
-
             });
         }
     }
 
-    @observable searchFullDB = true;
-
-    @observable _timeout: any = undefined;
-
-    @observable firststring: string = "";
-    @observable secondstring: string = "";
-
-    @observable bucketcount: number[] = [];
-    @observable buckets: Doc[] | undefined;
-
     getAllResults = async (query: string) => {
         return SearchUtil.Search(query, true, { fq: this.filterQuery, start: 0, rows: 10000000 });
     }
 
     private get filterQuery() {
-        const types = ["preselement", "docholder", "search", "searchitem", "fonticonbox"]; // this.filterTypes;
         const baseExpr = "NOT system_b:true";
-        const includeDeleted = this.getDataStatus() ? "" : " NOT deleted_b:true";
-        const typeExpr = this._onlyAliases ? "NOT {!join from=id to=proto_i}type_t:*" : `(type_t:* OR {!join from=id to=proto_i}type_t:*) ${types.map(type => `NOT ({!join from=id to=proto_i}type_t:${type}) AND NOT type_t:${type}`).join(" AND ")}`;
+        const authorExpr = this._searchFullDB === "My Stuff" ? ` author_t:${Doc.CurrentUserEmail}` : undefined;
+        const includeDeleted = this._deletedDocsStatus ? "" : " NOT deleted_b:true";
+        const typeExpr = this._onlyAliases ? "NOT {!join from=id to=proto_i}type_t:*" : `(type_t:* OR {!join from=id to=proto_i}type_t:*) ${this._blockedTypes.map(type => `NOT ({!join from=id to=proto_i}type_t:${type}) AND NOT type_t:${type}`).join(" AND ")}`;
         // fq: type_t:collection OR {!join from=id to=proto_i}type_t:collection   q:text_t:hello
-        const query = [baseExpr, includeDeleted, typeExpr].join(" AND ").replace(/AND $/, "");
-        return query;
+        return [baseExpr, authorExpr, includeDeleted, typeExpr].filter(q => q).join(" AND ").replace(/AND $/, "");
     }
 
-    getDataStatus() { return this._deletedDocsStatus; }
-
     @computed get primarySort() {
         const suffixMap = (type: ColumnType) => {
             switch (type) {
@@ -625,19 +283,16 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                 case ColumnType.Boolean: return "_b";
                 case ColumnType.Number: return "_n";
             }
-        }
+        };
         const headers = Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []);
         return headers.reduce((p: Opt<string>, header: SchemaHeaderField) => p || (header.desc !== undefined && suffixMap(header.type) ? (header.heading + suffixMap(header.type) + (header.desc ? " desc" : " asc")) : undefined), undefined);
     }
-    private NumResults = 50;
-    private lockPromise?: Promise<void>;
-    getResults = async (query: string) => {
-        if (this.lockPromise) {
-            await this.lockPromise;
-        }
-        this.lockPromise = new Promise(async res => {
+
+    searchDatabase = async (query: string) => {
+        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, { onlyAliases: true, allowAliases: true, sort: this.primarySort, fq: this.filterQuery, start: 0, rows: this.NumResults, hl: true, "hl.fl": "*", }).then(action(async (res: SearchUtil.DocSearchResult) => {
+                this._curRequest = SearchUtil.Search(query, true, { onlyAliases: true, allowAliases: true, /*sort: this.primarySort,*/ fq: this.filterQuery, start: 0, rows: this._numResultsPerPage, hl: "on", "hl.fl": "*", }).then(action(async (res: SearchUtil.DocSearchResult) => {
                     // happens at the beginning
                     this.realTotalResults = res.numFound <= 0 ? 0 : res.numFound;
                     if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) {
@@ -652,50 +307,44 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                     docs.forEach((doc, index) => highlights[doc[Id]] = highlightList[index]);
                     const filteredDocs = this.filterDocsByType(docs);
 
-                    runInAction(() => {
-                        filteredDocs.forEach((doc, i) => {
-                            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)).filter(k => k) : [];
-                            // if (this.findCommonElements(hlights)) {
-                            // }
-                            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);
-                            }
+                    runInAction(() => filteredDocs.forEach((doc, i) => {
+                        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)).filter(k => k) : [];
+                        // if (this.findCommonElements(hlights)) {
+                        // }
+                        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;
+                this._maxSearchIndex += this._numResultsPerPage;
 
                 await this._curRequest;
             }
 
             this.resultsScrolled();
+
+            const selectedCollection = this.currentSelectedCollection;//SelectionManager.SelectedDocuments()[0];
+            this.docsforfilter = this._results.map(r => r[0]);
+            this.setSearchFilter(selectedCollection, this.filter ? this.docsforfilter : undefined);
             res();
         });
-        return this.lockPromise;
+        return this._lockPromise;
     }
-    @observable noresults = "";
-    collectionRef = React.createRef<HTMLSpanElement>();
+
     startDragCollection = async () => {
         const res = await this.getAllResults(this.getFinalQuery(StrCast(this.layoutDoc._searchString)));
         const filtered = this.filterDocsByType(res.docs);
-        const docs = filtered.map(doc => {
-            const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
-            if (isProto) {
-                return Doc.MakeDelegate(doc);
-            } else {
-                return Doc.MakeAlias(doc);
-            }
-        });
+        const docs = filtered.map(doc => Doc.GetT(doc, "isPrototype", "boolean", true) ? Doc.MakeDelegate(doc) : Doc.MakeAlias(doc));
         let x = 0;
         let y = 0;
         for (const doc of docs.map(d => Doc.Layout(d))) {
@@ -719,28 +368,26 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                 y += 300;
             }
         }
-        return Docs.Create.SchemaDocument(Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []), DocListCast(this.dataDoc[this.fieldKey]), { _autoHeight: true, _viewType: CollectionViewType.Schema, title: StrCast(this.layoutDoc._searchString) });
+        const headers = Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []).map(h => { const v = h[Copy](); v.color = "#f1efeb"; return v; });
+        return Docs.Create.SchemaDocument(headers, DocListCast(this.dataDoc[this.fieldKey]), { _autoHeight: true, _viewType: CollectionViewType.Schema, title: StrCast(this.layoutDoc._searchString) });
     }
 
     @action.bound
     openSearch(e: React.SyntheticEvent) {
         e.stopPropagation();
-        this._openNoResults = false;
-        this._resultsOpen = true;
-        this._searchbarOpen = true;
+        this._results.forEach(result => Doc.BrushDoc(result[0]));
     }
 
-    realTotalResults: number = 0;
-
-    @action.bound
-    closeSearch = () => {
-        //this.closeResults();
-        this._searchbarOpen = false;
-    }
+    resetSearch = action((close: boolean) => {
+        this._results.forEach(result => {
+            Doc.UnBrushDoc(result[0]);
+            Doc.ClearSearchMatches();
+        });
+        close && (this.open = this._searchbarOpen = false);
+    });
 
     @action.bound
     closeResults() {
-        this._resultsOpen = false;
         this._results = [];
         this._resultsSet.clear();
         this._visibleElements = [];
@@ -750,21 +397,10 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this._curRequest = undefined;
     }
 
-    @observable _pageStart: number = 0;
-    @observable _pageCount: number = SearchBox.NUM_SEARCH_RESULTS_PER_PAGE;
-
-    @observable children: number = 0;
     @action
     resultsScrolled = (e?: React.UIEvent<HTMLDivElement>) => {
-        if (!this._resultsRef.current) return;
         this._endIndex = 30;
         const headers = new Set<string>(["title", "author", "text", "type", "data", "*lastModified", "context"]);
-        // if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
-        //     if (this.noresults === "") {
-        //         this.noresults = "No search results :(";
-        //     }
-        //     return;
-        // }
 
         if (this._numTotalResults <= this._maxSearchIndex) {
             this._numTotalResults = this._results.length;
@@ -776,302 +412,170 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             // undefined until a searchitem is put in there
             this._visibleElements = Array<JSX.Element>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
             this._visibleDocuments = Array<Doc>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
-            // indicates if things are placeholders 
-            this._isSearch = Array<undefined>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
-            this._isSorted = Array<undefined>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
-
         }
-        let max = this.NumResults;
+        let max = this._numResultsPerPage;
         max > this._results.length ? max = this._results.length : console.log("");
         for (let i = this._pageStart; i < max; 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 (this._isSearch[i] !== "search") {
-                let result: [Doc, string[], string[]] | undefined = undefined;
-
-                result = this._results[i];
-                if (result) {
-                    const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                    const lines = new List<string>(result[2]);
-                    highlights.forEach((item) => headers.add(item));
-                    result[0].lines = lines;
-                    result[0].highlighting = highlights.join(", ");
-                    result[0].searchMatch = true;
-                    if (i < this._visibleDocuments.length) {
-                        this._visibleDocuments[i] = result[0];
-                        this._isSearch[i] = "search";
-                        Doc.BrushDoc(result[0]);
-                        Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
-                        this.children++;
-                    }
-
+            let result: [Doc, string[], string[]] | undefined = undefined;
+
+            result = this._results[i];
+            if (result) {
+                const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
+                const lines = new List<string>(result[2]);
+                highlights.forEach((item) => headers.add(item));
+                Doc.SetSearchMatch(result[0], { searchMatch: 1 });
+                if (i < this._visibleDocuments.length) {
+                    this._visibleDocuments[i] = result[0];
+                    Doc.BrushDoc(result[0]);
+                    Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
+                    this.children++;
                 }
-
             }
         }
-        this.headerscale = headers.size;
-        if (Cast(this.props.Document._docFilters, listSpec("string"), []).length === 0) {
-            const oldSchemaHeaders = Cast(this.props.Document._schemaHeaders, listSpec("string"), []);
-            if (oldSchemaHeaders?.length && typeof oldSchemaHeaders[0] !== "object") {
-                const newSchemaHeaders = oldSchemaHeaders.map(i => typeof i === "string" ? new SchemaHeaderField(i, "#f1efeb") : i);
-                headers.forEach(header => {
-                    if (oldSchemaHeaders.includes(header) === false) {
-                        newSchemaHeaders.push(new SchemaHeaderField(header, "#f1efeb"));
-                    }
-                });
-                this.headercount = newSchemaHeaders.length;
-                this.props.Document._schemaHeaders = new List<SchemaHeaderField>(newSchemaHeaders);
-            } else if (this.props.Document._schemaHeaders === undefined) {
-                this.props.Document._schemaHeaders = new List<SchemaHeaderField>([new SchemaHeaderField("title", "#f1efeb")]);
-            }
+        if (this.props.Document._schemaHeaders === undefined) {
+            this.props.Document._schemaHeaders = new List<SchemaHeaderField>([new SchemaHeaderField("title", "#f1efeb")]);
         }
         if (this._maxSearchIndex >= this._numTotalResults) {
             this._visibleElements.length = this._results.length;
             this._visibleDocuments.length = this._results.length;
-            this._isSearch.length = this._results.length;
         }
     }
-    @observable headercount: number = 0;
-    @observable headerscale: number = 0;
-
-    findCommonElements(arr2: string[]) {
-        const arr1 = ["layout", "data"];
-        return arr1.some(item => arr2.includes(item));
-    }
-
-    @computed
-    get resFull() { return this._numTotalResults <= 8; }
-
-    @computed
-    get resultHeight() { return this._numTotalResults * 70; }
 
-    addButtonDoc = (doc: Doc) => Doc.AddDocToList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc);
-    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);
+    getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight
+    panelHeight = () => this.props.PanelHeight();
+    selectElement = (doc: Doc) => { /* this.gotoDocument(this.childDocs.indexOf(doc), NumCasst(this.layoutDoc._itemIndex)); */ };
+    returnHeight = () => NumCast(this.layoutDoc._height);
+    returnLength = () => Math.min(window.innerWidth, 51 + 205 * Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []).length);
 
-    @computed get searchItemTemplate() { return Cast(Doc.UserDoc().searchItemTemplate, Doc, null); }
-
-    @computed get viewspec() { return Cast(this.props.Document._docFilters, listSpec("string"), []); }
-
-    getTransform = () => {
-        return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight
-    }
-    panelHeight = () => {
-        return this.props.PanelHeight();
-    }
-    selectElement = (doc: Doc) => {
-        //this.gotoDocument(this.childDocs.indexOf(doc), NumCasst(this.layoutDoc._itemIndex));
-    }
-
-    addDocument = (doc: Doc) => {
-        return null;
+    @action
+    changeSearchScope = (scope: string) => {
+        this.docsforfilter = undefined;
+        this.setSearchFilter(this.currentSelectedCollection, undefined);
+        this._searchFullDB = scope;
+        this.dataDoc[this.fieldKey] = new List<Doc>([]);
+        this.submitSearch();
+    }
+
+    @computed get scopeButtons() {
+        return <div style={{ height: 25, paddingLeft: "4px", paddingRight: "4px", border: "1px solid gray", borderRadius: "0.3em", borderBottom: !this.open ? "1px solid" : "none", }}>
+            <form className="beta" style={{ justifyContent: "space-evenly", display: "flex" }}>
+                <div style={{ display: "contents" }}>
+                    <div className="radio" style={{ margin: 0 }}>
+                        <label style={{ fontSize: 12, marginTop: 6 }} >
+                            <input type="radio" style={{ marginLeft: -16, marginTop: -1 }} checked={!this._searchFullDB} onChange={() => this.changeSearchScope("")} />
+                            Dashboard
+                        </label>
+                    </div>
+                    <div className="radio" style={{ margin: 0 }}>
+                        <label style={{ fontSize: 12, marginTop: 6 }} >
+                            <input type="radio" style={{ marginLeft: -16, marginTop: -1 }} checked={this._searchFullDB?.length ? true : false} onChange={() => this.changeSearchScope("DB")} />
+                            DB
+                            <span onClick={action(() => this._searchFullDB = this._searchFullDB === "My Stuff" ? "DB" : "My Stuff")}>
+                                {this._searchFullDB === "My Stuff" ? "(me)" : "(full)"}
+                            </span>
+                        </label>
+                    </div>
+                </div>
+            </form>
+        </div>;
     }
 
-    @observable filter = false;
+    setSearchFilter = action((collectionView: { props: { Document: Doc } }, docsForFilter: Doc[] | undefined) => {
+        if (collectionView) {
+            const docFilters = Cast(this.props.Document._docFilters, listSpec("string"), null);
+            collectionView.props.Document._searchFilterDocs = docsForFilter?.length ? new List<Doc>(docsForFilter) : undefined;
+            collectionView.props.Document._docFilters = docsForFilter?.length && docFilters?.length ? new List<string>(docFilters) : undefined;
+        }
+    });
 
-    @action newpage() {
-        this._pageStart += SearchBox.NUM_SEARCH_RESULTS_PER_PAGE;
-        this.dataDoc[this.fieldKey] = new List<Doc>([]);
-        this.resultsScrolled();
-    }
     render() {
-        this.props.Document._chromeStatus === "disabled";
-        this.props.Document._searchDoc = true;
-        const cols = Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []).length;
-        let length = 0;
-        length = cols * 205 + 51;
-        let height = 0;
-        const rows = this.children;
-        height = 31 + 31 * 6;
+        const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
         return (
             <div style={{ pointerEvents: "all" }} className="searchBox-container">
-                <div style={{ position: "absolute", left: 15, height: 32, alignItems: "center", display: "flex" }}>{Doc.CurrentUserEmail}</div>
                 <div className="searchBox-bar">
-                    <div style={{ position: "relative", display: "flex", width: 400 }}>
-                        <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}
+                    <div className="searchBox-lozenges" >
+                        <div className="searchBox-lozenge-user">
+                            {`${Doc.CurrentUserEmail}`}
+                            <div className="searchBox-logoff" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
+                                Logoff
+                        </div>
+                        </div>
+                        <div className="searchBox-lozenge">
+                            {`UI project`}
+                        </div>
+                        <div className="searchBox-lozenge-dashboard"  >
+                            <select className="searchBox-dashSelect" onChange={e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)])}
+                                value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)}>
+                                {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
+                            </select>
+                            <div className="searchBox-dashboards" onClick={undoBatch(() => CurrentUserUtils.createNewDashboard(Doc.UserDoc()))}>
+                                New
+                        </div>
+                            <div className="searchBox-dashboards" onClick={undoBatch(() => CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))}>
+                                Snapshot
+                        </div>
+                        </div>
+                    </div>
+                    <div className="searchBox-query" >
+                        <input defaultValue={""} autoComplete="off" onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this._inputRef}
+                            className="searchBox-barChild searchBox-input" onKeyPress={this.enter}
                             style={{ padding: 1, paddingLeft: 20, paddingRight: 60, color: "black", height: 20, width: 250 }} />
                         <div style={{ display: "flex", alignItems: "center" }}>
                             <div style={{ position: "absolute", left: 10 }}>
                                 <Tooltip title={<div className="dash-tooltip" >drag search results as collection</div>}>
-                                    <div><FontAwesomeIcon onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg"
+                                    <div ref={this.collectionRef}><FontAwesomeIcon onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg"
                                         style={{ cursor: "hand", color: "black", padding: 1, position: "relative" }} /></div>
                                 </Tooltip>
                             </div>
-                            <div style={{ position: "absolute", left: 200, width: 30, zIndex: 9000, color: "grey", background: "white", }}>
+                            <div style={{ position: "absolute", left: Doc.UserDoc().noviceMode ? 220 : 200, width: 30, zIndex: 9000, color: "grey", background: "white", }}>
                                 {`${this._results.length}` + " of " + `${this.realTotalResults}`}
                             </div>
-                            <div style={{ cursor: "default", left: 235, position: "absolute", }}>
+                            {Doc.UserDoc().noviceMode ? (null) : <div style={{ cursor: "default", left: 235, position: "absolute", }}>
                                 <Tooltip title={<div className="dash-tooltip" >only display documents matching search</div>} >
-                                    <div><FontAwesomeIcon icon={"filter"} size="lg"
-                                        style={{ cursor: "hand", padding: 1, 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(() => {
-                                            ///DONT Change without emailing andy r first.
-                                            this.filter = !this.filter && !this.searchFullDB;
-                                            if (this.filter === true && this.currentSelectedCollection !== undefined) {
-                                                this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>(this.docsforfilter);
-                                                let newarray: Doc[] = [];
-                                                let docs: Doc[] = [];
-                                                docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]);
-                                                while (docs.length > 0) {
-                                                    newarray = [];
-                                                    docs.forEach((d) => {
-                                                        if (d.data !== undefined) {
-                                                            d._searchDocs = new List<Doc>(this.docsforfilter);
-                                                            const newdocs = DocListCast(d.data);
-                                                            newdocs.forEach((newdoc) => {
-                                                                newarray.push(newdoc);
-                                                            });
-                                                        }
-                                                    });
-                                                    docs = newarray;
-                                                }
-
-                                                this.currentSelectedCollection.props.Document._docFilters = new List<string>(this.viewspec);
-                                                this.props.Document.selectedDoc = this.currentSelectedCollection.props.Document;
-                                            }
-                                            else if (this.filter === false && this.currentSelectedCollection !== undefined) {
-                                                let newarray: Doc[] = [];
-                                                let docs: Doc[] = [];
-                                                docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]);
-                                                while (docs.length > 0) {
-                                                    newarray = [];
-                                                    docs.forEach((d) => {
-                                                        if (d.data !== undefined) {
-                                                            d._searchDocs = new List<Doc>();
-                                                            d._docFilters = new List();
-                                                            const newdocs = DocListCast(d.data);
-                                                            newdocs.forEach((newdoc) => {
-                                                                newarray.push(newdoc);
-                                                            });
-                                                        }
-                                                    });
-                                                    docs = newarray;
-                                                }
-
-                                                this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
-                                                this.currentSelectedCollection.props.Document._docFilters = new List();
-                                                this.props.Document.selectedDoc = undefined;
-                                            }
-                                        }
-                                        )} /></div>
-                                </Tooltip>
-                            </div>
-                            <div style={{
-                                height: 25,
-                                paddingLeft: "4px",
-                                paddingRight: "4px",
-                                border: "1px solid gray",
-                                borderRadius: "0.3em",
-                                borderBottom: this.open === false ? "1px solid" : "none",
-                            }}>
-                                <form className="beta" style={{ justifyContent: "space-evenly", display: "flex" }}>
-                                    <div style={{ display: "contents" }}>
-                                        <div className="radio" style={{ margin: 0 }}>
-                                            <label style={{ fontSize: 12, marginTop: 6 }} >
-                                                <input type="radio" style={{ marginLeft: -16, marginTop: -1 }} checked={!this.searchFullDB} onChange={() => {
-                                                    runInAction(() => {
-                                                        this.searchFullDB = !this.searchFullDB;
-                                                        this.dataDoc[this.fieldKey] = new List<Doc>([]);
-                                                        if (this.currentSelectedCollection !== undefined) {
-                                                            let newarray: Doc[] = [];
-                                                            let docs: Doc[] = [];
-                                                            docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]);
-                                                            while (docs.length > 0) {
-                                                                newarray = [];
-                                                                docs.forEach((d) => {
-                                                                    if (d.data !== undefined) {
-                                                                        d._searchDocs = new List<Doc>();
-                                                                        d._docFilters = new List();
-                                                                        const newdocs = DocListCast(d.data);
-                                                                        newdocs.forEach((newdoc) => {
-                                                                            newarray.push(newdoc);
-                                                                        });
-                                                                    }
-                                                                });
-                                                                docs = newarray;
-                                                            }
-                                                            this.currentSelectedCollection.props.Document._docFilters = new List();
-                                                            this.currentSelectedCollection.props.Document._searchDocs = undefined;
-                                                            this.currentSelectedCollection = undefined;
-                                                        }
-                                                        this.submitSearch();
-                                                    });
-                                                }} />
-                                            Collection
-                                        </label>
-                                        </div>
-                                        <div className="radio" style={{ margin: 0 }}>
-                                            <label style={{ fontSize: 12, marginTop: 6 }} >
-                                                <input style={{ marginLeft: -16, marginTop: -1 }} type="radio" checked={this.searchFullDB} onChange={() => {
-                                                    runInAction(() => {
-                                                        this.searchFullDB = !this.searchFullDB;
-                                                        this.dataDoc[this.fieldKey] = new List<Doc>([]);
-                                                        this.filter = false;
-                                                        if (this.currentSelectedCollection !== undefined) {
-                                                            let newarray: Doc[] = [];
-                                                            let docs: Doc[] = [];
-                                                            docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]);
-                                                            while (docs.length > 0) {
-                                                                newarray = [];
-                                                                docs.forEach((d) => {
-                                                                    if (d.data !== undefined) {
-                                                                        d._searchDocs = new List<Doc>();
-                                                                        d._docFilters = new List();
-                                                                        const newdocs = DocListCast(d.data);
-                                                                        newdocs.forEach((newdoc) => {
-                                                                            newarray.push(newdoc);
-                                                                        });
-                                                                    }
-                                                                });
-                                                                docs = newarray;
-                                                            }
-                                                            this.currentSelectedCollection.props.Document._docFilters = new List();
-                                                            this.currentSelectedCollection.props.Document._searchDocs = undefined;
-                                                            this.currentSelectedCollection = undefined;
-                                                        }
-                                                        this.submitSearch();
-                                                    });
-                                                }} />
-                                                DB
-                                        </label>
-                                        </div>
+                                    <div>
+                                        <FontAwesomeIcon icon={"filter"} size="lg"
+                                            style={{ cursor: "hand", padding: 1, backgroundColor: this.filter ? "white" : "lightgray", color: this.filter ? "black" : "white" }}
+                                            onPointerDown={e => { e.stopPropagation(); SetupDrag(this.collectionRef, () => this.layoutDoc._searchString ? this.startDragCollection() : undefined); }}
+                                            onClick={action(() => this.setSearchFilter(this.currentSelectedCollection, this.filter ? undefined : this.docsforfilter))} />
                                     </div>
-                                </form>
-                            </div>
+                                </Tooltip>
+                            </div>}
+                            {this.scopeButtons}
                         </div>
-
-                    </div>
-                </div>
-                <div style={{ zIndex: 20000, color: "black" }}>
-                    {this._searchbarOpen === true ?
+                    </div >
+                </div >
+                {!this._searchbarOpen ? (null) :
+                    <div style={{ zIndex: 20000, color: "black" }} ref={(r) => r?.focus()}>
                         <div style={{ display: "flex", justifyContent: "center", }}>
-                            {this.noresults === "" ? <div style={{ display: this.open === true ? "flex" : "none", overflow: "auto", }}>
-                                <CollectionView {...this.props}
+                            <div style={{ display: this.open ? "flex" : "none", overflow: "auto", position: "absolute" }}>
+                                <CollectionSchemaView {...this.props}
+                                    CollectionView={undefined}
+                                    annotationsKey={""}
+                                    addDocument={returnFalse}
                                     Document={this.props.Document}
                                     moveDocument={returnFalse}
                                     removeDocument={returnFalse}
-                                    PanelHeight={this.open === true ? () => height : () => 0}
-                                    PanelWidth={this.open === true ? () => length : () => 0}
-                                    overflow={length > window.innerWidth || rows > 6 ? true : false}
+                                    PanelHeight={this.open ? this.returnHeight : returnZero}
+                                    PanelWidth={this.open ? this.returnLength : returnZero}
+                                    overflow={length > window.innerWidth || this.children > 6 ? true : false}
                                     focus={this.selectElement}
                                     ScreenToLocalTransform={Transform.Identity}
                                 />
-                            </div> :
-                                <div style={{ display: "flex", justifyContent: "center" }}><div style={{ height: 200, top: 54, minWidth: 400, 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}
-                </div>
-
-                <div className="searchBox-results" onScroll={this.resultsScrolled} style={{
-                    display: this._resultsOpen ? "flex" : "none",
-                    height: this.resFull ? "auto" : this.resultHeight,
-                    overflow: "visibile" // this.resFull ? "auto" : "visible"
-                }} ref={this._resultsRef}>
-                </div>
+                                <div style={{ position: "absolute", right: 5, bottom: 7, width: 15, height: 15, }}
+                                    onPointerDown={e => setupMoveUpEvents(this, e, (e: PointerEvent, down: number[], delta: number[]) => {
+                                        this.props.Document._height = NumCast(this.props.Document._height) + delta[1];
+                                        return false;
+                                    }, returnFalse, emptyFunction)}
+                                >
+                                    <FontAwesomeIcon icon="grip-lines" size="lg" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                }
             </div >
         );
     }