@eeacms/volto-marine-policy 2.0.7 → 2.0.9

package/CHANGELOG.md

@@ -4,6 +4,42 @@ 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.9](https://github.com/eea/volto-marine-policy/compare/2.0.8...2.0.9) - 7 May 2025
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-searchlib@2.0.16 [EEA Jenkins - [`9d425b4`](https://github.com/eea/volto-marine-policy/commit/9d425b44fa813cf7d08d95d36af6c0f01d0e52ce)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`1c3cbdc`](https://github.com/eea/volto-marine-policy/commit/1c3cbdcc74127d45e46db9ae4fd1ac3b237ad32c)]
+- style: Automated code fix [eea-jenkins - [`b00b251`](https://github.com/eea/volto-marine-policy/commit/b00b2515e54b8ffdbc51bf301f0b0bb232b83efe)]
+- style: Automated code fix [eea-jenkins - [`e02c515`](https://github.com/eea/volto-marine-policy/commit/e02c5156ac34e4cf2fef61a27dfe64d60aad97af)]
+- style: Automated code fix [eea-jenkins - [`678b9bf`](https://github.com/eea/volto-marine-policy/commit/678b9bf2b8f83f9b3a6facaa42f5851a013462ad)]
+- style: Automated code fix [eea-jenkins - [`b1cccfb`](https://github.com/eea/volto-marine-policy/commit/b1cccfbd674890392948ad5227bfe334f55a2721)]
+
+#### :hammer_and_wrench: Others
+
+- small fixes demmo sites map [laszlocseh - [`f83d070`](https://github.com/eea/volto-marine-policy/commit/f83d070d0b1c7a5bdf1136eb542782477c9266b0)]
+- update objectives [laszlocseh - [`0c09eb1`](https://github.com/eea/volto-marine-policy/commit/0c09eb1b093ffba34deafa079127175629f3f2b9)]
+- fix eslint [laszlocseh - [`128fbb0`](https://github.com/eea/volto-marine-policy/commit/128fbb04277cc11bc6406df8cc815ea4a41291d0)]
+- fix eslint [laszlocseh - [`68e7168`](https://github.com/eea/volto-marine-policy/commit/68e7168d6322cb07fe7df7c2376a26e297cb015f)]
+- fix eslint [laszlocseh - [`1be214a`](https://github.com/eea/volto-marine-policy/commit/1be214accdac3657f156691f09c149f9f678d344)]
+- fix eslint [laszlocseh - [`fbed39c`](https://github.com/eea/volto-marine-policy/commit/fbed39c59d7841234cd8ffe699a9e84766a501bc)]
+- fix eslint [laszlocseh - [`ed3a2d2`](https://github.com/eea/volto-marine-policy/commit/ed3a2d26194d18aed50b1781e2d84a3d1482b0ab)]
+- fix eslint [laszlocseh - [`15805ce`](https://github.com/eea/volto-marine-policy/commit/15805ce9adb0ca66a99368a432d54d74fcbc8077)]
+- WiP demo sites map [laszlocseh - [`ca84585`](https://github.com/eea/volto-marine-policy/commit/ca84585f692b03c7011d46393fa5b937fa985e4d)]
+- WiP demo sites map [laszlocseh - [`b51ca84`](https://github.com/eea/volto-marine-policy/commit/b51ca842dba4fe0700100b5a6328d1bd4b962acb)]
+### [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -36,13 +36,14 @@
     "@eeacms/volto-embed": "*",
     "@eeacms/volto-globalsearch": "2.0.11",
     "@eeacms/volto-openlayers-map": "0.3.2",
-    "@eeacms/volto-searchlib": "2.0.15",
+    "@eeacms/volto-searchlib": "2.0.16",
     "@eeacms/volto-tabs-block": "*",
     "axios": "0.30.0",
     "d3-array": "^2.12.1",
     "jquery": "3.6.0",
     "razzle-plugin-scss": "^4.2.18",
     "react-lazy-load-image-component": "^1.4.0",
+    "react-plotly.js": "2.6.0",
     "react-slick": "^0.24.0",
     "slick-carousel": "^1.8.1"
   },

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

@@ -2,9 +2,11 @@ import React from 'react';
 import { Grid } from 'semantic-ui-react'; // Dropdown,
 import { addAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
+
 import DemoSitesMap from './DemoSitesMap';
 import { ActiveFilters, DemoSitesFilters } from './DemoSitesFilters';
-
+import ObjectivesChart from './ObjectivesChart';
 import { filterCases, getFilters } from './utils';
 import { useCases } from './hooks';
 
@@ -23,6 +25,7 @@ export default function DemoSitesExplorerView(props) {
 
   const [activeFilters, setActiveFilters] = React.useState({
     objective_filter: [],
+    target_filter: [],
     indicator_filter: [],
     project_filter: [],
     country_filter: [],
@@ -31,6 +34,7 @@ export default function DemoSitesExplorerView(props) {
   const [activeItems, setActiveItems] = React.useState(cases);
   const [filters, setFilters] = React.useState([]);
   const [map, setMap] = React.useState();
+  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
 
   React.useEffect(() => {
     const _filters = getFilters(cases, indicatorOnly);
@@ -38,6 +42,7 @@ export default function DemoSitesExplorerView(props) {
   }, [
     cases,
     activeFilters.objective_filter,
+    activeFilters.target_filter,
     activeFilters.indicator_filter,
     activeFilters.project_filter,
     activeFilters.country_filter,
@@ -74,33 +79,62 @@ export default function DemoSitesExplorerView(props) {
       <Grid.Row>
         {cases.length ? (
           <Grid columns={12}>
-            <Grid.Column mobile={10} tablet={10} computer={10}>
+            <Grid.Column mobile={8} tablet={8} computer={8}>
               <DemoSitesMap
                 items={cases}
                 activeItems={activeItems}
+                setActiveFilters={setActiveFilters}
                 hideFilters={hideFilters}
                 selectedCase={selectedCase}
                 onSelectedCase={onSelectedCase}
                 map={map}
                 setMap={setMap}
+                highlightedIndex={highlightedIndex}
+                setHighlightedIndex={setHighlightedIndex}
               />
             </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>
+            <Grid.Column
+              mobile={4}
+              tablet={4}
+              computer={4}
+              className="right-side-filters"
+            >
+              <Grid.Row>
+                {!hideFilters ? (
+                  <VisibilitySensor>
+                    <ObjectivesChart
+                      items={cases}
+                      activeItems={activeItems}
+                      filters={filters}
+                      activeFilters={activeFilters}
+                      hideFilters={hideFilters}
+                      setActiveFilters={setActiveFilters}
+                      map={map}
+                      highlightedIndex={highlightedIndex}
+                      setHighlightedIndex={setHighlightedIndex}
+                    />
+                  </VisibilitySensor>
+                ) : (
+                  ''
+                )}
+              </Grid.Row>
+              <Grid.Row>
+                <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>Demo site</div>
-                </div>
-                <div className="legend-row">
-                  <div className="circle">
-                    <div className="dot-region"></div>
+                  <div className="legend-row">
+                    <div className="circle">
+                      <div className="dot-region"></div>
+                    </div>
+                    <div>Associated region</div>
                   </div>
-                  <div>Associated region</div>
                 </div>
-              </div>
+              </Grid.Row>
             </Grid.Column>
           </Grid>
         ) : null}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { centerAndResetMapZoom } from './utils';
+import { centerAndResetMapZoom, clearFilters } from './utils';
 
 const normalizeSearchInput = (searchInput) => {
   let normInput = searchInput
@@ -132,7 +132,7 @@ export function DemoSitesFilters(props) {
 
   return (
     <>
-      {!hideFilters ? (
+      {/* {!hideFilters ? (
         <DemoSitesFilter
           filterTitle="Objective/Enabler"
           filterName="objective_filter"
@@ -140,13 +140,19 @@ export function DemoSitesFilters(props) {
           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',
-          ]}
+          customOrder={objectivesCustomOrder}
+        />
+      ) : (
+        ''
+      )} */}
+      {!hideFilters ? (
+        <DemoSitesFilter
+          filterTitle="Target"
+          filterName="target_filter"
+          filters={filters}
+          activeFilters={activeFilters}
+          setActiveFilters={setActiveFilters}
+          map={map}
         />
       ) : (
         ''
@@ -266,30 +272,16 @@ export function SearchBox(props) {
 
 export function ActiveFilters(props) {
   const { filters, activeFilters, setActiveFilters } = props;
-  const hasActiveFilters = Object.entries(activeFilters).some(
-    ([filterName, filterList]) => {
-      if (filterList.length > 0) {
-        return true;
-      }
-      return false;
-    },
-  );
-
-  const clearFilters = () => {
-    const filterInputs = document.querySelectorAll(
-      '#cse-filter .filter-input input',
-    );
-    for (let i = 0; i < filterInputs.length; i++) {
-      filterInputs[i].checked = false;
-    }
-    setActiveFilters({
-      objective_filter: [],
-      indicator_filter: [],
-      project_filter: [],
-      country_filter: [],
-    });
-    // scrollToElement('search-input');
-  };
+  const hasActiveFilters = false;
+  // const hasActiveFilters = Object.entries(activeFilters).some(
+  //   ([filterName, filterList]) => {
+  //     return false;
+  //     if (filterList.length > 0) {
+  //       return true;
+  //     }
+  //     return false;
+  //   },
+  // );
 
   const removeFilter = (filterName, filterCode) => {
     const temp = JSON.parse(JSON.stringify(activeFilters));
@@ -316,7 +308,7 @@ export function ActiveFilters(props) {
       <div className="filter-list-header">
         <h4 className="filter-list-title">Active filters</h4>
         <button
-          onClick={clearFilters}
+          onClick={() => clearFilters(setActiveFilters)}
           className="ui mini basic compact button clear-btn"
         >
           clear all
@@ -349,6 +341,31 @@ export function ActiveFilters(props) {
           ) : (
             ''
           )}
+          {activeFilters.target_filter.length > 0 ? (
+            <div className="filter-wrapper">
+              <div className="filter-label">Target:</div>
+              {activeFilters.target_filter.map((filterCode) => {
+                const filterLabel = filters.target_filter[filterCode];
+                return (
+                  <div className="ui basic label filter-value">
+                    <span>{filterLabel}</span>
+                    <i
+                      tabIndex="0"
+                      onKeyPress={() => {}}
+                      onClick={() => {
+                        removeFilter('target_filter', filterCode);
+                        // scrollToElement('search-input');
+                      }}
+                      role="button"
+                      className="close icon"
+                    ></i>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            ''
+          )}
           {activeFilters.indicator_filter.length > 0 ? (
             <div className="filter-wrapper">
               <div className="filter-label">Indicator:</div>

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

@@ -9,7 +9,12 @@ import InfoOverlay from './InfoOverlay';
 import FeatureInteraction from './FeatureInteraction';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 
-import { centerAndResetMapZoom, getFeatures } from './utils';
+import {
+  // centerAndResetMapZoom,
+  clearFilters,
+  getFeatures,
+  zoomMapToFeatures,
+} from './utils';
 
 const styleCache = {};
 const MapContextGateway = ({ setMap }) => {
@@ -24,11 +29,13 @@ export default function DemoSitesMap(props) {
   const {
     items,
     activeItems,
+    setActiveFilters,
     hideFilters,
     selectedCase,
     onSelectedCase,
     map,
     setMap,
+    setHighlightedIndex,
   } = props;
   const features = getFeatures(items);
   const [resetMapButtonClass, setResetMapButtonClass] =
@@ -60,11 +67,15 @@ export default function DemoSitesMap(props) {
   );
 
   React.useEffect(() => {
+    if (!map) return null;
+
     if (activeItems) {
       pointsSource.clear();
       pointsSource.addFeatures(getFeatures(activeItems));
+      // hideFilters && zoomMapToFeatures(map, getFeatures(activeItems));
+      zoomMapToFeatures(map, getFeatures(activeItems));
     }
-  }, [activeItems, pointsSource]);
+  }, [map, activeItems, pointsSource, hideFilters]);
 
   React.useEffect(() => {
     if (!map) return null;
@@ -119,7 +130,7 @@ export default function DemoSitesMap(props) {
         view={{
           center: ol.proj.fromLonLat([10, 54]),
           showFullExtent: true,
-          zoom: 2.5,
+          zoom: 3,
         }}
         pixelRatio={1}
         // controls={ol.control.defaults({ attribution: false })}
@@ -134,11 +145,18 @@ export default function DemoSitesMap(props) {
             onClick={() => {
               // scrollToElement('search-input');
               onSelectedCase(null);
-              centerAndResetMapZoom(map);
+              clearFilters(setActiveFilters);
+              setHighlightedIndex(5);
+              if (hideFilters) {
+                zoomMapToFeatures(map, getFeatures(activeItems));
+              } else {
+                // centerAndResetMapZoom(map);
+                zoomMapToFeatures(map, getFeatures(activeItems));
+              }
               map.getInteractions().array_[9].getFeatures().clear();
             }}
           >
-            <span className="result-info-title">Reset map</span>
+            <span className="result-info-title">Reset filters</span>
             <i className="icon ri-map-2-line"></i>
           </button>
           <InfoOverlay

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

@@ -78,24 +78,28 @@ export default function FeatureDisplay({ feature }) {
         ''
       )} */}
 
-      <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}>
+                  <span
+                  // target="_blank"
+                  // rel="noopener noreferrer"
+                  // href={item['path']}
+                  >
+                    {item['title']}
+                  </span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ) : (
+        ''
+      )}
       {/* <div>
         <h4>Indicators</h4>
         <ul>

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

@@ -0,0 +1,224 @@
+import React, { useRef } from 'react';
+import cx from 'classnames';
+import loadable from '@loadable/component';
+import { Grid } from 'semantic-ui-react'; // Dropdown,
+
+import { objectivesCustomOrder } from './utils';
+
+const Plot = loadable(() => import('react-plotly.js'));
+
+const ObjectivesChart = ({
+  items,
+  // activeItems,
+  //   filters,
+  activeFilters,
+  setActiveFilters,
+  //   hideFilters,
+  //   map,
+  highlightedIndex,
+  setHighlightedIndex,
+}) => {
+  const initialized = useRef(false);
+  const chartRef = useRef(null);
+  const objectiveCounts = {};
+
+  for (const item of items) {
+    item.properties.objective.map((obj) => {
+      objectiveCounts[obj] = (objectiveCounts[obj] || 0) + 1;
+      return [];
+    });
+  }
+  const _sorted = Object.entries(objectiveCounts).sort(
+    (a, b) =>
+      objectivesCustomOrder.indexOf(a[0]) - objectivesCustomOrder.indexOf(b[0]),
+  );
+  const objectives = Object.fromEntries(_sorted);
+  const objectivesLength = Object.keys(objectives).length;
+
+  React.useEffect(() => {
+    // set the objectives and the count
+    if (!items) return;
+    if (initialized.current) return;
+
+    const interval = setInterval(() => {
+      setHighlightedIndex((prevIndex) => {
+        if (prevIndex + 1 >= objectivesLength + 1) {
+          clearInterval(interval); // Stop after last item
+          initialized.current = true;
+          return prevIndex;
+        }
+        return prevIndex + 1;
+      });
+    }, 2000);
+    // console.log('init');
+    return () => clearInterval(interval); // Cleanup on unmount
+  }, [items, objectivesLength, highlightedIndex, setHighlightedIndex]);
+
+  React.useEffect(() => {
+    // if (!objectives) return;
+    if (highlightedIndex === -1) {
+      setActiveFilters({
+        objective_filter: [undefined],
+        target_filter: [],
+        indicator_filter: [],
+        project_filter: [],
+        country_filter: [],
+      });
+      return;
+    }
+
+    const currentObjective = Object.keys(objectives)[highlightedIndex];
+    const filterKey = 'objective_filter';
+    const newValue = currentObjective ? [currentObjective] : [];
+
+    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,
+      };
+    });
+    // console.log(highlightedIndex, activeFilters);
+  }, [objectives, activeFilters, setActiveFilters, highlightedIndex]);
+
+  const handleClick = (event) => {
+    const point = event.points[0];
+    const label = point.label;
+    // const value = point.value;
+
+    const tempFilters = JSON.parse(JSON.stringify(activeFilters));
+    if (tempFilters['objective_filter'].includes(label)) {
+      tempFilters['objective_filter'] = tempFilters['objective_filter'].filter(
+        (i) => i !== label,
+      );
+      setHighlightedIndex(5);
+    } else {
+      tempFilters['objective_filter'] = [];
+      tempFilters['objective_filter'].push(label);
+      setHighlightedIndex(Object.keys(objectives).indexOf(label));
+    }
+    setActiveFilters(tempFilters);
+  };
+
+  const handleHover = () => {
+    if (chartRef.current) {
+      chartRef.current.style.cursor = 'pointer'; // Change cursor on hover
+    }
+  };
+
+  const handleUnhover = () => {
+    if (chartRef.current) {
+      chartRef.current.style.cursor = 'default'; // Reset cursor
+    }
+  };
+
+  const labels = Object.keys(objectives);
+  const values = Object.values(objectives);
+  const totalCount = values.reduce((acc, curr) => acc + curr, 0);
+  const customColors = ['#007b6c', '#fdaf20', '#004b7f', '#f9eb8a', '#9e83b6']; // Adjust colors as needed
+  const grayColor = '#d3d3d3';
+  //   const pull = labels.map((_, i) => (i === highlightedIndex ? 0.1 : 0));
+  const inactiveColors = labels.map((_, i) =>
+    i === highlightedIndex ? customColors[i % customColors.length] : grayColor,
+  );
+
+  return highlightedIndex >= -1 ? (
+    <div className="objectives-chart fade-in">
+      <Grid.Row className="chart-title">
+        Demo sites and Associated regions
+      </Grid.Row>
+      <Grid.Row className="chart-title">Objective/Enabler</Grid.Row>
+      <Grid.Row className="chart-container">
+        <div ref={chartRef}>
+          <Plot
+            useResizeHandler
+            data={[
+              {
+                type: 'pie',
+                labels: labels,
+                values: values,
+                textinfo: 'none',
+                // textinfo: highlightedIndex === 5 ? 'value' : 'none',
+                hole: 0.4,
+                insidetextorientation: 'radial',
+                hoverinfo: 'label+value',
+                marker: {
+                  colors:
+                    highlightedIndex === 5 ? customColors : inactiveColors, // Apply custom colors here
+                },
+                direction: 'clockwise',
+                // pull,
+              },
+            ]}
+            layout={{
+              width: 250,
+              height: 250,
+              // title: 'Objectives Distribution',
+              showlegend: false,
+              margin: {
+                t: 20, // Top margin
+                b: 20, // Bottom margin
+                l: 0, // Left margin
+                r: 0, // Right margin
+              },
+              annotations: [
+                {
+                  text:
+                    highlightedIndex === 5
+                      ? `${totalCount}`
+                      : values[highlightedIndex] || '', // Display total count in the center
+                  font: {
+                    size: 24, // Adjust font size as needed
+                    weight: 'bold',
+                  },
+                  showarrow: false, // No arrow pointing to the center
+                  x: 0.5, // Position in the center (horizontal)
+                  y: 0.5, // Position in the center (vertical)
+                  align: 'center',
+                  valign: 'middle',
+                  bgcolor: 'rgba(255, 255, 255, 0.6)', // Optional background color
+                  borderpad: 10, // Padding around the text
+                },
+              ],
+            }}
+            config={{
+              responsive: true,
+              displayModeBar: true,
+              modeBarButtonsToRemove: ['toImage'], // Removes download button
+              displaylogo: false, // Removes "Produced with Plotly.js"
+            }}
+            onClick={handleClick}
+            onHover={handleHover}
+            onUnhover={handleUnhover}
+          />
+        </div>
+      </Grid.Row>
+      <Grid.Row>
+        <ul>
+          {Object.entries(objectives).map(([item, count], index) => (
+            <li
+              key={item}
+              className={cx(
+                index === highlightedIndex ? 'active' : '',
+                customColors[index].replace('#', 'C'),
+              )}
+            >
+              {item}
+            </li>
+          ))}
+        </ul>
+      </Grid.Row>
+    </div>
+  ) : (
+    ''
+  );
+};
+
+export default ObjectivesChart;

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

@@ -388,12 +388,12 @@
 }
 
 .legend {
-  position: absolute;
+  // position: absolute;
   bottom: 2em;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-start;
-  gap: 0.5em;
+  gap: 1em;
 
   .legend-row {
     display: flex;
@@ -439,3 +439,99 @@
     transform: translate(-50%, -50%);
   }
 }
+
+.right-side-filters {
+  display: flex !important;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.objectives-chart {
+  &.fade-in {
+    animation: fadeIn 1s ease-in forwards;
+    opacity: 0;
+    /* Start invisible */
+  }
+
+  @keyframes fadeIn {
+    to {
+      opacity: 1;
+    }
+  }
+
+  .main-svg {
+    overflow: visible !important;
+  }
+
+  .hoverlayer {
+    overflow: visible !important;
+  }
+
+  .chart-title {
+    font-size: 1em;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  .chart-container {
+    text-align: center;
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    padding-left: 1.3em;
+    gap: 0.5em;
+    list-style: none;
+  }
+
+  li {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 0.8em;
+    line-height: 1.5em;
+
+    &.C007b6c::before {
+      background-color: #007b6c;
+    }
+
+    &.Cfdaf20::before {
+      background-color: #fdaf20;
+    }
+
+    &.C004b7f::before {
+      background-color: #004b7f;
+    }
+
+    &.Cf9eb8a::before {
+      background-color: #f9eb8a;
+    }
+
+    &.C9e83b6::before {
+      background-color: #9e83b6;
+    }
+
+    &::before {
+      width: 0.7em;
+      height: 0.7em;
+      flex-shrink: 0;
+      border-radius: 2px;
+      /* change as needed */
+      margin-right: 8px;
+      content: '';
+    }
+
+    &.active {
+      font-size: 1em;
+      // color: red;
+      font-weight: 500;
+
+      &::before {
+        width: 1em;
+        height: 1em;
+      }
+    }
+  }
+}

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

@@ -1,5 +1,30 @@
 import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 
+export const objectivesCustomOrder = [
+  'Objective 1: Protect and restore marine and freshwater ecosystems and biodiversity',
+  'Objective 2: Prevent and eliminate pollution of our oceans, seas and waters',
+  'Objective 3: Make the sustainable blue economy carbon-neutral and circular',
+  'Enabler 1: Digital twin of the ocean',
+  'Enabler 2: Public mobilisation and engagement',
+];
+
+export const clearFilters = (setActiveFilters) => {
+  const filterInputs = document.querySelectorAll(
+    '#cse-filter .filter-input input',
+  );
+  for (let i = 0; i < filterInputs.length; i++) {
+    filterInputs[i].checked = false;
+  }
+  setActiveFilters({
+    objective_filter: [],
+    target_filter: [],
+    indicator_filter: [],
+    project_filter: [],
+    country_filter: [],
+  });
+  // scrollToElement('search-input');
+};
+
 export const truncateText = (str, max = 50) => {
   if (str.length <= max) {
     return str;
@@ -39,20 +64,42 @@ export function getExtentOfFeatures(features) {
 
 export function zoomMapToFeatures(map, features, threshold = 500) {
   const extent = getExtentOfFeatures(features);
-  let extentBuffer = (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
+
+  // let extentBuffer = (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
+  // extentBuffer = extentBuffer < threshold ? threshold : extentBuffer;
+  // const paddedExtent = ol.extent.buffer(extent, extentBuffer);
+
+  const width = extent[2] - extent[0];
+  const height = extent[3] - extent[1];
+  const bufferFactor = 0.05; // 5% buffer
+
+  let extentBuffer = Math.max(width, height) * bufferFactor;
   extentBuffer = extentBuffer < threshold ? threshold : extentBuffer;
   const paddedExtent = ol.extent.buffer(extent, extentBuffer);
-  map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
+
+  try {
+    // map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
+    map.getView().fit(paddedExtent, {
+      size: map.getSize(), // pass size explicitly
+      // padding: [0, 0, 0, 0], // top, right, bottom, left
+      duration: 1000,
+    });
+  } catch (error) {
+    // no features available, zooming fails
+  }
 }
 
 export function getFeatures(cases) {
   const Feature = ol.ol.Feature;
   const colors = {
-    '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': '#9e83b6',
+    'Objective 1: Protect and restore marine and freshwater ecosystems and biodiversity':
+      '#007b6c',
+    'Objective 2: Prevent and eliminate pollution of our oceans, seas and waters':
+      '#fdaf20',
+    'Objective 3: Make the sustainable blue economy carbon-neutral and circular':
+      '#004b7f',
+    'Enabler 1: Digital twin of the ocean': '#f9eb8a',
+    'Enabler 2: Public mobilisation and engagement': '#9e83b6',
   };
   const width = {
     'Demo site': 6,
@@ -85,10 +132,11 @@ export function getFeatures(cases) {
         info: c.properties.info,
         website: c.properties.website,
         objective: c.properties.objective,
+        target: c.properties.target,
         description: c.properties.description,
         index: index,
         path: c.properties.path,
-        color: colors[c.properties.objective] || '#B83230',
+        color: colors[c.properties.objective[0]] || '#B83230',
         width: width[c.properties.type_is_region],
         radius: radius[c.properties.type_is_region],
       },
@@ -101,6 +149,7 @@ export function getFeatures(cases) {
 export function filterCases(cases, activeFilters, indicatorOnly) {
   const data = cases.filter((_case) => {
     let flag_objective = false;
+    let flag_target = false;
     let flag_indicator = false;
     let flag_project = false;
     let flag_country = false;
@@ -122,7 +171,17 @@ export function filterCases(cases, activeFilters, indicatorOnly) {
       let objective = _case.properties.objective;
 
       activeFilters.objective_filter.forEach((filter) => {
-        if (objective === filter) flag_objective = true;
+        if (objective?.includes(filter)) flag_objective = true;
+      });
+    }
+
+    if (!activeFilters.target_filter.length) {
+      flag_target = true;
+    } else {
+      let target = _case.properties.target;
+
+      activeFilters.target_filter.forEach((filter) => {
+        if (target?.includes(filter)) flag_target = true;
       });
     }
 
@@ -162,6 +221,7 @@ export function filterCases(cases, activeFilters, indicatorOnly) {
 
     return flag_indicatorOnly &&
       flag_objective &&
+      flag_target &&
       flag_indicator &&
       flag_country &&
       flag_project
@@ -175,6 +235,7 @@ export function filterCases(cases, activeFilters, indicatorOnly) {
 export function getFilters(cases, indicatorOnly) {
   let _filters = {
     objective_filter: {},
+    target_filter: {},
     indicator_filter: {},
     project_filter: {},
     country_filter: {},
@@ -188,6 +249,7 @@ export function getFilters(cases, indicatorOnly) {
     indicators.map((item) => {
       if (
         item['title'] &&
+        item['title'] !== '0' &&
         !_filters.indicator_filter.hasOwnProperty('_' + item['id'])
       ) {
         _filters.indicator_filter['_' + item['id']] = item['title'];
@@ -196,9 +258,20 @@ export function getFilters(cases, indicatorOnly) {
     });
 
     let objective = _case.properties.objective;
-    if (objective && !_filters.objective_filter.hasOwnProperty(objective)) {
-      _filters.objective_filter[objective] = objective;
-    }
+    objective.map((item) => {
+      if (item && !_filters.objective_filter.hasOwnProperty(item)) {
+        _filters.objective_filter[item] = item;
+      }
+      return [];
+    });
+
+    let target = _case.properties.target;
+    target.map((item) => {
+      if (item && !_filters.target_filter.hasOwnProperty(item)) {
+        _filters.target_filter[item] = item;
+      }
+      return [];
+    });
 
     let project = _case.properties.project;
     if (project && !_filters.project_filter.hasOwnProperty(project)) {