@eeacms/volto-marine-policy 2.0.9 → 2.0.11

package/CHANGELOG.md

@@ -4,6 +4,36 @@ 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
+
+- Release @eeacms/volto-globalsearch@2.1.0 [EEA Jenkins - [`3b20bc2`](https://github.com/eea/volto-marine-policy/commit/3b20bc292d04ab81385732840ffe2c469f83fbd6)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`69cc9c8`](https://github.com/eea/volto-marine-policy/commit/69cc9c86e32d35cce4f979b36bc7d20cc4b01e8f)]
+- style: Automated code fix [eea-jenkins - [`d1a8da0`](https://github.com/eea/volto-marine-policy/commit/d1a8da01dfc0ddcc24058ba5aafb5d76be0d2ffc)]
+
+#### :hammer_and_wrench: Others
+
+- eslint [laszlocseh - [`8c27f84`](https://github.com/eea/volto-marine-policy/commit/8c27f84fcdc8adf9b12746b585c66f34b9e785a4)]
+- further improvements to demo sites map [laszlocseh - [`b15e205`](https://github.com/eea/volto-marine-policy/commit/b15e2053256552c30f26fdab581330cba420b412)]
+- eslint [laszlocseh - [`4514ee0`](https://github.com/eea/volto-marine-policy/commit/4514ee0a409e8dfe0d6975da989228f39033b343)]
+- no results message [laszlocseh - [`06b7ae6`](https://github.com/eea/volto-marine-policy/commit/06b7ae62eb7b27a2ec9e2d3f9ec62aed42a85045)]
+- fix eslint [laszlocseh - [`2a4605a`](https://github.com/eea/volto-marine-policy/commit/2a4605ac45b141d5e3f2b737a24c6afca0b5d884)]
+- optimize demo sites map rendering [laszlocseh - [`2345b60`](https://github.com/eea/volto-marine-policy/commit/2345b609a95a00a53c46ce9b92686eeb598a14a6)]
 ### [2.0.9](https://github.com/eea/volto-marine-policy/compare/2.0.8...2.0.9) - 7 May 2025
 
 #### :rocket: Dependency updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -34,7 +34,7 @@
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-eea-website-theme": "*",
     "@eeacms/volto-embed": "*",
-    "@eeacms/volto-globalsearch": "2.0.11",
+    "@eeacms/volto-globalsearch": "2.1.0",
     "@eeacms/volto-openlayers-map": "0.3.2",
     "@eeacms/volto-searchlib": "2.0.16",
     "@eeacms/volto-tabs-block": "*",

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">
@@ -104,14 +107,16 @@ export default function DemoSitesExplorerView(props) {
                   <VisibilitySensor>
                     <ObjectivesChart
                       items={cases}
-                      activeItems={activeItems}
-                      filters={filters}
+                      // activeItems={activeItems}
+                      // filters={filters}
                       activeFilters={activeFilters}
-                      hideFilters={hideFilters}
                       setActiveFilters={setActiveFilters}
-                      map={map}
+                      // hideFilters={hideFilters}
+                      // map={map}
                       highlightedIndex={highlightedIndex}
                       setHighlightedIndex={setHighlightedIndex}
+                      initialized={initialized}
+                      setInitialized={setInitialized}
                     />
                   </VisibilitySensor>
                 ) : (

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { centerAndResetMapZoom, clearFilters } from './utils';
+import { clearFilters } from './utils';
 
 const normalizeSearchInput = (searchInput) => {
   let normInput = searchInput
@@ -20,7 +20,7 @@ export function DemoSitesFilter(props) {
     activeFilters,
     setActiveFilters,
     filterName,
-    map,
+    // map,
   } = props;
 
   const customOrder = props?.customOrder || [];
@@ -103,7 +103,7 @@ export function DemoSitesFilter(props) {
                     }
                     setActiveFilters(temp);
                     // scrollToElement('search-input');
-                    centerAndResetMapZoom(map);
+                    // centerAndResetMapZoom(map);
                   }}
                 />
                 <span>{label}</span>
@@ -190,7 +190,7 @@ export function DemoSitesFilters(props) {
 }
 
 export function SearchBox(props) {
-  const { setSearchInput, map, onSelectedCase } = props;
+  const { setSearchInput, onSelectedCase } = props;
   const [showClearButton, setShowClearButton] = React.useState(false);
 
   return (
@@ -215,7 +215,7 @@ export function SearchBox(props) {
                 // popupOverlay.style.visibility = 'hidden';
                 setSearchInput(searchInput);
                 // scrollToElement('search-input');
-                centerAndResetMapZoom(map);
+                // centerAndResetMapZoom(map);
               }}
             ></input>
             <div className="terms-box-left">
@@ -233,7 +233,7 @@ export function SearchBox(props) {
                         setSearchInput('');
                         setShowClearButton(false);
                         // scrollToElement('search-input');
-                        centerAndResetMapZoom(map);
+                        // centerAndResetMapZoom(map);
                       }}
                     ></i>
                   </div>
@@ -253,7 +253,7 @@ export function SearchBox(props) {
 
                   setSearchInput(searchInputVal);
                   // scrollToElement('search-input');
-                  centerAndResetMapZoom(map);
+                  // centerAndResetMapZoom(map);
                 }}
                 onKeyDown={() => {}}
                 tabIndex="0"
@@ -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/DemoSitesListing.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { centerAndResetMapZoom, zoomMapToFeatures, isValidURL } from './utils';
+import { centerAndResetMapZoom, isValidURL } from './utils';
 
 const showPageNr = (pageNr, currentPage, numberOfPages) => {
   // show first 5 pages
@@ -271,7 +271,7 @@ export default function DemoSitesList(props) {
                             // scroll to the map
                             // scrollToElement('ol-map-container');
 
-                            zoomMapToFeatures(map, [item], 5000);
+                            // zoomMapToFeatures(map, [item], 5000);
                             onSelectedCase(item.values_);
 
                             const popupOverlay =

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

@@ -10,10 +10,10 @@ import FeatureInteraction from './FeatureInteraction';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 
 import {
-  // centerAndResetMapZoom,
+  centerAndResetMapZoom,
   clearFilters,
   getFeatures,
-  zoomMapToFeatures,
+  // zoomMapToFeatures,
 } from './utils';
 
 const styleCache = {};
@@ -35,6 +35,7 @@ export default function DemoSitesMap(props) {
     onSelectedCase,
     map,
     setMap,
+    highlightedIndex,
     setHighlightedIndex,
   } = props;
   const features = getFeatures(items);
@@ -73,7 +74,7 @@ export default function DemoSitesMap(props) {
       pointsSource.clear();
       pointsSource.addFeatures(getFeatures(activeItems));
       // hideFilters && zoomMapToFeatures(map, getFeatures(activeItems));
-      zoomMapToFeatures(map, getFeatures(activeItems));
+      // zoomMapToFeatures(map, getFeatures(activeItems));
     }
   }, [map, activeItems, pointsSource, hideFilters]);
 
@@ -130,13 +131,18 @@ export default function DemoSitesMap(props) {
         view={{
           center: ol.proj.fromLonLat([10, 54]),
           showFullExtent: true,
-          zoom: 3,
+          zoom: 3.4,
         }}
         pixelRatio={1}
         // controls={ol.control.defaults({ attribution: false })}
       >
         <Controls attribution={false} />
         <Layers>
+          {highlightedIndex > 0 && !activeItems.length && (
+            <div className="no-results-message">
+              No results found. Please refine your filters.
+            </div>
+          )}
           <button
             className={cx(
               'reset-map-button ui button secondary',
@@ -148,15 +154,16 @@ export default function DemoSitesMap(props) {
               clearFilters(setActiveFilters);
               setHighlightedIndex(5);
               if (hideFilters) {
-                zoomMapToFeatures(map, getFeatures(activeItems));
+                // zoomMapToFeatures(map, getFeatures(activeItems));
+                centerAndResetMapZoom(map);
               } else {
-                // centerAndResetMapZoom(map);
-                zoomMapToFeatures(map, getFeatures(activeItems));
+                centerAndResetMapZoom(map);
+                // zoomMapToFeatures(map, getFeatures(activeItems));
               }
               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
@@ -211,7 +218,8 @@ const selectedClusterStyle = (selectedFeature) => {
     }
     // set size === 1 to enable clusterization
     if (size) {
-      let color = feature.values_.features[0].values_['color'];
+      // let color = feature.values_.features[0].values_['color'];
+      let color = '#0179cf';
       let width = feature.values_.features[0].values_['width'];
       let radius = feature.values_.features[0].values_['radius'];
       // console.log(color)

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

@@ -6,9 +6,13 @@ export default function FeatureDisplay({ feature }) {
     <div id="csepopup">
       <h3>
         <strong>
-          <a target="_blank" rel="noopener noreferrer" href={feature.path}>
+          <span
+          // target="_blank"
+          // rel="noopener noreferrer"
+          // href={feature.path}
+          >
             {truncateText(feature.title)}
-          </a>
+          </span>
         </strong>
       </h3>
       {feature.info ? (
@@ -57,6 +61,19 @@ export default function FeatureDisplay({ feature }) {
         ''
       )}
 
+      {feature.objective.length > 0 ? (
+        <div>
+          <span className="popup-title blue">Objective/Enabler</span>
+          <ul>
+            {feature.objective.map((item, index) => {
+              return <li key={index}>{item}</li>;
+            })}
+          </ul>
+        </div>
+      ) : (
+        ''
+      )}
+
       {/* {feature.project_link ? (
         <div>
           <span className="popup-title blue">Project link: </span>
@@ -100,14 +117,6 @@ export default function FeatureDisplay({ feature }) {
       ) : (
         ''
       )}
-      {/* <div>
-        <h4>Indicators</h4>
-        <ul>
-          {feature.sectors.map((item, index) => {
-            return <li key={index}>{item}</li>;
-          })}
-        </ul>
-      </div> */}
     </div>
   ) : null;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
-import { zoomMapToFeatures } from './utils';
+// import { zoomMapToFeatures } from './utils';
 
 export const useStyles = () => {
   const selected = React.useMemo(
@@ -67,7 +67,7 @@ export default function FeatureInteraction({ onFeatureSelect }) {
           // });
         } else {
           onFeatureSelect(null);
-          zoomMapToFeatures(map, subfeatures);
+          // zoomMapToFeatures(map, subfeatures);
         }
       });
 

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,23 +53,40 @@ 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;
+    const filterKey = 'objective_filter';
+
     if (highlightedIndex === -1) {
-      setActiveFilters({
-        objective_filter: [undefined],
-        target_filter: [],
-        indicator_filter: [],
-        project_filter: [],
-        country_filter: [],
+      const newValue = [undefined];
+
+      setActiveFilters((prev) => {
+        const currentValues = prev[filterKey];
+        // Don't update if no change
+        const isSame =
+          currentValues.length === newValue.length &&
+          currentValues.every((v, i) => v === newValue[i]);
+
+        if (isSame) return prev;
+
+        return {
+          ...prev,
+          [filterKey]: newValue,
+        };
       });
       return;
     }
 
     const currentObjective = Object.keys(objectives)[highlightedIndex];
-    const filterKey = 'objective_filter';
     const newValue = currentObjective ? [currentObjective] : [];
 
     setActiveFilters((prev) => {
@@ -89,9 +107,15 @@ const ObjectivesChart = ({
   }, [objectives, activeFilters, setActiveFilters, highlightedIndex]);
 
   const handleClick = (event) => {
-    const point = event.points[0];
-    const label = point.label;
-    // const value = point.value;
+    let label = '';
+
+    if (event.points) {
+      const point = event.points[0];
+      label = point.label;
+      // const value = point.value;
+    } else {
+      label = event.target.textContent;
+    }
 
     const tempFilters = JSON.parse(JSON.stringify(activeFilters));
     if (tempFilters['objective_filter'].includes(label)) {
@@ -129,6 +153,9 @@ const ObjectivesChart = ({
     i === highlightedIndex ? customColors[i % customColors.length] : grayColor,
   );
 
+  // console.log(highlightedIndex);
+  // console.log(initialized);
+
   return highlightedIndex >= -1 ? (
     <div className="objectives-chart fade-in">
       <Grid.Row className="chart-title">
@@ -152,14 +179,18 @@ const ObjectivesChart = ({
                 marker: {
                   colors:
                     highlightedIndex === 5 ? customColors : inactiveColors, // Apply custom colors here
+                  line: {
+                    color: '#e0e0e0', // light gray
+                    width: 1, // thin border
+                  },
                 },
                 direction: 'clockwise',
                 // pull,
               },
             ]}
             layout={{
-              width: 250,
-              height: 250,
+              width: 300,
+              height: 300,
               // title: 'Objectives Distribution',
               showlegend: false,
               margin: {
@@ -175,6 +206,8 @@ const ObjectivesChart = ({
                       ? `${totalCount}`
                       : values[highlightedIndex] || '', // Display total count in the center
                   font: {
+                    family:
+                      "'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif",
                     size: 24, // Adjust font size as needed
                     weight: 'bold',
                   },
@@ -204,13 +237,20 @@ const ObjectivesChart = ({
         <ul>
           {Object.entries(objectives).map(([item, count], index) => (
             <li
-              key={item}
               className={cx(
                 index === highlightedIndex ? 'active' : '',
                 customColors[index].replace('#', 'C'),
               )}
             >
-              {item}
+              <div
+                onClick={handleClick}
+                onKeyDown={() => {}}
+                tabIndex={index}
+                role="button"
+                key={item}
+              >
+                {item}
+              </div>
             </li>
           ))}
         </ul>

package/src/components/Blocks/DemoSitesExplorer/styles.less

@@ -12,6 +12,23 @@
 .ol-map {
   height: 600px;
   min-height: 600px;
+  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+
+  .no-results-message {
+    position: absolute;
+    z-index: 9;
+    top: 46%;
+    right: 28%;
+    bottom: 47%;
+    left: 27%;
+    padding: 0.5em 1em;
+    border: 4px solid #dfdfdf;
+    border-radius: 2px;
+    background-color: #0088e9;
+    color: #ffffff;
+    opacity: 0.6;
+    text-shadow: none;
+  }
 }
 
 #csepopup {
@@ -29,6 +46,7 @@
   }
 
   h3 {
+    color: #069;
     font-size: 1.4rem;
   }
 
@@ -411,9 +429,9 @@
     width: 22px;
     min-width: 22px;
     height: 22px;
-    /* dark green shade */
     border-radius: 50%;
-    background-color: #007265;
+    // background-color: #007265;
+    background-color: #0179cf;
     gap: 0.5em;
   }
 
@@ -448,6 +466,13 @@
 }
 
 .objectives-chart {
+  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+
+  .js-plotly-plot .plotly,
+  .js-plotly-plot .plotly div {
+    font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+  }
+
   &.fade-in {
     animation: fadeIn 1s ease-in forwards;
     opacity: 0;
@@ -493,6 +518,11 @@
     font-size: 0.8em;
     line-height: 1.5em;
 
+    &:hover {
+      cursor: pointer;
+      font-weight: 500;
+    }
+
     &.C007b6c::before {
       background-color: #007b6c;
     }

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

@@ -43,7 +43,7 @@ export function isValidURL(string) {
 
 export function centerAndResetMapZoom(map) {
   map.getView().animate({
-    zoom: 2.5,
+    zoom: 3.4,
     duration: 1000,
     center: ol.proj.transform([10, 54], 'EPSG:4326', 'EPSG:3857'),
   });