@eeacms/volto-arcgis-block 0.1.313 → 0.1.315

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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.315](https://github.com/eea/volto-arcgis-block/compare/0.1.314...0.1.315) - 18 November 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-276819 (bug): improved specificity in container variables upon load/reload [Unai Bolivar - [`dac6af1`](https://github.com/eea/volto-arcgis-block/commit/dac6af15642e02cf436f7395f31b1916e7b04ef3)]
+### [0.1.314](https://github.com/eea/volto-arcgis-block/compare/0.1.313...0.1.314) - 13 November 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-3362 (bug): Info widget properly lays out layer data from fields properties [Unai Bolivar - [`9fc0198`](https://github.com/eea/volto-arcgis-block/commit/9fc01986f796c1444acdb01faa301b690c5c3aad)]
+- CLMS-3362 (bug): Info widget still needs work addressing map image layers [Unai Bolivar - [`e22f46b`](https://github.com/eea/volto-arcgis-block/commit/e22f46b6a00492de52df2d78e79f470da00d125e)]
 ### [0.1.313](https://github.com/eea/volto-arcgis-block/compare/0.1.312...0.1.313) - 11 November 2024
 
 ### [0.1.312](https://github.com/eea/volto-arcgis-block/compare/0.1.311...0.1.312) - 8 November 2024

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.313",
+  "version": "0.1.315",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/InfoWidget.jsx

@@ -134,10 +134,11 @@ class InfoWidget extends React.Component {
                 }
               }
             }
-          } else {
+          }
+          if (!title) {
             title = this.getLayerTitle(layer);
           }
-          if (layer.isTimeSeries) {
+          if (layer?.isTimeSeries) {
             if (layer.url.toLowerCase().includes('wms')) {
               layerTypes.push({
                 isTimeSeries: true,
@@ -164,14 +165,33 @@ class InfoWidget extends React.Component {
               promises.push(this.identify(layer, e));
             }
           } else {
-            if (layer.url.toLowerCase().includes('wms')) {
+            if (layer.url?.toLowerCase().endsWith('mapserver')) {
+              const capabilitiesIndex = {
+                1: 13,
+                2: 12,
+                3: 11,
+                4: 10,
+                5: 9,
+                7: 7,
+                8: 6,
+                9: 5,
+                10: 4,
+                11: 3,
+                12: 0,
+                13: 1,
+              };
+
               layerTypes.push({
                 isTimeSeries: false,
-                type: 'wms',
+                type: 'map-image',
                 title: title,
                 fields: layer.fields,
               });
-              promises.push(this.identifyWMS(layer, e));
+              capabilitiesIndex[index] !== undefined
+                ? promises.push(
+                    this.ogcCapabilities(layer, capabilitiesIndex[index]),
+                  )
+                : promises.push(Promise.reject());
             } else if (layer.url.toLowerCase().includes('wmts')) {
               layerTypes.push({
                 isTimeSeries: false,
@@ -205,7 +225,7 @@ class InfoWidget extends React.Component {
                     fields: layer.fields,
                   };
                 } else {
-                  if (layer.isTimeSeries) {
+                  if (layer?.isTimeSeries) {
                     switch (layer.type) {
                       case 'wms':
                         if (data.type === 'FeatureCollection') {
@@ -355,6 +375,26 @@ class InfoWidget extends React.Component {
                           fields: layer.fields,
                         };
                         break;
+                      case 'map-image':
+                        if (properties.length) properties = [];
+                        if (data && data.fields) {
+                          properties = data.fields
+                            .map((field) => {
+                              return Object.entries(field).map(
+                                ([key, value]) => {
+                                  return [key, value];
+                                },
+                              );
+                            })
+                            .flat();
+                        }
+                        this.infoData[index] = {
+                          title: layer.title,
+                          data: properties,
+                          message: message,
+                          fields: layer.fields,
+                        };
+                        break;
                       default:
                         break;
                     }
@@ -381,6 +421,8 @@ class InfoWidget extends React.Component {
     if (layer.url.toLowerCase().includes('wmts')) {
       // CLMS-1105
       title = layer._wmtsTitle;
+    } else if (layer.url.toLowerCase().toLowerCase().endsWith('mapserver')) {
+      title = layer.title;
     } else {
       if (layer.sublayers) {
         title = layer.sublayers.items[0].title;
@@ -482,6 +524,18 @@ class InfoWidget extends React.Component {
     });
   }
 
+  ogcCapabilities(layer, index) {
+    let url = `${layer.url}/${index}?f=pjson`;
+    return esriRequest(url, {
+      responseType: 'application/json',
+      sync: 'true',
+    }).then((response) => {
+      if (!response) return;
+      let data = JSON.parse(response.data);
+      return data;
+    });
+  }
+
   parseCapabilities(xml, tag) {
     let result = xml.getElementsByTagName(tag);
 

package/src/components/MapViewer/MenuWidget.jsx

@@ -683,11 +683,16 @@ class MenuWidget extends React.Component {
         // and ensure that the component is rendered again
         this.setState({ showMapMenu: false });
       } else {
-        const container = this.container.current;
-        if (!this.container.current) return;
-        const tabContainer = container.querySelector('#tabcontainer');
-        const paneles = container.querySelector('#paneles');
-        const esriWidgetButton = container.querySelector(
+        /*  
+        The following variables have been changed from container
+        to this.container.current to avoid data viewer crash
+        when client comes from dataset / product pages or refreshing
+        */
+        const tabContainer = this.container.current.querySelector(
+          '#tabcontainer',
+        );
+        const paneles = this.container.current.querySelector('#paneles');
+        const esriWidgetButton = this.container.current.querySelector(
           '.esri-widget--button',
         );
         const timeSliderContainer = document.querySelector(
@@ -719,7 +724,7 @@ class MenuWidget extends React.Component {
         // and ensure that the component is rendered again
         this.setState({ showMapMenu: true });
       }
-      if (this.loadFirst) {
+      if (this.loadFirst && this.container.current) {
         this.checkUrl();
         this.loadFirst = false;
         this.zoomTooltips();
@@ -822,13 +827,6 @@ class MenuWidget extends React.Component {
     }, 1000);
   }
 
-  waitForContainer(mapdiv) {
-    while (mapdiv === null) {
-      new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
-    }
-    return mapdiv;
-  }
-
   /**
    * This method is executed after the render method is executed
    */
@@ -875,11 +873,6 @@ class MenuWidget extends React.Component {
           this.props.bookmarkData === undefined
         ) {
           return;
-          //} else if (
-          //  this.props.bookmarkData &&
-          //  this.props.bookmarkData.active === false
-          //) {
-          //  return;
         } else if (
           this.props.bookmarkData &&
           this.props.bookmarkData.active === true
@@ -897,13 +890,11 @@ class MenuWidget extends React.Component {
                   let visibleArray = this.props.bookmarkData.visible[pos];
                   visible =
                     String(visibleArray[index]) === 'true' ? true : false;
-                  //this.layers[layer].visible = visible;
                   if (this.layers[layer]) {
                     let opacityArray = this.props.bookmarkData.opacity[pos];
                     this.layers[layer].opacity = opacityArray[index];
                   }
                 }
-                //this.map.layers.add(this.layers[layer]);
                 node.checked = true;
                 this.toggleLayer(node);
                 if (visible === false) {