Merge pull request #1140 from StochSS/develop

Release v2.3.3

client/models/model.js

@@ -91,12 +91,12 @@ module.exports = Model.extend({
     this.rules.on('add change remove', this.updateValid, this);
   },
   validateModel: function () {
-    if(!this.species.validateCollection()) return false;
+    if(!this.species.validateCollection(this.is_spatial)) return false;
     if(!this.parameters.validateCollection()) return false;
     if(!this.reactions.validateCollection()) return false;
     if(!this.eventsCollection.validateCollection()) return false;
     if(!this.rules.validateCollection()) return false;
-    if(this.reactions.length <= 0 && this.eventsCollection.length <= 0 && this.rules.length <= 0) {
+    if(!this.is_spatial && this.reactions.length <= 0 && this.eventsCollection.length <= 0 && this.rules.length <= 0) {
       this.error = {"type":"process"}
       return false;
     }

client/models/species.js

@@ -55,8 +55,8 @@ module.exports = Collection.extend({
     this.remove(specie);
     this.parent.updateValid()
   },
-  validateCollection: function () {
-    if(this.length <= 0) {
+  validateCollection: function (isSpatial) {
+    if(this.length <= 0 && !isSpatial) {
       this.parent.error = {'type':'species'}
       return false;
     }

client/models/timespan-settings.js

@@ -22,7 +22,8 @@ var State = require('ampersand-state');
 module.exports = State.extend({
   props: {
     endSim: 'any',
-    timeStep: 'any'
+    timeStep: 'any',
+    timestepSize: 'number'
   },
   initialize: function (attrs, options) {
     State.prototype.initialize.apply(this, arguments)

client/pages/model-editor.js

@@ -23,23 +23,19 @@ let path = require('path');
 var app = require('../app');
 var modals = require('../modals');
 var tests = require('../views/tests');
+let Tooltips = require("../tooltips");
 //views
 var PageView = require('../pages/base');
 var InputView = require('../views/input');
 var DomainViewer = require('../views/domain-viewer');
 var SpeciesEditorView = require('../views/species-editor');
-var SpeciesViewer = require('../views/species-viewer');
 var InitialConditionsEditorView = require('../views/initial-conditions-editor');
 var InitialConditionsViewer = require('../views/initial-conditions-viewer');
 var ParametersEditorView = require('../views/parameters-editor');
-var ParameterViewer = require('../views/parameters-viewer');
 var ParticleViewer = require('../views/view-particle');
 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 TimespanSettingsView = require('../views/timespan-settings');
 var ModelStateButtonsView = require('../views/model-state-buttons');
@@ -55,9 +51,13 @@ import initPage from './page.js';
 let ModelEditor = PageView.extend({
   template: template,
   events: {
+    'change [data-hook=all-continuous]' : 'setDefaultMode',
+    'change [data-hook=all-discrete]' : 'setDefaultMode',
+    'change [data-hook=advanced]' : 'setDefaultMode',
     'click [data-hook=edit-model-help]' : function () {
       let modal = $(modals.operationInfoModalHtml('model-editor')).modal();
     },
+    'change [data-hook=edit-volume]' : 'updateVolumeViewer',
     'click [data-hook=collapse-me-advanced-section]' : 'changeCollapseButtonText',
     'click [data-hook=project-breadcrumb-link]' : 'handleProjectBreadcrumbClick',
     'click [data-hook=toggle-preview-plot]' : 'togglePreviewPlot',
@@ -67,6 +67,7 @@ let ModelEditor = PageView.extend({
   },
   initialize: function (attrs, options) {
     PageView.prototype.initialize.apply(this, arguments);
+    this.tooltips = Tooltips.modelEditor
     var self = this;
     let urlParams = new URLSearchParams(window.location.search)
     var directory = urlParams.get('path');
@@ -219,6 +220,12 @@ let ModelEditor = PageView.extend({
     }
   },
   renderSubviews: function () {
+    if(this.model.defaultMode === "" && !this.model.is_spatial){
+      this.getInitialDefaultMode();
+    }else{
+      let dataHooks = {'continuous':'all-continuous', 'discrete':'all-discrete', 'dynamic':'advanced'}
+      $(this.queryByHook(dataHooks[this.model.defaultMode])).prop('checked', true)
+    }
     this.modelSettings = new TimespanSettingsView({
       parent: this,
       model: this.model.modelSettings,
@@ -232,6 +239,7 @@ let ModelEditor = PageView.extend({
     app.registerRenderSubview(this, this.modelSettings, 'model-settings-container');
     app.registerRenderSubview(this, this.modelStateButtons, 'model-state-buttons-container');
     if(this.model.is_spatial) {
+      $(this.queryByHook("advaced-model-mode")).css("display", "none");
       $(this.queryByHook("model-editor-advanced-container")).css("display", "none");
       $(this.queryByHook("spatial-beta-message")).css("display", "block");
       this.renderDomainViewer();
@@ -243,8 +251,7 @@ let ModelEditor = PageView.extend({
       this.renderRulesView();
       if(this.model.functionDefinitions.length) {
         var sbmlComponentView = new SBMLComponentView({
-          functionDefinitions: this.model.functionDefinitions,
-          viewModel: false
+          functionDefinitions: this.model.functionDefinitions
         });
         app.registerRenderSubview(this, sbmlComponentView, 'sbml-component-container');
       }
@@ -288,15 +295,15 @@ let ModelEditor = PageView.extend({
       app.registerRenderSubview(this, this.domainViewer, 'domain-viewer-container');
     }
   },
-  renderSpeciesView: function (mode="edit") {
+  renderSpeciesView: function () {
     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.speciesEditor = new SpeciesEditorView({
+      collection: this.model.species,
+      spatial: this.model.is_spatial,
+      defaultMode: this.model.defaultMode
+    });
     app.registerRenderSubview(this, this.speciesEditor, 'species-editor-container');
   },
   renderInitialConditions: function (mode="edit", opened=false) {
@@ -315,48 +322,32 @@ let ModelEditor = PageView.extend({
     }
     app.registerRenderSubview(this, this.initialConditionsEditor, 'initial-conditions-editor-container');
     },
-  renderParametersView: function (mode="edit", opened=false) {
+  renderParametersView: function () {
     if(this.parametersEditor) {
       this.parametersEditor.remove()
     }
-    if(mode === "edit") {
-      this.parametersEditor = new ParametersEditorView({collection: this.model.parameters, opened: opened});
-    }else{
-      this.parametersEditor = new ParameterViewer({collection: this.model.parameters});
-    }
+    this.parametersEditor = new ParametersEditorView({collection: this.model.parameters});
     app.registerRenderSubview(this, this.parametersEditor, 'parameters-editor-container');
   },
-  renderReactionsView: function (mode="edit", opened=false) {
+  renderReactionsView: function () {
     if(this.reactionsEditor) {
       this.reactionsEditor.remove()
     }
-    if(mode === "edit") {
-      this.reactionsEditor = new ReactionsEditorView({collection: this.model.reactions, opened: opened});
-    }else{
-      this.reactionsEditor = new ReactionsViewer({collection: this.model.reactions});
-    }
+    this.reactionsEditor = new ReactionsEditorView({collection: this.model.reactions});
     app.registerRenderSubview(this, this.reactionsEditor, 'reactions-editor-container');
   },
-  renderEventsView: function (mode="edit", opened=false) {
+  renderEventsView: function () {
     if(this.eventsEditor){
       this.eventsEditor.remove();
     }
-    if(mode === "edit") {
-      this.eventsEditor = new EventsEditorView({collection: this.model.eventsCollection, opened: opened});
-    }else{
-      this.eventsEditor = new EventsViewer({collection: this.model.eventsCollection});
-    }
+    this.eventsEditor = new EventsEditorView({collection: this.model.eventsCollection});
     app.registerRenderSubview(this, this.eventsEditor, 'events-editor-container');
   },
-  renderRulesView: function (mode="edit", opened=false) {
+  renderRulesView: function () {
     if(this.rulesEditor){
       this.rulesEditor.remove();
     }
-    if(mode === "edit") {
-      this.rulesEditor = new RulesEditorView({collection: this.model.rules, opened: opened});
-    }else{
-      this.rulesEditor = new RulesViewer({collection: this.model.rules})
-    }
+    this.rulesEditor = new RulesEditorView({collection: this.model.rules});
     app.registerRenderSubview(this, this.rulesEditor, 'rules-editor-container');
   },
   renderSystemVolumeView: function () {
@@ -373,10 +364,11 @@ let ModelEditor = PageView.extend({
       valueType: 'number',
       value: this.model.volume,
     });
-    app.registerRenderSubview(this, this.systemVolumeView, 'volume')
+    app.registerRenderSubview(this, this.systemVolumeView, 'edit-volume')
     if(this.model.defaultMode === "continuous") {
       $(this.queryByHook("system-volume-container")).collapse("hide")
     }
+    $(this.queryByHook("view-volume")).html("Volume:  " + this.model.volume)
   },
   changeCollapseButtonText: function (e) {
     app.changeCollapseButtonText(this, e);
@@ -430,6 +422,66 @@ let ModelEditor = PageView.extend({
   clickDownloadPNGButton: function (e) {
     let pngButton = $('div[data-hook=preview-plot-container] a[data-title*="Download plot as a png"]')[0]
     pngButton.click()
+  },
+  getInitialDefaultMode: function () {
+    var self = this;
+    if(document.querySelector('#defaultModeModal')) {
+      document.querySelector('#defaultModeModal').remove();
+    }
+    let modal = $(modals.renderDefaultModeModalHtml()).modal();
+    let continuous = document.querySelector('#defaultModeModal .concentration-btn');
+    let discrete = document.querySelector('#defaultModeModal .population-btn');
+    let dynamic = document.querySelector('#defaultModeModal .hybrid-btn');
+    continuous.addEventListener('click', function (e) {
+      self.setInitialDefaultMode(modal, "continuous");
+    });
+    discrete.addEventListener('click', function (e) {
+      self.setInitialDefaultMode(modal, "discrete");
+    });
+    dynamic.addEventListener('click', function (e) {
+      self.setInitialDefaultMode(modal, "dynamic");
+    });
+  },
+  setAllSpeciesModes: function (prevMode) {
+    let self = this;
+    this.model.species.forEach(function (specie) { 
+      specie.mode = self.model.defaultMode;
+      self.model.species.trigger('update-species', specie.compID, specie, false, true);
+    });
+    let switchToDynamic = (!Boolean(prevMode) || prevMode !== "dynamic") && this.model.defaultMode === "dynamic";
+    let switchFromDynamic = Boolean(prevMode) && prevMode === "dynamic" && this.model.defaultMode !== "dynamic";
+    if(switchToDynamic || switchFromDynamic) {
+      this.speciesEditor.renderEditSpeciesView();
+      this.speciesEditor.renderViewSpeciesView();
+    }
+  },
+  setDefaultMode: function (e) {
+    let prevMode = this.model.defaultMode;
+    this.model.defaultMode = e.target.dataset.name;
+    this.speciesEditor.defaultMode = e.target.dataset.name;
+    this.setAllSpeciesModes(prevMode);
+    this.toggleVolumeContainer();
+  },
+  setInitialDefaultMode: function (modal, mode) {
+    var dataHooks = {'continuous':'all-continuous', 'discrete':'all-discrete', 'dynamic':'advanced'};
+    modal.modal('hide');
+    $(this.queryByHook(dataHooks[mode])).prop('checked', true);
+    this.model.defaultMode = mode;
+    this.speciesEditor.defaultMode = mode;
+    this.setAllSpeciesModes();
+    this.toggleVolumeContainer();
+  },
+  toggleVolumeContainer: function () {
+    if(!this.model.is_spatial) {
+      if(this.model.defaultMode === "continuous") {
+        $(this.queryByHook("system-volume-container")).collapse("hide");
+      }else{
+        $(this.queryByHook("system-volume-container")).collapse("show");
+      }
+    }
+  },
+  updateVolumeViewer: function (e) {
+    $(this.queryByHook("view-volume")).html("Volume:  " + this.model.volume)
   }
 });
 

client/styles/styles.css

@@ -293,6 +293,11 @@ input[type="file"]::-ms-browse {
   display: inline-block;
 }
 
+.reaction-list-summary {
+  width: auto !important;
+  text-align: center;
+}
+
 .container-part {
   max-width: none;
 }

client/templates/includes/editEventAssignment.pug

@@ -1,7 +1,18 @@
-tr
+div.mx-1
 
-  td: div(data-hook="event-assignment-variable")
+  if(this.model.collection.indexOf(this.model) !== 0)
+    hr
 
-  td: div(data-hook="event-assignment-Expression")
+  div.row
 
-  td: button.btn.btn-outline-secondary(data-hook="remove") X
+    div.col-sm-3
+
+      div.pl-2(data-hook="event-assignment-variable")
+
+    div.col-sm-7
+
+      div(data-hook="event-assignment-expression")
+
+    div.col-sm-2
+
+      button.btn.btn-outline-secondary(data-hook="remove") X

client/templates/includes/editFunctionDefinition.pug

@@ -1,13 +1,20 @@
-tr
+div.mx-1
 
-  td=this.model.signature
+  if(this.model.collection.indexOf(this.model) !== 0)
+    hr
 
-  th
+  div.row
 
-    div.tooltip-icon-large(data-hook="annotation-tooltip" data-html="true" data-toggle="tooltip" title=this.model.annotation || "Click 'Add' to add an annotation") <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="file-alt" class="svg-inline--fa fa-file-alt fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm64 236c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-64c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-72v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm96-114.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"></path></svg>
+    div.col-sm-8
+
+      div.pl-2=this.model.signature
+
+    div.col-sm-2
+
+      div.tooltip-icon-large(data-hook="annotation-tooltip" data-html="true" data-toggle="tooltip" title=this.model.annotation || "Click 'Add' to add an annotation") <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="file-alt" class="svg-inline--fa fa-file-alt fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm64 236c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-64c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-72v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm96-114.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"></path></svg>
 
-    if(!this.parent.viewMode)
       button.btn.btn-outline-secondary.btn-sm(data-hook="edit-annotation-btn") Edit
-
-  if(!this.parent.viewMode)
-    td: button.btn.btn-outline-secondary(data-hook="remove") X
+
+    div.col-sm-2
+
+      button.btn.btn-outline-secondary(data-hook="remove") X

client/templates/includes/editParameter.pug

@@ -0,0 +1,24 @@
+div.mx-1
+
+  if(this.model.collection.indexOf(this.model) !== 0)
+    hr
+
+  div.row
+
+    div.col-sm-3
+
+      div.pl-2(data-hook="input-name-container")
+
+    div.col-sm-5
+
+      div(data-hook="input-value-container")
+
+    div.col-sm-2
+
+      div.tooltip-icon-large(data-hook="annotation-tooltip" data-html="true" data-toggle="tooltip" title=this.model.annotation || "Click 'Add' to add an annotation") <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="file-alt" class="svg-inline--fa fa-file-alt fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm64 236c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-64c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-72v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm96-114.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"></path></svg>
+
+      button.btn.btn-outline-secondary.btn-sm.box-shadow(data-hook="edit-annotation-btn") Edit
+
+    div.col-sm-2
+
+      button.btn.btn-outline-secondary.box-shadow(data-hook="remove") X