Merge pull request #237 from SpeciesFileGroup/development

Development

src/modules/otus/components/Panel/PanelKeys/PanelKeys.vue

@@ -39,7 +39,7 @@ import { onMounted, onBeforeUnmount, ref, computed } from 'vue'
 
 const props = defineProps({
   otuId: {
-    type: Object
+    type: Number
   }
 })
 

src/modules/otus/components/Panel/PanelMap/PanelMap.vue

@@ -69,9 +69,10 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { useDistributionStore } from '@/modules/otus/store/useDistributionStore.js'
+import { useDistributionStore } from './store/useDistributionStore.js'
 import { makeClusterIconFor } from './clusters/makeClusterIconFor'
 import { useGeojsonOptions } from './composables/useGeojsonOptions.js'
+import { LEGEND } from './constants'
 import MapPopup from './components/MapPopup.vue'
 import CachedMap from './components/CachedMap.vue'
 import OtuSearch from './components/Search/OtuSearch.vue'
@@ -107,29 +108,6 @@ const store = useDistributionStore()
 const popupElement = ref(null)
 const { popupItem, geojsonOptions } = useGeojsonOptions({ popupElement })
 
-const LEGEND = {
-  AssertedDistribution: {
-    label: 'Asserted distribution',
-    background: 'bg-map-asserted'
-  },
-  Georeference: {
-    label: 'Georeference',
-    background: 'bg-map-georeference'
-  },
-  TypeMaterial: {
-    label: 'Type material',
-    background: 'bg-map-type-material'
-  },
-  CollectionObject: {
-    label: 'Collection object',
-    background: 'bg-map-collection-object'
-  },
-  Aggregate: {
-    label: 'Aggregate (Asserted distribution & Georeference)',
-    background: 'bg-map-aggregate'
-  }
-}
-
 onMounted(() => {
   isLoading.value = true
 

src/modules/otus/components/Panel/PanelMap/constants/index.js

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

src/modules/otus/components/Panel/PanelMap/constants/legend.js

@@ -0,0 +1,22 @@
+export const LEGEND = {
+  Aggregate: {
+    label: 'Aggregate (Asserted distribution & Georeference)',
+    background: 'bg-map-aggregate'
+  },
+  AssertedDistribution: {
+    label: 'Asserted distribution',
+    background: 'bg-map-asserted'
+  },
+  Georeference: {
+    label: 'Georeference',
+    background: 'bg-map-georeference'
+  },
+  CollectionObject: {
+    label: 'Collection object',
+    background: 'bg-map-collection-object'
+  },
+  TypeMaterial: {
+    label: 'Type material',
+    background: 'bg-map-type-material'
+  }
+}

src/modules/otus/store/useDistributionStore.js → src/modules/otus/components/Panel/PanelMap/store/useDistributionStore.js

@@ -1,12 +1,31 @@
-import TaxonWorks from '../services/TaxonWorks'
+import TaxonWorks from '../../../../services/TaxonWorks'
 import { defineStore } from 'pinia'
-import { useOtuPageRequest } from '../helpers/useOtuPageRequest'
-import { RESPONSE_ERROR } from '../constants'
+import { useOtuPageRequest } from '../../../../helpers/useOtuPageRequest'
+import { RESPONSE_ERROR } from '../../../../constants'
 import {
-  isRankGrpup,
+  isRankGroup,
   removeDuplicateShapes,
   makeGeoJSONFeature
 } from '../utils'
+import { LEGEND } from '../constants'
+
+function sortFeaturesByType(arr, reference) {
+  const referenceMap = new Map()
+
+  reference.forEach((item, index) => {
+    referenceMap.set(item, index)
+  })
+
+  return arr.toSorted((a, b) => {
+    const indexA = referenceMap.has(a.properties.base.type)
+      ? referenceMap.get(a.properties.base.type)
+      : Infinity
+    const indexB = referenceMap.has(b.properties.base.type)
+      ? referenceMap.get(b.properties.base.type)
+      : Infinity
+    return indexA - indexB
+  })
+}
 
 export const useDistributionStore = defineStore('distributionStore', {
   state: () => {
@@ -60,7 +79,7 @@ export const useDistributionStore = defineStore('distributionStore', {
 
     async loadDistribution({ otuId, rankString }) {
       const isSpeciesGroup =
-        rankString && isRankGrpup('SpeciesGroup', rankString)
+        rankString && isRankGroup('SpeciesGroup', rankString)
 
       this.controller = new AbortController()
 
@@ -75,7 +94,9 @@ export const useDistributionStore = defineStore('distributionStore', {
               this.distribution.geojson = null
               this.distribution.errorMessage = data.message
             } else {
-              const { features, shapeTypes } = removeDuplicateShapes(data)
+              const { features, shapeTypes } = removeDuplicateShapes(
+                sortFeaturesByType(data.features, Object.keys(LEGEND))
+              )
 
               this.distribution.currentShapeTypes = shapeTypes
               this.distribution.geojson = {

src/modules/otus/components/Panel/PanelMap/utils/index.js

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

src/modules/otus/utils/isRankGroup.js → src/modules/otus/components/Panel/PanelMap/utils/isRankGroup.js

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

src/modules/otus/utils/removeDuplicateShapes.js → src/modules/otus/components/Panel/PanelMap/utils/removeDuplicateShapes.js

@@ -2,7 +2,7 @@ export function removeDuplicateShapes(data) {
   const features = []
   const shapeTypes = []
 
-  data.features.forEach((feature) => {
+  data.forEach((feature) => {
     const shapeId = feature.properties.shape.id
     const shapeType = feature.properties.shape.type
 

src/modules/otus/utils/index.js

@@ -1,4 +1 @@
 export * from './isAvailableForRank'
-export * from './isRankGroup'
-export * from './makeGeoJSONFeature'
-export * from './removeDuplicateShapes'