add MaterialsActivated.vue table to Materials.vue

guiapp/src/components/GetParticleParameters.vue

@@ -72,7 +72,7 @@
         <div class="col-auto">
           <q-select
               v-model="layer.materialName"
-              :options="activatedMaterials"
+              :options="activatedMaterialsNames"
               :style="'width: '+basicWidthStyle"
               class="q-px-xs"
               dense
@@ -80,7 +80,31 @@
               outlined
               options-value="value"
               options-label="label"
-          />
+          >
+            <template #option="scope">
+              <span v-if="scope.opt =='link'">
+                <q-item v-bind="scope.itemProps"
+                        clickable
+                        to="/materials"
+                >
+                  <q-item-section side>
+                    <q-icon name="settings"/>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label >Manage materials...</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </span>
+              <span v-else>
+                <q-item v-bind="scope.itemProps" >
+                  <q-item-section>
+                    <q-item-label>{{ scope.opt }}</q-item-label>
+                    <!--                  <q-item-label caption>{{ scope.opt.description }}</q-item-label>-->
+                  </q-item-section>
+                </q-item>
+              </span>
+            </template>
+          </q-select>
         </div>
 
       </div>
@@ -125,8 +149,14 @@ export default defineComponent({
 
   setup() {
     const $store = useStore()
+
+    const numberOfLayers=ref($store.state.simulationSetup.gui.layers.length)
     const particleType=ref('bulk')
-    const numberOfLayers=ref(1)
+    if (numberOfLayers.value == 1) particleType.value='bulk'
+    if (numberOfLayers.value == 2) particleType.value='core-shell'
+    if (numberOfLayers.value == 3) particleType.value='multilayer'
+    // Initially we set numberOfLayers and particleType to match layers in store.
+    // Later on changes to numberOfLayers and particleType lead to update of layers in store.
 
     const isShowingHelpForInputWithUnits = computed({
       get: () => $store.state.guiRuntime.isShowingHelpForInputWithUnits,
@@ -139,26 +169,39 @@ export default defineComponent({
     })
 
     const activatedMaterials = computed(() => $store.state.guiRuntime.activatedMaterials)
+    const activatedMaterialsNames = computed(() => {
+      let list = activatedMaterials.value.map(x=>x.name)
+      list.push('link')
+      return list
+    })
 
-    function getReactiveLayers() {
-      return reactive( cloneDeep($store.state.simulationSetup.gui.layers) )
-    }
-
-    let layers = getReactiveLayers()
+    let layers = reactive( cloneDeep($store.state.simulationSetup.gui.layers) )
 
-    watch($store.state.simulationSetup.gui.layers, ()=>{
-      layers = getReactiveLayers()
-    })
+    watch($store.state.simulationSetup.gui.layers,
+        ()=>{
+          layers.splice(0, layers.length,
+              ...($store.state.simulationSetup.gui.layers.map(layer=>cloneDeep(layer)))
+          )
+          numberOfLayers.value = $store.state.simulationSetup.gui.layers.length
+        },
+        { deep: true }
+    )
 
-    watch(layers, ()=>{
-      const storeLayers = $store.state.simulationSetup.gui.layers
-      for (let i = 0; i<layers.length && i<storeLayers.length; i++) {
-        if (isAlmostSame(storeLayers[i].layerWidth, layers[i].layerWidth)) {
-          layers[i].layerWidth = storeLayers[i].layerWidth
-        }
-      }
-      $store.commit('simulationSetup/setLayers', layers)
-    })
+    watch(layers,
+        ()=>{
+          const storeLayers = $store.state.simulationSetup.gui.layers
+          for (let i = 0; i<layers.length && i<storeLayers.length; i++) {
+            if (isAlmostSame(storeLayers[i].layerWidth, layers[i].layerWidth)) {
+              layers[i].layerWidth = storeLayers[i].layerWidth
+            }
+            if (layers[i].materialName == 'link') {
+              layers[i].materialName = storeLayers[i].materialName
+            }
+          }
+          $store.commit('simulationSetup/setLayers', layers)
+        },
+        { deep: true }
+    )
 
     watch(particleType, ()=>{
       if (particleType.value=='bulk') numberOfLayers.value = 1
@@ -209,7 +252,7 @@ export default defineComponent({
       particleType,
       numberOfLayers, layers, getLayerTitle, getTooltipText,
       units, toUnits, fromUnits, isShowingHelpForInputWithUnits,
-      activatedMaterials
+      activatedMaterialsNames
       }
   },
 })

guiapp/src/components/MaterialsActivated.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="col-12 q-pa-md">
+    <q-table
+          :rows="activatedMaterials"
+          :columns="columns"
+          :rows-per-page-options="[0]"
+          hide-pagination
+          dense
+          title="Available materials"
+          title-class="text-h6"
+          row-key="name"
+      >
+
+      <template #header="props">
+        <q-tr :props="props">
+          <q-th auto-width/>
+          <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>
+        </q-tr>
+      </template>
+
+      <template #body="props">
+        <q-tr :props="props">
+
+
+          <q-td auto-width>
+            <span v-if="props.row.name!='nk-constant' && props.row.name!='PEC'">
+            <q-tooltip anchor="top start" self="bottom start" >
+              Delete from simulation</q-tooltip>
+            <q-btn size="sm" padding="5px" color="primary" round dense icon="delete"
+                   @click="deleteFromSimulation(props.row.name)"/>
+            </span>
+          </q-td>
+
+
+          <q-td auto-width class="">
+            {{composeLabelFromPageData(props.row.name)}}
+          </q-td>
+
+          <q-td auto-width>
+            <span v-if="props.row.name!='nk-constant' && props.row.name!='PEC'">
+            <q-tooltip
+                v-if="props.row.spectrumRangeStart>=fromWavelengthStore ||
+                 props.row.spectrumRangeEnd<=toWavelengthStore"
+                anchor="top middle" self="bottom middle"
+                class="bg-red">
+              Mismatch with spectrum simulation
+            </q-tooltip>
+            <span :class="props.row.spectrumRangeStart>=fromWavelengthStore?'text-red':'text-black'">
+              {{ props.row.spectrumRangeStart }}
+            </span>
+            <span v-if="props.row.spectrumRangeStart">&ndash;</span>
+            <span :class="props.row.spectrumRangeEnd<=toWavelengthStore?'text-red':'text-black'">
+              {{ props.row.spectrumRangeEnd }}
+            </span>
+            <span v-if="props.row.spectrumRangeStart">&NonBreakingSpace;nm</span>
+              </span>
+          </q-td>
+
+          <q-td class="">
+            <span v-if="props.row.name!='nk-constant' && props.row.name!='PEC'">
+              <span v-if="props.row.nSpline && props.row.kSpline">
+                <q-icon size='sm' color="green" name="done" />
+              </span>
+              <span v-else>
+                <q-icon size='xs' color="red" name="do_not_disturb" />
+              </span>
+            </span>
+          </q-td>
+
+        </q-tr>
+      </template>
+
+      </q-table>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  reactive,
+  watch
+} from 'vue'
+import { useStore } from 'src/store'
+import { composeLabelFromPageData } from 'components/utils'
+import { cloneDeep } from 'lodash'
+
+
+export default defineComponent({
+
+  name: 'MaterialsActivated',
+  components: {},
+
+  setup: function () {
+    const $store = useStore()
+
+    const fromWavelengthStore = computed(()=>$store.state.simulationSetup.gui.fromWL)
+    const toWavelengthStore = computed(()=>$store.state.simulationSetup.gui.toWL)
+
+    const columns = [
+      // do not change the order without updating the template
+      {name: 'spectrumRangeStart', label: 'RangeStart', field: 'spectrumRangeStart'},
+      {name: 'spectrumRangeEnd', label: 'RangeEnd', field: 'spectrumRangeEnd'},
+      {name: 'name', label: 'name', field: 'name'},
+      {name: 'fileFullPath', fileFullPath: 'fileFullPath', field: 'fileFullPath'},
+      {name: 'nSpline', nSpline: 'nSpline', field: 'nSpline'},
+      {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,
+      fromWavelengthStore, toWavelengthStore,
+      composeLabelFromPageData,
+      deleteFromSimulation(name:string) {
+        $store.commit('guiRuntime/deleteMaterial', name)
+      }
+    }
+  },
+})
+</script>

guiapp/src/components/MaterialsSelector.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="col-12 q-pa-md">
-
     <q-table
           :rows="rows"
           :columns="columns"
@@ -12,7 +11,6 @@
           title-class="text-h6"
           row-key="id"
       >
-
         <template #top>
           <div class="q-mr-md">
             <q-tooltip anchor="top end" self="center middle" >
@@ -21,9 +19,10 @@
             <q-icon size='sm' name="o_info" />
           </div>
 
-          <q-input v-model="filter" dense  debounce="300" color="primary" >
+          <q-input v-model="filter" dense  debounce="200" color="primary" >
+          <q-tooltip  v-if="!filter" anchor="top middle" self="center middle">filter by any string</q-tooltip>
             <template #append>
-              <q-icon name="search" />
+              <q-icon name="filter_alt" />
             </template>
             <template v-if="filter" #after>
               <q-btn  flat round dense icon="cancel" @click="filter=''"/>
@@ -53,7 +52,6 @@
             <q-btn size="sm" color="primary" round dense icon="add" @click="addToSimulation(props.row.id)"/>
           </q-td>
 
-
           <q-td auto-width>
             <q-tooltip anchor="top end" self="center middle" >
               Download *.yml file</q-tooltip>
@@ -100,51 +98,6 @@
         </q-tr>
       </template>
 
-      <template #pagination="scope">
-        <q-btn
-            v-if="scope.pagesNumber > 2"
-            icon="first_page"
-            color="grey-8"
-            round
-            dense
-            flat
-            :disable="scope.isFirstPage"
-            @click="scope.firstPage"
-        />
-
-        <q-btn
-            icon="chevron_left"
-            color="grey-8"
-            round
-            dense
-            flat
-            :disable="scope.isFirstPage"
-            @click="scope.prevPage"
-        />
-        {{scope.pagination.page}} of {{scope.pagesNumber}}
-
-        <q-btn
-            icon="chevron_right"
-            color="grey-8"
-            round
-            dense
-            flat
-            :disable="scope.isLastPage"
-            @click="scope.nextPage"
-        />
-
-        <q-btn
-            v-if="scope.pagesNumber > 2"
-            icon="last_page"
-            color="grey-8"
-            round
-            dense
-            flat
-            :disable="scope.isLastPage"
-            @click="scope.lastPage"
-        />
-      </template>
-
       </q-table>
   </div>
 </template>
@@ -158,7 +111,7 @@ import {
 } from 'vue'
 import { useStore } from 'src/store'
 import { load } from 'js-yaml'
-// import {fromUnits, isAlmostSame, toUnits} from "components/utils";
+import { composeLabelFromPageData } from 'components/utils'
 import { saveAs } from 'file-saver'
 
 
@@ -282,20 +235,12 @@ export default defineComponent({
 
     const filter = ref('')
 
-    function composeLabelFromPageData (val:string) {
-      const shelfName = val.slice(0, val.indexOf('/')+1)
-      return val.replace(shelfName, ''
-      ).replace('.yml',''
-      ).replace(new RegExp('[ ]', 'g'),'_'
-      ).replace(new RegExp('[/]', 'g'),'_')
-    }
-
-
     return {columns, rows, loading, filter,
       fromWavelengthStore, toWavelengthStore,
       composeLabelFromPageData,
       addToSimulation(val:number) {
         console.log(rows[val-1].pageData)
+        $store.commit('guiRuntime/activateMaterial', rows[val-1].pageData)
       },
       async downloadPageData(filepath:string) {
         const response = await fetch('refractiveindex.info-database/database/data/'+filepath)
@@ -311,4 +256,3 @@ export default defineComponent({
   },
 })
 </script>
-e

guiapp/src/components/utils.ts

@@ -1,3 +1,11 @@
+export function composeLabelFromPageData (val:string) {
+    const shelfName = val.slice(0, val.indexOf('/')+1)
+    return val.replace(shelfName, ''
+    ).replace('.yml',''
+    ).replace(new RegExp('[ /-]', 'g'),'_'
+    )
+}
+
 export function getModeName(i:number) {
     if (i == 1) return 'dipole'
     if (i == 2) return 'quadrupole'

guiapp/src/pages/Materials.vue

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

guiapp/src/pages/Near-field.vue

@@ -1,6 +1,10 @@
 <template>
   <q-page class="column q-px-md">
+<!--    <img src="https://www.pikpng.com/pngl/m/8-80773_new-content-coming-soon-website-under-construction-banner.png" alt="New Content Coming Soon - Website Under Construction">-->
+    <q-img src="underconstruction.jpg"  />
+    <div class="q-ma-sm"/>
     Under construction!
+
     <div class="q-ma-sm"/>
     <GetSourceParameters/>
     <GetHostIndex/>

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

@@ -1,11 +1,23 @@
 import { MutationTree } from 'vuex';
 import { guiRuntimeStateInterface as grsi} from './state';
+import { composeLabelFromPageData } from 'components/utils'
 
 const mutation: MutationTree<grsi> = {
   setIsShowingHelpForInputWithUnits (state: grsi, val: boolean) {state.isShowingHelpForInputWithUnits = val},
   setUnits             (state: grsi, val: string ) {state.units             = val},
   setSourceUnits       (state: grsi, val: string ) {state.sourceUnits       = val},
   setIsSourceSameUnits (state: grsi, val: boolean) {state.isSourceSameUnits = val},
+
+  activateMaterial(state: grsi, filepath: string) {
+    console.log(composeLabelFromPageData(filepath))
+    return {state, filepath}
+  },
+
+  deleteMaterial(state: grsi, label: string) {
+    const indexToDelete = state.activatedMaterials.findIndex(val => val.name==label)
+    state.activatedMaterials.splice(indexToDelete,1)
+  },
+
 };
 
 export default mutation;

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

@@ -1,9 +1,22 @@
+import Spline from 'cubic-spline-ts'
+
+// All numbers with units (e.g. size, radius, wavelength, e.g.) are given in nanometers.
+
+interface material {
+  name: string
+  fileFullPath:string,
+  spectrumRangeStart:number,
+  spectrumRangeEnd:number
+  nSpline: Spline|undefined
+  kSpline: Spline|undefined
+}
+
 export interface guiRuntimeStateInterface {
   isShowingHelpForInputWithUnits: boolean
   units: string
   sourceUnits: string
   isSourceSameUnits: boolean
-  activatedMaterials: string[]
+  activatedMaterials: material[]
 }
 
 function state(): guiRuntimeStateInterface {
@@ -14,7 +27,13 @@ function state(): guiRuntimeStateInterface {
     isSourceSameUnits: true,
     activatedMaterials: [
         // 'PEC',
-      'nk-constant']
+      {name:'nk-constant', fileFullPath:'', spectrumRangeStart:0, spectrumRangeEnd:1e300,
+        nSpline: undefined, kSpline: undefined},
+      {name:'Ag_McPeak', fileFullPath:'main/Ag/McPeak.yml', spectrumRangeStart:300, spectrumRangeEnd:1700,
+        nSpline: undefined, kSpline: undefined},
+      {name:'Au_McPeak', fileFullPath:'main/Au/McPeak.yml', spectrumRangeStart:300, spectrumRangeEnd:1700,
+        nSpline: undefined, kSpline: undefined},
+    ]
   }
 }
 

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

@@ -1,6 +1,8 @@
 import { cloneDeep } from 'lodash'
 import Spline from 'cubic-spline-ts'
 
+// All numbers with units (e.g. size, radius, wavelength, e.g.) are given in nanometers.
+
 export interface layer {
   layerWidth: number
   materialName: string