#241: Minor UI fixes, add loading spinner

Duke-MatSci · Aug 30, 2022 · 95cf33e · 95cf33e
1 parent 5788717
commit 95cf33e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 23 deletions.
diff --git a/app/src/modules/metamine/metamaterial-vega-spec.js b/app/src/modules/metamine/metamaterial-vega-spec.js
@@ -14,10 +14,10 @@ const baseSpec = {
         type: 'point',
         stroke: 'black',
         filled: true,
-        size: 100
+        size: 80
       },
       width: 550,
-      height: 400,
+      height: 600,
       encoding: {
         x: {
           field: 'C11',
@@ -143,7 +143,7 @@ const baseSpec = {
                 'x'
               ],
               zoom: false,
-              mark: { strokeWidth: 3, stroke: '#000000', fillOpacity: 0 }
+              mark: { strokeWidth: 1, stroke: '#000000', fillOpacity: 0 }
             }
           },
           encoding: {
@@ -174,7 +174,7 @@ const baseSpec = {
                 },
                 value: 1
               },
-              value: 0.2
+              value: 0.01
             },
             tooltip: [
               {
@@ -198,7 +198,7 @@ const baseSpec = {
                 'x'
               ],
               zoom: false,
-              mark: { strokeWidth: 3, stroke: '#000000', fillOpacity: 0 }
+              mark: { strokeWidth: 1, stroke: '#000000', fillOpacity: 0 }
             }
           },
           encoding: {
@@ -229,7 +229,7 @@ const baseSpec = {
                 },
                 value: 1
               },
-              value: 0.2
+              value: 0.01
             },
             tooltip: [
               {
@@ -253,7 +253,7 @@ const baseSpec = {
                 'x'
               ],
               zoom: false,
-              mark: { strokeWidth: 3, stroke: '#000000', fillOpacity: 0 }
+              mark: { strokeWidth: 1, stroke: '#000000', fillOpacity: 0 }
             }
           },
           encoding: {
@@ -284,7 +284,7 @@ const baseSpec = {
                 },
                 value: 1
               },
-              value: 0.2
+              value: 0.01
             },
             tooltip: [
               {
@@ -308,7 +308,7 @@ const baseSpec = {
                 'x'
               ],
               zoom: false,
-              mark: { strokeWidth: 3, stroke: '#000000', fillOpacity: 0 }
+              mark: { strokeWidth: 1, stroke: '#000000', fillOpacity: 0 }
             }
           },
           encoding: {
@@ -339,7 +339,7 @@ const baseSpec = {
                 },
                 value: 1
               },
-              value: 0.2
+              value: 0.01
             },
             tooltip: [
               {
@@ -363,7 +363,7 @@ const baseSpec = {
                 'x'
               ],
               zoom: false,
-              mark: { strokeWidth: 3, stroke: '#000000', fillOpacity: 0 }
+              mark: { strokeWidth: 1, stroke: '#000000', fillOpacity: 0 }
             }
           },
           encoding: {
@@ -394,7 +394,7 @@ const baseSpec = {
                 },
                 value: 1
               },
-              value: 0.2
+              value: 0.01
             },
             tooltip: [
               {
@@ -418,7 +418,7 @@ const baseSpec = {
                 'x'
               ],
               zoom: false,
-              mark: { strokeWidth: 3, stroke: '#000000', fillOpacity: 0 }
+              mark: { strokeWidth: 1, stroke: '#000000', fillOpacity: 0 }
             }
           },
           encoding: {
@@ -451,7 +451,7 @@ const baseSpec = {
                 },
                 value: 1
               },
-              value: 0.2
+              value: 0.01
             },
             tooltip: [
               {

diff --git a/app/src/pages/metamine/visualization/metamaterial-plot.html b/app/src/pages/metamine/visualization/metamaterial-plot.html
@@ -10,14 +10,17 @@ <h2>Metamaterial Properties: Interactive Plot</h2>
         Scroll to zoom, click and drag to pan, and double-click to reset. 
       </p>
     </div>
-    <div class="md-layout-item md-small-size-100" style="margin: 2rem">
-      <div class="loading-dialog" style="margin: 5rem" v-if="loading">
-          Loading chart data
-      </div>
-      <div class="loading-dialog" style="margin: 5rem" v-if="error.status">
-        Error while rendering Vega-Lite specification: {{error.message}}
-      </div>
-      <div v-else>
+    <div class="section_loader" v-if="loading">
+      <spinner
+        :loading="loading"
+        text='Loading metamaterial data...'
+      />
+    </div>
+    <div class="section_loader" v-else-if="error.status">
+      Error while rendering Vega-Lite specification: {{error.message}}.
+    </div>
+    <div class="md-layout-item md-small-size-100" style="margin: 2rem" v-else>
+      <div>
           <div class="viz-u-display__desktop" />
           <span class="md-layout md-gutter">
             <div class="md-layout-item md-size-30">

diff --git a/app/src/pages/metamine/visualization/metamaterial-plot.js b/app/src/pages/metamine/visualization/metamaterial-plot.js
@@ -1,4 +1,5 @@
 import VegaLite from '@/components/explorer/VegaLiteWrapper.vue'
+import spinner from '@/components/Spinner'
 import { buildCsvSpec } from '../../../modules/vega-chart'
 import embed from 'vega-embed'
 import { baseSpec, createPatch } from '../../../modules/metamine/metamaterial-vega-spec'
@@ -28,6 +29,9 @@ export default {
       { attr: 'C66', label: 'C66' }
     ]
   }),
+  components: {
+    spinner
+  },
   computed: {
     // Don't allow graphing the same property against itself (causes vega-lite errors)
     xAxisOpts () {
@@ -55,7 +59,7 @@ export default {
         }
       }
       // TODO: Change to Apollo GraphQL
-      return await fetch('../metamaterialdata400.csv', requestOptions)
+      return await fetch('../metamaterials_combined_1000.csv', requestOptions)
         .then(response => response.text())
         .then(data => {
           const titles = data.slice(0, data.indexOf('\n')).split(delimiter).map(str => str.replace(/^"(.*)"$/, '$1'))