core(build): Upgrade to ol 9 and latest mui (#1886)

* core(build): Upgrade to ol 9 and latest mui Closes #1766 * fix comment --------- Co-authored-by: Johann Levesque <[email protected]>
Canadian-Geospatial-Platform · Mar 1, 2024 · d8e420f · d8e420f
1 parent 009ab01
commit d8e420f
Show file tree

Hide file tree

Showing 18 changed files with 100 additions and 115 deletions.
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/geoview-core/package.json b/packages/geoview-core/package.json
@@ -48,11 +48,11 @@
   "dependencies": {
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/base": "5.0.0-beta.24",
-    "@mui/icons-material": "^5.14.6",
-    "@mui/material": "^5.14.6",
-    "@mui/styles": "^5.14.6",
-    "@mui/system": "^5.14.6",
+    "@mui/base": "5.0.0-beta.37",
+    "@mui/icons-material": "^5.15.11",
+    "@mui/material": "^5.15.11",
+    "@mui/styles": "^5.15.11",
+    "@mui/system": "^5.15.11",
     "@nieuwlandgeo/sldreader": "^0.3.1",
     "@mui/x-date-pickers": "^6.13.0",
     "ajv": "^8.12.0",
@@ -69,9 +69,9 @@
     "linkify-html": "^4.1.1",
     "linkifyjs": "^4.1.0",
     "lodash": "^4.17.21",
-    "material-react-table": "~2.4.1",
-    "ol": "^8.1.0",
-    "ol-mapbox-style": "^12.0.0",
+    "material-react-table": "~2.12.1",
+    "ol": "^9.0.0",
+    "ol-mapbox-style": "^12.2.1",
     "proj4": "^2.7.5",
     "prop-types": "^15.8.1",
     "query-string": "^7.1.0",
@@ -116,8 +116,8 @@
     "@babel/runtime-corejs3": "^7.17.0",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.6",
-    "@mui/material": "^5.14.6",
+    "@mui/icons-material": "^5.15.11",
+    "@mui/material": "^5.15.11",
     "@types/create-react-class": "^15.6.3",
     "@types/flux": "^3.1.11",
     "@types/glob": "^7.2.0",

diff --git a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
@@ -1116,10 +1116,10 @@ export function AddNewLayer(): JSX.Element {
                     value={layerType}
                     onChange={handleSelectType}
                     label={t('layers.service')}
+                    variant="standard"
                     inputLabel={{
                       id: 'service-type-label',
                     }}
-                    variant="standard"
                     menuItems={layerOptions.map(([value, label]) => ({
                       key: value,
                       item: {

diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
@@ -63,7 +63,7 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
   useEffect(() => {
     // Log
     logger.logTraceUseEffect('LAYER DETAILS', selectedLayer, layerDetails);
-
+    // TODO: refactor - remove timer!
     // Reason for timer:- when layer detail component is loaded, behind the scene we send query to fetch the features.
     // After component is rendered and fetching features is done, eventhough store is update, it never re rendered this component
     // thats why we need to update the state so that layers data is fetched again from store.

diff --git a/.../geoview-core/src/core/utils/config/validationClasses/abstract-base-layer-entry-config.ts b/.../geoview-core/src/core/utils/config/validationClasses/abstract-base-layer-entry-config.ts
@@ -2,6 +2,7 @@
 // ? we escape all private attribute in this file
 import BaseLayer from 'ol/layer/Base';
 import LayerGroup from 'ol/layer/Group';
+
 import {
   ConfigBaseClass,
   TypeBaseSourceVectorInitialConfig,
@@ -72,22 +73,28 @@ export abstract class AbstractBaseLayerEntryConfig extends ConfigBaseClass {
       if (loadEndListenerType) {
         let loadErrorListener: () => void;
 
+        // TODO: Can we manage this in callback or promises?
+        // migration to OpenLayers 9.0.0 seems to restrict access to key elements
         // Definition of the load end listener functions
         const loadEndListener = () => {
           this.loadedFunction();
           this.geoviewLayerInstance!.setLayerPhase('loaded', this.layerPath);
           this.layerStatus = 'loaded';
-          this._olLayer!.get('source').un(`${loadEndListenerType}loaderror`, loadErrorListener);
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (this._olLayer! as any).get('source').un(`${loadEndListenerType}loaderror`, loadErrorListener);
         };
 
         loadErrorListener = () => {
           this.layerStatus = 'error';
-          this._olLayer!.get('source').un(`${loadEndListenerType}loadend`, loadEndListener);
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (this._olLayer! as any).get('source').un(`${loadEndListenerType}loadend`, loadEndListener);
         };
 
         // Activation of the load end listeners
-        this._olLayer!.get('source').once(`${loadEndListenerType}loaderror`, loadErrorListener);
-        this._olLayer!.get('source').once(`${loadEndListenerType}loadend`, loadEndListener);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this._olLayer! as any).get('source').once(`${loadEndListenerType}loaderror`, loadErrorListener);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this._olLayer! as any).get('source').once(`${loadEndListenerType}loadend`, loadEndListener);
       } else logger.logError(`Provision of a load end listener type is mandatory for layer path "${this.layerPath}".`);
     }
   }

diff --git a/packages/geoview-core/src/geo/layer/geometry/geometry.ts b/packages/geoview-core/src/geo/layer/geometry/geometry.ts
@@ -449,7 +449,7 @@ export class Geometry {
     geometryGroupId: string,
     options?: {
       vectorLayerOptions?: VectorLayerOptions<VectorSource>;
-      vectorSourceOptions?: VectorSourceOptions;
+      vectorSourceOptions?: VectorSourceOptions<Feature>;
     }
   ): FeatureCollection {
     const geometryGroupOptions = options || {};

diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/raster/vector-tiles.ts b/packages/geoview-core/src/geo/layer/geoview-layers/raster/vector-tiles.ts
@@ -11,6 +11,7 @@ import { Extent } from 'ol/extent';
 
 import olms, { applyStyle } from 'ol-mapbox-style';
 
+import Feature from 'ol/Feature';
 import { AbstractGeoViewLayer, CONST_LAYER_TYPES } from '@/geo/layer/geoview-layers/abstract-geoview-layers';
 import { AbstractGeoViewRaster, TypeBaseRasterLayer } from '@/geo/layer/geoview-layers/raster/abstract-geoview-raster';
 import {
@@ -156,7 +157,7 @@ export class VectorTiles extends AbstractGeoViewRaster {
     super.processOneLayerEntry(layerConfig);
     const { layerPath } = layerConfig;
     this.setLayerPhase('processOneLayerEntry', layerPath);
-    const sourceOptions: SourceOptions = {
+    const sourceOptions: SourceOptions<Feature> = {
       url: getLocalizedValue(layerConfig.source.dataAccessPath, this.mapId),
     };
 

diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/vector/abstract-geoview-vector.ts b/packages/geoview-core/src/geo/layer/geoview-layers/vector/abstract-geoview-vector.ts
@@ -107,7 +107,7 @@ export abstract class AbstractGeoViewVector extends AbstractGeoViewLayer {
    */
   protected createVectorSource(
     layerConfig: AbstractBaseLayerEntryConfig,
-    sourceOptions: SourceOptions = {},
+    sourceOptions: SourceOptions<Feature> = {},
     readOptions: ReadOptions = {}
   ): VectorSource<Feature> {
     const { layerPath } = layerConfig;

diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/vector/csv.ts b/packages/geoview-core/src/geo/layer/geoview-layers/vector/csv.ts
@@ -282,7 +282,7 @@ export class CSV extends AbstractGeoViewVector {
    */
   protected createVectorSource(
     layerConfig: AbstractBaseLayerEntryConfig,
-    sourceOptions: SourceOptions = {},
+    sourceOptions: SourceOptions<Feature> = {},
     readOptions: ReadOptions = {}
   ): VectorSource<Feature> {
     readOptions.dataProjection = (layerConfig.source as TypeBaseSourceVectorInitialConfig).dataProjection;

diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/vector/esri-feature.ts b/packages/geoview-core/src/geo/layer/geoview-layers/vector/esri-feature.ts
@@ -219,7 +219,7 @@ export class EsriFeature extends AbstractGeoViewVector {
    */
   protected createVectorSource(
     layerConfig: AbstractBaseLayerEntryConfig,
-    sourceOptions: SourceOptions = {},
+    sourceOptions: SourceOptions<Feature> = {},
     readOptions: ReadOptions = {}
   ): VectorSource<Feature> {
     // ? The line below uses var because a var declaration has a wider scope than a let declaration.

diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/vector/geojson.ts b/packages/geoview-core/src/geo/layer/geoview-layers/vector/geojson.ts
@@ -206,7 +206,7 @@ export class GeoJSON extends AbstractGeoViewVector {
    */
   protected createVectorSource(
     layerConfig: AbstractBaseLayerEntryConfig,
-    sourceOptions: SourceOptions = {},
+    sourceOptions: SourceOptions<Feature> = {},
     readOptions: ReadOptions = {}
   ): VectorSource<Feature> {
     readOptions.dataProjection = (layerConfig.source as TypeBaseSourceVectorInitialConfig).dataProjection;

diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/vector/geopackage.ts b/packages/geoview-core/src/geo/layer/geoview-layers/vector/geopackage.ts
@@ -257,7 +257,7 @@ export class GeoPackage extends AbstractGeoViewVector {
    */
   protected extractGeopackageData(
     layerConfig: AbstractBaseLayerEntryConfig,
-    sourceOptions: SourceOptions = {},
+    sourceOptions: SourceOptions<Feature> = {},
     readOptions: ReadOptions = {}
   ): Promise<[layerData[], sldsInterface]> {
     const promisedGeopackageData = new Promise<[layerData[], sldsInterface]>((resolve) => {

diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/vector/ogc-feature.ts b/packages/geoview-core/src/geo/layer/geoview-layers/vector/ogc-feature.ts
@@ -300,7 +300,7 @@ export class OgcFeature extends AbstractGeoViewVector {
    */
   protected createVectorSource(
     layerConfig: AbstractBaseLayerEntryConfig,
-    sourceOptions: SourceOptions = {},
+    sourceOptions: SourceOptions<Feature> = {},
     readOptions: ReadOptions = {}
   ): VectorSource<Feature> {
     readOptions.dataProjection = (layerConfig.source as TypeBaseSourceVectorInitialConfig).dataProjection;

diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/vector/wfs.ts b/packages/geoview-core/src/geo/layer/geoview-layers/vector/wfs.ts
@@ -352,7 +352,7 @@ export class WFS extends AbstractGeoViewVector {
    */
   protected createVectorSource(
     layerConfig: AbstractBaseLayerEntryConfig,
-    sourceOptions: SourceOptions = {},
+    sourceOptions: SourceOptions<Feature> = {},
     readOptions: ReadOptions = {}
   ): VectorSource<Feature> {
     readOptions.dataProjection = (layerConfig.source as TypeBaseSourceVectorInitialConfig).dataProjection;

diff --git a/packages/geoview-core/src/ui/tabs/tabs.tsx b/packages/geoview-core/src/ui/tabs/tabs.tsx
@@ -213,12 +213,12 @@ export function Tabs(props: TypeTabsProps): JSX.Element {
                 formControlProps={{ size: 'small' }}
                 id="footerBarDropdown"
                 fullWidth
+                variant="standard"
                 inputLabel={{ id: 'footerBarDropdownLabel' }}
                 menuItems={mobileTabsDropdownValues}
                 value={value}
                 onChange={(e: SelectChangeEvent<unknown>) => updateTabPanel(e.target.value as number)}
                 MenuProps={{ container: mapElem }}
-                variant="outlined"
               />
             </Box>
           )}

diff --git a/packages/geoview-geochart/package.json b/packages/geoview-geochart/package.json
@@ -16,7 +16,7 @@
     "lodash": "^4.17.21",
     "geoview-core": "workspace:~0.1.0",
     "geochart": "Canadian-Geospatial-Platform/geochart#develop",
-    "@mui/material": "^5.14.6"
+    "@mui/material": "^5.15.11"
   },
   "devDependencies": {
     "@babel/core": "^7.17.0",

diff --git a/packages/geoview-swiper/package.json b/packages/geoview-swiper/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "geoview-core": "workspace:~0.1.0",
     "lodash": "^4.17.21",
-    "ol": "^8.1.0",
+    "ol": "^9.0.0",
     "react-draggable": "^4.4.5"
   },
   "devDependencies": {

diff --git a/packages/geoview-time-slider/package.json b/packages/geoview-time-slider/package.json
@@ -11,7 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "geoview-core": "workspace:~0.1.0",
-    "@mui/material": "^5.14.6"
+    "@mui/material": "^5.15.11"
   },
   "devDependencies": {
     "@babel/core": "^7.17.0",