From c4ad337559d4f5f4ccfc9ff56d1ff0e260a96bc4 Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Wed, 7 Oct 2020 17:39:46 -0400
Subject: [PATCH 01/31] Created an advance section for the model editor. Moved
 events, rules, and sbml component sections into the advanced section. Events,
 rules, and sbml component section are now closed by default.

---
 client/pages/model-editor.js                     | 10 +++++++++-
 client/templates/includes/eventsEditor.pug       |  4 ++--
 client/templates/includes/ruleEditor.pug         |  4 ++--
 .../templates/includes/sbmlComponentEditor.pug   |  4 ++--
 client/templates/pages/modelEditor.pug           | 16 +++++++++++++---
 5 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/client/pages/model-editor.js b/client/pages/model-editor.js
index 28e018607b..7605f6ea88 100644
--- a/client/pages/model-editor.js
+++ b/client/pages/model-editor.js
@@ -29,6 +29,7 @@ let ModelEditor = PageView.extend({
     'click [data-hook=edit-model-help]' : function () {
       let modal = $(modals.operationInfoModalHtml('model-editor')).modal();
     },
+    'click [data-hook=collapse-me-advanced-section]' : 'changeCollapseButtonText',
     'click [data-hook=project-breadcrumb-link]' : 'handleProjectBreadcrumbClick'
   },
   initialize: function (attrs, options) {
@@ -227,7 +228,14 @@ let ModelEditor = PageView.extend({
     });
     this.registerRenderSubview(this.rulesEditor, 'rules-editor-container');
   },
-  subviews: {
+  changeCollapseButtonText: function (e) {
+    let source = e.target.dataset.hook
+    let collapseContainer = $(this.queryByHook(source).dataset.target)
+    if(!collapseContainer.length || !collapseContainer.attr("class").includes("collapsing")) {
+      let collapseBtn = $(this.queryByHook(source))
+      let text = collapseBtn.text();
+      text === '+' ? collapseBtn.text('-') : collapseBtn.text('+');
+    }
   },
 });
 
diff --git a/client/templates/includes/eventsEditor.pug b/client/templates/includes/eventsEditor.pug
index 7f4664ac67..c7db3fd87b 100644
--- a/client/templates/includes/eventsEditor.pug
+++ b/client/templates/includes/eventsEditor.pug
@@ -4,9 +4,9 @@ div#events.card.card-body
 
     h3.inline Events
 
-    button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#events-container", data-hook="collapse") -
+    button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#events-container", data-hook="collapse") +
 
-  div.collapse(class="show", id="events-container", data-hook="events")
+  div.collapse(id="events-container", data-hook="events")
 
     div.row
 
diff --git a/client/templates/includes/ruleEditor.pug b/client/templates/includes/ruleEditor.pug
index c864f84192..d69ca492e2 100644
--- a/client/templates/includes/ruleEditor.pug
+++ b/client/templates/includes/ruleEditor.pug
@@ -4,9 +4,9 @@ div#rules-editor.card.card-body
 
     h3.inline Rules
 
-    button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-rules", data-hook="collapse") -
+    button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-rules", data-hook="collapse") +
 
-  div.collapse(class="show", id="collapse-rules")
+  div.collapse(id="collapse-rules")
 
     table.table
 
diff --git a/client/templates/includes/sbmlComponentEditor.pug b/client/templates/includes/sbmlComponentEditor.pug
index 1de920abc6..1bf36752b4 100644
--- a/client/templates/includes/sbmlComponentEditor.pug
+++ b/client/templates/includes/sbmlComponentEditor.pug
@@ -3,9 +3,9 @@ div#sbml-components.card.card-body
   div
 
     h3.inline SBML Components
-    button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-sbml-component", data-hook="collapse") -
+    button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-sbml-component", data-hook="collapse") +
 
-  div.collapse(class="show", id="collapse-sbml-component")
+  div.collapse(id="collapse-sbml-component")
 
     div
 
diff --git a/client/templates/pages/modelEditor.pug b/client/templates/pages/modelEditor.pug
index b3a540bd22..9afbeceebb 100644
--- a/client/templates/pages/modelEditor.pug
+++ b/client/templates/pages/modelEditor.pug
@@ -29,11 +29,21 @@ section.page
 
   div(data-hook="reactions-editor-container")
 
-  div(data-hook="events-editor-container")
+  div.card.card-body
 
-  div(data-hook="rules-editor-container")
+    div
 
-  div(data-hook="sbml-component-container")
+      h3.inline Advanced
+
+      button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#me-advanced-section", data-hook="collapse-me-advanced-section") +
+
+    div.collapse(id="me-advanced-section", data-hook="me-advanced-section")
+
+      div(data-hook="events-editor-container")
+
+      div(data-hook="rules-editor-container")
+
+      div(data-hook="sbml-component-container")
 
   div(data-hook="model-settings-container")
 

From 7b1ed8fe78fe3a093b5de6a27ceed97b4987e7d0 Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Thu, 8 Oct 2020 10:23:51 -0400
Subject: [PATCH 02/31] Changed the parameters 'Expression' header to 'Value'.

---
 client/templates/includes/parametersEditor.pug | 4 ++--
 client/templates/includes/parametersViewer.pug | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/templates/includes/parametersEditor.pug b/client/templates/includes/parametersEditor.pug
index 05633798a5..cda54fdce2 100644
--- a/client/templates/includes/parametersEditor.pug
+++ b/client/templates/includes/parametersEditor.pug
@@ -2,7 +2,7 @@ div#parameters-editor.card.card-body
 
   div
 
-    h3.inline Parameters
+    h3.inline Parameters(Constants)
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-parameters", data-hook="collapse") -
 
   div.collapse(class="show", id="collapse-parameters")
@@ -18,7 +18,7 @@ div#parameters-editor.card.card-body
 
           th(scope="col")
             div
-              div.inline Expression
+              div.inline Value
 
               div.tooltip-icon(data-html="true" data-toggle="tooltip" title=this.tooltips.expression) <sup><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info" class="svg-inline--fa fa-info fa-w-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M20 424.229h20V279.771H20c-11.046 0-20-8.954-20-20V212c0-11.046 8.954-20 20-20h112c11.046 0 20 8.954 20 20v212.229h20c11.046 0 20 8.954 20 20V492c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20v-47.771c0-11.046 8.954-20 20-20zM96 0C56.235 0 24 32.235 24 72s32.235 72 72 72 72-32.235 72-72S135.764 0 96 0z"></path></svg></sup>
 
diff --git a/client/templates/includes/parametersViewer.pug b/client/templates/includes/parametersViewer.pug
index df4231af9d..adeeb75166 100644
--- a/client/templates/includes/parametersViewer.pug
+++ b/client/templates/includes/parametersViewer.pug
@@ -11,6 +11,6 @@ div#parameters-viewer.card.card-body
       thead
         tr
           th.col-md-3-view(scope="col") Name
-          th.col-md-9-view(scope="col") Expression
+          th.col-md-9-view(scope="col") Value
         
       tbody(data-hook="parameter-list")
\ No newline at end of file

From 3247deb15bfde373eaa963c6e97896699d8d000e Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Thu, 8 Oct 2020 10:31:17 -0400
Subject: [PATCH 03/31] Updated the tooltip for parameter expressions.

---
 client/tooltips.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/tooltips.js b/client/tooltips.js
index 213ca5763e..2ede3a4927 100644
--- a/client/tooltips.js
+++ b/client/tooltips.js
@@ -39,7 +39,7 @@ module.exports = {
   parametersEditor: {
     name: "Names for species, parameters, reactions, events, and rules must be unique.",
     
-    expression: "A parameter value or a mathematical expression calculating the parameter value.",
+    expression: "A parameter value.",
     
     annotation: "An optional note about a parameter.",
     

From 3fd1f90997ae66148ee3c23edcddfa924213f82b Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Thu, 8 Oct 2020 10:44:33 -0400
Subject: [PATCH 04/31] Updated the header for the Species and Parameters.

---
 client/templates/includes/parametersViewer.pug | 2 +-
 client/templates/includes/speciesEditor.pug    | 2 +-
 client/templates/includes/speciesViewer.pug    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/templates/includes/parametersViewer.pug b/client/templates/includes/parametersViewer.pug
index adeeb75166..3bccda001a 100644
--- a/client/templates/includes/parametersViewer.pug
+++ b/client/templates/includes/parametersViewer.pug
@@ -2,7 +2,7 @@ div#parameters-viewer.card.card-body
 
   div
 
-    h3.inline Parameters
+    h3.inline Parameters(Constants)
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-parameters", data-hook="collapse") -
 
   div.collapse(class="show", id="collapse-parameters")
diff --git a/client/templates/includes/speciesEditor.pug b/client/templates/includes/speciesEditor.pug
index 125f92db46..e8ec0b688d 100644
--- a/client/templates/includes/speciesEditor.pug
+++ b/client/templates/includes/speciesEditor.pug
@@ -2,7 +2,7 @@ div#species-editor.card.card-body
 
   div
 
-    h3.inline Species
+    h3.inline Species(Variables)
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-species", data-hook="collapse") -
 
   div.collapse(class="show", id="collapse-species")
diff --git a/client/templates/includes/speciesViewer.pug b/client/templates/includes/speciesViewer.pug
index a457978c69..50e6e0d22b 100644
--- a/client/templates/includes/speciesViewer.pug
+++ b/client/templates/includes/speciesViewer.pug
@@ -2,7 +2,7 @@ div#species-viewer.card.card-body
 
   div
 
-    h3.inline Species
+    h3.inline Species(Variables)
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-species", data-hook="collapse") -
 
   div.collapse(class="show", id="collapse-species")

From 88fa8f5bf901334a8857d72d21206a49b6333f44 Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Thu, 8 Oct 2020 11:20:42 -0400
Subject: [PATCH 05/31]  Added a short description for the emptyset symbol that
 clerifies what it represents.

---
 client/templates/includes/reactionsEditor.pug | 6 ++++--
 client/views/reactions-editor.js              | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/templates/includes/reactionsEditor.pug b/client/templates/includes/reactionsEditor.pug
index 6c2c9c0eff..61bc39939f 100644
--- a/client/templates/includes/reactionsEditor.pug
+++ b/client/templates/includes/reactionsEditor.pug
@@ -15,8 +15,10 @@ div#reactions-editor.card.card-body
       | For non-linear reactions, use the custom propensity type.
 
     p
-      | For a species that is NOT consumed in the reaction but is part of a massaction reaction, add it as both a reactant and a product.  Mass-action reactions 
-      | must also have a rate term added. Note that the input rate represents the mass-action constant rate independent of volume.
+      | The symbol <span data-hook="emptyset"></span> represents null or nothing.  
+      | For a species that is NOT consumed in the reaction but is part of a massaction reaction, add it as both a reactant and a product.  
+      | Mass-action reactions must also have a rate term added. 
+      | Note that the input rate represents the mass-action constant rate independent of volume.
 
     div.row
       div.col-md-7.container-part: table.table
diff --git a/client/views/reactions-editor.js b/client/views/reactions-editor.js
index 30788e85a3..e74cf02910 100644
--- a/client/views/reactions-editor.js
+++ b/client/views/reactions-editor.js
@@ -87,6 +87,10 @@ module.exports = View.extend({
       $(this.queryByHook('add-reaction-full')).prop('hidden', true);
     }
     this.renderReactionTypes();
+    katex.render("\\emptyset", this.queryByHook('emptyset'), {
+      displayMode: false,
+      output: 'html',
+    });
   },
   update: function () {
   },

From b3777331257a3a7c54f225511fb7d3b73bcf2a98 Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Thu, 8 Oct 2020 15:31:39 -0400
Subject: [PATCH 06/31] Updated the Species and Parameter headers.  Updated the
 tooltips to reflect the new terms.

---
 .../templates/includes/parametersEditor.pug   |  2 +-
 .../templates/includes/parametersViewer.pug   |  2 +-
 client/templates/includes/speciesEditor.pug   |  2 +-
 client/templates/includes/speciesViewer.pug   |  2 +-
 client/tooltips.js                            | 50 +++++++++----------
 5 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/client/templates/includes/parametersEditor.pug b/client/templates/includes/parametersEditor.pug
index cda54fdce2..39fc215b45 100644
--- a/client/templates/includes/parametersEditor.pug
+++ b/client/templates/includes/parametersEditor.pug
@@ -2,7 +2,7 @@ div#parameters-editor.card.card-body
 
   div
 
-    h3.inline Parameters(Constants)
+    h3.inline Constants
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-parameters", data-hook="collapse") -
 
   div.collapse(class="show", id="collapse-parameters")
diff --git a/client/templates/includes/parametersViewer.pug b/client/templates/includes/parametersViewer.pug
index 3bccda001a..e505c54ed1 100644
--- a/client/templates/includes/parametersViewer.pug
+++ b/client/templates/includes/parametersViewer.pug
@@ -2,7 +2,7 @@ div#parameters-viewer.card.card-body
 
   div
 
-    h3.inline Parameters(Constants)
+    h3.inline Constants
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-parameters", data-hook="collapse") -
 
   div.collapse(class="show", id="collapse-parameters")
diff --git a/client/templates/includes/speciesEditor.pug b/client/templates/includes/speciesEditor.pug
index e8ec0b688d..d8aab74c64 100644
--- a/client/templates/includes/speciesEditor.pug
+++ b/client/templates/includes/speciesEditor.pug
@@ -2,7 +2,7 @@ div#species-editor.card.card-body
 
   div
 
-    h3.inline Species(Variables)
+    h3.inline Variables
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-species", data-hook="collapse") -
 
   div.collapse(class="show", id="collapse-species")
diff --git a/client/templates/includes/speciesViewer.pug b/client/templates/includes/speciesViewer.pug
index 50e6e0d22b..508535ecbf 100644
--- a/client/templates/includes/speciesViewer.pug
+++ b/client/templates/includes/speciesViewer.pug
@@ -2,7 +2,7 @@ div#species-viewer.card.card-body
 
   div
 
-    h3.inline Species(Variables)
+    h3.inline Variables
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-species", data-hook="collapse") -
 
   div.collapse(class="show", id="collapse-species")
diff --git a/client/tooltips.js b/client/tooltips.js
index 2ede3a4927..792b4358bd 100644
--- a/client/tooltips.js
+++ b/client/tooltips.js
@@ -18,26 +18,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 module.exports = {
   speciesEditor: {
-    name: "Names for species, parameters, reactions, events, and rules must be unique.",
+    name: "Names for variables, constants, reactions, events, and rules must be unique.",
 
-    initialValue: "Initial population of a species.",
+    initialValue: "Initial population of a variables.",
 
-    annotation: "An optional note about the species.",
+    annotation: "An optional note about the variables.",
 
-    remove: "A species may only be removed if it is not a part of any reaction, event assignment, or rule.",
+    remove: "A variables may only be removed if it is not a part of any reaction, event assignment, or rule.",
     
-    speciesMode: "Concentration - Species will only be represented using continuous (floating point) values.<br>Population - Species will only be represented "+
-        "using discrete (integer count) values.<br>Hybrid Concentration/Population - Allows a species to be represented using continuous and/or discrete values.",
+    speciesMode: "Concentration - Variables will only be represented using continuous (floating point) values.<br>Population - Variables will only be represented "+
+        "using discrete (integer count) values.<br>Hybrid Concentration/Population - Allows a variables to be represented using continuous and/or discrete values.",
 
-    mode: "Concentration - Species will only be represented using continuous (floating point) values.<br>Population - Species will only be represented "+
-        "using discrete (integer count) values.<br>Hybrid Concentration/Population - Allows a species to be represented using continuous and/or discrete values.",
+    mode: "Concentration - Variables will only be represented using continuous (floating point) values.<br>Population - Variables will only be represented "+
+        "using discrete (integer count) values.<br>Hybrid Concentration/Population - Allows a variables to be represented using continuous and/or discrete values.",
 
-    switchValue: "Switching Tolerance - Tolerance level for considering a dynamic species deterministically, value is compared to an estimated sd/mean population "+
-        "of a species after a given time step. This value will be used if a 'Minimum Value' not provided.<br>Minimum Value For Switching - Minimum population value "+
-        "at which species will be represented as Concentration."
+    switchValue: "Switching Tolerance - Tolerance level for considering a dynamic variables deterministically, value is compared to an estimated sd/mean population "+
+        "of a variables after a given time step. This value will be used if a 'Minimum Value' not provided.<br>Minimum Value For Switching - Minimum population value "+
+        "at which variables will be represented as Concentration."
   },
   parametersEditor: {
-    name: "Names for species, parameters, reactions, events, and rules must be unique.",
+    name: "Names for variables, constants, reactions, events, and rules must be unique.",
     
     expression: "A parameter value.",
     
@@ -46,7 +46,7 @@ module.exports = {
     remove: "A parameter may only be removed if it is not used in any reaction, event assignment, or rule."
   },
   reactionsEditor: {
-    name: "Names for species, parameters, reactions, events, and rules must be unique.",
+    name: "Names for variables, constants, reactions, events, and rules must be unique.",
     
     annotation: "An optional note about the reaction.",
     
@@ -56,15 +56,15 @@ module.exports = {
     
     reactant: "The reactants that are consumed in the reaction, with stoichiometry.",
     
-    product: "The species that are created by the reaction event, with stoichiometry.",
+    product: "The variables that are created by the reaction event, with stoichiometry.",
   },
   eventsEditor: {
-    name: "Names for species, parameters, reactions, events, and rules must be unique.",
+    name: "Names for variables, constants, reactions, events, and rules must be unique.",
     
     annotation: "An optional note about an event.",
     
     triggerExpression: "The trigger expression can be any mathematical expression which evaluates to a boolean value in a python environment (i.e. t==50).  This "+
-        "expression is evaluable within the model namespace, and any variable (Species, Parameters, etc.) can be referenced in the expression.  Time is represented "+
+        "expression is evaluable within the model namespace, and any variable (Variables, Constants, etc.) can be referenced in the expression.  Time is represented "+
         "with the lower case variable 't'. An event will begin execution of assignments (or delay, if any) once this expression changes from 'False' to 'True.'",
     
     delay: "contains math expression evaluable within model namespace. This expression designates a delay between the trigger of an event and the execution of its assignments.",
@@ -84,16 +84,16 @@ module.exports = {
     assignments: "An Event Assignment describes a change to be performed to the current model simulation.  This assignment can either be fired at the time its associated "+
         "trigger changes from false to true, or after a specified delay, depending on the Event configuration. An event may contain one or more assignments.",
     
-    variable: "The target Species or Parameter to be modified by the event.",
+    variable: "The target Variables or Parameter to be modified by the event.",
     
     assignmentExpression: "Can be any mathematical statement which resolves to an integer or float value.  This value will be assigned to the assignment's target variable "+
         "upon event execution."
   },
   rulesEditor: {
-    name: "Names for species, parameters, reactions, events, and rules must be unique.",
+    name: "Names for variables, constants, reactions, events, and rules must be unique.",
     
-    type: "Assignment Rules: An assignment rule describes a change to a Species or Parameter as a function whose left-hand side is a scalar (i.e. x = f(V), where V is a "+
-        "vector of symbols, not including x).<br>  Rate Rules: A rate rule describes a change to a Species or Parameter as a function whose left-hand side is a rate of "+
+    type: "Assignment Rules: An assignment rule describes a change to a Variables or Parameter as a function whose left-hand side is a scalar (i.e. x = f(V), where V is a "+
+        "vector of symbols, not including x).<br>  Rate Rules: A rate rule describes a change to a Variables or Parameter as a function whose left-hand side is a rate of "+
         "change (i.e. dx/dt = f(W), where W is a vector of symbols which may include x).",
     
     variable: "Target variable to be modified by the Rule's formula.",
@@ -147,9 +147,9 @@ module.exports = {
         "Concentration/Population.  If the model is represented as population, the SSA will be selected."
   },
   parameterSweepSettings: {
-    sweepType: "The number of parameters to sweep through.",
+    sweepType: "The number of constants to sweep through.",
 
-    species: "The initial species to view sweep data for.",
+    species: "The initial variables to view sweep data for.",
 
     variable: "The parameter(s) to sweep through.",
     
@@ -162,15 +162,15 @@ module.exports = {
     steps: "The number of steps used to determine the sweep values across the sweep range."
   },
   parameterSweepResults: {
-    species: "The species to view sweep data for",
+    species: "The variables to view sweep data for",
 
-    mapper: "The 'feature extractor' which calculates a single value from the species population/concentration data of each simulated trajectory.",
+    mapper: "The 'feature extractor' which calculates a single value from the variables population/concentration data of each simulated trajectory.",
     
     reducer: "The statistical function applied to the ensemble of values extracted by the 'feature extractor' from each simulation trajectory."
   },
   workflowSelection: {
     ensembleSimulation: "Produce a time-series result for one or more simulation(s) of the model.",
 
-    parameterSweep: "Produced and compare results from model simulations by varying parameters over a range."
+    parameterSweep: "Produced and compare results from model simulations by varying constants over a range."
   }
 }
\ No newline at end of file

From 99278d6a0aab6ce9537a891a22d9005c52e6cabf Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Thu, 8 Oct 2020 15:42:45 -0400
Subject: [PATCH 07/31] Fixed empty set description.

---
 client/templates/includes/reactionsEditor.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/templates/includes/reactionsEditor.pug b/client/templates/includes/reactionsEditor.pug
index 61bc39939f..5ab5f38866 100644
--- a/client/templates/includes/reactionsEditor.pug
+++ b/client/templates/includes/reactionsEditor.pug
@@ -15,7 +15,7 @@ div#reactions-editor.card.card-body
       | For non-linear reactions, use the custom propensity type.
 
     p
-      | The symbol <span data-hook="emptyset"></span> represents null or nothing.  
+      | The symbol <span data-hook="emptyset"></span> represents null or emptyset.  
       | For a species that is NOT consumed in the reaction but is part of a massaction reaction, add it as both a reactant and a product.  
       | Mass-action reactions must also have a rate term added. 
       | Note that the input rate represents the mass-action constant rate independent of volume.

From e5f88c4d946a8036a4004f43f5bba198a26a78ee Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Thu, 8 Oct 2020 17:31:49 -0400
Subject: [PATCH 08/31] Added descriptions next to each of the reation types in
 the add reaction button on the model editor page.

---
 client/styles/styles.css                      | 17 +++++++++++++++++
 client/templates/includes/reactionsEditor.pug | 14 +++++++-------
 client/views/reactions-editor.js              | 14 +++++++-------
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/client/styles/styles.css b/client/styles/styles.css
index 0177c3797d..84fa8db765 100644
--- a/client/styles/styles.css
+++ b/client/styles/styles.css
@@ -549,3 +549,20 @@ span.checkbox {
 #models-jstree .jstree-default .jstree-anchor {
   height: auto;
 }
+
+.reaction-lb2 {
+  display: none;
+}
+
+.dropdown-item:hover .reaction-lb2 {
+  position: absolute;
+  left: 195px;
+  min-width: 150px;
+  max-width: 250px;
+  min-height: 32px;
+  display: inline-block;
+  background-color: rgb(248, 249, 250);
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  border: .5px solid rgb(228, 229, 230) !important;
+  padding: 0px 5px;
+}
diff --git a/client/templates/includes/reactionsEditor.pug b/client/templates/includes/reactionsEditor.pug
index 5ab5f38866..e2c142f290 100644
--- a/client/templates/includes/reactionsEditor.pug
+++ b/client/templates/includes/reactionsEditor.pug
@@ -54,13 +54,13 @@ div#reactions-editor.card.card-body
       ) Add Reaction <span class="caret"></span>
 
       ul.dropdown-menu(aria-labelledby="addReactionBtn")
-        li.dropdown-item(data-hook="creation")
-        li.dropdown-item(data-hook="destruction")
-        li.dropdown-item(data-hook="change")
-        li.dropdown-item(data-hook="dimerization")
-        li.dropdown-item(data-hook="merge")
-        li.dropdown-item(data-hook="split")
-        li.dropdown-item(data-hook="four")
+        li.dropdown-item(data-hook="creation") <span data-hook=creation-lb1></span><span class=reaction-lb2>Creation Reaction</span>
+        li.dropdown-item(data-hook="destruction") <span data-hook=destruction-lb1></span><span class=reaction-lb2>Destruction Reaction</span>
+        li.dropdown-item(data-hook="change") <span data-hook=change-lb1></span><span class=reaction-lb2>Transformation Reaction</span>
+        li.dropdown-item(data-hook="dimerization") <span data-hook=dimerization-lb1></span><span class=reaction-lb2>Dimerization Reaction</span>
+        li.dropdown-item(data-hook="merge") <span data-hook=merge-lb1></span><span class=reaction-lb2>Merge Reaction</span>
+        li.dropdown-item(data-hook="split") <span data-hook=split-lb1></span><span class=reaction-lb2>Split Reaction</span>
+        li.dropdown-item(data-hook="four") <span data-hook=four-lb1></span><span class=reaction-lb2>Four Reaction</span>
         li.dropdown-divider
         li.dropdown-item(data-hook="custom-massaction") Custom mass action
         li.dropdown-item(data-hook="custom-propensity") Custom propensity
diff --git a/client/views/reactions-editor.js b/client/views/reactions-editor.js
index e74cf02910..972d6dcd4e 100644
--- a/client/views/reactions-editor.js
+++ b/client/views/reactions-editor.js
@@ -182,12 +182,12 @@ module.exports = View.extend({
       displayMode: false,
       output: 'html',
     }
-    katex.render(ReactionTypes['creation'].label, this.queryByHook('creation'), options);
-    katex.render(ReactionTypes['destruction'].label, this.queryByHook('destruction'), options);
-    katex.render(ReactionTypes['change'].label, this.queryByHook('change'), options);
-    katex.render(ReactionTypes['dimerization'].label, this.queryByHook('dimerization'), options);
-    katex.render(ReactionTypes['merge'].label, this.queryByHook('merge'), options);
-    katex.render(ReactionTypes['split'].label, this.queryByHook('split'), options);
-    katex.render(ReactionTypes['four'].label, this.queryByHook('four'), options);
+    katex.render(ReactionTypes['creation'].label, this.queryByHook('creation-lb1'), options);
+    katex.render(ReactionTypes['destruction'].label, this.queryByHook('destruction-lb1'), options);
+    katex.render(ReactionTypes['change'].label, this.queryByHook('change-lb1'), options);
+    katex.render(ReactionTypes['dimerization'].label, this.queryByHook('dimerization-lb1'), options);
+    katex.render(ReactionTypes['merge'].label, this.queryByHook('merge-lb1'), options);
+    katex.render(ReactionTypes['split'].label, this.queryByHook('split-lb1'), options);
+    katex.render(ReactionTypes['four'].label, this.queryByHook('four-lb1'), options);
   }
 });
\ No newline at end of file

From 29fd9f5b719e2349d0f07fc2d0b29b96dad6615e Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Thu, 8 Oct 2020 18:50:51 -0400
Subject: [PATCH 09/31] Moved the plot and page button of the model editor into
 a container that is always fixed to the bottom of the window.

---
 client/pages/model-editor.js           | 24 +++++++++++++++++++++++-
 client/styles/styles.css               | 22 ++++++++++++++++++++++
 client/templates/pages/modelEditor.pug | 18 +++++++++++-------
 client/views/model-state-buttons.js    |  1 +
 4 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/client/pages/model-editor.js b/client/pages/model-editor.js
index dec1697d1a..644b5dbffd 100644
--- a/client/pages/model-editor.js
+++ b/client/pages/model-editor.js
@@ -48,7 +48,8 @@ let ModelEditor = PageView.extend({
       let modal = $(modals.operationInfoModalHtml('model-editor')).modal();
     },
     'click [data-hook=collapse-me-advanced-section]' : 'changeCollapseButtonText',
-    'click [data-hook=project-breadcrumb-link]' : 'handleProjectBreadcrumbClick'
+    'click [data-hook=project-breadcrumb-link]' : 'handleProjectBreadcrumbClick',
+    'click [data-hook=toggle-preview-plot]' : 'togglePreviewPlot'
   },
   initialize: function (attrs, options) {
     PageView.prototype.initialize.apply(this, arguments);
@@ -255,6 +256,27 @@ let ModelEditor = PageView.extend({
       text === '+' ? collapseBtn.text('-') : collapseBtn.text('+');
     }
   },
+  togglePreviewPlot: function (e) {
+    let action = e.target.innerText
+    console.log(action)
+    if(action === "Close") {
+      this.closePlot()
+    }else{
+      this.openPlot()
+    }
+  },
+  closePlot: function () {
+    let plot = this.queryByHook("model-run-container")
+    let button = this.queryByHook("toggle-preview-plot")
+    plot.style.display = "none"
+    button.innerText = "Open"
+  },
+  openPlot: function () {
+    let plot = this.queryByHook("model-run-container")
+    let button = this.queryByHook("toggle-preview-plot")
+    plot.style.display = "block"
+    button.innerText = "Close"
+  }
 });
 
 initPage(ModelEditor);
diff --git a/client/styles/styles.css b/client/styles/styles.css
index 84fa8db765..b7d957328a 100644
--- a/client/styles/styles.css
+++ b/client/styles/styles.css
@@ -566,3 +566,25 @@ span.checkbox {
   border: .5px solid rgb(228, 229, 230) !important;
   padding: 0px 5px;
 }
+
+.preview-nav {
+  position: fixed;
+  width: 70%;
+  min-width: 585px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  bottom: 10px;
+  background-color: rgb(248, 249, 250);
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  border: .5px solid rgb(228, 229, 230) !important;
+  padding: 0px 5px;
+}
+
+.preview-close {
+  position: absolute;
+  display: none;
+  right: 5px;
+  bottom: 8px;
+}
diff --git a/client/templates/pages/modelEditor.pug b/client/templates/pages/modelEditor.pug
index 9afbeceebb..43acb7bb3f 100644
--- a/client/templates/pages/modelEditor.pug
+++ b/client/templates/pages/modelEditor.pug
@@ -47,17 +47,21 @@ section.page
 
   div(data-hook="model-settings-container")
 
-  div.collapse(data-hook="model-timeout-message")
+  div(class="preview-nav")
 
-    p.text-warning The model took longer than 5 seconds to run and timed out!
+    button.btn.btn-outline-secondary.box-shadow.preview-close(data-hook="toggle-preview-plot") Close
 
-  div.errors(data-hook="model-run-error-container")
+    div(data-hook="model-run-container")
 
-    p.text-danger(data-hook="model-run-error-message")
+    div.spinner-border(data-hook="plot-loader")
 
-  div(data-hook="model-run-container")
+    div.collapse(data-hook="model-timeout-message")
 
-  div.spinner-border(data-hook="plot-loader")
+      p.text-warning The model took longer than 5 seconds to run and timed out!
 
-  div(data-hook="model-state-buttons-container")
+    div.errors(data-hook="model-run-error-container")
+
+      p.text-danger(data-hook="model-run-error-message")
+
+    div(data-hook="model-state-buttons-container")
 
diff --git a/client/views/model-state-buttons.js b/client/views/model-state-buttons.js
index 5a5d16418c..262a2c2e41 100644
--- a/client/views/model-state-buttons.js
+++ b/client/views/model-state-buttons.js
@@ -206,6 +206,7 @@ module.exports = View.extend({
       responsive: true,
     }
     Plotly.newPlot(el, traces, layout, config);
+    $(this.parent.queryByHook('toggle-preview-plot')).css('display', 'block')
     window.scrollTo(0, document.body.scrollHeight)
   },
 });

From 4e957c231c8edfb49ce9162bd5eac16fcfd05282 Mon Sep 17 00:00:00 2001
From: Brian Drawert <brian@drawert.net>
Date: Fri, 9 Oct 2020 17:27:49 -0400
Subject: [PATCH 10/31] Changed description text for model editor components

---
 client/templates/includes/eventsEditor.pug     | 4 +++-
 client/templates/includes/parametersEditor.pug | 6 ++++--
 client/templates/includes/reactionsEditor.pug  | 9 +--------
 client/templates/includes/ruleEditor.pug       | 4 +++-
 client/templates/includes/speciesEditor.pug    | 4 +++-
 client/tooltips.js                             | 4 ++--
 6 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/client/templates/includes/eventsEditor.pug b/client/templates/includes/eventsEditor.pug
index c7db3fd87b..47b227ac6d 100644
--- a/client/templates/includes/eventsEditor.pug
+++ b/client/templates/includes/eventsEditor.pug
@@ -11,6 +11,8 @@ div#events.card.card-body
     div.row
 
       div.col-md-6.container-part
+        p
+         | A discontinuous action triggered by the state of the system.
 
         table.table
 
@@ -39,4 +41,4 @@ div#events.card.card-body
       div.col-md-6.container-part(data-hook="event-details-container")
 
     button.btn.btn-outline-primary.box-shadow(data-hook="add-event", type="button")
-      | Add Event
\ No newline at end of file
+      | Add Event
diff --git a/client/templates/includes/parametersEditor.pug b/client/templates/includes/parametersEditor.pug
index 39fc215b45..9d8640e120 100644
--- a/client/templates/includes/parametersEditor.pug
+++ b/client/templates/includes/parametersEditor.pug
@@ -2,10 +2,12 @@ div#parameters-editor.card.card-body
 
   div
 
-    h3.inline Constants
+    h3.inline Parameters
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-parameters", data-hook="collapse") -
 
   div.collapse(class="show", id="collapse-parameters")
+    p
+     | Constant values that represents an inherent properties of the system. Used to set the rate of a <i>Reaction</i>.
 
     table.table
       thead
@@ -37,4 +39,4 @@ div#parameters-editor.card.card-body
       tbody(data-hook="parameter-list")
 
     button.btn.btn-outline-primary.box-shadow(data-hook="add-parameter", type="button")
-      | Add Parameter
\ No newline at end of file
+      | Add Parameter
diff --git a/client/templates/includes/reactionsEditor.pug b/client/templates/includes/reactionsEditor.pug
index e2c142f290..22b1fb3a4f 100644
--- a/client/templates/includes/reactionsEditor.pug
+++ b/client/templates/includes/reactionsEditor.pug
@@ -11,14 +11,7 @@ div#reactions-editor.card.card-body
   div.collapse(class="show", id="collapse-reaction")
 
     p
-      | Define reactions. Select from the given reaction templates, or use the custom types.  Using templated reaction types will help eliminate errors. 
-      | For non-linear reactions, use the custom propensity type.
-
-    p
-      | The symbol <span data-hook="emptyset"></span> represents null or emptyset.  
-      | For a species that is NOT consumed in the reaction but is part of a massaction reaction, add it as both a reactant and a product.  
-      | Mass-action reactions must also have a rate term added. 
-      | Note that the input rate represents the mass-action constant rate independent of volume.
+      | A process that transforms a set of <i>Variable</i>s (reactants) into a set of <i>Variable</i>s (products) at a rate set a <i>Parameter</i>. Select from the given reaction templates, or use the custom types.
 
     div.row
       div.col-md-7.container-part: table.table
diff --git a/client/templates/includes/ruleEditor.pug b/client/templates/includes/ruleEditor.pug
index d69ca492e2..12fabd387f 100644
--- a/client/templates/includes/ruleEditor.pug
+++ b/client/templates/includes/ruleEditor.pug
@@ -7,6 +7,8 @@ div#rules-editor.card.card-body
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-rules", data-hook="collapse") +
 
   div.collapse(id="collapse-rules")
+    p
+     | Equations that determine the value (assignment rule) or rates of change (rate rule) of <i>Variables</i>.
 
     table.table
 
@@ -60,4 +62,4 @@ div#rules-editor.card.card-body
 
       ul.dropdown-menu(aria-labelledby="addRuleBtn")
         li.dropdown-item(data-hook="rate-rule" data-name="Rate Rule") Rate Rule
-        li.dropdown-item(data-hook="assignment-rule" data-name="Assignment Rule") Assignment Rule
\ No newline at end of file
+        li.dropdown-item(data-hook="assignment-rule" data-name="Assignment Rule") Assignment Rule
diff --git a/client/templates/includes/speciesEditor.pug b/client/templates/includes/speciesEditor.pug
index d8aab74c64..0a07dc858a 100644
--- a/client/templates/includes/speciesEditor.pug
+++ b/client/templates/includes/speciesEditor.pug
@@ -6,6 +6,8 @@ div#species-editor.card.card-body
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-species", data-hook="collapse") -
 
   div.collapse(class="show", id="collapse-species")
+    p
+     | Time varying quantities of interest; e.g.: concentrations, populations, or counts of biochemical species, epidemological compartments, chemicals, proteins, or molecules.
 
     table.table
       thead
@@ -84,4 +86,4 @@ div#species-editor.card.card-body
         tbody(data-hook="edit-species-mode")
 
     button.btn.btn-outline-primary.box-shadow(data-hook="add-species", type="button")
-      | Add Species
\ No newline at end of file
+      | Add Species
diff --git a/client/tooltips.js b/client/tooltips.js
index 792b4358bd..c40b5e0fe5 100644
--- a/client/tooltips.js
+++ b/client/tooltips.js
@@ -107,7 +107,7 @@ module.exports = {
     annotation: "An optional note about the SBML Component."
   },
   modelSettings: {
-    previewSettings: "Preview Settings are applied to the model and are used for the model preview and all workflows.",
+    previewSettings: "Model Settings are used for the preview and all workflows created using this model.",
     
     previewTime: "End time of simulation.",
     
@@ -173,4 +173,4 @@ module.exports = {
 
     parameterSweep: "Produced and compare results from model simulations by varying constants over a range."
   }
-}
\ No newline at end of file
+}

From 7628501c80d5b7faba73a6c8df86434ac87fe835 Mon Sep 17 00:00:00 2001
From: Brian Drawert <brian@drawert.net>
Date: Sat, 10 Oct 2020 20:13:34 -0400
Subject: [PATCH 11/31] Fixing Parameter viewer

---
 client/templates/includes/parametersViewer.pug | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/templates/includes/parametersViewer.pug b/client/templates/includes/parametersViewer.pug
index e505c54ed1..a8e6fc70fc 100644
--- a/client/templates/includes/parametersViewer.pug
+++ b/client/templates/includes/parametersViewer.pug
@@ -2,7 +2,7 @@ div#parameters-viewer.card.card-body
 
   div
 
-    h3.inline Constants
+    h3.inline Parameters
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-parameters", data-hook="collapse") -
 
   div.collapse(class="show", id="collapse-parameters")
@@ -13,4 +13,4 @@ div#parameters-viewer.card.card-body
           th.col-md-3-view(scope="col") Name
           th.col-md-9-view(scope="col") Value
         
-      tbody(data-hook="parameter-list")
\ No newline at end of file
+      tbody(data-hook="parameter-list")

From 4aeb102a388b8dbb887cc2530d917b56899ad9ea Mon Sep 17 00:00:00 2001
From: Brian Drawert <brian@drawert.net>
Date: Sat, 10 Oct 2020 20:19:50 -0400
Subject: [PATCH 12/31] Adding back symbol to fix javascript error

---
 client/templates/includes/reactionsEditor.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/templates/includes/reactionsEditor.pug b/client/templates/includes/reactionsEditor.pug
index 22b1fb3a4f..6154e9b86e 100644
--- a/client/templates/includes/reactionsEditor.pug
+++ b/client/templates/includes/reactionsEditor.pug
@@ -11,7 +11,7 @@ div#reactions-editor.card.card-body
   div.collapse(class="show", id="collapse-reaction")
 
     p
-      | A process that transforms a set of <i>Variable</i>s (reactants) into a set of <i>Variable</i>s (products) at a rate set a <i>Parameter</i>. Select from the given reaction templates, or use the custom types.
+      | A process that transforms a set of <i>Variable</i>s (reactants) into a set of <i>Variable</i>s (products) at a rate set a <i>Parameter</i>. Select from the given reaction templates, or use the custom types. The symbol <span data-hook="emptyset"></span> represents null or emptyset. 
 
     div.row
       div.col-md-7.container-part: table.table

From b6a03228e746c731bef11c12fe1bc250c9fafde4 Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Mon, 12 Oct 2020 09:52:59 -0400
Subject: [PATCH 13/31] Updated tooltips to refer to parameters instead of
 constants.

---
 client/tooltips.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/tooltips.js b/client/tooltips.js
index c40b5e0fe5..a6f863b545 100644
--- a/client/tooltips.js
+++ b/client/tooltips.js
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 module.exports = {
   speciesEditor: {
-    name: "Names for variables, constants, reactions, events, and rules must be unique.",
+    name: "Names for variables, parameters, reactions, events, and rules must be unique.",
 
     initialValue: "Initial population of a variables.",
 
@@ -37,7 +37,7 @@ module.exports = {
         "at which variables will be represented as Concentration."
   },
   parametersEditor: {
-    name: "Names for variables, constants, reactions, events, and rules must be unique.",
+    name: "Names for variables, parameters, reactions, events, and rules must be unique.",
     
     expression: "A parameter value.",
     
@@ -46,7 +46,7 @@ module.exports = {
     remove: "A parameter may only be removed if it is not used in any reaction, event assignment, or rule."
   },
   reactionsEditor: {
-    name: "Names for variables, constants, reactions, events, and rules must be unique.",
+    name: "Names for variables, parameters, reactions, events, and rules must be unique.",
     
     annotation: "An optional note about the reaction.",
     
@@ -59,12 +59,12 @@ module.exports = {
     product: "The variables that are created by the reaction event, with stoichiometry.",
   },
   eventsEditor: {
-    name: "Names for variables, constants, reactions, events, and rules must be unique.",
+    name: "Names for variables, parameters, reactions, events, and rules must be unique.",
     
     annotation: "An optional note about an event.",
     
     triggerExpression: "The trigger expression can be any mathematical expression which evaluates to a boolean value in a python environment (i.e. t==50).  This "+
-        "expression is evaluable within the model namespace, and any variable (Variables, Constants, etc.) can be referenced in the expression.  Time is represented "+
+        "expression is evaluable within the model namespace, and any variable (Variables, Parameter, etc.) can be referenced in the expression.  Time is represented "+
         "with the lower case variable 't'. An event will begin execution of assignments (or delay, if any) once this expression changes from 'False' to 'True.'",
     
     delay: "contains math expression evaluable within model namespace. This expression designates a delay between the trigger of an event and the execution of its assignments.",
@@ -90,7 +90,7 @@ module.exports = {
         "upon event execution."
   },
   rulesEditor: {
-    name: "Names for variables, constants, reactions, events, and rules must be unique.",
+    name: "Names for variables, parameters, reactions, events, and rules must be unique.",
     
     type: "Assignment Rules: An assignment rule describes a change to a Variables or Parameter as a function whose left-hand side is a scalar (i.e. x = f(V), where V is a "+
         "vector of symbols, not including x).<br>  Rate Rules: A rate rule describes a change to a Variables or Parameter as a function whose left-hand side is a rate of "+
@@ -147,7 +147,7 @@ module.exports = {
         "Concentration/Population.  If the model is represented as population, the SSA will be selected."
   },
   parameterSweepSettings: {
-    sweepType: "The number of constants to sweep through.",
+    sweepType: "The number of parameters to sweep through.",
 
     species: "The initial variables to view sweep data for.",
 
@@ -171,6 +171,6 @@ module.exports = {
   workflowSelection: {
     ensembleSimulation: "Produce a time-series result for one or more simulation(s) of the model.",
 
-    parameterSweep: "Produced and compare results from model simulations by varying constants over a range."
+    parameterSweep: "Produced and compare results from model simulations by varying parameters over a range."
   }
 }

From 97bea0b3d3df394b3513fc404dfbd8d3ce6a235d Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Mon, 12 Oct 2020 10:44:09 -0400
Subject: [PATCH 14/31] Added views for model component veiwers.  Added
 separate render functions for Species, Parameters, and Reactions.  Added a
 mode parameter to the model component render functions.  Refactored the model
 component render functions to render the component editor if the mode is edit
 or component viewer if the mode is view.

---
 client/pages/model-editor.js | 77 +++++++++++++++++++++++++-----------
 1 file changed, 55 insertions(+), 22 deletions(-)

diff --git a/client/pages/model-editor.js b/client/pages/model-editor.js
index 644b5dbffd..627914cd46 100644
--- a/client/pages/model-editor.js
+++ b/client/pages/model-editor.js
@@ -26,11 +26,16 @@ var modals = require('../modals')
 var PageView = require('../pages/base');
 var MeshEditorView = require('../views/mesh-editor');
 var SpeciesEditorView = require('../views/species-editor');
+var SpeciesViewer = require('../views/species-viewer');
 var InitialConditionsEditorView = require('../views/initial-conditions-editor');
 var ParametersEditorView = require('../views/parameters-editor');
+var ParameterViewer = require('../views/parameters-viewer');
 var ReactionsEditorView = require('../views/reactions-editor');
+var ReactionsViewer = require('../views/reactions-viewer');
 var EventsEditorView = require('../views/events-editor');
+var EventsViewer = require('../views/events-viewer');
 var RulesEditorView = require('../views/rules-editor');
+var RulesViewer = require('../views/rules-viewer');
 var SBMLComponentView = require('../views/sbml-component-editor');
 var ModelSettingsView = require('../views/model-settings');
 var ModelStateButtonsView = require('../views/model-state-buttons');
@@ -182,20 +187,9 @@ let ModelEditor = PageView.extend({
     var meshEditor = new MeshEditorView({
       model: this.model.meshSettings
     });
-    var speciesEditor = new SpeciesEditorView({
-      collection: this.model.species
-    });
     var initialConditionsEditor = new InitialConditionsEditorView({
       collection: this.model.initialConditions
     });
-    var parametersEditor = new ParametersEditorView({
-      collection: this.model.parameters
-    });
-    var reactionsEditor = new ReactionsEditorView({
-      collection: this.model.reactions
-    });
-    this.renderEventsView();
-    this.renderRulesView();
     var sbmlComponentView = new SBMLComponentView({
       functionDefinitions: this.model.functionDefinitions,
     });
@@ -207,10 +201,12 @@ let ModelEditor = PageView.extend({
       model: this.model
     });
     this.registerRenderSubview(meshEditor, 'mesh-editor-container');
-    this.registerRenderSubview(speciesEditor, 'species-editor-container');
+    this.renderSpeciesView();
     this.registerRenderSubview(initialConditionsEditor, 'initial-conditions-editor-container');
-    this.registerRenderSubview(parametersEditor, 'parameters-editor-container');
-    this.registerRenderSubview(reactionsEditor, 'reactions-editor-container');
+    this.renderParametersView();
+    this.renderReactionsView();
+    this.renderEventsView();
+    this.renderRulesView();
     this.registerRenderSubview(sbmlComponentView, 'sbml-component-container');
     this.registerRenderSubview(modelSettings, 'model-settings-container');
     this.registerRenderSubview(this.modelStateButtons, 'model-state-buttons-container');
@@ -229,22 +225,59 @@ let ModelEditor = PageView.extend({
     this.registerSubview(view);
     this.renderSubview(view, this.queryByHook(hook));
   },
-  renderEventsView: function () {
+  renderSpeciesView: function (mode="edit") {
+    if(this.speciesEditor) {
+      this.speciesEditor.remove()
+    }
+    if(mode === "edit") {
+      this.speciesEditor = new SpeciesEditorView({collection: this.model.species});
+    }else{
+      this.speciesEditor = new SpeciesViewer({collection: this.model.species});
+    }
+    this.registerRenderSubview(this.speciesEditor, 'species-editor-container');
+  },
+  renderParametersView: function (mode="edit") {
+    if(this.parametersEditor) {
+      this.parametersEditor.remove()
+    }
+    if(mode === "edit") {
+      this.parametersEditor = new ParametersEditorView({collection: this.model.parameters});
+    }else{
+      this.parametersEditor = new ParameterViewer({collection: this.model.parameters});
+    }
+    this.registerRenderSubview(this.parametersEditor, 'parameters-editor-container');
+  },
+  renderReactionsView: function (mode="edit") {
+    if(this.reactionsEditor) {
+      this.reactionsEditor.remove()
+    }
+    if(mode === "edit") {
+      this.reactionsEditor = new ReactionsEditorView({collection: this.model.reactions});
+    }else{
+      this.reactionsEditor = new ReactionsViewer({collection: this.model.reactions});
+    }
+    this.registerRenderSubview(this.reactionsEditor, 'reactions-editor-container');
+  },
+  renderEventsView: function (mode="edit") {
     if(this.eventsEditor){
       this.eventsEditor.remove();
     }
-    this.eventsEditor = new EventsEditorView({
-      collection: this.model.eventsCollection
-    });
+    if(mode === "edit") {
+      this.eventsEditor = new EventsEditorView({collection: this.model.eventsCollection});
+    }else{
+      this.eventsEditor = new EventsViewer({collection: this.model.eventsCollection});
+    }
     this.registerRenderSubview(this.eventsEditor, 'events-editor-container');
   },
-  renderRulesView: function () {
+  renderRulesView: function (mode="edit") {
     if(this.rulesEditor){
       this.rulesEditor.remove();
     }
-    this.rulesEditor = new RulesEditorView({
-      collection: this.model.rules
-    });
+    if(mode === "edit") {
+      this.rulesEditor = new RulesEditorView({collection: this.model.rules});
+    }else{
+      this.rulesEditor = new RulesViewer({collection: this.model.rules})
+    }
     this.registerRenderSubview(this.rulesEditor, 'rules-editor-container');
   },
   changeCollapseButtonText: function (e) {

From e4e7d5b1c4a7cf6e151fef619c3603b13a4f2fea Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Mon, 12 Oct 2020 10:59:54 -0400
Subject: [PATCH 15/31] Added a save button to the model component sections.

---
 client/pages/model-editor.js                   | 1 -
 client/templates/includes/eventsEditor.pug     | 5 +++--
 client/templates/includes/parametersEditor.pug | 5 +++--
 client/templates/includes/reactionsEditor.pug  | 6 ++++--
 client/templates/includes/ruleEditor.pug       | 4 +++-
 client/templates/includes/speciesEditor.pug    | 5 +++--
 6 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/client/pages/model-editor.js b/client/pages/model-editor.js
index 627914cd46..66f63f69bd 100644
--- a/client/pages/model-editor.js
+++ b/client/pages/model-editor.js
@@ -214,7 +214,6 @@ let ModelEditor = PageView.extend({
       $('[data-toggle="tooltip"]').tooltip();
       $('[data-toggle="tooltip"]').click(function () {
           $('[data-toggle="tooltip"]').tooltip("hide");
-
        });
     });
     $(document).on('hide.bs.modal', '.modal', function (e) {
diff --git a/client/templates/includes/eventsEditor.pug b/client/templates/includes/eventsEditor.pug
index 47b227ac6d..b94e27da13 100644
--- a/client/templates/includes/eventsEditor.pug
+++ b/client/templates/includes/eventsEditor.pug
@@ -40,5 +40,6 @@ div#events.card.card-body
 
       div.col-md-6.container-part(data-hook="event-details-container")
 
-    button.btn.btn-outline-primary.box-shadow(data-hook="add-event", type="button")
-      | Add Event
+    button.btn.btn-outline-primary.box-shadow(data-hook="add-event") Add Event
+
+    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-events") Save
diff --git a/client/templates/includes/parametersEditor.pug b/client/templates/includes/parametersEditor.pug
index 9d8640e120..18cdf0a18a 100644
--- a/client/templates/includes/parametersEditor.pug
+++ b/client/templates/includes/parametersEditor.pug
@@ -38,5 +38,6 @@ div#parameters-editor.card.card-body
         
       tbody(data-hook="parameter-list")
 
-    button.btn.btn-outline-primary.box-shadow(data-hook="add-parameter", type="button")
-      | Add Parameter
+    button.btn.btn-outline-primary.box-shadow(data-hook="add-parameter") Add Parameter
+
+    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-parameters") Save
diff --git a/client/templates/includes/reactionsEditor.pug b/client/templates/includes/reactionsEditor.pug
index 6154e9b86e..b1a7233f36 100644
--- a/client/templates/includes/reactionsEditor.pug
+++ b/client/templates/includes/reactionsEditor.pug
@@ -36,7 +36,7 @@ div#reactions-editor.card.card-body
 
       div.col-md-5.container-part(data-hook="reaction-details-container")
       
-    div.dropdown
+    div.dropdown.inline
 
       button.btn.btn-outline-primary.dropdown-toggle.box-shadow#addReactionBtn(
         data-hook="add-reaction-full",
@@ -58,7 +58,7 @@ div#reactions-editor.card.card-body
         li.dropdown-item(data-hook="custom-massaction") Custom mass action
         li.dropdown-item(data-hook="custom-propensity") Custom propensity
 
-    div.dropdown
+    div.dropdown.inline
 
       button.btn.btn-outline-primary.dropdown-toggle.box-shadow#addReactionBtn(
         data-hook="add-reaction-partial",
@@ -70,3 +70,5 @@ div#reactions-editor.card.card-body
 
       ul.dropdown-menu(aria-labelledby="addReactionBtn")
         li.dropdown-item(data-hook="custom-propensity") Custom propensity
+
+    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-reactions") Save
diff --git a/client/templates/includes/ruleEditor.pug b/client/templates/includes/ruleEditor.pug
index 12fabd387f..ff393ec15a 100644
--- a/client/templates/includes/ruleEditor.pug
+++ b/client/templates/includes/ruleEditor.pug
@@ -50,7 +50,7 @@ div#rules-editor.card.card-body
 
       tbody(data-hook="rule-list-container")
 
-    div.dropdown
+    div.dropdown.inline
 
       button.btn.btn-outline-primary.dropdown-toggle.box-shadow#addRuleBtn(
         data-hook="add-rule",
@@ -63,3 +63,5 @@ div#rules-editor.card.card-body
       ul.dropdown-menu(aria-labelledby="addRuleBtn")
         li.dropdown-item(data-hook="rate-rule" data-name="Rate Rule") Rate Rule
         li.dropdown-item(data-hook="assignment-rule" data-name="Assignment Rule") Assignment Rule
+
+    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-rules") Save
diff --git a/client/templates/includes/speciesEditor.pug b/client/templates/includes/speciesEditor.pug
index 0a07dc858a..6254296b36 100644
--- a/client/templates/includes/speciesEditor.pug
+++ b/client/templates/includes/speciesEditor.pug
@@ -85,5 +85,6 @@ div#species-editor.card.card-body
 
         tbody(data-hook="edit-species-mode")
 
-    button.btn.btn-outline-primary.box-shadow(data-hook="add-species", type="button")
-      | Add Species
+    button.btn.btn-outline-primary.box-shadow(data-hook="add-species") Add Species
+
+    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-species") Save

From 8d15b6c20a5390d3e0c4cb9f4c5e6ec0d89b2331 Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Mon, 12 Oct 2020 11:29:39 -0400
Subject: [PATCH 16/31] Added 'switchToViewMode' function and save button event
 listener to the component editor files.  Changed 'Add Species' to 'Add
 Variable'.  Fixed grammatical error in the reaction description.

---
 client/templates/includes/reactionsEditor.pug | 2 +-
 client/templates/includes/speciesEditor.pug   | 2 +-
 client/views/events-editor.js                 | 4 ++++
 client/views/parameters-editor.js             | 4 ++++
 client/views/reactions-editor.js              | 4 ++++
 client/views/rules-editor.js                  | 4 ++++
 client/views/species-editor.js                | 4 ++++
 7 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/client/templates/includes/reactionsEditor.pug b/client/templates/includes/reactionsEditor.pug
index b1a7233f36..a101dc9d59 100644
--- a/client/templates/includes/reactionsEditor.pug
+++ b/client/templates/includes/reactionsEditor.pug
@@ -11,7 +11,7 @@ div#reactions-editor.card.card-body
   div.collapse(class="show", id="collapse-reaction")
 
     p
-      | A process that transforms a set of <i>Variable</i>s (reactants) into a set of <i>Variable</i>s (products) at a rate set a <i>Parameter</i>. Select from the given reaction templates, or use the custom types. The symbol <span data-hook="emptyset"></span> represents null or emptyset. 
+      | A process that transforms a set of <i>Variable</i>s (reactants) into a set of <i>Variable</i>s (products) at a rate set by a <i>Parameter</i>. Select from the given reaction templates, or use the custom types. The symbol <span data-hook="emptyset"></span> represents null or emptyset. 
 
     div.row
       div.col-md-7.container-part: table.table
diff --git a/client/templates/includes/speciesEditor.pug b/client/templates/includes/speciesEditor.pug
index 6254296b36..084a3ef4f7 100644
--- a/client/templates/includes/speciesEditor.pug
+++ b/client/templates/includes/speciesEditor.pug
@@ -85,6 +85,6 @@ div#species-editor.card.card-body
 
         tbody(data-hook="edit-species-mode")
 
-    button.btn.btn-outline-primary.box-shadow(data-hook="add-species") Add Species
+    button.btn.btn-outline-primary.box-shadow(data-hook="add-species") Add Variable
 
     button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-species") Save
diff --git a/client/views/events-editor.js b/client/views/events-editor.js
index cf368cfc29..54bd48553d 100644
--- a/client/views/events-editor.js
+++ b/client/views/events-editor.js
@@ -31,6 +31,7 @@ module.exports = View.extend({
   template: template,
   events: {
     'click [data-hook=add-event]' : 'addEvent',
+    'click [data-hook=save-events]' : 'switchToViewMode',
     'click [data-hook=collapse]' : 'changeCollapseButtonText',
   },
   initialize: function (attrs, options) {
@@ -124,6 +125,9 @@ module.exports = View.extend({
     detailsView.parent = this;
     return detailsView
   },
+  switchToViewMode: function (e) {
+    this.parent.renderEventsView(mode="view");
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)
diff --git a/client/views/parameters-editor.js b/client/views/parameters-editor.js
index 1c2c235483..b4b03dc9a8 100644
--- a/client/views/parameters-editor.js
+++ b/client/views/parameters-editor.js
@@ -29,6 +29,7 @@ module.exports = View.extend({
   template: template,
   events: {
     'click [data-hook=add-parameter]' : 'addParameter',
+    'click [data-hook=save-parameters]' : 'switchToViewMode',
     'click [data-hook=collapse]' : 'changeCollapseButtonText',
   },
   initialize: function (attrs, options) {
@@ -92,6 +93,9 @@ module.exports = View.extend({
        });
     });
   },
+  switchToViewMode: function (e) {
+    this.parent.renderParametersView(mode="view");
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)
diff --git a/client/views/reactions-editor.js b/client/views/reactions-editor.js
index 972d6dcd4e..11d8aee1aa 100644
--- a/client/views/reactions-editor.js
+++ b/client/views/reactions-editor.js
@@ -44,6 +44,7 @@ module.exports = View.extend({
     'click [data-hook=four]'                   : 'handleAddReactionClick',
     'click [data-hook=custom-massaction]'      : 'handleAddReactionClick',
     'click [data-hook=custom-propensity]'      : 'handleAddReactionClick',
+    'click [data-hook=save-reactions]' : 'switchToViewMode',
     'click [data-hook=collapse]' : 'changeCollapseButtonText'
   },
   initialize: function (attrs, options) {
@@ -161,6 +162,9 @@ module.exports = View.extend({
     detailsView.parent = this;
     return detailsView
   },
+  switchToViewMode: function (e) {
+    this.parent.renderReactionsView(mode="view");
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)
diff --git a/client/views/rules-editor.js b/client/views/rules-editor.js
index a7933eae4b..7d8e9cde0e 100644
--- a/client/views/rules-editor.js
+++ b/client/views/rules-editor.js
@@ -30,6 +30,7 @@ module.exports = View.extend({
   events: {
     'click [data-hook=rate-rule]' : 'addRule',
     'click [data-hook=assignment-rule]' : 'addRule',
+    'click [data-hook=save-rules]' : 'switchToViewMode',
     'click [data-hook=collapse]' : 'changeCollapseButtonText',
   },
   initialize: function (args) {
@@ -81,6 +82,9 @@ module.exports = View.extend({
        });
     });
   },
+  switchToViewMode: function (e) {
+    this.parent.renderRulesView(mode="view");
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)
diff --git a/client/views/species-editor.js b/client/views/species-editor.js
index 436c2f4e69..96f8efe345 100644
--- a/client/views/species-editor.js
+++ b/client/views/species-editor.js
@@ -35,6 +35,7 @@ module.exports = View.extend({
     'change [data-hook=all-discrete]' : 'getDefaultSpeciesMode',
     'change [data-hook=advanced]' : 'getDefaultSpeciesMode',
     'click [data-hook=add-species]' : 'handleAddSpeciesClick',
+    'click [data-hook=save-species]' : 'switchToViewMode',
     'click [data-hook=collapse]' : 'changeCollapseButtonText',
   },
   initialize: function (attrs, options) {
@@ -189,6 +190,9 @@ module.exports = View.extend({
        });
     });
   },
+  switchToViewMode: function (e) {
+    this.parent.renderSpeciesView(mode="view");
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)

From 6f545b90ece1d0dc3db08a1cb2d6df5df63ac5e9 Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Mon, 12 Oct 2020 11:43:01 -0400
Subject: [PATCH 17/31] Refactored the species viewer to only display the
 'Switch Tolerance/Minimum Value for Switching' column if the default mode is
 dynamic.

---
 client/templates/includes/eventsEditor.pug     | 2 +-
 client/templates/includes/parametersEditor.pug | 2 +-
 client/templates/includes/reactionsEditor.pug  | 2 +-
 client/templates/includes/ruleEditor.pug       | 2 +-
 client/templates/includes/speciesEditor.pug    | 2 +-
 client/templates/includes/speciesViewer.pug    | 3 ++-
 client/templates/includes/viewSpecies.pug      | 3 ++-
 7 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/client/templates/includes/eventsEditor.pug b/client/templates/includes/eventsEditor.pug
index b94e27da13..41f5845440 100644
--- a/client/templates/includes/eventsEditor.pug
+++ b/client/templates/includes/eventsEditor.pug
@@ -42,4 +42,4 @@ div#events.card.card-body
 
     button.btn.btn-outline-primary.box-shadow(data-hook="add-event") Add Event
 
-    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-events") Save
+    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-events") Save Events
diff --git a/client/templates/includes/parametersEditor.pug b/client/templates/includes/parametersEditor.pug
index 18cdf0a18a..513a53b2b0 100644
--- a/client/templates/includes/parametersEditor.pug
+++ b/client/templates/includes/parametersEditor.pug
@@ -40,4 +40,4 @@ div#parameters-editor.card.card-body
 
     button.btn.btn-outline-primary.box-shadow(data-hook="add-parameter") Add Parameter
 
-    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-parameters") Save
+    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-parameters") Save Parameters
diff --git a/client/templates/includes/reactionsEditor.pug b/client/templates/includes/reactionsEditor.pug
index a101dc9d59..17256c7079 100644
--- a/client/templates/includes/reactionsEditor.pug
+++ b/client/templates/includes/reactionsEditor.pug
@@ -71,4 +71,4 @@ div#reactions-editor.card.card-body
       ul.dropdown-menu(aria-labelledby="addReactionBtn")
         li.dropdown-item(data-hook="custom-propensity") Custom propensity
 
-    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-reactions") Save
+    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-reactions") Save Reactions
diff --git a/client/templates/includes/ruleEditor.pug b/client/templates/includes/ruleEditor.pug
index ff393ec15a..c1c2d88768 100644
--- a/client/templates/includes/ruleEditor.pug
+++ b/client/templates/includes/ruleEditor.pug
@@ -64,4 +64,4 @@ div#rules-editor.card.card-body
         li.dropdown-item(data-hook="rate-rule" data-name="Rate Rule") Rate Rule
         li.dropdown-item(data-hook="assignment-rule" data-name="Assignment Rule") Assignment Rule
 
-    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-rules") Save
+    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-rules") Save Rules
diff --git a/client/templates/includes/speciesEditor.pug b/client/templates/includes/speciesEditor.pug
index 084a3ef4f7..0b5212fb2a 100644
--- a/client/templates/includes/speciesEditor.pug
+++ b/client/templates/includes/speciesEditor.pug
@@ -87,4 +87,4 @@ div#species-editor.card.card-body
 
     button.btn.btn-outline-primary.box-shadow(data-hook="add-species") Add Variable
 
-    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-species") Save
+    button.btn.btn-outline-primary.box-shadow.ml-2(data-hook="save-species") Save Variables
diff --git a/client/templates/includes/speciesViewer.pug b/client/templates/includes/speciesViewer.pug
index 508535ecbf..55ab6c2f28 100644
--- a/client/templates/includes/speciesViewer.pug
+++ b/client/templates/includes/speciesViewer.pug
@@ -13,6 +13,7 @@ div#species-viewer.card.card-body
           th.col-md-3-view(scope="col") Name
           th.col-md-3-view(scope="col") Initial Condition
           th.col-md-3-view(scope="col") Mode
-          th.col-md-3-view(scope="col") Switch Tolerance/Minimum Value for Switching
+          if this.collection.parent.defaultMode === "dynamic"
+            th.col-md-3-view(scope="col") Switch Tolerance/Minimum Value for Switching
         
       tbody(data-hook="specie-list")
\ No newline at end of file
diff --git a/client/templates/includes/viewSpecies.pug b/client/templates/includes/viewSpecies.pug
index dd7a0e873d..ccc54efe72 100644
--- a/client/templates/includes/viewSpecies.pug
+++ b/client/templates/includes/viewSpecies.pug
@@ -5,4 +5,5 @@ tr
 
   td=this.model.mode
 
-  td=this.switchingValWithLabel
\ No newline at end of file
+  if this.model.collection.parent.defaultMode === 'dynamic'
+    td=this.switchingValWithLabel
\ No newline at end of file

From 39902d3a4cc634d26f54418f143cd5597b451f8f Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Mon, 12 Oct 2020 11:56:23 -0400
Subject: [PATCH 18/31] Added edit component buttons to the model conponent
 viewer files that only display when the viewer is rendered on the model
 editor page.

---
 client/templates/includes/eventsViewer.pug     | 5 ++++-
 client/templates/includes/parametersViewer.pug | 3 +++
 client/templates/includes/reactionsViewer.pug  | 5 ++++-
 client/templates/includes/rulesViewer.pug      | 5 ++++-
 client/templates/includes/speciesViewer.pug    | 5 ++++-
 5 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/client/templates/includes/eventsViewer.pug b/client/templates/includes/eventsViewer.pug
index ef1ebd18f4..a958d2462d 100644
--- a/client/templates/includes/eventsViewer.pug
+++ b/client/templates/includes/eventsViewer.pug
@@ -25,4 +25,7 @@ div#events-viewer.card.card-body
 
           th(scope="col") Use Values From
 
-      tbody(data-hook="view-events-container")
\ No newline at end of file
+      tbody(data-hook="view-events-container")
+
+    if this.collection.parent.for === "edit"
+      button.btn.btn-outline-primary.box-shadow(data-hook="edit-events") Edit Events
diff --git a/client/templates/includes/parametersViewer.pug b/client/templates/includes/parametersViewer.pug
index a8e6fc70fc..7e91269a54 100644
--- a/client/templates/includes/parametersViewer.pug
+++ b/client/templates/includes/parametersViewer.pug
@@ -14,3 +14,6 @@ div#parameters-viewer.card.card-body
           th.col-md-9-view(scope="col") Value
         
       tbody(data-hook="parameter-list")
+
+    if this.collection.parent.for === "edit"
+      button.btn.btn-outline-primary.box-shadow(data-hook="edit-parameters") Edit Parameters
diff --git a/client/templates/includes/reactionsViewer.pug b/client/templates/includes/reactionsViewer.pug
index 9260b4dba2..d8eacdc4f1 100644
--- a/client/templates/includes/reactionsViewer.pug
+++ b/client/templates/includes/reactionsViewer.pug
@@ -14,4 +14,7 @@ div#reactions-viewer.card.card-body
           th.col-md-3-view(scope="col") Summary
           th.col-md-6-view(scope="col") Rate/Propensity
         
-      tbody(data-hook="reaction-list")
\ No newline at end of file
+      tbody(data-hook="reaction-list")
+
+    if this.collection.parent.for === "edit"
+      button.btn.btn-outline-primary.box-shadow(data-hook="edit-reactions") Edit Reactions
diff --git a/client/templates/includes/rulesViewer.pug b/client/templates/includes/rulesViewer.pug
index 9624792313..96d8871487 100644
--- a/client/templates/includes/rulesViewer.pug
+++ b/client/templates/includes/rulesViewer.pug
@@ -15,4 +15,7 @@ div#rules-viewer.card.card-body
           th.col-md-3-view(scope="col") Variable
           th.col-md-3-view(scope="col") Formula
         
-      tbody(data-hook="rules-list")
\ No newline at end of file
+      tbody(data-hook="rules-list")
+
+    if this.collection.parent.for === "edit"
+      button.btn.btn-outline-primary.box-shadow(data-hook="edit-rules") Edit Rules
diff --git a/client/templates/includes/speciesViewer.pug b/client/templates/includes/speciesViewer.pug
index 55ab6c2f28..453b92763b 100644
--- a/client/templates/includes/speciesViewer.pug
+++ b/client/templates/includes/speciesViewer.pug
@@ -16,4 +16,7 @@ div#species-viewer.card.card-body
           if this.collection.parent.defaultMode === "dynamic"
             th.col-md-3-view(scope="col") Switch Tolerance/Minimum Value for Switching
         
-      tbody(data-hook="specie-list")
\ No newline at end of file
+      tbody(data-hook="specie-list")
+
+    if this.collection.parent.for === "edit"
+      button.btn.btn-outline-primary.box-shadow(data-hook="edit-species") Edit Variables

From 57787064aad67704cf82d0877e39afe72da9c00e Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Mon, 12 Oct 2020 12:15:40 -0400
Subject: [PATCH 19/31] Added 'switchToEditMode' function and edit component
 event listener to the model component vierer files.

---
 client/views/events-viewer.js     | 13 +++++++++++--
 client/views/parameters-viewer.js |  4 ++++
 client/views/reactions-viewer.js  |  4 ++++
 client/views/rules-viewer.js      |  4 ++++
 client/views/species-viewer.js    |  4 ++++
 5 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/client/views/events-viewer.js b/client/views/events-viewer.js
index 7a5a93cd3a..3581c72b1d 100644
--- a/client/views/events-viewer.js
+++ b/client/views/events-viewer.js
@@ -27,6 +27,7 @@ module.exports = View.extend({
   template: template,
   events: {
     'click [data-hook=collapse]' : 'changeSettingsCollapseButtonText',
+    'click [data-hook=edit-events]' : 'switchToEditMode'
   },
   initialize: function (attrs, options) {
     View.prototype.initialize.apply(this, arguments);
@@ -35,8 +36,16 @@ module.exports = View.extend({
     View.prototype.render.apply(this, arguments);
     this.renderCollection(this.collection, ViewEvent, this.queryByHook('view-events-container'))
   },
+  switchToEditMode: function (e) {
+    this.parent.renderEventsView();
+  },
   changeSettingsCollapseButtonText: function () {
-    var text = $(this.queryByHook('collapse')).text();
-    text === '+' ? $(this.queryByHook('collapse')).text('-') : $(this.queryByHook('collapse')).text('+');
+    let source = e.target.dataset.hook
+    let collapseContainer = $(this.queryByHook(source).dataset.target)
+    if(!collapseContainer.length || !collapseContainer.attr("class").includes("collapsing")) {
+      let collapseBtn = $(this.queryByHook(source))
+      let text = collapseBtn.text();
+      text === '+' ? collapseBtn.text('-') : collapseBtn.text('+');
+    }
   },
 });
\ No newline at end of file
diff --git a/client/views/parameters-viewer.js b/client/views/parameters-viewer.js
index fdba80e330..0b74dc6dae 100644
--- a/client/views/parameters-viewer.js
+++ b/client/views/parameters-viewer.js
@@ -27,6 +27,7 @@ module.exports = View.extend({
   template: template,
   events: {
     'click [data-hook=collapse]' : 'changeCollapseButtonText',
+    'click [data-hook=edit-parameters]' : 'switchToEditMode'
   },
   initialize: function (attrs, options) {
     View.prototype.initialize.apply(this, arguments);
@@ -35,6 +36,9 @@ module.exports = View.extend({
     View.prototype.render.apply(this, arguments);
     this.renderCollection(this.collection, ViewParameter, this.queryByHook('parameter-list'))
   },
+  switchToEditMode: function (e) {
+    this.parent.renderParametersView();
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)
diff --git a/client/views/reactions-viewer.js b/client/views/reactions-viewer.js
index ef411c0334..2d410dccba 100644
--- a/client/views/reactions-viewer.js
+++ b/client/views/reactions-viewer.js
@@ -27,6 +27,7 @@ module.exports = View.extend({
   template: template,
   events: {
     'click [data-hook=collapse]' : 'changeCollapseButtonText',
+    'click [data-hook=edit-reactions]' : 'switchToEditMode'
   },
   initialize: function (attrs, options) {
     View.prototype.initialize.apply(this, arguments);
@@ -35,6 +36,9 @@ module.exports = View.extend({
     View.prototype.render.apply(this, arguments);
     this.renderCollection(this.collection, ViewReactions, this.queryByHook('reaction-list'))
   },
+  switchToEditMode: function (e) {
+    this.parent.renderReactionsView();
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)
diff --git a/client/views/rules-viewer.js b/client/views/rules-viewer.js
index 4cb6770732..3a152228f9 100644
--- a/client/views/rules-viewer.js
+++ b/client/views/rules-viewer.js
@@ -27,6 +27,7 @@ module.exports = View.extend({
   template: template,
   events: {
     'click [data-hook=collapse]' : 'changeCollapseButtonText',
+    'click [data-hook=edit-rules]' : 'switchToEditMode'
   },
   initialize: function (attrs, options) {
     View.prototype.initialize.apply(this, arguments);
@@ -35,6 +36,9 @@ module.exports = View.extend({
     View.prototype.render.apply(this, arguments);
     this.renderCollection(this.collection, ViewRules, this.queryByHook('rules-list'))
   },
+  switchToEditMode: function (e) {
+    this.parent.renderRulesView();
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)
diff --git a/client/views/species-viewer.js b/client/views/species-viewer.js
index 8e876191cd..c5ec42017f 100644
--- a/client/views/species-viewer.js
+++ b/client/views/species-viewer.js
@@ -27,6 +27,7 @@ module.exports = View.extend({
   template: template,
   events: {
     'click [data-hook=collapse]' : 'changeCollapseButtonText',
+    'click [data-hook=edit-species]' : 'switchToEditMode'
   },
   initialize: function (attrs, options) {
     View.prototype.initialize.apply(this, arguments);
@@ -35,6 +36,9 @@ module.exports = View.extend({
     View.prototype.render.apply(this, arguments);
     this.renderCollection(this.collection, ViewSpecie, this.queryByHook('specie-list'))
   },
+  switchToEditMode: function (e) {
+    this.parent.renderSpeciesView();
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)

From 82e04f565eae9a210d8a57ef9635856509635be8 Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Mon, 12 Oct 2020 12:47:41 -0400
Subject: [PATCH 20/31] Added opened parameter to the render functions for
 Parameters, Reactions, Events, and Rules in the model editor. Added the
 'opened' parameter to the render component function calls in the component
 viewer files. Added function to the Parameters, Reactions, Rules, and Events
 editor files that open the container if the section is rendered with opened
 set to true Added data-hook to facilitate the open functionality were needed.

---
 client/pages/model-editor.js                   | 16 ++++++++--------
 client/templates/includes/parametersEditor.pug |  4 ++--
 client/templates/includes/reactionsEditor.pug  |  4 ++--
 client/templates/includes/ruleEditor.pug       |  2 +-
 client/views/events-editor.js                  |  9 +++++++++
 client/views/events-viewer.js                  |  2 +-
 client/views/parameters-editor.js              |  9 +++++++++
 client/views/parameters-viewer.js              |  2 +-
 client/views/reactions-editor.js               |  9 +++++++++
 client/views/reactions-viewer.js               |  2 +-
 client/views/rules-editor.js                   |  9 +++++++++
 client/views/rules-viewer.js                   |  2 +-
 12 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/client/pages/model-editor.js b/client/pages/model-editor.js
index 66f63f69bd..09a84b0bff 100644
--- a/client/pages/model-editor.js
+++ b/client/pages/model-editor.js
@@ -235,45 +235,45 @@ let ModelEditor = PageView.extend({
     }
     this.registerRenderSubview(this.speciesEditor, 'species-editor-container');
   },
-  renderParametersView: function (mode="edit") {
+  renderParametersView: function (mode="edit", opened=false) {
     if(this.parametersEditor) {
       this.parametersEditor.remove()
     }
     if(mode === "edit") {
-      this.parametersEditor = new ParametersEditorView({collection: this.model.parameters});
+      this.parametersEditor = new ParametersEditorView({collection: this.model.parameters, opened: opened});
     }else{
       this.parametersEditor = new ParameterViewer({collection: this.model.parameters});
     }
     this.registerRenderSubview(this.parametersEditor, 'parameters-editor-container');
   },
-  renderReactionsView: function (mode="edit") {
+  renderReactionsView: function (mode="edit", opened=false) {
     if(this.reactionsEditor) {
       this.reactionsEditor.remove()
     }
     if(mode === "edit") {
-      this.reactionsEditor = new ReactionsEditorView({collection: this.model.reactions});
+      this.reactionsEditor = new ReactionsEditorView({collection: this.model.reactions, opened: opened});
     }else{
       this.reactionsEditor = new ReactionsViewer({collection: this.model.reactions});
     }
     this.registerRenderSubview(this.reactionsEditor, 'reactions-editor-container');
   },
-  renderEventsView: function (mode="edit") {
+  renderEventsView: function (mode="edit", opened=false) {
     if(this.eventsEditor){
       this.eventsEditor.remove();
     }
     if(mode === "edit") {
-      this.eventsEditor = new EventsEditorView({collection: this.model.eventsCollection});
+      this.eventsEditor = new EventsEditorView({collection: this.model.eventsCollection, opened: opened});
     }else{
       this.eventsEditor = new EventsViewer({collection: this.model.eventsCollection});
     }
     this.registerRenderSubview(this.eventsEditor, 'events-editor-container');
   },
-  renderRulesView: function (mode="edit") {
+  renderRulesView: function (mode="edit", opened=false) {
     if(this.rulesEditor){
       this.rulesEditor.remove();
     }
     if(mode === "edit") {
-      this.rulesEditor = new RulesEditorView({collection: this.model.rules});
+      this.rulesEditor = new RulesEditorView({collection: this.model.rules, opened: opened});
     }else{
       this.rulesEditor = new RulesViewer({collection: this.model.rules})
     }
diff --git a/client/templates/includes/parametersEditor.pug b/client/templates/includes/parametersEditor.pug
index 513a53b2b0..707ada2a8b 100644
--- a/client/templates/includes/parametersEditor.pug
+++ b/client/templates/includes/parametersEditor.pug
@@ -3,9 +3,9 @@ div#parameters-editor.card.card-body
   div
 
     h3.inline Parameters
-    button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-parameters", data-hook="collapse") -
+    button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-parameters", data-hook="collapse") +
 
-  div.collapse(class="show", id="collapse-parameters")
+  div.collapse(id="collapse-parameters" data-hook="parameters-list-container")
     p
      | Constant values that represents an inherent properties of the system. Used to set the rate of a <i>Reaction</i>.
 
diff --git a/client/templates/includes/reactionsEditor.pug b/client/templates/includes/reactionsEditor.pug
index 17256c7079..8c2a25314b 100644
--- a/client/templates/includes/reactionsEditor.pug
+++ b/client/templates/includes/reactionsEditor.pug
@@ -6,9 +6,9 @@ div#reactions-editor.card.card-body
       div
         div.inline Reactions
 
-        button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-reaction", data-hook="collapse") -
+        button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-reaction", data-hook="collapse") +
 
-  div.collapse(class="show", id="collapse-reaction")
+  div.collapse(id="collapse-reaction" data-hook="reactions-list-container")
 
     p
       | A process that transforms a set of <i>Variable</i>s (reactants) into a set of <i>Variable</i>s (products) at a rate set by a <i>Parameter</i>. Select from the given reaction templates, or use the custom types. The symbol <span data-hook="emptyset"></span> represents null or emptyset. 
diff --git a/client/templates/includes/ruleEditor.pug b/client/templates/includes/ruleEditor.pug
index c1c2d88768..65311b84c6 100644
--- a/client/templates/includes/ruleEditor.pug
+++ b/client/templates/includes/ruleEditor.pug
@@ -6,7 +6,7 @@ div#rules-editor.card.card-body
 
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-rules", data-hook="collapse") +
 
-  div.collapse(id="collapse-rules")
+  div.collapse(id="collapse-rules" data-hook="rules-list-container")
     p
      | Equations that determine the value (assignment rule) or rates of change (rate rule) of <i>Variables</i>.
 
diff --git a/client/views/events-editor.js b/client/views/events-editor.js
index 54bd48553d..573d6e7fc4 100644
--- a/client/views/events-editor.js
+++ b/client/views/events-editor.js
@@ -37,6 +37,7 @@ module.exports = View.extend({
   initialize: function (attrs, options) {
     View.prototype.initialize.apply(this, arguments);
     this.tooltips = Tooltips.eventsEditor
+    this.opened = attrs.opened
     this.collection.on("select", function (event) {
       this.setSelectedEvent(event);
       this.setDetailsView(event);
@@ -67,6 +68,9 @@ module.exports = View.extend({
       this.collection.trigger("select", this.selectedEvent);
     }
     this.toggleAddEventButton()
+    if(this.opened) {
+      this.openEventsContainer();
+    }
   },
   update: function () {
   },
@@ -128,6 +132,11 @@ module.exports = View.extend({
   switchToViewMode: function (e) {
     this.parent.renderEventsView(mode="view");
   },
+  openEventsContainer: function () {
+    $(this.queryByHook('events')).collapse('show');
+    let collapseBtn = $(this.queryByHook('collapse'))
+    collapseBtn.trigger('click')
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)
diff --git a/client/views/events-viewer.js b/client/views/events-viewer.js
index 3581c72b1d..614c66d0a4 100644
--- a/client/views/events-viewer.js
+++ b/client/views/events-viewer.js
@@ -37,7 +37,7 @@ module.exports = View.extend({
     this.renderCollection(this.collection, ViewEvent, this.queryByHook('view-events-container'))
   },
   switchToEditMode: function (e) {
-    this.parent.renderEventsView();
+    this.parent.renderEventsView("edit", true);
   },
   changeSettingsCollapseButtonText: function () {
     let source = e.target.dataset.hook
diff --git a/client/views/parameters-editor.js b/client/views/parameters-editor.js
index b4b03dc9a8..21ad5376cc 100644
--- a/client/views/parameters-editor.js
+++ b/client/views/parameters-editor.js
@@ -36,6 +36,7 @@ module.exports = View.extend({
     var self = this;
     View.prototype.initialize.apply(this, arguments);
     this.tooltips = Tooltips.parametersEditor
+    this.opened = attrs.opened
     this.collection.on('update-parameters', function (compID, parameter) {
       self.collection.parent.reactions.map(function (reaction) {
         if(reaction.rate && reaction.rate.compID === compID){
@@ -62,6 +63,9 @@ module.exports = View.extend({
   render: function () {
     View.prototype.render.apply(this, arguments);
     this.renderEditParameter();
+    if(this.opened) {
+      this.openParametersContainer();
+    }
   },
   update: function () {
   },
@@ -96,6 +100,11 @@ module.exports = View.extend({
   switchToViewMode: function (e) {
     this.parent.renderParametersView(mode="view");
   },
+  openParametersContainer: function () {
+    $(this.queryByHook('parameters-list-container')).collapse('show');
+    let collapseBtn = $(this.queryByHook('collapse'))
+    collapseBtn.trigger('click')
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)
diff --git a/client/views/parameters-viewer.js b/client/views/parameters-viewer.js
index 0b74dc6dae..4df15eac7d 100644
--- a/client/views/parameters-viewer.js
+++ b/client/views/parameters-viewer.js
@@ -37,7 +37,7 @@ module.exports = View.extend({
     this.renderCollection(this.collection, ViewParameter, this.queryByHook('parameter-list'))
   },
   switchToEditMode: function (e) {
-    this.parent.renderParametersView();
+    this.parent.renderParametersView("edit", true);
   },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
diff --git a/client/views/reactions-editor.js b/client/views/reactions-editor.js
index 11d8aee1aa..91a2d6c6c7 100644
--- a/client/views/reactions-editor.js
+++ b/client/views/reactions-editor.js
@@ -50,6 +50,7 @@ module.exports = View.extend({
   initialize: function (attrs, options) {
     View.prototype.initialize.apply(this, arguments);
     this.tooltips = Tooltips.reactionsEditor
+    this.opened = attrs.opened
     this.collection.on("select", function (reaction) {
       this.setSelectedReaction(reaction);
       this.setDetailsView(reaction);
@@ -92,6 +93,9 @@ module.exports = View.extend({
       displayMode: false,
       output: 'html',
     });
+    if(this.opened) {
+      this.openReactionsContainer();
+    }
   },
   update: function () {
   },
@@ -165,6 +169,11 @@ module.exports = View.extend({
   switchToViewMode: function (e) {
     this.parent.renderReactionsView(mode="view");
   },
+  openReactionsContainer: function () {
+    $(this.queryByHook('reactions-list-container')).collapse('show');
+    let collapseBtn = $(this.queryByHook('collapse'))
+    collapseBtn.trigger('click')
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)
diff --git a/client/views/reactions-viewer.js b/client/views/reactions-viewer.js
index 2d410dccba..75b547a601 100644
--- a/client/views/reactions-viewer.js
+++ b/client/views/reactions-viewer.js
@@ -37,7 +37,7 @@ module.exports = View.extend({
     this.renderCollection(this.collection, ViewReactions, this.queryByHook('reaction-list'))
   },
   switchToEditMode: function (e) {
-    this.parent.renderReactionsView();
+    this.parent.renderReactionsView("edit", true);
   },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
diff --git a/client/views/rules-editor.js b/client/views/rules-editor.js
index 7d8e9cde0e..29de973bc3 100644
--- a/client/views/rules-editor.js
+++ b/client/views/rules-editor.js
@@ -38,11 +38,15 @@ module.exports = View.extend({
     this.collection.parent.species.on('add remove', this.toggleAddRuleButton, this);
     this.collection.parent.parameters.on('add remove', this.toggleAddRuleButton, this);
     this.tooltips = Tooltips.rulesEditor
+    this.opened = args.opened
   },
   render: function () {
     View.prototype.render.apply(this, arguments);
     this.renderRules();
     this.toggleAddRuleButton()
+    if(this.opened) {
+      this.openRulesContainer();
+    }
   },
   update: function () {
   },
@@ -85,6 +89,11 @@ module.exports = View.extend({
   switchToViewMode: function (e) {
     this.parent.renderRulesView(mode="view");
   },
+  openRulesContainer: function () {
+    $(this.queryByHook('rules-list-container')).collapse('show');
+    let collapseBtn = $(this.queryByHook('collapse'))
+    collapseBtn.trigger('click')
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)
diff --git a/client/views/rules-viewer.js b/client/views/rules-viewer.js
index 3a152228f9..76d492561b 100644
--- a/client/views/rules-viewer.js
+++ b/client/views/rules-viewer.js
@@ -37,7 +37,7 @@ module.exports = View.extend({
     this.renderCollection(this.collection, ViewRules, this.queryByHook('rules-list'))
   },
   switchToEditMode: function (e) {
-    this.parent.renderRulesView();
+    this.parent.renderRulesView("edit", true);
   },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook

From 0215ef52a1eb4796845ed1465bd56b2066eb4e98 Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Mon, 12 Oct 2020 12:58:27 -0400
Subject: [PATCH 21/31] Added model save functionality to the
 'switchToViewMode' function of the component editor functions.

---
 client/views/events-editor.js     | 1 +
 client/views/parameters-editor.js | 1 +
 client/views/reactions-editor.js  | 1 +
 client/views/rules-editor.js      | 1 +
 client/views/species-editor.js    | 1 +
 5 files changed, 5 insertions(+)

diff --git a/client/views/events-editor.js b/client/views/events-editor.js
index 573d6e7fc4..a62e27c340 100644
--- a/client/views/events-editor.js
+++ b/client/views/events-editor.js
@@ -130,6 +130,7 @@ module.exports = View.extend({
     return detailsView
   },
   switchToViewMode: function (e) {
+    this.parent.modelStateButtons.clickSaveHandler(e);
     this.parent.renderEventsView(mode="view");
   },
   openEventsContainer: function () {
diff --git a/client/views/parameters-editor.js b/client/views/parameters-editor.js
index 21ad5376cc..57f71e565b 100644
--- a/client/views/parameters-editor.js
+++ b/client/views/parameters-editor.js
@@ -98,6 +98,7 @@ module.exports = View.extend({
     });
   },
   switchToViewMode: function (e) {
+    this.parent.modelStateButtons.clickSaveHandler(e);
     this.parent.renderParametersView(mode="view");
   },
   openParametersContainer: function () {
diff --git a/client/views/reactions-editor.js b/client/views/reactions-editor.js
index 91a2d6c6c7..9b5a924ea7 100644
--- a/client/views/reactions-editor.js
+++ b/client/views/reactions-editor.js
@@ -167,6 +167,7 @@ module.exports = View.extend({
     return detailsView
   },
   switchToViewMode: function (e) {
+    this.parent.modelStateButtons.clickSaveHandler(e);
     this.parent.renderReactionsView(mode="view");
   },
   openReactionsContainer: function () {
diff --git a/client/views/rules-editor.js b/client/views/rules-editor.js
index 29de973bc3..27ef7d1537 100644
--- a/client/views/rules-editor.js
+++ b/client/views/rules-editor.js
@@ -87,6 +87,7 @@ module.exports = View.extend({
     });
   },
   switchToViewMode: function (e) {
+    this.parent.modelStateButtons.clickSaveHandler(e);
     this.parent.renderRulesView(mode="view");
   },
   openRulesContainer: function () {
diff --git a/client/views/species-editor.js b/client/views/species-editor.js
index 96f8efe345..8297d08ea7 100644
--- a/client/views/species-editor.js
+++ b/client/views/species-editor.js
@@ -191,6 +191,7 @@ module.exports = View.extend({
     });
   },
   switchToViewMode: function (e) {
+    this.parent.modelStateButtons.clickSaveHandler(e);
     this.parent.renderSpeciesView(mode="view");
   },
   changeCollapseButtonText: function (e) {

From 7490480a43c00f284a21a8e125fcade791b7a892 Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Mon, 12 Oct 2020 13:10:10 -0400
Subject: [PATCH 22/31] Fixed model name bug in the project manager's models
 section and project name bug in the breadcrumb link of the model editor page.

---
 client/pages/model-editor.js | 2 +-
 stochss/handlers/project.py  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/pages/model-editor.js b/client/pages/model-editor.js
index 09a84b0bff..b4c2f9e656 100644
--- a/client/pages/model-editor.js
+++ b/client/pages/model-editor.js
@@ -73,7 +73,7 @@ let ModelEditor = PageView.extend({
     });
     if(directory.includes('.proj')) {
       this.projectPath = path.dirname(directory)
-      this.projectName = this.projectPath.split('/').pop().split('.')[0]
+      this.projectName = this.getFileName(this.projectPath)
     }
     this.model.fetch({
       success: function (model, response, options) {
diff --git a/stochss/handlers/project.py b/stochss/handlers/project.py
index bd2ec2881d..210c346b35 100644
--- a/stochss/handlers/project.py
+++ b/stochss/handlers/project.py
@@ -32,7 +32,7 @@
 from tornado import web
 from notebook.base.handlers import APIHandler
 
-from .util.rename import get_unique_file_name
+from .util.rename import get_unique_file_name, get_file_name
 from .util.workflow_status import get_status
 from .util.generate_zip_file import download_zip
 from .util.convert_to_combine import convert
@@ -116,7 +116,7 @@ def get(self):
                 mdl_dir = os.path.join(path, item)
                 with open(mdl_dir, 'r') as mdl_file:
                     model = json.load(mdl_file)
-                    model['name'] = item.split('.')[0]
+                    model['name'] = get_file_name(item)
                     model['directory'] = mdl_dir
                     self.update_model_data(model)
                     project['models'].append(model)

From 11e29e7a68d772d5ed85cf425a02c3597b93ad0b Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Mon, 12 Oct 2020 16:45:31 -0400
Subject: [PATCH 23/31] Refactored the run preview function of and ensemble
 simulation workflow to return a plotly figure instead of processed results. 
 Repostioned the close button to be above the preview plot.  Updated the
 default mode modal to use 'Variable' instead of 'Species'.

---
 client/modals.js                       |  8 ++++----
 client/styles/styles.css               |  8 ++++----
 client/templates/pages/modelEditor.pug |  3 ++-
 client/views/model-state-buttons.js    | 28 ++------------------------
 stochss/handlers/util/run_model.py     | 19 ++++++-----------
 5 files changed, 18 insertions(+), 48 deletions(-)

diff --git a/client/modals.js b/client/modals.js
index e638d8a486..c0e140d876 100644
--- a/client/modals.js
+++ b/client/modals.js
@@ -424,8 +424,8 @@ module.exports = {
       return templates.message(modalID, title, message)
     },
     renderDefaultModeModalHtml : () => {
-        let concentrationDesciption = `Species will only be represented using continuous (floating point) values.`;
-        let populationDescription = `Population - Species will only be represented using discrete (integer count) values.`;
+        let concentrationDesciption = `Variables will only be represented using continuous (floating point) values.`;
+        let populationDescription = `Population - Variables will only be represented using discrete (integer count) values.`;
         let hybridDescription = `Allows a species to be represented using continuous and/or discrete values.`;
 
         return `
@@ -433,7 +433,7 @@ module.exports = {
               <div class="modal-dialog" role="document">
                 <div class="modal-content info">
                   <div class="modal-header">
-                    <h5 class="modal-title">Default Species Mode (required)</h5>
+                    <h5 class="modal-title">Default Variables Mode (required)</h5>
                     <button type="button" class="close close-modal" data-dismiss="modal" aria-label="Close">
                       <span aria-hidden="true">&times;</span>
                     </button>
@@ -442,7 +442,7 @@ module.exports = {
                     <div>
                       <p>
                         The default mode is used to set the mode of all species added to the model.  
-                        The mode of a species is used to determine how it will be represented in a Hybrid simulation.
+                        The mode of a species is used to determine how it will be represented in a Hybrid Concentration/Population simulation.
                       </p>
                       <p>Select one of the following: </p>
                     </div>
diff --git a/client/styles/styles.css b/client/styles/styles.css
index b7d957328a..a0694a1a69 100644
--- a/client/styles/styles.css
+++ b/client/styles/styles.css
@@ -570,7 +570,7 @@ span.checkbox {
 .preview-nav {
   position: fixed;
   width: 70%;
-  min-width: 585px;
+  min-width: 600px;
   left: 0;
   right: 0;
   margin-left: auto;
@@ -583,8 +583,8 @@ span.checkbox {
 }
 
 .preview-close {
-  position: absolute;
+  position: relative;
   display: none;
-  right: 5px;
-  bottom: 8px;
+  float: right;
+  top: 8px;
 }
diff --git a/client/templates/pages/modelEditor.pug b/client/templates/pages/modelEditor.pug
index 43acb7bb3f..3d13d85493 100644
--- a/client/templates/pages/modelEditor.pug
+++ b/client/templates/pages/modelEditor.pug
@@ -49,7 +49,8 @@ section.page
 
   div(class="preview-nav")
 
-    button.btn.btn-outline-secondary.box-shadow.preview-close(data-hook="toggle-preview-plot") Close
+    div(data-hook="toggle-preview-plot-container")
+      button.btn.btn-outline-secondary.box-shadow.preview-close(data-hook="toggle-preview-plot") Close
 
     div(data-hook="model-run-container")
 
diff --git a/client/views/model-state-buttons.js b/client/views/model-state-buttons.js
index 262a2c2e41..35ab348036 100644
--- a/client/views/model-state-buttons.js
+++ b/client/views/model-state-buttons.js
@@ -180,32 +180,8 @@ module.exports = View.extend({
     var title = this.model.name + " Model Preview"
     this.ran(true)
     el = this.parent.queryByHook('model-run-container');
-    time = data.time
-    y_labels = Object.keys(data).filter(function (key) {
-      return key !== 'data' && key !== 'time'
-    });
-    traces = y_labels.map(function (specie) {
-      return {
-        x: time,
-        y: data[specie],
-        mode: 'lines',
-        name: specie
-      }
-    });
-    layout = { 
-      showlegend: true,
-      legend: {
-        x: 1,
-        y: 0.9
-      },
-      margin: { 
-        t: 0 
-      } 
-    }
-    config = {
-      responsive: true,
-    }
-    Plotly.newPlot(el, traces, layout, config);
+    Plotly.newPlot(el, data);
+    $(this.parent.queryByHook('toggle-preview-plot-container')).css('height', '50px')
     $(this.parent.queryByHook('toggle-preview-plot')).css('display', 'block')
     window.scrollTo(0, document.body.scrollHeight)
   },
diff --git a/stochss/handlers/util/run_model.py b/stochss/handlers/util/run_model.py
index bdc2994b35..057ccc8b34 100755
--- a/stochss/handlers/util/run_model.py
+++ b/stochss/handlers/util/run_model.py
@@ -105,18 +105,11 @@ def run_preview(self, gillespy2_model, stochss_model):
         with open("/stochss/stochss_templates/workflowSettingsTemplate.json", "r") as template_file:
             sim_settings = json.load(template_file)['simulationSettings']
 
-        _results = run_solver(gillespy2_model, sim_settings, 5)
-        results = _results[0]
-        res_dict = dict(results)
-        for k, v in res_dict.items():
-            res_dict[k] = list(v)
-        results = res_dict
-        for key in results.keys():
-            if not isinstance(results[key], list):
-                # Assume it's an ndarray, use tolist()
-                results[key] = results[key].tolist()
-        results['data'] = stochss_model
-        return results
+        results = run_solver(gillespy2_model, sim_settings, 5)
+        plot = results.plotplotly(return_plotly_figure=True)
+        plot["layout"]["autosize"] = True
+        plot["config"] = {"responsive": True,}
+        return plot
 
 
     def run(self, gillespy2_model, verbose):
@@ -712,7 +705,7 @@ def get_parsed_args():
         except SimulationError as error:
             resp['errors'] = "{0}".format(error)
         with open(outfile, "w") as fd:
-            json.dump(resp, fd)
+            json.dump(resp, fd, cls=plotly.utils.PlotlyJSONEncoder)
         open(outfile + ".done", "w").close()
     else:
         if os.path.exists(outfile + ".done"):

From c3470b9edb8cd1056ea88f3af5df59c1f8270cef Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Mon, 12 Oct 2020 18:47:48 -0400
Subject: [PATCH 24/31] Tweaked the position of the model editor nav/preview
 section.

---
 client/styles/styles.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/styles/styles.css b/client/styles/styles.css
index a0694a1a69..020634e18f 100644
--- a/client/styles/styles.css
+++ b/client/styles/styles.css
@@ -570,12 +570,11 @@ span.checkbox {
 .preview-nav {
   position: fixed;
   width: 70%;
-  min-width: 600px;
+  min-width: 470px;
   left: 0;
   right: 0;
-  margin-left: auto;
-  margin-right: auto;
-  bottom: 10px;
+  transform: translateX(33.5%);
+  bottom: 0px;
   background-color: rgb(248, 249, 250);
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   border: .5px solid rgb(228, 229, 230) !important;

From 78c94a0e939021dd7ed1fd5012ed294c738bbf01 Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Tue, 13 Oct 2020 11:06:35 -0400
Subject: [PATCH 25/31] Refactored the existing get function for the add
 existing model/workflow to project handler to be post requests. Added new get
 request function that get a list of viable paths that can be added to the
 project. Refactored the add existing model function to call the get request
 prior to launching the modal. Refactored the model to be a select modal and
 to receive the list of models instead of using an input modal.

---
 client/modals.js                              | 11 ++--
 client/pages/file-browser.js                  | 33 ++++-------
 client/pages/project-manager.js               | 31 +++-------
 .../templates/includes/editWorkflowsView.pug  |  4 +-
 client/views/edit-workflows-view.js           |  4 +-
 client/views/file-browser-view.js             | 35 ++++-------
 stochss/handlers/project.py                   | 59 ++++++++++++++++++-
 7 files changed, 98 insertions(+), 79 deletions(-)

diff --git a/client/modals.js b/client/modals.js
index c0e140d876..3499e0147a 100644
--- a/client/modals.js
+++ b/client/modals.js
@@ -236,14 +236,17 @@ module.exports = {
 
       return templates.input(modalID, inputID, title, label, value)
     },
-    newProjectModelHtml : () => {
+    newProjectModelHtml : (options) => {
       let modalID = "newProjectModelModal"
-      let inputID = "modelPathInput"
+      let selectID = "modelPathInput"
       let title = "Add Existing Model to Project"
       let label = "Path to the Model"
-      let value = ""
+      options = options.map(function (name) {
+        return `<option value="${name}">${name}</option>`
+      })
+      options = options.join(" ")
 
-      return templates.input(modalID, inputID, title, label, value)
+      return templates.select(modalID, selectID, title, label, options)
     },
     addExistingWorkflowToProjectHtml : () => {
       let modalID = "newProjectWorkflowModal"
diff --git a/client/pages/file-browser.js b/client/pages/file-browser.js
index 3c4aa50d6d..45e5752bff 100644
--- a/client/pages/file-browser.js
+++ b/client/pages/file-browser.js
@@ -679,28 +679,15 @@ let FileBrowser = PageView.extend({
     if(document.querySelector('#newProjectModelModal')){
       document.querySelector('#newProjectModelModal').remove()
     }
-    let modal = $(modals.newProjectModelHtml()).modal()
-    let okBtn = document.querySelector('#newProjectModelModal .ok-model-btn')
-    let input = document.querySelector('#newProjectModelModal #modelPathInput')
-    input.addEventListener("keyup", function (event) {
-      if(event.keyCode === 13){
-        event.preventDefault();
-        okBtn.click();
-      }
-    });
-    input.addEventListener("input", function (e) {
-      var endErrMsg = document.querySelector('#newProjectModelModal #modelPathInputEndCharError')
-      var charErrMsg = document.querySelector('#newProjectModelModal #modelPathInputSpecCharError')
-      let error = self.validateName(input.value)
-      okBtn.disabled = error !== ""
-      charErrMsg.style.display = error === "both" || error === "special" ? "block" : "none"
-      endErrMsg.style.display = error === "both" || error === "forward" ? "block" : "none"
-    });
-    okBtn.addEventListener("click", function (e) {
-      if(Boolean(input.value)) {
-        let queryString = "?path="+o.original._path+"&mdlPath="+input.value.trim()
+    let mdlListEP = path.join(app.getApiPath(), 'project/add-existing-model') + "?path="+o.original._path
+    xhr({uri:mdlListEP, json:true}, function (err, response, body) {
+      let modal = $(modals.newProjectModelHtml(body.models)).modal()
+      let okBtn = document.querySelector('#newProjectModelModal .ok-model-btn')
+      let select = document.querySelector('#newProjectModelModal #modelPathInput')
+      okBtn.addEventListener("click", function (e) {
+        let queryString = "?path="+o.original._path+"&mdlPath="+select.value
         let endpoint = path.join(app.getApiPath(), 'project/add-existing-model') + queryString
-        xhr({uri:endpoint, json:true}, function (err, response, body) {
+        xhr({uri:endpoint, json:true, method:"post"}, function (err, response, body) {
           if(response.statusCode < 400) {
             let successModal = $(modals.newProjectModelSuccessHtml(body.message)).modal()
           }else{
@@ -708,8 +695,8 @@ let FileBrowser = PageView.extend({
           }
         });
         modal.modal('hide')
-      }
-    });
+      });
+    })
   },
   newModelOrDirectory: function (o, isModel, isSpatial) {
     var self = this
diff --git a/client/pages/project-manager.js b/client/pages/project-manager.js
index cdff7f2f21..efa1a267f3 100644
--- a/client/pages/project-manager.js
+++ b/client/pages/project-manager.js
@@ -369,28 +369,15 @@ let ProjectManager = PageView.extend({
     if(document.querySelector('#newProjectModelModal')){
       document.querySelector('#newProjectModelModal').remove()
     }
-    let modal = $(modals.newProjectModelHtml()).modal()
-    let okBtn = document.querySelector('#newProjectModelModal .ok-model-btn')
-    let input = document.querySelector('#newProjectModelModal #modelPathInput')
-    input.addEventListener("keyup", function (event) {
-      if(event.keyCode === 13){
-        event.preventDefault();
-        okBtn.click();
-      }
-    });
-    input.addEventListener("input", function (e) {
-      var endErrMsg = document.querySelector('#newProjectModelModal #modelPathInputEndCharError')
-      var charErrMsg = document.querySelector('#newProjectModelModal #modelPathInputSpecCharError')
-      let error = self.validateName(input.value)
-      okBtn.disabled = error !== ""
-      charErrMsg.style.display = error === "both" || error === "special" ? "block" : "none"
-      endErrMsg.style.display = error === "both" || error === "forward" ? "block" : "none"
-    });
-    okBtn.addEventListener("click", function (e) {
-      if(Boolean(input.value)) {
-        let queryString = "?path="+self.projectPath+"&mdlPath="+input.value
+    let mdlListEP = path.join(app.getApiPath(), 'project/add-existing-model') + "?path="+self.projectPath
+    xhr({uri:mdlListEP, json:true}, function (err, response, body) {
+      let modal = $(modals.newProjectModelHtml(body.models)).modal()
+      let okBtn = document.querySelector('#newProjectModelModal .ok-model-btn')
+      let select = document.querySelector('#newProjectModelModal #modelPathInput')
+      okBtn.addEventListener("click", function (e) {
+        let queryString = "?path="+self.projectPath+"&mdlPath="+select.value
         let endpoint = path.join(app.getApiPath(), 'project/add-existing-model') + queryString
-        xhr({uri:endpoint, json:true}, function (err, response, body) {
+        xhr({uri:endpoint, json:true, method:"post"}, function (err, response, body) {
           if(response.statusCode < 400) {
             let successModal = $(modals.newProjectModelSuccessHtml(body.message)).modal()
           }else{
@@ -399,7 +386,7 @@ let ProjectManager = PageView.extend({
         });
         modal.modal('hide')
         self.update("existing-model")
-      }
+      });
     });
   },
   exportAsCombine: function(target, download) {
diff --git a/client/templates/includes/editWorkflowsView.pug b/client/templates/includes/editWorkflowsView.pug
index a7cd96aa58..1f39e028f4 100644
--- a/client/templates/includes/editWorkflowsView.pug
+++ b/client/templates/includes/editWorkflowsView.pug
@@ -17,7 +17,7 @@ div#edit-project-workflows
 
     ul.dropdown-menu(aria-labelledby="add-workflow-btn")
       li.dropdown-item(id="project-workflow-group-new-workflow" data-hook="project-workflow-group-new-workflow") New Workflow
-      li.dropdown-divider
-      li.dropdown-item(id="project-workflow-group-add-workflow" data-hook="project-workflow-group-add-workflow") Existing Workflow
+      li.dropdown-divider(style="display: none;")
+      li.dropdown-item(id="project-workflow-group-add-workflow" data-hook="project-workflow-group-add-workflow" style="display: none;") Existing Workflow
           
     
\ No newline at end of file
diff --git a/client/views/edit-workflows-view.js b/client/views/edit-workflows-view.js
index c28d9038f1..7c41325397 100644
--- a/client/views/edit-workflows-view.js
+++ b/client/views/edit-workflows-view.js
@@ -32,7 +32,7 @@ module.exports = View.extend({
   template: template,
   events: {
     'click [data-hook=project-workflow-group-new-workflow]' : 'handleNewWorkflowClick',
-    'click [data-hook=project-workflow-group-add-workflow]' : 'handleAddWorkflowClick',
+    // 'click [data-hook=project-workflow-group-add-workflow]' : 'handleAddWorkflowClick',
   },
   initialize: function (attrs, options) {
     View.prototype.initialize.apply(this, arguments)
@@ -119,7 +119,7 @@ module.exports = View.extend({
         let expPath = path.join(self.parent.parent.projectPath, self.model.name)+".wkgp"
         let queryString = "?path="+expPath+"&wkflPath="+input.value
         let endpoint = path.join(app.getApiPath(), "project/add-existing-workflow")+queryString
-        xhr({uri: endpoint, json: true}, function (err, response, body) {
+        xhr({uri: endpoint, json: true, method: "post"}, function (err, response, body) {
           if(response.statusCode < 400) {
             self.parent.parent.update("workflow-group-editor")
             let successModal = $(modals.addExistingWorkflowToProjectSuccessHtml(body.message)).modal()
diff --git a/client/views/file-browser-view.js b/client/views/file-browser-view.js
index eb55fa789b..668c5c74e1 100644
--- a/client/views/file-browser-view.js
+++ b/client/views/file-browser-view.js
@@ -705,28 +705,15 @@ module.exports = View.extend({
     if(document.querySelector('#newProjectModelModal')){
       document.querySelector('#newProjectModelModal').remove()
     }
-    let modal = $(modals.newProjectModelHtml()).modal()
-    let okBtn = document.querySelector('#newProjectModelModal .ok-model-btn')
-    let input = document.querySelector('#newProjectModelModal #modelPathInput')
-    input.addEventListener("keyup", function (event) {
-      if(event.keyCode === 13){
-        event.preventDefault();
-        okBtn.click();
-      }
-    });
-    input.addEventListener("input", function (e) {
-      var endErrMsg = document.querySelector('#newProjectModelModal #modelPathInputEndCharError')
-      var charErrMsg = document.querySelector('#newProjectModelModal #modelPathInputSpecCharError')
-      let error = self.validateName(input.value)
-      okBtn.disabled = error !== "" || input.value.trim() === ""
-      charErrMsg.style.display = error === "both" || error === "special" ? "block" : "none"
-      endErrMsg.style.display = error === "both" || error === "forward" ? "block" : "none"
-    });
-    okBtn.addEventListener("click", function (e) {
-      if(Boolean(input.value)) {
-        let queryString = "?path="+self.parent.projectPath+"&mdlPath="+input.value.trim()
+    let mdlListEP = path.join(app.getApiPath(), 'project/add-existing-model') + "?path="+self.parent.projectPath
+    xhr({uri:mdlListEP, json:true}, function (err, response, body) {
+      let modal = $(modals.newProjectModelHtml(body.models)).modal()
+      let okBtn = document.querySelector('#newProjectModelModal .ok-model-btn')
+      let select = document.querySelector('#newProjectModelModal #modelPathInput')
+      okBtn.addEventListener("click", function (e) {
+        let queryString = "?path="+self.parent.projectPath+"&mdlPath="+select.value
         let endpoint = path.join(app.getApiPath(), 'project/add-existing-model') + queryString
-        xhr({uri:endpoint, json:true}, function (err, response, body) {
+        xhr({uri:endpoint, json:true, method:"post"}, function (err, response, body) {
           if(response.statusCode < 400) {
             self.updateParent("nonspatial")
             let successModal = $(modals.newProjectModelSuccessHtml(body.message)).modal()
@@ -736,7 +723,7 @@ module.exports = View.extend({
           }
         });
         modal.modal('hide')
-      }
+      });
     });
   },
   addNewWorkflow: function (o) {
@@ -800,7 +787,7 @@ module.exports = View.extend({
       if(Boolean(input.value)) {
         let queryString = "?path="+o.original._path+"&wkflPath="+input.value.trim()
         let endpoint = path.join(app.getApiPath(), "project/add-existing-workflow")+queryString
-        xhr({uri: endpoint, json: true}, function (err, response, body) {
+        xhr({uri: endpoint, json: true, method:"post"}, function (err, response, body) {
           if(response.statusCode < 400) {
             self.updateParent("workflow")
             let successModal = $(modals.addExistingWorkflowToProjectSuccessHtml(body.message)).modal()
@@ -1254,7 +1241,7 @@ module.exports = View.extend({
             "New Workflow" : newWorkflow.NewWorkflow,
             "Existing Workflow" : {
               "label" : "Existing Workflow",
-              "_disabled" : false,
+              "_disabled" : true,
               "separator_before" : false,
               "separator_after" : false,
               "action" : function (data) {
diff --git a/stochss/handlers/project.py b/stochss/handlers/project.py
index 210c346b35..acdb42f013 100644
--- a/stochss/handlers/project.py
+++ b/stochss/handlers/project.py
@@ -328,12 +328,39 @@ def get(self):
 
 class AddExistingModelAPIHandler(APIHandler):
     '''
-    ##############################################################################
+    ################################################################################################
     Handler for adding existing models to a project
-    ##############################################################################
+    ################################################################################################
     '''
     @web.authenticated
     def get(self):
+        '''
+        Get the list of models that can be added to the project
+
+        Attributes
+        ----------
+        '''
+        log.setLevel(logging.DEBUG)
+        user_dir = "/home/jovyan"
+        self.set_header('Content-Type', 'application/json')
+        path = os.path.join(user_dir, self.get_query_argument(name="path"))
+        log.debug("Path to the model: %s", path)
+        models = []
+        for root, dirs, files in os.walk("/home/jovyan"):
+            if root != path and "/." not in root and ".wkfl" not in root:
+                root = root.replace(user_dir+"/", "")
+                files = list(filter(lambda file: (not file.startswith(".") and 
+                                                  file.endswith(".mdl")), files))
+                for file in files:
+                    models.append(os.path.join(root, file))
+        log.debug("List of model that can be added to the project: %s", models)
+        self.write({"models": models})
+        log.setLevel(logging.WARNING)
+        self.finish()
+
+
+    @web.authenticated
+    def post(self):
         '''
         Add the selected model to the project.
 
@@ -385,6 +412,34 @@ class AddExistingWorkflowAPIHandler(APIHandler):
     '''
     @web.authenticated
     def get(self):
+        '''
+        Get the list of models that can be added to the project
+
+        Attributes
+        ----------
+        '''
+        log.setLevel(logging.DEBUG)
+        user_dir = "/home/jovyan"
+        self.set_header('Content-Type', 'application/json')
+        path = os.path.join(user_dir, self.get_query_argument(name="path"))
+        log.debug("Path to the model: %s", path)
+        workflows = []
+        for root, dirs, files in os.walk("/home/jovyan"):
+            if root != path and "/." not in root:
+                root = root.replace(user_dir+"/", "")
+                dirs = list(filter(lambda item: (not item.startswith(".") and 
+                                                 item.endswith(".wkfl")), dirs))
+                for item in dirs:
+                    workflows.append(os.path.join(root, item))
+        log.debug("List of workflows that can be added to the project: \
+                   %s", workflows)
+        self.write({"workflows": workflows})
+        log.setLevel(logging.WARNING)
+        self.finish()
+
+
+    @web.authenticated
+    def post(self):
         '''
         Add the selected workflow to the project.
 

From 78b530dc99263b64dfa4e3ac0079e482e590c1eb Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Tue, 13 Oct 2020 11:29:40 -0400
Subject: [PATCH 26/31] Updated gillespy2 version.

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 977c2fe9cb..6647d47f57 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,7 +1,7 @@
 python-libsbml==5.18.0
 python-libsedml==2.0.9
 python-libcombine==0.2.7
-gillespy2==1.5.5
+gillespy2==1.5.6
 sciope==0.2
 pygmsh==5.0.2
 meshio==2.3.10

From f6a83ed0bb17242b98c3b98811b23ea99f39c6c6 Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Tue, 13 Oct 2020 12:23:56 -0400
Subject: [PATCH 27/31] Tweaked the size and position of the nav/model editor
 buttons.

---
 client/pages/model-editor.js           | 6 +++---
 client/styles/styles.css               | 6 ++----
 client/templates/pages/modelEditor.pug | 6 ++++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/pages/model-editor.js b/client/pages/model-editor.js
index b4c2f9e656..2ab8949d65 100644
--- a/client/pages/model-editor.js
+++ b/client/pages/model-editor.js
@@ -291,7 +291,7 @@ let ModelEditor = PageView.extend({
   togglePreviewPlot: function (e) {
     let action = e.target.innerText
     console.log(action)
-    if(action === "Close") {
+    if(action === "Hide Preview") {
       this.closePlot()
     }else{
       this.openPlot()
@@ -301,13 +301,13 @@ let ModelEditor = PageView.extend({
     let plot = this.queryByHook("model-run-container")
     let button = this.queryByHook("toggle-preview-plot")
     plot.style.display = "none"
-    button.innerText = "Open"
+    button.innerText = "Show Preview"
   },
   openPlot: function () {
     let plot = this.queryByHook("model-run-container")
     let button = this.queryByHook("toggle-preview-plot")
     plot.style.display = "block"
-    button.innerText = "Close"
+    button.innerText = "Hide Preview"
   }
 });
 
diff --git a/client/styles/styles.css b/client/styles/styles.css
index 020634e18f..9a4c35fe58 100644
--- a/client/styles/styles.css
+++ b/client/styles/styles.css
@@ -569,12 +569,10 @@ span.checkbox {
 
 .preview-nav {
   position: fixed;
-  width: 70%;
-  min-width: 470px;
+  width: 100%;
   left: 0;
   right: 0;
-  transform: translateX(33.5%);
-  bottom: 0px;
+  bottom: 0;
   background-color: rgb(248, 249, 250);
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   border: .5px solid rgb(228, 229, 230) !important;
diff --git a/client/templates/pages/modelEditor.pug b/client/templates/pages/modelEditor.pug
index 3d13d85493..4494d10d0e 100644
--- a/client/templates/pages/modelEditor.pug
+++ b/client/templates/pages/modelEditor.pug
@@ -47,10 +47,12 @@ section.page
 
   div(data-hook="model-settings-container")
 
+  div(style="height:425px;")
+
   div(class="preview-nav")
 
     div(data-hook="toggle-preview-plot-container")
-      button.btn.btn-outline-secondary.box-shadow.preview-close(data-hook="toggle-preview-plot") Close
+      button.btn.btn-outline-secondary.box-shadow.preview-close(data-hook="toggle-preview-plot") Hide Preview
 
     div(data-hook="model-run-container")
 
@@ -64,5 +66,5 @@ section.page
 
       p.text-danger(data-hook="model-run-error-message")
 
-    div(data-hook="model-state-buttons-container")
+    div(data-hook="model-state-buttons-container" style="float: right;")
 

From 32e3a2bf6d4bbf864fb0ce3c6b4287a3587185be Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Tue, 13 Oct 2020 13:01:41 -0400
Subject: [PATCH 28/31] Moved the save button to the right of the save message.
  Added a timeout to hide the save message.

---
 client/styles/styles.css                        | 4 ++++
 client/templates/includes/modelStateButtons.pug | 4 ++--
 client/templates/pages/modelEditor.pug          | 2 +-
 client/views/model-state-buttons.js             | 3 +++
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/styles/styles.css b/client/styles/styles.css
index 9a4c35fe58..dbb5f397a3 100644
--- a/client/styles/styles.css
+++ b/client/styles/styles.css
@@ -585,3 +585,7 @@ span.checkbox {
   float: right;
   top: 8px;
 }
+
+.model-state-buttons {
+  float: right;
+}
diff --git a/client/templates/includes/modelStateButtons.pug b/client/templates/includes/modelStateButtons.pug
index f3d5c9ebc7..33f8d2fc80 100644
--- a/client/templates/includes/modelStateButtons.pug
+++ b/client/templates/includes/modelStateButtons.pug
@@ -1,7 +1,5 @@
 div.mdl-edit-btn
   
-  button.btn.btn-primary.box-shadow(data-hook="save") Save
-
   div.mdl-edit-btn.saving-status(data-hook="saving-mdl")
 
     div.spinner-grow
@@ -12,6 +10,8 @@ div.mdl-edit-btn
 
     span Saved
   
+  button.btn.btn-primary.box-shadow(data-hook="save") Save
+
   button.btn.btn-primary.box-shadow(data-hook="run") Run Preview
 
   button.btn.btn-primary.box-shadow(data-hook="new-workflow") New Workflow Using Model
diff --git a/client/templates/pages/modelEditor.pug b/client/templates/pages/modelEditor.pug
index 4494d10d0e..481ad5509e 100644
--- a/client/templates/pages/modelEditor.pug
+++ b/client/templates/pages/modelEditor.pug
@@ -66,5 +66,5 @@ section.page
 
       p.text-danger(data-hook="model-run-error-message")
 
-    div(data-hook="model-state-buttons-container" style="float: right;")
+    div.model-state-buttons(data-hook="model-state-buttons-container")
 
diff --git a/client/views/model-state-buttons.js b/client/views/model-state-buttons.js
index 35ab348036..5f886c2b6b 100644
--- a/client/views/model-state-buttons.js
+++ b/client/views/model-state-buttons.js
@@ -115,6 +115,9 @@ module.exports = View.extend({
     var saved = this.queryByHook('saved-mdl');
     saving.style.display = "none";
     saved.style.display = "inline-block";
+    setTimeout(function () {
+      saved.style.display = "none";
+    }, 5000);
   },
   runModel: function () {
     this.saved();

From 82cb243f20af3bf98d74273b98c08cf34acf4aab Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Tue, 13 Oct 2020 13:15:16 -0400
Subject: [PATCH 29/31] Changed 'emptyset' to 'empty set'.

---
 client/templates/includes/reactionsEditor.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/templates/includes/reactionsEditor.pug b/client/templates/includes/reactionsEditor.pug
index 8c2a25314b..535637392e 100644
--- a/client/templates/includes/reactionsEditor.pug
+++ b/client/templates/includes/reactionsEditor.pug
@@ -11,7 +11,7 @@ div#reactions-editor.card.card-body
   div.collapse(id="collapse-reaction" data-hook="reactions-list-container")
 
     p
-      | A process that transforms a set of <i>Variable</i>s (reactants) into a set of <i>Variable</i>s (products) at a rate set by a <i>Parameter</i>. Select from the given reaction templates, or use the custom types. The symbol <span data-hook="emptyset"></span> represents null or emptyset. 
+      | A process that transforms a set of <i>Variable</i>s (reactants) into a set of <i>Variable</i>s (products) at a rate set by a <i>Parameter</i>. Select from the given reaction templates, or use the custom types. The symbol <span data-hook="emptyset"></span> represents null or empty set. 
 
     div.row
       div.col-md-7.container-part: table.table

From c45930d054264b99f966c3d19761aef8b14f7fcb Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Tue, 13 Oct 2020 13:28:05 -0400
Subject: [PATCH 30/31] Tweaked the css for reaction description.

---
 client/styles/styles.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/client/styles/styles.css b/client/styles/styles.css
index dbb5f397a3..4e4c0d3505 100644
--- a/client/styles/styles.css
+++ b/client/styles/styles.css
@@ -557,11 +557,9 @@ span.checkbox {
 .dropdown-item:hover .reaction-lb2 {
   position: absolute;
   left: 195px;
-  min-width: 150px;
-  max-width: 250px;
-  min-height: 32px;
   display: inline-block;
-  background-color: rgb(248, 249, 250);
+  background-color: black;
+  color: white;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   border: .5px solid rgb(228, 229, 230) !important;
   padding: 0px 5px;

From a15001a65d2adb2bc3e978ee6e1d5a0b7c4f522c Mon Sep 17 00:00:00 2001
From: Bryan Rumsey <bmrumsey@gmail.com>
Date: Tue, 13 Oct 2020 13:32:16 -0400
Subject: [PATCH 31/31] Moved the tooltip for model settings to a section
 descriptions.

---
 client/templates/includes/modelSettings.pug | 4 ++--
 client/tooltips.js                          | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/client/templates/includes/modelSettings.pug b/client/templates/includes/modelSettings.pug
index 5c731e94b1..3ae8a573a2 100644
--- a/client/templates/includes/modelSettings.pug
+++ b/client/templates/includes/modelSettings.pug
@@ -4,12 +4,12 @@ div#preview-settings.card.card-body
 
     h3.inline Model Settings
 
-    div.tooltip-icon(data-html="true" data-toggle="tooltip" title=this.tooltips.previewSettings) <sup><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info" class="svg-inline--fa fa-info fa-w-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M20 424.229h20V279.771H20c-11.046 0-20-8.954-20-20V212c0-11.046 8.954-20 20-20h112c11.046 0 20 8.954 20 20v212.229h20c11.046 0 20 8.954 20 20V492c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20v-47.771c0-11.046 8.954-20 20-20zM96 0C56.235 0 24 32.235 24 72s32.235 72 72 72 72-32.235 72-72S135.764 0 96 0z"></path></svg></sup>
-
     button.btn.btn-outline-collapse(data-toggle="collapse", data-target="#collapse-preview-settings", data-hook="collapse") -
 
   div.collapse(class="show", id="collapse-preview-settings")
 
+    p Model settings are used for the preview and all workflows created using this model.
+
     table.table
 
       thead
diff --git a/client/tooltips.js b/client/tooltips.js
index a6f863b545..c86a02e088 100644
--- a/client/tooltips.js
+++ b/client/tooltips.js
@@ -107,8 +107,6 @@ module.exports = {
     annotation: "An optional note about the SBML Component."
   },
   modelSettings: {
-    previewSettings: "Model Settings are used for the preview and all workflows created using this model.",
-    
     previewTime: "End time of simulation.",
     
     timeUnits: "Save point increment for recording data.",