add GetHostIndex.vue component, add input-result reactivity to InputWithUnits.vue

guiapp/src/components/GetHostIndex.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="row">
+    <div class="col-xs-12 col-sm-auto text-weight-bold text-left q-px-md q-py-sm">
+      Host media
+    </div>
+    <div class="col-xs-auto col-sm">
+      <div class="row justify-start items-center">
+
+        <div class="col-auto" ><input-with-units
+            v-model:input-result="simulationSetupGui.hostIndex"
+            v-model:is-showing-help="isShowingHelpForInputWithUnits"
+            :initial-expression="simulationSetupGui.hostIndex.toString()"
+            title="Re(n)"
+            units=""
+        /></div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  reactive,
+  computed,
+  watch,
+  onBeforeUnmount,
+  } from 'vue'
+import { useStore } from 'src/store'
+import { cloneDeep } from 'lodash'
+import InputWithUnits from 'components/InputWithUnits.vue'
+
+export default defineComponent({
+
+  name: 'GetHostIndex',
+  components: {InputWithUnits,},
+
+  setup() {
+    const $store = useStore()
+
+    let simulationSetupGui = reactive(cloneDeep($store.state.simulationSetup.gui))
+    const unsubscribe = $store.subscribe((mutation, /*state*/) => {
+      if (mutation.type === 'simulationSetup/setGuiState') {
+        // simulationSetupGui = cloneDeep($store.state.simulationSetup.gui)
+        simulationSetupGui.hostIndex = $store.state.simulationSetup.gui.hostIndex
+      }
+    })
+    onBeforeUnmount(()=>unsubscribe())
+    watch(simulationSetupGui, () => $store.commit('simulationSetup/setGuiState',simulationSetupGui))
+
+    const isShowingHelpForInputWithUnits = computed({
+      get: () => $store.state.plotRuntime.isShowingHelpForInputWithUnits,
+      set: val => $store.commit('plotRuntime/setIsShowingHelpForInputWithUnits', val)
+    })
+    return { simulationSetupGui, isShowingHelpForInputWithUnits }
+  },
+})
+</script>

guiapp/src/components/InputWithUnits.vue

@@ -28,7 +28,7 @@
         </div>
         <div>
           <q-select
-              :model-value="localQSelectValue"
+              :model-value="localQSelectModel"
               :options="qSelectOptions"
               bg-color="white"
               dense
@@ -42,7 +42,7 @@
               @filter="filterQSelectOptions"
               @blur="handleQSelectBlur"
               @keydown.enter="handleQSelectBlur"
-              @input-value="localQSelectValue=$event"
+              @input-value="localQSelectModel=$event"
           >
             <template
                 v-if="isShowingTooltipAppend&&!isShowingTooltip"
@@ -118,14 +118,14 @@ export default defineComponent({
   ],
   setup(props, {emit}) {
 
-    let localQSelectValue = ref('')
+    let localQSelectModel = ref('')
     let localTooltipText = ref('')
     let isShowingTooltip = ref(false)
     let isShowingTooltipAppend = ref(false)
     let isShowingHelpLocal = ref(false)
     let helpExpr = ref('(1+2)*sqrt(2)')
 
-    let evaluatedValue = ref(0)
+    let evaluated = ref(0)
     let count_updates = 0
     const digits = 1
 
@@ -142,17 +142,17 @@ export default defineComponent({
     function runEvaluate() {
       // Using try{} block to drop silently invalid input
       try {
-        const tryEvaluate = Number(evaluate(localQSelectValue.value))
-        if (!isNaN(tryEvaluate)) evaluatedValue.value = tryEvaluate
+        const tryEvaluate = Number(evaluate(localQSelectModel.value))
+        if (!isNaN(tryEvaluate)) evaluated.value = tryEvaluate
       } catch { }
     }
 
-    watch(localQSelectValue, () => {
+    watch(localQSelectModel, () => {
       runEvaluate()
     })
 
     function setTooltipVisibility(){
-      if (evaluatedValue.value != Number(localQSelectValue.value)) {
+      if (evaluated.value != Number(localQSelectModel.value)) {
         isShowingTooltip.value = true
         isShowingTooltipAppend.value = true
       } else {
@@ -167,16 +167,16 @@ export default defineComponent({
     })
 
     function setTooltip(){
-      localTooltipText.value = evaluatedValue.value.toString()
+      localTooltipText.value = evaluated.value.toString()
       setTooltipVisibility()
     }
 
-    watch(evaluatedValue, () => {
-      emit('update:input-result', evaluatedValue.value)
+    watch(evaluated, () => {
+      emit('update:input-result', evaluated.value)
       setTooltip()
       // Switch off showing help as soon as we have some input from user
       const threshold = 1
-      if (count_updates < threshold+1) { // emit only once
+      if (count_updates < threshold+1) { // limit the unbound grow of count_updates
         count_updates += 1
         if (props.isShowingHelp && count_updates > threshold) {
           qSelectOptionsHistory.value.unshift(helpExpr.value)
@@ -197,10 +197,22 @@ export default defineComponent({
       if (qSelectOptions.value.length>0) isShowingHelpLocal.value = false
     })
 
-    // eslint-disable-next-line vue/no-setup-props-destructure
-    localQSelectValue.value = props.initialExpression // TODO do we need reactivity from props.initialExpression?
+    watch(props, ()=> {
+      // Using try{} block to drop silently invalid input
+      try {
+        // If props.inputResults changed and is not equal to local
+        // expression localQSelectModel.value, then update local expression
+        const tryEvaluate = Number(evaluate(localQSelectModel.value))
+        if ( !isNaN(tryEvaluate)
+            && props.inputResult != tryEvaluate) {
+          localQSelectModel.value = props.inputResult.toString()
+        }
+      } catch { }
+    })
+
+    localQSelectModel.value = props.initialExpression.toString()
     runEvaluate()
-    localTooltipText.value = localQSelectValue.value
+    localTooltipText.value = localQSelectModel.value
     setTooltip()
     isShowingTooltip.value = false
 
@@ -208,16 +220,11 @@ export default defineComponent({
       localTooltipText, isShowingTooltip,
       isShowingTooltipAppend, isShowingHelpLocal,
       helpExpr,
-      qSelectOptions,  localQSelectValue,
+      qSelectOptions,  localQSelectModel,
 
       handleQSelectBlur(){
         isShowingTooltip.value = false
-        const expr = localQSelectValue.value
-        // Switch off showing help as soon as we have some input from user
-        if (props.isShowingHelp) {
-          qSelectOptionsHistory.value.unshift(helpExpr.value)
-          emit('update:is-showing-help', false)
-        }
+        const expr = localQSelectModel.value
         if (!qSelectOptionsHistory.value.includes(expr)) qSelectOptionsHistory.value.unshift(expr)
         if (qSelectOptionsHistory.value.length > 5) qSelectOptionsHistory.value.pop()
       },

guiapp/src/pages/Spectrum.vue

@@ -4,22 +4,7 @@
 
 <!--    <div class="row justify-start items-center">-->
     <div class="column q-px-md">
-
-      <div class="row">
-        <div class="col-xs-12 col-sm-auto text-weight-bold text-left q-px-md q-py-sm">Host media</div>
-        <div class="col-xs-auto col-sm">
-          <div class="row justify-start items-center">
-            <div class="col-auto" ><input-with-units
-              v-model:input-result="simulationSetupGui.hostIndex"
-              v-model:is-showing-help="isShowingHelpForInputWithUnits"
-              :initial-expression="simulationSetupGui.hostIndex.toString()"
-              title="Re(n)"
-              units=""
-          /></div>
-          </div>
-        </div>
-      </div>
-
+      <GetHostIndex/>
 
       <div class="row">
         <div class="col-xs-12 col-sm-auto text-weight-bold text-left q-px-md q-py-sm">Wavelength</div>
@@ -54,7 +39,7 @@
 
       <div class="row justify-start items-center">
         <div class="col-auto">
-          Input result: {{$store.state.simulationSetup.gui.fromWL}}
+          Input result: {{$store.state.simulationSetup.gui.hostIndex}}
         </div>
       </div>
     </div>
@@ -65,16 +50,17 @@
 <script lang='ts'>
 import {
   defineComponent, ref,
-  computed, watch, reactive
+  computed, watch, reactive, onBeforeUnmount
 } from 'vue'
 import { useStore } from 'src/store'
 import InputWithUnits from 'components/InputWithUnits.vue'
+import GetHostIndex from 'components/GetHostIndex.vue'
 import { cloneDeep } from 'lodash'
 
 
 export default defineComponent({
   name: 'PageIndex',
-  components: {InputWithUnits },
+  components: {InputWithUnits, GetHostIndex },
   setup() {
     const $store = useStore()
     let someValue = ref(10)
@@ -85,7 +71,13 @@ export default defineComponent({
       set: val => $store.commit('plotRuntime/setIsShowingHelpForInputWithUnits', val)
     })
 
-    const simulationSetupGui = reactive(cloneDeep($store.state.simulationSetup.gui))
+    let simulationSetupGui = reactive(cloneDeep($store.state.simulationSetup.gui))
+    const unsubscribe = $store.subscribe((mutation, /*state*/) => {
+      if (mutation.type === 'simulationSetup/setGuiState') {
+        simulationSetupGui = cloneDeep($store.state.simulationSetup.gui)
+      }
+    })
+    onBeforeUnmount(()=>unsubscribe())
     watch(simulationSetupGui, () => $store.commit('simulationSetup/setGuiState',simulationSetupGui))
 
     // console.log($store.state.simulationSetup.gui.toWL)