#145: require manual refresh to run param query

app/src/assets/css/modules/_button.scss

@@ -18,19 +18,24 @@ a.btn,
         border: none;
         cursor: pointer;
     }
-    
-    &:hover {
+
+    &:hover:not([disabled="disabled"]) {
         box-shadow: 0 1rem 2rem rgba($primary-black,.2);
         transform: scaleX(1.1) scaleY(1.1);
     }
-
-    &:active,
-    &:focus {
+
+    &[disabled="disabled"] {
+        background-color: #DCDCDC;
+        color:#A5A5A5;
+        cursor: default;
+    }
+
+    &:is(:active, :focus):not([disabled="disabled"]) {
         outline: none;
         transform: translateY(-1px);
         box-shadow: 0 .5rem 1rem rgba($primary-black,.2);
     }
-    
+
     &--white {
         background-color: $primary-white;
         color: $primary-light;
@@ -79,7 +84,7 @@ a.btn,
             font-size: .8rem !important;
         }
     }
-    
+
     &::after {
         content: "";
         display: inline-block;
@@ -92,7 +97,7 @@ a.btn,
         z-index: -1;
         transition: all .4s;
     }
-    
+
     &--animated {
         animation: moveInBottom .5s ease-out .75s;
         animation-fill-mode: backwards;

app/src/pages/explorer/parameterized-query/parameterized-query-page.vue

@@ -90,15 +90,37 @@
           :startOpen="true"
           title="SPARQL Results"
         >
-          <div v-if="results">
-            <yasr :results="results"></yasr>
+          <div class="results-controls">
+            <button
+              class="btn btn--primary"
+              :disabled="autoRefresh || !newQuery"
+              @click="execQuery"
+            >
+              Refresh Results
+            </button>
+            <md-switch
+              class="md-primary"
+              v-model="autoRefresh"
+            >
+              Auto Refresh
+            </md-switch>
+          </div>
+          <div
+            class="results-progress"
+            v-show="runningQuery"
+          >
+            <md-progress-spinner
+              :md-diameter="100"
+              :md-stroke="6"
+              md-mode="indeterminate"
+            />
+          </div>
+          <div v-show="!runningQuery">
+            <yasr v-if="results" :results="results"/>
+            <p v-else class="no-results-message">
+              No results yet. Press "Refresh Results" to run the query and see results.
+            </p>
           </div>
-          <md-progress-spinner
-            v-else
-            :md-diameter="30"
-            :md-stroke="3"
-            md-mode="indeterminate"
-          ></md-progress-spinner>
         </accordion>
       </div>
     </div>
@@ -128,13 +150,16 @@ export default {
   data () {
     return {
       loadingTemplates: true,
+      runningQuery: false,
       queryTemplates: {},
       TextSegmentType,
       selTemplateId: null,
       query: '',
       varSelections: {},
       results: null,
-      execQueryDebounced: debounce(this.execQuery, 300)
+      autoRefresh: false,
+      lastRunQuery: '',
+      execQueryDebounced: debounce(this.autoExecQuery, 300)
     }
   },
   computed: {
@@ -149,6 +174,9 @@ export default {
     },
     totalTemplateCount () {
       return this.templateIds.length
+    },
+    newQuery () {
+      return this.query !== this.lastRunQuery
     }
   },
   methods: {
@@ -234,7 +262,15 @@ export default {
     },
     async execQuery () {
       this.results = null
+      this.lastRunQuery = this.query
+      this.runningQuery = true
       this.results = await querySparql(this.query)
+      this.runningQuery = false
+    },
+    autoExecQuery () {
+      if (this.autoRefresh) {
+        this.execQuery()
+      }
     }
   },
   created () {
@@ -287,4 +323,22 @@ export default {
 .accordion {
   margin-bottom: 20px;
 }
+.results-controls {
+  margin: 20px 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  > * {
+    margin-right: 50px;
+  }
+}
+.results-progress {
+  display: flex;
+  justify-content: center;
+}
+.no-results-message {
+  text-align: center;
+  margin-top: 20px;
+}
 </style>