MIN-134 Update Modules documentation

docs/general/Modules/Modules.md

@@ -11,22 +11,25 @@ The AppWrapper module serves as a central hub for our React application. It enco
 
 - **AppWrapper.component.tsx**: This component serves as a container for aggregating all wrappers required by our React application. It includes essential components such as:
   - MapInstanceProvider: Provides the application-wide instance of the OpenLayers map.
+  - WebSocketEntityUpdatesProvider: Provides the application-wide instance of websockets used to update map elements.
   - Toaster: Responsible for displaying toast notifications using the [Sonner](https://www.npmjs.com/package/sonner) library.
 
 ```typescript jsx
  export const AppWrapper = ({ children }: AppWrapperProps): JSX.Element => (
  <MapInstanceProvider>
    <Provider store={store}>
-     <>
-       <Toaster
-         position="top-center"
-         visibleToasts={1}
-         style={{
-           width: '700px',
-         }}
-       />
-       {children}
-     </>
+     <WebSocketEntityUpdatesProvider>
+       <>
+         <Toaster
+           position="top-center"
+           visibleToasts={1}
+           style={{
+             width: '700px',
+           }}
+         />
+         {children}
+       </>
+     </WebSocketEntityUpdatesProvider>
    </Provider>
  </MapInstanceProvider>
 );
@@ -50,56 +53,125 @@ Module FunctionalArea includes:
 
 [URL](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/FunctionalArea/ContextMenu)  
 ![][image1]  
-The module is located in the [**/ContextMenu**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/FunctionalArea/ContextMenu) folder, with the main file being **ContextMenu.component.tsx**. Right-clicking on the map displays a context menu that now includes an option to display the MolArt modal if a UnitProtId exists. The state regarding whether the context menu should be displayed and data regarding the context menu is saved in the redux store in a state called **contextMenu** which code is located in directory [**redux/contextMenu**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/redux/contextMenu).
+The module is located in the [**/ContextMenu**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/FunctionalArea/ContextMenu) folder, with the main file being **ContextMenu.component.tsx**.
+Right-clicking on the map displays a context menu that now includes an option to display the MolArt modal (if a UnitProtId exists) and addiing a comment.
+The state regarding whether the context menu should be displayed and data regarding the context menu is saved in the redux store in a state called **contextMenu** which code is located in directory [**redux/contextMenu**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/redux/contextMenu).
+
+The context menu dynamically renders additional plugin options using PluginsContextMenu.menuItems. Each entry can have its own styling and an enabled/disabled state. When clicked, plugin menu items trigger a callback function with map coordinates and model data.
+
+The OutsideClickWrapper ensures that clicking outside the context menu closes it automatically.
 
 ```typescript jsx
- export const ContextMenu = (): React.ReactNode => {
- const dispatch = useAppDispatch();
- const { isOpen, coordinates } = useAppSelector(contextMenuSelector); //visibility
- const unitProtId = useAppSelector(searchedBioEntityElementUniProtIdSelector);
+export const ContextMenu = (): React.ReactNode => {
+  const pluginContextMenu = PluginsContextMenu.menuItems;
+  const model = useAppSelector(currentModelSelector);
+  const lastPosition = useAppSelector(mapDataLastPositionSelector);
+  const dispatch = useAppDispatch();
+  const { isOpen, coordinates } = useAppSelector(contextMenuSelector);
+  const unitProtId = useAppSelector(searchedModelElementUniProtIdSelector);
+
+  const isUnitProtIdAvailable = (): boolean => unitProtId !== undefined;
+
+  const getUnitProtId = (): string | undefined => {
+    return isUnitProtIdAvailable() ? unitProtId : 'no UnitProt ID available';
+  };
 
- const isUnitProtIdAvailable = (): boolean => unitProtId !== undefined; // if context menu option should be blocked
+  const closeContextMenuFunction = (): void => {
+    dispatch(closeContextMenu());
+  };
 
- const getUnitProtId = (): string | undefined => {
-   return isUnitProtIdAvailable() ? unitProtId : 'no UnitProt ID available';
- };
+  const handleOpenMolArtClick = (): void => {
+    if (isUnitProtIdAvailable()) {
+      closeContextMenuFunction();
+      dispatch(openMolArtModalById(unitProtId));
+    }
+  };
 
- const handleOpenMolArtClick = (): void => {
-   if (isUnitProtIdAvailable()) {
-     dispatch(closeContextMenu());
-     dispatch(openMolArtModalById(unitProtId));
-   }
- };
+  const handleAddCommentClick = (): void => {
+    closeContextMenuFunction();
+    dispatch(openAddCommentModal());
+  };
 
- 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
-       className={twMerge(
-         'cursor-pointer text-xs font-normal',
-         !isUnitProtIdAvailable() ? 'cursor-not-allowed text-greyscale-700' : '',
-       )}
-       onClick={handleOpenMolArtClick}
-       type="button"
-       data-testid="open-molart"
-     >
-       Open MolArt ({getUnitProtId()})
-     </button>
-   </div>
- );
+  const modelId = model ? model.id : ZERO;
+
+  const handleCallback = (
+    callback: (
+      coordinates: ClickCoordinates,
+      element: ModelElement | NewReaction | undefined,
+    ) => void,
+  ) => {
+    return () => {
+      closeContextMenuFunction();
+      return callback(
+        {
+          modelId,
+          x: coordinates[FIRST_ARRAY_ELEMENT],
+          y: coordinates[SECOND_ARRAY_ELEMENT],
+          zoom: lastPosition.z ? lastPosition.z : DEFAULT_ZOOM,
+        },
+        undefined,
+      );
+    };
+  };
+
+  return (
+    <OutsideClickWrapper onOutsideClick={closeContextMenuFunction}>
+      <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
+          className={twMerge(
+            'w-full cursor-pointer text-left text-xs font-normal',
+            !isUnitProtIdAvailable() ? 'cursor-not-allowed text-greyscale-700' : '',
+          )}
+          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"
+        >
+          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>
+  );
 };
 ```
 
-![][image2]
+![][image19]
 
 ### **Cookie banner**
 
@@ -165,6 +237,7 @@ The module containing all available modals within the application:
 - Overview Images Modal
 - Publications Modal
 - LoggedIn Menu Modal
+- ...
 
 All modals are defined in separate folders within the main [**/Modal**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/FunctionalArea/Modal) directory and utilized in the **Modal.component.tsx** file. The currently displayed modal is determined by the value in the Redux store's state named **modal** available in [redux/modal](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/redux/modal) folder, state includes properties such as **isOpen**, **modalName**, **modalTitle** and other properties for the state of specific modals
 
@@ -190,7 +263,7 @@ All modals are defined in separate folders within the main [**/Modal**](https://
 ### **NavBar**
 
 [URL](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/FunctionalArea/NavBar)  
-![][image8]
+![][image20]
 
 The module located in the [**/NavBar**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/FunctionalArea/NavBar) folder, with the main file being **NavBar.component.tsx**, contains navigation allowing for the opening of specific drawers and docs. It also displays information about the project version and the logos.
 
@@ -217,7 +290,9 @@ The Map module contains components and functionalities specifically related to t
 - Drawer
 - Legend
 - Map Additional Actions
-- Map Additional Options
+- Map Additional Logos
+- Map Background Switch
+- Map Loader
 - Map Viewer
 - Plugins Drawer
 
@@ -231,7 +306,10 @@ The module containing all available drawers within the application:
 
 - Available Plugins Drawer
 - Bio Entity Drawer
+- Comment Drawer
 - Export Drawer
+- Layers Drawer
+- Overlays Group Drawer
 - Overlays Drawer
 - Project Info Drawer
 - Reaction Drawer
@@ -302,16 +380,25 @@ The module is located in the [**/MapAdditionalActions**](https://gitlab.lcsb.uni
 - ZoomIn Button \- responsible for zooming in the map. This updates the map zoom in the redux store in a state called map \- located in [redux/map](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/redux/map)
 - ZoomOut Button \- responsible for zooming out the map. This updates the map zoom in the redux store in a state called map \- located in [redux/map](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/redux/map)
 
-### **Map Additional Options**
+### **Map Additional Logos**
 
-[URL](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapAdditionalOptions)  
-![][image14]
+[URL](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapAdditionalLogos)  
+![][image21]
+
+The module is located in the [**/MapAdditionalLogos**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapAdditionalLogos) folder, with the main file being **MapAdditionalLogos.component.tsx,** contains:
 
-The module is located in the [**/MapAdditionalOptions**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapAdditionalOptions) folder, with the main file being **MapAdditionalOptions.component.tsx,** contains:
+- Left Logo Button \- displays an additional logo in the bottom left corner of the map interface. The button links to an external URL if provided and shows an image along with optional text. The data is retrieved from the Redux store in the configuration state, located in redux/configuration.
+- Right Logo Button \- displays button next to the Left Logo Button in the bottom left corner of the interface. Like the left logo, this button links to an external URL if available and displays an image with optional text. The data is also managed in the Redux store under configuration, located in redux/configuration.
+
+### **Map Background Switch**
+
+[URL](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapAdditionalOptions)  
+![][image22]
 
-- BackgroundsSelector \- allows you to change the map background. Data about available backgrounds is taken from the redux store from the backgrounds state available in [redux/backgrounds](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/redux/backgrounds). When we select a new background, the data is updated in the redux store in the state of maps available in the [redux/map](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/redux/map) folder
+The module is located in the [**/MapBackgroundSwitch**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapBackgroundSwitch) folder, with the main file being **MapBackgroundSwitch.component.tsx,** contains:
 
-![][image15]
+- Background Selection Buttons \- allows users to switch between all available predefined map backgrounds. The available backgrounds are stored in MAP_BACKGROUND_TYPES.
+- State Management \- The currently selected background is retrieved from the Redux store in the map state, located in redux/map.
 
 ### **Map Viewer**
 
@@ -439,3 +526,7 @@ The SPA (Single Page Application) module represents the core definition of our S
 [image16]: Modules16.png
 [image17]: Modules17.png
 [image18]: Modules18.png
+[image19]: Modules19.png
+[image20]: Modules20.png
+[image21]: Modules21.png
+[image22]: Modules22.png

src/components/AppWrapper/AppWrapper.component.tsx

@@ -3,7 +3,6 @@ import { MapInstanceProvider } from '@/utils/context/mapInstanceContext';
 import { ReactNode } from 'react';
 import { Provider } from 'react-redux';
 import { Toaster } from 'sonner';
-import { Modal } from '@/components/FunctionalArea/Modal';
 import { WebSocketEntityUpdatesProvider } from '@/utils/websocket-entity-updates/webSocketEntityUpdatesProvider';
 
 interface AppWrapperProps {
@@ -16,7 +15,6 @@ export const AppWrapper = ({ children }: AppWrapperProps): JSX.Element => {
       <Provider store={store}>
         <WebSocketEntityUpdatesProvider>
           <>
-            <Modal />
             <Toaster
               position="top-center"
               visibleToasts={1}

src/components/SPA/MinervaSPA.component.tsx

@@ -5,6 +5,7 @@ import { useReduxBusQueryManager } from '@/utils/query-manager/useReduxBusQueryM
 import { twMerge } from 'tailwind-merge';
 import { useEffect } from 'react';
 import { PluginsManager } from '@/services/pluginsManager';
+import { Modal } from '@/components/FunctionalArea/Modal';
 import { useInitializeStore } from '../../utils/initialize/useInitializeStore';
 import { ContextMenu } from '../FunctionalArea/ContextMenu';
 import { CookieBanner } from '../FunctionalArea/CookieBanner';
@@ -23,6 +24,7 @@ export const MinervaSPA = (): JSX.Element => {
     <div className={twMerge('relative', manrope.variable)}>
       <FunctionalArea />
       <Map />
+      <Modal />
       <ContextMenu />
       <CookieBanner />
     </div>