@eeacms/volto-arcgis-block 0.1.35 → 0.1.38

package/CHANGELOG.md

@@ -4,8 +4,38 @@ 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.38](https://github.com/eea/volto-arcgis-block/compare/0.1.37...0.1.38)
+
+- Bugs n improvements [`#114`](https://github.com/eea/volto-arcgis-block/pull/114)
+- change clms-utils version [`029f7af`](https://github.com/eea/volto-arcgis-block/commit/029f7afae5aa03dd732ea8b6e01f59eceec5c281)
+- ESLint fix [`dcdd9e7`](https://github.com/eea/volto-arcgis-block/commit/dcdd9e7b9fa206def9ff3f8173632c548ae83c59)
+- ESLint fix [`6e0cba5`](https://github.com/eea/volto-arcgis-block/commit/6e0cba5ecc450deec0deded854f7ad46c6eb7cf8)
+- Info widget table [`65da92c`](https://github.com/eea/volto-arcgis-block/commit/65da92c048bd363a7070c9e63f3c199f5be61721)
+
+#### [0.1.37](https://github.com/eea/volto-arcgis-block/compare/0.1.36...0.1.37)
+
+> 15 March 2022
+
+- Develop [`#113`](https://github.com/eea/volto-arcgis-block/pull/113)
+- Download flow [`#112`](https://github.com/eea/volto-arcgis-block/pull/112)
+
+#### [0.1.36](https://github.com/eea/volto-arcgis-block/compare/0.1.35...0.1.36)
+
+> 11 March 2022
+
+- Develop [`#111`](https://github.com/eea/volto-arcgis-block/pull/111)
+- Bugs n improvements [`#110`](https://github.com/eea/volto-arcgis-block/pull/110)
+- Use cases [`#109`](https://github.com/eea/volto-arcgis-block/pull/109)
+- MinZoom [`5c49b0b`](https://github.com/eea/volto-arcgis-block/commit/5c49b0b4252e5119142011bb710b1d73e3a563af)
+- Info widget bug fix [`21fd11b`](https://github.com/eea/volto-arcgis-block/commit/21fd11be9e147b35652188fef70468bad35dba12)
+- ESLint fix [`77e4aa8`](https://github.com/eea/volto-arcgis-block/commit/77e4aa8de5a28e8eb6f953f69e581bbdcafd6a63)
+- Use case repeated titles [`c4f1374`](https://github.com/eea/volto-arcgis-block/commit/c4f1374974e39de3525bd5adfa7ac9d04e409b18)
+
 #### [0.1.35](https://github.com/eea/volto-arcgis-block/compare/0.1.34...0.1.35)
 
+> 7 March 2022
+
+- Develop [`#108`](https://github.com/eea/volto-arcgis-block/pull/108)
 - Bugs n improvements [`#107`](https://github.com/eea/volto-arcgis-block/pull/107)
 - ESLint fix [`5a7ecf9`](https://github.com/eea/volto-arcgis-block/commit/5a7ecf98e35803dd61d01d4faaa89af950b630e8)
 - Summary tooltip [`066b710`](https://github.com/eea/volto-arcgis-block/commit/066b710f179147557f36004dffc29b7c10820f99)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.35",
+  "version": "0.1.38",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",
@@ -40,7 +40,7 @@
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-solid-svg-icons": "5.15.3",
     "@fortawesome/react-fontawesome": "0.1.14",
-    "@eeacms/volto-clms-utils": "0.1.1",
+    "@eeacms/volto-clms-utils": "*",
     "highcharts": "^9.3.2",
     "highcharts-react-official": "^3.1.0"
   },

package/src/components/MapViewer/AreaWidget.jsx

@@ -81,7 +81,7 @@ class AreaWidget extends React.Component {
         'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-cursor-marquee');
+        .classList.replace('esri-icon-close', 'esri-icon-cursor-marquee');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
@@ -95,7 +95,7 @@ class AreaWidget extends React.Component {
         'block';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-cursor-marquee', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-cursor-marquee', 'esri-icon-close');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: true });

package/src/components/MapViewer/BasemapWidget.jsx

@@ -65,7 +65,7 @@ class BasemapWidget extends React.Component {
       this.basemapGallery.domNode.style.display = 'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-basemap');
+        .classList.replace('esri-icon-close', 'esri-icon-basemap');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
@@ -75,7 +75,7 @@ class BasemapWidget extends React.Component {
       this.basemapGallery.domNode.style.display = 'block';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-basemap', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-basemap', 'esri-icon-close');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: true });

package/src/components/MapViewer/InfoWidget.jsx

@@ -50,7 +50,7 @@ class InfoWidget extends React.Component {
         'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-description');
+        .classList.replace('esri-icon-close', 'esri-icon-description');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({
@@ -64,7 +64,7 @@ class InfoWidget extends React.Component {
       this.props.mapViewer.setActiveWidget(this);
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-description', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-description', 'esri-icon-close');
       this.container.current.querySelector('.info-panel').style.display =
         'block';
       // By invoking the setState, we notify the state we want to reach
@@ -110,6 +110,7 @@ class InfoWidget extends React.Component {
                 type: 'wmts',
                 title: title,
               });
+              promises.push(Promise.reject());
             } else {
               layerTypes.push({
                 isTimeSeries: true,
@@ -132,6 +133,7 @@ class InfoWidget extends React.Component {
                 type: 'wmts',
                 title: title,
               });
+              promises.push(Promise.reject());
             } else {
               layerTypes.push({
                 isTimeSeries: false,
@@ -147,131 +149,144 @@ class InfoWidget extends React.Component {
                 let data = response.value;
                 let layer = layerTypes[index];
                 let properties = [];
-                if (layer.isTimeSeries) {
-                  switch (layer.type) {
-                    case 'wms':
-                      if (data.type === 'FeatureCollection') {
-                        if (data.features.length) {
-                          let obj = data.features.map((a) => {
-                            return a.properties;
-                          });
-                          properties = this.transformWmsData(obj);
-                        }
-                      } else if (data.doctype && data.doctype.name === 'html') {
-                        let th = data.querySelectorAll('tbody th');
-                        let tr = data.querySelectorAll(
-                          'tbody tr:not(:first-of-type)',
-                        );
-                        if (th.length) {
-                          let obj = Array.from(tr).map((a) => {
-                            let x = [];
-                            a.querySelectorAll('td').forEach((td, index) => {
-                              x[th[index].textContent] = td.textContent;
+                if (response.status === 'rejected') {
+                  this.infoData[index] = {
+                    title: layer.title,
+                    data: properties,
+                  };
+                } else {
+                  if (layer.isTimeSeries) {
+                    switch (layer.type) {
+                      case 'wms':
+                        if (data.type === 'FeatureCollection') {
+                          if (data.features.length) {
+                            let obj = data.features.map((a) => {
+                              return a.properties;
                             });
-                            return x;
-                          });
-                          properties = this.transformWmsData(obj);
-                        }
-                      } else if (
-                        data.getElementsByTagName('FIELDS').length &&
-                        typeof data !== 'undefined'
-                      ) {
-                        let fields = data.getElementsByTagName('FIELDS');
-                        if (fields.length) {
-                          let obj = Array.from(fields).map((a) => {
-                            let x = [];
-                            Object.entries(a.attributes).forEach((b) => {
-                              x[b[1].name] = b[1].value;
+                            properties = this.transformWmsData(obj);
+                          }
+                        } else if (
+                          data.doctype &&
+                          data.doctype.name === 'html'
+                        ) {
+                          let th = data.querySelectorAll('tbody th');
+                          let tr = data.querySelectorAll(
+                            'tbody tr:not(:first-of-type)',
+                          );
+                          if (th.length) {
+                            let obj = Array.from(tr).map((a) => {
+                              let x = [];
+                              a.querySelectorAll('td').forEach((td, index) => {
+                                x[th[index].textContent] = td.textContent;
+                              });
+                              return x;
                             });
-                            return x;
-                          });
-                          properties = this.transformWmsData(obj);
-                        }
-                      }
-                      this.infoData[index] = {
-                        title: layer.title,
-                        data: properties,
-                        time: true,
-                      };
-                      break;
-                    case 'wmts':
-                      this.infoData[index] = {
-                        title: layer.title,
-                        data: properties,
-                        time: true,
-                      };
-                      break;
-                    case 'featureLayer':
-                      this.infoData[index] = {
-                        title: layer.title,
-                        data: data,
-                        time: true,
-                      };
-                      break;
-                    default:
-                      break;
-                  }
-                } else {
-                  switch (layer.type) {
-                    case 'wms':
-                      if (data.type === 'FeatureCollection') {
-                        if (data.features.length) {
-                          properties = data.features[0].properties;
-                          properties = Object.entries(properties);
-                        }
-                      } else if (data.doctype && data.doctype.name === 'html') {
-                        let th = data.querySelectorAll('tbody th');
-                        let td = data.querySelectorAll('tbody td');
-                        if (th.length) {
-                          let fields = [];
-                          th.forEach((item, index) => {
-                            fields.push([
-                              item.textContent,
-                              td[index].textContent,
-                            ]);
-                          });
-                          properties = fields;
+                            properties = this.transformWmsData(obj);
+                          }
+                        } else if (
+                          data.getElementsByTagName('FIELDS').length &&
+                          typeof data !== 'undefined'
+                        ) {
+                          let fields = data.getElementsByTagName('FIELDS');
+                          if (fields.length) {
+                            let obj = Array.from(fields).map((a) => {
+                              let x = [];
+                              Object.entries(a.attributes).forEach((b) => {
+                                x[b[1].name] = b[1].value;
+                              });
+                              return x;
+                            });
+                            properties = this.transformWmsData(obj);
+                          }
                         }
-                      } else if (
-                        data.getElementsByTagName('FIELDS').length &&
-                        typeof data !== 'undefined'
-                      ) {
-                        let fields = data.getElementsByTagName('FIELDS');
-                        if (fields.length) {
-                          properties = Object.entries(fields[0].attributes).map(
-                            (a) => {
+                        this.infoData[index] = {
+                          title: layer.title,
+                          data: properties,
+                          time: true,
+                        };
+                        break;
+                      case 'wmts':
+                        this.infoData[index] = {
+                          title: layer.title,
+                          data: properties,
+                          time: true,
+                        };
+                        break;
+                      case 'featureLayer':
+                        this.infoData[index] = {
+                          title: layer.title,
+                          data: data,
+                          time: true,
+                        };
+                        break;
+                      default:
+                        break;
+                    }
+                  } else {
+                    switch (layer.type) {
+                      case 'wms':
+                        if (data.type === 'FeatureCollection') {
+                          if (data.features.length) {
+                            properties = data.features[0].properties;
+                            properties = Object.entries(properties);
+                          }
+                        } else if (
+                          data.doctype &&
+                          data.doctype.name === 'html'
+                        ) {
+                          let th = data.querySelectorAll('tbody th');
+                          let td = data.querySelectorAll('tbody td');
+                          if (th.length) {
+                            let fields = [];
+                            th.forEach((item, index) => {
+                              fields.push([
+                                item.textContent,
+                                td[index].textContent,
+                              ]);
+                            });
+                            properties = fields;
+                          }
+                        } else if (
+                          data.getElementsByTagName('FIELDS').length &&
+                          typeof data !== 'undefined'
+                        ) {
+                          let fields = data.getElementsByTagName('FIELDS');
+                          if (fields.length) {
+                            properties = Object.entries(
+                              fields[0].attributes,
+                            ).map((a) => {
                               return [a[1].name, a[1].value];
-                            },
-                          );
+                            });
+                          }
                         }
-                      }
-                      this.infoData[index] = {
-                        title: layer.title,
-                        data: properties,
-                      };
-                      break;
-                    case 'wmts':
-                      this.infoData[index] = {
-                        title: layer.title,
-                        data: properties,
-                      };
-                      break;
-                    case 'featureLayer':
-                      if (data.results.length) {
-                        var graphic = data.results.filter((result) => {
-                          return result.graphic.layer === layers[index];
-                        })[0].graphic;
-                        if (graphic) {
-                          properties = graphic.attributes;
+                        this.infoData[index] = {
+                          title: layer.title,
+                          data: properties,
+                        };
+                        break;
+                      case 'wmts':
+                        this.infoData[index] = {
+                          title: layer.title,
+                          data: properties,
+                        };
+                        break;
+                      case 'featureLayer':
+                        if (data.results.length) {
+                          var graphic = data.results.filter((result) => {
+                            return result.graphic.layer === layers[index];
+                          })[0].graphic;
+                          if (graphic) {
+                            properties = graphic.attributes;
+                          }
                         }
-                      }
-                      this.infoData[index] = {
-                        title: layer.title,
-                        data: Object.entries(properties),
-                      };
-                      break;
-                    default:
-                      break;
+                        this.infoData[index] = {
+                          title: layer.title,
+                          data: Object.entries(properties),
+                        };
+                        break;
+                      default:
+                        break;
+                    }
                   }
                 }
               });
@@ -418,13 +433,17 @@ class InfoWidget extends React.Component {
   }
 
   transformWmsData(obj) {
-    let values = { timeFields: {}, data: {}, variables: {} };
+    let values = { timeFields: {}, data: {}, variables: {}, tableData: {} };
     let startField = Object.keys(obj[0]).find(
       (a, i) =>
         a.toUpperCase().includes('DATE') &&
         !isNaN(parseInt(Object.values(obj[0])[i])),
     );
     values.timeFields['start'] = startField;
+    values.tableData['fields'] = Object.keys(obj[0]);
+    values.tableData['values'] = obj.map((a) => {
+      return Object.entries(a);
+    });
     let fields = Object.keys(obj[0]).filter((a, i) => {
       return (
         !isNaN(parseInt(Object.values(obj[0])[i])) &&
@@ -495,10 +514,13 @@ class InfoWidget extends React.Component {
   }
 
   identify(layer, evt) {
-    let values = { timeFields: {}, data: {}, variables: {} };
+    let values = { timeFields: {}, data: {}, variables: {}, tableData: {} };
     //Complete time data
     values.timeFields['start'] = layer.timeInfo.startField;
     values.timeFields['end'] = layer.timeInfo.endField;
+    values.tableData['fields'] = layer.fields.map((a) => {
+      return a.name;
+    });
     let timeQuery = layer.createQuery();
     timeQuery.outFields = [layer.timeInfo.startField];
     let fields = layer.fields
@@ -537,7 +559,7 @@ class InfoWidget extends React.Component {
     query.units = 'meters';
     query.spatialRelationship = 'intersects'; // this is the default
     query.returnGeometry = true;
-    query.outFields = [fields.toString()]; // Information to be returned
+    query.outFields = [values.tableData.fields.toString()]; // Information to be returned
     values.data['outFields'] = [fields.toString()];
 
     let p2 = layer.queryFeatures(query).then((response) => {
@@ -564,8 +586,16 @@ class InfoWidget extends React.Component {
           e.geometry.latitude === point.latitude &&
           e.geometry.longitude === point.longitude,
       );
+      values.tableData['values'] = values.data['values'] = info.map((e) => {
+        return Object.entries(e.attributes);
+      });
       values.data['values'] = info.map((e) => {
-        return e.attributes;
+        let attributes = e.attributes;
+        return Object.fromEntries(
+          Object.entries(attributes).filter(([key]) =>
+            values.data.outFields[0].split(',').includes(key),
+          ),
+        );
       });
     });
 
@@ -680,6 +710,27 @@ class InfoWidget extends React.Component {
     );
   }
 
+  loadTimeInfoTable(index) {
+    let properties = this.infoData[index].data.tableData.values;
+    let table = properties.map((item) => {
+      let rows = item.map((row) => {
+        return (
+          <tr key={row}>
+            {Object.values(row).map((val) => (
+              <td key={val}>{val}</td>
+            ))}
+          </tr>
+        );
+      });
+      return (
+        <table className="info-table">
+          <tbody>{rows}</tbody>
+        </table>
+      );
+    });
+    return <>{table}</>;
+  }
+
   loadVariableSelector(index) {
     let response = this.infoData[index].data;
     let variables = response.variables.options;
@@ -898,6 +949,7 @@ class InfoWidget extends React.Component {
                       options={this.loadInfoChart(this.state.layerIndex)}
                     />
                     {this.loadStatisticsSelector(this.state.layerIndex)}
+                    {this.loadTimeInfoTable(this.state.layerIndex)}
                   </>
                 )}
                 {this.state.popup &&

package/src/components/MapViewer/LegendWidget.jsx

@@ -38,7 +38,7 @@ class LegendWidget extends React.Component {
         'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-legend');
+        .classList.replace('esri-icon-close', 'esri-icon-legend');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
@@ -46,7 +46,7 @@ class LegendWidget extends React.Component {
       this.props.mapViewer.setActiveWidget(this);
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-legend', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-legend', 'esri-icon-close');
       this.container.current.querySelector('.legend-panel').style.display =
         'block';
       // By invoking the setState, we notify the state we want to reach

package/src/components/MapViewer/MapViewer.jsx

@@ -14,6 +14,7 @@ import { MapViewerConfig } from '../../actions';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom;
@@ -75,6 +76,9 @@ class MapViewer extends React.Component {
       map: this.map,
       center: this.mapCfg.center,
       zoom: this.mapCfg.zoom,
+      constraints: {
+        minZoom: this.mapCfg.minZoom,
+      },
       ui: {
         components: ['attribution'],
       },
@@ -142,16 +146,9 @@ class MapViewer extends React.Component {
 
   renderArea() {
     if (this.props.mapviewer_config.Download) return;
-    if (this.view)
-      return (
-        <AreaWidget
-          view={this.view}
-          map={this.map}
-          mapViewer={this}
-          download={this.props.mapviewer_config.Download}
-          updateArea={this.updateArea}
-        />
-      );
+    if (this.view) {
+      return <CheckLogin reference={this} />;
+    }
   }
 
   renderScale() {
@@ -203,6 +200,23 @@ class MapViewer extends React.Component {
   }
 }
 
+export const CheckLogin = ({ reference }) => {
+  let { isLoggedIn } = useCartState();
+  return (
+    <>
+      {isLoggedIn && (
+        <AreaWidget
+          view={reference.view}
+          map={reference.map}
+          mapViewer={reference}
+          download={reference.props.mapviewer_config.Download}
+          updateArea={reference.updateArea}
+        />
+      )}
+    </>
+  );
+};
+
 export default compose(
   connect(
     (state, props) => ({

package/src/components/MapViewer/MeasurementWidget.jsx

@@ -38,7 +38,7 @@ class MeasurementWidget extends React.Component {
         'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-measure');
+        .classList.replace('esri-icon-close', 'esri-icon-measure');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
@@ -56,7 +56,7 @@ class MeasurementWidget extends React.Component {
         'block';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-measure', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-measure', 'esri-icon-close');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: true });
@@ -111,7 +111,7 @@ class MeasurementWidget extends React.Component {
 
   showCoordinates(pt) {
     this.setState({
-      latlong: pt.latitude.toFixed(3) + ' ' + pt.longitude.toFixed(3),
+      latlong: pt.latitude.toFixed(4) + ' ' + pt.longitude.toFixed(4),
     });
   }
 

package/src/components/MapViewer/MenuWidget.jsx

@@ -212,8 +212,9 @@ export const AddCartItem = ({
                 <ul>
                   <li>
                     <p>
-                      Download full dataset (Note: Dowload process will take
-                      longer).
+                      Add full dataset (Note: Download process will take longer
+                      and for some very large datasets, a Bounding box for
+                      Europe is selected by default).
                     </p>
                   </li>
                   <li>
@@ -359,7 +360,7 @@ class MenuWidget extends React.Component {
       this.container.current.querySelector('#paneles').style.display = 'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-left-arrow', 'esri-icon-drag-horizontal');
+        .classList.replace('esri-icon-close', 'esri-icon-drag-horizontal');
       if (document.contains(document.querySelector('.timeslider-container')))
         document.querySelector('.timeslider-container').style.display = 'none';
 
@@ -372,7 +373,7 @@ class MenuWidget extends React.Component {
       this.container.current.querySelector('#paneles').style.display = 'block';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-drag-horizontal', 'esri-icon-left-arrow');
+        .classList.replace('esri-icon-drag-horizontal', 'esri-icon-close');
       if (document.contains(document.querySelector('.timeslider-container')))
         document.querySelector('.timeslider-container').style.display = 'block';
 

package/src/components/MapViewer/PrintWidget.jsx

@@ -43,7 +43,7 @@ class PrintWidget extends React.Component {
       this.print.domNode.style.display = 'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-printer');
+        .classList.replace('esri-icon-close', 'esri-icon-printer');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
@@ -52,7 +52,7 @@ class PrintWidget extends React.Component {
       this.print.domNode.style.display = 'block';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-printer', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-printer', 'esri-icon-close');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: true });

package/src/components/MapViewer/config.js

@@ -3,6 +3,7 @@ const config = {
     div: 'mapDiv',
     center: [15, 50],
     zoom: 3,
+    minZoom: 3,
   },
   Components: [
     {

package/src/components/MapViewer/css/ArcgisMap.css

@@ -638,6 +638,7 @@
   display: block;
   margin-bottom: 1rem;
   font-weight: bold;
+  word-break: break-word;
 }
 
 .info-panel select {
@@ -646,6 +647,7 @@
 
 .info-table {
   width: 100%;
+  margin-bottom: 1rem;
   table-layout: fixed;
 }
 
@@ -665,6 +667,10 @@
   background-color: #ebebeb;
 }
 
+.info-statistics-panel {
+  margin-bottom: 1rem;
+}
+
 /* Time slider*/
 .esri-ui-bottom-right.esri-ui-corner {
   width: 100%;

package/src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -1,4 +1,5 @@
 import React, { createRef } from 'react';
+import { Loader } from 'semantic-ui-react';
 
 let layerControl,
   navigationControl,
@@ -17,6 +18,7 @@ class InfoWidget extends React.Component {
     layerSpatial = props.layerSpatial;
     layerHighlight = props.layerHighlight;
     this.container = createRef();
+    this.loadOnce = true;
   }
 
   /**
@@ -63,7 +65,7 @@ class InfoWidget extends React.Component {
             <div className="use-case-detail-info">
               <span>{UseCase.Use_case_topics}</span>
               <span>{UseCase.Use_case_submitting_production_year}</span>
-              <span>{UseCase.Spatial_coverage}</span>
+              <span>{UseCase.Origin_name}</span>
               <span>{responsibleOrganizationOrPerson}</span>
             </div>
             <div className="use-case-detail-description">
@@ -87,42 +89,56 @@ class InfoWidget extends React.Component {
    * @returns useCasesRegion
    */
   getDataBrief(data) {
+    let titles = [];
     let children = data.map((val) => {
+      let hideTitle = false;
       let responsibleOrganizationOrPerson = val.Responsible_organisation
         ? val.Responsible_organisation
         : val.Contact_person_name_
         ? val.Contact_person_name_
         : '';
+      if (titles.includes(val.Use_case_title)) {
+        hideTitle = true;
+      } else {
+        titles.push(val.Use_case_title);
+      }
       return (
-        <>
+        <div
+          key={val.OBJECTID}
+          className="use-case-element"
+          aria-hidden="true"
+          onClick={() => {
+            layerControl.getGeometry(val.Spatial_coverage, layerHighlight);
+            layerControl.showLayer(layerHighlight.id);
+            mapViewer.setState((prevState) => ({
+              useCaseLevel: 4,
+              selectedUseCase: val,
+              previousState: prevState.useCaseLevel,
+            }));
+          }}
+          id={`use_case_${val.OBJECTID}`}
+        >
           <div
-            key={val.Use_case_title}
-            className="use-case-element"
-            aria-hidden="true"
-            onClick={() => {
-              layerControl.getGeometry(val.Spatial_coverage, layerHighlight);
-              layerControl.showLayer(layerHighlight.id);
-              mapViewer.setState((prevState) => ({
-                useCaseLevel: 4,
-                selectedUseCase: val,
-                previousState: prevState.useCaseLevel,
-              }));
-            }}
-            id={`use_case_${val.OBJECTID}`}
+            className="use-case-element-title"
+            style={{ display: hideTitle && 'none' }}
           >
-            <div className="use-case-element-title">{val.Use_case_title}</div>
-            <div className="use-case-element-description">
-              <span>{val.Use_case_topics}</span>
-              <span>{val.Use_case_submitting_production_year}</span>
-              <span className="use-case-coverage">{val.Spatial_coverage}</span>
-              <span>{responsibleOrganizationOrPerson}</span>
-            </div>
+            {val.Use_case_title}
           </div>
-        </>
+          <div className="use-case-element-description">
+            <span>{val.Use_case_topics}</span>
+            <span>{val.Use_case_submitting_production_year}</span>
+            <span
+              className="use-case-coverage"
+              data-country-code={val.Spatial_coverage}
+            >
+              {val.Origin_name}
+            </span>
+            <span>{responsibleOrganizationOrPerson}</span>
+          </div>
+        </div>
       );
     });
-
-    return <>{children}</>;
+    return children;
   }
 
   /**
@@ -229,24 +245,22 @@ class InfoWidget extends React.Component {
     let children = this.getDataBrief(data);
 
     return (
-      <>
+      <div
+        key={Copernicus_Land_Monitoring_Service_products_used}
+        className="use-cases-dropdown"
+      >
         <div
-          key={Copernicus_Land_Monitoring_Service_products_used}
-          className="use-cases-dropdown"
+          className="ccl-expandable__button"
+          aria-expanded="false"
+          onClick={this.toggleDropdownContent.bind(this)}
+          onKeyDown={this.toggleDropdownContent.bind(this)}
+          tabIndex="0"
+          role="button"
         >
-          <div
-            className="ccl-expandable__button"
-            aria-expanded="false"
-            onClick={this.toggleDropdownContent.bind(this)}
-            onKeyDown={this.toggleDropdownContent.bind(this)}
-            tabIndex="0"
-            role="button"
-          >
-            {Copernicus_Land_Monitoring_Service_products_used}
-          </div>
-          <div className="use-cases-element-container">{children}</div>
+          {Copernicus_Land_Monitoring_Service_products_used}
         </div>
-      </>
+        <div className="use-cases-element-container">{children}</div>
+      </div>
     );
   }
 
@@ -270,10 +284,18 @@ class InfoWidget extends React.Component {
       DOMElements.push(
         this.getDataSummary(processedData[product_use_name], product_use_name),
       );
-
     return <>{DOMElements}</>;
   }
 
+  getCountryNames(countries) {
+    let url =
+      this.props.layerHighlight.url +
+      '/0/query?where=CNTR_ID+in+%28' +
+      countries +
+      '%29&text=&objectIds=&time=&timeRelation=esriTimeRelationOverlaps&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&distance=&units=esriSRUnit_Foot&relationParam=&outFields=CNTR_ID%2C+NAME_ENGL&returnGeometry=false&returnTrueCurves=false&maxAllowableOffset=&geometryPrecision=&outSR=&havingClause=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&historicMoment=&returnDistinctValues=false&resultOffset=&resultRecordCount=&returnExtentOnly=false&sqlFormat=none&datumTransformation=&parameterValues=&rangeValues=&quantizationParameters=&featureEncoding=esriDefault&f=pjson';
+    return fetch(url);
+  }
+
   /**
    * Returns all different service product names
    * @param {Array} features
@@ -302,21 +324,33 @@ class InfoWidget extends React.Component {
    * Shows summarized information of a whole set of use cases.
    */
   showSummary() {
-    if (view !== undefined && this.features === undefined) {
+    if (view !== undefined && this.features === undefined && this.loadOnce) {
+      this.loadOnce = false;
       (async () => {
         let features = await layerSpatial
           .queryFeatures()
           .then((featureSet) => featureSet.features);
-        features = layerControl.orderFeatures(features);
-
-        this.features = features;
+        let countryCodes = features
+          .map((a) => {
+            return a.attributes;
+          })
+          .map((b) => {
+            return "'" + b.Spatial_coverage + "'";
+          })
+          .filter((v, i, a) => a.indexOf(v) === i);
+        this.getCountryNames(countryCodes)
+          .then((response) => response.json())
+          .then((data) => {
+            features = layerControl.orderFeatures(features, data.features);
+            this.features = features;
 
-        mapViewer.setState((prevState) => ({
-          useCaseLevel: 1,
-          region: '',
-          selectedUseCase: '',
-          previousState: prevState.useCaseLevel,
-        }));
+            mapViewer.setState((prevState) => ({
+              useCaseLevel: 1,
+              region: '',
+              selectedUseCase: '',
+              previousState: prevState.useCaseLevel,
+            }));
+          });
       })();
     } else if (this.features !== undefined) {
       if (mapViewer.state.useCaseLevel !== 1) {
@@ -388,6 +422,9 @@ class InfoWidget extends React.Component {
       <>
         <div className="use-cases-products-block cont-w-50">
           {this.useCasesInformationPanel()}
+          {!this.features && (
+            <Loader active inline="centered" indeterminate size="small" />
+          )}
         </div>
       </>
     );

package/src/components/UseCasesMapViewer/LayerControl.jsx

@@ -196,7 +196,7 @@ class LayerControl {
         document
           .querySelectorAll('.use-case-element-description .use-case-coverage')
           .forEach((element) => {
-            if (element.innerText === country_code) {
+            if (element.dataset.countryCode === country_code) {
               element.closest('.use-case-element').classList.add('selected');
             }
           });
@@ -218,21 +218,66 @@ class LayerControl {
    * @param {Object} features
    * @returns features ordered
    */
-  orderFeatures(features) {
+  orderFeatures(features, countries) {
+    features.map((feature) => {
+      let country = countries
+        .map((a) => {
+          return a.attributes;
+        })
+        .find((b) => {
+          return b.CNTR_ID === feature.attributes.Spatial_coverage;
+        });
+      if (country) {
+        feature.attributes.Origin_name = country.NAME_ENGL;
+      }
+      return feature;
+    });
+
     features.sort(function (a, b) {
       if (
         a.attributes.Copernicus_Land_Monitoring_Service_products_used <
         b.attributes.Copernicus_Land_Monitoring_Service_products_used
       )
         return -1;
-
-      if (
+      else if (
         a.attributes.Copernicus_Land_Monitoring_Service_products_used >
         b.attributes.Copernicus_Land_Monitoring_Service_products_used
       )
         return 1;
-
-      return 0;
+      else {
+        if (a.attributes.Use_case_title < b.attributes.Use_case_title)
+          return -1;
+        else if (a.attributes.Use_case_title > b.attributes.Use_case_title)
+          return 1;
+        else {
+          if (
+            a.attributes.Use_case_submitting_production_year >
+            b.attributes.Use_case_submitting_production_year
+          ) {
+            return -1;
+          } else if (
+            a.attributes.Use_case_submitting_production_year <
+            b.attributes.Use_case_submitting_production_year
+          ) {
+            return 1;
+          } else {
+            var sortOrder = ['EEA', 'EU'];
+            if (
+              !sortOrder.includes(a.attributes.Origin_name) &&
+              !sortOrder.includes(b.attributes.Origin_name)
+            ) {
+              return a.attributes.Origin_name.localeCompare(
+                b.attributes.Origin_name,
+              );
+            } else {
+              return (
+                -sortOrder.indexOf(a.attributes.Origin_name) -
+                -sortOrder.indexOf(b.attributes.Origin_name)
+              );
+            }
+          }
+        }
+      }
     });
     return features;
   }

package/src/components/UseCasesMapViewer/LegendWidget.jsx

@@ -35,14 +35,14 @@ class LegendWidget extends React.Component {
         'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-legend');
+        .classList.replace('esri-icon-close', 'esri-icon-legend');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.mapViewer.setState({ showMapMenu: false });
     } else {
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-legend', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-legend', 'esri-icon-close');
       this.container.current.querySelector('.legend-panel').style.display =
         'block';
 

package/src/components/UseCasesMapViewer/css/ArcgisMap.css

@@ -177,6 +177,7 @@
   margin-bottom: 0;
   color: #656565;
   font-size: 0.875rem;
+  word-break: break-word;
 }
 
 .use-case-element-description span:not(:last-of-type) {