@eeacms/volto-cca-policy 0.3.46 → 0.3.48

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.3.48](https://github.com/eea/volto-cca-policy/compare/0.3.47...0.3.48) - 22 May 2025
+
+#### :hammer_and_wrench: Others
+
+- Mocked services needed to pass CaseStudyMap.test.jsx [David Ichim - [`3bd411f`](https://github.com/eea/volto-cca-policy/commit/3bd411f9e83863727ba43642838b10fc9ca199f3)]
+- Add latest version [Tiberiu Ichim - [`6e89bbe`](https://github.com/eea/volto-cca-policy/commit/6e89bbeb5bf400af6f38ac872230754bdc0c63d3)]
+- Customize testing addon harness based on volto-listing-block example, to support custom version of openlayers addon [Tiberiu Ichim - [`da0f7ae`](https://github.com/eea/volto-cca-policy/commit/da0f7ae8804dafc793e62eaca963697f220c633c)]
+- Use new commit [Tiberiu Ichim - [`c625488`](https://github.com/eea/volto-cca-policy/commit/c625488eff82c1e5e3e75dda88010a83f14daeea)]
+- Fix eslint [Tiberiu Ichim - [`ac10036`](https://github.com/eea/volto-cca-policy/commit/ac1003670b3e8ab1a57fa180626948692ea1dff2)]
+- Depend on fixed commit of volto-openlayers-map [Tiberiu Ichim - [`67081a7`](https://github.com/eea/volto-cca-policy/commit/67081a7087f4cd7f45bdfa60376a7c7194d385ed)]
+- WIP on lazyload openlayers [Tiberiu Ichim - [`a424e80`](https://github.com/eea/volto-cca-policy/commit/a424e803af3551f280f79816c1fb7eaeb13c4f4c)]
+- WIP on lazyload openlayers [Tiberiu Ichim - [`5526e30`](https://github.com/eea/volto-cca-policy/commit/5526e3060c2fbec22e3269fbdd4e820bd035c52b)]
+- Revert from develop [Tiberiu Ichim - [`1396bdd`](https://github.com/eea/volto-cca-policy/commit/1396bdd51a391b8e5bd7bfae5e661903426f121e)]
+- Cleanup [Tiberiu Ichim - [`c8a3ae1`](https://github.com/eea/volto-cca-policy/commit/c8a3ae11a3275a8ccf2e941058a2280275de15ab)]
+- Fix country map observatory [Tiberiu Ichim - [`6fb83ea`](https://github.com/eea/volto-cca-policy/commit/6fb83eaf6d5be0cbe595b6ce0e77eb8581198291)]
+- Enable the cluster style [Tiberiu Ichim - [`8c0e8e0`](https://github.com/eea/volto-cca-policy/commit/8c0e8e092053041dddacc751ed34ed944de1c477)]
+- WIP on lazyload openlayers [Tiberiu Ichim - [`11cf2da`](https://github.com/eea/volto-cca-policy/commit/11cf2da4566ffc8cab1682dc508e9680999fb7d2)]
+- WIP on lazyload openlayers [Tiberiu Ichim - [`b9f41e2`](https://github.com/eea/volto-cca-policy/commit/b9f41e232c8f88e5ccc03cd04f0d59dc935d878d)]
+### [0.3.47](https://github.com/eea/volto-cca-policy/compare/0.3.46...0.3.47) - 22 May 2025
+
+#### :nail_care: Enhancements
+
+- change(mission): cleanup, remove unused component [kreafox - [`0440183`](https://github.com/eea/volto-cca-policy/commit/044018381a8c42e1a45ff9ba3668613dc08f5198)]
+- change(mission): add link to signatory landing page - refs #287964 [kreafox - [`78378a3`](https://github.com/eea/volto-cca-policy/commit/78378a3d7f8bab7aa6414342e228b45fc24ec57b)]
+
+#### :hammer_and_wrench: Others
+
+- update test [kreafox - [`ae30035`](https://github.com/eea/volto-cca-policy/commit/ae30035c6f3f1d81d560b5552afc0bc9764df983)]
 ### [0.3.46](https://github.com/eea/volto-cca-policy/compare/0.3.45...0.3.46) - 21 May 2025
 
 #### :house: Internal changes

package/jest-addon.config.js

@@ -1,10 +1,414 @@
-require('dotenv').config({ path: __dirname + '/.env' })
+/**
+ * Generic Jest configuration for Volto addons
+ *
+ * This configuration automatically:
+ * - Detects the addon name from the config file path
+ * - Configures test coverage to focus on the specific test path
+ * - Handles different ways of specifying test paths:
+ *   - Full paths like src/addons/addon-name/src/components
+ *   - Just filenames like Component.test.jsx
+ *   - Just directory names like components
+ *
+ * Usage:
+ * RAZZLE_JEST_CONFIG=src/addons/addon-name/jest-addon.config.js CI=true yarn test [test-path] --collectCoverage
+ */
+
+require('dotenv').config({ path: __dirname + '/.env' });
+
+const path = require('path');
+const fs = require('fs');
+const fg = require('fast-glob');
+
+// Get the addon name from the current file path
+const pathParts = __filename.split(path.sep);
+const addonsIdx = pathParts.lastIndexOf('addons');
+const addonName =
+  addonsIdx !== -1 && addonsIdx < pathParts.length - 1
+    ? pathParts[addonsIdx + 1]
+    : 'volto-listing-block'; // Fallback addon name
+const addonBasePath = `src/addons/${addonName}/src`;
+
+// --- Performance caches ---
+const fileSearchCache = new Map();
+const dirSearchCache = new Map();
+const dirListingCache = new Map();
+const statCache = new Map();
+const implementationCache = new Map();
+
+/**
+ * Cached fs.statSync wrapper to avoid redundant filesystem calls
+ * @param {string} p
+ * @returns {fs.Stats|null}
+ */
+const getStatSync = (p) => {
+  if (statCache.has(p)) return statCache.get(p);
+  try {
+    const s = fs.statSync(p);
+    statCache.set(p, s);
+    return s;
+  } catch {
+    statCache.set(p, null);
+    return null;
+  }
+};
+
+/**
+ * Find files that match a specific pattern using fast-glob
+ * @param {string} baseDir - The base directory to search in
+ * @param {string} fileName - The name of the file to find
+ * @param {string} [pathPattern=''] - Optional path pattern to filter results
+ * @returns {string[]} - Array of matching file paths
+ */
+const findFilesWithPattern = (baseDir, fileName, pathPattern = '') => {
+  const cacheKey = `${baseDir}|${fileName}|${pathPattern}`;
+  if (fileSearchCache.has(cacheKey)) {
+    return fileSearchCache.get(cacheKey);
+  }
+
+  let files = [];
+  try {
+    const patterns = fileName
+      ? [`${baseDir}/**/${fileName}`]
+      : [`${baseDir}/**/*.{js,jsx,ts,tsx}`];
+
+    files = fg.sync(patterns, { onlyFiles: true });
+
+    if (pathPattern) {
+      files = files.filter((file) => file.includes(pathPattern));
+    }
+  } catch {
+    files = [];
+  }
+
+  fileSearchCache.set(cacheKey, files);
+  return files;
+};
+
+/**
+ * Find directories that match a specific pattern using fast-glob
+ * @param {string} baseDir - The base directory to search in
+ * @param {string} dirName - The name of the directory to find
+ * @param {string} [pathPattern=''] - Optional path pattern to filter results
+ * @returns {string[]} - Array of matching directory paths
+ */
+const findDirsWithPattern = (baseDir, dirName, pathPattern = '') => {
+  const cacheKey = `${baseDir}|${dirName}|${pathPattern}`;
+  if (dirSearchCache.has(cacheKey)) {
+    return dirSearchCache.get(cacheKey);
+  }
+
+  let dirs = [];
+  try {
+    const patterns = dirName
+      ? [`${baseDir}/**/${dirName}`]
+      : [`${baseDir}/**/`];
+
+    dirs = fg.sync(patterns, { onlyDirectories: true });
+
+    if (pathPattern) {
+      dirs = dirs.filter((dir) => dir.includes(pathPattern));
+    }
+  } catch {
+    dirs = [];
+  }
+
+  dirSearchCache.set(cacheKey, dirs);
+  return dirs;
+};
+
+/**
+ * Find files or directories in the addon using fast-glob
+ * @param {string} name - The name to search for
+ * @param {string} type - The type of item to find ('f' for files, 'd' for directories)
+ * @param {string} [additionalOptions=''] - Additional options for flexible path matching
+ * @returns {string|null} - The path of the found item or null if not found
+ */
+const findInAddon = (name, type, additionalOptions = '') => {
+  const isFile = type === 'f';
+  const isDirectory = type === 'd';
+  const isFlexiblePathMatch = additionalOptions.includes('-path');
+
+  let pathPattern = '';
+  if (isFlexiblePathMatch) {
+    const match = additionalOptions.match(/-path "([^"]+)"/);
+    if (match && match[1]) {
+      pathPattern = match[1].replace(/\*/g, '');
+    }
+  }
+
+  try {
+    let results = [];
+    if (isFile) {
+      results = findFilesWithPattern(addonBasePath, name, pathPattern);
+    } else if (isDirectory) {
+      results = findDirsWithPattern(addonBasePath, name, pathPattern);
+    }
+    return results.length > 0 ? results[0] : null;
+  } catch (error) {
+    return null;
+  }
+};
+
+/**
+ * Find the implementation file for a test file
+ * @param {string} testPath - Path to the test file
+ * @returns {string|null} - Path to the implementation file or null if not found
+ */
+const findImplementationFile = (testPath) => {
+  if (implementationCache.has(testPath)) {
+    return implementationCache.get(testPath);
+  }
+
+  if (!fs.existsSync(testPath)) {
+    implementationCache.set(testPath, null);
+    return null;
+  }
+
+  const dirPath = path.dirname(testPath);
+  const fileName = path.basename(testPath);
+
+  // Regex for common test file patterns (e.g., .test.js, .spec.ts)
+  const TEST_OR_SPEC_FILE_REGEX = /\.(test|spec)\.[jt]sx?$/;
+
+  if (!TEST_OR_SPEC_FILE_REGEX.test(fileName)) {
+    implementationCache.set(testPath, null);
+    return null;
+  }
+
+  const baseFileName = path
+    .basename(fileName, path.extname(fileName))
+    .replace(/\.(test|spec)$/, ''); // Remove .test or .spec
+
+  let dirFiles = dirListingCache.get(dirPath);
+  if (!dirFiles) {
+    dirFiles = fs.readdirSync(dirPath);
+    dirListingCache.set(dirPath, dirFiles);
+  }
+
+  const exactMatch = dirFiles.find((file) => {
+    const fileBaseName = path.basename(file, path.extname(file));
+    return (
+      fileBaseName === baseFileName && !TEST_OR_SPEC_FILE_REGEX.test(file) // Ensure it's not another test/spec file
+    );
+  });
+
+  if (exactMatch) {
+    const result = `${dirPath}/${exactMatch}`;
+    implementationCache.set(testPath, result);
+    return result;
+  }
+
+  const similarMatch = dirFiles.find((file) => {
+    if (
+      TEST_OR_SPEC_FILE_REGEX.test(file) ||
+      (getStatSync(`${dirPath}/${file}`)?.isDirectory() ?? false)
+    ) {
+      return false;
+    }
+    const fileBaseName = path.basename(file, path.extname(file));
+    return (
+      fileBaseName.toLowerCase().includes(baseFileName.toLowerCase()) ||
+      baseFileName.toLowerCase().includes(fileBaseName.toLowerCase())
+    );
+  });
+
+  if (similarMatch) {
+    const result = `${dirPath}/${similarMatch}`;
+    implementationCache.set(testPath, result);
+    return result;
+  }
+
+  implementationCache.set(testPath, null);
+  return null;
+};
+
+/**
+ * Get the test path from command line arguments
+ * @returns {string|null} - The resolved test path or null if not found
+ */
+const getTestPath = () => {
+  const args = process.argv;
+  let testPath = null;
+  const TEST_FILE_REGEX = /\.test\.[jt]sx?$/; // Matches .test.js, .test.jsx, .test.ts, .test.tsx
+
+  testPath = args.find(
+    (arg) =>
+      arg.includes(addonName) &&
+      !arg.startsWith('--') &&
+      arg !== 'test' &&
+      arg !== 'node',
+  );
+
+  if (!testPath) {
+    const testIndex = args.findIndex((arg) => arg === 'test');
+    if (testIndex !== -1 && testIndex < args.length - 1) {
+      const nextArg = args[testIndex + 1];
+      if (!nextArg.startsWith('--')) {
+        testPath = nextArg;
+      }
+    }
+  }
+
+  if (!testPath) {
+    testPath = args.find((arg) => TEST_FILE_REGEX.test(arg));
+  }
+
+  if (!testPath) {
+    return null;
+  }
+
+  if (!testPath.includes(path.sep)) {
+    if (TEST_FILE_REGEX.test(testPath)) {
+      const foundTestFile = findInAddon(testPath, 'f');
+      if (foundTestFile) {
+        return foundTestFile;
+      }
+    } else {
+      const foundDir = findInAddon(testPath, 'd');
+      if (foundDir) {
+        return foundDir;
+      }
+      const flexibleDir = findInAddon(testPath, 'd', `-path "*${testPath}*"`);
+      if (flexibleDir) {
+        return flexibleDir;
+      }
+    }
+  } else if (
+    TEST_FILE_REGEX.test(testPath) && // Check if it looks like a test file path
+    !testPath.startsWith('src/addons/')
+  ) {
+    const testFileName = path.basename(testPath);
+    const foundTestFile = findInAddon(testFileName, 'f');
+    if (foundTestFile) {
+      const relativePath = path.dirname(testPath);
+      if (foundTestFile.includes(relativePath)) {
+        return foundTestFile;
+      }
+      const similarFiles = findFilesWithPattern(
+        addonBasePath,
+        testFileName,
+        relativePath,
+      );
+      if (similarFiles && similarFiles.length > 0) {
+        return similarFiles[0];
+      }
+    }
+  }
+
+  if (
+    !path
+      .normalize(testPath)
+      .startsWith(path.join('src', 'addons', addonName, 'src')) &&
+    !path.isAbsolute(testPath) // Use path.isAbsolute for robust check
+  ) {
+    testPath = path.join(addonBasePath, testPath); // Use path.join for OS-agnostic paths
+  }
+
+  if (fs.existsSync(testPath)) {
+    return testPath;
+  }
+
+  const pathWithoutTrailingSlash = testPath.endsWith(path.sep)
+    ? testPath.slice(0, -1)
+    : null;
+  if (pathWithoutTrailingSlash && fs.existsSync(pathWithoutTrailingSlash)) {
+    return pathWithoutTrailingSlash;
+  }
+
+  const pathWithTrailingSlash = !testPath.endsWith(path.sep)
+    ? testPath + path.sep
+    : null;
+  if (pathWithTrailingSlash && fs.existsSync(pathWithTrailingSlash)) {
+    // Generally, return paths without trailing slashes for consistency,
+    // unless it's specifically needed for a directory that only exists with it (rare).
+    return testPath;
+  }
+  return testPath; // Return the original path if no variations exist
+};
+
+/**
+ * Determine collectCoverageFrom patterns based on test path
+ * @returns {string[]} - Array of coverage patterns
+ */
+const getCoveragePatterns = () => {
+  const excludePatterns = [
+    '!src/**/*.d.ts',
+    '!**/*.test.{js,jsx,ts,tsx}',
+    '!**/*.spec.{js,jsx,ts,tsx}',
+  ];
+
+  const defaultPatterns = [
+    `${addonBasePath}/**/*.{js,jsx,ts,tsx}`,
+    ...excludePatterns,
+  ];
+
+  const ANY_SCRIPT_FILE_REGEX = /\.[jt]sx?$/;
+
+  const directoryArg = process.argv.find(
+    (arg) =>
+      !arg.includes(path.sep) &&
+      !arg.startsWith('--') &&
+      arg !== 'test' &&
+      arg !== 'node' &&
+      !ANY_SCRIPT_FILE_REGEX.test(arg) &&
+      ![
+        'yarn',
+        'npm',
+        'npx',
+        'collectCoverage',
+        'CI',
+        'RAZZLE_JEST_CONFIG',
+      ].some(
+        (reserved) =>
+          arg === reserved || arg.startsWith(reserved.split('=')[0] + '='),
+      ) &&
+      process.argv.indexOf(arg) >
+        process.argv.findIndex((item) => item === 'test'),
+  );
+
+  if (directoryArg) {
+    const foundDir = findInAddon(directoryArg, 'd');
+    if (foundDir) {
+      return [`${foundDir}/**/*.{js,jsx,ts,tsx}`, ...excludePatterns];
+    }
+  }
+
+  let testPath = getTestPath();
+
+  if (!testPath) {
+    return defaultPatterns;
+  }
+
+  if (testPath.endsWith(path.sep)) {
+    testPath = testPath.slice(0, -1);
+  }
+
+  const stats = getStatSync(testPath);
+
+  if (stats && stats.isFile()) {
+    const implFile = findImplementationFile(testPath);
+    if (implFile) {
+      return [implFile, '!src/**/*.d.ts'];
+    }
+    const dirPath = path.dirname(testPath);
+    return [`${dirPath}/**/*.{js,jsx,ts,tsx}`, ...excludePatterns];
+  } else if (stats && stats.isDirectory()) {
+    return [`${testPath}/**/*.{js,jsx,ts,tsx}`, ...excludePatterns];
+  }
+
+  return defaultPatterns;
+};
+
+const coverageConfig = getCoveragePatterns();
 
 module.exports = {
   testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
-  collectCoverageFrom: [
-    'src/addons/**/src/**/*.{js,jsx,ts,tsx}',
-    '!src/**/*.d.ts',
+  collectCoverageFrom: coverageConfig,
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    'schema\\.[jt]s?$',
+    'index\\.[jt]s?$',
+    'config\\.[jt]sx?$',
   ],
   moduleNameMapper: {
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
@@ -30,6 +434,7 @@ module.exports = {
   ],
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
+    '^.+\\.ts(x)?$': 'babel-jest',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',
@@ -44,7 +449,17 @@ module.exports = {
   },
   ...(process.env.JEST_USE_SETUP === 'ON' && {
     setupFilesAfterEnv: [
-      '<rootDir>/node_modules/@eeacms/volto-cca-policy/jest.setup.js',
+      fs.existsSync(
+        path.join(
+          __dirname,
+          'node_modules',
+          '@eeacms',
+          addonName,
+          'jest.setup.js',
+        ),
+      )
+        ? `<rootDir>/node_modules/@eeacms/${addonName}/jest.setup.js`
+        : `<rootDir>/src/addons/${addonName}/jest.setup.js`,
     ],
   }),
-}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.3.46",
+  "version": "0.3.48",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -34,7 +34,7 @@
     "@eeacms/volto-embed": "^9.1.1",
     "@eeacms/volto-globalsearch": "2.1.2",
     "@eeacms/volto-hero-block": "^7.1.0",
-    "@eeacms/volto-openlayers-map": "*",
+    "@eeacms/volto-openlayers-map": "github:eea/volto-openlayers-map#fe98a11ef5f92335acaaff098ef7734c3f2ac2fa",
     "@eeacms/volto-searchlib": "2.0.16",
     "@eeacms/volto-slate-label": "^0.6.0",
     "@eeacms/volto-tabs-block": "^7.5.1",

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

@@ -1,17 +1,17 @@
 import React from 'react';
 
 import { Map, Layer, Layers } from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 
 import FeatureInteraction from './FeatureInteraction';
 
 import { getFeatures } from './utils';
 
-export default function CaseStudyMap(props) {
-  const { items, activeItems } = props;
+function CaseStudyMap(props) {
+  const { items, activeItems, ol } = props;
   const [selectedCase, onSelectedCase] = React.useState();
 
-  const features = React.useMemo(() => getFeatures(items), [items]);
+  const features = React.useMemo(() => getFeatures(items, ol), [items, ol]);
 
   const [tileWMSSources] = React.useState([
     new ol.source.TileWMS({
@@ -32,7 +32,7 @@ export default function CaseStudyMap(props) {
       showFullExtent: true,
       zoom: 4,
     }),
-    [],
+    [ol.proj],
   );
 
   return features.length > 0 ? (
@@ -48,9 +48,11 @@ export default function CaseStudyMap(props) {
           mapCenter={mapCenter}
           features={features}
           activeItems={activeItems}
+          ol={ol}
         />
         <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
       </Layers>
     </Map>
   ) : null;
 }
+export default withOpenLayers(CaseStudyMap);

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

@@ -35,6 +35,23 @@ jest.mock('@eeacms/volto-openlayers-map', () => ({
       defaults: jest.fn().mockReturnValue([]),
     },
   },
+  // Add the withOpenLayers HOC mock
+  withOpenLayers: (Component) => (props) => (
+    <Component
+      {...props}
+      ol={{
+        source: {
+          TileWMS: jest.fn().mockImplementation(() => ({})),
+        },
+        proj: {
+          fromLonLat: jest.fn().mockReturnValue([0, 0]),
+        },
+        control: {
+          defaults: jest.fn().mockReturnValue([]),
+        },
+      }}
+    />
+  ),
 }));
 
 jest.mock('./FeatureInteraction', () => () => (

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 import FeatureDisplay from './FeatureDisplay';
 import { getFeatures } from './utils';
@@ -16,11 +15,12 @@ export default function FeatureInteraction({
   mapCenter,
   features,
   activeItems,
+  ol,
 }) {
   const { map } = useMapContext();
   const [clusterLayer, setClusterLayer] = React.useState();
   const [clusterCirclesLayer, setClusterCirclesLayer] = React.useState();
-  const { selectStyle, clusterCircleStyle } = useStyles();
+  const { selectStyle, clusterCircleStyle } = useStyles(ol);
 
   const [pointsSource] = React.useState(
     new ol.source.Vector({
@@ -38,9 +38,9 @@ export default function FeatureInteraction({
   React.useEffect(() => {
     if (activeItems) {
       pointsSource.clear();
-      pointsSource.addFeatures(getFeatures(activeItems));
+      pointsSource.addFeatures(getFeatures(activeItems, ol));
     }
-  }, [activeItems, pointsSource]);
+  }, [activeItems, pointsSource, ol]);
 
   const [isClient, setIsClient] = React.useState(false);
   React.useEffect(() => setIsClient(true), []);
@@ -59,11 +59,11 @@ export default function FeatureInteraction({
 
     const clusterLayer = new ol.layer.Vector({
       source: clusterSource,
-      style: clusterStyle,
+      style: clusterStyle(ol),
     });
     setClusterLayer(clusterLayer);
     map.addLayer(clusterLayer);
-  }, [map, clusterSource, clusterCircleStyle]);
+  }, [map, clusterSource, clusterCircleStyle, ol]);
 
   React.useEffect(() => {
     if (!(map && clusterLayer)) return;
@@ -96,7 +96,7 @@ export default function FeatureInteraction({
 
           const view = map.getView();
           const resolution = view.getResolution();
-          const extent = getExtentOfFeatures(subfeatures);
+          const extent = getExtentOfFeatures(subfeatures, ol);
 
           if (
             view.getZoom() === view.getMaxZoom() ||
@@ -147,6 +147,7 @@ export default function FeatureInteraction({
     clusterLayer,
     clusterCircleStyle,
     clusterCirclesLayer,
+    ol,
   ]);
 
   function onClosePopup(evt) {