Psp 8635, psp-8636, psp-8638 (#4104)

* psp-8636 limiting drafts to 4 decimal places no longer accurate to actual marker.

* psp-8636 ensure local geoserver mimics deployed geoserver decimal accuracy.

* psp-8638 ensure parcel map layer displays immediately.

* psp-8635 do not block loading the property when other tabs are loading in a file.

---------

Co-authored-by: Smith <[email protected]>

Author: devinleighsmith

source/backend/api/Pims.Api.csproj

@@ -2,9 +2,9 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
   <PropertyGroup>
     <UserSecretsId>0ef6255f-9ea0-49ec-8c65-c172304b4926</UserSecretsId>
-    <Version>5.3.1-81.35</Version>
-    <Version>5.3.1-81.35</Version>
-    <AssemblyVersion>5.3.1.81</AssemblyVersion>
+    <Version>5.3.2-81.35</Version>
+    <Version>5.3.2-81.35</Version>
+    <AssemblyVersion>5.3.2.81</AssemblyVersion>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>
     <ProjectGuid>16BC0468-78F6-4C91-87DA-7403C919E646</ProjectGuid>
     <TargetFramework>net8.0</TargetFramework>

source/frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "5.3.1-81.35",
+  "version": "5.3.2-81.35",
   "private": true,
   "dependencies": {
     "@bcgov/bc-sans": "1.0.1",

source/frontend/src/components/common/mapFSM/MapStateMachineContext.tsx

@@ -62,6 +62,7 @@ export interface IMapStateMachineContext {
   toggleMapLayer: () => void;
   setFilePropertyLocations: (locations: LatLngLiteral[]) => void;
   setMapLayers: (layers: ILayerItem[]) => void;
+  setDefaultMapLayers: (layers: ILayerItem[]) => void;
 
   setVisiblePimsProperties: (propertyIds: number[]) => void;
   setShowDisposed: (show: boolean) => void;
@@ -270,6 +271,13 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
     [serviceSend],
   );
 
+  const setDefaultMapLayers = useCallback(
+    (activeLayers: ILayerItem[]) => {
+      serviceSend({ type: 'DEFAULT_MAP_LAYERS', activeLayers });
+    },
+    [serviceSend],
+  );
+
   const setVisiblePimsProperties = useCallback(
     (propertyIds: number[]) => {
       serviceSend({ type: 'SET_VISIBLE_PROPERTIES', propertyIds });
@@ -366,6 +374,7 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
         setShowDisposed,
         setShowRetired,
         setMapLayers,
+        setDefaultMapLayers,
         changeSidebar,
       }}
     >

source/frontend/src/components/common/mapFSM/machineDefinition/mapMachine.ts

@@ -24,6 +24,9 @@ const featureViewStates = {
         TOGGLE_LAYERS: {
           target: 'layerControl',
         },
+        DEFAULT_MAP_LAYERS: {
+          actions: assign({ activeLayers: (_, event: any) => event.activeLayers }),
+        },
       },
     },
     selecting: {

source/frontend/src/components/maps/MapLeafletView.tsx

@@ -27,6 +27,7 @@ import { ZoomOutButton } from './leaflet/Control/ZoomOut/ZoomOutButton';
 import { LayerPopupContainer } from './leaflet/LayerPopup/LayerPopupContainer';
 import { InventoryLayer } from './leaflet/Layers/InventoryLayer';
 import { LeafletLayerListener } from './leaflet/Layers/LeafletLayerListener';
+import { useConfiguredMapLayers } from './leaflet/Layers/useConfiguredMapLayers';
 import { MapEvents } from './leaflet/MapEvents/MapEvents';
 import * as Styled from './leaflet/styles';
 
@@ -55,6 +56,7 @@ const MapLeafletView: React.FC<React.PropsWithChildren<MapLeafletViewProps>> = (
   const popupRef = useRef<LeafletPopup>(null);
 
   const mapRef = useRef<LeafletMap | null>(null);
+  const layers = useConfiguredMapLayers();
 
   const [activeFeatureLayer, setActiveFeatureLayer] = useState<L.GeoJSON>();
 
@@ -153,15 +155,8 @@ const MapLeafletView: React.FC<React.PropsWithChildren<MapLeafletViewProps>> = (
     });
   }, []);
 
-  const fitMapBounds = () => {
-    if (mapRef.current) {
-      // TODO: Is this necessary?
-      //mapRef.current.fitBounds(defaultBounds);
-    }
-  };
-
   const handleMapReady = () => {
-    fitMapBounds();
+    mapMachine.setDefaultMapLayers(layers);
   };
 
   const handleMapCreated = (mapInstance: L.Map) => {

source/frontend/src/components/maps/leaflet/Control/LayersControl/LayersMenu.tsx

@@ -2,7 +2,7 @@ import 'react-simple-tree-menu/dist/main.css';
 
 import { Form as FormikForm, Formik, getIn, useFormikContext } from 'formik';
 import noop from 'lodash/noop';
-import React, { useContext, useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import Form from 'react-bootstrap/Form';
 import ListGroup from 'react-bootstrap/ListGroup';
 import { MdArrowDropDown, MdArrowRight } from 'react-icons/md';
@@ -12,9 +12,7 @@ import styled from 'styled-components';
 import variables from '@/assets/scss/_variables.module.scss';
 import { FormSection } from '@/components/common/form/styles';
 import { useMapStateMachine } from '@/components/common/mapFSM/MapStateMachineContext';
-import { TenantContext } from '@/tenants';
 
-import { layersTree } from './data';
 import { ILayerItem } from './types';
 
 const ParentNode = styled(ListGroup.Item)`
@@ -223,35 +221,10 @@ const LayersTree: React.FC<React.PropsWithChildren<{ items: TreeMenuItem[] }>> =
  * This component displays the layers group menu
  */
 export const LayersMenu: React.FC<React.PropsWithChildren<unknown>> = () => {
-  const {
-    tenant: { layers: confLayers },
-  } = useContext(TenantContext);
-  const layers = useMemo(
-    () =>
-      layersTree.map((parent, parentIndex) => {
-        //add any layers defined in the configuration.
-        const layer = confLayers?.find(cl => cl.key === parent.key);
-
-        const layerNodes = [...(layer?.nodes ?? [])];
-        const parentNodes =
-          parent?.nodes?.filter(node => !layerNodes.find(layerNode => layerNode.id === node.id)) ??
-          [];
-        const allNodes = [...parentNodes, ...layerNodes];
-
-        return {
-          ...parent,
-          nodes: allNodes?.map((node: any, index) => ({
-            ...node,
-            zIndex: (parentIndex + 1) * index,
-            opacity: node?.opacity !== undefined ? Number(node?.opacity) : 0.8,
-          })),
-        };
-      }),
-    [confLayers],
-  );
+  const { activeLayers: layers } = useMapStateMachine();
 
   return (
-    <Formik initialValues={{ layers }} onSubmit={noop}>
+    <Formik initialValues={{ layers }} onSubmit={noop} enableReinitialize>
       {() => (
         <FormikForm>
           <MapLayerSynchronizer />

source/frontend/src/components/maps/leaflet/Layers/PointClusterer.tsx

@@ -92,8 +92,8 @@ export const PointClusterer: React.FC<React.PropsWithChildren<PointClustererProp
     return mapMachine.filePropertyLocations.map(x => {
       // The values on the feature are rounded to the 4th decimal. Do the same to the draft points.
       return {
-        lat: parseFloat(x.lat.toFixed(4)),
-        lng: parseFloat(x.lng.toFixed(4)),
+        lat: x.lat,
+        lng: x.lng,
       };
     });
   }, [mapMachine.filePropertyLocations]);

source/frontend/src/components/maps/leaflet/Layers/useConfiguredMapLayers.tsx

@@ -0,0 +1,30 @@
+import { useContext } from 'react';
+
+import { TenantContext } from '@/tenants';
+
+import { layersTree } from '../Control/LayersControl/data';
+
+export const useConfiguredMapLayers = () => {
+  const {
+    tenant: { layers: confLayers },
+  } = useContext(TenantContext);
+  const layers = layersTree.map((parent, parentIndex) => {
+    //add any layers defined in the configuration.
+    const layer = confLayers?.find(cl => cl.key === parent.key);
+
+    const layerNodes = [...(layer?.nodes ?? [])];
+    const parentNodes =
+      parent?.nodes?.filter(node => !layerNodes.find(layerNode => layerNode.id === node.id)) ?? [];
+    const allNodes = [...parentNodes, ...layerNodes];
+
+    return {
+      ...parent,
+      nodes: allNodes?.map((node: any, index) => ({
+        ...node,
+        zIndex: (parentIndex + 1) * index,
+        opacity: node?.opacity !== undefined ? Number(node?.opacity) : 0.8,
+      })),
+    };
+  });
+  return layers;
+};

source/frontend/src/features/mapSideBar/shared/detail/PropertyFileContainer.tsx

@@ -123,7 +123,7 @@ export const PropertyFileContainer: React.FunctionComponent<
       content: (
         <PropertyDetailsTabView
           property={propertyViewForm}
-          loading={composedProperties.composedLoading ?? false}
+          loading={composedProperties?.apiWrapper?.loading ?? false}
         />
       ),
       key: InventoryTabNames.property,

source/frontend/src/features/properties/map/__snapshots__/MapContainer.test.tsx.snap

@@ -485,6 +485,22 @@ exports[`MapContainer > Renders the map 1`] = `
             <div
               class="leaflet-pane leaflet-tile-pane"
             >
+              <div
+                class="leaflet-layer "
+                style="z-index: 18;"
+              >
+                <div
+                  class="leaflet-tile-container leaflet-zoom-animated"
+                  style="z-index: 20; left: 0px; top: 0px;"
+                >
+                  <img
+                    alt=""
+                    class="leaflet-tile"
+                    src="https://openmaps.gov.bc.ca/geo/pub/WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW/ows?&service=WMS&request=GetMap&layers=pub%3AWHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW&styles=&format=image%2Fpng&transparent=true&version=1.1.1&key=parcelBoundaries&label=Parcel%20Boundaries&on=true&url=https%3A%2F%2Fopenmaps.gov.bc.ca%2Fgeo%2Fpub%2FWHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW%2Fows%3F&id=parcelLayer&color=%23E9AD34&width=256&height=256&srs=EPSG%3A3857&bbox=-14401959.121379772,6887893.492833805,-13775786.985667607,7514065.628545967"
+                    style="width: 256px; height: 256px; left: -214px; top: -231px;"
+                  />
+                </div>
+              </div>
               <div
                 class="leaflet-layer "
                 style="z-index: 0;"

source/frontend/src/mocks/mapFSM.mock.ts

@@ -5,6 +5,7 @@ import {
   emptyPmbcFeatureCollection,
 } from '@/components/common/mapFSM/models';
 import { defaultBounds } from '@/components/maps/constants';
+import { layersTree } from '@/components/maps/leaflet/Control/LayersControl/data';
 
 export const mapMachineBaseMock: IMapStateMachineContext = {
   requestFlyToBounds: vi.fn(),
@@ -34,7 +35,7 @@ export const mapMachineBaseMock: IMapStateMachineContext = {
 
   filePropertyLocations: [],
   activePimsPropertyIds: [],
-  activeLayers: [],
+  activeLayers: layersTree,
   isSelecting: false,
   isFiltering: false,
   isShowingMapLayers: false,
@@ -64,4 +65,5 @@ export const mapMachineBaseMock: IMapStateMachineContext = {
   setShowRetired: vi.fn(),
   changeSidebar: vi.fn(),
   setMapLayers: vi.fn(),
+  setDefaultMapLayers: vi.fn(),
 };

tools/geoserver/geoserver_data/psp/settings.xml

@@ -11,7 +11,7 @@
     <id>contact</id>
   </contact>
   <charset>UTF-8</charset>
-  <numDecimals>4</numDecimals>
+  <numDecimals>8</numDecimals>
   <verbose>true</verbose>
   <verboseExceptions>false</verboseExceptions>
   <metadata>