From 7f67b6fec275942fdda3dcc970b7248d02e2434a Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 12 Jun 2023 19:12:03 -0300
Subject: [PATCH 1/2] Add sitemap and otu request store

---
 src/components/Dropdown/Dropdown.global.vue   | 25 +++++++-
 src/components/Icon/IconJson.global.vue       | 13 +++++
 .../ImageViewer/ImageViewer.global.vue        | 53 +++++++----------
 src/components/Modal/VModal.global.vue        | 54 ++++++++++++++++++
 src/modules/otus/components/DWCDownload.vue   |  2 +-
 .../Panel/PanelContent/PanelContent.vue       |  5 +-
 .../otus/components/Panel/PanelDropdown.vue   | 57 +++++++++++++++++++
 .../PanelNomenclature/PanelNomenclature.vue   |  1 -
 .../PanelNomenclatureCitations.vue            | 10 ++--
 .../PanelNomenclatureReferences.vue           | 10 ++--
 .../Panel/PanelStats/PanelStats.vue           | 23 ++++++--
 .../PanelTypeSpecimen/PanelTypeSpecimen.vue   | 29 +++++++---
 src/modules/otus/components/SiteMap.vue       | 34 +++++++++++
 src/modules/otus/helpers/useOtuPageRequest.js | 12 ++++
 src/modules/otus/store/actions/loadCatalog.js | 16 ++----
 src/modules/otus/store/request.js             | 33 +++++++++++
 src/modules/otus/store/store.js               | 16 +++++-
 src/modules/otus/views/Index.vue              |  4 +-
 18 files changed, 320 insertions(+), 77 deletions(-)
 create mode 100644 src/components/Icon/IconJson.global.vue
 create mode 100644 src/components/Modal/VModal.global.vue
 create mode 100644 src/modules/otus/components/Panel/PanelDropdown.vue
 create mode 100644 src/modules/otus/components/SiteMap.vue
 create mode 100644 src/modules/otus/helpers/useOtuPageRequest.js
 create mode 100644 src/modules/otus/store/request.js

diff --git a/src/components/Dropdown/Dropdown.global.vue b/src/components/Dropdown/Dropdown.global.vue
index d42b56f..f0ec7c5 100644
--- a/src/components/Dropdown/Dropdown.global.vue
+++ b/src/components/Dropdown/Dropdown.global.vue
@@ -8,12 +8,13 @@
     </button>
     <ul
       v-if="isVisible"
+      ref="element"
       class="bg-base-foreground absolute font-normal text-sm text-base-lighter right-0 z-10 mt-2 w-56 origin-top-right rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
     >
       <li
         v-for="item in items"
         :key="item.label"
-        class="block w-full px-4 py-2 text-left text-sm cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 box-border"
+        class="block w-full px-4 py-2 text-left cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 box-border border-b border-base-border last:border-b-0"
         @click="itemClicked(item)"
       >
         {{ item.label }}
@@ -23,7 +24,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 
 defineProps({
   items: {
@@ -32,6 +33,7 @@ defineProps({
   }
 })
 
+const element = ref(null)
 const isVisible = ref(false)
 
 const toggleMenu = () => {
@@ -43,4 +45,23 @@ const itemClicked = (item) => {
 
   item.action()
 }
+
+function handleEvent(event) {
+  if (!event.target || !element.value?.contains(event.target)) {
+    isVisible.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', handleEvent, {
+    passive: true,
+    capture: true
+  })
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', handleEvent, {
+    capture: true
+  })
+})
 </script>
diff --git a/src/components/Icon/IconJson.global.vue b/src/components/Icon/IconJson.global.vue
new file mode 100644
index 0000000..901f7f0
--- /dev/null
+++ b/src/components/Icon/IconJson.global.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M5 3h2v2H5v5a2 2 0 0 1-2 2a2 2 0 0 1 2 2v5h2v2H5c-1.07-.27-2-.9-2-2v-4a2 2 0 0 0-2-2H0v-2h1a2 2 0 0 0 2-2V5a2 2 0 0 1 2-2m14 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2a2 2 0 0 1-2-2V5h-2V3h2m-7 12a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m-4 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m8 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1Z"
+    />
+  </svg>
+</template>
diff --git a/src/components/ImageViewer/ImageViewer.global.vue b/src/components/ImageViewer/ImageViewer.global.vue
index e746cb1..d6d1ad8 100644
--- a/src/components/ImageViewer/ImageViewer.global.vue
+++ b/src/components/ImageViewer/ImageViewer.global.vue
@@ -1,26 +1,28 @@
 <template>
-  <div 
+  <div
     class="fixed z-[10000] h-full overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md bg-base-foreground"
   >
-    <div 
+    <div
       class="min-w-96 dark:bg-slate-900 rounded-lg shadow-sm mb-24"
       @click.stop
     >
-      <div class="absolute rounded-t-lg w-auto max-h-full h-auto top-12 bottom-44 left-0 right-0 flex justify-center align-middle">
+      <div
+        class="absolute rounded-t-lg w-auto max-h-full h-auto top-12 bottom-44 left-0 right-0 flex justify-center align-middle"
+      >
         <VSpinner v-if="isLoading" />
         <img
           ref="imageElement"
           class="mx-auto cursor-zoom-out w-auto max-w-full max-h-full h-auto my-auto"
           :src="image.original"
           @click="emit('close')"
-        >
+        />
 
         <ControlNextImage
           v-if="next"
           class="right-0 absolute my-auto top-1/2 -translate-y-1/2"
           @click="emit('next')"
         />
-        <ControlPreviousImage 
+        <ControlPreviousImage
           v-if="previous"
           class="left-0 absolute my-auto top-1/2 -translate-y-1/2"
           @click="emit('previous')"
@@ -28,22 +30,12 @@
       </div>
     </div>
     <div class="bottom-0 fixed max-w-full w-full">
-      <div 
-        class="
-        text-base-content
-        text-sm
-        attributions
-        p-6
-        align-middle
-        flex
-        justify-between
-        flex-col
-        text-center
-      "
+      <div
+        class="text-base-content text-sm attributions p-6 align-middle flex justify-between flex-col text-center"
       >
         <ImageDepictions
           class="my-auto"
-          :depictions="image.depictions" 
+          :depictions="image.depictions"
         />
         <ImageAttribution
           class="my-auto"
@@ -64,9 +56,7 @@
         />
       </div>
     </div>
-    <ImageToolbar
-      class="w-full absolute top-0 h-12 left-0"
-    >
+    <ImageToolbar class="w-full absolute top-0 h-12 left-0 items-center">
       <ImageViewerCounter
         :current-image="index"
         :total-images="images.length"
@@ -112,12 +102,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits([
-  'close',
-  'previous',
-  'next',
-  'selectIndex'
-])
+const emit = defineEmits(['close', 'previous', 'next', 'selectIndex'])
 
 const handleKeyboard = ({ key }) => {
   switch (key) {
@@ -125,15 +110,15 @@ const handleKeyboard = ({ key }) => {
       if (props.previous) {
         emit('previous')
       }
-      break;
+      break
     case 'ArrowRight':
       if (props.next) {
         emit('next')
       }
-      break;
+      break
     case 'Escape':
       emit('close')
-      break;
+      break
   }
 }
 
@@ -144,17 +129,17 @@ const image = computed(() => props.images[props.index])
 document.addEventListener('keyup', handleKeyboard)
 
 onMounted(() => {
-  imageElement.value.addEventListener('load', () => isLoading.value = false)
+  imageElement.value.addEventListener('load', () => (isLoading.value = false))
   document.body.classList.add('overflow-hidden')
 })
 
-onUnmounted(() => { 
+onUnmounted(() => {
   document.removeEventListener('keyup', handleKeyboard)
   document.body.classList.remove('overflow-hidden')
 })
 
 watch(
-  () => props.index, 
-  () => isLoading.value = true
+  () => props.index,
+  () => (isLoading.value = true)
 )
 </script>
diff --git a/src/components/Modal/VModal.global.vue b/src/components/Modal/VModal.global.vue
new file mode 100644
index 0000000..1ddc78d
--- /dev/null
+++ b/src/components/Modal/VModal.global.vue
@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="fixed top-0 left-0 w-full h-screen max-h-screen flex flex-col justify-center bg-black bg-opacity-50 z-[2000]"
+    @click="emit('close')"
+    @key.esc.stop="emit('close')"
+  >
+    <div
+      class="h-full md:h-auto mx-auto md:max-h-[70vh] bg-base-foreground container"
+    >
+      <div
+        class="w-full p-4 md:p-4 flex flex-row box-border justify-between items-center"
+      >
+        <slot name="header">
+          <span />
+        </slot>
+        <IconClose
+          class="w-6 h-6 cursor-pointer opacity-50"
+          @click="() => emit('close')"
+        />
+      </div>
+      <div
+        class="bg-base-foreground overflow-x-auto h-full md:h-auto max-h-full"
+      >
+        <slot />
+      </div>
+      <div>
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+
+const emit = defineEmits(['close'])
+
+const handleKeys = (e) => {
+  if (e.key === 'Escape') {
+    e.stopPropagation()
+    emit('close')
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeys)
+  document.body.classList.add('overflow-hidden')
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeys)
+  document.body.classList.remove('overflow-hidden')
+})
+</script>
diff --git a/src/modules/otus/components/DWCDownload.vue b/src/modules/otus/components/DWCDownload.vue
index 86864f8..ae77638 100644
--- a/src/modules/otus/components/DWCDownload.vue
+++ b/src/modules/otus/components/DWCDownload.vue
@@ -1,7 +1,7 @@
 <template>
   <VButton
     primary
-    class="text-sm flex"
+    class="text-sm flex items-center"
     @click="download"
   >
     <IconDownload class="w-4 h-4 mr-1" />
diff --git a/src/modules/otus/components/Panel/PanelContent/PanelContent.vue b/src/modules/otus/components/Panel/PanelContent/PanelContent.vue
index 57aceab..d59489a 100644
--- a/src/modules/otus/components/Panel/PanelContent/PanelContent.vue
+++ b/src/modules/otus/components/Panel/PanelContent/PanelContent.vue
@@ -11,6 +11,7 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue'
+import { useOtuPageRequest } from '@/modules/otus/helpers/useOtuPageRequest'
 import TaxonWorks from '../../../services/TaxonWorks'
 import ContentTopic from './PanelContentTopic.vue'
 
@@ -39,7 +40,9 @@ watch(
   () => props.otuId,
   (id) => {
     if (id) {
-      TaxonWorks.getOtuContent(id).then(({ data }) => {
+      useOtuPageRequest('panel:content', () =>
+        TaxonWorks.getOtuContent(id)
+      ).then(({ data }) => {
         contents.value = data
       })
     } else {
diff --git a/src/modules/otus/components/Panel/PanelDropdown.vue b/src/modules/otus/components/Panel/PanelDropdown.vue
new file mode 100644
index 0000000..1dfd361
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelDropdown.vue
@@ -0,0 +1,57 @@
+<template>
+  <Dropdown :items="menuOptions">
+    <template #button>
+      <IconHamburger class="text-base-soft h-4" />
+    </template>
+  </Dropdown>
+  <VModal
+    v-if="isModalVisible"
+    @close="isModalVisible = false"
+  >
+    <template #header>
+      <h3>JSON Data</h3>
+    </template>
+    <div
+      class="p-4 font-normal"
+      v-if="request"
+    >
+      <h3 class="pb-2 text-sm">
+        URL: <a :href="request.url">{{ request.url }}</a>
+      </h3>
+      <p
+        class="bg-base-background p-2 text-sm font-normal whitespace-pre-wrap"
+        v-html="JSON.stringify(request.data, null, 4)"
+      />
+    </div>
+  </VModal>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useOtuPageRequestStore } from '../../store/request'
+
+const props = defineProps({
+  panelKey: {
+    type: String,
+    required: true
+  },
+
+  menuOptions: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const request = computed(() => store.getRequest(props.panelKey))
+
+const store = useOtuPageRequestStore()
+const isModalVisible = ref(false)
+
+const menuOptions = computed(() => [
+  ...props.menuOptions,
+  {
+    label: 'JSON Data',
+    action: () => (isModalVisible.value = true)
+  }
+])
+</script>
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue
index 8c3b367..09e2f6f 100644
--- a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue
+++ b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue
@@ -4,7 +4,6 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
 import { useOtuStore } from '@/modules/otus/store/store'
 import PanelNomenlcatureCitations from './PanelNomenclatureCitations.vue'
 import PanelNomenclatureReferences from './PanelNomenclatureReferences.vue'
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
index d0dac41..22c5932 100644
--- a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
+++ b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
@@ -2,11 +2,10 @@
   <VCard>
     <VCardHeader class="flex justify-between">
       <h2 class="text-md">Nomenclature ({{ list.length }})</h2>
-      <Dropdown :items="menuOptions">
-        <template #button>
-          <IconHamburger class="text-base-soft h-4" />
-        </template>
-      </Dropdown>
+      <PanelDropdown
+        :menu-options="menuOptions"
+        panel-key="taxonomy"
+      />
     </VCardHeader>
 
     <ul class="text-sm">
@@ -49,6 +48,7 @@ import { ref, computed } from 'vue'
 import { splitList } from './splitList'
 import CitationRow from './PanelCitationRow.vue'
 import PanelNomenclatureShowMore from './PanelNomenclatureShowMore.vue'
+import PanelDropdown from '../PanelDropdown.vue'
 
 const MAX_CITATIONS = 2
 
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue
index cb6f664..d6f646d 100644
--- a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue
+++ b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue
@@ -2,11 +2,10 @@
   <VCard>
     <VCardHeader class="flex justify-between">
       <h2 class="text-md">Nomenclature references ({{ list.length }})</h2>
-      <Dropdown :items="menuOptions">
-        <template #button>
-          <IconHamburger class="text-base-soft h-4" />
-        </template>
-      </Dropdown>
+      <PanelDropdown
+        :menu-options="menuOptions"
+        panel-key="taxonomy"
+      />
     </VCardHeader>
 
     <ul class="text-sm">
@@ -45,6 +44,7 @@ import { computed, ref } from 'vue'
 import { splitList } from './splitList'
 import PanelNomenclatureShowMore from './PanelNomenclatureShowMore.vue'
 import PanelReferenceRow from './PanelReferenceRow.vue'
+import PanelDropdown from '../PanelDropdown.vue'
 
 const MAX_REFERENCES = 2
 
diff --git a/src/modules/otus/components/Panel/PanelStats/PanelStats.vue b/src/modules/otus/components/Panel/PanelStats/PanelStats.vue
index e119be2..7df76d7 100644
--- a/src/modules/otus/components/Panel/PanelStats/PanelStats.vue
+++ b/src/modules/otus/components/Panel/PanelStats/PanelStats.vue
@@ -2,16 +2,22 @@
   <VCard>
     <VCardHeader class="flex justify-between">
       <h2 class="text-md">Stats</h2>
+      <PanelDropdown panel-key="taxonomy" />
     </VCardHeader>
     <VCardContent class="text-sm">
       <VTable>
         <VTableHeader>
           <VTableHeaderRow>
             <VTableHeaderCell class="bg-base-foreground" />
-            <VTableHeaderCell>Taxa</VTableHeaderCell>
-            <VTableHeaderCell class="border-l border-base-border"
-              >Names</VTableHeaderCell
+            <VTableHeaderCell title="OTUs linked to valid protonyms">
+              Taxa
+            </VTableHeaderCell>
+            <VTableHeaderCell
+              title="Taxon names"
+              class="border-l border-base-border"
             >
+              Names
+            </VTableHeaderCell>
             <VTableHeaderCell
               colspan="2"
               class="bg-base-foreground"
@@ -19,8 +25,13 @@
           </VTableHeaderRow>
           <VTableHeaderRow>
             <VTableHeaderCell>Rank</VTableHeaderCell>
-            <VTableHeaderCell>Total</VTableHeaderCell>
-            <VTableHeaderCell class="border-l border-base-border">
+            <VTableHeaderCell title="OTUs linked to valid protonyms"
+              >Total</VTableHeaderCell
+            >
+            <VTableHeaderCell
+              title="Taxon names"
+              class="border-l border-base-border"
+            >
               Total
             </VTableHeaderCell>
             <VTableHeaderCell> Valid </VTableHeaderCell>
@@ -53,8 +64,8 @@
 </template>
 
 <script setup>
-import VTableHeaderCellGlobal from '@/components/Table/VTableHeaderCell.global.vue'
 import { useOtuStore } from '@/modules/otus/store/store'
+import PanelDropdown from '../PanelDropdown.vue'
 
 const props = defineProps({
   otuId: {
diff --git a/src/modules/otus/components/Panel/PanelTypeSpecimen/PanelTypeSpecimen.vue b/src/modules/otus/components/Panel/PanelTypeSpecimen/PanelTypeSpecimen.vue
index 38d77e6..562560c 100644
--- a/src/modules/otus/components/Panel/PanelTypeSpecimen/PanelTypeSpecimen.vue
+++ b/src/modules/otus/components/Panel/PanelTypeSpecimen/PanelTypeSpecimen.vue
@@ -1,9 +1,8 @@
 <template>
   <VCard v-if="typeMaterials.length">
-    <VCardHeader>
-      <h1 class="text-md">
-        Type specimen
-      </h1>
+    <VCardHeader class="flex justify-between">
+      <h2 class="text-md">Type specimen</h2>
+      <PanelDropdown panel-key="type-material" />
     </VCardHeader>
     <VCardContent class="text-sm">
       <p>
@@ -16,6 +15,8 @@
 <script setup>
 import { ref, watch } from 'vue'
 import { SPECIMEN_TYPES } from '../../../constants'
+import { useOtuPageRequest } from '@/modules/otus/helpers/useOtuPageRequest'
+import PanelDropdown from '../PanelDropdown.vue'
 import TaxonWorks from '../../../services/TaxonWorks'
 
 const props = defineProps({
@@ -30,10 +31,20 @@ const typeMaterials = ref([])
 watch(
   () => props.otuId,
   () => {
-  if (!props.otuId) { return }
+    if (!props.otuId) {
+      return
+    }
 
-  TaxonWorks.getOtuTypeMaterial(props.otuId).then(({ data }) => {
-    typeMaterials.value = data.type_materials_catalog_labels.sort((a, b) => SPECIMEN_TYPES.indexOf(a.type_type) - SPECIMEN_TYPES.indexOf(b.type_type))
-  })
-}, { immediate: true })
+    useOtuPageRequest('type-material', () =>
+      TaxonWorks.getOtuTypeMaterial(props.otuId)
+    ).then(({ data }) => {
+      typeMaterials.value = data.type_materials_catalog_labels.sort(
+        (a, b) =>
+          SPECIMEN_TYPES.indexOf(a.type_type) -
+          SPECIMEN_TYPES.indexOf(b.type_type)
+      )
+    })
+  },
+  { immediate: true }
+)
 </script>
diff --git a/src/modules/otus/components/SiteMap.vue b/src/modules/otus/components/SiteMap.vue
new file mode 100644
index 0000000..a4deff3
--- /dev/null
+++ b/src/modules/otus/components/SiteMap.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <VButton
+      primary
+      class="text-sm flex items-center gap-1"
+      @click="isModalVisible = true"
+    >
+      <IconJson class="w-4 h-4" />
+      Sitemap
+    </VButton>
+    <VModal
+      v-if="isModalVisible"
+      @close="isModalVisible = false"
+    >
+      <template #header>
+        <h3>Sitemap requests</h3>
+      </template>
+      <ul class="p-4 text-sm whitespace-pre">
+        <li v-for="(item, key) in store.sitemap">
+          <span class="capitalize">{{ key }}</span
+          >: <a :href="item">{{ item }}</a>
+        </li>
+      </ul>
+    </VModal>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useOtuPageRequestStore } from '../store/request'
+
+const isModalVisible = ref(false)
+const store = useOtuPageRequestStore()
+</script>
diff --git a/src/modules/otus/helpers/useOtuPageRequest.js b/src/modules/otus/helpers/useOtuPageRequest.js
new file mode 100644
index 0000000..f426305
--- /dev/null
+++ b/src/modules/otus/helpers/useOtuPageRequest.js
@@ -0,0 +1,12 @@
+import { useOtuPageRequestStore } from '../store/request'
+
+export function useOtuPageRequest(key, requestFunction) {
+  const store = useOtuPageRequestStore()
+  const request = requestFunction()
+
+  request.then((response) => {
+    store.setRequest(key, response)
+  })
+
+  return request
+}
diff --git a/src/modules/otus/store/actions/loadCatalog.js b/src/modules/otus/store/actions/loadCatalog.js
index bde0dac..cf53b7d 100644
--- a/src/modules/otus/store/actions/loadCatalog.js
+++ b/src/modules/otus/store/actions/loadCatalog.js
@@ -1,19 +1,15 @@
 import TaxonWorks from '../../services/TaxonWorks'
-
-function parseStats(obj) {
-  return Object.entries(obj)
-    .filter(([_, count]) => count)
-    .map((item) => item.join(': '))
-    .join('; ')
-}
+import { useOtuPageRequest } from '../../helpers/useOtuPageRequest'
 
 export const actionLoadCatalog = {
   async loadCatalog(taxonId) {
-    const { data } = await TaxonWorks.getTaxonNameCitations(taxonId)
+    const response = await useOtuPageRequest('taxonomy', () =>
+      TaxonWorks.getTaxonNameCitations(taxonId)
+    )
 
     this.catalog = {
-      ...data,
-      sources: data.sources.map(({ cached, url }) =>
+      ...response.data,
+      sources: response.data.sources.map(({ cached, url }) =>
         cached.replace(url, `<a href="${url}">${url}</a>`)
       )
     }
diff --git a/src/modules/otus/store/request.js b/src/modules/otus/store/request.js
new file mode 100644
index 0000000..750ddc5
--- /dev/null
+++ b/src/modules/otus/store/request.js
@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia'
+
+export const useOtuPageRequestStore = defineStore('otuPageRequest', {
+  state: () => {
+    return {
+      requests: {}
+    }
+  },
+
+  getters: {
+    getRequest: (state) => {
+      return (key) => state.requests[key]
+    },
+
+    sitemap: (state) => {
+      const entries = Object.entries(state.requests).map(([key, value]) => [
+        key,
+        value.url
+      ])
+
+      return Object.fromEntries(entries)
+    }
+  },
+
+  actions: {
+    setRequest(key, response) {
+      this.requests[key] = {
+        url: response.request.responseURL,
+        data: response.data
+      }
+    }
+  }
+})
diff --git a/src/modules/otus/store/store.js b/src/modules/otus/store/store.js
index 75f6a5d..b467a29 100644
--- a/src/modules/otus/store/store.js
+++ b/src/modules/otus/store/store.js
@@ -1,5 +1,7 @@
 import { defineStore } from 'pinia'
 import TaxonWorks from '../services/TaxonWorks'
+import { useOtuPageRequest } from '../helpers/useOtuPageRequest'
+import { useOtuPageRequestStore } from './request'
 import {
   actionLoadDistribution,
   actionLoadCatalog,
@@ -30,7 +32,9 @@ export const useOtuStore = defineStore('otuStore', {
   },
   actions: {
     async loadTaxon(id) {
-      const taxon = await TaxonWorks.summary(id)
+      const taxon = await useOtuPageRequest('summary', () =>
+        TaxonWorks.summary(id)
+      )
 
       this.taxon = taxon.data
     },
@@ -41,6 +45,10 @@ export const useOtuStore = defineStore('otuStore', {
     },
 
     async loadInit(otuId) {
+      const requestStore = useOtuPageRequestStore()
+
+      requestStore.$reset()
+
       await this.loadOtu(otuId)
       await this.loadTaxon(this.otu.taxon_name_id)
       await this.loadCatalog(this.otu.taxon_name_id)
@@ -53,7 +61,11 @@ export const useOtuStore = defineStore('otuStore', {
         otu_scope: ['all']
       }
 
-      this.images = (await TaxonWorks.getOtuImages(otuId, params)).data
+      this.images = (
+        await useOtuPageRequest('panel:images', () =>
+          TaxonWorks.getOtuImages(otuId, params)
+        )
+      ).data
     },
 
     ...actionLoadDistribution,
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index 84db824..dbc2bf1 100644
--- a/src/modules/otus/views/Index.vue
+++ b/src/modules/otus/views/Index.vue
@@ -31,7 +31,8 @@
           >
             <TaxaInfo v-if="isReady" />
           </VSkeleton>
-          <div>
+          <div class="flex flex-row gap-2">
+            <SiteMap />
             <DWCDownload
               v-if="isReady"
               :otu="otu"
@@ -75,6 +76,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useOtuStore } from '../store/store'
 import { useHead } from 'unhead'
 import { useSchemaOrg, defineTaxon } from '@/plugins/schemaOrg/composables'
+import SiteMap from '../components/SiteMap.vue'
 import Breadcrumb from '../components/Breadcrumb/Breadcrumb.vue'
 import TaxaInfo from '../components/TaxaInfo.vue'
 import DWCDownload from '../components/DWCDownload.vue'

From b5bc561902554647a719d96cf4171eeca33669cf Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Tue, 13 Jun 2023 19:19:26 -0300
Subject: [PATCH 2/2] Fix fake component register. Add clipboard

---
 .../Clipboard/VClipboard.global.vue           | 49 +++++++++++++++++++
 src/components/Icon/IconCheck.global.vue      | 15 ++++++
 src/components/Icon/IconClipboard.global.vue  | 15 ++++++
 src/components/Modal/VModal.global.vue        |  1 +
 .../Panel/PanelDescendants/Descendants.vue    | 17 ++++---
 .../otus/components/Panel/PanelDropdown.vue   | 16 ++++--
 .../components/Panel/PanelMap/PanelMap.vue    | 18 +++----
 .../PanelTypeDesignation.vue                  | 12 +++--
 src/modules/otus/store/request.js             |  8 +--
 src/modules/otus/views/Index.vue              |  4 +-
 src/ssr/utils/registerFakeClientComponents.js |  6 ++-
 11 files changed, 130 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Clipboard/VClipboard.global.vue
 create mode 100644 src/components/Icon/IconCheck.global.vue
 create mode 100644 src/components/Icon/IconClipboard.global.vue

diff --git a/src/components/Clipboard/VClipboard.global.vue b/src/components/Clipboard/VClipboard.global.vue
new file mode 100644
index 0000000..6209603
--- /dev/null
+++ b/src/components/Clipboard/VClipboard.global.vue
@@ -0,0 +1,49 @@
+<template>
+  <VButton
+    class="px-2 py-2 rounded-full"
+    primary
+    @click="copyText"
+  >
+    <IconCheck
+      v-if="isCopied"
+      class="w-4 h-4"
+    />
+    <IconClipboard
+      v-else
+      class="w-4 h-4"
+    />
+  </VButton>
+</template>
+
+<script setup>
+import { ref, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true
+  },
+
+  delay: {
+    type: Number,
+    default: 2000
+  }
+})
+
+const isCopied = ref(false)
+let timeoutId
+
+function copyText() {
+  navigator.clipboard.writeText(props.text).then(() => {
+    isCopied.value = true
+
+    timeoutId = setTimeout(() => {
+      isCopied.value = false
+    }, props.delay)
+  })
+}
+
+onBeforeUnmount(() => {
+  clearTimeout(timeoutId)
+})
+</script>
diff --git a/src/components/Icon/IconCheck.global.vue b/src/components/Icon/IconCheck.global.vue
new file mode 100644
index 0000000..e14d285
--- /dev/null
+++ b/src/components/Icon/IconCheck.global.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M4.5 12.75l6 6 9-13.5"
+    />
+  </svg>
+</template>
diff --git a/src/components/Icon/IconClipboard.global.vue b/src/components/Icon/IconClipboard.global.vue
new file mode 100644
index 0000000..ae5a626
--- /dev/null
+++ b/src/components/Icon/IconClipboard.global.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z"
+    />
+  </svg>
+</template>
diff --git a/src/components/Modal/VModal.global.vue b/src/components/Modal/VModal.global.vue
index 1ddc78d..f51a159 100644
--- a/src/components/Modal/VModal.global.vue
+++ b/src/components/Modal/VModal.global.vue
@@ -6,6 +6,7 @@
   >
     <div
       class="h-full md:h-auto mx-auto md:max-h-[70vh] bg-base-foreground container"
+      @click.stop
     >
       <div
         class="w-full p-4 md:p-4 flex flex-row box-border justify-between items-center"
diff --git a/src/modules/otus/components/Panel/PanelDescendants/Descendants.vue b/src/modules/otus/components/Panel/PanelDescendants/Descendants.vue
index 8b56989..d6152a4 100644
--- a/src/modules/otus/components/Panel/PanelDescendants/Descendants.vue
+++ b/src/modules/otus/components/Panel/PanelDescendants/Descendants.vue
@@ -1,7 +1,8 @@
 <template>
   <VCard>
-    <VCardHeader>
-      <h1 class="text-md">Descendants and synonyms</h1>
+    <VCardHeader class="flex justify-between">
+      <h2 class="text-md">Descendants and synonyms</h2>
+      <PanelDropdown panel-key="panel:descendants" />
     </VCardHeader>
     <VCardContent class="text-sm">
       <ul class="tree ml-2">
@@ -24,6 +25,8 @@
 import { ref, watch } from 'vue'
 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: {
@@ -41,11 +44,11 @@ watch(
       return
     }
 
-    TaxonWorks.getTaxonomy(props.otuId, { max_descendants_depth: 1 }).then(
-      ({ data }) => {
-        taxonomy.value = data
-      }
-    )
+    useOtuPageRequest('panel:descendants', () =>
+      TaxonWorks.getTaxonomy(props.otuId, { max_descendants_depth: 1 })
+    ).then(({ data }) => {
+      taxonomy.value = data
+    })
   },
   { immediate: true }
 )
diff --git a/src/modules/otus/components/Panel/PanelDropdown.vue b/src/modules/otus/components/Panel/PanelDropdown.vue
index 1dfd361..911ed0d 100644
--- a/src/modules/otus/components/Panel/PanelDropdown.vue
+++ b/src/modules/otus/components/Panel/PanelDropdown.vue
@@ -12,16 +12,22 @@
       <h3>JSON Data</h3>
     </template>
     <div
-      class="p-4 font-normal"
+      class="p-5 font-normal"
       v-if="request"
     >
       <h3 class="pb-2 text-sm">
         URL: <a :href="request.url">{{ request.url }}</a>
       </h3>
-      <p
-        class="bg-base-background p-2 text-sm font-normal whitespace-pre-wrap"
-        v-html="JSON.stringify(request.data, null, 4)"
-      />
+      <div class="relative">
+        <p
+          class="bg-base-background p-2 text-sm font-normal whitespace-pre-wrap"
+          v-html="JSON.stringify(request.data, null, 4)"
+        />
+        <VClipboard
+          class="absolute right-2 top-2 opacity-75"
+          :text="JSON.stringify(request.data, null, 2)"
+        />
+      </div>
     </div>
   </VModal>
 </template>
diff --git a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
index 97f0700..e1b345a 100644
--- a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
+++ b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
@@ -10,15 +10,15 @@
           :geojson="store.distribution.geojson"
           @geojson:ready="() => (isLoading = false)"
         />
-      </ClientOnly>
-      <VButton
-        class="h-6 text-sm absolute right-3 top-3 z-[400]"
-        primary
-        @click="() => (isOtuSearchVisible = true)"
-      >
-        Search
-      </VButton>
-      <ClientOnly>
+
+        <VButton
+          class="h-6 text-sm absolute right-3 top-3 z-[400]"
+          primary
+          @click="() => (isOtuSearchVisible = true)"
+        >
+          Search
+        </VButton>
+
         <OtuSearch
           v-if="isOtuSearchVisible"
           :otu="otu"
diff --git a/src/modules/otus/components/Panel/PanelTypeDesignation/PanelTypeDesignation.vue b/src/modules/otus/components/Panel/PanelTypeDesignation/PanelTypeDesignation.vue
index 589ef0b..8d0d336 100644
--- a/src/modules/otus/components/Panel/PanelTypeDesignation/PanelTypeDesignation.vue
+++ b/src/modules/otus/components/Panel/PanelTypeDesignation/PanelTypeDesignation.vue
@@ -1,7 +1,8 @@
 <template>
   <VCard>
-    <VCardHeader>
-      <h1 class="text-md">Type</h1>
+    <VCardHeader class="flex justify-between">
+      <h2 class="text-md">Type</h2>
+      <PanelDropdown panel-key="panel:type" />
     </VCardHeader>
     <VCardContent class="text-sm">
       <p v-html="typeDesignationLabel" />
@@ -11,6 +12,8 @@
 
 <script setup>
 import { ref, watch, computed } from 'vue'
+import { useOtuPageRequest } from '@/modules/otus/helpers/useOtuPageRequest'
+import PanelDropdown from '../PanelDropdown.vue'
 import TaxonWorks from '../../../services/TaxonWorks'
 
 const props = defineProps({
@@ -35,8 +38,9 @@ watch(
     if (!props.taxonId) {
       return
     }
-
-    TaxonWorks.getTaxonTypeDesignation(props.taxonId).then(({ data }) => {
+    useOtuPageRequest('panel:type', () =>
+      TaxonWorks.getTaxonTypeDesignation(props.taxonId)
+    ).then(({ data }) => {
       typeDesignation.value = data.type_taxon_name_relationship || {}
     })
   },
diff --git a/src/modules/otus/store/request.js b/src/modules/otus/store/request.js
index 750ddc5..9d158a0 100644
--- a/src/modules/otus/store/request.js
+++ b/src/modules/otus/store/request.js
@@ -23,10 +23,12 @@ export const useOtuPageRequestStore = defineStore('otuPageRequest', {
   },
 
   actions: {
-    setRequest(key, response) {
+    setRequest(key, { data, request }) {
+      const url = request.res?.responseUrl || request.responseURL
+
       this.requests[key] = {
-        url: response.request.responseURL,
-        data: response.data
+        url,
+        data
       }
     }
   }
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index dbc2bf1..2335ccf 100644
--- a/src/modules/otus/views/Index.vue
+++ b/src/modules/otus/views/Index.vue
@@ -32,7 +32,9 @@
             <TaxaInfo v-if="isReady" />
           </VSkeleton>
           <div class="flex flex-row gap-2">
-            <SiteMap />
+            <ClientOnly>
+              <SiteMap />
+            </ClientOnly>
             <DWCDownload
               v-if="isReady"
               :otu="otu"
diff --git a/src/ssr/utils/registerFakeClientComponents.js b/src/ssr/utils/registerFakeClientComponents.js
index 91cce62..815f8b0 100644
--- a/src/ssr/utils/registerFakeClientComponents.js
+++ b/src/ssr/utils/registerFakeClientComponents.js
@@ -1,10 +1,12 @@
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
 import glob from 'glob'
 
 export function registerFakeClientComponents(app) {
   const filePaths = glob.sync('src/components/**/*.client.vue')
   const vueComponent = defineComponent({
-    template: '<div></div>'
+    setup() {
+      return h('div')
+    }
   })
 
   filePaths.forEach((path) => {