From 4818bf28d92230be06e999684336d2c1d1003046 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Mon, 5 Sep 2022 18:49:39 -0300
Subject: [PATCH] Refactor code

---
 src/components/Gallery/GalleryThumbnail.vue   |  1 +
 src/modules/otus/components/CommonNames.vue   |  4 +-
 .../PanelCitation/PanelCitation.vue}          | 28 +++++++-----
 .../PanelCitation/PanelCitationRow.vue}       |  0
 .../PanelCitation/PanelCitationShowMore.vue}  |  0
 .../PanelContent/PanelContent.vue}            |  7 ++-
 .../PanelContent/PanelContentTopic.vue}       |  0
 .../PanelDescendants}/Descendants.vue         | 10 ++---
 .../DescendantsSynonymList.vue}               |  0
 .../PanelDescendants/DescendantsTree.vue}     | 12 ++---
 .../{ => Panel/PanelGallery}/Gallery.vue      |  4 +-
 .../{Map.vue => Panel/PanelMap/PanelMap.vue}  |  4 +-
 .../PanelTypeDesignation.vue                  | 44 +++++++++++++++++++
 .../PanelTypeSpecimen/PanelTypeSpecimen.vue}  |  6 +--
 .../otus/components/TypeDesignation.vue       | 40 -----------------
 src/modules/otus/constants/index.js           |  3 +-
 src/modules/otus/constants/overviewLayout.js  | 29 ++++++++++++
 .../otus}/constants/rankGroups.js             |  0
 .../services/{OtuService.js => TaxonWorks.js} | 12 ++---
 src/modules/otus/views/Index.vue              |  6 +--
 src/modules/otus/views/Overview.vue           | 33 ++------------
 21 files changed, 128 insertions(+), 115 deletions(-)
 rename src/modules/otus/components/{Citation/CitationList.vue => Panel/PanelCitation/PanelCitation.vue} (73%)
 rename src/modules/otus/components/{Citation/CitationRow.vue => Panel/PanelCitation/PanelCitationRow.vue} (100%)
 rename src/modules/otus/components/{Citation/CitationRowShowMore.vue => Panel/PanelCitation/PanelCitationShowMore.vue} (100%)
 rename src/modules/otus/components/{Content/Content.vue => Panel/PanelContent/PanelContent.vue} (81%)
 rename src/modules/otus/components/{Content/ContentTopic.vue => Panel/PanelContent/PanelContentTopic.vue} (100%)
 rename src/modules/otus/components/{ => Panel/PanelDescendants}/Descendants.vue (77%)
 rename src/{components/SynonymList.vue => modules/otus/components/Panel/PanelDescendants/DescendantsSynonymList.vue} (100%)
 rename src/{components/TreeView.vue => modules/otus/components/Panel/PanelDescendants/DescendantsTree.vue} (85%)
 rename src/modules/otus/components/{ => Panel/PanelGallery}/Gallery.vue (81%)
 rename src/modules/otus/components/{Map.vue => Panel/PanelMap/PanelMap.vue} (89%)
 create mode 100644 src/modules/otus/components/Panel/PanelTypeDesignation/PanelTypeDesignation.vue
 rename src/modules/otus/components/{TypeSpecimen.vue => Panel/PanelTypeSpecimen/PanelTypeSpecimen.vue} (80%)
 delete mode 100644 src/modules/otus/components/TypeDesignation.vue
 create mode 100644 src/modules/otus/constants/overviewLayout.js
 rename src/{ => modules/otus}/constants/rankGroups.js (100%)
 rename src/modules/otus/services/{OtuService.js => TaxonWorks.js} (81%)

diff --git a/src/components/Gallery/GalleryThumbnail.vue b/src/components/Gallery/GalleryThumbnail.vue
index 812df5e..a310987 100644
--- a/src/components/Gallery/GalleryThumbnail.vue
+++ b/src/components/Gallery/GalleryThumbnail.vue
@@ -5,6 +5,7 @@
   >
     <img 
       class="max-h-20 max-w-24 h-20 w-24 object-cover rounded"
+      :alt="title"
       :src="image.thumb"
     >
   </div>
diff --git a/src/modules/otus/components/CommonNames.vue b/src/modules/otus/components/CommonNames.vue
index 071eba8..940063b 100644
--- a/src/modules/otus/components/CommonNames.vue
+++ b/src/modules/otus/components/CommonNames.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue'
-import OtuService from '../services/OtuService'
+import TaxonWorks from '../services/TaxonWorks'
 
 const props = defineProps({
   otuId: {
@@ -20,7 +20,7 @@ watch(
   () => props.otuId,
   id => {
     if (id) {
-      OtuService.getDescendants(id, { 
+      TaxonWorks.getOtuDescendants(id, { 
         max_descendants_depth: 0,
         extend: ['common_names']
       }).then(({ data }) => {
diff --git a/src/modules/otus/components/Citation/CitationList.vue b/src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue
similarity index 73%
rename from src/modules/otus/components/Citation/CitationList.vue
rename to src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue
index 8ba5544..9d55c97 100644
--- a/src/modules/otus/components/Citation/CitationList.vue
+++ b/src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue
@@ -8,7 +8,7 @@
 
     <div class="text-sm">
       <CitationRow
-        v-for="citation in citationList.start"
+        v-for="citation in citationList.first"
         :key="citation.id"
         :citation="citation"
       />
@@ -40,9 +40,9 @@
 
 <script setup>
 import { ref, watch, computed } from 'vue'
-import OtuService from '../../services/OtuService'
-import CitationRow from './CitationRow.vue'
-import CitationRowShowMore from './CitationRowShowMore.vue'
+import TaxonWorks from '../../../services/TaxonWorks'
+import CitationRow from './PanelCitationRow.vue'
+import CitationRowShowMore from './PanelCitationShowMore.vue'
 
 const MAX_CITATIONS = 3
 
@@ -57,21 +57,27 @@ const showAll = ref(false)
 const citations = ref([])
 const citationList = computed(() => {
   const copyArr = citations.value.slice()
-
-  const start = copyArr.splice(0, MAX_CITATIONS)
+  const first = copyArr.splice(0, MAX_CITATIONS)
   const last = copyArr.splice(-MAX_CITATIONS)
   const middle = copyArr
+
   return {
-    start,
+    first,
     middle,
     last
   }
 })
 
-watch(() => props.otuId, async () => {
-  if (!props.otuId) { return }
+watch(
+  () => props.otuId,
+  async () => {
+    if (!props.otuId) { return }
 
-  citations.value = (await OtuService.getTaxonNameCitations(props.otuId)).data
-}, { immediate: true })
+    citations.value = (await TaxonWorks.getTaxonNameCitations(props.otuId)).data
+  },
+  {
+    immediate: true
+  }
+)
 
 </script>
diff --git a/src/modules/otus/components/Citation/CitationRow.vue b/src/modules/otus/components/Panel/PanelCitation/PanelCitationRow.vue
similarity index 100%
rename from src/modules/otus/components/Citation/CitationRow.vue
rename to src/modules/otus/components/Panel/PanelCitation/PanelCitationRow.vue
diff --git a/src/modules/otus/components/Citation/CitationRowShowMore.vue b/src/modules/otus/components/Panel/PanelCitation/PanelCitationShowMore.vue
similarity index 100%
rename from src/modules/otus/components/Citation/CitationRowShowMore.vue
rename to src/modules/otus/components/Panel/PanelCitation/PanelCitationShowMore.vue
diff --git a/src/modules/otus/components/Content/Content.vue b/src/modules/otus/components/Panel/PanelContent/PanelContent.vue
similarity index 81%
rename from src/modules/otus/components/Content/Content.vue
rename to src/modules/otus/components/Panel/PanelContent/PanelContent.vue
index a4a512e..b8f7d97 100644
--- a/src/modules/otus/components/Content/Content.vue
+++ b/src/modules/otus/components/Panel/PanelContent/PanelContent.vue
@@ -3,7 +3,6 @@
     <ContentTopic
       v-for="(text, title) in contentList"
       :key="title"
-      class="last:mb-0"
       :title="title"
       :text-list="text"
     />
@@ -12,8 +11,8 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue'
-import OtuService from '../../services/OtuService'
-import ContentTopic from './ContentTopic.vue'
+import TaxonWorks from '../../../services/TaxonWorks'
+import ContentTopic from './PanelContentTopic.vue'
 
 const props = defineProps({
   otuId: {
@@ -40,7 +39,7 @@ watch(
   () => props.otuId,
   id => {
     if (id) {
-      OtuService.getContent(id).then(({ data }) => {
+      TaxonWorks.getOtuContent(id).then(({ data }) => {
         contents.value = data
       })
     } else {
diff --git a/src/modules/otus/components/Content/ContentTopic.vue b/src/modules/otus/components/Panel/PanelContent/PanelContentTopic.vue
similarity index 100%
rename from src/modules/otus/components/Content/ContentTopic.vue
rename to src/modules/otus/components/Panel/PanelContent/PanelContentTopic.vue
diff --git a/src/modules/otus/components/Descendants.vue b/src/modules/otus/components/Panel/PanelDescendants/Descendants.vue
similarity index 77%
rename from src/modules/otus/components/Descendants.vue
rename to src/modules/otus/components/Panel/PanelDescendants/Descendants.vue
index a88a4e6..0f41646 100644
--- a/src/modules/otus/components/Descendants.vue
+++ b/src/modules/otus/components/Panel/PanelDescendants/Descendants.vue
@@ -8,7 +8,7 @@
     <VCardContent class="text-sm">
       <ul class="tree ml-2">
         <AnimationOpacity>
-          <TreeView
+          <DescendantsTree
             v-if="taxonomy && (taxonomy.nomenclatural_synonyms.length || taxonomy.descendants.length)"
             :taxonomy="taxonomy" 
           />
@@ -19,9 +19,9 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
-import TreeView from '@/components/TreeView.vue'
-import OtuService from '../services/OtuService';
+import { ref, watch } from 'vue'
+import DescendantsTree from './DescendantsTree.vue'
+import TaxonWorks from '../../../services/TaxonWorks'
 
 const props = defineProps({
   otuId: {
@@ -35,7 +35,7 @@ const taxonomy = ref(null)
 watch(() => props.otuId, async () => {
   if (!props.otuId) { return }
 
-  OtuService.getDescendants(props.otuId, { max_descendants_depth: 1 }).then(({ data }) => {
+  TaxonWorks.getOtuDescendants(props.otuId, { max_descendants_depth: 1 }).then(({ data }) => {
     taxonomy.value = data
   })
 }, { immediate: true })
diff --git a/src/components/SynonymList.vue b/src/modules/otus/components/Panel/PanelDescendants/DescendantsSynonymList.vue
similarity index 100%
rename from src/components/SynonymList.vue
rename to src/modules/otus/components/Panel/PanelDescendants/DescendantsSynonymList.vue
diff --git a/src/components/TreeView.vue b/src/modules/otus/components/Panel/PanelDescendants/DescendantsTree.vue
similarity index 85%
rename from src/components/TreeView.vue
rename to src/modules/otus/components/Panel/PanelDescendants/DescendantsTree.vue
index 019a522..ee42a5e 100644
--- a/src/components/TreeView.vue
+++ b/src/modules/otus/components/Panel/PanelDescendants/DescendantsTree.vue
@@ -13,7 +13,7 @@
       :to="{ name: 'otus-id', params: { id: taxonomy.otu_id } }"
       v-html="taxonomy.name"
     />
-    <SynonymList 
+    <DescendantsSynonymList 
       v-if="taxonomy.nomenclatural_synonyms.length"
       class="pb-4"
       :list="taxonomy.nomenclatural_synonyms"
@@ -28,7 +28,7 @@
           :key="item.otu_id"
         >
           <AnimationOpacity>
-            <TreeView
+            <DescendantsTree
               v-if="isTreeVisible"
               :taxonomy="item"
             />
@@ -40,9 +40,9 @@
 </template>
 
 <script setup>
-import TreeView from '@/components/TreeView.vue'
-import SynonymList from './SynonymList.vue'
-import OtuService from '@/modules/otus/services/OtuService'
+import DescendantsTree from './DescendantsTree.vue'
+import DescendantsSynonymList from './DescendantsSynonymList.vue'
+import TaxonWorks from '../../../services/TaxonWorks'
 import { ref, watch } from 'vue'
 
 const props = defineProps({
@@ -71,7 +71,7 @@ watch(
 
 const loadDescendants = () => {
   if (descendants.value.length) { return }
-  OtuService.getDescendants(props.taxonomy.otu_id, { max_descendants_depth: 1 }).then(({ data }) => {
+  TaxonWorks.getOtuDescendants(props.taxonomy.otu_id, { max_descendants_depth: 1 }).then(({ data }) => {
     descendants.value = data.descendants
   })
 }
diff --git a/src/modules/otus/components/Gallery.vue b/src/modules/otus/components/Panel/PanelGallery/Gallery.vue
similarity index 81%
rename from src/modules/otus/components/Gallery.vue
rename to src/modules/otus/components/Panel/PanelGallery/Gallery.vue
index ab388ac..85f29aa 100644
--- a/src/modules/otus/components/Gallery.vue
+++ b/src/modules/otus/components/Panel/PanelGallery/Gallery.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-import OtuService from '../services/OtuService'
+import TaxonWorks from '../../../services/TaxonWorks'
 
 const props = defineProps({
   otuId: {
@@ -27,7 +27,7 @@ watch(
       otu_scope: ['all']
     }
   
-    images.value = (await OtuService.getOtuImages(props.otuId, params)).data
+    images.value = (await TaxonWorks.getOtuImages(props.otuId, params)).data
   },
   { immediate: true }
 )
diff --git a/src/modules/otus/components/Map.vue b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
similarity index 89%
rename from src/modules/otus/components/Map.vue
rename to src/modules/otus/components/Panel/PanelMap/PanelMap.vue
index eed9b1c..7c3824e 100644
--- a/src/modules/otus/components/Map.vue
+++ b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
@@ -23,7 +23,7 @@
 
 <script setup>
 import { ref, watch } from "vue"
-import OtuService from "../services/OtuService"
+import TaxonWorks from '../../../services/TaxonWorks'
 
 const props = defineProps({
   otuId: {
@@ -42,7 +42,7 @@ watch(
     if(newId === oldId) return
     isLoading.value = true
 
-    OtuService.getGeoJSON(props.otuId).then(({ data }) => {
+    TaxonWorks.getOtuDistribution(props.otuId).then(({ data }) => {
       geojson.value = data.request_too_large
         ? null
         : data
diff --git a/src/modules/otus/components/Panel/PanelTypeDesignation/PanelTypeDesignation.vue b/src/modules/otus/components/Panel/PanelTypeDesignation/PanelTypeDesignation.vue
new file mode 100644
index 0000000..8a17144
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelTypeDesignation/PanelTypeDesignation.vue
@@ -0,0 +1,44 @@
+<template>
+  <VCard>
+    <VCardHeader>
+      <h1 class="text-md">
+        Type
+      </h1>
+    </VCardHeader>
+    <VCardContent class="text-sm">
+      <p v-html="typeDesignationLabel" />
+    </VCardContent>
+  </VCard>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+import TaxonWorks from '../../../services/TaxonWorks'
+
+const props = defineProps({
+  taxonId: {
+    type: [String, Number],
+    required: true
+  }
+})
+
+const typeDesignation = ref({})
+const typeDesignationLabel = computed(() =>
+  [
+    typeDesignation.value.subject_object_tag || '', 
+    typeDesignation.value.subject_status_tag || '',
+    typeDesignation.value.object_object_tag || ''
+  ].join(' '))
+
+watch(
+  () => props.taxonId,
+  async () => {
+    if (!props.taxonId) { return }
+
+    TaxonWorks.getTaxonTypeDesignation(props.taxonId).then(({ data }) => {
+      typeDesignation.value = data.type_taxon_name_relationship
+    })
+  },
+  { immediate: true }
+)
+</script>
\ No newline at end of file
diff --git a/src/modules/otus/components/TypeSpecimen.vue b/src/modules/otus/components/Panel/PanelTypeSpecimen/PanelTypeSpecimen.vue
similarity index 80%
rename from src/modules/otus/components/TypeSpecimen.vue
rename to src/modules/otus/components/Panel/PanelTypeSpecimen/PanelTypeSpecimen.vue
index 1ea87c0..724a829 100644
--- a/src/modules/otus/components/TypeSpecimen.vue
+++ b/src/modules/otus/components/Panel/PanelTypeSpecimen/PanelTypeSpecimen.vue
@@ -15,8 +15,8 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-import { SPECIMEN_TYPES } from '../constants'
-import OtuService from '../services/OtuService'
+import { SPECIMEN_TYPES } from '../../../constants'
+import TaxonWorks from '../../../services/TaxonWorks'
 
 const props = defineProps({
   otuId: {
@@ -32,7 +32,7 @@ watch(
   () => {
   if (!props.otuId) { return }
 
-  OtuService.getTypes(props.otuId).then(({ data }) => {
+  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 })
diff --git a/src/modules/otus/components/TypeDesignation.vue b/src/modules/otus/components/TypeDesignation.vue
deleted file mode 100644
index 3add2da..0000000
--- a/src/modules/otus/components/TypeDesignation.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <VCard>
-    <VCardHeader>
-      <h1 class="text-md">
-        Type
-      </h1>
-    </VCardHeader>
-    <VCardContent class="text-sm">
-      <p v-html="typeSpeciesLabel" />
-    </VCardContent>
-  </VCard>
-</template>
-
-<script setup>
-import { ref, watch, computed } from 'vue'
-import OtuService from '../services/OtuService'
-
-const props = defineProps({
-  taxonId: {
-    type: [String, Number],
-    required: true
-  }
-})
-
-const typeSpecies = ref({})
-const typeSpeciesLabel = computed(() => [
-  typeSpecies.value.subject_object_tag || '', 
-  typeSpecies.value.subject_status_tag || '',
-  typeSpecies.value.object_object_tag || ''
-].join(' '))
-
-watch(
-  () => props.taxonId, async () => {
-  if (!props.taxonId) { return }
-
-  OtuService.getTaxonTypeSpecies(props.taxonId).then(({ data }) => {
-    typeSpecies.value = data.type_taxon_name_relationship
-  })
-}, { immediate: true })
-</script>
\ No newline at end of file
diff --git a/src/modules/otus/constants/index.js b/src/modules/otus/constants/index.js
index 44b902a..b7becd8 100644
--- a/src/modules/otus/constants/index.js
+++ b/src/modules/otus/constants/index.js
@@ -1 +1,2 @@
-export * from './typeOrder';
+export * from './typeOrder'
+export * from './rankGroups'
diff --git a/src/modules/otus/constants/overviewLayout.js b/src/modules/otus/constants/overviewLayout.js
new file mode 100644
index 0000000..3acf41e
--- /dev/null
+++ b/src/modules/otus/constants/overviewLayout.js
@@ -0,0 +1,29 @@
+import { FAMILY_GROUP, GENUS_GROUP, SPECIES_GROUP } from './index.js'
+import PanelGallery from '../components/Panel/PanelGallery/Gallery.vue'
+import PanelTypeSpecimen from '../components/Panel/PanelTypeSpecimen/PanelTypeSpecimen.vue'
+import PanelTypeDesignation from '../components/Panel/PanelTypeDesignation/PanelTypeDesignation.vue'
+import PanelCitations from '../components/Panel/PanelCitation/PanelCitation.vue'
+import PanelMap from '../components/Panel/PanelMap/PanelMap.vue'
+import PanelDescendants from '../components/Panel/PanelDescendants/Descendants.vue'
+import PanelContent from '../components/Panel/PanelContent/PanelContent.vue'
+
+export const overviewLayout = {
+  left: [
+    { component: PanelGallery },
+    {
+      component: PanelTypeSpecimen,
+      available: [SPECIES_GROUP]
+    },
+    {
+      component: PanelTypeDesignation,
+      available: [FAMILY_GROUP, GENUS_GROUP]
+    },
+    { component: PanelCitations }
+  ],
+
+  right: [
+    { component: PanelMap },
+    { component: PanelDescendants },
+    { component: PanelContent }
+  ]
+}
diff --git a/src/constants/rankGroups.js b/src/modules/otus/constants/rankGroups.js
similarity index 100%
rename from src/constants/rankGroups.js
rename to src/modules/otus/constants/rankGroups.js
diff --git a/src/modules/otus/services/OtuService.js b/src/modules/otus/services/TaxonWorks.js
similarity index 81%
rename from src/modules/otus/services/OtuService.js
rename to src/modules/otus/services/TaxonWorks.js
index 612ff5a..40bd8b8 100644
--- a/src/modules/otus/services/OtuService.js
+++ b/src/modules/otus/services/TaxonWorks.js
@@ -1,6 +1,6 @@
 import { makeAPIRequest } from "@/utils/request"
 
-export default class OtuService {
+export default class TaxonWorks {
 
   static getTaxonNameCitations (otuId) {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/nomenclature_citations`, { params: { extend: ['source'] } })
@@ -14,7 +14,7 @@ export default class OtuService {
     return makeAPIRequest.get(`/taxon_names/${id}`)
   }
 
-  static getTaxonTypeSpecies (id) {
+  static getTaxonTypeDesignation (id) {
     return makeAPIRequest.get(`/taxon_names/${id}`, { params: { extend: ['type_taxon_name_relationship'] } })
   }
 
@@ -22,19 +22,19 @@ export default class OtuService {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/images.json`, { params })
   }
 
-  static getDescendants (otuId, params) {
+  static getOtuDescendants (otuId, params) {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/taxonomy.json`, { params })
   }
 
-  static getTypes (otuId) {
+  static getOtuTypeMaterial (otuId) {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/type_material.json`)
   }
 
-  static getGeoJSON (otuId) {
+  static getOtuDistribution (otuId) {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/distribution`)
   }
 
-  static getContent (otuId) {
+  static getOtuContent (otuId) {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/content`, { extend: ['depiction']})
   }
 }
\ No newline at end of file
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index dd8adb1..b8eef5a 100644
--- a/src/modules/otus/views/Index.vue
+++ b/src/modules/otus/views/Index.vue
@@ -84,7 +84,7 @@ import { useRoute, useRouter } from 'vue-router'
 import Breadcrumb from '@/components/Breadcrumb.vue'
 import TaxaInfo from '@/modules/otus/components/TaxaInfo.vue'
 import useChildrenRoutes from '../composables/useChildrenRoutes'
-import OtuService from '../services/OtuService'
+import TaxonWorks from '../services/TaxonWorks'
 
 const route = useRoute()
 const router = useRouter()
@@ -103,8 +103,8 @@ watch(routeParams, async (newParams, oldParams) => {
   otu.value = {}
   taxon.value = {}
 
-  otu.value = (await OtuService.getOtu(route.params.id)).data
-  taxon.value = (await OtuService.getTaxon(otu.value.taxon_name_id)).data
+  otu.value = (await TaxonWorks.getOtu(route.params.id)).data
+  taxon.value = (await TaxonWorks.getTaxon(otu.value.taxon_name_id)).data
 
 }, { immediate: true })
 
diff --git a/src/modules/otus/views/Overview.vue b/src/modules/otus/views/Overview.vue
index 898dbe6..01fc92c 100644
--- a/src/modules/otus/views/Overview.vue
+++ b/src/modules/otus/views/Overview.vue
@@ -3,7 +3,7 @@
     <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
       <div class="grid grid-cols-1 gap-3 auto-rows-min">
         <template
-          v-for="({ component, available }) in componentsLayout.left"
+          v-for="({ component, available }) in overviewLayout.left"
           :key="component"
         >
           <component
@@ -16,7 +16,7 @@
       </div>
       <div class="grid grid-cols-1 auto-rows-min gap-3">
         <template
-          v-for="({ component, available }) in componentsLayout.right"
+          v-for="({ component, available }) in overviewLayout.right"
           :key="component"
         >
           <component
@@ -32,34 +32,7 @@
 </template>
 
 <script setup>
-import OtuGallery from '@/modules/otus/components/Gallery.vue'
-import OtuTypeSpecimen from '@/modules/otus/components/TypeSpecimen.vue'
-import OtuTypeDesignation from '@/modules/otus/components/TypeDesignation.vue'
-import OtuCitations from '@/modules/otus/components/Citation/CitationList.vue'
-import OtuMap from '@/modules/otus/components/Map.vue'
-import OtuDescendants from '@/modules/otus/components/Descendants.vue'
-import OtuContent from '@/modules/otus/components/Content/Content.vue'
-import { FAMILY_GROUP, GENUS_GROUP, SPECIES_GROUP } from '@/constants/rankGroups'
-
-const componentsLayout = {
-  left: [
-    { component: OtuGallery },
-    { 
-      component: OtuTypeSpecimen,
-      available: [SPECIES_GROUP] 
-    },
-    {
-      component: OtuTypeDesignation,
-      available: [FAMILY_GROUP, GENUS_GROUP]
-    },
-    { component: OtuCitations }
-  ],
-  right: [
-    { component: OtuMap },
-    { component: OtuDescendants },
-    { component: OtuContent }
-  ]
-}
+import { overviewLayout } from '../constants/overviewLayout'
 
 defineProps({
   taxonId: {