@eeacms/volto-eea-map 0.1.35 → 1.0.1

package/CHANGELOG.md

@@ -4,6 +4,29 @@ 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).
 
+### [1.0.1](https://github.com/eea/volto-eea-map/compare/1.0.0...1.0.1) - 19 June 2023
+
+#### :rocket: New Features
+
+- feat: use map_viz endpoint in eea.api.dataconnector [andreiggr - [`e6ce6dd`](https://github.com/eea/volto-eea-map/commit/e6ce6dd0a87343be8dae945780ef4b9ace6d830a)]
+
+#### :house: Internal changes
+
+- chore: useeffect updates improvements & cleanup unused layer wwidget [andreiggr - [`1b30d99`](https://github.com/eea/volto-eea-map/commit/1b30d99b481262d0184c8e5ad10331f0315d4f2a)]
+
+## [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: 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
@@ -41,6 +64,7 @@ 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
 
@@ -50,6 +74,7 @@ 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
@@ -57,6 +82,7 @@ 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.35",
+  "version": "1.0.1",
   "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

@@ -4,12 +4,9 @@ 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 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 { Schema } from './Schema';
 import {
@@ -17,15 +14,10 @@ import {
   updateBlockQueryFromPageQuery,
 } from '@eeacms/volto-eea-map/utils';
 
+import { getVisualization } from '@eeacms/volto-eea-map/actions';
+
 const Edit = (props) => {
-  const {
-    block,
-    data,
-    onChangeBlock,
-    selected,
-    id,
-    data_provenance = {},
-  } = props;
+  const { block, data, onChangeBlock, selected, data_provenance = {} } = props;
   const { height = '' } = data;
   const schema = Schema(props);
   const [mapData, setMapData] = React.useState('');
@@ -53,7 +45,7 @@ const Edit = (props) => {
   }, [data.show_legend, data.show_sources, data.dataprotection]);
 
   React.useEffect(() => {
-    props.getContent(props.data.vis_url, null, id);
+    props.getVisualization(props.data.vis_url);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.data.vis_url]);
 
@@ -92,7 +84,11 @@ const Edit = (props) => {
     setMapData(updatedMapData);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.map_visualization, props.data]);
+  }, [
+    props.map_visualization,
+    props.data.data_query_params,
+    props.data.enable_queries,
+  ]);
 
   return (
     <>
@@ -133,13 +129,15 @@ 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:
-        state.content.subrequests?.[props.id]?.data?.map_visualization_data,
+      map_visualization: props.data.vis_url
+        ? state.map_visualizations?.data[props.data.vis_url]?.data
+        : '',
+      data_provenance: props.data.vis_url
+        ? state.map_visualizations?.data[props.data.vis_url]?.data_provenance
+        : '',
     }),
     {
-      getContent,
+      getVisualization,
     },
   ),
 )(Edit);

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

@@ -5,19 +5,19 @@ import { compose } from 'redux';
 
 import { PrivacyProtection } from '@eeacms/volto-embed';
 
-import { getContent } from '@plone/volto/actions';
 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';
+import { getVisualization } from '@eeacms/volto-eea-map/actions';
 
 const View = (props) => {
-  const { data, id, data_provenance = {} } = props || {};
+  const { data, data_provenance = {} } = props || {};
   const { height = '' } = data;
 
   const [mapData, setMapData] = React.useState('');
 
   React.useEffect(() => {
-    props.getContent(props.data.vis_url, null, id);
+    props.getVisualization(props.data.vis_url);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.data.vis_url]);
 
@@ -30,7 +30,11 @@ const View = (props) => {
 
     setMapData(updatedMapData);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.map_visualization, props.data]);
+  }, [
+    props.map_visualization,
+    props.data.data_query_params,
+    props.data.enable_queries,
+  ]);
 
   return (
     <PrivacyProtection data={data} height={height} {...props}>
@@ -56,13 +60,15 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
-      data_provenance:
-        state.content.subrequests?.[props.id]?.data?.data_provenance,
-      map_visualization:
-        state.content.subrequests?.[props.id]?.data?.map_visualization_data,
+      map_visualization: props.data.vis_url
+        ? state.map_visualizations?.data[props.data.vis_url]?.data
+        : '',
+      data_provenance: props.data.vis_url
+        ? state.map_visualizations?.data[props.data.vis_url]?.data_provenance
+        : '',
     }),
     {
-      getContent,
+      getVisualization,
     },
   ),
 )(View);

package/src/components/ExtraViews.jsx

@@ -1,47 +1,7 @@
 import React from 'react';
-import { UniversalLink, 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 LegendView from '@eeacms/volto-eea-map/components/LegendView';
-
-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 Sources from './Sources';
 
 const ExtraViews = ({ data }) => {
   const {
@@ -58,17 +18,7 @@ const ExtraViews = ({ data }) => {
       {show_legend && map_data && (
         <LegendView 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>
-          )}
-        </>
-      )}
+      {show_sources && <Sources sources={data_provenance?.data} />}
       {description && serializeNodes(description)}
     </div>
   );

package/src/components/LegendView.jsx

@@ -116,14 +116,14 @@ const LegendView = (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) && (

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

@@ -30,9 +30,7 @@ const Webmap = (props) => {
     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,
   ]);
@@ -49,10 +47,6 @@ const Webmap = (props) => {
       .filter(({ map_layer }) => map_layer)
       .map((l, i) => l.map_layer);
 
-  const options = {
-    css: true,
-  };
-
   const mapRef = React.useRef();
   const [modules, setModules] = React.useState({});
 
@@ -61,7 +55,9 @@ const Webmap = (props) => {
   React.useEffect(() => {
     if (!modules_loaded.current) {
       modules_loaded.current = true;
-      loadModules(MODULES, options).then((modules) => {
+      loadModules(MODULES, {
+        css: true,
+      }).then((modules) => {
         const [
           Map,
           MapView,
@@ -92,7 +88,7 @@ const Webmap = (props) => {
         });
       });
     }
-  }, [setModules, options]);
+  }, [setModules]);
 
   var customFeatureLayerRenderer = {
     type: 'simple', // autocasts as new SimpleRenderer()
@@ -312,27 +308,6 @@ const Webmap = (props) => {
       });
       view.ui.add(zoomWidget, zoomPosition);
     }
-
-    if (legend?.legend?.show_legend) {
-      const legendPosition =
-        legend && legend.legend && legend.legend.position
-          ? legend.legend.position
-          : 'top-right';
-
-      const legendWidget = new Expand({
-        content: new Legend({
-          view: view,
-          style: 'classic',
-        }),
-        view: view,
-        expanded: false,
-        expandIconClass: 'esri-icon-legend',
-        expandTooltip: 'Legend',
-        classNames: 'some-cool-expand',
-      });
-      view.ui.add(legendWidget, legendPosition);
-    }
-
     const printPosition =
       general && general.print_position ? general.print_position : '';
 

package/src/index.js

@@ -14,6 +14,8 @@ import SimpleColorPickerWidget from './components/widgets/SimpleColorPickerWidge
 import { data_visualizations } from './middlewares';
 import * as addonReducers from './reducers';
 
+import './less/global.less';
+
 export default (config) => {
   config.settings.allowed_cors_destinations = [
     ...(config.settings.allowed_cors_destinations || []),

package/src/{styles/map.css → less/global.less}

@@ -1,3 +1,21 @@
+@import (multiple, reference, optional) '../../theme.config';
+
+/* Enables customization of addons */
+.loadAddonOverrides() {
+  @import (optional)
+    '@{siteFolder}/../addons/@{addon}/@{addontype}s/@{addonelement}.overrides';
+}
+
+/* Helper to load variables */
+.loadAddonVariables() {
+  @import (optional) '@{addonelement}.variables';
+  @import (optional)
+    '@{siteFolder}/../addons/@{addon}/@{addontype}s/@{addonelement}.variables';
+}
+
+@import './variables.less';
+
+// TODO: pull out colors and dimensions into variables
 .map-edit-container {
   display: flex;
 }
@@ -162,6 +180,8 @@
 }
 
 .legend-container {
+  display: flex;
+  flex-direction: column;
   margin: 15px 0;
 }
 
@@ -179,10 +199,20 @@
 }
 
 .legend-action {
-  padding: 10px 0;
+  z-index: 22;
+  display: inline-flex;
+  align-items: center;
+  padding-bottom: 3px;
   border: none;
   background: transparent;
+  background-color: transparent;
+  color: #3d5265;
   cursor: pointer;
+  font-weight: bold;
+
+  &:hover {
+    color: @secondaryColor;
+  }
 }
 
 .map-number-input {
@@ -195,6 +225,46 @@
   color: green;
 }
 
+/* sources */
+
+.eea-map-sources-list {
+  margin: 0;
+  list-style: decimal inside;
+  padding-inline-start: 0;
+}
+
+#eea-map-sources-popup .ui.popup {
+  min-width: 600px;
+  background-color: #f9f9f9;
+  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+}
+
+.eea-map-sources-button {
+  display: inline-flex;
+  align-items: center;
+  padding-top: 10px;
+  padding-bottom: 3px;
+  border: none;
+  background-color: transparent;
+  color: @textColor;
+  cursor: pointer;
+  font-weight: bold;
+
+  .icon {
+    margin-left: 0.5rem;
+  }
+
+  &:hover {
+    color: @secondaryColor;
+  }
+
+  &.expanded {
+    padding-bottom: 0;
+    border-bottom: 3px solid @secondaryColor;
+    color: @secondaryColor;
+  }
+}
+
 @keyframes fadeDown {
   from {
     opacity: 0;
@@ -212,4 +282,9 @@
     max-width: 0.2cm;
     height: 0.2cm;
   }
+
+  .eea-map-sources-container,
+  #eea-map-sources-popup {
+    display: none;
+  }
 }

package/src/less/variables.less

@@ -0,0 +1,5 @@
+@type: extra;
+
+@element: custom;
+
+@grey-1: #f9f9f9;