@eeacms/volto-cca-policy 0.2.69 → 0.2.71

package/src/components/manage/Blocks/MKHMap/InfoOverlay.jsx

@@ -4,13 +4,25 @@ import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 import FeatureDisplay from './FeatureDisplay';
 import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
 
-export default function InfoOverlay({ selectedFeature, layerId }) {
+const isCluster = (features) => {
+  return features.length > 1 ? true : features[0].values_?.features?.length > 1;
+};
+
+export default function InfoOverlay({
+  selectedFeature,
+  onFeatureSelect,
+  layerId,
+  hasCusters = false,
+}) {
   const { map } = useMapContext();
   const [tooltip, setTooltipRef] = React.useState();
   const [showTooltip, setShowTooltip] = React.useState();
 
   const prevLayerId = usePrevious(layerId);
 
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => setIsClient(true), []);
+
   React.useEffect(() => {
     if (prevLayerId && layerId !== prevLayerId) {
       setShowTooltip(false);
@@ -23,7 +35,7 @@ export default function InfoOverlay({ selectedFeature, layerId }) {
     const overlay = new ol.Overlay({
       element: document.getElementById('popup-overlay'),
       positioning: 'bottom-center',
-      offset: [0, -10],
+      offset: [10, -10],
       stopEvent: false,
     });
     map.addOverlay(overlay);
@@ -33,11 +45,14 @@ export default function InfoOverlay({ selectedFeature, layerId }) {
       const { pixel, target } = evt;
       const features = target.getFeaturesAtPixel(pixel);
 
-      if (features.length) {
+      if (features.length && (hasCusters ? !isCluster(features) : true)) {
         overlay.setPosition(coordinate);
         setShowTooltip(true);
       } else {
+        // handle a click in an overlay popup
+        if (evt.originalEvent.target.tagName === 'A') return;
         setShowTooltip(false);
+        onFeatureSelect(null);
       }
     }
 
@@ -47,10 +62,7 @@ export default function InfoOverlay({ selectedFeature, layerId }) {
       map.un('click', handler);
       map.removeOverlay(overlay);
     };
-  }, [map, tooltip]); //
-
-  const [isClient, setIsClient] = React.useState(false);
-  React.useEffect(() => setIsClient(true), []);
+  }, [map, tooltip, onFeatureSelect, hasCusters]);
 
   return isClient ? (
     <div
@@ -62,7 +74,7 @@ export default function InfoOverlay({ selectedFeature, layerId }) {
       }}
       ref={setTooltipRef}
     >
-      <FeatureDisplay feature={selectedFeature} />
+      {selectedFeature ? <FeatureDisplay feature={selectedFeature} /> : null}
     </div>
   ) : null;
 }

package/src/components/manage/Blocks/MKHMap/View.jsx

@@ -11,7 +11,7 @@ import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 
 import * as layers from './layers';
 import FeatureInteraction from './FeatureInteraction';
-import InfoOverlay from '@eeacms/volto-cca-policy/components/manage/Blocks/CaseStudyExplorer/InfoOverlay';
+import InfoOverlay from './InfoOverlay';
 
 import './styles.less';
 

package/src/components/theme/ImageGallery/styles.less

@@ -9,7 +9,7 @@
     bottom: 0em;
     left: 0em;
     padding: 10px;
-    background: rgba(0, 0, 0, 0.5); /* optional: semi-transparent background */
+    // background: rgba(0, 0, 0, 0.5); /* optional: semi-transparent background */
     color: white; /* text color */
     font-size: 14px; /* adjust font size as needed */
     text-align: left; /* optional: center the text */

package/src/index.js

@@ -22,6 +22,7 @@ import GeocharsWidget from './components/theme/Widgets/GeocharsWidget';
 import GeolocationWidget from './components/theme/Widgets/GeolocationWidget';
 import MigrationButtons from './components/MigrationButtons';
 import HealthHorizontalCardItem from './components/Result/HealthHorizontalCardItem';
+import ClusterHorizontalCardItem from './components/Result/ClusterHorizontalCardItem';
 
 import { langRedirection } from './store/middleware';
 
@@ -339,7 +340,9 @@ const applyConfig = (config) => {
   config.settings.searchlib.resolve.HealthHorizontalCardItem = {
     component: HealthHorizontalCardItem,
   };
-
+  config.settings.searchlib.resolve.ClusterHorizontalCardItem = {
+    component: ClusterHorizontalCardItem,
+  };
   // Custom widgets
   config.widgets.id.geochars = GeocharsWidget;
   config.widgets.id.geolocation = GeolocationWidget;

package/src/search/config.js

@@ -1,27 +1,65 @@
 import { mergeConfig } from '@eeacms/search';
-import { build_runtime_mappings } from '@eeacms/volto-globalsearch/utils';
 import { getClientProxyAddress } from './utils';
 import vocabs from './vocabulary';
 
 import facets from './facets';
+import views from './views';
 
 const ccaConfig = {
   title: 'ClimateAdapt Main',
+  ...views,
 };
 
 export const clusters = {
   name: 'op_cluster',
-  field: 'objectProvides',
+  // field: 'objectProvides',
   clusters: [
-    // {
-    //   name: 'Type1',
-    //   icon: { name: 'bullhorn' },
-    //   values: ['Video', 'Guidance'],
-    //   defaultResultView: 'horizontalCard',
-    // },
-  ],
+    {
+      name: 'Climate-ADAPT',
+      icon: { name: 'file text' },
+      values: ['climate'],
+    },
+    {
+      name: 'Health Observatory',
+      icon: { name: 'compass' },
+      values: ['observatory'],
+    },
+    {
+      name: 'Mission Portal',
+      icon: { name: 'compass' },
+      values: ['mission'],
+    },
+  ].map((cluster) => ({
+    ...cluster,
+    defaultResultView: 'ClusterHorizontalCardItem',
+  })),
+};
+
+// console.log('clusters default', clusters, build_runtime_mappings(clusters));
+// console.log(
+//   'clusters mission',
+//   clusters_mission,
+//   build_runtime_mappings(clusters_mission),
+// );
+
+const cca_build_runtime_mappings = {};
+cca_build_runtime_mappings['op_cluster'] = {
+  type: 'keyword',
+  script: {
+    source:
+      // "emit('_all_'); if (doc['cca_include_in_search_observatory'][0]) {emit('Health Observatory')} if (doc['cca_include_in_mission.keyword'][0].toString() == 'true') {emit('Mission Portal')} else {emit('Climate-ADAPT')}",
+      // "emit('_all_'); if (doc['cca_include_in_search_observatory'][0]) {emit('Health Observatory')} if (doc['cca_include_in_mission.keyword'][0].toString() == 'true' or (doc['id.keyword'].length==1 and doc['id.keyword'][0].toString().indexOf('https://climate-adapt.eea.europa.eu/en/mission')==0)) {emit('Mission Portal')} else {emit('Climate adapt')}",
+      // "def objectProvides = ['Adaptation option','Case study','Guidance','Video','Indicator','Information portal','Organisation','Publication reference','Research and knowledge project','Video','Tool'];def vals = doc['objectProvides'];for (defVal in objectProvides) {for (objVal in vals) {if (objVal.contains(defVal)) {emit('Climate-ADAPT')}}}emit('_all_');if (doc['cca_include_in_search_observatory'][0]) {emit('Health Observatory')}  if (doc['cca_include_in_mission.keyword'][0].toString() == 'true') {emit('Mission Portal')} else {if (doc['id.keyword'].length==1) { if(doc['id.keyword'][0].toString().contains('climate-adapt.eea.europa.eu/en/mission')) {emit('Mission Portal')}}}",
+      "def objectProvides = ['Adaptation option','Case study','Guidance','Video','Indicator','Information portal','Organisation','Publication reference','Research and knowledge project','Video','Tool'];def vals = doc['objectProvides'];for (defVal in objectProvides) {for (objVal in vals) {if (objVal.contains(defVal)) {emit('Climate-ADAPT')}}}emit('_all_');if (doc['cca_include_in_search_observatory'][0]) {for (defVal in objectProvides) {for (objVal in vals) {if (objVal.contains(defVal)){emit('Health Observatory')}}}}  if (doc['cca_include_in_mission.keyword'][0].toString() == 'true') {emit('Mission Portal')} else {if (doc['id.keyword'].length==1) { if(doc['id.keyword'][0].toString().contains('climate-adapt.eea.europa.eu/en/mission')) {emit('Mission Portal')}}}",
+  },
 };
 
+// const mapping = {};
+// mapping[settings.name] = {
+//   type: 'keyword',
+//   script: { source: source },
+// };
+
 export default function installMainSearch(config) {
   const envConfig = ccaConfig;
 
@@ -30,41 +68,56 @@ export default function installMainSearch(config) {
   envConfig.app_name = pjson.name;
   envConfig.app_version = pjson.version;
 
+  // console.log('config.searchui.ccaSearch clusers', clusters);
+  // debugger;
   config.searchui.ccaSearch = {
     ...mergeConfig(envConfig, config.searchui.globalsearchbase),
     elastic_index: '_es/globalsearch',
     index_name: 'data_searchui',
     host: process.env.RAZZLE_ES_PROXY_ADDR || 'http://localhost:3000',
-    runtime_mappings: build_runtime_mappings(clusters),
+    runtime_mappings: cca_build_runtime_mappings,
     ...vocabs,
   };
 
   const { ccaSearch } = config.searchui;
 
+  ccaSearch.contentSectionsParams = {
+    enable: true,
+    sectionFacetsField: 'op_cluster',
+    sections: clusters.clusters,
+    clusterMapping: Object.assign(
+      {},
+      ...clusters.clusters.map(({ name, values }) =>
+        Object.assign({}, ...values.map((v) => ({ [v]: name }))),
+      ),
+    ),
+  };
+
   ccaSearch.permanentFilters.push({
     term: {
       cluster_name: 'cca',
     },
   });
 
-  ccaSearch.permanentFilters.push({
-    terms: {
-      objectProvides: [
-        'Adaptation option',
-        'Case study',
-        'Guidance',
-        'Video',
-        'Indicator',
-        'Information portal',
-        'Organisation',
-        'Publication reference',
-        'Research and knowledge project',
-        'Tool',
-      ],
-    },
-  });
+  // ccaSearch.permanentFilters.push({
+  //   terms: {
+  //     objectProvides: [
+  //       'Adaptation option',
+  //       'Case study',
+  //       'Guidance',
+  //       'Video',
+  //       'Indicator',
+  //       'Information portal',
+  //       'Organisation',
+  //       'Publication reference',
+  //       'Research and knowledge project',
+  //       'Tool',
+  //     ],
+  //   },
+  // });
 
   ccaSearch.facets = facets;
+  // console.log('ccaSearch.facets', ccaSearch.facets);
 
   ccaSearch.initialView.tilesLandingPageParams.sections = [
     {

package/src/search/facets.js

@@ -18,7 +18,17 @@ const adaptation_sectors = {
   showAllOptions: true,
   alwaysVisible: true,
 };
-
+const op_cluster = {
+  field: 'op_cluster',
+  factory: 'MultiTermFacet',
+  isFilterable: true,
+  isMulti: true,
+  label: 'Section',
+  show: 10000,
+  showInFacetsList: false,
+  ignoreNLPWhenActive: true,
+  blacklist: ['Others', 'Publications'],
+};
 // const clusters = {
 //   field: 'op_cluster',
 //   factory: 'MultiTermFacet',
@@ -113,6 +123,7 @@ const origin_websites = {
 const facets = [
   adaptation_sectors,
   // clusters,
+  op_cluster,
   objectProvides,
   issued_date,
   climate_impacts,

package/src/search/views.js

@@ -0,0 +1,15 @@
+export default {
+  resultViews: [
+    {
+      id: 'ClusterHorizontalCardItem',
+      title: 'Cluster Climate catalogue items',
+      icon: 'bars',
+      render: null,
+      isDefault: true,
+      factories: {
+        view: 'HorizontalCard.Group',
+        item: 'ClusterHorizontalCardItem',
+      },
+    },
+  ],
+};

package/src/components/manage/Blocks/CaseStudyExplorer/InfoOverlay.jsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { useMapContext } from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
-import FeatureDisplay from './FeatureDisplay';
-import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
-
-const isCluster = (features) => {
-  return features.length > 1 ? true : features[0].values_?.features?.length > 1;
-};
-
-export default function InfoOverlay({
-  selectedFeature,
-  onFeatureSelect,
-  layerId,
-  hasCusters = false,
-}) {
-  const { map } = useMapContext();
-  const [tooltip, setTooltipRef] = React.useState();
-  const [showTooltip, setShowTooltip] = React.useState();
-
-  const prevLayerId = usePrevious(layerId);
-
-  const [isClient, setIsClient] = React.useState(false);
-  React.useEffect(() => setIsClient(true), []);
-
-  React.useEffect(() => {
-    if (prevLayerId && layerId !== prevLayerId) {
-      setShowTooltip(false);
-    }
-  }, [layerId, prevLayerId]);
-
-  React.useEffect(() => {
-    if (!(map && tooltip)) return;
-
-    const overlay = new ol.Overlay({
-      element: document.getElementById('popup-overlay'),
-      positioning: 'bottom-center',
-      offset: [10, -10],
-      stopEvent: false,
-    });
-    map.addOverlay(overlay);
-
-    function handler(evt) {
-      const coordinate = evt.coordinate;
-      const { pixel, target } = evt;
-      const features = target.getFeaturesAtPixel(pixel);
-
-      if (features.length && (hasCusters ? !isCluster(features) : true)) {
-        overlay.setPosition(coordinate);
-        setShowTooltip(true);
-      } else {
-        // handle a click in an overlay popup
-        if (evt.originalEvent.target.tagName === 'A') return;
-        setShowTooltip(false);
-        onFeatureSelect(null);
-      }
-    }
-
-    map.on('click', handler);
-
-    return () => {
-      map.un('click', handler);
-      map.removeOverlay(overlay);
-    };
-  }, [map, tooltip, onFeatureSelect, hasCusters]);
-
-  return isClient ? (
-    <div
-      id="popup-overlay"
-      style={{
-        position: 'absolute',
-        zIndex: 1,
-        visibility: showTooltip ? 'visible' : 'hidden',
-      }}
-      ref={setTooltipRef}
-    >
-      {selectedFeature ? <FeatureDisplay feature={selectedFeature} /> : null}
-    </div>
-  ) : null;
-}