Issue Canadian-Geospatial-Platform#2488 - Refresh GeoCore Layers on L…

…anguage Change (Canadian-Geospatial-Platform#2610)

* Refresh layers on language change (2488) and CSS for datatable scrolling

* Added Reset Layer Checkmark to Navigator page

* 2488 refresh layers alternate solution

* Ensure registered layer paths are removed

* Update method name and comments.

* Added filter to Promise.allSettled

packages/geoview-core/public/templates/demos-navigator.html

@@ -162,6 +162,8 @@ <h1><strong>Configurations Navigator</strong></h1>
           <option value="fr">French</option>
           <option value="unsupported">Not Supported</option>
         </select>
+        <input type="checkbox" id="resetLayer" name="resetLayer" checked>
+        <label for="resetLayer">Reset Layers</label>
       </div>
       <p>Display Theme:</p>
       <div class="selector">
@@ -272,8 +274,9 @@ <h1><strong>Configurations Navigator</strong></h1>
 
       // ------------------ SWITCHER SECTION START -----------------------------------------
       const switchLang = document.getElementById('switchLang');
+      const resetLayer = document.getElementById('resetLayer');
       switchLang.addEventListener('change', (e) => {
-        cgpv.api.maps['sandboxMap'].setLanguage(e.target.value);
+        cgpv.api.maps['sandboxMap'].setLanguage(e.target.value, resetLayer.checked);
       });
 
       const switchThemeElem = document.getElementById('switchTheme');

packages/geoview-core/src/core/components/guide/guide-panel.tsx

@@ -105,7 +105,7 @@ export function GuidePanel({ fullWidth }: GuidePanelType): JSX.Element {
         fullWidth={fullWidth}
         aria-label={t('guide.title')}
       >
-        <Box sx={sxClasses.rightPanelContainer} aria-label={t('guide.title')} className="guidebox-container">
+        <Box sx={sxClasses.rightPanelContainer} aria-label={t('guide.title') || ''} className="guidebox-container">
           <Box className="guideBox">{layersList[guideItemIndex]?.content}</Box>
         </Box>
       </Layout>

packages/geoview-core/src/geo/layer/layer-sets/abstract-layer-set.ts

@@ -285,6 +285,9 @@ export abstract class AbstractLayerSet {
     // Delete the result set for the layer path
     delete this.resultSet[layerPath];
 
+    // Remove layer path from registered layer paths
+    this.#registeredLayerLayerPaths = this.#registeredLayerLayerPaths.filter((registeredLayer) => registeredLayer !== layerPath);
+
     // Inform that the layer set has been updated
     this.onLayerSetUpdatedProcess(layerPath);
   }

packages/geoview-core/src/geo/layer/layer.ts

@@ -559,6 +559,55 @@ export class LayerApi {
     logger.logError(`Duplicate use of geoview layer identifier ${mapConfigLayerEntry.geoviewLayerId} on map ${this.getMapId()}`);
   }
 
+  /**
+   * Refreshes GeoCore Layers
+   * @returns {Promise<void>} A promise which resolves when done refreshing
+   */
+  reloadGeocoreLayers(): Promise<void> {
+    const configs = this.getLayerEntryConfigs();
+    const originalMapOrderedLayerInfo = MapEventProcessor.getMapOrderedLayerInfo(this.getMapId());
+    const promisesOfGeoCoreGeoviewLayers: Promise<TypeGeoviewLayerConfig[]>[] = [];
+
+    configs
+      .filter((config) => {
+        // Filter to just Geocore layers and not child layers
+        if (api.config.isValidUUID(config.geoviewLayerConfig.geoviewLayerId) && config.parentLayerConfig === undefined) {
+          return true;
+        }
+        return false;
+      })
+      .forEach((config) => {
+        // Remove and add back in GeoCore Layers and return their promises
+        this.removeLayerUsingPath(config.layerPath);
+        const geoCore = new GeoCore(this.getMapId(), this.mapViewer.getDisplayLanguage());
+        promisesOfGeoCoreGeoviewLayers.push(geoCore.createLayersFromUUID(config.geoviewLayerConfig.geoviewLayerId));
+      });
+
+    return Promise.allSettled(promisesOfGeoCoreGeoviewLayers)
+      .then((promisedLayers) => {
+        promisedLayers
+          .filter((promise) => promise.status === 'fulfilled')
+          .map((promise) => promise as PromiseFulfilledResult<TypeGeoviewLayerConfig[]>)
+          .forEach((promise) => {
+            promise.value.forEach((geoviewLayerConfig) => {
+              this.addGeoviewLayer(geoviewLayerConfig);
+            });
+          });
+        const newMapOrderedLayerInfo = MapEventProcessor.getMapOrderedLayerInfo(this.getMapId());
+        const originalLayerPaths = originalMapOrderedLayerInfo.map((layer) => layer.layerPath);
+        const childLayersToRemove = newMapOrderedLayerInfo
+          .map((layer) => layer.layerPath)
+          .filter((path) => !originalLayerPaths.includes(path));
+        if (childLayersToRemove) {
+          childLayersToRemove.forEach((childPath) => {
+            this.removeLayerUsingPath(childPath);
+          });
+        }
+        MapEventProcessor.setMapOrderedLayerInfo(this.getMapId(), originalMapOrderedLayerInfo);
+      })
+      .catch((error) => logger.logError(error));
+  }
+
   /**
    * Adds a Geoview Layer by GeoCore UUID.
    * @param {string} uuid - The GeoCore UUID to add to the map

packages/geoview-core/src/geo/map/map-viewer.ts

@@ -924,13 +924,15 @@ export class MapViewer {
    * @param {boolean} resetLayer - Optional flag to ask viewer to reload layers with the new localize language
    * @returns {Promise<[void, void]>}
    */
-  setLanguage(displayLanguage: TypeDisplayLanguage, resetLayer?: boolean | false): Promise<[void, void]> {
+  setLanguage(displayLanguage: TypeDisplayLanguage, reloadLayers?: boolean | false): Promise<[void, void]> {
+    // If the language hasn't changed don't do anything
+    if (AppEventProcessor.getDisplayLanguage(this.mapId) === displayLanguage) return Promise.resolve([undefined, undefined]);
     if (VALID_DISPLAY_LANGUAGE.includes(displayLanguage)) {
       const promise = AppEventProcessor.setDisplayLanguage(this.mapId, displayLanguage);
 
-      // if flag is true, check if config support the layers change and apply
-      if (resetLayer) {
-        logger.logInfo('reset layers not implemented yet');
+      // if flag is true, reload GeoCore layers
+      if (reloadLayers) {
+        this.layer.reloadGeocoreLayers().catch((error) => logger.logError(error));
       }
 
       // Emit language changed event

packages/geoview-core/src/ui/style/style.css

@@ -37,3 +37,9 @@ Hold viewer specific css not inside theme
 .guideBox p img {
   vertical-align: bottom;
 }
+
+/* smooth data table scrolling */
+.MuiTableContainer-root {
+  contain: paint;
+  will-change: transform;
+}