@eeacms/volto-eea-map 2.0.7 → 3.0.1

package/CHANGELOG.md

@@ -4,6 +4,26 @@ 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).
 
+### [3.0.1](https://github.com/eea/volto-eea-map/compare/3.0.0...3.0.1) - 24 November 2023
+
+#### :hammer_and_wrench: Others
+
+- fix [Miu Razvan - [`d9267ec`](https://github.com/eea/volto-eea-map/commit/d9267eca557518241ba30f5d525ebd30a606bf94)]
+- fix [Miu Razvan - [`0ad99a6`](https://github.com/eea/volto-eea-map/commit/0ad99a60a3edfd19ad11b0023b456e82bb335dc5)]
+- fix [Miu Razvan - [`fd0260d`](https://github.com/eea/volto-eea-map/commit/fd0260d46e356377ce388b967e78651da8cfa543)]
+## [3.0.0](https://github.com/eea/volto-eea-map/compare/2.0.7...3.0.0) - 23 November 2023
+
+#### :hammer_and_wrench: Others
+
+- update [Miu Razvan - [`005b994`](https://github.com/eea/volto-eea-map/commit/005b9949a93a9101cf5b88054523e05d03deae05)]
+- clean up [Miu Razvan - [`4144747`](https://github.com/eea/volto-eea-map/commit/4144747b84d1fb0e51614c7a963d750c9b67100d)]
+- clean up [Miu Razvan - [`80c37f9`](https://github.com/eea/volto-eea-map/commit/80c37f9cb8b54e79caf5d147e452a5e88168a218)]
+- bump version + remove uneeded code [Miu Razvan - [`adb8733`](https://github.com/eea/volto-eea-map/commit/adb8733fa4ce3d42a9d16cb7ad19518d49949da2)]
+- update [Miu Razvan - [`6723242`](https://github.com/eea/volto-eea-map/commit/6723242a8507a29194cfc9650ae214d2abca74ad)]
+- fix sonorqube [Dobricean Ioan Dorian - [`02b4406`](https://github.com/eea/volto-eea-map/commit/02b44067598c6cedcfc28c3b7667e4cb23addfc5)]
+- fix prettier [Dobricean Ioan Dorian - [`78fc2ba`](https://github.com/eea/volto-eea-map/commit/78fc2baa2f5264ca1bba61b70bc0bdc5b2788e67)]
+- Fix Sonorqube [dobri1408 - [`e04011a`](https://github.com/eea/volto-eea-map/commit/e04011aa811422f865d0bbb1e66af558a4310e77)]
+- adapt embedeeamap to use serialized data [Dobricean Ioan Dorian - [`005965c`](https://github.com/eea/volto-eea-map/commit/005965c6793a9a9977fef52c08ba9a3173eec348)]
 ### [2.0.7](https://github.com/eea/volto-eea-map/compare/2.0.6...2.0.7) - 10 November 2023
 
 #### :rocket: New Features

package/README.md

@@ -18,26 +18,30 @@
 
 # Configuration
 
-This addon contains the EEA Embed Map Block & EEA Map Block. It's configured to work with the map visualization content type and give more access to ArcGIS maps. See available maps here https://discomap.eea.europa.eu/ 
+This addon contains the EEA Embed Map Block & EEA Map Block. It's configured to work with the map visualization content type and give more access to ArcGIS maps. See available maps here https://discomap.eea.europa.eu/
 
-# Enable data queries auto-import 
+# Enable data queries auto-import
 
-To enable automatic import of queries from the content-type, "Parameters for data connections" should be checked as behavior on the content-type that uses the map. 
+To enable automatic import of queries from the content-type, "Parameters for data connections" should be checked as behavior on the content-type that uses the map.
 
     controlpanel/dexterity-types/{content-type-id}
 
 # Enable Sources
 
-Sources (Data provenance) should be set on the visualization. To enable this, "EEA Core Metadata" should be  checked as behavior on the  visualization content-type. 
+Sources (Data provenance) should be set on the visualization. To enable this, "EEA Core Metadata" should be checked as behavior on the visualization content-type.
 
     controlpanel/dexterity-types/map_visualization
-    
+
 After this, sources can be added from the visualization edit interface. "Data Provenance" tab => "Add source"
 
 [EEA MAP](https://raw.githubusercontent.com/eea/volto-eea-map/master/docs/volto-eea-map.gif)
 
 ## Getting started
 
+### Upgrade
+
+#### 3.0.0 -> requires >= eea.api.dataconnector@7.0
+
 ### Try volto-eea-map with Docker
 
       git clone https://github.com/eea/volto-eea-map.git
@@ -57,25 +61,25 @@ Go to http://localhost:3000
 
 1. Start Volto frontend
 
-* If you already have a volto project, just update `package.json`:
+- If you already have a volto project, just update `package.json`:
 
-   ```JSON
-   "addons": [
-       "@eeacms/volto-eea-map"
-   ],
+  ```JSON
+  "addons": [
+      "@eeacms/volto-eea-map"
+  ],
 
-   "dependencies": {
-       "@eeacms/volto-eea-map": "*"
-   }
-   ```
+  "dependencies": {
+      "@eeacms/volto-eea-map": "*"
+  }
+  ```
 
-* If not, create one:
+- If not, create one:
 
-   ```
-   npm install -g yo @plone/generator-volto
-   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-eea-map
-   cd my-volto-project
-   ```
+  ```
+  npm install -g yo @plone/generator-volto
+  yo @plone/volto my-volto-project --canary --addon @eeacms/volto-eea-map
+  cd my-volto-project
+  ```
 
 1. Install new add-ons and restart Volto:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "2.0.7",
+  "version": "3.0.1",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/EmbedEEAMap/Edit.jsx

@@ -1,119 +1,84 @@
-import React from 'react';
-import { SidebarPortal } from '@plone/volto/components';
-
+import React, { useEffect, useMemo } from 'react';
+import { Message } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 
+import { SidebarPortal } from '@plone/volto/components';
+import { getContent } from '@plone/volto/actions';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import Webmap from '@eeacms/volto-eea-map/components/Webmap';
 import ExtraViews from '@eeacms/volto-eea-map/components/ExtraViews';
 
-import { expandToBackendURL } from '@plone/volto/helpers';
-
 import { Schema } from './Schema';
 import { applyQueriesToMapLayers } from '@eeacms/volto-eea-map/utils';
 
-import { getVisualization } from '@eeacms/volto-eea-map/actions';
+import { getMapVisualizationData } from './helpers';
 
 const Edit = (props) => {
+  const { id, block, onChangeBlock, selected, data, getContent } = props;
   const {
-    block,
-    onChangeBlock,
-    selected,
-    data_provenance = {},
-    figure_note = [],
-  } = props;
+    data_query_params,
+    enable_queries,
+    show_legend = true,
+    show_note = true,
+    show_sources = true,
+    show_more_info = true,
+    show_share = true,
+    dataprotection = { enabled: true },
+    height = '',
+  } = data;
   const schema = Schema(props);
   const [mapData, setMapData] = React.useState('');
-  const data = React.useMemo(() => props.data, [props.data]);
-  const { height = '' } = data;
 
-  React.useEffect(() => {
-    if (!Object.hasOwn(data, 'show_legend')) {
-      onChangeBlock(block, {
-        ...data,
-        show_legend: true,
-      });
-    }
-    if (!Object.hasOwn(data, 'show_note')) {
-      onChangeBlock(block, {
-        ...data,
-        show_note: true,
-      });
-    }
-    if (!Object.hasOwn(data, 'show_sources')) {
-      onChangeBlock(block, {
-        ...data,
-        show_sources: true,
-      });
-    }
-    if (!Object.hasOwn(data, 'show_more_info')) {
-      onChangeBlock(block, {
-        ...data,
-        show_more_info: true,
-      });
-    }
-    if (!Object.hasOwn(data, 'dataprotection')) {
-      onChangeBlock(block, {
-        ...data,
-        dataprotection: { enabled: true },
-      });
-    }
-    if (!Object.hasOwn(data, 'show_share')) {
-      onChangeBlock(block, {
-        ...data,
-        show_share: true,
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    data.show_legend,
-    data.show_note,
-    data.show_sources,
-    data.show_more_info,
-    data.dataprotection,
-    data.show_share,
+  const vis_url = useMemo(() => flattenToAppURL(data.vis_url), [data.vis_url]);
+
+  const map_visualization_data = useMemo(() => getMapVisualizationData(props), [
+    props,
   ]);
 
-  React.useEffect(() => {
-    if (props.data.vis_url) {
-      props.getVisualization(expandToBackendURL(props.data.vis_url));
+  useEffect(() => {
+    const mapVisId = flattenToAppURL(map_visualization_data['@id'] || '');
+    if (vis_url && vis_url !== mapVisId) {
+      getContent(vis_url, null, id);
     }
-    if (!props.data.vis_url) {
+    if (!vis_url) {
       setMapData('');
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.data.vis_url]);
+  }, [id, getContent, vis_url, map_visualization_data]);
 
   React.useEffect(() => {
     const updatedMapData = applyQueriesToMapLayers(
-      props.map_visualization,
-      props.data.data_query_params,
-      props.data.enable_queries,
+      map_visualization_data,
+      data_query_params,
+      enable_queries,
     );
     setMapData(updatedMapData);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.map_visualization, props.data]);
+  }, [map_visualization_data, data_query_params, enable_queries]);
 
   return (
     <>
-      {mapData && (
+      {!vis_url && (
+        <Message>Please select a visualization from block editor.</Message>
+      )}
+
+      {!!vis_url && mapData && (
         <div>
           <Webmap data={mapData} height={height} isEdit={true} />
           <ExtraViews
             data={{
               ...data,
-              data_provenance,
-              figure_note,
-              map_data: props.map_visualization,
+              show_legend,
+              show_note,
+              show_sources,
+              show_more_info,
+              show_share,
+              dataprotection,
+              map_visualization_data,
             }}
           />
         </div>
       )}
-      {!mapData && (
-        <p>No map view to show. Set visualization in block configuration.</p>
-      )}
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}
@@ -135,27 +100,11 @@ const Edit = (props) => {
 export default compose(
   connect(
     (state, props) => ({
+      mapContent: state.content.subrequests?.[props.id]?.data,
       data_query: state.content.data.data_query,
-      '@id': props.data.vis_url
-        ? state.map_visualizations?.data[
-            expandToBackendURL(props.data.vis_url)
-          ]?.['@id']
-        : props.content?.['@id'],
-      map_visualization: props.data.vis_url
-        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
-            ?.data
-        : '',
-      data_provenance: props.data.vis_url
-        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
-            ?.data_provenance
-        : '',
-      figure_note: props.data.vis_url
-        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
-            ?.figure_note
-        : '',
     }),
     {
-      getVisualization,
+      getContent,
     },
   ),
 )(Edit);

package/src/components/Blocks/EmbedEEAMap/View.jsx

@@ -1,47 +1,39 @@
-import React from 'react';
-
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { expandToBackendURL } from '@plone/volto/helpers';
-
+import React, { useMemo } from 'react';
 import { PrivacyProtection } from '@eeacms/volto-embed';
-
 import Webmap from '@eeacms/volto-eea-map/components/Webmap';
 import ExtraViews from '@eeacms/volto-eea-map/components/ExtraViews';
 import { applyQueriesToMapLayers } from '@eeacms/volto-eea-map/utils';
-import { getVisualization } from '@eeacms/volto-eea-map/actions';
+
+import { getMapVisualizationData } from './helpers';
 
 const View = (props) => {
-  const { data, data_provenance = {}, figure_note = [] } = props || {};
-  const { height = '' } = data;
+  const { data } = props;
+  const {
+    data_query_params,
+    enable_queries,
+    show_legend = true,
+    show_note = true,
+    show_sources = true,
+    show_more_info = true,
+    show_share = true,
+    dataprotection = { enabled: true },
+    height = '',
+  } = data;
 
-  const [mapData, setMapData] = React.useState('');
+  const map_visualization_data = useMemo(() => getMapVisualizationData(props), [
+    props,
+  ]);
 
-  React.useEffect(() => {
-    if (props.data.vis_url) {
-      props.getVisualization(expandToBackendURL(props.data.vis_url));
-    }
-    if (!props.data.vis_url) {
-      setMapData('');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.data.vis_url]);
+  const [mapData, setMapData] = React.useState('');
 
   React.useEffect(() => {
     const updatedMapData = applyQueriesToMapLayers(
-      props.map_visualization,
-      props.data.data_query_params,
-      props.data.enable_queries,
+      map_visualization_data,
+      data_query_params,
+      enable_queries,
     );
-
     setMapData(updatedMapData);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    props.map_visualization,
-    props.data.data_query_params,
-    props.data.enable_queries,
-  ]);
+  }, [map_visualization_data, data_query_params, enable_queries]);
 
   return (
     <PrivacyProtection
@@ -49,16 +41,19 @@ const View = (props) => {
       className="embed-map-visualization"
       {...props}
     >
-      {mapData && (
+      {!!mapData && (
         <>
           <Webmap data={mapData} height={height} />
           <ExtraViews
             data={{
               ...data,
-              data_provenance,
-              figure_note,
-              map_data: props.map_visualization,
-              '@id': props['@id'],
+              show_legend,
+              show_note,
+              show_sources,
+              show_more_info,
+              show_share,
+              dataprotection,
+              map_visualization_data,
             }}
           />
         </>
@@ -70,29 +65,4 @@ const View = (props) => {
   );
 };
 
-export default compose(
-  connect(
-    (state, props) => ({
-      '@id': props.data.vis_url
-        ? state.map_visualizations?.data[
-            expandToBackendURL(props.data.vis_url)
-          ]?.['@id']
-        : props.content?.['@id'],
-      map_visualization: props.data.vis_url
-        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
-            ?.data
-        : '',
-      data_provenance: props.data.vis_url
-        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
-            ?.data_provenance
-        : '',
-      figure_note: props.data.vis_url
-        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
-            ?.figure_note
-        : '',
-    }),
-    {
-      getVisualization,
-    },
-  ),
-)(View);
+export default View;

package/src/components/Blocks/EmbedEEAMap/helpers.js

@@ -1,3 +1,4 @@
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
 import { updateBlockQueryFromPageQuery } from '@eeacms/volto-eea-map/utils';
 
 const deepUpdateDataQueryParams = (block, data, data_query, onChangeBlock) => {
@@ -27,4 +28,14 @@ const deepUpdateDataQueryParams = (block, data, data_query, onChangeBlock) => {
   }
 };
 
-export { deepUpdateDataQueryParams };
+function getMapVisualizationData(props) {
+  const content = props.mapContent || {};
+  const map_visualization_data =
+    content.map_visualization_data || props.data?.map_visualization_data || {};
+  return {
+    ...pickMetadata(content),
+    ...map_visualization_data,
+  };
+}
+
+export { deepUpdateDataQueryParams, getMapVisualizationData };

package/src/components/ExtraViews.jsx

@@ -16,7 +16,7 @@ const ExtraViews = ({ data, screen }) => {
   const toolbar = useRef();
   const [mobile, setMobile] = useState(false);
   const {
-    map_data = {},
+    map_visualization_data = {},
     description,
     show_legend,
     show_viewer,
@@ -24,10 +24,10 @@ const ExtraViews = ({ data, screen }) => {
     show_sources = true,
     show_more_info = true,
     show_share = true,
-    data_provenance = {},
-    figure_note = [],
   } = data;
 
+  const { data_provenance = {}, figure_note = [] } = map_visualization_data;
+
   useEffect(() => {
     if (toolbar.current) {
       const toolbarParentWidth = toolbar.current.parentElement.offsetWidth;
@@ -42,17 +42,17 @@ const ExtraViews = ({ data, screen }) => {
 
   return (
     <>
-      {show_legend && map_data && (
-        <LegendView data={map_data} show_viewer={show_viewer} />
+      {show_legend && map_visualization_data && (
+        <LegendView data={map_visualization_data} show_viewer={show_viewer} />
       )}
       <div className={cx('visualization-toolbar', { mobile })} ref={toolbar}>
         <div className="left-col">
-          {show_note && <FigureNote note={figure_note || []} />}
+          {show_note && <FigureNote notes={figure_note || []} />}
           {show_sources && <Sources sources={data_provenance?.data} />}
-          {show_more_info && <MoreInfo href={data['@id']} />}
+          {show_more_info && <MoreInfo href={map_visualization_data['@id']} />}
         </div>
         <div className="right-col">
-          {show_share && <Share href={data['@id']} />}
+          {show_share && <Share href={map_visualization_data['@id']} />}
         </div>
       </div>
       {description && serializeNodes(description)}

package/src/components/Webmap.jsx

@@ -60,7 +60,7 @@ const Webmap = (props) => {
         css: true,
       }).then((modules) => {
         const [
-          Map,
+          MapBlock,
           MapView,
           FeatureLayer,
           MapImageLayer,
@@ -75,7 +75,7 @@ const Webmap = (props) => {
           Fullscreen,
         ] = modules;
         setModules({
-          Map,
+          MapBlock,
           MapView,
           FeatureLayer,
           MapImageLayer,
@@ -125,7 +125,7 @@ const Webmap = (props) => {
   const esri = React.useMemo(() => {
     if (Object.keys(modules).length === 0) return {};
     const {
-      Map,
+      MapBlock,
       MapView,
       FeatureLayer,
       MapImageLayer,
@@ -257,7 +257,7 @@ const Webmap = (props) => {
       return customBase;
     };
 
-    const map = new Map({
+    const map = new MapBlock({
       basemap:
         data?.base?.use_custom_base && data?.base?.custom_base_layer
           ? setCustomBasemap(data?.base?.custom_base_layer)

package/src/components/visualization/VisualizationView.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import Webmap from '../Webmap';
-import LegendView from '../LegendView';
 import { hasBlocksData } from '@plone/volto/helpers';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
+import Webmap from '../Webmap';
+import ExtraViews from '../ExtraViews';
 
 const VisualizationView = (props) => {
   const { content = {} } = props;
@@ -16,7 +17,20 @@ const VisualizationView = (props) => {
       ) : (
         <>
           <Webmap data={map_visualization_data} />
-          <LegendView data={map_visualization_data} show_viewer={true} />
+          <ExtraViews
+            data={{
+              show_viewer: true,
+              show_legend: true,
+              show_note: false,
+              show_sources: false,
+              show_more_info: false,
+              show_share: true,
+              map_visualization_data: {
+                ...map_visualization_data,
+                ...pickMetadata(content),
+              },
+            }}
+          />
         </>
       )}
     </div>

package/src/components/visualization/VisualizationViewWidget.jsx

@@ -1,12 +1,32 @@
+import { connect } from 'react-redux';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
 import Webmap from '../Webmap';
-import LegendView from '../LegendView';
+import ExtraViews from '../ExtraViews';
 
-export default function VisualizationViewWidget(props) {
+function VisualizationViewWidget(props) {
   const { value: map_visualization_data = {} } = props;
+
   return (
     <>
       <Webmap data={map_visualization_data} />
-      <LegendView data={map_visualization_data} show_viewer={true} />
+      <ExtraViews
+        data={{
+          show_viewer: true,
+          show_legend: true,
+          show_note: false,
+          show_sources: false,
+          show_more_info: false,
+          show_share: true,
+          map_visualization_data: {
+            ...map_visualization_data,
+            ...pickMetadata(props.content),
+          },
+        }}
+      />
     </>
   );
 }
+
+export default connect((state) => ({
+  content: state.content.data,
+}))(VisualizationViewWidget);

package/src/index.js

@@ -12,9 +12,6 @@ import VisualizationView from './components/visualization/VisualizationView';
 
 import SimpleColorPickerWidget from './components/widgets/SimpleColorPickerWidget';
 
-import { data_visualizations } from './middlewares';
-import * as addonReducers from './reducers';
-
 import './less/global.less';
 
 export default (config) => {
@@ -67,15 +64,5 @@ export default (config) => {
   //map viewer for the visualization(content-type)
   config.views.contentTypesViews.map_visualization = VisualizationView;
 
-  config.settings.storeExtenders = [
-    ...(config.settings.storeExtenders || []),
-    data_visualizations,
-  ];
-
-  config.addonReducers = {
-    ...config.addonReducers,
-    ...addonReducers,
-  };
-
   return config;
 };

package/src/actionTypes.js

@@ -1 +0,0 @@
-export const GET_MAP_VISUALIZATION = 'GET_MAP_VISUALIZATION';

package/src/actions.js

@@ -1,12 +0,0 @@
-import { GET_MAP_VISUALIZATION } from './actionTypes';
-
-export function getVisualization(path) {
-  return {
-    type: GET_MAP_VISUALIZATION,
-    path,
-    request: {
-      op: 'get',
-      path: `${path}/@map-visualization`,
-    },
-  };
-}

package/src/middlewares/index.js

@@ -1,14 +0,0 @@
-import { GET_MAP_VISUALIZATION } from '../actionTypes';
-
-export const data_visualizations = (middlewares) => [
-  (store) => (next) => (action) => {
-    if (action.type === GET_MAP_VISUALIZATION) {
-      store.dispatch({
-        type: `${GET_MAP_VISUALIZATION}_PENDING`,
-        path: action.path,
-      });
-    }
-    return next(action);
-  },
-  ...middlewares,
-];

package/src/middlewares/map_visualizations.js

@@ -1 +0,0 @@
-export * from './map_visualizations';

package/src/reducers/index.js

@@ -1,3 +0,0 @@
-import map_visualizations from './map_visualizations';
-
-export { map_visualizations };

package/src/reducers/map_visualizations.js

@@ -1,48 +0,0 @@
-import { GET_MAP_VISUALIZATION } from '../actionTypes';
-
-const initialState = {
-  data: {},
-  error: null,
-  loaded: false,
-  loading: false,
-};
-
-export default function data_providers(state = initialState, action = {}) {
-  const path = action.path
-    ? action.path.replace(`/@map-visualization`, '')
-    : undefined;
-
-  switch (action.type) {
-    case `${GET_MAP_VISUALIZATION}_PENDING`:
-      return {
-        ...state,
-        error: null,
-        loaded: false,
-        loading: true,
-      };
-
-    case `${GET_MAP_VISUALIZATION}_SUCCESS`:
-      return {
-        ...state,
-        error: null,
-        data: {
-          ...state.data,
-          [path]: action.result.map_visualization,
-        },
-        loaded: true,
-        loading: false,
-      };
-
-    case `${GET_MAP_VISUALIZATION}_FAIL`:
-      return {
-        ...state,
-        error: action.error,
-        data: { ...state.data },
-        loaded: false,
-        loading: false,
-      };
-
-    default:
-      return state;
-  }
-}