feat: ol preview map ( MAPCO-3735 )

package.json

@@ -85,7 +85,7 @@
     "@formatjs/icu-messageformat-parser": "^2.6.0",
     "@map-colonies/error-types": "^1.1.5",
     "@map-colonies/mc-utils": "^1.6.1",
-    "@map-colonies/react-components": "^4.5.0",
+    "@map-colonies/react-components": "^4.6.0",
     "@map-colonies/react-core": "^4.2.0",
     "@map-colonies/static-assets": "^0.5.1",
     "@material-ui/core": "^4.11.0",
@@ -95,11 +95,13 @@
     "@turf/bbox": "^6.0.1",
     "@turf/bbox-polygon": "^6.0.1",
     "@turf/boolean-point-in-polygon": "^6.0.1",
+    "@turf/boolean-valid": "^6.5.0",
     "@turf/center": "^6.5.0",
     "@turf/convex": "^6.0.3",
     "@turf/distance": "6.2.0-alpha.2",
     "@turf/helpers": "^6.1.4",
     "@turf/intersect": "^6.1.3",
+    "@turf/kinks": "^6.5.0",
     "@turf/linestring-to-polygon": "^5.0.0",
     "@turf/polygon-to-line": "^6.0.3",
     "@types/geojson": "^7946.0.7",

src/common/i18n/en.json

@@ -490,9 +490,19 @@
   "validation-field.scale.min": "{fieldName} is less than minimum: {value}",
   "validation-field.scale.max": "{fieldName} is greater than maximum: {value}",
   "validation-field.footprint.json": "{fieldName} is not geoJSON",
+  "validation-field.footprint.not-json.geojson": "{fieldName} is not geoJSON",
+  "validation-field.footprint.not-geo_json.geojson": "{fieldName} is not geoJSON",
+  "validation-field.footprint.geo_json-geometry-not-supported.geojson": "{fieldName} geometry type not supported",
+  "validation-field.footprint.geo_json-too_many_verteces.geojson": "{fieldName} too many vertices ",
+  "validation-field.footprint.geo_json-has_self_intersections.geojson": "{fieldName} contains self-intersection",
   "validation-field.footprint.shapeFile.multiple-features": "{fieldName} The shape file you chose contains more then a single polygon",
   "validation-field.footprint.shapeFile.generic": "{fieldName} Please select zip file with only shape or related files, or a single shape file",
   "validation-field.layerPolygonParts.json": "{fieldName} is not geoJSON",
+  "validation-field.layerPolygonParts.not-json.geojson": "{fieldName} is not geoJSON",
+  "validation-field.layerPolygonParts.not-geo_json.geojson": "{fieldName} is not geoJSON",
+  "validation-field.layerPolygonParts.geo_json-geometry-not-supported.geojson": "{fieldName} geometry type not supported",
+  "validation-field.layerPolygonParts.geo_json-too_many_verteces.geojson": "{fieldName} too many vertices ",
+  "validation-field.layerPolygonParts.geo_json-has_self_intersections.geojson": "{fieldName} contains self-intersection",
   "validation-field.links.fileSize": "{fieldName} has to be of size: {value}x{value}",
 
   "system-status.title": "System Jobs",

src/common/i18n/he.json

@@ -494,9 +494,19 @@
   "validation-field.scale.min": "{fieldName} קטן מהמינימום: {value}",
   "validation-field.scale.max": "{fieldName} גדול מהמקסימום: {value}",
   "validation-field.footprint.json": "{fieldName} לא GEOJSON",
+  "validation-field.footprint.not-json.geojson": "{fieldName} לא GEOJSON",
+  "validation-field.footprint.not-geo_json.geojson": "{fieldName} לא GEOJSON",
+  "validation-field.footprint.geo_json-geometry-not-supported.geojson": "{fieldName} לא מסוג הנתמך",
+  "validation-field.footprint.geo_json-too_many_verteces.geojson": "{fieldName} מכיל יותר מדי נקודות",
+  "validation-field.footprint.geo_json-has_self_intersections.geojson": "{fieldName} מכיל חיתוך עצמי",
   "validation-field.footprint.shapeFile.multiple-features": "{fieldName} קובץ ה-Shape שטענת מכיל יותר מפוליגון אחד",
   "validation-field.footprint.shapeFile.generic": "{fieldName} יש לוודא שבחרת בקובץ zip המכיל קבצי shape ונלווים בלבד, או קובץ shape בודד",
   "validation-field.layerPolygonParts.json": "{fieldName} לא GEOJSON",
+  "validation-field.layerPolygonParts.not-json.geojson": "{fieldName} לא GEOJSON",
+  "validation-field.layerPolygonParts.not-geo_json.geojson": "{fieldName} לא GEOJSON",
+  "validation-field.layerPolygonParts.geo_json-geometry-not-supported.geojson": "{fieldName} לא מסוג הנתמך",
+  "validation-field.layerPolygonParts.geo_json-too_many_verteces.geojson": "{fieldName} מכיל יותר מדי נקודות",
+  "validation-field.layerPolygonParts.geo_json-has_self_intersections.geojson": "{fieldName} מכיל חיתוך עצמי",
   "validation-field.links.fileSize": "{fieldName} צריך להיות בגודל: {value}x{value}",
 
   "system-status.title": "משימות מערכת",

src/common/utils/geojson.validation.ts

@@ -0,0 +1,83 @@
+import bolleanValid from '@turf/boolean-valid';
+import kinks from '@turf/kinks';
+import { Geometry, Position } from 'geojson';
+
+export type severityLevel = 'TRACE' | 'DEBUG' | 'INFO' | 'WARN' | 'ERROR' | 'FATAL';
+export type geoJSONValidation = {valid: boolean, severity_level: severityLevel, reason: string};
+export const EMPTY_JSON_STRING_VALUE = '{}';
+
+const MAX_VERTECES = 100;
+
+const hasTooManyVerteces = (geom: Geometry): boolean => {
+  let totalVertices = 0;
+  if (geom.type === 'Polygon' || geom.type === 'MultiPolygon') {
+    const polygons = geom.type === 'Polygon' ? [geom.coordinates] : geom.coordinates;
+
+    polygons.forEach(polygon => {
+      (polygon as Position[][]).forEach(ring => {
+        totalVertices += ring.length;
+      });
+    });
+
+  }
+  return totalVertices >= MAX_VERTECES ;
+}
+
+const hasSelfIntersections = (json: Geometry): boolean => {
+  return kinks(json as any).features.length > 0;
+}
+
+const isValidGeometryType = (json: Geometry): boolean => {
+    return json.type === 'Polygon' ||  json.type === 'MultiPolygon';
+  }
+
+
+export const validateGeoJSONString = (jsonValue: string):geoJSONValidation => {
+  const res = {
+    valid: jsonValue !== undefined && jsonValue !== EMPTY_JSON_STRING_VALUE && jsonValue !== '',
+    severity_level: 'INFO',
+    reason: ''
+  } as geoJSONValidation;
+
+  try{
+    if(res.valid){
+      const geoJson = JSON.parse(jsonValue);
+      if(!bolleanValid(geoJson)){
+        return {
+          valid: false,
+          severity_level: 'ERROR',
+          reason: 'not-geo_json'
+        }
+      }
+      if(!isValidGeometryType(geoJson)){
+        return {
+          valid: false,
+          severity_level: 'ERROR',
+          reason: 'geo_json-geometry-not-supported'
+        }
+      }
+      if(hasTooManyVerteces(geoJson)) {
+        return {
+          valid: true,
+          severity_level: 'WARN',
+          reason: 'geo_json-too_many_verteces'
+        }
+      }
+      if(hasSelfIntersections(geoJson)) {
+        return {
+          valid: true,
+          severity_level: 'WARN',
+          reason: 'geo_json-has_self_intersections'
+        }
+      }
+    }
+  }
+  catch (e){
+    return {
+      valid: false,
+      severity_level: 'ERROR',
+      reason: 'not-json'
+    }
+  }
+  return res;
+};

src/discrete-layer/components/layer-details/field-value-presentors/geojson-map.value-presentor.tsx

@@ -0,0 +1,91 @@
+import { CSSProperties, useEffect, useMemo, useState } from 'react';
+import { Box, GeoJSONFeature, getWMTSOptions, getXYZOptions, Map, TileLayer, TileOsm, TileWMTS, TileXYZ, VectorLayer, VectorSource } from '@map-colonies/react-components';
+import { Geometry } from 'geojson';
+import { FitOptions } from 'ol/View';
+import { validateGeoJSONString } from '../../../../common/utils/geojson.validation';
+import { Mode } from '../../../../common/models/mode.enum';
+import { useStore } from '../../../models/RootStore';
+import { get } from 'lodash';
+
+interface GeoJsonMapValuePresentorProps {
+  mode: Mode;
+  jsonValue?: string;
+  style?: CSSProperties | undefined,
+  fitOptions?: FitOptions | undefined,
+}
+
+const  DEFAULT_PROJECTION = 'EPSG:4326';
+
+export const GeoJsonMapValuePresentorComponent: React.FC<GeoJsonMapValuePresentorProps> = ({
+  mode,
+  jsonValue,
+  style,
+  fitOptions,
+}) => {
+  const [geoJsonValue, setGeoJsonValue] = useState();
+  const store = useStore();
+  useEffect(() => {
+    if(jsonValue && validateGeoJSONString(jsonValue).valid){
+      //Postpone feature generation till OL-viewer present in DOM
+      setTimeout(()=>{
+        setGeoJsonValue(JSON.parse(jsonValue as string))
+      }, [Mode.VIEW, Mode.EDIT].includes(mode) ? 300 : 0);
+    }
+  }, [mode,jsonValue]);
+
+  const previewBaseMap = useMemo(() => {
+    const olBaseMap = new Array();
+    let baseMap = store.discreteLayersStore.baseMaps?.maps.find((map) => map.isForPreview);
+    if(!baseMap){
+      baseMap = store.discreteLayersStore.baseMaps?.maps.find((map) => map.isCurrent);
+    }
+    if(baseMap){
+      baseMap.baseRasteLayers.forEach((layer) => {
+        if(layer.type === 'WMTS_LAYER'){
+          const wmtsOptions = getWMTSOptions({
+            url: layer.options.url as string,
+            layer: '',
+            matrixSet: get(layer.options, 'tileMatrixSetID') as string,
+            format: get(layer.options, 'format'),
+            projection: DEFAULT_PROJECTION, // Should be taken from map-server capabilities (MAPCO-3780)
+            style: get(layer.options, 'style'),
+          });
+          olBaseMap.push(
+            <TileLayer options={{ opacity: layer.opacity }}>
+              <TileWMTS options={wmtsOptions} />
+            </TileLayer>
+          )
+        }
+        if(layer.type === 'XYZ_LAYER'){
+          const xyzOptions = getXYZOptions({
+            url: layer.options.url as string,
+          });
+          olBaseMap.push(
+            <TileLayer options={{ opacity: layer.opacity }}>
+              <TileXYZ options={xyzOptions} />
+            </TileLayer>
+          )
+        }
+      })
+    }
+    return olBaseMap;
+  }, []);
+
+  return (
+    <Box style={{...style}}>
+      <Map>
+        {previewBaseMap}
+        {geoJsonValue && (
+          <VectorLayer>
+            <VectorSource>
+              <GeoJSONFeature 
+                geometry={geoJsonValue as Geometry} 
+                fitOptions={{...fitOptions}}
+                fit={true}
+              />
+            </VectorSource>
+          </VectorLayer>
+          )}
+      </Map>
+    </Box>
+    )}

src/discrete-layer/components/layer-details/field-value-presentors/json.value-presentor.css

@@ -4,6 +4,42 @@
     margin: 10px 0;
 }
 
+.jsonInput {
+    direction: ltr;
+}
+
 .jsonValueAlign {
     text-align: left !important;
-}
+}
+
+.withMapPreview {
+    height: 150px !important;
+}
+
+.detailsFieldValue .ol-attribution {
+    display: none;
+}
+
+.detailsFieldValue .map {
+    border: solid var(--mdc-theme-gc-selection-background) 1px;
+}
+
+.warningContainer {
+    display: flex;
+    color: var(--mdc-theme-gc-warning-high);
+    align-items: center;
+    margin: 0 8px 0 8px;
+}
+
+.detailsFieldNoMargin {
+    margin: 0 !important;
+}
+
+.jsonDetailsFieldValueContainer {
+    display: flex;
+    gap: 10px;
+}
+
+.jsonDetailsFieldTextValueContainer {
+    display: flex;
+}