chore(#155): Fixes (#211)

* #155: add backup to git ignore * #155: Add node modules to ignore * #155: Add a new library for pixel unit testing * #155: Re-enable pixel unit test * #155: Re-enable pixel unit test * #177: Add 404 page and updated app router * #177: Styling 404 page * #155: updated search, testing and dv link * #155: fix typos and update creation page to use curate * #155: Add header to page not found * #155: update unit test for page-not-found * #155: Updated code owners * #155: Update home link
Duke-MatSci · Jun 2, 2022 · a44fc9a · a44fc9a
1 parent 4361771
commit a44fc9a
Show file tree

Hide file tree

Showing 22 changed files with 276 additions and 79 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -1,2 +1,2 @@
 *   @tholulomo @aswallace @stouffers
-/whyis/ @jpmccu @roryschadler
+/whyis/ @jpmccu @tholulomo
diff --git a/.gitignore b/.gitignore
@@ -39,6 +39,7 @@ mockDB/fuseki/log4j2.properties
 
 #Sync DB
 mockDB/restore/mongodump/
+mockDB/materialsmine_backup/
 
 #Elastic Search
 mockDB/es/

diff --git a/app/.dockerignore b/app/.dockerignore
@@ -0,0 +1 @@
+node_modules
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -65,6 +65,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
+    "jest-canvas-mock": "^2.4.0",
     "jest-raw-loader": "^1.0.1",
     "jest-serializer-vue": "^2.0.2",
     "lint-staged": "^9.5.0",

diff --git a/app/src/assets/css/modules/_pages.scss b/app/src/assets/css/modules/_pages.scss
@@ -358,3 +358,31 @@
         border-bottom: .1rem solid $primary;
     }
 }
+
+
+.page-not-found {
+    padding: 5rem;
+    height: 100vh;
+    text-align: center;
+    @include respond(tab-port) {
+        padding: 1rem;
+    }
+
+    &-header {
+        padding: 1.5em 0 .3em;
+        font-size: 6em;
+        color: $primary;
+    }
+
+    p {
+        padding: 0 20em;
+
+        @include respond(tab-port) {
+            padding: 0 5em;
+        }
+
+        @include respond(phone) {
+            padding: 0;
+        }
+    }
+}
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>
+          <router-link class="tabs" to="/explorer/curate" v-slot="{navigate, href}" custom>
+              <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/NotFound.vue b/app/src/pages/NotFound.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <header class="header">
+            <div class="wrapper">
+                <router-link to="/" class="header-logo">
+                    <div class="">
+                        <img src="@/assets/img/materialsmine_logo.png" alt="MaterialsMine Logo">
+                    </div>
+                </router-link>
+                <div class="nav_mobile-icon">
+                    <div class="nav_mobile-icon-menu"></div>
+                </div>
+                <div class="header_nav">
+                    <div class="nav nav_menu u--inline">
+                        <ul>
+                            <li><a href="/nm">NanoMine</a></li>
+                            <li><a href="/mm">MetaMine</a></li>
+                        </ul>
+                    </div>
+                    <div class="u--inline">
+                        <div v-if="$store.getters.isAuthenticated" class="nav_menu--container">
+                            <a class="u--default-size nav_menu--handler" style="color:#fff; font-size:1.2rem !important;">
+                                <i class="material-icons" style="vertical-align: middle;">perm_identity</i>
+                            </a>
+                            <div class="nav_menu--siblings nav_menu--sibheader">
+                                <span class="nav_menu--siblings-lists" @click="$store.dispatch('logout')"><a>Logout</a></span>
+                            </div>
+                        </div>
+                        <div v-else>
+                            <a class="btn btn--tertiary btn--noradius">Login/Register</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <div class="page-not-found">
+            <h1 class="page-not-found-header u_margin-bottom-small">Oops!</h1>
+            <h2 class="u_margin-top-med u_margin-bottom-small">404 - Page Not Found</h2>
+            <p>The page you are looking for might have been removed, had its name changed or is temporarily unavailable. Would you like to go back to <router-link to=""><a @click="$router.go(-1)">previous page</a></router-link>?</p>
+        </div>
+    </div>
+</template>
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>
@@ -66,7 +66,7 @@ export default {
     return {
       pageNavLinks: [
         { icon: 'grid_view', text: 'Gallery', link: 'explorer/visualization' },
-        { icon: 'cloud_upload', text: 'Curate', link: 'explorer/create' },
+        { icon: 'cloud_upload', text: 'Curate', link: 'explorer/curate' },
         { icon: 'help', text: 'Help', link: 'nm/how' }
       ]
     }
@@ -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 Datavoyager
+                  </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;
 
   > * {