@eeacms/volto-marine-policy 2.0.5 → 2.0.6

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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.6](https://github.com/eea/volto-marine-policy/compare/2.0.5...2.0.6) - 14 April 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`ae829bf`](https://github.com/eea/volto-marine-policy/commit/ae829bf49e357dc02128ff0dc4227e146ed06c0d)]
+
+#### :hammer_and_wrench: Others
+
+- fix eslint [laszlocseh - [`6e84248`](https://github.com/eea/volto-marine-policy/commit/6e8424833cbe25badb6bc4ba040048422878895f)]
+- updates to demo sites map viewer [laszlocseh - [`19dc3da`](https://github.com/eea/volto-marine-policy/commit/19dc3dac8ac9ef8f91961d0ecf7878cf7b9660a4)]
 ### [2.0.5](https://github.com/eea/volto-marine-policy/compare/2.0.4...2.0.5) - 11 April 2025
 
 #### :house: Internal changes

package/package.json

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

@@ -14,11 +14,12 @@ export default function DemoSitesExplorerView(props) {
   const cases_url = config.settings.prefixPath
     ? '/@@demo-sites-map.arcgis.json'
     : '/marine/@@demo-sites-map.arcgis.json';
-
   let cases = useCases(addAppURL(cases_url));
-  const { demoSitesIds } = props; // case studies from measure view
   const [selectedCase, onSelectedCase] = React.useState(null);
-  const hideFilters = demoSitesIds ? true : false;
+
+  const { properties } = props;
+  const hideFilters = properties['@type'] === 'indicator_mo' ? true : false;
+  const indicatorOnly = hideFilters ? properties['title'] : null;
 
   const [activeFilters, setActiveFilters] = React.useState({
     objective_filter: [],
@@ -32,7 +33,7 @@ export default function DemoSitesExplorerView(props) {
   const [map, setMap] = React.useState();
 
   React.useEffect(() => {
-    const _filters = getFilters(cases);
+    const _filters = getFilters(cases, indicatorOnly);
     setFilters(_filters);
   }, [
     cases,
@@ -41,36 +42,34 @@ export default function DemoSitesExplorerView(props) {
     activeFilters.project_filter,
     activeFilters.country_filter,
     activeItems.length,
+    indicatorOnly,
   ]);
 
   React.useEffect(() => {
-    let activeItems = filterCases(cases, activeFilters, demoSitesIds);
+    let activeItems = filterCases(cases, activeFilters, indicatorOnly);
 
     setActiveItems(activeItems);
-  }, [demoSitesIds, activeFilters, cases]);
+  }, [activeFilters, cases, indicatorOnly]);
 
   if (__SERVER__) return '';
 
   return (
     <div className="searchlib-block">
       <Grid.Row>
-        {hideFilters ? null : (
-          <ActiveFilters
-            filters={filters}
-            activeFilters={activeFilters}
-            setActiveFilters={setActiveFilters}
-          />
-        )}
+        <ActiveFilters
+          filters={filters}
+          activeFilters={activeFilters}
+          setActiveFilters={setActiveFilters}
+        />
       </Grid.Row>
       <Grid.Row stretched={true} id="cse-filter">
-        {hideFilters ? null : (
-          <DemoSitesFilters
-            filters={filters}
-            activeFilters={activeFilters}
-            setActiveFilters={setActiveFilters}
-            map={map}
-          />
-        )}
+        <DemoSitesFilters
+          filters={filters}
+          activeFilters={activeFilters}
+          hideFilters={hideFilters}
+          setActiveFilters={setActiveFilters}
+          map={map}
+        />
       </Grid.Row>
       <Grid.Row>
         {cases.length ? (

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

@@ -101,7 +101,7 @@ export function DemoSitesFilter(props) {
 }
 
 export function DemoSitesFilters(props) {
-  const { filters, activeFilters, setActiveFilters, map } = props;
+  const { filters, activeFilters, hideFilters, setActiveFilters, map } = props;
 
   React.useEffect(() => {
     window.addEventListener('click', (event) => {
@@ -117,24 +117,30 @@ export function DemoSitesFilters(props) {
 
   return (
     <>
-      <DemoSitesFilter
-        filterTitle="Objective"
-        filterName="objective_filter"
-        filters={filters}
-        activeFilters={activeFilters}
-        setActiveFilters={setActiveFilters}
-        map={map}
-      />
-
-      <DemoSitesFilter
-        filterTitle="Indicator"
-        filterName="indicator_filter"
-        filters={filters}
-        activeFilters={activeFilters}
-        setActiveFilters={setActiveFilters}
-        map={map}
-      />
-
+      {!hideFilters ? (
+        <DemoSitesFilter
+          filterTitle="Objective"
+          filterName="objective_filter"
+          filters={filters}
+          activeFilters={activeFilters}
+          setActiveFilters={setActiveFilters}
+          map={map}
+        />
+      ) : (
+        ''
+      )}
+      {!hideFilters ? (
+        <DemoSitesFilter
+          filterTitle="Indicator"
+          filterName="indicator_filter"
+          filters={filters}
+          activeFilters={activeFilters}
+          setActiveFilters={setActiveFilters}
+          map={map}
+        />
+      ) : (
+        ''
+      )}
       <DemoSitesFilter
         filterTitle="Project"
         filterName="project_filter"
@@ -143,7 +149,6 @@ export function DemoSitesFilters(props) {
         setActiveFilters={setActiveFilters}
         map={map}
       />
-
       <DemoSitesFilter
         filterTitle="Country"
         filterName="country_filter"

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

@@ -126,23 +126,21 @@ export default function DemoSitesMap(props) {
       >
         <Controls attribution={false} />
         <Layers>
-          {hideFilters ? null : (
-            <button
-              className={cx(
-                'reset-map-button ui button secondary',
-                String(resetMapButtonClass),
-              )}
-              onClick={() => {
-                // scrollToElement('search-input');
-                onSelectedCase(null);
-                centerAndResetMapZoom(map);
-                map.getInteractions().array_[9].getFeatures().clear();
-              }}
-            >
-              <span className="result-info-title">Reset map</span>
-              <i className="icon ri-map-2-line"></i>
-            </button>
-          )}
+          <button
+            className={cx(
+              'reset-map-button ui button secondary',
+              String(resetMapButtonClass),
+            )}
+            onClick={() => {
+              // scrollToElement('search-input');
+              onSelectedCase(null);
+              centerAndResetMapZoom(map);
+              map.getInteractions().array_[9].getFeatures().clear();
+            }}
+          >
+            <span className="result-info-title">Reset map</span>
+            <i className="icon ri-map-2-line"></i>
+          </button>
           <InfoOverlay
             selectedFeature={selectedCase}
             onFeatureSelect={onSelectedCase}
@@ -151,8 +149,8 @@ export default function DemoSitesMap(props) {
           />
           <FeatureInteraction
             onFeatureSelect={onSelectedCase}
-            hideFilters={hideFilters}
-            selectedCase={selectedCase}
+            // hideFilters={hideFilters}
+            // selectedCase={selectedCase}
           />
           <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
           <Layer.Vector

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

@@ -67,7 +67,7 @@ export default function FeatureDisplay({ feature }) {
       )}
 
       <div>
-        <h4>Indicators</h4>
+        <span className="popup-title blue">Indicators</span>
         <ul>
           {feature.indicators.map((item, index) => {
             return (

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

@@ -35,18 +35,14 @@ export const useStyles = () => {
   return { selected, selectStyle };
 };
 
-export default function FeatureInteraction({
-  onFeatureSelect,
-  hideFilters,
-  selectedCase,
-}) {
+export default function FeatureInteraction({ onFeatureSelect }) {
   // console.log('featureinteraction', selectedCase);
   const { map } = useMapContext();
   const { selectStyle } = useStyles();
 
   const select = new ol.interaction.Select({
     condition: ol.condition.click,
-    style: hideFilters ? null : selectStyle,
+    style: selectStyle,
   });
 
   React.useEffect(() => {
@@ -59,11 +55,10 @@ export default function FeatureInteraction({
         const subfeatures = feature.values_.features;
         if (subfeatures.length === 1) {
           const selectedFeature = subfeatures[0].values_;
-          if (hideFilters) {
-            const url = window.location.origin + selectedFeature.path;
-            // window.open(url);
-            window.location.href = url;
-          }
+          // if (hideFilters) {
+          //   const url = window.location.origin + selectedFeature.path;
+          //   window.location.href = url;
+          // }
           onFeatureSelect(selectedFeature);
           // scrollToElement('ol-map-container');
           // map.getView().animate({
@@ -89,7 +84,7 @@ export default function FeatureInteraction({
 
     return () => map.removeInteraction(select);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [map, selectStyle, onFeatureSelect, hideFilters]);
+  }, [map, selectStyle, onFeatureSelect]);
 
   return null;
 }

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

@@ -8,7 +8,7 @@ export default function InfoOverlay({
   selectedFeature,
   onFeatureSelect,
   layerId,
-  hideFilters,
+  // hideFilters,
 }) {
   const { map } = useMapContext();
   const [tooltip, setTooltipRef] = React.useState();
@@ -38,10 +38,7 @@ export default function InfoOverlay({
       const features = target.getFeaturesAtPixel(pixel);
       // const popupOverlay = overlay.element; // document.getElementById('popup-overlay');
 
-      if (
-        features.length &&
-        !hideFilters // && !isCluster(features)
-      ) {
+      if (features.length) {
         setShowTooltip(true);
       } else {
         // handle a click in an overlay popup
@@ -58,7 +55,7 @@ export default function InfoOverlay({
       map.un('click', handler);
       map.removeOverlay(overlay);
     };
-  }, [map, tooltip, onFeatureSelect, hideFilters]); //
+  }, [map, tooltip, onFeatureSelect]); //
 
   const [isClient, setIsClient] = React.useState(false);
   React.useEffect(() => setIsClient(true), []);

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

@@ -98,15 +98,22 @@ export function getFeatures(cases) {
   });
 }
 
-export function filterCases(cases, activeFilters, demoSitesIds) {
+export function filterCases(cases, activeFilters, indicatorOnly) {
   const data = cases.filter((_case) => {
     let flag_objective = 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;
+    let flag_indicatorOnly = false;
+
+    if (indicatorOnly) {
+      let indicators = _case.properties.indicators?.map((item) => {
+        return item['title'].toString();
+      });
+      if (indicators?.includes(indicatorOnly)) flag_indicatorOnly = true;
+    } else {
+      flag_indicatorOnly = true;
+    }
 
     // debugger;
     if (!activeFilters.objective_filter.length) {
@@ -153,7 +160,7 @@ export function filterCases(cases, activeFilters, demoSitesIds) {
       });
     }
 
-    return flag_case &&
+    return flag_indicatorOnly &&
       flag_objective &&
       flag_indicator &&
       flag_country &&
@@ -165,7 +172,7 @@ export function filterCases(cases, activeFilters, demoSitesIds) {
   return data;
 }
 
-export function getFilters(cases) {
+export function getFilters(cases, indicatorOnly) {
   let _filters = {
     objective_filter: {},
     indicator_filter: {},
@@ -195,13 +202,33 @@ export function getFilters(cases) {
 
     let project = _case.properties.project;
     if (project && !_filters.project_filter.hasOwnProperty(project)) {
-      _filters.project_filter[project] = project;
+      if (!indicatorOnly) {
+        _filters.project_filter[project] = project;
+      } else {
+        let indicators = _case.properties.indicators?.map((item) => {
+          return item['title'].toString();
+        });
+        if (indicators?.includes(indicatorOnly)) {
+          _filters.project_filter[project] = project;
+        }
+      }
+      // _filters.project_filter[project] = project;
     }
 
     let countries = _case.properties.country || [];
     countries.map((item) => {
       if (item && !_filters.country_filter.hasOwnProperty(item)) {
-        _filters.country_filter[item] = item;
+        if (!indicatorOnly) {
+          _filters.country_filter[item] = item;
+        } else {
+          let indicators = _case.properties.indicators?.map((item) => {
+            return item['title'].toString();
+          });
+          if (indicators?.includes(indicatorOnly)) {
+            _filters.country_filter[item] = item;
+          }
+        }
+        // _filters.country_filter[item] = item;
       }
       return [];
     });