add GetWLFromPlot.vue

guiapp/quasar.conf.js

@@ -120,7 +120,7 @@ module.exports = configure(function (ctx) {
 
       // Quasar plugins
       plugins: [
-        'Loading'
+        'Loading','Notify'
       ],
       config: {
         loading: { /* look at QuasarConfOptions from the API card */ }

guiapp/src/components/GetWlFromPlot.vue

@@ -1,45 +1,130 @@
 <template>
   <div>
+    <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"> Source plane wave </div>
+      </div>
+      <div class="col-xs-grow col-sm">
+        <div class="row justify-xs-center justify-sm-start items-baseline">
+
+          <div class="col-auto"><input-with-units
+              v-model:input-result="currentWavelengthInSourceUnits"
+              v-model:is-showing-help="isShowingHelpForInputWithUnits"
+              :initial-expression="currentWavelengthInSourceUnits.toString()"
+              :units="sourceUnits"
+              title="at"
+          /></div>
+          <div class="col-auto"> or <span class="text-bold">click on plot</span> below to select data point</div>
+
+        </div>
+      </div>
+    </div>
+    <div class="q-ma-xs"/>
     <ReactiveChart
-        :chart="$store.state.plotRuntime.spectrumPlots"
-                   @settingID="mangeID($event)"/>
+        :chart="chartContent"
+        :window-height-share="0.4"
+        @plotCreated="mangeID($event)"
+    />
   </div>
 </template>
 
 <script lang="ts">
 import ReactiveChart from 'components/ReactiveChart.vue'
 import { useStore } from 'src/store'
+import { useRouter } from 'vue-router'
 import {
   defineComponent,
   computed,
+    onActivated
   // watch,
-    ref,
+  //   ref,
 } from 'vue'
 import { fromUnits, toUnits } from 'components/utils'
+import InputWithUnits from 'components/InputWithUnits.vue'
+import { flexRowTitleStyle } from 'components/config'
+
+import { PlotlyHTMLElement } from 'plotly.js-dist-min'
+import { cloneDeep } from 'lodash'
+import { useQuasar } from 'quasar'
 
 
 export default defineComponent({
   name: 'GetWlFromPlot',
   components: {
-    ReactiveChart,
+    ReactiveChart, InputWithUnits
   },
   setup () {
+    const $q = useQuasar()
+    const router = useRouter()
+
+    let count = 0
+    onActivated(()=>{
+      if (count < 2) {
+        $q.notify({
+          message: 'Near-field simulation uses settings from spectrum simulation.',
+          multiLine: true,
+          position: 'top-right',
+          icon: 'o_info',
+          progress: true,
+          color: 'white',
+          textColor: 'black',
+          actions: [
+            { icon: 'settings', label: 'Change spectrum settings', color: 'primary',
+              handler: () => { void router.push({path: '/spectrum'}) } },
+            { icon: 'close', label: 'Close', color: 'primary'},
+
+          ],
+          timeout: 10000
+        })
+        count += 1
+      }
+    })
+
     const $store = useStore()
-    const chartID = ref('')
 
     const sourceUnits = computed( ()=>$store.state.guiRuntime.sourceUnits)
+    const isShowingHelpForInputWithUnits = computed({
+      get: () => $store.state.guiRuntime.isShowingHelpForInputWithUnits,
+      set: val => $store.commit('guiRuntime/setIsShowingHelpForInputWithUnits', val)
+    })
+
 
     const currentWavelengthInSourceUnits = computed({
       get: () => toUnits($store.state.simulationSetup.gui.nearFieldWL, sourceUnits.value),
-      set: val => $store.commit('simulationSetup/setFarFieldWL', fromUnits(sourceUnits.value, val))
+      set: val => $store.commit('simulationSetup/setNearFieldWL', fromUnits(sourceUnits.value, val))
     })
 
-    function mangeID(val:string) {
-      chartID.value = val
-      console.log(val)
+    const chartContent = computed( ()=>{
+      let content = cloneDeep($store.state.plotRuntime.spectrumPlots)
+      if (content.layout.yaxis) content.layout.yaxis.title = 'Cross-section'
+      content.layout['shapes'] = [{
+        type: 'line',
+        x0: currentWavelengthInSourceUnits.value,
+        y0: 0,
+        x1: currentWavelengthInSourceUnits.value,
+        yref: 'paper',
+        y1: 1,
+        line: {
+          color: 'red',
+          width: 1.5,
+          dash: 'dot'
+        }
+      }]
+      return content
+    })
+    function mangeID(chartID:string) {
+      const myPlot = document.getElementById(chartID) as PlotlyHTMLElement
+      myPlot.on('plotly_click', function(data){
+        for(let i=0; i < data.points.length; i++){
+          let val = data.points[i].x
+          if (val) currentWavelengthInSourceUnits.value = parseFloat(val.toString())
+        }
+      })
     }
-    return {currentWavelengthInSourceUnits,
-      mangeID, chartID
+    return {currentWavelengthInSourceUnits, sourceUnits,
+      chartContent, flexRowTitleStyle, isShowingHelpForInputWithUnits,
+      mangeID
 
     }
   }

guiapp/src/components/ReactiveChart.vue

@@ -23,26 +23,34 @@ export default defineComponent({
       type: Object as PropType<plotlyChart>,
       required: true,
     },
-  },
+    windowWidthShare: {
+      type: Number,
+      required:false,
+      default: 1
+    },
+    windowHeightShare: {
+      type: Number,
+      required:false,
+      default: 0.8
+    },  },
   emits: [
-    'settingID',
+    'plotCreated'
   ],
 
   setup(props, {emit}) {
     const chartUUID = uuidv4()
     // const chartUUID = 'plotly chart'
-    emit('settingID', chartUUID)
     let chartLocal = cloneDeep(props.chart)
 
     // Update (or add if absent) width and height of the layout to fit current window
     // and replot it.
     function plotlyReact () {
       if (!document.getElementById(chartUUID)) return
-      const width = window.innerWidth
-      const height = window.innerHeight*0.8
+      const width = window.innerWidth*props.windowWidthShare
+      const height = window.innerHeight*props.windowHeightShare
       chartLocal.layout.width = width * 0.92
       chartLocal.layout.height = height * 0.95
-      if (height < 600) chartLocal.layout.height = height
+      if (height < 400) chartLocal.layout.height = height
 
       // react(...) is a promise, but we do not care to await it, so mark it with `void` keyword
       if (chartLocal.config == undefined) {
@@ -61,6 +69,7 @@ export default defineComponent({
     }
     onMounted( () => {
       plotlyNew()
+      emit('plotCreated', chartUUID)
     })
 
     window.addEventListener('resize', plotlyReact)

guiapp/src/components/RunSimulationSpectrum.vue

@@ -174,11 +174,14 @@ export default defineComponent({
 
     onActivated(()=>{
       if (isNmieLoaded.value) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        // eslint-disable-next-line
-        const data_x_length = $store.state.plotRuntime.spectrumPlots.data[0].x.length
-        if (!data_x_length) runSpectrumSimulation()
+        if ($store.state.plotRuntime.spectrumPlots.data.length == 0) runSpectrumSimulation()
+        else {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          // eslint-disable-next-line
+          const data_x_length = $store.state.plotRuntime.spectrumPlots.data[0].x.length
+          if (!data_x_length) runSpectrumSimulation()
+        }
       }
     })
 

guiapp/src/pages/Near-field.vue

@@ -1,6 +1,8 @@
 <template>
   <q-page class="column q-px-md">
     <div class="q-ma-md"/>
+    <RunSimulationSpectrum v-show="false"/>
+
     <GetWlFromPlot/>
     <div class="col-auto">
       Input result: {{$store.state.simulationSetup.gui.nearFieldWL}}
@@ -17,12 +19,14 @@ import {
   defineComponent
 } from 'vue'
 import GetWlFromPlot from 'components/GetWlFromPlot.vue'
+import RunSimulationSpectrum from 'components/RunSimulationSpectrum.vue'
+
 // import { useStore } from 'src/store'
 
 
 export default defineComponent({
   name: 'NearField',
-  components: {GetWlFromPlot
+  components: {GetWlFromPlot, RunSimulationSpectrum
   },
   setup() {
 

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

@@ -73,7 +73,7 @@ function state(): plotRuntimeStateInterface {
       // title: 'reactive charts',
       xaxis: {
         // will be set on mount
-        title: ''
+        title: 'Wavelength, nm'
       },
       yaxis: {
         title: 'Normalized cross-sections'
@@ -81,8 +81,8 @@ function state(): plotRuntimeStateInterface {
       showlegend: true,
       legend: {
         orientation: 'h',
-        x: -.1,
-        y: 1.05
+        x: -.15,
+        y: 1.12
       },
     },
     config: {responsive: true,

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

@@ -39,8 +39,8 @@ 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},
-  setNearFieldWL    (state: sssi, val: number) {state.gui.nearFieldWL    = val},
-  setFarFieldWL    (state: sssi, val: number) {state.gui.farFieldWL    = val},
+  setNearFieldWL   (state: sssi, val: number) { state.gui.nearFieldWL = val},
+  setFarFieldWL    (state: sssi, val: number) { state.gui.farFieldWL  = val},
   setNumberOfModesToPlot  (state: sssi, val: number) {state.gui.numberOfModesToPlot  = val},
   setPlotLabel (state: sssi, val: string) {state.gui.plotLabel = val},