From 4fcda3a6e97078391042cc510ca7315b7b73d564 Mon Sep 17 00:00:00 2001 From: MatthewMuehlhauserNRCan Date: Tue, 21 Jan 2025 08:45:20 -0500 Subject: [PATCH 1/6] Start new demo page --- .../templates/demos/demo-esri-renderer.html | 288 ++++++++++++++++++ .../public/templates/demos/demos.html | 2 + .../geoview-core/src/api/config/config-api.ts | 11 + 3 files changed, 301 insertions(+) create mode 100644 packages/geoview-core/public/templates/demos/demo-esri-renderer.html diff --git a/packages/geoview-core/public/templates/demos/demo-esri-renderer.html b/packages/geoview-core/public/templates/demos/demo-esri-renderer.html new file mode 100644 index 00000000000..1af6919e4e6 --- /dev/null +++ b/packages/geoview-core/public/templates/demos/demo-esri-renderer.html @@ -0,0 +1,288 @@ + + + + + + ESRI Renderer - Canadian Geospatial Platform Viewer + + + + + + + + + + + + +
+ + + + + + + +
+

Sandbox Configuration

+
+ + + + + + +
Main
+ + + + + + + + + + + + + + + +
This page is used to test the ConfigApi.
Feature Service URL (optional) + +
+ Input ESRI Renderer +
+
+ +
+ +
+
+   +
+ 		+ Style configuration: + File not validated... +
+
+ +
+ +
+
+
+
+

Sanbox Map

+ Top +
+
+
+
+

This map loads it's configurations from the text area.

+
+ + + 

+
+  
+
+  
+
+
diff --git a/packages/geoview-core/public/templates/demos/demos.html b/packages/geoview-core/public/templates/demos/demos.html
index e75151eae15..a091d6f5f0f 100644
--- a/packages/geoview-core/public/templates/demos/demos.html
+++ b/packages/geoview-core/public/templates/demos/demos.html
@@ -49,6 +49,8 @@ 
Many Important Layers

       

       
GeoJSON Injection

       Empty GeoJSON Layer to add features to
+      
Custom Renderer

+      ESRI Renderer
       

       

     
diff --git a/packages/geoview-core/src/api/config/config-api.ts b/packages/geoview-core/src/api/config/config-api.ts
index d5d6174d95e..b7057f5b846 100644
--- a/packages/geoview-core/src/api/config/config-api.ts
+++ b/packages/geoview-core/src/api/config/config-api.ts
@@ -9,11 +9,13 @@ import {
   EntryConfigBaseClass,
   TypeDisplayLanguage,
   TypeGeoviewLayerType,
+  TypeLayerStyleConfig,
 } from '@config/types/map-schema-types';
 import { MapConfigError } from '@config/types/classes/config-exceptions';
 
 import { generateId, isJsonString, removeCommentsFromJSON } from '@/core/utils/utilities';
 import { logger } from '@/core//utils/logger';
+import { createStyleUsingEsriRenderer, EsriBaseRenderer } from './esri-renderer-parser';
 
 /**
  * The API class that create configuration object. It is used to validate and read the service and layer metadata.
@@ -587,4 +589,13 @@ export class ConfigApi {
     }
     throw new MapConfigError('Unable to build metadata layer tree.');
   }
+
+  /**
+   * Returns the ESRI Renderer as a Style Config
+   * @param {EsriBaseRenderer} renderer The input renderer to be converted to a GeoView Style
+   * @returns {TypeLayerStyleConfig} The converted style
+   */
+  static getStyleFromESRIRenderer(renderer: EsriBaseRenderer): TypeLayerStyleConfig | undefined {
+    return createStyleUsingEsriRenderer(renderer);
+  }
 }

From d1e2aa348e7da019c8de4d07b2d2831aee0fe0a8 Mon Sep 17 00:00:00 2001
From: MatthewMuehlhauserNRCan 
Date: Mon, 27 Jan 2025 10:50:56 -0500
Subject: [PATCH 2/6] Working demo page

---
 .../templates/demos/demo-esri-renderer.html   | 248 +++++++++++-------
 .../geoview-core/src/api/config/config-api.ts |  10 +-
 2 files changed, 167 insertions(+), 91 deletions(-)

diff --git a/packages/geoview-core/public/templates/demos/demo-esri-renderer.html b/packages/geoview-core/public/templates/demos/demo-esri-renderer.html
index 1af6919e4e6..262383b35b6 100644
--- a/packages/geoview-core/public/templates/demos/demo-esri-renderer.html
+++ b/packages/geoview-core/public/templates/demos/demo-esri-renderer.html
@@ -1,89 +1,90 @@
 
 
-  
-    
-    
-    ESRI Renderer - Canadian Geospatial Platform Viewer
-    
-    
-    
-    
-    
-    
-    
-
-    
 
 
@@ -124,23 +134,31 @@ 
Sandbox Configuration

     
-          
+          
+        
+        
+          
-          
-          
@@ -176,19 +194,72 @@ 
Sanbox Map

-
+  
   
-
+
+
\ No newline at end of file
diff --git a/packages/geoview-core/src/api/config/config-api.ts b/packages/geoview-core/src/api/config/config-api.ts
index b7057f5b846..0cbd991021e 100644
--- a/packages/geoview-core/src/api/config/config-api.ts
+++ b/packages/geoview-core/src/api/config/config-api.ts
@@ -592,10 +592,14 @@ export class ConfigApi {
 
   /**
    * Returns the ESRI Renderer as a Style Config
-   * @param {EsriBaseRenderer} renderer The input renderer to be converted to a GeoView Style
+   * @param {string} input The input renderer to be converted to a GeoView Style
    * @returns {TypeLayerStyleConfig} The converted style
    */
-  static getStyleFromESRIRenderer(renderer: EsriBaseRenderer): TypeLayerStyleConfig | undefined {
-    return createStyleUsingEsriRenderer(renderer);
+  static getStyleFromESRIRenderer(input: string): TypeLayerStyleConfig | undefined {
+    const renderer = this.#convertStringToJson(input);
+    if (renderer) {
+      return createStyleUsingEsriRenderer(renderer as unknown as EsriBaseRenderer);
+    }
+    return undefined;
   }
 }

From 4bc85bd50a7bce693482737d570e8fdfbfcc416c Mon Sep 17 00:00:00 2001
From: MatthewMuehlhauserNRCan 
Date: Mon, 27 Jan 2025 12:32:07 -0500
Subject: [PATCH 3/6] Handle more than just esriFeature

---
 .../public/templates/demos/demo-esri-renderer.html             | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/geoview-core/public/templates/demos/demo-esri-renderer.html b/packages/geoview-core/public/templates/demos/demo-esri-renderer.html
index 262383b35b6..c583d22bb33 100644
--- a/packages/geoview-core/public/templates/demos/demo-esri-renderer.html
+++ b/packages/geoview-core/public/templates/demos/demo-esri-renderer.html
@@ -245,10 +245,11 @@ 
Sanbox Map

     executeButton.addEventListener('click', async (e) => {
       const geoViewRenderer = cgpv.api.config.getStyleFromESRIRenderer(inputTextArea.value);
       if (serviceUrlInput.value) {
+        const serviceType = cgpv.api.config.guessLayerType(serviceUrlInput.value);
         const urlArray = serviceUrlInput.value.split("/");
         const index = urlArray.pop();
         const serviceUrl = urlArray.join("/");
-        const geoviewConfig = await cgpv.api.config.createLayerConfig(serviceUrl, "esriFeature", [index]);
+        const geoviewConfig = await cgpv.api.config.createLayerConfig(serviceUrl, serviceType, [index]);
         geoviewConfig.listOfLayerEntryConfig[0].layerStyle = geoViewRenderer;
         outputTextArea.value = JSON.stringify(geoviewConfig, undefined, 2);
       } else {

From 3aad08c901be6418f63932003ba62a337cae5be6 Mon Sep 17 00:00:00 2001
From: MatthewMuehlhauserNRCan 
Date: Tue, 4 Feb 2025 10:12:57 -0500
Subject: [PATCH 4/6] Cleanup Demo Page

---
 .../templates/demos/demo-esri-renderer.html   | 96 +------------------
 1 file changed, 1 insertion(+), 95 deletions(-)

diff --git a/packages/geoview-core/public/templates/demos/demo-esri-renderer.html b/packages/geoview-core/public/templates/demos/demo-esri-renderer.html
index c583d22bb33..bd3c73cff4e 100644
--- a/packages/geoview-core/public/templates/demos/demo-esri-renderer.html
+++ b/packages/geoview-core/public/templates/demos/demo-esri-renderer.html
@@ -119,7 +119,7 @@
         
@@ -180,18 +180,6 @@ 
Sandbox Configuration

       
         
This page is used to test the ConfigApi.This page is used to create a valid GeoView style config from an ESRI Renderer.
+            If a Feature Service URL is provided, then a layer config with the style included will be generated.
+          

+          Example: https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/earthquakes_en/MapServer/0
+          

+            
+            
+          
         

         
Feature Service URL (optional)
           
-            
+            
           
         

         

           
             Input ESRI Renderer
             

-              

+              

                 
               

-              
             

             

@@ -149,12 +167,12 @@ 
Sandbox Configuration

           

           
             Style configuration:
-            File not validated...
+            File not validated...
             

-              

+              

                 
               

-              
             

           

   
 
   
 

           
           
-            
Sandbox Configuration

+            
ESRI Renderer Style Configuration Demo

           		
         

       
       
     

   
-  

-    
Sanbox Map

-    Top
-  

-  

-    

-  

-  
This map loads it's configurations from the text area.

-  

-
-  
-  

 
   
   
@@ -273,88 +261,6 @@ 
Sanbox Map

       messageObject.innerHTML = messageString;
     }
 
-    // Function used to create the string needed to display the error status of the different layerPath.
-    generateLayerPathErrorFlag = (listOfLayerEntryConfig, buffer = '', prefix = '') => {
-      listOfLayerEntryConfig.forEach((layer) => {
-        buffer = buffer ? `${buffer}\n` : '';
-        buffer = `${buffer}${layer?.getLayerPath?.() || layer.layerName}: ${layer?.getErrorDetectedFlag?.() ? 'ERROR' : 'Ok'}`;
-        if (layer.isLayerGroup) buffer = generateLayerPathErrorFlag(layer.listOfLayerEntryConfig, buffer, prefix ? `${prefix}.${layer.layerId}` : layer.layerId);
-      });
-      return buffer;
-    }
-
-    // Function used to compute and display execution time.
-    displayExecutionTime = (startTime, timeContainerId) => {
-      // Calculate the time span between now and start date
-      let timeSpan = new Date().getTime() - startTime;
-
-      const days = Math.floor(timeSpan / (1000 * 60 * 60 * 24));
-      timeSpan -= days * (1000 * 60 * 60 * 24);
-
-      const hours = Math.floor(timeSpan / (1000 * 60 * 60));
-      timeSpan -= hours * (1000 * 60 * 60);
-
-      const mins = Math.floor(timeSpan / (1000 * 60));
-      timeSpan -= mins * (1000 * 60);
-
-      const seconds = Math.floor(timeSpan / 1000);
-      timeSpan -= seconds * 1000;
-
-      // Let's say we always want seconds and milliseconds at least
-      let timeToDisplay = `${seconds} seconds, and ${timeSpan} ms`;
-      if (mins) timeToDisplay = `${mins} minutes, ${seconds} seconds, and ${timeSpan} ms`;
-      if (hours) timeToDisplay = `${hours} hours, ${mins} minutes, ${seconds} seconds, and ${timeSpan} ms`;
-
-      // display time in its container
-      document.getElementById(timeContainerId).innerHTML = `Execution time: ${timeToDisplay}`;
-    }
-
-    displayMapConfig = (mapConfig, tabId) => {
-      // Scan the layer structure to see if there is an eroneous layer.
-      const noErrorDetected = !mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
-        // Create a recursive function that scans the layer structure for erroneous sublayers. This function is used in the following line.
-        const subLayerError = (listOfLayerEntryConfig) => {
-          return listOfLayerEntryConfig.reduce((accumulator, subLayer) => {
-            if (subLayer.isLayerGroup) return accumulator || subLayer.getErrorDetectedFlag() || subLayerError(subLayer.listOfLayerEntryConfig);
-            return accumulator || subLayer.getErrorDetectedFlag();
-          }, false);
-        }
-        return accumulator || geoviewLayer.getErrorDetectedFlag() || subLayerError(geoviewLayer.listOfLayerEntryConfig);
-      }, false);
-
-      // Scan the layer structure to generate the raw metadata string.
-      geoviewLayerMetadataString = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
-        // Create a recursive function that scans the layer structure for sublayers metadata. This function is used in the following line.
-        const subLayerMetadata = (listOfLayerEntryConfig) => {
-          return listOfLayerEntryConfig.reduce((accumulator, subLayer) => {
-            if (subLayer.isLayerGroup) return `${accumulator}\nLayer Group ${subLayer.layerId}\n${subLayerMetadata(subLayer.listOfLayerEntryConfig)}`;
-            return `${accumulator}\nLayer Leaf ${subLayer.layerId}\n${JSON.stringify(subLayer.getLayerMetadata(), undefined, 2)}`;
-          }, '');
-        }
-        const sublayerInfo = subLayerMetadata(geoviewLayer.listOfLayerEntryConfig);
-        const geoviewInfo = `Geoview Layer ${geoviewLayer.geoviewLayerId}\n${JSON.stringify(geoviewLayer.getServiceMetadata(), undefined, 2)}\n`;
-        return `${accumulator}\n${geoviewInfo}\n${sublayerInfo}`;
-      }, '');
-
-      // If no geoview and sub layer error was detected
-      if (noErrorDetected) printMessage(document.getElementById(`message${tabId}`), 'Map Config instance created and all layers are valid.');
-      else printMessage(document.getElementById(`message${tabId}`), 'Map Config instance created, but it contains invalid layers.', 'error');
-
-      // Set the global variables associated to the Element Display zone.
-      mapConfigString = mapConfig.serialize();
-      geoviewLayerString = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
-        return `${accumulator}== ${geoviewLayer.geoviewLayerId} ===============================================================================================\n${geoviewLayer.serialize()}\n`;
-      }, '');
-      layerPathErrorFlag = mapConfig.map.listOfGeoviewLayerConfig.reduce((accumulator, geoviewLayer) => {
-        return `${accumulator}${generateLayerPathErrorFlag(geoviewLayer.listOfLayerEntryConfig, `geoviewLayerId ${geoviewLayer.geoviewLayerId}: ${geoviewLayer.getErrorDetectedFlag() ? 'ERROR' : 'Ok'}\nlistOfLayerEntryConfig:`)}\n\n`;
-      }, '');
-    }
-
-    // create snippets
-    // window.addEventListener('load', () => {
-    //   createCodeSnippet();
-    //   createConfigSnippet();
-    // });
   
 
 

From 123ef641f8ff4cd06cde6e178731659e19b286bf Mon Sep 17 00:00:00 2001
From: MatthewMuehlhauserNRCan 
Date: Tue, 4 Feb 2025 14:17:21 -0500
Subject: [PATCH 5/6] Remove input URL to prevent confusion

---
 packages/geoview-core/public/css/style.css    |  43 ++
 .../templates/demos/demo-esri-renderer.html   | 443 ++++++++++++------
 2 files changed, 352 insertions(+), 134 deletions(-)

diff --git a/packages/geoview-core/public/css/style.css b/packages/geoview-core/public/css/style.css
index 253d96f945f..88adf711717 100644
--- a/packages/geoview-core/public/css/style.css
+++ b/packages/geoview-core/public/css/style.css
@@ -226,6 +226,49 @@ table.state {
   color: green
 }
 
+.editor {
+  display: inline-flex;
+  gap: 10px;
+  font-family: monospace;
+  line-height: 21px;
+  background: #282a3a;
+  border-radius: 2px;
+  padding: 20px 10px;
+  height: 500px;
+  overflow-y: auto;
+}
+
+.line-numbers {
+  width: 20px;
+  text-align: right;
+  height: 9999px;
+}
+
+.line-numbers span {
+  counter-increment: linenumber;
+}
+
+.line-numbers span::before {
+  content: counter(linenumber);
+  display: block;
+  color: #506882;
+}
+
+textarea {
+  height: 99999px;
+  line-height: 21px;
+  overflow-y: hidden;
+  padding: 0;
+  border: 0;
+  background: #282a3a;
+  color: #fff;
+  min-width: 500px;
+  outline: none;
+  resize: none;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
 @media only screen and (max-width: 767px) {
   body {
     padding: 2px; /* Adjust the value as needed */
diff --git a/packages/geoview-core/public/templates/demos/demo-esri-renderer.html b/packages/geoview-core/public/templates/demos/demo-esri-renderer.html
index bd3c73cff4e..d4ddd6ae1eb 100644
--- a/packages/geoview-core/public/templates/demos/demo-esri-renderer.html
+++ b/packages/geoview-core/public/templates/demos/demo-esri-renderer.html
@@ -14,93 +14,6 @@