@eeacms/volto-marine-policy 2.0.6 → 2.0.8

package/CHANGELOG.md

@@ -4,6 +4,27 @@ 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.8](https://github.com/eea/volto-marine-policy/compare/2.0.7...2.0.8) - 16 April 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`c400842`](https://github.com/eea/volto-marine-policy/commit/c4008422b3480259c2a1101994c544b44e5b9002)]
+
+#### :hammer_and_wrench: Others
+
+- eslint [laszlocseh - [`ebdba1e`](https://github.com/eea/volto-marine-policy/commit/ebdba1e06ed02f3bf03442dfd578f2c1db5b1241)]
+- demo sites map viewer zoom improvements [laszlocseh - [`1680f64`](https://github.com/eea/volto-marine-policy/commit/1680f644f00e1bf62e1a5471aaf25a95d152ba05)]
+### [2.0.7](https://github.com/eea/volto-marine-policy/compare/2.0.6...2.0.7) - 15 April 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`cb0de80`](https://github.com/eea/volto-marine-policy/commit/cb0de8004429b3dbeee35a1a35c098bec9ee5f4c)]
+- style: Automated code fix [eea-jenkins - [`c91d18b`](https://github.com/eea/volto-marine-policy/commit/c91d18b6ee31c0a7406d41c69693f4cca87ffb2a)]
+
+#### :hammer_and_wrench: Others
+
+- pylint [laszlocseh - [`20a0b87`](https://github.com/eea/volto-marine-policy/commit/20a0b87ceda212c7cf9a6d2681e21dfe2546f881)]
+- improvements to demo sites map viewer [laszlocseh - [`501420b`](https://github.com/eea/volto-marine-policy/commit/501420b5c8373f6bc79f31947a2275921ccd9dcf)]
 ### [2.0.6](https://github.com/eea/volto-marine-policy/compare/2.0.5...2.0.6) - 14 April 2025
 
 #### :house: Internal changes

package/package.json

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

@@ -74,7 +74,7 @@ export default function DemoSitesExplorerView(props) {
       <Grid.Row>
         {cases.length ? (
           <Grid columns={12}>
-            <Grid.Column mobile={12} tablet={12} computer={12}>
+            <Grid.Column mobile={10} tablet={10} computer={10}>
               <DemoSitesMap
                 items={cases}
                 activeItems={activeItems}
@@ -85,6 +85,23 @@ export default function DemoSitesExplorerView(props) {
                 setMap={setMap}
               />
             </Grid.Column>
+            <Grid.Column mobile={2} tablet={2} computer={2}>
+              <div className="legend">
+                <div className="legend-row legend-subtitle">Legend</div>
+                <div className="legend-row">
+                  <div className="circle">
+                    <div className="dot-demosite"></div>
+                  </div>
+                  <div>Demo site</div>
+                </div>
+                <div className="legend-row">
+                  <div className="circle">
+                    <div className="dot-region"></div>
+                  </div>
+                  <div>Associated region</div>
+                </div>
+              </div>
+            </Grid.Column>
           </Grid>
         ) : null}
       </Grid.Row>

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

@@ -23,6 +23,21 @@ export function DemoSitesFilter(props) {
     map,
   } = props;
 
+  const customOrder = props?.customOrder || [];
+  const entries = Object.entries(filters?.[filterName] || {});
+  let sortedEntries = [];
+
+  if (customOrder.length > 0) {
+    sortedEntries = entries.sort(
+      (a, b) => customOrder.indexOf(a[0]) - customOrder.indexOf(b[0]),
+    );
+    // if(entries.length > 0 ) debugger;
+  } else {
+    sortedEntries = entries.sort((a, b) => a[1].localeCompare(b[1]));
+  }
+  const sortedData = Object.fromEntries(sortedEntries);
+  filters[filterName] = sortedData;
+
   const showInputs = (event) => {
     event.currentTarget.parentElement.classList.add('active');
   };
@@ -65,7 +80,7 @@ export function DemoSitesFilter(props) {
 
         <div className="filter-inputs">
           {Object.entries(filters?.[filterName] || {})
-            .sort((item1, item2) => item1[1].localeCompare(item2[1]))
+            // .sort((item1, item2) => item1[1].localeCompare(item2[1]))
             .map(([value, label], index) => (
               <label
                 htmlFor={label + index}
@@ -119,12 +134,19 @@ export function DemoSitesFilters(props) {
     <>
       {!hideFilters ? (
         <DemoSitesFilter
-          filterTitle="Objective"
+          filterTitle="Objective/Enabler"
           filterName="objective_filter"
           filters={filters}
           activeFilters={activeFilters}
           setActiveFilters={setActiveFilters}
           map={map}
+          customOrder={[
+            'Protect and restore marine and freshwater ecosystems',
+            'Prevent and eliminate pollution of waters',
+            'Carbon-neutral and circular blue economy',
+            'Digital twin of the ocean',
+            'Public mobilisation and engagement',
+          ]}
         />
       ) : (
         ''

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

@@ -9,7 +9,7 @@ import InfoOverlay from './InfoOverlay';
 import FeatureInteraction from './FeatureInteraction';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 
-import { centerAndResetMapZoom, getFeatures } from './utils';
+import { centerAndResetMapZoom, getFeatures, zoomMapToFeatures } from './utils';
 
 const styleCache = {};
 const MapContextGateway = ({ setMap }) => {
@@ -54,17 +54,20 @@ export default function DemoSitesMap(props) {
 
   const [clusterSource] = React.useState(
     new ol.source.Cluster({
-      distance: 19,
+      distance: 0,
       source: pointsSource,
     }),
   );
 
   React.useEffect(() => {
+    if (!map) return null;
+
     if (activeItems) {
       pointsSource.clear();
       pointsSource.addFeatures(getFeatures(activeItems));
+      hideFilters && zoomMapToFeatures(map, getFeatures(activeItems));
     }
-  }, [activeItems, pointsSource]);
+  }, [map, activeItems, pointsSource, hideFilters]);
 
   React.useEffect(() => {
     if (!map) return null;
@@ -134,7 +137,11 @@ export default function DemoSitesMap(props) {
             onClick={() => {
               // scrollToElement('search-input');
               onSelectedCase(null);
-              centerAndResetMapZoom(map);
+              if (hideFilters) {
+                zoomMapToFeatures(map, getFeatures(activeItems));
+              } else {
+                centerAndResetMapZoom(map);
+              }
               map.getInteractions().array_[9].getFeatures().clear();
             }}
           >
@@ -168,10 +175,10 @@ export default function DemoSitesMap(props) {
 const selectedClusterStyle = (selectedFeature) => {
   function _clusterStyle(feature, selectedFeature) {
     const size = feature.get('features').length;
-    let style = styleCache[size];
+    let clusterStyle = styleCache[size];
 
-    if (!style) {
-      style = new ol.style.Style({
+    if (!clusterStyle) {
+      clusterStyle = new ol.style.Style({
         image: new ol.style.Circle({
           radius: 12 + Math.min(Math.floor(size / 3), 10),
           stroke: new ol.style.Stroke({
@@ -189,10 +196,10 @@ const selectedClusterStyle = (selectedFeature) => {
           }),
         }),
       });
-      styleCache[size] = style;
+      styleCache[size] = clusterStyle;
     }
-
-    if (size === 1) {
+    // set size === 1 to enable clusterization
+    if (size) {
       let color = feature.values_.features[0].values_['color'];
       let width = feature.values_.features[0].values_['width'];
       let radius = feature.values_.features[0].values_['radius'];
@@ -212,7 +219,7 @@ const selectedClusterStyle = (selectedFeature) => {
         }),
       });
     } else {
-      return style;
+      return clusterStyle;
     }
   }
   return _clusterStyle;

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

@@ -39,13 +39,25 @@ export default function FeatureDisplay({ feature }) {
       {feature.project ? (
         <div>
           <span className="popup-title blue">Project: </span>
-          <span>{feature.project}</span>
+          <span>
+            {isValidURL(feature.project_link) ? (
+              <a
+                href={feature.project_link}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {feature.project}
+              </a>
+            ) : (
+              <span>{feature.project}</span>
+            )}
+          </span>
         </div>
       ) : (
         ''
       )}
 
-      {feature.project_link ? (
+      {/* {feature.project_link ? (
         <div>
           <span className="popup-title blue">Project link: </span>
           <span>
@@ -64,26 +76,30 @@ export default function FeatureDisplay({ feature }) {
         </div>
       ) : (
         ''
-      )}
+      )} */}
 
-      <div>
-        <span className="popup-title blue">Indicators</span>
-        <ul>
-          {feature.indicators.map((item, index) => {
-            return (
-              <li key={index}>
-                <a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href={item['path']}
-                >
-                  {item['title']}
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
+      {feature.indicators.length > 0 ? (
+        <div>
+          <span className="popup-title blue">Indicators</span>
+          <ul>
+            {feature.indicators.map((item, index) => {
+              return (
+                <li key={index}>
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={item['path']}
+                  >
+                    {item['title']}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ) : (
+        ''
+      )}
       {/* <div>
         <h4>Indicators</h4>
         <ul>

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

@@ -27,9 +27,13 @@ export default function InfoOverlay({
 
     const overlay = new ol.Overlay({
       element: document.getElementById('popup-overlay'),
-      positioning: 'bottom-center',
-      offset: [0, -10],
+      positioning: 'bottom-left',
+      offset: [0, 0],
       stopEvent: false,
+      // autoPan: true,
+      // autoPanAnimation: {
+      //     duration: 250,
+      // },
     });
     map.addOverlay(overlay);
 
@@ -39,8 +43,12 @@ export default function InfoOverlay({
       // const popupOverlay = overlay.element; // document.getElementById('popup-overlay');
 
       if (features.length) {
+        const coordinate = evt.coordinate;
+        overlay.setPosition(coordinate);
         setShowTooltip(true);
       } else {
+        // const coordinate = evt.coordinate
+        // overlay.setPosition(coordinate);
         // handle a click in an overlay popup
         if (evt.originalEvent.target.tagName === 'A') return;
         setShowTooltip(false);
@@ -64,7 +72,7 @@ export default function InfoOverlay({
     <div
       id="popup-overlay"
       style={{
-        position: 'absolute',
+        // position: 'absolute', // TODO POPUP
         zIndex: 1,
         visibility: showTooltip ? 'visible' : 'hidden',
       }}

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

@@ -16,9 +16,9 @@
 
 #csepopup {
   // width: 300px;
-  width: 100%;
+  // width: 100%;
   // height: 100%;
-  padding: 1em;
+  padding: 1em 1em 0 1em;
   // border: 1px solid black;
   // font-size: 14px;
   // line-height: initial;
@@ -37,7 +37,7 @@
   }
 
   div {
-    margin-bottom: 16px;
+    margin-bottom: 1em;
   }
 
   ul {
@@ -75,27 +75,35 @@
   }
 }
 
+.ol-viewport {
+  overflow: visible !important;
+}
+
 .ol-overlaycontainer {
   // width: 370px;
   // height: 100%;
+  z-index: 10 !important;
 
   .ol-overlay-container {
     // position: relative !important;
-    position: absolute !important;
-    right: 30px;
-    bottom: 30px;
-    display: block !important;
+    // TODO POPUP
+    // position: absolute !important;
+    // right: 30px;
+    // bottom: 30px;
+    // display: block !important;
     // width: 100%;
     // height: 100%;
-    background-color: #fefefe;
-
-    #popup-overlay {
-      position: relative !important;
-      display: flex;
-      width: 100%;
-      height: 100%;
-      align-items: center;
-    }
+    background-color: #fafafa;
+    // border: 1px solid #004B7F;
+
+    // TODO POPUP
+    // #popup-overlay {
+    //   position: relative !important;
+    //   display: flex;
+    //   width: 100%;
+    //   height: 100%;
+    //   align-items: center;
+    // }
   }
 }
 
@@ -132,7 +140,7 @@
 
     .ui.basic.button.facet-btn {
       position: relative !important;
-      z-index: 99999;
+      z-index: 9;
       display: inline-block;
       overflow: hidden;
       padding: 0.5em 0em;
@@ -154,7 +162,7 @@
 
       span {
         position: relative !important;
-        z-index: 99999;
+        z-index: 9;
         display: inline-block;
         overflow: hidden;
         padding: 0.5em 1em;
@@ -317,6 +325,10 @@
   }
 }
 
+.active-filter-list {
+  width: 100%;
+}
+
 .sui-search-box .search-input .terms-box .terms-box-left .search-icon img {
   fill: #004b7f !important;
 }
@@ -374,3 +386,56 @@
     background-color: rgba(0, 131, 224, 0.5);
   }
 }
+
+.legend {
+  position: absolute;
+  bottom: 2em;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5em;
+
+  .legend-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+
+  .legend-subtitle {
+    font-size: 1.3em;
+    font-weight: 500;
+  }
+
+  .circle {
+    position: relative;
+    width: 22px;
+    min-width: 22px;
+    height: 22px;
+    /* dark green shade */
+    border-radius: 50%;
+    background-color: #007265;
+    gap: 0.5em;
+  }
+
+  .dot-demosite {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: white;
+    transform: translate(-50%, -50%);
+  }
+
+  .dot-region {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 2px;
+    height: 2px;
+    border-radius: 50%;
+    background-color: white;
+    transform: translate(-50%, -50%);
+  }
+}

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

@@ -48,11 +48,11 @@ 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',
+    'Carbon-neutral and circular blue economy': '#f9eb8a',
     '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',
+    'Public mobilisation and engagement': '#9e83b6',
   };
   const width = {
     'Demo site': 6,
@@ -130,7 +130,7 @@ export function filterCases(cases, activeFilters, indicatorOnly) {
       flag_indicator = true;
     } else {
       let indicators = _case.properties.indicators?.map((item) => {
-        return item['id'].toString();
+        return '_' + item['id'].toString();
       });
 
       activeFilters.indicator_filter.forEach((filter) => {
@@ -188,9 +188,10 @@ export function getFilters(cases, indicatorOnly) {
     indicators.map((item) => {
       if (
         item['title'] &&
-        !_filters.indicator_filter.hasOwnProperty(item['id'])
+        item['title'] !== '0' &&
+        !_filters.indicator_filter.hasOwnProperty('_' + item['id'])
       ) {
-        _filters.indicator_filter[item['id']] = item['title'];
+        _filters.indicator_filter['_' + item['id']] = item['title'];
       }
       return [];
     });