@abi-software/simulationvuer 2.0.6 → 2.0.8

package/src/components/SimulationVuer.vue

@@ -33,7 +33,7 @@
         <p class="default note" v-if="uuid">Additional parameters are available on oSPARC</p>
       </div>
       <div class="main-right" ref="output" v-show="isSimulationValid">
-        <PlotVuer v-for="(outputPlot, index) in simulationUiInfo.output.plots"
+        <PlotVuer v-for="(_outputPlot, index) in simulationUiInfo.output.plots"
           :key="`output-${index}`"
           :metadata="plotMetadata(index)"
           :data-source="{data: simulationResults[index]}"
@@ -82,7 +82,7 @@ export default {
   },
   props: {
     /**
-     * The the URL to the API location.
+     * The URL to the API location.
      */
     apiLocation: {
       required: true,
@@ -93,7 +93,16 @@ export default {
      * to a PMR file, if it is a string.
      */
     id: {
-      required: true,
+      required: false,
+      default: 0,
+    },
+    /**
+     * A COMBINE archive that was passed directly.
+     */
+    combineArchive: {
+      required: false,
+      type: Uint8Array,
+      default: undefined,
     },
   },
   data: function() {
@@ -145,7 +154,7 @@ export default {
   },
   methods: {
     /**
-     * @vuese
+     * @public
      * Generate the metadata associated with the plot which `index` is given.
      * @arg `index`
      */
@@ -160,30 +169,7 @@ export default {
       };
     },
     /**
-     * @vuese
-     * Download the PMR file associated with the given `url`.
-     * @arg `url`
-     */
-    downloadPmrFile(url) {
-      return new Promise((resolve, reject) => {
-        const xmlhttp = new XMLHttpRequest();
-
-        xmlhttp.open("POST", this.apiLocation + "/pmr_file");
-        xmlhttp.setRequestHeader("Content-type", "application/json");
-        xmlhttp.onreadystatechange = () => {
-          if (xmlhttp.readyState === 4) {
-            if (xmlhttp.status === 200) {
-              resolve(Uint8Array.from(atob(xmlhttp.response), (c) => c.charCodeAt(0)));
-            }
-
-            reject();
-          }
-        };
-        xmlhttp.send(JSON.stringify({path: url.replace(PMR_URL, "")}));
-      });
-    },
-    /**
-     * @vuese
+     * @public
      * Manage the file associated with the given `url` and `fileContents`.
      * @arg `url`
      * @arg `fileContents`
@@ -207,7 +193,7 @@ export default {
       return file;
     },
     /**
-     * @vuese
+     * @public
      * Run a PMR-based COMBINE archive using libOpenCOR.
      */
     runSimulation() {
@@ -267,7 +253,7 @@ export default {
       this.showUserMessage = false;
     },
     /**
-     * @vuese
+     * @public
      * Build the simulation UI using `simulationUiInfo`, a JSON object that describes the contents of the simulation UI.
      * @arg `simulationUiInfo`
      */
@@ -303,7 +289,8 @@ export default {
         this.opencorBasedSimulation = this.solver.name === OPENCOR_SOLVER_NAME;
       }
 
-      // Run the model if we are dealing with a PMR-based COMBINE archive.
+      // Run the model if we are dealing with a PMR-based COMBINE archive or a
+      // COMBINE archive that was passed directly.
 
       if (this.libopencor !== undefined) {
         this.userMessage = "Running the model...";
@@ -371,7 +358,7 @@ export default {
       });
     },
     /**
-     * @vuese
+     * @public
      * Run the simulation-based dataset directly on oSPARC. Not all simulation-based datasets can be run directly on
      * oSPARC, but for those that can the simulation UI shows a `Run on oSPARC` button which, when clicked, calls this
      * method.
@@ -380,7 +367,7 @@ export default {
       window.open(`https://osparc.io/study/${this.uuid}`, "_blank");
     },
     /**
-     * @vuese
+     * @public
      * View the simulation-based dataset on the SPARC portal. The simulation UI has a `View Dataset` button which, when
      * clicked, calls this method.
      */
@@ -388,7 +375,7 @@ export default {
       window.open(`https://sparc.science/datasets/${this.id}?type=dataset`, "_blank");
     },
     /**
-     * @vuese
+     * @public
      * View the simulation-based dataset on PMR. The simulation UI has a `View Workspace` button which, when clicked,
      * calls this method.
      */
@@ -398,7 +385,7 @@ export default {
       window.open(url.substring(0, url.lastIndexOf("/")), "_blank");
     },
     /**
-     * @vuese
+     * @public
      * Data needed to set a model's parameters.
      */
     parametersData() {
@@ -411,7 +398,7 @@ export default {
       return res;
     },
     /**
-     * @vuese
+     * @public
      * Data needed to specify the model output.
      */
      outputData() {
@@ -428,7 +415,7 @@ export default {
       return this.output;
     },
     /**
-     * @vuese
+     * @public
      * Create the `request` that is going to be used by `startSimulation` to ask oSPARC to start the simulation.
      */
     retrieveRequest() {
@@ -466,7 +453,7 @@ export default {
       return request;
     },
     /**
-     * @vuese
+     * @public
      * Process the simulation results retrieved by `checkSimulation`. The simulation results are post-processed, if
      * needed, and then readied for use by `PlotVuer`.
      * @arg `results`
@@ -521,7 +508,7 @@ export default {
       });
     },
     /**
-     * @vuese
+     * @public
      * Show an HTTP issue using the given `xmlhttp`.
      * @arg `xmlhttp`
      */
@@ -531,7 +518,7 @@ export default {
       this.errorMessage = xmlhttp.statusText.toLowerCase() + " (<a href='https://httpstatuses.com/" + xmlhttp.status + "/' target='_blank'>" + xmlhttp.status + "</a>)";
     },
     /**
-     * @vuese
+     * @public
      * Check the progress of the simulation using the given `data`, a JSON object that contains the simulation job ID,
      * as well as the solver name and version. This method is first called by `startSimulation` and then every second by
      * itself until the simulation is finished.
@@ -580,7 +567,7 @@ export default {
       xmlhttp.send(JSON.stringify(data));
     },
     /**
-     * @vuese
+     * @public
      * Start the simulation associated with the simulation-based dataset. The simulation UI has a `Run Simulation`
      * button which, when clicked, calls this method.
      */
@@ -650,8 +637,8 @@ export default {
       this.userMessage = "Retrieving COMBINE archive from PMR...";
       this.showUserMessage = true;
 
-      // Retrieve the OMEX file, extract the simulation UI JSON file from it and
-      // then build the simulation UI.
+      // Retrieve the COMBINE archive, extract the simulation UI JSON file from
+      // it and then build the simulation UI.
 
       this.$nextTick(() => {
         const xmlhttp = new XMLHttpRequest();
@@ -685,6 +672,36 @@ export default {
         };
         xmlhttp.send(JSON.stringify({path: this.id}));
       });
+    } else if (this.combineArchive !== undefined) {
+      // Extract the simulation UI JSON file from the COMBINE archive and build
+      // the simulation UI.
+
+      this.userMessage = "Retrieving COMBINE archive...";
+      this.showUserMessage = true;
+
+      this.$nextTick(() => {
+        libOpenCOR().then((libopencor) => {
+          this.libopencor = markRaw(libopencor);
+          this.libopencorSet = true;
+          this.fileManager = markRaw(this.libopencor.FileManager.instance());
+
+          const fileContents = this.combineArchive;
+          const file = this.manageFile(PMR_URL + this.id, fileContents);
+
+          if (file.type().value !== libopencor.File.Type.COMBINE_ARCHIVE.value) {
+            this.showUserMessage = false;
+          } else {
+            const decoder = new TextDecoder();
+            const simulationUiInfo = JSON.parse(decoder.decode(file.childFile("simulation.json").contents()));
+
+            this.showUserMessage = false;
+
+            this.$nextTick(() => {
+              this.buildSimulationUi(simulationUiInfo);
+            });
+          }
+        });
+      });
     }
   },
   mounted: function() {

package/vuese-generator.js

@@ -8,7 +8,7 @@
 import fs from 'fs'
 import path from 'path'
 import chokidar from 'chokidar'
-import { parser } from '@vuese/parser'
+import { parseSource } from 'vue-docgen-api'
 import { Render } from '@vuese/markdown-render'
 
 const watchMode = process.argv.find((argv) => argv === 'watch')
@@ -22,30 +22,91 @@ function generateMarkdown(file) {
   const fileContent = fs.readFileSync(fileWithPath, 'utf-8')
 
   try {
-    const parserResult = parser(fileContent)
-    parserResult.name = 'SimulationVuer' // Because there has another name prop in component
-    const r = new Render(parserResult)
-    const renderResult = r.render()
-    const markdownResult = r.renderMarkdown()
-    const markdownContent = markdownResult.content
-    const componentName = path.basename(fileWithPath, '.vue')
-
-    if (!fs.existsSync(outputDir)) {
-      fs.mkdirSync(outputDir)
-    }
+    // const parserResult = parser(fileContent)
+    const parserResult = parseSource(fileContent, fileWithPath)
+    parserResult.then((result) => {
+      const {
+        displayName: name,
+        description: desc,
+        props,
+        events,
+        methods
+      } = result
+
+      // transform props to vuese styles
+      const parseResult = {
+        name: name,
+        componentDesc: {
+          default: [desc]
+        },
+        props: transformData(props),
+        events: transformData(events),
+        methods: transformData(methods),
+      }
+      parseResult.name = 'SimulationVuer' // Because there has another name prop in component
+      const r = new Render(parseResult)
+      const renderResult = r.render()
+      const markdownResult = r.renderMarkdown()
+      const markdownContent = markdownResult.content
+      const componentName = path.basename(fileWithPath, '.vue')
 
-    fs.writeFile(`${outputDir}/${componentName}.md`, markdownContent, (err) => {
-      if (err) {
-        console.error(`Error writing markdown file for ${componentName}`, err)
-      } else {
-        console.log(`Markdown file for ${componentName} is generated!`)
+      if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir)
       }
+
+      fs.writeFile(`${outputDir}/${componentName}.md`, markdownContent, (err) => {
+        if (err) {
+          console.error(`Error writing markdown file for ${componentName}`, err)
+        } else {
+          console.log(`Markdown file for ${componentName} is generated!`)
+        }
+      })
     })
   } catch(e) {
     console.error(e)
   }
 }
 
+function transformData(data = []) {
+  data.forEach((prop) => {
+    prop.name = prop.name
+
+    if (prop.description) {
+      prop.describe = [prop.description.replaceAll('\n', ' ')]
+    }
+
+    if (prop.type) {
+      prop.type = prop.type.name
+    }
+
+    if (prop.defaultValue) {
+      prop.default = prop.defaultValue.value.replaceAll('\n', ' ')
+    }
+
+    // events
+    if (prop.properties) {
+      prop.argumentsDesc = []
+      prop.properties.forEach((param) => {
+        const argName = param.name || param.description
+        prop.argumentsDesc.push(argName)
+      })
+    }
+
+    // methods
+    if (prop.params) {
+      prop.argumentsDesc = []
+      prop.params.forEach((param) => {
+        const argName = param.description || param.name
+        prop.argumentsDesc.push(argName)
+      })
+    }
+  })
+  if (!data.length) {
+    return null
+  }
+  return data
+}
+
 // To generate markdown files - one time
 components.forEach((component) => {
   console.log(`Write markdown file for ${component} on first load.`)