added data from refractiveindex.info as a table into MaterialsSelector.vue

guiapp/package-lock.json

@@ -12,6 +12,7 @@
         "core-js": "^3.6.5",
         "cubic-spline-ts": "^3.0.8",
         "file-saver": "^2.0.5",
+        "js-yaml": "^4.1.0",
         "lodash": "^4.17.21",
         "mathjs": "^9.5.0",
         "plotly.js-dist-min": "^2.6.2",
@@ -24,6 +25,7 @@
         "@quasar/app": "^3.2.4",
         "@types/emscripten": "^1.39.5",
         "@types/file-saver": "^2.0.4",
+        "@types/js-yaml": "^4.0.5",
         "@types/lodash": "^4.14.175",
         "@types/node": "^12.20.21",
         "@types/plotly.js-dist-min": "^2.3.0",
@@ -1783,6 +1785,15 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
       "version": "13.11.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.11.0.tgz",
@@ -1798,6 +1809,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/type-fest": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -2373,6 +2397,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/js-yaml": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
+      "integrity": "sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==",
+      "dev": true
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
@@ -3247,13 +3277,9 @@
       }
     },
     "node_modules/argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
-      "dependencies": {
-        "sprintf-js": "~1.0.2"
-      }
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/array-flatten": {
       "version": "1.1.1",
@@ -6036,6 +6062,15 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/eslint/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "node_modules/eslint/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -6130,6 +6165,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/eslint/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/eslint/node_modules/semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -8584,13 +8632,11 @@
       "dev": true
     },
     "node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "dev": true,
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
+        "argparse": "^2.0.1"
       },
       "bin": {
         "js-yaml": "bin/js-yaml.js"
@@ -15635,6 +15681,15 @@
         "strip-json-comments": "^3.1.1"
       },
       "dependencies": {
+        "argparse": {
+          "version": "1.0.10",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+          "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+          "dev": true,
+          "requires": {
+            "sprintf-js": "~1.0.2"
+          }
+        },
         "globals": {
           "version": "13.11.0",
           "resolved": "https://registry.npmjs.org/globals/-/globals-13.11.0.tgz",
@@ -15644,6 +15699,16 @@
             "type-fest": "^0.20.2"
           }
         },
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
         "type-fest": {
           "version": "0.20.2",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -16101,6 +16166,12 @@
         "@types/node": "*"
       }
     },
+    "@types/js-yaml": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
+      "integrity": "sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==",
+      "dev": true
+    },
     "@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
@@ -16827,13 +16898,9 @@
       }
     },
     "argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
-      "requires": {
-        "sprintf-js": "~1.0.2"
-      }
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "array-flatten": {
       "version": "1.1.1",
@@ -18946,6 +19013,15 @@
             "color-convert": "^2.0.1"
           }
         },
+        "argparse": {
+          "version": "1.0.10",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+          "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+          "dev": true,
+          "requires": {
+            "sprintf-js": "~1.0.2"
+          }
+        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -19009,6 +19085,16 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
         "semver": {
           "version": "7.3.5",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -20900,13 +20986,11 @@
       "dev": true
     },
     "js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "dev": true,
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "requires": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
+        "argparse": "^2.0.1"
       }
     },
     "jsesc": {

guiapp/package.json

@@ -14,6 +14,7 @@
     "core-js": "^3.6.5",
     "cubic-spline-ts": "^3.0.8",
     "file-saver": "^2.0.5",
+    "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "mathjs": "^9.5.0",
     "plotly.js-dist-min": "^2.6.2",
@@ -26,6 +27,7 @@
     "@quasar/app": "^3.2.4",
     "@types/emscripten": "^1.39.5",
     "@types/file-saver": "^2.0.4",
+    "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.175",
     "@types/node": "^12.20.21",
     "@types/plotly.js-dist-min": "^2.3.0",

guiapp/quasar.conf.js

@@ -65,6 +65,7 @@ module.exports = configure(function (ctx) {
       //   })
       // },
       vueRouterMode: 'hash', // available values: 'hash', 'history'
+      // vueRouterMode: 'history', // available values: 'hash', 'history'
 
       // transpile: false,
 

guiapp/src/components/MaterialsSelector.vue

@@ -1,63 +1,222 @@
 <template>
-  <div class="row items-baseline">
-    <div class="col-xs-grow col-sm-auto q-px-sm">
-      <q-table
-          title="Activated materials"
-          title-class="text-h6"
-          :rows="rowsQ"
-          :columns="columnsQ"
-          hide-bottom
+  <div class="q-pa-md">
+
+    <q-table
+          :rows="rows"
+          :columns="columns"
+          :filter="filter"
+          :loading="loading"
+          :rows-per-page-options="[3, 12, 24, 0]"
           dense
-          flat
-          row-key="name"
+          title="Available materials"
+          title-class="text-h6"
+          row-key="id"
       >
-        <template #body="props">
-          <q-tr :props="props">
-            <q-th key="name" :props="props">
-              {{ props.row.name }}
-            </q-th>
-            <template v-for="(val, index) in props.row" :key="index" :props="props">
-              <q-td v-if="index!='name'">
-                <q-checkbox
-                    v-model="props.row[index]"
-                    dense
-                />
-              </q-td>
+
+        <template #top>
+          <div>
+            <q-tooltip anchor="top end" self="center middle" >
+              Using a copy of RefractiveIndex.info. Analytical models are not implemented.
+            </q-tooltip>
+
+            <q-icon size='sm' name="o_info" />
+          </div>
+          <q-input v-model="filter" dense  debounce="300" color="primary" >
+            <template #append>
+              <q-icon name="search" />
+            </template>
+            <template v-if="filter" #after>
+              <q-btn  flat round dense icon="cancel" @click="filter=''"/>
             </template>
-          </q-tr>
+
+          </q-input>
+          <q-space />
         </template>
+
+      <template #header="props">
+        <q-tr :props="props">
+          <q-th auto-width />
+          <q-th class="text-left"> {{ props.cols[1].label }} </q-th>
+          <q-th class="text-left"> {{ props.cols[2].label }} </q-th>
+          <q-th class="text-left"> {{ props.cols[3].label }} </q-th>
+        </q-tr>
+      </template>
+
+      <template #body="props">
+        <q-tr :props="props">
+          <q-td auto-width>
+            <q-tooltip anchor="top end" self="center middle" >
+              Add to simulation</q-tooltip>
+            <q-btn size="sm" color="accent" round dense icon="add" @click="addToSimulation(props.row.id)"/>
+<!--            <q-btn size="sm" color="accent" round dense @click="props.expand = !props.expand" :icon="props.expand ? 'remove' : 'add'" />-->
+          </q-td>
+          <q-td auto-width> {{ props.row.bookDivider }} </q-td>
+          <q-td auto-width>
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <div v-html="props.row.bookName"/>
+            <q-tooltip anchor="top middle" self="center middle" >
+              {{ props.row.shelfDivider }}</q-tooltip>
+          </q-td>
+          <q-td> {{ props.row.pageName }} </q-td>
+        </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>
   </div>
 </template>
 
 <script lang="ts">
 import {
+  // computed,
   defineComponent,
-  computed,
-  } from 'vue'
-import { useStore } from 'src/store'
+    reactive,
+    ref
+} from 'vue'
+// import { useStore } from 'src/store'
+import { load } from 'js-yaml'
 
 export default defineComponent({
 
   name: 'MaterialsSelector',
   components: {},
 
-  setup() {
-    const $store = useStore()
-
-    const activatedMaterials = computed(() => $store.state.guiRuntime.activatedMaterials)
-    const columnsQ = computed(()=>{
-      return [
-        { name: 'name', label: '',  align: 'left', field: 'name', headerStyle:''},
-        { name: 'Qsca', label: 'Qsca',  align: 'left', field: 'Qsca', headerStyle:''},
-        { name: 'Qabs', label: 'Qabs',  align: 'left', field: 'Qabs', headerStyle:''},
-        { name: 'Qext', label: 'Qext',  align: 'left', field: 'Qext', headerStyle:''},
-      ]
+  setup: function () {
+    // const $store = useStore()
+    const loading = ref(true)
+
+    const columns = [
+      // do not change the order without updating the template
+      {name: 'id', label: '', field: 'id'},
+      {name: 'bookDivider', label: 'State', field: 'bookDivider'},
+      {name: 'bookName', label: 'Material', field: 'bookName'},
+      {name: 'pageName', label: 'Authors', field: 'pageName'},
+      {name: 'shelfDivider', label: 'Group', field: 'shelfDivider'},
+      {name: 'pageData', label: 'file', field: 'pageData'},
+    ]
+
+    async function GetPagesFromLib() { /* eslint-disable */
+      let rows = []
+      // lib has an irregular structure
+      const response = await fetch('refractiveindex.info-database/database/library.yml')
+      const data = await response.text()
+      const lib = await load(data) as any
+      let i = 1
+      for (const shelf of lib) {
+        let shelfDivider = ''
+        let bookName = ''
+        for (const bookOrDivider of shelf.content) {
+          if (bookOrDivider.DIVIDER) {
+            shelfDivider = bookOrDivider.DIVIDER
+            continue
+          } else if (bookOrDivider.name) {
+
+            bookName = bookOrDivider.name
+            let bookDivider = ''
+            let pageName = ''
+            let pageData = ''
+            for (const pageOrDivider of bookOrDivider.content) {
+              if (pageOrDivider.DIVIDER) {
+                bookDivider = pageOrDivider.DIVIDER
+                continue
+              } else if (pageOrDivider.name) {
+                pageName = pageOrDivider.name
+                pageData = pageOrDivider.data
+                if (bookDivider.includes('Model') || bookDivider.includes('model')
+                    || pageName.includes('Model') || pageName.includes('model')) continue
+
+                rows.push({ id: i,
+                  shelfDivider: shelfDivider, bookName: bookName,
+                  bookDivider: bookDivider, pageName: pageName, pageData: pageData
+                })
+                i = i + 1
+                // console.log (shelfDivider, '==', bookName, '==',bookDivider, '==', pageName, '==', pageData)
+                // console.log (shelfDivider, '==', bookName, '==',bookDivider, '==', pageName, '==', pageData)
+              } else {
+                console.log('###################### Unknown type in pageOrDivider', pageOrDivider)
+              }
+
+            }
+          } else {
+            console.log('###################### Unknown type in bookOrDivider', bookOrDivider)
+          }
+        }
+      }
+      return rows
+    }
+
+
+    let rowsProto:{
+      shelfDivider: string, bookName: string,
+      bookDivider: string, pageName: string, pageData: string
+    }[] = []
+    const rows= reactive(rowsProto)
+    GetPagesFromLib().then(val => {
+      rows.push(...val);
+      loading.value = false
     })
 
+    // const activatedMaterials = computed(() => $store.state.guiRuntime.activatedMaterials)
+    // const columnsQ = computed(()=>{
+    //   return [
+    //     { name: 'name', label: '',  align: 'left', field: 'name', headerStyle:''},
+    //     { name: 'Qsca', label: 'Qsca',  align: 'left', field: 'Qsca', headerStyle:''},
+    //     { name: 'Qabs', label: 'Qabs',  align: 'left', field: 'Qabs', headerStyle:''},
+    //     { name: 'Qext', label: 'Qext',  align: 'left', field: 'Qext', headerStyle:''},
+    //   ]
+    // })
+
 
-    return { }
+    const filter = ref('')
+    return {columns, rows, loading, filter,
+      addToSimulation(val:number) {
+        console.log(rows[val-1])
+    }}
   },
 })
 </script>
+e

guiapp/src/router/index.ts

@@ -1,12 +1,13 @@
-import { route } from 'quasar/wrappers';
+import { route } from 'quasar/wrappers'
 import {
   createMemoryHistory,
   createRouter,
   createWebHashHistory,
   createWebHistory,
-} from 'vue-router';
-import { StateInterface } from '../store';
-import routes from './routes';
+} from 'vue-router'
+import { StateInterface } from '../store'
+import routes from './routes'
+// import { nextTick } from 'vue'
 
 /*
  * If not building with SSR mode, you can
@@ -26,15 +27,20 @@ export default route<StateInterface>(function (/* { store, ssrContext } */) {
     // scrollBehavior (to, from, savedPosition) {
     //   return { x: 0, y: 0 }
     // },
-    scrollBehavior: (to) => {
-      if (to.hash) {
-        return {
-          selector: to.hash
-          , offset: { x: 0, y: 10 }
-        }
-      }
-      return { left: 0, top: 0 }
-    },
+    // scrollBehavior: (to) => {
+    //   const idToScrollTo = to.hash
+    //   if (idToScrollTo && document.querySelector(idToScrollTo)) {
+    //     const el = document.querySelector(idToScrollTo)
+    //     if (el) el.scrollIntoView()
+    //   }
+    //   // void nextTick(()=>{
+    //   //   if (idToScrollTo && document.querySelector(idToScrollTo)) {
+    //   //     const el = document.querySelector(idToScrollTo)
+    //   //     if (el) el.scrollIntoView()
+    //   //   }
+    //   // })
+    //   return { left: 0, top: 0 }
+    // },
     routes,
 
     // Leave this as is and make changes in quasar.conf.js instead!