From f7d7a986d335ae3d9b0edb378831a3197e8cf81c Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Thu, 5 Oct 2023 19:47:49 -0300
Subject: [PATCH] Update statistics panel

---
 .../components/Panel/PanelGallery/main.js     |  4 +-
 .../Panel/PanelStats/PanelStats.vue           | 43 ++++++++++++-------
 .../Panel/PanelTypeSpecimen/main.js           |  4 +-
 src/modules/otus/constants/rankGroups.js      |  1 +
 4 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/modules/otus/components/Panel/PanelGallery/main.js b/src/modules/otus/components/Panel/PanelGallery/main.js
index 841c21d..40e23e8 100644
--- a/src/modules/otus/components/Panel/PanelGallery/main.js
+++ b/src/modules/otus/components/Panel/PanelGallery/main.js
@@ -1,8 +1,8 @@
-import { SPECIES_GROUP } from '@/modules/otus/constants'
+import { SPECIES_GROUP, SPECIES_AND_INFRASPECIES_GROUP } from '@/modules/otus/constants'
 import PanelGallery from './PanelGallery.vue'
 
 export default {
   id: 'panel:gallery',
   component: PanelGallery,
-  available: [SPECIES_GROUP]
+  available: [SPECIES_GROUP, SPECIES_AND_INFRASPECIES_GROUP]
 }
diff --git a/src/modules/otus/components/Panel/PanelStats/PanelStats.vue b/src/modules/otus/components/Panel/PanelStats/PanelStats.vue
index dc58d84..0bed052 100644
--- a/src/modules/otus/components/Panel/PanelStats/PanelStats.vue
+++ b/src/modules/otus/components/Panel/PanelStats/PanelStats.vue
@@ -7,14 +7,20 @@
     />
     <VCardHeader class="flex justify-between">
       <h2 class="text-md">Stats</h2>
-      <PanelDropdown panel-key="taxonomy" />
+      <PanelDropdown
+        panel-key="taxonomy"
+        :menu-options="menuOptions"
+      />
     </VCardHeader>
     <VCardContent class="text-sm">
       <VTable>
         <VTableHeader>
           <VTableHeaderRow>
             <VTableHeaderCell class="bg-base-foreground" />
-            <VTableHeaderCell title="OTUs linked to valid protonyms">
+            <VTableHeaderCell
+              v-if="isAdvancedView"
+              title="OTUs linked to valid protonyms"
+            >
               Taxa
             </VTableHeaderCell>
             <VTableHeaderCell
@@ -30,7 +36,9 @@
           </VTableHeaderRow>
           <VTableHeaderRow>
             <VTableHeaderCell>Rank</VTableHeaderCell>
-            <VTableHeaderCell title="OTUs linked to valid protonyms"
+            <VTableHeaderCell
+              v-if="isAdvancedView"
+              title="OTUs linked to valid protonyms"
               >Total</VTableHeaderCell
             >
             <VTableHeaderCell
@@ -45,22 +53,16 @@
         </VTableHeader>
         <VTableBody>
           <VTableBodyRow
-            v-for="(value, rank) in store.catalog.stats.taxa"
+            v-for="{ rank, taxa, names } in store.catalog.stats"
             :key="rank"
           >
             <VTableBodyCell class="capitalize">{{ rank }}</VTableBodyCell>
-            <VTableBodyCell>{{ value }}</VTableBodyCell>
-
-            <VTableBodyCell class="border-l border-base-border">{{
-              store.catalog.stats.names[rank].invalid +
-              store.catalog.stats.names[rank].valid
-            }}</VTableBodyCell>
-            <VTableBodyCell>{{
-              store.catalog.stats.names[rank].valid
-            }}</VTableBodyCell>
-            <VTableBodyCell>{{
-              store.catalog.stats.names[rank].invalid
-            }}</VTableBodyCell>
+            <VTableBodyCell v-if="isAdvancedView">{{ taxa }}</VTableBodyCell>
+            <VTableBodyCell class="border-l border-base-border">
+              {{ names.invalid + names.valid }}
+            </VTableBodyCell>
+            <VTableBodyCell>{{ names.valid }}</VTableBodyCell>
+            <VTableBodyCell>{{ names.invalid }}</VTableBodyCell>
           </VTableBodyRow>
         </VTableBody>
       </VTable>
@@ -69,6 +71,7 @@
 </template>
 
 <script setup>
+import { computed, ref } from 'vue'
 import { useOtuStore } from '@/modules/otus/store/store'
 import PanelDropdown from '../PanelDropdown.vue'
 
@@ -95,4 +98,12 @@ const props = defineProps({
 })
 
 const store = useOtuStore()
+const isAdvancedView = ref(false)
+
+const menuOptions = computed(() => [
+  {
+    label: isAdvancedView.value ? 'Hide taxa' : 'Show taxa',
+    action: () => (isAdvancedView.value = !isAdvancedView.value)
+  }
+])
 </script>
diff --git a/src/modules/otus/components/Panel/PanelTypeSpecimen/main.js b/src/modules/otus/components/Panel/PanelTypeSpecimen/main.js
index efe810b..8892778 100644
--- a/src/modules/otus/components/Panel/PanelTypeSpecimen/main.js
+++ b/src/modules/otus/components/Panel/PanelTypeSpecimen/main.js
@@ -1,8 +1,8 @@
-import { SPECIES_GROUP } from '../../../constants'
+import { SPECIES_GROUP, SPECIES_AND_INFRASPECIES_GROUP } from '../../../constants'
 import PanelTypeSpecimen from './PanelTypeSpecimen.vue'
 
 export default {
   id: 'panel:type-specimen',
   component: PanelTypeSpecimen,
-  available: [SPECIES_GROUP]
+  available: [SPECIES_GROUP, SPECIES_AND_INFRASPECIES_GROUP]
 }
diff --git a/src/modules/otus/constants/rankGroups.js b/src/modules/otus/constants/rankGroups.js
index ce294c9..9590e14 100644
--- a/src/modules/otus/constants/rankGroups.js
+++ b/src/modules/otus/constants/rankGroups.js
@@ -2,3 +2,4 @@ export const HIGHER_CLASSIFICATION_GROUP = 'HigherClassificationGroup'
 export const FAMILY_GROUP = 'FamilyGroup'
 export const GENUS_GROUP = 'GenusGroup'
 export const SPECIES_GROUP = 'SpeciesGroup'
+export const SPECIES_AND_INFRASPECIES_GROUP = 'SpeciesAndInfraspeciesGroup'