Merge pull request #260 from Duke-MatSci/#241_metamine_visualization_…

…tool Metamine visualization tool: #259 combine timeouts
Duke-MatSci · Oct 17, 2022 · dbedc83 · dbedc83
2 parents b25307e + 32b16b7
commit dbedc83
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/app/src/modules/metamine/metamaterial-vegalite.js b/app/src/modules/metamine/metamaterial-vegalite.js
@@ -1,6 +1,5 @@
 const baseSpec = {
   $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
-  width: 'container',
   hconcat: [
     {
       selection: {

diff --git a/app/src/pages/metamine/visualization/metamaterial-plot.js b/app/src/pages/metamine/visualization/metamaterial-plot.js
@@ -1,4 +1,3 @@
-import VegaLite from '@/components/explorer/VegaLiteWrapper.vue'
 import spinner from '@/components/Spinner'
 import { buildCsvSpec } from '@/modules/vega-chart'
 import embed from 'vega-embed'
@@ -8,11 +7,11 @@ import { METAMATERIAL_QUERY } from '@/modules/gql/metamaterial-gql'
 export default {
   name: 'Mockup',
   components: {
-    VegaLite,
     spinner
   },
   data: () => ({
     loading: false,
+    timeout: null,
     spec: null,
     baseSpec: baseSpec,
     error: { status: false, message: null },
@@ -64,19 +63,23 @@ export default {
       } finally {
         this.loading = false
       }
+    },
+    /**
+     * Pause to allow event to register
+     */
+    changeAxes () {
+      this.loading = true
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(async () => await this.patchVegaSpec(), 500)
     }
   },
   watch:
     {
-      async xAxis () {
-        this.loading = true
-        // Pause to allow event to register
-        setTimeout(async () => await this.patchVegaSpec(), 100)
+      xAxis () {
+        this.changeAxes()
       },
-      async yAxis () {
-        this.loading = true
-        // Pause to allow event to register
-        setTimeout(async () => await this.patchVegaSpec(), 100)
+      yAxis () {
+        this.changeAxes()
       }
     },
   apollo: {