@@ -11,37 +11,49 @@ Classes are used to generate features on the map, based on the data provided by
The files used for rendering are organized into subdirectories:
-[**coords**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapViewer/utils/mapElementsRendering/coords) - stores files used to calculate single coordinates on a map, curves, or coordinates for entire polygons.
-[**coords**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapViewer/utils/mapElementsRendering/coords) - stores files used to calculate single coordinates on a map, curves, or coordinates for entire polygons,
-[**elements**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapViewer/utils/mapElementsRendering/elements) - stores the class files used to create a map element on static layers along with the management of its styles.
It also contains files with functions responsible for the correct management of the element.
-[**layer**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapViewer/utils/mapElementsRendering/layer) - contains files for creating and managing elements on dynamic layers of the map.
-[**overlay**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapViewer/utils/mapElementsRendering/overlay) - contains files for managing overlays on the map.
-[**reaction**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapViewer/utils/mapElementsRendering/reaction) - stores files used to create reactions features and manage their styles.
-[**style**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapViewer/utils/mapElementsRendering/style) - contains files for creating and managing styles for map elements.
It also contains files with functions responsible for the correct management of the element,
-[**layer**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapViewer/utils/mapElementsRendering/layer) - contains files for creating and managing elements on dynamic layers of the map,
-[**overlay**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapViewer/utils/mapElementsRendering/overlay) - contains files for managing overlays on the map,
-[**reaction**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapViewer/utils/mapElementsRendering/reaction) - stores files used to create reactions features and manage their styles,
-[**style**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapViewer/utils/mapElementsRendering/style) - contains files for creating and managing styles for map elements,
-[**text**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/components/Map/MapViewer/utils/mapElementsRendering/text) - stores files used to find appropriate text coordinates and manage its style.
### **Shape definitions from backend**
The **shapes, line types, and arrow types** used for rendering elements are retrieved from the **backend API** and stored in **Redux store ([shapes](https://gitlab.lcsb.uni.lu/minerva/frontend/-/tree/development/src/redux/shapes/))**.
These definitions determine how **elements, reactions, and overlays** should be drawn and styled.
For example:
-**Shapes** define the appearance of **proteins, genes, and compartments**.
-**Line types** specify how **connections between elements** are displayed.
-**Arrow types** control the **start and end markers** for reactions and interactions.
This ensures that **all visual elements** on the map are rendered consistently based.
## **Model elements processing**
The file useOlMapProcessLayer.ts is responsible for processing and rendering elements on the map.
It retrieves data from Redux Store, processes it, and adds it as vector layers in OpenLayers to ensure accurate visualization.
It retrieves data from Redux store, processes it, and adds it as vector layers in OpenLayers to ensure accurate visualization.
Key responsibilities:
- fetching and synchronizing data
- processing and grouping map elements
- creating and updating static process map layer
- fetching and synchronizing data,
- processing and grouping map elements,
- creating and updating static process map layer.
Rendered elements:
- Element - protein, homodimer, gene...
- Reaction - lines, products, substracts, and modifiers.
- Compartment - circular, square, and pathway.
- LineOverlay
- MarkerOverlay
- Element - protein, homodimer, gene...,
- Reaction - lines, products, substracts, and modifiers,
- Compartment - circular, square, and pathway,
- LineOverlay,
- MarkerOverlay.
## **Additional layers**
The rendering, updating, and interaction of additional layers on the map are handled by the **useOlMapAdditionalLayer** file.
The rendering, updating, and interaction of additional layers on the map are handled by the [**useOlMapAdditionalLayer**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/blob/development/src/components/Map/MapViewer/utils/config/additionalLayers/useOlMapAdditionalLayers.ts) file.
This file is responsible for managing additional layers beyond the core map elements, enabling additional functionalities such as drawing, modifying, and interacting with user defined objects.
Key responsibilities:
...
...
@@ -51,19 +63,19 @@ Key responsibilities:
- drawing new elements (rectangles, ovals, lines, text, images),
- transforming and modifying existing objects,
- listens for websocket messages to apply real-time updates,
- synchronizing with Redux Store.
- synchronizing with Redux store.
### **Rendering**
Each additional layer is created using the **Layer** class, which generates and manages all elements through dedicated classes for each type of object:
Each additional layer is created using the [**Layer**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/blob/development/src/components/Map/MapViewer/utils/shapes/layer/Layer.ts) class, which generates and manages all elements through dedicated classes for each type of object:
-**LayerText** - handles text elements,
-**LayerImage** - manages image objects,
-**LayerRect** - renders rectangular shapes,
-**LayerOval** - generates oval elements,
-**LayerLine** - draws lines with support for different styles and arrowheads.
-[**LayerText**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/blob/development/src/components/Map/MapViewer/utils/shapes/layer/elements/LayerText.ts) - handles text elements,
-[**LayerLine**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/blob/development/src/components/Map/MapViewer/utils/shapes/layer/elements/LayerLine.ts) - draws lines with support for different styles and arrowheads.
The **LayersDrawer** provides an interface for adding, editing, and deleting these layers.
The [**LayersDrawer**](https://gitlab.lcsb.uni.lu/minerva/frontend/-/blob/development/src/components/Map/Drawer/LayersDrawer/LayersDrawer.component.tsx) provides an interface for adding, editing, and deleting these layers.
@@ -415,7 +415,7 @@ Additional layers that can be added via the layers drawer are rendered using the
Same thing happens with listeners, all listeners are used in **useOlMapListeners.ts** file and this hook also called in **useOlMap.ts** to initialize all listeners.
More about rendering elements is presented in the **Rendering** section.
More about rendering elements is presented in the **Map rendering** section.
