@abi-software/simulationvuer 0.4.5 → 0.5.1

package/src/components/SimulationVuerInput.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <p :class="labelClasses">{{ name }}</p>
+    <el-select class="discrete" popper-class="discrete-popper" size="mini" v-if="isDiscrete" v-model="vModel" :disabled="!enabled" :popper-append-to-body="false" @change="updateUi()">
+      <el-option v-for="possibleValue in possibleValues" :key="possibleValue.value" :label="possibleValue.name" :value="possibleValue.value" />
+    </el-select>
+    <div class="sliders-and-fields" v-if="!isDiscrete">
+      <el-slider v-model="vModel" :disabled="!enabled" :max="maximumValue" :min="minimumValue" :show-input="false" :show-tooltip="false" @change="updateUi()" />
+      <el-input-number class="scalar" size="mini" v-model="vModel" :controls="false" :disabled="!enabled" :max="maximumValue" :min="minimumValue" @input="updateUi()" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import { InputNumber, Option, Select, Slider } from "element-ui";
+import { updateUi } from "./ui.js";
+
+Vue.use(InputNumber);
+Vue.use(Option);
+Vue.use(Select);
+Vue.use(Slider);
+
+export default {
+  name: "SimulationVuerInput",
+  props: {
+    defaultValue: {
+      required: true,
+      type: Number,
+    },
+    firstScalarInput: {
+      type: Boolean,
+    },
+    maximumValue: {
+      type: Number,
+    },
+    minimumValue: {
+      type: Number,
+    },
+    name: {
+      required: true,
+      type: String,
+    },
+    possibleValues: {
+      type: Array,
+    },
+  },
+  data: function() {
+    return {
+      enabled: true,
+      isDiscrete: this.possibleValues !== undefined,
+      labelClasses: "default " + ((this.possibleValues !== undefined)?"discrete":this.firstScalarInput?"first-scalar":"scalar"),
+      vModel: this.defaultValue,
+    };
+  },
+  methods: {
+    updateUi: function() {
+      updateUi(this.$parent);
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+@import url("//unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css");
+>>> .el-input-number.scalar {
+  margin-top: -8px;
+  width: 0;
+}
+>>> .el-input-number.scalar .el-input {
+  width: 60px;
+}
+>>> .el-input-number.scalar .el-input__inner:focus {
+  border-color: #8300bf;
+}
+>>> .el-select.discrete {
+  margin-bottom: 16px;
+}
+>>> .el-slider {
+  width: 108px;
+  margin-top: -12px;
+  margin-left: 8px;
+}
+>>> .el-slider__bar {
+  background-color: #8300bf;
+}
+>>> .el-slider__button {
+  border-color: #8300bf;
+}
+.discrete {
+  margin-left: 8px;
+}
+.discrete >>> .el-input__inner {
+  font-family: Asap, sans-serif;
+}
+.discrete >>> .el-input__inner:focus,
+.discrete >>> .el-input.is-focus .el-input__inner {
+  border-color: #8300bf;
+}
+.discrete-popper .el-select-dropdown__item {
+  font-family: Asap, sans-serif;
+}
+.discrete-popper .el-select-dropdown__item.selected {
+  font-weight: normal;
+  color: #8300bf;
+}
+.scalar >>> .el-input__inner {
+  text-align: center;
+}
+div.simulation-vuer {
+  height: 100%;
+}
+div.sliders-and-fields {
+  display: grid;
+  grid-template-columns: 132px auto;
+  width: 191px;
+  height: 26px;
+}
+p.default {
+  font-family: Asap, sans-serif;
+  letter-spacing: 0;
+  margin: 16px 0;
+  text-align: start;
+}
+p.first-scalar,
+p.scalar {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  margin-bottom: 8px;
+}
+p.discrete {
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+p.first-scalar {
+  margin-top: 0;
+}
+p.scalar {
+  margin-top: 6px;
+}
+</style>
+<style scoped src="../styles/purple/input-number.css">
+</style>
+<style scoped src="../styles/purple/option.css">
+</style>
+<style scoped src="../styles/purple/select.css">
+</style>
+<style scoped src="../styles/purple/slider.css">
+</style>

package/src/components/common.js

@@ -0,0 +1,29 @@
+function doEvaluateValue(value, from, to) {
+  if (from !== undefined) {
+    let re = new RegExp(`\\b${ from }\\b`, 'g');
+
+    value = value.replace(re, to);
+  }
+
+  return value;
+}
+
+export function evaluateValue(parent, value) {
+  let index = -1;
+
+  parent.simulationUiInformation.input.forEach((input) => {
+    ++index;
+
+    value = doEvaluateValue(value, input.id, parent.$children[index].vModel);
+  });
+
+  return Function("return " + value + ";")();
+}
+
+export function evaluateSimulationValue(parent, results, value, i) {
+  parent.simulationUiInformation.output.data.forEach((data) => {
+    value = doEvaluateValue(value, data.id, results[parent.simulationDataId[data.id]][i]);
+  });
+
+  return Function("return " + value + ";")();
+}

package/src/components/json.js

@@ -0,0 +1,376 @@
+import { Validator } from "jsonschema";
+
+export function validJson(json) {
+  // Check the JSON against our schema.
+
+  let validator = new Validator();
+  let schema = {
+    additionalProperties: false,
+    properties: {
+      input: {
+        items: {
+          oneOf: [
+            {
+              additionalProperties: false,
+              properties: {
+                defaultValue: {
+                  required: true,
+                  type: "number",
+                },
+                enabled: {
+                  type: "string",
+                },
+                id: {
+                  type: "string",
+                },
+                name: {
+                  required: true,
+                  type: "string",
+                },
+                possibleValues: {
+                  items: {
+                    additionalProperties: false,
+                    properties: {
+                      name: {
+                        required: true,
+                        type: "string",
+                      },
+                      value: {
+                        required: true,
+                        type: "number",
+                      },
+                    },
+                    type: "object",
+                  },
+                  minItems: 1,
+                  required: true,
+                  type: "array",
+                },
+              },
+            },
+            {
+              additionalProperties: false,
+              properties: {
+                defaultValue: {
+                  required: true,
+                  type: "number",
+                },
+                enabled: {
+                  type: "string",
+                },
+                id: {
+                  type: "string",
+                },
+                maximumValue: {
+                  required: true,
+                  type: "number",
+                },
+                minimumValue: {
+                  required: true,
+                  type: "number",
+                },
+                name: {
+                  required: true,
+                  type: "string",
+                },
+              },
+            },
+          ],
+          type: "object",
+        },
+        minItems: 1,
+        type: "array",
+      },
+      output: {
+        additionalProperties: false,
+        properties: {
+          data: {
+            items: {
+              additionalProperties: false,
+              properties: {
+                id: {
+                  type: "string",
+                },
+                name: {
+                  required: true,
+                  type: "string",
+                },
+              },
+              type: "object",
+            },
+            type: "array",
+          },
+          plots: {
+            items: {
+              additionalProperties: false,
+              properties: {
+                xAxisTitle: {
+                  required: true,
+                  type: "string",
+                },
+                xValue: {
+                  required: true,
+                  type: "string",
+                },
+                yAxisTitle: {
+                  required: true,
+                  type: "string",
+                },
+                yValue: {
+                  required: true,
+                  type: "string",
+                },
+              },
+              type: "object",
+            },
+            maxItems: 9,
+            minItems: 1,
+            required: true,
+            type: "array",
+          },
+        },
+        required: true,
+        type: "object",
+      },
+      parameters: {
+        items: {
+          additionalProperties: false,
+          properties: {
+            name: {
+              required: true,
+              type: "string",
+            },
+            value: {
+              required: true,
+              type: "string",
+            },
+          },
+          type: "object",
+        },
+        type: "array",
+      },
+      simulation: {
+        additionalProperties: false,
+        properties: {
+          endingPoint: {
+            required: true,
+            type: "number",
+          },
+          pointInterval: {
+            required: true,
+            type: "number",
+          },
+        },
+        type: "object",
+      },
+    },
+    type: "object",
+  };
+
+  let result = validator.validate(json, schema, { nestedErrors: true });
+
+  if (!result.valid) {
+    console.warn(result.toString());
+
+    return false;
+  }
+
+  // Make sure that the input information makes sense.
+
+  let inputIdUsed = [];
+  let inputValid = json.input.every((input) => {
+    if (input.id !== undefined) {
+      if (input.id === "") {
+        console.warn("JSON: an input id must not be empty.");
+
+        return false;
+      }
+
+      if (inputIdUsed[input.id]) {
+        console.warn("JSON: an input id must be unique (" + input.id + " is used more than once).");
+
+        return false;
+      }
+
+      inputIdUsed[input.id] = true;
+    }
+
+    if (input.name === "") {
+      console.warn("JSON: an input name must not be empty.");
+
+      return false;
+    }
+
+    if (input.possibleValues !== undefined) {
+      if (!input.possibleValues.every((possibleValue) => {
+        if (possibleValue.name === "") {
+          console.warn("JSON: an input possible value must not have an empty name.");
+
+          return false;
+        }
+
+        return true;
+      })) {
+        return false;
+      }
+
+      let values = input.possibleValues.map((value) => {
+        return value.value;
+      });
+      let valueUsed = [];
+
+      if (!values.every((value) => {
+        if (valueUsed[value]) {
+          console.warn("JSON: an input possible value must have a unique value (" + value + " is used more than once).");
+
+          return false;
+        }
+
+        valueUsed[value] = true;
+
+        return true;
+      })) {
+        return false;
+      }
+
+      if (!values.includes(input.defaultValue)) {
+        console.warn("JSON: the input default value (" + input.defaultValue + ") must be one of the possible values (" + values.join(", ") + ").");
+
+        return false;
+      }
+    }
+
+    if (input.enabled !== undefined) {
+      if (input.enabled === "") {
+        console.warn("JSON: an input enabled must not be empty.");
+
+        return false;
+      }
+    }
+
+    if ((input.minimumValue !== undefined) && (input.maximumValue !== undefined)) {
+      if (input.minimumValue >= input.maximumValue) {
+        console.warn("JSON: the input minimum value (" + input.minimumValue + ") must be lower than the maximum value (" + input.maximumValue + ").");
+
+        return false;
+      }
+
+      if ((input.defaultValue < input.minimumValue) || (input.defaultValue > input.maximumValue)) {
+        console.warn("JSON: the input default value (" + input.defaultValue + ") must be greater or equal to the minimum value (" + input.minimumValue + ") and lower or equal to the maximum value (" + input.maximumValue + ").");
+
+        return false;
+      }
+    }
+
+    return true;
+  });
+
+  if (!inputValid) {
+    return false;
+  }
+
+  // Make sure that the output information makes sense.
+
+  let outputIdUsed = [];
+  let outputDataValid = json.output.data.every((outputData) => {
+    if (outputData.id !== undefined) {
+      if (outputData.id === "") {
+        console.warn("JSON: an output data id must not be empty.");
+
+        return false;
+      }
+
+      if (outputIdUsed[outputData.id]) {
+        console.warn("JSON: an output data id must be unique (" + outputData.id + " is used more than once).");
+
+        return false;
+      }
+
+      outputIdUsed[outputData.id] = true;
+    }
+
+    if (outputData.name === "") {
+      console.warn("JSON: an output data name must not be empty.");
+
+      return false;
+    }
+
+    return true;
+  });
+
+  if (!outputDataValid) {
+    return false;
+  }
+
+  let outputPlotsValid = json.output.plots.every((outputPlot) => {
+    if (outputPlot.xAxisTitle === "") {
+      console.warn("JSON: an output plot X axis title must not be empty.");
+
+      return false;
+    }
+
+    if (outputPlot.xValue === "") {
+      console.warn("JSON: an output plot X value must not be empty.");
+
+      return false;
+    }
+
+    if (outputPlot.yAxisTitle === "") {
+      console.warn("JSON: an output plot Y axis title must not be empty.");
+
+      return false;
+    }
+
+    if (outputPlot.yValue === "") {
+      console.warn("JSON: an output plot Y value must not be empty.");
+
+      return false;
+    }
+
+    return true;
+  });
+
+  if (!outputPlotsValid) {
+    return false;
+  }
+
+  // Make sure that the parameters information makes sense.
+
+  let parametersValid = json.parameters.every((parameter) => {
+    if (parameter.name === "") {
+      console.warn("JSON: a parameter name must not be empty.");
+
+      return false;
+    }
+
+    if (parameter.value === "") {
+      console.warn("JSON: a parameter value must not be empty.");
+
+      return false;
+    }
+
+    return true;
+  });
+
+  if (!parametersValid) {
+    return false;
+  }
+
+  // Make sure that the simulation information makes sense.
+
+  if (json.simulation !== undefined) {
+    if (json.simulation.endingPoint <= 0.0) {
+      console.warn("JSON: a simulation ending point must be greater than zero.");
+
+      return false;
+    }
+
+    if (json.simulation.pointInterval <= 0.0) {
+      console.warn("JSON: a simulation point interval must be greater than zero.");
+
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/components/ui.js

@@ -0,0 +1,80 @@
+import { evaluateValue } from "./common.js";
+
+export function initialiseUi(parent) {
+  // Initialise some input-related data.
+
+  let index = -1;
+  let isPreviousDiscrete = true;
+
+  parent.simulationUiInformation.input.forEach((input) => {
+    let isDiscrete = input.possibleValues !== undefined;
+
+    parent.firstScalarInput[++index] = !isDiscrete && isPreviousDiscrete;
+
+    isPreviousDiscrete = isDiscrete;
+  });
+
+  // Initialise some output-related data.
+
+  parent.simulationUiInformation.output.data.forEach((data) => {
+    parent.simulationDataId[data.id] = data.name;
+  });
+
+  index = -1;
+
+  parent.simulationUiInformation.output.plots.forEach((outputPlot) => {
+    ++index;
+
+    parent.layout[index] = {
+      xaxis: {
+        title: {
+          text: outputPlot.xAxisTitle,
+          font: {
+            size: 10,
+          },
+        },
+      },
+      yaxis: {
+        title: {
+          text: outputPlot.yAxisTitle,
+          font: {
+            size: 10,
+          },
+        }
+      },
+    };
+
+    parent.simulationData[index] = [{}];
+  });
+}
+
+export function finaliseUi(parent) {
+  // Finalise our UI, but only if we haven't already done so, we are mounted,
+  // and we have some valid simulation UI information.
+
+  if (!parent.hasFinalisedUi && parent.isMounted && parent.hasValidSimulationUiInformation) {
+    // Configure the PlotVuer's.
+
+    parent.$refs.output.classList.add("x" + parent.simulationUiInformation.output.plots.length);
+
+    // Make sure that our UI is up to date.
+
+    updateUi(parent);
+
+    parent.hasFinalisedUi = true;
+  }
+}
+
+export function updateUi(parent) {
+  // Enable/disable all the elements.
+  // Note: we do this using $nextTick() to be ensure that the UI has been fully
+  //       mounted.
+
+  parent.$nextTick(() => {
+    let index = -1;
+
+    parent.simulationUiInformation.input.forEach((input) => {
+      parent.$children[++index].enabled = (input.enabled === undefined)?true:evaluateValue(parent, input.enabled);
+    });
+  });
+}