feat(vector-map): treating complexes in the same way as compartments

Closes MIN-119

src/components/FunctionalArea/ContextMenu/ContextMenu.component.tsx

@@ -14,6 +14,7 @@ import { ClickCoordinates } from '@/services/pluginsManager/pluginContextMenu/pl
 import { currentModelSelector } from '@/redux/models/models.selectors';
 import { mapDataLastPositionSelector } from '@/redux/map/map.selectors';
 import { DEFAULT_ZOOM } from '@/constants/map';
+import { OutsideClickWrapper } from '@/shared/OutsideClickWrapper';
 
 export const ContextMenu = (): React.ReactNode => {
   const pluginContextMenu = PluginsContextMenu.menuItems;
@@ -29,15 +30,19 @@ export const ContextMenu = (): React.ReactNode => {
     return isUnitProtIdAvailable() ? unitProtId : 'no UnitProt ID available';
   };
 
+  const closeContextMenuFunction = (): void => {
+    dispatch(closeContextMenu());
+  };
+
   const handleOpenMolArtClick = (): void => {
     if (isUnitProtIdAvailable()) {
-      dispatch(closeContextMenu());
+      closeContextMenuFunction();
       dispatch(openMolArtModalById(unitProtId));
     }
   };
 
   const handleAddCommentClick = (): void => {
-    dispatch(closeContextMenu());
+    closeContextMenuFunction();
     dispatch(openAddCommentModal());
   };
 
@@ -47,7 +52,7 @@ export const ContextMenu = (): React.ReactNode => {
     callback: (coordinates: ClickCoordinates, element: BioEntity | NewReaction | undefined) => void,
   ) => {
     return () => {
-      dispatch(closeContextMenu());
+      closeContextMenuFunction();
       return callback(
         {
           modelId,
@@ -61,55 +66,57 @@ export const ContextMenu = (): React.ReactNode => {
   };
 
   return (
-    <div
-      className={twMerge(
-        'absolute z-10 rounded-lg border border-[#DBD9D9] bg-white p-4',
-        isOpen ? '' : 'hidden',
-      )}
-      style={{
-        left: `${coordinates[FIRST_ARRAY_ELEMENT]}px`,
-        top: `${coordinates[SECOND_ARRAY_ELEMENT]}px`,
-      }}
-      data-testid="context-modal"
-    >
-      <button
+    <OutsideClickWrapper onOutsideClick={closeContextMenuFunction}>
+      <div
         className={twMerge(
-          'w-full cursor-pointer text-left text-xs font-normal',
-          !isUnitProtIdAvailable() ? 'cursor-not-allowed text-greyscale-700' : '',
+          'absolute z-10 rounded-lg border border-[#DBD9D9] bg-white p-4',
+          isOpen ? '' : 'hidden',
         )}
-        onClick={handleOpenMolArtClick}
-        type="button"
-        data-testid="open-molart"
-      >
-        Open MolArt ({getUnitProtId()})
-      </button>
-      <hr />
-      <button
-        className={twMerge('w-full cursor-pointer text-left text-xs font-normal')}
-        onClick={handleAddCommentClick}
-        type="button"
-        data-testid="add-comment"
+        style={{
+          left: `${coordinates[FIRST_ARRAY_ELEMENT]}px`,
+          top: `${coordinates[SECOND_ARRAY_ELEMENT]}px`,
+        }}
+        data-testid="context-modal"
       >
-        Add comment
-      </button>
-      {pluginContextMenu.length && <hr />}
-
-      {pluginContextMenu.map(contextMenuEntry => (
         <button
-          key={contextMenuEntry.id}
-          id={contextMenuEntry.id}
           className={twMerge(
-            'cursor-pointer text-xs font-normal',
-            contextMenuEntry.style,
-            !contextMenuEntry.enabled ? 'cursor-not-allowed text-greyscale-700' : '',
+            'w-full cursor-pointer text-left text-xs font-normal',
+            !isUnitProtIdAvailable() ? 'cursor-not-allowed text-greyscale-700' : '',
           )}
-          onClick={handleCallback(contextMenuEntry.callback)}
+          onClick={handleOpenMolArtClick}
           type="button"
-          data-testid={contextMenuEntry.id}
+          data-testid="open-molart"
         >
-          {contextMenuEntry.name}
+          Open MolArt ({getUnitProtId()})
         </button>
-      ))}
-    </div>
+        <hr />
+        <button
+          className={twMerge('w-full cursor-pointer text-left text-xs font-normal')}
+          onClick={handleAddCommentClick}
+          type="button"
+          data-testid="add-comment"
+        >
+          Add comment
+        </button>
+        {pluginContextMenu.length && <hr />}
+
+        {pluginContextMenu.map(contextMenuEntry => (
+          <button
+            key={contextMenuEntry.id}
+            id={contextMenuEntry.id}
+            className={twMerge(
+              'cursor-pointer text-xs font-normal',
+              contextMenuEntry.style,
+              !contextMenuEntry.enabled ? 'cursor-not-allowed text-greyscale-700' : '',
+            )}
+            onClick={handleCallback(contextMenuEntry.callback)}
+            type="button"
+            data-testid={contextMenuEntry.id}
+          >
+            {contextMenuEntry.name}
+          </button>
+        ))}
+      </div>
+    </OutsideClickWrapper>
   );
 };