@eeacms/volto-eea-map 0.1.8 → 0.1.11

package/CHANGELOG.md

@@ -4,8 +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.11](https://github.com/eea/volto-eea-map/compare/0.1.10...0.1.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)
+
+#### [0.1.9](https://github.com/eea/volto-eea-map/compare/0.1.8...0.1.9)
+
+> 12 August 2022
+
+- Query builder for map layers queries [`#9`](https://github.com/eea/volto-eea-map/pull/9)
+- pinpoint query builder [`6184b0e`](https://github.com/eea/volto-eea-map/commit/6184b0e1dcee48e7d34bf56bc1c878438d07f987)
+- build query widget [`7a9d74a`](https://github.com/eea/volto-eea-map/commit/7a9d74a6fdac32a8b424c5ca97edd42df436cbe2)
+
 #### [0.1.8](https://github.com/eea/volto-eea-map/compare/0.1.7...0.1.8)
 
+> 11 August 2022
+
+- Integration & new block for Map Visualization content-type [`#8`](https://github.com/eea/volto-eea-map/pull/8)
 - remove title on map edit widget [`1d00707`](https://github.com/eea/volto-eea-map/commit/1d0070716a743ea7f26c5f877b723492319fcecd)
 - update query by stored value [`c0f6ddd`](https://github.com/eea/volto-eea-map/commit/c0f6dddadaaf28de5b9914214acf735a166fae88)
 - stylelint [`511845a`](https://github.com/eea/volto-eea-map/commit/511845a319137dfe4e1c0c9846ee5ccb7656b32b)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.8",
+  "version": "0.1.11",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -24,6 +24,7 @@
     "@eeacms/volto-embed": "^2.0.1",
     "@plone/scripts": "*",
     "esri-loader": "3.5.0",
+    "react-querybuilder": "4.2.3",
     "volto-slate": "*"
   },
   "devDependencies": {

package/src/components/Blocks/EEAMap/Schema.js

@@ -7,26 +7,20 @@ export const Schema = (props) => {
         title: 'Default',
         fields: [
           'map_data',
-          //...(use_visualization ? ['vis_url'] : ['map_data']),
           'description',
           'height',
           'show_legend',
           'show_download',
           'show_viewer',
+          'show_sources',
         ],
       },
     ],
     properties: {
-      // use_visualization: {
-      //   title: 'Use visualization',
-      //   description:
-      //     'This setting will enable importing the map data from a visualization. If is enabled, editing the map manually will not be possible',
-      //   type: 'boolean',
-      // },
-      // vis_url: {
-      //   widget: 'object_by_path',
-      //   title: 'Visualization',
-      // },
+      show_sources: {
+        title: 'Show sources',
+        type: 'boolean',
+      },
       height: {
         title: 'Height',
         type: 'number',

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

@@ -1,21 +1,43 @@
 import React from 'react';
 
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
 import Webmap from './components/Webmap';
 import ExtraViews from './components/widgets/ExtraViews';
 import { PrivacyProtection } from '@eeacms/volto-embed';
+import { getContent } from '@plone/volto/actions';
 
 const View = (props) => {
-  const { data, id } = props || {};
+  const { data, id, path, data_provenance } = props || {};
   const { map_data = {}, height = '' } = data;
 
+  React.useEffect(() => {
+    //   get content from document
+    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} />
+        <ExtraViews data={{ ...data, data_provenance }} />
       </PrivacyProtection>
     </div>
   );
 };
 
-export default View;
+export default compose(
+  connect(
+    (state, props) => ({
+      data_provenance:
+        state.content.subrequests?.[props.id]?.data?.data_provenance,
+    }),
+    {
+      getContent,
+    },
+  ),
+)(View);

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

@@ -2,6 +2,7 @@
 import React from 'react';
 import { withDeviceSize } from '@eeacms/volto-eea-map/hocs';
 import { loadModules } from 'esri-loader';
+import { formatQuery } from 'react-querybuilder';
 
 const MODULES = [
   'esri/Map',
@@ -91,7 +92,6 @@ const Webmap = (props) => {
         .filter(({ map_service_url, layer }) => map_service_url && layer)
         .map(({ map_service_url, layer, query = '' }) => {
           const url = `${map_service_url}/${layer}`;
-
           let mapLayer;
           switch (layer.type) {
             case 'Raster Layer':
@@ -102,7 +102,7 @@ const Webmap = (props) => {
             case 'Feature Layer':
               mapLayer = new FeatureLayer({
                 url,
-                definitionExpression: query,
+                definitionExpression: query ? formatQuery(query, 'sql') : '',
               });
               break;
             case 'Group Layer':

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from 'semantic-ui-react';
-import { Icon } from '@plone/volto/components';
+import { Icon, UniversalLink } from '@plone/volto/components';
 
 import LegendWidget from './LegendWidget';
 import { serializeNodes } from 'volto-slate/editor/render';
@@ -15,46 +15,69 @@ const ExtraViews = ({ data }) => {
     show_legend,
     show_download,
     show_viewer,
+    show_sources,
+    data_provenance = {},
   } = data;
-
   return (
     <div className="extra-eea-map-content">
-      {map_data.layers?.map_layers[0] && (show_download || show_viewer) && (
-        <div
-          style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
-        >
-          {show_download && (
-            <a
-              target="_blank"
-              rel="noreferrer"
-              href={`${map_data.layers.map_layers[0].map_layer.map_service_url}?f=lyr&v=9.3`}
-            >
-              <Button size="tiny">
-                <Button.Content>
-                  <Icon name={downloadSVG} title="Download" size="25px" />
-                </Button.Content>
-              </Button>
-            </a>
-          )}
-          {show_viewer && (
-            <a
-              target="_blank"
-              rel="noreferrer"
-              href={
-                `https://www.arcgis.com/home/webmap/viewer.html?url=` +
-                `${map_data.layers.map_layers[0].map_layer.map_service_url}&source=sd`
-              }
-            >
-              <Button size="tiny">
-                <Button.Content>
-                  <Icon name={worldSVG} title="View map" size="25px" />
-                </Button.Content>
-              </Button>
-            </a>
+      {map_data &&
+        map_data.layers?.map_layers[0] &&
+        (show_download || show_viewer) && (
+          <div
+            style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
+          >
+            {show_download && (
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href={`${map_data.layers.map_layers[0].map_layer.map_service_url}?f=lyr&v=9.3`}
+              >
+                <Button size="tiny">
+                  <Button.Content>
+                    <Icon name={downloadSVG} title="Download" size="25px" />
+                  </Button.Content>
+                </Button>
+              </a>
+            )}
+            {show_viewer && (
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href={
+                  `https://www.arcgis.com/home/webmap/viewer.html?url=` +
+                  `${map_data.layers.map_layers[0].map_layer.map_service_url}&source=sd`
+                }
+              >
+                <Button size="tiny">
+                  <Button.Content>
+                    <Icon name={worldSVG} title="View map" size="25px" />
+                  </Button.Content>
+                </Button>
+              </a>
+            )}
+          </div>
+        )}
+      {show_legend && map_data && <LegendWidget data={map_data} />}
+      {show_sources && (
+        <>
+          {data_provenance &&
+          data_provenance.data &&
+          data_provenance.data.length > 0 ? (
+            <div>
+              <h3>Sources:</h3>
+              {data_provenance.data.map((data, i) => (
+                <div key={i}>
+                  <p className="map_source_title">{data.title}</p>
+                  <p className="map_source_description">{data.organisation}</p>
+                  <UniversalLink href={data.link}>{data.link} </UniversalLink>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p>Data provenance is not set for visualization used or page</p>
           )}
-        </div>
+        </>
       )}
-      {show_legend && <LegendWidget data={map_data} />}
       {description && serializeNodes(description)}
     </div>
   );

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Icon } from '@plone/volto/components';
 import { Input, Select, Button, Grid } from 'semantic-ui-react';
+import { QueryBuilder } from 'react-querybuilder';
+import 'react-querybuilder/dist/query-builder.css';
 
 import checkSVG from '@plone/volto/icons/check.svg';
 import closeSVG from '@plone/volto/icons/clear.svg';
@@ -31,7 +33,8 @@ const LayerSelectWidget = (props) => {
   const [availableLayers, setAvailableLayers] = React.useState(
     available_layers,
   );
-  const [layerQuery, setLayerQuery] = React.useState(query);
+
+  const [builtQuery, setBuiltQuery] = React.useState(query);
 
   const handleServiceUrlCheck = async () => {
     // fetch url, save it, populate layers options
@@ -79,14 +82,16 @@ const LayerSelectWidget = (props) => {
       map_data: mapData,
       query: '',
     });
-    setLayerQuery('');
+    setBuiltQuery('');
   };
 
   const handleQueryLayer = () => {
-    onChange(id, {
-      ...value,
-      query: layerQuery,
-    });
+    if (builtQuery) {
+      onChange(id, {
+        ...value,
+        query: builtQuery,
+      });
+    }
   };
 
   const handleChangeServiceUrl = (value) => {
@@ -94,7 +99,7 @@ const LayerSelectWidget = (props) => {
     setCheckColor('');
     setServiceUrl(value);
     setAvailableLayers('');
-    setLayerQuery('');
+    setBuiltQuery('');
     setSelectedLayer('');
   };
 
@@ -103,7 +108,7 @@ const LayerSelectWidget = (props) => {
     setServiceUrl(map_service_url);
     setCheckColor('');
     setAvailableLayers(available_layers);
-    setLayerQuery(query);
+    setBuiltQuery('');
     setSelectedLayer(layer);
   };
 
@@ -178,15 +183,17 @@ const LayerSelectWidget = (props) => {
             <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
               Query Layer
             </h5>
-            <Grid.Row stretched>
-              <Input
-                type="text"
-                style={{ width: '100%' }}
-                onChange={(e, { value }) => setLayerQuery(value)}
-                value={layerQuery}
-              ></Input>
+            <Grid.Row>
+              <QueryBuilder
+                fields={fields.map((fi, i) => {
+                  return { name: fi.name, label: fi.name };
+                })}
+                query={builtQuery}
+                onQueryChange={(q) => setBuiltQuery(q)}
+                enableDragAndDrop={false}
+              />
             </Grid.Row>
-            {layerQuery && (
+            {builtQuery && (
               <Grid.Row>
                 <Button
                   type="submit"
@@ -213,7 +220,7 @@ const LayerSelectWidget = (props) => {
             </Grid.Row>
             {fields.map((field, id) => (
               <p style={{ fontSize: '12px', padding: '0 5px' }}>
-                {field.alias}
+                <strong>{field.alias}</strong> ({field.type})
               </p>
             ))}
           </>

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

@@ -62,7 +62,6 @@ const MapEditorWidget = (props) => {
             >
               <InlineForm
                 block={block}
-                //title={schema.title}
                 schema={schema}
                 onChangeField={(id, value) => {
                   handleChangeField(id, value);

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

@@ -53,6 +53,68 @@
   animation: fadeDown 0.2s ease-in;
 }
 
+.ruleGroup {
+  border: 1px solid lightgray !important;
+  margin: 10px 0;
+  background-color: transparent !important;
+}
+
+.ruleGroup-addRule {
+  padding: 7px 10px !important;
+  background-color: darkgray !important;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.ruleGroup-addGroup {
+  padding: 7px 10px !important;
+  background-color: darkgray !important;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.ruleGroup-combinators {
+  padding: 0.3em 0 !important;
+}
+
+.rule-operators {
+  padding: 0.3em 0 !important;
+}
+
+.rule-value {
+  padding: 0.3em 0 !important;
+}
+
+.rule-fields {
+  padding: 0.3em 0 !important;
+}
+
+.rule-remove {
+  padding: 1px 6px !important;
+  border: 2px solid #d02144 !important;
+  border-radius: 50px;
+  color: #d02144;
+  cursor: pointer;
+}
+
+.map_source_title {
+  margin-top: 15px !important;
+  margin-bottom: 5px !important;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.map_source_description {
+  margin: 5px 0 !important;
+  font-size: 14px;
+}
+
 @keyframes fadeDown {
   from {
     opacity: 0;

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

@@ -7,12 +7,12 @@ import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
 import './styles/map.css';
 
 const Edit = (props) => {
-  const { block, data, onChangeBlock, selected } = props;
+  const { block, data, onChangeBlock, selected, id } = props;
   const schema = React.useMemo(() => Schema(props), [props]);
 
   return (
     <div>
-      <View data={data} />
+      <View data={data} id={id} />
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}

package/src/components/Blocks/EmbedEEAMap/Schema.js

@@ -12,6 +12,7 @@ export const Schema = (props) => {
           'show_legend',
           'show_download',
           'show_viewer',
+          'show_sources',
         ],
       },
     ],
@@ -28,6 +29,10 @@ export const Schema = (props) => {
         title: 'Description',
         widget: 'slate',
       },
+      show_sources: {
+        title: 'Show sources',
+        type: 'boolean',
+      },
       show_legend: {
         title: 'Show legend',
         type: 'boolean',

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

@@ -6,15 +6,18 @@ import { compose } from 'redux';
 import { PrivacyProtection } from '@eeacms/volto-embed';
 import Webmap from '../EEAMap/components/Webmap';
 import ExtraViews from '../EEAMap/components/widgets/ExtraViews';
-import { getVisualization } from '@eeacms/volto-eea-map/actions';
+import { getContent } from '@plone/volto/actions';
 
 const View = (props) => {
-  const { data, map_visualization } = props || {};
+  const { data, viz_content = {}, id } = props || {};
   const { height = '', vis_url = '' } = data;
 
+  const { map_visualization_data = '', data_provenance = {} } =
+    viz_content || {};
+
   React.useEffect(() => {
     if (vis_url) {
-      props.getVisualization(vis_url);
+      props.getContent(vis_url, null, id);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vis_url]);
@@ -22,13 +25,19 @@ const View = (props) => {
   return (
     <div>
       <PrivacyProtection data={data} {...props}>
-        {map_visualization && (
+        {map_visualization_data && (
           <div>
-            <Webmap data={map_visualization.data} height={height} />
-            <ExtraViews data={{ ...data, map_data: map_visualization.data }} />
+            <Webmap data={map_visualization_data} height={height} />
+            <ExtraViews
+              data={{
+                ...data,
+                data_provenance,
+                map_data: map_visualization_data,
+              }}
+            />
           </div>
         )}
-        {!map_visualization && (
+        {!map_visualization_data && (
           <p>No map view to show. Set visualization in block configuration.</p>
         )}
       </PrivacyProtection>
@@ -39,10 +48,10 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
-      map_visualization: state.map_visualizations.data[props.data.vis_url],
+      viz_content: state.content.subrequests?.[props.id]?.data,
     }),
     {
-      getVisualization,
+      getContent,
     },
   ),
 )(View);