add formating to near-field plot

guiapp/src/components/PlotNearField.vue

@@ -16,8 +16,9 @@ import {
   watch
 } from 'vue'
 // import { flexRowTitleStyle } from 'components/config'
+import { toUnits } from 'components/utils'
 import { plotlyChart } from 'src/store/plot-runtime/state'
-import { PlotData, /*, DataTitle*/ } from 'plotly.js-dist-min'
+import { PlotData, DataTitle } from 'plotly.js-dist-min'
 import {nearFieldPlane} from 'src/store/simulation-setup/state';
 
 
@@ -31,6 +32,7 @@ export default defineComponent({
     const nearFieldPlotInit:plotlyChart = {
       data: [],
       layout: {
+        shapes: [],
         margin: {
           l: 0,
           r: 40,
@@ -53,31 +55,68 @@ export default defineComponent({
 
     const nearFieldPlot = reactive(nearFieldPlotInit)
     const crossSection = computed(()=>$store.state.simulationSetup.current.nearFieldSetup.crossSection)
+    const relativePlotSize = computed(()=>$store.state.simulationSetup.current.nearFieldSetup.relativePlotSize)
+    const plotSideResolution = computed(()=>$store.state.simulationSetup.current.nearFieldSetup.plotSideResolution)
+    const layerWidths = computed(()=>$store.state.simulationSetup.current.layers.map(x=>x.layerWidth))
+    const totalR = computed(()=>layerWidths.value.reduce((a, b) => a + b, 0))
+    const x0 = computed(()=>totalR.value*relativePlotSize.value)
+    const dx = computed(()=>x0.value*2.0/(plotSideResolution.value-1))
+    const units = computed(()=>$store.state.guiRuntime.units)
+    const xy = computed(()=> {
+      let x:number[] = []
+      let y:number[] = []
+      for (let i = 0; i< plotSideResolution.value; ++i) {
+          x.push(toUnits(-x0.value + i*dx.value, units.value))
+          y.push(toUnits(-x0.value + i*dx.value, units.value))
+      }
+      return {x:x, y:y}
+    })
+
     const nearFieldEk = computed( ()=>$store.state.plotRuntime.nearFieldEk)
     const nearFieldHk = computed( ()=>$store.state.plotRuntime.nearFieldHk)
     const nearFieldEH = computed( ()=>$store.state.plotRuntime.nearFieldEH)
-    watch([nearFieldEk, nearFieldHk, nearFieldEH], ()=>{
+    watch([nearFieldEk, nearFieldHk, nearFieldEH, xy], ()=>{
       nearFieldPlot.data.length = 0
-      const heatMapSettings: Partial<PlotData> = {type: 'heatmap',  colorscale: 'Jet'}
+      const heatMapSettings: Partial<PlotData> = {type: 'heatmap',
+        colorscale: 'Jet', colorbar:{title:'|𝐸|∕|𝐸𝜊|'}
+      }
       let heatMapData: Partial<PlotData> = {}
       if (crossSection.value == nearFieldPlane.Ek) heatMapData  = { z: nearFieldEk.value}
       if (crossSection.value == nearFieldPlane.Hk) heatMapData  = { z: nearFieldHk.value}
       if (crossSection.value == nearFieldPlane.EH) heatMapData  = { z: nearFieldEH.value}
-      nearFieldPlot.data.push({...heatMapData, ...heatMapSettings})
+      nearFieldPlot.data.push({...xy.value, ...heatMapData, ...heatMapSettings})
 
+      if (nearFieldPlot.layout.shapes) {
+        nearFieldPlot.layout.shapes.length = 0
+        let r = 0
+        for (let widthLayer of layerWidths.value) {
+          r += widthLayer
+          nearFieldPlot.layout.shapes.push({
+            type: 'circle',
+            xref: 'x',
+            yref: 'y',
+            x0: toUnits(-r, units.value),
+            y0: toUnits(-r, units.value),
+            x1: toUnits(r, units.value),
+            y1: toUnits(r, units.value),
+            line: {
+              color: 'rgba(255, 255, 255, 0.7)',
+              width: 3
+            }
+          })
+        }
+      }
     })
-    // const xaxisTitle = computed(()=>{
-    //   let title:string|Partial<DataTitle> = ''
-    //   if ($store.state.plotRuntime.spectrumPlots.layout.xaxis?.title) {
-    //     title = $store.state.plotRuntime.spectrumPlots.layout.xaxis.title
-    //   }
-    //   return title
-    // })
-    // if (nearFieldPlot.layout.xaxis) nearFieldPlot.layout.xaxis.title = xaxisTitle.value
-    // watch( xaxisTitle, ()=>{
-    //   if (nearFieldPlot.layout.xaxis) nearFieldPlot.layout.xaxis.title = xaxisTitle.value
-    // })
-    //
+
+    const xaxisTitle = computed(()=>{
+      let title:string|Partial<DataTitle> = 'x ['+units.value+']'
+      return title
+    })
+    if (nearFieldPlot.layout.xaxis) nearFieldPlot.layout.xaxis.title = xaxisTitle.value
+    watch( xaxisTitle, ()=>{
+      if (nearFieldPlot.layout.xaxis) nearFieldPlot.layout.xaxis.title = xaxisTitle.value
+    })
+
     // const plotRange=ref('material data')
     // const isPlotReN = ref(true)
     // const isPlotImN = ref(true)
@@ -202,7 +241,7 @@ export default defineComponent({
     // onActivated(()=>updateSpectraPlot())
 
     return {
-      nearFieldPlot,
+      nearFieldPlot, totalR
 
     }
   }

guiapp/src/components/ShowNearFieldWarning.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <q-card v-if="showWarning">
+  <div v-if="count<2">
+    <q-card>
       <div class="q-pa-sm">
-      <div class="text-h6 q-ml-sm text-warning"><q-icon name="warning"/> Warning</div>
+      <div class="text-h6 q-ml-sm"><q-icon name="warning"/> Warning</div>
       <div class="q-ma-sm">Near-field evaluation is an experimental feature. In general, it provides a correct result. However, it is not as tested as spectrum computations, especially for the case of large, multilayer, and absorbing spheres. Please, verify the result before using it.</div>
       <div class="q-ma-xs"/>
       <div class="q-ml-sm text-h6"><q-icon size='sm' name="o_info"/> Usage</div>
@@ -14,7 +14,7 @@
                @click="void router.push({path: '/spectrum'})"/>
       <q-btn icon="close" flat text-color="primary"
                label="Close"
-               @click="showWarning=false"/>
+               @click="count=2"/>
       </div>
     </q-card>
     <div class="q-ma-md"/>
@@ -25,6 +25,7 @@
 import { useRouter } from 'vue-router'
 import {
   defineComponent,
+  onActivated,
   ref,
 } from 'vue'
 
@@ -32,8 +33,8 @@ export default defineComponent({
   name: 'ShowNearFieldWarning',
   setup () {
     const router = useRouter()
-    let showWarning = ref(true)
-
+    let count = ref(0)
+    onActivated(()=> { count.value = count.value + 1 })
     // import { useQuasar } from 'quasar'
     // const $q = useQuasar()
     // onActivated(()=>{
@@ -59,7 +60,7 @@ export default defineComponent({
     // })
     //
 
-    return { showWarning, router }
+    return { count, router }
   }
 })
 </script>

guiapp/src/pages/Near-field.vue

@@ -10,9 +10,9 @@
     <RunSimulationNearField/>
     <div class="q-ma-xs"/>
     <PlotNearField/>
-    <div class="col-auto">
-      Input result: {{$store.state.simulationSetup.gui.nearFieldSetup.plotSideResolution}}
-    </div>
+<!--    <div class="col-auto">-->
+<!--      Input result: {{$store.state.simulationSetup.gui.nearFieldSetup.plotSideResolution}}-->
+<!--    </div>-->
 
     <div class="q-ma-lg"/>
     <!-- place QPageScroller at end of page -->