feat: add partial bio entities events

docs/plugins/events.md

@@ -201,6 +201,34 @@ To listen for specific events, plugins can use the `addListener` method in `even
 }
 ```
 
+- onPinIconClick - triggered when someone clicks on a pin icon; the element to which the pin is attached is passed as an argument. Example argument:
+
+```javascript
+{
+  "id": 40072,
+}
+```
+
+```javascript
+{
+  "id": "b0a478ad-7e7a-47f5-8130-e96cbeaa0cfe", // marker pin
+}
+```
+
+- onSurfaceOverlayClick - triggered when someone clicks on a overlay surface; the element to which the pin is attached is passed as an argument. Example argument:
+
+```javascript
+{
+  "id": 18,
+}
+```
+
+```javascript
+{
+  "id": "a3a5305f-acfa-47ff-bf77-a26d017c6eb3", // surface marker overlay
+}
+```
+
 - onSubmapOpen - triggered when submap opens; the submap identifier is passed as an argument. Example argument:
 
 ```

src/components/Map/MapViewer/utils/config/overlaysLayer/createFeatureFromExtent.ts

-import Polygon, { fromExtent } from 'ol/geom/Polygon';
 import Feature from 'ol/Feature';
+import Polygon, { fromExtent } from 'ol/geom/Polygon';
 
 export const createFeatureFromExtent = ([xMin, yMin, xMax, yMax]: number[]): Feature<Polygon> =>
-  new Feature({ geometry: fromExtent([xMin, yMin, xMax, yMax]) });
+  new Feature({ geometry: fromExtent([xMin, yMin, xMax, yMax]), type: 'surface' });

src/components/Map/MapViewer/utils/config/pinsLayer/getPinFeature.ts

@@ -15,8 +15,11 @@ export const getPinFeature = (
     y: y + (height || ZERO) / HALF,
   };
 
-  return new Feature({
+  const feature = new Feature({
     geometry: new Point(pointToProjection(point)),
-    name: id,
+    id,
+    type: 'pin',
   });
+
+  return feature;
 };

src/components/Map/MapViewer/utils/config/useOlMapLayers.ts

@@ -22,7 +22,7 @@ export const useOlMapLayers = ({ mapInstance }: UseOlMapLayersInput): MapConfig[
       return;
     }
 
-    mapInstance.setLayers([tileLayer, reactionsLayer, pinsLayer, overlaysLayer]);
+    mapInstance.setLayers([tileLayer, reactionsLayer, overlaysLayer, pinsLayer]);
   }, [reactionsLayer, tileLayer, pinsLayer, mapInstance, overlaysLayer]);
 
   return [tileLayer, pinsLayer, reactionsLayer, overlaysLayer];

src/components/Map/MapViewer/utils/listeners/mapFeatureClick/useMapFeatureClick.ts

+import { FeatureLike } from 'ol/Feature';
+
+interface UseMapFeatureClickResult {
+  handleFeatureClick(feature: FeatureLike): void;
+}
+
+export const useMapFeatureClick = (): UseMapFeatureClickResult => {
+  const handleFeatureClick = (feature: FeatureLike): void => {
+    console.log(feature.get('type'));
+  };
+
+  return {
+    handleFeatureClick,
+  };
+};

src/components/Map/MapViewer/utils/listeners/mapSingleClick/onMapSingleClick.ts

 import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
 import { MapSize } from '@/redux/map/map.types';
 import { AppDispatch } from '@/redux/store';
+import { MapInstance } from '@/types/map';
 import { MapBrowserEvent } from 'ol';
 import { getSearchResults } from './getSearchResults';
 import { handleDataReset } from './handleDataReset';
@@ -9,7 +10,7 @@ import { handleSearchResultAction } from './handleSearchResultAction';
 /* prettier-ignore */
 export const onMapSingleClick =
   (mapSize: MapSize, modelId: number, dispatch: AppDispatch) =>
-    async ({ coordinate }: MapBrowserEvent<UIEvent>): Promise<void> => {
+    async ({ coordinate }: Pick<MapBrowserEvent<UIEvent>, 'coordinate'>, mapInstance: MapInstance): Promise<void> => {
       // side-effect below is to prevent complications with data update - old data may conflict with new data
       // so we need to reset all the data before updating
       dispatch(handleDataReset);

src/components/Map/MapViewer/utils/listeners/useOlMapListeners.ts

@@ -10,6 +10,7 @@ import { Pixel } from 'ol/pixel';
 import { useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { useDebouncedCallback } from 'use-debounce';
+import { useMapFeatureClick } from './mapFeatureClick/useMapFeatureClick';
 import { onMapRightClick } from './mapRightClick/onMapRightClick';
 import { onMapSingleClick } from './mapSingleClick/onMapSingleClick';
 import { onMapPositionChange } from './onMapPositionChange';
@@ -23,6 +24,7 @@ export const useOlMapListeners = ({ view, mapInstance }: UseOlMapListenersInput)
   const mapSize = useSelector(mapDataSizeSelector);
   const modelId = useSelector(currentModelIdSelector);
   const mapLastZoomValue = useSelector(mapDataLastZoomValue);
+  const { handleFeatureClick } = useMapFeatureClick();
   const coordinate = useRef<Coordinate>([]);
   const pixel = useRef<Pixel>([]);
   const dispatch = useAppDispatch();
@@ -58,7 +60,22 @@ export const useOlMapListeners = ({ view, mapInstance }: UseOlMapListenersInput)
       return;
     }
 
-    const key = mapInstance.on('singleclick', handleMapSingleClick);
+    const key = mapInstance.on('click', e => {
+      mapInstance.forEachFeatureAtPixel(e.pixel, handleFeatureClick);
+    });
+
+    // eslint-disable-next-line consistent-return
+    return () => unByKey(key);
+  }, [mapInstance, handleFeatureClick]);
+
+  useEffect(() => {
+    if (!mapInstance) {
+      return;
+    }
+
+    const key = mapInstance.on('singleclick', ({ coordinate: ciird }) =>
+      handleMapSingleClick({ coordinate }, mapInstance),
+    );
 
     // eslint-disable-next-line consistent-return
     return () => unByKey(key);

src/services/pluginsManager/pluginsEventBus/pluginsEventBus.constants.ts

@@ -14,6 +14,8 @@ const PLUGINS_EVENTS = {
     onZoomChanged: 'onZoomChanged',
     onCenterChanged: 'onCenterChanged',
     onBioEntityClick: 'onBioEntityClick',
+    onPinIconClick: 'onPinIconClick',
+    onSurfaceOverlayClick: 'onSurfaceOverlayClick',
   },
   search: {
     onSearch: 'onSearch',

src/services/pluginsManager/pluginsEventBus/pluginsEventBus.ts

@@ -4,6 +4,8 @@ import { ALLOWED_PLUGINS_EVENTS, LISTENER_NOT_FOUND } from './pluginsEventBus.co
 import type {
   CenteredCoordinates,
   ClickedBioEntity,
+  ClickedPinIcon,
+  ClickedSurfaceOverlay,
   Events,
   EventsData,
   PluginsEventBusType,
@@ -21,6 +23,8 @@ export function dispatchEvent(type: 'onSubmapClose', submapId: number): void;
 export function dispatchEvent(type: 'onZoomChanged', data: ZoomChanged): void;
 export function dispatchEvent(type: 'onCenterChanged', data: CenteredCoordinates): void;
 export function dispatchEvent(type: 'onBioEntityClick', data: ClickedBioEntity): void;
+export function dispatchEvent(type: 'onPinIconClick', data: ClickedPinIcon): void;
+export function dispatchEvent(type: 'onSurfaceOverlayClick', data: ClickedSurfaceOverlay): void;
 export function dispatchEvent(type: 'onSearch', data: SearchData): void;
 export function dispatchEvent(type: Events, data: EventsData): void {
   if (!ALLOWED_PLUGINS_EVENTS.includes(type)) throw new Error(`Invalid event type: ${type}`);

src/services/pluginsManager/pluginsEventBus/pluginsEventBus.types.ts

@@ -6,13 +6,15 @@ export type OverlayEvents =
   | 'onAddDataOverlay'
   | 'onRemoveDataOverlay'
   | 'onShowOverlay'
-  | 'onHideOverlay';
+  | 'onHideOverlay'
+  | 'onSurfaceOverlayClick';
 export type SubmapEvents =
   | 'onSubmapOpen'
   | 'onSubmapClose'
   | 'onZoomChanged'
   | 'onCenterChanged'
-  | 'onBioEntityClick';
+  | 'onBioEntityClick'
+  | 'onPinIconClick';
 export type SearchEvents = 'onSearch';
 
 export type Events = OverlayEvents | BackgroundEvents | SubmapEvents | SearchEvents;
@@ -34,6 +36,14 @@ export type ClickedBioEntity = {
   modelId: number;
 };
 
+export type ClickedPinIcon = {
+  id: number | string;
+};
+
+export type ClickedSurfaceOverlay = {
+  id: number | string;
+};
+
 export type SearchDataBioEntity = {
   type: 'bioEntity';
   searchValues: string[];
@@ -61,6 +71,8 @@ export type EventsData =
   | ZoomChanged
   | CenteredCoordinates
   | ClickedBioEntity
+  | ClickedPinIcon
+  | ClickedSurfaceOverlay
   | SearchData;
 
 export type PluginsEventBusType = {