@opengeoweb/webmap-react 12.11.0 → 12.12.0

package/index.esm.js

@@ -5003,6 +5003,47 @@ var getTimeStepsToCheck = function getTimeStepsToCheck(timespan) {
  */
 var getTimeStepsToCheckMemoized = memoize(getTimeStepsToCheck);
 
+var getDimensionName = function getDimensionName(dimName) {
+  switch (dimName) {
+    case 'time':
+      return 'val';
+    case 'reference_time':
+      return 'ref';
+    default:
+      {
+        var split = dimName.split('_');
+        if (split[0] === 'pressure') {
+          return 'p';
+        }
+        if (split[0] === 'height') {
+          return 'h';
+        }
+        return split[0];
+      }
+  }
+};
+var formatDimensionVal = function formatDimensionVal(dimName, dimVal) {
+  switch (dimName) {
+    case 'time':
+    case 'reference_time':
+      {
+        var date = dateUtils.stringToDate(dimVal, "yyyy-MM-dd'T'HH:mm:ss'Z'", true);
+        if (date) {
+          return dateUtils.dateToString(date, "MM-dd HH:mm'Z'", true);
+        }
+        return dimVal;
+      }
+    default:
+      {
+        return dimVal;
+      }
+  }
+};
+var getDimensionInfo = function getDimensionInfo(wmLayerDimension) {
+  var layerName = getDimensionName(wmLayerDimension.name);
+  var layerVal = formatDimensionVal(wmLayerDimension.name, wmLayerDimension.currentValue);
+  return "".concat(layerName, " ").concat(layerVal);
+};
 var ShowTimeAwareLayerInfo = function ShowTimeAwareLayerInfo(_ref) {
   var _wmLayer$dimensions;
   var wmLayer = _ref.wmLayer,
@@ -5039,9 +5080,9 @@ var ShowTimeAwareLayerInfo = function ShowTimeAwareLayerInfo(_ref) {
       var isSelectedStep = visible && (wmTimeDim === null || wmTimeDim === void 0 ? void 0 : wmTimeDim.currentValue) === closestValue;
       var colorImageIsAvailable = requestedStepHasImage ? '#40AF50' : '#FF0000';
       var colorLayerIsOutsideRange = requestedStepIsOutsideRange ? '#5080FA' : colorImageIsAvailable;
-      var height = requestedStepIsOutsideRange ? '15px' : '26px';
-      var top = requestedStepIsOutsideRange ? '5px' : '0px';
-      var left = "".concat(index * itemWidth, "px");
+      var height = requestedStepIsOutsideRange ? '15px' : '20px';
+      var top = requestedStepIsOutsideRange ? '5px' : '2px';
+      var left = "calc(25% + ".concat(index * itemWidth, "px)");
       var opacity = isSelectedStep ? 1 : 0.8;
       return jsx("span", {
         style: {
@@ -5060,62 +5101,87 @@ var ShowTimeAwareLayerInfo = function ShowTimeAwareLayerInfo(_ref) {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layer, timeStepsToCheck, visible, wmTimeDim === null || wmTimeDim === void 0 ? void 0 : wmTimeDim.currentValue, render]);
-  return jsxs("div", {
-    style: {
-      height: '26px',
-      position: 'relative',
-      left: '50px',
-      right: '10px',
-      marginTop: '12px',
-      marginBottom: '-10px'
-    },
-    children: [jsx("div", {
-      children: jsx("div", {
-        children: items
-      })
-    }), jsxs("div", {
+  var dimsInfo = wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.dimensions.map(function (wmLayerDimension) {
+    return getDimensionInfo(wmLayerDimension);
+  });
+  var tooltipText = jsxs("span", {
+    children: [wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title, ": ", jsx("br", {}), wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.dimensions.map(function (dim, index) {
+      return jsxs("span", {
+        children: [dim.name, ": ", formatDimensionVal(dim.name, dim.currentValue), index < dimsInfo.length - 1 && jsx("br", {})]
+      }, "".concat(dim.name, "-").concat(dim.currentValue));
+    })]
+  });
+  return jsx(CustomTooltip, {
+    title: tooltipText,
+    children: jsxs("div", {
       style: {
-        position: 'absolute',
-        left: '10px',
-        paddingTop: '3px',
-        fontSize: '12px',
-        fontFamily: 'Roboto',
-        opacity: 0.85
+        position: 'relative',
+        width: 'calc(100% - 60px)',
+        left: '50px',
+        right: '10px',
+        marginTop: '12px',
+        marginBottom: '-10px'
       },
-      children: [jsx("span", {
+      "data-testid": "debug-info",
+      children: [jsx("div", {
         style: {
-          width: '300px',
-          position: 'absolute',
-          display: 'inline-block',
-          height: '15px'
+          width: '100%'
         },
-        children: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title
-      }), jsx("span", {
+        children: jsx("div", {
+          children: items
+        })
+      }), jsxs("div", {
         style: {
-          position: 'absolute',
-          left: '320px',
-          display: 'inline-block',
-          width: '600px',
-          opacity: '0.7'
+          left: '10px',
+          paddingTop: '3px',
+          fontSize: '12px',
+          fontFamily: 'Roboto',
+          opacity: 0.85,
+          width: '100%'
         },
-        children: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.dimensions.map(function (wmLayerDimension) {
-          return jsxs("span", {
-            style: {
-              margin: '0 4px',
-              padding: '1px 5px',
-              background: 'blue',
-              color: 'white',
-              fontSize: '11px'
-            },
-            children: [wmLayerDimension.name, " = ", wmLayerDimension.currentValue]
-          }, wmLayerDimension.name);
-        })
+        children: [jsx("span", {
+          style: {
+            display: 'inline-block',
+            verticalAlign: 'top',
+            width: '25%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            fontSize: '12px',
+            paddingRight: '4px',
+            paddingLeft: '4px',
+            color: '#051039',
+            backgroundColor: 'rgba(236, 237, 238, 0.7)',
+            borderRadius: 2
+          },
+          children: wmLayer === null || wmLayer === void 0 ? void 0 : wmLayer.title
+        }), jsx("span", {
+          style: {
+            display: 'inline-block',
+            width: '75%',
+            opacity: '0.7'
+          },
+          children: dimsInfo.map(function (dimension) {
+            return jsx("span", {
+              style: {
+                margin: '0 0 0 0px',
+                padding: '1px 5px',
+                background: 'blue',
+                borderRadius: 2,
+                color: 'white',
+                fontSize: '11px'
+              },
+              children: dimension
+            }, dimension);
+          })
+        })]
       })]
-    })]
-  });
+    })
+  }, wmLayer.id);
 };
 
 var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
+  var _wmLayer$dimensions$f, _wmLayer$dimensions4;
   var layerId = _ref.layerId,
     getCapsURL = _ref.getCapsURL,
     layerOptions = _ref.layerOptions,
@@ -5311,7 +5377,11 @@ var TimeawareImageSourceWMSLayer = function TimeawareImageSourceWMSLayer(_ref) {
     // - dimensionsValues,
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layer, wmLayer, timespan === null || timespan === void 0 ? void 0 : timespan.start, timespan === null || timespan === void 0 ? void 0 : timespan.end, timespan === null || timespan === void 0 ? void 0 : timespan.step, layerName, styleName, dimensionsValuesEffectCheck]);
-  return debugMode ? jsx(ShowTimeAwareLayerInfo, {
+  // Only show debug info for data layers with time dimension
+  var hasTimeDim = (_wmLayer$dimensions$f = wmLayer === null || wmLayer === void 0 || (_wmLayer$dimensions4 = wmLayer.dimensions) === null || _wmLayer$dimensions4 === void 0 ? void 0 : _wmLayer$dimensions4.findIndex(function (dimension) {
+    return dimension.name === 'time';
+  })) !== null && _wmLayer$dimensions$f !== void 0 ? _wmLayer$dimensions$f : -1;
+  return debugMode && hasTimeDim !== -1 ? jsx(ShowTimeAwareLayerInfo, {
     wmLayer: wmLayer,
     stepsToCheck: getTimeStepsToCheckMemoized(timespan),
     layer: layer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "12.11.0",
+  "version": "12.12.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {
@@ -8,9 +8,9 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/webmap": "12.11.0",
-    "@opengeoweb/theme": "12.11.0",
-    "@opengeoweb/shared": "12.11.0",
+    "@opengeoweb/webmap": "12.12.0",
+    "@opengeoweb/theme": "12.12.0",
+    "@opengeoweb/shared": "12.12.0",
     "lodash": "^4.17.21",
     "ol": "^10.4.0",
     "proj4": "^2.9.2",

package/src/lib/components/OpenLayers/utils/ShowTimeAwareLayerInfo.spec.d.ts

@@ -0,0 +1 @@
+export {};