Merge pull request #132 from SpeciesFileGroup/panels

Add panel layout customization. Add analytics

package.json

@@ -42,6 +42,7 @@
     "tailwindcss": "^3.3.3",
     "vite": "^4.4.9",
     "vite-plugin-md": "^0.21.5",
-    "vite-plugin-pages": "^0.31.0"
+    "vite-plugin-pages": "^0.31.0",
+    "vite-plugin-radar": "^0.9.1"
   }
 }

src/modules/otus/components/Panel/PanelContent/main.js

@@ -0,0 +1,6 @@
+import PanelContent from './PanelContent.vue'
+
+export default {
+  id: 'panel:content',
+  component: PanelContent
+}

src/modules/otus/components/Panel/PanelDescendants/main.js

@@ -0,0 +1,6 @@
+import PanelDescendants from './PanelDescendants.vue'
+
+export default {
+  id: 'panel:descendants',
+  component: PanelDescendants
+}

src/modules/otus/components/Panel/PanelGallery/main.js

@@ -0,0 +1,8 @@
+import { SPECIES_GROUP } from '@/modules/otus/constants'
+import PanelGallery from './PanelGallery.vue'
+
+export default {
+  id: 'panel:gallery',
+  component: PanelGallery,
+  available: [SPECIES_GROUP]
+}

src/modules/otus/components/Panel/PanelMap/main.js

@@ -0,0 +1,6 @@
+import PanelMap from './PanelMap.vue'
+
+export default {
+  id: 'panel:map',
+  component: PanelMap
+}

src/modules/otus/components/Panel/PanelNomenclature/main.js

@@ -0,0 +1,6 @@
+import PanelNomenclature from './PanelNomenclature.vue'
+
+export default {
+  id: 'panel:nomenclature',
+  component: PanelNomenclature
+}

src/modules/otus/components/Panel/PanelNomenclatureReferences/main.js

@@ -0,0 +1,6 @@
+import PanelNomenclatureReferences from './PanelNomenclatureReferences.vue'
+
+export default {
+  id: 'panel:nomenclature-references',
+  component: PanelNomenclatureReferences
+}

src/modules/otus/components/Panel/PanelStats/main.js

@@ -0,0 +1,6 @@
+import PanelStats from './PanelStats.vue'
+
+export default {
+  id: 'panel:statistics',
+  component: PanelStats
+}

src/modules/otus/components/Panel/PanelTypeDesignation/main.js

@@ -0,0 +1,8 @@
+import PanelTypeDesignation from './PanelTypeDesignation.vue'
+import { FAMILY_GROUP, GENUS_GROUP } from '../../../constants'
+
+export default {
+  id: 'panel:type',
+  component: PanelTypeDesignation,
+  available: [FAMILY_GROUP, GENUS_GROUP]
+}

src/modules/otus/components/Panel/PanelTypeSpecimen/main.js

@@ -0,0 +1,8 @@
+import { SPECIES_GROUP } from '../../../constants'
+import PanelTypeSpecimen from './PanelTypeSpecimen.vue'
+
+export default {
+  id: 'panel:type-specimen',
+  component: PanelTypeSpecimen,
+  available: [SPECIES_GROUP]
+}

src/modules/otus/constants/overviewLayout.js

@@ -1,33 +1,43 @@
-import { FAMILY_GROUP, GENUS_GROUP, SPECIES_GROUP } from './rankGroups.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 PanelNomenclature from '../components/Panel/PanelNomenclature/PanelNomenclature.vue'
-import PanelNomenclatureReference from '../components/Panel/PanelNomenclatureReferences/PanelNomenclatureReferences.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'
-import PanelStats from '../components/Panel/PanelStats/PanelStats.vue'
+const panelEntries = Object.values(
+  import.meta.glob('../components/Panel/*/main.js', {
+    eager: true,
+    import: 'default'
+  })
+)
 
-export const overviewLayout = {
-  left: [
-    { component: PanelGallery },
-    {
-      component: PanelTypeSpecimen,
-      available: [SPECIES_GROUP]
-    },
-    {
-      component: PanelTypeDesignation,
-      available: [FAMILY_GROUP, GENUS_GROUP]
-    },
-    { component: PanelNomenclature },
-    { component: PanelNomenclatureReference }
-  ],
+const { taxa_page_overview } = __APP_ENV__
 
-  right: [
-    { component: PanelMap },
-    { component: PanelDescendants },
-    { component: PanelContent },
-    { component: PanelStats }
+const DEFAULT_LAYOUT = [
+  [
+    [
+      'panel:gallery',
+      'panel:type',
+      'panel:type',
+      'panel:type-specimen',
+      'panel:nomenclature',
+      'panel:nomenclature-references'
+    ],
+    ['panel:map', 'panel:descendants', 'panel:content', 'panel:statistics']
   ]
+]
+
+function parsePanelConfiguraion(panelLayout) {
+  return panelLayout.map((row) =>
+    row.map((col) =>
+      col.map((panel) => {
+        const isPanelKey = typeof panel === 'string'
+        const panelObj = isPanelKey ? { id: panel } : { ...panel }
+        const entry = panelEntries.find((item) => item.id === panelObj.id)
+
+        return {
+          ...entry,
+          ...panelObj
+        }
+      })
+    )
+  )
 }
+
+export const overviewLayout = parsePanelConfiguraion(
+  taxa_page_overview.panels || DEFAULT_LAYOUT
+)

src/modules/otus/views/Overview.vue

@@ -1,25 +1,18 @@
 <template>
-  <div>
-    <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
-      <div class="grid grid-cols-1 gap-3 auto-rows-min">
+  <div class="grid gap-3">
+    <div
+      v-for="(row, index) in overviewLayout"
+      class="grid grid-cols-1 gap-3"
+      :class="[columnClasses[row.length]]"
+    >
+      <div
+        v-for="(column, index) in row"
+        class="grid grid-cols-1 gap-3 auto-rows-min"
+        :key="index"
+      >
         <template
-          v-for="{ component, available } in overviewLayout.left"
-          :key="component"
-        >
-          <component
-            :is="component"
-            v-if="!available || isComponentForRank(available, taxonRank)"
-            :otu-id="otuId"
-            :otu="otu"
-            :taxon-id="taxonId"
-            :taxon="taxon"
-          />
-        </template>
-      </div>
-      <div class="grid grid-cols-1 auto-rows-min gap-3">
-        <template
-          v-for="{ component, available } in overviewLayout.right"
-          :key="component"
+          v-for="{ component, available, id } in column"
+          :key="id"
         >
           <component
             :is="component"
@@ -36,6 +29,7 @@
 </template>
 
 <script setup>
+import { computed } from 'vue'
 import { overviewLayout } from '../constants/overviewLayout'
 
 defineProps({
@@ -65,6 +59,13 @@ defineProps({
   }
 })
 
-const isComponentForRank = (available, rankString) =>
-  available.some((rankGroup) => rankString?.includes(rankGroup))
+const columnClasses = {
+  1: ['md:grid-cols-1'],
+  2: ['md:grid-cols-2'],
+  3: ['md:grid-cols-3']
+}
+
+function isComponentForRank(available, rankString) {
+  return available.some((rankGroup) => rankString?.includes(rankGroup))
+}
 </script>

vite.config.js

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import { loadConfiguration } from './src/utils/loadConfiguration.js'
+import { VitePluginRadar } from 'vite-plugin-radar'
 import path from 'path'
 import Vue from '@vitejs/plugin-vue'
 import Markdown from 'vite-plugin-md'
@@ -29,6 +30,7 @@ export default () => {
       Vue({
         include: [/\.vue$/, /\.md$/]
       }),
+
       Markdown({
         wrapperClasses:
           '!container mx-auto p-4 sm:pl-0 sm:pr-0 prose dark:prose-invert box-border',
@@ -40,6 +42,7 @@ export default () => {
         },
         markdownItUses: [relativeToRouterPlugin]
       }),
+
       Pages({
         dirs: 'pages',
         exclude: ['**/components/*.vue'],
@@ -52,6 +55,10 @@ export default () => {
             return route
           }
         }
+      }),
+
+      VitePluginRadar({
+        ...configuration?.analytics_services
       })
     ]
   })