@eeacms/volto-eea-map 0.1.13 → 0.1.16

package/CHANGELOG.md

@@ -4,8 +4,46 @@ 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.16](https://github.com/eea/volto-eea-map/compare/0.1.15...0.1.16)
+
+- faster update q params for view/edit [`a2d64fb`](https://github.com/eea/volto-eea-map/commit/a2d64fb1112bc129d3183403649a0e5dde822745)
+
+#### [0.1.15](https://github.com/eea/volto-eea-map/compare/0.1.14...0.1.15)
+
+> 26 August 2022
+
+- Quick fix [`#15`](https://github.com/eea/volto-eea-map/pull/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)
+- Change data queries cards [`8d3c742`](https://github.com/eea/volto-eea-map/commit/8d3c74239f62782737108c25e84683239e6ab12f)
+- Set default settings [`2c26f57`](https://github.com/eea/volto-eea-map/commit/2c26f571618d289158c7d32fd9814edcd29a7c60)
+- Add description to layer [`cccfd59`](https://github.com/eea/volto-eea-map/commit/cccfd598060c4228215a5add1da3e159312966b2)
+- only embed viz for now [`6bb7daf`](https://github.com/eea/volto-eea-map/commit/6bb7daf458a47bd185870ec3627a542f8ba715bc)
+- Visualization improvements [`2a77f8b`](https://github.com/eea/volto-eea-map/commit/2a77f8bba1f6fd840d41043ee41b1b3bd23807f3)
+- Cleanup [`6d6ceb9`](https://github.com/eea/volto-eea-map/commit/6d6ceb99768ff477a727cf217e48099e6f2d1a59)
+- Add all query parameters with all values [`2f8c617`](https://github.com/eea/volto-eea-map/commit/2f8c61711154953ec25e20614b4ad96ed2bf592b)
+- Data query widget visual improvements [`7eb3144`](https://github.com/eea/volto-eea-map/commit/7eb3144ad58a839ccc96f22d58a441b245893ea7)
+- Data query widget more responsive to changes [`bb86329`](https://github.com/eea/volto-eea-map/commit/bb863299d51627a28f02e2cda133fc0e3bf9ebe9)
+
 #### [0.1.13](https://github.com/eea/volto-eea-map/compare/0.1.12...0.1.13)
 
+> 22 August 2022
+
+- Enable Embed EEA map access to data_query [`#13`](https://github.com/eea/volto-eea-map/pull/13)
 - update embed map with data_query [`719c007`](https://github.com/eea/volto-eea-map/commit/719c00776dff7ba63bbd57761a2c86ec5345a911)
 
 #### [0.1.12](https://github.com/eea/volto-eea-map/compare/0.1.11...0.1.12)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.13",
+  "version": "0.1.16",
   "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/actionTypes.js

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

package/src/actions.js

@@ -1,4 +1,4 @@
-import { GET_MAP_VISUALIZATION } from './constants';
+import { GET_MAP_VISUALIZATION } from './actionTypes';
 
 export function getVisualization(path) {
   return {

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

@@ -11,7 +11,7 @@ import View from './View';
 import { getContent } from '@plone/volto/actions';
 
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
-import './styles/map.css';
+import '../../../styles/map.css';
 
 const Edit = (props) => {
   const { block, data, onChangeBlock, selected, id } = props;

package/src/components/Blocks/EEAMap/Schema.js

@@ -39,16 +39,14 @@ export const Schema = (props) => {
         title: 'Show legend',
         type: 'boolean',
       },
-      show_download: {
-        title: 'Show download',
-        type: 'boolean',
-      },
+
       show_viewer: {
         title: 'Show web viewer',
         type: 'boolean',
       },
       data_query_params: {
-        title: 'Data query parameters',
+        title: 'Query parameters',
+        description: 'ddafdfas',
         widget: 'data_query_widget',
       },
     },

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

@@ -3,8 +3,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 
-import Webmap from './components/Webmap';
-import ExtraViews from './components/widgets/ExtraViews';
+import Webmap from '../../Webmap';
+import ExtraViews from '../../ExtraViews';
+
 import { PrivacyProtection } from '@eeacms/volto-embed';
 import { getContent } from '@plone/volto/actions';
 

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

@@ -10,7 +10,9 @@ import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import View from './View';
 import { Schema } from './Schema';
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
-import './styles/map.css';
+import '../../../styles/map.css';
+
+import _ from 'lodash';
 
 const Edit = (props) => {
   const { block, data, onChangeBlock, selected, id } = props;
@@ -24,7 +26,7 @@ const Edit = (props) => {
   React.useEffect(() => {
     if (
       !data.data_query_params ||
-      props.data_query !== data.data_query_params
+      !_.isEqual(props.data_query, data.data_query_params)
     ) {
       onChangeBlock(block, {
         ...data,
@@ -32,11 +34,11 @@ const Edit = (props) => {
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.data_query, block, data]);
+  }, [props.data_query, block, data.data_query_params]);
 
   return (
     <div>
-      <View data={data} id={id} />
+      <View data={data} id={id} isEdit={true} />
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}
@@ -58,9 +60,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/Schema.js

@@ -10,10 +10,10 @@ export const Schema = (props) => {
           'description',
           'height',
           'show_legend',
-          'show_download',
           'show_viewer',
           'show_sources',
-          'data_query_params',
+          'enable_queries',
+          ...(props.data.enable_queries ? ['data_query_params'] : []),
         ],
       },
     ],
@@ -32,22 +32,28 @@ export const Schema = (props) => {
       },
       show_sources: {
         title: 'Show sources',
+        description: 'Will show sources set in this page Data provenance',
         type: 'boolean',
       },
       show_legend: {
         title: 'Show legend',
         type: 'boolean',
       },
-      show_download: {
-        title: 'Show download',
+      show_viewer: {
+        title: 'Show API link',
+        description: 'Open the map on ArcGIS js service',
         type: 'boolean',
       },
-      show_viewer: {
-        title: 'Show web viewer',
+      enable_queries: {
+        title: 'Enable queries',
+        description:
+          'Will import Criteria from content-type and try to query map layer fields.',
         type: 'boolean',
       },
       data_query_params: {
-        title: 'Data query parameters',
+        title: 'Query parameters',
+        description:
+          'When using page level parameters to filter the map, please map those to the corresponding field name from the ArcGIS service',
         widget: 'data_query_widget',
       },
     },

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

@@ -4,85 +4,90 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 
 import { PrivacyProtection } from '@eeacms/volto-embed';
-import Webmap from '../EEAMap/components/Webmap';
-import ExtraViews from '../EEAMap/components/widgets/ExtraViews';
+
 import { getContent } from '@plone/volto/actions';
+import Webmap from '../../Webmap';
+import ExtraViews from '../../ExtraViews';
 
 const View = (props) => {
-  const { data, viz_content = {}, id } = props || {};
-  const { height = '', vis_url = '' } = data;
-
-  const { map_visualization_data = '', data_provenance = {} } =
-    viz_content || {};
+  const { data, id, isEdit, map_visualization = {}, data_provenance = {} } =
+    props || {};
+  const { height = '', vis_url = '', enable_queries } = data;
 
-  const [mapData, setMapData] = React.useState(map_visualization_data);
+  const [mapData, setMapData] = React.useState(map_visualization);
 
   React.useEffect(() => {
-    if (vis_url && !map_visualization_data) {
+    if (vis_url) {
       props.getContent(vis_url, null, id);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vis_url]);
+  }, [vis_url, enable_queries]);
 
   React.useEffect(() => {
+    const query_params = isEdit
+      ? props.data?.data_query_params
+      : props?.data_query;
+    var altMapData = { ...map_visualization };
+
     if (
-      props.data_query &&
-      props.data_query.length > 0 &&
-      map_visualization_data
+      enable_queries &&
+      query_params &&
+      query_params.length > 0 &&
+      altMapData.layers &&
+      altMapData.layers.map_layers &&
+      altMapData.layers.map_layers.length > 0
     ) {
-      let altMapData = { ...map_visualization_data };
+      let rules = [];
+      altMapData.layers.map_layers.forEach((l, j) => {
+        query_params.forEach((param, i) => {
+          const matchingFields =
+            l.map_layer && l.map_layer.fields && l.map_layer.fields.length > 0
+              ? l.map_layer.fields.filter(
+                  (field, k) =>
+                    field.name === param.alias || field.name === param.i,
+                )
+              : [];
 
-      props.data_query.forEach((param, i) => {
-        if (
-          map_visualization_data.layers &&
-          map_visualization_data.layers.map_layers &&
-          map_visualization_data.layers.map_layers.length > 0
-        ) {
-          map_visualization_data.layers.map_layers.forEach((l, j) => {
-            if (
-              l.map_layer &&
-              l.map_layer.fields &&
-              l.map_layer.fields.length > 0 &&
-              l.map_layer.fields.filter(
-                (field, k) =>
-                  field.name === param.alias || field.name === param.i,
-              ).length > 0
-            ) {
-              let autoQuery = {
-                combinator: 'or',
-                rules: props.data_query.map((q, i) => {
+          matchingFields.forEach((m, i) => {
+            const newRules = param.v
+              ? param.v.map((paramVal, i) => {
                   return {
-                    field: param.alias ? param.alias : param.i,
+                    field: m.name,
                     operator: '=',
-                    value: param.v[0],
+                    value: paramVal,
                   };
-                }),
-              };
-              altMapData.layers.map_layers[j].map_layer.query = autoQuery;
-            }
+                })
+              : [];
+            rules = rules.concat(newRules);
           });
-        }
+        });
+        let autoQuery = {
+          combinator: 'or',
+          rules,
+        };
+        altMapData.layers.map_layers[j].map_layer.query = autoQuery;
       });
-      setMapData(altMapData);
     }
-  }, [props.data_query, map_visualization_data]);
+    setMapData(altMapData);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map_visualization, props.data, props.data_query, isEdit, enable_queries]);
 
   return (
     <div>
       <PrivacyProtection data={data} {...props}>
-        {map_visualization_data && (
+        {mapData && (
           <div>
             <Webmap data={mapData} height={height} />
             <ExtraViews
               data={{
                 ...data,
                 data_provenance,
-                map_data: map_visualization_data,
+                map_data: map_visualization,
               }}
             />
           </div>
         )}
-        {!map_visualization_data && (
+        {!mapData && (
           <p>No map view to show. Set visualization in block configuration.</p>
         )}
       </PrivacyProtection>
@@ -94,7 +99,10 @@ export default compose(
   connect(
     (state, props) => ({
       data_query: state.content.data.data_query,
-      viz_content: state.content.subrequests?.[props.id]?.data,
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
+      map_visualization:
+        state.content.subrequests?.[props.id]?.data?.map_visualization_data,
     }),
     {
       getContent,

package/src/components/ExtraViews.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+
+import LegendWidget from './widgets/LegendWidget';
+import { serializeNodes } from 'volto-slate/editor/render';
+
+import codeSVG from '../static/code-line.svg';
+
+const ExtraViews = ({ data }) => {
+  const {
+    map_data = {},
+    description,
+    show_legend,
+    show_viewer,
+    show_sources,
+    data_provenance = {},
+  } = data;
+  return (
+    <div className="extra-eea-map-content">
+      {map_data && map_data.layers?.map_layers[0] && show_viewer && (
+        <div
+          style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
+        >
+          {show_viewer && (
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href={
+                `https://www.arcgis.com/home/webmap/viewer.html?url=` +
+                `${map_data.layers.map_layers[0].map_layer.map_service_url}&source=sd`
+              }
+            >
+              <Button size="tiny">
+                <Button.Content>
+                  <img
+                    className="extra-view-external-button"
+                    src={codeSVG}
+                    alt=""
+                    title="Show API link"
+                  />
+                </Button.Content>
+              </Button>
+            </a>
+          )}
+        </div>
+      )}
+      {show_legend && map_data && <LegendWidget data={map_data} />}
+      {show_sources && (
+        <>
+          {data_provenance &&
+          data_provenance.data &&
+          data_provenance.data.length > 0 ? (
+            <div>
+              <h3>Sources:</h3>
+              <ul>
+                {data_provenance.data.map((param, i) => (
+                  <li key={i}>
+                    <div className="map_source_param_container">
+                      <UniversalLink
+                        className="map_source_title"
+                        href={param.link}
+                      >
+                        {param.title}
+                      </UniversalLink>
+                      ,
+                      <span className="map_source_description">
+                        {param.organisation}
+                      </span>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : (
+            <p>Data provenance is not set for visualization used or page</p>
+          )}
+        </>
+      )}
+      {description && serializeNodes(description)}
+    </div>
+  );
+};
+
+export default ExtraViews;

package/src/components/{Blocks/EEAMap/components/Webmap.jsx → Webmap.jsx}

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React from 'react';
-import { withDeviceSize } from '@eeacms/volto-eea-map/hocs';
+import { withDeviceSize } from '../hocs';
 import { loadModules } from 'esri-loader';
 import { formatQuery } from 'react-querybuilder';
 
@@ -20,8 +20,8 @@ const Webmap = (props) => {
   const { editMode, height, id } = props;
 
   const data = React.useMemo(() => props.data || {}, [props.data]);
-  const device = React.useMemo(() => props.device || {}, [props.device]);
 
+  const device = React.useMemo(() => props.device || {}, [props.device]);
   const { base = {}, layers = {}, legend = {}, general = {} } = data;
 
   const { base_layer = '' } = base;
@@ -32,6 +32,7 @@ const Webmap = (props) => {
     layers.map_layers
       .filter(({ map_layer }) => map_layer)
       .map((l, i) => l.map_layer);
+
   const options = {
     css: true,
   };
@@ -86,34 +87,35 @@ const Webmap = (props) => {
       Zoom,
     } = modules;
     let layers =
-      map_layers &&
-      map_layers.length > 0 &&
-      map_layers
-        .filter(({ map_service_url, layer }) => map_service_url && layer)
-        .map(({ map_service_url, layer, query = '' }) => {
-          const url = `${map_service_url}/${layer}`;
-          let mapLayer;
-          switch (layer.type) {
-            case 'Raster Layer':
-              mapLayer = new MapImageLayer({
-                url: map_service_url,
-              });
-              break;
-            case 'Feature Layer':
-              mapLayer = new FeatureLayer({
-                url,
-                definitionExpression: query ? formatQuery(query, 'sql') : '',
-              });
-              break;
-            case 'Group Layer':
-              mapLayer = new GroupLayer({ url });
-              break;
-            default:
-              break;
-          }
-          return mapLayer;
-        });
-
+      map_layers && map_layers.length > 0
+        ? map_layers
+            .filter(({ map_service_url, layer }) => map_service_url && layer)
+            .map(({ map_service_url, layer, query = '' }) => {
+              const url = `${map_service_url}/${layer}`;
+              let mapLayer;
+              switch (layer.type) {
+                case 'Raster Layer':
+                  mapLayer = new MapImageLayer({
+                    url: map_service_url,
+                  });
+                  break;
+                case 'Feature Layer':
+                  mapLayer = new FeatureLayer({
+                    url,
+                    definitionExpression: query
+                      ? formatQuery(query, 'sql')
+                      : '',
+                  });
+                  break;
+                case 'Group Layer':
+                  mapLayer = new GroupLayer({ url });
+                  break;
+                default:
+                  break;
+              }
+              return mapLayer;
+            })
+        : [];
     const map = new Map({
       basemap: base_layer || 'hybrid',
       layers,
@@ -193,7 +195,7 @@ const Webmap = (props) => {
       });
     }
     return { view, map };
-  }, [modules, base_layer, map_layers, general, legend]);
+  }, [modules, data, data.layers, map_layers]);
 
   return (
     <div>

package/src/components/index.js

@@ -1,7 +1,7 @@
-import EEAMapView from './Blocks/EEAMap/View';
-import EEAMapEdit from './Blocks/EEAMap/Edit';
+export EEAMapView from './Blocks/EEAMap/View';
+export EEAMapEdit from './Blocks/EEAMap/Edit';
+export Webmap from './Webmap';
+export ExtraViews from './ExtraViews';
 
-import EmbedMapView from './Blocks/EmbedEEAMap/View';
-import EmbedMapEdit from './Blocks/EmbedEEAMap/Edit';
-
-export { EEAMapEdit, EEAMapView, EmbedMapView, EmbedMapEdit };
+export EmbedMapView from './Blocks/EmbedEEAMap/View';
+export EmbedMapEdit from './Blocks/EmbedEEAMap/Edit';