@eeacms/volto-eea-map 0.1.12 → 0.1.15

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.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)
+- 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)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.12",
+  "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/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,11 +11,12 @@ 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 ||

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

@@ -1,18 +1,43 @@
 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';
+
+import _ from 'lodash';
 
 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(() => {
+    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.data_query_params]);
+
   return (
     <div>
-      <View data={data} id={id} />
+      <View data={data} id={id} isEdit={true} />
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}
@@ -31,4 +56,14 @@ const Edit = (props) => {
   );
 };
 
-export default Edit;
+export default compose(
+  connect(
+    (state, props) => ({
+      block_data: state.content.data,
+      data_query: state.content.data.data_query,
+    }),
+    {
+      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,88 @@ 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 { data, id, isEdit, map_visualization = {}, data_provenance = {} } =
+    props || {};
+  const { height = '', vis_url = '', enable_queries } = data;
 
-  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);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vis_url]);
+  }, [vis_url, enable_queries]);
+
+  React.useEffect(() => {
+    const query_params = props?.data?.data_query_params;
+    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);
+    // 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={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,7 +96,11 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
-      viz_content: state.content.subrequests?.[props.id]?.data,
+      data_query: state.content.data.data_query,
+      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';

package/src/components/visualization/VisualizationEditorWidget.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Modal, Button, Grid } from 'semantic-ui-react';
+
+import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+
+import PanelsSchema from './panelsSchema';
+import Webmap from '../Webmap';
+
+const VisualizationEditorWidget = (props) => {
+  const [open, setOpen] = React.useState(false);
+  const { onChange = {}, id } = props;
+  const block = React.useMemo(() => props.block, [props.block]);
+  const value = React.useMemo(() => props.value, [props.value]);
+
+  const [intValue, setIntValue] = React.useState(value);
+
+  const dataForm = { map_data: intValue };
+  const handleApplyChanges = () => {
+    onChange(id, intValue);
+    setOpen(false);
+  };
+
+  const handleClose = () => {
+    setIntValue(value);
+    setOpen(false);
+  };
+
+  const handleChangeField = (val) => {
+    setIntValue(val);
+  };
+
+  let schema = PanelsSchema({ data: dataForm });
+
+  React.useEffect(() => {
+    if (!intValue?.general) {
+      setIntValue({
+        ...intValue,
+        general: {
+          print_position: 'top-right',
+          zoom_position: 'top-right',
+          centerOnExtent: true,
+        },
+      });
+    }
+    if (!intValue?.base) {
+      setIntValue({
+        ...intValue,
+        base: {
+          base_layer: 'gray-vector',
+        },
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [intValue]);
+
+  return (
+    <FormFieldWrapper {...props}>
+      <div className="wrapper">
+        <Button
+          floated="right"
+          size="tiny"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpen(true);
+          }}
+        >
+          Open Map Editor
+        </Button>
+      </div>
+
+      {open && (
+        <Modal
+          id="map-editor-modal"
+          style={{ width: '95% !important' }}
+          open={true}
+        >
+          <Modal.Content scrolling>
+            <Grid stackable reversed="mobile vertically tablet vertically">
+              <Grid.Column
+                mobile={12}
+                tablet={12}
+                computer={5}
+                className="map-editor-column"
+              >
+                <InlineForm
+                  block={block}
+                  schema={schema}
+                  onChangeField={(id, value) => {
+                    handleChangeField(value);
+                  }}
+                  formData={dataForm}
+                />
+              </Grid.Column>
+              <Grid.Column mobile={12} tablet={12} computer={7}>
+                <div className="webmap-container">
+                  <Webmap data={intValue} editMode={true} />
+                </div>
+              </Grid.Column>
+            </Grid>
+          </Modal.Content>
+          <Modal.Actions>
+            <Grid>
+              <Grid.Row>
+                <div className="map-edit-actions-container">
+                  <Button onClick={handleClose}>Close</Button>
+                  <Button color="green" onClick={handleApplyChanges}>
+                    Apply changes
+                  </Button>
+                </div>
+              </Grid.Row>
+            </Grid>
+          </Modal.Actions>
+        </Modal>
+      )}
+      <Webmap data={value} editMode={true} />
+    </FormFieldWrapper>
+  );
+};
+
+export default VisualizationEditorWidget;