feat(vector-map): add support for compartment mouse click

src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx

@@ -48,7 +48,7 @@ export const BioEntityDrawer = (): React.ReactNode => {
   ).filter(modificationResidue => modificationResidue.state && modificationResidue.state !== '');
   const isModificationAvailable = modificationResidues.length > ZERO;
 
-  const type = getTypeBySBOTerm(bioEntityData.sboTerm);
+  const type = getTypeBySBOTerm(bioEntityData.sboTerm, bioEntityData.shape);
 
   return (
     <div className="h-calc-drawer" data-testid="bioentity-drawer">

src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts

@@ -27,7 +27,15 @@ export const onMapLeftClick =
 
       let featureAtPixel: FeatureLike | undefined;
       mapInstance.forEachFeatureAtPixel(pixel, (feature, ) => {
-        if(feature.get('id') && [...Object.values(FEATURE_TYPE)].includes(feature.get('type')) && feature.get('zIndex') >= 0) {
+        if(
+          feature.get('id') &&
+          (
+            feature.get('type') === FEATURE_TYPE.COMPARTMENT && feature.get('filled') ||
+            [...Object.values(FEATURE_TYPE)].includes(feature.get('type')) && feature.get('type') !== FEATURE_TYPE.COMPARTMENT
+          )
+          && feature.get('zIndex') >= 0
+          && !feature.get('hidden')
+        ) {
           featureAtPixel = feature;
           return true;
         }
@@ -53,7 +61,7 @@ export const onMapLeftClick =
 
       const type = featureAtPixel.get('type');
       const id = featureAtPixel.get('id');
-      if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH].includes(type)) {
+      if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH, FEATURE_TYPE.COMPARTMENT].includes(type)) {
         await leftClickHandleAlias(dispatch)(featureAtPixel, modelId);
       } else if (type === FEATURE_TYPE.REACTION) {
         clickHandleReaction(dispatch)(modelElements, reactions, id,  modelId);

src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts

@@ -31,11 +31,14 @@ export const onMapRightClick =
             const source = layer.getSource();
             if (source instanceof VectorSource) {
               foundFeature = source.getClosestFeatureToCoordinate(coordinate, (feature) => {
-                return [
-                  FEATURE_TYPE.ALIAS,
-                  FEATURE_TYPE.REACTION,
-                  FEATURE_TYPE.GLYPH
-                ].includes(feature.get('type')) && feature.get('zIndex') >= 0;
+                return (
+                  feature.get('type') === FEATURE_TYPE.COMPARTMENT && feature.get('filled') ||
+                  [
+                    FEATURE_TYPE.ALIAS,
+                    FEATURE_TYPE.REACTION,
+                    FEATURE_TYPE.GLYPH
+                  ].includes(feature.get('type'))
+                ) && feature.get('zIndex') >= 0 && !feature.get('hidden');
               });
             }
           }
@@ -49,7 +52,7 @@ export const onMapRightClick =
 
       const type = foundFeature.get('type');
       const id = foundFeature.get('id');
-      if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH].includes(type)) {
+      if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH, FEATURE_TYPE.COMPARTMENT].includes(type)) {
         const modelElement = modelElements.find(element => element.id === id);
         if(!modelElement) {
           return;

src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts

@@ -340,9 +340,14 @@ export default class Reaction {
   }
 
   protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
+    if (!(feature instanceof Feature)) {
+      return undefined;
+    }
     if (this.isAnyOfElementsHidden()) {
+      feature.set('hidden', true);
       return undefined;
     }
+    feature.set('hidden', false);
 
     const styles: Array<Style> = [];
     const maxZoom = this.mapInstance?.getView().get('originalMaxZoom');

src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleAliasResults.test.ts

@@ -190,7 +190,6 @@ describe('handleAliasResults - util', () => {
         .reply(HttpStatusCode.Ok, bioEntityFixture);
       const { store } = getReduxStoreWithActionsListener();
       const { dispatch } = store;
-
       await handleAliasResults(dispatch, ELEMENT_SEARCH_RESULT_MOCK_ALIAS, {
         ...SEARCH_CONFIG_MOCK,
         isResultDrawerOpen: true,

src/constants/features.ts

@@ -7,6 +7,7 @@ export const FEATURE_TYPE = {
   ALIAS: 'ALIAS',
   REACTION: 'REACTION',
   GLYPH: 'GLYPH',
+  COMPARTMENT: 'COMPARTMENT',
 } as const;
 
 export const PIN_ICON_ANY = [

src/models/bioEntitySchema.ts

@@ -53,6 +53,7 @@ export const bioEntitySchema = z.object({
   charge: z.number().nullable().optional(),
   substanceUnits: z.string().nullable().optional(),
   onlySubstanceUnits: z.boolean().optional().nullable(),
+  shape: z.string().nullable().optional(),
   modificationResidues: z.optional(z.array(modificationResiduesSchema)),
   complex: z.number().nullable().optional(),
   compartment: z.number().nullable().optional(),

src/utils/bioEntity/getTypeBySBOTerm.ts

-export const getTypeBySBOTerm = (sbo: string | undefined): string => {
+export const getTypeBySBOTerm = (sbo: string | undefined, shape?: string | null): string => {
   switch (sbo) {
     case 'SBO:0000334':
       return 'Antisense RNA';
@@ -29,6 +29,16 @@ export const getTypeBySBOTerm = (sbo: string | undefined): string => {
       return 'Simple molecule';
     case 'SBO:0000285':
       return 'Unknown';
+    case 'SBO:0000290':
+      switch (shape) {
+        case 'PATHWAY':
+          return 'Pathway';
+        case 'SQUARE_COMPARTMENT':
+        case 'CIRCLE_COMPARTMENT':
+          return 'Compartment';
+        default:
+          return '---';
+      }
     default:
       return '---';
   }