From 85a66e851819b9d4a4af190bf8e10e68b491ac66 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Thu, 31 Aug 2023 20:21:36 -0300
Subject: [PATCH] Add panel layout customization. Add analytics

---
 package-lock.json                             | 12 +++-
 package.json                                  |  3 +-
 .../components/Panel/PanelContent/main.js     |  6 ++
 .../{Descendants.vue => PanelDescendants.vue} |  0
 .../components/Panel/PanelDescendants/main.js |  6 ++
 .../{Gallery.vue => PanelGallery.vue}         |  0
 .../components/Panel/PanelGallery/main.js     |  8 +++
 .../otus/components/Panel/PanelMap/main.js    |  6 ++
 .../Panel/PanelNomenclature/main.js           |  6 ++
 .../Panel/PanelNomenclatureReferences/main.js |  6 ++
 .../otus/components/Panel/PanelStats/main.js  |  6 ++
 .../Panel/PanelTypeDesignation/main.js        |  8 +++
 .../Panel/PanelTypeSpecimen/main.js           |  8 +++
 src/modules/otus/constants/overviewLayout.js  | 68 +++++++++++--------
 src/modules/otus/views/Overview.vue           | 45 ++++++------
 vite.config.js                                |  7 ++
 16 files changed, 142 insertions(+), 53 deletions(-)
 create mode 100644 src/modules/otus/components/Panel/PanelContent/main.js
 rename src/modules/otus/components/Panel/PanelDescendants/{Descendants.vue => PanelDescendants.vue} (100%)
 create mode 100644 src/modules/otus/components/Panel/PanelDescendants/main.js
 rename src/modules/otus/components/Panel/PanelGallery/{Gallery.vue => PanelGallery.vue} (100%)
 create mode 100644 src/modules/otus/components/Panel/PanelGallery/main.js
 create mode 100644 src/modules/otus/components/Panel/PanelMap/main.js
 create mode 100644 src/modules/otus/components/Panel/PanelNomenclature/main.js
 create mode 100644 src/modules/otus/components/Panel/PanelNomenclatureReferences/main.js
 create mode 100644 src/modules/otus/components/Panel/PanelStats/main.js
 create mode 100644 src/modules/otus/components/Panel/PanelTypeDesignation/main.js
 create mode 100644 src/modules/otus/components/Panel/PanelTypeSpecimen/main.js

diff --git a/package-lock.json b/package-lock.json
index bbe79a5..c67b09a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,8 @@
         "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"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -5148,6 +5149,15 @@
         }
       }
     },
+    "node_modules/vite-plugin-radar": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-radar/-/vite-plugin-radar-0.9.1.tgz",
+      "integrity": "sha512-stnb+LxeEKobcesXW2JA0OdCaBRgR/zZwN6ACXZf1gF9MNR689aiK5UlgTVmrpUnEcPucO9U0M0WHnuM6NXPsA==",
+      "dev": true,
+      "peerDependencies": {
+        "vite": "^2.0.0 || ^3.0.0 || ^4.0.0"
+      }
+    },
     "node_modules/vitest": {
       "version": "0.25.8",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.25.8.tgz",
diff --git a/package.json b/package.json
index 6197dff..afaa8fe 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/modules/otus/components/Panel/PanelContent/main.js b/src/modules/otus/components/Panel/PanelContent/main.js
new file mode 100644
index 0000000..b34c899
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelContent/main.js
@@ -0,0 +1,6 @@
+import PanelContent from './PanelContent.vue'
+
+export default {
+  id: 'panel:content',
+  component: PanelContent
+}
diff --git a/src/modules/otus/components/Panel/PanelDescendants/Descendants.vue b/src/modules/otus/components/Panel/PanelDescendants/PanelDescendants.vue
similarity index 100%
rename from src/modules/otus/components/Panel/PanelDescendants/Descendants.vue
rename to src/modules/otus/components/Panel/PanelDescendants/PanelDescendants.vue
diff --git a/src/modules/otus/components/Panel/PanelDescendants/main.js b/src/modules/otus/components/Panel/PanelDescendants/main.js
new file mode 100644
index 0000000..26dac4d
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelDescendants/main.js
@@ -0,0 +1,6 @@
+import PanelDescendants from './PanelDescendants.vue'
+
+export default {
+  id: 'panel:descendants',
+  component: PanelDescendants
+}
diff --git a/src/modules/otus/components/Panel/PanelGallery/Gallery.vue b/src/modules/otus/components/Panel/PanelGallery/PanelGallery.vue
similarity index 100%
rename from src/modules/otus/components/Panel/PanelGallery/Gallery.vue
rename to src/modules/otus/components/Panel/PanelGallery/PanelGallery.vue
diff --git a/src/modules/otus/components/Panel/PanelGallery/main.js b/src/modules/otus/components/Panel/PanelGallery/main.js
new file mode 100644
index 0000000..841c21d
--- /dev/null
+++ b/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]
+}
diff --git a/src/modules/otus/components/Panel/PanelMap/main.js b/src/modules/otus/components/Panel/PanelMap/main.js
new file mode 100644
index 0000000..ad7b675
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelMap/main.js
@@ -0,0 +1,6 @@
+import PanelMap from './PanelMap.vue'
+
+export default {
+  id: 'panel:map',
+  component: PanelMap
+}
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/main.js b/src/modules/otus/components/Panel/PanelNomenclature/main.js
new file mode 100644
index 0000000..d0a1e20
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelNomenclature/main.js
@@ -0,0 +1,6 @@
+import PanelNomenclature from './PanelNomenclature.vue'
+
+export default {
+  id: 'panel:nomenclature',
+  component: PanelNomenclature
+}
diff --git a/src/modules/otus/components/Panel/PanelNomenclatureReferences/main.js b/src/modules/otus/components/Panel/PanelNomenclatureReferences/main.js
new file mode 100644
index 0000000..bbdcc7e
--- /dev/null
+++ b/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
+}
diff --git a/src/modules/otus/components/Panel/PanelStats/main.js b/src/modules/otus/components/Panel/PanelStats/main.js
new file mode 100644
index 0000000..3227905
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelStats/main.js
@@ -0,0 +1,6 @@
+import PanelStats from './PanelStats.vue'
+
+export default {
+  id: 'panel:statistics',
+  component: PanelStats
+}
diff --git a/src/modules/otus/components/Panel/PanelTypeDesignation/main.js b/src/modules/otus/components/Panel/PanelTypeDesignation/main.js
new file mode 100644
index 0000000..b111df3
--- /dev/null
+++ b/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]
+}
diff --git a/src/modules/otus/components/Panel/PanelTypeSpecimen/main.js b/src/modules/otus/components/Panel/PanelTypeSpecimen/main.js
new file mode 100644
index 0000000..efe810b
--- /dev/null
+++ b/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]
+}
diff --git a/src/modules/otus/constants/overviewLayout.js b/src/modules/otus/constants/overviewLayout.js
index 052d7b6..d2bd282 100644
--- a/src/modules/otus/constants/overviewLayout.js
+++ b/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
+)
diff --git a/src/modules/otus/views/Overview.vue b/src/modules/otus/views/Overview.vue
index 2209191..7544b04 100644
--- a/src/modules/otus/views/Overview.vue
+++ b/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>
diff --git a/vite.config.js b/vite.config.js
index ea68340..2bec802 100644
--- a/vite.config.js
+++ b/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
       })
     ]
   })