#241: Pixelated metamaterial viz updates

- Switch to using apollo graphql for data - Temporarily remove color coding until datasets have label or title - Temporarily limit to 10x10 OR 50x50, not both - Add loading spinner, fix async behavior
Duke-MatSci · Oct 5, 2022 · c68634b · c68634b
1 parent 551c77a
commit c68634b
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 89 deletions.
diff --git a/app/src/modules/gql/metamaterial-gql.js b/app/src/modules/gql/metamaterial-gql.js
@@ -0,0 +1,33 @@
+import gql from 'graphql-tag'
+
+export const METAMATERIAL_QUERY = gql`
+	query PixelData($input: pixelDataQueryInput!) {
+  pixelData(input: $input) {
+    totalItems
+    data {
+      symmetry
+      unit_cell_x_pixels
+      C11
+      C12
+      C22
+      C16
+      C26
+      C66
+      CM0
+      CM0_C11
+      CM0_C12
+      CM0_C22
+      CM0_C16
+      CM0_C26
+      CM0_C66
+      CM1
+      CM1_C11
+      CM1_C12
+      CM1_C22
+      CM1_C16
+      CM1_C26
+      CM1_C66
+      geometry_full
+    }
+  }
+}`
diff --git a/app/src/modules/metamine/metamaterial-vega-spec.js b/app/src/modules/metamine/metamaterial-vega-spec.js
@@ -42,14 +42,14 @@ const baseSpec = {
             padding: 10
           }
         },
-        color: {
-          field: 'symmetry',
-          type: 'nominal',
-          title: 'Symmetry',
-          legend: {
-            orient: 'top'
-          }
-        },
+        // color: {
+        //   field: 'symmetry',
+        //   type: 'nominal',
+        //   title: 'Symmetry',
+        //   legend: {
+        //     orient: 'top'
+        //   }
+        // },
         tooltip: [
           {
             field: 'symmetry',
@@ -158,11 +158,11 @@ const baseSpec = {
               },
               title: 'C11'
             },
-            color: {
-              field: 'symmetry',
-              type: 'nominal',
-              title: 'Symmetry'
-            },
+            // color: {
+            //   field: 'symmetry',
+            //   type: 'nominal',
+            //   title: 'Symmetry'
+            // },
             opacity: {
               condition: {
                 test: {
@@ -213,11 +213,11 @@ const baseSpec = {
               },
               title: 'C12'
             },
-            color: {
-              field: 'symmetry',
-              type: 'nominal',
-              title: 'Symmetry'
-            },
+            // color: {
+            //   field: 'symmetry',
+            //   type: 'nominal',
+            //   title: 'Symmetry'
+            // },
             opacity: {
               condition: {
                 test: {
@@ -268,11 +268,11 @@ const baseSpec = {
               },
               title: 'C22'
             },
-            color: {
-              field: 'symmetry',
-              type: 'nominal',
-              title: 'Symmetry'
-            },
+            // color: {
+            //   field: 'symmetry',
+            //   type: 'nominal',
+            //   title: 'Symmetry'
+            // },
             opacity: {
               condition: {
                 test: {
@@ -323,11 +323,11 @@ const baseSpec = {
               },
               title: 'C16'
             },
-            color: {
-              field: 'symmetry',
-              type: 'nominal',
-              title: 'Symmetry'
-            },
+            // color: {
+            //   field: 'symmetry',
+            //   type: 'nominal',
+            //   title: 'Symmetry'
+            // },
             opacity: {
               condition: {
                 test: {
@@ -378,11 +378,11 @@ const baseSpec = {
               },
               title: 'C26'
             },
-            color: {
-              field: 'symmetry',
-              type: 'nominal',
-              title: 'Symmetry'
-            },
+            // color: {
+            //   field: 'symmetry',
+            //   type: 'nominal',
+            //   title: 'Symmetry'
+            // },
             opacity: {
               condition: {
                 test: {
@@ -433,13 +433,13 @@ const baseSpec = {
               },
               title: 'C66'
             },
-            color: {
-              field: 'symmetry',
-              type: 'nominal',
-              title: 'Symmetry',
-              scale: { scheme: 'category10' }
+            // color: {
+            //   field: 'symmetry',
+            //   type: 'nominal',
+            //   title: 'Symmetry',
+            //   scale: { scheme: 'category10' }
 
-            },
+            // },
             opacity: {
               condition: {
                 test: {
@@ -600,7 +600,7 @@ function createPatch (xAxis, yAxis) {
         }
       },
       {
-        path: '/scales/1',
+        path: '/scales/0',
         op: 'replace',
         value: {
           domain: {
@@ -623,7 +623,7 @@ function createPatch (xAxis, yAxis) {
         }
       },
       {
-        path: '/scales/2',
+        path: '/scales/1',
         op: 'replace',
         value: {
           domain: {

diff --git a/app/src/pages/metamine/visualization/metamaterial-plot.html b/app/src/pages/metamine/visualization/metamaterial-plot.html
@@ -1,7 +1,7 @@
 <div class="main tool_page pixelunit wrapper">
   <div class="md-layout md-alignment-top-left md-gutter adjust-padding">
     <div class="md-layout-item md-size-100">
-      <h2>Metamaterial Properties: Interactive Plot</h2>
+      <h2>2D Pixelated Static Metamaterial Properties: Interactive Plot</h2>
       <p>
         Select properties from the dropdown menus below to graph on the x and y axes.
       </p>
@@ -10,16 +10,16 @@ <h2>Metamaterial Properties: Interactive Plot</h2>
         Scroll to zoom, click and drag to pan, and double-click to reset. 
       </p>
     </div>
-    <div class="section_loader" v-if="loading">
+    <div class="section_loader" v-if="$apollo.loading">
       <spinner
-        :loading="loading"
+        :loading="$apollo.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 class="md-layout-item md-small-size-100" style="margin: 2rem" v-show="!$apollo.loading && !error.status">
       <div>
           <div class="viz-u-display__desktop" />
           <span class="md-layout md-gutter">
@@ -51,7 +51,27 @@ <h2>Metamaterial Properties: Interactive Plot</h2>
                 </option>
               </select>
             </div>
+            <div class="md-layout-item md-size-30">
+              <div class="facet-content_label">Unit cell size</div>
+              <select
+                class="form__select facet-content_item"
+                name="pixelDim"
+                v-model="pixelDim"
+              >
+                <option
+                      v-for="(val, index) in pixelDimOpts"
+                      :key="index" :value="val.attr"
+                    > {{ val.label }}
+                </option>
+              </select>
+            </div>
           </span>
+          <div v-if="loading" style="margin-top:1rem">
+            <spinner
+              :loading="loading"
+              text='Updating chart...'
+            />
+          </div>
           <div id="vegaembed" class="btn--animated vega-embed-chartview" style="width: 100%"></div>
       </div>
     </div>

diff --git a/app/src/pages/metamine/visualization/metamaterial-plot.js b/app/src/pages/metamine/visualization/metamaterial-plot.js
@@ -1,9 +1,9 @@
 import VegaLite from '@/components/explorer/VegaLiteWrapper.vue'
 import spinner from '@/components/Spinner'
 import { buildCsvSpec } from '@/modules/vega-chart'
-import Papa from '@/modules/papaparse.min.js'
 import embed from 'vega-embed'
 import { baseSpec, createPatch } from '@/modules/metamine/metamaterial-vega-spec'
+import { METAMATERIAL_QUERY } from '@/modules/gql/metamaterial-gql'
 
 export default {
   name: 'Mockup',
@@ -12,14 +12,14 @@ export default {
     spinner
   },
   data: () => ({
+    loading: false,
     spec: null,
     baseSpec: baseSpec,
-    loading: false,
     error: { status: false, message: null },
-    results: null,
+    pixelDim: 'TEN',
     xAxis: 'C11',
     yAxis: 'C12',
-    patchSpec: {},
+    pixelData: {},
     // Dictionary so we can add more attributes in the future
     // that might have different attr names than labels
     attributes: [
@@ -29,6 +29,10 @@ export default {
       { attr: 'C16', label: 'C16' },
       { attr: 'C26', label: 'C26' },
       { attr: 'C66', label: 'C66' }
+    ],
+    pixelDimOpts: [
+      { attr: 'TEN', label: '10 by 10' },
+      { attr: 'FIFTY', label: '50 by 50' }
     ]
   }),
   computed: {
@@ -41,34 +45,8 @@ export default {
     }
   },
   methods: {
-    async loadVisualization () {
-      try {
-        this.spec = buildCsvSpec(this.baseSpec, this.results)
-      } catch (e) {
-        this.error = { status: true, message: e.message }
-      } finally {
-        this.loading = false
-      }
-    },
-    // TODO: remove this method. Should happen server side!
-    async CSVToJSON (delimiter = ',') {
-      const thisVue = this
-      const requestOptions = {
-        headers: {
-          accept: 'application/sparql-results+json'
-        }
-      }
-      // TODO: Change to Apollo GraphQL
-      return await fetch('../metamaterials_combined_1000.csv', requestOptions)
-        .then(response => response.text())
-        .then(data => {
-          Papa.parse(data, {
-            header: true,
-            complete: function (result) {
-              thisVue.results = result.data
-            }
-          })
-        })
+    buildSpec () {
+      this.spec = buildCsvSpec(this.baseSpec, this.pixelData.data)
     },
     // Handle screen resizing
     alignVegaTooltips () {
@@ -83,22 +61,39 @@ export default {
           .then(() => this.alignVegaTooltips())
       } catch (e) {
         this.error = { status: true, message: e.message }
+      } finally {
+        this.loading = false
       }
     }
   },
-  created () {
-    this.loading = true
-    this.CSVToJSON()
-      .then(() => this.loadVisualization())
-      .then(async () => await this.patchVegaSpec())
-  },
-  watch: {
-    async xAxis () {
-      await this.patchVegaSpec()
+  watch:
+    {
+      async xAxis () {
+        this.loading = true
+        // Pause to allow event to register
+        setTimeout(async () => await this.patchVegaSpec(), 100)
+      },
+      async yAxis () {
+        this.loading = true
+        // Pause to allow event to register
+        setTimeout(async () => await this.patchVegaSpec(), 100)
+      }
     },
-    async yAxis () {
-      await this.patchVegaSpec()
+  apollo: {
+    pixelData: {
+      query: METAMATERIAL_QUERY,
+      variables () {
+        return {
+          input: { unitCell: this.pixelDim }
+        }
+      },
+      fetchPolicy: 'cache-and-network',
+      result () {
+        if (this.pixelData) {
+          this.buildSpec()
+          this.patchVegaSpec()
+        }
+      }
     }
-
   }
 }