@eeacms/volto-cca-policy 0.2.69 → 0.2.70

package/CHANGELOG.md

@@ -4,6 +4,34 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.2.70](https://github.com/eea/volto-cca-policy/compare/0.2.69...0.2.70) - 7 October 2024
+
+#### :hammer_and_wrench: Others
+
+- test: increase code coverage [kreafox - [`caa04c2`](https://github.com/eea/volto-cca-policy/commit/caa04c2cf23879d937d19f49fb9be38289a96f4a)]
+- Refs #272477 - add more test [Tripon Eugen - [`65cafca`](https://github.com/eea/volto-cca-policy/commit/65cafca45e03ec27bb9aae3b346bc50a0ed00c20)]
+- Refs #272477 - test update [Tripon Eugen - [`7c99ffc`](https://github.com/eea/volto-cca-policy/commit/7c99ffc6013ebd9a0625acce762f7069648037c7)]
+- Refs #272477 - test [Tripon Eugen - [`c60ab3e`](https://github.com/eea/volto-cca-policy/commit/c60ab3e7e07b0f9493386f74a1c6f3658aef74cf)]
+- Refs #Q272477 - test [Tripon Eugen - [`8a67efa`](https://github.com/eea/volto-cca-policy/commit/8a67efacc1e38801f4d30de28002eae7ef45b61b)]
+- test: increase code coverage [kreafox - [`82e5828`](https://github.com/eea/volto-cca-policy/commit/82e5828d44f7c848fccab13d2e224eb4239b15c3)]
+- Don't need background [Tiberiu Ichim - [`233be07`](https://github.com/eea/volto-cca-policy/commit/233be07bc6208bb37d76678688799a0934be4a78)]
+- Port InfoOverlay from casestudymap [Tiberiu Ichim - [`96f61d7`](https://github.com/eea/volto-cca-policy/commit/96f61d7af9d09d76c74714921d7f8b6b7b277137)]
+- Open link in new window [Tiberiu Ichim - [`3b94048`](https://github.com/eea/volto-cca-policy/commit/3b94048b4d5c23b5faa97bd5d8ae3a01d146a215)]
+- Add test [Tiberiu Ichim - [`31b3a80`](https://github.com/eea/volto-cca-policy/commit/31b3a8053388cdcdd0b4b2d7fc90ea0e39aaf18f)]
+- Remove unused file [Tiberiu Ichim - [`915dbf4`](https://github.com/eea/volto-cca-policy/commit/915dbf4e06cd46fbea5b36d8f7f31e72f3610f27)]
+- Remove console.log [Tiberiu Ichim - [`9cf77d8`](https://github.com/eea/volto-cca-policy/commit/9cf77d8cc5999cf52ce231e1179dfd54538d0b4d)]
+- Remove console.log [Tiberiu Ichim - [`04949b7`](https://github.com/eea/volto-cca-policy/commit/04949b70ee741aa54aacccd2eebe8c529b0367f1)]
+- WIP [Tiberiu Ichim - [`101d459`](https://github.com/eea/volto-cca-policy/commit/101d459ad818f274f8e74fd77e8847e6c6c09384)]
+- WIP [Tiberiu Ichim - [`9f18518`](https://github.com/eea/volto-cca-policy/commit/9f18518021a3750626bdff9e3f6f78344c5b8e9a)]
+- WIP [Tiberiu Ichim - [`2cb4ecb`](https://github.com/eea/volto-cca-policy/commit/2cb4ecb052f3ba951b317a8830ecbb09c7d388b6)]
+- eslint [Tripon Eugen - [`e1f3bb2`](https://github.com/eea/volto-cca-policy/commit/e1f3bb252c6e3e615f63cb7747324c569b832b11)]
+- Refs #272477 - view horizontal card eslint [Tripon Eugen - [`da0df68`](https://github.com/eea/volto-cca-policy/commit/da0df6829296b33d483c3880a7c39ecdf803caee)]
+- Refs #272477 - view horizontal card cluster [Tripon Eugen - [`d9fbd97`](https://github.com/eea/volto-cca-policy/commit/d9fbd97e3a9566ef6a9da62f283dd8639d7d00f0)]
+- Better style [Tiberiu Ichim - [`d05b49b`](https://github.com/eea/volto-cca-policy/commit/d05b49b762e9970fa51fe811322a81aacc75570f)]
+- Zoom to map center [Tiberiu Ichim - [`1b55019`](https://github.com/eea/volto-cca-policy/commit/1b5501940733e451d4870b0b2b29963e5f7ff655)]
+- add cluster [Tripon Eugen - [`8e25736`](https://github.com/eea/volto-cca-policy/commit/8e257363f173d6b09f0548ad0ec6a03ff47f1f13)]
+- checkpoint [Tiberiu Ichim - [`49595c1`](https://github.com/eea/volto-cca-policy/commit/49595c11d1eaf74924d1eed48f0d20594dbdcd1f)]
+- Refs #273188 - openDB link move to item title [Tripon Eugen - [`b4d66d6`](https://github.com/eea/volto-cca-policy/commit/b4d66d6874958659474057e7a1df5c28067b870a)]
 ### [0.2.69](https://github.com/eea/volto-cca-policy/compare/0.2.68...0.2.69) - 26 September 2024
 
 #### :bug: Bug Fixes
@@ -1563,13 +1591,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #260715 rast-block wip [Tripon Eugen - [`f19d54e`](https://github.com/eea/volto-cca-policy/commit/f19d54e0b9a6a86bf344eb85b6a1cda7f3de91bf)]
 - Refs #260715 rast-block wip [Tripon Eugen - [`2828537`](https://github.com/eea/volto-cca-policy/commit/2828537b6c084cd1a82162d552fb4ef025b71f9f)]
 - Refs #260715 rast-block updates [Tripon Eugen - [`1e803e5`](https://github.com/eea/volto-cca-policy/commit/1e803e5bd3d3fb7558f261c76c68866be7beb8b5)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`0a15e1b`](https://github.com/eea/volto-cca-policy/commit/0a15e1b2ad081233685e80d5b3c60a8663f6b896)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`9554e44`](https://github.com/eea/volto-cca-policy/commit/9554e44c92a621a52b2adb5a4830fb084ee5734b)]
 ### [0.1.49](https://github.com/eea/volto-cca-policy/compare/0.1.48...0.1.49) - 15 November 2023
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`7b820a6`](https://github.com/eea/volto-cca-policy/commit/7b820a6369c2ddd5203b1a4abe352cb4bb43db7a)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`f0a8061`](https://github.com/eea/volto-cca-policy/commit/f0a8061c275c236deb00087c23fac9860a073106)]
 
 #### :hammer_and_wrench: Others
@@ -1586,9 +1611,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #259267 - jenkins test [Tripon Eugen - [`cacd31e`](https://github.com/eea/volto-cca-policy/commit/cacd31e7b1afe0983674ed5c7632d2e1d7fa752e)]
 - Refs #259267 - jenkins [Tripon Eugen - [`5b3affe`](https://github.com/eea/volto-cca-policy/commit/5b3affee8401239de10097884c1b7f2349d15ec0)]
 - Refs #259267 - add When, lead image and title to files [Tripon Eugen - [`2cedb23`](https://github.com/eea/volto-cca-policy/commit/2cedb237f898af9057e13fba94b615ef71077204)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`4d607a5`](https://github.com/eea/volto-cca-policy/commit/4d607a576e9d0a5c34e48c41b409e7df616ee3d6)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`b7f74d5`](https://github.com/eea/volto-cca-policy/commit/b7f74d53513a6edbfbca5cb6d19687929bb1e5db)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`db65617`](https://github.com/eea/volto-cca-policy/commit/db656173391f65157098d95d388c25f6429753d8)]
 - Refs #259267 - cca event blocks attachments and check not mandatoty fields [Tripon Eugen - [`3138e5a`](https://github.com/eea/volto-cca-policy/commit/3138e5afb5bfbdbed14e27ed457b16867b7fa414)]
 - Refs #256681 - Fix error in CCA Event view menu. ([React Intl] An id must be provided to format a message.) [GhitaB - [`517eeb8`](https://github.com/eea/volto-cca-policy/commit/517eeb817264a47bbfd6b9b7d22aaf22d44ed224)]
 - Refs #161485 - Fix ECDE name conflict. [GhitaB - [`8bfd99f`](https://github.com/eea/volto-cca-policy/commit/8bfd99ff68bb82a04d1c0ed625fa514fcf46289e)]
@@ -1805,7 +1827,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`ad1ced0`](https://github.com/eea/volto-cca-policy/commit/ad1ced0971ba116c13a3b5fcc039172cc915c919)]
 
 #### :hammer_and_wrench: Others
 
@@ -2286,7 +2307,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Refs #158294 - Update supported languages list. [GhitaB - [`0a4f91f`](https://github.com/eea/volto-cca-policy/commit/0a4f91f39b7edc367bd4c127d6a8f273c7788361)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`8f1f9ce`](https://github.com/eea/volto-cca-policy/commit/8f1f9ce6c22805670cc0800d3c779b6d619d0f31)]
 ### [0.1.1](https://github.com/eea/volto-cca-policy/compare/0.1.0...0.1.1) - 13 December 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.2.69",
+  "version": "0.2.70",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Result/ClusterHorizontalCardItem.jsx

@@ -0,0 +1,136 @@
+// Original: https://github.com/eea/volto-searchlib/blob/master/searchlib/components/Result/HorizontalCardItem.jsx
+// We need custom href for results.
+import React from 'react';
+import { Label } from 'semantic-ui-react';
+import {
+  SegmentedBreadcrumb,
+  StringList,
+  DateTime,
+} from '@eeacms/search/components';
+import { useAppConfig } from '@eeacms/search/lib/hocs';
+
+import ExternalLink from '@eeacms/search/components/Result/ExternalLink';
+import ResultContext from '@eeacms/search/components/Result/ResultContext';
+import ContentClusters from '@eeacms/search/components/Result/ContentClusters';
+
+const healthURL = (href, is_observatory) => {
+  if (is_observatory) {
+    return href.replace(/\/metadata\//, '/observatory/++aq++metadata/');
+  }
+  return href;
+};
+
+const healthBreadcrumb = (href, is_observatory) => {
+  // It's only cosmetic. We don't want to show ++aq...
+  if (is_observatory) {
+    return href.replace(/\/metadata\//, '/observatory/');
+  }
+  return href;
+};
+
+const ExtraContent = (props) => {
+  const { result, is_mission, is_observatory } = props;
+  let title = 'Climate-ADAPT';
+  if (is_mission) {
+    title = 'Mission Portal';
+  }
+  if (is_observatory) {
+    title = 'Health Observatory';
+  }
+  return (
+    <div>
+      <div className="result-bottom">
+        <div className="result-info">
+          {/* <span className="result-info-title">Published: </span> */}
+          <DateTime format="DATE_MED" value={result.issued} />
+        </div>
+        <div className="result-info">
+          <span className="result-info-title">Topics: </span>
+          <StringList value={result.tags} />
+        </div>
+      </div>
+      <div>
+        <div className="result-info result-source">
+          <span className="result-info-title">Source: </span>
+          <ExternalLink href={healthURL(result.href, is_observatory)}>
+            <strong title={result.source} className="source">
+              {title}
+              {/* {firstWords(
+                getTermDisplayValue({
+                  vocab,
+                  field: 'cluster_name',
+                  term: result.source,
+                }),
+                8,
+              )} */}
+            </strong>
+            <SegmentedBreadcrumb
+              href={healthBreadcrumb(result.href, is_observatory)}
+              short={true}
+              maxChars={40}
+            />
+          </ExternalLink>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ClusterHorizontalCardItem = (props) => {
+  const { result } = props;
+  const { registry } = useAppConfig();
+  const clusters = result.clusterInfo;
+
+  const UniversalCard = registry.resolve['UniversalCard'].component;
+
+  let is_mission = false;
+  let is_observatory = false;
+  if (
+    result.cca_include_in_mission.raw === 'true' ||
+    result.href.includes('climate-adapt.eea.europa.eu/en/mission')
+  ) {
+    is_mission = true;
+  }
+  if (result.cca_include_in_search_observatory.raw === 'true') {
+    is_observatory = true;
+  }
+
+  const item = {
+    '@id': result.href,
+    title: (
+      <>
+        <ExternalLink
+          href={healthURL(result.href, is_observatory)}
+          title={result.title}
+        >
+          {result.title}
+          {result.isNew && <Label className="new-item">New</Label>}
+          {result.isExpired && (
+            <Label className="archived-item">Archived</Label>
+          )}
+        </ExternalLink>
+      </>
+    ),
+    meta: <ContentClusters clusters={clusters} item={result} />,
+    description: props.children ? props.children : <ResultContext {...props} />,
+    preview_image_url: result.hasImage ? result.thumbUrl : undefined,
+    extra: (
+      <ExtraContent
+        result={result}
+        is_mission={is_mission}
+        is_observatory={is_observatory}
+      />
+    ),
+  };
+
+  const itemModel = {
+    hasImage: result.hasImage,
+    hasDescription: true,
+    imageOnRightSide: true,
+    '@type': 'searchItem',
+  };
+
+  return <UniversalCard item={item} itemModel={itemModel} />;
+};
+
+export default ClusterHorizontalCardItem;

package/src/components/manage/Blocks/C3SIndicatorsGlossaryBlock/C3SIndicatorsGlossaryBlockView.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import C3SIndicatorsGlossaryBlockView from './C3SIndicatorsGlossaryBlockView';
+
+const mockStore = configureStore();
+
+describe('C3SIndicatorsGlossaryBlockView', () => {
+  it('should render the component', () => {
+    const data = {
+      mode: 'test',
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <C3SIndicatorsGlossaryBlockView {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/manage/Blocks/C3SIndicatorsListingBlock/C3SIndicatorsListingBlockView.test.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import C3SIndicatorsListingBlockView from './C3SIndicatorsListingBlockView';
+
+const mockStore = configureStore();
+
+describe('C3SIndicatorsListingBlockView', () => {
+  it('should render the component', () => {
+    const data = {
+      metadata: {
+        '@components': {
+          c3s_indicators_listing: {
+            items: [
+              { url: 'https://www.europa.eu', title: 'Europa' },
+              { url: 'https://www.copernicus.eu/en', title: 'Copernicus' },
+            ],
+          },
+        },
+      },
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <C3SIndicatorsListingBlockView {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyExplorerEdit.test.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import CaseStudyExplorerEdit from './CaseStudyExplorerEdit';
+import { useCases } from './hooks';
+import * as utils from './utils';
+
+const mockStore = configureStore();
+
+jest.mock('./CaseStudyExplorerView', () => (props) => (
+  <div>Mock Case Study Explorer View {JSON.stringify(props)}</div>
+));
+jest.mock('./CaseStudyMap', () => () => <div>Mock Case Study Map</div>);
+jest.mock('./CaseStudyFilters', () => () => <div>Mock Case Study Filters</div>);
+
+jest.mock('./hooks', () => ({
+  useCases: jest.fn(),
+}));
+
+jest.mock('./utils', () => ({
+  filterCases: jest.fn(),
+  getFilters: jest.fn(),
+}));
+
+const store = mockStore({
+  userSession: { token: '1234' },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('CaseStudyExplorerEdit', () => {
+  const mockCasesData = {
+    features: [
+      {
+        properties: {
+          title: 'Case Study 1',
+          image: 'image1.jpg',
+          sectors_str: 'Sector1',
+          impacts_str: 'Impact1',
+          adaptation_options_links: 'link1',
+          url: 'https://example.com/case-study-1',
+          origin_adaptecca: 20,
+          sectors: '1,2',
+          impacts: '1',
+          elements: '1',
+        },
+        geometry: {
+          coordinates: [-123.3656, 48.4284],
+        },
+      },
+    ],
+    filters: {
+      measures: [],
+    },
+  };
+
+  beforeEach(() => {
+    useCases.mockReturnValue(mockCasesData);
+
+    utils.getFilters.mockReturnValue({
+      impacts: { 1: 'Impact 1' },
+      sectors: { 1: 'Sector 1' },
+      elements: { 1: 'Element 1' },
+      measures: {},
+    });
+
+    utils.filterCases.mockImplementation((cases, activeFilters) => {
+      return activeFilters.sectors.length ? cases : [];
+    });
+  });
+
+  it('renders the CaseStudyExplorerEdit component', () => {
+    const { getByText } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CaseStudyExplorerEdit />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByText(/Mock Case Study Explorer View/i)).toBeInTheDocument();
+    expect(getByText(/"mode":"edit"/i)).toBeInTheDocument(); // Check for the mode prop
+  });
+});

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyExplorerView.test.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import CaseStudyExplorerView from './CaseStudyExplorerView';
+import { useCases } from './hooks';
+import * as utils from './utils';
+
+const mockStore = configureStore();
+
+jest.mock('./CaseStudyMap', () => () => <div>Mock Case Study Map</div>);
+jest.mock('./CaseStudyFilters', () => () => <div>Mock Case Study Filters</div>);
+
+jest.mock('./hooks', () => ({
+  useCases: jest.fn(),
+}));
+
+jest.mock('./utils', () => ({
+  filterCases: jest.fn(),
+  getFilters: jest.fn(),
+}));
+
+jest.mock('@plone/volto/helpers', () => ({
+  addAppURL: jest.fn((url) => url),
+}));
+
+const store = mockStore({
+  userSession: { token: '1234' },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+// Define the __SERVER__ variable for testing
+global.__SERVER__ = false; // Set it to false to avoid server-side return
+
+describe('CaseStudyExplorerView', () => {
+  const mockCasesData = {
+    features: [
+      {
+        properties: {
+          title: 'Case Study 1',
+          image: 'image1.jpg',
+          sectors_str: 'Sector1',
+          impacts_str: 'Impact1',
+          adaptation_options_links: 'link1',
+          url: 'https://example.com/case-study-1',
+          origin_adaptecca: 20,
+          sectors: '1,2',
+          impacts: '1',
+          elements: '1',
+        },
+        geometry: {
+          coordinates: [-123.3656, 48.4284],
+        },
+      },
+    ],
+    filters: {
+      measures: [],
+    },
+  };
+
+  beforeEach(() => {
+    useCases.mockReturnValue(mockCasesData);
+    utils.filterCases.mockImplementation((cases, filters) => cases);
+    utils.getFilters.mockReturnValue({
+      impacts: { 1: 'Impact 1' },
+      sectors: { 1: 'Sector 1' },
+      elements: { 1: 'Element 1' },
+      measures: {},
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the CaseStudyExplorerView with case studies', () => {
+    const { getByText } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CaseStudyExplorerView />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByText('Mock Case Study Map')).toBeInTheDocument();
+    expect(getByText('Mock Case Study Filters')).toBeInTheDocument();
+  });
+});

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyMap.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { Map, Layer, Layers } from '@eeacms/volto-openlayers-map/api';
 import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 
-import InfoOverlay from './InfoOverlay';
 import FeatureInteraction from './FeatureInteraction';
 
 import { getFeatures } from './utils';
@@ -12,7 +11,7 @@ export default function CaseStudyMap(props) {
   const { items, activeItems } = props;
   const [selectedCase, onSelectedCase] = React.useState();
 
-  const features = getFeatures(items);
+  const features = React.useMemo(() => getFeatures(items), [items]);
 
   const [tileWMSSources] = React.useState([
     new ol.source.TileWMS({
@@ -26,97 +25,32 @@ export default function CaseStudyMap(props) {
       transition: 0,
     }),
   ]);
-  const [pointsSource] = React.useState(
-    new ol.source.Vector({
-      features,
-    }),
-  );
 
-  const [clusterSource] = React.useState(
-    new ol.source.Cluster({
-      distance: 50,
-      source: pointsSource,
+  const mapCenter = React.useMemo(
+    () => ({
+      center: ol.proj.fromLonLat([20, 50]),
+      showFullExtent: true,
+      zoom: 4,
     }),
+    [],
   );
 
-  React.useEffect(() => {
-    if (activeItems) {
-      pointsSource.clear();
-      pointsSource.addFeatures(getFeatures(activeItems));
-    }
-  }, [activeItems, pointsSource]);
-
   return features.length > 0 ? (
     <Map
-      view={{
-        center: ol.proj.fromLonLat([20, 50]),
-        showFullExtent: true,
-        zoom: 4,
-      }}
+      view={mapCenter}
       pixelRatio={1}
       controls={ol.control.defaults({ attribution: false })}
     >
       <Layers>
-        <InfoOverlay
-          selectedFeature={selectedCase}
+        <FeatureInteraction
           onFeatureSelect={onSelectedCase}
-          layerId={tileWMSSources[0]}
-          hasCusters={true}
+          selectedFeature={selectedCase}
+          mapCenter={mapCenter}
+          features={features}
+          activeItems={activeItems}
         />
-        <FeatureInteraction onFeatureSelect={onSelectedCase} />
         <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
-        <Layer.Vector style={clusterStyle} source={clusterSource} zIndex={1} />
       </Layers>
     </Map>
   ) : null;
 }
-
-const _cached = {};
-
-function getStyle(size, haveAdaptecca) {
-  let style = _cached[size + '_' + haveAdaptecca];
-
-  if (!style) {
-    style =
-      size === 1
-        ? new ol.style.Style({
-            image: new ol.style.Circle({
-              radius: 5,
-              stroke: new ol.style.Stroke({
-                color: '#fff',
-              }),
-              fill: new ol.style.Fill({
-                color: haveAdaptecca ? '#00ffff' : '#005c96',
-              }),
-            }),
-          })
-        : new ol.style.Style({
-            image: new ol.style.Circle({
-              radius: 10 + Math.min(Math.floor(size / 3), 10),
-              stroke: new ol.style.Stroke({
-                color: '#fff',
-              }),
-              fill: new ol.style.Fill({
-                color: haveAdaptecca ? '#318CE7' : '#005c96',
-              }),
-            }),
-            text: new ol.style.Text({
-              text: size.toString(),
-              fill: new ol.style.Fill({
-                color: '#fff',
-              }),
-            }),
-          });
-    _cached[size + '_' + haveAdaptecca] = style;
-  }
-  return style;
-}
-
-function clusterStyle(feature) {
-  const size = feature.get('features').length;
-  const cases = feature
-    .get('features')
-    .filter((_case) => _case['values_']['origin_adaptecca'] < 20);
-
-  return getStyle(size, cases.length > 0 ? 1 : 0);
-}