From 0744a4a8348510144cebc2621f4679f680a6acd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hasan=20Balc=C4=B1?= <balcihasan99@gmail.com>
Date: Mon, 24 Aug 2020 11:08:33 +0300
Subject: [PATCH 01/29] Update package.json

---
 package.json | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 6eb56598d..41488fb69 100644
--- a/package.json
+++ b/package.json
@@ -20,23 +20,23 @@
     "backbone": "1.3.3",
     "body-parser": "^1.19.0",
     "bootstrap": "3.3.7",
-    "chise": "github:iVis-at-Bilkent/chise.js#unstable",
+    "chise": "^3.0.0",
     "chroma-js": "^1.3.4",
-    "cytoscape": "github:iVis-at-Bilkent/cytoscape.js#unstable",
-    "cytoscape-autopan-on-drag": "github:iVis-at-Bilkent/cytoscape.js-autopan-on-drag#unstable",
-    "cytoscape-clipboard": "github:iVis-at-Bilkent/cytoscape.js-clipboard#unstable",
-    "cytoscape-context-menus": "github:iVis-at-Bilkent/cytoscape.js-context-menus#unstable",
-    "cytoscape-edge-editing": "github:iVis-at-Bilkent/cytoscape.js-edge-editing#unstable",
+    "cytoscape": "github:iVis-at-Bilkent/cytoscape.js#master",
+    "cytoscape-autopan-on-drag": "2.2.1",
+    "cytoscape-clipboard": "2.2.1",
+    "cytoscape-context-menus": "3.1.0",
+    "cytoscape-edge-editing": "2.0.1",
     "cytoscape-edgehandles": "~2.13.1",
-    "cytoscape-expand-collapse": "github:iVis-at-Bilkent/cytoscape.js-expand-collapse#unstable",
-    "cytoscape-fcose": "github:iVis-at-Bilkent/cytoscape.js-fcose#unstable",
-    "cytoscape-grid-guide": "github:iVis-at-Bilkent/cytoscape.js-grid-guide#unstable",
-    "cytoscape-layout-utilities": "github:iVis-at-Bilkent/cytoscape.js-layout-utilities#unstable",
-    "cytoscape-node-resize": "github:iVis-at-Bilkent/cytoscape.js-node-resize#unstable",
+    "cytoscape-expand-collapse": "4.0.0",
+    "cytoscape-fcose": "1.2.3",
+    "cytoscape-grid-guide": "2.3.2",
+    "cytoscape-layout-utilities": "1.0.2",
+    "cytoscape-node-resize": "3.2.1",
     "cytoscape-panzoom": "~2.5.2",
     "cytoscape-popper": "^1.0.2",
-    "cytoscape-undo-redo": "github:iVis-at-Bilkent/cytoscape.js-undo-redo#unstable",
-    "cytoscape-view-utilities": "github:iVis-at-Bilkent/cytoscape.js-view-utilities#unstable",
+    "cytoscape-undo-redo": "1.3.3",
+    "cytoscape-view-utilities": "4.1.0",
     "file-saver": "^2.0.2",
     "intro.js": "2.9.3",
     "jquery": "~3.3.1",
@@ -49,7 +49,7 @@
     "multer": "^1.4.2",
     "natives": "^1.1.6",
     "request": "^2.81.0",
-    "sbgnviz": "github:iVis-at-Bilkent/sbgnviz.js#unstable",
+    "sbgnviz": "^6.0.2",
     "tippy.js": "^3.4.0",
     "nodemailer": "6.4.5"
   },

From aca85a5ad86442024ebcf8252bc70ad99907759f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hasan=20Balc=C4=B1?= <balcihasan99@gmail.com>
Date: Mon, 24 Aug 2020 11:20:31 +0300
Subject: [PATCH 02/29] Update recipient's address for sbml error report for
 master branch

---
 app/js/ajax-utilities.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/js/ajax-utilities.js b/app/js/ajax-utilities.js
index 691c4ec20..75c704c56 100644
--- a/app/js/ajax-utilities.js
+++ b/app/js/ajax-utilities.js
@@ -128,8 +128,8 @@ exports.sendEmail = function(req, res){
 	var attachment = fileContent == "no-data" ? false : true;
 	let mailOptions = {
 		// should be replaced with real recipient's account
-		//to: 'replyto.lcsb.gitlab+minerva-core-499-3hxqgkf3oh3yq2zb9veolqjo6-issue@gmail.com',
-		to: "newteditor@gmail.com",
+		to: 'replyto.lcsb.gitlab+minerva-core-499-3hxqgkf3oh3yq2zb9veolqjo6-issue@gmail.com',
+		//to: "newteditor@gmail.com",
 		cc: 'newteditor@gmail.com',	
 		subject: "Error Report From Newt",		
 		text: req.body.message,

From 02b87839bcf1876db7af3084600a56a490f91d1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hasan=20Balc=C4=B1?= <balcihasan99@gmail.com>
Date: Mon, 24 Aug 2020 13:33:18 +0300
Subject: [PATCH 03/29] Update version number in About

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index f772ee8d0..656c588c6 100644
--- a/index.html
+++ b/index.html
@@ -919,7 +919,7 @@ <h2 class="sbgn-text">About</h2>
                             <table width="100%" height="100%" align="center" valign="center">
                             <tbody>
                                 <tr><td>
-                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.0.1</p>
+                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.0.2</p>
                                     </td></tr>
 
                                 <tr><td>

From b7961b79a74e91a1454efa2a73c2dba8a50268ae Mon Sep 17 00:00:00 2001
From: ugurdogrusoz <ugurdogrusoz@gmail.com>
Date: Sun, 4 Oct 2020 11:08:50 +0300
Subject: [PATCH 04/29] Update the citation

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1aa20c2a9..c7609b2bb 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,9 @@ ChiSE and this sample application are distributed under [GNU Lesser General Publ
 
 **A deployment of this sample application along with detailed documentation on its usage** can be found [here](http://newteditor.org/). ChiSE and Newt work on every platform that have JavaScript support including mobile devices.
 
-Please cite the following when you use this application or underlying libraries until a Newt publication is available:
+Please cite the following when you use Newt:
+
+H. Balci, M.C. Siper, N. Saleh, I. Safarli, L. Roy, M. Kilicarslan, R. Ozaydin, A. Mazein, C. Auffray, O. Babur, E. Demir and U. Dogrusoz, [Newt: a comprehensive web-based tool for viewing,constructing, and analyzing biological maps](https://doi.org/10.1093/bioinformatics/btaa850), Bioinformatics, to appear, 2020.
 
 M. Sari, I. Bahceci, U. Dogrusoz, S.O. Sumer, B.A. Aksoy, O. Babur, E. Demir, "[SBGNViz: a tool for visualization and complexity management of SBGN process description maps](http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0128985)", PLoS ONE, 10(6), e0128985, 2015.
 

From d3b909eb80398dde0c22848d8e6f0546461243be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hasan=20Balc=C4=B1?= <balcihasan99@gmail.com>
Date: Wed, 7 Oct 2020 14:20:33 +0300
Subject: [PATCH 05/29] Update tutorial video link

---
 app/js/tutorial.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/js/tutorial.js b/app/js/tutorial.js
index 1505c69de..3706416a1 100644
--- a/app/js/tutorial.js
+++ b/app/js/tutorial.js
@@ -29,7 +29,7 @@ tutorial.introduction = function(checkCookie){
       { 
         intro: '<h2 style="text-align:center; margin-top: 10px;"><b style="vertical-align:middle; color:#0B9BCD;">Welcome to  </b><img src="app/img/newt-logo.png"> </h2>\n\
                 <hr style="margin:10px auto;">\n\
-                <iframe style="border: 1px solid #0B9BCD; box-sizing: content-box" width="560" height="315" src="https://www.youtube-nocookie.com/embed/P4ClxU25ky8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> \n\
+                <iframe style="border: 1px solid #0B9BCD; box-sizing: content-box" width="560" height="315" src="https://www.youtube-nocookie.com/embed/FUf-aqKO0_g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> \n\
                 <br><p style="text-align:center; margin: 0px; font-size: 12px;">Newt Basics</p>'
 
       },

From 20bb6fa0c67cefb4c71a751b9828a516eb38d8fe Mon Sep 17 00:00:00 2001
From: Salih Altun <muhammedsalihaltun@gmail.com>
Date: Thu, 11 Feb 2021 09:32:03 +0300
Subject: [PATCH 06/29] Stop serving dotfiles

---
 server.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/server.js b/server.js
index 5408a23af..4cac44eb0 100644
--- a/server.js
+++ b/server.js
@@ -41,8 +41,5 @@ app.post('/utilities/:fn', requestHandler);
 server.listen(port, function(){
   console.log('server listening on port: %d', port);
 });
-app.use(express.static(__dirname));
-
-
-
 
+app.use(express.static(__dirname, {dotfiles: 'ignore'}));

From 7d9a16ab4b5a20a28bc6b08de322d687bba752a5 Mon Sep 17 00:00:00 2001
From: Salih Altun <muhammedsalihaltun@gmail.com>
Date: Thu, 8 Apr 2021 14:37:00 +0300
Subject: [PATCH 07/29] Review map properties

  Launch from SBML file from biomodels

  SBML import/export fixes
---
 app/js/app-menu.js      | 38 ++++++++++++++++++++++++++++++++++----
 app/js/app-utilities.js | 22 +++++++++++++++++++---
 package.json            |  2 +-
 3 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/app/js/app-menu.js b/app/js/app-menu.js
index 16c7bdbbe..9fd734ee7 100644
--- a/app/js/app-menu.js
+++ b/app/js/app-menu.js
@@ -343,11 +343,11 @@ module.exports = function() {
         chiseInstance.loadCellDesigner(file,  success = function(data){
           if (cy.elements().length !== 0) {
             promptConfirmationView.render(function () {
-              chiseInstance.loadSBGNMLText(data,true);
+              chiseInstance.loadSBGNMLText(data, true, file.name, cy);
             });
           }
           else {
-            chiseInstance.loadSBGNMLText(data,true);
+            chiseInstance.loadSBGNMLText(data, true, file.name, cy);
           }
         },
         error = function(data){
@@ -445,11 +445,11 @@ module.exports = function() {
         chiseInstance.loadSbml(file,  success = function(data){
           if (cy.elements().length !== 0) {
             promptConfirmationView.render(function () {
-              chiseInstance.loadSBGNMLText(data);
+              chiseInstance.loadSBGNMLText(data.message, false, file.name, cy);
             });
           }
           else {
-            chiseInstance.loadSBGNMLText(data);
+            chiseInstance.loadSBGNMLText(data.message, false, file.name, cy);
           }
         },
         error = function(data){
@@ -597,6 +597,18 @@ module.exports = function() {
         // clear urlParams from scratch
         appUtilities.setScratch(cy, 'urlParams', undefined);
 
+
+        // get applyLayout value before map properties are filtered, apply layout
+        // isn't really a map property so its not added to sbgnviz 
+        // validMapProperties
+        const applyLayout = urlParams.applyLayoutOnURL === "true";
+        const fromURL = urlParams.url !== undefined;
+
+        if (urlParams.compoundPadding) {
+          const compoundPadding = urlParams.compoundPadding;
+          chiseInstance.setCompoundPadding(Number(compoundPadding));
+        }
+
         // filter map properties from the url parameters
         var mapPropsFromUrl = appUtilities.filterMapProperties(urlParams);
         
@@ -608,6 +620,24 @@ module.exports = function() {
           mapPropsFromUrl.compoundPadding = 0;
         }              
 
+        if (fromURL && applyLayout) {
+          let currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
+
+          // Below is copied from sbgnviz.graphUtilities.updateGraph
+          let preferences = {};
+          if(cy.nodes().length > 3000 || cy.edges().length > 3000) {
+            preferences.quality = "draft";
+          }
+          preferences.animate = false;
+          preferences.randomize = true;
+          preferences = $.extend({}, currentLayoutProperties, preferences);
+          layoutPropertiesView.applyLayout(preferences);
+        }
+
+        if (urlParams.mapColorScheme) {
+          appUtilities.applyMapColorScheme(urlParams.mapColorScheme, currentGeneralProperties.mapColorSchemeStyle, appUtilities.colorSchemeInspectorView);
+        }
+
         // merge the map properties coming from url into
         // the map properties read from file
         for ( var prop in mapPropsFromUrl ) {
diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js
index 02576e832..3c14f5fe2 100644
--- a/app/js/app-utilities.js
+++ b/app/js/app-utilities.js
@@ -2571,7 +2571,23 @@ appUtilities.launchWithModelFile = function() {
             lastModified: Date.now()
           });
 
-          chiseInstance.loadNwtFile(fileToLoad, loadCallbackSBGNMLValidity, loadCallbackInvalidityWarning);
+          if (fileExtension === "xml" || fileExtension === "xml#" 
+              || fileExtension === "sbml" || fileExtension === "sbml#") {
+            chiseInstance.loadSbml(fileToLoad,  success = function(data){
+              var cy = appUtilities.getActiveCy();
+              if (cy.elements().length !== 0) {
+                promptConfirmationView.render(function () {
+                  chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
+                });
+              }
+              else {
+                chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
+              }
+            });
+          }
+          else {
+            chiseInstance.loadNwtFile(fileToLoad, loadCallbackSBGNMLValidity, loadCallbackInvalidityWarning, paramObj);
+          }
         }
         else {
           loadCallbackInvalidityWarning();
@@ -2606,7 +2622,7 @@ appUtilities.launchWithModelFile = function() {
           var xml = $.parseXML(data.response.body);
           $(document).trigger('sbgnvizLoadFile', [filename, cyInstance]);
           $(document).trigger('sbgnvizLoadFromURI', [filename, cyInstance]);          
-          chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
+          chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml, paramObj), undefined, currentLayoutProperties);
           chiseInstance.endSpinner('paths-byURI-spinner');
           $(document).trigger('sbgnvizLoadFileEnd', [filename,  cyInstance]);
         }
@@ -2631,7 +2647,7 @@ appUtilities.launchWithModelFile = function() {
     // Parse the query sting into an object please see:
     // https://stevenbenner.com/2010/03/javascript-regex-trick-parse-a-query-string-into-an-object/
     url.replace(
-        new RegExp("([^?=&]+)(=([^&]*))?", "g"),
+        new RegExp("([^?=&]+)(=([^&#]*))?", "g"),
         function($0, name, $2, value) {
           if (value !== undefined) {
             var lowerCaseName = name.toLowerCase();
diff --git a/package.json b/package.json
index 41488fb69..1cc2c3ac6 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "multer": "^1.4.2",
     "natives": "^1.1.6",
     "request": "^2.81.0",
-    "sbgnviz": "^6.0.2",
+    "sbgnviz": "github:iVis-at-Bilkent/sbgnviz.js#master",
     "tippy.js": "^3.4.0",
     "nodemailer": "6.4.5"
   },

From c147af07bbe33b05ea8ce461b8ba222da14653f1 Mon Sep 17 00:00:00 2001
From: Salih Altun <muhammedsalihaltun@gmail.com>
Date: Thu, 8 Apr 2021 16:34:04 +0300
Subject: [PATCH 08/29] Use newest release of sbgnviz.js

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1cc2c3ac6..e8503815b 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "multer": "^1.4.2",
     "natives": "^1.1.6",
     "request": "^2.81.0",
-    "sbgnviz": "github:iVis-at-Bilkent/sbgnviz.js#master",
+    "sbgnviz": "^6.0.4",
     "tippy.js": "^3.4.0",
     "nodemailer": "6.4.5"
   },

From dcf284cbae6a985ceb3ed3431faa5996281c79a3 Mon Sep 17 00:00:00 2001
From: Salih Altun <muhammedsalihaltun@gmail.com>
Date: Thu, 15 Apr 2021 10:10:38 +0300
Subject: [PATCH 09/29] Update version number in About

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 656c588c6..70222105f 100644
--- a/index.html
+++ b/index.html
@@ -919,7 +919,7 @@ <h2 class="sbgn-text">About</h2>
                             <table width="100%" height="100%" align="center" valign="center">
                             <tbody>
                                 <tr><td>
-                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.0.2</p>
+                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.0.3</p>
                                     </td></tr>
 
                                 <tr><td>

From 3513a2e6a49c6077db48e2f1f6cf042ddfd96269 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hasan=20Balc=C4=B1?= <balcihasan99@gmail.com>
Date: Thu, 9 Sep 2021 13:19:15 +0300
Subject: [PATCH 10/29] Create CITATION.cff

---
 CITATION.cff | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 CITATION.cff

diff --git a/CITATION.cff b/CITATION.cff
new file mode 100644
index 000000000..124e2ec75
--- /dev/null
+++ b/CITATION.cff
@@ -0,0 +1,81 @@
+cff-version: 1.2.0
+message: "If you use this software, please cite it as below."
+authors:
+- family-names: "Balci"
+  given-names: "Hasan"
+  orcid: "https://orcid.org/0000-0001-8319-7758"
+- family-names: "Siper"
+  given-names: "Metin Can"
+- family-names: "Saleh"
+  given-names: "Nasim"
+  orcid: "https://orcid.org/0000-0001-8319-7758"
+- family-names: "Safarli"
+  given-names: "Ilkin"
+- family-names: "Roy"
+  given-names: "Ludovic"
+  orcid: "https://orcid.org/0000-0001-6940-874X"
+- family-names: "Kilicarslan"
+  given-names: "Merve"
+- family-names: "Ozaydin"
+  given-names: "Rumeysa"
+- family-names: "Mazein"
+  given-names: "Alexander"
+  orcid: "https://orcid.org/0000-0001-7137-4171"
+- family-names: "Aufrey"
+  given-names: "Charles"
+- family-names: "Babur"
+  given-names: "Ozgun"
+  orcid: "https://orcid.org/0000-0002-0239-5259"
+- family-names: "Demir"
+  given-names: "Emek"
+  orcid: "https://orcid.org/0000-0002-3663-7113"
+- family-names: "Dogrusoz"
+  given-names: "Ugur"
+  orcid: "https://orcid.org/0000-0002-7153-0784"   
+title: "Newt"
+version: 3.0.3
+date-released: 2021-04-08
+url: "https://github.com/iVis-at-Bilkent/newt"
+preferred-citation:
+  type: article
+  authors:
+  - family-names: "Balci"
+    given-names: "Hasan"
+    orcid: "https://orcid.org/0000-0001-8319-7758"
+  - family-names: "Siper"
+    given-names: "Metin Can"
+  - family-names: "Saleh"
+    given-names: "Nasim"
+    orcid: "https://orcid.org/0000-0001-8319-7758"
+  - family-names: "Safarli"
+    given-names: "Ilkin"
+  - family-names: "Roy"
+    given-names: "Ludovic"
+    orcid: "https://orcid.org/0000-0001-6940-874X"
+  - family-names: "Kilicarslan"
+    given-names: "Merve"
+  - family-names: "Ozaydin"
+    given-names: "Rumeysa"
+  - family-names: "Mazein"
+    given-names: "Alexander"
+    orcid: "https://orcid.org/0000-0001-7137-4171"
+  - family-names: "Aufrey"
+    given-names: "Charles"
+  - family-names: "Babur"
+    given-names: "Ozgun"
+    orcid: "https://orcid.org/0000-0002-0239-5259"
+  - family-names: "Demir"
+    given-names: "Emek"
+    orcid: "https://orcid.org/0000-0002-3663-7113"
+  - family-names: "Dogrusoz"
+    given-names: "Ugur"
+    orcid: "https://orcid.org/0000-0002-7153-0784"
+  doi: "10.1093/bioinformatics/btaa850"
+  journal: "Bioinformatics"
+  month: 5
+  start: 1475 # First page number
+  end: 1477 # Last page number
+  title: "Newt: a comprehensive web-based tool for viewing, constructing and analyzing biological maps"
+  issue: 10
+  volume: 37
+  year: 2021

From 3bf305f56eed85c37ace324e283ad046750b72ca Mon Sep 17 00:00:00 2001
From: Selbi Ereshova <selbi.ereshova@ug.bilkent.edu.tr>
Date: Tue, 5 Jul 2022 16:00:38 +0300
Subject: [PATCH 11/29] Spinner issue fixed

---
 app/js/app-menu.js      | 17 ++++++++++++-----
 app/js/app-utilities.js | 21 ++++++++++++++++-----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/app/js/app-menu.js b/app/js/app-menu.js
index 9fd734ee7..2caa19858 100644
--- a/app/js/app-menu.js
+++ b/app/js/app-menu.js
@@ -1173,6 +1173,11 @@ module.exports = function() {
       // use active chise instance
       var chiseInstance = appUtilities.getActiveChiseInstance();
 
+      // TODO think whether here is the right place to start the spinner
+      chiseInstance.startSpinner("layout-spinner");
+
+      setTimeout(() => {
+
       // use the associated cy instance
       var cy = chiseInstance.getCy();
 
@@ -1184,14 +1189,12 @@ module.exports = function() {
       // get current general properties for cy
       var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
 
-      // TODO think whether here is the right place to start the spinner
-      chiseInstance.startSpinner("layout-spinner");
-
       var preferences = {
         animate: (cy.nodes().length > 3000 || cy.edges().length > 3000) ? false : currentGeneralProperties.animateOnDrawingChanges
       };
 
       layoutPropertiesView.applyLayout(preferences);
+    }, 0);
     });
 
     $("#perform-static-layout, #perform-static-layout-icon").click(function (e) {
@@ -1199,6 +1202,11 @@ module.exports = function() {
       // use active chise instance
       var chiseInstance = appUtilities.getActiveChiseInstance();
 
+      // TODO think whether here is the right place to start the spinner
+      chiseInstance.startSpinner("layout-spinner");
+
+      setTimeout(() => {
+
       // use the associated cy instance
       var cy = chiseInstance.getCy();
 
@@ -1209,8 +1217,6 @@ module.exports = function() {
       // get current general properties for cy
       var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');      
 
-      // TODO think whether here is the right place to start the spinner
-      chiseInstance.startSpinner("layout-spinner");
 
       var preferences = {
         quality: (cy.nodes().length > 3000 || cy.edges().length > 3000) ? "draft" : "default",
@@ -1219,6 +1225,7 @@ module.exports = function() {
       };
 
       layoutPropertiesView.applyLayout(preferences);
+    }, 0);
     });
 
     $("#undo-last-action, #undo-icon").click(function (e) {
diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js
index 3c14f5fe2..9d1d370b4 100644
--- a/app/js/app-utilities.js
+++ b/app/js/app-utilities.js
@@ -2518,6 +2518,8 @@ appUtilities.launchWithModelFile = function() {
 
   function loadFromURL(filepath, chiseInstance, promptInvalidURLWarning){
 
+    chiseInstance.startSpinner('paths-byURL-spinner')
+
     var loadCallbackSBGNMLValidity = function (text) {
       $.ajax({
         type: 'post',
@@ -2562,7 +2564,7 @@ appUtilities.launchWithModelFile = function() {
       type: 'get',
       url: "/utilities/testURL",
       data: {url: filepath},
-      success: function(data){
+      success: async function(data){
         // here we can get 404 as well, for example, so there are still error cases to handle
         if (!data.error && data.response.statusCode == 200 && data.response.body) {
           $(document).trigger('sbgnvizLoadFromURL', [filename, cyInstance]);
@@ -2573,28 +2575,37 @@ appUtilities.launchWithModelFile = function() {
 
           if (fileExtension === "xml" || fileExtension === "xml#" 
               || fileExtension === "sbml" || fileExtension === "sbml#") {
-            chiseInstance.loadSbml(fileToLoad,  success = function(data){
+
+            await chiseInstance.loadSbml(fileToLoad,  success = async function(data){
               var cy = appUtilities.getActiveCy();
               if (cy.elements().length !== 0) {
-                promptConfirmationView.render(function () {
-                  chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
+                await promptConfirmationView.render(async function () {
+                 await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
+                  chiseInstance.endSpinner('paths-byURL-spinner')
                 });
               }
               else {
-                chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
+                await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
+                chiseInstance.endSpinner('paths-byURL-spinner')
+
               }
             });
           }
           else {
             chiseInstance.loadNwtFile(fileToLoad, loadCallbackSBGNMLValidity, loadCallbackInvalidityWarning, paramObj);
+            chiseInstance.endSpinner('paths-byURL-spinner')
           }
         }
         else {
           loadCallbackInvalidityWarning();
+          chiseInstance.endSpinner('paths-byURL-spinner')
+
         }
       },
       error: function(xhr, options, err){
         loadCallbackInvalidityWarning();
+        chiseInstance.endSpinner('paths-byURL-spinner')
+
       }
     });
 

From 31a2b4266d28bd41a2b7747eb27afc861534d78e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hasan=20Balc=C4=B1?= <balcihasan99@gmail.com>
Date: Tue, 5 Jul 2022 16:46:03 +0300
Subject: [PATCH 12/29] Update version number before release

---
 index.html   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 70222105f..d56771ff3 100644
--- a/index.html
+++ b/index.html
@@ -919,7 +919,7 @@ <h2 class="sbgn-text">About</h2>
                             <table width="100%" height="100%" align="center" valign="center">
                             <tbody>
                                 <tr><td>
-                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.0.3</p>
+                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.0.4</p>
                                     </td></tr>
 
                                 <tr><td>
diff --git a/package.json b/package.json
index e8503815b..0b7a741c8 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "multer": "^1.4.2",
     "natives": "^1.1.6",
     "request": "^2.81.0",
-    "sbgnviz": "^6.0.4",
+    "sbgnviz": "^6.0.5",
     "tippy.js": "^3.4.0",
     "nodemailer": "6.4.5"
   },

From aee665b5649bcf15dc2845880d361b04d4e244bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hasan=20Balc=C4=B1?= <balcihasan99@gmail.com>
Date: Tue, 5 Jul 2022 17:23:56 +0300
Subject: [PATCH 13/29] Change libxmljs version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0b7a741c8..e1f04b649 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "jquery": "~3.3.1",
     "jquery-expander": "1.7.0",
     "konva": "^1.6.3",
-    "libxmljs": "^0.19.3",
+    "libxmljs": "0.19.7",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
     "mousetrap": "^1.6.0",

From 45077b903a671b5b38a0a3ec298b72edb5e2ba2a Mon Sep 17 00:00:00 2001
From: Selbi Ereshova <selbi.ereshova@ug.bilkent.edu.tr>
Date: Mon, 25 Jul 2022 23:41:47 +0300
Subject: [PATCH 14/29] #688  Added file size check

---
 app/js/app-utilities.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js
index 9d1d370b4..ea92b183e 100644
--- a/app/js/app-utilities.js
+++ b/app/js/app-utilities.js
@@ -2564,8 +2564,17 @@ appUtilities.launchWithModelFile = function() {
       type: 'get',
       url: "/utilities/testURL",
       data: {url: filepath},
-      success: async function(data){
+      success: async function(data, text, xhr){
         // here we can get 404 as well, for example, so there are still error cases to handle
+
+        var fileSize = xhr.getResponseHeader('Content-Length');
+        console.log(fileSize);
+
+        if(fileSize>250000 && (fileExtension === "sbml" || fileExtension === "xml")  )
+        {
+          chiseInstance.showSpinnerText('paths-byURL-spinner')
+        }
+        
         if (!data.error && data.response.statusCode == 200 && data.response.body) {
           $(document).trigger('sbgnvizLoadFromURL', [filename, cyInstance]);
           var fileToLoad = new File([data.response.body], filename, {

From 61dc19584b71e9ed9430482542fd62c8c172da3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hasan=20Balc=C4=B1?= <balcihasan99@gmail.com>
Date: Tue, 26 Jul 2022 10:51:25 +0300
Subject: [PATCH 15/29] Update version number before release

---
 index.html   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index d56771ff3..0e5004e2d 100644
--- a/index.html
+++ b/index.html
@@ -919,7 +919,7 @@ <h2 class="sbgn-text">About</h2>
                             <table width="100%" height="100%" align="center" valign="center">
                             <tbody>
                                 <tr><td>
-                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.0.4</p>
+                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.0.5</p>
                                     </td></tr>
 
                                 <tr><td>
diff --git a/package.json b/package.json
index e1f04b649..b1013562c 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "multer": "^1.4.2",
     "natives": "^1.1.6",
     "request": "^2.81.0",
-    "sbgnviz": "^6.0.5",
+    "sbgnviz": "^6.0.6",
     "tippy.js": "^3.4.0",
     "nodemailer": "6.4.5"
   },

From f0eac4534ad85d920399fce920f786f28224f43c Mon Sep 17 00:00:00 2001
From: Selbi Ereshova <selbi.ereshova@ug.bilkent.edu.tr>
Date: Tue, 26 Jul 2022 15:35:01 +0300
Subject: [PATCH 16/29] #688 Added  cache header

Otherwise the response does not contain content-length
---
 app/js/app-utilities.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js
index ea92b183e..70fd47d97 100644
--- a/app/js/app-utilities.js
+++ b/app/js/app-utilities.js
@@ -2563,6 +2563,9 @@ appUtilities.launchWithModelFile = function() {
     $.ajax({
       type: 'get',
       url: "/utilities/testURL",
+      headers: {
+        'Cache-Control': 'public, no-transform' 
+      },
       data: {url: filepath},
       success: async function(data, text, xhr){
         // here we can get 404 as well, for example, so there are still error cases to handle

From e4e99b23058fa4510bfb08461e4b32fd2239cc93 Mon Sep 17 00:00:00 2001
From: Selbi Ereshova <selbi.ereshova@ug.bilkent.edu.tr>
Date: Tue, 26 Jul 2022 15:42:20 +0300
Subject: [PATCH 17/29] #688 Removed public

---
 app/js/app-utilities.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js
index 70fd47d97..37c1e7209 100644
--- a/app/js/app-utilities.js
+++ b/app/js/app-utilities.js
@@ -2564,7 +2564,7 @@ appUtilities.launchWithModelFile = function() {
       type: 'get',
       url: "/utilities/testURL",
       headers: {
-        'Cache-Control': 'public, no-transform' 
+        'Cache-Control': 'no-transform' 
       },
       data: {url: filepath},
       success: async function(data, text, xhr){

From b95e21e51a990c2d311c0300bf8a5b987ddd9d97 Mon Sep 17 00:00:00 2001
From: Selbi Ereshova <selbi.ereshova@ug.bilkent.edu.tr>
Date: Tue, 26 Jul 2022 16:27:37 +0300
Subject: [PATCH 18/29] #688 Got data size from response

---
 app/js/app-utilities.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js
index 37c1e7209..f45f4631d 100644
--- a/app/js/app-utilities.js
+++ b/app/js/app-utilities.js
@@ -2570,10 +2570,12 @@ appUtilities.launchWithModelFile = function() {
       success: async function(data, text, xhr){
         // here we can get 404 as well, for example, so there are still error cases to handle
 
+        console.log("data.response.body",data.response.body.length)
+        var dataSize = data.response.body.length
         var fileSize = xhr.getResponseHeader('Content-Length');
-        console.log(fileSize);
+        console.log("filesize from content-length",fileSize);
 
-        if(fileSize>250000 && (fileExtension === "sbml" || fileExtension === "xml")  )
+        if(dataSize>250000 && (fileExtension === "sbml" || fileExtension === "xml")  )
         {
           chiseInstance.showSpinnerText('paths-byURL-spinner')
         }

From be777df2881519e6ff7ca6a313b2fe75fdc0dda9 Mon Sep 17 00:00:00 2001
From: Selbi Ereshova <selbi.ereshova@ug.bilkent.edu.tr>
Date: Tue, 26 Jul 2022 16:40:07 +0300
Subject: [PATCH 19/29] #688 Clean code

---
 app/js/app-utilities.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js
index f45f4631d..f0505839d 100644
--- a/app/js/app-utilities.js
+++ b/app/js/app-utilities.js
@@ -2563,18 +2563,11 @@ appUtilities.launchWithModelFile = function() {
     $.ajax({
       type: 'get',
       url: "/utilities/testURL",
-      headers: {
-        'Cache-Control': 'no-transform' 
-      },
       data: {url: filepath},
-      success: async function(data, text, xhr){
+      success: async function(data){
         // here we can get 404 as well, for example, so there are still error cases to handle
 
-        console.log("data.response.body",data.response.body.length)
         var dataSize = data.response.body.length
-        var fileSize = xhr.getResponseHeader('Content-Length');
-        console.log("filesize from content-length",fileSize);
-
         if(dataSize>250000 && (fileExtension === "sbml" || fileExtension === "xml")  )
         {
           chiseInstance.showSpinnerText('paths-byURL-spinner')

From 9dcba2e851170c768fd765c9633d970fba420d4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hasan=20Balc=C4=B1?= <balcihasan99@gmail.com>
Date: Fri, 21 Jul 2023 11:39:53 +0200
Subject: [PATCH 20/29] Update README.md

---
 README.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c7609b2bb..3d82d4213 100644
--- a/README.md
+++ b/README.md
@@ -10,9 +10,7 @@ ChiSE and this sample application are distributed under [GNU Lesser General Publ
 
 Please cite the following when you use Newt:
 
-H. Balci, M.C. Siper, N. Saleh, I. Safarli, L. Roy, M. Kilicarslan, R. Ozaydin, A. Mazein, C. Auffray, O. Babur, E. Demir and U. Dogrusoz, [Newt: a comprehensive web-based tool for viewing,constructing, and analyzing biological maps](https://doi.org/10.1093/bioinformatics/btaa850), Bioinformatics, to appear, 2020.
-
-M. Sari, I. Bahceci, U. Dogrusoz, S.O. Sumer, B.A. Aksoy, O. Babur, E. Demir, "[SBGNViz: a tool for visualization and complexity management of SBGN process description maps](http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0128985)", PLoS ONE, 10(6), e0128985, 2015.
+H. Balci, M.C. Siper, N. Saleh, I. Safarli, L. Roy, M. Kilicarslan, R. Ozaydin, A. Mazein, C. Auffray, O. Babur, E. Demir and U. Dogrusoz, [Newt: a comprehensive web-based tool for viewing,constructing, and analyzing biological maps](https://doi.org/10.1093/bioinformatics/btaa850), **Bioinformatics**, 37(10), pp.1475-1477, 2021.
 
 #### Running a Local Instance
 In order to deploy and run a local instance of the tool, please follow the steps below (we recommend the use of LTS version 12.16.1 of node.js):

From a572e634f5f612947c9df346e82c1eb768188ddd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hasan=20Balc=C4=B1?= <balcihasan99@gmail.com>
Date: Fri, 21 Jul 2023 14:13:13 +0200
Subject: [PATCH 21/29] Add citation info

---
 index.html | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/index.html b/index.html
index 0e5004e2d..f9ebde524 100644
--- a/index.html
+++ b/index.html
@@ -930,6 +930,11 @@ <h2 class="sbgn-text">About</h2>
                                         <p class="address-text marg">i-Vis Information Visualization Research Lab, Ankara, Turkey,</p>
                                         <p class="address-text">in collaboration with the Demir Lab at OHSU, USA</p>
                                     </td></tr>
+                                <tr><td>
+                                        <p class="address-text">
+                                            Please cite: Balci et al. <a href="https://doi.org/10.1093/bioinformatics/btaa850" target="_blank">Newt: a comprehensive web-based tool <br>for viewing, constructing, and analyzing biological maps</a>, Bioinf., 37(10), pp.1475-1477, 2021.
+                                        </p>
+                                    </td></tr>                                    
                                 <tr><td>
                                         <p class="address-text">
                                           See <a href="https://github.com/iVis-at-Bilkent/newt#credits" target="_blank">here</a> for third-party libraries used
@@ -1027,6 +1032,15 @@ <h2 class="sbgn-text">Tips</h2>
                                    
                                 </tbody>
                                 </table>
+                                <table align="center" valign="center" style="margin-top:15px;">
+                                    <tbody>
+                                        <tr>
+                                            <td>
+                                                <span >Please cite: Balci et al. <a href="https://doi.org/10.1093/bioinformatics/btaa850" target="_blank" rel="nofollow">Newt: a comprehensive web-based tool for viewing, constructing, and analyzing biological maps</a>, Bioinf., 37(10), pp.1475-1477, 2021.</span>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>                                
                                 <table align="center" valign="center" style="margin-top:15px;">
                                     <tbody>
                                         <tr>

From 1d310bb2c27d8a2932aec89f681c268059339e9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hasan=20Balc=C4=B1?= <balcihasan99@gmail.com>
Date: Mon, 11 Dec 2023 18:00:04 +0100
Subject: [PATCH 22/29] Add GPML import/export support

---
 app/js/app-menu.js       |   45 +-
 app/js/app-utilities.js  | 3949 +++++++++++++----------
 app/js/backbone-views.js | 6387 +++++++++++++++++++++++---------------
 index.html               |    3 +
 4 files changed, 6140 insertions(+), 4244 deletions(-)

diff --git a/app/js/app-menu.js b/app/js/app-menu.js
index 2caa19858..ee509214c 100644
--- a/app/js/app-menu.js
+++ b/app/js/app-menu.js
@@ -363,9 +363,11 @@ module.exports = function() {
     $("#import-experimental-data").click(function () {
       $("#overlay-data").trigger('click');
     });
+
     $("#import-SBML-file").click(function () {
       $("#sbml-file").trigger('click');
     });
+
     $("#import-simple-af-file").click(function () {
       $("#simple-af-file-input").trigger('click');
     });
@@ -382,6 +384,10 @@ module.exports = function() {
       $("#sif-layout-input").trigger('click');
     });
 
+    $("#import-GPML-file").click(function () {
+      $("#gpml-file-input").trigger('click');
+    });
+
     $("#overlay-data").change(function () {
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var cy = appUtilities.getActiveCy();
@@ -461,6 +467,34 @@ module.exports = function() {
         $(this).val("");
       }
     });
+
+    $("#gpml-file-input").change(function () {
+     
+      var chiseInstance = appUtilities.getActiveChiseInstance();
+      var cy = appUtilities.getActiveCy();
+      if ($(this).val() != "") {
+        var file = this.files[0];
+        appUtilities.setFileContent(file.name);
+        chiseInstance.loadGpml(file,  success = function(data){
+          if (cy.elements().length !== 0) {
+            promptConfirmationView.render(function () {
+              chiseInstance.loadSBGNMLText(data.message, false, file.name, cy);
+            });
+          }
+          else {
+            chiseInstance.loadSBGNMLText(data.message, false, file.name, cy);
+          }
+        },
+        error = function(data){
+          promptFileConversionErrorView.render();          
+          document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!";
+          
+        });
+       
+        $(this).val("");
+      }
+    });
+
     $("#simple-af-file-input").change(function () {
       var chiseInstance = appUtilities.getActiveChiseInstance();
 
@@ -1333,14 +1367,19 @@ module.exports = function() {
     $("#export-as-sbgnml-plain-file").click(function (evt) {
       fileSaveView.render("sbgn", "plain");
     });
+
     $("#export-as-sbgnml3-plain-file").click(function (evt) {
       fileSaveView.render("sbgn", "plain3");
     });
 
-   $("#export-as-sbml").click(function (evt) {
-    fileSaveView.render("sbml", null, null);
-   
+    $("#export-as-sbml").click(function (evt) {
+      fileSaveView.render("sbml", null, null);
     });
+
+    $("#export-as-gpml").click(function (evt) {
+      fileSaveView.render("gpml", null, null);
+    });    
+
     $("#add-complex-for-selected").click(function (e) {
 
       // use active chise instance
diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js
index f0505839d..e5994e4b8 100644
--- a/app/js/app-utilities.js
+++ b/app/js/app-utilities.js
@@ -3,35 +3,35 @@
  * Common utilities for sample application. Includes functions and variables.
  * You can directly utilize this object also you can use this object to set a variable in a file and access it in another file.
  */
-var jquery = $ = require('jquery');
-var chroma = require('chroma-js');
-var chise = require('chise');
-var tutorial = require('./tutorial');
+var jquery = ($ = require("jquery"));
+var chroma = require("chroma-js");
+var chise = require("chise");
+var tutorial = require("./tutorial");
 
 var appUtilities = {};
 
 // Get the whole scratchpad reserved for newt (on an element or core) or get a single property of it
 appUtilities.getScratch = function (cyOrEle, name) {
-  if (cyOrEle.scratch('_newt') === undefined) {
-    cyOrEle.scratch('_newt', {});
+  if (cyOrEle.scratch("_newt") === undefined) {
+    cyOrEle.scratch("_newt", {});
   }
 
-  var scratch = cyOrEle.scratch('_newt');
-  var retVal = ( name === undefined ) ? scratch : scratch[name];
+  var scratch = cyOrEle.scratch("_newt");
+  var retVal = name === undefined ? scratch : scratch[name];
   return retVal;
-}
+};
 
 appUtilities.mapTypesToViewableText = {
-  'PD': 'PD',
-  'AF': 'AF',
-  'SIF': 'SIF',
-  'HybridSbgn' : 'Hybrid (PD,AF)' ,
-  'HybridAny' : 'Hybrid (PD,AF,SIF)'   
+  PD: "PD",
+  AF: "AF",
+  SIF: "SIF",
+  HybridSbgn: "Hybrid (PD,AF)",
+  HybridAny: "Hybrid (PD,AF,SIF)",
 };
 // Set a single property on scratchpad of an element or the core
 appUtilities.setScratch = function (cyOrEle, name, val) {
   this.getScratch(cyOrEle)[name] = val;
-}
+};
 
 // id for the next network to be created, starts by 0
 // a unique div selector is to be created using this id
@@ -49,7 +49,6 @@ appUtilities.networkIdsStack = [];
 appUtilities.networkIdToChiseInstance = {};
 
 appUtilities.adjustUIComponents = function (_cy) {
-
   // if _cy param is not set use the active cy instance
   var cy = _cy || appUtilities.getActiveCy();
 
@@ -63,17 +62,24 @@ appUtilities.adjustUIComponents = function (_cy) {
   // needing an appUndoActions instance here is something unexpected
   // but since appUndoActions.refreshColorSchemeMenu is used below in an unfortunate way we need an instance of it
   // that uses the active cy instance
-  var appUndoActionsFactory = require('./app-undo-actions-factory');
+  var appUndoActionsFactory = require("./app-undo-actions-factory");
   var appUndoActions = appUndoActionsFactory(appUtilities.getActiveCy());
 
   // get current general properties for cy
-  var generalProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+  var generalProperties = appUtilities.getScratch(
+    cy,
+    "currentGeneralProperties"
+  );
 
   // refresh color schema menu
-  appUndoActions.refreshColorSchemeMenu({value: generalProperties.mapColorScheme, self: appUtilities.colorSchemeInspectorView, scheme_type: generalProperties.mapColorSchemeStyle});
+  appUndoActions.refreshColorSchemeMenu({
+    value: generalProperties.mapColorScheme,
+    self: appUtilities.colorSchemeInspectorView,
+    scheme_type: generalProperties.mapColorSchemeStyle,
+  });
 
   // set the file content by the current file name for cy
-  var fileName = appUtilities.getScratch(cy, 'currentFileName');
+  var fileName = appUtilities.getScratch(cy, "currentFileName");
   appUtilities.setFileContent(fileName);
 
   // reset the status of undo redo buttons
@@ -82,133 +88,138 @@ appUtilities.adjustUIComponents = function (_cy) {
   // adjust UI components related to mode properties
 
   // access the mode properties of cy
-  var modeProperties = appUtilities.getScratch(cy, 'modeProperties');
+  var modeProperties = appUtilities.getScratch(cy, "modeProperties");
 
   // html values to select
-  var nodeVal = modeProperties.selectedNodeType.replace(/ /gi, '-'); // Html values includes '-' instead of ' '
-  var edgeVal = modeProperties.selectedEdgeType.replace(/ /gi, '-'); // Html values includes '-' instead of ' '
+  var nodeVal = modeProperties.selectedNodeType.replace(/ /gi, "-"); // Html values includes '-' instead of ' '
+  var edgeVal = modeProperties.selectedEdgeType.replace(/ /gi, "-"); // Html values includes '-' instead of ' '
 
   var mode = modeProperties.mode;
   var sustainMode = modeProperties.sustainMode;
   var nodeLang = modeProperties.selectedNodeLanguage;
   var edgeLang = modeProperties.selectedEdgeLanguage;
 
-  $('.node-palette img').removeClass('selected-mode');
-  $('.edge-palette img').removeClass('selected-mode');
+  $(".node-palette img").removeClass("selected-mode");
+  $(".edge-palette img").removeClass("selected-mode");
 
   // Get images for node/edge palettes
-  var nodeImg = $('.node-palette img[value="'+nodeVal+'"][language="' + nodeLang + '"]');
-  var edgeImg = $('.edge-palette img[value="'+edgeVal+'"][language="' + edgeLang + '"]');
+  var nodeImg = $(
+    '.node-palette img[value="' + nodeVal + '"][language="' + nodeLang + '"]'
+  );
+  var edgeImg = $(
+    '.edge-palette img[value="' + edgeVal + '"][language="' + edgeLang + '"]'
+  );
 
   // also set the icons in toolbar accordingly
-  $('#add-node-mode-icon').attr('src', nodeImg.attr('src'));
-  $('#add-node-mode-icon').attr('title', "Create a new " + nodeImg.attr('title'));
-  $('#add-edge-mode-icon').attr('src', edgeImg.attr('src'));
-  $('#add-edge-mode-icon').attr('title', "Create a new " + edgeImg.attr('title'));
+  $("#add-node-mode-icon").attr("src", nodeImg.attr("src"));
+  $("#add-node-mode-icon").attr(
+    "title",
+    "Create a new " + nodeImg.attr("title")
+  );
+  $("#add-edge-mode-icon").attr("src", edgeImg.attr("src"));
+  $("#add-edge-mode-icon").attr(
+    "title",
+    "Create a new " + edgeImg.attr("title")
+  );
 
   // unactivate all UI components
-  $('#select-mode-icon').parent().removeClass('selected-mode');
-  $('#add-edge-mode-icon').parent().removeClass('selected-mode');
-  $('#add-node-mode-icon').parent().removeClass('selected-mode');
-  $('#add-edge-mode-icon').parent().removeClass('selected-mode-sustainable');
-  $('#add-node-mode-icon').parent().removeClass('selected-mode-sustainable');
-  $('#marquee-zoom-mode-icon').parent().removeClass('selected-mode');
-  $('.node-palette img').addClass('inactive-palette-element');
-  $('.edge-palette img').addClass('inactive-palette-element');
-  $('.selected-mode-sustainable').removeClass('selected-mode-sustainable');
+  $("#select-mode-icon").parent().removeClass("selected-mode");
+  $("#add-edge-mode-icon").parent().removeClass("selected-mode");
+  $("#add-node-mode-icon").parent().removeClass("selected-mode");
+  $("#add-edge-mode-icon").parent().removeClass("selected-mode-sustainable");
+  $("#add-node-mode-icon").parent().removeClass("selected-mode-sustainable");
+  $("#marquee-zoom-mode-icon").parent().removeClass("selected-mode");
+  $(".node-palette img").addClass("inactive-palette-element");
+  $(".edge-palette img").addClass("inactive-palette-element");
+  $(".selected-mode-sustainable").removeClass("selected-mode-sustainable");
 
   // Node/edge palettes should be initialized according to default nodeVal and edgeVal
-  nodeImg.addClass('selected-mode');
-  edgeImg.addClass('selected-mode');
+  nodeImg.addClass("selected-mode");
+  edgeImg.addClass("selected-mode");
 
-  var modeHandler = require('./app-mode-handler');
+  var modeHandler = require("./app-mode-handler");
 
   // adjust UI components according to the params
-  if ( mode === 'selection-mode' ) {
-
-    $('#select-mode-icon').parent().addClass('selected-mode');
+  if (mode === "selection-mode") {
+    $("#select-mode-icon").parent().addClass("selected-mode");
 
     modeHandler.autoEnableMenuItems(true);
-  }
-  else if ( mode === 'add-node-mode' ) {
-
-    $('#add-node-mode-icon').parent().addClass('selected-mode');
-    $('.node-palette img').removeClass('inactive-palette-element');
+  } else if (mode === "add-node-mode") {
+    $("#add-node-mode-icon").parent().addClass("selected-mode");
+    $(".node-palette img").removeClass("inactive-palette-element");
 
     modeHandler.autoEnableMenuItems(false);
 
-    if ( sustainMode ) {
-      $('#add-node-mode-icon').parent().addClass('selected-mode-sustainable');
-      $('.node-palette .selected-mode').addClass('selected-mode-sustainable');
+    if (sustainMode) {
+      $("#add-node-mode-icon").parent().addClass("selected-mode-sustainable");
+      $(".node-palette .selected-mode").addClass("selected-mode-sustainable");
     }
-
-  }
-  else if ( mode === 'add-edge-mode' ) {
-
-    $('#add-edge-mode-icon').parent().addClass('selected-mode');
-    $('.edge-palette img').removeClass('inactive-palette-element');
+  } else if (mode === "add-edge-mode") {
+    $("#add-edge-mode-icon").parent().addClass("selected-mode");
+    $(".edge-palette img").removeClass("inactive-palette-element");
 
     modeHandler.autoEnableMenuItems(false);
 
-    if ( sustainMode ) {
-      $('#add-edge-mode-icon').parent().addClass('selected-mode-sustainable');
-      $('.edge-palette .selected-mode').addClass('selected-mode-sustainable');
+    if (sustainMode) {
+      $("#add-edge-mode-icon").parent().addClass("selected-mode-sustainable");
+      $(".edge-palette .selected-mode").addClass("selected-mode-sustainable");
     }
-
-  }
-  else if( mode === 'marquee-zoom-mode'){
-
-    $('#marquee-zoom-mode-icon').parent().addClass('selected-mode');
-
+  } else if (mode === "marquee-zoom-mode") {
+    $("#marquee-zoom-mode-icon").parent().addClass("selected-mode");
   }
 
   // adjust status of grid guide related icons in toolbar
 
   // get the current status of related variables for cy
-  var toggleEnableGuidelineAndSnap = appUtilities.getScratch(cy, 'toggleEnableGuidelineAndSnap');
-  var toggleShowGridEnableSnap = appUtilities.getScratch(cy, 'toggleShowGridEnableSnap');
+  var toggleEnableGuidelineAndSnap = appUtilities.getScratch(
+    cy,
+    "toggleEnableGuidelineAndSnap"
+  );
+  var toggleShowGridEnableSnap = appUtilities.getScratch(
+    cy,
+    "toggleShowGridEnableSnap"
+  );
 
   // adjust toggle-guidelines-snapping-icon icons accordingly
-  if (toggleEnableGuidelineAndSnap){
-    $('#toggle-guidelines-snapping-icon').addClass('toggle-mode-sustainable');
-  }
-  else{
-    $('#toggle-guidelines-snapping-icon').removeClass('toggle-mode-sustainable');
+  if (toggleEnableGuidelineAndSnap) {
+    $("#toggle-guidelines-snapping-icon").addClass("toggle-mode-sustainable");
+  } else {
+    $("#toggle-guidelines-snapping-icon").removeClass(
+      "toggle-mode-sustainable"
+    );
   }
 
   // adjust oggle-grid-snapping-icon accordingly
-  if (toggleShowGridEnableSnap){
-    $('#toggle-grid-snapping-icon').addClass('toggle-mode-sustainable');
-  }
-  else{
-     $('#toggle-grid-snapping-icon').removeClass('toggle-mode-sustainable');
+  if (toggleShowGridEnableSnap) {
+    $("#toggle-grid-snapping-icon").addClass("toggle-mode-sustainable");
+  } else {
+    $("#toggle-grid-snapping-icon").removeClass("toggle-mode-sustainable");
   }
 };
 
 // get id of the div panel for the given network id
 appUtilities.getNetworkPanelId = function (networkId) {
-  return 'sbgn-network-container-' + networkId;
+  return "sbgn-network-container-" + networkId;
 };
 
 // get id of the tab for the the given network id
 appUtilities.getNetworkTabId = function (networkId) {
-  return 'sbgn-network-tab-' + networkId;
+  return "sbgn-network-tab-" + networkId;
 };
 
 // get network id by given network key (would be tab or panel id or selector or even the network id itself)
 // that is basically the remaining part of the string after the last occurance of '-'
 appUtilities.getNetworkId = function (networkKey) {
-
   // if the networkKey is a number it must already be the network id, so no need to process
-  if (typeof networkKey === 'number') {
+  if (typeof networkKey === "number") {
     return networkKey;
   }
 
   // get the last index of '-'
-  var index =  networkKey.lastIndexOf("-");
+  var index = networkKey.lastIndexOf("-");
 
   // get the remaining part of string after the last occurance of '-'
-  var rem = networkKey.substring(index+1);
+  var rem = networkKey.substring(index + 1);
 
   // id is the integer representation of the remaining string
   var id = parseInt(rem);
@@ -220,25 +231,23 @@ appUtilities.getNetworkId = function (networkKey) {
 // get selector of the div panel for the given network id
 // it is basically '#' + panelId
 appUtilities.getNetworkPanelSelector = function (networkId) {
-  return '#' + this.getNetworkPanelId(networkId);
+  return "#" + this.getNetworkPanelId(networkId);
 };
 
 // selector of the tab for the the given network id
 // it is basically '#' + tabId
 appUtilities.getNetworkTabSelector = function (networkId) {
-  return '#' + this.getNetworkTabId(networkId);
+  return "#" + this.getNetworkTabId(networkId);
 };
 
 // get the default map name for a network with the given id
 // basically like "Pathway #X"
 appUtilities.getDefaultMapName = function (networkId) {
-
-  return 'Pathway #' + networkId;
+  return "Pathway #" + networkId;
 };
 
 // update the string that represents the tab for the given networkKey
 appUtilities.updateNetworkTabDesc = function (networkKey) {
-
   // get network id for the given network key (would be networkId, networkTabId, networkPanelId)
   var networkId = this.getNetworkId(networkKey);
 
@@ -255,8 +264,7 @@ appUtilities.updateNetworkTabDesc = function (networkKey) {
   var mapName = this.getScratch(cy).currentGeneralProperties.mapName;
 
   // if mapName is empty set it to "Pathway" #219
-  if (!mapName)
-    mapName = "Pathway";
+  if (!mapName) mapName = "Pathway";
 
   // update the content of 'a' element that is contained by the related tab
   var relatedTab = document.getElementById(tabId).childNodes[1];
@@ -267,16 +275,15 @@ appUtilities.updateNetworkTabDesc = function (networkKey) {
 // map given chise instance to the given network id
 // if key param is a cy instance or tab/panel id/selector use the actual network id
 appUtilities.putToChiseInstances = function (key, chiseInstance) {
-
   // if key is a cy instance go for its container id
-  var networkId = typeof key === 'object' ? key.container().id : key;
+  var networkId = typeof key === "object" ? key.container().id : key;
 
   // if the network id parameter is the network tab/panel id/selector get the actual network id
   networkId = this.getNetworkId(networkId);
 
   // Throw error if there is already an instance mapped for the networkId
-  if ( this.networkIdToChiseInstance[networkId] ) {
-    throw 'A chise instance is already mapped for network id ' + networkId;
+  if (this.networkIdToChiseInstance[networkId]) {
+    throw "A chise instance is already mapped for network id " + networkId;
   }
 
   // perfrom the actual mapping
@@ -286,16 +293,15 @@ appUtilities.putToChiseInstances = function (key, chiseInstance) {
 // remove the chise instance mapped to the given key
 // if key param is a cy instance or tab/panel id/selector use the actual network id
 appUtilities.removeFromChiseInstances = function (key) {
-
   // if key is a cy instance go for its container id
-  var networkId = typeof key === 'object' ? key.container().id : key;
+  var networkId = typeof key === "object" ? key.container().id : key;
 
   // if the network id parameter is the network tab/panel id/selector get the actual network id
   networkId = this.getNetworkId(networkId);
 
   // Throw error if there is no instance mapped for the networkId
-  if ( !this.networkIdToChiseInstance[networkId] ) {
-    throw 'No chise instance is mapped for network id ' + networkId;
+  if (!this.networkIdToChiseInstance[networkId]) {
+    throw "No chise instance is mapped for network id " + networkId;
   }
 
   // perform the actual removal
@@ -305,9 +311,8 @@ appUtilities.removeFromChiseInstances = function (key) {
 // get the chise instance mapped to the given key
 // if key param is a cy instance or tab/panel id/selector use the actual network id
 appUtilities.getChiseInstance = function (key) {
-
   // if key is a cy instance go for its container id
-  var networkId = typeof key === 'object' ? key.container().id : key;
+  var networkId = typeof key === "object" ? key.container().id : key;
 
   // if the network id parameter is the network tab/panel id/selector get the actual network id
   networkId = this.getNetworkId(networkId);
@@ -319,24 +324,22 @@ appUtilities.getChiseInstance = function (key) {
 // If there is just one network then network tabs should not be rendered.
 // This function is to adjust that.
 appUtilities.adjustVisibilityOfNetworkTabs = function () {
-
-  var tabsContainer = $('#network-tabs-list-container');
+  var tabsContainer = $("#network-tabs-list-container");
 
   // if there is just one tab hide tabs container else show it
-  if ( this.networkIdsStack.length === 1 ) {
+  if (this.networkIdsStack.length === 1) {
     tabsContainer.hide();
-  }
-  else {
+  } else {
     tabsContainer.show();
   }
-
 };
 
 // creates a new network and returns the new chise.js instance that is created for this network
 appUtilities.createNewNetwork = function () {
-
   // id of the div panel associated with the new network
-  var networkPanelId = appUtilities.getNetworkPanelId(appUtilities.nextNetworkId);
+  var networkPanelId = appUtilities.getNetworkPanelId(
+    appUtilities.nextNetworkId
+  );
 
   // id of the tab for the new network
   var networkTabId = appUtilities.getNetworkTabId(appUtilities.nextNetworkId);
@@ -346,16 +349,34 @@ appUtilities.createNewNetwork = function () {
 
   // create physical html components for the new network
   // use map name as the tab description
-  appUtilities.createPhysicalNetworkComponents(networkPanelId, networkTabId, mapName);
+  appUtilities.createPhysicalNetworkComponents(
+    networkPanelId,
+    networkTabId,
+    mapName
+  );
 
   // generate network panel selector from the network panel id
-  var networkPanelSelector = appUtilities.getNetworkPanelSelector(appUtilities.nextNetworkId);
+  var networkPanelSelector = appUtilities.getNetworkPanelSelector(
+    appUtilities.nextNetworkId
+  );
 
   // initialize current properties for the new instance by copying the default properties
-  var currentLayoutProperties = jquery.extend(true, {}, appUtilities.defaultLayoutProperties);
-  var currentGridProperties = jquery.extend(true, {}, appUtilities.defaultGridProperties);
-  var currentGeneralProperties = jquery.extend(true, {}, appUtilities.defaultGeneralProperties);
-  
+  var currentLayoutProperties = jquery.extend(
+    true,
+    {},
+    appUtilities.defaultLayoutProperties
+  );
+  var currentGridProperties = jquery.extend(
+    true,
+    {},
+    appUtilities.defaultGridProperties
+  );
+  var currentGeneralProperties = jquery.extend(
+    true,
+    {},
+    appUtilities.defaultGeneralProperties
+  );
+
   // update the map name with the default map name specific for network id
   currentGeneralProperties.mapName = mapName;
 
@@ -364,34 +385,48 @@ appUtilities.createNewNetwork = function () {
     networkContainerSelector: networkPanelSelector,
     // whether to fit label to nodes
     fitLabelsToNodes: function () {
-      var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
+      var currentGeneralProperties = appUtilities.getScratch(
+        newInst.getCy(),
+        "currentGeneralProperties"
+      );
       return currentGeneralProperties.fitLabelsToNodes;
     },
     // whether to fit label to nodes
     fitLabelsToInfoboxes: function () {
-      var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
+      var currentGeneralProperties = appUtilities.getScratch(
+        newInst.getCy(),
+        "currentGeneralProperties"
+      );
       return currentGeneralProperties.fitLabelsToInfoboxes;
     },
     // dynamic label size it may be 'small', 'regular', 'large'
     dynamicLabelSize: function () {
-      var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
+      var currentGeneralProperties = appUtilities.getScratch(
+        newInst.getCy(),
+        "currentGeneralProperties"
+      );
       return currentGeneralProperties.dynamicLabelSize;
     },
     // Whether to infer nesting on load
     inferNestingOnLoad: function () {
-      var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
+      var currentGeneralProperties = appUtilities.getScratch(
+        newInst.getCy(),
+        "currentGeneralProperties"
+      );
       return currentGeneralProperties.inferNestingOnLoad;
     },
     // percentage used to calculate compound paddings
-    compoundPadding: currentGeneralProperties.compoundPadding
-    
+    compoundPadding: currentGeneralProperties.compoundPadding,
+
     /* function () {
       var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
       return currentGeneralProperties.compoundPadding;
-    } */,
-    // arrow size changed by a slider on a scale from 0.5-2
+    } */ // arrow size changed by a slider on a scale from 0.5-2
     arrowScale: function () {
-      var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
+      var currentGeneralProperties = appUtilities.getScratch(
+        newInst.getCy(),
+        "currentGeneralProperties"
+      );
       return currentGeneralProperties.arrowScale;
     },
     extraCompartmentPadding: currentGeneralProperties.extraCompartmentPadding,
@@ -400,36 +435,54 @@ appUtilities.createNewNetwork = function () {
     // Whether to adjust node label font size automatically.
     // If this option return false do not adjust label sizes according to node height uses node.data('labelsize')
     // instead of doing it.
-    adjustNodeLabelFontSizeAutomatically: function() {
-      var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
+    adjustNodeLabelFontSizeAutomatically: function () {
+      var currentGeneralProperties = appUtilities.getScratch(
+        newInst.getCy(),
+        "currentGeneralProperties"
+      );
       return currentGeneralProperties.adjustNodeLabelFontSizeAutomatically;
     },
     // whether to improve flow (swap nodes)
     improveFlow: function () {
-      var currentLayoutProperties = appUtilities.getScratch(newInst.getCy(), 'currentLayoutProperties');
+      var currentLayoutProperties = appUtilities.getScratch(
+        newInst.getCy(),
+        "currentLayoutProperties"
+      );
       return currentLayoutProperties.improveFlow;
     },
     undoable: appUtilities.undoable,
-    undoableDrag: function() {
+    undoableDrag: function () {
       return appUtilities.ctrlKeyDown !== true;
     },
     highlightColor: currentGeneralProperties.highlightColor,
-    extraHighlightThickness: currentGeneralProperties.extraHighlightThickness 
+    extraHighlightThickness: currentGeneralProperties.extraHighlightThickness,
   });
-  
+
   // set scracth pad of the related cy instance with these properties
-  appUtilities.setScratch(newInst.getCy(), 'currentLayoutProperties', currentLayoutProperties);
-  appUtilities.setScratch(newInst.getCy(), 'currentGridProperties', currentGridProperties);
-  appUtilities.setScratch(newInst.getCy(), 'currentGeneralProperties', currentGeneralProperties);
-  
+  appUtilities.setScratch(
+    newInst.getCy(),
+    "currentLayoutProperties",
+    currentLayoutProperties
+  );
+  appUtilities.setScratch(
+    newInst.getCy(),
+    "currentGridProperties",
+    currentGridProperties
+  );
+  appUtilities.setScratch(
+    newInst.getCy(),
+    "currentGeneralProperties",
+    currentGeneralProperties
+  );
+
   // init the current file name for the map
-  appUtilities.setScratch(newInst.getCy(), 'currentFileName', 'new_file.nwt');
+  appUtilities.setScratch(newInst.getCy(), "currentFileName", "new_file.nwt");
 
   // register cy extensions, bind cy events etc.
-  var appCy = require('./app-cy');
+  var appCy = require("./app-cy");
   appCy(newInst);
 
-  var modeHandler = require('./app-mode-handler');
+  var modeHandler = require("./app-mode-handler");
   modeHandler.initModeProperties(newInst.getCy());
 
   // maintain networkIdToChiseInstance map
@@ -448,9 +501,9 @@ appUtilities.createNewNetwork = function () {
   appUtilities.chooseNetworkTab(appUtilities.nextNetworkId);
 
   // activate palette tab
-  if (!$('#inspector-palette-tab').hasClass('active')) {
-    $('#inspector-palette-tab a').tab('show');
-    $('#inspector-style-tab a').blur();
+  if (!$("#inspector-palette-tab").hasClass("active")) {
+    $("#inspector-palette-tab a").tab("show");
+    $("#inspector-style-tab a").blur();
   }
 
   // increment new network id
@@ -465,7 +518,6 @@ appUtilities.createNewNetwork = function () {
 
 // close the active network
 appUtilities.closeActiveNetwork = function () {
-
   // active network id is the one that is at the top of the stack
   // pop and get it
   var activeNetworkId = this.networkIdsStack.pop();
@@ -478,15 +530,13 @@ appUtilities.closeActiveNetwork = function () {
 
   // If there is no other network after closing the active one create a new network
   // otherwise just select the tab for the new active network
-  if ( this.networkIdsStack.length === 0 ) {
-
+  if (this.networkIdsStack.length === 0) {
     // create a new network
     this.createNewNetwork();
-  }
-  else {
-
+  } else {
     // get the new active network id from the top of the stack
-    var newActiveNetworkId = this.networkIdsStack[this.networkIdsStack.length - 1];
+    var newActiveNetworkId =
+      this.networkIdsStack[this.networkIdsStack.length - 1];
 
     // choose the network tab for the new active network
     this.chooseNetworkTab(newActiveNetworkId);
@@ -494,12 +544,10 @@ appUtilities.closeActiveNetwork = function () {
 
   // adjust the visibility of network tabs
   this.adjustVisibilityOfNetworkTabs();
-
 };
 
 // removes physical html components for the network that is represented by given networkKey
 appUtilities.removePhysicalNetworkComponents = function (networkKey) {
-
   // use the actual network id (network key may not be equal to it)
   var networkId = appUtilities.getNetworkId(networkKey);
 
@@ -515,7 +563,6 @@ appUtilities.removePhysicalNetworkComponents = function (networkKey) {
 };
 
 appUtilities.dropHandler = function (ev) {
-
   // Prevent default behavior (Prevent file from being opened)
   ev.preventDefault();
 
@@ -523,7 +570,7 @@ appUtilities.dropHandler = function (ev) {
     // Use DataTransferItemList interface to access the file(s)
     for (var i = 0; i < ev.originalEvent.dataTransfer.items.length; i++) {
       // If dropped items aren't files, reject them
-      if (ev.originalEvent.dataTransfer.items[i].kind === 'file') {
+      if (ev.originalEvent.dataTransfer.items[i].kind === "file") {
         var file = ev.originalEvent.dataTransfer.items[i].getAsFile();
         $("#file-input").trigger("change", [file]);
       }
@@ -544,7 +591,6 @@ appUtilities.dragOverHandler = function (ev) {
 };
 
 function removeDragData(ev) {
-
   if (ev.originalEvent.dataTransfer.items) {
     // Use DataTransferItemList interface to remove the drag data
     ev.originalEvent.dataTransfer.items.clear();
@@ -554,46 +600,59 @@ function removeDragData(ev) {
   }
 }
 
-appUtilities.createPhysicalNetworkComponents = function (panelId, tabId, tabDesc) {
-
+appUtilities.createPhysicalNetworkComponents = function (
+  panelId,
+  tabId,
+  tabDesc
+) {
   // the component that includes the tab panels
-  var panelsParent = $('#network-panels-container');
+  var panelsParent = $("#network-panels-container");
 
-  var newPanelStr = '<div id="' + panelId + '" class="tab-pane fade network-panel"></div>';
+  var newPanelStr =
+    '<div id="' + panelId + '" class="tab-pane fade network-panel"></div>';
 
   // create new panel inside the panels parent
   panelsParent.append(newPanelStr);
 
-  $("#" + panelId).on("drop", function(event){
+  $("#" + panelId).on("drop", function (event) {
     appUtilities.dropHandler(event);
     $("#network-panels-container").removeClass("drag-and-drop-file");
   });
-  $("#" + panelId).on("dragover", function(event){
+  $("#" + panelId).on("dragover", function (event) {
     appUtilities.dragOverHandler(event);
     $("#network-panels-container").addClass("drag-and-drop-file");
   });
-  $("#" + panelId).on("dragleave", function(event){
+  $("#" + panelId).on("dragleave", function (event) {
     $("#network-panels-container").removeClass("drag-and-drop-file");
   });
 
   // the container that lists the network tabs
-  var tabsList = $('#network-tabs-list');
-
-  var newTabStr = '<li id="' + tabId + '" class="chise-tab chise-network-tab">\n\
-                  <a data-toggle="tab" href="#' + panelId + '">\n\
-                  <button class="close closeTab '+tabId+'closeTab" type="button" >&times</button>' + tabDesc + '</a></li>';
-
-  $('ul').on('click', 'button.' + tabId +'closeTab', function() {
+  var tabsList = $("#network-tabs-list");
+
+  var newTabStr =
+    '<li id="' +
+    tabId +
+    '" class="chise-tab chise-network-tab">\n\
+                  <a data-toggle="tab" href="#' +
+    panelId +
+    '">\n\
+                  <button class="close closeTab ' +
+    tabId +
+    'closeTab" type="button" >&times</button>' +
+    tabDesc +
+    "</a></li>";
+
+  $("ul").on("click", "button." + tabId + "closeTab", function () {
     var networkId = tabId.substring(17);
     appUtilities.setActiveNetwork(networkId);
     appUtilities.closeActiveNetwork();
   });
 
-  $('ul').on('mousedown', '#' + tabId, function(e) {
-    if( e.which == 2 ) {
-     var networkId = tabId.substring(17);
-     appUtilities.setActiveNetwork(networkId);
-     appUtilities.closeActiveNetwork();
+  $("ul").on("mousedown", "#" + tabId, function (e) {
+    if (e.which == 2) {
+      var networkId = tabId.substring(17);
+      appUtilities.setActiveNetwork(networkId);
+      appUtilities.closeActiveNetwork();
     }
   });
   // create new tab inside the list of network tabs
@@ -602,7 +661,6 @@ appUtilities.createPhysicalNetworkComponents = function (panelId, tabId, tabDesc
 
 // basically get the active chise instance
 appUtilities.getActiveChiseInstance = function () {
-
   // get the networkId of the active network that is at the top of networkIdsStack
   var activeNetworkId = this.networkIdsStack[this.networkIdsStack.length - 1];
 
@@ -612,7 +670,6 @@ appUtilities.getActiveChiseInstance = function () {
 
 // sets the active network through the network key to be activated
 appUtilities.setActiveNetwork = function (networkKey) {
-
   // get chise instance for network key
   var chiseInstance = this.getChiseInstance(networkKey);
 
@@ -623,8 +680,8 @@ appUtilities.setActiveNetwork = function (networkKey) {
   var oldIndex = this.networkIdsStack.indexOf(networkId);
 
   // if there is no existing network with this id throw an error
-  if ( oldIndex === -1 ) {
-    throw 'Network with id ' + networkId + ' cannot be found';
+  if (oldIndex === -1) {
+    throw "Network with id " + networkId + " cannot be found";
   }
 
   // remove the network from the old index
@@ -635,7 +692,6 @@ appUtilities.setActiveNetwork = function (networkKey) {
 
   // adjust UI components for †he activated network
   this.adjustUIComponents();
-
 };
 
 // chooses a network tab programatically
@@ -647,14 +703,13 @@ appUtilities.chooseNetworkTab = function (networkKey) {
   var networkTabId = this.getNetworkTabId(networkId);
 
   // if network tab is not activated activate it
-  if (!$('#' + networkTabId).hasClass('active')) {
-    $('#' + networkTabId + ' a').tab('show');
+  if (!$("#" + networkTabId).hasClass("active")) {
+    $("#" + networkTabId + " a").tab("show");
   }
 };
 
 // returns the sbgnviz.js instance associated with the currently active netwrok
 appUtilities.getActiveSbgnvizInstance = function () {
-
   var chiseInstance = this.getActiveChiseInstance();
 
   return chiseInstance ? chiseInstance.getSbgnvizInstance() : false;
@@ -662,7 +717,6 @@ appUtilities.getActiveSbgnvizInstance = function () {
 
 // returns the cy instance associated with the currently active network
 appUtilities.getActiveCy = function () {
-
   var chiseInstance = this.getActiveChiseInstance();
 
   return chiseInstance ? chiseInstance.getCy() : false;
@@ -670,19 +724,18 @@ appUtilities.getActiveCy = function () {
 
 // returns active network panel
 appUtilities.getActiveNetworkPanel = function () {
-
   var activeCy = this.getActiveCy();
 
   return activeCy ? activeCy.container() : false;
 };
 
 appUtilities.defaultLayoutProperties = {
-  name: 'fcose',
+  name: "fcose",
   quality: "default",
   samplingType: true,
   sampleSize: 25,
   nodeSeparation: 75,
-  piTol: 0.0000001,  
+  piTol: 0.0000001,
   nodeDimensionsIncludeLabels: false,
   nodeRepulsion: 2000,
   idealEdgeLength: 30,
@@ -690,13 +743,13 @@ appUtilities.defaultLayoutProperties = {
   nestingFactor: 0.1,
   gravity: 0.25,
   numIter: 2500,
-  fit: true, 
+  fit: true,
   padding: 20,
-  animationEasing: 'cubic-bezier(0.17,0.72,0.41,0.98)',
-  animate: 'end',
+  animationEasing: "cubic-bezier(0.17,0.72,0.41,0.98)",
+  animate: "end",
   animationDuration: 2000,
   randomize: false,
-  tile: true,  
+  tile: true,
   tilingPaddingVertical: 12,
   tilingPaddingHorizontal: 12,
   gravityRangeCompound: 1.5,
@@ -704,7 +757,7 @@ appUtilities.defaultLayoutProperties = {
   gravityRange: 3.8,
   initialEnergyOnIncremental: 0.3,
   improveFlow: true,
-  packComponents: true 
+  packComponents: true,
 };
 
 appUtilities.defaultGridProperties = {
@@ -735,12 +788,12 @@ appUtilities.defaultGridProperties = {
 };
 
 appUtilities.defaultGeneralProperties = {
-  compoundPadding: 0, // intial compound padding for all compound nodes 
+  compoundPadding: 0, // intial compound padding for all compound nodes
   extraCompartmentPadding: 14, // extra padding for compound nodes except for complexes
-  extraComplexPadding: 10,  //extra padding for complex compound nodes, refer to sbgnviz elementUtilities.getComplexPadding() function to see details
+  extraComplexPadding: 10, //extra padding for complex compound nodes, refer to sbgnviz elementUtilities.getComplexPadding() function to see details
   arrowScale: 1.25,
   showComplexName: true,
-  dynamicLabelSize: 'regular',
+  dynamicLabelSize: "regular",
   inferNestingOnLoad: false,
   fitLabelsToNodes: false,
   fitLabelsToInfoboxes: false,
@@ -751,19 +804,21 @@ appUtilities.defaultGeneralProperties = {
   enablePorts: true,
   enableSIFTopologyGrouping: false,
   allowCompoundNodeResize: true,
-  mapColorScheme: 'black_white',
-  mapColorSchemeStyle: 'solid',
-  mapType: function() {return (appUtilities.getActiveChiseInstance().getMapType() || "Unknown");},
+  mapColorScheme: "black_white",
+  mapColorSchemeStyle: "solid",
+  mapType: function () {
+    return appUtilities.getActiveChiseInstance().getMapType() || "Unknown";
+  },
   mapName: "",
   mapDescription: "",
   experimentDescription: "",
-  highlightColor: '#0B9BCD', //the color code used when initializing viewUtilities in app-cy.js
-  extraHighlightThickness: 2
+  highlightColor: "#0B9BCD", //the color code used when initializing viewUtilities in app-cy.js
+  extraHighlightThickness: 2,
 };
 
 appUtilities.setFileContent = function (fileName) {
-  var span = document.getElementById('file-name');
-  var displayedSpan = document.getElementById('displayed-file-name');
+  var span = document.getElementById("file-name");
+  var displayedSpan = document.getElementById("displayed-file-name");
   while (span.firstChild) {
     span.removeChild(span.firstChild);
   }
@@ -773,42 +828,49 @@ appUtilities.setFileContent = function (fileName) {
   span.appendChild(document.createTextNode(fileName));
   if (fileName.length <= 40) {
     displayedSpan.appendChild(document.createTextNode(fileName));
+  } else {
+    displayedSpan.appendChild(
+      document.createTextNode(
+        fileName.substring(0, 34) +
+          "..." +
+          fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length)
+      )
+    );
   }
-  else {
-    displayedSpan.appendChild(document.createTextNode(fileName.substring(0, 34) + "..." + fileName.substring(fileName.lastIndexOf('.')+1, fileName.length)));
-  };
 
-  displayedSpan.style.display = 'block';
-  span.style.display = 'none';
+  displayedSpan.style.display = "block";
+  span.style.display = "none";
 };
 
 appUtilities.triggerLayout = function (_cy, randomize) {
-
   // use parametrized cy if exists. Otherwise use the recently active cy
   var cy = _cy || this.getActiveCy();
 
   // access the current general properties of cy
-  var currentGeneralProperties = this.getScratch(cy, 'currentGeneralProperties');
+  var currentGeneralProperties = this.getScratch(
+    cy,
+    "currentGeneralProperties"
+  );
 
   // access the current layout properties of cy
-  var currentLayoutProperties = this.getScratch(cy, 'currentLayoutProperties');
+  var currentLayoutProperties = this.getScratch(cy, "currentLayoutProperties");
 
   // If 'animate-on-drawing-changes' is true then animate option must be true instead of false
   var preferences = {
-    animate: currentGeneralProperties.animateOnDrawingChanges ? true : false
+    animate: currentGeneralProperties.animateOnDrawingChanges ? true : false,
   };
 
   // if randomize parameter is defined set it as a preference
   // 'fit' preference must be the same of 'randomize' parameter
   // in that case
-  if ( randomize !== undefined ) {
+  if (randomize !== undefined) {
     preferences.randomize = randomize;
     preferences.fit = randomize;
   }
 
-//  if (currentLayoutProperties.animate === 'during') {
-//    delete preferences.animate;
-//  }
+  //  if (currentLayoutProperties.animate === 'during') {
+  //    delete preferences.animate;
+  //  }
 
   // access chise instance related to cy
   var chiseInstance = appUtilities.getChiseInstance(cy);
@@ -818,61 +880,75 @@ appUtilities.triggerLayout = function (_cy, randomize) {
 };
 
 appUtilities.getExpandCollapseOptions = function (_cy) {
-
   var self = this;
 
   return {
     fisheye: function () {
-
       // use parametrized cy if exists. Otherwise use the recently active cy
       var cy = _cy || self.getActiveCy();
 
-      return self.getScratch(cy, 'currentGeneralProperties').rearrangeOnComplexityManagement;
+      return self.getScratch(cy, "currentGeneralProperties")
+        .rearrangeOnComplexityManagement;
     },
     animate: function () {
-
       // use parametrized cy if exists. Otherwise use the recently active cy
       var cy = _cy || self.getActiveCy();
 
-      return self.getScratch(cy, 'currentGeneralProperties').animateOnDrawingChanges;
+      return self.getScratch(cy, "currentGeneralProperties")
+        .animateOnDrawingChanges;
     },
     layoutBy: function () {
-
       // use parametrized cy if exists. Otherwise use the recently active cy
       var cy = _cy || self.getActiveCy();
 
-      if ( !self.getScratch(cy, 'currentGeneralProperties').recalculateLayoutOnComplexityManagement ) {
-//        cy.trigger('fit-units-after-expandcollapse');
+      if (
+        !self.getScratch(cy, "currentGeneralProperties")
+          .recalculateLayoutOnComplexityManagement
+      ) {
+        //        cy.trigger('fit-units-after-expandcollapse');
         return;
       }
       self.triggerLayout(cy, false);
-//      cy.trigger('fit-units-after-expandcollapse');
+      //      cy.trigger('fit-units-after-expandcollapse');
     },
     expandCollapseCueSize: 12,
     expandCollapseCuePosition: function (node) {
+      // use parametrized cy if exists. Otherwise use the recently active cy
+      var cy = _cy || self.getActiveCy();
 
-       // use parametrized cy if exists. Otherwise use the recently active cy
-       var cy = _cy || self.getActiveCy();
-
-       var offset = 1, rectSize = 12; // this is the expandCollapseCueSize;
-       var size = cy.zoom() < 1 ? rectSize / (2*cy.zoom()) : rectSize / 2;
-       var x = node.position('x') - node.width() / 2 - parseFloat(node.css('padding-left'))
-           + parseFloat(node.css('border-width')) + size + offset;
-       if (node.data("class") == "compartment"){
-           var y  = node.position('y') - node.outerHeight() / 2  + Math.min(15, node.outerHeight()*0.05)
-               + parseFloat(node.css('border-width'))+ size;
-       } else {
-           var y = node.position('y') - node.height() / 2 - parseFloat(node.css('padding-top'))
-               + parseFloat(node.css('border-width')) + size + offset;
-       };
-
-       return {'x': x, 'y': y};
+      var offset = 1,
+        rectSize = 12; // this is the expandCollapseCueSize;
+      var size = cy.zoom() < 1 ? rectSize / (2 * cy.zoom()) : rectSize / 2;
+      var x =
+        node.position("x") -
+        node.width() / 2 -
+        parseFloat(node.css("padding-left")) +
+        parseFloat(node.css("border-width")) +
+        size +
+        offset;
+      if (node.data("class") == "compartment") {
+        var y =
+          node.position("y") -
+          node.outerHeight() / 2 +
+          Math.min(15, node.outerHeight() * 0.05) +
+          parseFloat(node.css("border-width")) +
+          size;
+      } else {
+        var y =
+          node.position("y") -
+          node.height() / 2 -
+          parseFloat(node.css("padding-top")) +
+          parseFloat(node.css("border-width")) +
+          size +
+          offset;
+      }
+
+      return { x: x, y: y };
     },
   };
 };
 
 appUtilities.dynamicResize = function () {
-
   // get window inner width and inner height that includes scrollbars when they are rendered
   // using $(window).width() would be problematic when scrolls are visible
   // please see: https://stackoverflow.com/questions/19582862/get-browser-window-width-including-scrollbar
@@ -883,29 +959,27 @@ appUtilities.dynamicResize = function () {
   var canvasWidth = 1000;
   var canvasHeight = 680;
 
-  if (windowWidth > canvasWidth)
-  {
+  if (windowWidth > canvasWidth) {
     //This is the margin on left and right of the main content when the page is
     //displayed
     var mainContentMargin = 10;
-    $("#network-panels-container").width(windowWidth  * 0.8 - mainContentMargin);
-    $("#sbgn-inspector").width(windowWidth  * 0.2 - mainContentMargin);
+    $("#network-panels-container").width(windowWidth * 0.8 - mainContentMargin);
+    $("#sbgn-inspector").width(windowWidth * 0.2 - mainContentMargin);
     var w = $("#sbgn-inspector-and-canvas").width();
     $(".nav-menu").width(w);
     $(".navbar").width(w);
-//    $("#sbgn-info-content").width(windowWidth * 0.85);
+    //    $("#sbgn-info-content").width(windowWidth * 0.85);
     $("#sbgn-toolbar").width(w);
     $("#network-tabs-list-container").width(w);
   }
 
-  if (windowHeight > canvasHeight)
-  {
+  if (windowHeight > canvasHeight) {
     $("#network-panels-container").height(windowHeight * 0.85);
     $("#sbgn-inspector").height(windowHeight * 0.85);
   }
 
   // trigger an event to notify that newt components are dynamically resized
-  $(document).trigger('newtAfterDynamicResize');
+  $(document).trigger("newtAfterDynamicResize");
 };
 /*
 appUtilities.nodeQtipFunction = function (node) {
@@ -944,7 +1018,6 @@ appUtilities.nodeQtipFunction = function (node) {
 };
 */
 appUtilities.refreshUndoRedoButtonsStatus = function (_cy) {
-
   // use _cy param if it is set else use the recently active cy instance
   var cy = _cy || appUtilities.getActiveCy();
 
@@ -954,16 +1027,14 @@ appUtilities.refreshUndoRedoButtonsStatus = function (_cy) {
   // refresh status of undo button accordingly
   if (ur.isUndoStackEmpty()) {
     $("#undo-last-action").parent("li").addClass("disabled");
-  }
-  else {
+  } else {
     $("#undo-last-action").parent("li").removeClass("disabled");
   }
 
   // refresh status of redo button accordingly
   if (ur.isRedoStackEmpty()) {
     $("#redo-last-action").parent("li").addClass("disabled");
-  }
-  else {
+  } else {
     $("#redo-last-action").parent("li").removeClass("disabled");
   }
 };
@@ -975,938 +1046,945 @@ appUtilities.resetUndoRedoButtons = function () {
 
 // Enable drag and drop mode
 appUtilities.enableDragAndDropMode = function (_cy) {
-
   // use _cy param if it is set else use the recently active cy instance
   var cy = _cy || appUtilities.getActiveCy();
 
-  appUtilities.setScratch(cy, 'dragAndDropModeEnabled', true);
+  appUtilities.setScratch(cy, "dragAndDropModeEnabled", true);
 
-  $(cy.container()).find('canvas').addClass("target-cursor");
+  $(cy.container()).find("canvas").addClass("target-cursor");
 
   cy.autolock(true);
   cy.autounselectify(true);
-  cy.boxSelectionEnabled( false );
+  cy.boxSelectionEnabled(false);
 };
 
 // Disable drag and drop mode
 appUtilities.disableDragAndDropMode = function (_cy) {
-
   // use _cy param if it is set else use the recently active cy instance
   var cy = _cy || appUtilities.getActiveCy();
 
-  appUtilities.setScratch(cy, 'dragAndDropModeEnabled', null);
-  appUtilities.setScratch(cy, 'nodesToDragAndDrop', null);
+  appUtilities.setScratch(cy, "dragAndDropModeEnabled", null);
+  appUtilities.setScratch(cy, "nodesToDragAndDrop", null);
 
-  $(cy.container()).find('canvas').removeClass("target-cursor");
+  $(cy.container()).find("canvas").removeClass("target-cursor");
 
   cy.autolock(false);
   cy.autounselectify(false);
-  cy.boxSelectionEnabled( true );
+  cy.boxSelectionEnabled(true);
 };
 
 // Show neighbors of given eles and perform incremental layout afterward if Rearrange option is checked
 appUtilities.showHiddenNeighbors = function (eles, _chiseInstance) {
+  // check _chiseInstance param if it is set use it else use recently active chise instance
+  var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
 
-    // check _chiseInstance param if it is set use it else use recently active chise instance
-    var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
-
-    // get the associated cy instance
-    var cy = chiseInstance.getCy();
-
-    // get current general properties for assocated cy instance
-    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+  // get the associated cy instance
+  var cy = chiseInstance.getCy();
 
-    var extendedList = chiseInstance.elementUtilities.extendNodeList(eles);
-    if (currentGeneralProperties.recalculateLayoutOnComplexityManagement )
-    {
-        //Put them near node, show and perform incremental layout
-        chiseInstance.showAndPerformLayout(eles, extendedList, this.triggerLayout.bind(this, cy, false));
-    }
-    else
-    {
-        //Just show them
-        chiseInstance.showEles(extendedList);
-    }
+  // get current general properties for assocated cy instance
+  var currentGeneralProperties = appUtilities.getScratch(
+    cy,
+    "currentGeneralProperties"
+  );
+
+  var extendedList = chiseInstance.elementUtilities.extendNodeList(eles);
+  if (currentGeneralProperties.recalculateLayoutOnComplexityManagement) {
+    //Put them near node, show and perform incremental layout
+    chiseInstance.showAndPerformLayout(
+      eles,
+      extendedList,
+      this.triggerLayout.bind(this, cy, false)
+    );
+  } else {
+    //Just show them
+    chiseInstance.showEles(extendedList);
+  }
 };
 
 // Show neighbors of given eles and perform incremental layout afterward if Rearrange option is checked
 appUtilities.showAll = function (_chiseInstance) {
+  // check _chiseInstance param if it is set use it else use recently active chise instance
+  var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
 
-    // check _chiseInstance param if it is set use it else use recently active chise instance
-    var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
-
-    // get the associated cy instance
-    var cy = chiseInstance.getCy();
+  // get the associated cy instance
+  var cy = chiseInstance.getCy();
 
-    // get current general properties for cy instance
-    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+  // get current general properties for cy instance
+  var currentGeneralProperties = appUtilities.getScratch(
+    cy,
+    "currentGeneralProperties"
+  );
 
-    if (currentGeneralProperties.recalculateLayoutOnComplexityManagement )
-    {
-      //Show all and perform incremental layout
-     chiseInstance.showAllAndPerformLayout(this.triggerLayout.bind(this, cy, false));
-    }
-    else
-    {
-      //Just show them all
-      chiseInstance.showAll();
-    }
+  if (currentGeneralProperties.recalculateLayoutOnComplexityManagement) {
+    //Show all and perform incremental layout
+    chiseInstance.showAllAndPerformLayout(
+      this.triggerLayout.bind(this, cy, false)
+    );
+  } else {
+    //Just show them all
+    chiseInstance.showAll();
+  }
 };
 
 // Hides nodes and perform incremental layout afterward if Rearrange option is checked
-appUtilities.hideNodesSmart = function(eles, _chiseInstance) {
-
-    // check _chiseInstance param if it is set use it else use recently active chise instance
-    var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
-
-    // get the associated cy instance
-    var cy = chiseInstance.getCy();
+appUtilities.hideNodesSmart = function (eles, _chiseInstance) {
+  // check _chiseInstance param if it is set use it else use recently active chise instance
+  var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
 
-    // get current general properties for cy instance
-    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+  // get the associated cy instance
+  var cy = chiseInstance.getCy();
 
-    if (currentGeneralProperties.recalculateLayoutOnComplexityManagement )
-    {
-        //Put them near node and perform incremental layout
-        chiseInstance.hideAndPerformLayout(eles, this.triggerLayout.bind(this, cy, false));
-    }
-    else
-    {
-        //Just show them
-        chiseInstance.hideNodesSmart(eles);
-    }
+  // get current general properties for cy instance
+  var currentGeneralProperties = appUtilities.getScratch(
+    cy,
+    "currentGeneralProperties"
+  );
+
+  if (currentGeneralProperties.recalculateLayoutOnComplexityManagement) {
+    //Put them near node and perform incremental layout
+    chiseInstance.hideAndPerformLayout(
+      eles,
+      this.triggerLayout.bind(this, cy, false)
+    );
+  } else {
+    //Just show them
+    chiseInstance.hideNodesSmart(eles);
+  }
 };
 
 appUtilities.colorCodeToGradientImage = colorCodeToGradientImage = {
-  '#000000' : 'http://newteditor.org/color-scheme-images/bw2_gradient.png',
-  '#80cdc1' : 'http://newteditor.org/color-scheme-images/gb5_gradient.png',
-  '#92c5de' : 'http://newteditor.org/color-scheme-images/rb5_gradient.png',
-  '#9ecae1' : 'http://newteditor.org/color-scheme-images/blue4_gradient.png',
-  '#a6dba0' : 'http://newteditor.org/color-scheme-images/pg1_gradient.png',
-  '#b2abd2' : 'http://newteditor.org/color-scheme-images/pb5_gradient.png',
-  '#bababa' : 'http://newteditor.org/color-scheme-images/gr1_gradient.png',
-  '#bdbdbd' : 'http://newteditor.org/color-scheme-images/grey4_gradient.png',
-  '#c2a5cf' : 'http://newteditor.org/color-scheme-images/pg5_gradient.png',
-  '#c6dbef' : 'http://newteditor.org/color-scheme-images/blue3_gradient.png',
-  '#c7eae5' : 'http://newteditor.org/color-scheme-images/gb4_gradient.png',
-  '#d1e5f0' : 'http://newteditor.org/color-scheme-images/rb4_gradient.png',
-  '#d8daeb' : 'http://newteditor.org/color-scheme-images/pb4_gradient.png',
-  '#d9d9d9' : 'http://newteditor.org/color-scheme-images/grey3_gradient.png',
-  '#d9f0d3' : 'http://newteditor.org/color-scheme-images/pg2_gradient.png',
-  '#dfc27d' : 'http://newteditor.org/color-scheme-images/gb1_gradient.png',
-  '#e0e0e0' : 'http://newteditor.org/color-scheme-images/gr2_gradient.png',
-  '#e7d4e8' : 'http://newteditor.org/color-scheme-images/pg4_gradient.png',
-  '#eff3ff' : 'http://newteditor.org/color-scheme-images/blue2_gradient.png',
-  '#f0f0f0' : 'http://newteditor.org/color-scheme-images/grey2_gradient.png',
-  '#f4a582' : 'http://newteditor.org/color-scheme-images/rb1_gradient.png',
-  '#f5f5f5' : 'http://newteditor.org/color-scheme-images/gb3_gradient.png',
-  '#f6e8c3' : 'http://newteditor.org/color-scheme-images/gb2_gradient.png',
-  '#f7f7f7' : 'http://newteditor.org/color-scheme-images/rb3_gradient.png',
-  '#fdb863' : 'http://newteditor.org/color-scheme-images/pb1_gradient.png',
-  '#fddbc7' : 'http://newteditor.org/color-scheme-images/rb2_gradient.png',
-  '#fee0b6' : 'http://newteditor.org/color-scheme-images/pb2_gradient.png',
-  '#ffffff' : 'http://newteditor.org/color-scheme-images/bw1_gradient.png',
-};
-
-appUtilities.colorCodeTo3DImage = colorCodeTo3DImage ={
-  '#000000' : 'http://newteditor.org/color-scheme-images/bw2_3d.png',
-  '#80cdc1' : 'http://newteditor.org/color-scheme-images/gb5_3d.png',
-  '#92c5de' : 'http://newteditor.org/color-scheme-images/rb5_3d.png',
-  '#9ecae1' : 'http://newteditor.org/color-scheme-images/blue4_3d.png',
-  '#a6dba0' : 'http://newteditor.org/color-scheme-images/pg1_3d.png',
-  '#b2abd2' : 'http://newteditor.org/color-scheme-images/pb5_3d.png',
-  '#bababa' : 'http://newteditor.org/color-scheme-images/gr1_3d.png',
-  '#bdbdbd' : 'http://newteditor.org/color-scheme-images/grey4_3d.png',
-  '#c2a5cf' : 'http://newteditor.org/color-scheme-images/pg5_3d.png',
-  '#c6dbef' : 'http://newteditor.org/color-scheme-images/blue3_3d.png',
-  '#c7eae5' : 'http://newteditor.org/color-scheme-images/gb4_3d.png',
-  '#d1e5f0' : 'http://newteditor.org/color-scheme-images/rb4_3d.png',
-  '#d8daeb' : 'http://newteditor.org/color-scheme-images/pb4_3d.png',
-  '#d9d9d9' : 'http://newteditor.org/color-scheme-images/grey3_3d.png',
-  '#d9f0d3' : 'http://newteditor.org/color-scheme-images/pg2_3d.png',
-  '#dfc27d' : 'http://newteditor.org/color-scheme-images/gb1_3d.png',
-  '#e0e0e0' : 'http://newteditor.org/color-scheme-images/gr2_3d.png',
-  '#e7d4e8' : 'http://newteditor.org/color-scheme-images/pg4_3d.png',
-  '#eff3ff' : 'http://newteditor.org/color-scheme-images/blue2_3d.png',
-  '#f0f0f0' : 'http://newteditor.org/color-scheme-images/grey2_3d.png',
-  '#f4a582' : 'http://newteditor.org/color-scheme-images/rb1_3d.png',
-  '#f5f5f5' : 'http://newteditor.org/color-scheme-images/gb3_3d.png',
-  '#f6e8c3' : 'http://newteditor.org/color-scheme-images/gb2_3d.png',
-  '#f7f7f7' : 'http://newteditor.org/color-scheme-images/rb3_3d.png',
-  '#fdb863' : 'http://newteditor.org/color-scheme-images/pb1_3d.png',
-  '#fddbc7' : 'http://newteditor.org/color-scheme-images/rb2_3d.png',
-  '#fee0b6' : 'http://newteditor.org/color-scheme-images/pb2_3d.png',
-  '#ffffff' : 'http://newteditor.org/color-scheme-images/bw1_3d.png',
+  "#000000": "http://newteditor.org/color-scheme-images/bw2_gradient.png",
+  "#80cdc1": "http://newteditor.org/color-scheme-images/gb5_gradient.png",
+  "#92c5de": "http://newteditor.org/color-scheme-images/rb5_gradient.png",
+  "#9ecae1": "http://newteditor.org/color-scheme-images/blue4_gradient.png",
+  "#a6dba0": "http://newteditor.org/color-scheme-images/pg1_gradient.png",
+  "#b2abd2": "http://newteditor.org/color-scheme-images/pb5_gradient.png",
+  "#bababa": "http://newteditor.org/color-scheme-images/gr1_gradient.png",
+  "#bdbdbd": "http://newteditor.org/color-scheme-images/grey4_gradient.png",
+  "#c2a5cf": "http://newteditor.org/color-scheme-images/pg5_gradient.png",
+  "#c6dbef": "http://newteditor.org/color-scheme-images/blue3_gradient.png",
+  "#c7eae5": "http://newteditor.org/color-scheme-images/gb4_gradient.png",
+  "#d1e5f0": "http://newteditor.org/color-scheme-images/rb4_gradient.png",
+  "#d8daeb": "http://newteditor.org/color-scheme-images/pb4_gradient.png",
+  "#d9d9d9": "http://newteditor.org/color-scheme-images/grey3_gradient.png",
+  "#d9f0d3": "http://newteditor.org/color-scheme-images/pg2_gradient.png",
+  "#dfc27d": "http://newteditor.org/color-scheme-images/gb1_gradient.png",
+  "#e0e0e0": "http://newteditor.org/color-scheme-images/gr2_gradient.png",
+  "#e7d4e8": "http://newteditor.org/color-scheme-images/pg4_gradient.png",
+  "#eff3ff": "http://newteditor.org/color-scheme-images/blue2_gradient.png",
+  "#f0f0f0": "http://newteditor.org/color-scheme-images/grey2_gradient.png",
+  "#f4a582": "http://newteditor.org/color-scheme-images/rb1_gradient.png",
+  "#f5f5f5": "http://newteditor.org/color-scheme-images/gb3_gradient.png",
+  "#f6e8c3": "http://newteditor.org/color-scheme-images/gb2_gradient.png",
+  "#f7f7f7": "http://newteditor.org/color-scheme-images/rb3_gradient.png",
+  "#fdb863": "http://newteditor.org/color-scheme-images/pb1_gradient.png",
+  "#fddbc7": "http://newteditor.org/color-scheme-images/rb2_gradient.png",
+  "#fee0b6": "http://newteditor.org/color-scheme-images/pb2_gradient.png",
+  "#ffffff": "http://newteditor.org/color-scheme-images/bw1_gradient.png",
 };
 
+appUtilities.colorCodeTo3DImage = colorCodeTo3DImage = {
+  "#000000": "http://newteditor.org/color-scheme-images/bw2_3d.png",
+  "#80cdc1": "http://newteditor.org/color-scheme-images/gb5_3d.png",
+  "#92c5de": "http://newteditor.org/color-scheme-images/rb5_3d.png",
+  "#9ecae1": "http://newteditor.org/color-scheme-images/blue4_3d.png",
+  "#a6dba0": "http://newteditor.org/color-scheme-images/pg1_3d.png",
+  "#b2abd2": "http://newteditor.org/color-scheme-images/pb5_3d.png",
+  "#bababa": "http://newteditor.org/color-scheme-images/gr1_3d.png",
+  "#bdbdbd": "http://newteditor.org/color-scheme-images/grey4_3d.png",
+  "#c2a5cf": "http://newteditor.org/color-scheme-images/pg5_3d.png",
+  "#c6dbef": "http://newteditor.org/color-scheme-images/blue3_3d.png",
+  "#c7eae5": "http://newteditor.org/color-scheme-images/gb4_3d.png",
+  "#d1e5f0": "http://newteditor.org/color-scheme-images/rb4_3d.png",
+  "#d8daeb": "http://newteditor.org/color-scheme-images/pb4_3d.png",
+  "#d9d9d9": "http://newteditor.org/color-scheme-images/grey3_3d.png",
+  "#d9f0d3": "http://newteditor.org/color-scheme-images/pg2_3d.png",
+  "#dfc27d": "http://newteditor.org/color-scheme-images/gb1_3d.png",
+  "#e0e0e0": "http://newteditor.org/color-scheme-images/gr2_3d.png",
+  "#e7d4e8": "http://newteditor.org/color-scheme-images/pg4_3d.png",
+  "#eff3ff": "http://newteditor.org/color-scheme-images/blue2_3d.png",
+  "#f0f0f0": "http://newteditor.org/color-scheme-images/grey2_3d.png",
+  "#f4a582": "http://newteditor.org/color-scheme-images/rb1_3d.png",
+  "#f5f5f5": "http://newteditor.org/color-scheme-images/gb3_3d.png",
+  "#f6e8c3": "http://newteditor.org/color-scheme-images/gb2_3d.png",
+  "#f7f7f7": "http://newteditor.org/color-scheme-images/rb3_3d.png",
+  "#fdb863": "http://newteditor.org/color-scheme-images/pb1_3d.png",
+  "#fddbc7": "http://newteditor.org/color-scheme-images/rb2_3d.png",
+  "#fee0b6": "http://newteditor.org/color-scheme-images/pb2_3d.png",
+  "#ffffff": "http://newteditor.org/color-scheme-images/bw1_3d.png",
+};
 
 appUtilities.mapColorSchemes = mapColorSchemes = {
-  'black_white': {
-    'name': 'Black and white',
-    'preview': ['#ffffff', '#000000'],
-    'values': {
-      'unspecified entity': '#ffffff',
-      'simple chemical': '#ffffff',
-      'macromolecule': '#ffffff',
-      'nucleic acid feature': '#ffffff',
-      'perturbing agent': '#ffffff',
-      'source and sink': '#ffffff',
-      'complex': '#ffffff',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#ffffff',
-      'tag': '#ffffff',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#ffffff',
-      'submap': '#ffffff',
+  black_white: {
+    name: "Black and white",
+    preview: ["#ffffff", "#000000"],
+    values: {
+      "unspecified entity": "#ffffff",
+      "simple chemical": "#ffffff",
+      macromolecule: "#ffffff",
+      "nucleic acid feature": "#ffffff",
+      "perturbing agent": "#ffffff",
+      "source and sink": "#ffffff",
+      complex: "#ffffff",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#ffffff",
+      tag: "#ffffff",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#ffffff",
+      submap: "#ffffff",
       // AF
-      'BA plain': '#ffffff',
-      'BA unspecified entity': '#ffffff',
-      'BA simple chemical': '#ffffff',
-      'BA macromolecule': '#ffffff',
-      'BA nucleic acid feature': '#ffffff',
-      'BA perturbing agent': '#ffffff',
-      'BA complex': '#ffffff',
-      'delay': '#ffffff',
+      "BA plain": "#ffffff",
+      "BA unspecified entity": "#ffffff",
+      "BA simple chemical": "#ffffff",
+      "BA macromolecule": "#ffffff",
+      "BA nucleic acid feature": "#ffffff",
+      "BA perturbing agent": "#ffffff",
+      "BA complex": "#ffffff",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#ffffff',
-      'SIF simple chemical': '#ffffff'
-    }
+      "SIF macromolecule": "#ffffff",
+      "SIF simple chemical": "#ffffff",
+    },
   },
-  'greyscale': {
-    'name': 'Greyscale',
-    'preview': ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd'],
-    'invert': 'inverse_greyscale',
-    'values': {
-      'unspecified entity': '#ffffff',
-      'simple chemical': '#bdbdbd',
-      'macromolecule': '#bdbdbd',
-      'nucleic acid feature': '#bdbdbd',
-      'perturbing agent': '#bdbdbd',
-      'source and sink': '#ffffff',
-      'complex': '#d9d9d9',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#ffffff',
-      'tag': '#ffffff',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#f0f0f0',
-      'submap': '#f0f0f0',
+  greyscale: {
+    name: "Greyscale",
+    preview: ["#ffffff", "#f0f0f0", "#d9d9d9", "#bdbdbd"],
+    invert: "inverse_greyscale",
+    values: {
+      "unspecified entity": "#ffffff",
+      "simple chemical": "#bdbdbd",
+      macromolecule: "#bdbdbd",
+      "nucleic acid feature": "#bdbdbd",
+      "perturbing agent": "#bdbdbd",
+      "source and sink": "#ffffff",
+      complex: "#d9d9d9",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#ffffff",
+      tag: "#ffffff",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#f0f0f0",
+      submap: "#f0f0f0",
       // AF
-      'BA plain': '#ffffff',
-      'BA unspecified entity': '#ffffff',
-      'BA simple chemical': '#bdbdbd',
-      'BA macromolecule': '#bdbdbd',
-      'BA nucleic acid feature': '#bdbdbd',
-      'BA perturbing agent': '#bdbdbd',
-      'BA complex': '#d9d9d9',
-      'delay': '#ffffff',
+      "BA plain": "#ffffff",
+      "BA unspecified entity": "#ffffff",
+      "BA simple chemical": "#bdbdbd",
+      "BA macromolecule": "#bdbdbd",
+      "BA nucleic acid feature": "#bdbdbd",
+      "BA perturbing agent": "#bdbdbd",
+      "BA complex": "#d9d9d9",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#d9d9d9',
-      'SIF simple chemical': '#f0f0f0'
-    }
+      "SIF macromolecule": "#d9d9d9",
+      "SIF simple chemical": "#f0f0f0",
+    },
   },
-  'inverse_greyscale': {
-    'name': 'Inverse greyscale',
-    'preview': ['#bdbdbd', '#d9d9d9', '#f0f0f0', '#ffffff'],
-    'invert': 'greyscale',
-    'values': {
-      'unspecified entity': '#f0f0f0',
-      'simple chemical': '#f0f0f0',
-      'macromolecule': '#f0f0f0',
-      'nucleic acid feature': '#f0f0f0',
-      'perturbing agent': '#f0f0f0',
-      'source and sink': '#f0f0f0',
-      'complex': '#d9d9d9',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#f0f0f0',
-      'tag': '#f0f0f0',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#bdbdbd',
-      'submap': '#bdbdbd',
+  inverse_greyscale: {
+    name: "Inverse greyscale",
+    preview: ["#bdbdbd", "#d9d9d9", "#f0f0f0", "#ffffff"],
+    invert: "greyscale",
+    values: {
+      "unspecified entity": "#f0f0f0",
+      "simple chemical": "#f0f0f0",
+      macromolecule: "#f0f0f0",
+      "nucleic acid feature": "#f0f0f0",
+      "perturbing agent": "#f0f0f0",
+      "source and sink": "#f0f0f0",
+      complex: "#d9d9d9",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#f0f0f0",
+      tag: "#f0f0f0",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#bdbdbd",
+      submap: "#bdbdbd",
       // AF
-      'BA plain': '#f0f0f0',
-      'BA unspecified entity': '#f0f0f0',
-      'BA simple chemical': '#f0f0f0',
-      'BA macromolecule': '#f0f0f0',
-      'BA nucleic acid feature': '#f0f0f0',
-      'BA perturbing agent': '#f0f0f0',
-      'BA complex': '#d9d9d9',
-      'delay': '#ffffff',
+      "BA plain": "#f0f0f0",
+      "BA unspecified entity": "#f0f0f0",
+      "BA simple chemical": "#f0f0f0",
+      "BA macromolecule": "#f0f0f0",
+      "BA nucleic acid feature": "#f0f0f0",
+      "BA perturbing agent": "#f0f0f0",
+      "BA complex": "#d9d9d9",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#f0f0f0',
-      'SIF simple chemical': '#d9d9d9'
-    }
+      "SIF macromolecule": "#f0f0f0",
+      "SIF simple chemical": "#d9d9d9",
+    },
   },
-  'blue_scale': {
-    'name': 'Blue scale',
-    'preview': ['#ffffff', '#eff3ff', '#c6dbef', '#9ecae1'],
-    'invert': 'inverse_blue_scale',
-    'values': {
-      'unspecified entity': '#9ecae1',
-      'simple chemical': '#9ecae1',
-      'macromolecule': '#9ecae1',
-      'nucleic acid feature': '#9ecae1',
-      'perturbing agent': '#9ecae1',
-      'source and sink': '#9ecae1',
-      'complex': '#c6dbef',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#9ecae1',
-      'tag': '#9ecae1',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#eff3ff',
-      'submap': '#eff3ff',
+  blue_scale: {
+    name: "Blue scale",
+    preview: ["#ffffff", "#eff3ff", "#c6dbef", "#9ecae1"],
+    invert: "inverse_blue_scale",
+    values: {
+      "unspecified entity": "#9ecae1",
+      "simple chemical": "#9ecae1",
+      macromolecule: "#9ecae1",
+      "nucleic acid feature": "#9ecae1",
+      "perturbing agent": "#9ecae1",
+      "source and sink": "#9ecae1",
+      complex: "#c6dbef",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#9ecae1",
+      tag: "#9ecae1",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#eff3ff",
+      submap: "#eff3ff",
       // AF
-      'BA plain': '#9ecae1',
-      'BA unspecified entity': '#9ecae1',
-      'BA simple chemical': '#9ecae1',
-      'BA macromolecule': '#9ecae1',
-      'BA nucleic acid feature': '#9ecae1',
-      'BA perturbing agent': '#9ecae1',
-      'BA complex': '#c6dbef',
-      'delay': '#ffffff',
+      "BA plain": "#9ecae1",
+      "BA unspecified entity": "#9ecae1",
+      "BA simple chemical": "#9ecae1",
+      "BA macromolecule": "#9ecae1",
+      "BA nucleic acid feature": "#9ecae1",
+      "BA perturbing agent": "#9ecae1",
+      "BA complex": "#c6dbef",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#c6dbef',
-      'SIF simple chemical': '#eff3ff'
-    }
+      "SIF macromolecule": "#c6dbef",
+      "SIF simple chemical": "#eff3ff",
+    },
   },
-  'inverse_blue_scale': {
-    'name': 'Inverse blue scale',
-    'preview': ['#9ecae1', '#c6dbef', '#eff3ff', '#ffffff'],
-    'invert': 'blue_scale',
-    'values': {
-      'unspecified entity': '#eff3ff',
-      'simple chemical': '#eff3ff',
-      'macromolecule': '#eff3ff',
-      'nucleic acid feature': '#eff3ff',
-      'perturbing agent': '#eff3ff',
-      'source and sink': '#eff3ff',
-      'complex': '#c6dbef',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#eff3ff',
-      'tag': '#eff3ff',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#9ecae1',
-      'submap': '#9ecae1',
+  inverse_blue_scale: {
+    name: "Inverse blue scale",
+    preview: ["#9ecae1", "#c6dbef", "#eff3ff", "#ffffff"],
+    invert: "blue_scale",
+    values: {
+      "unspecified entity": "#eff3ff",
+      "simple chemical": "#eff3ff",
+      macromolecule: "#eff3ff",
+      "nucleic acid feature": "#eff3ff",
+      "perturbing agent": "#eff3ff",
+      "source and sink": "#eff3ff",
+      complex: "#c6dbef",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#eff3ff",
+      tag: "#eff3ff",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#9ecae1",
+      submap: "#9ecae1",
       // AF
-      'BA plain': '#eff3ff',
-      'BA unspecified entity': '#eff3ff',
-      'BA simple chemical': '#eff3ff',
-      'BA macromolecule': '#eff3ff',
-      'BA nucleic acid feature': '#eff3ff',
-      'BA perturbing agent': '#eff3ff',
-      'BA complex': '#c6dbef',
-      'delay': '#ffffff',
+      "BA plain": "#eff3ff",
+      "BA unspecified entity": "#eff3ff",
+      "BA simple chemical": "#eff3ff",
+      "BA macromolecule": "#eff3ff",
+      "BA nucleic acid feature": "#eff3ff",
+      "BA perturbing agent": "#eff3ff",
+      "BA complex": "#c6dbef",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#eff3ff',
-      'SIF simple chemical': '#c6dbef'
-    }
+      "SIF macromolecule": "#eff3ff",
+      "SIF simple chemical": "#c6dbef",
+    },
   },
-  'opposed_red_blue': {
-    'name': 'Red blue',
-    'preview': ['#f4a582', '#fddbc7', '#f7f7f7', '#d1e5f0', '#92c5de'],
-    'invert': 'opposed_red_blue2',
-    'values': {
-      'unspecified entity': '#f7f7f7',
-      'simple chemical': '#fddbc7',
-      'macromolecule': '#92c5de',
-      'nucleic acid feature': '#f4a582',
-      'perturbing agent': '#f7f7f7',
-      'source and sink': '#f7f7f7',
-      'complex': '#d1e5f0',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#f7f7f7',
-      'tag': '#f7f7f7',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#f7f7f7',
-      'submap': '#f7f7f7',
+  opposed_red_blue: {
+    name: "Red blue",
+    preview: ["#f4a582", "#fddbc7", "#f7f7f7", "#d1e5f0", "#92c5de"],
+    invert: "opposed_red_blue2",
+    values: {
+      "unspecified entity": "#f7f7f7",
+      "simple chemical": "#fddbc7",
+      macromolecule: "#92c5de",
+      "nucleic acid feature": "#f4a582",
+      "perturbing agent": "#f7f7f7",
+      "source and sink": "#f7f7f7",
+      complex: "#d1e5f0",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#f7f7f7",
+      tag: "#f7f7f7",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#f7f7f7",
+      submap: "#f7f7f7",
       // AF
-      'BA plain': '#f7f7f7',
-      'BA unspecified entity': '#f7f7f7',
-      'BA simple chemical': '#fddbc7',
-      'BA macromolecule': '#92c5de',
-      'BA nucleic acid feature': '#f4a582',
-      'BA perturbing agent': '#f7f7f7',
-      'BA complex': '#d1e5f0',
-      'delay': '#ffffff',
+      "BA plain": "#f7f7f7",
+      "BA unspecified entity": "#f7f7f7",
+      "BA simple chemical": "#fddbc7",
+      "BA macromolecule": "#92c5de",
+      "BA nucleic acid feature": "#f4a582",
+      "BA perturbing agent": "#f7f7f7",
+      "BA complex": "#d1e5f0",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#92c5de',
-      'SIF simple chemical': '#f4a582'
-    }
+      "SIF macromolecule": "#92c5de",
+      "SIF simple chemical": "#f4a582",
+    },
   },
-  'opposed_red_blue2': {
-    'name': 'Red blue 2',
-    'preview': ['#92c5de', '#d1e5f0', '#f7f7f7', '#fddbc7', '#f4a582'],
-    'invert': 'opposed_red_blue',
-    'values': {
-      'unspecified entity': '#f7f7f7',
-      'simple chemical': '#d1e5f0',
-      'macromolecule': '#f4a582',
-      'nucleic acid feature': '#92c5de',
-      'perturbing agent': '#f7f7f7',
-      'source and sink': '#f7f7f7',
-      'complex': '#fddbc7',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#f7f7f7',
-      'tag': '#f7f7f7',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#f7f7f7',
-      'submap': '#f7f7f7',
+  opposed_red_blue2: {
+    name: "Red blue 2",
+    preview: ["#92c5de", "#d1e5f0", "#f7f7f7", "#fddbc7", "#f4a582"],
+    invert: "opposed_red_blue",
+    values: {
+      "unspecified entity": "#f7f7f7",
+      "simple chemical": "#d1e5f0",
+      macromolecule: "#f4a582",
+      "nucleic acid feature": "#92c5de",
+      "perturbing agent": "#f7f7f7",
+      "source and sink": "#f7f7f7",
+      complex: "#fddbc7",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#f7f7f7",
+      tag: "#f7f7f7",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#f7f7f7",
+      submap: "#f7f7f7",
       // AF
-      'BA plain': '#f7f7f7',
-      'BA unspecified entity': '#f7f7f7',
-      'BA simple chemical': '#d1e5f0',
-      'BA macromolecule': '#f4a582',
-      'BA nucleic acid feature': '#92c5de',
-      'BA perturbing agent': '#f7f7f7',
-      'BA complex': '#fddbc7',
-      'delay': '#ffffff',
+      "BA plain": "#f7f7f7",
+      "BA unspecified entity": "#f7f7f7",
+      "BA simple chemical": "#d1e5f0",
+      "BA macromolecule": "#f4a582",
+      "BA nucleic acid feature": "#92c5de",
+      "BA perturbing agent": "#f7f7f7",
+      "BA complex": "#fddbc7",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#f4a582',
-      'SIF simple chemical': '#92c5de'
-    }
+      "SIF macromolecule": "#f4a582",
+      "SIF simple chemical": "#92c5de",
+    },
   },
-  'opposed_green_brown': {
-    'name': 'Green brown',
-    'preview': ['#dfc27d', '#f6e8c3', '#f5f5f5', '#c7eae5', '#80cdc1'],
-    'invert': 'opposed_green_brown2',
-    'values': {
-      'unspecified entity': '#f5f5f5',
-      'simple chemical': '#f6e8c3',
-      'macromolecule': '#80cdc1',
-      'nucleic acid feature': '#dfc27d',
-      'perturbing agent': '#f5f5f5',
-      'source and sink': '#f5f5f5',
-      'complex': '#c7eae5',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#f5f5f5',
-      'tag': '#f5f5f5',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#f5f5f5',
-      'submap': '#f5f5f5',
+  opposed_green_brown: {
+    name: "Green brown",
+    preview: ["#dfc27d", "#f6e8c3", "#f5f5f5", "#c7eae5", "#80cdc1"],
+    invert: "opposed_green_brown2",
+    values: {
+      "unspecified entity": "#f5f5f5",
+      "simple chemical": "#f6e8c3",
+      macromolecule: "#80cdc1",
+      "nucleic acid feature": "#dfc27d",
+      "perturbing agent": "#f5f5f5",
+      "source and sink": "#f5f5f5",
+      complex: "#c7eae5",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#f5f5f5",
+      tag: "#f5f5f5",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#f5f5f5",
+      submap: "#f5f5f5",
       // AF
-      'BA plain': '#f5f5f5',
-      'BA unspecified entity': '#f5f5f5',
-      'BA simple chemical': '#f6e8c3',
-      'BA macromolecule': '#80cdc1',
-      'BA nucleic acid feature': '#dfc27d',
-      'BA perturbing agent': '#f5f5f5',
-      'BA complex': '#c7eae5',
-      'delay': '#ffffff',
+      "BA plain": "#f5f5f5",
+      "BA unspecified entity": "#f5f5f5",
+      "BA simple chemical": "#f6e8c3",
+      "BA macromolecule": "#80cdc1",
+      "BA nucleic acid feature": "#dfc27d",
+      "BA perturbing agent": "#f5f5f5",
+      "BA complex": "#c7eae5",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#80cdc1',
-      'SIF simple chemical': '#dfc27d'
-    }
+      "SIF macromolecule": "#80cdc1",
+      "SIF simple chemical": "#dfc27d",
+    },
   },
-  'opposed_green_brown2': {
-    'name': 'Green brown 2',
-    'preview': ['#80cdc1', '#c7eae5', '#f5f5f5', '#f6e8c3', '#dfc27d'],
-    'invert': 'opposed_green_brown',
-    'values': {
-      'unspecified entity': '#f5f5f5',
-      'simple chemical': '#c7eae5',
-      'macromolecule': '#dfc27d',
-      'nucleic acid feature': '#80cdc1',
-      'perturbing agent': '#f5f5f5',
-      'source and sink': '#f5f5f5',
-      'complex': '#f6e8c3',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#f5f5f5',
-      'tag': '#f5f5f5',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#f5f5f5',
-      'submap': '#f5f5f5',
+  opposed_green_brown2: {
+    name: "Green brown 2",
+    preview: ["#80cdc1", "#c7eae5", "#f5f5f5", "#f6e8c3", "#dfc27d"],
+    invert: "opposed_green_brown",
+    values: {
+      "unspecified entity": "#f5f5f5",
+      "simple chemical": "#c7eae5",
+      macromolecule: "#dfc27d",
+      "nucleic acid feature": "#80cdc1",
+      "perturbing agent": "#f5f5f5",
+      "source and sink": "#f5f5f5",
+      complex: "#f6e8c3",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#f5f5f5",
+      tag: "#f5f5f5",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#f5f5f5",
+      submap: "#f5f5f5",
       // AF
-      'BA plain': '#f5f5f5',
-      'BA unspecified entity': '#f5f5f5',
-      'BA simple chemical': '#c7eae5',
-      'BA macromolecule': '#dfc27d',
-      'BA nucleic acid feature': '#80cdc1',
-      'BA perturbing agent': '#f5f5f5',
-      'BA complex': '#f6e8c3',
-      'delay': '#ffffff',
+      "BA plain": "#f5f5f5",
+      "BA unspecified entity": "#f5f5f5",
+      "BA simple chemical": "#c7eae5",
+      "BA macromolecule": "#dfc27d",
+      "BA nucleic acid feature": "#80cdc1",
+      "BA perturbing agent": "#f5f5f5",
+      "BA complex": "#f6e8c3",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#dfc27d',
-      'SIF simple chemical': '#80cdc1'
-    }
+      "SIF macromolecule": "#dfc27d",
+      "SIF simple chemical": "#80cdc1",
+    },
   },
-  'opposed_purple_brown': {
-    'name': 'Purple brown',
-    'preview': ['#fdb863', '#fee0b6', '#f7f7f7', '#d8daeb', '#b2abd2'],
-    'invert': 'opposed_purple_brown2',
-    'values': {
-      'unspecified entity': '#f7f7f7',
-      'simple chemical': '#fee0b6',
-      'macromolecule': '#b2abd2',
-      'nucleic acid feature': '#fdb863',
-      'perturbing agent': '#f7f7f7',
-      'source and sink': '#f7f7f7',
-      'complex': '#d8daeb',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#f7f7f7',
-      'tag': '#f7f7f7',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#f7f7f7',
-      'submap': '#f7f7f7',
+  opposed_purple_brown: {
+    name: "Purple brown",
+    preview: ["#fdb863", "#fee0b6", "#f7f7f7", "#d8daeb", "#b2abd2"],
+    invert: "opposed_purple_brown2",
+    values: {
+      "unspecified entity": "#f7f7f7",
+      "simple chemical": "#fee0b6",
+      macromolecule: "#b2abd2",
+      "nucleic acid feature": "#fdb863",
+      "perturbing agent": "#f7f7f7",
+      "source and sink": "#f7f7f7",
+      complex: "#d8daeb",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#f7f7f7",
+      tag: "#f7f7f7",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#f7f7f7",
+      submap: "#f7f7f7",
       // AF
-      'BA plain': '#f7f7f7',
-      'BA unspecified entity': '#f7f7f7',
-      'BA simple chemical': '#fee0b6',
-      'BA macromolecule': '#b2abd2',
-      'BA nucleic acid feature': '#fdb863',
-      'BA perturbing agent': '#f7f7f7',
-      'BA complex': '#d8daeb',
-      'delay': '#ffffff',
+      "BA plain": "#f7f7f7",
+      "BA unspecified entity": "#f7f7f7",
+      "BA simple chemical": "#fee0b6",
+      "BA macromolecule": "#b2abd2",
+      "BA nucleic acid feature": "#fdb863",
+      "BA perturbing agent": "#f7f7f7",
+      "BA complex": "#d8daeb",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#b2abd2',
-      'SIF simple chemical': '#fdb863'
-    }
+      "SIF macromolecule": "#b2abd2",
+      "SIF simple chemical": "#fdb863",
+    },
   },
-  'opposed_purple_brown2': {
-    'name': 'Purple brown 2',
-    'preview': ['#b2abd2', '#d8daeb', '#f7f7f7', '#fee0b6', '#fdb863'],
-    'invert': 'opposed_purple_brown',
-    'values': {
-      'unspecified entity': '#f7f7f7',
-      'simple chemical': '#d8daeb',
-      'macromolecule': '#fdb863',
-      'nucleic acid feature': '#b2abd2',
-      'perturbing agent': '#f7f7f7',
-      'source and sink': '#f7f7f7',
-      'complex': '#fee0b6',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#f7f7f7',
-      'tag': '#f7f7f7',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#f7f7f7',
-      'submap': '#f7f7f7',
+  opposed_purple_brown2: {
+    name: "Purple brown 2",
+    preview: ["#b2abd2", "#d8daeb", "#f7f7f7", "#fee0b6", "#fdb863"],
+    invert: "opposed_purple_brown",
+    values: {
+      "unspecified entity": "#f7f7f7",
+      "simple chemical": "#d8daeb",
+      macromolecule: "#fdb863",
+      "nucleic acid feature": "#b2abd2",
+      "perturbing agent": "#f7f7f7",
+      "source and sink": "#f7f7f7",
+      complex: "#fee0b6",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#f7f7f7",
+      tag: "#f7f7f7",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#f7f7f7",
+      submap: "#f7f7f7",
       // AF
-      'BA plain': '#f7f7f7',
-      'BA unspecified entity': '#f7f7f7',
-      'BA simple chemical': '#d8daeb',
-      'BA macromolecule': '#fdb863',
-      'BA nucleic acid feature': '#b2abd2',
-      'BA perturbing agent': '#f7f7f7',
-      'BA complex': '#fee0b6',
-      'delay': '#ffffff',
+      "BA plain": "#f7f7f7",
+      "BA unspecified entity": "#f7f7f7",
+      "BA simple chemical": "#d8daeb",
+      "BA macromolecule": "#fdb863",
+      "BA nucleic acid feature": "#b2abd2",
+      "BA perturbing agent": "#f7f7f7",
+      "BA complex": "#fee0b6",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#fdb863',
-      'SIF simple chemical': '#b2abd2'
-    }
+      "SIF macromolecule": "#fdb863",
+      "SIF simple chemical": "#b2abd2",
+    },
   },
-  'opposed_purple_green': {
-    'name': 'Purple green',
-    'preview': ['#a6dba0', '#d9f0d3', '#f7f7f7', '#e7d4e8', '#c2a5cf'],
-    'invert': 'opposed_purple_green2',
-    'values': {
-      'unspecified entity': '#f7f7f7',
-      'simple chemical': '#d9f0d3',
-      'macromolecule': '#c2a5cf',
-      'nucleic acid feature': '#a6dba0',
-      'perturbing agent': '#f7f7f7',
-      'source and sink': '#f7f7f7',
-      'complex': '#e7d4e8',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#f7f7f7',
-      'tag': '#f7f7f7',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#f7f7f7',
-      'submap': '#f7f7f7',
+  opposed_purple_green: {
+    name: "Purple green",
+    preview: ["#a6dba0", "#d9f0d3", "#f7f7f7", "#e7d4e8", "#c2a5cf"],
+    invert: "opposed_purple_green2",
+    values: {
+      "unspecified entity": "#f7f7f7",
+      "simple chemical": "#d9f0d3",
+      macromolecule: "#c2a5cf",
+      "nucleic acid feature": "#a6dba0",
+      "perturbing agent": "#f7f7f7",
+      "source and sink": "#f7f7f7",
+      complex: "#e7d4e8",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#f7f7f7",
+      tag: "#f7f7f7",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#f7f7f7",
+      submap: "#f7f7f7",
       // AF
-      'BA plain': '#f7f7f7',
-      'BA unspecified entity': '#f7f7f7',
-      'BA simple chemical': '#d9f0d3',
-      'BA macromolecule': '#c2a5cf',
-      'BA nucleic acid feature': '#a6dba0',
-      'BA perturbing agent': '#f7f7f7',
-      'BA complex': '#e7d4e8',
-      'delay': '#ffffff',
+      "BA plain": "#f7f7f7",
+      "BA unspecified entity": "#f7f7f7",
+      "BA simple chemical": "#d9f0d3",
+      "BA macromolecule": "#c2a5cf",
+      "BA nucleic acid feature": "#a6dba0",
+      "BA perturbing agent": "#f7f7f7",
+      "BA complex": "#e7d4e8",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#c2a5cf',
-      'SIF simple chemical': '#a6dba0'
-    }
+      "SIF macromolecule": "#c2a5cf",
+      "SIF simple chemical": "#a6dba0",
+    },
   },
-  'opposed_purple_green2': {
-    'name': 'Purple green 2',
-    'preview': ['#c2a5cf', '#e7d4e8', '#f7f7f7', '#d9f0d3', '#a6dba0'],
-    'invert': 'opposed_purple_green',
-    'values': {
-      'unspecified entity': '#f7f7f7',
-      'simple chemical': '#e7d4e8',
-      'macromolecule': '#a6dba0',
-      'nucleic acid feature': '#c2a5cf',
-      'perturbing agent': '#f7f7f7',
-      'source and sink': '#f7f7f7',
-      'complex': '#d9f0d3',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#f7f7f7',
-      'tag': '#f7f7f7',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#f7f7f7',
-      'submap': '#f7f7f7',
+  opposed_purple_green2: {
+    name: "Purple green 2",
+    preview: ["#c2a5cf", "#e7d4e8", "#f7f7f7", "#d9f0d3", "#a6dba0"],
+    invert: "opposed_purple_green",
+    values: {
+      "unspecified entity": "#f7f7f7",
+      "simple chemical": "#e7d4e8",
+      macromolecule: "#a6dba0",
+      "nucleic acid feature": "#c2a5cf",
+      "perturbing agent": "#f7f7f7",
+      "source and sink": "#f7f7f7",
+      complex: "#d9f0d3",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#f7f7f7",
+      tag: "#f7f7f7",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#f7f7f7",
+      submap: "#f7f7f7",
       // AF
-      'BA plain': '#f7f7f7',
-      'BA unspecified entity': '#f7f7f7',
-      'BA simple chemical': '#e7d4e8',
-      'BA macromolecule': '#a6dba0',
-      'BA nucleic acid feature': '#c2a5cf',
-      'BA perturbing agent': '#f7f7f7',
-      'BA complex': '#d9f0d3',
-      'delay': '#ffffff',
+      "BA plain": "#f7f7f7",
+      "BA unspecified entity": "#f7f7f7",
+      "BA simple chemical": "#e7d4e8",
+      "BA macromolecule": "#a6dba0",
+      "BA nucleic acid feature": "#c2a5cf",
+      "BA perturbing agent": "#f7f7f7",
+      "BA complex": "#d9f0d3",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#a6dba0',
-      'SIF simple chemical': '#c2a5cf'
-    }
+      "SIF macromolecule": "#a6dba0",
+      "SIF simple chemical": "#c2a5cf",
+    },
   },
-  'opposed_grey_red': {
-    'name': 'Grey red',
-    'preview': ['#bababa', '#e0e0e0', '#ffffff', '#fddbc7', '#f4a582'],
-    'invert': 'opposed_grey_red2',
-    'values': {
-      'unspecified entity': '#ffffff',
-      'simple chemical': '#e0e0e0',
-      'macromolecule': '#f4a582',
-      'nucleic acid feature': '#bababa',
-      'perturbing agent': '#ffffff',
-      'source and sink': '#ffffff',
-      'complex': '#fddbc7',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#ffffff',
-      'tag': '#ffffff',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#ffffff',
-      'submap': '#ffffff',
+  opposed_grey_red: {
+    name: "Grey red",
+    preview: ["#bababa", "#e0e0e0", "#ffffff", "#fddbc7", "#f4a582"],
+    invert: "opposed_grey_red2",
+    values: {
+      "unspecified entity": "#ffffff",
+      "simple chemical": "#e0e0e0",
+      macromolecule: "#f4a582",
+      "nucleic acid feature": "#bababa",
+      "perturbing agent": "#ffffff",
+      "source and sink": "#ffffff",
+      complex: "#fddbc7",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#ffffff",
+      tag: "#ffffff",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#ffffff",
+      submap: "#ffffff",
       // AF
-      'BA plain': '#ffffff',
-      'BA unspecified entity': '#ffffff',
-      'BA simple chemical': '#e0e0e0',
-      'BA macromolecule': '#f4a582',
-      'BA nucleic acid feature': '#bababa',
-      'BA perturbing agent': '#ffffff',
-      'BA complex': '#fddbc7',
-      'delay': '#ffffff',
+      "BA plain": "#ffffff",
+      "BA unspecified entity": "#ffffff",
+      "BA simple chemical": "#e0e0e0",
+      "BA macromolecule": "#f4a582",
+      "BA nucleic acid feature": "#bababa",
+      "BA perturbing agent": "#ffffff",
+      "BA complex": "#fddbc7",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#f4a582',
-      'SIF simple chemical': '#bababa'
-    }
+      "SIF macromolecule": "#f4a582",
+      "SIF simple chemical": "#bababa",
+    },
   },
-  'opposed_grey_red2': {
-    'name': 'Grey red 2',
-    'preview': ['#f4a582', '#fddbc7', '#ffffff', '#e0e0e0', '#bababa'],
-    'invert': 'opposed_grey_red',
-    'values': {
-      'unspecified entity': '#ffffff',
-      'simple chemical': '#fddbc7',
-      'macromolecule': '#bababa',
-      'nucleic acid feature': '#f4a582',
-      'perturbing agent': '#ffffff',
-      'source and sink': '#ffffff',
-      'complex': '#e0e0e0',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#ffffff',
-      'tag': '#ffffff',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#ffffff',
-      'submap': '#ffffff',
+  opposed_grey_red2: {
+    name: "Grey red 2",
+    preview: ["#f4a582", "#fddbc7", "#ffffff", "#e0e0e0", "#bababa"],
+    invert: "opposed_grey_red",
+    values: {
+      "unspecified entity": "#ffffff",
+      "simple chemical": "#fddbc7",
+      macromolecule: "#bababa",
+      "nucleic acid feature": "#f4a582",
+      "perturbing agent": "#ffffff",
+      "source and sink": "#ffffff",
+      complex: "#e0e0e0",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#ffffff",
+      tag: "#ffffff",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#ffffff",
+      submap: "#ffffff",
       // AF
-      'BA plain': '#ffffff',
-      'BA unspecified entity': '#ffffff',
-      'BA simple chemical': '#fddbc7',
-      'BA macromolecule': '#bababa',
-      'BA nucleic acid feature': '#f4a582',
-      'BA perturbing agent': '#ffffff',
-      'BA complex': '#e0e0e0',
-      'delay': '#ffffff',
+      "BA plain": "#ffffff",
+      "BA unspecified entity": "#ffffff",
+      "BA simple chemical": "#fddbc7",
+      "BA macromolecule": "#bababa",
+      "BA nucleic acid feature": "#f4a582",
+      "BA perturbing agent": "#ffffff",
+      "BA complex": "#e0e0e0",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#bababa',
-      'SIF simple chemical': '#f4a582'
-    }
+      "SIF macromolecule": "#bababa",
+      "SIF simple chemical": "#f4a582",
+    },
   },
-  'pure_white': {
-    'name': 'Pure White',
-    'preview': ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'],
-    'values': {
-      'unspecified entity': '#ffffff',
-      'simple chemical': '#ffffff',
-      'macromolecule': '#ffffff',
-      'nucleic acid feature': '#ffffff',
-      'perturbing agent': '#ffffff',
-      'source and sink': '#ffffff',
-      'complex': '#ffffff',
-      'process': '#ffffff',
-      'omitted process': '#ffffff',
-      'uncertain process': '#ffffff',
-      'association': '#ffffff',
-      'dissociation': '#ffffff',
-      'phenotype': '#ffffff',
-      'tag': '#ffffff',
-      'consumption': '#ffffff',
-      'production': '#ffffff',
-      'modulation': '#ffffff',
-      'stimulation': '#ffffff',
-      'catalysis': '#ffffff',
-      'inhibition': '#ffffff',
-      'necessary stimulation': '#ffffff',
-      'logic arc': '#ffffff',
-      'equivalence arc': '#ffffff',
-      'and': '#ffffff',
-      'or': '#ffffff',
-      'not': '#ffffff',
-      'compartment': '#ffffff',
-      'submap': '#ffffff',
+  pure_white: {
+    name: "Pure White",
+    preview: ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff"],
+    values: {
+      "unspecified entity": "#ffffff",
+      "simple chemical": "#ffffff",
+      macromolecule: "#ffffff",
+      "nucleic acid feature": "#ffffff",
+      "perturbing agent": "#ffffff",
+      "source and sink": "#ffffff",
+      complex: "#ffffff",
+      process: "#ffffff",
+      "omitted process": "#ffffff",
+      "uncertain process": "#ffffff",
+      association: "#ffffff",
+      dissociation: "#ffffff",
+      phenotype: "#ffffff",
+      tag: "#ffffff",
+      consumption: "#ffffff",
+      production: "#ffffff",
+      modulation: "#ffffff",
+      stimulation: "#ffffff",
+      catalysis: "#ffffff",
+      inhibition: "#ffffff",
+      "necessary stimulation": "#ffffff",
+      "logic arc": "#ffffff",
+      "equivalence arc": "#ffffff",
+      and: "#ffffff",
+      or: "#ffffff",
+      not: "#ffffff",
+      compartment: "#ffffff",
+      submap: "#ffffff",
       // AF
-      'BA plain': '#ffffff',
-      'BA unspecified entity': '#ffffff',
-      'BA simple chemical': '#ffffff',
-      'BA macromolecule': '#ffffff',
-      'BA nucleic acid feature': '#ffffff',
-      'BA perturbing agent': '#ffffff',
-      'BA complex': '#ffffff',
-      'delay': '#ffffff',
+      "BA plain": "#ffffff",
+      "BA unspecified entity": "#ffffff",
+      "BA simple chemical": "#ffffff",
+      "BA macromolecule": "#ffffff",
+      "BA nucleic acid feature": "#ffffff",
+      "BA perturbing agent": "#ffffff",
+      "BA complex": "#ffffff",
+      delay: "#ffffff",
       // SIF
-      'SIF macromolecule': '#ffffff',
-      'SIF simple chemical': '#ffffff'
-    }
-  }
+      "SIF macromolecule": "#ffffff",
+      "SIF simple chemical": "#ffffff",
+    },
+  },
 };
 // set multimers to be the same as their original elements
 // just to avoid typing it manually in the mapColorSchemes dictionary
-for(var scheme in mapColorSchemes){
-  mapColorSchemes[scheme]['values']['nucleic acid feature multimer'] = mapColorSchemes[scheme]['values']['nucleic acid feature'];
-  mapColorSchemes[scheme]['values']['macromolecule multimer'] = mapColorSchemes[scheme]['values']['macromolecule'];
-  mapColorSchemes[scheme]['values']['simple chemical multimer'] = mapColorSchemes[scheme]['values']['simple chemical'];
-  mapColorSchemes[scheme]['values']['complex multimer'] = mapColorSchemes[scheme]['values']['complex'];
+for (var scheme in mapColorSchemes) {
+  mapColorSchemes[scheme]["values"]["nucleic acid feature multimer"] =
+    mapColorSchemes[scheme]["values"]["nucleic acid feature"];
+  mapColorSchemes[scheme]["values"]["macromolecule multimer"] =
+    mapColorSchemes[scheme]["values"]["macromolecule"];
+  mapColorSchemes[scheme]["values"]["simple chemical multimer"] =
+    mapColorSchemes[scheme]["values"]["simple chemical"];
+  mapColorSchemes[scheme]["values"]["complex multimer"] =
+    mapColorSchemes[scheme]["values"]["complex"];
 }
 
 // go through eles, mapping the id of these elements to values that were mapped to their data().class
 // classMap is of the form: {ele.data().class: value}
 // return object of the form: {ele.id: value}
-appUtilities.mapEleClassToId = function(eles, classMap) {
+appUtilities.mapEleClassToId = function (eles, classMap) {
   result = {};
-  for( var i = 0; i < eles.length; i++ ){
+  for (var i = 0; i < eles.length; i++) {
     ele = eles[i];
     result[ele.id()] = classMap[ele.data().class];
   }
@@ -1918,58 +1996,83 @@ appUtilities.mapEleClassToId = function(eles, classMap) {
 // not have a default background image.
 // classMap is of the form: {ele.data().class: value}
 // return object of the form: {ele.id: value}
-appUtilities.mapEleClassToBackgroundImage = function(eles, classMap, scheme_type){
+appUtilities.mapEleClassToBackgroundImage = function (
+  eles,
+  classMap,
+  scheme_type
+) {
   result = {};
-  if(scheme_type == 'gradient'){
-    for( var i = 0; i < eles.length; i++ ){
+  if (scheme_type == "gradient") {
+    for (var i = 0; i < eles.length; i++) {
       ele = eles[i];
-      result[ele.id()] = colorCodeToGradientImage[ classMap[ele.data().class] ];
+      result[ele.id()] = colorCodeToGradientImage[classMap[ele.data().class]];
     }
-  }
-  else if (scheme_type == '3D'){
-    for( var i = 0; i < eles.length; i++ ){
+  } else if (scheme_type == "3D") {
+    for (var i = 0; i < eles.length; i++) {
       ele = eles[i];
-      result[ele.id()] = colorCodeTo3DImage[ classMap[ele.data().class ]];
+      result[ele.id()] = colorCodeTo3DImage[classMap[ele.data().class]];
     }
   }
   return result;
-}
+};
 
-appUtilities.mapBgImgCoverToEle = function(){
+appUtilities.mapBgImgCoverToEle = function () {
   result = {};
-  for( var i = 0; i < eles.length; i++ ){
+  for (var i = 0; i < eles.length; i++) {
     ele = eles[i];
     result[ele.id()] = classMap[ele.data().class];
   }
   return result;
-}
+};
 
 // use this function to change the global style of the map by applying the current color scheme
-appUtilities.applyMapColorScheme = function(newColorScheme, scheme_type, self, _cy) {
-  var actions = appUtilities.getActionsToApplyMapColorScheme(newColorScheme, scheme_type, self, _cy);
+appUtilities.applyMapColorScheme = function (
+  newColorScheme,
+  scheme_type,
+  self,
+  _cy
+) {
+  var actions = appUtilities.getActionsToApplyMapColorScheme(
+    newColorScheme,
+    scheme_type,
+    self,
+    _cy
+  );
   var cy = _cy || appUtilities.getActiveCy();
   cy.undoRedo().do("batch", actions);
-}
+};
 
 // get the actions required to change the global style of the map by applying the current color scheme
-appUtilities.getActionsToApplyMapColorScheme = function(newColorScheme, scheme_type, self, _cy) {
-
+appUtilities.getActionsToApplyMapColorScheme = function (
+  newColorScheme,
+  scheme_type,
+  self,
+  _cy
+) {
   // if _cy param is set use it else use the recently active cy instance
   var cy = _cy || appUtilities.getActiveCy();
   var eles = cy.nodes();
 
-  if(scheme_type == 'solid'){
-
-    var idMap = appUtilities.mapEleClassToId(eles, mapColorSchemes[newColorScheme]['values']);
-    var collapsedChildren = cy.expandCollapse('get').getAllCollapsedChildrenRecursively().filter("node");
-    var collapsedIdMap = appUtilities.mapEleClassToId(collapsedChildren, mapColorSchemes[newColorScheme]['values']);
+  if (scheme_type == "solid") {
+    var idMap = appUtilities.mapEleClassToId(
+      eles,
+      mapColorSchemes[newColorScheme]["values"]
+    );
+    var collapsedChildren = cy
+      .expandCollapse("get")
+      .getAllCollapsedChildrenRecursively()
+      .filter("node");
+    var collapsedIdMap = appUtilities.mapEleClassToId(
+      collapsedChildren,
+      mapColorSchemes[newColorScheme]["values"]
+    );
     var chiseInstance = appUtilities.getActiveChiseInstance();
 
-    var clearBgImg = function(eles){
+    var clearBgImg = function (eles) {
       result = {};
-      for( var i = 0; i < eles.length; i++ ){
+      for (var i = 0; i < eles.length; i++) {
         ele = eles[i];
-        result[ele.id()] = '';
+        result[ele.id()] = "";
       }
       return result;
     };
@@ -1977,60 +2080,134 @@ appUtilities.getActionsToApplyMapColorScheme = function(newColorScheme, scheme_t
     var actions = [];
 
     // first clear the background images of already present elements
-    actions.push({name: "changeData", param: {eles: eles, name: 'background-image', valueMap: clearBgImg(eles)}});
+    actions.push({
+      name: "changeData",
+      param: {
+        eles: eles,
+        name: "background-image",
+        valueMap: clearBgImg(eles),
+      },
+    });
     // edit style of the current map elements
-    actions.push({name: "changeData", param: {eles: eles, name: 'background-color', valueMap: idMap}});
+    actions.push({
+      name: "changeData",
+      param: { eles: eles, name: "background-color", valueMap: idMap },
+    });
     // first clear the background images of already present collapsed elements
-    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-image', valueMap: clearBgImg(collapsedChildren)}});   
+    actions.push({
+      name: "changeDataDirty",
+      param: {
+        eles: collapsedChildren,
+        name: "background-image",
+        valueMap: clearBgImg(collapsedChildren),
+      },
+    });
     // collapsed nodes' style should also be changed, special edge case
-    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-color', valueMap: collapsedIdMap}});
+    actions.push({
+      name: "changeDataDirty",
+      param: {
+        eles: collapsedChildren,
+        name: "background-color",
+        valueMap: collapsedIdMap,
+      },
+    });
     // if background-image isn't deleted from css, it is shown as soon as the node is expanded until the end of animation
-    actions.push({name: "changeCss", param: {eles: collapsedChildren, name: 'background-image', valueMap: ""}});     
+    actions.push({
+      name: "changeCss",
+      param: {
+        eles: collapsedChildren,
+        name: "background-image",
+        valueMap: "",
+      },
+    });
 
-    actions.push({name: "refreshColorSchemeMenu", param: {value: newColorScheme, self: self, scheme_type: scheme_type}});
+    actions.push({
+      name: "refreshColorSchemeMenu",
+      param: { value: newColorScheme, self: self, scheme_type: scheme_type },
+    });
 
     // set to be the default as well
-    for(var nodeClass in mapColorSchemes[newColorScheme]['values']){
-      classBgColor = mapColorSchemes[newColorScheme]['values'][nodeClass];
+    for (var nodeClass in mapColorSchemes[newColorScheme]["values"]) {
+      classBgColor = mapColorSchemes[newColorScheme]["values"][nodeClass];
       // nodeClass may not be defined in the defaultProperties (for edges, for example)
-      if(nodeClass in chiseInstance.elementUtilities.getDefaultProperties()){
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-color', value: classBgColor}});
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-fit', value: ''}});
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-position-x', value: ''}});
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-position-y', value: ''}});
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-image', value: ''}});
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-width', value: ''}});
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-height', value:''}});         
+      if (nodeClass in chiseInstance.elementUtilities.getDefaultProperties()) {
+        actions.push({
+          name: "setDefaultProperty",
+          param: {
+            class: nodeClass,
+            name: "background-color",
+            value: classBgColor,
+          },
+        });
+        actions.push({
+          name: "setDefaultProperty",
+          param: { class: nodeClass, name: "background-fit", value: "" },
+        });
+        actions.push({
+          name: "setDefaultProperty",
+          param: { class: nodeClass, name: "background-position-x", value: "" },
+        });
+        actions.push({
+          name: "setDefaultProperty",
+          param: { class: nodeClass, name: "background-position-y", value: "" },
+        });
+        actions.push({
+          name: "setDefaultProperty",
+          param: { class: nodeClass, name: "background-image", value: "" },
+        });
+        actions.push({
+          name: "setDefaultProperty",
+          param: { class: nodeClass, name: "background-width", value: "" },
+        });
+        actions.push({
+          name: "setDefaultProperty",
+          param: { class: nodeClass, name: "background-height", value: "" },
+        });
       }
     }
-
   }
 
   // no need to handle 3D and Gradient color schemes separately
   else {
-
-    var colorIDMap = appUtilities.mapEleClassToId(eles, mapColorSchemes[newColorScheme]['values']);
-    var backgroundImgMap = appUtilities.mapEleClassToBackgroundImage(eles, mapColorSchemes[newColorScheme]['values'], scheme_type);
-    var collapsedChildren = cy.expandCollapse('get').getAllCollapsedChildrenRecursively().filter("node");
-    var collapsedColorIDMap = appUtilities.mapEleClassToId(collapsedChildren, mapColorSchemes[newColorScheme]['values']);
-    var collapsedBackgroundImgMap = appUtilities.mapEleClassToBackgroundImage(collapsedChildren, mapColorSchemes[newColorScheme]['values'], scheme_type);
+    var colorIDMap = appUtilities.mapEleClassToId(
+      eles,
+      mapColorSchemes[newColorScheme]["values"]
+    );
+    var backgroundImgMap = appUtilities.mapEleClassToBackgroundImage(
+      eles,
+      mapColorSchemes[newColorScheme]["values"],
+      scheme_type
+    );
+    var collapsedChildren = cy
+      .expandCollapse("get")
+      .getAllCollapsedChildrenRecursively()
+      .filter("node");
+    var collapsedColorIDMap = appUtilities.mapEleClassToId(
+      collapsedChildren,
+      mapColorSchemes[newColorScheme]["values"]
+    );
+    var collapsedBackgroundImgMap = appUtilities.mapEleClassToBackgroundImage(
+      collapsedChildren,
+      mapColorSchemes[newColorScheme]["values"],
+      scheme_type
+    );
     var chiseInstance = appUtilities.getActiveChiseInstance();
 
     //utility functions to set background image Properties
-    var mapCovertoBgFit = function(eles){
+    var mapCovertoBgFit = function (eles) {
       result = {};
-      for( var i = 0; i < eles.length; i++ ){
+      for (var i = 0; i < eles.length; i++) {
         ele = eles[i];
-        result[ele.id()] = 'none';
+        result[ele.id()] = "none";
       }
       return result;
     };
 
-    var mapPercentToPosition = function(eles,percent){
+    var mapPercentToPosition = function (eles, percent) {
       result = {};
-      for( var i = 0; i < eles.length; i++ ){
+      for (var i = 0; i < eles.length; i++) {
         ele = eles[i];
-        result[ele.id()] = percent + '%';
+        result[ele.id()] = percent + "%";
       }
       return result;
     };
@@ -2039,56 +2216,202 @@ appUtilities.getActionsToApplyMapColorScheme = function(newColorScheme, scheme_t
 
     // edit style of the current map elements
     // change background color of the current map elements to #ffffff
-    actions.push({name: "changeData", param: {eles: eles, name: 'background-color', valueMap: colorIDMap}});
-    actions.push({name: "changeData", param: {eles: eles, name: 'background-image', valueMap: backgroundImgMap}});
-    actions.push({name: "changeData", param: {eles: eles, name: 'background-fit', valueMap: mapCovertoBgFit(eles)}});
-    actions.push({name: "changeData", param: {eles: eles, name: 'background-position-x', valueMap: mapPercentToPosition(eles, 50)}});
-    actions.push({name: "changeData", param: {eles: eles, name: 'background-position-y', valueMap: mapPercentToPosition(eles, 50)}});
-    actions.push({name: "changeData", param: {eles: eles, name: 'background-width', valueMap: mapPercentToPosition(eles, 100)}});
-    actions.push({name: "changeData", param: {eles: eles, name: 'background-height', valueMap: mapPercentToPosition(eles, 100)}});
+    actions.push({
+      name: "changeData",
+      param: { eles: eles, name: "background-color", valueMap: colorIDMap },
+    });
+    actions.push({
+      name: "changeData",
+      param: {
+        eles: eles,
+        name: "background-image",
+        valueMap: backgroundImgMap,
+      },
+    });
+    actions.push({
+      name: "changeData",
+      param: {
+        eles: eles,
+        name: "background-fit",
+        valueMap: mapCovertoBgFit(eles),
+      },
+    });
+    actions.push({
+      name: "changeData",
+      param: {
+        eles: eles,
+        name: "background-position-x",
+        valueMap: mapPercentToPosition(eles, 50),
+      },
+    });
+    actions.push({
+      name: "changeData",
+      param: {
+        eles: eles,
+        name: "background-position-y",
+        valueMap: mapPercentToPosition(eles, 50),
+      },
+    });
+    actions.push({
+      name: "changeData",
+      param: {
+        eles: eles,
+        name: "background-width",
+        valueMap: mapPercentToPosition(eles, 100),
+      },
+    });
+    actions.push({
+      name: "changeData",
+      param: {
+        eles: eles,
+        name: "background-height",
+        valueMap: mapPercentToPosition(eles, 100),
+      },
+    });
 
     // collapsed nodes' style should also be changed, special edge case
-    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-color', valueMap: collapsedColorIDMap}});
-    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-image', valueMap: collapsedBackgroundImgMap}});
-    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-fit', valueMap: mapCovertoBgFit(collapsedChildren)}});
-    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-position-x', valueMap: mapPercentToPosition(collapsedChildren, 50)}});
-    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-position-y', valueMap: mapPercentToPosition(collapsedChildren, 50)}});
-    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-width', valueMap: mapPercentToPosition(collapsedChildren, 100)}});
-    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-height', valueMap: mapPercentToPosition(collapsedChildren, 100)}});
+    actions.push({
+      name: "changeDataDirty",
+      param: {
+        eles: collapsedChildren,
+        name: "background-color",
+        valueMap: collapsedColorIDMap,
+      },
+    });
+    actions.push({
+      name: "changeDataDirty",
+      param: {
+        eles: collapsedChildren,
+        name: "background-image",
+        valueMap: collapsedBackgroundImgMap,
+      },
+    });
+    actions.push({
+      name: "changeDataDirty",
+      param: {
+        eles: collapsedChildren,
+        name: "background-fit",
+        valueMap: mapCovertoBgFit(collapsedChildren),
+      },
+    });
+    actions.push({
+      name: "changeDataDirty",
+      param: {
+        eles: collapsedChildren,
+        name: "background-position-x",
+        valueMap: mapPercentToPosition(collapsedChildren, 50),
+      },
+    });
+    actions.push({
+      name: "changeDataDirty",
+      param: {
+        eles: collapsedChildren,
+        name: "background-position-y",
+        valueMap: mapPercentToPosition(collapsedChildren, 50),
+      },
+    });
+    actions.push({
+      name: "changeDataDirty",
+      param: {
+        eles: collapsedChildren,
+        name: "background-width",
+        valueMap: mapPercentToPosition(collapsedChildren, 100),
+      },
+    });
+    actions.push({
+      name: "changeDataDirty",
+      param: {
+        eles: collapsedChildren,
+        name: "background-height",
+        valueMap: mapPercentToPosition(collapsedChildren, 100),
+      },
+    });
     // if background-image isn't brought back into css, it isn't shown as soon as the node is expanded until the end of animation
-    // the reason of for loop is that changeCss function cannot find collapsed nodes if valueMap is an object, but it works if it is a string   
-    for(var i = 0; i < collapsedChildren.length; i++){
-      actions.push({name: "changeCss", param: {eles: collapsedChildren[i], name: 'background-image', valueMap: collapsedBackgroundImgMap[collapsedChildren[i].id()]}});
+    // the reason of for loop is that changeCss function cannot find collapsed nodes if valueMap is an object, but it works if it is a string
+    for (var i = 0; i < collapsedChildren.length; i++) {
+      actions.push({
+        name: "changeCss",
+        param: {
+          eles: collapsedChildren[i],
+          name: "background-image",
+          valueMap: collapsedBackgroundImgMap[collapsedChildren[i].id()],
+        },
+      });
     }
-    
-    actions.push({name: "refreshColorSchemeMenu", param: {value: newColorScheme, self: self, scheme_type: scheme_type}});
+
+    actions.push({
+      name: "refreshColorSchemeMenu",
+      param: { value: newColorScheme, self: self, scheme_type: scheme_type },
+    });
 
     // set to be the default as well
-    for(var nodeClass in mapColorSchemes[newColorScheme]['values']){
-      classBgColor = mapColorSchemes[newColorScheme]['values'][nodeClass];
-      classBgImg = scheme_type == 'gradient' ? colorCodeToGradientImage[mapColorSchemes[newColorScheme]['values'][nodeClass]] : colorCodeTo3DImage[mapColorSchemes[newColorScheme]['values'][nodeClass]];
+    for (var nodeClass in mapColorSchemes[newColorScheme]["values"]) {
+      classBgColor = mapColorSchemes[newColorScheme]["values"][nodeClass];
+      classBgImg =
+        scheme_type == "gradient"
+          ? colorCodeToGradientImage[
+              mapColorSchemes[newColorScheme]["values"][nodeClass]
+            ]
+          : colorCodeTo3DImage[
+              mapColorSchemes[newColorScheme]["values"][nodeClass]
+            ];
       // nodeClass may not be defined in the defaultProperties (for edges, for example)
-      if(nodeClass in chiseInstance.elementUtilities.getDefaultProperties()){
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-color', value: classBgColor}});
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-fit', value: 'cover'}});
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-position-x', value: '50%'}});
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-position-y', value: '50%'}});
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-image', value: classBgImg}});
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-width', value: '100%'}});
-        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-height', value:'100%'}});
-
-
+      if (nodeClass in chiseInstance.elementUtilities.getDefaultProperties()) {
+        actions.push({
+          name: "setDefaultProperty",
+          param: {
+            class: nodeClass,
+            name: "background-color",
+            value: classBgColor,
+          },
+        });
+        actions.push({
+          name: "setDefaultProperty",
+          param: { class: nodeClass, name: "background-fit", value: "cover" },
+        });
+        actions.push({
+          name: "setDefaultProperty",
+          param: {
+            class: nodeClass,
+            name: "background-position-x",
+            value: "50%",
+          },
+        });
+        actions.push({
+          name: "setDefaultProperty",
+          param: {
+            class: nodeClass,
+            name: "background-position-y",
+            value: "50%",
+          },
+        });
+        actions.push({
+          name: "setDefaultProperty",
+          param: {
+            class: nodeClass,
+            name: "background-image",
+            value: classBgImg,
+          },
+        });
+        actions.push({
+          name: "setDefaultProperty",
+          param: { class: nodeClass, name: "background-width", value: "100%" },
+        });
+        actions.push({
+          name: "setDefaultProperty",
+          param: { class: nodeClass, name: "background-height", value: "100%" },
+        });
       }
     }
   }
-  
+
   return actions;
 };
 
 // the 3 following functions are related to the handling of the dynamic image
 // used during drag and drop of palette nodes
 appUtilities.dragImageMouseMoveHandler = function (e) {
-      $("#drag-image").css({left:e.pageX, top:e.pageY});
+  $("#drag-image").css({ left: e.pageX, top: e.pageY });
 };
 
 // get drag image for the given html value
@@ -2096,20 +2419,28 @@ appUtilities.dragImageMouseMoveHandler = function (e) {
 // replaced by '-' char
 appUtilities.getDragImagePath = function (htmlValue) {
   var imgNameMap = {
-    'SIF-macromolecule': 'macromolecule',
-    'SIF-simple-chemical': 'simple-chemical'
+    "SIF-macromolecule": "macromolecule",
+    "SIF-simple-chemical": "simple-chemical",
   };
 
-  var imgName = imgNameMap[ htmlValue ] || htmlValue;
-  var imgPath = 'app/img/nodes/' + imgName + '.svg';
+  var imgName = imgNameMap[htmlValue] || htmlValue;
+  var imgPath = "app/img/nodes/" + imgName + ".svg";
 
   return imgPath;
-}
+};
 
-appUtilities.addDragImage = function (imgPath, width, height){
+appUtilities.addDragImage = function (imgPath, width, height) {
   // see: http://stackoverflow.com/questions/38838508/make-a-dynamic-image-follow-mouse
-  $(document.body).append('<img id="drag-image" src="'+imgPath+'" style="position: absolute;'+
-                                'width:'+width+'; height:'+height+'; left: -100px; top: -100px;" >');
+  $(document.body).append(
+    '<img id="drag-image" src="' +
+      imgPath +
+      '" style="position: absolute;' +
+      "width:" +
+      width +
+      "; height:" +
+      height +
+      '; left: -100px; top: -100px;" >'
+  );
   $(document).on("mousemove", appUtilities.dragImageMouseMoveHandler);
 };
 
@@ -2119,14 +2450,14 @@ appUtilities.removeDragImage = function () {
 };
 
 appUtilities.getAllStyles = function (_cy, _nodes, _edges) {
-
   // use _cy param if it is set else use the recently active cy instance
   var cy = _cy || appUtilities.getActiveCy();
   var elementUtilities = this.getChiseInstance(cy).elementUtilities;
   var nodes = _nodes || cy.nodes();
   var edges = _edges || cy.edges();
 
-  var collapsedChildren = elementUtilities.getAllCollapsedChildrenRecursively(nodes);
+  var collapsedChildren =
+    elementUtilities.getAllCollapsedChildrenRecursively(nodes);
   var collapsedChildrenNodes = collapsedChildren.filter("node");
   var allNodes = nodes.union(collapsedChildrenNodes);
   var collapsedChildrenEdges = collapsedChildren.filter("edge");
@@ -2137,84 +2468,87 @@ appUtilities.getAllStyles = function (_cy, _nodes, _edges) {
   var imagesUsed = appUtilities.getImagesFromElements(nodes);
 
   var nodePropertiesToXml = {
-    'background-color': 'fill',
-    'background-opacity': 'background-opacity', // not an sbgnml XML attribute, but used with fill
-    'border-color': 'stroke',
-    'border-width': 'strokeWidth',
-    'font-size': 'fontSize',
-    'font-weight': 'fontWeight',
-    'font-style': 'fontStyle',
-    'font-family': 'fontFamily',
-    'color': 'fontColor',
-    'background-image': 'backgroundImage',
-    'background-fit': 'backgroundFit',
-    'background-position-x': 'backgroundPosX',
-    'background-position-y': 'backgroundPosY',
-    'background-height': 'backgroundHeight',
-    'background-width': 'backgroundWidth',
-    'background-image-opacity': 'backgroundImageOpacity',
-    'background-opacity': 'backgroundOpacity',
+    "background-color": "fill",
+    "background-opacity": "background-opacity", // not an sbgnml XML attribute, but used with fill
+    "border-color": "stroke",
+    "border-width": "strokeWidth",
+    "font-size": "fontSize",
+    "font-weight": "fontWeight",
+    "font-style": "fontStyle",
+    "font-family": "fontFamily",
+    color: "fontColor",
+    "background-image": "backgroundImage",
+    "background-fit": "backgroundFit",
+    "background-position-x": "backgroundPosX",
+    "background-position-y": "backgroundPosY",
+    "background-height": "backgroundHeight",
+    "background-width": "backgroundWidth",
+    "background-image-opacity": "backgroundImageOpacity",
+    "background-opacity": "backgroundOpacity",
   };
   var edgePropertiesToXml = {
-    'line-color': 'stroke',
-    'width': 'strokeWidth'
+    "line-color": "stroke",
+    width: "strokeWidth",
   };
   var infoboxPropertiesToXml = {
-    'background-color': 'fill',
-    'border-color': 'stroke',
-    'border-width': 'strokeWidth',
-    'font-size': 'fontSize',
-    'font-weight': 'fontWeight',
-    'font-style': 'fontStyle',
-    'font-family': 'fontFamily',
-    'font-color': 'fontColor',
-    'shape-name': 'shapeName'
+    "background-color": "fill",
+    "border-color": "stroke",
+    "border-width": "strokeWidth",
+    "font-size": "fontSize",
+    "font-weight": "fontWeight",
+    "font-style": "fontStyle",
+    "font-family": "fontFamily",
+    "font-color": "fontColor",
+    "shape-name": "shapeName",
   };
 
-  function getInfoboxStyle( infobox, propName ) {
-    return infobox.style && infobox.style[ propName ];
+  function getInfoboxStyle(infobox, propName) {
+    return infobox.style && infobox.style[propName];
   }
 
-  function getElementData( ele, propName ) {
+  function getElementData(ele, propName) {
     return ele.data(propName);
   }
 
-  function getStyleHash (member, properties, _getFcn) {
+  function getStyleHash(member, properties, _getFcn) {
     var getFcn = _getFcn || getElementData;
     var hash = "";
-    for(var cssProp in properties){
+    for (var cssProp in properties) {
       if (getFcn(member, cssProp)) {
-        if(cssProp === 'background-image'){
+        if (cssProp === "background-image") {
           var imgs = appUtilities.getValidImages(member);
           hash += appUtilities.getValidImageIDs(imgs, imagesUsed);
-        }
-        else
-          hash += getFcn(member, cssProp).toString();
-      }
-      else {
+        } else hash += getFcn(member, cssProp).toString();
+      } else {
         hash += "";
       }
     }
     return hash;
   }
 
-  function getStyleProperties (member, properties, _getFcn) {
+  function getStyleProperties(member, properties, _getFcn) {
     getFcn = _getFcn || getElementData;
     var props = {};
-    for(var cssProp in properties){
+    for (var cssProp in properties) {
       if (getFcn(member, cssProp)) {
         //if it is a color property, replace it with corresponding id
-        if (cssProp == 'background-color' || cssProp == 'border-color' || cssProp == 'line-color') {
+        if (
+          cssProp == "background-color" ||
+          cssProp == "border-color" ||
+          cssProp == "line-color"
+        ) {
           var validColor = appUtilities.getValidColor(member, cssProp, getFcn);
           var colorID = colorUsed[validColor];
           props[properties[cssProp]] = colorID;
         }
         //if it is background image property, replace it with corresponding id
-        else if(cssProp == 'background-image'){
+        else if (cssProp == "background-image") {
           var imgs = appUtilities.getValidImages(member);
-          props[properties[cssProp]] = appUtilities.getValidImageIDs(imgs, imagesUsed);
-        }
-        else{
+          props[properties[cssProp]] = appUtilities.getValidImageIDs(
+            imgs,
+            imagesUsed
+          );
+        } else {
           props[properties[cssProp]] = getFcn(member, cssProp);
         }
       }
@@ -2228,39 +2562,40 @@ appUtilities.getAllStyles = function (_cy, _nodes, _edges) {
       return type;
     }
 
-    var getFcn = type === 'infobox' ? getInfoboxStyle : undefined;
+    var getFcn = type === "infobox" ? getInfoboxStyle : undefined;
 
-    for(var i=0; i<list.length; i++) {
+    for (var i = 0; i < list.length; i++) {
       // a member is either an element or infobox
       var member = list[i];
-      var styleKey = getKeyPrefix(type) + getStyleHash(member, propertiesToXml, getFcn);
-      if (!styles.hasOwnProperty(styleKey)) { // new style encountered, init this new style
+      var styleKey =
+        getKeyPrefix(type) + getStyleHash(member, propertiesToXml, getFcn);
+      if (!styles.hasOwnProperty(styleKey)) {
+        // new style encountered, init this new style
         var properties = getStyleProperties(member, propertiesToXml, getFcn);
         styles[styleKey] = {
           idList: [],
-          properties: properties
+          properties: properties,
         };
       }
       var currentMemberStyle = styles[styleKey];
-      var id = type === 'infobox' ? member.id : member.data('id');
+      var id = type === "infobox" ? member.id : member.data("id");
       // add current node id to this style
       currentMemberStyle.idList.push(id);
 
-      if ( type === 'node' ) {
-        var infoboxes = member.data('statesandinfos');
-        populateStyleStructure(infoboxes, infoboxPropertiesToXml, 'infobox')
+      if (type === "node") {
+        var infoboxes = member.data("statesandinfos");
+        populateStyleStructure(infoboxes, infoboxPropertiesToXml, "infobox");
       }
     }
   }
 
-  populateStyleStructure( allNodes, nodePropertiesToXml, 'node' );
-  populateStyleStructure( allEdges, edgePropertiesToXml, 'edge' );
+  populateStyleStructure(allNodes, nodePropertiesToXml, "node");
+  populateStyleStructure(allEdges, edgePropertiesToXml, "edge");
 
-  var containerBgColor = $(cy.container()).css('background-color');
+  var containerBgColor = $(cy.container()).css("background-color");
   if (containerBgColor == "transparent") {
     containerBgColor = "#ffffff";
-  }
-  else {
+  } else {
     containerBgColor = getXmlValidColor(containerBgColor);
   }
 
@@ -2268,7 +2603,7 @@ appUtilities.getAllStyles = function (_cy, _nodes, _edges) {
     colors: colorUsed,
     images: imagesUsed,
     background: containerBgColor,
-    styles: styles
+    styles: styles,
   };
 };
 
@@ -2276,60 +2611,62 @@ appUtilities.getAllStyles = function (_cy, _nodes, _edges) {
 // can optionnally convert opacity value and return a 8 characer hex color
 function getXmlValidColor(color, opacity) {
   var finalColor = chroma(color).hex();
-  if (typeof opacity === 'undefined') {
+  if (typeof opacity === "undefined") {
     return finalColor;
-  }
-  else { // append opacity as hex
+  } else {
+    // append opacity as hex
     // see http://stackoverflow.com/questions/2877322/convert-opacity-to-hex-in-javascript
     return finalColor + Math.floor(opacity * 255).toString(16);
   }
 }
 
 appUtilities.getValidColor = function (member, colorProperty, _getFcn) {
-  function getElementData( ele, propName ) {
+  function getElementData(ele, propName) {
     return ele.data(propName);
   }
 
   var getFcn = _getFcn || getElementData;
   if (getFcn(member, colorProperty)) {
-    if (colorProperty == 'background-color') { // special case, take in count the opacity
-      if (getFcn(member, 'background-opacity')) {
-        return getXmlValidColor(getFcn(member, 'background-color'), getFcn(member, 'background-opacity'));
+    if (colorProperty == "background-color") {
+      // special case, take in count the opacity
+      if (getFcn(member, "background-opacity")) {
+        return getXmlValidColor(
+          getFcn(member, "background-color"),
+          getFcn(member, "background-opacity")
+        );
+      } else {
+        return getXmlValidColor(getFcn(member, "background-color"));
       }
-      else {
-        return getXmlValidColor(getFcn(member, 'background-color'));
-      }
-    }
-    else { // general case
+    } else {
+      // general case
       return getXmlValidColor(getFcn(member, colorProperty));
     }
-  }
-  else { // element don't have that property
+  } else {
+    // element don't have that property
     return undefined;
   }
 };
 
 appUtilities.getValidImages = function (ele) {
-  if (ele.isNode() && ele.data('background-image')) {
-    return ele.data('background-image').split(" ");
-  }
-  else { // element don't have that property
+  if (ele.isNode() && ele.data("background-image")) {
+    return ele.data("background-image").split(" ");
+  } else {
+    // element don't have that property
     return undefined;
   }
 };
 
 appUtilities.getValidImageIDs = function (imgs, imagesUsed) {
-  if(imgs && imagesUsed && imgs.length > 0){
+  if (imgs && imagesUsed && imgs.length > 0) {
     var ids = [];
-    imgs.forEach(function(img){
+    imgs.forEach(function (img) {
       ids.push(imagesUsed[img]);
     });
     return ids.join(" ");
-  }
-  else{
+  } else {
     return undefined;
   }
-}
+};
 
 /*
   returns: {
@@ -2340,63 +2677,61 @@ appUtilities.getColorsFromElements = function (nodes, edges) {
   var colorHash = {};
   var colorID = 0;
 
-  var nodePropNames = ['background-color', 'border-color'];
-  var edgePropNames = ['line-color'];
-  var infoboxPropNames = ['background-color', 'border-color'];
-  var infoboxGetFcn = function( infobox, propName ) {
-    return infobox && infobox.style && infobox.style[ propName ];
+  var nodePropNames = ["background-color", "border-color"];
+  var edgePropNames = ["line-color"];
+  var infoboxPropNames = ["background-color", "border-color"];
+  var infoboxGetFcn = function (infobox, propName) {
+    return infobox && infobox.style && infobox.style[propName];
   };
 
-  nodes.forEach( function( n ) {
-    processMember( n, nodePropNames );
-    var infoboxes = n.data('statesandinfos');
-    infoboxes.forEach( function( i ) {
-      processMember( i, infoboxPropNames, infoboxGetFcn );
-    } );
-  } );
+  nodes.forEach(function (n) {
+    processMember(n, nodePropNames);
+    var infoboxes = n.data("statesandinfos");
+    infoboxes.forEach(function (i) {
+      processMember(i, infoboxPropNames, infoboxGetFcn);
+    });
+  });
 
-  edges.forEach( function( e ) {
-    processMember( e, edgePropNames );
-  } );
+  edges.forEach(function (e) {
+    processMember(e, edgePropNames);
+  });
 
   function processMember(m, propNames, getFcn) {
-    propNames.forEach( function( propName ) {
+    propNames.forEach(function (propName) {
       var validColor = appUtilities.getValidColor(m, propName, getFcn);
       if (!colorHash[validColor]) {
         colorID++;
-        colorHash[validColor] = 'color_' + colorID;
+        colorHash[validColor] = "color_" + colorID;
       }
-    } );
+    });
   }
 
   return colorHash;
-}
+};
 
 appUtilities.getImagesFromElements = function (nodes) {
   var imageHash = {};
   var imageID = 0;
-  for(var i=0; i<nodes.length; i++) {
+  for (var i = 0; i < nodes.length; i++) {
     var node = nodes[i];
     var validImages = appUtilities.getValidImages(node);
-    if(!validImages)
-      continue;
-    validImages.forEach(function(img){
+    if (!validImages) continue;
+    validImages.forEach(function (img) {
       if (!imageHash[img]) {
         imageID++;
-        imageHash[img] = 'image_' + imageID;
+        imageHash[img] = "image_" + imageID;
       }
     });
   }
 
   return imageHash;
-}
+};
 
 /**
  * updates current general properties and refreshes map
  * @mapProperties : a set of properties as object
  */
-appUtilities.setMapProperties = function(mapProperties, _chiseInstance) {
-
+appUtilities.setMapProperties = function (mapProperties, _chiseInstance) {
   // use _chiseInstance param if it is set else use the recently active chise instance
   var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
 
@@ -2404,82 +2739,104 @@ appUtilities.setMapProperties = function(mapProperties, _chiseInstance) {
   var cy = chiseInstance.getCy();
 
   // get current general properties for cy
-  var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+  var currentGeneralProperties = appUtilities.getScratch(
+    cy,
+    "currentGeneralProperties"
+  );
 
-  for (property in mapProperties){
+  for (property in mapProperties) {
     var value = mapProperties[property];
     // convert strings to correct appropriate types
-    if (value == 'true' || value == 'false')  // if boolean
-      currentGeneralProperties[property] = (value == 'true');
-    else if (Number(value))  // if number
+    if (value == "true" || value == "false")
+      // if boolean
+      currentGeneralProperties[property] = value == "true";
+    else if (Number(value))
+      // if number
       currentGeneralProperties[property] = Number(value);
-    else  // if string
-      currentGeneralProperties[property] = value;
-  }
-    // refresh map with new settings
-    chiseInstance.setShowComplexName(currentGeneralProperties.showComplexName);
-    chiseInstance.refreshPaddings(); // Refresh/recalculate paddings
-
-    cy.edges().css('arrow-scale', currentGeneralProperties.arrowScale);
-
-    //setMapProperties function is called in sbgnvizLoadFileEnd sbgnvizLoadSampleEnd 
-    //event handler
-    
-    if ('highlightColor' in mapProperties && 'extraHighlightThickness' in mapProperties) {
-      var viewUtilities = cy.viewUtilities('get');
-      var highlightColor = currentGeneralProperties.highlightColor[0];
-      var extraHighlightThickness = currentGeneralProperties.extraHighlightThickness;
-
-      viewUtilities.changeHighlightStyle(0, {
-        'border-width': function (ele) {
-          return Math.max(parseFloat(ele.data('border-width')) + extraHighlightThickness, 3);
-        }, 'border-color': highlightColor
-      }, {
-        'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + extraHighlightThickness, 3); },
-        'line-color': highlightColor,
-        'source-arrow-color': highlightColor,
-        'target-arrow-color': highlightColor
-    });
-    }
-    
+    // if string
+    else currentGeneralProperties[property] = value;
+  }
+  // refresh map with new settings
+  chiseInstance.setShowComplexName(currentGeneralProperties.showComplexName);
+  chiseInstance.refreshPaddings(); // Refresh/recalculate paddings
+
+  cy.edges().css("arrow-scale", currentGeneralProperties.arrowScale);
+
+  //setMapProperties function is called in sbgnvizLoadFileEnd sbgnvizLoadSampleEnd
+  //event handler
+
+  if (
+    "highlightColor" in mapProperties &&
+    "extraHighlightThickness" in mapProperties
+  ) {
+    var viewUtilities = cy.viewUtilities("get");
+    var highlightColor = currentGeneralProperties.highlightColor[0];
+    var extraHighlightThickness =
+      currentGeneralProperties.extraHighlightThickness;
+
+    viewUtilities.changeHighlightStyle(
+      0,
+      {
+        "border-width": function (ele) {
+          return Math.max(
+            parseFloat(ele.data("border-width")) + extraHighlightThickness,
+            3
+          );
+        },
+        "border-color": highlightColor,
+      },
+      {
+        width: function (ele) {
+          return Math.max(
+            parseFloat(ele.data("width")) + extraHighlightThickness,
+            3
+          );
+        },
+        "line-color": highlightColor,
+        "source-arrow-color": highlightColor,
+        "target-arrow-color": highlightColor,
+      }
+    );
+  }
 
-    if (currentGeneralProperties.enablePorts) {
-      chiseInstance.enablePorts();
-    }
-    else {
-      chiseInstance.disablePorts();
-    }
+  if (currentGeneralProperties.enablePorts) {
+    chiseInstance.enablePorts();
+  } else {
+    chiseInstance.disablePorts();
+  }
 
-    var topologyGrouping = chiseInstance.sifTopologyGrouping;
-    if (currentGeneralProperties.enableSIFTopologyGrouping) {
-      topologyGrouping.apply();
-    }
-    else {
-      topologyGrouping.unapply();
-    }
+  var topologyGrouping = chiseInstance.sifTopologyGrouping;
+  if (currentGeneralProperties.enableSIFTopologyGrouping) {
+    topologyGrouping.apply();
+  } else {
+    topologyGrouping.unapply();
+  }
 
-    if (currentGeneralProperties.allowCompoundNodeResize) {
-      chiseInstance.considerCompoundSizes();
-    }
-    else {
-      chiseInstance.omitCompoundSizes();
-    }
+  if (currentGeneralProperties.allowCompoundNodeResize) {
+    chiseInstance.considerCompoundSizes();
+  } else {
+    chiseInstance.omitCompoundSizes();
+  }
 
-    // reset 'currentGeneralProperties' on scratchpad of cy
-    appUtilities.setScratch(cy, 'currentGeneralProperties', currentGeneralProperties);
+  // reset 'currentGeneralProperties' on scratchpad of cy
+  appUtilities.setScratch(
+    cy,
+    "currentGeneralProperties",
+    currentGeneralProperties
+  );
 
-    // use the panel id as the network key
-    var networkKey = cy.container().id;
+  // use the panel id as the network key
+  var networkKey = cy.container().id;
 
-    // update the network tab description as the map name is just changed
-    appUtilities.updateNetworkTabDesc(networkKey);
+  // update the network tab description as the map name is just changed
+  appUtilities.updateNetworkTabDesc(networkKey);
 };
 
 // filter the map properties of given object
-appUtilities.filterMapProperties = function(obj) {
+appUtilities.filterMapProperties = function (obj) {
   var mapProps = {};
 
-  for ( var prop in obj ) {
+  for (var prop in obj) {
     if (chise.validMapProperties[prop]) {
       mapProps[prop] = obj[prop];
     }
@@ -2488,8 +2845,7 @@ appUtilities.filterMapProperties = function(obj) {
   return mapProps;
 };
 
-appUtilities.launchWithModelFile = function() {
-
+appUtilities.launchWithModelFile = function () {
   var paramObj = getQueryParameters();
   var url_path = paramObj.url;
   var uri_path = paramObj.uri;
@@ -2499,165 +2855,249 @@ appUtilities.launchWithModelFile = function() {
 
   // attach url params to the object to be used on sbgnvizLoadFileEnd event
   // it will be cleared immediately after usage
-  if(url_path || uri_path) {
-    appUtilities.setScratch(cyInstance, 'urlParams', paramObj);
-  }
-  else {
-    appUtilities.setScratch(cyInstance, 'urlParams', undefined);
+  if (url_path || uri_path) {
+    appUtilities.setScratch(cyInstance, "urlParams", paramObj);
+  } else {
+    appUtilities.setScratch(cyInstance, "urlParams", undefined);
   }
 
   var promptInvalidURIWarning = this.promptInvalidURIWarning;
   var promptInvalidURLWarning = this.promptInvalidURLWarning;
 
-  if(url_path != undefined)
+  if (url_path != undefined)
     loadFromURL(url_path, chiseInstance, promptInvalidURLWarning);
-  else if(uri_path != undefined)
+  else if (uri_path != undefined)
     loadFromURI(uri_path, chiseInstance, promptInvalidURIWarning);
-  else
-    tutorial.introduction(true);
-
-  function loadFromURL(filepath, chiseInstance, promptInvalidURLWarning){
+  else tutorial.introduction(true);
 
-    chiseInstance.startSpinner('paths-byURL-spinner')
+  function loadFromURL(filepath, chiseInstance, promptInvalidURLWarning) {
+    chiseInstance.startSpinner("paths-byURL-spinner");
 
     var loadCallbackSBGNMLValidity = function (text) {
       $.ajax({
-        type: 'post',
+        type: "post",
         url: "/utilities/validateSBGNML",
-        data: {sbgnml: text},
-        success: function(data){
-          if(data.length == 0) {
+        data: { sbgnml: text },
+        success: function (data) {
+          if (data.length == 0) {
             console.log("Xsd validation OK");
-          }
-          else {
+          } else {
             console.error("Xsd validation failed. Errors:", data);
           }
         },
-        error: function(req, status, err) {
+        error: function (req, status, err) {
           console.error("Error during file validation", status, err);
-        }
+        },
       });
-    }
+    };
 
-    var loadCallbackInvalidityWarning  = function () {
+    var loadCallbackInvalidityWarning = function () {
       promptInvalidURLWarning.render();
-    }
+    };
 
-    if(filepath == undefined){
+    if (filepath == undefined) {
       loadCallbackInvalidityWarning();
       return;
     }
 
-    var filename = filepath.split('/');
-    if(filename.length > 0)
-      filename = filename[filename.length - 1];
-    else
-      filename = 'remote';
+    var filename = filepath.split("/");
+    if (filename.length > 0) filename = filename[filename.length - 1];
+    else filename = "remote";
 
-    var fileExtension = filename.split('.');
-    if(fileExtension.length > 0 && filename.indexOf('.') > -1)
+    var fileExtension = filename.split(".");
+    if (fileExtension.length > 0 && filename.indexOf(".") > -1)
       fileExtension = fileExtension[fileExtension.length - 1];
-    else
-      fileExtension = 'txt';
+    else fileExtension = "txt";
 
     $.ajax({
-      type: 'get',
+      type: "get",
       url: "/utilities/testURL",
-      data: {url: filepath},
-      success: async function(data){
+      data: { url: filepath },
+      success: async function (data) {
         // here we can get 404 as well, for example, so there are still error cases to handle
 
-        var dataSize = data.response.body.length
-        if(dataSize>250000 && (fileExtension === "sbml" || fileExtension === "xml")  )
-        {
-          chiseInstance.showSpinnerText('paths-byURL-spinner')
+        var dataSize = data.response.body.length;
+        if (
+          dataSize > 250000 &&
+          (fileExtension === "sbml" || fileExtension === "xml")
+        ) {
+          chiseInstance.showSpinnerText("paths-byURL-spinner");
         }
-        
-        if (!data.error && data.response.statusCode == 200 && data.response.body) {
-          $(document).trigger('sbgnvizLoadFromURL', [filename, cyInstance]);
+
+        if (
+          !data.error &&
+          data.response.statusCode == 200 &&
+          data.response.body
+        ) {
+          $(document).trigger("sbgnvizLoadFromURL", [filename, cyInstance]);
           var fileToLoad = new File([data.response.body], filename, {
-            type: 'text/' + fileExtension,
-            lastModified: Date.now()
+            type: "text/" + fileExtension,
+            lastModified: Date.now(),
           });
 
-          if (fileExtension === "xml" || fileExtension === "xml#" 
-              || fileExtension === "sbml" || fileExtension === "sbml#") {
-
-            await chiseInstance.loadSbml(fileToLoad,  success = async function(data){
-              var cy = appUtilities.getActiveCy();
-              if (cy.elements().length !== 0) {
-                await promptConfirmationView.render(async function () {
-                 await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
-                  chiseInstance.endSpinner('paths-byURL-spinner')
-                });
-              }
-              else {
-                await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
-                chiseInstance.endSpinner('paths-byURL-spinner')
-
-              }
-            });
+          if (
+            fileExtension === "xml" ||
+            fileExtension === "xml#" ||
+            fileExtension === "sbml" ||
+            fileExtension === "sbml#"
+          ) {
           }
-          else {
-            chiseInstance.loadNwtFile(fileToLoad, loadCallbackSBGNMLValidity, loadCallbackInvalidityWarning, paramObj);
-            chiseInstance.endSpinner('paths-byURL-spinner')
+          if (fileExtension === "gpml") {
+            chiseInstance.loadGpml(
+              file,
+              (success = async function (data) {
+                if (cyInstance.elements().length !== 0) {
+                  promptConfirmationView.render(function () {
+                    chiseInstance.loadSBGNMLText(
+                      data,
+                      false,
+                      filename,
+                      cy,
+                      paramObj
+                    );
+                    chiseInstance.endSpinner("paths-byURL-spinner");
+                  });
+
+                  chiseInstance.endSpinner("paths-byURL-spinner");
+                } else {
+                  await chiseInstance.loadSBGNMLText(
+                    data.message,
+                    false,
+                    filename,
+                    cy,
+                    paramObj
+                  );
+                  chiseInstance.endSpinner("paths-byURL-spinner");
+                }
+              })
+            );
+          } else if (fileExtension === "xml" || fileExtension === "sbml") {
+            // CD file
+            if (xmlObject.children.item(0).getAttribute("xmlns:celldesigner")) {
+              chiseInstance.loadCellDesigner(
+                file,
+                (success = async function (data) {
+                  if (cyInstance.elements().length !== 0) {
+                    promptConfirmationView.render(function () {
+                      chiseInstance.loadSBGNMLText(
+                        data,
+                        false,
+                        filename,
+                        cy,
+                        paramObj
+                      );
+                      chiseInstance.endSpinner("paths-byURL-spinner");
+                    });
+
+                    chiseInstance.endSpinner("paths-byURL-spinner");
+                  } else {
+                    await chiseInstance.loadSBGNMLText(
+                      data,
+                      false,
+                      filename,
+                      cy,
+                      paramObj
+                    );
+                    chiseInstance.endSpinner("paths-byURL-spinner");
+                  }
+                })
+              );
+            } else {
+              // sbml file
+              await chiseInstance.loadSbml(
+                file,
+                (success = async function (data) {
+                  if (cyInstance.elements().length !== 0) {
+                    await promptConfirmationView.render(async function () {
+                      await chiseInstance.loadSBGNMLText(
+                        data.message,
+                        false,
+                        filename,
+                        cy,
+                        paramObj
+                      );
+                    });
+                    chiseInstance.endSpinner("paths-byURL-spinner");
+                  } else {
+                    await chiseInstance.loadSBGNMLText(
+                      data.message,
+                      false,
+                      filename,
+                      cy,
+                      paramObj
+                    );
+                    chiseInstance.endSpinner("paths-byURL-spinner");
+                  }
+                })
+              );
+            }
+          } else {
+            chiseInstance.loadNwtFile(
+              fileToLoad,
+              loadCallbackSBGNMLValidity,
+              loadCallbackInvalidityWarning,
+              paramObj
+            );
+            chiseInstance.endSpinner("paths-byURL-spinner");
           }
-        }
-        else {
+        } else {
           loadCallbackInvalidityWarning();
-          chiseInstance.endSpinner('paths-byURL-spinner')
-
+          chiseInstance.endSpinner("paths-byURL-spinner");
         }
       },
-      error: function(xhr, options, err){
+      error: function (xhr, options, err) {
         loadCallbackInvalidityWarning();
-        chiseInstance.endSpinner('paths-byURL-spinner')
-
-      }
+        chiseInstance.endSpinner("paths-byURL-spinner");
+      },
     });
-
   }
 
-  function loadFromURI(uri, chiseInstance, promptInvalidURIWarning){
-
-    var queryURL = "http://www.pathwaycommons.org/pc2/get?uri="
-          + uri + "&format=SBGN";
+  function loadFromURI(uri, chiseInstance, promptInvalidURIWarning) {
+    var queryURL =
+      "http://www.pathwaycommons.org/pc2/get?uri=" + uri + "&format=SBGN";
 
-    var filename = uri + '.nwt';
+    var filename = uri + ".nwt";
     var cyInstance = chiseInstance.getCy();
 
-    chiseInstance.startSpinner('paths-byURI-spinner');
+    chiseInstance.startSpinner("paths-byURI-spinner");
 
-    var currentLayoutProperties = appUtilities.getScratch(cyInstance, 'currentLayoutProperties');
+    var currentLayoutProperties = appUtilities.getScratch(
+      cyInstance,
+      "currentLayoutProperties"
+    );
 
     $.ajax({
-      type: 'get',
+      type: "get",
       url: "/utilities/testURL",
-      data: {url: queryURL},
-      success: function(data){
+      data: { url: queryURL },
+      success: function (data) {
         // here we can get 404 as well, for example, so there are still error cases to handle
         if (data.response.statusCode == 200 && data.response.body) {
           var xml = $.parseXML(data.response.body);
-          $(document).trigger('sbgnvizLoadFile', [filename, cyInstance]);
-          $(document).trigger('sbgnvizLoadFromURI', [filename, cyInstance]);          
-          chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml, paramObj), undefined, currentLayoutProperties);
-          chiseInstance.endSpinner('paths-byURI-spinner');
-          $(document).trigger('sbgnvizLoadFileEnd', [filename,  cyInstance]);
-        }
-        else {
-          chiseInstance.endSpinner('paths-byURI-spinner');
+          $(document).trigger("sbgnvizLoadFile", [filename, cyInstance]);
+          $(document).trigger("sbgnvizLoadFromURI", [filename, cyInstance]);
+          chiseInstance.updateGraph(
+            chiseInstance.convertSbgnmlToJson(xml, paramObj),
+            undefined,
+            currentLayoutProperties
+          );
+          chiseInstance.endSpinner("paths-byURI-spinner");
+          $(document).trigger("sbgnvizLoadFileEnd", [filename, cyInstance]);
+        } else {
+          chiseInstance.endSpinner("paths-byURI-spinner");
           promptInvalidURIWarning.render();
         }
       },
-      error: function(xhr, options, err){
-        chiseInstance.endSpinner('paths-byURI-spinner');
-        promptInvalidURIWarning.render();      }
+      error: function (xhr, options, err) {
+        chiseInstance.endSpinner("paths-byURI-spinner");
+        promptInvalidURIWarning.render();
+      },
     });
   }
 
   // returns an object that contains name-value pairs of query parameters
   function getQueryParameters(url) {
-    if (!url){
+    if (!url) {
       url = window.location.href;
     }
 
@@ -2665,26 +3105,25 @@ appUtilities.launchWithModelFile = function() {
     // Parse the query sting into an object please see:
     // https://stevenbenner.com/2010/03/javascript-regex-trick-parse-a-query-string-into-an-object/
     url.replace(
-        new RegExp("([^?=&]+)(=([^&#]*))?", "g"),
-        function($0, name, $2, value) {
-          if (value !== undefined) {
-            var lowerCaseName = name.toLowerCase();
-            // for 'uri' and 'url' parameters provide case insensitivity by converting to lower case
-            if (lowerCaseName === 'url' || lowerCaseName === 'uri') {
-              name = lowerCaseName;
-            }
-            queryParams[name] = value;
+      new RegExp("([^?=&]+)(=([^&#]*))?", "g"),
+      function ($0, name, $2, value) {
+        if (value !== undefined) {
+          var lowerCaseName = name.toLowerCase();
+          // for 'uri' and 'url' parameters provide case insensitivity by converting to lower case
+          if (lowerCaseName === "url" || lowerCaseName === "uri") {
+            name = lowerCaseName;
           }
+          queryParams[name] = value;
         }
+      }
     );
 
     return queryParams;
   }
-}
-
-appUtilities.navigateToOtherEnd = function(edge, mouse_rend, mouse_normal) {
+};
 
-  if(!edge.isEdge()){
+appUtilities.navigateToOtherEnd = function (edge, mouse_rend, mouse_normal) {
+  if (!edge.isEdge()) {
     return;
   }
 
@@ -2694,41 +3133,54 @@ appUtilities.navigateToOtherEnd = function(edge, mouse_rend, mouse_normal) {
   var source_node = edge.source();
   var target_node = edge.target();
 
-  var source_position = {x: edge_pts[0], y: edge_pts[1]};
-  var target_position = {x: edge_pts[edge_pts.length-2], y: edge_pts[edge_pts.length-1]};
+  var source_position = { x: edge_pts[0], y: edge_pts[1] };
+  var target_position = {
+    x: edge_pts[edge_pts.length - 2],
+    y: edge_pts[edge_pts.length - 1],
+  };
 
-  var source_loc = Math.pow((mouse_normal.x - source_position.x), 2) + Math.pow((mouse_normal.y - source_position.y), 2);
-  var target_loc = Math.pow((mouse_normal.x - target_position.x), 2) + Math.pow((mouse_normal.y - target_position.y), 2);
+  var source_loc =
+    Math.pow(mouse_normal.x - source_position.x, 2) +
+    Math.pow(mouse_normal.y - source_position.y, 2);
+  var target_loc =
+    Math.pow(mouse_normal.x - target_position.x, 2) +
+    Math.pow(mouse_normal.y - target_position.y, 2);
 
   // Animation direction
   var source_to_target = source_loc < target_loc;
 
   // Change direction of points according to animation direction
-  if(!source_to_target){
+  if (!source_to_target) {
     var new_edge_pts = [];
-    for(var i = edge_pts.length-1; i > 0; i=i-2){
-      new_edge_pts.push(edge_pts[i-1], edge_pts[i]);
+    for (var i = edge_pts.length - 1; i > 0; i = i - 2) {
+      new_edge_pts.push(edge_pts[i - 1], edge_pts[i]);
     }
     edge_pts = new_edge_pts;
   }
 
   var starting_point = 0;
   var minimum;
-  for(var i = 0; i < edge_pts.length-3; i=i+2){
-    var a_b = Math.pow((mouse_normal.x-edge_pts[i]), 2) + Math.pow((mouse_normal.y-edge_pts[i+1]), 2);
+  for (var i = 0; i < edge_pts.length - 3; i = i + 2) {
+    var a_b =
+      Math.pow(mouse_normal.x - edge_pts[i], 2) +
+      Math.pow(mouse_normal.y - edge_pts[i + 1], 2);
     a_b = Math.sqrt(a_b);
 
-    var b_c = Math.pow((mouse_normal.x-edge_pts[i+2]), 2) + Math.pow((mouse_normal.y-edge_pts[i+3]), 2);
+    var b_c =
+      Math.pow(mouse_normal.x - edge_pts[i + 2], 2) +
+      Math.pow(mouse_normal.y - edge_pts[i + 3], 2);
     b_c = Math.sqrt(b_c);
 
-    var a_c = Math.pow((edge_pts[i+2]-edge_pts[i]), 2) + Math.pow((edge_pts[i+3]-edge_pts[i+1]), 2);
+    var a_c =
+      Math.pow(edge_pts[i + 2] - edge_pts[i], 2) +
+      Math.pow(edge_pts[i + 3] - edge_pts[i + 1], 2);
     a_c = Math.sqrt(a_c);
 
     var difference = Math.abs(a_c - a_b - b_c);
 
-    if(minimum === undefined || minimum > difference){
+    if (minimum === undefined || minimum > difference) {
       minimum = difference;
-      starting_point = i+2;
+      starting_point = i + 2;
     }
   }
 
@@ -2736,29 +3188,26 @@ appUtilities.navigateToOtherEnd = function(edge, mouse_rend, mouse_normal) {
   var s_normal = start_node.position();
   var s_rendered = start_node.renderedPosition();
   var zoom_level = cy.zoom();
-  var finished = (edge_pts.length-starting_point-1)/2;
+  var finished = (edge_pts.length - starting_point - 1) / 2;
   start_node.select();
   // Animate for each bend point
-  for(var i = starting_point; i < edge_pts.length-1; i=i+2){
+  for (var i = starting_point; i < edge_pts.length - 1; i = i + 2) {
     // Convert normal position into rendered position
     var rend_x = (edge_pts[i] - s_normal.x) * zoom_level + s_rendered.x;
-    var rend_y = (edge_pts[i+1] - s_normal.y) * zoom_level + s_rendered.y;
+    var rend_y = (edge_pts[i + 1] - s_normal.y) * zoom_level + s_rendered.y;
 
     cy.animate({
-     duration: 1400,
-     panBy: {x: (mouse_rend.x-rend_x), y: (mouse_rend.y-rend_y)},
-     easing: 'ease',
-     complete: function(){
-      finished--;
-      if(finished <= 0)
-        (source_to_target ? target_node : source_node).select();
-     }
+      duration: 1400,
+      panBy: { x: mouse_rend.x - rend_x, y: mouse_rend.y - rend_y },
+      easing: "ease",
+      complete: function () {
+        finished--;
+        if (finished <= 0)
+          (source_to_target ? target_node : source_node).select();
+      },
     });
   }
-
-
-
-}
+};
 
 //Info-box drag handlers
 appUtilities.relocationDragHandler;
@@ -2767,11 +3216,15 @@ appUtilities.RelocationHandler;
 var relocatedNode;
 
 //Enables info-box relocation if a node is selected
-appUtilities.relocateInfoBoxes = function(node){
+appUtilities.relocateInfoBoxes = function (node) {
   var cy = this.getActiveCy();
   this.disableInfoBoxRelocation();
   //Abort if node has no info-boxes or selected ele is not a node
-  if (node.data("auxunitlayouts") === undefined || node.data("statesandinfos").length === 0 || !node.isNode()) {
+  if (
+    node.data("auxunitlayouts") === undefined ||
+    node.data("statesandinfos").length === 0 ||
+    !node.isNode()
+  ) {
     this.disableInfoBoxRelocation();
     return;
   }
@@ -2780,21 +3233,29 @@ appUtilities.relocateInfoBoxes = function(node){
   relocatedNode = node;
 
   //Call undo-redo relocate function
-  cy.undoRedo().do("relocateInfoBoxes", {node});
-
-}
+  cy.undoRedo().do("relocateInfoBoxes", { node });
+};
 
 //Checks whether a info-box is selected in a given mouse position
-appUtilities.checkMouseContainsInfoBox = function(cy, unit, mouse_down_x, mouse_down_y){
+appUtilities.checkMouseContainsInfoBox = function (
+  cy,
+  unit,
+  mouse_down_x,
+  mouse_down_y
+) {
   var box = unit.bbox;
   var instance = this.getActiveSbgnvizInstance();
   var coords = instance.classes.AuxiliaryUnit.getAbsoluteCoord(unit, cy);
-  return ((mouse_down_x >= coords.x - box.w / 2) && (mouse_down_x <= coords.x + box.w / 2))
-    && ( (mouse_down_y >= coords.y - box.h / 2) && (mouse_down_y <= coords.y + box.h / 2));
-}
+  return (
+    mouse_down_x >= coords.x - box.w / 2 &&
+    mouse_down_x <= coords.x + box.w / 2 &&
+    mouse_down_y >= coords.y - box.h / 2 &&
+    mouse_down_y <= coords.y + box.h / 2
+  );
+};
 
 //Enables info-box appUtilities.RelocationHandler
-appUtilities.enableInfoBoxRelocation = function(node){
+appUtilities.enableInfoBoxRelocation = function (node) {
   var cy = this.getActiveCy();
   //Disable box movements
   var oldColor = node.data("border-color");
@@ -2803,13 +3264,15 @@ appUtilities.enableInfoBoxRelocation = function(node){
   node.data("border-width", Math.max(1, oldWidth));
   var selectedBox;
   var anchorSide;
-  $(document).on('mousedown', appUtilities.RelocationHandler = function(event){
+  $(document).on(
+    "mousedown",
+    (appUtilities.RelocationHandler = function (event) {
       //Check whether event contained by infobox of a node
       //Lock the node so that it won't change position when
       //Info boxes are dragged
       cy.autounselectify(true);
       cy.autolock(true);
-      var statesandinfos = node.data('statesandinfos');
+      var statesandinfos = node.data("statesandinfos");
 
       //Check if event is on cy canvas
       var containerPos = $(cy.container()).position();
@@ -2817,12 +3280,25 @@ appUtilities.enableInfoBoxRelocation = function(node){
       var containerHeight = $(cy.container()).height();
 
       //Get mouse positions
-      var mouse_down_x = (event.pageX - containerPos.left - cy.pan().x)/cy.zoom();
-      var mouse_down_y = (event.pageY - containerPos.top - cy.pan().y)/cy.zoom();
+      var mouse_down_x =
+        (event.pageX - containerPos.left - cy.pan().x) / cy.zoom();
+      var mouse_down_y =
+        (event.pageY - containerPos.top - cy.pan().y) / cy.zoom();
       var instance = appUtilities.getActiveSbgnvizInstance();
       var oldAnchorSide; //Hold old anchor side to modify units
-      for (var i = 0; i < statesandinfos.length && selectedBox === undefined; i++) {
-        if(appUtilities.checkMouseContainsInfoBox(cy, statesandinfos[i], mouse_down_x, mouse_down_y)) {
+      for (
+        var i = 0;
+        i < statesandinfos.length && selectedBox === undefined;
+        i++
+      ) {
+        if (
+          appUtilities.checkMouseContainsInfoBox(
+            cy,
+            statesandinfos[i],
+            mouse_down_x,
+            mouse_down_y
+          )
+        ) {
           selectedBox = statesandinfos[i];
           oldAnchorSide = selectedBox.anchorSide;
           break;
@@ -2830,7 +3306,8 @@ appUtilities.enableInfoBoxRelocation = function(node){
       }
 
       //If no info-box found abort
-      if (selectedBox === undefined || event.which !== 1) { //If event is not a right left click disable relocation
+      if (selectedBox === undefined || event.which !== 1) {
+        //If event is not a right left click disable relocation
         appUtilities.disableInfoBoxRelocation();
         node.data("border-color", oldColor);
         node.data("border-width", oldWidth);
@@ -2846,174 +3323,262 @@ appUtilities.enableInfoBoxRelocation = function(node){
       var parentWidth = node.width();
       var parentHeight = node.height();
       var padding = node.padding();
-      var parentX1 = position.x - parentWidth/2 - padding;
-      var parentX2 = position.x + parentWidth/2 + padding;
-      var parentY1 = position.y - parentHeight/2 - padding;
-      var parentY2 = position.y + parentHeight/2 + padding;
-      cy.on("mousemove", appUtilities.relocationDragHandler = function(event){
-        if (selectedBox === undefined) { //If selected box is undefined somehow abort
-          appUtilities.disableInfoBoxRelocation();
-          node.data("border-color", oldColor);
-          node.data("border-width", oldWidth);
-          relocatedNode = undefined;
-          return;
-        }
-        //Clear visual cues during relocation
-        cy.expandCollapse('get').clearVisualCue(node);
-        var drag_x = event.position.x;
-        var drag_y = event.position.y;
-        var anchorSide = selectedBox.anchorSide;
-       
-
-        //If anchor side is top or bottom only move in x direction
-        if (anchorSide === "top" || anchorSide === "bottom") {
-         
-         
-          //Get absolute position
-          var newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, drag_x, selectedBox.bbox.y, cy);        
-          if (newRelativeCoords.x < 0) {           
-            selectedBox.bbox.x = 0;
-          }
-          else if (newRelativeCoords.x > 100) { //Box cannot go futher than parentBox - margin on right side            
-            selectedBox.bbox.x = 100;
-          }
-          else { //Else it is already relative
-            selectedBox.bbox.x = newRelativeCoords.x;
+      var parentX1 = position.x - parentWidth / 2 - padding;
+      var parentX2 = position.x + parentWidth / 2 + padding;
+      var parentY1 = position.y - parentHeight / 2 - padding;
+      var parentY2 = position.y + parentHeight / 2 + padding;
+      cy.on(
+        "mousemove",
+        (appUtilities.relocationDragHandler = function (event) {
+          if (selectedBox === undefined) {
+            //If selected box is undefined somehow abort
+            appUtilities.disableInfoBoxRelocation();
+            node.data("border-color", oldColor);
+            node.data("border-width", oldWidth);
+            relocatedNode = undefined;
+            return;
           }
-          //If box is at margin points allow it to change anchor side
-          //If it on left it can pass left anchor side
-          var absoluteCoords = instance.classes.AuxiliaryUnit.convertToAbsoluteCoord(selectedBox, selectedBox.bbox.x, selectedBox.bbox.y, cy); //Get current absolute coords
-          if (Number(absoluteCoords.x.toFixed(2))=== Number(parentX1.toFixed(2))) { //If it is on the left margin allow it to change anchor sides
-            //If it is in the top and mouse moves bottom it can go left anchor
-            if (last_mouse_y < drag_y  && anchorSide === "top") {
-              selectedBox.anchorSide = "left"; //Set new anchor side
-              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX1),
-                (parentY1), cy);
+          //Clear visual cues during relocation
+          cy.expandCollapse("get").clearVisualCue(node);
+          var drag_x = event.position.x;
+          var drag_y = event.position.y;
+          var anchorSide = selectedBox.anchorSide;
+
+          //If anchor side is top or bottom only move in x direction
+          if (anchorSide === "top" || anchorSide === "bottom") {
+            //Get absolute position
+            var newRelativeCoords =
+              instance.classes.AuxiliaryUnit.convertToRelativeCoord(
+                selectedBox,
+                drag_x,
+                selectedBox.bbox.y,
+                cy
+              );
+            if (newRelativeCoords.x < 0) {
+              selectedBox.bbox.x = 0;
+            } else if (newRelativeCoords.x > 100) {
+              //Box cannot go futher than parentBox - margin on right side
+              selectedBox.bbox.x = 100;
+            } else {
+              //Else it is already relative
               selectedBox.bbox.x = newRelativeCoords.x;
-              selectedBox.bbox.y = newRelativeCoords.y;
             }
-            else if (last_mouse_y > drag_y && anchorSide === "bottom") { //If it is in the bottom and mouse moves up it can go left anchor side
-              selectedBox.anchorSide = "left"; //Set new anchor side
-              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX1),
-                (parentY2), cy);
-              selectedBox.bbox.x = newRelativeCoords.x;
-              selectedBox.bbox.y = newRelativeCoords.y;
+            //If box is at margin points allow it to change anchor side
+            //If it on left it can pass left anchor side
+            var absoluteCoords =
+              instance.classes.AuxiliaryUnit.convertToAbsoluteCoord(
+                selectedBox,
+                selectedBox.bbox.x,
+                selectedBox.bbox.y,
+                cy
+              ); //Get current absolute coords
+            if (
+              Number(absoluteCoords.x.toFixed(2)) ===
+              Number(parentX1.toFixed(2))
+            ) {
+              //If it is on the left margin allow it to change anchor sides
+              //If it is in the top and mouse moves bottom it can go left anchor
+              if (last_mouse_y < drag_y && anchorSide === "top") {
+                selectedBox.anchorSide = "left"; //Set new anchor side
+                newRelativeCoords =
+                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
+                    selectedBox,
+                    parentX1,
+                    parentY1,
+                    cy
+                  );
+                selectedBox.bbox.x = newRelativeCoords.x;
+                selectedBox.bbox.y = newRelativeCoords.y;
+              } else if (last_mouse_y > drag_y && anchorSide === "bottom") {
+                //If it is in the bottom and mouse moves up it can go left anchor side
+                selectedBox.anchorSide = "left"; //Set new anchor side
+                newRelativeCoords =
+                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
+                    selectedBox,
+                    parentX1,
+                    parentY2,
+                    cy
+                  );
+                selectedBox.bbox.x = newRelativeCoords.x;
+                selectedBox.bbox.y = newRelativeCoords.y;
+              }
             }
-          }
-          //If it on right it can pass right anchor side
-          else if (Number(absoluteCoords.x.toFixed(2))  === Number(parentX2.toFixed(2))) {
-            if (last_mouse_y < drag_y && anchorSide === "top") {
-              selectedBox.anchorSide = "right"; //Set new anchor side
-              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX2),
-              (parentY1), cy);
-              selectedBox.bbox.x = newRelativeCoords.x;
-              selectedBox.bbox.y = newRelativeCoords.y;
+            //If it on right it can pass right anchor side
+            else if (
+              Number(absoluteCoords.x.toFixed(2)) ===
+              Number(parentX2.toFixed(2))
+            ) {
+              if (last_mouse_y < drag_y && anchorSide === "top") {
+                selectedBox.anchorSide = "right"; //Set new anchor side
+                newRelativeCoords =
+                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
+                    selectedBox,
+                    parentX2,
+                    parentY1,
+                    cy
+                  );
+                selectedBox.bbox.x = newRelativeCoords.x;
+                selectedBox.bbox.y = newRelativeCoords.y;
+              } else if (last_mouse_y > drag_y && anchorSide === "bottom") {
+                //If it is in the bottom and mouse moves up it can go left anchor side
+                selectedBox.anchorSide = "right"; //Set new anchor side
+                newRelativeCoords =
+                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
+                    selectedBox,
+                    parentX2,
+                    parentY2,
+                    cy
+                  );
+                selectedBox.bbox.x = newRelativeCoords.x;
+                selectedBox.bbox.y = newRelativeCoords.y;
+              }
             }
-            else if (last_mouse_y > drag_y && anchorSide === "bottom") { //If it is in the bottom and mouse moves up it can go left anchor side
-              selectedBox.anchorSide = "right"; //Set new anchor side
-              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX2),
-                (parentY2), cy);
-              selectedBox.bbox.x = newRelativeCoords.x;
+          } else {
+            //If anchor side left or right only move in y direction
+
+            //Get absolute position
+            var newRelativeCoords =
+              instance.classes.AuxiliaryUnit.convertToRelativeCoord(
+                selectedBox,
+                selectedBox.bbox.x,
+                drag_y,
+                cy
+              );
+
+            if (newRelativeCoords.y < 0) {
+              //Box cannot go futher than parentBox + margin on left side
+
+              selectedBox.bbox.y = 0;
+            } else if (newRelativeCoords.y > 100) {
+              //Box cannot go futher than parentBox - margin on right side
+
+              selectedBox.bbox.y = 100;
+            } else {
+              //Else it is already relative
               selectedBox.bbox.y = newRelativeCoords.y;
             }
-          }
-        }
-        else {
-           //If anchor side left or right only move in y direction
-        
-
-          //Get absolute position
-          var newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, selectedBox.bbox.x, drag_y, cy);
-          
-          if (newRelativeCoords.y< 0) { //Box cannot go futher than parentBox + margin on left side
-           
-            selectedBox.bbox.y = 0;
-          }
-          else if (newRelativeCoords.y > 100) { //Box cannot go futher than parentBox - margin on right side
-            
-            selectedBox.bbox.y = 100;
-          }
-          else { //Else it is already relative
-            selectedBox.bbox.y = newRelativeCoords.y;
-          }
 
-          var absoluteCoords = instance.classes.AuxiliaryUnit.convertToAbsoluteCoord(selectedBox, selectedBox.bbox.x, selectedBox.bbox.y, cy);
-          //Set anchor side changes
-          if (Number(absoluteCoords.y.toFixed(2))  === Number(parentY1.toFixed(2))) { //If it is on the top margin allow it to change anchor sides
-            //If it is in the top and mouse moves bottom it can go left anchor
-            if (last_mouse_x < drag_x  && anchorSide === "left") {
-              selectedBox.anchorSide = "top"; //Set new anchor side
-              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX1), (parentY1), cy);
-              selectedBox.bbox.x = newRelativeCoords.x;
-              selectedBox.bbox.y = newRelativeCoords.y;
-            }
-            else if (last_mouse_x > drag_x && anchorSide === "right") { //If it is in the right and mouse moves up it can go top anchor side
-              selectedBox.anchorSide = "top"; //Set new anchor side
-              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX2), (parentY1), cy);
-              selectedBox.bbox.x = newRelativeCoords.x;
-              selectedBox.bbox.y = newRelativeCoords.y;
-            }
-          }
-          //If it on right it can pass right anchor side
-          else if (Number(absoluteCoords.y.toFixed(2)) === Number(parentY2.toFixed(2))) {
-            if (last_mouse_x < drag_x && anchorSide === "left") {
-              selectedBox.anchorSide = "bottom"; //Set new anchor side
-              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX1), (parentY2), cy);
-              selectedBox.bbox.x = newRelativeCoords.x;
-              selectedBox.bbox.y = newRelativeCoords.y;
+            var absoluteCoords =
+              instance.classes.AuxiliaryUnit.convertToAbsoluteCoord(
+                selectedBox,
+                selectedBox.bbox.x,
+                selectedBox.bbox.y,
+                cy
+              );
+            //Set anchor side changes
+            if (
+              Number(absoluteCoords.y.toFixed(2)) ===
+              Number(parentY1.toFixed(2))
+            ) {
+              //If it is on the top margin allow it to change anchor sides
+              //If it is in the top and mouse moves bottom it can go left anchor
+              if (last_mouse_x < drag_x && anchorSide === "left") {
+                selectedBox.anchorSide = "top"; //Set new anchor side
+                newRelativeCoords =
+                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
+                    selectedBox,
+                    parentX1,
+                    parentY1,
+                    cy
+                  );
+                selectedBox.bbox.x = newRelativeCoords.x;
+                selectedBox.bbox.y = newRelativeCoords.y;
+              } else if (last_mouse_x > drag_x && anchorSide === "right") {
+                //If it is in the right and mouse moves up it can go top anchor side
+                selectedBox.anchorSide = "top"; //Set new anchor side
+                newRelativeCoords =
+                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
+                    selectedBox,
+                    parentX2,
+                    parentY1,
+                    cy
+                  );
+                selectedBox.bbox.x = newRelativeCoords.x;
+                selectedBox.bbox.y = newRelativeCoords.y;
+              }
             }
-            else if (last_mouse_x > drag_x && anchorSide === "right") { //If it is in the bottom and mouse moves up it can go left anchor side
-              selectedBox.anchorSide = "bottom"; //Set new anchor side
-              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX2), (parentY2), cy);
-              selectedBox.bbox.x = newRelativeCoords.x;
-              selectedBox.bbox.y = newRelativeCoords.y;
+            //If it on right it can pass right anchor side
+            else if (
+              Number(absoluteCoords.y.toFixed(2)) ===
+              Number(parentY2.toFixed(2))
+            ) {
+              if (last_mouse_x < drag_x && anchorSide === "left") {
+                selectedBox.anchorSide = "bottom"; //Set new anchor side
+                newRelativeCoords =
+                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
+                    selectedBox,
+                    parentX1,
+                    parentY2,
+                    cy
+                  );
+                selectedBox.bbox.x = newRelativeCoords.x;
+                selectedBox.bbox.y = newRelativeCoords.y;
+              } else if (last_mouse_x > drag_x && anchorSide === "right") {
+                //If it is in the bottom and mouse moves up it can go left anchor side
+                selectedBox.anchorSide = "bottom"; //Set new anchor side
+                newRelativeCoords =
+                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
+                    selectedBox,
+                    parentX2,
+                    parentY2,
+                    cy
+                  );
+                selectedBox.bbox.x = newRelativeCoords.x;
+                selectedBox.bbox.y = newRelativeCoords.y;
+              }
             }
           }
 
+          last_mouse_x = drag_x;
+          last_mouse_y = drag_y;
+
+          //TODO find a way to elimate this redundancy to update info-box positions
+          node.data("border-width", node.data("border-width"));
+        })
+      );
+
+      cy.on("mouseup", function (event) {
+        appUtilities.disableInfoBoxRelocationDrag();
+        if (selectedBox !== undefined && oldAnchorSide !== undefined) {
+          selectedBox.style.dashed = false;
+          instance.classes.AuxUnitLayout.modifyUnits(
+            node,
+            selectedBox,
+            oldAnchorSide,
+            cy
+          ); //Modify aux unit layouts
+          selectedBox = undefined;
+          anchorSide = undefined;
+          oldAnchorSide = undefined;
+          cy.autolock(false);
         }
+      });
+    })
+  );
+};
 
-        last_mouse_x = drag_x;
-        last_mouse_y = drag_y;
-
-        //TODO find a way to elimate this redundancy to update info-box positions
-        node.data('border-width', node.data('border-width'));
-
-    });
-
-    cy.on("mouseup", function(event){
-      appUtilities.disableInfoBoxRelocationDrag();
-      if (selectedBox !== undefined && oldAnchorSide !== undefined) {
-        selectedBox.style.dashed = false;
-        instance.classes.AuxUnitLayout.modifyUnits(node, selectedBox, oldAnchorSide, cy); //Modify aux unit layouts
-        selectedBox = undefined;
-        anchorSide = undefined;
-        oldAnchorSide = undefined;
-        cy.autolock(false);
-      }
-    });
-
-    });
-}
-
-appUtilities.getDefaultEmptyInfoboxObj = function( type ) {
+appUtilities.getDefaultEmptyInfoboxObj = function (type) {
   var cy = appUtilities.getActiveCy();
 
   // access current general properties for active instance
-  var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+  var currentGeneralProperties = appUtilities.getScratch(
+    cy,
+    "currentGeneralProperties"
+  );
 
   var obj = {};
   obj.clazz = type;
 
   switch (type) {
-    case 'unit of information':
+    case "unit of information":
       obj.label = {
-        text: ""
+        text: "",
       };
       break;
-    case 'state variable':
+    case "state variable":
       obj.state = {
         value: "",
-        variable: ""
+        variable: "",
       };
       break;
   }
@@ -3022,11 +3587,11 @@ appUtilities.getDefaultEmptyInfoboxObj = function( type ) {
 };
 
 //Disables info-box relocation
-appUtilities.disableInfoBoxRelocation = function(color){
+appUtilities.disableInfoBoxRelocation = function (color) {
   var cy = this.getActiveCy();
   if (appUtilities.RelocationHandler !== undefined) {
     //Remove listerners
-    $(document).off('mousedown', appUtilities.RelocationHandler);
+    $(document).off("mousedown", appUtilities.RelocationHandler);
     appUtilities.disableInfoBoxRelocationDrag();
     if (relocatedNode !== undefined) {
       relocatedNode.data("border-color", color);
@@ -3037,72 +3602,72 @@ appUtilities.disableInfoBoxRelocation = function(color){
   }
   cy.autolock(false); //Make the nodes moveable again
   cy.autounselectify(false); //Make the nodes selectable
-
 };
 
 //Disables info-box dragging
-appUtilities.disableInfoBoxRelocationDrag = function(){
+appUtilities.disableInfoBoxRelocationDrag = function () {
   if (appUtilities.relocationDragHandler !== undefined) {
     var cy = this.getActiveCy();
     //Remove listerners
-    cy.off('mousemove', appUtilities.relocationDragHandler);
+    cy.off("mousemove", appUtilities.relocationDragHandler);
     appUtilities.relocationDragHandler = undefined;
   }
 };
 
 appUtilities.modifyUnits = function (node, ele, anchorSide) {
-    var cy = this.getActiveCy();
-    var instance = appUtilities.getActiveSbgnvizInstance();
-    instance.classes.AuxUnitLayout.modifyUnits(node, ele, anchorSide, cy); //Modify aux unit layouts
+  var cy = this.getActiveCy();
+  var instance = appUtilities.getActiveSbgnvizInstance();
+  instance.classes.AuxUnitLayout.modifyUnits(node, ele, anchorSide, cy); //Modify aux unit layouts
 };
 
-appUtilities.resizeNodesToContent = function(nodes){
-
+appUtilities.resizeNodesToContent = function (nodes) {
   var chiseInstance = appUtilities.getActiveChiseInstance();
   var cy = appUtilities.getActiveCy();
   var collection;
-  if(nodes.length == 1){
-    collection = cy.collection();    
-    collection = collection.add(nodes[0]);   
-  }else{
+  if (nodes.length == 1) {
+    collection = cy.collection();
+    collection = collection.add(nodes[0]);
+  } else {
     collection = nodes;
-  }    
+  }
 
-  if(!chiseInstance.areCompoundSizesConsidered()){
-    collection = collection.difference(":parent,[class*='compartment'],[class*='submap']");
+  if (!chiseInstance.areCompoundSizesConsidered()) {
+    collection = collection.difference(
+      ":parent,[class*='compartment'],[class*='submap']"
+    );
   }
   chiseInstance.resizeNodesToContent(collection, false);
-  cy.nodeResize('get').refreshGrapples();
-  cy.expandCollapse('get').clearVisualCue();
+  cy.nodeResize("get").refreshGrapples();
+  cy.expandCollapse("get").clearVisualCue();
   // To redraw expand/collapse cue after resize to content
-  if(collection.length == 1 && (collection[0].isParent() || collection[0].data('collapsedChildren')) && collection[0].selected()) { 
-    cy.$(':selected').trigger('select'); 
-  };
-
+  if (
+    collection.length == 1 &&
+    (collection[0].isParent() || collection[0].data("collapsedChildren")) &&
+    collection[0].selected()
+  ) {
+    cy.$(":selected").trigger("select");
+  }
 };
 
-appUtilities.transformClassInfo = function( classInfo ) {
-  var res = classInfo.replace(' multimer', '');
-  if (res == 'and' || res == 'or' || res == 'not') {
+appUtilities.transformClassInfo = function (classInfo) {
+  var res = classInfo.replace(" multimer", "");
+  if (res == "and" || res == "or" || res == "not") {
     res = res.toUpperCase();
-  }
-  else {
+  } else {
     res = res.replace(/\w\S*/g, function (txt) {
       return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
     });
-    res = res.replace(' Of ', ' of ');
-    res = res.replace(' And ', ' and ');
-    res = res.replace(' Or ', ' or ');
-    res = res.replace(' Not ', ' not ');
+    res = res.replace(" Of ", " of ");
+    res = res.replace(" And ", " and ");
+    res = res.replace(" Or ", " or ");
+    res = res.replace(" Not ", " not ");
   }
 
-  if (res == "Ba Plain"){
+  if (res == "Ba Plain") {
     res = "BA";
-  }
-  else if (res.includes("Ba ")){
+  } else if (res.includes("Ba ")) {
     res = "BA " + res.substr(3);
-  }
-  else if (res.includes("Sif ")) {
+  } else if (res.includes("Sif ")) {
     res = "SIF " + res.substr(3);
   }
 
@@ -3115,14 +3680,12 @@ appUtilities.transformClassInfo = function( classInfo ) {
 //   var experimentNames = chiseInstance.getGroupedDataMap();
 //   //console.log(experimentNames.length());
 
-
-  
 //   return experimentNames;
 // };
 // appUtilities.setExperimentNames = function(files)
 // {
 //   console.log("experiment names in set experimentNames");
- 
+
 //  // currentExperimentProperties.experimentDescription = files;
 //   appUtilities.experimentTabPanel.render();
 // }
diff --git a/app/js/backbone-views.js b/app/js/backbone-views.js
index 2e3fc98a6..5f84fdcc3 100644
--- a/app/js/backbone-views.js
+++ b/app/js/backbone-views.js
@@ -1,12 +1,12 @@
-var jquery = $ = require('jquery');
-var _ = require('underscore');
-var Backbone = require('backbone');
-var chroma = require('chroma-js');
-var FileSaver = require('file-saver');
+var jquery = ($ = require("jquery"));
+var _ = require("underscore");
+var Backbone = require("backbone");
+var chroma = require("chroma-js");
+var FileSaver = require("file-saver");
 
-var appUtilities = require('./app-utilities');
+var appUtilities = require("./app-utilities");
 var setFileContent = appUtilities.setFileContent.bind(appUtilities);
-const colorPickerUtils = require('./color-picker-utils');
+const colorPickerUtils = require("./color-picker-utils");
 //var annotationsHandler = require('./annotations-handler');
 
 // since biogene service from PC is not available any more, we now give link to gene properties in My Cancer Genome organization
@@ -186,65 +186,62 @@ const colorPickerUtils = require('./color-picker-utils');
  * Backbone view for the Chemical information.
  */
 var ChemicalView = Backbone.View.extend({
-    render: function () {
-        // pass variables in using Underscore.js template
-        var variables = {
-            chemicalDescription: this.model.description[0],
-            chebiName: this.model.label,
-            chebiID: this.model.obo_id.substring(6, this.model.obo_id.length) //Gets only the nr from ChEBI:15422 format
-        };
+  render: function () {
+    // pass variables in using Underscore.js template
+    var variables = {
+      chemicalDescription: this.model.description[0],
+      chebiName: this.model.label,
+      chebiID: this.model.obo_id.substring(6, this.model.obo_id.length), //Gets only the nr from ChEBI:15422 format
+    };
 
-        // compile the template using underscore
-        var template = _.template($("#chemical-template").html());
-        template = template(variables);
+    // compile the template using underscore
+    var template = _.template($("#chemical-template").html());
+    template = template(variables);
 
-        // load the compiled HTML into the Backbone "el"
-        this.$el.html(template);
+    // load the compiled HTML into the Backbone "el"
+    this.$el.html(template);
 
-        // format after loading
-        this.format(this.model);
+    // format after loading
+    this.format(this.model);
 
-        return this;
-    },
-    format: function ()
-    {
-        // hide rows with undefined data
-        if (this.model.label == undefined)
-            this.$el.find(".chebi-name").hide();
-
-        if (this.model.description[0] == undefined)
-            this.$el.find(".chemical-description").hide();
-
-        if (this.model.obo_id == undefined)
-            this.$el.find(".chebi-id").hide();
-
-        var expanderOpts = {slicePoint: 150,
-            expandPrefix: ' ',
-            expandText: ' (...)',
-            userCollapseText: ' (show less)',
-            moreClass: 'expander-read-more',
-            lessClass: 'expander-read-less',
-            detailClass: 'expander-details',
-            // do not use default effects
-            // (see https://github.com/kswedberg/jquery-expander/issues/46)
-            expandEffect: 'fadeIn',
-            collapseEffect: 'fadeOut'};
-
-        $(".chemical-description .expandable").expander(expanderOpts);
-
-        expanderOpts.slicePoint = 2; // show comma and the space
-        expanderOpts.widow = 0; // hide everything else in any case
-    }
+    return this;
+  },
+  format: function () {
+    // hide rows with undefined data
+    if (this.model.label == undefined) this.$el.find(".chebi-name").hide();
+
+    if (this.model.description[0] == undefined)
+      this.$el.find(".chemical-description").hide();
+
+    if (this.model.obo_id == undefined) this.$el.find(".chebi-id").hide();
+
+    var expanderOpts = {
+      slicePoint: 150,
+      expandPrefix: " ",
+      expandText: " (...)",
+      userCollapseText: " (show less)",
+      moreClass: "expander-read-more",
+      lessClass: "expander-read-less",
+      detailClass: "expander-details",
+      // do not use default effects
+      // (see https://github.com/kswedberg/jquery-expander/issues/46)
+      expandEffect: "fadeIn",
+      collapseEffect: "fadeOut",
+    };
+
+    $(".chemical-description .expandable").expander(expanderOpts);
+
+    expanderOpts.slicePoint = 2; // show comma and the space
+    expanderOpts.widow = 0; // hide everything else in any case
+  },
 });
 
 /**
  * SBGN Layout view for the Sample Application.
  */
 var LayoutPropertiesView = Backbone.View.extend({
-  initialize: function () {
-  },
+  initialize: function () {},
   copyProperties: function () {
-
     // use active cy instance
     var cy = appUtilities.getActiveCy();
 
@@ -252,7 +249,7 @@ var LayoutPropertiesView = Backbone.View.extend({
     var clonedProp = _.clone(appUtilities.defaultLayoutProperties);
 
     // reset current layout props
-    appUtilities.setScratch(cy, 'currentLayoutProperties', clonedProp);
+    appUtilities.setScratch(cy, "currentLayoutProperties", clonedProp);
 
     // return cloned props to make them accessible
     return clonedProp;
@@ -264,7 +261,10 @@ var LayoutPropertiesView = Backbone.View.extend({
     // get associated cy instance
     var cy = chiseInstance.getCy();
 
-    var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
+    var currentLayoutProperties = appUtilities.getScratch(
+      cy,
+      "currentLayoutProperties"
+    );
 
     // if preferences param is not set use an empty map not to override any layout option
     if (preferences === undefined) {
@@ -276,7 +276,6 @@ var LayoutPropertiesView = Backbone.View.extend({
     return options;
   },
   applyLayout: function (preferences, notUndoable, _chiseInstance) {
-
     // if chise instance param is not set use the recently active chise instance
     var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
     var options = this.getLayoutOptions(preferences, _chiseInstance);
@@ -289,61 +288,102 @@ var LayoutPropertiesView = Backbone.View.extend({
     var cy = appUtilities.getActiveCy();
 
     // get current layout props for cy
-    var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
+    var currentLayoutProperties = appUtilities.getScratch(
+      cy,
+      "currentLayoutProperties"
+    );
 
     self.template = _.template($("#layout-settings-template").html());
     self.template = self.template(currentLayoutProperties);
     $(self.el).html(self.template);
 
-    $(self.el).modal('show');
-
-    $(document).off("click", "#save-layout").on("click", "#save-layout", function (evt) {
-
-      // use active cy instance
-      var cy = appUtilities.getActiveCy();
-
-      // get current layout props for cy
-      var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
-
-      currentLayoutProperties.nodeRepulsion = Number(document.getElementById("node-repulsion").value);
-      currentLayoutProperties.idealEdgeLength = Number(document.getElementById("ideal-edge-length").value);
-      currentLayoutProperties.edgeElasticity = Number(document.getElementById("edge-elasticity").value);
-      currentLayoutProperties.nestingFactor = Number(document.getElementById("nesting-factor").value);
-      currentLayoutProperties.gravity = Number(document.getElementById("gravity").value);
-      currentLayoutProperties.numIter = Number(document.getElementById("num-iter").value);
-      currentLayoutProperties.tile = document.getElementById("tile").checked;
-      currentLayoutProperties.packComponents = document.getElementById("pack-components").checked ? true : false;
-      currentLayoutProperties.randomize = !document.getElementById("incremental").checked;
-      currentLayoutProperties.gravityRangeCompound = Number(document.getElementById("gravity-range-compound").value);
-      currentLayoutProperties.gravityCompound = Number(document.getElementById("gravity-compound").value);
-      currentLayoutProperties.gravityRange = Number(document.getElementById("gravity-range").value);
-      currentLayoutProperties.tilingPaddingVertical = Number(document.getElementById("tiling-padding-vertical").value);
-      currentLayoutProperties.tilingPaddingHorizontal = Number(document.getElementById("tiling-padding-horizontal").value);    
-      currentLayoutProperties.initialEnergyOnIncremental = Number(document.getElementById("incremental-cooling-factor").value);
-      currentLayoutProperties.improveFlow = document.getElementById("improve-flow").checked;      
-      // reset currentLayoutProperties in scratch pad
-      appUtilities.setScratch(cy, currentLayoutProperties, 'currentLayoutProperties');
-
-      $(self.el).modal('toggle');
-      $(document).trigger('saveLayout', cy);
-    });
+    $(self.el).modal("show");
+
+    $(document)
+      .off("click", "#save-layout")
+      .on("click", "#save-layout", function (evt) {
+        // use active cy instance
+        var cy = appUtilities.getActiveCy();
+
+        // get current layout props for cy
+        var currentLayoutProperties = appUtilities.getScratch(
+          cy,
+          "currentLayoutProperties"
+        );
+
+        currentLayoutProperties.nodeRepulsion = Number(
+          document.getElementById("node-repulsion").value
+        );
+        currentLayoutProperties.idealEdgeLength = Number(
+          document.getElementById("ideal-edge-length").value
+        );
+        currentLayoutProperties.edgeElasticity = Number(
+          document.getElementById("edge-elasticity").value
+        );
+        currentLayoutProperties.nestingFactor = Number(
+          document.getElementById("nesting-factor").value
+        );
+        currentLayoutProperties.gravity = Number(
+          document.getElementById("gravity").value
+        );
+        currentLayoutProperties.numIter = Number(
+          document.getElementById("num-iter").value
+        );
+        currentLayoutProperties.tile = document.getElementById("tile").checked;
+        currentLayoutProperties.packComponents = document.getElementById(
+          "pack-components"
+        ).checked
+          ? true
+          : false;
+        currentLayoutProperties.randomize =
+          !document.getElementById("incremental").checked;
+        currentLayoutProperties.gravityRangeCompound = Number(
+          document.getElementById("gravity-range-compound").value
+        );
+        currentLayoutProperties.gravityCompound = Number(
+          document.getElementById("gravity-compound").value
+        );
+        currentLayoutProperties.gravityRange = Number(
+          document.getElementById("gravity-range").value
+        );
+        currentLayoutProperties.tilingPaddingVertical = Number(
+          document.getElementById("tiling-padding-vertical").value
+        );
+        currentLayoutProperties.tilingPaddingHorizontal = Number(
+          document.getElementById("tiling-padding-horizontal").value
+        );
+        currentLayoutProperties.initialEnergyOnIncremental = Number(
+          document.getElementById("incremental-cooling-factor").value
+        );
+        currentLayoutProperties.improveFlow =
+          document.getElementById("improve-flow").checked;
+        // reset currentLayoutProperties in scratch pad
+        appUtilities.setScratch(
+          cy,
+          currentLayoutProperties,
+          "currentLayoutProperties"
+        );
+
+        $(self.el).modal("toggle");
+        $(document).trigger("saveLayout", cy);
+      });
 
-    $(document).off("click", "#default-layout").on("click", "#default-layout", function (evt) {
-      // reset current layout props for active cy instance and get new props
-      var currentLayoutProperties = self.copyProperties();
+    $(document)
+      .off("click", "#default-layout")
+      .on("click", "#default-layout", function (evt) {
+        // reset current layout props for active cy instance and get new props
+        var currentLayoutProperties = self.copyProperties();
 
-      self.template = _.template($("#layout-settings-template").html());
-      self.template = self.template(currentLayoutProperties);
-      $(self.el).html(self.template);
-    });
+        self.template = _.template($("#layout-settings-template").html());
+        self.template = self.template(currentLayoutProperties);
+        $(self.el).html(self.template);
+      });
 
     return this;
-  }
+  },
 });
 
-
 var ColorSchemeInspectorView = Backbone.View.extend({
-
   initialize: function () {
     var self = this;
 
@@ -352,20 +392,21 @@ var ColorSchemeInspectorView = Backbone.View.extend({
     var schemes_3D = Object.assign({}, schemes);
     var invertedScheme = {}; // key: scheme_id, value: scheme that is inverse of another scheme
 
-    for(var id in schemes) {
+    for (var id in schemes) {
       var previewColors = schemes[id].preview;
 
-      if(invertedScheme[id]) { // this scheme is the complement of a previous one
+      if (invertedScheme[id]) {
+        // this scheme is the complement of a previous one
         schemes[id].isDisplayed = false;
-      }
-      else if (schemes[id].invert) { // this scheme has a complement
+      } else if (schemes[id].invert) {
+        // this scheme has a complement
         invertedScheme[schemes[id].invert] = id;
         schemes[id].isDisplayed = true;
-      }
-      else if(schemes[id].name == 'Pure White'){ // pure white is not an option for color scheme selection
+      } else if (schemes[id].name == "Pure White") {
+        // pure white is not an option for color scheme selection
         continue;
-      }
-      else { // scheme has no complement, display it normally
+      } else {
+        // scheme has no complement, display it normally
         schemes[id].isDisplayed = true;
       }
 
@@ -373,24 +414,38 @@ var ColorSchemeInspectorView = Backbone.View.extend({
       schemes_3D[id] = Object.assign({}, schemes[id]);
 
       var colorCount = previewColors.length;
-      var htmlS  = "";
-      var htmlG  = "";
+      var htmlS = "";
+      var htmlG = "";
       var html3D = "";
 
-      for(var i=0; i < colorCount; i++) {
+      for (var i = 0; i < colorCount; i++) {
         var color = chroma(previewColors[i]);
         // apply default alpha of elements backgrounds, to make it look more like reality
         color = color.alpha(0.5);
-        var prct = 100/colorCount;
-        htmlS += "<div style='float:left; width:"+prct+"%; height:100%; background-color:"+color.css()+"'></div>";
-        htmlG += "<img style='float:left; width:"+prct+"%; height:100%;' src='" + appUtilities.colorCodeToGradientImage[previewColors[i]] + "'>";
-        html3D += "<img style='float:left; width:"+prct+"%; height:100%;' src='" + appUtilities.colorCodeTo3DImage[previewColors[i]] + "'>";
+        var prct = 100 / colorCount;
+        htmlS +=
+          "<div style='float:left; width:" +
+          prct +
+          "%; height:100%; background-color:" +
+          color.css() +
+          "'></div>";
+        htmlG +=
+          "<img style='float:left; width:" +
+          prct +
+          "%; height:100%;' src='" +
+          appUtilities.colorCodeToGradientImage[previewColors[i]] +
+          "'>";
+        html3D +=
+          "<img style='float:left; width:" +
+          prct +
+          "%; height:100%;' src='" +
+          appUtilities.colorCodeTo3DImage[previewColors[i]] +
+          "'>";
       }
 
       schemes[id].previewHtml = htmlS;
       schemes_gradient[id].previewHtml = htmlG;
       schemes_3D[id].previewHtml = html3D;
-
     }
 
     this.schemes = schemes;
@@ -400,25 +455,42 @@ var ColorSchemeInspectorView = Backbone.View.extend({
     // attach events
     $(document).on("click", "div.color-scheme-choice", function (evt) {
       var cy = appUtilities.getActiveCy();
-      var scheme_type = appUtilities.getScratch(cy,'currentGeneralProperties').mapColorSchemeStyle;
-      var raw_id = $(this).attr('id');
+      var scheme_type = appUtilities.getScratch(
+        cy,
+        "currentGeneralProperties"
+      ).mapColorSchemeStyle;
+      var raw_id = $(this).attr("id");
       var scheme_id = raw_id.replace("map-color-scheme_", "");
       appUtilities.applyMapColorScheme(scheme_id, scheme_type, self);
     });
 
-    $(document).on("change", "#color-scheme-inspector-style-select", function (event) {
-      var cy = appUtilities.getActiveCy();
-      var current_scheme_id = appUtilities.getScratch(cy,'currentGeneralProperties').mapColorScheme;
-      //change the currently displayed html element
-      var selected_style = $('#color-scheme-inspector-style-select').val();
-      //change to the color scheme choice to match current style
-      appUtilities.applyMapColorScheme(current_scheme_id,selected_style,self);
-    });
+    $(document).on(
+      "change",
+      "#color-scheme-inspector-style-select",
+      function (event) {
+        var cy = appUtilities.getActiveCy();
+        var current_scheme_id = appUtilities.getScratch(
+          cy,
+          "currentGeneralProperties"
+        ).mapColorScheme;
+        //change the currently displayed html element
+        var selected_style = $("#color-scheme-inspector-style-select").val();
+        //change to the color scheme choice to match current style
+        appUtilities.applyMapColorScheme(
+          current_scheme_id,
+          selected_style,
+          self
+        );
+      }
+    );
 
     $(document).on("click", "div.color-scheme-invert-button", function (evt) {
-      var raw_id = $(this).attr('id');
+      var raw_id = $(this).attr("id");
       var cy = appUtilities.getActiveCy();
-      var scheme_type = appUtilities.getScratch(cy,'currentGeneralProperties').mapColorSchemeStyle;
+      var scheme_type = appUtilities.getScratch(
+        cy,
+        "currentGeneralProperties"
+      ).mapColorSchemeStyle;
       var scheme_id = raw_id.replace("map-color-scheme_invert_", "");
       var inverted_id = schemes[scheme_id].invert;
       appUtilities.applyMapColorScheme(inverted_id, scheme_type, self);
@@ -426,54 +498,65 @@ var ColorSchemeInspectorView = Backbone.View.extend({
 
     $(document).on("click", "#map-color-scheme-default-button", function (evt) {
       var cy = appUtilities.getActiveCy();
-      var defaultColorScheme = appUtilities.defaultGeneralProperties.mapColorScheme;
-      var defaultColorSchemeStyle = appUtilities.defaultGeneralProperties.mapColorSchemeStyle;
-      appUtilities.applyMapColorScheme(defaultColorScheme, defaultColorSchemeStyle, self); // default color scheme
+      var defaultColorScheme =
+        appUtilities.defaultGeneralProperties.mapColorScheme;
+      var defaultColorSchemeStyle =
+        appUtilities.defaultGeneralProperties.mapColorSchemeStyle;
+      appUtilities.applyMapColorScheme(
+        defaultColorScheme,
+        defaultColorSchemeStyle,
+        self
+      ); // default color scheme
     });
-  
   },
-  changeStyle: function(style) {
-    if(style == 'solid'){
-      $('#solid-color-scheme-display').show();
-      $('#gradient-color-scheme-display').hide();
-      $('#3D-color-scheme-display').hide();
+  changeStyle: function (style) {
+    if (style == "solid") {
+      $("#solid-color-scheme-display").show();
+      $("#gradient-color-scheme-display").hide();
+      $("#3D-color-scheme-display").hide();
       $("#color-scheme-inspector-style-select").val("solid");
-    }
-    else if(style == 'gradient'){
-      $('#solid-color-scheme-display').hide();
-      $('#gradient-color-scheme-display').show();
-      $('#3D-color-scheme-display').hide();
+    } else if (style == "gradient") {
+      $("#solid-color-scheme-display").hide();
+      $("#gradient-color-scheme-display").show();
+      $("#3D-color-scheme-display").hide();
       $("#color-scheme-inspector-style-select").val("gradient");
-    }
-    else if(style == '3D'){
-      $('#solid-color-scheme-display').hide();
-      $('#gradient-color-scheme-display').hide();
-      $('#3D-color-scheme-display').show();
+    } else if (style == "3D") {
+      $("#solid-color-scheme-display").hide();
+      $("#gradient-color-scheme-display").hide();
+      $("#3D-color-scheme-display").show();
       $("#color-scheme-inspector-style-select").val("3D");
     }
   },
   render: function () {
-  
-    
     this.template = _.template($("#color-scheme-inspector-template").html());
     var cy = appUtilities.getActiveCy();
     // scheme_type and current_scheme are used to highlight the current color scheme with the javascript embedded to color-scheme-inspector-template div(line: 2337 in index.html)
     var scheme_type = $("#color-scheme-inspector-style-select").val();
-    var current_scheme = appUtilities.getScratch(cy,'currentGeneralProperties').mapColorScheme;
-   
+    var current_scheme = appUtilities.getScratch(
+      cy,
+      "currentGeneralProperties"
+    ).mapColorScheme;
+
     this.$el.empty();
-    this.$el.html(this.template({schemes: this.schemes, schemes_gradient: this.schemes_gradient, schemes_3D: this.schemes_3D, scheme_type: scheme_type, current_scheme: current_scheme}));
-    
+    this.$el.html(
+      this.template({
+        schemes: this.schemes,
+        schemes_gradient: this.schemes_gradient,
+        schemes_3D: this.schemes_3D,
+        scheme_type: scheme_type,
+        current_scheme: current_scheme,
+      })
+    );
+
     return this;
-  }
+  },
 });
 
 // provide common functions for different views tied to
 // inspector map panels
 var GeneralPropertiesParentView = Backbone.View.extend({
   // Apply the properties as they are set
-  applyUpdate: function() {
-
+  applyUpdate: function () {
     // use active chise instance
     var chiseInstance = appUtilities.getActiveChiseInstance();
 
@@ -481,7 +564,10 @@ var GeneralPropertiesParentView = Backbone.View.extend({
     var cy = appUtilities.getActiveCy();
 
     // get currentGeneralProperties for cy
-    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+    var currentGeneralProperties = appUtilities.getScratch(
+      cy,
+      "currentGeneralProperties"
+    );
 
     // get topologyGrouping instance for cy
     var topologyGrouping = chiseInstance.sifTopologyGrouping;
@@ -491,75 +577,106 @@ var GeneralPropertiesParentView = Backbone.View.extend({
 
     if (currentGeneralProperties.enablePorts) {
       chiseInstance.enablePorts();
-    }
-    else {
+    } else {
       chiseInstance.disablePorts();
     }
 
     if (currentGeneralProperties.allowCompoundNodeResize) {
       chiseInstance.considerCompoundSizes();
-    }
-    else {
+    } else {
       chiseInstance.omitCompoundSizes();
     }
 
     // Refresh resize grapples
-    cy.nodeResize('get').refreshGrapples();
+    cy.nodeResize("get").refreshGrapples();
 
     cy.style().update();
 
-    $(document).trigger('saveGeneralProperties', cy);
+    $(document).trigger("saveGeneralProperties", cy);
   },
   setPropertiesToDefault: function () {
     var cy = appUtilities.getActiveCy();
     var clonedProps = _.clone(appUtilities.defaultGeneralProperties);
-    appUtilities.setScratch(cy, 'currentGeneralProperties', clonedProps);
-  }
+    appUtilities.setScratch(cy, "currentGeneralProperties", clonedProps);
+  },
 });
 
 // inherit from GeneralPropertiesParentView
 var MapTabGeneralPanel = GeneralPropertiesParentView.extend({
-  initialize: function() {
+  initialize: function () {
     var self = this;
     // initialize undo-redo parameters
     self.params = {};
-    self.params.compoundPadding = {id: "compound-padding", type: "text",
-      property: "currentGeneralProperties.compoundPadding", update: self.applyUpdate};
+    self.params.compoundPadding = {
+      id: "compound-padding",
+      type: "text",
+      property: "currentGeneralProperties.compoundPadding",
+      update: self.applyUpdate,
+    };
+
+    self.params.arrowScale = {
+      id: "arrow-scale",
+      type: "range",
+      property: "currentGeneralProperties.arrowScale",
+    };
 
-    self.params.arrowScale = {id: "arrow-scale", type: "range",
-      property: "currentGeneralProperties.arrowScale"};
+    self.params.allowCompoundNodeResize = {
+      id: "allow-compound-node-resize",
+      type: "checkbox",
+      property: "currentGeneralProperties.allowCompoundNodeResize",
+      update: self.applyUpdate,
+    };
 
-    self.params.allowCompoundNodeResize = {id: "allow-compound-node-resize", type: "checkbox",
-      property: "currentGeneralProperties.allowCompoundNodeResize", update: self.applyUpdate};
+    self.params.inferNestingOnLoad = {
+      id: "infer-nesting-on-load",
+      type: "checkbox",
+      property: "currentGeneralProperties.inferNestingOnLoad",
+    };
 
-    self.params.inferNestingOnLoad = {id: "infer-nesting-on-load", type: "checkbox",
-      property: "currentGeneralProperties.inferNestingOnLoad"};
+    self.params.enablePorts = {
+      id: "enable-ports",
+      type: "checkbox",
+      property: "currentGeneralProperties.enablePorts",
+      update: self.applyUpdate,
+    };
 
-    self.params.enablePorts = {id: "enable-ports", type: "checkbox",
-      property: "currentGeneralProperties.enablePorts", update: self.applyUpdate};
+    self.params.enableSIFTopologyGrouping = {
+      id: "enable-sif-topology-grouping",
+      type: "checkbox",
+      property: "currentGeneralProperties.enableSIFTopologyGrouping",
+      update: self.applyUpdate,
+    };
 
-    self.params.enableSIFTopologyGrouping = {id: "enable-sif-topology-grouping", type: "checkbox",
-      property: "currentGeneralProperties.enableSIFTopologyGrouping", update: self.applyUpdate};
+    self.params.mapName = {
+      id: "map-name",
+      type: "text",
+      property: "currentGeneralProperties.mapName",
+    };
 
-    self.params.mapName = {id: "map-name", type: "text",
-      property: "currentGeneralProperties.mapName"};
+    self.params.mapDescription = {
+      id: "map-description",
+      type: "text",
+      property: "currentGeneralProperties.mapDescription",
+    };
 
-    self.params.mapDescription = {id: "map-description", type: "text",
-      property: "currentGeneralProperties.mapDescription"};
+    self.params.extraHighlightThickness = {
+      id: "highlight-thickness",
+      type: "range",
+      property: "currentGeneralProperties.extraHighlightThickness",
+    };
 
-    self.params.extraHighlightThickness = {id: "highlight-thickness", type: "range",
-      property: "currentGeneralProperties.extraHighlightThickness"};  
+    self.params.highlightColor = {
+      id: "highlight-color",
+      type: "color",
+      property: "currentGeneralProperties.highlightColor",
+    };
 
-    self.params.highlightColor = {id: "highlight-color", type: "color",
-      property: "currentGeneralProperties.highlightColor"};
-   
     // general properties part
     $(document).on("change", "#map-name", function (evt) {
-
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.mapName.value = $('#map-name').val();
+      self.params.mapName.value = $("#map-name").val();
 
       // TODO while making such calls appUtilities.undoable flag should be checked
       // if it is not true then the operation should not be undoable
@@ -571,269 +688,343 @@ var MapTabGeneralPanel = GeneralPropertiesParentView.extend({
       // update the network tab description as the map name is just changed
       appUtilities.updateNetworkTabDesc(networkKey);
 
-      $('#map-name').blur();
+      $("#map-name").blur();
     });
 
     $(document).on("change", "#map-description", function (evt) {
-
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.mapDescription.value = $('#map-description').val();
+      self.params.mapDescription.value = $("#map-description").val();
       cy.undoRedo().do("changeMenu", self.params.mapDescription);
-      $('#map-description').blur();
+      $("#map-description").blur();
     });
 
     $(document).on("change", "#map-type", function (evt) {
-
-      var callback = function(){
-        $('#map-type').val(chiseInstance.getMapType());
+      var callback = function () {
+        $("#map-type").val(chiseInstance.getMapType());
       };
       // use active cy instance
       var cy = appUtilities.getActiveCy();
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var elements = cy.elements();
-      
+
       var newMapType = $("#map-type").val();
-      if(cy.elements().length == 0){
+      if (cy.elements().length == 0) {
         //chiseInstance.elementUtilities.setMapType(newMapType);
-        cy.undoRedo().do("changeMapType", {mapType: newMapType, callback : callback});
+        cy.undoRedo().do("changeMapType", {
+          mapType: newMapType,
+          callback: callback,
+        });
         return;
       }
       var currentMapType = chiseInstance.getMapType();
       var validChange = false;
-      if((currentMapType == 'PD' || currentMapType == 'AF' || currentMapType =='SIF') && newMapType == 'HybridAny' && !validChange){
+      if (
+        (currentMapType == "PD" ||
+          currentMapType == "AF" ||
+          currentMapType == "SIF") &&
+        newMapType == "HybridAny" &&
+        !validChange
+      ) {
         validChange = true;
 
         //ok
-      }else if((currentMapType == 'PD' || currentMapType == 'AF') && (newMapType == 'HybridAny' || newMapType == 'HybridSbgn')&& !validChange){
+      } else if (
+        (currentMapType == "PD" || currentMapType == "AF") &&
+        (newMapType == "HybridAny" || newMapType == "HybridSbgn") &&
+        !validChange
+      ) {
         validChange = true;
         //ok
-      }else if(currentMapType =='HybridSbgn' && newMapType == 'HybridAny' && !validChange){
+      } else if (
+        currentMapType == "HybridSbgn" &&
+        newMapType == "HybridAny" &&
+        !validChange
+      ) {
         validChange = true;
-      }else if(currentMapType =='HybridSbgn' && (newMapType == 'PD' || newMapType =='AF')){
-        
-        if(newMapType == 'PD'){
-           //check no AF elements in netwrok     
-          var checkType = true;     
-          for(var i = 0 ; i < elements.length && checkType ;i++){
-            if(elements[i].data("language") == "AF"){
-              checkType = false;             
+      } else if (
+        currentMapType == "HybridSbgn" &&
+        (newMapType == "PD" || newMapType == "AF")
+      ) {
+        if (newMapType == "PD") {
+          //check no AF elements in netwrok
+          var checkType = true;
+          for (var i = 0; i < elements.length && checkType; i++) {
+            if (elements[i].data("language") == "AF") {
+              checkType = false;
             }
           }
-          validChange = checkType;     
-          
-         
-        }else{
+          validChange = checkType;
+        } else {
           //check no PD elements in netwrok
-          var checkType = true;     
-          for(var i = 0 ; i < elements.length && checkType ;i++){
-            if(elements[i].data("language") == "PD"){
-              checkType = false;             
+          var checkType = true;
+          for (var i = 0; i < elements.length && checkType; i++) {
+            if (elements[i].data("language") == "PD") {
+              checkType = false;
             }
           }
-          validChange = checkType;     
+          validChange = checkType;
         }
-      }else if(currentMapType == 'HybridAny' && !validChange){
-        if(newMapType == 'HybridSbgn'){
-           //check no SIF elements in netwrok
-           var checkType = true;     
-           for(var i = 0 ; i < elements.length && checkType ;i++){
-             if(elements[i].data("language") == "SIF"){
-               checkType = false;             
-             }
-           }
-           validChange = checkType;     
-        }else if(newMapType =='PD'){
-           //check no AF  OR SIF elements in netwrok
-           var checkType = true;  
-          for(var i = 0 ; i < elements.length &&  checkType;i++){
-            if(elements[i].data("language") == "AF" || elements[i].data("language") == "SIF"){
-              checkType = false;            
+      } else if (currentMapType == "HybridAny" && !validChange) {
+        if (newMapType == "HybridSbgn") {
+          //check no SIF elements in netwrok
+          var checkType = true;
+          for (var i = 0; i < elements.length && checkType; i++) {
+            if (elements[i].data("language") == "SIF") {
+              checkType = false;
             }
           }
-          validChange = checkType;  
-
-        }else if(newMapType == 'AF'){
+          validChange = checkType;
+        } else if (newMapType == "PD") {
+          //check no AF  OR SIF elements in netwrok
+          var checkType = true;
+          for (var i = 0; i < elements.length && checkType; i++) {
+            if (
+              elements[i].data("language") == "AF" ||
+              elements[i].data("language") == "SIF"
+            ) {
+              checkType = false;
+            }
+          }
+          validChange = checkType;
+        } else if (newMapType == "AF") {
           //check no PD  OR SIF elements in netwrok
-          var checkType = true;   
-          for(var i = 0 ; i < elements.length && checkType ;i++){
-            if(elements[i].data("language") == "PD" || elements[i].data("language") == "SIF"){
-              checkType = false;            
+          var checkType = true;
+          for (var i = 0; i < elements.length && checkType; i++) {
+            if (
+              elements[i].data("language") == "PD" ||
+              elements[i].data("language") == "SIF"
+            ) {
+              checkType = false;
             }
           }
 
-          validChange = checkType;  
-
-        }else{
+          validChange = checkType;
+        } else {
           //check no PD  OR AF elements in netwrok
-          var checkType = true;  
-          for(var i = 0 ; i < elements.length && checkType ;i++){
-            if(elements[i].data("language") == "AF" || elements[i].data("language") == "PD"){
-              checkType = false;           
+          var checkType = true;
+          for (var i = 0; i < elements.length && checkType; i++) {
+            if (
+              elements[i].data("language") == "AF" ||
+              elements[i].data("language") == "PD"
+            ) {
+              checkType = false;
             }
           }
 
-          validChange = checkType;  
+          validChange = checkType;
         }
       }
-       if(validChange){
-        cy.undoRedo().do("changeMapType", {mapType: newMapType, callback : callback});
-         //chiseInstance.elementUtilities.setMapType(newMapType);
-       }else{
+      if (validChange) {
+        cy.undoRedo().do("changeMapType", {
+          mapType: newMapType,
+          callback: callback,
+        });
+        //chiseInstance.elementUtilities.setMapType(newMapType);
+      } else {
         $("#map-type").val(currentMapType);
-         appUtilities.promptMapTypeView.render("You cannot change map type "+ appUtilities.mapTypesToViewableText[currentMapType] + " to a map of type "+appUtilities.mapTypesToViewableText[newMapType]+"!");
-         
-       }
-    
-      $('#map-type').blur();
+        appUtilities.promptMapTypeView.render(
+          "You cannot change map type " +
+            appUtilities.mapTypesToViewableText[currentMapType] +
+            " to a map of type " +
+            appUtilities.mapTypesToViewableText[newMapType] +
+            "!"
+        );
+      }
+
+      $("#map-type").blur();
     });
     $(document).on("change", "#compound-padding", function (evt) {
-      
-      var newValue = Number($('#compound-padding').val());
-      if(newValue < 0 ){
+      var newValue = Number($("#compound-padding").val());
+      if (newValue < 0) {
         newValue = 0;
       }
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
       self.params.compoundPadding.value = Number(newValue);
-     // var ur = cy.undoRedo();
+      // var ur = cy.undoRedo();
       //var actions = [];
       //actions.push({name:"changeMenu", param:self.params.compoundPadding});
       //actions.push({name:"setCompoundPadding", param:self.params.compoundPadding});
-     // ur.do("batch", actions);
+      // ur.do("batch", actions);
       cy.undoRedo().do("changeMenu", self.params.compoundPadding);
-     
-      $('#compound-padding').blur();
-    });
 
+      $("#compound-padding").blur();
+    });
 
     $(document).on("change", "#arrow-scale", function (evt) {
-
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.arrowScale.value = Number($('#arrow-scale').val());
+      self.params.arrowScale.value = Number($("#arrow-scale").val());
       var ur = cy.undoRedo();
       var actions = [];
-      actions.push({name: "changeMenu", param: self.params.arrowScale});
-      actions.push({name: "changeCss", param: { eles: cy.edges(), name: "arrow-scale",
-          valueMap: self.params.arrowScale.value}});
+      actions.push({ name: "changeMenu", param: self.params.arrowScale });
+      actions.push({
+        name: "changeCss",
+        param: {
+          eles: cy.edges(),
+          name: "arrow-scale",
+          valueMap: self.params.arrowScale.value,
+        },
+      });
       ur.do("batch", actions);
-      $('#arrow-scale').blur();
+      $("#arrow-scale").blur();
     });
 
     $(document).on("change", "#allow-compound-node-resize", function (evt) {
-
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.allowCompoundNodeResize.value = $('#allow-compound-node-resize').prop('checked');
+      self.params.allowCompoundNodeResize.value = $(
+        "#allow-compound-node-resize"
+      ).prop("checked");
       cy.undoRedo().do("changeMenu", self.params.allowCompoundNodeResize);
-      $('#allow-compound-node-resize').blur();
+      $("#allow-compound-node-resize").blur();
     });
 
     $(document).on("change", "#infer-nesting-on-load", function (evt) {
-
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.inferNestingOnLoad.value = $('#infer-nesting-on-load').prop('checked');
+      self.params.inferNestingOnLoad.value = $("#infer-nesting-on-load").prop(
+        "checked"
+      );
       cy.undoRedo().do("changeMenu", self.params.inferNestingOnLoad);
-      $('#infer-nesting-on-load').blur();
+      $("#infer-nesting-on-load").blur();
     });
 
     $(document).on("change", "#enable-ports", function (evt) {
-
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.enablePorts.value = $('#enable-ports').prop('checked');
+      self.params.enablePorts.value = $("#enable-ports").prop("checked");
       cy.undoRedo().do("changeMenu", self.params.enablePorts);
-      $('#enable-ports').blur();
+      $("#enable-ports").blur();
     });
 
     $(document).on("change", "#enable-sif-topology-grouping", function (evt) {
-
       // use active cy instance
       var cy = appUtilities.getActiveCy();
       var chiseInstance = appUtilities.getActiveChiseInstance();
       // get current general properties for cy
-      var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+      var currentGeneralProperties = appUtilities.getScratch(
+        cy,
+        "currentGeneralProperties"
+      );
       var actions = [];
 
-      self.params.enableSIFTopologyGrouping.value = $('#enable-sif-topology-grouping').prop('checked');
+      self.params.enableSIFTopologyGrouping.value = $(
+        "#enable-sif-topology-grouping"
+      ).prop("checked");
       var apply = self.params.enableSIFTopologyGrouping.value;
 
-      actions.push({name: "changeMenu", param: self.params.enableSIFTopologyGrouping});
-      if ( chiseInstance.elementUtilities.mapType === 'SIF' ) {
-        actions.push({name: "applySIFTopologyGrouping", param: { apply }});
+      actions.push({
+        name: "changeMenu",
+        param: self.params.enableSIFTopologyGrouping,
+      });
+      if (chiseInstance.elementUtilities.mapType === "SIF") {
+        actions.push({ name: "applySIFTopologyGrouping", param: { apply } });
 
-        if ( currentGeneralProperties.recalculateLayoutOnComplexityManagement ) {
+        if (currentGeneralProperties.recalculateLayoutOnComplexityManagement) {
           var preferences = { randomize: false };
-          var layoutOptions = appUtilities.layoutPropertiesView.getLayoutOptions(preferences, chiseInstance);
+          var layoutOptions =
+            appUtilities.layoutPropertiesView.getLayoutOptions(
+              preferences,
+              chiseInstance
+            );
 
           var layoutParam = {
-            options: layoutOptions
+            options: layoutOptions,
           };
 
-          actions.push({name: "layout", param: layoutParam});
+          actions.push({ name: "layout", param: layoutParam });
         }
       }
 
       cy.undoRedo().do("batch", actions);
       // cy.undoRedo().do("changeMenu", self.params.enableSIFTopologyGrouping);
-      $('#enable-sif-topology-grouping').blur();
+      $("#enable-sif-topology-grouping").blur();
     });
 
-    $(document).on("change", "#highlight-thickness", function(evt) {
+    $(document).on("change", "#highlight-thickness", function (evt) {
       var cy = appUtilities.getActiveCy();
-      var viewUtilities = cy.viewUtilities('get');
-      self.params.extraHighlightThickness.value = Number($('#highlight-thickness').val());
-      self.params.highlightColor.value = $('#highlight-color').val();
+      var viewUtilities = cy.viewUtilities("get");
+      self.params.extraHighlightThickness.value = Number(
+        $("#highlight-thickness").val()
+      );
+      self.params.highlightColor.value = $("#highlight-color").val();
       var extraHighlightThickness = self.params.extraHighlightThickness.value;
       var highlightColor = self.params.highlightColor.value;
-      
-      viewUtilities.changeHighlightStyle(0, {
-        'border-width' : function (ele) { 
-          return Math.max(parseFloat(ele.data('border-width')) + extraHighlightThickness, 3); 
-        }, 'border-color': highlightColor
-      }, {
-        'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + extraHighlightThickness, 3); },
-        'line-color': highlightColor,
-        'source-arrow-color': highlightColor,
-        'target-arrow-color': highlightColor
-      });
-      
+
+      viewUtilities.changeHighlightStyle(
+        0,
+        {
+          "border-width": function (ele) {
+            return Math.max(
+              parseFloat(ele.data("border-width")) + extraHighlightThickness,
+              3
+            );
+          },
+          "border-color": highlightColor,
+        },
+        {
+          width: function (ele) {
+            return Math.max(
+              parseFloat(ele.data("width")) + extraHighlightThickness,
+              3
+            );
+          },
+          "line-color": highlightColor,
+          "source-arrow-color": highlightColor,
+          "target-arrow-color": highlightColor,
+        }
+      );
+
       cy.undoRedo().do("changeMenu", self.params.extraHighlightThickness);
-      $('#highlight-thickness').blur();
+      $("#highlight-thickness").blur();
     });
-    
-    $(document).on("change", "#highlight-color", function(evt) {
+
+    $(document).on("change", "#highlight-color", function (evt) {
       var cy = appUtilities.getActiveCy();
-      var viewUtilities = cy.viewUtilities('get');
-      self.params.extraHighlightThickness.value = Number($('#highlight-thickness').val());
-      self.params.highlightColor.value = $('#highlight-color').val();
+      var viewUtilities = cy.viewUtilities("get");
+      self.params.extraHighlightThickness.value = Number(
+        $("#highlight-thickness").val()
+      );
+      self.params.highlightColor.value = $("#highlight-color").val();
       var extraHighlightThickness = self.params.extraHighlightThickness.value;
       var highlightColor = self.params.highlightColor.value;
-      
-      viewUtilities.changeHighlightStyle(0, {
-        'border-width': function (ele) { 
-          return Math.max(parseFloat(ele.data('border-width')) + extraHighlightThickness, 3); 
-        }, 
-        'border-color': highlightColor
-      }, {
-        'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + extraHighlightThickness, 3); },
-        'line-color': highlightColor,
-        'source-arrow-color': highlightColor,
-        'target-arrow-color': highlightColor
-      });
-      
+
+      viewUtilities.changeHighlightStyle(
+        0,
+        {
+          "border-width": function (ele) {
+            return Math.max(
+              parseFloat(ele.data("border-width")) + extraHighlightThickness,
+              3
+            );
+          },
+          "border-color": highlightColor,
+        },
+        {
+          width: function (ele) {
+            return Math.max(
+              parseFloat(ele.data("width")) + extraHighlightThickness,
+              3
+            );
+          },
+          "line-color": highlightColor,
+          "source-arrow-color": highlightColor,
+          "target-arrow-color": highlightColor,
+        }
+      );
+
       cy.undoRedo().do("changeMenu", self.params.highlightColor);
-      $('#highlight-color').blur();
+      $("#highlight-color").blur();
     });
-  
+
     $(document).on("click", "#inspector-map-tab", function (evt) {
       var chiseInstance = appUtilities.getActiveChiseInstance();
       //document.getElementById('map-type').value = chiseInstance.getMapType() ? chiseInstance.getMapType() : "Unknown";
@@ -845,278 +1036,409 @@ var MapTabGeneralPanel = GeneralPropertiesParentView.extend({
     });
 
     $(document).on("click", "#map-general-default-button", function (evt) {
-
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
       var ur = cy.undoRedo();
       var actions = [];
 
-      self.params.allowCompoundNodeResize.value = appUtilities.defaultGeneralProperties.allowCompoundNodeResize;
-      self.params.inferNestingOnLoad.value = appUtilities.defaultGeneralProperties.inferNestingOnLoad;
-      self.params.enablePorts.value = appUtilities.defaultGeneralProperties.enablePorts;
-      self.params.enableSIFTopologyGrouping.value = appUtilities.defaultGeneralProperties.enableSIFTopologyGrouping;
-      self.params.compoundPadding.value = appUtilities.defaultGeneralProperties.compoundPadding;
-      self.params.arrowScale.value = appUtilities.defaultGeneralProperties.arrowScale;
-      self.params.extraHighlightThickness.value = appUtilities.defaultGeneralProperties.extraHighlightThickness;
-      self.params.highlightColor.value = appUtilities.defaultGeneralProperties.highlightColor;
-      actions.push({name: "changeMenu", param: self.params.allowCompoundNodeResize});
-      actions.push({name: "changeMenu", param: self.params.inferNestingOnLoad});
-      actions.push({name: "changeMenu", param: self.params.enablePorts});
-      actions.push({name: "changeMenu", param: self.params.enableSIFTopologyGrouping});
-      actions.push({name: "applySIFTopologyGrouping", param: { apply: self.params.enableSIFTopologyGrouping.value }});
-      actions.push({name: "changeMenu", param: self.params.compoundPadding});
-      actions.push({name: "changeMenu", param: self.params.arrowScale});
-      actions.push({name: "changeCss", param: { eles: cy.edges(), name: "arrow-scale",
-          valueMap: self.params.arrowScale.value}});
-      actions.push({name: "changeMenu", param: self.params.extraHighlightThickness});
-      actions.push({name: "changeMenu", param: self.params.highlightColor});
+      self.params.allowCompoundNodeResize.value =
+        appUtilities.defaultGeneralProperties.allowCompoundNodeResize;
+      self.params.inferNestingOnLoad.value =
+        appUtilities.defaultGeneralProperties.inferNestingOnLoad;
+      self.params.enablePorts.value =
+        appUtilities.defaultGeneralProperties.enablePorts;
+      self.params.enableSIFTopologyGrouping.value =
+        appUtilities.defaultGeneralProperties.enableSIFTopologyGrouping;
+      self.params.compoundPadding.value =
+        appUtilities.defaultGeneralProperties.compoundPadding;
+      self.params.arrowScale.value =
+        appUtilities.defaultGeneralProperties.arrowScale;
+      self.params.extraHighlightThickness.value =
+        appUtilities.defaultGeneralProperties.extraHighlightThickness;
+      self.params.highlightColor.value =
+        appUtilities.defaultGeneralProperties.highlightColor;
+      actions.push({
+        name: "changeMenu",
+        param: self.params.allowCompoundNodeResize,
+      });
+      actions.push({
+        name: "changeMenu",
+        param: self.params.inferNestingOnLoad,
+      });
+      actions.push({ name: "changeMenu", param: self.params.enablePorts });
+      actions.push({
+        name: "changeMenu",
+        param: self.params.enableSIFTopologyGrouping,
+      });
+      actions.push({
+        name: "applySIFTopologyGrouping",
+        param: { apply: self.params.enableSIFTopologyGrouping.value },
+      });
+      actions.push({ name: "changeMenu", param: self.params.compoundPadding });
+      actions.push({ name: "changeMenu", param: self.params.arrowScale });
+      actions.push({
+        name: "changeCss",
+        param: {
+          eles: cy.edges(),
+          name: "arrow-scale",
+          valueMap: self.params.arrowScale.value,
+        },
+      });
+      actions.push({
+        name: "changeMenu",
+        param: self.params.extraHighlightThickness,
+      });
+      actions.push({ name: "changeMenu", param: self.params.highlightColor });
       ur.do("batch", actions);
     });
   },
-  render: function() {
-
+  render: function () {
     // use active cy instance
     var cy = appUtilities.getActiveCy();
     var chiseInstance = appUtilities.getActiveChiseInstance();
     // get current general properties for cy
-    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+    var currentGeneralProperties = appUtilities.getScratch(
+      cy,
+      "currentGeneralProperties"
+    );
     this.template = _.template($("#map-tab-general-template").html());
     this.$el.empty();
     this.$el.html(this.template(currentGeneralProperties));
-    colorPickerUtils.bindPicker2Input('#highlight-color', function(evt) {
-      $('#highlight-color').trigger("change");
+    colorPickerUtils.bindPicker2Input("#highlight-color", function (evt) {
+      $("#highlight-color").trigger("change");
     });
     $("#map-type").val(chiseInstance.elementUtilities.getMapType());
     return this;
-  }
+  },
 });
 
 // inherit from GeneralPropertiesParentView
 var MapTabLabelPanel = GeneralPropertiesParentView.extend({
-  initialize: function() {
+  initialize: function () {
     var self = this;
     // initialize undo-redo parameters
     self.params = {};
-    self.params.dynamicLabelSize = {id: "dynamic-label-size-select", type: "select",
-      property: "currentGeneralProperties.dynamicLabelSize"};
-
-    self.params.showComplexName = {id: "show-complex-name", type: "checkbox",
-      property: "currentGeneralProperties.showComplexName", update: self.applyUpdate};
-
-    self.params.adjustNodeLabelFontSizeAutomatically = {id: "adjust-node-label-font-size-automatically", type: "checkbox",
-      property: "currentGeneralProperties.adjustNodeLabelFontSizeAutomatically"};
+    self.params.dynamicLabelSize = {
+      id: "dynamic-label-size-select",
+      type: "select",
+      property: "currentGeneralProperties.dynamicLabelSize",
+    };
 
-    self.params.fitLabelsToNodes = {id: "fit-labels-to-nodes", type: "checkbox",
-      property: "currentGeneralProperties.fitLabelsToNodes"};
+    self.params.showComplexName = {
+      id: "show-complex-name",
+      type: "checkbox",
+      property: "currentGeneralProperties.showComplexName",
+      update: self.applyUpdate,
+    };
 
-    self.params.fitLabelsToInfoboxes = {id: "fit-labels-to-infoboxes", type: "checkbox",
-      property: "currentGeneralProperties.fitLabelsToInfoboxes"};
+    self.params.adjustNodeLabelFontSizeAutomatically = {
+      id: "adjust-node-label-font-size-automatically",
+      type: "checkbox",
+      property: "currentGeneralProperties.adjustNodeLabelFontSizeAutomatically",
+    };
 
-    $(document).on("change", 'select[name="dynamic-label-size"]', function (evt) {
+    self.params.fitLabelsToNodes = {
+      id: "fit-labels-to-nodes",
+      type: "checkbox",
+      property: "currentGeneralProperties.fitLabelsToNodes",
+    };
 
-      // use active cy instance
-      var cy = appUtilities.getActiveCy();
+    self.params.fitLabelsToInfoboxes = {
+      id: "fit-labels-to-infoboxes",
+      type: "checkbox",
+      property: "currentGeneralProperties.fitLabelsToInfoboxes",
+    };
 
-      self.params.dynamicLabelSize.value = $('#dynamic-label-size-select option:selected').val();
-      cy.undoRedo().do("changeMenu", self.params.dynamicLabelSize);
-      $('#dynamic-label-size-select').blur();
-      self.applyUpdate();
-    });
+    $(document).on(
+      "change",
+      'select[name="dynamic-label-size"]',
+      function (evt) {
+        // use active cy instance
+        var cy = appUtilities.getActiveCy();
+
+        self.params.dynamicLabelSize.value = $(
+          "#dynamic-label-size-select option:selected"
+        ).val();
+        cy.undoRedo().do("changeMenu", self.params.dynamicLabelSize);
+        $("#dynamic-label-size-select").blur();
+        self.applyUpdate();
+      }
+    );
 
     $(document).on("change", "#show-complex-name", function (evt) {
-
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.showComplexName.value = $('#show-complex-name').prop('checked');
+      self.params.showComplexName.value =
+        $("#show-complex-name").prop("checked");
       cy.undoRedo().do("changeMenu", self.params.showComplexName);
-      $('#show-complex-name').blur();
+      $("#show-complex-name").blur();
     });
 
-    $(document).on("change", "#adjust-node-label-font-size-automatically", function (evt) {
-
-      // use active cy instance
-      var cy = appUtilities.getActiveCy();
-
-      self.params.adjustNodeLabelFontSizeAutomatically.value = $('#adjust-node-label-font-size-automatically').prop('checked');
-      cy.undoRedo().do("changeMenu", self.params.adjustNodeLabelFontSizeAutomatically);
-      $('#adjust-node-label-font-size-automatically').blur();
-      self.applyUpdate();
-    });
+    $(document).on(
+      "change",
+      "#adjust-node-label-font-size-automatically",
+      function (evt) {
+        // use active cy instance
+        var cy = appUtilities.getActiveCy();
+
+        self.params.adjustNodeLabelFontSizeAutomatically.value = $(
+          "#adjust-node-label-font-size-automatically"
+        ).prop("checked");
+        cy.undoRedo().do(
+          "changeMenu",
+          self.params.adjustNodeLabelFontSizeAutomatically
+        );
+        $("#adjust-node-label-font-size-automatically").blur();
+        self.applyUpdate();
+      }
+    );
 
     $(document).on("change", "#fit-labels-to-nodes", function (evt) {
-
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.fitLabelsToNodes.value = $('#fit-labels-to-nodes').prop('checked');
+      self.params.fitLabelsToNodes.value = $("#fit-labels-to-nodes").prop(
+        "checked"
+      );
       cy.undoRedo().do("changeMenu", self.params.fitLabelsToNodes);
-      $('#fit-labels-to-nodes').blur();
+      $("#fit-labels-to-nodes").blur();
       self.applyUpdate();
     });
 
     $(document).on("change", "#fit-labels-to-infoboxes", function (evt) {
-
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.fitLabelsToInfoboxes.value = $('#fit-labels-to-infoboxes').prop('checked');
+      self.params.fitLabelsToInfoboxes.value = $(
+        "#fit-labels-to-infoboxes"
+      ).prop("checked");
       cy.undoRedo().do("changeMenu", self.params.fitLabelsToInfoboxes);
-      $('#fit-labels-to-infoboxes').blur();
+      $("#fit-labels-to-infoboxes").blur();
       self.applyUpdate();
     });
     $(document).on("click", "#map-label-default-button", function (evt) {
-
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
       var ur = cy.undoRedo();
       var actions = [];
-      self.params.dynamicLabelSize.value = appUtilities.defaultGeneralProperties.dynamicLabelSize;
-      self.params.adjustNodeLabelFontSizeAutomatically.value = appUtilities.defaultGeneralProperties.adjustNodeLabelFontSizeAutomatically;
-      self.params.fitLabelsToNodes.value = appUtilities.defaultGeneralProperties.fitLabelsToNodes;
-      self.params.fitLabelsToInfoboxes.value = appUtilities.defaultGeneralProperties.fitLabelsToInfoboxes;
-      self.params.showComplexName.value = appUtilities.defaultGeneralProperties.showComplexName;
-
-      actions.push({name: "changeMenu", param: self.params.dynamicLabelSize});
-      actions.push({name: "changeMenu", param: self.params.adjustNodeLabelFontSizeAutomatically});
-      actions.push({name: "changeMenu", param: self.params.fitLabelsToNodes});
-      actions.push({name: "changeMenu", param: self.params.fitLabelsToInfoboxes});
-      actions.push({name: "changeMenu", param: self.params.showComplexName});
+      self.params.dynamicLabelSize.value =
+        appUtilities.defaultGeneralProperties.dynamicLabelSize;
+      self.params.adjustNodeLabelFontSizeAutomatically.value =
+        appUtilities.defaultGeneralProperties.adjustNodeLabelFontSizeAutomatically;
+      self.params.fitLabelsToNodes.value =
+        appUtilities.defaultGeneralProperties.fitLabelsToNodes;
+      self.params.fitLabelsToInfoboxes.value =
+        appUtilities.defaultGeneralProperties.fitLabelsToInfoboxes;
+      self.params.showComplexName.value =
+        appUtilities.defaultGeneralProperties.showComplexName;
+
+      actions.push({ name: "changeMenu", param: self.params.dynamicLabelSize });
+      actions.push({
+        name: "changeMenu",
+        param: self.params.adjustNodeLabelFontSizeAutomatically,
+      });
+      actions.push({ name: "changeMenu", param: self.params.fitLabelsToNodes });
+      actions.push({
+        name: "changeMenu",
+        param: self.params.fitLabelsToInfoboxes,
+      });
+      actions.push({ name: "changeMenu", param: self.params.showComplexName });
       ur.do("batch", actions);
     });
   },
-  render: function() {
-
+  render: function () {
     // use the active cy instance
     var cy = appUtilities.getActiveCy();
 
     // get current general properties of cy
-    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+    var currentGeneralProperties = appUtilities.getScratch(
+      cy,
+      "currentGeneralProperties"
+    );
 
     this.template = _.template($("#map-tab-label-template").html());
     this.$el.empty();
     this.$el.html(this.template(currentGeneralProperties));
     return this;
-  }
+  },
 });
 
 // inherit from GeneralPropertiesParentView
 var MapTabRearrangementPanel = GeneralPropertiesParentView.extend({
-  initialize: function() {
+  initialize: function () {
     var self = this;
     // initialize undo-redo parameters
     self.params = {};
-    self.params.recalculateLayoutOnComplexityManagement = {id: "recalculate-layout-on-complexity-management", type: "checkbox",
-      property: "currentGeneralProperties.recalculateLayoutOnComplexityManagement"};
-
-    self.params.rearrangeOnComplexityManagement = {id: "rearrange-on-complexity-management", type: "checkbox",
-      property: "currentGeneralProperties.rearrangeOnComplexityManagement"};
-
-    self.params.animateOnDrawingChanges = {id: "animate-on-drawing-changes", type: "checkbox",
-      property: "currentGeneralProperties.animateOnDrawingChanges"};
-
-    $(document).on("change", "#recalculate-layout-on-complexity-management", function (evt) {
-
-      // use active cy instance
-      var cy = appUtilities.getActiveCy();
-
-      self.params.recalculateLayoutOnComplexityManagement.value = $('#recalculate-layout-on-complexity-management').prop('checked');
-      cy.undoRedo().do("changeMenu", self.params.recalculateLayoutOnComplexityManagement);
-      $('#recalculate-layout-on-complexity-management').blur();
-    });
+    self.params.recalculateLayoutOnComplexityManagement = {
+      id: "recalculate-layout-on-complexity-management",
+      type: "checkbox",
+      property:
+        "currentGeneralProperties.recalculateLayoutOnComplexityManagement",
+    };
 
-    $(document).on("change", "#rearrange-on-complexity-management", function (evt) {
+    self.params.rearrangeOnComplexityManagement = {
+      id: "rearrange-on-complexity-management",
+      type: "checkbox",
+      property: "currentGeneralProperties.rearrangeOnComplexityManagement",
+    };
 
-      // use active cy instance
-      var cy = appUtilities.getActiveCy();
+    self.params.animateOnDrawingChanges = {
+      id: "animate-on-drawing-changes",
+      type: "checkbox",
+      property: "currentGeneralProperties.animateOnDrawingChanges",
+    };
 
-      self.params.rearrangeOnComplexityManagement.value = $('#rearrange-on-complexity-management').prop('checked');
-      cy.undoRedo().do("changeMenu", self.params.rearrangeOnComplexityManagement);
-      $('#rearrange-on-complexity-management').blur();
-    });
+    $(document).on(
+      "change",
+      "#recalculate-layout-on-complexity-management",
+      function (evt) {
+        // use active cy instance
+        var cy = appUtilities.getActiveCy();
+
+        self.params.recalculateLayoutOnComplexityManagement.value = $(
+          "#recalculate-layout-on-complexity-management"
+        ).prop("checked");
+        cy.undoRedo().do(
+          "changeMenu",
+          self.params.recalculateLayoutOnComplexityManagement
+        );
+        $("#recalculate-layout-on-complexity-management").blur();
+      }
+    );
+
+    $(document).on(
+      "change",
+      "#rearrange-on-complexity-management",
+      function (evt) {
+        // use active cy instance
+        var cy = appUtilities.getActiveCy();
+
+        self.params.rearrangeOnComplexityManagement.value = $(
+          "#rearrange-on-complexity-management"
+        ).prop("checked");
+        cy.undoRedo().do(
+          "changeMenu",
+          self.params.rearrangeOnComplexityManagement
+        );
+        $("#rearrange-on-complexity-management").blur();
+      }
+    );
 
     $(document).on("change", "#animate-on-drawing-changes", function (evt) {
-
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.animateOnDrawingChanges.value = $('#animate-on-drawing-changes').prop('checked');
+      self.params.animateOnDrawingChanges.value = $(
+        "#animate-on-drawing-changes"
+      ).prop("checked");
       cy.undoRedo().do("changeMenu", self.params.animateOnDrawingChanges);
-      $('#animate-on-drawing-changes').blur();
+      $("#animate-on-drawing-changes").blur();
     });
 
-    $(document).on("click", "#map-rearrangement-default-button", function (evt) {
-
-      // use active cy instance
-      var cy = appUtilities.getActiveCy();
-
-      var ur = cy.undoRedo();
-      var actions = [];
-      self.params.recalculateLayoutOnComplexityManagement.value = appUtilities.defaultGeneralProperties.recalculateLayoutOnComplexityManagement;
-      self.params.rearrangeOnComplexityManagement.value = appUtilities.defaultGeneralProperties.rearrangeOnComplexityManagement;
-      self.params.animateOnDrawingChanges.value = appUtilities.defaultGeneralProperties.animateOnDrawingChanges;
-      actions.push({name: "changeMenu", param: self.params.recalculateLayoutOnComplexityManagement});
-      actions.push({name: "changeMenu", param: self.params.rearrangeOnComplexityManagement});
-      actions.push({name: "changeMenu", param: self.params.animateOnDrawingChanges});
-      ur.do("batch", actions);
-    });
+    $(document).on(
+      "click",
+      "#map-rearrangement-default-button",
+      function (evt) {
+        // use active cy instance
+        var cy = appUtilities.getActiveCy();
+
+        var ur = cy.undoRedo();
+        var actions = [];
+        self.params.recalculateLayoutOnComplexityManagement.value =
+          appUtilities.defaultGeneralProperties.recalculateLayoutOnComplexityManagement;
+        self.params.rearrangeOnComplexityManagement.value =
+          appUtilities.defaultGeneralProperties.rearrangeOnComplexityManagement;
+        self.params.animateOnDrawingChanges.value =
+          appUtilities.defaultGeneralProperties.animateOnDrawingChanges;
+        actions.push({
+          name: "changeMenu",
+          param: self.params.recalculateLayoutOnComplexityManagement,
+        });
+        actions.push({
+          name: "changeMenu",
+          param: self.params.rearrangeOnComplexityManagement,
+        });
+        actions.push({
+          name: "changeMenu",
+          param: self.params.animateOnDrawingChanges,
+        });
+        ur.do("batch", actions);
+      }
+    );
   },
-  render: function() {
-
+  render: function () {
     // use the active cy instance
     var cy = appUtilities.getActiveCy();
 
     // get current general properties of cy
-    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+    var currentGeneralProperties = appUtilities.getScratch(
+      cy,
+      "currentGeneralProperties"
+    );
 
     this.template = _.template($("#map-tab-rearrangement-template").html());
     this.$el.empty();
     this.$el.html(this.template(currentGeneralProperties));
 
     return this;
-  }
+  },
 });
 
 //The render functions for the experimental panel
 var experimentTabPanel = GeneralPropertiesParentView.extend({
-  initialize: function() {
+  initialize: function () {
     var self = this;
     self.params = {};
-    self.params.experimentDescription = {id: "map-experiment", type: "text",
-    property: "currentGeneralProperties.experimentDescription"};
-
-    $(document).on("click","#load-exp-data-util", function (evt) {
-        $("#overlay-data").trigger('click');
-    });
+    self.params.experimentDescription = {
+      id: "map-experiment",
+      type: "text",
+      property: "currentGeneralProperties.experimentDescription",
+    };
 
-    $(document).on("click", "#experiment-remove-all, #experiment-data-remove-all", function (evt) {
-      var cy = appUtilities.getActiveCy();
-      var param = {self};
-      cy.undoRedo().do("updateRemoveAll", param);
-      self.render();
+    $(document).on("click", "#load-exp-data-util", function (evt) {
+      $("#overlay-data").trigger("click");
     });
 
-    $(document).on("click", "#experiment-hide-all, #experiment-data-hide-all", function (evt) {
-      var chiseInstance = appUtilities.getActiveChiseInstance();
-      var cy = appUtilities.getActiveCy();
-      var params = {};
-      params.self = self;
-      if(evt.target.value == 'true'){
-        cy.undoRedo().do("hideAll", params);
+    $(document).on(
+      "click",
+      "#experiment-remove-all, #experiment-data-remove-all",
+      function (evt) {
+        var cy = appUtilities.getActiveCy();
+        var param = { self };
+        cy.undoRedo().do("updateRemoveAll", param);
+        self.render();
       }
-      else{
-        cy.undoRedo().do("unhideAll", params);
+    );
+
+    $(document).on(
+      "click",
+      "#experiment-hide-all, #experiment-data-hide-all",
+      function (evt) {
+        var chiseInstance = appUtilities.getActiveChiseInstance();
+        var cy = appUtilities.getActiveCy();
+        var params = {};
+        params.self = self;
+        if (evt.target.value == "true") {
+          cy.undoRedo().do("hideAll", params);
+        } else {
+          cy.undoRedo().do("unhideAll", params);
+        }
       }
-    });
+    );
 
     // Make the DIV element draggable https://www.w3schools.com/howto/howto_js_draggable.asp
     function makeElementDraggable(elmnt) {
-      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+      var pos1 = 0,
+        pos2 = 0,
+        pos3 = 0,
+        pos4 = 0;
       if (document.getElementById(elmnt.id + "-header")) {
         // if present, the header is where you move the DIV from:
-        document.getElementById(elmnt.id + "-header").onmousedown = dragMouseDown;
+        document.getElementById(elmnt.id + "-header").onmousedown =
+          dragMouseDown;
       } else {
         // otherwise, move the DIV from anywhere inside the DIV:
         elmnt.onmousedown = dragMouseDown;
@@ -1142,8 +1464,8 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
         pos3 = e.clientX;
         pos4 = e.clientY;
         // set the element's new position:
-        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
-        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+        elmnt.style.top = elmnt.offsetTop - pos2 + "px";
+        elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
       }
 
       function closeDragElement() {
@@ -1154,32 +1476,39 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
     }
 
     $(document).on("click", "#show-experiment-data-as-table", function () {
-      var divId = 'draggable-exp-data-div';
-      
-      if ($('#' + divId).is(':visible')) {
+      var divId = "draggable-exp-data-div";
+
+      if ($("#" + divId).is(":visible")) {
         return;
       }
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var data = chiseInstance.getExperimentalData().parsedDataMap;
       makeElementDraggable(document.getElementById(divId));
-      $('#' + divId).show();
-      fillTable4ExpData(document.getElementById('map-exp-table'), data);
-
-      $(document).off('keyup', '#search-exp-table');
-      $(document).on('keyup', '#search-exp-table', _.debounce(function () {
-        searchTable(document.getElementById('map-exp-table'), $('#search-exp-table').val());
-      }, 250));
+      $("#" + divId).show();
+      fillTable4ExpData(document.getElementById("map-exp-table"), data);
+
+      $(document).off("keyup", "#search-exp-table");
+      $(document).on(
+        "keyup",
+        "#search-exp-table",
+        _.debounce(function () {
+          searchTable(
+            document.getElementById("map-exp-table"),
+            $("#search-exp-table").val()
+          );
+        }, 250)
+      );
     });
 
     $(document).on("click", "#close-experiment-data-as-table", function () {
-      $('#draggable-exp-data-div').hide();
+      $("#draggable-exp-data-div").hide();
     });
 
     function fillTable4ExpData(elem, data) {
-      var headers = ['Node'];
+      var headers = ["Node"];
       var fileNames = {};
       var experiments = {};
-      var s = '';
+      var s = "";
 
       for (var node in data) {
         for (var exp in data[node]) {
@@ -1188,31 +1517,31 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
       }
 
       for (var h in experiments) {
-        var arr = h.split('?');
+        var arr = h.split("?");
         if (!fileNames[arr[0]]) {
           fileNames[arr[0]] = 1; // for colspan
         } else {
           fileNames[arr[0]] += 1; // for colspan
         }
-        headers.push(arr[arr.length-1]);
+        headers.push(arr[arr.length - 1]);
       }
 
       // insert file names as "headers" of html table
-      s += '<tr><th style="border: 0px;"></th>'
+      s += '<tr><th style="border: 0px;"></th>';
       for (let i in fileNames) {
         s += `<th class="text-center" style="border: 0px;" colspan="${fileNames[i]}">${i}</td>`;
       }
-      s += '</tr>'
+      s += "</tr>";
 
-      s += '<tr>'
+      s += "<tr>";
       for (let i = 0; i < headers.length; i++) {
-        var centerer = '';
+        var centerer = "";
         if (i > 0) {
           centerer = 'class="text-center"';
         }
-        s += `<th id="sortable-table-header-${i}" style="cursor: pointer;" title="sort" ${centerer}>${headers[i]}</th>`
+        s += `<th id="sortable-table-header-${i}" style="cursor: pointer;" title="sort" ${centerer}>${headers[i]}</th>`;
       }
-      s += '</tr>'
+      s += "</tr>";
 
       // insert table columns
       var nodeCnt = 0;
@@ -1221,33 +1550,33 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
         nodeLabels.push(node);
         s += `<tr id="hoverable-table-row-${nodeCnt++}"><td>${node}</td>`;
         for (var exp in experiments) {
-          s += `<td class="text-center">${data[node][exp] || '-'}</td>`
+          s += `<td class="text-center">${data[node][exp] || "-"}</td>`;
         }
-        s += '</tr>';
+        s += "</tr>";
       }
       elem.innerHTML = s;
 
       // change `let i` to `var i` to see the difference
       for (let i = 0; i < headers.length; i++) {
-        $(document).off('click', '#sortable-table-header-' + i);
-        $(document).on('click', '#sortable-table-header-' + i, function () {
-          sortTable(document.getElementById('map-exp-table'), i);
+        $(document).off("click", "#sortable-table-header-" + i);
+        $(document).on("click", "#sortable-table-header-" + i, function () {
+          sortTable(document.getElementById("map-exp-table"), i);
         });
       }
 
       for (let i = 0; i < nodeCnt; i++) {
-        $(document).off('mouseenter', '#hoverable-table-row-' + i);
-        $(document).off('mouseleave', '#hoverable-table-row-' + i);
-        $(document).on('mouseenter', '#hoverable-table-row-' + i, () => {
+        $(document).off("mouseenter", "#hoverable-table-row-" + i);
+        $(document).off("mouseleave", "#hoverable-table-row-" + i);
+        $(document).on("mouseenter", "#hoverable-table-row-" + i, () => {
           var cy = appUtilities.getActiveCy();
-          var vu = cy.viewUtilities('get');
-          var eles = cy.nodes().filter(x => x.data('label') == nodeLabels[i]);
+          var vu = cy.viewUtilities("get");
+          var eles = cy.nodes().filter((x) => x.data("label") == nodeLabels[i]);
           vu.highlight(eles, 2);
         });
-        $(document).on('mouseleave', '#hoverable-table-row-' + i, () => {
+        $(document).on("mouseleave", "#hoverable-table-row-" + i, () => {
           var cy = appUtilities.getActiveCy();
-          var vu = cy.viewUtilities('get');
-          var eles = cy.nodes().filter(x => x.data('label') == nodeLabels[i]);
+          var vu = cy.viewUtilities("get");
+          var eles = cy.nodes().filter((x) => x.data("label") == nodeLabels[i]);
           vu.removeHighlights(eles);
         });
       }
@@ -1258,18 +1587,18 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
         searchIdxes = [0];
       }
       filter = filter.toUpperCase();
-      var rows = table.getElementsByTagName('tr');
+      var rows = table.getElementsByTagName("tr");
 
       // Loop through all table rows, and hide those who don't match the search query
       for (var i = 0; i < rows.length; i++) {
         for (var j = 0; j < searchIdxes.length; j++) {
-          var col = rows[i].getElementsByTagName('td')[searchIdxes[0]];
+          var col = rows[i].getElementsByTagName("td")[searchIdxes[0]];
           if (col) {
             var txt = col.textContent || col.innerText;
             if (txt.toUpperCase().indexOf(filter) > -1) {
-              rows[i].style.display = '';
+              rows[i].style.display = "";
             } else {
-              rows[i].style.display = 'none';
+              rows[i].style.display = "none";
             }
           }
         }
@@ -1278,11 +1607,17 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
 
     // makes bubble sort based on column index in specified direction
     function sortTable(table, colIdx, dir) {
-      var rows, switching, i, x, y, shouldSwitch, switchcount = 0;
+      var rows,
+        switching,
+        i,
+        x,
+        y,
+        shouldSwitch,
+        switchcount = 0;
       switching = true;
       // Set the sorting direction to ascending:
       if (!dir) {
-        dir = 'asc';
+        dir = "asc";
       }
       if (!colIdx) {
         colIdx = 0;
@@ -1300,8 +1635,8 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
           shouldSwitch = false;
           /* Get the two elements you want to compare,
           one from current row and one from the next: */
-          x = rows[i].getElementsByTagName('td')[colIdx];
-          y = rows[i + 1].getElementsByTagName('td')[colIdx];
+          x = rows[i].getElementsByTagName("td")[colIdx];
+          y = rows[i + 1].getElementsByTagName("td")[colIdx];
           if (!x || !y) {
             continue;
           }
@@ -1315,15 +1650,15 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
           }
           /* Check if the two rows should switch place,
           based on the direction, asc or desc: */
-          if (dir == 'asc') {
+          if (dir == "asc") {
             // "-" is special character to show emmptiness
-            if (v1 > v2 || (v1 != '-' && v2 == '-') ) {
+            if (v1 > v2 || (v1 != "-" && v2 == "-")) {
               // If so, mark as a switch and break the loop:
               shouldSwitch = true;
               break;
             }
-          } else if (dir == 'desc') {
-            if (v1 < v2 || (v1 == '-' && v2 != '-')) {
+          } else if (dir == "desc") {
+            if (v1 < v2 || (v1 == "-" && v2 != "-")) {
               // If so, mark as a switch and break the loop:
               shouldSwitch = true;
               break;
@@ -1340,8 +1675,8 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
         } else {
           /* If no switching has been done AND the direction is "asc",
           set the direction to "desc" and run the while loop again. */
-          if (switchcount == 0 && dir == 'asc') {
-            dir = 'desc';
+          if (switchcount == 0 && dir == "asc") {
+            dir = "desc";
             switching = true;
           }
         }
@@ -1353,13 +1688,12 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
       var cy = appUtilities.getActiveCy();
       var fileName = this.id.substring(20);
       var subExperiments = $('[id^="experiment-vis-' + filename + '"]');
-      var params = {fileName};
+      var params = { fileName };
       params.self = self;
 
-      if(this.value === "true"){
+      if (this.value === "true") {
         cy.undoRedo().do("fileHide", params);
-      }
-      else{
+      } else {
         cy.undoRedo().do("fileUnhide", params);
       }
       self.render();
@@ -1369,24 +1703,23 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
       var cy = appUtilities.getActiveCy();
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var fileName = evt.target.id.substring(23);
-      var param = {fileName, self, document};
-      cy.undoRedo().do("deleteFile", param); 
+      var param = { fileName, self, document };
+      cy.undoRedo().do("deleteFile", param);
     });
     //change experiment visibilty
     $(document).on("click", '[id^="experiment-vis-"]', function (evt) {
       var expRep = evt.target.id.substring(15);
-      var index = expRep.indexOf('?');
-      var fileName = expRep.substring(0,index);
-      var expName = expRep.substring(index+1);
-      var params = {fileName, expName};
+      var index = expRep.indexOf("?");
+      var fileName = expRep.substring(0, index);
+      var expName = expRep.substring(index + 1);
+      var params = { fileName, expName };
       params.evt = evt;
-      params.self=self;
+      params.self = self;
       var cy = appUtilities.getActiveCy();
       var chiseInstance = appUtilities.getActiveChiseInstance();
-      if(evt.target.value === "true"){
+      if (evt.target.value === "true") {
         cy.undoRedo().do("hideExperimentPanel", params);
-      }
-      else{
+      } else {
         cy.undoRedo().do("unhideExperimentPanel", params);
       }
     });
@@ -1396,128 +1729,159 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var expRep = evt.target.id.substring(18);
       var cy = appUtilities.getActiveCy();
-      var index = expRep.indexOf('?');
-      var fileName = expRep.substring(0,index);
-      var expName = expRep.substring(index+1);
-      var param = {self, fileName, expName, document}
+      var index = expRep.indexOf("?");
+      var fileName = expRep.substring(0, index);
+      var expName = expRep.substring(index + 1);
+      var param = { self, fileName, expName, document };
       cy.undoRedo().do("updateExperimentPanel", param);
     });
   },
 
-  recalculate: function(){
+  recalculate: function () {
     var cy = appUtilities.getActiveCy();
     var chiseInstance = appUtilities.getActiveChiseInstance();
     var self = this;
     var fileNames = chiseInstance.getGroupedDataMap();
     param = self;
-    self.params.experimentDescription.value =  fileNames;
+    self.params.experimentDescription.value = fileNames;
     cy.undoRedo().do("expOnLoad", param);
   },
 
-  loadExperiment: function(params){
+  loadExperiment: function (params) {
     $(".validation-mode-tab").removeClass("active");
-    $('#inspector-map-tab a').tab('show');
-   
-    var panels =  $("#sbgn-inspector-map").find(".panel-heading");
-    for(var i = 0 ; i < panels.length; i++ ){
-      if(!$(panels[i]).hasClass("collapsed") && panels[i].id != "sbgn-inspector-map-properties-experiment-heading"){
+    $("#inspector-map-tab a").tab("show");
+
+    var panels = $("#sbgn-inspector-map").find(".panel-heading");
+    for (var i = 0; i < panels.length; i++) {
+      if (
+        !$(panels[i]).hasClass("collapsed") &&
+        panels[i].id != "sbgn-inspector-map-properties-experiment-heading"
+      ) {
         $(panels[i]).click();
       }
     }
-  
-    if($("#sbgn-inspector-map-properties-experiment-heading").hasClass("collapsed")) {
-      $('#sbgn-inspector-map-properties-experiment-heading').click();
+
+    if (
+      $("#sbgn-inspector-map-properties-experiment-heading").hasClass(
+        "collapsed"
+      )
+    ) {
+      $("#sbgn-inspector-map-properties-experiment-heading").click();
     }
     var cy = appUtilities.getActiveCy();
     var chiseInstance = appUtilities.getActiveChiseInstance();
-    var generalProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+    var generalProperties = appUtilities.getScratch(
+      cy,
+      "currentGeneralProperties"
+    );
     var firstExperiment = generalProperties.experimentDescription;
     var self = this;
     var fileNames = chiseInstance.getGroupedDataMap();
     params.self = self;
-    self.params.experimentDescription.value =  fileNames;
+    self.params.experimentDescription.value = fileNames;
     params.document = document;
     params.value = generalProperties.mapColorScheme;
     params.scheme_type = generalProperties.mapColorSchemeStyle;
     params.self2 = appUtilities.colorSchemeInspectorView;
-   
+
     var ur = cy.undoRedo();
     var actions = [];
     //after the deleting the first experiemnt color schme should come back
-    if(firstExperiment == undefined || Object.keys(firstExperiment).length == 0)
-    {
-      var defaultColorScheme = appUtilities.defaultGeneralProperties.mapColorScheme;
-      var defaultColorSchemeStyle = appUtilities.defaultGeneralProperties.mapColorSchemeStyle;
-      actions = appUtilities.getActionsToApplyMapColorScheme(defaultColorScheme, defaultColorSchemeStyle, appUtilities.colorSchemeInspectorView);
-      actions.push({name: "loadExperiment", param: params});
+    if (
+      firstExperiment == undefined ||
+      Object.keys(firstExperiment).length == 0
+    ) {
+      var defaultColorScheme =
+        appUtilities.defaultGeneralProperties.mapColorScheme;
+      var defaultColorSchemeStyle =
+        appUtilities.defaultGeneralProperties.mapColorSchemeStyle;
+      actions = appUtilities.getActionsToApplyMapColorScheme(
+        defaultColorScheme,
+        defaultColorSchemeStyle,
+        appUtilities.colorSchemeInspectorView
+      );
+      actions.push({ name: "loadExperiment", param: params });
       ur.do("batch", actions);
-    }
-    else{
+    } else {
       cy.undoRedo().do("loadMore", params);
     }
   },
 
-  render: function() {
-   
+  render: function () {
     var cy = appUtilities.getActiveCy();
     var self = this;
     var chiseInstance = appUtilities.getActiveChiseInstance();
-    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+    var currentGeneralProperties = appUtilities.getScratch(
+      cy,
+      "currentGeneralProperties"
+    );
     self.template = _.template($("#map-tab-experiment-template").html());
-    currentGeneralProperties.experimentDescription = chiseInstance.getGroupedDataMap();
+    currentGeneralProperties.experimentDescription =
+      chiseInstance.getGroupedDataMap();
     this.$el.html(this.template(currentGeneralProperties));
-    var refreshButtons = function(param){
+    var refreshButtons = function (param) {
       var document = param.document;
       var visibleDataMapByExp = param.visibleDataMapByExp;
       var visibleFiles = param.visibleFiles;
       var fileDescription = param.fileDescription;
       var allVis = param.allVis;
       var fileTitle = param.fileTitle;
-      for (let i in visibleDataMapByExp)
-      {
-        var index = i.indexOf('?');
-        var fileName = i.substring(0,index);
-        var expName = i.substring(index+1);
-        var buttonName = "experiment-vis-"+ fileName+ "?" + expName;
+      for (let i in visibleDataMapByExp) {
+        var index = i.indexOf("?");
+        var fileName = i.substring(0, index);
+        var expName = i.substring(index + 1);
+        var buttonName = "experiment-vis-" + fileName + "?" + expName;
         var button = document.getElementById(buttonName);
-        if(button != null){
-          if(visibleDataMapByExp[i] == true ||visibleDataMapByExp[i] === true ){
+        if (button != null) {
+          if (
+            visibleDataMapByExp[i] == true ||
+            visibleDataMapByExp[i] === true
+          ) {
             button.value = "true";
             button.style.backgroundColor = "";
-          }
-          else {
+          } else {
             button.value = "false";
             button.style.backgroundColor = "#EAEAEA";
             button.style.color = "#FFFFFF";
           }
         }
       }
-      for (let i in visibleFiles){
-
-        var buttonName = "experiment-file-vis-"+ i;
+      for (let i in visibleFiles) {
+        var buttonName = "experiment-file-vis-" + i;
         var button = document.getElementById(buttonName);
-        
-        if(button != null){
-          if(fileTitle[i] != undefined && fileDescription[i] != undefined)
-          {
-            button.title = button.title + i + " \x0A(" + fileTitle[i].replace(/(\r\n|\n|\r)/gm,"") + ":\x0A" + fileDescription[i].replace(/(\r\n|\n|\r)/gm,"") + ")";
-          }
-          else if(fileDescription[i] != undefined){
-            button.title = button.title + i + " \x0A(" + fileDescription[i].replace(/(\r\n|\n|\r)/gm,"") + ")";
-          }
-          else if(fileTitle[i] != undefined)
-          { 
-            button.title = button.title + i + " \x0A(" + fileTitle[i].replace(/(\r\n|\n|\r)/gm,"") + ")"; 
-          } 
-          else{
+
+        if (button != null) {
+          if (fileTitle[i] != undefined && fileDescription[i] != undefined) {
+            button.title =
+              button.title +
+              i +
+              " \x0A(" +
+              fileTitle[i].replace(/(\r\n|\n|\r)/gm, "") +
+              ":\x0A" +
+              fileDescription[i].replace(/(\r\n|\n|\r)/gm, "") +
+              ")";
+          } else if (fileDescription[i] != undefined) {
+            button.title =
+              button.title +
+              i +
+              " \x0A(" +
+              fileDescription[i].replace(/(\r\n|\n|\r)/gm, "") +
+              ")";
+          } else if (fileTitle[i] != undefined) {
+            button.title =
+              button.title +
+              i +
+              " \x0A(" +
+              fileTitle[i].replace(/(\r\n|\n|\r)/gm, "") +
+              ")";
+          } else {
             button.title = button.title + i;
           }
-       
-          if(visibleFiles[i] == true ||visibleFiles[i] === true ){
+
+          if (visibleFiles[i] == true || visibleFiles[i] === true) {
             button.value = "true";
             button.style.backgroundColor = "";
-          }
-          else {
+          } else {
             button.value = "false";
             button.style.backgroundColor = "#EAEAEA";
             button.style.color = "#FFFFFF";
@@ -1528,12 +1892,11 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
       var buttonName = "experiment-hide-all";
       var button = document.getElementById(buttonName);
 
-      if(button != null){
-        if(allVis){
+      if (button != null) {
+        if (allVis) {
           button.value = "true";
           button.style.backgroundColor = "";
-        }
-        else {
+        } else {
           button.value = "false";
           button.style.backgroundColor = "#EAEAEA";
           button.style.color = "#FFFFFF";
@@ -1542,30 +1905,32 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
 
       buttonName = "experiment-data-hide-all";
       button = document.getElementById(buttonName);
-      if(button != null){
-        if(allVis){
+      if (button != null) {
+        if (allVis) {
           button.value = "true";
-         
-        }
-        else {
-          button.value = "false";        
+        } else {
+          button.value = "false";
         }
       }
-    }
+    };
     var experimentalParams = chiseInstance.getExperimentalData();
     experimentalParams.document = document;
     refreshButtons(experimentalParams);
     //chiseInstance.buttonUpdate(document);
-    if( currentGeneralProperties.experimentDescription.length  > 0 || Object.entries(currentGeneralProperties.experimentDescription).length != 0){
-     //document.getElementById('sbgn-inspector-map-color-scheme').style.visibility = "hidden";
-     document.getElementById('sbgn-inspector-map-color-scheme').style.display = "none";
-    }
-    else{
-    document.getElementById('sbgn-inspector-map-color-scheme').style.display = "";
-    // document.getElementById('sbgn-inspector-map-color-scheme').style.visibility = "initial";
+    if (
+      currentGeneralProperties.experimentDescription.length > 0 ||
+      Object.entries(currentGeneralProperties.experimentDescription).length != 0
+    ) {
+      //document.getElementById('sbgn-inspector-map-color-scheme').style.visibility = "hidden";
+      document.getElementById("sbgn-inspector-map-color-scheme").style.display =
+        "none";
+    } else {
+      document.getElementById("sbgn-inspector-map-color-scheme").style.display =
+        "";
+      // document.getElementById('sbgn-inspector-map-color-scheme').style.visibility = "initial";
     }
     return this;
-  }
+  },
 });
 
 /**
@@ -1612,16 +1977,14 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
   }
 });*/
 
+String.prototype.replaceAll = function (search, replace) {
+  //if replace is not sent, return original string otherwise it will
+  //replace search string with 'undefined'.
+  if (replace === undefined) {
+    return this.toString();
+  }
 
-String.prototype.replaceAll = function(search, replace)
-{
-    //if replace is not sent, return original string otherwise it will
-    //replace search string with 'undefined'.
-    if (replace === undefined) {
-        return this.toString();
-    }
-
-    return this.replace(new RegExp('[' + search + ']', 'g'), replace);
+  return this.replace(new RegExp("[" + search + "]", "g"), replace);
 };
 
 //Global variable used to check which PathwayCommon dialog was open recently
@@ -1634,7 +1997,7 @@ var PCdialog = "";
 var NeighborhoodQueryView = Backbone.View.extend({
   defaultQueryParameters: {
     geneSymbols: "",
-    lengthLimit: 1
+    lengthLimit: 1,
   },
   currentQueryParameters: null,
   initialize: function () {
@@ -1647,689 +2010,899 @@ var NeighborhoodQueryView = Backbone.View.extend({
     this.currentQueryParameters = _.clone(this.defaultQueryParameters);
   },
   render: function () {
-
     var self = this;
     self.template = _.template($("#query-neighborhood-template").html());
     self.template = self.template(self.currentQueryParameters);
     $(self.el).html(self.template);
 
-    $(self.el).modal('show');
+    $(self.el).modal("show");
     PCdialog = "Neighborhood";
 
-    $(document).off("click", "#save-query-neighborhood").on("click", "#save-query-neighborhood", function (evt) {
-
-      // use active chise instance
-      var chiseInstance = appUtilities.getActiveChiseInstance();
+    $(document)
+      .off("click", "#save-query-neighborhood")
+      .on("click", "#save-query-neighborhood", function (evt) {
+        // use active chise instance
+        var chiseInstance = appUtilities.getActiveChiseInstance();
 
-      // use the associated cy instance
-      var cy = chiseInstance.getCy();
+        // use the associated cy instance
+        var cy = chiseInstance.getCy();
 
-      self.currentQueryParameters.geneSymbols = document.getElementById("query-neighborhood-gene-symbols").value;
-      self.currentQueryParameters.lengthLimit = Number(document.getElementById("query-neighborhood-length-limit").value);
+        self.currentQueryParameters.geneSymbols = document.getElementById(
+          "query-neighborhood-gene-symbols"
+        ).value;
+        self.currentQueryParameters.lengthLimit = Number(
+          document.getElementById("query-neighborhood-length-limit").value
+        );
 
-      var geneSymbols = self.currentQueryParameters.geneSymbols.trim();
-      if (geneSymbols.length === 0) {
+        var geneSymbols = self.currentQueryParameters.geneSymbols.trim();
+        if (geneSymbols.length === 0) {
           document.getElementById("query-neighborhood-gene-symbols").focus();
           return;
-      }
-      // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
-      geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
-      if (geneSymbols.length === 0) {
-        $(self.el).modal('toggle');
-        new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-        return;
-      }
-      if (self.currentQueryParameters.lengthLimit > 2) {
-        $(self.el).modal('toggle');
-        new PromptInvalidLengthLimitView({el: '#prompt-invalidLengthLimit-table'}).render();
-        document.getElementById("query-neighborhood-length-limit").focus();
-        return;
-      }
-
-      var queryURL = "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=NEIGHBORHOOD&limit="
-          + self.currentQueryParameters.lengthLimit;
-      var geneSymbolsArray = geneSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" ");
+        }
+        // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
+        geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
+        if (geneSymbols.length === 0) {
+          $(self.el).modal("toggle");
+          new PromptInvalidQueryView({
+            el: "#prompt-invalidQuery-table",
+          }).render();
+          return;
+        }
+        if (self.currentQueryParameters.lengthLimit > 2) {
+          $(self.el).modal("toggle");
+          new PromptInvalidLengthLimitView({
+            el: "#prompt-invalidLengthLimit-table",
+          }).render();
+          document.getElementById("query-neighborhood-length-limit").focus();
+          return;
+        }
 
-      var filename = "";
-      var sources = "";
-      for (var i = 0; i < geneSymbolsArray.length; i++) {
-        var currentGeneSymbol = geneSymbolsArray[i];
-        if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' '
-            || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') {
+        var queryURL =
+          "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=NEIGHBORHOOD&limit=" +
+          self.currentQueryParameters.lengthLimit;
+        var geneSymbolsArray = geneSymbols
+          .replaceAll("\n", " ")
+          .replaceAll("\t", " ")
+          .split(" ");
+
+        var filename = "";
+        var sources = "";
+        for (var i = 0; i < geneSymbolsArray.length; i++) {
+          var currentGeneSymbol = geneSymbolsArray[i];
+          if (
+            currentGeneSymbol.length == 0 ||
+            currentGeneSymbol == " " ||
+            currentGeneSymbol == "\n" ||
+            currentGeneSymbol == "\t"
+          ) {
             continue;
-        }
-        sources = sources + "&source=" + currentGeneSymbol;
+          }
+          sources = sources + "&source=" + currentGeneSymbol;
 
-        if (filename == '') {
+          if (filename == "") {
             filename = currentGeneSymbol;
-        } else {
-            filename = filename + '_' + currentGeneSymbol;
+          } else {
+            filename = filename + "_" + currentGeneSymbol;
+          }
         }
-      }
-      filename = filename + '_NEIGHBORHOOD.nwt';
-      queryURL = queryURL + sources;
-
-      if(cy.nodes().length == 0){
-
-        chiseInstance.startSpinner('neighborhood-spinner');
-        var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
-        var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
-        var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
-        
-        $.ajax({
-          type: 'get',
-          url: "/utilities/testURL",
-          data: {url: queryURL},
-          success: function(data){
-            if (!data.error && data.response.statusCode == 200 && data.response.body) {
-              var xml = $.parseXML(data.response.body);
-              $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
-              currentGeneralProperties.inferNestingOnLoad = false;
-              chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
-              currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
-              chiseInstance.endSpinner('neighborhood-spinner');
-              $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
-            }
-            else {
-              new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-              chiseInstance.endSpinner('neighborhood-spinner');
-            }
-          },
-          error: function(xhr, options, err){
-            new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-            chiseInstance.endSpinner('neighborhood-spinner');
-          }
-        });
-
-        $(self.el).modal('toggle');
-
-      }
-      else{
-
-        new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){
-
-          chiseInstance.startSpinner('neighborhood-spinner');
-          var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
-          var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
-          var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');        
+        filename = filename + "_NEIGHBORHOOD.nwt";
+        queryURL = queryURL + sources;
+
+        if (cy.nodes().length == 0) {
+          chiseInstance.startSpinner("neighborhood-spinner");
+          var currentGeneralProperties = appUtilities.getScratch(
+            cy,
+            "currentGeneralProperties"
+          );
+          var currentInferNestingOnLoad =
+            currentGeneralProperties.inferNestingOnLoad;
+          var currentLayoutProperties = appUtilities.getScratch(
+            cy,
+            "currentLayoutProperties"
+          );
 
           $.ajax({
-            type: 'get',
+            type: "get",
             url: "/utilities/testURL",
-            data: {url: queryURL},
-            success: function(data){
-              if (!data.error && data.response.statusCode == 200 && data.response.body) {
+            data: { url: queryURL },
+            success: function (data) {
+              if (
+                !data.error &&
+                data.response.statusCode == 200 &&
+                data.response.body
+              ) {
                 var xml = $.parseXML(data.response.body);
-                $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
+                $(document).trigger("sbgnvizLoadFile", [filename, cy]);
                 currentGeneralProperties.inferNestingOnLoad = false;
-                chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
-                currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
-                chiseInstance.endSpinner('neighborhood-spinner');
-                $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
-              }
-              else {
-                new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                chiseInstance.endSpinner('neighborhood-spinner');
+                chiseInstance.updateGraph(
+                  chiseInstance.convertSbgnmlToJson(xml),
+                  undefined,
+                  currentLayoutProperties
+                );
+                currentGeneralProperties.inferNestingOnLoad =
+                  currentInferNestingOnLoad;
+                chiseInstance.endSpinner("neighborhood-spinner");
+                $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
+              } else {
+                new PromptInvalidQueryView({
+                  el: "#prompt-invalidQuery-table",
+                }).render();
+                chiseInstance.endSpinner("neighborhood-spinner");
               }
             },
-            error: function(xhr, options, err){
-              new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-              chiseInstance.endSpinner('neighborhood-spinner');
-            }
+            error: function (xhr, options, err) {
+              new PromptInvalidQueryView({
+                el: "#prompt-invalidQuery-table",
+              }).render();
+              chiseInstance.endSpinner("neighborhood-spinner");
+            },
           });
 
-          $(self.el).modal('toggle');
-
-        });
-
-      }
-
-    });
+          $(self.el).modal("toggle");
+        } else {
+          new PromptConfirmationView({
+            el: "#prompt-confirmation-table",
+          }).render(function () {
+            chiseInstance.startSpinner("neighborhood-spinner");
+            var currentGeneralProperties = appUtilities.getScratch(
+              cy,
+              "currentGeneralProperties"
+            );
+            var currentInferNestingOnLoad =
+              currentGeneralProperties.inferNestingOnLoad;
+            var currentLayoutProperties = appUtilities.getScratch(
+              cy,
+              "currentLayoutProperties"
+            );
+
+            $.ajax({
+              type: "get",
+              url: "/utilities/testURL",
+              data: { url: queryURL },
+              success: function (data) {
+                if (
+                  !data.error &&
+                  data.response.statusCode == 200 &&
+                  data.response.body
+                ) {
+                  var xml = $.parseXML(data.response.body);
+                  $(document).trigger("sbgnvizLoadFile", [filename, cy]);
+                  currentGeneralProperties.inferNestingOnLoad = false;
+                  chiseInstance.updateGraph(
+                    chiseInstance.convertSbgnmlToJson(xml),
+                    undefined,
+                    currentLayoutProperties
+                  );
+                  currentGeneralProperties.inferNestingOnLoad =
+                    currentInferNestingOnLoad;
+                  chiseInstance.endSpinner("neighborhood-spinner");
+                  $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
+                } else {
+                  new PromptInvalidQueryView({
+                    el: "#prompt-invalidQuery-table",
+                  }).render();
+                  chiseInstance.endSpinner("neighborhood-spinner");
+                }
+              },
+              error: function (xhr, options, err) {
+                new PromptInvalidQueryView({
+                  el: "#prompt-invalidQuery-table",
+                }).render();
+                chiseInstance.endSpinner("neighborhood-spinner");
+              },
+            });
+
+            $(self.el).modal("toggle");
+          });
+        }
+      });
 
-    $(document).off("click", "#cancel-query-neighborhood").on("click", "#cancel-query-neighborhood", function (evt) {
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#cancel-query-neighborhood")
+      .on("click", "#cancel-query-neighborhood", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
     return this;
-  }
+  },
 });
 
 /**
  * Paths Between Query view for the Sample Application.
  */
 var PathsBetweenQueryView = Backbone.View.extend({
-    defaultQueryParameters: {
-        geneSymbols: "",
-        lengthLimit: 1
-    },
-    currentQueryParameters: null,
-    initialize: function () {
-        var self = this;
-        self.copyProperties();
-        self.template = _.template($("#query-pathsbetween-template").html());
-        self.template = self.template(self.currentQueryParameters);
-    },
-    copyProperties: function () {
-        this.currentQueryParameters = _.clone(this.defaultQueryParameters);
-    },
-    render: function () {
+  defaultQueryParameters: {
+    geneSymbols: "",
+    lengthLimit: 1,
+  },
+  currentQueryParameters: null,
+  initialize: function () {
+    var self = this;
+    self.copyProperties();
+    self.template = _.template($("#query-pathsbetween-template").html());
+    self.template = self.template(self.currentQueryParameters);
+  },
+  copyProperties: function () {
+    this.currentQueryParameters = _.clone(this.defaultQueryParameters);
+  },
+  render: function () {
+    var self = this;
+    self.template = _.template($("#query-pathsbetween-template").html());
+    self.template = self.template(self.currentQueryParameters);
+    $(self.el).html(self.template);
 
-        var self = this;
-        self.template = _.template($("#query-pathsbetween-template").html());
-        self.template = self.template(self.currentQueryParameters);
-        $(self.el).html(self.template);
+    $(self.el).modal("show");
+    PCdialog = "PathsBetween";
 
-        $(self.el).modal('show');
-        PCdialog = "PathsBetween";
+    $(document)
+      .off("click", "#save-query-pathsbetween")
+      .on("click", "#save-query-pathsbetween", function (evt) {
+        // use active chise instance
+        var chiseInstance = appUtilities.getActiveChiseInstance();
 
-        $(document).off("click", "#save-query-pathsbetween").on("click", "#save-query-pathsbetween", function (evt) {
+        // use the associated cy instance
+        var cy = chiseInstance.getCy();
 
-            // use active chise instance
-            var chiseInstance = appUtilities.getActiveChiseInstance();
+        self.currentQueryParameters.geneSymbols = document.getElementById(
+          "query-pathsbetween-gene-symbols"
+        ).value;
+        self.currentQueryParameters.lengthLimit = Number(
+          document.getElementById("query-pathsbetween-length-limit").value
+        );
 
-            // use the associated cy instance
-            var cy = chiseInstance.getCy();
+        var geneSymbols = self.currentQueryParameters.geneSymbols.trim();
+        if (geneSymbols.length === 0) {
+          document.getElementById("query-pathsbetween-gene-symbols").focus();
+          return;
+        }
+        // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
+        geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
+        if (geneSymbols.length === 0) {
+          $(self.el).modal("toggle");
+          new PromptInvalidQueryView({
+            el: "#prompt-invalidQuery-table",
+          }).render();
+          return;
+        }
+        if (self.currentQueryParameters.lengthLimit > 3) {
+          $(self.el).modal("toggle");
+          new PromptInvalidLengthLimitView({
+            el: "#prompt-invalidLengthLimit-table",
+          }).render();
+          document.getElementById("query-pathsbetween-length-limit").focus();
+          return;
+        }
 
-            self.currentQueryParameters.geneSymbols = document.getElementById("query-pathsbetween-gene-symbols").value;
-            self.currentQueryParameters.lengthLimit = Number(document.getElementById("query-pathsbetween-length-limit").value);
+        var queryURL =
+          "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=PATHSBETWEEN&limit=" +
+          self.currentQueryParameters.lengthLimit;
+        var geneSymbolsArray = geneSymbols
+          .replaceAll("\n", " ")
+          .replaceAll("\t", " ")
+          .split(" ");
+
+        var filename = "";
+        var sources = "";
+        for (var i = 0; i < geneSymbolsArray.length; i++) {
+          var currentGeneSymbol = geneSymbolsArray[i];
+          if (
+            currentGeneSymbol.length == 0 ||
+            currentGeneSymbol == " " ||
+            currentGeneSymbol == "\n" ||
+            currentGeneSymbol == "\t"
+          ) {
+            continue;
+          }
+          sources = sources + "&source=" + currentGeneSymbol;
 
-            var geneSymbols = self.currentQueryParameters.geneSymbols.trim();
-            if (geneSymbols.length === 0) {
-                document.getElementById("query-pathsbetween-gene-symbols").focus();
-                return;
-            }
-            // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
-            geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
-            if (geneSymbols.length === 0) {
-                $(self.el).modal('toggle');
-                new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                return;
-            }
-            if (self.currentQueryParameters.lengthLimit > 3) {
-                $(self.el).modal('toggle');
-                new PromptInvalidLengthLimitView({el: '#prompt-invalidLengthLimit-table'}).render();
-                document.getElementById("query-pathsbetween-length-limit").focus();
-                return;
-            }
+          if (filename == "") {
+            filename = currentGeneSymbol;
+          } else {
+            filename = filename + "_" + currentGeneSymbol;
+          }
+        }
+        filename = filename + "_PATHSBETWEEN.nwt";
+        queryURL = queryURL + sources;
+
+        if (cy.nodes().length == 0) {
+          chiseInstance.startSpinner("paths-between-spinner");
+          var currentGeneralProperties = appUtilities.getScratch(
+            cy,
+            "currentGeneralProperties"
+          );
+          var currentInferNestingOnLoad =
+            currentGeneralProperties.inferNestingOnLoad;
+          var currentLayoutProperties = appUtilities.getScratch(
+            cy,
+            "currentLayoutProperties"
+          );
 
-            var queryURL = "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=PATHSBETWEEN&limit="
-                + self.currentQueryParameters.lengthLimit;
-            var geneSymbolsArray = geneSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" ");
-
-            var filename = "";
-            var sources = "";
-            for (var i = 0; i < geneSymbolsArray.length; i++) {
-                var currentGeneSymbol = geneSymbolsArray[i];
-                if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' '
-                    || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') {
-                    continue;
-                }
-                sources = sources + "&source=" + currentGeneSymbol;
+          $.ajax({
+            type: "get",
+            url: "/utilities/testURL",
+            data: { url: queryURL },
+            success: function (data) {
+              if (
+                !data.error &&
+                data.response.statusCode == 200 &&
+                data.response.body
+              ) {
+                var xml = $.parseXML(data.response.body);
+                $(document).trigger("sbgnvizLoadFile", [filename, cy]);
+                currentGeneralProperties.inferNestingOnLoad = false;
+                chiseInstance.updateGraph(
+                  chiseInstance.convertSbgnmlToJson(xml),
+                  undefined,
+                  currentLayoutProperties
+                );
+                currentGeneralProperties.inferNestingOnLoad =
+                  currentInferNestingOnLoad;
+                chiseInstance.endSpinner("paths-between-spinner");
+                $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
+              } else {
+                new PromptInvalidQueryView({
+                  el: "#prompt-invalidQuery-table",
+                }).render();
+                chiseInstance.endSpinner("paths-between-spinner");
+              }
+            },
+            error: function (xhr, options, err) {
+              new PromptInvalidQueryView({
+                el: "#prompt-invalidQuery-table",
+              }).render();
+              chiseInstance.endSpinner("paths-between-spinner");
+            },
+          });
 
-                if (filename == '') {
-                    filename = currentGeneSymbol;
+          $(self.el).modal("toggle");
+        } else {
+          new PromptConfirmationView({
+            el: "#prompt-confirmation-table",
+          }).render(function () {
+            chiseInstance.startSpinner("paths-between-spinner");
+            var currentGeneralProperties = appUtilities.getScratch(
+              cy,
+              "currentGeneralProperties"
+            );
+            var currentInferNestingOnLoad =
+              currentGeneralProperties.inferNestingOnLoad;
+            var currentLayoutProperties = appUtilities.getScratch(
+              cy,
+              "currentLayoutProperties"
+            );
+
+            $.ajax({
+              type: "get",
+              url: "/utilities/testURL",
+              data: { url: queryURL },
+              success: function (data) {
+                if (
+                  !data.error &&
+                  data.response.statusCode == 200 &&
+                  data.response.body
+                ) {
+                  var xml = $.parseXML(data.response.body);
+                  $(document).trigger("sbgnvizLoadFile", [filename, cy]);
+                  currentGeneralProperties.inferNestingOnLoad = false;
+                  chiseInstance.updateGraph(
+                    chiseInstance.convertSbgnmlToJson(xml),
+                    undefined,
+                    currentLayoutProperties
+                  );
+                  currentGeneralProperties.inferNestingOnLoad =
+                    currentInferNestingOnLoad;
+                  chiseInstance.endSpinner("paths-between-spinner");
+                  $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
                 } else {
-                    filename = filename + '_' + currentGeneSymbol;
-                }
-            }
-            filename = filename + '_PATHSBETWEEN.nwt';
-            queryURL = queryURL + sources;
-
-            if(cy.nodes().length == 0){
-
-              chiseInstance.startSpinner('paths-between-spinner');
-              var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
-              var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
-              var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');   
-
-              $.ajax({
-                type: 'get',
-                url: "/utilities/testURL",
-                data: {url: queryURL},
-                success: function(data){
-                  if (!data.error && data.response.statusCode == 200 && data.response.body) {
-                    var xml = $.parseXML(data.response.body);
-                    $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
-                    currentGeneralProperties.inferNestingOnLoad = false;
-                    chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
-                    currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
-                    chiseInstance.endSpinner('paths-between-spinner');
-                    $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
-                  }
-                  else {
-                    new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                    chiseInstance.endSpinner('paths-between-spinner');
-                  }
-                },
-                error: function(xhr, options, err){
-                  new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                  chiseInstance.endSpinner('paths-between-spinner');
+                  new PromptInvalidQueryView({
+                    el: "#prompt-invalidQuery-table",
+                  }).render();
+                  chiseInstance.endSpinner("paths-between-spinner");
                 }
-              });
-
-              $(self.el).modal('toggle');
-
-            }
-            else{
-
-              new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){
-
-                chiseInstance.startSpinner('paths-between-spinner');
-                var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
-                var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
-                var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); 
-
-                $.ajax({
-                  type: 'get',
-                  url: "/utilities/testURL",
-                  data: {url: queryURL},
-                  success: function(data){
-                    if (!data.error && data.response.statusCode == 200 && data.response.body) {
-                      var xml = $.parseXML(data.response.body);
-                      $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
-                      currentGeneralProperties.inferNestingOnLoad = false;
-                      chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
-                      currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
-                      chiseInstance.endSpinner('paths-between-spinner');
-                      $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
-                    }
-                    else {
-                      new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                      chiseInstance.endSpinner('paths-between-spinner');
-                    }
-                  },
-                  error: function(xhr, options, err){
-                    new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                    chiseInstance.endSpinner('paths-between-spinner');
-                  }
-                });
-
-                $(self.el).modal('toggle');
-
-              });
-
-            }
-
-        });
+              },
+              error: function (xhr, options, err) {
+                new PromptInvalidQueryView({
+                  el: "#prompt-invalidQuery-table",
+                }).render();
+                chiseInstance.endSpinner("paths-between-spinner");
+              },
+            });
+
+            $(self.el).modal("toggle");
+          });
+        }
+      });
 
-        $(document).off("click", "#cancel-query-pathsbetween").on("click", "#cancel-query-pathsbetween", function (evt) {
-            $(self.el).modal('toggle');
-        });
+    $(document)
+      .off("click", "#cancel-query-pathsbetween")
+      .on("click", "#cancel-query-pathsbetween", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
-        return this;
-    }
+    return this;
+  },
 });
 
 /**
  * Paths From To Query view for the Sample Application.
  */
 var PathsFromToQueryView = Backbone.View.extend({
-    defaultQueryParameters: {
-        sourceSymbols: "",
-        targetSymbols: "",
-        lengthLimit: 1
-    },
-    currentQueryParameters: null,
-    initialize: function () {
-        var self = this;
-        self.copyProperties();
-        self.template = _.template($("#query-pathsfromto-template").html());
-        self.template = self.template(self.currentQueryParameters);
-    },
-    copyProperties: function () {
-        this.currentQueryParameters = _.clone(this.defaultQueryParameters);
-    },
-    render: function () {
-
-        var self = this;
-        self.template = _.template($("#query-pathsfromto-template").html());
-        self.template = self.template(self.currentQueryParameters);
-        $(self.el).html(self.template);
-
-        $(self.el).modal('show');
-        PCdialog = "PathsFromTo";
-
-        $(document).off("click", "#save-query-pathsfromto").on("click", "#save-query-pathsfromto", function (evt) {
-
-            // use active chise instance
-            var chiseInstance = appUtilities.getActiveChiseInstance();
+  defaultQueryParameters: {
+    sourceSymbols: "",
+    targetSymbols: "",
+    lengthLimit: 1,
+  },
+  currentQueryParameters: null,
+  initialize: function () {
+    var self = this;
+    self.copyProperties();
+    self.template = _.template($("#query-pathsfromto-template").html());
+    self.template = self.template(self.currentQueryParameters);
+  },
+  copyProperties: function () {
+    this.currentQueryParameters = _.clone(this.defaultQueryParameters);
+  },
+  render: function () {
+    var self = this;
+    self.template = _.template($("#query-pathsfromto-template").html());
+    self.template = self.template(self.currentQueryParameters);
+    $(self.el).html(self.template);
 
-            // use the associated cy instance
-            var cy = chiseInstance.getCy();
+    $(self.el).modal("show");
+    PCdialog = "PathsFromTo";
+
+    $(document)
+      .off("click", "#save-query-pathsfromto")
+      .on("click", "#save-query-pathsfromto", function (evt) {
+        // use active chise instance
+        var chiseInstance = appUtilities.getActiveChiseInstance();
+
+        // use the associated cy instance
+        var cy = chiseInstance.getCy();
+
+        self.currentQueryParameters.sourceSymbols = document.getElementById(
+          "query-pathsfromto-source-symbols"
+        ).value;
+        self.currentQueryParameters.targetSymbols = document.getElementById(
+          "query-pathsfromto-target-symbols"
+        ).value;
+        self.currentQueryParameters.lengthLimit = Number(
+          document.getElementById("query-pathsfromto-length-limit").value
+        );
+
+        var sourceSymbols = self.currentQueryParameters.sourceSymbols.trim();
+        if (sourceSymbols.length === 0) {
+          document.getElementById("query-pathsfromto-source-symbols").focus();
+          return;
+        }
+        // sourceSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
+        sourceSymbols = sourceSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
+        if (sourceSymbols.length === 0) {
+          $(self.el).modal("toggle");
+          new PromptInvalidQueryView({
+            el: "#prompt-invalidQuery-table",
+          }).render();
+          return;
+        }
 
-            self.currentQueryParameters.sourceSymbols = document.getElementById("query-pathsfromto-source-symbols").value;
-            self.currentQueryParameters.targetSymbols = document.getElementById("query-pathsfromto-target-symbols").value;
-            self.currentQueryParameters.lengthLimit = Number(document.getElementById("query-pathsfromto-length-limit").value);
+        var targetSymbols = self.currentQueryParameters.targetSymbols.trim();
+        if (targetSymbols.length === 0) {
+          document.getElementById("query-pathsfromto-target-symbols").focus();
+          return;
+        }
+        // targetSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
+        targetSymbols = targetSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
+        if (targetSymbols.length === 0) {
+          $(self.el).modal("toggle");
+          new PromptInvalidQueryView({
+            el: "#prompt-invalidQuery-table",
+          }).render();
+          return;
+        }
 
-            var sourceSymbols = self.currentQueryParameters.sourceSymbols.trim();
-            if (sourceSymbols.length === 0) {
-                document.getElementById("query-pathsfromto-source-symbols").focus();
-                return;
-            }
-            // sourceSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
-            sourceSymbols = sourceSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
-            if (sourceSymbols.length === 0) {
-                $(self.el).modal('toggle');
-                new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                return;
-            }
+        if (self.currentQueryParameters.lengthLimit > 3) {
+          $(self.el).modal("toggle");
+          new PromptInvalidLengthLimitView({
+            el: "#prompt-invalidLengthLimit-table",
+          }).render();
+          document.getElementById("query-pathsfromto-length-limit").focus();
+          return;
+        }
 
-            var targetSymbols = self.currentQueryParameters.targetSymbols.trim();
-            if (targetSymbols.length === 0) {
-                document.getElementById("query-pathsfromto-target-symbols").focus();
-                return;
-            }
-            // targetSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
-            targetSymbols = targetSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
-            if (targetSymbols.length === 0) {
-                $(self.el).modal('toggle');
-                new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                return;
-            }
+        var queryURL =
+          "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=PATHSFROMTO&limit=" +
+          self.currentQueryParameters.lengthLimit;
+        var sourceSymbolsArray = sourceSymbols
+          .replaceAll("\n", " ")
+          .replaceAll("\t", " ")
+          .split(" ");
+        var targetSymbolsArray = targetSymbols
+          .replaceAll("\n", " ")
+          .replaceAll("\t", " ")
+          .split(" ");
+
+        var filename = "";
+        var sources = "";
+        var targets = "";
+        for (var i = 0; i < sourceSymbolsArray.length; i++) {
+          var currentGeneSymbol = sourceSymbolsArray[i];
+          if (
+            currentGeneSymbol.length == 0 ||
+            currentGeneSymbol == " " ||
+            currentGeneSymbol == "\n" ||
+            currentGeneSymbol == "\t"
+          ) {
+            continue;
+          }
+          sources = sources + "&source=" + currentGeneSymbol;
 
-            if (self.currentQueryParameters.lengthLimit > 3) {
-                $(self.el).modal('toggle');
-                new PromptInvalidLengthLimitView({el: '#prompt-invalidLengthLimit-table'}).render();
-                document.getElementById("query-pathsfromto-length-limit").focus();
-                return;
-            }
+          if (filename == "") {
+            filename = currentGeneSymbol;
+          } else {
+            filename = filename + "_" + currentGeneSymbol;
+          }
+        }
+        for (var i = 0; i < targetSymbolsArray.length; i++) {
+          var currentGeneSymbol = targetSymbolsArray[i];
+          if (
+            currentGeneSymbol.length == 0 ||
+            currentGeneSymbol == " " ||
+            currentGeneSymbol == "\n" ||
+            currentGeneSymbol == "\t"
+          ) {
+            continue;
+          }
+          targets = targets + "&target=" + currentGeneSymbol;
 
-            var queryURL = "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=PATHSFROMTO&limit="
-                + self.currentQueryParameters.lengthLimit;
-            var sourceSymbolsArray = sourceSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" ");
-            var targetSymbolsArray = targetSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" ");
-
-            var filename = "";
-            var sources = "";
-            var targets = "";
-            for (var i = 0; i < sourceSymbolsArray.length; i++) {
-                var currentGeneSymbol = sourceSymbolsArray[i];
-                if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' '
-                    || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') {
-                    continue;
-                }
-                sources = sources + "&source=" + currentGeneSymbol;
+          if (filename == "") {
+            filename = currentGeneSymbol;
+          } else {
+            filename = filename + "_" + currentGeneSymbol;
+          }
+        }
+        filename = filename + "_PATHSFROMTO.nwt";
+        queryURL = queryURL + sources + targets;
+
+        if (cy.nodes().length == 0) {
+          chiseInstance.startSpinner("paths-fromto-spinner");
+          var currentGeneralProperties = appUtilities.getScratch(
+            cy,
+            "currentGeneralProperties"
+          );
+          var currentInferNestingOnLoad =
+            currentGeneralProperties.inferNestingOnLoad;
+          var currentLayoutProperties = appUtilities.getScratch(
+            cy,
+            "currentLayoutProperties"
+          );
 
-                if (filename == '') {
-                    filename = currentGeneSymbol;
-                } else {
-                    filename = filename + '_' + currentGeneSymbol;
-                }
-            }
-            for (var i = 0; i < targetSymbolsArray.length; i++) {
-                var currentGeneSymbol = targetSymbolsArray[i];
-                if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' '
-                    || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') {
-                    continue;
-                }
-                targets = targets + "&target=" + currentGeneSymbol;
+          $.ajax({
+            type: "get",
+            url: "/utilities/testURL",
+            data: { url: queryURL },
+            success: function (data) {
+              if (
+                !data.error &&
+                data.response.statusCode == 200 &&
+                data.response.body
+              ) {
+                var xml = $.parseXML(data.response.body);
+                $(document).trigger("sbgnvizLoadFile", [filename, cy]);
+                currentGeneralProperties.inferNestingOnLoad = false;
+                chiseInstance.updateGraph(
+                  chiseInstance.convertSbgnmlToJson(xml),
+                  undefined,
+                  currentLayoutProperties
+                );
+                currentGeneralProperties.inferNestingOnLoad =
+                  currentInferNestingOnLoad;
+                chiseInstance.endSpinner("paths-fromto-spinner");
+                $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
+              } else {
+                new PromptInvalidQueryView({
+                  el: "#prompt-invalidQuery-table",
+                }).render();
+                chiseInstance.endSpinner("paths-fromto-spinner");
+              }
+            },
+            error: function (xhr, options, err) {
+              new PromptInvalidQueryView({
+                el: "#prompt-invalidQuery-table",
+              }).render();
+              chiseInstance.endSpinner("paths-fromto-spinner");
+            },
+          });
 
-                if (filename == '') {
-                    filename = currentGeneSymbol;
+          $(self.el).modal("toggle");
+        } else {
+          new PromptConfirmationView({
+            el: "#prompt-confirmation-table",
+          }).render(function () {
+            chiseInstance.startSpinner("paths-fromto-spinner");
+            var currentGeneralProperties = appUtilities.getScratch(
+              cy,
+              "currentGeneralProperties"
+            );
+            var currentInferNestingOnLoad =
+              currentGeneralProperties.inferNestingOnLoad;
+            var currentLayoutProperties = appUtilities.getScratch(
+              cy,
+              "currentLayoutProperties"
+            );
+
+            $.ajax({
+              type: "get",
+              url: "/utilities/testURL",
+              data: { url: queryURL },
+              success: function (data) {
+                if (
+                  !data.error &&
+                  data.response.statusCode == 200 &&
+                  data.response.body
+                ) {
+                  var xml = $.parseXML(data.response.body);
+                  $(document).trigger("sbgnvizLoadFile", [filename, cy]);
+                  currentGeneralProperties.inferNestingOnLoad = false;
+                  chiseInstance.updateGraph(
+                    chiseInstance.convertSbgnmlToJson(xml),
+                    undefined,
+                    currentLayoutProperties
+                  );
+                  currentGeneralProperties.inferNestingOnLoad =
+                    currentInferNestingOnLoad;
+                  chiseInstance.endSpinner("paths-fromto-spinner");
+                  $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
                 } else {
-                    filename = filename + '_' + currentGeneSymbol;
-                }
-            }
-            filename = filename + '_PATHSFROMTO.nwt';
-            queryURL = queryURL + sources + targets;
-
-            if(cy.nodes().length == 0){
-
-              chiseInstance.startSpinner('paths-fromto-spinner');
-              var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
-              var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
-              var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); 
-
-              $.ajax({
-                type: 'get',
-                url: "/utilities/testURL",
-                data: {url: queryURL},
-                success: function(data){
-                  if (!data.error && data.response.statusCode == 200 && data.response.body) {
-                    var xml = $.parseXML(data.response.body);
-                    $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
-                    currentGeneralProperties.inferNestingOnLoad = false;
-                    chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
-                    currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
-                    chiseInstance.endSpinner('paths-fromto-spinner');
-                    $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
-                  }
-                  else {
-                    new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                    chiseInstance.endSpinner('paths-fromto-spinner');
-                  }
-                },
-                error: function(xhr, options, err){
-                  new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                  chiseInstance.endSpinner('paths-fromto-spinner');
+                  new PromptInvalidQueryView({
+                    el: "#prompt-invalidQuery-table",
+                  }).render();
+                  chiseInstance.endSpinner("paths-fromto-spinner");
                 }
-              });
-
-              $(self.el).modal('toggle');
-
-            }
-            else{
-
-              new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){
-
-                chiseInstance.startSpinner('paths-fromto-spinner');
-                var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
-                var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
-                var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
-
-                $.ajax({
-                  type: 'get',
-                  url: "/utilities/testURL",
-                  data: {url: queryURL},
-                  success: function(data){
-                    if (!data.error && data.response.statusCode == 200 && data.response.body) {
-                      var xml = $.parseXML(data.response.body);
-                      $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
-                      currentGeneralProperties.inferNestingOnLoad = false;
-                      chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
-                      currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
-                      chiseInstance.endSpinner('paths-fromto-spinner');
-                      $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
-                    }
-                    else {
-                      new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                      chiseInstance.endSpinner('paths-fromto-spinner');
-                    }
-                  },
-                  error: function(xhr, options, err){
-                    new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                    chiseInstance.endSpinner('paths-fromto-spinner');
-                  }
-                });
-
-                $(self.el).modal('toggle');
-
-              });
-
-            }
-
-        });
+              },
+              error: function (xhr, options, err) {
+                new PromptInvalidQueryView({
+                  el: "#prompt-invalidQuery-table",
+                }).render();
+                chiseInstance.endSpinner("paths-fromto-spinner");
+              },
+            });
+
+            $(self.el).modal("toggle");
+          });
+        }
+      });
 
-        $(document).off("click", "#cancel-query-pathsfromto").on("click", "#cancel-query-pathsfromto", function (evt) {
-            $(self.el).modal('toggle');
-        });
+    $(document)
+      .off("click", "#cancel-query-pathsfromto")
+      .on("click", "#cancel-query-pathsfromto", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
-        return this;
-    }
+    return this;
+  },
 });
 
 /**
  * Common Stream Query view for the Sample Application.
  */
 var CommonStreamQueryView = Backbone.View.extend({
-    defaultQueryParameters: {
-        geneSymbols: "",
-        lengthLimit: 1
-    },
-    currentQueryParameters: null,
-    initialize: function () {
-        var self = this;
-        self.copyProperties();
-        self.template = _.template($("#query-commonstream-template").html());
-        self.template = self.template(self.currentQueryParameters);
-    },
-    copyProperties: function () {
-        this.currentQueryParameters = _.clone(this.defaultQueryParameters);
-    },
-    render: function () {
-
-        var self = this;
-        self.template = _.template($("#query-commonstream-template").html());
-        self.template = self.template(self.currentQueryParameters);
-        $(self.el).html(self.template);
-
-        $(self.el).modal('show');
-        PCdialog = "CommonStream";
+  defaultQueryParameters: {
+    geneSymbols: "",
+    lengthLimit: 1,
+  },
+  currentQueryParameters: null,
+  initialize: function () {
+    var self = this;
+    self.copyProperties();
+    self.template = _.template($("#query-commonstream-template").html());
+    self.template = self.template(self.currentQueryParameters);
+  },
+  copyProperties: function () {
+    this.currentQueryParameters = _.clone(this.defaultQueryParameters);
+  },
+  render: function () {
+    var self = this;
+    self.template = _.template($("#query-commonstream-template").html());
+    self.template = self.template(self.currentQueryParameters);
+    $(self.el).html(self.template);
 
-        $(document).off("click", "#save-query-commonstream").on("click", "#save-query-commonstream", function (evt) {
+    $(self.el).modal("show");
+    PCdialog = "CommonStream";
 
+    $(document)
+      .off("click", "#save-query-commonstream")
+      .on("click", "#save-query-commonstream", function (evt) {
+        // use active chise instance
+        var chiseInstance = appUtilities.getActiveChiseInstance();
 
+        // use the associated cy instance
+        var cy = chiseInstance.getCy();
 
-            // use active chise instance
-            var chiseInstance = appUtilities.getActiveChiseInstance();
+        self.currentQueryParameters.geneSymbols = document.getElementById(
+          "query-commonstream-gene-symbols"
+        ).value;
+        self.currentQueryParameters.lengthLimit = Number(
+          document.getElementById("query-commonstream-length-limit").value
+        );
 
-            // use the associated cy instance
-            var cy = chiseInstance.getCy();
+        var geneSymbols = self.currentQueryParameters.geneSymbols.trim();
+        if (geneSymbols.length === 0) {
+          document.getElementById("query-commonstream-gene-symbols").focus();
+          return;
+        }
+        // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
+        geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
+        if (geneSymbols.length === 0) {
+          $(self.el).modal("toggle");
+          new PromptInvalidQueryView({
+            el: "#prompt-invalidQuery-table",
+          }).render();
+          return;
+        }
+        if (self.currentQueryParameters.lengthLimit > 3) {
+          $(self.el).modal("toggle");
+          new PromptInvalidLengthLimitView({
+            el: "#prompt-invalidLengthLimit-table",
+          }).render();
+          document.getElementById("query-commonstream-length-limit").focus();
+          return;
+        }
 
-            self.currentQueryParameters.geneSymbols = document.getElementById("query-commonstream-gene-symbols").value;
-            self.currentQueryParameters.lengthLimit = Number(document.getElementById("query-commonstream-length-limit").value);
+        var queryURL =
+          "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=COMMONSTREAM&limit=" +
+          self.currentQueryParameters.lengthLimit;
+        var geneSymbolsArray = geneSymbols
+          .replaceAll("\n", " ")
+          .replaceAll("\t", " ")
+          .split(" ");
+
+        var filename = "";
+        var sources = "";
+        for (var i = 0; i < geneSymbolsArray.length; i++) {
+          var currentGeneSymbol = geneSymbolsArray[i];
+          if (
+            currentGeneSymbol.length == 0 ||
+            currentGeneSymbol == " " ||
+            currentGeneSymbol == "\n" ||
+            currentGeneSymbol == "\t"
+          ) {
+            continue;
+          }
+          sources = sources + "&source=" + currentGeneSymbol;
 
-            var geneSymbols = self.currentQueryParameters.geneSymbols.trim();
-            if (geneSymbols.length === 0) {
-                document.getElementById("query-commonstream-gene-symbols").focus();
-                return;
-            }
-            // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
-            geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
-            if (geneSymbols.length === 0) {
-                $(self.el).modal('toggle');
-                new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                return;
-            }
-            if (self.currentQueryParameters.lengthLimit > 3) {
-                $(self.el).modal('toggle');
-                new PromptInvalidLengthLimitView({el: '#prompt-invalidLengthLimit-table'}).render();
-                document.getElementById("query-commonstream-length-limit").focus();
-                return;
-            }
+          if (filename == "") {
+            filename = currentGeneSymbol;
+          } else {
+            filename = filename + "_" + currentGeneSymbol;
+          }
+        }
+        filename = filename + "_COMMONSTREAM.nwt";
+        queryURL = queryURL + sources;
+
+        if (cy.nodes().length == 0) {
+          chiseInstance.startSpinner("common-stream-spinner");
+          var currentGeneralProperties = appUtilities.getScratch(
+            cy,
+            "currentGeneralProperties"
+          );
+          var currentInferNestingOnLoad =
+            currentGeneralProperties.inferNestingOnLoad;
+          var currentLayoutProperties = appUtilities.getScratch(
+            cy,
+            "currentLayoutProperties"
+          );
 
-            var queryURL = "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=COMMONSTREAM&limit="
-                + self.currentQueryParameters.lengthLimit;
-            var geneSymbolsArray = geneSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" ");
-
-            var filename = "";
-            var sources = "";
-            for (var i = 0; i < geneSymbolsArray.length; i++) {
-                var currentGeneSymbol = geneSymbolsArray[i];
-                if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' '
-                    || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') {
-                    continue;
-                }
-                sources = sources + "&source=" + currentGeneSymbol;
+          $.ajax({
+            type: "get",
+            url: "/utilities/testURL",
+            data: { url: queryURL },
+            success: function (data) {
+              if (
+                !data.error &&
+                data.response.statusCode == 200 &&
+                data.response.body
+              ) {
+                var xml = $.parseXML(data.response.body);
+                $(document).trigger("sbgnvizLoadFile", [filename, cy]);
+                currentGeneralProperties.inferNestingOnLoad = false;
+                chiseInstance.updateGraph(
+                  chiseInstance.convertSbgnmlToJson(xml),
+                  undefined,
+                  currentLayoutProperties
+                );
+                currentGeneralProperties.inferNestingOnLoad =
+                  currentInferNestingOnLoad;
+                chiseInstance.endSpinner("common-stream-spinner");
+                $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
+              } else {
+                new PromptInvalidQueryView({
+                  el: "#prompt-invalidQuery-table",
+                }).render();
+                chiseInstance.endSpinner("common-stream-spinner");
+              }
+            },
+            error: function (xhr, options, err) {
+              new PromptInvalidQueryView({
+                el: "#prompt-invalidQuery-table",
+              }).render();
+              chiseInstance.endSpinner("common-stream-spinner");
+            },
+          });
 
-                if (filename == '') {
-                    filename = currentGeneSymbol;
+          $(self.el).modal("toggle");
+        } else {
+          new PromptConfirmationView({
+            el: "#prompt-confirmation-table",
+          }).render(function () {
+            chiseInstance.startSpinner("common-stream-spinner");
+            var currentGeneralProperties = appUtilities.getScratch(
+              cy,
+              "currentGeneralProperties"
+            );
+            var currentInferNestingOnLoad =
+              currentGeneralProperties.inferNestingOnLoad;
+            var currentLayoutProperties = appUtilities.getScratch(
+              cy,
+              "currentLayoutProperties"
+            );
+
+            $.ajax({
+              type: "get",
+              url: "/utilities/testURL",
+              data: { url: queryURL },
+              success: function (data) {
+                if (
+                  !data.error &&
+                  data.response.statusCode == 200 &&
+                  data.response.body
+                ) {
+                  var xml = $.parseXML(data.response.body);
+                  $(document).trigger("sbgnvizLoadFile", [filename, cy]);
+                  currentGeneralProperties.inferNestingOnLoad = false;
+                  chiseInstance.updateGraph(
+                    chiseInstance.convertSbgnmlToJson(xml),
+                    undefined,
+                    currentLayoutProperties
+                  );
+                  currentGeneralProperties.inferNestingOnLoad =
+                    currentInferNestingOnLoad;
+                  chiseInstance.endSpinner("common-stream-spinner");
+                  $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
                 } else {
-                    filename = filename + '_' + currentGeneSymbol;
+                  new PromptInvalidQueryView({
+                    el: "#prompt-invalidQuery-table",
+                  }).render();
+                  chiseInstance.endSpinner("common-stream-spinner");
                 }
-            }
-            filename = filename + '_COMMONSTREAM.nwt';
-            queryURL = queryURL + sources;
-
-            if(cy.nodes().length == 0){
-
-              chiseInstance.startSpinner('common-stream-spinner');
-              var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
-              var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
-              var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');             
-
-              $.ajax({
-                type: 'get',
-                url: "/utilities/testURL",
-                data: {url: queryURL},
-                success: function(data){
-                  if (!data.error && data.response.statusCode == 200 && data.response.body) {
-                    var xml = $.parseXML(data.response.body);
-                    $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
-                    currentGeneralProperties.inferNestingOnLoad = false;
-                    chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
-                    currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
-                    chiseInstance.endSpinner('common-stream-spinner');
-                    $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
-                  }
-                  else {
-                    new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                    chiseInstance.endSpinner('common-stream-spinner');
-                  }
-                },
-                error: function(xhr, options, err){
-                  new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                  chiseInstance.endSpinner('common-stream-spinner');
-                }
-              });
-
-              $(self.el).modal('toggle');
-
-            }
-            else{
-
-              new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){
-
-                chiseInstance.startSpinner('common-stream-spinner');
-                var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
-                var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
-                var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');                
-
-                $.ajax({
-                  type: 'get',
-                  url: "/utilities/testURL",
-                  data: {url: queryURL},
-                  success: function(data){
-                    if (!data.error && data.response.statusCode == 200 && data.response.body) {
-                      var xml = $.parseXML(data.response.body);
-                      $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
-                      currentGeneralProperties.inferNestingOnLoad = false;
-                      chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
-                      currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
-                      chiseInstance.endSpinner('common-stream-spinner');
-                      $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
-                    }
-                    else {
-                      new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                      chiseInstance.endSpinner('common-stream-spinner');
-                    }
-                  },
-                  error: function(xhr, options, err){
-                    new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
-                    chiseInstance.endSpinner('common-stream-spinner');
-                  }
-                });
-
-                $(self.el).modal('toggle');
-
-              });
-
-            }
-        });
+              },
+              error: function (xhr, options, err) {
+                new PromptInvalidQueryView({
+                  el: "#prompt-invalidQuery-table",
+                }).render();
+                chiseInstance.endSpinner("common-stream-spinner");
+              },
+            });
+
+            $(self.el).modal("toggle");
+          });
+        }
+      });
 
-        $(document).off("click", "#cancel-query-commonstream").on("click", "#cancel-query-commonstream", function (evt) {
-            $(self.el).modal('toggle');
-        });
+    $(document)
+      .off("click", "#cancel-query-commonstream")
+      .on("click", "#cancel-query-commonstream", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
-        return this;
-    }
+    return this;
+  },
 });
 /**
  * Paths By URI Query view for the Sample Application.
  */
 var PathsByURIQueryView = Backbone.View.extend({
   defaultQueryParameters: {
-      URI: ""
+    URI: "",
   },
   currentQueryParameters: null,
   initialize: function () {
@@ -2347,129 +2920,164 @@ var PathsByURIQueryView = Backbone.View.extend({
     self.template = self.template(self.currentQueryParameters);
     $(self.el).html(self.template);
 
-    $(self.el).modal('show');
-
-    $(document).off("click", "#save-query-pathsbyURI").on("click", "#save-query-pathsbyURI", function (evt) {
-
+    $(self.el).modal("show");
 
+    $(document)
+      .off("click", "#save-query-pathsbyURI")
+      .on("click", "#save-query-pathsbyURI", function (evt) {
+        // use the active chise instance
+        var chiseInstance = appUtilities.getActiveChiseInstance();
 
-      // use the active chise instance
-      var chiseInstance = appUtilities.getActiveChiseInstance();
-
-      // use the associated cy instance
-      var cy = chiseInstance.getCy();
+        // use the associated cy instance
+        var cy = chiseInstance.getCy();
 
-      self.currentQueryParameters.URI = document.getElementById("query-pathsbyURI-URI").value;
-      var uri = self.currentQueryParameters.URI.trim();
+        self.currentQueryParameters.URI = document.getElementById(
+          "query-pathsbyURI-URI"
+        ).value;
+        var uri = self.currentQueryParameters.URI.trim();
 
-      if (uri.length === 0) {
+        if (uri.length === 0) {
           document.getElementById("query-pathsbyURI-URI").focus();
           return;
-      }
-      // uri is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
-      uri = uri.replace(/[^a-zA-Z0-9:/.\-\n\t ]/g, "").trim();
-      if (uri.length === 0) {
-          $(self.el).modal('toggle');
-          new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render();
+        }
+        // uri is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
+        uri = uri.replace(/[^a-zA-Z0-9:/.\-\n\t ]/g, "").trim();
+        if (uri.length === 0) {
+          $(self.el).modal("toggle");
+          new PromptInvalidURIView({ el: "#prompt-invalidURI-table" }).render();
           return;
-      }
+        }
 
-      var queryURL = "http://www.pathwaycommons.org/pc2/get?uri="
-          + uri + "&format=SBGN";
+        var queryURL =
+          "http://www.pathwaycommons.org/pc2/get?uri=" + uri + "&format=SBGN";
 
-      var filename = "";
+        var filename = "";
 
-      if (filename == '') {
+        if (filename == "") {
           filename = uri;
-      } else {
-          filename = filename + '_' + uri;
-      }
-
-      filename = filename + '_URI.nwt';
-
-      if(cy.nodes().length == 0){
-
-        chiseInstance.startSpinner('paths-byURI-spinner');
-        var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
-        var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
-        var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');        
-
-        $.ajax({
-          type: 'get',
-          url: "/utilities/testURL",
-          data: {url: queryURL},
-          success: function(data){
-            if (!data.error && data.response.statusCode == 200 && data.response.body) {
-              var xml = $.parseXML(data.response.body);
-              $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
-              currentGeneralProperties.inferNestingOnLoad = false;
-              chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
-              currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
-              chiseInstance.endSpinner('paths-byURI-spinner');
-              $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
-            }
-            else {
-              new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render();
-              chiseInstance.endSpinner('paths-byURI-spinner');
-            }
-          },
-          error: function(xhr, options, err){
-            new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render();
-            chiseInstance.endSpinner('paths-byURI-spinner');
-          }
-        });
-
-        $(self.el).modal('toggle');
-
-      }
-      else{
-
-        new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){
+        } else {
+          filename = filename + "_" + uri;
+        }
 
-          chiseInstance.startSpinner('paths-byURI-spinner');
-          var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
-          var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
-          var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');          
+        filename = filename + "_URI.nwt";
+
+        if (cy.nodes().length == 0) {
+          chiseInstance.startSpinner("paths-byURI-spinner");
+          var currentGeneralProperties = appUtilities.getScratch(
+            cy,
+            "currentGeneralProperties"
+          );
+          var currentInferNestingOnLoad =
+            currentGeneralProperties.inferNestingOnLoad;
+          var currentLayoutProperties = appUtilities.getScratch(
+            cy,
+            "currentLayoutProperties"
+          );
 
           $.ajax({
-            type: 'get',
+            type: "get",
             url: "/utilities/testURL",
-            data: {url: queryURL},
-            success: function(data){
-              if (!data.error && data.response.statusCode == 200 && data.response.body) {
+            data: { url: queryURL },
+            success: function (data) {
+              if (
+                !data.error &&
+                data.response.statusCode == 200 &&
+                data.response.body
+              ) {
                 var xml = $.parseXML(data.response.body);
-                $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
+                $(document).trigger("sbgnvizLoadFile", [filename, cy]);
                 currentGeneralProperties.inferNestingOnLoad = false;
-                chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
-                currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
-                chiseInstance.endSpinner('paths-byURI-spinner');
-                $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
-              }
-              else {
-                new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render();
-                chiseInstance.endSpinner('paths-byURI-spinner');
+                chiseInstance.updateGraph(
+                  chiseInstance.convertSbgnmlToJson(xml),
+                  undefined,
+                  currentLayoutProperties
+                );
+                currentGeneralProperties.inferNestingOnLoad =
+                  currentInferNestingOnLoad;
+                chiseInstance.endSpinner("paths-byURI-spinner");
+                $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
+              } else {
+                new PromptInvalidURIView({
+                  el: "#prompt-invalidURI-table",
+                }).render();
+                chiseInstance.endSpinner("paths-byURI-spinner");
               }
             },
-            error: function(xhr, options, err){
-              new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render();
-              chiseInstance.endSpinner('paths-byURI-spinner');
-            }
+            error: function (xhr, options, err) {
+              new PromptInvalidURIView({
+                el: "#prompt-invalidURI-table",
+              }).render();
+              chiseInstance.endSpinner("paths-byURI-spinner");
+            },
           });
 
-          $(self.el).modal('toggle');
-
-        });
-
-      }
-
-  });
+          $(self.el).modal("toggle");
+        } else {
+          new PromptConfirmationView({
+            el: "#prompt-confirmation-table",
+          }).render(function () {
+            chiseInstance.startSpinner("paths-byURI-spinner");
+            var currentGeneralProperties = appUtilities.getScratch(
+              cy,
+              "currentGeneralProperties"
+            );
+            var currentInferNestingOnLoad =
+              currentGeneralProperties.inferNestingOnLoad;
+            var currentLayoutProperties = appUtilities.getScratch(
+              cy,
+              "currentLayoutProperties"
+            );
+
+            $.ajax({
+              type: "get",
+              url: "/utilities/testURL",
+              data: { url: queryURL },
+              success: function (data) {
+                if (
+                  !data.error &&
+                  data.response.statusCode == 200 &&
+                  data.response.body
+                ) {
+                  var xml = $.parseXML(data.response.body);
+                  $(document).trigger("sbgnvizLoadFile", [filename, cy]);
+                  currentGeneralProperties.inferNestingOnLoad = false;
+                  chiseInstance.updateGraph(
+                    chiseInstance.convertSbgnmlToJson(xml),
+                    undefined,
+                    currentLayoutProperties
+                  );
+                  currentGeneralProperties.inferNestingOnLoad =
+                    currentInferNestingOnLoad;
+                  chiseInstance.endSpinner("paths-byURI-spinner");
+                  $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
+                } else {
+                  new PromptInvalidURIView({
+                    el: "#prompt-invalidURI-table",
+                  }).render();
+                  chiseInstance.endSpinner("paths-byURI-spinner");
+                }
+              },
+              error: function (xhr, options, err) {
+                new PromptInvalidURIView({
+                  el: "#prompt-invalidURI-table",
+                }).render();
+                chiseInstance.endSpinner("paths-byURI-spinner");
+              },
+            });
+
+            $(self.el).modal("toggle");
+          });
+        }
+      });
 
-    $(document).off("click", "#cancel-query-pathsbyURI").on("click", "#cancel-query-pathsbyURI", function (evt) {
-        $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#cancel-query-pathsbyURI")
+      .on("click", "#cancel-query-pathsbyURI", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
     return this;
-  }
+  },
 });
 
 /*
@@ -2480,7 +3088,6 @@ var PathsByURIQueryView = Backbone.View.extend({
   So this PromptSaveView isn't used for now, replaced by PromptConfirmationView.
 */
 var PromptSaveView = Backbone.View.extend({
-
   initialize: function () {
     var self = this;
     self.template = _.template($("#prompt-save-template").html());
@@ -2490,25 +3097,31 @@ var PromptSaveView = Backbone.View.extend({
     self.template = _.template($("#prompt-save-template").html());
     $(self.el).html(self.template);
 
-    $(self.el).modal('show');
+    $(self.el).modal("show");
 
-    $(document).off("click", "#prompt-save-accept").on("click", "#prompt-save-accept", function (evt) {
-      $("#save-as-sbgnml").trigger('click');
-      afterFunction();
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#prompt-save-accept")
+      .on("click", "#prompt-save-accept", function (evt) {
+        $("#save-as-sbgnml").trigger("click");
+        afterFunction();
+        $(self.el).modal("toggle");
+      });
 
-    $(document).off("click", "#prompt-save-reject").on("click", "#prompt-save-reject", function (evt) {
-      afterFunction();
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#prompt-save-reject")
+      .on("click", "#prompt-save-reject", function (evt) {
+        afterFunction();
+        $(self.el).modal("toggle");
+      });
 
-    $(document).off("click", "#prompt-save-cancel").on("click", "#prompt-save-cancel", function (evt) {
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#prompt-save-cancel")
+      .on("click", "#prompt-save-cancel", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
     return this;
-  }
+  },
 });
 
 /*
@@ -2529,132 +3142,190 @@ var FileSaveView = Backbone.View.extend({
     self.template = _.template($("#file-save-template").html());
 
     $(self.el).html(self.template);
-    $(self.el).modal('show');
-
-    $("#file-save-table").keyup(function(e){
-      if (e.which == 13 && $(self.el).data('bs.modal').isShown && !$("#file-save-accept").is(":focus") && !$("#file-save-cancel").is(":focus")){
+    $(self.el).modal("show");
+
+    $("#file-save-table").keyup(function (e) {
+      if (
+        e.which == 13 &&
+        $(self.el).data("bs.modal").isShown &&
+        !$("#file-save-accept").is(":focus") &&
+        !$("#file-save-cancel").is(":focus")
+      ) {
         $("#file-save-accept").click();
       }
     });
 
-    var filename = document.getElementById('file-name').innerHTML;
+    var filename = document.getElementById("file-name").innerHTML;
     var fExt;
     switch (fileformat) {
-      case 'nwt':
-        fExt = 'nwt';
+      case "nwt":
+        fExt = "nwt";
+        break;
+      case "sbgn":
+        fExt = "sbgn";
+        break;
+      case "sbml":
+        fExt = "sbml";
+        break;
+      case "gpml":
+        fExt = "gpml";
         break;
-      case 'sbgn':
-        fExt = 'sbgn'
+      case "sif":
+        fExt = "sif";
         break;
-      case 'sbml':
-        fExt = 'sbml'
+      case "sifLayout":
+        fExt = "txt";
         break;
-      case 'celldesigner':
+      case "png":
+        fExt = "png";
+        break;
+      case "jpg":
+        fExt = "jpg";
+        break;
+      case "svg":
+        fExt = "svg";
+        break;
+      case "celldesigner":
       default:
-        fExt = 'xml'
+        fExt = "xml";
         break;
     }
 
-    filename = filename.substring(0, filename.lastIndexOf('.')).concat(".").concat(fExt);
+    filename = filename
+      .substring(0, filename.lastIndexOf("."))
+      .concat(".")
+      .concat(fExt);
     $("#file-save-filename").val(filename);
 
-    $(document).off("click", "#file-save-accept").on("click", "#file-save-accept", function (evt) {
-
-      // use the active chise instance
-      var chiseInstance = appUtilities.getActiveChiseInstance();
-      
-      // use the assocated cy instance
-      var cy = chiseInstance.getCy();
-      cy.elements().unselect();
-      // get current general properties for cy
-      var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
-
-      filename = $("#file-save-filename").val();
-      appUtilities.setFileContent(filename);
+    $(document)
+      .off("click", "#file-save-accept")
+      .on("click", "#file-save-accept", function (evt) {
+        // use the active chise instance
+        var chiseInstance = appUtilities.getActiveChiseInstance();
+
+        // use the assocated cy instance
+        var cy = chiseInstance.getCy();
+        cy.elements().unselect();
+        // get current general properties for cy
+        var currentGeneralProperties = appUtilities.getScratch(
+          cy,
+          "currentGeneralProperties"
+        );
+
+        filename = $("#file-save-filename").val();
+        appUtilities.setFileContent(filename);
+
+        if (fileformat === "sbgn" || fileformat === "nwt") {
+          var renderInfo;
+          var properties = jquery.extend(true, {}, currentGeneralProperties);
+          delete properties.mapType; // already stored in sbgn file, no need to store in extension as property
+
+          var saveAsFcn = chiseInstance.saveAsNwt;
+          if (fileformat === "sbgn") {
+            saveAsFcn = chiseInstance.saveAsSbgnml;
+          }
 
-      if(fileformat === "sbgn" || fileformat === "nwt") {
-        var renderInfo;
-        var properties = jquery.extend(true, {}, currentGeneralProperties);
-        delete properties.mapType; // already stored in sbgn file, no need to store in extension as property
+          var nodes, edges;
 
-        var saveAsFcn = chiseInstance.saveAsNwt;
-        if ( fileformat === "sbgn" ) {
-          saveAsFcn = chiseInstance.saveAsSbgnml;
-        }
-
-        var nodes, edges;
+          if (fileformat === "sbgn") {
+            if (chiseInstance.elementUtilities.mapType === "SIF") {
+              properties.mapType = "Unknown";
+            }
 
-        if ( fileformat === "sbgn" ) {
-          if (chiseInstance.elementUtilities.mapType === 'SIF') {
-            properties.mapType = 'Unknown';
+            nodes = cy.nodes().filter(function (node) {
+              return !chiseInstance.elementUtilities.isSIFNode(node);
+            });
+
+            edges = cy.edges().filter(function (edge) {
+              return (
+                !chiseInstance.elementUtilities.isSIFEdge(edge) &&
+                !chiseInstance.elementUtilities.isSIFNode(
+                  edge.data("source")
+                ) &&
+                !chiseInstance.elementUtilities.isSIFNode(edge.data("target"))
+              );
+            });
+          } else if (
+            chiseInstance.elementUtilities.mapType === "SIF" &&
+            properties.enableSIFTopologyGrouping
+          ) {
+            // get topologyGrouping instance for cy
+            var topologyGrouping = chiseInstance.sifTopologyGrouping;
+            var compoundGroups = topologyGrouping.getGroupCompounds();
+            var metaEdges = topologyGrouping.getMetaEdges();
+
+            nodes = cy.nodes().not(compoundGroups);
+            edges = cy.edges().not(metaEdges);
+
+            metaEdges.forEach(function (edge) {
+              edges = edges.union(edge.data("tg-to-restore"));
+            });
           }
 
-          nodes = cy.nodes().filter( function( node ) {
-            return !chiseInstance.elementUtilities.isSIFNode( node );
-          } );
+          renderInfo = appUtilities.getAllStyles(cy, nodes, edges);
 
-          edges = cy.edges().filter( function( edge ) {
-            return !chiseInstance.elementUtilities.isSIFEdge( edge )
-              && !chiseInstance.elementUtilities.isSIFNode( edge.data('source') )
-              && !chiseInstance.elementUtilities.isSIFNode( edge.data('target') );
-          } );
-        }
-        else if ( chiseInstance.elementUtilities.mapType === 'SIF' && properties.enableSIFTopologyGrouping ) {
-          // get topologyGrouping instance for cy
-          var topologyGrouping = chiseInstance.sifTopologyGrouping;
-          var compoundGroups = topologyGrouping.getGroupCompounds();
-          var metaEdges = topologyGrouping.getMetaEdges();
-
-          nodes = cy.nodes().not( compoundGroups );
-          edges = cy.edges().not( metaEdges );
-
-          metaEdges.forEach( function( edge ) {
-            edges = edges.union( edge.data('tg-to-restore') );
-          } );
+          // Exclude extensions if the version is plain
+          if (version === "plain" || version === "plain3") {
+            saveAsFcn(filename, version, undefined, undefined, nodes, edges);
+          } else {
+            saveAsFcn(filename, version, renderInfo, properties, nodes, edges);
+          }
+        } else if (fileformat === "celldesigner") {
+          chiseInstance.saveAsCellDesigner(filename, function () {
+            var promptFileConversionErrorView =
+              new PromptFileConversionErrorView({
+                el: "#prompt-fileConversionError-table",
+              });
+            promptFileConversionErrorView.render();
+            document.getElementById("file-conversion-error-message").innerText =
+              "Conversion service is not available!";
+          });
+        } else if (fileformat === "sbml") {
+          chiseInstance.saveAsSbml(filename, function (data, errorMessage) {
+            var promptSbmlConversionErrorView =
+              new PromptSbmlConversionErrorView({
+                el: "#prompt-sbmlConversionError-table",
+              });
+            promptSbmlConversionErrorView.render(data, errorMessage);
+            //document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!";
+          });
+        } else if (fileformat === "gpml") {
+          chiseInstance.saveAsGpml(filename, function (data, errorMessage) {
+            var promptSbmlConversionErrorView =
+              new PromptSbmlConversionErrorView({
+                el: "#prompt-sbmlConversionError-table",
+              });
+            promptSbmlConversionErrorView.render(data, errorMessage);
+            //document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!";
+          });
+        } else if (fileformat === "sif") {
+          chiseInstance.saveAsPlainSif(filename, true);
+        } else if (fileformat === "sifLayout") {
+          chiseInstance.exportLayoutData(filename, true);
+        } else if (fileformat === "png") {
+          chiseInstance.saveAsPng(filename);
+        } else if (fileformat === "jpg") {
+          chiseInstance.saveAsJpg(filename);
+        } else if (fileformat === "svg") {
+          chiseInstance.saveAsSvg(filename);
+        } else {
+          // invalid file format provided
+          console.error(
+            "FileSaveView received unsupported file format: " + fileformat
+          );
         }
 
-        renderInfo = appUtilities.getAllStyles(cy, nodes, edges);
-
-        // Exclude extensions if the version is plain
-        if (version === "plain" || version === "plain3") {
-          saveAsFcn(filename, version, undefined, undefined, nodes, edges);
-        }
-        else {
-          saveAsFcn(filename, version, renderInfo, properties, nodes, edges);
-        }
-      } 
-      else if(fileformat === "celldesigner") {
-       
-        chiseInstance.saveAsCellDesigner(filename, function(){
-          var promptFileConversionErrorView  = new PromptFileConversionErrorView({el: '#prompt-fileConversionError-table'});
-          promptFileConversionErrorView.render();             
-          document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!";              
-        });
-       
-      }
-      else if(fileformat === "sbml")
-      {
-        chiseInstance.saveAsSbml(filename, function(data,errorMessage){
-        
-          var promptSbmlConversionErrorView  = new PromptSbmlConversionErrorView({el: '#prompt-sbmlConversionError-table'});
-          promptSbmlConversionErrorView.render(data,errorMessage);             
-          //document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!";              
-        });
-     
-      }
-      else { // invalid file format provided
-        console.error("FileSaveView received unsupported file format: "+fileformat);
-      }
-
-      $(self.el).modal('toggle');
-    });
+        $(self.el).modal("toggle");
+      });
 
-    $(document).off("click", "#file-save-cancel").on("click", "#file-save-cancel", function (evt) {
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#file-save-cancel")
+      .on("click", "#file-save-cancel", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
     return this;
-  }
+  },
 });
 
 /*
@@ -2665,353 +3336,553 @@ var SaveUserPreferencesView = Backbone.View.extend({
     var self = this;
     self.template = _.template($("#save-user-preferences-template").html());
   },
-  
+
   render: function () {
     var self = this;
     self.template = _.template($("#save-user-preferences-template").html());
-    var param ={};
+    var param = {};
     var stagedObjects = [];
-    if (typeof appUtilities.stagedElementStyles !== 'undefined') {
-      appUtilities.stagedElementStyles.forEach(function(item, index){
-        stagedObjects.push(item["element"]); 
+    if (typeof appUtilities.stagedElementStyles !== "undefined") {
+      appUtilities.stagedElementStyles.forEach(function (item, index) {
+        stagedObjects.push(item["element"]);
       });
-    }    
+    }
     param.stagedObjects = stagedObjects;
     self.template = self.template(param);
     $(self.el).html(self.template);
-    $(self.el).modal('show');
-
-    $("#user-preferences-save-table").keyup(function(e){
-      if (e.which == 13 && $(self.el).data('bs.modal').isShown && !$("#save-user-preferences-accept").is(":focus") && !$("#save-user-preferences-cancel").is(":focus")){
+    $(self.el).modal("show");
+
+    $("#user-preferences-save-table").keyup(function (e) {
+      if (
+        e.which == 13 &&
+        $(self.el).data("bs.modal").isShown &&
+        !$("#save-user-preferences-accept").is(":focus") &&
+        !$("#save-user-preferences-cancel").is(":focus")
+      ) {
         $("#save-user-preferences-accept").click();
       }
     });
 
-    var filename = document.getElementById('file-name').innerHTML; 
-    if(filename.lastIndexOf('.') != -1){
-      filename = filename.substring(0, filename.lastIndexOf('.'));    
-    }    
+    var filename = document.getElementById("file-name").innerHTML;
+    if (filename.lastIndexOf(".") != -1) {
+      filename = filename.substring(0, filename.lastIndexOf("."));
+    }
     filename = filename.concat(".newtp");
 
     $("#save-user-preferences-filename").val(filename);
-    $("#save-user-prefrences-object-check").off('change').on("change", function(){
-      if(document.getElementById("save-user-prefrences-object-check").checked){
+    $("#save-user-prefrences-object-check")
+      .off("change")
+      .on("change", function () {
+        if (
+          document.getElementById("save-user-prefrences-object-check").checked
+        ) {
           $(".save-preferences-object-styles").prop("checked", true);
-          $(".save-preferences-object-styles").attr('disabled','disabled');
-      }else{
-        $(".save-preferences-object-styles").prop("checked", false);
-   
-        $(".save-preferences-object-styles").removeAttr('disabled');
-      }
-
+          $(".save-preferences-object-styles").attr("disabled", "disabled");
+        } else {
+          $(".save-preferences-object-styles").prop("checked", false);
 
-    });
+          $(".save-preferences-object-styles").removeAttr("disabled");
+        }
+      });
 
-    $(document).off("click", "#save-user-preferences-accept").on("click", "#save-user-preferences-accept", function (evt) {
+    $(document)
+      .off("click", "#save-user-preferences-accept")
+      .on("click", "#save-user-preferences-accept", function (evt) {
+        // use active chise instance
+        var chiseInstance = appUtilities.getActiveChiseInstance();
+
+        // use the associated cy instance
+        var cy = appUtilities.getActiveCy();
+        var preferences = {};
+        //get grid properties
+        if (document.getElementById("user-prefrences-grid-check").checked) {
+          var currentGridProperties = appUtilities.getScratch(
+            cy,
+            "currentGridProperties"
+          );
+          preferences.currentGridProperties = currentGridProperties;
+        }
 
-       // use active chise instance
-      var chiseInstance = appUtilities.getActiveChiseInstance();
+        // get currentGeneralProperties for cy
+        if (document.getElementById("user-prefrences-map-check").checked) {
+          preferences.currentGeneralProperties = {};
+          var currentGeneralProperties = appUtilities.getScratch(
+            cy,
+            "currentGeneralProperties"
+          );
+
+          Object.keys(currentGeneralProperties).forEach(function (key, index) {
+            if (
+              currentGeneralProperties[key] !==
+              appUtilities.defaultGeneralProperties[key]
+            ) {
+              preferences.currentGeneralProperties[key] =
+                currentGeneralProperties[key];
+            }
+          });
 
-      // use the associated cy instance
-      var cy = appUtilities.getActiveCy();
-      var preferences = {};
-      //get grid properties
-      if(document.getElementById("user-prefrences-grid-check").checked){
-        var currentGridProperties = appUtilities.getScratch(cy, 'currentGridProperties');        
-        preferences.currentGridProperties = currentGridProperties;
-      }
+          delete preferences.currentGeneralProperties.mapName;
+          delete preferences.currentGeneralProperties.mapDescription;
+        }
 
-      // get currentGeneralProperties for cy
-      if(document.getElementById("user-prefrences-map-check").checked){
-        preferences.currentGeneralProperties = {}
-        var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
-      
-        Object.keys(currentGeneralProperties).forEach(function(key,index) {
-          if(currentGeneralProperties[key] !== appUtilities.defaultGeneralProperties[key]){
-            preferences.currentGeneralProperties[key] = currentGeneralProperties[key];
-          }          
-      });
+        if (document.getElementById("user-prefrences-layout-check").checked) {
+          preferences.currentLayoutProperties = {};
+          var currentLayoutProperties = appUtilities.getScratch(
+            cy,
+            "currentLayoutProperties"
+          );
 
-      delete preferences.currentGeneralProperties.mapName;
-      delete preferences.currentGeneralProperties.mapDescription;
-      }
+          Object.keys(currentLayoutProperties).forEach(function (key, index) {
+            preferences.currentLayoutProperties[key] =
+              currentLayoutProperties[key];
+          });
+        }
 
-      if(document.getElementById("user-prefrences-layout-check").checked){
-        preferences.currentLayoutProperties = {}
-        var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
-       
-        Object.keys(currentLayoutProperties).forEach(function(key,index) {
-         
-            preferences.currentLayoutProperties[key] = currentLayoutProperties[key];
-                  
-      });
-       
-   
-      }
+        preferences.elementsStyles = [];
+        if (typeof appUtilities.stagedElementStyles !== "undefined") {
+          appUtilities.stagedElementStyles.forEach(function (element) {
+            if (
+              document.getElementById(
+                "user-prefrences-object-" + element["element"] + "-check"
+              ).checked
+            ) {
+              preferences.elementsStyles.push(element);
+            }
+          });
+        }
 
-      preferences.elementsStyles = [];
-      if (typeof appUtilities.stagedElementStyles !== 'undefined') {
-        
-        appUtilities.stagedElementStyles.forEach(function(element){
-          if(document.getElementById("user-prefrences-object-"+element['element']+"-check").checked){
-            preferences.elementsStyles.push(element);
-          }        
+        var blob = new Blob([JSON.stringify(preferences, null, 2)], {
+          type: "application/json",
         });
-      }     
-     
-      var blob = new Blob([JSON.stringify(preferences, null, 2)], {type: "application/json"});
-      filename = $("#save-user-preferences-filename").val(); 
-      FileSaver.saveAs(blob, filename);    
-      $(self.el).modal('toggle');
-    });
+        filename = $("#save-user-preferences-filename").val();
+        FileSaver.saveAs(blob, filename);
+        $(self.el).modal("toggle");
+      });
 
-    $(document).off("click", "#save-user-preferences-cancel").on("click", "#save-user-preferences-cancel", function (evt) {
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#save-user-preferences-cancel")
+      .on("click", "#save-user-preferences-cancel", function (evt) {
+        $(self.el).modal("toggle");
+      });
     return this;
-  }
+  },
 });
 
 var LoadUserPreferencesView = Backbone.View.extend({
   initialize: function () {
     var self = this;
     self.template = _.template($("#load-user-preferences-template").html());
-  },  
+  },
   render: function (param) {
     var self = this;
-    self.template = _.template($("#load-user-preferences-template").html());   
+    self.template = _.template($("#load-user-preferences-template").html());
     self.template = self.template(param);
     $(self.el).html(self.template);
-    $(self.el).modal('show');
-
-    $("#user-preferences-load-table").keyup(function(e){
-      if (e.which == 13 && $(self.el).data('bs.modal').isShown && !$("#load-user-preferences-accept").is(":focus") && !$("#load-user-preferences-cancel").is(":focus")){
+    $(self.el).modal("show");
+
+    $("#user-preferences-load-table").keyup(function (e) {
+      if (
+        e.which == 13 &&
+        $(self.el).data("bs.modal").isShown &&
+        !$("#load-user-preferences-accept").is(":focus") &&
+        !$("#load-user-preferences-cancel").is(":focus")
+      ) {
         $("#load-user-preferences-accept").click();
       }
-    });   
-    $("#load-user-prefrences-object-check").off('change').on("change", function(){
-      if(document.getElementById("load-user-prefrences-object-check").checked){
-          $(".load-preferences-object-styles").prop("checked", true);
-          $(".load-preferences-object-styles").attr('disabled','disabled');
-      }else{
-        $(".load-preferences-object-styles").prop("checked", false);
-   
-        $(".load-preferences-object-styles").removeAttr('disabled');
-      }
     });
-    $(document).off("click", "#load-user-preferences-accept").on("click", "#load-user-preferences-accept", function (evt) {
-      var preferences = appUtilities.loadedUserPreferences;
-      var cy = appUtilities.getActiveCy();
-      var chiseInstance = appUtilities.getActiveChiseInstance();
+    $("#load-user-prefrences-object-check")
+      .off("change")
+      .on("change", function () {
+        if (
+          document.getElementById("load-user-prefrences-object-check").checked
+        ) {
+          $(".load-preferences-object-styles").prop("checked", true);
+          $(".load-preferences-object-styles").attr("disabled", "disabled");
+        } else {
+          $(".load-preferences-object-styles").prop("checked", false);
 
-      //apply grid properties if check
-      if(document.getElementById("load-user-prefrences-grid-check").checked){
-        if(typeof preferences.currentGridProperties !== 'undefined'){
-          var currentGridProperties = appUtilities.getScratch(cy, 'currentGridProperties');    
-          $.extend( currentGridProperties, preferences.currentGridProperties);         
-          appUtilities.setScratch(cy, currentGridProperties, 'currentGridProperties');    
-
-          cy.gridGuide({
-            drawGrid: currentGridProperties.showGrid,
-            gridColor: currentGridProperties.gridColor,
-            snapToGridOnRelease: currentGridProperties.snapToGridOnRelease,
-            snapToGridDuringDrag: currentGridProperties.snapToGridDuringDrag,
-            snapToAlignmentLocationOnRelease: currentGridProperties.snapToAlignmentLocationOnRelease,
-            snapToAlignmentLocationDuringDrag: currentGridProperties.snapToAlignmentLocationDuringDrag,
-            gridSpacing: currentGridProperties.gridSize,
-            resize: currentGridProperties.autoResizeNodes,
-            geometricGuideline: currentGridProperties.showGeometricGuidelines,
-            distributionGuidelines: currentGridProperties.showDistributionGuidelines,
-            initPosAlignment: currentGridProperties.showInitPosAlignment,
-            guidelinesTolerance: currentGridProperties.guidelineTolerance,
-            guidelinesStyle: {
-              initPosAlignmentLine: currentGridProperties.initPosAlignmentLine,
-              lineDash: currentGridProperties.lineDash,
-              horizontalDistLine: currentGridProperties.horizontalDistLine,
-              verticalDistLine: currentGridProperties.verticalDistLine,
-              strokeStyle: currentGridProperties.guidelineColor,
-              horizontalDistColor: currentGridProperties.horizontalGuidelineColor,
-              verticalDistColor: currentGridProperties.verticalGuidelineColor,
-              initPosAlignmentColor: currentGridProperties.initPosAlignmentColor,
-              geometricGuidelineRange: currentGridProperties.geometricAlignmentRange,
-              range: currentGridProperties.distributionAlignmentRange
-            }
-          });         
+          $(".load-preferences-object-styles").removeAttr("disabled");
         }
-      }           
-      //apply layout properties if checked by user
-      if(document.getElementById("load-user-prefrences-layout-check").checked){
-        if(typeof preferences.currentLayoutProperties !== 'undefined'){
-          var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');    
-          $.extend( currentLayoutProperties, preferences.currentLayoutProperties);         
-          appUtilities.setScratch(cy, currentLayoutProperties, 'currentLayoutProperties');    
-          $(document).trigger('saveLayout', cy);
+      });
+    $(document)
+      .off("click", "#load-user-preferences-accept")
+      .on("click", "#load-user-preferences-accept", function (evt) {
+        var preferences = appUtilities.loadedUserPreferences;
+        var cy = appUtilities.getActiveCy();
+        var chiseInstance = appUtilities.getActiveChiseInstance();
+
+        //apply grid properties if check
+        if (
+          document.getElementById("load-user-prefrences-grid-check").checked
+        ) {
+          if (typeof preferences.currentGridProperties !== "undefined") {
+            var currentGridProperties = appUtilities.getScratch(
+              cy,
+              "currentGridProperties"
+            );
+            $.extend(currentGridProperties, preferences.currentGridProperties);
+            appUtilities.setScratch(
+              cy,
+              currentGridProperties,
+              "currentGridProperties"
+            );
+
+            cy.gridGuide({
+              drawGrid: currentGridProperties.showGrid,
+              gridColor: currentGridProperties.gridColor,
+              snapToGridOnRelease: currentGridProperties.snapToGridOnRelease,
+              snapToGridDuringDrag: currentGridProperties.snapToGridDuringDrag,
+              snapToAlignmentLocationOnRelease:
+                currentGridProperties.snapToAlignmentLocationOnRelease,
+              snapToAlignmentLocationDuringDrag:
+                currentGridProperties.snapToAlignmentLocationDuringDrag,
+              gridSpacing: currentGridProperties.gridSize,
+              resize: currentGridProperties.autoResizeNodes,
+              geometricGuideline: currentGridProperties.showGeometricGuidelines,
+              distributionGuidelines:
+                currentGridProperties.showDistributionGuidelines,
+              initPosAlignment: currentGridProperties.showInitPosAlignment,
+              guidelinesTolerance: currentGridProperties.guidelineTolerance,
+              guidelinesStyle: {
+                initPosAlignmentLine:
+                  currentGridProperties.initPosAlignmentLine,
+                lineDash: currentGridProperties.lineDash,
+                horizontalDistLine: currentGridProperties.horizontalDistLine,
+                verticalDistLine: currentGridProperties.verticalDistLine,
+                strokeStyle: currentGridProperties.guidelineColor,
+                horizontalDistColor:
+                  currentGridProperties.horizontalGuidelineColor,
+                verticalDistColor: currentGridProperties.verticalGuidelineColor,
+                initPosAlignmentColor:
+                  currentGridProperties.initPosAlignmentColor,
+                geometricGuidelineRange:
+                  currentGridProperties.geometricAlignmentRange,
+                range: currentGridProperties.distributionAlignmentRange,
+              },
+            });
+          }
         }
-      }      
-      //apply map properties if checked by user
-      if(document.getElementById("load-user-prefrences-map-check").checked){
-        if(typeof preferences.currentGeneralProperties !== 'undefined'){
-          var ur = cy.undoRedo();
-          var actions = [];  
-
-          Object.keys( mapTabGeneralPanel.params).forEach(function(key,index) {
-            if(typeof preferences.currentGeneralProperties[key] !== 'undefined'){
-              mapTabGeneralPanel.params[key].value = preferences.currentGeneralProperties[key];
-              actions.push({name: "changeMenu", param: mapTabGeneralPanel.params[key]});
-
-              if(key == "arrowScale"){              
-                actions.push({name: "changeCss", param: { eles: cy.edges(), name: "arrow-scale", valueMap: mapTabGeneralPanel.params.arrowScale.value}});
-              }
-            }          
-        });         
-  
-          Object.keys( mapTabLabelPanel.params).forEach(function(key,index) {
-            if(typeof preferences.currentGeneralProperties[key] !== 'undefined'){
-              mapTabLabelPanel.params[key].value = preferences.currentGeneralProperties[key];              
-                actions.push({name: "changeMenu", param: mapTabLabelPanel.params[key]});            
-            }          
-        });
-        
- 
-          Object.keys( mapTabRearrangementPanel.params).forEach(function(key,index) {
-            if(typeof preferences.currentGeneralProperties[key] !== 'undefined'){
-              mapTabRearrangementPanel.params[key].value = preferences.currentGeneralProperties[key];              
-                actions.push({name: "changeMenu", param: mapTabRearrangementPanel.params[key]});            
-            }          
-        });
- 
-          
-          var applyColorScheme = false;
-          var defaultColorScheme = appUtilities.defaultGeneralProperties.mapColorScheme;
-          var defaultColorSchemeStyle = appUtilities.defaultGeneralProperties.mapColorSchemeStyle;
-          if(typeof preferences.currentGeneralProperties.mapColorScheme !== 'undefined'){
-            applyColorScheme = true;
-           defaultColorScheme = preferences.currentGeneralProperties.mapColorScheme;          
+        //apply layout properties if checked by user
+        if (
+          document.getElementById("load-user-prefrences-layout-check").checked
+        ) {
+          if (typeof preferences.currentLayoutProperties !== "undefined") {
+            var currentLayoutProperties = appUtilities.getScratch(
+              cy,
+              "currentLayoutProperties"
+            );
+            $.extend(
+              currentLayoutProperties,
+              preferences.currentLayoutProperties
+            );
+            appUtilities.setScratch(
+              cy,
+              currentLayoutProperties,
+              "currentLayoutProperties"
+            );
+            $(document).trigger("saveLayout", cy);
           }
+        }
+        //apply map properties if checked by user
+        if (document.getElementById("load-user-prefrences-map-check").checked) {
+          if (typeof preferences.currentGeneralProperties !== "undefined") {
+            var ur = cy.undoRedo();
+            var actions = [];
+
+            Object.keys(mapTabGeneralPanel.params).forEach(function (
+              key,
+              index
+            ) {
+              if (
+                typeof preferences.currentGeneralProperties[key] !== "undefined"
+              ) {
+                mapTabGeneralPanel.params[key].value =
+                  preferences.currentGeneralProperties[key];
+                actions.push({
+                  name: "changeMenu",
+                  param: mapTabGeneralPanel.params[key],
+                });
 
-          if(typeof preferences.currentGeneralProperties.mapColorSchemeStyle !== 'undefined'){
-            applyColorScheme = true;
-            defaultColorSchemeStyle = preferences.currentGeneralProperties.mapColorSchemeStyle;          
-          }
-          if(applyColorScheme){
-            appUtilities.applyMapColorScheme(defaultColorScheme, defaultColorSchemeStyle, colorSchemeInspectorView); // default color scheme
-          }
-          ur.do("batch", actions);  
-        }  
-      }        
-      
-      
-      if(typeof preferences.elementsStyles !== 'undefined'){        
-        preferences.elementsStyles.forEach(function(item, index){
-          var sbgnClass = item["element"];
-          if(document.getElementById("load-user-prefrences-object-"+sbgnClass+"-check").checked){
-            var targetNodes =cy.elements('[class="' + sbgnClass + '"]')
-            if(item.styles.length > 0){
-              var nameToValue = {};
-              item.styles.forEach(function(style, index){
-                nameToValue[style.name] = style.value;
-              });
-  
-              //apply changes to exisiting elements only if user check the option and there are elements on canvas of this sbgn class type
-              //else just set the styles as default values 
-              if(targetNodes.length > 0 && document.getElementById("load-user-prefrences-apply-changes").checked)
-              {
-  
-                if(item['type'] == 'node')
-                {
-                   // apply node width and height change to existing elements              
-                  targetNodes.forEach(function(node) {
-                    cy.trigger('noderesize.resizestart', [null, node]);
-                    chiseInstance.resizeNodes(node, nameToValue["width"], nameToValue["height"], false);
-                    cy.trigger('noderesize.resizeend', [null, node]);
-                  });
-                  
-                  chiseInstance.changeData(targetNodes, "border-color", nameToValue["border-color"]);
-                  chiseInstance.changeData(targetNodes, "border-width", nameToValue["border-width"]);
-                  chiseInstance.changeData(targetNodes, "background-color",  nameToValue["background-color"]);
-  
-                  //hande opacity
-                  chiseInstance.changeData(targetNodes, "background-opacity",  nameToValue["background-opacity"]);
-                  chiseInstance.changeData(targetNodes, "background-image-opacity",  nameToValue["background-image-opacity"]);
-  
-                  //handel font
-                  var data = {};            
-                  data['font-size'] = nameToValue['font-size'] != '' ? nameToValue['font-size'] : undefined;
-                  data['font-family'] = nameToValue['font-sifamilyze'] != '' ? nameToValue['font-family'] : undefined;
-                  data['font-weight'] = nameToValue['font-weight'] != '' ? nameToValue['font-weight'] : undefined;
-                  data['font-style'] = nameToValue['font-style'] != '' ? nameToValue['font-style'] : undefined;
-                  data['color'] = nameToValue['color'] != '' ? nameToValue['color'] : undefined; 
-                  chiseInstance.changeFontProperties(targetNodes, data);
-  
-                  targetNodes.forEach(function(node) {
-                    node.data('background-image', nameToValue['background-image']);
-                    node.data('background-position-x', nameToValue['background-position-x']);
-                    node.data('background-position-y', nameToValue['background-position-y']);
-                    node.data('background-width', nameToValue['background-width']);
-                    node.data('background-height', nameToValue['background-height']);
-                    node.data('background-fit', nameToValue['background-fit']);
-                    node.data('background-image-opacity', nameToValue['background-image-opacity']);
+                if (key == "arrowScale") {
+                  actions.push({
+                    name: "changeCss",
+                    param: {
+                      eles: cy.edges(),
+                      name: "arrow-scale",
+                      valueMap: mapTabGeneralPanel.params.arrowScale.value,
+                    },
                   });
-  
-                  chiseInstance.setMultimerStatus(targetNodes,nameToValue['multimer'] );
-                  chiseInstance.setCloneMarkerStatus(targetNodes,nameToValue['clonemarker'] ); 
                 }
-                else
-                {
-                  //if type is edge only apply width and line-color
-                  chiseInstance.changeData(targetNodes, "width", nameToValue['width']);
-                  chiseInstance.changeData(targetNodes, "line-color", nameToValue['line-color']);
-                }             
               }
-              //set the loaded styles as default values
-              chiseInstance.elementUtilities.setDefaultProperties( sbgnClass, nameToValue );
-  
-  
-            
-  
+            });
+
+            Object.keys(mapTabLabelPanel.params).forEach(function (key, index) {
+              if (
+                typeof preferences.currentGeneralProperties[key] !== "undefined"
+              ) {
+                mapTabLabelPanel.params[key].value =
+                  preferences.currentGeneralProperties[key];
+                actions.push({
+                  name: "changeMenu",
+                  param: mapTabLabelPanel.params[key],
+                });
+              }
+            });
+
+            Object.keys(mapTabRearrangementPanel.params).forEach(function (
+              key,
+              index
+            ) {
+              if (
+                typeof preferences.currentGeneralProperties[key] !== "undefined"
+              ) {
+                mapTabRearrangementPanel.params[key].value =
+                  preferences.currentGeneralProperties[key];
+                actions.push({
+                  name: "changeMenu",
+                  param: mapTabRearrangementPanel.params[key],
+                });
+              }
+            });
+
+            var applyColorScheme = false;
+            var defaultColorScheme =
+              appUtilities.defaultGeneralProperties.mapColorScheme;
+            var defaultColorSchemeStyle =
+              appUtilities.defaultGeneralProperties.mapColorSchemeStyle;
+            if (
+              typeof preferences.currentGeneralProperties.mapColorScheme !==
+              "undefined"
+            ) {
+              applyColorScheme = true;
+              defaultColorScheme =
+                preferences.currentGeneralProperties.mapColorScheme;
             }
 
-            if(item.infoBoxStyles.length > 0){
-                //set info boxes styles 
-              var infoStyles =  item.infoBoxStyles;
-  
-             
-              infoStyles.forEach(function(infoStyle){
-  
-                var currentDefaults = chiseInstance.elementUtilities.getDefaultProperties( sbgnClass )[ infoStyle.clazz ];
-                var infoboxStyle = $.extend( {}, currentDefaults, infoStyle.styles );
-                chiseInstance.setDefaultProperty( sbgnClass, infoStyle.clazz, infoboxStyle );
-  
-                //statesandinfos
-
-                if(targetNodes.length > 0 && document.getElementById("load-user-prefrences-apply-changes").checked){
-                  targetNodes.forEach(function(node) {
-                    var infoboxesIndices = node.data("statesandinfos").length;
-                    for(var i = 0 ; i< infoboxesIndices ; i++){
-                      if(node.data('statesandinfos')[i].clazz == infoStyle.clazz){
-                        appUtilities.getActiveChiseInstance().updateInfoboxStyle(node, i, infoboxStyle);    
+            if (
+              typeof preferences.currentGeneralProperties
+                .mapColorSchemeStyle !== "undefined"
+            ) {
+              applyColorScheme = true;
+              defaultColorSchemeStyle =
+                preferences.currentGeneralProperties.mapColorSchemeStyle;
+            }
+            if (applyColorScheme) {
+              appUtilities.applyMapColorScheme(
+                defaultColorScheme,
+                defaultColorSchemeStyle,
+                colorSchemeInspectorView
+              ); // default color scheme
+            }
+            ur.do("batch", actions);
+          }
+        }
+
+        if (typeof preferences.elementsStyles !== "undefined") {
+          preferences.elementsStyles.forEach(function (item, index) {
+            var sbgnClass = item["element"];
+            if (
+              document.getElementById(
+                "load-user-prefrences-object-" + sbgnClass + "-check"
+              ).checked
+            ) {
+              var targetNodes = cy.elements('[class="' + sbgnClass + '"]');
+              if (item.styles.length > 0) {
+                var nameToValue = {};
+                item.styles.forEach(function (style, index) {
+                  nameToValue[style.name] = style.value;
+                });
+
+                //apply changes to exisiting elements only if user check the option and there are elements on canvas of this sbgn class type
+                //else just set the styles as default values
+                if (
+                  targetNodes.length > 0 &&
+                  document.getElementById("load-user-prefrences-apply-changes")
+                    .checked
+                ) {
+                  if (item["type"] == "node") {
+                    // apply node width and height change to existing elements
+                    targetNodes.forEach(function (node) {
+                      cy.trigger("noderesize.resizestart", [null, node]);
+                      chiseInstance.resizeNodes(
+                        node,
+                        nameToValue["width"],
+                        nameToValue["height"],
+                        false
+                      );
+                      cy.trigger("noderesize.resizeend", [null, node]);
+                    });
+
+                    chiseInstance.changeData(
+                      targetNodes,
+                      "border-color",
+                      nameToValue["border-color"]
+                    );
+                    chiseInstance.changeData(
+                      targetNodes,
+                      "border-width",
+                      nameToValue["border-width"]
+                    );
+                    chiseInstance.changeData(
+                      targetNodes,
+                      "background-color",
+                      nameToValue["background-color"]
+                    );
+
+                    //hande opacity
+                    chiseInstance.changeData(
+                      targetNodes,
+                      "background-opacity",
+                      nameToValue["background-opacity"]
+                    );
+                    chiseInstance.changeData(
+                      targetNodes,
+                      "background-image-opacity",
+                      nameToValue["background-image-opacity"]
+                    );
+
+                    //handel font
+                    var data = {};
+                    data["font-size"] =
+                      nameToValue["font-size"] != ""
+                        ? nameToValue["font-size"]
+                        : undefined;
+                    data["font-family"] =
+                      nameToValue["font-sifamilyze"] != ""
+                        ? nameToValue["font-family"]
+                        : undefined;
+                    data["font-weight"] =
+                      nameToValue["font-weight"] != ""
+                        ? nameToValue["font-weight"]
+                        : undefined;
+                    data["font-style"] =
+                      nameToValue["font-style"] != ""
+                        ? nameToValue["font-style"]
+                        : undefined;
+                    data["color"] =
+                      nameToValue["color"] != ""
+                        ? nameToValue["color"]
+                        : undefined;
+                    chiseInstance.changeFontProperties(targetNodes, data);
+
+                    targetNodes.forEach(function (node) {
+                      node.data(
+                        "background-image",
+                        nameToValue["background-image"]
+                      );
+                      node.data(
+                        "background-position-x",
+                        nameToValue["background-position-x"]
+                      );
+                      node.data(
+                        "background-position-y",
+                        nameToValue["background-position-y"]
+                      );
+                      node.data(
+                        "background-width",
+                        nameToValue["background-width"]
+                      );
+                      node.data(
+                        "background-height",
+                        nameToValue["background-height"]
+                      );
+                      node.data(
+                        "background-fit",
+                        nameToValue["background-fit"]
+                      );
+                      node.data(
+                        "background-image-opacity",
+                        nameToValue["background-image-opacity"]
+                      );
+                    });
+
+                    chiseInstance.setMultimerStatus(
+                      targetNodes,
+                      nameToValue["multimer"]
+                    );
+                    chiseInstance.setCloneMarkerStatus(
+                      targetNodes,
+                      nameToValue["clonemarker"]
+                    );
+                  } else {
+                    //if type is edge only apply width and line-color
+                    chiseInstance.changeData(
+                      targetNodes,
+                      "width",
+                      nameToValue["width"]
+                    );
+                    chiseInstance.changeData(
+                      targetNodes,
+                      "line-color",
+                      nameToValue["line-color"]
+                    );
+                  }
+                }
+                //set the loaded styles as default values
+                chiseInstance.elementUtilities.setDefaultProperties(
+                  sbgnClass,
+                  nameToValue
+                );
+              }
+
+              if (item.infoBoxStyles.length > 0) {
+                //set info boxes styles
+                var infoStyles = item.infoBoxStyles;
+
+                infoStyles.forEach(function (infoStyle) {
+                  var currentDefaults =
+                    chiseInstance.elementUtilities.getDefaultProperties(
+                      sbgnClass
+                    )[infoStyle.clazz];
+                  var infoboxStyle = $.extend(
+                    {},
+                    currentDefaults,
+                    infoStyle.styles
+                  );
+                  chiseInstance.setDefaultProperty(
+                    sbgnClass,
+                    infoStyle.clazz,
+                    infoboxStyle
+                  );
+
+                  //statesandinfos
+
+                  if (
+                    targetNodes.length > 0 &&
+                    document.getElementById(
+                      "load-user-prefrences-apply-changes"
+                    ).checked
+                  ) {
+                    targetNodes.forEach(function (node) {
+                      var infoboxesIndices = node.data("statesandinfos").length;
+                      for (var i = 0; i < infoboxesIndices; i++) {
+                        if (
+                          node.data("statesandinfos")[i].clazz ==
+                          infoStyle.clazz
+                        ) {
+                          appUtilities
+                            .getActiveChiseInstance()
+                            .updateInfoboxStyle(node, i, infoboxStyle);
+                        }
                       }
-    
-                    }
-                  });
-                } 
-              });
-      
-            }  
-         
+                    });
+                  }
+                });
+              }
+            }
+          });
         }
-        });
-      }
-    
-       
-      $(self.el).modal('toggle');
-    });
 
-    $(document).off("click", "#load-user-preferences-cancel").on("click", "#load-user-preferences-cancel", function (evt) {
-      $(self.el).modal('toggle');
-    });
+        $(self.el).modal("toggle");
+      });
+
+    $(document)
+      .off("click", "#load-user-preferences-cancel")
+      .on("click", "#load-user-preferences-cancel", function (evt) {
+        $(self.el).modal("toggle");
+      });
     return this;
-  }
+  },
 });
 
 /*
@@ -3027,19 +3898,23 @@ var PromptConfirmationView = Backbone.View.extend({
     self.template = _.template($("#prompt-confirmation-template").html());
 
     $(self.el).html(self.template);
-    $(self.el).modal('show');
+    $(self.el).modal("show");
 
-    $(document).off("click", "#prompt-confirmation-accept").on("click", "#prompt-confirmation-accept", function (evt) {
-      afterFunction();
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#prompt-confirmation-accept")
+      .on("click", "#prompt-confirmation-accept", function (evt) {
+        afterFunction();
+        $(self.el).modal("toggle");
+      });
 
-    $(document).off("click", "#prompt-confirmation-cancel").on("click", "#prompt-confirmation-cancel", function (evt) {
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#prompt-confirmation-cancel")
+      .on("click", "#prompt-confirmation-cancel", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
     return this;
-  }
+  },
 });
 
 var PromptMapTypeView = Backbone.View.extend({
@@ -3047,131 +3922,144 @@ var PromptMapTypeView = Backbone.View.extend({
     var self = this;
     self.template = _.template($("#prompt-mapType-template").html());
   },
-  render: function (message,suggestion, afterFunction) {
+  render: function (message, suggestion, afterFunction) {
     var self = this;
     self.template = _.template($("#prompt-mapType-template").html());
 
     var param = {};
     param.message = message;
-    param.suggestion =suggestion;
+    param.suggestion = suggestion;
     self.template = self.template(param);
 
     $(self.el).html(self.template);
-    $(self.el).modal('show');
+    $(self.el).modal("show");
 
-    $(document).off("click", "#prompt-mapType-accept").on("click", "#prompt-mapType-accept", function (evt) {
-      //afterFunction();
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#prompt-mapType-accept")
+      .on("click", "#prompt-mapType-accept", function (evt) {
+        //afterFunction();
+        $(self.el).modal("toggle");
+      });
 
-    $(document).off("click", "#prompt-mapType-cancel").on("click", "#prompt-mapType-cancel", function (evt) {
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#prompt-mapType-cancel")
+      .on("click", "#prompt-mapType-cancel", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
     return this;
-  }
+  },
 });
 
 var PromptInvalidQueryView = Backbone.View.extend({
   initialize: function () {
-      var self = this;
-      self.template = _.template($("#prompt-invalidQuery-template").html());
+    var self = this;
+    self.template = _.template($("#prompt-invalidQuery-template").html());
   },
   render: function () {
-      var self = this;
-      self.template = _.template($("#prompt-invalidQuery-template").html());
-
-      $(self.el).html(self.template);
-      $(self.el).modal('show');
-
-      $(document).off("click", "#prompt-invalidQuery-confirm").on("click", "#prompt-invalidQuery-confirm", function (evt) {
-          $(self.el).modal('toggle');
-          if (PCdialog == "Neighborhood")
-            appUtilities.neighborhoodQueryView.render();
-          else if (PCdialog == "PathsBetween")
-              appUtilities.pathsBetweenQueryView.render();
-          else if (PCdialog == "PathsFromTo")
-              appUtilities.pathsFromToQueryView.render();
-          else if (PCdialog == "CommonStream")
-              appUtilities.commonStreamQueryView.render();
+    var self = this;
+    self.template = _.template($("#prompt-invalidQuery-template").html());
+
+    $(self.el).html(self.template);
+    $(self.el).modal("show");
+
+    $(document)
+      .off("click", "#prompt-invalidQuery-confirm")
+      .on("click", "#prompt-invalidQuery-confirm", function (evt) {
+        $(self.el).modal("toggle");
+        if (PCdialog == "Neighborhood")
+          appUtilities.neighborhoodQueryView.render();
+        else if (PCdialog == "PathsBetween")
+          appUtilities.pathsBetweenQueryView.render();
+        else if (PCdialog == "PathsFromTo")
+          appUtilities.pathsFromToQueryView.render();
+        else if (PCdialog == "CommonStream")
+          appUtilities.commonStreamQueryView.render();
       });
 
-      return this;
-  }
+    return this;
+  },
 });
 
 var PromptInvalidLengthLimitView = Backbone.View.extend({
-    initialize: function () {
-        var self = this;
-        self.template = _.template($("#prompt-invalidLengthLimit-template").html());
-    },
-    render: function () {
-        var self = this;
-        self.template = _.template($("#prompt-invalidLengthLimit-template").html());
+  initialize: function () {
+    var self = this;
+    self.template = _.template($("#prompt-invalidLengthLimit-template").html());
+  },
+  render: function () {
+    var self = this;
+    self.template = _.template($("#prompt-invalidLengthLimit-template").html());
 
-        $(self.el).html(self.template);
+    $(self.el).html(self.template);
+    if (PCdialog == "Neighborhood")
+      document.getElementById("length-limit-constant").innerHTML =
+        "Length limit can be at most 2.";
+    else
+      document.getElementById("length-limit-constant").innerHTML =
+        "Length limit can be at most 3.";
+    $(self.el).modal("show");
+
+    $(document)
+      .off("click", "#prompt-invalidLengthLimit-confirm")
+      .on("click", "#prompt-invalidLengthLimit-confirm", function (evt) {
+        $(self.el).modal("toggle");
         if (PCdialog == "Neighborhood")
-          document.getElementById("length-limit-constant").innerHTML = "Length limit can be at most 2.";								  
-        else
-            document.getElementById("length-limit-constant").innerHTML = "Length limit can be at most 3.";
-        $(self.el).modal('show');
-
-        $(document).off("click", "#prompt-invalidLengthLimit-confirm").on("click", "#prompt-invalidLengthLimit-confirm", function (evt) {
-            $(self.el).modal('toggle');
-            if (PCdialog == "Neighborhood")
-                appUtilities.neighborhoodQueryView.render();
-            else if (PCdialog == "PathsBetween")
-                appUtilities.pathsBetweenQueryView.render();
-            else if (PCdialog == "PathsFromTo")
-                appUtilities.pathsFromToQueryView.render();
-            else if (PCdialog == "CommonStream")
-                appUtilities.commonStreamQueryView.render();
-			     				  
-        });
+          appUtilities.neighborhoodQueryView.render();
+        else if (PCdialog == "PathsBetween")
+          appUtilities.pathsBetweenQueryView.render();
+        else if (PCdialog == "PathsFromTo")
+          appUtilities.pathsFromToQueryView.render();
+        else if (PCdialog == "CommonStream")
+          appUtilities.commonStreamQueryView.render();
+      });
 
-        return this;
-    }
+    return this;
+  },
 });
 
 var PromptInvalidURIView = Backbone.View.extend({
-    initialize: function () {
-        var self = this;
-        self.template = _.template($("#prompt-invalidURI-template").html());
-    },
-    render: function () {
-        var self = this;
-        self.template = _.template($("#prompt-invalidURI-template").html());
+  initialize: function () {
+    var self = this;
+    self.template = _.template($("#prompt-invalidURI-template").html());
+  },
+  render: function () {
+    var self = this;
+    self.template = _.template($("#prompt-invalidURI-template").html());
 
-        $(self.el).html(self.template);
-        $(self.el).modal('show');
+    $(self.el).html(self.template);
+    $(self.el).modal("show");
 
-        $(document).off("click", "#prompt-invalidURI-confirm").on("click", "#prompt-invalidURI-confirm", function (evt) {
-            $(self.el).modal('toggle');
-            appUtilities.pathsByURIQueryView.render();
-        });
+    $(document)
+      .off("click", "#prompt-invalidURI-confirm")
+      .on("click", "#prompt-invalidURI-confirm", function (evt) {
+        $(self.el).modal("toggle");
+        appUtilities.pathsByURIQueryView.render();
+      });
 
-        return this;
-    }
+    return this;
+  },
 });
 
 var PromptInvalidURIWarning = Backbone.View.extend({
-    initialize: function () {
-        var self = this;
-        self.template = _.template($("#prompt-invalidURI-template").html());
-    },
-    render: function () {
-        var self = this;
-        self.template = _.template($("#prompt-invalidURI-template").html());
+  initialize: function () {
+    var self = this;
+    self.template = _.template($("#prompt-invalidURI-template").html());
+  },
+  render: function () {
+    var self = this;
+    self.template = _.template($("#prompt-invalidURI-template").html());
 
-        $(self.el).html(self.template);
-        $(self.el).modal('show');
+    $(self.el).html(self.template);
+    $(self.el).modal("show");
 
-        $(document).off("click", "#prompt-invalidURI-confirm").on("click", "#prompt-invalidURI-confirm", function (evt) {
-            $(self.el).modal('toggle');
-        });
+    $(document)
+      .off("click", "#prompt-invalidURI-confirm")
+      .on("click", "#prompt-invalidURI-confirm", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
-        return this;
-    }
+    return this;
+  },
 });
 
 var PromptInvalidFileView = Backbone.View.extend({
@@ -3184,85 +4072,116 @@ var PromptInvalidFileView = Backbone.View.extend({
     self.template = _.template($("#prompt-invalidFile-template").html());
 
     $(self.el).html(self.template);
-    $(self.el).modal('show');
+    $(self.el).modal("show");
 
-    $(document).off("click", "#prompt-invalidFile-confirm").on("click", "#prompt-invalidFile-confirm", function (evt) {
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#prompt-invalidFile-confirm")
+      .on("click", "#prompt-invalidFile-confirm", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
     return this;
-  }
+  },
 });
 
 var PromptFileConversionErrorView = Backbone.View.extend({
-   initialize: function () {
-     var self = this;
-     self.template = _.template($("#prompt-fileConversionError-template").html());
-   },
-   render: function() {
-     var self = this;
-     self.template = _.template($("#prompt-fileConversionError-template").html());
-
-     $(self.el).html(self.template);
-     $(self.el).modal('show');
-
-     $(document).off("click", "#prompt-fileConversionError-confirm").on("click", "#prompt-fileConversionError-confirm", function (evt) {
-         $(self.el).modal('toggle');
-     });
-
-     return this;
-   }
+  initialize: function () {
+    var self = this;
+    self.template = _.template(
+      $("#prompt-fileConversionError-template").html()
+    );
+  },
+  render: function () {
+    var self = this;
+    self.template = _.template(
+      $("#prompt-fileConversionError-template").html()
+    );
+
+    $(self.el).html(self.template);
+    $(self.el).modal("show");
+
+    $(document)
+      .off("click", "#prompt-fileConversionError-confirm")
+      .on("click", "#prompt-fileConversionError-confirm", function (evt) {
+        $(self.el).modal("toggle");
+      });
+
+    return this;
+  },
 });
 
 var PromptSbmlConversionErrorView = Backbone.View.extend({
   initialize: function () {
     var self = this;
-    self.template = _.template($("#prompt-sbmlConversionError-template").html());
+    self.template = _.template(
+      $("#prompt-sbmlConversionError-template").html()
+    );
   },
-  render: function(data, errorMessage) {
+  render: function (data, errorMessage) {
     var self = this;
-    self.template = _.template($("#prompt-sbmlConversionError-template").html());
+    self.template = _.template(
+      $("#prompt-sbmlConversionError-template").html()
+    );
 
     $(self.el).html(self.template);
-    $(self.el).modal('show');
-
-    $(document).off("click", "#prompt-sbml-confirm").on("click", "#prompt-sbml-confirm", function (evt) {   
-      var userAgreed = document.getElementById("sbml-coversion-user-agree").checked ? true : false;
-     
-      if(userAgreed){
-        setTimeout(function(){
-        $.ajax({
-          type: 'post',
-          url: "/utilities/sendEmail",
-          headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"},
-          data: { fileContent: data , message: "Error message: "+ errorMessage},            
-          success: function( data ) {        
-          },
-          error: function(xhr, options, err){             
-            console.log( err );
-            
-          }        })} , 0); 
-      }else{
-        setTimeout(function(){
-          $.ajax({
-            type: 'post',
-            url: "/utilities/sendEmail",
-            headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"},
-            data: { fileContent: "no-data" , message: "The user didn't consent to sharing their file." + "\nError message: " + errorMessage},            
-            success: function( data ) {        
-            },
-            error: function(xhr, options, err){             
-              console.log( err );
-              
-            }        })} , 0); 
-      }    
-      
-      $(self.el).modal('toggle');
-        
-    });
+    $(self.el).modal("show");
+
+    $(document)
+      .off("click", "#prompt-sbml-confirm")
+      .on("click", "#prompt-sbml-confirm", function (evt) {
+        var userAgreed = document.getElementById("sbml-coversion-user-agree")
+          .checked
+          ? true
+          : false;
+
+        if (userAgreed) {
+          setTimeout(function () {
+            $.ajax({
+              type: "post",
+              url: "/utilities/sendEmail",
+              headers: {
+                "Content-Type":
+                  "application/x-www-form-urlencoded; charset=UTF-8",
+              },
+              data: {
+                fileContent: data,
+                message: "Error message: " + errorMessage,
+              },
+              success: function (data) {},
+              error: function (xhr, options, err) {
+                console.log(err);
+              },
+            });
+          }, 0);
+        } else {
+          setTimeout(function () {
+            $.ajax({
+              type: "post",
+              url: "/utilities/sendEmail",
+              headers: {
+                "Content-Type":
+                  "application/x-www-form-urlencoded; charset=UTF-8",
+              },
+              data: {
+                fileContent: "no-data",
+                message:
+                  "The user didn't consent to sharing their file." +
+                  "\nError message: " +
+                  errorMessage,
+              },
+              success: function (data) {},
+              error: function (xhr, options, err) {
+                console.log(err);
+              },
+            });
+          }, 0);
+        }
+
+        $(self.el).modal("toggle");
+      });
 
     return this;
-  }
+  },
 });
 var PromptInvalidURLWarning = Backbone.View.extend({
   initialize: function () {
@@ -3274,14 +4193,16 @@ var PromptInvalidURLWarning = Backbone.View.extend({
     self.template = _.template($("#prompt-invalidURL-template").html());
 
     $(self.el).html(self.template);
-    $(self.el).modal('show');
+    $(self.el).modal("show");
 
-    $(document).off("click", "#prompt-invalidURL-confirm").on("click", "#prompt-invalidURL-confirm", function (evt) {
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#prompt-invalidURL-confirm")
+      .on("click", "#prompt-invalidURL-confirm", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
     return this;
-  }
+  },
 });
 
 var PromptInvalidImageWarning = Backbone.View.extend({
@@ -3293,20 +4214,22 @@ var PromptInvalidImageWarning = Backbone.View.extend({
     var self = this;
     var tmp = $("#prompt-invalidImage-template").html();
     var spanText = '<span class="add-on layout-text">';
-    var s = tmp.indexOf(spanText)
-    var e = tmp.indexOf('</span>');
+    var s = tmp.indexOf(spanText);
+    var e = tmp.indexOf("</span>");
     tmp = tmp.substring(0, s + spanText.length) + msg + tmp.substring(e);
     self.template = _.template(tmp);
 
     $(self.el).html(self.template);
-    $(self.el).modal('show');
+    $(self.el).modal("show");
 
-    $(document).off("click", "#prompt-invalidImage-confirm").on("click", "#prompt-invalidImage-confirm", function (evt) {
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#prompt-invalidImage-confirm")
+      .on("click", "#prompt-invalidImage-confirm", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
     return this;
-  }
+  },
 });
 
 var PromptInvalidEdgeWarning = Backbone.View.extend({
@@ -3319,127 +4242,191 @@ var PromptInvalidEdgeWarning = Backbone.View.extend({
     self.template = _.template($("#prompt-invalidEdge-template").html());
 
     $(self.el).html(self.template);
-    $(self.el).modal('show');
+    $(self.el).modal("show");
 
-    $(document).off("click", "#prompt-invalidEdge-confirm").on("click", "#prompt-invalidEdge-confirm", function (evt) {
-      $(self.el).modal('toggle');
-    });
+    $(document)
+      .off("click", "#prompt-invalidEdge-confirm")
+      .on("click", "#prompt-invalidEdge-confirm", function (evt) {
+        $(self.el).modal("toggle");
+      });
 
     return this;
-  }
+  },
 });
 
 var ReactionTemplateView = Backbone.View.extend({
   addMacromolecule: function (type, i) {
-    var html = "<tr><td>"
-        + "<input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='"
-        + i + "' value=''></input>"
-        + "</td><td>";
-    if( type == "reaction"){
-      html +=  "<select class='template-reaction-molecule-type sbgn-output-medium layout-text' name='" + i + "' style='width: 120px'>"
-             + "<option value='Macromolecule' selected> Macromolecule </option>"
-             + "<option value='Simple Chemical'> Simple Chemical </option></td>";
-      html +=  "<td><img style='vertical-align: text-bottom;' class='template-reaction-delete-button' width='16px' height='16px' name='" + i + "' src='app/img/toolbar/delete-simple.svg'style='margin-right: 30px'/></td></tr>";
-      $('#template-reaction-dissociated-table :input.template-reaction-textbox').last().closest('tr').after(html);
-    }
-    else if( type == "left"){
-      html +=  "<select class='template-reaction-molecule-type sbgn-output-medium layout-text' name='" + i + "' style='width: 120px'>"
-             + "<option value='Macromolecule'> Macromolecule </option>"
-             + "<option value='Simple Chemical' selected> Simple Chemical </option></td>";
-      html += "<td><img style='vertical-align: text-bottom;' class='template-reversible-input-delete-button' width='16px' height='16px' name='" + i + "' src='app/img/toolbar/delete-simple.svg' style='margin-right: 30px'/></td></tr>";
-      $('#template-reversible-input-table :input.template-reaction-textbox').last().closest('tr').after(html);
-    }
-    else{
-      html +=  "<select class='template-reaction-molecule-type sbgn-output-medium layout-text' name='" + i + "' style='width: 120px'>"
-             + "<option value='Macromolecule'> Macromolecule </option>"
-             + "<option value='Simple Chemical' selected> Simple Chemical </option></td>";
-      html += "<td><img style='vertical-align: text-bottom;' class='template-reversible-output-delete-button' width='16px' height='16px' name='" + i + "' src='app/img/toolbar/delete-simple.svg'/></td></tr>";
-      $('#template-reversible-output-table :input.template-reaction-textbox').last().closest('tr').after(html);
+    var html =
+      "<tr><td>" +
+      "<input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='" +
+      i +
+      "' value=''></input>" +
+      "</td><td>";
+    if (type == "reaction") {
+      html +=
+        "<select class='template-reaction-molecule-type sbgn-output-medium layout-text' name='" +
+        i +
+        "' style='width: 120px'>" +
+        "<option value='Macromolecule' selected> Macromolecule </option>" +
+        "<option value='Simple Chemical'> Simple Chemical </option></td>";
+      html +=
+        "<td><img style='vertical-align: text-bottom;' class='template-reaction-delete-button' width='16px' height='16px' name='" +
+        i +
+        "' src='app/img/toolbar/delete-simple.svg'style='margin-right: 30px'/></td></tr>";
+      $("#template-reaction-dissociated-table :input.template-reaction-textbox")
+        .last()
+        .closest("tr")
+        .after(html);
+    } else if (type == "left") {
+      html +=
+        "<select class='template-reaction-molecule-type sbgn-output-medium layout-text' name='" +
+        i +
+        "' style='width: 120px'>" +
+        "<option value='Macromolecule'> Macromolecule </option>" +
+        "<option value='Simple Chemical' selected> Simple Chemical </option></td>";
+      html +=
+        "<td><img style='vertical-align: text-bottom;' class='template-reversible-input-delete-button' width='16px' height='16px' name='" +
+        i +
+        "' src='app/img/toolbar/delete-simple.svg' style='margin-right: 30px'/></td></tr>";
+      $("#template-reversible-input-table :input.template-reaction-textbox")
+        .last()
+        .closest("tr")
+        .after(html);
+    } else {
+      html +=
+        "<select class='template-reaction-molecule-type sbgn-output-medium layout-text' name='" +
+        i +
+        "' style='width: 120px'>" +
+        "<option value='Macromolecule'> Macromolecule </option>" +
+        "<option value='Simple Chemical' selected> Simple Chemical </option></td>";
+      html +=
+        "<td><img style='vertical-align: text-bottom;' class='template-reversible-output-delete-button' width='16px' height='16px' name='" +
+        i +
+        "' src='app/img/toolbar/delete-simple.svg'/></td></tr>";
+      $("#template-reversible-output-table :input.template-reaction-textbox")
+        .last()
+        .closest("tr")
+        .after(html);
     }
     return html;
   },
   removeMacromolecule: function (type, i) {
-    if(type == "reaction"){
-      $('#template-reaction-dissociated-table :input.template-reaction-textbox[name="'+i+'"]').closest('tr').remove();;
-    }
-    else if(type == "left"){
-      $('#template-reversible-input-table :input.template-reaction-textbox[name="'+i+'"]').closest('tr').remove();
-    }
-    else{
-      $('#template-reversible-output-table :input.template-reaction-textbox[name="'+i+'"]').closest('tr').remove();
+    if (type == "reaction") {
+      $(
+        '#template-reaction-dissociated-table :input.template-reaction-textbox[name="' +
+          i +
+          '"]'
+      )
+        .closest("tr")
+        .remove();
+    } else if (type == "left") {
+      $(
+        '#template-reversible-input-table :input.template-reaction-textbox[name="' +
+          i +
+          '"]'
+      )
+        .closest("tr")
+        .remove();
+    } else {
+      $(
+        '#template-reversible-output-table :input.template-reaction-textbox[name="' +
+          i +
+          '"]'
+      )
+        .closest("tr")
+        .remove();
     }
   },
   switchInputOutput: function (e) {
     var self = this;
-    if(e == "association") {
-      $('#reaction-template-left-td').html(self.associatedHTMLContent);
-      $('#reaction-template-right-td').html(self.dissociatedHTMLContent);
-    }
-    else if(e == "dissociation"){
-      $('#reaction-template-left-td').html(self.dissociatedHTMLContent);
-      $('#reaction-template-right-td').html(self.associatedHTMLContent);
-    }
-    else{
-      $('#reaction-template-left-td').html(self.reversibleInputHTMLContent);
-      $('#reaction-template-right-td').html(self.reversibleOutputHTMLContent);
+    if (e == "association") {
+      $("#reaction-template-left-td").html(self.associatedHTMLContent);
+      $("#reaction-template-right-td").html(self.dissociatedHTMLContent);
+    } else if (e == "dissociation") {
+      $("#reaction-template-left-td").html(self.dissociatedHTMLContent);
+      $("#reaction-template-right-td").html(self.associatedHTMLContent);
+    } else {
+      $("#reaction-template-left-td").html(self.reversibleInputHTMLContent);
+      $("#reaction-template-right-td").html(self.reversibleOutputHTMLContent);
       self.disableDeleteButtonStyle("left");
       self.disableDeleteButtonStyle("right");
     }
   },
   getAllParameters: function () {
-    var templateType = $('#reaction-template-type-select').val();
-    var templateReactionComplexName = $('#template-reaction-complex-name').val();
-    var nodeNames = $('#template-reaction-dissociated-table  :input.template-reaction-textbox').map(function(){
+    var templateType = $("#reaction-template-type-select").val();
+    var templateReactionComplexName = $(
+      "#template-reaction-complex-name"
+    ).val();
+    var nodeNames = $(
+      "#template-reaction-dissociated-table  :input.template-reaction-textbox"
+    )
+      .map(function () {
         return {
-            name: $(this).val(),
-            id: $(this).attr('name').charAt(0)
+          name: $(this).val(),
+          id: $(this).attr("name").charAt(0),
         };
-    }).toArray();
-    var nodeTypes = $('#template-reaction-dissociated-table  :input.template-reaction-molecule-type :selected').map(function(){
+      })
+      .toArray();
+    var nodeTypes = $(
+      "#template-reaction-dissociated-table  :input.template-reaction-molecule-type :selected"
+    )
+      .map(function () {
         return $(this).val();
-    }).toArray();
+      })
+      .toArray();
     var nodeList = [];
-    for( var i = 0; i < nodeNames.length; i++){
-      nodeList.push(
-        {
-          "name": nodeNames[i].name,
-          "type": nodeTypes[i],
-          "id": nodeNames[i].id
-        }
-      );
+    for (var i = 0; i < nodeNames.length; i++) {
+      nodeList.push({
+        name: nodeNames[i].name,
+        type: nodeTypes[i],
+        id: nodeNames[i].id,
+      });
     }
-    var reversibleInputNodeNames = $('#template-reversible-input-table :input.template-reaction-textbox').map(function(){
-      return $(this).val();
-    }).toArray();
-    var reversibleInputNodeTypes = $('#template-reversible-input-table :input.template-reaction-molecule-type :selected').map(function(){
-      return $(this).val();
-    }).toArray();
-    var reversibleOutputNodeNames = $('#template-reversible-output-table :input.template-reaction-textbox').map(function(){
-      return $(this).val();
-    }).toArray();
-    var reversibleOutputNodeTypes = $('#template-reversible-output-table :input.template-reaction-molecule-type :selected').map(function(){
-      return $(this).val();
-    }).toArray();
+    var reversibleInputNodeNames = $(
+      "#template-reversible-input-table :input.template-reaction-textbox"
+    )
+      .map(function () {
+        return $(this).val();
+      })
+      .toArray();
+    var reversibleInputNodeTypes = $(
+      "#template-reversible-input-table :input.template-reaction-molecule-type :selected"
+    )
+      .map(function () {
+        return $(this).val();
+      })
+      .toArray();
+    var reversibleOutputNodeNames = $(
+      "#template-reversible-output-table :input.template-reaction-textbox"
+    )
+      .map(function () {
+        return $(this).val();
+      })
+      .toArray();
+    var reversibleOutputNodeTypes = $(
+      "#template-reversible-output-table :input.template-reaction-molecule-type :selected"
+    )
+      .map(function () {
+        return $(this).val();
+      })
+      .toArray();
     var reversibleInputNodeList = [];
-    for(var i = 0; i < reversibleInputNodeNames.length; i++){
-      reversibleInputNodeList.push(
-        {
-          name: reversibleInputNodeNames[i],
-          type: reversibleInputNodeTypes[i]
-        }
-      );
+    for (var i = 0; i < reversibleInputNodeNames.length; i++) {
+      reversibleInputNodeList.push({
+        name: reversibleInputNodeNames[i],
+        type: reversibleInputNodeTypes[i],
+      });
     }
     var reversibleOutputNodeList = [];
-    for(var i = 0; i < reversibleOutputNodeNames.length; i++){
-      reversibleOutputNodeList.push(
-        {
-          name: reversibleOutputNodeNames[i],
-          type: reversibleOutputNodeTypes[i]
-        }
-      );
+    for (var i = 0; i < reversibleOutputNodeNames.length; i++) {
+      reversibleOutputNodeList.push({
+        name: reversibleOutputNodeNames[i],
+        type: reversibleOutputNodeTypes[i],
+      });
     }
     // enable complex name only if the user provided something
-    var templateReactionEnableComplexName = $.trim(templateReactionComplexName).length != 0;
+    var templateReactionEnableComplexName =
+      $.trim(templateReactionComplexName).length != 0;
 
     return {
       templateType: templateType,
@@ -3447,114 +4434,175 @@ var ReactionTemplateView = Backbone.View.extend({
       nodeList: nodeList,
       reversibleInputNodeList: reversibleInputNodeList,
       reversibleOutputNodeList: reversibleOutputNodeList,
-      templateReactionEnableComplexName: templateReactionEnableComplexName
-    }
+      templateReactionEnableComplexName: templateReactionEnableComplexName,
+    };
   },
   disableDeleteButtonStyle: function (type) {
-    if(type == "reaction"){
+    if (type == "reaction") {
       $("img.template-reaction-delete-button").css("opacity", 0.2);
       $("img.template-reaction-delete-button").css("cursor", "default");
-    }
-    else if(type == "left"){
+    } else if (type == "left") {
       $("img.template-reversible-input-delete-button").css("opacity", 0.2);
       $("img.template-reversible-input-delete-button").css("cursor", "default");
-    }
-    else{
+    } else {
       $("img.template-reversible-output-delete-button").css("opacity", 0.2);
-      $("img.template-reversible-output-delete-button").css("cursor", "default");
+      $("img.template-reversible-output-delete-button").css(
+        "cursor",
+        "default"
+      );
     }
   },
-  enableDeleteButtonStyle: function(type) {
-    if(type == "reaction"){
-      $("img.template-reaction-delete-button").css("opacity",1);
+  enableDeleteButtonStyle: function (type) {
+    if (type == "reaction") {
+      $("img.template-reaction-delete-button").css("opacity", 1);
       $("img.template-reaction-delete-button").css("cursor", "pointer");
-    }
-    else if(type == "left"){
-      $("img.template-reversible-input-delete-button").css("opacity",1);
+    } else if (type == "left") {
+      $("img.template-reversible-input-delete-button").css("opacity", 1);
       $("img.template-reversible-input-delete-button").css("cursor", "pointer");
+    } else {
+      $("img.template-reversible-output-delete-button").css("opacity", 1);
+      $("img.template-reversible-output-delete-button").css(
+        "cursor",
+        "pointer"
+      );
     }
-    else{
-      $("img.template-reversible-output-delete-button").css("opacity",1);
-      $("img.template-reversible-output-delete-button").css("cursor", "pointer");
-    }
-
   },
-  initialize: function() {
-
+  initialize: function () {
     var self = this;
     self.template = _.template($("#reaction-template-template").html());
 
-
-    $(document).on('change', '#reaction-template-type-select', function (e) {
+    $(document).on("change", "#reaction-template-type-select", function (e) {
       var valueSelected = $(this).val();
       self.switchInputOutput(valueSelected);
       self.disableDeleteButtonStyle("reaction");
     });
 
-    $(document).on("change", "#template-reaction-complex-name", function(e){
+    $(document).on("change", "#template-reaction-complex-name", function (e) {
       var value = $(this).val();
-      $(this).attr('value', value); // set the value in the html tag, so it is remembered when switched
+      $(this).attr("value", value); // set the value in the html tag, so it is remembered when switched
     });
 
     $(document).on("click", "#template-reaction-add-button", function (event) {
       // get the last input name and add 1
-      var nextIndex = parseInt($('#template-reaction-dissociated-table :input.template-reaction-textbox').last().attr('name')) + 1;
-      self.addMacromolecule("reaction",nextIndex);
+      var nextIndex =
+        parseInt(
+          $(
+            "#template-reaction-dissociated-table :input.template-reaction-textbox"
+          )
+            .last()
+            .attr("name")
+        ) + 1;
+      self.addMacromolecule("reaction", nextIndex);
       self.enableDeleteButtonStyle("reaction");
     });
 
-    $(document).on('change', ".template-reaction-textbox", function () {
+    $(document).on("change", ".template-reaction-textbox", function () {
       var value = $(this).val();
-      $(this).attr('value', value); // set the value in the html tag, so it is remembered when switched
+      $(this).attr("value", value); // set the value in the html tag, so it is remembered when switched
     });
 
-    $(document).on("click", ".template-reaction-delete-button", function (event) {
-      if($('#template-reaction-dissociated-table :input.template-reaction-textbox').length <= 2){
-        return;
-      }
-      var index = parseInt($(this).attr('name'));
-      self.removeMacromolecule("reaction",index);
-      if($('#template-reaction-dissociated-table :input.template-reaction-textbox').length <= 2){
-        self.disableDeleteButtonStyle("reaction");
+    $(document).on(
+      "click",
+      ".template-reaction-delete-button",
+      function (event) {
+        if (
+          $(
+            "#template-reaction-dissociated-table :input.template-reaction-textbox"
+          ).length <= 2
+        ) {
+          return;
+        }
+        var index = parseInt($(this).attr("name"));
+        self.removeMacromolecule("reaction", index);
+        if (
+          $(
+            "#template-reaction-dissociated-table :input.template-reaction-textbox"
+          ).length <= 2
+        ) {
+          self.disableDeleteButtonStyle("reaction");
+        }
       }
-    });
-
-    $(document).on("click", "#template-reversible-input-add-button", function(event){
-      var nextIndex = parseInt($('#template-reversible-input-table :input.template-reaction-textbox').last().attr('name')) + 1;
-      self.addMacromolecule( "left", nextIndex);
-      self.enableDeleteButtonStyle("left");
-    });
-
-    $(document).on("click", "#template-reversible-output-add-button", function(event){
-      var nextIndex = parseInt($('#template-reversible-output-table :input.template-reaction-textbox').last().attr('name')) + 1;
-      self.addMacromolecule( "right", nextIndex);
-      self.enableDeleteButtonStyle("right");
-    });
-
-    $(document).on("click", ".template-reversible-input-delete-button", function(event){
-      if($('#template-reversible-input-table :input.template-reaction-textbox').length <= 1){
-        return;
+    );
+
+    $(document).on(
+      "click",
+      "#template-reversible-input-add-button",
+      function (event) {
+        var nextIndex =
+          parseInt(
+            $(
+              "#template-reversible-input-table :input.template-reaction-textbox"
+            )
+              .last()
+              .attr("name")
+          ) + 1;
+        self.addMacromolecule("left", nextIndex);
+        self.enableDeleteButtonStyle("left");
       }
-      var index = parseInt($(this).attr('name'));
-      self.removeMacromolecule("left",index);
-      if($('#template-reversible-input-table :input.template-reaction-textbox').length <= 1){
-        self.disableDeleteButtonStyle("left");
+    );
+
+    $(document).on(
+      "click",
+      "#template-reversible-output-add-button",
+      function (event) {
+        var nextIndex =
+          parseInt(
+            $(
+              "#template-reversible-output-table :input.template-reaction-textbox"
+            )
+              .last()
+              .attr("name")
+          ) + 1;
+        self.addMacromolecule("right", nextIndex);
+        self.enableDeleteButtonStyle("right");
       }
-    });
-
-    $(document).on("click", ".template-reversible-output-delete-button", function(event){
-      if($('#template-reversible-output-table :input.template-reaction-textbox').length <= 1){
-        return;
+    );
+
+    $(document).on(
+      "click",
+      ".template-reversible-input-delete-button",
+      function (event) {
+        if (
+          $("#template-reversible-input-table :input.template-reaction-textbox")
+            .length <= 1
+        ) {
+          return;
+        }
+        var index = parseInt($(this).attr("name"));
+        self.removeMacromolecule("left", index);
+        if (
+          $("#template-reversible-input-table :input.template-reaction-textbox")
+            .length <= 1
+        ) {
+          self.disableDeleteButtonStyle("left");
+        }
       }
-      var index = parseInt($(this).attr('name'));
-      self.removeMacromolecule("right",index);
-      if($('#template-reversible-output-table :input.template-reaction-textbox').length <= 1){
-        self.disableDeleteButtonStyle("right");
+    );
+
+    $(document).on(
+      "click",
+      ".template-reversible-output-delete-button",
+      function (event) {
+        if (
+          $(
+            "#template-reversible-output-table :input.template-reaction-textbox"
+          ).length <= 1
+        ) {
+          return;
+        }
+        var index = parseInt($(this).attr("name"));
+        self.removeMacromolecule("right", index);
+        if (
+          $(
+            "#template-reversible-output-table :input.template-reaction-textbox"
+          ).length <= 1
+        ) {
+          self.disableDeleteButtonStyle("right");
+        }
       }
-    });
+    );
 
     $(document).on("click", "#create-template", function (evt) {
-
       // use active chise instance
       var chiseInstance = appUtilities.getActiveChiseInstance();
 
@@ -3562,51 +4610,70 @@ var ReactionTemplateView = Backbone.View.extend({
       var cy = chiseInstance.getCy();
 
       // get current layout properties for cy
-      var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
+      var currentLayoutProperties = appUtilities.getScratch(
+        cy,
+        "currentLayoutProperties"
+      );
 
       var params = self.getAllParameters();
 
       var templateType = params.templateType;
       var nodeList = params.nodeList;
-      var complexName = params.templateReactionEnableComplexName ? params.templateReactionComplexName : undefined;
-      var tilingPaddingVertical = chiseInstance.calculatePaddings(currentLayoutProperties.tilingPaddingVertical);
-      var tilingPaddingHorizontal = chiseInstance.calculatePaddings(currentLayoutProperties.tilingPaddingHorizontal);
-      var layoutParam = {name: "fcose"};
-      if(templateType == "reversible"){
+      var complexName = params.templateReactionEnableComplexName
+        ? params.templateReactionComplexName
+        : undefined;
+      var tilingPaddingVertical = chiseInstance.calculatePaddings(
+        currentLayoutProperties.tilingPaddingVertical
+      );
+      var tilingPaddingHorizontal = chiseInstance.calculatePaddings(
+        currentLayoutProperties.tilingPaddingHorizontal
+      );
+      var layoutParam = { name: "fcose" };
+      if (templateType == "reversible") {
         nodeList = params.reversibleInputNodeList;
         complexName = params.reversibleOutputNodeList;
       }
-      chiseInstance.createTemplateReaction(templateType, nodeList, complexName, undefined, tilingPaddingVertical, tilingPaddingHorizontal, undefined, layoutParam);
+      chiseInstance.createTemplateReaction(
+        templateType,
+        nodeList,
+        complexName,
+        undefined,
+        tilingPaddingVertical,
+        tilingPaddingHorizontal,
+        undefined,
+        layoutParam
+      );
 
       //Update arrow-scale of newly added edges (newly added elements are selected so we just update selected edges)
-      var currentArrowScale = Number($('#arrow-scale').val());
-      cy.edges(":selected").style('arrow-scale', currentArrowScale);
+      var currentArrowScale = Number($("#arrow-scale").val());
+      cy.edges(":selected").style("arrow-scale", currentArrowScale);
 
-      $(self.el).modal('toggle');
+      $(self.el).modal("toggle");
     });
 
     $(document).on("click", "#cancel-template", function (evt) {
-      $(self.el).modal('toggle');
+      $(self.el).modal("toggle");
     });
   },
-  render: function() {
+  render: function () {
     var self = this;
     self.template = _.template($("#reaction-template-template").html());
     $(self.el).html(self.template);
     self.disableDeleteButtonStyle("reaction");
 
-    $(self.el).modal('show');
-    self.associatedHTMLContent = $('#reaction-template-left-td').html();
-    self.dissociatedHTMLContent = $('#reaction-template-right-td').html();
-    self.reversibleInputHTMLContent = $('#reversible-template-left-td').html();
-    self.reversibleOutputHTMLContent = $('#reversible-template-right-td').html();
+    $(self.el).modal("show");
+    self.associatedHTMLContent = $("#reaction-template-left-td").html();
+    self.dissociatedHTMLContent = $("#reaction-template-right-td").html();
+    self.reversibleInputHTMLContent = $("#reversible-template-left-td").html();
+    self.reversibleOutputHTMLContent = $(
+      "#reversible-template-right-td"
+    ).html();
     return this;
-  }
+  },
 });
 
 var GridPropertiesView = Backbone.View.extend({
-  initialize: function () {
-  },
+  initialize: function () {},
   copyProperties: function () {
     // use active cy instance
     var cy = appUtilities.getActiveCy();
@@ -3615,317 +4682,446 @@ var GridPropertiesView = Backbone.View.extend({
     var clonedProps = _.clone(appUtilities.defaultGridProperties);
 
     // update the scratch pad of cy
-    appUtilities.setScratch(cy, 'currentGridProperties', clonedProps);
+    appUtilities.setScratch(cy, "currentGridProperties", clonedProps);
 
     // return cloned props to make them accessible
     return clonedProps;
   },
   render: function () {
-
     // use active cy instance
     var cy = appUtilities.getActiveCy();
 
     // get current grid properties
-    var currentGridProperties = appUtilities.getScratch(cy, 'currentGridProperties');
+    var currentGridProperties = appUtilities.getScratch(
+      cy,
+      "currentGridProperties"
+    );
 
     var self = this;
     self.template = _.template($("#grid-properties-template").html());
     self.template = self.template(currentGridProperties);
     $(self.el).html(self.template);
     bindColorPicker2GridColorInputs();
-    $(self.el).modal('show');
+    $(self.el).modal("show");
 
     // The following functions give Snap Policy row a radio button functionality
     // and enable Show Grid when Snap to Grid is enabled
-    $(document).off("change", "#snap-to-grid").on("change", "#snap-to-grid", function(event){
-      $("#show-grid").prop('checked', true);
-      $("#snap-to-alignment-location").val("disabled");
-
-      if ($("#snap-to-grid").val() == "disabled" && $("#snap-to-alignment-location").val() == "disabled")
-        $("#no-snap").prop('checked', true);
-      else
-        $("#no-snap").prop('checked', false);
-    });
+    $(document)
+      .off("change", "#snap-to-grid")
+      .on("change", "#snap-to-grid", function (event) {
+        $("#show-grid").prop("checked", true);
+        $("#snap-to-alignment-location").val("disabled");
+
+        if (
+          $("#snap-to-grid").val() == "disabled" &&
+          $("#snap-to-alignment-location").val() == "disabled"
+        )
+          $("#no-snap").prop("checked", true);
+        else $("#no-snap").prop("checked", false);
+      });
 
-    $(document).off("change", "#snap-to-alignment-location").on("change", "#snap-to-alignment-location", function(event){
-      $("#snap-to-grid").val("disabled");
-      if ($("#snap-to-grid").val() == "disabled" && $("#snap-to-alignment-location").val() == "disabled")
-        $("#no-snap").prop('checked', true);
-      else
-        $("#no-snap").prop('checked', false);
-    });
+    $(document)
+      .off("change", "#snap-to-alignment-location")
+      .on("change", "#snap-to-alignment-location", function (event) {
+        $("#snap-to-grid").val("disabled");
+        if (
+          $("#snap-to-grid").val() == "disabled" &&
+          $("#snap-to-alignment-location").val() == "disabled"
+        )
+          $("#no-snap").prop("checked", true);
+        else $("#no-snap").prop("checked", false);
+      });
 
-    $(document).off("click", "#no-snap").on("click", "#no-snap", function(event){
-      $("#snap-to-grid").val("disabled");
-      $("#snap-to-alignment-location").val("disabled");
-    });
+    $(document)
+      .off("click", "#no-snap")
+      .on("click", "#no-snap", function (event) {
+        $("#snap-to-grid").val("disabled");
+        $("#snap-to-alignment-location").val("disabled");
+      });
 
-    $(document).off("click", "#save-grid").on("click", "#save-grid", function (evt) {
+    $(document)
+      .off("click", "#save-grid")
+      .on("click", "#save-grid", function (evt) {
+        // use active cy instance
+        var cy = appUtilities.getActiveCy();
+
+        // get current grid properties
+        var currentGridProperties = appUtilities.getScratch(
+          cy,
+          "currentGridProperties"
+        );
+
+        currentGridProperties.showGrid =
+          document.getElementById("show-grid").checked;
+        currentGridProperties.snapToGridOnRelease =
+          $("#snap-to-grid").val() == "onRelease";
+        currentGridProperties.snapToGridDuringDrag =
+          $("#snap-to-grid").val() == "duringDrag";
+        currentGridProperties.snapToAlignmentLocationOnRelease =
+          $("#snap-to-alignment-location").val() == "onRelease";
+        currentGridProperties.snapToAlignmentLocationDuringDrag =
+          $("#snap-to-alignment-location").val() == "duringDrag";
+        currentGridProperties.gridSize = Number(
+          document.getElementById("grid-size").value
+        );
+        currentGridProperties.gridColor =
+          document.getElementById("grid-color").value;
+        currentGridProperties.autoResizeNodes =
+          document.getElementById("auto-resize-nodes").checked;
+        currentGridProperties.showGeometricGuidelines = document.getElementById(
+          "show-geometric-guidelines"
+        ).checked;
+        currentGridProperties.showDistributionGuidelines =
+          document.getElementById("show-distribution-guidelines").checked;
+        currentGridProperties.showInitPosAlignment = document.getElementById(
+          "show-init-Pos-Alignment"
+        ).checked;
+        currentGridProperties.guidelineTolerance = Number(
+          document.getElementById("guideline-tolerance").value
+        );
+        currentGridProperties.guidelineColor = document.getElementById(
+          "geometric-guideline-color"
+        ).value;
+        currentGridProperties.horizontalGuidelineColor =
+          document.getElementById("horizontal-guideline-color").value;
+        currentGridProperties.verticalGuidelineColor = document.getElementById(
+          "vertical-guideline-color"
+        ).value;
+        currentGridProperties.initPosAlignmentColor = document.getElementById(
+          "init-Pos-Alignment-Color"
+        ).value;
+        currentGridProperties.geometricAlignmentRange = Number(
+          document.getElementById("geometric-alignment-range").value
+        );
+        currentGridProperties.distributionAlignmentRange = Number(
+          document.getElementById("distribution-alignment-range").value
+        );
+
+        // Line styles for guidelines
+        currentGridProperties.initPosAlignmentLine = $(
+          'select[name="init-Pos-Alignment-Line"] option:selected'
+        )
+          .val()
+          .split(",")
+          .map(Number);
+        (currentGridProperties.lineDash = $(
+          'select[id="geometric-Alignment-Line"] option:selected'
+        )
+          .val()
+          .split(",")
+          .map(Number)),
+          (currentGridProperties.horizontalDistLine = $(
+            'select[name="horizontal-Dist-Alignment-Line"] option:selected'
+          )
+            .val()
+            .split(",")
+            .map(Number));
+        currentGridProperties.verticalDistLine = $(
+          'select[name="vertical-Dist-Alignment-Line"] option:selected'
+        )
+          .val()
+          .split(",")
+          .map(Number);
+        cy.gridGuide({
+          drawGrid: currentGridProperties.showGrid,
+          gridColor: currentGridProperties.gridColor,
+          snapToGridOnRelease: currentGridProperties.snapToGridOnRelease,
+          snapToGridDuringDrag: currentGridProperties.snapToGridDuringDrag,
+          snapToAlignmentLocationOnRelease:
+            currentGridProperties.snapToAlignmentLocationOnRelease,
+          snapToAlignmentLocationDuringDrag:
+            currentGridProperties.snapToAlignmentLocationDuringDrag,
+          gridSpacing: currentGridProperties.gridSize,
+          resize: currentGridProperties.autoResizeNodes,
+          geometricGuideline: currentGridProperties.showGeometricGuidelines,
+          distributionGuidelines:
+            currentGridProperties.showDistributionGuidelines,
+          initPosAlignment: currentGridProperties.showInitPosAlignment,
+          guidelinesTolerance: currentGridProperties.guidelineTolerance,
+          guidelinesStyle: {
+            initPosAlignmentLine: currentGridProperties.initPosAlignmentLine,
+            lineDash: currentGridProperties.lineDash,
+            horizontalDistLine: currentGridProperties.horizontalDistLine,
+            verticalDistLine: currentGridProperties.verticalDistLine,
+            strokeStyle: currentGridProperties.guidelineColor,
+            horizontalDistColor: currentGridProperties.horizontalGuidelineColor,
+            verticalDistColor: currentGridProperties.verticalGuidelineColor,
+            initPosAlignmentColor: currentGridProperties.initPosAlignmentColor,
+            geometricGuidelineRange:
+              currentGridProperties.geometricAlignmentRange,
+            range: currentGridProperties.distributionAlignmentRange,
+          },
+        });
 
-      // use active cy instance
-      var cy = appUtilities.getActiveCy();
+        // reset current grid properties in scracth pad of cy
+        appUtilities.setScratch(
+          cy,
+          "currentGridProperties",
+          currentGridProperties
+        );
 
-      // get current grid properties
-      var currentGridProperties = appUtilities.getScratch(cy, 'currentGridProperties');
-
-      currentGridProperties.showGrid = document.getElementById("show-grid").checked;
-      currentGridProperties.snapToGridOnRelease = $("#snap-to-grid").val() == "onRelease";
-      currentGridProperties.snapToGridDuringDrag = $("#snap-to-grid").val() == "duringDrag";
-      currentGridProperties.snapToAlignmentLocationOnRelease = $("#snap-to-alignment-location").val() == "onRelease";
-      currentGridProperties.snapToAlignmentLocationDuringDrag = $("#snap-to-alignment-location").val() == "duringDrag";
-      currentGridProperties.gridSize = Number(document.getElementById("grid-size").value);
-      currentGridProperties.gridColor = document.getElementById("grid-color").value;
-      currentGridProperties.autoResizeNodes = document.getElementById("auto-resize-nodes").checked;
-      currentGridProperties.showGeometricGuidelines = document.getElementById("show-geometric-guidelines").checked;
-      currentGridProperties.showDistributionGuidelines = document.getElementById("show-distribution-guidelines").checked;
-      currentGridProperties.showInitPosAlignment = document.getElementById("show-init-Pos-Alignment").checked;
-      currentGridProperties.guidelineTolerance = Number(document.getElementById("guideline-tolerance").value);
-      currentGridProperties.guidelineColor = document.getElementById("geometric-guideline-color").value;
-      currentGridProperties.horizontalGuidelineColor = document.getElementById("horizontal-guideline-color").value;
-      currentGridProperties.verticalGuidelineColor = document.getElementById("vertical-guideline-color").value;
-      currentGridProperties.initPosAlignmentColor = document.getElementById("init-Pos-Alignment-Color").value;
-      currentGridProperties.geometricAlignmentRange = Number(document.getElementById("geometric-alignment-range").value);
-      currentGridProperties.distributionAlignmentRange = Number(document.getElementById("distribution-alignment-range").value);
-
-	  // Line styles for guidelines
-      currentGridProperties.initPosAlignmentLine = $('select[name="init-Pos-Alignment-Line"] option:selected').val().split(',').map(Number);
-      currentGridProperties.lineDash = $('select[id="geometric-Alignment-Line"] option:selected').val().split(',').map(Number),
-      currentGridProperties.horizontalDistLine = $('select[name="horizontal-Dist-Alignment-Line"] option:selected').val().split(',').map(Number);
-      currentGridProperties.verticalDistLine = $('select[name="vertical-Dist-Alignment-Line"] option:selected').val().split(',').map(Number);
-      cy.gridGuide({
-        drawGrid: currentGridProperties.showGrid,
-        gridColor: currentGridProperties.gridColor,
-        snapToGridOnRelease: currentGridProperties.snapToGridOnRelease,
-        snapToGridDuringDrag: currentGridProperties.snapToGridDuringDrag,
-        snapToAlignmentLocationOnRelease: currentGridProperties.snapToAlignmentLocationOnRelease,
-        snapToAlignmentLocationDuringDrag: currentGridProperties.snapToAlignmentLocationDuringDrag,
-        gridSpacing: currentGridProperties.gridSize,
-        resize: currentGridProperties.autoResizeNodes,
-        geometricGuideline: currentGridProperties.showGeometricGuidelines,
-        distributionGuidelines: currentGridProperties.showDistributionGuidelines,
-        initPosAlignment: currentGridProperties.showInitPosAlignment,
-        guidelinesTolerance: currentGridProperties.guidelineTolerance,
-        guidelinesStyle: {
-		  initPosAlignmentLine: currentGridProperties.initPosAlignmentLine,
-		  lineDash: currentGridProperties.lineDash,
-		  horizontalDistLine: currentGridProperties.horizontalDistLine,
-		  verticalDistLine: currentGridProperties.verticalDistLine,
-          strokeStyle: currentGridProperties.guidelineColor,
-		  horizontalDistColor: currentGridProperties.horizontalGuidelineColor,
-		  verticalDistColor: currentGridProperties.verticalGuidelineColor,
-		  initPosAlignmentColor: currentGridProperties.initPosAlignmentColor,
-          geometricGuidelineRange: currentGridProperties.geometricAlignmentRange,
-          range: currentGridProperties.distributionAlignmentRange
-        }
+        $(self.el).modal("toggle");
+        $(document).trigger("saveGridProperties", cy);
       });
 
-      // reset current grid properties in scracth pad of cy
-      appUtilities.setScratch(cy, 'currentGridProperties', currentGridProperties);
-
-      $(self.el).modal('toggle');
-      $(document).trigger('saveGridProperties', cy);
-    });
-
-    $(document).off("click", "#default-grid").on("click", "#default-grid", function (evt) {
-      var currentGridProperties = self.copyProperties();
-      self.template = _.template($("#grid-properties-template").html());
-      self.template = self.template(currentGridProperties);
-      $(self.el).html(self.template);
-      bindColorPicker2GridColorInputs();
-    });
+    $(document)
+      .off("click", "#default-grid")
+      .on("click", "#default-grid", function (evt) {
+        var currentGridProperties = self.copyProperties();
+        self.template = _.template($("#grid-properties-template").html());
+        self.template = self.template(currentGridProperties);
+        $(self.el).html(self.template);
+        bindColorPicker2GridColorInputs();
+      });
 
     return this;
-  }
+  },
 });
 
 // If the value includes ' ' char/s replace them with '_' char
 // to use it as part of html selector
-function sanitizeForHtml( val ) {
-  return val.replaceAll( ' ', '_' );
+function sanitizeForHtml(val) {
+  return val.replaceAll(" ", "_");
 }
 
 function getFontFamilyOptions() {
   return [
-    { value: '', label: '' },
-    { value: 'Helvetica', label: 'Helvetica' },
-    { value: 'Arial', label: 'Arial' },
-    { value: 'Calibri', label: 'Calibri' },
-    { value: 'Cambria', label: 'Cambria' },
-    { value: 'Comic Sans MS', label: 'Comic Sans MS' },
-    { value: 'Consolas', label: 'Consolas' },
-    { value: 'Corsiva', label: 'Corsiva' },
-    { value: 'Courier New', label: 'Courier New' },
-    { value: 'Droid Sans', label: 'Droid Sans' },
-    { value: 'Droid Serif', label: 'Droid Serif' },
-    { value: 'Georgia', label: 'Georgia' },
-    { value: 'Impact', label: 'Impact' },
-    { value: 'Lato', label: 'Lato' },
-    { value: 'Roboto', label: 'Roboto' },
-    { value: 'Source Sans Pro', label: 'Source Sans Pro' },
-    { value: 'Syncopate', label: 'Syncopate' },
-    { value: 'Times New Roman', label: 'Times New Roman' },
-    { value: 'Trebuchet MS', label: 'Trebuchet MS' },
-    { value: 'Ubuntu', label: 'Ubuntu' },
-    { value: 'Verdana', label: 'Verdana' }
+    { value: "", label: "" },
+    { value: "Helvetica", label: "Helvetica" },
+    { value: "Arial", label: "Arial" },
+    { value: "Calibri", label: "Calibri" },
+    { value: "Cambria", label: "Cambria" },
+    { value: "Comic Sans MS", label: "Comic Sans MS" },
+    { value: "Consolas", label: "Consolas" },
+    { value: "Corsiva", label: "Corsiva" },
+    { value: "Courier New", label: "Courier New" },
+    { value: "Droid Sans", label: "Droid Sans" },
+    { value: "Droid Serif", label: "Droid Serif" },
+    { value: "Georgia", label: "Georgia" },
+    { value: "Impact", label: "Impact" },
+    { value: "Lato", label: "Lato" },
+    { value: "Roboto", label: "Roboto" },
+    { value: "Source Sans Pro", label: "Source Sans Pro" },
+    { value: "Syncopate", label: "Syncopate" },
+    { value: "Times New Roman", label: "Times New Roman" },
+    { value: "Trebuchet MS", label: "Trebuchet MS" },
+    { value: "Ubuntu", label: "Ubuntu" },
+    { value: "Verdana", label: "Verdana" },
   ];
 }
 
 function getFontWeightOptions() {
   return [
-    { value: '', label: '' },
-    { value: 'lighter', label: 'Lighter' },
-    { value: 'normal', label: 'Normal' },
-    { value: 'bold', label: 'Bold' },
-    { value: 'bolder', label: 'Bolder' }
+    { value: "", label: "" },
+    { value: "lighter", label: "Lighter" },
+    { value: "normal", label: "Normal" },
+    { value: "bold", label: "Bold" },
+    { value: "bolder", label: "Bolder" },
   ];
 }
 
 function getFontStyleOptions() {
   return [
-    { value: '', label: '' },
-    { value: 'normal', label: 'Normal' },
-    { value: 'italic', label: 'Italic' },
-    { value: 'oblique', label: 'Oblique' }
+    { value: "", label: "" },
+    { value: "normal", label: "Normal" },
+    { value: "italic", label: "Italic" },
+    { value: "oblique", label: "Oblique" },
   ];
 }
 
 function generateFontPropertiesRows(selectorPrefix, labelPrefix, properties) {
   var html = "";
 
-  var familyOptStyle = [{
-    name: 'font-family',
-    value: function(ff) {
-      return ff;
-    }
-  }];
-
-  html += wrapToTr( [ generateLabelTd( 'Family', labelPrefix ),
-          generateSelectListTd( getFontFamilyOptions(), properties.fontFamily, selectorPrefix, 'font-family', familyOptStyle ) ] );
-
-  html += wrapToTr( [ generateLabelTd( 'Size', labelPrefix ),
-          generateIntegerInputBoxTd( selectorPrefix, 'font-size', properties.fontSize ) ] );
-
-  html += wrapToTr( [ generateLabelTd( 'Weight', labelPrefix  ),
-          generateSelectListTd( getFontWeightOptions(), properties.fontWeight, selectorPrefix, 'font-weight' ) ] );
-
-  html += wrapToTr( [ generateLabelTd( 'Type', labelPrefix ),
-          generateSelectListTd( getFontStyleOptions(), properties.fontStyle, selectorPrefix, 'font-style' ) ] );
+  var familyOptStyle = [
+    {
+      name: "font-family",
+      value: function (ff) {
+        return ff;
+      },
+    },
+  ];
 
-  html += wrapToTr( [ generateLabelTd( 'Color', labelPrefix ),
-          generateColorInputBoxTd( selectorPrefix, 'font-color', properties.fontColor ) ] );
+  html += wrapToTr([
+    generateLabelTd("Family", labelPrefix),
+    generateSelectListTd(
+      getFontFamilyOptions(),
+      properties.fontFamily,
+      selectorPrefix,
+      "font-family",
+      familyOptStyle
+    ),
+  ]);
+
+  html += wrapToTr([
+    generateLabelTd("Size", labelPrefix),
+    generateIntegerInputBoxTd(selectorPrefix, "font-size", properties.fontSize),
+  ]);
+
+  html += wrapToTr([
+    generateLabelTd("Weight", labelPrefix),
+    generateSelectListTd(
+      getFontWeightOptions(),
+      properties.fontWeight,
+      selectorPrefix,
+      "font-weight"
+    ),
+  ]);
+
+  html += wrapToTr([
+    generateLabelTd("Type", labelPrefix),
+    generateSelectListTd(
+      getFontStyleOptions(),
+      properties.fontStyle,
+      selectorPrefix,
+      "font-style"
+    ),
+  ]);
+
+  html += wrapToTr([
+    generateLabelTd("Color", labelPrefix),
+    generateColorInputBoxTd(selectorPrefix, "font-color", properties.fontColor),
+  ]);
 
   return html;
 }
 
 function generateColorInputBoxTd(selectorPrefix, propName, value) {
-  var id = generateInputId( propName, selectorPrefix );
-  var html = '<input id="' + id + '"'
-          + ' class="inspector-input-box"'
-          + ' type="color"'
-          + ' name="' + id + '"'
-          + ' value="' + value +  '"'
-          + '/>';
-
-  return wrapToTd( html );
+  var id = generateInputId(propName, selectorPrefix);
+  var html =
+    '<input id="' +
+    id +
+    '"' +
+    ' class="inspector-input-box"' +
+    ' type="color"' +
+    ' name="' +
+    id +
+    '"' +
+    ' value="' +
+    value +
+    '"' +
+    "/>";
+
+  return wrapToTd(html);
 }
 
 function generateIntegerInputBoxTd(selectorPrefix, propName, value) {
-  var html = '<input id="' + generateInputId( propName, selectorPrefix ) + '"'
-          + ' type="text"'
-          + ' min="1"'
-          + ' class="sbgn-input-small layout-text integer-input"'
-          + ' value="' + value + '"'
-          + '/>';
-
-  return wrapToTd( html );
+  var html =
+    '<input id="' +
+    generateInputId(propName, selectorPrefix) +
+    '"' +
+    ' type="text"' +
+    ' min="1"' +
+    ' class="sbgn-input-small layout-text integer-input"' +
+    ' value="' +
+    value +
+    '"' +
+    "/>";
+
+  return wrapToTd(html);
 }
 
-function generateInputId( propName, selectorPrefix, selectorPostfix ) {
-  var pretext = selectorPrefix ? selectorPrefix + '-' : '';
-  var posttext = selectorPostfix ? '-' + selectorPostfix : '';
+function generateInputId(propName, selectorPrefix, selectorPostfix) {
+  var pretext = selectorPrefix ? selectorPrefix + "-" : "";
+  var posttext = selectorPostfix ? "-" + selectorPostfix : "";
   return pretext + propName + posttext;
 }
 
-function generateSelectBoxNameSelector( propName, selectorPrefix ) {
-  var id = generateInputId( propName, selectorPrefix, 'select-box' );
+function generateSelectBoxNameSelector(propName, selectorPrefix) {
+  var id = generateInputId(propName, selectorPrefix, "select-box");
   var selector = 'select[name="' + id + '"] option:selected';
 
   return selector;
 }
 
-function generateSelectListTd(options, selectedVal, selectorPrefix, propName, optionStyle) {
-  var html = '';
-  var selectboxId = generateInputId( propName, selectorPrefix, 'select-box' );
-  var selectBoxOpenHtml = '<select id="' + selectboxId + '"'
-    + ' class="input-medium layout-text"'
-    + ' name="' + selectboxId + '"'
-    + '>';
+function generateSelectListTd(
+  options,
+  selectedVal,
+  selectorPrefix,
+  propName,
+  optionStyle
+) {
+  var html = "";
+  var selectboxId = generateInputId(propName, selectorPrefix, "select-box");
+  var selectBoxOpenHtml =
+    '<select id="' +
+    selectboxId +
+    '"' +
+    ' class="input-medium layout-text"' +
+    ' name="' +
+    selectboxId +
+    '"' +
+    ">";
 
   html += selectBoxOpenHtml;
 
-  var getSelectedStr = function( optionVal ) {
-    return optionVal === selectedVal ? ' selected' : '';
+  var getSelectedStr = function (optionVal) {
+    return optionVal === selectedVal ? " selected" : "";
   };
 
-  options.forEach( function( option ) {
+  options.forEach(function (option) {
     var optionVal = option.value;
-    var postfix = optionVal ? optionVal : 'none';
-    postfix = sanitizeForHtml( postfix );
+    var postfix = optionVal ? optionVal : "none";
+    postfix = sanitizeForHtml(postfix);
     var optionLabel = option.label;
 
-    var styleStr = '';
+    var styleStr = "";
 
-    if ( optionStyle && optionStyle.length > 0 ) {
+    if (optionStyle && optionStyle.length > 0) {
       var styleStr = ' style="';
-      optionStyle.forEach( function( style ) {
-        var val = typeof style.value == 'function' ?
-                  style.value( optionVal ) : optionVal;
-        styleStr += ( style.name + ': ' + val + ';' );
-      } );
+      optionStyle.forEach(function (style) {
+        var val =
+          typeof style.value == "function" ? style.value(optionVal) : optionVal;
+        styleStr += style.name + ": " + val + ";";
+      });
       styleStr += '"';
     }
 
-    var optionId = generateInputId( propName, selectorPrefix, postfix );
-    var optionHtml = '<option id="' + optionId + '"'
-      + ' value="' + optionVal + '"'
-      + styleStr
-      + getSelectedStr( optionVal )
-      + '>'
-      + option.label
-      + '</option>';
+    var optionId = generateInputId(propName, selectorPrefix, postfix);
+    var optionHtml =
+      '<option id="' +
+      optionId +
+      '"' +
+      ' value="' +
+      optionVal +
+      '"' +
+      styleStr +
+      getSelectedStr(optionVal) +
+      ">" +
+      option.label +
+      "</option>";
 
     html += optionHtml;
-  } );
+  });
 
-  html += '</select>';
+  html += "</select>";
 
-  return wrapToTd( html );
+  return wrapToTd(html);
 }
 
 function generateLabelTd(mainText, prefix, postfix) {
-  prefix = prefix ? prefix + ' ' : '';
-  postfix = postfix ? ' ' + postfix : '';
+  prefix = prefix ? prefix + " " : "";
+  postfix = postfix ? " " + postfix : "";
   label = prefix + mainText + postfix;
 
-  return wrapToTd( '<span class="add-on layout-text">' + label + '</span>' );
+  return wrapToTd('<span class="add-on layout-text">' + label + "</span>");
 }
 
-function wrapToTd(innerHtml){
-  var html = '<td>';
+function wrapToTd(innerHtml) {
+  var html = "<td>";
   html += innerHtml;
-  html += '</td>';
+  html += "</td>";
 
   return html;
 }
 
 function wrapToTr(tdList) {
-  var html = '<tr>';
+  var html = "<tr>";
 
-  tdList.forEach( function( td ) {
+  tdList.forEach(function (td) {
     html += td;
-  } );
+  });
 
-  html += '</tr>';
+  html += "</tr>";
 
   return html;
 }
@@ -3936,49 +5132,74 @@ var FontPropertiesView = Backbone.View.extend({
     fontSize: "",
     fontWeight: "",
     fontStyle: "",
-    fontColor: ""
+    fontColor: "",
   },
   currentFontProperties: undefined,
-  selectorPrefix: 'font-properties',
+  selectorPrefix: "font-properties",
   copyProperties: function () {
     this.currentFontProperties = _.clone(this.defaultFontProperties);
   },
   initialize: function () {
     var self = this;
     self.copyProperties();
-    self.defaultFontProperties.generateFontPropertiesRows = function() {
-      return generateFontPropertiesRows( self.selectorPrefix, '', self.currentFontProperties );
+    self.defaultFontProperties.generateFontPropertiesRows = function () {
+      return generateFontPropertiesRows(
+        self.selectorPrefix,
+        "",
+        self.currentFontProperties
+      );
     };
     self.template = _.template($("#font-properties-template").html());
     self.template = self.template(self.defaultFontProperties);
   },
   extendProperties: function (eles) {
-
     var chiseInstance = appUtilities.getActiveChiseInstance();
 
     var self = this;
     var commonProperties = {};
 
     // Get common properties. Note that we check the data field for labelsize property and css field for other properties.
-    var commonFontSize = parseInt(chiseInstance.elementUtilities.getCommonProperty(eles, "font-size", "data"));
-    var commonFontWeight = chiseInstance.elementUtilities.getCommonProperty(eles, "font-weight", "data");
-    var commonFontFamily = chiseInstance.elementUtilities.getCommonProperty(eles, "font-family", "data");
-    var commonFontStyle = chiseInstance.elementUtilities.getCommonProperty(eles, "font-style", "data");
-    var commonFontColor = chiseInstance.elementUtilities.getCommonProperty(eles, "color", "data");
-
-    if( commonFontSize != null ) {
+    var commonFontSize = parseInt(
+      chiseInstance.elementUtilities.getCommonProperty(
+        eles,
+        "font-size",
+        "data"
+      )
+    );
+    var commonFontWeight = chiseInstance.elementUtilities.getCommonProperty(
+      eles,
+      "font-weight",
+      "data"
+    );
+    var commonFontFamily = chiseInstance.elementUtilities.getCommonProperty(
+      eles,
+      "font-family",
+      "data"
+    );
+    var commonFontStyle = chiseInstance.elementUtilities.getCommonProperty(
+      eles,
+      "font-style",
+      "data"
+    );
+    var commonFontColor = chiseInstance.elementUtilities.getCommonProperty(
+      eles,
+      "color",
+      "data"
+    );
+
+    if (commonFontSize != null) {
       commonProperties.fontSize = commonFontSize;
     }
 
-    if( commonFontWeight != null ) {
+    if (commonFontWeight != null) {
       commonProperties.fontWeight = commonFontWeight;
     }
 
-    if( commonFontFamily != null ) {
+    if (commonFontFamily != null) {
       commonProperties.fontFamily = commonFontFamily;
     }
 
-    if( commonFontStyle != null ) {
+    if (commonFontStyle != null) {
       commonProperties.fontStyle = commonFontStyle;
     }
 
@@ -3986,7 +5207,11 @@ var FontPropertiesView = Backbone.View.extend({
       commonProperties.fontColor = commonFontColor;
     }
 
-    self.currentFontProperties = $.extend({}, this.defaultFontProperties, commonProperties);
+    self.currentFontProperties = $.extend(
+      {},
+      this.defaultFontProperties,
+      commonProperties
+    );
   },
   render: function (eles) {
     var self = this;
@@ -3994,306 +5219,357 @@ var FontPropertiesView = Backbone.View.extend({
     self.template = _.template($("#font-properties-template").html());
     self.template = self.template(self.currentFontProperties);
     $(self.el).html(self.template);
-    colorPickerUtils.bindPicker2Input('#' + generateInputId('font-color', self.selectorPrefix), null);
-    $(self.el).modal('show');
-
-    $(document).off("click", "#set-font-properties").on("click", "#set-font-properties", function (evt) {
-
-      // use the active chise instance
-      var chiseInstance = appUtilities.getActiveChiseInstance();
-
-      // use the associated cy instance
-      var cy = chiseInstance.getCy();
-
-      var data = {};
-
-      var fontsize = $( '#' + generateInputId( 'font-size', self.selectorPrefix ) ).val();
-      var fontfamily = $( generateSelectBoxNameSelector( 'font-family', self.selectorPrefix ) ).val();
-      var fontweight = $( generateSelectBoxNameSelector( 'font-weight', self.selectorPrefix ) ).val();
-      var fontstyle = $( generateSelectBoxNameSelector( 'font-style', self.selectorPrefix ) ).val();
-      var fontcolor = $( '#' + generateInputId( 'font-color', self.selectorPrefix ) ).val();
+    colorPickerUtils.bindPicker2Input(
+      "#" + generateInputId("font-color", self.selectorPrefix),
+      null
+    );
+    $(self.el).modal("show");
+
+    $(document)
+      .off("click", "#set-font-properties")
+      .on("click", "#set-font-properties", function (evt) {
+        // use the active chise instance
+        var chiseInstance = appUtilities.getActiveChiseInstance();
+
+        // use the associated cy instance
+        var cy = chiseInstance.getCy();
+
+        var data = {};
+
+        var fontsize = $(
+          "#" + generateInputId("font-size", self.selectorPrefix)
+        ).val();
+        var fontfamily = $(
+          generateSelectBoxNameSelector("font-family", self.selectorPrefix)
+        ).val();
+        var fontweight = $(
+          generateSelectBoxNameSelector("font-weight", self.selectorPrefix)
+        ).val();
+        var fontstyle = $(
+          generateSelectBoxNameSelector("font-style", self.selectorPrefix)
+        ).val();
+        var fontcolor = $(
+          "#" + generateInputId("font-color", self.selectorPrefix)
+        ).val();
+
+        if (fontsize != "") {
+          data["font-size"] = parseInt(fontsize);
+        }
 
-      if ( fontsize != '' ) {
-        data['font-size'] = parseInt(fontsize);
-      }
+        if (fontfamily != "") {
+          data["font-family"] = fontfamily;
+        }
 
-      if ( fontfamily != '' ) {
-        data['font-family'] = fontfamily;
-      }
+        if (fontweight != "") {
+          data["font-weight"] = fontweight;
+        }
 
-      if ( fontweight != '' ) {
-        data['font-weight'] = fontweight;
-      }
+        if (fontstyle != "") {
+          data["font-style"] = fontstyle;
+        }
 
-      if ( fontstyle != '' ) {
-        data['font-style'] = fontstyle;
-      }
+        if (fontcolor != "") {
+          data["color"] = fontcolor;
+        }
 
-      if ( fontcolor != '') {
-        data['color'] = fontcolor;
-      }
+        var keys = Object.keys(data);
 
-      var keys = Object.keys(data);
+        if (keys.length === 0) {
+          return;
+        }
 
-      if(keys.length === 0) {
-        return;
-      }
+        var validAction = false; // If there is nothing to change the action is not valid
 
-      var validAction = false; // If there is nothing to change the action is not valid
+        for (var i = 0; i < eles.length; i++) {
+          var ele = eles[i];
 
-      for ( var i = 0; i < eles.length; i++ ) {
-        var ele = eles[i];
+          keys.forEach(function (key, idx) {
+            // If there is some property to change signal that the action is valid.
+            if (data[key] != ele.data(key)) {
+              validAction = true;
+            }
+          });
 
-        keys.forEach(function(key, idx) {
-          // If there is some property to change signal that the action is valid.
-          if (data[key] != ele.data(key)){
-            validAction = true;
+          if (validAction) {
+            break;
           }
-        });
-
-        if ( validAction ) {
-          break;
         }
-      }
-
-      if ( validAction === false ) {
-        $(self.el).modal('toggle');
-        return;
-      }
 
-      chiseInstance.changeFontProperties(eles, data);
+        if (validAction === false) {
+          $(self.el).modal("toggle");
+          return;
+        }
 
-      self.copyProperties();
+        chiseInstance.changeFontProperties(eles, data);
 
+        self.copyProperties();
 
-      $(self.el).modal('toggle');
-	    $(document).trigger('saveFontProperties', cy);
-    });
+        $(self.el).modal("toggle");
+        $(document).trigger("saveFontProperties", cy);
+      });
 
     return this;
-  }
+  },
 });
 
 var InfoboxPropertiesView = Backbone.View.extend({
   currentProperties: null,
-  initialize: function () {
-  },
+  initialize: function () {},
   propsMap: {
-    'fontFamily': 'font-family',
-    'fontSize': 'font-size',
-    'fontWeight': 'font-weight',
-    'fontStyle': 'font-style',
-    'fontColor': 'font-color',
-    'borderColor': 'border-color',
-    'fillColor': 'background-color',
-    'borderWidth': 'border-width',
-    'shapeName': 'shape-name'
+    fontFamily: "font-family",
+    fontSize: "font-size",
+    fontWeight: "font-weight",
+    fontStyle: "font-style",
+    fontColor: "font-color",
+    borderColor: "border-color",
+    fillColor: "background-color",
+    borderWidth: "border-width",
+    shapeName: "shape-name",
   },
-  selectorPrefix: 'infobox-properties',
-  fontLabelPrefix: 'Font ',
-  updateCurrentProperties: function(infobox) {
+  selectorPrefix: "infobox-properties",
+  fontLabelPrefix: "Font ",
+  updateCurrentProperties: function (infobox) {
     var self = this;
     var infoboxStyle = infobox.style;
 
     self.currentProperties = {};
 
-    for ( var prop in this.propsMap ) {
-      var mappedProp = this.propsMap[ prop ];
-      self.currentProperties[ prop ] = infoboxStyle[ mappedProp ];
+    for (var prop in this.propsMap) {
+      var mappedProp = this.propsMap[prop];
+      self.currentProperties[prop] = infoboxStyle[mappedProp];
     }
 
-    self.currentProperties.generateSelectShapeRow = function() {
+    self.currentProperties.generateSelectShapeRow = function () {
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var cy = appUtilities.getActiveCy();
       var elementUtilities = chiseInstance.elementUtilities;
-      var parent = chiseInstance.classes.getAuxUnitClass(infobox).getParent(infobox, cy);
+      var parent = chiseInstance.classes
+        .getAuxUnitClass(infobox)
+        .getParent(infobox, cy);
       var shapeListFcn;
 
       switch (infobox.clazz) {
-        case 'state variable':
+        case "state variable":
           shapeListFcn = elementUtilities.getStateVarShapeOptions;
           break;
-        case 'unit of information':
+        case "unit of information":
           shapeListFcn = elementUtilities.getUnitOfInfoShapeOptions;
           break;
       }
 
-      shapeList = shapeListFcn( parent.data( 'class' ) );
+      shapeList = shapeListFcn(parent.data("class"));
 
-      if ( shapeList.length <= 1 ) {
+      if (shapeList.length <= 1) {
         return "";
       }
 
       var options = [];
 
-      shapeList.forEach( function( shapeName ) {
-        options.push( {
+      shapeList.forEach(function (shapeName) {
+        options.push({
           value: shapeName,
-          label: shapeName
-        } );
-      } );
+          label: shapeName,
+        });
+      });
 
-      return wrapToTr( [ generateLabelTd( 'Shape', null ),
-              generateSelectListTd( options, self.currentProperties.shapeName, self.selectorPrefix, 'shape-name' ) ] );
+      return wrapToTr([
+        generateLabelTd("Shape", null),
+        generateSelectListTd(
+          options,
+          self.currentProperties.shapeName,
+          self.selectorPrefix,
+          "shape-name"
+        ),
+      ]);
     };
 
-    self.currentProperties.generateFontPropertiesRows = function() {
-      return generateFontPropertiesRows( self.selectorPrefix, self.fontLabelPrefix, self.currentProperties );
+    self.currentProperties.generateFontPropertiesRows = function () {
+      return generateFontPropertiesRows(
+        self.selectorPrefix,
+        self.fontLabelPrefix,
+        self.currentProperties
+      );
     };
 
-    self.currentProperties.generateSetAsDefaultText = function() {
+    self.currentProperties.generateSetAsDefaultText = function () {
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var cy = appUtilities.getActiveCy();
-      var parent = chiseInstance.classes.getAuxUnitClass(infobox).getParent(infobox, cy);
-      var classInfo = appUtilities.transformClassInfo( parent.data('class') );
+      var parent = chiseInstance.classes
+        .getAuxUnitClass(infobox)
+        .getParent(infobox, cy);
+      var classInfo = appUtilities.transformClassInfo(parent.data("class"));
       var infoboxInfoMap = {
-        'state variable': 'State Variable',
-        'unit of information': 'Unit of Information'
+        "state variable": "State Variable",
+        "unit of information": "Unit of Information",
       };
-      var infoboxInfo = infoboxInfoMap[ infobox.clazz ];
+      var infoboxInfo = infoboxInfoMap[infobox.clazz];
 
-      return 'Set as Default for ' + infoboxInfo + ' of ' + classInfo;
-    }
+      return "Set as Default for " + infoboxInfo + " of " + classInfo;
+    };
   },
   render: function (node, index) {
     var self = this;
-    var infoboxObj = node.data('statesandinfos')[index];
+    var infoboxObj = node.data("statesandinfos")[index];
 
     var inputTypes = {
-      'font-size': 'regular',
-      'font-family': 'selectbox',
-      'font-weight': 'selectbox',
-      'font-style': 'selectbox',
-      'font-color': 'regular',
-      'border-color': 'regular',
-      'background-color': 'regular',
-      'border-width': 'regular',
-      'shape-name': 'selectbox'
+      "font-size": "regular",
+      "font-family": "selectbox",
+      "font-weight": "selectbox",
+      "font-style": "selectbox",
+      "font-color": "regular",
+      "border-color": "regular",
+      "background-color": "regular",
+      "border-width": "regular",
+      "shape-name": "selectbox",
     };
 
     self.updateCurrentProperties(infoboxObj);
     self.template = _.template($("#infobox-properties-template").html());
     self.template = self.template(self.currentProperties);
     $(self.el).html(self.template);
-    colorPickerUtils.bindPicker2Input('#infobox-properties-border-color', null);
-    colorPickerUtils.bindPicker2Input('#infobox-properties-background-color', null);
-    colorPickerUtils.bindPicker2Input('#' + generateInputId('font-color', self.selectorPrefix), null);
-
-    $(self.el).modal('show');
+    colorPickerUtils.bindPicker2Input("#infobox-properties-border-color", null);
+    colorPickerUtils.bindPicker2Input(
+      "#infobox-properties-background-color",
+      null
+    );
+    colorPickerUtils.bindPicker2Input(
+      "#" + generateInputId("font-color", self.selectorPrefix),
+      null
+    );
+
+    $(self.el).modal("show");
 
     function readInfoboxProps() {
       var props = {};
 
-      for ( prop in self.propsMap ) {
-        var mappedProp = self.propsMap[ prop ];
+      for (prop in self.propsMap) {
+        var mappedProp = self.propsMap[prop];
         var val;
 
-        if ( inputTypes[ mappedProp ] == 'regular' ) {
-          val = $( '#' + generateInputId( mappedProp, self.selectorPrefix ) ).val();
-        }
-        else if ( inputTypes[ mappedProp ] == 'selectbox' ) {
-          val = $( generateSelectBoxNameSelector( mappedProp, self.selectorPrefix ) ).val();
+        if (inputTypes[mappedProp] == "regular") {
+          val = $("#" + generateInputId(mappedProp, self.selectorPrefix)).val();
+        } else if (inputTypes[mappedProp] == "selectbox") {
+          val = $(
+            generateSelectBoxNameSelector(mappedProp, self.selectorPrefix)
+          ).val();
         }
 
-        props[ mappedProp ] = val;
+        props[mappedProp] = val;
       }
 
       return props;
     }
 
-    $(document).off("click", "#set-infobox-properties").on("click", "#set-infobox-properties", function( evt ) {
-      var newProps = readInfoboxProps();
+    $(document)
+      .off("click", "#set-infobox-properties")
+      .on("click", "#set-infobox-properties", function (evt) {
+        var newProps = readInfoboxProps();
 
-      appUtilities.getActiveChiseInstance().updateInfoboxStyle(node, index, newProps);
+        appUtilities
+          .getActiveChiseInstance()
+          .updateInfoboxStyle(node, index, newProps);
 
-      $(self.el).modal('toggle');
-    });
-
-    $(document).off("click", "#set-as-default-infobox-properties").on("click", "#set-as-default-infobox-properties", function( evt ) {
+        $(self.el).modal("toggle");
+      });
 
-      if (typeof appUtilities.stagedElementStyles === 'undefined') {
-        appUtilities.stagedElementStyles = [];
-      } 
-     
-      var chiseInstance = appUtilities.getActiveChiseInstance();
-      var cy = appUtilities.getActiveCy();
-      var parent = chiseInstance.classes.getAuxUnitClass(infoboxObj).getParent(infoboxObj, cy);
-      var parentClass = parent.data('class');
-
-     
-      var updates = readInfoboxProps();
-      var currentDefaults = chiseInstance.elementUtilities.getDefaultProperties( parentClass )[ infoboxObj.clazz ];
-      var infoboxStyle = $.extend( {}, currentDefaults, updates );
-      chiseInstance.setDefaultProperty( parentClass, infoboxObj.clazz, infoboxStyle );
-
-      var  stagedElement =  appUtilities.stagedElementStyles.find(b => b.element == parentClass);
-      if(stagedElement)
-      {
-        var stagedElementInfoboxStyles = stagedElement.infoBoxStyles.find(b=>b.clazz == infoboxObj.clazz);
-        if(stagedElementInfoboxStyles)
-        {
-          stagedElementInfoboxStyles.styles = infoboxStyle;
-        }
-        else
-        {
-          stagedElement.infoBoxStyles.push({clazz:infoboxObj.clazz,styles:infoboxStyle});
+    $(document)
+      .off("click", "#set-as-default-infobox-properties")
+      .on("click", "#set-as-default-infobox-properties", function (evt) {
+        if (typeof appUtilities.stagedElementStyles === "undefined") {
+          appUtilities.stagedElementStyles = [];
         }
-      }
-      else
-      {
-            appUtilities.stagedElementStyles.push({element : parentClass, type:'node',styles:[], infoBoxStyles:[{clazz:infoboxObj.clazz,styles:infoboxStyle}]});
-      }
 
-     
-    });
-  }
+        var chiseInstance = appUtilities.getActiveChiseInstance();
+        var cy = appUtilities.getActiveCy();
+        var parent = chiseInstance.classes
+          .getAuxUnitClass(infoboxObj)
+          .getParent(infoboxObj, cy);
+        var parentClass = parent.data("class");
+
+        var updates = readInfoboxProps();
+        var currentDefaults =
+          chiseInstance.elementUtilities.getDefaultProperties(parentClass)[
+            infoboxObj.clazz
+          ];
+        var infoboxStyle = $.extend({}, currentDefaults, updates);
+        chiseInstance.setDefaultProperty(
+          parentClass,
+          infoboxObj.clazz,
+          infoboxStyle
+        );
+
+        var stagedElement = appUtilities.stagedElementStyles.find(
+          (b) => b.element == parentClass
+        );
+        if (stagedElement) {
+          var stagedElementInfoboxStyles = stagedElement.infoBoxStyles.find(
+            (b) => b.clazz == infoboxObj.clazz
+          );
+          if (stagedElementInfoboxStyles) {
+            stagedElementInfoboxStyles.styles = infoboxStyle;
+          } else {
+            stagedElement.infoBoxStyles.push({
+              clazz: infoboxObj.clazz,
+              styles: infoboxStyle,
+            });
+          }
+        } else {
+          appUtilities.stagedElementStyles.push({
+            element: parentClass,
+            type: "node",
+            styles: [],
+            infoBoxStyles: [{ clazz: infoboxObj.clazz, styles: infoboxStyle }],
+          });
+        }
+      });
+  },
 });
 
 var AnnotationListView = Backbone.View.extend({
   elements: [],
-  el: '#annotations-container',
+  el: "#annotations-container",
   initialize: function () {
-    this.listenTo(this.model, 'add', this.addAnnotationElementView);
-    this.listenTo(this.model, 'destroy', this.resetAndPopulate);
+    this.listenTo(this.model, "add", this.addAnnotationElementView);
+    this.listenTo(this.model, "destroy", this.resetAndPopulate);
     this.resetAndPopulate();
   },
   events: {
-    'click #annotations-add-button': 'createAnnotation'
+    "click #annotations-add-button": "createAnnotation",
   },
-  resetAndPopulate: function() {
+  resetAndPopulate: function () {
     this.elements = [];
     this.render();
     // populate from the model
     var self = this;
-    this.model.forEach(function(item){
+    this.model.forEach(function (item) {
       self.addAnnotationElementView(item);
     });
   },
-  createAnnotation: function(e) {
-    var newAnnot = this.model.create({cyParent: this.model.cyParent});
+  createAnnotation: function (e) {
+    var newAnnot = this.model.create({ cyParent: this.model.cyParent });
   },
-  addAnnotationElementView: function(annotationModel) {
-    var view = new AnnotationElementView({model: annotationModel});
+  addAnnotationElementView: function (annotationModel) {
+    var view = new AnnotationElementView({ model: annotationModel });
     this.elements.push(view);
-    this.$el.find('p#annotations-small-helptext').remove();
-    this.$el.children('div').first().append(view.render().el);
+    this.$el.find("p#annotations-small-helptext").remove();
+    this.$el.children("div").first().append(view.render().el);
   },
   render: function () {
     this.template = _.template($("#annotation-list-template").html());
     this.$el.empty();
     var renderedElement = [];
-    for(var i=0; i<this.elements.length; i++) {
+    for (var i = 0; i < this.elements.length; i++) {
       renderedElement.push(this.elements[i].render().$el.html());
     }
-    this.$el.html(this.template({elements: renderedElement}));
+    this.$el.html(this.template({ elements: renderedElement }));
     return this;
-  }
+  },
 });
 
 var AnnotationElementView = Backbone.View.extend({
   //status is: unchecked, pending, validated, error
   previousSelectedRelation: null, // convenience variable, to check change in controlled vocabulary mode
-  tagName: 'div',
+  tagName: "div",
   initialize: function () {
     /**
      * We need to debounce the text input, but if we do that when defining events normally, we lose the context (this)
@@ -4301,34 +5577,39 @@ var AnnotationElementView = Backbone.View.extend({
      * This is done through delegateEvents
      */
     var eventsHash = this.events; // get all defined events
-    eventsHash["input .annotations-object-identifier"] = _.debounce(this.valueChangeHandler, 1000); // add the one that need debounce
+    eventsHash["input .annotations-object-identifier"] = _.debounce(
+      this.valueChangeHandler,
+      1000
+    ); // add the one that need debounce
     this.delegateEvents(eventsHash); // redefine all events with delegate
 
     /** bind events triggered on change of model */
-    this.listenTo(this.model, 'change:status', this.statusChangeHandler);
+    this.listenTo(this.model, "change:status", this.statusChangeHandler);
   },
   events: {
-    "change .annotations-db-list": 'dbChangeHandler',
-    "change .annotations-vocabulary-list": 'vocabularyChangeHandler',
-    "click .annotations-retry-validation": 'retryHandler',
-    "click .delete-annotation": 'deleteHandler'
+    "change .annotations-db-list": "dbChangeHandler",
+    "change .annotations-vocabulary-list": "vocabularyChangeHandler",
+    "click .annotations-retry-validation": "retryHandler",
+    "click .delete-annotation": "deleteHandler",
     //"input .annotations-object-identifier": "valueChangeHandler" <-- see initialize
   },
-  dbChangeHandler: function(e) {
+  dbChangeHandler: function (e) {
     var selectedDBkey = $(e.currentTarget).val();
     if (this.underControlledMode()) {
-      this.model.set('selectedDB', selectedDBkey);
+      this.model.set("selectedDB", selectedDBkey);
       this.model.save();
       this.launchValidation();
-    }
-    else {
-      if (selectedDBkey && !(selectedDBkey.length === 0 || !selectedDBkey.trim())) {
+    } else {
+      if (
+        selectedDBkey &&
+        !(selectedDBkey.length === 0 || !selectedDBkey.trim())
+      ) {
         // real value provided
         var globalProp = this.model.constructor.userDefinedProperties;
         if (!_.contains(globalProp, selectedDBkey)) {
           globalProp.push(selectedDBkey);
         }
-        this.model.set('selectedDB', selectedDBkey);
+        this.model.set("selectedDB", selectedDBkey);
         this.model.save();
         this.render();
       }
@@ -4336,103 +5617,113 @@ var AnnotationElementView = Backbone.View.extend({
   },
   valueChangeHandler: function (e) {
     var identifier = $(e.currentTarget).val();
-    this.model.set('annotationValue', identifier);
+    this.model.set("annotationValue", identifier);
     this.model.save();
     if (this.underControlledMode()) {
       this.launchValidation();
     }
   },
-  vocabularyChangeHandler: function(e) {
+  vocabularyChangeHandler: function (e) {
     var relation = $(e.currentTarget).val();
-    var previouslyControlledMode = this.underControlledMode(this.previousSelectedRelation);
+    var previouslyControlledMode = this.underControlledMode(
+      this.previousSelectedRelation
+    );
     var nowControlledMode = this.underControlledMode(relation);
-    this.model.set('selectedRelation', relation);
+    this.model.set("selectedRelation", relation);
 
     if (previouslyControlledMode && !nowControlledMode) {
       // went from controlled into uncontrolled mode, reset key
-      this.model.set('selectedDB', null);
+      this.model.set("selectedDB", null);
       // validation cannot be applied, considered always valid
-      this.model.set('status', 'validated');
-    }
-    else if (!previouslyControlledMode && nowControlledMode) {
+      this.model.set("status", "validated");
+    } else if (!previouslyControlledMode && nowControlledMode) {
       // went from uncontrolled to controlled, select defaults db
-      this.model.set('selectedDB', this.model.defaults.selectedDB);
+      this.model.set("selectedDB", this.model.defaults.selectedDB);
       // reset validation status
-      this.model.set('status', 'unchecked');
+      this.model.set("status", "unchecked");
     }
 
     this.model.save();
     this.render();
   },
-  retryHandler: function(e) {
+  retryHandler: function (e) {
     this.launchValidation();
   },
-  statusChangeHandler: function(annotationModel) {
+  statusChangeHandler: function (annotationModel) {
     this.render();
   },
-  deleteHandler: function(e) {
+  deleteHandler: function (e) {
     this.model.destroy();
     this.remove();
   },
-  underControlledMode: function(relation) {
+  underControlledMode: function (relation) {
     if (relation) {
       return this.model.constructor.vocabulary[relation].controlled;
-    }
-    else {
-      return this.model.constructor.vocabulary[this.model.get('selectedRelation')].controlled;
+    } else {
+      return this.model.constructor.vocabulary[
+        this.model.get("selectedRelation")
+      ].controlled;
     }
   },
   render: function () {
     this.template = _.template($("#annotation-element-template").html());
     this.$el.empty();
-    this.$el.html(this.template({
-      vocabulary: this.model.constructor.vocabulary,
-      dbList: this.model.constructor.dbList,
-      userDefinedProperties: this.model.constructor.userDefinedProperties,
-      status: this.model.get('status'),
-      index: this.model.collection.indexOf(this.model),
-      selectedDB: this.model.get('selectedDB'),
-      selectedRelation: this.model.get('selectedRelation'),
-      annotationValue: this.model.get('annotationValue')
-    }));
-    this.previousSelectedRelation = this.model.get('selectedRelation'); // save the value of relation, for comparison
+    this.$el.html(
+      this.template({
+        vocabulary: this.model.constructor.vocabulary,
+        dbList: this.model.constructor.dbList,
+        userDefinedProperties: this.model.constructor.userDefinedProperties,
+        status: this.model.get("status"),
+        index: this.model.collection.indexOf(this.model),
+        selectedDB: this.model.get("selectedDB"),
+        selectedRelation: this.model.get("selectedRelation"),
+        annotationValue: this.model.get("annotationValue"),
+      })
+    );
+    this.previousSelectedRelation = this.model.get("selectedRelation"); // save the value of relation, for comparison
     return this;
   },
   launchValidation: function () {
     var index = this.model.collection.indexOf(this.model);
-    var selectedDBkey = this.model.get('selectedDB');
-    var identifier = this.model.get('annotationValue');
+    var selectedDBkey = this.model.get("selectedDB");
+    var identifier = this.model.get("annotationValue");
     // we don't need to validate if the input is empty or blank
     if (identifier && !(identifier.length === 0 || !identifier.trim())) {
-      this.model.set('status', 'pending');
-      var validateAnnotation = this.model.get('validateAnnotation');
+      this.model.set("status", "pending");
+      var validateAnnotation = this.model.get("validateAnnotation");
       var self = this;
-      validateAnnotation(selectedDBkey, identifier, function(err, result) {
-        if(err) {
-          self.model.set('status', 'error');
+      validateAnnotation(selectedDBkey, identifier, function (err, result) {
+        if (err) {
+          self.model.set("status", "error");
           self.model.save();
           console.error("validation error", err);
           return;
         }
         // result contains the validated url
-        self.model.set('status', 'validated');
-        self.model.set('annotationValue', result);
+        self.model.set("status", "validated");
+        self.model.set("annotationValue", result);
         self.model.save();
         self.render();
       });
     }
-  }
+  },
 });
 
 function bindColorPicker2GridColorInputs() {
-  const ids = ['#grid-color', '#init-Pos-Alignment-Color', '#geometric-guideline-color', '#horizontal-guideline-color', '#vertical-guideline-color'];
+  const ids = [
+    "#grid-color",
+    "#init-Pos-Alignment-Color",
+    "#geometric-guideline-color",
+    "#horizontal-guideline-color",
+    "#vertical-guideline-color",
+  ];
   for (let i = 0; i < ids.length; i++) {
     colorPickerUtils.bindPicker2Input(ids[i], null);
   }
 }
 
 module.exports = {
-//  BioGeneView: BioGeneView,
+  //  BioGeneView: BioGeneView,
   ChemicalView: ChemicalView,
   LayoutPropertiesView: LayoutPropertiesView,
   ColorSchemeInspectorView: ColorSchemeInspectorView,
@@ -4448,8 +5739,8 @@ module.exports = {
   PathsByURIQueryView: PathsByURIQueryView,
   PromptSaveView: PromptSaveView,
   FileSaveView: FileSaveView,
-  SaveUserPreferencesView:SaveUserPreferencesView,
-  LoadUserPreferencesView:LoadUserPreferencesView,
+  SaveUserPreferencesView: SaveUserPreferencesView,
+  LoadUserPreferencesView: LoadUserPreferencesView,
   PromptConfirmationView: PromptConfirmationView,
   PromptMapTypeView: PromptMapTypeView,
   PromptInvalidFileView: PromptInvalidFileView,
@@ -4465,5 +5756,5 @@ module.exports = {
   PromptInvalidURLWarning: PromptInvalidURLWarning,
   PromptInvalidImageWarning: PromptInvalidImageWarning,
   PromptInvalidEdgeWarning: PromptInvalidEdgeWarning,
-  PromptSbmlConversionErrorView : PromptSbmlConversionErrorView
+  PromptSbmlConversionErrorView: PromptSbmlConversionErrorView,
 };
diff --git a/index.html b/index.html
index f9ebde524..864a0fab1 100644
--- a/index.html
+++ b/index.html
@@ -102,12 +102,14 @@
                                                         <input id="sif-layout-input" type="file" style="display:none" />
                                                         <input id="sbml-file" type="file" style="display:none" />
                                                         <input id="celldesigner-file-input" type="file" style="display:none" />
+                                                        <input id="gpml-file-input" type="file" style="display:none" />
                                                         <li><a href="#" id="import-simple-af-file">Simple AF</a></li>
                                                         <li><a href="#" id="import-sif-file">SIF</a></li>
                                                         <li><a href="#" id="import-sif-style">SIF Style</a></li>
                                                         <li><a href="#" id="import-sif-layout">SIF Layout</a></li>
                                                         <li><a href="#" id="import-SBML-file">SBML</a></li>
                                                         <li><a href="#" id="import-celldesigner-file">CellDesigner</a></li>
+                                                        <li><a href="#" id="import-GPML-file">GPML</a></li>
                                                     </ul>
                                                 </li>
                                                 <li class="dropdown-submenu">
@@ -123,6 +125,7 @@
                                                         <li><a href="#" id="export-to-sif-layout">SIF Layout</a></li>
                                                         <li><a href="#" id="export-as-sbml">SBML</a></li>
                                                         <li><a href="#" id="export-as-celldesigner-file">CellDesigner</a></li>
+                                                        <li><a href="#" id="export-as-gpml">GPML</a></li>
                                                     </ul>
                                                 </li>
                                                 <li class="dropdown-submenu">

From 3809a97a56305dafdec1e3ff8c2df8e7cb91d5d4 Mon Sep 17 00:00:00 2001
From: NoorMuhammad1 <48602830+NoorMuhammad1@users.noreply.github.com>
Date: Wed, 31 Jan 2024 14:50:00 +0300
Subject: [PATCH 23/29] Changed the version number to 3.1.0 in About page

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 864a0fab1..32b3298e2 100644
--- a/index.html
+++ b/index.html
@@ -922,7 +922,7 @@ <h2 class="sbgn-text">About</h2>
                             <table width="100%" height="100%" align="center" valign="center">
                             <tbody>
                                 <tr><td>
-                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.0.5</p>
+                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.1.0</p>
                                     </td></tr>
 
                                 <tr><td>

From bd9a7033c2f976209c8718684e482017206f6326 Mon Sep 17 00:00:00 2001
From: hasanbalci <balcihasan99@gmail.com>
Date: Fri, 2 Feb 2024 09:44:22 +0100
Subject: [PATCH 24/29] Revert "Add GPML import/export support"

This reverts commit 1d310bb2c27d8a2932aec89f681c268059339e9d.
---
 app/js/app-menu.js       |   45 +-
 app/js/app-utilities.js  | 3949 ++++++++++-------------
 app/js/backbone-views.js | 6387 +++++++++++++++-----------------------
 index.html               |    5 +-
 4 files changed, 4245 insertions(+), 6141 deletions(-)

diff --git a/app/js/app-menu.js b/app/js/app-menu.js
index ee509214c..2caa19858 100644
--- a/app/js/app-menu.js
+++ b/app/js/app-menu.js
@@ -363,11 +363,9 @@ module.exports = function() {
     $("#import-experimental-data").click(function () {
       $("#overlay-data").trigger('click');
     });
-
     $("#import-SBML-file").click(function () {
       $("#sbml-file").trigger('click');
     });
-
     $("#import-simple-af-file").click(function () {
       $("#simple-af-file-input").trigger('click');
     });
@@ -384,10 +382,6 @@ module.exports = function() {
       $("#sif-layout-input").trigger('click');
     });
 
-    $("#import-GPML-file").click(function () {
-      $("#gpml-file-input").trigger('click');
-    });
-
     $("#overlay-data").change(function () {
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var cy = appUtilities.getActiveCy();
@@ -467,34 +461,6 @@ module.exports = function() {
         $(this).val("");
       }
     });
-
-    $("#gpml-file-input").change(function () {
-     
-      var chiseInstance = appUtilities.getActiveChiseInstance();
-      var cy = appUtilities.getActiveCy();
-      if ($(this).val() != "") {
-        var file = this.files[0];
-        appUtilities.setFileContent(file.name);
-        chiseInstance.loadGpml(file,  success = function(data){
-          if (cy.elements().length !== 0) {
-            promptConfirmationView.render(function () {
-              chiseInstance.loadSBGNMLText(data.message, false, file.name, cy);
-            });
-          }
-          else {
-            chiseInstance.loadSBGNMLText(data.message, false, file.name, cy);
-          }
-        },
-        error = function(data){
-          promptFileConversionErrorView.render();          
-          document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!";
-          
-        });
-       
-        $(this).val("");
-      }
-    });
-
     $("#simple-af-file-input").change(function () {
       var chiseInstance = appUtilities.getActiveChiseInstance();
 
@@ -1367,19 +1333,14 @@ module.exports = function() {
     $("#export-as-sbgnml-plain-file").click(function (evt) {
       fileSaveView.render("sbgn", "plain");
     });
-
     $("#export-as-sbgnml3-plain-file").click(function (evt) {
       fileSaveView.render("sbgn", "plain3");
     });
 
-    $("#export-as-sbml").click(function (evt) {
-      fileSaveView.render("sbml", null, null);
+   $("#export-as-sbml").click(function (evt) {
+    fileSaveView.render("sbml", null, null);
+   
     });
-
-    $("#export-as-gpml").click(function (evt) {
-      fileSaveView.render("gpml", null, null);
-    });    
-
     $("#add-complex-for-selected").click(function (e) {
 
       // use active chise instance
diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js
index e5994e4b8..f0505839d 100644
--- a/app/js/app-utilities.js
+++ b/app/js/app-utilities.js
@@ -3,35 +3,35 @@
  * Common utilities for sample application. Includes functions and variables.
  * You can directly utilize this object also you can use this object to set a variable in a file and access it in another file.
  */
-var jquery = ($ = require("jquery"));
-var chroma = require("chroma-js");
-var chise = require("chise");
-var tutorial = require("./tutorial");
+var jquery = $ = require('jquery');
+var chroma = require('chroma-js');
+var chise = require('chise');
+var tutorial = require('./tutorial');
 
 var appUtilities = {};
 
 // Get the whole scratchpad reserved for newt (on an element or core) or get a single property of it
 appUtilities.getScratch = function (cyOrEle, name) {
-  if (cyOrEle.scratch("_newt") === undefined) {
-    cyOrEle.scratch("_newt", {});
+  if (cyOrEle.scratch('_newt') === undefined) {
+    cyOrEle.scratch('_newt', {});
   }
 
-  var scratch = cyOrEle.scratch("_newt");
-  var retVal = name === undefined ? scratch : scratch[name];
+  var scratch = cyOrEle.scratch('_newt');
+  var retVal = ( name === undefined ) ? scratch : scratch[name];
   return retVal;
-};
+}
 
 appUtilities.mapTypesToViewableText = {
-  PD: "PD",
-  AF: "AF",
-  SIF: "SIF",
-  HybridSbgn: "Hybrid (PD,AF)",
-  HybridAny: "Hybrid (PD,AF,SIF)",
+  'PD': 'PD',
+  'AF': 'AF',
+  'SIF': 'SIF',
+  'HybridSbgn' : 'Hybrid (PD,AF)' ,
+  'HybridAny' : 'Hybrid (PD,AF,SIF)'   
 };
 // Set a single property on scratchpad of an element or the core
 appUtilities.setScratch = function (cyOrEle, name, val) {
   this.getScratch(cyOrEle)[name] = val;
-};
+}
 
 // id for the next network to be created, starts by 0
 // a unique div selector is to be created using this id
@@ -49,6 +49,7 @@ appUtilities.networkIdsStack = [];
 appUtilities.networkIdToChiseInstance = {};
 
 appUtilities.adjustUIComponents = function (_cy) {
+
   // if _cy param is not set use the active cy instance
   var cy = _cy || appUtilities.getActiveCy();
 
@@ -62,24 +63,17 @@ appUtilities.adjustUIComponents = function (_cy) {
   // needing an appUndoActions instance here is something unexpected
   // but since appUndoActions.refreshColorSchemeMenu is used below in an unfortunate way we need an instance of it
   // that uses the active cy instance
-  var appUndoActionsFactory = require("./app-undo-actions-factory");
+  var appUndoActionsFactory = require('./app-undo-actions-factory');
   var appUndoActions = appUndoActionsFactory(appUtilities.getActiveCy());
 
   // get current general properties for cy
-  var generalProperties = appUtilities.getScratch(
-    cy,
-    "currentGeneralProperties"
-  );
+  var generalProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
 
   // refresh color schema menu
-  appUndoActions.refreshColorSchemeMenu({
-    value: generalProperties.mapColorScheme,
-    self: appUtilities.colorSchemeInspectorView,
-    scheme_type: generalProperties.mapColorSchemeStyle,
-  });
+  appUndoActions.refreshColorSchemeMenu({value: generalProperties.mapColorScheme, self: appUtilities.colorSchemeInspectorView, scheme_type: generalProperties.mapColorSchemeStyle});
 
   // set the file content by the current file name for cy
-  var fileName = appUtilities.getScratch(cy, "currentFileName");
+  var fileName = appUtilities.getScratch(cy, 'currentFileName');
   appUtilities.setFileContent(fileName);
 
   // reset the status of undo redo buttons
@@ -88,138 +82,133 @@ appUtilities.adjustUIComponents = function (_cy) {
   // adjust UI components related to mode properties
 
   // access the mode properties of cy
-  var modeProperties = appUtilities.getScratch(cy, "modeProperties");
+  var modeProperties = appUtilities.getScratch(cy, 'modeProperties');
 
   // html values to select
-  var nodeVal = modeProperties.selectedNodeType.replace(/ /gi, "-"); // Html values includes '-' instead of ' '
-  var edgeVal = modeProperties.selectedEdgeType.replace(/ /gi, "-"); // Html values includes '-' instead of ' '
+  var nodeVal = modeProperties.selectedNodeType.replace(/ /gi, '-'); // Html values includes '-' instead of ' '
+  var edgeVal = modeProperties.selectedEdgeType.replace(/ /gi, '-'); // Html values includes '-' instead of ' '
 
   var mode = modeProperties.mode;
   var sustainMode = modeProperties.sustainMode;
   var nodeLang = modeProperties.selectedNodeLanguage;
   var edgeLang = modeProperties.selectedEdgeLanguage;
 
-  $(".node-palette img").removeClass("selected-mode");
-  $(".edge-palette img").removeClass("selected-mode");
+  $('.node-palette img').removeClass('selected-mode');
+  $('.edge-palette img').removeClass('selected-mode');
 
   // Get images for node/edge palettes
-  var nodeImg = $(
-    '.node-palette img[value="' + nodeVal + '"][language="' + nodeLang + '"]'
-  );
-  var edgeImg = $(
-    '.edge-palette img[value="' + edgeVal + '"][language="' + edgeLang + '"]'
-  );
+  var nodeImg = $('.node-palette img[value="'+nodeVal+'"][language="' + nodeLang + '"]');
+  var edgeImg = $('.edge-palette img[value="'+edgeVal+'"][language="' + edgeLang + '"]');
 
   // also set the icons in toolbar accordingly
-  $("#add-node-mode-icon").attr("src", nodeImg.attr("src"));
-  $("#add-node-mode-icon").attr(
-    "title",
-    "Create a new " + nodeImg.attr("title")
-  );
-  $("#add-edge-mode-icon").attr("src", edgeImg.attr("src"));
-  $("#add-edge-mode-icon").attr(
-    "title",
-    "Create a new " + edgeImg.attr("title")
-  );
+  $('#add-node-mode-icon').attr('src', nodeImg.attr('src'));
+  $('#add-node-mode-icon').attr('title', "Create a new " + nodeImg.attr('title'));
+  $('#add-edge-mode-icon').attr('src', edgeImg.attr('src'));
+  $('#add-edge-mode-icon').attr('title', "Create a new " + edgeImg.attr('title'));
 
   // unactivate all UI components
-  $("#select-mode-icon").parent().removeClass("selected-mode");
-  $("#add-edge-mode-icon").parent().removeClass("selected-mode");
-  $("#add-node-mode-icon").parent().removeClass("selected-mode");
-  $("#add-edge-mode-icon").parent().removeClass("selected-mode-sustainable");
-  $("#add-node-mode-icon").parent().removeClass("selected-mode-sustainable");
-  $("#marquee-zoom-mode-icon").parent().removeClass("selected-mode");
-  $(".node-palette img").addClass("inactive-palette-element");
-  $(".edge-palette img").addClass("inactive-palette-element");
-  $(".selected-mode-sustainable").removeClass("selected-mode-sustainable");
+  $('#select-mode-icon').parent().removeClass('selected-mode');
+  $('#add-edge-mode-icon').parent().removeClass('selected-mode');
+  $('#add-node-mode-icon').parent().removeClass('selected-mode');
+  $('#add-edge-mode-icon').parent().removeClass('selected-mode-sustainable');
+  $('#add-node-mode-icon').parent().removeClass('selected-mode-sustainable');
+  $('#marquee-zoom-mode-icon').parent().removeClass('selected-mode');
+  $('.node-palette img').addClass('inactive-palette-element');
+  $('.edge-palette img').addClass('inactive-palette-element');
+  $('.selected-mode-sustainable').removeClass('selected-mode-sustainable');
 
   // Node/edge palettes should be initialized according to default nodeVal and edgeVal
-  nodeImg.addClass("selected-mode");
-  edgeImg.addClass("selected-mode");
+  nodeImg.addClass('selected-mode');
+  edgeImg.addClass('selected-mode');
 
-  var modeHandler = require("./app-mode-handler");
+  var modeHandler = require('./app-mode-handler');
 
   // adjust UI components according to the params
-  if (mode === "selection-mode") {
-    $("#select-mode-icon").parent().addClass("selected-mode");
+  if ( mode === 'selection-mode' ) {
+
+    $('#select-mode-icon').parent().addClass('selected-mode');
 
     modeHandler.autoEnableMenuItems(true);
-  } else if (mode === "add-node-mode") {
-    $("#add-node-mode-icon").parent().addClass("selected-mode");
-    $(".node-palette img").removeClass("inactive-palette-element");
+  }
+  else if ( mode === 'add-node-mode' ) {
+
+    $('#add-node-mode-icon').parent().addClass('selected-mode');
+    $('.node-palette img').removeClass('inactive-palette-element');
 
     modeHandler.autoEnableMenuItems(false);
 
-    if (sustainMode) {
-      $("#add-node-mode-icon").parent().addClass("selected-mode-sustainable");
-      $(".node-palette .selected-mode").addClass("selected-mode-sustainable");
+    if ( sustainMode ) {
+      $('#add-node-mode-icon').parent().addClass('selected-mode-sustainable');
+      $('.node-palette .selected-mode').addClass('selected-mode-sustainable');
     }
-  } else if (mode === "add-edge-mode") {
-    $("#add-edge-mode-icon").parent().addClass("selected-mode");
-    $(".edge-palette img").removeClass("inactive-palette-element");
+
+  }
+  else if ( mode === 'add-edge-mode' ) {
+
+    $('#add-edge-mode-icon').parent().addClass('selected-mode');
+    $('.edge-palette img').removeClass('inactive-palette-element');
 
     modeHandler.autoEnableMenuItems(false);
 
-    if (sustainMode) {
-      $("#add-edge-mode-icon").parent().addClass("selected-mode-sustainable");
-      $(".edge-palette .selected-mode").addClass("selected-mode-sustainable");
+    if ( sustainMode ) {
+      $('#add-edge-mode-icon').parent().addClass('selected-mode-sustainable');
+      $('.edge-palette .selected-mode').addClass('selected-mode-sustainable');
     }
-  } else if (mode === "marquee-zoom-mode") {
-    $("#marquee-zoom-mode-icon").parent().addClass("selected-mode");
+
+  }
+  else if( mode === 'marquee-zoom-mode'){
+
+    $('#marquee-zoom-mode-icon').parent().addClass('selected-mode');
+
   }
 
   // adjust status of grid guide related icons in toolbar
 
   // get the current status of related variables for cy
-  var toggleEnableGuidelineAndSnap = appUtilities.getScratch(
-    cy,
-    "toggleEnableGuidelineAndSnap"
-  );
-  var toggleShowGridEnableSnap = appUtilities.getScratch(
-    cy,
-    "toggleShowGridEnableSnap"
-  );
+  var toggleEnableGuidelineAndSnap = appUtilities.getScratch(cy, 'toggleEnableGuidelineAndSnap');
+  var toggleShowGridEnableSnap = appUtilities.getScratch(cy, 'toggleShowGridEnableSnap');
 
   // adjust toggle-guidelines-snapping-icon icons accordingly
-  if (toggleEnableGuidelineAndSnap) {
-    $("#toggle-guidelines-snapping-icon").addClass("toggle-mode-sustainable");
-  } else {
-    $("#toggle-guidelines-snapping-icon").removeClass(
-      "toggle-mode-sustainable"
-    );
+  if (toggleEnableGuidelineAndSnap){
+    $('#toggle-guidelines-snapping-icon').addClass('toggle-mode-sustainable');
+  }
+  else{
+    $('#toggle-guidelines-snapping-icon').removeClass('toggle-mode-sustainable');
   }
 
   // adjust oggle-grid-snapping-icon accordingly
-  if (toggleShowGridEnableSnap) {
-    $("#toggle-grid-snapping-icon").addClass("toggle-mode-sustainable");
-  } else {
-    $("#toggle-grid-snapping-icon").removeClass("toggle-mode-sustainable");
+  if (toggleShowGridEnableSnap){
+    $('#toggle-grid-snapping-icon').addClass('toggle-mode-sustainable');
+  }
+  else{
+     $('#toggle-grid-snapping-icon').removeClass('toggle-mode-sustainable');
   }
 };
 
 // get id of the div panel for the given network id
 appUtilities.getNetworkPanelId = function (networkId) {
-  return "sbgn-network-container-" + networkId;
+  return 'sbgn-network-container-' + networkId;
 };
 
 // get id of the tab for the the given network id
 appUtilities.getNetworkTabId = function (networkId) {
-  return "sbgn-network-tab-" + networkId;
+  return 'sbgn-network-tab-' + networkId;
 };
 
 // get network id by given network key (would be tab or panel id or selector or even the network id itself)
 // that is basically the remaining part of the string after the last occurance of '-'
 appUtilities.getNetworkId = function (networkKey) {
+
   // if the networkKey is a number it must already be the network id, so no need to process
-  if (typeof networkKey === "number") {
+  if (typeof networkKey === 'number') {
     return networkKey;
   }
 
   // get the last index of '-'
-  var index = networkKey.lastIndexOf("-");
+  var index =  networkKey.lastIndexOf("-");
 
   // get the remaining part of string after the last occurance of '-'
-  var rem = networkKey.substring(index + 1);
+  var rem = networkKey.substring(index+1);
 
   // id is the integer representation of the remaining string
   var id = parseInt(rem);
@@ -231,23 +220,25 @@ appUtilities.getNetworkId = function (networkKey) {
 // get selector of the div panel for the given network id
 // it is basically '#' + panelId
 appUtilities.getNetworkPanelSelector = function (networkId) {
-  return "#" + this.getNetworkPanelId(networkId);
+  return '#' + this.getNetworkPanelId(networkId);
 };
 
 // selector of the tab for the the given network id
 // it is basically '#' + tabId
 appUtilities.getNetworkTabSelector = function (networkId) {
-  return "#" + this.getNetworkTabId(networkId);
+  return '#' + this.getNetworkTabId(networkId);
 };
 
 // get the default map name for a network with the given id
 // basically like "Pathway #X"
 appUtilities.getDefaultMapName = function (networkId) {
-  return "Pathway #" + networkId;
+
+  return 'Pathway #' + networkId;
 };
 
 // update the string that represents the tab for the given networkKey
 appUtilities.updateNetworkTabDesc = function (networkKey) {
+
   // get network id for the given network key (would be networkId, networkTabId, networkPanelId)
   var networkId = this.getNetworkId(networkKey);
 
@@ -264,7 +255,8 @@ appUtilities.updateNetworkTabDesc = function (networkKey) {
   var mapName = this.getScratch(cy).currentGeneralProperties.mapName;
 
   // if mapName is empty set it to "Pathway" #219
-  if (!mapName) mapName = "Pathway";
+  if (!mapName)
+    mapName = "Pathway";
 
   // update the content of 'a' element that is contained by the related tab
   var relatedTab = document.getElementById(tabId).childNodes[1];
@@ -275,15 +267,16 @@ appUtilities.updateNetworkTabDesc = function (networkKey) {
 // map given chise instance to the given network id
 // if key param is a cy instance or tab/panel id/selector use the actual network id
 appUtilities.putToChiseInstances = function (key, chiseInstance) {
+
   // if key is a cy instance go for its container id
-  var networkId = typeof key === "object" ? key.container().id : key;
+  var networkId = typeof key === 'object' ? key.container().id : key;
 
   // if the network id parameter is the network tab/panel id/selector get the actual network id
   networkId = this.getNetworkId(networkId);
 
   // Throw error if there is already an instance mapped for the networkId
-  if (this.networkIdToChiseInstance[networkId]) {
-    throw "A chise instance is already mapped for network id " + networkId;
+  if ( this.networkIdToChiseInstance[networkId] ) {
+    throw 'A chise instance is already mapped for network id ' + networkId;
   }
 
   // perfrom the actual mapping
@@ -293,15 +286,16 @@ appUtilities.putToChiseInstances = function (key, chiseInstance) {
 // remove the chise instance mapped to the given key
 // if key param is a cy instance or tab/panel id/selector use the actual network id
 appUtilities.removeFromChiseInstances = function (key) {
+
   // if key is a cy instance go for its container id
-  var networkId = typeof key === "object" ? key.container().id : key;
+  var networkId = typeof key === 'object' ? key.container().id : key;
 
   // if the network id parameter is the network tab/panel id/selector get the actual network id
   networkId = this.getNetworkId(networkId);
 
   // Throw error if there is no instance mapped for the networkId
-  if (!this.networkIdToChiseInstance[networkId]) {
-    throw "No chise instance is mapped for network id " + networkId;
+  if ( !this.networkIdToChiseInstance[networkId] ) {
+    throw 'No chise instance is mapped for network id ' + networkId;
   }
 
   // perform the actual removal
@@ -311,8 +305,9 @@ appUtilities.removeFromChiseInstances = function (key) {
 // get the chise instance mapped to the given key
 // if key param is a cy instance or tab/panel id/selector use the actual network id
 appUtilities.getChiseInstance = function (key) {
+
   // if key is a cy instance go for its container id
-  var networkId = typeof key === "object" ? key.container().id : key;
+  var networkId = typeof key === 'object' ? key.container().id : key;
 
   // if the network id parameter is the network tab/panel id/selector get the actual network id
   networkId = this.getNetworkId(networkId);
@@ -324,22 +319,24 @@ appUtilities.getChiseInstance = function (key) {
 // If there is just one network then network tabs should not be rendered.
 // This function is to adjust that.
 appUtilities.adjustVisibilityOfNetworkTabs = function () {
-  var tabsContainer = $("#network-tabs-list-container");
+
+  var tabsContainer = $('#network-tabs-list-container');
 
   // if there is just one tab hide tabs container else show it
-  if (this.networkIdsStack.length === 1) {
+  if ( this.networkIdsStack.length === 1 ) {
     tabsContainer.hide();
-  } else {
+  }
+  else {
     tabsContainer.show();
   }
+
 };
 
 // creates a new network and returns the new chise.js instance that is created for this network
 appUtilities.createNewNetwork = function () {
+
   // id of the div panel associated with the new network
-  var networkPanelId = appUtilities.getNetworkPanelId(
-    appUtilities.nextNetworkId
-  );
+  var networkPanelId = appUtilities.getNetworkPanelId(appUtilities.nextNetworkId);
 
   // id of the tab for the new network
   var networkTabId = appUtilities.getNetworkTabId(appUtilities.nextNetworkId);
@@ -349,34 +346,16 @@ appUtilities.createNewNetwork = function () {
 
   // create physical html components for the new network
   // use map name as the tab description
-  appUtilities.createPhysicalNetworkComponents(
-    networkPanelId,
-    networkTabId,
-    mapName
-  );
+  appUtilities.createPhysicalNetworkComponents(networkPanelId, networkTabId, mapName);
 
   // generate network panel selector from the network panel id
-  var networkPanelSelector = appUtilities.getNetworkPanelSelector(
-    appUtilities.nextNetworkId
-  );
+  var networkPanelSelector = appUtilities.getNetworkPanelSelector(appUtilities.nextNetworkId);
 
   // initialize current properties for the new instance by copying the default properties
-  var currentLayoutProperties = jquery.extend(
-    true,
-    {},
-    appUtilities.defaultLayoutProperties
-  );
-  var currentGridProperties = jquery.extend(
-    true,
-    {},
-    appUtilities.defaultGridProperties
-  );
-  var currentGeneralProperties = jquery.extend(
-    true,
-    {},
-    appUtilities.defaultGeneralProperties
-  );
-
+  var currentLayoutProperties = jquery.extend(true, {}, appUtilities.defaultLayoutProperties);
+  var currentGridProperties = jquery.extend(true, {}, appUtilities.defaultGridProperties);
+  var currentGeneralProperties = jquery.extend(true, {}, appUtilities.defaultGeneralProperties);
+  
   // update the map name with the default map name specific for network id
   currentGeneralProperties.mapName = mapName;
 
@@ -385,48 +364,34 @@ appUtilities.createNewNetwork = function () {
     networkContainerSelector: networkPanelSelector,
     // whether to fit label to nodes
     fitLabelsToNodes: function () {
-      var currentGeneralProperties = appUtilities.getScratch(
-        newInst.getCy(),
-        "currentGeneralProperties"
-      );
+      var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
       return currentGeneralProperties.fitLabelsToNodes;
     },
     // whether to fit label to nodes
     fitLabelsToInfoboxes: function () {
-      var currentGeneralProperties = appUtilities.getScratch(
-        newInst.getCy(),
-        "currentGeneralProperties"
-      );
+      var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
       return currentGeneralProperties.fitLabelsToInfoboxes;
     },
     // dynamic label size it may be 'small', 'regular', 'large'
     dynamicLabelSize: function () {
-      var currentGeneralProperties = appUtilities.getScratch(
-        newInst.getCy(),
-        "currentGeneralProperties"
-      );
+      var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
       return currentGeneralProperties.dynamicLabelSize;
     },
     // Whether to infer nesting on load
     inferNestingOnLoad: function () {
-      var currentGeneralProperties = appUtilities.getScratch(
-        newInst.getCy(),
-        "currentGeneralProperties"
-      );
+      var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
       return currentGeneralProperties.inferNestingOnLoad;
     },
     // percentage used to calculate compound paddings
-    compoundPadding: currentGeneralProperties.compoundPadding,
-
+    compoundPadding: currentGeneralProperties.compoundPadding
+    
     /* function () {
       var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
       return currentGeneralProperties.compoundPadding;
-    } */ // arrow size changed by a slider on a scale from 0.5-2
+    } */,
+    // arrow size changed by a slider on a scale from 0.5-2
     arrowScale: function () {
-      var currentGeneralProperties = appUtilities.getScratch(
-        newInst.getCy(),
-        "currentGeneralProperties"
-      );
+      var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
       return currentGeneralProperties.arrowScale;
     },
     extraCompartmentPadding: currentGeneralProperties.extraCompartmentPadding,
@@ -435,54 +400,36 @@ appUtilities.createNewNetwork = function () {
     // Whether to adjust node label font size automatically.
     // If this option return false do not adjust label sizes according to node height uses node.data('labelsize')
     // instead of doing it.
-    adjustNodeLabelFontSizeAutomatically: function () {
-      var currentGeneralProperties = appUtilities.getScratch(
-        newInst.getCy(),
-        "currentGeneralProperties"
-      );
+    adjustNodeLabelFontSizeAutomatically: function() {
+      var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties');
       return currentGeneralProperties.adjustNodeLabelFontSizeAutomatically;
     },
     // whether to improve flow (swap nodes)
     improveFlow: function () {
-      var currentLayoutProperties = appUtilities.getScratch(
-        newInst.getCy(),
-        "currentLayoutProperties"
-      );
+      var currentLayoutProperties = appUtilities.getScratch(newInst.getCy(), 'currentLayoutProperties');
       return currentLayoutProperties.improveFlow;
     },
     undoable: appUtilities.undoable,
-    undoableDrag: function () {
+    undoableDrag: function() {
       return appUtilities.ctrlKeyDown !== true;
     },
     highlightColor: currentGeneralProperties.highlightColor,
-    extraHighlightThickness: currentGeneralProperties.extraHighlightThickness,
+    extraHighlightThickness: currentGeneralProperties.extraHighlightThickness 
   });
-
+  
   // set scracth pad of the related cy instance with these properties
-  appUtilities.setScratch(
-    newInst.getCy(),
-    "currentLayoutProperties",
-    currentLayoutProperties
-  );
-  appUtilities.setScratch(
-    newInst.getCy(),
-    "currentGridProperties",
-    currentGridProperties
-  );
-  appUtilities.setScratch(
-    newInst.getCy(),
-    "currentGeneralProperties",
-    currentGeneralProperties
-  );
-
+  appUtilities.setScratch(newInst.getCy(), 'currentLayoutProperties', currentLayoutProperties);
+  appUtilities.setScratch(newInst.getCy(), 'currentGridProperties', currentGridProperties);
+  appUtilities.setScratch(newInst.getCy(), 'currentGeneralProperties', currentGeneralProperties);
+  
   // init the current file name for the map
-  appUtilities.setScratch(newInst.getCy(), "currentFileName", "new_file.nwt");
+  appUtilities.setScratch(newInst.getCy(), 'currentFileName', 'new_file.nwt');
 
   // register cy extensions, bind cy events etc.
-  var appCy = require("./app-cy");
+  var appCy = require('./app-cy');
   appCy(newInst);
 
-  var modeHandler = require("./app-mode-handler");
+  var modeHandler = require('./app-mode-handler');
   modeHandler.initModeProperties(newInst.getCy());
 
   // maintain networkIdToChiseInstance map
@@ -501,9 +448,9 @@ appUtilities.createNewNetwork = function () {
   appUtilities.chooseNetworkTab(appUtilities.nextNetworkId);
 
   // activate palette tab
-  if (!$("#inspector-palette-tab").hasClass("active")) {
-    $("#inspector-palette-tab a").tab("show");
-    $("#inspector-style-tab a").blur();
+  if (!$('#inspector-palette-tab').hasClass('active')) {
+    $('#inspector-palette-tab a').tab('show');
+    $('#inspector-style-tab a').blur();
   }
 
   // increment new network id
@@ -518,6 +465,7 @@ appUtilities.createNewNetwork = function () {
 
 // close the active network
 appUtilities.closeActiveNetwork = function () {
+
   // active network id is the one that is at the top of the stack
   // pop and get it
   var activeNetworkId = this.networkIdsStack.pop();
@@ -530,13 +478,15 @@ appUtilities.closeActiveNetwork = function () {
 
   // If there is no other network after closing the active one create a new network
   // otherwise just select the tab for the new active network
-  if (this.networkIdsStack.length === 0) {
+  if ( this.networkIdsStack.length === 0 ) {
+
     // create a new network
     this.createNewNetwork();
-  } else {
+  }
+  else {
+
     // get the new active network id from the top of the stack
-    var newActiveNetworkId =
-      this.networkIdsStack[this.networkIdsStack.length - 1];
+    var newActiveNetworkId = this.networkIdsStack[this.networkIdsStack.length - 1];
 
     // choose the network tab for the new active network
     this.chooseNetworkTab(newActiveNetworkId);
@@ -544,10 +494,12 @@ appUtilities.closeActiveNetwork = function () {
 
   // adjust the visibility of network tabs
   this.adjustVisibilityOfNetworkTabs();
+
 };
 
 // removes physical html components for the network that is represented by given networkKey
 appUtilities.removePhysicalNetworkComponents = function (networkKey) {
+
   // use the actual network id (network key may not be equal to it)
   var networkId = appUtilities.getNetworkId(networkKey);
 
@@ -563,6 +515,7 @@ appUtilities.removePhysicalNetworkComponents = function (networkKey) {
 };
 
 appUtilities.dropHandler = function (ev) {
+
   // Prevent default behavior (Prevent file from being opened)
   ev.preventDefault();
 
@@ -570,7 +523,7 @@ appUtilities.dropHandler = function (ev) {
     // Use DataTransferItemList interface to access the file(s)
     for (var i = 0; i < ev.originalEvent.dataTransfer.items.length; i++) {
       // If dropped items aren't files, reject them
-      if (ev.originalEvent.dataTransfer.items[i].kind === "file") {
+      if (ev.originalEvent.dataTransfer.items[i].kind === 'file') {
         var file = ev.originalEvent.dataTransfer.items[i].getAsFile();
         $("#file-input").trigger("change", [file]);
       }
@@ -591,6 +544,7 @@ appUtilities.dragOverHandler = function (ev) {
 };
 
 function removeDragData(ev) {
+
   if (ev.originalEvent.dataTransfer.items) {
     // Use DataTransferItemList interface to remove the drag data
     ev.originalEvent.dataTransfer.items.clear();
@@ -600,59 +554,46 @@ function removeDragData(ev) {
   }
 }
 
-appUtilities.createPhysicalNetworkComponents = function (
-  panelId,
-  tabId,
-  tabDesc
-) {
+appUtilities.createPhysicalNetworkComponents = function (panelId, tabId, tabDesc) {
+
   // the component that includes the tab panels
-  var panelsParent = $("#network-panels-container");
+  var panelsParent = $('#network-panels-container');
 
-  var newPanelStr =
-    '<div id="' + panelId + '" class="tab-pane fade network-panel"></div>';
+  var newPanelStr = '<div id="' + panelId + '" class="tab-pane fade network-panel"></div>';
 
   // create new panel inside the panels parent
   panelsParent.append(newPanelStr);
 
-  $("#" + panelId).on("drop", function (event) {
+  $("#" + panelId).on("drop", function(event){
     appUtilities.dropHandler(event);
     $("#network-panels-container").removeClass("drag-and-drop-file");
   });
-  $("#" + panelId).on("dragover", function (event) {
+  $("#" + panelId).on("dragover", function(event){
     appUtilities.dragOverHandler(event);
     $("#network-panels-container").addClass("drag-and-drop-file");
   });
-  $("#" + panelId).on("dragleave", function (event) {
+  $("#" + panelId).on("dragleave", function(event){
     $("#network-panels-container").removeClass("drag-and-drop-file");
   });
 
   // the container that lists the network tabs
-  var tabsList = $("#network-tabs-list");
-
-  var newTabStr =
-    '<li id="' +
-    tabId +
-    '" class="chise-tab chise-network-tab">\n\
-                  <a data-toggle="tab" href="#' +
-    panelId +
-    '">\n\
-                  <button class="close closeTab ' +
-    tabId +
-    'closeTab" type="button" >&times</button>' +
-    tabDesc +
-    "</a></li>";
-
-  $("ul").on("click", "button." + tabId + "closeTab", function () {
+  var tabsList = $('#network-tabs-list');
+
+  var newTabStr = '<li id="' + tabId + '" class="chise-tab chise-network-tab">\n\
+                  <a data-toggle="tab" href="#' + panelId + '">\n\
+                  <button class="close closeTab '+tabId+'closeTab" type="button" >&times</button>' + tabDesc + '</a></li>';
+
+  $('ul').on('click', 'button.' + tabId +'closeTab', function() {
     var networkId = tabId.substring(17);
     appUtilities.setActiveNetwork(networkId);
     appUtilities.closeActiveNetwork();
   });
 
-  $("ul").on("mousedown", "#" + tabId, function (e) {
-    if (e.which == 2) {
-      var networkId = tabId.substring(17);
-      appUtilities.setActiveNetwork(networkId);
-      appUtilities.closeActiveNetwork();
+  $('ul').on('mousedown', '#' + tabId, function(e) {
+    if( e.which == 2 ) {
+     var networkId = tabId.substring(17);
+     appUtilities.setActiveNetwork(networkId);
+     appUtilities.closeActiveNetwork();
     }
   });
   // create new tab inside the list of network tabs
@@ -661,6 +602,7 @@ appUtilities.createPhysicalNetworkComponents = function (
 
 // basically get the active chise instance
 appUtilities.getActiveChiseInstance = function () {
+
   // get the networkId of the active network that is at the top of networkIdsStack
   var activeNetworkId = this.networkIdsStack[this.networkIdsStack.length - 1];
 
@@ -670,6 +612,7 @@ appUtilities.getActiveChiseInstance = function () {
 
 // sets the active network through the network key to be activated
 appUtilities.setActiveNetwork = function (networkKey) {
+
   // get chise instance for network key
   var chiseInstance = this.getChiseInstance(networkKey);
 
@@ -680,8 +623,8 @@ appUtilities.setActiveNetwork = function (networkKey) {
   var oldIndex = this.networkIdsStack.indexOf(networkId);
 
   // if there is no existing network with this id throw an error
-  if (oldIndex === -1) {
-    throw "Network with id " + networkId + " cannot be found";
+  if ( oldIndex === -1 ) {
+    throw 'Network with id ' + networkId + ' cannot be found';
   }
 
   // remove the network from the old index
@@ -692,6 +635,7 @@ appUtilities.setActiveNetwork = function (networkKey) {
 
   // adjust UI components for †he activated network
   this.adjustUIComponents();
+
 };
 
 // chooses a network tab programatically
@@ -703,13 +647,14 @@ appUtilities.chooseNetworkTab = function (networkKey) {
   var networkTabId = this.getNetworkTabId(networkId);
 
   // if network tab is not activated activate it
-  if (!$("#" + networkTabId).hasClass("active")) {
-    $("#" + networkTabId + " a").tab("show");
+  if (!$('#' + networkTabId).hasClass('active')) {
+    $('#' + networkTabId + ' a').tab('show');
   }
 };
 
 // returns the sbgnviz.js instance associated with the currently active netwrok
 appUtilities.getActiveSbgnvizInstance = function () {
+
   var chiseInstance = this.getActiveChiseInstance();
 
   return chiseInstance ? chiseInstance.getSbgnvizInstance() : false;
@@ -717,6 +662,7 @@ appUtilities.getActiveSbgnvizInstance = function () {
 
 // returns the cy instance associated with the currently active network
 appUtilities.getActiveCy = function () {
+
   var chiseInstance = this.getActiveChiseInstance();
 
   return chiseInstance ? chiseInstance.getCy() : false;
@@ -724,18 +670,19 @@ appUtilities.getActiveCy = function () {
 
 // returns active network panel
 appUtilities.getActiveNetworkPanel = function () {
+
   var activeCy = this.getActiveCy();
 
   return activeCy ? activeCy.container() : false;
 };
 
 appUtilities.defaultLayoutProperties = {
-  name: "fcose",
+  name: 'fcose',
   quality: "default",
   samplingType: true,
   sampleSize: 25,
   nodeSeparation: 75,
-  piTol: 0.0000001,
+  piTol: 0.0000001,  
   nodeDimensionsIncludeLabels: false,
   nodeRepulsion: 2000,
   idealEdgeLength: 30,
@@ -743,13 +690,13 @@ appUtilities.defaultLayoutProperties = {
   nestingFactor: 0.1,
   gravity: 0.25,
   numIter: 2500,
-  fit: true,
+  fit: true, 
   padding: 20,
-  animationEasing: "cubic-bezier(0.17,0.72,0.41,0.98)",
-  animate: "end",
+  animationEasing: 'cubic-bezier(0.17,0.72,0.41,0.98)',
+  animate: 'end',
   animationDuration: 2000,
   randomize: false,
-  tile: true,
+  tile: true,  
   tilingPaddingVertical: 12,
   tilingPaddingHorizontal: 12,
   gravityRangeCompound: 1.5,
@@ -757,7 +704,7 @@ appUtilities.defaultLayoutProperties = {
   gravityRange: 3.8,
   initialEnergyOnIncremental: 0.3,
   improveFlow: true,
-  packComponents: true,
+  packComponents: true 
 };
 
 appUtilities.defaultGridProperties = {
@@ -788,12 +735,12 @@ appUtilities.defaultGridProperties = {
 };
 
 appUtilities.defaultGeneralProperties = {
-  compoundPadding: 0, // intial compound padding for all compound nodes
+  compoundPadding: 0, // intial compound padding for all compound nodes 
   extraCompartmentPadding: 14, // extra padding for compound nodes except for complexes
-  extraComplexPadding: 10, //extra padding for complex compound nodes, refer to sbgnviz elementUtilities.getComplexPadding() function to see details
+  extraComplexPadding: 10,  //extra padding for complex compound nodes, refer to sbgnviz elementUtilities.getComplexPadding() function to see details
   arrowScale: 1.25,
   showComplexName: true,
-  dynamicLabelSize: "regular",
+  dynamicLabelSize: 'regular',
   inferNestingOnLoad: false,
   fitLabelsToNodes: false,
   fitLabelsToInfoboxes: false,
@@ -804,21 +751,19 @@ appUtilities.defaultGeneralProperties = {
   enablePorts: true,
   enableSIFTopologyGrouping: false,
   allowCompoundNodeResize: true,
-  mapColorScheme: "black_white",
-  mapColorSchemeStyle: "solid",
-  mapType: function () {
-    return appUtilities.getActiveChiseInstance().getMapType() || "Unknown";
-  },
+  mapColorScheme: 'black_white',
+  mapColorSchemeStyle: 'solid',
+  mapType: function() {return (appUtilities.getActiveChiseInstance().getMapType() || "Unknown");},
   mapName: "",
   mapDescription: "",
   experimentDescription: "",
-  highlightColor: "#0B9BCD", //the color code used when initializing viewUtilities in app-cy.js
-  extraHighlightThickness: 2,
+  highlightColor: '#0B9BCD', //the color code used when initializing viewUtilities in app-cy.js
+  extraHighlightThickness: 2
 };
 
 appUtilities.setFileContent = function (fileName) {
-  var span = document.getElementById("file-name");
-  var displayedSpan = document.getElementById("displayed-file-name");
+  var span = document.getElementById('file-name');
+  var displayedSpan = document.getElementById('displayed-file-name');
   while (span.firstChild) {
     span.removeChild(span.firstChild);
   }
@@ -828,49 +773,42 @@ appUtilities.setFileContent = function (fileName) {
   span.appendChild(document.createTextNode(fileName));
   if (fileName.length <= 40) {
     displayedSpan.appendChild(document.createTextNode(fileName));
-  } else {
-    displayedSpan.appendChild(
-      document.createTextNode(
-        fileName.substring(0, 34) +
-          "..." +
-          fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length)
-      )
-    );
   }
+  else {
+    displayedSpan.appendChild(document.createTextNode(fileName.substring(0, 34) + "..." + fileName.substring(fileName.lastIndexOf('.')+1, fileName.length)));
+  };
 
-  displayedSpan.style.display = "block";
-  span.style.display = "none";
+  displayedSpan.style.display = 'block';
+  span.style.display = 'none';
 };
 
 appUtilities.triggerLayout = function (_cy, randomize) {
+
   // use parametrized cy if exists. Otherwise use the recently active cy
   var cy = _cy || this.getActiveCy();
 
   // access the current general properties of cy
-  var currentGeneralProperties = this.getScratch(
-    cy,
-    "currentGeneralProperties"
-  );
+  var currentGeneralProperties = this.getScratch(cy, 'currentGeneralProperties');
 
   // access the current layout properties of cy
-  var currentLayoutProperties = this.getScratch(cy, "currentLayoutProperties");
+  var currentLayoutProperties = this.getScratch(cy, 'currentLayoutProperties');
 
   // If 'animate-on-drawing-changes' is true then animate option must be true instead of false
   var preferences = {
-    animate: currentGeneralProperties.animateOnDrawingChanges ? true : false,
+    animate: currentGeneralProperties.animateOnDrawingChanges ? true : false
   };
 
   // if randomize parameter is defined set it as a preference
   // 'fit' preference must be the same of 'randomize' parameter
   // in that case
-  if (randomize !== undefined) {
+  if ( randomize !== undefined ) {
     preferences.randomize = randomize;
     preferences.fit = randomize;
   }
 
-  //  if (currentLayoutProperties.animate === 'during') {
-  //    delete preferences.animate;
-  //  }
+//  if (currentLayoutProperties.animate === 'during') {
+//    delete preferences.animate;
+//  }
 
   // access chise instance related to cy
   var chiseInstance = appUtilities.getChiseInstance(cy);
@@ -880,75 +818,61 @@ appUtilities.triggerLayout = function (_cy, randomize) {
 };
 
 appUtilities.getExpandCollapseOptions = function (_cy) {
+
   var self = this;
 
   return {
     fisheye: function () {
+
       // use parametrized cy if exists. Otherwise use the recently active cy
       var cy = _cy || self.getActiveCy();
 
-      return self.getScratch(cy, "currentGeneralProperties")
-        .rearrangeOnComplexityManagement;
+      return self.getScratch(cy, 'currentGeneralProperties').rearrangeOnComplexityManagement;
     },
     animate: function () {
+
       // use parametrized cy if exists. Otherwise use the recently active cy
       var cy = _cy || self.getActiveCy();
 
-      return self.getScratch(cy, "currentGeneralProperties")
-        .animateOnDrawingChanges;
+      return self.getScratch(cy, 'currentGeneralProperties').animateOnDrawingChanges;
     },
     layoutBy: function () {
+
       // use parametrized cy if exists. Otherwise use the recently active cy
       var cy = _cy || self.getActiveCy();
 
-      if (
-        !self.getScratch(cy, "currentGeneralProperties")
-          .recalculateLayoutOnComplexityManagement
-      ) {
-        //        cy.trigger('fit-units-after-expandcollapse');
+      if ( !self.getScratch(cy, 'currentGeneralProperties').recalculateLayoutOnComplexityManagement ) {
+//        cy.trigger('fit-units-after-expandcollapse');
         return;
       }
       self.triggerLayout(cy, false);
-      //      cy.trigger('fit-units-after-expandcollapse');
+//      cy.trigger('fit-units-after-expandcollapse');
     },
     expandCollapseCueSize: 12,
     expandCollapseCuePosition: function (node) {
-      // use parametrized cy if exists. Otherwise use the recently active cy
-      var cy = _cy || self.getActiveCy();
 
-      var offset = 1,
-        rectSize = 12; // this is the expandCollapseCueSize;
-      var size = cy.zoom() < 1 ? rectSize / (2 * cy.zoom()) : rectSize / 2;
-      var x =
-        node.position("x") -
-        node.width() / 2 -
-        parseFloat(node.css("padding-left")) +
-        parseFloat(node.css("border-width")) +
-        size +
-        offset;
-      if (node.data("class") == "compartment") {
-        var y =
-          node.position("y") -
-          node.outerHeight() / 2 +
-          Math.min(15, node.outerHeight() * 0.05) +
-          parseFloat(node.css("border-width")) +
-          size;
-      } else {
-        var y =
-          node.position("y") -
-          node.height() / 2 -
-          parseFloat(node.css("padding-top")) +
-          parseFloat(node.css("border-width")) +
-          size +
-          offset;
-      }
-
-      return { x: x, y: y };
+       // use parametrized cy if exists. Otherwise use the recently active cy
+       var cy = _cy || self.getActiveCy();
+
+       var offset = 1, rectSize = 12; // this is the expandCollapseCueSize;
+       var size = cy.zoom() < 1 ? rectSize / (2*cy.zoom()) : rectSize / 2;
+       var x = node.position('x') - node.width() / 2 - parseFloat(node.css('padding-left'))
+           + parseFloat(node.css('border-width')) + size + offset;
+       if (node.data("class") == "compartment"){
+           var y  = node.position('y') - node.outerHeight() / 2  + Math.min(15, node.outerHeight()*0.05)
+               + parseFloat(node.css('border-width'))+ size;
+       } else {
+           var y = node.position('y') - node.height() / 2 - parseFloat(node.css('padding-top'))
+               + parseFloat(node.css('border-width')) + size + offset;
+       };
+
+       return {'x': x, 'y': y};
     },
   };
 };
 
 appUtilities.dynamicResize = function () {
+
   // get window inner width and inner height that includes scrollbars when they are rendered
   // using $(window).width() would be problematic when scrolls are visible
   // please see: https://stackoverflow.com/questions/19582862/get-browser-window-width-including-scrollbar
@@ -959,27 +883,29 @@ appUtilities.dynamicResize = function () {
   var canvasWidth = 1000;
   var canvasHeight = 680;
 
-  if (windowWidth > canvasWidth) {
+  if (windowWidth > canvasWidth)
+  {
     //This is the margin on left and right of the main content when the page is
     //displayed
     var mainContentMargin = 10;
-    $("#network-panels-container").width(windowWidth * 0.8 - mainContentMargin);
-    $("#sbgn-inspector").width(windowWidth * 0.2 - mainContentMargin);
+    $("#network-panels-container").width(windowWidth  * 0.8 - mainContentMargin);
+    $("#sbgn-inspector").width(windowWidth  * 0.2 - mainContentMargin);
     var w = $("#sbgn-inspector-and-canvas").width();
     $(".nav-menu").width(w);
     $(".navbar").width(w);
-    //    $("#sbgn-info-content").width(windowWidth * 0.85);
+//    $("#sbgn-info-content").width(windowWidth * 0.85);
     $("#sbgn-toolbar").width(w);
     $("#network-tabs-list-container").width(w);
   }
 
-  if (windowHeight > canvasHeight) {
+  if (windowHeight > canvasHeight)
+  {
     $("#network-panels-container").height(windowHeight * 0.85);
     $("#sbgn-inspector").height(windowHeight * 0.85);
   }
 
   // trigger an event to notify that newt components are dynamically resized
-  $(document).trigger("newtAfterDynamicResize");
+  $(document).trigger('newtAfterDynamicResize');
 };
 /*
 appUtilities.nodeQtipFunction = function (node) {
@@ -1018,6 +944,7 @@ appUtilities.nodeQtipFunction = function (node) {
 };
 */
 appUtilities.refreshUndoRedoButtonsStatus = function (_cy) {
+
   // use _cy param if it is set else use the recently active cy instance
   var cy = _cy || appUtilities.getActiveCy();
 
@@ -1027,14 +954,16 @@ appUtilities.refreshUndoRedoButtonsStatus = function (_cy) {
   // refresh status of undo button accordingly
   if (ur.isUndoStackEmpty()) {
     $("#undo-last-action").parent("li").addClass("disabled");
-  } else {
+  }
+  else {
     $("#undo-last-action").parent("li").removeClass("disabled");
   }
 
   // refresh status of redo button accordingly
   if (ur.isRedoStackEmpty()) {
     $("#redo-last-action").parent("li").addClass("disabled");
-  } else {
+  }
+  else {
     $("#redo-last-action").parent("li").removeClass("disabled");
   }
 };
@@ -1046,945 +975,938 @@ appUtilities.resetUndoRedoButtons = function () {
 
 // Enable drag and drop mode
 appUtilities.enableDragAndDropMode = function (_cy) {
+
   // use _cy param if it is set else use the recently active cy instance
   var cy = _cy || appUtilities.getActiveCy();
 
-  appUtilities.setScratch(cy, "dragAndDropModeEnabled", true);
+  appUtilities.setScratch(cy, 'dragAndDropModeEnabled', true);
 
-  $(cy.container()).find("canvas").addClass("target-cursor");
+  $(cy.container()).find('canvas').addClass("target-cursor");
 
   cy.autolock(true);
   cy.autounselectify(true);
-  cy.boxSelectionEnabled(false);
+  cy.boxSelectionEnabled( false );
 };
 
 // Disable drag and drop mode
 appUtilities.disableDragAndDropMode = function (_cy) {
+
   // use _cy param if it is set else use the recently active cy instance
   var cy = _cy || appUtilities.getActiveCy();
 
-  appUtilities.setScratch(cy, "dragAndDropModeEnabled", null);
-  appUtilities.setScratch(cy, "nodesToDragAndDrop", null);
+  appUtilities.setScratch(cy, 'dragAndDropModeEnabled', null);
+  appUtilities.setScratch(cy, 'nodesToDragAndDrop', null);
 
-  $(cy.container()).find("canvas").removeClass("target-cursor");
+  $(cy.container()).find('canvas').removeClass("target-cursor");
 
   cy.autolock(false);
   cy.autounselectify(false);
-  cy.boxSelectionEnabled(true);
+  cy.boxSelectionEnabled( true );
 };
 
 // Show neighbors of given eles and perform incremental layout afterward if Rearrange option is checked
 appUtilities.showHiddenNeighbors = function (eles, _chiseInstance) {
-  // check _chiseInstance param if it is set use it else use recently active chise instance
-  var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
 
-  // get the associated cy instance
-  var cy = chiseInstance.getCy();
+    // check _chiseInstance param if it is set use it else use recently active chise instance
+    var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
 
-  // get current general properties for assocated cy instance
-  var currentGeneralProperties = appUtilities.getScratch(
-    cy,
-    "currentGeneralProperties"
-  );
-
-  var extendedList = chiseInstance.elementUtilities.extendNodeList(eles);
-  if (currentGeneralProperties.recalculateLayoutOnComplexityManagement) {
-    //Put them near node, show and perform incremental layout
-    chiseInstance.showAndPerformLayout(
-      eles,
-      extendedList,
-      this.triggerLayout.bind(this, cy, false)
-    );
-  } else {
-    //Just show them
-    chiseInstance.showEles(extendedList);
-  }
+    // get the associated cy instance
+    var cy = chiseInstance.getCy();
+
+    // get current general properties for assocated cy instance
+    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+
+    var extendedList = chiseInstance.elementUtilities.extendNodeList(eles);
+    if (currentGeneralProperties.recalculateLayoutOnComplexityManagement )
+    {
+        //Put them near node, show and perform incremental layout
+        chiseInstance.showAndPerformLayout(eles, extendedList, this.triggerLayout.bind(this, cy, false));
+    }
+    else
+    {
+        //Just show them
+        chiseInstance.showEles(extendedList);
+    }
 };
 
 // Show neighbors of given eles and perform incremental layout afterward if Rearrange option is checked
 appUtilities.showAll = function (_chiseInstance) {
-  // check _chiseInstance param if it is set use it else use recently active chise instance
-  var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
 
-  // get the associated cy instance
-  var cy = chiseInstance.getCy();
+    // check _chiseInstance param if it is set use it else use recently active chise instance
+    var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
 
-  // get current general properties for cy instance
-  var currentGeneralProperties = appUtilities.getScratch(
-    cy,
-    "currentGeneralProperties"
-  );
+    // get the associated cy instance
+    var cy = chiseInstance.getCy();
 
-  if (currentGeneralProperties.recalculateLayoutOnComplexityManagement) {
-    //Show all and perform incremental layout
-    chiseInstance.showAllAndPerformLayout(
-      this.triggerLayout.bind(this, cy, false)
-    );
-  } else {
-    //Just show them all
-    chiseInstance.showAll();
-  }
+    // get current general properties for cy instance
+    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+
+    if (currentGeneralProperties.recalculateLayoutOnComplexityManagement )
+    {
+      //Show all and perform incremental layout
+     chiseInstance.showAllAndPerformLayout(this.triggerLayout.bind(this, cy, false));
+    }
+    else
+    {
+      //Just show them all
+      chiseInstance.showAll();
+    }
 };
 
 // Hides nodes and perform incremental layout afterward if Rearrange option is checked
-appUtilities.hideNodesSmart = function (eles, _chiseInstance) {
-  // check _chiseInstance param if it is set use it else use recently active chise instance
-  var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
+appUtilities.hideNodesSmart = function(eles, _chiseInstance) {
 
-  // get the associated cy instance
-  var cy = chiseInstance.getCy();
+    // check _chiseInstance param if it is set use it else use recently active chise instance
+    var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
 
-  // get current general properties for cy instance
-  var currentGeneralProperties = appUtilities.getScratch(
-    cy,
-    "currentGeneralProperties"
-  );
-
-  if (currentGeneralProperties.recalculateLayoutOnComplexityManagement) {
-    //Put them near node and perform incremental layout
-    chiseInstance.hideAndPerformLayout(
-      eles,
-      this.triggerLayout.bind(this, cy, false)
-    );
-  } else {
-    //Just show them
-    chiseInstance.hideNodesSmart(eles);
-  }
+    // get the associated cy instance
+    var cy = chiseInstance.getCy();
+
+    // get current general properties for cy instance
+    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+
+    if (currentGeneralProperties.recalculateLayoutOnComplexityManagement )
+    {
+        //Put them near node and perform incremental layout
+        chiseInstance.hideAndPerformLayout(eles, this.triggerLayout.bind(this, cy, false));
+    }
+    else
+    {
+        //Just show them
+        chiseInstance.hideNodesSmart(eles);
+    }
 };
 
 appUtilities.colorCodeToGradientImage = colorCodeToGradientImage = {
-  "#000000": "http://newteditor.org/color-scheme-images/bw2_gradient.png",
-  "#80cdc1": "http://newteditor.org/color-scheme-images/gb5_gradient.png",
-  "#92c5de": "http://newteditor.org/color-scheme-images/rb5_gradient.png",
-  "#9ecae1": "http://newteditor.org/color-scheme-images/blue4_gradient.png",
-  "#a6dba0": "http://newteditor.org/color-scheme-images/pg1_gradient.png",
-  "#b2abd2": "http://newteditor.org/color-scheme-images/pb5_gradient.png",
-  "#bababa": "http://newteditor.org/color-scheme-images/gr1_gradient.png",
-  "#bdbdbd": "http://newteditor.org/color-scheme-images/grey4_gradient.png",
-  "#c2a5cf": "http://newteditor.org/color-scheme-images/pg5_gradient.png",
-  "#c6dbef": "http://newteditor.org/color-scheme-images/blue3_gradient.png",
-  "#c7eae5": "http://newteditor.org/color-scheme-images/gb4_gradient.png",
-  "#d1e5f0": "http://newteditor.org/color-scheme-images/rb4_gradient.png",
-  "#d8daeb": "http://newteditor.org/color-scheme-images/pb4_gradient.png",
-  "#d9d9d9": "http://newteditor.org/color-scheme-images/grey3_gradient.png",
-  "#d9f0d3": "http://newteditor.org/color-scheme-images/pg2_gradient.png",
-  "#dfc27d": "http://newteditor.org/color-scheme-images/gb1_gradient.png",
-  "#e0e0e0": "http://newteditor.org/color-scheme-images/gr2_gradient.png",
-  "#e7d4e8": "http://newteditor.org/color-scheme-images/pg4_gradient.png",
-  "#eff3ff": "http://newteditor.org/color-scheme-images/blue2_gradient.png",
-  "#f0f0f0": "http://newteditor.org/color-scheme-images/grey2_gradient.png",
-  "#f4a582": "http://newteditor.org/color-scheme-images/rb1_gradient.png",
-  "#f5f5f5": "http://newteditor.org/color-scheme-images/gb3_gradient.png",
-  "#f6e8c3": "http://newteditor.org/color-scheme-images/gb2_gradient.png",
-  "#f7f7f7": "http://newteditor.org/color-scheme-images/rb3_gradient.png",
-  "#fdb863": "http://newteditor.org/color-scheme-images/pb1_gradient.png",
-  "#fddbc7": "http://newteditor.org/color-scheme-images/rb2_gradient.png",
-  "#fee0b6": "http://newteditor.org/color-scheme-images/pb2_gradient.png",
-  "#ffffff": "http://newteditor.org/color-scheme-images/bw1_gradient.png",
+  '#000000' : 'http://newteditor.org/color-scheme-images/bw2_gradient.png',
+  '#80cdc1' : 'http://newteditor.org/color-scheme-images/gb5_gradient.png',
+  '#92c5de' : 'http://newteditor.org/color-scheme-images/rb5_gradient.png',
+  '#9ecae1' : 'http://newteditor.org/color-scheme-images/blue4_gradient.png',
+  '#a6dba0' : 'http://newteditor.org/color-scheme-images/pg1_gradient.png',
+  '#b2abd2' : 'http://newteditor.org/color-scheme-images/pb5_gradient.png',
+  '#bababa' : 'http://newteditor.org/color-scheme-images/gr1_gradient.png',
+  '#bdbdbd' : 'http://newteditor.org/color-scheme-images/grey4_gradient.png',
+  '#c2a5cf' : 'http://newteditor.org/color-scheme-images/pg5_gradient.png',
+  '#c6dbef' : 'http://newteditor.org/color-scheme-images/blue3_gradient.png',
+  '#c7eae5' : 'http://newteditor.org/color-scheme-images/gb4_gradient.png',
+  '#d1e5f0' : 'http://newteditor.org/color-scheme-images/rb4_gradient.png',
+  '#d8daeb' : 'http://newteditor.org/color-scheme-images/pb4_gradient.png',
+  '#d9d9d9' : 'http://newteditor.org/color-scheme-images/grey3_gradient.png',
+  '#d9f0d3' : 'http://newteditor.org/color-scheme-images/pg2_gradient.png',
+  '#dfc27d' : 'http://newteditor.org/color-scheme-images/gb1_gradient.png',
+  '#e0e0e0' : 'http://newteditor.org/color-scheme-images/gr2_gradient.png',
+  '#e7d4e8' : 'http://newteditor.org/color-scheme-images/pg4_gradient.png',
+  '#eff3ff' : 'http://newteditor.org/color-scheme-images/blue2_gradient.png',
+  '#f0f0f0' : 'http://newteditor.org/color-scheme-images/grey2_gradient.png',
+  '#f4a582' : 'http://newteditor.org/color-scheme-images/rb1_gradient.png',
+  '#f5f5f5' : 'http://newteditor.org/color-scheme-images/gb3_gradient.png',
+  '#f6e8c3' : 'http://newteditor.org/color-scheme-images/gb2_gradient.png',
+  '#f7f7f7' : 'http://newteditor.org/color-scheme-images/rb3_gradient.png',
+  '#fdb863' : 'http://newteditor.org/color-scheme-images/pb1_gradient.png',
+  '#fddbc7' : 'http://newteditor.org/color-scheme-images/rb2_gradient.png',
+  '#fee0b6' : 'http://newteditor.org/color-scheme-images/pb2_gradient.png',
+  '#ffffff' : 'http://newteditor.org/color-scheme-images/bw1_gradient.png',
+};
+
+appUtilities.colorCodeTo3DImage = colorCodeTo3DImage ={
+  '#000000' : 'http://newteditor.org/color-scheme-images/bw2_3d.png',
+  '#80cdc1' : 'http://newteditor.org/color-scheme-images/gb5_3d.png',
+  '#92c5de' : 'http://newteditor.org/color-scheme-images/rb5_3d.png',
+  '#9ecae1' : 'http://newteditor.org/color-scheme-images/blue4_3d.png',
+  '#a6dba0' : 'http://newteditor.org/color-scheme-images/pg1_3d.png',
+  '#b2abd2' : 'http://newteditor.org/color-scheme-images/pb5_3d.png',
+  '#bababa' : 'http://newteditor.org/color-scheme-images/gr1_3d.png',
+  '#bdbdbd' : 'http://newteditor.org/color-scheme-images/grey4_3d.png',
+  '#c2a5cf' : 'http://newteditor.org/color-scheme-images/pg5_3d.png',
+  '#c6dbef' : 'http://newteditor.org/color-scheme-images/blue3_3d.png',
+  '#c7eae5' : 'http://newteditor.org/color-scheme-images/gb4_3d.png',
+  '#d1e5f0' : 'http://newteditor.org/color-scheme-images/rb4_3d.png',
+  '#d8daeb' : 'http://newteditor.org/color-scheme-images/pb4_3d.png',
+  '#d9d9d9' : 'http://newteditor.org/color-scheme-images/grey3_3d.png',
+  '#d9f0d3' : 'http://newteditor.org/color-scheme-images/pg2_3d.png',
+  '#dfc27d' : 'http://newteditor.org/color-scheme-images/gb1_3d.png',
+  '#e0e0e0' : 'http://newteditor.org/color-scheme-images/gr2_3d.png',
+  '#e7d4e8' : 'http://newteditor.org/color-scheme-images/pg4_3d.png',
+  '#eff3ff' : 'http://newteditor.org/color-scheme-images/blue2_3d.png',
+  '#f0f0f0' : 'http://newteditor.org/color-scheme-images/grey2_3d.png',
+  '#f4a582' : 'http://newteditor.org/color-scheme-images/rb1_3d.png',
+  '#f5f5f5' : 'http://newteditor.org/color-scheme-images/gb3_3d.png',
+  '#f6e8c3' : 'http://newteditor.org/color-scheme-images/gb2_3d.png',
+  '#f7f7f7' : 'http://newteditor.org/color-scheme-images/rb3_3d.png',
+  '#fdb863' : 'http://newteditor.org/color-scheme-images/pb1_3d.png',
+  '#fddbc7' : 'http://newteditor.org/color-scheme-images/rb2_3d.png',
+  '#fee0b6' : 'http://newteditor.org/color-scheme-images/pb2_3d.png',
+  '#ffffff' : 'http://newteditor.org/color-scheme-images/bw1_3d.png',
 };
 
-appUtilities.colorCodeTo3DImage = colorCodeTo3DImage = {
-  "#000000": "http://newteditor.org/color-scheme-images/bw2_3d.png",
-  "#80cdc1": "http://newteditor.org/color-scheme-images/gb5_3d.png",
-  "#92c5de": "http://newteditor.org/color-scheme-images/rb5_3d.png",
-  "#9ecae1": "http://newteditor.org/color-scheme-images/blue4_3d.png",
-  "#a6dba0": "http://newteditor.org/color-scheme-images/pg1_3d.png",
-  "#b2abd2": "http://newteditor.org/color-scheme-images/pb5_3d.png",
-  "#bababa": "http://newteditor.org/color-scheme-images/gr1_3d.png",
-  "#bdbdbd": "http://newteditor.org/color-scheme-images/grey4_3d.png",
-  "#c2a5cf": "http://newteditor.org/color-scheme-images/pg5_3d.png",
-  "#c6dbef": "http://newteditor.org/color-scheme-images/blue3_3d.png",
-  "#c7eae5": "http://newteditor.org/color-scheme-images/gb4_3d.png",
-  "#d1e5f0": "http://newteditor.org/color-scheme-images/rb4_3d.png",
-  "#d8daeb": "http://newteditor.org/color-scheme-images/pb4_3d.png",
-  "#d9d9d9": "http://newteditor.org/color-scheme-images/grey3_3d.png",
-  "#d9f0d3": "http://newteditor.org/color-scheme-images/pg2_3d.png",
-  "#dfc27d": "http://newteditor.org/color-scheme-images/gb1_3d.png",
-  "#e0e0e0": "http://newteditor.org/color-scheme-images/gr2_3d.png",
-  "#e7d4e8": "http://newteditor.org/color-scheme-images/pg4_3d.png",
-  "#eff3ff": "http://newteditor.org/color-scheme-images/blue2_3d.png",
-  "#f0f0f0": "http://newteditor.org/color-scheme-images/grey2_3d.png",
-  "#f4a582": "http://newteditor.org/color-scheme-images/rb1_3d.png",
-  "#f5f5f5": "http://newteditor.org/color-scheme-images/gb3_3d.png",
-  "#f6e8c3": "http://newteditor.org/color-scheme-images/gb2_3d.png",
-  "#f7f7f7": "http://newteditor.org/color-scheme-images/rb3_3d.png",
-  "#fdb863": "http://newteditor.org/color-scheme-images/pb1_3d.png",
-  "#fddbc7": "http://newteditor.org/color-scheme-images/rb2_3d.png",
-  "#fee0b6": "http://newteditor.org/color-scheme-images/pb2_3d.png",
-  "#ffffff": "http://newteditor.org/color-scheme-images/bw1_3d.png",
-};
 
 appUtilities.mapColorSchemes = mapColorSchemes = {
-  black_white: {
-    name: "Black and white",
-    preview: ["#ffffff", "#000000"],
-    values: {
-      "unspecified entity": "#ffffff",
-      "simple chemical": "#ffffff",
-      macromolecule: "#ffffff",
-      "nucleic acid feature": "#ffffff",
-      "perturbing agent": "#ffffff",
-      "source and sink": "#ffffff",
-      complex: "#ffffff",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#ffffff",
-      tag: "#ffffff",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#ffffff",
-      submap: "#ffffff",
+  'black_white': {
+    'name': 'Black and white',
+    'preview': ['#ffffff', '#000000'],
+    'values': {
+      'unspecified entity': '#ffffff',
+      'simple chemical': '#ffffff',
+      'macromolecule': '#ffffff',
+      'nucleic acid feature': '#ffffff',
+      'perturbing agent': '#ffffff',
+      'source and sink': '#ffffff',
+      'complex': '#ffffff',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#ffffff',
+      'tag': '#ffffff',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#ffffff',
+      'submap': '#ffffff',
       // AF
-      "BA plain": "#ffffff",
-      "BA unspecified entity": "#ffffff",
-      "BA simple chemical": "#ffffff",
-      "BA macromolecule": "#ffffff",
-      "BA nucleic acid feature": "#ffffff",
-      "BA perturbing agent": "#ffffff",
-      "BA complex": "#ffffff",
-      delay: "#ffffff",
+      'BA plain': '#ffffff',
+      'BA unspecified entity': '#ffffff',
+      'BA simple chemical': '#ffffff',
+      'BA macromolecule': '#ffffff',
+      'BA nucleic acid feature': '#ffffff',
+      'BA perturbing agent': '#ffffff',
+      'BA complex': '#ffffff',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#ffffff",
-      "SIF simple chemical": "#ffffff",
-    },
+      'SIF macromolecule': '#ffffff',
+      'SIF simple chemical': '#ffffff'
+    }
   },
-  greyscale: {
-    name: "Greyscale",
-    preview: ["#ffffff", "#f0f0f0", "#d9d9d9", "#bdbdbd"],
-    invert: "inverse_greyscale",
-    values: {
-      "unspecified entity": "#ffffff",
-      "simple chemical": "#bdbdbd",
-      macromolecule: "#bdbdbd",
-      "nucleic acid feature": "#bdbdbd",
-      "perturbing agent": "#bdbdbd",
-      "source and sink": "#ffffff",
-      complex: "#d9d9d9",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#ffffff",
-      tag: "#ffffff",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#f0f0f0",
-      submap: "#f0f0f0",
+  'greyscale': {
+    'name': 'Greyscale',
+    'preview': ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd'],
+    'invert': 'inverse_greyscale',
+    'values': {
+      'unspecified entity': '#ffffff',
+      'simple chemical': '#bdbdbd',
+      'macromolecule': '#bdbdbd',
+      'nucleic acid feature': '#bdbdbd',
+      'perturbing agent': '#bdbdbd',
+      'source and sink': '#ffffff',
+      'complex': '#d9d9d9',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#ffffff',
+      'tag': '#ffffff',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#f0f0f0',
+      'submap': '#f0f0f0',
       // AF
-      "BA plain": "#ffffff",
-      "BA unspecified entity": "#ffffff",
-      "BA simple chemical": "#bdbdbd",
-      "BA macromolecule": "#bdbdbd",
-      "BA nucleic acid feature": "#bdbdbd",
-      "BA perturbing agent": "#bdbdbd",
-      "BA complex": "#d9d9d9",
-      delay: "#ffffff",
+      'BA plain': '#ffffff',
+      'BA unspecified entity': '#ffffff',
+      'BA simple chemical': '#bdbdbd',
+      'BA macromolecule': '#bdbdbd',
+      'BA nucleic acid feature': '#bdbdbd',
+      'BA perturbing agent': '#bdbdbd',
+      'BA complex': '#d9d9d9',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#d9d9d9",
-      "SIF simple chemical": "#f0f0f0",
-    },
+      'SIF macromolecule': '#d9d9d9',
+      'SIF simple chemical': '#f0f0f0'
+    }
   },
-  inverse_greyscale: {
-    name: "Inverse greyscale",
-    preview: ["#bdbdbd", "#d9d9d9", "#f0f0f0", "#ffffff"],
-    invert: "greyscale",
-    values: {
-      "unspecified entity": "#f0f0f0",
-      "simple chemical": "#f0f0f0",
-      macromolecule: "#f0f0f0",
-      "nucleic acid feature": "#f0f0f0",
-      "perturbing agent": "#f0f0f0",
-      "source and sink": "#f0f0f0",
-      complex: "#d9d9d9",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#f0f0f0",
-      tag: "#f0f0f0",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#bdbdbd",
-      submap: "#bdbdbd",
+  'inverse_greyscale': {
+    'name': 'Inverse greyscale',
+    'preview': ['#bdbdbd', '#d9d9d9', '#f0f0f0', '#ffffff'],
+    'invert': 'greyscale',
+    'values': {
+      'unspecified entity': '#f0f0f0',
+      'simple chemical': '#f0f0f0',
+      'macromolecule': '#f0f0f0',
+      'nucleic acid feature': '#f0f0f0',
+      'perturbing agent': '#f0f0f0',
+      'source and sink': '#f0f0f0',
+      'complex': '#d9d9d9',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#f0f0f0',
+      'tag': '#f0f0f0',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#bdbdbd',
+      'submap': '#bdbdbd',
       // AF
-      "BA plain": "#f0f0f0",
-      "BA unspecified entity": "#f0f0f0",
-      "BA simple chemical": "#f0f0f0",
-      "BA macromolecule": "#f0f0f0",
-      "BA nucleic acid feature": "#f0f0f0",
-      "BA perturbing agent": "#f0f0f0",
-      "BA complex": "#d9d9d9",
-      delay: "#ffffff",
+      'BA plain': '#f0f0f0',
+      'BA unspecified entity': '#f0f0f0',
+      'BA simple chemical': '#f0f0f0',
+      'BA macromolecule': '#f0f0f0',
+      'BA nucleic acid feature': '#f0f0f0',
+      'BA perturbing agent': '#f0f0f0',
+      'BA complex': '#d9d9d9',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#f0f0f0",
-      "SIF simple chemical": "#d9d9d9",
-    },
+      'SIF macromolecule': '#f0f0f0',
+      'SIF simple chemical': '#d9d9d9'
+    }
   },
-  blue_scale: {
-    name: "Blue scale",
-    preview: ["#ffffff", "#eff3ff", "#c6dbef", "#9ecae1"],
-    invert: "inverse_blue_scale",
-    values: {
-      "unspecified entity": "#9ecae1",
-      "simple chemical": "#9ecae1",
-      macromolecule: "#9ecae1",
-      "nucleic acid feature": "#9ecae1",
-      "perturbing agent": "#9ecae1",
-      "source and sink": "#9ecae1",
-      complex: "#c6dbef",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#9ecae1",
-      tag: "#9ecae1",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#eff3ff",
-      submap: "#eff3ff",
+  'blue_scale': {
+    'name': 'Blue scale',
+    'preview': ['#ffffff', '#eff3ff', '#c6dbef', '#9ecae1'],
+    'invert': 'inverse_blue_scale',
+    'values': {
+      'unspecified entity': '#9ecae1',
+      'simple chemical': '#9ecae1',
+      'macromolecule': '#9ecae1',
+      'nucleic acid feature': '#9ecae1',
+      'perturbing agent': '#9ecae1',
+      'source and sink': '#9ecae1',
+      'complex': '#c6dbef',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#9ecae1',
+      'tag': '#9ecae1',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#eff3ff',
+      'submap': '#eff3ff',
       // AF
-      "BA plain": "#9ecae1",
-      "BA unspecified entity": "#9ecae1",
-      "BA simple chemical": "#9ecae1",
-      "BA macromolecule": "#9ecae1",
-      "BA nucleic acid feature": "#9ecae1",
-      "BA perturbing agent": "#9ecae1",
-      "BA complex": "#c6dbef",
-      delay: "#ffffff",
+      'BA plain': '#9ecae1',
+      'BA unspecified entity': '#9ecae1',
+      'BA simple chemical': '#9ecae1',
+      'BA macromolecule': '#9ecae1',
+      'BA nucleic acid feature': '#9ecae1',
+      'BA perturbing agent': '#9ecae1',
+      'BA complex': '#c6dbef',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#c6dbef",
-      "SIF simple chemical": "#eff3ff",
-    },
+      'SIF macromolecule': '#c6dbef',
+      'SIF simple chemical': '#eff3ff'
+    }
   },
-  inverse_blue_scale: {
-    name: "Inverse blue scale",
-    preview: ["#9ecae1", "#c6dbef", "#eff3ff", "#ffffff"],
-    invert: "blue_scale",
-    values: {
-      "unspecified entity": "#eff3ff",
-      "simple chemical": "#eff3ff",
-      macromolecule: "#eff3ff",
-      "nucleic acid feature": "#eff3ff",
-      "perturbing agent": "#eff3ff",
-      "source and sink": "#eff3ff",
-      complex: "#c6dbef",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#eff3ff",
-      tag: "#eff3ff",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#9ecae1",
-      submap: "#9ecae1",
+  'inverse_blue_scale': {
+    'name': 'Inverse blue scale',
+    'preview': ['#9ecae1', '#c6dbef', '#eff3ff', '#ffffff'],
+    'invert': 'blue_scale',
+    'values': {
+      'unspecified entity': '#eff3ff',
+      'simple chemical': '#eff3ff',
+      'macromolecule': '#eff3ff',
+      'nucleic acid feature': '#eff3ff',
+      'perturbing agent': '#eff3ff',
+      'source and sink': '#eff3ff',
+      'complex': '#c6dbef',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#eff3ff',
+      'tag': '#eff3ff',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#9ecae1',
+      'submap': '#9ecae1',
       // AF
-      "BA plain": "#eff3ff",
-      "BA unspecified entity": "#eff3ff",
-      "BA simple chemical": "#eff3ff",
-      "BA macromolecule": "#eff3ff",
-      "BA nucleic acid feature": "#eff3ff",
-      "BA perturbing agent": "#eff3ff",
-      "BA complex": "#c6dbef",
-      delay: "#ffffff",
+      'BA plain': '#eff3ff',
+      'BA unspecified entity': '#eff3ff',
+      'BA simple chemical': '#eff3ff',
+      'BA macromolecule': '#eff3ff',
+      'BA nucleic acid feature': '#eff3ff',
+      'BA perturbing agent': '#eff3ff',
+      'BA complex': '#c6dbef',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#eff3ff",
-      "SIF simple chemical": "#c6dbef",
-    },
+      'SIF macromolecule': '#eff3ff',
+      'SIF simple chemical': '#c6dbef'
+    }
   },
-  opposed_red_blue: {
-    name: "Red blue",
-    preview: ["#f4a582", "#fddbc7", "#f7f7f7", "#d1e5f0", "#92c5de"],
-    invert: "opposed_red_blue2",
-    values: {
-      "unspecified entity": "#f7f7f7",
-      "simple chemical": "#fddbc7",
-      macromolecule: "#92c5de",
-      "nucleic acid feature": "#f4a582",
-      "perturbing agent": "#f7f7f7",
-      "source and sink": "#f7f7f7",
-      complex: "#d1e5f0",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#f7f7f7",
-      tag: "#f7f7f7",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#f7f7f7",
-      submap: "#f7f7f7",
+  'opposed_red_blue': {
+    'name': 'Red blue',
+    'preview': ['#f4a582', '#fddbc7', '#f7f7f7', '#d1e5f0', '#92c5de'],
+    'invert': 'opposed_red_blue2',
+    'values': {
+      'unspecified entity': '#f7f7f7',
+      'simple chemical': '#fddbc7',
+      'macromolecule': '#92c5de',
+      'nucleic acid feature': '#f4a582',
+      'perturbing agent': '#f7f7f7',
+      'source and sink': '#f7f7f7',
+      'complex': '#d1e5f0',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#f7f7f7',
+      'tag': '#f7f7f7',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#f7f7f7',
+      'submap': '#f7f7f7',
       // AF
-      "BA plain": "#f7f7f7",
-      "BA unspecified entity": "#f7f7f7",
-      "BA simple chemical": "#fddbc7",
-      "BA macromolecule": "#92c5de",
-      "BA nucleic acid feature": "#f4a582",
-      "BA perturbing agent": "#f7f7f7",
-      "BA complex": "#d1e5f0",
-      delay: "#ffffff",
+      'BA plain': '#f7f7f7',
+      'BA unspecified entity': '#f7f7f7',
+      'BA simple chemical': '#fddbc7',
+      'BA macromolecule': '#92c5de',
+      'BA nucleic acid feature': '#f4a582',
+      'BA perturbing agent': '#f7f7f7',
+      'BA complex': '#d1e5f0',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#92c5de",
-      "SIF simple chemical": "#f4a582",
-    },
+      'SIF macromolecule': '#92c5de',
+      'SIF simple chemical': '#f4a582'
+    }
   },
-  opposed_red_blue2: {
-    name: "Red blue 2",
-    preview: ["#92c5de", "#d1e5f0", "#f7f7f7", "#fddbc7", "#f4a582"],
-    invert: "opposed_red_blue",
-    values: {
-      "unspecified entity": "#f7f7f7",
-      "simple chemical": "#d1e5f0",
-      macromolecule: "#f4a582",
-      "nucleic acid feature": "#92c5de",
-      "perturbing agent": "#f7f7f7",
-      "source and sink": "#f7f7f7",
-      complex: "#fddbc7",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#f7f7f7",
-      tag: "#f7f7f7",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#f7f7f7",
-      submap: "#f7f7f7",
+  'opposed_red_blue2': {
+    'name': 'Red blue 2',
+    'preview': ['#92c5de', '#d1e5f0', '#f7f7f7', '#fddbc7', '#f4a582'],
+    'invert': 'opposed_red_blue',
+    'values': {
+      'unspecified entity': '#f7f7f7',
+      'simple chemical': '#d1e5f0',
+      'macromolecule': '#f4a582',
+      'nucleic acid feature': '#92c5de',
+      'perturbing agent': '#f7f7f7',
+      'source and sink': '#f7f7f7',
+      'complex': '#fddbc7',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#f7f7f7',
+      'tag': '#f7f7f7',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#f7f7f7',
+      'submap': '#f7f7f7',
       // AF
-      "BA plain": "#f7f7f7",
-      "BA unspecified entity": "#f7f7f7",
-      "BA simple chemical": "#d1e5f0",
-      "BA macromolecule": "#f4a582",
-      "BA nucleic acid feature": "#92c5de",
-      "BA perturbing agent": "#f7f7f7",
-      "BA complex": "#fddbc7",
-      delay: "#ffffff",
+      'BA plain': '#f7f7f7',
+      'BA unspecified entity': '#f7f7f7',
+      'BA simple chemical': '#d1e5f0',
+      'BA macromolecule': '#f4a582',
+      'BA nucleic acid feature': '#92c5de',
+      'BA perturbing agent': '#f7f7f7',
+      'BA complex': '#fddbc7',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#f4a582",
-      "SIF simple chemical": "#92c5de",
-    },
+      'SIF macromolecule': '#f4a582',
+      'SIF simple chemical': '#92c5de'
+    }
   },
-  opposed_green_brown: {
-    name: "Green brown",
-    preview: ["#dfc27d", "#f6e8c3", "#f5f5f5", "#c7eae5", "#80cdc1"],
-    invert: "opposed_green_brown2",
-    values: {
-      "unspecified entity": "#f5f5f5",
-      "simple chemical": "#f6e8c3",
-      macromolecule: "#80cdc1",
-      "nucleic acid feature": "#dfc27d",
-      "perturbing agent": "#f5f5f5",
-      "source and sink": "#f5f5f5",
-      complex: "#c7eae5",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#f5f5f5",
-      tag: "#f5f5f5",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#f5f5f5",
-      submap: "#f5f5f5",
+  'opposed_green_brown': {
+    'name': 'Green brown',
+    'preview': ['#dfc27d', '#f6e8c3', '#f5f5f5', '#c7eae5', '#80cdc1'],
+    'invert': 'opposed_green_brown2',
+    'values': {
+      'unspecified entity': '#f5f5f5',
+      'simple chemical': '#f6e8c3',
+      'macromolecule': '#80cdc1',
+      'nucleic acid feature': '#dfc27d',
+      'perturbing agent': '#f5f5f5',
+      'source and sink': '#f5f5f5',
+      'complex': '#c7eae5',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#f5f5f5',
+      'tag': '#f5f5f5',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#f5f5f5',
+      'submap': '#f5f5f5',
       // AF
-      "BA plain": "#f5f5f5",
-      "BA unspecified entity": "#f5f5f5",
-      "BA simple chemical": "#f6e8c3",
-      "BA macromolecule": "#80cdc1",
-      "BA nucleic acid feature": "#dfc27d",
-      "BA perturbing agent": "#f5f5f5",
-      "BA complex": "#c7eae5",
-      delay: "#ffffff",
+      'BA plain': '#f5f5f5',
+      'BA unspecified entity': '#f5f5f5',
+      'BA simple chemical': '#f6e8c3',
+      'BA macromolecule': '#80cdc1',
+      'BA nucleic acid feature': '#dfc27d',
+      'BA perturbing agent': '#f5f5f5',
+      'BA complex': '#c7eae5',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#80cdc1",
-      "SIF simple chemical": "#dfc27d",
-    },
+      'SIF macromolecule': '#80cdc1',
+      'SIF simple chemical': '#dfc27d'
+    }
   },
-  opposed_green_brown2: {
-    name: "Green brown 2",
-    preview: ["#80cdc1", "#c7eae5", "#f5f5f5", "#f6e8c3", "#dfc27d"],
-    invert: "opposed_green_brown",
-    values: {
-      "unspecified entity": "#f5f5f5",
-      "simple chemical": "#c7eae5",
-      macromolecule: "#dfc27d",
-      "nucleic acid feature": "#80cdc1",
-      "perturbing agent": "#f5f5f5",
-      "source and sink": "#f5f5f5",
-      complex: "#f6e8c3",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#f5f5f5",
-      tag: "#f5f5f5",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#f5f5f5",
-      submap: "#f5f5f5",
+  'opposed_green_brown2': {
+    'name': 'Green brown 2',
+    'preview': ['#80cdc1', '#c7eae5', '#f5f5f5', '#f6e8c3', '#dfc27d'],
+    'invert': 'opposed_green_brown',
+    'values': {
+      'unspecified entity': '#f5f5f5',
+      'simple chemical': '#c7eae5',
+      'macromolecule': '#dfc27d',
+      'nucleic acid feature': '#80cdc1',
+      'perturbing agent': '#f5f5f5',
+      'source and sink': '#f5f5f5',
+      'complex': '#f6e8c3',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#f5f5f5',
+      'tag': '#f5f5f5',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#f5f5f5',
+      'submap': '#f5f5f5',
       // AF
-      "BA plain": "#f5f5f5",
-      "BA unspecified entity": "#f5f5f5",
-      "BA simple chemical": "#c7eae5",
-      "BA macromolecule": "#dfc27d",
-      "BA nucleic acid feature": "#80cdc1",
-      "BA perturbing agent": "#f5f5f5",
-      "BA complex": "#f6e8c3",
-      delay: "#ffffff",
+      'BA plain': '#f5f5f5',
+      'BA unspecified entity': '#f5f5f5',
+      'BA simple chemical': '#c7eae5',
+      'BA macromolecule': '#dfc27d',
+      'BA nucleic acid feature': '#80cdc1',
+      'BA perturbing agent': '#f5f5f5',
+      'BA complex': '#f6e8c3',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#dfc27d",
-      "SIF simple chemical": "#80cdc1",
-    },
+      'SIF macromolecule': '#dfc27d',
+      'SIF simple chemical': '#80cdc1'
+    }
   },
-  opposed_purple_brown: {
-    name: "Purple brown",
-    preview: ["#fdb863", "#fee0b6", "#f7f7f7", "#d8daeb", "#b2abd2"],
-    invert: "opposed_purple_brown2",
-    values: {
-      "unspecified entity": "#f7f7f7",
-      "simple chemical": "#fee0b6",
-      macromolecule: "#b2abd2",
-      "nucleic acid feature": "#fdb863",
-      "perturbing agent": "#f7f7f7",
-      "source and sink": "#f7f7f7",
-      complex: "#d8daeb",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#f7f7f7",
-      tag: "#f7f7f7",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#f7f7f7",
-      submap: "#f7f7f7",
+  'opposed_purple_brown': {
+    'name': 'Purple brown',
+    'preview': ['#fdb863', '#fee0b6', '#f7f7f7', '#d8daeb', '#b2abd2'],
+    'invert': 'opposed_purple_brown2',
+    'values': {
+      'unspecified entity': '#f7f7f7',
+      'simple chemical': '#fee0b6',
+      'macromolecule': '#b2abd2',
+      'nucleic acid feature': '#fdb863',
+      'perturbing agent': '#f7f7f7',
+      'source and sink': '#f7f7f7',
+      'complex': '#d8daeb',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#f7f7f7',
+      'tag': '#f7f7f7',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#f7f7f7',
+      'submap': '#f7f7f7',
       // AF
-      "BA plain": "#f7f7f7",
-      "BA unspecified entity": "#f7f7f7",
-      "BA simple chemical": "#fee0b6",
-      "BA macromolecule": "#b2abd2",
-      "BA nucleic acid feature": "#fdb863",
-      "BA perturbing agent": "#f7f7f7",
-      "BA complex": "#d8daeb",
-      delay: "#ffffff",
+      'BA plain': '#f7f7f7',
+      'BA unspecified entity': '#f7f7f7',
+      'BA simple chemical': '#fee0b6',
+      'BA macromolecule': '#b2abd2',
+      'BA nucleic acid feature': '#fdb863',
+      'BA perturbing agent': '#f7f7f7',
+      'BA complex': '#d8daeb',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#b2abd2",
-      "SIF simple chemical": "#fdb863",
-    },
+      'SIF macromolecule': '#b2abd2',
+      'SIF simple chemical': '#fdb863'
+    }
   },
-  opposed_purple_brown2: {
-    name: "Purple brown 2",
-    preview: ["#b2abd2", "#d8daeb", "#f7f7f7", "#fee0b6", "#fdb863"],
-    invert: "opposed_purple_brown",
-    values: {
-      "unspecified entity": "#f7f7f7",
-      "simple chemical": "#d8daeb",
-      macromolecule: "#fdb863",
-      "nucleic acid feature": "#b2abd2",
-      "perturbing agent": "#f7f7f7",
-      "source and sink": "#f7f7f7",
-      complex: "#fee0b6",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#f7f7f7",
-      tag: "#f7f7f7",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#f7f7f7",
-      submap: "#f7f7f7",
+  'opposed_purple_brown2': {
+    'name': 'Purple brown 2',
+    'preview': ['#b2abd2', '#d8daeb', '#f7f7f7', '#fee0b6', '#fdb863'],
+    'invert': 'opposed_purple_brown',
+    'values': {
+      'unspecified entity': '#f7f7f7',
+      'simple chemical': '#d8daeb',
+      'macromolecule': '#fdb863',
+      'nucleic acid feature': '#b2abd2',
+      'perturbing agent': '#f7f7f7',
+      'source and sink': '#f7f7f7',
+      'complex': '#fee0b6',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#f7f7f7',
+      'tag': '#f7f7f7',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#f7f7f7',
+      'submap': '#f7f7f7',
       // AF
-      "BA plain": "#f7f7f7",
-      "BA unspecified entity": "#f7f7f7",
-      "BA simple chemical": "#d8daeb",
-      "BA macromolecule": "#fdb863",
-      "BA nucleic acid feature": "#b2abd2",
-      "BA perturbing agent": "#f7f7f7",
-      "BA complex": "#fee0b6",
-      delay: "#ffffff",
+      'BA plain': '#f7f7f7',
+      'BA unspecified entity': '#f7f7f7',
+      'BA simple chemical': '#d8daeb',
+      'BA macromolecule': '#fdb863',
+      'BA nucleic acid feature': '#b2abd2',
+      'BA perturbing agent': '#f7f7f7',
+      'BA complex': '#fee0b6',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#fdb863",
-      "SIF simple chemical": "#b2abd2",
-    },
+      'SIF macromolecule': '#fdb863',
+      'SIF simple chemical': '#b2abd2'
+    }
   },
-  opposed_purple_green: {
-    name: "Purple green",
-    preview: ["#a6dba0", "#d9f0d3", "#f7f7f7", "#e7d4e8", "#c2a5cf"],
-    invert: "opposed_purple_green2",
-    values: {
-      "unspecified entity": "#f7f7f7",
-      "simple chemical": "#d9f0d3",
-      macromolecule: "#c2a5cf",
-      "nucleic acid feature": "#a6dba0",
-      "perturbing agent": "#f7f7f7",
-      "source and sink": "#f7f7f7",
-      complex: "#e7d4e8",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#f7f7f7",
-      tag: "#f7f7f7",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#f7f7f7",
-      submap: "#f7f7f7",
+  'opposed_purple_green': {
+    'name': 'Purple green',
+    'preview': ['#a6dba0', '#d9f0d3', '#f7f7f7', '#e7d4e8', '#c2a5cf'],
+    'invert': 'opposed_purple_green2',
+    'values': {
+      'unspecified entity': '#f7f7f7',
+      'simple chemical': '#d9f0d3',
+      'macromolecule': '#c2a5cf',
+      'nucleic acid feature': '#a6dba0',
+      'perturbing agent': '#f7f7f7',
+      'source and sink': '#f7f7f7',
+      'complex': '#e7d4e8',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#f7f7f7',
+      'tag': '#f7f7f7',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#f7f7f7',
+      'submap': '#f7f7f7',
       // AF
-      "BA plain": "#f7f7f7",
-      "BA unspecified entity": "#f7f7f7",
-      "BA simple chemical": "#d9f0d3",
-      "BA macromolecule": "#c2a5cf",
-      "BA nucleic acid feature": "#a6dba0",
-      "BA perturbing agent": "#f7f7f7",
-      "BA complex": "#e7d4e8",
-      delay: "#ffffff",
+      'BA plain': '#f7f7f7',
+      'BA unspecified entity': '#f7f7f7',
+      'BA simple chemical': '#d9f0d3',
+      'BA macromolecule': '#c2a5cf',
+      'BA nucleic acid feature': '#a6dba0',
+      'BA perturbing agent': '#f7f7f7',
+      'BA complex': '#e7d4e8',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#c2a5cf",
-      "SIF simple chemical": "#a6dba0",
-    },
+      'SIF macromolecule': '#c2a5cf',
+      'SIF simple chemical': '#a6dba0'
+    }
   },
-  opposed_purple_green2: {
-    name: "Purple green 2",
-    preview: ["#c2a5cf", "#e7d4e8", "#f7f7f7", "#d9f0d3", "#a6dba0"],
-    invert: "opposed_purple_green",
-    values: {
-      "unspecified entity": "#f7f7f7",
-      "simple chemical": "#e7d4e8",
-      macromolecule: "#a6dba0",
-      "nucleic acid feature": "#c2a5cf",
-      "perturbing agent": "#f7f7f7",
-      "source and sink": "#f7f7f7",
-      complex: "#d9f0d3",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#f7f7f7",
-      tag: "#f7f7f7",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#f7f7f7",
-      submap: "#f7f7f7",
+  'opposed_purple_green2': {
+    'name': 'Purple green 2',
+    'preview': ['#c2a5cf', '#e7d4e8', '#f7f7f7', '#d9f0d3', '#a6dba0'],
+    'invert': 'opposed_purple_green',
+    'values': {
+      'unspecified entity': '#f7f7f7',
+      'simple chemical': '#e7d4e8',
+      'macromolecule': '#a6dba0',
+      'nucleic acid feature': '#c2a5cf',
+      'perturbing agent': '#f7f7f7',
+      'source and sink': '#f7f7f7',
+      'complex': '#d9f0d3',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#f7f7f7',
+      'tag': '#f7f7f7',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#f7f7f7',
+      'submap': '#f7f7f7',
       // AF
-      "BA plain": "#f7f7f7",
-      "BA unspecified entity": "#f7f7f7",
-      "BA simple chemical": "#e7d4e8",
-      "BA macromolecule": "#a6dba0",
-      "BA nucleic acid feature": "#c2a5cf",
-      "BA perturbing agent": "#f7f7f7",
-      "BA complex": "#d9f0d3",
-      delay: "#ffffff",
+      'BA plain': '#f7f7f7',
+      'BA unspecified entity': '#f7f7f7',
+      'BA simple chemical': '#e7d4e8',
+      'BA macromolecule': '#a6dba0',
+      'BA nucleic acid feature': '#c2a5cf',
+      'BA perturbing agent': '#f7f7f7',
+      'BA complex': '#d9f0d3',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#a6dba0",
-      "SIF simple chemical": "#c2a5cf",
-    },
+      'SIF macromolecule': '#a6dba0',
+      'SIF simple chemical': '#c2a5cf'
+    }
   },
-  opposed_grey_red: {
-    name: "Grey red",
-    preview: ["#bababa", "#e0e0e0", "#ffffff", "#fddbc7", "#f4a582"],
-    invert: "opposed_grey_red2",
-    values: {
-      "unspecified entity": "#ffffff",
-      "simple chemical": "#e0e0e0",
-      macromolecule: "#f4a582",
-      "nucleic acid feature": "#bababa",
-      "perturbing agent": "#ffffff",
-      "source and sink": "#ffffff",
-      complex: "#fddbc7",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#ffffff",
-      tag: "#ffffff",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#ffffff",
-      submap: "#ffffff",
+  'opposed_grey_red': {
+    'name': 'Grey red',
+    'preview': ['#bababa', '#e0e0e0', '#ffffff', '#fddbc7', '#f4a582'],
+    'invert': 'opposed_grey_red2',
+    'values': {
+      'unspecified entity': '#ffffff',
+      'simple chemical': '#e0e0e0',
+      'macromolecule': '#f4a582',
+      'nucleic acid feature': '#bababa',
+      'perturbing agent': '#ffffff',
+      'source and sink': '#ffffff',
+      'complex': '#fddbc7',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#ffffff',
+      'tag': '#ffffff',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#ffffff',
+      'submap': '#ffffff',
       // AF
-      "BA plain": "#ffffff",
-      "BA unspecified entity": "#ffffff",
-      "BA simple chemical": "#e0e0e0",
-      "BA macromolecule": "#f4a582",
-      "BA nucleic acid feature": "#bababa",
-      "BA perturbing agent": "#ffffff",
-      "BA complex": "#fddbc7",
-      delay: "#ffffff",
+      'BA plain': '#ffffff',
+      'BA unspecified entity': '#ffffff',
+      'BA simple chemical': '#e0e0e0',
+      'BA macromolecule': '#f4a582',
+      'BA nucleic acid feature': '#bababa',
+      'BA perturbing agent': '#ffffff',
+      'BA complex': '#fddbc7',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#f4a582",
-      "SIF simple chemical": "#bababa",
-    },
+      'SIF macromolecule': '#f4a582',
+      'SIF simple chemical': '#bababa'
+    }
   },
-  opposed_grey_red2: {
-    name: "Grey red 2",
-    preview: ["#f4a582", "#fddbc7", "#ffffff", "#e0e0e0", "#bababa"],
-    invert: "opposed_grey_red",
-    values: {
-      "unspecified entity": "#ffffff",
-      "simple chemical": "#fddbc7",
-      macromolecule: "#bababa",
-      "nucleic acid feature": "#f4a582",
-      "perturbing agent": "#ffffff",
-      "source and sink": "#ffffff",
-      complex: "#e0e0e0",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#ffffff",
-      tag: "#ffffff",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#ffffff",
-      submap: "#ffffff",
+  'opposed_grey_red2': {
+    'name': 'Grey red 2',
+    'preview': ['#f4a582', '#fddbc7', '#ffffff', '#e0e0e0', '#bababa'],
+    'invert': 'opposed_grey_red',
+    'values': {
+      'unspecified entity': '#ffffff',
+      'simple chemical': '#fddbc7',
+      'macromolecule': '#bababa',
+      'nucleic acid feature': '#f4a582',
+      'perturbing agent': '#ffffff',
+      'source and sink': '#ffffff',
+      'complex': '#e0e0e0',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#ffffff',
+      'tag': '#ffffff',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#ffffff',
+      'submap': '#ffffff',
       // AF
-      "BA plain": "#ffffff",
-      "BA unspecified entity": "#ffffff",
-      "BA simple chemical": "#fddbc7",
-      "BA macromolecule": "#bababa",
-      "BA nucleic acid feature": "#f4a582",
-      "BA perturbing agent": "#ffffff",
-      "BA complex": "#e0e0e0",
-      delay: "#ffffff",
+      'BA plain': '#ffffff',
+      'BA unspecified entity': '#ffffff',
+      'BA simple chemical': '#fddbc7',
+      'BA macromolecule': '#bababa',
+      'BA nucleic acid feature': '#f4a582',
+      'BA perturbing agent': '#ffffff',
+      'BA complex': '#e0e0e0',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#bababa",
-      "SIF simple chemical": "#f4a582",
-    },
+      'SIF macromolecule': '#bababa',
+      'SIF simple chemical': '#f4a582'
+    }
   },
-  pure_white: {
-    name: "Pure White",
-    preview: ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff"],
-    values: {
-      "unspecified entity": "#ffffff",
-      "simple chemical": "#ffffff",
-      macromolecule: "#ffffff",
-      "nucleic acid feature": "#ffffff",
-      "perturbing agent": "#ffffff",
-      "source and sink": "#ffffff",
-      complex: "#ffffff",
-      process: "#ffffff",
-      "omitted process": "#ffffff",
-      "uncertain process": "#ffffff",
-      association: "#ffffff",
-      dissociation: "#ffffff",
-      phenotype: "#ffffff",
-      tag: "#ffffff",
-      consumption: "#ffffff",
-      production: "#ffffff",
-      modulation: "#ffffff",
-      stimulation: "#ffffff",
-      catalysis: "#ffffff",
-      inhibition: "#ffffff",
-      "necessary stimulation": "#ffffff",
-      "logic arc": "#ffffff",
-      "equivalence arc": "#ffffff",
-      and: "#ffffff",
-      or: "#ffffff",
-      not: "#ffffff",
-      compartment: "#ffffff",
-      submap: "#ffffff",
+  'pure_white': {
+    'name': 'Pure White',
+    'preview': ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'],
+    'values': {
+      'unspecified entity': '#ffffff',
+      'simple chemical': '#ffffff',
+      'macromolecule': '#ffffff',
+      'nucleic acid feature': '#ffffff',
+      'perturbing agent': '#ffffff',
+      'source and sink': '#ffffff',
+      'complex': '#ffffff',
+      'process': '#ffffff',
+      'omitted process': '#ffffff',
+      'uncertain process': '#ffffff',
+      'association': '#ffffff',
+      'dissociation': '#ffffff',
+      'phenotype': '#ffffff',
+      'tag': '#ffffff',
+      'consumption': '#ffffff',
+      'production': '#ffffff',
+      'modulation': '#ffffff',
+      'stimulation': '#ffffff',
+      'catalysis': '#ffffff',
+      'inhibition': '#ffffff',
+      'necessary stimulation': '#ffffff',
+      'logic arc': '#ffffff',
+      'equivalence arc': '#ffffff',
+      'and': '#ffffff',
+      'or': '#ffffff',
+      'not': '#ffffff',
+      'compartment': '#ffffff',
+      'submap': '#ffffff',
       // AF
-      "BA plain": "#ffffff",
-      "BA unspecified entity": "#ffffff",
-      "BA simple chemical": "#ffffff",
-      "BA macromolecule": "#ffffff",
-      "BA nucleic acid feature": "#ffffff",
-      "BA perturbing agent": "#ffffff",
-      "BA complex": "#ffffff",
-      delay: "#ffffff",
+      'BA plain': '#ffffff',
+      'BA unspecified entity': '#ffffff',
+      'BA simple chemical': '#ffffff',
+      'BA macromolecule': '#ffffff',
+      'BA nucleic acid feature': '#ffffff',
+      'BA perturbing agent': '#ffffff',
+      'BA complex': '#ffffff',
+      'delay': '#ffffff',
       // SIF
-      "SIF macromolecule": "#ffffff",
-      "SIF simple chemical": "#ffffff",
-    },
-  },
+      'SIF macromolecule': '#ffffff',
+      'SIF simple chemical': '#ffffff'
+    }
+  }
 };
 // set multimers to be the same as their original elements
 // just to avoid typing it manually in the mapColorSchemes dictionary
-for (var scheme in mapColorSchemes) {
-  mapColorSchemes[scheme]["values"]["nucleic acid feature multimer"] =
-    mapColorSchemes[scheme]["values"]["nucleic acid feature"];
-  mapColorSchemes[scheme]["values"]["macromolecule multimer"] =
-    mapColorSchemes[scheme]["values"]["macromolecule"];
-  mapColorSchemes[scheme]["values"]["simple chemical multimer"] =
-    mapColorSchemes[scheme]["values"]["simple chemical"];
-  mapColorSchemes[scheme]["values"]["complex multimer"] =
-    mapColorSchemes[scheme]["values"]["complex"];
+for(var scheme in mapColorSchemes){
+  mapColorSchemes[scheme]['values']['nucleic acid feature multimer'] = mapColorSchemes[scheme]['values']['nucleic acid feature'];
+  mapColorSchemes[scheme]['values']['macromolecule multimer'] = mapColorSchemes[scheme]['values']['macromolecule'];
+  mapColorSchemes[scheme]['values']['simple chemical multimer'] = mapColorSchemes[scheme]['values']['simple chemical'];
+  mapColorSchemes[scheme]['values']['complex multimer'] = mapColorSchemes[scheme]['values']['complex'];
 }
 
 // go through eles, mapping the id of these elements to values that were mapped to their data().class
 // classMap is of the form: {ele.data().class: value}
 // return object of the form: {ele.id: value}
-appUtilities.mapEleClassToId = function (eles, classMap) {
+appUtilities.mapEleClassToId = function(eles, classMap) {
   result = {};
-  for (var i = 0; i < eles.length; i++) {
+  for( var i = 0; i < eles.length; i++ ){
     ele = eles[i];
     result[ele.id()] = classMap[ele.data().class];
   }
@@ -1996,83 +1918,58 @@ appUtilities.mapEleClassToId = function (eles, classMap) {
 // not have a default background image.
 // classMap is of the form: {ele.data().class: value}
 // return object of the form: {ele.id: value}
-appUtilities.mapEleClassToBackgroundImage = function (
-  eles,
-  classMap,
-  scheme_type
-) {
+appUtilities.mapEleClassToBackgroundImage = function(eles, classMap, scheme_type){
   result = {};
-  if (scheme_type == "gradient") {
-    for (var i = 0; i < eles.length; i++) {
+  if(scheme_type == 'gradient'){
+    for( var i = 0; i < eles.length; i++ ){
       ele = eles[i];
-      result[ele.id()] = colorCodeToGradientImage[classMap[ele.data().class]];
+      result[ele.id()] = colorCodeToGradientImage[ classMap[ele.data().class] ];
     }
-  } else if (scheme_type == "3D") {
-    for (var i = 0; i < eles.length; i++) {
+  }
+  else if (scheme_type == '3D'){
+    for( var i = 0; i < eles.length; i++ ){
       ele = eles[i];
-      result[ele.id()] = colorCodeTo3DImage[classMap[ele.data().class]];
+      result[ele.id()] = colorCodeTo3DImage[ classMap[ele.data().class ]];
     }
   }
   return result;
-};
+}
 
-appUtilities.mapBgImgCoverToEle = function () {
+appUtilities.mapBgImgCoverToEle = function(){
   result = {};
-  for (var i = 0; i < eles.length; i++) {
+  for( var i = 0; i < eles.length; i++ ){
     ele = eles[i];
     result[ele.id()] = classMap[ele.data().class];
   }
   return result;
-};
+}
 
 // use this function to change the global style of the map by applying the current color scheme
-appUtilities.applyMapColorScheme = function (
-  newColorScheme,
-  scheme_type,
-  self,
-  _cy
-) {
-  var actions = appUtilities.getActionsToApplyMapColorScheme(
-    newColorScheme,
-    scheme_type,
-    self,
-    _cy
-  );
+appUtilities.applyMapColorScheme = function(newColorScheme, scheme_type, self, _cy) {
+  var actions = appUtilities.getActionsToApplyMapColorScheme(newColorScheme, scheme_type, self, _cy);
   var cy = _cy || appUtilities.getActiveCy();
   cy.undoRedo().do("batch", actions);
-};
+}
 
 // get the actions required to change the global style of the map by applying the current color scheme
-appUtilities.getActionsToApplyMapColorScheme = function (
-  newColorScheme,
-  scheme_type,
-  self,
-  _cy
-) {
+appUtilities.getActionsToApplyMapColorScheme = function(newColorScheme, scheme_type, self, _cy) {
+
   // if _cy param is set use it else use the recently active cy instance
   var cy = _cy || appUtilities.getActiveCy();
   var eles = cy.nodes();
 
-  if (scheme_type == "solid") {
-    var idMap = appUtilities.mapEleClassToId(
-      eles,
-      mapColorSchemes[newColorScheme]["values"]
-    );
-    var collapsedChildren = cy
-      .expandCollapse("get")
-      .getAllCollapsedChildrenRecursively()
-      .filter("node");
-    var collapsedIdMap = appUtilities.mapEleClassToId(
-      collapsedChildren,
-      mapColorSchemes[newColorScheme]["values"]
-    );
+  if(scheme_type == 'solid'){
+
+    var idMap = appUtilities.mapEleClassToId(eles, mapColorSchemes[newColorScheme]['values']);
+    var collapsedChildren = cy.expandCollapse('get').getAllCollapsedChildrenRecursively().filter("node");
+    var collapsedIdMap = appUtilities.mapEleClassToId(collapsedChildren, mapColorSchemes[newColorScheme]['values']);
     var chiseInstance = appUtilities.getActiveChiseInstance();
 
-    var clearBgImg = function (eles) {
+    var clearBgImg = function(eles){
       result = {};
-      for (var i = 0; i < eles.length; i++) {
+      for( var i = 0; i < eles.length; i++ ){
         ele = eles[i];
-        result[ele.id()] = "";
+        result[ele.id()] = '';
       }
       return result;
     };
@@ -2080,134 +1977,60 @@ appUtilities.getActionsToApplyMapColorScheme = function (
     var actions = [];
 
     // first clear the background images of already present elements
-    actions.push({
-      name: "changeData",
-      param: {
-        eles: eles,
-        name: "background-image",
-        valueMap: clearBgImg(eles),
-      },
-    });
+    actions.push({name: "changeData", param: {eles: eles, name: 'background-image', valueMap: clearBgImg(eles)}});
     // edit style of the current map elements
-    actions.push({
-      name: "changeData",
-      param: { eles: eles, name: "background-color", valueMap: idMap },
-    });
+    actions.push({name: "changeData", param: {eles: eles, name: 'background-color', valueMap: idMap}});
     // first clear the background images of already present collapsed elements
-    actions.push({
-      name: "changeDataDirty",
-      param: {
-        eles: collapsedChildren,
-        name: "background-image",
-        valueMap: clearBgImg(collapsedChildren),
-      },
-    });
+    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-image', valueMap: clearBgImg(collapsedChildren)}});   
     // collapsed nodes' style should also be changed, special edge case
-    actions.push({
-      name: "changeDataDirty",
-      param: {
-        eles: collapsedChildren,
-        name: "background-color",
-        valueMap: collapsedIdMap,
-      },
-    });
+    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-color', valueMap: collapsedIdMap}});
     // if background-image isn't deleted from css, it is shown as soon as the node is expanded until the end of animation
-    actions.push({
-      name: "changeCss",
-      param: {
-        eles: collapsedChildren,
-        name: "background-image",
-        valueMap: "",
-      },
-    });
+    actions.push({name: "changeCss", param: {eles: collapsedChildren, name: 'background-image', valueMap: ""}});     
 
-    actions.push({
-      name: "refreshColorSchemeMenu",
-      param: { value: newColorScheme, self: self, scheme_type: scheme_type },
-    });
+    actions.push({name: "refreshColorSchemeMenu", param: {value: newColorScheme, self: self, scheme_type: scheme_type}});
 
     // set to be the default as well
-    for (var nodeClass in mapColorSchemes[newColorScheme]["values"]) {
-      classBgColor = mapColorSchemes[newColorScheme]["values"][nodeClass];
+    for(var nodeClass in mapColorSchemes[newColorScheme]['values']){
+      classBgColor = mapColorSchemes[newColorScheme]['values'][nodeClass];
       // nodeClass may not be defined in the defaultProperties (for edges, for example)
-      if (nodeClass in chiseInstance.elementUtilities.getDefaultProperties()) {
-        actions.push({
-          name: "setDefaultProperty",
-          param: {
-            class: nodeClass,
-            name: "background-color",
-            value: classBgColor,
-          },
-        });
-        actions.push({
-          name: "setDefaultProperty",
-          param: { class: nodeClass, name: "background-fit", value: "" },
-        });
-        actions.push({
-          name: "setDefaultProperty",
-          param: { class: nodeClass, name: "background-position-x", value: "" },
-        });
-        actions.push({
-          name: "setDefaultProperty",
-          param: { class: nodeClass, name: "background-position-y", value: "" },
-        });
-        actions.push({
-          name: "setDefaultProperty",
-          param: { class: nodeClass, name: "background-image", value: "" },
-        });
-        actions.push({
-          name: "setDefaultProperty",
-          param: { class: nodeClass, name: "background-width", value: "" },
-        });
-        actions.push({
-          name: "setDefaultProperty",
-          param: { class: nodeClass, name: "background-height", value: "" },
-        });
+      if(nodeClass in chiseInstance.elementUtilities.getDefaultProperties()){
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-color', value: classBgColor}});
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-fit', value: ''}});
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-position-x', value: ''}});
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-position-y', value: ''}});
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-image', value: ''}});
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-width', value: ''}});
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-height', value:''}});         
       }
     }
+
   }
 
   // no need to handle 3D and Gradient color schemes separately
   else {
-    var colorIDMap = appUtilities.mapEleClassToId(
-      eles,
-      mapColorSchemes[newColorScheme]["values"]
-    );
-    var backgroundImgMap = appUtilities.mapEleClassToBackgroundImage(
-      eles,
-      mapColorSchemes[newColorScheme]["values"],
-      scheme_type
-    );
-    var collapsedChildren = cy
-      .expandCollapse("get")
-      .getAllCollapsedChildrenRecursively()
-      .filter("node");
-    var collapsedColorIDMap = appUtilities.mapEleClassToId(
-      collapsedChildren,
-      mapColorSchemes[newColorScheme]["values"]
-    );
-    var collapsedBackgroundImgMap = appUtilities.mapEleClassToBackgroundImage(
-      collapsedChildren,
-      mapColorSchemes[newColorScheme]["values"],
-      scheme_type
-    );
+
+    var colorIDMap = appUtilities.mapEleClassToId(eles, mapColorSchemes[newColorScheme]['values']);
+    var backgroundImgMap = appUtilities.mapEleClassToBackgroundImage(eles, mapColorSchemes[newColorScheme]['values'], scheme_type);
+    var collapsedChildren = cy.expandCollapse('get').getAllCollapsedChildrenRecursively().filter("node");
+    var collapsedColorIDMap = appUtilities.mapEleClassToId(collapsedChildren, mapColorSchemes[newColorScheme]['values']);
+    var collapsedBackgroundImgMap = appUtilities.mapEleClassToBackgroundImage(collapsedChildren, mapColorSchemes[newColorScheme]['values'], scheme_type);
     var chiseInstance = appUtilities.getActiveChiseInstance();
 
     //utility functions to set background image Properties
-    var mapCovertoBgFit = function (eles) {
+    var mapCovertoBgFit = function(eles){
       result = {};
-      for (var i = 0; i < eles.length; i++) {
+      for( var i = 0; i < eles.length; i++ ){
         ele = eles[i];
-        result[ele.id()] = "none";
+        result[ele.id()] = 'none';
       }
       return result;
     };
 
-    var mapPercentToPosition = function (eles, percent) {
+    var mapPercentToPosition = function(eles,percent){
       result = {};
-      for (var i = 0; i < eles.length; i++) {
+      for( var i = 0; i < eles.length; i++ ){
         ele = eles[i];
-        result[ele.id()] = percent + "%";
+        result[ele.id()] = percent + '%';
       }
       return result;
     };
@@ -2216,202 +2039,56 @@ appUtilities.getActionsToApplyMapColorScheme = function (
 
     // edit style of the current map elements
     // change background color of the current map elements to #ffffff
-    actions.push({
-      name: "changeData",
-      param: { eles: eles, name: "background-color", valueMap: colorIDMap },
-    });
-    actions.push({
-      name: "changeData",
-      param: {
-        eles: eles,
-        name: "background-image",
-        valueMap: backgroundImgMap,
-      },
-    });
-    actions.push({
-      name: "changeData",
-      param: {
-        eles: eles,
-        name: "background-fit",
-        valueMap: mapCovertoBgFit(eles),
-      },
-    });
-    actions.push({
-      name: "changeData",
-      param: {
-        eles: eles,
-        name: "background-position-x",
-        valueMap: mapPercentToPosition(eles, 50),
-      },
-    });
-    actions.push({
-      name: "changeData",
-      param: {
-        eles: eles,
-        name: "background-position-y",
-        valueMap: mapPercentToPosition(eles, 50),
-      },
-    });
-    actions.push({
-      name: "changeData",
-      param: {
-        eles: eles,
-        name: "background-width",
-        valueMap: mapPercentToPosition(eles, 100),
-      },
-    });
-    actions.push({
-      name: "changeData",
-      param: {
-        eles: eles,
-        name: "background-height",
-        valueMap: mapPercentToPosition(eles, 100),
-      },
-    });
+    actions.push({name: "changeData", param: {eles: eles, name: 'background-color', valueMap: colorIDMap}});
+    actions.push({name: "changeData", param: {eles: eles, name: 'background-image', valueMap: backgroundImgMap}});
+    actions.push({name: "changeData", param: {eles: eles, name: 'background-fit', valueMap: mapCovertoBgFit(eles)}});
+    actions.push({name: "changeData", param: {eles: eles, name: 'background-position-x', valueMap: mapPercentToPosition(eles, 50)}});
+    actions.push({name: "changeData", param: {eles: eles, name: 'background-position-y', valueMap: mapPercentToPosition(eles, 50)}});
+    actions.push({name: "changeData", param: {eles: eles, name: 'background-width', valueMap: mapPercentToPosition(eles, 100)}});
+    actions.push({name: "changeData", param: {eles: eles, name: 'background-height', valueMap: mapPercentToPosition(eles, 100)}});
 
     // collapsed nodes' style should also be changed, special edge case
-    actions.push({
-      name: "changeDataDirty",
-      param: {
-        eles: collapsedChildren,
-        name: "background-color",
-        valueMap: collapsedColorIDMap,
-      },
-    });
-    actions.push({
-      name: "changeDataDirty",
-      param: {
-        eles: collapsedChildren,
-        name: "background-image",
-        valueMap: collapsedBackgroundImgMap,
-      },
-    });
-    actions.push({
-      name: "changeDataDirty",
-      param: {
-        eles: collapsedChildren,
-        name: "background-fit",
-        valueMap: mapCovertoBgFit(collapsedChildren),
-      },
-    });
-    actions.push({
-      name: "changeDataDirty",
-      param: {
-        eles: collapsedChildren,
-        name: "background-position-x",
-        valueMap: mapPercentToPosition(collapsedChildren, 50),
-      },
-    });
-    actions.push({
-      name: "changeDataDirty",
-      param: {
-        eles: collapsedChildren,
-        name: "background-position-y",
-        valueMap: mapPercentToPosition(collapsedChildren, 50),
-      },
-    });
-    actions.push({
-      name: "changeDataDirty",
-      param: {
-        eles: collapsedChildren,
-        name: "background-width",
-        valueMap: mapPercentToPosition(collapsedChildren, 100),
-      },
-    });
-    actions.push({
-      name: "changeDataDirty",
-      param: {
-        eles: collapsedChildren,
-        name: "background-height",
-        valueMap: mapPercentToPosition(collapsedChildren, 100),
-      },
-    });
+    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-color', valueMap: collapsedColorIDMap}});
+    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-image', valueMap: collapsedBackgroundImgMap}});
+    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-fit', valueMap: mapCovertoBgFit(collapsedChildren)}});
+    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-position-x', valueMap: mapPercentToPosition(collapsedChildren, 50)}});
+    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-position-y', valueMap: mapPercentToPosition(collapsedChildren, 50)}});
+    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-width', valueMap: mapPercentToPosition(collapsedChildren, 100)}});
+    actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-height', valueMap: mapPercentToPosition(collapsedChildren, 100)}});
     // if background-image isn't brought back into css, it isn't shown as soon as the node is expanded until the end of animation
-    // the reason of for loop is that changeCss function cannot find collapsed nodes if valueMap is an object, but it works if it is a string
-    for (var i = 0; i < collapsedChildren.length; i++) {
-      actions.push({
-        name: "changeCss",
-        param: {
-          eles: collapsedChildren[i],
-          name: "background-image",
-          valueMap: collapsedBackgroundImgMap[collapsedChildren[i].id()],
-        },
-      });
+    // the reason of for loop is that changeCss function cannot find collapsed nodes if valueMap is an object, but it works if it is a string   
+    for(var i = 0; i < collapsedChildren.length; i++){
+      actions.push({name: "changeCss", param: {eles: collapsedChildren[i], name: 'background-image', valueMap: collapsedBackgroundImgMap[collapsedChildren[i].id()]}});
     }
-
-    actions.push({
-      name: "refreshColorSchemeMenu",
-      param: { value: newColorScheme, self: self, scheme_type: scheme_type },
-    });
+    
+    actions.push({name: "refreshColorSchemeMenu", param: {value: newColorScheme, self: self, scheme_type: scheme_type}});
 
     // set to be the default as well
-    for (var nodeClass in mapColorSchemes[newColorScheme]["values"]) {
-      classBgColor = mapColorSchemes[newColorScheme]["values"][nodeClass];
-      classBgImg =
-        scheme_type == "gradient"
-          ? colorCodeToGradientImage[
-              mapColorSchemes[newColorScheme]["values"][nodeClass]
-            ]
-          : colorCodeTo3DImage[
-              mapColorSchemes[newColorScheme]["values"][nodeClass]
-            ];
+    for(var nodeClass in mapColorSchemes[newColorScheme]['values']){
+      classBgColor = mapColorSchemes[newColorScheme]['values'][nodeClass];
+      classBgImg = scheme_type == 'gradient' ? colorCodeToGradientImage[mapColorSchemes[newColorScheme]['values'][nodeClass]] : colorCodeTo3DImage[mapColorSchemes[newColorScheme]['values'][nodeClass]];
       // nodeClass may not be defined in the defaultProperties (for edges, for example)
-      if (nodeClass in chiseInstance.elementUtilities.getDefaultProperties()) {
-        actions.push({
-          name: "setDefaultProperty",
-          param: {
-            class: nodeClass,
-            name: "background-color",
-            value: classBgColor,
-          },
-        });
-        actions.push({
-          name: "setDefaultProperty",
-          param: { class: nodeClass, name: "background-fit", value: "cover" },
-        });
-        actions.push({
-          name: "setDefaultProperty",
-          param: {
-            class: nodeClass,
-            name: "background-position-x",
-            value: "50%",
-          },
-        });
-        actions.push({
-          name: "setDefaultProperty",
-          param: {
-            class: nodeClass,
-            name: "background-position-y",
-            value: "50%",
-          },
-        });
-        actions.push({
-          name: "setDefaultProperty",
-          param: {
-            class: nodeClass,
-            name: "background-image",
-            value: classBgImg,
-          },
-        });
-        actions.push({
-          name: "setDefaultProperty",
-          param: { class: nodeClass, name: "background-width", value: "100%" },
-        });
-        actions.push({
-          name: "setDefaultProperty",
-          param: { class: nodeClass, name: "background-height", value: "100%" },
-        });
+      if(nodeClass in chiseInstance.elementUtilities.getDefaultProperties()){
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-color', value: classBgColor}});
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-fit', value: 'cover'}});
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-position-x', value: '50%'}});
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-position-y', value: '50%'}});
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-image', value: classBgImg}});
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-width', value: '100%'}});
+        actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-height', value:'100%'}});
+
+
       }
     }
   }
-
+  
   return actions;
 };
 
 // the 3 following functions are related to the handling of the dynamic image
 // used during drag and drop of palette nodes
 appUtilities.dragImageMouseMoveHandler = function (e) {
-  $("#drag-image").css({ left: e.pageX, top: e.pageY });
+      $("#drag-image").css({left:e.pageX, top:e.pageY});
 };
 
 // get drag image for the given html value
@@ -2419,28 +2096,20 @@ appUtilities.dragImageMouseMoveHandler = function (e) {
 // replaced by '-' char
 appUtilities.getDragImagePath = function (htmlValue) {
   var imgNameMap = {
-    "SIF-macromolecule": "macromolecule",
-    "SIF-simple-chemical": "simple-chemical",
+    'SIF-macromolecule': 'macromolecule',
+    'SIF-simple-chemical': 'simple-chemical'
   };
 
-  var imgName = imgNameMap[htmlValue] || htmlValue;
-  var imgPath = "app/img/nodes/" + imgName + ".svg";
+  var imgName = imgNameMap[ htmlValue ] || htmlValue;
+  var imgPath = 'app/img/nodes/' + imgName + '.svg';
 
   return imgPath;
-};
+}
 
-appUtilities.addDragImage = function (imgPath, width, height) {
+appUtilities.addDragImage = function (imgPath, width, height){
   // see: http://stackoverflow.com/questions/38838508/make-a-dynamic-image-follow-mouse
-  $(document.body).append(
-    '<img id="drag-image" src="' +
-      imgPath +
-      '" style="position: absolute;' +
-      "width:" +
-      width +
-      "; height:" +
-      height +
-      '; left: -100px; top: -100px;" >'
-  );
+  $(document.body).append('<img id="drag-image" src="'+imgPath+'" style="position: absolute;'+
+                                'width:'+width+'; height:'+height+'; left: -100px; top: -100px;" >');
   $(document).on("mousemove", appUtilities.dragImageMouseMoveHandler);
 };
 
@@ -2450,14 +2119,14 @@ appUtilities.removeDragImage = function () {
 };
 
 appUtilities.getAllStyles = function (_cy, _nodes, _edges) {
+
   // use _cy param if it is set else use the recently active cy instance
   var cy = _cy || appUtilities.getActiveCy();
   var elementUtilities = this.getChiseInstance(cy).elementUtilities;
   var nodes = _nodes || cy.nodes();
   var edges = _edges || cy.edges();
 
-  var collapsedChildren =
-    elementUtilities.getAllCollapsedChildrenRecursively(nodes);
+  var collapsedChildren = elementUtilities.getAllCollapsedChildrenRecursively(nodes);
   var collapsedChildrenNodes = collapsedChildren.filter("node");
   var allNodes = nodes.union(collapsedChildrenNodes);
   var collapsedChildrenEdges = collapsedChildren.filter("edge");
@@ -2468,87 +2137,84 @@ appUtilities.getAllStyles = function (_cy, _nodes, _edges) {
   var imagesUsed = appUtilities.getImagesFromElements(nodes);
 
   var nodePropertiesToXml = {
-    "background-color": "fill",
-    "background-opacity": "background-opacity", // not an sbgnml XML attribute, but used with fill
-    "border-color": "stroke",
-    "border-width": "strokeWidth",
-    "font-size": "fontSize",
-    "font-weight": "fontWeight",
-    "font-style": "fontStyle",
-    "font-family": "fontFamily",
-    color: "fontColor",
-    "background-image": "backgroundImage",
-    "background-fit": "backgroundFit",
-    "background-position-x": "backgroundPosX",
-    "background-position-y": "backgroundPosY",
-    "background-height": "backgroundHeight",
-    "background-width": "backgroundWidth",
-    "background-image-opacity": "backgroundImageOpacity",
-    "background-opacity": "backgroundOpacity",
+    'background-color': 'fill',
+    'background-opacity': 'background-opacity', // not an sbgnml XML attribute, but used with fill
+    'border-color': 'stroke',
+    'border-width': 'strokeWidth',
+    'font-size': 'fontSize',
+    'font-weight': 'fontWeight',
+    'font-style': 'fontStyle',
+    'font-family': 'fontFamily',
+    'color': 'fontColor',
+    'background-image': 'backgroundImage',
+    'background-fit': 'backgroundFit',
+    'background-position-x': 'backgroundPosX',
+    'background-position-y': 'backgroundPosY',
+    'background-height': 'backgroundHeight',
+    'background-width': 'backgroundWidth',
+    'background-image-opacity': 'backgroundImageOpacity',
+    'background-opacity': 'backgroundOpacity',
   };
   var edgePropertiesToXml = {
-    "line-color": "stroke",
-    width: "strokeWidth",
+    'line-color': 'stroke',
+    'width': 'strokeWidth'
   };
   var infoboxPropertiesToXml = {
-    "background-color": "fill",
-    "border-color": "stroke",
-    "border-width": "strokeWidth",
-    "font-size": "fontSize",
-    "font-weight": "fontWeight",
-    "font-style": "fontStyle",
-    "font-family": "fontFamily",
-    "font-color": "fontColor",
-    "shape-name": "shapeName",
+    'background-color': 'fill',
+    'border-color': 'stroke',
+    'border-width': 'strokeWidth',
+    'font-size': 'fontSize',
+    'font-weight': 'fontWeight',
+    'font-style': 'fontStyle',
+    'font-family': 'fontFamily',
+    'font-color': 'fontColor',
+    'shape-name': 'shapeName'
   };
 
-  function getInfoboxStyle(infobox, propName) {
-    return infobox.style && infobox.style[propName];
+  function getInfoboxStyle( infobox, propName ) {
+    return infobox.style && infobox.style[ propName ];
   }
 
-  function getElementData(ele, propName) {
+  function getElementData( ele, propName ) {
     return ele.data(propName);
   }
 
-  function getStyleHash(member, properties, _getFcn) {
+  function getStyleHash (member, properties, _getFcn) {
     var getFcn = _getFcn || getElementData;
     var hash = "";
-    for (var cssProp in properties) {
+    for(var cssProp in properties){
       if (getFcn(member, cssProp)) {
-        if (cssProp === "background-image") {
+        if(cssProp === 'background-image'){
           var imgs = appUtilities.getValidImages(member);
           hash += appUtilities.getValidImageIDs(imgs, imagesUsed);
-        } else hash += getFcn(member, cssProp).toString();
-      } else {
+        }
+        else
+          hash += getFcn(member, cssProp).toString();
+      }
+      else {
         hash += "";
       }
     }
     return hash;
   }
 
-  function getStyleProperties(member, properties, _getFcn) {
+  function getStyleProperties (member, properties, _getFcn) {
     getFcn = _getFcn || getElementData;
     var props = {};
-    for (var cssProp in properties) {
+    for(var cssProp in properties){
       if (getFcn(member, cssProp)) {
         //if it is a color property, replace it with corresponding id
-        if (
-          cssProp == "background-color" ||
-          cssProp == "border-color" ||
-          cssProp == "line-color"
-        ) {
+        if (cssProp == 'background-color' || cssProp == 'border-color' || cssProp == 'line-color') {
           var validColor = appUtilities.getValidColor(member, cssProp, getFcn);
           var colorID = colorUsed[validColor];
           props[properties[cssProp]] = colorID;
         }
         //if it is background image property, replace it with corresponding id
-        else if (cssProp == "background-image") {
+        else if(cssProp == 'background-image'){
           var imgs = appUtilities.getValidImages(member);
-          props[properties[cssProp]] = appUtilities.getValidImageIDs(
-            imgs,
-            imagesUsed
-          );
-        } else {
+          props[properties[cssProp]] = appUtilities.getValidImageIDs(imgs, imagesUsed);
+        }
+        else{
           props[properties[cssProp]] = getFcn(member, cssProp);
         }
       }
@@ -2562,40 +2228,39 @@ appUtilities.getAllStyles = function (_cy, _nodes, _edges) {
       return type;
     }
 
-    var getFcn = type === "infobox" ? getInfoboxStyle : undefined;
+    var getFcn = type === 'infobox' ? getInfoboxStyle : undefined;
 
-    for (var i = 0; i < list.length; i++) {
+    for(var i=0; i<list.length; i++) {
       // a member is either an element or infobox
       var member = list[i];
-      var styleKey =
-        getKeyPrefix(type) + getStyleHash(member, propertiesToXml, getFcn);
-      if (!styles.hasOwnProperty(styleKey)) {
-        // new style encountered, init this new style
+      var styleKey = getKeyPrefix(type) + getStyleHash(member, propertiesToXml, getFcn);
+      if (!styles.hasOwnProperty(styleKey)) { // new style encountered, init this new style
         var properties = getStyleProperties(member, propertiesToXml, getFcn);
         styles[styleKey] = {
           idList: [],
-          properties: properties,
+          properties: properties
         };
       }
       var currentMemberStyle = styles[styleKey];
-      var id = type === "infobox" ? member.id : member.data("id");
+      var id = type === 'infobox' ? member.id : member.data('id');
       // add current node id to this style
       currentMemberStyle.idList.push(id);
 
-      if (type === "node") {
-        var infoboxes = member.data("statesandinfos");
-        populateStyleStructure(infoboxes, infoboxPropertiesToXml, "infobox");
+      if ( type === 'node' ) {
+        var infoboxes = member.data('statesandinfos');
+        populateStyleStructure(infoboxes, infoboxPropertiesToXml, 'infobox')
       }
     }
   }
 
-  populateStyleStructure(allNodes, nodePropertiesToXml, "node");
-  populateStyleStructure(allEdges, edgePropertiesToXml, "edge");
+  populateStyleStructure( allNodes, nodePropertiesToXml, 'node' );
+  populateStyleStructure( allEdges, edgePropertiesToXml, 'edge' );
 
-  var containerBgColor = $(cy.container()).css("background-color");
+  var containerBgColor = $(cy.container()).css('background-color');
   if (containerBgColor == "transparent") {
     containerBgColor = "#ffffff";
-  } else {
+  }
+  else {
     containerBgColor = getXmlValidColor(containerBgColor);
   }
 
@@ -2603,7 +2268,7 @@ appUtilities.getAllStyles = function (_cy, _nodes, _edges) {
     colors: colorUsed,
     images: imagesUsed,
     background: containerBgColor,
-    styles: styles,
+    styles: styles
   };
 };
 
@@ -2611,62 +2276,60 @@ appUtilities.getAllStyles = function (_cy, _nodes, _edges) {
 // can optionnally convert opacity value and return a 8 characer hex color
 function getXmlValidColor(color, opacity) {
   var finalColor = chroma(color).hex();
-  if (typeof opacity === "undefined") {
+  if (typeof opacity === 'undefined') {
     return finalColor;
-  } else {
-    // append opacity as hex
+  }
+  else { // append opacity as hex
     // see http://stackoverflow.com/questions/2877322/convert-opacity-to-hex-in-javascript
     return finalColor + Math.floor(opacity * 255).toString(16);
   }
 }
 
 appUtilities.getValidColor = function (member, colorProperty, _getFcn) {
-  function getElementData(ele, propName) {
+  function getElementData( ele, propName ) {
     return ele.data(propName);
   }
 
   var getFcn = _getFcn || getElementData;
   if (getFcn(member, colorProperty)) {
-    if (colorProperty == "background-color") {
-      // special case, take in count the opacity
-      if (getFcn(member, "background-opacity")) {
-        return getXmlValidColor(
-          getFcn(member, "background-color"),
-          getFcn(member, "background-opacity")
-        );
-      } else {
-        return getXmlValidColor(getFcn(member, "background-color"));
+    if (colorProperty == 'background-color') { // special case, take in count the opacity
+      if (getFcn(member, 'background-opacity')) {
+        return getXmlValidColor(getFcn(member, 'background-color'), getFcn(member, 'background-opacity'));
       }
-    } else {
-      // general case
+      else {
+        return getXmlValidColor(getFcn(member, 'background-color'));
+      }
+    }
+    else { // general case
       return getXmlValidColor(getFcn(member, colorProperty));
     }
-  } else {
-    // element don't have that property
+  }
+  else { // element don't have that property
     return undefined;
   }
 };
 
 appUtilities.getValidImages = function (ele) {
-  if (ele.isNode() && ele.data("background-image")) {
-    return ele.data("background-image").split(" ");
-  } else {
-    // element don't have that property
+  if (ele.isNode() && ele.data('background-image')) {
+    return ele.data('background-image').split(" ");
+  }
+  else { // element don't have that property
     return undefined;
   }
 };
 
 appUtilities.getValidImageIDs = function (imgs, imagesUsed) {
-  if (imgs && imagesUsed && imgs.length > 0) {
+  if(imgs && imagesUsed && imgs.length > 0){
     var ids = [];
-    imgs.forEach(function (img) {
+    imgs.forEach(function(img){
       ids.push(imagesUsed[img]);
     });
     return ids.join(" ");
-  } else {
+  }
+  else{
     return undefined;
   }
-};
+}
 
 /*
   returns: {
@@ -2677,61 +2340,63 @@ appUtilities.getColorsFromElements = function (nodes, edges) {
   var colorHash = {};
   var colorID = 0;
 
-  var nodePropNames = ["background-color", "border-color"];
-  var edgePropNames = ["line-color"];
-  var infoboxPropNames = ["background-color", "border-color"];
-  var infoboxGetFcn = function (infobox, propName) {
-    return infobox && infobox.style && infobox.style[propName];
+  var nodePropNames = ['background-color', 'border-color'];
+  var edgePropNames = ['line-color'];
+  var infoboxPropNames = ['background-color', 'border-color'];
+  var infoboxGetFcn = function( infobox, propName ) {
+    return infobox && infobox.style && infobox.style[ propName ];
   };
 
-  nodes.forEach(function (n) {
-    processMember(n, nodePropNames);
-    var infoboxes = n.data("statesandinfos");
-    infoboxes.forEach(function (i) {
-      processMember(i, infoboxPropNames, infoboxGetFcn);
-    });
-  });
+  nodes.forEach( function( n ) {
+    processMember( n, nodePropNames );
+    var infoboxes = n.data('statesandinfos');
+    infoboxes.forEach( function( i ) {
+      processMember( i, infoboxPropNames, infoboxGetFcn );
+    } );
+  } );
 
-  edges.forEach(function (e) {
-    processMember(e, edgePropNames);
-  });
+  edges.forEach( function( e ) {
+    processMember( e, edgePropNames );
+  } );
 
   function processMember(m, propNames, getFcn) {
-    propNames.forEach(function (propName) {
+    propNames.forEach( function( propName ) {
       var validColor = appUtilities.getValidColor(m, propName, getFcn);
       if (!colorHash[validColor]) {
         colorID++;
-        colorHash[validColor] = "color_" + colorID;
+        colorHash[validColor] = 'color_' + colorID;
       }
-    });
+    } );
   }
 
   return colorHash;
-};
+}
 
 appUtilities.getImagesFromElements = function (nodes) {
   var imageHash = {};
   var imageID = 0;
-  for (var i = 0; i < nodes.length; i++) {
+  for(var i=0; i<nodes.length; i++) {
     var node = nodes[i];
     var validImages = appUtilities.getValidImages(node);
-    if (!validImages) continue;
-    validImages.forEach(function (img) {
+    if(!validImages)
+      continue;
+    validImages.forEach(function(img){
       if (!imageHash[img]) {
         imageID++;
-        imageHash[img] = "image_" + imageID;
+        imageHash[img] = 'image_' + imageID;
       }
     });
   }
 
   return imageHash;
-};
+}
 
 /**
  * updates current general properties and refreshes map
  * @mapProperties : a set of properties as object
  */
-appUtilities.setMapProperties = function (mapProperties, _chiseInstance) {
+appUtilities.setMapProperties = function(mapProperties, _chiseInstance) {
+
   // use _chiseInstance param if it is set else use the recently active chise instance
   var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
 
@@ -2739,104 +2404,82 @@ appUtilities.setMapProperties = function (mapProperties, _chiseInstance) {
   var cy = chiseInstance.getCy();
 
   // get current general properties for cy
-  var currentGeneralProperties = appUtilities.getScratch(
-    cy,
-    "currentGeneralProperties"
-  );
+  var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
 
-  for (property in mapProperties) {
+  for (property in mapProperties){
     var value = mapProperties[property];
     // convert strings to correct appropriate types
-    if (value == "true" || value == "false")
-      // if boolean
-      currentGeneralProperties[property] = value == "true";
-    else if (Number(value))
-      // if number
+    if (value == 'true' || value == 'false')  // if boolean
+      currentGeneralProperties[property] = (value == 'true');
+    else if (Number(value))  // if number
       currentGeneralProperties[property] = Number(value);
-    // if string
-    else currentGeneralProperties[property] = value;
-  }
-  // refresh map with new settings
-  chiseInstance.setShowComplexName(currentGeneralProperties.showComplexName);
-  chiseInstance.refreshPaddings(); // Refresh/recalculate paddings
-
-  cy.edges().css("arrow-scale", currentGeneralProperties.arrowScale);
-
-  //setMapProperties function is called in sbgnvizLoadFileEnd sbgnvizLoadSampleEnd
-  //event handler
-
-  if (
-    "highlightColor" in mapProperties &&
-    "extraHighlightThickness" in mapProperties
-  ) {
-    var viewUtilities = cy.viewUtilities("get");
-    var highlightColor = currentGeneralProperties.highlightColor[0];
-    var extraHighlightThickness =
-      currentGeneralProperties.extraHighlightThickness;
-
-    viewUtilities.changeHighlightStyle(
-      0,
-      {
-        "border-width": function (ele) {
-          return Math.max(
-            parseFloat(ele.data("border-width")) + extraHighlightThickness,
-            3
-          );
-        },
-        "border-color": highlightColor,
-      },
-      {
-        width: function (ele) {
-          return Math.max(
-            parseFloat(ele.data("width")) + extraHighlightThickness,
-            3
-          );
-        },
-        "line-color": highlightColor,
-        "source-arrow-color": highlightColor,
-        "target-arrow-color": highlightColor,
-      }
-    );
-  }
+    else  // if string
+      currentGeneralProperties[property] = value;
+  }
+    // refresh map with new settings
+    chiseInstance.setShowComplexName(currentGeneralProperties.showComplexName);
+    chiseInstance.refreshPaddings(); // Refresh/recalculate paddings
+
+    cy.edges().css('arrow-scale', currentGeneralProperties.arrowScale);
+
+    //setMapProperties function is called in sbgnvizLoadFileEnd sbgnvizLoadSampleEnd 
+    //event handler
+    
+    if ('highlightColor' in mapProperties && 'extraHighlightThickness' in mapProperties) {
+      var viewUtilities = cy.viewUtilities('get');
+      var highlightColor = currentGeneralProperties.highlightColor[0];
+      var extraHighlightThickness = currentGeneralProperties.extraHighlightThickness;
+
+      viewUtilities.changeHighlightStyle(0, {
+        'border-width': function (ele) {
+          return Math.max(parseFloat(ele.data('border-width')) + extraHighlightThickness, 3);
+        }, 'border-color': highlightColor
+      }, {
+        'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + extraHighlightThickness, 3); },
+        'line-color': highlightColor,
+        'source-arrow-color': highlightColor,
+        'target-arrow-color': highlightColor
+    });
+    }
+    
 
-  if (currentGeneralProperties.enablePorts) {
-    chiseInstance.enablePorts();
-  } else {
-    chiseInstance.disablePorts();
-  }
+    if (currentGeneralProperties.enablePorts) {
+      chiseInstance.enablePorts();
+    }
+    else {
+      chiseInstance.disablePorts();
+    }
 
-  var topologyGrouping = chiseInstance.sifTopologyGrouping;
-  if (currentGeneralProperties.enableSIFTopologyGrouping) {
-    topologyGrouping.apply();
-  } else {
-    topologyGrouping.unapply();
-  }
+    var topologyGrouping = chiseInstance.sifTopologyGrouping;
+    if (currentGeneralProperties.enableSIFTopologyGrouping) {
+      topologyGrouping.apply();
+    }
+    else {
+      topologyGrouping.unapply();
+    }
 
-  if (currentGeneralProperties.allowCompoundNodeResize) {
-    chiseInstance.considerCompoundSizes();
-  } else {
-    chiseInstance.omitCompoundSizes();
-  }
+    if (currentGeneralProperties.allowCompoundNodeResize) {
+      chiseInstance.considerCompoundSizes();
+    }
+    else {
+      chiseInstance.omitCompoundSizes();
+    }
 
-  // reset 'currentGeneralProperties' on scratchpad of cy
-  appUtilities.setScratch(
-    cy,
-    "currentGeneralProperties",
-    currentGeneralProperties
-  );
+    // reset 'currentGeneralProperties' on scratchpad of cy
+    appUtilities.setScratch(cy, 'currentGeneralProperties', currentGeneralProperties);
 
-  // use the panel id as the network key
-  var networkKey = cy.container().id;
+    // use the panel id as the network key
+    var networkKey = cy.container().id;
 
-  // update the network tab description as the map name is just changed
-  appUtilities.updateNetworkTabDesc(networkKey);
+    // update the network tab description as the map name is just changed
+    appUtilities.updateNetworkTabDesc(networkKey);
 };
 
 // filter the map properties of given object
-appUtilities.filterMapProperties = function (obj) {
+appUtilities.filterMapProperties = function(obj) {
   var mapProps = {};
 
-  for (var prop in obj) {
+  for ( var prop in obj ) {
     if (chise.validMapProperties[prop]) {
       mapProps[prop] = obj[prop];
     }
@@ -2845,7 +2488,8 @@ appUtilities.filterMapProperties = function (obj) {
   return mapProps;
 };
 
-appUtilities.launchWithModelFile = function () {
+appUtilities.launchWithModelFile = function() {
+
   var paramObj = getQueryParameters();
   var url_path = paramObj.url;
   var uri_path = paramObj.uri;
@@ -2855,249 +2499,165 @@ appUtilities.launchWithModelFile = function () {
 
   // attach url params to the object to be used on sbgnvizLoadFileEnd event
   // it will be cleared immediately after usage
-  if (url_path || uri_path) {
-    appUtilities.setScratch(cyInstance, "urlParams", paramObj);
-  } else {
-    appUtilities.setScratch(cyInstance, "urlParams", undefined);
+  if(url_path || uri_path) {
+    appUtilities.setScratch(cyInstance, 'urlParams', paramObj);
+  }
+  else {
+    appUtilities.setScratch(cyInstance, 'urlParams', undefined);
   }
 
   var promptInvalidURIWarning = this.promptInvalidURIWarning;
   var promptInvalidURLWarning = this.promptInvalidURLWarning;
 
-  if (url_path != undefined)
+  if(url_path != undefined)
     loadFromURL(url_path, chiseInstance, promptInvalidURLWarning);
-  else if (uri_path != undefined)
+  else if(uri_path != undefined)
     loadFromURI(uri_path, chiseInstance, promptInvalidURIWarning);
-  else tutorial.introduction(true);
+  else
+    tutorial.introduction(true);
+
+  function loadFromURL(filepath, chiseInstance, promptInvalidURLWarning){
 
-  function loadFromURL(filepath, chiseInstance, promptInvalidURLWarning) {
-    chiseInstance.startSpinner("paths-byURL-spinner");
+    chiseInstance.startSpinner('paths-byURL-spinner')
 
     var loadCallbackSBGNMLValidity = function (text) {
       $.ajax({
-        type: "post",
+        type: 'post',
         url: "/utilities/validateSBGNML",
-        data: { sbgnml: text },
-        success: function (data) {
-          if (data.length == 0) {
+        data: {sbgnml: text},
+        success: function(data){
+          if(data.length == 0) {
             console.log("Xsd validation OK");
-          } else {
+          }
+          else {
             console.error("Xsd validation failed. Errors:", data);
           }
         },
-        error: function (req, status, err) {
+        error: function(req, status, err) {
           console.error("Error during file validation", status, err);
-        },
+        }
       });
-    };
+    }
 
-    var loadCallbackInvalidityWarning = function () {
+    var loadCallbackInvalidityWarning  = function () {
       promptInvalidURLWarning.render();
-    };
+    }
 
-    if (filepath == undefined) {
+    if(filepath == undefined){
       loadCallbackInvalidityWarning();
       return;
     }
 
-    var filename = filepath.split("/");
-    if (filename.length > 0) filename = filename[filename.length - 1];
-    else filename = "remote";
+    var filename = filepath.split('/');
+    if(filename.length > 0)
+      filename = filename[filename.length - 1];
+    else
+      filename = 'remote';
 
-    var fileExtension = filename.split(".");
-    if (fileExtension.length > 0 && filename.indexOf(".") > -1)
+    var fileExtension = filename.split('.');
+    if(fileExtension.length > 0 && filename.indexOf('.') > -1)
       fileExtension = fileExtension[fileExtension.length - 1];
-    else fileExtension = "txt";
+    else
+      fileExtension = 'txt';
 
     $.ajax({
-      type: "get",
+      type: 'get',
       url: "/utilities/testURL",
-      data: { url: filepath },
-      success: async function (data) {
+      data: {url: filepath},
+      success: async function(data){
         // here we can get 404 as well, for example, so there are still error cases to handle
 
-        var dataSize = data.response.body.length;
-        if (
-          dataSize > 250000 &&
-          (fileExtension === "sbml" || fileExtension === "xml")
-        ) {
-          chiseInstance.showSpinnerText("paths-byURL-spinner");
+        var dataSize = data.response.body.length
+        if(dataSize>250000 && (fileExtension === "sbml" || fileExtension === "xml")  )
+        {
+          chiseInstance.showSpinnerText('paths-byURL-spinner')
         }
-
-        if (
-          !data.error &&
-          data.response.statusCode == 200 &&
-          data.response.body
-        ) {
-          $(document).trigger("sbgnvizLoadFromURL", [filename, cyInstance]);
+        
+        if (!data.error && data.response.statusCode == 200 && data.response.body) {
+          $(document).trigger('sbgnvizLoadFromURL', [filename, cyInstance]);
           var fileToLoad = new File([data.response.body], filename, {
-            type: "text/" + fileExtension,
-            lastModified: Date.now(),
+            type: 'text/' + fileExtension,
+            lastModified: Date.now()
           });
 
-          if (
-            fileExtension === "xml" ||
-            fileExtension === "xml#" ||
-            fileExtension === "sbml" ||
-            fileExtension === "sbml#"
-          ) {
+          if (fileExtension === "xml" || fileExtension === "xml#" 
+              || fileExtension === "sbml" || fileExtension === "sbml#") {
+
+            await chiseInstance.loadSbml(fileToLoad,  success = async function(data){
+              var cy = appUtilities.getActiveCy();
+              if (cy.elements().length !== 0) {
+                await promptConfirmationView.render(async function () {
+                 await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
+                  chiseInstance.endSpinner('paths-byURL-spinner')
+                });
+              }
+              else {
+                await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
+                chiseInstance.endSpinner('paths-byURL-spinner')
+
+              }
+            });
           }
-          if (fileExtension === "gpml") {
-            chiseInstance.loadGpml(
-              file,
-              (success = async function (data) {
-                if (cyInstance.elements().length !== 0) {
-                  promptConfirmationView.render(function () {
-                    chiseInstance.loadSBGNMLText(
-                      data,
-                      false,
-                      filename,
-                      cy,
-                      paramObj
-                    );
-                    chiseInstance.endSpinner("paths-byURL-spinner");
-                  });
-
-                  chiseInstance.endSpinner("paths-byURL-spinner");
-                } else {
-                  await chiseInstance.loadSBGNMLText(
-                    data.message,
-                    false,
-                    filename,
-                    cy,
-                    paramObj
-                  );
-                  chiseInstance.endSpinner("paths-byURL-spinner");
-                }
-              })
-            );
-          } else if (fileExtension === "xml" || fileExtension === "sbml") {
-            // CD file
-            if (xmlObject.children.item(0).getAttribute("xmlns:celldesigner")) {
-              chiseInstance.loadCellDesigner(
-                file,
-                (success = async function (data) {
-                  if (cyInstance.elements().length !== 0) {
-                    promptConfirmationView.render(function () {
-                      chiseInstance.loadSBGNMLText(
-                        data,
-                        false,
-                        filename,
-                        cy,
-                        paramObj
-                      );
-                      chiseInstance.endSpinner("paths-byURL-spinner");
-                    });
-
-                    chiseInstance.endSpinner("paths-byURL-spinner");
-                  } else {
-                    await chiseInstance.loadSBGNMLText(
-                      data,
-                      false,
-                      filename,
-                      cy,
-                      paramObj
-                    );
-                    chiseInstance.endSpinner("paths-byURL-spinner");
-                  }
-                })
-              );
-            } else {
-              // sbml file
-              await chiseInstance.loadSbml(
-                file,
-                (success = async function (data) {
-                  if (cyInstance.elements().length !== 0) {
-                    await promptConfirmationView.render(async function () {
-                      await chiseInstance.loadSBGNMLText(
-                        data.message,
-                        false,
-                        filename,
-                        cy,
-                        paramObj
-                      );
-                    });
-                    chiseInstance.endSpinner("paths-byURL-spinner");
-                  } else {
-                    await chiseInstance.loadSBGNMLText(
-                      data.message,
-                      false,
-                      filename,
-                      cy,
-                      paramObj
-                    );
-                    chiseInstance.endSpinner("paths-byURL-spinner");
-                  }
-                })
-              );
-            }
-          } else {
-            chiseInstance.loadNwtFile(
-              fileToLoad,
-              loadCallbackSBGNMLValidity,
-              loadCallbackInvalidityWarning,
-              paramObj
-            );
-            chiseInstance.endSpinner("paths-byURL-spinner");
+          else {
+            chiseInstance.loadNwtFile(fileToLoad, loadCallbackSBGNMLValidity, loadCallbackInvalidityWarning, paramObj);
+            chiseInstance.endSpinner('paths-byURL-spinner')
           }
-        } else {
+        }
+        else {
           loadCallbackInvalidityWarning();
-          chiseInstance.endSpinner("paths-byURL-spinner");
+          chiseInstance.endSpinner('paths-byURL-spinner')
+
         }
       },
-      error: function (xhr, options, err) {
+      error: function(xhr, options, err){
         loadCallbackInvalidityWarning();
-        chiseInstance.endSpinner("paths-byURL-spinner");
-      },
+        chiseInstance.endSpinner('paths-byURL-spinner')
+
+      }
     });
+
   }
 
-  function loadFromURI(uri, chiseInstance, promptInvalidURIWarning) {
-    var queryURL =
-      "http://www.pathwaycommons.org/pc2/get?uri=" + uri + "&format=SBGN";
+  function loadFromURI(uri, chiseInstance, promptInvalidURIWarning){
+
+    var queryURL = "http://www.pathwaycommons.org/pc2/get?uri="
+          + uri + "&format=SBGN";
 
-    var filename = uri + ".nwt";
+    var filename = uri + '.nwt';
     var cyInstance = chiseInstance.getCy();
 
-    chiseInstance.startSpinner("paths-byURI-spinner");
+    chiseInstance.startSpinner('paths-byURI-spinner');
 
-    var currentLayoutProperties = appUtilities.getScratch(
-      cyInstance,
-      "currentLayoutProperties"
-    );
+    var currentLayoutProperties = appUtilities.getScratch(cyInstance, 'currentLayoutProperties');
 
     $.ajax({
-      type: "get",
+      type: 'get',
       url: "/utilities/testURL",
-      data: { url: queryURL },
-      success: function (data) {
+      data: {url: queryURL},
+      success: function(data){
         // here we can get 404 as well, for example, so there are still error cases to handle
         if (data.response.statusCode == 200 && data.response.body) {
           var xml = $.parseXML(data.response.body);
-          $(document).trigger("sbgnvizLoadFile", [filename, cyInstance]);
-          $(document).trigger("sbgnvizLoadFromURI", [filename, cyInstance]);
-          chiseInstance.updateGraph(
-            chiseInstance.convertSbgnmlToJson(xml, paramObj),
-            undefined,
-            currentLayoutProperties
-          );
-          chiseInstance.endSpinner("paths-byURI-spinner");
-          $(document).trigger("sbgnvizLoadFileEnd", [filename, cyInstance]);
-        } else {
-          chiseInstance.endSpinner("paths-byURI-spinner");
+          $(document).trigger('sbgnvizLoadFile', [filename, cyInstance]);
+          $(document).trigger('sbgnvizLoadFromURI', [filename, cyInstance]);          
+          chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml, paramObj), undefined, currentLayoutProperties);
+          chiseInstance.endSpinner('paths-byURI-spinner');
+          $(document).trigger('sbgnvizLoadFileEnd', [filename,  cyInstance]);
+        }
+        else {
+          chiseInstance.endSpinner('paths-byURI-spinner');
           promptInvalidURIWarning.render();
         }
       },
-      error: function (xhr, options, err) {
-        chiseInstance.endSpinner("paths-byURI-spinner");
-        promptInvalidURIWarning.render();
-      },
+      error: function(xhr, options, err){
+        chiseInstance.endSpinner('paths-byURI-spinner');
+        promptInvalidURIWarning.render();      }
     });
   }
 
   // returns an object that contains name-value pairs of query parameters
   function getQueryParameters(url) {
-    if (!url) {
+    if (!url){
       url = window.location.href;
     }
 
@@ -3105,25 +2665,26 @@ appUtilities.launchWithModelFile = function () {
     // Parse the query sting into an object please see:
     // https://stevenbenner.com/2010/03/javascript-regex-trick-parse-a-query-string-into-an-object/
     url.replace(
-      new RegExp("([^?=&]+)(=([^&#]*))?", "g"),
-      function ($0, name, $2, value) {
-        if (value !== undefined) {
-          var lowerCaseName = name.toLowerCase();
-          // for 'uri' and 'url' parameters provide case insensitivity by converting to lower case
-          if (lowerCaseName === "url" || lowerCaseName === "uri") {
-            name = lowerCaseName;
+        new RegExp("([^?=&]+)(=([^&#]*))?", "g"),
+        function($0, name, $2, value) {
+          if (value !== undefined) {
+            var lowerCaseName = name.toLowerCase();
+            // for 'uri' and 'url' parameters provide case insensitivity by converting to lower case
+            if (lowerCaseName === 'url' || lowerCaseName === 'uri') {
+              name = lowerCaseName;
+            }
+            queryParams[name] = value;
           }
-          queryParams[name] = value;
         }
-      }
     );
 
     return queryParams;
   }
-};
+}
 
-appUtilities.navigateToOtherEnd = function (edge, mouse_rend, mouse_normal) {
-  if (!edge.isEdge()) {
+appUtilities.navigateToOtherEnd = function(edge, mouse_rend, mouse_normal) {
+
+  if(!edge.isEdge()){
     return;
   }
 
@@ -3133,54 +2694,41 @@ appUtilities.navigateToOtherEnd = function (edge, mouse_rend, mouse_normal) {
   var source_node = edge.source();
   var target_node = edge.target();
 
-  var source_position = { x: edge_pts[0], y: edge_pts[1] };
-  var target_position = {
-    x: edge_pts[edge_pts.length - 2],
-    y: edge_pts[edge_pts.length - 1],
-  };
+  var source_position = {x: edge_pts[0], y: edge_pts[1]};
+  var target_position = {x: edge_pts[edge_pts.length-2], y: edge_pts[edge_pts.length-1]};
 
-  var source_loc =
-    Math.pow(mouse_normal.x - source_position.x, 2) +
-    Math.pow(mouse_normal.y - source_position.y, 2);
-  var target_loc =
-    Math.pow(mouse_normal.x - target_position.x, 2) +
-    Math.pow(mouse_normal.y - target_position.y, 2);
+  var source_loc = Math.pow((mouse_normal.x - source_position.x), 2) + Math.pow((mouse_normal.y - source_position.y), 2);
+  var target_loc = Math.pow((mouse_normal.x - target_position.x), 2) + Math.pow((mouse_normal.y - target_position.y), 2);
 
   // Animation direction
   var source_to_target = source_loc < target_loc;
 
   // Change direction of points according to animation direction
-  if (!source_to_target) {
+  if(!source_to_target){
     var new_edge_pts = [];
-    for (var i = edge_pts.length - 1; i > 0; i = i - 2) {
-      new_edge_pts.push(edge_pts[i - 1], edge_pts[i]);
+    for(var i = edge_pts.length-1; i > 0; i=i-2){
+      new_edge_pts.push(edge_pts[i-1], edge_pts[i]);
     }
     edge_pts = new_edge_pts;
   }
 
   var starting_point = 0;
   var minimum;
-  for (var i = 0; i < edge_pts.length - 3; i = i + 2) {
-    var a_b =
-      Math.pow(mouse_normal.x - edge_pts[i], 2) +
-      Math.pow(mouse_normal.y - edge_pts[i + 1], 2);
+  for(var i = 0; i < edge_pts.length-3; i=i+2){
+    var a_b = Math.pow((mouse_normal.x-edge_pts[i]), 2) + Math.pow((mouse_normal.y-edge_pts[i+1]), 2);
     a_b = Math.sqrt(a_b);
 
-    var b_c =
-      Math.pow(mouse_normal.x - edge_pts[i + 2], 2) +
-      Math.pow(mouse_normal.y - edge_pts[i + 3], 2);
+    var b_c = Math.pow((mouse_normal.x-edge_pts[i+2]), 2) + Math.pow((mouse_normal.y-edge_pts[i+3]), 2);
     b_c = Math.sqrt(b_c);
 
-    var a_c =
-      Math.pow(edge_pts[i + 2] - edge_pts[i], 2) +
-      Math.pow(edge_pts[i + 3] - edge_pts[i + 1], 2);
+    var a_c = Math.pow((edge_pts[i+2]-edge_pts[i]), 2) + Math.pow((edge_pts[i+3]-edge_pts[i+1]), 2);
     a_c = Math.sqrt(a_c);
 
     var difference = Math.abs(a_c - a_b - b_c);
 
-    if (minimum === undefined || minimum > difference) {
+    if(minimum === undefined || minimum > difference){
       minimum = difference;
-      starting_point = i + 2;
+      starting_point = i+2;
     }
   }
 
@@ -3188,26 +2736,29 @@ appUtilities.navigateToOtherEnd = function (edge, mouse_rend, mouse_normal) {
   var s_normal = start_node.position();
   var s_rendered = start_node.renderedPosition();
   var zoom_level = cy.zoom();
-  var finished = (edge_pts.length - starting_point - 1) / 2;
+  var finished = (edge_pts.length-starting_point-1)/2;
   start_node.select();
   // Animate for each bend point
-  for (var i = starting_point; i < edge_pts.length - 1; i = i + 2) {
+  for(var i = starting_point; i < edge_pts.length-1; i=i+2){
     // Convert normal position into rendered position
     var rend_x = (edge_pts[i] - s_normal.x) * zoom_level + s_rendered.x;
-    var rend_y = (edge_pts[i + 1] - s_normal.y) * zoom_level + s_rendered.y;
+    var rend_y = (edge_pts[i+1] - s_normal.y) * zoom_level + s_rendered.y;
 
     cy.animate({
-      duration: 1400,
-      panBy: { x: mouse_rend.x - rend_x, y: mouse_rend.y - rend_y },
-      easing: "ease",
-      complete: function () {
-        finished--;
-        if (finished <= 0)
-          (source_to_target ? target_node : source_node).select();
-      },
+     duration: 1400,
+     panBy: {x: (mouse_rend.x-rend_x), y: (mouse_rend.y-rend_y)},
+     easing: 'ease',
+     complete: function(){
+      finished--;
+      if(finished <= 0)
+        (source_to_target ? target_node : source_node).select();
+     }
     });
   }
-};
+
+
+
+}
 
 //Info-box drag handlers
 appUtilities.relocationDragHandler;
@@ -3216,15 +2767,11 @@ appUtilities.RelocationHandler;
 var relocatedNode;
 
 //Enables info-box relocation if a node is selected
-appUtilities.relocateInfoBoxes = function (node) {
+appUtilities.relocateInfoBoxes = function(node){
   var cy = this.getActiveCy();
   this.disableInfoBoxRelocation();
   //Abort if node has no info-boxes or selected ele is not a node
-  if (
-    node.data("auxunitlayouts") === undefined ||
-    node.data("statesandinfos").length === 0 ||
-    !node.isNode()
-  ) {
+  if (node.data("auxunitlayouts") === undefined || node.data("statesandinfos").length === 0 || !node.isNode()) {
     this.disableInfoBoxRelocation();
     return;
   }
@@ -3233,29 +2780,21 @@ appUtilities.relocateInfoBoxes = function (node) {
   relocatedNode = node;
 
   //Call undo-redo relocate function
-  cy.undoRedo().do("relocateInfoBoxes", { node });
-};
+  cy.undoRedo().do("relocateInfoBoxes", {node});
+
+}
 
 //Checks whether a info-box is selected in a given mouse position
-appUtilities.checkMouseContainsInfoBox = function (
-  cy,
-  unit,
-  mouse_down_x,
-  mouse_down_y
-) {
+appUtilities.checkMouseContainsInfoBox = function(cy, unit, mouse_down_x, mouse_down_y){
   var box = unit.bbox;
   var instance = this.getActiveSbgnvizInstance();
   var coords = instance.classes.AuxiliaryUnit.getAbsoluteCoord(unit, cy);
-  return (
-    mouse_down_x >= coords.x - box.w / 2 &&
-    mouse_down_x <= coords.x + box.w / 2 &&
-    mouse_down_y >= coords.y - box.h / 2 &&
-    mouse_down_y <= coords.y + box.h / 2
-  );
-};
+  return ((mouse_down_x >= coords.x - box.w / 2) && (mouse_down_x <= coords.x + box.w / 2))
+    && ( (mouse_down_y >= coords.y - box.h / 2) && (mouse_down_y <= coords.y + box.h / 2));
+}
 
 //Enables info-box appUtilities.RelocationHandler
-appUtilities.enableInfoBoxRelocation = function (node) {
+appUtilities.enableInfoBoxRelocation = function(node){
   var cy = this.getActiveCy();
   //Disable box movements
   var oldColor = node.data("border-color");
@@ -3264,15 +2803,13 @@ appUtilities.enableInfoBoxRelocation = function (node) {
   node.data("border-width", Math.max(1, oldWidth));
   var selectedBox;
   var anchorSide;
-  $(document).on(
-    "mousedown",
-    (appUtilities.RelocationHandler = function (event) {
+  $(document).on('mousedown', appUtilities.RelocationHandler = function(event){
       //Check whether event contained by infobox of a node
       //Lock the node so that it won't change position when
       //Info boxes are dragged
       cy.autounselectify(true);
       cy.autolock(true);
-      var statesandinfos = node.data("statesandinfos");
+      var statesandinfos = node.data('statesandinfos');
 
       //Check if event is on cy canvas
       var containerPos = $(cy.container()).position();
@@ -3280,25 +2817,12 @@ appUtilities.enableInfoBoxRelocation = function (node) {
       var containerHeight = $(cy.container()).height();
 
       //Get mouse positions
-      var mouse_down_x =
-        (event.pageX - containerPos.left - cy.pan().x) / cy.zoom();
-      var mouse_down_y =
-        (event.pageY - containerPos.top - cy.pan().y) / cy.zoom();
+      var mouse_down_x = (event.pageX - containerPos.left - cy.pan().x)/cy.zoom();
+      var mouse_down_y = (event.pageY - containerPos.top - cy.pan().y)/cy.zoom();
       var instance = appUtilities.getActiveSbgnvizInstance();
       var oldAnchorSide; //Hold old anchor side to modify units
-      for (
-        var i = 0;
-        i < statesandinfos.length && selectedBox === undefined;
-        i++
-      ) {
-        if (
-          appUtilities.checkMouseContainsInfoBox(
-            cy,
-            statesandinfos[i],
-            mouse_down_x,
-            mouse_down_y
-          )
-        ) {
+      for (var i = 0; i < statesandinfos.length && selectedBox === undefined; i++) {
+        if(appUtilities.checkMouseContainsInfoBox(cy, statesandinfos[i], mouse_down_x, mouse_down_y)) {
           selectedBox = statesandinfos[i];
           oldAnchorSide = selectedBox.anchorSide;
           break;
@@ -3306,8 +2830,7 @@ appUtilities.enableInfoBoxRelocation = function (node) {
       }
 
       //If no info-box found abort
-      if (selectedBox === undefined || event.which !== 1) {
-        //If event is not a right left click disable relocation
+      if (selectedBox === undefined || event.which !== 1) { //If event is not a right left click disable relocation
         appUtilities.disableInfoBoxRelocation();
         node.data("border-color", oldColor);
         node.data("border-width", oldWidth);
@@ -3323,262 +2846,174 @@ appUtilities.enableInfoBoxRelocation = function (node) {
       var parentWidth = node.width();
       var parentHeight = node.height();
       var padding = node.padding();
-      var parentX1 = position.x - parentWidth / 2 - padding;
-      var parentX2 = position.x + parentWidth / 2 + padding;
-      var parentY1 = position.y - parentHeight / 2 - padding;
-      var parentY2 = position.y + parentHeight / 2 + padding;
-      cy.on(
-        "mousemove",
-        (appUtilities.relocationDragHandler = function (event) {
-          if (selectedBox === undefined) {
-            //If selected box is undefined somehow abort
-            appUtilities.disableInfoBoxRelocation();
-            node.data("border-color", oldColor);
-            node.data("border-width", oldWidth);
-            relocatedNode = undefined;
-            return;
+      var parentX1 = position.x - parentWidth/2 - padding;
+      var parentX2 = position.x + parentWidth/2 + padding;
+      var parentY1 = position.y - parentHeight/2 - padding;
+      var parentY2 = position.y + parentHeight/2 + padding;
+      cy.on("mousemove", appUtilities.relocationDragHandler = function(event){
+        if (selectedBox === undefined) { //If selected box is undefined somehow abort
+          appUtilities.disableInfoBoxRelocation();
+          node.data("border-color", oldColor);
+          node.data("border-width", oldWidth);
+          relocatedNode = undefined;
+          return;
+        }
+        //Clear visual cues during relocation
+        cy.expandCollapse('get').clearVisualCue(node);
+        var drag_x = event.position.x;
+        var drag_y = event.position.y;
+        var anchorSide = selectedBox.anchorSide;
+       
+
+        //If anchor side is top or bottom only move in x direction
+        if (anchorSide === "top" || anchorSide === "bottom") {
+         
+         
+          //Get absolute position
+          var newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, drag_x, selectedBox.bbox.y, cy);        
+          if (newRelativeCoords.x < 0) {           
+            selectedBox.bbox.x = 0;
+          }
+          else if (newRelativeCoords.x > 100) { //Box cannot go futher than parentBox - margin on right side            
+            selectedBox.bbox.x = 100;
+          }
+          else { //Else it is already relative
+            selectedBox.bbox.x = newRelativeCoords.x;
           }
-          //Clear visual cues during relocation
-          cy.expandCollapse("get").clearVisualCue(node);
-          var drag_x = event.position.x;
-          var drag_y = event.position.y;
-          var anchorSide = selectedBox.anchorSide;
-
-          //If anchor side is top or bottom only move in x direction
-          if (anchorSide === "top" || anchorSide === "bottom") {
-            //Get absolute position
-            var newRelativeCoords =
-              instance.classes.AuxiliaryUnit.convertToRelativeCoord(
-                selectedBox,
-                drag_x,
-                selectedBox.bbox.y,
-                cy
-              );
-            if (newRelativeCoords.x < 0) {
-              selectedBox.bbox.x = 0;
-            } else if (newRelativeCoords.x > 100) {
-              //Box cannot go futher than parentBox - margin on right side
-              selectedBox.bbox.x = 100;
-            } else {
-              //Else it is already relative
+          //If box is at margin points allow it to change anchor side
+          //If it on left it can pass left anchor side
+          var absoluteCoords = instance.classes.AuxiliaryUnit.convertToAbsoluteCoord(selectedBox, selectedBox.bbox.x, selectedBox.bbox.y, cy); //Get current absolute coords
+          if (Number(absoluteCoords.x.toFixed(2))=== Number(parentX1.toFixed(2))) { //If it is on the left margin allow it to change anchor sides
+            //If it is in the top and mouse moves bottom it can go left anchor
+            if (last_mouse_y < drag_y  && anchorSide === "top") {
+              selectedBox.anchorSide = "left"; //Set new anchor side
+              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX1),
+                (parentY1), cy);
               selectedBox.bbox.x = newRelativeCoords.x;
+              selectedBox.bbox.y = newRelativeCoords.y;
             }
-            //If box is at margin points allow it to change anchor side
-            //If it on left it can pass left anchor side
-            var absoluteCoords =
-              instance.classes.AuxiliaryUnit.convertToAbsoluteCoord(
-                selectedBox,
-                selectedBox.bbox.x,
-                selectedBox.bbox.y,
-                cy
-              ); //Get current absolute coords
-            if (
-              Number(absoluteCoords.x.toFixed(2)) ===
-              Number(parentX1.toFixed(2))
-            ) {
-              //If it is on the left margin allow it to change anchor sides
-              //If it is in the top and mouse moves bottom it can go left anchor
-              if (last_mouse_y < drag_y && anchorSide === "top") {
-                selectedBox.anchorSide = "left"; //Set new anchor side
-                newRelativeCoords =
-                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
-                    selectedBox,
-                    parentX1,
-                    parentY1,
-                    cy
-                  );
-                selectedBox.bbox.x = newRelativeCoords.x;
-                selectedBox.bbox.y = newRelativeCoords.y;
-              } else if (last_mouse_y > drag_y && anchorSide === "bottom") {
-                //If it is in the bottom and mouse moves up it can go left anchor side
-                selectedBox.anchorSide = "left"; //Set new anchor side
-                newRelativeCoords =
-                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
-                    selectedBox,
-                    parentX1,
-                    parentY2,
-                    cy
-                  );
-                selectedBox.bbox.x = newRelativeCoords.x;
-                selectedBox.bbox.y = newRelativeCoords.y;
-              }
+            else if (last_mouse_y > drag_y && anchorSide === "bottom") { //If it is in the bottom and mouse moves up it can go left anchor side
+              selectedBox.anchorSide = "left"; //Set new anchor side
+              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX1),
+                (parentY2), cy);
+              selectedBox.bbox.x = newRelativeCoords.x;
+              selectedBox.bbox.y = newRelativeCoords.y;
             }
-            //If it on right it can pass right anchor side
-            else if (
-              Number(absoluteCoords.x.toFixed(2)) ===
-              Number(parentX2.toFixed(2))
-            ) {
-              if (last_mouse_y < drag_y && anchorSide === "top") {
-                selectedBox.anchorSide = "right"; //Set new anchor side
-                newRelativeCoords =
-                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
-                    selectedBox,
-                    parentX2,
-                    parentY1,
-                    cy
-                  );
-                selectedBox.bbox.x = newRelativeCoords.x;
-                selectedBox.bbox.y = newRelativeCoords.y;
-              } else if (last_mouse_y > drag_y && anchorSide === "bottom") {
-                //If it is in the bottom and mouse moves up it can go left anchor side
-                selectedBox.anchorSide = "right"; //Set new anchor side
-                newRelativeCoords =
-                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
-                    selectedBox,
-                    parentX2,
-                    parentY2,
-                    cy
-                  );
-                selectedBox.bbox.x = newRelativeCoords.x;
-                selectedBox.bbox.y = newRelativeCoords.y;
-              }
+          }
+          //If it on right it can pass right anchor side
+          else if (Number(absoluteCoords.x.toFixed(2))  === Number(parentX2.toFixed(2))) {
+            if (last_mouse_y < drag_y && anchorSide === "top") {
+              selectedBox.anchorSide = "right"; //Set new anchor side
+              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX2),
+              (parentY1), cy);
+              selectedBox.bbox.x = newRelativeCoords.x;
+              selectedBox.bbox.y = newRelativeCoords.y;
             }
-          } else {
-            //If anchor side left or right only move in y direction
-
-            //Get absolute position
-            var newRelativeCoords =
-              instance.classes.AuxiliaryUnit.convertToRelativeCoord(
-                selectedBox,
-                selectedBox.bbox.x,
-                drag_y,
-                cy
-              );
-
-            if (newRelativeCoords.y < 0) {
-              //Box cannot go futher than parentBox + margin on left side
-
-              selectedBox.bbox.y = 0;
-            } else if (newRelativeCoords.y > 100) {
-              //Box cannot go futher than parentBox - margin on right side
-
-              selectedBox.bbox.y = 100;
-            } else {
-              //Else it is already relative
+            else if (last_mouse_y > drag_y && anchorSide === "bottom") { //If it is in the bottom and mouse moves up it can go left anchor side
+              selectedBox.anchorSide = "right"; //Set new anchor side
+              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX2),
+                (parentY2), cy);
+              selectedBox.bbox.x = newRelativeCoords.x;
               selectedBox.bbox.y = newRelativeCoords.y;
             }
+          }
+        }
+        else {
+           //If anchor side left or right only move in y direction
+        
+
+          //Get absolute position
+          var newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, selectedBox.bbox.x, drag_y, cy);
+          
+          if (newRelativeCoords.y< 0) { //Box cannot go futher than parentBox + margin on left side
+           
+            selectedBox.bbox.y = 0;
+          }
+          else if (newRelativeCoords.y > 100) { //Box cannot go futher than parentBox - margin on right side
+            
+            selectedBox.bbox.y = 100;
+          }
+          else { //Else it is already relative
+            selectedBox.bbox.y = newRelativeCoords.y;
+          }
 
-            var absoluteCoords =
-              instance.classes.AuxiliaryUnit.convertToAbsoluteCoord(
-                selectedBox,
-                selectedBox.bbox.x,
-                selectedBox.bbox.y,
-                cy
-              );
-            //Set anchor side changes
-            if (
-              Number(absoluteCoords.y.toFixed(2)) ===
-              Number(parentY1.toFixed(2))
-            ) {
-              //If it is on the top margin allow it to change anchor sides
-              //If it is in the top and mouse moves bottom it can go left anchor
-              if (last_mouse_x < drag_x && anchorSide === "left") {
-                selectedBox.anchorSide = "top"; //Set new anchor side
-                newRelativeCoords =
-                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
-                    selectedBox,
-                    parentX1,
-                    parentY1,
-                    cy
-                  );
-                selectedBox.bbox.x = newRelativeCoords.x;
-                selectedBox.bbox.y = newRelativeCoords.y;
-              } else if (last_mouse_x > drag_x && anchorSide === "right") {
-                //If it is in the right and mouse moves up it can go top anchor side
-                selectedBox.anchorSide = "top"; //Set new anchor side
-                newRelativeCoords =
-                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
-                    selectedBox,
-                    parentX2,
-                    parentY1,
-                    cy
-                  );
-                selectedBox.bbox.x = newRelativeCoords.x;
-                selectedBox.bbox.y = newRelativeCoords.y;
-              }
+          var absoluteCoords = instance.classes.AuxiliaryUnit.convertToAbsoluteCoord(selectedBox, selectedBox.bbox.x, selectedBox.bbox.y, cy);
+          //Set anchor side changes
+          if (Number(absoluteCoords.y.toFixed(2))  === Number(parentY1.toFixed(2))) { //If it is on the top margin allow it to change anchor sides
+            //If it is in the top and mouse moves bottom it can go left anchor
+            if (last_mouse_x < drag_x  && anchorSide === "left") {
+              selectedBox.anchorSide = "top"; //Set new anchor side
+              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX1), (parentY1), cy);
+              selectedBox.bbox.x = newRelativeCoords.x;
+              selectedBox.bbox.y = newRelativeCoords.y;
             }
-            //If it on right it can pass right anchor side
-            else if (
-              Number(absoluteCoords.y.toFixed(2)) ===
-              Number(parentY2.toFixed(2))
-            ) {
-              if (last_mouse_x < drag_x && anchorSide === "left") {
-                selectedBox.anchorSide = "bottom"; //Set new anchor side
-                newRelativeCoords =
-                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
-                    selectedBox,
-                    parentX1,
-                    parentY2,
-                    cy
-                  );
-                selectedBox.bbox.x = newRelativeCoords.x;
-                selectedBox.bbox.y = newRelativeCoords.y;
-              } else if (last_mouse_x > drag_x && anchorSide === "right") {
-                //If it is in the bottom and mouse moves up it can go left anchor side
-                selectedBox.anchorSide = "bottom"; //Set new anchor side
-                newRelativeCoords =
-                  instance.classes.AuxiliaryUnit.convertToRelativeCoord(
-                    selectedBox,
-                    parentX2,
-                    parentY2,
-                    cy
-                  );
-                selectedBox.bbox.x = newRelativeCoords.x;
-                selectedBox.bbox.y = newRelativeCoords.y;
-              }
+            else if (last_mouse_x > drag_x && anchorSide === "right") { //If it is in the right and mouse moves up it can go top anchor side
+              selectedBox.anchorSide = "top"; //Set new anchor side
+              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX2), (parentY1), cy);
+              selectedBox.bbox.x = newRelativeCoords.x;
+              selectedBox.bbox.y = newRelativeCoords.y;
+            }
+          }
+          //If it on right it can pass right anchor side
+          else if (Number(absoluteCoords.y.toFixed(2)) === Number(parentY2.toFixed(2))) {
+            if (last_mouse_x < drag_x && anchorSide === "left") {
+              selectedBox.anchorSide = "bottom"; //Set new anchor side
+              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX1), (parentY2), cy);
+              selectedBox.bbox.x = newRelativeCoords.x;
+              selectedBox.bbox.y = newRelativeCoords.y;
+            }
+            else if (last_mouse_x > drag_x && anchorSide === "right") { //If it is in the bottom and mouse moves up it can go left anchor side
+              selectedBox.anchorSide = "bottom"; //Set new anchor side
+              newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX2), (parentY2), cy);
+              selectedBox.bbox.x = newRelativeCoords.x;
+              selectedBox.bbox.y = newRelativeCoords.y;
             }
           }
 
-          last_mouse_x = drag_x;
-          last_mouse_y = drag_y;
-
-          //TODO find a way to elimate this redundancy to update info-box positions
-          node.data("border-width", node.data("border-width"));
-        })
-      );
-
-      cy.on("mouseup", function (event) {
-        appUtilities.disableInfoBoxRelocationDrag();
-        if (selectedBox !== undefined && oldAnchorSide !== undefined) {
-          selectedBox.style.dashed = false;
-          instance.classes.AuxUnitLayout.modifyUnits(
-            node,
-            selectedBox,
-            oldAnchorSide,
-            cy
-          ); //Modify aux unit layouts
-          selectedBox = undefined;
-          anchorSide = undefined;
-          oldAnchorSide = undefined;
-          cy.autolock(false);
         }
-      });
-    })
-  );
-};
 
-appUtilities.getDefaultEmptyInfoboxObj = function (type) {
+        last_mouse_x = drag_x;
+        last_mouse_y = drag_y;
+
+        //TODO find a way to elimate this redundancy to update info-box positions
+        node.data('border-width', node.data('border-width'));
+
+    });
+
+    cy.on("mouseup", function(event){
+      appUtilities.disableInfoBoxRelocationDrag();
+      if (selectedBox !== undefined && oldAnchorSide !== undefined) {
+        selectedBox.style.dashed = false;
+        instance.classes.AuxUnitLayout.modifyUnits(node, selectedBox, oldAnchorSide, cy); //Modify aux unit layouts
+        selectedBox = undefined;
+        anchorSide = undefined;
+        oldAnchorSide = undefined;
+        cy.autolock(false);
+      }
+    });
+
+    });
+}
+
+appUtilities.getDefaultEmptyInfoboxObj = function( type ) {
   var cy = appUtilities.getActiveCy();
 
   // access current general properties for active instance
-  var currentGeneralProperties = appUtilities.getScratch(
-    cy,
-    "currentGeneralProperties"
-  );
+  var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
 
   var obj = {};
   obj.clazz = type;
 
   switch (type) {
-    case "unit of information":
+    case 'unit of information':
       obj.label = {
-        text: "",
+        text: ""
       };
       break;
-    case "state variable":
+    case 'state variable':
       obj.state = {
         value: "",
-        variable: "",
+        variable: ""
       };
       break;
   }
@@ -3587,11 +3022,11 @@ appUtilities.getDefaultEmptyInfoboxObj = function (type) {
 };
 
 //Disables info-box relocation
-appUtilities.disableInfoBoxRelocation = function (color) {
+appUtilities.disableInfoBoxRelocation = function(color){
   var cy = this.getActiveCy();
   if (appUtilities.RelocationHandler !== undefined) {
     //Remove listerners
-    $(document).off("mousedown", appUtilities.RelocationHandler);
+    $(document).off('mousedown', appUtilities.RelocationHandler);
     appUtilities.disableInfoBoxRelocationDrag();
     if (relocatedNode !== undefined) {
       relocatedNode.data("border-color", color);
@@ -3602,72 +3037,72 @@ appUtilities.disableInfoBoxRelocation = function (color) {
   }
   cy.autolock(false); //Make the nodes moveable again
   cy.autounselectify(false); //Make the nodes selectable
+
 };
 
 //Disables info-box dragging
-appUtilities.disableInfoBoxRelocationDrag = function () {
+appUtilities.disableInfoBoxRelocationDrag = function(){
   if (appUtilities.relocationDragHandler !== undefined) {
     var cy = this.getActiveCy();
     //Remove listerners
-    cy.off("mousemove", appUtilities.relocationDragHandler);
+    cy.off('mousemove', appUtilities.relocationDragHandler);
     appUtilities.relocationDragHandler = undefined;
   }
 };
 
 appUtilities.modifyUnits = function (node, ele, anchorSide) {
-  var cy = this.getActiveCy();
-  var instance = appUtilities.getActiveSbgnvizInstance();
-  instance.classes.AuxUnitLayout.modifyUnits(node, ele, anchorSide, cy); //Modify aux unit layouts
+    var cy = this.getActiveCy();
+    var instance = appUtilities.getActiveSbgnvizInstance();
+    instance.classes.AuxUnitLayout.modifyUnits(node, ele, anchorSide, cy); //Modify aux unit layouts
 };
 
-appUtilities.resizeNodesToContent = function (nodes) {
+appUtilities.resizeNodesToContent = function(nodes){
+
   var chiseInstance = appUtilities.getActiveChiseInstance();
   var cy = appUtilities.getActiveCy();
   var collection;
-  if (nodes.length == 1) {
-    collection = cy.collection();
-    collection = collection.add(nodes[0]);
-  } else {
+  if(nodes.length == 1){
+    collection = cy.collection();    
+    collection = collection.add(nodes[0]);   
+  }else{
     collection = nodes;
-  }
+  }    
 
-  if (!chiseInstance.areCompoundSizesConsidered()) {
-    collection = collection.difference(
-      ":parent,[class*='compartment'],[class*='submap']"
-    );
+  if(!chiseInstance.areCompoundSizesConsidered()){
+    collection = collection.difference(":parent,[class*='compartment'],[class*='submap']");
   }
   chiseInstance.resizeNodesToContent(collection, false);
-  cy.nodeResize("get").refreshGrapples();
-  cy.expandCollapse("get").clearVisualCue();
+  cy.nodeResize('get').refreshGrapples();
+  cy.expandCollapse('get').clearVisualCue();
   // To redraw expand/collapse cue after resize to content
-  if (
-    collection.length == 1 &&
-    (collection[0].isParent() || collection[0].data("collapsedChildren")) &&
-    collection[0].selected()
-  ) {
-    cy.$(":selected").trigger("select");
-  }
+  if(collection.length == 1 && (collection[0].isParent() || collection[0].data('collapsedChildren')) && collection[0].selected()) { 
+    cy.$(':selected').trigger('select'); 
+  };
+
 };
 
-appUtilities.transformClassInfo = function (classInfo) {
-  var res = classInfo.replace(" multimer", "");
-  if (res == "and" || res == "or" || res == "not") {
+appUtilities.transformClassInfo = function( classInfo ) {
+  var res = classInfo.replace(' multimer', '');
+  if (res == 'and' || res == 'or' || res == 'not') {
     res = res.toUpperCase();
-  } else {
+  }
+  else {
     res = res.replace(/\w\S*/g, function (txt) {
       return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
     });
-    res = res.replace(" Of ", " of ");
-    res = res.replace(" And ", " and ");
-    res = res.replace(" Or ", " or ");
-    res = res.replace(" Not ", " not ");
+    res = res.replace(' Of ', ' of ');
+    res = res.replace(' And ', ' and ');
+    res = res.replace(' Or ', ' or ');
+    res = res.replace(' Not ', ' not ');
   }
 
-  if (res == "Ba Plain") {
+  if (res == "Ba Plain"){
     res = "BA";
-  } else if (res.includes("Ba ")) {
+  }
+  else if (res.includes("Ba ")){
     res = "BA " + res.substr(3);
-  } else if (res.includes("Sif ")) {
+  }
+  else if (res.includes("Sif ")) {
     res = "SIF " + res.substr(3);
   }
 
@@ -3680,12 +3115,14 @@ appUtilities.transformClassInfo = function (classInfo) {
 //   var experimentNames = chiseInstance.getGroupedDataMap();
 //   //console.log(experimentNames.length());
 
+
+  
 //   return experimentNames;
 // };
 // appUtilities.setExperimentNames = function(files)
 // {
 //   console.log("experiment names in set experimentNames");
-
+ 
 //  // currentExperimentProperties.experimentDescription = files;
 //   appUtilities.experimentTabPanel.render();
 // }
diff --git a/app/js/backbone-views.js b/app/js/backbone-views.js
index 5f84fdcc3..2e3fc98a6 100644
--- a/app/js/backbone-views.js
+++ b/app/js/backbone-views.js
@@ -1,12 +1,12 @@
-var jquery = ($ = require("jquery"));
-var _ = require("underscore");
-var Backbone = require("backbone");
-var chroma = require("chroma-js");
-var FileSaver = require("file-saver");
+var jquery = $ = require('jquery');
+var _ = require('underscore');
+var Backbone = require('backbone');
+var chroma = require('chroma-js');
+var FileSaver = require('file-saver');
 
-var appUtilities = require("./app-utilities");
+var appUtilities = require('./app-utilities');
 var setFileContent = appUtilities.setFileContent.bind(appUtilities);
-const colorPickerUtils = require("./color-picker-utils");
+const colorPickerUtils = require('./color-picker-utils');
 //var annotationsHandler = require('./annotations-handler');
 
 // since biogene service from PC is not available any more, we now give link to gene properties in My Cancer Genome organization
@@ -186,62 +186,65 @@ const colorPickerUtils = require("./color-picker-utils");
  * Backbone view for the Chemical information.
  */
 var ChemicalView = Backbone.View.extend({
-  render: function () {
-    // pass variables in using Underscore.js template
-    var variables = {
-      chemicalDescription: this.model.description[0],
-      chebiName: this.model.label,
-      chebiID: this.model.obo_id.substring(6, this.model.obo_id.length), //Gets only the nr from ChEBI:15422 format
-    };
-
-    // compile the template using underscore
-    var template = _.template($("#chemical-template").html());
-    template = template(variables);
-
-    // load the compiled HTML into the Backbone "el"
-    this.$el.html(template);
+    render: function () {
+        // pass variables in using Underscore.js template
+        var variables = {
+            chemicalDescription: this.model.description[0],
+            chebiName: this.model.label,
+            chebiID: this.model.obo_id.substring(6, this.model.obo_id.length) //Gets only the nr from ChEBI:15422 format
+        };
 
-    // format after loading
-    this.format(this.model);
+        // compile the template using underscore
+        var template = _.template($("#chemical-template").html());
+        template = template(variables);
 
-    return this;
-  },
-  format: function () {
-    // hide rows with undefined data
-    if (this.model.label == undefined) this.$el.find(".chebi-name").hide();
-
-    if (this.model.description[0] == undefined)
-      this.$el.find(".chemical-description").hide();
-
-    if (this.model.obo_id == undefined) this.$el.find(".chebi-id").hide();
-
-    var expanderOpts = {
-      slicePoint: 150,
-      expandPrefix: " ",
-      expandText: " (...)",
-      userCollapseText: " (show less)",
-      moreClass: "expander-read-more",
-      lessClass: "expander-read-less",
-      detailClass: "expander-details",
-      // do not use default effects
-      // (see https://github.com/kswedberg/jquery-expander/issues/46)
-      expandEffect: "fadeIn",
-      collapseEffect: "fadeOut",
-    };
+        // load the compiled HTML into the Backbone "el"
+        this.$el.html(template);
 
-    $(".chemical-description .expandable").expander(expanderOpts);
+        // format after loading
+        this.format(this.model);
 
-    expanderOpts.slicePoint = 2; // show comma and the space
-    expanderOpts.widow = 0; // hide everything else in any case
-  },
+        return this;
+    },
+    format: function ()
+    {
+        // hide rows with undefined data
+        if (this.model.label == undefined)
+            this.$el.find(".chebi-name").hide();
+
+        if (this.model.description[0] == undefined)
+            this.$el.find(".chemical-description").hide();
+
+        if (this.model.obo_id == undefined)
+            this.$el.find(".chebi-id").hide();
+
+        var expanderOpts = {slicePoint: 150,
+            expandPrefix: ' ',
+            expandText: ' (...)',
+            userCollapseText: ' (show less)',
+            moreClass: 'expander-read-more',
+            lessClass: 'expander-read-less',
+            detailClass: 'expander-details',
+            // do not use default effects
+            // (see https://github.com/kswedberg/jquery-expander/issues/46)
+            expandEffect: 'fadeIn',
+            collapseEffect: 'fadeOut'};
+
+        $(".chemical-description .expandable").expander(expanderOpts);
+
+        expanderOpts.slicePoint = 2; // show comma and the space
+        expanderOpts.widow = 0; // hide everything else in any case
+    }
 });
 
 /**
  * SBGN Layout view for the Sample Application.
  */
 var LayoutPropertiesView = Backbone.View.extend({
-  initialize: function () {},
+  initialize: function () {
+  },
   copyProperties: function () {
+
     // use active cy instance
     var cy = appUtilities.getActiveCy();
 
@@ -249,7 +252,7 @@ var LayoutPropertiesView = Backbone.View.extend({
     var clonedProp = _.clone(appUtilities.defaultLayoutProperties);
 
     // reset current layout props
-    appUtilities.setScratch(cy, "currentLayoutProperties", clonedProp);
+    appUtilities.setScratch(cy, 'currentLayoutProperties', clonedProp);
 
     // return cloned props to make them accessible
     return clonedProp;
@@ -261,10 +264,7 @@ var LayoutPropertiesView = Backbone.View.extend({
     // get associated cy instance
     var cy = chiseInstance.getCy();
 
-    var currentLayoutProperties = appUtilities.getScratch(
-      cy,
-      "currentLayoutProperties"
-    );
+    var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
 
     // if preferences param is not set use an empty map not to override any layout option
     if (preferences === undefined) {
@@ -276,6 +276,7 @@ var LayoutPropertiesView = Backbone.View.extend({
     return options;
   },
   applyLayout: function (preferences, notUndoable, _chiseInstance) {
+
     // if chise instance param is not set use the recently active chise instance
     var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance();
     var options = this.getLayoutOptions(preferences, _chiseInstance);
@@ -288,102 +289,61 @@ var LayoutPropertiesView = Backbone.View.extend({
     var cy = appUtilities.getActiveCy();
 
     // get current layout props for cy
-    var currentLayoutProperties = appUtilities.getScratch(
-      cy,
-      "currentLayoutProperties"
-    );
+    var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
 
     self.template = _.template($("#layout-settings-template").html());
     self.template = self.template(currentLayoutProperties);
     $(self.el).html(self.template);
 
-    $(self.el).modal("show");
-
-    $(document)
-      .off("click", "#save-layout")
-      .on("click", "#save-layout", function (evt) {
-        // use active cy instance
-        var cy = appUtilities.getActiveCy();
-
-        // get current layout props for cy
-        var currentLayoutProperties = appUtilities.getScratch(
-          cy,
-          "currentLayoutProperties"
-        );
-
-        currentLayoutProperties.nodeRepulsion = Number(
-          document.getElementById("node-repulsion").value
-        );
-        currentLayoutProperties.idealEdgeLength = Number(
-          document.getElementById("ideal-edge-length").value
-        );
-        currentLayoutProperties.edgeElasticity = Number(
-          document.getElementById("edge-elasticity").value
-        );
-        currentLayoutProperties.nestingFactor = Number(
-          document.getElementById("nesting-factor").value
-        );
-        currentLayoutProperties.gravity = Number(
-          document.getElementById("gravity").value
-        );
-        currentLayoutProperties.numIter = Number(
-          document.getElementById("num-iter").value
-        );
-        currentLayoutProperties.tile = document.getElementById("tile").checked;
-        currentLayoutProperties.packComponents = document.getElementById(
-          "pack-components"
-        ).checked
-          ? true
-          : false;
-        currentLayoutProperties.randomize =
-          !document.getElementById("incremental").checked;
-        currentLayoutProperties.gravityRangeCompound = Number(
-          document.getElementById("gravity-range-compound").value
-        );
-        currentLayoutProperties.gravityCompound = Number(
-          document.getElementById("gravity-compound").value
-        );
-        currentLayoutProperties.gravityRange = Number(
-          document.getElementById("gravity-range").value
-        );
-        currentLayoutProperties.tilingPaddingVertical = Number(
-          document.getElementById("tiling-padding-vertical").value
-        );
-        currentLayoutProperties.tilingPaddingHorizontal = Number(
-          document.getElementById("tiling-padding-horizontal").value
-        );
-        currentLayoutProperties.initialEnergyOnIncremental = Number(
-          document.getElementById("incremental-cooling-factor").value
-        );
-        currentLayoutProperties.improveFlow =
-          document.getElementById("improve-flow").checked;
-        // reset currentLayoutProperties in scratch pad
-        appUtilities.setScratch(
-          cy,
-          currentLayoutProperties,
-          "currentLayoutProperties"
-        );
-
-        $(self.el).modal("toggle");
-        $(document).trigger("saveLayout", cy);
-      });
+    $(self.el).modal('show');
 
-    $(document)
-      .off("click", "#default-layout")
-      .on("click", "#default-layout", function (evt) {
-        // reset current layout props for active cy instance and get new props
-        var currentLayoutProperties = self.copyProperties();
+    $(document).off("click", "#save-layout").on("click", "#save-layout", function (evt) {
 
-        self.template = _.template($("#layout-settings-template").html());
-        self.template = self.template(currentLayoutProperties);
-        $(self.el).html(self.template);
-      });
+      // use active cy instance
+      var cy = appUtilities.getActiveCy();
+
+      // get current layout props for cy
+      var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
+
+      currentLayoutProperties.nodeRepulsion = Number(document.getElementById("node-repulsion").value);
+      currentLayoutProperties.idealEdgeLength = Number(document.getElementById("ideal-edge-length").value);
+      currentLayoutProperties.edgeElasticity = Number(document.getElementById("edge-elasticity").value);
+      currentLayoutProperties.nestingFactor = Number(document.getElementById("nesting-factor").value);
+      currentLayoutProperties.gravity = Number(document.getElementById("gravity").value);
+      currentLayoutProperties.numIter = Number(document.getElementById("num-iter").value);
+      currentLayoutProperties.tile = document.getElementById("tile").checked;
+      currentLayoutProperties.packComponents = document.getElementById("pack-components").checked ? true : false;
+      currentLayoutProperties.randomize = !document.getElementById("incremental").checked;
+      currentLayoutProperties.gravityRangeCompound = Number(document.getElementById("gravity-range-compound").value);
+      currentLayoutProperties.gravityCompound = Number(document.getElementById("gravity-compound").value);
+      currentLayoutProperties.gravityRange = Number(document.getElementById("gravity-range").value);
+      currentLayoutProperties.tilingPaddingVertical = Number(document.getElementById("tiling-padding-vertical").value);
+      currentLayoutProperties.tilingPaddingHorizontal = Number(document.getElementById("tiling-padding-horizontal").value);    
+      currentLayoutProperties.initialEnergyOnIncremental = Number(document.getElementById("incremental-cooling-factor").value);
+      currentLayoutProperties.improveFlow = document.getElementById("improve-flow").checked;      
+      // reset currentLayoutProperties in scratch pad
+      appUtilities.setScratch(cy, currentLayoutProperties, 'currentLayoutProperties');
+
+      $(self.el).modal('toggle');
+      $(document).trigger('saveLayout', cy);
+    });
+
+    $(document).off("click", "#default-layout").on("click", "#default-layout", function (evt) {
+      // reset current layout props for active cy instance and get new props
+      var currentLayoutProperties = self.copyProperties();
+
+      self.template = _.template($("#layout-settings-template").html());
+      self.template = self.template(currentLayoutProperties);
+      $(self.el).html(self.template);
+    });
 
     return this;
-  },
+  }
 });
 
+
 var ColorSchemeInspectorView = Backbone.View.extend({
+
   initialize: function () {
     var self = this;
 
@@ -392,21 +352,20 @@ var ColorSchemeInspectorView = Backbone.View.extend({
     var schemes_3D = Object.assign({}, schemes);
     var invertedScheme = {}; // key: scheme_id, value: scheme that is inverse of another scheme
 
-    for (var id in schemes) {
+    for(var id in schemes) {
       var previewColors = schemes[id].preview;
 
-      if (invertedScheme[id]) {
-        // this scheme is the complement of a previous one
+      if(invertedScheme[id]) { // this scheme is the complement of a previous one
         schemes[id].isDisplayed = false;
-      } else if (schemes[id].invert) {
-        // this scheme has a complement
+      }
+      else if (schemes[id].invert) { // this scheme has a complement
         invertedScheme[schemes[id].invert] = id;
         schemes[id].isDisplayed = true;
-      } else if (schemes[id].name == "Pure White") {
-        // pure white is not an option for color scheme selection
+      }
+      else if(schemes[id].name == 'Pure White'){ // pure white is not an option for color scheme selection
         continue;
-      } else {
-        // scheme has no complement, display it normally
+      }
+      else { // scheme has no complement, display it normally
         schemes[id].isDisplayed = true;
       }
 
@@ -414,38 +373,24 @@ var ColorSchemeInspectorView = Backbone.View.extend({
       schemes_3D[id] = Object.assign({}, schemes[id]);
 
       var colorCount = previewColors.length;
-      var htmlS = "";
-      var htmlG = "";
+      var htmlS  = "";
+      var htmlG  = "";
       var html3D = "";
 
-      for (var i = 0; i < colorCount; i++) {
+      for(var i=0; i < colorCount; i++) {
         var color = chroma(previewColors[i]);
         // apply default alpha of elements backgrounds, to make it look more like reality
         color = color.alpha(0.5);
-        var prct = 100 / colorCount;
-        htmlS +=
-          "<div style='float:left; width:" +
-          prct +
-          "%; height:100%; background-color:" +
-          color.css() +
-          "'></div>";
-        htmlG +=
-          "<img style='float:left; width:" +
-          prct +
-          "%; height:100%;' src='" +
-          appUtilities.colorCodeToGradientImage[previewColors[i]] +
-          "'>";
-        html3D +=
-          "<img style='float:left; width:" +
-          prct +
-          "%; height:100%;' src='" +
-          appUtilities.colorCodeTo3DImage[previewColors[i]] +
-          "'>";
+        var prct = 100/colorCount;
+        htmlS += "<div style='float:left; width:"+prct+"%; height:100%; background-color:"+color.css()+"'></div>";
+        htmlG += "<img style='float:left; width:"+prct+"%; height:100%;' src='" + appUtilities.colorCodeToGradientImage[previewColors[i]] + "'>";
+        html3D += "<img style='float:left; width:"+prct+"%; height:100%;' src='" + appUtilities.colorCodeTo3DImage[previewColors[i]] + "'>";
       }
 
       schemes[id].previewHtml = htmlS;
       schemes_gradient[id].previewHtml = htmlG;
       schemes_3D[id].previewHtml = html3D;
+
     }
 
     this.schemes = schemes;
@@ -455,42 +400,25 @@ var ColorSchemeInspectorView = Backbone.View.extend({
     // attach events
     $(document).on("click", "div.color-scheme-choice", function (evt) {
       var cy = appUtilities.getActiveCy();
-      var scheme_type = appUtilities.getScratch(
-        cy,
-        "currentGeneralProperties"
-      ).mapColorSchemeStyle;
-      var raw_id = $(this).attr("id");
+      var scheme_type = appUtilities.getScratch(cy,'currentGeneralProperties').mapColorSchemeStyle;
+      var raw_id = $(this).attr('id');
       var scheme_id = raw_id.replace("map-color-scheme_", "");
       appUtilities.applyMapColorScheme(scheme_id, scheme_type, self);
     });
 
-    $(document).on(
-      "change",
-      "#color-scheme-inspector-style-select",
-      function (event) {
-        var cy = appUtilities.getActiveCy();
-        var current_scheme_id = appUtilities.getScratch(
-          cy,
-          "currentGeneralProperties"
-        ).mapColorScheme;
-        //change the currently displayed html element
-        var selected_style = $("#color-scheme-inspector-style-select").val();
-        //change to the color scheme choice to match current style
-        appUtilities.applyMapColorScheme(
-          current_scheme_id,
-          selected_style,
-          self
-        );
-      }
-    );
+    $(document).on("change", "#color-scheme-inspector-style-select", function (event) {
+      var cy = appUtilities.getActiveCy();
+      var current_scheme_id = appUtilities.getScratch(cy,'currentGeneralProperties').mapColorScheme;
+      //change the currently displayed html element
+      var selected_style = $('#color-scheme-inspector-style-select').val();
+      //change to the color scheme choice to match current style
+      appUtilities.applyMapColorScheme(current_scheme_id,selected_style,self);
+    });
 
     $(document).on("click", "div.color-scheme-invert-button", function (evt) {
-      var raw_id = $(this).attr("id");
+      var raw_id = $(this).attr('id');
       var cy = appUtilities.getActiveCy();
-      var scheme_type = appUtilities.getScratch(
-        cy,
-        "currentGeneralProperties"
-      ).mapColorSchemeStyle;
+      var scheme_type = appUtilities.getScratch(cy,'currentGeneralProperties').mapColorSchemeStyle;
       var scheme_id = raw_id.replace("map-color-scheme_invert_", "");
       var inverted_id = schemes[scheme_id].invert;
       appUtilities.applyMapColorScheme(inverted_id, scheme_type, self);
@@ -498,65 +426,54 @@ var ColorSchemeInspectorView = Backbone.View.extend({
 
     $(document).on("click", "#map-color-scheme-default-button", function (evt) {
       var cy = appUtilities.getActiveCy();
-      var defaultColorScheme =
-        appUtilities.defaultGeneralProperties.mapColorScheme;
-      var defaultColorSchemeStyle =
-        appUtilities.defaultGeneralProperties.mapColorSchemeStyle;
-      appUtilities.applyMapColorScheme(
-        defaultColorScheme,
-        defaultColorSchemeStyle,
-        self
-      ); // default color scheme
+      var defaultColorScheme = appUtilities.defaultGeneralProperties.mapColorScheme;
+      var defaultColorSchemeStyle = appUtilities.defaultGeneralProperties.mapColorSchemeStyle;
+      appUtilities.applyMapColorScheme(defaultColorScheme, defaultColorSchemeStyle, self); // default color scheme
     });
+  
   },
-  changeStyle: function (style) {
-    if (style == "solid") {
-      $("#solid-color-scheme-display").show();
-      $("#gradient-color-scheme-display").hide();
-      $("#3D-color-scheme-display").hide();
+  changeStyle: function(style) {
+    if(style == 'solid'){
+      $('#solid-color-scheme-display').show();
+      $('#gradient-color-scheme-display').hide();
+      $('#3D-color-scheme-display').hide();
       $("#color-scheme-inspector-style-select").val("solid");
-    } else if (style == "gradient") {
-      $("#solid-color-scheme-display").hide();
-      $("#gradient-color-scheme-display").show();
-      $("#3D-color-scheme-display").hide();
+    }
+    else if(style == 'gradient'){
+      $('#solid-color-scheme-display').hide();
+      $('#gradient-color-scheme-display').show();
+      $('#3D-color-scheme-display').hide();
       $("#color-scheme-inspector-style-select").val("gradient");
-    } else if (style == "3D") {
-      $("#solid-color-scheme-display").hide();
-      $("#gradient-color-scheme-display").hide();
-      $("#3D-color-scheme-display").show();
+    }
+    else if(style == '3D'){
+      $('#solid-color-scheme-display').hide();
+      $('#gradient-color-scheme-display').hide();
+      $('#3D-color-scheme-display').show();
       $("#color-scheme-inspector-style-select").val("3D");
     }
   },
   render: function () {
+  
+    
     this.template = _.template($("#color-scheme-inspector-template").html());
     var cy = appUtilities.getActiveCy();
     // scheme_type and current_scheme are used to highlight the current color scheme with the javascript embedded to color-scheme-inspector-template div(line: 2337 in index.html)
     var scheme_type = $("#color-scheme-inspector-style-select").val();
-    var current_scheme = appUtilities.getScratch(
-      cy,
-      "currentGeneralProperties"
-    ).mapColorScheme;
-
+    var current_scheme = appUtilities.getScratch(cy,'currentGeneralProperties').mapColorScheme;
+   
     this.$el.empty();
-    this.$el.html(
-      this.template({
-        schemes: this.schemes,
-        schemes_gradient: this.schemes_gradient,
-        schemes_3D: this.schemes_3D,
-        scheme_type: scheme_type,
-        current_scheme: current_scheme,
-      })
-    );
-
+    this.$el.html(this.template({schemes: this.schemes, schemes_gradient: this.schemes_gradient, schemes_3D: this.schemes_3D, scheme_type: scheme_type, current_scheme: current_scheme}));
+    
     return this;
-  },
+  }
 });
 
 // provide common functions for different views tied to
 // inspector map panels
 var GeneralPropertiesParentView = Backbone.View.extend({
   // Apply the properties as they are set
-  applyUpdate: function () {
+  applyUpdate: function() {
+
     // use active chise instance
     var chiseInstance = appUtilities.getActiveChiseInstance();
 
@@ -564,10 +481,7 @@ var GeneralPropertiesParentView = Backbone.View.extend({
     var cy = appUtilities.getActiveCy();
 
     // get currentGeneralProperties for cy
-    var currentGeneralProperties = appUtilities.getScratch(
-      cy,
-      "currentGeneralProperties"
-    );
+    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
 
     // get topologyGrouping instance for cy
     var topologyGrouping = chiseInstance.sifTopologyGrouping;
@@ -577,106 +491,75 @@ var GeneralPropertiesParentView = Backbone.View.extend({
 
     if (currentGeneralProperties.enablePorts) {
       chiseInstance.enablePorts();
-    } else {
+    }
+    else {
       chiseInstance.disablePorts();
     }
 
     if (currentGeneralProperties.allowCompoundNodeResize) {
       chiseInstance.considerCompoundSizes();
-    } else {
+    }
+    else {
       chiseInstance.omitCompoundSizes();
     }
 
     // Refresh resize grapples
-    cy.nodeResize("get").refreshGrapples();
+    cy.nodeResize('get').refreshGrapples();
 
     cy.style().update();
 
-    $(document).trigger("saveGeneralProperties", cy);
+    $(document).trigger('saveGeneralProperties', cy);
   },
   setPropertiesToDefault: function () {
     var cy = appUtilities.getActiveCy();
     var clonedProps = _.clone(appUtilities.defaultGeneralProperties);
-    appUtilities.setScratch(cy, "currentGeneralProperties", clonedProps);
-  },
+    appUtilities.setScratch(cy, 'currentGeneralProperties', clonedProps);
+  }
 });
 
 // inherit from GeneralPropertiesParentView
 var MapTabGeneralPanel = GeneralPropertiesParentView.extend({
-  initialize: function () {
+  initialize: function() {
     var self = this;
     // initialize undo-redo parameters
     self.params = {};
-    self.params.compoundPadding = {
-      id: "compound-padding",
-      type: "text",
-      property: "currentGeneralProperties.compoundPadding",
-      update: self.applyUpdate,
-    };
-
-    self.params.arrowScale = {
-      id: "arrow-scale",
-      type: "range",
-      property: "currentGeneralProperties.arrowScale",
-    };
+    self.params.compoundPadding = {id: "compound-padding", type: "text",
+      property: "currentGeneralProperties.compoundPadding", update: self.applyUpdate};
 
-    self.params.allowCompoundNodeResize = {
-      id: "allow-compound-node-resize",
-      type: "checkbox",
-      property: "currentGeneralProperties.allowCompoundNodeResize",
-      update: self.applyUpdate,
-    };
+    self.params.arrowScale = {id: "arrow-scale", type: "range",
+      property: "currentGeneralProperties.arrowScale"};
 
-    self.params.inferNestingOnLoad = {
-      id: "infer-nesting-on-load",
-      type: "checkbox",
-      property: "currentGeneralProperties.inferNestingOnLoad",
-    };
+    self.params.allowCompoundNodeResize = {id: "allow-compound-node-resize", type: "checkbox",
+      property: "currentGeneralProperties.allowCompoundNodeResize", update: self.applyUpdate};
 
-    self.params.enablePorts = {
-      id: "enable-ports",
-      type: "checkbox",
-      property: "currentGeneralProperties.enablePorts",
-      update: self.applyUpdate,
-    };
+    self.params.inferNestingOnLoad = {id: "infer-nesting-on-load", type: "checkbox",
+      property: "currentGeneralProperties.inferNestingOnLoad"};
 
-    self.params.enableSIFTopologyGrouping = {
-      id: "enable-sif-topology-grouping",
-      type: "checkbox",
-      property: "currentGeneralProperties.enableSIFTopologyGrouping",
-      update: self.applyUpdate,
-    };
+    self.params.enablePorts = {id: "enable-ports", type: "checkbox",
+      property: "currentGeneralProperties.enablePorts", update: self.applyUpdate};
 
-    self.params.mapName = {
-      id: "map-name",
-      type: "text",
-      property: "currentGeneralProperties.mapName",
-    };
+    self.params.enableSIFTopologyGrouping = {id: "enable-sif-topology-grouping", type: "checkbox",
+      property: "currentGeneralProperties.enableSIFTopologyGrouping", update: self.applyUpdate};
 
-    self.params.mapDescription = {
-      id: "map-description",
-      type: "text",
-      property: "currentGeneralProperties.mapDescription",
-    };
+    self.params.mapName = {id: "map-name", type: "text",
+      property: "currentGeneralProperties.mapName"};
 
-    self.params.extraHighlightThickness = {
-      id: "highlight-thickness",
-      type: "range",
-      property: "currentGeneralProperties.extraHighlightThickness",
-    };
+    self.params.mapDescription = {id: "map-description", type: "text",
+      property: "currentGeneralProperties.mapDescription"};
 
-    self.params.highlightColor = {
-      id: "highlight-color",
-      type: "color",
-      property: "currentGeneralProperties.highlightColor",
-    };
+    self.params.extraHighlightThickness = {id: "highlight-thickness", type: "range",
+      property: "currentGeneralProperties.extraHighlightThickness"};  
 
+    self.params.highlightColor = {id: "highlight-color", type: "color",
+      property: "currentGeneralProperties.highlightColor"};
+   
     // general properties part
     $(document).on("change", "#map-name", function (evt) {
+
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.mapName.value = $("#map-name").val();
+      self.params.mapName.value = $('#map-name').val();
 
       // TODO while making such calls appUtilities.undoable flag should be checked
       // if it is not true then the operation should not be undoable
@@ -688,343 +571,269 @@ var MapTabGeneralPanel = GeneralPropertiesParentView.extend({
       // update the network tab description as the map name is just changed
       appUtilities.updateNetworkTabDesc(networkKey);
 
-      $("#map-name").blur();
+      $('#map-name').blur();
     });
 
     $(document).on("change", "#map-description", function (evt) {
+
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.mapDescription.value = $("#map-description").val();
+      self.params.mapDescription.value = $('#map-description').val();
       cy.undoRedo().do("changeMenu", self.params.mapDescription);
-      $("#map-description").blur();
+      $('#map-description').blur();
     });
 
     $(document).on("change", "#map-type", function (evt) {
-      var callback = function () {
-        $("#map-type").val(chiseInstance.getMapType());
+
+      var callback = function(){
+        $('#map-type').val(chiseInstance.getMapType());
       };
       // use active cy instance
       var cy = appUtilities.getActiveCy();
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var elements = cy.elements();
-
+      
       var newMapType = $("#map-type").val();
-      if (cy.elements().length == 0) {
+      if(cy.elements().length == 0){
         //chiseInstance.elementUtilities.setMapType(newMapType);
-        cy.undoRedo().do("changeMapType", {
-          mapType: newMapType,
-          callback: callback,
-        });
+        cy.undoRedo().do("changeMapType", {mapType: newMapType, callback : callback});
         return;
       }
       var currentMapType = chiseInstance.getMapType();
       var validChange = false;
-      if (
-        (currentMapType == "PD" ||
-          currentMapType == "AF" ||
-          currentMapType == "SIF") &&
-        newMapType == "HybridAny" &&
-        !validChange
-      ) {
+      if((currentMapType == 'PD' || currentMapType == 'AF' || currentMapType =='SIF') && newMapType == 'HybridAny' && !validChange){
         validChange = true;
 
         //ok
-      } else if (
-        (currentMapType == "PD" || currentMapType == "AF") &&
-        (newMapType == "HybridAny" || newMapType == "HybridSbgn") &&
-        !validChange
-      ) {
+      }else if((currentMapType == 'PD' || currentMapType == 'AF') && (newMapType == 'HybridAny' || newMapType == 'HybridSbgn')&& !validChange){
         validChange = true;
         //ok
-      } else if (
-        currentMapType == "HybridSbgn" &&
-        newMapType == "HybridAny" &&
-        !validChange
-      ) {
+      }else if(currentMapType =='HybridSbgn' && newMapType == 'HybridAny' && !validChange){
         validChange = true;
-      } else if (
-        currentMapType == "HybridSbgn" &&
-        (newMapType == "PD" || newMapType == "AF")
-      ) {
-        if (newMapType == "PD") {
-          //check no AF elements in netwrok
-          var checkType = true;
-          for (var i = 0; i < elements.length && checkType; i++) {
-            if (elements[i].data("language") == "AF") {
-              checkType = false;
+      }else if(currentMapType =='HybridSbgn' && (newMapType == 'PD' || newMapType =='AF')){
+        
+        if(newMapType == 'PD'){
+           //check no AF elements in netwrok     
+          var checkType = true;     
+          for(var i = 0 ; i < elements.length && checkType ;i++){
+            if(elements[i].data("language") == "AF"){
+              checkType = false;             
             }
           }
-          validChange = checkType;
-        } else {
+          validChange = checkType;     
+          
+         
+        }else{
           //check no PD elements in netwrok
-          var checkType = true;
-          for (var i = 0; i < elements.length && checkType; i++) {
-            if (elements[i].data("language") == "PD") {
-              checkType = false;
+          var checkType = true;     
+          for(var i = 0 ; i < elements.length && checkType ;i++){
+            if(elements[i].data("language") == "PD"){
+              checkType = false;             
             }
           }
-          validChange = checkType;
+          validChange = checkType;     
         }
-      } else if (currentMapType == "HybridAny" && !validChange) {
-        if (newMapType == "HybridSbgn") {
-          //check no SIF elements in netwrok
-          var checkType = true;
-          for (var i = 0; i < elements.length && checkType; i++) {
-            if (elements[i].data("language") == "SIF") {
-              checkType = false;
-            }
-          }
-          validChange = checkType;
-        } else if (newMapType == "PD") {
-          //check no AF  OR SIF elements in netwrok
-          var checkType = true;
-          for (var i = 0; i < elements.length && checkType; i++) {
-            if (
-              elements[i].data("language") == "AF" ||
-              elements[i].data("language") == "SIF"
-            ) {
-              checkType = false;
+      }else if(currentMapType == 'HybridAny' && !validChange){
+        if(newMapType == 'HybridSbgn'){
+           //check no SIF elements in netwrok
+           var checkType = true;     
+           for(var i = 0 ; i < elements.length && checkType ;i++){
+             if(elements[i].data("language") == "SIF"){
+               checkType = false;             
+             }
+           }
+           validChange = checkType;     
+        }else if(newMapType =='PD'){
+           //check no AF  OR SIF elements in netwrok
+           var checkType = true;  
+          for(var i = 0 ; i < elements.length &&  checkType;i++){
+            if(elements[i].data("language") == "AF" || elements[i].data("language") == "SIF"){
+              checkType = false;            
             }
           }
-          validChange = checkType;
-        } else if (newMapType == "AF") {
+          validChange = checkType;  
+
+        }else if(newMapType == 'AF'){
           //check no PD  OR SIF elements in netwrok
-          var checkType = true;
-          for (var i = 0; i < elements.length && checkType; i++) {
-            if (
-              elements[i].data("language") == "PD" ||
-              elements[i].data("language") == "SIF"
-            ) {
-              checkType = false;
+          var checkType = true;   
+          for(var i = 0 ; i < elements.length && checkType ;i++){
+            if(elements[i].data("language") == "PD" || elements[i].data("language") == "SIF"){
+              checkType = false;            
             }
           }
 
-          validChange = checkType;
-        } else {
+          validChange = checkType;  
+
+        }else{
           //check no PD  OR AF elements in netwrok
-          var checkType = true;
-          for (var i = 0; i < elements.length && checkType; i++) {
-            if (
-              elements[i].data("language") == "AF" ||
-              elements[i].data("language") == "PD"
-            ) {
-              checkType = false;
+          var checkType = true;  
+          for(var i = 0 ; i < elements.length && checkType ;i++){
+            if(elements[i].data("language") == "AF" || elements[i].data("language") == "PD"){
+              checkType = false;           
             }
           }
 
-          validChange = checkType;
+          validChange = checkType;  
         }
       }
-      if (validChange) {
-        cy.undoRedo().do("changeMapType", {
-          mapType: newMapType,
-          callback: callback,
-        });
-        //chiseInstance.elementUtilities.setMapType(newMapType);
-      } else {
+       if(validChange){
+        cy.undoRedo().do("changeMapType", {mapType: newMapType, callback : callback});
+         //chiseInstance.elementUtilities.setMapType(newMapType);
+       }else{
         $("#map-type").val(currentMapType);
-        appUtilities.promptMapTypeView.render(
-          "You cannot change map type " +
-            appUtilities.mapTypesToViewableText[currentMapType] +
-            " to a map of type " +
-            appUtilities.mapTypesToViewableText[newMapType] +
-            "!"
-        );
-      }
-
-      $("#map-type").blur();
+         appUtilities.promptMapTypeView.render("You cannot change map type "+ appUtilities.mapTypesToViewableText[currentMapType] + " to a map of type "+appUtilities.mapTypesToViewableText[newMapType]+"!");
+         
+       }
+    
+      $('#map-type').blur();
     });
     $(document).on("change", "#compound-padding", function (evt) {
-      var newValue = Number($("#compound-padding").val());
-      if (newValue < 0) {
+      
+      var newValue = Number($('#compound-padding').val());
+      if(newValue < 0 ){
         newValue = 0;
       }
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
       self.params.compoundPadding.value = Number(newValue);
-      // var ur = cy.undoRedo();
+     // var ur = cy.undoRedo();
       //var actions = [];
       //actions.push({name:"changeMenu", param:self.params.compoundPadding});
       //actions.push({name:"setCompoundPadding", param:self.params.compoundPadding});
-      // ur.do("batch", actions);
+     // ur.do("batch", actions);
       cy.undoRedo().do("changeMenu", self.params.compoundPadding);
-
-      $("#compound-padding").blur();
+     
+      $('#compound-padding').blur();
     });
 
+
     $(document).on("change", "#arrow-scale", function (evt) {
+
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.arrowScale.value = Number($("#arrow-scale").val());
+      self.params.arrowScale.value = Number($('#arrow-scale').val());
       var ur = cy.undoRedo();
       var actions = [];
-      actions.push({ name: "changeMenu", param: self.params.arrowScale });
-      actions.push({
-        name: "changeCss",
-        param: {
-          eles: cy.edges(),
-          name: "arrow-scale",
-          valueMap: self.params.arrowScale.value,
-        },
-      });
+      actions.push({name: "changeMenu", param: self.params.arrowScale});
+      actions.push({name: "changeCss", param: { eles: cy.edges(), name: "arrow-scale",
+          valueMap: self.params.arrowScale.value}});
       ur.do("batch", actions);
-      $("#arrow-scale").blur();
+      $('#arrow-scale').blur();
     });
 
     $(document).on("change", "#allow-compound-node-resize", function (evt) {
+
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.allowCompoundNodeResize.value = $(
-        "#allow-compound-node-resize"
-      ).prop("checked");
+      self.params.allowCompoundNodeResize.value = $('#allow-compound-node-resize').prop('checked');
       cy.undoRedo().do("changeMenu", self.params.allowCompoundNodeResize);
-      $("#allow-compound-node-resize").blur();
+      $('#allow-compound-node-resize').blur();
     });
 
     $(document).on("change", "#infer-nesting-on-load", function (evt) {
+
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.inferNestingOnLoad.value = $("#infer-nesting-on-load").prop(
-        "checked"
-      );
+      self.params.inferNestingOnLoad.value = $('#infer-nesting-on-load').prop('checked');
       cy.undoRedo().do("changeMenu", self.params.inferNestingOnLoad);
-      $("#infer-nesting-on-load").blur();
+      $('#infer-nesting-on-load').blur();
     });
 
     $(document).on("change", "#enable-ports", function (evt) {
+
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.enablePorts.value = $("#enable-ports").prop("checked");
+      self.params.enablePorts.value = $('#enable-ports').prop('checked');
       cy.undoRedo().do("changeMenu", self.params.enablePorts);
-      $("#enable-ports").blur();
+      $('#enable-ports').blur();
     });
 
     $(document).on("change", "#enable-sif-topology-grouping", function (evt) {
+
       // use active cy instance
       var cy = appUtilities.getActiveCy();
       var chiseInstance = appUtilities.getActiveChiseInstance();
       // get current general properties for cy
-      var currentGeneralProperties = appUtilities.getScratch(
-        cy,
-        "currentGeneralProperties"
-      );
+      var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
       var actions = [];
 
-      self.params.enableSIFTopologyGrouping.value = $(
-        "#enable-sif-topology-grouping"
-      ).prop("checked");
+      self.params.enableSIFTopologyGrouping.value = $('#enable-sif-topology-grouping').prop('checked');
       var apply = self.params.enableSIFTopologyGrouping.value;
 
-      actions.push({
-        name: "changeMenu",
-        param: self.params.enableSIFTopologyGrouping,
-      });
-      if (chiseInstance.elementUtilities.mapType === "SIF") {
-        actions.push({ name: "applySIFTopologyGrouping", param: { apply } });
+      actions.push({name: "changeMenu", param: self.params.enableSIFTopologyGrouping});
+      if ( chiseInstance.elementUtilities.mapType === 'SIF' ) {
+        actions.push({name: "applySIFTopologyGrouping", param: { apply }});
 
-        if (currentGeneralProperties.recalculateLayoutOnComplexityManagement) {
+        if ( currentGeneralProperties.recalculateLayoutOnComplexityManagement ) {
           var preferences = { randomize: false };
-          var layoutOptions =
-            appUtilities.layoutPropertiesView.getLayoutOptions(
-              preferences,
-              chiseInstance
-            );
+          var layoutOptions = appUtilities.layoutPropertiesView.getLayoutOptions(preferences, chiseInstance);
 
           var layoutParam = {
-            options: layoutOptions,
+            options: layoutOptions
           };
 
-          actions.push({ name: "layout", param: layoutParam });
+          actions.push({name: "layout", param: layoutParam});
         }
       }
 
       cy.undoRedo().do("batch", actions);
       // cy.undoRedo().do("changeMenu", self.params.enableSIFTopologyGrouping);
-      $("#enable-sif-topology-grouping").blur();
+      $('#enable-sif-topology-grouping').blur();
     });
 
-    $(document).on("change", "#highlight-thickness", function (evt) {
+    $(document).on("change", "#highlight-thickness", function(evt) {
       var cy = appUtilities.getActiveCy();
-      var viewUtilities = cy.viewUtilities("get");
-      self.params.extraHighlightThickness.value = Number(
-        $("#highlight-thickness").val()
-      );
-      self.params.highlightColor.value = $("#highlight-color").val();
+      var viewUtilities = cy.viewUtilities('get');
+      self.params.extraHighlightThickness.value = Number($('#highlight-thickness').val());
+      self.params.highlightColor.value = $('#highlight-color').val();
       var extraHighlightThickness = self.params.extraHighlightThickness.value;
       var highlightColor = self.params.highlightColor.value;
-
-      viewUtilities.changeHighlightStyle(
-        0,
-        {
-          "border-width": function (ele) {
-            return Math.max(
-              parseFloat(ele.data("border-width")) + extraHighlightThickness,
-              3
-            );
-          },
-          "border-color": highlightColor,
-        },
-        {
-          width: function (ele) {
-            return Math.max(
-              parseFloat(ele.data("width")) + extraHighlightThickness,
-              3
-            );
-          },
-          "line-color": highlightColor,
-          "source-arrow-color": highlightColor,
-          "target-arrow-color": highlightColor,
-        }
-      );
-
+      
+      viewUtilities.changeHighlightStyle(0, {
+        'border-width' : function (ele) { 
+          return Math.max(parseFloat(ele.data('border-width')) + extraHighlightThickness, 3); 
+        }, 'border-color': highlightColor
+      }, {
+        'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + extraHighlightThickness, 3); },
+        'line-color': highlightColor,
+        'source-arrow-color': highlightColor,
+        'target-arrow-color': highlightColor
+      });
+      
       cy.undoRedo().do("changeMenu", self.params.extraHighlightThickness);
-      $("#highlight-thickness").blur();
+      $('#highlight-thickness').blur();
     });
-
-    $(document).on("change", "#highlight-color", function (evt) {
+    
+    $(document).on("change", "#highlight-color", function(evt) {
       var cy = appUtilities.getActiveCy();
-      var viewUtilities = cy.viewUtilities("get");
-      self.params.extraHighlightThickness.value = Number(
-        $("#highlight-thickness").val()
-      );
-      self.params.highlightColor.value = $("#highlight-color").val();
+      var viewUtilities = cy.viewUtilities('get');
+      self.params.extraHighlightThickness.value = Number($('#highlight-thickness').val());
+      self.params.highlightColor.value = $('#highlight-color').val();
       var extraHighlightThickness = self.params.extraHighlightThickness.value;
       var highlightColor = self.params.highlightColor.value;
-
-      viewUtilities.changeHighlightStyle(
-        0,
-        {
-          "border-width": function (ele) {
-            return Math.max(
-              parseFloat(ele.data("border-width")) + extraHighlightThickness,
-              3
-            );
-          },
-          "border-color": highlightColor,
-        },
-        {
-          width: function (ele) {
-            return Math.max(
-              parseFloat(ele.data("width")) + extraHighlightThickness,
-              3
-            );
-          },
-          "line-color": highlightColor,
-          "source-arrow-color": highlightColor,
-          "target-arrow-color": highlightColor,
-        }
-      );
-
+      
+      viewUtilities.changeHighlightStyle(0, {
+        'border-width': function (ele) { 
+          return Math.max(parseFloat(ele.data('border-width')) + extraHighlightThickness, 3); 
+        }, 
+        'border-color': highlightColor
+      }, {
+        'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + extraHighlightThickness, 3); },
+        'line-color': highlightColor,
+        'source-arrow-color': highlightColor,
+        'target-arrow-color': highlightColor
+      });
+      
       cy.undoRedo().do("changeMenu", self.params.highlightColor);
-      $("#highlight-color").blur();
+      $('#highlight-color').blur();
     });
-
+  
     $(document).on("click", "#inspector-map-tab", function (evt) {
       var chiseInstance = appUtilities.getActiveChiseInstance();
       //document.getElementById('map-type').value = chiseInstance.getMapType() ? chiseInstance.getMapType() : "Unknown";
@@ -1036,409 +845,278 @@ var MapTabGeneralPanel = GeneralPropertiesParentView.extend({
     });
 
     $(document).on("click", "#map-general-default-button", function (evt) {
+
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
       var ur = cy.undoRedo();
       var actions = [];
 
-      self.params.allowCompoundNodeResize.value =
-        appUtilities.defaultGeneralProperties.allowCompoundNodeResize;
-      self.params.inferNestingOnLoad.value =
-        appUtilities.defaultGeneralProperties.inferNestingOnLoad;
-      self.params.enablePorts.value =
-        appUtilities.defaultGeneralProperties.enablePorts;
-      self.params.enableSIFTopologyGrouping.value =
-        appUtilities.defaultGeneralProperties.enableSIFTopologyGrouping;
-      self.params.compoundPadding.value =
-        appUtilities.defaultGeneralProperties.compoundPadding;
-      self.params.arrowScale.value =
-        appUtilities.defaultGeneralProperties.arrowScale;
-      self.params.extraHighlightThickness.value =
-        appUtilities.defaultGeneralProperties.extraHighlightThickness;
-      self.params.highlightColor.value =
-        appUtilities.defaultGeneralProperties.highlightColor;
-      actions.push({
-        name: "changeMenu",
-        param: self.params.allowCompoundNodeResize,
-      });
-      actions.push({
-        name: "changeMenu",
-        param: self.params.inferNestingOnLoad,
-      });
-      actions.push({ name: "changeMenu", param: self.params.enablePorts });
-      actions.push({
-        name: "changeMenu",
-        param: self.params.enableSIFTopologyGrouping,
-      });
-      actions.push({
-        name: "applySIFTopologyGrouping",
-        param: { apply: self.params.enableSIFTopologyGrouping.value },
-      });
-      actions.push({ name: "changeMenu", param: self.params.compoundPadding });
-      actions.push({ name: "changeMenu", param: self.params.arrowScale });
-      actions.push({
-        name: "changeCss",
-        param: {
-          eles: cy.edges(),
-          name: "arrow-scale",
-          valueMap: self.params.arrowScale.value,
-        },
-      });
-      actions.push({
-        name: "changeMenu",
-        param: self.params.extraHighlightThickness,
-      });
-      actions.push({ name: "changeMenu", param: self.params.highlightColor });
+      self.params.allowCompoundNodeResize.value = appUtilities.defaultGeneralProperties.allowCompoundNodeResize;
+      self.params.inferNestingOnLoad.value = appUtilities.defaultGeneralProperties.inferNestingOnLoad;
+      self.params.enablePorts.value = appUtilities.defaultGeneralProperties.enablePorts;
+      self.params.enableSIFTopologyGrouping.value = appUtilities.defaultGeneralProperties.enableSIFTopologyGrouping;
+      self.params.compoundPadding.value = appUtilities.defaultGeneralProperties.compoundPadding;
+      self.params.arrowScale.value = appUtilities.defaultGeneralProperties.arrowScale;
+      self.params.extraHighlightThickness.value = appUtilities.defaultGeneralProperties.extraHighlightThickness;
+      self.params.highlightColor.value = appUtilities.defaultGeneralProperties.highlightColor;
+      actions.push({name: "changeMenu", param: self.params.allowCompoundNodeResize});
+      actions.push({name: "changeMenu", param: self.params.inferNestingOnLoad});
+      actions.push({name: "changeMenu", param: self.params.enablePorts});
+      actions.push({name: "changeMenu", param: self.params.enableSIFTopologyGrouping});
+      actions.push({name: "applySIFTopologyGrouping", param: { apply: self.params.enableSIFTopologyGrouping.value }});
+      actions.push({name: "changeMenu", param: self.params.compoundPadding});
+      actions.push({name: "changeMenu", param: self.params.arrowScale});
+      actions.push({name: "changeCss", param: { eles: cy.edges(), name: "arrow-scale",
+          valueMap: self.params.arrowScale.value}});
+      actions.push({name: "changeMenu", param: self.params.extraHighlightThickness});
+      actions.push({name: "changeMenu", param: self.params.highlightColor});
       ur.do("batch", actions);
     });
   },
-  render: function () {
+  render: function() {
+
     // use active cy instance
     var cy = appUtilities.getActiveCy();
     var chiseInstance = appUtilities.getActiveChiseInstance();
     // get current general properties for cy
-    var currentGeneralProperties = appUtilities.getScratch(
-      cy,
-      "currentGeneralProperties"
-    );
+    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
     this.template = _.template($("#map-tab-general-template").html());
     this.$el.empty();
     this.$el.html(this.template(currentGeneralProperties));
-    colorPickerUtils.bindPicker2Input("#highlight-color", function (evt) {
-      $("#highlight-color").trigger("change");
+    colorPickerUtils.bindPicker2Input('#highlight-color', function(evt) {
+      $('#highlight-color').trigger("change");
     });
     $("#map-type").val(chiseInstance.elementUtilities.getMapType());
     return this;
-  },
+  }
 });
 
 // inherit from GeneralPropertiesParentView
 var MapTabLabelPanel = GeneralPropertiesParentView.extend({
-  initialize: function () {
+  initialize: function() {
     var self = this;
     // initialize undo-redo parameters
     self.params = {};
-    self.params.dynamicLabelSize = {
-      id: "dynamic-label-size-select",
-      type: "select",
-      property: "currentGeneralProperties.dynamicLabelSize",
-    };
+    self.params.dynamicLabelSize = {id: "dynamic-label-size-select", type: "select",
+      property: "currentGeneralProperties.dynamicLabelSize"};
 
-    self.params.showComplexName = {
-      id: "show-complex-name",
-      type: "checkbox",
-      property: "currentGeneralProperties.showComplexName",
-      update: self.applyUpdate,
-    };
+    self.params.showComplexName = {id: "show-complex-name", type: "checkbox",
+      property: "currentGeneralProperties.showComplexName", update: self.applyUpdate};
 
-    self.params.adjustNodeLabelFontSizeAutomatically = {
-      id: "adjust-node-label-font-size-automatically",
-      type: "checkbox",
-      property: "currentGeneralProperties.adjustNodeLabelFontSizeAutomatically",
-    };
+    self.params.adjustNodeLabelFontSizeAutomatically = {id: "adjust-node-label-font-size-automatically", type: "checkbox",
+      property: "currentGeneralProperties.adjustNodeLabelFontSizeAutomatically"};
 
-    self.params.fitLabelsToNodes = {
-      id: "fit-labels-to-nodes",
-      type: "checkbox",
-      property: "currentGeneralProperties.fitLabelsToNodes",
-    };
+    self.params.fitLabelsToNodes = {id: "fit-labels-to-nodes", type: "checkbox",
+      property: "currentGeneralProperties.fitLabelsToNodes"};
 
-    self.params.fitLabelsToInfoboxes = {
-      id: "fit-labels-to-infoboxes",
-      type: "checkbox",
-      property: "currentGeneralProperties.fitLabelsToInfoboxes",
-    };
+    self.params.fitLabelsToInfoboxes = {id: "fit-labels-to-infoboxes", type: "checkbox",
+      property: "currentGeneralProperties.fitLabelsToInfoboxes"};
 
-    $(document).on(
-      "change",
-      'select[name="dynamic-label-size"]',
-      function (evt) {
-        // use active cy instance
-        var cy = appUtilities.getActiveCy();
-
-        self.params.dynamicLabelSize.value = $(
-          "#dynamic-label-size-select option:selected"
-        ).val();
-        cy.undoRedo().do("changeMenu", self.params.dynamicLabelSize);
-        $("#dynamic-label-size-select").blur();
-        self.applyUpdate();
-      }
-    );
+    $(document).on("change", 'select[name="dynamic-label-size"]', function (evt) {
+
+      // use active cy instance
+      var cy = appUtilities.getActiveCy();
+
+      self.params.dynamicLabelSize.value = $('#dynamic-label-size-select option:selected').val();
+      cy.undoRedo().do("changeMenu", self.params.dynamicLabelSize);
+      $('#dynamic-label-size-select').blur();
+      self.applyUpdate();
+    });
 
     $(document).on("change", "#show-complex-name", function (evt) {
+
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.showComplexName.value =
-        $("#show-complex-name").prop("checked");
+      self.params.showComplexName.value = $('#show-complex-name').prop('checked');
       cy.undoRedo().do("changeMenu", self.params.showComplexName);
-      $("#show-complex-name").blur();
+      $('#show-complex-name').blur();
     });
 
-    $(document).on(
-      "change",
-      "#adjust-node-label-font-size-automatically",
-      function (evt) {
-        // use active cy instance
-        var cy = appUtilities.getActiveCy();
-
-        self.params.adjustNodeLabelFontSizeAutomatically.value = $(
-          "#adjust-node-label-font-size-automatically"
-        ).prop("checked");
-        cy.undoRedo().do(
-          "changeMenu",
-          self.params.adjustNodeLabelFontSizeAutomatically
-        );
-        $("#adjust-node-label-font-size-automatically").blur();
-        self.applyUpdate();
-      }
-    );
+    $(document).on("change", "#adjust-node-label-font-size-automatically", function (evt) {
+
+      // use active cy instance
+      var cy = appUtilities.getActiveCy();
+
+      self.params.adjustNodeLabelFontSizeAutomatically.value = $('#adjust-node-label-font-size-automatically').prop('checked');
+      cy.undoRedo().do("changeMenu", self.params.adjustNodeLabelFontSizeAutomatically);
+      $('#adjust-node-label-font-size-automatically').blur();
+      self.applyUpdate();
+    });
 
     $(document).on("change", "#fit-labels-to-nodes", function (evt) {
+
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.fitLabelsToNodes.value = $("#fit-labels-to-nodes").prop(
-        "checked"
-      );
+      self.params.fitLabelsToNodes.value = $('#fit-labels-to-nodes').prop('checked');
       cy.undoRedo().do("changeMenu", self.params.fitLabelsToNodes);
-      $("#fit-labels-to-nodes").blur();
+      $('#fit-labels-to-nodes').blur();
       self.applyUpdate();
     });
 
     $(document).on("change", "#fit-labels-to-infoboxes", function (evt) {
+
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.fitLabelsToInfoboxes.value = $(
-        "#fit-labels-to-infoboxes"
-      ).prop("checked");
+      self.params.fitLabelsToInfoboxes.value = $('#fit-labels-to-infoboxes').prop('checked');
       cy.undoRedo().do("changeMenu", self.params.fitLabelsToInfoboxes);
-      $("#fit-labels-to-infoboxes").blur();
+      $('#fit-labels-to-infoboxes').blur();
       self.applyUpdate();
     });
     $(document).on("click", "#map-label-default-button", function (evt) {
+
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
       var ur = cy.undoRedo();
       var actions = [];
-      self.params.dynamicLabelSize.value =
-        appUtilities.defaultGeneralProperties.dynamicLabelSize;
-      self.params.adjustNodeLabelFontSizeAutomatically.value =
-        appUtilities.defaultGeneralProperties.adjustNodeLabelFontSizeAutomatically;
-      self.params.fitLabelsToNodes.value =
-        appUtilities.defaultGeneralProperties.fitLabelsToNodes;
-      self.params.fitLabelsToInfoboxes.value =
-        appUtilities.defaultGeneralProperties.fitLabelsToInfoboxes;
-      self.params.showComplexName.value =
-        appUtilities.defaultGeneralProperties.showComplexName;
-
-      actions.push({ name: "changeMenu", param: self.params.dynamicLabelSize });
-      actions.push({
-        name: "changeMenu",
-        param: self.params.adjustNodeLabelFontSizeAutomatically,
-      });
-      actions.push({ name: "changeMenu", param: self.params.fitLabelsToNodes });
-      actions.push({
-        name: "changeMenu",
-        param: self.params.fitLabelsToInfoboxes,
-      });
-      actions.push({ name: "changeMenu", param: self.params.showComplexName });
+      self.params.dynamicLabelSize.value = appUtilities.defaultGeneralProperties.dynamicLabelSize;
+      self.params.adjustNodeLabelFontSizeAutomatically.value = appUtilities.defaultGeneralProperties.adjustNodeLabelFontSizeAutomatically;
+      self.params.fitLabelsToNodes.value = appUtilities.defaultGeneralProperties.fitLabelsToNodes;
+      self.params.fitLabelsToInfoboxes.value = appUtilities.defaultGeneralProperties.fitLabelsToInfoboxes;
+      self.params.showComplexName.value = appUtilities.defaultGeneralProperties.showComplexName;
+
+      actions.push({name: "changeMenu", param: self.params.dynamicLabelSize});
+      actions.push({name: "changeMenu", param: self.params.adjustNodeLabelFontSizeAutomatically});
+      actions.push({name: "changeMenu", param: self.params.fitLabelsToNodes});
+      actions.push({name: "changeMenu", param: self.params.fitLabelsToInfoboxes});
+      actions.push({name: "changeMenu", param: self.params.showComplexName});
       ur.do("batch", actions);
     });
   },
-  render: function () {
+  render: function() {
+
     // use the active cy instance
     var cy = appUtilities.getActiveCy();
 
     // get current general properties of cy
-    var currentGeneralProperties = appUtilities.getScratch(
-      cy,
-      "currentGeneralProperties"
-    );
+    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
 
     this.template = _.template($("#map-tab-label-template").html());
     this.$el.empty();
     this.$el.html(this.template(currentGeneralProperties));
     return this;
-  },
+  }
 });
 
 // inherit from GeneralPropertiesParentView
 var MapTabRearrangementPanel = GeneralPropertiesParentView.extend({
-  initialize: function () {
+  initialize: function() {
     var self = this;
     // initialize undo-redo parameters
     self.params = {};
-    self.params.recalculateLayoutOnComplexityManagement = {
-      id: "recalculate-layout-on-complexity-management",
-      type: "checkbox",
-      property:
-        "currentGeneralProperties.recalculateLayoutOnComplexityManagement",
-    };
+    self.params.recalculateLayoutOnComplexityManagement = {id: "recalculate-layout-on-complexity-management", type: "checkbox",
+      property: "currentGeneralProperties.recalculateLayoutOnComplexityManagement"};
 
-    self.params.rearrangeOnComplexityManagement = {
-      id: "rearrange-on-complexity-management",
-      type: "checkbox",
-      property: "currentGeneralProperties.rearrangeOnComplexityManagement",
-    };
+    self.params.rearrangeOnComplexityManagement = {id: "rearrange-on-complexity-management", type: "checkbox",
+      property: "currentGeneralProperties.rearrangeOnComplexityManagement"};
 
-    self.params.animateOnDrawingChanges = {
-      id: "animate-on-drawing-changes",
-      type: "checkbox",
-      property: "currentGeneralProperties.animateOnDrawingChanges",
-    };
+    self.params.animateOnDrawingChanges = {id: "animate-on-drawing-changes", type: "checkbox",
+      property: "currentGeneralProperties.animateOnDrawingChanges"};
 
-    $(document).on(
-      "change",
-      "#recalculate-layout-on-complexity-management",
-      function (evt) {
-        // use active cy instance
-        var cy = appUtilities.getActiveCy();
-
-        self.params.recalculateLayoutOnComplexityManagement.value = $(
-          "#recalculate-layout-on-complexity-management"
-        ).prop("checked");
-        cy.undoRedo().do(
-          "changeMenu",
-          self.params.recalculateLayoutOnComplexityManagement
-        );
-        $("#recalculate-layout-on-complexity-management").blur();
-      }
-    );
-
-    $(document).on(
-      "change",
-      "#rearrange-on-complexity-management",
-      function (evt) {
-        // use active cy instance
-        var cy = appUtilities.getActiveCy();
-
-        self.params.rearrangeOnComplexityManagement.value = $(
-          "#rearrange-on-complexity-management"
-        ).prop("checked");
-        cy.undoRedo().do(
-          "changeMenu",
-          self.params.rearrangeOnComplexityManagement
-        );
-        $("#rearrange-on-complexity-management").blur();
-      }
-    );
+    $(document).on("change", "#recalculate-layout-on-complexity-management", function (evt) {
+
+      // use active cy instance
+      var cy = appUtilities.getActiveCy();
+
+      self.params.recalculateLayoutOnComplexityManagement.value = $('#recalculate-layout-on-complexity-management').prop('checked');
+      cy.undoRedo().do("changeMenu", self.params.recalculateLayoutOnComplexityManagement);
+      $('#recalculate-layout-on-complexity-management').blur();
+    });
+
+    $(document).on("change", "#rearrange-on-complexity-management", function (evt) {
+
+      // use active cy instance
+      var cy = appUtilities.getActiveCy();
+
+      self.params.rearrangeOnComplexityManagement.value = $('#rearrange-on-complexity-management').prop('checked');
+      cy.undoRedo().do("changeMenu", self.params.rearrangeOnComplexityManagement);
+      $('#rearrange-on-complexity-management').blur();
+    });
 
     $(document).on("change", "#animate-on-drawing-changes", function (evt) {
+
       // use active cy instance
       var cy = appUtilities.getActiveCy();
 
-      self.params.animateOnDrawingChanges.value = $(
-        "#animate-on-drawing-changes"
-      ).prop("checked");
+      self.params.animateOnDrawingChanges.value = $('#animate-on-drawing-changes').prop('checked');
       cy.undoRedo().do("changeMenu", self.params.animateOnDrawingChanges);
-      $("#animate-on-drawing-changes").blur();
+      $('#animate-on-drawing-changes').blur();
     });
 
-    $(document).on(
-      "click",
-      "#map-rearrangement-default-button",
-      function (evt) {
-        // use active cy instance
-        var cy = appUtilities.getActiveCy();
-
-        var ur = cy.undoRedo();
-        var actions = [];
-        self.params.recalculateLayoutOnComplexityManagement.value =
-          appUtilities.defaultGeneralProperties.recalculateLayoutOnComplexityManagement;
-        self.params.rearrangeOnComplexityManagement.value =
-          appUtilities.defaultGeneralProperties.rearrangeOnComplexityManagement;
-        self.params.animateOnDrawingChanges.value =
-          appUtilities.defaultGeneralProperties.animateOnDrawingChanges;
-        actions.push({
-          name: "changeMenu",
-          param: self.params.recalculateLayoutOnComplexityManagement,
-        });
-        actions.push({
-          name: "changeMenu",
-          param: self.params.rearrangeOnComplexityManagement,
-        });
-        actions.push({
-          name: "changeMenu",
-          param: self.params.animateOnDrawingChanges,
-        });
-        ur.do("batch", actions);
-      }
-    );
+    $(document).on("click", "#map-rearrangement-default-button", function (evt) {
+
+      // use active cy instance
+      var cy = appUtilities.getActiveCy();
+
+      var ur = cy.undoRedo();
+      var actions = [];
+      self.params.recalculateLayoutOnComplexityManagement.value = appUtilities.defaultGeneralProperties.recalculateLayoutOnComplexityManagement;
+      self.params.rearrangeOnComplexityManagement.value = appUtilities.defaultGeneralProperties.rearrangeOnComplexityManagement;
+      self.params.animateOnDrawingChanges.value = appUtilities.defaultGeneralProperties.animateOnDrawingChanges;
+      actions.push({name: "changeMenu", param: self.params.recalculateLayoutOnComplexityManagement});
+      actions.push({name: "changeMenu", param: self.params.rearrangeOnComplexityManagement});
+      actions.push({name: "changeMenu", param: self.params.animateOnDrawingChanges});
+      ur.do("batch", actions);
+    });
   },
-  render: function () {
+  render: function() {
+
     // use the active cy instance
     var cy = appUtilities.getActiveCy();
 
     // get current general properties of cy
-    var currentGeneralProperties = appUtilities.getScratch(
-      cy,
-      "currentGeneralProperties"
-    );
+    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
 
     this.template = _.template($("#map-tab-rearrangement-template").html());
     this.$el.empty();
     this.$el.html(this.template(currentGeneralProperties));
 
     return this;
-  },
+  }
 });
 
 //The render functions for the experimental panel
 var experimentTabPanel = GeneralPropertiesParentView.extend({
-  initialize: function () {
+  initialize: function() {
     var self = this;
     self.params = {};
-    self.params.experimentDescription = {
-      id: "map-experiment",
-      type: "text",
-      property: "currentGeneralProperties.experimentDescription",
-    };
+    self.params.experimentDescription = {id: "map-experiment", type: "text",
+    property: "currentGeneralProperties.experimentDescription"};
 
-    $(document).on("click", "#load-exp-data-util", function (evt) {
-      $("#overlay-data").trigger("click");
+    $(document).on("click","#load-exp-data-util", function (evt) {
+        $("#overlay-data").trigger('click');
     });
 
-    $(document).on(
-      "click",
-      "#experiment-remove-all, #experiment-data-remove-all",
-      function (evt) {
-        var cy = appUtilities.getActiveCy();
-        var param = { self };
-        cy.undoRedo().do("updateRemoveAll", param);
-        self.render();
+    $(document).on("click", "#experiment-remove-all, #experiment-data-remove-all", function (evt) {
+      var cy = appUtilities.getActiveCy();
+      var param = {self};
+      cy.undoRedo().do("updateRemoveAll", param);
+      self.render();
+    });
+
+    $(document).on("click", "#experiment-hide-all, #experiment-data-hide-all", function (evt) {
+      var chiseInstance = appUtilities.getActiveChiseInstance();
+      var cy = appUtilities.getActiveCy();
+      var params = {};
+      params.self = self;
+      if(evt.target.value == 'true'){
+        cy.undoRedo().do("hideAll", params);
       }
-    );
-
-    $(document).on(
-      "click",
-      "#experiment-hide-all, #experiment-data-hide-all",
-      function (evt) {
-        var chiseInstance = appUtilities.getActiveChiseInstance();
-        var cy = appUtilities.getActiveCy();
-        var params = {};
-        params.self = self;
-        if (evt.target.value == "true") {
-          cy.undoRedo().do("hideAll", params);
-        } else {
-          cy.undoRedo().do("unhideAll", params);
-        }
+      else{
+        cy.undoRedo().do("unhideAll", params);
       }
-    );
+    });
 
     // Make the DIV element draggable https://www.w3schools.com/howto/howto_js_draggable.asp
     function makeElementDraggable(elmnt) {
-      var pos1 = 0,
-        pos2 = 0,
-        pos3 = 0,
-        pos4 = 0;
+      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
       if (document.getElementById(elmnt.id + "-header")) {
         // if present, the header is where you move the DIV from:
-        document.getElementById(elmnt.id + "-header").onmousedown =
-          dragMouseDown;
+        document.getElementById(elmnt.id + "-header").onmousedown = dragMouseDown;
       } else {
         // otherwise, move the DIV from anywhere inside the DIV:
         elmnt.onmousedown = dragMouseDown;
@@ -1464,8 +1142,8 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
         pos3 = e.clientX;
         pos4 = e.clientY;
         // set the element's new position:
-        elmnt.style.top = elmnt.offsetTop - pos2 + "px";
-        elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
+        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
       }
 
       function closeDragElement() {
@@ -1476,39 +1154,32 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
     }
 
     $(document).on("click", "#show-experiment-data-as-table", function () {
-      var divId = "draggable-exp-data-div";
-
-      if ($("#" + divId).is(":visible")) {
+      var divId = 'draggable-exp-data-div';
+      
+      if ($('#' + divId).is(':visible')) {
         return;
       }
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var data = chiseInstance.getExperimentalData().parsedDataMap;
       makeElementDraggable(document.getElementById(divId));
-      $("#" + divId).show();
-      fillTable4ExpData(document.getElementById("map-exp-table"), data);
-
-      $(document).off("keyup", "#search-exp-table");
-      $(document).on(
-        "keyup",
-        "#search-exp-table",
-        _.debounce(function () {
-          searchTable(
-            document.getElementById("map-exp-table"),
-            $("#search-exp-table").val()
-          );
-        }, 250)
-      );
+      $('#' + divId).show();
+      fillTable4ExpData(document.getElementById('map-exp-table'), data);
+
+      $(document).off('keyup', '#search-exp-table');
+      $(document).on('keyup', '#search-exp-table', _.debounce(function () {
+        searchTable(document.getElementById('map-exp-table'), $('#search-exp-table').val());
+      }, 250));
     });
 
     $(document).on("click", "#close-experiment-data-as-table", function () {
-      $("#draggable-exp-data-div").hide();
+      $('#draggable-exp-data-div').hide();
     });
 
     function fillTable4ExpData(elem, data) {
-      var headers = ["Node"];
+      var headers = ['Node'];
       var fileNames = {};
       var experiments = {};
-      var s = "";
+      var s = '';
 
       for (var node in data) {
         for (var exp in data[node]) {
@@ -1517,31 +1188,31 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
       }
 
       for (var h in experiments) {
-        var arr = h.split("?");
+        var arr = h.split('?');
         if (!fileNames[arr[0]]) {
           fileNames[arr[0]] = 1; // for colspan
         } else {
           fileNames[arr[0]] += 1; // for colspan
         }
-        headers.push(arr[arr.length - 1]);
+        headers.push(arr[arr.length-1]);
       }
 
       // insert file names as "headers" of html table
-      s += '<tr><th style="border: 0px;"></th>';
+      s += '<tr><th style="border: 0px;"></th>'
       for (let i in fileNames) {
         s += `<th class="text-center" style="border: 0px;" colspan="${fileNames[i]}">${i}</td>`;
       }
-      s += "</tr>";
+      s += '</tr>'
 
-      s += "<tr>";
+      s += '<tr>'
       for (let i = 0; i < headers.length; i++) {
-        var centerer = "";
+        var centerer = '';
         if (i > 0) {
           centerer = 'class="text-center"';
         }
-        s += `<th id="sortable-table-header-${i}" style="cursor: pointer;" title="sort" ${centerer}>${headers[i]}</th>`;
+        s += `<th id="sortable-table-header-${i}" style="cursor: pointer;" title="sort" ${centerer}>${headers[i]}</th>`
       }
-      s += "</tr>";
+      s += '</tr>'
 
       // insert table columns
       var nodeCnt = 0;
@@ -1550,33 +1221,33 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
         nodeLabels.push(node);
         s += `<tr id="hoverable-table-row-${nodeCnt++}"><td>${node}</td>`;
         for (var exp in experiments) {
-          s += `<td class="text-center">${data[node][exp] || "-"}</td>`;
+          s += `<td class="text-center">${data[node][exp] || '-'}</td>`
         }
-        s += "</tr>";
+        s += '</tr>';
       }
       elem.innerHTML = s;
 
       // change `let i` to `var i` to see the difference
       for (let i = 0; i < headers.length; i++) {
-        $(document).off("click", "#sortable-table-header-" + i);
-        $(document).on("click", "#sortable-table-header-" + i, function () {
-          sortTable(document.getElementById("map-exp-table"), i);
+        $(document).off('click', '#sortable-table-header-' + i);
+        $(document).on('click', '#sortable-table-header-' + i, function () {
+          sortTable(document.getElementById('map-exp-table'), i);
         });
       }
 
       for (let i = 0; i < nodeCnt; i++) {
-        $(document).off("mouseenter", "#hoverable-table-row-" + i);
-        $(document).off("mouseleave", "#hoverable-table-row-" + i);
-        $(document).on("mouseenter", "#hoverable-table-row-" + i, () => {
+        $(document).off('mouseenter', '#hoverable-table-row-' + i);
+        $(document).off('mouseleave', '#hoverable-table-row-' + i);
+        $(document).on('mouseenter', '#hoverable-table-row-' + i, () => {
           var cy = appUtilities.getActiveCy();
-          var vu = cy.viewUtilities("get");
-          var eles = cy.nodes().filter((x) => x.data("label") == nodeLabels[i]);
+          var vu = cy.viewUtilities('get');
+          var eles = cy.nodes().filter(x => x.data('label') == nodeLabels[i]);
           vu.highlight(eles, 2);
         });
-        $(document).on("mouseleave", "#hoverable-table-row-" + i, () => {
+        $(document).on('mouseleave', '#hoverable-table-row-' + i, () => {
           var cy = appUtilities.getActiveCy();
-          var vu = cy.viewUtilities("get");
-          var eles = cy.nodes().filter((x) => x.data("label") == nodeLabels[i]);
+          var vu = cy.viewUtilities('get');
+          var eles = cy.nodes().filter(x => x.data('label') == nodeLabels[i]);
           vu.removeHighlights(eles);
         });
       }
@@ -1587,18 +1258,18 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
         searchIdxes = [0];
       }
       filter = filter.toUpperCase();
-      var rows = table.getElementsByTagName("tr");
+      var rows = table.getElementsByTagName('tr');
 
       // Loop through all table rows, and hide those who don't match the search query
       for (var i = 0; i < rows.length; i++) {
         for (var j = 0; j < searchIdxes.length; j++) {
-          var col = rows[i].getElementsByTagName("td")[searchIdxes[0]];
+          var col = rows[i].getElementsByTagName('td')[searchIdxes[0]];
           if (col) {
             var txt = col.textContent || col.innerText;
             if (txt.toUpperCase().indexOf(filter) > -1) {
-              rows[i].style.display = "";
+              rows[i].style.display = '';
             } else {
-              rows[i].style.display = "none";
+              rows[i].style.display = 'none';
             }
           }
         }
@@ -1607,17 +1278,11 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
 
     // makes bubble sort based on column index in specified direction
     function sortTable(table, colIdx, dir) {
-      var rows,
-        switching,
-        i,
-        x,
-        y,
-        shouldSwitch,
-        switchcount = 0;
+      var rows, switching, i, x, y, shouldSwitch, switchcount = 0;
       switching = true;
       // Set the sorting direction to ascending:
       if (!dir) {
-        dir = "asc";
+        dir = 'asc';
       }
       if (!colIdx) {
         colIdx = 0;
@@ -1635,8 +1300,8 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
           shouldSwitch = false;
           /* Get the two elements you want to compare,
           one from current row and one from the next: */
-          x = rows[i].getElementsByTagName("td")[colIdx];
-          y = rows[i + 1].getElementsByTagName("td")[colIdx];
+          x = rows[i].getElementsByTagName('td')[colIdx];
+          y = rows[i + 1].getElementsByTagName('td')[colIdx];
           if (!x || !y) {
             continue;
           }
@@ -1650,15 +1315,15 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
           }
           /* Check if the two rows should switch place,
           based on the direction, asc or desc: */
-          if (dir == "asc") {
+          if (dir == 'asc') {
             // "-" is special character to show emmptiness
-            if (v1 > v2 || (v1 != "-" && v2 == "-")) {
+            if (v1 > v2 || (v1 != '-' && v2 == '-') ) {
               // If so, mark as a switch and break the loop:
               shouldSwitch = true;
               break;
             }
-          } else if (dir == "desc") {
-            if (v1 < v2 || (v1 == "-" && v2 != "-")) {
+          } else if (dir == 'desc') {
+            if (v1 < v2 || (v1 == '-' && v2 != '-')) {
               // If so, mark as a switch and break the loop:
               shouldSwitch = true;
               break;
@@ -1675,8 +1340,8 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
         } else {
           /* If no switching has been done AND the direction is "asc",
           set the direction to "desc" and run the while loop again. */
-          if (switchcount == 0 && dir == "asc") {
-            dir = "desc";
+          if (switchcount == 0 && dir == 'asc') {
+            dir = 'desc';
             switching = true;
           }
         }
@@ -1688,12 +1353,13 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
       var cy = appUtilities.getActiveCy();
       var fileName = this.id.substring(20);
       var subExperiments = $('[id^="experiment-vis-' + filename + '"]');
-      var params = { fileName };
+      var params = {fileName};
       params.self = self;
 
-      if (this.value === "true") {
+      if(this.value === "true"){
         cy.undoRedo().do("fileHide", params);
-      } else {
+      }
+      else{
         cy.undoRedo().do("fileUnhide", params);
       }
       self.render();
@@ -1703,23 +1369,24 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
       var cy = appUtilities.getActiveCy();
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var fileName = evt.target.id.substring(23);
-      var param = { fileName, self, document };
-      cy.undoRedo().do("deleteFile", param);
+      var param = {fileName, self, document};
+      cy.undoRedo().do("deleteFile", param); 
     });
     //change experiment visibilty
     $(document).on("click", '[id^="experiment-vis-"]', function (evt) {
       var expRep = evt.target.id.substring(15);
-      var index = expRep.indexOf("?");
-      var fileName = expRep.substring(0, index);
-      var expName = expRep.substring(index + 1);
-      var params = { fileName, expName };
+      var index = expRep.indexOf('?');
+      var fileName = expRep.substring(0,index);
+      var expName = expRep.substring(index+1);
+      var params = {fileName, expName};
       params.evt = evt;
-      params.self = self;
+      params.self=self;
       var cy = appUtilities.getActiveCy();
       var chiseInstance = appUtilities.getActiveChiseInstance();
-      if (evt.target.value === "true") {
+      if(evt.target.value === "true"){
         cy.undoRedo().do("hideExperimentPanel", params);
-      } else {
+      }
+      else{
         cy.undoRedo().do("unhideExperimentPanel", params);
       }
     });
@@ -1729,159 +1396,128 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var expRep = evt.target.id.substring(18);
       var cy = appUtilities.getActiveCy();
-      var index = expRep.indexOf("?");
-      var fileName = expRep.substring(0, index);
-      var expName = expRep.substring(index + 1);
-      var param = { self, fileName, expName, document };
+      var index = expRep.indexOf('?');
+      var fileName = expRep.substring(0,index);
+      var expName = expRep.substring(index+1);
+      var param = {self, fileName, expName, document}
       cy.undoRedo().do("updateExperimentPanel", param);
     });
   },
 
-  recalculate: function () {
+  recalculate: function(){
     var cy = appUtilities.getActiveCy();
     var chiseInstance = appUtilities.getActiveChiseInstance();
     var self = this;
     var fileNames = chiseInstance.getGroupedDataMap();
     param = self;
-    self.params.experimentDescription.value = fileNames;
+    self.params.experimentDescription.value =  fileNames;
     cy.undoRedo().do("expOnLoad", param);
   },
 
-  loadExperiment: function (params) {
+  loadExperiment: function(params){
     $(".validation-mode-tab").removeClass("active");
-    $("#inspector-map-tab a").tab("show");
-
-    var panels = $("#sbgn-inspector-map").find(".panel-heading");
-    for (var i = 0; i < panels.length; i++) {
-      if (
-        !$(panels[i]).hasClass("collapsed") &&
-        panels[i].id != "sbgn-inspector-map-properties-experiment-heading"
-      ) {
+    $('#inspector-map-tab a').tab('show');
+   
+    var panels =  $("#sbgn-inspector-map").find(".panel-heading");
+    for(var i = 0 ; i < panels.length; i++ ){
+      if(!$(panels[i]).hasClass("collapsed") && panels[i].id != "sbgn-inspector-map-properties-experiment-heading"){
         $(panels[i]).click();
       }
     }
-
-    if (
-      $("#sbgn-inspector-map-properties-experiment-heading").hasClass(
-        "collapsed"
-      )
-    ) {
-      $("#sbgn-inspector-map-properties-experiment-heading").click();
+  
+    if($("#sbgn-inspector-map-properties-experiment-heading").hasClass("collapsed")) {
+      $('#sbgn-inspector-map-properties-experiment-heading').click();
     }
     var cy = appUtilities.getActiveCy();
     var chiseInstance = appUtilities.getActiveChiseInstance();
-    var generalProperties = appUtilities.getScratch(
-      cy,
-      "currentGeneralProperties"
-    );
+    var generalProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
     var firstExperiment = generalProperties.experimentDescription;
     var self = this;
     var fileNames = chiseInstance.getGroupedDataMap();
     params.self = self;
-    self.params.experimentDescription.value = fileNames;
+    self.params.experimentDescription.value =  fileNames;
     params.document = document;
     params.value = generalProperties.mapColorScheme;
     params.scheme_type = generalProperties.mapColorSchemeStyle;
     params.self2 = appUtilities.colorSchemeInspectorView;
-
+   
     var ur = cy.undoRedo();
     var actions = [];
     //after the deleting the first experiemnt color schme should come back
-    if (
-      firstExperiment == undefined ||
-      Object.keys(firstExperiment).length == 0
-    ) {
-      var defaultColorScheme =
-        appUtilities.defaultGeneralProperties.mapColorScheme;
-      var defaultColorSchemeStyle =
-        appUtilities.defaultGeneralProperties.mapColorSchemeStyle;
-      actions = appUtilities.getActionsToApplyMapColorScheme(
-        defaultColorScheme,
-        defaultColorSchemeStyle,
-        appUtilities.colorSchemeInspectorView
-      );
-      actions.push({ name: "loadExperiment", param: params });
+    if(firstExperiment == undefined || Object.keys(firstExperiment).length == 0)
+    {
+      var defaultColorScheme = appUtilities.defaultGeneralProperties.mapColorScheme;
+      var defaultColorSchemeStyle = appUtilities.defaultGeneralProperties.mapColorSchemeStyle;
+      actions = appUtilities.getActionsToApplyMapColorScheme(defaultColorScheme, defaultColorSchemeStyle, appUtilities.colorSchemeInspectorView);
+      actions.push({name: "loadExperiment", param: params});
       ur.do("batch", actions);
-    } else {
+    }
+    else{
       cy.undoRedo().do("loadMore", params);
     }
   },
 
-  render: function () {
+  render: function() {
+   
     var cy = appUtilities.getActiveCy();
     var self = this;
     var chiseInstance = appUtilities.getActiveChiseInstance();
-    var currentGeneralProperties = appUtilities.getScratch(
-      cy,
-      "currentGeneralProperties"
-    );
+    var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
     self.template = _.template($("#map-tab-experiment-template").html());
-    currentGeneralProperties.experimentDescription =
-      chiseInstance.getGroupedDataMap();
+    currentGeneralProperties.experimentDescription = chiseInstance.getGroupedDataMap();
     this.$el.html(this.template(currentGeneralProperties));
-    var refreshButtons = function (param) {
+    var refreshButtons = function(param){
       var document = param.document;
       var visibleDataMapByExp = param.visibleDataMapByExp;
       var visibleFiles = param.visibleFiles;
       var fileDescription = param.fileDescription;
       var allVis = param.allVis;
       var fileTitle = param.fileTitle;
-      for (let i in visibleDataMapByExp) {
-        var index = i.indexOf("?");
-        var fileName = i.substring(0, index);
-        var expName = i.substring(index + 1);
-        var buttonName = "experiment-vis-" + fileName + "?" + expName;
+      for (let i in visibleDataMapByExp)
+      {
+        var index = i.indexOf('?');
+        var fileName = i.substring(0,index);
+        var expName = i.substring(index+1);
+        var buttonName = "experiment-vis-"+ fileName+ "?" + expName;
         var button = document.getElementById(buttonName);
-        if (button != null) {
-          if (
-            visibleDataMapByExp[i] == true ||
-            visibleDataMapByExp[i] === true
-          ) {
+        if(button != null){
+          if(visibleDataMapByExp[i] == true ||visibleDataMapByExp[i] === true ){
             button.value = "true";
             button.style.backgroundColor = "";
-          } else {
+          }
+          else {
             button.value = "false";
             button.style.backgroundColor = "#EAEAEA";
             button.style.color = "#FFFFFF";
           }
         }
       }
-      for (let i in visibleFiles) {
-        var buttonName = "experiment-file-vis-" + i;
-        var button = document.getElementById(buttonName);
+      for (let i in visibleFiles){
 
-        if (button != null) {
-          if (fileTitle[i] != undefined && fileDescription[i] != undefined) {
-            button.title =
-              button.title +
-              i +
-              " \x0A(" +
-              fileTitle[i].replace(/(\r\n|\n|\r)/gm, "") +
-              ":\x0A" +
-              fileDescription[i].replace(/(\r\n|\n|\r)/gm, "") +
-              ")";
-          } else if (fileDescription[i] != undefined) {
-            button.title =
-              button.title +
-              i +
-              " \x0A(" +
-              fileDescription[i].replace(/(\r\n|\n|\r)/gm, "") +
-              ")";
-          } else if (fileTitle[i] != undefined) {
-            button.title =
-              button.title +
-              i +
-              " \x0A(" +
-              fileTitle[i].replace(/(\r\n|\n|\r)/gm, "") +
-              ")";
-          } else {
+        var buttonName = "experiment-file-vis-"+ i;
+        var button = document.getElementById(buttonName);
+        
+        if(button != null){
+          if(fileTitle[i] != undefined && fileDescription[i] != undefined)
+          {
+            button.title = button.title + i + " \x0A(" + fileTitle[i].replace(/(\r\n|\n|\r)/gm,"") + ":\x0A" + fileDescription[i].replace(/(\r\n|\n|\r)/gm,"") + ")";
+          }
+          else if(fileDescription[i] != undefined){
+            button.title = button.title + i + " \x0A(" + fileDescription[i].replace(/(\r\n|\n|\r)/gm,"") + ")";
+          }
+          else if(fileTitle[i] != undefined)
+          { 
+            button.title = button.title + i + " \x0A(" + fileTitle[i].replace(/(\r\n|\n|\r)/gm,"") + ")"; 
+          } 
+          else{
             button.title = button.title + i;
           }
-
-          if (visibleFiles[i] == true || visibleFiles[i] === true) {
+       
+          if(visibleFiles[i] == true ||visibleFiles[i] === true ){
             button.value = "true";
             button.style.backgroundColor = "";
-          } else {
+          }
+          else {
             button.value = "false";
             button.style.backgroundColor = "#EAEAEA";
             button.style.color = "#FFFFFF";
@@ -1892,11 +1528,12 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
       var buttonName = "experiment-hide-all";
       var button = document.getElementById(buttonName);
 
-      if (button != null) {
-        if (allVis) {
+      if(button != null){
+        if(allVis){
           button.value = "true";
           button.style.backgroundColor = "";
-        } else {
+        }
+        else {
           button.value = "false";
           button.style.backgroundColor = "#EAEAEA";
           button.style.color = "#FFFFFF";
@@ -1905,32 +1542,30 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
 
       buttonName = "experiment-data-hide-all";
       button = document.getElementById(buttonName);
-      if (button != null) {
-        if (allVis) {
+      if(button != null){
+        if(allVis){
           button.value = "true";
-        } else {
-          button.value = "false";
+         
+        }
+        else {
+          button.value = "false";        
         }
       }
-    };
+    }
     var experimentalParams = chiseInstance.getExperimentalData();
     experimentalParams.document = document;
     refreshButtons(experimentalParams);
     //chiseInstance.buttonUpdate(document);
-    if (
-      currentGeneralProperties.experimentDescription.length > 0 ||
-      Object.entries(currentGeneralProperties.experimentDescription).length != 0
-    ) {
-      //document.getElementById('sbgn-inspector-map-color-scheme').style.visibility = "hidden";
-      document.getElementById("sbgn-inspector-map-color-scheme").style.display =
-        "none";
-    } else {
-      document.getElementById("sbgn-inspector-map-color-scheme").style.display =
-        "";
-      // document.getElementById('sbgn-inspector-map-color-scheme').style.visibility = "initial";
+    if( currentGeneralProperties.experimentDescription.length  > 0 || Object.entries(currentGeneralProperties.experimentDescription).length != 0){
+     //document.getElementById('sbgn-inspector-map-color-scheme').style.visibility = "hidden";
+     document.getElementById('sbgn-inspector-map-color-scheme').style.display = "none";
+    }
+    else{
+    document.getElementById('sbgn-inspector-map-color-scheme').style.display = "";
+    // document.getElementById('sbgn-inspector-map-color-scheme').style.visibility = "initial";
     }
     return this;
-  },
+  }
 });
 
 /**
@@ -1977,14 +1612,16 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({
   }
 });*/
 
-String.prototype.replaceAll = function (search, replace) {
-  //if replace is not sent, return original string otherwise it will
-  //replace search string with 'undefined'.
-  if (replace === undefined) {
-    return this.toString();
-  }
 
-  return this.replace(new RegExp("[" + search + "]", "g"), replace);
+String.prototype.replaceAll = function(search, replace)
+{
+    //if replace is not sent, return original string otherwise it will
+    //replace search string with 'undefined'.
+    if (replace === undefined) {
+        return this.toString();
+    }
+
+    return this.replace(new RegExp('[' + search + ']', 'g'), replace);
 };
 
 //Global variable used to check which PathwayCommon dialog was open recently
@@ -1997,7 +1634,7 @@ var PCdialog = "";
 var NeighborhoodQueryView = Backbone.View.extend({
   defaultQueryParameters: {
     geneSymbols: "",
-    lengthLimit: 1,
+    lengthLimit: 1
   },
   currentQueryParameters: null,
   initialize: function () {
@@ -2010,899 +1647,689 @@ var NeighborhoodQueryView = Backbone.View.extend({
     this.currentQueryParameters = _.clone(this.defaultQueryParameters);
   },
   render: function () {
+
     var self = this;
     self.template = _.template($("#query-neighborhood-template").html());
     self.template = self.template(self.currentQueryParameters);
     $(self.el).html(self.template);
 
-    $(self.el).modal("show");
+    $(self.el).modal('show');
     PCdialog = "Neighborhood";
 
-    $(document)
-      .off("click", "#save-query-neighborhood")
-      .on("click", "#save-query-neighborhood", function (evt) {
-        // use active chise instance
-        var chiseInstance = appUtilities.getActiveChiseInstance();
+    $(document).off("click", "#save-query-neighborhood").on("click", "#save-query-neighborhood", function (evt) {
+
+      // use active chise instance
+      var chiseInstance = appUtilities.getActiveChiseInstance();
 
-        // use the associated cy instance
-        var cy = chiseInstance.getCy();
+      // use the associated cy instance
+      var cy = chiseInstance.getCy();
 
-        self.currentQueryParameters.geneSymbols = document.getElementById(
-          "query-neighborhood-gene-symbols"
-        ).value;
-        self.currentQueryParameters.lengthLimit = Number(
-          document.getElementById("query-neighborhood-length-limit").value
-        );
+      self.currentQueryParameters.geneSymbols = document.getElementById("query-neighborhood-gene-symbols").value;
+      self.currentQueryParameters.lengthLimit = Number(document.getElementById("query-neighborhood-length-limit").value);
 
-        var geneSymbols = self.currentQueryParameters.geneSymbols.trim();
-        if (geneSymbols.length === 0) {
+      var geneSymbols = self.currentQueryParameters.geneSymbols.trim();
+      if (geneSymbols.length === 0) {
           document.getElementById("query-neighborhood-gene-symbols").focus();
           return;
-        }
-        // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
-        geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
-        if (geneSymbols.length === 0) {
-          $(self.el).modal("toggle");
-          new PromptInvalidQueryView({
-            el: "#prompt-invalidQuery-table",
-          }).render();
-          return;
-        }
-        if (self.currentQueryParameters.lengthLimit > 2) {
-          $(self.el).modal("toggle");
-          new PromptInvalidLengthLimitView({
-            el: "#prompt-invalidLengthLimit-table",
-          }).render();
-          document.getElementById("query-neighborhood-length-limit").focus();
-          return;
-        }
+      }
+      // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
+      geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
+      if (geneSymbols.length === 0) {
+        $(self.el).modal('toggle');
+        new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+        return;
+      }
+      if (self.currentQueryParameters.lengthLimit > 2) {
+        $(self.el).modal('toggle');
+        new PromptInvalidLengthLimitView({el: '#prompt-invalidLengthLimit-table'}).render();
+        document.getElementById("query-neighborhood-length-limit").focus();
+        return;
+      }
+
+      var queryURL = "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=NEIGHBORHOOD&limit="
+          + self.currentQueryParameters.lengthLimit;
+      var geneSymbolsArray = geneSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" ");
 
-        var queryURL =
-          "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=NEIGHBORHOOD&limit=" +
-          self.currentQueryParameters.lengthLimit;
-        var geneSymbolsArray = geneSymbols
-          .replaceAll("\n", " ")
-          .replaceAll("\t", " ")
-          .split(" ");
-
-        var filename = "";
-        var sources = "";
-        for (var i = 0; i < geneSymbolsArray.length; i++) {
-          var currentGeneSymbol = geneSymbolsArray[i];
-          if (
-            currentGeneSymbol.length == 0 ||
-            currentGeneSymbol == " " ||
-            currentGeneSymbol == "\n" ||
-            currentGeneSymbol == "\t"
-          ) {
+      var filename = "";
+      var sources = "";
+      for (var i = 0; i < geneSymbolsArray.length; i++) {
+        var currentGeneSymbol = geneSymbolsArray[i];
+        if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' '
+            || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') {
             continue;
-          }
-          sources = sources + "&source=" + currentGeneSymbol;
+        }
+        sources = sources + "&source=" + currentGeneSymbol;
 
-          if (filename == "") {
+        if (filename == '') {
             filename = currentGeneSymbol;
-          } else {
-            filename = filename + "_" + currentGeneSymbol;
-          }
+        } else {
+            filename = filename + '_' + currentGeneSymbol;
         }
-        filename = filename + "_NEIGHBORHOOD.nwt";
-        queryURL = queryURL + sources;
-
-        if (cy.nodes().length == 0) {
-          chiseInstance.startSpinner("neighborhood-spinner");
-          var currentGeneralProperties = appUtilities.getScratch(
-            cy,
-            "currentGeneralProperties"
-          );
-          var currentInferNestingOnLoad =
-            currentGeneralProperties.inferNestingOnLoad;
-          var currentLayoutProperties = appUtilities.getScratch(
-            cy,
-            "currentLayoutProperties"
-          );
+      }
+      filename = filename + '_NEIGHBORHOOD.nwt';
+      queryURL = queryURL + sources;
+
+      if(cy.nodes().length == 0){
+
+        chiseInstance.startSpinner('neighborhood-spinner');
+        var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+        var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
+        var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
+        
+        $.ajax({
+          type: 'get',
+          url: "/utilities/testURL",
+          data: {url: queryURL},
+          success: function(data){
+            if (!data.error && data.response.statusCode == 200 && data.response.body) {
+              var xml = $.parseXML(data.response.body);
+              $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
+              currentGeneralProperties.inferNestingOnLoad = false;
+              chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
+              currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
+              chiseInstance.endSpinner('neighborhood-spinner');
+              $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
+            }
+            else {
+              new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+              chiseInstance.endSpinner('neighborhood-spinner');
+            }
+          },
+          error: function(xhr, options, err){
+            new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+            chiseInstance.endSpinner('neighborhood-spinner');
+          }
+        });
+
+        $(self.el).modal('toggle');
+
+      }
+      else{
+
+        new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){
+
+          chiseInstance.startSpinner('neighborhood-spinner');
+          var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+          var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
+          var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');        
 
           $.ajax({
-            type: "get",
+            type: 'get',
             url: "/utilities/testURL",
-            data: { url: queryURL },
-            success: function (data) {
-              if (
-                !data.error &&
-                data.response.statusCode == 200 &&
-                data.response.body
-              ) {
+            data: {url: queryURL},
+            success: function(data){
+              if (!data.error && data.response.statusCode == 200 && data.response.body) {
                 var xml = $.parseXML(data.response.body);
-                $(document).trigger("sbgnvizLoadFile", [filename, cy]);
+                $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
                 currentGeneralProperties.inferNestingOnLoad = false;
-                chiseInstance.updateGraph(
-                  chiseInstance.convertSbgnmlToJson(xml),
-                  undefined,
-                  currentLayoutProperties
-                );
-                currentGeneralProperties.inferNestingOnLoad =
-                  currentInferNestingOnLoad;
-                chiseInstance.endSpinner("neighborhood-spinner");
-                $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
-              } else {
-                new PromptInvalidQueryView({
-                  el: "#prompt-invalidQuery-table",
-                }).render();
-                chiseInstance.endSpinner("neighborhood-spinner");
+                chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
+                currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
+                chiseInstance.endSpinner('neighborhood-spinner');
+                $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
+              }
+              else {
+                new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                chiseInstance.endSpinner('neighborhood-spinner');
               }
             },
-            error: function (xhr, options, err) {
-              new PromptInvalidQueryView({
-                el: "#prompt-invalidQuery-table",
-              }).render();
-              chiseInstance.endSpinner("neighborhood-spinner");
-            },
+            error: function(xhr, options, err){
+              new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+              chiseInstance.endSpinner('neighborhood-spinner');
+            }
           });
 
-          $(self.el).modal("toggle");
-        } else {
-          new PromptConfirmationView({
-            el: "#prompt-confirmation-table",
-          }).render(function () {
-            chiseInstance.startSpinner("neighborhood-spinner");
-            var currentGeneralProperties = appUtilities.getScratch(
-              cy,
-              "currentGeneralProperties"
-            );
-            var currentInferNestingOnLoad =
-              currentGeneralProperties.inferNestingOnLoad;
-            var currentLayoutProperties = appUtilities.getScratch(
-              cy,
-              "currentLayoutProperties"
-            );
-
-            $.ajax({
-              type: "get",
-              url: "/utilities/testURL",
-              data: { url: queryURL },
-              success: function (data) {
-                if (
-                  !data.error &&
-                  data.response.statusCode == 200 &&
-                  data.response.body
-                ) {
-                  var xml = $.parseXML(data.response.body);
-                  $(document).trigger("sbgnvizLoadFile", [filename, cy]);
-                  currentGeneralProperties.inferNestingOnLoad = false;
-                  chiseInstance.updateGraph(
-                    chiseInstance.convertSbgnmlToJson(xml),
-                    undefined,
-                    currentLayoutProperties
-                  );
-                  currentGeneralProperties.inferNestingOnLoad =
-                    currentInferNestingOnLoad;
-                  chiseInstance.endSpinner("neighborhood-spinner");
-                  $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
-                } else {
-                  new PromptInvalidQueryView({
-                    el: "#prompt-invalidQuery-table",
-                  }).render();
-                  chiseInstance.endSpinner("neighborhood-spinner");
-                }
-              },
-              error: function (xhr, options, err) {
-                new PromptInvalidQueryView({
-                  el: "#prompt-invalidQuery-table",
-                }).render();
-                chiseInstance.endSpinner("neighborhood-spinner");
-              },
-            });
-
-            $(self.el).modal("toggle");
-          });
-        }
-      });
+          $(self.el).modal('toggle');
 
-    $(document)
-      .off("click", "#cancel-query-neighborhood")
-      .on("click", "#cancel-query-neighborhood", function (evt) {
-        $(self.el).modal("toggle");
-      });
+        });
+
+      }
+
+    });
+
+    $(document).off("click", "#cancel-query-neighborhood").on("click", "#cancel-query-neighborhood", function (evt) {
+      $(self.el).modal('toggle');
+    });
 
     return this;
-  },
+  }
 });
 
 /**
  * Paths Between Query view for the Sample Application.
  */
 var PathsBetweenQueryView = Backbone.View.extend({
-  defaultQueryParameters: {
-    geneSymbols: "",
-    lengthLimit: 1,
-  },
-  currentQueryParameters: null,
-  initialize: function () {
-    var self = this;
-    self.copyProperties();
-    self.template = _.template($("#query-pathsbetween-template").html());
-    self.template = self.template(self.currentQueryParameters);
-  },
-  copyProperties: function () {
-    this.currentQueryParameters = _.clone(this.defaultQueryParameters);
-  },
-  render: function () {
-    var self = this;
-    self.template = _.template($("#query-pathsbetween-template").html());
-    self.template = self.template(self.currentQueryParameters);
-    $(self.el).html(self.template);
+    defaultQueryParameters: {
+        geneSymbols: "",
+        lengthLimit: 1
+    },
+    currentQueryParameters: null,
+    initialize: function () {
+        var self = this;
+        self.copyProperties();
+        self.template = _.template($("#query-pathsbetween-template").html());
+        self.template = self.template(self.currentQueryParameters);
+    },
+    copyProperties: function () {
+        this.currentQueryParameters = _.clone(this.defaultQueryParameters);
+    },
+    render: function () {
 
-    $(self.el).modal("show");
-    PCdialog = "PathsBetween";
+        var self = this;
+        self.template = _.template($("#query-pathsbetween-template").html());
+        self.template = self.template(self.currentQueryParameters);
+        $(self.el).html(self.template);
 
-    $(document)
-      .off("click", "#save-query-pathsbetween")
-      .on("click", "#save-query-pathsbetween", function (evt) {
-        // use active chise instance
-        var chiseInstance = appUtilities.getActiveChiseInstance();
+        $(self.el).modal('show');
+        PCdialog = "PathsBetween";
 
-        // use the associated cy instance
-        var cy = chiseInstance.getCy();
+        $(document).off("click", "#save-query-pathsbetween").on("click", "#save-query-pathsbetween", function (evt) {
 
-        self.currentQueryParameters.geneSymbols = document.getElementById(
-          "query-pathsbetween-gene-symbols"
-        ).value;
-        self.currentQueryParameters.lengthLimit = Number(
-          document.getElementById("query-pathsbetween-length-limit").value
-        );
+            // use active chise instance
+            var chiseInstance = appUtilities.getActiveChiseInstance();
 
-        var geneSymbols = self.currentQueryParameters.geneSymbols.trim();
-        if (geneSymbols.length === 0) {
-          document.getElementById("query-pathsbetween-gene-symbols").focus();
-          return;
-        }
-        // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
-        geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
-        if (geneSymbols.length === 0) {
-          $(self.el).modal("toggle");
-          new PromptInvalidQueryView({
-            el: "#prompt-invalidQuery-table",
-          }).render();
-          return;
-        }
-        if (self.currentQueryParameters.lengthLimit > 3) {
-          $(self.el).modal("toggle");
-          new PromptInvalidLengthLimitView({
-            el: "#prompt-invalidLengthLimit-table",
-          }).render();
-          document.getElementById("query-pathsbetween-length-limit").focus();
-          return;
-        }
+            // use the associated cy instance
+            var cy = chiseInstance.getCy();
 
-        var queryURL =
-          "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=PATHSBETWEEN&limit=" +
-          self.currentQueryParameters.lengthLimit;
-        var geneSymbolsArray = geneSymbols
-          .replaceAll("\n", " ")
-          .replaceAll("\t", " ")
-          .split(" ");
-
-        var filename = "";
-        var sources = "";
-        for (var i = 0; i < geneSymbolsArray.length; i++) {
-          var currentGeneSymbol = geneSymbolsArray[i];
-          if (
-            currentGeneSymbol.length == 0 ||
-            currentGeneSymbol == " " ||
-            currentGeneSymbol == "\n" ||
-            currentGeneSymbol == "\t"
-          ) {
-            continue;
-          }
-          sources = sources + "&source=" + currentGeneSymbol;
+            self.currentQueryParameters.geneSymbols = document.getElementById("query-pathsbetween-gene-symbols").value;
+            self.currentQueryParameters.lengthLimit = Number(document.getElementById("query-pathsbetween-length-limit").value);
 
-          if (filename == "") {
-            filename = currentGeneSymbol;
-          } else {
-            filename = filename + "_" + currentGeneSymbol;
-          }
-        }
-        filename = filename + "_PATHSBETWEEN.nwt";
-        queryURL = queryURL + sources;
-
-        if (cy.nodes().length == 0) {
-          chiseInstance.startSpinner("paths-between-spinner");
-          var currentGeneralProperties = appUtilities.getScratch(
-            cy,
-            "currentGeneralProperties"
-          );
-          var currentInferNestingOnLoad =
-            currentGeneralProperties.inferNestingOnLoad;
-          var currentLayoutProperties = appUtilities.getScratch(
-            cy,
-            "currentLayoutProperties"
-          );
+            var geneSymbols = self.currentQueryParameters.geneSymbols.trim();
+            if (geneSymbols.length === 0) {
+                document.getElementById("query-pathsbetween-gene-symbols").focus();
+                return;
+            }
+            // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
+            geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
+            if (geneSymbols.length === 0) {
+                $(self.el).modal('toggle');
+                new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                return;
+            }
+            if (self.currentQueryParameters.lengthLimit > 3) {
+                $(self.el).modal('toggle');
+                new PromptInvalidLengthLimitView({el: '#prompt-invalidLengthLimit-table'}).render();
+                document.getElementById("query-pathsbetween-length-limit").focus();
+                return;
+            }
 
-          $.ajax({
-            type: "get",
-            url: "/utilities/testURL",
-            data: { url: queryURL },
-            success: function (data) {
-              if (
-                !data.error &&
-                data.response.statusCode == 200 &&
-                data.response.body
-              ) {
-                var xml = $.parseXML(data.response.body);
-                $(document).trigger("sbgnvizLoadFile", [filename, cy]);
-                currentGeneralProperties.inferNestingOnLoad = false;
-                chiseInstance.updateGraph(
-                  chiseInstance.convertSbgnmlToJson(xml),
-                  undefined,
-                  currentLayoutProperties
-                );
-                currentGeneralProperties.inferNestingOnLoad =
-                  currentInferNestingOnLoad;
-                chiseInstance.endSpinner("paths-between-spinner");
-                $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
-              } else {
-                new PromptInvalidQueryView({
-                  el: "#prompt-invalidQuery-table",
-                }).render();
-                chiseInstance.endSpinner("paths-between-spinner");
-              }
-            },
-            error: function (xhr, options, err) {
-              new PromptInvalidQueryView({
-                el: "#prompt-invalidQuery-table",
-              }).render();
-              chiseInstance.endSpinner("paths-between-spinner");
-            },
-          });
+            var queryURL = "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=PATHSBETWEEN&limit="
+                + self.currentQueryParameters.lengthLimit;
+            var geneSymbolsArray = geneSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" ");
+
+            var filename = "";
+            var sources = "";
+            for (var i = 0; i < geneSymbolsArray.length; i++) {
+                var currentGeneSymbol = geneSymbolsArray[i];
+                if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' '
+                    || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') {
+                    continue;
+                }
+                sources = sources + "&source=" + currentGeneSymbol;
 
-          $(self.el).modal("toggle");
-        } else {
-          new PromptConfirmationView({
-            el: "#prompt-confirmation-table",
-          }).render(function () {
-            chiseInstance.startSpinner("paths-between-spinner");
-            var currentGeneralProperties = appUtilities.getScratch(
-              cy,
-              "currentGeneralProperties"
-            );
-            var currentInferNestingOnLoad =
-              currentGeneralProperties.inferNestingOnLoad;
-            var currentLayoutProperties = appUtilities.getScratch(
-              cy,
-              "currentLayoutProperties"
-            );
-
-            $.ajax({
-              type: "get",
-              url: "/utilities/testURL",
-              data: { url: queryURL },
-              success: function (data) {
-                if (
-                  !data.error &&
-                  data.response.statusCode == 200 &&
-                  data.response.body
-                ) {
-                  var xml = $.parseXML(data.response.body);
-                  $(document).trigger("sbgnvizLoadFile", [filename, cy]);
-                  currentGeneralProperties.inferNestingOnLoad = false;
-                  chiseInstance.updateGraph(
-                    chiseInstance.convertSbgnmlToJson(xml),
-                    undefined,
-                    currentLayoutProperties
-                  );
-                  currentGeneralProperties.inferNestingOnLoad =
-                    currentInferNestingOnLoad;
-                  chiseInstance.endSpinner("paths-between-spinner");
-                  $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
+                if (filename == '') {
+                    filename = currentGeneSymbol;
                 } else {
-                  new PromptInvalidQueryView({
-                    el: "#prompt-invalidQuery-table",
-                  }).render();
-                  chiseInstance.endSpinner("paths-between-spinner");
+                    filename = filename + '_' + currentGeneSymbol;
                 }
-              },
-              error: function (xhr, options, err) {
-                new PromptInvalidQueryView({
-                  el: "#prompt-invalidQuery-table",
-                }).render();
-                chiseInstance.endSpinner("paths-between-spinner");
-              },
-            });
-
-            $(self.el).modal("toggle");
-          });
-        }
-      });
+            }
+            filename = filename + '_PATHSBETWEEN.nwt';
+            queryURL = queryURL + sources;
+
+            if(cy.nodes().length == 0){
+
+              chiseInstance.startSpinner('paths-between-spinner');
+              var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+              var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
+              var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');   
+
+              $.ajax({
+                type: 'get',
+                url: "/utilities/testURL",
+                data: {url: queryURL},
+                success: function(data){
+                  if (!data.error && data.response.statusCode == 200 && data.response.body) {
+                    var xml = $.parseXML(data.response.body);
+                    $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
+                    currentGeneralProperties.inferNestingOnLoad = false;
+                    chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
+                    currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
+                    chiseInstance.endSpinner('paths-between-spinner');
+                    $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
+                  }
+                  else {
+                    new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                    chiseInstance.endSpinner('paths-between-spinner');
+                  }
+                },
+                error: function(xhr, options, err){
+                  new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                  chiseInstance.endSpinner('paths-between-spinner');
+                }
+              });
 
-    $(document)
-      .off("click", "#cancel-query-pathsbetween")
-      .on("click", "#cancel-query-pathsbetween", function (evt) {
-        $(self.el).modal("toggle");
-      });
+              $(self.el).modal('toggle');
 
-    return this;
-  },
+            }
+            else{
+
+              new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){
+
+                chiseInstance.startSpinner('paths-between-spinner');
+                var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+                var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
+                var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); 
+
+                $.ajax({
+                  type: 'get',
+                  url: "/utilities/testURL",
+                  data: {url: queryURL},
+                  success: function(data){
+                    if (!data.error && data.response.statusCode == 200 && data.response.body) {
+                      var xml = $.parseXML(data.response.body);
+                      $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
+                      currentGeneralProperties.inferNestingOnLoad = false;
+                      chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
+                      currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
+                      chiseInstance.endSpinner('paths-between-spinner');
+                      $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
+                    }
+                    else {
+                      new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                      chiseInstance.endSpinner('paths-between-spinner');
+                    }
+                  },
+                  error: function(xhr, options, err){
+                    new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                    chiseInstance.endSpinner('paths-between-spinner');
+                  }
+                });
+
+                $(self.el).modal('toggle');
+
+              });
+
+            }
+
+        });
+
+        $(document).off("click", "#cancel-query-pathsbetween").on("click", "#cancel-query-pathsbetween", function (evt) {
+            $(self.el).modal('toggle');
+        });
+
+        return this;
+    }
 });
 
 /**
  * Paths From To Query view for the Sample Application.
  */
 var PathsFromToQueryView = Backbone.View.extend({
-  defaultQueryParameters: {
-    sourceSymbols: "",
-    targetSymbols: "",
-    lengthLimit: 1,
-  },
-  currentQueryParameters: null,
-  initialize: function () {
-    var self = this;
-    self.copyProperties();
-    self.template = _.template($("#query-pathsfromto-template").html());
-    self.template = self.template(self.currentQueryParameters);
-  },
-  copyProperties: function () {
-    this.currentQueryParameters = _.clone(this.defaultQueryParameters);
-  },
-  render: function () {
-    var self = this;
-    self.template = _.template($("#query-pathsfromto-template").html());
-    self.template = self.template(self.currentQueryParameters);
-    $(self.el).html(self.template);
+    defaultQueryParameters: {
+        sourceSymbols: "",
+        targetSymbols: "",
+        lengthLimit: 1
+    },
+    currentQueryParameters: null,
+    initialize: function () {
+        var self = this;
+        self.copyProperties();
+        self.template = _.template($("#query-pathsfromto-template").html());
+        self.template = self.template(self.currentQueryParameters);
+    },
+    copyProperties: function () {
+        this.currentQueryParameters = _.clone(this.defaultQueryParameters);
+    },
+    render: function () {
 
-    $(self.el).modal("show");
-    PCdialog = "PathsFromTo";
-
-    $(document)
-      .off("click", "#save-query-pathsfromto")
-      .on("click", "#save-query-pathsfromto", function (evt) {
-        // use active chise instance
-        var chiseInstance = appUtilities.getActiveChiseInstance();
-
-        // use the associated cy instance
-        var cy = chiseInstance.getCy();
-
-        self.currentQueryParameters.sourceSymbols = document.getElementById(
-          "query-pathsfromto-source-symbols"
-        ).value;
-        self.currentQueryParameters.targetSymbols = document.getElementById(
-          "query-pathsfromto-target-symbols"
-        ).value;
-        self.currentQueryParameters.lengthLimit = Number(
-          document.getElementById("query-pathsfromto-length-limit").value
-        );
-
-        var sourceSymbols = self.currentQueryParameters.sourceSymbols.trim();
-        if (sourceSymbols.length === 0) {
-          document.getElementById("query-pathsfromto-source-symbols").focus();
-          return;
-        }
-        // sourceSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
-        sourceSymbols = sourceSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
-        if (sourceSymbols.length === 0) {
-          $(self.el).modal("toggle");
-          new PromptInvalidQueryView({
-            el: "#prompt-invalidQuery-table",
-          }).render();
-          return;
-        }
+        var self = this;
+        self.template = _.template($("#query-pathsfromto-template").html());
+        self.template = self.template(self.currentQueryParameters);
+        $(self.el).html(self.template);
 
-        var targetSymbols = self.currentQueryParameters.targetSymbols.trim();
-        if (targetSymbols.length === 0) {
-          document.getElementById("query-pathsfromto-target-symbols").focus();
-          return;
-        }
-        // targetSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
-        targetSymbols = targetSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
-        if (targetSymbols.length === 0) {
-          $(self.el).modal("toggle");
-          new PromptInvalidQueryView({
-            el: "#prompt-invalidQuery-table",
-          }).render();
-          return;
-        }
+        $(self.el).modal('show');
+        PCdialog = "PathsFromTo";
 
-        if (self.currentQueryParameters.lengthLimit > 3) {
-          $(self.el).modal("toggle");
-          new PromptInvalidLengthLimitView({
-            el: "#prompt-invalidLengthLimit-table",
-          }).render();
-          document.getElementById("query-pathsfromto-length-limit").focus();
-          return;
-        }
+        $(document).off("click", "#save-query-pathsfromto").on("click", "#save-query-pathsfromto", function (evt) {
 
-        var queryURL =
-          "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=PATHSFROMTO&limit=" +
-          self.currentQueryParameters.lengthLimit;
-        var sourceSymbolsArray = sourceSymbols
-          .replaceAll("\n", " ")
-          .replaceAll("\t", " ")
-          .split(" ");
-        var targetSymbolsArray = targetSymbols
-          .replaceAll("\n", " ")
-          .replaceAll("\t", " ")
-          .split(" ");
-
-        var filename = "";
-        var sources = "";
-        var targets = "";
-        for (var i = 0; i < sourceSymbolsArray.length; i++) {
-          var currentGeneSymbol = sourceSymbolsArray[i];
-          if (
-            currentGeneSymbol.length == 0 ||
-            currentGeneSymbol == " " ||
-            currentGeneSymbol == "\n" ||
-            currentGeneSymbol == "\t"
-          ) {
-            continue;
-          }
-          sources = sources + "&source=" + currentGeneSymbol;
+            // use active chise instance
+            var chiseInstance = appUtilities.getActiveChiseInstance();
 
-          if (filename == "") {
-            filename = currentGeneSymbol;
-          } else {
-            filename = filename + "_" + currentGeneSymbol;
-          }
-        }
-        for (var i = 0; i < targetSymbolsArray.length; i++) {
-          var currentGeneSymbol = targetSymbolsArray[i];
-          if (
-            currentGeneSymbol.length == 0 ||
-            currentGeneSymbol == " " ||
-            currentGeneSymbol == "\n" ||
-            currentGeneSymbol == "\t"
-          ) {
-            continue;
-          }
-          targets = targets + "&target=" + currentGeneSymbol;
+            // use the associated cy instance
+            var cy = chiseInstance.getCy();
 
-          if (filename == "") {
-            filename = currentGeneSymbol;
-          } else {
-            filename = filename + "_" + currentGeneSymbol;
-          }
-        }
-        filename = filename + "_PATHSFROMTO.nwt";
-        queryURL = queryURL + sources + targets;
-
-        if (cy.nodes().length == 0) {
-          chiseInstance.startSpinner("paths-fromto-spinner");
-          var currentGeneralProperties = appUtilities.getScratch(
-            cy,
-            "currentGeneralProperties"
-          );
-          var currentInferNestingOnLoad =
-            currentGeneralProperties.inferNestingOnLoad;
-          var currentLayoutProperties = appUtilities.getScratch(
-            cy,
-            "currentLayoutProperties"
-          );
+            self.currentQueryParameters.sourceSymbols = document.getElementById("query-pathsfromto-source-symbols").value;
+            self.currentQueryParameters.targetSymbols = document.getElementById("query-pathsfromto-target-symbols").value;
+            self.currentQueryParameters.lengthLimit = Number(document.getElementById("query-pathsfromto-length-limit").value);
 
-          $.ajax({
-            type: "get",
-            url: "/utilities/testURL",
-            data: { url: queryURL },
-            success: function (data) {
-              if (
-                !data.error &&
-                data.response.statusCode == 200 &&
-                data.response.body
-              ) {
-                var xml = $.parseXML(data.response.body);
-                $(document).trigger("sbgnvizLoadFile", [filename, cy]);
-                currentGeneralProperties.inferNestingOnLoad = false;
-                chiseInstance.updateGraph(
-                  chiseInstance.convertSbgnmlToJson(xml),
-                  undefined,
-                  currentLayoutProperties
-                );
-                currentGeneralProperties.inferNestingOnLoad =
-                  currentInferNestingOnLoad;
-                chiseInstance.endSpinner("paths-fromto-spinner");
-                $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
-              } else {
-                new PromptInvalidQueryView({
-                  el: "#prompt-invalidQuery-table",
-                }).render();
-                chiseInstance.endSpinner("paths-fromto-spinner");
-              }
-            },
-            error: function (xhr, options, err) {
-              new PromptInvalidQueryView({
-                el: "#prompt-invalidQuery-table",
-              }).render();
-              chiseInstance.endSpinner("paths-fromto-spinner");
-            },
-          });
+            var sourceSymbols = self.currentQueryParameters.sourceSymbols.trim();
+            if (sourceSymbols.length === 0) {
+                document.getElementById("query-pathsfromto-source-symbols").focus();
+                return;
+            }
+            // sourceSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
+            sourceSymbols = sourceSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
+            if (sourceSymbols.length === 0) {
+                $(self.el).modal('toggle');
+                new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                return;
+            }
 
-          $(self.el).modal("toggle");
-        } else {
-          new PromptConfirmationView({
-            el: "#prompt-confirmation-table",
-          }).render(function () {
-            chiseInstance.startSpinner("paths-fromto-spinner");
-            var currentGeneralProperties = appUtilities.getScratch(
-              cy,
-              "currentGeneralProperties"
-            );
-            var currentInferNestingOnLoad =
-              currentGeneralProperties.inferNestingOnLoad;
-            var currentLayoutProperties = appUtilities.getScratch(
-              cy,
-              "currentLayoutProperties"
-            );
-
-            $.ajax({
-              type: "get",
-              url: "/utilities/testURL",
-              data: { url: queryURL },
-              success: function (data) {
-                if (
-                  !data.error &&
-                  data.response.statusCode == 200 &&
-                  data.response.body
-                ) {
-                  var xml = $.parseXML(data.response.body);
-                  $(document).trigger("sbgnvizLoadFile", [filename, cy]);
-                  currentGeneralProperties.inferNestingOnLoad = false;
-                  chiseInstance.updateGraph(
-                    chiseInstance.convertSbgnmlToJson(xml),
-                    undefined,
-                    currentLayoutProperties
-                  );
-                  currentGeneralProperties.inferNestingOnLoad =
-                    currentInferNestingOnLoad;
-                  chiseInstance.endSpinner("paths-fromto-spinner");
-                  $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
+            var targetSymbols = self.currentQueryParameters.targetSymbols.trim();
+            if (targetSymbols.length === 0) {
+                document.getElementById("query-pathsfromto-target-symbols").focus();
+                return;
+            }
+            // targetSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
+            targetSymbols = targetSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
+            if (targetSymbols.length === 0) {
+                $(self.el).modal('toggle');
+                new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                return;
+            }
+
+            if (self.currentQueryParameters.lengthLimit > 3) {
+                $(self.el).modal('toggle');
+                new PromptInvalidLengthLimitView({el: '#prompt-invalidLengthLimit-table'}).render();
+                document.getElementById("query-pathsfromto-length-limit").focus();
+                return;
+            }
+
+            var queryURL = "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=PATHSFROMTO&limit="
+                + self.currentQueryParameters.lengthLimit;
+            var sourceSymbolsArray = sourceSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" ");
+            var targetSymbolsArray = targetSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" ");
+
+            var filename = "";
+            var sources = "";
+            var targets = "";
+            for (var i = 0; i < sourceSymbolsArray.length; i++) {
+                var currentGeneSymbol = sourceSymbolsArray[i];
+                if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' '
+                    || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') {
+                    continue;
+                }
+                sources = sources + "&source=" + currentGeneSymbol;
+
+                if (filename == '') {
+                    filename = currentGeneSymbol;
                 } else {
-                  new PromptInvalidQueryView({
-                    el: "#prompt-invalidQuery-table",
-                  }).render();
-                  chiseInstance.endSpinner("paths-fromto-spinner");
+                    filename = filename + '_' + currentGeneSymbol;
                 }
-              },
-              error: function (xhr, options, err) {
-                new PromptInvalidQueryView({
-                  el: "#prompt-invalidQuery-table",
-                }).render();
-                chiseInstance.endSpinner("paths-fromto-spinner");
-              },
-            });
-
-            $(self.el).modal("toggle");
-          });
-        }
-      });
+            }
+            for (var i = 0; i < targetSymbolsArray.length; i++) {
+                var currentGeneSymbol = targetSymbolsArray[i];
+                if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' '
+                    || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') {
+                    continue;
+                }
+                targets = targets + "&target=" + currentGeneSymbol;
 
-    $(document)
-      .off("click", "#cancel-query-pathsfromto")
-      .on("click", "#cancel-query-pathsfromto", function (evt) {
-        $(self.el).modal("toggle");
-      });
+                if (filename == '') {
+                    filename = currentGeneSymbol;
+                } else {
+                    filename = filename + '_' + currentGeneSymbol;
+                }
+            }
+            filename = filename + '_PATHSFROMTO.nwt';
+            queryURL = queryURL + sources + targets;
+
+            if(cy.nodes().length == 0){
+
+              chiseInstance.startSpinner('paths-fromto-spinner');
+              var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+              var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
+              var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); 
+
+              $.ajax({
+                type: 'get',
+                url: "/utilities/testURL",
+                data: {url: queryURL},
+                success: function(data){
+                  if (!data.error && data.response.statusCode == 200 && data.response.body) {
+                    var xml = $.parseXML(data.response.body);
+                    $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
+                    currentGeneralProperties.inferNestingOnLoad = false;
+                    chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
+                    currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
+                    chiseInstance.endSpinner('paths-fromto-spinner');
+                    $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
+                  }
+                  else {
+                    new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                    chiseInstance.endSpinner('paths-fromto-spinner');
+                  }
+                },
+                error: function(xhr, options, err){
+                  new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                  chiseInstance.endSpinner('paths-fromto-spinner');
+                }
+              });
 
-    return this;
-  },
+              $(self.el).modal('toggle');
+
+            }
+            else{
+
+              new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){
+
+                chiseInstance.startSpinner('paths-fromto-spinner');
+                var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+                var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
+                var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
+
+                $.ajax({
+                  type: 'get',
+                  url: "/utilities/testURL",
+                  data: {url: queryURL},
+                  success: function(data){
+                    if (!data.error && data.response.statusCode == 200 && data.response.body) {
+                      var xml = $.parseXML(data.response.body);
+                      $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
+                      currentGeneralProperties.inferNestingOnLoad = false;
+                      chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
+                      currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
+                      chiseInstance.endSpinner('paths-fromto-spinner');
+                      $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
+                    }
+                    else {
+                      new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                      chiseInstance.endSpinner('paths-fromto-spinner');
+                    }
+                  },
+                  error: function(xhr, options, err){
+                    new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                    chiseInstance.endSpinner('paths-fromto-spinner');
+                  }
+                });
+
+                $(self.el).modal('toggle');
+
+              });
+
+            }
+
+        });
+
+        $(document).off("click", "#cancel-query-pathsfromto").on("click", "#cancel-query-pathsfromto", function (evt) {
+            $(self.el).modal('toggle');
+        });
+
+        return this;
+    }
 });
 
 /**
  * Common Stream Query view for the Sample Application.
  */
 var CommonStreamQueryView = Backbone.View.extend({
-  defaultQueryParameters: {
-    geneSymbols: "",
-    lengthLimit: 1,
-  },
-  currentQueryParameters: null,
-  initialize: function () {
-    var self = this;
-    self.copyProperties();
-    self.template = _.template($("#query-commonstream-template").html());
-    self.template = self.template(self.currentQueryParameters);
-  },
-  copyProperties: function () {
-    this.currentQueryParameters = _.clone(this.defaultQueryParameters);
-  },
-  render: function () {
-    var self = this;
-    self.template = _.template($("#query-commonstream-template").html());
-    self.template = self.template(self.currentQueryParameters);
-    $(self.el).html(self.template);
+    defaultQueryParameters: {
+        geneSymbols: "",
+        lengthLimit: 1
+    },
+    currentQueryParameters: null,
+    initialize: function () {
+        var self = this;
+        self.copyProperties();
+        self.template = _.template($("#query-commonstream-template").html());
+        self.template = self.template(self.currentQueryParameters);
+    },
+    copyProperties: function () {
+        this.currentQueryParameters = _.clone(this.defaultQueryParameters);
+    },
+    render: function () {
 
-    $(self.el).modal("show");
-    PCdialog = "CommonStream";
+        var self = this;
+        self.template = _.template($("#query-commonstream-template").html());
+        self.template = self.template(self.currentQueryParameters);
+        $(self.el).html(self.template);
 
-    $(document)
-      .off("click", "#save-query-commonstream")
-      .on("click", "#save-query-commonstream", function (evt) {
-        // use active chise instance
-        var chiseInstance = appUtilities.getActiveChiseInstance();
+        $(self.el).modal('show');
+        PCdialog = "CommonStream";
 
-        // use the associated cy instance
-        var cy = chiseInstance.getCy();
+        $(document).off("click", "#save-query-commonstream").on("click", "#save-query-commonstream", function (evt) {
 
-        self.currentQueryParameters.geneSymbols = document.getElementById(
-          "query-commonstream-gene-symbols"
-        ).value;
-        self.currentQueryParameters.lengthLimit = Number(
-          document.getElementById("query-commonstream-length-limit").value
-        );
 
-        var geneSymbols = self.currentQueryParameters.geneSymbols.trim();
-        if (geneSymbols.length === 0) {
-          document.getElementById("query-commonstream-gene-symbols").focus();
-          return;
-        }
-        // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
-        geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
-        if (geneSymbols.length === 0) {
-          $(self.el).modal("toggle");
-          new PromptInvalidQueryView({
-            el: "#prompt-invalidQuery-table",
-          }).render();
-          return;
-        }
-        if (self.currentQueryParameters.lengthLimit > 3) {
-          $(self.el).modal("toggle");
-          new PromptInvalidLengthLimitView({
-            el: "#prompt-invalidLengthLimit-table",
-          }).render();
-          document.getElementById("query-commonstream-length-limit").focus();
-          return;
-        }
 
-        var queryURL =
-          "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=COMMONSTREAM&limit=" +
-          self.currentQueryParameters.lengthLimit;
-        var geneSymbolsArray = geneSymbols
-          .replaceAll("\n", " ")
-          .replaceAll("\t", " ")
-          .split(" ");
-
-        var filename = "";
-        var sources = "";
-        for (var i = 0; i < geneSymbolsArray.length; i++) {
-          var currentGeneSymbol = geneSymbolsArray[i];
-          if (
-            currentGeneSymbol.length == 0 ||
-            currentGeneSymbol == " " ||
-            currentGeneSymbol == "\n" ||
-            currentGeneSymbol == "\t"
-          ) {
-            continue;
-          }
-          sources = sources + "&source=" + currentGeneSymbol;
+            // use active chise instance
+            var chiseInstance = appUtilities.getActiveChiseInstance();
 
-          if (filename == "") {
-            filename = currentGeneSymbol;
-          } else {
-            filename = filename + "_" + currentGeneSymbol;
-          }
-        }
-        filename = filename + "_COMMONSTREAM.nwt";
-        queryURL = queryURL + sources;
-
-        if (cy.nodes().length == 0) {
-          chiseInstance.startSpinner("common-stream-spinner");
-          var currentGeneralProperties = appUtilities.getScratch(
-            cy,
-            "currentGeneralProperties"
-          );
-          var currentInferNestingOnLoad =
-            currentGeneralProperties.inferNestingOnLoad;
-          var currentLayoutProperties = appUtilities.getScratch(
-            cy,
-            "currentLayoutProperties"
-          );
+            // use the associated cy instance
+            var cy = chiseInstance.getCy();
 
-          $.ajax({
-            type: "get",
-            url: "/utilities/testURL",
-            data: { url: queryURL },
-            success: function (data) {
-              if (
-                !data.error &&
-                data.response.statusCode == 200 &&
-                data.response.body
-              ) {
-                var xml = $.parseXML(data.response.body);
-                $(document).trigger("sbgnvizLoadFile", [filename, cy]);
-                currentGeneralProperties.inferNestingOnLoad = false;
-                chiseInstance.updateGraph(
-                  chiseInstance.convertSbgnmlToJson(xml),
-                  undefined,
-                  currentLayoutProperties
-                );
-                currentGeneralProperties.inferNestingOnLoad =
-                  currentInferNestingOnLoad;
-                chiseInstance.endSpinner("common-stream-spinner");
-                $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
-              } else {
-                new PromptInvalidQueryView({
-                  el: "#prompt-invalidQuery-table",
-                }).render();
-                chiseInstance.endSpinner("common-stream-spinner");
-              }
-            },
-            error: function (xhr, options, err) {
-              new PromptInvalidQueryView({
-                el: "#prompt-invalidQuery-table",
-              }).render();
-              chiseInstance.endSpinner("common-stream-spinner");
-            },
-          });
+            self.currentQueryParameters.geneSymbols = document.getElementById("query-commonstream-gene-symbols").value;
+            self.currentQueryParameters.lengthLimit = Number(document.getElementById("query-commonstream-length-limit").value);
 
-          $(self.el).modal("toggle");
-        } else {
-          new PromptConfirmationView({
-            el: "#prompt-confirmation-table",
-          }).render(function () {
-            chiseInstance.startSpinner("common-stream-spinner");
-            var currentGeneralProperties = appUtilities.getScratch(
-              cy,
-              "currentGeneralProperties"
-            );
-            var currentInferNestingOnLoad =
-              currentGeneralProperties.inferNestingOnLoad;
-            var currentLayoutProperties = appUtilities.getScratch(
-              cy,
-              "currentLayoutProperties"
-            );
-
-            $.ajax({
-              type: "get",
-              url: "/utilities/testURL",
-              data: { url: queryURL },
-              success: function (data) {
-                if (
-                  !data.error &&
-                  data.response.statusCode == 200 &&
-                  data.response.body
-                ) {
-                  var xml = $.parseXML(data.response.body);
-                  $(document).trigger("sbgnvizLoadFile", [filename, cy]);
-                  currentGeneralProperties.inferNestingOnLoad = false;
-                  chiseInstance.updateGraph(
-                    chiseInstance.convertSbgnmlToJson(xml),
-                    undefined,
-                    currentLayoutProperties
-                  );
-                  currentGeneralProperties.inferNestingOnLoad =
-                    currentInferNestingOnLoad;
-                  chiseInstance.endSpinner("common-stream-spinner");
-                  $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
+            var geneSymbols = self.currentQueryParameters.geneSymbols.trim();
+            if (geneSymbols.length === 0) {
+                document.getElementById("query-commonstream-gene-symbols").focus();
+                return;
+            }
+            // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
+            geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim();
+            if (geneSymbols.length === 0) {
+                $(self.el).modal('toggle');
+                new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                return;
+            }
+            if (self.currentQueryParameters.lengthLimit > 3) {
+                $(self.el).modal('toggle');
+                new PromptInvalidLengthLimitView({el: '#prompt-invalidLengthLimit-table'}).render();
+                document.getElementById("query-commonstream-length-limit").focus();
+                return;
+            }
+
+            var queryURL = "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=COMMONSTREAM&limit="
+                + self.currentQueryParameters.lengthLimit;
+            var geneSymbolsArray = geneSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" ");
+
+            var filename = "";
+            var sources = "";
+            for (var i = 0; i < geneSymbolsArray.length; i++) {
+                var currentGeneSymbol = geneSymbolsArray[i];
+                if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' '
+                    || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') {
+                    continue;
+                }
+                sources = sources + "&source=" + currentGeneSymbol;
+
+                if (filename == '') {
+                    filename = currentGeneSymbol;
                 } else {
-                  new PromptInvalidQueryView({
-                    el: "#prompt-invalidQuery-table",
-                  }).render();
-                  chiseInstance.endSpinner("common-stream-spinner");
+                    filename = filename + '_' + currentGeneSymbol;
                 }
-              },
-              error: function (xhr, options, err) {
-                new PromptInvalidQueryView({
-                  el: "#prompt-invalidQuery-table",
-                }).render();
-                chiseInstance.endSpinner("common-stream-spinner");
-              },
-            });
-
-            $(self.el).modal("toggle");
-          });
-        }
-      });
+            }
+            filename = filename + '_COMMONSTREAM.nwt';
+            queryURL = queryURL + sources;
+
+            if(cy.nodes().length == 0){
+
+              chiseInstance.startSpinner('common-stream-spinner');
+              var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+              var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
+              var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');             
+
+              $.ajax({
+                type: 'get',
+                url: "/utilities/testURL",
+                data: {url: queryURL},
+                success: function(data){
+                  if (!data.error && data.response.statusCode == 200 && data.response.body) {
+                    var xml = $.parseXML(data.response.body);
+                    $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
+                    currentGeneralProperties.inferNestingOnLoad = false;
+                    chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
+                    currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
+                    chiseInstance.endSpinner('common-stream-spinner');
+                    $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
+                  }
+                  else {
+                    new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                    chiseInstance.endSpinner('common-stream-spinner');
+                  }
+                },
+                error: function(xhr, options, err){
+                  new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                  chiseInstance.endSpinner('common-stream-spinner');
+                }
+              });
 
-    $(document)
-      .off("click", "#cancel-query-commonstream")
-      .on("click", "#cancel-query-commonstream", function (evt) {
-        $(self.el).modal("toggle");
-      });
+              $(self.el).modal('toggle');
 
-    return this;
-  },
+            }
+            else{
+
+              new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){
+
+                chiseInstance.startSpinner('common-stream-spinner');
+                var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+                var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
+                var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');                
+
+                $.ajax({
+                  type: 'get',
+                  url: "/utilities/testURL",
+                  data: {url: queryURL},
+                  success: function(data){
+                    if (!data.error && data.response.statusCode == 200 && data.response.body) {
+                      var xml = $.parseXML(data.response.body);
+                      $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
+                      currentGeneralProperties.inferNestingOnLoad = false;
+                      chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
+                      currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
+                      chiseInstance.endSpinner('common-stream-spinner');
+                      $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
+                    }
+                    else {
+                      new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                      chiseInstance.endSpinner('common-stream-spinner');
+                    }
+                  },
+                  error: function(xhr, options, err){
+                    new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render();
+                    chiseInstance.endSpinner('common-stream-spinner');
+                  }
+                });
+
+                $(self.el).modal('toggle');
+
+              });
+
+            }
+        });
+
+        $(document).off("click", "#cancel-query-commonstream").on("click", "#cancel-query-commonstream", function (evt) {
+            $(self.el).modal('toggle');
+        });
+
+        return this;
+    }
 });
 /**
  * Paths By URI Query view for the Sample Application.
  */
 var PathsByURIQueryView = Backbone.View.extend({
   defaultQueryParameters: {
-    URI: "",
+      URI: ""
   },
   currentQueryParameters: null,
   initialize: function () {
@@ -2920,164 +2347,129 @@ var PathsByURIQueryView = Backbone.View.extend({
     self.template = self.template(self.currentQueryParameters);
     $(self.el).html(self.template);
 
-    $(self.el).modal("show");
+    $(self.el).modal('show');
+
+    $(document).off("click", "#save-query-pathsbyURI").on("click", "#save-query-pathsbyURI", function (evt) {
+
 
-    $(document)
-      .off("click", "#save-query-pathsbyURI")
-      .on("click", "#save-query-pathsbyURI", function (evt) {
-        // use the active chise instance
-        var chiseInstance = appUtilities.getActiveChiseInstance();
 
-        // use the associated cy instance
-        var cy = chiseInstance.getCy();
+      // use the active chise instance
+      var chiseInstance = appUtilities.getActiveChiseInstance();
+
+      // use the associated cy instance
+      var cy = chiseInstance.getCy();
 
-        self.currentQueryParameters.URI = document.getElementById(
-          "query-pathsbyURI-URI"
-        ).value;
-        var uri = self.currentQueryParameters.URI.trim();
+      self.currentQueryParameters.URI = document.getElementById("query-pathsbyURI-URI").value;
+      var uri = self.currentQueryParameters.URI.trim();
 
-        if (uri.length === 0) {
+      if (uri.length === 0) {
           document.getElementById("query-pathsbyURI-URI").focus();
           return;
-        }
-        // uri is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
-        uri = uri.replace(/[^a-zA-Z0-9:/.\-\n\t ]/g, "").trim();
-        if (uri.length === 0) {
-          $(self.el).modal("toggle");
-          new PromptInvalidURIView({ el: "#prompt-invalidURI-table" }).render();
+      }
+      // uri is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string
+      uri = uri.replace(/[^a-zA-Z0-9:/.\-\n\t ]/g, "").trim();
+      if (uri.length === 0) {
+          $(self.el).modal('toggle');
+          new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render();
           return;
-        }
+      }
 
-        var queryURL =
-          "http://www.pathwaycommons.org/pc2/get?uri=" + uri + "&format=SBGN";
+      var queryURL = "http://www.pathwaycommons.org/pc2/get?uri="
+          + uri + "&format=SBGN";
 
-        var filename = "";
+      var filename = "";
 
-        if (filename == "") {
+      if (filename == '') {
           filename = uri;
-        } else {
-          filename = filename + "_" + uri;
-        }
+      } else {
+          filename = filename + '_' + uri;
+      }
+
+      filename = filename + '_URI.nwt';
+
+      if(cy.nodes().length == 0){
+
+        chiseInstance.startSpinner('paths-byURI-spinner');
+        var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+        var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
+        var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');        
+
+        $.ajax({
+          type: 'get',
+          url: "/utilities/testURL",
+          data: {url: queryURL},
+          success: function(data){
+            if (!data.error && data.response.statusCode == 200 && data.response.body) {
+              var xml = $.parseXML(data.response.body);
+              $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
+              currentGeneralProperties.inferNestingOnLoad = false;
+              chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
+              currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
+              chiseInstance.endSpinner('paths-byURI-spinner');
+              $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
+            }
+            else {
+              new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render();
+              chiseInstance.endSpinner('paths-byURI-spinner');
+            }
+          },
+          error: function(xhr, options, err){
+            new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render();
+            chiseInstance.endSpinner('paths-byURI-spinner');
+          }
+        });
 
-        filename = filename + "_URI.nwt";
-
-        if (cy.nodes().length == 0) {
-          chiseInstance.startSpinner("paths-byURI-spinner");
-          var currentGeneralProperties = appUtilities.getScratch(
-            cy,
-            "currentGeneralProperties"
-          );
-          var currentInferNestingOnLoad =
-            currentGeneralProperties.inferNestingOnLoad;
-          var currentLayoutProperties = appUtilities.getScratch(
-            cy,
-            "currentLayoutProperties"
-          );
+        $(self.el).modal('toggle');
+
+      }
+      else{
+
+        new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){
+
+          chiseInstance.startSpinner('paths-byURI-spinner');
+          var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+          var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad;
+          var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');          
 
           $.ajax({
-            type: "get",
+            type: 'get',
             url: "/utilities/testURL",
-            data: { url: queryURL },
-            success: function (data) {
-              if (
-                !data.error &&
-                data.response.statusCode == 200 &&
-                data.response.body
-              ) {
+            data: {url: queryURL},
+            success: function(data){
+              if (!data.error && data.response.statusCode == 200 && data.response.body) {
                 var xml = $.parseXML(data.response.body);
-                $(document).trigger("sbgnvizLoadFile", [filename, cy]);
+                $(document).trigger('sbgnvizLoadFile', [ filename, cy ]);
                 currentGeneralProperties.inferNestingOnLoad = false;
-                chiseInstance.updateGraph(
-                  chiseInstance.convertSbgnmlToJson(xml),
-                  undefined,
-                  currentLayoutProperties
-                );
-                currentGeneralProperties.inferNestingOnLoad =
-                  currentInferNestingOnLoad;
-                chiseInstance.endSpinner("paths-byURI-spinner");
-                $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
-              } else {
-                new PromptInvalidURIView({
-                  el: "#prompt-invalidURI-table",
-                }).render();
-                chiseInstance.endSpinner("paths-byURI-spinner");
+                chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties);
+                currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad;
+                chiseInstance.endSpinner('paths-byURI-spinner');
+                $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]);
+              }
+              else {
+                new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render();
+                chiseInstance.endSpinner('paths-byURI-spinner');
               }
             },
-            error: function (xhr, options, err) {
-              new PromptInvalidURIView({
-                el: "#prompt-invalidURI-table",
-              }).render();
-              chiseInstance.endSpinner("paths-byURI-spinner");
-            },
+            error: function(xhr, options, err){
+              new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render();
+              chiseInstance.endSpinner('paths-byURI-spinner');
+            }
           });
 
-          $(self.el).modal("toggle");
-        } else {
-          new PromptConfirmationView({
-            el: "#prompt-confirmation-table",
-          }).render(function () {
-            chiseInstance.startSpinner("paths-byURI-spinner");
-            var currentGeneralProperties = appUtilities.getScratch(
-              cy,
-              "currentGeneralProperties"
-            );
-            var currentInferNestingOnLoad =
-              currentGeneralProperties.inferNestingOnLoad;
-            var currentLayoutProperties = appUtilities.getScratch(
-              cy,
-              "currentLayoutProperties"
-            );
-
-            $.ajax({
-              type: "get",
-              url: "/utilities/testURL",
-              data: { url: queryURL },
-              success: function (data) {
-                if (
-                  !data.error &&
-                  data.response.statusCode == 200 &&
-                  data.response.body
-                ) {
-                  var xml = $.parseXML(data.response.body);
-                  $(document).trigger("sbgnvizLoadFile", [filename, cy]);
-                  currentGeneralProperties.inferNestingOnLoad = false;
-                  chiseInstance.updateGraph(
-                    chiseInstance.convertSbgnmlToJson(xml),
-                    undefined,
-                    currentLayoutProperties
-                  );
-                  currentGeneralProperties.inferNestingOnLoad =
-                    currentInferNestingOnLoad;
-                  chiseInstance.endSpinner("paths-byURI-spinner");
-                  $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
-                } else {
-                  new PromptInvalidURIView({
-                    el: "#prompt-invalidURI-table",
-                  }).render();
-                  chiseInstance.endSpinner("paths-byURI-spinner");
-                }
-              },
-              error: function (xhr, options, err) {
-                new PromptInvalidURIView({
-                  el: "#prompt-invalidURI-table",
-                }).render();
-                chiseInstance.endSpinner("paths-byURI-spinner");
-              },
-            });
-
-            $(self.el).modal("toggle");
-          });
-        }
-      });
+          $(self.el).modal('toggle');
 
-    $(document)
-      .off("click", "#cancel-query-pathsbyURI")
-      .on("click", "#cancel-query-pathsbyURI", function (evt) {
-        $(self.el).modal("toggle");
-      });
+        });
+
+      }
+
+  });
+
+    $(document).off("click", "#cancel-query-pathsbyURI").on("click", "#cancel-query-pathsbyURI", function (evt) {
+        $(self.el).modal('toggle');
+    });
 
     return this;
-  },
+  }
 });
 
 /*
@@ -3088,6 +2480,7 @@ var PathsByURIQueryView = Backbone.View.extend({
   So this PromptSaveView isn't used for now, replaced by PromptConfirmationView.
 */
 var PromptSaveView = Backbone.View.extend({
+
   initialize: function () {
     var self = this;
     self.template = _.template($("#prompt-save-template").html());
@@ -3097,31 +2490,25 @@ var PromptSaveView = Backbone.View.extend({
     self.template = _.template($("#prompt-save-template").html());
     $(self.el).html(self.template);
 
-    $(self.el).modal("show");
+    $(self.el).modal('show');
 
-    $(document)
-      .off("click", "#prompt-save-accept")
-      .on("click", "#prompt-save-accept", function (evt) {
-        $("#save-as-sbgnml").trigger("click");
-        afterFunction();
-        $(self.el).modal("toggle");
-      });
+    $(document).off("click", "#prompt-save-accept").on("click", "#prompt-save-accept", function (evt) {
+      $("#save-as-sbgnml").trigger('click');
+      afterFunction();
+      $(self.el).modal('toggle');
+    });
 
-    $(document)
-      .off("click", "#prompt-save-reject")
-      .on("click", "#prompt-save-reject", function (evt) {
-        afterFunction();
-        $(self.el).modal("toggle");
-      });
+    $(document).off("click", "#prompt-save-reject").on("click", "#prompt-save-reject", function (evt) {
+      afterFunction();
+      $(self.el).modal('toggle');
+    });
 
-    $(document)
-      .off("click", "#prompt-save-cancel")
-      .on("click", "#prompt-save-cancel", function (evt) {
-        $(self.el).modal("toggle");
-      });
+    $(document).off("click", "#prompt-save-cancel").on("click", "#prompt-save-cancel", function (evt) {
+      $(self.el).modal('toggle');
+    });
 
     return this;
-  },
+  }
 });
 
 /*
@@ -3142,190 +2529,132 @@ var FileSaveView = Backbone.View.extend({
     self.template = _.template($("#file-save-template").html());
 
     $(self.el).html(self.template);
-    $(self.el).modal("show");
-
-    $("#file-save-table").keyup(function (e) {
-      if (
-        e.which == 13 &&
-        $(self.el).data("bs.modal").isShown &&
-        !$("#file-save-accept").is(":focus") &&
-        !$("#file-save-cancel").is(":focus")
-      ) {
+    $(self.el).modal('show');
+
+    $("#file-save-table").keyup(function(e){
+      if (e.which == 13 && $(self.el).data('bs.modal').isShown && !$("#file-save-accept").is(":focus") && !$("#file-save-cancel").is(":focus")){
         $("#file-save-accept").click();
       }
     });
 
-    var filename = document.getElementById("file-name").innerHTML;
+    var filename = document.getElementById('file-name').innerHTML;
     var fExt;
     switch (fileformat) {
-      case "nwt":
-        fExt = "nwt";
-        break;
-      case "sbgn":
-        fExt = "sbgn";
-        break;
-      case "sbml":
-        fExt = "sbml";
-        break;
-      case "gpml":
-        fExt = "gpml";
+      case 'nwt':
+        fExt = 'nwt';
         break;
-      case "sif":
-        fExt = "sif";
+      case 'sbgn':
+        fExt = 'sbgn'
         break;
-      case "sifLayout":
-        fExt = "txt";
+      case 'sbml':
+        fExt = 'sbml'
         break;
-      case "png":
-        fExt = "png";
-        break;
-      case "jpg":
-        fExt = "jpg";
-        break;
-      case "svg":
-        fExt = "svg";
-        break;
-      case "celldesigner":
+      case 'celldesigner':
       default:
-        fExt = "xml";
+        fExt = 'xml'
         break;
     }
 
-    filename = filename
-      .substring(0, filename.lastIndexOf("."))
-      .concat(".")
-      .concat(fExt);
+    filename = filename.substring(0, filename.lastIndexOf('.')).concat(".").concat(fExt);
     $("#file-save-filename").val(filename);
 
-    $(document)
-      .off("click", "#file-save-accept")
-      .on("click", "#file-save-accept", function (evt) {
-        // use the active chise instance
-        var chiseInstance = appUtilities.getActiveChiseInstance();
-
-        // use the assocated cy instance
-        var cy = chiseInstance.getCy();
-        cy.elements().unselect();
-        // get current general properties for cy
-        var currentGeneralProperties = appUtilities.getScratch(
-          cy,
-          "currentGeneralProperties"
-        );
-
-        filename = $("#file-save-filename").val();
-        appUtilities.setFileContent(filename);
-
-        if (fileformat === "sbgn" || fileformat === "nwt") {
-          var renderInfo;
-          var properties = jquery.extend(true, {}, currentGeneralProperties);
-          delete properties.mapType; // already stored in sbgn file, no need to store in extension as property
-
-          var saveAsFcn = chiseInstance.saveAsNwt;
-          if (fileformat === "sbgn") {
-            saveAsFcn = chiseInstance.saveAsSbgnml;
-          }
+    $(document).off("click", "#file-save-accept").on("click", "#file-save-accept", function (evt) {
+
+      // use the active chise instance
+      var chiseInstance = appUtilities.getActiveChiseInstance();
+      
+      // use the assocated cy instance
+      var cy = chiseInstance.getCy();
+      cy.elements().unselect();
+      // get current general properties for cy
+      var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
 
-          var nodes, edges;
+      filename = $("#file-save-filename").val();
+      appUtilities.setFileContent(filename);
 
-          if (fileformat === "sbgn") {
-            if (chiseInstance.elementUtilities.mapType === "SIF") {
-              properties.mapType = "Unknown";
-            }
+      if(fileformat === "sbgn" || fileformat === "nwt") {
+        var renderInfo;
+        var properties = jquery.extend(true, {}, currentGeneralProperties);
+        delete properties.mapType; // already stored in sbgn file, no need to store in extension as property
 
-            nodes = cy.nodes().filter(function (node) {
-              return !chiseInstance.elementUtilities.isSIFNode(node);
-            });
-
-            edges = cy.edges().filter(function (edge) {
-              return (
-                !chiseInstance.elementUtilities.isSIFEdge(edge) &&
-                !chiseInstance.elementUtilities.isSIFNode(
-                  edge.data("source")
-                ) &&
-                !chiseInstance.elementUtilities.isSIFNode(edge.data("target"))
-              );
-            });
-          } else if (
-            chiseInstance.elementUtilities.mapType === "SIF" &&
-            properties.enableSIFTopologyGrouping
-          ) {
-            // get topologyGrouping instance for cy
-            var topologyGrouping = chiseInstance.sifTopologyGrouping;
-            var compoundGroups = topologyGrouping.getGroupCompounds();
-            var metaEdges = topologyGrouping.getMetaEdges();
-
-            nodes = cy.nodes().not(compoundGroups);
-            edges = cy.edges().not(metaEdges);
-
-            metaEdges.forEach(function (edge) {
-              edges = edges.union(edge.data("tg-to-restore"));
-            });
-          }
+        var saveAsFcn = chiseInstance.saveAsNwt;
+        if ( fileformat === "sbgn" ) {
+          saveAsFcn = chiseInstance.saveAsSbgnml;
+        }
 
-          renderInfo = appUtilities.getAllStyles(cy, nodes, edges);
+        var nodes, edges;
 
-          // Exclude extensions if the version is plain
-          if (version === "plain" || version === "plain3") {
-            saveAsFcn(filename, version, undefined, undefined, nodes, edges);
-          } else {
-            saveAsFcn(filename, version, renderInfo, properties, nodes, edges);
+        if ( fileformat === "sbgn" ) {
+          if (chiseInstance.elementUtilities.mapType === 'SIF') {
+            properties.mapType = 'Unknown';
           }
-        } else if (fileformat === "celldesigner") {
-          chiseInstance.saveAsCellDesigner(filename, function () {
-            var promptFileConversionErrorView =
-              new PromptFileConversionErrorView({
-                el: "#prompt-fileConversionError-table",
-              });
-            promptFileConversionErrorView.render();
-            document.getElementById("file-conversion-error-message").innerText =
-              "Conversion service is not available!";
-          });
-        } else if (fileformat === "sbml") {
-          chiseInstance.saveAsSbml(filename, function (data, errorMessage) {
-            var promptSbmlConversionErrorView =
-              new PromptSbmlConversionErrorView({
-                el: "#prompt-sbmlConversionError-table",
-              });
-            promptSbmlConversionErrorView.render(data, errorMessage);
-            //document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!";
-          });
-        } else if (fileformat === "gpml") {
-          chiseInstance.saveAsGpml(filename, function (data, errorMessage) {
-            var promptSbmlConversionErrorView =
-              new PromptSbmlConversionErrorView({
-                el: "#prompt-sbmlConversionError-table",
-              });
-            promptSbmlConversionErrorView.render(data, errorMessage);
-            //document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!";
-          });
-        } else if (fileformat === "sif") {
-          chiseInstance.saveAsPlainSif(filename, true);
-        } else if (fileformat === "sifLayout") {
-          chiseInstance.exportLayoutData(filename, true);
-        } else if (fileformat === "png") {
-          chiseInstance.saveAsPng(filename);
-        } else if (fileformat === "jpg") {
-          chiseInstance.saveAsJpg(filename);
-        } else if (fileformat === "svg") {
-          chiseInstance.saveAsSvg(filename);
-        } else {
-          // invalid file format provided
-          console.error(
-            "FileSaveView received unsupported file format: " + fileformat
-          );
+
+          nodes = cy.nodes().filter( function( node ) {
+            return !chiseInstance.elementUtilities.isSIFNode( node );
+          } );
+
+          edges = cy.edges().filter( function( edge ) {
+            return !chiseInstance.elementUtilities.isSIFEdge( edge )
+              && !chiseInstance.elementUtilities.isSIFNode( edge.data('source') )
+              && !chiseInstance.elementUtilities.isSIFNode( edge.data('target') );
+          } );
+        }
+        else if ( chiseInstance.elementUtilities.mapType === 'SIF' && properties.enableSIFTopologyGrouping ) {
+          // get topologyGrouping instance for cy
+          var topologyGrouping = chiseInstance.sifTopologyGrouping;
+          var compoundGroups = topologyGrouping.getGroupCompounds();
+          var metaEdges = topologyGrouping.getMetaEdges();
+
+          nodes = cy.nodes().not( compoundGroups );
+          edges = cy.edges().not( metaEdges );
+
+          metaEdges.forEach( function( edge ) {
+            edges = edges.union( edge.data('tg-to-restore') );
+          } );
         }
 
-        $(self.el).modal("toggle");
-      });
+        renderInfo = appUtilities.getAllStyles(cy, nodes, edges);
 
-    $(document)
-      .off("click", "#file-save-cancel")
-      .on("click", "#file-save-cancel", function (evt) {
-        $(self.el).modal("toggle");
-      });
+        // Exclude extensions if the version is plain
+        if (version === "plain" || version === "plain3") {
+          saveAsFcn(filename, version, undefined, undefined, nodes, edges);
+        }
+        else {
+          saveAsFcn(filename, version, renderInfo, properties, nodes, edges);
+        }
+      } 
+      else if(fileformat === "celldesigner") {
+       
+        chiseInstance.saveAsCellDesigner(filename, function(){
+          var promptFileConversionErrorView  = new PromptFileConversionErrorView({el: '#prompt-fileConversionError-table'});
+          promptFileConversionErrorView.render();             
+          document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!";              
+        });
+       
+      }
+      else if(fileformat === "sbml")
+      {
+        chiseInstance.saveAsSbml(filename, function(data,errorMessage){
+        
+          var promptSbmlConversionErrorView  = new PromptSbmlConversionErrorView({el: '#prompt-sbmlConversionError-table'});
+          promptSbmlConversionErrorView.render(data,errorMessage);             
+          //document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!";              
+        });
+     
+      }
+      else { // invalid file format provided
+        console.error("FileSaveView received unsupported file format: "+fileformat);
+      }
+
+      $(self.el).modal('toggle');
+    });
+
+    $(document).off("click", "#file-save-cancel").on("click", "#file-save-cancel", function (evt) {
+      $(self.el).modal('toggle');
+    });
 
     return this;
-  },
+  }
 });
 
 /*
@@ -3336,553 +2665,353 @@ var SaveUserPreferencesView = Backbone.View.extend({
     var self = this;
     self.template = _.template($("#save-user-preferences-template").html());
   },
-
+  
   render: function () {
     var self = this;
     self.template = _.template($("#save-user-preferences-template").html());
-    var param = {};
+    var param ={};
     var stagedObjects = [];
-    if (typeof appUtilities.stagedElementStyles !== "undefined") {
-      appUtilities.stagedElementStyles.forEach(function (item, index) {
-        stagedObjects.push(item["element"]);
+    if (typeof appUtilities.stagedElementStyles !== 'undefined') {
+      appUtilities.stagedElementStyles.forEach(function(item, index){
+        stagedObjects.push(item["element"]); 
       });
-    }
+    }    
     param.stagedObjects = stagedObjects;
     self.template = self.template(param);
     $(self.el).html(self.template);
-    $(self.el).modal("show");
-
-    $("#user-preferences-save-table").keyup(function (e) {
-      if (
-        e.which == 13 &&
-        $(self.el).data("bs.modal").isShown &&
-        !$("#save-user-preferences-accept").is(":focus") &&
-        !$("#save-user-preferences-cancel").is(":focus")
-      ) {
+    $(self.el).modal('show');
+
+    $("#user-preferences-save-table").keyup(function(e){
+      if (e.which == 13 && $(self.el).data('bs.modal').isShown && !$("#save-user-preferences-accept").is(":focus") && !$("#save-user-preferences-cancel").is(":focus")){
         $("#save-user-preferences-accept").click();
       }
     });
 
-    var filename = document.getElementById("file-name").innerHTML;
-    if (filename.lastIndexOf(".") != -1) {
-      filename = filename.substring(0, filename.lastIndexOf("."));
-    }
+    var filename = document.getElementById('file-name').innerHTML; 
+    if(filename.lastIndexOf('.') != -1){
+      filename = filename.substring(0, filename.lastIndexOf('.'));    
+    }    
     filename = filename.concat(".newtp");
 
     $("#save-user-preferences-filename").val(filename);
-    $("#save-user-prefrences-object-check")
-      .off("change")
-      .on("change", function () {
-        if (
-          document.getElementById("save-user-prefrences-object-check").checked
-        ) {
+    $("#save-user-prefrences-object-check").off('change').on("change", function(){
+      if(document.getElementById("save-user-prefrences-object-check").checked){
           $(".save-preferences-object-styles").prop("checked", true);
-          $(".save-preferences-object-styles").attr("disabled", "disabled");
-        } else {
-          $(".save-preferences-object-styles").prop("checked", false);
+          $(".save-preferences-object-styles").attr('disabled','disabled');
+      }else{
+        $(".save-preferences-object-styles").prop("checked", false);
+   
+        $(".save-preferences-object-styles").removeAttr('disabled');
+      }
 
-          $(".save-preferences-object-styles").removeAttr("disabled");
-        }
-      });
 
-    $(document)
-      .off("click", "#save-user-preferences-accept")
-      .on("click", "#save-user-preferences-accept", function (evt) {
-        // use active chise instance
-        var chiseInstance = appUtilities.getActiveChiseInstance();
-
-        // use the associated cy instance
-        var cy = appUtilities.getActiveCy();
-        var preferences = {};
-        //get grid properties
-        if (document.getElementById("user-prefrences-grid-check").checked) {
-          var currentGridProperties = appUtilities.getScratch(
-            cy,
-            "currentGridProperties"
-          );
-          preferences.currentGridProperties = currentGridProperties;
-        }
+    });
 
-        // get currentGeneralProperties for cy
-        if (document.getElementById("user-prefrences-map-check").checked) {
-          preferences.currentGeneralProperties = {};
-          var currentGeneralProperties = appUtilities.getScratch(
-            cy,
-            "currentGeneralProperties"
-          );
-
-          Object.keys(currentGeneralProperties).forEach(function (key, index) {
-            if (
-              currentGeneralProperties[key] !==
-              appUtilities.defaultGeneralProperties[key]
-            ) {
-              preferences.currentGeneralProperties[key] =
-                currentGeneralProperties[key];
-            }
-          });
+    $(document).off("click", "#save-user-preferences-accept").on("click", "#save-user-preferences-accept", function (evt) {
 
-          delete preferences.currentGeneralProperties.mapName;
-          delete preferences.currentGeneralProperties.mapDescription;
-        }
+       // use active chise instance
+      var chiseInstance = appUtilities.getActiveChiseInstance();
 
-        if (document.getElementById("user-prefrences-layout-check").checked) {
-          preferences.currentLayoutProperties = {};
-          var currentLayoutProperties = appUtilities.getScratch(
-            cy,
-            "currentLayoutProperties"
-          );
+      // use the associated cy instance
+      var cy = appUtilities.getActiveCy();
+      var preferences = {};
+      //get grid properties
+      if(document.getElementById("user-prefrences-grid-check").checked){
+        var currentGridProperties = appUtilities.getScratch(cy, 'currentGridProperties');        
+        preferences.currentGridProperties = currentGridProperties;
+      }
 
-          Object.keys(currentLayoutProperties).forEach(function (key, index) {
-            preferences.currentLayoutProperties[key] =
-              currentLayoutProperties[key];
-          });
-        }
+      // get currentGeneralProperties for cy
+      if(document.getElementById("user-prefrences-map-check").checked){
+        preferences.currentGeneralProperties = {}
+        var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties');
+      
+        Object.keys(currentGeneralProperties).forEach(function(key,index) {
+          if(currentGeneralProperties[key] !== appUtilities.defaultGeneralProperties[key]){
+            preferences.currentGeneralProperties[key] = currentGeneralProperties[key];
+          }          
+      });
 
-        preferences.elementsStyles = [];
-        if (typeof appUtilities.stagedElementStyles !== "undefined") {
-          appUtilities.stagedElementStyles.forEach(function (element) {
-            if (
-              document.getElementById(
-                "user-prefrences-object-" + element["element"] + "-check"
-              ).checked
-            ) {
-              preferences.elementsStyles.push(element);
-            }
-          });
-        }
+      delete preferences.currentGeneralProperties.mapName;
+      delete preferences.currentGeneralProperties.mapDescription;
+      }
 
-        var blob = new Blob([JSON.stringify(preferences, null, 2)], {
-          type: "application/json",
-        });
-        filename = $("#save-user-preferences-filename").val();
-        FileSaver.saveAs(blob, filename);
-        $(self.el).modal("toggle");
+      if(document.getElementById("user-prefrences-layout-check").checked){
+        preferences.currentLayoutProperties = {}
+        var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
+       
+        Object.keys(currentLayoutProperties).forEach(function(key,index) {
+         
+            preferences.currentLayoutProperties[key] = currentLayoutProperties[key];
+                  
       });
+       
+   
+      }
 
-    $(document)
-      .off("click", "#save-user-preferences-cancel")
-      .on("click", "#save-user-preferences-cancel", function (evt) {
-        $(self.el).modal("toggle");
-      });
+      preferences.elementsStyles = [];
+      if (typeof appUtilities.stagedElementStyles !== 'undefined') {
+        
+        appUtilities.stagedElementStyles.forEach(function(element){
+          if(document.getElementById("user-prefrences-object-"+element['element']+"-check").checked){
+            preferences.elementsStyles.push(element);
+          }        
+        });
+      }     
+     
+      var blob = new Blob([JSON.stringify(preferences, null, 2)], {type: "application/json"});
+      filename = $("#save-user-preferences-filename").val(); 
+      FileSaver.saveAs(blob, filename);    
+      $(self.el).modal('toggle');
+    });
+
+    $(document).off("click", "#save-user-preferences-cancel").on("click", "#save-user-preferences-cancel", function (evt) {
+      $(self.el).modal('toggle');
+    });
     return this;
-  },
+  }
 });
 
 var LoadUserPreferencesView = Backbone.View.extend({
   initialize: function () {
     var self = this;
     self.template = _.template($("#load-user-preferences-template").html());
-  },
+  },  
   render: function (param) {
     var self = this;
-    self.template = _.template($("#load-user-preferences-template").html());
+    self.template = _.template($("#load-user-preferences-template").html());   
     self.template = self.template(param);
     $(self.el).html(self.template);
-    $(self.el).modal("show");
-
-    $("#user-preferences-load-table").keyup(function (e) {
-      if (
-        e.which == 13 &&
-        $(self.el).data("bs.modal").isShown &&
-        !$("#load-user-preferences-accept").is(":focus") &&
-        !$("#load-user-preferences-cancel").is(":focus")
-      ) {
+    $(self.el).modal('show');
+
+    $("#user-preferences-load-table").keyup(function(e){
+      if (e.which == 13 && $(self.el).data('bs.modal').isShown && !$("#load-user-preferences-accept").is(":focus") && !$("#load-user-preferences-cancel").is(":focus")){
         $("#load-user-preferences-accept").click();
       }
-    });
-    $("#load-user-prefrences-object-check")
-      .off("change")
-      .on("change", function () {
-        if (
-          document.getElementById("load-user-prefrences-object-check").checked
-        ) {
+    });   
+    $("#load-user-prefrences-object-check").off('change').on("change", function(){
+      if(document.getElementById("load-user-prefrences-object-check").checked){
           $(".load-preferences-object-styles").prop("checked", true);
-          $(".load-preferences-object-styles").attr("disabled", "disabled");
-        } else {
-          $(".load-preferences-object-styles").prop("checked", false);
+          $(".load-preferences-object-styles").attr('disabled','disabled');
+      }else{
+        $(".load-preferences-object-styles").prop("checked", false);
+   
+        $(".load-preferences-object-styles").removeAttr('disabled');
+      }
+    });
+    $(document).off("click", "#load-user-preferences-accept").on("click", "#load-user-preferences-accept", function (evt) {
+      var preferences = appUtilities.loadedUserPreferences;
+      var cy = appUtilities.getActiveCy();
+      var chiseInstance = appUtilities.getActiveChiseInstance();
 
-          $(".load-preferences-object-styles").removeAttr("disabled");
+      //apply grid properties if check
+      if(document.getElementById("load-user-prefrences-grid-check").checked){
+        if(typeof preferences.currentGridProperties !== 'undefined'){
+          var currentGridProperties = appUtilities.getScratch(cy, 'currentGridProperties');    
+          $.extend( currentGridProperties, preferences.currentGridProperties);         
+          appUtilities.setScratch(cy, currentGridProperties, 'currentGridProperties');    
+
+          cy.gridGuide({
+            drawGrid: currentGridProperties.showGrid,
+            gridColor: currentGridProperties.gridColor,
+            snapToGridOnRelease: currentGridProperties.snapToGridOnRelease,
+            snapToGridDuringDrag: currentGridProperties.snapToGridDuringDrag,
+            snapToAlignmentLocationOnRelease: currentGridProperties.snapToAlignmentLocationOnRelease,
+            snapToAlignmentLocationDuringDrag: currentGridProperties.snapToAlignmentLocationDuringDrag,
+            gridSpacing: currentGridProperties.gridSize,
+            resize: currentGridProperties.autoResizeNodes,
+            geometricGuideline: currentGridProperties.showGeometricGuidelines,
+            distributionGuidelines: currentGridProperties.showDistributionGuidelines,
+            initPosAlignment: currentGridProperties.showInitPosAlignment,
+            guidelinesTolerance: currentGridProperties.guidelineTolerance,
+            guidelinesStyle: {
+              initPosAlignmentLine: currentGridProperties.initPosAlignmentLine,
+              lineDash: currentGridProperties.lineDash,
+              horizontalDistLine: currentGridProperties.horizontalDistLine,
+              verticalDistLine: currentGridProperties.verticalDistLine,
+              strokeStyle: currentGridProperties.guidelineColor,
+              horizontalDistColor: currentGridProperties.horizontalGuidelineColor,
+              verticalDistColor: currentGridProperties.verticalGuidelineColor,
+              initPosAlignmentColor: currentGridProperties.initPosAlignmentColor,
+              geometricGuidelineRange: currentGridProperties.geometricAlignmentRange,
+              range: currentGridProperties.distributionAlignmentRange
+            }
+          });         
         }
-      });
-    $(document)
-      .off("click", "#load-user-preferences-accept")
-      .on("click", "#load-user-preferences-accept", function (evt) {
-        var preferences = appUtilities.loadedUserPreferences;
-        var cy = appUtilities.getActiveCy();
-        var chiseInstance = appUtilities.getActiveChiseInstance();
-
-        //apply grid properties if check
-        if (
-          document.getElementById("load-user-prefrences-grid-check").checked
-        ) {
-          if (typeof preferences.currentGridProperties !== "undefined") {
-            var currentGridProperties = appUtilities.getScratch(
-              cy,
-              "currentGridProperties"
-            );
-            $.extend(currentGridProperties, preferences.currentGridProperties);
-            appUtilities.setScratch(
-              cy,
-              currentGridProperties,
-              "currentGridProperties"
-            );
-
-            cy.gridGuide({
-              drawGrid: currentGridProperties.showGrid,
-              gridColor: currentGridProperties.gridColor,
-              snapToGridOnRelease: currentGridProperties.snapToGridOnRelease,
-              snapToGridDuringDrag: currentGridProperties.snapToGridDuringDrag,
-              snapToAlignmentLocationOnRelease:
-                currentGridProperties.snapToAlignmentLocationOnRelease,
-              snapToAlignmentLocationDuringDrag:
-                currentGridProperties.snapToAlignmentLocationDuringDrag,
-              gridSpacing: currentGridProperties.gridSize,
-              resize: currentGridProperties.autoResizeNodes,
-              geometricGuideline: currentGridProperties.showGeometricGuidelines,
-              distributionGuidelines:
-                currentGridProperties.showDistributionGuidelines,
-              initPosAlignment: currentGridProperties.showInitPosAlignment,
-              guidelinesTolerance: currentGridProperties.guidelineTolerance,
-              guidelinesStyle: {
-                initPosAlignmentLine:
-                  currentGridProperties.initPosAlignmentLine,
-                lineDash: currentGridProperties.lineDash,
-                horizontalDistLine: currentGridProperties.horizontalDistLine,
-                verticalDistLine: currentGridProperties.verticalDistLine,
-                strokeStyle: currentGridProperties.guidelineColor,
-                horizontalDistColor:
-                  currentGridProperties.horizontalGuidelineColor,
-                verticalDistColor: currentGridProperties.verticalGuidelineColor,
-                initPosAlignmentColor:
-                  currentGridProperties.initPosAlignmentColor,
-                geometricGuidelineRange:
-                  currentGridProperties.geometricAlignmentRange,
-                range: currentGridProperties.distributionAlignmentRange,
-              },
-            });
-          }
+      }           
+      //apply layout properties if checked by user
+      if(document.getElementById("load-user-prefrences-layout-check").checked){
+        if(typeof preferences.currentLayoutProperties !== 'undefined'){
+          var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');    
+          $.extend( currentLayoutProperties, preferences.currentLayoutProperties);         
+          appUtilities.setScratch(cy, currentLayoutProperties, 'currentLayoutProperties');    
+          $(document).trigger('saveLayout', cy);
         }
-        //apply layout properties if checked by user
-        if (
-          document.getElementById("load-user-prefrences-layout-check").checked
-        ) {
-          if (typeof preferences.currentLayoutProperties !== "undefined") {
-            var currentLayoutProperties = appUtilities.getScratch(
-              cy,
-              "currentLayoutProperties"
-            );
-            $.extend(
-              currentLayoutProperties,
-              preferences.currentLayoutProperties
-            );
-            appUtilities.setScratch(
-              cy,
-              currentLayoutProperties,
-              "currentLayoutProperties"
-            );
-            $(document).trigger("saveLayout", cy);
+      }      
+      //apply map properties if checked by user
+      if(document.getElementById("load-user-prefrences-map-check").checked){
+        if(typeof preferences.currentGeneralProperties !== 'undefined'){
+          var ur = cy.undoRedo();
+          var actions = [];  
+
+          Object.keys( mapTabGeneralPanel.params).forEach(function(key,index) {
+            if(typeof preferences.currentGeneralProperties[key] !== 'undefined'){
+              mapTabGeneralPanel.params[key].value = preferences.currentGeneralProperties[key];
+              actions.push({name: "changeMenu", param: mapTabGeneralPanel.params[key]});
+
+              if(key == "arrowScale"){              
+                actions.push({name: "changeCss", param: { eles: cy.edges(), name: "arrow-scale", valueMap: mapTabGeneralPanel.params.arrowScale.value}});
+              }
+            }          
+        });         
+  
+          Object.keys( mapTabLabelPanel.params).forEach(function(key,index) {
+            if(typeof preferences.currentGeneralProperties[key] !== 'undefined'){
+              mapTabLabelPanel.params[key].value = preferences.currentGeneralProperties[key];              
+                actions.push({name: "changeMenu", param: mapTabLabelPanel.params[key]});            
+            }          
+        });
+        
+ 
+          Object.keys( mapTabRearrangementPanel.params).forEach(function(key,index) {
+            if(typeof preferences.currentGeneralProperties[key] !== 'undefined'){
+              mapTabRearrangementPanel.params[key].value = preferences.currentGeneralProperties[key];              
+                actions.push({name: "changeMenu", param: mapTabRearrangementPanel.params[key]});            
+            }          
+        });
+ 
+          
+          var applyColorScheme = false;
+          var defaultColorScheme = appUtilities.defaultGeneralProperties.mapColorScheme;
+          var defaultColorSchemeStyle = appUtilities.defaultGeneralProperties.mapColorSchemeStyle;
+          if(typeof preferences.currentGeneralProperties.mapColorScheme !== 'undefined'){
+            applyColorScheme = true;
+           defaultColorScheme = preferences.currentGeneralProperties.mapColorScheme;          
           }
-        }
-        //apply map properties if checked by user
-        if (document.getElementById("load-user-prefrences-map-check").checked) {
-          if (typeof preferences.currentGeneralProperties !== "undefined") {
-            var ur = cy.undoRedo();
-            var actions = [];
-
-            Object.keys(mapTabGeneralPanel.params).forEach(function (
-              key,
-              index
-            ) {
-              if (
-                typeof preferences.currentGeneralProperties[key] !== "undefined"
-              ) {
-                mapTabGeneralPanel.params[key].value =
-                  preferences.currentGeneralProperties[key];
-                actions.push({
-                  name: "changeMenu",
-                  param: mapTabGeneralPanel.params[key],
-                });
 
-                if (key == "arrowScale") {
-                  actions.push({
-                    name: "changeCss",
-                    param: {
-                      eles: cy.edges(),
-                      name: "arrow-scale",
-                      valueMap: mapTabGeneralPanel.params.arrowScale.value,
-                    },
+          if(typeof preferences.currentGeneralProperties.mapColorSchemeStyle !== 'undefined'){
+            applyColorScheme = true;
+            defaultColorSchemeStyle = preferences.currentGeneralProperties.mapColorSchemeStyle;          
+          }
+          if(applyColorScheme){
+            appUtilities.applyMapColorScheme(defaultColorScheme, defaultColorSchemeStyle, colorSchemeInspectorView); // default color scheme
+          }
+          ur.do("batch", actions);  
+        }  
+      }        
+      
+      
+      if(typeof preferences.elementsStyles !== 'undefined'){        
+        preferences.elementsStyles.forEach(function(item, index){
+          var sbgnClass = item["element"];
+          if(document.getElementById("load-user-prefrences-object-"+sbgnClass+"-check").checked){
+            var targetNodes =cy.elements('[class="' + sbgnClass + '"]')
+            if(item.styles.length > 0){
+              var nameToValue = {};
+              item.styles.forEach(function(style, index){
+                nameToValue[style.name] = style.value;
+              });
+  
+              //apply changes to exisiting elements only if user check the option and there are elements on canvas of this sbgn class type
+              //else just set the styles as default values 
+              if(targetNodes.length > 0 && document.getElementById("load-user-prefrences-apply-changes").checked)
+              {
+  
+                if(item['type'] == 'node')
+                {
+                   // apply node width and height change to existing elements              
+                  targetNodes.forEach(function(node) {
+                    cy.trigger('noderesize.resizestart', [null, node]);
+                    chiseInstance.resizeNodes(node, nameToValue["width"], nameToValue["height"], false);
+                    cy.trigger('noderesize.resizeend', [null, node]);
+                  });
+                  
+                  chiseInstance.changeData(targetNodes, "border-color", nameToValue["border-color"]);
+                  chiseInstance.changeData(targetNodes, "border-width", nameToValue["border-width"]);
+                  chiseInstance.changeData(targetNodes, "background-color",  nameToValue["background-color"]);
+  
+                  //hande opacity
+                  chiseInstance.changeData(targetNodes, "background-opacity",  nameToValue["background-opacity"]);
+                  chiseInstance.changeData(targetNodes, "background-image-opacity",  nameToValue["background-image-opacity"]);
+  
+                  //handel font
+                  var data = {};            
+                  data['font-size'] = nameToValue['font-size'] != '' ? nameToValue['font-size'] : undefined;
+                  data['font-family'] = nameToValue['font-sifamilyze'] != '' ? nameToValue['font-family'] : undefined;
+                  data['font-weight'] = nameToValue['font-weight'] != '' ? nameToValue['font-weight'] : undefined;
+                  data['font-style'] = nameToValue['font-style'] != '' ? nameToValue['font-style'] : undefined;
+                  data['color'] = nameToValue['color'] != '' ? nameToValue['color'] : undefined; 
+                  chiseInstance.changeFontProperties(targetNodes, data);
+  
+                  targetNodes.forEach(function(node) {
+                    node.data('background-image', nameToValue['background-image']);
+                    node.data('background-position-x', nameToValue['background-position-x']);
+                    node.data('background-position-y', nameToValue['background-position-y']);
+                    node.data('background-width', nameToValue['background-width']);
+                    node.data('background-height', nameToValue['background-height']);
+                    node.data('background-fit', nameToValue['background-fit']);
+                    node.data('background-image-opacity', nameToValue['background-image-opacity']);
                   });
+  
+                  chiseInstance.setMultimerStatus(targetNodes,nameToValue['multimer'] );
+                  chiseInstance.setCloneMarkerStatus(targetNodes,nameToValue['clonemarker'] ); 
                 }
+                else
+                {
+                  //if type is edge only apply width and line-color
+                  chiseInstance.changeData(targetNodes, "width", nameToValue['width']);
+                  chiseInstance.changeData(targetNodes, "line-color", nameToValue['line-color']);
+                }             
               }
-            });
-
-            Object.keys(mapTabLabelPanel.params).forEach(function (key, index) {
-              if (
-                typeof preferences.currentGeneralProperties[key] !== "undefined"
-              ) {
-                mapTabLabelPanel.params[key].value =
-                  preferences.currentGeneralProperties[key];
-                actions.push({
-                  name: "changeMenu",
-                  param: mapTabLabelPanel.params[key],
-                });
-              }
-            });
-
-            Object.keys(mapTabRearrangementPanel.params).forEach(function (
-              key,
-              index
-            ) {
-              if (
-                typeof preferences.currentGeneralProperties[key] !== "undefined"
-              ) {
-                mapTabRearrangementPanel.params[key].value =
-                  preferences.currentGeneralProperties[key];
-                actions.push({
-                  name: "changeMenu",
-                  param: mapTabRearrangementPanel.params[key],
-                });
-              }
-            });
-
-            var applyColorScheme = false;
-            var defaultColorScheme =
-              appUtilities.defaultGeneralProperties.mapColorScheme;
-            var defaultColorSchemeStyle =
-              appUtilities.defaultGeneralProperties.mapColorSchemeStyle;
-            if (
-              typeof preferences.currentGeneralProperties.mapColorScheme !==
-              "undefined"
-            ) {
-              applyColorScheme = true;
-              defaultColorScheme =
-                preferences.currentGeneralProperties.mapColorScheme;
+              //set the loaded styles as default values
+              chiseInstance.elementUtilities.setDefaultProperties( sbgnClass, nameToValue );
+  
+  
+            
+  
             }
 
-            if (
-              typeof preferences.currentGeneralProperties
-                .mapColorSchemeStyle !== "undefined"
-            ) {
-              applyColorScheme = true;
-              defaultColorSchemeStyle =
-                preferences.currentGeneralProperties.mapColorSchemeStyle;
-            }
-            if (applyColorScheme) {
-              appUtilities.applyMapColorScheme(
-                defaultColorScheme,
-                defaultColorSchemeStyle,
-                colorSchemeInspectorView
-              ); // default color scheme
-            }
-            ur.do("batch", actions);
-          }
-        }
-
-        if (typeof preferences.elementsStyles !== "undefined") {
-          preferences.elementsStyles.forEach(function (item, index) {
-            var sbgnClass = item["element"];
-            if (
-              document.getElementById(
-                "load-user-prefrences-object-" + sbgnClass + "-check"
-              ).checked
-            ) {
-              var targetNodes = cy.elements('[class="' + sbgnClass + '"]');
-              if (item.styles.length > 0) {
-                var nameToValue = {};
-                item.styles.forEach(function (style, index) {
-                  nameToValue[style.name] = style.value;
-                });
-
-                //apply changes to exisiting elements only if user check the option and there are elements on canvas of this sbgn class type
-                //else just set the styles as default values
-                if (
-                  targetNodes.length > 0 &&
-                  document.getElementById("load-user-prefrences-apply-changes")
-                    .checked
-                ) {
-                  if (item["type"] == "node") {
-                    // apply node width and height change to existing elements
-                    targetNodes.forEach(function (node) {
-                      cy.trigger("noderesize.resizestart", [null, node]);
-                      chiseInstance.resizeNodes(
-                        node,
-                        nameToValue["width"],
-                        nameToValue["height"],
-                        false
-                      );
-                      cy.trigger("noderesize.resizeend", [null, node]);
-                    });
-
-                    chiseInstance.changeData(
-                      targetNodes,
-                      "border-color",
-                      nameToValue["border-color"]
-                    );
-                    chiseInstance.changeData(
-                      targetNodes,
-                      "border-width",
-                      nameToValue["border-width"]
-                    );
-                    chiseInstance.changeData(
-                      targetNodes,
-                      "background-color",
-                      nameToValue["background-color"]
-                    );
-
-                    //hande opacity
-                    chiseInstance.changeData(
-                      targetNodes,
-                      "background-opacity",
-                      nameToValue["background-opacity"]
-                    );
-                    chiseInstance.changeData(
-                      targetNodes,
-                      "background-image-opacity",
-                      nameToValue["background-image-opacity"]
-                    );
-
-                    //handel font
-                    var data = {};
-                    data["font-size"] =
-                      nameToValue["font-size"] != ""
-                        ? nameToValue["font-size"]
-                        : undefined;
-                    data["font-family"] =
-                      nameToValue["font-sifamilyze"] != ""
-                        ? nameToValue["font-family"]
-                        : undefined;
-                    data["font-weight"] =
-                      nameToValue["font-weight"] != ""
-                        ? nameToValue["font-weight"]
-                        : undefined;
-                    data["font-style"] =
-                      nameToValue["font-style"] != ""
-                        ? nameToValue["font-style"]
-                        : undefined;
-                    data["color"] =
-                      nameToValue["color"] != ""
-                        ? nameToValue["color"]
-                        : undefined;
-                    chiseInstance.changeFontProperties(targetNodes, data);
-
-                    targetNodes.forEach(function (node) {
-                      node.data(
-                        "background-image",
-                        nameToValue["background-image"]
-                      );
-                      node.data(
-                        "background-position-x",
-                        nameToValue["background-position-x"]
-                      );
-                      node.data(
-                        "background-position-y",
-                        nameToValue["background-position-y"]
-                      );
-                      node.data(
-                        "background-width",
-                        nameToValue["background-width"]
-                      );
-                      node.data(
-                        "background-height",
-                        nameToValue["background-height"]
-                      );
-                      node.data(
-                        "background-fit",
-                        nameToValue["background-fit"]
-                      );
-                      node.data(
-                        "background-image-opacity",
-                        nameToValue["background-image-opacity"]
-                      );
-                    });
-
-                    chiseInstance.setMultimerStatus(
-                      targetNodes,
-                      nameToValue["multimer"]
-                    );
-                    chiseInstance.setCloneMarkerStatus(
-                      targetNodes,
-                      nameToValue["clonemarker"]
-                    );
-                  } else {
-                    //if type is edge only apply width and line-color
-                    chiseInstance.changeData(
-                      targetNodes,
-                      "width",
-                      nameToValue["width"]
-                    );
-                    chiseInstance.changeData(
-                      targetNodes,
-                      "line-color",
-                      nameToValue["line-color"]
-                    );
-                  }
-                }
-                //set the loaded styles as default values
-                chiseInstance.elementUtilities.setDefaultProperties(
-                  sbgnClass,
-                  nameToValue
-                );
-              }
-
-              if (item.infoBoxStyles.length > 0) {
-                //set info boxes styles
-                var infoStyles = item.infoBoxStyles;
-
-                infoStyles.forEach(function (infoStyle) {
-                  var currentDefaults =
-                    chiseInstance.elementUtilities.getDefaultProperties(
-                      sbgnClass
-                    )[infoStyle.clazz];
-                  var infoboxStyle = $.extend(
-                    {},
-                    currentDefaults,
-                    infoStyle.styles
-                  );
-                  chiseInstance.setDefaultProperty(
-                    sbgnClass,
-                    infoStyle.clazz,
-                    infoboxStyle
-                  );
-
-                  //statesandinfos
-
-                  if (
-                    targetNodes.length > 0 &&
-                    document.getElementById(
-                      "load-user-prefrences-apply-changes"
-                    ).checked
-                  ) {
-                    targetNodes.forEach(function (node) {
-                      var infoboxesIndices = node.data("statesandinfos").length;
-                      for (var i = 0; i < infoboxesIndices; i++) {
-                        if (
-                          node.data("statesandinfos")[i].clazz ==
-                          infoStyle.clazz
-                        ) {
-                          appUtilities
-                            .getActiveChiseInstance()
-                            .updateInfoboxStyle(node, i, infoboxStyle);
-                        }
+            if(item.infoBoxStyles.length > 0){
+                //set info boxes styles 
+              var infoStyles =  item.infoBoxStyles;
+  
+             
+              infoStyles.forEach(function(infoStyle){
+  
+                var currentDefaults = chiseInstance.elementUtilities.getDefaultProperties( sbgnClass )[ infoStyle.clazz ];
+                var infoboxStyle = $.extend( {}, currentDefaults, infoStyle.styles );
+                chiseInstance.setDefaultProperty( sbgnClass, infoStyle.clazz, infoboxStyle );
+  
+                //statesandinfos
+
+                if(targetNodes.length > 0 && document.getElementById("load-user-prefrences-apply-changes").checked){
+                  targetNodes.forEach(function(node) {
+                    var infoboxesIndices = node.data("statesandinfos").length;
+                    for(var i = 0 ; i< infoboxesIndices ; i++){
+                      if(node.data('statesandinfos')[i].clazz == infoStyle.clazz){
+                        appUtilities.getActiveChiseInstance().updateInfoboxStyle(node, i, infoboxStyle);    
                       }
-                    });
-                  }
-                });
-              }
-            }
-          });
+    
+                    }
+                  });
+                } 
+              });
+      
+            }  
+         
         }
+        });
+      }
+    
+       
+      $(self.el).modal('toggle');
+    });
 
-        $(self.el).modal("toggle");
-      });
-
-    $(document)
-      .off("click", "#load-user-preferences-cancel")
-      .on("click", "#load-user-preferences-cancel", function (evt) {
-        $(self.el).modal("toggle");
-      });
+    $(document).off("click", "#load-user-preferences-cancel").on("click", "#load-user-preferences-cancel", function (evt) {
+      $(self.el).modal('toggle');
+    });
     return this;
-  },
+  }
 });
 
 /*
@@ -3898,23 +3027,19 @@ var PromptConfirmationView = Backbone.View.extend({
     self.template = _.template($("#prompt-confirmation-template").html());
 
     $(self.el).html(self.template);
-    $(self.el).modal("show");
+    $(self.el).modal('show');
 
-    $(document)
-      .off("click", "#prompt-confirmation-accept")
-      .on("click", "#prompt-confirmation-accept", function (evt) {
-        afterFunction();
-        $(self.el).modal("toggle");
-      });
+    $(document).off("click", "#prompt-confirmation-accept").on("click", "#prompt-confirmation-accept", function (evt) {
+      afterFunction();
+      $(self.el).modal('toggle');
+    });
 
-    $(document)
-      .off("click", "#prompt-confirmation-cancel")
-      .on("click", "#prompt-confirmation-cancel", function (evt) {
-        $(self.el).modal("toggle");
-      });
+    $(document).off("click", "#prompt-confirmation-cancel").on("click", "#prompt-confirmation-cancel", function (evt) {
+      $(self.el).modal('toggle');
+    });
 
     return this;
-  },
+  }
 });
 
 var PromptMapTypeView = Backbone.View.extend({
@@ -3922,144 +3047,131 @@ var PromptMapTypeView = Backbone.View.extend({
     var self = this;
     self.template = _.template($("#prompt-mapType-template").html());
   },
-  render: function (message, suggestion, afterFunction) {
+  render: function (message,suggestion, afterFunction) {
     var self = this;
     self.template = _.template($("#prompt-mapType-template").html());
 
     var param = {};
     param.message = message;
-    param.suggestion = suggestion;
+    param.suggestion =suggestion;
     self.template = self.template(param);
 
     $(self.el).html(self.template);
-    $(self.el).modal("show");
+    $(self.el).modal('show');
 
-    $(document)
-      .off("click", "#prompt-mapType-accept")
-      .on("click", "#prompt-mapType-accept", function (evt) {
-        //afterFunction();
-        $(self.el).modal("toggle");
-      });
+    $(document).off("click", "#prompt-mapType-accept").on("click", "#prompt-mapType-accept", function (evt) {
+      //afterFunction();
+      $(self.el).modal('toggle');
+    });
 
-    $(document)
-      .off("click", "#prompt-mapType-cancel")
-      .on("click", "#prompt-mapType-cancel", function (evt) {
-        $(self.el).modal("toggle");
-      });
+    $(document).off("click", "#prompt-mapType-cancel").on("click", "#prompt-mapType-cancel", function (evt) {
+      $(self.el).modal('toggle');
+    });
 
     return this;
-  },
+  }
 });
 
 var PromptInvalidQueryView = Backbone.View.extend({
   initialize: function () {
-    var self = this;
-    self.template = _.template($("#prompt-invalidQuery-template").html());
+      var self = this;
+      self.template = _.template($("#prompt-invalidQuery-template").html());
   },
   render: function () {
-    var self = this;
-    self.template = _.template($("#prompt-invalidQuery-template").html());
-
-    $(self.el).html(self.template);
-    $(self.el).modal("show");
-
-    $(document)
-      .off("click", "#prompt-invalidQuery-confirm")
-      .on("click", "#prompt-invalidQuery-confirm", function (evt) {
-        $(self.el).modal("toggle");
-        if (PCdialog == "Neighborhood")
-          appUtilities.neighborhoodQueryView.render();
-        else if (PCdialog == "PathsBetween")
-          appUtilities.pathsBetweenQueryView.render();
-        else if (PCdialog == "PathsFromTo")
-          appUtilities.pathsFromToQueryView.render();
-        else if (PCdialog == "CommonStream")
-          appUtilities.commonStreamQueryView.render();
+      var self = this;
+      self.template = _.template($("#prompt-invalidQuery-template").html());
+
+      $(self.el).html(self.template);
+      $(self.el).modal('show');
+
+      $(document).off("click", "#prompt-invalidQuery-confirm").on("click", "#prompt-invalidQuery-confirm", function (evt) {
+          $(self.el).modal('toggle');
+          if (PCdialog == "Neighborhood")
+            appUtilities.neighborhoodQueryView.render();
+          else if (PCdialog == "PathsBetween")
+              appUtilities.pathsBetweenQueryView.render();
+          else if (PCdialog == "PathsFromTo")
+              appUtilities.pathsFromToQueryView.render();
+          else if (PCdialog == "CommonStream")
+              appUtilities.commonStreamQueryView.render();
       });
 
-    return this;
-  },
+      return this;
+  }
 });
 
 var PromptInvalidLengthLimitView = Backbone.View.extend({
-  initialize: function () {
-    var self = this;
-    self.template = _.template($("#prompt-invalidLengthLimit-template").html());
-  },
-  render: function () {
-    var self = this;
-    self.template = _.template($("#prompt-invalidLengthLimit-template").html());
+    initialize: function () {
+        var self = this;
+        self.template = _.template($("#prompt-invalidLengthLimit-template").html());
+    },
+    render: function () {
+        var self = this;
+        self.template = _.template($("#prompt-invalidLengthLimit-template").html());
 
-    $(self.el).html(self.template);
-    if (PCdialog == "Neighborhood")
-      document.getElementById("length-limit-constant").innerHTML =
-        "Length limit can be at most 2.";
-    else
-      document.getElementById("length-limit-constant").innerHTML =
-        "Length limit can be at most 3.";
-    $(self.el).modal("show");
-
-    $(document)
-      .off("click", "#prompt-invalidLengthLimit-confirm")
-      .on("click", "#prompt-invalidLengthLimit-confirm", function (evt) {
-        $(self.el).modal("toggle");
+        $(self.el).html(self.template);
         if (PCdialog == "Neighborhood")
-          appUtilities.neighborhoodQueryView.render();
-        else if (PCdialog == "PathsBetween")
-          appUtilities.pathsBetweenQueryView.render();
-        else if (PCdialog == "PathsFromTo")
-          appUtilities.pathsFromToQueryView.render();
-        else if (PCdialog == "CommonStream")
-          appUtilities.commonStreamQueryView.render();
-      });
+          document.getElementById("length-limit-constant").innerHTML = "Length limit can be at most 2.";								  
+        else
+            document.getElementById("length-limit-constant").innerHTML = "Length limit can be at most 3.";
+        $(self.el).modal('show');
+
+        $(document).off("click", "#prompt-invalidLengthLimit-confirm").on("click", "#prompt-invalidLengthLimit-confirm", function (evt) {
+            $(self.el).modal('toggle');
+            if (PCdialog == "Neighborhood")
+                appUtilities.neighborhoodQueryView.render();
+            else if (PCdialog == "PathsBetween")
+                appUtilities.pathsBetweenQueryView.render();
+            else if (PCdialog == "PathsFromTo")
+                appUtilities.pathsFromToQueryView.render();
+            else if (PCdialog == "CommonStream")
+                appUtilities.commonStreamQueryView.render();
+			     				  
+        });
 
-    return this;
-  },
+        return this;
+    }
 });
 
 var PromptInvalidURIView = Backbone.View.extend({
-  initialize: function () {
-    var self = this;
-    self.template = _.template($("#prompt-invalidURI-template").html());
-  },
-  render: function () {
-    var self = this;
-    self.template = _.template($("#prompt-invalidURI-template").html());
+    initialize: function () {
+        var self = this;
+        self.template = _.template($("#prompt-invalidURI-template").html());
+    },
+    render: function () {
+        var self = this;
+        self.template = _.template($("#prompt-invalidURI-template").html());
 
-    $(self.el).html(self.template);
-    $(self.el).modal("show");
+        $(self.el).html(self.template);
+        $(self.el).modal('show');
 
-    $(document)
-      .off("click", "#prompt-invalidURI-confirm")
-      .on("click", "#prompt-invalidURI-confirm", function (evt) {
-        $(self.el).modal("toggle");
-        appUtilities.pathsByURIQueryView.render();
-      });
+        $(document).off("click", "#prompt-invalidURI-confirm").on("click", "#prompt-invalidURI-confirm", function (evt) {
+            $(self.el).modal('toggle');
+            appUtilities.pathsByURIQueryView.render();
+        });
 
-    return this;
-  },
+        return this;
+    }
 });
 
 var PromptInvalidURIWarning = Backbone.View.extend({
-  initialize: function () {
-    var self = this;
-    self.template = _.template($("#prompt-invalidURI-template").html());
-  },
-  render: function () {
-    var self = this;
-    self.template = _.template($("#prompt-invalidURI-template").html());
+    initialize: function () {
+        var self = this;
+        self.template = _.template($("#prompt-invalidURI-template").html());
+    },
+    render: function () {
+        var self = this;
+        self.template = _.template($("#prompt-invalidURI-template").html());
 
-    $(self.el).html(self.template);
-    $(self.el).modal("show");
+        $(self.el).html(self.template);
+        $(self.el).modal('show');
 
-    $(document)
-      .off("click", "#prompt-invalidURI-confirm")
-      .on("click", "#prompt-invalidURI-confirm", function (evt) {
-        $(self.el).modal("toggle");
-      });
+        $(document).off("click", "#prompt-invalidURI-confirm").on("click", "#prompt-invalidURI-confirm", function (evt) {
+            $(self.el).modal('toggle');
+        });
 
-    return this;
-  },
+        return this;
+    }
 });
 
 var PromptInvalidFileView = Backbone.View.extend({
@@ -4072,116 +3184,85 @@ var PromptInvalidFileView = Backbone.View.extend({
     self.template = _.template($("#prompt-invalidFile-template").html());
 
     $(self.el).html(self.template);
-    $(self.el).modal("show");
+    $(self.el).modal('show');
 
-    $(document)
-      .off("click", "#prompt-invalidFile-confirm")
-      .on("click", "#prompt-invalidFile-confirm", function (evt) {
-        $(self.el).modal("toggle");
-      });
+    $(document).off("click", "#prompt-invalidFile-confirm").on("click", "#prompt-invalidFile-confirm", function (evt) {
+      $(self.el).modal('toggle');
+    });
 
     return this;
-  },
+  }
 });
 
 var PromptFileConversionErrorView = Backbone.View.extend({
-  initialize: function () {
-    var self = this;
-    self.template = _.template(
-      $("#prompt-fileConversionError-template").html()
-    );
-  },
-  render: function () {
-    var self = this;
-    self.template = _.template(
-      $("#prompt-fileConversionError-template").html()
-    );
-
-    $(self.el).html(self.template);
-    $(self.el).modal("show");
-
-    $(document)
-      .off("click", "#prompt-fileConversionError-confirm")
-      .on("click", "#prompt-fileConversionError-confirm", function (evt) {
-        $(self.el).modal("toggle");
-      });
-
-    return this;
-  },
+   initialize: function () {
+     var self = this;
+     self.template = _.template($("#prompt-fileConversionError-template").html());
+   },
+   render: function() {
+     var self = this;
+     self.template = _.template($("#prompt-fileConversionError-template").html());
+
+     $(self.el).html(self.template);
+     $(self.el).modal('show');
+
+     $(document).off("click", "#prompt-fileConversionError-confirm").on("click", "#prompt-fileConversionError-confirm", function (evt) {
+         $(self.el).modal('toggle');
+     });
+
+     return this;
+   }
 });
 
 var PromptSbmlConversionErrorView = Backbone.View.extend({
   initialize: function () {
     var self = this;
-    self.template = _.template(
-      $("#prompt-sbmlConversionError-template").html()
-    );
+    self.template = _.template($("#prompt-sbmlConversionError-template").html());
   },
-  render: function (data, errorMessage) {
+  render: function(data, errorMessage) {
     var self = this;
-    self.template = _.template(
-      $("#prompt-sbmlConversionError-template").html()
-    );
+    self.template = _.template($("#prompt-sbmlConversionError-template").html());
 
     $(self.el).html(self.template);
-    $(self.el).modal("show");
-
-    $(document)
-      .off("click", "#prompt-sbml-confirm")
-      .on("click", "#prompt-sbml-confirm", function (evt) {
-        var userAgreed = document.getElementById("sbml-coversion-user-agree")
-          .checked
-          ? true
-          : false;
-
-        if (userAgreed) {
-          setTimeout(function () {
-            $.ajax({
-              type: "post",
-              url: "/utilities/sendEmail",
-              headers: {
-                "Content-Type":
-                  "application/x-www-form-urlencoded; charset=UTF-8",
-              },
-              data: {
-                fileContent: data,
-                message: "Error message: " + errorMessage,
-              },
-              success: function (data) {},
-              error: function (xhr, options, err) {
-                console.log(err);
-              },
-            });
-          }, 0);
-        } else {
-          setTimeout(function () {
-            $.ajax({
-              type: "post",
-              url: "/utilities/sendEmail",
-              headers: {
-                "Content-Type":
-                  "application/x-www-form-urlencoded; charset=UTF-8",
-              },
-              data: {
-                fileContent: "no-data",
-                message:
-                  "The user didn't consent to sharing their file." +
-                  "\nError message: " +
-                  errorMessage,
-              },
-              success: function (data) {},
-              error: function (xhr, options, err) {
-                console.log(err);
-              },
-            });
-          }, 0);
-        }
-
-        $(self.el).modal("toggle");
-      });
+    $(self.el).modal('show');
+
+    $(document).off("click", "#prompt-sbml-confirm").on("click", "#prompt-sbml-confirm", function (evt) {   
+      var userAgreed = document.getElementById("sbml-coversion-user-agree").checked ? true : false;
+     
+      if(userAgreed){
+        setTimeout(function(){
+        $.ajax({
+          type: 'post',
+          url: "/utilities/sendEmail",
+          headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"},
+          data: { fileContent: data , message: "Error message: "+ errorMessage},            
+          success: function( data ) {        
+          },
+          error: function(xhr, options, err){             
+            console.log( err );
+            
+          }        })} , 0); 
+      }else{
+        setTimeout(function(){
+          $.ajax({
+            type: 'post',
+            url: "/utilities/sendEmail",
+            headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"},
+            data: { fileContent: "no-data" , message: "The user didn't consent to sharing their file." + "\nError message: " + errorMessage},            
+            success: function( data ) {        
+            },
+            error: function(xhr, options, err){             
+              console.log( err );
+              
+            }        })} , 0); 
+      }    
+      
+      $(self.el).modal('toggle');
+        
+    });
 
     return this;
-  },
+  }
 });
 var PromptInvalidURLWarning = Backbone.View.extend({
   initialize: function () {
@@ -4193,16 +3274,14 @@ var PromptInvalidURLWarning = Backbone.View.extend({
     self.template = _.template($("#prompt-invalidURL-template").html());
 
     $(self.el).html(self.template);
-    $(self.el).modal("show");
+    $(self.el).modal('show');
 
-    $(document)
-      .off("click", "#prompt-invalidURL-confirm")
-      .on("click", "#prompt-invalidURL-confirm", function (evt) {
-        $(self.el).modal("toggle");
-      });
+    $(document).off("click", "#prompt-invalidURL-confirm").on("click", "#prompt-invalidURL-confirm", function (evt) {
+      $(self.el).modal('toggle');
+    });
 
     return this;
-  },
+  }
 });
 
 var PromptInvalidImageWarning = Backbone.View.extend({
@@ -4214,22 +3293,20 @@ var PromptInvalidImageWarning = Backbone.View.extend({
     var self = this;
     var tmp = $("#prompt-invalidImage-template").html();
     var spanText = '<span class="add-on layout-text">';
-    var s = tmp.indexOf(spanText);
-    var e = tmp.indexOf("</span>");
+    var s = tmp.indexOf(spanText)
+    var e = tmp.indexOf('</span>');
     tmp = tmp.substring(0, s + spanText.length) + msg + tmp.substring(e);
     self.template = _.template(tmp);
 
     $(self.el).html(self.template);
-    $(self.el).modal("show");
+    $(self.el).modal('show');
 
-    $(document)
-      .off("click", "#prompt-invalidImage-confirm")
-      .on("click", "#prompt-invalidImage-confirm", function (evt) {
-        $(self.el).modal("toggle");
-      });
+    $(document).off("click", "#prompt-invalidImage-confirm").on("click", "#prompt-invalidImage-confirm", function (evt) {
+      $(self.el).modal('toggle');
+    });
 
     return this;
-  },
+  }
 });
 
 var PromptInvalidEdgeWarning = Backbone.View.extend({
@@ -4242,191 +3319,127 @@ var PromptInvalidEdgeWarning = Backbone.View.extend({
     self.template = _.template($("#prompt-invalidEdge-template").html());
 
     $(self.el).html(self.template);
-    $(self.el).modal("show");
+    $(self.el).modal('show');
 
-    $(document)
-      .off("click", "#prompt-invalidEdge-confirm")
-      .on("click", "#prompt-invalidEdge-confirm", function (evt) {
-        $(self.el).modal("toggle");
-      });
+    $(document).off("click", "#prompt-invalidEdge-confirm").on("click", "#prompt-invalidEdge-confirm", function (evt) {
+      $(self.el).modal('toggle');
+    });
 
     return this;
-  },
+  }
 });
 
 var ReactionTemplateView = Backbone.View.extend({
   addMacromolecule: function (type, i) {
-    var html =
-      "<tr><td>" +
-      "<input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='" +
-      i +
-      "' value=''></input>" +
-      "</td><td>";
-    if (type == "reaction") {
-      html +=
-        "<select class='template-reaction-molecule-type sbgn-output-medium layout-text' name='" +
-        i +
-        "' style='width: 120px'>" +
-        "<option value='Macromolecule' selected> Macromolecule </option>" +
-        "<option value='Simple Chemical'> Simple Chemical </option></td>";
-      html +=
-        "<td><img style='vertical-align: text-bottom;' class='template-reaction-delete-button' width='16px' height='16px' name='" +
-        i +
-        "' src='app/img/toolbar/delete-simple.svg'style='margin-right: 30px'/></td></tr>";
-      $("#template-reaction-dissociated-table :input.template-reaction-textbox")
-        .last()
-        .closest("tr")
-        .after(html);
-    } else if (type == "left") {
-      html +=
-        "<select class='template-reaction-molecule-type sbgn-output-medium layout-text' name='" +
-        i +
-        "' style='width: 120px'>" +
-        "<option value='Macromolecule'> Macromolecule </option>" +
-        "<option value='Simple Chemical' selected> Simple Chemical </option></td>";
-      html +=
-        "<td><img style='vertical-align: text-bottom;' class='template-reversible-input-delete-button' width='16px' height='16px' name='" +
-        i +
-        "' src='app/img/toolbar/delete-simple.svg' style='margin-right: 30px'/></td></tr>";
-      $("#template-reversible-input-table :input.template-reaction-textbox")
-        .last()
-        .closest("tr")
-        .after(html);
-    } else {
-      html +=
-        "<select class='template-reaction-molecule-type sbgn-output-medium layout-text' name='" +
-        i +
-        "' style='width: 120px'>" +
-        "<option value='Macromolecule'> Macromolecule </option>" +
-        "<option value='Simple Chemical' selected> Simple Chemical </option></td>";
-      html +=
-        "<td><img style='vertical-align: text-bottom;' class='template-reversible-output-delete-button' width='16px' height='16px' name='" +
-        i +
-        "' src='app/img/toolbar/delete-simple.svg'/></td></tr>";
-      $("#template-reversible-output-table :input.template-reaction-textbox")
-        .last()
-        .closest("tr")
-        .after(html);
+    var html = "<tr><td>"
+        + "<input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='"
+        + i + "' value=''></input>"
+        + "</td><td>";
+    if( type == "reaction"){
+      html +=  "<select class='template-reaction-molecule-type sbgn-output-medium layout-text' name='" + i + "' style='width: 120px'>"
+             + "<option value='Macromolecule' selected> Macromolecule </option>"
+             + "<option value='Simple Chemical'> Simple Chemical </option></td>";
+      html +=  "<td><img style='vertical-align: text-bottom;' class='template-reaction-delete-button' width='16px' height='16px' name='" + i + "' src='app/img/toolbar/delete-simple.svg'style='margin-right: 30px'/></td></tr>";
+      $('#template-reaction-dissociated-table :input.template-reaction-textbox').last().closest('tr').after(html);
+    }
+    else if( type == "left"){
+      html +=  "<select class='template-reaction-molecule-type sbgn-output-medium layout-text' name='" + i + "' style='width: 120px'>"
+             + "<option value='Macromolecule'> Macromolecule </option>"
+             + "<option value='Simple Chemical' selected> Simple Chemical </option></td>";
+      html += "<td><img style='vertical-align: text-bottom;' class='template-reversible-input-delete-button' width='16px' height='16px' name='" + i + "' src='app/img/toolbar/delete-simple.svg' style='margin-right: 30px'/></td></tr>";
+      $('#template-reversible-input-table :input.template-reaction-textbox').last().closest('tr').after(html);
+    }
+    else{
+      html +=  "<select class='template-reaction-molecule-type sbgn-output-medium layout-text' name='" + i + "' style='width: 120px'>"
+             + "<option value='Macromolecule'> Macromolecule </option>"
+             + "<option value='Simple Chemical' selected> Simple Chemical </option></td>";
+      html += "<td><img style='vertical-align: text-bottom;' class='template-reversible-output-delete-button' width='16px' height='16px' name='" + i + "' src='app/img/toolbar/delete-simple.svg'/></td></tr>";
+      $('#template-reversible-output-table :input.template-reaction-textbox').last().closest('tr').after(html);
     }
     return html;
   },
   removeMacromolecule: function (type, i) {
-    if (type == "reaction") {
-      $(
-        '#template-reaction-dissociated-table :input.template-reaction-textbox[name="' +
-          i +
-          '"]'
-      )
-        .closest("tr")
-        .remove();
-    } else if (type == "left") {
-      $(
-        '#template-reversible-input-table :input.template-reaction-textbox[name="' +
-          i +
-          '"]'
-      )
-        .closest("tr")
-        .remove();
-    } else {
-      $(
-        '#template-reversible-output-table :input.template-reaction-textbox[name="' +
-          i +
-          '"]'
-      )
-        .closest("tr")
-        .remove();
+    if(type == "reaction"){
+      $('#template-reaction-dissociated-table :input.template-reaction-textbox[name="'+i+'"]').closest('tr').remove();;
+    }
+    else if(type == "left"){
+      $('#template-reversible-input-table :input.template-reaction-textbox[name="'+i+'"]').closest('tr').remove();
+    }
+    else{
+      $('#template-reversible-output-table :input.template-reaction-textbox[name="'+i+'"]').closest('tr').remove();
     }
   },
   switchInputOutput: function (e) {
     var self = this;
-    if (e == "association") {
-      $("#reaction-template-left-td").html(self.associatedHTMLContent);
-      $("#reaction-template-right-td").html(self.dissociatedHTMLContent);
-    } else if (e == "dissociation") {
-      $("#reaction-template-left-td").html(self.dissociatedHTMLContent);
-      $("#reaction-template-right-td").html(self.associatedHTMLContent);
-    } else {
-      $("#reaction-template-left-td").html(self.reversibleInputHTMLContent);
-      $("#reaction-template-right-td").html(self.reversibleOutputHTMLContent);
+    if(e == "association") {
+      $('#reaction-template-left-td').html(self.associatedHTMLContent);
+      $('#reaction-template-right-td').html(self.dissociatedHTMLContent);
+    }
+    else if(e == "dissociation"){
+      $('#reaction-template-left-td').html(self.dissociatedHTMLContent);
+      $('#reaction-template-right-td').html(self.associatedHTMLContent);
+    }
+    else{
+      $('#reaction-template-left-td').html(self.reversibleInputHTMLContent);
+      $('#reaction-template-right-td').html(self.reversibleOutputHTMLContent);
       self.disableDeleteButtonStyle("left");
       self.disableDeleteButtonStyle("right");
     }
   },
   getAllParameters: function () {
-    var templateType = $("#reaction-template-type-select").val();
-    var templateReactionComplexName = $(
-      "#template-reaction-complex-name"
-    ).val();
-    var nodeNames = $(
-      "#template-reaction-dissociated-table  :input.template-reaction-textbox"
-    )
-      .map(function () {
+    var templateType = $('#reaction-template-type-select').val();
+    var templateReactionComplexName = $('#template-reaction-complex-name').val();
+    var nodeNames = $('#template-reaction-dissociated-table  :input.template-reaction-textbox').map(function(){
         return {
-          name: $(this).val(),
-          id: $(this).attr("name").charAt(0),
+            name: $(this).val(),
+            id: $(this).attr('name').charAt(0)
         };
-      })
-      .toArray();
-    var nodeTypes = $(
-      "#template-reaction-dissociated-table  :input.template-reaction-molecule-type :selected"
-    )
-      .map(function () {
+    }).toArray();
+    var nodeTypes = $('#template-reaction-dissociated-table  :input.template-reaction-molecule-type :selected').map(function(){
         return $(this).val();
-      })
-      .toArray();
+    }).toArray();
     var nodeList = [];
-    for (var i = 0; i < nodeNames.length; i++) {
-      nodeList.push({
-        name: nodeNames[i].name,
-        type: nodeTypes[i],
-        id: nodeNames[i].id,
-      });
+    for( var i = 0; i < nodeNames.length; i++){
+      nodeList.push(
+        {
+          "name": nodeNames[i].name,
+          "type": nodeTypes[i],
+          "id": nodeNames[i].id
+        }
+      );
     }
-    var reversibleInputNodeNames = $(
-      "#template-reversible-input-table :input.template-reaction-textbox"
-    )
-      .map(function () {
-        return $(this).val();
-      })
-      .toArray();
-    var reversibleInputNodeTypes = $(
-      "#template-reversible-input-table :input.template-reaction-molecule-type :selected"
-    )
-      .map(function () {
-        return $(this).val();
-      })
-      .toArray();
-    var reversibleOutputNodeNames = $(
-      "#template-reversible-output-table :input.template-reaction-textbox"
-    )
-      .map(function () {
-        return $(this).val();
-      })
-      .toArray();
-    var reversibleOutputNodeTypes = $(
-      "#template-reversible-output-table :input.template-reaction-molecule-type :selected"
-    )
-      .map(function () {
-        return $(this).val();
-      })
-      .toArray();
+    var reversibleInputNodeNames = $('#template-reversible-input-table :input.template-reaction-textbox').map(function(){
+      return $(this).val();
+    }).toArray();
+    var reversibleInputNodeTypes = $('#template-reversible-input-table :input.template-reaction-molecule-type :selected').map(function(){
+      return $(this).val();
+    }).toArray();
+    var reversibleOutputNodeNames = $('#template-reversible-output-table :input.template-reaction-textbox').map(function(){
+      return $(this).val();
+    }).toArray();
+    var reversibleOutputNodeTypes = $('#template-reversible-output-table :input.template-reaction-molecule-type :selected').map(function(){
+      return $(this).val();
+    }).toArray();
     var reversibleInputNodeList = [];
-    for (var i = 0; i < reversibleInputNodeNames.length; i++) {
-      reversibleInputNodeList.push({
-        name: reversibleInputNodeNames[i],
-        type: reversibleInputNodeTypes[i],
-      });
+    for(var i = 0; i < reversibleInputNodeNames.length; i++){
+      reversibleInputNodeList.push(
+        {
+          name: reversibleInputNodeNames[i],
+          type: reversibleInputNodeTypes[i]
+        }
+      );
     }
     var reversibleOutputNodeList = [];
-    for (var i = 0; i < reversibleOutputNodeNames.length; i++) {
-      reversibleOutputNodeList.push({
-        name: reversibleOutputNodeNames[i],
-        type: reversibleOutputNodeTypes[i],
-      });
+    for(var i = 0; i < reversibleOutputNodeNames.length; i++){
+      reversibleOutputNodeList.push(
+        {
+          name: reversibleOutputNodeNames[i],
+          type: reversibleOutputNodeTypes[i]
+        }
+      );
     }
     // enable complex name only if the user provided something
-    var templateReactionEnableComplexName =
-      $.trim(templateReactionComplexName).length != 0;
+    var templateReactionEnableComplexName = $.trim(templateReactionComplexName).length != 0;
 
     return {
       templateType: templateType,
@@ -4434,175 +3447,114 @@ var ReactionTemplateView = Backbone.View.extend({
       nodeList: nodeList,
       reversibleInputNodeList: reversibleInputNodeList,
       reversibleOutputNodeList: reversibleOutputNodeList,
-      templateReactionEnableComplexName: templateReactionEnableComplexName,
-    };
+      templateReactionEnableComplexName: templateReactionEnableComplexName
+    }
   },
   disableDeleteButtonStyle: function (type) {
-    if (type == "reaction") {
+    if(type == "reaction"){
       $("img.template-reaction-delete-button").css("opacity", 0.2);
       $("img.template-reaction-delete-button").css("cursor", "default");
-    } else if (type == "left") {
+    }
+    else if(type == "left"){
       $("img.template-reversible-input-delete-button").css("opacity", 0.2);
       $("img.template-reversible-input-delete-button").css("cursor", "default");
-    } else {
+    }
+    else{
       $("img.template-reversible-output-delete-button").css("opacity", 0.2);
-      $("img.template-reversible-output-delete-button").css(
-        "cursor",
-        "default"
-      );
+      $("img.template-reversible-output-delete-button").css("cursor", "default");
     }
   },
-  enableDeleteButtonStyle: function (type) {
-    if (type == "reaction") {
-      $("img.template-reaction-delete-button").css("opacity", 1);
+  enableDeleteButtonStyle: function(type) {
+    if(type == "reaction"){
+      $("img.template-reaction-delete-button").css("opacity",1);
       $("img.template-reaction-delete-button").css("cursor", "pointer");
-    } else if (type == "left") {
-      $("img.template-reversible-input-delete-button").css("opacity", 1);
+    }
+    else if(type == "left"){
+      $("img.template-reversible-input-delete-button").css("opacity",1);
       $("img.template-reversible-input-delete-button").css("cursor", "pointer");
-    } else {
-      $("img.template-reversible-output-delete-button").css("opacity", 1);
-      $("img.template-reversible-output-delete-button").css(
-        "cursor",
-        "pointer"
-      );
     }
+    else{
+      $("img.template-reversible-output-delete-button").css("opacity",1);
+      $("img.template-reversible-output-delete-button").css("cursor", "pointer");
+    }
+
   },
-  initialize: function () {
+  initialize: function() {
+
     var self = this;
     self.template = _.template($("#reaction-template-template").html());
 
-    $(document).on("change", "#reaction-template-type-select", function (e) {
+
+    $(document).on('change', '#reaction-template-type-select', function (e) {
       var valueSelected = $(this).val();
       self.switchInputOutput(valueSelected);
       self.disableDeleteButtonStyle("reaction");
     });
 
-    $(document).on("change", "#template-reaction-complex-name", function (e) {
+    $(document).on("change", "#template-reaction-complex-name", function(e){
       var value = $(this).val();
-      $(this).attr("value", value); // set the value in the html tag, so it is remembered when switched
+      $(this).attr('value', value); // set the value in the html tag, so it is remembered when switched
     });
 
     $(document).on("click", "#template-reaction-add-button", function (event) {
       // get the last input name and add 1
-      var nextIndex =
-        parseInt(
-          $(
-            "#template-reaction-dissociated-table :input.template-reaction-textbox"
-          )
-            .last()
-            .attr("name")
-        ) + 1;
-      self.addMacromolecule("reaction", nextIndex);
+      var nextIndex = parseInt($('#template-reaction-dissociated-table :input.template-reaction-textbox').last().attr('name')) + 1;
+      self.addMacromolecule("reaction",nextIndex);
       self.enableDeleteButtonStyle("reaction");
     });
 
-    $(document).on("change", ".template-reaction-textbox", function () {
+    $(document).on('change', ".template-reaction-textbox", function () {
       var value = $(this).val();
-      $(this).attr("value", value); // set the value in the html tag, so it is remembered when switched
+      $(this).attr('value', value); // set the value in the html tag, so it is remembered when switched
     });
 
-    $(document).on(
-      "click",
-      ".template-reaction-delete-button",
-      function (event) {
-        if (
-          $(
-            "#template-reaction-dissociated-table :input.template-reaction-textbox"
-          ).length <= 2
-        ) {
-          return;
-        }
-        var index = parseInt($(this).attr("name"));
-        self.removeMacromolecule("reaction", index);
-        if (
-          $(
-            "#template-reaction-dissociated-table :input.template-reaction-textbox"
-          ).length <= 2
-        ) {
-          self.disableDeleteButtonStyle("reaction");
-        }
+    $(document).on("click", ".template-reaction-delete-button", function (event) {
+      if($('#template-reaction-dissociated-table :input.template-reaction-textbox').length <= 2){
+        return;
       }
-    );
-
-    $(document).on(
-      "click",
-      "#template-reversible-input-add-button",
-      function (event) {
-        var nextIndex =
-          parseInt(
-            $(
-              "#template-reversible-input-table :input.template-reaction-textbox"
-            )
-              .last()
-              .attr("name")
-          ) + 1;
-        self.addMacromolecule("left", nextIndex);
-        self.enableDeleteButtonStyle("left");
+      var index = parseInt($(this).attr('name'));
+      self.removeMacromolecule("reaction",index);
+      if($('#template-reaction-dissociated-table :input.template-reaction-textbox').length <= 2){
+        self.disableDeleteButtonStyle("reaction");
       }
-    );
-
-    $(document).on(
-      "click",
-      "#template-reversible-output-add-button",
-      function (event) {
-        var nextIndex =
-          parseInt(
-            $(
-              "#template-reversible-output-table :input.template-reaction-textbox"
-            )
-              .last()
-              .attr("name")
-          ) + 1;
-        self.addMacromolecule("right", nextIndex);
-        self.enableDeleteButtonStyle("right");
+    });
+
+    $(document).on("click", "#template-reversible-input-add-button", function(event){
+      var nextIndex = parseInt($('#template-reversible-input-table :input.template-reaction-textbox').last().attr('name')) + 1;
+      self.addMacromolecule( "left", nextIndex);
+      self.enableDeleteButtonStyle("left");
+    });
+
+    $(document).on("click", "#template-reversible-output-add-button", function(event){
+      var nextIndex = parseInt($('#template-reversible-output-table :input.template-reaction-textbox').last().attr('name')) + 1;
+      self.addMacromolecule( "right", nextIndex);
+      self.enableDeleteButtonStyle("right");
+    });
+
+    $(document).on("click", ".template-reversible-input-delete-button", function(event){
+      if($('#template-reversible-input-table :input.template-reaction-textbox').length <= 1){
+        return;
       }
-    );
-
-    $(document).on(
-      "click",
-      ".template-reversible-input-delete-button",
-      function (event) {
-        if (
-          $("#template-reversible-input-table :input.template-reaction-textbox")
-            .length <= 1
-        ) {
-          return;
-        }
-        var index = parseInt($(this).attr("name"));
-        self.removeMacromolecule("left", index);
-        if (
-          $("#template-reversible-input-table :input.template-reaction-textbox")
-            .length <= 1
-        ) {
-          self.disableDeleteButtonStyle("left");
-        }
+      var index = parseInt($(this).attr('name'));
+      self.removeMacromolecule("left",index);
+      if($('#template-reversible-input-table :input.template-reaction-textbox').length <= 1){
+        self.disableDeleteButtonStyle("left");
       }
-    );
-
-    $(document).on(
-      "click",
-      ".template-reversible-output-delete-button",
-      function (event) {
-        if (
-          $(
-            "#template-reversible-output-table :input.template-reaction-textbox"
-          ).length <= 1
-        ) {
-          return;
-        }
-        var index = parseInt($(this).attr("name"));
-        self.removeMacromolecule("right", index);
-        if (
-          $(
-            "#template-reversible-output-table :input.template-reaction-textbox"
-          ).length <= 1
-        ) {
-          self.disableDeleteButtonStyle("right");
-        }
+    });
+
+    $(document).on("click", ".template-reversible-output-delete-button", function(event){
+      if($('#template-reversible-output-table :input.template-reaction-textbox').length <= 1){
+        return;
+      }
+      var index = parseInt($(this).attr('name'));
+      self.removeMacromolecule("right",index);
+      if($('#template-reversible-output-table :input.template-reaction-textbox').length <= 1){
+        self.disableDeleteButtonStyle("right");
       }
-    );
+    });
 
     $(document).on("click", "#create-template", function (evt) {
+
       // use active chise instance
       var chiseInstance = appUtilities.getActiveChiseInstance();
 
@@ -4610,70 +3562,51 @@ var ReactionTemplateView = Backbone.View.extend({
       var cy = chiseInstance.getCy();
 
       // get current layout properties for cy
-      var currentLayoutProperties = appUtilities.getScratch(
-        cy,
-        "currentLayoutProperties"
-      );
+      var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties');
 
       var params = self.getAllParameters();
 
       var templateType = params.templateType;
       var nodeList = params.nodeList;
-      var complexName = params.templateReactionEnableComplexName
-        ? params.templateReactionComplexName
-        : undefined;
-      var tilingPaddingVertical = chiseInstance.calculatePaddings(
-        currentLayoutProperties.tilingPaddingVertical
-      );
-      var tilingPaddingHorizontal = chiseInstance.calculatePaddings(
-        currentLayoutProperties.tilingPaddingHorizontal
-      );
-      var layoutParam = { name: "fcose" };
-      if (templateType == "reversible") {
+      var complexName = params.templateReactionEnableComplexName ? params.templateReactionComplexName : undefined;
+      var tilingPaddingVertical = chiseInstance.calculatePaddings(currentLayoutProperties.tilingPaddingVertical);
+      var tilingPaddingHorizontal = chiseInstance.calculatePaddings(currentLayoutProperties.tilingPaddingHorizontal);
+      var layoutParam = {name: "fcose"};
+      if(templateType == "reversible"){
         nodeList = params.reversibleInputNodeList;
         complexName = params.reversibleOutputNodeList;
       }
-      chiseInstance.createTemplateReaction(
-        templateType,
-        nodeList,
-        complexName,
-        undefined,
-        tilingPaddingVertical,
-        tilingPaddingHorizontal,
-        undefined,
-        layoutParam
-      );
+      chiseInstance.createTemplateReaction(templateType, nodeList, complexName, undefined, tilingPaddingVertical, tilingPaddingHorizontal, undefined, layoutParam);
 
       //Update arrow-scale of newly added edges (newly added elements are selected so we just update selected edges)
-      var currentArrowScale = Number($("#arrow-scale").val());
-      cy.edges(":selected").style("arrow-scale", currentArrowScale);
+      var currentArrowScale = Number($('#arrow-scale').val());
+      cy.edges(":selected").style('arrow-scale', currentArrowScale);
 
-      $(self.el).modal("toggle");
+      $(self.el).modal('toggle');
     });
 
     $(document).on("click", "#cancel-template", function (evt) {
-      $(self.el).modal("toggle");
+      $(self.el).modal('toggle');
     });
   },
-  render: function () {
+  render: function() {
     var self = this;
     self.template = _.template($("#reaction-template-template").html());
     $(self.el).html(self.template);
     self.disableDeleteButtonStyle("reaction");
 
-    $(self.el).modal("show");
-    self.associatedHTMLContent = $("#reaction-template-left-td").html();
-    self.dissociatedHTMLContent = $("#reaction-template-right-td").html();
-    self.reversibleInputHTMLContent = $("#reversible-template-left-td").html();
-    self.reversibleOutputHTMLContent = $(
-      "#reversible-template-right-td"
-    ).html();
+    $(self.el).modal('show');
+    self.associatedHTMLContent = $('#reaction-template-left-td').html();
+    self.dissociatedHTMLContent = $('#reaction-template-right-td').html();
+    self.reversibleInputHTMLContent = $('#reversible-template-left-td').html();
+    self.reversibleOutputHTMLContent = $('#reversible-template-right-td').html();
     return this;
-  },
+  }
 });
 
 var GridPropertiesView = Backbone.View.extend({
-  initialize: function () {},
+  initialize: function () {
+  },
   copyProperties: function () {
     // use active cy instance
     var cy = appUtilities.getActiveCy();
@@ -4682,446 +3615,317 @@ var GridPropertiesView = Backbone.View.extend({
     var clonedProps = _.clone(appUtilities.defaultGridProperties);
 
     // update the scratch pad of cy
-    appUtilities.setScratch(cy, "currentGridProperties", clonedProps);
+    appUtilities.setScratch(cy, 'currentGridProperties', clonedProps);
 
     // return cloned props to make them accessible
     return clonedProps;
   },
   render: function () {
+
     // use active cy instance
     var cy = appUtilities.getActiveCy();
 
     // get current grid properties
-    var currentGridProperties = appUtilities.getScratch(
-      cy,
-      "currentGridProperties"
-    );
+    var currentGridProperties = appUtilities.getScratch(cy, 'currentGridProperties');
 
     var self = this;
     self.template = _.template($("#grid-properties-template").html());
     self.template = self.template(currentGridProperties);
     $(self.el).html(self.template);
     bindColorPicker2GridColorInputs();
-    $(self.el).modal("show");
+    $(self.el).modal('show');
 
     // The following functions give Snap Policy row a radio button functionality
     // and enable Show Grid when Snap to Grid is enabled
-    $(document)
-      .off("change", "#snap-to-grid")
-      .on("change", "#snap-to-grid", function (event) {
-        $("#show-grid").prop("checked", true);
-        $("#snap-to-alignment-location").val("disabled");
-
-        if (
-          $("#snap-to-grid").val() == "disabled" &&
-          $("#snap-to-alignment-location").val() == "disabled"
-        )
-          $("#no-snap").prop("checked", true);
-        else $("#no-snap").prop("checked", false);
-      });
+    $(document).off("change", "#snap-to-grid").on("change", "#snap-to-grid", function(event){
+      $("#show-grid").prop('checked', true);
+      $("#snap-to-alignment-location").val("disabled");
+
+      if ($("#snap-to-grid").val() == "disabled" && $("#snap-to-alignment-location").val() == "disabled")
+        $("#no-snap").prop('checked', true);
+      else
+        $("#no-snap").prop('checked', false);
+    });
 
-    $(document)
-      .off("change", "#snap-to-alignment-location")
-      .on("change", "#snap-to-alignment-location", function (event) {
-        $("#snap-to-grid").val("disabled");
-        if (
-          $("#snap-to-grid").val() == "disabled" &&
-          $("#snap-to-alignment-location").val() == "disabled"
-        )
-          $("#no-snap").prop("checked", true);
-        else $("#no-snap").prop("checked", false);
-      });
+    $(document).off("change", "#snap-to-alignment-location").on("change", "#snap-to-alignment-location", function(event){
+      $("#snap-to-grid").val("disabled");
+      if ($("#snap-to-grid").val() == "disabled" && $("#snap-to-alignment-location").val() == "disabled")
+        $("#no-snap").prop('checked', true);
+      else
+        $("#no-snap").prop('checked', false);
+    });
 
-    $(document)
-      .off("click", "#no-snap")
-      .on("click", "#no-snap", function (event) {
-        $("#snap-to-grid").val("disabled");
-        $("#snap-to-alignment-location").val("disabled");
-      });
+    $(document).off("click", "#no-snap").on("click", "#no-snap", function(event){
+      $("#snap-to-grid").val("disabled");
+      $("#snap-to-alignment-location").val("disabled");
+    });
 
-    $(document)
-      .off("click", "#save-grid")
-      .on("click", "#save-grid", function (evt) {
-        // use active cy instance
-        var cy = appUtilities.getActiveCy();
-
-        // get current grid properties
-        var currentGridProperties = appUtilities.getScratch(
-          cy,
-          "currentGridProperties"
-        );
-
-        currentGridProperties.showGrid =
-          document.getElementById("show-grid").checked;
-        currentGridProperties.snapToGridOnRelease =
-          $("#snap-to-grid").val() == "onRelease";
-        currentGridProperties.snapToGridDuringDrag =
-          $("#snap-to-grid").val() == "duringDrag";
-        currentGridProperties.snapToAlignmentLocationOnRelease =
-          $("#snap-to-alignment-location").val() == "onRelease";
-        currentGridProperties.snapToAlignmentLocationDuringDrag =
-          $("#snap-to-alignment-location").val() == "duringDrag";
-        currentGridProperties.gridSize = Number(
-          document.getElementById("grid-size").value
-        );
-        currentGridProperties.gridColor =
-          document.getElementById("grid-color").value;
-        currentGridProperties.autoResizeNodes =
-          document.getElementById("auto-resize-nodes").checked;
-        currentGridProperties.showGeometricGuidelines = document.getElementById(
-          "show-geometric-guidelines"
-        ).checked;
-        currentGridProperties.showDistributionGuidelines =
-          document.getElementById("show-distribution-guidelines").checked;
-        currentGridProperties.showInitPosAlignment = document.getElementById(
-          "show-init-Pos-Alignment"
-        ).checked;
-        currentGridProperties.guidelineTolerance = Number(
-          document.getElementById("guideline-tolerance").value
-        );
-        currentGridProperties.guidelineColor = document.getElementById(
-          "geometric-guideline-color"
-        ).value;
-        currentGridProperties.horizontalGuidelineColor =
-          document.getElementById("horizontal-guideline-color").value;
-        currentGridProperties.verticalGuidelineColor = document.getElementById(
-          "vertical-guideline-color"
-        ).value;
-        currentGridProperties.initPosAlignmentColor = document.getElementById(
-          "init-Pos-Alignment-Color"
-        ).value;
-        currentGridProperties.geometricAlignmentRange = Number(
-          document.getElementById("geometric-alignment-range").value
-        );
-        currentGridProperties.distributionAlignmentRange = Number(
-          document.getElementById("distribution-alignment-range").value
-        );
-
-        // Line styles for guidelines
-        currentGridProperties.initPosAlignmentLine = $(
-          'select[name="init-Pos-Alignment-Line"] option:selected'
-        )
-          .val()
-          .split(",")
-          .map(Number);
-        (currentGridProperties.lineDash = $(
-          'select[id="geometric-Alignment-Line"] option:selected'
-        )
-          .val()
-          .split(",")
-          .map(Number)),
-          (currentGridProperties.horizontalDistLine = $(
-            'select[name="horizontal-Dist-Alignment-Line"] option:selected'
-          )
-            .val()
-            .split(",")
-            .map(Number));
-        currentGridProperties.verticalDistLine = $(
-          'select[name="vertical-Dist-Alignment-Line"] option:selected'
-        )
-          .val()
-          .split(",")
-          .map(Number);
-        cy.gridGuide({
-          drawGrid: currentGridProperties.showGrid,
-          gridColor: currentGridProperties.gridColor,
-          snapToGridOnRelease: currentGridProperties.snapToGridOnRelease,
-          snapToGridDuringDrag: currentGridProperties.snapToGridDuringDrag,
-          snapToAlignmentLocationOnRelease:
-            currentGridProperties.snapToAlignmentLocationOnRelease,
-          snapToAlignmentLocationDuringDrag:
-            currentGridProperties.snapToAlignmentLocationDuringDrag,
-          gridSpacing: currentGridProperties.gridSize,
-          resize: currentGridProperties.autoResizeNodes,
-          geometricGuideline: currentGridProperties.showGeometricGuidelines,
-          distributionGuidelines:
-            currentGridProperties.showDistributionGuidelines,
-          initPosAlignment: currentGridProperties.showInitPosAlignment,
-          guidelinesTolerance: currentGridProperties.guidelineTolerance,
-          guidelinesStyle: {
-            initPosAlignmentLine: currentGridProperties.initPosAlignmentLine,
-            lineDash: currentGridProperties.lineDash,
-            horizontalDistLine: currentGridProperties.horizontalDistLine,
-            verticalDistLine: currentGridProperties.verticalDistLine,
-            strokeStyle: currentGridProperties.guidelineColor,
-            horizontalDistColor: currentGridProperties.horizontalGuidelineColor,
-            verticalDistColor: currentGridProperties.verticalGuidelineColor,
-            initPosAlignmentColor: currentGridProperties.initPosAlignmentColor,
-            geometricGuidelineRange:
-              currentGridProperties.geometricAlignmentRange,
-            range: currentGridProperties.distributionAlignmentRange,
-          },
-        });
+    $(document).off("click", "#save-grid").on("click", "#save-grid", function (evt) {
 
-        // reset current grid properties in scracth pad of cy
-        appUtilities.setScratch(
-          cy,
-          "currentGridProperties",
-          currentGridProperties
-        );
+      // use active cy instance
+      var cy = appUtilities.getActiveCy();
 
-        $(self.el).modal("toggle");
-        $(document).trigger("saveGridProperties", cy);
+      // get current grid properties
+      var currentGridProperties = appUtilities.getScratch(cy, 'currentGridProperties');
+
+      currentGridProperties.showGrid = document.getElementById("show-grid").checked;
+      currentGridProperties.snapToGridOnRelease = $("#snap-to-grid").val() == "onRelease";
+      currentGridProperties.snapToGridDuringDrag = $("#snap-to-grid").val() == "duringDrag";
+      currentGridProperties.snapToAlignmentLocationOnRelease = $("#snap-to-alignment-location").val() == "onRelease";
+      currentGridProperties.snapToAlignmentLocationDuringDrag = $("#snap-to-alignment-location").val() == "duringDrag";
+      currentGridProperties.gridSize = Number(document.getElementById("grid-size").value);
+      currentGridProperties.gridColor = document.getElementById("grid-color").value;
+      currentGridProperties.autoResizeNodes = document.getElementById("auto-resize-nodes").checked;
+      currentGridProperties.showGeometricGuidelines = document.getElementById("show-geometric-guidelines").checked;
+      currentGridProperties.showDistributionGuidelines = document.getElementById("show-distribution-guidelines").checked;
+      currentGridProperties.showInitPosAlignment = document.getElementById("show-init-Pos-Alignment").checked;
+      currentGridProperties.guidelineTolerance = Number(document.getElementById("guideline-tolerance").value);
+      currentGridProperties.guidelineColor = document.getElementById("geometric-guideline-color").value;
+      currentGridProperties.horizontalGuidelineColor = document.getElementById("horizontal-guideline-color").value;
+      currentGridProperties.verticalGuidelineColor = document.getElementById("vertical-guideline-color").value;
+      currentGridProperties.initPosAlignmentColor = document.getElementById("init-Pos-Alignment-Color").value;
+      currentGridProperties.geometricAlignmentRange = Number(document.getElementById("geometric-alignment-range").value);
+      currentGridProperties.distributionAlignmentRange = Number(document.getElementById("distribution-alignment-range").value);
+
+	  // Line styles for guidelines
+      currentGridProperties.initPosAlignmentLine = $('select[name="init-Pos-Alignment-Line"] option:selected').val().split(',').map(Number);
+      currentGridProperties.lineDash = $('select[id="geometric-Alignment-Line"] option:selected').val().split(',').map(Number),
+      currentGridProperties.horizontalDistLine = $('select[name="horizontal-Dist-Alignment-Line"] option:selected').val().split(',').map(Number);
+      currentGridProperties.verticalDistLine = $('select[name="vertical-Dist-Alignment-Line"] option:selected').val().split(',').map(Number);
+      cy.gridGuide({
+        drawGrid: currentGridProperties.showGrid,
+        gridColor: currentGridProperties.gridColor,
+        snapToGridOnRelease: currentGridProperties.snapToGridOnRelease,
+        snapToGridDuringDrag: currentGridProperties.snapToGridDuringDrag,
+        snapToAlignmentLocationOnRelease: currentGridProperties.snapToAlignmentLocationOnRelease,
+        snapToAlignmentLocationDuringDrag: currentGridProperties.snapToAlignmentLocationDuringDrag,
+        gridSpacing: currentGridProperties.gridSize,
+        resize: currentGridProperties.autoResizeNodes,
+        geometricGuideline: currentGridProperties.showGeometricGuidelines,
+        distributionGuidelines: currentGridProperties.showDistributionGuidelines,
+        initPosAlignment: currentGridProperties.showInitPosAlignment,
+        guidelinesTolerance: currentGridProperties.guidelineTolerance,
+        guidelinesStyle: {
+		  initPosAlignmentLine: currentGridProperties.initPosAlignmentLine,
+		  lineDash: currentGridProperties.lineDash,
+		  horizontalDistLine: currentGridProperties.horizontalDistLine,
+		  verticalDistLine: currentGridProperties.verticalDistLine,
+          strokeStyle: currentGridProperties.guidelineColor,
+		  horizontalDistColor: currentGridProperties.horizontalGuidelineColor,
+		  verticalDistColor: currentGridProperties.verticalGuidelineColor,
+		  initPosAlignmentColor: currentGridProperties.initPosAlignmentColor,
+          geometricGuidelineRange: currentGridProperties.geometricAlignmentRange,
+          range: currentGridProperties.distributionAlignmentRange
+        }
       });
 
-    $(document)
-      .off("click", "#default-grid")
-      .on("click", "#default-grid", function (evt) {
-        var currentGridProperties = self.copyProperties();
-        self.template = _.template($("#grid-properties-template").html());
-        self.template = self.template(currentGridProperties);
-        $(self.el).html(self.template);
-        bindColorPicker2GridColorInputs();
-      });
+      // reset current grid properties in scracth pad of cy
+      appUtilities.setScratch(cy, 'currentGridProperties', currentGridProperties);
+
+      $(self.el).modal('toggle');
+      $(document).trigger('saveGridProperties', cy);
+    });
+
+    $(document).off("click", "#default-grid").on("click", "#default-grid", function (evt) {
+      var currentGridProperties = self.copyProperties();
+      self.template = _.template($("#grid-properties-template").html());
+      self.template = self.template(currentGridProperties);
+      $(self.el).html(self.template);
+      bindColorPicker2GridColorInputs();
+    });
 
     return this;
-  },
+  }
 });
 
 // If the value includes ' ' char/s replace them with '_' char
 // to use it as part of html selector
-function sanitizeForHtml(val) {
-  return val.replaceAll(" ", "_");
+function sanitizeForHtml( val ) {
+  return val.replaceAll( ' ', '_' );
 }
 
 function getFontFamilyOptions() {
   return [
-    { value: "", label: "" },
-    { value: "Helvetica", label: "Helvetica" },
-    { value: "Arial", label: "Arial" },
-    { value: "Calibri", label: "Calibri" },
-    { value: "Cambria", label: "Cambria" },
-    { value: "Comic Sans MS", label: "Comic Sans MS" },
-    { value: "Consolas", label: "Consolas" },
-    { value: "Corsiva", label: "Corsiva" },
-    { value: "Courier New", label: "Courier New" },
-    { value: "Droid Sans", label: "Droid Sans" },
-    { value: "Droid Serif", label: "Droid Serif" },
-    { value: "Georgia", label: "Georgia" },
-    { value: "Impact", label: "Impact" },
-    { value: "Lato", label: "Lato" },
-    { value: "Roboto", label: "Roboto" },
-    { value: "Source Sans Pro", label: "Source Sans Pro" },
-    { value: "Syncopate", label: "Syncopate" },
-    { value: "Times New Roman", label: "Times New Roman" },
-    { value: "Trebuchet MS", label: "Trebuchet MS" },
-    { value: "Ubuntu", label: "Ubuntu" },
-    { value: "Verdana", label: "Verdana" },
+    { value: '', label: '' },
+    { value: 'Helvetica', label: 'Helvetica' },
+    { value: 'Arial', label: 'Arial' },
+    { value: 'Calibri', label: 'Calibri' },
+    { value: 'Cambria', label: 'Cambria' },
+    { value: 'Comic Sans MS', label: 'Comic Sans MS' },
+    { value: 'Consolas', label: 'Consolas' },
+    { value: 'Corsiva', label: 'Corsiva' },
+    { value: 'Courier New', label: 'Courier New' },
+    { value: 'Droid Sans', label: 'Droid Sans' },
+    { value: 'Droid Serif', label: 'Droid Serif' },
+    { value: 'Georgia', label: 'Georgia' },
+    { value: 'Impact', label: 'Impact' },
+    { value: 'Lato', label: 'Lato' },
+    { value: 'Roboto', label: 'Roboto' },
+    { value: 'Source Sans Pro', label: 'Source Sans Pro' },
+    { value: 'Syncopate', label: 'Syncopate' },
+    { value: 'Times New Roman', label: 'Times New Roman' },
+    { value: 'Trebuchet MS', label: 'Trebuchet MS' },
+    { value: 'Ubuntu', label: 'Ubuntu' },
+    { value: 'Verdana', label: 'Verdana' }
   ];
 }
 
 function getFontWeightOptions() {
   return [
-    { value: "", label: "" },
-    { value: "lighter", label: "Lighter" },
-    { value: "normal", label: "Normal" },
-    { value: "bold", label: "Bold" },
-    { value: "bolder", label: "Bolder" },
+    { value: '', label: '' },
+    { value: 'lighter', label: 'Lighter' },
+    { value: 'normal', label: 'Normal' },
+    { value: 'bold', label: 'Bold' },
+    { value: 'bolder', label: 'Bolder' }
   ];
 }
 
 function getFontStyleOptions() {
   return [
-    { value: "", label: "" },
-    { value: "normal", label: "Normal" },
-    { value: "italic", label: "Italic" },
-    { value: "oblique", label: "Oblique" },
+    { value: '', label: '' },
+    { value: 'normal', label: 'Normal' },
+    { value: 'italic', label: 'Italic' },
+    { value: 'oblique', label: 'Oblique' }
   ];
 }
 
 function generateFontPropertiesRows(selectorPrefix, labelPrefix, properties) {
   var html = "";
 
-  var familyOptStyle = [
-    {
-      name: "font-family",
-      value: function (ff) {
-        return ff;
-      },
-    },
-  ];
+  var familyOptStyle = [{
+    name: 'font-family',
+    value: function(ff) {
+      return ff;
+    }
+  }];
+
+  html += wrapToTr( [ generateLabelTd( 'Family', labelPrefix ),
+          generateSelectListTd( getFontFamilyOptions(), properties.fontFamily, selectorPrefix, 'font-family', familyOptStyle ) ] );
 
-  html += wrapToTr([
-    generateLabelTd("Family", labelPrefix),
-    generateSelectListTd(
-      getFontFamilyOptions(),
-      properties.fontFamily,
-      selectorPrefix,
-      "font-family",
-      familyOptStyle
-    ),
-  ]);
-
-  html += wrapToTr([
-    generateLabelTd("Size", labelPrefix),
-    generateIntegerInputBoxTd(selectorPrefix, "font-size", properties.fontSize),
-  ]);
-
-  html += wrapToTr([
-    generateLabelTd("Weight", labelPrefix),
-    generateSelectListTd(
-      getFontWeightOptions(),
-      properties.fontWeight,
-      selectorPrefix,
-      "font-weight"
-    ),
-  ]);
-
-  html += wrapToTr([
-    generateLabelTd("Type", labelPrefix),
-    generateSelectListTd(
-      getFontStyleOptions(),
-      properties.fontStyle,
-      selectorPrefix,
-      "font-style"
-    ),
-  ]);
-
-  html += wrapToTr([
-    generateLabelTd("Color", labelPrefix),
-    generateColorInputBoxTd(selectorPrefix, "font-color", properties.fontColor),
-  ]);
+  html += wrapToTr( [ generateLabelTd( 'Size', labelPrefix ),
+          generateIntegerInputBoxTd( selectorPrefix, 'font-size', properties.fontSize ) ] );
+
+  html += wrapToTr( [ generateLabelTd( 'Weight', labelPrefix  ),
+          generateSelectListTd( getFontWeightOptions(), properties.fontWeight, selectorPrefix, 'font-weight' ) ] );
+
+  html += wrapToTr( [ generateLabelTd( 'Type', labelPrefix ),
+          generateSelectListTd( getFontStyleOptions(), properties.fontStyle, selectorPrefix, 'font-style' ) ] );
+
+  html += wrapToTr( [ generateLabelTd( 'Color', labelPrefix ),
+          generateColorInputBoxTd( selectorPrefix, 'font-color', properties.fontColor ) ] );
 
   return html;
 }
 
 function generateColorInputBoxTd(selectorPrefix, propName, value) {
-  var id = generateInputId(propName, selectorPrefix);
-  var html =
-    '<input id="' +
-    id +
-    '"' +
-    ' class="inspector-input-box"' +
-    ' type="color"' +
-    ' name="' +
-    id +
-    '"' +
-    ' value="' +
-    value +
-    '"' +
-    "/>";
-
-  return wrapToTd(html);
+  var id = generateInputId( propName, selectorPrefix );
+  var html = '<input id="' + id + '"'
+          + ' class="inspector-input-box"'
+          + ' type="color"'
+          + ' name="' + id + '"'
+          + ' value="' + value +  '"'
+          + '/>';
+
+  return wrapToTd( html );
 }
 
 function generateIntegerInputBoxTd(selectorPrefix, propName, value) {
-  var html =
-    '<input id="' +
-    generateInputId(propName, selectorPrefix) +
-    '"' +
-    ' type="text"' +
-    ' min="1"' +
-    ' class="sbgn-input-small layout-text integer-input"' +
-    ' value="' +
-    value +
-    '"' +
-    "/>";
-
-  return wrapToTd(html);
+  var html = '<input id="' + generateInputId( propName, selectorPrefix ) + '"'
+          + ' type="text"'
+          + ' min="1"'
+          + ' class="sbgn-input-small layout-text integer-input"'
+          + ' value="' + value + '"'
+          + '/>';
+
+  return wrapToTd( html );
 }
 
-function generateInputId(propName, selectorPrefix, selectorPostfix) {
-  var pretext = selectorPrefix ? selectorPrefix + "-" : "";
-  var posttext = selectorPostfix ? "-" + selectorPostfix : "";
+function generateInputId( propName, selectorPrefix, selectorPostfix ) {
+  var pretext = selectorPrefix ? selectorPrefix + '-' : '';
+  var posttext = selectorPostfix ? '-' + selectorPostfix : '';
   return pretext + propName + posttext;
 }
 
-function generateSelectBoxNameSelector(propName, selectorPrefix) {
-  var id = generateInputId(propName, selectorPrefix, "select-box");
+function generateSelectBoxNameSelector( propName, selectorPrefix ) {
+  var id = generateInputId( propName, selectorPrefix, 'select-box' );
   var selector = 'select[name="' + id + '"] option:selected';
 
   return selector;
 }
 
-function generateSelectListTd(
-  options,
-  selectedVal,
-  selectorPrefix,
-  propName,
-  optionStyle
-) {
-  var html = "";
-  var selectboxId = generateInputId(propName, selectorPrefix, "select-box");
-  var selectBoxOpenHtml =
-    '<select id="' +
-    selectboxId +
-    '"' +
-    ' class="input-medium layout-text"' +
-    ' name="' +
-    selectboxId +
-    '"' +
-    ">";
+function generateSelectListTd(options, selectedVal, selectorPrefix, propName, optionStyle) {
+  var html = '';
+  var selectboxId = generateInputId( propName, selectorPrefix, 'select-box' );
+  var selectBoxOpenHtml = '<select id="' + selectboxId + '"'
+    + ' class="input-medium layout-text"'
+    + ' name="' + selectboxId + '"'
+    + '>';
 
   html += selectBoxOpenHtml;
 
-  var getSelectedStr = function (optionVal) {
-    return optionVal === selectedVal ? " selected" : "";
+  var getSelectedStr = function( optionVal ) {
+    return optionVal === selectedVal ? ' selected' : '';
   };
 
-  options.forEach(function (option) {
+  options.forEach( function( option ) {
     var optionVal = option.value;
-    var postfix = optionVal ? optionVal : "none";
-    postfix = sanitizeForHtml(postfix);
+    var postfix = optionVal ? optionVal : 'none';
+    postfix = sanitizeForHtml( postfix );
     var optionLabel = option.label;
 
-    var styleStr = "";
+    var styleStr = '';
 
-    if (optionStyle && optionStyle.length > 0) {
+    if ( optionStyle && optionStyle.length > 0 ) {
       var styleStr = ' style="';
-      optionStyle.forEach(function (style) {
-        var val =
-          typeof style.value == "function" ? style.value(optionVal) : optionVal;
-        styleStr += style.name + ": " + val + ";";
-      });
+      optionStyle.forEach( function( style ) {
+        var val = typeof style.value == 'function' ?
+                  style.value( optionVal ) : optionVal;
+        styleStr += ( style.name + ': ' + val + ';' );
+      } );
       styleStr += '"';
     }
 
-    var optionId = generateInputId(propName, selectorPrefix, postfix);
-    var optionHtml =
-      '<option id="' +
-      optionId +
-      '"' +
-      ' value="' +
-      optionVal +
-      '"' +
-      styleStr +
-      getSelectedStr(optionVal) +
-      ">" +
-      option.label +
-      "</option>";
+    var optionId = generateInputId( propName, selectorPrefix, postfix );
+    var optionHtml = '<option id="' + optionId + '"'
+      + ' value="' + optionVal + '"'
+      + styleStr
+      + getSelectedStr( optionVal )
+      + '>'
+      + option.label
+      + '</option>';
 
     html += optionHtml;
-  });
+  } );
 
-  html += "</select>";
+  html += '</select>';
 
-  return wrapToTd(html);
+  return wrapToTd( html );
 }
 
 function generateLabelTd(mainText, prefix, postfix) {
-  prefix = prefix ? prefix + " " : "";
-  postfix = postfix ? " " + postfix : "";
+  prefix = prefix ? prefix + ' ' : '';
+  postfix = postfix ? ' ' + postfix : '';
   label = prefix + mainText + postfix;
 
-  return wrapToTd('<span class="add-on layout-text">' + label + "</span>");
+  return wrapToTd( '<span class="add-on layout-text">' + label + '</span>' );
 }
 
-function wrapToTd(innerHtml) {
-  var html = "<td>";
+function wrapToTd(innerHtml){
+  var html = '<td>';
   html += innerHtml;
-  html += "</td>";
+  html += '</td>';
 
   return html;
 }
 
 function wrapToTr(tdList) {
-  var html = "<tr>";
+  var html = '<tr>';
 
-  tdList.forEach(function (td) {
+  tdList.forEach( function( td ) {
     html += td;
-  });
+  } );
 
-  html += "</tr>";
+  html += '</tr>';
 
   return html;
 }
@@ -5132,74 +3936,49 @@ var FontPropertiesView = Backbone.View.extend({
     fontSize: "",
     fontWeight: "",
     fontStyle: "",
-    fontColor: "",
+    fontColor: ""
   },
   currentFontProperties: undefined,
-  selectorPrefix: "font-properties",
+  selectorPrefix: 'font-properties',
   copyProperties: function () {
     this.currentFontProperties = _.clone(this.defaultFontProperties);
   },
   initialize: function () {
     var self = this;
     self.copyProperties();
-    self.defaultFontProperties.generateFontPropertiesRows = function () {
-      return generateFontPropertiesRows(
-        self.selectorPrefix,
-        "",
-        self.currentFontProperties
-      );
+    self.defaultFontProperties.generateFontPropertiesRows = function() {
+      return generateFontPropertiesRows( self.selectorPrefix, '', self.currentFontProperties );
     };
     self.template = _.template($("#font-properties-template").html());
     self.template = self.template(self.defaultFontProperties);
   },
   extendProperties: function (eles) {
+
     var chiseInstance = appUtilities.getActiveChiseInstance();
 
     var self = this;
     var commonProperties = {};
 
     // Get common properties. Note that we check the data field for labelsize property and css field for other properties.
-    var commonFontSize = parseInt(
-      chiseInstance.elementUtilities.getCommonProperty(
-        eles,
-        "font-size",
-        "data"
-      )
-    );
-    var commonFontWeight = chiseInstance.elementUtilities.getCommonProperty(
-      eles,
-      "font-weight",
-      "data"
-    );
-    var commonFontFamily = chiseInstance.elementUtilities.getCommonProperty(
-      eles,
-      "font-family",
-      "data"
-    );
-    var commonFontStyle = chiseInstance.elementUtilities.getCommonProperty(
-      eles,
-      "font-style",
-      "data"
-    );
-    var commonFontColor = chiseInstance.elementUtilities.getCommonProperty(
-      eles,
-      "color",
-      "data"
-    );
-
-    if (commonFontSize != null) {
+    var commonFontSize = parseInt(chiseInstance.elementUtilities.getCommonProperty(eles, "font-size", "data"));
+    var commonFontWeight = chiseInstance.elementUtilities.getCommonProperty(eles, "font-weight", "data");
+    var commonFontFamily = chiseInstance.elementUtilities.getCommonProperty(eles, "font-family", "data");
+    var commonFontStyle = chiseInstance.elementUtilities.getCommonProperty(eles, "font-style", "data");
+    var commonFontColor = chiseInstance.elementUtilities.getCommonProperty(eles, "color", "data");
+
+    if( commonFontSize != null ) {
       commonProperties.fontSize = commonFontSize;
     }
 
-    if (commonFontWeight != null) {
+    if( commonFontWeight != null ) {
       commonProperties.fontWeight = commonFontWeight;
     }
 
-    if (commonFontFamily != null) {
+    if( commonFontFamily != null ) {
       commonProperties.fontFamily = commonFontFamily;
     }
 
-    if (commonFontStyle != null) {
+    if( commonFontStyle != null ) {
       commonProperties.fontStyle = commonFontStyle;
     }
 
@@ -5207,11 +3986,7 @@ var FontPropertiesView = Backbone.View.extend({
       commonProperties.fontColor = commonFontColor;
     }
 
-    self.currentFontProperties = $.extend(
-      {},
-      this.defaultFontProperties,
-      commonProperties
-    );
+    self.currentFontProperties = $.extend({}, this.defaultFontProperties, commonProperties);
   },
   render: function (eles) {
     var self = this;
@@ -5219,357 +3994,306 @@ var FontPropertiesView = Backbone.View.extend({
     self.template = _.template($("#font-properties-template").html());
     self.template = self.template(self.currentFontProperties);
     $(self.el).html(self.template);
-    colorPickerUtils.bindPicker2Input(
-      "#" + generateInputId("font-color", self.selectorPrefix),
-      null
-    );
-    $(self.el).modal("show");
-
-    $(document)
-      .off("click", "#set-font-properties")
-      .on("click", "#set-font-properties", function (evt) {
-        // use the active chise instance
-        var chiseInstance = appUtilities.getActiveChiseInstance();
-
-        // use the associated cy instance
-        var cy = chiseInstance.getCy();
-
-        var data = {};
-
-        var fontsize = $(
-          "#" + generateInputId("font-size", self.selectorPrefix)
-        ).val();
-        var fontfamily = $(
-          generateSelectBoxNameSelector("font-family", self.selectorPrefix)
-        ).val();
-        var fontweight = $(
-          generateSelectBoxNameSelector("font-weight", self.selectorPrefix)
-        ).val();
-        var fontstyle = $(
-          generateSelectBoxNameSelector("font-style", self.selectorPrefix)
-        ).val();
-        var fontcolor = $(
-          "#" + generateInputId("font-color", self.selectorPrefix)
-        ).val();
-
-        if (fontsize != "") {
-          data["font-size"] = parseInt(fontsize);
-        }
+    colorPickerUtils.bindPicker2Input('#' + generateInputId('font-color', self.selectorPrefix), null);
+    $(self.el).modal('show');
 
-        if (fontfamily != "") {
-          data["font-family"] = fontfamily;
-        }
+    $(document).off("click", "#set-font-properties").on("click", "#set-font-properties", function (evt) {
 
-        if (fontweight != "") {
-          data["font-weight"] = fontweight;
-        }
+      // use the active chise instance
+      var chiseInstance = appUtilities.getActiveChiseInstance();
 
-        if (fontstyle != "") {
-          data["font-style"] = fontstyle;
-        }
+      // use the associated cy instance
+      var cy = chiseInstance.getCy();
 
-        if (fontcolor != "") {
-          data["color"] = fontcolor;
-        }
+      var data = {};
 
-        var keys = Object.keys(data);
+      var fontsize = $( '#' + generateInputId( 'font-size', self.selectorPrefix ) ).val();
+      var fontfamily = $( generateSelectBoxNameSelector( 'font-family', self.selectorPrefix ) ).val();
+      var fontweight = $( generateSelectBoxNameSelector( 'font-weight', self.selectorPrefix ) ).val();
+      var fontstyle = $( generateSelectBoxNameSelector( 'font-style', self.selectorPrefix ) ).val();
+      var fontcolor = $( '#' + generateInputId( 'font-color', self.selectorPrefix ) ).val();
 
-        if (keys.length === 0) {
-          return;
-        }
+      if ( fontsize != '' ) {
+        data['font-size'] = parseInt(fontsize);
+      }
 
-        var validAction = false; // If there is nothing to change the action is not valid
+      if ( fontfamily != '' ) {
+        data['font-family'] = fontfamily;
+      }
 
-        for (var i = 0; i < eles.length; i++) {
-          var ele = eles[i];
+      if ( fontweight != '' ) {
+        data['font-weight'] = fontweight;
+      }
 
-          keys.forEach(function (key, idx) {
-            // If there is some property to change signal that the action is valid.
-            if (data[key] != ele.data(key)) {
-              validAction = true;
-            }
-          });
+      if ( fontstyle != '' ) {
+        data['font-style'] = fontstyle;
+      }
+
+      if ( fontcolor != '') {
+        data['color'] = fontcolor;
+      }
+
+      var keys = Object.keys(data);
 
-          if (validAction) {
-            break;
+      if(keys.length === 0) {
+        return;
+      }
+
+      var validAction = false; // If there is nothing to change the action is not valid
+
+      for ( var i = 0; i < eles.length; i++ ) {
+        var ele = eles[i];
+
+        keys.forEach(function(key, idx) {
+          // If there is some property to change signal that the action is valid.
+          if (data[key] != ele.data(key)){
+            validAction = true;
           }
-        }
+        });
 
-        if (validAction === false) {
-          $(self.el).modal("toggle");
-          return;
+        if ( validAction ) {
+          break;
         }
+      }
+
+      if ( validAction === false ) {
+        $(self.el).modal('toggle');
+        return;
+      }
 
-        chiseInstance.changeFontProperties(eles, data);
+      chiseInstance.changeFontProperties(eles, data);
 
-        self.copyProperties();
+      self.copyProperties();
 
-        $(self.el).modal("toggle");
-        $(document).trigger("saveFontProperties", cy);
-      });
+
+      $(self.el).modal('toggle');
+	    $(document).trigger('saveFontProperties', cy);
+    });
 
     return this;
-  },
+  }
 });
 
 var InfoboxPropertiesView = Backbone.View.extend({
   currentProperties: null,
-  initialize: function () {},
+  initialize: function () {
+  },
   propsMap: {
-    fontFamily: "font-family",
-    fontSize: "font-size",
-    fontWeight: "font-weight",
-    fontStyle: "font-style",
-    fontColor: "font-color",
-    borderColor: "border-color",
-    fillColor: "background-color",
-    borderWidth: "border-width",
-    shapeName: "shape-name",
+    'fontFamily': 'font-family',
+    'fontSize': 'font-size',
+    'fontWeight': 'font-weight',
+    'fontStyle': 'font-style',
+    'fontColor': 'font-color',
+    'borderColor': 'border-color',
+    'fillColor': 'background-color',
+    'borderWidth': 'border-width',
+    'shapeName': 'shape-name'
   },
-  selectorPrefix: "infobox-properties",
-  fontLabelPrefix: "Font ",
-  updateCurrentProperties: function (infobox) {
+  selectorPrefix: 'infobox-properties',
+  fontLabelPrefix: 'Font ',
+  updateCurrentProperties: function(infobox) {
     var self = this;
     var infoboxStyle = infobox.style;
 
     self.currentProperties = {};
 
-    for (var prop in this.propsMap) {
-      var mappedProp = this.propsMap[prop];
-      self.currentProperties[prop] = infoboxStyle[mappedProp];
+    for ( var prop in this.propsMap ) {
+      var mappedProp = this.propsMap[ prop ];
+      self.currentProperties[ prop ] = infoboxStyle[ mappedProp ];
     }
 
-    self.currentProperties.generateSelectShapeRow = function () {
+    self.currentProperties.generateSelectShapeRow = function() {
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var cy = appUtilities.getActiveCy();
       var elementUtilities = chiseInstance.elementUtilities;
-      var parent = chiseInstance.classes
-        .getAuxUnitClass(infobox)
-        .getParent(infobox, cy);
+      var parent = chiseInstance.classes.getAuxUnitClass(infobox).getParent(infobox, cy);
       var shapeListFcn;
 
       switch (infobox.clazz) {
-        case "state variable":
+        case 'state variable':
           shapeListFcn = elementUtilities.getStateVarShapeOptions;
           break;
-        case "unit of information":
+        case 'unit of information':
           shapeListFcn = elementUtilities.getUnitOfInfoShapeOptions;
           break;
       }
 
-      shapeList = shapeListFcn(parent.data("class"));
+      shapeList = shapeListFcn( parent.data( 'class' ) );
 
-      if (shapeList.length <= 1) {
+      if ( shapeList.length <= 1 ) {
         return "";
       }
 
       var options = [];
 
-      shapeList.forEach(function (shapeName) {
-        options.push({
+      shapeList.forEach( function( shapeName ) {
+        options.push( {
           value: shapeName,
-          label: shapeName,
-        });
-      });
+          label: shapeName
+        } );
+      } );
 
-      return wrapToTr([
-        generateLabelTd("Shape", null),
-        generateSelectListTd(
-          options,
-          self.currentProperties.shapeName,
-          self.selectorPrefix,
-          "shape-name"
-        ),
-      ]);
+      return wrapToTr( [ generateLabelTd( 'Shape', null ),
+              generateSelectListTd( options, self.currentProperties.shapeName, self.selectorPrefix, 'shape-name' ) ] );
     };
 
-    self.currentProperties.generateFontPropertiesRows = function () {
-      return generateFontPropertiesRows(
-        self.selectorPrefix,
-        self.fontLabelPrefix,
-        self.currentProperties
-      );
+    self.currentProperties.generateFontPropertiesRows = function() {
+      return generateFontPropertiesRows( self.selectorPrefix, self.fontLabelPrefix, self.currentProperties );
     };
 
-    self.currentProperties.generateSetAsDefaultText = function () {
+    self.currentProperties.generateSetAsDefaultText = function() {
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var cy = appUtilities.getActiveCy();
-      var parent = chiseInstance.classes
-        .getAuxUnitClass(infobox)
-        .getParent(infobox, cy);
-      var classInfo = appUtilities.transformClassInfo(parent.data("class"));
+      var parent = chiseInstance.classes.getAuxUnitClass(infobox).getParent(infobox, cy);
+      var classInfo = appUtilities.transformClassInfo( parent.data('class') );
       var infoboxInfoMap = {
-        "state variable": "State Variable",
-        "unit of information": "Unit of Information",
+        'state variable': 'State Variable',
+        'unit of information': 'Unit of Information'
       };
-      var infoboxInfo = infoboxInfoMap[infobox.clazz];
+      var infoboxInfo = infoboxInfoMap[ infobox.clazz ];
 
-      return "Set as Default for " + infoboxInfo + " of " + classInfo;
-    };
+      return 'Set as Default for ' + infoboxInfo + ' of ' + classInfo;
+    }
   },
   render: function (node, index) {
     var self = this;
-    var infoboxObj = node.data("statesandinfos")[index];
+    var infoboxObj = node.data('statesandinfos')[index];
 
     var inputTypes = {
-      "font-size": "regular",
-      "font-family": "selectbox",
-      "font-weight": "selectbox",
-      "font-style": "selectbox",
-      "font-color": "regular",
-      "border-color": "regular",
-      "background-color": "regular",
-      "border-width": "regular",
-      "shape-name": "selectbox",
+      'font-size': 'regular',
+      'font-family': 'selectbox',
+      'font-weight': 'selectbox',
+      'font-style': 'selectbox',
+      'font-color': 'regular',
+      'border-color': 'regular',
+      'background-color': 'regular',
+      'border-width': 'regular',
+      'shape-name': 'selectbox'
     };
 
     self.updateCurrentProperties(infoboxObj);
     self.template = _.template($("#infobox-properties-template").html());
     self.template = self.template(self.currentProperties);
     $(self.el).html(self.template);
-    colorPickerUtils.bindPicker2Input("#infobox-properties-border-color", null);
-    colorPickerUtils.bindPicker2Input(
-      "#infobox-properties-background-color",
-      null
-    );
-    colorPickerUtils.bindPicker2Input(
-      "#" + generateInputId("font-color", self.selectorPrefix),
-      null
-    );
-
-    $(self.el).modal("show");
+    colorPickerUtils.bindPicker2Input('#infobox-properties-border-color', null);
+    colorPickerUtils.bindPicker2Input('#infobox-properties-background-color', null);
+    colorPickerUtils.bindPicker2Input('#' + generateInputId('font-color', self.selectorPrefix), null);
+
+    $(self.el).modal('show');
 
     function readInfoboxProps() {
       var props = {};
 
-      for (prop in self.propsMap) {
-        var mappedProp = self.propsMap[prop];
+      for ( prop in self.propsMap ) {
+        var mappedProp = self.propsMap[ prop ];
         var val;
 
-        if (inputTypes[mappedProp] == "regular") {
-          val = $("#" + generateInputId(mappedProp, self.selectorPrefix)).val();
-        } else if (inputTypes[mappedProp] == "selectbox") {
-          val = $(
-            generateSelectBoxNameSelector(mappedProp, self.selectorPrefix)
-          ).val();
+        if ( inputTypes[ mappedProp ] == 'regular' ) {
+          val = $( '#' + generateInputId( mappedProp, self.selectorPrefix ) ).val();
+        }
+        else if ( inputTypes[ mappedProp ] == 'selectbox' ) {
+          val = $( generateSelectBoxNameSelector( mappedProp, self.selectorPrefix ) ).val();
         }
 
-        props[mappedProp] = val;
+        props[ mappedProp ] = val;
       }
 
       return props;
     }
 
-    $(document)
-      .off("click", "#set-infobox-properties")
-      .on("click", "#set-infobox-properties", function (evt) {
-        var newProps = readInfoboxProps();
+    $(document).off("click", "#set-infobox-properties").on("click", "#set-infobox-properties", function( evt ) {
+      var newProps = readInfoboxProps();
 
-        appUtilities
-          .getActiveChiseInstance()
-          .updateInfoboxStyle(node, index, newProps);
+      appUtilities.getActiveChiseInstance().updateInfoboxStyle(node, index, newProps);
 
-        $(self.el).modal("toggle");
-      });
+      $(self.el).modal('toggle');
+    });
 
-    $(document)
-      .off("click", "#set-as-default-infobox-properties")
-      .on("click", "#set-as-default-infobox-properties", function (evt) {
-        if (typeof appUtilities.stagedElementStyles === "undefined") {
-          appUtilities.stagedElementStyles = [];
-        }
+    $(document).off("click", "#set-as-default-infobox-properties").on("click", "#set-as-default-infobox-properties", function( evt ) {
 
-        var chiseInstance = appUtilities.getActiveChiseInstance();
-        var cy = appUtilities.getActiveCy();
-        var parent = chiseInstance.classes
-          .getAuxUnitClass(infoboxObj)
-          .getParent(infoboxObj, cy);
-        var parentClass = parent.data("class");
-
-        var updates = readInfoboxProps();
-        var currentDefaults =
-          chiseInstance.elementUtilities.getDefaultProperties(parentClass)[
-            infoboxObj.clazz
-          ];
-        var infoboxStyle = $.extend({}, currentDefaults, updates);
-        chiseInstance.setDefaultProperty(
-          parentClass,
-          infoboxObj.clazz,
-          infoboxStyle
-        );
-
-        var stagedElement = appUtilities.stagedElementStyles.find(
-          (b) => b.element == parentClass
-        );
-        if (stagedElement) {
-          var stagedElementInfoboxStyles = stagedElement.infoBoxStyles.find(
-            (b) => b.clazz == infoboxObj.clazz
-          );
-          if (stagedElementInfoboxStyles) {
-            stagedElementInfoboxStyles.styles = infoboxStyle;
-          } else {
-            stagedElement.infoBoxStyles.push({
-              clazz: infoboxObj.clazz,
-              styles: infoboxStyle,
-            });
-          }
-        } else {
-          appUtilities.stagedElementStyles.push({
-            element: parentClass,
-            type: "node",
-            styles: [],
-            infoBoxStyles: [{ clazz: infoboxObj.clazz, styles: infoboxStyle }],
-          });
+      if (typeof appUtilities.stagedElementStyles === 'undefined') {
+        appUtilities.stagedElementStyles = [];
+      } 
+     
+      var chiseInstance = appUtilities.getActiveChiseInstance();
+      var cy = appUtilities.getActiveCy();
+      var parent = chiseInstance.classes.getAuxUnitClass(infoboxObj).getParent(infoboxObj, cy);
+      var parentClass = parent.data('class');
+
+     
+      var updates = readInfoboxProps();
+      var currentDefaults = chiseInstance.elementUtilities.getDefaultProperties( parentClass )[ infoboxObj.clazz ];
+      var infoboxStyle = $.extend( {}, currentDefaults, updates );
+      chiseInstance.setDefaultProperty( parentClass, infoboxObj.clazz, infoboxStyle );
+
+      var  stagedElement =  appUtilities.stagedElementStyles.find(b => b.element == parentClass);
+      if(stagedElement)
+      {
+        var stagedElementInfoboxStyles = stagedElement.infoBoxStyles.find(b=>b.clazz == infoboxObj.clazz);
+        if(stagedElementInfoboxStyles)
+        {
+          stagedElementInfoboxStyles.styles = infoboxStyle;
         }
-      });
-  },
+        else
+        {
+          stagedElement.infoBoxStyles.push({clazz:infoboxObj.clazz,styles:infoboxStyle});
+        }
+      }
+      else
+      {
+            appUtilities.stagedElementStyles.push({element : parentClass, type:'node',styles:[], infoBoxStyles:[{clazz:infoboxObj.clazz,styles:infoboxStyle}]});
+      }
+
+     
+    });
+  }
 });
 
 var AnnotationListView = Backbone.View.extend({
   elements: [],
-  el: "#annotations-container",
+  el: '#annotations-container',
   initialize: function () {
-    this.listenTo(this.model, "add", this.addAnnotationElementView);
-    this.listenTo(this.model, "destroy", this.resetAndPopulate);
+    this.listenTo(this.model, 'add', this.addAnnotationElementView);
+    this.listenTo(this.model, 'destroy', this.resetAndPopulate);
     this.resetAndPopulate();
   },
   events: {
-    "click #annotations-add-button": "createAnnotation",
+    'click #annotations-add-button': 'createAnnotation'
   },
-  resetAndPopulate: function () {
+  resetAndPopulate: function() {
     this.elements = [];
     this.render();
     // populate from the model
     var self = this;
-    this.model.forEach(function (item) {
+    this.model.forEach(function(item){
       self.addAnnotationElementView(item);
     });
   },
-  createAnnotation: function (e) {
-    var newAnnot = this.model.create({ cyParent: this.model.cyParent });
+  createAnnotation: function(e) {
+    var newAnnot = this.model.create({cyParent: this.model.cyParent});
   },
-  addAnnotationElementView: function (annotationModel) {
-    var view = new AnnotationElementView({ model: annotationModel });
+  addAnnotationElementView: function(annotationModel) {
+    var view = new AnnotationElementView({model: annotationModel});
     this.elements.push(view);
-    this.$el.find("p#annotations-small-helptext").remove();
-    this.$el.children("div").first().append(view.render().el);
+    this.$el.find('p#annotations-small-helptext').remove();
+    this.$el.children('div').first().append(view.render().el);
   },
   render: function () {
     this.template = _.template($("#annotation-list-template").html());
     this.$el.empty();
     var renderedElement = [];
-    for (var i = 0; i < this.elements.length; i++) {
+    for(var i=0; i<this.elements.length; i++) {
       renderedElement.push(this.elements[i].render().$el.html());
     }
-    this.$el.html(this.template({ elements: renderedElement }));
+    this.$el.html(this.template({elements: renderedElement}));
     return this;
-  },
+  }
 });
 
 var AnnotationElementView = Backbone.View.extend({
   //status is: unchecked, pending, validated, error
   previousSelectedRelation: null, // convenience variable, to check change in controlled vocabulary mode
-  tagName: "div",
+  tagName: 'div',
   initialize: function () {
     /**
      * We need to debounce the text input, but if we do that when defining events normally, we lose the context (this)
@@ -5577,39 +4301,34 @@ var AnnotationElementView = Backbone.View.extend({
      * This is done through delegateEvents
      */
     var eventsHash = this.events; // get all defined events
-    eventsHash["input .annotations-object-identifier"] = _.debounce(
-      this.valueChangeHandler,
-      1000
-    ); // add the one that need debounce
+    eventsHash["input .annotations-object-identifier"] = _.debounce(this.valueChangeHandler, 1000); // add the one that need debounce
     this.delegateEvents(eventsHash); // redefine all events with delegate
 
     /** bind events triggered on change of model */
-    this.listenTo(this.model, "change:status", this.statusChangeHandler);
+    this.listenTo(this.model, 'change:status', this.statusChangeHandler);
   },
   events: {
-    "change .annotations-db-list": "dbChangeHandler",
-    "change .annotations-vocabulary-list": "vocabularyChangeHandler",
-    "click .annotations-retry-validation": "retryHandler",
-    "click .delete-annotation": "deleteHandler",
+    "change .annotations-db-list": 'dbChangeHandler',
+    "change .annotations-vocabulary-list": 'vocabularyChangeHandler',
+    "click .annotations-retry-validation": 'retryHandler',
+    "click .delete-annotation": 'deleteHandler'
     //"input .annotations-object-identifier": "valueChangeHandler" <-- see initialize
   },
-  dbChangeHandler: function (e) {
+  dbChangeHandler: function(e) {
     var selectedDBkey = $(e.currentTarget).val();
     if (this.underControlledMode()) {
-      this.model.set("selectedDB", selectedDBkey);
+      this.model.set('selectedDB', selectedDBkey);
       this.model.save();
       this.launchValidation();
-    } else {
-      if (
-        selectedDBkey &&
-        !(selectedDBkey.length === 0 || !selectedDBkey.trim())
-      ) {
+    }
+    else {
+      if (selectedDBkey && !(selectedDBkey.length === 0 || !selectedDBkey.trim())) {
         // real value provided
         var globalProp = this.model.constructor.userDefinedProperties;
         if (!_.contains(globalProp, selectedDBkey)) {
           globalProp.push(selectedDBkey);
         }
-        this.model.set("selectedDB", selectedDBkey);
+        this.model.set('selectedDB', selectedDBkey);
         this.model.save();
         this.render();
       }
@@ -5617,113 +4336,103 @@ var AnnotationElementView = Backbone.View.extend({
   },
   valueChangeHandler: function (e) {
     var identifier = $(e.currentTarget).val();
-    this.model.set("annotationValue", identifier);
+    this.model.set('annotationValue', identifier);
     this.model.save();
     if (this.underControlledMode()) {
       this.launchValidation();
     }
   },
-  vocabularyChangeHandler: function (e) {
+  vocabularyChangeHandler: function(e) {
     var relation = $(e.currentTarget).val();
-    var previouslyControlledMode = this.underControlledMode(
-      this.previousSelectedRelation
-    );
+    var previouslyControlledMode = this.underControlledMode(this.previousSelectedRelation);
     var nowControlledMode = this.underControlledMode(relation);
-    this.model.set("selectedRelation", relation);
+    this.model.set('selectedRelation', relation);
 
     if (previouslyControlledMode && !nowControlledMode) {
       // went from controlled into uncontrolled mode, reset key
-      this.model.set("selectedDB", null);
+      this.model.set('selectedDB', null);
       // validation cannot be applied, considered always valid
-      this.model.set("status", "validated");
-    } else if (!previouslyControlledMode && nowControlledMode) {
+      this.model.set('status', 'validated');
+    }
+    else if (!previouslyControlledMode && nowControlledMode) {
       // went from uncontrolled to controlled, select defaults db
-      this.model.set("selectedDB", this.model.defaults.selectedDB);
+      this.model.set('selectedDB', this.model.defaults.selectedDB);
       // reset validation status
-      this.model.set("status", "unchecked");
+      this.model.set('status', 'unchecked');
     }
 
     this.model.save();
     this.render();
   },
-  retryHandler: function (e) {
+  retryHandler: function(e) {
     this.launchValidation();
   },
-  statusChangeHandler: function (annotationModel) {
+  statusChangeHandler: function(annotationModel) {
     this.render();
   },
-  deleteHandler: function (e) {
+  deleteHandler: function(e) {
     this.model.destroy();
     this.remove();
   },
-  underControlledMode: function (relation) {
+  underControlledMode: function(relation) {
     if (relation) {
       return this.model.constructor.vocabulary[relation].controlled;
-    } else {
-      return this.model.constructor.vocabulary[
-        this.model.get("selectedRelation")
-      ].controlled;
+    }
+    else {
+      return this.model.constructor.vocabulary[this.model.get('selectedRelation')].controlled;
     }
   },
   render: function () {
     this.template = _.template($("#annotation-element-template").html());
     this.$el.empty();
-    this.$el.html(
-      this.template({
-        vocabulary: this.model.constructor.vocabulary,
-        dbList: this.model.constructor.dbList,
-        userDefinedProperties: this.model.constructor.userDefinedProperties,
-        status: this.model.get("status"),
-        index: this.model.collection.indexOf(this.model),
-        selectedDB: this.model.get("selectedDB"),
-        selectedRelation: this.model.get("selectedRelation"),
-        annotationValue: this.model.get("annotationValue"),
-      })
-    );
-    this.previousSelectedRelation = this.model.get("selectedRelation"); // save the value of relation, for comparison
+    this.$el.html(this.template({
+      vocabulary: this.model.constructor.vocabulary,
+      dbList: this.model.constructor.dbList,
+      userDefinedProperties: this.model.constructor.userDefinedProperties,
+      status: this.model.get('status'),
+      index: this.model.collection.indexOf(this.model),
+      selectedDB: this.model.get('selectedDB'),
+      selectedRelation: this.model.get('selectedRelation'),
+      annotationValue: this.model.get('annotationValue')
+    }));
+    this.previousSelectedRelation = this.model.get('selectedRelation'); // save the value of relation, for comparison
     return this;
   },
   launchValidation: function () {
     var index = this.model.collection.indexOf(this.model);
-    var selectedDBkey = this.model.get("selectedDB");
-    var identifier = this.model.get("annotationValue");
+    var selectedDBkey = this.model.get('selectedDB');
+    var identifier = this.model.get('annotationValue');
     // we don't need to validate if the input is empty or blank
     if (identifier && !(identifier.length === 0 || !identifier.trim())) {
-      this.model.set("status", "pending");
-      var validateAnnotation = this.model.get("validateAnnotation");
+      this.model.set('status', 'pending');
+      var validateAnnotation = this.model.get('validateAnnotation');
       var self = this;
-      validateAnnotation(selectedDBkey, identifier, function (err, result) {
-        if (err) {
-          self.model.set("status", "error");
+      validateAnnotation(selectedDBkey, identifier, function(err, result) {
+        if(err) {
+          self.model.set('status', 'error');
           self.model.save();
           console.error("validation error", err);
           return;
         }
         // result contains the validated url
-        self.model.set("status", "validated");
-        self.model.set("annotationValue", result);
+        self.model.set('status', 'validated');
+        self.model.set('annotationValue', result);
         self.model.save();
         self.render();
       });
     }
-  },
+  }
 });
 
 function bindColorPicker2GridColorInputs() {
-  const ids = [
-    "#grid-color",
-    "#init-Pos-Alignment-Color",
-    "#geometric-guideline-color",
-    "#horizontal-guideline-color",
-    "#vertical-guideline-color",
-  ];
+  const ids = ['#grid-color', '#init-Pos-Alignment-Color', '#geometric-guideline-color', '#horizontal-guideline-color', '#vertical-guideline-color'];
   for (let i = 0; i < ids.length; i++) {
     colorPickerUtils.bindPicker2Input(ids[i], null);
   }
 }
 
 module.exports = {
-  //  BioGeneView: BioGeneView,
+//  BioGeneView: BioGeneView,
   ChemicalView: ChemicalView,
   LayoutPropertiesView: LayoutPropertiesView,
   ColorSchemeInspectorView: ColorSchemeInspectorView,
@@ -5739,8 +4448,8 @@ module.exports = {
   PathsByURIQueryView: PathsByURIQueryView,
   PromptSaveView: PromptSaveView,
   FileSaveView: FileSaveView,
-  SaveUserPreferencesView: SaveUserPreferencesView,
-  LoadUserPreferencesView: LoadUserPreferencesView,
+  SaveUserPreferencesView:SaveUserPreferencesView,
+  LoadUserPreferencesView:LoadUserPreferencesView,
   PromptConfirmationView: PromptConfirmationView,
   PromptMapTypeView: PromptMapTypeView,
   PromptInvalidFileView: PromptInvalidFileView,
@@ -5756,5 +4465,5 @@ module.exports = {
   PromptInvalidURLWarning: PromptInvalidURLWarning,
   PromptInvalidImageWarning: PromptInvalidImageWarning,
   PromptInvalidEdgeWarning: PromptInvalidEdgeWarning,
-  PromptSbmlConversionErrorView: PromptSbmlConversionErrorView,
+  PromptSbmlConversionErrorView : PromptSbmlConversionErrorView
 };
diff --git a/index.html b/index.html
index 32b3298e2..f9ebde524 100644
--- a/index.html
+++ b/index.html
@@ -102,14 +102,12 @@
                                                         <input id="sif-layout-input" type="file" style="display:none" />
                                                         <input id="sbml-file" type="file" style="display:none" />
                                                         <input id="celldesigner-file-input" type="file" style="display:none" />
-                                                        <input id="gpml-file-input" type="file" style="display:none" />
                                                         <li><a href="#" id="import-simple-af-file">Simple AF</a></li>
                                                         <li><a href="#" id="import-sif-file">SIF</a></li>
                                                         <li><a href="#" id="import-sif-style">SIF Style</a></li>
                                                         <li><a href="#" id="import-sif-layout">SIF Layout</a></li>
                                                         <li><a href="#" id="import-SBML-file">SBML</a></li>
                                                         <li><a href="#" id="import-celldesigner-file">CellDesigner</a></li>
-                                                        <li><a href="#" id="import-GPML-file">GPML</a></li>
                                                     </ul>
                                                 </li>
                                                 <li class="dropdown-submenu">
@@ -125,7 +123,6 @@
                                                         <li><a href="#" id="export-to-sif-layout">SIF Layout</a></li>
                                                         <li><a href="#" id="export-as-sbml">SBML</a></li>
                                                         <li><a href="#" id="export-as-celldesigner-file">CellDesigner</a></li>
-                                                        <li><a href="#" id="export-as-gpml">GPML</a></li>
                                                     </ul>
                                                 </li>
                                                 <li class="dropdown-submenu">
@@ -922,7 +919,7 @@ <h2 class="sbgn-text">About</h2>
                             <table width="100%" height="100%" align="center" valign="center">
                             <tbody>
                                 <tr><td>
-                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.1.0</p>
+                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.0.5</p>
                                     </td></tr>
 
                                 <tr><td>

From 0e0c657770d5bd23f74769a74e7e1ddc3e0688ea Mon Sep 17 00:00:00 2001
From: hasanbalci <balcihasan99@gmail.com>
Date: Fri, 2 Feb 2024 12:33:49 +0100
Subject: [PATCH 25/29] Add GPML import/export support

---
 app/js/app-menu.js       | 45 +++++++++++++++++++++++++++++++++++++---
 app/js/app-utilities.js  | 26 ++++++++++++++++++-----
 app/js/backbone-views.js | 13 ++++++++++++
 index.html               |  3 +++
 4 files changed, 79 insertions(+), 8 deletions(-)

diff --git a/app/js/app-menu.js b/app/js/app-menu.js
index 2caa19858..85b7507ff 100644
--- a/app/js/app-menu.js
+++ b/app/js/app-menu.js
@@ -363,9 +363,11 @@ module.exports = function() {
     $("#import-experimental-data").click(function () {
       $("#overlay-data").trigger('click');
     });
+
     $("#import-SBML-file").click(function () {
       $("#sbml-file").trigger('click');
     });
+
     $("#import-simple-af-file").click(function () {
       $("#simple-af-file-input").trigger('click');
     });
@@ -382,6 +384,10 @@ module.exports = function() {
       $("#sif-layout-input").trigger('click');
     });
 
+    $("#import-GPML-file").click(function () {
+      $("#gpml-file-input").trigger('click');
+    });
+
     $("#overlay-data").change(function () {
       var chiseInstance = appUtilities.getActiveChiseInstance();
       var cy = appUtilities.getActiveCy();
@@ -461,6 +467,34 @@ module.exports = function() {
         $(this).val("");
       }
     });
+
+    $("#gpml-file-input").change(function () {
+
+      var chiseInstance = appUtilities.getActiveChiseInstance();
+      var cy = appUtilities.getActiveCy();
+      if ($(this).val() != "") {
+        var file = this.files[0];
+        appUtilities.setFileContent(file.name);
+        chiseInstance.loadGpml(file,  success = function(data){
+          if (cy.elements().length !== 0) {
+            promptConfirmationView.render(function () {
+              chiseInstance.loadSBGNMLText(data.message, false, file.name, cy);
+            });
+          }
+          else {
+            chiseInstance.loadSBGNMLText(data.message, false, file.name, cy);
+          }
+        },
+        error = function(data){
+          promptFileConversionErrorView.render();          
+          document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!";
+
+        });
+
+        $(this).val("");
+      }
+    });
+
     $("#simple-af-file-input").change(function () {
       var chiseInstance = appUtilities.getActiveChiseInstance();
 
@@ -1333,14 +1367,19 @@ module.exports = function() {
     $("#export-as-sbgnml-plain-file").click(function (evt) {
       fileSaveView.render("sbgn", "plain");
     });
+
     $("#export-as-sbgnml3-plain-file").click(function (evt) {
       fileSaveView.render("sbgn", "plain3");
     });
 
-   $("#export-as-sbml").click(function (evt) {
-    fileSaveView.render("sbml", null, null);
-   
+    $("#export-as-sbml").click(function (evt) {
+      fileSaveView.render("sbml", null, null);
     });
+
+    $("#export-as-gpml").click(function (evt) {
+      fileSaveView.render("gpml", null, null);
+    }); 
+
     $("#add-complex-for-selected").click(function (e) {
 
       // use active chise instance
diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js
index f0505839d..c1a489324 100644
--- a/app/js/app-utilities.js
+++ b/app/js/app-utilities.js
@@ -2580,27 +2580,43 @@ appUtilities.launchWithModelFile = function() {
             lastModified: Date.now()
           });
 
-          if (fileExtension === "xml" || fileExtension === "xml#" 
+          if (fileExtension === "gpml") {
+            chiseInstance.loadGpml(file, success =  async function (data) {
+              if (cyInstance.elements().length !== 0) {
+                promptConfirmationView.render( function () {
+                  chiseInstance.loadSBGNMLText(data, false, filename, cy, paramObj);
+                  chiseInstance.endSpinner('paths-byURL-spinner');
+                });
+
+                chiseInstance.endSpinner("paths-byURL-spinner");
+              }
+              else {
+              await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
+                chiseInstance.endSpinner("paths-byURL-spinner");
+              }
+            });
+          } 
+          else if (fileExtension === "xml" || fileExtension === "xml#" 
               || fileExtension === "sbml" || fileExtension === "sbml#") {
 
             await chiseInstance.loadSbml(fileToLoad,  success = async function(data){
               var cy = appUtilities.getActiveCy();
               if (cy.elements().length !== 0) {
                 await promptConfirmationView.render(async function () {
-                 await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
-                  chiseInstance.endSpinner('paths-byURL-spinner')
+                  await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
+                  chiseInstance.endSpinner('paths-byURL-spinner');
                 });
               }
               else {
                 await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj);
-                chiseInstance.endSpinner('paths-byURL-spinner')
+                chiseInstance.endSpinner('paths-byURL-spinner');
 
               }
             });
           }
           else {
             chiseInstance.loadNwtFile(fileToLoad, loadCallbackSBGNMLValidity, loadCallbackInvalidityWarning, paramObj);
-            chiseInstance.endSpinner('paths-byURL-spinner')
+            chiseInstance.endSpinner('paths-byURL-spinner');
           }
         }
         else {
diff --git a/app/js/backbone-views.js b/app/js/backbone-views.js
index 2e3fc98a6..2a74e2313 100644
--- a/app/js/backbone-views.js
+++ b/app/js/backbone-views.js
@@ -2549,6 +2549,9 @@ var FileSaveView = Backbone.View.extend({
       case 'sbml':
         fExt = 'sbml'
         break;
+      case 'gpml':
+        fExt = 'gpml'
+        break;   
       case 'celldesigner':
       default:
         fExt = 'xml'
@@ -2641,6 +2644,16 @@ var FileSaveView = Backbone.View.extend({
           //document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!";              
         });
      
+      }
+      else if(fileformat === "gpml")
+      {
+        chiseInstance.saveAsGpml(filename, function(data,errorMessage){
+
+          var promptSbmlConversionErrorView  = new PromptSbmlConversionErrorView({el: '#prompt-sbmlConversionError-table'});
+          promptSbmlConversionErrorView.render(data,errorMessage);             
+          //document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!";              
+        });
+
       }
       else { // invalid file format provided
         console.error("FileSaveView received unsupported file format: "+fileformat);
diff --git a/index.html b/index.html
index f9ebde524..864a0fab1 100644
--- a/index.html
+++ b/index.html
@@ -102,12 +102,14 @@
                                                         <input id="sif-layout-input" type="file" style="display:none" />
                                                         <input id="sbml-file" type="file" style="display:none" />
                                                         <input id="celldesigner-file-input" type="file" style="display:none" />
+                                                        <input id="gpml-file-input" type="file" style="display:none" />
                                                         <li><a href="#" id="import-simple-af-file">Simple AF</a></li>
                                                         <li><a href="#" id="import-sif-file">SIF</a></li>
                                                         <li><a href="#" id="import-sif-style">SIF Style</a></li>
                                                         <li><a href="#" id="import-sif-layout">SIF Layout</a></li>
                                                         <li><a href="#" id="import-SBML-file">SBML</a></li>
                                                         <li><a href="#" id="import-celldesigner-file">CellDesigner</a></li>
+                                                        <li><a href="#" id="import-GPML-file">GPML</a></li>
                                                     </ul>
                                                 </li>
                                                 <li class="dropdown-submenu">
@@ -123,6 +125,7 @@
                                                         <li><a href="#" id="export-to-sif-layout">SIF Layout</a></li>
                                                         <li><a href="#" id="export-as-sbml">SBML</a></li>
                                                         <li><a href="#" id="export-as-celldesigner-file">CellDesigner</a></li>
+                                                        <li><a href="#" id="export-as-gpml">GPML</a></li>
                                                     </ul>
                                                 </li>
                                                 <li class="dropdown-submenu">

From 46b98e723fee862a3c76796b15b82f667f4652b2 Mon Sep 17 00:00:00 2001
From: hasanbalci <balcihasan99@gmail.com>
Date: Fri, 2 Feb 2024 12:51:09 +0100
Subject: [PATCH 26/29] Update version number to 3.1.1

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 864a0fab1..8a0ffe819 100644
--- a/index.html
+++ b/index.html
@@ -922,7 +922,7 @@ <h2 class="sbgn-text">About</h2>
                             <table width="100%" height="100%" align="center" valign="center">
                             <tbody>
                                 <tr><td>
-                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.0.5</p>
+                                        <p id="about-newt-version" class="sbgn-text">Newt Editor version 3.1.1</p>
                                     </td></tr>
 
                                 <tr><td>

From 8f82435960d72e96ccf793a50f86f2a97bddd0f9 Mon Sep 17 00:00:00 2001
From: hasanbalci <balcihasan99@gmail.com>
Date: Fri, 2 Feb 2024 13:32:02 +0100
Subject: [PATCH 27/29] Fix bug on GPML support

---
 app/js/app-utilities.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js
index c1a489324..cfe3eb87c 100644
--- a/app/js/app-utilities.js
+++ b/app/js/app-utilities.js
@@ -2581,7 +2581,7 @@ appUtilities.launchWithModelFile = function() {
           });
 
           if (fileExtension === "gpml") {
-            chiseInstance.loadGpml(file, success =  async function (data) {
+            chiseInstance.loadGpml(fileToLoad, success =  async function (data) {
               if (cyInstance.elements().length !== 0) {
                 promptConfirmationView.render( function () {
                   chiseInstance.loadSBGNMLText(data, false, filename, cy, paramObj);

From b61433a3fe107c5b8223f049ab1dd9cf3d64288b Mon Sep 17 00:00:00 2001
From: hasanbalci <balcihasan99@gmail.com>
Date: Fri, 2 Feb 2024 14:09:31 +0100
Subject: [PATCH 28/29] Fix bug on GPML support

---
 app/js/app-utilities.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js
index cfe3eb87c..f409c8522 100644
--- a/app/js/app-utilities.js
+++ b/app/js/app-utilities.js
@@ -2582,7 +2582,8 @@ appUtilities.launchWithModelFile = function() {
 
           if (fileExtension === "gpml") {
             chiseInstance.loadGpml(fileToLoad, success =  async function (data) {
-              if (cyInstance.elements().length !== 0) {
+              var cy = appUtilities.getActiveCy();
+              if (cy.elements().length !== 0) {
                 promptConfirmationView.render( function () {
                   chiseInstance.loadSBGNMLText(data, false, filename, cy, paramObj);
                   chiseInstance.endSpinner('paths-byURL-spinner');

From 98af7d00c5a620ca49710f963795775cabb35ded Mon Sep 17 00:00:00 2001
From: hasanbalci <balcihasan99@gmail.com>
Date: Fri, 2 Feb 2024 14:19:12 +0100
Subject: [PATCH 29/29] Update About page

---
 index.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 8a0ffe819..3518d21fa 100644
--- a/index.html
+++ b/index.html
@@ -930,8 +930,7 @@ <h2 class="sbgn-text">About</h2>
                                     </td></tr>
 
                                 <tr><td>
-                                        <p class="address-text marg">i-Vis Information Visualization Research Lab, Ankara, Turkey,</p>
-                                        <p class="address-text">in collaboration with the Demir Lab at OHSU, USA</p>
+                                        <p class="address-text">i-Vis Information Visualization Research Lab, Ankara, Turkey</p>
                                     </td></tr>
                                 <tr><td>
                                         <p class="address-text">