Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into youtube-api-muhammed

21 files changed, 2292 insertions, 0 deletions

diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss
new file mode 100644
index 000000000..af59d5fbf
--- /dev/null
+++ b/src/client/views/search/CheckBox.scss
@@ -0,0 +1,59 @@
+@import "../globalCssVariables";
+
+.checkboxfilter {
+    display: flex;
+    margin-top: 0px;
+    padding: 3px;
+
+    .outer {
+        display: flex;
+        position: relative;
+        justify-content: center;
+        align-items: center;
+        margin-top: 0px;
+
+        .check-container:hover~.check-box {
+            background-color: $intermediate-color;
+        }
+    
+        .check-container {
+            width: 40px;
+            height: 40px;
+            position: absolute;
+            z-index: 1000;
+
+            .checkmark {
+                z-index: 1000;
+                position: absolute;
+                fill-opacity: 0;
+                stroke-width: 4px;
+                stroke: white;
+            }
+        }
+
+        .check-box {
+            z-index: 900;
+            position: relative;
+            height: 20px;
+            width: 20px;
+            overflow: visible;
+            background-color: transparent;
+            border-style: solid;
+            border-color: $alt-accent;
+            border-width: 2px;
+            -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;
+        }
+    }
+
+    .checkbox-title {
+        display: flex;
+        align-items: center;
+        text-transform: capitalize;
+        margin-left: 15px;
+    }
+
+}
+
diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
new file mode 100644
index 000000000..a9d48219a
--- /dev/null
+++ b/src/client/views/search/CheckBox.tsx
@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action, runInAction, IReactionDisposer, reaction } from 'mobx';
+import "./CheckBox.scss";
+import * as anime from 'animejs';
+
+interface CheckBoxProps {
+    originalStatus: boolean;
+    updateStatus(newStatus: boolean): void;
+    title: string;
+    parent: any;
+    numCount: number;
+    default: boolean;
+}
+
+@observer
+export class CheckBox extends React.Component<CheckBoxProps>{
+    // true = checked, false = unchecked
+    @observable private _status: boolean;
+    @observable private uncheckTimeline: anime.AnimeTimelineInstance;
+    @observable private checkTimeline: anime.AnimeTimelineInstance;
+    @observable private checkRef: any;
+    @observable private _resetReaction?: IReactionDisposer;
+
+
+    constructor(props: CheckBoxProps) {
+        super(props);
+        this._status = this.props.originalStatus;
+        this.checkRef = React.createRef();
+
+        this.checkTimeline = anime.timeline({
+            loop: false,
+            autoplay: false,
+            direction: "normal",
+        }); this.uncheckTimeline = anime.timeline({
+            loop: false,
+            autoplay: false,
+            direction: "normal",
+        });
+    }
+
+    componentDidMount = () => {
+        this.uncheckTimeline.add({
+            targets: this.checkRef.current,
+            easing: "easeInOutQuad",
+            duration: 500,
+            opacity: 0,
+        });
+        this.checkTimeline.add({
+            targets: this.checkRef.current,
+            easing: "easeInOutQuad",
+            duration: 500,
+            strokeDashoffset: [anime.setDashoffset, 0],
+            opacity: 1
+        });
+
+        if (this.props.originalStatus) {
+            this.checkTimeline.play();
+            this.checkTimeline.restart();
+        }
+
+        this._resetReaction = reaction(
+            () => this.props.parent._resetBoolean,
+            () => {
+                if (this.props.parent._resetBoolean) {
+                    runInAction(() => {
+                        this.reset();
+                        this.props.parent._resetCounter++;
+                        if (this.props.parent._resetCounter === this.props.numCount) {
+                            this.props.parent._resetCounter = 0;
+                            this.props.parent._resetBoolean = false;
+                        }
+                    });
+                }
+            },
+        );
+    }
+
+    @action.bound
+    reset() {
+        if (this.props.default) {
+            if (!this._status) {
+                this._status = true;
+                this.checkTimeline.play();
+                this.checkTimeline.restart();
+            }
+        }
+        else {
+            if (this._status) {
+                this._status = false;
+                this.uncheckTimeline.play();
+                this.uncheckTimeline.restart();
+            }
+        }
+
+        this.props.updateStatus(this.props.default);
+    }
+
+    @action.bound
+    onClick = () => {
+        if (this._status) {
+            this.uncheckTimeline.play();
+            this.uncheckTimeline.restart();
+        }
+        else {
+            this.checkTimeline.play();
+            this.checkTimeline.restart();
+
+        }
+        this._status = !this._status;
+        this.props.updateStatus(this._status);
+
+    }
+
+    render() {
+        return (
+            <div className="checkboxfilter" onClick={this.onClick}>
+                <div className="outer">
+                    <div className="check-container">
+                        <svg viewBox="0 12 40 40">
+                            <path ref={this.checkRef} className="checkmark" d="M14.1 27.2l7.1 7.2 16.7-18" />
+                        </svg>
+                    </div>
+                    <div className="check-box" />
+                </div>
+                <div className="checkbox-title">{this.props.title}</div>
+            </div>
+        );
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss
new file mode 100644
index 000000000..b54cdcbd1
--- /dev/null
+++ b/src/client/views/search/CollectionFilters.scss
@@ -0,0 +1,20 @@
+@import "../globalCssVariables";
+
+.collection-filters {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+
+    &.main {
+        width: 47%;
+        float: left;
+    }
+
+    &.optional {
+        width: 60%;
+        display: grid;
+        grid-template-columns: 50% 50%;
+        float: right;
+        opacity: 0;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx
new file mode 100644
index 000000000..48d0b2ddb
--- /dev/null
+++ b/src/client/views/search/CollectionFilters.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { observable, action } from 'mobx';
+import { CheckBox } from './CheckBox';
+import "./CollectionFilters.scss";
+import * as anime from 'animejs';
+
+interface CollectionFilterProps {
+    collectionStatus: boolean;
+    updateCollectionStatus(val: boolean): void;
+    collectionSelfStatus: boolean;
+    updateSelfCollectionStatus(val: boolean): void;
+    collectionParentStatus: boolean;
+    updateParentCollectionStatus(val: boolean): void;
+}
+
+export class CollectionFilters extends React.Component<CollectionFilterProps> {
+
+    static Instance: CollectionFilters;
+
+    @observable public _resetBoolean = false;
+    @observable public _resetCounter: number = 0;
+    
+    @observable private _collectionsSelected = this.props.collectionStatus;
+    @observable private _timeline: anime.AnimeTimelineInstance;
+    @observable private _ref: any;
+
+    constructor(props: CollectionFilterProps) {
+        super(props);
+        CollectionFilters.Instance = this;
+        this._ref = React.createRef();
+
+        this._timeline = anime.timeline({
+            loop: false,
+            autoplay: false,
+            direction: "reverse",
+        });
+    }
+
+    componentDidMount = () => {
+        this._timeline.add({
+            targets: this._ref.current,
+            easing: "easeInOutQuad",
+            duration: 500,
+            opacity: 1,
+        });
+
+        if (this._collectionsSelected) {
+            this._timeline.play();
+            this._timeline.reverse();
+        }
+    }
+
+    @action.bound
+    resetCollectionFilters() { this._resetBoolean = true; }
+
+    @action.bound
+    updateColStat(val: boolean) {
+        this.props.updateCollectionStatus(val);
+
+        if (this._collectionsSelected !== val) {
+            this._timeline.play();
+            this._timeline.reverse();
+        }
+
+        this._collectionsSelected = val;
+    }
+
+    render() {
+        return (
+            <div>
+                <div className="collection-filters">
+                    <div className="collection-filters main">
+                        <CheckBox default={false} title={"limit to current collection"} parent={this} numCount={3} updateStatus={this.updateColStat} originalStatus={this.props.collectionStatus} />
+                    </div>
+                    <div className="collection-filters optional" ref={this._ref}>
+                        <CheckBox default={true} title={"Search in self"} parent={this} numCount={3} updateStatus={this.props.updateSelfCollectionStatus} originalStatus={this.props.collectionSelfStatus} />
+                        <CheckBox default={true} title={"Search in parent"} parent={this} numCount={3} updateStatus={this.props.updateParentCollectionStatus} originalStatus={this.props.collectionParentStatus} />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/FieldFilters.scss b/src/client/views/search/FieldFilters.scss
new file mode 100644
index 000000000..ba0926140
--- /dev/null
+++ b/src/client/views/search/FieldFilters.scss
@@ -0,0 +1,5 @@
+.field-filters {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 18% 20% 60%;
+}
\ No newline at end of file
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx
new file mode 100644
index 000000000..7a33282d2
--- /dev/null
+++ b/src/client/views/search/FieldFilters.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { observable } from 'mobx';
+import { CheckBox } from './CheckBox';
+import { Keys } from './FilterBox';
+import "./FieldFilters.scss";
+
+export interface FieldFilterProps {
+    titleFieldStatus: boolean;
+    dataFieldStatus: boolean;
+    authorFieldStatus: boolean;
+    updateTitleStatus(stat: boolean): void;
+    updateAuthorStatus(stat: boolean): void;
+    updateDataStatus(stat: boolean): void;
+}
+
+export class FieldFilters extends React.Component<FieldFilterProps> {
+
+    static Instance: FieldFilters;
+
+    @observable public _resetBoolean = false;
+    @observable public _resetCounter: number = 0;
+
+    constructor(props: FieldFilterProps) {
+        super(props);
+        FieldFilters.Instance = this;
+    }
+
+    resetFieldFilters() {
+        this._resetBoolean = true;
+    }
+
+    render() {
+        return (
+            <div className="field-filters">
+                <CheckBox default={true} numCount={3} parent={this} originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
+                <CheckBox default={true} numCount={3} parent={this} originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
+                <CheckBox default={false} numCount={3} parent={this} originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={"Deleted Docs"} />
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/FilterBox.scss b/src/client/views/search/FilterBox.scss
new file mode 100644
index 000000000..1eb8963d7
--- /dev/null
+++ b/src/client/views/search/FilterBox.scss
@@ -0,0 +1,108 @@
+@import "../globalCssVariables";
+@import "./NaviconButton.scss";
+
+.filter-form {
+    padding: 25px;
+    width: 600px;
+    background: $dark-color;
+    position: relative;
+    right: 1px;
+    color: $light-color;
+    flex-direction: column;
+    display: inline-block;
+    transform-origin: top;
+    overflow: auto;
+
+    .top-filter-header {
+
+        #header {
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            font-size: 25;
+            width: 80%;
+        }
+
+        .close-icon {
+            width: 20%;
+            opacity: .6;
+            position: relative;
+            display: inline-block;
+
+            .line {
+                display: block;
+                background: $alt-accent;
+                width: $width-line;
+                height: $height-line;
+                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;
+
+                .filter-title {
+                    font-size: 18;
+                    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;
+            }
+        }
+    }
+
+    .filter-buttons {
+        border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
+        border-top-style: solid;
+        padding-top: 10px;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx
new file mode 100644
index 000000000..706d1eb7f
--- /dev/null
+++ b/src/client/views/search/FilterBox.tsx
@@ -0,0 +1,394 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action } from 'mobx';
+import "./SearchBox.scss";
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { Doc } from '../../../new_fields/Doc';
+import { Id } from '../../../new_fields/FieldSymbols';
+import { DocumentType } from '../../documents/Documents';
+import { Cast, StrCast } from '../../../new_fields/Types';
+import * as _ from "lodash";
+import { ToggleBar } from './ToggleBar';
+import { IconBar } from './IconBar';
+import { FieldFilters } from './FieldFilters';
+import { SelectionManager } from '../../util/SelectionManager';
+import { DocumentView } from '../nodes/DocumentView';
+import { CollectionFilters } from './CollectionFilters';
+import { NaviconButton } from './NaviconButton';
+import * as $ from 'jquery';
+import "./FilterBox.scss";
+import { SearchBox } from './SearchBox';
+
+library.add(faTimes);
+
+export enum Keys {
+    TITLE = "title",
+    AUTHOR = "author",
+    DATA = "data"
+}
+
+@observer
+export class FilterBox extends React.Component {
+
+    static Instance: FilterBox;
+    public _allIcons: string[] = [DocumentType.AUDIO, DocumentType.COL, DocumentType.HIST, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.TEXT, DocumentType.VID, DocumentType.WEB];
+
+    //if true, any keywords can be used. if false, all keywords are required.
+    @observable private _basicWordStatus: boolean = true;
+    @observable private _filterOpen: boolean = false;
+    @observable private _icons: string[] = this._allIcons;
+    @observable private _titleFieldStatus: boolean = true;
+    @observable private _authorFieldStatus: boolean = true;
+    @observable public _deletedDocsStatus: boolean = false;
+    @observable private _collectionStatus = false;
+    @observable private _collectionSelfStatus = true;
+    @observable private _collectionParentStatus = true;
+    @observable private _wordStatusOpen: boolean = false;
+    @observable private _typeOpen: boolean = false;
+    @observable private _colOpen: boolean = false;
+    @observable private _fieldOpen: boolean = false;
+    public _pointerTime: number = -1;
+
+    constructor(props: Readonly<{}>) {
+        super(props);
+        FilterBox.Instance = this;
+    }
+
+    componentDidMount = () => {
+        document.addEventListener("pointerdown", (e) => {
+            if (!e.defaultPrevented && e.timeStamp !== this._pointerTime) {
+                SearchBox.Instance.closeSearch();
+            }
+        });
+    }
+
+    setupAccordion() {
+        $('document').ready(function () {
+            const acc = document.getElementsByClassName('filter-header');
+            // tslint:disable-next-line: prefer-for-of
+            for (let i = 0; i < acc.length; i++) {
+                acc[i].addEventListener("click", function (this: HTMLElement) {
+                    this.classList.toggle("active");
+
+                    var panel = this.nextElementSibling as HTMLElement;
+                    if (panel.style.maxHeight) {
+                        panel.style.overflow = "hidden";
+                        panel.style.maxHeight = null;
+                        panel.style.opacity = "0";
+                    } else {
+                        setTimeout(() => {
+                            panel.style.overflow = "visible";
+                        }, 200);
+                        setTimeout(() => {
+                            panel.style.opacity = "1";
+                        }, 50);
+                        panel.style.maxHeight = panel.scrollHeight + "px";
+
+                    }
+                });
+
+                let el = acc[i] as HTMLElement;
+                el.click();
+            }
+        });
+    }
+
+    @action.bound
+    minimizeAll() {
+        $('document').ready(function () {
+            var acc = document.getElementsByClassName('filter-header');
+
+            // tslint:disable-next-line: prefer-for-of
+            for (var i = 0; i < acc.length; i++) {
+                let classList = acc[i].classList;
+                if (classList.contains("active")) {
+                    acc[i].classList.toggle("active");
+                    var panel = acc[i].nextElementSibling as HTMLElement;
+                    panel.style.overflow = "hidden";
+                    panel.style.maxHeight = null;
+                }
+            }
+        });
+    }
+
+    @action.bound
+    resetFilters = () => {
+        ToggleBar.Instance.resetToggle();
+        IconBar.Instance.selectAll();
+        FieldFilters.Instance.resetFieldFilters();
+        CollectionFilters.Instance.resetCollectionFilters();
+    }
+
+    basicRequireWords(query: string): string {
+        let oldWords = query.split(" ");
+        let newWords: string[] = [];
+        oldWords.forEach(word => {
+            let newWrd = "+" + word;
+            newWords.push(newWrd);
+        });
+        query = newWords.join(" ");
+
+        return query;
+    }
+
+    basicFieldFilters(query: string, type: string): string {
+        let oldWords = query.split(" ");
+        let mod = "";
+
+        if (type === Keys.AUTHOR) {
+            mod = " author_t:";
+        } if (type === Keys.DATA) {
+            //TODO
+        } if (type === Keys.TITLE) {
+            mod = " title_t:";
+        }
+
+        let newWords: string[] = [];
+        oldWords.forEach(word => {
+            let newWrd = mod + word;
+            newWords.push(newWrd);
+        });
+
+        query = newWords.join(" ");
+
+        return query;
+    }
+
+    applyBasicFieldFilters(query: string) {
+        let finalQuery = "";
+
+        if (this._titleFieldStatus) {
+            finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TITLE);
+        }
+        if (this._authorFieldStatus) {
+            finalQuery = finalQuery + this.basicFieldFilters(query, Keys.AUTHOR);
+        }
+        if (this._deletedDocsStatus) {
+            finalQuery = finalQuery + this.basicFieldFilters(query, Keys.DATA);
+        }
+        return finalQuery;
+    }
+
+    get fieldFiltersApplied() { return !(this._authorFieldStatus && this._titleFieldStatus); }
+
+    //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[] {
+        let selectedDocs: DocumentView[] = SelectionManager.SelectedDocuments();
+        let collections: Doc[] = [];
+
+        selectedDocs.forEach(async element => {
+            let layout: string = StrCast(element.props.Document.baseLayout);
+            //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);
+                }
+            }
+            //gets the selected doc's containing view
+            let containingView = element.props.ContainingCollectionView;
+            //makes sure collections aren't added more than once
+            if (containingView && !collections.includes(containingView.props.Document)) {
+                collections.push(containingView.props.Document);
+            }
+        });
+
+        return collections;
+    }
+
+    getFinalQuery(query: string): string {
+        //alters the query so it looks in the correct fields
+        //if this is true, then not all of the field boxes are checked
+        //TODO: data
+        if (this.fieldFiltersApplied) {
+            query = this.applyBasicFieldFilters(query);
+            query = query.replace(/\s+/g, ' ').trim();
+        }
+
+        //alters the query based on if all words or any words are required
+        //if this._wordstatus is false, all words are required and a + is added before each
+        if (!this._basicWordStatus) {
+            query = this.basicRequireWords(query);
+            query = query.replace(/\s+/g, ' ').trim();
+        }
+
+        //if should be searched in a specific collection
+        if (this._collectionStatus) {
+            query = this.addCollectionFilter(query);
+            query = query.replace(/\s+/g, ' ').trim();
+        }
+        return query;
+    }
+
+    addCollectionFilter(query: string): string {
+        let collections: Doc[] = this.getCurCollections();
+        let oldWords = query.split(" ");
+
+        let collectionString: string[] = [];
+        collections.forEach(doc => {
+            let proto = doc.proto;
+            let protoId = (proto || doc)[Id];
+            let colString: string = "{!join from=data_l to=id}id:" + protoId + " ";
+            collectionString.push(colString);
+        });
+
+        let finalColString = collectionString.join(" ");
+        finalColString = finalColString.trim();
+        return "+(" + finalColString + ")" + query;
+    }
+
+    get filterTypes() {
+        return this._icons.length === 9 ? undefined : this._icons;
+    }
+
+    @action
+    filterDocsByType(docs: Doc[]) {
+        if (this._icons.length === 9) {
+            return docs;
+        }
+        let finalDocs: Doc[] = [];
+        docs.forEach(doc => {
+            let layoutresult = Cast(doc.type, "string");
+            if (layoutresult && this._icons.includes(layoutresult)) {
+                finalDocs.push(doc);
+            }
+        });
+        return finalDocs;
+    }
+
+    @action.bound
+    openFilter = () => {
+        this._filterOpen = !this._filterOpen;
+        SearchBox.Instance.closeResults();
+        this.setupAccordion();
+    }
+
+    //if true, any keywords can be used. if false, all keywords are required.
+    @action.bound
+    handleWordQueryChange = () => { this._basicWordStatus = !this._basicWordStatus; }
+
+    @action.bound
+    getBasicWordStatus() { return this._basicWordStatus; }
+
+    @action.bound
+    updateIcon(newArray: string[]) { this._icons = newArray; }
+
+    @action.bound
+    getIcons(): string[] { return this._icons; }
+
+    stopProp = (e: React.PointerEvent) => {
+        e.stopPropagation();
+        this._pointerTime = e.timeStamp;
+    }
+
+    @action.bound
+    public closeFilter() {
+        this._filterOpen = false;
+    }
+
+    @action.bound
+    toggleFieldOpen() { this._fieldOpen = !this._fieldOpen; }
+
+    @action.bound
+    toggleColOpen() { this._colOpen = !this._colOpen; }
+
+    @action.bound
+    toggleTypeOpen() { this._typeOpen = !this._typeOpen; }
+
+    @action.bound
+    toggleWordStatusOpen() { this._wordStatusOpen = !this._wordStatusOpen; }
+
+    @action.bound
+    updateTitleStatus(newStat: boolean) { this._titleFieldStatus = newStat; }
+
+    @action.bound
+    updateAuthorStatus(newStat: boolean) { this._authorFieldStatus = newStat; }
+
+    @action.bound
+    updateDataStatus(newStat: boolean) { this._deletedDocsStatus = newStat; }
+
+    @action.bound
+    updateCollectionStatus(newStat: boolean) { this._collectionStatus = newStat; }
+
+    @action.bound
+    updateSelfCollectionStatus(newStat: boolean) { this._collectionSelfStatus = newStat; }
+
+    @action.bound
+    updateParentCollectionStatus(newStat: boolean) { this._collectionParentStatus = newStat; }
+
+    getCollectionStatus() { return this._collectionStatus; }
+    getSelfCollectionStatus() { return this._collectionSelfStatus; }
+    getParentCollectionStatus() { return this._collectionParentStatus; }
+    getTitleStatus() { return this._titleFieldStatus; }
+    getAuthorStatus() { return this._authorFieldStatus; }
+    getDataStatus() { return this._deletedDocsStatus; }
+
+    // Useful queries:
+    // Delegates of a document: {!join from=id to=proto_i}id:{protoId}
+    // Documents in a collection: {!join from=data_l to=id}id:{collectionProtoId} //id of collections prototype
+    render() {
+        return (
+            <div>
+                <div style={{ display: "flex", flexDirection: "row-reverse" }}>
+                    <SearchBox />
+                </div>
+                {this._filterOpen ? (
+                    <div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
+                        <div className="top-filter-header" style={{ display: "flex", width: "100%" }}>
+                            <div id="header">Filter Search Results</div>
+                            <div className="close-icon" onClick={this.closeFilter}>
+                                <span className="line line-1"></span>
+                                <span className="line line-2"></span></div>
+                        </div>
+                        <div className="filter-options">
+                            <div className="filter-div">
+                                <div className="filter-header">
+                                    <div className='filter-title words'>Required words</div>
+                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleWordStatusOpen} /></div>
+                                </div>
+                                <div className="filter-panel" >
+                                    <ToggleBar handleChange={this.handleWordQueryChange} getStatus={this.getBasicWordStatus}
+                                        originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} />
+                                </div>
+                            </div>
+                            <div className="filter-div">
+                                <div className="filter-header">
+                                    <div className="filter-title icon">Filter by type of node</div>
+                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleTypeOpen} /></div>
+                                </div>
+                                <div className="filter-panel"><IconBar /></div>
+                            </div>
+                            <div className="filter-div">
+                                <div className="filter-header">
+                                    <div className='filter-title collection'>Search in current collections</div>
+                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleColOpen} /></div>
+                                </div>
+                                <div className="filter-panel"><CollectionFilters
+                                    updateCollectionStatus={this.updateCollectionStatus} updateParentCollectionStatus={this.updateParentCollectionStatus} updateSelfCollectionStatus={this.updateSelfCollectionStatus}
+                                    collectionStatus={this._collectionStatus} collectionParentStatus={this._collectionParentStatus} collectionSelfStatus={this._collectionSelfStatus} /></div>
+                            </div>
+                            <div className="filter-div">
+                                <div className="filter-header">
+                                    <div className="filter-title field">Filter by Basic Keys</div>
+                                    <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleFieldOpen} /></div>
+                                </div>
+                                <div className="filter-panel"><FieldFilters
+                                    titleFieldStatus={this._titleFieldStatus} dataFieldStatus={this._deletedDocsStatus} authorFieldStatus={this._authorFieldStatus}
+                                    updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} /> </div>
+                            </div>
+                        </div>
+                        <div className="filter-buttons" style={{ display: "flex", justifyContent: "space-around" }}>
+                            <button className="minimize-filter" onClick={this.minimizeAll}>Minimize All</button>
+                            <button className="advanced-filter" >Advanced Filters</button>
+                            <button className="save-filter" >Save Filters</button>
+                            <button className="reset-filter" onClick={this.resetFilters}>Reset Filters</button>
+                        </div>
+                    </div>
+                ) : undefined}
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
new file mode 100644
index 000000000..e384722ce
--- /dev/null
+++ b/src/client/views/search/IconBar.scss
@@ -0,0 +1,12 @@
+@import "../globalCssVariables";
+
+.icon-bar {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 40px;
+    width: 100%;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+}
+
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
new file mode 100644
index 000000000..4712b0abc
--- /dev/null
+++ b/src/client/views/search/IconBar.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action } from 'mobx';
+// import "./SearchBox.scss";
+import "./IconBar.scss";
+import "./IconButton.scss";
+import { DocumentType } from '../../documents/Documents';
+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 { FilterBox } from './FilterBox';
+
+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);
+
+@observer
+export class IconBar extends React.Component {
+
+    static Instance: IconBar;
+
+    @observable public _resetClicked: boolean = false;
+    @observable public _selectAllClicked: boolean = false;
+    @observable public _reset: number = 0;
+    @observable public _select: number = 0;
+
+    constructor(props: any) {
+        super(props);
+        IconBar.Instance = this;
+    }
+
+    @action.bound
+    getList(): string[] { return FilterBox.Instance.getIcons(); }
+
+    @action.bound
+    updateList(newList: string[]) { FilterBox.Instance.updateIcon(newList); }
+
+    @action.bound
+    resetSelf = () => {
+        this._resetClicked = true;
+        this.updateList([]);
+    }
+
+    @action.bound
+    selectAll = () => {
+        this._selectAllClicked = true;
+        this.updateList(FilterBox.Instance._allIcons);
+    }
+
+    render() {
+        return (
+            <div className="icon-bar">
+                <div className="type-outer">
+                    <div className={"type-icon all"}
+                        onClick={this.selectAll}>
+                        <FontAwesomeIcon className="fontawesome-icon" icon={faCheckCircle} />
+                    </div>
+                    <div className="filter-description">Select All</div>
+                </div>
+                {FilterBox.Instance._allIcons.map((type: string) =>
+                    <IconButton type={type} />
+                )}
+                <div className="type-outer">
+                    <div className={"type-icon none"}
+                        onClick={this.resetSelf}>
+                        <FontAwesomeIcon className="fontawesome-icon" icon={faTimesCircle} />
+                    </div>
+                    <div className="filter-description">Clear</div>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss
new file mode 100644
index 000000000..94b294ba5
--- /dev/null
+++ b/src/client/views/search/IconButton.scss
@@ -0,0 +1,52 @@
+@import "../globalCssVariables";
+
+.type-outer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 45px;
+    height: 60px;
+
+    .type-icon {
+        height: 45px;
+        width: 45px;
+        color: $light-color;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        -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;
+        font-size: 2em;
+
+        .fontawesome-icon {
+            height: 24px;
+            width: 24px;
+        }
+    }
+
+    .filter-description {
+        text-transform: capitalize;
+        font-size: 10;
+        text-align: center;
+        height: 15px;
+        margin-top: 5px;
+        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;
+    }
+
+    .type-icon:hover {
+        transform: scale(1.1);
+        background-color: $darker-alt-accent;
+        opacity: 1;
+    
+        +.filter-description {
+            opacity: 1;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
new file mode 100644
index 000000000..bfe2c7d0b
--- /dev/null
+++ b/src/client/views/search/IconButton.tsx
@@ -0,0 +1,192 @@
+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 { DocumentType } from '../../documents/Documents';
+import '../globalCssVariables.scss';
+import * as _ from "lodash";
+import { IconBar } from './IconBar';
+import { props } from 'bluebird';
+import { FilterBox } from './FilterBox';
+import { Search } from '../../../server/Search';
+
+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);
+
+interface IconButtonProps {
+    type: string;
+}
+
+@observer
+export class IconButton extends React.Component<IconButtonProps>{
+
+    @observable private _isSelected: boolean = FilterBox.Instance.getIcons().indexOf(this.props.type) !== -1;
+    @observable private _hover = false;
+    private _resetReaction?: IReactionDisposer;
+    private _selectAllReaction?: IReactionDisposer;
+
+    static Instance: IconButton;
+    constructor(props: IconButtonProps) {
+        super(props);
+        IconButton.Instance = this;
+    }
+
+    componentDidMount = () => {
+        this._resetReaction = reaction(
+            () => IconBar.Instance._resetClicked,
+            () => {
+                if (IconBar.Instance._resetClicked) {
+                    runInAction(() => {
+                        this.reset();
+                        IconBar.Instance._reset++;
+                        if (IconBar.Instance._reset === 9) {
+                            IconBar.Instance._reset = 0;
+                            IconBar.Instance._resetClicked = false;
+                        }
+                    });
+                }
+            },
+        );
+        this._selectAllReaction = reaction(
+            () => IconBar.Instance._selectAllClicked,
+            () => {
+                if (IconBar.Instance._selectAllClicked) {
+                    runInAction(() => {
+                        this.select();
+                        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.HIST):
+                return faChartBar;
+            case (DocumentType.IMG):
+                return faImage;
+            case (DocumentType.LINK):
+                return faLink;
+            case (DocumentType.PDF):
+                return faFilePdf;
+            case (DocumentType.TEXT):
+                return faStickyNote;
+            case (DocumentType.VID):
+                return faVideo;
+            case (DocumentType.WEB):
+                return faGlobeAsia;
+            default:
+                return faCaretDown;
+        }
+    }
+
+    @action.bound
+    onClick = () => {
+        let newList: string[] = FilterBox.Instance.getIcons();
+
+        if (!this._isSelected) {
+            this._isSelected = true;
+            newList.push(this.props.type);
+        }
+        else {
+            this._isSelected = false;
+            _.pull(newList, this.props.type);
+        }
+
+        FilterBox.Instance.updateIcon(newList);
+    }
+
+    selected = {
+        opacity: 1,
+        backgroundColor: "#c2c2c5" //$alt-accent
+    };
+
+    notSelected = {
+        opacity: 0.6,
+    };
+
+    hoverStyle = {
+        opacity: 1,
+        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.HIST):
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faChartBar} />);
+            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.TEXT):
+                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}
+                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()}
+                </div>
+                <div className="filter-description">{this.props.type}</div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss
new file mode 100644
index 000000000..c23bab461
--- /dev/null
+++ b/src/client/views/search/NaviconButton.scss
@@ -0,0 +1,69 @@
+@import "../globalCssVariables";
+
+$height-icon: 15px;
+$width-line: 30px;
+$height-line: 4px;
+
+$transition-time: 0.4s;
+$rotation: 45deg;
+$translateY: ($height-icon / 2);
+$translateX: 0;
+
+#hamburger-icon {
+    width: $width-line;
+    height: $height-icon;
+    position: relative;
+    display: block;
+    transition: all $transition-time;
+    -webkit-transition: all $transition-time;
+    -moz-transition: all $transition-time;
+
+    .line {
+        display: block;
+        background: $alt-accent;
+        width: $width-line;
+        height: $height-line;
+        position: absolute;
+        left: 0;
+        border-radius: ($height-line / 2);
+        transition: all $transition-time;
+        -webkit-transition: all $transition-time;
+        -moz-transition: all $transition-time;
+
+        &.line-1 {
+            top: 0;
+        }
+
+        &.line-2 {
+            top: 50%;
+        }
+
+        &.line-3 {
+            top: 100%;
+        }
+    }
+}
+
+.filter-header.active {
+    .line-1 {
+        transform: translateY($translateY) translateX($translateX) rotate($rotation);
+        -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);
+        -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);
+    }
+
+    .line-2 {
+        opacity: 0;
+    }
+
+    .line-3 {
+        transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
+        -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
+        -moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
+    }
+}
+
+.filter-header:hover #hamburger-icon {
+    transform: scale(1.1);
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+}
\ No newline at end of file
diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx
new file mode 100644
index 000000000..3fa36b163
--- /dev/null
+++ b/src/client/views/search/NaviconButton.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import "./NaviconButton.scss";
+import * as $ from 'jquery';
+import { observable } from 'mobx';
+
+export interface NaviconProps{
+    onClick(): void;
+}
+
+export class NaviconButton extends React.Component<NaviconProps> {
+
+    @observable private _ref: React.RefObject<HTMLAnchorElement> = React.createRef();
+
+    componentDidMount = () => {
+        let that = this;
+        if(this._ref.current){this._ref.current.addEventListener("click", function(e) {
+            e.preventDefault();
+            if(that._ref.current){
+                that._ref.current.classList.toggle('active');
+                return false;
+            }
+        });}
+    }
+
+    render() {
+        return (
+            <a id="hamburger-icon" href="#" ref = {this._ref} title="Menu">
+                <span className="line line-1"></span>
+                <span className="line line-2"></span>
+                <span className="line line-3"></span>
+            </a>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
new file mode 100644
index 000000000..109b88ac9
--- /dev/null
+++ b/src/client/views/search/SearchBox.scss
@@ -0,0 +1,64 @@
+@import "../globalCssVariables";
+@import "./NaviconButton.scss";
+
+.searchBox-bar {
+    height: 32px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-left: 2px;
+    padding-right: 2px;
+
+    .searchBox-barChild {
+
+        &.searchBox-collection {
+            flex: 0 1 auto;
+            margin-left: 2px;
+            margin-right: 2px
+        }
+
+        &.searchBox-input {
+            display: block;
+            width: 130px;
+            -webkit-transition: width 0.4s;
+            transition: width 0.4s;
+            align-self: stretch;
+            margin-left: 2px;
+            margin-right: 2px
+        }
+
+        .searchBox-input:focus {
+            width: 500px;
+            outline: 3px solid lightblue;
+        }
+
+        &.searchBox-filter {
+            align-self: stretch;
+            margin-left: 2px;
+            margin-right: 2px
+        }
+    }
+}
+
+.searchBox-results {
+    margin-right: 136px;
+    top: 300px;
+    display: flex;
+    flex-direction: column;
+    max-height: 560px;
+    overflow: hidden;
+    overflow-y: auto;
+
+    .no-result {
+        width: 500px;
+        background: $light-color-secondary;
+        border-color: $intermediate-color;
+        border-bottom-style: solid;
+        padding: 10px;
+        height: 50px;
+        text-transform: uppercase;
+        text-align: left;
+        font-weight: bold;
+        margin-left: 28px;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
new file mode 100644
index 000000000..d07df7e58
--- /dev/null
+++ b/src/client/views/search/SearchBox.tsx
@@ -0,0 +1,331 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action, runInAction, flow, computed } from 'mobx';
+import "./SearchBox.scss";
+import "./FilterBox.scss";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { SetupDrag } from '../../util/DragManager';
+import { Docs } from '../../documents/Documents';
+import { NumCast, Cast } from '../../../new_fields/Types';
+import { Doc } from '../../../new_fields/Doc';
+import { SearchItem } from './SearchItem';
+import { DocServer } from '../../DocServer';
+import * as rp from 'request-promise';
+import { Id } from '../../../new_fields/FieldSymbols';
+import { SearchUtil } from '../../util/SearchUtil';
+import { RouteStore } from '../../../server/RouteStore';
+import { FilterBox } from './FilterBox';
+
+
+@observer
+export class SearchBox extends React.Component {
+
+    @observable private _searchString: string = "";
+    @observable private _resultsOpen: boolean = false;
+    @observable private _searchbarOpen: boolean = false;
+    @observable private _results: Doc[] = [];
+    private _resultsSet = new Set<Doc>();
+    @observable private _openNoResults: boolean = false;
+    @observable private _visibleElements: JSX.Element[] = [];
+
+    private resultsRef = React.createRef<HTMLDivElement>();
+
+    private _isSearch: ("search" | "placeholder" | undefined)[] = [];
+    private _numTotalResults = -1;
+    private _endIndex = -1;
+
+    static Instance: SearchBox;
+
+    private _maxSearchIndex: number = 0;
+    private _curRequest?: Promise<any> = undefined;
+
+    constructor(props: any) {
+        super(props);
+
+        SearchBox.Instance = this;
+        this.resultsScrolled = this.resultsScrolled.bind(this);
+    }
+
+    @action
+    getViews = async (doc: Doc) => {
+        const results = await SearchUtil.GetViewsOfDocument(doc);
+        let toReturn: Doc[] = [];
+        await runInAction(() => {
+            toReturn = results;
+        });
+        return toReturn;
+    }
+
+    @action.bound
+    onChange(e: React.ChangeEvent<HTMLInputElement>) {
+        this._searchString = e.target.value;
+
+        this._openNoResults = false;
+        this._results = [];
+        this._resultsSet.clear();
+        this._visibleElements = [];
+        this._numTotalResults = -1;
+        this._endIndex = -1;
+        this._curRequest = undefined;
+        this._maxSearchIndex = 0;
+    }
+
+    enter = (e: React.KeyboardEvent) => { if (e.key === "Enter") { this.submitSearch(); } };
+
+    public static async convertDataUri(imageUri: string, returnedFilename: string) {
+        try {
+            let posting = DocServer.prepend(RouteStore.dataUriToImage);
+            const returnedUri = await rp.post(posting, {
+                body: {
+                    uri: imageUri,
+                    name: returnedFilename
+                },
+                json: true,
+            });
+            return returnedUri;
+
+        } catch (e) {
+            console.log(e);
+        }
+    }
+
+    @action
+    submitSearch = async () => {
+        let query = this._searchString;
+        query = FilterBox.Instance.getFinalQuery(query);
+        this._results = [];
+        this._resultsSet.clear();
+        this._isSearch = [];
+        this._visibleElements = [];
+        FilterBox.Instance.closeFilter();
+
+        //if there is no query there should be no result
+        if (query === "") {
+            return;
+        }
+        else {
+            this._endIndex = 12;
+            this._maxSearchIndex = 0;
+            this._numTotalResults = -1;
+            await this.getResults(query);
+        }
+
+        runInAction(() => {
+            this._resultsOpen = true;
+            this._searchbarOpen = true;
+            this._openNoResults = true;
+            this.resultsScrolled();
+        });
+    }
+
+    getAllResults = async (query: string) => {
+        return SearchUtil.Search(query, this.filterQuery, true, 0, 10000000);
+    }
+
+    private get filterQuery() {
+        const types = FilterBox.Instance.filterTypes;
+        const includeDeleted = FilterBox.Instance.getDataStatus();
+        return "NOT baseProto_b:true" + (includeDeleted ? "" : " AND NOT deleted:true") + (types ? ` AND (${types.map(type => `({!join from=id to=proto_i}type_t:"${type}" AND NOT type_t:*) OR type_t:"${type}"`).join(" ")})` : "");
+    }
+
+
+    private lockPromise?: Promise<void>;
+    getResults = async (query: string) => {
+        if (this.lockPromise) {
+            await this.lockPromise;
+        }
+        this.lockPromise = new Promise(async res => {
+            while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) {
+                this._curRequest = SearchUtil.Search(query, this.filterQuery, true, this._maxSearchIndex, 10).then(action(async (res: SearchUtil.DocSearchResult) => {
+
+                    // happens at the beginning
+                    if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) {
+                        this._numTotalResults = res.numFound;
+                    }
+
+                    const docs = await Promise.all(res.docs.map(doc => Cast(doc.extendsDoc, Doc, doc as any)));
+                    let filteredDocs = FilterBox.Instance.filterDocsByType(docs);
+                    runInAction(() => {
+                        // this._results.push(...filteredDocs);
+                        filteredDocs.forEach(doc => {
+                            if (!this._resultsSet.has(doc)) {
+                                this._results.push(doc);
+                                this._resultsSet.add(doc);
+                            }
+                        });
+                    });
+
+                    this._curRequest = undefined;
+                }));
+                this._maxSearchIndex += 10;
+
+                await this._curRequest;
+            }
+            this.resultsScrolled();
+            res();
+        });
+        return this.lockPromise;
+    }
+
+    collectionRef = React.createRef<HTMLSpanElement>();
+    startDragCollection = async () => {
+        let res = await this.getAllResults(FilterBox.Instance.getFinalQuery(this._searchString));
+        let filtered = FilterBox.Instance.filterDocsByType(res.docs);
+        // console.log(this._results)
+        const docs = filtered.map(doc => {
+            const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
+            if (isProto) {
+                return Doc.MakeDelegate(doc);
+            } else {
+                return Doc.MakeAlias(doc);
+            }
+        });
+        let x = 0;
+        let y = 0;
+        for (const doc of docs) {
+            doc.x = x;
+            doc.y = y;
+            const size = 200;
+            const aspect = NumCast(doc.nativeHeight) / NumCast(doc.nativeWidth, 1);
+            if (aspect > 1) {
+                doc.height = size;
+                doc.width = size / aspect;
+            } else if (aspect > 0) {
+                doc.width = size;
+                doc.height = size * aspect;
+            } else {
+                doc.width = size;
+                doc.height = size;
+            }
+            doc.zoomBasis = 1;
+            x += 250;
+            if (x > 1000) {
+                x = 0;
+                y += 300;
+            }
+        }
+        return Docs.Create.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` });
+
+    }
+
+    @action.bound
+    openSearch(e: React.PointerEvent) {
+        e.stopPropagation();
+        this._openNoResults = false;
+        FilterBox.Instance.closeFilter();
+        this._resultsOpen = true;
+        this._searchbarOpen = true;
+        FilterBox.Instance._pointerTime = e.timeStamp;
+    }
+
+    @action.bound
+    closeSearch = () => {
+        FilterBox.Instance.closeFilter();
+        this.closeResults();
+        this._searchbarOpen = false;
+    }
+
+    @action.bound
+    closeResults() {
+        this._resultsOpen = false;
+        this._results = [];
+        this._resultsSet.clear();
+        this._visibleElements = [];
+        this._numTotalResults = -1;
+        this._endIndex = -1;
+        this._curRequest = undefined;
+    }
+
+    @action
+    resultsScrolled = (e?: React.UIEvent<HTMLDivElement>) => {
+        let scrollY = e ? e.currentTarget.scrollTop : this.resultsRef.current ? this.resultsRef.current.scrollTop : 0;
+        let buffer = 4;
+        let startIndex = Math.floor(Math.max(0, scrollY / 70 - buffer));
+        let endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (560 / 70) + buffer));
+
+        this._endIndex = endIndex === -1 ? 12 : endIndex;
+
+        if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
+            this._visibleElements = [<div className="no-result">No Search Results</div>];
+            return;
+        }
+
+        if (this._numTotalResults <= this._maxSearchIndex) {
+            this._numTotalResults = this._results.length;
+        }
+
+        // only hit right at the beginning
+        // visibleElements is all of the elements (even the ones you can't see)
+        else if (this._visibleElements.length !== this._numTotalResults) {
+            // undefined until a searchitem is put in there
+            this._visibleElements = Array<JSX.Element>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
+            // indicates if things are placeholders
+            this._isSearch = Array<undefined>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
+        }
+
+        for (let i = 0; i < this._numTotalResults; i++) {
+            //if the index is out of the window then put a placeholder in
+            //should ones that have already been found get set to placeholders?
+            if (i < startIndex || i > endIndex) {
+                if (this._isSearch[i] !== "placeholder") {
+                    this._isSearch[i] = "placeholder";
+                    this._visibleElements[i] = <div className="searchBox-placeholder" key={`searchBox-placeholder-${i}`}>Loading...</div>;
+                }
+            }
+            else {
+                if (this._isSearch[i] !== "search") {
+                    let result: Doc | undefined = undefined;
+                    if (i >= this._results.length) {
+                        this.getResults(this._searchString);
+                        if (i < this._results.length) result = this._results[i];
+                        if (result) {
+                            this._visibleElements[i] = <SearchItem doc={result} key={result[Id]} />;
+                            this._isSearch[i] = "search";
+                        }
+                    }
+                    else {
+                        result = this._results[i];
+                        if (result) {
+                            this._visibleElements[i] = <SearchItem doc={result} key={result[Id]} />;
+                            this._isSearch[i] = "search";
+                        }
+                    }
+                }
+            }
+        }
+        if (this._maxSearchIndex >= this._numTotalResults) {
+            this._visibleElements.length = this._results.length;
+            this._isSearch.length = this._results.length;
+        }
+    }
+
+    @computed
+    get resFull() { return this._numTotalResults <= 8; }
+
+    @computed
+    get resultHeight() { return this._numTotalResults * 70; }
+
+    render() {
+        return (
+            <div className="searchBox-container">
+                <div className="searchBox-bar">
+                    <span className="searchBox-barChild searchBox-collection" onPointerDown={SetupDrag(this.collectionRef, this.startDragCollection)} ref={this.collectionRef} title="Drag Results as Collection">
+                        <FontAwesomeIcon icon="object-group" size="lg" />
+                    </span>
+                    <input value={this._searchString} onChange={this.onChange} type="text" placeholder="Search..."
+                        className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter}
+                        style={{ width: this._searchbarOpen ? "500px" : "100px" }} />
+                    <button className="searchBox-barChild searchBox-submit" onClick={this.submitSearch} onPointerDown={FilterBox.Instance.stopProp}>Submit</button>
+                    <button className="searchBox-barChild searchBox-filter" onClick={FilterBox.Instance.openFilter} onPointerDown={FilterBox.Instance.stopProp}>Filter</button>
+                </div>
+                <div className="searchBox-results" onScroll={this.resultsScrolled} style={{
+                    display: this._resultsOpen ? "flex" : "none",
+                    height: this.resFull ? "560px" : this.resultHeight, overflow: this.resFull ? "auto" : "visible"
+                }} ref={this.resultsRef}>
+                    {this._visibleElements}
+                </div>
+            </div>
+        );
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
new file mode 100644
index 000000000..24dd2eaa3
--- /dev/null
+++ b/src/client/views/search/SearchItem.scss
@@ -0,0 +1,211 @@
+@import "../globalCssVariables";
+
+.search-overview {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    height: 70px;
+    z-index: 0;
+}
+
+.searchBox-placeholder,
+.search-overview .search-item {
+    width: 500px;
+    background: $light-color-secondary;
+    border-color: $intermediate-color;
+    border-bottom-style: solid;
+    padding: 10px;
+    height: 70px;
+    z-index: 0;
+    display: inline-block;
+
+    .main-search-info {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+
+        .search-title {
+            text-transform: uppercase;
+            text-align: left;
+            width: 100%;
+            font-weight: bold;
+        }
+
+        .search-info {
+            display: flex;
+            justify-content: flex-end;
+
+            .link-container.item {
+                margin-left: auto;
+                margin-right: auto;
+                height: 26px;
+                width: 26px;
+                border-radius: 13px;
+                background: $dark-color;
+                color: $light-color-secondary;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                -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;
+                transform-origin: top right;
+                overflow: hidden;
+                position: relative;
+
+                .link-count {
+                    opacity: 1;
+                    position: absolute;
+                    z-index: 1000;
+                    text-align: center;
+                    -webkit-transition: opacity 0.2s ease-in-out;
+                    -moz-transition: opacity 0.2s ease-in-out;
+                    -o-transition: opacity 0.2s ease-in-out;
+                    transition: opacity 0.2s ease-in-out;
+                }
+
+                .link-extended {
+                    // display: none;
+                    visibility: hidden;
+                    opacity: 0;
+                    position: relative;
+                    z-index: 500;
+                    overflow: hidden;
+                    -webkit-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
+                    -moz-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
+                    -o-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
+                    transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
+                    // transition-delay: 1s;
+                }
+
+            }
+
+            .link-container.item:hover {
+                width: 70px;
+            }
+
+            .link-container.item:hover .link-count {
+                opacity: 0;
+            }
+
+            .link-container.item:hover .link-extended {
+                opacity: 1;
+                visibility: visible;
+                // display: inline;
+            }
+
+            .icon-icons {
+                width: 50px
+            }
+
+            .icon-live {
+                width: 175px;
+            }
+
+            .icon-icons,
+            .icon-live {
+                height: 50px;
+                margin: auto;
+                overflow: hidden;
+
+                .search-type {
+                    display: inline-block;
+                    width: 100%;
+                    position: absolute;
+                    justify-content: center;
+                    align-items: center;
+                    position: relative;
+                    margin-right: 5px;
+                }
+
+                .pdfBox-cont {
+                    overflow: hidden;
+
+                    img {
+                        width: 100% !important;
+                        height: auto !important;
+                    }
+                }
+
+                .search-type:hover+.search-label {
+                    opacity: 1;
+                }
+
+                .search-label {
+                    font-size: 10;
+                    position: relative;
+                    right: 0px;
+                    text-transform: capitalize;
+                    opacity: 0;
+                    -webkit-transition: opacity 0.2s ease-in-out;
+                    -moz-transition: opacity 0.2s ease-in-out;
+                    -o-transition: opacity 0.2s ease-in-out;
+                    transition: opacity 0.2s ease-in-out;
+                }
+            }
+
+            .icon-live:hover {
+                height: 175px;
+
+                .pdfBox-cont {
+                    img {
+                        width: 100% !important;
+                    }
+                }
+            }
+        }
+
+        .search-info:hover {
+            width: 60%;
+        }
+    }
+}
+
+.search-item:hover~.searchBox-instances,
+.searchBox-instances:hover,
+.searchBox-instances:active {
+    opacity: 1;
+    background: $lighter-alt-accent;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+}
+
+.search-item:hover {
+    transition: all 0.2s;
+    background: $lighter-alt-accent;
+}
+
+.searchBox-instances {
+    float: left;
+    opacity: 1;
+    width: 150px;
+    transition: all 0.2s ease;
+    color: black;
+    transform-origin: top right;
+    -webkit-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0);
+}
+
+
+.search-overview:hover {
+    z-index: 1;
+}
+
+.searchBox-placeholder {
+    min-height: 70px;
+    margin-left: 150px;
+    text-transform: uppercase;
+    text-align: left;
+    font-weight: bold;
+}
+
+.collection {
+    display: flex;
+}
+
+.collection-item {
+    width: 35px;
+}
\ No newline at end of file
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
new file mode 100644
index 000000000..e34d101a8
--- /dev/null
+++ b/src/client/views/search/SearchItem.tsx
@@ -0,0 +1,265 @@
+import React = require("react");
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faCaretUp, faChartBar, faFilePdf, faFilm, faGlobeAsia, faImage, faLink, faMusic, faObjectGroup, faStickyNote } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, computed, observable, runInAction } from "mobx";
+import { observer } from "mobx-react";
+import { Doc, DocListCast, HeightSym, WidthSym } from "../../../new_fields/Doc";
+import { Id } from "../../../new_fields/FieldSymbols";
+import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
+import { emptyFunction, returnFalse, returnOne, Utils } from "../../../Utils";
+import { DocumentType } from "../../documents/Documents";
+import { DocumentManager } from "../../util/DocumentManager";
+import { SetupDrag, DragManager } from "../../util/DragManager";
+import { LinkManager } from "../../util/LinkManager";
+import { SearchUtil } from "../../util/SearchUtil";
+import { Transform } from "../../util/Transform";
+import { SEARCH_THUMBNAIL_SIZE } from "../../views/globalCssVariables.scss";
+import { CollectionViewType } from "../collections/CollectionBaseView";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { DocumentView } from "../nodes/DocumentView";
+import { SearchBox } from "./SearchBox";
+import "./SearchItem.scss";
+import "./SelectorContextMenu.scss";
+import { ContextMenu } from "../ContextMenu";
+import { faFile } from '@fortawesome/free-solid-svg-icons';
+
+export interface SearchItemProps {
+    doc: Doc;
+}
+
+library.add(faCaretUp);
+library.add(faObjectGroup);
+library.add(faStickyNote);
+library.add(faFile);
+library.add(faFilePdf);
+library.add(faFilm);
+library.add(faMusic);
+library.add(faLink);
+library.add(faChartBar);
+library.add(faGlobeAsia);
+
+@observer
+export class SelectorContextMenu extends React.Component<SearchItemProps> {
+    @observable private _docs: { col: Doc, target: Doc }[] = [];
+    @observable private _otherDocs: { col: Doc, target: Doc }[] = [];
+
+    constructor(props: SearchItemProps) {
+        super(props);
+        this.fetchDocuments();
+    }
+
+    async fetchDocuments() {
+        let aliases = (await SearchUtil.GetViewsOfDocument(this.props.doc)).filter(doc => doc !== this.props.doc);
+        const { docs } = await SearchUtil.Search("", `data_l:"${this.props.doc[Id]}"`, true);
+        const map: Map<Doc, Doc> = new Map;
+        const allDocs = await Promise.all(aliases.map(doc => SearchUtil.Search("", `data_l:"${doc[Id]}"`, true).then(result => result.docs)));
+        allDocs.forEach((docs, index) => docs.forEach(doc => map.set(doc, aliases[index])));
+        docs.forEach(doc => map.delete(doc));
+        runInAction(() => {
+            this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: this.props.doc }));
+            this._otherDocs = Array.from(map.entries()).filter(entry => !Doc.AreProtosEqual(entry[0], CollectionDockingView.Instance.props.Document)).map(([col, target]) => ({ col, target }));
+        });
+    }
+
+    getOnClick({ col, target }: { col: Doc, target: Doc }) {
+        return () => {
+            col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col;
+            if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) {
+                const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2;
+                const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2;
+                col.panX = newPanX;
+                col.panY = newPanY;
+            }
+            CollectionDockingView.Instance.AddRightSplit(col, undefined);
+        };
+    }
+    render() {
+        return (
+            <div className="parents">
+                <p className="contexts">Contexts:</p>
+                {[...this._docs, ...this._otherDocs].map(doc => {
+                    let item = React.createRef<HTMLDivElement>();
+                    return <div className="collection" key={doc.col[Id] + doc.target[Id]} ref={item}>
+                        <div className="collection-item" onPointerDown={
+                            SetupDrag(item, () => doc.col, undefined, undefined, undefined, undefined, () => SearchBox.Instance.closeSearch())}>
+                            <FontAwesomeIcon icon={faStickyNote} />
+                        </div>
+                        <a className="title" onClick={this.getOnClick(doc)}>{doc.col.title}</a>
+                    </div>;
+                })}
+            </div>
+        );
+    }
+}
+
+@observer
+export class SearchItem extends React.Component<SearchItemProps> {
+
+    @observable _selected: boolean = false;
+
+    onClick = () => {
+        // I dont think this is the best functionality because clicking the name of the collection does that. Change it back if you'd like
+        // DocumentManager.Instance.jumpToDocument(this.props.doc, false);
+        CollectionDockingView.Instance.AddRightSplit(this.props.doc, undefined);
+    }
+    @observable _useIcons = true;
+    @observable _displayDim = 50;
+
+    @computed
+    public get DocumentIcon() {
+        if (!this._useIcons) {
+            let returnXDimension = () => this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE);
+            let returnYDimension = () => this._displayDim;
+            let scale = () => returnXDimension() / NumCast(this.props.doc.nativeWidth, returnXDimension());
+            return <div
+                onPointerDown={action(() => { this._useIcons = !this._useIcons; this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); })}
+                onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))}
+                onPointerLeave={action(() => this._displayDim = 50)} >
+                <DocumentView
+                    fitToBox={StrCast(this.props.doc.type).indexOf(DocumentType.COL) !== -1}
+                    Document={this.props.doc}
+                    addDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    ScreenToLocalTransform={Transform.Identity}
+                    addDocTab={returnFalse}
+                    renderDepth={1}
+                    PanelWidth={returnXDimension}
+                    PanelHeight={returnYDimension}
+                    focus={emptyFunction}
+                    selectOnLoad={false}
+                    parentActive={returnFalse}
+                    whenActiveChanged={returnFalse}
+                    bringToFront={emptyFunction}
+                    zoomToScale={emptyFunction}
+                    getScale={returnOne}
+                    ContainingCollectionView={undefined}
+                    ContentScaling={scale}
+                />
+            </div>;
+        }
+
+        let layoutresult = StrCast(this.props.doc.type);
+        let button = layoutresult.indexOf(DocumentType.PDF) !== -1 ? faFilePdf :
+            layoutresult.indexOf(DocumentType.IMG) !== -1 ? faImage :
+                layoutresult.indexOf(DocumentType.TEXT) !== -1 ? faStickyNote :
+                    layoutresult.indexOf(DocumentType.VID) !== -1 ? faFilm :
+                        layoutresult.indexOf(DocumentType.COL) !== -1 ? faObjectGroup :
+                            layoutresult.indexOf(DocumentType.AUDIO) !== -1 ? faMusic :
+                                layoutresult.indexOf(DocumentType.LINK) !== -1 ? faLink :
+                                    layoutresult.indexOf(DocumentType.HIST) !== -1 ? faChartBar :
+                                        layoutresult.indexOf(DocumentType.WEB) !== -1 ? faGlobeAsia :
+                                            faCaretUp;
+        return <div onPointerDown={action(() => { this._useIcons = false; this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); })} >
+            <FontAwesomeIcon icon={button} size="2x" />
+        </div>;
+    }
+
+    collectionRef = React.createRef<HTMLDivElement>();
+    startDocDrag = () => {
+        let doc = this.props.doc;
+        const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
+        if (isProto) {
+            return Doc.MakeDelegate(doc);
+        } else {
+            return Doc.MakeAlias(doc);
+        }
+    }
+
+    @computed
+    get linkCount() { return LinkManager.Instance.getAllRelatedLinks(this.props.doc).length; }
+
+    @computed
+    get linkString(): string {
+        let num = this.linkCount;
+        if (num === 1) {
+            return num.toString() + " link";
+        }
+        return num.toString() + " links";
+    }
+
+    @action
+    pointerDown = (e: React.PointerEvent) => { e.preventDefault(); e.button === 0 && SearchBox.Instance.openSearch(e); }
+
+    highlightDoc = (e: React.PointerEvent) => {
+        if (this.props.doc.type === DocumentType.LINK) {
+            if (this.props.doc.anchor1 && this.props.doc.anchor2) {
+
+                let doc1 = Cast(this.props.doc.anchor1, Doc, null);
+                let doc2 = Cast(this.props.doc.anchor2, Doc, null);
+                doc1 && (doc1.libraryBrush = true);
+                doc2 && (doc2.libraryBrush = true);
+            }
+        } else {
+            let docViews: DocumentView[] = DocumentManager.Instance.getAllDocumentViews(this.props.doc);
+            docViews.forEach(element => {
+                element.props.Document.libraryBrush = true;
+            });
+        }
+    }
+
+    unHighlightDoc = (e: React.PointerEvent) => {
+        if (this.props.doc.type === DocumentType.LINK) {
+            if (this.props.doc.anchor1 && this.props.doc.anchor2) {
+
+                let doc1 = Cast(this.props.doc.anchor1, Doc, null);
+                let doc2 = Cast(this.props.doc.anchor2, Doc, null);
+                doc1 && (doc1.libraryBrush = undefined);
+                doc2 && (doc2.libraryBrush = undefined);
+            }
+        } else {
+            let docViews: DocumentView[] = DocumentManager.Instance.getAllDocumentViews(this.props.doc);
+            docViews.forEach(element => {
+                element.props.Document.libraryBrush = undefined;
+            });
+        }
+    }
+
+    onContextMenu = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({
+            description: "Copy ID", event: () => {
+                Utils.CopyText(this.props.doc[Id]);
+            }
+        });
+        ContextMenu.Instance.displayMenu(e.clientX, e.clientY);
+    }
+
+    onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+        const doc = Doc.IsPrototype(this.props.doc) ? Doc.MakeDelegate(this.props.doc) : this.props.doc;
+        DragManager.StartDocumentDrag([e.currentTarget], new DragManager.DocumentDragData([doc], []), e.clientX, e.clientY, {
+            handlers: { dragComplete: emptyFunction },
+            hideSource: false,
+        });
+    }
+
+    render() {
+        return (
+            <div className="search-overview" onPointerDown={this.pointerDown} onContextMenu={this.onContextMenu}>
+                <div className="search-item" onPointerEnter={this.highlightDoc} onPointerLeave={this.unHighlightDoc} id="result"
+                    onClick={this.onClick} onPointerDown={this.pointerDown} >
+                    <div className="main-search-info">
+                        <div title="Drag as document" onPointerDown={this.onPointerDown} style={{ marginRight: "7px" }}> <FontAwesomeIcon icon="file" size="lg" /> </div>
+                        <div className="search-title" id="result" >{StrCast(this.props.doc.title)}</div>
+                        <div className="search-info" style={{ width: this._useIcons ? "15%" : "400px" }}>
+                            <div className={`icon-${this._useIcons ? "icons" : "live"}`}>
+                                <div className="search-type" title="Click to Preview">{this.DocumentIcon}</div>
+                                <div className="search-label">{this.props.doc.type ? this.props.doc.type : "Other"}</div>
+                            </div>
+                            <div className="link-container item">
+                                <div className="link-count">{this.linkCount}</div>
+                                <div className="link-extended">{this.linkString}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="searchBox-instances">
+                    <SelectorContextMenu {...this.props} />
+                </div>
+            </div>
+        );
+    }
+} 
\ No newline at end of file
diff --git a/src/client/views/search/SelectorContextMenu.scss b/src/client/views/search/SelectorContextMenu.scss
new file mode 100644
index 000000000..49f77b9bf
--- /dev/null
+++ b/src/client/views/search/SelectorContextMenu.scss
@@ -0,0 +1,15 @@
+@import "../globalCssVariables";
+
+.parents {
+    background: $lighter-alt-accent;
+    padding: 10px;
+
+    .contexts {
+        text-transform: uppercase;
+    }
+
+    .collection {
+        border-color: $darker-alt-accent;
+        border-bottom-style: solid;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
new file mode 100644
index 000000000..633a194fe
--- /dev/null
+++ b/src/client/views/search/ToggleBar.scss
@@ -0,0 +1,36 @@
+@import "../globalCssVariables";
+
+.toggle-title {
+    display: flex;
+    align-items: center;
+    color: $light-color;
+    text-transform: uppercase;
+    flex-direction: row;
+    justify-content: space-around;
+    padding: 5px;
+
+    .toggle-option {
+        width: 50%;
+        text-align: center;
+        -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;
+    }
+}
+
+.toggle-bar {
+    height: 50px;
+    background-color: $alt-accent;
+    border-radius: 10px;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+
+    .toggle-button {
+        width: 275px;
+        height: 100%;
+        border-radius: 10px;
+        background-color: $light-color;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
new file mode 100644
index 000000000..178578c5c
--- /dev/null
+++ b/src/client/views/search/ToggleBar.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action, runInAction, computed } from 'mobx';
+import "./SearchBox.scss";
+import "./ToggleBar.scss";
+import * as anime from 'animejs';
+
+export interface ToggleBarProps {
+    originalStatus: boolean;
+    optionOne: string;
+    optionTwo: string;
+    handleChange(): void;
+    getStatus(): boolean;
+}
+
+@observer
+export class ToggleBar extends React.Component<ToggleBarProps>{
+    static Instance: ToggleBar;
+
+    @observable private _forwardTimeline: anime.AnimeTimelineInstance;
+    @observable private _toggleButton: React.RefObject<HTMLDivElement>;
+    @observable private _originalStatus: boolean = this.props.originalStatus;
+
+    constructor(props: ToggleBarProps) {
+        super(props);
+        ToggleBar.Instance = this;
+        this._toggleButton = React.createRef();
+        this._forwardTimeline = anime.timeline({
+            loop: false,
+            autoplay: false,
+            direction: "reverse",
+        });
+    }
+
+    componentDidMount = () => {
+
+        let totalWidth = 265;
+
+        if (this._originalStatus) {
+            this._forwardTimeline.add({
+                targets: this._toggleButton.current,
+                translateX: totalWidth,
+                easing: "easeInOutQuad",
+                duration: 500
+            });
+        }
+        else {
+            this._forwardTimeline.add({
+                targets: this._toggleButton.current,
+                translateX: -totalWidth,
+                easing: "easeInOutQuad",
+                duration: 500
+            });
+        }
+    }
+
+    @action.bound
+    onclick() {
+        this._forwardTimeline.play();
+        this._forwardTimeline.reverse();
+        this.props.handleChange();
+    }
+
+    @action.bound
+    public resetToggle = () => {
+        if (!this.props.getStatus()) {
+            this._forwardTimeline.play();
+            this._forwardTimeline.reverse();
+            this.props.handleChange();
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <div className="toggle-title">
+                    <div className="toggle-option" style={{ opacity: (this.props.getStatus() ? 1 : .4) }}>{this.props.optionOne}</div>
+                    <div className="toggle-option" style={{ opacity: (this.props.getStatus() ? .4 : 1) }}>{this.props.optionTwo}</div>
+                </div>
+                <div className="toggle-bar" id="toggle-bar" onClick={this.onclick} style={{ flexDirection: (this._originalStatus ? "row" : "row-reverse") }}>
+                    <div className="toggle-button" id="toggle-button" ref={this._toggleButton} />
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file