feat(WMS Style Selector): Add WMS Style Selector (#3346)

* Add WMS Style Selector

* Update shared styling for settings menus

* Minor review changes

* JSDoc fixes and small comments

Author: MatthewMuehlhauserNRCan

packages/geoview-core/public/locales/en/translation.json

@@ -266,7 +266,8 @@
       "mosaicOperationBlend": "Blend",
       "mosaicOperationSum": "Sum",
       "orderAscending": "Oldest to Newest",
-      "orderDescending": "Newest to Oldest"
+      "orderDescending": "Newest to Oldest",
+      "selectWmsStyle": "Select WMS style"
     }
   },
   "details": {

packages/geoview-core/public/locales/fr/translation.json

@@ -266,7 +266,8 @@
       "mosaicOperationBlend": "Mélange",
       "mosaicOperationSum": "Somme",
       "orderAscending": "Plus ancien au plus récent",
-      "orderDescending": "Plus récent au plus ancien"
+      "orderDescending": "Plus récent au plus ancien",
+      "selectWmsStyle": "Sélectionner le style WMS"
     }
   },
   "details": {

packages/geoview-core/src/api/config/validation-classes/raster-validation-classes/ogc-wms-layer-entry-config.ts

@@ -175,13 +175,14 @@ export class OgcWmsLayerEntryConfig extends AbstractBaseLayerEntryConfig {
    * If styles are not yet cached, the method reads them from the layer metadata
    * and initializes the internal style list. The styles correspond to named
    * style definitions advertised by the WMS service (from the `Style` section of the metadata).
-   * @returns {string[] | undefined} The list of available style names, or `undefined` if none are defined.
+   *
+   * @returns The list of available style names, or `undefined` if none are defined.
    */
   getStyles(): string[] | undefined {
     // If no styles defined
     if (!this.#styles) {
       // Read styles from the metadata
-      const styles = this.getLayerMetadata()?.Style;
+      const styles = this.getStylesMetadata();
 
       // Update internal styles list
       if (styles?.length || 0 > 1) {
@@ -193,6 +194,17 @@ export class OgcWmsLayerEntryConfig extends AbstractBaseLayerEntryConfig {
     return this.#styles;
   }
 
+  /**
+   * Retrieves the full style metadata objects available for this layer.
+   * Returns the complete `TypeMetadataWMSCapabilityLayerStyle` objects from the layer metadata,
+   * which include style names, legend URLs, and other style-related information.
+   *
+   * @returns The list of available style metadata objects, or `undefined` if none are defined.
+   */
+  getStylesMetadata(): TypeMetadataWMSCapabilityLayerStyle[] | undefined {
+    return this.getLayerMetadata()?.Style;
+  }
+
   /**
    * Determines the style to apply for this layer.
    * Retrieves the list of available styles from the layer config/metadata and returns

packages/geoview-core/src/api/event-processors/event-processor-children/legend-event-processor.ts

@@ -6,6 +6,7 @@ import type {
   TypeLayerControls,
   TypeLayerStatus,
   TypeMetadataEsriRasterFunctionInfos,
+  TypeMetadataWMSCapabilityLayerStyle,
   TypeMosaicMethod,
   TypeMosaicRule,
 } from '@/api/types/layer-schema-types';
@@ -14,6 +15,7 @@ import type { TypeLegendLayer, TypeLegendLayerItem, TypeLegendItem } from '@/cor
 import { MapViewer } from '@/geo/map/map-viewer';
 import { GeoUtilities } from '@/geo/utils/utilities';
 import type { ConfigBaseClass } from '@/api/config/validation-classes/config-base-class';
+import { OgcWmsLayerEntryConfig } from '@/api/config/validation-classes/raster-validation-classes/ogc-wms-layer-entry-config';
 import type {
   ILayerState,
   LegendQueryStatus,
@@ -240,6 +242,7 @@ export class LegendEventProcessor extends AbstractEventProcessor {
 
   /**
    * Gets the active raster function for a layer.
+   *
    * @param mapId - The map identifier.
    * @param layerPath - The layer path.
    * @returns The active raster function identifier.
@@ -250,6 +253,7 @@ export class LegendEventProcessor extends AbstractEventProcessor {
 
   /**
    * Sets the active raster function for a layer.
+   *
    * @param mapId - The map identifier.
    * @param layerPath - The layer path.
    * @param rasterFunctionId - The raster function identifier to set.
@@ -260,6 +264,7 @@ export class LegendEventProcessor extends AbstractEventProcessor {
 
   /**
    * Updates the active raster function for a layer in the store.
+   *
    * @param mapId - The map identifier.
    * @param layerPath - The layer path.
    * @param rasterFunctionId - The raster function identifier to set.
@@ -279,6 +284,7 @@ export class LegendEventProcessor extends AbstractEventProcessor {
 
   /**
    * Gets the allowed mosaic methods for a layer.
+   *
    * @param mapId - The map identifier.
    * @param layerPath - The layer path.
    * @returns The allowed mosaic methods or undefined.
@@ -293,6 +299,7 @@ export class LegendEventProcessor extends AbstractEventProcessor {
 
   /**
    * Gets the active mosaic rule for a layer.
+   *
    * @param mapId - The map identifier.
    * @param layerPath - The layer path.
    * @returns The active mosaic rule or undefined.
@@ -303,6 +310,7 @@ export class LegendEventProcessor extends AbstractEventProcessor {
 
   /**
    * Sets the active mosaic rule for a layer.
+   *
    * @param mapId - The map identifier.
    * @param layerPath - The layer path.
    * @param mosaicRule - The mosaic rule to set.
@@ -313,6 +321,7 @@ export class LegendEventProcessor extends AbstractEventProcessor {
 
   /**
    * Updates the mosaicRule for a layer by merging new properties.
+   *
    * @param mapId - The map id.
    * @param layerPath - The layer path.
    * @param partialMosaicRule - An object with one or more mosaicRule properties to update.
@@ -334,6 +343,7 @@ export class LegendEventProcessor extends AbstractEventProcessor {
 
   /**
    * Updates the active mosaic rule for a layer in the store.
+   *
    * @param mapId - The map identifier.
    * @param layerPath - The layer path.
    * @param mosaicRule - The mosaic rule to set.
@@ -347,8 +357,49 @@ export class LegendEventProcessor extends AbstractEventProcessor {
     }
   }
 
+  /**
+   * Gets the active WMS style for a layer.
+   *
+   * @param mapId - The map identifier.
+   * @param layerPath - The layer path.
+   * @returns The active WMS style name.
+   */
+  static getLayerWmsStyle(mapId: string, layerPath: string): string | undefined {
+    return LegendEventProcessor.getLegendLayerInfo(mapId, layerPath)?.wmsStyle;
+  }
+
+  /**
+   * Sets the active WMS style for a layer.
+   *
+   * @param mapId - The map identifier.
+   * @param layerPath - The layer path.
+   * @param wmsStyleName - The WMS style name to set.
+   */
+  static setLayerWmsStyle(mapId: string, layerPath: string, wmsStyleName: string | undefined): void {
+    if (!wmsStyleName) return;
+    MapEventProcessor.getMapViewerLayerAPI(mapId).setLayerWmsStyle(layerPath, wmsStyleName);
+  }
+
+  /**
+   * Updates the active WMS style for a layer in the store.
+   *
+   * @param mapId - The map identifier.
+   * @param layerPath - The layer path.
+   * @param wmsStyleName - The WMS style name to set.
+   */
+  static setLayerWmsStyleInStore(mapId: string, layerPath: string, wmsStyleName: string | undefined): void {
+    const layers = LegendEventProcessor.getLayerState(mapId).legendLayers;
+    const layer = this.findLayerByPath(layers, layerPath);
+
+    if (layer) {
+      layer.wmsStyle = wmsStyleName;
+      this.getLayerState(mapId).setterActions.setLegendLayers(layers);
+    }
+  }
+
   /**
    * Gets the raster function previews for the ESRI image layer.
+   *
    * @param mapId - The map identifier.
    * @param layerPath - The layer path.
    * @returns The raster function previews.
@@ -360,8 +411,28 @@ export class LegendEventProcessor extends AbstractEventProcessor {
     return geoviewLayer.getRasterFunctionPreviews();
   }
 
+  /**
+   * Retrieves the layer's available WMS styles.
+   *
+   * @param mapId - The unique identifier of the map instance.
+   * @param layerPath - The path to the layer.
+   * @returns The available WMS style names, or `undefined` if not available.
+   */
+  static getLayerWmsStyles(mapId: string, layerPath: string): TypeMetadataWMSCapabilityLayerStyle[] | undefined {
+    // Get the layer config
+    const layerConfig = MapEventProcessor.getMapViewerLayerAPI(mapId).getLayerEntryConfigIfExists(layerPath);
+
+    // Check if it's a WMS layer config
+    if (layerConfig && layerConfig instanceof OgcWmsLayerEntryConfig) {
+      return layerConfig.getStylesMetadata();
+    }
+
+    return undefined;
+  }
+
   /**
    * Gets the available settings for a layer.
+   *
    * @param mapId - The map identifier.
    * @param layerPath - The layer path.
    * @returns Array of available setting types.
@@ -384,6 +455,12 @@ export class LegendEventProcessor extends AbstractEventProcessor {
       settings.push('mosaicRule');
     }
 
+    // Check if multiple WMS styles are available
+    const styles = this.getLayerWmsStyles(mapId, layerPath);
+    if (styles && styles.length > 1) {
+      settings.push('wmsStyles');
+    }
+
     // Add other layer types with settings here
     return settings;
   }

packages/geoview-core/src/core/components/layers/right-panel/layer-settings/layer-settings-style.ts

@@ -15,11 +15,12 @@ export const getSxClasses = (theme: Theme): SxStyles => ({
     },
   },
 
-  rasterFunctionMenu: {
+  // Shared styles for setting selector submenus (raster function, WMS style, etc.)
+  settingSelectorMenu: {
     '& .MuiPaper-root': {
       padding: '8px',
       maxHeight: '400px',
-      paddingRight: '16px', // Extra padding for scrollbar space
+      paddingRight: '16px',
       // Custom scrollbar styling
       '&::-webkit-scrollbar': {
         width: '8px',
@@ -40,7 +41,7 @@ export const getSxClasses = (theme: Theme): SxStyles => ({
     },
   },
 
-  rasterFunctionMenuItem: {
+  settingSelectorMenuItem: {
     border: '1px solid',
     borderColor: 'divider',
     borderRadius: 2,
@@ -53,7 +54,20 @@ export const getSxClasses = (theme: Theme): SxStyles => ({
       borderColor: 'primary.main',
     },
   },
-  previewImageContainer: {
+
+  settingSelectorListItemText: {
+    '& .MuiListItemText-primary': {
+      fontWeight: 600,
+    },
+  },
+
+  settingSelectorPreviewIcon: {
+    width: 100,
+    height: 100,
+  },
+
+  // ESRI Image Raster Function specific styles
+  rasterFunctionPreviewImageContainer: {
     width: 100,
     height: 100,
     border: '2px solid',
@@ -65,19 +79,47 @@ export const getSxClasses = (theme: Theme): SxStyles => ({
     overflow: 'hidden',
     marginRight: '16px',
   },
-  previewImage: {
+
+  rasterFunctionPreviewImage: {
     width: '100%',
     height: '100%',
     objectFit: 'cover',
   },
-  previewIcon: {
+
+  // WMS Style specific styles
+  wmsStyleMenuItem: {
+    border: '1px solid',
+    borderColor: 'divider',
+    borderRadius: 2,
+    margin: '4px 0',
+    padding: '12px',
+    alignItems: 'center',
+    '&:hover': {
+      borderColor: 'primary.main',
+    },
+    '&.Mui-selected': {
+      borderColor: 'primary.main',
+    },
+  },
+
+  wmsStylePreviewImageContainer: {
     width: 100,
-    height: 100,
+    minHeight: 100,
+    maxHeight: 200, // Cap maximum height to handle tall legend images
+    border: '2px solid',
+    borderColor: 'divider',
+    borderRadius: 2,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    marginRight: '16px',
   },
 
-  rasterFunctionListItemText: {
-    '& .MuiListItemText-primary': {
-      fontWeight: 600,
-    },
+  wmsStylePreviewImage: {
+    width: '100%',
+    height: 'auto', // Preserve aspect ratio
+    maxHeight: '200px',
+    objectFit: 'contain', // Show full image without cropping
   },
 });