Multiple improvements over past 2 months (#3294)

* Fixing some map zooming in the map-tester and clarifying when the map is expected to be at certain position when calling the tests
Simplified the app.tsx and app-start.tsx components with regards to the MapViewer instance (more clearly coupled)
Removed the api.getMapViewer call which was happening in the aoi-panel component.
Removed the MapEventProcessor.getMapViewer call which was happening in the overview-map component.
Removed 'MapEventProcessor.getMapViewer' from add-new-layer.tsx component
Removed the MapEventProcessor.getMapViewerLayerAPI reference call from geochart.tsx
Specialized the 'MapEventProcessor.getMapViewerPlugins' call in footer-bar.tsx
Centralized the loading and adding of a plugin into the MapEventProcessor
The bounds for a layer are now initialized in the store when the layer is 'created', not only when it's 'loaded' in the layer status. The layer source and the tileGrid() can be ready, before the layer status is loaded, which we want, especially when the content of the layer is outside the map extent.
getFeatureInfo now returns a promise to inform when the geometries have been loaded in the features array.
New details test-suite
Improved the setStyleItemVisibility to return a promise which resolves when the renderer is done on the layer enabling developer to await on the style change if they so wish.
Rebased
AOI Panel small adjustment
Review
Better geochart
Small fixes to DEFAULT_WMS_LAYER_GROUP_FULL_SUB_LAYERS and fixing the test suite accordingly, adding tests too..
Added some covariant returns on the geoview layer config for the config and layer processing classes
Improved the details-panel and added featureHaveGeometry to the store to provide a hook if needed
Fixing metadataaccesspath and dataaccesspath urls, not doing the split '?' anymore, because of proxy
Removed the EsriDynamic for raster via geocore from the test suite, because the UUID changed in GeocoreAPI :(
Removed Mundialis from our test suite, because service is acting inconsistently recently :(
Fixes for the tests suite

* Fix for the details panel
Minor typing adjustments

* Nothing

* Comments

Author: Alex-NRCan

packages/geoview-about-panel/src/index.tsx

@@ -77,6 +77,7 @@ class AboutPanelPlugin extends AppBarPlugin {
   /**
    * Overrides the onCreateButtonProps to pass the correct props
    * @returns {IconButtonPropsExtend} The icon button props
+   * @override
    */
   override onCreateButtonProps(): IconButtonPropsExtend {
     // Button props
@@ -92,6 +93,7 @@ class AboutPanelPlugin extends AppBarPlugin {
   /**
    * Overrides the creation of the content properties of this AboutPanel AppBar Plugin.
    * @returns {TypePanelProps} The TypePanelProps for the AboutPanel AppBar Plugin
+   * @override
    */
   override onCreateContentProps(): TypePanelProps {
     return {
@@ -105,6 +107,7 @@ class AboutPanelPlugin extends AppBarPlugin {
   /**
    * Overrides the content creation of the AppBar Plugin
    * @returns {JSX.Element} The about panel content
+   * @override
    */
   override onCreateContent = (): JSX.Element => {
     return <AboutPanel config={this.getConfig()} />;

packages/geoview-aoi-panel/src/aoi-panel.tsx

@@ -1,11 +1,13 @@
 import type { TypeWindow } from 'geoview-core/core/types/global-types';
 import type { Extent } from 'geoview-core/api/types/map-schema-types';
+import { Projection } from 'geoview-core/geo/utils/projection';
+import { useMapProjection, useMapStoreActions } from 'geoview-core/core/stores/store-interface-and-intial-values/map-state';
+import { useGeoViewMapId } from 'geoview-core/core/stores/geoview-store';
+import { MapEventProcessor } from 'geoview-core/api/event-processors/event-processor-children/map-event-processor';
 import { logger } from 'geoview-core/core/utils/logger';
-import { useMapStoreActions } from 'geoview-core/core/stores/store-interface-and-intial-values/map-state';
 import { getSxClasses } from './area-of-interest-style';
 
 interface AoiPanelProps {
-  mapId: string;
   config: TypeAoiProps;
 }
 
@@ -24,40 +26,57 @@ export type TypeAoiProps = {
 };
 
 export function AoiPanel(props: AoiPanelProps): JSX.Element {
-  const { mapId, config } = props;
+  const { config } = props;
   const { aoiList } = config;
 
   const { cgpv } = window as TypeWindow;
-  const { api, ui } = cgpv;
+  const { ui } = cgpv;
+  const { useCallback } = cgpv.reactUtilities.react;
 
-  const myMap = api.getMapViewer(mapId);
   const { Card, Box } = ui.elements;
 
   const theme = ui.useTheme();
   const sxClasses = getSxClasses(theme);
 
+  const mapId = useGeoViewMapId();
+  const mapProjection = useMapProjection();
   const { highlightBBox } = useMapStoreActions();
 
+  const handleOnClick = useCallback(
+    (aoiItem: AoiItem) => {
+      // Log
+      logger.logTraceUseCallback('AOI-PANEL - handleOnClick');
+
+      // Project the extent from lonlatto map projection
+      const extentInMapProjection = Projection.transformExtentFromProj(
+        aoiItem.extent,
+        Projection.getProjectionLonLat(),
+        Projection.getProjectionFromString(`EPSG:${mapProjection}`)
+      );
+
+      // Zoom to extent and highlight
+      MapEventProcessor.zoomToExtent(mapId, extentInMapProjection, { maxZoom: 14 })
+        .then(() => {
+          // Highlight
+          highlightBBox(extentInMapProjection, false);
+        })
+        .catch((error: unknown) => {
+          // Log
+          logger.logPromiseFailed('in zoomToLonLatExtentOrCoordinate', error);
+        });
+    },
+    [mapId, mapProjection, highlightBBox]
+  );
+
   return (
     <Box sx={sxClasses.aoiCard}>
       {aoiList.map((aoiItem: AoiItem, index) => {
         return (
           <Card
             tabIndex={0}
             className="aoiCardThumbnail"
-            onClick={() => {
-              myMap
-                .zoomToLonLatExtentOrCoordinate(aoiItem.extent, { maxZoom: 14 })
-                .then(() => {
-                  highlightBBox(myMap.convertExtentLonLatToMapProj(aoiItem.extent), false);
-                })
-                .catch((error: unknown) => {
-                  // Log
-                  logger.logPromiseFailed('in zoomToLonLatExtentOrCoordinate', error);
-                });
-            }}
-            // eslint-disable-next-line react/no-array-index-key
-            key={index}
+            onClick={() => handleOnClick(aoiItem)}
+            key={aoiItem.aoiTitle}
             title={aoiItem.aoiTitle}
             contentCard={
               // eslint-disable-next-line react/jsx-no-useless-fragment

packages/geoview-aoi-panel/src/index.tsx

@@ -80,7 +80,7 @@ class AoiPanelPlugin extends AppBarPlugin {
   }
 
   override onCreateContent = (): JSX.Element => {
-    return <AoiPanel mapId={this.mapViewer.mapId} config={this.getConfig()} />;
+    return <AoiPanel config={this.getConfig()} />;
   };
 
   /**