New callback when a selected tab has changed

New onSelected() overridable function for the FooterPlugins to do 'something' when they are selected from the footer tabs

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

@@ -1,5 +1,6 @@
 import { TypeTabs } from '@/ui/tabs/tabs';
 import { AbstractPlugin } from './abstract-plugin';
+import { logger } from '@/core/utils/logger';
 
 /** ******************************************************************************************************************************
  * Footer Plugin abstract class.
@@ -31,6 +32,9 @@ export abstract class FooterPlugin extends AbstractPlugin {
    * Called when a footer plugin is being added
    */
   onAdd(): void {
+    // Log
+    // No need to log, parent class does it well already via added() function.
+
     // Set value to length of tabs(?)
     this.value = this.map()?.footerTabs.tabs.length;
 
@@ -45,7 +49,22 @@ export abstract class FooterPlugin extends AbstractPlugin {
    * Called when a footer plugin is being removed
    */
   onRemove(): void {
+    // Log
+    // No need to log, parent class does it well already via removed() function.
+
     // Remove the footer tab
     if (this.value) this.map()?.footerTabs.removeFooterTab(this.footerProps!.id);
   }
+
+  /**
+   * Called when a footer plugin has been selected in the tabs
+   */
+  onSelected(): void {
+    // Log
+    logger.logTraceCore('footer-plugin.onSelected');
+
+    // TODO: Refactor - Move 'onSelected' in AbstractPlugin class so that AppBar can eventually benefit as well?
+
+    // Nothing else here.. but inherited FooterPlugins might override this method to do stuff when they are selected!
+  }
 }

packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx

@@ -132,6 +132,9 @@ export function FooterTabs(): JSX.Element | null {
    */
   const addTab = useCallback(
     (payload: FooterTabPayload) => {
+      // Log
+      logger.logTraceUseCallback('FOOTER-TABS - defaultFooterTabs', defaultFooterTabs);
+
       const idx = defaultFooterTabs.findIndex((tab) => tab.id === payload.tab.id);
       if (idx !== -1) {
         defaultFooterTabs[idx].content = payload.tab.content;
@@ -214,6 +217,25 @@ export function FooterTabs(): JSX.Element | null {
     setIsCollapsed(!isCollapsed);
   };
 
+  /**
+   * Handles when the selected tab changes
+   * @param tab The newly selected tab
+   */
+  const handleSelectedTabChanged = (tab: TypeTabs) => {
+    // If clicked on a tab with a plugin
+    if (api.maps[mapId].plugins[tab.id]) {
+      // Get the plugin
+      const theSelectedPlugin = api.maps[mapId].plugins[tab.id];
+
+      // A bit hacky, but not much other choice for now...
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      if (typeof (theSelectedPlugin as any).onSelected === 'function') {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (theSelectedPlugin as any).onSelected();
+      }
+    }
+  };
+
   const eventFooterTabsCreateListenerFunction = (payload: PayloadBaseClass) => {
     if (payloadIsAFooterTab(payload)) {
       addTab(payload);
@@ -249,7 +271,7 @@ export function FooterTabs(): JSX.Element | null {
     // listen on tab removal
     api.event.on(EVENT_NAMES.FOOTER_TABS.EVENT_FOOTER_TABS_TAB_REMOVE, eventFooterTabsRemoveListenerFunction, mapId);
 
-    // listen for tab selection
+    // listen for tab selection when selecting via the api call (NOT when user clicks on a tab, this is only for api calls)
     api.event.on(EVENT_NAMES.FOOTER_TABS.EVENT_FOOTER_TABS_TAB_SELECT, eventFooterTabsSelectListenerFunction, mapId);
     return () => {
       api.event.off(EVENT_NAMES.FOOTER_TABS.EVENT_FOOTER_TABS_TAB_CREATE, mapId, eventFooterTabsCreateListenerFunction);
@@ -398,6 +420,7 @@ export function FooterTabs(): JSX.Element | null {
       <Tabs
         isCollapsed={isCollapsed}
         handleCollapse={handleCollapse}
+        onSelectedTabChanged={handleSelectedTabChanged}
         selectedTab={selectedTab}
         tabsProps={{ variant: 'scrollable' }}
         tabs={footerTabs}

packages/geoview-core/src/ui/tabs/tabs.tsx

@@ -35,6 +35,7 @@ export interface TypeTabsProps {
   isCollapsed?: boolean;
   handleCollapse?: () => void | undefined;
   TabContentVisibilty?: string | undefined;
+  onSelectedTabChanged?: (tab: TypeTabs) => void;
 }
 
 /**
@@ -44,7 +45,7 @@ export interface TypeTabsProps {
  * @returns {JSX.Element} returns the tabs ui
  */
 export function Tabs(props: TypeTabsProps): JSX.Element {
-  const { tabs, rightButtons, selectedTab, isCollapsed, handleCollapse, TabContentVisibilty = 'inherit' } = props;
+  const { tabs, rightButtons, selectedTab, isCollapsed, handleCollapse, onSelectedTabChanged, TabContentVisibilty = 'inherit' } = props;
 
   const { t } = useTranslation<string>();
 
@@ -65,6 +66,9 @@ export function Tabs(props: TypeTabsProps): JSX.Element {
   const handleChange = (event: SyntheticEvent<Element, Event>, newValue: number) => {
     setValue(newValue);
     setActiveFooterTab(t(tabs[newValue].label).toLowerCase());
+
+    // Callback
+    onSelectedTabChanged?.(tabs[newValue]);
   };
 
   /**

packages/geoview-geochart/src/index.tsx

@@ -73,6 +73,14 @@ class GeoChartFooterPlugin extends FooterPlugin {
     };
   }
 
+  onSelected(): void {
+    // Call parent
+    super.onSelected();
+
+    // When the GeoChart Plugin in the Footer is selected, we redraw the chart, in case
+    this.redrawChart();
+  }
+
   /**
    * Callable plugin function to emit a Chart config event in order to update the Chart configuration on demand.
    * @param config PluginGeoChartConfig<ChartType> The GeoChart Config