fix(query): Re work the identify query with offset and geometry false… (

#2674) * fix(query): Re work the identify query with offset and geometry false for hover Closes #2565 * manage oid check * Fix oid data table query, uniqueValue no fields * fix reviewable * Add fetch web worker * progress on worker and comments * update geometry from worker for point * pre rebase * finish details * first review comment * fix review --------- Co-authored-by: jolevesq <[email protected]>
Canadian-Geospatial-Platform · Jan 21, 2025 · 9537b32 · 9537b32
1 parent 462a956
commit 9537b32
Show file tree

Hide file tree

Showing 31 changed files with 828 additions and 131 deletions.
diff --git a/packages/geoview-core/public/configs/navigator/28-geocore.json b/packages/geoview-core/public/configs/navigator/28-geocore.json
@@ -12,7 +12,7 @@
     "listOfGeoviewLayerConfig": [
       {
         "geoviewLayerType": "geoCore",
-        "geoviewLayerId": "21b821cf-0f1c-40ee-8925-eab12d357668"
+        "geoviewLayerId": "1dcd28aa-99da-4f62-b157-15631379b170"
       },
       {
         "geoviewLayerType": "geoCore",

diff --git a/packages/geoview-core/public/configs/performance.json b/packages/geoview-core/public/configs/performance.json
@@ -0,0 +1,50 @@
+{
+  "map": {
+    "interaction": "dynamic",
+    "viewSettings": {
+      "projection": 3857
+    },
+    "basemapOptions": {
+      "basemapId": "transport",
+      "shaded": true,
+      "labeled": false
+    },
+    "listOfGeoviewLayerConfig": [
+      {
+        "geoviewLayerType": "geoCore",
+        "geoviewLayerId": "1dcd28aa-99da-4f62-b157-15631379b170"
+      },
+      {
+        "geoviewLayerType": "geoCore",
+        "geoviewLayerId": "6c343726-1e92-451a-876a-76e17d398a1c"
+      },
+      {
+        "geoviewLayerType": "geoCore",
+        "geoviewLayerId": "e2424b6c-db0c-4996-9bc0-2ca2e6714d71"
+      },
+      {
+        "geoviewLayerType": "geoCore",
+        "geoviewLayerId": "c5c249c4-dea6-40a6-8fae-188a42030908"
+      }
+    ]
+  },
+  "components": [
+    "overview-map"
+  ],
+  "overviewMap": {
+    "hideOnZoom": 7
+  },
+  "footerBar": {
+    "tabs": {
+      "core": [
+        "legend",
+        "layers",
+        "details",
+        "geochart",
+        "data-table"
+      ]
+    }
+  },
+  "corePackages": [],
+  "theme": "geo.ca"
+}
diff --git a/packages/geoview-core/public/templates/outliers/outlier-performance.html b/packages/geoview-core/public/templates/outliers/outlier-performance.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Outlier ESRI Layers - Canadian Geospatial Platform Viewer</title>
+    <link rel="shortcut icon" href="./favicon.ico" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="msapplication-config" content="./img/browserconfig.xml" />
+    <meta name="theme-color" content="#ffffff" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:200,300,400,900|Merriweather" rel="stylesheet" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="css/style.css" />
+  </head>
+
+  <body>
+    <div class="header-table">
+      <table>
+        <tbody>
+          <tr>
+            <td><img class="header-logo" alt="logo" src="./img/Logo.png" /></td>
+            <td class="header-title">
+              <h1><strong>Outlier layers with performace issue</strong></h1>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <a href="./index.html">Main</a><br />
+              <a href="./outliers.html">Outlier Layers</a><br />
+            </td>
+          </tr>
+          <tr>
+            <td><p>This page is used to showcase layers with few layer with bad performance with different original server projection</p></td>
+          </tr>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="map-title-holder">
+      <h4 id="HMap1">Max Record Count Layers</h4>
+      <a class="ref-link" href="#top">Top</a>
+    </div>
+    <button class="collapsible active">Layers Status</button>
+    <pre id="HMap1-state" class="panel map-title-holder"></pre>
+    <hr />
+
+    <select name="projections" id="projections">
+      <option value="3857">Web Mercator (3857)</option>
+      <option value="3978">LCC (3978)</option>
+    </select>
+    <button type="button" onclick="reloadMap()">Set Projection</button>
+
+    <div
+      id="Map1"
+      class="geoview-map"
+      data-lang="en"
+      data-config-url="./configs/performance.json"
+    ></div>
+
+    <div>
+      Outlier Layers:
+      <ul>
+        <li>
+          Fieldnotes 2020-2021: Pacific Science Field Operations, 14 sub layer, identify of northern polygon crash the layer.
+        </li>
+        <li>
+          Protected and conserved area - Heavy layer in 3879.
+        </li>
+        <li>
+          Canada Nature Fund for Aquatic Species at Risk (CNFASAR) - Heavy layer in 3857, plus no field define for uniqueValue symbology.
+        </li>
+      </ul>
+    </div>
+    <hr />
+
+    <script src="codedoc.js"></script>
+    <script>
+      // initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready
+      cgpv.init((mapId) => {
+          listenToLegendLayerSetChanges('HMap1-state', 'Map1');
+      });
+
+      function reloadMap() {
+        cgpv.api.maps['Map1'].setProjection(Number(document.getElementById('projections').value));
+      }
+
+      // create snippets
+      window.addEventListener('load', () => {
+        createCodeSnippet();
+        createConfigSnippet();
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/geoview-core/public/templates/outliers/outliers.html b/packages/geoview-core/public/templates/outliers/outliers.html
@@ -34,6 +34,7 @@ <h4>Performance Issue (Huge) Layers</h4>
       <a href="./outlier-ESRI-maxRecordCount.html">Max Record Count Layers</a><br />
       <a href="./outlier-GeoAI.html">GeoAI</a><br />
       <a href="./outlier-elections-2019.html">Elections 2019</a><br />
+      <a href="./outlier-performance.html">Many slow layers in different projection</a><br />
       <br />
     </div>
   </body>

diff --git a/packages/geoview-core/schema.json b/packages/geoview-core/schema.json
@@ -72,7 +72,8 @@
         "string",
         "number",
         "date",
-        "url"
+        "url",
+        "oid"
       ]
     },
     "TypeFeatureInfoNotQueryable": {

diff --git a/...c/api/config/types/classes/sub-layer-config/leaf/abstract-base-esri-layer-entry-config.ts b/...c/api/config/types/classes/sub-layer-config/leaf/abstract-base-esri-layer-entry-config.ts
@@ -165,16 +165,13 @@ export abstract class AbstractBaseEsriLayerEntryConfig extends AbstractBaseLayer
    *
    * @param {string} esriFieldType The ESRI field type.
    *
-   * @returns {'string' | 'date' | 'number'} The type of the field.
+   * @returns {'string' | 'date' | 'number' | 'oid'} The type of the field.
    * @static @private
    */
-  static #convertEsriFieldType(esriFieldType: string): 'string' | 'date' | 'number' {
+  static #convertEsriFieldType(esriFieldType: string): 'string' | 'date' | 'number' | 'oid' {
     if (esriFieldType === 'esriFieldTypeDate') return 'date';
-    if (
-      ['esriFieldTypeDouble', 'esriFieldTypeInteger', 'esriFieldTypeSingle', 'esriFieldTypeSmallInteger', 'esriFieldTypeOID'].includes(
-        esriFieldType
-      )
-    )
+    if (esriFieldType === 'esriFieldTypeOID') return 'oid';
+    if (['esriFieldTypeDouble', 'esriFieldTypeInteger', 'esriFieldTypeSingle', 'esriFieldTypeSmallInteger'].includes(esriFieldType))
       return 'number';
     return 'string';
   }

diff --git a/packages/geoview-core/src/api/config/types/config-validation-schema.json b/packages/geoview-core/src/api/config/types/config-validation-schema.json
@@ -1707,7 +1707,8 @@
         "string",
         "number",
         "date",
-        "url"
+        "url",
+        "oid"
       ]
     },
     "codedValueType": {

diff --git a/packages/geoview-core/src/api/config/types/map-schema-types.ts b/packages/geoview-core/src/api/config/types/map-schema-types.ts
@@ -500,7 +500,7 @@ export type TypeOutfields = {
 };
 
 /** The types supported by the outfields object. */
-export type TypeOutfieldsType = 'string' | 'date' | 'number' | 'url';
+export type TypeOutfieldsType = 'string' | 'date' | 'number' | 'url' | 'oid';
 
 export type codedValueType = {
   type: 'codedValue';

diff --git a/.../geoview-core/src/api/event-processors/event-processor-children/legend-event-processor.ts b/.../geoview-core/src/api/event-processors/event-processor-children/legend-event-processor.ts
@@ -639,6 +639,11 @@ export class LegendEventProcessor extends AbstractEventProcessor {
     const visibleValues = new Set(styleUnique.filter((style) => style.visible).map((style) => style.values.join(';')));
     const unvisibleValues = new Set(styleUnique.filter((style) => !style.visible).map((style) => style.values.join(';')));
 
+    // GV: Some esri layer has uniqueValue renderer but there is no field define in their metadata (i.e. e2424b6c-db0c-4996-9bc0-2ca2e6714d71).
+    // TODO: The fields contain undefined, it should be empty. Check in new config api
+    // TODO: This is a workaround
+    if (uniqueValueStyle.fields[0] === undefined) uniqueValueStyle.fields.pop();
+
     // Filter features based on visibility
     return features.filter((feature) => {
       const fieldValues = uniqueValueStyle.fields.map((field) => feature.fieldInfo[field]!.value).join(';');

diff --git a/packages/geoview-core/src/core/components/data-table/data-table.tsx b/packages/geoview-core/src/core/components/data-table/data-table.tsx
@@ -226,7 +226,7 @@ function DataTable({ data, layerPath, tableHeight = '500px' }: DataTableProps):
         header: value.alias,
         filterFn: 'contains',
         columnFilterModeOptions: ['contains', 'startsWith', 'endsWith', 'empty', 'notEmpty'],
-        ...(value.dataType === 'number' && {
+        ...((value.dataType === 'number' || value.dataType === 'oid') && {
           filterFn: 'between',
           columnFilterModeOptions: [
             'equals',
@@ -299,13 +299,15 @@ function DataTable({ data, layerPath, tableHeight = '500px' }: DataTableProps):
     async (feature: TypeFeatureInfoEntry) => {
       let { extent } = feature;
 
-      // If there is no extent, the layer is ESRI Dynamic, get the feature extent using its OBJECTID
-      // GV: Some layers do not use OBJECTID, these are the other values seen so far.
-      // TODO: Update field info types to include esriFieldTypeOID to identify the ID field.
-      const idFields = ['OBJECTID', 'OBJECTID_1', 'FID', 'STATION_NUMBER'];
-      const idField = idFields.find((fieldName) => feature.fieldInfo[fieldName]?.value !== undefined);
-      if (!extent && idField !== undefined)
-        extent = await getExtentFromFeatures(layerPath, [feature.fieldInfo[idField]!.value as string], idField);
+      // Get oid field
+      const oidField =
+        feature && feature.fieldInfo
+          ? Object.keys(feature.fieldInfo).find((key) => feature.fieldInfo[key]!.dataType === 'oid') || undefined
+          : undefined;
+
+      // If there is no extent, the layer is ESRI Dynamic, get the feature extent using its oid field
+      if (!extent && oidField !== undefined)
+        extent = await getExtentFromFeatures(layerPath, [feature.fieldInfo[oidField]!.value as string], oidField);
 
       if (extent) {
         // Project

diff --git a/packages/geoview-core/src/core/components/data-table/json-export-button.tsx b/packages/geoview-core/src/core/components/data-table/json-export-button.tsx
@@ -72,9 +72,14 @@ function JSONExportButton({ rows, features, layerPath }: JSONExportButtonProps):
       try {
         // Create a new promise that will resolved when features have been updated with their geometries
         return new Promise<TypeFeatureInfoEntry[]>((resolve, reject) => {
+          // Get oid field
+          const oidField = chunk[0].fieldInfo
+            ? Object.keys(chunk[0].fieldInfo).find((key) => chunk[0].fieldInfo[key]!.dataType === 'oid') || 'OBJECTID'
+            : 'OBJECTID';
+
           // Get the ids
           const objectids = chunk.map((record) => {
-            return record.geometry?.get('OBJECTID') as number;
+            return record.geometry?.get(oidField) as number;
           });
 
           // Query
@@ -83,7 +88,7 @@ function JSONExportButton({ rows, features, layerPath }: JSONExportButtonProps):
               // For each result
               results.forEach((result) => {
                 // Filter
-                const recFound = chunk.filter((record) => record.geometry?.get('OBJECTID') === result.fieldInfo?.OBJECTID?.value);
+                const recFound = chunk.filter((record) => record.geometry?.get(oidField) === result.fieldInfo[oidField]?.value);
 
                 // If found it
                 if (recFound && recFound.length === 1) {

diff --git a/packages/geoview-core/src/core/components/details/feature-info.tsx b/packages/geoview-core/src/core/components/details/feature-info.tsx
@@ -69,7 +69,7 @@ const FeatureHeader = memo(function FeatureHeader({ iconSrc, name, hasGeometry,
         <Tooltip title={t('details.keepFeatureSelected')} placement="top" enterDelay={1000}>
           <Checkbox disabled={!hasGeometry} onChange={onCheckChange} checked={checked} sx={sxClasses.selectFeatureCheckbox} />
         </Tooltip>
-        <IconButton color="primary" onClick={onZoomIn} className="buttonOutline">
+        <IconButton color="primary" disabled={!hasGeometry} onClick={onZoomIn} className="buttonOutline">
           <Tooltip title={t('details.zoomTo')} placement="top" enterDelay={1000}>
             <ZoomInSearchIcon />
           </Tooltip>
@@ -80,7 +80,7 @@ const FeatureHeader = memo(function FeatureHeader({ iconSrc, name, hasGeometry,
 });
 
 export function FeatureInfo({ feature }: FeatureInfoProps): JSX.Element | null {
-  logger.logTraceRender('components/details/feature-info');
+  logger.logTraceRender('components/details/feature-info', feature);
 
   // Hooks
   const theme = useTheme();
@@ -186,7 +186,7 @@ export function FeatureInfo({ feature }: FeatureInfoProps): JSX.Element | null {
       <FeatureHeader
         iconSrc={featureData.iconSrc}
         name={featureData.name}
-        hasGeometry={!!featureData.geometry}
+        hasGeometry={!!featureData.geometry && !!featureData.extent}
         checked={checked}
         onCheckChange={handleFeatureSelectedChange}
         onZoomIn={handleZoomIn}
-Original file line number
+Diff line change
@@ Expand Up / @@ -72,7 +72,8 @@ @@
             "string",
             "number",
             "date",
-            "url"
+            "url",
+            "oid"
           ]
         },
         "TypeFeatureInfoNotQueryable": {
@@ Expand Down @@