making words required almost works (logic is there)

6 files changed, 167 insertions, 94 deletions

diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index eb7b45754..98b4e50a6 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -1,17 +1,23 @@
 @import "../globalCssVariables";
 
 
-.icon-bar{
+.icon-bar {
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     height: 40px;
     width: 100%;
     flex-wrap: wrap;
-    font-size: 2em;
+    // font-size: 2em;
+}
+
+.icon-title {
+    color: $light-color;
+    text-transform: uppercase;
+    padding: 5px;
 }
 
-.type-icon{
+.type-icon {
     height: 50px;
     width: 50px;
     color: $light-color;
@@ -19,22 +25,50 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    // background-color: "#121721";
+    -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;
 }
 
-.type-icon.selected{
+.type-icon.selected {
     background-color: $alt-accent;
 }
 
-.type-icon.not-selected{
+.type-icon.not-selected {
     background-color: transparent;
 }
 
-.fontawesome-icon{
+.fontawesome-icon {
     height: 28px;
     width: 28px;
 }
 
-.type-icon:hover{
+.type-icon:hover {
+    transform: scale(1.1);
     background-color: $alt-accent;
+
+    +.filter-description {
+        opacity: 1;
+    }
+}
+
+.type-outer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 50px;
+}
+
+.filter-description {
+    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;
 }
\ No newline at end of file
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index bf98e1ef3..9a36e7cdf 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -145,80 +145,101 @@ export class IconBar extends React.Component<IconBarProps> {
     render() {
 
         return (
-            <div>
-                <div className="icon-bar">
-                    <div
-                        className={"type-icon none"}
-                        ref={this.noneRef}
-                        data-selected={"true"}
-                        onClick={() => { this.onClick(DocTypes.NONE) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.pdfRef) ? "selected" : "not-selected")}
-                        ref={this.pdfRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.PDF) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 0 }} icon={faFilePdf} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.histRef) ? "selected" : "not-selected")}
-                        ref={this.histRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.HIST) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 1 }} icon={faChartBar} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.colRef) ? "selected" : "not-selected")}
-                        ref={this.colRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.COL) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 2 }} icon={faObjectGroup} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.imgRef) ? "selected" : "not-selected")}
-                        ref={this.imgRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.IMG) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 3 }} icon={faImage} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.vidRef) ? "selected" : "not-selected")}
-                        ref={this.vidRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.VID) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 4 }} icon={faFilm} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.webRef) ?"selected" : "not-selected")}
-                        ref={this.webRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.WEB) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 5 }} icon={faGlobeAsia} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.linkRef) ?"selected" : "not-selected")}
-                        ref={this.linkRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.LINK) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 6 }} icon={faLink} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.audioRef) ? "selected" : "not-selected")}
-                        ref={this.audioRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.AUDIO) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 7 }} icon={faMusic} />
-                    </div>
-                    <div
-                        className={"type-icon " + (this.isRefSelected(this.textRef) ?"selected" : "not-selected")}
-                        ref={this.textRef}
-                        data-selected={"false"}
-                        onClick={() => { this.onClick(DocTypes.TEXT) }}>
-                        <FontAwesomeIcon className="fontawesome-icon" style={{ order: 8 }} icon={faStickyNote} />
+                <div>
+                    <div className="icon-title">Filter by type of node</div>
+                    <div className="icon-bar">
+                        <div className="type-outer">
+                            <div className={"type-icon none"}
+                                ref={this.noneRef}
+                                data-selected={"true"}
+                                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 " + (this.isRefSelected(this.pdfRef) ? "selected" : "not-selected")}
+                                ref={this.pdfRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.PDF) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 0 }} icon={faFilePdf} />
+                            </div>
+                            <div className="filter-description">PDF</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.histRef) ? "selected" : "not-selected")}
+                                ref={this.histRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.HIST) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 1 }} icon={faChartBar} />
+                            </div>
+                            <div className="filter-description">Histogram</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.colRef) ? "selected" : "not-selected")}
+                                ref={this.colRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.COL) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 2 }} icon={faObjectGroup} />
+                            </div>
+                            <div className="filter-description">Collection</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.imgRef) ? "selected" : "not-selected")}
+                                ref={this.imgRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.IMG) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 3 }} icon={faImage} />
+                            </div>
+                            <div className="filter-description">Image</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.vidRef) ? "selected" : "not-selected")}
+                                ref={this.vidRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.VID) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 4 }} icon={faFilm} />
+                            </div>
+                            <div className="filter-description">Video</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.webRef) ? "selected" : "not-selected")}
+                                ref={this.webRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.WEB) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 5 }} icon={faGlobeAsia} />
+                            </div>
+                            <div className="filter-description">Web</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.linkRef) ? "selected" : "not-selected")}
+                                ref={this.linkRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.LINK) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 6 }} icon={faLink} />
+                            </div>
+                            <div className="filter-description">Link</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.audioRef) ? "selected" : "not-selected")}
+                                ref={this.audioRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.AUDIO) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 7 }} icon={faMusic} />
+                            </div>
+                            <div className="filter-description">Audio</div>
+                        </div>
+                        <div className="type-outer">
+                            <div className={"type-icon " + (this.isRefSelected(this.textRef) ? "selected" : "not-selected")}
+                                ref={this.textRef}
+                                data-selected={"false"}
+                                onClick={() => { this.onClick(DocTypes.TEXT) }}>
+                                <FontAwesomeIcon className="fontawesome-icon" style={{ order: 8 }} icon={faStickyNote} />
+                            </div>
+                            <div className="filter-description">Text</div>
+                        </div>
                     </div>
                 </div>
-            </div>
         )
     }
 }
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 4ce40614f..48c8f4af1 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -57,10 +57,6 @@
     height: 40px;
 }
 
-// #option {
-//     height: 20px;
-// }
-
 .searchBox-results {
     top: 300px;
     display: flex;
@@ -68,8 +64,16 @@
     margin-right: 72px;
 }
 
+.filter-collection{
+    height: 20px;
+}
+
+.where-in-doc{
+    height: 20px;
+}
+
 .type-of-node{
-    height: 60px;
+    height: 90px;
 }
 
 .required-words{
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 329643464..67122b320 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -27,6 +27,7 @@ import { IconBar } from './IconBar';
 @observer
 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;
@@ -42,6 +43,20 @@ export class SearchBox extends React.Component {
     @action
     submitSearch = async () => {
         let query = this._searchString;
+
+        if(!this._wordStatus){
+            let oldWords = query.split(" ");
+            let newWords: string[] = [];
+            console.log(oldWords)
+            oldWords.forEach(word => {
+                let newWrd = "+" + word;
+                newWords.push(newWrd);
+            })
+            console.log(newWords)
+
+            query = newWords.join(" ")
+        }
+
         //gets json result into a list of documents that can be used
         const results = await this.getResults(query);
 
@@ -185,8 +200,9 @@ export class SearchBox extends React.Component {
         return toReturn;
     }
 
-    handleWordQueryChange = (value: boolean) => {
-        this._wordStatus = value;
+    //if true, any keywords can be used. if false, all keywords are required.
+    handleWordQueryChange = () => {
+        this._wordStatus = !this._wordStatus;
     }
 
     @action.bound
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index 601b9a1dc..cccbf30fc 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -1,9 +1,5 @@
 @import "../globalCssVariables";
 
-.toggle{
-    
-}
-
 .toggle-title{
     display: flex;
     align-items: center;
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index 2fc9c0040..5ede368d6 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -8,7 +8,8 @@ import * as anime from 'animejs';
 export interface ToggleBarProps {
     //false = right, true = left
     // status: boolean;
-    changeStatus(value: boolean): void;
+    changeStatus(): void;
+    // changeStatus(value: boolean): void;
     optionOne: string;
     optionTwo: string;
 }
@@ -53,8 +54,9 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
 
     @action.bound
     onclick() {
-        this._status = !this._status;
-        this.props.changeStatus(this._status);
+        // this._status = !this._status;
+        // this.props.changeStatus(this._status);
+        this.props.changeStatus();
         this.timeline.play();
         this.timeline.reverse();
     }