@abi-software/simulationvuer 0.4.6 → 0.5.0

package/src/components/json.js

@@ -0,0 +1,373 @@
+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",
+                },
+                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,273 @@
+import Vue from "vue";
+import { evaluateValue } from "./common.js";
+
+export function prepareForUi(parent) {
+  let index = -1;
+
+  parent.json.output.data.forEach((data) => {
+    parent.simulationDataId[data.id] = data.name;
+  });
+
+  parent.json.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] = [{}];
+  });
+}
+
+const VueContainer = Vue.extend({
+  template: `
+    <div class="sliders-and-fields"/>
+  `,
+});
+
+const VueInputNumber = Vue.extend({
+  methods: {
+    emitSynchroniseSliderAndInputNumber: function(value) {
+      this.$emit("synchroniseSliderAndInputNumber", this.index, value);
+    }
+  },
+  props: {
+    disabled: Boolean,
+    index: Number,
+    maximumValue: Number,
+    minimumValue: Number,
+    parent: Object,
+    vModel: Number,
+  },
+  template: `
+    <el-input-number class="scalar" size="mini" v-model="vModel" :controls="false" :disabled="disabled" :max="maximumValue" :min="minimumValue" @change="emitSynchroniseSliderAndInputNumber" />
+  `,
+});
+
+const VueLabel = Vue.extend({
+  props: {
+    classes: String,
+    label: String,
+  },
+  template: `
+    <p :class="classes">{{ label }}</p>
+  `,
+});
+
+const VueSelect = Vue.extend({
+  methods: {
+    emitSelectionChanged: function(value) {
+      this.$emit("selectionChanged", this.index, value);
+    }
+  },
+  props: {
+    index: Number,
+    parent: Object,
+    possibleValues: Array,
+    vModel: Number,
+  },
+  template: `
+    <el-select class="discrete" popper-class="discrete-popper" size="mini" v-model="vModel" :popper-append-to-body="false" @change="emitSelectionChanged">
+      <el-option v-for="possibleValue in possibleValues" :key="possibleValue.value" :label="possibleValue.name" :value="possibleValue.value" />
+    </el-select>
+  `,
+});
+
+const VueSlider = Vue.extend({
+  methods: {
+    emitSynchroniseSliderAndInputNumber: function(value) {
+      this.$emit("synchroniseSliderAndInputNumber", this.index, value);
+    }
+  },
+  props: {
+    disabled: Boolean,
+    index: Number,
+    maximumValue: Number,
+    parent: Object,
+    vModel: Number,
+  },
+  template: `
+    <el-slider v-model="vModel" :disabled="disabled" :max="maximumValue" :show-input="false" :show-tooltip="false" @input="emitSynchroniseSliderAndInputNumber" />
+  `,
+});
+
+export default class Ui {
+  discreteElements = [];
+  scalarElements = [];
+
+  setVueAttributes(root, element) {
+    root.attributes.forEach((attribute) => {
+      element.setAttribute(attribute.nodeName, attribute.nodeValue);
+    });
+
+    element.children.forEach((childElement) => {
+      this.setVueAttributes(root, childElement);
+    });
+  }
+
+  addVueElement(root, parent, element) {
+    element.$mount();
+
+    this.setVueAttributes(root, element.$el);
+
+    parent.appendChild(element.$el);
+  }
+
+  selectionChanged() {
+    // Enable/disable all the scalar elements.
+
+    let ui = (this instanceof Ui)?this:this.parent;
+
+    ui.scalarElements.forEach((scalarElement) => {
+      let enabled = scalarElement.enabled;
+
+      if (enabled !== undefined) {
+        let disabled = !evaluateValue(ui, enabled);
+
+        scalarElement.slider.disabled = disabled;
+        scalarElement.input_number.disabled = disabled;
+      }
+    });
+  }
+
+  synchroniseSliderAndInputNumber(index, value) {
+    // Make sure that both a slider and its corresponding input number have
+    // the same value.
+
+    this.parent.scalarElements[index].slider.vModel = value;
+    this.parent.scalarElements[index].input_number.vModel = value;
+  }
+
+  constructor(parent) {
+    // Generate the UI for the input fields.
+
+    let inputRoot = parent.$refs.input;
+    let isPreviousDiscrete = true;
+    let slidersAndFieldsContainer = undefined;
+    let firstScalarInput = true;
+    let discreteElementIndex = -1;
+    let scalarElementIndex = -1;
+
+    parent.json.input.forEach((input) => {
+      // Determine whether we are dealing with a discrete or a scalar input.
+
+      let isDiscrete = input.possibleValues !== undefined;
+
+      // Determine our element mode and create a container for our sliders and
+      // input numbers, if needed.
+
+      if (!isDiscrete && isPreviousDiscrete) {
+        slidersAndFieldsContainer = new VueContainer();
+
+        this.addVueElement(inputRoot, inputRoot, slidersAndFieldsContainer);
+      }
+
+      isPreviousDiscrete = isDiscrete;
+
+      // Add the Label.
+
+      let label = new VueLabel({
+        propsData: {
+          classes: "default " + (isDiscrete?"discrete":firstScalarInput?"first-scalar":"scalar"),
+          label: input.name,
+        }
+      });
+
+      this.addVueElement(inputRoot, isDiscrete?inputRoot:slidersAndFieldsContainer.$el, label);
+
+      firstScalarInput = isDiscrete;
+
+      // Add a drop-down list or a slider and a text box depending on whether
+      // we are dealing with a discrete or a scalar input.
+
+      if (isDiscrete) {
+        // Add the drop-down list.
+
+        ++discreteElementIndex;
+
+        let select = new VueSelect({
+          propsData: {
+            index: discreteElementIndex,
+            parent: this,
+            possibleValues: input.possibleValues,
+            vModel: input.defaultValue,
+          },
+        });
+
+        this.addVueElement(inputRoot, inputRoot, select);
+
+        select.$on("selectionChanged", this.selectionChanged);
+
+        // Keep track of the select and its id.
+
+        this.discreteElements[discreteElementIndex] = {
+          id: input.id,
+          select: select,
+        };
+      } else {
+        // Add the slider and input number.
+
+        ++scalarElementIndex;
+
+        let slider = new VueSlider({
+          propsData: {
+            index: scalarElementIndex,
+            maximumValue: input.maximumValue,
+            parent: this,
+            vModel: input.defaultValue,
+          },
+        });
+        let inputNumber = new VueInputNumber({
+          propsData: {
+            index: scalarElementIndex,
+            maximumValue: input.maximumValue,
+            minimumValue: input.minimumValue,
+            parent: this,
+            vModel: input.defaultValue,
+          },
+        });
+
+        this.addVueElement(inputRoot, slidersAndFieldsContainer.$el, slider);
+        this.addVueElement(inputRoot, slidersAndFieldsContainer.$el, inputNumber);
+
+        slider.$on("synchroniseSliderAndInputNumber", this.synchroniseSliderAndInputNumber);
+        inputNumber.$on("synchroniseSliderAndInputNumber", this.synchroniseSliderAndInputNumber);
+
+        // Keep track of the slider and input number.
+
+        this.scalarElements[scalarElementIndex] = {
+          enabled: input.enabled,
+          id: input.id,
+          input_number: inputNumber,
+          slider: slider,
+        };
+      }
+    });
+
+    // Configure the PlotVuer's.
+    // Note: the PlotVuer's are created in SimulationVuer.vue since we can't
+    //       create them dynamically. So, all we need to do here is to configure
+    //       them.
+
+    parent.$refs.output.classList.add("x" + parent.json.output.plots.length);
+
+    // Enable/disable all the elements by pretending that a selection changed.
+
+    this.selectionChanged();
+  }
+}

package/vue.config.js

@@ -5,5 +5,6 @@ module.exports = {
         if (process.env.NODE_ENV === 'production') {
             config.externals = [nodeExternals({})];
         }
-    }
+    },
+    runtimeCompiler: true
 }