@eeacms/volto-eea-map 0.1.10 → 0.1.13

package/CHANGELOG.md

@@ -4,10 +4,31 @@ 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.13](https://github.com/eea/volto-eea-map/compare/0.1.12...0.1.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)
 
+> 17 August 2022
+
+- EEA core metadata adaptation [`#10`](https://github.com/eea/volto-eea-map/pull/10)
 - EEA core metadata adaptation for map block to [`5fb5724`](https://github.com/eea/volto-eea-map/commit/5fb5724164e1e9b1ae5143f9bd565c28118be253)
-- EEA core metadata adaptation [`03b62a3`](https://github.com/eea/volto-eea-map/commit/03b62a35165670743d649282ae697dbf71c56a56)
 
 #### [0.1.9](https://github.com/eea/volto-eea-map/compare/0.1.8...0.1.9)
 

package/package.json

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

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

@@ -1,8 +1,15 @@
 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';
 
@@ -10,6 +17,19 @@ 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',
         ],
       },
     ],
@@ -46,6 +47,10 @@ export const Schema = (props) => {
         title: 'Show web viewer',
         type: 'boolean',
       },
+      data_query_params: {
+        title: 'Data query parameters',
+        widget: 'data_query_widget',
+      },
     },
     required: [],
   };

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

@@ -9,11 +9,10 @@ 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 +23,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 +32,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/EEAMap/components/widgets/DataQueryWidget.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FormFieldWrapper, Field } from '@plone/volto/components';
+
+const DataQueryWidget = (props) => {
+  const { value, onChange, id } = props;
+
+  const onChangeAlias = (fieldId, fieldValue) => {
+    let altValue = value;
+    value[fieldId] = { ...value[fieldId], alias: fieldValue };
+    onChange(id, altValue);
+  };
+
+  return (
+    <div>
+      <FormFieldWrapper {...props} noForInFieldLabel></FormFieldWrapper>
+      <div className="data-query-widget-field">
+        {value && value.length > 0 ? (
+          value.map((param, i) => (
+            <div key={i}>
+              <h5 style={{ fontWeight: 'bold' }}>{param.i}</h5>
+              <Field
+                id={i}
+                title="Alias"
+                type="string"
+                description="Data connector parameter alias for matchings. Default is {Key}"
+                onChange={onChangeAlias}
+                value={param?.alias}
+              />
+              <Field
+                id={param.i}
+                title="Values"
+                type="string"
+                description="Parameter value/s"
+                value={param.v.join(',')}
+              />
+            </div>
+          ))
+        ) : (
+          <p style={{ textAlign: 'center' }}>No parameters set</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DataQueryWidget;

package/src/components/Blocks/EEAMap/components/widgets/LayerSelectWidget.jsx

@@ -4,6 +4,11 @@ import { Input, Select, Button, Grid } from 'semantic-ui-react';
 import { QueryBuilder } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { getContent } from '@plone/volto/actions';
+
 import checkSVG from '@plone/volto/icons/check.svg';
 import closeSVG from '@plone/volto/icons/clear.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -12,7 +17,7 @@ import resetSVG from '@plone/volto/icons/reset.svg';
 import { fetchArcgisData } from '../../utils';
 
 const LayerSelectWidget = (props) => {
-  const { onChange, id } = props;
+  const { onChange, id, data_query } = props;
 
   const value = React.useMemo(() => props.value || {}, [props.value]);
 
@@ -63,6 +68,55 @@ const LayerSelectWidget = (props) => {
     }
   };
 
+  React.useEffect(() => {
+    props.getContent('', null, id);
+    //    eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    if (query && !builtQuery) {
+      setBuiltQuery(query);
+    }
+  }, [query, builtQuery]);
+
+  React.useEffect(() => {
+    //detect existing queries in block content. If it exists. Apply matching queries to layer on fresh layer load
+    if (
+      map_service_url &&
+      layer &&
+      !query &&
+      data_query &&
+      data_query.length > 0
+    ) {
+      let autoQuery = {
+        combinator: 'or',
+        rules: [],
+      };
+      data_query.forEach((param, i) => {
+        if (
+          fields &&
+          fields.length > 0 &&
+          fields.filter(
+            (field, j) => field.name === param.alias || field.name === param.i,
+          ).length > 0
+        ) {
+          autoQuery.rules = [
+            ...autoQuery.rules,
+            { field: param.alias || param.i, operator: '=', value: param.v[0] },
+          ];
+        }
+      });
+      if (autoQuery.rules.length > 0) {
+        onChange(id, {
+          ...value,
+          query: autoQuery,
+        });
+        setBuiltQuery(autoQuery);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map_service_url, layer, query, data_query, fields]);
+
   const handleLayerFetch = async (service_url, id) => {
     try {
       let fullLayer = await fetchArcgisData(`${service_url}/${id}`);
@@ -129,8 +183,6 @@ const LayerSelectWidget = (props) => {
             style={{ width: '100%' }}
             error={serviceUrlError}
             value={serviceUrl}
-            // action
-            // actionPosition="right"
           ></Input>
 
           <span style={{ fontSize: '12px', color: 'darkred' }}>
@@ -230,4 +282,14 @@ const LayerSelectWidget = (props) => {
   );
 };
 
-export default LayerSelectWidget;
+export default compose(
+  connect(
+    (state, props) => ({
+      content: state.content.data,
+      data_query: state.content.data.data_query,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(LayerSelectWidget);

package/src/components/Blocks/EEAMap/components/widgets/LegendWidget.jsx

@@ -6,16 +6,33 @@ import { Icon } from '@plone/volto/components';
 import rightKeySVG from '@plone/volto/icons/right-key.svg';
 import downKeySVG from '@plone/volto/icons/down-key.svg';
 
-const LayerLegend = ({ data, name }) => {
+const LayerLegend = ({ data }) => {
   const [expand, setExpand] = React.useState(true);
+  const [legendRows, setLegendRows] = React.useState([]);
 
+  const { id, name } = data.layer || {};
+
+  const fetchLegend = async (url, activeLayerID) => {
+    let legendData = await fetchArcgisData(url);
+
+    const { layers = [] } = legendData;
+    const selectedLayer = layers.filter((l, i) => l.layerId === activeLayerID);
+    setLegendRows(selectedLayer[0].legend);
+  };
+
+  React.useEffect(() => {
+    if (data.map_service_url && id !== undefined) {
+      fetchLegend(`${data.map_service_url}/legend`, id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, data.map_service_url]);
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
       <h5
         role="presentation"
         onClick={() => setExpand(!expand)}
         style={{
-          marginTop: '10px',
+          marginTop: '15px',
           marginBottom: '5px',
           cursor: 'pointer',
           display: 'flex',
@@ -30,8 +47,8 @@ const LayerLegend = ({ data, name }) => {
       </h5>
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         {expand &&
-          data.length > 0 &&
-          data.map((item, i) => {
+          legendRows.length > 0 &&
+          legendRows.map((item, i) => {
             return (
               <span key={i} style={{ display: 'flex', alignItems: 'center' }}>
                 <img
@@ -53,49 +70,25 @@ const LegendWidget = (props) => {
   const data = React.useMemo(() => props.data, [props.data]);
   const { layers = {} } = data;
   const { map_layers = [] } = layers;
-  const [legendLayers, setLegendLayers] = React.useState([]);
-
-  const activeLayer = map_layers.length > 0 ? map_layers[0]?.map_layer : '';
 
-  const fetchLegend = async (url) => {
-    let legendData = await fetchArcgisData(url);
-
-    //TODO: configure this for multiple layers
-    const { layers = [] } = legendData;
-    const selectedLayerLedend = layers.filter(
-      (l, i) => l.layerId === activeLayer.layer.id,
-    );
-    setLegendLayers(selectedLayerLedend);
-  };
-
-  React.useEffect(() => {
-    if (activeLayer) {
-      fetchLegend(`${activeLayer.map_service_url}/legend`);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, activeLayer.map_service_url]);
   return (
     <>
       <div style={{ margin: '10px 0' }}>
         <Grid>
           <Grid.Row>
             <Grid.Column>
-              <h3>Legend:</h3>
-              {!activeLayer && (
+              <h4>Legend:</h4>
+              {map_layers.length === 0 && (
                 <p>
                   No layer found for legend. Please add a map layer from editor.
                 </p>
               )}
-              {legendLayers.length > 0 &&
-                legendLayers.map((layer, i) => {
-                  return (
-                    <LayerLegend
-                      key={i}
-                      name={layer?.layerName}
-                      data={layer?.legend}
-                    />
-                  );
-                })}
+
+              {map_layers &&
+                map_layers.length > 0 &&
+                map_layers.map((l, i) => (
+                  <LayerLegend key={i} data={l.map_layer} />
+                ))}
             </Grid.Column>
           </Grid.Row>
         </Grid>

package/src/components/Blocks/EEAMap/components/widgets/MapEditorWidget.jsx

@@ -37,7 +37,6 @@ const MapEditorWidget = (props) => {
   };
 
   let schema = PanelsSchema({ data: dataForm });
-
   return (
     <FormFieldWrapper {...props}>
       <Modal

package/src/components/Blocks/EEAMap/components/widgets/ObjectTypesWidget.jsx

@@ -4,7 +4,15 @@ import { ObjectWidget } from '@plone/volto/components';
 import { withDeviceSize } from '@eeacms/volto-eea-map/hocs';
 
 export const ObjectTypesWidget = (props) => {
-  const { schemas, value = {}, onChange, errors = {}, id, device } = props;
+  const {
+    schemas,
+    value = {},
+    onChange,
+    errors = {},
+    id,
+    device,
+    block,
+  } = props;
   const objectId = id;
 
   const defaultActiveTab = 0;
@@ -30,6 +38,7 @@ export const ObjectTypesWidget = (props) => {
             <ObjectWidget
               schema={schema}
               id={id}
+              block={block}
               errors={errors}
               value={value[id] || {}}
               onChange={(schemaId, v) => {

package/src/components/Blocks/EEAMap/styles/map.css

@@ -115,6 +115,10 @@
   font-size: 14px;
 }
 
+.data-query-widget-field {
+  margin: 10px 0;
+}
+
 @keyframes fadeDown {
   from {
     opacity: 0;

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

@@ -1,8 +1,14 @@
 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';
 
@@ -10,6 +16,24 @@ 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 ||
+      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 +55,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

@@ -13,6 +13,7 @@ export const Schema = (props) => {
           'show_download',
           'show_viewer',
           'show_sources',
+          'data_query_params',
         ],
       },
     ],
@@ -45,6 +46,10 @@ export const Schema = (props) => {
         title: 'Show web viewer',
         type: 'boolean',
       },
+      data_query_params: {
+        title: 'Data query parameters',
+        widget: 'data_query_widget',
+      },
     },
     required: [],
   };

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

@@ -15,19 +15,64 @@ const View = (props) => {
   const { map_visualization_data = '', data_provenance = {} } =
     viz_content || {};
 
+  const [mapData, setMapData] = React.useState(map_visualization_data);
+
   React.useEffect(() => {
-    if (vis_url) {
+    if (vis_url && !map_visualization_data) {
       props.getContent(vis_url, null, id);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vis_url]);
 
+  React.useEffect(() => {
+    if (
+      props.data_query &&
+      props.data_query.length > 0 &&
+      map_visualization_data
+    ) {
+      let altMapData = { ...map_visualization_data };
+
+      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) => {
+                  return {
+                    field: param.alias ? param.alias : param.i,
+                    operator: '=',
+                    value: param.v[0],
+                  };
+                }),
+              };
+              altMapData.layers.map_layers[j].map_layer.query = autoQuery;
+            }
+          });
+        }
+      });
+      setMapData(altMapData);
+    }
+  }, [props.data_query, map_visualization_data]);
+
   return (
     <div>
       <PrivacyProtection data={data} {...props}>
         {map_visualization_data && (
           <div>
-            <Webmap data={map_visualization_data} height={height} />
+            <Webmap data={mapData} height={height} />
             <ExtraViews
               data={{
                 ...data,
@@ -48,6 +93,7 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
+      data_query: state.content.data.data_query,
       viz_content: state.content.subrequests?.[props.id]?.data,
     }),
     {

package/src/index.js

@@ -5,6 +5,7 @@ import {
   EmbedMapEdit,
 } from '@eeacms/volto-eea-map/components';
 import world from '@plone/volto/icons/world.svg';
+import DataQueryWidget from './components/Blocks/EEAMap/components/widgets/DataQueryWidget';
 import LayerSelectWidget from './components/Blocks/EEAMap/components/widgets/LayerSelectWidget';
 import MapEditorWidget from './components/Blocks/EEAMap/components/widgets/MapEditorWidget';
 import ObjectTypesWidget from './components/Blocks/EEAMap/components/widgets/ObjectTypesWidget';
@@ -89,6 +90,7 @@ export default (config) => {
   config.widgets.widget.map_edit_widget = MapEditorWidget;
   config.widgets.widget.map_layers_widget = LayerSelectWidget;
   config.widgets.widget.object_types_widget = ObjectTypesWidget;
+  config.widgets.widget.data_query_widget = DataQueryWidget;
 
   //map editor for the visualization(content-type)
   config.widgets.id.map_visualization_data = VisualizationEditorWidget;