@eeacms/volto-eea-map 0.1.34 → 1.0.0

package/CHANGELOG.md

@@ -4,11 +4,43 @@ 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
+### [1.0.0](https://github.com/eea/volto-eea-map/compare/0.1.35...1.0.0) - 15 June 2023
+
+#### :bug: Bug Fixes
+
+- fix: fix style #254131 [Andrei Grigore - [`e0d1bf6`](https://github.com/eea/volto-eea-map/commit/e0d1bf6092d07ac0d2f98ff6febc9c01d97ce654)]
+- fix: fix style #254131 [Andrei Grigore - [`2361110`](https://github.com/eea/volto-eea-map/commit/2361110243bc42d15ebcde736a811ad9260b92cb)]
+- fix: fix style #254131 [Andrei Grigore - [`c846eb9`](https://github.com/eea/volto-eea-map/commit/c846eb9cbe1376f3c8c11b77a70dc123230bb6ec)]
+- fix: fix style #254131 [Andrei Grigore - [`a6b962d`](https://github.com/eea/volto-eea-map/commit/a6b962d007d0d32c1ca8e7304ac75ce58e41c173)]
 
 #### :house: Internal changes
 
-- chore: enable alpha [Andrei Grigore - [`e016e46`](https://github.com/eea/volto-eea-map/commit/e016e4631a4332f07895f6077308235c41a6702c)]
+- chore: increase version  #254131 [Andrei Grigore - [`ec022cc`](https://github.com/eea/volto-eea-map/commit/ec022cc3b3d0c5e4b9158e7f28cf35edc5654600)]
+
+### [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: 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 +54,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 +63,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 +70,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": "1.0.0",
   "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,27 @@ 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 _ 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 +48,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 +131,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,47 +1,7 @@
 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';
-
-const SourcesWidget = ({ data }) => {
-  const [expand, setExpand] = React.useState(true);
-
-  return (
-    <div>
-      <button className="legend-action" onClick={() => setExpand(!expand)}>
-        <h3>
-          <Icon
-            name={expand ? downKeySVG : rightKeySVG}
-            title={expand ? 'Collapse' : 'Expand'}
-            size="17px"
-          />
-          Sources:
-        </h3>
-      </button>
-      {expand && (
-        <ul>
-          {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>
-  );
-};
+import LegendView from '@eeacms/volto-eea-map/components/LegendView';
+import Sources from './Sources';
 
 const ExtraViews = ({ data }) => {
   const {
@@ -56,19 +16,9 @@ const ExtraViews = ({ data }) => {
   return (
     <div className="extra-eea-map-content">
       {show_legend && map_data && (
-        <LegendWidget data={map_data} show_viewer={show_viewer} />
-      )}
-      {show_sources && (
-        <>
-          {data_provenance &&
-          data_provenance.data &&
-          data_provenance.data.length > 0 ? (
-            <SourcesWidget data={data_provenance.data} />
-          ) : (
-            <p>Data provenance is not set for visualization used or page</p>
-          )}
-        </>
+        <LegendView data={map_data} show_viewer={show_viewer} />
       )}
+      {show_sources && <Sources sources={data_provenance?.data} />}
       {description && serializeNodes(description)}
     </div>
   );

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;
 
@@ -116,14 +116,14 @@ const LegendWidget = (props) => {
     <>
       <div className="legend-container">
         <button className="legend-action" onClick={() => setExpand(!expand)}>
-          <h3 role="presentation" className="legend-title">
-            <Icon
-              name={expand ? downKeySVG : rightKeySVG}
-              title={expand ? 'Collapse' : 'Expand'}
-              size="17px"
-            />
-            Legend:
-          </h3>
+          {/* <h3 role="presentation" className="legend-title"> */}
+          <Icon
+            name={expand ? downKeySVG : rightKeySVG}
+            title={expand ? 'Collapse' : 'Expand'}
+            size="17px"
+          />
+          Legend:
+          {/* </h3> */}
         </button>
         <Grid columns={legendColumns}>
           {(!map_layers || map_layers.length === 0) && (
@@ -150,4 +150,4 @@ const LegendWidget = (props) => {
   );
 };
 
-export default withDeviceSize(React.memo(LegendWidget));
+export default withDeviceSize(React.memo(LegendView));

package/src/components/Sources.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import cx from 'classnames';
+import { Popup } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+
+const Link = ({ children, ...props }) => {
+  if (props.href) {
+    return <UniversalLink {...props}>{children}</UniversalLink>;
+  }
+  return <span {...props}>{children}</span>;
+};
+
+const Source = ({ source }) => {
+  if (source.chart_source_link && source.chart_source) {
+    return <Link href={source.chart_source_link}>{source.chart_source}</Link>;
+  }
+  if (source.chart_source) {
+    return <span>{source.chart_source}</span>;
+  }
+  return (
+    <>
+      <Link className="embed-sources-param-title" href={source.link}>
+        {source.title}
+      </Link>
+      ,<span style={{ marginLeft: '5px' }}>{source.organisation}</span>
+    </>
+  );
+};
+
+const SourcesWidget = ({ sources }) => {
+  const [expanded, setExpanded] = React.useState(false);
+  return (
+    <div className="eea-map-sources-container">
+      <Popup
+        content={
+          sources?.length ? (
+            <ol className="eea-map-sources-list">
+              {sources?.map((source, index) => {
+                return (
+                  <li key={index}>
+                    <Source source={source} />
+                  </li>
+                );
+              })}
+            </ol>
+          ) : (
+            <p>Data provenance is not set for this visualization.</p>
+          )
+        }
+        position="bottom left"
+        popper={{ id: 'eea-map-sources-popup' }}
+        trigger={
+          <button className={cx('eea-map-sources-button', { expanded })}>
+            Sources
+          </button>
+        }
+        on="click"
+        onClose={() => {
+          setExpanded(false);
+        }}
+        onOpen={() => {
+          setExpanded(true);
+        }}
+      />
+    </div>
+  );
+};
+
+export default SourcesWidget;

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