feat: Adding caching logic for frontend explorer and visualization pages

app/src/pages/explorer/xml/Xml.vue

@@ -238,7 +238,9 @@ export default {
         this.xmlFinder.length === 0 ||
         !Object.keys(this.xmlFinder).length ||
         this.xmlFinder.totalItems === 0
-      ) { return true }
+      ) {
+        return true
+      }
       return false
     },
     filtersActive () {
@@ -362,7 +364,7 @@ export default {
           }
         }
       },
-      fetchPolicy: 'cache-and-network',
+      fetchPolicy: 'cache-first',
       result ({ data, loading }) {
         if (!loading && data) this.error = null
       },

app/src/pages/explorer/xml/XmlLoader.vue

@@ -1,53 +1,90 @@
 <template>
-  <div class="xmlLoader" >
-    <section class="u_width--max viz-u-postion__rel utility-roverflow" v-if="!!Object.keys(xmlViewer).length && xmlViewer.xmlString">
-      <md-drawer class="md-right" :class="{' md-fixed': showSidepanel}" :md-active.sync="showSidepanel">
-        <comment :type="type" :identifier="optionalChaining(() => xmlViewer.id)"></comment>
-        <md-button @click="showSidepanel = false" class="md-fab md-fixed md-dense md-fab-top-right md-primary btn--primary">
-            <md-icon>close</md-icon>
+  <div class="xmlLoader">
+    <section
+      class="u_width--max viz-u-postion__rel utility-roverflow"
+      v-if="!!Object.keys(xmlViewer).length && xmlViewer.xmlString"
+    >
+      <md-drawer
+        class="md-right"
+        :class="{ ' md-fixed': showSidepanel }"
+        :md-active.sync="showSidepanel"
+      >
+        <comment
+          :type="type"
+          :identifier="optionalChaining(() => xmlViewer.id)"
+        ></comment>
+        <md-button
+          @click="showSidepanel = false"
+          class="md-fab md-fixed md-dense md-fab-top-right md-primary btn--primary"
+        >
+          <md-icon>close</md-icon>
         </md-button>
       </md-drawer>
 
-      <md-content class="u_width--max md-app-side-drawer md-app-container md-scrollbar" >
+      <md-content
+        class="u_width--max md-app-side-drawer md-app-container md-scrollbar"
+      >
         <div :class="[isSmallTabView ? 'u_margin-top-med' : '']">
-          <h2 class="visualize_header-h1 u_margin-top-med u_centralize_text"> {{ optionalChaining(() => xmlViewer.title) }} </h2>
+          <h2 class="visualize_header-h1 u_margin-top-med u_centralize_text">
+            {{ optionalChaining(() => xmlViewer.title) }}
+          </h2>
         </div>
         <!-- xml viewer  -->
         <div class="wrapper">
-          <XmlView :xml='optionalChaining(() => xmlViewer.xmlString)'/>
+          <XmlView :xml="optionalChaining(() => xmlViewer.xmlString)" />
         </div>
-
       </md-content>
-      <div :class="[isSmallTabView ? 'u_margin-top-small u_adjust-banner-text' : 'u--margin-neg','md-fab md-fab-top-right u_width--max u--shadow-none u--layout-flex u--layout-flex-justify-end u--b-rad']">
-        <md-button class="md-fab md-dense md-primary btn--primary" @click.native.prevent="navBack">
+      <div
+        :class="[
+          isSmallTabView
+            ? 'u_margin-top-small u_adjust-banner-text'
+            : 'u--margin-neg',
+          'md-fab md-fab-top-right u_width--max u--shadow-none u--layout-flex u--layout-flex-justify-end u--b-rad'
+        ]"
+      >
+        <md-button
+          class="md-fab md-dense md-primary btn--primary"
+          @click.native.prevent="navBack"
+        >
           <md-tooltip> Go Back </md-tooltip>
           <md-icon>arrow_back</md-icon>
         </md-button>
 
-        <md-button @click="showSidepanel = true" class="md-fab md-dense md-primary btn--primary">
+        <md-button
+          @click="showSidepanel = true"
+          class="md-fab md-dense md-primary btn--primary"
+        >
           <md-tooltip md-direction="top">Comment</md-tooltip>
-            <md-icon>comment</md-icon>
+          <md-icon>comment</md-icon>
         </md-button>
 
-        <md-button @click.prevent="editCuration(xmlViewer.id, xmlViewer.isNewCuration)"
-        v-if="isAuth && (xmlViewer.user === userId || isAdmin)" class="md-fab md-dense md-primary btn--primary ">
+        <md-button
+          @click.prevent="editCuration(xmlViewer.id, xmlViewer.isNewCuration)"
+          v-if="isAuth && (xmlViewer.user === userId || isAdmin)"
+          class="md-fab md-dense md-primary btn--primary"
+        >
           <md-tooltip md-direction="top">Edit Curation</md-tooltip>
-            <md-icon>edit</md-icon>
+          <md-icon>edit</md-icon>
         </md-button>
 
-        <md-button @click="approveCuration" v-if="isAuth && isAdmin" class="md-fab md-dense md-primary btn--primary ">
+        <md-button
+          @click="approveCuration"
+          v-if="isAuth && isAdmin"
+          class="md-fab md-dense md-primary btn--primary"
+        >
           <md-tooltip md-direction="top">Approve</md-tooltip>
-            <md-icon>check</md-icon>
+          <md-icon>check</md-icon>
         </md-button>
-
       </div>
     </section>
 
     <section class="section_loader u--margin-toplg" v-else-if="$apollo.loading">
-      <spinner :loading="$apollo.loading" text='Loading Xml'/>
+      <spinner :loading="$apollo.loading" text="Loading Xml" />
     </section>
     <section class="section_loader u--margin-toplg" v-else>
-      <h2 class="visualize_header-h1 u_margin-top-med u_centralize_text">This XML no longer exists or has been moved</h2>
+      <h2 class="visualize_header-h1 u_margin-top-med u_centralize_text">
+        This XML no longer exists or has been moved
+      </h2>
     </section>
   </div>
 </template>
@@ -99,7 +136,12 @@ export default {
       this.$router.back()
     },
     editCuration (id, isNew) {
-      if (!!id && typeof isNew === 'boolean') return this.$router.push({ name: 'EditXmlCuration', query: { isNew: isNew, id: id } })
+      if (!!id && typeof isNew === 'boolean') {
+        return this.$router.push({
+          name: 'EditXmlCuration',
+          query: { isNew: isNew, id: id }
+        })
+      }
     }
   },
   mounted () {
@@ -114,11 +156,13 @@ export default {
         return {
           input: {
             id: this.$route.params.id,
-            isNewCuration: this.$route?.query?.isNewCuration ? JSON.parse(this.$route?.query?.isNewCuration) : false
+            isNewCuration: this.$route?.query?.isNewCuration
+              ? JSON.parse(this.$route?.query?.isNewCuration)
+              : false
           }
         }
       },
-      fetchPolicy: 'network-only',
+      fetchPolicy: 'cache-and-network',
       error (error) {
         if (error.networkError) {
           const err = error.networkError
@@ -127,7 +171,8 @@ export default {
           this.error = error.graphQLErrors
         }
         this.$store.commit('setSnackbar', {
-          message: error.networkError?.response?.statusText ?? error.graphQLErrors,
+          message:
+            error.networkError?.response?.statusText ?? error.graphQLErrors,
           action: () => this.$apollo.queries.xmlViewer.refetch()
         })
       }

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

@@ -35,7 +35,10 @@ export default {
           }
         }
       }`,
-      variables: { input: { search: 'Keyword', searchValue: payload, pageSize: 100 } }
+      variables: {
+        input: { search: 'Keyword', searchValue: payload, pageSize: 100 }
+      },
+      fetchPolicy: 'cache-first'
     })
     const requestOptions = {
       method: 'POST',
@@ -47,18 +50,20 @@ export default {
     try {
       const response = await fetch(url, requestOptions)
       if (!response || response?.statusText !== 'OK') {
-        const error = new Error(
-          response.message || 'Something went wrong!'
-        )
+        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 total =
+        context.getters.getTotal + responseData?.data?.searchImages?.totalItems
       const groupTotals = context.getters.getTotalGroupings
       groupTotals.getImages = responseData?.data?.searchImages?.totalItems ?? 0
       context.commit('setTotal', total ?? 0)
-      context.commit('setImages', responseData?.data?.searchImages?.images ?? [])
+      context.commit(
+        'setImages',
+        responseData?.data?.searchImages?.images ?? []
+      )
       context.commit('setTotalGrouping', groupTotals)
     } catch (error) {
       const snackbar = {
@@ -72,14 +77,18 @@ export default {
   async getMatchedMaterials (context, payload) {
     const url = `/api/admin/populate-datasets-properties?search=${payload}`
     try {
+      const cache = await context
+        .dispatch('fetchWrapper', { url }, { root: true })
+        .then((res) => res.val)
       const response = await fetch(url, {
-        method: 'GET'
+        method: 'GET',
+        cache
       })
 
       if (!response || response.statusText !== 'OK') {
-        const error = new Error(
-          response?.message || 'Something went wrong!'
-        )
+        const error = new Error(response?.message || 'Something went wrong!', {
+          cause: url
+        })
         throw error
       }
 
@@ -94,6 +103,11 @@ export default {
       context.commit('setMaterials', responseData?.data || [])
       context.commit('setTotalGrouping', groupTotals)
     } catch (error) {
+      await context.dispatch(
+        'fetchWrapper',
+        { url: 'cause' in error },
+        { root: true }
+      )
       const snackbar = {
         message: 'Something went wrong while fetching properties!',
         action: () => context.dispatch('getMatchedMaterials', payload)
@@ -112,15 +126,17 @@ export default {
     }
 
     try {
+      const cache = await context
+        .dispatch('fetchWrapper', { url }, { root: true })
+        .then((res) => res.val)
       const response = await fetch(url, {
-        method: 'GET'
+        method: 'GET',
+        cache
       })
 
       if (!response || response.statusText !== 'OK') {
         context.commit('setIsLoading', false)
-        const error = new Error(
-          response?.message || 'Something went wrong!'
-        )
+        const error = new Error(response?.message || 'Something went wrong!')
         throw error
       }
 
@@ -159,7 +175,9 @@ export default {
     const data = responseData?.data?.hits || []
     const types = Object.create({})
     data.forEach((item) => {
-      const categoryExist = Object.keys(types)?.find(currKey => currKey === item?._index) || undefined
+      const categoryExist =
+        Object.keys(types)?.find((currKey) => currKey === item?._index) ||
+        undefined
 
       if (categoryExist) {
         types[categoryExist].push(item._source)
@@ -170,8 +188,9 @@ export default {
     const articlesLength = types?.articles?.length || 0
     const samplesLength = types?.samples?.length || 0
     const chartsLength = types?.charts?.length || 0
-    const total = [articlesLength, samplesLength, chartsLength]
-      .reduce((total, value) => total + value)
+    const total = [articlesLength, samplesLength, chartsLength].reduce(
+      (total, value) => total + value
+    )
 
     context.commit('setArticles', types?.articles || [])
     context.commit('setSamples', types?.samples || [])
@@ -189,7 +208,7 @@ export default {
 
   saveAutosuggest (context, responseData) {
     const data = responseData?.data?.hits || []
-    const suggestions = data.map(item => {
+    const suggestions = data.map((item) => {
       return item?._source?.label
     })
     context.commit('setAutosuggest', suggestions || [])

app/src/store/modules/metamineNU/actions.js

@@ -16,17 +16,37 @@ export default {
       csvData = []
       // fetch data from Minio
       try {
-        const fetchedNamesResponse = await fetch('/api/files/metamine')
+        const cache = await dispatch(
+          'fetchWrapper',
+          { url: '/api/files/metamine' },
+          { root: true }
+        ).then((res) => res.val)
+        const fetchedNamesResponse = await fetch('/api/files/metamine', {
+          cache
+        })
           .then((response) => response.json())
-          .catch((err) => {
+          .catch(async (err) => {
+            await dispatch(
+              'fetchWrapper',
+              { url: '/api/files/metamine', reset: true },
+              { root: true }
+            )
+
             throw new Error(err?.message ?? 'Something went wrong')
           })
         // set fetchedNames
         fetchedNames = fetchedNamesResponse?.fetchedNames ?? []
 
-        const getVisualizationList = fetchedNames.map(function (item) {
+        const getVisualizationList = fetchedNames.map(async function (item) {
           item.name = decodeURI(item.name)
-          return fetch(`/api/files/metamine/${encodeURI(item.name)}`)
+          const url = `/api/files/metamine/${encodeURI(item.name)}`
+          const cache = await dispatch(
+            'fetchWrapper',
+            { url },
+            { root: true }
+          ).then((res) => res.val)
+
+          return fetch(url, { cache })
         })
         await Promise.allSettled(getVisualizationList)
           .then(async (visualizationListResponse) => {