fix(plugins): button that does not disieapear (#2345)

* fix(appBap): Fix AppBar plugins buttons not visible Closes #2334 * more fixes * minor fix * fix geocore key * fix type * fix basemap osm and array --------- Co-authored-by: jolevesq <[email protected]>
Canadian-Geospatial-Platform · Jul 5, 2024 · 8818e4f · 8818e4f
1 parent 4e9a6f7
commit 8818e4f
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 46 deletions.
diff --git a/packages/geoview-aoi-panel/src/index.tsx b/packages/geoview-aoi-panel/src/index.tsx
@@ -48,7 +48,7 @@ class AoiPanelPlugin extends AppBarPlugin {
   override onCreateButtonProps(): TypeIconButtonProps {
     // Button props
     return {
-      id: `${this.pluginProps.mapId}-AoiPanelButton`,
+      id: `aoi-panel`,
       tooltip: 'AoiPanel.title',
       tooltipPlacement: 'right',
       children: <AoiIcon />,

diff --git a/packages/geoview-basemap-panel/src/basemap-panel.tsx b/packages/geoview-basemap-panel/src/basemap-panel.tsx
@@ -115,16 +115,16 @@ export function BasemapPanel(props: BaseMapPanelProps): JSX.Element {
     let name = '';
     let description = '';
 
-    if (basemapTypes.includes('transport')) {
+    if (basemapTypes.includes('osm')) {
+      name = getLocalizedMessage('basemapPanel.info.osm.name', language);
+    } else if (basemapTypes.includes('transport')) {
       name = getLocalizedMessage('basemapPanel.info.transport.name', language);
       description = getLocalizedMessage('basemapPanel.info.transport.description', language);
     } else if (basemapTypes.includes('simple')) {
       name = getLocalizedMessage('basemapPanel.info.simple.name', language);
     } else if (basemapTypes.includes('shaded')) {
       name = getLocalizedMessage('basemapPanel.info.shaded.name', language);
       description = getLocalizedMessage('basemapPanel.info.shaded.description', language);
-    } else if (basemapTypes.includes('osm')) {
-      name = getLocalizedMessage('basemapPanel.info.osm.name', language);
     } else if (basemapTypes.includes('nogeom')) {
       name = getLocalizedMessage('basemapPanel.info.nogeom.name', language);
     }

diff --git a/packages/geoview-basemap-panel/src/index.tsx b/packages/geoview-basemap-panel/src/index.tsx
@@ -96,7 +96,7 @@ class BasemapPanelPlugin extends AppBarPlugin {
   override onCreateButtonProps(): TypeIconButtonProps {
     // Button props
     return {
-      id: `${this.pluginProps.mapId}-basemapPanelButton`,
+      id: `basemap-panel`,
       tooltip: 'basemapPanel.title',
       tooltipPlacement: 'right',
       children: <MapIcon />,
@@ -121,10 +121,7 @@ class BasemapPanelPlugin extends AppBarPlugin {
   /**
    * Function called when the plugin is removed, used for clean up
    */
-  override onRemoved(): void {
-    // reset basemaps array
-    this.mapViewer().basemap.basemaps = [];
-  }
+  override onRemoved(): void {}
 }
 
 export default BasemapPanelPlugin;

diff --git a/packages/geoview-core/public/configs/loading-packages-config.json b/packages/geoview-core/public/configs/loading-packages-config.json
@@ -15,7 +15,15 @@
   "corePackages": [],
   "appBar": {
     "tabs": {
-      "core": ["basemap-panel", "aoi-panel"]
+      "core": ["geolocator",
+                "export",
+                "aoi-panel",
+                "guide",
+                "basemap-panel",
+                "details",
+                "legend",
+                "data-table",
+                "layers"]
     }
   }
 }
diff --git a/packages/geoview-core/public/configs/navigator/07-basic-appbar.json b/packages/geoview-core/public/configs/navigator/07-basic-appbar.json
@@ -5,7 +5,7 @@
       "projection": 3978
     },
     "basemapOptions": {
-      "basemapId": "osm",
+      "basemapId": "transport",
       "shaded": false,
       "labeled": false
     },

diff --git a/packages/geoview-core/public/configs/navigator/09-package-basemap-custom-basemap-panel.json b/packages/geoview-core/public/configs/navigator/09-package-basemap-custom-basemap-panel.json
@@ -15,11 +15,6 @@
           "shaded": true,
           "labeled": false
         },
-        {
-          "basemapId": "osm",
-          "shaded": true,
-          "labeled": false
-        },
         {
           "basemapId": "simple",
           "shaded": true,
@@ -97,11 +92,6 @@
           "shaded": true,
           "labeled": false
         },
-        {
-          "basemapId": "osm",
-          "shaded": true,
-          "labeled": false
-        },
         {
           "basemapId": "simple",
           "shaded": true,

diff --git a/packages/geoview-core/public/templates/default-config.html b/packages/geoview-core/public/templates/default-config.html
@@ -215,7 +215,7 @@ <h4 id="HLCONF5B">5.B. Load config from div params</h4>
       'components': ['overview-map'],
       'corePackages': []
     }" data-lang="en" data-geocore-keys="12acd145-626a-49eb-b850-0a59c9bc7506,ccc75c12-5acc-4a6a-959f-ef6f621147b9"
-    data-geocore-endpoint="https://geocore-stage.api.geo.ca"></div>
+    data-geocore-endpoint="https://geocore.api.geo.ca"></div>
   <p>
     This map loads it's configurations from the div parameters by providing a <strong>data-geocore-keys</strong> and
     optionally a

diff --git a/packages/geoview-core/src/api/config/types/config-constants.ts b/packages/geoview-core/src/api/config/types/config-constants.ts
@@ -219,7 +219,16 @@ export const CV_DEFAULT_LAYER_INITIAL_SETTINGS = {
 /**
  * Definition of the default order of the tabs inside appbar
  */
-export const CV_DEFAULT_APPBAR_TABS_ORDER = ['geolocator', 'legend', 'layers', 'details', 'data-table', 'guide'];
+export const CV_DEFAULT_APPBAR_TABS_ORDER = [
+  'geolocator',
+  'aoi-panel',
+  'legend',
+  'layers',
+  'details',
+  'data-table',
+  'basemap-panel',
+  'guide',
+];
 
 export const CV_DEFAULT_APPBAR_CORE = {
   GEOLOCATOR: 'geolocator',

diff --git a/packages/geoview-core/src/api/plugin/abstract-plugin.ts b/packages/geoview-core/src/api/plugin/abstract-plugin.ts
@@ -25,7 +25,7 @@ export abstract class AbstractPlugin {
   // Plugin properties
   pluginProps: TypePluginOptions;
 
-  // #region NOTE START
+  // GV NOTE START ****************************************************************************************************
   // The following attributes are attached, after instantiation, by the plugin loader addPlugin function ref 'Object.defineProperties'(!)
   // In this refactoring at the time of coding, I'm, simply, explicitely, writing them here so it's clear that this AbstractPlugin class has (and expects) those attributes.
   // See plugin.addPlugin function for more details.
@@ -47,7 +47,7 @@ export abstract class AbstractPlugin {
   // TODO: Refactor - Plugin - Maybe useTheme is not necessary here.. This might get removed eventually. Don't forget to remove in plugin class too in 'Object.defineProperties'(!)
   useTheme?: typeof useTheme;
 
-  // #region NOTE END
+  // GV NOTE END *****************************************************************************************************
 
   /**
    * Constructs a Plugin

diff --git a/packages/geoview-core/src/api/plugin/appbar-plugin.ts b/packages/geoview-core/src/api/plugin/appbar-plugin.ts
@@ -78,7 +78,7 @@ export abstract class AppBarPlugin extends AbstractPlugin {
     this.panelProps.content = this.onCreateContent();
 
     // Create a new button panel on the app-bar
-    this.buttonPanel = this.mapViewer().appBarApi.createAppbarPanel(this.buttonProps!, this.panelProps, null) || undefined;
+    this.buttonPanel = this.mapViewer().appBarApi.createAppbarPanel(this.buttonProps!, this.panelProps, this.buttonProps.id) || undefined;
   }
 
   /**
@@ -88,7 +88,7 @@ export abstract class AppBarPlugin extends AbstractPlugin {
     // If cgpv exists
     if (this.api && this.buttonPanel) {
       // Remove the app bar panel
-      this.mapViewer().appBarApi.removeAppbarPanel(this.buttonPanel.buttonPanelId);
+      this.mapViewer().appBarApi.removeAppbarPanel(this.buttonPanel.buttonPanelId, this.buttonProps!.id!);
     }
   }
 }
diff --git a/packages/geoview-core/src/app.tsx b/packages/geoview-core/src/app.tsx
@@ -104,9 +104,20 @@ async function getMapConfig(mapElement: Element): Promise<TypeMapFeaturesConfig>
     mapConfig = await api.configApi.getConfigFromUrl(urlParam);
   }
 
-  // TODO: inject 'data-geocore-keys' inside the config for later processing by the configAPI
-  // TO.DOCONT: This injectioon can be done in api.configApi.getMapConfig with optional parameter keys
-  // TO.DOCONT: This will return the listOfGeoviewLAyer with a new entry: {'geoviewLayerType': 'geoCore','geoviewLayerId': '21b821cf-0f1c-40ee-8925-eab12d357668'},
+  // inject 'data-geocore-keys' inside the config for later processing by the configAPI
+  if (mapElement.hasAttribute('data-geocore-keys')) {
+    const geocoreKeys = mapElement.getAttribute('data-geocore-keys')?.split(',');
+    geocoreKeys?.forEach((key: string) => {
+      // Create the geocore snippet as any because at this point it does not contain all the attributes for the type
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const layer: any = {
+        geoviewLayerType: 'geoCore',
+        geoviewLayerId: key,
+      };
+
+      mapConfig.map.listOfGeoviewLayerConfig.push(layer);
+    });
+  }
 
   // add the map display language and the map id to config (extend the MapFeatureConfig)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -149,11 +160,6 @@ async function renderMap(mapElement: Element): Promise<void> {
     return new Promise<void>((resolve) => {
       // TODO: Refactor #1810 - Activate <React.StrictMode> here or in app-start.tsx?
       reactRoot[mapId].render(<AppStart mapFeaturesConfig={configuration} onMapViewerInit={(): void => resolve()} />);
-      // reactRoot[mapId].render(
-      //   <React.StrictMode>
-      //     <AppStart mapFeaturesConfig={configObj} />
-      //   </React.StrictMode>
-      // );
     });
   }
 

diff --git a/packages/geoview-core/src/core/app-start.tsx b/packages/geoview-core/src/core/app-start.tsx
@@ -86,7 +86,6 @@ function AppStart(props: AppStartProps): JSX.Element {
       onMapViewerInit?.(mapViewer);
     });
 
-    // TODO: Refactor #1810 - Activate <React.StrictMode> here or in app.tsx?
     return (
       <I18nextProvider i18n={i18nInstance}>
         <MapContext.Provider value={mapContextValue}>

diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar-api.ts b/packages/geoview-core/src/core/components/app-bar/app-bar-api.ts
@@ -4,6 +4,7 @@ import { TypeIconButtonProps } from '@/ui/icon-button/icon-button-types';
 import { generateId } from '@/core/utils/utilities';
 import EventHelper, { EventDelegateBase } from '@/api/events/event-helper';
 import { UIEventProcessor } from '@/api/event-processors/event-processor-children/ui-event-processor';
+import { logger } from '@/core/utils/logger';
 
 /**
  * Class to manage buttons on the app-bar
@@ -200,18 +201,19 @@ export class AppBarApi {
    * Removes an app-bar panel using an id
    *
    * @param {string} buttonPanelId - The id of the panel to remove
+   * @param {string} group - The button group name to delete from
    */
-  removeAppbarPanel(buttonPanelId: string): void {
-    // loop through groups of app-bar button panels
-    Object.keys(this.buttons).forEach((groupName) => {
-      const group = this.buttons[groupName];
-
+  removeAppbarPanel(buttonPanelId: string, group: string): void {
+    try {
       // delete the panel from the group
-      delete group[buttonPanelId];
+      delete this.buttons[group][buttonPanelId];
 
       // trigger an event that a panel has been removed to update the state and re-render
-      this.#emitAppBarRemoved({ buttonPanelId, group: groupName });
-    });
+      this.#emitAppBarRemoved({ buttonPanelId, group });
+    } catch (error) {
+      // Log
+      logger.logError(`Failed to get app bar panel button ${group}/${buttonPanelId}`);
+    }
   }
 
   /**

diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
@@ -185,7 +185,6 @@ export function AppBar(props: AppBarProps): JSX.Element {
       setButtonPanelGroups((prevState) => {
         return {
           ...prevState,
-          ...buttonPanelGroups,
           [event.group]: {
             ...buttonPanelGroups[event.group],
             [event.buttonPanelId]: event.buttonPanel,
@@ -339,7 +338,7 @@ export function AppBar(props: AppBarProps): JSX.Element {
    */
   const { topGroupNames, bottomGroupNames } = useMemo(() => {
     // Log
-    logger.logTraceUseMemo('APP-BAR - panels');
+    logger.logTraceUseMemo('APP-BAR - panels reorder buttons');
 
     let buttonPanelGroupNames = Object.keys(buttonPanelGroups);
     buttonPanelGroupNames = enforceArrayOrder(buttonPanelGroupNames, CV_DEFAULT_APPBAR_TABS_ORDER);