Merge pull request #1044 from StochSS/develop

Release 2.1.4

client/modals.js

@@ -248,14 +248,17 @@ module.exports = {
 
       return templates.select(modalID, selectID, title, label, options)
     },
-    addExistingWorkflowToProjectHtml : () => {
+    addExistingWorkflowToProjectHtml : (options) => {
       let modalID = "newProjectWorkflowModal"
-      let inputID = "workflowPathInput"
+      let selectID = "workflowPathInput"
       let title = "Add Existing Workflow to Workflow Group"
       let label = "Path to the workflow"
-      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)
     },
     addExistingWorkflowToProjectSuccessHtml : (message) => {
       let modalID = "newProjectModelSuccessModal"

client/models/events.js

@@ -39,6 +39,7 @@ module.exports = Collection.extend({
       useValuesFromTriggerTime: false,
     });
     event.eventAssignments.addEventAssignment()
+    this.parent.updateValid()
     return event
   },
   getDefaultName: function () {
@@ -53,5 +54,6 @@ module.exports = Collection.extend({
   },
   removeEvent: function (event) {
     this.remove(event);
+    this.parent.updateValid()
   },
 });

client/models/model-settings.js

@@ -22,10 +22,14 @@ var State = require('ampersand-state');
 module.exports = State.extend({
   props: {
     endSim: 'number',
-    timeStep: 'number',
-    volume: 'number'
+    timeStep: 'number'
   },
   initialize: function (attrs, options) {
     State.prototype.initialize.apply(this, arguments)
+  },
+  validate: function () {
+    if(this.endSim == 0 || isNaN(this.endSim)) return false;
+    if(this.timeStep == 0 || isNaN(this.timeStep)) return false;
+    return true;
   }
 });

client/models/model.js

@@ -40,7 +40,8 @@ module.exports = Model.extend({
     is_spatial: 'boolean',
     defaultID: 'number',
     defaultMode: 'string',
-    annotation: 'string'
+    annotation: 'string',
+    volume: 'number'
   },
   collections: {
     species: Species,
@@ -61,10 +62,21 @@ module.exports = Model.extend({
     directory: 'string',
     isPreview: 'boolean',
     for: 'string',
+    valid: 'boolean'
   },
   initialize: function (attrs, options){
     Model.prototype.initialize.apply(this, arguments);
   },
+  validateModel: function () {
+    if(this.volume == 0 || isNaN(this.volume)) return false;
+    if(this.species.length <= 0) return false;
+    if(this.reactions.length <= 0 && this.eventsCollection.length <= 0 && this.rules.length <= 0) return false
+    if(this.modelSettings.validate() === false) return false;
+    return true;
+  },
+  updateValid: function () {
+    this.valid = this.validateModel()
+  },
   getDefaultID: function () {
     var id = this.defaultID;
     this.defaultID += 1;

client/models/reactions.js

@@ -49,6 +49,7 @@ Reactions = Collection.extend({
       reaction.rate = this.getDefaultRate();
     reaction.buildSummary()
     this.add(reaction);
+    this.parent.updateValid()
     return reaction;
   },
   getDefaultName: function () {
@@ -76,6 +77,7 @@ Reactions = Collection.extend({
   },
   removeReaction: function (reaction) {
     this.remove(reaction);
+    this.parent.updateValid()
   },
 });
 

client/models/rules.js

@@ -37,9 +37,11 @@ module.exports = Collection.extend({
     });
     rule.variable = variable;
     this.add(rule);
+    this.parent.updateValid()
   },
   removeRule: function (rule) {
     this.remove(rule);
+    this.parent.updateValid()
   },
   getDefaultName: function () {
     var i = this.length + 1;

client/models/species.js

@@ -39,6 +39,7 @@ module.exports = Collection.extend({
       diffusionCoeff: 0.0,
       subdomains: subdomains
     });
+    this.parent.updateValid()
   },
   getDefaultName: function () {
     var i = this.length + 1;
@@ -52,5 +53,6 @@ module.exports = Collection.extend({
   },
   removeSpecie: function (specie) {
     this.remove(specie);
+    this.parent.updateValid()
   },
 });

client/pages/model-editor.js

@@ -21,9 +21,11 @@ var $ = require('jquery');
 let path = require('path');
 //support files
 var app = require('../app');
-var modals = require('../modals')
+var modals = require('../modals');
+var tests = require('../views/tests');
 //views
 var PageView = require('../pages/base');
+var InputView = require('../views/input');
 var MeshEditorView = require('../views/mesh-editor');
 var SpeciesEditorView = require('../views/species-editor');
 var SpeciesViewer = require('../views/species-viewer');
@@ -54,7 +56,9 @@ let ModelEditor = PageView.extend({
     },
     'click [data-hook=collapse-me-advanced-section]' : 'changeCollapseButtonText',
     'click [data-hook=project-breadcrumb-link]' : 'handleProjectBreadcrumbClick',
-    'click [data-hook=toggle-preview-plot]' : 'togglePreviewPlot'
+    'click [data-hook=toggle-preview-plot]' : 'togglePreviewPlot',
+    'click [data-hook=download-png]' : 'clickDownloadPNGButton',
+    'click [data-hook=collapse-system-volume]' : 'changeCollapseButtonText'
   },
   initialize: function (attrs, options) {
     PageView.prototype.initialize.apply(this, arguments);
@@ -89,6 +93,7 @@ let ModelEditor = PageView.extend({
         if(!self.model.functionDefinitions.length) {
           self.queryByHook('sbml-component-container').style.display = "none";
         }
+        self.model.updateValid()
       }
     });
     this.model.reactions.on("change", function (reactions) {
@@ -207,6 +212,7 @@ let ModelEditor = PageView.extend({
     this.renderReactionsView();
     this.renderEventsView();
     this.renderRulesView();
+    this.renderSystemVolumeView();
     this.registerRenderSubview(sbmlComponentView, 'sbml-component-container');
     this.registerRenderSubview(modelSettings, 'model-settings-container');
     this.registerRenderSubview(this.modelStateButtons, 'model-state-buttons-container');
@@ -279,6 +285,25 @@ let ModelEditor = PageView.extend({
     }
     this.registerRenderSubview(this.rulesEditor, 'rules-editor-container');
   },
+  renderSystemVolumeView: function () {
+    if(this.systemVolumeView) {
+      this.systemVolumeView.remove()
+    }
+    this.systemVolumeView = new InputView ({
+      parent: this,
+      required: true,
+      name: 'system-volume',
+      label: 'Volume: ',
+      tests: tests.valueTests,
+      modelKey: 'volume',
+      valueType: 'number',
+      value: this.model.volume,
+    });
+    this.registerRenderSubview(this.systemVolumeView, 'volume')
+    if(this.model.defaultMode === "continuous") {
+      $(this.queryByHook("system-volume-container")).collapse("hide")
+    }
+  },
   changeCollapseButtonText: function (e) {
     let source = e.target.dataset.hook
     let collapseContainer = $(this.queryByHook(source).dataset.target)
@@ -290,7 +315,6 @@ let ModelEditor = PageView.extend({
   },
   togglePreviewPlot: function (e) {
     let action = e.target.innerText
-    console.log(action)
     if(action === "Hide Preview") {
       this.closePlot()
     }else{
@@ -308,6 +332,10 @@ let ModelEditor = PageView.extend({
     let button = this.queryByHook("toggle-preview-plot")
     plot.style.display = "block"
     button.innerText = "Hide Preview"
+  },
+  clickDownloadPNGButton: function (e) {
+    let pngButton = $('div[data-hook=model-run-container] a[data-title*="Download plot as a png"]')[0]
+    pngButton.click()
   }
 });
 

client/pages/project-manager.js

@@ -278,27 +278,48 @@ let ProjectManager = PageView.extend({
     let okBtn = document.querySelector('#newModalModel .ok-model-btn');
     let input = document.querySelector('#newModalModel #modelNameInput');
     okBtn.addEventListener('click', function (e) {
+      modal.modal('hide')
       if (Boolean(input.value)) {
         let modelName = input.value.split("/").pop() + '.mdl';
         let message = modelName.split(".")[0] !== input.value ? 
               "Warning: Models are saved directly in StochSS Projects and cannot be saved to the "+input.value.split("/")[0]+" directory in the project.<br><p>Your model will be saved directly in your project.</p>" : ""
         let modelPath = path.join(self.projectPath, modelName)
-        let endpoint = path.join(app.getBasePath(), app.routePrefix, 'models/edit')+"?path="+modelPath+"&message="+message
+        let queryString = "?path="+modelPath+"&message="+message
+        let endpoint = path.join(app.getBasePath(), app.routePrefix, 'models/edit')+queryString
+        let existEP = path.join(app.getApiPath(), "model/exists")+queryString
         if(message){
-          modal.modal('hide')
           let warningModal = $(modals.newProjectModelWarningHtml(message)).modal()
           let yesBtn = document.querySelector('#newProjectModelWarningModal .yes-modal-btn');
-          yesBtn.addEventListener('click', function (e) {window.location.href = endpoint;})
+          yesBtn.addEventListener('click', function (e) {
+            warningModal.modal('hide')
+            xhr({uri: existEP, json: true}, function (err, response, body) {
+              if(body.exists) {
+                let title = "Model Already Exists"
+                let message = "A model already exists with that name"
+                let errorModel = $(modals.newProjectOrWorkflowGroupErrorHtml(title, message)).modal()
+              }else{
+                window.location.href = endpoint
+              }
+            })
+          })
         }else{
-          window.location.href = endpoint;
+          xhr({uri: existEP, json: true}, function (err, response, body) {
+            if(body.exists) {
+              let title = "Model Already Exists"
+              let message = "A model already exists with that name"
+              let errorModel = $(modals.newProjectOrWorkflowGroupErrorHtml(title, message)).modal()
+            }else{
+              window.location.href = endpoint
+            }
+          });
         }
       }
     });
     input.addEventListener("input", function (e) {
       var endErrMsg = document.querySelector('#newModalModel #modelNameInputEndCharError')
       var charErrMsg = document.querySelector('#newModalModel #modelNameInputSpecCharError')
       let error = self.validateName(input.value)
-      okBtn.disabled = error !== ""
+      okBtn.disabled = error !== "" || input.value.trim() === ""
       charErrMsg.style.display = error === "both" || error === "special" ? "block" : "none"
       endErrMsg.style.display = error === "both" || error === "forward" ? "block" : "none"
     });

client/styles/styles.css

@@ -16,13 +16,40 @@ img.quickstart {
 .sidebar {
   padding-top: 20px;
   margin-top: 48px;
-  min-height: 8em;
   padding-left: 10px
 }
 
 [role="main"] {
   padding-top: 20px;
-  margin-top: 48px;
+}
+
+@media (min-width: 768px) {
+  [role="main"] {
+    margin-top: 48px;
+  }
+  .sidebar {
+    min-height: 8em;
+  }
+  .sidebar-sticky {
+    position: fixed;
+  }
+  .nav-flex-column {
+    -ms-flex-direction: column !important;
+    flex-direction: column !important;
+  }
+}
+
+@media (min-width: 1450px) {
+  .col-xxl-1 {
+    -ms-flex: 0 0 12.5%;
+    flex: 0 0 12.5%;
+    max-width: 12.5%;
+  }
+  .col-xxl-6 {
+    -ms-flex: 0 0 75%;
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
 }
 
 .inline{
@@ -83,7 +110,7 @@ a.disabled {
 }
 
 .nav-item {
-  display: inline-block;
+  width: fit-content;
 }
 
 .nav-link {
@@ -193,10 +220,6 @@ input[type="file"]::-ms-browse {
   font-size: 16px;
 }
 
-.sidebar-sticky {
-  position: fixed;
-}
-
 .tools {
   min-width: 12em; 
 }
@@ -304,6 +327,14 @@ input[type="file"]::-ms-browse {
   width: 75%;
   min-width: 487.5px;
   max-width: 750px;
+  left: 0;
+  right: 0;
+  margin: 0.5rem auto;
+}
+
+.modal-backdrop {
+  width: 100%;
+  height: 100%;
 }
 
 .modal-content {
@@ -318,8 +349,9 @@ input[type="file"]::-ms-browse {
 .spinner-border {
   display: none;
   position: relative;
-  margin: 15px;
-  left: 40%;
+  margin: 15px auto;
+  left: 0;
+  right: 0;
   width: 90px;
   height: 90px;
   border: 12px solid rgba(0, 0, 0, 0.125);
@@ -444,7 +476,7 @@ span.checkbox {
 .switching {
   vertical-align: middle;
   margin-bottom: 5px;
-  height: 29px;
+  min-height: 29px;
 }
 
 #home-wrapper {
@@ -577,13 +609,21 @@ span.checkbox {
   padding: 0px 5px;
 }
 
-.preview-close {
-  position: relative;
+.preview-buttons {
   display: none;
-  float: right;
-  top: 8px;
+  height: 48px;
 }
 
 .model-state-buttons {
   float: right;
 }
+
+.event-adv-header {
+  border-bottom-color: rgb(222, 226, 230);
+  border-bottom-style: solid;
+  border-left-width: 1px;
+}
+
+#model-run-margin {
+  height: 350px;
+}