Deleting multiple layers issue #317

ide/static/css/style.css

@@ -13,6 +13,27 @@ body {
     margin: 0;
 }
 
+#deleteSelected {
+  margin: 0px;
+  position: fixed;
+  bottom: 15%;
+  right: 3.5%;
+}
+
+#deleteSelected > button {
+  border-radius: 15px;
+  box-shadow: 0px 0px 30px #5C5960;
+  -o-box-shadow: 0px 0px 15px #5C5960;
+  -webkit-box-shadow: 0px 0px 15px #5C5960;
+  -moz-box-shadow: 0px 0px 15px #5C5960;
+}
+
+.selected-layer {
+  -webkit-box-shadow: 0px 0px 0px 6px #4483DA;
+  -moz-box-shadow: 0px 0px 0px 6px #4483DA;
+  box-shadow: 0px 0px 0px 6px #4483DA;
+}
+
 #sidebar {
     position: fixed;
     top: 0px;
@@ -1213,4 +1234,4 @@ input[type="file"] {
     background: white;
     transform: rotate(-45deg)
   }
-}
+}

ide/static/js/canvas.js

@@ -10,7 +10,11 @@ import $ from 'jquery'
 class Canvas extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      selectCount: 0
+    }
     this.allowDrop = this.allowDrop.bind(this);
+    this.deleteLayers = this.deleteLayers.bind(this);
     this.drop = this.drop.bind(this);
     this.scrollCanvas = this.scrollCanvas.bind(this);
     this.clickCanvas = this.clickCanvas.bind(this);
@@ -380,6 +384,31 @@ class Canvas extends React.Component {
     }
     this.props.setDraggingLayer(null);
   }
+  addLayerToSelectedList(id) {
+    if(this.props.selectedLayer != id) {
+      this.props.selectedLayers.push(id);
+      this.setState({
+        selectCount: this.state.selectCount+1
+      });
+    }
+  }
+  removeLayerFromSelectedList(id) {
+    if(this.props.selectedLayer != id) {
+      var index = this.props.selectedLayers.indexOf(id);
+      if (index > -1) {
+          this.props.selectedLayers.splice(index, 1);
+          this.setState({
+            selectCount: this.state.selectCount-1
+          });
+      }
+    }
+  }
+  deleteLayers() {
+    this.props.deleteMultipleLayers()
+    this.setState({
+      selectCount: 0
+    });
+  }
   render() {
     const layers = [];
     const errors = [];
@@ -420,6 +449,8 @@ class Canvas extends React.Component {
       if ((layer.info.phase === this.props.selectedPhase) || (layer.info.phase === null)) {
         layers.push(
           <Layer
+            addLayerToSelectedList={(id) => this.addLayerToSelectedList(id)}
+            removeLayerFromSelectedList={(id) => this.removeLayerFromSelectedList(id)}
             id={layerId}
             key={layerId}
             type={layer.info.type}
@@ -432,6 +463,7 @@ class Canvas extends React.Component {
             layer={layer}
             net={this.props.net}
             addSharedComment={this.props.addSharedComment}
+            selectedLayer={this.props.selectedLayer}
             isShared={this.props.isShared}
             isForked={this.props.isForked}
             changeCommentOnLayer={this.props.changeCommentOnLayer}
@@ -500,13 +532,46 @@ class Canvas extends React.Component {
             <span className="glyphicon glyphicon glyphicon-minus" aria-hidden="true"></span>
         </button>
       </div>
+      <div className='main-container' style={{ visibility:this.state.selectCount > 0? 'visible': 'hidden'}} id="deleteSelected" >
+      <button
+        type="button"
+        className="btn btn-block deleteLayerButton sidebar-heading"
+        data-toggle="modal" data-target="#prompt"
+        >DELETE { this.state.selectCount > 1? this.state.selectCount+' LAYERS': 'LAYER' }
+      </button>
+      </div>
+        <div className="modal fade" id="prompt" tabIndex="-1" role="dialog" aria-labelledby="promptLabel" aria-hidden="true">
+          <div className="modal-dialog">
+            <div className="modal-content">
+              <div className="modal-header">
+                <button type="button" className="close" data-dismiss="modal">
+                <span aria-hidden="true">&times;</span>
+                <span className="sr-only">Close</span></button>
+                <h4 className="modal-title" id="promptLabel"><strong>Are You Sure ?</strong></h4>
+              </div>
+              <div className="modal-body">
+                THIS ACTION WILL DELETE { this.state.selectCount > 1? this.state.selectCount+' LAYERS': 'A LAYER' }
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-warning" data-dismiss="modal">Cancel</button>
+                <button onClick={() => this.deleteLayers()}
+                data-dismiss="modal"
+                type="button" className="btn btn-danger">
+                DELETE
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
 }
 
 Canvas.propTypes = {
   nextLayerId: React.PropTypes.number,
+  deleteMultipleLayers: React.PropTypes.func,
+  selectedLayers: React.PropTypes.array,
   selectedPhase: React.PropTypes.number,
   net: React.PropTypes.object.isRequired,
   modifyLayer: React.PropTypes.func,

ide/static/js/content.js

@@ -37,6 +37,7 @@ class Content extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      selectedLayers: [],
       net: {},
       net_name: 'Untitled',
       networkId: 0,
@@ -70,6 +71,7 @@ class Content extends React.Component {
     this.adjustParameters = this.adjustParameters.bind(this);
     this.modifyLayerParams = this.modifyLayerParams.bind(this);
     this.deleteLayer = this.deleteLayer.bind(this);
+    this.deleteMultipleLayers = this.deleteMultipleLayers.bind(this);
     this.exportPrep = this.exportPrep.bind(this);
     this.exportNet = this.exportNet.bind(this);
     this.importNet = this.importNet.bind(this);
@@ -489,31 +491,36 @@ class Content extends React.Component {
     }
   }
   deleteLayer(layerId, publishUpdate=true) {
-    const net = this.state.net;
-    const input = net[layerId].connection.input;
-    const output = net[layerId].connection.output;
-    const layerIdNum = parseInt(layerId.substring(1,layerId.length)); //numeric value of the layerId
-    const nextLayerId = this.state.nextLayerId - 1 == layerIdNum ? layerIdNum : this.state.nextLayerId;
-    //if last layer was deleted nextLayerId is replaced by deleted layer's id
-    var totalParameters = this.state.totalParameters;
-    let index;
-    totalParameters -= this.getLayerParameters(net[layerId], net);
-    delete net[layerId];
-    input.forEach(inputId => {
-      index = net[inputId].connection.output.indexOf(layerId);
-      net[inputId].connection.output.splice(index, 1);
-    });
-    output.forEach(outputId => {
-      index = net[outputId].connection.input.indexOf(layerId);
-      net[outputId].connection.input.splice(index, 1);
-    });
-    this.setState({ net, selectedLayer: null, nextLayerId: nextLayerId, totalParameters: totalParameters });
-    // if model is in RTC mode send updates to respective sockets
-    // to avoid infinite loop of deletion over multiple session
-    if (this.state.isShared && !this.state.isForked && publishUpdate == true) {
-      this.performSharedDelete(net, layerId, nextLayerId);
-    }
-  }
+   const net = this.state.net;
+   const input = net[layerId].connection.input;
+   const output = net[layerId].connection.output;
+   var totalParameters = this.state.totalParameters;
+   let index;
+   totalParameters -= this.getLayerParameters(net[layerId], net);
+   delete net[layerId];
+   input.forEach(inputId => {
+     index = net[inputId].connection.output.indexOf(layerId);
+     net[inputId].connection.output.splice(index, 1);
+   });
+   output.forEach(outputId => {
+     index = net[outputId].connection.input.indexOf(layerId);
+     net[outputId].connection.input.splice(index, 1);
+   });
+   let layersIds = Object.keys(net);
+   //if a layer was deleted nextLayerId is replaced by index of last layer id in the net
+   let nextLayerId;
+   if(layersIds[layersIds.length - 1]) {
+     nextLayerId = parseInt(layersIds[layersIds.length - 1].substring(1,layersIds.length))+1;
+   } else {
+     nextLayerId = 0;
+   }
+   this.setState({ net, selectedLayer: null, nextLayerId: nextLayerId, totalParameters: totalParameters });
+   // if model is in RTC mode send updates to respective sockets
+   // to avoid infinite loop of deletion over multiple session
+   if (this.state.isShared && !this.state.isForked && publishUpdate == true) {
+     this.performSharedDelete(net, layerId, nextLayerId);
+   }
+ }
 
   updateLayerShape(net, layerId) {
     const netData = JSON.parse(JSON.stringify(net));
@@ -1113,7 +1120,7 @@ class Content extends React.Component {
       <a target="_blank" href="https://github.com/Cloud-CV/Fabrik/blob/master/docs/source/tested_models.md"> here</a>.
       <br />
       <b>Q:</b> What do the Train/Test buttons mean?<br />
-      <b>A:</b> They are two different modes of your model: 
+      <b>A:</b> They are two different modes of your model:
       Train and Test - respectively for training your model with data and testing how and if it works.<br />
       <b>Q:</b> What does the import fuction do?<br />
       <b>A:</b> It allows you to import your previously created models in Caffe (.protoxt files),
@@ -1127,7 +1134,7 @@ class Content extends React.Component {
       <b>A:</b> Please see the instructions listed
       <a target="_blank" href="https://github.com/Cloud-CV/Fabrik/blob/master/README.md"> here</a>
       <br /><br />
-                         
+
       <b>If you have anymore questions, please visit Fabrik's Github page available
        <a target="_blank" href="https://github.com/Cloud-CV/Fabrik"> here</a> for more information.</b>
       </p>);
@@ -1282,6 +1289,38 @@ class Content extends React.Component {
       this.addNewLayer(layer);
     }
   }
+
+  deleteMultipleLayers() {
+    var net = this.state.net;
+    var totalParameters = this.state.totalParameters;
+    // var layerIdNum;
+    var _nextLayerId = this.state.nextLayerId;
+    if(this.state.selectedLayers.length > 0) {
+      this.state.selectedLayers.forEach((layerId)=>{
+        const input = net[layerId].connection.input;
+        const output = net[layerId].connection.output;
+        let index;
+        totalParameters -= this.getLayerParameters(net[layerId], net);
+        delete net[layerId];
+        input.forEach(inputId => {
+          index = net[inputId].connection.output.indexOf(layerId);
+          net[inputId].connection.output.splice(index, 1);
+        });
+        output.forEach(outputId => {
+          index = net[outputId].connection.input.indexOf(layerId);
+          net[outputId].connection.input.splice(index, 1);
+        });
+      });
+      var layersIds = Object.keys(net);
+      if(layersIds[layersIds.length - 1]) {
+        _nextLayerId = parseInt(layersIds[layersIds.length - 1].substring(1,layersIds.length))+1;
+      } else {
+        _nextLayerId = 0;
+      }
+      this.setState({ net, nextLayerId: _nextLayerId, totalParameters: totalParameters });
+      this.state.selectedLayers.splice(0,this.state.selectedLayers.length);
+    }
+  }
   render() {
     let loader = null;
     if (this.state.load) {
@@ -1338,6 +1377,8 @@ class Content extends React.Component {
           {loader}
           <Canvas
             net={this.state.net}
+            deleteMultipleLayers={this.deleteMultipleLayers}
+            selectedLayers={this.state.selectedLayers}
             rebuildNet={this.state.rebuildNet}
             addNewLayer={this.addNewLayer}
             nextLayerId={this.state.nextLayerId}

ide/static/js/layer.js

@@ -6,9 +6,12 @@ import AddCommentModal from './addCommentModal'
 class Layer extends React.Component {
   constructor(props) {
     super(props);
+    this.defaultColor = data[this.props.type].color;
     this.state = {
       addCommentModalIsOpen: false
     }
+    this.leftClick = this.leftClick.bind(this);
+    this.select = this.select.bind(this);
     this.onAddComment = this.onAddComment.bind(this);
     this.onCloseCommentModal = this.onCloseCommentModal.bind(this);
     this.doSharedUpdate = this.doSharedUpdate.bind(this);
@@ -39,14 +42,33 @@ class Layer extends React.Component {
   openCommentSidebar() {
     this.props.changeCommentOnLayer(this.props.id);
   }
+  select(event,id) {
+    event.preventDefault();
+    if(!this.props.selectedLayer) {
+      if(this.state.isSelected) {
+        this.props.removeLayerFromSelectedList(id);
+        this.setState({isSelected: false});
+      } else {
+        this.props.addLayerToSelectedList(id);
+        this.setState({isSelected: true});
+      }
+    }
+  }
+  leftClick(event) {
+    if(this.state.isSelected) {
+      this.setState({isSelected: false});
+      this.props.removeLayerFromSelectedList(this.props.id);
+    }
+    this.props.click(event, this.props.id);
+  }
   render() {
     let comments = [];
     let addCommentModal = null;
     let commentButton = null;
     let highlightUser = null;
     let highlightClass = '';
     let highlightColor = '#000';
- 
+
 
     if(this.props.layer.highlight && this.props.layer.highlight.length > 0) {
       highlightClass = 'highlighted';
@@ -78,19 +100,21 @@ class Layer extends React.Component {
                             </span>
                         </a>);
     }
+    const layerStyle = {
+      top: this.props.top,
+      left: this.props.left,
+      background: this.defaultColor,
+      borderColor: highlightColor
+    }
     return (
       <div
-        className={`layer ${this.props.class} ${highlightClass}`}
+        className={`layer ${this.props.class} ${highlightClass} ${this.state.isSelected?'selected-layer':''}`}
         id={this.props.id}
-        style={{
-          top:this.props.top,
-          left:this.props.left,
-          background: data[this.props.type].color,
-          borderColor: highlightColor
-        }}
+        style={layerStyle}
         data-type={this.props.type}
-        onClick={(event) => this.props.click(event, this.props.id)}
+        onClick={(event) => this.leftClick(event)}
         onMouseEnter={(event) => this.props.hover(event, this.props.id)}
+        onContextMenu={(event) => this.select(event, this.props.id)}
         onMouseUp={(event) => this.props.mouseUp(event, this.props.id)}
         data-tip='tooltip'
         data-for='getContent'
@@ -117,8 +141,11 @@ Layer.propTypes = {
   layer: React.PropTypes.object,
   net: React.PropTypes.object,
   addSharedComment: React.PropTypes.func,
+  addLayerToSelectedList: React.PropTypes.func,
+  removeLayerFromSelectedList: React.PropTypes.func,
   isShared: React.PropTypes.bool,
   isForked: React.PropTypes.bool,
+  selectedLayer: React.PropTypes.string,
   changeCommentOnLayer: React.PropTypes.func
 };