feat(performance): changed featureIcon to data URL at creation

Closes Canadian-Geospatial-Platform#2719
DamonU2 · Feb 6, 2025 · 8618c94 · 8618c94
1 parent e70bcab
commit 8618c94
Show file tree

Hide file tree

Showing 9 changed files with 10 additions and 21 deletions.
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
@@ -363,14 +363,7 @@ function DataTable({ data, layerPath, tableHeight = '500px' }: DataTableProps):
 
     return (filterArray ?? []).map((feature) => {
       const featureInfo = {
-        ICON: (
-          <Box
-            component="img"
-            alt={feature?.nameField ?? ''}
-            src={feature.featureIcon.toDataURL('image/webp', 0.5)}
-            className="layer-icon"
-          />
-        ),
+        ICON: <Box component="img" alt={feature?.nameField ?? ''} src={feature.featureIcon} className="layer-icon" />,
         ZOOM: (
           <IconButton
             color="primary"

diff --git a/packages/geoview-core/src/core/components/details/feature-detail-modal.tsx b/packages/geoview-core/src/core/components/details/feature-detail-modal.tsx
@@ -67,7 +67,7 @@ export default function FeatureDetailModal(): JSX.Element {
       <DialogTitle>{t('details.featureDetailModalTitle')}</DialogTitle>
       <DialogContent>
         <Box display="flex" flexDirection="row" alignItems="center" pb={10}>
-          <Box component="img" alt={feature?.nameField ?? ''} src={feature.featureIcon.toDataURL().toString()} className="layer-icon" />
+          <Box component="img" alt={feature?.nameField ?? ''} src={feature.featureIcon} className="layer-icon" />
           <Typography sx={{ display: 'inline-block' }} component="div">
             {nameFieldValue}
           </Typography>

diff --git a/packages/geoview-core/src/core/components/details/feature-info.tsx b/packages/geoview-core/src/core/components/details/feature-info.tsx
@@ -100,7 +100,7 @@ export function FeatureInfo({ feature }: FeatureInfoProps): JSX.Element | null {
 
     return {
       uid: feature.geometry ? (feature.geometry as TypeGeometry).ol_uid : null,
-      iconSrc: feature.featureIcon.toDataURL(),
+      iconSrc: feature.featureIcon,
       name: feature.nameField ? (feature.fieldInfo?.[feature.nameField]?.value as string) || '' : 'No name',
       extent: feature.extent,
       geometry: feature.geometry,

diff --git a/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx b/packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx
@@ -82,7 +82,7 @@ export const HoverTooltip = memo(function HoverTooltip(): JSX.Element | null {
     return {
       content: {
         value: (hoverFeatureInfo.fieldInfo?.value as string) || '',
-        icon: hoverFeatureInfo.featureIcon ? hoverFeatureInfo.featureIcon.toDataURL() : '',
+        icon: hoverFeatureInfo.featureIcon ? hoverFeatureInfo.featureIcon : '',
       },
       isVisible: true,
     };

diff --git a/...ages/geoview-core/src/core/stores/store-interface-and-intial-values/feature-info-state.ts b/...ages/geoview-core/src/core/stores/store-interface-and-intial-values/feature-info-state.ts
@@ -162,7 +162,7 @@ export type TypeFeatureInfoResultSet = TypeResultSet<TypeFeatureInfoResultSetEnt
 export type TypeHoverFeatureInfo =
   | {
       geoviewLayerType: TypeGeoviewLayerType;
-      featureIcon: HTMLCanvasElement;
+      featureIcon: string;
       fieldInfo: TypeFieldEntry | undefined;
       nameField: string | null;
     }

diff --git a/packages/geoview-core/src/geo/layer/gv-layers/abstract-gv-layer.ts b/packages/geoview-core/src/geo/layer/gv-layers/abstract-gv-layer.ts
@@ -584,7 +584,7 @@ export abstract class AbstractGVLayer extends AbstractBaseLayer {
           geoviewLayerType: this.getLayerConfig().geoviewLayerConfig.geoviewLayerType as TypeGeoviewLayerType,
           extent,
           geometry: feature,
-          featureIcon: canvas,
+          featureIcon: canvas.toDataURL(),
           fieldInfo: {},
           nameField: layerConfig?.source?.featureInfo?.nameField || null,
         };

diff --git a/packages/geoview-core/src/geo/layer/gv-layers/raster/gv-wms.ts b/packages/geoview-core/src/geo/layer/gv-layers/raster/gv-wms.ts
@@ -461,7 +461,7 @@ export class GVWMS extends AbstractGVRaster {
       geoviewLayerType: CONST_LAYER_TYPES.WMS,
       extent: [clickCoordinate[0], clickCoordinate[1], clickCoordinate[0], clickCoordinate[1]],
       geometry: null,
-      featureIcon: document.createElement('canvas'),
+      featureIcon: document.createElement('canvas').toDataURL(),
       fieldInfo: {},
       nameField: null,
     };

diff --git a/packages/geoview-core/src/geo/map/feature-highlight.ts b/packages/geoview-core/src/geo/map/feature-highlight.ts
@@ -154,8 +154,6 @@ export class FeatureHighlight {
       const featureUid = getUid(feature.geometry);
       this.#styleHighlightedFeature(newFeature, featureUid);
     } else if (geometry instanceof MultiPoint) {
-      const { height, width } = feature.featureIcon;
-      const radius = Math.min(height, width) / 2 - 2 < 7 ? 7 : Math.min(height, width) / 2 - 2;
       const coordinates: Coordinate[] = geometry.getCoordinates();
       const featureUid = getUid(feature.geometry);
 
@@ -166,7 +164,7 @@ export class FeatureHighlight {
         this.#styleHighlightedFeature(newFeature, id);
         const radStyle = new Style({
           image: new CircleStyle({
-            radius,
+            radius: 10,
             stroke: new Stroke({ color: this.#highlightColor, width: 1.25 }),
             fill: this.#highlightFill,
           }),
@@ -184,16 +182,14 @@ export class FeatureHighlight {
         this.#styleHighlightedFeature(newFeature, id);
       }
     } else if (feature.extent) {
-      const { height, width } = feature.featureIcon;
-      const radius = Math.min(height, width) / 2 - 2 < 7 ? 7 : Math.min(height, width) / 2 - 2;
       const center = getCenter(feature.extent);
       const newPoint = new Point(center);
       const newFeature = new Feature(newPoint);
       const featureUid = getUid(feature.geometry);
       this.#styleHighlightedFeature(newFeature, featureUid);
       const radStyle = new Style({
         image: new CircleStyle({
-          radius,
+          radius: 10,
           stroke: new Stroke({ color: this.#highlightColor, width: 1.25 }),
           fill: this.#highlightFill,
         }),

diff --git a/packages/geoview-core/src/geo/map/map-schema-types.ts b/packages/geoview-core/src/geo/map/map-schema-types.ts
@@ -219,7 +219,7 @@ export type TypeFeatureInfoEntry = {
   geoviewLayerType: TypeGeoviewLayerType;
   extent: Extent | undefined;
   geometry: TypeGeometry | Feature | null;
-  featureIcon: HTMLCanvasElement;
+  featureIcon: string;
   fieldInfo: Partial<Record<string, TypeFieldEntry>>;
   nameField: string | null;
 };