add total\modes selector to PlotSelector.vue

guiapp/src/components/GetPlotSettings.vue

@@ -23,7 +23,8 @@
       </div>
     </div>
   </div>
-  <div class="row items-center">
+  <div class="q-ma-xs"/>
+  <div class="row items-baseline">
     <div class="col-xs-12 col-sm-auto text-center q-px-md q-py-sm">
       <div :style="flexRowTitleStyle">
         <span class="text-weight-bold">Plot label</span> (optional)
@@ -36,15 +37,15 @@
                     :shadow-text="plotLabel=='' ? shadowText+' (Tab to complete)' : ''"
                     outlined
                     dense
-                    class="q-py-sm"
+                    class="q-py-xs"
                     :style="'width: '+basicWidthStyle"
                     @keydown="processInputFill"
                     @focus="processInputFill"
           />
         </div>
-        <div class="col-auto q-pa-sm">
-          <q-checkbox v-model="isAppendPlots" size="sm">
-            append new spectra to the plot
+        <div class="col-auto q-py-xs q-px-sm">
+          <q-checkbox v-model="isRemovePlots" size="sm">
+            remove previous spectra
           </q-checkbox>
         </div>
 
@@ -91,9 +92,12 @@ export default defineComponent({
       set: val => $store.commit('simulationSetup/setPlotLabel', val)
     })
 
-    const isAppendPlots = computed({
-      get: ()=> $store.state.plotRuntime.isAppendPlots,
-      set: val => $store.commit('plotRuntime/setIsAppendPlots', val)
+    const isRemovePlots = computed({
+      get: ()=> $store.state.plotRuntime.isRemovePlots,
+      set: val => {
+        $store.commit('plotRuntime/setIsRemovePlots', val)
+        $store.commit('plotRuntime/updateSpectraPlot')
+      }
     })
 
     const shadowText = computed(()=>{
@@ -115,7 +119,7 @@ export default defineComponent({
 
     return { flexRowTitleStyle, basicSelectorWidthStyle, basicWidthStyle,
       numberOfModesToPlot, maxModes,
-      plotLabel, isAppendPlots,
+      plotLabel, isRemovePlots,
       shadowText,
 
       processInputFill (e:KeyboardEvent) {

guiapp/src/components/PlotSelector.vue

@@ -1,13 +1,37 @@
 <template>
-  <div class="col-auto">
-    <div class="row justify-xs-center justify-sm-start items-baseline">
-      <q-toggle v-model="isPlotQsca" dense class="q-ml-md">Qsca</q-toggle>
-      <q-toggle v-model="isPlotQabs" dense class="q-ml-md">Qabs</q-toggle>
-      <q-toggle v-model="isPlotQext" dense class="q-ml-md">Qext</q-toggle>
+  <div class="row items-baseline">
+    <div class="col-xs-grow col-sm-auto q-px-sm">
+      <q-table
+              title="Values to plot"
+              title-class="text-h6"
+              :rows="rowsQ"
+              :columns="columnsQ"
+              hide-bottom
+              dense
+              flat
+              row-key="name"
+          >
+            <template #body="props">
+              <q-tr :props="props">
+                <q-th key="name" :props="props">
+                  {{ props.row.name }}
+                </q-th>
+                <template v-for="(val, index) in props.row" :key="index" :props="props">
+                  <q-td v-if="index!='name'">
+                    <q-checkbox
+                        v-model="props.row[index]"
+                        dense
+                    />
+                  </q-td>
+                </template>
+              </q-tr>
+            </template>
+          </q-table>
     </div>
-    <div class="q-ma-sm"/>
-    <div class="row justify-xs-center justify-sm-start items-baseline">
+    <div v-if="isPlotQabs||isPlotQsca||isPlotQext"  class="col-xs-grow col-sm-auto q-px-sm">
       <q-table
+          title="Modes to plot"
+          title-class="text-h6"
           :rows="rows"
           :columns="columns"
           hide-bottom
@@ -24,7 +48,6 @@
               <q-td v-if="index!='name'">
                 <q-checkbox
                     v-model="props.row[index.toString()]"
-                    size="sm"
                     dense
                     :disable="index>simulatedNumberOfModes"
                 />
@@ -46,6 +69,9 @@ import {
   } from 'vue'
 import { useStore } from 'src/store'
 import { cloneDeep } from 'lodash'
+import { flexRowTitleStyle,
+} from 'components/config'
+
 
 export default defineComponent({
   name: 'GetPlotSettings',
@@ -65,6 +91,55 @@ export default defineComponent({
       set: val => $store.commit('plotRuntime/setQextPlotToggle', val)
     })
 
+    const isPlotQscaTotal = computed({
+      get: () => $store.state.plotRuntime.isPlotQscaTotal,
+      set: val => $store.commit('plotRuntime/setQscaTotalPlotToggle', val)
+    })
+    const isPlotQabsTotal = computed({
+      get: () => $store.state.plotRuntime.isPlotQabsTotal,
+      set: val => $store.commit('plotRuntime/setQabsTotalPlotToggle', val)
+    })
+    const isPlotQextTotal = computed({
+      get: () => $store.state.plotRuntime.isPlotQextTotal,
+      set: val => $store.commit('plotRuntime/setQextTotalPlotToggle', val)
+    })
+
+    const columnsQ = computed(()=>{
+      return [
+        { name: 'name', label: '',  align: 'left', field: 'name', headerStyle:''},
+        { name: 'Qsca', label: 'Qsca',  align: 'left', field: 'Qsca', headerStyle:''},
+        { name: 'Qabs', label: 'Qabs',  align: 'left', field: 'Qabs', headerStyle:''},
+        { name: 'Qext', label: 'Qext',  align: 'left', field: 'Qext', headerStyle:''},
+      ]
+    })
+
+    const rowsQ_store = computed({
+    get: ()=>[
+        { name: 'total', Qsca: isPlotQscaTotal.value, Qabs: isPlotQabsTotal.value, Qext: isPlotQextTotal.value},
+        { name: 'modes', Qsca: isPlotQsca.value, Qabs: isPlotQabs.value, Qext: isPlotQext.value},
+    ],
+      set: val =>{
+        $store.commit('plotRuntime/setQscaTotalPlotToggle', val[0].Qsca)
+        $store.commit('plotRuntime/setQabsTotalPlotToggle', val[0].Qabs)
+        $store.commit('plotRuntime/setQextTotalPlotToggle', val[0].Qext)
+        $store.commit('plotRuntime/setQscaPlotToggle', val[1].Qsca)
+        $store.commit('plotRuntime/setQabsPlotToggle', val[1].Qabs)
+        $store.commit('plotRuntime/setQextPlotToggle', val[1].Qext)
+        // console.log(val)
+      }
+    })
+    const rowsQ = ref(rowsQ_store.value)
+    watch(rowsQ_store, ()=>{
+          rowsQ.value = rowsQ_store.value
+        },
+        { deep: true }
+    )
+    watch(rowsQ, ()=>{
+          rowsQ_store.value = rowsQ.value
+        },
+        { deep: true }
+    )
+
     const guiNumberOfModes = computed(()=> $store.state.simulationSetup.gui.numberOfModesToPlot)
     const simulatedNumberOfModes = computed(()=> $store.state.simulationSetup.current.numberOfModesToPlot)
 
@@ -133,9 +208,11 @@ export default defineComponent({
         { deep: true }
     )
 
-    return { isPlotQsca, isPlotQabs, isPlotQext,
+    return {flexRowTitleStyle,
+      isPlotQsca, isPlotQabs, isPlotQext,
       guiNumberOfModes, simulatedNumberOfModes,
-      columns, rows
+      columns, rows,
+      columnsQ, rowsQ
       }
   },
 })

guiapp/src/pages/Spectrum.vue

@@ -12,12 +12,12 @@
     <GetPlotSettings/>
     <div class="q-ma-xs"/>
     <RunSimulationSpectrum/>
-    <div class="col-auto q-pa-md">
-      Input result: {{$store.state.simulationSetup.gui.plotLabel}}
-    </div>
+<!--    <div class="col-auto q-pa-md">-->
+<!--      Input result: {{$store.state.plotRuntime.isPlotQabs}}-->
+<!--    </div>-->
     <div class="q-ma-sm"/>
     <PlotSelector/>
-    <div class="q-ma-xs"/>
+    <div class="q-ma-sm"/>
     <PlotSpectra/>
   </q-page>
 </template>

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

@@ -14,20 +14,13 @@ const mutation: MutationTree<prsi> = {
     state.Qext_n = cloneDeep(val.Qext_n)
   },
 
-  updateSpectraPlot (state: prsi) {
-    console.log('updating spectra plot...')
-    const traceQsca:Partial<Data> = {
-      x: state.WLs,
-      y: state.Qsca,
-      type: 'scatter',
-      name: 'Qsca'
-    }
-    state.spectraPlot.data.push(traceQsca)
-
-  },
   setQscaPlotToggle (state: prsi, val: boolean) {state.isPlotQsca = val},
   setQabsPlotToggle (state: prsi, val: boolean) {state.isPlotQabs = val},
   setQextPlotToggle (state: prsi, val: boolean) {state.isPlotQext = val},
+  setQscaTotalPlotToggle (state: prsi, val: boolean) {state.isPlotQscaTotal = val},
+  setQabsTotalPlotToggle (state: prsi, val: boolean) {state.isPlotQabsTotal = val},
+  setQextTotalPlotToggle (state: prsi, val: boolean) {state.isPlotQextTotal = val},
+  setIsRemovePlots (state:prsi, val:boolean) {state.isRemovePlots = val},
 
   resizeSelectorIsPlotMode (state:prsi, val:number) {
     while (state.isPlotModeE.length > val) state.isPlotModeE.pop();
@@ -35,7 +28,6 @@ const mutation: MutationTree<prsi> = {
     while (state.isPlotModeE.length < val) state.isPlotModeE.push(false);
     while (state.isPlotModeH.length < val) state.isPlotModeH.push(false);
   },
-
   setIsPlotModeE (state:prsi, val:boolean[]) {
     for (let i = 0; i< val.length; ++i) state.isPlotModeE[i] = val[i]
   },
@@ -43,7 +35,17 @@ const mutation: MutationTree<prsi> = {
     for (let i = 0; i< val.length; ++i) state.isPlotModeH[i] = val[i]
   },
 
-  setIsAppendPlots (state:prsi, val:boolean) {state.isAppendPlots = val},
+  updateSpectraPlot (state: prsi) {
+    console.log('updating spectra plot...')
+    const traceQsca:Partial<Data> = {
+      x: state.WLs,
+      y: state.Qsca,
+      type: 'scatter',
+      name: 'Qsca'
+    }
+    state.spectraPlot.data.push(traceQsca)
+
+  },
 
 }
 

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

@@ -28,9 +28,12 @@ export interface plotRuntimeStateInterface {
   isPlotQsca: boolean
   isPlotQabs: boolean
   isPlotQext: boolean
+  isPlotQscaTotal: boolean
+  isPlotQabsTotal: boolean
+  isPlotQextTotal: boolean
   isPlotModeE: boolean[]
   isPlotModeH: boolean[]
-  isAppendPlots: boolean
+  isRemovePlots: boolean
 }
 
 function state(): plotRuntimeStateInterface {
@@ -42,8 +45,11 @@ function state(): plotRuntimeStateInterface {
   const isPlotQsca = true
   const isPlotQabs = true
   const isPlotQext = false
-  const isPlotModeE:boolean[] = []
-  const isPlotModeH:boolean[] = []
+  const isPlotQscaTotal = true
+  const isPlotQabsTotal = true
+  const isPlotQextTotal = false
+  const isPlotModeE:boolean[] = [true]
+  const isPlotModeH:boolean[] = [true]
 
   const spectraPlot:plotlyChart = {
     data: [],
@@ -75,13 +81,14 @@ function state(): plotRuntimeStateInterface {
       // showEditInChartStudio: true,
       displaylogo: false}
   }
-  const isAppendPlots = false
+  const isRemovePlots = true
 
   return { WLs,
     Qsca, Qabs, Qext, Qsca_n, Qabs_n, Qext_n,
     spectraPlot, isPlotQsca, isPlotQabs, isPlotQext,
+    isPlotQscaTotal, isPlotQabsTotal, isPlotQextTotal,
     isPlotModeE, isPlotModeH,
-    isAppendPlots
+    isRemovePlots
   }
 }