@eeacms/volto-marine-policy 2.0.6 → 2.0.7

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.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.7",
   "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

@@ -54,7 +54,7 @@ export default function DemoSitesMap(props) {
 
   const [clusterSource] = React.useState(
     new ol.source.Cluster({
-      distance: 19,
+      distance: 0,
       source: pointsSource,
     }),
   );
@@ -168,10 +168,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 +189,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 +212,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,7 +76,7 @@ export default function FeatureDisplay({ feature }) {
         </div>
       ) : (
         ''
-      )}
+      )} */}
 
       <div>
         <span className="popup-title blue">Indicators</span>

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,9 @@ export function getFilters(cases, indicatorOnly) {
     indicators.map((item) => {
       if (
         item['title'] &&
-        !_filters.indicator_filter.hasOwnProperty(item['id'])
+        !_filters.indicator_filter.hasOwnProperty('_' + item['id'])
       ) {
-        _filters.indicator_filter[item['id']] = item['title'];
+        _filters.indicator_filter['_' + item['id']] = item['title'];
       }
       return [];
     });