@eeacms/volto-eea-map 0.1.11 → 0.1.14

package/CHANGELOG.md

@@ -4,8 +4,41 @@ 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.14](https://github.com/eea/volto-eea-map/compare/0.1.13...0.1.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)
+
+> 22 August 2022
+
+- Develop [`#12`](https://github.com/eea/volto-eea-map/pull/12)
+- cleanup [`53a2d89`](https://github.com/eea/volto-eea-map/commit/53a2d897675af2f75d8bd787ed07cdcfac69bdd0)
+- get criteria and map it as query on fresh layers [`51f8087`](https://github.com/eea/volto-eea-map/commit/51f80870764d65140ac0a6408c01c0b63476bbd2)
+
 #### [0.1.11](https://github.com/eea/volto-eea-map/compare/0.1.10...0.1.11)
 
+> 18 August 2022
+
+- Legend for each layer in object list [`#11`](https://github.com/eea/volto-eea-map/pull/11)
 - Legend for all layers [`2d9285e`](https://github.com/eea/volto-eea-map/commit/2d9285e12ea512b7a1f24300ad2f7b3072e334d5)
 
 #### [0.1.10](https://github.com/eea/volto-eea-map/compare/0.1.9...0.1.10)

package/package.json

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

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

@@ -1,15 +1,35 @@
 import React from 'react';
+
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
 import { SidebarPortal } from '@plone/volto/components';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
 import { Schema } from './Schema';
 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;
   const schema = React.useMemo(() => Schema(props), [props]);
 
+  React.useEffect(() => {
+    if (
+      !data.data_query_params ||
+      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]);
+
   return (
     <div>
       <View data={data} id={id} />
@@ -31,4 +51,15 @@ const Edit = (props) => {
   );
 };
 
-export default Edit;
+export default compose(
+  connect(
+    (state, props) => ({
+      data_query: state.content.data.data_query,
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(Edit);

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

@@ -13,6 +13,7 @@ export const Schema = (props) => {
           'show_download',
           'show_viewer',
           'show_sources',
+          'data_query_params',
         ],
       },
     ],
@@ -38,14 +39,16 @@ 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: 'Query parameters',
+        description: 'ddafdfas',
+        widget: 'data_query_widget',
+      },
     },
     required: [],
   };

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

@@ -3,17 +3,17 @@ 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';
 
 const View = (props) => {
-  const { data, id, path, data_provenance } = props || {};
+  const { data, id, path } = props || {};
   const { map_data = {}, height = '' } = data;
 
   React.useEffect(() => {
-    //   get content from document
     if (path) {
       props.getContent(path, null, id);
     }
@@ -24,7 +24,7 @@ const View = (props) => {
     <div>
       <PrivacyProtection data={data} {...props}>
         <Webmap data={map_data} height={height} id={id} />
-        <ExtraViews data={{ ...data, data_provenance }} />
+        <ExtraViews data={data} />
       </PrivacyProtection>
     </div>
   );
@@ -33,6 +33,7 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
+      data_query: state.content.subrequests?.[props.id]?.data?.data_query,
       data_provenance:
         state.content.subrequests?.[props.id]?.data?.data_provenance,
     }),

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

@@ -1,18 +1,39 @@
 import React from 'react';
 import { SidebarPortal } from '@plone/volto/components';
+
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { getContent } from '@plone/volto/actions';
+
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
-import { Schema } from './Schema';
 import View from './View';
+import { Schema } from './Schema';
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
-import './styles/map.css';
+import '../../../styles/map.css';
 
 const Edit = (props) => {
   const { block, data, onChangeBlock, selected, id } = props;
   const schema = React.useMemo(() => Schema(props), [props]);
 
+  React.useEffect(() => {
+    props.getContent(data.vis_url, null, id);
+    //    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) {
+      onChangeBlock(block, {
+        ...data,
+        data_query_params: props.data_query,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.data_query, block, data]);
+
   return (
     <div>
-      <View data={data} id={id} />
+      <View data={data} id={id} isEdit={true} />
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}
@@ -31,4 +52,15 @@ const Edit = (props) => {
   );
 };
 
-export default Edit;
+export default compose(
+  connect(
+    (state, props) => ({
+      data_query: state.content.data.data_query,
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(Edit);

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

@@ -10,9 +10,10 @@ export const Schema = (props) => {
           'description',
           'height',
           'show_legend',
-          'show_download',
           'show_viewer',
           'show_sources',
+          'enable_queries',
+          ...(props.data.enable_queries ? ['data_query_params'] : []),
         ],
       },
     ],
@@ -31,20 +32,30 @@ 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: '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',
+      },
     },
     required: [],
   };

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

@@ -4,40 +4,99 @@ 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 { getVisualization } from '../../../actions';
+import Webmap from '../../Webmap';
+import ExtraViews from '../../ExtraViews';
 
 const View = (props) => {
-  const { data, viz_content = {}, id } = props || {};
-  const { height = '', vis_url = '' } = data;
+  const { data, viz_content = {}, id, isEdit, map_visualization } = props || {};
+  const { height = '', vis_url = '', enable_queries } = data;
+
+  const { data_provenance = {} } = viz_content || {};
 
-  const { map_visualization_data = '', 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]);
+  }, [vis_url, enable_queries]);
+
+  React.useEffect(() => {
+    const query_params = isEdit
+      ? props.data.data_query_params
+      : props.data_query;
+    var altMapData = { ...map_visualization };
+
+    if (
+      enable_queries &&
+      query_params &&
+      query_params.length > 0 &&
+      altMapData.layers &&
+      altMapData.layers.map_layers &&
+      altMapData.layers.map_layers.length > 0
+    ) {
+      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,
+                )
+              : [];
+
+          matchingFields.forEach((m, i) => {
+            const newRules = param.v
+              ? param.v.map((paramVal, i) => {
+                  return {
+                    field: m.name,
+                    operator: '=',
+                    value: paramVal,
+                  };
+                })
+              : [];
+            rules = rules.concat(newRules);
+          });
+        });
+        let autoQuery = {
+          combinator: 'or',
+          rules,
+        };
+        altMapData.layers.map_layers[j].map_layer.query = autoQuery;
+      });
+    }
+    setMapData(altMapData);
+  }, [
+    map_visualization,
+    props.data,
+    props.data_query,
+    viz_content,
+    isEdit,
+    enable_queries,
+  ]);
 
   return (
     <div>
       <PrivacyProtection data={data} {...props}>
-        {map_visualization_data && (
+        {mapData && (
           <div>
-            <Webmap data={map_visualization_data} height={height} />
+            <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>
@@ -48,10 +107,15 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
+      data_query: state.content.data.data_query,
+      state,
+      map_visualization:
+        state.map_visualizations?.data[props.data.vis_url]?.data,
       viz_content: state.content.subrequests?.[props.id]?.data,
     }),
     {
       getContent,
+      getVisualization,
     },
   ),
 )(View);

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';