Merge and Update schema

package.json

@@ -16,31 +16,32 @@
   },
   "dependencies": {
     "@geoman-io/leaflet-geoman-free": "^2.14.2",
-    "@nuxt/devalue": "^2.0.0",
-    "axios": "^1.3.6",
+    "@nuxt/devalue": "^2.0.2",
+    "@unhead/ssr": "^1.1.27",
+    "axios": "^1.4.0",
     "js-yaml": "^4.1.0",
-    "leaflet": "^1.9.3",
-    "pinia": "^2.0.35",
-    "unhead": "^1.1.26",
-    "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "leaflet": "^1.9.4",
+    "pinia": "^2.1.3",
+    "unhead": "^1.1.27",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.1"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
     "@unhead/schema-org": "^0.5.0",
     "@unhead/ssr": "^1.1.26",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "autoprefixer": "^10.4.14",
     "compression": "^1.7.4",
-    "eslint": "^8.39.0",
-    "eslint-plugin-vue": "^9.11.0",
+    "eslint": "^8.41.0",
+    "eslint-plugin-vue": "^9.14.0",
     "express": "^4.18.2",
     "minimist": "^1.2.8",
     "postcss": "^8.4.23",
-    "sass": "^1.62.0",
-    "tailwindcss": "^3.3.1",
-    "vite": "^4.3.1",
+    "sass": "^1.62.1",
+    "tailwindcss": "^3.3.2",
+    "vite": "^4.3.8",
     "vite-plugin-md": "^0.21.5",
-    "vite-plugin-pages": "^0.29.0"
+    "vite-plugin-pages": "^0.30.1"
   }
 }

src/App.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script setup>
-import ApplicationLayout from '@/layout/Application.vue'
 import { useHead } from 'unhead'
 import { getMetaFromConfig } from '@/utils'
-import { useRouter } from 'vue-router'
+import ApplicationLayout from '@/layout/Application.vue'
+
 const meta = getMetaFromConfig(__APP_ENV__)
 
 useHead({

src/assets/css/vars.css

@@ -14,6 +14,7 @@
   --color-base-content: 0, 0, 0;
 
   --color-map-georeference: 239, 68, 68;
+  --color-map-aggregate: 249, 115, 22;
   --color-map-asserted: 249, 115, 22;
   --color-map-type-material: 51, 136, 255;
   --color-map-collection-object: 239, 68, 68;

src/components/Autocomplete/AutocompleteOtu.global.vue

@@ -22,11 +22,11 @@ const props = defineProps({
   }
 })
 
-const loadOtu = ({ id }) => {
+const loadOtu = ({ id, otu_valid_id }) => {
   router.push({
     name: 'otus-id-overview',
     params: {
-      id
+      id: otu_valid_id || id
     }
   })
 }

src/components/Icon/IconDownload.global.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+    />
+  </svg>
+</template>

src/components/Layout/LayoutHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative bg-header border-base-muted px-2 sm:px-4 py-2.5 border-b pl-4 pr-4 h-9 align-middle flex items-center bg-primary-color"
+    class="relative bg-header px-2 sm:px-4 py-2.5 shadow-sm shadow-base-muted pl-4 pr-4 h-9 align-middle flex items-center bg-primary-color"
   >
     <div
       class="container flex flex-wrap justify-between items-center mx-auto font-medium text-secondary-content"
@@ -12,7 +12,7 @@
         <img
           v-if="header_logo_url"
           class="mr-3 h-10"
-          :src="header_logo_url"
+          :src="logoUrl"
           :alt="header_logo_text"
         />
         <span>
@@ -52,6 +52,12 @@
 <script setup>
 import SwitchTheme from '../SwitchTheme.vue'
 import NavbarMobile from '../Navbar/NavbarMobile.vue'
+import { isValidUrl } from '@/utils/url'
 
-const { header_links, header_logo_text, header_logo_url } = __APP_ENV__
+const { header_links, header_logo_text, header_logo_url, base_url } =
+  __APP_ENV__
+
+const logoUrl = isValidUrl(header_logo_url)
+  ? header_logo_url
+  : (base_url + header_logo_url).replace('//', '/')
 </script>

src/components/Map/VMap.client.vue

@@ -24,7 +24,7 @@ L.Icon.Default.mergeOptions({
   shadowUrl: shadowUrl
 })
 
-const { map_server_tils } = __APP_ENV__
+const { map_tile_server, map_tile_attribution } = __APP_ENV__
 
 const props = defineProps({
   controls: {
@@ -101,9 +101,10 @@ let geoJSONGroup
 
 const leafletMap = ref(null)
 const tiles = {
-  osm: L.tileLayer(map_server_tils, {
+  osm: L.tileLayer(map_tile_server, {
     maxZoom: 18,
-    className: 'map-tiles'
+    className: 'map-tiles',
+    attribution: map_tile_attribution
   })
 }
 

src/components/Map/shapes/Aggregate.js

@@ -0,0 +1,7 @@
+export const Aggregate = {
+  color: 'rgb(var(--color-map-aggregate))',
+  weight: 1,
+  dashArray: '3',
+  dashOffset: '3',
+  fillOpacity: 0.25
+}

src/components/Map/shapes/index.js

@@ -1,3 +1,4 @@
+export * from './Aggregate'
 export * from './AssertedDistribution'
 export * from './CollectionObject'
 export * from './TypeMaterial'

src/components/Map/utils/geojsonOptions.js

@@ -5,7 +5,8 @@ const TYPES = [
   'TypeMaterial',
   'CollectionObject',
   'AssertedDistribution',
-  'Georeference'
+  'Georeference',
+  'Aggregate'
 ]
 
 const DEFAULT_OPTIONS = {

src/components/SwitchTheme.vue

@@ -2,7 +2,11 @@
   <button
     type="button"
     @click="toggleTheme"
-    title="Toggle mode"
+    :title="
+      themeMode === themeModes.light
+        ? 'Change to dark mode'
+        : 'Change to light mode'
+    "
   >
     <svg
       v-if="themeMode === themeModes.dark"

src/components/VSkeleton.global.vue

@@ -1,21 +1,21 @@
 <template>
   <slot />
   <span
-    v-if="isEmpty"
+    v-if="isLoading"
     :class="class"
   >
     <span
       v-for="line in lines"
       :key="line"
-      class="inline-block w-full rounded-sm bg-gray-100 leading-5"
+      class="inline-block w-full rounded-sm bg-base-muted leading-5"
     >
       &zwnj;
     </span>
   </span>
 </template>
 
 <script setup>
-import { useAttrs, useSlots, computed } from 'vue'
+import { useSlots, computed } from 'vue'
 
 const props = defineProps({
   class: {
@@ -30,9 +30,8 @@ const props = defineProps({
 })
 
 const slots = useSlots()
-const attrs = useAttrs()
 
-const isEmpty = computed(() => {
+const isLoading = computed(() => {
   const children = slots.default?.()
 
   return isEmptyVNode(children)
@@ -44,6 +43,6 @@ function isEmptyVNode(children) {
   const [firstNode] = children
   let str = firstNode.children
 
-  return firstNode.el || str
+  return firstNode.el !== null || str !== null
 }
 </script>

src/constants/defaultConfig.js

@@ -0,0 +1,7 @@
+export default {
+  base_url: '/',
+  hash_mode: false,
+  map_tile_server: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+  map_tile_attribution:
+    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}

src/modules/otus/components/CommonNames.vue

@@ -22,7 +22,7 @@ watch(
   () => props.otuId,
   (id) => {
     if (id) {
-      TaxonWorks.getOtuDescendants(id, {
+      TaxonWorks.getTaxonomy(id, {
         max_descendants_depth: 0,
         extend: ['common_names']
       }).then(({ data }) => {

src/modules/otus/components/DWCDownload.vue

@@ -0,0 +1,30 @@
+<template>
+  <VButton
+    primary
+    class="text-sm flex"
+    @click="download"
+  >
+    <IconDownload class="w-4 h-4 mr-1" />
+    DwC
+  </VButton>
+</template>
+
+<script setup>
+import TaxonWorks from '../services/TaxonWorks'
+import { downloadTextFile } from '../utils/files'
+
+const props = defineProps({
+  otu: {
+    type: Object,
+    required: true
+  }
+})
+
+function download() {
+  TaxonWorks.getDwC(props.otu.id).then(({ data }) => {
+    downloadTextFile(data, 'text/csv', 'dwc_records')
+  })
+}
+
+downloadTextFile
+</script>

src/modules/otus/components/Panel/PanelDescendants/Descendants.vue

@@ -1,16 +1,18 @@
 <template>
   <VCard>
     <VCardHeader>
-      <h1 class="text-md">
-        Descendants and synonyms
-      </h1>
+      <h1 class="text-md">Descendants and synonyms</h1>
     </VCardHeader>
     <VCardContent class="text-sm">
       <ul class="tree ml-2">
         <AnimationOpacity>
           <DescendantsTree
-            v-if="taxonomy && (taxonomy.nomenclatural_synonyms.length || taxonomy.descendants.length)"
-            :taxonomy="taxonomy" 
+            v-if="
+              taxonomy &&
+              (taxonomy.nomenclatural_synonyms.length ||
+                taxonomy.descendants.length)
+            "
+            :taxonomy="taxonomy"
           />
         </AnimationOpacity>
       </ul>
@@ -32,21 +34,28 @@ const props = defineProps({
 
 const taxonomy = ref(null)
 
-watch(() => props.otuId, async () => {
-  if (!props.otuId) { return }
-
-  TaxonWorks.getOtuDescendants(props.otuId, { max_descendants_depth: 1 }).then(({ data }) => {
-    taxonomy.value = data
-  })
-}, { immediate: true })
+watch(
+  () => props.otuId,
+  async () => {
+    if (!props.otuId) {
+      return
+    }
 
+    TaxonWorks.getTaxonomy(props.otuId, { max_descendants_depth: 1 }).then(
+      ({ data }) => {
+        taxonomy.value = data
+      }
+    )
+  },
+  { immediate: true }
+)
 </script>
 
 <style scoped>
-  .otu-synonyms {
-    list-style: none;
-    border-left:1px solid rgb(100,100,100);
-    padding-left:8px;
-    padding-bottom: 8px;
-  }
-</style>
+.otu-synonyms {
+  list-style: none;
+  border-left: 1px solid rgb(100, 100, 100);
+  padding-left: 8px;
+  padding-bottom: 8px;
+}
+</style>