GCI "Filter layers that are exclusive to selected frameworks"

ide/static/css/searchbar_style.css

@@ -1,23 +1,24 @@
 .insert-layer-title {
 	position: relative;
-	margin-top: 10px !important;
-	margin-bottom: 21px !important;
 }
 
 #layer-search-icon {
-	position: absolute;
+	position: relative;
 	left: -5px;
-	top: 31px;
+	top: 0px;
+	float: left;
 }
 
 #layer-search-icon:hover {
 	cursor: pointer;
 }
 
 #layer-search-input {
-	position: absolute;
-	top: 36px;
-	left: 20px;
+	position: relative;
+	top: 0px;
+	left: 0px;
+	width: 60%;
+	height: 25px;
 	font-size: 15px;
 	background: none;
 	border: none;
@@ -27,6 +28,13 @@
 	transition: 0.3s;
 }
 
+.filter-button {
+	height: 24px !important;
+}
+
+.filter-glyphicon {
+	top: 0px;
+}
 .layer-search-input-selected {
 	opacity: 1 !important;
 }

ide/static/css/style.css

@@ -992,6 +992,13 @@ input[type="file"] {
     margin: 0px;
 }
 
+.dropdown-menu .filter{
+    width:88%;
+    font-weight: normal;
+    padding: 0px;
+    margin: 0px;
+}
+
 #sidebar-scroll::-webkit-scrollbar-track
 {
   background-color: #F5F5F5;

ide/static/js/content.js

@@ -15,6 +15,7 @@ import UrlImportModal from './urlImportModal';
 import UserProfile from './UserProfile';
 import UpdateHistoryModal from './updateHistoryModal';
 import CommentSidebar from './CommentSidebar';
+import FilterBar from './filterBar';
 import $ from 'jquery'
 
 const infoStyle = {
@@ -1307,17 +1308,16 @@ class Content extends React.Component {
               updateHistoryModal={this.updateHistoryModal}
              />
              <Login setUserId={this.setUserId} setUserName={this.setUserName}></Login>
-             <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>
+             <h5 className="sidebar-heading">INSERT LAYER</h5>
+             <div className="sidebar-heading">
+             <FilterBar />
+             </div>
              <Pane
              handleClick = {this.handleClick}
              setDraggingLayer = {this.setDraggingLayer}
              />
              <div className="text-center">
-              <Tabs selectedPhase={this.state.selectedPhase} changeNetPhase={this.changeNetPhase} />
+             <Tabs selectedPhase={this.state.selectedPhase} changeNetPhase={this.changeNetPhase} />
              </div>
              <h5 className="sidebar-heading">EXTRAS</h5>
              <a className="btn btn-block extra-buttons text-left" onClick={this.faqModal}>Help</a>

ide/static/js/filterBar.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import $ from 'jquery'
+
+class FilterBar extends React.Component {
+  constructor(props) {
+        super(props);
+        this.changeEvent= this.changeEvent.bind(this);
+    }
+
+changeEvent(cbid) {
+      var kerasLayers = ["RNN_Button", "GRU_Button", "LSTM_Button", "Embed_Button", "ELU_Button", "Sigmoid_Button",
+      "ThresholdedReLU", "ReLU_Button", "PReLU_Button", "Softmax_Button", "BatchNorm_Button", "SELU_Button",
+      "GaussianNoise_Button", "GaussianDropout_Button", "AlphaDropout_Button", "TimeDistributed_Button", "TanH_Button",
+      "Bidirectional_Button", "RepeatVector_Button", "Masking_Button", "Permute_Button", "InnerProduct_Button",
+      "Deconvolution_Button", "Regularization_Button", "Softsign_Button", "Upsample_Button", "Pooling_Button",
+      "LocallyConnected_Button", "Input_Button", "Convolution_Button", "LRN_Button", "DepthwiseConv_Button", "Flatten_Button",
+      "Reshape_Button", "Concat_Button", "Softplus_Button", "HardSigmoid_Button", "Dropout_Button", "Eltwise_Button"];
+
+      var tensorFlowLayers = ["Input_Button", "Convolution_Button", "Pooling_Button", "DepthwiseConv_Button", "InnerProduct_Button",
+      "LRN_Button", "Concat_Button", "Flatten_Button", "BatchNorm_Button", "Deconvolution_Button", "Sigmoid_Button", 
+      "Softplus_Button", "Softsign_Button", "ELU_Button", "ReLU_Button", "Softmax_Button", "TanH_Button", "SELU_Button",
+      "Dropout_Button", "Eltwise_Button"];
+
+      var caffeLayers = ["ImageData_Button", "HDF5Data_Button", "HDF5Output_Button", "Input_Button", "WindowData_Button",
+      "MemoryData_Button", "DummyData_Button", "Convolution_Button", "Pooling_Button", "SPP_Button", "Deconvolution_Button",
+      "Recurrent_Button", "RNN_Button", "LSTM_Button", "LRN_Button", "MVN_Button", "BatchNorm_Button",
+      "InnerProduct_Button", "Dropout_Button", "Embed_Button", "ReLU_Button", "PReLU_Button", "ELU_Button",
+      "Sigmoid_Button", "TanH_Button", "AbsVal_Button", "Power_Button", "Exp_Button", "Log_Button", "BNLL_Button",
+      "Threshold_Button", "Bias_Button", "Scale_Button", "Flatten_Button", "ThresholdedReLU", "Python_Button",
+      "Reshape_Button", "BatchReindex_Button", "Split_Button", "Concat_Button", "Eltwise_Button", "Filter_Button",
+      "Reduction_Button", "Silence_Button", "ArgMax_Button", "Softmax_Button", "MultinomialLogisticLoss_Button",
+      "InfogainLoss_Button", "SoftmaxWithLoss_Button", "EuclideanLoss_Button", "HingeLoss_Button", "Slice_Button",
+      "SigmoidCrossEntropyLoss_Button", "Accuracy_Button", "ContrastiveLoss_Button", "Data_Button", "Crop_Button"];
+      var filterCheckBox_Keras = document.getElementById("filterCheckBox_Keras");
+      var filterCheckBox_TensorFlow = document.getElementById("filterCheckBox_TensorFlow");
+      var filterCheckBox_Caffe = document.getElementById("filterCheckBox_Caffe");
+      var visible = [];
+
+    let checkBox = document.getElementById(cbid);
+    checkBox.checked = !checkBox.checked;
+
+      if (filterCheckBox_Keras.checked == false & filterCheckBox_TensorFlow.checked == false & filterCheckBox_Caffe.checked == false) {
+        for (let elem of $('.drowpdown-button')) {
+        elem.classList.remove("hide");
+        }            
+      }
+      if (filterCheckBox_Keras.checked == true) {
+         visible = visible.concat(kerasLayers);
+      }
+      if (filterCheckBox_TensorFlow.checked == true) {
+         visible = visible.concat(tensorFlowLayers);
+      }
+      if (filterCheckBox_Caffe.checked == true) {
+         visible = visible.concat(caffeLayers);
+      }
+
+            for (let elem of $('.drowpdown-button')) {
+                for (let j = 0; j < visible.length; j++) {
+                let id = elem.id;
+                if (id == visible[j]) {
+                    elem.classList.remove("hide");
+                    j = visible.length + 1;
+                }
+                else {
+                elem.classList.add("hide");
+                }
+            }
+        }
+
+    }
+
+    render() {
+      return (
+            <div>
+              <input id="layer-search-input" placeholder="Search for layer"></input>
+              <i className="material-icons" id="layer-search-icon">search</i>
+              <div className="form-group pull-right">
+                <div className="dropdown">
+                  <button id="topbar-icon" className="btn btn-default dropdown-toggle form-control filter-button" data-toggle="dropdown">
+                    <span className="glyphicon glyphicon-filter filter-glyphicon" aria-hidden="true"></span>
+                  </button>
+                  <ul className="dropdown-menu pull-right">
+                    <li>
+                        <a className="btn" onClick={this.changeEvent.bind(this, "filterCheckBox_Keras")}>
+                        <label className="filter">Keras</label>
+                        <input type="checkBox" id="filterCheckBox_Keras" onClick={this.changeEvent.bind(this, "filterCheckBox_Keras")} />
+                        </a>
+                    </li>
+                    <li>
+                        <a className="btn" onClick={this.changeEvent.bind(this, "filterCheckBox_TensorFlow")}>
+                        <label className="filter">Tensorflow</label>
+                        <input type="checkBox" id="filterCheckBox_TensorFlow" onClick={this.changeEvent.bind(this, "filterCheckBox_TensorFlow")} />
+                        </a>
+                    </li>
+                    <li>
+                        <a className="btn" onClick={this.changeEvent.bind(this, "filterCheckBox_Caffe")}>
+                        <label className="filter">Caffe</label>
+                        <input type="checkBox" id="filterCheckBox_Caffe" onClick={this.changeEvent.bind(this, "filterCheckBox_Caffe")} />
+                        </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+             )
+    }
+}
+export default FilterBar;

ide/static/js/pane.js

@@ -467,10 +467,10 @@ class Pane extends React.Component {
               </div>
         </div>
 
-
       );
   }
 }
+
 Pane.propTypes = {
   handleClick: React.PropTypes.func.isRequired,
   setDraggingLayer: React.PropTypes.func.isRequired

ide/static/js/paneElement.js

@@ -11,7 +11,7 @@ class PaneElement extends React.Component {
   render() {
     return (
       <div
-        className="btn btn-block drowpdown-button"
+        className="btn btn-block drowpdown-button "
         draggable="true"
         onClickCapture={this.props.handleClick}        
         onDragStart={this.drag}

tutorials/adding_new_layers.md

@@ -52,6 +52,7 @@
 
 - Now, add a new line for the layer you just added in ```data.js``` in the section of Activation/Neuron Layer, because this layer belongs to this category.
 - ```<PaneElement handleClick={this.props.handleClick} id="your_layer_id">your_layer_name</PaneElement>``` this line will make your layer visible in Fabrik.
+- Open [filterbar.js](https://github.com/Cloud-CV/Fabrik/blob/master/ide/static/js/filterbar.js) in a text editor, add ```"your_layer_id"``` to 1(or more) of 3 framework filter array ```var KerasLayers = [...]```, ```var TensorFlowLayers = [...]``` or ```var CaffeLayers = [...]```. This should be like this ```var KerasLayers = ["RNN_Button", "GRU_Button", "your_layer_id"]```. This arrays are placed inside ```changeEvent() {}``` function.
 
 ### Adding layer handling to the backend
 
@@ -87,4 +88,4 @@
 
 - Check the new layer inside the category you added it. See if all the parameters are properly displayed and usable as you wanted.
 - If everything is working fine commit your changes and push it to your fork then make a Pull Request.
-- Congratulations! Happy contributing :-)
+- Congratulations! Happy contributing :-)