add log scale and colormap choice for near-field heatmap

guiapp/quasar.conf.js

@@ -54,12 +54,14 @@ module.exports = configure(function (ctx) {
       publicPath:
         process.env.NODE_ENV === 'development'
           ? '/'
-          : '/themes/custom/physics/mie-next/', // deploy path in Drupal setup at physics.ifmo.ru
+          : '/themes/custom/physics/mie/', // deploy path in Drupal setup at physics.ifmo.ru
+      // : '/themes/custom/physics/mie-next/', // deploy path in Drupal setup at physics.ifmo.ru
 
       env: {
         // copy publicPath from above build.publicPath to make it available from inside of the app.
         // publicPath: '/',
-        publicPath: ctx.dev ? '/' : '/themes/custom/physics/mie-next/', //  deploy path in Drupal setup at physics.ifmo.ru
+        publicPath: ctx.dev ? '/' : '/themes/custom/physics/mie/', //  deploy path in Drupal setup at physics.ifmo.ru
+        // publicPath: ctx.dev ? '/' : '/themes/custom/physics/mie-next/', //  deploy path in Drupal setup at physics.ifmo.ru
       },
       // extendWebpack (cfg, { isServer, isClient }) {
       //   cfg.module.rules.push({

guiapp/src/components/InputWithUnits.vue

@@ -40,6 +40,7 @@
             options-dense
             :style="'width: ' + inputWithUnitsBodyWidthStyle"
             use-input
+            input-class="q-pl-xs"
             behavior="menu"
             @filter="filterQSelectOptions"
             @blur="handleQSelectBlur"
@@ -48,7 +49,7 @@
           >
             <template v-if="isError" #prepend>
               <q-tooltip> Input conflict </q-tooltip>
-              <q-icon name="error" class="text-warning" />
+              <q-icon name="error" class="text-warning q-pl-xs" />
             </template>
             <template
               v-if="isShowingTooltipAppend && !isShowingTooltip"

guiapp/src/components/nearfield/GetNearFieldColorScale.vue

@@ -2,7 +2,7 @@
   <div class="row items-baseline">
     <div class="col-xs-12 col-sm-auto text-center q-px-md q-py-sm">
       <div :style="flexRowTitleStyle">
-        |&thinsp;𝐸&thinsp;|&emsp13;∕&emsp13;|&thinsp;𝐸𝜊&thinsp;| limits
+        |&thinsp;𝐸&thinsp;|&emsp13;∕&emsp13;|&thinsp;𝐸𝜊&thinsp;|
       </div>
     </div>
     <div class="col-xs-grow col-sm">
@@ -38,10 +38,50 @@
       </div>
     </div>
   </div>
+  <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"></div>
+    </div>
+    <div class="col-xs-grow col-sm">
+      <div class="row justify-xs-center justify-sm-start items-center">
+        <div class="col-auto">
+          <q-checkbox v-model="isLogColorscale" size="sm">
+            use log scale
+          </q-checkbox>
+        </div>
+        <div class="col-auto q-mx-sm">
+          <q-select
+            v-model="colorscale"
+            :options="colorscaleOptions"
+            options-dense
+            outlined
+            dense
+          />
+        </div>
+        <div class="col-auto">
+          <q-checkbox v-model="moreColors" size="sm">
+            use more colors
+          </q-checkbox>
+        </div>
+        <div class="col-auto q-px-sm">
+          <q-tooltip anchor="top middle" self="center middle">
+            more on color preception
+            <q-icon name="launch" />
+          </q-tooltip>
+          <a
+            href="https://www.semanticscholar.org/paper/Why-We-Use-Bad-Color-Maps-and-What-You-Can-Do-About-Moreland/028423bb486b2a963ee6a330ea5cceab467a5349"
+          >
+            <q-icon name="o_info" size="sm" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, watch, computed } from 'vue';
+import { defineComponent, watch, computed, ref } from 'vue';
 import { useStore } from 'src/store';
 import InputWithUnits from 'components/InputWithUnits.vue';
 import { flexRowTitleStyle } from 'components/config';
@@ -53,6 +93,34 @@ export default defineComponent({
   setup() {
     const $store = useStore();
 
+    const colorscale = computed({
+      get: () => $store.state.guiRuntime.colorscale,
+      set: (val) => $store.commit('guiRuntime/setColorscale', val),
+    });
+
+    const isLogColorscale = computed({
+      get: () => $store.state.guiRuntime.isLogColorscale,
+      set: (val) => $store.commit('guiRuntime/setIsLogColorscale', val),
+    });
+
+    const moreColors = ref(false);
+    const basicColors = ['Jet', 'Portland', 'Hot', 'Greys', 'Greens'];
+    const additionalColors = [
+      'YlOrRd',
+      'YlGnBu',
+      'RdBu',
+      'Electric',
+      'Earth',
+      'Picnic',
+      'Bluered',
+      'Blackbody',
+    ];
+
+    const colorscaleOptions = computed(() => {
+      if (moreColors.value) return [...basicColors, ...additionalColors];
+      return basicColors;
+    });
+
     const isShowingHelpForInputWithUnits = computed({
       get: () => $store.state.guiRuntime.isShowingHelpForInputWithUnits,
       set: (val) =>
@@ -90,6 +158,10 @@ export default defineComponent({
         limitTo.value = dataTo.value;
         limitFrom.value = dataFrom.value;
       },
+      colorscale,
+      moreColors,
+      colorscaleOptions,
+      isLogColorscale,
     };
   },
 });

guiapp/src/components/nearfield/PlotNearField.vue

@@ -126,6 +126,9 @@ export default defineComponent({
     );
     const limitTo = computed(() => $store.state.plotRuntime.nearFieldLimitTo);
 
+    const dataFrom = computed(() => $store.state.plotRuntime.nearFieldDataFrom);
+    const dataTo = computed(() => $store.state.plotRuntime.nearFieldDataTo);
+
     const nearFieldStore = computed(() => {
       let nearFieldStoreLocal = $store.state.plotRuntime.nearFieldEabs;
       $store.commit(
@@ -146,19 +149,58 @@ export default defineComponent({
       );
       return nearFieldStoreLocal;
     });
+    const isLogColorscale = computed(
+      () => $store.state.guiRuntime.isLogColorscale
+    );
     const nearFieldProc = computed(() => {
       if (!nearFieldStore.value) return nearFieldStore.value;
-      return limitMap(nearFieldStore.value, limitFrom.value, limitTo.value);
+      const nearFieldLimited = limitMap(
+        nearFieldStore.value,
+        limitFrom.value,
+        limitTo.value
+      );
+      if (!isLogColorscale.value) return nearFieldLimited;
+      return nearFieldLimited.map((x) => Math.log10(x));
       // return nearFieldStore.map(x=>x>limitTo.value?limitTo.value:x)
     });
-    watch([nearFieldProc, xy], () => {
+
+    const colorscale = computed(() => $store.state.guiRuntime.colorscale);
+
+    watch([nearFieldProc, xy, colorscale], () => {
       nearFieldPlot.data.length = 0;
-      const heatMapSettings: Partial<PlotData> = {
+      let heatMapSettings: Partial<PlotData> = {
         type: 'heatmap',
-        colorscale: 'Jet',
+        colorscale: colorscale.value,
         colorbar: { title: '|𝐸|∕|𝐸𝜊|' },
         z: nearFieldProc.value,
       };
+      if (isLogColorscale.value) {
+        const steps = 4;
+        const valFrom = Math.log10(
+          limitFrom.value > dataFrom.value ? limitFrom.value : dataFrom.value
+        );
+        const valTo = Math.log10(
+          limitTo.value < dataTo.value ? limitTo.value : dataTo.value
+        );
+        const logStep = (valTo - valFrom) / steps;
+
+        let tickvals = [];
+        for (let i = 0; i < steps; ++i) {
+          let val = valFrom + i * logStep;
+          tickvals.push(val);
+        }
+        tickvals.push(valTo);
+
+        let ticktext = [];
+        for (let val of tickvals) ticktext.push(Math.pow(10, val).toFixed(2));
+
+        heatMapSettings.colorbar = {
+          title: '|𝐸|∕|𝐸𝜊|',
+          tickmode: 'array',
+          tickvals: tickvals,
+          ticktext: ticktext,
+        };
+      }
       nearFieldPlot.data.push({ ...xy.value, ...heatMapSettings });
 
       const isPlotShapes =

guiapp/src/components/nearfield/ShowNearFieldWarning.vue

@@ -1,13 +1,15 @@
 <template>
   <div v-if="count < 2">
-    <q-card>
+    <q-card style="max-width: 40em">
       <div class="q-pa-sm">
         <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.
+          provides a correct result. However, it is not as well tested as
+          spectrum computations, especially for the case of large, multilayer,
+          and absorbing spheres. <br />
+          <br />
+          Please, verify the result before using it.
         </div>
         <div class="q-ma-xs" />
         <div class="q-ml-sm text-h6">

guiapp/src/index.template.html

@@ -81,6 +81,8 @@
       .container {
           padding-left: unset;
           padding-right: unset;
+          margin-left: unset;
+          margin-right: unset;
       }
       .q-page-scroller {
           z-index: 1;

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

@@ -21,6 +21,13 @@ const mutation: MutationTree<grsi> = {
   setPlotRatioLabel(state: grsi, val: string) {
     state.plotRatioLabel = val;
   },
+  setColorscale(state: grsi, val: string) {
+    state.colorscale = val;
+  },
+  setIsLogColorscale(state: grsi, val: boolean) {
+    state.isLogColorscale = val;
+  },
+
   setIsSaveWithPythonScript(state: grsi, val: boolean) {
     state.isSaveWithPythonScript = val;
   },

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

@@ -14,6 +14,8 @@ export interface guiRuntimeStateInterface {
   isAutoRefineNearField: boolean;
   plotRatio: number;
   plotRatioLabel: string;
+  colorscale: string;
+  isLogColorscale: boolean;
   nearFieldZoom: { fromX: number; toX: number; fromY: number; toY: number };
 }
 
@@ -30,6 +32,8 @@ function state(): guiRuntimeStateInterface {
     isAutoRefineNearField: true,
     plotRatio: 1,
     plotRatioLabel: 'fixed',
+    colorscale: 'Jet',
+    isLogColorscale: false,
     activatedMaterials: [
       // 'PEC',
       {