Update distribution endpoints, add aggregate type

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/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/modules/otus/components/Panel/PanelMap/PanelMap.vue

@@ -7,7 +7,7 @@
           class="h-96 max-h-96"
           dragging
           :zoom="zoom"
-          :geojson="geojson"
+          :geojson="store.distribution.geojson"
           @geojson:ready="() => (isLoading = false)"
         />
       </ClientOnly>
@@ -22,23 +22,23 @@
         <OtuSearch
           v-if="isOtuSearchVisible"
           :otu="otu"
-          :shapes="geojson"
+          :shapes="store.distribution.geojson"
           @close="() => (isOtuSearchVisible = false)"
         />
       </ClientOnly>
     </div>
     <div
-      v-if="errorMessage"
+      v-if="store.distribution.errorMessage"
       class="flex flex-row p-2 text-xs italic"
     >
-      * {{ errorMessage }}
+      * {{ store.distribution.errorMessage }}
     </div>
     <div
       class="flex flex-row p-2 gap-2 text-xs"
-      v-if="currentShapeTypes.length"
+      v-if="store.distribution.currentShapeTypes.length"
     >
       <div
-        v-for="type in currentShapeTypes"
+        v-for="type in store.distribution.currentShapeTypes"
         :key="type"
         class="flex flex-row items-center"
       >
@@ -54,7 +54,7 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-import TaxonWorks from '../../../services/TaxonWorks'
+import { useOtuStore } from '@/modules/otus/store/store'
 import OtuSearch from '../../Search/OtuSearch.vue'
 
 const props = defineProps({
@@ -66,15 +66,18 @@ const props = defineProps({
   otu: {
     type: Object,
     required: true
+  },
+
+  taxon: {
+    type: Object,
+    required: true
   }
 })
 
 const zoom = 2
-const geojson = ref(undefined)
 const isLoading = ref(true)
 const isOtuSearchVisible = ref(false)
-const currentShapeTypes = ref([])
-const errorMessage = ref(null)
+const store = useOtuStore()
 
 const LEGEND = {
   AssertedDistribution: {
@@ -92,6 +95,10 @@ const LEGEND = {
   CollectionObject: {
     label: 'Collection object',
     background: 'bg-map-collection-object'
+  },
+  Aggregate: {
+    label: 'Aggregate (Asserted distribution & Georeference)',
+    background: 'bg-map-aggregate'
   }
 }
 
@@ -101,55 +108,11 @@ watch(
     if (newId === oldId) return
     isLoading.value = true
 
-    const { data } = await TaxonWorks.getOtuDistribution(props.otuId)
-
-    if (data.request_too_large) {
-      geojson.value = null
-      errorMessage.value = data.message
-    } else {
-      geojson.value = {
-        ...data,
-        features: removeDuplicateShapes(data)
-      }
-    }
+    store.loadDistribution({
+      otuId: props.otuId,
+      rankString: props.taxon.rank_string
+    })
   },
   { immediate: true }
 )
-
-function removeDuplicateShapes(data) {
-  const features = []
-
-  data.features.forEach((feature) => {
-    const shapeId = feature.properties.shape.id
-    const shapeType = feature.properties.shape.type
-
-    if (!currentShapeTypes.value.includes(feature.properties.base.type)) {
-      currentShapeTypes.value.push(feature.properties.base.type)
-    }
-
-    const index = features.findIndex(
-      (item) =>
-        item.properties.shape.id === shapeId &&
-        item.properties.shape.type === shapeType
-    )
-
-    if (index > -1) {
-      const currentFeature = features[index]
-
-      currentFeature.properties.base.push(feature.properties.base)
-      currentFeature.properties.target.push(feature.properties.target)
-    } else {
-      const item = structuredClone(feature)
-
-      item.properties.base = [item.properties.base]
-      item.properties.target = [item.properties.target]
-
-      features.push(item)
-    }
-  })
-
-  currentShapeTypes.value.sort()
-
-  return features
-}
 </script>

src/modules/otus/services/TaxonWorks.js

@@ -48,7 +48,11 @@ export default class TaxonWorks {
   }
 
   static getOtuDistribution(otuId) {
-    return makeAPIRequest.get(`/otus/${otuId}/inventory/distribution`)
+    return makeAPIRequest.get(`/otus/${otuId}/inventory/distribution.json`)
+  }
+
+  static getOtuGeoJSONDistribution(otuId) {
+    return makeAPIRequest.get(`/otus/${otuId}/inventory/distribution.geojson`)
   }
 
   static getOtuContent(otuId) {

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

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

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

@@ -0,0 +1,51 @@
+import {
+  isRankGrpup,
+  removeDuplicateShapes,
+  makeGeoJSONFeature
+} from '../../utils'
+import TaxonWorks from '../../services/TaxonWorks'
+
+export const actionLoadDistribution = {
+  async loadDistribution({ otuId, rankString }) {
+    const isSpeciesGroup = isRankGrpup('SpeciesGroup', rankString)
+
+    const getAggregateShape = async (otuId) => {
+      TaxonWorks.getOtuDistribution(otuId)
+        .then(({ data }) => {
+          const geojson = JSON.parse(data.cached_map.geo_json)
+
+          this.distribution.currentShapeTypes = ['Aggregate']
+          this.distribution.geojson = {
+            features: [makeGeoJSONFeature(geojson, 'Aggregate')]
+          }
+        })
+        .catch((e) => {
+          this.distribution.errorMessage = e.response.data.error
+          this.distribution.currentShapeTypes = []
+          this.distribution.geojson = []
+        })
+    }
+
+    if (isSpeciesGroup) {
+      TaxonWorks.getOtuGeoJSONDistribution(otuId)
+        .then(({ data }) => {
+          if (data.request_too_large) {
+            this.distribution.geojson = null
+            this.distribution.errorMessage = data.message
+          } else {
+            const { features, shapeTypes } = removeDuplicateShapes(data)
+
+            this.distribution.currentShapeTypes = shapeTypes
+            this.distribution.geojson = {
+              features
+            }
+          }
+        })
+        .catch((e) => {
+          getAggregateShape(otuId)
+        })
+    } else {
+      getAggregateShape(otuId)
+    }
+  }
+}

src/modules/otus/store/store.js

@@ -1,12 +1,18 @@
 import { defineStore } from 'pinia'
 import TaxonWorks from '../services/TaxonWorks'
+import { actionLoadDistribution } from './actions'
 
 export const useOtuStore = defineStore('otuStore', {
   state: () => {
     return {
       otu: null,
       taxon: null,
-      images: null
+      images: null,
+      distribution: {
+        geojson: null,
+        errorMessage: null,
+        currentShapeTypes: []
+      }
     }
   },
   actions: {
@@ -36,6 +42,8 @@ export const useOtuStore = defineStore('otuStore', {
       }
 
       this.images = (await TaxonWorks.getOtuImages(otuId, params)).data
-    }
-  },
-})
+    },
+
+    ...actionLoadDistribution
+  }
+})

src/modules/otus/utils/index.js

@@ -0,0 +1,3 @@
+export * from './isRankGroup'
+export * from './makeGeoJSONFeature'
+export * from './removeDuplicateShapes'

src/modules/otus/utils/isRankGroup.js

@@ -0,0 +1,5 @@
+export function isRankGrpup(compareRank, rank) {
+  const rankGroup = rank.split('::').at(2)
+
+  return rankGroup === compareRank
+}

src/modules/otus/utils/makeGeoJSONFeature.js

@@ -0,0 +1,13 @@
+export function makeGeoJSONFeature(geometry, type) {
+  return {
+    type: 'Feature',
+    geometry,
+    properties: {
+      base: [
+        {
+          type
+        }
+      ]
+    }
+  }
+}

src/modules/otus/utils/removeDuplicateShapes.js

@@ -0,0 +1,40 @@
+export function removeDuplicateShapes(data) {
+  const features = []
+  const shapeTypes = []
+
+  data.features.forEach((feature) => {
+    const shapeId = feature.properties.shape.id
+    const shapeType = feature.properties.shape.type
+
+    if (!shapeTypes.includes(feature.properties.base.type)) {
+      shapeTypes.push(feature.properties.base.type)
+    }
+
+    const index = features.findIndex(
+      (item) =>
+        item.properties.shape.id === shapeId &&
+        item.properties.shape.type === shapeType
+    )
+
+    if (index > -1) {
+      const currentFeature = features[index]
+
+      currentFeature.properties.base.push(feature.properties.base)
+      currentFeature.properties.target.push(feature.properties.target)
+    } else {
+      const item = structuredClone(feature)
+
+      item.properties.base = [item.properties.base]
+      item.properties.target = [item.properties.target]
+
+      features.push(item)
+    }
+  })
+
+  shapeTypes.sort()
+
+  return {
+    shapeTypes,
+    features
+  }
+}

tailwind.config.cjs

@@ -36,6 +36,7 @@ module.exports = {
 
         map: {
           georeference: withOpacity('--color-map-georeference'),
+          aggregate: withOpacity('--color-map-aggregate'),
           asserted: withOpacity('--color-map-asserted'),
           'type-material': withOpacity('--color-map-type-material'),
           'collection-object': withOpacity('--color-map-collection-object')