Removed the loadPlugin(s) functions as we're now loading plugins 3 wa…

…ys, not just corePackages anymore. added support to load plugins in the app-bar similar to footer-tabs. core packages simplified, now only for swiper at the moment. Fix now that logTraceUseEffectMount is officially removed. Can now trace detailed what layer is holding the map ready state hostage.
Alex-NRCan · Jan 23, 2024 · 72b0ea2 · 72b0ea2
1 parent 91fc6c7
commit 72b0ea2
Show file tree

Hide file tree

Showing 26 changed files with 259 additions and 124 deletions.
diff --git a/packages/geoview-core/public/configs/loading-packages-config.json b/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"]
 }
diff --git a/packages/geoview-core/public/configs/package-bp1-lcc-config.json b/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"]

diff --git a/packages/geoview-core/public/configs/package-bp2-wm-config.json b/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"]

diff --git a/packages/geoview-core/public/configs/package-footer-panel-geochart-map1-config.json b/packages/geoview-core/public/configs/package-footer-panel-geochart-map1-config.json
@@ -149,9 +149,7 @@
       ]
     }
   },
-  "corePackages": [
-    "geochart"
-  ],
+  "corePackages": [],
   "suportedLanguages": [
     "en",
     "fr"

diff --git a/packages/geoview-core/public/configs/package-footer-panel-geochart-map2-config.json b/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"

diff --git a/packages/geoview-core/public/configs/package-geochart-map1-config.json b/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"]
 }
diff --git a/packages/geoview-core/public/configs/package-geochart-map2-config.json b/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"]
 }
diff --git a/packages/geoview-core/public/configs/package-swiper-config.json b/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"]

diff --git a/packages/geoview-core/public/configs/package-time-slider-config.json b/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"]
 }
diff --git a/packages/geoview-core/public/configs/package-time-slider2-config.json b/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"]
 }
diff --git a/packages/geoview-core/public/configs/raw-data-table.json b/packages/geoview-core/public/configs/raw-data-table.json
@@ -133,7 +133,6 @@
       "core": ["legend", "layers", "details", "data-table"]
     }
   },
-  "corePackages": [],
   "externalPackages": [],
   "suportedLanguages": [
     "fr",

diff --git a/packages/geoview-core/public/configs/sample-config.json b/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"

diff --git a/packages/geoview-core/schema.json b/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"
         },

diff --git a/packages/geoview-core/src/api/event-processors/index.ts b/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);
 }
diff --git a/packages/geoview-core/src/api/plugin/plugin.ts b/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);
-    }
-  };
 }
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
@@ -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}>