From 8818e4fef64952b390b25660c9c161608fd92d69 Mon Sep 17 00:00:00 2001 From: Johann Levesque Date: Fri, 5 Jul 2024 15:32:00 -0400 Subject: [PATCH] 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 --- packages/geoview-aoi-panel/src/index.tsx | 2 +- .../src/basemap-panel.tsx | 6 ++--- packages/geoview-basemap-panel/src/index.tsx | 7 ++---- .../configs/loading-packages-config.json | 10 ++++++++- .../configs/navigator/07-basic-appbar.json | 2 +- ...-package-basemap-custom-basemap-panel.json | 10 --------- .../public/templates/default-config.html | 2 +- .../src/api/config/types/config-constants.ts | 11 +++++++++- .../src/api/plugin/abstract-plugin.ts | 4 ++-- .../src/api/plugin/appbar-plugin.ts | 4 ++-- packages/geoview-core/src/app.tsx | 22 ++++++++++++------- packages/geoview-core/src/core/app-start.tsx | 1 - .../core/components/app-bar/app-bar-api.ts | 18 ++++++++------- .../src/core/components/app-bar/app-bar.tsx | 3 +-- 14 files changed, 56 insertions(+), 46 deletions(-) diff --git a/packages/geoview-aoi-panel/src/index.tsx b/packages/geoview-aoi-panel/src/index.tsx index c12c881bcae..31cb28f3783 100644 --- 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: , diff --git a/packages/geoview-basemap-panel/src/basemap-panel.tsx b/packages/geoview-basemap-panel/src/basemap-panel.tsx index f156d01be62..c37b7d0090e 100644 --- a/packages/geoview-basemap-panel/src/basemap-panel.tsx +++ b/packages/geoview-basemap-panel/src/basemap-panel.tsx @@ -115,7 +115,9 @@ 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')) { @@ -123,8 +125,6 @@ export function BasemapPanel(props: BaseMapPanelProps): JSX.Element { } 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 index 20aa9be177e..bf7de38d86b 100644 --- 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: , @@ -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 index a95ba7d8cf1..3ff09388541 100644 --- 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 index 202b581938c..dd2b8c3ab12 100644 --- 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 index d153e7c9fcb..26d3bedb1b6 100644 --- 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 index fafb61f2e91..9c076e873af 100644 --- a/packages/geoview-core/public/templates/default-config.html +++ b/packages/geoview-core/public/templates/default-config.html @@ -215,7 +215,7 @@

5.B. Load config from div params

'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"> + data-geocore-endpoint="https://geocore.api.geo.ca">

This map loads it's configurations from the div parameters by providing a data-geocore-keys 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 index c522be8c410..a4708262d85 100644 --- 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 index 874bef58202..3f01f7475a4 100644 --- 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 index da66f166ed8..fb9d415a93e 100644 --- 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 index 5264342f0d8..809b3c082f7 100644 --- a/packages/geoview-core/src/app.tsx +++ b/packages/geoview-core/src/app.tsx @@ -104,9 +104,20 @@ async function getMapConfig(mapElement: Element): Promise 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 { return new Promise((resolve) => { // TODO: Refactor #1810 - Activate here or in app-start.tsx? reactRoot[mapId].render( resolve()} />); - // reactRoot[mapId].render( - // - // - // - // ); }); } diff --git a/packages/geoview-core/src/core/app-start.tsx b/packages/geoview-core/src/core/app-start.tsx index 26ca26ded2e..418265f77ab 100644 --- 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 here or in app.tsx? return ( 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 index 5b181869c39..66990007632 100644 --- 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 index d04e6a23aa1..9ca15a5aff4 100644 --- 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);