@eeacms/volto-marine-policy 2.0.10 → 2.0.11

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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).
 
+### [2.0.11](https://github.com/eea/volto-marine-policy/compare/2.0.10...2.0.11) - 12 May 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`a054cba`](https://github.com/eea/volto-marine-policy/commit/a054cba726d2d053b15b2eadd1ccd24ef9377b8a)]
+
+#### :hammer_and_wrench: Others
+
+- fixes eslint [laszlocseh - [`c663600`](https://github.com/eea/volto-marine-policy/commit/c6636007ac365ba98462dc57d040eb8fa3ff187f)]
+- fixes to demo sites map viewer [laszlocseh - [`b82cd91`](https://github.com/eea/volto-marine-policy/commit/b82cd91670fca640e115a765626c81ba8019bff2)]
+- Small improvements to demo sites map viewer [laszlocseh - [`e5c5e66`](https://github.com/eea/volto-marine-policy/commit/e5c5e66e2ef121f3812aa2dc53a9f9a35679f667)]
 ### [2.0.10](https://github.com/eea/volto-marine-policy/compare/2.0.9...2.0.10) - 9 May 2025
 
 #### :rocket: Dependency updates

package/package.json

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

package/src/components/Blocks/DemoSitesExplorer/DemoSitesExplorerView.js

@@ -13,6 +13,7 @@ import { useCases } from './hooks';
 import './styles.less';
 
 export default function DemoSitesExplorerView(props) {
+  const [initialized, setInitialized] = React.useState(false); // set to true after the chart animation is finished
   const cases_url = config.settings.prefixPath
     ? '/@@demo-sites-map.arcgis.json'
     : '/marine/@@demo-sites-map.arcgis.json';
@@ -65,6 +66,8 @@ export default function DemoSitesExplorerView(props) {
           filters={filters}
           activeFilters={activeFilters}
           setActiveFilters={setActiveFilters}
+          setHighlightedIndex={setHighlightedIndex}
+          initialized={initialized}
         />
       </Grid.Row>
       <Grid.Row stretched={true} id="cse-filter">
@@ -112,6 +115,8 @@ export default function DemoSitesExplorerView(props) {
                       // map={map}
                       highlightedIndex={highlightedIndex}
                       setHighlightedIndex={setHighlightedIndex}
+                      initialized={initialized}
+                      setInitialized={setInitialized}
                     />
                   </VisibilitySensor>
                 ) : (

package/src/components/Blocks/DemoSitesExplorer/DemoSitesFilters.jsx

@@ -271,17 +271,22 @@ export function SearchBox(props) {
 }
 
 export function ActiveFilters(props) {
-  const { filters, activeFilters, setActiveFilters } = props;
-  const hasActiveFilters = false;
-  // const hasActiveFilters = Object.entries(activeFilters).some(
-  //   ([filterName, filterList]) => {
-  //     return false;
-  //     if (filterList.length > 0) {
-  //       return true;
-  //     }
-  //     return false;
-  //   },
-  // );
+  const {
+    filters,
+    activeFilters,
+    setActiveFilters,
+    setHighlightedIndex,
+    initialized,
+  } = props;
+  // const hasActiveFilters = false;
+  const hasActiveFilters = Object.entries(activeFilters).some(
+    ([filterName, filterList]) => {
+      if (filterList.length > 0) {
+        return true;
+      }
+      return false;
+    },
+  );
 
   const removeFilter = (filterName, filterCode) => {
     const temp = JSON.parse(JSON.stringify(activeFilters));
@@ -303,12 +308,15 @@ export function ActiveFilters(props) {
     setActiveFilters(temp);
   };
 
-  return hasActiveFilters ? (
+  return hasActiveFilters && initialized ? (
     <div className="ui segment active-filter-list">
       <div className="filter-list-header">
         <h4 className="filter-list-title">Active filters</h4>
         <button
-          onClick={() => clearFilters(setActiveFilters)}
+          onClick={() => {
+            setHighlightedIndex(5);
+            clearFilters(setActiveFilters);
+          }}
           className="ui mini basic compact button clear-btn"
         >
           clear all
@@ -328,6 +336,7 @@ export function ActiveFilters(props) {
                       tabIndex="0"
                       onKeyPress={() => {}}
                       onClick={() => {
+                        setHighlightedIndex(5);
                         removeFilter('objective_filter', filterCode);
                         // scrollToElement('search-input');
                       }}

package/src/components/Blocks/DemoSitesExplorer/DemoSitesMap.jsx

@@ -163,7 +163,7 @@ export default function DemoSitesMap(props) {
               map.getInteractions().array_[9].getFeatures().clear();
             }}
           >
-            <span className="result-info-title">Reset filters</span>
+            <span className="result-info-title">Reset map</span>
             <i className="icon ri-map-2-line"></i>
           </button>
           <InfoOverlay

package/src/components/Blocks/DemoSitesExplorer/ObjectivesChart.jsx

@@ -17,8 +17,9 @@ const ObjectivesChart = ({
   //   map,
   highlightedIndex,
   setHighlightedIndex,
+  initialized,
+  setInitialized,
 }) => {
-  const initialized = useRef(false);
   const chartRef = useRef(null);
   const objectiveCounts = {};
 
@@ -38,13 +39,13 @@ const ObjectivesChart = ({
   React.useEffect(() => {
     // set the objectives and the count
     if (!items) return;
-    if (initialized.current) return;
+    if (initialized) return;
 
     const interval = setInterval(() => {
       setHighlightedIndex((prevIndex) => {
         if (prevIndex + 1 >= objectivesLength + 1) {
           clearInterval(interval); // Stop after last item
-          initialized.current = true;
+          setInitialized(true);
           return prevIndex;
         }
         return prevIndex + 1;
@@ -52,7 +53,14 @@ const ObjectivesChart = ({
     }, 2000);
     // console.log('init');
     return () => clearInterval(interval); // Cleanup on unmount
-  }, [items, objectivesLength, highlightedIndex, setHighlightedIndex]);
+  }, [
+    items,
+    objectivesLength,
+    highlightedIndex,
+    setHighlightedIndex,
+    initialized,
+    setInitialized,
+  ]);
 
   React.useEffect(() => {
     // if (!objectives) return;
@@ -146,6 +154,7 @@ const ObjectivesChart = ({
   );
 
   // console.log(highlightedIndex);
+  // console.log(initialized);
 
   return highlightedIndex >= -1 ? (
     <div className="objectives-chart fade-in">