feat: add display reaction overlay (MIN-215)

Closes MIN-215

Objective:

Implement a handler for displaying multiple reactions defined in the overlay config

How it works (shorten):

1. Algo tests if overlay element is bioentity/reaction by certain fields existence in element object
2. If the overlay element is a reaction, all possible segments (base/reactants etc.) are combined into a polygons array
3. Then, polygons are rendered as lines starting from left-top point and ending at right-bottom polygon point
4. It's possible that Left-Top (X1Y1) point will be lower in space than Right-Bottom (X2Y2) point. That's why width/height are defined as an absolute value. However, it does not require additional edge-case coverage. In the case above, the line will be just mirror-reversed and that's an expected behavior

What has been done:

• additional handlers for overlay element type of reaction
• unit tests

src/components/Map/MapViewer/utils/config/overlaysLayer/createOverlayLineFeature.test.ts

+import { LINE_WIDTH } from '@/constants/canvas';
+import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import { LinePoint } from '@/types/reactions';
+import { usePointToProjection } from '@/utils/map/usePointToProjection';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { renderHook } from '@testing-library/react';
+import { Feature } from 'ol';
+import { Geometry } from 'ol/geom';
+import { createOverlayLineFeature } from './createOverlayLineFeature';
+
+/* eslint-disable no-magic-numbers */
+const CASES: [LinePoint, number[]][] = [
+  [
+    [
+      { x: 0, y: 0 },
+      { x: 0, y: 0 },
+    ],
+    [0, 0, 0, 0],
+  ],
+  [
+    [
+      { x: 0, y: 0 },
+      { x: 100, y: 100 },
+    ],
+    [0, -238107693, Infinity, 0],
+  ],
+  [
+    [
+      { x: 100, y: 100 },
+      { x: 0, y: 0 },
+    ],
+    [0, -238107693, Infinity, 0],
+  ],
+  [
+    [
+      { x: 100, y: 0 },
+      { x: 0, y: 100 },
+    ],
+    [0, 0, 0, 0],
+  ],
+  [
+    [
+      { x: -50, y: 0 },
+      { x: 0, y: -50 },
+    ],
+    [0, 0, 0, 0],
+  ],
+];
+
+const COLOR = '#FFB3B3cc';
+
+const getFeature = (linePoint: LinePoint): Feature<Geometry> => {
+  const { Wrapper } = getReduxWrapperWithStore({
+    map: initialMapStateFixture,
+  });
+  const {
+    result: { current: pointToProjection },
+  } = renderHook(() => usePointToProjection(), {
+    wrapper: Wrapper,
+  });
+
+  return createOverlayLineFeature(linePoint, { pointToProjection, color: COLOR });
+};
+
+describe('createOverlayLineFeature - util', () => {
+  it.each(CASES)('should return Feature instance', linePoint => {
+    const feature = getFeature(linePoint);
+
+    expect(feature).toBeInstanceOf(Feature);
+  });
+
+  it.each(CASES)('should return Feature instance with valid style and stroke', linePoint => {
+    const feature = getFeature(linePoint);
+    const style = feature.getStyle();
+
+    expect(style).toMatchObject({
+      fill_: { color_: COLOR },
+      stroke_: {
+        color_: COLOR,
+        width_: LINE_WIDTH,
+      },
+    });
+  });
+
+  it.each(CASES)('should return Feature instance with valid geometry', (linePoint, extent) => {
+    const feature = getFeature(linePoint);
+    const geometry = feature.getGeometry();
+
+    expect(geometry?.getExtent()).toEqual(extent);
+  });
+});