@eeacms/volto-eea-map 0.1.34 → 0.1.35

package/CHANGELOG.md

@@ -4,11 +4,30 @@ 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.34](https://github.com/eea/volto-eea-map/compare/0.1.33...0.1.34) - 12 June 2023
+### [0.1.35](https://github.com/eea/volto-eea-map/compare/0.1.34...0.1.35) - 14 June 2023
+
+#### :rocket: New Features
+
+- feat: webmap update faster #254131 [Andrei Grigore - [`b1d6d25`](https://github.com/eea/volto-eea-map/commit/b1d6d25c94987b6c7f7ec548f36960f5912ebee6)]
+- feat: colorpicker can set transparency #254131 [Andrei Grigore - [`aa13f63`](https://github.com/eea/volto-eea-map/commit/aa13f63c2123368d53e4ded81e2ebc7f6044c1f0)]
+
+#### :bug: Bug Fixes
+
+- fix: apply/remove queries more simple  #254131 [Andrei Grigore - [`ec442c0`](https://github.com/eea/volto-eea-map/commit/ec442c0f6aaffada095f6722f23faebe93b0f9da)]
+- fix: clearup map data on viz_url delete  #254131 [Andrei Grigore - [`f14b2d0`](https://github.com/eea/volto-eea-map/commit/f14b2d038379bc6170dfaaa8c34f265c6516cb18)]
+- fix: colorpicker with submit  #254131 [Andrei Grigore - [`3fac753`](https://github.com/eea/volto-eea-map/commit/3fac75391758ad6b24b6e54bb5f7d19c373f9fba)]
 
 #### :house: Internal changes
 
-- chore: enable alpha [Andrei Grigore - [`e016e46`](https://github.com/eea/volto-eea-map/commit/e016e4631a4332f07895f6077308235c41a6702c)]
+- chore: cleanup unused #254131 [Andrei Grigore - [`5245fd4`](https://github.com/eea/volto-eea-map/commit/5245fd46912214ae3cbaac29c338497f0649c919)]
+- chore: cleanup, more reusable helper function #254131 [Andrei Grigore - [`1d83848`](https://github.com/eea/volto-eea-map/commit/1d83848fd965a165df57632c3b23229b411cc674)]
+- chore: cleanup, creater reusable helper function   #254131 [Andrei Grigore - [`8be34bf`](https://github.com/eea/volto-eea-map/commit/8be34bfbb40936c5dfccc674ef1e95e6f5b165a0)]
+
+#### :hammer_and_wrench: Others
+
+- wip: better queries keep #254131 [Andrei Grigore - [`88c9d48`](https://github.com/eea/volto-eea-map/commit/88c9d489d02780e1b03237c78db196f5dcabea06)]
+- wip: init branch #254131 [Andrei Grigore - [`f841ecd`](https://github.com/eea/volto-eea-map/commit/f841ecdee3ef1018679c14706e1e0962ea4b3286)]
+### [0.1.34](https://github.com/eea/volto-eea-map/compare/0.1.33...0.1.34) - 12 June 2023
 
 ### [0.1.33](https://github.com/eea/volto-eea-map/compare/0.1.32...0.1.33) - 12 June 2023
 
@@ -22,7 +41,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - chore: clear unused #254131 [andreiggr - [`ccec2ea`](https://github.com/eea/volto-eea-map/commit/ccec2eaab173c905cd4ea0190a9c6cfd630250f9)]
 - chore: clear block style #254131 [andreiggr - [`af500bc`](https://github.com/eea/volto-eea-map/commit/af500bc10a5f280eff0335f45bae1596d66a7e6b)]
-- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`76b29e5`](https://github.com/eea/volto-eea-map/commit/76b29e510f5156590723831a524bc39dfba6deba)]
 
 #### :hammer_and_wrench: Others
 
@@ -32,7 +50,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - * versions [andreiggr - [`6d9ff2b`](https://github.com/eea/volto-eea-map/commit/6d9ff2b26a236b6445678e3d84698d1c3c0826f4)]
 - add razzle-plugin-scss dep [andreiggr - [`d74cee5`](https://github.com/eea/volto-eea-map/commit/d74cee51d30c866afe55730e5b25e0bf11d2caea)]
 - volto-object-widget [andreiggr - [`18d0ed7`](https://github.com/eea/volto-eea-map/commit/18d0ed72c1ba7b0f7159a0eefc09ccea9acee5cb)]
-- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`5911d01`](https://github.com/eea/volto-eea-map/commit/5911d01f7f3bc79a2c834fab75a9a4ac05d2d042)]
 ### [0.1.32](https://github.com/eea/volto-eea-map/compare/0.1.31...0.1.32) - 20 February 2023
 
 #### :hammer_and_wrench: Others
@@ -40,7 +57,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - remove console.log [tedw87 - [`3aeb3e8`](https://github.com/eea/volto-eea-map/commit/3aeb3e8ec5474387f3cd22eb9b387c6681e17120)]
 - refactor code [tedw87 - [`6d7830e`](https://github.com/eea/volto-eea-map/commit/6d7830eb934f56c255eea5642bdefba30d892946)]
 - add Blossom basemap layer [tedw87 - [`5226ee2`](https://github.com/eea/volto-eea-map/commit/5226ee218df3401cf467afbc7a4d720dc30719e1)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`1dad5c6`](https://github.com/eea/volto-eea-map/commit/1dad5c6617096ff85223165a6dd2b1d5d7deea6a)]
 ### [0.1.31](https://github.com/eea/volto-eea-map/compare/0.1.30...0.1.31) - 11 November 2022
 
 #### :hammer_and_wrench: Others

package/package.json

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

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

@@ -7,15 +7,28 @@ import { compose } from 'redux';
 import { getContent } from '@plone/volto/actions';
 
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
-import View from './View';
-import { Schema } from './Schema';
-import '../../../styles/map.css';
+import Webmap from '@eeacms/volto-eea-map/components/Webmap';
+import ExtraViews from '@eeacms/volto-eea-map/components/ExtraViews';
+import '@eeacms/volto-eea-map/styles/map.css';
 
-import _ from 'lodash';
+import { Schema } from './Schema';
+import {
+  applyQueriesToMapLayers,
+  updateBlockQueryFromPageQuery,
+} from '@eeacms/volto-eea-map/utils';
 
 const Edit = (props) => {
-  const { block, data, onChangeBlock, selected, id } = props;
-  const schema = React.useMemo(() => Schema(props), [props]);
+  const {
+    block,
+    data,
+    onChangeBlock,
+    selected,
+    id,
+    data_provenance = {},
+  } = props;
+  const { height = '' } = data;
+  const schema = Schema(props);
+  const [mapData, setMapData] = React.useState('');
 
   React.useEffect(() => {
     if (!Object.hasOwn(data, 'show_legend')) {
@@ -36,30 +49,68 @@ const Edit = (props) => {
         dataprotection: { enabled: true },
       });
     }
-
-    //    eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data]);
+    //      eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data.show_legend, data.show_sources, data.dataprotection]);
 
   React.useEffect(() => {
-    props.getContent(data.vis_url, null, id);
-    //    eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data.vis_url]);
+    props.getContent(props.data.vis_url, null, id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.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,
-      });
+    if (props.data_query) {
+      //if block data_query_params do not exist, init them
+      if (!props?.data?.data_query_params) {
+        onChangeBlock(block, {
+          ...props.data,
+          data_query_params: [...props.data_query],
+        });
+      }
+
+      //if block data_query_params exist, deep check them then change them in block data
+      if (props?.data_query && data?.data_query_params) {
+        const newDataQuery = updateBlockQueryFromPageQuery(
+          props?.data_query,
+          data?.data_query_params,
+        );
+
+        onChangeBlock(block, {
+          ...data,
+          data_query_params: [...newDataQuery],
+        });
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.block, props.data_query, data.data_query_params]);
+  }, [props.data_query]);
+
+  React.useEffect(() => {
+    const updatedMapData = applyQueriesToMapLayers(
+      props.map_visualization,
+      props.data.data_query_params,
+      props.data.enable_queries,
+    );
+    setMapData(updatedMapData);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.map_visualization, props.data]);
+
   return (
     <>
-      <View data={data} id={id} isEdit={true} />
+      {mapData && (
+        <div>
+          <Webmap data={mapData} height={height} isEdit={true} />
+          <ExtraViews
+            data={{
+              ...data,
+              data_provenance,
+              map_data: props.map_visualization,
+            }}
+          />
+        </div>
+      )}
+      {!mapData && (
+        <p>No map view to show. Set visualization in block configuration.</p>
+      )}
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}
@@ -81,8 +132,11 @@ 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,
+      map_visualization:
+        state.content.subrequests?.[props.id]?.data?.map_visualization_data,
     }),
     {
       getContent,

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

@@ -6,72 +6,31 @@ import { compose } from 'redux';
 import { PrivacyProtection } from '@eeacms/volto-embed';
 
 import { getContent } from '@plone/volto/actions';
-import Webmap from '../../Webmap';
-import ExtraViews from '../../ExtraViews';
+import Webmap from '@eeacms/volto-eea-map/components/Webmap';
+import ExtraViews from '@eeacms/volto-eea-map/components/ExtraViews';
+import { applyQueriesToMapLayers } from '@eeacms/volto-eea-map/utils';
 
 const View = (props) => {
-  const { data, id, isEdit, map_visualization = '', data_provenance = {} } =
-    props || {};
-  const { height = '', vis_url = '', enable_queries } = data;
+  const { data, id, data_provenance = {} } = props || {};
+  const { height = '' } = data;
 
-  const [mapData, setMapData] = React.useState(map_visualization);
+  const [mapData, setMapData] = React.useState('');
 
   React.useEffect(() => {
-    if (vis_url) {
-      props.getContent(vis_url, null, id);
-    }
+    props.getContent(props.data.vis_url, null, id);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vis_url, enable_queries]);
+  }, [props.data.vis_url]);
 
   React.useEffect(() => {
-    var altMapData = { ...map_visualization };
-    const query_params = isEdit
-      ? props.data?.data_query_params
-      : props?.data_query;
-    if (
-      enable_queries &&
-      map_visualization &&
-      query_params &&
-      query_params.length > 0 &&
-      altMapData.layers &&
-      altMapData.layers.map_layers &&
-      altMapData.layers.map_layers.length > 0
-    ) {
-      let rules = [];
+    const updatedMapData = applyQueriesToMapLayers(
+      props.map_visualization,
+      props.data.data_query_params,
+      props.data.enable_queries,
+    );
 
-      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);
+    setMapData(updatedMapData);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [map_visualization, props.data, props.data_query, isEdit, enable_queries]);
+  }, [props.map_visualization, props.data]);
 
   return (
     <PrivacyProtection data={data} height={height} {...props}>
@@ -82,7 +41,7 @@ const View = (props) => {
             data={{
               ...data,
               data_provenance,
-              map_data: map_visualization,
+              map_data: props.map_visualization,
             }}
           />
         </div>
@@ -97,7 +56,6 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
-      data_query: state.content.data.data_query,
       data_provenance:
         state.content.subrequests?.[props.id]?.data?.data_provenance,
       map_visualization:

package/src/components/ExtraViews.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { UniversalLink, Icon } from '@plone/volto/components';
 
-import LegendWidget from './widgets/LegendWidget';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 
 import rightKeySVG from '@plone/volto/icons/right-key.svg';
 import downKeySVG from '@plone/volto/icons/down-key.svg';
+import LegendView from '@eeacms/volto-eea-map/components/LegendView';
 
 const SourcesWidget = ({ data }) => {
   const [expand, setExpand] = React.useState(true);
@@ -56,7 +56,7 @@ const ExtraViews = ({ data }) => {
   return (
     <div className="extra-eea-map-content">
       {show_legend && map_data && (
-        <LegendWidget data={map_data} show_viewer={show_viewer} />
+        <LegendView data={map_data} show_viewer={show_viewer} />
       )}
       {show_sources && (
         <>

package/src/components/{widgets/LegendWidget.jsx → LegendView.jsx}

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Button, Grid } from 'semantic-ui-react';
-import { fetchArcGISData, setLegendColumns } from '../../utils';
+import { fetchArcGISData, setLegendColumns } from '../utils';
 import { Icon } from '@plone/volto/components';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 
 import rightKeySVG from '@plone/volto/icons/right-key.svg';
 import downKeySVG from '@plone/volto/icons/down-key.svg';
-import { withDeviceSize } from '../../hocs';
+import { withDeviceSize } from '@eeacms/volto-eea-map/hocs';
 
-import codeSVG from '../../static/code-line.svg';
+import codeSVG from '@eeacms/volto-eea-map/static/code-line.svg';
 
 const LayerLegend = ({ data, show_viewer }) => {
   const [legendRows, setLegendRows] = React.useState([]);
@@ -92,7 +92,7 @@ const LayerLegend = ({ data, show_viewer }) => {
   );
 };
 
-const LegendWidget = (props) => {
+const LegendView = (props) => {
   const data = React.useMemo(() => props.data, [props.data]);
   const { device = '', show_viewer = false } = props;
 
@@ -150,4 +150,4 @@ const LegendWidget = (props) => {
   );
 };
 
-export default withDeviceSize(React.memo(LegendWidget));
+export default withDeviceSize(React.memo(LegendView));

package/src/components/Webmap.jsx

@@ -22,16 +22,23 @@ const MODULES = [
 const Webmap = (props) => {
   const { editMode, height, id } = props;
 
+  const device = React.useMemo(() => props.device || {}, [props.device]);
+
   const data = React.useMemo(() => props.data || {}, [props.data]);
 
-  const device = React.useMemo(() => props.device || {}, [props.device]);
-  const {
-    base = {},
-    layers = {},
-    legend = {},
-    general = {},
-    styles = {},
-  } = data;
+  const layers = React.useMemo(() => props?.data?.layers || {}, [
+    props.data.layers,
+  ]);
+  const base = React.useMemo(() => props?.data?.base || {}, [props.data.base]);
+  const legend = React.useMemo(() => props?.data?.legend || {}, [
+    props.data.legend,
+  ]);
+  const general = React.useMemo(() => props?.data?.general || {}, [
+    props.data.general,
+  ]);
+  const styles = React.useMemo(() => props?.data?.styles || {}, [
+    props.data.styles,
+  ]);
 
   const { base_layer = '' } = base;
 
@@ -91,11 +98,26 @@ const Webmap = (props) => {
     type: 'simple', // autocasts as new SimpleRenderer()
     symbol: {
       type: 'simple-fill', // autocasts as new SimpleFillSymbol()
-      color: styles?.symbol_color ? styles?.symbol_color : 'black',
+      color: styles?.symbol_color
+        ? styles?.symbol_color?.rgb
+        : {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 1,
+          },
+      //color: 'rgba(255,255,255,0.4)',
       style: 'solid',
       outline: {
         // autocasts as new SimpleLineSymbol()
-        color: styles?.outline_color ? styles?.outline_color : 'white',
+        color: styles?.outline_color
+          ? styles?.outline_color?.rgb
+          : {
+              r: 0,
+              g: 0,
+              b: 0,
+              a: 1,
+            },
         width: styles?.outline_width ? styles?.outline_width : 1,
       },
     },

package/src/components/index.js

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

package/src/components/visualization/VisualizationEditorWidget.jsx

@@ -114,7 +114,7 @@ const VisualizationEditorWidget = (props) => {
           </Modal.Actions>
         </Modal>
       )}
-      <Webmap data={value} editMode={true} />
+      {!open && <Webmap data={value} editMode={true} />}
     </FormFieldWrapper>
   );
 };

package/src/components/visualization/panelsSchema.js

@@ -78,6 +78,8 @@ const MapLayersSchema = {
   required: [],
 };
 
+//style changes work only for Feature layers atm
+// TODO: apply style for individual layers
 const StylesLayersSchema = ({ data = {} }) => {
   return {
     title: 'Styles Layers',

package/src/components/widgets/SimpleColorPickerWidget.jsx

@@ -3,6 +3,7 @@ import { FormFieldWrapper, Icon } from '@plone/volto/components';
 import { Button } from 'semantic-ui-react';
 import loadable from '@loadable/component';
 import clearSVG from '@plone/volto/icons/clear.svg';
+import checkSVG from '@plone/volto/icons/check.svg';
 
 const ReactColor = loadable.lib(() => import('react-color'));
 
@@ -10,17 +11,33 @@ export default (props) => {
   const { id, value, onChange, available_colors } = props;
   const [showPicker, setShowPicker] = React.useState(false);
 
+  const [color, setColor] = React.useState(value);
+
+  const handleChangeColor = (valColor) => {
+    setColor(valColor);
+  };
+
+  const handleConfirmColor = () => {
+    onChange(id, color);
+    setShowPicker(false);
+  };
+
+  const handleAbortColor = () => {
+    setColor(value);
+    setShowPicker(false);
+  };
+
   return (
     <FormFieldWrapper
       {...props}
       draggable={false}
       className="simple-color-picker-widget"
     >
-      <div>
+      <div style={{ position: 'relative' }}>
         <Button.Group fluid>
           <Button
-            color={value}
-            style={{ backgroundColor: value }}
+            color={value?.hex ? value?.hex : 'black'}
+            style={{ backgroundColor: value?.hex ? value?.hex : 'black' }}
             onClick={() => setShowPicker(true)}
             size="small"
             fluid
@@ -35,27 +52,67 @@ export default (props) => {
           >
             <Icon name={clearSVG} size="18px" color="red" />
           </Button>
+          {showPicker ? (
+            <div
+              style={{
+                position: 'absolute',
+                top: '0',
+                zIndex: '77',
+                background: 'lightgrey',
+                display: 'flex',
+                flexDirection: 'column',
+                padding: '5px',
+                borderRadius: '2px',
+              }}
+            >
+              <ReactColor>
+                {({ SketchPicker }) => {
+                  return (
+                    <SketchPicker
+                      width="180px"
+                      colors={available_colors}
+                      color={
+                        color?.rgb
+                          ? color.rgb
+                          : {
+                              r: 0,
+                              g: 0,
+                              b: 0,
+                              a: 1,
+                            }
+                      }
+                      onChangeComplete={(value) => {
+                        handleChangeColor(value);
+                      }}
+                    ></SketchPicker>
+                  );
+                }}
+              </ReactColor>
+              <Button.Group>
+                <Button
+                  size="tiny"
+                  compact
+                  title="Reset color"
+                  style={{ paddingLeft: '8px', paddingRight: '0px' }}
+                  onClick={() => handleAbortColor()}
+                >
+                  <Icon name={clearSVG} size="18px" />
+                </Button>
+                <Button
+                  onClick={() => handleConfirmColor()}
+                  color="green"
+                  compact
+                  size="tiny"
+                  title="Confirm color"
+                >
+                  <Icon name={checkSVG} size="18px" />
+                </Button>
+              </Button.Group>
+            </div>
+          ) : (
+            ''
+          )}
         </Button.Group>
-
-        {showPicker ? (
-          <ReactColor>
-            {({ SketchPicker }) => {
-              return (
-                <SketchPicker
-                  width="180px"
-                  colors={available_colors}
-                  color={value || '#000'}
-                  onChangeComplete={(value) => {
-                    setShowPicker(false);
-                    onChange(id, value.hex);
-                  }}
-                ></SketchPicker>
-              );
-            }}
-          </ReactColor>
-        ) : (
-          ''
-        )}
       </div>
     </FormFieldWrapper>
   );

package/src/index.js

@@ -2,11 +2,13 @@ import EmbedMapView from './components/Blocks/EmbedEEAMap/View';
 import EmbedMapEdit from './components/Blocks/EmbedEEAMap/Edit';
 
 import world from '@plone/volto/icons/world.svg';
+
 import DataQueryWidget from './components/widgets/DataQueryWidget';
 import LayerSelectWidget from './components/widgets/LayerSelectWidget';
-import MapEditorWidget from './components/widgets/MapEditorWidget';
+
 import VisualizationEditorWidget from './components/visualization/VisualizationEditorWidget';
 import VisualizationView from './components/visualization/VisualizationView';
+
 import SimpleColorPickerWidget from './components/widgets/SimpleColorPickerWidget';
 
 import { data_visualizations } from './middlewares';
@@ -51,7 +53,6 @@ export default (config) => {
     ],
   };
 
-  config.widgets.widget.map_edit_widget = MapEditorWidget;
   config.widgets.widget.map_layers_widget = LayerSelectWidget;
   config.widgets.widget.data_query_widget = DataQueryWidget;
   config.widgets.widget.simple_color_picker_widget = SimpleColorPickerWidget;

package/src/utils.js

@@ -30,4 +30,97 @@ const fetchArcGISData = async (url) => {
   return data;
 };
 
-export { setLegendColumns, fetchArcGISData };
+const applyQueriesToMapLayers = (
+  map_visualization,
+  block_data_query_params,
+  enable_queries,
+) => {
+  //break reference to the original map_visualization object
+  //so i safely manipulate data
+  var altMapData = map_visualization
+    ? JSON.parse(JSON.stringify(map_visualization))
+    : '';
+
+  var rules = [];
+  if (
+    enable_queries &&
+    block_data_query_params &&
+    block_data_query_params.length > 0 &&
+    altMapData.layers &&
+    altMapData.layers.map_layers &&
+    altMapData.layers.map_layers.length > 0
+  ) {
+    altMapData.layers.map_layers.forEach((l, j) => {
+      block_data_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,
+                };
+              })
+            : [];
+          const concatRules = rules.concat(newRules);
+          const filteredRules = concatRules.filter(
+            (v, i, a) =>
+              a.findLastIndex(
+                (v2) => v2.field === v.field && v2.value === v.value,
+              ) === i,
+          );
+          rules = filteredRules;
+        });
+      });
+      let autoQuery = {
+        combinator: 'or',
+        rules,
+      };
+      altMapData.layers.map_layers[j].map_layer.query = autoQuery;
+    });
+  }
+  return altMapData;
+};
+
+const updateBlockQueryFromPageQuery = (data_query, data_query_params) => {
+  var pageDataQuery = JSON.parse(JSON.stringify(data_query));
+  var blockDataQuery = data_query_params
+    ? JSON.parse(JSON.stringify(data_query_params))
+    : '';
+  var newDataQuery = pageDataQuery.map((parameter, index) => {
+    //check if the parameter exists in data and has value
+    // then get its alias value and update it
+    //check if data_query param value is changed
+    //and change it in block data
+    if (
+      blockDataQuery &&
+      blockDataQuery[index] &&
+      parameter.i &&
+      blockDataQuery[index].i &&
+      parameter.i === blockDataQuery[index].i
+    ) {
+      return {
+        ...parameter,
+        alias: blockDataQuery[index]?.alias ? blockDataQuery[index]?.alias : '',
+        v: parameter?.v ? parameter?.v : '',
+      };
+    }
+
+    return parameter;
+  });
+  return newDataQuery;
+};
+
+export {
+  setLegendColumns,
+  fetchArcGISData,
+  applyQueriesToMapLayers,
+  updateBlockQueryFromPageQuery,
+};

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

@@ -1,65 +0,0 @@
-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';
-
-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} />
-      <SidebarPortal selected={selected}>
-        <BlockDataForm
-          block={block}
-          title={schema.title}
-          schema={addPrivacyProtectionToSchema(schema)}
-          onChangeField={(id, value) => {
-            onChangeBlock(block, {
-              ...data,
-              [id]: value,
-            });
-          }}
-          formData={data}
-        />
-      </SidebarPortal>
-    </div>
-  );
-};
-
-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

@@ -1,55 +0,0 @@
-export const Schema = (props) => {
-  return {
-    title: 'EEA Map Block',
-    fieldsets: [
-      {
-        id: 'default',
-        title: 'Default',
-        fields: [
-          'map_data',
-          'description',
-          'height',
-          'show_legend',
-          'show_download',
-          'show_viewer',
-          'show_sources',
-          'data_query_params',
-        ],
-      },
-    ],
-    properties: {
-      show_sources: {
-        title: 'Show sources',
-        type: 'boolean',
-      },
-      height: {
-        title: 'Height',
-        type: 'number',
-      },
-      description: {
-        title: 'Description',
-        widget: 'slate',
-      },
-      map_data: {
-        title: 'Edit map',
-        description: 'Open the map customization interface',
-        widget: 'map_edit_widget',
-      },
-      show_legend: {
-        title: 'Show legend',
-        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

@@ -1,44 +0,0 @@
-import React from 'react';
-
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-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 } = props || {};
-  const { map_data = {}, height = '' } = data;
-
-  React.useEffect(() => {
-    if (path) {
-      props.getContent(path, null, id);
-    }
-    //    eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [path]);
-
-  return (
-    <div>
-      <PrivacyProtection data={data} {...props}>
-        <Webmap data={map_data} height={height} id={id} />
-        <ExtraViews data={data} />
-      </PrivacyProtection>
-    </div>
-  );
-};
-
-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,
-    }),
-    {
-      getContent,
-    },
-  ),
-)(View);

package/src/components/widgets/MapEditorWidget.jsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import { Modal, Button, Grid } from 'semantic-ui-react';
-import Webmap from '../Webmap';
-
-import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
-
-import PanelsSchema from './panelsSchema';
-
-const MapEditorWidget = (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);
-
-    //set map data for screenshot
-    // if (intValue.layers?.map_layers[0].map_layer?.map_service_url) {
-    //   onChange(
-    //     'url',
-    //     `${intValue.layers?.map_layers[0].map_layer?.map_service_url}?f=jsapi`,
-    //   );
-    // }
-    setOpen(false);
-  };
-
-  const handleClose = () => {
-    setIntValue(value);
-    setOpen(false);
-  };
-
-  const handleChangeField = (id, fieldVal) => {
-    setIntValue(fieldVal);
-  };
-
-  let schema = PanelsSchema({ data: dataForm });
-  return (
-    <FormFieldWrapper {...props}>
-      <Modal
-        id="map-editor-modal"
-        className="map-editor-modal"
-        onClose={handleClose}
-        onOpen={() => setOpen(true)}
-        open={open}
-        trigger={
-          <Button size="tiny" className="map-modal-trigger-button">
-            Open Map Editor
-          </Button>
-        }
-      >
-        <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(id, 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>
-    </FormFieldWrapper>
-  );
-};
-
-export default MapEditorWidget;

package/src/components/widgets/panelsSchema.js

@@ -1,151 +0,0 @@
-import { base_layers } from '../../constants';
-
-const BaseLayerSchema = {
-  title: 'Base Layer',
-  fieldsets: [
-    {
-      id: 'base',
-      title: 'Base Layer',
-      fields: ['base_layer'],
-    },
-  ],
-  properties: {
-    base_layer: {
-      title: 'Base Layer',
-      choices: base_layers,
-    },
-  },
-  required: [],
-};
-
-const LayerSchema = {
-  title: 'Layer',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Layer',
-      fields: ['map_layer'],
-    },
-  ],
-  properties: {
-    map_layer: {
-      title: 'Map layer configuration',
-      widget: 'map_layers_widget',
-    },
-  },
-  required: [],
-};
-
-const MapLayersSchema = {
-  title: 'Map Layers',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Map Data',
-      fields: ['map_layers'],
-    },
-  ],
-  properties: {
-    map_layers: {
-      title: 'Map Layers',
-      description: 'Add/Edit Map Layers',
-      widget: 'object_list',
-      schema: LayerSchema,
-    },
-  },
-  required: [],
-};
-
-const GeneralSchema = ({ data = {} }) => {
-  const centerOnExtent = data?.map_data?.general?.centerOnExtent;
-
-  return {
-    title: 'General',
-    fieldsets: [
-      {
-        id: 'default',
-        title: 'Zoom',
-        fields: [
-          'print_position',
-          'zoom_position',
-          'centerOnExtent',
-          ...(!centerOnExtent ? ['zoom_level', 'long', 'lat'] : []),
-        ],
-      },
-    ],
-    properties: {
-      centerOnExtent: {
-        title: 'Center on extent',
-        type: 'boolean',
-        description:
-          'This will override latitude/longitude/zoom level and will lock zoom/moving the map.',
-      },
-      zoom_position: {
-        title: 'Zoom position',
-        choices: ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
-          (n) => {
-            return [n, n];
-          },
-        ),
-      },
-      zoom_level: {
-        title: 'Zoom level',
-        type: 'number',
-      },
-      long: {
-        title: 'Longitude',
-        type: 'number',
-      },
-      lat: {
-        title: 'Latitude',
-        type: 'number',
-      },
-
-      print_position: {
-        title: 'Print position',
-        choices: ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
-          (n) => {
-            return [n, n];
-          },
-        ),
-      },
-    },
-    required: [],
-  };
-};
-
-export default ({ data = {} }) => {
-  const generalSchema = GeneralSchema({ data });
-
-  return {
-    title: 'Map Editor',
-    fieldsets: [
-      {
-        id: 'default',
-        title: 'Map Editor Sections',
-        fields: ['map_data'],
-      },
-    ],
-    properties: {
-      map_data: {
-        title: 'Panels',
-        widget: 'object_types_widget',
-        schemas: [
-          {
-            id: 'general',
-            schema: generalSchema,
-          },
-          {
-            id: 'base',
-            schema: BaseLayerSchema,
-          },
-          {
-            id: 'layers',
-            schema: MapLayersSchema,
-          },
-        ],
-      },
-    },
-    required: [],
-  };
-};