Add SearchBar for layers selection (Cloud-CV#400)

* Add SearchBar for layers selection

* Remove commented code

* Add new line to the end of css file

* Fix searchbar error with only one letter pattern

* Prettifying

* Fix bug with no search results

Author: Jatana

.eslintrc

@@ -16,7 +16,8 @@
         "jsPlumbUtil": false,
     },
   "rules": {
-    "max-len": [1, 150, 2, {ignoreComments: true}]
+    "max-len": [1, 150, 2, {ignoreComments: true}],
+    "no-console": "off"
   },
   "extends": ["eslint:recommended", "plugin:react/recommended"]
 }

ide/static/css/searchbar_style.css

@@ -0,0 +1,36 @@
+.insert-layer-title {
+	position: relative;
+	margin-top: 10px !important;
+	margin-bottom: 21px !important;
+}
+
+#layer-search-icon {
+	position: absolute;
+	left: -5px;
+	top: 31px;
+}
+
+#layer-search-icon:hover {
+	cursor: pointer;
+}
+
+#layer-search-input {
+	position: absolute;
+	top: 36px;
+	left: 20px;
+	font-size: 15px;
+	background: none;
+	border: none;
+	color: rgb(69, 80, 97);
+	outline: none;
+	opacity: 1;
+	transition: 0.3s;
+}
+
+.layer-search-input-selected {
+	opacity: 1 !important;
+}
+
+.matched-search-char {
+	color: rgb(69, 80, 97);
+}

ide/static/css/style.css

@@ -1206,4 +1206,4 @@ input[type="file"] {
     background: white;
     transform: rotate(-45deg)
   }
-}
+}

ide/static/js/content.js

@@ -1275,7 +1275,11 @@ class Content extends React.Component {
              />
              <h5 className="sidebar-heading">LOGIN</h5>
              <Login setUserId={this.setUserId} setUserName={this.setUserName}></Login>
-             <h5 className="sidebar-heading">INSERT LAYER</h5>
+             <h5 className="sidebar-heading insert-layer-title">
+              <input id="layer-search-input" placeholder="Search for layer"></input>
+              <div id="insert-layer-sign">INSERT LAYER</div>
+              <i className="material-icons" id="layer-search-icon">search</i>
+             </h5>
              <Pane
              handleClick = {this.handleClick}
              setDraggingLayer = {this.setDraggingLayer}

ide/static/js/layer.js

@@ -46,6 +46,7 @@ class Layer extends React.Component {
     let highlightUser = null;
     let highlightClass = '';
     let highlightColor = '#000';
+ 
 
     if(this.props.layer.highlight && this.props.layer.highlight.length > 0) {
       highlightClass = 'highlighted';

ide/static/js/pane.js

@@ -26,7 +26,61 @@ class Pane extends React.Component {
         }
         this.setState(obj);
     }
-    render(){
+    componentDidMount() {
+      let filter = (pattern) => {
+        let layerCompability = (searchQuery, layerName) => {
+          let j = 0;
+          let seq = [];
+          let full_match = true;
+          for (let i = 0; i < searchQuery.length; i++) {
+            while (j < layerName.length && layerName[j].toLowerCase() != searchQuery[i].toLowerCase()) {
+              seq[j] = false;
+              j++;
+            }
+            if (j < layerName.length && layerName[j].toLowerCase() == searchQuery[i].toLowerCase()) {
+              seq[j] = true;
+              j++;
+            } else {
+              full_match = false;
+            }
+          }
+          return {
+            match: seq,
+            full_match: full_match 
+          };
+        }
+        for (let elem of $('.drowpdown-button')) {
+          let sub = elem.innerText;
+          if (!sub) continue;
+          let resp = layerCompability(pattern, sub);
+          if (resp.full_match) {
+            elem.style.display = 'block';
+            let final = '';
+            for (let i = 0; i < sub.length; i++) {
+              if (resp.match[i]) {
+                final += '<span class="matched-search-char">' + sub[i] + '</span>'
+              } else {
+                final += sub[i];
+              }
+            }
+            elem.innerHTML = final;
+          } else {
+            elem.style.display = 'none';
+          }
+        }
+        for (let elem of $('.panel-heading')) {
+          let _p = pattern ? 'false' : 'true';
+          if (elem.getAttribute('aria-expanded') == _p) {
+            elem.click();
+          }
+        }
+      }
+      $('#layer-search-input').keyup((e) => {
+        filter(e.target.value); 
+      });
+    }
+
+    render() {
       return (
         <div className="panel-group" id="menu" role="tablist" aria-multiselectable="true">
               <div className="panel panel-default">

ide/static/js/tabs.js

@@ -35,4 +35,4 @@ Tabs.propTypes = {
   selectedPhase: React.PropTypes.number
 };
 
-export default Tabs;
+export default Tabs;

ide/templates/index.html

@@ -9,6 +9,9 @@
   <link rel="stylesheet" type="text/css" href="/static/fonts/font.css"/>
   <link rel="stylesheet" type="text/css" href="/static/lib/bootstrap-3.3.6-dist/css/bootstrap-social.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="/static/css/searchbar_style.css">
 
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110495971-1"></script>