Fix for #62

app.js

@@ -23,8 +23,8 @@ app.use('/node_modules/bootstrap-select', express.static(__dirname + '/node_modu
 
 var multerInstance = multer({dest:'./uploads/'});
 
-//var APP_PORT = 3000;
-var APP_PORT = 80;
+var APP_PORT = 3000;
+//var APP_PORT = 80;
 
 //get handler for index.html
 function indexGetHandler(req,res){

public/index.html

@@ -13,7 +13,6 @@
   <link rel="stylesheet" href="node_modules/cytoscape-navigator/cytoscape.js-navigator.css" charset="utf-8">
   <link rel="stylesheet" href="node_modules/bootstrap-select/dist/css/bootstrap-select.min.css" charset="utf-8">
   <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
-  <link rel="stylesheet" href="lib/js/bootstrap-color-picker/css/bootstrap-colorpicker.min.css" charset="utf-8">
 
   <!--For debugging-->
   <link rel="stylesheet" href="bin/base.css" charset="utf-8">
@@ -692,8 +691,7 @@ <h3 class="modal-title">Grid Options</h3>
             <div id="colorPickerDiv" class="input-group colorpicker-component">
               <label class="control-label col-sm-4" for="gridSize">Guideline Color:</label>
               <div class="col-sm-8">
-                <input id="colorPickerInput" value="#000000" type="text" class="form-control" />
-                <span id="colorPickerButton" class="input-group-addon"><i></i></span>
+                <input  value="#000000" type="color" class="form-control" />
               </div>
             </div>
           </form>
@@ -741,7 +739,6 @@ <h3 class="modal-title">Grid Options</h3>
 <script src="lib/js/cytoscape-edgeHandles.js" charset="utf-8"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js"></script>
 <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
-<script src="lib/js/bootstrap-color-picker/js/bootstrap-colorpicker.min.js" charset="utf-8"></script>
 
 </body>
 </html>

public/src/css/sass/_notificationStyles.scss

@@ -1,8 +1,5 @@
-[data-notify="container"][class*="alert-pastel-"]
+[data-notify="container"][class*="alert-pathwayMapper-"]
 {
-  background-color: $menuHoverColor;
-  color: #FFFFFF;
-
   .close{
     opacity: 1.0;
     color: #FFFFFF;
@@ -14,13 +11,23 @@
     color: #FFFFFF;
   }
 }
-//[data-notify="container"].alert-pastel-info {
-//  border-left-color: rgb(255, 179, 40);
-//}
+
+[data-notify="container"].alert-pathwayMapper-success
+{
+    background-color: $menuHoverColor;
+      color: #FFFFFF;
+}
+
+[data-notify="container"].alert-pathwayMapper-fail
+{
+  background-color: #ff2644;
+  color: #FFFFFF;
+}
+
 //[data-notify="container"].alert-pastel-danger {
 //  border-left-color: rgb(255, 103, 76);
 //}
 
-[data-notify="container"][class*="alert-pastel-"] > [data-notify="message"] {
+[data-notify="container"][class*="alert-pathwayMapper-"] > [data-notify="message"] {
   //font-weight: 400;
 }

public/src/css/sass/base.scss

@@ -22,12 +22,14 @@ body {
 
 $appContentHeight: 850px;
 
-#colorPickerInput
+input[type="color"]
 {
-  width: 287px;
-  border-top-right-radius: 0px !important;
-  border-bottom-right-radius: 0 !important;
 
+  padding: 2px 2px 2px 2px;
+}
+
+input[type="color"]:hover{
+  cursor: pointer;
 }
 
 #colorPickerButton

public/src/js/AppManager.js

@@ -9,6 +9,7 @@ var regCose = require("../../lib/js/cose-bilkent/src/index.js");
 var grid_guide = require('cytoscape-grid-guide');
 var undoRedo = require('cytoscape-undo-redo');
 var contextMenus = require('cytoscape-context-menus');
+require('bootstrap-select');
 
 
 //Panzoom options
@@ -27,7 +28,6 @@ require('./OtherMenuOperations.js');
 require('./GenomicMenuOperations.js');
 require('./ViewOperationsManager.js');
 require('./GraphUtilities.js');
-require('bootstrap-select');
 
 var QtipManager = require('./QtipManager.js');
 var ContextMenuManager = require('./ContextMenuManager.js');
@@ -37,6 +37,7 @@ var SaveLoadUtilities = require('./SaveLoadUtility.js');
 var CBioPortalAccessor = require('./cBioPortalAccessor.js');
 
 var notify = require('bootstrap-notify');
+window.notificationManager = require('./NotificationFactory');
 
  module.exports = (function()
  {
@@ -362,7 +363,7 @@ var notify = require('bootstrap-notify');
             cy.style().update();
             cy.forceRender();
         });
-        
+
     };
 
     return AppManager;

public/src/js/BackboneViews/GridOptionsView.js

@@ -39,8 +39,6 @@ var gridOptionsView = Backbone.View.extend(
             var tplContent = this.template(templateProperties);
             this.$el.empty();
             this.$el.append(tplContent);
-            this.$el.find('#colorPickerDiv').colorpicker();
-
             this.delegateEvents();
         },
         saveProperties: function(event)
@@ -49,7 +47,7 @@ var gridOptionsView = Backbone.View.extend(
             this.currentProperties.drawGrid = this.$el.find("#showGrid").is(':checked');
             this.currentProperties.guidelines = this.$el.find("#showGuides").is(':checked');
             this.currentProperties.snapToGrid = this.$el.find("#snapToGrid").is(':checked');
-            this.currentProperties.guidelinesStyle.strokeStyle = this.$el.find("#colorPickerInput").val();
+            this.currentProperties.guidelinesStyle.strokeStyle = this.$el.find('input[type="color"]').val();
 
 
             //TODO update grid options
@@ -62,7 +60,7 @@ var gridOptionsView = Backbone.View.extend(
             this.$el.find("#gridSize").val(this.currentProperties.gridSize);
             this.$el.find("#showGrid")[0].checked = this.currentProperties.showGrid;
             this.$el.find("#showGuides")[0].checked = this.currentProperties.showGuides;
-            this.$el.find("#colorPickerInput").val(this.currentProperties.guidelinesStyle.strokeStyle);
+            this.$el.find('input[type="color"]').val(this.currentProperties.guidelinesStyle.strokeStyle);
         },
         defaultLayoutHandler: function(event)
         {

public/src/js/NotificationFactory.js

@@ -0,0 +1,52 @@
+module.exports = (function ($)
+{
+
+    function NotificationFactory()
+    {
+    }
+
+    function mapTypeToCSSStyle(type)
+    {
+        if (type === "success")
+            return "pathwayMapper-success"
+        else if (type === "fail")
+            return "pathwayMapper-fail"
+
+    }
+
+    NotificationFactory.prototype.createNotification = function(message, type)
+    {
+
+        var mappedCSSClass = mapTypeToCSSStyle(type);
+
+        $.notify({
+            // options
+            icon: 'glyphicon glyphicon-ok',
+            message: message
+        },{
+            // settings
+            element: 'body',
+            position: null,
+            type: mappedCSSClass,
+            allow_dismiss: true,
+            newest_on_top: false,
+            showProgressbar: false,
+            placement: {
+                from: "bottom",
+                align: "right"
+            },
+            delay: 0,
+            offset: 20,
+            spacing: 10,
+            z_index: 1031,
+            mouse_over: null,
+            animate: {
+                enter: 'animated fadeInUp',
+                exit: 'animated fadeOut'
+            }
+        });
+    }
+
+    return new NotificationFactory();
+
+})(window.$);

public/src/js/OtherMenuOperations.js

@@ -26,33 +26,6 @@ module.exports = (function()
     //Edit drop down handler
     $(".editDropDown li a").click(function(event)
     {
-        $.notify({
-            // options
-            icon: 'glyphicon glyphicon-ok',
-            message: 'Data is loaded ...',
-        },{
-            // settings
-            element: 'body',
-            position: null,
-            type: "pastel-warning",
-            allow_dismiss: true,
-            newest_on_top: false,
-            showProgressbar: false,
-            placement: {
-                from: "bottom",
-                align: "right"
-            },
-            delay: 0,
-            offset: 20,
-            spacing: 10,
-            z_index: 1031,
-            mouse_over: null,
-            animate: {
-                enter: 'animated fadeInUp',
-                exit: 'animated fadeOut'
-            }
-        });
-
         event.preventDefault();
         var dropdownLinkRole = $(event.target).attr('role');
 

public/src/js/cBioPortalAccessor.js

@@ -48,6 +48,10 @@ module.exports = (function()
                 }
                 callbackFunction(cancerStudies);
             }
+            else if  (request.readyState === XMLHttpRequest.DONE && request.status != 200)
+            {
+                window.notificationManager.createNotification("Error retrieving cancer studies", "fail")
+            }
         };
         request.open("GET", this.GET_ALL_CANCER_STUDIES_URL);
         request.send();
@@ -86,6 +90,10 @@ module.exports = (function()
 
                 callbackFunction(outData);
             }
+            else if (request.readyState === XMLHttpRequest.DONE && request.status != 200)
+            {
+                window.notificationManager.createNotification("Error retrieving genetic profiles", "fail")
+            }
         };
         request.open("GET", this.GET_GENETIC_PROFILES_URL + cancerStudy);
         request.send();
@@ -195,6 +203,10 @@ module.exports = (function()
             if(request.readyState === XMLHttpRequest.DONE && request.status === 200)
             {
                 self.calcAlterationPercentages(request.responseText, params.geneticProfileId, callbackFunction);
+                window.notificationManager.createNotification(
+                    "Profile data " + params.geneticProfileId + " is succesfully loaded from cBioPortal ",
+                    "success");
+
             }
         };