input for number of modes to plot

guiapp/src/components/GetNumberOfModes.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="row items-baseline">
+    <div class="col-xs-12 col-sm-auto text-weight-bold text-center q-px-md q-py-sm">
+      <div :style="flexRowTitleStyle">
+        Modes to plot
+      </div>
+    </div>
+    <div class="col-xs-grow col-sm q-px-xs">
+      <div class="row justify-xs-center justify-sm-start items-baseline">
+
+        <div class="col-auto">
+              <q-input
+                  v-model.number="numberOfModesToPlot"
+                  outlined
+                  type="number"
+                  min=1
+                  max=100
+                  step=1
+                  dense
+                  style="width: 6em"
+              />
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  reactive,
+  computed,
+  watch
+  } from 'vue'
+import { useStore } from 'src/store'
+import { flexRowTitleStyle } from 'components/utils'
+
+export default defineComponent({
+  name: 'GetNumberOfModes',
+
+  setup() {
+    const $store = useStore()
+
+    const numberOfModesToPlot = computed({
+      get: () => $store.state.simulationSetup.gui.numberOfModesToPlot,
+      set: val => {
+        const intVal = parseInt(val.toString())
+        if (!isNaN(intVal)) $store.commit('simulationSetup/setNumberOfModesToPlot', intVal)
+      }
+    })
+
+    return { flexRowTitleStyle,
+      numberOfModesToPlot,
+      }
+  },
+})
+</script>

guiapp/src/components/GetParticleParameters.vue

@@ -5,7 +5,7 @@
         Spherical particle
       </div>
     </div>
-    <div class="col-xs-grow col-sm">
+    <div class="col-xs-grow col-sm  q-px-xs">
       <div class="row justify-xs-center justify-sm-start items-baseline">
 
         <div class="col-auto" >
@@ -116,7 +116,7 @@ import {cloneDeep} from 'lodash'
 import InputWithUnits from 'components/InputWithUnits.vue';
 
 export default defineComponent({
-  name: 'GetHostIndex',
+  name: 'GetParticleParameters',
   components: {InputWithUnits},
 
   setup() {

guiapp/src/components/GetUnits.vue

@@ -5,7 +5,7 @@
         Units
       </div>
     </div>
-    <div class="col-xs-grow col-sm">
+    <div class="col-xs-grow col-sm  q-px-xs">
       <div class="row justify-xs-center justify-sm-start items-center">
 
         <div class="col-auto" >
@@ -86,7 +86,7 @@ import { flexRowTitleStyle } from 'components/utils'
 
 export default defineComponent({
 
-  name: 'GetHostIndex',
+  name: 'GetUnits',
   components: {},
 
   setup() {

guiapp/src/pages/Spectrum.vue

@@ -8,8 +8,10 @@
     <GetSourceParameters/>
     <div class="q-ma-xs"/>
     <GetParticleParameters/>
+    <div class="q-ma-xs"/>
+    <GetNumberOfModes/>
     <div class="col-auto q-pa-md">
-      Input result: {{$store.state.simulationSetup.gui.layers}}
+      Input result: {{$store.state.simulationSetup.gui.numberOfModesToPlot}}
     </div>
   </q-page>
 </template>
@@ -22,13 +24,14 @@ import GetUnits from 'components/GetUnits.vue'
 import GetHostIndex from 'components/GetHostIndex.vue'
 import GetSourceParameters from 'components/GetSourceParameters.vue'
 import GetParticleParameters from 'components/GetParticleParameters.vue'
+import GetNumberOfModes from 'components/GetNumberOfModes.vue'
 // import { useStore } from 'src/store'
 
 
 export default defineComponent({
   name: 'PageIndex',
   components: {GetUnits, GetHostIndex, GetSourceParameters,
-    GetParticleParameters},
+    GetParticleParameters, GetNumberOfModes},
   setup() {
     // const $store = useStore()
     return {}

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

@@ -16,6 +16,7 @@ const mutation: MutationTree<sssi> = {
   setFromWL    (state: sssi, val: number) {state.gui.fromWL    = val},
   setToWL      (state: sssi, val: number) {state.gui.toWL      = val},
   setPointsWL  (state: sssi, val: number) {state.gui.pointsWL  = val},
+  setNumberOfModesToPlot  (state: sssi, val: number) {state.gui.numberOfModesToPlot  = val},
 
 };
 

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

@@ -14,6 +14,7 @@ export interface simulationSetup {
   hostIndex: number
   fromWL: number; toWL:number; pointsWL:number
   layers: layer[]
+  numberOfModesToPlot: number
 }
 
 export interface simulationSetupStateInterface {
@@ -29,11 +30,14 @@ function setupFactory(hostIndex = 1,
                           materialName:'nk-constant',
                           nSpline:undefined, kSpline:undefined
                         },
-                      ]
+                      ],
+                      numberOfModesToPlot = 4
                      ):simulationSetup {
   return {hostIndex:hostIndex,
     fromWL:fromWL, toWL:toWL, pointsWL:pointsWL,
-  layers: cloneDeep(layers)}
+    layers: cloneDeep(layers),
+    numberOfModesToPlot: numberOfModesToPlot,
+  }
 }
 
 function state(): simulationSetupStateInterface {
@@ -43,8 +47,8 @@ function state(): simulationSetupStateInterface {
   library.set('default', cloneDeep(gui))
   return {
     library,
-    gui,
-    current
+    gui, // simulation setup config as shown in GUI
+    current // simulation setup used for the latest simulation
   }
 };