From d9de5d5dc660d3c859590ece04fee5613621b56e Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Tue, 11 Jun 2019 16:34:53 -0400
Subject: techincally things are working but i think i have done some bad
 things

---
 src/client/views/search/IconBar.tsx | 185 +++++++++++++++++++-----------------
 1 file changed, 100 insertions(+), 85 deletions(-)

(limited to 'src')

diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index 9a36e7cdf..3f5d11d8f 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -43,6 +43,13 @@ export class IconBar extends React.Component<IconBarProps> {
     @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 originalFilteredNodes: string[] = this.props.getIcons();
+
+    componentDidMount = () => {
+        //i KNOW this is bad i just can't get this to re render eeeeeeeek
+        this.forceUpdate();
+    }
+
     //gets ref associated with given string
     @action.bound
     getRef = (value: string) => {
@@ -133,7 +140,7 @@ export class IconBar extends React.Component<IconBarProps> {
 
     //checks if option is selected based on the attribute data-selected
     @action.bound
-    isRefSelected(ref: React.RefObject<HTMLDivElement>) {
+    isRefSelected = (ref: React.RefObject<HTMLDivElement>) => {
         if (ref.current) {
             if (ref.current.getAttribute("data-selected") === "true") {
                 return true;
@@ -142,104 +149,112 @@ export class IconBar extends React.Component<IconBarProps> {
         }
     }
 
-    render() {
+    getInitialStatus = (type: string) => {
+        console.log(this.getRef(type))
+        if (this.originalFilteredNodes.includes(type)) {
+            return "true"
+        }
+        return "false"
+    }
 
+    render() {
+        console.log("rendering")
         return (
-                <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="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={"false"}
+                            onClick={() => { this.onClick(DocTypes.NONE) }}>
+                            <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
                         </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 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={this.getInitialStatus(DocTypes.PDF)}
+                            onClick={() => { this.onClick(DocTypes.PDF) }}>
+                            <FontAwesomeIcon className="fontawesome-icon" style={{ order: 0 }} icon={faFilePdf} />
                         </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 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={this.getInitialStatus(DocTypes.HIST)}
+                            onClick={() => { this.onClick(DocTypes.HIST) }}>
+                            <FontAwesomeIcon className="fontawesome-icon" style={{ order: 1 }} icon={faChartBar} />
                         </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 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={this.getInitialStatus(DocTypes.COL)}
+                            onClick={() => { this.onClick(DocTypes.COL) }}>
+                            <FontAwesomeIcon className="fontawesome-icon" style={{ order: 2 }} icon={faObjectGroup} />
                         </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 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={this.getInitialStatus(DocTypes.IMG)}
+                            onClick={() => { this.onClick(DocTypes.IMG) }}>
+                            <FontAwesomeIcon className="fontawesome-icon" style={{ order: 3 }} icon={faImage} />
                         </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 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={this.getInitialStatus(DocTypes.VID)}
+                            onClick={() => { this.onClick(DocTypes.VID) }}>
+                            <FontAwesomeIcon className="fontawesome-icon" style={{ order: 4 }} icon={faFilm} />
                         </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 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={this.getInitialStatus(DocTypes.WEB)}
+                            onClick={() => { this.onClick(DocTypes.WEB) }}>
+                            <FontAwesomeIcon className="fontawesome-icon" style={{ order: 5 }} icon={faGlobeAsia} />
                         </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 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={this.getInitialStatus(DocTypes.LINK)}
+                            onClick={() => { this.onClick(DocTypes.LINK) }}>
+                            <FontAwesomeIcon className="fontawesome-icon" style={{ order: 6 }} icon={faLink} />
                         </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 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={this.getInitialStatus(DocTypes.AUDIO)}
+                            onClick={() => { this.onClick(DocTypes.AUDIO) }}>
+                            <FontAwesomeIcon className="fontawesome-icon" style={{ order: 7 }} icon={faMusic} />
                         </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 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={this.getInitialStatus(DocTypes.TEXT)}
+                            onClick={() => { this.onClick(DocTypes.TEXT) }}>
+                            <FontAwesomeIcon className="fontawesome-icon" style={{ order: 8 }} icon={faStickyNote} />
                         </div>
+                        <div className="filter-description">Text</div>
                     </div>
                 </div>
+            </div>
         )
     }
 }
-- 
cgit v1.2.3-70-g09d2