@eeacms/volto-marine-policy 2.0.4 → 2.0.5

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.5](https://github.com/eea/volto-marine-policy/compare/2.0.4...2.0.5) - 11 April 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`3f5d2ae`](https://github.com/eea/volto-marine-policy/commit/3f5d2ae0b755628580ddb0976c113be5300f2bfc)]
+- style: Automated code fix [eea-jenkins - [`6b67afb`](https://github.com/eea/volto-marine-policy/commit/6b67afba55d6aeefc36af776e33833f40552f3c6)]
+- style: Automated code fix [eea-jenkins - [`532ca8a`](https://github.com/eea/volto-marine-policy/commit/532ca8afa6cc4a6f9e93a09bc107eef37328b326)]
+
+#### :hammer_and_wrench: Others
+
+- eslint [laszlocseh - [`188282d`](https://github.com/eea/volto-marine-policy/commit/188282d7d80201395f7025eb3540a2df8bf70275)]
+- demo sites map indicators filter [laszlocseh - [`7d97ac7`](https://github.com/eea/volto-marine-policy/commit/7d97ac772e308c0b18a49034067925fb72abecc0)]
+- updates to demo sites map [laszlocseh - [`ab5ac18`](https://github.com/eea/volto-marine-policy/commit/ab5ac1874f97ceeafce6c639ec033b9f7dde09ab)]
 ### [2.0.4](https://github.com/eea/volto-marine-policy/compare/2.0.3...2.0.4) - 8 April 2025
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "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

@@ -3,8 +3,7 @@ import { Grid } from 'semantic-ui-react'; // Dropdown,
 import { addAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import DemoSitesMap from './DemoSitesMap';
-import { ActiveFilters, DemoSitesFilters, SearchBox } from './DemoSitesFilters';
-// import DemoSitesList from './DemoSitesListing';
+import { ActiveFilters, DemoSitesFilters } from './DemoSitesFilters';
 
 import { filterCases, getFilters } from './utils';
 import { useCases } from './hooks';
@@ -19,7 +18,6 @@ export default function DemoSitesExplorerView(props) {
   let cases = useCases(addAppURL(cases_url));
   const { demoSitesIds } = props; // case studies from measure view
   const [selectedCase, onSelectedCase] = React.useState(null);
-  const [searchInput, setSearchInput] = React.useState('');
   const hideFilters = demoSitesIds ? true : false;
 
   const [activeFilters, setActiveFilters] = React.useState({
@@ -46,33 +44,15 @@ export default function DemoSitesExplorerView(props) {
   ]);
 
   React.useEffect(() => {
-    let activeItems = filterCases(
-      cases,
-      activeFilters,
-      demoSitesIds,
-      searchInput,
-    );
+    let activeItems = filterCases(cases, activeFilters, demoSitesIds);
 
     setActiveItems(activeItems);
-  }, [demoSitesIds, activeFilters, cases, searchInput]);
+  }, [demoSitesIds, activeFilters, cases]);
 
   if (__SERVER__) return '';
 
   return (
     <div className="searchlib-block">
-      <Grid.Row>
-        {hideFilters ? null : (
-          <SearchBox
-            filters={filters}
-            activeFilters={activeFilters}
-            setActiveFilters={setActiveFilters}
-            searchInput={searchInput}
-            setSearchInput={setSearchInput}
-            onSelectedCase={onSelectedCase}
-            map={map}
-          />
-        )}
-      </Grid.Row>
       <Grid.Row>
         {hideFilters ? null : (
           <ActiveFilters
@@ -102,7 +82,6 @@ export default function DemoSitesExplorerView(props) {
                 hideFilters={hideFilters}
                 selectedCase={selectedCase}
                 onSelectedCase={onSelectedCase}
-                searchInput={searchInput}
                 map={map}
                 setMap={setMap}
               />

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { centerAndResetMapZoom, scrollToElement } from './utils';
+import { centerAndResetMapZoom } from './utils';
 
 const normalizeSearchInput = (searchInput) => {
   let normInput = searchInput
@@ -87,7 +87,7 @@ export function DemoSitesFilter(props) {
                       });
                     }
                     setActiveFilters(temp);
-                    scrollToElement('search-input');
+                    // scrollToElement('search-input');
                     centerAndResetMapZoom(map);
                   }}
                 />
@@ -181,7 +181,7 @@ export function SearchBox(props) {
                 // const popupOverlay = document.getElementById('popup-overlay');
                 // popupOverlay.style.visibility = 'hidden';
                 setSearchInput(searchInput);
-                scrollToElement('search-input');
+                // scrollToElement('search-input');
                 centerAndResetMapZoom(map);
               }}
             ></input>
@@ -199,7 +199,7 @@ export function SearchBox(props) {
                         searchInputElement.value = '';
                         setSearchInput('');
                         setShowClearButton(false);
-                        scrollToElement('search-input');
+                        // scrollToElement('search-input');
                         centerAndResetMapZoom(map);
                       }}
                     ></i>
@@ -219,7 +219,7 @@ export function SearchBox(props) {
                   );
 
                   setSearchInput(searchInputVal);
-                  scrollToElement('search-input');
+                  // scrollToElement('search-input');
                   centerAndResetMapZoom(map);
                 }}
                 onKeyDown={() => {}}
@@ -261,7 +261,7 @@ export function ActiveFilters(props) {
       project_filter: [],
       country_filter: [],
     });
-    scrollToElement('search-input');
+    // scrollToElement('search-input');
   };
 
   const removeFilter = (filterName, filterCode) => {
@@ -310,7 +310,7 @@ export function ActiveFilters(props) {
                       onKeyPress={() => {}}
                       onClick={() => {
                         removeFilter('objective_filter', filterCode);
-                        scrollToElement('search-input');
+                        // scrollToElement('search-input');
                       }}
                       role="button"
                       className="close icon"
@@ -335,7 +335,7 @@ export function ActiveFilters(props) {
                       onKeyPress={() => {}}
                       onClick={() => {
                         removeFilter('indicator_filter', filterCode);
-                        scrollToElement('search-input');
+                        // scrollToElement('search-input');
                       }}
                       role="button"
                       className="close icon"
@@ -360,7 +360,7 @@ export function ActiveFilters(props) {
                       onKeyPress={() => {}}
                       onClick={() => {
                         removeFilter('project_filter', filterCode);
-                        scrollToElement('search-input');
+                        // scrollToElement('search-input');
                       }}
                       role="button"
                       className="close icon"
@@ -385,7 +385,7 @@ export function ActiveFilters(props) {
                       onKeyPress={() => {}}
                       onClick={() => {
                         removeFilter('country_filter', filterCode);
-                        scrollToElement('search-input');
+                        // scrollToElement('search-input');
                       }}
                       role="button"
                       className="close icon"

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

@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  centerAndResetMapZoom,
-  scrollToElement,
-  zoomMapToFeatures,
-  isValidURL,
-} from './utils';
+import { centerAndResetMapZoom, zoomMapToFeatures, isValidURL } from './utils';
 
 const showPageNr = (pageNr, currentPage, numberOfPages) => {
   // show first 5 pages
@@ -157,7 +152,7 @@ export default function DemoSitesList(props) {
                       onKeyDown={() => {}}
                       onClick={() => {
                         // scroll to the map
-                        scrollToElement('search-input');
+                        // scrollToElement('search-input');
                         // reset map zoom
                         onSelectedCase(null);
                         centerAndResetMapZoom(map);
@@ -274,7 +269,7 @@ export default function DemoSitesList(props) {
                               .array_[9].getFeatures()
                               .clear();
                             // scroll to the map
-                            scrollToElement('ol-map-container');
+                            // scrollToElement('ol-map-container');
 
                             zoomMapToFeatures(map, [item], 5000);
                             onSelectedCase(item.values_);

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

@@ -7,10 +7,9 @@ import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 
 import InfoOverlay from './InfoOverlay';
 import FeatureInteraction from './FeatureInteraction';
-import DemoSitesList from './DemoSitesListing';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 
-import { centerAndResetMapZoom, getFeatures, scrollToElement } from './utils';
+import { centerAndResetMapZoom, getFeatures } from './utils';
 
 const styleCache = {};
 const MapContextGateway = ({ setMap }) => {
@@ -28,7 +27,6 @@ export default function DemoSitesMap(props) {
     hideFilters,
     selectedCase,
     onSelectedCase,
-    searchInput,
     map,
     setMap,
   } = props;
@@ -135,7 +133,7 @@ export default function DemoSitesMap(props) {
                 String(resetMapButtonClass),
               )}
               onClick={() => {
-                scrollToElement('search-input');
+                // scrollToElement('search-input');
                 onSelectedCase(null);
                 centerAndResetMapZoom(map);
                 map.getInteractions().array_[9].getFeatures().clear();
@@ -165,22 +163,12 @@ export default function DemoSitesMap(props) {
           <MapContextGateway setMap={setMap} />
         </Layers>
       </MapWithSelection>
-      {hideFilters ? null : (
-        <DemoSitesList
-          map={map}
-          activeItems={activeItems}
-          selectedCase={selectedCase}
-          onSelectedCase={onSelectedCase}
-          pointsSource={pointsSource}
-          searchInput={searchInput}
-        />
-      )}
     </div>
   ) : null;
 }
 
 const selectedClusterStyle = (selectedFeature) => {
-  function _clusterStyle(feature) {
+  function _clusterStyle(feature, selectedFeature) {
     const size = feature.get('features').length;
     let style = styleCache[size];
 
@@ -193,7 +181,7 @@ const selectedClusterStyle = (selectedFeature) => {
           }),
           fill: new ol.style.Fill({
             // 309ebc blue 3 + green 3 mix
-            color: '#309ebc', // #006BB8 #309ebc
+            color: '#006BB8', // #006BB8 #309ebc
           }),
         }),
         text: new ol.style.Text({
@@ -207,18 +195,21 @@ const selectedClusterStyle = (selectedFeature) => {
     }
 
     if (size === 1) {
-      // let color = feature.values_.features[0].values_['color'];
-      let color = '#50B0A4'; // #0083E0 #50B0A4
+      let color = feature.values_.features[0].values_['color'];
+      let width = feature.values_.features[0].values_['width'];
+      let radius = feature.values_.features[0].values_['radius'];
+      // console.log(color)
+      // let color = '#0083E0'; // #0083E0 #50B0A4
 
       return new ol.style.Style({
         image: new ol.style.Circle({
-          radius: 6,
+          radius: radius,
           fill: new ol.style.Fill({
             color: '#fff',
           }),
           stroke: new ol.style.Stroke({
             color: color,
-            width: 6,
+            width: width,
           }),
         }),
       });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { isValidURL } from './utils';
+import { isValidURL, truncateText } from './utils';
 
 export default function FeatureDisplay({ feature }) {
   return feature ? (
@@ -7,7 +7,7 @@ export default function FeatureDisplay({ feature }) {
       <h3>
         <strong>
           <a target="_blank" rel="noopener noreferrer" href={feature.path}>
-            {feature.title}
+            {truncateText(feature.title)}
           </a>
         </strong>
       </h3>
@@ -66,10 +66,10 @@ export default function FeatureDisplay({ feature }) {
         ''
       )}
 
-      {/* <div>
-        <h4>NWRMs implemented</h4>
+      <div>
+        <h4>Indicators</h4>
         <ul>
-          {feature.nwrms_implemented.map((item, index) => {
+          {feature.indicators.map((item, index) => {
             return (
               <li key={index}>
                 <a
@@ -83,9 +83,9 @@ export default function FeatureDisplay({ feature }) {
             );
           })}
         </ul>
-      </div> */}
+      </div>
       {/* <div>
-        <h4>Sectors </h4>
+        <h4>Indicators</h4>
         <ul>
           {feature.sectors.map((item, index) => {
             return <li key={index}>{item}</li>;

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 { scrollToElement, zoomMapToFeatures } from './utils';
+import { zoomMapToFeatures } from './utils';
 
 export const useStyles = () => {
   const selected = React.useMemo(
@@ -65,7 +65,7 @@ export default function FeatureInteraction({
             window.location.href = url;
           }
           onFeatureSelect(selectedFeature);
-          scrollToElement('ol-map-container');
+          // scrollToElement('ol-map-container');
           // map.getView().animate({
           //   duration: 10,
           //   center: selectedFeature.geometry.flatCoordinates,

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

@@ -87,7 +87,7 @@
     display: block !important;
     // width: 100%;
     // height: 100%;
-    background-color: #dae8f4;
+    background-color: #fefefe;
 
     #popup-overlay {
       position: relative !important;

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

@@ -1,5 +1,12 @@
 import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 
+export const truncateText = (str, max = 50) => {
+  if (str.length <= max) {
+    return str;
+  }
+  return str.substring(0, max) + '...';
+};
+
 export function isValidURL(string) {
   try {
     new URL(string);
@@ -40,6 +47,22 @@ export function zoomMapToFeatures(map, features, threshold = 500) {
 
 export function getFeatures(cases) {
   const Feature = ol.ol.Feature;
+  const colors = {
+    'Carbon-neutral and circular blue economy': '#004b7f',
+    'Digital twin of the ocean': '#004b7f',
+    'Prevent and eliminate pollution of waters': '#fdaf20',
+    'Protect and restore marine and freshwater ecosystems': '#007b6c',
+    'Public mobilisation and engagement': '#004b7f',
+  };
+  const width = {
+    'Demo site': 6,
+    'Associated region': 8,
+  };
+
+  const radius = {
+    'Demo site': 6,
+    'Associated region': 5,
+  };
 
   return cases.map((c, index) => {
     const {
@@ -65,7 +88,9 @@ export function getFeatures(cases) {
         description: c.properties.description,
         index: index,
         path: c.properties.path,
-        color: c.properties.nwrm_type === 'Light' ? '#50B0A4' : '#0083E0',
+        color: colors[c.properties.objective] || '#B83230',
+        width: width[c.properties.type_is_region],
+        radius: radius[c.properties.type_is_region],
       },
       false,
     );
@@ -73,53 +98,38 @@ export function getFeatures(cases) {
   });
 }
 
-export function filterCases(cases, activeFilters, demoSitesIds, searchInput) {
+export function filterCases(cases, activeFilters, demoSitesIds) {
   const data = cases.filter((_case) => {
-    let flag_searchInput = false;
     let flag_objective = false;
-    // let flag_indicator = false;
+    let flag_indicator = false;
     let flag_project = false;
     let flag_country = false;
     let flag_case = demoSitesIds
       ? demoSitesIds.includes(_case.properties.url.split('/').pop())
       : true;
 
-    if (!searchInput) {
-      flag_searchInput = true;
-    } else {
-      if (_case.properties.title.toLowerCase().match(searchInput)) {
-        flag_searchInput = true;
-        // } else if (
-        //   _case.properties.description.toLowerCase().match(searchInput)
-        // ) {
-        //   flag_searchInput = true;
-      }
-    }
-
     // debugger;
     if (!activeFilters.objective_filter.length) {
       flag_objective = true;
     } else {
-      let objective = _case.properties.objective?.map((item) => {
-        return item['id'].toString();
-      });
+      let objective = _case.properties.objective;
 
       activeFilters.objective_filter.forEach((filter) => {
-        if (objective?.includes(filter)) flag_objective = true;
+        if (objective === filter) flag_objective = true;
       });
     }
 
-    // if (!activeFilters.sectors.length) {
-    //   flag_sectors = true;
-    // } else {
-    //   let sectors = _case.properties.sectors?.map((item) => {
-    //     return item.toString();
-    //   });
+    if (!activeFilters.indicator_filter.length) {
+      flag_indicator = true;
+    } else {
+      let indicators = _case.properties.indicators?.map((item) => {
+        return item['id'].toString();
+      });
 
-    //   activeFilters.sectors.forEach((filter) => {
-    //     if (sectors?.includes(filter)) flag_sectors = true;
-    //   });
-    // }
+      activeFilters.indicator_filter.forEach((filter) => {
+        if (indicators?.includes(filter)) flag_indicator = true;
+      });
+    }
 
     if (!activeFilters.project_filter.length) {
       flag_project = true;
@@ -145,9 +155,9 @@ export function filterCases(cases, activeFilters, demoSitesIds, searchInput) {
 
     return flag_case &&
       flag_objective &&
+      flag_indicator &&
       flag_country &&
-      flag_project &&
-      flag_searchInput
+      flag_project
       ? _case
       : false;
   });
@@ -166,23 +176,31 @@ export function getFilters(cases) {
   for (let key of Object.keys(cases)) {
     const _case = cases[key];
     // debugger;
-    //   let nwrms_implemented = _case.properties.measures;
-    //   nwrms_implemented.map((item) => {
-    //     if (!_filters.nwrms_implemented.hasOwnProperty(item['id'])) {
-    //       _filters.nwrms_implemented[item['id']] = item['title'];
-    //     }
-    //     return [];
-    //   });
 
-    let project = _case.properties.project;
+    let indicators = _case.properties.indicators;
+    indicators.map((item) => {
+      if (
+        item['title'] &&
+        !_filters.indicator_filter.hasOwnProperty(item['id'])
+      ) {
+        _filters.indicator_filter[item['id']] = item['title'];
+      }
+      return [];
+    });
 
-    if (!_filters.project_filter.hasOwnProperty(project)) {
+    let objective = _case.properties.objective;
+    if (objective && !_filters.objective_filter.hasOwnProperty(objective)) {
+      _filters.objective_filter[objective] = objective;
+    }
+
+    let project = _case.properties.project;
+    if (project && !_filters.project_filter.hasOwnProperty(project)) {
       _filters.project_filter[project] = project;
     }
 
-    let countries = _case.properties.country;
+    let countries = _case.properties.country || [];
     countries.map((item) => {
-      if (!_filters.country_filter.hasOwnProperty(item)) {
+      if (item && !_filters.country_filter.hasOwnProperty(item)) {
         _filters.country_filter[item] = item;
       }
       return [];