diff --git a/app/js/backbone-views.js b/app/js/backbone-views.js
index b3df9a57..a357a029 100644
--- a/app/js/backbone-views.js
+++ b/app/js/backbone-views.js
@@ -2171,23 +2171,33 @@ var NeighborhoodQueryView = Backbone.View.extend({
                 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 if (data.response.body === "") {
-                new PromptEmptyQueryResultView({
-                  el: "#prompt-emptyQueryResult-table",
-                }).render();
-                chiseInstance.endSpinner("neighborhood-spinner");
+                if (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 PromptEmptyQueryResultView({
+                    el: "#prompt-emptyQueryResult-table",
+                  }).render();
+                  chiseInstance.endSpinner("neighborhood-spinner");
+                }
+              } else if (data.error) {
+                let { code } = data.error;
+                if (code === "ESOCKETTIMEDOUT") {
+                  new PromptRequestTimedOutView({
+                    el: "#prompt-requestTimedOut-table",
+                  }).render();
+                  chiseInstance.endSpinner("neighborhood-spinner");
+                }
               } else {
                 new PromptInvalidQueryView({
                   el: "#prompt-invalidQuery-table",
@@ -2242,6 +2252,14 @@ var NeighborhoodQueryView = Backbone.View.extend({
                     currentInferNestingOnLoad;
                   chiseInstance.endSpinner("neighborhood-spinner");
                   $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
+                } else if (data.error) {
+                  let { code } = data.error;
+                  if (code === "ESOCKETTIMEDOUT") {
+                    new PromptRequestTimedOutView({
+                      el: "#prompt-requestTimedOut-table",
+                    }).render();
+                    chiseInstance.endSpinner("neighborhood-spinner");
+                  }
                 } else if (data.response.body === "") {
                   new PromptEmptyQueryResultView({
                     el: "#prompt-emptyQueryResult-table",
@@ -2406,12 +2424,17 @@ var PathsBetweenQueryView = Backbone.View.extend({
                   $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]);
                 } else {
                   new PromptEmptyQueryResultView({
-                    el: "#prompt-emptyQueryResult-table",
+                    el: "#prompt-requestTimedOut-table",
+                  }).render();
+                  chiseInstance.endSpinner("paths-between-spinner");
+                }
+              } else if (data.error) {
+                let { code } = data.error;
+                if (code === "ESOCKETTIMEDOUT") {
+                  new PromptRequestTimedOutView({
+                    el: "#prompt-requestTimedOut-table",
                   }).render();
                   chiseInstance.endSpinner("paths-between-spinner");
-                  document.getElementById(
-                    "query-pathsbetween-gene-symbols"
-                  ).val = "";
                 }
               } else {
                 new PromptInvalidQueryView({
@@ -2469,9 +2492,14 @@ var PathsBetweenQueryView = Backbone.View.extend({
                       el: "#prompt-emptyQueryResult-table",
                     }).render();
                     chiseInstance.endSpinner("paths-between-spinner");
-                    document.getElementById(
-                      "query-pathsbetween-gene-symbols"
-                    ).val = "";
+                  }
+                } else if (data.error) {
+                  let { code } = data.error;
+                  if (code === "ESOCKETTIMEDOUT") {
+                    new PromptRequestTimedOutView({
+                      el: "#prompt-requestTimedOut-table",
+                    }).render();
+                    chiseInstance.endSpinner("paths-between-spinner");
                   }
                 } else {
                   new PromptInvalidQueryView({
@@ -2661,23 +2689,34 @@ var PathsFromToQueryView = Backbone.View.extend({
             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]);
+              if (!data.error && data.response.statusCode == 200) {
+                if (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 PromptEmptyQueryResultView({
+                    el: "#prompt-emptyQueryResult-table",
+                  }).render();
+                  chiseInstance.endSpinner("paths-fromto-spinner");
+                }
+              } else if (data.error) {
+                let { code } = data.error;
+                if (code === "ESOCKETTIMEDOUT") {
+                  new PromptRequestTimedOutView({
+                    el: "#prompt-requestTimedOut-table",
+                  }).render();
+                  chiseInstance.endSpinner("paths-fromto-spinner");
+                }
               } else {
                 new PromptInvalidQueryView({
                   el: "#prompt-invalidQuery-table",
@@ -2715,23 +2754,34 @@ var PathsFromToQueryView = Backbone.View.extend({
               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]);
+                if (!data.error && data.response.statusCode == 200) {
+                  if (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 PromptEmptyQueryResultView({
+                      el: "#prompt-emptyQueryResult-table",
+                    }).render();
+                    chiseInstance.endSpinner("paths-fromto-spinner");
+                  }
+                } else if (data.error) {
+                  let { code } = data.error;
+                  if (code === "ESOCKETTIMEDOUT") {
+                    new PromptRequestTimedOutView({
+                      el: "#prompt-requestTimedOut-table",
+                    }).render();
+                    chiseInstance.endSpinner("paths-fromto-spinner");
+                  }
                 } else {
                   new PromptInvalidQueryView({
                     el: "#prompt-invalidQuery-table",
@@ -2877,23 +2927,34 @@ var CommonStreamQueryView = Backbone.View.extend({
             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]);
+              if (!data.error && data.response.statusCode == 200) {
+                if (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 PromptEmptyQueryResultView({
+                    el: "#prompt-emptyQueryResult-table",
+                  }).render();
+                  chiseInstance.endSpinner("common-stream-spinner");
+                }
+              } else if (data.error) {
+                let { code } = data.error;
+                if (code === "ESOCKETTIMEDOUT") {
+                  new PromptRequestTimedOutView({
+                    el: "#prompt-requestTimedOut-table",
+                  }).render();
+                  chiseInstance.endSpinner("common-stream-spinner");
+                }
               } else {
                 new PromptInvalidQueryView({
                   el: "#prompt-invalidQuery-table",
@@ -2931,23 +2992,34 @@ var CommonStreamQueryView = Backbone.View.extend({
               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]);
+                if (!data.error && data.response.statusCode == 200) {
+                  if (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 PromptEmptyQueryResultView({
+                      el: "#prompt-emptyQueryResult-table",
+                    }).render();
+                    chiseInstance.endSpinner("common-stream-spinner");
+                  }
+                } else if (data.error) {
+                  let { code } = data.error;
+                  if (code === "ESOCKETTIMEDOUT") {
+                    new PromptRequestTimedOutView({
+                      el: "#prompt-requestTimedOut-table",
+                    }).render();
+                    chiseInstance.endSpinner("common-stream-spinner");
+                  }
                 } else {
                   new PromptInvalidQueryView({
                     el: "#prompt-invalidQuery-table",
@@ -3059,23 +3131,34 @@ var PathsByURIQueryView = Backbone.View.extend({
             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]);
+              if (!data.error && data.response.statusCode == 200) {
+                if (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 PromptEmptyQueryResultView({
+                    el: "#prompt-emptyQueryResult-table",
+                  }).render();
+                  chiseInstance.endSpinner("paths-byURI-spinner");
+                }
+              } else if (data.error) {
+                let { code } = data.error;
+                if (code === "ESOCKETTIMEDOUT") {
+                  new PromptRequestTimedOutView({
+                    el: "#prompt-requestTimedOut-table",
+                  }).render();
+                  chiseInstance.endSpinner("paths-byURI-spinner");
+                }
               } else {
                 new PromptInvalidURIView({
                   el: "#prompt-invalidURI-table",
@@ -3113,23 +3196,34 @@ var PathsByURIQueryView = Backbone.View.extend({
               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]);
+                if (!data.error && data.response.statusCode == 200) {
+                  if (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 PromptEmptyQueryResultView({
+                      el: "#prompt-emptyQueryResult-table",
+                    }).render();
+                    chiseInstance.endSpinner("paths-byURI-spinner");
+                  }
+                } else if (data.error) {
+                  let { code } = data.error;
+                  if (code === "ESOCKETTIMEDOUT") {
+                    new PromptRequestTimedOutView({
+                      el: "#prompt-requestTimedOut-table",
+                    }).render();
+                    chiseInstance.endSpinner("paths-byURI-spinner");
+                  }
                 } else {
                   new PromptInvalidURIView({
                     el: "#prompt-invalidURI-table",
@@ -4076,6 +4170,56 @@ var PromptInvalidQueryView = Backbone.View.extend({
     return this;
   },
 });
+// var PromptRequestTimedOutView = Backbone.View.extend({
+//   initialize: function () {
+//     var self = this;
+//     self.template = _.template($("#prompt-requestTimedOut-template").html());
+//   },
+//   render: function () {
+//     var self = this;
+//     self.template = _.template($("#prompt-requestTimedOut-template").html());
+
+//     $(self.el).html(self.template);
+//     $(self.el).modal("show");
+
+//     $(document)
+//       .off("click", "#prompt-requestTimedOut-confirm")
+//       .on("click", "#prompt-requestTimedOut-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;
+//   },
+// });
+
+var PromptRequestTimedOutView = Backbone.View.extend({
+  initialize: function () {
+    var self = this;
+    self.template = _.template($("#prompt-requestTimedOut-template").html());
+  },
+  render: function () {
+    var self = this;
+    self.template = _.template($("#prompt-requestTimedOut-template").html());
+    $(self.el).html(self.template);
+    $(self.el).modal("show");
+
+    $(document)
+      .off("click", "#prompt-requestTimedOut-confirm")
+      .on("click", "#prompt-requestTimedOut-confirm", function (evt) {
+        $(self.el).modal("toggle");
+      });
+
+    return this;
+  },
+});
 
 var PromptEmptyQueryResultView = Backbone.View.extend({
   initialize: function () {
@@ -4088,7 +4232,6 @@ var PromptEmptyQueryResultView = Backbone.View.extend({
 
     $(self.el).html(self.template);
     $(self.el).modal("show");
-
     $(document)
       .off("click", "#prompt-emptyQueryResult-confirm")
       .on("click", "#prompt-emptyQueryResult-confirm", function (evt) {
diff --git a/index.html b/index.html
index fd2f4249..35de28b4 100644
--- a/index.html
+++ b/index.html
@@ -1,3452 +1,5296 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html">
-    <head>
-        <!-- Global site tag (gtag.js) - Google Analytics -->
-        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-109049087-1"></script>
-        <script>
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-
-          gtag('config', 'UA-109049087-1');
-        </script>
-
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-        <title>Newt Editor</title>
-        <link rel="icon" href="app/img/newt-icon.png" type="image/png">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-        <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
-        <link href="node_modules/intro.js/introjs.css" rel="stylesheet" type="text/css" />
-        <!--cytoscape.js plugins -->
-        <link href="node_modules/cytoscape-panzoom/cytoscape.js-panzoom.css" rel="stylesheet" type="text/css" />
-        <link href="node_modules/cytoscape-panzoom/font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css" />
-   <!-- <link href="node_modules/qtip2/dist/jquery.qtip.css" rel="stylesheet" type="text/css" /> -->
-        <link href="node_modules/cytoscape-context-menus/cytoscape-context-menus.css" rel="stylesheet" type="text/css" />
-        <!-- app's style -->
-        <link href="app/css/chise.css" rel="stylesheet">
-
-        <script src="app/bundle.js"></script>
-        <!-- libraries -->
-   <!-- <script src="node_modules/qtip2/dist/jquery.qtip.js"></script> -->
-    </head>
-
-    <body>
-
-
-               <div class="read-mode-off">
-                    <div class="nav-menu sbgn-nav-menu">
-                            <nav class="navbar navbar-default sbgn-nav-bar" role="navigation">
-                                <div>
-
-                                    <ul class="nav navbar-nav navbar-left">
-
-                                        <li class="dropdown">
-                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                File
-                                                <b class="caret"></b>
-                                            </a>
-                                            <ul class="dropdown-menu">
-                                                <input id="file-input" type="file" style="display:none" />
-                                                <li><a href="#" type="file" id="new-file">New</a></li>
-                                                <li><a href="#" type="file" id="load-file">Open...</a></li>
-                                                <li class="dropdown-submenu">
-                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                        Samples
-                                                        <!--<b class="right-caret"></b>-->
-                                                    </a>
-                                                    <ul class="dropdown-menu">
-                                                        <li><a class="title"><i>PD</i></a></li>
-                                                        <li class="divider" style="margin-top: 0"></li>
-                                                        <li><a href="#" id="load-sample1">Neuronal muscle signaling</a></li>
-                                                        <li><a href="#" id="load-sample2">CaM-CaMK dependent signaling to nucleus</a></li>
-                                                        <li><a href="#" id="load-sample3">ATM mediated phosphorylation of repair proteins</a></li>
-                                                        <li><a href="#" id="load-sample4">Activated STAT1alpha induction of the IRF1 gene</a></li>
-                                                        <li><a href="#" id="load-sample5">Vitamins B6 activation to pyridoxal phosphate</a></li>
-                                                        <li><a href="#" id="load-sample6">Insulin-like growth factor (IGF) signaling</a></li>
-                                                        <li><a href="#" id="load-sample7">PolyQ proteins interference</a></li>
-                                                        <li><a href="#" id="load-sample8">Glycolysis</a></li>
-                                                        <li><a href="#" id="load-sample9">MAPK cascade</a></li>
-                                                        <li><a href="#" id="load-sample10">Drosophila cell cycle</a></li>
-                                                        <li><a href="#" id="load-sample11">Mammalian cholesterol biosynthesis</a></li>
-                                                        <li><a href="#" id="load-sample12">Two gene system behavior</a></li>
-                                                        <li><a href="#" id="load-sample19">PD Learner's Reference Card</a></li>
-                                                        <li class="divider" style="margin-bottom: 0"></li>
-                                                        <li><a class="title"><i>AF</i></a></li>
-                                                        <li class="divider" style="margin-top: 0"></li>
-                                                        <li><a href="#" id="load-sample13">Transforming growth factor beta (TGFB) signaling</a></li>
-                                                        <li><a href="#" id="load-sample14">Repressilator</a></li>
-                                                        <li><a href="#" id="load-sample15">Epidermal growth factor receptor</a></li>
-                                                        <li><a href="#" id="load-sample16">Regulation of TGF-beta induced metastasis</a></li>
-                                                        <li><a href="#" id="load-sample20">AF Learner's Reference Card</a></li>
-                                                        <li class="divider" style="margin-bottom: 0"></li>
-                                                        <li><a class="title"><i>SIF</i></a></li>
-                                                        <li class="divider" style="margin-top: 0"></li>
-                                                        <li><a href="#" id="load-sample17">RTN4 controllers and binding proteins</a></li>
-                                                        <li><a href="#" id="load-sample18">Signaling downstream of AKT2/3</a></li>
-                                                        <li class="divider" style="margin-bottom: 0"></li>
-                                                        <li><a class="title"><i>SBML</i></a></li>
-                                                        <li class="divider" style="margin-top: 0"></li>
-                                                        <li><a href="#" id="load-sample21">Interaction topologies of MAPK cascade (M1_K2_PSEQ)</a></li>
-                                                        <li><a href="#" id="load-sample22">Pharmacokinetics of PFOA and PFOS in the monkey </a></li>
-                                                        <li><a href="#" id="load-sample23">Apoptotic Reaction Model </a></li>
-                                                        <li><a href="#" id="load-sample24"> Insulin induced signalling (PFKL phosphorylation)</a></li>
-                                                    </ul>
-                                                </li>
-                                                <li><a href="#" id="save-as-nwt">Save...</a></li>
-                                                <li><a href="#" type="file" id="close-file">Close</a></li>
-                                                <li class="divider"></li>
-                                                <li class="dropdown-submenu">
-                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                        Import
-                                                        <!--<b class="right-caret"></b>-->
-                                                    </a>
-                                                    <ul class="dropdown-menu">
-                                                        <input id="simple-af-file-input" type="file" style="display:none" />
-                                                        <input id="sif-file-input" type="file" style="display:none" />
-                                                        <input id="sif-style-input" type="file" style="display:none" />
-                                                        <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">
-                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                        Export
-                                                        <!--<b class="right-caret"></b>-->
-                                                    </a>
-                                                    <ul class="dropdown-menu">
-                                                        <li><a href="#" id="export-as-sbgnml-plain-file">SBGN-ML Plain</a></li>
-                                                        <li><a href="#" id="export-as-sbgnml3-plain-file">SBGN-ML Plain 0.3</a></li>
-                                                        <li><a href="#" id="export-as-nwt3-file">NWT 0.3</a></li>
-                                                        <li><a href="#" id="export-to-plain-sif">SIF</a></li>
-                                                        <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">
-                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                        Export as Image
-                                                        <!--<b class="right-caret"></b>-->
-                                                    </a>
-                                                    <ul class="dropdown-menu">
-                                                        <li><a href="#" id="save-as-png">PNG</a></li>
-                                                        <li><a href="#" id="save-as-jpg">JPG</a></li>
-                                                        <li><a href="#" id="save-as-svg">SVG</a></li>
-                                                    </ul>
-                                                </li>
-                                                <li class="divider"></li>
-                                                <input id="user-preferences-file-input" type="file" style="display:none" />
-                                                <li><a href="#" id="load-user-preferences">Open Preferences...</a></li>
-                                                <li><a href="#" id="save-user-preferences">Save Preferences...</a></li>
-
-
-                                            </ul>
-                                        </li>
-
-                                        <li class="dropdown">
-                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                Edit
-                                                <b class="caret"></b>
-                                            </a>
-                                            <ul class="dropdown-menu">
-                                                <li><a href="#" id="add-complex-for-selected" >Add Complex for Selected</a></li>
-                                                <li><a href="#" id="add-compartment-for-selected" >Add Compartment for Selected</a></li>
-                                                <li><a href="#" id="add-submap-for-selected" >Add Submap for Selected</a></li>
-                                                <li><a href="#" id="open-sbgn-bricks-modal" >Add Using SBGN Bricks...</a></li>
-                                                <li><a href="#" id="clone-selected" >Clone Selected</a></li>
-
-                                                <li class="divider"></li>
-                                                <li><a href="#" id="delete-selected-simple">Delete Selected Simple</a></li>
-                                                <li><a href="#" id="delete-selected-smart">Delete Selected Smart</a></li>
-
-                                                <li class="divider"></li>
-                                                <li><a href="#" id="resize-nodes-to-content">Resize Nodes To Content</a></li>
-                                                <li><a href="#" id="highlight-errors-of-validation"> Validate Map...</a></li>
-                                                <li><a href="#" id="highlight-errors-of-pd2af"> Convert PD map to AF map</a></li>
-
-                                                <li class="divider"></li>
-                                                <li class="disabled"><a href="#" id="undo-last-action" >Undo</a></li>
-                                                <li class="disabled"><a href="#" id="redo-last-action" >Redo</a></li>
-
-                                            </ul>
-                                        </li>
-
-                                        <li class="dropdown">
-                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                View
-                                                <b class="caret"></b>
-                                            </a>
-                                            <ul class="dropdown-menu">
-                                                <li class="dropdown-submenu">
-                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                        Select
-                                                    </a>
-                                                    <ul class="dropdown-menu">
-                                                        <li><a href="#" id="select-all">All Nodes and Edges</a></li>
-                                                        <li><a href="#" id="select-all-nodes">All Nodes</a></li>
-                                                        <li><a href="#" id="select-all-edges">All Edges</a></li>
-                                                    </ul>
-                                                </li>
-
-                                                <li class="dropdown-submenu">
-                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                        Zoom
-                                                    </a>
-                                                    <ul class="dropdown-menu">
-                                                        <li><a href="#" id="zoom-to-selected">Zoom to Selected</a></li>
-                                                    </ul>
-                                                </li>
-
-                                                <li class="dropdown-submenu">
-                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                        Hide/Show
-                                                        <!--<b class="right-caret"></b>-->
-                                                    </a>
-                                                    <ul class="dropdown-menu">
-                                                        <li><a href="#" id="hide-selected-simple">Hide Selected Simple</a></li>
-                                                        <li><a href="#" id="hide-selected-smart">Hide Selected Smart</a></li>
-                                                        <li><a href="#" id="show-selected">Show Selected</a></li>
-                                                        <li><a href="#" id="show-hidden-neighbors-of-selected">Show Hidden Neighbors of Selected</a></li>
-                                                        <li><a href="#" id="show-all">Show All</a></li>
-                                                    </ul>
-                                                </li>
-
-                                                <li class="dropdown-submenu">
-                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                        Collapse/Expand
-                                                        <!--<b class="right-caret"></b>-->
-                                                    </a>
-                                                    <ul class="dropdown-menu">
-                                                        <li><a href="#" id="collapse-selected">Collapse Selected</a></li>
-                                                        <li><a href="#" id="expand-selected">Expand Selected</a></li>
-                                                        <li><a href="#" id="collapse-complexes">Collapse Complexes</a></li>
-                                                        <li><a href="#" id="expand-complexes">Expand Complexes</a></li>
-                                                        <li><a href="#" id="collapse-all">Collapse All</a></li>
-                                                        <li><a href="#" id="expand-all">Expand All</a></li>
-                                                    </ul>
-                                                </li>
-
-                                                <li class="dropdown-submenu">
-                                                    <a href="#" id="add-node-menu-option" class="dropdown-toggle" data-toggle="dropdown">
-                                                        Align
-                                                        <!--<b class="right-caret"></b>-->
-                                                    </a>
-                                                    <ul class="dropdown-menu" id="add-node-submenu">
-                                                        <li class="dropdown-submenu">
-                                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                                Horizontal
-                                                                <!--<b class="right-caret"></b>-->
-                                                            </a>
-                                                            <ul class="dropdown-menu">
-                                                                <li><a href="#" id="align-horizontal-top">Top</a></li>
-                                                                <li><a href="#" id="align-horizontal-middle">Middle</a></li>
-                                                                <li><a href="#" id="align-horizontal-bottom">Bottom</a></li>
-                                                            </ul>
-                                                        </li>
-                                                        <li class="dropdown-submenu">
-                                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                                Vertical
-                                                                <!--<b class="right-caret"></b>-->
-                                                            </a>
-                                                            <ul class="dropdown-menu">
-                                                                <li><a href="#" id="align-vertical-left">Left</a></li>
-                                                                <li><a href="#" id="align-vertical-center">Center</a></li>
-                                                                <li><a href="#" id="align-vertical-right">Right</a></li>
-                                                            </ul>
-                                                        </li>
-                                                    </ul>
-                                                </li>
-                                                <li><a href="#" id="grid-properties" style="padding-right: 30px;">Grid and Guidelines...</a></li>
-                                                <li><a href="#" id="general-properties">Map Properties...</a></li>
-
-                                            </ul>
-                                        </li>
-
-                                        <li class="dropdown">
-                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                Highlight
-                                                <b class="caret"></b>
-                                            </a>
-                                            <ul class="dropdown-menu">
-                                                <li><a href="#" id="highlight-search-menu-item">Search...</a></li>
-                                                <li><a href="#" id="highlight-selected">Selected</a></li>
-                                                <li><a href="#" id="highlight-neighbors-of-selected">Neighbors of Selected</a></li>
-                                                <li><a href="#" id="highlight-processes-of-selected">Processes of Selected</a></li>
-                                                <li><a href="#" id="remove-highlights">Remove Highlights</a></li>
-                                            </ul>
-                                        </li>
-                                        <li class="dropdown">
-                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                Experiment
-                                                <b class="caret"></b>
-                                            </a>
-                                            <ul class="dropdown-menu">
-                                                <li><a href="#" id="import-experimental-data">Open...</a></li>
-                                                <input id="overlay-data" type="file" style="display:none" />
-                                                <li><a href="#" id="sample-experiment-data">Open Sample</a></li>
-                                                <li class="divider"></li>
-                                                <li><a href="#" value="true" id="experiment-data-hide-all">Hide/Show All</a></li>
-                                                <li><a href="#" id="experiment-data-remove-all">Remove All</a></li>
-                                            </ul>
-                                        </li>
-                                        <li class="dropdown">
-                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                Layout
-                                                <b class="caret"></b>
-                                            </a>
-                                            <ul class="dropdown-menu">
-                                                <li><a href="#" id="perform-layout">Perform Layout</a></li>
-                                                <li><a href="#" id="perform-static-layout">Perform Static Layout</a></li>
-                                                <li><a href="#" id="layout-properties">Layout Properties...</a></li>
-                                            </ul>
-                                        </li>
-
-                                        <li class="dropdown">
-                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                Query
-                                                <b class="caret"></b>
-                                            </a>
-                                            <ul class="dropdown-menu">
-                                                <li class="dropdown-submenu">
-                                                    <a href="#" id="query-pathwaycommons" class="dropdown-toggle" data-toggle="dropdown">
-                                                        Pathway Commons
-                                                        <!--<b class="right-caret"></b>-->
-                                                    </a>
-                                                    <ul class="dropdown-menu">
-                                                        <li><a href="#" id="query-pathsbetween">Paths Between...</a></li>
-                                                        <li><a href="#" id="query-pathsfromto">Paths From To...</a></li>
-                                                        <li><a href="#" id="query-commonstream">Common Stream...</a></li>
-                                                        <li><a href="#" id="query-neighborhood">Neighborhood...</a></li>
-                                                        <li><a href="#" id="query-pathsbyURI">By URI...</a></li>
-                                                    </ul>
-                                                </li>
-                                            </ul>
-                                        </li>
-
-                                        <li class="dropdown">
-                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                Legend
-                                                <b class="caret"></b>
-                                            </a>
-                                            <ul class="dropdown-menu">
-                                                <li><a href="#" id="PD-legend">Process Description</a></li>
-                                                <li><a href="#" id="AF-legend">Activity Flow</a></li>
-                                                <li><a href="#" id="SIF-legend">SIF</a></li>
-                                                <li><a href="#" id="SBML-legend">SBML</a></li>
-                                            </ul>
-                                        </li>
-
-
-                                        <li class="dropdown">
-                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                                Help
-                                                <b class="caret"></b>
-                                            </a>
-                                            <ul class="dropdown-menu">
-                                                <li><a href="#" id="quick-help">Quick Help</a></li>
-                                                <li><a href="#" id="quick-tutorial">Quick Tutorial</a></li>
-                                                <li><a href="#" id="ui-guide">UI Guide</a></li>
-                                                <li><a href="#" id="about">About</a></li>
-                                            </ul>
-                                        </li>
-                                    </ul>
-                                    <a href="http://newteditor.org" target="_blank"><img class="newt-logo" height="25" width="auto" src="app/img/newt-logo.png"/></a>
-                                    <span class="input-file" id="displayed-file-name"></span>
-                                    <span class="input-file" id="file-name"></span>
-                                </div>
-                            </nav>
-                    </div>
-
-                    <div id="sbgn-toolbar" class="read-mode-off">
-                            <div class="inside-menu">
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                    <img id="new-file-icon" src="app/img/toolbar/new.svg" title="New: Create a blank map">
-                                </div>
-                                
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                    <img id="load-file-icon"  src="app/img/toolbar/load.svg" title="Open: Open a map from a Newt file">
-                                </div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                    <img id="save-icon" src="app/img/toolbar/save.svg" title="Save: Save current map to a Newt file">
-                                </div>
-                            </div>
-
-                            <div class="menu-break-large sbgn-toolbar-element">&nbsp</div>
-                            <div class="inside-menu">
-
-                                <div style="padding: 1px;" class="sbgn-toolbar-element"><img id="select-mode-icon" src="app/img/toolbar/select.svg" title="Select / Edit" ></div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element"><img id="add-node-mode-icon" src="app/img/nodes/unspecified-entity.svg" title="Create a new Unspecified Entity" ></div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element"><img id="add-edge-mode-icon" src="app/img/edges/consumption.svg" title="Create a new Consumption" ></div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element"><img id="marquee-zoom-mode-icon" src="app/img/toolbar/marquee.svg" title="Marquee Zoom: Zoom to area specified by Shift + left click and drag" ></div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element"><img id="lasso-mode-icon" src="app/img/toolbar/lasso.svg" title="Lasso Tool: Select nodes / edges in free form" ></div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                    <img id="sbgn-bricks-icon"  src="app/img/toolbar/sbgnbricks-logo.svg" title="SBGN Bricks: Add using SBGN bricks" >
-                                </div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="delete-selected-simple-icon"  src="app/img/toolbar/delete-simple.svg" title="Delete Selected Simple: Delete selected nodes and edges" >
-                                </div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="delete-selected-smart-icon"  src="app/img/toolbar/delete-smart.svg" title="Delete Selected Smart: Delete selected nodes and any processes they are involved in" >
-                                </div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="highlight-errors-of-validation-icon"  src="app/img/toolbar/check.svg" title="Validate Map: Validate SBGN PD map and fix problems" >
-                                </div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="undo-icon"  src="app/img/toolbar/undo.svg" title="Undo: Undo the last operation" >
-                                </div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="redo-icon"  src="app/img/toolbar/redo.svg" title="Redo: Redo the last undone operation" >
-                                </div>
-                                
-                                
-
-                            </div>
-
-                            <div class="menu-break-large sbgn-toolbar-element">&nbsp</div>
-                            <div class="inside-menu">
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                    <img id="hide-selected-simple-icon"  src="app/img/toolbar/hide-selected-simple.svg" title="Hide Selected Simple: Hide selected nodes and edges" >
-                                </div>
-                                
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                    <img id="hide-selected-smart-icon"  src="app/img/toolbar/hide-selected-smart.svg" title="Hide Selected Smart: Hide selected nodes and any processes they are involved in" >
-                                </div>
-                    
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="show-selected-icon"  src="app/img/toolbar/show-all.svg" title="Show Selected: Show selected nodes and any processes they are involved in, hiding the remaining nodes and their edges" >
-
-                                </div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="collapse-selected-icon"  src="app/img/toolbar/collapse-selected.svg" title="Collapse Selected: Collapse selected compound node to hide its members" >
-
-                                </div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="expand-selected-icon"  src="app/img/toolbar/expand-selected.svg" title="Expand Selected: Expand selected collapsed node to show its members" >
-
-                                </div>
-
-
-                                <div class="btn-group sbgn-toolbar-element sbgn-dd-list" role="group" id="align-list">
-                                    <button id="align-button" style="padding:3px" title="Align to First Selected: Align positions of selected nodes based on the first (if any) selected node" type="button" class="btn" aria-haspopup="true" aria-expanded="false">
-                                        <div style="height: 16px;">
-                                            <img style="height: 16px; width: auto;" id="sbgn-align-img" src="app/img/align/align.svg"/>
-                                            <!--<span style="float: right;" class="caret"></span>-->
-                                        </div>
-                                    </button>
-                                    <button id="align-dd-button" style="padding:3px; padding-top:4px;" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                        <div style="height: 16px;">
-                                            <span class="caret"></span>
-                                            <span class="sr-only"></span>
-                                        </div>
-                                    </button>
-                                    <ul id="align-menu" class="dropdown-menu" >
-                                        <li><a class="dd-list-href" href="#" id="align-horizontal-top-icon">&nbsp<img src="app/img/align/align-horizontal-top.svg"/>&nbsp&nbspAlign Horizontal Top</a></li>
-                                        <li><a class="dd-list-href" href="#" id="align-horizontal-middle-icon">&nbsp<img src="app/img/align/align-horizontal-middle.svg"/>&nbsp&nbspAlign Horizontal Middle</a></li>
-                                        <li><a class="dd-list-href" href="#" id="align-horizontal-bottom-icon">&nbsp<img src="app/img/align/align-horizontal-bottom.svg"/>&nbsp&nbspAlign Horizontal Bottom</a></li>
-                                        <li><a class="dd-list-href" href="#" id="align-vertical-left-icon">&nbsp<img src="app/img/align/align-vertical-left.svg"/>&nbsp&nbspAlign Vertical Left</a></li>
-                                        <li><a class="dd-list-href" href="#" id="align-vertical-center-icon">&nbsp<img src="app/img/align/align-vertical-center.svg"/>&nbsp&nbspAlign Vertical Center</a></li>
-                                        <li><a class="dd-list-href" href="#" id="align-vertical-right-icon">&nbsp<img src="app/img/align/align-vertical-right.svg"/>&nbsp&nbspAlign Vertical Right</a></li>
-                                    </ul>
-                                </div>
-
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                    <img id="toggle-grid-snapping-icon"  src="app/img/toolbar/grid.svg" title="Enable Grid: Show and snap to grid during drag" >
-                                </div>
-                                <img id="toggle-guidelines-snapping-icon" class="sbgn-toolbar-element" src="app/img/toolbar/guidelines.svg" title="Enable Guidelines: Enable and snap to alignment guidelines during drag" >
-                                <img id="properties-icon" class="sbgn-toolbar-element" src="app/img/toolbar/settings.svg" title="Map Properties: Modify general properties of current SBGN map" >
-
-                            </div>
-
-                            <div class="menu-break-large sbgn-toolbar-element">&nbsp</div>
-                            <div class="inside-menu">
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="search-by-label-icon"  src="app/img/toolbar/search.svg" title="Search: Search (case insensitive) and highlight all nodes with specified label text" >
-
-                                </div>
-                                <input id="search-by-label-text-box" class="sbgn-toolbar-element" type="label">
-
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="highlight-selected-icon" src="app/img/toolbar/highlight-selected.svg" title="Highlight Selected: Highlight selected nodes and edges" >
-
-                                </div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="remove-highlights-icon"  src="app/img/toolbar/remove-highlights.svg" title="Remove Highlights: Remove any highlights" >
-
-                                </div>
-                            </div>
-
-                            <div class="menu-break-large sbgn-toolbar-element">&nbsp</div>
-                            <div class="inside-menu">
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="perform-layout-icon"  src="app/img/toolbar/layout-cose.svg" title="Perform Layout: Perform a force-directed layout of current map, maintaining compound structures" >
-
-                                </div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="perform-static-layout-icon"  src="app/img/toolbar/layout-static.svg" title="Perform Static Layout: Re-calculate layout of current map from scratch, ignoring current positions and maintaining compound structures" >
-
-                                </div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="layout-properties-icon"  src="app/img/toolbar/layout-properties.svg" title="Layout Properties: Modify parameters used during layout" >
-
-                                </div>
-                            </div>
-
-                            <div class="menu-break-large sbgn-toolbar-element">&nbsp</div>
-                            <div class="inside-menu">
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="query-pathsbetween-icon"  src="app/img/toolbar/PC-logo.svg" title="Perform PC Query: Perform a PathwayCommons query to get a map of interest between specified genes" >
-
-                                </div>
-                            </div>
-
-                                <div class="menu-break-large sbgn-toolbar-element">&nbsp</div>
-                            <div class="inside-menu">
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="quick-help-icon"  src="app/img/toolbar/quick-help.svg" title="Quick Help" >
-
-                                </div>
-                                <div style="padding: 1px;" class="sbgn-toolbar-element">
-                                <img id="about-icon"  src="app/img/toolbar/about.svg" title="About" >
-
-                                </div>
-                            </div>
-
-                    </div>
-               </div>
-
-
-
-        <table id="sbgn-inspector-and-canvas">
-        <tbody>
-            <tr>
-                <td>
-
-
-                            <div id="network-panels-container" class="tab-content read-mode-off">
-                            </div>
-
-
-                </td>
-                <td>
-                    <div id="sbgn-inspector">
-                        <ul class="nav nav-tabs">
-
-                            <li id='inspector-style-tab' class="chise-tab validation-mode-tab"><a data-toggle="tab" href="#sbgn-inspector-style"><img width="18px" height="18px" src="app/img/tabs/properties.svg"/>&nbsp;Object</a></li>
-                            <li id='inspector-map-tab' class="chise-tab validation-mode-tab"><a data-toggle="tab" href="#sbgn-inspector-map"><img width="18px" height="18px" src="app/img/toolbar/settings.svg"/>&nbsp;Map</a></li>
-                            <li id='inspector-palette-tab' class="chise-tab active validation-mode-tab"><a data-toggle="tab" href="#sbgn-inspector-palette"><img width="18px" height="18px" src="app/img/tabs/palette.svg"/>&nbsp;Palette</a></li>
-                            <li id='inspector-console-tab' class="chise-tab validation-mode-tab" style="display:none;"> <a data-toggle="tab" href="#sbgn-inspector-console"><img width="18px" height="18px" src="app/img/tabs/console.svg" />&nbsp;Console</a></li>
+  <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=UA-109049087-1"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "UA-109049087-1");
+    </script>
+
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+    <title>Newt Editor</title>
+    <link rel="icon" href="app/img/newt-icon.png" type="image/png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link
+      href="node_modules/bootstrap/dist/css/bootstrap.css"
+      rel="stylesheet"
+    />
+    <link
+      href="node_modules/intro.js/introjs.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <!--cytoscape.js plugins -->
+    <link
+      href="node_modules/cytoscape-panzoom/cytoscape.js-panzoom.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="node_modules/cytoscape-panzoom/font-awesome-4.0.3/css/font-awesome.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <!-- <link href="node_modules/qtip2/dist/jquery.qtip.css" rel="stylesheet" type="text/css" /> -->
+    <link
+      href="node_modules/cytoscape-context-menus/cytoscape-context-menus.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <!-- app's style -->
+    <link href="app/css/chise.css" rel="stylesheet" />
+
+    <script src="app/bundle.js"></script>
+    <!-- libraries -->
+    <!-- <script src="node_modules/qtip2/dist/jquery.qtip.js"></script> -->
+  </head>
+
+  <body>
+    <div class="read-mode-off">
+      <div class="nav-menu sbgn-nav-menu">
+        <nav class="navbar navbar-default sbgn-nav-bar" role="navigation">
+          <div>
+            <ul class="nav navbar-nav navbar-left">
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  File
+                  <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu">
+                  <input id="file-input" type="file" style="display: none" />
+                  <li><a href="#" type="file" id="new-file">New</a></li>
+                  <li><a href="#" type="file" id="load-file">Open...</a></li>
+                  <li class="dropdown-submenu">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                      Samples
+                      <!--<b class="right-caret"></b>-->
+                    </a>
+                    <ul class="dropdown-menu">
+                      <li>
+                        <a class="title"><i>PD</i></a>
+                      </li>
+                      <li class="divider" style="margin-top: 0"></li>
+                      <li>
+                        <a href="#" id="load-sample1"
+                          >Neuronal muscle signaling</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample2"
+                          >CaM-CaMK dependent signaling to nucleus</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample3"
+                          >ATM mediated phosphorylation of repair proteins</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample4"
+                          >Activated STAT1alpha induction of the IRF1 gene</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample5"
+                          >Vitamins B6 activation to pyridoxal phosphate</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample6"
+                          >Insulin-like growth factor (IGF) signaling</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample7"
+                          >PolyQ proteins interference</a
+                        >
+                      </li>
+                      <li><a href="#" id="load-sample8">Glycolysis</a></li>
+                      <li><a href="#" id="load-sample9">MAPK cascade</a></li>
+                      <li>
+                        <a href="#" id="load-sample10">Drosophila cell cycle</a>
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample11"
+                          >Mammalian cholesterol biosynthesis</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample12"
+                          >Two gene system behavior</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample19"
+                          >PD Learner's Reference Card</a
+                        >
+                      </li>
+                      <li class="divider" style="margin-bottom: 0"></li>
+                      <li>
+                        <a class="title"><i>AF</i></a>
+                      </li>
+                      <li class="divider" style="margin-top: 0"></li>
+                      <li>
+                        <a href="#" id="load-sample13"
+                          >Transforming growth factor beta (TGFB) signaling</a
+                        >
+                      </li>
+                      <li><a href="#" id="load-sample14">Repressilator</a></li>
+                      <li>
+                        <a href="#" id="load-sample15"
+                          >Epidermal growth factor receptor</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample16"
+                          >Regulation of TGF-beta induced metastasis</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample20"
+                          >AF Learner's Reference Card</a
+                        >
+                      </li>
+                      <li class="divider" style="margin-bottom: 0"></li>
+                      <li>
+                        <a class="title"><i>SIF</i></a>
+                      </li>
+                      <li class="divider" style="margin-top: 0"></li>
+                      <li>
+                        <a href="#" id="load-sample17"
+                          >RTN4 controllers and binding proteins</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample18"
+                          >Signaling downstream of AKT2/3</a
+                        >
+                      </li>
+                      <li class="divider" style="margin-bottom: 0"></li>
+                      <li>
+                        <a class="title"><i>SBML</i></a>
+                      </li>
+                      <li class="divider" style="margin-top: 0"></li>
+                      <li>
+                        <a href="#" id="load-sample21"
+                          >Interaction topologies of MAPK cascade
+                          (M1_K2_PSEQ)</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample22"
+                          >Pharmacokinetics of PFOA and PFOS in the monkey
+                        </a>
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample23"
+                          >Apoptotic Reaction Model
+                        </a>
+                      </li>
+                      <li>
+                        <a href="#" id="load-sample24">
+                          Insulin induced signalling (PFKL phosphorylation)</a
+                        >
+                      </li>
+                    </ul>
+                  </li>
+                  <li><a href="#" id="save-as-nwt">Save...</a></li>
+                  <li><a href="#" type="file" id="close-file">Close</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-submenu">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                      Import
+                      <!--<b class="right-caret"></b>-->
+                    </a>
+                    <ul class="dropdown-menu">
+                      <input
+                        id="simple-af-file-input"
+                        type="file"
+                        style="display: none"
+                      />
+                      <input
+                        id="sif-file-input"
+                        type="file"
+                        style="display: none"
+                      />
+                      <input
+                        id="sif-style-input"
+                        type="file"
+                        style="display: none"
+                      />
+                      <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">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                      Export
+                      <!--<b class="right-caret"></b>-->
+                    </a>
+                    <ul class="dropdown-menu">
+                      <li>
+                        <a href="#" id="export-as-sbgnml-plain-file"
+                          >SBGN-ML Plain</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="export-as-sbgnml3-plain-file"
+                          >SBGN-ML Plain 0.3</a
+                        >
+                      </li>
+                      <li><a href="#" id="export-as-nwt3-file">NWT 0.3</a></li>
+                      <li><a href="#" id="export-to-plain-sif">SIF</a></li>
+                      <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">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                      Export as Image
+                      <!--<b class="right-caret"></b>-->
+                    </a>
+                    <ul class="dropdown-menu">
+                      <li><a href="#" id="save-as-png">PNG</a></li>
+                      <li><a href="#" id="save-as-jpg">JPG</a></li>
+                      <li><a href="#" id="save-as-svg">SVG</a></li>
+                    </ul>
+                  </li>
+                  <li class="divider"></li>
+                  <input
+                    id="user-preferences-file-input"
+                    type="file"
+                    style="display: none"
+                  />
+                  <li>
+                    <a href="#" id="load-user-preferences"
+                      >Open Preferences...</a
+                    >
+                  </li>
+                  <li>
+                    <a href="#" id="save-user-preferences"
+                      >Save Preferences...</a
+                    >
+                  </li>
+                </ul>
+              </li>
+
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  Edit
+                  <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu">
+                  <li>
+                    <a href="#" id="add-complex-for-selected"
+                      >Add Complex for Selected</a
+                    >
+                  </li>
+                  <li>
+                    <a href="#" id="add-compartment-for-selected"
+                      >Add Compartment for Selected</a
+                    >
+                  </li>
+                  <li>
+                    <a href="#" id="add-submap-for-selected"
+                      >Add Submap for Selected</a
+                    >
+                  </li>
+                  <li>
+                    <a href="#" id="open-sbgn-bricks-modal"
+                      >Add Using SBGN Bricks...</a
+                    >
+                  </li>
+                  <li><a href="#" id="clone-selected">Clone Selected</a></li>
+
+                  <li class="divider"></li>
+                  <li>
+                    <a href="#" id="delete-selected-simple"
+                      >Delete Selected Simple</a
+                    >
+                  </li>
+                  <li>
+                    <a href="#" id="delete-selected-smart"
+                      >Delete Selected Smart</a
+                    >
+                  </li>
+
+                  <li class="divider"></li>
+                  <li>
+                    <a href="#" id="resize-nodes-to-content"
+                      >Resize Nodes To Content</a
+                    >
+                  </li>
+                  <li>
+                    <a href="#" id="highlight-errors-of-validation">
+                      Validate Map...</a
+                    >
+                  </li>
+                  <li>
+                    <a href="#" id="highlight-errors-of-pd2af">
+                      Convert PD map to AF map</a
+                    >
+                  </li>
+
+                  <li class="divider"></li>
+                  <li class="disabled">
+                    <a href="#" id="undo-last-action">Undo</a>
+                  </li>
+                  <li class="disabled">
+                    <a href="#" id="redo-last-action">Redo</a>
+                  </li>
+                </ul>
+              </li>
+
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  View
+                  <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu">
+                  <li class="dropdown-submenu">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                      Select
+                    </a>
+                    <ul class="dropdown-menu">
+                      <li>
+                        <a href="#" id="select-all">All Nodes and Edges</a>
+                      </li>
+                      <li><a href="#" id="select-all-nodes">All Nodes</a></li>
+                      <li><a href="#" id="select-all-edges">All Edges</a></li>
+                    </ul>
+                  </li>
+
+                  <li class="dropdown-submenu">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                      Zoom
+                    </a>
+                    <ul class="dropdown-menu">
+                      <li>
+                        <a href="#" id="zoom-to-selected">Zoom to Selected</a>
+                      </li>
+                    </ul>
+                  </li>
+
+                  <li class="dropdown-submenu">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                      Hide/Show
+                      <!--<b class="right-caret"></b>-->
+                    </a>
+                    <ul class="dropdown-menu">
+                      <li>
+                        <a href="#" id="hide-selected-simple"
+                          >Hide Selected Simple</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="hide-selected-smart"
+                          >Hide Selected Smart</a
+                        >
+                      </li>
+                      <li><a href="#" id="show-selected">Show Selected</a></li>
+                      <li>
+                        <a href="#" id="show-hidden-neighbors-of-selected"
+                          >Show Hidden Neighbors of Selected</a
+                        >
+                      </li>
+                      <li><a href="#" id="show-all">Show All</a></li>
+                    </ul>
+                  </li>
+
+                  <li class="dropdown-submenu">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                      Collapse/Expand
+                      <!--<b class="right-caret"></b>-->
+                    </a>
+                    <ul class="dropdown-menu">
+                      <li>
+                        <a href="#" id="collapse-selected">Collapse Selected</a>
+                      </li>
+                      <li>
+                        <a href="#" id="expand-selected">Expand Selected</a>
+                      </li>
+                      <li>
+                        <a href="#" id="collapse-complexes"
+                          >Collapse Complexes</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" id="expand-complexes">Expand Complexes</a>
+                      </li>
+                      <li><a href="#" id="collapse-all">Collapse All</a></li>
+                      <li><a href="#" id="expand-all">Expand All</a></li>
+                    </ul>
+                  </li>
+
+                  <li class="dropdown-submenu">
+                    <a
+                      href="#"
+                      id="add-node-menu-option"
+                      class="dropdown-toggle"
+                      data-toggle="dropdown"
+                    >
+                      Align
+                      <!--<b class="right-caret"></b>-->
+                    </a>
+                    <ul class="dropdown-menu" id="add-node-submenu">
+                      <li class="dropdown-submenu">
+                        <a
+                          href="#"
+                          class="dropdown-toggle"
+                          data-toggle="dropdown"
+                        >
+                          Horizontal
+                          <!--<b class="right-caret"></b>-->
+                        </a>
+                        <ul class="dropdown-menu">
+                          <li><a href="#" id="align-horizontal-top">Top</a></li>
+                          <li>
+                            <a href="#" id="align-horizontal-middle">Middle</a>
+                          </li>
+                          <li>
+                            <a href="#" id="align-horizontal-bottom">Bottom</a>
+                          </li>
                         </ul>
-                        <div class="tab-content">
-                        <div id="sbgn-inspector-style" class="tab-pane fade">
-                            <div id="sbgn-inspector-style-panel-group" class="panel-group">
-                            </div>
-                        </div>
-                        <div id="sbgn-inspector-map" class="tab-pane fade">
-                            <div class="panel-group">
-                                <div class="panel">
-                                    <div class="panel-heading" data-toggle="collapse" data-target="#sbgn-inspector-map-properties-general">
-                                        <p class="panel-title accordion-toggle">General</p>
-                                    </div>
-                                    <div id="sbgn-inspector-map-properties-general" class="panel-collapse collapse in">
-                                        <div id="map-tab-general-container" >
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="panel">
-                                    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#sbgn-inspector-map-properties-label">
-                                        <p class="panel-title accordion-toggle">Labels</p>
-                                    </div>
-                                    <div id="sbgn-inspector-map-properties-label" class="panel-collapse collapse">
-                                        <div id="map-tab-label-container" >
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="panel">
-                                    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#sbgn-inspector-map-properties-rearrangement">
-                                        <p class="panel-title accordion-toggle">Arrangement</p>
-                                    </div>
-                                    <div id="sbgn-inspector-map-properties-rearrangement" class="panel-collapse collapse">
-                                        <div id="map-tab-rearrangement-container" >
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="panel">
-                                    <div id ="sbgn-inspector-map-properties-experiment-heading"class="panel-heading collapsed" data-toggle="collapse" data-target="#sbgn-inspector-map-properties-experiment">
-                                        <p class="panel-title accordion-toggle">Experiment</p>
-                                    </div>
-                                    <div id="sbgn-inspector-map-properties-experiment" class="panel-collapse collapse">
-                                        <div id="map-tab-experiment-container" >
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="panel">
-                                    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#sbgn-inspector-map-color-scheme">
-                                        <p class="panel-title accordion-toggle">Color Scheme</p>
-                                    </div>
-                                    <div id="sbgn-inspector-map-color-scheme" class="panel-collapse collapse">
-                                        <div id="color-scheme-template-container" >
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div id="sbgn-inspector-palette" class="tab-pane fade in active">
-                          <div class="panel-group">
-                            <div class="panel">
-                                <div id="PD-palette-heading" class="panel-heading" data-toggle="collapse" data-target="#expand-collapse-pd-nodes-palette">
-                                    <p class="panel-title accordion-toggle">
-                                        Process Description
-                                    </p>
-                                </div>
-                                <div id="expand-collapse-pd-nodes-palette" class="panel-collapse collapse in">
-                                    <div class="panel-body">
-                                      <div id="pd-node-palette" class="element-palette node-palette">
-                                        <div class="paletteWrapper">
-                                            <div class="paletteCol"><img src="app/img/nodes/macromolecule.svg" language="PD" value="macromolecule" title="Macromolecule"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/complex.svg" language="PD" value="complex" title="Complex"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/simple-chemical.svg" language="PD" value="simple-chemical" title="Simple Chemical"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/unspecified-entity.svg" language="PD" value="unspecified-entity" title="Unspecified Entity"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/nucleic-acid-feature.svg" language="PD" value="nucleic-acid-feature" title="Nucleic Acid Feature"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/perturbing-agent.svg" language="PD" value="perturbing-agent" title="Perturbing Agent"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/empty-set.svg" language="PD" value="empty-set" title="Empty Set"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/phenotype.svg" language="PD" value="phenotype" title="Phenotype"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/process.svg" language="PD" value="process" title="Process"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/omitted-process.svg" language="PD" value="omitted-process" title="Omitted Process"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/uncertain-process.svg" language="PD" value="uncertain-process" title="Uncertain Process"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/association.svg" language="PD" value="association" title="Association"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/dissociation.svg" language="PD" value="dissociation" title="Dissociation"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/tag.svg" language="PD" value="tag" title="Tag"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/compartment.svg" language="PD" value="compartment" title="Compartment"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/submap.svg" language="PD" value="submap" title="Submap"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/and.svg" language="PD" value="and" title="AND"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/or.svg" language="PD" value="or" title="OR"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/not.svg" language="PD" value="not" title="NOT"/></div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                    <div class="panel-body" style="padding-bottom: 0px;">
-                                      <div id="pd-edge-palette" class="element-palette edge-palette">
-                                        <div class="paletteWrapper">
-                                          <div class="paletteCol"><img src="app/img/edges/consumption.svg" language="PD" value="consumption" title="Consumption"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/production.svg" language="PD" value="production" title="Production"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/modulation.svg" language="PD" value="modulation" title="Modulation"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/stimulation.svg" language="PD" value="stimulation" title="Stimulation"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/catalysis.svg" language="PD" value="catalysis" title="Catalysis"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/inhibition.svg" language="PD" value="inhibition" title="Inhibition"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/necessary-stimulation.svg" language="PD" value="necessary stimulation" title="Necessary Stimulation"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/consumption.svg" language="PD" value="logic arc" title="Logic Arc"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/consumption.svg" language="PD" value="equivalence arc" title="Equivalence Arc"/></div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <!-- AF Nodes Panel -->
-                            <div class="panel">
-                                <div id="AF-palette-heading" class="panel-heading collapsed" data-toggle="collapse" data-target="#expand-collapse-af-nodes-palette">
-                                    <p class="panel-title accordion-toggle">
-                                        Activity Flow
-                                    </p>
-                                </div>
-                                <div id="expand-collapse-af-nodes-palette" class="panel-collapse collapse">
-                                    <div class="panel-body">
-                                      <div id="af-node-palette" class="element-palette node-palette">
-                                        <div class="paletteWrapper">
-                                            <div class="paletteCol"><img src="app/img/nodes/BA-plain.svg" language="AF" value="BA-plain" title="Biological Activity"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/BA-macromolecule.svg" language="AF" value="BA-macromolecule" title="Macromolecule"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/BA-complex.svg" language="AF" value="BA-complex" title="Complex"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/BA-simple-chemical.svg" language="AF" value="BA-simple-chemical" title="Simple Chemical"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/BA-unspecified-entity.svg" language="AF" value="BA-unspecified-entity" title="Unspecified Entity"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/BA-nucleic-acid-feature.svg" language="AF" value="BA-nucleic-acid-feature" title="Nucleic Acid Feature"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/BA-perturbing-agent.svg" language="AF" value="BA-perturbing-agent" title="Perturbing Agent"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/phenotype.svg" language="AF" value="phenotype" title="Phenotype"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/compartment.svg" language="AF" value="compartment" title="Compartment"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/submap.svg" language="AF" value="submap" title="Submap"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/tag.svg" language="AF" value="tag" title="Tag"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/and.svg" language="AF" value="and" title="AND"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/or.svg" language="AF" value="or" title="OR"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/not.svg" language="AF" value="not" title="NOT"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/delay.svg" language="AF" value="delay" title="Delay"/></div>
-                                        </div>
-                                      </div>
-                                    </div>
-                            <!-- AF Edges Panel -->
-                                    <div class="panel-body" style="padding-bottom: 0px;">
-                                      <div id="af-edge-palette" class="element-palette edge-palette">
-                                        <div class="paletteWrapper">
-                                            <div class="paletteCol"><img src="app/img/edges/stimulation.svg" language="AF" value="positive influence" title="Positive Influence"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/inhibition.svg" language="AF" value="negative influence" title="Negative Influence"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/modulation.svg" language="AF" value="unknown influence" title="Unknown Influence"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/necessary-stimulation.svg" language="AF" value="necessary stimulation" title="Necessary Stimulation"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/consumption.svg" language="AF" value="logic arc" title="Logic Arc"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/consumption.svg" language="AF" value="equivalence arc" title="Equivalence Arc"/></div>
-                                        </div>
-                                      </div>
-                                   </div>
-                                </div>
-                            </div>
-                            <!-- AF Edges End -->
-
-                            <!-- SIF Start -->
-                            <div class="panel">
-                                <div id="SIF-palette-heading" class="panel-heading collapsed" data-toggle="collapse" data-target="#expand-collapse-sif-nodes-palette">
-                                    <p class="panel-title accordion-toggle">
-                                        SIF
-                                    </p>
-                                </div>
-                                <div id="expand-collapse-sif-nodes-palette" class="panel-collapse collapse">
-                                    <div class="panel-body">
-                                      <div id="sif-node-palette" class="element-palette node-palette">
-                                        <div class="paletteWrapper">
-                                            <div class="paletteCol"><img src="app/img/nodes/macromolecule.svg" language="SIF" value="SIF-macromolecule" title="Macromolecule"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/simple-chemical.svg" language="SIF" value="SIF-simple-chemical" title="Simple Chemical"/></div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                    <div class="panel-body" style="padding-bottom: 0px;">
-                                      <div id="sif-edge-palette" class="element-palette edge-palette">
-                                        <div class="paletteWrapper">
-                                          <div class="paletteCol"><img src="app/img/edges/controls-state-change-of.svg" language="SIF" value="controls-state-change-of" title="Controls State Change of"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/controls-transport-of.svg" language="SIF" value="controls-transport-of" title="Controls Transport of"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/controls-phosphorylation-of.svg" language="SIF" value="controls-phosphorylation-of" title="Controls Phosphorylation of"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/controls-expression-of.svg" language="SIF" value="controls-expression-of" title="Controls Expression of"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/catalysis-precedes.svg" language="SIF" value="catalysis-precedes" title="Catalysis Precedes"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/in-complex-with.svg" language="SIF" value="in-complex-with" title="In Complex With"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/interacts-with.svg" language="SIF" value="interacts-with" title="Interacts With"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/neighbor-of.svg" language="SIF" value="neighbor-of" title="Neighbor of"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/consumption-controled-by.svg" language="SIF" value="consumption-controled-by" title="Consumption Controled By"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/controls-production-of.svg" language="SIF" value="controls-production-of" title="Controls Production of"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/controls-transport-of-chemical.svg" language="SIF" value="controls-transport-of-chemical" title="Controls Transport of Chemical"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/chemical-affects.svg" language="SIF" value="chemical-affects" title="Chemical Affects"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/reacts-with.svg" language="SIF" value="reacts-with" title="Reacts With"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/used-to-produce.svg" language="SIF" value="used-to-produce" title="Used to Produce"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/activates.svg" language="SIF" value="activates" title="Activates"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/inhibits.svg" language="SIF" value="inhibits" title="Inhibits"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/phosphorylates.svg" language="SIF" value="phosphorylates" title="Phosphorylates"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/dephosphorylates.svg" language="SIF" value="dephosphorylates" title="Dephosphorylates"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/upregulates-expression.svg" language="SIF" value="upregulates-expression" title="Upregulates Expression"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/downregulates-expression.svg" language="SIF" value="downregulates-expression" title="Downregulates Expression"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/acetylates.svg" language="SIF" value="acetylates" title="Acetylates"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/deacetylates.svg" language="SIF" value="deacetylates" title="Deacetylates"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/methylates.svg" language="SIF" value="methylates" title="Methylates"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/demethylates.svg" language="SIF" value="demethylates" title="Demethylates"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/activates-gtpase.svg" language="SIF" value="activates-gtpase" title="Activates Gtpase"/></div>
-                                          <div class="paletteCol"><img src="app/img/edges/inhibits-gtpase.svg" language="SIF" value="inhibits-gtpase" title="Inhibits Gtpase"/></div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <!-- SIF End -->
-
-                            <!-- SBML Starts -->
-                            <div class="panel">
-                                <div id="SBML-palette-heading" class="panel-heading collapsed" data-toggle="collapse" data-target="#expand-collapse-sbml-nodes-palette">
-                                    <p class="panel-title accordion-toggle">
-                                        SBML
-                                    </p>
-                                </div>
-                                <div id="expand-collapse-sbml-nodes-palette" class="panel-collapse collapse">
-                                    <div class="panel-body">
-                                      <div id="sbml-node-palette" class="element-palette node-palette">
-                                        <div class="paletteWrapper">
-                                            <div class="paletteCol"><img src="app/img/nodes/gene.svg" language="SBML" value="gene" title="Gene"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/RNA.svg" language="SBML" value="rna" title="RNA"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/simple-molecule.svg" language="SBML" value="simple-molecule" title="Simple Molecule"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/unknown-molecule.svg" language="SBML" value="unknown-molecule" title="Unknown Molecule"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/phenotype-sbml.svg" language="SBML" value="phenotype-sbml" title="Phenotype"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/drug.svg" language="SBML" value="drug" title="Drug"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/protein.svg" language="SBML" value="protein" title="Protein"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/truncated-protein.svg" language="SBML" value="truncated-protein" title="Truncated Protein"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/ion-channel.svg" language="SBML" value="ion-channel" title="Ion Channel"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/receptor.svg" language="SBML" value="receptor" title="Receptor"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/ion.svg" language="SBML" value="ion" title="Ion"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/process.svg" language="SBML" value="process" title="Process"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/omitted-process.svg" language="SBML" value="omitted-process" title="Omitted Process"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/uncertain-process.svg" language="SBML" value="uncertain-process" title="Uncertain Process"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/truncated-process.svg" language="SBML" value="truncated-process" title="Truncated Process"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/dissociation.svg" language="SBML" value="dissociation" title="Dissociation"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/degradation.svg" language="SBML" value="degradation" title="Degradation"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/and.svg" language="SBML" value="and" title="AND"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/or.svg" language="SBML" value="or" title="OR"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/not.svg" language="SBML" value="not" title="NOT"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/association.svg" language="SBML" value="association" title="Association"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/unknown-logical-operator.svg" language="SBML" value="unknown-logical-operator" title="Unknown Logical Operator"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/complex-sbml.svg" language="SBML" value="complex-sbml" title="Complex"/></div>
-                                            <div class="paletteCol"><img src="app/img/nodes/compartment.svg" language="SBML" value="compartment" title="Compartment"/></div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                    <div class="panel-body" style="padding-bottom: 0px;">
-                                      <div id="sbml-edge-palette" class="element-palette edge-palette">
-                                        <div class="paletteWrapper">
-                                            <div class="paletteCol"><img src="app/img/edges/consumption.svg" language="SBML" value="consumption" title="Consumption"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/inhibition.svg" language="SBML" value="inhibition" title="Inhibition"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/production.svg" language="SBML" value="production" title="Production"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/modulation.svg" language="SBML" value="modulation" title="Modulation"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/stimulation.svg" language="SBML" value="stimulation" title="Stimulation"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/catalysis.svg" language="SBML" value="catalysis" title="Catalysis"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/trigger.svg" language="SBML" value="trigger" title="Trigger"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/transport.svg" language="SBML" value="transport" title="Transport"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/unknown-inhibition.svg" language="SBML" value="unknown inhibition" title="Unknown inhibition"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/unknown-catalysis.svg" language="SBML" value="unknown catalysis" title="Unknown catalysis"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/transcription_consumption.svg" language="SBML" value="transcription-consumption" title="Transcription Consumption"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/transcription_production.svg" language="SBML" value="transcription-production" title="Transcription Production"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/translation-consumption.svg" language="SBML" value="translation-consumption" title="Translation Consumption"/></div>
-                                            <div class="paletteCol"><img src="app/img/edges/translation-production.svg" language="SBML" value="translation-production" title="Translation Production"/></div>
-
-                                            
-
-
-                                          </div>
-                                      </div>
-                                    </div>
-                                    <div class="panel-body" style="padding-bottom: 0px;">
-                                        <div id="sbml-edge-palette" class="element-palette edge-palette">
-                                          <div class="paletteWrapper">
-                                              <div class="paletteCol"><img src="app/img/edges/positive-influence-sbml.svg" language="SBML" value="positive-influence-sbml" title="Positive Influence"/></div>
-                                              <div class="paletteCol"><img src="app/img/edges/negative-influence.svg" language="SBML" value="negative-influence" title="Negative Influence"/></div>
-                                              <div class="paletteCol"><img src="app/img/edges/reduced-modulation.svg" language="SBML" value="reduced-modulation" title="Reduced Modulation"/></div>
-                                              <div class="paletteCol"><img src="app/img/edges/reduced-stimulation.svg" language="SBML" value="reduced-stimulation" title="Reduced Stimulation"/></div>
-                                              <div class="paletteCol"><img src="app/img/edges/reduced-trigger.svg" language="SBML" value="reduced-trigger" title="Reduced Trigger"/></div>
-                                              <div class="paletteCol"><img src="app/img/edges/unknown-negative-influence.svg" language="SBML" value="unknown-negative-influence" title="Unknown Negative Influence"/></div>
-                                              <div class="paletteCol"><img src="app/img/edges/unknown-positive-influence.svg" language="SBML" value="unknown-positive-influence" title="Unknown Positive Influence"/></div>
-                                              <div class="paletteCol"><img src="app/img/edges/unknown-reduced-stimulation.svg" language="SBML" value="unknown-reduced-stimulation" title="Unknown Reduced Stimulation"/></div>
-                                              <div class="paletteCol"><img src="app/img/edges/unknown-reduced-modulation.svg" language="SBML" value="unknown-reduced-modulation" title="Unknown Reduced Modulation"/></div>
-                                              <div class="paletteCol"><img src="app/img/edges/unknown-reduced-trigger.svg" language="SBML" value="unknown-reduced-trigger" title="Unknown Reduced Trigger"/></div>
-
-                                            </div>
-                                        </div>
-                                      </div>
-                                </div>
-                            </div>
-                             <!-- SBML End -->
-                          </div>
-                        </div>
-						   <div id="sbgn-inspector-console" class="tab-pane fade">
-                            <div class="panel-group">
-                                <div class="panel">
-                                    <div class="panel-heading" data-toggle="collapse" data-target="#sbgn-inspector-console-panel-group">
-                                        <p class="panel-title accordion-toggle">Validation Results</p>
-                                    </div>
-                                    <div id="sbgn-inspector-console-panel-group" class="panel-collapse collapse in">
-                                        <div id="sbgn-inspector-tab-validation-container" >
-                                        </div>
-                                    </div>
-                                </div>
-							</div>
-						</div>
-                      </div>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-        </table>
-
-
-        <div id="network-tabs-list-container" class="read-mode-off">
-          <ul id="network-tabs-list" class="nav nav-tabs">
-          </ul>
-        </div>
-
-
-        <div id="layout-properties-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- sbgn layout table will be shown here -->
-        </div>
-
-        <div id="biogene-container" style="display: none">
-        </div>
-
-        <div id="chemical-container" style="display: none">
-        </div>
-
-        <div id="query-neighborhood-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- neighborhood query table will be shown here-->
-        </div>
-
-        <div id="query-pathsbetween-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- paths between query table will be shown here-->
-        </div>
-
-        <div id="query-pathsfromto-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- paths from to query table will be shown here-->
-        </div>
-
-        <div id="query-commonstream-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- common stream query table will be shown here-->
-        </div>
-
-        <div id="query-pathsbyURI-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- paths by URI query table will be shown here-->
-        </div>
-
-        <div id="prompt-save-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- sbgn properties table will be shown here-->
-        </div>
-
-        <div id="file-save-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- save dialog will be shown here-->
-        </div>
-
-        <div id="user-preferences-save-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- save dialog will be shown here-->
-        </div>
-        <div id="user-preferences-load-table" tabindex="-1" class="modal fade" role="dialog">
-                <!-- load dialog will be shown here-->
-        </div>
-
-        <div id="prompt-confirmation-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- confirmation dialog will be shown here-->
-        </div>
-
-        <div id="prompt-mapType-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- map type change confirmation dialog will be shown here-->
-        </div>
-
-        <div id="prompt-invalidQuery-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- map type change confirmation dialog will be shown here-->
-        </div>
-
-        <div id="prompt-emptyQueryResult-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- map type change confirmation dialog will be shown here-->
-        </div>
-
-        <div id="prompt-invalidLengthLimit-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- map type change confirmation dialog will be shown here-->
-        </div>
+                      </li>
+                      <li class="dropdown-submenu">
+                        <a
+                          href="#"
+                          class="dropdown-toggle"
+                          data-toggle="dropdown"
+                        >
+                          Vertical
+                          <!--<b class="right-caret"></b>-->
+                        </a>
+                        <ul class="dropdown-menu">
+                          <li><a href="#" id="align-vertical-left">Left</a></li>
+                          <li>
+                            <a href="#" id="align-vertical-center">Center</a>
+                          </li>
+                          <li>
+                            <a href="#" id="align-vertical-right">Right</a>
+                          </li>
+                        </ul>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <a href="#" id="grid-properties" style="padding-right: 30px"
+                      >Grid and Guidelines...</a
+                    >
+                  </li>
+                  <li>
+                    <a href="#" id="general-properties">Map Properties...</a>
+                  </li>
+                </ul>
+              </li>
+
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  Highlight
+                  <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu">
+                  <li>
+                    <a href="#" id="highlight-search-menu-item">Search...</a>
+                  </li>
+                  <li><a href="#" id="highlight-selected">Selected</a></li>
+                  <li>
+                    <a href="#" id="highlight-neighbors-of-selected"
+                      >Neighbors of Selected</a
+                    >
+                  </li>
+                  <li>
+                    <a href="#" id="highlight-processes-of-selected"
+                      >Processes of Selected</a
+                    >
+                  </li>
+                  <li>
+                    <a href="#" id="remove-highlights">Remove Highlights</a>
+                  </li>
+                </ul>
+              </li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  Experiment
+                  <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu">
+                  <li><a href="#" id="import-experimental-data">Open...</a></li>
+                  <input id="overlay-data" type="file" style="display: none" />
+                  <li>
+                    <a href="#" id="sample-experiment-data">Open Sample</a>
+                  </li>
+                  <li class="divider"></li>
+                  <li>
+                    <a href="#" value="true" id="experiment-data-hide-all"
+                      >Hide/Show All</a
+                    >
+                  </li>
+                  <li>
+                    <a href="#" id="experiment-data-remove-all">Remove All</a>
+                  </li>
+                </ul>
+              </li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  Layout
+                  <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu">
+                  <li><a href="#" id="perform-layout">Perform Layout</a></li>
+                  <li>
+                    <a href="#" id="perform-static-layout"
+                      >Perform Static Layout</a
+                    >
+                  </li>
+                  <li>
+                    <a href="#" id="layout-properties">Layout Properties...</a>
+                  </li>
+                </ul>
+              </li>
+
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  Query
+                  <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu">
+                  <li class="dropdown-submenu">
+                    <a
+                      href="#"
+                      id="query-pathwaycommons"
+                      class="dropdown-toggle"
+                      data-toggle="dropdown"
+                    >
+                      Pathway Commons
+                      <!--<b class="right-caret"></b>-->
+                    </a>
+                    <ul class="dropdown-menu">
+                      <li>
+                        <a href="#" id="query-pathsbetween">Paths Between...</a>
+                      </li>
+                      <li>
+                        <a href="#" id="query-pathsfromto">Paths From To...</a>
+                      </li>
+                      <li>
+                        <a href="#" id="query-commonstream">Common Stream...</a>
+                      </li>
+                      <li>
+                        <a href="#" id="query-neighborhood">Neighborhood...</a>
+                      </li>
+                      <li><a href="#" id="query-pathsbyURI">By URI...</a></li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  Legend
+                  <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu">
+                  <li><a href="#" id="PD-legend">Process Description</a></li>
+                  <li><a href="#" id="AF-legend">Activity Flow</a></li>
+                  <li><a href="#" id="SIF-legend">SIF</a></li>
+                  <li><a href="#" id="SBML-legend">SBML</a></li>
+                </ul>
+              </li>
+
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  Help
+                  <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu">
+                  <li><a href="#" id="quick-help">Quick Help</a></li>
+                  <li><a href="#" id="quick-tutorial">Quick Tutorial</a></li>
+                  <li><a href="#" id="ui-guide">UI Guide</a></li>
+                  <li><a href="#" id="about">About</a></li>
+                </ul>
+              </li>
+            </ul>
+            <a href="http://newteditor.org" target="_blank"
+              ><img
+                class="newt-logo"
+                height="25"
+                width="auto"
+                src="app/img/newt-logo.png"
+            /></a>
+            <span class="input-file" id="displayed-file-name"></span>
+            <span class="input-file" id="file-name"></span>
+          </div>
+        </nav>
+      </div>
+
+      <div id="sbgn-toolbar" class="read-mode-off">
+        <div class="inside-menu">
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="new-file-icon"
+              src="app/img/toolbar/new.svg"
+              title="New: Create a blank map"
+            />
+          </div>
 
-        <div id="prompt-invalidURI-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- map type change confirmation dialog will be shown here-->
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="load-file-icon"
+              src="app/img/toolbar/load.svg"
+              title="Open: Open a map from a Newt file"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="save-icon"
+              src="app/img/toolbar/save.svg"
+              title="Save: Save current map to a Newt file"
+            />
+          </div>
         </div>
 
-        <div id="prompt-invalidFile-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- map type change confirmation dialog will be shown here-->
+        <div class="menu-break-large sbgn-toolbar-element">&nbsp</div>
+        <div class="inside-menu">
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="select-mode-icon"
+              src="app/img/toolbar/select.svg"
+              title="Select / Edit"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="add-node-mode-icon"
+              src="app/img/nodes/unspecified-entity.svg"
+              title="Create a new Unspecified Entity"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="add-edge-mode-icon"
+              src="app/img/edges/consumption.svg"
+              title="Create a new Consumption"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="marquee-zoom-mode-icon"
+              src="app/img/toolbar/marquee.svg"
+              title="Marquee Zoom: Zoom to area specified by Shift + left click and drag"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="lasso-mode-icon"
+              src="app/img/toolbar/lasso.svg"
+              title="Lasso Tool: Select nodes / edges in free form"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="sbgn-bricks-icon"
+              src="app/img/toolbar/sbgnbricks-logo.svg"
+              title="SBGN Bricks: Add using SBGN bricks"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="delete-selected-simple-icon"
+              src="app/img/toolbar/delete-simple.svg"
+              title="Delete Selected Simple: Delete selected nodes and edges"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="delete-selected-smart-icon"
+              src="app/img/toolbar/delete-smart.svg"
+              title="Delete Selected Smart: Delete selected nodes and any processes they are involved in"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="highlight-errors-of-validation-icon"
+              src="app/img/toolbar/check.svg"
+              title="Validate Map: Validate SBGN PD map and fix problems"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="undo-icon"
+              src="app/img/toolbar/undo.svg"
+              title="Undo: Undo the last operation"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="redo-icon"
+              src="app/img/toolbar/redo.svg"
+              title="Redo: Redo the last undone operation"
+            />
+          </div>
         </div>
 
-        <div id="prompt-fileConversionError-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- map type change confirmation dialog will be shown here-->
-        </div>
-        <div id="prompt-sbmlConversionError-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- map type change confirmation dialog will be shown here-->
-        </div>
+        <div class="menu-break-large sbgn-toolbar-element">&nbsp</div>
+        <div class="inside-menu">
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="hide-selected-simple-icon"
+              src="app/img/toolbar/hide-selected-simple.svg"
+              title="Hide Selected Simple: Hide selected nodes and edges"
+            />
+          </div>
 
-        <div id="prompt-invalidURL-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- map type change confirmation dialog will be shown here-->
-        </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="hide-selected-smart-icon"
+              src="app/img/toolbar/hide-selected-smart.svg"
+              title="Hide Selected Smart: Hide selected nodes and any processes they are involved in"
+            />
+          </div>
 
-        <div id="prompt-invalidImage-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- map type change confirmation dialog will be shown here-->
-        </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="show-selected-icon"
+              src="app/img/toolbar/show-all.svg"
+              title="Show Selected: Show selected nodes and any processes they are involved in, hiding the remaining nodes and their edges"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="collapse-selected-icon"
+              src="app/img/toolbar/collapse-selected.svg"
+              title="Collapse Selected: Collapse selected compound node to hide its members"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="expand-selected-icon"
+              src="app/img/toolbar/expand-selected.svg"
+              title="Expand Selected: Expand selected collapsed node to show its members"
+            />
+          </div>
 
-        <div id="prompt-invalidEdge-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- map type change confirmation dialog will be shown here-->
-        </div>
-        <div id="prompt-errorInvalidType-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- map type change confirmation dialog will be shown here-->
-        </div>
-        <div id="prompt-errorPD2AF-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- map type change confirmation dialog will be shown here-->
-        </div>
-        
-        <div id="sbgn-bricks-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- reaction templatequery table will be shown here -->
-        </div>
+          <div
+            class="btn-group sbgn-toolbar-element sbgn-dd-list"
+            role="group"
+            id="align-list"
+          >
+            <button
+              id="align-button"
+              style="padding: 3px"
+              title="Align to First Selected: Align positions of selected nodes based on the first (if any) selected node"
+              type="button"
+              class="btn"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              <div style="height: 16px">
+                <img
+                  style="height: 16px; width: auto"
+                  id="sbgn-align-img"
+                  src="app/img/align/align.svg"
+                />
+                <!--<span style="float: right;" class="caret"></span>-->
+              </div>
+            </button>
+            <button
+              id="align-dd-button"
+              style="padding: 3px; padding-top: 4px"
+              type="button"
+              class="btn dropdown-toggle"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              <div style="height: 16px">
+                <span class="caret"></span>
+                <span class="sr-only"></span>
+              </div>
+            </button>
+            <ul id="align-menu" class="dropdown-menu">
+              <li>
+                <a class="dd-list-href" href="#" id="align-horizontal-top-icon"
+                  >&nbsp<img
+                    src="app/img/align/align-horizontal-top.svg"
+                  />&nbsp&nbspAlign Horizontal Top</a
+                >
+              </li>
+              <li>
+                <a
+                  class="dd-list-href"
+                  href="#"
+                  id="align-horizontal-middle-icon"
+                  >&nbsp<img
+                    src="app/img/align/align-horizontal-middle.svg"
+                  />&nbsp&nbspAlign Horizontal Middle</a
+                >
+              </li>
+              <li>
+                <a
+                  class="dd-list-href"
+                  href="#"
+                  id="align-horizontal-bottom-icon"
+                  >&nbsp<img
+                    src="app/img/align/align-horizontal-bottom.svg"
+                  />&nbsp&nbspAlign Horizontal Bottom</a
+                >
+              </li>
+              <li>
+                <a class="dd-list-href" href="#" id="align-vertical-left-icon"
+                  >&nbsp<img
+                    src="app/img/align/align-vertical-left.svg"
+                  />&nbsp&nbspAlign Vertical Left</a
+                >
+              </li>
+              <li>
+                <a class="dd-list-href" href="#" id="align-vertical-center-icon"
+                  >&nbsp<img
+                    src="app/img/align/align-vertical-center.svg"
+                  />&nbsp&nbspAlign Vertical Center</a
+                >
+              </li>
+              <li>
+                <a class="dd-list-href" href="#" id="align-vertical-right-icon"
+                  >&nbsp<img
+                    src="app/img/align/align-vertical-right.svg"
+                  />&nbsp&nbspAlign Vertical Right</a
+                >
+              </li>
+            </ul>
+          </div>
 
-        <div id="grid-properties-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- grid properties table will be shown here -->
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="toggle-grid-snapping-icon"
+              src="app/img/toolbar/grid.svg"
+              title="Enable Grid: Show and snap to grid during drag"
+            />
+          </div>
+          <img
+            id="toggle-guidelines-snapping-icon"
+            class="sbgn-toolbar-element"
+            src="app/img/toolbar/guidelines.svg"
+            title="Enable Guidelines: Enable and snap to alignment guidelines during drag"
+          />
+          <img
+            id="properties-icon"
+            class="sbgn-toolbar-element"
+            src="app/img/toolbar/settings.svg"
+            title="Map Properties: Modify general properties of current SBGN map"
+          />
         </div>
 
-        <div id="font-properties-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- sbgn properties table will be shown here -->
+        <div class="menu-break-large sbgn-toolbar-element">&nbsp</div>
+        <div class="inside-menu">
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="search-by-label-icon"
+              src="app/img/toolbar/search.svg"
+              title="Search: Search (case insensitive) and highlight all nodes with specified label text"
+            />
+          </div>
+          <input
+            id="search-by-label-text-box"
+            class="sbgn-toolbar-element"
+            type="label"
+          />
+
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="highlight-selected-icon"
+              src="app/img/toolbar/highlight-selected.svg"
+              title="Highlight Selected: Highlight selected nodes and edges"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="remove-highlights-icon"
+              src="app/img/toolbar/remove-highlights.svg"
+              title="Remove Highlights: Remove any highlights"
+            />
+          </div>
         </div>
 
-	 <div id="prompt-invalidSchematronFile-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- sbgn schematron validation message dialog will be shown here -->
+        <div class="menu-break-large sbgn-toolbar-element">&nbsp</div>
+        <div class="inside-menu">
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="perform-layout-icon"
+              src="app/img/toolbar/layout-cose.svg"
+              title="Perform Layout: Perform a force-directed layout of current map, maintaining compound structures"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="perform-static-layout-icon"
+              src="app/img/toolbar/layout-static.svg"
+              title="Perform Static Layout: Re-calculate layout of current map from scratch, ignoring current positions and maintaining compound structures"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="layout-properties-icon"
+              src="app/img/toolbar/layout-properties.svg"
+              title="Layout Properties: Modify parameters used during layout"
+            />
+          </div>
         </div>
 
-        <div id="infobox-properties-table" tabindex="-1" class="modal fade" role="dialog">
-            <!-- infobox properties table will be shown here -->
+        <div class="menu-break-large sbgn-toolbar-element">&nbsp</div>
+        <div class="inside-menu">
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="query-pathsbetween-icon"
+              src="app/img/toolbar/PC-logo.svg"
+              title="Perform PC Query: Perform a PathwayCommons query to get a map of interest between specified genes"
+            />
+          </div>
         </div>
 
-        <div id="box">
+        <div class="menu-break-large sbgn-toolbar-element">&nbsp</div>
+        <div class="inside-menu">
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="quick-help-icon"
+              src="app/img/toolbar/quick-help.svg"
+              title="Quick Help"
+            />
+          </div>
+          <div style="padding: 1px" class="sbgn-toolbar-element">
+            <img
+              id="about-icon"
+              src="app/img/toolbar/about.svg"
+              title="About"
+            />
+          </div>
         </div>
-
-        <textarea id="node-label-textbox" rows="1"></textarea>
-
-        <!-- templates -->
-        <div id='PD_legend_modal' class="modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 540px;">
-                <div class="modal-content">
-                    <div class="modal-body">
-                        <div class="sbgn-frame" style="text-align:center;">
-                          <h2 class="sbgn-text">Process Description</h2>
-                          <img src="app/img/pd-legend.svg" alt="" class="centered img-responsive sbgn-legend">
-                          <p class="address-text" style="margin-top: 20px;margin-bottom: 10px;"><a href="https://sbgn.github.io/referencecards" target="_blank" rel="nofollow">Reference Card</a> - <a href="https://sbgn.github.io/specifications" target="_blank" rel="nofollow">Specifications</a></p>
-                        </div>
-                    </div>
+      </div>
+    </div>
+
+    <table id="sbgn-inspector-and-canvas">
+      <tbody>
+        <tr>
+          <td>
+            <div
+              id="network-panels-container"
+              class="tab-content read-mode-off"
+            ></div>
+          </td>
+          <td>
+            <div id="sbgn-inspector">
+              <ul class="nav nav-tabs">
+                <li
+                  id="inspector-style-tab"
+                  class="chise-tab validation-mode-tab"
+                >
+                  <a data-toggle="tab" href="#sbgn-inspector-style"
+                    ><img
+                      width="18px"
+                      height="18px"
+                      src="app/img/tabs/properties.svg"
+                    />&nbsp;Object</a
+                  >
+                </li>
+                <li
+                  id="inspector-map-tab"
+                  class="chise-tab validation-mode-tab"
+                >
+                  <a data-toggle="tab" href="#sbgn-inspector-map"
+                    ><img
+                      width="18px"
+                      height="18px"
+                      src="app/img/toolbar/settings.svg"
+                    />&nbsp;Map</a
+                  >
+                </li>
+                <li
+                  id="inspector-palette-tab"
+                  class="chise-tab active validation-mode-tab"
+                >
+                  <a data-toggle="tab" href="#sbgn-inspector-palette"
+                    ><img
+                      width="18px"
+                      height="18px"
+                      src="app/img/tabs/palette.svg"
+                    />&nbsp;Palette</a
+                  >
+                </li>
+                <li
+                  id="inspector-console-tab"
+                  class="chise-tab validation-mode-tab"
+                  style="display: none"
+                >
+                  <a data-toggle="tab" href="#sbgn-inspector-console"
+                    ><img
+                      width="18px"
+                      height="18px"
+                      src="app/img/tabs/console.svg"
+                    />&nbsp;Console</a
+                  >
+                </li>
+              </ul>
+              <div class="tab-content">
+                <div id="sbgn-inspector-style" class="tab-pane fade">
+                  <div
+                    id="sbgn-inspector-style-panel-group"
+                    class="panel-group"
+                  ></div>
                 </div>
-            </div>
-        </div>
-
-        <div id='AF_legend_modal' class="modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 600px;">
-                <div class="modal-content">
-                    <div class="modal-body">
-                        <div class="sbgn-frame" style="text-align: center;">
-                            <h2 class="sbgn-text">Activity Flow</h2>
-                            <img src="app/img/af-legend.svg" alt="" class="centered img-responsive sbgn-legend">
-                            <p class="address-text" style="margin-top: 20px; margin-bottom: 10px;"><a href="https://sbgn.github.io/referencecards" target="_blank" rel="nofollow">Reference Card</a> - <a href="https://sbgn.github.io/specifications" target="_blank" rel="nofollow">Specifications</a></p>
-                        </div>
+                <div id="sbgn-inspector-map" class="tab-pane fade">
+                  <div class="panel-group">
+                    <div class="panel">
+                      <div
+                        class="panel-heading"
+                        data-toggle="collapse"
+                        data-target="#sbgn-inspector-map-properties-general"
+                      >
+                        <p class="panel-title accordion-toggle">General</p>
+                      </div>
+                      <div
+                        id="sbgn-inspector-map-properties-general"
+                        class="panel-collapse collapse in"
+                      >
+                        <div id="map-tab-general-container"></div>
+                      </div>
                     </div>
-                </div>
-            </div>
-        </div>
-
-        <div id='SIF_legend_modal' class="modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 750px;">
-                <div class="modal-content">
-                    <div class="modal-body" style="text-align: center;">
-                        <div class="sbgn-frame">
-                            <h2 class="sbgn-text">Simple Interaction Format</h2>
-                            <img src="app/img/sif-legend.svg" alt="" class="centered img-responsive sbgn-legend">
-                            <p class="address-text" style="margin-top: 20px; margin-bottom: 10px"><a href="http://www.pathwaycommons.org/pc2/formats#sif_relations" target="_blank" rel="nofollow">SIF Relations</a></p>
-                        </div>
+                    <div class="panel">
+                      <div
+                        class="panel-heading collapsed"
+                        data-toggle="collapse"
+                        data-target="#sbgn-inspector-map-properties-label"
+                      >
+                        <p class="panel-title accordion-toggle">Labels</p>
+                      </div>
+                      <div
+                        id="sbgn-inspector-map-properties-label"
+                        class="panel-collapse collapse"
+                      >
+                        <div id="map-tab-label-container"></div>
+                      </div>
                     </div>
-                </div>
-            </div>
-        </div>
-
-        <div id='SBML_legend_modal' class="modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 600px;">
-                <div class="modal-content">
-                    <div class="modal-body" style="text-align: center;">
-                        <div class="sbgn-frame">
-                            <h2 class="sbgn-text">Systems Biology Markup Language</h2>
-                            <img src="app/img/sbml-legend.svg" alt="" class="centered img-responsive sbgn-legend">
-                            <p class="address-text" style="margin-top: 20px; margin-bottom: 10px"><a href="https://www.celldesigner.org/help/images/components42.png" target="_blank" rel="nofollow">SBML Table</a></p>
-                        </div>
+                    <div class="panel">
+                      <div
+                        class="panel-heading collapsed"
+                        data-toggle="collapse"
+                        data-target="#sbgn-inspector-map-properties-rearrangement"
+                      >
+                        <p class="panel-title accordion-toggle">Arrangement</p>
+                      </div>
+                      <div
+                        id="sbgn-inspector-map-properties-rearrangement"
+                        class="panel-collapse collapse"
+                      >
+                        <div id="map-tab-rearrangement-container"></div>
+                      </div>
                     </div>
+                    <div class="panel">
+                      <div
+                        id="sbgn-inspector-map-properties-experiment-heading"
+                        class="panel-heading collapsed"
+                        data-toggle="collapse"
+                        data-target="#sbgn-inspector-map-properties-experiment"
+                      >
+                        <p class="panel-title accordion-toggle">Experiment</p>
+                      </div>
+                      <div
+                        id="sbgn-inspector-map-properties-experiment"
+                        class="panel-collapse collapse"
+                      >
+                        <div id="map-tab-experiment-container"></div>
+                      </div>
+                    </div>
+                    <div class="panel">
+                      <div
+                        class="panel-heading collapsed"
+                        data-toggle="collapse"
+                        data-target="#sbgn-inspector-map-color-scheme"
+                      >
+                        <p class="panel-title accordion-toggle">Color Scheme</p>
+                      </div>
+                      <div
+                        id="sbgn-inspector-map-color-scheme"
+                        class="panel-collapse collapse"
+                      >
+                        <div id="color-scheme-template-container"></div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
-            </div>
-        </div>
-
-        <div id='about_modal' class="modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 360px;">
-                <div class="modal-content">
-                    <div class="modal-body">
-                        <div class="sbgn-frame">
-                            <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 4.0.0</p>
-                                    </td></tr>
-
-                                <tr><td>
-                                        <img src="app/img/newt-logo.png" alt="" class="centered img-responsive" style="margin-bottom: 10px;">
-                                    </td></tr>
-
-                                <tr><td>
-                                        <p class="address-text marg">i-Vis Information Visualization Research Lab, Ankara, Turkey,</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
-                                        </p>
-                                    </td></tr>
-                                <tr><td>
-                                        <p class="address-text marg">
-                                            <a href="mailto:ivisatbilkent@gmail.com" target="_top">ivisatbilkent@gmail.com</a>
-                                        </p>
-                                        <p class="address-text">
-                                            <a href="http://newteditor.org/" target="_blank">http://newteditor.org/</a>
-                                        </p>
-                                    </td></tr>
-                            </tbody>
-                            </table>
+                <div
+                  id="sbgn-inspector-palette"
+                  class="tab-pane fade in active"
+                >
+                  <div class="panel-group">
+                    <div class="panel">
+                      <div
+                        id="PD-palette-heading"
+                        class="panel-heading"
+                        data-toggle="collapse"
+                        data-target="#expand-collapse-pd-nodes-palette"
+                      >
+                        <p class="panel-title accordion-toggle">
+                          Process Description
+                        </p>
+                      </div>
+                      <div
+                        id="expand-collapse-pd-nodes-palette"
+                        class="panel-collapse collapse in"
+                      >
+                        <div class="panel-body">
+                          <div
+                            id="pd-node-palette"
+                            class="element-palette node-palette"
+                          >
+                            <div class="paletteWrapper">
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/macromolecule.svg"
+                                  language="PD"
+                                  value="macromolecule"
+                                  title="Macromolecule"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/complex.svg"
+                                  language="PD"
+                                  value="complex"
+                                  title="Complex"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/simple-chemical.svg"
+                                  language="PD"
+                                  value="simple-chemical"
+                                  title="Simple Chemical"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/unspecified-entity.svg"
+                                  language="PD"
+                                  value="unspecified-entity"
+                                  title="Unspecified Entity"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/nucleic-acid-feature.svg"
+                                  language="PD"
+                                  value="nucleic-acid-feature"
+                                  title="Nucleic Acid Feature"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/perturbing-agent.svg"
+                                  language="PD"
+                                  value="perturbing-agent"
+                                  title="Perturbing Agent"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/empty-set.svg"
+                                  language="PD"
+                                  value="empty-set"
+                                  title="Empty Set"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/phenotype.svg"
+                                  language="PD"
+                                  value="phenotype"
+                                  title="Phenotype"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/process.svg"
+                                  language="PD"
+                                  value="process"
+                                  title="Process"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/omitted-process.svg"
+                                  language="PD"
+                                  value="omitted-process"
+                                  title="Omitted Process"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/uncertain-process.svg"
+                                  language="PD"
+                                  value="uncertain-process"
+                                  title="Uncertain Process"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/association.svg"
+                                  language="PD"
+                                  value="association"
+                                  title="Association"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/dissociation.svg"
+                                  language="PD"
+                                  value="dissociation"
+                                  title="Dissociation"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/tag.svg"
+                                  language="PD"
+                                  value="tag"
+                                  title="Tag"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/compartment.svg"
+                                  language="PD"
+                                  value="compartment"
+                                  title="Compartment"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/submap.svg"
+                                  language="PD"
+                                  value="submap"
+                                  title="Submap"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/and.svg"
+                                  language="PD"
+                                  value="and"
+                                  title="AND"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/or.svg"
+                                  language="PD"
+                                  value="or"
+                                  title="OR"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/not.svg"
+                                  language="PD"
+                                  value="not"
+                                  title="NOT"
+                                />
+                              </div>
+                            </div>
+                          </div>
                         </div>
+                        <div class="panel-body" style="padding-bottom: 0px">
+                          <div
+                            id="pd-edge-palette"
+                            class="element-palette edge-palette"
+                          >
+                            <div class="paletteWrapper">
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/consumption.svg"
+                                  language="PD"
+                                  value="consumption"
+                                  title="Consumption"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/production.svg"
+                                  language="PD"
+                                  value="production"
+                                  title="Production"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/modulation.svg"
+                                  language="PD"
+                                  value="modulation"
+                                  title="Modulation"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/stimulation.svg"
+                                  language="PD"
+                                  value="stimulation"
+                                  title="Stimulation"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/catalysis.svg"
+                                  language="PD"
+                                  value="catalysis"
+                                  title="Catalysis"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/inhibition.svg"
+                                  language="PD"
+                                  value="inhibition"
+                                  title="Inhibition"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/necessary-stimulation.svg"
+                                  language="PD"
+                                  value="necessary stimulation"
+                                  title="Necessary Stimulation"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/consumption.svg"
+                                  language="PD"
+                                  value="logic arc"
+                                  title="Logic Arc"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/consumption.svg"
+                                  language="PD"
+                                  value="equivalence arc"
+                                  title="Equivalence Arc"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
                     </div>
-                </div>
-            </div>
-        </div>
-
-        <div id='quick_help_modal' class="modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 520px">
-                <div class="modal-content">
-                    <div class="modal-body">
-                        <div class="sbgn-frame quick-help">
-                            <h2 class="sbgn-text">Quick Help</h2>
-                            <div class="quick-help-content">
-                                <table align="center" valign="center">
-                                <tbody>
-                                  <tr>
-                                    <td><b>SBGN notation</b>:
-                                        <a href="https://sbgn.github.io/learning" target="_blank" rel="nofollow">Learning SBGN</a> - <a href="https://sbgn.github.io/learnerscards" target="_blank" rel="nofollow">Learner's Cards</a></td>
-                                  </tr>
-                                  <tr>
-                                    <td><b>SIF notation</b>:
-                                        <a href="http://www.pathwaycommons.org/pc2/formats#sif_relations" target="_blank" rel="nofollow">SIF Relations</a> </td>
-                                  </tr>
-                                  <tr>
-                                    <td><b>SBML notation</b>:
-                                        <a href="https://minerva.pages.uni.lu/doc/user_manual/v16.0/SBML-SBOTerms/" target="_blank" rel="nofollow">SBO terms mapping to CellDesigner notation</a> </td>
-                                  </tr>
-                                    <tr>
-                                        <td><b>File > Samples</b>:
-                                            Open a sample model</td>
-                                    </tr>
-                                    <tr>
-                                        <td><b>Double-click on node</b>:
-                                            Edit label</td>
-                                    </tr>
-                                    <tr>
-                                        <td><b>Right-click</b>:
-                                            Context menu for associated object</td>
-                                    </tr>
-                                    <tr>
-                                        <td><b>Right click on selected edge</b>:
-                                            Add bend/control point for edge</td>
-                                    </tr>
-                                    <tr>
-                                        <td><b>Ctrl/Cmd + drag on a node</b>:
-                                            Transfer a node in and out of a complex/compartment/submap</td>
-                                    </tr>
-                                    <tr>
-                                        <td><b>Shift + drag</b>:
-                                            Box selection (select touched nodes and included edges)</td>
-                                    </tr>
-                                    <tr>
-                                        <td><b>Ctrl/Cmd + Shift + drag</b>:
-                                            Marquee zoom (zoom to marked area)</td>
-                                    </tr>																		
-                                    <tr>
-                                        <td><b>Shift + click</b>:
-                                            Add/remove an element to/from the current selection</td>
-                                    </tr>
-                                    <tr>
-                                        <td><b>Shift + taphold on node/edge</b>:
-                                            Select neighborhood of node/edge (involved processes for PD maps)</td>
-                                    </tr>
-                                    <tr>
-                                        <td><b>Alt + taphold on node/edge</b>:
-                                            Select all nodes/edges of this type</td>
-                                    </tr>
-                                    <tr>
-                                        <td><b>Arrow keys</b>:
-                                            Move selected nodes in arrow direction; use Shift (Alt) for faster (slower) move</td>
-                                    </tr>
-                                </tbody>
-                                </table>
-                                <h2 class="sbgn-text">Tips</h2>
-                                <table align="center" valign="center">
-                                <tbody>
-                                    <tr>
-                                        <td><b>Edit > Add {Complex,Compartment,Submap} for Selected</b>: include all selected nodes inside a newly created complex or compartment or submap.</td>
-                                    </tr>
-                                    <tr>
-                                        <td><b>Convenient process creation</b>:
-                                            When creating a new process node, click on substrate node and drag to and release on product node.</td>
-                                    </tr>
-                                    <tr>
-                                        <td><b>Enable grid</b>:
-                                            Clicking on the Enable Grid tool on the toolbar shows and snaps to the grid during node dragging.</td>
-                                    </tr>
-                                    <tr>
-                                        <td><b>Enable guidelines</b>:
-                                            Clicking on the Enable Guidelines tool on the toolbar enables and snaps to alignment guidelines during node dragging.</td>
-                                    </tr>
-                                   
-                                </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>
-                                            <td>
-                                                <span >For any issues or bug reports, please <a href="http://newteditor.org/contact.html" target="_blank" rel="nofollow">contact us</a>.</span>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
+                    <!-- AF Nodes Panel -->
+                    <div class="panel">
+                      <div
+                        id="AF-palette-heading"
+                        class="panel-heading collapsed"
+                        data-toggle="collapse"
+                        data-target="#expand-collapse-af-nodes-palette"
+                      >
+                        <p class="panel-title accordion-toggle">
+                          Activity Flow
+                        </p>
+                      </div>
+                      <div
+                        id="expand-collapse-af-nodes-palette"
+                        class="panel-collapse collapse"
+                      >
+                        <div class="panel-body">
+                          <div
+                            id="af-node-palette"
+                            class="element-palette node-palette"
+                          >
+                            <div class="paletteWrapper">
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/BA-plain.svg"
+                                  language="AF"
+                                  value="BA-plain"
+                                  title="Biological Activity"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/BA-macromolecule.svg"
+                                  language="AF"
+                                  value="BA-macromolecule"
+                                  title="Macromolecule"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/BA-complex.svg"
+                                  language="AF"
+                                  value="BA-complex"
+                                  title="Complex"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/BA-simple-chemical.svg"
+                                  language="AF"
+                                  value="BA-simple-chemical"
+                                  title="Simple Chemical"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/BA-unspecified-entity.svg"
+                                  language="AF"
+                                  value="BA-unspecified-entity"
+                                  title="Unspecified Entity"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/BA-nucleic-acid-feature.svg"
+                                  language="AF"
+                                  value="BA-nucleic-acid-feature"
+                                  title="Nucleic Acid Feature"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/BA-perturbing-agent.svg"
+                                  language="AF"
+                                  value="BA-perturbing-agent"
+                                  title="Perturbing Agent"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/phenotype.svg"
+                                  language="AF"
+                                  value="phenotype"
+                                  title="Phenotype"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/compartment.svg"
+                                  language="AF"
+                                  value="compartment"
+                                  title="Compartment"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/submap.svg"
+                                  language="AF"
+                                  value="submap"
+                                  title="Submap"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/tag.svg"
+                                  language="AF"
+                                  value="tag"
+                                  title="Tag"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/and.svg"
+                                  language="AF"
+                                  value="and"
+                                  title="AND"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/or.svg"
+                                  language="AF"
+                                  value="or"
+                                  title="OR"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/not.svg"
+                                  language="AF"
+                                  value="not"
+                                  title="NOT"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/delay.svg"
+                                  language="AF"
+                                  value="delay"
+                                  title="Delay"
+                                />
+                              </div>
                             </div>
-
-
+                          </div>
                         </div>
-
+                        <!-- AF Edges Panel -->
+                        <div class="panel-body" style="padding-bottom: 0px">
+                          <div
+                            id="af-edge-palette"
+                            class="element-palette edge-palette"
+                          >
+                            <div class="paletteWrapper">
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/stimulation.svg"
+                                  language="AF"
+                                  value="positive influence"
+                                  title="Positive Influence"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/inhibition.svg"
+                                  language="AF"
+                                  value="negative influence"
+                                  title="Negative Influence"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/modulation.svg"
+                                  language="AF"
+                                  value="unknown influence"
+                                  title="Unknown Influence"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/necessary-stimulation.svg"
+                                  language="AF"
+                                  value="necessary stimulation"
+                                  title="Necessary Stimulation"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/consumption.svg"
+                                  language="AF"
+                                  value="logic arc"
+                                  title="Logic Arc"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/consumption.svg"
+                                  language="AF"
+                                  value="equivalence arc"
+                                  title="Equivalence Arc"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
                     </div>
-                </div>
-            </div>
-        </div>
-
-        <div id='color_picker_modal' class="modal fade" tabindex="-1" role="dialog">
-          <div class="modal-dialog" style="width: 232px; height: 363px;">
-            <div class="modal-content" >
-              <div id='color-picker-div' class='text-center' acp-show-hsl='no' acp-palette-editable></div>
-            </div>
-          </div>
-        </div>
-
-        <script type="text/template" id="loading-small-template">
-            <p class="sbgn-text"> <%= name %> </p>
-            <img class="centered" src="app/img/loading-small.gif" height="auto" width="auto" align="middle">
-        </script>
-
-        <script type="text/template" id="layout-settings-template">
-            <div class="modal-dialog modal-sm sbgn-modal-dialog">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Layout Properties</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table">
-            <tbody>          
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Node repulsion (non overlapping) multiplier"> Node Repulsion </span>
-            </td>
-            <td>
-            <input id="node-repulsion" type="text" min="0" class="sbgn-input-small layout-text integer-input" value= <%= nodeRepulsion %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Ideal (intra-graph) edge length"> Ideal Edge Length </span>
-            </td>
-            <td>
-            <input id="ideal-edge-length" type="text" min="5" class="sbgn-input-small layout-text integer-input" value= <%= idealEdgeLength %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Divisor to compute edge forces"> Edge Elasticity </span>
-            </td>
-            <td>
-            <input id="edge-elasticity" type="number" min="0" class="sbgn-input-small layout-text" value= <%= edgeElasticity %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Nesting factor (multiplier) to compute ideal edge length for inter-graph edges"> Nesting Factor </span>
-            </td>
-            <td>
-            <input id="nesting-factor" type="number" min="0" class="sbgn-input-small layout-text" value= <%= nestingFactor %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Gravity force (constant)"> Gravity </span>
-            </td>
-            <td>
-            <input id="gravity" type="number" min="0" class="sbgn-input-small layout-text" value= <%= gravity %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Gravity range (constant)"> Gravity Range   </span>
-            </td>
-            <td>
-            <input id="gravity-range" type="number" min="0" class="sbgn-input-small layout-text" value= <%= gravityRange %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Gravity force (constant) for compounds"> Compound Gravity  </span>
-            </td>
-            <td>
-            <input id="gravity-compound" type="number" min="0" class="sbgn-input-small layout-text" value= <%= gravityCompound %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Gravity range (constant) for compounds"> Compound Gravity Range </span>
-            </td>
-            <td>
-            <input id="gravity-range-compound" type="number" min="0" class="sbgn-input-small layout-text" value= <%= gravityRangeCompound %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Maximum number of iterations to perform"> Number of Iterations </span>
-            </td>
-            <td>
-            <input id="num-iter" type="text" min="0" class="sbgn-input-small layout-text integer-input" value= <%= numIter %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Amount of vertical space to put between degree zero nodes during tiling"> Tiling Vertical Padding </span>
-            </td>
-            <td>
-            <input id="tiling-padding-vertical" type="text" min="0" class="sbgn-input-small layout-text integer-input" value= <%= tilingPaddingVertical %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Amount of horizontal space to put between degree zero nodes during tiling"> Tiling Horizontal Padding </span>
-            </td>
-            <td>
-            <input id="tiling-padding-horizontal" type="text" min="0" class="sbgn-input-small layout-text integer-input" value= <%= tilingPaddingHorizontal %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Whether to tile disconnected nodes"> Tile Disconnected </span>
-            </td>
-
-            <td>
-            <input id="tile" type="checkbox" class="layout-text" <% if (tile){ %> checked<%}%>>
-            </td>
-            </tr>
-            
-            <tr>
-              <td>
-                <span class="add-on layout-text" title="Whether to pack components"> Pack Components </span>
-              </td>
-  
-              <td>
-                <input id="pack-components" type="checkbox" class="layout-text" <% if (packComponents){ %> checked<%}%>>
-              </td>
-            </tr>            
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Whether to enable incremental mode"> Incremental </span>
-            </td>
-
-            <td>
-            <input id="incremental" type="checkbox" class="layout-text" <% if (!randomize){ %> checked<%}%>>
-            </td>
-            </tr>
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Initial cooling factor for incremental layout"> Incremental Cooling Factor </span>
-            </td>
-            <td>
-            <input id="incremental-cooling-factor" type="number" min="0" class="sbgn-input-small layout-text" value= <%= initialEnergyOnIncremental %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td>
-            <span class="add-on layout-text" title="Whether to improve flow by swapping degree one nodes"> Improve Flow </span>
-            </td>
-            <td>
-            <input id="improve-flow" type="checkbox" class="layout-text" <% if (improveFlow){ %> checked<%}%>>
-            </td>
-            </tr>
-
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="save-layout" class="btn btn-default" >Save</button>
-            <button id="default-layout" class="btn btn-default">Default</button>
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <script type="text/template" id="map-tab-general-template">
-            <table class="table-condensed layout-table dialog-table map-panel-table">
-            <tbody>
-            <tr>
-                <td class="header">
-                    <span class="add-on layout-text" title="Name of the map"> Name </span>
-                </td>
-
-                <td>
-                    <input id="map-name"  type="text" class="sbgn-input-medium layout-text" value="<%= mapName %>" >
-                </td>
-            </tr>
-
-            <tr>
-                <td class="header">
-                    <span class="add-on layout-text" title="Description of the map"> Description </span>
-                </td>
-
-                <td>
-                    <textarea id="map-description"  cols="8" rows="2" style="min-width: 90px;" class="layout-text"><%= mapDescription %></textarea>
-                </td>
-            </tr>
-
-            <tr>
-                <td class="header">
-                    <span class="add-on layout-text" title="Type of a map is used to check map type specific rules (e.g. target of a consumption is a process node)"> Type </span>
-                </td>
-
-                <td>
-                    <select id="map-type" class="sbgn-input-medium layout-text">
-                        <option value="PD" selected>PD</option>
-                        <option value="AF">AF</option>
-                        <option value="HybridSbgn">PD+AF</option>
-                        <option value="SIF">SIF</option>
-                        <option value="SBML">SBML</option>
-                        <option value="HybridAny">PD+AF+SIF+SBML</option>
-                    </select>
-                </td>
-            </tr>
-
-            <tr>
-            <td class="header">
-            <span class="add-on layout-text" title="Paddings around compound nodes. Notice, however, that a certain minimal padding is needed and already added for all compound nodes to accommodate for information boxes and visual editing cues (such as expand / collapse cues)"> Additional Compound Padding </span>
-            </td>
-
-            <td>
-            <input id="compound-padding" type="number" class="sbgn-input-small layout-text integer-input" min="0" value= <%= compoundPadding %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td class="header">
-                <span class="add-on layout-text" title="Size of various types of arrows on edges"> Edge Arrow Size </span>
-            </td>
-
-            <td>
-                <input id="arrow-scale" type='range' class="sbgn-input-small" step='0.01' min='0.5' max='2' value= <%= arrowScale %> >
-            </td>
-            </tr>
-
-            <tr>
-            <td class="header">
-            <span class="add-on layout-text" title="Whether or not compounds should be allowed to be resized (if not, compounds dynamically assume dimensions with respect to their content's geometry)"> Allow Compound Resize </span>
-            </td>
-
-            <td>
-            <input id="allow-compound-node-resize" type="checkbox" class="layout-text" <% if (allowCompoundNodeResize){ %> checked<%}%>>
-            </td>
-            </tr>
-
-            <tr>
-            <td class="header">
-            <span class="add-on layout-text" title="Whether or not nesting of nodes inside compounds should be inferred on loading of maps (most data providers will mean for a compound to include processes inside its boundaries but will not correctly set the associated compartment references)"> Infer Nesting on Load </span>
-            </td>
-
-            <td>
-            <input id="infer-nesting-on-load" type="checkbox" class="layout-text" <% if (inferNestingOnLoad){ %> checked<%}%>>
-            </td>
-            </tr>
-
-            <tr>
-            <td class="header">
-            <span class="add-on layout-text" title="Whether or not processes should have input and output ports to respectively combine consumption and production edges to a single point of input and output on the process"> Enable Ports </span>
-            </td>
-
-            <td>
-            <input id="enable-ports" type="checkbox" class="layout-text" <% if (enablePorts){ %> checked<%}%>>
-            </td>
-            </tr>
-
-            <tr>
-            <td class="header">
-            <span class="add-on layout-text" title="For maps of type SIF, whether or not macromolecules should be grouped with respect to topology (i.e. if two macromolecules have the same connectivity, they are grouped together with a compound node for reducing edge count)"> Enable Topology Grouping of SIF Nodes </span>
-            </td>
-
-            <td>
-            <input id="enable-sif-topology-grouping" type="checkbox" class="layout-text" <% if (enableSIFTopologyGrouping){ %> checked<%}%>>
-            </td>
-            </tr>
-
-            <tr>
-            <td class="header">
-            <span class="add-on layout-text" title="Highlight thickness and color">Highlight Style</span>
-            </td>
-
-            <td>
-            <input id="highlight-thickness"  type='range' class="sbgn-input-small" style="display:inline;vertical-align:top" step='0.5' min='1' max='10' value= <%= extraHighlightThickness %>>
-            <input id="highlight-color" type="color" class="sbgn-input-small layout-text" value= <%= highlightColor %>>
-            </td>
-            </tr>
-
-            </tbody>
-            </table>
-
-            <div style='text-align: center; margin-top: 5px;'>
-              <button class='btn btn-default' id='map-general-default-button'>Default</button>
-            <div>
-        </script>
-
-        <script type="text/template" id="map-tab-label-template">
-            <table class="table-condensed layout-table dialog-table map-panel-table">
-            <tbody>
-                <tr>
-                <td class="header">
-                <span class="add-on layout-text" title="Whether or not molecular complexes with labels should display these labels"> Display Labels for Named Complexes </span>
-                </td>
-
-                <td>
-                <input id="show-complex-name" type="checkbox" class="layout-text" <% if (showComplexName){ %> checked<%}%>>
-                </td>
-                </tr>
-
-                <tr>
-                <td class="header">
-                <span class="add-on layout-text" title="Whether or not the font size of node labels should be calculated with respect to node size"> Adjust Node Label Font Size Automatically </span>
-                </td>
-
-                <td>
-                <input id="adjust-node-label-font-size-automatically" type="checkbox" class="layout-text" <% if (adjustNodeLabelFontSizeAutomatically){ %> checked<%}%>>
-                </td>
-                </tr>
-
-                <tr>
-                    <td class="header">
-                        <span class="add-on layout-text" title="When Adjust Node Label Font Size Automatically is enabled, label sizes can be set to be uniformly small, regular or large"> Label Size </span>
-                    </td>
-
-                    <td>
-                        <select id="dynamic-label-size-select"  class="sbgn-input-medium" name="dynamic-label-size">
-                            <option id="dynamic-label-size_small" value="small" <% if (dynamicLabelSize == 'small'){ %> selected<%}%> > Small </option>
-                            <option id="dynamic-label-size_regular" value="regular" <% if (dynamicLabelSize == 'regular'){ %> selected<%}%> > Regular </option>
-                            <option id="dynamic-label-size_large" value="large" <% if (dynamicLabelSize == 'large'){ %> selected<%}%> > Large </option>
-                        </select>
-                    </td>
-                </tr>
-
-                <tr>
-                <td class="header">
-                <span class="add-on layout-text" title="Whether or not long node labels overflowing node width should be truncated with ellipses"> Fit Labels to Nodes </span>
-                </td>
-
-                <td>
-                <input id="fit-labels-to-nodes" type="checkbox" class="layout-text" <% if (fitLabelsToNodes){ %> checked<%}%>>
-                </td>
-                </tr>
-
-                <tr>
-                <td class="header">
-                <span class="add-on layout-text" title="Whether or not long information box (state variable or units of information) labels overflowing information box width should be truncated with ellipses"> Fit Labels to Information Boxes </span>
-                </td>
-
-                <td>
-                <input id="fit-labels-to-infoboxes" type="checkbox" class="layout-text" <% if (fitLabelsToInfoboxes){ %> checked<%}%>>
-                </td>
-                </tr>
-
-            </tbody>
-            </table>
-
-            <div style='text-align: center; margin-top: 5px;'>
-              <button class='btn btn-default' style='align: center;' id='map-label-default-button'>Default</button>
-            <div>
-        </script>
-
-        <script type="text/template" id="map-tab-rearrangement-template">
-            <table class="table-condensed layout-table dialog-table map-panel-table">
-            <tbody>
-                <tr>
-                <td class="header">
-                <span class="add-on layout-text" title='Whether or not an incremental layout, which tries to "tidy up" the drawing, should be applied after complexity management (expand/collapse and hide/show) operations'> Recalculate Layout on Complexity Management </span>
-                </td>
-
-                <td>
-                <input id="recalculate-layout-on-complexity-management" type="checkbox" class="layout-text" <% if (recalculateLayoutOnComplexityManagement){ %> checked<%}%>>
-                </td>
-                </tr>
-
-                <tr>
-                <td class="header">
-                <span class="add-on layout-text" title="Whether or not complexity management operations should try to make room for changes (e.g. move surrounding neighbors away before expanding a collapsed node) prior to recalculating layout on complexity management operations"> Rearrange on Complexity Management </span>
-                </td>
-
-                <td>
-                <input id="rearrange-on-complexity-management" type="checkbox" class="layout-text" <% if (rearrangeOnComplexityManagement){ %> checked<%}%>>
-                </td>
-                </tr>
-
-                <tr>
-                <td class="header">
-                <span class="add-on layout-text" title="Whether or not operations such as layout and complexity management should move map objects to their new locations using animation"> Animate on Drawing Changes </span>
-                </td>
-
-                <td>
-                <input id="animate-on-drawing-changes" type="checkbox" class="layout-text" <% if (animateOnDrawingChanges){ %> checked<%}%>>
-                </td>
-                </tr>
-            </tbody>
-            </table>
-
-            <div style='text-align: center; margin-top: 5px;'>
-              <button class='btn btn-default' style='align: center;' id='map-rearrangement-default-button'>Default</button>
-            <div>
-        </script>
-        
-        <script type="text/template" id="map-tab-experiment-template">
-            <table align = "center" class="table-condensed layout-table dialog-table map-panel-table">
-         <div align="center" style = 'margin-top: 10px; text-align: center'> Open... <img width='16px' height='16px' id='load-exp-data-util' title="Open experiment data from a tab-delimited file" src='app/img/add.svg' style="margin: 5px;"/> </div> 
-               
-                <% if( experimentDescription.length  <= 0 || Object.entries(experimentDescription).length == 0){ %>
-                <% } else { %>
-                <table align = "center" class="table-condensed layout-table dialog-table map-panel-table">
-                    <tbody>
-                    <tr>
-                        <td style='text-align: center;'>
-                            <div style='margin-top: 0px;' >
-                                <img width='16px' height='16px' style='align: center; margin-right: 2%; cursor: pointer; margin-top: -2px;' id="show-experiment-data-as-table" src="app/img/toolbar/table-grid.svg" title="Show as table">
-                                <button class='btn btn-default' value="true" title="Temporarily hide/show all experiment data" style='align: center; border-width: 0px !important; padding:3px; margin-right: 2%' id='experiment-hide-all'> Hide/Show All</button>
-                                <button class='btn btn-default' value="true" title="Remove all experiment data" style='align: center; border-width: 0px !important; padding:3px;' id='experiment-remove-all'> Remove All</button>
-                            </div>  
-                    </td>
-                    </tr> 
-                    </tbody> 
-                </table>
-                <!-- Draggable DIV -->
-                <div id="draggable-exp-data-div" style="display: none;">
-                  <div id="draggable-exp-data-div-header" class="text-center" style="cursor: move;z-index: 1001;">
-                    <div style="line-height:24px;">
-                      <button type="button" id="close-experiment-data-as-table" style="padding-right: 2px;" class="close">&times;</button>
-                      <b style="vertical-align: middle; font-size: 16px; font-weight:normal!important ">Experiment Data</b>
-                    </div>
-                  </div>
-                  <div>
-                    <input id="search-exp-table" type="label" style="float: right; clear: both; margin: 10px;" placeholder="Search...">
-                  </div>
-                  <div style="border: 1px solid #d3d3d3; border-bottom-left-radius:4px; border-bottom-right-radius:4px; padding:8px">
-                    <table class="table table-condensed table-striped table-hover" style="margin-bottom: 0px;" id="map-exp-table"> <!-- will come from JS --> </table> 
-                  </div>
-                </div>
-                           
-                  <% for (filename in experimentDescription) { %> 
-                    <% if (filename != null) { %>
-                 <hr style="margin-top: 10px!important; margin-bottom:10px!important"/>
-                <table align = "center" class="table-condensed layout-table dialog-table map-panel-table" style="table-layout:fixed !important;  margin-bottom:10px">
-                 <tbody>      
-                    <div>
-                        <tr>
-                            <td  style='text-align: right; width:50% !important; ' >
-                            <div>
-                                <button class='btn btn-default' value="true" style='align: center; border-width: 0px !important; padding:3px; overflow: hidden; text-overflow: ellipsis; max-width: 80%;' title="Hide/show " id='experiment-file-vis-<%= filename %>' > <b><%= filename %></b></button>
-                            </div>  
-                        </td>
-                    <td style="width:50% !important">
-                        <img width="16px" height="16px" src="app/img/toolbar/delete-simple.svg" style="margin: 5px;"  title= "Remove file" id='experiment-file-delete-<%= filename %>'/>
-                          
-                    </td>
-                    </tr>
-                    <%}%>
-                </div>
-                    <% for (element in experimentDescription[filename]) { %> 
-                        <% if(element != null) { %>
-                        <tr>
-                        <td  style='text-align: right; width:50% !important;' >
-                            <div>
-                                <button class='btn btn-default' value = 'true' style='align: center; border-width: 0px !important; padding:3px; overflow: hidden; text-overflow: ellipsis; max-width: 80%;' title="Hide/show <%=experimentDescription[filename][element]%>" id='experiment-vis-<%= filename %>?<%= experimentDescription[filename][element] %>' > <%= experimentDescription[filename][element] %></button>
-                            </div>  
-                    </td>
-                    <td style="width:50% !important">
-                        <img width="16px" height="16px" src="app/img/toolbar/delete-simple.svg" style=" margin: 5px;"  title= "Remove experiment" id='experiment-delete-<%= filename %>?<%= experimentDescription[filename][element] %>'/>   
-
-                    </td>
-                    </tr>
-                <% } %>
-                    <% } %>
-                </tbody>
-            </table>
-                    <% } %>
-                   
-            <% } %>  
-            
-        </tbody>
-        </table>
-        </script>
-        <script type="text/template" id="general-properties-template">
-            <!-- legacy, keep it to know how the default button was designed before
-            </tbody>
-            </table>
-            <div class="modal-footer" style="text-align: center">
-            <button id="default-sbgn" class="btn btn-default">Default</button>
-            </div>-->
-        </script>
-
-        <script type="text/template" id="query-neighborhood-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 510px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Neighborhood Query</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table">
-            <tbody>
-            <tr>
-            <th colspan=2 style="padding-left: 0px;" align="left">
-                <!--&emsp; are added to fill the row so that the distance between the -->
-            <span class="add-on layout-text"> Find the neighbors of an entity within a certain distance &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;</span>
-            </th>
-            </tr>
-
-            <tr>
-            <td style="padding-left: 40px;">
-            <span class="add-on layout-text"> Gene Symbols: </span><br>
-            <textarea id="query-neighborhood-gene-symbols" rows="4" cols="86" style="width: 200px;"><%= geneSymbols %></textarea>
-            </td>
-
-            <td style="padding-right: 5px;">
-            <table frame="box" style="border-color: rgb(204, 204, 204)">
-            <tbody>
-            <caption style="text-align: left;">Stop Distance</caption>
-            <tr>
-            <td colspan=2>Length limit</td>
-            <td style="padding: 10px;"><input id="query-neighborhood-length-limit" type="text" min="1" class="sbgn-input-small layout-text integer-input" style="width: 90px;" value= <%= lengthLimit %> > </td>
-            </tr>
-            </tbody>
-            </table>
-            </td>
-
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="save-query-neighborhood" class="btn btn-default" >OK</button>
-            <button id="cancel-query-neighborhood" class="btn btn-default">Cancel</button>
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <script type="text/template" id="query-pathsbetween-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 510px;">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                        <h4 class="modal-title">Paths Between Query</h4>
-                    </div>
-                    <div class="modal-body">
-                        <table class="table-condensed layout-table">
-                            <tbody>
-                            <tr>
-                                <th colspan=2 style="padding-left: 0px;" align="left">
-                                    <span class="add-on layout-text"> Find all paths of specified length limit between any two entities of the specified set </span>
-                                </th>
-                            </tr>
-
-                            <tr>
-                                <td style="padding-left: 40px;">
-                                    <span class="add-on layout-text"> Gene Symbols: </span><br>
-                                    <textarea id="query-pathsbetween-gene-symbols" rows="4" cols="86" style="width: 200px;"><%= geneSymbols %></textarea>
-                                </td>
-
-                                <td style="padding-right: 5px;">
-                                    <table frame="box" style="border-color: rgb(204, 204, 204)">
-                                        <tbody>
-                                        <caption style="text-align: left;">Stop Distance</caption>
-                                        <tr>
-                                            <td colspan=2>Length limit</td>
-                                            <td style="padding: 10px;"><input id="query-pathsbetween-length-limit" type="text" min="1" class="sbgn-input-small layout-text integer-input" style="width: 90px;" value= <%= lengthLimit %> > </td>
-                                        </tr>
-                                        </tbody>
-                                    </table>
-                                </td>
-
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="modal-footer" style="text-align: center">
-                        <button id="save-query-pathsbetween" class="btn btn-default" >OK</button>
-                        <button id="cancel-query-pathsbetween" class="btn btn-default">Cancel</button>
-                    </div>
-                </div>
-            </div>
-        </script>
-
-        <script type="text/template" id="query-pathsfromto-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 510px;">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                        <h4 class="modal-title">Paths From To Query</h4>
-                    </div>
-                    <div class="modal-body">
-                        <table class="table-condensed layout-table">
-                            <tbody>
-                            <tr>
-                                <th colspan=3 style="padding-left: 0px;" align="left">
-                                    <span class="add-on layout-text"> Find all paths of specified length limit from a set of source entities to a set of target entities </span>
-                                </th>
-                            </tr>
-
-                            <tr>
-                                <td style="padding-left: 5px;">
-                                    <span class="add-on layout-text"> Source Symbols: </span><br>
-                                    <textarea id="query-pathsfromto-source-symbols" rows="4" cols="80" style="width: 150px;"><%= sourceSymbols %></textarea>
-                                </td>
-
-                                <td style="padding-left: 5px;">
-                                    <span class="add-on layout-text"> Target Symbols: </span><br>
-                                    <textarea id="query-pathsfromto-target-symbols" rows="4" cols="80" style="width: 150px;"><%= targetSymbols %></textarea>
-                                </td>
-
-                                <td style="padding-right: 5px;">
-                                    <table frame="box" style="border-color: rgb(204, 204, 204)">
-                                        <tbody>
-                                        <caption style="text-align: left;">Stop Distance</caption>
-                                        <tr>
-                                            <td colspan=2>Length limit</td>
-                                            <td style="padding: 10px;"><input id="query-pathsfromto-length-limit" type="text" min="1" class="sbgn-input-small layout-text integer-input" style="width: 90px;" value= <%= lengthLimit %> > </td>
-                                        </tr>
-                                        </tbody>
-                                    </table>
-                                </td>
-
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="modal-footer" style="text-align: center">
-                        <button id="save-query-pathsfromto" class="btn btn-default" >OK</button>
-                        <button id="cancel-query-pathsfromto" class="btn btn-default">Cancel</button>
-                    </div>
-                </div>
-            </div>
-        </script>
-
-        <script type="text/template" id="query-commonstream-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 510px;">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                        <h4 class="modal-title">Common Stream Query</h4>
-                    </div>
-                    <div class="modal-body">
-                        <table class="table-condensed layout-table">
-                            <tbody>
-                            <tr>
-                                <th colspan=2 style="padding-left: 0px;" align="left">
-                                    <span class="add-on layout-text"> Find molecules within the specified distance that are affecting or affected by a specific set of molecules in common</span>
-                                </th>
-                            </tr>
-
-                            <tr>
-                                <td style="padding-left: 40px;">
-                                    <span class="add-on layout-text"> Gene Symbols: </span><br>
-                                    <textarea id="query-commonstream-gene-symbols" rows="4" cols="86" style="width: 200px;"><%= geneSymbols %></textarea>
-                                </td>
-
-                                <td style="padding-right: 5px;">
-                                    <table frame="box" style="border-color: rgb(204, 204, 204)">
-                                        <tbody>
-                                        <caption style="text-align: left;">Stop Distance</caption>
-                                        <tr>
-                                            <td colspan=2>Length limit</td>
-                                            <td style="padding: 10px;"><input id="query-commonstream-length-limit" type="text" min="1" class="sbgn-input-small layout-text integer-input" style="width: 90px;" value= <%= lengthLimit %> > </td>
-                                        </tr>
-                                        </tbody>
-                                    </table>
-                                </td>
-
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="modal-footer" style="text-align: center">
-                        <button id="save-query-commonstream" class="btn btn-default" >OK</button>
-                        <button id="cancel-query-commonstream" class="btn btn-default">Cancel</button>
-                    </div>
-                </div>
-            </div>
-        </script>
-
-        <script type="text/template" id="query-pathsbyURI-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 500px;">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                        <h4 class="modal-title">Paths By URI</h4>
-                    </div>
-                    <div class="modal-body">
-                        <table class="table-condensed layout-table">
-                            <tbody>
-                            <tr>
-                                <th colspan=3 style="padding-left: 0px;" align="left">
-                                    <span class="add-on layout-text"> Display paths of the specified URI </span>
-                                </th>
-                            </tr>
-
-                            <tr>
-                                <td>Enter URI of a pathway</td>
-                                <td style="padding: 10px;"><input id="query-pathsbyURI-URI" type="text"  style="width: 300px;" value= <%= URI %> > </td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="modal-footer" style="text-align: center">
-                        <button id="save-query-pathsbyURI" class="btn btn-default" >OK</button>
-                        <button id="cancel-query-pathsbyURI" class="btn btn-default">Cancel</button>
-                    </div>
-                </div>
-            </div>
-        </script>
-
-
-        <script type="text/template" id="prompt-save-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 350px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Save</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text"> Do you want to save any change(s) to the map? </span>
-            </th>
-            </tr>
-
-            <tr id="prompt-save-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-save-accept" class="btn btn-default" >Save</button>
-            <button id="prompt-save-reject" class="btn btn-default">Don't Save</button>
-            <button id="prompt-save-cancel" class="btn btn-default">Cancel</button>
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <script type="text/template" id="file-save-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 350px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Save</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <td style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text"> Filename </span>
-            </td>
-            <td>
-            <input id="file-save-filename" type="text" />
-            </td>
-            </tr>
-
-            <tr id="file-save-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="file-save-accept" class="btn btn-default">Save</button>
-            <button id="file-save-cancel" class="btn btn-default">Cancel</button>
-            </div>
-            </div>
-            </div>
-        </script>
-        <script type="text/template" id="save-user-preferences-template">
-            <div class="modal-dialog modal-sm sbgn-modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                        <h4 class="modal-title">Save Preferences</h4>
-                    </div>
-                    <div class="modal-body">
-                    <table class="table-condensed layout-table dialog-table" style="white-space: nowrap;">
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <span class="add-on layout-text" > Filename </span>
-                                </td>
-                                <td>
-                                    <input id="save-user-preferences-filename" type="text" />
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <table class="table-condensed layout-table dialog-table" style="white-space: nowrap;">
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <span class="add-on layout-text" title="Save Map Properties preferences" > Map Properties </span>
-                                </td>
-                                <td>
-                                    <input id="user-prefrences-map-check" type="checkbox" class="layout-text" checked>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <span class="add-on layout-text" title="Save Grid Properties preferences" > Grid Properties </span>
-                                </td>
-                                <td>
-                                    <input id="user-prefrences-grid-check" type="checkbox" class="layout-text" checked>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <span class="add-on layout-text" title="Save Layout Properties preferences" > Layout Properties </span>
-                                </td>
-                                <td>
-                                    <input id="user-prefrences-layout-check" type="checkbox" class="layout-text" checked>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <span class="add-on layout-text" title="Save Object Properties preferences" > Object Properties: </span>
-                                </td>
-                                <% if(stagedObjects.length <= 0) { %>
-                                <td>
-                                    <span class="add-on layout-text"  > none specified </span>
-                                </td>
-                                <% } else { %>
-                                    <td>
-                                        <input id="save-user-prefrences-object-check" type="checkbox" class="layout-text" checked>
-                                    </td>
-
-                                <% } %>
-                            </tr>
-
-                    <% if(stagedObjects.length > 0) { %>
-                            <% stagedObjects.forEach(function(element) { %>
-                            <tr>
-                                <td>
-                                    <span class="add-on layout-text save-load-prefrences-object-name" title="Save <%= element %> properties preferences"> <%= element %> </span>
-                                </td>
-                                <td>
-                                    <input id="user-prefrences-object-<%= element %>-check" type="checkbox" disabled="disabled" class="layout-text save-preferences-object-styles" checked>
-                                </td>
-                            </tr>
-                            <% }); %>
-                    <% } %>
-                        </tbody>
-                    </table>
-
-                    </div>
-                    <div class="modal-footer" style="text-align: center">
-                        <button id="save-user-preferences-accept" class="btn btn-default">Save</button>
-                        <button id="save-user-preferences-cancel" class="btn btn-default">Cancel</button>
-                    </div>
-                </div>
-            </div>
-        </script>
-
-        <script type="text/template" id="load-user-preferences-template">
-            <div class="modal-dialog modal-sm sbgn-modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                        <h4 class="modal-title">Open Preferences</h4>
-                    </div>
-                    <div class="modal-body">
-                    <table class="table-condensed layout-table dialog-table">
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <span class="add-on layout-text" title="Open Map Properties preferences" > Map Properties </span>
-                                </td>
-                                <td>
-                                    <input id="load-user-prefrences-map-check" type="checkbox" class="layout-text" <% if(typeof currentGeneralProperties !== 'undefined') { %> checked <% }else{ %> disabled <% } %>>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <span class="add-on layout-text" title="Open Grid Properties preferences"> Grid Properties </span>
-                                </td>
-                                <td>
-                                    <input id="load-user-prefrences-grid-check" type="checkbox" class="layout-text"  <% if(typeof currentGridProperties !== 'undefined') { %> checked <% }else{ %> disabled <% } %>>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <span class="add-on layout-text" title="Open Layout Properties preferences"> Layout Properties </span>
-                                </td>
-                                <td>
-                                    <input id="load-user-prefrences-layout-check" type="checkbox" class="layout-text"  <% if(typeof currentLayoutProperties !== 'undefined') { %> checked <% }else{ %> disabled <% } %>>
-                                </td>
-                            </tr>
-
-                            <tr>
-                                <td>
-                                    <span class="add-on layout-text" title="Open Object Properties preferences"> Object Properties: </span>
-                                </td>
-                                <% if(elementsStyles.length <= 0) { %>
-                                <td>
-                                    <span class="add-on layout-text"  > none specified </span>
-                                </td>
-                                <% } else { %>
-                                <td>
-                                    <input id="load-user-prefrences-object-check" type="checkbox" class="layout-text" checked>
-                                </td>
-                                <% } %>
-                            </tr>
-                        <% elementsStyles.forEach(function(element) { %>
-                            <tr>
-                                <td>
-                                    <span class="add-on layout-text save-load-prefrences-object-name" title="Open <%= element['element'] %> properties preferences" > <%= (element['element']) %> </span>
-                                </td>
-                                <td>
-                                    <input title="<%= element['element'] %>" id="load-user-prefrences-object-<%= element['element'] %>-check" type="checkbox" disabled="disabled" class="layout-text load-preferences-object-styles" checked>
-                                </td>
-                            </tr>
-                        <% }); %>
-
-                    </tbody>
-                </table>
-
-                <% if(elementsStyles.length > 0) { %>
-                <table class="table-condensed layout-table dialog-table" style="margin-left:10px!important;">
-                    <tbody>
-                            <tr>
-                                <td>
-                                    <span class="add-on layout-text" title="Apply changes to existing elements"> Apply to existing elements </span>
-                                </td>
-                                <td>
-                                    <input id="load-user-prefrences-apply-changes" type="checkbox" class="layout-text" checked >
-                                </td>
-                            </tr>
-                            <tr>
-                                <td colspan="2">
-                                    <span class="add-on layout-text" style="font-size: 10px !important;"><strong>Caution: </strong> When checked the selected preferences will be applied to existing map objects!</span>
-                                </td>
-                            </tr>
-                    </tbody>
-                </table>
-                 <% } %>
-                    </div>
-                    <div class="modal-footer" style="text-align: center">
-                        <button id="load-user-preferences-accept" class="btn btn-default">Open</button>
-                        <button id="load-user-preferences-cancel" class="btn btn-default">Cancel</button>
-                    </div>
-                </div>
-            </div>
-        </script>
-
-        <script type="text/template" id="prompt-confirmation-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 400px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Confirmation</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text">All unsaved changes will be lost. Do you want to continue?</span>
-            </th>
-            </tr>
-
-            <tr id="prompt-confirmation-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-confirmation-accept" class="btn btn-default">Yes</button>
-            <button id="prompt-confirmation-cancel" class="btn btn-default">No</button>
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <!-- Map type change warning -->
-        <script type="text/template" id="prompt-mapType-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 500px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Warning</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text"><%= message %></span>
-            <br>
-            <span class="add-on layout-text"><%= suggestion %></span>
-            </th>
-            </tr>
-
-            <tr id="prompt-mapType-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-mapType-accept" class="btn btn-default">Dismiss</button>
-            <!-- <button id="prompt-mapType-cancel" class="btn btn-default">No</button> -->
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <!-- Invalid  query error -->
-        <script type="text/template" id="prompt-invalidQuery-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Error</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text">Invalid query!</span>
-            </th>
-            </tr>
-
-            <tr id="prompt-invalidQuery-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-invalidQuery-confirm" class="btn btn-default">OK</button>
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <!-- Empty query result -->
-        <script type="text/template" id="prompt-emptyQueryResult-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Info</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text">No results found for query.</span>
-            </th>
-            </tr>
-
-            <tr id="prompt-emptyQueryResult-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-emptyQueryResult-confirm" class="btn btn-default">OK</button>
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <!-- Invalid length limit warning -->
-        <script type="text/template" id="prompt-invalidLengthLimit-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Warning</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text" id="length-limit-constant">Length limit can be at most 3.</span>
-            </th>
-            </tr>
-
-            <tr id="prompt-invalidLengthLimit-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-invalidLengthLimit-confirm" class="btn btn-default">OK</button>
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <!-- Invalid  URI error -->
-        <script type="text/template" id="prompt-invalidURI-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Error</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text">Invalid URI!</span>
-            </th>
-            </tr>
-
-            <tr id="prompt-invalidURI-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-invalidURI-confirm" class="btn btn-default">OK</button>
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <!-- Invalid file warning -->
-        <script type="text/template" id="prompt-invalidFile-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Error</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text">Incorrect file format!</span>
-            </th>
-            </tr>
-
-            <tr id="prompt-invalidFile-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-invalidFile-confirm" class="btn btn-default">OK</button>
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <!-- Conversion error warning -->
-        <script type="text/template" id="prompt-fileConversionError-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                        <h4 class="modal-title">Error</h4>
-                    </div>
-                    <div class="modal-body">
-                        <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-                            <tbody>
-                            <tr>
-                                <th style="padding-left: 0px;" align="left">
-                                    <span class="add-on layout-text" id="file-conversion-error-message">Conversion failed!</span>
-                                </th>
-                            </tr>
-
-                            <tr id="prompt-fileConversionError-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-                                <td>
-                                </td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="modal-footer" style="text-align: center">
-                        <button id="prompt-fileConversionError-confirm" class="btn btn-default">OK</button>
-                    </div>
-                </div>
-            </div>
-        </script>
-        
-        <!-- Invalid Map Type Warning-->
-        <script type="text/template" id="prompt-errorInvalidType-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 335px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Error</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text centered">Invalid map type!</span>
-            </th>
-            </tr>
-
-            <tr id="prompt-errorInvalidType-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-errorInvalidType-confirm" class="btn btn-default">OK</button>
-            </div>
-            </div>
-            </div>
-        </script>
-        <!-- Error on PD2AF Conversion -->
-        <script type="text/template" id="prompt-errorPD2AF-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 335px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Error</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text centered"><%= message %></span>
-            </th>
-            </tr>
-
-            <tr id="prompt-errorPD2AF-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-errorPD2AF-confirm" class="btn btn-default">OK</button>
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <script type="text/template" id="prompt-sbmlConversionError-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 450px;">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                        <h4 class="modal-title">Error</h4>
-                    </div>
-                    <div class="modal-body">
-                        <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-                            <tbody>
-                            <tr>
-                                <td style="text-align: center;">
-                               
-                                    <span class="add-on layout-text" id="file-conversion-error-message"><b>Conversion failed!</b></span>                                    
-                                </td>
-                            </tr>
-                            <tr>
-                                
-                                <td style="text-align: center;">
-                                    <input id="sbml-coversion-user-agree" type="checkbox" class="layout-text" checked>
-                                    <span class="add-on layout-text" >I agree to sending this map for investigation of the conversion problem. </span>
-                                </td>
-                            </tr>
-                            
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="modal-footer" style="text-align: center">
-                        <button id="prompt-sbml-confirm" class="btn btn-default">OK</button>
-                    </div>
-                </div>
-            </div>
-        </script>
-        <!-- Invalid URL warning -->
-        <script type="text/template" id="prompt-invalidURL-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Error</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text">Invalid URL!</span>
-            </th>
-            </tr>
-
-            <tr id="prompt-invalidURL-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-invalidURL-confirm" class="btn btn-default">OK</button>
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <!-- Invalid edge warning -->
-        <script type="text/template" id="prompt-invalidEdge-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 335px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Error</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text centered">Invalid edge type! Refer to Legend menu for help.</span>
-            </th>
-            </tr>
-
-            <tr id="prompt-invalidEdge-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-invalidEdge-confirm" class="btn btn-default">OK</button>
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <!-- Invalid background image warning -->
-        <script type="text/template" id="prompt-invalidImage-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Error!</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text">Image file is invalid!</span>
-            </th>
-            </tr>
-
-            <tr id="prompt-invalidImage-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-invalidImage-confirm" class="btn btn-default">OK</button>
-            </div>
-            </div>
-            </div>
-        </script>
-
-        <script type="text/template" id="reaction-template-template">
-          <div class="modal-dialog sbgn-modal-dialog">
-            <div class="modal-content" style="display: inline-block"  id="template-modal-content">
-            <div class="modal-header" align="center">
-              <button type="button" class="close" data-dismiss="modal">&times;</button>
-              <h4 class="modal-title">SBGN Bricks</h4>
-            </div>
-            <div class="modal-body">
-            <div class="row"> 
-            <div class="col-md-8" align="center">
-            <table class="table-condensed layout-table dialog-table">
-            <tbody>
-
-            <tr align="center" style="height:40px;">
-            <td style="padding-bottom: 10px;" colspan=100%>
-            <select id="brick-type-select" class='sbgn-output-medium layout-text' name="reaction-template-type" align="center" valign="middle" style="width: fit-content;">
-            <option id="brick-type-metabolic-reaction" value="metabolic-reaction" selected>Metabolic Reaction</option>
-            <option id="brick-type-conversion" value="conversion">Post-Translational Modification</option>
-            <option id="brick-type-multimerization" value="multimerization">Multimerization</option>
-            <option id="brick-type-association" value="association">Association</option>
-            <option id="brick-type-dissociation" value="dissociation">Dissociation</option>
-            <option id="brick-type-degradation" value="degradation">Degradation</option>
-            <option id="brick-type-transcription" value="transcription">Transcription</option>
-            <option id="brick-type-translation" value="translation">Translation</option>
-            </select>
-            <!-- Display help image, leads to SBGN Bricks page of the selected brick type -->
-            <a id="sbgn-bricks-help-link" href="http://www.sbgnbricks.org/BKO/full/entry/all/BKO:0000585/" target="_blank">
-            <img id="sbgn-bricks-help" src="app/img/toolbar/quick-help.svg" title="Associated brick web page" style="width: 21px; margin-left: 5px; margin-bottom: 1px;"> 
-            </img>
-            </a>
-            </td>
-            
-            </tr>
-
-            <tr id="reaction-top-input-row" align="center" style="height: 40px; vertical-align: bottom;">   
-            <td colspan='100%'>
-                <div style="display: inline-block; margin-right: 25px;">
-                <input id="metabolic-reaction-reversible-checkbox" type='checkbox' class='layout-text' style="margin-right: 5px">Reversible</input> 
-                </div>
-                <div class="thin-blue-border" style="display: inline-block; padding: 5px;">
-                <input id="metabolic-reaction-regulator-checkbox" type='checkbox' class="add-on layout-text" align="center" valign="middle" style="margin-right: 5px">Regulator:</input> 
-                <input type='text' class='sbgn-input-medium layout-text' id='metabolic-reaction-regulator-name' value='' class="text-input-disabled" disabled></input>
-                
-                <select id="metabolic-reaction-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: fit-content' disabled>
-                <option value="macromolecule" selected> Macromolecule </option>
-                <option value="simple chemical"> Simple Chemical </option>
-                <option value="unspecified entity"> Unspecified Entity </option>
-                <option value="complex"> Complex </option>
-                </select>
-                <input id="metabolic-reaction-multimer-checkbox" type='checkbox' class="layout-text" style="margin-left: 10px;" disabled></input>
-                <label id="metabolic-reaction-multimer-label" for="metabolic-reaction-multimer-checkbox" class="checkbox-label-disabled">Multimer</label>
-                <input id="metabolic-reaction-multimer-cardinality" type="number" class="layout-text text-input-disabled" style="width: 30px;" value="2" disabled title="Integer value of at least 2"></input>
-                </div>
-            </td>
-            </tr>
-
-            <tr style="height: 30px; width: 100%;">
-            </tr>
-
-            <tr id="sbgn-brick-middle-row">
-            <td id ='reaction-template-left-td' align="center">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Input</div>
-            <table id='metabolic-reaction-input-table'>
-            <tr>
-            <td>
-            <input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='1' value=''></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: 120px'>
-            <option value="Simple Chemical" selected>Simple Chemical</option>
-            </td>
-            <td><img class='template-reaction-delete-button' width='16px' height='16px' name='1' src='app/img/toolbar/delete-simple.svg'/>
-            </td>
-            </tr>
-            <tr><td>
-            <img width="16px" height="16px" id='metabolic-reaction-add-input' src='app/img/add.svg' style="margin-left: 100%"/>
-            </td></tr>
-            </table>
-            </div>
-            </td>
-
-            <!-- Blank space between input and output -->
-            <td id='reaction-template-middle-td' style="width: 45px; vertical-align: top;" align="center"></td>
-
-            <td id ='reaction-template-right-td' align="center">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Output</div>
-            <table id='metabolic-reaction-output-table'>
-            <tr>
-            <td>
-            <input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='1' value=''></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: 120px'>
-            <option value="Simple Chemical" selected>Simple Chemical</option>
-            </td>
-            <td><img class='template-reaction-delete-button' width='16px' height='16px' name='1' src='app/img/toolbar/delete-simple.svg'/>
-            </td>
-            </tr>
-            <tr><td>
-            <img width="16px" height="16px" id='metabolic-reaction-add-output' src='app/img/add.svg' style="margin-left: 100%"/>
-            </td></tr>
-            </table>
-            </div>
-            </td>
-
-          <!--  <td style="width: 50px; margin-left: 50%;"></td> -->
-
-          <tr id="conversion-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">   
-            <td colspan='100%'>
-            <div class="thin-blue-border" style="padding: 10px; margin-bottom: 20px; width: fit-content;">
-            <input id="conversion-regulator-checkbox" type='checkbox' class="add-on layout-text" align="center" valign="middle" style="margin-right: 5px">Regulator:</input> 
-            <input type='text' class='sbgn-input-medium layout-text' id='conversion-regulator-name' value='' class="text-input-disabled" disabled></input>
-            
-            <select id="conversion-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: fit-content' disabled>
-            <option value="macromolecule" selected> Macromolecule </option>
-            <option value="simple chemical"> Simple Chemical </option>
-            <option value="unspecified entity"> Unspecified Entity </option>
-            <option value="complex"> Complex </option>
-            </select>
-            <input id="conversion-multimer-checkbox" type='checkbox' class="layout-text" style="margin-left:10px" disabled></input>
-            <label id="conversion-multimer-label" for="conversion-multimer-checkbox" class="checkbox-label-disabled">Multimer</label>
-            <input id="conversion-multimer-cardinality" type="number" class="layout-text text-input-disabled" style="width: 30px;" value="2" disabled title="Integer value of at least 2"></input>
-            </div>
-            <div class="thin-blue-border" style="padding: 10px; width: fit-content;">
-            <table id="conversion-modification-table">
-            <tr>
-            <td>
-            <select class='sbgn-output-medium layout-text conversion-type-dropdown'>
-            <option value="P-out">Phosphorylation</option>
-            <option value="P-in">Dephosphorylation</option>
-            <option value="Ub-out">Ubiquitination</option>
-            <option value="Ub-in">Deubiquitination</option>
-            <option value="OH-out">Hydroxilation</option>
-            <option value="OH-in">Dehydraxilation</option>
-            <option value="Ac-out">Acetylation</option>
-            <option value="Ac-in">Deacetylation</option>
-            <option value="G-out">Glycosylation</option>
-            <option value="G-in">Deglycosylation</option>
-            <option value="My-out">Myristoylation</option>
-            <option value="My-in">Demyristoylation</option>
-            <option value="Pa-out">Palmitoylation</option>
-            <option value="Pa-in">Depalmitoylation</option>
-            <option value="Pr-out">Prenylation</option>
-            <option value="Pr-in">Deprenylation</option>
-            <option value="S-out">Sulfation</option>
-            <option value="S-in">Desulfation</option>
-            <option value="Me-out">Methylation</option>
-            <option value="Me-in">Demethylation</option>
-            <option value="H-out">Protonation</option>
-            <option value="H-in">Deprotonation</option>
-            <option value="activation">Activation</option>
-            <option value="deactivation">Deactivation</option>
-            </select><label class="layout-text conversion-residue-input-label">Residue:</label><input type='text' class='sbgn-input-medium layout-text conversion-modification-residue-name small-right-margin'></input><img class='template-reaction-delete-button icon-small image-button-disabled-appearance' src='app/img/toolbar/delete-simple.svg'/> 
-            </td>
-              </tr>
-              <tr align="center"><td>
-              <img id='conversion-add-modification-button' src='app/img/add.svg' class="icon-small" style="cursor: pointer;"/>
-              </td></tr>
-              </table>  
-              </div>
-            </td>
-            </tr>
-
-            <td id='conversion-template-left-td' class="hide">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Input</div>
-            <table id='conversion-input-table'>
-            <tr>
-            <td>
-            <input id='conversion-input-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='1' value=''></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: 120px'>
-            <option value="Macromolecule"> Macromolecule </option>
-            </td>
-            </tr>
-            </table>
-            </div>
-            </td>
-
-            <!-- Blank space between input and output
-            <td style="width: 50px; margin-left: 50%;"></td> -->
-
-
-            <td id='conversion-template-right-td' class="hide">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Output</div>
-            <table id='conversion-output-table'>
-            <tr>
-            <td>
-            <input id='conversion-output-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='1' value=''></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: 120px'>
-            <option value="Macromolecule"> Macromolecule </option>
-            </td>
-            </tr>
-            </table>
-            </div>
-            </td>
-
-            <tr id="multimerization-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">   
-            <td colspan='100%'>
-            <div class="thin-blue-border" style="padding: 10px; margin-bottom: 20px; width: fit-content;">
-            <input id="multimerization-regulator-checkbox" type='checkbox' class="add-on layout-text" align="center" valign="middle" style="margin-right: 5px">Regulator:</input> 
-            <input id='multimerization-regulator-name' type='text' class='sbgn-input-medium layout-text' value='' class="text-input-disabled" disabled></input>
-            
-            <select id="multimerization-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content' disabled>
-            <option value="macromolecule" selected>Macromolecule</option>
-            <option value="simple chemical">Simple Chemical</option>
-            <option value="unspecified entity">Unspecified Entity</option>
-            <option value="complex">Complex</option>
-            </select>
-            <input id="multimerization-multimer-checkbox" type='checkbox' class="layout-text" style="margin-left: 5px;" disabled></input>
-            <label id="multimerization-multimer-label" for="multimerization-multimer-checkbox" class="checkbox-label-disabled">Multimer</label>
-            <input id="multimerization-multimer-cardinality" type="number" class="layout-text text-input-disabled" style="width: 30px;" value="2" disabled title="Integer value of at least 2"></input>
-            <select id="multimerization-regulator-edge-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;' disabled>
-            <option value="stimulation" selected>Stimulation</option>
-            <option value="inhibition">Inhibition</option>
-            </select>
-            </div>
-            </td>
-            </tr>
-
-            <td id='multimerization-template-left-td' class="hide">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Input</div>
-            <table id='multimerization-input-table'>
-            <tr>
-            <td>
-            <input id='multimerization-input-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='1' value=''></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: 120px'>
-            <option value="Macromolecule"> Macromolecule </option>
-            </td>
-            </tr>
-            </table>
-            </div>
-            </td>
-
-            <!-- Blank space between input and output
-            <td style="width: 50px; margin-left: 50%;"></td> -->
-
-
-            <td id='multimerization-template-right-td' class="hide">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Output</div>
-            <table id='multimerization-output-table'>
-            <tr>
-            <td>
-            <input id='multimerization-output-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='1' value=''></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: 120px'>
-            <option value="Macromolecule"> Macromolecule </option>
-            </td>
-            </tr>
-            </table>
-            </div>
-            </td>
-
-            <tr id="association-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">   
-            <td colspan='100%'>
-            <div class="thin-blue-border" style="padding: 10px; margin-bottom: 20px; width: fit-content;">
-            <input id="association-regulator-checkbox" type='checkbox' class="add-on layout-text" align="center" valign="middle" style="margin-right: 5px">Regulator:</input> 
-            <input id='association-regulator-name' type='text' class='sbgn-input-medium layout-text' value='' class="text-input-disabled" disabled></input>
-            
-            <select id="association-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content' disabled>
-            <option value="macromolecule" selected>Macromolecule</option>
-            <option value="simple chemical">Simple Chemical</option>
-            <option value="unspecified entity">Unspecified Entity</option>
-            <option value="complex">Complex</option>
-            </select>
-            <input id="association-multimer-checkbox" type='checkbox' class="layout-text" style="margin-left: 5px;" disabled></input>
-            <label id="association-multimer-label" for="association-multimer-checkbox" class="checkbox-label-disabled">Multimer</label>
-            <input id="association-multimer-cardinality" type="number" class="layout-text text-input-disabled" style="width: 30px;" value="2" disabled title="Integer value of at least 2"></input>
-            <select id="association-regulator-edge-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;' disabled>
-            <option value="stimulation" selected>Stimulation</option>
-            <option value="inhibition">Inhibition</option>
-            </select>
-            </div>
-            </td>
-            </tr>
-
-            <td id='association-template-left-td' class="hide">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Input</div>
-            <table id='association-input-table'>
-            <tr>
-            <td>
-            <input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' value=''></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
-            <option value="Macromolecule">Macromolecule</option>
-            </td>
-            <td><img class='template-reaction-delete-button icon-small image-button-disabled-appearance' src='app/img/toolbar/delete-simple.svg'/>
-            </td>
-            </tr>
-            <tr>
-            <td>
-            <input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' value=''></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
-            <option value="Macromolecule">Macromolecule</option>
-            </td>
-            <td><img class='template-reaction-delete-button icon-small image-button-disabled-appearance' src='app/img/toolbar/delete-simple.svg'/>
-            </td>
-            </tr>
-            <tr align="center"><td colspan="100%">
-            <img id='association-add-input-button' src='app/img/add.svg' class="icon-small" style="cursor: pointer;"/>
-            </td></tr>
-            </table>
-            
-            </div>
-            </td>
-
-            <!-- Blank space between input and output
-            <td style="width: 50px; margin-left: 50%;"></td> -->
-
-
-            <td id='association-template-right-td' class="hide">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Output</div>
-            <table id='association-output-table'>
-            <tr>
-            <td>
-            <input id='association-complex-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' value=''></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
-            <option value="Complex">Complex</option>
-            </td>
-            </tr>
-            </table>
-            </div>
-            </td>
-
-            <tr id="dissociation-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">   
-            <td colspan='100%'>
-            <div class="thin-blue-border" style="padding: 10px; margin-bottom: 20px; width: fit-content;">
-            <input id="dissociation-regulator-checkbox" type='checkbox' class="add-on layout-text" align="center" valign="middle" style="margin-right: 5px">Regulator:</input> 
-            <input id='dissociation-regulator-name' type='text' class='sbgn-input-medium layout-text' value='' class="text-input-disabled" disabled></input>
-            
-            <select id="dissociation-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content' disabled>
-            <option value="macromolecule" selected>Macromolecule</option>
-            <option value="simple chemical">Simple Chemical</option>
-            <option value="unspecified entity">Unspecified Entity</option>
-            <option value="complex">Complex</option>
-            </select>
-            <input id="dissociation-multimer-checkbox" type='checkbox' class="layout-text" style="margin-left: 5px;" disabled></input>
-            <label id="dissociation-multimer-label" for="dissociation-multimer-checkbox" class="checkbox-label-disabled">Multimer</label>
-            <input id="dissociation-multimer-cardinality" type="number" class="layout-text text-input-disabled" style="width: 30px;" value="2" disabled title="Integer value of at least 2"></input>
-            <select id="dissociation-regulator-edge-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;' disabled>
-            <option value="stimulation" selected>Stimulation</option>
-            <option value="inhibition">Inhibition</option>
-            </select>
-            </div>
-            </td>
-            </tr>
-
-            <td id='dissociation-template-left-td' class="hide">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Input</div>
-            <table id='dissociation-input-table'>
-            <tr>
-            <td>
-            <input id='dissociation-complex-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' value=''></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
-            <option value="Complex">Complex</option>
-            </td>
-            </tr>
-            </table>
-            </div>
-            </td>
-
-            <!-- Blank space between input and output
-            <td style="width: 50px; margin-left: 50%;"></td> -->
-
-
-            <td id='dissociation-template-right-td' class="hide">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Output</div>
-            <table id='dissociation-output-table'>
-            <tr>
-            <td>
-            <input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' value=''></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
-            <option value="Macromolecule">Macromolecule</option>
-            </td>
-            <td><img class='template-reaction-delete-button icon-small image-button-disabled-appearance' src='app/img/toolbar/delete-simple.svg'/>
-            </td>
-            </tr>
-            <tr>
-            <td>
-            <input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' value=''></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
-            <option value="Macromolecule">Macromolecule</option>
-            </td>
-            <td><img class='template-reaction-delete-button icon-small image-button-disabled-appearance' src='app/img/toolbar/delete-simple.svg'/>
-            </td>
-            </tr>
-            <tr align="center"><td colspan="100%">
-            <img id='dissociation-add-output-button' src='app/img/add.svg' class="icon-small" style="cursor: pointer;"/>
-            </td></tr>
-            </table>
-            
-            </div>
-            </td>
-
-            <tr id="degradation-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">   
-            <td colspan='100%'>
-            <div class="thin-blue-border" style="padding: 10px; margin-top: 40px; width: fit-content;">
-            <label for="degradation-input-name" class="layout-text" style="font: inherit;">Input:</label>
-            <input id="degradation-input-name" type='text' class="template-reaction-textbox sbgn-input-medium layout-text"></input>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
-            <option value="Macromolecule">Macromolecule</option>
-            </div>
-            </td>
-            </tr>
-
-            <td id='degradation-template-left-td' class="hide">
-            </td>
-
-            <!-- Blank space between input and output
-            <td style="width: 50px; margin-left: 50%;"></td> -->
-
-
-            <td id='degradation-template-right-td' class="hide">
-            </td>
-
-            <tr id="transcription-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">   
-            <td colspan='100%'>
-            <div class="thin-blue-border" style="padding: 10px; margin-bottom: 20px; width: fit-content;">
-            <label for='transcription-regulator-name' class="layout-text" style="font: inherit;"></label>
-            <input id='transcription-regulator-name' type='text' class='sbgn-input-medium layout-text' value='' class="text-input-enabled"></input>
-            
-            <select id="transcription-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;'>
-            <option value="macromolecule" selected>Nucleic Acid Feature</option>
-            </select>
-            <select id="transcription-regulator-edge-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;'>
-            <option value="stimulation" selected>Necessary Stimulation</option>
-            </select>
-            </div>
-            </td>
-            </tr>
-
-            <td id='transcription-template-left-td' class="hide">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Input</div>
-            <table id='transcription-input-table'>
-            <tr>
-            <td>
-            <input id='transcription-input-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' style="cursor: not-allowed;" disabled></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content'>
-            <option value="empty-set">Empty Set</option>
-            </td>
-            </tr>
-            </table>
+                    <!-- AF Edges End -->
+
+                    <!-- SIF Start -->
+                    <div class="panel">
+                      <div
+                        id="SIF-palette-heading"
+                        class="panel-heading collapsed"
+                        data-toggle="collapse"
+                        data-target="#expand-collapse-sif-nodes-palette"
+                      >
+                        <p class="panel-title accordion-toggle">SIF</p>
+                      </div>
+                      <div
+                        id="expand-collapse-sif-nodes-palette"
+                        class="panel-collapse collapse"
+                      >
+                        <div class="panel-body">
+                          <div
+                            id="sif-node-palette"
+                            class="element-palette node-palette"
+                          >
+                            <div class="paletteWrapper">
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/macromolecule.svg"
+                                  language="SIF"
+                                  value="SIF-macromolecule"
+                                  title="Macromolecule"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/simple-chemical.svg"
+                                  language="SIF"
+                                  value="SIF-simple-chemical"
+                                  title="Simple Chemical"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="panel-body" style="padding-bottom: 0px">
+                          <div
+                            id="sif-edge-palette"
+                            class="element-palette edge-palette"
+                          >
+                            <div class="paletteWrapper">
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/controls-state-change-of.svg"
+                                  language="SIF"
+                                  value="controls-state-change-of"
+                                  title="Controls State Change of"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/controls-transport-of.svg"
+                                  language="SIF"
+                                  value="controls-transport-of"
+                                  title="Controls Transport of"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/controls-phosphorylation-of.svg"
+                                  language="SIF"
+                                  value="controls-phosphorylation-of"
+                                  title="Controls Phosphorylation of"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/controls-expression-of.svg"
+                                  language="SIF"
+                                  value="controls-expression-of"
+                                  title="Controls Expression of"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/catalysis-precedes.svg"
+                                  language="SIF"
+                                  value="catalysis-precedes"
+                                  title="Catalysis Precedes"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/in-complex-with.svg"
+                                  language="SIF"
+                                  value="in-complex-with"
+                                  title="In Complex With"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/interacts-with.svg"
+                                  language="SIF"
+                                  value="interacts-with"
+                                  title="Interacts With"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/neighbor-of.svg"
+                                  language="SIF"
+                                  value="neighbor-of"
+                                  title="Neighbor of"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/consumption-controled-by.svg"
+                                  language="SIF"
+                                  value="consumption-controled-by"
+                                  title="Consumption Controled By"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/controls-production-of.svg"
+                                  language="SIF"
+                                  value="controls-production-of"
+                                  title="Controls Production of"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/controls-transport-of-chemical.svg"
+                                  language="SIF"
+                                  value="controls-transport-of-chemical"
+                                  title="Controls Transport of Chemical"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/chemical-affects.svg"
+                                  language="SIF"
+                                  value="chemical-affects"
+                                  title="Chemical Affects"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/reacts-with.svg"
+                                  language="SIF"
+                                  value="reacts-with"
+                                  title="Reacts With"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/used-to-produce.svg"
+                                  language="SIF"
+                                  value="used-to-produce"
+                                  title="Used to Produce"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/activates.svg"
+                                  language="SIF"
+                                  value="activates"
+                                  title="Activates"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/inhibits.svg"
+                                  language="SIF"
+                                  value="inhibits"
+                                  title="Inhibits"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/phosphorylates.svg"
+                                  language="SIF"
+                                  value="phosphorylates"
+                                  title="Phosphorylates"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/dephosphorylates.svg"
+                                  language="SIF"
+                                  value="dephosphorylates"
+                                  title="Dephosphorylates"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/upregulates-expression.svg"
+                                  language="SIF"
+                                  value="upregulates-expression"
+                                  title="Upregulates Expression"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/downregulates-expression.svg"
+                                  language="SIF"
+                                  value="downregulates-expression"
+                                  title="Downregulates Expression"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/acetylates.svg"
+                                  language="SIF"
+                                  value="acetylates"
+                                  title="Acetylates"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/deacetylates.svg"
+                                  language="SIF"
+                                  value="deacetylates"
+                                  title="Deacetylates"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/methylates.svg"
+                                  language="SIF"
+                                  value="methylates"
+                                  title="Methylates"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/demethylates.svg"
+                                  language="SIF"
+                                  value="demethylates"
+                                  title="Demethylates"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/activates-gtpase.svg"
+                                  language="SIF"
+                                  value="activates-gtpase"
+                                  title="Activates Gtpase"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/inhibits-gtpase.svg"
+                                  language="SIF"
+                                  value="inhibits-gtpase"
+                                  title="Inhibits Gtpase"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <!-- SIF End -->
+
+                    <!-- SBML Starts -->
+                    <div class="panel">
+                      <div
+                        id="SBML-palette-heading"
+                        class="panel-heading collapsed"
+                        data-toggle="collapse"
+                        data-target="#expand-collapse-sbml-nodes-palette"
+                      >
+                        <p class="panel-title accordion-toggle">SBML</p>
+                      </div>
+                      <div
+                        id="expand-collapse-sbml-nodes-palette"
+                        class="panel-collapse collapse"
+                      >
+                        <div class="panel-body">
+                          <div
+                            id="sbml-node-palette"
+                            class="element-palette node-palette"
+                          >
+                            <div class="paletteWrapper">
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/gene.svg"
+                                  language="SBML"
+                                  value="gene"
+                                  title="Gene"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/RNA.svg"
+                                  language="SBML"
+                                  value="rna"
+                                  title="RNA"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/simple-molecule.svg"
+                                  language="SBML"
+                                  value="simple-molecule"
+                                  title="Simple Molecule"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/unknown-molecule.svg"
+                                  language="SBML"
+                                  value="unknown-molecule"
+                                  title="Unknown Molecule"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/phenotype-sbml.svg"
+                                  language="SBML"
+                                  value="phenotype-sbml"
+                                  title="Phenotype"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/drug.svg"
+                                  language="SBML"
+                                  value="drug"
+                                  title="Drug"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/protein.svg"
+                                  language="SBML"
+                                  value="protein"
+                                  title="Protein"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/truncated-protein.svg"
+                                  language="SBML"
+                                  value="truncated-protein"
+                                  title="Truncated Protein"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/ion-channel.svg"
+                                  language="SBML"
+                                  value="ion-channel"
+                                  title="Ion Channel"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/receptor.svg"
+                                  language="SBML"
+                                  value="receptor"
+                                  title="Receptor"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/ion.svg"
+                                  language="SBML"
+                                  value="ion"
+                                  title="Ion"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/process.svg"
+                                  language="SBML"
+                                  value="process"
+                                  title="Process"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/omitted-process.svg"
+                                  language="SBML"
+                                  value="omitted-process"
+                                  title="Omitted Process"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/uncertain-process.svg"
+                                  language="SBML"
+                                  value="uncertain-process"
+                                  title="Uncertain Process"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/truncated-process.svg"
+                                  language="SBML"
+                                  value="truncated-process"
+                                  title="Truncated Process"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/dissociation.svg"
+                                  language="SBML"
+                                  value="dissociation"
+                                  title="Dissociation"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/degradation.svg"
+                                  language="SBML"
+                                  value="degradation"
+                                  title="Degradation"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/and.svg"
+                                  language="SBML"
+                                  value="and"
+                                  title="AND"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/or.svg"
+                                  language="SBML"
+                                  value="or"
+                                  title="OR"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/not.svg"
+                                  language="SBML"
+                                  value="not"
+                                  title="NOT"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/association.svg"
+                                  language="SBML"
+                                  value="association"
+                                  title="Association"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/unknown-logical-operator.svg"
+                                  language="SBML"
+                                  value="unknown-logical-operator"
+                                  title="Unknown Logical Operator"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/complex-sbml.svg"
+                                  language="SBML"
+                                  value="complex-sbml"
+                                  title="Complex"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/nodes/compartment.svg"
+                                  language="SBML"
+                                  value="compartment"
+                                  title="Compartment"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="panel-body" style="padding-bottom: 0px">
+                          <div
+                            id="sbml-edge-palette"
+                            class="element-palette edge-palette"
+                          >
+                            <div class="paletteWrapper">
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/consumption.svg"
+                                  language="SBML"
+                                  value="consumption"
+                                  title="Consumption"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/inhibition.svg"
+                                  language="SBML"
+                                  value="inhibition"
+                                  title="Inhibition"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/production.svg"
+                                  language="SBML"
+                                  value="production"
+                                  title="Production"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/modulation.svg"
+                                  language="SBML"
+                                  value="modulation"
+                                  title="Modulation"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/stimulation.svg"
+                                  language="SBML"
+                                  value="stimulation"
+                                  title="Stimulation"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/catalysis.svg"
+                                  language="SBML"
+                                  value="catalysis"
+                                  title="Catalysis"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/trigger.svg"
+                                  language="SBML"
+                                  value="trigger"
+                                  title="Trigger"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/transport.svg"
+                                  language="SBML"
+                                  value="transport"
+                                  title="Transport"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/unknown-inhibition.svg"
+                                  language="SBML"
+                                  value="unknown inhibition"
+                                  title="Unknown inhibition"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/unknown-catalysis.svg"
+                                  language="SBML"
+                                  value="unknown catalysis"
+                                  title="Unknown catalysis"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/transcription_consumption.svg"
+                                  language="SBML"
+                                  value="transcription-consumption"
+                                  title="Transcription Consumption"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/transcription_production.svg"
+                                  language="SBML"
+                                  value="transcription-production"
+                                  title="Transcription Production"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/translation-consumption.svg"
+                                  language="SBML"
+                                  value="translation-consumption"
+                                  title="Translation Consumption"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/translation-production.svg"
+                                  language="SBML"
+                                  value="translation-production"
+                                  title="Translation Production"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="panel-body" style="padding-bottom: 0px">
+                          <div
+                            id="sbml-edge-palette"
+                            class="element-palette edge-palette"
+                          >
+                            <div class="paletteWrapper">
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/positive-influence-sbml.svg"
+                                  language="SBML"
+                                  value="positive-influence-sbml"
+                                  title="Positive Influence"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/negative-influence.svg"
+                                  language="SBML"
+                                  value="negative-influence"
+                                  title="Negative Influence"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/reduced-modulation.svg"
+                                  language="SBML"
+                                  value="reduced-modulation"
+                                  title="Reduced Modulation"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/reduced-stimulation.svg"
+                                  language="SBML"
+                                  value="reduced-stimulation"
+                                  title="Reduced Stimulation"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/reduced-trigger.svg"
+                                  language="SBML"
+                                  value="reduced-trigger"
+                                  title="Reduced Trigger"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/unknown-negative-influence.svg"
+                                  language="SBML"
+                                  value="unknown-negative-influence"
+                                  title="Unknown Negative Influence"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/unknown-positive-influence.svg"
+                                  language="SBML"
+                                  value="unknown-positive-influence"
+                                  title="Unknown Positive Influence"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/unknown-reduced-stimulation.svg"
+                                  language="SBML"
+                                  value="unknown-reduced-stimulation"
+                                  title="Unknown Reduced Stimulation"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/unknown-reduced-modulation.svg"
+                                  language="SBML"
+                                  value="unknown-reduced-modulation"
+                                  title="Unknown Reduced Modulation"
+                                />
+                              </div>
+                              <div class="paletteCol">
+                                <img
+                                  src="app/img/edges/unknown-reduced-trigger.svg"
+                                  language="SBML"
+                                  value="unknown-reduced-trigger"
+                                  title="Unknown Reduced Trigger"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <!-- SBML End -->
+                  </div>
+                </div>
+                <div id="sbgn-inspector-console" class="tab-pane fade">
+                  <div class="panel-group">
+                    <div class="panel">
+                      <div
+                        class="panel-heading"
+                        data-toggle="collapse"
+                        data-target="#sbgn-inspector-console-panel-group"
+                      >
+                        <p class="panel-title accordion-toggle">
+                          Validation Results
+                        </p>
+                      </div>
+                      <div
+                        id="sbgn-inspector-console-panel-group"
+                        class="panel-collapse collapse in"
+                      >
+                        <div id="sbgn-inspector-tab-validation-container"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
-            </td>
-
-            <!-- Blank space between input and output
-            <td style="width: 50px; margin-left: 50%;"></td> -->
-
-
-            <td id='transcription-template-right-td' class="hide">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Output</div>
-            <table id='transcription-output-table'>
-            <tr>
-            <td>
-            <input id='transcription-output-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text'></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content;'>
-            <option value="Macromolecule">Nucleic Acid Feature</option>
-            </td>
-            </tr>
-            </table>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div id="network-tabs-list-container" class="read-mode-off">
+      <ul id="network-tabs-list" class="nav nav-tabs"></ul>
+    </div>
+
+    <div
+      id="layout-properties-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- sbgn layout table will be shown here -->
+    </div>
+
+    <div id="biogene-container" style="display: none"></div>
+
+    <div id="chemical-container" style="display: none"></div>
+
+    <div
+      id="query-neighborhood-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- neighborhood query table will be shown here-->
+    </div>
+
+    <div
+      id="query-pathsbetween-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- paths between query table will be shown here-->
+    </div>
+
+    <div
+      id="query-pathsfromto-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- paths from to query table will be shown here-->
+    </div>
+
+    <div
+      id="query-commonstream-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- common stream query table will be shown here-->
+    </div>
+
+    <div
+      id="query-pathsbyURI-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- paths by URI query table will be shown here-->
+    </div>
+
+    <div id="prompt-save-table" tabindex="-1" class="modal fade" role="dialog">
+      <!-- sbgn properties table will be shown here-->
+    </div>
+
+    <div id="file-save-table" tabindex="-1" class="modal fade" role="dialog">
+      <!-- save dialog will be shown here-->
+    </div>
+
+    <div
+      id="user-preferences-save-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- save dialog will be shown here-->
+    </div>
+    <div
+      id="user-preferences-load-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- load dialog will be shown here-->
+    </div>
+
+    <div
+      id="prompt-confirmation-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- confirmation dialog will be shown here-->
+    </div>
+
+    <div
+      id="prompt-mapType-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+
+    <div
+      id="prompt-invalidQuery-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+
+    <div
+      id="prompt-requestTimedOut-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+
+    <div
+      id="prompt-emptyQueryResult-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+
+    <div
+      id="prompt-invalidLengthLimit-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+
+    <div
+      id="prompt-invalidURI-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+
+    <div
+      id="prompt-invalidFile-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+
+    <div
+      id="prompt-fileConversionError-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+    <div
+      id="prompt-sbmlConversionError-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+
+    <div
+      id="prompt-invalidURL-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+
+    <div
+      id="prompt-invalidImage-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+
+    <div
+      id="prompt-invalidEdge-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+    <div
+      id="prompt-errorInvalidType-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+    <div
+      id="prompt-errorPD2AF-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- map type change confirmation dialog will be shown here-->
+    </div>
+
+    <div id="sbgn-bricks-table" tabindex="-1" class="modal fade" role="dialog">
+      <!-- reaction templatequery table will be shown here -->
+    </div>
+
+    <div
+      id="grid-properties-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- grid properties table will be shown here -->
+    </div>
+
+    <div
+      id="font-properties-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- sbgn properties table will be shown here -->
+    </div>
+
+    <div
+      id="prompt-invalidSchematronFile-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- sbgn schematron validation message dialog will be shown here -->
+    </div>
+
+    <div
+      id="infobox-properties-table"
+      tabindex="-1"
+      class="modal fade"
+      role="dialog"
+    >
+      <!-- infobox properties table will be shown here -->
+    </div>
+
+    <div id="box"></div>
+
+    <textarea id="node-label-textbox" rows="1"></textarea>
+
+    <!-- templates -->
+    <div id="PD_legend_modal" class="modal fade" tabindex="-1" role="dialog">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 540px">
+        <div class="modal-content">
+          <div class="modal-body">
+            <div class="sbgn-frame" style="text-align: center">
+              <h2 class="sbgn-text">Process Description</h2>
+              <img
+                src="app/img/pd-legend.svg"
+                alt=""
+                class="centered img-responsive sbgn-legend"
+              />
+              <p
+                class="address-text"
+                style="margin-top: 20px; margin-bottom: 10px"
+              >
+                <a
+                  href="https://sbgn.github.io/referencecards"
+                  target="_blank"
+                  rel="nofollow"
+                  >Reference Card</a
+                >
+                -
+                <a
+                  href="https://sbgn.github.io/specifications"
+                  target="_blank"
+                  rel="nofollow"
+                  >Specifications</a
+                >
+              </p>
             </div>
-            </td>
-
-            <tr id="translation-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">   
-            <td colspan='100%'>
-            <div class="thin-blue-border" style="padding: 10px; margin-bottom: 20px; width: fit-content;">
-            <label for='translation-regulator-name' class="layout-text" style="font: inherit;"></label>
-            <input id='translation-regulator-name' type='text' class='sbgn-input-medium layout-text' value='' class="text-input-enabled"></input>
-            
-            <select id="translation-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;'>
-            <option value="macromolecule" selected>Nucleic Acid Feature</option>
-            </select>
-            <select id="translation-regulator-edge-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;'>
-            <option value="stimulation" selected>Necessary Stimulation</option>
-            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="AF_legend_modal" class="modal fade" tabindex="-1" role="dialog">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 600px">
+        <div class="modal-content">
+          <div class="modal-body">
+            <div class="sbgn-frame" style="text-align: center">
+              <h2 class="sbgn-text">Activity Flow</h2>
+              <img
+                src="app/img/af-legend.svg"
+                alt=""
+                class="centered img-responsive sbgn-legend"
+              />
+              <p
+                class="address-text"
+                style="margin-top: 20px; margin-bottom: 10px"
+              >
+                <a
+                  href="https://sbgn.github.io/referencecards"
+                  target="_blank"
+                  rel="nofollow"
+                  >Reference Card</a
+                >
+                -
+                <a
+                  href="https://sbgn.github.io/specifications"
+                  target="_blank"
+                  rel="nofollow"
+                  >Specifications</a
+                >
+              </p>
             </div>
-            </td>
-            </tr>
-
-            <td id='translation-template-left-td' class="hide">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Input</div>
-            <table id='translation-input-table'>
-            <tr>
-            <td>
-            <input id='translation-input-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' style="cursor: not-allowed;" disabled></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content'>
-            <option value="empty set">Empty Set</option>
-            </td>
-            </tr>
-            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="SIF_legend_modal" class="modal fade" tabindex="-1" role="dialog">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 750px">
+        <div class="modal-content">
+          <div class="modal-body" style="text-align: center">
+            <div class="sbgn-frame">
+              <h2 class="sbgn-text">Simple Interaction Format</h2>
+              <img
+                src="app/img/sif-legend.svg"
+                alt=""
+                class="centered img-responsive sbgn-legend"
+              />
+              <p
+                class="address-text"
+                style="margin-top: 20px; margin-bottom: 10px"
+              >
+                <a
+                  href="http://www.pathwaycommons.org/pc2/formats#sif_relations"
+                  target="_blank"
+                  rel="nofollow"
+                  >SIF Relations</a
+                >
+              </p>
             </div>
-            </td>
-
-            <!-- Blank space between input and output
-            <td style="width: 50px; margin-left: 50%;"></td> -->
-
-
-            <td id='translation-template-right-td' class="hide">
-            <div class="thin-blue-border">
-            <div style="margin-bottom: 5px;">Output</div>
-            <table id='translation-output-table'>
-            <tr>
-            <td>
-            <input id='translation-output-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text'></input>
-            </td>
-            <td>
-            <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content;'>
-            <option value="Macromolecule">Macromolecule</option>
-            </td>
-            </tr>
-            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="SBML_legend_modal" class="modal fade" tabindex="-1" role="dialog">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 600px">
+        <div class="modal-content">
+          <div class="modal-body" style="text-align: center">
+            <div class="sbgn-frame">
+              <h2 class="sbgn-text">Systems Biology Markup Language</h2>
+              <img
+                src="app/img/sbml-legend.svg"
+                alt=""
+                class="centered img-responsive sbgn-legend"
+              />
+              <p
+                class="address-text"
+                style="margin-top: 20px; margin-bottom: 10px"
+              >
+                <a
+                  href="https://www.celldesigner.org/help/images/components42.png"
+                  target="_blank"
+                  rel="nofollow"
+                  >SBML Table</a
+                >
+              </p>
             </div>
-            </td>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="about_modal" class="modal fade" tabindex="-1" role="dialog">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 360px">
+        <div class="modal-content">
+          <div class="modal-body">
+            <div class="sbgn-frame">
+              <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 4.0.0
+                      </p>
+                    </td>
+                  </tr>
 
-            </tr>
-            <tr id="conversion-bottom-row" class="hide">
-            <td colspan="100%" align="center">
-            <input id="conversion-macromolecule-multimer-checkbox" type="checkbox" style="margin-right: 5px;">Multimer</input>
-            <input id="conversion-macromolecule-multimer-cardinality" type="number" class="layout-text text-input-disabled" style="margin-left: 5px; width: 30px;" value="2" disabled title="Integer value of at least 2"></input>
-            </td>
-            </tr>
-            <tr id="multimerization-bottom-row" class="hide">
-            <td colspan="100%" align="center">
-            <label for="multimerization-macromolecule-multimer-cardinality" class="layout-text" style="font: inherit;">Multimer cardinality:</label>
-            <input id="multimerization-macromolecule-multimer-cardinality" type="number" class="layout-text" style="margin-left: 5px; width: 30px;" value="2" title="Integer value of at least 2"></input>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="col-md-4">
-            <div style="text-align:center; padding: 5px;">
-            <select id="metabolic-reaction-orientation-select" class="sbgn-output-medium layout-text" id="brick-orientation-input">
-                <option value="horizontal">Left-to-right</option>
-                <option value="vertical">Top-to-bottom</option>
-            </select>
-            </div>
-            <div id="sbgn-brick-preview-cy-div" class="thin-blue-border cy-preview-area"></div>
-            </div>
-            </div>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="create-sbgn-brick" class="btn btn-default">Create</button>
-            <button id="cancel-sbgn-brick" class="btn btn-default">Cancel</button>
-            </div>
-            </div>
-            </div>
-        </script>
+                  <tr>
+                    <td>
+                      <img
+                        src="app/img/newt-logo.png"
+                        alt=""
+                        class="centered img-responsive"
+                        style="margin-bottom: 10px"
+                      />
+                    </td>
+                  </tr>
 
-        <script type="text/template" id="grid-properties-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 573px;">
-			<div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Grid  and Guidelines Properties</h4>
+                  <tr>
+                    <td>
+                      <p class="address-text marg">
+                        i-Vis Information Visualization Research Lab, Ankara,
+                        Turkey,
+                      </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
+                      </p>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p class="address-text marg">
+                        <a href="mailto:ivisatbilkent@gmail.com" target="_top"
+                          >ivisatbilkent@gmail.com</a
+                        >
+                      </p>
+                      <p class="address-text">
+                        <a href="http://newteditor.org/" target="_blank"
+                          >http://newteditor.org/</a
+                        >
+                      </p>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table property-table" style="padding-bottom: 4px;">
-            <tbody>
-	    <tr> <th> Grid </th> </tr>
-            <tr>
-            <td style="padding-right: 20px;">
-            <input id="show-grid" type="checkbox" class="layout-text" <% if (showGrid){ %> checked<%}%>>
-            <span class="add-on layout-text"> Show Grid </span>
-            </td>
-            <td style="padding-right: 25px;">
-            <span class="add-on layout-text"> Size </span>
-            <input id="grid-size" type="text" min="5" class="sbgn-input-small layout-text integer-input" value= <%= gridSize %> >
-            </td>
-            <td style="padding-right: 25px;">
-            <span class="add-on layout-text"> Color </span>
-            <input id="grid-color" type="color" class="sbgn-input-small layout-text" value= <%= gridColor %> >
-            </td>
-            <td>
-            <input id="auto-resize-nodes" type="checkbox" class="layout-text" <% if (autoResizeNodes){ %> checked<%}%>>
-            <span class="add-on layout-text"> Auto  Resize Nodes </span>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            <table class="table-condensed layout-table dialog-table property-table" style="padding-bottom: 4px;">
-            <tbody>
-			<tr> <th colspan="100%"> Snap Policy </th> </tr>
-			<tr>
-            <td style="padding-right: 10px">
-            <input id="no-snap" type="radio" name="snap-policy" class="layout-text" <% if (!snapToGridDuringDrag && !snapToGridOnRelease && !snapToAlignmentLocationOnRelease && !snapToAlignmentLocationDuringDrag){ %> checked<%}%>>
-            <span class="add-on layout-text"> No Snap </span>
-            </td>
-            <td style="padding-left: 10px; padding-right: 5px;">
-            <span> Snap to Grid: </span>
-            </td>
-            <td style="padding-left: 0px; padding-right: 10px;">
-            <select id="snap-to-grid">
-              <option value="disabled" <% if (!snapToGridDuringDrag && !snapToGridOnRelease){ %> selected<% }%> > Disabled </option>
-              <option value="onRelease" <% if (snapToGridOnRelease){ %> selected<% }%> > On Release </option>
-              <option value="duringDrag" <% if (snapToGridDuringDrag){ %> selected<% }%> > During Drag </option>
-            </select>
-            </td>
-            <td style="padding-left: 10px; padding-right: 5px;">
-            <span> Snap to Alignment Location: </span>
-            </td>
-            <td style="padding-left: 0px;">
-            <select id="snap-to-alignment-location">
-              <option value="disabled" <% if (!snapToAlignmentLocationOnRelease && !snapToAlignmentLocationDuringDrag){ %> selected<% }%> > Disabled </option>
-              <option value="onRelease" <% if (snapToAlignmentLocationOnRelease){ %> selected<% }%> > On Release </option>
-              <option value="duringDrag" <% if (snapToAlignmentLocationDuringDrag){ %> selected<% }%> > During Drag </option>
-            </select>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            <table class="table-condensed layout-table dialog-table property-table" style="padding-bottom: 4px !important;">
-            <tbody>
-            <tr> <th colspan="100%"> Alignment Guidelines </th> </tr>
-            <tr>
-            <td style="padding-bottom: 20px !important; width: 140px;">
-            <span class="add-on layout-text"> Reference Guideline</span>
-            </td>
-            <td style="padding-bottom: 20px !important;">
-            <input id="show-init-Pos-Alignment" type="checkbox" class="layout-text" <% if (showInitPosAlignment){ %> checked<%}%>>
-            </td>
-            <td style="padding-bottom: 20px !important; padding-left: 0px;">
-            Style
-            </td>
-            <td style="padding-bottom: 20px !important;">
-            <input id="init-Pos-Alignment-Color" type="color" class="sbgn-input-small layout-text" value= <%= initPosAlignmentColor %> >
-            </td>
-
-            <td style="padding-bottom: 20px !important;">
-            <select name="init-Pos-Alignment-Line">
-              <option value="0,0" <% if (initPosAlignmentLine[0] == 0 && initPosAlignmentLine[1] == 0){ %> selected<% }%> > Solid </option>
-              <option value="3,5" <% if (initPosAlignmentLine[0] != 0 || initPosAlignmentLine[1] != 0){ %> selected<% }%> > Dashed </option>
-            </select>
-            </td>
-            </tr>
-
-            <tr>
-            <td style="padding-bottom: 20px !important; width: 140px;">
-            <span class="add-on layout-text"> Geometric Guidelines </span>
-            </td>
-
-            <td style="padding-bottom: 20px !important;">
-            <input id="show-geometric-guidelines" type="checkbox" class="layout-text" <% if (showGeometricGuidelines){ %> checked<%}%>>
-            </td>
-            <td style="padding-bottom: 20px !important; padding-left: 0px;">
-            Style
-            </td>
-            <td style="padding-bottom: 20px !important;">
-            <input id="geometric-guideline-color" type="color" class="sbgn-input-small layout-text" value= <%= guidelineColor %> >
-            </td>
-            <td style="padding-bottom: 20px !important;">
-            <select id="geometric-Alignment-Line">
-              <option value="0,0" <% if (lineDash[0] == 0 && lineDash[1] == 0){ %> selected<% }%> > Solid </option>
-              <option value="3,5" <% if (lineDash[0] != 0 || lineDash[1] != 0){ %> selected<% }%> > Dashed </option>
-            </select>
-            </td>
-            <td style="padding-bottom: 20px !important; padding-left: 35px;">
-            <span class="add-on layout-text"> Range </span>
-            </td>
-
-            <td style="padding-bottom: 20px !important;">
-            <input id="geometric-alignment-range" type="text" class="sbgn-input-small layout-text float-input" value= <%= geometricAlignmentRange %> >
-            </td>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="quick_help_modal" class="modal fade" tabindex="-1" role="dialog">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 520px">
+        <div class="modal-content">
+          <div class="modal-body">
+            <div class="sbgn-frame quick-help">
+              <h2 class="sbgn-text">Quick Help</h2>
+              <div class="quick-help-content">
+                <table align="center" valign="center">
+                  <tbody>
+                    <tr>
+                      <td>
+                        <b>SBGN notation</b>:
+                        <a
+                          href="https://sbgn.github.io/learning"
+                          target="_blank"
+                          rel="nofollow"
+                          >Learning SBGN</a
+                        >
+                        -
+                        <a
+                          href="https://sbgn.github.io/learnerscards"
+                          target="_blank"
+                          rel="nofollow"
+                          >Learner's Cards</a
+                        >
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>SIF notation</b>:
+                        <a
+                          href="http://www.pathwaycommons.org/pc2/formats#sif_relations"
+                          target="_blank"
+                          rel="nofollow"
+                          >SIF Relations</a
+                        >
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>SBML notation</b>:
+                        <a
+                          href="https://minerva.pages.uni.lu/doc/user_manual/v16.0/SBML-SBOTerms/"
+                          target="_blank"
+                          rel="nofollow"
+                          >SBO terms mapping to CellDesigner notation</a
+                        >
+                      </td>
+                    </tr>
+                    <tr>
+                      <td><b>File > Samples</b>: Open a sample model</td>
+                    </tr>
+                    <tr>
+                      <td><b>Double-click on node</b>: Edit label</td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>Right-click</b>: Context menu for associated object
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>Right click on selected edge</b>: Add bend/control
+                        point for edge
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>Ctrl/Cmd + drag on a node</b>: Transfer a node in and
+                        out of a complex/compartment/submap
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>Shift + drag</b>: Box selection (select touched nodes
+                        and included edges)
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>Ctrl/Cmd + Shift + drag</b>: Marquee zoom (zoom to
+                        marked area)
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>Shift + click</b>: Add/remove an element to/from the
+                        current selection
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>Shift + taphold on node/edge</b>: Select neighborhood
+                        of node/edge (involved processes for PD maps)
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>Alt + taphold on node/edge</b>: Select all
+                        nodes/edges of this type
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>Arrow keys</b>: Move selected nodes in arrow
+                        direction; use Shift (Alt) for faster (slower) move
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+                <h2 class="sbgn-text">Tips</h2>
+                <table align="center" valign="center">
+                  <tbody>
+                    <tr>
+                      <td>
+                        <b
+                          >Edit > Add {Complex,Compartment,Submap} for
+                          Selected</b
+                        >: include all selected nodes inside a newly created
+                        complex or compartment or submap.
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>Convenient process creation</b>: When creating a new
+                        process node, click on substrate node and drag to and
+                        release on product node.
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>Enable grid</b>: Clicking on the Enable Grid tool on
+                        the toolbar shows and snaps to the grid during node
+                        dragging.
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <b>Enable guidelines</b>: Clicking on the Enable
+                        Guidelines tool on the toolbar enables and snaps to
+                        alignment guidelines during node dragging.
+                      </td>
+                    </tr>
+                  </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>
+                      <td>
+                        <span
+                          >For any issues or bug reports, please
+                          <a
+                            href="http://newteditor.org/contact.html"
+                            target="_blank"
+                            rel="nofollow"
+                            >contact us</a
+                          >.</span
+                        >
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="color_picker_modal" class="modal fade" tabindex="-1" role="dialog">
+      <div class="modal-dialog" style="width: 232px; height: 363px">
+        <div class="modal-content">
+          <div
+            id="color-picker-div"
+            class="text-center"
+            acp-show-hsl="no"
+            acp-palette-editable
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <script type="text/template" id="loading-small-template">
+      <p class="sbgn-text"> <%= name %> </p>
+      <img class="centered" src="app/img/loading-small.gif" height="auto" width="auto" align="middle">
+    </script>
+
+    <script type="text/template" id="layout-settings-template">
+      <div class="modal-dialog modal-sm sbgn-modal-dialog">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Layout Properties</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table">
+      <tbody>
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Node repulsion (non overlapping) multiplier"> Node Repulsion </span>
+      </td>
+      <td>
+      <input id="node-repulsion" type="text" min="0" class="sbgn-input-small layout-text integer-input" value= <%= nodeRepulsion %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Ideal (intra-graph) edge length"> Ideal Edge Length </span>
+      </td>
+      <td>
+      <input id="ideal-edge-length" type="text" min="5" class="sbgn-input-small layout-text integer-input" value= <%= idealEdgeLength %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Divisor to compute edge forces"> Edge Elasticity </span>
+      </td>
+      <td>
+      <input id="edge-elasticity" type="number" min="0" class="sbgn-input-small layout-text" value= <%= edgeElasticity %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Nesting factor (multiplier) to compute ideal edge length for inter-graph edges"> Nesting Factor </span>
+      </td>
+      <td>
+      <input id="nesting-factor" type="number" min="0" class="sbgn-input-small layout-text" value= <%= nestingFactor %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Gravity force (constant)"> Gravity </span>
+      </td>
+      <td>
+      <input id="gravity" type="number" min="0" class="sbgn-input-small layout-text" value= <%= gravity %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Gravity range (constant)"> Gravity Range   </span>
+      </td>
+      <td>
+      <input id="gravity-range" type="number" min="0" class="sbgn-input-small layout-text" value= <%= gravityRange %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Gravity force (constant) for compounds"> Compound Gravity  </span>
+      </td>
+      <td>
+      <input id="gravity-compound" type="number" min="0" class="sbgn-input-small layout-text" value= <%= gravityCompound %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Gravity range (constant) for compounds"> Compound Gravity Range </span>
+      </td>
+      <td>
+      <input id="gravity-range-compound" type="number" min="0" class="sbgn-input-small layout-text" value= <%= gravityRangeCompound %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Maximum number of iterations to perform"> Number of Iterations </span>
+      </td>
+      <td>
+      <input id="num-iter" type="text" min="0" class="sbgn-input-small layout-text integer-input" value= <%= numIter %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Amount of vertical space to put between degree zero nodes during tiling"> Tiling Vertical Padding </span>
+      </td>
+      <td>
+      <input id="tiling-padding-vertical" type="text" min="0" class="sbgn-input-small layout-text integer-input" value= <%= tilingPaddingVertical %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Amount of horizontal space to put between degree zero nodes during tiling"> Tiling Horizontal Padding </span>
+      </td>
+      <td>
+      <input id="tiling-padding-horizontal" type="text" min="0" class="sbgn-input-small layout-text integer-input" value= <%= tilingPaddingHorizontal %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Whether to tile disconnected nodes"> Tile Disconnected </span>
+      </td>
+
+      <td>
+      <input id="tile" type="checkbox" class="layout-text" <% if (tile){ %> checked<%}%>>
+      </td>
+      </tr>
+
+      <tr>
+        <td>
+          <span class="add-on layout-text" title="Whether to pack components"> Pack Components </span>
+        </td>
+
+        <td>
+          <input id="pack-components" type="checkbox" class="layout-text" <% if (packComponents){ %> checked<%}%>>
+        </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Whether to enable incremental mode"> Incremental </span>
+      </td>
+
+      <td>
+      <input id="incremental" type="checkbox" class="layout-text" <% if (!randomize){ %> checked<%}%>>
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Initial cooling factor for incremental layout"> Incremental Cooling Factor </span>
+      </td>
+      <td>
+      <input id="incremental-cooling-factor" type="number" min="0" class="sbgn-input-small layout-text" value= <%= initialEnergyOnIncremental %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text" title="Whether to improve flow by swapping degree one nodes"> Improve Flow </span>
+      </td>
+      <td>
+      <input id="improve-flow" type="checkbox" class="layout-text" <% if (improveFlow){ %> checked<%}%>>
+      </td>
+      </tr>
+
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="save-layout" class="btn btn-default" >Save</button>
+      <button id="default-layout" class="btn btn-default">Default</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="map-tab-general-template">
+      <table class="table-condensed layout-table dialog-table map-panel-table">
+      <tbody>
+      <tr>
+          <td class="header">
+              <span class="add-on layout-text" title="Name of the map"> Name </span>
+          </td>
+
+          <td>
+              <input id="map-name"  type="text" class="sbgn-input-medium layout-text" value="<%= mapName %>" >
+          </td>
+      </tr>
+
+      <tr>
+          <td class="header">
+              <span class="add-on layout-text" title="Description of the map"> Description </span>
+          </td>
+
+          <td>
+              <textarea id="map-description"  cols="8" rows="2" style="min-width: 90px;" class="layout-text"><%= mapDescription %></textarea>
+          </td>
+      </tr>
+
+      <tr>
+          <td class="header">
+              <span class="add-on layout-text" title="Type of a map is used to check map type specific rules (e.g. target of a consumption is a process node)"> Type </span>
+          </td>
+
+          <td>
+              <select id="map-type" class="sbgn-input-medium layout-text">
+                  <option value="PD" selected>PD</option>
+                  <option value="AF">AF</option>
+                  <option value="HybridSbgn">PD+AF</option>
+                  <option value="SIF">SIF</option>
+                  <option value="SBML">SBML</option>
+                  <option value="HybridAny">PD+AF+SIF+SBML</option>
+              </select>
+          </td>
+      </tr>
+
+      <tr>
+      <td class="header">
+      <span class="add-on layout-text" title="Paddings around compound nodes. Notice, however, that a certain minimal padding is needed and already added for all compound nodes to accommodate for information boxes and visual editing cues (such as expand / collapse cues)"> Additional Compound Padding </span>
+      </td>
+
+      <td>
+      <input id="compound-padding" type="number" class="sbgn-input-small layout-text integer-input" min="0" value= <%= compoundPadding %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td class="header">
+          <span class="add-on layout-text" title="Size of various types of arrows on edges"> Edge Arrow Size </span>
+      </td>
+
+      <td>
+          <input id="arrow-scale" type='range' class="sbgn-input-small" step='0.01' min='0.5' max='2' value= <%= arrowScale %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td class="header">
+      <span class="add-on layout-text" title="Whether or not compounds should be allowed to be resized (if not, compounds dynamically assume dimensions with respect to their content's geometry)"> Allow Compound Resize </span>
+      </td>
+
+      <td>
+      <input id="allow-compound-node-resize" type="checkbox" class="layout-text" <% if (allowCompoundNodeResize){ %> checked<%}%>>
+      </td>
+      </tr>
+
+      <tr>
+      <td class="header">
+      <span class="add-on layout-text" title="Whether or not nesting of nodes inside compounds should be inferred on loading of maps (most data providers will mean for a compound to include processes inside its boundaries but will not correctly set the associated compartment references)"> Infer Nesting on Load </span>
+      </td>
+
+      <td>
+      <input id="infer-nesting-on-load" type="checkbox" class="layout-text" <% if (inferNestingOnLoad){ %> checked<%}%>>
+      </td>
+      </tr>
+
+      <tr>
+      <td class="header">
+      <span class="add-on layout-text" title="Whether or not processes should have input and output ports to respectively combine consumption and production edges to a single point of input and output on the process"> Enable Ports </span>
+      </td>
+
+      <td>
+      <input id="enable-ports" type="checkbox" class="layout-text" <% if (enablePorts){ %> checked<%}%>>
+      </td>
+      </tr>
+
+      <tr>
+      <td class="header">
+      <span class="add-on layout-text" title="For maps of type SIF, whether or not macromolecules should be grouped with respect to topology (i.e. if two macromolecules have the same connectivity, they are grouped together with a compound node for reducing edge count)"> Enable Topology Grouping of SIF Nodes </span>
+      </td>
+
+      <td>
+      <input id="enable-sif-topology-grouping" type="checkbox" class="layout-text" <% if (enableSIFTopologyGrouping){ %> checked<%}%>>
+      </td>
+      </tr>
+
+      <tr>
+      <td class="header">
+      <span class="add-on layout-text" title="Highlight thickness and color">Highlight Style</span>
+      </td>
+
+      <td>
+      <input id="highlight-thickness"  type='range' class="sbgn-input-small" style="display:inline;vertical-align:top" step='0.5' min='1' max='10' value= <%= extraHighlightThickness %>>
+      <input id="highlight-color" type="color" class="sbgn-input-small layout-text" value= <%= highlightColor %>>
+      </td>
+      </tr>
+
+      </tbody>
+      </table>
+
+      <div style='text-align: center; margin-top: 5px;'>
+        <button class='btn btn-default' id='map-general-default-button'>Default</button>
+      <div>
+    </script>
+
+    <script type="text/template" id="map-tab-label-template">
+      <table class="table-condensed layout-table dialog-table map-panel-table">
+      <tbody>
+          <tr>
+          <td class="header">
+          <span class="add-on layout-text" title="Whether or not molecular complexes with labels should display these labels"> Display Labels for Named Complexes </span>
+          </td>
+
+          <td>
+          <input id="show-complex-name" type="checkbox" class="layout-text" <% if (showComplexName){ %> checked<%}%>>
+          </td>
+          </tr>
+
+          <tr>
+          <td class="header">
+          <span class="add-on layout-text" title="Whether or not the font size of node labels should be calculated with respect to node size"> Adjust Node Label Font Size Automatically </span>
+          </td>
+
+          <td>
+          <input id="adjust-node-label-font-size-automatically" type="checkbox" class="layout-text" <% if (adjustNodeLabelFontSizeAutomatically){ %> checked<%}%>>
+          </td>
+          </tr>
+
+          <tr>
+              <td class="header">
+                  <span class="add-on layout-text" title="When Adjust Node Label Font Size Automatically is enabled, label sizes can be set to be uniformly small, regular or large"> Label Size </span>
+              </td>
 
-            </tr>
+              <td>
+                  <select id="dynamic-label-size-select"  class="sbgn-input-medium" name="dynamic-label-size">
+                      <option id="dynamic-label-size_small" value="small" <% if (dynamicLabelSize == 'small'){ %> selected<%}%> > Small </option>
+                      <option id="dynamic-label-size_regular" value="regular" <% if (dynamicLabelSize == 'regular'){ %> selected<%}%> > Regular </option>
+                      <option id="dynamic-label-size_large" value="large" <% if (dynamicLabelSize == 'large'){ %> selected<%}%> > Large </option>
+                  </select>
+              </td>
+          </tr>
+
+          <tr>
+          <td class="header">
+          <span class="add-on layout-text" title="Whether or not long node labels overflowing node width should be truncated with ellipses"> Fit Labels to Nodes </span>
+          </td>
+
+          <td>
+          <input id="fit-labels-to-nodes" type="checkbox" class="layout-text" <% if (fitLabelsToNodes){ %> checked<%}%>>
+          </td>
+          </tr>
+
+          <tr>
+          <td class="header">
+          <span class="add-on layout-text" title="Whether or not long information box (state variable or units of information) labels overflowing information box width should be truncated with ellipses"> Fit Labels to Information Boxes </span>
+          </td>
+
+          <td>
+          <input id="fit-labels-to-infoboxes" type="checkbox" class="layout-text" <% if (fitLabelsToInfoboxes){ %> checked<%}%>>
+          </td>
+          </tr>
+
+      </tbody>
+      </table>
+
+      <div style='text-align: center; margin-top: 5px;'>
+        <button class='btn btn-default' style='align: center;' id='map-label-default-button'>Default</button>
+      <div>
+    </script>
+
+    <script type="text/template" id="map-tab-rearrangement-template">
+      <table class="table-condensed layout-table dialog-table map-panel-table">
+      <tbody>
+          <tr>
+          <td class="header">
+          <span class="add-on layout-text" title='Whether or not an incremental layout, which tries to "tidy up" the drawing, should be applied after complexity management (expand/collapse and hide/show) operations'> Recalculate Layout on Complexity Management </span>
+          </td>
+
+          <td>
+          <input id="recalculate-layout-on-complexity-management" type="checkbox" class="layout-text" <% if (recalculateLayoutOnComplexityManagement){ %> checked<%}%>>
+          </td>
+          </tr>
+
+          <tr>
+          <td class="header">
+          <span class="add-on layout-text" title="Whether or not complexity management operations should try to make room for changes (e.g. move surrounding neighbors away before expanding a collapsed node) prior to recalculating layout on complexity management operations"> Rearrange on Complexity Management </span>
+          </td>
+
+          <td>
+          <input id="rearrange-on-complexity-management" type="checkbox" class="layout-text" <% if (rearrangeOnComplexityManagement){ %> checked<%}%>>
+          </td>
+          </tr>
+
+          <tr>
+          <td class="header">
+          <span class="add-on layout-text" title="Whether or not operations such as layout and complexity management should move map objects to their new locations using animation"> Animate on Drawing Changes </span>
+          </td>
+
+          <td>
+          <input id="animate-on-drawing-changes" type="checkbox" class="layout-text" <% if (animateOnDrawingChanges){ %> checked<%}%>>
+          </td>
+          </tr>
+      </tbody>
+      </table>
+
+      <div style='text-align: center; margin-top: 5px;'>
+        <button class='btn btn-default' style='align: center;' id='map-rearrangement-default-button'>Default</button>
+      <div>
+    </script>
+
+    <script type="text/template" id="map-tab-experiment-template">
+          <table align = "center" class="table-condensed layout-table dialog-table map-panel-table">
+       <div align="center" style = 'margin-top: 10px; text-align: center'> Open... <img width='16px' height='16px' id='load-exp-data-util' title="Open experiment data from a tab-delimited file" src='app/img/add.svg' style="margin: 5px;"/> </div>
+
+              <% if( experimentDescription.length  <= 0 || Object.entries(experimentDescription).length == 0){ %>
+              <% } else { %>
+              <table align = "center" class="table-condensed layout-table dialog-table map-panel-table">
+                  <tbody>
+                  <tr>
+                      <td style='text-align: center;'>
+                          <div style='margin-top: 0px;' >
+                              <img width='16px' height='16px' style='align: center; margin-right: 2%; cursor: pointer; margin-top: -2px;' id="show-experiment-data-as-table" src="app/img/toolbar/table-grid.svg" title="Show as table">
+                              <button class='btn btn-default' value="true" title="Temporarily hide/show all experiment data" style='align: center; border-width: 0px !important; padding:3px; margin-right: 2%' id='experiment-hide-all'> Hide/Show All</button>
+                              <button class='btn btn-default' value="true" title="Remove all experiment data" style='align: center; border-width: 0px !important; padding:3px;' id='experiment-remove-all'> Remove All</button>
+                          </div>
+                  </td>
+                  </tr>
+                  </tbody>
+              </table>
+              <!-- Draggable DIV -->
+              <div id="draggable-exp-data-div" style="display: none;">
+                <div id="draggable-exp-data-div-header" class="text-center" style="cursor: move;z-index: 1001;">
+                  <div style="line-height:24px;">
+                    <button type="button" id="close-experiment-data-as-table" style="padding-right: 2px;" class="close">&times;</button>
+                    <b style="vertical-align: middle; font-size: 16px; font-weight:normal!important ">Experiment Data</b>
+                  </div>
+                </div>
+                <div>
+                  <input id="search-exp-table" type="label" style="float: right; clear: both; margin: 10px;" placeholder="Search...">
+                </div>
+                <div style="border: 1px solid #d3d3d3; border-bottom-left-radius:4px; border-bottom-right-radius:4px; padding:8px">
+                  <table class="table table-condensed table-striped table-hover" style="margin-bottom: 0px;" id="map-exp-table"> <!-- will come from JS --> </table>
+                </div>
+              </div>
 
-            <tr>
-            <td rowspan="2">
-            <span class="add-on layout-text"> Distribution Guidelines </span>
-            </td>
+                <% for (filename in experimentDescription) { %>
+                  <% if (filename != null) { %>
+               <hr style="margin-top: 10px!important; margin-bottom:10px!important"/>
+              <table align = "center" class="table-condensed layout-table dialog-table map-panel-table" style="table-layout:fixed !important;  margin-bottom:10px">
+               <tbody>
+                  <div>
+                      <tr>
+                          <td  style='text-align: right; width:50% !important; ' >
+                          <div>
+                              <button class='btn btn-default' value="true" style='align: center; border-width: 0px !important; padding:3px; overflow: hidden; text-overflow: ellipsis; max-width: 80%;' title="Hide/show " id='experiment-file-vis-<%= filename %>' > <b><%= filename %></b></button>
+                          </div>
+                      </td>
+                  <td style="width:50% !important">
+                      <img width="16px" height="16px" src="app/img/toolbar/delete-simple.svg" style="margin: 5px;"  title= "Remove file" id='experiment-file-delete-<%= filename %>'/>
 
-            <td rowspan="2">
-            <input id="show-distribution-guidelines" type="checkbox" class="layout-text" <% if (showDistributionGuidelines){ %> checked<%}%>>
-            </td>
-            <td style="padding-left: 0px;">
-            <span class="add-on layout-text"> Horizontal </span>
-            </td>
+                  </td>
+                  </tr>
+                  <%}%>
+              </div>
+                  <% for (element in experimentDescription[filename]) { %>
+                      <% if(element != null) { %>
+                      <tr>
+                      <td  style='text-align: right; width:50% !important;' >
+                          <div>
+                              <button class='btn btn-default' value = 'true' style='align: center; border-width: 0px !important; padding:3px; overflow: hidden; text-overflow: ellipsis; max-width: 80%;' title="Hide/show <%=experimentDescription[filename][element]%>" id='experiment-vis-<%= filename %>?<%= experimentDescription[filename][element] %>' > <%= experimentDescription[filename][element] %></button>
+                          </div>
+                  </td>
+                  <td style="width:50% !important">
+                      <img width="16px" height="16px" src="app/img/toolbar/delete-simple.svg" style=" margin: 5px;"  title= "Remove experiment" id='experiment-delete-<%= filename %>?<%= experimentDescription[filename][element] %>'/>
 
-            <td>
-            <input id="horizontal-guideline-color" type="color" class="sbgn-input-small layout-text" value= <%= horizontalGuidelineColor %> >
-            </td>
-            <td>
-            <select name="horizontal-Dist-Alignment-Line">
-              <option value="0,0" <% if (horizontalDistLine[0] == 0 && horizontalDistLine[1] == 0){ %> selected<% }%> > Solid </option>
-              <option value="3,5" <% if (horizontalDistLine[0] != 0 || horizontalDistLine[1] != 0){ %> selected<% }%> > Dashed </option>
-            </select>
-            </td>
-            <td rowspan="2" style="padding-left: 35px;">
-            <span class="add-on layout-text"> Range </span>
-            </td>
+                  </td>
+                  </tr>
+              <% } %>
+                  <% } %>
+              </tbody>
+          </table>
+                  <% } %>
 
-            <td rowspan="2">
-            <input id="distribution-alignment-range" type="text" class="sbgn-input-small layout-text float-input" value= <%= distributionAlignmentRange %> >
-            </td>
-            </tr>
+          <% } %>
+
+      </tbody>
+      </table>
+    </script>
+    <script type="text/template" id="general-properties-template">
+      <!-- legacy, keep it to know how the default button was designed before
+      </tbody>
+      </table>
+      <div class="modal-footer" style="text-align: center">
+      <button id="default-sbgn" class="btn btn-default">Default</button>
+      </div>-->
+    </script>
+
+    <script type="text/template" id="query-neighborhood-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 510px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Neighborhood Query</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table">
+      <tbody>
+      <tr>
+      <th colspan=2 style="padding-left: 0px;" align="left">
+          <!--&emsp; are added to fill the row so that the distance between the -->
+      <span class="add-on layout-text"> Find the neighbors of an entity within a certain distance &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;</span>
+      </th>
+      </tr>
+
+      <tr>
+      <td style="padding-left: 40px;">
+      <span class="add-on layout-text"> Gene Symbols: </span><br>
+      <textarea id="query-neighborhood-gene-symbols" rows="4" cols="86" style="width: 200px;"><%= geneSymbols %></textarea>
+      </td>
+
+      <td style="padding-right: 5px;">
+      <table frame="box" style="border-color: rgb(204, 204, 204)">
+      <tbody>
+      <caption style="text-align: left;">Stop Distance</caption>
+      <tr>
+      <td colspan=2>Length limit</td>
+      <td style="padding: 10px;"><input id="query-neighborhood-length-limit" type="text" min="1" class="sbgn-input-small layout-text integer-input" style="width: 90px;" value= <%= lengthLimit %> > </td>
+      </tr>
+      </tbody>
+      </table>
+      </td>
+
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="save-query-neighborhood" class="btn btn-default" >OK</button>
+      <button id="cancel-query-neighborhood" class="btn btn-default">Cancel</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="query-pathsbetween-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 510px;">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal">&times;</button>
+                  <h4 class="modal-title">Paths Between Query</h4>
+              </div>
+              <div class="modal-body">
+                  <table class="table-condensed layout-table">
+                      <tbody>
+                      <tr>
+                          <th colspan=2 style="padding-left: 0px;" align="left">
+                              <span class="add-on layout-text"> Find all paths of specified length limit between any two entities of the specified set </span>
+                          </th>
+                      </tr>
+
+                      <tr>
+                          <td style="padding-left: 40px;">
+                              <span class="add-on layout-text"> Gene Symbols: </span><br>
+                              <textarea id="query-pathsbetween-gene-symbols" rows="4" cols="86" style="width: 200px;"><%= geneSymbols %></textarea>
+                          </td>
+
+                          <td style="padding-right: 5px;">
+                              <table frame="box" style="border-color: rgb(204, 204, 204)">
+                                  <tbody>
+                                  <caption style="text-align: left;">Stop Distance</caption>
+                                  <tr>
+                                      <td colspan=2>Length limit</td>
+                                      <td style="padding: 10px;"><input id="query-pathsbetween-length-limit" type="text" min="1" class="sbgn-input-small layout-text integer-input" style="width: 90px;" value= <%= lengthLimit %> > </td>
+                                  </tr>
+                                  </tbody>
+                              </table>
+                          </td>
 
-            <tr>
-            <td style="padding-left: 0px;>
-            <span class="add-on layout-text"> Vertical </span>
-            </td>
+                      </tr>
+                      </tbody>
+                  </table>
+              </div>
+              <div class="modal-footer" style="text-align: center">
+                  <button id="save-query-pathsbetween" class="btn btn-default" >OK</button>
+                  <button id="cancel-query-pathsbetween" class="btn btn-default">Cancel</button>
+              </div>
+          </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="query-pathsfromto-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 510px;">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal">&times;</button>
+                  <h4 class="modal-title">Paths From To Query</h4>
+              </div>
+              <div class="modal-body">
+                  <table class="table-condensed layout-table">
+                      <tbody>
+                      <tr>
+                          <th colspan=3 style="padding-left: 0px;" align="left">
+                              <span class="add-on layout-text"> Find all paths of specified length limit from a set of source entities to a set of target entities </span>
+                          </th>
+                      </tr>
+
+                      <tr>
+                          <td style="padding-left: 5px;">
+                              <span class="add-on layout-text"> Source Symbols: </span><br>
+                              <textarea id="query-pathsfromto-source-symbols" rows="4" cols="80" style="width: 150px;"><%= sourceSymbols %></textarea>
+                          </td>
+
+                          <td style="padding-left: 5px;">
+                              <span class="add-on layout-text"> Target Symbols: </span><br>
+                              <textarea id="query-pathsfromto-target-symbols" rows="4" cols="80" style="width: 150px;"><%= targetSymbols %></textarea>
+                          </td>
+
+                          <td style="padding-right: 5px;">
+                              <table frame="box" style="border-color: rgb(204, 204, 204)">
+                                  <tbody>
+                                  <caption style="text-align: left;">Stop Distance</caption>
+                                  <tr>
+                                      <td colspan=2>Length limit</td>
+                                      <td style="padding: 10px;"><input id="query-pathsfromto-length-limit" type="text" min="1" class="sbgn-input-small layout-text integer-input" style="width: 90px;" value= <%= lengthLimit %> > </td>
+                                  </tr>
+                                  </tbody>
+                              </table>
+                          </td>
 
-            <td>
-            <input id="vertical-guideline-color" type="color" class="sbgn-input-small layout-text" value= <%= verticalGuidelineColor %> >
-            </td>
-			<td>
-			<select name="vertical-Dist-Alignment-Line">
-			  <option value="0,0" <% if (verticalDistLine[0] == 0 && verticalDistLine[1] == 0){ %> selected<% }%> > Solid </option>
-		   	  <option value="3,5" <% if (verticalDistLine[0] != 0 || verticalDistLine[1] != 0){ %> selected<% }%> > Dashed </option>
-			</select>
-			</td>
-
-            <tr>
-            <td style="padding-top: 20px !important; width: 140px;">
-            <span class="add-on layout-text"> Guideline Tolerance </span>
-            </td>
+                      </tr>
+                      </tbody>
+                  </table>
+              </div>
+              <div class="modal-footer" style="text-align: center">
+                  <button id="save-query-pathsfromto" class="btn btn-default" >OK</button>
+                  <button id="cancel-query-pathsfromto" class="btn btn-default">Cancel</button>
+              </div>
+          </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="query-commonstream-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 510px;">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal">&times;</button>
+                  <h4 class="modal-title">Common Stream Query</h4>
+              </div>
+              <div class="modal-body">
+                  <table class="table-condensed layout-table">
+                      <tbody>
+                      <tr>
+                          <th colspan=2 style="padding-left: 0px;" align="left">
+                              <span class="add-on layout-text"> Find molecules within the specified distance that are affecting or affected by a specific set of molecules in common</span>
+                          </th>
+                      </tr>
+
+                      <tr>
+                          <td style="padding-left: 40px;">
+                              <span class="add-on layout-text"> Gene Symbols: </span><br>
+                              <textarea id="query-commonstream-gene-symbols" rows="4" cols="86" style="width: 200px;"><%= geneSymbols %></textarea>
+                          </td>
+
+                          <td style="padding-right: 5px;">
+                              <table frame="box" style="border-color: rgb(204, 204, 204)">
+                                  <tbody>
+                                  <caption style="text-align: left;">Stop Distance</caption>
+                                  <tr>
+                                      <td colspan=2>Length limit</td>
+                                      <td style="padding: 10px;"><input id="query-commonstream-length-limit" type="text" min="1" class="sbgn-input-small layout-text integer-input" style="width: 90px;" value= <%= lengthLimit %> > </td>
+                                  </tr>
+                                  </tbody>
+                              </table>
+                          </td>
 
-            <td style="padding-top: 20px !important;">
-            <input id="guideline-tolerance" type="text" min="0" class="sbgn-input-small layout-text float-input" value= <%= guidelineTolerance %> >
-            </td>
-            </tr>
+                      </tr>
+                      </tbody>
+                  </table>
+              </div>
+              <div class="modal-footer" style="text-align: center">
+                  <button id="save-query-commonstream" class="btn btn-default" >OK</button>
+                  <button id="cancel-query-commonstream" class="btn btn-default">Cancel</button>
+              </div>
+          </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="query-pathsbyURI-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 500px;">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal">&times;</button>
+                  <h4 class="modal-title">Paths By URI</h4>
+              </div>
+              <div class="modal-body">
+                  <table class="table-condensed layout-table">
+                      <tbody>
+                      <tr>
+                          <th colspan=3 style="padding-left: 0px;" align="left">
+                              <span class="add-on layout-text"> Display paths of the specified URI </span>
+                          </th>
+                      </tr>
+
+                      <tr>
+                          <td>Enter URI of a pathway</td>
+                          <td style="padding: 10px;"><input id="query-pathsbyURI-URI" type="text"  style="width: 300px;" value= <%= URI %> > </td>
+                      </tr>
+                      </tbody>
+                  </table>
+              </div>
+              <div class="modal-footer" style="text-align: center">
+                  <button id="save-query-pathsbyURI" class="btn btn-default" >OK</button>
+                  <button id="cancel-query-pathsbyURI" class="btn btn-default">Cancel</button>
+              </div>
+          </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="prompt-save-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 350px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Save</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text"> Do you want to save any change(s) to the map? </span>
+      </th>
+      </tr>
+
+      <tr id="prompt-save-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-save-accept" class="btn btn-default" >Save</button>
+      <button id="prompt-save-reject" class="btn btn-default">Don't Save</button>
+      <button id="prompt-save-cancel" class="btn btn-default">Cancel</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="file-save-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 350px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Save</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <td style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text"> Filename </span>
+      </td>
+      <td>
+      <input id="file-save-filename" type="text" />
+      </td>
+      </tr>
+
+      <tr id="file-save-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="file-save-accept" class="btn btn-default">Save</button>
+      <button id="file-save-cancel" class="btn btn-default">Cancel</button>
+      </div>
+      </div>
+      </div>
+    </script>
+    <script type="text/template" id="save-user-preferences-template">
+      <div class="modal-dialog modal-sm sbgn-modal-dialog">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal">&times;</button>
+                  <h4 class="modal-title">Save Preferences</h4>
+              </div>
+              <div class="modal-body">
+              <table class="table-condensed layout-table dialog-table" style="white-space: nowrap;">
+                  <tbody>
+                      <tr>
+                          <td>
+                              <span class="add-on layout-text" > Filename </span>
+                          </td>
+                          <td>
+                              <input id="save-user-preferences-filename" type="text" />
+                          </td>
+                      </tr>
+                  </tbody>
+              </table>
+              <table class="table-condensed layout-table dialog-table" style="white-space: nowrap;">
+                  <tbody>
+                      <tr>
+                          <td>
+                              <span class="add-on layout-text" title="Save Map Properties preferences" > Map Properties </span>
+                          </td>
+                          <td>
+                              <input id="user-prefrences-map-check" type="checkbox" class="layout-text" checked>
+                          </td>
+                      </tr>
+                      <tr>
+                          <td>
+                              <span class="add-on layout-text" title="Save Grid Properties preferences" > Grid Properties </span>
+                          </td>
+                          <td>
+                              <input id="user-prefrences-grid-check" type="checkbox" class="layout-text" checked>
+                          </td>
+                      </tr>
+                      <tr>
+                          <td>
+                              <span class="add-on layout-text" title="Save Layout Properties preferences" > Layout Properties </span>
+                          </td>
+                          <td>
+                              <input id="user-prefrences-layout-check" type="checkbox" class="layout-text" checked>
+                          </td>
+                      </tr>
+                      <tr>
+                          <td>
+                              <span class="add-on layout-text" title="Save Object Properties preferences" > Object Properties: </span>
+                          </td>
+                          <% if(stagedObjects.length <= 0) { %>
+                          <td>
+                              <span class="add-on layout-text"  > none specified </span>
+                          </td>
+                          <% } else { %>
+                              <td>
+                                  <input id="save-user-prefrences-object-check" type="checkbox" class="layout-text" checked>
+                              </td>
+
+                          <% } %>
+                      </tr>
+
+              <% if(stagedObjects.length > 0) { %>
+                      <% stagedObjects.forEach(function(element) { %>
+                      <tr>
+                          <td>
+                              <span class="add-on layout-text save-load-prefrences-object-name" title="Save <%= element %> properties preferences"> <%= element %> </span>
+                          </td>
+                          <td>
+                              <input id="user-prefrences-object-<%= element %>-check" type="checkbox" disabled="disabled" class="layout-text save-preferences-object-styles" checked>
+                          </td>
+                      </tr>
+                      <% }); %>
+              <% } %>
+                  </tbody>
+              </table>
 
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="save-grid" class="btn btn-default" >Save</button>
-            <button id="default-grid" class="btn btn-default">Default</button>
-            </div>
-            </div>
-            </div>
-        </script>
+              </div>
+              <div class="modal-footer" style="text-align: center">
+                  <button id="save-user-preferences-accept" class="btn btn-default">Save</button>
+                  <button id="save-user-preferences-cancel" class="btn btn-default">Cancel</button>
+              </div>
+          </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="load-user-preferences-template">
+      <div class="modal-dialog modal-sm sbgn-modal-dialog">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal">&times;</button>
+                  <h4 class="modal-title">Open Preferences</h4>
+              </div>
+              <div class="modal-body">
+              <table class="table-condensed layout-table dialog-table">
+                  <tbody>
+                      <tr>
+                          <td>
+                              <span class="add-on layout-text" title="Open Map Properties preferences" > Map Properties </span>
+                          </td>
+                          <td>
+                              <input id="load-user-prefrences-map-check" type="checkbox" class="layout-text" <% if(typeof currentGeneralProperties !== 'undefined') { %> checked <% }else{ %> disabled <% } %>>
+                          </td>
+                      </tr>
+                      <tr>
+                          <td>
+                              <span class="add-on layout-text" title="Open Grid Properties preferences"> Grid Properties </span>
+                          </td>
+                          <td>
+                              <input id="load-user-prefrences-grid-check" type="checkbox" class="layout-text"  <% if(typeof currentGridProperties !== 'undefined') { %> checked <% }else{ %> disabled <% } %>>
+                          </td>
+                      </tr>
+                      <tr>
+                          <td>
+                              <span class="add-on layout-text" title="Open Layout Properties preferences"> Layout Properties </span>
+                          </td>
+                          <td>
+                              <input id="load-user-prefrences-layout-check" type="checkbox" class="layout-text"  <% if(typeof currentLayoutProperties !== 'undefined') { %> checked <% }else{ %> disabled <% } %>>
+                          </td>
+                      </tr>
+
+                      <tr>
+                          <td>
+                              <span class="add-on layout-text" title="Open Object Properties preferences"> Object Properties: </span>
+                          </td>
+                          <% if(elementsStyles.length <= 0) { %>
+                          <td>
+                              <span class="add-on layout-text"  > none specified </span>
+                          </td>
+                          <% } else { %>
+                          <td>
+                              <input id="load-user-prefrences-object-check" type="checkbox" class="layout-text" checked>
+                          </td>
+                          <% } %>
+                      </tr>
+                  <% elementsStyles.forEach(function(element) { %>
+                      <tr>
+                          <td>
+                              <span class="add-on layout-text save-load-prefrences-object-name" title="Open <%= element['element'] %> properties preferences" > <%= (element['element']) %> </span>
+                          </td>
+                          <td>
+                              <input title="<%= element['element'] %>" id="load-user-prefrences-object-<%= element['element'] %>-check" type="checkbox" disabled="disabled" class="layout-text load-preferences-object-styles" checked>
+                          </td>
+                      </tr>
+                  <% }); %>
+
+              </tbody>
+          </table>
+
+          <% if(elementsStyles.length > 0) { %>
+          <table class="table-condensed layout-table dialog-table" style="margin-left:10px!important;">
+              <tbody>
+                      <tr>
+                          <td>
+                              <span class="add-on layout-text" title="Apply changes to existing elements"> Apply to existing elements </span>
+                          </td>
+                          <td>
+                              <input id="load-user-prefrences-apply-changes" type="checkbox" class="layout-text" checked >
+                          </td>
+                      </tr>
+                      <tr>
+                          <td colspan="2">
+                              <span class="add-on layout-text" style="font-size: 10px !important;"><strong>Caution: </strong> When checked the selected preferences will be applied to existing map objects!</span>
+                          </td>
+                      </tr>
+              </tbody>
+          </table>
+           <% } %>
+              </div>
+              <div class="modal-footer" style="text-align: center">
+                  <button id="load-user-preferences-accept" class="btn btn-default">Open</button>
+                  <button id="load-user-preferences-cancel" class="btn btn-default">Cancel</button>
+              </div>
+          </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="prompt-confirmation-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 400px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Confirmation</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text">All unsaved changes will be lost. Do you want to continue?</span>
+      </th>
+      </tr>
+
+      <tr id="prompt-confirmation-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-confirmation-accept" class="btn btn-default">Yes</button>
+      <button id="prompt-confirmation-cancel" class="btn btn-default">No</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <!-- Map type change warning -->
+    <script type="text/template" id="prompt-mapType-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 500px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Warning</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text"><%= message %></span>
+      <br>
+      <span class="add-on layout-text"><%= suggestion %></span>
+      </th>
+      </tr>
+
+      <tr id="prompt-mapType-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-mapType-accept" class="btn btn-default">Dismiss</button>
+      <!-- <button id="prompt-mapType-cancel" class="btn btn-default">No</button> -->
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <!-- Invalid  query error -->
+    <script type="text/template" id="prompt-invalidQuery-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Error</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text">Invalid query!</span>
+      </th>
+      </tr>
+
+      <tr id="prompt-invalidQuery-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-invalidQuery-confirm" class="btn btn-default">OK</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <!-- Request timed out -->
+    <script type="text/template" id="prompt-requestTimedOut-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Info</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text">Request Timed out!</span>
+      </th>
+      </tr>
+
+      <tr id="prompt-requestTimedOut-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-requestTimedOut-confirm" class="btn btn-default">OK</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <!-- Empty query result -->
+    <script type="text/template" id="prompt-emptyQueryResult-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Info</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text">No results found for query.</span>
+      </th>
+      </tr>
+
+      <tr id="prompt-emptyQueryResult-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-emptyQueryResult-confirm" class="btn btn-default">OK</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <!-- Invalid length limit warning -->
+    <script type="text/template" id="prompt-invalidLengthLimit-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Warning</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text" id="length-limit-constant">Length limit can be at most 3.</span>
+      </th>
+      </tr>
+
+      <tr id="prompt-invalidLengthLimit-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-invalidLengthLimit-confirm" class="btn btn-default">OK</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <!-- Invalid  URI error -->
+    <script type="text/template" id="prompt-invalidURI-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Error</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text">Invalid URI!</span>
+      </th>
+      </tr>
+
+      <tr id="prompt-invalidURI-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-invalidURI-confirm" class="btn btn-default">OK</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <!-- Invalid file warning -->
+    <script type="text/template" id="prompt-invalidFile-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Error</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text">Incorrect file format!</span>
+      </th>
+      </tr>
+
+      <tr id="prompt-invalidFile-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-invalidFile-confirm" class="btn btn-default">OK</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <!-- Conversion error warning -->
+    <script type="text/template" id="prompt-fileConversionError-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal">&times;</button>
+                  <h4 class="modal-title">Error</h4>
+              </div>
+              <div class="modal-body">
+                  <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+                      <tbody>
+                      <tr>
+                          <th style="padding-left: 0px;" align="left">
+                              <span class="add-on layout-text" id="file-conversion-error-message">Conversion failed!</span>
+                          </th>
+                      </tr>
+
+                      <tr id="prompt-fileConversionError-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+                          <td>
+                          </td>
+                      </tr>
+                      </tbody>
+                  </table>
+              </div>
+              <div class="modal-footer" style="text-align: center">
+                  <button id="prompt-fileConversionError-confirm" class="btn btn-default">OK</button>
+              </div>
+          </div>
+      </div>
+    </script>
+
+    <!-- Invalid Map Type Warning-->
+    <script type="text/template" id="prompt-errorInvalidType-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 335px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Error</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text centered">Invalid map type!</span>
+      </th>
+      </tr>
+
+      <tr id="prompt-errorInvalidType-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-errorInvalidType-confirm" class="btn btn-default">OK</button>
+      </div>
+      </div>
+      </div>
+    </script>
+    <!-- Error on PD2AF Conversion -->
+    <script type="text/template" id="prompt-errorPD2AF-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 335px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Error</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text centered"><%= message %></span>
+      </th>
+      </tr>
+
+      <tr id="prompt-errorPD2AF-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-errorPD2AF-confirm" class="btn btn-default">OK</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="prompt-sbmlConversionError-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 450px;">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal">&times;</button>
+                  <h4 class="modal-title">Error</h4>
+              </div>
+              <div class="modal-body">
+                  <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+                      <tbody>
+                      <tr>
+                          <td style="text-align: center;">
+
+                              <span class="add-on layout-text" id="file-conversion-error-message"><b>Conversion failed!</b></span>
+                          </td>
+                      </tr>
+                      <tr>
+
+                          <td style="text-align: center;">
+                              <input id="sbml-coversion-user-agree" type="checkbox" class="layout-text" checked>
+                              <span class="add-on layout-text" >I agree to sending this map for investigation of the conversion problem. </span>
+                          </td>
+                      </tr>
+
+                      </tbody>
+                  </table>
+              </div>
+              <div class="modal-footer" style="text-align: center">
+                  <button id="prompt-sbml-confirm" class="btn btn-default">OK</button>
+              </div>
+          </div>
+      </div>
+    </script>
+    <!-- Invalid URL warning -->
+    <script type="text/template" id="prompt-invalidURL-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Error</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text">Invalid URL!</span>
+      </th>
+      </tr>
+
+      <tr id="prompt-invalidURL-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-invalidURL-confirm" class="btn btn-default">OK</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <!-- Invalid edge warning -->
+    <script type="text/template" id="prompt-invalidEdge-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 335px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Error</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text centered">Invalid edge type! Refer to Legend menu for help.</span>
+      </th>
+      </tr>
+
+      <tr id="prompt-invalidEdge-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-invalidEdge-confirm" class="btn btn-default">OK</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <!-- Invalid background image warning -->
+    <script type="text/template" id="prompt-invalidImage-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Error!</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text">Image file is invalid!</span>
+      </th>
+      </tr>
+
+      <tr id="prompt-invalidImage-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-invalidImage-confirm" class="btn btn-default">OK</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="reaction-template-template">
+      <div class="modal-dialog sbgn-modal-dialog">
+        <div class="modal-content" style="display: inline-block"  id="template-modal-content">
+        <div class="modal-header" align="center">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h4 class="modal-title">SBGN Bricks</h4>
+        </div>
+        <div class="modal-body">
+        <div class="row">
+        <div class="col-md-8" align="center">
+        <table class="table-condensed layout-table dialog-table">
+        <tbody>
 
-        <script type="text/template" id="font-properties-template">
-            <div class="modal-dialog modal-sm sbgn-modal-dialog">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Font Properties</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table">
-            <tbody>
+        <tr align="center" style="height:40px;">
+        <td style="padding-bottom: 10px;" colspan=100%>
+        <select id="brick-type-select" class='sbgn-output-medium layout-text' name="reaction-template-type" align="center" valign="middle" style="width: fit-content;">
+        <option id="brick-type-metabolic-reaction" value="metabolic-reaction" selected>Metabolic Reaction</option>
+        <option id="brick-type-conversion" value="conversion">Post-Translational Modification</option>
+        <option id="brick-type-multimerization" value="multimerization">Multimerization</option>
+        <option id="brick-type-association" value="association">Association</option>
+        <option id="brick-type-dissociation" value="dissociation">Dissociation</option>
+        <option id="brick-type-degradation" value="degradation">Degradation</option>
+        <option id="brick-type-transcription" value="transcription">Transcription</option>
+        <option id="brick-type-translation" value="translation">Translation</option>
+        </select>
+        <!-- Display help image, leads to SBGN Bricks page of the selected brick type -->
+        <a id="sbgn-bricks-help-link" href="http://www.sbgnbricks.org/BKO/full/entry/all/BKO:0000585/" target="_blank">
+        <img id="sbgn-bricks-help" src="app/img/toolbar/quick-help.svg" title="Associated brick web page" style="width: 21px; margin-left: 5px; margin-bottom: 1px;">
+        </img>
+        </a>
+        </td>
+
+        </tr>
+
+        <tr id="reaction-top-input-row" align="center" style="height: 40px; vertical-align: bottom;">
+        <td colspan='100%'>
+            <div style="display: inline-block; margin-right: 25px;">
+            <input id="metabolic-reaction-reversible-checkbox" type='checkbox' class='layout-text' style="margin-right: 5px">Reversible</input>
+            </div>
+            <div class="thin-blue-border" style="display: inline-block; padding: 5px;">
+            <input id="metabolic-reaction-regulator-checkbox" type='checkbox' class="add-on layout-text" align="center" valign="middle" style="margin-right: 5px">Regulator:</input>
+            <input type='text' class='sbgn-input-medium layout-text' id='metabolic-reaction-regulator-name' value='' class="text-input-disabled" disabled></input>
+
+            <select id="metabolic-reaction-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: fit-content' disabled>
+            <option value="macromolecule" selected> Macromolecule </option>
+            <option value="simple chemical"> Simple Chemical </option>
+            <option value="unspecified entity"> Unspecified Entity </option>
+            <option value="complex"> Complex </option>
+            </select>
+            <input id="metabolic-reaction-multimer-checkbox" type='checkbox' class="layout-text" style="margin-left: 10px;" disabled></input>
+            <label id="metabolic-reaction-multimer-label" for="metabolic-reaction-multimer-checkbox" class="checkbox-label-disabled">Multimer</label>
+            <input id="metabolic-reaction-multimer-cardinality" type="number" class="layout-text text-input-disabled" style="width: 30px;" value="2" disabled title="Integer value of at least 2"></input>
+            </div>
+        </td>
+        </tr>
+
+        <tr style="height: 30px; width: 100%;">
+        </tr>
+
+        <tr id="sbgn-brick-middle-row">
+        <td id ='reaction-template-left-td' align="center">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Input</div>
+        <table id='metabolic-reaction-input-table'>
+        <tr>
+        <td>
+        <input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='1' value=''></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: 120px'>
+        <option value="Simple Chemical" selected>Simple Chemical</option>
+        </td>
+        <td><img class='template-reaction-delete-button' width='16px' height='16px' name='1' src='app/img/toolbar/delete-simple.svg'/>
+        </td>
+        </tr>
+        <tr><td>
+        <img width="16px" height="16px" id='metabolic-reaction-add-input' src='app/img/add.svg' style="margin-left: 100%"/>
+        </td></tr>
+        </table>
+        </div>
+        </td>
+
+        <!-- Blank space between input and output -->
+        <td id='reaction-template-middle-td' style="width: 45px; vertical-align: top;" align="center"></td>
+
+        <td id ='reaction-template-right-td' align="center">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Output</div>
+        <table id='metabolic-reaction-output-table'>
+        <tr>
+        <td>
+        <input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='1' value=''></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: 120px'>
+        <option value="Simple Chemical" selected>Simple Chemical</option>
+        </td>
+        <td><img class='template-reaction-delete-button' width='16px' height='16px' name='1' src='app/img/toolbar/delete-simple.svg'/>
+        </td>
+        </tr>
+        <tr><td>
+        <img width="16px" height="16px" id='metabolic-reaction-add-output' src='app/img/add.svg' style="margin-left: 100%"/>
+        </td></tr>
+        </table>
+        </div>
+        </td>
+
+      <!--  <td style="width: 50px; margin-left: 50%;"></td> -->
+
+      <tr id="conversion-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">
+        <td colspan='100%'>
+        <div class="thin-blue-border" style="padding: 10px; margin-bottom: 20px; width: fit-content;">
+        <input id="conversion-regulator-checkbox" type='checkbox' class="add-on layout-text" align="center" valign="middle" style="margin-right: 5px">Regulator:</input>
+        <input type='text' class='sbgn-input-medium layout-text' id='conversion-regulator-name' value='' class="text-input-disabled" disabled></input>
+
+        <select id="conversion-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: fit-content' disabled>
+        <option value="macromolecule" selected> Macromolecule </option>
+        <option value="simple chemical"> Simple Chemical </option>
+        <option value="unspecified entity"> Unspecified Entity </option>
+        <option value="complex"> Complex </option>
+        </select>
+        <input id="conversion-multimer-checkbox" type='checkbox' class="layout-text" style="margin-left:10px" disabled></input>
+        <label id="conversion-multimer-label" for="conversion-multimer-checkbox" class="checkbox-label-disabled">Multimer</label>
+        <input id="conversion-multimer-cardinality" type="number" class="layout-text text-input-disabled" style="width: 30px;" value="2" disabled title="Integer value of at least 2"></input>
+        </div>
+        <div class="thin-blue-border" style="padding: 10px; width: fit-content;">
+        <table id="conversion-modification-table">
+        <tr>
+        <td>
+        <select class='sbgn-output-medium layout-text conversion-type-dropdown'>
+        <option value="P-out">Phosphorylation</option>
+        <option value="P-in">Dephosphorylation</option>
+        <option value="Ub-out">Ubiquitination</option>
+        <option value="Ub-in">Deubiquitination</option>
+        <option value="OH-out">Hydroxilation</option>
+        <option value="OH-in">Dehydraxilation</option>
+        <option value="Ac-out">Acetylation</option>
+        <option value="Ac-in">Deacetylation</option>
+        <option value="G-out">Glycosylation</option>
+        <option value="G-in">Deglycosylation</option>
+        <option value="My-out">Myristoylation</option>
+        <option value="My-in">Demyristoylation</option>
+        <option value="Pa-out">Palmitoylation</option>
+        <option value="Pa-in">Depalmitoylation</option>
+        <option value="Pr-out">Prenylation</option>
+        <option value="Pr-in">Deprenylation</option>
+        <option value="S-out">Sulfation</option>
+        <option value="S-in">Desulfation</option>
+        <option value="Me-out">Methylation</option>
+        <option value="Me-in">Demethylation</option>
+        <option value="H-out">Protonation</option>
+        <option value="H-in">Deprotonation</option>
+        <option value="activation">Activation</option>
+        <option value="deactivation">Deactivation</option>
+        </select><label class="layout-text conversion-residue-input-label">Residue:</label><input type='text' class='sbgn-input-medium layout-text conversion-modification-residue-name small-right-margin'></input><img class='template-reaction-delete-button icon-small image-button-disabled-appearance' src='app/img/toolbar/delete-simple.svg'/>
+        </td>
+          </tr>
+          <tr align="center"><td>
+          <img id='conversion-add-modification-button' src='app/img/add.svg' class="icon-small" style="cursor: pointer;"/>
+          </td></tr>
+          </table>
+          </div>
+        </td>
+        </tr>
+
+        <td id='conversion-template-left-td' class="hide">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Input</div>
+        <table id='conversion-input-table'>
+        <tr>
+        <td>
+        <input id='conversion-input-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='1' value=''></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: 120px'>
+        <option value="Macromolecule"> Macromolecule </option>
+        </td>
+        </tr>
+        </table>
+        </div>
+        </td>
+
+        <!-- Blank space between input and output
+        <td style="width: 50px; margin-left: 50%;"></td> -->
+
+
+        <td id='conversion-template-right-td' class="hide">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Output</div>
+        <table id='conversion-output-table'>
+        <tr>
+        <td>
+        <input id='conversion-output-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='1' value=''></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: 120px'>
+        <option value="Macromolecule"> Macromolecule </option>
+        </td>
+        </tr>
+        </table>
+        </div>
+        </td>
+
+        <tr id="multimerization-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">
+        <td colspan='100%'>
+        <div class="thin-blue-border" style="padding: 10px; margin-bottom: 20px; width: fit-content;">
+        <input id="multimerization-regulator-checkbox" type='checkbox' class="add-on layout-text" align="center" valign="middle" style="margin-right: 5px">Regulator:</input>
+        <input id='multimerization-regulator-name' type='text' class='sbgn-input-medium layout-text' value='' class="text-input-disabled" disabled></input>
+
+        <select id="multimerization-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content' disabled>
+        <option value="macromolecule" selected>Macromolecule</option>
+        <option value="simple chemical">Simple Chemical</option>
+        <option value="unspecified entity">Unspecified Entity</option>
+        <option value="complex">Complex</option>
+        </select>
+        <input id="multimerization-multimer-checkbox" type='checkbox' class="layout-text" style="margin-left: 5px;" disabled></input>
+        <label id="multimerization-multimer-label" for="multimerization-multimer-checkbox" class="checkbox-label-disabled">Multimer</label>
+        <input id="multimerization-multimer-cardinality" type="number" class="layout-text text-input-disabled" style="width: 30px;" value="2" disabled title="Integer value of at least 2"></input>
+        <select id="multimerization-regulator-edge-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;' disabled>
+        <option value="stimulation" selected>Stimulation</option>
+        <option value="inhibition">Inhibition</option>
+        </select>
+        </div>
+        </td>
+        </tr>
+
+        <td id='multimerization-template-left-td' class="hide">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Input</div>
+        <table id='multimerization-input-table'>
+        <tr>
+        <td>
+        <input id='multimerization-input-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='1' value=''></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: 120px'>
+        <option value="Macromolecule"> Macromolecule </option>
+        </td>
+        </tr>
+        </table>
+        </div>
+        </td>
+
+        <!-- Blank space between input and output
+        <td style="width: 50px; margin-left: 50%;"></td> -->
+
+
+        <td id='multimerization-template-right-td' class="hide">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Output</div>
+        <table id='multimerization-output-table'>
+        <tr>
+        <td>
+        <input id='multimerization-output-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' name='1' value=''></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' name="1" style='width: 120px'>
+        <option value="Macromolecule"> Macromolecule </option>
+        </td>
+        </tr>
+        </table>
+        </div>
+        </td>
+
+        <tr id="association-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">
+        <td colspan='100%'>
+        <div class="thin-blue-border" style="padding: 10px; margin-bottom: 20px; width: fit-content;">
+        <input id="association-regulator-checkbox" type='checkbox' class="add-on layout-text" align="center" valign="middle" style="margin-right: 5px">Regulator:</input>
+        <input id='association-regulator-name' type='text' class='sbgn-input-medium layout-text' value='' class="text-input-disabled" disabled></input>
+
+        <select id="association-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content' disabled>
+        <option value="macromolecule" selected>Macromolecule</option>
+        <option value="simple chemical">Simple Chemical</option>
+        <option value="unspecified entity">Unspecified Entity</option>
+        <option value="complex">Complex</option>
+        </select>
+        <input id="association-multimer-checkbox" type='checkbox' class="layout-text" style="margin-left: 5px;" disabled></input>
+        <label id="association-multimer-label" for="association-multimer-checkbox" class="checkbox-label-disabled">Multimer</label>
+        <input id="association-multimer-cardinality" type="number" class="layout-text text-input-disabled" style="width: 30px;" value="2" disabled title="Integer value of at least 2"></input>
+        <select id="association-regulator-edge-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;' disabled>
+        <option value="stimulation" selected>Stimulation</option>
+        <option value="inhibition">Inhibition</option>
+        </select>
+        </div>
+        </td>
+        </tr>
+
+        <td id='association-template-left-td' class="hide">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Input</div>
+        <table id='association-input-table'>
+        <tr>
+        <td>
+        <input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' value=''></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
+        <option value="Macromolecule">Macromolecule</option>
+        </td>
+        <td><img class='template-reaction-delete-button icon-small image-button-disabled-appearance' src='app/img/toolbar/delete-simple.svg'/>
+        </td>
+        </tr>
+        <tr>
+        <td>
+        <input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' value=''></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
+        <option value="Macromolecule">Macromolecule</option>
+        </td>
+        <td><img class='template-reaction-delete-button icon-small image-button-disabled-appearance' src='app/img/toolbar/delete-simple.svg'/>
+        </td>
+        </tr>
+        <tr align="center"><td colspan="100%">
+        <img id='association-add-input-button' src='app/img/add.svg' class="icon-small" style="cursor: pointer;"/>
+        </td></tr>
+        </table>
 
-            <%= generateFontPropertiesRows() %>
+        </div>
+        </td>
+
+        <!-- Blank space between input and output
+        <td style="width: 50px; margin-left: 50%;"></td> -->
+
+
+        <td id='association-template-right-td' class="hide">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Output</div>
+        <table id='association-output-table'>
+        <tr>
+        <td>
+        <input id='association-complex-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' value=''></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
+        <option value="Complex">Complex</option>
+        </td>
+        </tr>
+        </table>
+        </div>
+        </td>
+
+        <tr id="dissociation-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">
+        <td colspan='100%'>
+        <div class="thin-blue-border" style="padding: 10px; margin-bottom: 20px; width: fit-content;">
+        <input id="dissociation-regulator-checkbox" type='checkbox' class="add-on layout-text" align="center" valign="middle" style="margin-right: 5px">Regulator:</input>
+        <input id='dissociation-regulator-name' type='text' class='sbgn-input-medium layout-text' value='' class="text-input-disabled" disabled></input>
+
+        <select id="dissociation-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content' disabled>
+        <option value="macromolecule" selected>Macromolecule</option>
+        <option value="simple chemical">Simple Chemical</option>
+        <option value="unspecified entity">Unspecified Entity</option>
+        <option value="complex">Complex</option>
+        </select>
+        <input id="dissociation-multimer-checkbox" type='checkbox' class="layout-text" style="margin-left: 5px;" disabled></input>
+        <label id="dissociation-multimer-label" for="dissociation-multimer-checkbox" class="checkbox-label-disabled">Multimer</label>
+        <input id="dissociation-multimer-cardinality" type="number" class="layout-text text-input-disabled" style="width: 30px;" value="2" disabled title="Integer value of at least 2"></input>
+        <select id="dissociation-regulator-edge-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;' disabled>
+        <option value="stimulation" selected>Stimulation</option>
+        <option value="inhibition">Inhibition</option>
+        </select>
+        </div>
+        </td>
+        </tr>
+
+        <td id='dissociation-template-left-td' class="hide">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Input</div>
+        <table id='dissociation-input-table'>
+        <tr>
+        <td>
+        <input id='dissociation-complex-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' value=''></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
+        <option value="Complex">Complex</option>
+        </td>
+        </tr>
+        </table>
+        </div>
+        </td>
+
+        <!-- Blank space between input and output
+        <td style="width: 50px; margin-left: 50%;"></td> -->
+
+
+        <td id='dissociation-template-right-td' class="hide">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Output</div>
+        <table id='dissociation-output-table'>
+        <tr>
+        <td>
+        <input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' value=''></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
+        <option value="Macromolecule">Macromolecule</option>
+        </td>
+        <td><img class='template-reaction-delete-button icon-small image-button-disabled-appearance' src='app/img/toolbar/delete-simple.svg'/>
+        </td>
+        </tr>
+        <tr>
+        <td>
+        <input type='text' class='template-reaction-textbox sbgn-input-medium layout-text' value=''></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
+        <option value="Macromolecule">Macromolecule</option>
+        </td>
+        <td><img class='template-reaction-delete-button icon-small image-button-disabled-appearance' src='app/img/toolbar/delete-simple.svg'/>
+        </td>
+        </tr>
+        <tr align="center"><td colspan="100%">
+        <img id='dissociation-add-output-button' src='app/img/add.svg' class="icon-small" style="cursor: pointer;"/>
+        </td></tr>
+        </table>
 
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="set-font-properties" class="btn btn-default" >Set</button>
-            </div>
-            </div>
-            </div>
-        </script>
+        </div>
+        </td>
+
+        <tr id="degradation-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">
+        <td colspan='100%'>
+        <div class="thin-blue-border" style="padding: 10px; margin-top: 40px; width: fit-content;">
+        <label for="degradation-input-name" class="layout-text" style="font: inherit;">Input:</label>
+        <input id="degradation-input-name" type='text' class="template-reaction-textbox sbgn-input-medium layout-text"></input>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: 120px'>
+        <option value="Macromolecule">Macromolecule</option>
+        </div>
+        </td>
+        </tr>
 
-        <script type="text/template" id="infobox-properties-template">
-            <div class="modal-dialog modal-sm sbgn-modal-dialog" style="width:360px!important">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Infobox Properties</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table">
-            <tbody>
+        <td id='degradation-template-left-td' class="hide">
+        </td>
 
-            <tr>
-            <td>
-            <span class="add-on layout-text"> Border Color </span>
-            </td>
-            <td>
-            <input id="infobox-properties-border-color" type="color" class="inspector-input-box" value= <%= borderColor %> >
-            </td>
-            </tr>
+        <!-- Blank space between input and output
+        <td style="width: 50px; margin-left: 50%;"></td> -->
 
-            <tr>
-            <td>
-            <span class="add-on layout-text"> Fill Color </span>
-            </td>
-            <td>
-            <input id="infobox-properties-background-color" type="color" class="inspector-input-box" value= <%= fillColor %> >
-            </td>
-            </tr>
 
-            <tr>
-            <td>
-            <span class="add-on layout-text"> Border Width </span>
-            </td>
-            <td>
-            <input id="infobox-properties-border-width" type="text" min="1" class="sbgn-input-small layout-text integer-input" value= <%= borderWidth %> >
-            </td>
-            </tr>
+        <td id='degradation-template-right-td' class="hide">
+        </td>
 
-            <%= generateFontPropertiesRows() %>
-            <%= generateSelectShapeRow() %>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-                <div>
-                    <button id="set-as-default-infobox-properties" class="btn btn-default" style="margin-bottom: 5px; white-space:normal !important; word-wrap: break-word;"><%= generateSetAsDefaultText() %></button>
-                </div>
-                <div>
-                    <button id="set-infobox-properties" class="btn btn-default" >Set</button>
-                </div>
-            </div>
-            </div>
-            </div>
-        </script>
+        <tr id="transcription-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">
+        <td colspan='100%'>
+        <div class="thin-blue-border" style="padding: 10px; margin-bottom: 20px; width: fit-content;">
+        <label for='transcription-regulator-name' class="layout-text" style="font: inherit;"></label>
+        <input id='transcription-regulator-name' type='text' class='sbgn-input-medium layout-text' value='' class="text-input-enabled"></input>
 
-        <!-- since biogene service from PC is not available any more, we now give link to gene properties in My Cancer Genome organization -->       
-        <!-- BioGeneView template for backbone.js -->
-        <!--
+        <select id="transcription-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;'>
+        <option value="macromolecule" selected>Nucleic Acid Feature</option>
+        </select>
+        <select id="transcription-regulator-edge-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;'>
+        <option value="stimulation" selected>Necessary Stimulation</option>
+        </select>
+        </div>
+        </td>
+        </tr>
+
+        <td id='transcription-template-left-td' class="hide">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Input</div>
+        <table id='transcription-input-table'>
+        <tr>
+        <td>
+        <input id='transcription-input-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' style="cursor: not-allowed;" disabled></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content'>
+        <option value="empty-set">Empty Set</option>
+        </td>
+        </tr>
+        </table>
+        </div>
+        </td>
+
+        <!-- Blank space between input and output
+        <td style="width: 50px; margin-left: 50%;"></td> -->
+
+
+        <td id='transcription-template-right-td' class="hide">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Output</div>
+        <table id='transcription-output-table'>
+        <tr>
+        <td>
+        <input id='transcription-output-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text'></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content;'>
+        <option value="Macromolecule">Nucleic Acid Feature</option>
+        </td>
+        </tr>
+        </table>
+        </div>
+        </td>
+
+        <tr id="translation-top-input-row" class="hide" align="center" style="height: 40px; vertical-align: bottom;">
+        <td colspan='100%'>
+        <div class="thin-blue-border" style="padding: 10px; margin-bottom: 20px; width: fit-content;">
+        <label for='translation-regulator-name' class="layout-text" style="font: inherit;"></label>
+        <input id='translation-regulator-name' type='text' class='sbgn-input-medium layout-text' value='' class="text-input-enabled"></input>
+
+        <select id="translation-regulator-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;'>
+        <option value="macromolecule" selected>Nucleic Acid Feature</option>
+        </select>
+        <select id="translation-regulator-edge-type" class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content; margin-left: 10px;'>
+        <option value="stimulation" selected>Necessary Stimulation</option>
+        </select>
+        </div>
+        </td>
+        </tr>
+
+        <td id='translation-template-left-td' class="hide">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Input</div>
+        <table id='translation-input-table'>
+        <tr>
+        <td>
+        <input id='translation-input-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text' style="cursor: not-allowed;" disabled></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content'>
+        <option value="empty set">Empty Set</option>
+        </td>
+        </tr>
+        </table>
+        </div>
+        </td>
+
+        <!-- Blank space between input and output
+        <td style="width: 50px; margin-left: 50%;"></td> -->
+
+
+        <td id='translation-template-right-td' class="hide">
+        <div class="thin-blue-border">
+        <div style="margin-bottom: 5px;">Output</div>
+        <table id='translation-output-table'>
+        <tr>
+        <td>
+        <input id='translation-output-name' type='text' class='template-reaction-textbox sbgn-input-medium layout-text'></input>
+        </td>
+        <td>
+        <select class='template-reaction-molecule-type sbgn-output-medium layout-text' style='width: fit-content;'>
+        <option value="Macromolecule">Macromolecule</option>
+        </td>
+        </tr>
+        </table>
+        </div>
+        </td>
+
+        </tr>
+        <tr id="conversion-bottom-row" class="hide">
+        <td colspan="100%" align="center">
+        <input id="conversion-macromolecule-multimer-checkbox" type="checkbox" style="margin-right: 5px;">Multimer</input>
+        <input id="conversion-macromolecule-multimer-cardinality" type="number" class="layout-text text-input-disabled" style="margin-left: 5px; width: 30px;" value="2" disabled title="Integer value of at least 2"></input>
+        </td>
+        </tr>
+        <tr id="multimerization-bottom-row" class="hide">
+        <td colspan="100%" align="center">
+        <label for="multimerization-macromolecule-multimer-cardinality" class="layout-text" style="font: inherit;">Multimer cardinality:</label>
+        <input id="multimerization-macromolecule-multimer-cardinality" type="number" class="layout-text" style="margin-left: 5px; width: 30px;" value="2" title="Integer value of at least 2"></input>
+        </td>
+        </tr>
+        </tbody>
+        </table>
+        </div>
+        <div class="col-md-4">
+        <div style="text-align:center; padding: 5px;">
+        <select id="metabolic-reaction-orientation-select" class="sbgn-output-medium layout-text" id="brick-orientation-input">
+            <option value="horizontal">Left-to-right</option>
+            <option value="vertical">Top-to-bottom</option>
+        </select>
+        </div>
+        <div id="sbgn-brick-preview-cy-div" class="thin-blue-border cy-preview-area"></div>
+        </div>
+        </div>
+        </div>
+        <div class="modal-footer" style="text-align: center">
+        <button id="create-sbgn-brick" class="btn btn-default">Create</button>
+        <button id="cancel-sbgn-brick" class="btn btn-default">Cancel</button>
+        </div>
+        </div>
+        </div>
+    </script>
+
+    <script type="text/template" id="grid-properties-template">
+               <div class="modal-dialog sbgn-modal-dialog" style="width: 573px;">
+      <div class="modal-content">
+               <div class="modal-header">
+               <button type="button" class="close" data-dismiss="modal">&times;</button>
+               <h4 class="modal-title">Grid  and Guidelines Properties</h4>
+               </div>
+               <div class="modal-body">
+               <table class="table-condensed layout-table dialog-table property-table" style="padding-bottom: 4px;">
+               <tbody>
+        <tr> <th> Grid </th> </tr>
+               <tr>
+               <td style="padding-right: 20px;">
+               <input id="show-grid" type="checkbox" class="layout-text" <% if (showGrid){ %> checked<%}%>>
+               <span class="add-on layout-text"> Show Grid </span>
+               </td>
+               <td style="padding-right: 25px;">
+               <span class="add-on layout-text"> Size </span>
+               <input id="grid-size" type="text" min="5" class="sbgn-input-small layout-text integer-input" value= <%= gridSize %> >
+               </td>
+               <td style="padding-right: 25px;">
+               <span class="add-on layout-text"> Color </span>
+               <input id="grid-color" type="color" class="sbgn-input-small layout-text" value= <%= gridColor %> >
+               </td>
+               <td>
+               <input id="auto-resize-nodes" type="checkbox" class="layout-text" <% if (autoResizeNodes){ %> checked<%}%>>
+               <span class="add-on layout-text"> Auto  Resize Nodes </span>
+               </td>
+               </tr>
+               </tbody>
+               </table>
+               <table class="table-condensed layout-table dialog-table property-table" style="padding-bottom: 4px;">
+               <tbody>
+      <tr> <th colspan="100%"> Snap Policy </th> </tr>
+      <tr>
+               <td style="padding-right: 10px">
+               <input id="no-snap" type="radio" name="snap-policy" class="layout-text" <% if (!snapToGridDuringDrag && !snapToGridOnRelease && !snapToAlignmentLocationOnRelease && !snapToAlignmentLocationDuringDrag){ %> checked<%}%>>
+               <span class="add-on layout-text"> No Snap </span>
+               </td>
+               <td style="padding-left: 10px; padding-right: 5px;">
+               <span> Snap to Grid: </span>
+               </td>
+               <td style="padding-left: 0px; padding-right: 10px;">
+               <select id="snap-to-grid">
+                 <option value="disabled" <% if (!snapToGridDuringDrag && !snapToGridOnRelease){ %> selected<% }%> > Disabled </option>
+                 <option value="onRelease" <% if (snapToGridOnRelease){ %> selected<% }%> > On Release </option>
+                 <option value="duringDrag" <% if (snapToGridDuringDrag){ %> selected<% }%> > During Drag </option>
+               </select>
+               </td>
+               <td style="padding-left: 10px; padding-right: 5px;">
+               <span> Snap to Alignment Location: </span>
+               </td>
+               <td style="padding-left: 0px;">
+               <select id="snap-to-alignment-location">
+                 <option value="disabled" <% if (!snapToAlignmentLocationOnRelease && !snapToAlignmentLocationDuringDrag){ %> selected<% }%> > Disabled </option>
+                 <option value="onRelease" <% if (snapToAlignmentLocationOnRelease){ %> selected<% }%> > On Release </option>
+                 <option value="duringDrag" <% if (snapToAlignmentLocationDuringDrag){ %> selected<% }%> > During Drag </option>
+               </select>
+               </td>
+               </tr>
+               </tbody>
+               </table>
+               <table class="table-condensed layout-table dialog-table property-table" style="padding-bottom: 4px !important;">
+               <tbody>
+               <tr> <th colspan="100%"> Alignment Guidelines </th> </tr>
+               <tr>
+               <td style="padding-bottom: 20px !important; width: 140px;">
+               <span class="add-on layout-text"> Reference Guideline</span>
+               </td>
+               <td style="padding-bottom: 20px !important;">
+               <input id="show-init-Pos-Alignment" type="checkbox" class="layout-text" <% if (showInitPosAlignment){ %> checked<%}%>>
+               </td>
+               <td style="padding-bottom: 20px !important; padding-left: 0px;">
+               Style
+               </td>
+               <td style="padding-bottom: 20px !important;">
+               <input id="init-Pos-Alignment-Color" type="color" class="sbgn-input-small layout-text" value= <%= initPosAlignmentColor %> >
+               </td>
+
+               <td style="padding-bottom: 20px !important;">
+               <select name="init-Pos-Alignment-Line">
+                 <option value="0,0" <% if (initPosAlignmentLine[0] == 0 && initPosAlignmentLine[1] == 0){ %> selected<% }%> > Solid </option>
+                 <option value="3,5" <% if (initPosAlignmentLine[0] != 0 || initPosAlignmentLine[1] != 0){ %> selected<% }%> > Dashed </option>
+               </select>
+               </td>
+               </tr>
+
+               <tr>
+               <td style="padding-bottom: 20px !important; width: 140px;">
+               <span class="add-on layout-text"> Geometric Guidelines </span>
+               </td>
+
+               <td style="padding-bottom: 20px !important;">
+               <input id="show-geometric-guidelines" type="checkbox" class="layout-text" <% if (showGeometricGuidelines){ %> checked<%}%>>
+               </td>
+               <td style="padding-bottom: 20px !important; padding-left: 0px;">
+               Style
+               </td>
+               <td style="padding-bottom: 20px !important;">
+               <input id="geometric-guideline-color" type="color" class="sbgn-input-small layout-text" value= <%= guidelineColor %> >
+               </td>
+               <td style="padding-bottom: 20px !important;">
+               <select id="geometric-Alignment-Line">
+                 <option value="0,0" <% if (lineDash[0] == 0 && lineDash[1] == 0){ %> selected<% }%> > Solid </option>
+                 <option value="3,5" <% if (lineDash[0] != 0 || lineDash[1] != 0){ %> selected<% }%> > Dashed </option>
+               </select>
+               </td>
+               <td style="padding-bottom: 20px !important; padding-left: 35px;">
+               <span class="add-on layout-text"> Range </span>
+               </td>
+
+               <td style="padding-bottom: 20px !important;">
+               <input id="geometric-alignment-range" type="text" class="sbgn-input-small layout-text float-input" value= <%= geometricAlignmentRange %> >
+               </td>
+
+               </tr>
+
+               <tr>
+               <td rowspan="2">
+               <span class="add-on layout-text"> Distribution Guidelines </span>
+               </td>
+
+               <td rowspan="2">
+               <input id="show-distribution-guidelines" type="checkbox" class="layout-text" <% if (showDistributionGuidelines){ %> checked<%}%>>
+               </td>
+               <td style="padding-left: 0px;">
+               <span class="add-on layout-text"> Horizontal </span>
+               </td>
+
+               <td>
+               <input id="horizontal-guideline-color" type="color" class="sbgn-input-small layout-text" value= <%= horizontalGuidelineColor %> >
+               </td>
+               <td>
+               <select name="horizontal-Dist-Alignment-Line">
+                 <option value="0,0" <% if (horizontalDistLine[0] == 0 && horizontalDistLine[1] == 0){ %> selected<% }%> > Solid </option>
+                 <option value="3,5" <% if (horizontalDistLine[0] != 0 || horizontalDistLine[1] != 0){ %> selected<% }%> > Dashed </option>
+               </select>
+               </td>
+               <td rowspan="2" style="padding-left: 35px;">
+               <span class="add-on layout-text"> Range </span>
+               </td>
+
+               <td rowspan="2">
+               <input id="distribution-alignment-range" type="text" class="sbgn-input-small layout-text float-input" value= <%= distributionAlignmentRange %> >
+               </td>
+               </tr>
+
+               <tr>
+               <td style="padding-left: 0px;>
+               <span class="add-on layout-text"> Vertical </span>
+               </td>
+
+               <td>
+               <input id="vertical-guideline-color" type="color" class="sbgn-input-small layout-text" value= <%= verticalGuidelineColor %> >
+               </td>
+      <td>
+      <select name="vertical-Dist-Alignment-Line">
+        <option value="0,0" <% if (verticalDistLine[0] == 0 && verticalDistLine[1] == 0){ %> selected<% }%> > Solid </option>
+        	  <option value="3,5" <% if (verticalDistLine[0] != 0 || verticalDistLine[1] != 0){ %> selected<% }%> > Dashed </option>
+      </select>
+      </td>
+
+               <tr>
+               <td style="padding-top: 20px !important; width: 140px;">
+               <span class="add-on layout-text"> Guideline Tolerance </span>
+               </td>
+
+               <td style="padding-top: 20px !important;">
+               <input id="guideline-tolerance" type="text" min="0" class="sbgn-input-small layout-text float-input" value= <%= guidelineTolerance %> >
+               </td>
+               </tr>
+
+               </tr>
+               </tbody>
+               </table>
+               </div>
+               <div class="modal-footer" style="text-align: center">
+               <button id="save-grid" class="btn btn-default" >Save</button>
+               <button id="default-grid" class="btn btn-default">Default</button>
+               </div>
+               </div>
+               </div>
+    </script>
+
+    <script type="text/template" id="font-properties-template">
+      <div class="modal-dialog modal-sm sbgn-modal-dialog">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Font Properties</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table">
+      <tbody>
+
+      <%= generateFontPropertiesRows() %>
+
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="set-font-properties" class="btn btn-default" >Set</button>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="infobox-properties-template">
+      <div class="modal-dialog modal-sm sbgn-modal-dialog" style="width:360px!important">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Infobox Properties</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table">
+      <tbody>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text"> Border Color </span>
+      </td>
+      <td>
+      <input id="infobox-properties-border-color" type="color" class="inspector-input-box" value= <%= borderColor %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text"> Fill Color </span>
+      </td>
+      <td>
+      <input id="infobox-properties-background-color" type="color" class="inspector-input-box" value= <%= fillColor %> >
+      </td>
+      </tr>
+
+      <tr>
+      <td>
+      <span class="add-on layout-text"> Border Width </span>
+      </td>
+      <td>
+      <input id="infobox-properties-border-width" type="text" min="1" class="sbgn-input-small layout-text integer-input" value= <%= borderWidth %> >
+      </td>
+      </tr>
+
+      <%= generateFontPropertiesRows() %>
+      <%= generateSelectShapeRow() %>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+          <div>
+              <button id="set-as-default-infobox-properties" class="btn btn-default" style="margin-bottom: 5px; white-space:normal !important; word-wrap: break-word;"><%= generateSetAsDefaultText() %></button>
+          </div>
+          <div>
+              <button id="set-infobox-properties" class="btn btn-default" >Set</button>
+          </div>
+      </div>
+      </div>
+      </div>
+    </script>
+
+    <!-- since biogene service from PC is not available any more, we now give link to gene properties in My Cancer Genome organization -->
+    <!-- BioGeneView template for backbone.js -->
+    <!--
         <script type="text/template" id="biogene-template">
             <div class='node-details-text'>
             <table class="table table-condensed table-striped object-panel-table" cellspacing="10">
@@ -3482,10 +5326,10 @@ <h4 class="modal-title">Infobox Properties</h4>
             <%=geneUniprotId %>
             </a>
         -->
-            <!--<span class='biogene-uniprot-links-extra'> -->
-            <!--<%= geneUniprotLinks %> -->
-            <!--</span>-->
-        <!--    
+    <!--<span class='biogene-uniprot-links-extra'> -->
+    <!--<%= geneUniprotLinks %> -->
+    <!--</span>-->
+    <!--    
             </td>
             </tr>
             <tr class="biogene-info biogene-id">
@@ -3501,223 +5345,222 @@ <h4 class="modal-title">Infobox Properties</h4>
             </div>
         </script>
         -->
-        
-        <!-- ChemicalView template for backbone.js -->
-        <script type="text/template" id="chemical-template">
-            <!--<div class='node-details-text'>-->
-                <table class="table table-condensed table-striped object-panel-table" cellspacing="10">
-                    <tbody>
-                    <tr class="chemical-info chebi-name">
-                        <th valign="top">ChEBI Name:</th>
-                        <td>
-                            <%=chebiName %>
-                        </td>
-                    </tr>
-                    <tr class="chemical-info chemical-description node-details-summary">
-                        <th valign="top">Chemical Description:</th>
-                        <td colspan="2" class="expandable">
-                            <%=chemicalDescription %>
-                        </td>
-                    </tr>
-                    <tr class="chemical-info chebi-id">
-                        <th valign="top">ChEBI ID:</th>
-                        <td>
-                            <a href='https://www.ebi.ac.uk/chebi/searchId.do?chebiId=CHEBI:<%= chebiID %>' target='blank'>
-                                <%=chebiID %>
-                            </a>
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </script>
-
-        <script type="text/template" id="uniprot-link-template">
-            <a href="http://www.uniprot.org/uniprot/<%= id %>" target="_blank">
-            <%=id %>
-            </a>
-        </script>
-
-        <!-- annotations template for backbone.js -->
-        <script type="text/template" id="annotation-list-template">
-            <div>
-                <% for( var i=0; i<elements.length; i++) { %>
-                    <%= elements[i] %>
-                <% } %>
-                <% if (elements.length == 0) { %>
-                    <p id="annotations-small-helptext">Attach data to the element by adding custom properties or controlled MIRIAM annotations.</p>
-                <% } %>
-            </div>
-            <img width="16px" height="16px" src="app/img/add.svg" id="annotations-add-button" class="pointer-button">
-        </script>
 
-        <script type="text/template" id="annotation-element-template">
-            <div style="padding: 5px;border-bottom: 1px solid rgb(221, 221, 221);">
-                <div style="float:left;width:93%;">
-                    <select style="width: 50%;margin-right:2%;float:left;" class="annotations-vocabulary-list" id="annotations-vocabulary-list-<%= index %>" title="<%= vocabulary[selectedRelation].description %>">
-                        <% for( var relation in vocabulary) { %>
-                            <option value="<%= relation %>" <% if (relation == selectedRelation){ %> selected<%}%> title="<%= vocabulary[relation].description %>"><%= vocabulary[relation].label %></option>
-                        <% } %>
-                    </select>
-
-                    <% if (vocabulary[selectedRelation].controlled){ %>
-                        <!-- controlled case -->
-
-                        <select style="width: 47%;margin-left:0px;float:left;" class="annotations-db-list" id="annotations-db-list-<%= index %>">
-                            <% for( var db in dbList) { %>
-                                <option value="<%= db %>" <% if (db == selectedDB){ %> selected<%}%> ><%= dbList[db].label %></option>
-                            <% } %>
-                        </select>
-                    <%} else {%>
-                        <!-- uncontrolled case -->
-
-                        <input style="width: 47%;margin-left:0px;float:left;" type="text" class="annotations-db-list" id="annotations-db-list-<%= index %>" list="userDefinedProperties" <% if (selectedDB != null){ %> value="<%= selectedDB %>" <%}%> />
-                        <datalist id="userDefinedProperties">
-                            <% for( var i=0; i<userDefinedProperties.length; i++) { %>
-                                <option value="<%= userDefinedProperties[i] %>">
-                            <% } %>
-                        </datalist>
-                    <%}%>
-                    <div style="clear:both;"></div>
-
-                    <div style="display:flex;align-items:center;">
-                        <input type="text" style="width: 70%;float:left;margin-top:5px;margin-right:2%;" class="annotations-object-identifier" id="annotations-object-identifier-<%= index %>" <% if (annotationValue != null){ %> value="<%= annotationValue %>" <%}%>/>
-
-                        <% if (vocabulary[selectedRelation].controlled){ %>
-                            <!-- reflect status of validation with icon -->
-                            <div style="float:left;margin-top:5px;" id="annotations-status-icon-<%= index %>">
-                            <% if (status == "unchecked"){ %>
-                                <i style="color:#E6E6E6;" class="fa fa-check fa-lg" title="No validation was done. Fill the input on the left or change the database to trigger validation."></i>
-                            <%} else if (status == "pending"){ %>
-                                <i class="fa fa-spinner fa-spin fa-lg fa-fw"></i>
-                            <%} else if (status == "validated"){ %>
-                                <i style="color:green;" class="fa fa-check fa-lg" title="The identifier has been successfully checked and validated."></i>
-                            <%} else if (status == "error"){ %>
-                                <i style="color:#FE2E2E;" class="fa fa-exclamation-triangle" title="The identifier could not be validated."></i>
-                                <a href="#" style="color:#FE2E2E;" class="annotations-retry-validation">Retry</a>
-                            <%}%>
-                            </div>
-                        <%}%>
-                    </div>
+    <!-- ChemicalView template for backbone.js -->
+    <script type="text/template" id="chemical-template">
+      <!--<div class='node-details-text'>-->
+          <table class="table table-condensed table-striped object-panel-table" cellspacing="10">
+              <tbody>
+              <tr class="chemical-info chebi-name">
+                  <th valign="top">ChEBI Name:</th>
+                  <td>
+                      <%=chebiName %>
+                  </td>
+              </tr>
+              <tr class="chemical-info chemical-description node-details-summary">
+                  <th valign="top">Chemical Description:</th>
+                  <td colspan="2" class="expandable">
+                      <%=chemicalDescription %>
+                  </td>
+              </tr>
+              <tr class="chemical-info chebi-id">
+                  <th valign="top">ChEBI ID:</th>
+                  <td>
+                      <a href='https://www.ebi.ac.uk/chebi/searchId.do?chebiId=CHEBI:<%= chebiID %>' target='blank'>
+                          <%=chebiID %>
+                      </a>
+                  </td>
+              </tr>
+              </tbody>
+          </table>
+      </div>
+    </script>
+
+    <script type="text/template" id="uniprot-link-template">
+      <a href="http://www.uniprot.org/uniprot/<%= id %>" target="_blank">
+      <%=id %>
+      </a>
+    </script>
+
+    <!-- annotations template for backbone.js -->
+    <script type="text/template" id="annotation-list-template">
+      <div>
+          <% for( var i=0; i<elements.length; i++) { %>
+              <%= elements[i] %>
+          <% } %>
+          <% if (elements.length == 0) { %>
+              <p id="annotations-small-helptext">Attach data to the element by adding custom properties or controlled MIRIAM annotations.</p>
+          <% } %>
+      </div>
+      <img width="16px" height="16px" src="app/img/add.svg" id="annotations-add-button" class="pointer-button">
+    </script>
+
+    <script type="text/template" id="annotation-element-template">
+      <div style="padding: 5px;border-bottom: 1px solid rgb(221, 221, 221);">
+          <div style="float:left;width:93%;">
+              <select style="width: 50%;margin-right:2%;float:left;" class="annotations-vocabulary-list" id="annotations-vocabulary-list-<%= index %>" title="<%= vocabulary[selectedRelation].description %>">
+                  <% for( var relation in vocabulary) { %>
+                      <option value="<%= relation %>" <% if (relation == selectedRelation){ %> selected<%}%> title="<%= vocabulary[relation].description %>"><%= vocabulary[relation].label %></option>
+                  <% } %>
+              </select>
 
-                    <div style="clear:both;"></div>
-                </div>
-                <div style="width:6%;float:right;height:51px;display:flex;align-items:center;" class="delete-annotation pointer-button">
-                    <img width="16px" height="16px" src="app/img/toolbar/delete-simple.svg" style="margin:auto;"/>
-                </div>
-                <div style="clear:both;"></div>
-            </div>
-        </script>
+              <% if (vocabulary[selectedRelation].controlled){ %>
+                  <!-- controlled case -->
 
-        <script type="text/template" id="color-scheme-inspector-template">
-          <div style="margin-top:5px;">
-           
-              <div style="margin-bottom:5px; text-align: center;">
-                <class="add-on layout-text" title="Applies a uniform color scheme to the entire map. The colors may be reversed with the associated icon.">Style</>
-                <class="add-on layout-text" style="margin-left:2%;"></>
-                <select id="color-scheme-inspector-style-select" class="color-scheme-type-select" style="margin-left: %7;">
-                  <option id="color-scheme-inspector-style-solid" value="solid" <% if (scheme_type == 'solid') print('selected')%>> Solid </option>
-                  <option id="color-scheme-inspector-style-gradient" value="gradient" <% if (scheme_type == 'gradient') print('selected')%>> Gradient </option>
-                  <option id="color-scheme-inspector-style-3D" value="3D" <% if (scheme_type == '3D') print('selected')%>> 3D </option>
-                </select>
+                  <select style="width: 47%;margin-left:0px;float:left;" class="annotations-db-list" id="annotations-db-list-<%= index %>">
+                      <% for( var db in dbList) { %>
+                          <option value="<%= db %>" <% if (db == selectedDB){ %> selected<%}%> ><%= dbList[db].label %></option>
+                      <% } %>
+                  </select>
+              <%} else {%>
+                  <!-- uncontrolled case -->
+
+                  <input style="width: 47%;margin-left:0px;float:left;" type="text" class="annotations-db-list" id="annotations-db-list-<%= index %>" list="userDefinedProperties" <% if (selectedDB != null){ %> value="<%= selectedDB %>" <%}%> />
+                  <datalist id="userDefinedProperties">
+                      <% for( var i=0; i<userDefinedProperties.length; i++) { %>
+                          <option value="<%= userDefinedProperties[i] %>">
+                      <% } %>
+                  </datalist>
+              <%}%>
+              <div style="clear:both;"></div>
+
+              <div style="display:flex;align-items:center;">
+                  <input type="text" style="width: 70%;float:left;margin-top:5px;margin-right:2%;" class="annotations-object-identifier" id="annotations-object-identifier-<%= index %>" <% if (annotationValue != null){ %> value="<%= annotationValue %>" <%}%>/>
+
+                  <% if (vocabulary[selectedRelation].controlled){ %>
+                      <!-- reflect status of validation with icon -->
+                      <div style="float:left;margin-top:5px;" id="annotations-status-icon-<%= index %>">
+                      <% if (status == "unchecked"){ %>
+                          <i style="color:#E6E6E6;" class="fa fa-check fa-lg" title="No validation was done. Fill the input on the left or change the database to trigger validation."></i>
+                      <%} else if (status == "pending"){ %>
+                          <i class="fa fa-spinner fa-spin fa-lg fa-fw"></i>
+                      <%} else if (status == "validated"){ %>
+                          <i style="color:green;" class="fa fa-check fa-lg" title="The identifier has been successfully checked and validated."></i>
+                      <%} else if (status == "error"){ %>
+                          <i style="color:#FE2E2E;" class="fa fa-exclamation-triangle" title="The identifier could not be validated."></i>
+                          <a href="#" style="color:#FE2E2E;" class="annotations-retry-validation">Retry</a>
+                      <%}%>
+                      </div>
+                  <%}%>
               </div>
 
+              <div style="clear:both;"></div>
+          </div>
+          <div style="width:6%;float:right;height:51px;display:flex;align-items:center;" class="delete-annotation pointer-button">
+              <img width="16px" height="16px" src="app/img/toolbar/delete-simple.svg" style="margin:auto;"/>
+          </div>
+          <div style="clear:both;"></div>
+      </div>
+    </script>
+
+    <script type="text/template" id="color-scheme-inspector-template">
+      <div style="margin-top:5px;">
+
+          <div style="margin-bottom:5px; text-align: center;">
+            <class="add-on layout-text" title="Applies a uniform color scheme to the entire map. The colors may be reversed with the associated icon.">Style</>
+            <class="add-on layout-text" style="margin-left:2%;"></>
+            <select id="color-scheme-inspector-style-select" class="color-scheme-type-select" style="margin-left: %7;">
+              <option id="color-scheme-inspector-style-solid" value="solid" <% if (scheme_type == 'solid') print('selected')%>> Solid </option>
+              <option id="color-scheme-inspector-style-gradient" value="gradient" <% if (scheme_type == 'gradient') print('selected')%>> Gradient </option>
+              <option id="color-scheme-inspector-style-3D" value="3D" <% if (scheme_type == '3D') print('selected')%>> 3D </option>
+            </select>
+          </div>
+
 
-              <div id='solid-color-scheme-display' <% if (scheme_type == 'solid') {print('style="display: block;"');} else { print('style="display: none;"'); }%>>
-                  <% for(var scheme_id in schemes) { %>
-                      <% if(schemes[scheme_id].isDisplayed) {%>
-                          <div style="display:block; width:70%; margin:0 auto;">
-                              <div id='map-color-scheme_<%= scheme_id%>' class="color-scheme-choice pointer-button" style="width:85%; float:left; padding: 5px ">
-                                  <div id='map-color-scheme_preview_<%= scheme_id%>' style='width:100%; height:25px; float:left; border:<% if (current_scheme == scheme_id) print("3px"); else print("1px")%> solid black; display:block;'>
-                                      <%= schemes[scheme_id].previewHtml %>
-                                  </div>
-                              </div>
-                              <% if(schemes[scheme_id].invert) {%>
-                                  <div id='map-color-scheme_invert_<%= scheme_id%>' title="Reverse colors" class="color-scheme-invert-button pointer-button" style='width:15%; float:left; height:35px; text-align:center; display:flex; align-items:center;'>
-                                      <img width="18px" height="18px" src="app/img/tabs/swap.svg" style="margin:auto;"/>
-                                  </div>
-                              <% } %>
-                              <div style="clear:both"></div>
+          <div id='solid-color-scheme-display' <% if (scheme_type == 'solid') {print('style="display: block;"');} else { print('style="display: none;"'); }%>>
+              <% for(var scheme_id in schemes) { %>
+                  <% if(schemes[scheme_id].isDisplayed) {%>
+                      <div style="display:block; width:70%; margin:0 auto;">
+                          <div id='map-color-scheme_<%= scheme_id%>' class="color-scheme-choice pointer-button" style="width:85%; float:left; padding: 5px ">
+                              <div id='map-color-scheme_preview_<%= scheme_id%>' style='width:100%; height:25px; float:left; border:<% if (current_scheme == scheme_id) print("3px"); else print("1px")%> solid black; display:block;'>
+                                  <%= schemes[scheme_id].previewHtml %>
+                              </div>
                           </div>
-                      <% } %>
+                          <% if(schemes[scheme_id].invert) {%>
+                              <div id='map-color-scheme_invert_<%= scheme_id%>' title="Reverse colors" class="color-scheme-invert-button pointer-button" style='width:15%; float:left; height:35px; text-align:center; display:flex; align-items:center;'>
+                                  <img width="18px" height="18px" src="app/img/tabs/swap.svg" style="margin:auto;"/>
+                              </div>
+                          <% } %>
+                          <div style="clear:both"></div>
+                      </div>
                   <% } %>
-              </div>
+              <% } %>
+          </div>
 
-              <div id='gradient-color-scheme-display' <% if (scheme_type == 'gradient') {print('style="display: block;"');} else { print('style="display: none;"'); }%>>
-                  <% for(var scheme_id in schemes_gradient) { %>
-                      <% if(schemes_gradient[scheme_id].isDisplayed) {%>
-                          <div style="display:block; width:70%; margin:0 auto;">
-                              <div id='map-color-scheme_<%= scheme_id%>' class="color-scheme-choice pointer-button" style="width:85%; float:left; padding: 5px ">
-                                  <div id='map-color-scheme_preview_<%= scheme_id%>' style='width:100%; height:25px; float:left; border:<% if (current_scheme == scheme_id) print("3px"); else print("1px")%> solid black; display:block;'>
-                                      <%= schemes_gradient[scheme_id].previewHtml %>
-                                  </div>
-                              </div>
-                              <% if(schemes_gradient[scheme_id].invert) {%>
-                                  <div id='map-color-scheme_invert_<%= scheme_id%>' title="Reverse colors" class="color-scheme-invert-button pointer-button" style='width:15%; float:left; height:35px; text-align:center; display:flex; align-items:center;'>
-                                      <img width="18px" height="18px" src="app/img/tabs/swap.svg" style="margin:auto;"/>
-                                  </div>
-                              <% } %>
-                              <div style="clear:both"></div>
+          <div id='gradient-color-scheme-display' <% if (scheme_type == 'gradient') {print('style="display: block;"');} else { print('style="display: none;"'); }%>>
+              <% for(var scheme_id in schemes_gradient) { %>
+                  <% if(schemes_gradient[scheme_id].isDisplayed) {%>
+                      <div style="display:block; width:70%; margin:0 auto;">
+                          <div id='map-color-scheme_<%= scheme_id%>' class="color-scheme-choice pointer-button" style="width:85%; float:left; padding: 5px ">
+                              <div id='map-color-scheme_preview_<%= scheme_id%>' style='width:100%; height:25px; float:left; border:<% if (current_scheme == scheme_id) print("3px"); else print("1px")%> solid black; display:block;'>
+                                  <%= schemes_gradient[scheme_id].previewHtml %>
+                              </div>
                           </div>
-                      <% } %>
+                          <% if(schemes_gradient[scheme_id].invert) {%>
+                              <div id='map-color-scheme_invert_<%= scheme_id%>' title="Reverse colors" class="color-scheme-invert-button pointer-button" style='width:15%; float:left; height:35px; text-align:center; display:flex; align-items:center;'>
+                                  <img width="18px" height="18px" src="app/img/tabs/swap.svg" style="margin:auto;"/>
+                              </div>
+                          <% } %>
+                          <div style="clear:both"></div>
+                      </div>
                   <% } %>
-              </div>
+              <% } %>
+          </div>
 
-              <div id='3D-color-scheme-display'  <% if (scheme_type == '3D') {print('style="display: block;"');} else { print('style="display: none;"'); }%>>
-                  <% for(var scheme_id in schemes_3D) { %>
-                      <% if(schemes_3D[scheme_id].isDisplayed) {%>
-                          <div style="display:block; width:70%; margin:0 auto;">
-                              <div id='map-color-scheme_<%= scheme_id%>' class="color-scheme-choice pointer-button" style="width:85%; float:left; padding: 5px ">
-                                  <div id='map-color-scheme_preview_<%= scheme_id%>' style='width:100%; height:25px; float:left; border:<% if (current_scheme == scheme_id) print("3px"); else print("1px")%> solid black; display:block;'>
-                                      <%= schemes_3D[scheme_id].previewHtml %>
-                                  </div>
-                              </div>
-                              <% if(schemes_3D[scheme_id].invert) {%>
-                                  <div id='map-color-scheme_invert_<%= scheme_id%>' title="Reverse colors" class="color-scheme-invert-button pointer-button" style='width:15%; float:left; height:35px; text-align:center; display:flex; align-items:center;'>
-                                      <img width="18px" height="18px" src="app/img/tabs/swap.svg" style="margin:auto;"/>
-                                  </div>
-                              <% } %>
-                              <div style="clear:both"></div>
+          <div id='3D-color-scheme-display'  <% if (scheme_type == '3D') {print('style="display: block;"');} else { print('style="display: none;"'); }%>>
+              <% for(var scheme_id in schemes_3D) { %>
+                  <% if(schemes_3D[scheme_id].isDisplayed) {%>
+                      <div style="display:block; width:70%; margin:0 auto;">
+                          <div id='map-color-scheme_<%= scheme_id%>' class="color-scheme-choice pointer-button" style="width:85%; float:left; padding: 5px ">
+                              <div id='map-color-scheme_preview_<%= scheme_id%>' style='width:100%; height:25px; float:left; border:<% if (current_scheme == scheme_id) print("3px"); else print("1px")%> solid black; display:block;'>
+                                  <%= schemes_3D[scheme_id].previewHtml %>
+                              </div>
                           </div>
-                      <% } %>
+                          <% if(schemes_3D[scheme_id].invert) {%>
+                              <div id='map-color-scheme_invert_<%= scheme_id%>' title="Reverse colors" class="color-scheme-invert-button pointer-button" style='width:15%; float:left; height:35px; text-align:center; display:flex; align-items:center;'>
+                                  <img width="18px" height="18px" src="app/img/tabs/swap.svg" style="margin:auto;"/>
+                              </div>
+                          <% } %>
+                          <div style="clear:both"></div>
+                      </div>
                   <% } %>
-              </div>
-
+              <% } %>
           </div>
 
-          <div style='text-align: center; margin-top: 5px;'>
-            <button class='btn btn-default' style='align: center;' id='map-color-scheme-default-button'>Default</button>
-          <div>
-            
-        </script>
-        <script type="text/template" id="prompt-invalidSchematronFile-template">
-            <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
-            <div class="modal-content">
-            <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">&times;</button>
-            <h4 class="modal-title">Warning</h4>
-            </div>
-            <div class="modal-body">
-            <table class="table-condensed layout-table dialog-table" style="margin: auto;">
-            <tbody>
-            <tr>
-            <th style="padding-left: 0px;" align="left">
-            <span class="add-on layout-text" id="invalidSchematronFileMessage">File is invalid.</span>
-            </th>
-            </tr>
-
-            <tr id="prompt-invalidSchematronFile-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
-            <td>
-            </td>
-            </tr>
-            </tbody>
-            </table>
-            </div>
-            <div class="modal-footer" style="text-align: center">
-            <button id="prompt-invalidSchematronFile-confirm" class="btn btn-default">OK</button>
-            </div>
-            </div>
-            </div>
-        </script>
-    </body>
+      </div>
+
+      <div style='text-align: center; margin-top: 5px;'>
+        <button class='btn btn-default' style='align: center;' id='map-color-scheme-default-button'>Default</button>
+      <div>
+    </script>
+    <script type="text/template" id="prompt-invalidSchematronFile-template">
+      <div class="modal-dialog sbgn-modal-dialog" style="width: 300px;">
+      <div class="modal-content">
+      <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal">&times;</button>
+      <h4 class="modal-title">Warning</h4>
+      </div>
+      <div class="modal-body">
+      <table class="table-condensed layout-table dialog-table" style="margin: auto;">
+      <tbody>
+      <tr>
+      <th style="padding-left: 0px;" align="left">
+      <span class="add-on layout-text" id="invalidSchematronFileMessage">File is invalid.</span>
+      </th>
+      </tr>
+
+      <tr id="prompt-invalidSchematronFile-buttons" style="padding-bottom: 0px; margin-bottom: 0px;">
+      <td>
+      </td>
+      </tr>
+      </tbody>
+      </table>
+      </div>
+      <div class="modal-footer" style="text-align: center">
+      <button id="prompt-invalidSchematronFile-confirm" class="btn btn-default">OK</button>
+      </div>
+      </div>
+      </div>
+    </script>
+  </body>
 </html>