initial link between GUI state from simulationSetup Vuex store and component

guiapp/package-lock.json

@@ -10,6 +10,7 @@
         "@quasar/extras": "^1.0.0",
         "@types/emscripten": "^1.39.5",
         "core-js": "^3.6.5",
+        "lodash": "^4.17.21",
         "mathjs": "^9.5.0",
         "quasar": "^2.0.0",
         "vuex": "^4.0.1"
@@ -17,6 +18,7 @@
       "devDependencies": {
         "@babel/eslint-parser": "^7.13.14",
         "@quasar/app": "^3.0.0",
+        "@types/lodash": "^4.14.175",
         "@types/node": "^12.20.21",
         "@typescript-eslint/eslint-plugin": "^4.16.1",
         "@typescript-eslint/parser": "^4.16.1",
@@ -2314,6 +2316,12 @@
       "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.175",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.175.tgz",
+      "integrity": "sha512-XmdEOrKQ8a1Y/yxQFOMbC47G/V2VDO1GvMRnl4O75M4GW/abC5tnfzadQYkqEveqRM1dEJGFFegfPNA2vvx2iw==",
+      "dev": true
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -8333,8 +8341,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash._reinterpolate": {
       "version": "3.0.0",
@@ -15351,6 +15358,12 @@
       "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.14.175",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.175.tgz",
+      "integrity": "sha512-XmdEOrKQ8a1Y/yxQFOMbC47G/V2VDO1GvMRnl4O75M4GW/abC5tnfzadQYkqEveqRM1dEJGFFegfPNA2vvx2iw==",
+      "dev": true
+    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -20041,8 +20054,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",

guiapp/package.json

@@ -13,6 +13,7 @@
     "@quasar/extras": "^1.0.0",
     "@types/emscripten": "^1.39.5",
     "core-js": "^3.6.5",
+    "lodash": "^4.17.21",
     "mathjs": "^9.5.0",
     "quasar": "^2.0.0",
     "vuex": "^4.0.1"
@@ -20,6 +21,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.13.14",
     "@quasar/app": "^3.0.0",
+    "@types/lodash": "^4.14.175",
     "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",

guiapp/src/components/InputWithUnits.vue

@@ -79,12 +79,12 @@
 </template>
 
 <script lang="ts">
-import {evaluate} from 'mathjs';
+import {evaluate} from 'mathjs'
 import {
   defineComponent,
   ref,
   watch,
-  } from 'vue';
+  } from 'vue'
 
 export default defineComponent({
   name: 'InputWithUnits',
@@ -256,7 +256,7 @@ export default defineComponent({
         return ''
       },
 
-    };
+    }
   },
-});
+})
 </script>

guiapp/src/pages/Spectrum.vue

@@ -2,32 +2,35 @@
   <q-page class="row items-center justify-evenly">
     <!--    Your code-->
     <h4>Spectrum</h4>
-    <input-with-units
-        v-model:input-result="someValue"
-        v-model:is-showing-help="isShowingHelpForInputWithUnits"
-        :initial-expression="someExpr"
-        title="Re(n)"
-        units="nm"
-    ></input-with-units>
-    <input-with-units
-        v-model:input-result="someValue"
-        v-model:is-showing-help="isShowingHelpForInputWithUnits"
-        :initial-expression="someExpr"
-        title=""
-        units=""
-        active
-    ></input-with-units>
-    Input result: {{someValue}}
+          Wavelength
+          <input-with-units
+              v-model:input-result="simulationSetupGui.fromWL"
+              v-model:is-showing-help="isShowingHelpForInputWithUnits"
+              :initial-expression="simulationSetupGui.fromWL.toString()"
+              title="from"
+              units="nm"
+          />
+          <input-with-units
+              v-model:input-result="someValue"
+              v-model:is-showing-help="isShowingHelpForInputWithUnits"
+              :initial-expression="someExpr"
+              title=""
+              units=""
+              active
+          />
+    Input result: {{$store.state.simulationSetup.gui.fromWL}}
 <!--    tooltip_text="help text"-->
   </q-page>
 </template>
 
 <script lang='ts'>
-import { defineComponent, ref,
-  computed
-} from 'vue';
-import { useStore } from 'src/store';
-import InputWithUnits from 'components/InputWithUnits.vue';
+import {
+  defineComponent, ref,
+  computed, watch, reactive
+} from 'vue'
+import { useStore } from 'src/store'
+import InputWithUnits from 'components/InputWithUnits.vue'
+import { cloneDeep } from 'lodash'
 
 
 export default defineComponent({
@@ -35,17 +38,19 @@ export default defineComponent({
   components: {InputWithUnits },
   setup() {
     const $store = useStore()
-    let someValue = ref(10);
-    let someExpr = ref('10');
+    let someValue = ref(10)
+    let someExpr = ref('10')
     // InputWithUnits component will disable showing help after first input
     const isShowingHelpForInputWithUnits = computed({
-      get: () => $store.state.guiRuntime.isShowingHelpForInputWithUnits,
-      set: val => {
-        $store.commit('guiRuntime/setIsShowingHelpForInputWithUnits', val)
-      }
+      get: () => $store.state.plotRuntime.isShowingHelpForInputWithUnits,
+      set: val => $store.commit('plotRuntime/setIsShowingHelpForInputWithUnits', val)
     })
-    // let isShowingHelpForInputWithUnits = ref(true)
-    return { someValue, someExpr, isShowingHelpForInputWithUnits};
+
+    const simulationSetupGui = reactive(cloneDeep($store.state.simulationSetup.gui))
+    watch(simulationSetupGui, () => $store.commit('simulationSetup/setGuiState',simulationSetupGui))
+
+    // console.log($store.state.simulationSetup.gui.toWL)
+    return { someValue, someExpr, isShowingHelpForInputWithUnits, simulationSetupGui}
   }
-});
+})
 </script>

guiapp/src/store/simulation-setup/mutations.ts

@@ -1,10 +1,12 @@
 import { MutationTree } from 'vuex';
-import { simulationSetupStateInterface } from './state';
+import { simulationSetupStateInterface, simulationSetup } from './state';
+import { cloneDeep } from 'lodash'
 
 const mutation: MutationTree<simulationSetupStateInterface> = {
-  setIsShowingHelpForInputWithUnits (state: simulationSetupStateInterface, newVal: boolean) {
+  setGuiState (state: simulationSetupStateInterface,
+               newVal: simulationSetup) {
     // your code
-    state.isShowingHelpForInputWithUnits = newVal
+    state.gui = cloneDeep(newVal)
   }
 };
 

guiapp/src/store/simulation-setup/state.ts

@@ -1,10 +1,31 @@
+import { cloneDeep } from 'lodash'
+export interface simulationSetup {
+  hostIndex: number,
+  fromWL: number, toWL:number, pointsWL:number
+}
+
 export interface simulationSetupStateInterface {
-  isShowingHelpForInputWithUnits: boolean;
+  library: Map<string,simulationSetup>;
+  gui: simulationSetup;
+  current: simulationSetup;
+}
+
+function setupFactory(hostIndex = 1,
+                      fromWL = 300, toWL=1000, pointsWL=350
+                     ):simulationSetup {
+  return {hostIndex:hostIndex,
+    fromWL:fromWL, toWL:toWL, pointsWL:pointsWL }
 }
 
 function state(): simulationSetupStateInterface {
+  const gui = setupFactory()
+  const current = cloneDeep(gui)
+  const library = new Map<string,simulationSetup>()
+  library.set('default', cloneDeep(gui))
   return {
-    isShowingHelpForInputWithUnits: true
+    library,
+    gui,
+    current
   }
 };