Merge pull request #262 from SpeciesFileGroup/development

Refactor clusters, add FO to map

src/constants/objectTypes.js

@@ -1,6 +1,7 @@
-export const TYPE_MATERIAL = 'TypeMaterial'
-export const COLLECTION_OBJECT = 'CollectionObject'
+export const AGGREGATE = 'Aggregate'
 export const ASSERTED_DISTRIBUTION = 'AssertedDistribution'
+export const COLLECTION_OBJECT = 'CollectionObject'
+export const FIELD_OCCURRENCE = 'FieldOccurrence'
 export const GEOREFERENCE = 'Georeference'
-export const AGGREGATE = 'Aggregate'
 export const OTU = 'Otu'
+export const TYPE_MATERIAL = 'TypeMaterial'

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

@@ -70,7 +70,7 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { useDistributionStore } from './store/useDistributionStore.js'
-import { makeClusterIconFor } from './clusters/makeClusterIconFor'
+import { makeClusterIconFor } from './clusters'
 import { useGeojsonOptions } from './composables/useGeojsonOptions.js'
 import { LEGEND } from './constants'
 import MapPopup from './components/MapPopup.vue'

src/modules/otus/components/Panel/PanelMap/clusters/Mixed.js

@@ -1,17 +1,49 @@
+import { makeSegmentedCircle } from '../utils/makeSegmentedCircle.js'
+import {
+  COLLECTION_OBJECT,
+  FIELD_OCCURRENCE,
+  TYPE_MATERIAL
+} from '@/constants/objectTypes'
+
 export function Mixed(cluster) {
+  const sliceColor = {
+    [FIELD_OCCURRENCE]: 'fill-map-field-occurrence',
+    [COLLECTION_OBJECT]: 'fill-map-collection-object',
+    [TYPE_MATERIAL]: 'fill-map-type-material'
+  }
+
+  const markers = cluster.getAllChildMarkers()
+  const types = markers.map((l) =>
+    l.feature.properties.base.map((item) => item.type)
+  )
+  const uniqueTypes = [...new Set(types.flat())]
+  const segments = uniqueTypes.map((type) => ({
+    class: sliceColor[type]
+  }))
+
+  const circle = makeSegmentedCircle({
+    attributes: {
+      class: 'absolute opacity-50 w-[40px] h-[40px]'
+    },
+    segments
+  })
+
+  const innerCircle = makeSegmentedCircle({
+    attributes: {
+      class: 'absolute w-[30px] h-[30px] mt-[5px] ml-[5px]'
+    },
+    segments
+  })
+
   return {
-    html: `
-    <div class="relative flex w-[40px] h-[40px]">
-      <div class="rounded-l-full bg-map-collection-object bg-opacity-60">
-        <div class="w-[15px] h-[30px] rounded-l-full bg-map-collection-object ml-[5px] mt-[5px]"></div>
-      </div>
-      <div class="rounded-r-full bg-map-type-material bg-opacity-60">
-        <div class="w-[15px] h-[30px] rounded-r-full bg-map-type-material mr-[5px] mt-[5px]"></div>
-      </div>
-      <span class="absolute text-xs top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white">
+    html: [
+      circle,
+      innerCircle,
+      `<span class="absolute text-xs top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white  z-[200]">
         ${cluster.getChildCount()}
       </span>
-    </div>`,
+      `
+    ].join(''),
     className: 'leaflet-marker-icon leaflet-zoom-animated leaflet-interactive',
     iconSize: [40, 40]
   }

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

@@ -1,3 +1,2 @@
-export * from './CollectionObject'
 export * from './Mixed'
-export * from './TypeMaterial'
+export * from './makeClusterIconFor'

src/modules/otus/components/Panel/PanelMap/clusters/makeClusterIconFor.js

@@ -6,12 +6,5 @@ export function makeClusterIconFor({ L, cluster }) {
     .map((item) => item.feature.properties.base.map((i) => i.type))
     .flat()
 
-  const types = [...new Set(items)]
-  const currentType = types.pop()
-
-  const makeClusterOptions = types.length
-    ? ClusterType.Mixed
-    : ClusterType[currentType] || ClusterType.CollectionObject
-
-  return L.divIcon(makeClusterOptions(cluster))
+  return L.divIcon(ClusterType.Mixed(cluster))
 }

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

@@ -30,19 +30,25 @@
 <script setup>
 import { ref } from 'vue'
 import { makeAPIRequest } from '@/utils'
+import { FIELD_OCCURRENCE, COLLECTION_OBJECT } from '@/constants/objectTypes'
 
 const isLoading = ref(false)
 const isModalVisible = ref(false)
 const dwcData = ref({})
 const title = ref()
 
-function show({ label, id }) {
+const TYPES = {
+  [COLLECTION_OBJECT]: (id) => `/collection_objects/${id}/dwc`,
+  [FIELD_OCCURRENCE]: (id) => `/field_occurrences/${id}/dwc`
+}
+
+function show({ label, id, type }) {
   isModalVisible.value = true
   isLoading.value = true
   dwcData.value = {}
   title.value = label
 
-  makeAPIRequest(`/collection_objects/${id}/dwc`)
+  makeAPIRequest(TYPES[type](id))
     .then(({ data }) => {
       dwcData.value = data
     })

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

@@ -7,7 +7,7 @@
         title="label"
       >
         <span
-          v-if="item.type === COLLECTION_OBJECT"
+          v-if="CLICKEABLE_TYPES.includes(item.type)"
           class="cursor-pointer text-secondary-color"
           v-text="item.label"
           @click="() => emit('selected', item)"
@@ -19,7 +19,9 @@
 </template>
 
 <script setup>
-import { COLLECTION_OBJECT } from '@/constants/objectTypes.js'
+import { COLLECTION_OBJECT, FIELD_OCCURRENCE } from '@/constants/objectTypes.js'
+
+const CLICKEABLE_TYPES = [COLLECTION_OBJECT, FIELD_OCCURRENCE]
 
 defineProps({
   items: {

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

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

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

@@ -0,0 +1,40 @@
+export function makeSegmentedCircle({ segments, attributes = {} }) {
+  const svgNS = 'http://www.w3.org/2000/svg'
+  const svg = document.createElementNS(svgNS, 'svg')
+
+  svg.setAttribute('viewBox', `-1 -1 2 2`)
+  svg.setAttribute('style', 'transform: rotate(-90deg)')
+
+  console.log(segments)
+  console.log(attributes)
+
+  for (let key in attributes) {
+    svg.setAttribute(key, attributes[key])
+  }
+
+  const angleStep = (2 * Math.PI) / segments.length
+
+  segments.forEach((slice, i) => {
+    const startAngle = i * angleStep
+    const endAngle = (i + 1) * angleStep
+
+    const x1 = Math.cos(startAngle)
+    const y1 = Math.sin(startAngle)
+    const x2 = Math.cos(endAngle)
+    const y2 = Math.sin(endAngle)
+
+    const largeArc = angleStep > Math.PI ? 1 : 0
+
+    const path = document.createElementNS(svgNS, 'path')
+    path.setAttribute(
+      'd',
+      `M 0 0 L ${x1} ${y1} A 1 1 0 ${largeArc} 1 ${x2} ${y2} Z`
+    )
+
+    path.setAttribute('class', slice.class)
+
+    svg.appendChild(path)
+  })
+
+  return svg.outerHTML
+}