@eeacms/volto-eea-map 0.1.14 → 0.1.15

package/CHANGELOG.md

@@ -4,8 +4,21 @@ 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).
 
+#### [0.1.15](https://github.com/eea/volto-eea-map/compare/0.1.14...0.1.15)
+
+- more space for button [`8fa6a3b`](https://github.com/eea/volto-eea-map/commit/8fa6a3b230cd835d0fbcc4881b14d51d318b91be)
+- eslint happy [`30b41d2`](https://github.com/eea/volto-eea-map/commit/30b41d2d18fcf2d195cdd08a2b6b9c78e6a303bb)
+- better update [`a1ca2f5`](https://github.com/eea/volto-eea-map/commit/a1ca2f51d1f24d932ad03fe61b5a4a564b491873)
+- update deps [`c9d2f92`](https://github.com/eea/volto-eea-map/commit/c9d2f920c076e77f030cd841ca5a1e49cc1bc319)
+- use only query params from qidget [`303793f`](https://github.com/eea/volto-eea-map/commit/303793f6f3af8c0cf8857e08a61cbf9e16c7d810)
+- get map data from getContent [`40ae731`](https://github.com/eea/volto-eea-map/commit/40ae73135cd93e49ce0956d4ca0ef5e3425e3d19)
+- use button on action [`86a090b`](https://github.com/eea/volto-eea-map/commit/86a090b17ccf3f951146cb8adcaf539fd8cf9faf)
+
 #### [0.1.14](https://github.com/eea/volto-eea-map/compare/0.1.13...0.1.14)
 
+> 26 August 2022
+
+- Develop [`#14`](https://github.com/eea/volto-eea-map/pull/14)
 - new sources styles, icons from remixicon [`c9cca2a`](https://github.com/eea/volto-eea-map/commit/c9cca2a5e41322cfdeca1865b47a1892514c1cfc)
 - reorganize & clean [`a902b89`](https://github.com/eea/volto-eea-map/commit/a902b8945389b19b388e85e00066b2c46a9e1a2e)
 - Layer widget improvements [`99abe57`](https://github.com/eea/volto-eea-map/commit/99abe5722590719ac7e640de44a69ee19fcecfdf)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -21,9 +21,10 @@
     "volto-slate"
   ],
   "dependencies": {
-    "@eeacms/volto-embed": "^2.0.1",
+    "@eeacms/volto-embed": "4.0.2",
     "@plone/scripts": "*",
     "esri-loader": "3.5.0",
+    "lodash": "4.17.21",
     "react-querybuilder": "4.2.3",
     "volto-slate": "*"
   },

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

@@ -12,6 +12,8 @@ import { Schema } from './Schema';
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
 import '../../../styles/map.css';
 
+import _ from 'lodash';
+
 const Edit = (props) => {
   const { block, data, onChangeBlock, selected, id } = props;
   const schema = React.useMemo(() => Schema(props), [props]);
@@ -21,15 +23,17 @@ const Edit = (props) => {
     //    eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.vis_url]);
   React.useEffect(() => {
-    const diffParams = props.data_query !== data.data_query_params;
-    if (diffParams || !data.data_query_params) {
+    if (
+      !data.data_query_params ||
+      !_.isEqual(props.data_query, data.data_query_params)
+    ) {
       onChangeBlock(block, {
         ...data,
         data_query_params: props.data_query,
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.data_query, block, data]);
+  }, [props.data_query, block, data.data_query_params]);
 
   return (
     <div>
@@ -55,9 +59,8 @@ const Edit = (props) => {
 export default compose(
   connect(
     (state, props) => ({
+      block_data: state.content.data,
       data_query: state.content.data.data_query,
-      data_provenance:
-        state.content.subrequests?.[props.id]?.data?.data_provenance,
     }),
     {
       getContent,

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

@@ -6,30 +6,25 @@ import { compose } from 'redux';
 import { PrivacyProtection } from '@eeacms/volto-embed';
 
 import { getContent } from '@plone/volto/actions';
-import { getVisualization } from '../../../actions';
 import Webmap from '../../Webmap';
 import ExtraViews from '../../ExtraViews';
 
 const View = (props) => {
-  const { data, viz_content = {}, id, isEdit, map_visualization } = props || {};
+  const { data, id, isEdit, map_visualization = {}, data_provenance = {} } =
+    props || {};
   const { height = '', vis_url = '', enable_queries } = data;
 
-  const { data_provenance = {} } = viz_content || {};
-
   const [mapData, setMapData] = React.useState(map_visualization);
 
   React.useEffect(() => {
     if (vis_url) {
       props.getContent(vis_url, null, id);
-      props.getVisualization(vis_url);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vis_url, enable_queries]);
 
   React.useEffect(() => {
-    const query_params = isEdit
-      ? props.data.data_query_params
-      : props.data_query;
+    const query_params = props?.data?.data_query_params;
     var altMapData = { ...map_visualization };
 
     if (
@@ -72,14 +67,8 @@ const View = (props) => {
       });
     }
     setMapData(altMapData);
-  }, [
-    map_visualization,
-    props.data,
-    props.data_query,
-    viz_content,
-    isEdit,
-    enable_queries,
-  ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map_visualization, props.data, props.data_query, isEdit, enable_queries]);
 
   return (
     <div>
@@ -108,14 +97,13 @@ export default compose(
   connect(
     (state, props) => ({
       data_query: state.content.data.data_query,
-      state,
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
       map_visualization:
-        state.map_visualizations?.data[props.data.vis_url]?.data,
-      viz_content: state.content.subrequests?.[props.id]?.data,
+        state.content.subrequests?.[props.id]?.data?.map_visualization_data,
     }),
     {
       getContent,
-      getVisualization,
     },
   ),
 )(View);

package/src/components/visualization/VisualizationEditorWidget.jsx

@@ -32,7 +32,7 @@ const VisualizationEditorWidget = (props) => {
   let schema = PanelsSchema({ data: dataForm });
 
   React.useEffect(() => {
-    if (!intValue.general) {
+    if (!intValue?.general) {
       setIntValue({
         ...intValue,
         general: {
@@ -42,7 +42,7 @@ const VisualizationEditorWidget = (props) => {
         },
       });
     }
-    if (!intValue.base) {
+    if (!intValue?.base) {
       setIntValue({
         ...intValue,
         base: {
@@ -50,6 +50,7 @@ const VisualizationEditorWidget = (props) => {
         },
       });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [intValue]);
 
   return (

package/src/components/widgets/LegendWidget.jsx

@@ -78,18 +78,16 @@ const LegendWidget = (props) => {
   return (
     <>
       <div className="legend-container">
-        <h4
-          role="presentation"
-          className="legend-title"
-          onClick={() => setExpand(!expand)}
-        >
-          <Icon
-            name={expand ? downKeySVG : rightKeySVG}
-            title={expand ? 'Collapse' : 'Expand'}
-            size="17px"
-          />
-          Legend:
-        </h4>
+        <button className="legend-action" onClick={() => setExpand(!expand)}>
+          <h4 role="presentation" className="legend-title">
+            <Icon
+              name={expand ? downKeySVG : rightKeySVG}
+              title={expand ? 'Collapse' : 'Expand'}
+              size="17px"
+            />
+            Legend:
+          </h4>
+        </button>
         <Grid columns={legendColumns}>
           {(!map_layers || map_layers.length === 0) && (
             <p>

package/src/styles/map.css

@@ -127,7 +127,6 @@
   width: fit-content;
   align-items: center;
   margin: 0 !important;
-  cursor: pointer;
 }
 
 .data-param-title {
@@ -174,6 +173,13 @@
   color: inherit;
 }
 
+.legend-action {
+  padding: 10px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
 @keyframes fadeDown {
   from {
     opacity: 0;