#300: Merged 🔥hotfix_frontend_bug_fix to consolidate PR

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

@@ -38,10 +38,6 @@
         }
         &-right {
             right: 0;
-
-            @include respond(phone) {
-                right: -0.5rem;
-            }
         }
     }
 
@@ -61,6 +57,10 @@
                 margin: 4rem 0 1.4rem 0;
             }
 
+            @include respond(tab-port){
+                margin: -1.4rem 0 1.4rem 0;
+            }
+
             @include respond(phone){
                 font-size: 2.8rem;
                 margin: 1rem 0 1rem 0;

app/src/components/Snackbar.vue

@@ -4,8 +4,6 @@
       {{message}}
       <span>
         <md-button v-if="action && !duration" id="snackbarAction" class="md-primary" @click.native="callAction">Retry</md-button>
-        <!-- <md-button v-else id="snackbarRefresh" class="md-primary" @click.native="refresh">Refresh</md-button>
-        <md-button id="snackbarClose" class="md-primary" @click.native="show = false">Close</md-button> -->
       </span>
     </md-snackbar>
   </div>
@@ -27,7 +25,11 @@ export default {
       show: false,
       message: '',
       action: null,
+<<<<<<< HEAD
       duration: false
+=======
+      isInfinity: Infinity
+>>>>>>> 🔥hotfix_frontend_bug_fix
     }
   },
   computed: {
@@ -42,7 +44,10 @@ export default {
     // If an action has been passed through vuex as a callback, call it
     callAction () {
       if (this.action) {
+        // Toggle the snackbar before calling the action to reload it's timer
+        this.show = false
         this.action()
+        this.show = false
       }
     }
   },

app/src/components/nanomine/PageHeader.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <md-app-toolbar class="md-dense md-primary" id="reset_bg">
-            <div class="md-toolbar-row">
+            <div class="md-toolbar-row viz-u-postion__rel">
                 <div class="md-toolbar-section-start">
                     <md-button class="md-icon-button" @click="toggler">
                         <md-icon>menu</md-icon>
@@ -47,7 +47,7 @@
             </div>
             <div class="section_banner__nav">
                 <nav class="nav_menu">
-                    <ul class="nav_ul">
+                    <ul>
                         <li class="u_margin-right-small">
                             <div class="nav_menu--container">
                                 <a class="u--default-size nav_menu--handler" href="#">About</a>

app/src/mixins/explorerSearch.js

@@ -6,26 +6,21 @@ 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/setEnableAutosuggest', true)
         await this.$store.commit('explorer/setSearchKeyword', payload)
         await this.requestSearch(payload)
       }
     },
     searchEnabled () {
       return this.$store.getters['explorer/getSearching']
     },
-    ...mapGetters({ suggestions: 'explorer/results/getSuggestions' })
+    ...mapGetters({ suggestions: 'explorer/results/getSuggestions', enableAutosuggest: 'explorer/getAutosuggest' })
   },
   methods: {
     ...mapMutations('explorer', ['setResultsTab', 'setSearching', 'setSearchKeyword']),

app/src/pages/explorer/Home.vue

@@ -1,7 +1,5 @@
 <template>
 	<div @click="disableRender">
-		<!-- <facet-panel :searchEnabled="searchEnabled" class="facet_panel" /> -->
-		<facet-panel class="facet_panel" />
 		<div class="section_teams" v-if="!searchEnabled">
 			<div class="search_box">
 				<h2 class="search_box_header">Welcome to MM Explorer</h2>
@@ -54,7 +52,6 @@
 
 <script>
 import explorerSearch from '@/mixins/explorerSearch'
-import FacetPanel from '@/components/explorer/Facet.vue'
 import SearchHeader from '@/components/explorer/SearchHeader.vue'
 import SearchResultsTable from '@/components/explorer/SearchResultsTable.vue'
 
@@ -71,19 +68,14 @@ export default {
     }
   },
   components: {
-    FacetPanel,
     SearchHeader,
     SearchResultsTable
   },
-  // Todo: Remove later! This is not required anymore. It feeds the facet dialog with materials data
-  //   async mounted () {
-  //     await this.$store.dispatch('explorer/facetFilterMaterials')
-  //   },
   methods: {
     async disableRender (e) {
       const selected = e.target.closest('.search_box')
       if (!selected) {
-        this.enableAutosuggest = false
+        await this.$store.commit('explorer/setEnableAutosuggest', false)
       }
     }
   }

app/src/store/modules/explorer/getters.js

@@ -19,5 +19,8 @@ export default {
   },
   getSelectedFacetFilterMaterialsValue (state) {
     return state.selectedFacetFilterMaterialsValue
+  },
+  getAutosuggest (state) {
+    return state.enableAutosuggest
   }
 }

app/src/store/modules/explorer/index.js

@@ -16,6 +16,7 @@ export default {
   state () {
     return {
       toggleMenuVisibility: false,
+      enableAutosuggest: true,
       resultsTab: 'getArticles',
       searchKeyword: '',
       searching: false,

app/src/store/modules/explorer/mutations.js

@@ -26,5 +26,8 @@ export default {
     if (state.searchKeyword && state.searchKeyword.length) {
       state.searching = true
     }
+  },
+  setEnableAutosuggest (state, payload) {
+    state.enableAutosuggest = payload
   }
 }

app/src/store/modules/explorer/results/actions.js

@@ -35,7 +35,7 @@ export default {
           }
         }
       }`,
-      variables: { input: { search: 'filterByKeyword', searchValue: payload, pageSize: 100 } }
+      variables: { input: { search: 'Keyword', searchValue: payload, pageSize: 100 } }
     })
     const requestOptions = {
       method: 'POST',
@@ -44,46 +44,62 @@ export default {
       },
       body: graphql
     }
-    const response = await fetch(url, requestOptions)
-    if (!response || response?.statusText !== 'OK') {
-      const error = new Error(
-        response.message || 'Something went wrong!'
-      )
-      throw error
-    }
+    try {
+      const response = await fetch(url, requestOptions)
+      if (!response || response?.statusText !== 'OK') {
+        const error = new Error(
+          response.message || 'Something went wrong!'
+        )
+        throw error
+      }
 
-    const responseData = await response.json()
-    const total = context.getters.getTotal + responseData?.data?.searchImages?.totalItems
-    const groupTotals = context.getters.getTotalGroupings
-    groupTotals.getImages = responseData?.data?.searchImages?.totalItems
-    context.commit('setTotal', total || 0)
-    context.commit('setImages', responseData?.data?.searchImages?.images || [])
-    context.commit('setTotalGrouping', groupTotals)
+      const responseData = await response.json()
+      const total = context.getters.getTotal + responseData?.data?.searchImages?.totalItems
+      const groupTotals = context.getters.getTotalGroupings
+      groupTotals.getImages = responseData?.data?.searchImages?.totalItems
+      context.commit('setTotal', total || 0)
+      context.commit('setImages', responseData?.data?.searchImages?.images || [])
+      context.commit('setTotalGrouping', groupTotals)
+    } catch (error) {
+      const snackbar = {
+        message: 'Something went wrong while fetching images!',
+        action: () => context.dispatch('getMatchedImages', payload)
+      }
+      return context.commit('setSnackbar', snackbar, { root: true })
+    }
   },
 
   async getMatchedMaterials (context, payload) {
     const url = `/api/admin/populate-datasets-properties?search=${payload}`
-    const response = await fetch(url, {
-      method: 'GET'
-    })
-
-    if (!response || response.statusText !== 'OK') {
-      const error = new Error(
-        response?.message || 'Something went wrong!'
-      )
-      throw error
-    }
+    try {
+      const response = await fetch(url, {
+        method: 'GET'
+      })
+
+      if (!response || response.statusText !== 'OK') {
+        const error = new Error(
+          response?.message || 'Something went wrong!'
+        )
+        throw error
+      }
 
-    const responseData = await response.json()
-    const materialsTotal = responseData?.data?.length || 0
+      const responseData = await response.json()
+      const materialsTotal = responseData?.data?.length || 0
 
-    const total = context.getters.getTotal + materialsTotal
-    const groupTotals = context.getters.getTotalGroupings
-    groupTotals.getMaterials = materialsTotal
+      const total = context.getters.getTotal + materialsTotal
+      const groupTotals = context.getters.getTotalGroupings
+      groupTotals.getMaterials = materialsTotal
 
-    context.commit('setTotal', total || 0)
-    context.commit('setMaterials', responseData?.data || [])
-    context.commit('setTotalGrouping', groupTotals)
+      context.commit('setTotal', total || 0)
+      context.commit('setMaterials', responseData?.data || [])
+      context.commit('setTotalGrouping', groupTotals)
+    } catch (error) {
+      const snackbar = {
+        message: 'Something went wrong while fetching properties!',
+        action: () => context.dispatch('getMatchedMaterials', payload)
+      }
+      return context.commit('setSnackbar', snackbar, { root: true })
+    }
   },
 
   async outboundSearchRequest (context, payload) {
@@ -95,27 +111,35 @@ export default {
       url = `/api/search/autosuggest?search=${keyPhrase}`
     }
 
-    const response = await fetch(url, {
-      method: 'GET'
-    })
-
-    if (!response || response.statusText !== 'OK') {
-      context.commit('setIsLoading', false)
-      const error = new Error(
-        response?.message || 'Something went wrong!'
-      )
-      throw error
-    }
+    try {
+      const response = await fetch(url, {
+        method: 'GET'
+      })
+
+      if (!response || response.statusText !== 'OK') {
+        context.commit('setIsLoading', false)
+        const error = new Error(
+          response?.message || 'Something went wrong!'
+        )
+        throw error
+      }
 
-    if (response.status === 201) {
-      return
-    }
+      if (response.status === 201) {
+        return
+      }
 
-    const responseData = await response.json()
-    if (type === 'search') {
-      return context.dispatch('saveSearch', responseData)
-    } else {
-      return context.dispatch('saveAutosuggest', responseData)
+      const responseData = await response.json()
+      if (type === 'search') {
+        return context.dispatch('saveSearch', responseData)
+      } else {
+        return context.dispatch('saveAutosuggest', responseData)
+      }
+    } catch (error) {
+      const snackbar = {
+        message: 'Something went wrong!',
+        action: () => context.dispatch('outboundSearchRequest', payload)
+      }
+      return context.commit('setSnackbar', snackbar, { root: true })
     }
   },