feat(map): context menu

Task: https://minerva-appunite.atlassian.net/browse/MIN-112?atlOrigin=eyJpIjoiZjNlYTVkYWMxYzc4NDE1ZDgzYTIyMjk1YTI3ZGJlN2EiLCJwIjoiaiJ9

In useOlMapListener I've added listener for context menu. If user click on map with right button, context menu will appear. in onMapRightClick util, we are searching is there any matching bioEntity. If there is, we save it's id and we are looking for UniProtID.

Test file for ContextMenu.component will be added in next PR.

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

+import { contextMenuSelector } from '@/redux/contextMenu/contextMenu.selector';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+import { searchedBioEntityElementUniProtIdSelector } from '@/redux/bioEntity/bioEntity.selectors';
+import { FIRST_ARRAY_ELEMENT, SECOND_ARRAY_ELEMENT } from '@/constants/common';
+
+export const ContextMenu = (): React.ReactNode => {
+  const { isOpen, coordinates } = useAppSelector(contextMenuSelector);
+  const unitProtId = useAppSelector(searchedBioEntityElementUniProtIdSelector);
+
+  const isUnitProtIdAvailable = (): boolean => unitProtId !== undefined;
+
+  const getUnitProtId = (): string | undefined => {
+    return isUnitProtIdAvailable() ? unitProtId : 'no UnitProt ID available';
+  };
+
+  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`,
+      }}
+    >
+      <div
+        className={twMerge(
+          'cursor-pointer',
+          !isUnitProtIdAvailable() ? 'cursor-not-allowed text-greyscale-700' : '',
+        )}
+      >
+        Open MolArt ({getUnitProtId()})
+      </div>
+    </div>
+  );
+};

[Adrian Orłów]

This component has no test coverage