refactor names, add isPlot to activatedMaterials

guiapp/src/App.vue

@@ -2,7 +2,7 @@
   <router-view />
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, watch } from 'vue';
 import { useStore } from 'src/store'
 
 export default defineComponent({
@@ -17,6 +17,19 @@ export default defineComponent({
     void $store.dispatch('guiRuntime/activateMaterial', 'main/Si/Green-2008.yml')
     void $store.dispatch('guiRuntime/activateMaterial', 'main/SiO2/Gao.yml')
     void $store.dispatch('guiRuntime/activateMaterial', 'main/TiO2/Sarkar.yml')
+
+    let isPlotInitialToggle = false
+    watch($store.state.guiRuntime.activatedMaterials, ()=>{
+      if (!isPlotInitialToggle) {
+        const indexToToggle = $store.state.guiRuntime.activatedMaterials.findIndex(val => val.name == 'Ag_McPeak')
+        // Materials are activated in async actions, so toggle Ag_McPeak to be plotted as soon as it is loaded.
+        if (indexToToggle != -1) {
+          $store.commit('guiRuntime/toggleIsPlot', $store.state.guiRuntime.activatedMaterials[indexToToggle].name)
+          isPlotInitialToggle = true
+        }
+      }
+    })
+
   }
 })
 </script>

guiapp/src/components/GetParticleParameters.vue

@@ -249,9 +249,7 @@ export default defineComponent({
         layers.push(
             {
               layerWidth: coreR*0.1,
-              material: {name:'nk-constant',
-                spectrumRangeStart:undefined, spectrumRangeEnd: undefined,
-                nSpline: undefined, kSpline: undefined},
+              material: $store.state.guiRuntime.activatedMaterials[1], //nk-constant
               n: 4.0,
               k: 0.01,
             }

guiapp/src/components/MaterialsActivated.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="col-12 q-pa-md">
     <q-table
-          :rows="activatedMaterials"
+          :rows="$store.state.guiRuntime.activatedMaterials"
           :columns="columns"
           :rows-per-page-options="[0]"
           hide-pagination
@@ -14,6 +14,7 @@
       <template #header="props">
         <q-tr :props="props">
           <q-th auto-width/>
+          <q-th auto-width> Plot </q-th>
           <q-th auto-width class="text-left"> Label </q-th>
           <q-th auto-width class="text-left"> Range </q-th>
           <q-th class="text-left"> Interpolator </q-th>
@@ -32,6 +33,14 @@
                    @click="deleteFromSimulation(props.row.name)"/>
           </q-td>
 
+          <q-td auto-width>
+            <q-checkbox :model-value="props.row.isPlot" size="sm" color="primary" dense
+                        @click="$store.commit('guiRuntime/toggleIsPlot',
+                        props.row.name
+                        )"
+            />
+          </q-td>
+
 
           <q-td auto-width class="">
             {{composeLabelFromPageData(props.row.name)}}
@@ -64,12 +73,9 @@
 import {
   computed,
   defineComponent,
-  reactive,
-  watch
 } from 'vue'
 import { useStore } from 'src/store'
 import { composeLabelFromPageData } from 'components/utils'
-import { cloneDeep } from 'lodash'
 import ShowSpectrumRange from 'components/ShowSpectrumRange.vue'
 
 export default defineComponent({
@@ -92,16 +98,7 @@ export default defineComponent({
       {name: 'kSpline', kSpline: 'kSpline', field: 'kSpline'},
     ]
 
-    function getReactiveActivatedMaterials() {
-      return reactive( cloneDeep($store.state.guiRuntime.activatedMaterials) )
-    }
-    let activatedMaterials = getReactiveActivatedMaterials()
-    watch($store.state.guiRuntime.activatedMaterials, ()=>{
-      // to keep reactivity for local activatedMaterials array: remove all old value, add updated values
-      activatedMaterials.splice(0, activatedMaterials.length, ...$store.state.guiRuntime.activatedMaterials)
-    })
-
-    return {columns, activatedMaterials,
+    return {columns,
       fromWavelengthStore, toWavelengthStore,
       composeLabelFromPageData,
       deleteFromSimulation(name:string) {

guiapp/src/components/PlotSelector.vue

@@ -91,7 +91,7 @@ export default defineComponent({
       get: ()=> $store.state.plotRuntime.isRemovePlots,
       set: val => {
         $store.commit('plotRuntime/setIsRemovePlots', val)
-        $store.commit('plotRuntime/updateSpectraPlot')
+        $store.commit('plotRuntime/updateSpectrumPlots')
       }
     })
 

guiapp/src/components/PlotSpectra.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ReactiveChart :chart="$store.state.plotRuntime.spectraPlot"/>
+    <ReactiveChart :chart="$store.state.plotRuntime.spectrumPlots"/>
   </div>
 </template>
 
@@ -9,12 +9,9 @@ import ReactiveChart from 'components/ReactiveChart.vue'
 import { useStore } from 'src/store'
 import {
   defineComponent,
-  // ref,
-  // reactive,
   computed,
   watch
 } from 'vue'
-// import { toUnits } from 'components/utils'
 
 export default defineComponent({
   name: 'PlotSpectra',
@@ -24,23 +21,23 @@ export default defineComponent({
   setup () {
     const $store = useStore()
     const isPlotQsca = computed( ()=>$store.state.plotRuntime.isPlotQsca)
-    watch(isPlotQsca, ()=>$store.commit('plotRuntime/updateSpectraPlot'))
+    watch(isPlotQsca, ()=>$store.commit('plotRuntime/updateSpectrumPlots'))
     const isPlotQabs = computed( ()=>$store.state.plotRuntime.isPlotQabs)
-    watch(isPlotQabs, ()=>$store.commit('plotRuntime/updateSpectraPlot'))
+    watch(isPlotQabs, ()=>$store.commit('plotRuntime/updateSpectrumPlots'))
     const isPlotQext = computed( ()=>$store.state.plotRuntime.isPlotQext)
-    watch(isPlotQext, ()=>$store.commit('plotRuntime/updateSpectraPlot'))
+    watch(isPlotQext, ()=>$store.commit('plotRuntime/updateSpectrumPlots'))
 
     const isPlotQscaTotal = computed( ()=>$store.state.plotRuntime.isPlotQscaTotal)
-    watch(isPlotQscaTotal, ()=>$store.commit('plotRuntime/updateSpectraPlot'))
+    watch(isPlotQscaTotal, ()=>$store.commit('plotRuntime/updateSpectrumPlots'))
     const isPlotQabsTotal = computed( ()=>$store.state.plotRuntime.isPlotQabsTotal)
-    watch(isPlotQabsTotal, ()=>$store.commit('plotRuntime/updateSpectraPlot'))
+    watch(isPlotQabsTotal, ()=>$store.commit('plotRuntime/updateSpectrumPlots'))
     const isPlotQextTotal = computed( ()=>$store.state.plotRuntime.isPlotQextTotal)
-    watch(isPlotQextTotal, ()=>$store.commit('plotRuntime/updateSpectraPlot'))
+    watch(isPlotQextTotal, ()=>$store.commit('plotRuntime/updateSpectrumPlots'))
 
     const isPlotModeE = computed( ()=>$store.state.plotRuntime.isPlotModeE)
-    watch(isPlotModeE, ()=>$store.commit('plotRuntime/updateSpectraPlot'), { deep: true })
+    watch(isPlotModeE, ()=>$store.commit('plotRuntime/updateSpectrumPlots'), { deep: true })
     const isPlotModeH = computed( ()=>$store.state.plotRuntime.isPlotModeH)
-    watch(isPlotModeH, ()=>$store.commit('plotRuntime/updateSpectraPlot'), { deep: true })
+    watch(isPlotModeH, ()=>$store.commit('plotRuntime/updateSpectrumPlots'), { deep: true })
 
     const sourceUnits = computed( ()=>$store.state.guiRuntime.sourceUnits)
     function setPlotTitle() {
@@ -57,14 +54,14 @@ export default defineComponent({
       $store.commit('plotRuntime/updateXAxisTitle', title)
     }
 
-    function updateSpectraPlotUnits(){
+    function updateSpectraPlotsUnits(){
       setPlotTitle()
       $store.commit('plotRuntime/setWLsInUnits', sourceUnits.value)
-      $store.commit('plotRuntime/updateSpectraPlot')
+      $store.commit('plotRuntime/updateSpectrumPlots')
     }
 
-    updateSpectraPlotUnits()
-    watch(sourceUnits, ()=> updateSpectraPlotUnits())
+    updateSpectraPlotsUnits()
+    watch(sourceUnits, ()=> updateSpectraPlotsUnits())
 
     return {}
   }

guiapp/src/components/RunSimulationSpectrum.vue

@@ -148,7 +148,7 @@ export default defineComponent({
           $store.commit('plotRuntime/updateNumberOfPlotsFromPreviousSimulations')
           $store.commit('plotRuntime/setCommonLabel', $store.state.simulationSetup.current.plotLabel)
           $store.commit('simulationSetup/setPlotLabel', '')
-          $store.commit('plotRuntime/updateSpectraPlot')
+          $store.commit('plotRuntime/updateSpectrumPlots')
         } catch (e) {
           console.log(e)
         }
@@ -184,8 +184,8 @@ export default defineComponent({
             '# plt.ylabel(\'Normalized cross-sections\')\n' +
             '# plt.show()\n\n'
         let xTitle = 'x'
-        if ( $store.state.plotRuntime.spectraPlot.layout.xaxis ) {
-          xTitle = String($store.state.plotRuntime.spectraPlot.layout.xaxis.title)
+        if ( $store.state.plotRuntime.spectrumPlots.layout.xaxis ) {
+          xTitle = String($store.state.plotRuntime.spectrumPlots.layout.xaxis.title)
         }
 
         let columnNames = '# ' + xTitle + ', Qsca, Qabs, Qext, '

guiapp/src/pages/Materials.vue

@@ -6,6 +6,8 @@
     <router-link to="/spectrum#GetSourceParametersHref"> <GetSourceParameters :is-info-mode="true"/> </router-link>
     <MaterialsActivated/>
     <div class="q-ma-xs"/>
+    <PlotMaterials/>
+    <div class="q-ma-xs"/>
   </q-page>
 </template>
 
@@ -17,6 +19,7 @@ import {
 import MaterialsSelector from 'components/MaterialsSelector.vue'
 import MaterialsActivated from 'components/MaterialsActivated.vue'
 import GetSourceParameters from 'components/GetSourceParameters.vue'
+import PlotMaterials from 'components/PlotMaterials.vue'
 // import { useStore } from 'src/store'
 
 
@@ -24,7 +27,7 @@ export default defineComponent({
   name: 'PageIndex',
   components: {
     MaterialsSelector, GetSourceParameters,
-    MaterialsActivated
+    MaterialsActivated, PlotMaterials
   },
 })
 </script>

guiapp/src/store/gui-runtime/actions.ts

@@ -76,7 +76,7 @@ const actions: ActionTree<guiRuntimeStateInterface, StateInterface> = {
     const spectrumRangeEnd = xs[xs.length-1]
     commit('addMaterial', {name:name,
       spectrumRangeStart:spectrumRangeStart, spectrumRangeEnd:spectrumRangeEnd,
-      nSpline:spline_n, kSpline:spline_k})
+      nSpline:spline_n, kSpline:spline_k, isPlot:false})
   },
 
 }

guiapp/src/store/gui-runtime/mutations.ts

@@ -29,6 +29,13 @@ const mutation: MutationTree<grsi> = {
     const indexToDelete = state.activatedMaterials.findIndex(val => val.name==label)
     state.activatedMaterials.splice(indexToDelete,1)
   },
+  // @click="$store.commit('guiRuntime/toggleIsPlot',
+  // props.row.name
+
+  toggleIsPlot(state: grsi, label: string) {
+    const indexToToggle = state.activatedMaterials.findIndex(val => val.name==label)
+    state.activatedMaterials[indexToToggle].isPlot = !state.activatedMaterials[indexToToggle].isPlot
+  },
 
 };
 

guiapp/src/store/gui-runtime/state.ts

@@ -20,9 +20,9 @@ function state(): guiRuntimeStateInterface {
     activatedMaterials: [
         // 'PEC',
       {name:'link',  spectrumRangeStart:0, spectrumRangeEnd:1e300,
-        nSpline: undefined, kSpline: undefined},
+        nSpline: undefined, kSpline: undefined, isPlot:false},
       {name:'nk-constant',  spectrumRangeStart:0, spectrumRangeEnd:1e300,
-        nSpline: undefined, kSpline: undefined},
+        nSpline: undefined, kSpline: undefined, isPlot:false},
     ]
   }
 }

guiapp/src/store/plot-runtime/mutations.ts

@@ -45,15 +45,15 @@ const mutation: MutationTree<prsi> = {
   },
 
   updateXAxisTitle (state:prsi, val:string) {
-    if (state.spectraPlot.layout.xaxis) state.spectraPlot.layout.xaxis.title = val
+    if (state.spectrumPlots.layout.xaxis) state.spectrumPlots.layout.xaxis.title = val
   },
 
   updateNumberOfPlotsFromPreviousSimulations(state: prsi) {
-    state.numberOfPlotsFromPreviousSimulations = state.spectraPlot.data.length
+    state.numberOfPlotsFromPreviousSimulations = state.spectrumPlots.data.length
   },
-  updateSpectraPlot (state: prsi) {
+  updateSpectrumPlots (state: prsi) {
     if (state.isRemovePlots) state.numberOfPlotsFromPreviousSimulations = 0
-    state.spectraPlot.data.length = state.numberOfPlotsFromPreviousSimulations
+    state.spectrumPlots.data.length = state.numberOfPlotsFromPreviousSimulations
 
     const label:string = state.commonLabel
     if (state.isPlotQscaTotal) {
@@ -63,7 +63,7 @@ const mutation: MutationTree<prsi> = {
         type: 'scatter',
         name: 'Qsca '+label
       }
-      state.spectraPlot.data.push(traceQsca)
+      state.spectrumPlots.data.push(traceQsca)
     }
 
     if (state.isPlotQabsTotal) {
@@ -73,7 +73,7 @@ const mutation: MutationTree<prsi> = {
         type: 'scatter',
         name: 'Qabs '+label
       }
-      state.spectraPlot.data.push(traceQabs)
+      state.spectrumPlots.data.push(traceQabs)
     }
 
     if (state.isPlotQextTotal) {
@@ -83,7 +83,7 @@ const mutation: MutationTree<prsi> = {
         type: 'scatter',
         name: 'Qext '+label
       }
-      state.spectraPlot.data.push(traceQext)
+      state.spectrumPlots.data.push(traceQext)
     }
 
     const typeNames = ['E', 'H']
@@ -100,7 +100,7 @@ const mutation: MutationTree<prsi> = {
             type: 'scatter',
             name: 'Qsca ' + typeNames[modeType] + ' ' + getModeName(mode_n + 1)+' '+label
           };
-          state.spectraPlot.data.push(traceQsca);
+          state.spectrumPlots.data.push(traceQsca);
         }
         if (state.isPlotQabs) {
           const traceQabs: Partial<Data> = {
@@ -109,7 +109,7 @@ const mutation: MutationTree<prsi> = {
             type: 'scatter',
             name: 'Qabs ' + typeNames[modeType] + ' ' + getModeName(mode_n + 1)+' '+label
           };
-          state.spectraPlot.data.push(traceQabs);
+          state.spectrumPlots.data.push(traceQabs);
         }
         if (state.isPlotQext) {
           const traceQext: Partial<Data> = {
@@ -118,7 +118,7 @@ const mutation: MutationTree<prsi> = {
             type: 'scatter',
             name: 'Qext ' + typeNames[modeType] + ' ' + getModeName(mode_n + 1)+' '+label
           };
-          state.spectraPlot.data.push(traceQext);
+          state.spectrumPlots.data.push(traceQext);
         }
       }
     }

guiapp/src/store/plot-runtime/state.ts

@@ -17,6 +17,7 @@ export interface spectraData {
 }
 
 export interface plotRuntimeStateInterface {
+  // Spectra plots
   WLs: number[]
   WLsInUnits: number[]
   Qsca:number[]
@@ -25,7 +26,7 @@ export interface plotRuntimeStateInterface {
   Qsca_n:number[][][]
   Qabs_n:number[][][]
   Qext_n:number[][][]
-  spectraPlot: plotlyChart
+  spectrumPlots: plotlyChart
   isPlotQsca: boolean
   isPlotQabs: boolean
   isPlotQext: boolean
@@ -57,7 +58,7 @@ function state(): plotRuntimeStateInterface {
   const numberOfPlotsFromPreviousSimulations = 0
   const commonLabel=''
 
-  const spectraPlot:plotlyChart = {
+  const spectrumPlots:plotlyChart = {
     data: [],
     layout: {
       margin: {
@@ -91,7 +92,7 @@ function state(): plotRuntimeStateInterface {
 
   return { WLs, WLsInUnits,
     Qsca, Qabs, Qext, Qsca_n, Qabs_n, Qext_n,
-    spectraPlot, isPlotQsca, isPlotQabs, isPlotQext,
+    spectrumPlots, isPlotQsca, isPlotQabs, isPlotQext,
     isPlotQscaTotal, isPlotQabsTotal, isPlotQextTotal,
     isPlotModeE, isPlotModeH,
     isRemovePlots, numberOfPlotsFromPreviousSimulations,

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

@@ -9,6 +9,7 @@ export interface material {
   spectrumRangeEnd:number|undefined
   nSpline: Spline|undefined
   kSpline: Spline|undefined
+  isPlot: boolean|undefined
 }
 
 export interface layer {
@@ -42,7 +43,7 @@ function setupFactory(hostIndex = 1,
                         {layerWidth:100, n:4, k:0.01,
                           material: {name:'nk-constant',
                             spectrumRangeStart:undefined, spectrumRangeEnd: undefined,
-                            nSpline: undefined, kSpline: undefined},
+                            nSpline: undefined, kSpline: undefined, isPlot:false},
                         },
                       ],
                       numberOfModesToPlot = 4,