things are almost working

5 files changed, 1032 insertions, 403 deletions

diff --git a/src/client/views/search/IconBar.1.tsx b/src/client/views/search/IconBar.1.tsx
new file mode 100644
index 000000000..1ffb48358
--- /dev/null
+++ b/src/client/views/search/IconBar.1.tsx
@@ -0,0 +1,453 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action, runInAction } from 'mobx';
+import "./SearchBox.scss";
+import "./IconBar.scss";
+import * as anime from 'animejs';
+import { DocTypes } from '../../documents/Documents';
+import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan } 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 $ from 'jquery';
+
+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);
+
+export interface IconBarProps {
+    updateIcon(icons: string[]): void;
+    // getSelectedTypes(): string[];
+    // getRemovedTypes(): string[];
+    getIcons(): string[]
+    allIcons: string[];
+    updateSelected(list: any[]): void;
+}
+
+
+
+@observer
+export class IconBar extends React.Component<IconBarProps> {
+
+    static Instance: IconBar;
+
+    @observable noneRef = React.createRef<HTMLDivElement>();
+    @observable colRef = React.createRef<HTMLDivElement>();
+    @observable imgRef = React.createRef<HTMLDivElement>();
+    @observable textRef = React.createRef<HTMLDivElement>();
+    @observable pdfRef = React.createRef<HTMLDivElement>();
+    @observable vidRef = React.createRef<HTMLDivElement>();
+    @observable audioRef = React.createRef<HTMLDivElement>();
+    @observable linkRef = React.createRef<HTMLDivElement>();
+    @observable histRef = React.createRef<HTMLDivElement>();
+    @observable webRef = React.createRef<HTMLDivElement>();
+    @observable allRefs: React.RefObject<HTMLDivElement>[] = [this.colRef, this.imgRef, this.textRef, this.pdfRef, this.vidRef, this.audioRef, this.linkRef, this.histRef, this.webRef];
+    @observable originalSelected: string[];
+    // @observable originalSelectedNodes: string[] = this.props.getSelectedTypes();
+    // @observable originalRemovedNodes: string[] = this.props.getSelectedTypes();
+
+    @observable removeType: boolean = false;
+    @observable added: any[];
+    @observable removed: any[];
+    @observable selected: any[];
+
+    constructor(props: IconBarProps) {
+        super(props);
+        IconBar.Instance = this;
+        this.added = [];
+        this.removed = [];
+        this.selected = [];
+        this.originalSelected = this.props.getIcons();
+        // console.log("ICONS")
+        // console.log(this.props.getIcons())
+        console.log(this.originalSelected)
+    }
+
+    @action
+    downKeyHandler = (e: KeyboardEvent) => {
+        if (e.key !== "Control") return;
+        this.removeType = true;
+        e.preventDefault();
+        e.stopPropagation();
+        document.body.style.cursor = "not-allowed";
+    }
+
+    @action
+    upKeyHandler = (e: KeyboardEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.removeType = false;
+        document.body.style.cursor = "default";
+
+    }
+
+    componentWillMount() {
+        document.removeEventListener("keydown", this.downKeyHandler);
+        document.addEventListener("keydown", this.downKeyHandler);
+        document.removeEventListener("keyup", this.upKeyHandler);
+        document.addEventListener("keyup", this.upKeyHandler);
+    }
+
+    componentWillUnMount() {
+        document.removeEventListener("keyup", this.upKeyHandler);
+        document.removeEventListener("keydown", this.downKeyHandler);
+    }
+
+
+    componentDidMount = () => {
+        //i KNOW this is bad i just can't get this to re render eeeeeeeek
+        this.forceUpdate();
+    }
+
+    @action.bound
+    resetIconFilters = () => {
+        this.unselectAllRefs();
+        // lmao sorry
+        this.forceUpdate();
+    }
+
+    //gets ref associated with given string
+    @action.bound
+    getRef = (value: string) => {
+        let toReturn;
+        switch (value) {
+            case (DocTypes.NONE):
+                toReturn = this.noneRef.current;
+                break;
+            case (DocTypes.AUDIO):
+                toReturn = this.audioRef.current;
+                break;
+            case (DocTypes.COL):
+                toReturn = this.colRef.current;
+                break;
+            case (DocTypes.HIST):
+                toReturn = this.histRef.current;
+                break;
+            case (DocTypes.IMG):
+                toReturn = this.imgRef.current;
+                break;
+            case (DocTypes.LINK):
+                toReturn = this.linkRef.current;
+                break;
+            case (DocTypes.PDF):
+                toReturn = this.pdfRef.current;
+                break;
+            case (DocTypes.TEXT):
+                toReturn = this.textRef.current;
+                break;
+            case (DocTypes.VID):
+                toReturn = this.vidRef.current;
+                break;
+            case (DocTypes.WEB):
+                toReturn = this.webRef.current;
+                break;
+            default:
+                toReturn = null;
+                break;
+        }
+
+        return toReturn;
+    }
+
+    @action.bound
+    unselectAllRefs() {
+        this.resetDataRemoved();
+        this.resetDataSelected();
+        this.removed = [];
+        this.added = [];
+    }
+
+    @action.bound
+    resetDataSelected() {
+        this.allRefs.forEach(element => {
+            if (element.current) {
+                element.current.setAttribute("data-selected", "false");
+            }
+        });
+    }
+
+    @action.bound
+    resetDataRemoved() {
+        this.allRefs.forEach(element => {
+            if (element.current) {
+                element.current.setAttribute("data-removed", "false");
+            }
+        });
+    }
+
+    @action.bound
+    alternateSelectedRef(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
+        let newRef: HTMLDivElement | null;
+        if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
+        else { newRef = ref; }
+        if (newRef) {
+            if (newRef.getAttribute("data-selected") === "true") {
+                newRef.setAttribute("data-selected", "false");
+            }
+            else {
+                newRef.setAttribute("data-selected", "true");
+            }
+        }
+    }
+
+    @action.bound
+    setToRemove(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
+        let newRef: HTMLDivElement | null;
+        if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
+        else { newRef = ref; }
+        if (newRef) newRef.setAttribute("data-removed", "true");
+    }
+
+    @action.bound
+    setToAdd(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
+        let newRef: HTMLDivElement | null;
+        if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
+        else { newRef = ref; }
+        if (newRef) newRef.setAttribute("data-removed", "false");
+    }
+
+    //TODO: this needs help
+    @action.bound
+    onClick = (value: string) => {
+        let icons: string[] = this.props.getIcons();
+        let ref: any = this.getRef(value);
+        // if(ref) this.alternateSelectedRef(ref);
+
+        if (value === DocTypes.NONE) {
+            icons = this.props.allIcons;
+            // if its none, change the color of all the other circles
+            this.resetIconFilters();
+        }
+
+        //if type should be removed
+        if (this.removeType) {
+            if (this.added.length !== 0) {
+                icons = this.props.allIcons;
+                this.resetIconFilters();
+                this.added = [];
+                icons = _.without(icons, value);
+                this.removed.push(ref);
+                this.setToRemove(ref)
+                ref.setAttribute("data-selected", "true")
+            }
+            else {
+                //if it's included in the list, remove it
+                if (icons.includes(value)) {
+                    icons = _.without(icons, value);
+                    this.removed.push(ref);
+                    this.setToRemove(ref);
+                    ref.setAttribute("data-selected", "true")
+                }
+                //if it's not included, add it back
+                else {
+                    icons.push(value);
+                    //take it out of removed list
+                    this.removed = _.without(this.removed, this.getRef(value));
+                    ref.setAttribute("data-selected", "false")
+                }
+            }
+            this.selected = this.removed;
+        }
+        //if type should be added
+        else {
+            if (this.removed.length !== 0) {
+                icons = this.props.allIcons;
+                this.resetIconFilters();
+                this.removed = [];
+                icons = [value];
+                this.added.push(ref);
+                this.setToAdd(ref)
+                ref.setAttribute("data-selected", "true")
+            }
+            else {
+                //if its included in the list, remove it
+                if (icons.includes(value)) {
+                    icons = _.without(icons, value);
+                    this.added = _.without(this.added, this.getRef(value))
+                    ref.setAttribute("data-selected", "false")
+                }
+                //if its not included in the list, add it
+                else {
+                    icons.push(value);
+                    this.added.push(ref)
+                    this.setToAdd(ref)
+                    ref.setAttribute("data-selected", "true")
+                }
+            }
+            this.selected = this.added;
+        }
+
+        this.props.updateIcon(icons);
+        this.props.updateSelected(this.selected);
+        //ok i know that this is bad but i dont know how else to get it to rerender and change the classname,
+        //any help here is greatly appreciated thanks frens
+        this.forceUpdate();
+    }
+
+    //checks if option is selected based on the attribute data-selected
+    //this is for visual purposes
+    @action.bound
+    isRefSelected = (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => {
+        let newRef: HTMLDivElement | null;
+        if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
+        else { newRef = ref; }
+        if (newRef) {
+            if (newRef.getAttribute("data-selected") === "true") {
+                return true;
+            }
+            return false;
+        }
+    }
+
+    //checks attribues of ref to return whether or not a type should be specifically included in the search
+    @action.bound
+    getInitialSelectedStatus = (type: string) => {
+        console.log(this.originalSelected)
+        if (this.originalSelected.includes(type)) {
+            return "true";
+        }
+        return "false";
+    }
+
+    //checks attributes of ref to return whether or not it should be excluded from search results
+    //this is for visual purposes
+    @action.bound
+    isRemoved = (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => {
+        let newRef: HTMLDivElement | null;
+        if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
+        else { newRef = ref; }
+        if (newRef) {
+            if (newRef.getAttribute("data-removed") === "true") {
+                return true;
+            }
+            return false;
+        }
+    }
+
+    //gets status upon mounting if a doc type should be removed from the results
+    @action.bound
+    getInitialRemovedStatus = (type: string) => {
+        if (!this.originalSelected.includes(type)) {
+            return "true";
+        }
+        return "false";
+    }
+
+    render() {
+        return (
+            <div>
+                <div className="filter icon-title">Filter by type of node</div>
+                <div className="filter icon-bar">
+                    <div className="filter type-outer">
+                        <div className={"type-icon none not-selected"}
+                            ref={this.noneRef}
+                            data-selected={"false"}
+                            data-removed={"false"}
+                            onClick={() => { this.onClick(DocTypes.NONE); }}>
+                            <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
+                        </div>
+                        <div className="filter-description">Clear</div>
+                    </div>
+                    <div className="type-outer">
+                        <div className={"type-icon filter " + (this.isRefSelected(this.pdfRef) ? "selected " + (this.isRemoved(this.pdfRef) ? "removed" : "add") : "not-selected")}
+                            ref={this.pdfRef}
+                            data-selected={this.getInitialSelectedStatus(DocTypes.PDF)}
+                            data-removed={this.getInitialRemovedStatus(DocTypes.PDF)}
+                            onClick={() => { this.onClick(DocTypes.PDF); }}>
+                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 0 }} icon={faFilePdf} />
+                        </div>
+                        <div className="filter-description">{DocTypes.PDF}</div>
+                    </div>
+                    <div className="type-outer">
+                        <div className={"type-icon filter " + (this.isRefSelected(this.histRef) ? "selected " + (this.isRemoved(this.histRef) ? "removed" : "add") : "not-selected")}
+                            ref={this.histRef}
+                            data-selected={this.getInitialSelectedStatus(DocTypes.HIST)}
+                            data-removed={this.getInitialRemovedStatus(DocTypes.HIST)}
+                            onClick={() => { this.onClick(DocTypes.HIST); }}>
+                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 1 }} icon={faChartBar} />
+                        </div>
+                        <div className="filter-description">{DocTypes.HIST}</div>
+                    </div>
+                    <div className="type-outer">
+                        <div className={"type-icon filter " + (this.isRefSelected(this.colRef) ? "selected " + (this.isRemoved(this.colRef) ? "removed" : "add") : "not-selected")}
+                            ref={this.colRef}
+                            data-selected={this.getInitialSelectedStatus(DocTypes.COL)}
+                            data-removed={this.getInitialRemovedStatus(DocTypes.COL)}
+                            onClick={() => { this.onClick(DocTypes.COL); }}>
+                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 2 }} icon={faObjectGroup} />
+                        </div>
+                        <div className="filter-description">{DocTypes.COL}</div>
+                    </div>
+                    <div className="type-outer">
+                        <div className={"type-icon filter " + (this.isRefSelected(this.imgRef) ? "selected " + (this.isRemoved(this.imgRef) ? "removed" : "add") : "not-selected")}
+                            ref={this.imgRef}
+                            data-selected={this.getInitialSelectedStatus(DocTypes.IMG)}
+                            data-removed={this.getInitialRemovedStatus(DocTypes.IMG)}
+                            onClick={() => { this.onClick(DocTypes.IMG); }}>
+                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 3 }} icon={faImage} />
+                        </div>
+                        <div className="filter-description">{DocTypes.IMG}</div>
+                    </div>
+                    <div className="type-outer">
+                        <div className={"type-icon filter " + (this.isRefSelected(this.vidRef) ? "selected " + (this.isRemoved(this.vidRef) ? "removed" : "add") : "not-selected")}
+                            ref={this.vidRef}
+                            data-selected={this.getInitialSelectedStatus(DocTypes.VID)}
+                            data-removed={this.getInitialRemovedStatus(DocTypes.VID)}
+                            onClick={() => { this.onClick(DocTypes.VID); }}>
+                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 4 }} icon={faFilm} />
+                        </div>
+                        <div className="filter-description">{DocTypes.VID}</div>
+                    </div>
+                    <div className="type-outer">
+                        <div className={"type-icon filter " + (this.isRefSelected(this.webRef) ? "selected " + (this.isRemoved(this.webRef) ? "removed" : "add") : "not-selected")}
+                            ref={this.webRef}
+                            data-selected={this.getInitialSelectedStatus(DocTypes.WEB)}
+                            data-removed={this.getInitialRemovedStatus(DocTypes.WEB)}
+                            onClick={() => { this.onClick(DocTypes.WEB); }}>
+                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 5 }} icon={faGlobeAsia} />
+                        </div>
+                        <div className="filter-description">{DocTypes.WEB}</div>
+                    </div>
+                    <div className="type-outer">
+                        <div className={"type-icon filter " + (this.isRefSelected(this.linkRef) ? "selected " + (this.isRemoved(this.linkRef) ? "removed" : "add") : "not-selected")}
+                            ref={this.linkRef}
+                            data-selected={this.getInitialSelectedStatus(DocTypes.LINK)}
+                            data-removed={this.getInitialRemovedStatus(DocTypes.LINK)}
+                            onClick={() => { this.onClick(DocTypes.LINK); }}>
+                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 6 }} icon={faLink} />
+                        </div>
+                        <div className="filter-description">{DocTypes.LINK}</div>
+                    </div>
+                    <div className="type-outer">
+                        <div className={"type-icon filter " + (this.isRefSelected(this.audioRef) ? "selected " + (this.isRemoved(this.audioRef) ? "removed" : "add") : "not-selected")}
+                            ref={this.audioRef}
+                            data-selected={this.getInitialSelectedStatus(DocTypes.AUDIO)}
+                            data-removed={this.getInitialRemovedStatus(DocTypes.AUDIO)}
+                            onClick={() => { this.onClick(DocTypes.AUDIO); }}>
+                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 7 }} icon={faMusic} />
+                        </div>
+                        <div className="filter-description">{DocTypes.AUDIO}</div>
+                    </div>
+                    <div className="type-outer">
+                        <div className={"type-icon filter " + (this.isRefSelected(this.textRef) ? "selected " + (this.isRemoved(this.textRef) ? "removed" : "add") : "not-selected")}
+                            ref={this.textRef}
+                            data-selected={this.getInitialSelectedStatus(DocTypes.TEXT)}
+                            data-removed={this.getInitialRemovedStatus(DocTypes.TEXT)}
+                            onClick={() => { this.onClick(DocTypes.TEXT); }}>
+                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 8 }} icon={faStickyNote} />
+                        </div>
+                        <div className="filter-description">{DocTypes.TEXT}</div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index 6a37982c2..41bd83dc1 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -30,23 +30,37 @@
     -o-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
     font-size: 2em;
+    position: absolute;
 }
 
+.ban-icon {
+    width: 50px;
+    height: 50px;
+    color: $alt-accent;
+    opacity: 0;
+    position: absolute;
+    float: right;
 
-.type-icon.selected.add {
-    background-color: $alt-accent;
-    opacity: 1;
+    .fontawesome-icon {
+        height: 100%;
+        width: 100%;
+    }
 }
 
-.type-icon.selected.removed {
-    background-color: transparent;
-    opacity: .2;
-}
+// .type-icon.selected.add {
+//     background-color: $alt-accent;
+//     opacity: 1;
+// }
 
-.type-icon.not-selected {
-    background-color: transparent;
-    opacity: .6;
-}
+// .type-icon.selected.removed {
+//     background-color: transparent;
+//     opacity: .2;
+// }
+
+// .type-icon.not-selected {
+//     background-color: transparent;
+//     opacity: .6;
+// }
 
 .fontawesome-icon {
     height: 28px;
@@ -57,7 +71,7 @@
     text-transform: capitalize;
 }
 
-.type-icon.filter:hover {
+.type-icon:hover {
     transform: scale(1.1);
     background-color: $alt-accent;
     opacity: 1;
@@ -67,21 +81,23 @@
     }
 }
 
-.type-icon.none:hover {
-    transform: scale(1.1);
-    // background-color: $alt-accent;
-    opacity: 1;
+// .type-icon:hover {
+//     transform: scale(1.1);
+//     // background-color: $alt-accent;
+//     opacity: 1;
 
-    +.filter-description {
-        opacity: 1;
-    }
-}
+//     +.filter-description {
+//         opacity: 1;
+//     }
+// }
 
 .type-outer {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 50px;
+    height: 50px;
+    position: relative;
 }
 
 .filter-description {
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index abec9a8b5..1e66023e4 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -10,6 +10,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library, icon } from '@fortawesome/fontawesome-svg-core';
 import * as _ from "lodash";
 import $ from 'jquery';
+import { array } from 'prop-types';
+import { IconButton } from './IconButton';
+import { list } from 'serializr';
 
 library.add(faSearch);
 library.add(faObjectGroup);
@@ -29,6 +32,7 @@ export interface IconBarProps {
     // getRemovedTypes(): string[];
     getIcons(): string[]
     allIcons: string[];
+    updateSelected(list: any[]): void;
 }
 
 
@@ -38,405 +42,314 @@ export class IconBar extends React.Component<IconBarProps> {
 
     static Instance: IconBar;
 
-    @observable noneRef = React.createRef<HTMLDivElement>();
-    @observable colRef = React.createRef<HTMLDivElement>();
-    @observable imgRef = React.createRef<HTMLDivElement>();
-    @observable textRef = React.createRef<HTMLDivElement>();
-    @observable pdfRef = React.createRef<HTMLDivElement>();
-    @observable vidRef = React.createRef<HTMLDivElement>();
-    @observable audioRef = React.createRef<HTMLDivElement>();
-    @observable linkRef = React.createRef<HTMLDivElement>();
-    @observable histRef = React.createRef<HTMLDivElement>();
-    @observable webRef = React.createRef<HTMLDivElement>();
-    @observable allRefs: React.RefObject<HTMLDivElement>[] = [this.colRef, this.imgRef, this.textRef, this.pdfRef, this.vidRef, this.audioRef, this.linkRef, this.histRef, this.webRef];
-    @observable originalSelected: string[] = this.props.getIcons();
+    @observable originalSelected: string[] = [];
     // @observable originalSelectedNodes: string[] = this.props.getSelectedTypes();
     // @observable originalRemovedNodes: string[] = this.props.getSelectedTypes();
 
     @observable removeType: boolean = false;
-    @observable added: any[];
-    @observable removed: any[];
+    // @observable added: any[];
+    // @observable removed: any[];
+    // @observable selected: any[];
+
+    allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
+    allDivs: any = [];
+    @observable list: string[];
 
     constructor(props: IconBarProps) {
         super(props);
         IconBar.Instance = this;
-        this.added = [];
-        this.removed = [];
-    }
-
-    @action
-    downKeyHandler = (e: KeyboardEvent) => {
-        if (e.key !== "Control") return;
-        this.removeType = true;
-        e.preventDefault();
-        e.stopPropagation();
-        document.body.style.cursor = "not-allowed";
-    }
-
-    @action
-    upKeyHandler = (e: KeyboardEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.removeType = false;
-        document.body.style.cursor = "default";
-
-    }
-
-    componentWillMount() {
-        document.removeEventListener("keydown", this.downKeyHandler);
-        document.addEventListener("keydown", this.downKeyHandler);
-        document.removeEventListener("keyup", this.upKeyHandler);
-        document.addEventListener("keyup", this.upKeyHandler);
+        console.log("constructing")
+        this.list = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
+        console.log(this.list)
+        // this.added = [];
+        // this.removed = [];
+        // this.selected = [];
+        // this.originalSelected = this.props.getIcons();
+        // console.log("ICONS")
+        // console.log(this.props.getIcons())
+        // console.log(this.originalSelected)
     }
 
-    componentWillUnMount() {
-        document.removeEventListener("keyup", this.upKeyHandler);
-        document.removeEventListener("keydown", this.downKeyHandler);
-    }
-
-
-    componentDidMount = () => {
-        //i KNOW this is bad i just can't get this to re render eeeeeeeek
-        this.forceUpdate();
-    }
+    // @action
+    // downKeyHandler = (e: KeyboardEvent) => {
+    //     if (e.key !== "Control") return;
+    //     this.removeType = true;
+    //     e.preventDefault();
+    //     e.stopPropagation();
+    //     document.body.style.cursor = "not-allowed";
+    // }
+
+    // @action
+    // upKeyHandler = (e: KeyboardEvent) => {
+    //     e.preventDefault();
+    //     e.stopPropagation();
+    //     this.removeType = false;
+    //     document.body.style.cursor = "default";
+
+    // }
+
+    // componentWillMount() {
+    //     document.removeEventListener("keydown", this.downKeyHandler);
+    //     document.addEventListener("keydown", this.downKeyHandler);
+    //     document.removeEventListener("keyup", this.upKeyHandler);
+    //     document.addEventListener("keyup", this.upKeyHandler);
+    // }
+
+    // componentWillUnMount() {
+    //     document.removeEventListener("keyup", this.upKeyHandler);
+    //     document.removeEventListener("keydown", this.downKeyHandler);
+    // }
+
+
+    // componentDidMount = () => {
+    //     //i KNOW this is bad i just can't get this to re render eeeeeeeek
+    //     this.forceUpdate();
+    // }
+
+    // @action.bound
+    // resetIconFilters = () => {
+    //     this.unselectAllRefs();
+    //     // lmao sorry
+    //     this.forceUpdate();
+    // }
+
+
+    // @action.bound
+    // unselectAllRefs() {
+    //     this.resetDataRemoved();
+    //     this.resetDataSelected();
+    //     this.removed = [];
+    //     this.added = [];
+    // }
+
+    // @action.bound
+    // resetDataSelected() {
+    //     this.allRefs.forEach(element => {
+    //         if (element.current) {
+    //             element.current.setAttribute("data-selected", "false");
+    //         }
+    //     });
+    // }
+
+    // @action.bound
+    // resetDataRemoved() {
+    //     this.allRefs.forEach(element => {
+    //         if (element.current) {
+    //             element.current.setAttribute("data-removed", "false");
+    //         }
+    //     });
+    // }
+
+    // @action.bound
+    // alternateSelectedRef(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
+    //     let newRef: HTMLDivElement | null;
+    //     if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
+    //     else { newRef = ref; }
+    //     if (newRef) {
+    //         if (newRef.getAttribute("data-selected") === "true") {
+    //             newRef.setAttribute("data-selected", "false");
+    //         }
+    //         else {
+    //             newRef.setAttribute("data-selected", "true");
+    //         }
+    //     }
+    // }
+
+    // @action.bound
+    // setToRemove(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
+    //     let newRef: HTMLDivElement | null;
+    //     if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
+    //     else { newRef = ref; }
+    //     if (newRef) newRef.setAttribute("data-removed", "true");
+    // }
+
+    // @action.bound
+    // setToAdd(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
+    //     let newRef: HTMLDivElement | null;
+    //     if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
+    //     else { newRef = ref; }
+    //     if (newRef) newRef.setAttribute("data-removed", "false");
+    // }
 
     @action.bound
-    resetIconFilters = () => {
-        this.unselectAllRefs();
-        // lmao sorry
-        this.forceUpdate();
-    }
-
-    //gets ref associated with given string
-    @action.bound
-    getRef = (value: string) => {
-        let toReturn;
-        switch (value) {
-            case (DocTypes.NONE):
-                toReturn = this.noneRef.current;
-                break;
-            case (DocTypes.AUDIO):
-                toReturn = this.audioRef.current;
-                break;
-            case (DocTypes.COL):
-                toReturn = this.colRef.current;
-                break;
-            case (DocTypes.HIST):
-                toReturn = this.histRef.current;
-                break;
-            case (DocTypes.IMG):
-                toReturn = this.imgRef.current;
-                break;
-            case (DocTypes.LINK):
-                toReturn = this.linkRef.current;
-                break;
-            case (DocTypes.PDF):
-                toReturn = this.pdfRef.current;
-                break;
-            case (DocTypes.TEXT):
-                toReturn = this.textRef.current;
-                break;
-            case (DocTypes.VID):
-                toReturn = this.vidRef.current;
-                break;
-            case (DocTypes.WEB):
-                toReturn = this.webRef.current;
-                break;
-            default:
-                toReturn = null;
-                break;
-        }
-
-        return toReturn;
-    }
-
-    @action.bound
-    unselectAllRefs() {
-        this.resetDataRemoved();
-        this.resetDataSelected();
-        this.removed = [];
-        this.added = [];
+    onClick = (value: string) => {
+console.log("hello!")
     }
 
-    @action.bound
-    resetDataSelected() {
-        this.allRefs.forEach(element => {
-            if (element.current) {
-                element.current.setAttribute("data-selected", "false");
-            }
-        });
-    }
+    // //TODO: this needs help
+    // @action.bound
+    // onClick = (value: string) => {
+    //     let icons: string[] = this.props.getIcons();
+    //     let ref: any = this.getRef(value);
+    //     // if(ref) this.alternateSelectedRef(ref);
+
+    //     if (value === DocTypes.NONE) {
+    //         icons = this.props.allIcons;
+    //         // if its none, change the color of all the other circles
+    //         this.resetIconFilters();
+    //     }
+
+    //     //if type should be removed
+    //     if (this.removeType) {
+    //         if (this.added.length !== 0) {
+    //             icons = this.props.allIcons;
+    //             this.resetIconFilters();
+    //             this.added = [];
+    //             icons = _.without(icons, value);
+    //             this.removed.push(ref);
+    //             this.setToRemove(ref)
+    //             ref.setAttribute("data-selected", "true")
+    //         }
+    //         else {
+    //             //if it's included in the list, remove it
+    //             if (icons.includes(value)) {
+    //                 icons = _.without(icons, value);
+    //                 this.removed.push(ref);
+    //                 this.setToRemove(ref);
+    //                 ref.setAttribute("data-selected", "true")
+    //             }
+    //             //if it's not included, add it back
+    //             else {
+    //                 icons.push(value);
+    //                 //take it out of removed list
+    //                 this.removed = _.without(this.removed, this.getRef(value));
+    //                 ref.setAttribute("data-selected", "false")
+    //             }
+    //         }
+    //         this.selected = this.removed;
+    //     }
+    //     //if type should be added
+    //     else {
+    //         if (this.removed.length !== 0) {
+    //             icons = this.props.allIcons;
+    //             this.resetIconFilters();
+    //             this.removed = [];
+    //             icons = [value];
+    //             this.added.push(ref);
+    //             this.setToAdd(ref)
+    //             ref.setAttribute("data-selected", "true")
+    //         }
+    //         else {
+    //             //if its included in the list, remove it
+    //             if (icons.includes(value)) {
+    //                 icons = _.without(icons, value);
+    //                 this.added = _.without(this.added, this.getRef(value))
+    //                 ref.setAttribute("data-selected", "false")
+    //             }
+    //             //if its not included in the list, add it
+    //             else {
+    //                 icons.push(value);
+    //                 this.added.push(ref)
+    //                 this.setToAdd(ref)
+    //                 ref.setAttribute("data-selected", "true")
+    //             }
+    //         }
+    //         this.selected = this.added;
+    //     }
+
+    //     this.props.updateIcon(icons);
+    //     this.props.updateSelected(this.selected);
+    //     //ok i know that this is bad but i dont know how else to get it to rerender and change the classname,
+    //     //any help here is greatly appreciated thanks frens
+    //     this.forceUpdate();
+    // }
 
-    @action.bound
-    resetDataRemoved() {
-        this.allRefs.forEach(element => {
-            if (element.current) {
-                element.current.setAttribute("data-removed", "false");
-            }
-        });
-    }
+    //checks if option is selected based on the attribute data-selected
+    // //this is for visual purposes
+    // @action.bound
+    // isRefSelected = (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => {
+    //     let newRef: HTMLDivElement | null;
+    //     if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
+    //     else { newRef = ref; }
+    //     if (newRef) {
+    //         if (newRef.getAttribute("data-selected") === "true") {
+    //             return true;
+    //         }
+    //         return false;
+    //     }
+    // }
 
-    @action.bound
-    alternateSelectedRef(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
-        let newRef: HTMLDivElement | null;
-        if(!(ref instanceof HTMLDivElement)){newRef = ref.current;}
-        else{newRef = ref;}
-        if(newRef)
-        {if (newRef.getAttribute("data-selected") === "true") {
-            newRef.setAttribute("data-selected", "false");
-        }
-        else {
-            newRef.setAttribute("data-selected", "true");
-        }}
-    }
+    //checks attribues of ref to return whether or not a type should be specifically included in the search
+    // @action.bound
+    // getInitialSelectedStatus = (type: string) => {
+    //     console.log(this.originalSelected)
+    //     if (this.originalSelected.includes(type)) {
+    //         return "true";
+    //     }
+    //     return "false";
+    // }
 
-    @action.bound
-    setToRemove(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
-        let newRef: HTMLDivElement | null;
-        if(!(ref instanceof HTMLDivElement)){newRef = ref.current;}
-        else{newRef = ref;}
-        if(newRef) newRef.setAttribute("data-removed", "true");
-    }
+    //checks attributes of ref to return whether or not it should be excluded from search results
+    // //this is for visual purposes
+    // @action.bound
+    // isRemoved = (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => {
+    //     let newRef: HTMLDivElement | null;
+    //     if (!(ref instanceof HTMLDivElement)) { newRef = ref.current; }
+    //     else { newRef = ref; }
+    //     if (newRef) {
+    //         if (newRef.getAttribute("data-removed") === "true") {
+    //             return true;
+    //         }
+    //         return false;
+    //     }
+    // }
 
-    @action.bound
-    setToAdd(ref: HTMLDivElement | React.RefObject<HTMLDivElement>) {
-        let newRef: HTMLDivElement | null;
-        if(!(ref instanceof HTMLDivElement)){newRef = ref.current;}
-        else{newRef = ref;}
-        if(newRef) newRef.setAttribute("data-removed", "false");
-    }
+    //gets status upon mounting if a doc type should be removed from the results
+    // @action.bound
+    // getInitialRemovedStatus = (type: string) => {
+    //     if (!this.originalSelected.includes(type)) {
+    //         return "true";
+    //     }
+    //     return "false";
 
-    //TODO: this needs help
-    @action.bound
-    onClick = (value: string) => {
-        let icons: string[] = this.props.getIcons();
-        let ref: any = this.getRef(value);
-        if(ref) this.alternateSelectedRef(ref);
-
-        if (value === DocTypes.NONE) {
-            icons = this.props.allIcons;
-            // if its none, change the color of all the other circles
-            this.resetIconFilters();
-        }
-
-        //if type should be removed
-        if (this.removeType) {
-            console.log("removing")
-            if (this.added.length !== 0) {
-                icons = this.props.allIcons;
-                this.resetIconFilters();
-                this.added = [];
-                icons = _.without(icons, value);
-                this.removed.push(ref);
-                this.setToRemove(ref)
-                ref.setAttribute("data-selected", "true")
-            }
-            else {
-                //if it's included in the list, remove it
-                if (icons.includes(value)) {
-                    icons = _.without(icons, value);
-                    this.removed.push(ref);
-                    this.setToRemove(ref)
-                }
-                //if it's not included, add it back
-                else {
-                    icons.push(value);
-                    //take it out of removed list
-                    this.removed = _.without(this.removed, this.getRef(value));
-                }
-            }
-
-        }
-        //if type should be added
-        else{
-            console.log("adding")
-            if(this.removed.length !== 0){
-                icons = this.props.allIcons;
-                this.resetIconFilters();
-                this.removed = [];
-                icons = [value];
-                this.added.push(ref);
-                this.setToAdd(ref)
-                if(ref){ref.setAttribute("data-selected", "true")}
-            }
-            else{
-                //if its included in the list, remove it
-                if(icons.includes(value)){
-                    icons = _.without(icons, value);
-                    this.added = _.without(this.added, this.getRef(value))
-                }
-                //if its not included in the list, add it
-                else{
-                    icons.push(value);
-                    this.added.push(ref)
-                    this.setToAdd(ref)
-                }
-            }
-        }
-
-        this.props.updateIcon(icons);
-        //ok i know that this is bad but i dont know how else to get it to rerender and change the classname,
-        //any help here is greatly appreciated thanks frens
-        console.log(value)
-        console.log(ref.getAttribute("data-removed"));
-        console.log(this.isRemoved(ref));
-        console.log(ref.className)
-        this.forceUpdate();
-    }
 
-    //checks if option is selected based on the attribute data-selected
-    //this is for visual purposes
-    @action.bound
-    isRefSelected = (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => {
-        let newRef: HTMLDivElement | null;
-        if(!(ref instanceof HTMLDivElement)){newRef = ref.current;}
-        else{newRef = ref;}
-        if (newRef) {
-            if (newRef.getAttribute("data-selected") === "true") {
-                return true;
-            }
-            return false;
-        }
-    }
+    // }
 
-    //checks attribues of ref to return whether or not a type should be specifically included in the search
-    @action.bound
-    getInitialSelectedStatus = (type: string) => {
-        if (this.originalSelected.includes(type)) {
-            return "true";
-        }
-        return "false";
+    // @action.bound
+    getList = (): string[] => {
+        // console.log(this.list)
+        return this.list;
     }
 
-    //checks attributes of ref to return whether or not it should be excluded from search results
-    //this is for visual purposes
     @action.bound
-    isRemoved = (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => {
-        let newRef: HTMLDivElement | null;
-        if(!(ref instanceof HTMLDivElement)){newRef = ref.current;}
-        else{newRef = ref;}
-        if (newRef) {
-            if (newRef.getAttribute("data-removed") === "true") {
-                return true;
-            }
-            return false;
-        }
+    updateList(newList: string[]) {
+        this.list = newList;
     }
 
-    //gets status upon mounting if a doc type should be removed from the results
     @action.bound
-    getInitialRemovedStatus = (type: string) => {
-        if (!this.originalSelected.includes(type)) {
-            return "true";
-        }
-        return "false";
+    resetSelf() {
+        console.log("resetting eventually")
+        const children = this.props.children;
+        console.log(children)
+        React.Children.map(children, child => {
+            console.log(child)
+        })
+        // IconButton.Instance.reset();
+        // let filterName: string;
+        // let el: HTMLElement | null;
+        // this.allIcons.forEach(typeName => {
+        //     filterName = typeName + "-filter";
+        //     el = document.getElementById(filterName);
+            
+        // });
     }
 
     render() {
+        let element;
         return (
             <div>
                 <div className="filter icon-title">Filter by type of node</div>
                 <div className="filter icon-bar">
-                    <div className="filter type-outer">
+                <div className="filter type-outer">
                         <div className={"type-icon none not-selected"}
-                            ref={this.noneRef}
-                            data-selected={"false"}
-                            data-removed={"false"}
-                            onClick={() => { this.onClick(DocTypes.NONE); }}>
+                            onClick={this.resetSelf}>
                             <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
                         </div>
                         <div className="filter-description">Clear</div>
                     </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.pdfRef) ? "selected " + (this.isRemoved(this.pdfRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.pdfRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.PDF)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.PDF)}
-                            onClick={() => { this.onClick(DocTypes.PDF); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 0 }} icon={faFilePdf} />
-                        </div>
-                        <div className="filter-description">{DocTypes.PDF}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.histRef) ? "selected " + (this.isRemoved(this.histRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.histRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.HIST)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.HIST)}
-                            onClick={() => { this.onClick(DocTypes.HIST); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 1 }} icon={faChartBar} />
-                        </div>
-                        <div className="filter-description">{DocTypes.HIST}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.colRef) ? "selected " + (this.isRemoved(this.colRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.colRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.COL)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.COL)}
-                            onClick={() => { this.onClick(DocTypes.COL); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 2 }} icon={faObjectGroup} />
-                        </div>
-                        <div className="filter-description">{DocTypes.COL}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.imgRef) ? "selected " + (this.isRemoved(this.imgRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.imgRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.IMG)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.IMG)}
-                            onClick={() => { this.onClick(DocTypes.IMG); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 3 }} icon={faImage} />
-                        </div>
-                        <div className="filter-description">{DocTypes.IMG}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.vidRef) ? "selected " + (this.isRemoved(this.vidRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.vidRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.VID)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.VID)}
-                            onClick={() => { this.onClick(DocTypes.VID); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 4 }} icon={faFilm} />
-                        </div>
-                        <div className="filter-description">{DocTypes.VID}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.webRef) ? "selected " + (this.isRemoved(this.webRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.webRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.WEB)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.WEB)}
-                            onClick={() => { this.onClick(DocTypes.WEB); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 5 }} icon={faGlobeAsia} />
-                        </div>
-                        <div className="filter-description">{DocTypes.WEB}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.linkRef) ? "selected " + (this.isRemoved(this.linkRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.linkRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.LINK)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.LINK)}
-                            onClick={() => { this.onClick(DocTypes.LINK); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 6 }} icon={faLink} />
-                        </div>
-                        <div className="filter-description">{DocTypes.LINK}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.audioRef) ? "selected " + (this.isRemoved(this.audioRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.audioRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.AUDIO)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.AUDIO)}
-                            onClick={() => { this.onClick(DocTypes.AUDIO); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 7 }} icon={faMusic} />
-                        </div>
-                        <div className="filter-description">{DocTypes.AUDIO}</div>
-                    </div>
-                    <div className="type-outer">
-                        <div className={"type-icon filter " + (this.isRefSelected(this.textRef) ? "selected " + (this.isRemoved(this.textRef) ? "removed" : "add") : "not-selected")}
-                            ref={this.textRef}
-                            data-selected={this.getInitialSelectedStatus(DocTypes.TEXT)}
-                            data-removed={this.getInitialRemovedStatus(DocTypes.TEXT)}
-                            onClick={() => { this.onClick(DocTypes.TEXT); }}>
-                            <FontAwesomeIcon className="fontawesome-icon filter" style={{ order: 8 }} icon={faStickyNote} />
-                        </div>
-                        <div className="filter-description">{DocTypes.TEXT}</div>
-                    </div>
+                    {this.allIcons.map((type: string) =>
+                        <IconButton type={type} onClick={this.onClick} getList={this.getList} updateList = {this.updateList} resetSelf = {this.resetSelf}/>
+                    )}
                 </div>
             </div>
         );
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index 30dd3676d..e10074c9f 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -3,34 +3,274 @@ import { observer } from 'mobx-react';
 import { observable, action, runInAction } from 'mobx';
 import "./SearchBox.scss";
 import "./IconBar.scss";
-import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan } from '@fortawesome/free-solid-svg-icons';
+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 { DocTypes } from '../../documents/Documents';
+import '../globalCssVariables.scss';
+import * as _ from "lodash";
+
+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 {
-    ref: React.RefObject<HTMLDivElement>;
-    isRefSelected(r: any): boolean;
-    isRemoved(ref: any): boolean;
     type: string;
-    getInitialSelectedStatus(ref: any): string;
-    getInitialRemovedStatus(ref: any): string;
-    onClick(t: string): void;
-    icon: any;
+    onClick(type: string): void;
+    getList(): string[];
+    updateList(list: string[]): void;
+    resetSelf(): void;
+    // addToSelected(type: string): void;
+    // removeFromSelected(type: string): void;
+    // resetAddedAndRemoved(): void;
 }
 
 @observer
 export class IconButton extends React.Component<IconButtonProps>{
 
+    @observable isSelected: boolean = false;
+    @observable isAdded: boolean = false;
+    @observable isRemoved: boolean = false;
+    @observable removeType = false;
+    @observable hover = false;
+
+    static Instance: IconButton;
+    constructor(props: IconButtonProps){
+        super(props);
+        IconButton.Instance = this;
+    }
+
+    @action
+    downKeyHandler = (e: KeyboardEvent) => {
+        if (e.key !== "Control") return;
+        this.removeType = true;
+        e.preventDefault();
+        e.stopPropagation();
+        document.body.style.cursor = "not-allowed";
+    }
+
+    @action
+    upKeyHandler = (e: KeyboardEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.removeType = false;
+        document.body.style.cursor = "default";
+
+    }
+
+    componentWillMount() {
+        document.removeEventListener("keydown", this.downKeyHandler);
+        document.addEventListener("keydown", this.downKeyHandler);
+        document.removeEventListener("keyup", this.upKeyHandler);
+        document.addEventListener("keyup", this.upKeyHandler);
+    }
+
+    componentWillUnMount() {
+        document.removeEventListener("keyup", this.upKeyHandler);
+        document.removeEventListener("keydown", this.downKeyHandler);
+    }
+
+    @action.bound
+    getIcon() {
+        switch (this.props.type) {
+            case (DocTypes.NONE):
+                return faBan;
+            case (DocTypes.AUDIO):
+                return faMusic;
+            case (DocTypes.COL):
+                return faObjectGroup;
+            case (DocTypes.HIST):
+                return faChartBar;
+            case (DocTypes.IMG):
+                return faImage;
+            case (DocTypes.LINK):
+                return faLink;
+            case (DocTypes.PDF):
+                return faFilePdf;
+            case (DocTypes.TEXT):
+                return faStickyNote;
+            case (DocTypes.VID):
+                return faVideo;
+            case (DocTypes.WEB):
+                return faGlobeAsia;
+            default:
+                return faCaretDown;
+        }
+    }
+
+    public getType(): string {
+        return this.props.type;
+    }
+
+    public getIsSelected(): boolean {
+        return this.isSelected;
+    }
+
+    public getIsRemoved() {
+        return this.isRemoved;
+    }
+
+    public getIsAdded() {
+        return this.isAdded;
+    }
+
+    @action.bound
+    onClick() {
+        let newList: string[] = this.props.getList();
+
+        //if it's not already selected
+        if (!this.isSelected) {
+            this.isSelected = true;
+
+            //if actions pertain to removal
+            if (this.removeType) {
+                this.isAdded = false;
+                if (!this.isRemoved) {
+                    _.pull(newList, this.props.type);
+                    this.isRemoved = true;
+                }
+                else {
+                    newList.push(this.props.type);
+                    this.isRemoved = false;
+                }
+            }
+            // if actions pertain to adding
+            else {
+                this.isRemoved = false;
+                if (!this.isAdded) {
+                    if (newList.length === 9) {
+                        newList = [this.props.type];
+                    } else {
+                        newList.push(this.props.type);
+                    }
+                    this.isAdded = true;
+                }
+                else {
+                    _.pull(newList, this.props.type);
+                    this.isAdded = false;
+                }
+            }
+        }
+        //if it is selected already
+        else {
+            this.isSelected = false;
+            if(this.isAdded){
+                this.isAdded = false;
+                _.pull(newList, this.props.type);
+            }
+            if(this.isRemoved){
+                this.isRemoved = false;
+                newList.push(this.props.type)
+            }
+
+
+            this.isAdded = false;
+            this.isRemoved = false;
+        }
+
+        this.props.onClick(this.props.type);
+        this.props.updateList(newList);
+    }
+
+    selectedAdded = {
+        opacity: 1,
+        backgroundColor: "#c2c2c5" //$alt-accent
+    }
+
+    selectedRemoved = {
+        opacity: 0.2,
+        // backgroundColor: "red"
+    }
+
+    notSelected = {
+        opacity: 0.6,
+        // backgroundColor: "red"
+    }
+
+    hoverStyle = {
+        opacity: 1,
+        backgroundColor: "#c2c2c5" //$alt-accent
+    }
+
+    hoverRemoveStyle = {
+        opacity: 0.2,
+        backgroundColor: "transparent",
+    }
+
+    banStyle = {
+        opacity: 1,
+    }
+
+    @action.bound
+    public reset() {
+        console.log("resetting ", this.props.type)
+        this.isSelected = false;
+        this.isAdded = false;
+        this.isRemoved = false;
+    }
+
+    @action
+    onMouseLeave = () => {
+        this.hover = false;
+    }
+
+    @action
+    onMouseEnter = () => {
+        this.hover = true;
+    }
+
+    getFA = () => {
+        switch (this.props.type) {
+            case (DocTypes.NONE):
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faBan} />);
+            case (DocTypes.AUDIO):
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faMusic} />)
+            case (DocTypes.COL):
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faObjectGroup} />)
+            case (DocTypes.HIST):
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faChartBar} />)
+            case (DocTypes.IMG):
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faImage} />)
+            case (DocTypes.LINK):
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faLink} />)
+            case (DocTypes.PDF):
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faFilePdf} />)
+            case (DocTypes.TEXT):
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faStickyNote} />)
+            case (DocTypes.VID):
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faVideo} />)
+            case (DocTypes.WEB):
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faGlobeAsia} />)
+            default:
+                return (<FontAwesomeIcon className="fontawesome-icon" icon={faCaretDown} />)
+        }
+    }
+
     render() {
         return (
-            <div className="type-outer">
-                <div className={"type-icon filter " + (this.props.isRefSelected(this.props.ref) ? "selected " + (this.props.isRemoved(this.props.ref) ? "removed" : "add") : "not-selected")}
-                    ref={this.props.ref}
-                    data-selected={this.props.getInitialSelectedStatus(this.props.type)}
-                    data-removed={this.props.getInitialRemovedStatus(this.props.type)}
-                    onClick={() => { this.props.onClick(this.props.type); }}>
-                    <FontAwesomeIcon className="fontawesome-icon" icon={this.props.icon} />
+            <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.removeType ? this.hoverRemoveStyle : this.hoverStyle :
+                        !this.isSelected ? this.notSelected :
+                            this.isAdded ? this.selectedAdded :
+                                this.isRemoved ? this.selectedRemoved : this.notSelected}
+                >
+                    {this.getFA()}
                 </div>
+                <div className="ban-icon"
+                    style={this.hover ? (this.removeType ? this.banStyle : { opacity: 0 }) : (this.isSelected ? this.isRemoved ? this.banStyle : { opacity: 0 } : { opacity: 0 })}>
+                    <FontAwesomeIcon className="fontawesome-icon" icon={faBan} /></div>
                 <div className="filter-description">{this.props.type}</div>
             </div>
         );
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 5445f9cb0..5d88615f6 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -37,13 +37,14 @@ export class SearchBox extends React.Component {
     @observable _searchString: string = "";
     //if true, any keywords can be used. if false, all keywords are required.
     @observable _wordStatus: boolean = true;
-    @observable _icons: string[] = [];
     @observable private _open: boolean = false;
     @observable private _resultsOpen: boolean = false;
     @observable private _results: Doc[] = [];
     @observable filterBoxStatus: boolean = false;
     @observable private _openNoResults: boolean = false;
     allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
+    @observable _icons: string[] = this.allIcons;
+    @observable _selectedTypes: any[] = [];
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -81,8 +82,6 @@ export class SearchBox extends React.Component {
         let query = this._searchString;
         let results: Doc[];
 
-        console.log(query)
-
         //if this._wordstatus is false, all words are required and a + is added before each
         if (!this._wordStatus) {
             let oldWords = query.split(" ");
@@ -104,8 +103,6 @@ export class SearchBox extends React.Component {
             results = await this.getResults(query);
         }
 
-        console.log(results)
-
         runInAction(() => {
             this._resultsOpen = true;
             this._results = results;
@@ -130,7 +127,6 @@ export class SearchBox extends React.Component {
                 docs.push(field);
             }
         }
-        console.log(docs)
         return this.filterDocs(docs);
     }
 
@@ -276,11 +272,22 @@ export class SearchBox extends React.Component {
         this._pointerTime = e.timeStamp;
     }
 
-    //TODO: to be cone with checkmark
+    //TODO: to be done with checkmark
     updateCheckStatus(newStat: boolean) {
         console.log("updating!")
     }
 
+    @action.bound
+    updateSelected(newArray: any[]) {
+        this._selectedTypes = newArray;
+    }
+
+    getSelected(): any[] {
+        console.log(this._selectedTypes)
+        return this._selectedTypes;
+    }
+
+
     // 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}
@@ -316,7 +323,7 @@ export class SearchBox extends React.Component {
                                 <ToggleBar originalStatus={this._wordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} changeStatus={this.handleWordQueryChange} />
                             </div>
                             <div className="type-of-node filter-div">
-                                <IconBar allIcons = {this.allIcons} updateIcon={this.updateIcon} getIcons={this.getIcons} />
+                                <IconBar updateSelected = {this.updateSelected} allIcons = {this.allIcons} updateIcon={this.updateIcon} getIcons={this.getSelected} />
                             </div>
                             <div className="filter-collection filter-div">
                                 temp for filtering by collection