webapp (#40)

* [webapp] initial support field evaluations

* update info note

vue-cli3-webapp/go.sh

@@ -1,9 +1,10 @@
 #!/bin/bash
-cd ..
-make wasm
-cd vue-cli3-webapp
-cp ../nmiejs.js src
-cp ../nmiejs.wasm public
+#cd ..
+#make wasm
+#cd vue-cli3-webapp
+#cp ../nmiejs.js src
+#cp ../nmiejs.wasm public
 #npm install
 #npm audit fix
 npm run serve
+npm run serve

vue-cli3-webapp/package.json

@@ -15,7 +15,9 @@
     "core-js": "^3.10.0",
     "cubic-spline": "^3.0.3",
     "js-yaml": "^3.14.1",
+    "mathjs": "^9.4.1",
     "plotly.js": "^1.58.4",
+    "vuex": "^3.6.2",
     "vue": "^2.6.12"
   },
   "devDependencies": {

vue-cli3-webapp/src/App.vue

@@ -197,8 +197,8 @@
           simulationSetup: {
             hostIndex: 1,
             stepWL: 2,
-            fromWL: 300.0,
-            toWL: 1000.0,
+            fromWL: "100*(1+2)",
+            toWL: 1000,
             layers: [
               {
                 R: 100.0,
@@ -505,17 +505,19 @@
                   }, 20);
         },
       runMie: function () {
+        const math = require('mathjs')
+
         this.simulationRuntime.r_units = this.units;
         this.simulationRuntime.r_source_units = this.source_units;
-        this.simulationRuntime.fromWL = this.simulationSetup.fromWL;
-        this.simulationRuntime.toWL = this.simulationSetup.toWL;
+        this.simulationRuntime.fromWL = math.evaluate(this.simulationSetup.fromWL);
+        this.simulationRuntime.toWL = math.evaluate(this.simulationSetup.toWL);
         this.simulationRuntime.stepWL = this.simulationSetup.stepWL;
         this.simulationRuntime.layers =this.simulationSetup.layers; // TODO: not a copy, but we need spline_n.at() method in every layer.
 
         let t0 = performance.now();
-        let fromWL = parseFloat(this.simulationSetup.fromWL);
-        let toWL = parseFloat(this.simulationSetup.toWL);
-        let stepWL = parseFloat(this.simulationSetup.stepWL);
+        let fromWL = parseFloat(this.simulationRuntime.fromWL);
+        let toWL = parseFloat(this.simulationRuntime.toWL);
+        let stepWL = parseFloat(this.simulationRuntime.stepWL);
         let host = parseFloat(this.simulationSetup.hostIndex);
 
 
@@ -613,49 +615,6 @@
         this.changes++;
 
       },
-      filterBug: function () {
-        let Qsca = this.simulationRuntime.Qsca;
-        let Qabs = this.simulationRuntime.Qabs;
-        let Qext = this.simulationRuntime.Qext;
-        let Qsca_n = this.simulationRuntime.Qsca_n;
-        let Qabs_n = this.simulationRuntime.Qabs_n;
-        let total_mode_n = this.simulationSetup.total_mode_n;
-        for (let mode_type = 0; mode_type < 2; mode_type++) {
-          for (let n = 0; n < total_mode_n; n++){
-            this.filterMedian(Qsca_n[mode_type][n]);
-            this.filterMedian(Qabs_n[mode_type][n]);
-          }
-        }
-        this.filterMedian(Qsca);
-        this.filterMedian(Qabs);
-        for (let i = 0; i < Qsca.length; i++) {
-          Qext[i] = Qsca[i] + Qabs[i];
-        }
-        // this.filterMedian(Qext);
-
-        this.simulationRuntime.Qsca = Qsca;
-        this.simulationRuntime.Qabs = Qabs;
-        this.simulationRuntime.Qext = Qext;
-        this.simulationRuntime.Qsca_n = Qsca_n;
-        this.simulationRuntime.Qabs_n = Qabs_n;
-
-      },
-      filterMedian: function(spectra) {
-        let l = spectra.length;
-        let i;
-        for (i = 1; i < l-1; i++) {
-          let prev = spectra[i-1];
-          let curr = spectra[i];
-          let next = spectra[i+1];
-          let diff1 = Math.abs((prev-curr)/curr);
-          let diff2 = Math.abs((next-curr)/curr);
-          if (diff1 > 0.3 && diff2 > 0.3) {
-            spectra[i] = (prev+next)/2.0;
-          }
-           // console.log(spectra(i));
-        }
-        // return spectra;
-      },
       setIsPlotMode: function () {
           let total_mode_n = this.simulationSetup.total_mode_n;
           total_mode_n++;
@@ -837,7 +796,7 @@
   .add_padding {
     padding: 1rem;
   }
-  // Custom styles to build into the design of physics.ifmo.ru
+  // Custom styles to build into the design of physics.itmo.ru
   // npm run build && ./deploy.sh  && xclip -sel c < dist/index.html
   .content table {
     width: auto;

vue-cli3-webapp/src/components/GetSourceParameters.vue

@@ -35,79 +35,90 @@
 </template>
 
 <script>
-    import InputWithUnits from "./InputWithUnits.vue";
-    export default {
-        name: "GetSourceParameters",
-        components: {
-            InputWithUnits
-        },
-        data () {
-            return {
-                // TODO: Is it OK to modify Local later?
-                fromWLLocal: this.fromWL,
-                toWLLocal: this.toWL,
-                stepWLLocal: this.stepWL,
-                pointsNum: 100,
-                isStep: true
-            }
-        },
-        methods: {
+import InputWithUnits from "./InputWithUnits.vue";
+export default {
+  name: "GetSourceParameters",
+  components: {
+    InputWithUnits
+  },
+  data () {
+    return {
+      // TODO: Is it OK to modify Local later?
+      fromWLLocal: this.fromWL,
+      toWLLocal: this.toWL,
+      stepWLLocal: this.stepWL,
+      pointsNum: 100,
+      isStep: true
+    }
+  },
+  methods: {
 
+  },
+  watch: {
+    isStep: {
+      handler: function () {
+        if (this.isStep) {
+          this.stepWLLocal = (this.toWLLocal-this.fromWLLocal)/this.pointsNum;
+        } else {
+          this.pointsNum = parseInt(Math.round((this.toWLLocal-this.fromWLLocal)/this.stepWLLocal));
+        }
+      }
+    },
+    // emit updated values
+    fromWLLocal: {
+      handler: function () {
+        this.fromWLLocal = parseFloat(this.fromWLLocal);
+        this.stepWLLocal = (this.toWLLocal-this.fromWLLocal)/this.pointsNum;
+        // if (this.fromWLLocal > this.toWLLocal) {
+        //     this.fromWLLocal = this.toWLLocal;
+        // }
+        this.$emit('fromWLData',this.fromWLLocal);
+      }
+    },
+    toWLLocal: {
+      handler: function () {
+        this.toWLLocal = parseFloat(this.toWLLocal);
+        this.stepWLLocal = (this.toWLLocal-this.fromWLLocal)/this.pointsNum;
+        // if (this.toWLLocal < this.fromWLLocal) {
+        //     this.toWLLocal = this.fromWLLocal;
+        // }
+        this.$emit('toWLData',this.toWLLocal);
+      }
+    },
+    pointsNum: {
+      handler: function () {
+        this.pointsNum = parseInt(this.pointsNum);
+        this.stepWLLocal = (this.toWLLocal - this.fromWLLocal) / this.pointsNum;
+      }
+    },
+    stepWLLocal: {
+      handler: function () {
+        this.$emit('stepWLData',this.stepWLLocal);
+        this.pointsNum = parseInt(Math.round((this.toWLLocal-this.fromWLLocal)/this.stepWLLocal));
+      }
+    },
+    // update local values
+    fromWL: {
+      handler: function () {
+        this.fromWLLocal = this.fromWL;
+      }
+    },
+    toWL: {
+      handler: function () {
+        this.toWLLocal = this.toWL;
+      }
+    },
+    stepWL: {
+      handler: function () {
+        this.stepWLLocal = this.stepWL;
+        this.pointsNum = parseInt(Math.round((this.toWLLocal-this.fromWLLocal)/this.stepWLLocal));
+
+      }
+    },
+    deep: true
         },
-        watch: {
-            isStep: {
-                handler: function () {
-                    if (this.isStep) {
-                        this.stepWLLocal = (this.toWLLocal-this.fromWLLocal)/this.pointsNum;
-                    } else {
-                        this.pointsNum = Math.round((this.toWLLocal-this.fromWLLocal)/this.stepWLLocal);
-                    }
-                }
-            },
-            // emit updated values
-            fromWLLocal: {
-                handler: function () {
-                    this.fromWLLocal = parseFloat(this.fromWLLocal);
-                    // if (this.fromWLLocal > this.toWLLocal) {
-                    //     this.fromWLLocal = this.toWLLocal;
-                    // }
-                    this.$emit('fromWLData',this.fromWLLocal);
-                }
-            },
-            toWLLocal: {
-                handler: function () {
-                    this.toWLLocal = parseFloat(this.toWLLocal);
-                    // if (this.toWLLocal < this.fromWLLocal) {
-                    //     this.toWLLocal = this.fromWLLocal;
-                    // }
-                    this.$emit('toWLData',this.toWLLocal);
-                }
-            },
-            stepWLLocal: {
-                handler: function () {
-                    this.$emit('stepWLData',this.stepWLLocal);
-                }
-            },
-            // update local values
-            fromWL: {
-                handler: function () {
-                    this.fromWLLocal = this.fromWL;
-                }
-            },
-            toWL: {
-                handler: function () {
-                    this.toWLLocal = this.toWL;
-                }
-            },
-            stepWL: {
-                handler: function () {
-                    this.stepWLLocal = this.stepWL;
-                }
-            },
-            deep: true
-        },
-        props: ['fromWL', 'toWL', 'stepWL', 'source_units']
-    }
+  props: ['fromWL', 'toWL', 'stepWL', 'source_units']
+}
 </script>
 
 <style scoped>

vue-cli3-webapp/src/components/InputWithUnits.vue

@@ -7,15 +7,18 @@
         </p>
         <div v-if="isDisabledLocal">
             <p class="control">
-            <b-input v-model="valueLocal" type="number" step="any"
+            <b-autocomplete v-model="showValue"
                  class="input-with-units-value" disabled/>
 
             </p>
         </div>
         <div v-else>
             <p class="control">
-                <b-input v-model="valueLocal" type="number" step="any"
-                         class="input-with-units-value"/>
+                <b-autocomplete v-on:focus="handleFocus($event)" v-on:blur="handleBlur"
+                         v-on:keyup.native.enter="focusNext($event)" v-model="showValue"
+                                :data="expr_list"
+                                :open-on-focus="true"
+                                class="input-with-units-value"/>
 
             </p>
         </div>
@@ -28,34 +31,92 @@
 </template>
 
 <script>
+    const math = require('mathjs')
     export default {
         name: "InputWithUnits",
+      created() {
+        document.addEventListener('focusin', this.focusChanged)
+      },
+      beforeDestroy() {
+        document.removeEventListener('focusin', this.focusChanged)
+      },
+      methods: {
+        focusChanged () {
+          if (!this.isFocused) {
+            // To manage click on autocomplete item we need to wait
+            // autocomplete to update showValue.
+            setTimeout(() => {
+              this.showValue = this.valueLocal;
+              this.$emit('newdata',this.valueLocal);
+            }, 500);
+            if (!this.expr_list.includes(this.expr)) this.expr_list.unshift(this.expr);
+            if (this.expr_list.length > 5) this.expr_list.pop();
+          }
+        },
+        handleFocus(event){
+          if (this.expr == "") this.expr = this.valueLocal;
+          this.showValue = this.expr;
+          event.target.selectionStart = event.target.selectionEnd;
+          this.isFocused = true;
+        },
+        handleBlur(){
+          this.isFocused = false;
+          this.focusChanged();
+        },
+        focusNext(event) {
+          const inputs = Array.from(document.querySelectorAll('input[type="text"]'));
+          const index = inputs.indexOf(event.target);
+          if (index < inputs.length) {
+            inputs[index + 1].focus();
+            document.activeElement.click();
+          }
+        }
+      },
         watch: {
-            valueLocal: {
-                handler: function () {
-                    this.$emit('newdata',this.valueLocal);
-                }
-            },
-            value: {
-                handler: function () {
-                    this.valueLocal = this.value;
-                }
+            // valueLocal: {
+            //     handler: function () {
+            //     }
+            // },
+          showValue: {
+              handler: function () {
+                try {
+                  if (math.evaluate(this.showValue) != this.showValue) this.expr = this.showValue;
+                  if (math.evaluate(this.showValue) != math.evaluate(this.expr)) this.expr = this.showValue;
+                } catch (e) {return}
+              }
             },
+          expr: {
+            handler: function () {
+              this.valueLocal = math.evaluate(this.expr);
+            }
+          },
             isDisabled: {
                 handler: function () {
                     this.isDisabledLocal = this.isDisabled;
                 }
             },
+          value: {
+            handler: function () {
+              this.showValue = this.value;
+            }
+          },
             deep: true
         },
         data () {
             return {
                 // TODO: Is it OK to modify valueLocal later in <b-input>?
-                valueLocal: this.value,
-                isDisabledLocal: false
+                valueLocal: math.evaluate(this.value),
+              expr: this.value,
+              expr_list: [],
+              showValue: math.evaluate(this.value),
+              isFocused: false,
+                isDisabledLocal: false,
             }
         },
+      mounted() {
+        this.$emit('newdata',math.evaluate(this.value));
 
+      },
         props: ['title', 'units', 'value', 'isDisabled']
     }
 </script>
@@ -67,7 +128,7 @@
 }
 
 .input-with-units-value {
-    width:6rem;
+    width:10rem;
 }
 .input-with-units-units {
     width:3rem;

vue-cli3-webapp/src/components/ShowInfo.vue

@@ -10,10 +10,12 @@
                 <br><br>
                 Feel free to use provided software, however, use it at your own risk. We made our best effort to verify
                 it is correct, however, we do not provide any warranty.
-                <br><br>
-                Report bugs, issues, and feature requests at project's <a href="https://github.com/ovidiopr/scattnlay">GitHub</a>
 
-                <br><br>
+                <br><br> Report bugs, issues, and feature requests at project's
+                <a href="https://github.com/ovidiopr/scattnlay">GitHub</a>
+                (preferred) or mail to <a href="mailto:k.ladutenko@metalab.ifmo.ru?subject=Mie calculator webapp (Scattnlay)">k.ladutenko@metalab.ifmo.ru</a>.
+
+              <br><br>
                 If it was useful for your project, please, cite in your related paper the following reference:
                 <br><br>
                 <article style="margin-left: 1rem">

vue-cli3-webapp/src/main.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import store from './store'
 import App from './App.vue'
 import Buefy from 'buefy'
 // import 'buefy/dist/buefy.css'
@@ -12,9 +13,7 @@ library.add(faCoffee, faCheckCircle, faPlusCircle, faBan, faTrash);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
-
-Vue.config.productionTip = false;
-
 new Vue({
   render: h => h(App),
+  store
 }).$mount('#app');

vue-cli3-webapp/src/store.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state: {
+        count: 0
+    },
+    mutations: {
+        increment (state) {
+            state.count++
+        }
+    }
+})