@abi-software/simulationvuer 0.5.0 → 0.5.1

package/src/components/ui.js

@@ -1,14 +1,28 @@
-import Vue from "vue";
 import { evaluateValue } from "./common.js";
 
-export function prepareForUi(parent) {
+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.json.output.data.forEach((data) => {
+  parent.simulationUiInformation.output.data.forEach((data) => {
     parent.simulationDataId[data.id] = data.name;
   });
 
-  parent.json.output.plots.forEach((outputPlot) => {
+  index = -1;
+
+  parent.simulationUiInformation.output.plots.forEach((outputPlot) => {
     ++index;
 
     parent.layout[index] = {
@@ -34,240 +48,33 @@ export function prepareForUi(parent) {
   });
 }
 
-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" />
-  `,
-});
+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.
 
-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.
+  if (!parent.hasFinalisedUi && parent.isMounted && parent.hasValidSimulationUiInformation) {
+    // Configure the PlotVuer's.
 
-    let ui = (this instanceof Ui)?this:this.parent;
+    parent.$refs.output.classList.add("x" + parent.simulationUiInformation.output.plots.length);
 
-    ui.scalarElements.forEach((scalarElement) => {
-      let enabled = scalarElement.enabled;
+    // Make sure that our UI is up to date.
 
-      if (enabled !== undefined) {
-        let disabled = !evaluateValue(ui, enabled);
+    updateUi(parent);
 
-        scalarElement.slider.disabled = disabled;
-        scalarElement.input_number.disabled = disabled;
-      }
-    });
+    parent.hasFinalisedUi = true;
   }
+}
 
-  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);
+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.
 
-        // Keep track of the slider and input number.
+  parent.$nextTick(() => {
+    let index = -1;
 
-        this.scalarElements[scalarElementIndex] = {
-          enabled: input.enabled,
-          id: input.id,
-          input_number: inputNumber,
-          slider: slider,
-        };
-      }
+    parent.simulationUiInformation.input.forEach((input) => {
+      parent.$children[++index].enabled = (input.enabled === undefined)?true:evaluateValue(parent, input.enabled);
     });
-
-    // 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,6 +5,5 @@ module.exports = {
         if (process.env.NODE_ENV === 'production') {
             config.externals = [nodeExternals({})];
         }
-    },
-    runtimeCompiler: true
+    }
 }

package/src/components/configuration.js

@@ -1,139 +0,0 @@
-export function jsonForNormalModel() {
-  return {
-    input: [
-      {
-        defaultValue: 0,
-        id: "sm",
-        name: "Simulation mode",
-        possibleValues: [
-          {
-            name: "Normal sinus rhythm",
-            value: 0,
-          },
-          {
-            name: "Stellate stimulation",
-            value: 1,
-          },
-          {
-            name: "Vagal stimulation",
-            value: 2,
-          },
-        ],
-      },
-      {
-        defaultValue: 0,
-        enabled: "(sm == 1) || (sm == 2)",
-        id: "sl",
-        maximumValue: 10,
-        minimumValue: 0,
-        name: "Stimulation level",
-      },
-    ],
-    output: {
-      data: [
-        {
-          id: "time",
-          name: "environment/time",
-        },
-        {
-          id: "vm",
-          name: "Membrane/V",
-        },
-      ],
-      plots: [
-        {
-          xAxisTitle: "Time (s)",
-          xValue: "time",
-          yAxisTitle: "Membrane potential (mV)",
-          yValue: "vm",
-        },
-      ],
-    },
-    parameters: [
-      {
-        name: "Rate_modulation_experiments/Iso_1_uM",
-        value: "(sm == 0) ? 0.0 : 1.0",
-      },
-      {
-        name: "Rate_modulation_experiments/ACh",
-        value: "(sm == 0) ? 0.0 : (sm === 1) ? (1.0 - 0.1 * sl) * 22.0e-6 : 22.0e-6 + 0.1 * sl * (38.0e-6 - 22.0e-6)",
-      },
-    ],
-    simulation: {
-      endingPoint: 3.0,
-      pointInterval: 0.001,
-    },
-  };
-}
-
-export function jsonForCompositeModel() {
-  return {
-    input: [
-      {
-        defaultValue: 300,
-        id: "sf",
-        maximumValue: 1000,
-        minimumValue: 0,
-        name: "Spike frequency",
-      },
-      {
-        defaultValue: 10,
-        id: "sn",
-        maximumValue: 30,
-        minimumValue: 0,
-        name: "Spike number",
-      },
-      {
-        defaultValue: 10,
-        id: "sa",
-        maximumValue: 30,
-        minimumValue: 0,
-        name: "Spike amplitude",
-      },
-    ],
-    output: {
-      data: [
-        {
-          id: "sa",
-          name: "Brain_stem/w",
-        },
-        {
-          id: "time",
-          name: "environment/time",
-        },
-        {
-          id: "vm",
-          name: "Membrane/V",
-        },
-      ],
-      plots: [
-        {
-          xAxisTitle: "Time (s)",
-          xValue: "time",
-          yAxisTitle: "Spike amplitude",
-          yValue: "100.0 * sa",
-        },
-        {
-          xAxisTitle: "Time (s)",
-          xValue: "time",
-          yAxisTitle: "Membrane potential (mV)",
-          yValue: "vm",
-        },
-      ],
-    },
-    parameters: [
-      {
-        name: "Brain_stem/t_period",
-        value: "sf",
-      },
-      {
-        name: "Brain_stem/w_n",
-        value: "sn",
-      },
-      {
-        name: "Brain_stem/w_value",
-        value: "0.01 * sa",
-      },
-    ],
-  };
-}