diff --git a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx
index 44344acaf633d4fa064c47239bf3c0f69978e707..af9a9f13a513f1469e1c13392f41fd36e312ca42 100644
--- a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx
+++ b/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">
diff --git a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts
index be79fe07dfc43ed838dfff4ce47ff2003f411e44..d426caaa9a22ef47fbee37ca21295d91b8324e38 100644
--- a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts
+++ b/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);
diff --git a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts
index 38a214a58252060d254fa77845db4cc670771ed7..5a6429c6031da2a234471d5f42c58d43c201a8d7 100644
--- a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts
+++ b/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;
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts
index 0dd2370db107794ff8ea7be3852fa3e6b43a4518..433108642e9a9a08fa5044005c8b4cbb20c07f30 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts
+++ b/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');
diff --git a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleAliasResults.test.ts b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleAliasResults.test.ts
index b867378fc4c08464afe2900276e5a9280dbc4727..20ef29c9d031a371768917acdee7cab267f70492 100644
--- a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleAliasResults.test.ts
+++ b/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,
diff --git a/src/constants/features.ts b/src/constants/features.ts
index 7faacd6d9d218caa63921eb66fb1e306ca611d9a..5266a7137c184bbb7ddb73d04c012e27f47680b2 100644
--- a/src/constants/features.ts
+++ b/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 = [
diff --git a/src/models/bioEntitySchema.ts b/src/models/bioEntitySchema.ts
index 650832a9d92d649acbd79f1df377a4d2f6ea7c2a..db8670b825faf381253bb85568f331a512a9650d 100644
--- a/src/models/bioEntitySchema.ts
+++ b/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(),
diff --git a/src/utils/bioEntity/getTypeBySBOTerm.ts b/src/utils/bioEntity/getTypeBySBOTerm.ts
index 55cc4e42f89ef78ebd94f5fd91302a410a692fd8..94bc92e46d31dda6048d4efaf7485a2c73ac6025 100644
--- a/src/utils/bioEntity/getTypeBySBOTerm.ts
+++ b/src/utils/bioEntity/getTypeBySBOTerm.ts
@@ -1,4 +1,4 @@
-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 '---';
}