Merge pull request Canadian-Geospatial-Platform#1712 from Alex-NRCan/…

…feat-corepackages

[FIX] plugins simplification and usage of app-bar for plugins (Canadian-Geospatial-Platform#1712)

packages/geoview-core/public/configs/loading-packages-config.json

@@ -14,6 +14,11 @@
   },
   "theme": "dark",
   "components": ["north-arrow", "overview-map"],
-  "corePackages": ["basemap-panel"],
+  "corePackages": [],
+  "appBarTabs": {
+    "tabs": {
+      "core": ["basemap-panel"]
+    }
+  },
   "suportedLanguages": ["en"]
 }

packages/geoview-core/public/configs/package-bp1-lcc-config.json

@@ -12,7 +12,12 @@
       "labeled": true
     }
   },
-  "corePackages": ["basemap-panel"],
+  "corePackages": [],
+  "appBarTabs": {
+    "tabs": {
+      "core": ["basemap-panel"]
+    }
+  },
   "components": ["overview-map", "north-arrow"],
   "theme": "dark",
   "suportedLanguages": ["en", "fr"]

packages/geoview-core/public/configs/package-bp2-wm-config.json

@@ -12,7 +12,12 @@
       "labeled": true
     }
   },
-  "corePackages": ["basemap-panel"],
+  "corePackages": [],
+  "appBarTabs": {
+    "tabs": {
+      "core": ["basemap-panel"]
+    }
+  },
   "components": ["north-arrow", "overview-map"],
   "theme": "dark",
   "suportedLanguages": ["en", "fr"]

packages/geoview-core/public/configs/package-footer-panel-geochart-map1-config.json

@@ -149,9 +149,7 @@
       ]
     }
   },
-  "corePackages": [
-    "geochart"
-  ],
+  "corePackages": [],
   "suportedLanguages": [
     "en",
     "fr"

packages/geoview-core/public/configs/package-footer-panel-geochart-map2-config.json

@@ -145,9 +145,7 @@
       "core": ["legend", "layers", "details", "geochart"]
     }
   },
-  "corePackages": [
-    "geochart"
-  ],
+  "corePackages": [],
   "suportedLanguages": [
     "en",
     "fr"

packages/geoview-core/public/configs/package-geochart-map1-config.json

@@ -110,6 +110,11 @@
     ]
   },
   "theme": "dark",
-  "corePackages": ["geochart"],
+  "corePackages": [],
+  "footerTabs": {
+    "tabs": {
+      "core": ["geochart"]
+    }
+  },
   "suportedLanguages": ["en", "fr"]
 }

packages/geoview-core/public/configs/package-geochart-map2-config.json

@@ -110,6 +110,11 @@
     ]
   },
   "theme": "light",
-  "corePackages": ["geochart"],
+  "corePackages": [],
+  "footerTabs": {
+    "tabs": {
+      "core": ["geochart"]
+    }
+  },
   "suportedLanguages": ["en", "fr"]
 }

packages/geoview-core/public/configs/package-swiper-config.json

@@ -25,6 +25,11 @@
   },
   "theme": "light",
   "components": ["north-arrow", "overview-map"],
+  "appBarTabs": {
+    "tabs": {
+      "core": ["basemap-panel"]
+    }
+  },
   "corePackages": ["swiper"],
   "externalPackages": [],
   "suportedLanguages": ["en"]

packages/geoview-core/public/configs/package-time-slider-config.json

@@ -64,7 +64,7 @@
       "core": ["legend", "layers", "details", "data-table", "time-slider"]
     }
   },
-  "corePackages": ["time-slider"],
+  "corePackages": [],
   "externalPackages": [],
   "suportedLanguages": ["en"]
 }

packages/geoview-core/public/configs/package-time-slider2-config.json

@@ -64,7 +64,7 @@
       "core": ["legend", "layers", "details", "time-slider"]
     }
   },
-  "corePackages": ["time-slider"],
+  "corePackages": [],
   "externalPackages": [],
   "suportedLanguages": ["en"]
 }

packages/geoview-core/public/configs/raw-data-table.json

@@ -133,7 +133,6 @@
       "core": ["legend", "layers", "details", "data-table"]
     }
   },
-  "corePackages": [],
   "externalPackages": [],
   "suportedLanguages": [
     "fr",

packages/geoview-core/public/configs/sample-config.json

@@ -117,7 +117,12 @@
   },
   "theme": "dark",
   "components": ["north-arrow", "overview-map"],
-  "corePackages": ["basemap-panel"],
+  "corePackages": [],
+  "appBarTabs": {
+    "tabs": {
+      "core": ["basemap-panel"]
+    }
+  },
   "externalPackages": [],
   "serviceUrls": {
     "keys": "https://geocore.api.geo.ca"

packages/geoview-core/schema.json

@@ -1576,6 +1576,63 @@
         "tabs"
       ]
     },
+    "TypeAppBarTabsProps": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "tabs": {
+          "type": "object",
+          "description": "Available tabs",
+          "properties": {
+            "core": {
+              "type": "array",
+              "items": {
+                "type": "string",
+                "enum": [
+                  "basemap-panel",
+                  "layers",
+                  "geochart"
+                ]
+              },
+              "minItems": 1,
+              "default": [],
+              "uniqueItems": true,
+              "description": "Default core tabs of app-bar to use"
+            },
+            "custom": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "id": {
+                    "type": "string"
+                  },
+                  "defaultTabs": {
+                    "type": "string"
+                  },
+                  "contentHTML": {
+                    "type": "string"
+                  }
+                }
+              },
+              "minItems": 0,
+              "default": [],
+              "uniqueItems": true,
+              "description": "Custom tabs of app-bar to use"
+            }
+          },
+          "additionalProperties": false
+        },
+        "collapsed": {
+          "type": "boolean",
+          "default": false,
+          "description": "State of app-bar when map is loaded (expanded or collapsed)"
+        }
+      },
+      "required": [
+        "tabs"
+      ]
+    },
     "TypeOverviewMapProps": {
       "type": "object",
       "additionalProperties": false,
@@ -1696,6 +1753,9 @@
         "footerTabs": {
           "$ref": "#/definitions/TypeFooterTabsProps"
         },
+        "appBarTabs": {
+          "$ref": "#/definitions/TypeAppBarTabsProps"
+        },
         "overviewMap": {
           "$ref": "#/definitions/TypeOverviewMapProps"
         },

packages/geoview-core/src/api/event-processors/index.ts

@@ -19,7 +19,8 @@ export function initializeEventProcessors(store: GeoviewStoreType) {
   mapEventProcessor.onInitialize(store);
 
   // package stores, only create if needed
-  if (store.getState().mapConfig!.corePackages?.includes('time-slider')) timeSliderEventProcessor.onInitialize(store);
+  // TODO: Change this check for something more generic that checks in appBarTabs too
+  if (store.getState().mapConfig!.footerTabs?.tabs.core.includes('time-slider')) timeSliderEventProcessor.onInitialize(store);
 }
 
 export function destroyEventProcessors(store: GeoviewStoreType) {
@@ -30,5 +31,6 @@ export function destroyEventProcessors(store: GeoviewStoreType) {
   mapEventProcessor.onDestroy(store);
 
   // package stores, only destroy if created
-  if (store.getState().mapConfig!.corePackages?.includes('time-slider')) timeSliderEventProcessor.onDestroy(store);
+  // TODO: Change this check for something more generic that checks in appBarTabs too
+  if (store.getState().mapConfig!.footerTabs?.tabs.core.includes('time-slider')) timeSliderEventProcessor.onDestroy(store);
 }

packages/geoview-core/src/api/plugin/plugin.ts

@@ -12,9 +12,7 @@ import { whenThisThen, showError } from '@/core/utils/utilities';
 import { api } from '@/app';
 import { AbstractPlugin } from './abstract-plugin';
 import { TypePluginStructure } from './plugin-types';
-import { toJsonObject, TypeJsonObject, TypeJsonValue } from '@/core/types/global-types';
-import { UIEventProcessor } from '../event-processors/event-processor-children/ui-event-processor';
-import { logger } from '@/core/utils/logger';
+import { TypeJsonObject, TypeJsonValue } from '@/core/types/global-types';
 
 /**
  * Class to manage plugins
@@ -208,16 +206,9 @@ export class Plugin {
    * @param {string} mapId the map id to remove the plugin from
    */
   removePlugin = (pluginId: string, mapId: string): void => {
-    if (mapId) {
-      if (!api.maps?.[mapId]?.plugins?.[pluginId]) {
-        const plugin = api.maps[mapId].plugins[pluginId];
-
-        // call the removed function on the plugin
-        if (typeof plugin.removed === 'function') plugin.removed();
-      }
-
-      delete api.maps[mapId].plugins[pluginId];
-    }
+    // Get the plugin and remove it
+    api.maps[mapId]?.plugins[pluginId]?.removed?.();
+    delete api.maps[mapId].plugins[pluginId];
   };
 
   /**
@@ -239,62 +230,4 @@ export class Plugin {
       }
     }
   };
-
-  /**
-   * A function that will load each plugin on a map then checks if there are a next plugin to load
-   *
-   * @param {string} mapIndex the map index to load the plugin at
-   * @param {string} pluginIndex the plugin index to load
-   */
-  loadPlugin = (mapIndex: number, pluginIndex: number) => {
-    const mapId = Object.keys(api.maps)[mapIndex];
-
-    // check if the map at this index have core packages and if there is a package at the plugin index
-    const corePackages = UIEventProcessor.getCorePackageComponents(mapId);
-    if (corePackages[pluginIndex]) {
-      const pluginId = corePackages[pluginIndex];
-
-      // load the plugin from the script tag or create it
-      this.loadScript(pluginId).then((constructor) => {
-        // add the plugin by passing in the loaded constructor from the script tag
-        this.addPlugin(
-          pluginId,
-          mapId,
-          constructor,
-          toJsonObject({
-            mapId,
-          })
-        );
-
-        // check if there is a next plugin at the current map index
-        if (corePackages[pluginIndex + 1]) {
-          // load next plugin at the same map index
-          this.loadPlugin(mapIndex, pluginIndex + 1);
-          // if no more plugins at current map index then check if there is another map
-        } else if (Object.keys(api.maps)[mapIndex + 1]) {
-          // try to load first plugin at the next map
-          this.loadPlugin(mapIndex + 1, 0);
-        }
-      });
-      // if previous map did not have any packages then try to load packages from next map
-    } else if (Object.keys(api.maps)[mapIndex + 1]) {
-      // load packages at next map if exists
-      this.loadPlugin(mapIndex + 1, 0);
-      // if no plugins loaded then call init callback function
-    }
-  };
-
-  /**
-   * Load plugins provided by map config
-   */
-  loadPlugins = (): void => {
-    // Log
-    logger.logTraceCore('loadPlugins');
-
-    // check if a map exists
-    if (Object.keys(api.maps)[0]) {
-      // start loading core packages on first map and first package
-      this.loadPlugin(0, 0);
-    }
-  };
 }

packages/geoview-core/src/core/components/app-bar/app-bar.tsx

@@ -3,7 +3,7 @@ import { useState, useRef, useEffect, useCallback, Fragment } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Box, List, ListItem, Panel, IconButton } from '@/ui';
 
-import { api, useGeoViewMapId } from '@/app';
+import { AbstractPlugin, TypeJsonObject, TypeJsonValue, api, toJsonObject, useGeoViewMapId } from '@/app';
 import { EVENT_NAMES } from '@/api/events/event-types';
 
 import { payloadIsAButtonPanel, ButtonPanelPayload, PayloadBaseClass } from '@/api/events/payloads';
@@ -16,6 +16,7 @@ import Version from './buttons/version';
 import { getSxClasses } from './app-bar-style';
 import { useUIActiveFocusItem, useUIAppbarComponents } from '@/core/stores/store-interface-and-intial-values/ui-state';
 import { useMapInteraction } from '@/core/stores/store-interface-and-intial-values/map-state';
+import { useGeoViewConfig } from '@/core/stores/geoview-store';
 import { logger } from '@/core/utils/logger';
 
 /**
@@ -39,6 +40,9 @@ export function Appbar(): JSX.Element {
 
   const appBarPanelCloseListenerFunction = () => setSelectedAppbarButtonId('');
 
+  // get store config for app bar tabs to add (similar logic as in footer-tabs)
+  const appBarTabsConfig = useGeoViewConfig()?.appBarTabs;
+
   // #region REACT HOOKS
   const addButtonPanel = useCallback(
     (payload: ButtonPanelPayload) => {
@@ -97,6 +101,31 @@ export function Appbar(): JSX.Element {
   }, [addButtonPanel, mapId, removeButtonPanel, selectedAppBarButtonId]);
   // #endregion
 
+  /**
+   * Create default tabs from configuration parameters (similar logic as in footer-tabs).
+   */
+  useEffect(() => {
+    // Log
+    logger.logTraceUseEffect('app-bar.appBarTabsConfig');
+
+    // Packages tab
+    if (appBarTabsConfig && appBarTabsConfig.tabs.core.includes('basemap-panel')) {
+      // create a new tab by loading the plugin
+      api.plugin
+        .loadScript('basemap-panel')
+        .then((constructor: AbstractPlugin | ((pluginId: string, props: TypeJsonObject) => TypeJsonValue)) => {
+          api.plugin.addPlugin(
+            'basemap-panel',
+            mapId,
+            constructor,
+            toJsonObject({
+              mapId,
+            })
+          );
+        });
+    }
+  }, [appBarTabsConfig, mapId]);
+
   return (
     <Box sx={sxClasses.appBar} ref={appBar}>
       <Box sx={sxClasses.appBarButtons}>