Add status panel

src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue

@@ -1,13 +1,13 @@
 <template>
-  <PanelNomenlcatureCitations :list="citations" />
-  <PanelNomenclatureReferences :list="sources" />
+  <PanelNomenlcatureCitations :list="store.catalog.timeline" />
+  <PanelNomenclatureReferences :list="store.catalog.sources" />
 </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'
-import TaxonWorks from '../../../services/TaxonWorks'
 
 const props = defineProps({
   otuId: {
@@ -31,20 +31,5 @@ const props = defineProps({
   }
 })
 
-const citations = ref([])
-const sources = ref([])
-
-watch(
-  () => props.taxonId,
-  async () => {
-    if (!props.taxonId) {
-      return
-    }
-    const { data } = await TaxonWorks.getTaxonNameCitations(props.taxonId)
-
-    citations.value = data.timeline
-    sources.value = data.sources
-  },
-  { immediate: true }
-)
+const store = useOtuStore()
 </script>

src/modules/otus/components/Panel/PanelNomenclature/PanelReferenceRow.vue

@@ -2,8 +2,8 @@
   <li class="border-b border-base-muted p-3 px-5">
     <span
       class="break-all block"
-      :title="reference.cached"
-      v-html="reference.cached"
+      :title="reference"
+      v-html="reference"
     />
   </li>
 </template>

src/modules/otus/components/Panel/PanelStats/PanelStats.vue

@@ -0,0 +1,53 @@
+<template>
+  <VCard>
+    <VCardHeader class="flex justify-between">
+      <h2 class="text-md">Stats</h2>
+    </VCardHeader>
+    <VCardContent class="text-sm">
+      <div>
+        <p>
+          Taxa:
+          <span class="capitalize">
+            {{ store.catalog.stats.taxa }}
+          </span>
+        </p>
+      </div>
+      <div>
+        <p>
+          Names:
+          <span class="capitalize">
+            {{ store.catalog.stats.names }}
+          </span>
+        </p>
+      </div>
+    </VCardContent>
+  </VCard>
+</template>
+
+<script setup>
+import { useOtuStore } from '@/modules/otus/store/store'
+
+const props = defineProps({
+  otuId: {
+    type: [Number, String],
+    required: true
+  },
+
+  taxonId: {
+    type: [Number, String],
+    required: true
+  },
+
+  taxon: {
+    type: Object,
+    default: undefined
+  },
+
+  otu: {
+    type: Object,
+    default: undefined
+  }
+})
+
+const store = useOtuStore()
+</script>

src/modules/otus/constants/overviewLayout.js

@@ -6,6 +6,7 @@ import PanelNomenclature from '../components/Panel/PanelNomenclature/PanelNomenc
 import PanelMap from '../components/Panel/PanelMap/PanelMap.vue'
 import PanelDescendants from '../components/Panel/PanelDescendants/Descendants.vue'
 import PanelContent from '../components/Panel/PanelContent/PanelContent.vue'
+import PanelStats from '../components/Panel/PanelStats/PanelStats.vue'
 
 export const overviewLayout = {
   left: [
@@ -24,6 +25,7 @@ export const overviewLayout = {
   right: [
     { component: PanelMap },
     { component: PanelDescendants },
-    { component: PanelContent }
+    { component: PanelContent },
+    { component: PanelStats }
   ]
 }

src/modules/otus/services/TaxonWorks.js

@@ -55,6 +55,10 @@ export default class TaxonWorks {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/distribution.geojson`)
   }
 
+  static getCachedMap(cachedId) {
+    return makeAPIRequest.get(`/cached_maps/${cachedId}`)
+  }
+
   static getOtuContent(otuId) {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/content`, {
       extend: ['depiction']

src/modules/otus/store/actions/index.js

@@ -1 +1,2 @@
+export * from './loadCatalog'
 export * from './loadDistribution'

src/modules/otus/store/actions/loadCatalog.js

@@ -0,0 +1,25 @@
+import TaxonWorks from '../../services/TaxonWorks'
+
+function parseStats(obj) {
+  return Object.entries(obj)
+    .filter(([_, count]) => count)
+    .map((item) => item.join(': '))
+    .join('; ')
+}
+
+export const actionLoadCatalog = {
+  async loadCatalog(taxonId) {
+    const { data } = await TaxonWorks.getTaxonNameCitations(taxonId)
+
+    this.catalog = {
+      ...data,
+      stats: {
+        taxa: parseStats(data.stats.taxa),
+        names: parseStats(data.stats.names)
+      },
+      sources: data.sources.map(({ cached, url }) =>
+        cached.replace(url, `<a href="${url}">${url}</a>`)
+      )
+    }
+  }
+}

src/modules/otus/store/store.js

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import TaxonWorks from '../services/TaxonWorks'
-import { actionLoadDistribution } from './actions'
+import { actionLoadDistribution, actionLoadCatalog } from './actions'
 
 export const useOtuStore = defineStore('otuStore', {
   state: () => {
@@ -12,6 +12,11 @@ export const useOtuStore = defineStore('otuStore', {
         geojson: null,
         errorMessage: null,
         currentShapeTypes: []
+      },
+      catalog: {
+        sources: [],
+        stats: {},
+        timeline: []
       }
     }
   },
@@ -28,11 +33,9 @@ export const useOtuStore = defineStore('otuStore', {
     },
 
     async loadInit(otuId) {
-      const otu = (await TaxonWorks.getOtu(otuId)).data
-      const taxon = (await TaxonWorks.summary(otu.taxon_name_id)).data
-
-      this.otu = otu
-      this.taxon = taxon
+      await this.loadOtu(otuId)
+      await this.loadTaxon(this.otu.taxon_name_id)
+      await this.loadCatalog(this.otu.taxon_name_id)
     },
 
     async loadImages(otuId) {
@@ -44,6 +47,7 @@ export const useOtuStore = defineStore('otuStore', {
       this.images = (await TaxonWorks.getOtuImages(otuId, params)).data
     },
 
-    ...actionLoadDistribution
+    ...actionLoadDistribution,
+    ...actionLoadCatalog
   }
 })