refactor(layers) - Various enhancements around the layers including a…

…rchitecture rearrangement in preparation for bigger changes, new rules (#2149)

* Working state

* Moved olLayerAndLoadEndListeners thing

* Moved initRegisterLayers and more privatization

* Moved initRegisterLayers and more privatization and cleanup

* Integrated comments

packages/.eslintrc

@@ -85,7 +85,15 @@
         "endOfLine": "auto"
       }
     ],
-    "require-await": 1 // Warning
+    "no-restricted-syntax": [
+      1, // Warning
+      {
+          "selector": ":matches(PropertyDefinition, MethodDefinition)[accessibility='private']",
+          "message": "Use # prefix for private instead"
+      }
+    ],
+    "require-await": 1, // Warning
+    "@typescript-eslint/await-thenable": "warn"
   },
   "overrides": [
     {

packages/geoview-core/public/templates/layers/esri-dynamic.html

@@ -645,8 +645,8 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
           if (input) {
             const layerConfig = cgpv.api.maps.LYR1.layer.registeredLayers['esriFeatureLYR1/0'];
             const checkbox = document.getElementById('checkbox-LYR1-esriFeatureLYR1');
-            const temporalData = cgpv.api.maps.LYR1.layer.geoviewLayer('esriFeatureLYR1/0').getTemporalDimension('esriFeatureLYR1/0');
-            cgpv.api.maps.LYR1.layer.geoviewLayer('esriFeatureLYR1/0').applyViewFilter('esriFeatureLYR1/0',
+            const temporalData = cgpv.api.maps.LYR1.layer.getGeoviewLayer('esriFeatureLYR1/0').getTemporalDimension('esriFeatureLYR1/0');
+            cgpv.api.maps.LYR1.layer.getGeoviewLayer('esriFeatureLYR1/0').applyViewFilter('esriFeatureLYR1/0',
               `Date < date '${temporalData.range.range[k]}'`,
               checkbox.value !== 'true'
             );
@@ -664,7 +664,7 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
           createInfoTable('LYR2', 'ResultSetId2', resultSet, 'all-features');
         });
 
-        const field1 = cgpv.api.maps.LYR2.layer.geoviewLayer('historical-flood/0').getTemporalDimension('historical-flood/0').field;
+        const field1 = cgpv.api.maps.LYR2.layer.getGeoviewLayer('historical-flood/0').getTemporalDimension('historical-flood/0').field;
         const LYR2_FILTERS = [`${field1} >= date '01/01/2018 05:00:00' and ${field1} <= date '12/31/2019 19:00:00-05:00'`,
         `${field1} > date '01/01/2018 05:00:00' and ${field1} <= date '01/01/2020 05:00:00Z'`,
         `${field1} >= date '01/01/2018 05:00:00' and ${field1} < date '01/01/2020 00:00:00+05:00'`];
@@ -675,7 +675,7 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
             input.value = LYR2_FILTERS[i];
             const layerConfig = cgpv.api.maps.LYR2.layer.registeredLayers['historical-flood/0'];
             const checkbox = document.getElementById('checkbox-LYR2-historical-flood');
-            cgpv.api.maps.LYR2.layer.geoviewLayer('historical-flood/0').applyViewFilter('historical-flood/0',
+            cgpv.api.maps.LYR2.layer.getGeoviewLayer('historical-flood/0').applyViewFilter('historical-flood/0',
               LYR2_FILTERS[i],
               checkbox.value !== 'true'
             );
@@ -692,7 +692,7 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
           createInfoTable('LYR3', 'ResultSetId3', resultSet, 'all-features');
         });
 
-        const field2 = cgpv.api.maps.LYR3.layer.geoviewLayer('historical-flood/0').getTemporalDimension('historical-flood/0').field;
+        const field2 = cgpv.api.maps.LYR3.layer.getGeoviewLayer('historical-flood/0').getTemporalDimension('historical-flood/0').field;
         const LYR3_FILTERS = [`${field2} >= date '2018-01-01T00:00:00' and ${field2} <= date '2020-01-01T00:00:00'`,
         `${field2} > date '2018-01-01T00:00:00' and ${field2} <= date '2020-01-01T00:00:00'`,
         `${field2} >= date '2018-01-01T00:00:00' and ${field2} < date '2020-01-01T00:00:00'`];
@@ -703,7 +703,7 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
             input.value = LYR3_FILTERS[j];
             const layerConfig = cgpv.api.maps.LYR3.layer.registeredLayers['historical-flood/0'];
             const checkbox = document.getElementById('checkbox-LYR3-historical-flood');
-            cgpv.api.maps.LYR3.layer.geoviewLayer('historical-flood/0').applyViewFilter('historical-flood/0',
+            cgpv.api.maps.LYR3.layer.getGeoviewLayer('historical-flood/0').applyViewFilter('historical-flood/0',
               LYR3_FILTERS[j],
               checkbox.value !== 'true'
             );

packages/geoview-core/public/templates/layers/esri-feature.html

@@ -288,8 +288,8 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
             if (input) {
               const layerConfig = cgpv.api.maps.LYR1.layer.registeredLayers['esriFeatureLYR1/0'];
               const checkbox = document.getElementById('checkbox-LYR1-esriFeatureLYR1');
-              const temporalData = cgpv.api.maps.LYR1.layer.geoviewLayer('esriFeatureLYR1/0').getTemporalDimension('esriFeatureLYR1/0');
-              cgpv.api.maps.LYR1.layer.geoviewLayer('esriFeatureLYR1/0').applyViewFilter('esriFeatureLYR1/0',
+              const temporalData = cgpv.api.maps.LYR1.layer.getGeoviewLayer('esriFeatureLYR1/0').getTemporalDimension('esriFeatureLYR1/0');
+              cgpv.api.maps.LYR1.layer.getGeoviewLayer('esriFeatureLYR1/0').applyViewFilter('esriFeatureLYR1/0',
                 `Date < date '${temporalData.range.range[k]}'`,
                 checkbox.value !== 'true'
               );
@@ -330,7 +330,7 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
       } else if (mapId === 'LYR2') {
         createTableOfFilter('LYR2');
         if (cgpv.api.maps?.LYR2?.layer?.registeredLayers?.['historical-flood/0']?.layerStatus === 'loaded') {
-          const field2 = cgpv.api.maps.LYR2.layer.geoviewLayer('historical-flood/0').getTemporalDimension('historical-flood/0').field;
+          const field2 = cgpv.api.maps.LYR2.layer.getGeoviewLayer('historical-flood/0').getTemporalDimension('historical-flood/0').field;
           const LYR2_FILTERS = [`${field2} >= date '01/01/2018 05:00:00' and ${field2} <= date '12/31/2019 19:00:00-05:00'`,
           `${field2} > date '01/01/2018 05:00:00' and ${field2} <= date '01/01/2020 05:00:00Z'`,
           `${field2} >= date '01/01/2018 05:00:00' and ${field2} < date '01/01/2020 00:00:00+05:00'`];
@@ -341,7 +341,7 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
               input.value = LYR2_FILTERS[i];
               const layerConfig = cgpv.api.maps.LYR2.layer.registeredLayers['historical-flood/0'];
               const checkbox = document.getElementById('checkbox-LYR2-historical-flood');
-              cgpv.api.maps.LYR2.layer.geoviewLayer('historical-flood/0').applyViewFilter('historical-flood/0',
+              cgpv.api.maps.LYR2.layer.getGeoviewLayer('historical-flood/0').applyViewFilter('historical-flood/0',
                 LYR2_FILTERS[i],
                 checkbox.value !== 'true'
               );
@@ -353,7 +353,7 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
       } else if (mapId === 'LYR3') {
         createTableOfFilter('LYR3');
         if (cgpv.api.maps?.LYR3?.layer?.registeredLayers?.['historical-flood/0']?.layerStatus === 'loaded') {
-          const field3 = cgpv.api.maps.LYR3.layer.geoviewLayer('historical-flood/0').getTemporalDimension('historical-flood/0').field;
+          const field3 = cgpv.api.maps.LYR3.layer.getGeoviewLayer('historical-flood/0').getTemporalDimension('historical-flood/0').field;
           const LYR3_FILTERS = [`${field3} >= date '2018-01-01T00:00:00' and ${field3} <= date '2020-01-01T00:00:00'`,
           `${field3} > date '2018-01-01T00:00:00' and ${field3} <= date '2020-01-01T00:00:00'`,
           `${field3} >= date '2018-01-01T00:00:00' and ${field3} < date '2020-01-01T00:00:00'`];
@@ -364,7 +364,7 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
               input.value = LYR3_FILTERS[j];
               const layerConfig = cgpv.api.maps.LYR3.layer.registeredLayers['historical-flood/0'];
               const checkbox = document.getElementById('checkbox-LYR3-historical-flood');
-              cgpv.api.maps.LYR3.layer.geoviewLayer('historical-flood/0').applyViewFilter('historical-flood/0',
+              cgpv.api.maps.LYR3.layer.getGeoviewLayer('historical-flood/0').applyViewFilter('historical-flood/0',
                 LYR3_FILTERS[j],
                 checkbox.value !== 'true'
               );

packages/geoview-core/public/templates/layers/wms.html

@@ -508,11 +508,11 @@ <h4 id="HLYR4">4. Automatic group creation from metadata information</h4>
             window.setInterval(() => {
               const layerConfig = cgpv.api.maps.LYR1.layer.registeredLayers['wmsLYR1-spatiotemporel/RADAR_1KM_RSNO'];
               const temporalData = cgpv.api.maps.LYR1.layer
-                .geoviewLayer('wmsLYR1-spatiotemporel/RADAR_1KM_RSNO')
+                .getGeoviewLayer('wmsLYR1-spatiotemporel/RADAR_1KM_RSNO')
                 .getTemporalDimension('wmsLYR1-spatiotemporel/RADAR_1KM_RSNO');
               if (temporalData) {
                 cgpv.api.maps.LYR1.layer
-                  .geoviewLayer('wmsLYR1-spatiotemporel/RADAR_1KM_RSNO')
+                  .getGeoviewLayer('wmsLYR1-spatiotemporel/RADAR_1KM_RSNO')
                   .applyViewFilter('wmsLYR1-spatiotemporel/RADAR_1KM_RSNO', `time=date '${temporalData.range.range[i]}'`);
                 if (++i === temporalData.range.range.length) i = 0;
               }
@@ -522,11 +522,11 @@ <h4 id="HLYR4">4. Automatic group creation from metadata information</h4>
             window.setInterval(() => {
               const layerConfig = cgpv.api.maps.LYR1.layer.registeredLayers['wmsLYR1-msi/msi-94-or-more'];
               const temporalData = cgpv.api.maps.LYR1.layer
-                .geoviewLayer('wmsLYR1-msi/msi-94-or-more')
+                .getGeoviewLayer('wmsLYR1-msi/msi-94-or-more')
                 .getTemporalDimension('wmsLYR1-msi/msi-94-or-more');
               if (temporalData) {
                 cgpv.api.maps.LYR1.layer
-                  .geoviewLayer('wmsLYR1-msi/msi-94-or-more')
+                  .getGeoviewLayer('wmsLYR1-msi/msi-94-or-more')
                   .applyViewFilter('wmsLYR1-msi/msi-94-or-more', `time=date '${temporalData.range.range[j]}'`);
                 if (++j === temporalData.range.range.length) j = 0;
               }

packages/geoview-core/public/templates/ui-components.html

@@ -173,9 +173,9 @@ <h3>Accessing slider value from outside of the core viewer using api event liste
               ],
               track: 'normal',
               onChange: (dates) => {
-                const field = cgpv.api.maps.UI1.layer.geoviewLayer('historical-flood/0').getTemporalDimension('historical-flood/0').field;
+                const field = cgpv.api.maps.UI1.layer.getGeoviewLayer('historical-flood/0').getTemporalDimension('historical-flood/0').field;
                 cgpv.api.maps.UI1.layer
-                  .geoviewLayer('historical-flood/0')
+                  .getGeoviewLayer('historical-flood/0')
                   .applyViewFilter('historical-flood/0', `${field} >= date '${dates[0]}-01-01' and ${field} <= date '${dates[1]}-12-31'`);
               },
             })

packages/geoview-core/src/api/config/types/config-constants.ts

@@ -1,5 +1,5 @@
 // TODO: When we are done with the config extraction, do a review of all the constants, types and utilities to
-// TODOCONT: remove code duplication.
+// TO.DOCONT: remove code duplication.
 
 import { Cast, LayerEntryTypesKey, LayerTypesKey, TypeGeoviewLayerType } from '@config/types/config-types';
 import { TypeBasemapId, TypeLayerEntryType, TypeValidMapProjectionCodes } from '@config/types/map-schema-types';

packages/geoview-core/src/api/config/uuid-config-reader.ts

@@ -34,9 +34,9 @@ export class UUIDmapConfigReader {
   /**
    * Reads and parses Layers configs from uuid request result
    * @param {TypeJsonObject} result the uuid request result
-   * @returns {TypeListOfGeoviewLayerConfig} layers parsed from uuid result
+   * @returns {TypeJsonObject[]} layers parsed from uuid result
    */
-  private static getLayerConfigFromResponse(result: AxiosResponse<TypeJsonObject>, lang: string): TypeJsonObject[] {
+  static #getLayerConfigFromResponse(result: AxiosResponse<TypeJsonObject>, lang: string): TypeJsonObject[] {
     // If invalid response
     if (!result?.data || !result.data.reponse || !result.data.reponse.rcs || !result.data.reponse.rcs[lang])
       throw new Error('Invalid response from GeoCore service');
@@ -160,6 +160,6 @@ export class UUIDmapConfigReader {
     const result = await axios.get<GeoChartGeoCoreConfig>(url);
 
     // Return the parsed response
-    return this.getLayerConfigFromResponse(result, lang);
+    return this.#getLayerConfigFromResponse(result, lang);
   }
 }

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

@@ -13,7 +13,7 @@ export type BatchedPropagationLayerDataArrayByMap = {
 
 export abstract class AbstractEventProcessor {
   // The subscription array used to destroy the subscriptions
-  private subscriptionArr: Array<() => void> = [];
+  #subscriptionArr: Array<() => void> = [];
 
   /**
    * Shortcut to get the store state for a given map id
@@ -43,7 +43,7 @@ export abstract class AbstractEventProcessor {
   public initialize(store: GeoviewStoreType): void {
     // Call on initialize for the inherited classes to initialize and return their subscribtions
     const subs = this.onInitialize(store);
-    if (subs) this.subscriptionArr.push(...subs);
+    if (subs) this.#subscriptionArr.push(...subs);
   }
 
   // Added eslint-disable here, because we do want to override this method in children and keep 'this'.
@@ -65,7 +65,7 @@ export abstract class AbstractEventProcessor {
 
   protected onDestroy(): void {
     // destroying all subscriptions
-    this.subscriptionArr.forEach((unsub) => unsub());
+    this.#subscriptionArr.forEach((unsub) => unsub());
   }
 
   /**

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

@@ -1,6 +1,5 @@
 import { AbstractGeoViewVector } from '@/geo/layer/geoview-layers/vector/abstract-geoview-vector';
 import { EsriDynamic } from '@/geo/layer/geoview-layers/raster/esri-dynamic';
-import { TypeLayerEntryConfig } from '@/geo/map/map-schema-types';
 import { AbstractEventProcessor } from '@/api/event-processors/abstract-event-processor';
 import { TypeFeatureInfoResultSet } from '@/geo/layer/layer-sets/feature-info-layer-set';
 import { IDataTableState } from '@/core/stores/store-interface-and-intial-values/data-table-state';
@@ -53,8 +52,8 @@ export class DataTableEventProcessor extends AbstractEventProcessor {
    */
   static applyFilters(mapId: string, layerPath: string, filterStrings: string, isMapRecordExist: boolean): void {
     // TODO: Refactor - Take a look at the TimeSliderEventProcessor.applyFilters and do same here, passing geoviewLayer in params to save a MapEventProcessor (api.maps[] in disguise)?
-    const geoviewLayerInstance = MapEventProcessor.getMapViewerLayerAPI(mapId).geoviewLayer(layerPath);
-    const filterLayerConfig = MapEventProcessor.getMapViewerLayerAPI(mapId).registeredLayers[layerPath] as TypeLayerEntryConfig;
+    const geoviewLayerInstance = MapEventProcessor.getMapViewerLayerAPI(mapId).getGeoviewLayer(layerPath);
+    const filterLayerConfig = MapEventProcessor.getMapViewerLayerAPI(mapId).getLayerEntryConfig(layerPath);
 
     // TODO: Check - Is the condition `filterLayerConfig !== undefined` really necessary here if it's not to be used after anyways?
     if (isMapRecordExist && geoviewLayerInstance !== undefined && filterLayerConfig !== undefined && filterStrings.length) {

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

@@ -154,7 +154,7 @@ export class LegendEventProcessor extends AbstractEventProcessor {
     };
     const createNewLegendEntries = (layerPathBeginning: string, currentLevel: number, existingEntries: TypeLegendLayer[]): void => {
       const entryLayerPath = `${layerPathBeginning}/${layerPathNodes[currentLevel]}`;
-      const layerConfig = MapEventProcessor.getMapViewerLayerAPI(mapId).registeredLayers[entryLayerPath] as TypeLayerEntryConfig;
+      const layerConfig = MapEventProcessor.getMapViewerLayerAPI(mapId).getLayerEntryConfig(entryLayerPath)!;
       let entryIndex = existingEntries.findIndex((entry) => entry.layerPath === entryLayerPath);
       if (layerEntryIsGroupLayer(layerConfig)) {
         const controls: TypeLayerControls = setLayerControls(layerConfig);
@@ -189,7 +189,7 @@ export class LegendEventProcessor extends AbstractEventProcessor {
           controls,
           layerId: layerPathNodes[currentLevel],
           layerPath: entryLayerPath,
-          layerAttribution: MapEventProcessor.getMapViewerLayerAPI(mapId).geoviewLayers[layerPathNodes[0]].attributions,
+          layerAttribution: MapEventProcessor.getMapViewerLayerAPI(mapId).getGeoviewLayer(layerPathNodes[0])!.attributions,
           layerName:
             legendResultSetEntry.layerName ||
             getLocalizedValue(layerConfig.layerName, AppEventProcessor.getDisplayLanguage(mapId)) ||
@@ -216,7 +216,7 @@ export class LegendEventProcessor extends AbstractEventProcessor {
         // eslint-disable-next-line no-param-reassign
         else existingEntries[entryIndex] = newLegendLayer;
 
-        const myLayer = MapEventProcessor.getMapViewerLayerAPI(mapId).geoviewLayers[layerPathNodes[0]];
+        const myLayer = MapEventProcessor.getMapViewerLayerAPI(mapId).getGeoviewLayer(layerPathNodes[0])!;
         // TODO: calculateBounds issue will be tackle ASAP in a next PR
         newLegendLayer.bounds = myLayer.allLayerStatusAreGreaterThanOrEqualTo('loaded') ? myLayer.calculateBounds(layerPath) : undefined;
       }

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

@@ -205,8 +205,6 @@ export class MapEventProcessor extends AbstractEventProcessor {
    * @returns {LayerApi} The Map viewer layer API instance
    */
   static getMapViewerLayerAPI(mapId: string): LayerApi {
-    // TODO: refactor layer - It seems sometimes we use getMapViewerLayerAPI(mapId).geoviewLayer(layerPath)
-    // TD.CONT: and sometimes like the above. Should 'registeredLayers' be #private to have a single way of getting a layer using a layer path?
     return api.maps[mapId].layer;
   }
 
@@ -520,7 +518,7 @@ export class MapEventProcessor extends AbstractEventProcessor {
           // Go for it
           // eslint-disable-next-line no-param-reassign
           layerInfo.visible = newVisibility;
-          this.getMapViewerLayerAPI(mapId).geoviewLayer(layerInfo.layerPath).setVisible(layerInfo.visible, layerInfo.layerPath);
+          this.getMapViewerLayerAPI(mapId).getGeoviewLayer(layerInfo.layerPath)?.setVisible(layerInfo.visible, layerInfo.layerPath);
         }
       }
     });
@@ -530,7 +528,7 @@ export class MapEventProcessor extends AbstractEventProcessor {
       if ((!layerVisibility || newValue) && parentLayerVisibility === false) {
         if (parentLayerInfo) {
           parentLayerInfo.visible = true;
-          this.getMapViewerLayerAPI(mapId).geoviewLayer(parentLayerPath).setVisible(true, parentLayerPath);
+          this.getMapViewerLayerAPI(mapId).getGeoviewLayer(parentLayerPath)?.setVisible(true, parentLayerPath);
         }
       }
       const children = curOrderedLayerInfo.filter(
@@ -805,7 +803,7 @@ export class MapEventProcessor extends AbstractEventProcessor {
   static setLayerZIndices = (mapId: string): void => {
     const reversedLayers = [...this.getMapStateProtected(mapId).orderedLayerInfo].reverse();
     reversedLayers.forEach((orderedLayerInfo, index) => {
-      const olLayer = this.getMapViewerLayerAPI(mapId).registeredLayers[orderedLayerInfo.layerPath]?.olLayer;
+      const olLayer = this.getMapViewerLayerAPI(mapId).getLayerEntryConfig(orderedLayerInfo.layerPath)?.olLayer;
       if (olLayer) olLayer?.setZIndex(index + 10);
     });
   };

packages/geoview-core/src/app.tsx

@@ -128,7 +128,7 @@ async function renderMap(mapElement: Element): Promise<void> {
   // TODO: refactor - remove this config once we get layers from the new one
   // create a new config for this map element
   const config = new Config();
-  const configObj = await config.initializeMapConfig(configuration.mapId, configuration!.map!.listOfGeoviewLayerConfig!);
+  const configObj = config.initializeMapConfig(configuration.mapId, configuration!.map!.listOfGeoviewLayerConfig!);
   configuration.map.listOfGeoviewLayerConfig = configObj!;
 
   // if valid config was provided - mapId is now part of config

packages/geoview-core/src/core/components/layers/hooks/helpers.ts

@@ -180,7 +180,7 @@ export function useLegendHelpers(): unknown {
         bounds: undefined,
         layerId: setData.data?.layerPath ?? `layer${i}`,
         layerPath: `test_${setData.data?.layerPath ?? generateId()}`,
-        layerName: `TEST---${setData.data?.layerName?.en ?? 'Uknown Laer name'}`,
+        layerName: `TEST---${setData.data?.layerName?.en ?? 'Unknown Layer name'}`,
         type: setData.data?.type ?? CONST_LAYER_TYPES.IMAGE_STATIC,
         layerStatus: setData.layerStatus,
         children: [],