From 4ddd5b91ad8c7f7e1e66e5121312aa14517d46c3 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Wed, 19 Mar 2025 15:40:07 -0300
Subject: [PATCH] Refactor clusters, add FO to map

---
 src/constants/objectTypes.js                  |  7 +--
 .../components/Panel/PanelMap/PanelMap.vue    |  2 +-
 .../PanelMap/clusters/CollectionObject.js     |  8 ---
 .../Panel/PanelMap/clusters/Mixed.js          | 52 +++++++++++++++----
 .../Panel/PanelMap/clusters/TypeMaterial.js   |  8 ---
 .../Panel/PanelMap/clusters/index.js          |  3 +-
 .../PanelMap/clusters/makeClusterIconFor.js   |  9 +---
 .../Panel/PanelMap/components/DwcTable.vue    | 10 +++-
 .../Panel/PanelMap/components/MapPopup.vue    |  6 ++-
 .../components/Panel/PanelMap/utils/index.js  |  1 +
 .../PanelMap/utils/makeSegmentedCircle.js     | 40 ++++++++++++++
 11 files changed, 102 insertions(+), 44 deletions(-)
 delete mode 100644 src/modules/otus/components/Panel/PanelMap/clusters/CollectionObject.js
 delete mode 100644 src/modules/otus/components/Panel/PanelMap/clusters/TypeMaterial.js
 create mode 100644 src/modules/otus/components/Panel/PanelMap/utils/makeSegmentedCircle.js

diff --git a/src/constants/objectTypes.js b/src/constants/objectTypes.js
index 3222d71..c767200 100644
--- a/src/constants/objectTypes.js
+++ b/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'
diff --git a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
index a6786aa..80a5d5c 100644
--- a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
+++ b/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'
diff --git a/src/modules/otus/components/Panel/PanelMap/clusters/CollectionObject.js b/src/modules/otus/components/Panel/PanelMap/clusters/CollectionObject.js
deleted file mode 100644
index cadb99f..0000000
--- a/src/modules/otus/components/Panel/PanelMap/clusters/CollectionObject.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export function CollectionObject(cluster) {
-  return {
-    html: `<div class="bg-map-collection-object"><span>${cluster.getChildCount()}</span></div>`,
-    className:
-      'leaflet-marker-icon leaflet-zoom-animated leaflet-interactive bg-map-collection-object bg-opacity-60 marker-cluster text-white',
-    iconSize: [40, 40]
-  }
-}
diff --git a/src/modules/otus/components/Panel/PanelMap/clusters/Mixed.js b/src/modules/otus/components/Panel/PanelMap/clusters/Mixed.js
index 595b5d3..4a6ceaf 100644
--- a/src/modules/otus/components/Panel/PanelMap/clusters/Mixed.js
+++ b/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]
   }
diff --git a/src/modules/otus/components/Panel/PanelMap/clusters/TypeMaterial.js b/src/modules/otus/components/Panel/PanelMap/clusters/TypeMaterial.js
deleted file mode 100644
index 34a8a3a..0000000
--- a/src/modules/otus/components/Panel/PanelMap/clusters/TypeMaterial.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export function TypeMaterial(cluster) {
-  return {
-    html: `<div class="bg-map-type-material"><span>${cluster.getChildCount()}</span></div>`,
-    className:
-      'leaflet-marker-icon leaflet-zoom-animated leaflet-interactive marker-cluster bg-map-type-material bg-opacity-60 text-white',
-    iconSize: [40, 40]
-  }
-}
diff --git a/src/modules/otus/components/Panel/PanelMap/clusters/index.js b/src/modules/otus/components/Panel/PanelMap/clusters/index.js
index 46b828f..3df2f3d 100644
--- a/src/modules/otus/components/Panel/PanelMap/clusters/index.js
+++ b/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'
diff --git a/src/modules/otus/components/Panel/PanelMap/clusters/makeClusterIconFor.js b/src/modules/otus/components/Panel/PanelMap/clusters/makeClusterIconFor.js
index 59c95b8..4a5a7a9 100644
--- a/src/modules/otus/components/Panel/PanelMap/clusters/makeClusterIconFor.js
+++ b/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))
 }
diff --git a/src/modules/otus/components/Panel/PanelMap/components/DwcTable.vue b/src/modules/otus/components/Panel/PanelMap/components/DwcTable.vue
index 9bbc939..d4b5b37 100644
--- a/src/modules/otus/components/Panel/PanelMap/components/DwcTable.vue
+++ b/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
     })
diff --git a/src/modules/otus/components/Panel/PanelMap/components/MapPopup.vue b/src/modules/otus/components/Panel/PanelMap/components/MapPopup.vue
index 398ebf2..beb78bd 100644
--- a/src/modules/otus/components/Panel/PanelMap/components/MapPopup.vue
+++ b/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: {
diff --git a/src/modules/otus/components/Panel/PanelMap/utils/index.js b/src/modules/otus/components/Panel/PanelMap/utils/index.js
index 1094c15..2172443 100644
--- a/src/modules/otus/components/Panel/PanelMap/utils/index.js
+++ b/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'
diff --git a/src/modules/otus/components/Panel/PanelMap/utils/makeSegmentedCircle.js b/src/modules/otus/components/Panel/PanelMap/utils/makeSegmentedCircle.js
new file mode 100644
index 0000000..f284caf
--- /dev/null
+++ b/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
+}