Merge 3dab59b into 0c41f7a

Cloud-CV · Dec 10, 2018 · 189cd4d · 189cd4d
2 parents 0c41f7a + 3dab59b
commit 189cd4d
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 22 deletions.
diff --git a/ide/static/css/style.css b/ide/static/css/style.css
@@ -25,18 +25,18 @@ body {
   height: calc(100% - 50px);
   overflow-y: auto;
 }
-#sidebar-content{
+#sidebar-content {
   padding: 0 5% 0 5%;
 }
 
-.sidebar-heading{
+.sidebar-heading {
   font-family: 'ProximaNova-Bold', sans-serif;
   color: #9ea2a9;
   margin: 0px;
   padding: 10px 0px 10px 0px;
 }
 
-.sidebar-badge{
+.sidebar-badge {
   padding: 10px;
   border-radius: 3px;
   margin-right: 10px;
@@ -132,7 +132,28 @@ input#netName.hidden {
   right: 4%;
 }
 
-.canvas-icon > p{
+#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;
+}
+
+.canvas-icon > p {
   margin: 0px;
   color: #9ea2a9;
 }
@@ -1213,4 +1234,4 @@ input[type="file"] {
     background: white;
     transform: rotate(-45deg)
   }
-}
+}
diff --git a/ide/static/img/zoo/vnect_net.png b/ide/static/img/zoo/vnect_net.png
diff --git a/ide/static/js/canvas.js b/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 = [];
@@ -415,11 +444,12 @@ 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 +462,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,12 +531,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 = {
+  deleteMultipleLayers: React.PropTypes.func,
+  selectedLayers:React.PropTypes.array,
   nextLayerId: React.PropTypes.number,
   selectedPhase: React.PropTypes.number,
   net: React.PropTypes.object.isRequired,

diff --git a/ide/static/js/content.js b/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);
@@ -488,13 +490,10 @@ class Content extends React.Component {
       this.setState({ net });
     }
   }
-  deleteLayer(layerId, publishUpdate=true) {
+ 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);
@@ -507,6 +506,14 @@ class Content extends React.Component {
       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
@@ -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,37 @@ 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 +1376,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}

diff --git a/ide/static/js/layer.js b/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'
@@ -116,10 +140,13 @@ Layer.propTypes = {
   mouseUp: React.PropTypes.func,
   layer: React.PropTypes.object,
   net: React.PropTypes.object,
+  addLayerToSelectedList:React.PropTypes.func,
+  removeLayerFromSelectedList:React.PropTypes.func,
   addSharedComment: React.PropTypes.func,
   isShared: React.PropTypes.bool,
   isForked: React.PropTypes.bool,
-  changeCommentOnLayer: React.PropTypes.func
+  changeCommentOnLayer: React.PropTypes.func,
+  selectedLayer: React.PropTypes.string
 };
 
 export default Layer;