From 53b6be2237f647a1a5864da9646af55d069af4c5 Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Wed, 18 Dec 2024 11:42:26 -0300
Subject: [PATCH 1/4] refactor(config): evolve EnvConfigProvider into
 VedaUIProvider

- Transform environment config into comprehensive Veda UI configuration
- Add framework-agnostic navigation handling
- Extract environment and navigation into separate type-safe interfaces
- Add useVedaUI hook with context validation
- Improve TypeScript types and error handling
---
 .../components/common/blocks/block-map.tsx    |  6 +-
 .../common/blocks/scrollytelling/index.tsx    |  5 +-
 .../components/common/map/map-component.tsx   | 12 +---
 .../common/map/style-generators/basemap.tsx   |  6 +-
 .../exploration/components/map/index.tsx      |  7 +-
 .../exploration/components/map/layer.tsx      |  7 +-
 .../hooks/use-analysis-data-request.ts        |  7 +-
 app/scripts/context/env-config.tsx            | 27 -------
 app/scripts/context/veda-ui-provider.tsx      | 72 +++++++++++++++++++
 app/scripts/index.ts                          |  4 +-
 app/scripts/main.tsx                          |  6 +-
 11 files changed, 97 insertions(+), 62 deletions(-)
 delete mode 100644 app/scripts/context/env-config.tsx
 create mode 100644 app/scripts/context/veda-ui-provider.tsx

diff --git a/app/scripts/components/common/blocks/block-map.tsx b/app/scripts/components/common/blocks/block-map.tsx
index 35f8db89a..1b6d7a175 100644
--- a/app/scripts/components/common/blocks/block-map.tsx
+++ b/app/scripts/components/common/blocks/block-map.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect, useContext } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { MapboxOptions } from 'mapbox-gl';
 import * as dateFns from 'date-fns';
@@ -37,7 +37,7 @@ import {
 } from '$components/exploration/data-utils-no-faux-module';
 import { useReconcileWithStacMetadata } from '$components/exploration/hooks/use-stac-metadata-datasets';
 import { ProjectionOptions, VedaDatum, DatasetData } from '$types/veda';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 export const mapHeight = '32rem';
 const Carto = styled.div`
@@ -185,7 +185,7 @@ function MapBlock(props: MapBlockProps) {
 
   const [layers, setLayers] = useState<VizDataset[]>(layersToFetch);
 
-  const { envApiStacEndpoint } = useContext(EnvConfigContext);
+  const { envApiStacEndpoint } = useVedaUI();
 
   useReconcileWithStacMetadata(layers, setLayers, envApiStacEndpoint);
 
diff --git a/app/scripts/components/common/blocks/scrollytelling/index.tsx b/app/scripts/components/common/blocks/scrollytelling/index.tsx
index 111a2d13c..b36b7bda8 100644
--- a/app/scripts/components/common/blocks/scrollytelling/index.tsx
+++ b/app/scripts/components/common/blocks/scrollytelling/index.tsx
@@ -2,7 +2,6 @@ import React, {
   Children,
   ReactElement,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -52,7 +51,7 @@ import {
   formatSingleDate,
   reconcileVizDataset
 } from '$components/common/map/utils';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 type ResolvedScrollyMapLayer = {
   vizDataset: VizDatasetSuccess;
@@ -260,7 +259,7 @@ const MAP_OPTIONS = {
 function Scrollytelling(props) {
   const { children } = props;
 
-  const { envApiStacEndpoint } = useContext(EnvConfigContext);
+  const { envApiStacEndpoint } = useVedaUI();
 
   const { isHeaderHidden, headerHeight, wrapperHeight } =
     useSlidingStickyHeaderProps();
diff --git a/app/scripts/components/common/map/map-component.tsx b/app/scripts/components/common/map/map-component.tsx
index a421e34de..c7fad3e25 100644
--- a/app/scripts/components/common/map/map-component.tsx
+++ b/app/scripts/components/common/map/map-component.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  ReactElement,
-  useMemo,
-  Ref,
-  useContext
-} from 'react';
+import React, { useCallback, ReactElement, useMemo, Ref } from 'react';
 import ReactMapGlMap, { LngLatBoundsLike, MapRef } from 'react-map-gl';
 import { debounce } from 'lodash';
 import useMapStyle from './hooks/use-map-style';
@@ -13,7 +7,7 @@ import { convertProjectionToMapbox } from './controls/map-options/projections';
 import { ProjectionOptions } from '$types/veda';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 const maxMapBounds: LngLatBoundsLike = [
   [-540, -90], // SW
@@ -35,7 +29,7 @@ export default function MapComponent({
   onMapLoad?: () => void;
   interactive?: boolean;
 }) {
-  const { envMapboxToken } = useContext(EnvConfigContext);
+  const { envMapboxToken } = useVedaUI();
 
   const { initialViewState, setInitialViewState, mainId, comparedId } =
     useMapsContext();
diff --git a/app/scripts/components/common/map/style-generators/basemap.tsx b/app/scripts/components/common/map/style-generators/basemap.tsx
index c3805f996..7eafc6398 100644
--- a/app/scripts/components/common/map/style-generators/basemap.tsx
+++ b/app/scripts/components/common/map/style-generators/basemap.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { AnySourceImpl, Layer, Style } from 'mapbox-gl';
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   BasemapId,
   getStyleUrl,
@@ -9,7 +9,7 @@ import {
 } from '../controls/map-options/basemap';
 import { ExtendedLayer } from '../types';
 import useMapStyle from '../hooks/use-map-style';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 interface BasemapProps {
   basemapStyleId?: BasemapId;
@@ -33,7 +33,7 @@ export function Basemap({
   labelsOption = true,
   boundariesOption = true
 }: BasemapProps) {
-  const { envMapboxToken } = useContext(EnvConfigContext);
+  const { envMapboxToken } = useVedaUI();
   const { updateStyle } = useMapStyle();
   const [baseStyle, setBaseStyle] = useState<Style | undefined>(undefined);
 
diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
index d7453df91..906f892a0 100644
--- a/app/scripts/components/exploration/components/map/index.tsx
+++ b/app/scripts/components/exploration/components/map/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { ProjectionOptions } from 'veda';
 import { useReconcileWithStacMetadata } from '../../hooks/use-stac-metadata-datasets';
@@ -26,7 +26,7 @@ import { usePreviousValue } from '$utils/use-effect-previous';
 import { ExtendedStyle } from '$components/common/map/styles';
 import DrawControl from '$components/common/map/controls/aoi';
 import CustomAoIControl from '$components/common/map/controls/aoi/custom-aoi-control';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 interface ExplorationMapProps {
   datasets: TimelineDataset[];
@@ -36,8 +36,7 @@ interface ExplorationMapProps {
 }
 
 export function ExplorationMap(props: ExplorationMapProps) {
-  const { envApiStacEndpoint, envMapboxToken } =
-    useContext(EnvConfigContext);
+  const { envApiStacEndpoint, envMapboxToken } = useVedaUI();
 
   const { datasets, setDatasets, selectedDay, selectedCompareDay } = props;
 
diff --git a/app/scripts/components/exploration/components/map/layer.tsx b/app/scripts/components/exploration/components/map/layer.tsx
index cdc1053e5..10e9306f5 100644
--- a/app/scripts/components/exploration/components/map/layer.tsx
+++ b/app/scripts/components/exploration/components/map/layer.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
 // Avoid error: node_modules/date-fns/esm/index.js does not export 'default'
 import * as dateFns from 'date-fns';
 
@@ -11,7 +11,7 @@ import { VectorTimeseries } from '$components/common/map/style-generators/vector
 import { ZarrTimeseries } from '$components/common/map/style-generators/zarr-timeseries';
 import { CMRTimeseries } from '$components/common/map/style-generators/cmr-timeseries';
 import { ActionStatus } from '$utils/status';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 interface LayerProps {
   id: string;
@@ -22,8 +22,7 @@ interface LayerProps {
 }
 
 export function Layer(props: LayerProps) {
-  const { envApiStacEndpoint, envApiRasterEndpoint } =
-    useContext(EnvConfigContext);
+  const { envApiStacEndpoint, envApiRasterEndpoint } = useVedaUI();
 
   const { id: layerId, dataset, order, selectedDay, onStatusChange } = props;
   const { isVisible, opacity, colorMap, scale } = dataset.settings;
diff --git a/app/scripts/components/exploration/hooks/use-analysis-data-request.ts b/app/scripts/components/exploration/hooks/use-analysis-data-request.ts
index 35c5fe658..039fdaf53 100644
--- a/app/scripts/components/exploration/hooks/use-analysis-data-request.ts
+++ b/app/scripts/components/exploration/hooks/use-analysis-data-request.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useContext } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { FeatureCollection, Polygon } from 'geojson';
 import { PrimitiveAtom, useAtom, useAtomValue } from 'jotai';
@@ -15,7 +15,7 @@ import {
 } from '../types.d.ts';
 import { MAX_QUERY_NUM } from '../constants';
 import useAois from '$components/common/map/controls/hooks/use-aois';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 export function useAnalysisController() {
   const [controller, setController] = useAtom(analysisControllerAtom);
@@ -72,8 +72,7 @@ export function useAnalysisDataRequest({
 }) {
   const queryClient = useQueryClient();
 
-  const { envApiRasterEndpoint, envApiStacEndpoint } =
-    useContext(EnvConfigContext);
+  const { envApiRasterEndpoint, envApiStacEndpoint } = useVedaUI();
 
   const selectedInterval = useAtomValue(selectedIntervalAtom);
   const { features } = useAois();
diff --git a/app/scripts/context/env-config.tsx b/app/scripts/context/env-config.tsx
deleted file mode 100644
index 6c7e8e28c..000000000
--- a/app/scripts/context/env-config.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { createContext } from 'react';
-
-interface EnvConfig {
-  envMapboxToken: string;
-  envApiStacEndpoint: string;
-  envApiRasterEndpoint: string;
-}
-
-export const EnvConfigContext = createContext<EnvConfig>({
-  envMapboxToken: '',
-  envApiStacEndpoint: '',
-  envApiRasterEndpoint: ''
-});
-
-export function EnvConfigProvider({
-  config,
-  children
-}: {
-  config: EnvConfig;
-  children: any;
-}) {
-  return (
-    <EnvConfigContext.Provider value={config}>
-      {children}
-    </EnvConfigContext.Provider>
-  );
-}
diff --git a/app/scripts/context/veda-ui-provider.tsx b/app/scripts/context/veda-ui-provider.tsx
new file mode 100644
index 000000000..2ec96eb45
--- /dev/null
+++ b/app/scripts/context/veda-ui-provider.tsx
@@ -0,0 +1,72 @@
+import React, { createContext, ReactNode, useContext } from 'react';
+
+interface EnvironmentConfig {
+  envMapboxToken: string;
+  envApiStacEndpoint: string;
+  envApiRasterEndpoint: string;
+}
+
+interface NavigationConfig {
+  LinkComponent: React.ElementType<Record<string, any>>;
+  linkPropName: string;
+}
+
+const defaultNavigationConfig: NavigationConfig = {
+  LinkComponent: 'a',
+  linkPropName: 'href'
+};
+
+interface VedaUIConfig extends EnvironmentConfig {
+  navigation: NavigationConfig;
+}
+
+interface VedaUIProviderProps {
+  config: EnvironmentConfig & { navigation?: Partial<NavigationConfig> };
+  children: ReactNode;
+}
+
+const VedaUIContext = createContext<VedaUIConfig | null>(null);
+VedaUIContext.displayName = 'VedaUIContext';
+
+function validateConfig(config: VedaUIConfig) {
+  const requiredFields = [
+    'envMapboxToken',
+    'envApiStacEndpoint',
+    'envApiRasterEndpoint'
+  ] as const;
+
+  requiredFields.forEach((field) => {
+    if (!config[field]) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `VedaUIProvider: ${field} is required for proper functionality.`
+      );
+    }
+  });
+}
+
+export function useVedaUI(): VedaUIConfig {
+  const context = useContext(VedaUIContext);
+  if (!context) {
+    throw new Error('useVedaUI must be used within a VedaUIProvider');
+  }
+  return context;
+}
+
+export function VedaUIProvider({ config, children }: VedaUIProviderProps) {
+  const fullConfig: VedaUIConfig = {
+    ...config,
+    navigation: {
+      ...defaultNavigationConfig,
+      ...config.navigation
+    }
+  };
+
+  validateConfig(fullConfig);
+
+  return (
+    <VedaUIContext.Provider value={fullConfig}>
+      {children}
+    </VedaUIContext.Provider>
+  );
+}
diff --git a/app/scripts/index.ts b/app/scripts/index.ts
index 45c191248..6279d719e 100644
--- a/app/scripts/index.ts
+++ b/app/scripts/index.ts
@@ -27,7 +27,7 @@ import ExplorationAndAnalysis from '$components/exploration';
 import useTimelineDatasetAtom from '$components/exploration/hooks/use-timeline-dataset-atom';
 import { timelineDatasetsAtom } from '$components/exploration/atoms/datasets';
 import { DatasetSelectorModal } from '$components/exploration/components/dataset-selector-modal';
-import { EnvConfigProvider } from '$context/env-config';
+import { VedaUIProvider } from '$context/veda-ui-provider';
 import {
   datasetLayersAtom,
   externalDatasetsAtom
@@ -66,7 +66,7 @@ export {
   PageHero,
   PageHeader,
   ReactQueryProvider,
-  EnvConfigProvider,
+  VedaUIProvider,
   StoriesHubContent,
   ExplorationAndAnalysis,
   DatasetSelectorModal,
diff --git a/app/scripts/main.tsx b/app/scripts/main.tsx
index b5dc5650e..5d3196e7c 100644
--- a/app/scripts/main.tsx
+++ b/app/scripts/main.tsx
@@ -49,7 +49,7 @@ import {
   STORIES_PATH,
   EXPLORATION_PATH
 } from '$utils/routes';
-import { EnvConfigProvider } from '$context/env-config';
+import { VedaUIProvider } from '$context/veda-ui-provider';
 
 const composingComponents = [
   // Add contexts here.
@@ -57,7 +57,7 @@ const composingComponents = [
   ReactQueryProvider,
   LayoutRootContextProvider,
   ({ children }) => (
-    <EnvConfigProvider
+    <VedaUIProvider
       config={{
         envMapboxToken: process.env.MAPBOX_TOKEN ?? '',
         envApiStacEndpoint: process.env.API_STAC_ENDPOINT ?? '',
@@ -65,7 +65,7 @@ const composingComponents = [
       }}
     >
       {children}
-    </EnvConfigProvider>
+    </VedaUIProvider>
   )
 ];
 

From 57267d4244cf0e6316adc040e827b12bd29a5a83 Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Wed, 18 Dec 2024 11:46:08 -0300
Subject: [PATCH 2/4] refactor(components): apply formatting to
 DatasetSelectorModal

---
 .../dataset-selector-modal/index.tsx          | 59 ++++++++++++-------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
index 12548934b..caf2153c6 100644
--- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
+++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
@@ -1,11 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import {
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader
-} from '@devseed-ui/modal';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@devseed-ui/modal';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import {
   reconcileDatasets,
@@ -74,25 +69,36 @@ interface DatasetSelectorModalProps {
 }
 
 export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
-  const { revealed, linkProperties, datasets, datasetPathName, timelineDatasets, setTimelineDatasets, close } = props;
-  const { LinkElement , pathAttributeKeyName } = linkProperties as { LinkElement: React.ElementType, pathAttributeKeyName: string };
+  const {
+    revealed,
+    linkProperties,
+    datasets,
+    datasetPathName,
+    timelineDatasets,
+    setTimelineDatasets,
+    close
+  } = props;
+  const { LinkElement, pathAttributeKeyName } = linkProperties as {
+    LinkElement: React.ElementType;
+    pathAttributeKeyName: string;
+  };
 
   const datasetLayers = getLayersFromDataset(datasets);
 
   const [selectedIds, setSelectedIds] = useState<string[]>(
     timelineDatasets.map((dataset) => dataset.data.id)
   );
-  const enhancedDatasetLayers = datasetLayers.flatMap(e => e);
+  const enhancedDatasetLayers = datasetLayers.flatMap((e) => e);
 
   // Use Jotai controlled atoms for query parameter manipulation on new E&A page
-  const {search: searchTerm, taxonomies, onAction } = useFiltersWithURLAtom();
+  const { search: searchTerm, taxonomies, onAction } = useFiltersWithURLAtom();
 
   useEffect(() => {
     // Reset filter when modal is hidden
-    if(!revealed) {
+    if (!revealed) {
       onAction(FilterActions.CLEAR);
     }
-  },[revealed, onAction]);
+  }, [revealed, onAction]);
 
   useEffect(() => {
     setSelectedIds(timelineDatasets.map((dataset) => dataset.data.id));
@@ -104,9 +110,16 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
     );
     onAction(FilterActions.CLEAR);
     close();
-  }, [close, selectedIds, timelineDatasets, enhancedDatasetLayers, setTimelineDatasets, onAction]);
-
-  const linkElementProps = {[pathAttributeKeyName]: datasetPathName};
+  }, [
+    close,
+    selectedIds,
+    timelineDatasets,
+    enhancedDatasetLayers,
+    setTimelineDatasets,
+    onAction
+  ]);
+
+  const linkElementProps = { [pathAttributeKeyName]: datasetPathName };
   return (
     <DatasetModal
       id='modal'
@@ -114,9 +127,7 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
       title='Select data layers'
       revealed={revealed}
       onCloseClick={close}
-      renderHeadline={() => (
-        <RenderModalHeader />
-      )}
+      renderHeadline={() => <RenderModalHeader />}
       content={
         <CatalogContent
           datasets={datasets}
@@ -129,7 +140,15 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
           emptyStateContent={
             <>
               <p>There are no datasets to show with the selected filters.</p>
-              <p>This tool allows the exploration and analysis of time-series datasets in raster format. For a comprehensive list of available datasets, please visit the <LinkElement {...linkElementProps} target='_blank'>Data Catalog</LinkElement>.</p>
+              <p>
+                This tool allows the exploration and analysis of time-series
+                datasets in raster format. For a comprehensive list of available
+                datasets, please visit the{' '}
+                <LinkElement {...linkElementProps} target='_blank'>
+                  Data Catalog
+                </LinkElement>
+                .
+              </p>
             </>
           }
         />
@@ -150,4 +169,4 @@ export interface DatasetLayerCardProps {
   searchTerm: string;
   selected: boolean;
   onDatasetClick: () => void;
-}
\ No newline at end of file
+}

From 22cf41f49db863415970950bbe4e38bb01c81fdd Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Wed, 18 Dec 2024 12:13:47 -0300
Subject: [PATCH 3/4] fix(config): check for empty env variables

---
 app/scripts/context/veda-ui-provider.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/scripts/context/veda-ui-provider.tsx b/app/scripts/context/veda-ui-provider.tsx
index 2ec96eb45..69ad4059c 100644
--- a/app/scripts/context/veda-ui-provider.tsx
+++ b/app/scripts/context/veda-ui-provider.tsx
@@ -36,11 +36,10 @@ function validateConfig(config: VedaUIConfig) {
   ] as const;
 
   requiredFields.forEach((field) => {
-    if (!config[field]) {
+    const value = config[field];
+    if (!value || (typeof value === 'string' && value.trim().length === 0)) {
       // eslint-disable-next-line no-console
-      console.warn(
-        `VedaUIProvider: ${field} is required for proper functionality.`
-      );
+      console.warn(`VedaUIProvider: ${field} is required and cannot be empty.`);
     }
   });
 }

From bed9af9f420e1766e1ae606928ad1eb983ad61b2 Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Wed, 18 Dec 2024 12:42:17 -0300
Subject: [PATCH 4/4] refactor(components): migrate DatasetSelectorModal to use
 VedaUIProvider

- Remove custom link handling in favor of VedaUIProvider's Link
- Configure VedaUIProvider with react-router Link component
- Remove SmartLink from exploration container
- Update DatasetSelectorModal to use new Link component
---
 .../dataset-selector-modal/index.tsx          | 29 ++++++---------
 .../components/exploration/container.tsx      | 12 ++-----
 app/scripts/context/veda-ui-provider.tsx      | 35 +++++++++++++++----
 app/scripts/main.tsx                          | 14 ++++++--
 4 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
index caf2153c6..6a82e847a 100644
--- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
+++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from '@devseed-ui/modal';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
+
 import {
   reconcileDatasets,
   getLayersFromDataset
@@ -10,11 +11,13 @@ import { TimelineDataset } from '../../types.d.ts';
 
 import RenderModalHeader from './header';
 import ModalFooterRender from './footer';
+import { DATASETS_PATH } from '$utils/routes';
 import CatalogContent from '$components/common/catalog/catalog-content';
 import { useFiltersWithURLAtom } from '$components/common/catalog/controls/hooks/use-filters-with-query';
 import { FilterActions } from '$components/common/catalog/utils';
 
-import { DatasetData, LinkProperties, DatasetLayer } from '$types/veda';
+import { DatasetData, DatasetLayer } from '$types/veda';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 const DatasetModal = styled(Modal)`
   z-index: ${themeVal('zIndices.modal')};
@@ -61,27 +64,18 @@ const DatasetModal = styled(Modal)`
 interface DatasetSelectorModalProps {
   revealed: boolean;
   close: () => void;
-  linkProperties?: LinkProperties;
   datasets: DatasetData[];
-  datasetPathName: string;
   timelineDatasets: TimelineDataset[];
   setTimelineDatasets: (datasets: TimelineDataset[]) => void;
 }
 
 export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
+  const { revealed, datasets, timelineDatasets, setTimelineDatasets, close } =
+    props;
+
   const {
-    revealed,
-    linkProperties,
-    datasets,
-    datasetPathName,
-    timelineDatasets,
-    setTimelineDatasets,
-    close
-  } = props;
-  const { LinkElement, pathAttributeKeyName } = linkProperties as {
-    LinkElement: React.ElementType;
-    pathAttributeKeyName: string;
-  };
+    navigation: { LinkComponent }
+  } = useVedaUI();
 
   const datasetLayers = getLayersFromDataset(datasets);
 
@@ -119,7 +113,6 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
     onAction
   ]);
 
-  const linkElementProps = { [pathAttributeKeyName]: datasetPathName };
   return (
     <DatasetModal
       id='modal'
@@ -144,9 +137,9 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
                 This tool allows the exploration and analysis of time-series
                 datasets in raster format. For a comprehensive list of available
                 datasets, please visit the{' '}
-                <LinkElement {...linkElementProps} target='_blank'>
+                <LinkComponent to={DATASETS_PATH} target='_blank'>
                   Data Catalog
-                </LinkElement>
+                </LinkComponent>
                 .
               </p>
             </>
diff --git a/app/scripts/components/exploration/container.tsx b/app/scripts/components/exploration/container.tsx
index 16020a585..75c5b15ed 100644
--- a/app/scripts/components/exploration/container.tsx
+++ b/app/scripts/components/exploration/container.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { TourProvider } from '@reactour/tour';
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
 import { DevTools } from 'jotai-devtools';
 import { useAtom, useSetAtom } from 'jotai';
 import { PopoverTourComponent, TourManager } from './tour-manager';
@@ -11,12 +11,11 @@ import useTimelineDatasetAtom from './hooks/use-timeline-dataset-atom';
 import { externalDatasetsAtom } from './atoms/datasetLayers';
 import ExplorationAndAnalysis from '.';
 import { urlAtom } from '$utils/params-location-atom/url';
-import { DATASETS_PATH, EXPLORATION_PATH } from '$utils/routes';
+import { EXPLORATION_PATH } from '$utils/routes';
 import { PageMainContent } from '$styles/page';
 
 import { LayoutProps } from '$components/common/layout-root';
 import PageHero from '$components/common/page-hero';
-import SmartLink from '$components/common/smart-link';
 
 /**
  * @VEDA2-REFACTOR-WORK
@@ -55,11 +54,6 @@ export default function ExplorationAndAnalysisContainer() {
     navigate(path);
   };
 
-  const linkProps = {
-    LinkElement: SmartLink,
-    pathAttributeKeyName: 'to'
-  };
-
   return (
     <TourProvider
       steps={[]}
@@ -87,8 +81,6 @@ export default function ExplorationAndAnalysisContainer() {
           datasets={allExploreDatasets}
           timelineDatasets={timelineDatasets}
           setTimelineDatasets={setTimelineDatasets}
-          datasetPathName={DATASETS_PATH}
-          linkProperties={linkProps} // @TODO: To be removed and replaced with handleNavigation callback
         />
       </PageMainContent>
     </TourProvider>
diff --git a/app/scripts/context/veda-ui-provider.tsx b/app/scripts/context/veda-ui-provider.tsx
index 69ad4059c..f02de0408 100644
--- a/app/scripts/context/veda-ui-provider.tsx
+++ b/app/scripts/context/veda-ui-provider.tsx
@@ -6,22 +6,31 @@ interface EnvironmentConfig {
   envApiRasterEndpoint: string;
 }
 
+interface LinkProps {
+  to: string;
+  children: ReactNode;
+  [key: string]: any;
+}
+
 interface NavigationConfig {
   LinkComponent: React.ElementType<Record<string, any>>;
   linkPropName: string;
 }
 
-const defaultNavigationConfig: NavigationConfig = {
+const defaultNavigation: NavigationConfig = {
   LinkComponent: 'a',
   linkPropName: 'href'
 };
 
 interface VedaUIConfig extends EnvironmentConfig {
   navigation: NavigationConfig;
+  Link: React.FC<LinkProps>;
 }
 
 interface VedaUIProviderProps {
-  config: EnvironmentConfig & { navigation?: Partial<NavigationConfig> };
+  config: EnvironmentConfig & {
+    navigation?: Partial<NavigationConfig>;
+  };
   children: ReactNode;
 }
 
@@ -37,7 +46,7 @@ function validateConfig(config: VedaUIConfig) {
 
   requiredFields.forEach((field) => {
     const value = config[field];
-    if (!value || (typeof value === 'string' && value.trim().length === 0)) {
+    if (!value.trim()) {
       // eslint-disable-next-line no-console
       console.warn(`VedaUIProvider: ${field} is required and cannot be empty.`);
     }
@@ -53,12 +62,24 @@ export function useVedaUI(): VedaUIConfig {
 }
 
 export function VedaUIProvider({ config, children }: VedaUIProviderProps) {
+  const navigation = {
+    ...defaultNavigation,
+    ...config.navigation
+  };
+
+  const Link: React.FC<LinkProps> = ({ to, children, ...props }) => {
+    const { LinkComponent, linkPropName } = navigation;
+    return (
+      <LinkComponent {...{ [linkPropName]: to }} {...props}>
+        {children}
+      </LinkComponent>
+    );
+  };
+
   const fullConfig: VedaUIConfig = {
     ...config,
-    navigation: {
-      ...defaultNavigationConfig,
-      ...config.navigation
-    }
+    navigation,
+    Link
   };
 
   validateConfig(fullConfig);
diff --git a/app/scripts/main.tsx b/app/scripts/main.tsx
index 5d3196e7c..1571e8b00 100644
--- a/app/scripts/main.tsx
+++ b/app/scripts/main.tsx
@@ -1,7 +1,13 @@
 import React, { lazy, Suspense, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import T from 'prop-types';
-import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom';
+import {
+  Link,
+  BrowserRouter,
+  Route,
+  Routes,
+  useLocation
+} from 'react-router-dom';
 
 import '$styles/styles.scss';
 
@@ -61,7 +67,11 @@ const composingComponents = [
       config={{
         envMapboxToken: process.env.MAPBOX_TOKEN ?? '',
         envApiStacEndpoint: process.env.API_STAC_ENDPOINT ?? '',
-        envApiRasterEndpoint: process.env.API_RASTER_ENDPOINT ?? ''
+        envApiRasterEndpoint: process.env.API_RASTER_ENDPOINT ?? '',
+        navigation: {
+          LinkComponent: Link,
+          linkPropName: 'to'
+        }
       }}
     >
       {children}