From 2aa1f00c60d4c68681636c863cfead73e2ad7920 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 3 Jul 2023 15:58:55 -0300
Subject: [PATCH] Add spinners and cached map information

---
 src/components/VSkeleton.global.vue           |  2 +-
 src/components/VSpinner.global.vue            | 27 +++++++++++--------
 src/modules/otus/components/DWCDownload.vue   |  1 +
 .../Panel/PanelDescendants/Descendants.vue    | 17 +++++++++---
 .../components/Panel/PanelMap/CachedMap.vue   | 18 ++++++++++---
 .../PanelNomenclature/PanelNomenclature.vue   |  6 ++++-
 .../PanelNomenclatureReferences.vue           |  5 ++++
 .../Panel/PanelStats/PanelStats.vue           |  5 ++++
 src/modules/otus/components/SiteMap.vue       |  1 +
 src/modules/otus/store/actions/loadCatalog.js |  5 +++-
 src/modules/otus/store/store.js               |  3 ++-
 11 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/src/components/VSkeleton.global.vue b/src/components/VSkeleton.global.vue
index 3a25638..af24498 100644
--- a/src/components/VSkeleton.global.vue
+++ b/src/components/VSkeleton.global.vue
@@ -7,7 +7,7 @@
     <span
       v-for="line in lines"
       :key="line"
-      class="inline-block w-full rounded-sm bg-base-muted leading-5"
+      class="inline-block w-full rounded-sm bg-base-muted leading-5 animate-pulse"
     >
       &zwnj;
     </span>
diff --git a/src/components/VSpinner.global.vue b/src/components/VSpinner.global.vue
index 43bc4f8..6a2fee7 100644
--- a/src/components/VSpinner.global.vue
+++ b/src/components/VSpinner.global.vue
@@ -13,6 +13,7 @@
         :style="logoSize"
         aria-hidden="true"
         class="text-base-lighter animate-spin fill-primary-color"
+        :class="logoClass"
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -29,7 +30,9 @@
       <span class="sr-only">Loading...</span>
 
       <div
-        class="text-base-content"
+        v-if="legend.length"
+        class="text-base-content text-center"
+        :class="legendClass"
         :style="legendStyle"
       >
         <span
@@ -76,10 +79,12 @@ const props = defineProps({
 
   legendStyle: {
     type: Object,
-    default: () => ({
-      marginTop: '30px',
-      textAlign: 'center'
-    })
+    default: () => ({})
+  },
+
+  legendClass: {
+    type: String,
+    default: 'mt-5'
   },
 
   showLegend: {
@@ -99,10 +104,12 @@ const props = defineProps({
 
   logoSize: {
     type: Object,
-    default: () => ({
-      width: '50px',
-      height: '50px'
-    })
+    default: () => ({})
+  },
+
+  logoClass: {
+    type: String,
+    default: 'w-12 h-12'
   }
 })
 
@@ -201,8 +208,6 @@ const checkResize = () => {
   svg {
     display: block;
     position: relative;
-    width: 30px;
-    height: 30px;
     margin: 0px auto;
   }
 
diff --git a/src/modules/otus/components/DWCDownload.vue b/src/modules/otus/components/DWCDownload.vue
index 7ec2a9f..584a4c3 100644
--- a/src/modules/otus/components/DWCDownload.vue
+++ b/src/modules/otus/components/DWCDownload.vue
@@ -2,6 +2,7 @@
   <VButton
     primary
     class="text-sm flex items-center"
+    title="Download DwC Occurrences"
     @click="
       () => {
         downloadCSV()
diff --git a/src/modules/otus/components/Panel/PanelDescendants/Descendants.vue b/src/modules/otus/components/Panel/PanelDescendants/Descendants.vue
index d6152a4..54fd714 100644
--- a/src/modules/otus/components/Panel/PanelDescendants/Descendants.vue
+++ b/src/modules/otus/components/Panel/PanelDescendants/Descendants.vue
@@ -1,5 +1,10 @@
 <template>
   <VCard>
+    <VSpinner
+      v-if="isLoading"
+      logo-class="w-8 h-8"
+      legend=""
+    />
     <VCardHeader class="flex justify-between">
       <h2 class="text-md">Descendants and synonyms</h2>
       <PanelDropdown panel-key="panel:descendants" />
@@ -23,10 +28,10 @@
 
 <script setup>
 import { ref, watch } from 'vue'
+import { useOtuPageRequest } from '@/modules/otus/helpers/useOtuPageRequest'
 import DescendantsTree from './DescendantsTree.vue'
 import TaxonWorks from '../../../services/TaxonWorks'
 import PanelDropdown from '../PanelDropdown.vue'
-import { useOtuPageRequest } from '@/modules/otus/helpers/useOtuPageRequest'
 
 const props = defineProps({
   otuId: {
@@ -36,6 +41,7 @@ const props = defineProps({
 })
 
 const taxonomy = ref(null)
+const isLoading = ref(false)
 
 watch(
   () => props.otuId,
@@ -44,11 +50,14 @@ watch(
       return
     }
 
+    isLoading.value = true
     useOtuPageRequest('panel:descendants', () =>
       TaxonWorks.getTaxonomy(props.otuId, { max_descendants_depth: 1 })
-    ).then(({ data }) => {
-      taxonomy.value = data
-    })
+    )
+      .then(({ data }) => {
+        taxonomy.value = data
+      })
+      .finally(() => (isLoading.value = false))
   },
   { immediate: true }
 )
diff --git a/src/modules/otus/components/Panel/PanelMap/CachedMap.vue b/src/modules/otus/components/Panel/PanelMap/CachedMap.vue
index 582fcf6..0719e4d 100644
--- a/src/modules/otus/components/Panel/PanelMap/CachedMap.vue
+++ b/src/modules/otus/components/Panel/PanelMap/CachedMap.vue
@@ -18,7 +18,7 @@
     @close="() => (isModalVisible = false)"
   >
     <template #header>
-      <h3>Cached map</h3>
+      <h3 class="font-medium">Cached map</h3>
     </template>
     <div class="p-4 pt-0">
       <VTable>
@@ -37,14 +37,18 @@
                 v-if="cachedMap.synced"
               >
                 <IconCheck class="w-4 h-4" />
-                <span class="ml-1">Map is synchronized</span>
+                <span class="ml-1">
+                  Map is synchronized with the latest changes *
+                </span>
               </p>
               <p
                 class="text-warning flex text-sm items-center"
                 v-else
               >
                 <IconWarning class="w-4 h-4" />
-                <span class="ml-1">Map is not synchronized</span>
+                <span class="ml-1">
+                  Map is not synchronized with the latest changes *
+                </span>
               </p>
             </VTableBodyCell>
           </VTableBodyRow>
@@ -75,6 +79,14 @@
           </VTableBodyRow>
         </VTableBody>
       </VTable>
+      <p class="italic text-xs pt-4">
+        * Aggregate maps are generated from georeference and asserted
+        distribution data. Map computation takes time, and as such they are
+        re-calculated periodically rather than when individual georeferences and
+        asserted distributions are created, destroyed, or updated. When a
+        warning notice is present then the map is not syncronized with the
+        latest changes to the underlying data.
+      </p>
     </div>
   </VModal>
 </template>
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue
index f272516..31bdd7a 100644
--- a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue
+++ b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue
@@ -1,5 +1,10 @@
 <template>
   <VCard>
+    <VSpinner
+      v-if="store.catalog.isLoading"
+      logo-class="w-8 h-8"
+      legend=""
+    />
     <VCardHeader class="flex justify-between">
       <h2 class="text-md">
         Nomenclature ({{ store.catalog.timeline.length }})
@@ -9,7 +14,6 @@
         panel-key="taxonomy"
       />
     </VCardHeader>
-
     <ul class="text-sm">
       <CitationRow
         v-for="citation in citationList.first"
diff --git a/src/modules/otus/components/Panel/PanelNomenclatureReferences/PanelNomenclatureReferences.vue b/src/modules/otus/components/Panel/PanelNomenclatureReferences/PanelNomenclatureReferences.vue
index 774fc77..b7a7766 100644
--- a/src/modules/otus/components/Panel/PanelNomenclatureReferences/PanelNomenclatureReferences.vue
+++ b/src/modules/otus/components/Panel/PanelNomenclatureReferences/PanelNomenclatureReferences.vue
@@ -1,5 +1,10 @@
 <template>
   <VCard>
+    <VSpinner
+      v-if="store.catalog.isLoading"
+      logo-class="w-8 h-8"
+      legend=""
+    />
     <VCardHeader class="flex justify-between">
       <h2 class="text-md">
         Nomenclature references ({{ store.catalog.sources.length }})
diff --git a/src/modules/otus/components/Panel/PanelStats/PanelStats.vue b/src/modules/otus/components/Panel/PanelStats/PanelStats.vue
index 7df76d7..dc58d84 100644
--- a/src/modules/otus/components/Panel/PanelStats/PanelStats.vue
+++ b/src/modules/otus/components/Panel/PanelStats/PanelStats.vue
@@ -1,5 +1,10 @@
 <template>
   <VCard>
+    <VSpinner
+      v-if="store.catalog.isLoading"
+      logo-class="w-8 h-8"
+      legend=""
+    />
     <VCardHeader class="flex justify-between">
       <h2 class="text-md">Stats</h2>
       <PanelDropdown panel-key="taxonomy" />
diff --git a/src/modules/otus/components/SiteMap.vue b/src/modules/otus/components/SiteMap.vue
index 94515b2..14d5350 100644
--- a/src/modules/otus/components/SiteMap.vue
+++ b/src/modules/otus/components/SiteMap.vue
@@ -3,6 +3,7 @@
     <VButton
       primary
       class="text-sm md:flex items-center gap-1 hidden"
+      title="Links used to obtain the information present on this page in JSON format."
       @click="isModalVisible = true"
     >
       <IconJson class="w-4 h-4" />
diff --git a/src/modules/otus/store/actions/loadCatalog.js b/src/modules/otus/store/actions/loadCatalog.js
index cf53b7d..b36a563 100644
--- a/src/modules/otus/store/actions/loadCatalog.js
+++ b/src/modules/otus/store/actions/loadCatalog.js
@@ -3,6 +3,8 @@ import { useOtuPageRequest } from '../../helpers/useOtuPageRequest'
 
 export const actionLoadCatalog = {
   async loadCatalog(taxonId) {
+    this.catalog.isLoading = true
+
     const response = await useOtuPageRequest('taxonomy', () =>
       TaxonWorks.getTaxonNameCitations(taxonId)
     )
@@ -11,7 +13,8 @@ export const actionLoadCatalog = {
       ...response.data,
       sources: response.data.sources.map(({ cached, url }) =>
         cached.replace(url, `<a href="${url}">${url}</a>`)
-      )
+      ),
+      isLoading: false
     }
   }
 }
diff --git a/src/modules/otus/store/store.js b/src/modules/otus/store/store.js
index 2f8e481..61ba11d 100644
--- a/src/modules/otus/store/store.js
+++ b/src/modules/otus/store/store.js
@@ -24,7 +24,8 @@ export const useOtuStore = defineStore('otuStore', {
       catalog: {
         sources: [],
         stats: {},
-        timeline: []
+        timeline: [],
+        isLoading: false
       },
       taxonomy: {
         commonNames: [],