#155: updated search, testing and dv link

Duke-MatSci · May 24, 2022 · 844e614 · 844e614
1 parent 9a0de6f
commit 844e614
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 42 deletions.
diff --git a/app/src/assets/css/modules/_utility.scss b/app/src/assets/css/modules/_utility.scss
@@ -328,10 +328,10 @@
         margin: 0 0 2.5rem 0;
         padding: 1rem;
     }
-    &-bckg {
-        background-color: $primary !important;
-        font-size: .8rem !important;
-    }
+    // &-bckg {
+    //     background-color: $primary !important;
+    //     font-size: .8rem !important;
+    // }
     &-roverflow {
         overflow: hidden !important;
     }

diff --git a/app/src/components/explorer/Header.vue b/app/src/components/explorer/Header.vue
@@ -22,13 +22,13 @@
       <div class="md-toolbar-row u_margin-top-med">
         <md-tabs class="md-primary" id="reset_tab_bg">
           <router-link  class="tabs" to="/explorer" v-slot="{navigate, href}" custom>
-              <md-tab :href="href" @click="navigate" id="tab-home" md-label="Search"> </md-tab>
+              <md-tab :href="href" @click="href === '/explorer' ? setSearching : navigate" id="tab-home" md-label="Search"> </md-tab>
           </router-link>
           <router-link class="tabs" to="/explorer/visualization" v-slot="{navigate, href}" custom>
               <md-tab :href="href" @click="navigate" id="tab-pages" md-label="Visualization"> </md-tab>
           </router-link>
           <router-link class="tabs" to="/explorer/create" v-slot="{navigate, href}" custom>
-              <md-tab :href="href" @click="navigate" id="tab-posts" md-label="Create"> </md-tab>
+              <md-tab :href="href" @click="navigate" id="tab-posts" md-label="Curate"> </md-tab>
           </router-link>
         </md-tabs>
       </div>

diff --git a/app/src/components/explorer/SearchHeader.vue b/app/src/components/explorer/SearchHeader.vue
@@ -1,15 +1,17 @@
 <template>
     <div class="explorer_page_header">
         <md-card style="padding:2rem; margin:2rem; z-index: 10">
-        <div class="search_box_form">
-            <div class="form__group search_box_form-item-1">
-                <input type="text" ref="search_input" class="form__input form__input--adjust" placeholder="Search" name="search" id="search" required v-model="searchWord" />
-                <label htmlFor="search" class="form__label search_box_form_label">Search</label>
-            </div>
-            <div class="form__group search_box_form-item-2">
-                <button type="submit" class="btn btn--primary btn--noradius search_box_form_btn">Search</button>
-            </div>
-        </div>
+        <form class="form" @submit.prevent="submitSearch">
+          <div class="search_box_form">
+              <div class="form__group search_box_form-item-1">
+                  <input type="text" ref="search_input" class="form__input form__input--adjust" placeholder="Search" name="search" id="search" required v-model="searchWord" />
+                  <label htmlFor="search" class="form__label search_box_form_label">Search</label>
+              </div>
+              <div class="form__group search_box_form-item-2">
+                  <button type="submit" class="btn btn--primary btn--noradius search_box_form_btn">Search</button>
+              </div>
+          </div>
+        </form>
         <div class="search-dropdown-menu_parent" v-if="!!suggestions.length">
 					<ul class="search-dropdown-menu">
 						<li v-for="(suggestion, index) in suggestions" :key="index" class="" @click.prevent="submitSearch(suggestion)">

diff --git a/app/src/mixins/explorerSearch.js b/app/src/mixins/explorerSearch.js
@@ -6,12 +6,18 @@ import { mapMutations, mapGetters } from 'vuex'
  * Both: 'Keyword Search' & 'Autosuggest'
  */
 export default {
+  data () {
+    return {
+      enableAutosuggest: true
+    }
+  },
   computed: {
     searchWord: {
       get () {
         return this.$store.getters['explorer/getSearchKeyword']
       },
       async set (payload) {
+        this.enableAutosuggest = true
         await this.$store.commit('explorer/setSearchKeyword', payload)
         await this.requestSearch(payload)
       }

diff --git a/app/src/pages/explorer/Home.vue b/app/src/pages/explorer/Home.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div @click="disableRender">
 		<!-- <facet-panel :searchEnabled="searchEnabled" class="facet_panel" /> -->
 		<facet-panel class="facet_panel" />
 		<div class="section_teams" v-if="!searchEnabled">
@@ -16,7 +16,7 @@
 						</div>
 					</div>
 				</form>
-				<div class="search-dropdown-menu_parent" v-if="!!suggestions.length">
+				<div class="search-dropdown-menu_parent" v-if="!!suggestions.length && enableAutosuggest">
 					<ul class="search-dropdown-menu" style="width:100%">
 						<li v-for="(suggestion, index) in suggestions" :key="index" class="" @click.prevent="submitSearch(suggestion)">
 							<a href="#">{{ suggestion }}</a>
@@ -78,6 +78,14 @@ export default {
   },
   async mounted () {
     await this.$store.dispatch('explorer/facetFilterMaterials')
+  },
+  methods: {
+    async disableRender (e) {
+      const selected = e.target.closest('.search_box')
+      if (!selected) {
+        this.enableAutosuggest = false
+      }
+    }
   }
 }
 </script>
diff --git a/app/src/pages/explorer/parameterized-query/parameterized-query-page.vue b/app/src/pages/explorer/parameterized-query/parameterized-query-page.vue
@@ -7,24 +7,6 @@
       <p>No templates were loaded</p>
     </div>
     <div v-else>
-      <div class="button-row">
-        <div>
-          <router-link :to="{ name: 'NewChartDataVoyager' }">
-            <md-button
-              class="md-icon-button"
-              @click="selectQueryForVizEditor()"
-            >
-              <md-tooltip
-                class="utility-bckg"
-                md-direction="bottom"
-              >
-                Open Current Query in DataVoyager
-              </md-tooltip>
-              <md-icon>check</md-icon>
-            </md-button>
-          </router-link>
-        </div>
-      </div>
       <md-toolbar>
         <h3 class="md-title">Query Template</h3>
       </md-toolbar>
@@ -96,14 +78,26 @@
               :disabled="autoRefresh || !newQuery"
               @click="execQuery"
             >
-              Refresh Results
+              Search Query
             </button>
             <md-switch
               class="md-primary"
               v-model="autoRefresh"
             >
               Auto Refresh
             </md-switch>
+            <div class="button-row">
+              <div>
+                <router-link :to="{ name: 'NewChartDataVoyager' }" target="_blank">
+                  <button
+                    class="btn btn--primary"
+                    @click="selectQueryForVizEditor()"
+                  >
+                    Open in Datavoyer
+                  </button>
+                </router-link>
+              </div>
+            </div>
           </div>
           <div
             class="results-progress"
@@ -334,7 +328,7 @@ export default {
 .results-controls {
   margin: 20px 10px;
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
 
   > * {

diff --git a/app/src/pages/nanomine/Base.vue b/app/src/pages/nanomine/Base.vue
@@ -29,7 +29,7 @@ export default {
     }
   },
   methods: {
-    toggleMenuVisibility() {
+    toggleMenuVisibility () {
       this.menuVisible = !this.menuVisible
     }
   }

diff --git a/app/src/store/modules/explorer/mutations.js b/app/src/store/modules/explorer/mutations.js
@@ -17,11 +17,14 @@ export default {
   setSelectedFacetFilterMaterialsValue (state, payload) {
     state.selectedFacetFilterMaterialsValue = payload
   },
-  setSearching (state) {
+  setSearching (state, payload) {
+    if (payload) {
+      state.searching = payload.set
+      return
+    }
+
     if (state?.searchKeyword?.length) {
       state.searching = true
-    } else {
-      state.searching = false
     }
   }
 }
diff --git a/app/tests/jest/script/test-setup.js b/app/tests/jest/script/test-setup.js
@@ -1,3 +1,5 @@
+import 'jest-canvas-mock'
+
 /* eslint-env jest */
 const noop = () => {}
 Object.defineProperty(window, 'scrollTo', { value: noop, writable: true })

diff --git a/app/tests/unit/pages/metamine/home.spec.js b/app/tests/unit/pages/metamine/home.spec.js
@@ -19,6 +19,6 @@ describe('Metamine Home page', () => {
   it('run the openLink method', async () => {
     const link = wrapper.find('.card')
     await link.trigger('click')
-    expect(wrapper.vm.$route.path).toEqual('/explorer')
+    expect(wrapper.vm.$route.path).toEqual('/explorer/curate')
   })
 })